/* Sparky — style de la page d'accueil */
:root{
    --navy:#12395C;
    --navy-dark:#0E2C47;
    --teal:#5B8A9A;
    --gold:#C9A227;
    --cream:#FAF5EA;
    --cream-2:#F2EBDB;
    --ink:#12395C;
    --muted:#3b5064;
    --magenta:#C96A9E;
    --violet:#7C6BC9;
    --green:#3E8E6E;
    --orange:#E08A3C;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Plus Jakarta Sans', sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.5;
  }
  h1,h2,h3,.logo,.nav a, .btn{ font-family:'Baloo 2', sans-serif; }
  a{ text-decoration:none; color:inherit; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

  .halftone{
    background-image: radial-gradient(rgba(18,57,92,0.16) 1.6px, transparent 1.6px);
    background-size: 15px 15px;
  }
  .halftone-light{
    background-image: radial-gradient(rgba(255,255,255,0.25) 1.6px, transparent 1.6px);
    background-size: 15px 15px;
  }

  .eyebrow{
    display:inline-block; background:#0A161D; color:#fff;
    padding:clamp(7px,.55vw,12px) clamp(18px,1.6vw,32px);
    border-radius:40px; font-size:clamp(14px,1.15vw,21px); font-weight:800;
    letter-spacing:clamp(1.5px,.14vw,2.6px);
    margin-bottom:clamp(16px,1.4vw,26px); text-transform:uppercase; font-family:'Baloo 2';
  }
  .eyebrow.on-dark{ background:#fff; color:var(--navy-dark); }

  .ph{
    background:repeating-linear-gradient(45deg, #ffffff40, #ffffff40 8px, transparent 8px, transparent 16px);
    border:3px dashed currentColor;
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    text-align:center; font-size:13px; font-weight:700;
    opacity:0.85;
  }

  .comic-card{
    background:#fff; border:3px solid var(--navy); border-radius:20px;
    box-shadow:6px 6px 0 var(--navy);
  }

  /* ---- socle de mise en page (absent : c'est la cause des sections collees
     et des titres invisibles sur fond navy) ---- */
  img{ max-width:100%; }
  .section{ padding:76px 0; }
  .section + .section{ padding-top:76px; }
  h2.title{ font-size:32px; color:var(--navy); margin:0 0 12px; line-height:1.2; }
  .section-dark h2.title, .section-darker h2.title{ color:#fff; }
  p.sub{ color:var(--muted); font-size:15.5px; line-height:1.7; max-width:660px; margin:0 0 38px; }
  .section-dark p.sub, .section-darker p.sub{ color:#d7e2ea; }
  .center{ text-align:center; }
  .center p.sub{ margin-left:auto; margin-right:auto; }
  :where(section,footer)[id]{ scroll-margin-top:96px; }
  @media (max-width:820px){
    .section{ padding:56px 0; }
    .section + .section{ padding-top:56px; }
    h2.title{ font-size:26px; }
  }

  /* HEADER */
  header{ background:var(--cream); padding:20px 0; position:sticky; top:0; z-index:20; border-bottom:3px solid var(--navy); }
  header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  .logo{ font-weight:800; font-size:22px; letter-spacing:0.5px; color:var(--navy); }
  .nav{ display:flex; gap:32px; font-size:15px; font-weight:600; font-family:'Plus Jakarta Sans'; }
  .nav a:hover{ color:var(--teal); }
  .btn{
    display:inline-block; font-weight:700; font-size:14px; padding:11px 24px;
    border-radius:30px; border:3px solid var(--navy); background:var(--gold); color:#fff;
    box-shadow:4px 4px 0 var(--navy); transition:transform .1s, box-shadow .1s;
  }
  .btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); }
  .btn-outline{ background:var(--cream); color:var(--navy); }
  .btn-outline.on-dark{ background:var(--navy); color:#fff; border-color:#fff; box-shadow:4px 4px 0 #fff; }

  /* HERO */
  .hero{ padding:70px 0 60px; position:relative; }
  .hero .wrap{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; }
  .hero h1{ font-size:46px; font-weight:800; line-height:1.15; color:var(--navy); }
  .hero p{ font-size:17px; margin:18px 0 28px; color:#3b5064; max-width:440px; }
  .hero-ctas{ display:flex; gap:14px; }
  .hero-visual{ aspect-ratio:1/1; color:var(--teal); position:relative; }
  .hero-visual .ph{ height:100%; }
  .sparkle{ position:absolute; font-size:22px; }

  .badges{ display:flex; gap:22px; margin-top:36px; flex-wrap:wrap; }
  .badge-pill{
    font-size:12px; font-weight:700; color:var(--navy); background:#fff;
    border:2px solid var(--navy); border-radius:20px; padding:6px 14px;
    box-shadow:3px 3px 0 var(--navy);
  }

  /* TRUST LOGOS */
  .logos{ padding:26px 0; border-top:3px solid var(--navy); border-bottom:3px solid var(--navy); background:#fff; }
  .logos .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; font-weight:700; font-size:13px; color:var(--navy); opacity:0.7; }

  /* TEAM */
  .team{ padding:70px 0; text-align:center; }
  .team h2{ font-size:32px; color:var(--navy); margin-bottom:8px; }
  .team p.sub{ color:#3b5064; margin-bottom:40px; font-size:15px; }
  .team-grid{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; }
  .agent{ width:130px; }
  .agent .avatar{
    width:110px; height:110px; border-radius:50%; margin:0 auto 10px;
    border:3px solid var(--navy); box-shadow:4px 4px 0 var(--navy);
    object-fit:cover; background:var(--cream-2);
  }
  .agent .ph.avatar{ color:var(--teal); font-size:11px; }
  .agent b{ display:block; font-size:15px; color:var(--navy); font-family:'Baloo 2'; }
  .agent span{ font-size:12px; color:#3b5064; }

  /* PROCESS - navy band */
  .process{ background:var(--navy); color:#fff; padding:70px 0; position:relative; overflow:hidden; }
  .process .wrap{ display:grid; grid-template-columns:220px 1fr; gap:40px; position:relative; z-index:1; }
  .steps{ display:flex; flex-direction:column; gap:6px; }
  .steps button{
    background:#ffffff10; border:2px solid transparent; color:#ffffff90; text-align:left; padding:12px 18px;
    font-family:'Baloo 2'; font-size:14px; font-weight:700; letter-spacing:0.5px; cursor:pointer;
    border-radius:14px;
  }
  .steps button.active{ color:var(--navy); background:var(--gold); border-color:#0A161D; box-shadow:3px 3px 0 #0A161D; }
  .step-content h3{ font-size:28px; margin-bottom:12px; font-family:'Baloo 2'; }
  .step-content p{ color:#d7e2ea; max-width:480px; margin-bottom:20px; font-size:15px; }
  .step-panel{ display:none; }
  .step-panel.active{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
  .step-illus{ height:220px; color:#ffffffcc; background:#ffffff10; border-color:#ffffff60; }

  /* TRUST + INTEGRATIONS - navy dark band */
  .trust{ background:var(--navy-dark); color:#fff; padding:70px 0; }
  .trust .wrap > h2{ font-size:26px; margin-bottom:36px; font-family:'Baloo 2'; }
  .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:50px; }
  .trust-item{
    font-size:13px; color:#d7e2ea; background:#ffffff0d; border:2px solid #ffffff40;
    border-radius:14px; padding:16px;
  }
  .trust-item b{ display:block; color:#fff; font-size:14px; margin-bottom:6px; font-family:'Baloo 2'; }
  .integrations{ display:flex; gap:16px; flex-wrap:wrap; }
  .integrations span{
    border:2px solid var(--gold); color:var(--gold); border-radius:20px; padding:8px 16px;
    font-size:12px; font-weight:700;
  }

  /* COMPARATIF */
  .compare{ padding:70px 0; text-align:center; }
  .compare h2{ font-size:30px; color:var(--navy); margin-bottom:36px; font-family:'Baloo 2'; }
  table{ width:100%; border-collapse:separate; border-spacing:0; max-width:720px; margin:0 auto; }
  th,td{ padding:16px 18px; text-align:left; font-size:14px; border-bottom:2px solid var(--navy); }
  th{ color:#fff; background:var(--navy); font-family:'Baloo 2'; font-size:15px; }
  th:first-child{ border-radius:14px 0 0 0; }
  th:last-child{ border-radius:0 14px 0 0; }
  .yes{ color:#2f7d4f; font-weight:800; }
  .no{ color:#b23b3b; font-weight:800; }

  /* PRESENTATION */
  .founder{ padding:70px 0; }
  .founder .wrap{ display:flex; gap:32px; align-items:center; max-width:760px; }
  .founder .ph{ width:120px; height:120px; border-radius:50%; flex-shrink:0; color:var(--teal); font-size:11px;
    border-color:var(--navy); box-shadow:4px 4px 0 var(--navy); }
  .founder p{ font-size:15px; color:#3b5064; }
  .founder b{ color:var(--navy); font-family:'Baloo 2'; }

  /* FAQ */
  .faq{ padding:70px 0; max-width:720px; margin:0 auto; }
  .faq h2{ font-size:30px; color:var(--navy); margin-bottom:30px; text-align:center; font-family:'Baloo 2'; }
  details{ border:2px solid var(--navy); border-radius:14px; padding:16px 20px; margin-bottom:12px; background:#fff; }
  summary{ cursor:pointer; font-weight:700; color:var(--navy); font-size:15px; list-style:none; display:flex; justify-content:space-between; font-family:'Baloo 2'; }
  summary::-webkit-details-marker{ display:none; }
  details p{ margin-top:10px; font-size:14px; color:#3b5064; }

  /* CTA FINAL */
  .cta-final{ background:var(--gold); text-align:center; padding:60px 24px; color:#fff; position:relative; overflow:hidden; }
  .cta-final h2{ font-size:30px; margin-bottom:20px; font-family:'Baloo 2'; position:relative; z-index:1; }
  .cta-final .btn{ position:relative; z-index:1; }

  /* FOOTER */
  footer{ background:var(--navy-dark); color:#d7e2ea; padding:50px 0 24px; font-size:13px; border-top:4px solid var(--gold); }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px; }
  footer h4{ color:#fff; font-size:13px; margin-bottom:12px; font-family:'Baloo 2'; }
  footer ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
  .footer-bottom{ border-top:1px solid #ffffff20; padding-top:20px; opacity:0.6; }

  @media (max-width:820px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; max-width:220px; margin:0 auto; }
    .process .wrap{ grid-template-columns:1fr; }
    .steps{ flex-direction:row; overflow-x:auto; }
    .step-panel.active{ grid-template-columns:1fr; }
    .trust-grid{ grid-template-columns:repeat(2,1fr); }
    .founder .wrap{ flex-direction:column; text-align:center; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .nav{ display:none; }
  }

  /* ===== Peaufinage (ajouts, aucun style existant modifié) ===== */
  html{ scroll-behavior:smooth; }
  header .wrap{ position:relative; }
  .btn{ transition:transform .12s, box-shadow .12s; }
  .btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--navy); }
  .btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); }
  .btn-outline.on-dark:hover{ box-shadow:6px 6px 0 #fff; }
  .nav a{ padding-bottom:3px; border-bottom:3px solid transparent; }
  .nav a.active{ color:var(--navy); border-bottom-color:var(--gold); }
  a:focus-visible, button:focus-visible, summary:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }
  .agent .avatar{ transition:transform .15s; }
  .agent:hover .avatar{ transform:translateY(-4px) rotate(-2deg); }
  details summary span:last-child{ transition:transform .2s; display:inline-block; }
  details[open] summary span:last-child{ transform:rotate(180deg); }
  .menu-btn{ display:none; background:#fff; border:3px solid var(--navy); border-radius:12px;
    box-shadow:3px 3px 0 var(--navy); font-size:18px; line-height:1; padding:7px 13px;
    cursor:pointer; color:var(--navy); font-family:'Baloo 2'; font-weight:800; }
  @media (max-width:820px){
    .menu-btn{ display:block; }
    .nav.open{ display:flex; position:absolute; top:calc(100% + 20px); left:-24px; right:-24px;
      flex-direction:column; gap:0; background:var(--cream); border-top:3px solid var(--navy);
      border-bottom:3px solid var(--navy); padding:8px 24px 14px; z-index:30; }
    .nav.open a{ padding:12px 0; border-bottom:1px dashed rgba(18,57,92,.25); }
    .nav.open a:last-child{ border-bottom:none; }
  }

/* --- logo Sparky anime --- */
.sparky-anim{ display:block; width:auto; overflow:visible; }
.sparky-anim .ltr{
  fill:currentColor; stroke:currentColor; stroke-width:2;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); fill-opacity:0;
  animation:spk-draw .55s ease-out forwards, spk-fill .3s ease-out forwards;
  animation-delay:calc(var(--i)*.085s), calc(var(--i)*.085s + .4s);
}
@keyframes spk-draw{ to{ stroke-dashoffset:0 } }
@keyframes spk-fill{ to{ fill-opacity:1; stroke-width:0 } }
.sparky-anim .spk-sheen{ opacity:0; animation:spk-sheen 1.1s ease-in-out 1.4s forwards }
@keyframes spk-sheen{ 0%{transform:translateX(-40%);opacity:0} 25%{opacity:1} 100%{transform:translateX(340%);opacity:0} }
.sparky-anim .spk-chip{ opacity:0; transform-origin:center; animation:spk-chip .45s cubic-bezier(.34,1.56,.64,1) .95s forwards }
@keyframes spk-chip{ 0%{opacity:0;transform:scale(.3) rotate(-30deg)} 100%{opacity:1;transform:none} }
.sparky-anim .spk-bot{ opacity:0; transform-origin:center bottom; animation:spk-bot .6s cubic-bezier(.34,1.56,.64,1) 1.15s forwards }
@keyframes spk-bot{ 0%{opacity:0;transform:translateY(14%) scale(.55) rotate(-12deg)} 100%{opacity:1;transform:none} }
header .sparky-anim{ height:40px }
.eyebrow .sparky-anim{ height:22px }

/* --- footer : logo aligne comme sur les autres pages --- */
.footer-logo{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:#fff; }
.footer-logo .sparky-anim{ height:38px; width:auto; flex:0 0 auto; }
.footer-logo img[alt="FusionIQ Agency"]{ height:20px; width:auto; display:block; flex:0 0 auto; }
@media (max-width:600px){
  .footer-logo .sparky-anim{ height:30px }
  .footer-logo img[alt="FusionIQ Agency"]{ height:16px }
}
@media (max-width:600px){ header .sparky-anim{ height:32px } }
@media (prefers-reduced-motion:reduce){
  .sparky-anim .ltr{animation:none;fill-opacity:1;stroke-width:0}
  .sparky-anim .spk-chip,.sparky-anim .spk-bot{animation:none;opacity:1}
  .sparky-anim .spk-sheen{animation:none;opacity:0}
}
/* ===== corrections responsive mobile ===== */
@media (max-width:820px){
  /* tableaux : defilement horizontal contenu plutot que debordement de page */
  .legal table, .compare-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap; max-width:100%; }
  .legal table td, .legal table th{ white-space:normal; min-width:130px; }

  /* onglets de process : bande defilante au lieu de debordement */
  .steps{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:8px; padding-bottom:6px; max-width:100%; }
  .steps::-webkit-scrollbar{ display:none }
  .steps button{ flex:0 0 auto }

  /* filtres de demos : idem */
  .filters{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:8px; max-width:100%; }
  .filters::-webkit-scrollbar{ display:none }
  .filters button{ flex:0 0 auto }
}
@media (max-width:600px){
  /* barre d'en-tete : rien ne doit sortir du cadre */
  /* CORRECTIF : 'overflow:hidden' ici clippait le menu deroulant (position:absolute)
     -> le menu s'ouvrait mais restait invisible. On clippe le logo, pas le conteneur. */
  header .wrap{ max-width:100%; overflow:visible }
  header .logo{ min-width:0; overflow:hidden }
  .menu-btn{ flex:0 0 auto }
  /* confort tactile : cibles d'au moins 40px */
  .nav a, footer a{ display:inline-block; padding:6px 0; min-height:34px; line-height:1.6 }
}

/* ===== audit final : confort mobile ===== */
/* le reflet du logo ne doit pas creer de zone de defilement */
.sparky-anim{ overflow:hidden !important; }

/* bouton menu : cible tactile de 44px minimum (recommandation Apple/Google) */
.menu-btn{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }
@media (max-width:820px){ .menu-btn{ display:inline-flex; } }

/* etiquettes des cartes demo : lisibles sur mobile */
.tag-pill{ font-size:12px !important; }

@media (max-width:600px){
  /* premiere rangee d'onglets : pleinement contenue */
  .steps, .filters{ margin-left:0; margin-right:0; }
  .steps button, .filters button{ font-size:13px; padding:9px 14px; }
}

/* header mobile : le CTA passe dans le menu, seul le hamburger reste */
@media (max-width:640px){
  header .wrap > div:last-child > .btn{ display:none; }
  header .wrap{ gap:8px; }
}
/* etiquette 'Le plus choisi' lisible */
.tag{ font-size:12px !important; }

/* le reflet termine sa course hors cadre : on fige sa position finale dans le cadre */
.sparky-anim .spk-sheen{ will-change:transform; }
@keyframes spk-sheen{ 0%{transform:translateX(-40%);opacity:0} 25%{opacity:1} 99%{opacity:0} 100%{transform:translateX(240%);opacity:0} }
/* filet de securite : aucune page ne doit jamais defiler horizontalement */
html, body{ overflow-x:clip; max-width:100%; }

/* ===== probleme / solution ===== */
.probsol{ text-align:center; }
.probsol .ps-bloc{ max-width:720px; margin:0 auto; }
.probsol .eyebrow{ margin-bottom:16px; }
.probsol h2.title{ margin-bottom:14px; }
.probsol p.sub{ margin:0 auto 26px; max-width:640px; line-height:1.7; }
.ps-exemples{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:4px; }
.ps-exemples span{ background:#f1f0e8; border:2px solid #ddd8c9; border-radius:30px;
  padding:8px 16px; font-size:13.5px; font-weight:600; color:#22384c; }
.ps-lien{ display:flex; align-items:center; justify-content:center; gap:0;
  margin:36px auto; font-size:26px; color:var(--gold); }
.ps-lien span{ display:block; width:3px; height:34px; background:var(--gold);
  border-radius:2px; margin:6px 0; }
.ps-lien{ flex-direction:column; }
.ps-cartes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin-top:40px; text-align:center; }
@media (max-width:900px){ .ps-cartes{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }
.ps-carte{ background:#fff; border:3px solid var(--navy); border-radius:18px;
  padding:28px 22px 24px; box-shadow:5px 5px 0 var(--navy);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform .18s; }
.ps-carte:hover{ transform:translateY(-4px); }
.ps-ico{ width:62px; height:62px; border-radius:50%; background:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:28px;
  box-shadow:3px 3px 0 var(--gold); }
.ps-carte h3{ font-family:'Baloo 2',cursive; font-size:19px; color:var(--navy); margin:2px 0 0; }
.ps-carte p{ font-size:14px; color:var(--muted); line-height:1.65; margin:0; flex:1; }
.ps-carte .btn{ margin-top:6px; font-size:14px; padding:11px 20px; }

/* ===== comparatif interactif ===== */
.cmp-switch{ display:inline-flex; background:#fff; border:3px solid var(--navy);
  border-radius:34px; padding:5px; gap:5px; box-shadow:4px 4px 0 var(--navy); margin-bottom:26px; }
.cmp-switch .cs{ border:0; background:transparent; color:var(--navy); font-family:inherit;
  font-weight:800; font-size:15px; padding:11px 22px; border-radius:28px; cursor:pointer; transition:.18s; }
.cmp-switch .cs.active{ background:var(--navy); color:#fff; }
.cmp-switch .cs.pulse{ animation:cs-pulse 1.2s ease-in-out 2; }
@keyframes cs-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,.0)} 50%{ box-shadow:0 0 0 8px rgba(201,162,39,.35)} }
.cmp-lignes{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.cmp-ligne{ display:flex; align-items:center; gap:16px; text-align:left;
  background:#fff; border:3px solid var(--navy); border-radius:16px; padding:15px 18px;
  box-shadow:4px 4px 0 var(--navy); animation:cl-in .4s ease-out both; }
@keyframes cl-in{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.cmp-ligne .ci{ font-size:24px; flex:0 0 auto; }
.cmp-ligne b{ display:block; font-family:'Baloo 2',cursive; font-size:16px; color:var(--navy); }
.cmp-ligne p{ margin:2px 0 0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.cmp-ligne div{ flex:1; }
.cmp-ligne .cm{ flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:17px; color:#fff; }
.cmp-ligne.ko .cm{ background:#b3261e; } .cmp-ligne.ok .cm{ background:#2f7d4f; }
.cmp-ligne.ok{ border-color:#2f7d4f; box-shadow:4px 4px 0 #2f7d4f; }
.cmp-bilan{ max-width:640px; margin:20px auto 0; border-radius:14px; padding:15px 18px;
  font-size:14.5px; line-height:1.6; text-align:left; animation:cl-in .4s ease-out both; }
.cmp-bilan:empty{ display:none }
.cmp-bilan.ko{ background:#fdecec; border:2px solid #e7b6b3; color:#7c1a15; }
.cmp-bilan.ok{ background:#eef7f1; border:2px solid #cfe6d8; color:#1e5236; }
@media (prefers-reduced-motion:reduce){ .cmp-ligne,.cmp-bilan,.cs.pulse{ animation:none } }

/* ===== enrichissement couleur (0 Ko : uniquement du CSS) ===== */

/* fond crème vivant : dégradé chaud + halo doré/teal très diffus */
body{
  background-color:var(--cream);
  background-image:
    radial-gradient(900px 520px at 12% -5%, rgba(201,162,39,.13), transparent 62%),
    radial-gradient(760px 460px at 92% 22%, rgba(91,138,154,.15), transparent 60%),
    radial-gradient(680px 400px at 25% 88%, rgba(201,106,158,.08), transparent 60%);
  background-attachment:fixed;
}
@media (max-width:820px){ body{ background-attachment:scroll; } }

/* sections claires : plus de blanc plat, un voile chaud */
.section-white{
  background:linear-gradient(180deg,#ffffff 0%,#FDFBF6 100%);
}

/* sections navy : profondeur au lieu d'un aplat */
.section-dark{
  background:
    radial-gradient(700px 420px at 85% 8%, rgba(91,138,154,.28), transparent 58%),
    radial-gradient(600px 380px at 8% 92%, rgba(201,162,39,.16), transparent 58%),
    var(--navy);
}
.section-darker{
  background:
    radial-gradient(650px 400px at 15% 5%, rgba(91,138,154,.22), transparent 60%),
    var(--navy-dark);
}

/* filet doré discret entre les grandes sections */
.section + .section{ position:relative; }
.section + .section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(120px,30%); height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.55;
}
.section-dark + .section-dark::before,
.section-dark::before{ opacity:.35 }

/* trame de points BD, très légère, sur les sections sombres */
.section-dark::after, .section-darker::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}
.section-dark, .section-darker{ position:relative; overflow:hidden; }
.section-dark > .wrap, .section-darker > .wrap{ position:relative; z-index:1; }


/* ===== planche BD des agents ===== */
.equipe-planche{ text-align:center; }
.equipe-planche .eyebrow{ margin-bottom:14px; }
.equipe-planche p.sub{ margin:0 auto 30px; max-width:720px; color:#d7e2ea; }
.planche-img{
  width:100%; max-width:1100px; height:auto; display:block; margin:0 auto;
  border:4px solid #0E2C47; border-radius:20px;
  box-shadow:8px 8px 0 rgba(0,0,0,.32);
}
@media (max-width:760px){
  .planche-img{ max-width:520px; border-width:3px; border-radius:14px; box-shadow:5px 5px 0 rgba(0,0,0,.32); }
}

/* ===== bandeaux scènes BD (image en fond CSS, texte en vrai HTML) ===== */
.scene{
  position:relative; overflow:hidden;
  background-color:var(--navy-dark);
  padding:0;
}
.scene::before{
  content:""; position:absolute; inset:0;
  background-size:cover; background-repeat:no-repeat;
  background-position:center;
}
.scene::after{ content:""; position:absolute; inset:0; }
.scene{ aspect-ratio:10/3; }                 /* même ratio que l'image : aucun rognage */
.scene .wrap{ position:relative; z-index:2; height:100%; min-height:380px; display:flex; align-items:center; }
.scene-txt{ max-width:520px; }
.scene h2{
  font-family:'Baloo 2',cursive; font-size:clamp(25px,3.4vw,36px); line-height:1.15;
  color:#fff; margin:0 0 12px; text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.scene p{
  color:#e6eef4; font-size:15.5px; line-height:1.7; margin:0 0 20px;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}

/* texte à DROITE (personnages à gauche) */
.scene-droite .wrap{ justify-content:flex-end; }
.scene-droite .scene-txt{ text-align:left; }
.scene-droite::after{
  background:linear-gradient(270deg, rgba(14,44,71,.95) 0%, rgba(14,44,71,.80) 38%, rgba(14,44,71,.28) 72%, rgba(14,44,71,.15) 100%);
}
/* texte à GAUCHE (personnages à droite) */
.scene-gauche .wrap{ justify-content:flex-start; }
.scene-gauche::after{
  background:linear-gradient(90deg, rgba(14,44,71,.95) 0%, rgba(14,44,71,.80) 38%, rgba(14,44,71,.28) 72%, rgba(14,44,71,.15) 100%);
}

.scene-accueil::before{     background-image:image-set(url("scene-accueil-1400.webp") 1x, url("scene-accueil-2600.webp") 2x); }
.scene-prospection::before{     background-image:image-set(url("scene-prospection-1400.webp") 1x, url("scene-prospection-2600.webp") 2x); }
.scene-studio::before{     background-image:image-set(url("scene-studio-1400.webp") 1x, url("scene-studio-2600.webp") 2x); }

/* écrans larges : sans ça, le fichier 1400px serait étiré jusqu'à x1,37 et donc flou */
@media (min-width:1600px){
  .scene-accueil::before{     background-image:image-set(url("scene-accueil-1900.webp") 1x, url("scene-accueil-3400.webp") 2x); }
  .scene-prospection::before{ background-image:image-set(url("scene-prospection-1900.webp") 1x, url("scene-prospection-3400.webp") 2x); }
  .scene-studio::before{      background-image:image-set(url("scene-studio-1900.webp") 1x, url("scene-studio-3400.webp") 2x); }
}

/* @@SCENES-TRES-GRANDS-ECRANS@@
   1440p, 4K et 5K affichés à 100 % : au-delà de ~2000px de fenêtre, le fichier
   1900px serait étiré et flou. On monte progressivement en résolution. */
@media (min-width:2000px){
  .scene-accueil::before{     background-image:image-set(url("scene-accueil-2600.webp") 1x, url("scene-accueil-3840.webp") 2x); }
  .scene-prospection::before{ background-image:image-set(url("scene-prospection-2600.webp") 1x, url("scene-prospection-3840.webp") 2x); }
  .scene-studio::before{      background-image:image-set(url("scene-studio-2600.webp") 1x, url("scene-studio-3840.webp") 2x); }
}
@media (min-width:2700px){
  .scene-accueil::before{     background-image:image-set(url("scene-accueil-3840.webp") 1x, url("scene-accueil-3840.webp") 2x); }
  .scene-prospection::before{ background-image:image-set(url("scene-prospection-3840.webp") 1x, url("scene-prospection-3840.webp") 2x); }
  .scene-studio::before{      background-image:image-set(url("scene-studio-3840.webp") 1x, url("scene-studio-3840.webp") 2x); }
}


@media (max-width:820px){
  /* sur mobile le voile passe en vertical : les personnages restent visibles en haut */
  .scene .wrap{ min-height:400px; align-items:flex-end; padding-top:150px; padding-bottom:30px; }
  .scene-droite .wrap, .scene-gauche .wrap{ justify-content:flex-start; }
  .scene-droite::after, .scene-gauche::after{
    background:linear-gradient(180deg, rgba(14,44,71,.30) 0%, rgba(14,44,71,.82) 42%, rgba(14,44,71,.96) 100%);
  }
  .scene{ aspect-ratio:auto; }
  .scene::before{ background-position:center top; }
  /* mobile : image carrée cadrée sur les personnages (un panorama y serait illisible) */
  .scene-accueil::before{     background-image:image-set(url("scene-accueil-carre-800.webp") 1x, url("scene-accueil-carre-1200.webp") 2x, url("scene-accueil-carre-1400.webp") 3x); }
  .scene-prospection::before{ background-image:image-set(url("scene-prospection-carre-800.webp") 1x, url("scene-prospection-carre-1200.webp") 2x, url("scene-prospection-carre-1400.webp") 3x); }
  .scene-studio::before{      background-image:image-set(url("scene-studio-carre-800.webp") 1x, url("scene-studio-carre-1200.webp") 2x, url("scene-studio-carre-1400.webp") 3x); }
  .scene-txt{ max-width:100%; }
}

/* ============================================================
   EQUIPE — bandeau image + relais interactif
   Le texte n'est PLUS incruste dans l'image : tout est en HTML,
   donc toujours aligne, lisible, responsive et indexable.
   ============================================================ */
.equipe-relais{ padding-bottom:70px; }
.equipe-relais .wrap-head{ text-align:center; max-width:820px; }
.equipe-relais p.sub{ margin-left:auto; margin-right:auto; }

/* --- bandeau image pleine largeur --- */
.relais-photo{
  position:relative; margin:0 0 40px; overflow:hidden;
  border-top:3px solid rgba(255,255,255,.14);
  border-bottom:3px solid rgba(255,255,255,.14);
}
.relais-photo img{
  display:block; width:100%; height:auto;   /* ratio natif : aucun agent rogne */
  /* garde-fou tres grands ecrans : sous 1460px de large, aucun recadrage du tout */
  max-height:min(78vh, 900px); object-fit:cover; object-position:center 40%;
}
.relais-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,44,71,.55) 0%, rgba(14,44,71,0) 18%, rgba(14,44,71,0) 82%, rgba(14,44,71,.55) 100%),
    linear-gradient(180deg, rgba(14,44,71,.35) 0%, rgba(14,44,71,0) 22%, rgba(14,44,71,0) 70%, rgba(14,44,71,.55) 100%);
}


/* --- cadre du relais --- */
.relais-box{
  max-width:1000px; margin:0 auto;
  background:rgba(255,255,255,.05);
  border:3px solid rgba(255,255,255,.16);
  border-radius:22px; padding:22px;
  backdrop-filter:blur(2px);
}

/* barre d'etat */
.relais-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:0 4px 18px; margin-bottom:18px;
  border-bottom:2px dashed rgba(255,255,255,.16);
}
.rl-live{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Baloo 2',cursive; font-size:12.5px; font-weight:800;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--gold);
}
.rl-live i{
  width:9px; height:9px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,162,39,.7); animation:rl-ping 1.8s infinite;
}
@keyframes rl-ping{ 70%{ box-shadow:0 0 0 9px rgba(201,162,39,0) } 100%{ box-shadow:0 0 0 0 rgba(201,162,39,0) } }
.rl-meta{ font-size:13px; color:#c3d3e0; }
.rl-chrono{
  margin-left:auto; font-family:'Baloo 2',cursive; font-weight:800;
  font-size:15px; color:#fff; background:rgba(0,0,0,.28);
  border:2px solid rgba(255,255,255,.18); border-radius:20px; padding:4px 14px;
  font-variant-numeric:tabular-nums;
}

/* rail des 6 agents — grille reguliere, donc alignement parfait */
.relais-rail{
  list-style:none; margin:0 0 22px; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
}
.relais-rail::before{
  content:""; position:absolute; left:8%; right:8%; top:33px; height:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 8px,transparent 8px 16px);
  z-index:0;
}
.rl-etape{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:6px 2px 10px; background:none; border:0; cursor:pointer;
  width:100%; font-family:inherit; color:#c3d3e0; text-align:center;
  border-radius:14px; transition:background .18s;
}
.rl-etape img{
  width:66px; height:66px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,.35); background:var(--navy-dark);
  transition:transform .22s, border-color .22s, box-shadow .22s;
}
.rl-etape b{ font-family:'Baloo 2',cursive; font-size:14px; color:#fff; line-height:1.2; }
.rl-etape span{ font-size:11px; line-height:1.3; color:#a9bccd; }
.rl-etape:hover img{ transform:translateY(-3px); border-color:#fff; }
.rl-etape[aria-selected="true"] img{
  border-color:var(--gold); transform:translateY(-4px) scale(1.06);
  box-shadow:0 0 0 5px rgba(201,162,39,.22);
}
.rl-etape[aria-selected="true"] span{ color:var(--gold); }
.rl-etape.vu img{ border-color:rgba(201,162,39,.55); }

/* la scene */
.relais-stage{
  display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:start;
  background:rgba(0,0,0,.22); border:2px solid rgba(255,255,255,.14);
  border-radius:18px; padding:22px; min-height:186px;
}
.relais-stage .rl-face{
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold); box-shadow:4px 4px 0 rgba(0,0,0,.35);
  background:var(--navy-dark);
}
.rl-tag{
  display:inline-block; font-family:'Baloo 2',cursive; font-size:11.5px; font-weight:800;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--navy-dark);
  background:var(--gold); border-radius:20px; padding:4px 13px; margin-bottom:10px;
}
.relais-stage h3{
  font-family:'Baloo 2',cursive; font-size:22px; color:#fff; margin:0 0 12px; line-height:1.2;
}
.relais-stage h3 em{ font-style:normal; font-size:14px; color:#a9bccd; font-weight:600; }
.rl-bulle{
  position:relative; display:inline-block; max-width:560px;
  background:var(--cream); color:var(--navy-dark);
  border-radius:16px; padding:13px 18px; margin:0 0 12px;
  font-size:15.5px; line-height:1.55; font-weight:600;
  box-shadow:4px 4px 0 rgba(0,0,0,.28);
}
.rl-bulle::before{
  content:""; position:absolute; left:-9px; top:18px;
  border:9px solid transparent; border-right-color:var(--cream); border-left:0;
}
.rl-act{ margin:0; font-size:14px; line-height:1.65; color:#c3d3e0; max-width:560px; }
.rl-anim{ animation:rl-in .34s ease-out both; }
@keyframes rl-in{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }

/* controles */
.relais-ctrl{ display:flex; align-items:center; gap:14px; margin-top:18px; padding:0 4px; }
.rl-toggle{
  flex:0 0 auto; font-family:'Baloo 2',cursive; font-weight:800; font-size:13px;
  color:var(--navy-dark); background:#fff; border:3px solid var(--navy-dark);
  border-radius:20px; padding:7px 16px; cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.3); transition:transform .12s, box-shadow .12s;
}
.rl-toggle:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(0,0,0,.3); }
.rl-toggle:active{ transform:translate(3px,3px); box-shadow:0 0 0 rgba(0,0,0,.3); }
.rl-progress{ flex:1; height:6px; border-radius:6px; background:rgba(255,255,255,.16); overflow:hidden; }
.rl-progress i{ display:block; height:100%; width:0; border-radius:6px; background:var(--gold); }

/* ---- responsive ---- */
@media (max-width:900px){
  .relais-rail{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 8px; }
  .relais-rail::before{ display:none; }
  .rl-etape img{ width:58px; height:58px; }
}
@media (max-width:560px){
  .relais-box{ padding:16px; border-radius:18px; }
  .relais-rail{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rl-etape img{ width:50px; height:50px; }
  .rl-etape b{ font-size:12.5px; }
  .rl-etape span{ font-size:10px; }
  .relais-stage{ grid-template-columns:1fr; gap:14px; padding:18px; text-align:left; }
  .relais-stage .rl-face{ width:72px; height:72px; }
  .rl-bulle{ font-size:14.5px; }
  .rl-bulle::before{ left:22px; top:-9px; border:9px solid transparent; border-bottom-color:var(--cream); border-top:0; }
  .rl-chrono{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .rl-anim,.rl-live i{ animation:none }
  .rl-etape img{ transition:none }
}

/* bouton menu : icone qui bascule burger -> croix (aucun JS supplementaire) */
.menu-btn{ font-size:0 !important; }
.menu-btn::before{ content:"\2630"; font-size:19px; line-height:1; display:block; }
.menu-btn[aria-expanded="true"]::before{ content:"\2715"; }

/* ============================================================
   INTERACTIVITE GLOBALE — apparition au defilement + retour haut
   Les classes sont posees par JS : sans JS, tout reste visible.
   ============================================================ */
.rv{ opacity:0; transform:translateY(18px); }
.rv-on{ opacity:1; transform:none; transition:opacity .55s ease-out, transform .55s cubic-bezier(.22,.9,.3,1); }
.rv-d1{ transition-delay:.07s } .rv-d2{ transition-delay:.14s } .rv-d3{ transition-delay:.21s }

/* en-tete qui se compacte au defilement */
header{ transition:padding .22s ease, box-shadow .22s ease; }
header.compact{ padding:11px 0; box-shadow:0 6px 22px rgba(18,57,92,.14); }

/* bouton retour en haut */
.haut{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:var(--gold); color:#fff; border:3px solid var(--navy);
  box-shadow:4px 4px 0 var(--navy); font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s, transform .25s, visibility .25s;
}
.haut.on{ opacity:1; visibility:visible; transform:none; }
.haut:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--navy); }
.haut:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--navy); }
@media (max-width:600px){ .haut{ right:14px; bottom:14px; width:44px; height:44px; } }

/* barre de progression de lecture */
.lecture{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:70;
  background:linear-gradient(90deg,var(--gold),var(--teal)); pointer-events:none;
  transition:width .1s linear;
}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-on{ opacity:1 !important; transform:none !important; transition:none !important; }
  header,.haut{ transition:none }
  .lecture{ display:none }
}

/* ===== Sparky, la mascotte : posee sur le bandeau, animee et cliquable ===== */
.relais-photo{ padding-bottom:0; }
.sparky-mascotte{
  position:absolute; left:clamp(12px,3vw,46px); bottom:0; z-index:3;
  width:clamp(96px,11vw,168px); background:none; border:0; padding:0; cursor:pointer;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
  animation:spk-flotte 3.4s ease-in-out infinite;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.sparky-mascotte img{ display:block; width:100%; height:auto; }
.sparky-mascotte:hover{ transform:translateY(-8px) rotate(-3deg); }
.sparky-mascotte:active{ transform:translateY(-2px) scale(.96); }
@keyframes spk-flotte{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* la bulle que Sparky affiche */
.sparky-bulle{
  position:absolute; left:clamp(118px,15vw,224px); bottom:clamp(46px,7vw,104px); z-index:4;
  max-width:min(280px,52vw); background:var(--cream); color:var(--navy-dark);
  border:3px solid var(--navy-dark); border-radius:16px; padding:11px 15px;
  font-size:14px; line-height:1.45; font-weight:700; font-family:'Baloo 2',cursive;
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
  opacity:0; transform:translateY(8px) scale(.94); transform-origin:0 100%;
  transition:opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.sparky-bulle::after{
  content:""; position:absolute; left:-11px; bottom:15px;
  border:10px solid transparent; border-right-color:var(--navy-dark); border-left:0;
}
.sparky-bulle.on{ opacity:1; transform:none; }

@media (max-width:640px){
  .sparky-mascotte{ width:78px; left:8px; }
  .sparky-bulle{ left:92px; bottom:30px; font-size:12.5px; padding:8px 12px; max-width:56vw; border-width:2px; }
}
@media (prefers-reduced-motion:reduce){
  .sparky-mascotte{ animation:none; transition:none }
  .sparky-bulle{ transition:none }
}

/* l'icône de marque remplit la pastille (à la place de l'emoji) */
.ps-ico:has(img){ background:transparent; box-shadow:none; padding:0; }
.ps-ico img{ width:62px; height:62px; border-radius:50%; display:block;
  box-shadow:3px 3px 0 var(--gold); }

/* ═══════════════════════════════════════════════════════════
   AGENTS SPARKY DANS LA PAGE
   Décoratifs (alt vide + aria-hidden) : invisibles pour Google et
   les lecteurs d'écran. Chargés seulement quand il y a la place —
   sur mobile display:none empêche tout téléchargement.
   Taille pilotée par la HAUTEUR de la section : ils la remplissent
   au lieu d'être bridés par une largeur fixe.
   ═══════════════════════════════════════════════════════════ */
.a-agents{ position:relative; }
.a-agents > .wrap{ position:relative; z-index:2; }

.agent-deco{
  position:absolute; bottom:0; z-index:1;
  width:auto; height:auto; max-width:none; pointer-events:none; user-select:none;
  filter:drop-shadow(8px 8px 0 rgba(18,57,92,.15));
  display:none;
}
/* conteneur agent + bulle : c'est LUI qui porte la largeur,
   sinon la règle globale img{max-width:100%} écrase l'image à zéro */
.agent-bloc{ position:absolute; bottom:0; z-index:1; display:none; pointer-events:none; }
.agent-bloc .agent-deco{ position:static; display:block; width:100%; height:auto; }

/* ---------- Bulles de conversation ---------- */
.agent-bulle{
  position:absolute; z-index:3;
  background:#fff; color:var(--navy);
  border:3px solid var(--navy); border-radius:20px;
  padding:13px 17px; width:max-content; max-width:250px;
  font-family:'Baloo 2',cursive; font-weight:700;
  font-size:clamp(14px,1.05vw,17px); line-height:1.35;
  box-shadow:5px 5px 0 rgba(18,57,92,.22);
  opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity .5s ease .55s, transform .5s cubic-bezier(.2,1.3,.4,1) .55s;
}
.agent-bulle::before, .agent-bulle::after{
  content:""; position:absolute; bottom:-19px; border:10px solid transparent;
}
.ab-gauche{ left:58%; bottom:auto; top:2%; }
.ab-gauche::before{ left:26px; border-top-color:var(--navy); border-width:13px; bottom:-26px; }
.ab-gauche::after { left:29px; border-top-color:#fff;        border-width:10px; bottom:-19px; }
.ab-droite{ right:58%; bottom:auto; top:2%; }
.ab-droite::before{ right:26px; border-top-color:var(--navy); border-width:13px; bottom:-26px; }
.ab-droite::after { right:29px; border-top-color:#fff;        border-width:10px; bottom:-19px; }
.agent-bloc.rv-on .agent-bulle{ opacity:1; transform:none; }

/* ---------- Apparition puis flottement ---------- */
.agent-deco.rv, .ctrl-agent.rv, .agent-bloc.rv{ opacity:0; }
.ad-gauche.rv, .ag-gauche.rv { transform:translateX(-52px); }
.ad-droite.rv, .ag-droite.rv { transform:translateX(52px); }
.ctrl-agent.rv{ transform:translateX(56px) scale(.95); }
.agent-deco.rv, .ctrl-agent.rv, .agent-bloc.rv{
  transition:opacity .75s cubic-bezier(.22,.9,.3,1), transform .75s cubic-bezier(.22,.9,.3,1);
}
.agent-deco.rv-on, .ctrl-agent.rv-on, .agent-bloc.rv-on{ opacity:1; transform:none; }

.agent-deco.rv-on, .agent-bloc.rv-on{ animation:flotte 5.2s ease-in-out .9s infinite; }
.ad-droite.rv-on, .ag-droite.rv-on{ animation-delay:2.1s; animation-duration:6s; }
.ctrl-agent.rv-on{ animation:flotte 6.2s ease-in-out 1s infinite; }
@keyframes flotte{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }

@media (prefers-reduced-motion:reduce){
  .agent-deco, .ctrl-agent, .agent-bloc, .agent-bulle{
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important; }
}

/* ---------- Problème / Solution ---------- */
/* seuil calculé : il faut 1210px de contenu + 2x(280+16) pour un agent digne de ce nom */
@media (min-width:1600px){
  .probsol .agent-deco{
    display:block;
    width:min(520px, calc((100vw - 1210px) / 2 - 16px));
  }
  .probsol .ad-gauche{ left:10px; }
  .probsol .ad-droite{ right:10px; }
}

/* ---------- Équipe : agents de part et d'autre ---------- */
@media (min-width:1600px){
  /* La section équipe est courte : on lui donne la hauteur nécessaire pour
     accueillir les agents, sinon ils débordent sur la section précédente. */
  /* hauteur garantie : l'agent le plus haut fait ~1,45 x sa largeur.
     À 500 px de large cela fait 725 px — on réserve 780 px et on centre. */
  .equipe-agents{
    min-height:780px; display:flex; flex-direction:column; justify-content:center;
    padding-top:clamp(50px,4vw,90px); padding-bottom:clamp(50px,4vw,90px);
  }
  .equipe-agents .agent-deco{
    display:block;
    width:min(500px, calc((100vw - 1210px) / 2 - 16px));
  }
  .equipe-agents .ad-gauche{ left:10px; }
  .equipe-agents .ad-droite{ right:10px; }
}

/* ---------- Vous gardez le contrôle : grille 2 colonnes ---------- */
.ctrl-grille{ display:block; }
.ctrl-agent{ display:none; height:auto; }
@media (min-width:1000px){
  .ctrl-grille{ display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:clamp(30px,5vw,90px); }
  .ctrl-txt{ max-width:640px; }
  .ctrl-agent{ display:block; justify-self:end;
    width:clamp(260px, 30vw, 480px);
    filter:drop-shadow(8px 8px 0 rgba(18,57,92,.15)); }
}

/* ---------- FAQ : conteneur étroit, agents à l'extérieur ---------- */
@media (min-width:1600px){
  .faq.a-agents{ padding-top:calc(120px + 3vw); }
  .faq .agent-bloc{ display:block; bottom:20px;
    width:min(480px, calc((100vw - 780px) / 2 - 36px)); }
  .faq .ag-gauche{ left:auto; right:calc(100% + 26px); }
  .faq .ag-droite{ right:auto; left:calc(100% + 26px); }
}

/* @@ZONE-HAUTE-PROBSOL@@
   La section problème/solution est très haute (~1175 px) : les agents
   ancrés en bas laissaient un grand vide au-dessus. On y place deux
   personnages supplémentaires ancrés en haut, avec leurs bulles. */
.ah-gauche, .ah-droite{ top:0; bottom:auto; }
@media (min-width:1700px){
  .probsol .ah-gauche, .probsol .ah-droite{
    display:block;
    width:min(270px, calc((100vw - 1210px) / 2 - 90px));
    top:clamp(20px, 2vw, 60px);
  }
  /* l'image doit suivre la largeur de son bloc : la règle .probsol .agent-deco
     (même spécificité mais déclarée plus bas) la forçait sinon à 520 px */
  .probsol .ah-gauche .agent-deco,
  .probsol .ah-droite .agent-deco{ width:100%; height:auto; }
  .probsol .ah-gauche{ left:clamp(10px, 3vw, 90px); }
  .probsol .ah-droite{ right:clamp(10px, 3vw, 90px); }
  /* les bulles du haut se placent SOUS le personnage pour ne pas sortir de la page */
  .ah-gauche .agent-bulle{ top:auto; bottom:-8px; left:auto; right:8%; }
  .ah-droite .agent-bulle{ top:auto; bottom:-8px; right:auto; left:8%; }
  .ah-gauche .agent-bulle::before, .ah-gauche .agent-bulle::after,
  .ah-droite .agent-bulle::before, .ah-droite .agent-bulle::after{ display:none; }
}


/* @@FONDATEUR@@ — présentation d'Idrice */
.fondateur-grille{ display:grid; gap:clamp(24px,3vw,54px); align-items:center; }
.fondateur-photo{
  width:clamp(150px,20vw,260px); height:auto; border-radius:50%;
  border:5px solid var(--navy); box-shadow:7px 7px 0 var(--gold);
  display:block; justify-self:center;
}
.fondateur-role{
  font-family:'Baloo 2',cursive; font-weight:700; color:var(--gold);
  font-size:clamp(15px,1.2vw,19px); margin:-6px 0 14px;
}
.fondateur-txt .sub{ margin-bottom:14px; }
.fondateur-txt .btn{ margin-top:6px; }
@media (min-width:900px){
  .fondateur-grille{ grid-template-columns:auto minmax(0,1fr); text-align:left; }
  .fondateur-txt{ max-width:680px; }
}
@media (max-width:899px){
  .fondateur-grille{ text-align:center; justify-items:center; }
}

/* @@INTERRUPTEUR-ONOFF@@ — démonstration interactive du contrôle */
.onoff{ display:flex; align-items:center; gap:clamp(16px,1.6vw,26px); margin-top:22px;
  padding:clamp(16px,1.5vw,24px); background:rgba(91,138,154,.09);
  border:3px solid var(--navy); border-radius:20px; box-shadow:5px 5px 0 rgba(18,57,92,.18); }
.onoff-switch{ flex:0 0 auto; background:none; border:0; padding:0; cursor:pointer; }
.onoff-piste{ display:block; width:82px; height:44px; border-radius:44px;
  border:4px solid var(--navy); background:#c0392b; position:relative;
  transition:background .25s ease; }
.onoff-switch.is-on .onoff-piste{ background:#1e8449; }
.onoff-bille{ position:absolute; top:3px; left:3px; width:30px; height:30px; border-radius:50%;
  background:#fff; border:3px solid var(--navy); transition:transform .25s cubic-bezier(.3,1.4,.5,1); }
.onoff-switch.is-on .onoff-bille{ transform:translateX(38px); }
.onoff-switch:focus-visible .onoff-piste{ outline:3px solid var(--gold); outline-offset:3px; }
.onoff-etat{ font-family:'Baloo 2',cursive; font-size:clamp(17px,1.4vw,21px); color:var(--navy); margin:0 0 4px; }
.onoff-mot{ color:var(--gold); }
.onoff-detail{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }
@media (prefers-reduced-motion:reduce){ .onoff-piste,.onoff-bille{ transition:none; } }
@media (max-width:560px){ .onoff{ flex-direction:column; text-align:center; } }