:root{
      --fr-blue:#0b4ea2; --fr-red:#d11124; --brand:#123a7d;
      --ink:#0b1326; --muted:#5b6b83; --line:#e6edf5; --soft:#f6f8fb; --bg:#ffffff;
    }
    *{box-sizing:border-box}
    html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
    a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
    .container{max-width:1140px;margin:0 auto;padding:0 16px}

    /* HEADER */
    header.site{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
    header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;max-width:1200px;margin-left:auto;margin-right:auto}
    /* Bouclier tricolore (pas un drapeau) */
    .shield{width:28px;height:28px}
    .brand .wordmark{font-size:22px;font-weight:800;letter-spacing:.2px}
    nav a{margin:0 10px;font-weight:600;color:#1b2b4a}
    nav a.cta{background:var(--brand);color:#fff;padding:8px 12px;border-radius:10px;border:1px solid var(--brand)}

    /* CTA mobile (affiché uniquement en mobile)
       Objectif: garder le bouton sur une seule ligne.
       Pour libérer de la place, on masque le wordmark en mobile (logo seul). */
    header.site .mobile-cta{display:none;white-space:nowrap;flex:0 0 auto;line-height:1}
    @media (max-width: 980px){
      header.site .mobile-cta{display:inline-flex;padding:7px 10px;font-size:13px}
      header.site .wrap{gap:10px}
      .brand .mark{display:none}      /* Mobile: garder le header toujours visible, même en scroll vers le bas
         (certains scripts appliquent le masquage sur le header OU sur .wrap) */
      header.site,
      header.site .wrap{
        position: sticky !important;
        top: 0 !important;
        transform: none !important;
        translate: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
      }
      header.site .wrap{
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
      }

      /* Override agressif si un script utilise des classes type nav-down / hidden / unpinned */
      body[class*="nav-"] header.site,
      body[class*="nav-"] header.site .wrap,
      header.site[class*="hidden"],
      header.site[class*="hide"],
      header.site[class*="unpinned"],
      header.site[class*="pinned"],
      header.site .wrap[class*="hidden"],
      header.site .wrap[class*="hide"],
      header.site .wrap[class*="unpinned"],
      header.site .wrap[class*="pinned"]{
        transform: none !important;
        top: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
      }
    }


    /* BOUTONS & PILLS */
    .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brand);border-radius:10px;padding:10px 14px;font-weight:600}
    .btn.primary{background:var(--brand);color:#fff}
    .btn.ghost{border-color:transparent;color:var(--brand)}
    .pill{display:inline-block;border:1px solid var(--line);padding:4px 10px;border-radius:999px;background:#fff;font-size:12px}

    /* HERO */
    .hero{
      position:relative;
      background:
        radial-gradient(circle at 20% -10%, rgba(18,58,125,.10), transparent 45%),
        radial-gradient(circle at 120% 20%, rgba(209,17,36,.06), transparent 40%),
        linear-gradient(180deg, #f7f9fe 0%, #f3f6fc 100%);
      border-bottom:1px solid var(--line);
    }
    .hero::after{
      content:""; position:absolute; inset:0;
      background-image:radial-gradient(rgba(13,31,63,0.06) 1px, transparent 1px);
      background-size:14px 14px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.07), rgba(0,0,0,0.02));
      pointer-events:none;
    }
    /* H1 un peu plus haut (padding-top réduit) */
    .hero .inner{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;padding:36px 0 52px}
    .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

    /* Quicklinks SEO */
    .quicklinks { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
    .quicklinks a{ display:inline-block; padding:6px 10px; border:1px solid var(--line);
      border-radius:999px; background:#fff; font-size:13px; color:#1b2b4a; text-decoration:none }
    .quicklinks a:hover{ border-color:#cfd9e6; text-decoration:none }

    /* ILLUSTRATION DUERP (style dessin) */
    .duerp-illustration{
      border-radius:14px;background:#fff;padding:12px;border:1px solid var(--line);
      box-shadow:0 10px 26px rgba(15,30,60,0.10);transform:rotate(-1.2deg);
    }
    .duerp-illustration svg{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 0 rgba(10,20,40,0.05))}

    /* SECTIONS */
    section.block{padding:40px 0}
    section.block h2{margin:0 0 10px;font-size:26px}
    section.block p.sub{margin:0 0 18px;color:var(--muted)}
    .grid{display:grid;gap:16px}
    .cols-3{grid-template-columns:repeat(3,1fr)}
    .card{border:1px solid var(--line);background:#fff;border-radius:14px;padding:18px}

    /* ===== Parallax features ===== */
    .parallax { position: relative; background: linear-gradient(180deg,#ffffff 0%, #f7f9fe 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: clip; }
    .parallax .wrap { max-width: 1140px; margin: 0 auto; padding: 72px 16px; display: grid; gap: 120px; }
    .feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; }
    .feature.reverse { grid-template-columns: 1fr 1.05fr; }
    .feature .copy h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; color: #0b1326; }
    .feature .copy p { margin: 0; color: var(--muted); font-size: 17px; }
    .feature .cta { margin-top: 14px; display: inline-flex; gap: 8px; align-items:center; font-weight: 600; color: var(--brand); }
    .feature .visu { position: relative; isolation: isolate; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(16,30,58,.12); padding: 16px; min-height: 280px; transform: translateZ(0); }
    .parallax [data-parallax] { will-change: transform; transform: translate3d(0,0,0); }
    .ribbon { position: absolute; inset: -60px -40px auto auto; height: 220px; width: 220px; background: radial-gradient(closest-side, rgba(18,58,125,.10), transparent 70%); filter: blur(12px); z-index: -1; }
    .badge { display:inline-block; font-size: 12px; border:1px solid var(--line); padding:4px 10px; border-radius:999px; background:#fff; color:#1b2b4a; }
    .visu svg { width:100%; height:auto; display:block; }

    /* ===== Témoignages ===== */
    .testimonials { padding: 56px 0; background:#fff; }
    .testi-wrap { max-width:1140px; margin:0 auto; padding:0 16px; }
    .testi-head { margin:0 0 10px; font-size:26px; }
    .testi-sub { margin:0 0 22px; color:var(--muted); }
    .testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .tcard { border:1px solid var(--line); background:#fff; border-radius:14px; padding:18px; box-shadow:0 10px 28px rgba(16,30,58,.06); }
    .twho { display:flex; align-items:center; gap:12px; margin-top:12px; }
    .twho img { width:56px; height:56px; border-radius:50%; border:1px solid var(--line); background:#f5f7fb; }
    .tmeta { line-height:1.3; }
    .tmeta strong { display:block; color:#0b1326; }
    .tmeta .co { color:#1b2b4a; font-weight:600; }
    .stars { color:#f59e0b; letter-spacing:1px; font-size:14px; margin-bottom:8px; }

    /* FOOTER */
    footer{background:#f6f8fc;border-top:1px solid var(--line);margin-top:24px}
    footer .container{max-width:1200px;padding-left:24px;padding-right:24px}
    footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;padding:28px 0}
    footer h5{margin:0 0 8px;font-size:14px;color:#1b2b4a}
    footer ul{list-style:none;padding:0;margin:0}
    footer li{margin:6px 0}
    .legal{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding:12px 0}

    /* RESPONSIVE + accessibilité */
    @media (max-width: 980px){
      .hero .inner{grid-template-columns:1fr}
      nav{display:none}
      .feature, .feature.reverse { grid-template-columns: 1fr; }
      .testi-grid { grid-template-columns:1fr; }
    }
    @media (prefers-reduced-motion: reduce){
      .parallax [data-parallax] { transform: none !important; }
    }
    /* ===== CTA au-dessus du footer ===== */
.cta-band{
  background: linear-gradient(180deg,#f7f9fe 0%, #ffffff 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 0;
}
.cta-band .inner{ text-align:center; }
.cta-big{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:14px; padding:16px 24px; font-weight:700; font-size:18px;
  box-shadow:0 10px 24px rgba(16,30,58,.12);
  text-decoration:none;
}
.cta-big:hover{ text-decoration:none; filter:brightness(0.98); }
.cta-note{ margin-top:8px; font-size:12px; color:var(--muted); }

/* Section "3 questions les plus posées" : fond agréable + lisibilité */
#seo-questions{
  background: linear-gradient(180deg,#f8fbff 0%, #eef3ff 100%) !important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
#seo-questions .card{ background:#fff; }
/* ===== Comment ça marche — sticky + phone plus large + écrans dynamiques ===== */
.how{background:#eef3ff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.how .inner{max-width:1140px;margin:0 auto;padding:56px 16px;}
.how h2{margin:0 0 18px;font-size:32px;line-height:1.15;}
/* ===== How (upgrade) ===== */
/* ===== Comment ça marche — sticky robuste + tailles corrigées ===== */
.how .inner > h2{margin:0 0 18px;font-size:32px;line-height:1.15;}

/* Grille : colonne gauche élargie */
.how .grid{
  display:grid;
  grid-template-columns: minmax(480px,560px) 1fr; /* ← un peu plus large */
  gap:52px;
  align-items:start;
}

/* Colonne gauche : STICKY FIABLE (on met sticky à la fois sur .left et sur .stick) */
.how .left{position:sticky; top:96px; align-self:start}
.how .left .stick{position:sticky; top:96px; display:flex; flex-direction:column; gap:16px}

/* — Titre dupliqué : on garde l'H2 global, et on garde de la hauteur côté gauche sans l'afficher — */
.how .aside-title{
  height:36px; margin:0; color:transparent; user-select:none; /* espace sans doublon visuel */
}

/* Smartphone élargi et recadré (on coupe le bas) */
.phone{
  border-radius:28px; padding:24px;
  border:1px solid #dfe6f4; box-shadow:0 12px 36px rgba(16,30,58,.10);
  background:#eef1ea1a;
}
.phone .frame{
  width:100%; height:600px; /* ← hauteur fixe pour rester “figé” visuellement */
  border-radius:24px; background:#fff; border:1px solid #e6edf5;
  overflow:hidden; display:flex; flex-direction:column;
}

/* Header simplifié dans l'écran (logo + 2 boutons) */
.phone .hdr{
  height:52px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; background:#fff; border-bottom:1px solid #eef3ff;
}
.phone .hdr .logo{display:flex; align-items:center; gap:8px; color:#123a7d; font-weight:800}
.phone .hdr .actions{display:flex; gap:8px}
.phone .hdr .actions .ibtn{
  width:28px; height:28px; border-radius:8px; border:1px solid #e6edf5; background:#f6f9ff;
}

/* --- Phone : header = vrai logo "DUERP en ligne" + contenu visible --- */
.phone .hdr .logo .mark{ display:flex; align-items:baseline; gap:6px; }
.phone .hdr .logo .mark .duerp{ font-weight:800; letter-spacing:.2px; }
.phone .hdr .logo .mark .enligne{ font-style:italic; font-weight:600; opacity:.9; }

/* Barre de progression + écrans */
.phone .progress{height:8px; background:#e9effb; border-radius:999px; overflow:hidden; margin:12px}
.phone .progress span{display:block; height:100%; width:0; background:#0b4ea2; transition:width .35s ease}
.phone .screens{position:relative; flex:1}
.phone .screen{position:absolute; inset:0; padding:12px; opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease; pointer-events:none}
.phone .screen.active{opacity:1; transform:translateY(0); pointer-events:auto}

/* Colonne droite : tailles des numéros forcées (devenus trop petits chez toi) */
/* --- How : numéros moins grands + plus d'air entre étapes --- */
.how .steps{ gap:32px; }                   /* + d'espacement vertical */
.how .step{ padding:26px 24px; }
.how .num{
  font-size:clamp(56px, 7.2vw, 92px);      /* ↓ taille des 01/02/03 */
  line-height:.85;
}

/* --- How : H2 avec mots colorés --- */
.how h2 .hl1{ color:#123a7d; }             /* "facilement" (bleu brand) */
.how h2 .hl2{ color:#0b4ea2; }             /* "3 étapes" (bleu république) */

.how .title{margin:6px 0 10px; font-size:26px; line-height:1.25}
.how .text{color:var(--muted); font-size:17px}

@media (max-width:980px){
  .how .grid{grid-template-columns:1fr}
  .how .left, .how .left .stick{position:static}
  .phone .frame{height:540px}
  .how .aside-title{display:none} /* en mobile, pas besoin de réserve de hauteur */
}

/* on s'assure que l'écran #1 est bien visible au chargement */
.phone .screen[data-for="01"].active{ opacity:1; transform:none; }

/* (optionnel) contraste léger sur les blocs UI du téléphone */
.phone .ui .card{ box-shadow:0 1px 0 rgba(16,30,58,.03); }

/* Logo header = même rendu que le smartphone */
.brand{display:flex;align-items:center;gap:10px}
.brand .logo-shield{width:28px;height:28px;display:block}
.brand .icon{width:28px;height:28px;display:block}
.brand .mark{display:flex;align-items:baseline;gap:6px}
.brand .mark .duerp{font-weight:800;letter-spacing:.2px;color:#123a7d;font-size:22px}
.brand .mark .enligne{font-style:italic;font-weight:600;color:#0b4ea2;font-size:20px}
@media (max-width:980px){
  .brand .logo-shield{width:22px;height:22px}
  .brand .icon{width:22px;height:22px}
  .brand .mark .duerp{font-size:18px}
  .brand .mark .enligne{font-size:16px}
}

/* Cartouches très fines (pills) pour le smartphone */
.ui .row{ gap:6px; }
.ui .chip.thin{
  padding:3px 8px;           /* plus fin */
  border-radius:10px;
  font-size:12px;
  line-height:1.2;
  background:#f7f9fe;
  border:1px solid #dfe6f4;
}/* HERO : 1 seule colonne texte + visuel supprimé */

/* H1 2 lignes + rotateur */
/* HERO rotateur — héritage strict de la typo + largeur fixe */
#accueil .word-rotate{
  --accent:#0b4ea2;
  position:relative; display:inline-block; color:var(--accent);
  width:var(--rotate-w, 20ch);           /* largeur FIXE posée par le JS */
  height:1.05em; line-height:1.05em;
  overflow:hidden; white-space:nowrap; vertical-align:baseline;
  font: inherit;                          /* hérite taille/gras/famille */
  letter-spacing: inherit;                /* hérite espacement */
}
#accueil .word-rotate .rword{
  position:absolute; left:0; top:0;
  white-space:nowrap; line-height:1.05em;
  opacity:0; transform:translateY(110%);
  font: inherit; letter-spacing: inherit; /* mêmes métriques que le conteneur */
}
#accueil .word-rotate .rword.active{
  opacity:1; transform:translateY(0);
  transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .42s ease;
}
#accueil .word-rotate .rword.enter{opacity:0; transform:translateY(110%)}
#accueil .word-rotate .rword.leave{opacity:0; transform:translateY(-110%); transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .42s ease}

/* Espacement entre les 2 lignes du H1 */
#accueil .hero-title { line-height: 1.08; }
#accueil .hero-title .line2 { margin-top: clamp(6px, 1.2vw, 14px); }

.parallax-head {
  text-align: center;
  font-size: 32px;
  line-height: 1.2;
  margin: 56px 0 28px;
}

.parallax-head .hl1 { color: #123a7d; }   /* même bleu brand que .how h2 .hl1 */
.parallax-head .hl2 { color: #0b4ea2; }   /* même bleu république que .how h2 .hl2 */

/* ==== HERO — style Legalstart-like (gros H1 + espacements) ==== */
.hero .inner{
  padding: 72px 0 64px;              /* + d’air en haut/bas */
  grid-template-columns: 1fr !important; /* une seule colonne (déjà forcé chez toi) */
}

.hero h1{
  font-size: clamp(46px, 7vw, 72px);  /* H1 bien plus grand */
  line-height: 1.08;
  margin: 0 0 18px;                   /* espace H1 → sous-titre */
  letter-spacing: -0.02em;
}

.hero p.lead{
  margin: 0 0 22px;                   /* espace sous-titre → CTAs */
  font-size: clamp(18px, 2.2vw, 20px);
  color: #1b2b4a;
}

.hero .row{
  gap: 12px;
  margin-top: 4px;                    /* laissé compact, l’air est au-dessus via .lead */
}

/* Ligne de réassurance (étoiles + texte) */


/* On masque toutes les petites cartouches du HERO */
#accueil .pill,
#accueil .badges,
#accueil .quicklinks { display: none !important; }

/* === FIX HERO : taille H1 + espacements façon Legalstart (mais raisonnables) === */
#accueil.hero .inner{
  /* repasse en 2 colonnes sur desktop, 1 colonne en mobile */
  grid-template-columns: minmax(520px,1.05fr) 1fr !important;
  align-items: center;
  padding: 64px 0 60px; /* air global */
}
@media (max-width: 980px){
  #accueil.hero .inner{ grid-template-columns: 1fr !important; }
}

/* === FIX illustration disparue === */
/* Tu l’avais cachée : on la ré-affiche et on s’assure qu’elle a une taille correcte */
#accueil.hero .duerp-illustration--sempe{
  display: block !important;            /* annule le display:none précédent */
  max-width: 560px;
  justify-self: end;                    /* ancre à droite en grille */
}
#accueil.hero .duerp-illustration--sempe svg{
  width: 100%;
  height: auto;
  display: block;
}

/* Empêcher le retour à la ligne entre "Votre" et "DUERP" */
#accueil .hero-title .line1{
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: .35em;                 /* réduit un peu l’écart */
}
#accueil .hero-title .line1 span{
  white-space: nowrap;
}

/* ==== HERO ajustements finesse ==== */
#accueil.hero h1{
  font-size: clamp(34px, 4.6vw, 52px);  /* ↓ taille max H1 réduite */
  line-height: 1.1;
}

/* Grille : + de place à droite pour l’illustration */
#accueil.hero .inner{
  grid-template-columns: minmax(480px, 0.9fr) 1.1fr !important;
  gap: 44px;
}

#accueil.hero .duerp-illustration--sempe{
  max-width: 600px;      /* illustration plus large */
  justify-self: start;   /* elle occupe mieux sa colonne */
}

/* ==== HERO subtile retouche du sous-titre ==== */
#accueil.hero p.lead{
  font-size: clamp(19px, 2vw, 22px); /* ↑ plus lisible */
  line-height: 1.45;
  margin: 0 0 26px;                  /* espace vers les CTAs */
}

/* ==== HERO trustline alignement texte/étoiles ==== */
.hero .trustline span:last-child{
  position: relative;
  top: -2px;   /* remonte le texte de 2px */
}

#accueil.hero .inner{
  grid-template-columns: minmax(540px, 1.15fr) 0.85fr !important;
  align-items: center;
  gap: 48px; /* + d’air entre texte et visuels */
}
    
/* Mobile : 1 colonne (texte puis visuels) */
@media (max-width: 980px){
  #accueil.hero .inner{ grid-template-columns: 1fr !important; }
  .hero-visual{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a b"
      "c c";
    gap: 12px;
  }
  .hero-visual .b{ aspect-ratio: 1/1; }
}

/* Trustline : lisible et alignée */
.hero .trustline{
  display: block;
  text-align: left;        /* aligné à gauche */
  margin-top: 24px;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 600;
  color: #0b1326;
}


/* Grille visuels façon Legalstart : A vertical en haut-gauche, B vertical à droite (2 rangées), C horizontal en bas-gauche */
.hero-visual{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "a b"
    "c b";
  gap: 16px;
}
.hero-visual .himg{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(16,30,58,.10);
  background: #fff;
}
.hero-visual .a{ grid-area: a; aspect-ratio: 3/4; }  /* vertical */
.hero-visual .b{ grid-area: b; aspect-ratio: 3/4; }  /* vertical, et span 2 lignes via grid-area */
.hero-visual .c{ grid-area: c; aspect-ratio: 5/3; }  /* horizontal */

.hero-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HERO grille globale : texte | visuels (entre-deux confortable) */
#accueil.hero .inner{
  grid-template-columns: minmax(540px, 1.15fr) 0.85fr !important;
  align-items: center;
  gap: 48px;
}

/* Mobile : 1 colonne et mosaïque adaptée */
@media (max-width: 980px){
  #accueil.hero .inner{ grid-template-columns: 1fr !important; }
  .hero-visual{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a b"
      "c c";
    gap: 12px;
  }
  .hero-visual .b{ aspect-ratio: 1/1; } /* carré en mobile pour mieux tenir */
  .hero-visual .c{ aspect-ratio: 16/9; } /* horizontal mobile */
}

/* Grille HERO : texte | visuel unique (entre-deux confortable) */
#accueil.hero .inner{
  grid-template-columns: minmax(540px, 1.15fr) 0.85fr !important;
  align-items: center;
  gap: 48px;
}

/* Le visuel unique (SVG) s’adapte proprement */
.hero-mosaic{
  display:block;
  max-width: 620px;        /* ajuste si tu veux plus large */
  width: 100%;
}
.hero-mosaic svg{
  width: 100%;
  height: auto;
  display: block;
}

/* Trustline alignée à gauche, lisible */
.hero .trustline{
  display: block;
  text-align: left;
  margin-top: 24px;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 600;
  color: #0b1326;
}
.hero .trustline .trust-text{ white-space: nowrap; }

/* ===== Header mobile : logo seul ===== */
@media (max-width: 768px){
  header.site > .wrap > nav,
  header.site .burger,
  header.site .mobile-menu {
    display: none !important;
  }
}

/* ===== Espacement mobile ===== */
@media (max-width: 768px){
  #accueil.hero .inner,
  #accueil.hero .inner > div,
  header.site .wrap,
  footer .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ===== Ajustements mobile (≤ 768px) ===== */
@media (max-width: 768px){

  /* H1 plus petit et fluide */
  #accueil.hero h1{
    font-size: clamp(24px, 7vw, 30px); /* s’adapte à l’écran */
    line-height: 1.2;
    word-break: break-word; /* évite le débordement */
  }

  /* Sous-titre (lead) légèrement réduit */
  #accueil.hero p.lead{
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.4;
  }

  /* Boutons : en pile, largeur 100% */
  #accueil.hero .row{
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  #accueil.hero .row .btn{
    width: 100%;
    text-align: center;
    font-size: 15px;
    padding: 12px 14px;
  }

  /* Trustline bien lisible */
  .hero .trustline{
    font-size: clamp(14px, 3.5vw, 16px);
    text-align: center;
    margin-top: 18px;
  }
}
/* ===== HERO — fin de section nickel en mobile ===== */
@media (max-width: 768px){

  /* Air en bas du hero + container cohérent */
  #accueil.hero .inner{
    padding-bottom: 28px;
  }

  /* Boutons : pile, même largeur, pas de débordement */
  #accueil.hero .row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;                 /* espace entre les deux boutons */
    align-items: stretch;
    justify-items: stretch;
    margin-top: 14px;          /* un peu d’air après le lead */
    margin-bottom: 10px;       /* avant la trustline */
  }
  #accueil.hero .row .btn{
    width: 100%;
    box-sizing: border-box;    /* évite les dépassements */
    padding: 12px 14px;
    text-align: center;
    font-size: 15px;
  }
  /* Style du bouton secondaire (ghost) mieux visible sur mobile */
  #accueil.hero .row .btn.ghost{
    background: transparent;
    border: 1px solid rgba(13,37,78,.18);
    color: #0d254e;
  }
  #accueil.hero .row .btn.ghost:hover{
    background: rgba(13,37,78,.04);
  }

  /* Trustline : lisible, pas tronquée */
  .hero .trustline{
    margin-top: 16px;
    padding-bottom: 6px;              /* évite l'effet coupé bas écran */
    text-align: center;
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.35;
  }
  .hero .trustline .trust-text{
    white-space: normal;              /* autorise le retour à la ligne si nécessaire */
  }
}

/* ===== HERO CTA Mobile ===== */
@media (max-width: 768px){

  #accueil.hero .row{
    display: flex;
    flex-direction: column;
    align-items: center;   /* centre horizontalement */
    gap: 10px;
  }

  #accueil.hero .row .btn{
    width: auto;           /* pas 100% */
    max-width: 90%;        /* borne à 90% de la largeur de l’écran */
    padding: 12px 18px;
    font-size: 15px;
    text-align: center;
  }
}

/* ===== HERO CTA Mobile aligné à gauche ===== */
@media (max-width: 768px){

  #accueil.hero .row{
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* ancré à gauche */
    gap: 10px;
  }

  #accueil.hero .row .btn{
    width: auto;
    max-width: 90%;            /* borne pour éviter le débordement */
    padding: 12px 18px;
    font-size: 15px;
    text-align: center;
  }
}

