/* ============================================================
   Mean to Be — MAQUETTE 3  (refonte claire : moderne & joyeuse)
   Fond clair, couleurs du logo en touches maîtrisées, sans "glassy".
   Autonome : ne dépend pas de styles.css.
   ============================================================ */

@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/poppins-800.woff2') format('woff2'); }
@font-face { font-family:'Fredoka'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/fredoka-600.woff2') format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/source-sans-3.woff2') format('woff2'); }

:root{
  --navy:#0A215E;
  --navy-deep:#08184a;
  --teal:#049296;
  --lime:#B6C021;
  --orange:#F99F0B;

  --ink:#1c2542;
  --muted:#62708c;
  --bg:#ffffff;
  --bg-2:#f5f8fd;
  --bg-tint:#eef5fb;
  --line:#e8edf6;

  --grad-brand:linear-gradient(120deg,var(--teal) 0%,var(--lime) 55%,var(--orange) 100%);

  --ff-display:'Poppins',system-ui,sans-serif;
  --ff-body:'Source Sans 3',system-ui,sans-serif;
  --container:1180px;
  --r:24px;
  --shadow:0 8px 30px rgba(20,32,74,.07);
  --shadow-lg:0 20px 56px rgba(20,32,74,.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--ff-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--ff-display); line-height:1.1; letter-spacing:-.02em; margin:0;}
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:28px;}
.gr{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:600; font-size:16px;
  padding:15px 26px; border-radius:999px; border:0; cursor:pointer; background:var(--orange); color:#fff; white-space:nowrap;
  box-shadow:0 10px 26px rgba(249,159,11,.28); transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, filter .22s;}
.btn:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(249,159,11,.36); filter:saturate(1.06);}
.btn svg{width:18px; height:18px;}
.btn-ghost{background:#fff; color:var(--navy); box-shadow:none; border:1.5px solid var(--line);}
.btn-ghost:hover{background:var(--bg-2); border-color:#d7deec;}

.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-display); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal);}
.eyebrow::before{content:""; width:26px; height:2px; border-radius:2px; background:var(--grad-brand);}

/* ============================================================
   HEADER  (clair, sobre, sans flou de verre)
   ============================================================ */
