/* =========================================================
   ATMPRQ — Design system
   Display : Barlow Condensed (signalétique industrielle)
   Corps   : Source Serif 4 (chaleur humaine, récits)
   Utile   : IBM Plex Mono (données, repères, étiquettes)
   Signature : les granules — pastilles de plastique recyclé
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,500;1,8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* couleurs de marque — dérivées directement du logo ATMPRQ */
  --ink:        #071A2E;   /* bleu marine quasi noir — fonds sombres, texte fort */
  --ink-soft:   #102843;
  --forest:     #003CA6;   /* bleu ATMPRQ — couleur signature (identique au logo) */
  --forest-2:   #1D57B8;
  --forest-3:   #2D6FC4;
  --amber:      #00953B;   /* vert ATMPRQ — accent, appels à l'action (identique au logo) */
  --amber-dark: #04732E;
  --amber-tint: #BEEBCB;   /* vert pâle — libellés sur fonds foncés */
  --paper:      #EEF2F6;   /* papier bleuté pâle — fond alterné */
  --paper-2:    #E4EAF1;
  --cream:      #FBFCFE;   /* blanc froid — fond principal */
  --line:       #D7DEE6;

  /* palette des granules (types de plastiques traités) */
  --g-abs:  #003CA6;  /* ABS  — bleu ATMPRQ */
  --g-pet:  #00953B;  /* PET  — vert ATMPRQ */
  --g-pvc:  #B5573F;  /* PVC  — argile */
  --g-pp:   #2D6FC4;  /* PP   — bleu clair */
  --g-hdpe: #04732E;  /* HDPE — vert profond */
  --g-ps:   #5C7A99;  /* PS   — ardoise */

  --radius: 3px;
  --disp: 'Barlow Condensed', sans-serif;
  --body: 'Source Serif 4', serif;
  --mono: 'IBM Plex Mono', monospace;

  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--disp);
  font-weight:800;
  line-height:1.05;
  letter-spacing:.2px;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.6rem,6vw,4.6rem); font-weight:800; }
h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800; }
h3{ font-size:clamp(1.3rem,2vw,1.6rem); font-weight:700; }
p{ margin:0 0 1.1em; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--forest-2);
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:9px; height:9px; border-radius:50%;
  background:var(--amber);
  display:inline-block;
}

/* ---------- boutons ---------- */
.btn{
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.6em;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--amber); color:var(--ink); }
.btn-primary:hover{ background:var(--amber-dark); }
.btn-outline{ border-color:currentColor; color:var(--cream); }
.btn-outline:hover{ background:rgba(255,255,255,.1); }
.btn-dark{ background:var(--forest); color:var(--cream); }
.btn-dark:hover{ background:var(--ink); }

/* ---------- granule (signature) ---------- */
.granule{
  display:inline-block;
  width:.55em; height:.55em;
  border-radius:50%;
  margin-right:.6em;
  flex:none;
  box-shadow: inset -2px -2px 3px rgba(0,0,0,.25), inset 1px 1px 2px rgba(255,255,255,.3);
}
ul.granule-list{ list-style:none; margin:0 0 1.4em; padding:0; }
ul.granule-list li{ display:flex; align-items:baseline; margin-bottom:.7em; }
ul.granule-list li .granule{ margin-top:.35em; align-self:flex-start; }

.granule-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.granule-field span{
  position:absolute;
  border-radius:50%;
  opacity:.55;
  animation: drift 14s ease-in-out infinite;
  box-shadow: inset -3px -3px 5px rgba(0,0,0,.3), inset 2px 2px 3px rgba(255,255,255,.35);
}
@keyframes drift{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg); }
  50%{ transform:translateY(-18px) translateX(8px) rotate(12deg); }
}

/* ---------- header / nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(251,252,254,.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(7,26,46,.02);
  transition:background .2s ease;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:1320px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:.7em; color:var(--ink); flex:none; }
.brand img{ height:68px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  color:var(--ink-soft); font-family:var(--mono); font-size:.94rem; font-weight:600; letter-spacing:.01em;
  padding:1em .85em; border-radius:var(--radius); transition:color .18s, background .18s;
  position:relative; white-space:nowrap;
}
.main-nav a:hover, .main-nav a.active{ color:var(--forest); background:rgba(0,60,166,.07); }
.main-nav a.active::after{
  content:""; position:absolute; left:1em; right:1em; bottom:.4em; height:2px; background:var(--amber);
}
.main-nav a.cta{ background:var(--amber); color:#fff; font-weight:700; margin-left:.6em; }
.main-nav a.cta:hover{ background:var(--amber-dark); }

.menu-btn{
  display:none; background:none; border:none; color:var(--forest); cursor:pointer; padding:8px;
}
.menu-btn svg{ width:30px; height:30px; }

@media (max-width: 980px){
  .brand img{ height:56px; }
  .main-nav{
    position:fixed; inset:84px 0 0 0; background:var(--cream);
    flex-direction:column; align-items:stretch; gap:0;
    transform:translateX(100%); transition:transform .28s ease;
    padding:18px; overflow-y:auto;
    box-shadow:-4px 0 24px rgba(7,26,46,.08);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ padding:1.2em 1em; border-bottom:1px solid var(--line); font-size:1.1rem; }
  .main-nav a.cta{ margin-top:1em; text-align:center; }
  .menu-btn{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  padding:194px 0 96px;
  overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
  position:relative; z-index:2;
}
.hero h1{ color:var(--cream); }
.hero .lede{ font-size:1.15rem; color:#B9C7D4; max-width:44ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.8em; }
.hero-media{ position:relative; }
.hero-media img{ border-radius:var(--radius); position:relative; z-index:2; }
.hero-media::before{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  background:var(--amber); border-radius:var(--radius); z-index:1;
}
@media (max-width: 900px){
  .hero{ padding:150px 0 64px; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
}

.page-hero{
  position:relative; background:var(--ink); color:var(--cream);
  padding:176px 0 70px; overflow:hidden;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ color:var(--cream); }
.page-hero .lede{ color:#B9C7D4; max-width:60ch; font-size:1.08rem; }
.page-hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.24; z-index:1;
}

/* ---------- sections ---------- */
section{ padding:88px 0; }
.section-alt{ background:var(--paper); }
.section-dark{ background:var(--ink); color:var(--cream); }
.section-dark h2, .section-dark h3{ color:var(--cream); }
.section-forest{ background:var(--forest); color:var(--cream); }
.section-forest h2, .section-forest h3{ color:var(--cream); }