/* ===== HERO Mobile adjustments ===== */
@media (max-width: 768px){
  /* Masquer le visuel uniquement en mobile */
  .hero-visual,
  .hero-mosaic {
    display: none !important;
  }

  /* Trustline alignée à gauche */
  .hero .trustline{
    text-align: left !important;
    margin-left: 0;
  }
}

/* =========================
   MOBILE (≤ 768px) — Ajustements demandés
   ========================= */
@media (max-width: 768px){

  /* 1) "Créez votre DUERP facilement en 3 étapes" plus petit que le H1 */
  .how h2{
    font-size: clamp(18px, 5.2vw, 22px);   /* ↓ taille */
    line-height: 1.25;
    margin-bottom: 12px;
  }

  /* 2) Dans "Comment ça marche", supprimer les visuels smartphone, garder 01/02/03 */
  .how .phone-sticky,
  .how .phone,
  .how .mockup,
  .how .screens,
  .how .phone-figure,
  .how .phone-wrap,
  .how .progress {               /* on masque le visuel + la barre si présente */
    display: none !important;
  }
  .how .grid{
    grid-template-columns: 1fr !important; /* steps en pleine largeur */
    gap: 16px;
  }
  .how .steps,
  .how .step{
    margin: 0;
  }
  .how .step-num{
    flex: 0 0 auto;
    min-width: 40px;             /* garde un repère visuel 01/02/03 propre */
    text-align: left;
  }

  /* 3) "DUERP en ligne, la solution..." : n'afficher que les textes (pas d'images) */
  .parallax-head{ margin-top: 20px; } /* léger resserrage */
  .parallax .feature img,
  .parallax .feature figure,
  .parallax .feature .icon,
  .parallax .feature .media,
  .parallax .feature .visual{
    display: none !important;    /* cache toutes les variations d'images/icônes */
  }
  .parallax .feature{
    padding: 14px 12px;          /* un peu d’air autour du texte */
  }
}

