:root{
    --navy:#14224F; --navy-deep:#0e1836; --teal:#0F9D8C; --teal-dark:#0B6F62;
    --gold:#D99521; --gold-text:#B47B14; --ivory:#FBF7EC; --white:#fff; --ink:#141413; --slate:#5B6473;
    --line:#E7E1D2; --mist:#F3F5FA; --cyan:#1FB6D4; --maxw:1120px;
    --sp-sec:clamp(52px,7vw,92px); --sp-head:clamp(26px,3.6vw,38px); --measure:68ch;
    --font:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--ivory); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6; overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
  img,svg,canvas{max-width:100%; display:block}
  h1,h2,h3,h4{color:var(--navy); margin:0; line-height:1.16; letter-spacing:-.015em; text-wrap:balance}
  p{margin:0}
  a{color:var(--teal-dark); text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,44px)}
  .eyebrow{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-dark)}

  /* Reveal au défilement */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

  /* En-tête fin, collant */
  .rhd{position:sticky; top:0; z-index:40; background:rgba(251,247,236,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); box-shadow:0 8px 24px rgba(20,34,79,.04)}
  @supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){.rhd{background:rgba(251,247,236,.98)}}
  .rhd .row{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
  .rhd .logo-h{height:46px; width:auto}
  .skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--navy); color:#fff; font-weight:700; padding:12px 18px; border-radius:0 0 10px 0}
  .skip:focus{left:0; text-decoration:none}
  .back{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--navy); padding:12px 4px; margin:-12px -4px}
  .back:hover{color:var(--teal-dark); text-decoration:none}
  .back svg{width:16px; height:16px; flex:none}

  /* Sections : rythme vertical homogène */
  .sec{padding-block:var(--sp-sec)}
  .sec[id]{scroll-margin-top:80px}
  .sec-alt{background:var(--white); border-block:1px solid var(--line)}
  .sec-head{max-width:72ch}
  .sec h2{font-size:clamp(1.65rem,3.6vw,2.45rem); margin-top:13px}
  .lead{margin-top:16px; color:var(--slate); max-width:64ch; font-size:1.08rem; line-height:1.6}

  /* Couverture */
  .cover{position:relative; overflow:hidden; color:#eaf0fb; background:linear-gradient(125deg,#14224F 0%,#123f4f 52%,#0B6F62 100%)}
  .cover::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9;
    background:
      radial-gradient(circle at 74% 42%, rgba(217,149,33,.18) 0%, rgba(217,149,33,0) 20%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%237fd8cb' stroke-width='0.6' opacity='0.26'%3E%3Cline x1='0' y1='0' x2='64' y2='64'/%3E%3Cline x1='64' y1='0' x2='0' y2='64'/%3E%3C/g%3E%3Cg fill='%237fd8cb' opacity='0.38'%3E%3Ccircle cx='0' cy='0' r='1.3'/%3E%3Ccircle cx='64' cy='64' r='1.3'/%3E%3Ccircle cx='64' cy='0' r='1.3'/%3E%3Ccircle cx='0' cy='64' r='1.3'/%3E%3C/g%3E%3C/svg%3E");}
  .cover .netbg{position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none}
  .cover .scrim{position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 100% at 15% 40%, rgba(9,18,42,.74) 0%, rgba(9,18,42,.34) 46%, rgba(9,18,42,0) 78%)}
  .cover .wrap{position:relative; z-index:3; padding-block:clamp(54px,8vw,112px); isolation:isolate}

  .breadcrumb{font-size:.82rem; color:#b9c6e6; margin-bottom:26px}
  .breadcrumb a{color:#d3ddf3}
  .breadcrumb a:hover{color:#fff}
  .breadcrumb .sep{padding:0 9px; color:#7f8fbb}
  .cover .kicker{color:#7fe0d1}
  .cover h1{color:#fff; font-size:clamp(2.1rem,5.6vw,3.7rem); font-weight:750; letter-spacing:-.03em; line-height:1.03; margin-top:20px; max-width:19ch; text-shadow:0 16px 38px rgba(0,0,0,.2)}
  .cover h1 .l2{color:#cfeee7; display:block}
  .cover .sub{margin-top:24px; max-width:56ch; color:#e7edfa; font-size:clamp(1.05rem,1.8vw,1.24rem); line-height:1.55}
  .cover-rule{margin-top:30px; width:66px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--teal),#7fe0d1)}

  /* Prose */
  .prose{margin-top:var(--sp-head)}
  .prose p{color:var(--ink); font-size:1.06rem; line-height:1.75; max-width:var(--measure)}
  .prose p + p{margin-top:16px}

  /* Statistiques : le chiffre clé porte l'accent or (rare) */
  .stats{display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(24px,3.4vw,34px)}
  @media(min-width:520px){ .stats{grid-template-columns:1fr 1fr} }
  @media(min-width:920px){ .stats{grid-template-columns:repeat(4,1fr)} }
  .stat{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:0 12px 30px rgba(20,34,79,.05)}
  .stat .num{font-size:clamp(2.1rem,4.4vw,2.7rem); font-weight:700; color:var(--gold-text); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
  .stat .lab{margin-top:12px; color:var(--slate); font-size:.9rem; line-height:1.5}

  /* Tuiles d'outils */
  .tt{width:34px; height:34px; flex:none; border-radius:8px; background:#fff; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; padding:5px; overflow:hidden}
  .tt img{width:100%; height:100%; object-fit:contain}
  .tt-badge{color:#fff; font-weight:700; font-size:.72rem; border-color:transparent; padding:0}
  /* Galerie généralistes */
  .galerie{display:grid; grid-template-columns:1fr; gap:16px; margin-top:var(--sp-head)}
  @media(min-width:560px){ .galerie{grid-template-columns:1fr 1fr} }
  @media(min-width:940px){ .galerie{grid-template-columns:repeat(3,1fr)} }
  .gcard{position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:24px; transition:border-color .2s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease}
  .gcard::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--teal),var(--gold)); opacity:.75}
  .gcard:hover{border-color:#bcd8d2; transform:translateY(-3px); box-shadow:0 20px 44px rgba(20,34,79,.10)}
  .gcard-head{display:flex; align-items:center; gap:13px}
  .gcard .nom{font-weight:700; color:var(--navy); font-size:1.05rem; line-height:1.2}
  .gcard .ed{font-size:.72rem; color:var(--slate); margin-top:4px; text-transform:uppercase; letter-spacing:.06em}
  .gcard p{margin-top:15px; color:var(--slate); font-size:.94rem; line-height:1.62}

  /* Pied de page */
  .ft{background:var(--navy); color:#aab6d2; padding-block:44px}
  .ft .row{display:flex; flex-wrap:wrap; gap:20px 26px; justify-content:space-between; align-items:center}
  .ft .logo-f{height:50px; width:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.30))}
  .ft .ft-right{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px}
  .ft a{color:#cfd8ee; font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; min-height:44px}
  .ft a:hover{color:#fff}
  .ft small{color:#8593b5; font-size:.85rem}

  :where(a,button):focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:4px}
  .cover a:focus-visible, .ft a:focus-visible{outline-color:#7fe0d1}