/* ============================================================
   Bonnet & Doyen Conseil — Design system
   Charte v2 : blanc épuré, encre presque noire, accent navy
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500&display=swap');

:root{
  --paper:#FFFFFF;
  --brume:#F7F7F6;
  --ink:#121211;
  --slate:#6B6B69;
  --muted:#A3A39E;
  --line:#ECECEA;
  --navy:#192537;
  --navy-deep:#10192B;
  --navy-tint:#EEF1F6;
  --sweep:#5C7FB0;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1120px;
  --pad:clamp(22px,5vw,42px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.6;font-size:16px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;margin:0}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.lead{font-size:clamp(15px,1.6vw,17px);line-height:1.75;color:#3A3A38}
.body{font-size:14.5px;line-height:1.75;color:#3A3A38;margin:0}
.muted{color:var(--muted)}

/* ---------- En-tête / navigation ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.2) blur(10px);border-bottom:.5px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--serif);font-weight:500;font-size:17px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--slate)}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:var(--navy)}
.nav-burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:6px}
.nav-panel{display:none}

/* ---------- Boutons ---------- */
.btn{position:relative;z-index:0;display:inline-flex;align-items:center;gap:8px;
  color:#fff;border:0;border-radius:999px;padding:13px 24px;font-family:var(--sans);
  font-size:14.5px;font-weight:500;cursor:pointer;overflow:hidden;background:transparent;
  transition:transform .2s}
.btn::after{content:"";position:absolute;z-index:-1;inset:0;background:var(--ink);border-radius:999px;transition:inset .25s}
.btn::before{content:"";position:absolute;z-index:-2;inset:-140%;
  background:conic-gradient(from 0deg,var(--sweep) 0deg,rgba(92,127,176,0) 75deg,rgba(92,127,176,0) 360deg);
  opacity:0;transition:opacity .3s}
.btn:hover{transform:translateY(-1px)}
.btn:hover::after{inset:2px}
.btn:hover::before{opacity:1;animation:btn-spin 3s linear infinite}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.btn--sm{padding:9px 16px;font-size:13px}
@keyframes btn-spin{to{transform:rotate(1turn)}}

.link{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:500;
  border-bottom:1px solid var(--ink);padding-bottom:1px;transition:.15s}
.link:hover{color:var(--navy);border-color:var(--navy)}

/* ---------- Sections ---------- */
.section{padding:clamp(46px,7vw,84px) 0;border-bottom:.5px solid var(--line)}
.section--brume{background:var(--brume)}
.section--center{text-align:center}
.section--tight{padding:clamp(34px,4vw,52px) 0}

/* ---------- Hero ---------- */
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.08;max-width:19ch}
.hero .lead{max-width:52ch;margin-top:18px}
.hero-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:26px}
.media{background:var(--brume);border:.5px solid var(--line);border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:#C7C7C1;min-height:260px}
.media--sm{min-height:190px}

/* ---------- Bloc éditorial image/texte ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px);align-items:center}
.split--rev>.split-media{order:2}

/* ---------- Grilles / cartes ---------- */
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--paper);border:.5px solid var(--line);border-radius:14px;padding:22px;transition:.22s}
.card--link{cursor:pointer}
.card--link:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 14px 30px rgba(25,37,55,.10)}
.card--link:hover .card-ico,.card--link:hover h3{color:var(--navy)}
.card-ico{color:var(--ink);transition:.22s}
.card h3{font-size:17px;margin:12px 0 6px}
.card .body{font-size:13.5px}

/* ---------- Puces / chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;transition:.15s}
.chip--link{cursor:pointer}
.chip--link:hover{border-color:var(--navy);color:var(--navy)}
.chip--on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.step-num{font-family:var(--serif);font-size:26px;color:#C7C7C1}
.step h3{font-size:16px;margin:4px 0 4px}

/* ---------- Statement ---------- */
.statement{font-size:clamp(22px,3.2vw,32px);line-height:1.22;max-width:26ch;margin:0 auto}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.qa{border-top:.5px solid var(--line);padding:18px 0}
.qa:last-child{border-bottom:.5px solid var(--line)}
.qa h3{font-size:16px;margin:0 0 6px}