/* ===== MOBILE : aucune image sauf le logo ===== */
@media (max-width: 768px){

  /* Masquer les images decoratives de la homepage */
  #accueil img {
    display: none !important;
  }

  /* Re-afficher le logo */
  header.site .logo img {
    display: inline-block !important;
  }

  /* Re-afficher les images de contenu (pages secteur, hub DUERP) */
  .duerp-page img,
  .duerp-infog img,
  .duerp-hero-thumb__card img,
  .duerp-hub img,
  .card-thumb img {
    display: block !important;
  }

  /* Masquer aussi les éventuels SVG/icônes décoratifs */
  .hero-visual,
  .hero-mosaic,
  .how .phone,
  .how .phone-sticky,
  .how .mockup,
  .parallax .feature figure,
  .parallax .feature .icon,
  .parallax .feature .visual {
    display: none !important;
  }
}
/* ===== MOBILE : pas de visuels ni SVG dans la rubrique "la solution" ===== */
@media (max-width: 768px){

  /* Cacher toutes les images et SVG décoratifs de la section parallax/features */
  .parallax .feature img,
  .parallax .feature svg,
  .parallax .feature figure,
  .parallax .feature .icon,
  .parallax .feature .visual {
    display: none !important;
  }
}
/* ===== MOBILE (≤768px) — Parallax : supprimer TOUT l'espace des visuels ===== */
@media (max-width: 768px){

  /* 1) La grille des features repasse en 1 colonne texte-only */
  .parallax{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .parallax .feature{
    display: grid;
    grid-template-columns: 1fr !important;
    align-items: start;
    gap: 8px;
    min-height: 0 !important;
  }

  /* 2) Neutraliser totalement les conteneurs visuels (y compris ratios via ::before) */
  .parallax .feature figure,
  .parallax .feature .media,
  .parallax .feature .visual,
  .parallax .feature .icon,
  .parallax .feature .imgwrap,
  .parallax .feature [data-role="visual"]{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
  }
  .parallax .feature figure::before,
  .parallax .feature figure::after,
  .parallax .feature .media::before,
  .parallax .feature .media::after,
  .parallax .feature .visual::before,
  .parallax .feature .visual::after{
    content: none !important;      /* tue les pseudo-éléments qui réservent la hauteur */
  }

  /* 3) Si la section a un décor vertical (barre/halo) via ::before → on le coupe en mobile */
  .parallax::before,
  .parallax::after{
    content: none !important;
  }

  /* 4) Compacter la typo pour éviter les blancs résiduels */
  .parallax .feature h3,
  .parallax .feature .title{
    margin: 0 0 6px !important;
    line-height: 1.22;
  }
  .parallax .feature p{ margin: 0 !important; }
}

/* ===== MOBILE (≤768px) : supprimer les trous dans la section parallax ===== */
@media (max-width: 768px){

  /* Forcer le layout en 1 seule colonne */
  .parallax .wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px 16px !important; /* réduit le padding vertical */
  }

  /* Chaque feature prend toute la largeur et ne réserve plus d'espace image */
  .parallax .feature{
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Masquer tous les conteneurs visuels */
  .parallax .feature figure,
  .parallax .feature .media,
  .parallax .feature .visual,
  .parallax .feature .icon,
  .parallax .feature img,
  .parallax .feature svg{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ===== Mobile : supprimer totalement l'espace des visuels dans #features ===== */
@media (max-width: 768px){

  /* La grille ne réserve plus de colonne / gap */
  #features.parallax .wrap{
    display: block !important;
    padding: 0 16px !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  #features.parallax .feature{
    display: block !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* ⚠️ Le conteneur visuel qui crée le "trou" */
  #features.parallax .feature .visu,
  #features.parallax .feature [class*="visu"]{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  #features.parallax .feature .visu::before,
  #features.parallax .feature .visu::after{
    content: none !important;   /* tue les pseudo-éléments de ratio */
  }

  /* Le texte n'a plus de padding hérité du split visuel/texte */
  #features.parallax .feature .content{
    padding: 0 !important;
  }
}

/* ===== MOBILE : ajouter de l'air sur les côtés dans la section "la solution..." ===== */
@media (max-width: 768px){
  #features.parallax .wrap{
    padding-left: 35px !important;
    padding-right: 20px !important;
  }

  #features.parallax .feature{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ===== MOBILE (≤768px) — FAQ 3 questions en pile ===== */
@media (max-width: 768px){

  #faq-mini .cards,          /* ou adapte si ta section a un autre ID */
  #faq-mini .wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;    /* espace vertical entre les questions */
  }

  #faq-mini .card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
/* ===== FAQ mini : 3 cartes empilées en mobile ===== */
@media (max-width: 768px){

  /* Le conteneur `.grid.cols-3` ne fait plus de colonnes */
  .grid.cols-3{
    display: grid !important;
    grid-template-columns: 1fr !important;  /* 1 colonne */
    grid-auto-flow: row;
    gap: 16px !important;                   /* espace entre cartes */
  }

  /* Les cartes prennent toute la largeur dispo */
  .grid.cols-3 > .card,
  .grid.cols-3 > article.card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Sécurité anti-scroll horizontal */
  .grid.cols-3 > *{ min-width: 0 !important; }
}

/* ===== Footer simplifié en mobile ===== */
@media (max-width: 768px){

  footer .cols > *:not(:last-child) {
    display: none !important;  /* cache toutes les colonnes sauf la dernière */
  }

  footer .col-contact, 
  footer .cols > :last-child {
    display: block !important;
    text-align: center;
  }

  footer .col-contact a {
    display: inline-block;
    margin: 0 8px;
  }
}

/* ===== Footer mobile stylé ===== */
@media (max-width: 768px){

  footer .cols > *:not(:last-child) {
    display: none !important;
  }

  footer .col-contact, 
  footer .cols > :last-child {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 12px;
    border-top: 1px solid rgba(0,0,0,.08);
    background: #f9fbfd; /* léger fond clair */
    border-radius: 6px;
    gap: 6px;
  }

  footer .col-contact h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1b2b4a;
    margin-bottom: 4px;
  }

  footer .col-contact a {
    font-size: 14px;
    color: #0b4ea2;
    text-decoration: none;
  }
  footer .col-contact a:hover {
    text-decoration: underline;
  }

  footer .site-info {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
  }
}