.hd{position:fixed; inset:0 0 auto 0; z-index:60; transition:background .3s, box-shadow .3s; border-bottom:1px solid transparent;}
.hd-in{display:flex; align-items:center; gap:18px; min-height:76px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:44px; height:44px; border-radius:12px; background:#fff;}
.brand .wm{font-family:'Fredoka',var(--ff-display); font-weight:600; font-size:21px; line-height:1; color:var(--navy); letter-spacing:.2px;}
.brand .wm i{font-style:normal; color:var(--orange);}
/* "Mean to Be" stylisé dans les contenus (typo du logo) */
.mtb{font-family:'Fredoka',var(--ff-display); font-weight:600; color:var(--navy); white-space:nowrap;}
.mtb i{font-style:normal; color:var(--orange);}
.ft .mtb{color:#fff;}
.hd .brand img{width:60px; height:60px; border-radius:15px;}
.hd .brand .wm{font-size:27px;}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px;}
.nav a{font-family:var(--ff-display); font-weight:500; font-size:15px; color:var(--navy); padding:9px 14px; border-radius:999px; transition:background .2s, color .2s;}
.nav a:hover{background:var(--bg-2); color:var(--teal);}
.nav .cta{margin-left:8px; color:#fff;}
.nav .cta:hover{color:#fff;}
.hd.scrolled{background:rgba(255,255,255,.92); box-shadow:0 6px 22px rgba(20,32,74,.07); border-bottom-color:var(--line);}

.burger{display:none; margin-left:auto; width:46px; height:46px; border:0; background:transparent; cursor:pointer; padding:11px;}
.burger span{display:block; height:2px; background:var(--navy); border-radius:2px; margin:5px 0; transition:.3s;}

/* ============================================================
   HERO  (fond clair lumineux + touches de couleur douces)
   ============================================================ */
.hero{position:relative; min-height:92svh; display:flex; align-items:center; padding-block:118px 64px; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%, #eef5fb 100%);}
/* décor doux, peint sur le fond (pas de flou lourd) */
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(38% 42% at 88% 6%, rgba(4,146,150,.14), transparent 70%),
  radial-gradient(34% 40% at 6% 92%, rgba(182,192,33,.16), transparent 70%),
  radial-gradient(30% 34% at 70% 88%, rgba(249,159,11,.12), transparent 70%);}
.hero .dot{position:absolute; border-radius:50%; opacity:.5;}
.hero .d1{width:14px; height:14px; background:var(--teal); top:24%; left:46%; animation:floatY 6s ease-in-out infinite;}
/* d2 : ancré sous le <h1>, dans le creux titre → sous-titre, drift horizontal (jamais sur le texte) */
.hero h1 .d2{width:10px; height:10px; background:var(--orange); top:100%; left:16%; margin-top:7px; animation:driftX 7s ease-in-out infinite .8s;}
.hero .d3{width:12px; height:12px; background:var(--lime); top:16%; left:30%; animation:floatY 8s ease-in-out infinite .4s;}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; width:100%;}
.hero h1{position:relative; font-weight:800; font-size:clamp(40px,5.8vw,72px); color:var(--navy); margin:18px 0 0;}
.hero p.sub{font-size:clamp(17px,1.5vw,20px); color:var(--muted); max-width:520px; margin:22px 0 32px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.hero-meta{display:flex; gap:30px; margin-top:40px; flex-wrap:wrap;}
.hero-meta .m{font-size:14px; color:var(--muted);}
.hero-meta a.m{cursor:pointer; transition:opacity .2s;}
.hero-meta a.m:hover{opacity:.7;}
.hero-meta a.m:hover b{color:var(--orange);}
.hero-meta .m b{display:block; font-family:var(--ff-display); font-weight:700; font-size:18px; color:var(--navy);}

/* visuel hero : carte blanche nette (pas de verre) */
.hero-art{position:relative; justify-self:center;}
.hero-card{width:min(420px,86vw); aspect-ratio:4/5; border-radius:30px; position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); animation:rise 1s .15s both;}
.hero-card .deco{position:absolute; inset:0; background:
  radial-gradient(60% 50% at 50% 30%, rgba(4,146,150,.10), transparent 70%),
  linear-gradient(180deg, #fbfdff, #f1f7fd);}
.hero-card .inner-orb{position:absolute; inset:0; display:grid; place-items:center;}
.hero-card .inner-orb svg{width:56%;}
.hero-card img.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.hero-card .ph-label{position:absolute; left:16px; right:16px; bottom:16px; z-index:3;}
.hero-card .chip{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); color:var(--navy);
  font-family:var(--ff-display); font-weight:500; font-size:13px; padding:9px 14px; border-radius:999px; box-shadow:var(--shadow);}
.float-pill{position:absolute; background:#fff; color:var(--navy); border:1px solid var(--line); border-radius:14px; padding:11px 15px;
  box-shadow:var(--shadow-lg); font-family:var(--ff-display); font-weight:600; font-size:14px; display:flex; align-items:center; gap:9px;}
.float-pill .dot{width:9px; height:9px; border-radius:50%;}
.fp1{top:7%; left:-30px; animation:floatY 5s ease-in-out infinite;}
.fp2{bottom:13%; right:-26px; animation:floatY 6s ease-in-out infinite .6s;}

.scroll-cue{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; color:var(--muted); font-size:12px; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px;}
.scroll-cue .mouse{width:22px; height:34px; border:2px solid #c4cfe2; border-radius:14px; position:relative;}
.scroll-cue .mouse::after{content:""; position:absolute; top:6px; left:50%; width:3px; height:7px; background:var(--teal); border-radius:2px; transform:translateX(-50%); animation:wheel 1.6s infinite;}

/* ============================================================
   MARQUEE (clair)
   ============================================================ */
.marquee{background:var(--navy); color:#fff; padding:15px 0; overflow:hidden;}
.marquee .track{display:flex; gap:46px; width:max-content; animation:scrollX 28s linear infinite;}
.marquee span{font-family:var(--ff-display); font-weight:600; font-size:17px; display:inline-flex; align-items:center; gap:46px; color:#e6ecf9;}
.marquee span::after{content:"✦"; color:var(--lime);}
.marquee a{color:inherit; text-decoration:none; transition:color .15s;}
.marquee a:hover{color:#fff; text-decoration:underline;}
.marquee:hover .track{animation-play-state:paused;}
.float-pill{text-decoration:none; transition:box-shadow .15s;}
.float-pill:hover{box-shadow:0 10px 26px rgba(10,33,94,.16);}

/* ============================================================
   SECTIONS
   ============================================================ */
.block{padding-block:104px;}
.head{max-width:720px; margin-bottom:54px;}
.head h2{font-weight:800; font-size:clamp(30px,4vw,48px); color:var(--navy); margin-top:16px;}
.head p{color:var(--muted); font-size:19px; margin:16px 0 0;}

/* Offre : 4 cartes */
.offers{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.offer{position:relative; padding:32px 28px 28px; border-radius:var(--r); background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow); overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;}
.offer::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .4s;}
.offer:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:transparent;}
.offer:hover::before{transform:scaleX(1);}
.offer .no{font-family:var(--ff-display); font-weight:700; font-size:14px; color:var(--c); letter-spacing:.1em;}
.offer-photo{display:block; width:calc(100% + 56px); max-width:none; height:200px; object-fit:cover; margin:-32px -28px 22px; transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.offer:hover .offer-photo{transform:scale(1.05);}
.offer .ic{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin:18px 0 18px; background:color-mix(in srgb, var(--c) 13%, #fff); color:var(--c);}
.offer .ic svg{width:29px; height:29px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.offer h3{font-size:22px; color:var(--navy); font-weight:700;}
.offer p{color:var(--muted); font-size:16px; margin:10px 0 18px;}
.offer .go{display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--c);}
.offer .go svg{width:18px; height:18px; transition:transform .25s;}
.offer:hover .go svg{transform:translateX(5px);}

/* Approche / valeurs */
.approach{background:var(--bg-2);}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.val{background:#fff; border-radius:var(--r); padding:30px 26px; border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s, border-color .2s;}
.val:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--c,var(--teal)) 35%, var(--line));}
.val-ic{display:block; width:56px; height:56px; margin-bottom:16px; transition:transform .25s;}
.val:hover .val-ic{transform:translateY(-3px) scale(1.06);}
.val .ic svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.val h3{font-size:20px; color:var(--navy); margin-bottom:8px;}
.val p{color:var(--muted); font-size:16px; margin:0;}

/* About */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:54px; align-items:center;}
.about-media{position:relative;}
.about-media .media-ph{aspect-ratio:4/5; border-radius:var(--r);}
.about-media img.about-photo{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center; border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow);}
.about-media .about-photo-link{display:block; border-radius:var(--r); outline-offset:3px;}
.about-media .about-photo-link img.about-photo{transition:box-shadow .25s, transform .25s;}
.about-media .about-photo-link:hover img.about-photo{box-shadow:var(--shadow-lg); transform:translateY(-2px);}
.about-media .badge{position:absolute; right:-16px; bottom:28px; background:#fff; color:var(--navy); border:1px solid var(--line); border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-lg); text-decoration:none; transition:transform .2s, box-shadow .2s;}
.about-media a.badge:hover{transform:translateY(-2px); box-shadow:0 24px 60px rgba(20,32,74,.16);}
.badge b{font-family:var(--ff-display); display:block; font-size:15px; color:var(--navy); line-height:1.3;}
.badge span{display:block; font-size:13px; color:var(--muted);}
.about-body h2{font-weight:800; font-size:clamp(28px,3.4vw,42px); color:var(--navy);}
.about-body .lead{font-size:19px; color:var(--ink); margin:18px 0 14px;}
.about-body p{color:var(--muted); margin:0 0 22px;}
.sign{display:flex; gap:12px; flex-wrap:wrap;}
.tagpill{display:inline-flex; align-items:center; gap:8px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-family:var(--ff-display); font-weight:600; font-size:14px; color:var(--navy);}
.tagpill .dot{width:9px; height:9px; border-radius:50%;}

/* Emplacement photo clair & élégant */
.media-ph{position:relative; border-radius:var(--r); overflow:hidden; display:grid; place-items:center; isolation:isolate;
  background:linear-gradient(160deg,#eef5fb,#e3eefb); border:1px solid var(--line);}
.media-ph::before{content:""; position:absolute; inset:0; background:
  radial-gradient(55% 55% at 28% 22%, rgba(4,146,150,.16), transparent 65%),
  radial-gradient(50% 50% at 82% 82%, rgba(249,159,11,.14), transparent 65%);}
.media-ph .ph-tag{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:24px; color:var(--navy);}
.media-ph .ph-tag svg{width:38px; height:38px; stroke:var(--teal); fill:none; stroke-width:1.5;}
.media-ph .ph-tag small{font-family:var(--ff-display); font-weight:500; font-size:13px; color:var(--muted);}

/* CTA  (bande douce, joyeuse mais claire) */
.cta{padding-block:24px 104px;}
.cta-box{position:relative; overflow:hidden; border-radius:32px; padding:58px 52px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  background:linear-gradient(120deg, #eafaf7 0%, #f2f8e8 50%, #fff4e0 100%); border:1px solid var(--line);}
.cta-box h2{position:relative; z-index:2; font-weight:800; font-size:clamp(26px,3.1vw,38px); color:var(--navy); max-width:620px;}
.cta-box .sub{position:relative; z-index:2; color:var(--muted); margin-top:10px;}
.cta-box .btn{position:relative; z-index:2;}

/* Footer */
.ft{background:var(--navy-deep); color:#aebbd6;}
.ft-grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:40px; padding-block:60px 38px;}
.ft .brand .wm{color:#fff;}
.ft .brand img{background:#fff;}
.ft-brand p{margin:16px 0 0; font-size:14.5px; max-width:280px; color:#93a2c4;}
.ft h5{font-family:var(--ff-display); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); margin:0 0 16px;}
.ft a:hover{color:#fff;}
.ft .col-nav{display:grid; gap:9px; font-size:14.5px;}
.ft .col-ct{display:grid; gap:11px; font-size:14.5px;}
.ft .col-ct .row{display:flex; align-items:center; gap:10px;}
.ft .col-ct svg{width:16px; height:16px; stroke:var(--teal); fill:none; stroke-width:1.8; flex-shrink:0;}
.ft .note{border:1px solid rgba(120,150,190,.3); border-radius:12px; padding:13px 15px; font-size:12.5px; color:#93a2c4; line-height:1.55; margin-top:14px;}
.ft-bar{border-top:1px solid rgba(255,255,255,.08);}
.ft-bar .container{padding-block:15px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#8294b8;}
.ft-bar a{text-decoration:underline; text-underline-offset:2px;}

/* Parcours / certifications (section À propos) */
.about-body .parcours-intro{font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--navy); margin:0 0 12px;}
.certs{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px;}
.certs li{position:relative; padding-left:28px; font-size:15.5px; color:var(--ink);}
.certs li::before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;}
.certs li strong{color:var(--navy); font-family:var(--ff-display); font-weight:600;}
.certs li em{color:var(--muted); font-style:italic;}

/* Footer : slogan vert + certifications */
.ft-brand .ft-slogan{font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--lime); margin:14px 0 6px; max-width:none;}
.ft-certs{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:7px;}
.ft-certs li{position:relative; padding-left:18px; font-size:13.5px; color:#9aa9ca;}
.ft-certs li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--lime);}
.ft-social{display:flex; gap:10px; margin-top:18px;}
.ft-social a{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.06); color:#c3cee4; transition:background .2s ease, color .2s ease, transform .2s ease;}
.ft-social a:hover{background:var(--teal); color:#fff; transform:translateY(-2px);}
.ft-social svg{width:18px; height:18px; fill:currentColor;}

/* Apparitions au scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s);}
.reveal.in{opacity:1; transform:none;}

@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes driftX{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
@keyframes rise{from{opacity:0; transform:translateY(36px) scale(.98);}to{opacity:1; transform:none;}}
@keyframes scrollX{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes wheel{0%{opacity:1; top:6px;}70%{opacity:0; top:17px;}100%{opacity:0;}}

/* Responsive */
.mobile-nav{display:none;}
@media (max-width:980px){
  .nav{display:none;} .burger{display:block;}
  .hero-grid{grid-template-columns:1fr; gap:38px; text-align:center;}
  .hero .eyebrow{justify-content:center;} .hero-cta,.hero-meta{justify-content:center;}
  .hero-art{order:-1;}
  .offers{grid-template-columns:1fr;} .values{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr; gap:36px;} .about-media{max-width:420px; margin-inline:auto;}
  .ft-grid{grid-template-columns:1fr 1fr;}
  .mobile-nav{position:fixed; inset:0; z-index:55; background:#fff; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:40px; transform:translateY(-100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);}
  .mobile-nav.open{transform:translateY(0);}
  .mobile-nav a{font-family:var(--ff-display); font-weight:600; font-size:25px; color:var(--navy); padding:12px 0; border-bottom:1px solid var(--line);}
  .mobile-nav .btn{margin-top:22px; align-self:flex-start; color:#fff;}
  .mobile-nav .close{position:absolute; top:22px; right:22px; background:transparent; border:0; color:var(--navy); font-size:32px; cursor:pointer;}
}
@media (max-width:560px){
  .block{padding-block:74px;} .container{padding-inline:20px;}
  .cta-box{padding:40px 26px;} .ft-grid{grid-template-columns:1fr;}
  .hero-card{width:min(360px,84vw);} .fp1{left:-8px;} .fp2{right:-6px;}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} .reveal{opacity:1; transform:none;} }

/* ============================================================
   PAGES INTERNES — gabarit sous-pages (refonte v3)
   ============================================================ */
:root{ --teal-soft:#e3f1f1; --bg-soft:#f3f6fb; }

/* En-tete toujours solide sur les sous-pages (pas de hero plein ecran) */
.hd.solid{background:rgba(255,255,255,.95); box-shadow:0 6px 22px rgba(20,32,74,.07); border-bottom-color:var(--line);}
.nav a.active{background:var(--bg-2); color:var(--teal);}
.nav a.cta.active{background:var(--orange); color:#fff;}
.mobile-nav a.active{color:var(--teal);}

/* Hero de sous-page */
.page-hero{padding-block:128px 60px; background:linear-gradient(180deg,#ffffff 0%, var(--bg-tint) 100%); border-bottom:1px solid var(--line);}
.page-hero .crumb{font-family:var(--ff-display); font-weight:500; font-size:13.5px; color:var(--muted); margin-bottom:16px;}
.page-hero .crumb a{color:var(--teal);}
.page-hero .crumb a:hover{text-decoration:underline;}
.page-hero h1{font-weight:800; font-size:clamp(34px,4.6vw,56px); color:var(--navy);}
.page-hero h1 .ac{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}
.page-hero .lead{font-size:clamp(17px,1.5vw,20px); color:var(--muted); max-width:660px; margin:18px 0 0;}

/* Image bandeau */
.page-figure{padding-top:34px;}
.page-figure img{width:100%; height:clamp(280px,40vw,460px); object-fit:cover; object-position:center; border-radius:var(--r); box-shadow:var(--shadow-lg); border:1px solid var(--line);}
.page-figure.full img{height:auto; object-fit:contain;}

/* Prose (texte + aside, ou texte seul pour pages legales) */
.prose{padding-block:78px;}
.prose-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start;}
.prose h2{font-weight:800; font-size:clamp(25px,3vw,33px); color:var(--navy); margin:0 0 18px;}
.prose h2:not(:first-child){margin-top:8px;}
.prose h3{font-weight:700; font-size:20px; color:var(--navy); margin:30px 0 10px;}
.prose p{color:var(--muted); font-size:17px; margin:0 0 16px;}
.prose a:not(.btn){color:var(--teal); text-decoration:underline; text-underline-offset:2px;}
.prose a:not(.btn):hover{color:var(--orange);}
.prose ul.checks{list-style:none; padding:0; margin:0 0 8px; display:grid; gap:14px;}
.prose ul.checks li{position:relative; padding-left:34px; color:var(--ink); font-size:16.5px;}
.prose ul.checks li::before{content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;}
.prose ul.simple{list-style:none; padding:0; margin:0 0 14px; display:grid; gap:9px;}
.prose ul.simple li{position:relative; padding-left:20px; color:var(--ink); font-size:16.5px;}
.prose ul.simple li::before{content:""; position:absolute; left:0; top:11px; width:7px; height:7px; border-radius:50%; background:var(--lime);}
.prose ul.simple li strong{color:var(--navy); font-family:var(--ff-display); font-weight:600;}
.prose .prose-cta{margin-top:28px; padding:16px 20px; background:var(--teal-soft); border-radius:14px; font-size:16.5px; color:var(--ink);}
.prose .prose-cta strong{color:var(--navy); font-family:var(--ff-display); font-weight:600;}
.prose .prose-cta a{color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.prose .prose-cta a:hover{color:var(--orange);}

/* Carte laterale */
.aside-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; position:sticky; top:104px; box-shadow:var(--shadow);}
.aside-card .ic-wrap{display:grid !important; place-items:center; width:56px !important; height:56px !important; border-radius:16px !important; background:var(--teal-soft) !important; margin-bottom:18px !important;}
.aside-card .ic-wrap svg{width:30px !important; height:30px !important; stroke:var(--teal); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.aside-card .aside-illus{display:block; width:140px; height:auto; margin:0 0 18px;}
.aside-card .aside-photo{display:block; width:100%; height:auto; border-radius:14px; margin:0 0 18px; box-shadow:var(--shadow);}
.aside-card .accent-rule{border:0; height:3px; width:46px; border-radius:2px; background:var(--grad-brand); margin:0 0 18px;}
.aside-card h4{font-weight:700; font-size:18px; color:var(--navy); margin:0 0 8px;}
.aside-card p{color:var(--muted); font-size:15px; margin:0 0 20px;}

/* Bande CTA */
.cta-band{padding-block:6px 92px;}
.cta-band .inner{position:relative; overflow:hidden; border-radius:28px; padding:46px 44px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:linear-gradient(120deg,#eafaf7 0%, #f2f8e8 50%, #fff4e0 100%); border:1px solid var(--line);}
.cta-band .inner h2{font-weight:800; font-size:clamp(24px,2.8vw,32px); color:var(--navy); max-width:620px;}
.cta-band .inner p{color:var(--muted); margin:8px 0 0;}
.cta-band .inner p a{color:var(--teal); text-decoration:underline;}

/* Cartes services */
.services{padding-block:78px;}
.cards-grid{display:grid; gap:24px;}
.cards-grid.cards-2{grid-template-columns:repeat(2,1fr);}
.card{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent;}
.card .card-illus{width:66px; height:66px; object-fit:contain; margin-bottom:16px;}
.card .ic-wrap{display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--teal-soft); color:var(--teal); margin-bottom:16px;}
.card .ic-wrap svg{width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.card h3{font-size:21px; color:var(--navy); margin:0 0 8px;}
.card p{color:var(--muted); font-size:16px; margin:0 0 16px;}
.card .more{display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--teal);}
.card .more svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s;}
.card:hover .more svg{transform:translateX(5px);}

/* Contact */
.contact{padding-block:78px;}
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start;}
.contact-info .item{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px;}
.contact-info .item .ic{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--teal-soft); flex-shrink:0;}
.contact-info .item .ic svg{width:22px; height:22px; stroke:var(--teal); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.contact-info .lbl{font-family:var(--ff-display); font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);}
.contact-info .val{background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; font-size:16.5px; color:var(--ink);}
.contact-info .val a:hover{color:var(--teal);}
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:34px 32px; box-shadow:var(--shadow);}
.field{margin-bottom:16px; display:grid; gap:7px;}
.field[hidden]{display:none;}
.field label{font-family:var(--ff-display); font-weight:600; font-size:14px; color:var(--navy);}
.field input, .field select, .field textarea{width:100%; font-family:var(--ff-body); font-size:16px; color:var(--ink); padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; transition:border-color .2s, box-shadow .2s;}
.field input:focus, .field select:focus, .field textarea:focus{outline:0; border-color:var(--teal); box-shadow:0 0 0 3px rgba(4,146,150,.12);}
.field textarea{min-height:130px; resize:vertical;}
.form-note{font-size:13px; color:var(--muted); margin:14px 0 0; text-align:center;}

.anti-bot{background:var(--bg-2); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:20px;}
.toggle-switch{display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none;}
.toggle-switch input{position:absolute; opacity:0; width:0; height:0;}
.toggle-slider{position:relative; width:44px; height:24px; flex-shrink:0; background:#d7dde8; border-radius:999px; transition:background .2s;}
.toggle-slider::before{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s;}
.toggle-switch input:checked + .toggle-slider{background:var(--teal);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px);}
.toggle-switch input:focus-visible + .toggle-slider{outline:2px solid var(--teal); outline-offset:2px;}
.toggle-switch input:invalid + .toggle-slider{box-shadow:none;}
.toggle-label{font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--navy);}

/* ===== Logo association (mention bio, discret) ===== */
.asso-logo{display:inline-flex; align-items:center; gap:12px; margin-top:12px; text-decoration:none;}
.asso-logo img{width:58px; height:58px; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); flex-shrink:0; transition:transform .2s;}
.asso-logo .asso-cap{font-family:var(--ff-display); font-weight:600; font-size:13.5px; line-height:1.3; color:var(--navy);}
.asso-logo .asso-cap small{display:block; font-family:var(--ff-body); font-weight:400; font-size:12.5px; color:var(--muted);}
.asso-logo:hover img{transform:translateY(-2px);}
.asso-logo:hover .asso-cap{color:var(--teal);}

/* ===== Fiche identité citable (accueil / a-propos) ===== */
.fiche-id{background:var(--bg-2); border-left:3px solid var(--teal); border-radius:0 14px 14px 0; padding:18px 22px; margin:20px 0; font-size:16.5px; line-height:1.65; color:var(--ink);}
.fiche-id a{color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
.fiche-id a:hover{color:var(--navy);}
.fiche-id p{margin:0 0 12px;}
.fiche-id p:last-child{margin-bottom:0;}
.fiche-id ul.fiche-list{margin:2px 0 12px; padding-left:22px;}
.fiche-id li{margin:6px 0;}
.fiche-id li::marker{color:var(--teal);}

/* ===== Cartes "univers" (page a-propos) ===== */
.univers-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:6px 0 28px;}
.univers-card{position:relative; display:block; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); text-decoration:none; aspect-ratio:16/10;}
.univers-card img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.univers-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,33,94,.82) 0%, rgba(10,33,94,.30) 42%, rgba(10,33,94,0) 70%);}
.univers-card span{position:absolute; left:16px; right:14px; bottom:13px; z-index:2; color:#fff; font-family:var(--ff-display); font-weight:600; font-size:16px; line-height:1.25; text-shadow:0 1px 6px rgba(0,0,0,.35);}
.univers-card:hover img{transform:scale(1.06);}
.univers-card:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

/* ===== MODALITÉS (bloc récurrent pages de service) ===== */
.modalites{background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:24px 28px; margin:26px 0 8px;}
.modalites h3{margin:0 0 16px;}
.modalites ul{list-style:none; padding:0; margin:0; display:grid; gap:13px;}
.modalites li{position:relative; padding-left:24px; font-size:16px; color:var(--ink); line-height:1.6;}
.modalites li::before{content:""; position:absolute; left:2px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--teal);}
.modalites li strong{color:var(--navy); font-weight:600;}

/* ===== FAQ (visible + support JSON-LD FAQPage) ===== */
.faq{padding:66px 0; background:var(--bg-tint);}
.faq .container{max-width:860px;}
.faq .eyebrow{display:block; text-align:center;}
.faq h2{text-align:center; margin:6px 0 34px;}
.faq-list{display:grid; gap:14px;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}
.faq-item summary{cursor:pointer; list-style:none; padding:20px 24px; font-family:var(--ff-display); font-weight:600; font-size:17px; color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:26px; line-height:1; font-weight:300; color:var(--teal); flex-shrink:0; transition:transform .25s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 24px 22px; color:var(--ink); font-size:16px; line-height:1.65;}
.faq-item .faq-a p{margin:0 0 10px;}
.faq-item .faq-a p:last-child{margin:0;}

@media (max-width:980px){
  .prose-grid{grid-template-columns:1fr; gap:34px;} .aside-card{position:static;}
  .cards-grid.cards-2{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:32px;}
  .cta-band .inner{padding:36px 26px;}
  .faq{padding:52px 0;} .faq-item summary{font-size:16px; padding:18px 20px;}
  /* Hero centré : décale le point orange sous « joie » (texte centré) */
  .hero h1 .d2{left:31%;}
}