@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/poppins-latin-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/poppins-latin-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/poppins-latin-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/poppins-latin-700.woff2") format("woff2")}
/* Haye Solutions : maquette statique. Charte : Poppins, cyan #23CAE2, fond blanc / gris clair. */
:root{
  --cyan:#23CAE2; --cyan-dark:#12a3b9;
  --noir:#222222; --corps:#616161; --leger:#757575;
  --blanc:#ffffff; --gris:#F4F4F4;
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--corps); background:var(--blanc);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.65;
}
a{color:var(--cyan-dark)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* En-tête */
header{border-bottom:1px solid var(--gris); background:var(--blanc); position:sticky; top:0; z-index:5}
header .wrap{display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--noir); font-weight:600}
.logo{height:38px; width:auto; display:block}
nav{display:flex; align-items:center}
nav a{margin-left:22px; text-decoration:none; color:var(--noir); font-size:14px; font-weight:500; white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--cyan-dark)}
nav a.btn-nav{padding:8px 16px; font-size:14px; color:var(--noir)}
nav a.btn-nav:hover{color:var(--noir)}
@media (max-width:520px){ nav a.btn-nav{width:auto} }

/* Boutons */
.btn{display:inline-block; padding:13px 26px; border-radius:6px; font-weight:600; font-size:15px; text-decoration:none; border:2px solid var(--cyan); transition:.15s}
.btn-primary{background:var(--cyan); color:var(--noir)}
.btn-primary:hover{background:var(--cyan-dark); border-color:var(--cyan-dark)}
.btn-secondary{background:transparent; color:var(--noir)}
.btn-secondary:hover{background:var(--gris)}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* Haut de page */
.hero{padding:88px 0 72px; background:linear-gradient(180deg,var(--blanc) 0%,var(--gris) 100%)}
.hero h1{font-size:clamp(32px,5.2vw,54px); line-height:1.15; color:var(--noir); font-weight:700; margin:0 0 20px; max-width:16em}
.hero h1 em{font-style:normal; color:var(--cyan-dark)}
.hero .lead{font-size:clamp(17px,2vw,20px); max-width:38em; margin:0}
.proof{margin-top:38px; font-size:14px; color:var(--leger); border-top:1px solid #e3e3e3; padding-top:16px; max-width:46em}

/* Sections */
section{padding:72px 0}
section.alt{background:var(--gris)}
h2{font-size:clamp(26px,3.4vw,36px); line-height:1.25; color:var(--noir); margin:0 0 14px; font-weight:700}
h3{color:var(--noir); font-size:19px; margin:0 0 8px; font-weight:600}
.intro{max-width:40em; margin:0 0 36px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.card{background:var(--blanc); border-radius:10px; padding:28px; border:1px solid #e8e8e8}
section.alt .card{border-color:transparent}
.card .tag{display:inline-block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-dark); margin-bottom:8px}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s; list-style:none; padding:0; margin:0}
.steps li{counter-increment:s; background:var(--blanc); border-radius:10px; padding:24px; border:1px solid #e8e8e8}
.steps li::before{content:counter(s); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--cyan); color:var(--noir); font-weight:700; margin-bottom:12px}
.steps strong{display:block; color:var(--noir); margin-bottom:6px}
.steps small{display:block; color:var(--leger); font-size:13px; margin-top:6px}
ul.check{padding:0; list-style:none; margin:0 0 6px}
ul.check li{padding-left:26px; position:relative; margin:8px 0}
ul.check li::before{content:"✓"; position:absolute; left:0; color:var(--cyan-dark); font-weight:700}
.cta-final{text-align:center; background:var(--noir); color:#ddd}
.cta-final h2{color:var(--blanc)}
.cta-final .actions{justify-content:center}
.cta-final .btn-secondary{color:var(--blanc); border-color:#777}
.cta-final .btn-secondary:hover{background:#333}
.faq details{background:var(--blanc); border:1px solid #e8e8e8; border-radius:8px; padding:16px 20px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:600; color:var(--noir)}
.faq p{margin:10px 0 0}

/* Pied de page */
footer{padding:36px 0; font-size:13px; color:var(--leger); border-top:1px solid var(--gris)}
footer a{color:var(--leger)}

@media (max-width:860px){
  .grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  nav a{margin-left:14px}
  .hero{padding:56px 0 48px}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .brand span.name{display:none}
  .btn{width:100%; text-align:center}
}

/* Quiz */
.quiz{max-width:720px}
.progress{height:6px; background:#e3e3e3; border-radius:3px; overflow:hidden; margin:0 0 8px}
.progress span{display:block; height:100%; width:0; background:var(--cyan); transition:width .25s}
.step-label{font-size:13px; color:var(--leger); margin:0 0 24px}
.q{font-size:clamp(20px,2.6vw,26px); color:var(--noir); font-weight:600; line-height:1.35; margin:0 0 20px}
.opts{display:grid; gap:10px}
.opt{display:block; width:100%; text-align:left; font:inherit; color:var(--noir); background:var(--blanc); border:2px solid #e3e3e3; border-radius:8px; padding:14px 18px; cursor:pointer; transition:.12s}
.opt:hover,.opt:focus-visible{border-color:var(--cyan); outline:none}
.opt[aria-pressed="true"]{border-color:var(--cyan); background:#effbfd}
.quiz-nav{display:flex; justify-content:space-between; margin-top:22px}
.link-btn{background:none; border:0; font:inherit; color:var(--leger); cursor:pointer; text-decoration:underline; padding:6px 0}
.score{font-size:46px; font-weight:700; color:var(--noir); line-height:1; margin:6px 0 4px}
.level{display:inline-block; font-weight:600; background:var(--cyan); color:var(--noir); border-radius:20px; padding:3px 14px; font-size:14px}
.prio{margin:10px 0; padding:16px 18px; background:var(--gris); border-left:4px solid var(--cyan); border-radius:6px}
.bars{margin:18px 0}
.bar{display:grid; grid-template-columns:minmax(120px,210px) 1fr 44px; align-items:center; gap:10px; font-size:14px; margin:7px 0}
.bar i{display:block; height:8px; background:#e3e3e3; border-radius:4px; overflow:hidden}
.bar i b{display:block; height:100%; background:var(--cyan)}
.hidden{display:none}
.field{margin:12px 0}
.field label{display:block; font-weight:500; color:var(--noir); font-size:14px; margin-bottom:4px}
.field input[type=email],.field input[type=text]{width:100%; font:inherit; padding:11px 14px; border:2px solid #e3e3e3; border-radius:6px}
.field input:focus{border-color:var(--cyan); outline:none}
.consent{font-size:13px; display:flex; gap:10px; align-items:flex-start}
.consent input{margin-top:5px}
.note{font-size:13px; color:var(--leger)}
@media (max-width:520px){ .bar{grid-template-columns:1fr 44px} .bar i{grid-column:1/-1; order:3} }

@media (max-width:640px){ .legal table{display:block; overflow-x:auto} }

.todo{background:#fff6d6;padding:0 4px;border-radius:3px}

/* Refonte du 01/11/2026 : photos, preuves humaines, parcours d'accompagnement */
:root{--marine:#16304f; --cyan-pale:#e9f9fc; --sable:#faf8f5}
.footer-links{margin-top:6px}
@media (max-width:980px){
  header .wrap{flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
  nav{width:100%; min-width:0; overflow-x:auto; padding-bottom:4px}
  nav a:first-child{margin-left:0}
}

/* Haut de page avec photo */
.hero-photo{position:relative; padding:0; background:linear-gradient(90deg,rgba(244,244,244,.97) 0%,rgba(244,244,244,.9) 38%,rgba(244,244,244,0) 62%),#f4f4f4 url("assets/img/entete.jpg") right center/cover no-repeat}
.hero-photo .wrap{padding-top:110px; padding-bottom:110px}
.hero-photo .texte{max-width:560px}
.hero-photo h1{font-size:clamp(32px,4.6vw,50px); line-height:1.15; color:var(--noir); font-weight:700; margin:0 0 20px}
.hero-photo h1 em{font-style:normal; color:var(--cyan-dark)}
.hero-photo .lead{font-size:clamp(17px,2vw,20px); color:#4a4a4a; margin:0}
.brand{white-space:nowrap}
.surtitre{display:block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-dark); margin-bottom:14px}
/* Petits écrans : le texte d'abord, la photo en dessous, sans superposition */
@media (max-width:1100px){
  .hero-photo{background:#f4f4f4 url("assets/img/entete.jpg") center bottom/100% auto no-repeat}
  .hero-photo .wrap{padding-top:56px; padding-bottom:calc(46vw + 24px)}
  .hero-photo .texte{max-width:640px}
}

/* Bandeau de logos clients */
.logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px 40px; margin:8px 0 0}
.logos img{height:44px; width:auto; max-width:140px; object-fit:contain; filter:grayscale(1); opacity:.7; transition:.2s}
.logos img:hover{filter:none; opacity:1}
/* Secteurs accompagnés, sous la promesse */
.secteurs{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:20px 0 0}
.secteurs li{font-size:13px; font-weight:600; color:var(--marine); background:rgba(255,255,255,.85); border:1px solid #dfe5ea; border-radius:20px; padding:4px 14px}

/* Lien avec flèche */
.lien-fleche{font-weight:600; font-size:15px; text-decoration:none; color:var(--cyan-dark)}
.lien-fleche::after{content:" →"; transition:margin .15s}
.lien-fleche:hover::after{margin-left:4px}

/* Références : texte à gauche, grille de logos 3x4 à droite, tous à la même taille et en gris */
.clients{padding:64px 0}
.clients .wrap{display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center}
.clients h2{margin-bottom:12px}
.clients p{margin:0 0 18px}
.grille-logos{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grille-logos.cinq{grid-template-columns:repeat(5,1fr)}
.grille-logos > a,.grille-logos > div{display:grid; place-items:center; height:84px; padding:14px 18px; background:var(--blanc); border:1px solid #edf0f2; border-radius:10px; text-decoration:none; transition:.2s}
.grille-logos img{max-width:100%; max-height:46px; width:auto; height:auto; object-fit:contain; filter:grayscale(1) contrast(1.1); mix-blend-mode:multiply; opacity:.72; transition:.2s}

.grille-logos img.fonce{filter:brightness(0); mix-blend-mode:normal; opacity:.6}
@media (max-width:900px){ .clients .wrap{grid-template-columns:1fr; gap:28px} .grille-logos.cinq{grid-template-columns:repeat(3,1fr)} }
@media (max-width:420px){ .grille-logos,.grille-logos.cinq{grid-template-columns:repeat(2,1fr)} }

/* Nos accompagnements : frise en quatre temps */
.accomp{background:linear-gradient(180deg,#f3f8fa 0%,#eaf3f6 100%); padding:80px 0}
.accomp-tete{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:44px}
.accomp-tete h2{margin:0}
.accomp-tete p{margin:0}
.frise{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative}
.frise::before{content:""; position:absolute; left:9px; right:9px; top:9px; height:3px; border-radius:2px; background:linear-gradient(90deg,#bfeef5 0%,var(--cyan) 55%,var(--marine) 100%)}
.pas{display:flex; flex-direction:column}
.repere{position:relative; display:flex; align-items:center; gap:10px; margin-bottom:18px; height:21px}
.repere .point{width:21px; height:21px; border-radius:50%; background:var(--blanc); border:4px solid var(--cyan); flex:none; position:relative; z-index:1}
.repere .duree{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--marine); background:#eef6f8; padding:0 8px; position:relative; z-index:1}
.pas-fort .repere .point{border-color:var(--marine)}
.carte{flex:1; display:flex; flex-direction:column; background:var(--blanc); border-radius:16px; padding:26px 24px 24px; box-shadow:0 6px 20px rgba(22,48,79,.07); transition:transform .2s, box-shadow .2s}
.carte:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(22,48,79,.13)}
.carte .icone{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--cyan-pale); color:var(--cyan-dark); margin-bottom:16px}
.carte .icone svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.carte .etiquette{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-dark)}
.carte h3{font-size:20px; line-height:1.25; margin:6px 0 4px}
.carte .metaphore{font-size:14px; font-weight:500; color:var(--marine); margin:0 0 12px}
.carte p{font-size:15px; margin:0 0 16px}
.carte .lien-fleche{margin-top:auto; font-size:14px}
.pas-libre .carte{background:rgba(255,255,255,.6); border:1.5px dashed #a9dfe8; box-shadow:none}
.pas-fort .carte{background:var(--marine); color:#d6dde6; box-shadow:0 14px 34px rgba(22,48,79,.28)}
.pas-fort .carte h3{color:var(--blanc)} .pas-fort .carte .metaphore{color:var(--cyan)} .pas-fort .carte .etiquette{color:var(--cyan)}
.pas-fort .carte .icone{background:rgba(35,202,226,.15); color:var(--cyan)}
.pas-fort .carte .lien-fleche{color:var(--cyan)}
@media (max-width:1000px){
  .accomp-tete{grid-template-columns:1fr; gap:12px}
  .frise{grid-template-columns:1fr; gap:22px; padding-left:34px}
  .frise::before{left:9px; right:auto; top:10px; bottom:10px; width:3px; height:auto; background:linear-gradient(180deg,#bfeef5 0%,var(--cyan) 55%,var(--marine) 100%)}
  .repere{position:absolute; left:-34px; margin:0}
  .repere .duree{position:static; margin-left:34px; background:transparent; padding:0}
  .pas{position:relative; padding-top:26px}
  .repere{top:0}
}

/* Logo fourni en blanc (MadeForMed) : rendu foncé sur fond clair */
.logos img.fonce,.logos img.fonce:hover{filter:brightness(0); opacity:.6}
.parcours-ligne{text-align:center; font-size:14px; color:var(--leger); margin:26px 0 0}
section.serre{padding:48px 0}
.centre{text-align:center}
.centre .intro{margin-left:auto; margin-right:auto}

/* Parcours d'accompagnement */
.parcours{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.etape{background:var(--blanc); border-radius:12px; padding:26px 24px; border:1px solid #e8e8e8; display:flex; flex-direction:column}
.etape .num{font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--cyan-dark)}
.etape h3{font-size:20px; margin:6px 0 2px}
.etape .image{font-size:14px; font-style:italic; color:var(--leger); margin:0 0 12px}
.etape p{margin:0 0 12px; font-size:15px}
.etape .plus{margin-top:auto; font-size:14px; font-weight:600; text-decoration:none}
.etape.legere{background:var(--cyan-pale); border-color:transparent}
.etape.forte{background:var(--marine); border-color:transparent; color:#d6dde6}
.etape.forte h3{color:var(--blanc)} .etape.forte .num{color:var(--cyan)} .etape.forte .image{color:#a9b6c6} .etape.forte .plus{color:var(--cyan)}
.badge{display:inline-block; align-self:flex-start; font-size:12px; font-weight:600; background:var(--blanc); color:var(--cyan-dark); border-radius:20px; padding:2px 12px; margin-bottom:10px}
@media (max-width:980px){ .parcours{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .parcours{grid-template-columns:1fr} }

/* Bénéfices */
.benefices{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.benefices .card{border-left:4px solid var(--cyan)}
@media (max-width:860px){ .benefices{grid-template-columns:1fr} }

/* Équipe et relation de travail */
.duo{display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:center}
.duo img{width:100%; height:auto; border-radius:14px; display:block}
.legende{font-size:13px; color:var(--leger); margin-top:8px}
.quotidien{display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin-top:24px}
.quotidien h3{font-size:16px; margin:0 0 4px}
.quotidien p{margin:0; font-size:15px}
@media (max-width:860px){ .duo,.quotidien{grid-template-columns:1fr} .duo{gap:28px} }
section.sable{background:var(--sable)}

/* Cas clients */
.cas{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.cas article{background:var(--blanc); border-radius:12px; padding:28px; border:1px solid #e8e8e8}
.cas dl{margin:14px 0 0}
.cas dt{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-dark); margin-top:12px}
.cas dd{margin:2px 0 0}
.cas .resultat{font-weight:600; color:var(--noir)}
@media (max-width:860px){ .cas{grid-template-columns:1fr} }

/* Témoignages vidéo : vignettes homogènes, la vidéo s'ouvre sur Vimeo (aucun service tiers chargé sur le site) */
.temoignages{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 32px}
.temoignage{display:flex; flex-direction:column}
/* Style B validé le 01/11/2026 : image fixe du client tirée de sa vidéo (assets/temoignages/), bandeau marine et cyan.
   Tant que l'image manque, le dégradé gris s'affiche à sa place. */
.vignette{position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; text-decoration:none; color:var(--blanc); background-color:#aab4bf; background-image:var(--photo),linear-gradient(135deg,#8a96a3 0%,#c3cbd3 100%); background-size:var(--zoom,150%) auto,cover; background-position:center 18%,center}
.vignette .marque{position:absolute; top:12px; left:14px; background:var(--blanc); border-radius:6px; padding:3px 9px; font-size:11px; font-weight:600; color:var(--marine)}
.vignette .play{position:absolute; right:16px; bottom:58px; width:50px; height:50px; border-radius:50%; background:var(--cyan); display:grid; place-items:center; transition:.2s; box-shadow:0 4px 14px rgba(0,0,0,.25)}
.vignette .play::after{content:""; border-left:17px solid var(--noir); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:5px}
.vignette:hover .play{transform:scale(1.08)}
.vignette .bande{position:absolute; left:0; right:0; bottom:0; background:rgba(22,48,79,.92); border-top:3px solid var(--cyan); padding:9px 16px; font-size:13px; line-height:1.35}
.vignette .bande strong{font-size:15px}
.vignette.attente .play{background:rgba(255,255,255,.75)}
.temoignage blockquote{margin:14px 0 4px; font-size:15px; color:var(--noir)}
.temoignage .source{font-size:13px; color:var(--leger)}
@media (max-width:860px){ .temoignages{grid-template-columns:1fr} }

/* Extrait de livrable : diaporama simple, sans script */
.livrable{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(22,48,79,.18); background:var(--blanc)}
.livrable img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:fondu 16s infinite}
/* Délais négatifs : chaque image démarre déjà au bon moment du cycle, la première est visible dès le chargement */
.livrable img:nth-child(1){animation-delay:0s} .livrable img:nth-child(2){animation-delay:-12s}
.livrable img:nth-child(3){animation-delay:-8s} .livrable img:nth-child(4){animation-delay:-4s}
@keyframes fondu{0%{opacity:1}22%{opacity:1}25%{opacity:0}97%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .livrable img{animation:none} .livrable img:first-child{opacity:1} }

/* Invitation discrète à l'autodiagnostic */
.autodiag{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; background:var(--cyan-pale); border-radius:12px; padding:22px 28px; margin-top:36px}
.autodiag p{margin:0; max-width:44em}
.autodiag a{font-weight:600}
.cta-final .sous-cta{margin-top:22px; font-size:14px; color:#bbb}
.cta-final .sous-cta a{color:var(--cyan)}
.lead-txt{font-size:clamp(17px,2vw,20px);max-width:40em}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

/* Bouton : précision sous le libellé */
.btn small{display:block; font-weight:500; font-size:12px; opacity:.8; margin-top:2px}
/* Accueil : avant/après, ligne Autodiagnostic, bandeau d'autorité */
.hero-photo .avant-apres{margin:16px 0 0; font-style:italic; font-size:16px; color:#555}
.hero-photo .hero-auto{margin:18px 0 0; font-size:15px; color:#4a4a4a}
.hero-photo .hero-auto a{font-weight:600; color:var(--cyan-dark)}

/* Bandeau d'autorité : parcours du fondateur */
.autorite{background:var(--blanc); padding:44px 0 40px; border-bottom:1px solid #eee; text-align:center}
.autorite h2{font-size:clamp(22px,3vw,30px); margin:0 0 28px}
.autorite .parcours{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0; margin:0 auto; max-width:860px}
.autorite .parcours li{display:flex; flex-direction:column; align-items:center; gap:4px}
.autorite .parcours strong{font-size:17px; color:var(--noir)}
.autorite .parcours span{font-size:14px; color:#666}
.autorite .parcours img{height:34px; width:auto; max-width:140px; object-fit:contain; margin-top:12px; filter:grayscale(1); opacity:.8}
@media (max-width:720px){ .autorite .parcours{grid-template-columns:1fr; gap:26px} }
/* Podcast */
.podcast .wrap{display:grid; grid-template-columns:5fr 6fr; gap:48px; align-items:start}
.podcast h2{margin-top:6px}
.podcast .ecouter{margin:28px 0 12px; font-weight:700; color:var(--noir)}
.podcast .plateformes{display:flex; flex-wrap:wrap; gap:10px}
.podcast .plateformes a{display:flex; align-items:center; gap:8px; padding:12px 14px; font-size:14px; background:#fff; border-radius:18px; box-shadow:0 4px 16px rgba(0,0,0,.08); color:var(--noir); font-weight:600; text-decoration:none; transition:.15s}
.podcast .plateformes a:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.12)}
.podcast .plateformes svg{width:30px; height:30px; flex:none}
.podcast .episodes{background:#fff; border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.08); padding:22px}
.podcast .episodes-tete{margin:0 0 14px; font-size:14px; font-weight:600; color:#888}
.podcast .episodes ol{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.podcast .episodes a{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--gris); border-radius:10px; text-decoration:none; color:var(--noir); transition:.15s}
.podcast .episodes a:hover{background:var(--cyan-pale)}
.podcast .episodes .num{font-size:12px; font-weight:700; color:var(--cyan-dark); min-width:44px}
.podcast .episodes .titre{flex:1; font-weight:600; line-height:1.3}
.podcast .episodes small{display:block; font-weight:400; font-size:13px; color:#777; margin-top:3px}
.podcast .episodes .lecture{width:34px; height:34px; border-radius:50%; background:var(--cyan); flex:none; position:relative}
.podcast .episodes .lecture::after{content:""; position:absolute; left:13px; top:10px; border-left:11px solid var(--noir); border-top:7px solid transparent; border-bottom:7px solid transparent}
@media (max-width:900px){ .podcast .wrap{grid-template-columns:1fr; gap:32px} }

/* Vidéo de démonstration (Finance Operating System) */
.demo{margin:28px 0 8px; max-width:880px}
.demo video{width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.14); background:#f4f4f4}
.demo figcaption{margin-top:10px; font-size:14px; color:#777}
.demo-duo{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:28px 0 8px; align-items:start}
.demo-duo .demo{margin:0; max-width:none}
.demo img{width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.14); background:#fff}
@media (max-width:820px){ .demo-duo{grid-template-columns:1fr} }

/* Accueil : deux encarts d'entrée (score, appel découverte) */
.hero-photo .encarts{display:grid; gap:14px; margin:26px 0 0; max-width:520px}
.hero-photo .encart{padding:18px 22px; background:#fff; border-radius:14px; border-left:5px solid var(--cyan); box-shadow:0 6px 22px rgba(0,0,0,.10)}
.hero-photo .encart .accroche{font-size:19px; font-weight:700; color:var(--noir); margin:0 0 4px}
.hero-photo .encart p{margin:0 0 12px; color:#4a4a4a}
.hero-photo .encart .duree{font-size:13px; color:#777; white-space:nowrap}
.hero-photo .en-savoir-plus{display:inline-block; margin-top:18px}

.site-temoin{margin:6px 0 0; font-size:13px}
.site-temoin a{color:var(--cyan-dark); text-decoration:none; font-weight:600}
.site-temoin a::after{content:" ↗"}
.site-temoin a:hover{text-decoration:underline}

/* Mise en avant de la gratuité */
.hero-photo .encart .badge-gratuit{display:inline-block; margin:2px 0 14px; padding:5px 14px; background:var(--cyan-pale); color:#0b7a8c; border-radius:999px; font-size:14px; font-weight:600}
.hero-photo .encart .badge-gratuit strong{font-weight:800; text-transform:uppercase; letter-spacing:.04em}
.hero-photo .encart .badge-gratuit + .btn{display:table}

/* Grille 4x4 : logos cliquables, surbrillance bleue au survol */
.clients .wrap{grid-template-columns:4fr 8fr}
.grille-logos.quatre{grid-template-columns:repeat(4,1fr)}
.grille-logos img.grand{max-height:64px}
.grille-logos a:hover,.grille-logos a:focus-visible{background:var(--cyan-pale); border-color:var(--cyan); box-shadow:0 0 0 3px rgba(35,202,226,.22), 0 6px 18px rgba(35,202,226,.35); outline:none}
.grille-logos a:hover img,.grille-logos a:focus-visible img{opacity:1; filter:grayscale(1) sepia(1) hue-rotate(155deg) saturate(5) contrast(1.05)}
.grille-logos a:hover img.fonce,.grille-logos a:focus-visible img.fonce{filter:brightness(0) invert(.55) sepia(1) hue-rotate(150deg) saturate(8); mix-blend-mode:normal}
@media (max-width:900px){ .grille-logos.quatre{grid-template-columns:repeat(4,1fr)} .clients .wrap{grid-template-columns:1fr} }
@media (max-width:640px){ .grille-logos.quatre{grid-template-columns:repeat(2,1fr)} }

/* Accueil : rendez-vous en premier, Autodiagnostic en secondaire puis bloc dédié */
.hero-photo .appel-principal{margin:28px 0 0}
.btn-lg{padding:17px 34px; font-size:18px}
.hero-photo .mention-appel{margin:12px 0 0; font-size:15px; color:#4a4a4a}
.hero-photo .mention-appel strong{color:#0b7a8c; text-transform:uppercase; letter-spacing:.04em; font-size:13px}
.hero-photo .score-lien{margin:22px 0 0; font-size:15px; color:#4a4a4a}
.hero-photo .score-lien a{font-weight:600; color:var(--cyan-dark)}
.hero-photo .score-lien .duree{font-size:13px; color:#777; white-space:nowrap}
.hero-photo .en-savoir-plus{display:inline-block; margin-top:16px}
.bloc-score{padding:56px 0; background:var(--cyan-pale)}
.encart-score{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; padding:30px 34px; background:#fff; border-radius:16px; border-left:6px solid var(--cyan); box-shadow:0 6px 22px rgba(0,0,0,.08)}
.encart-score h2{margin:4px 0 8px; font-size:clamp(22px,3vw,30px)}
.encart-score p{margin:0; color:#4a4a4a}
.encart-score .action-score{display:grid; gap:12px; justify-items:start}
.encart-score .badge-gratuit{padding:5px 14px; background:var(--cyan-pale); color:#0b7a8c; border-radius:999px; font-size:14px; font-weight:600}
.encart-score .badge-gratuit strong{font-weight:800; text-transform:uppercase; letter-spacing:.04em}
@media (max-width:780px){ .encart-score{grid-template-columns:1fr; padding:24px} }

/* Refonte des textes (02/11/2026) */
.hero-photo .lead-2{margin:14px 0 0; font-size:17px; color:#4a4a4a}
.chapeau{margin:0 0 14px; font-weight:600; color:#0b7a8c}
.exemple-ecom{margin:28px 0 0; padding:20px 24px; background:#fff; border:1px dashed var(--cyan); border-radius:12px; max-width:760px}
.exemple-ecom .etiquette-ex{display:inline-block; margin-bottom:8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#777}
.exemple-ecom .question{margin:0 0 8px; font-size:19px; font-weight:600; color:var(--noir)}
.exemple-ecom p{margin:0 0 6px; color:#4a4a4a}
.cas{margin-bottom:8px}

@media (min-width:1001px){ .frise.trois{grid-template-columns:repeat(3,1fr); gap:24px} }

.grille-logos .nom-texte{font-weight:600; font-size:15px; color:#8a8a8a; text-align:center; line-height:1.25}

/* Autodiagnostic financier v1 (03/11/2026) */
.opt-inconnu{border-style:dashed; color:var(--leger); margin-top:6px}
.aide{font-size:14px; color:var(--leger); margin:-10px 0 18px}
.precision{margin-top:14px}
.precision textarea{width:100%; font:inherit; padding:11px 14px; border:2px solid #e3e3e3; border-radius:6px; min-height:70px}
.precision textarea:focus{border-color:var(--cyan); outline:none}
.score small{font-size:22px; color:var(--leger); font-weight:600}
.prio h3{margin:0 0 6px}
.prio p{margin:0}
.encart{margin-top:30px}
.encart .actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.debug{white-space:pre-wrap; font-size:12px; background:#f4f4f4; border:1px dashed #bbb; border-radius:6px; padding:10px; margin-top:24px}

#transition-texte .transition-discret{font-size:14px; color:#6b7280; margin:22px 0 0}
#transition-texte .transition-suite{font-size:17px; margin:34px 0 0}
.cta-final .sous-cta{font-size:16px; color:#e8e8e8; max-width:46em; margin-left:auto; margin-right:auto}
.cta-final .sous-cta strong{color:#fff}