/* ===== Footer "app-like" en mobile : 2 boutons côte à côte ===== */
@media (max-width: 768px){

  /* On ne garde que la colonne Contact (qui contient aussi Mentions) */
  footer .cols > *:not(.col-contact){
    display: none !important;
  }

  /* Container de la colonne Contact → transformé en barre */
  footer .col-contact{
    display: flex !important;
    gap: 10px;
    justify-content: space-between;
    align-items: stretch;
    padding: 14px 16px;
    border-top: 1px solid rgba(0,0,0,.08);
    background: #f9fbfd;
    border-radius: 10px;
  }

  /* On cache le titre/texte éventuels pour ne garder que les 2 liens */
  footer .col-contact h4,
  footer .col-contact p,
  footer .col-contact .desc,
  footer .col-contact ul{
    display: none !important;
  }

  /* Les deux liens : mailto + mentions → boutons 50/50 */
  footer .col-contact a[href^="mailto"],
  footer .col-contact a[href*="mentions"]{
    flex: 1 1 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;                /* cible tactile */
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(16,30,58,.08);
  }

  /* Styles distincts */
  footer .col-contact a[href^="mailto"]{
    background: #0b4ea2;
    color: #fff;
  }
  footer .col-contact a[href*="mentions"]{
    background: #ffffff;
    color: #0b4ea2;
    border: 1px solid rgba(11,78,162,.15);
  }

  /* Petit copyright en dessous si présent */
  footer .site-info{
    margin: 10px 0 0;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
  }
}