.section-head{ max-width:64ch; margin-bottom:3rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.grid{ display:grid; gap:32px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

/* cards */
.card{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px;
}
.card h3{ margin-bottom:.5em; }
.card .num{
  font-family:var(--mono); font-size:.8rem; color:var(--forest-2); display:block; margin-bottom:.8em;
}
.section-dark .card, .section-forest .card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.section-dark .card p, .section-forest .card p{ color:#C7D3DE; }

/* stats strip */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.stat{ background:var(--cream); padding:34px 24px; text-align:center; }
.stat .fig{ font-family:var(--disp); font-weight:800; font-size:clamp(2rem,4vw,3rem); color:var(--forest); line-height:1; }
.stat .fig span{ color:var(--amber-dark); }
.stat .lbl{ font-family:var(--mono); font-size:.76rem; color:#4C5E70; margin-top:.6em; letter-spacing:.02em; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* double loop diagram */
.loop-wrap{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
@media (max-width:900px){ .loop-wrap{ grid-template-columns:1fr; } }
.loop-svg{ width:100%; height:auto; }
.loop-legend{ display:flex; flex-direction:column; gap:20px; margin-top:1.6em; }
.loop-legend .item{ display:flex; gap:14px; align-items:flex-start; }
.loop-legend .dot{ width:12px; height:12px; border-radius:50%; margin-top:.5em; flex:none; }

/* timeline */
.timeline{ position:relative; padding-left:28px; border-left:2px solid var(--line); }
.tl-item{ position:relative; padding-bottom:2.4em; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-33px; top:.3em; width:12px; height:12px; border-radius:50%;
  background:var(--amber); border:2px solid var(--cream); box-shadow:0 0 0 2px var(--forest);
}
.tl-item .date{ font-family:var(--mono); font-size:.78rem; color:var(--forest-2); }

/* testimonials */
.quote-card{
  background:var(--cream); border-left:3px solid var(--amber); padding:28px 30px; border-radius:var(--radius);
}
.quote-card p.q{ font-style:italic; font-size:1.05rem; color:var(--ink-soft); }
.quote-card .who{ font-family:var(--mono); font-size:.8rem; color:var(--forest-2); }

/* partner strip */
.partners{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:42px; }
.partners img{ height:56px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.8; transition:opacity .2s, filter .2s; }
.partners img:hover{ filter:grayscale(0); opacity:1; }

/* forms */
.form-grid{ display:grid; gap:18px; }
.field label{
  display:block; font-family:var(--mono); font-size:.78rem; letter-spacing:.03em;
  margin-bottom:.5em; color:var(--forest-2); text-transform:uppercase;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:1rem; padding:.85em 1em;
  border:1.5px solid var(--line); border-radius:var(--radius); background:var(--cream); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--forest-3); }
.field textarea{ min-height:130px; resize:vertical; }
.form-note{ font-family:var(--mono); font-size:.75rem; color:#5A6B7C; margin-top:1em; }

/* image side blocks */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split img{ border-radius:var(--radius); }
.split.reverse .img-col{ order:2; }
@media (max-width:900px){ .split.reverse .img-col{ order:-1; } }

/* footer */
footer.site-footer{ background:var(--ink); color:#B9C7D4; padding:64px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h4{ color:var(--cream); font-size:1rem; margin-bottom:1em; }
.foot-grid a{ display:block; color:#AFC0CE; padding:.35em 0; font-size:.92rem; }
.foot-grid a:hover{ color:var(--amber); }
.foot-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:.75rem; color:#6C7E8F;
}

/* reveal on scroll — le CSS ne masque JAMAIS le contenu par défaut.
   Seul le JS (main.js) applique une opacité transitoire, et seulement
   s'il s'exécute avec succès. Sans JS (ou en cas d'erreur), tout reste
   visible : c'est une amélioration progressive, jamais une dépendance. */
.reveal{ transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce){
  .granule-field span{ animation:none; }
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--amber); color:var(--ink);
  padding:10px 16px; z-index:200; font-family:var(--mono);
}
.skip-link:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }