*{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:#fff;color:#404A68;font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  :root{
    --navy:#1B1B6B; --indigo:#28288E; --indigo-700:#20206F; --ink:#1A1A52;
    --cyan:#05ACF6; --cyan-600:#0B82C4; --body:#404A68; --muted:#6B7591;
    --hairline:#E6EAF3; --hairline-strong:#D3DAEA; --surface:#F4F8FD; --surface-2:#E9F1FB;
    --navy-deep:#16164F; --success:#1F9D6B; --warning:#C8881C;
    --banner:linear-gradient(118deg,#16164F 0%,#28288E 52%,#0E6FBE 100%);
    --banner-cta:linear-gradient(118deg,#1B1B6B 0%,#28288E 44%,#0B86CF 100%);
    --shadow-card:0 6px 24px rgba(16,25,59,.08); --shadow-soft:0 1px 3px rgba(16,25,59,.06);
    --shadow-pop:0 18px 50px rgba(16,25,59,.16);
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  /* bandeau mots-clés : la piste contient 2 copies identiques, on translate d'une demi-largeur */
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){
    [style*="animation:marquee"]{animation:none !important}
  }
  .container{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
  .nav-links{display:flex}
  .burger{display:none}
  .lf-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(32px,5vw,64px);align-items:start}
  .lf-rail{position:sticky;top:96px}
  .lf-body{max-width:760px}
  @media (max-width:1180px){
    .lf-grid{grid-template-columns:1fr !important}
    .lf-rail{position:static !important}
    .lf-body{max-width:none !important}
    .nav-links{display:none !important}
    .burger{display:inline-flex !important}
    .hero-grid{grid-template-columns:1fr !important}
    .split2{grid-template-columns:1fr !important}
    .hide-sm{display:none !important}
    .topbar-inner{justify-content:center !important}
  }

/* ---- Laravel build additions ---- */
[hidden]{display:none !important}
.mega-caret{transition:transform .18s}
.foot-link{transition:color .15s}
.foot-link:hover{color:#fff !important}
.footer-grid{}
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr !important}
}

/* ============================================================
   MOBILE-FRIENDLY GLOBAL LAYER (Sephos)
   Le contenu des pages est stylé en inline (reproduction iso).
   Cette couche corrige le responsive sans toucher chaque page :
   - tout grid inline en ratio fixe -> 1 colonne sur téléphone
   - médias jamais plus larges que l'écran
   - garde-fou anti-débordement horizontal (sans casser le sticky)
   Les tableaux comparatifs gardent leur scroll horizontal volontaire
   (wrappers overflow-x:auto), donc on ne touche pas leur min-width.
   ============================================================ */

/* médias responsive (toutes tailles) */
img,svg,video,iframe,canvas,picture{max-width:100%}
img,video{height:auto}

@media (max-width:760px){
  /* effondre tous les grids inline (ratios fixes type "1.6fr 1fr 1fr") en 1 colonne ;
     les auto-fit minmax() se reflowent déjà, 1fr leur va aussi très bien */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}

  /* garde-fou : aucun débordement horizontal de la page
     (overflow-x:clip ne crée pas de conteneur de scroll -> le header sticky reste OK
     et les wrappers internes overflow-x:auto des tableaux continuent de défiler) */
  html,body{overflow-x:clip;max-width:100%}

  /* les rangées flex (en ligne) passent à la ligne proprement ;
     on exclut les flex en COLONNE (ex. wrapper racine min-height:100vh) qu'un wrap casserait,
     et inline-flex n'est pas matché donc les badges icône+texte restent intacts */
  [style*="display:flex"]:not([style*="flex-direction:column"]):not(.nav-links):not(.burger){flex-wrap:wrap}

  /* HEADER mobile : le CTA "Être rappelé" reste visible mais compact, pour tenir
     à côté du logo + burger sans casser la barre (height:72px). */
  .head-cta{padding:9px 13px !important;font-size:13.5px !important;gap:6px !important}
  /* la barre du header garde sa hauteur fixe : on empêche tout retour à la ligne qui la casserait */
  header > .container{flex-wrap:nowrap !important}
}

/* très petits écrans : le CTA header passe en bouton icône (téléphone) pour garantir la place */
@media (max-width:400px){
  .head-cta .head-cta-txt{display:none}
  .head-cta{padding:0 !important;width:42px;height:42px;justify-content:center !important}
}

/* ===== Menu mobile (drawer) : navigation complète en accordéon natif <details>, sans JS ===== */
.mobile-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;font-size:16.5px;color:var(--ink);padding:13px 0;border-bottom:1px solid var(--hairline)}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary svg{transition:transform .18s;flex:none;color:var(--muted)}
.mobile-menu details[open]>summary svg{transform:rotate(180deg)}
.mobile-menu details[open]>summary{color:var(--indigo)}
.mobile-menu .sub{padding:2px 0 10px;border-bottom:1px solid var(--hairline)}
.mobile-menu .sub a{display:block;color:var(--body);font-size:14.5px;padding:8px 0 8px 14px}
.mobile-menu .sub a:first-child{font-weight:600;color:var(--ink)}
.mobile-menu .m-link{display:block;font-weight:600;font-size:16.5px;color:var(--ink);padding:13px 0;border-bottom:1px solid var(--hairline)}