/* ===== Footer "app-like" : mobile uniquement ===== */
@media (max-width: 768px){
  /* on cache l'ancien layout de colonnes en mobile */
  footer .container.cols { display: none !important; }

  /* barre 2 boutons */
  footer .footer-mobile{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: stretch;
    padding: 14px 16px;
    border-top: 1px solid rgba(0,0,0,.08);
    background: #f9fbfd;
  }
  footer .footer-mobile a{
    flex: 1 1 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(16,30,58,.08);
  }
  footer .footer-mobile a:first-child{
    background: #0b4ea2; color:#fff; /* Contact */
  }
  footer .footer-mobile a:last-child{
    background: #fff; color:#0b4ea2; border: 1px solid rgba(11,78,162,.15); /* Mentions */
  }

  /* copyright centrée, plus discret */
  footer .container.legal{
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    padding: 8px 16px 16px;
  }
}

/* Desktop : on garde ton footer normal, on cache la barre mobile */
@media (min-width: 769px){
  footer .footer-mobile{ display: none; }
}

/* CTA rescue */
header.site nav a.cta,
.btn.primary,
a.btn.primary,
.cta-big {
  background: var(--brand, #123a7d) !important;
  color: #fff !important;
  border: 1px solid var(--brand, #123a7d) !important;
  border-radius: 9999px;
  text-decoration: none;
}

/* === FAQ index (scoped) === */
.faq-index .hero{padding:2.5rem 0 1rem}
.faq-index .grid{padding:1rem 0 3rem}
.faq-index .faq-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem;
}
.faq-index .faq-card{
  background:var(--surface,#fff);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:1rem 1.125rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.faq-index .faq-card .h5{margin:0 0 .25rem;font-size:1.125rem;line-height:1.3}
.faq-index .faq-card p{margin:.5rem 0}
.faq-index .faq-card .btn{display:inline-block}

/* === Page FAQ (scoped) === */
.faq-page .hero{padding:2.5rem 0 1rem}
.faq-page .content{padding:1rem 0 2.5rem}
.faq-page .content .container{max-width:900px}
.faq-page h1{margin:0 0 .25rem}
.faq-page .lead{color:var(--muted,#333);margin:.5rem 0 1rem}
.faq-page .breadcrumb ol{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0 0;padding:0;list-style:none}
.faq-page .breadcrumb a{text-decoration:none}
.faq-page h2{margin:1.25rem 0 .5rem;font-size:1.25rem;line-height:1.35}
.faq-page .richtext p{margin:.5rem 0}
.faq-page .see-also{padding:1rem 0 0}
.faq-page .see-also ul{display:flex;flex-wrap:wrap;gap:.5rem 1rem;list-style:none;padding:0;margin:.5rem 0 0}
.faq-page .see-also a{text-decoration:none}
.faq-page .cd-note{margin-top:1rem;opacity:.85}
.faq-page .cta{padding:1.5rem 0 2rem}

/* FAQ index : grille robuste et neutralisation des contraintes globales */
.faq-index .container { max-width: 1200px; }

.faq-index .faq-cards{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 20px;
  align-items: stretch;
}

.faq-index .faq-card{            /* qu'il y ait .card ou non */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Si tu gardes encore .card quelque part, neutralise-la dans le scope FAQ */
.faq-index .faq-cards .card{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* FAQ index – grille robuste (neutralise les overrides globaux) */
.faq-index .grid .container{max-width:1200px !important;width:100% !important;}
.faq-index .faq-cards{display:grid !important;gap:20px !important;align-items:stretch;}
@media (min-width:700px){ .faq-index .faq-cards{grid-template-columns:repeat(2,1fr) !important;} }
@media (min-width:1024px){ .faq-index .faq-cards{grid-template-columns:repeat(3,1fr) !important;} }
@media (min-width:1280px){ .faq-index .faq-cards{grid-template-columns:repeat(4,1fr) !important;} }
/* neutralisation de contraintes héritées */
.faq-index .faq-card{width:auto !important;max-width:none !important;margin:0 !important;box-sizing:border-box;}

/* === FAQ index tweaks === */
.faq-index .faq-title{ font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height:1.1; }
.faq-index .faq-intro{ margin: .5rem 0 1rem; max-width: 900px; }
.faq-index .faq-intro .intro-cta{ margin:.5rem 0 0; }
.faq-index .faq-intro .disclaimer{ opacity:.8; margin:.25rem 0 0; }

.faq-index .faq-search{ margin: 1rem 0 1.25rem; }
.faq-index .faq-search input{
  width:100%; max-width: 560px;
  padding:.75rem 1rem; border:1px solid rgba(0,0,0,.15);
  border-radius:10px; font-size:1rem;
}

/* Grille robuste (2/3/4 colonnes) */
.faq-index .grid .container{ max-width:1200px; width:100%; }
.faq-index .faq-cards{ display:grid; gap:20px; align-items:stretch; }
@media (min-width:700px){  .faq-index .faq-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .faq-index .faq-cards{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1280px){ .faq-index .faq-cards{ grid-template-columns:repeat(4,1fr); } }

.faq-index .faq-card{
  background:var(--surface,#fff);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:1rem 1.125rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  width:auto; max-width:none; margin:0; box-sizing:border-box;
}
.faq-index .faq-card .h5{ margin:0 0 .25rem; font-size:1.125rem; line-height:1.3; }
.faq-index .faq-empty{ opacity:.8; margin: .5rem 0 0; }

/* CTA plus visible */
.btn-big{ font-size:1.05rem; padding:.85rem 1.25rem; border-radius:12px; }

/* Sécurité : s'il existe une règle globale qui bloque les clics */
.faq-index a, .faq-index .btn, .faq-index .view-answer { pointer-events:auto; }

.faq-index .faq-card { cursor: pointer; }
.faq-index a, .faq-index .btn { pointer-events: auto; }

/* ===== FAQ – Pages de réponse ===== */
.faq-page .hero h1{
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Bloc marketing bas de page */
.faq-page .cta-marketing{
  margin: 2rem 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 1.25rem;
}
.faq-page .cta-marketing h3{ margin:0 0 .5rem; font-size:1.25rem; }
.faq-page .cta-marketing .cols{
  display:grid; gap:1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .faq-page .cta-marketing .cols{ grid-template-columns: 1.4fr .8fr; }
}
.faq-page .cta-marketing ul{
  margin:.25rem 0 .75rem 1.25rem; padding:0;
}
.faq-page .cta-marketing li{ margin:.25rem 0; }

/* ── FAQ article : tables ── */
.faq-page .richtext table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.faq-page .richtext table caption{caption-side:top;text-align:left;font-weight:700;font-size:1rem;padding:0 0 .5rem;color:#1a1a1a}
.faq-page .richtext table th,.faq-page .richtext table td{border:1px solid #d5d5d5;padding:.6rem .8rem;text-align:left;vertical-align:top}
.faq-page .richtext table th{background:#f0f4f8;font-weight:600;font-size:.9rem}
.faq-page .richtext table tr:nth-child(even) td{background:#fafbfc}

/* ── FAQ article : callout boxes ── */
.faq-page .callout{padding:1rem 1.25rem;margin:1.5rem 0;border-radius:6px;border-left:4px solid #3498db;background:#f0f7fb}
.faq-page .callout--good{border-left-color:#27ae60;background:#eafaf1}
.faq-page .callout--warning{border-left-color:#e67e22;background:#fdf2e9}
.faq-page .callout--danger{border-left-color:#e74c3c;background:#fdedec}
.faq-page .callout--tip{border-left-color:#8e44ad;background:#f5eef8}
.faq-page .callout--neutral{border-left-color:#7f8c8d;background:#f8f9f9}
.faq-page .callout--info{border-left-color:#2980b9;background:#eaf2f8}
.faq-page .callout p:first-child{margin-top:0}
.faq-page .callout p:last-child{margin-bottom:0}
.faq-page .callout .callout-label{display:block;font-weight:700;margin-bottom:.4rem;font-size:.95rem}

/* ── FAQ article : résumé box ── */
.faq-page .resume-box{background:#eef6fc;border-radius:8px;padding:1rem 1.25rem;margin:1.5rem 0}
.faq-page .resume-box h3{margin:0 0 .5rem;font-size:1rem}

/* ── FAQ article : checklist ── */
.faq-page .checklist{list-style:none;padding:0;margin:.5rem 0}
.faq-page .checklist li{padding:.35rem 0 .35rem 1.75rem;position:relative}
.faq-page .checklist li::before{content:'✓';color:#27ae60;font-weight:700;position:absolute;left:0}

/* ── FAQ article : pull quote ── */
.faq-page .pull-quote{font-size:1.15em;font-style:italic;border-left:3px solid #bbb;padding:.5rem 0 .5rem 1rem;color:#555;margin:1.5rem 0}

/* ── FAQ article : section divider ── */
.faq-page .richtext hr{border:none;border-top:1px solid #e0e0e0;margin:2rem 0}

/* ── FAQ article : FAQ rapide accordion-like ── */
.faq-page .richtext h3{margin:1.25rem 0 .35rem;font-size:1.05rem;line-height:1.35}
.faq-page .richtext h2+.richtext h3:first-child{margin-top:.5rem}

/* Cartes cliquables */
a.card {
  text-decoration: none !important;
  color: inherit;
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

a.card:hover {
  text-decoration: none !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(16, 30, 58, .12);
  border-color: #dfe6f4;
}

/* ===== HEADER — Hover deluxe sur la nav (links non-CTA) ===== */
header.site nav a:hover { text-decoration: none; } /* kill l'underline par défaut dans le header */

header.site nav a:not(.cta){
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35ch;
  padding: 8px 8px;               /* un peu d'air pour la "pill" */
  margin: 0 10px;                 /* conserve ton espacement */
  border-radius: 12px;
  transition: color .25s ease, transform .25s ease;
  will-change: transform;
}

/* Glow en pill (très doux) */
header.site nav a:not(.cta)::before{
  content: "";
  position: absolute;
  inset: -2px -6px;               /* déborde légèrement pour l'aura */
  border-radius: 14px;
  background: radial-gradient(60% 180% at 50% 140%, rgba(18,58,125,.12), transparent 60%);
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

/* Underline dégradé animé */
header.site nav a:not(.cta)::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, #0b4ea2 50%, var(--fr-red) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  filter: drop-shadow(0 2px 4px rgba(16,30,58,.20));
  pointer-events: none;
}

/* États hover + focus clavier */
header.site nav a:not(.cta):hover,
header.site nav a:not(.cta):focus-visible{
  color: var(--brand);
  transform: translateY(-1px);
  text-decoration: none;
}
header.site nav a:not(.cta):hover::before,
header.site nav a:not(.cta):focus-visible::before{
  opacity: 1;
  transform: translateY(0) scale(1);
}
header.site nav a:not(.cta):hover::after,
header.site nav a:not(.cta):focus-visible::after{
  transform: scaleX(1);
}

/* État "actif" optionnel (si tu ajoutes .active ou aria-current="page") */
header.site nav a.active,
header.site nav a[aria-current="page"]{
  color: var(--brand);
}
header.site nav a.active::after,
header.site nav a[aria-current="page"]::after{
  transform: scaleX(1);
}

/* Réduction des animations si l’utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce){
  header.site nav a,
  header.site nav a::before,
  header.site nav a::after{
    transition: none !important;
  }
}

/* ===================== */
/* Breadcrumb            */
/* ===================== */
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #555;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb span {
  margin: 0 6px;
  color: #999;
}

.breadcrumb a {
  color: #0b4ea2;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Quote stylée pour "Notre avis" */
.exp-quote{
  position:relative;
  padding:22px 26px;
  background:linear-gradient(135deg,#f8fafc,#eef2f7);
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  font-size:1.05rem; line-height:1.6; color:#0f172a;
}
.exp-quote::before{
  content:"“";
  position:absolute; left:14px; top:-8px;
  font-size:64px; line-height:1; color:#cbd5e1; font-family:serif;
}
.exp-quote::after{
  content:"”";
  position:absolute; right:12px; bottom:-40px;
  font-size:64px; line-height:1; color:#cbd5e1; font-family:serif;
}

.prose {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Wrapper contenu modèles DUERP */
.duerp-content { line-height: 1.6; max-width: 1060px; margin: 28px auto; padding: 0 16px; }
.duerp-content h1, .duerp-content h2, .duerp-content h3,
.duerp-content p, .duerp-content ul, .duerp-content li { text-align: left; }
.duerp-content ul { padding-left: 1.25rem; }


header.site nav .nav-audit {
  font-weight: 600;
}

header.site nav .badge-new {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #ffebe5;
  color: #b3261e;
  margin-left: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Lien avec badge "Gratuit" au-dessus */
header.site nav a.nav-with-sub {
  position: relative;
  display: inline-block;
  white-space: nowrap; /* évite les retours à la ligne internes */
}

/* Texte principal : même hauteur que les autres items */
header.site nav a.nav-with-sub .nav-main {
  font-weight: 600;
}

header.site nav a.nav-with-sub .nav-sub {
  position: absolute;
  bottom: 100%;              /* attaché au dessus du texte */
  right: 0;
  transform: translateY(60%); /* rapproche le badge vers le texte */
  /* margin-bottom: 0.1rem;   <-- à supprimer si tu l'as encore */

  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;

  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(38, 71, 164, 0.06);
  border: 1px solid rgba(38, 71, 164, 0.25);
  color: #2647a4;
}




/* On réduit un peu l’espace entre les liens (sauf le gros CTA) pour tenir sur une ligne */
@media (min-width: 960px) {
  header.site nav a:not(.cta) {
    margin-right: 1.4rem;
  }
}
/* Desktop : tout tient sur une seule ligne, sans couper les mots */
@media (min-width: 980px) {
  header.site nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Empêche "Modèles DUERP", "Experts DUERP", "Mon Compte" de se casser sur 2 lignes */
  header.site nav a {
    white-space: nowrap;
    margin-right: 0.8rem; /* un peu plus serré */
  }

  /* Les deux liens avec sous-ligne "Gratuit(s)" : marge encore un peu réduite */
  header.site nav a.nav-with-sub {
    margin-right: 0.6rem;
  }

  /* Ligne principale des liens avec sous-titre : jamais coupée */
  header.site nav a.nav-with-sub .nav-main {
    white-space: nowrap;
  }

  /* Le gros bouton reste à droite, sans espace inutile derrière */
  header.site nav a.cta {
    margin-right: 0;
    padding-inline: 1.5rem;
  }
}







/* ===== Header mobile : reste visible même en scroll vers le bas ===== */
@media (max-width: 768px){
  header.site{
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    pointer-events: auto !important;
  }
  header.site .wrap{
    transform: none !important;
    translate: none !important;
  }
}



/* ===== Header: moteur de recherche modèles (desktop) ===== */
.header-search{
  flex: 1 1 200px;
  max-width: 440px;
  margin: 0 10px;
  position: relative;
}
.hs-form{ position: relative; }
.hs-field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(16,30,58,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(15,30,60,0.06);
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease, background .22s ease;
  backdrop-filter: blur(8px);
}
.hs-field:focus-within{
  border-color: rgba(11,78,162,.35);
  box-shadow: 0 14px 38px rgba(16,30,58,.14);
  background: #fff;
  transform: translateY(-1px);
}
.hs-icon{ opacity:.7; color:#1b2b4a; }
#header-model-q{
  border:0;
  outline:0;
  background:transparent;
  width:100%;
  font-size:14px;
  color:#0b1326;
}
#header-model-q::placeholder{ color: rgba(27,43,74,.55); }

.hs-suggest{
  position:absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  background:#fff;
  border:1px solid rgba(16,30,58,.12);
  border-radius: 16px;
  box-shadow: 0 18px 54px rgba(16,30,58,.18);
  overflow:hidden;
  padding: 6px;
}
.hs-item{
  display:flex;
  flex-direction: column;
  gap:2px;
  padding: 10px 12px;
  border-radius: 12px;
  color:#0b1326;
  text-decoration:none;
  transition: background .16s ease, transform .16s ease;
}
.hs-item:hover,
.hs-item.active{
  background: rgba(18,58,125,.06);
  text-decoration:none;
  transform: translateY(-1px);
}
.hs-title{ font-weight: 700; }
.hs-sub{ font-size: 12px; color: rgba(27,43,74,.65); }

/* Suggestion promo (0 résultat) */
.hs-item--promo{
  background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(37,99,235,.12));
  border: 1px solid rgba(37,99,235,.2);
  padding: 16px 18px;
  gap: 6px;
}
.hs-item--promo:hover,
.hs-item--promo.active{
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.18));
  border-color: rgba(37,99,235,.35);
}
.hs-item--promo .hs-title{ color: #0b1326; font-size: 15px; }
.hs-item--promo .hs-sub{ color: #2563eb; font-weight: 600; font-size: 13px; }

/* On cache le moteur dans les vues étroites */
@media (max-width: 980px){
  .header-search{ display:none; }
}

/* === Mon compte — icône personne (nav-icon) === */
#nav-mon-compte.nav-icon {
  padding: 6px;
  margin: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
/* Pas d'underline animé sur une icône ronde */
#nav-mon-compte.nav-icon::after {
  display: none;
}
#nav-mon-compte.nav-icon svg {
  display: block;
  flex-shrink: 0;
}