/* ---------- Comparatif ---------- */
.cmp{display:grid;border:.5px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px}
.cmp>div{padding:12px 12px;border-bottom:.5px solid var(--line)}
.cmp .hd{font-family:var(--serif);font-size:13px}
.cmp .own{background:var(--navy-tint);color:var(--navy)}
.cmp .no{color:#C7C7C1}

/* ---------- Simulateur (réutilisable) ---------- */
.sim{background:var(--paper);border:.5px solid #E2E2DE;border-radius:16px;padding:clamp(20px,3vw,28px)}
.sim-field{margin-bottom:18px}
.sim-label{font-size:13px;color:var(--slate);margin:0 0 8px;display:block}
.sim input[type=text]{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;outline:none;transition:.15s}
.sim input[type=text]:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(25,37,55,.08)}
.sim input[type=range]{width:100%;accent-color:var(--navy)}
.sim-toggles{display:flex;gap:8px}
.sim-tg{flex:1;text-align:center;border:1px solid var(--line);border-radius:10px;padding:11px;font-size:14px;font-weight:500;cursor:pointer;transition:.15s}
.sim-tg--on{background:var(--navy);color:#fff;border-color:var(--navy)}
.sim-res{background:var(--brume);border-radius:12px;padding:18px}
.sim-res--alt{background:var(--navy-tint)}
.bignum{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.navynum{color:var(--navy)}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--ink);color:#C9C9C4;padding:40px 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:22px;font-size:12.5px}
.footer-brand{color:#fff;font-family:var(--serif);font-size:17px;margin-bottom:10px}
.footer-col a{display:block;padding:4px 0;color:#C9C9C4;transition:.15s}
.footer-col a:hover{color:#fff}
.footer-note{color:#8E8E88;line-height:1.6}

/* ---------- Reveal au scroll ---------- */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rev.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  .nav-panel{display:block;position:fixed;inset:64px 0 auto 0;background:#fff;border-bottom:.5px solid var(--line);
    padding:14px var(--pad) 22px;transform:translateY(-120%);transition:transform .3s ease;z-index:49}
  .nav-panel.open{transform:none}
  .nav-panel a{display:block;padding:12px 0;border-bottom:.5px solid var(--line);font-size:16px;color:var(--ink)}
  .nav-panel .btn{width:100%;justify-content:center;margin-top:14px}
  .split{grid-template-columns:1fr;gap:22px}
  .split--rev>.split-media{order:0}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .hero-actions{gap:14px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* ---------- Accessibilité ---------- */
a:focus-visible,button:focus-visible,.chip--link:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}

/* ---------- Icônes SVG inline ---------- */
.ic{flex:none;vertical-align:middle}
.btn .ic,.link .ic{margin:0}
.media .ic{color:#C7C7C1}

/* ---------- Animations enrichies ---------- */
.site-header .nav{transition:height .3s ease}
.site-header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(18,18,17,.05)}
.site-header.scrolled .nav{height:56px}
[data-parallax]{will-change:transform}
.rev{will-change:opacity,transform}
.hero .rev{transition-duration:.85s}

/* Logos de presse */
.logos{display:flex;flex-wrap:wrap;gap:10px}
.logo{flex:1;min-width:96px;height:38px;border-radius:8px;background:var(--brume);border:.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--slate)}

/* Comparatif responsive */
@media (max-width:560px){ .cmp{font-size:11px} .cmp>div{padding:9px 8px} }

/* ---------- Simulateurs (mise en page) ---------- */
.sim-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sim-res-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.sim-res p{margin:0}
.sim-res-lbl{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.sim-res--alt .sim-res-lbl{color:var(--navy)}
.sim-cap{font-size:12.5px;color:var(--slate);margin:0 0 2px}
.sim-line{display:flex;justify-content:space-between;font-size:12.5px;color:var(--slate);margin-top:6px}
.sim-resmain{background:var(--navy-tint);border-radius:12px;padding:22px;text-align:center;margin-top:6px}
.sim-mini{background:var(--brume);border-radius:10px;padding:14px;text-align:center}
.sim-mini p:first-child{font-size:12px;color:var(--slate);margin:0 0 3px}
.sim-hl{background:#fff;border:1px solid var(--navy-tint);border-radius:10px;padding:14px 16px;margin-top:12px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:#3A3A38}
.sim-hl strong{color:var(--navy);font-weight:500}
.sim-concl{background:var(--navy-tint);border-radius:10px;padding:14px 16px;margin-top:14px;font-size:13.5px;color:var(--navy)}
.sim-cta{margin-top:20px;text-align:center}
.sim details{margin-top:16px;font-size:12.5px;color:#8E8E88}
.sim summary{cursor:pointer;color:var(--slate)}
.sim details p{margin:8px 0 0;line-height:1.6}
@media (max-width:560px){ .sim-grid2,.sim-res-wrap{grid-template-columns:1fr} }

/* ---------- Formulaire de rappel ---------- */
.rform{background:#fff;border:.5px solid #E2E2DE;border-radius:16px;padding:clamp(22px,3vw,30px);max-width:640px}
.rform-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rform-brand{font-family:var(--serif);font-weight:500;font-size:16px}
.rform-step{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rform-track{height:3px;background:#F0F0EE;border-radius:99px;margin:12px 0 26px;overflow:hidden}
.rform-fill{height:100%;background:var(--ink);width:20%;transition:width .3s ease}
.rform-q{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.4vw,25px);line-height:1.2;margin:0 0 6px}
.rform-sub{font-size:14px;color:var(--slate);margin:0 0 22px;line-height:1.6}
.rform-opt{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin-bottom:10px;cursor:pointer;font-size:15px;transition:border-color .15s,background .15s}
.rform-opt:hover{background:var(--brume)}
.rform-opt.sel{border-color:var(--navy);border-width:1.5px}
.rform-ck{color:var(--navy);opacity:0;display:inline-flex}
.rform-opt.sel .rform-ck{opacity:1}
.rform-chips{display:flex;flex-wrap:wrap;gap:10px}
.rform-chip{border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;font-size:14px;transition:.15s}
.rform-chip:hover{background:var(--brume)}
.rform-chip.sel{background:var(--navy);color:#fff;border-color:var(--navy)}
.rform label{display:block;font-size:13px;color:var(--slate);margin:0 0 7px}
.rform input,.rform textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;outline:none;transition:.15s}
.rform input:focus,.rform textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(25,37,55,.08)}
.rform input.err{border-color:#C0392B}
.rform-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rform-nav{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.rform-back{background:none;border:0;color:var(--muted);font-family:var(--sans);font-size:14px;cursor:pointer;padding:8px 2px}
.rform-back:hover{color:var(--ink)}
.rform-micro{font-size:12px;color:var(--muted);margin:16px 0 0;display:flex;align-items:center;gap:6px}
.rform-err{color:#C0392B;font-size:13px;margin:12px 0 0;display:none}
.rform-done{text-align:center;padding:22px 0 10px}
.rform-donec{width:56px;height:56px;border-radius:50%;background:#F1F5F1;color:#2E5B41;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
@media(max-width:520px){.rform-row2{grid-template-columns:1fr}}

/* ---------- Lien LinkedIn équipe ---------- */
.team-li{display:inline-flex;align-items:center;color:var(--muted);margin-top:12px;transition:color .15s}
.team-li:hover{color:var(--navy)}

/* ---------- Photos équipe ---------- */
.team-photo{aspect-ratio:4/5;border-radius:12px;overflow:hidden;margin-bottom:14px;background:var(--brume)}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.team-photo--sm{margin-bottom:12px}

/* ---------- Bio équipe au survol ---------- */
.team-photo{position:relative}
.team-bio{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(to top,rgba(16,25,43,.96) 30%,rgba(25,37,55,.75));
  color:#F1F3F7;font-size:12.5px;line-height:1.55;
  opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.card:hover .team-bio{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.team-bio{transition:none;transform:none}}

/* ---------- Carte équipe qui se retourne ---------- */
.team-photo{perspective:1100px}
.flip .flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.card:hover .flip .flip-inner,.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:12px;overflow:hidden}
.flip-front img{width:100%;height:100%;object-fit:cover;display:block}
.flip-back{transform:rotateY(180deg);background:linear-gradient(160deg,#1E2D45,#0E1729);color:#EEF1F7;display:flex;align-items:flex-end;padding:20px}
.flip-back p{margin:0;font-size:12.5px;line-height:1.6}
@media (prefers-reduced-motion:reduce){.flip .flip-inner{transition:none}}

/* Dos de carte en style citation */
.flip-back{align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}
.flip-back p{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.55;color:#EEF1F7}
.team-photo--sm .flip-back p{font-size:13px}

/* ---------- Bandeau photo pleine largeur ---------- */
main{overflow-x:clip}
.fullbleed{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:#0E1729;line-height:0}
.fullbleed-band{position:relative;width:100%;aspect-ratio:2.05/1;overflow:hidden}
.fullbleed-band img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover;object-position:center;will-change:transform}
.reveal-photo{opacity:0;transform:translateY(28px) scale(1.03);transition:opacity 1s ease,transform 1.15s cubic-bezier(.2,.7,.2,1)}
.reveal-photo.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal-photo{opacity:1;transform:none;transition:none}}

/* ---------- Grille équipe : 5 de front (desktop) ---------- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.team-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

/* ---------- Bandeau logos presse ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:14px}
.logo-tile{height:62px;background:#fff;border:.5px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:10px 16px;transition:border-color .2s,transform .2s}
.logo-tile:hover{border-color:var(--navy);transform:translateY(-2px)}
.logo-tile img{max-height:100%;max-width:100%;object-fit:contain;display:block}

/* ---------- Marquee logos (défilant, noir et blanc) ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;align-items:center;gap:58px;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:30px;width:auto;filter:grayscale(1);opacity:.62;transition:filter .3s ease,opacity .3s ease}
.marquee img:hover{filter:grayscale(0);opacity:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px 44px}}

/* ---------- Hero plein écran ---------- */
.hero-full{min-height:calc(100vh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:70px 0 90px}
.hero-full-inner{max-width:940px;margin:0 auto}
.hero-full .eyebrow{margin-bottom:22px}
.hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.03em;margin:0 auto;max-width:15ch}
.hero-sub{font-size:clamp(16px,1.7vw,20px);line-height:1.6;max-width:60ch;margin:24px auto 0;color:#3A3A38}
.hero-full .hero-actions{margin-top:32px}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--muted);animation:hero-bob 1.9s ease-in-out infinite}
.hero-scroll:hover{color:var(--navy)}
@keyframes hero-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){.hero-scroll{animation:none}}
@media (max-width:600px){.hero-full{min-height:calc(100vh - 64px);padding:50px 0 80px}}

/* ---------- Section "Pour qui" interactive avec image en fondu ---------- */
.forwho{position:relative;overflow:hidden}
.forwho-inner{position:relative;z-index:2}
.forwho .chips{max-width:560px}
.forwho-desc{transition:opacity .3s ease}
.forwho-media{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:1;pointer-events:none}
.forwho-media img{width:100%;height:100%;object-fit:cover;object-position:center right;
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 16%,#000 58%);
  mask-image:linear-gradient(to right,transparent 0,transparent 16%,#000 58%);
  opacity:0;transition:opacity .55s ease}
.forwho-media img.show{opacity:1}
[data-forwho-tabs] .chip{font-family:var(--sans);background:none;cursor:pointer}
[data-forwho-tabs] .chip:hover{border-color:var(--navy);color:var(--navy)}
[data-forwho-tabs] .chip--on,[data-forwho-tabs] .chip--on:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:820px){.forwho-media{display:none}}

/* ---------- Livre & podcasts ---------- */
.podcasts{display:flex;gap:16px;flex-wrap:wrap}
.podcast{display:block;width:132px}
.podcast img{width:132px;height:132px;object-fit:cover;border-radius:12px;border:.5px solid var(--line);display:block;transition:transform .2s,box-shadow .2s}
.podcast:hover img{transform:translateY(-3px);box-shadow:0 12px 26px rgba(25,37,55,.16)}
.podcast-cap{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;color:var(--slate);transition:color .2s}
.podcast:hover .podcast-cap{color:#1DB954}

/* Hero scroll : reset bouton */
button.hero-scroll{background:none;border:0;cursor:pointer;padding:6px}

/* ---------- Bande de conformité (ORIAS / CNCGP) ---------- */
.compliance{background:#fff;border-top:.5px solid var(--line);padding:30px 0}
.compliance-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;max-width:900px;margin:0 auto}
.compliance-item{display:flex;gap:16px;align-items:flex-start}
.compliance-item img{height:38px;width:auto;flex:none;margin-top:2px}
.compliance-item p{font-size:12px;line-height:1.55;color:var(--slate);margin:0}
@media(max-width:640px){.compliance-grid{grid-template-columns:1fr;gap:20px}}

/* ---------- Vitrine Trustpilot ---------- */
.tp-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:26px}
.tp-badge{display:flex;align-items:center;gap:4px}
.tp-star{display:inline-flex;width:20px;height:20px;background:#00b67a;color:#fff;align-items:center;justify-content:center;border-radius:3px;font-size:13px;line-height:1}
.tp-word{font-weight:600;font-size:16px;margin-left:6px;letter-spacing:-.01em}
.tp-score{text-align:right;line-height:1.2}
.tp-score strong{font-family:var(--serif);font-weight:500;font-size:30px}
.tp-score span{color:var(--slate)}
.tp-score em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.tp-carousel{position:relative}
.tp-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 16px}
.tp-track::-webkit-scrollbar{height:6px}
.tp-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.tp-card{scroll-snap-align:start;flex:0 0 min(360px,82%);background:#fff;border:.5px solid var(--line);border-radius:14px;padding:24px}
.tp-card h3{font-size:16px;margin:14px 0 8px}
.tp-card .tp-meta{font-size:12.5px;color:var(--muted);margin-top:16px}
.tp-stars{display:flex;gap:3px}
.tp-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;background:#fff;border:.5px solid var(--line);cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 8px 22px rgba(18,18,17,.10)}
.tp-prev{left:-10px}.tp-next{right:-10px}
.tp-arrow:hover{border-color:var(--navy);color:var(--navy)}
@media(min-width:760px){.tp-arrow{display:flex}}

/* ---------- Liens réseaux sociaux ---------- */
.social-row{display:flex;justify-content:center;gap:18px;margin-top:16px;color:var(--slate)}
.social-row a{transition:color .15s}
.social-row a:hover{color:var(--navy)}

/* Score Trustpilot cliquable */
a.tp-score{text-decoration:none;color:inherit;transition:opacity .15s}
a.tp-score:hover{opacity:.7}

/* ---------- Grilles symétriques (jamais de case orpheline) ---------- */
.g-3,.g-4,.g-6,.g-8{display:grid;gap:16px}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(2,1fr)}
.g-6{grid-template-columns:repeat(3,1fr)}
.g-8{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-6,.g-8{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g-3,.g-4,.g-6,.g-8{grid-template-columns:1fr}}
.steps{grid-template-columns:repeat(3,1fr)}
@media(max-width:680px){.steps{grid-template-columns:1fr}}

/* ---------- Équipe : photos plus grandes, texte contenu ---------- */
.member{text-align:left}
.member .team-photo{margin-bottom:12px}
.member h3{margin:0 0 2px;font-size:15.5px}
.member-role{font-size:12.5px;color:var(--slate);line-height:1.4;margin:0}
.team-grid{grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}
.flip-back{padding:16px}
.flip-back p{font-size:12.5px;line-height:1.45}

/* ---------- Chiffres clés : centrés (jamais d'orphelin à gauche) ---------- */
.stats-row{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 44px}

/* ---------- Équipe 2 par 2, grandes photos (style Prosper) ---------- */
.team-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:940px;margin:0 auto}
@media(max-width:600px){.team-grid-2{grid-template-columns:1fr;max-width:420px}}
.team-grid-2 .member h3{font-size:18px;margin-top:16px}
.team-grid-2 .member-role{font-size:13.5px}

/* Vignette média (placeholder) */
.media-thumb{aspect-ratio:16/9;background:#fff;border:.5px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);margin-bottom:14px}

/* ---------- Vitrine vidéo médias (lightbox) ---------- */
.media-card{cursor:pointer}
.media-card--soon{cursor:default}
.media-thumb{position:relative;overflow:hidden;background:#0E1729;border:0;display:block;padding:0}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.media-thumb .play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;color:var(--navy);box-shadow:0 8px 22px rgba(0,0,0,.3);transition:transform .2s}
.media-card:hover .play{transform:scale(1.09)}
.media-thumb--empty{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45)}
.vlightbox{position:fixed;inset:0;background:rgba(10,12,20,.86);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.vlightbox.open{display:flex}
.vlightbox-inner{position:relative;width:min(980px,100%);aspect-ratio:16/9}
.vlightbox iframe{width:100%;height:100%;border:0;border-radius:12px;background:#000}
.vlightbox-close{position:absolute;top:-46px;right:0;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer}

/* Vignette média format logo/carré (fond plein) */
.media-thumb--logo{display:flex;align-items:center;justify-content:center}
.media-thumb--logo img{width:auto;height:100%;max-width:100%;object-fit:contain}

/* ---------- Page ville : FAQ, vidéo, maillage ---------- */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:.5px solid var(--line);padding:4px 0}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;font-family:var(--serif);font-size:clamp(16px,1.9vw,19px);line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--slate);transition:transform .2s}
.faq-item[open] summary::after{content:"–"}
.faq-a{padding:0 0 18px;color:var(--slate)}
.faq-a p{margin:0 0 10px;font-size:14.5px;line-height:1.6}
.ville-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0E1729}
.ville-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ville-mesh{margin:0 auto 50px;max-width:1120px;padding:0 24px}
.ville-mesh summary{cursor:pointer;color:var(--muted);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;list-style:none}
.ville-mesh summary::-webkit-details-marker{display:none}
.ville-mesh-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px}
.ville-mesh-links a{font-size:12px;color:var(--muted);text-decoration:none}
.ville-mesh-links a:hover{color:var(--navy)}

/* Maillage villes intégré au pied de page noir */
.footer-extra{border-top:.5px solid rgba(255,255,255,.10);margin-top:26px;padding-top:22px}
.ville-mesh summary{color:rgba(255,255,255,.42)}
.ville-mesh[open] summary{margin-bottom:14px}
.ville-mesh-links a{color:rgba(255,255,255,.40)}
.ville-mesh-links a:hover{color:#fff}
