/* ═══════════════════════════════════════════════════════════
   SECOURISME AIXOIS — Feuille de style partagee
   V11 — 09/10/2026 (refonte visuelle registre Apple)
   Toute modification ici s'applique a l'ensemble du site.
   ═══════════════════════════════════════════════════════════ */

    /*
      V8 — Corrections ciblées
      DA review :
      · Hero : image-defib-chatgpt-3.jpg (lisibilité texte améliorée)
      · Offres : cartes même hauteur (stretch + flex-column) ; "Remplacement garanti" retiré
               texte location : meilleur contraste ; option extérieure bien visible dans les 2
      · Produit : blanc pur partout, pas de dégradé, épuré Apple. Image sur fond #F5F5F7 doux.
               Astérisque sur les chiffres 150* → 200* → 200 J. Titre "FRED PA-1" une seule fois en section header.
      · Blocs 7 & 8 : couleurs DIFFÉRENTES. 7 = bleu nuit #1a3352 ; 8 = anthracite #1D1D1F.
               DA : alternance volontaire, chaque section a son identité.
      · Espace client : "offre location uniquement" (pas juste "location")
      · Juridique (V10) : rappel des obligations sans dramatiser
    */
    :root {
      --w:         1200px;
      --bg:        #FFFFFF;
      --bg-off:    #F5F5F7;
      --bg-dark:   #1D1D1F;   /* anthracite Apple — bloc 8 */
      --bg-slate:  #1a3352;   /* bleu nuit — bloc 7 */
      --ink:       #1D1D1F;
      --ink-2:     #515154;   /* V12 : contraste renforcé */
      --ink-3:     #6E6E73;   /* V12 : contraste AA (était #98989D) */
      --red:       #E8321A;
      --red-dk:    #C72D16;
      --red-tint:  #FEF0ED;
      --grn:       #2B6B2B;
      --grn-mid:   #3A8C3A;
      --grn-tint:  #EDF7ED;
      --line:      rgba(0,0,0,0.08);
      --font:      'Inter', -apple-system, sans-serif;
      --ease:      cubic-bezier(.25,.1,.25,1);
      --r-card:    20px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    img  { display: block; max-width: 100%; }
    a    { text-decoration: none; color: inherit; }
    button { font-family: var(--font); cursor: pointer; border: none; }

    /* ── NAV ── */
    nav {
      position: sticky; top: 0; z-index: 200;
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid var(--line);
      height: 52px; display: flex; align-items: center; padding: 0 40px;
    }
    .nav-w { max-width: var(--w); margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }
    .logo  { font-size: 15px; font-weight: 700; letter-spacing: -.03em; display: flex; align-items: center; gap: 9px; }
    .logo-pip { width: 20px; height: 20px; border-radius: 5px; background: var(--red); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 900; }
    .nav-links { display: flex; gap: 32px; list-style: none; }
    .nav-links a { font-size: 13px; color: var(--ink-2); transition: color .15s; }
    .nav-links a:hover { color: var(--ink); }
    .nav-btn { background: var(--red); color: #fff; padding: 7px 18px; border-radius: 980px; font-size: 13px; font-weight: 500; transition: background .2s; }
    .nav-btn:hover { background: var(--red-dk); }

    /* ── HAMBURGER ── */
    .hamburger {
      display: none;
      flex-direction: column; justify-content: center; align-items: center; gap: 5px;
      width: 36px; height: 36px; border: none; background: transparent; cursor: pointer;
      border-radius: 8px; transition: background .15s;
    }
    .hamburger:hover { background: var(--bg-off); }
    .hamburger span {
      display: block; width: 20px; height: 2px;
      background: var(--ink); border-radius: 2px;
      transition: transform .25s, opacity .25s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Menu déroulant mobile */
    .mobile-menu {
      display: none;
      position: fixed; top: 52px; left: 0; right: 0;
      background: rgba(255,255,255,0.97); backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--line);
      padding: 16px 20px 20px; z-index: 199;
      flex-direction: column; gap: 0;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-size: 16px; color: var(--ink-2); padding: 13px 0;
      border-bottom: 1px solid var(--line);
      text-decoration: none; transition: color .15s;
    }
    .mobile-menu a:last-child { border-bottom: none; }
    .mobile-menu a:hover { color: var(--ink); }
    .mobile-menu a.red { color: var(--red); font-weight: 600; }
    .mobile-menu-cta {
      margin-top: 16px;
      background: var(--red); color: #fff; border: none; border-radius: 980px;
      padding: 13px 0; font-size: 15px; font-weight: 600; cursor: pointer;
      width: 100%; text-align: center;
    }

    /* ── SCAFFOLDING ── */
    .section      { padding: 96px 40px; }
    .section.slim { padding: 72px 40px; }
    .inner        { max-width: var(--w); margin: 0 auto; }

    /* ── TYPO ── */
    .eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--red); margin-bottom: 12px; }
    .eyebrow.grn  { color: var(--grn-mid); }
    h1.hero-hed { font-size: clamp(52px, 6.5vw, 88px); font-weight: 800; letter-spacing: -.04em; line-height: 1.0; }
    h2.section-hed { font-size: clamp(30px, 3.2vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
    .section-sub { font-size: 17px; color: var(--ink-2); line-height: 1.6; letter-spacing: -.01em; max-width: 520px; }

    /* ── BOUTONS ── */
    .btn-pill { padding: 14px 28px; border-radius: 980px; font-size: 15px; font-weight: 500; transition: all .2s var(--ease); display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; }
    .btn-pill.solid { background: var(--red); color: #fff; }
    .btn-pill.solid:hover { background: var(--red-dk); transform: scale(1.02); }
    .btn-pill.ghost { background: transparent; color: var(--red); }
    .btn-pill.ghost:hover { background: var(--red-tint); }

    /* ══════════════════════════════════════════════════════════
       BLOC 1 — HERO
       Nouvelle image image-defib-chatgpt-3.jpg — meilleure lisibilité texte
    ══════════════════════════════════════════════════════════ */
    .hero {
      /* min-height = viewport - nav (52px) pour couvrir exactement l'écran */
      min-height: calc(100vh - 52px);
      display: flex; align-items: center;
      padding: 80px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
      background-image:
        linear-gradient(rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.82) 100%),
        url('../documents/image-defib-chatgpt-3.jpg');
      background-size: cover;
      background-position: center 35%;
      background-color: var(--bg);
    }
    /* wrapper centré vertical */
    .hero-inner { width: 100%; }
    /* Fondu bas du hero — masque le sol/tables sur mobile */
    .hero::after {
      content: '';
      display: none; /* inactif sur desktop */
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 22%;
      background: linear-gradient(to bottom, transparent, var(--bg-off));
      pointer-events: none; z-index: 2;
    }
    .hero-inner { max-width: var(--w); margin: 0 auto; position: relative; z-index: 1; }
    .hero-hed em { font-style: normal; color: var(--red); }
    .hero-lead {
      font-size: clamp(18px, 2vw, 22px);
      color: var(--ink-2); font-weight: 300;
      max-width: 560px; margin: 0 auto 44px;
      line-height: 1.55; letter-spacing: -.01em;
    }
    /* "défibrillateurs" en gras rouge */
    .hero-lead strong { color: var(--red); font-weight: 700; }
    .hero-actions { display: flex; gap: 14px; justify-content: center; }

    /* ══════════════════════════════════════════════════════════
       BLOC 2 — STATS BAR (compact, une ligne)
    ══════════════════════════════════════════════════════════ */
    .stats-bar { background: var(--bg-dark); padding: 0 40px; }
    .stats-inner {
      max-width: var(--w); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;
      align-items: center;
    }
    .stat-sep  { background: rgba(255,255,255,.07); height: 48px; }
    .stat-item { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 28px 32px; }
    .stat-num  { font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; flex-shrink: 0; }
    .stat-num.red   { color: var(--red); }
    .stat-num.white { color: #fff; }
    .stat-num.green { color: var(--grn-mid); }
    .stat-text { text-align: left; }
    .stat-label-main { font-size: 13px; color: rgba(255,255,255,.65); font-weight: 500; line-height: 1.4; }
    .stat-label-sub  { font-size: 11px; color: rgba(255,255,255,.3); line-height: 1.4; margin-top: 2px; }

    /* ══════════════════════════════════════════════════════════
       BLOC 3 — NOS OFFRES
       2 cartes même hauteur (stretch + flex-column)
       "Remplacement garanti" retiré
       Texte carte location : meilleur contraste
    ══════════════════════════════════════════════════════════ */
    .pricing-section { background: var(--bg-off); }
    .pricing-header  { text-align: center; margin-bottom: 56px; }

    /* align-items: stretch → les 2 cartes ont la même hauteur */
    .offers-grid-2 {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 24px; align-items: stretch;
    }

    .offer-card {
      background: var(--bg); border-radius: var(--r-card);
      border: 1.5px solid var(--line);
      padding: 40px 36px;
      transition: all .25s var(--ease);
      position: relative;
      /* flex-column → les CTAs sont calés en bas */
      display: flex; flex-direction: column;
    }
    .offer-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.07); }

    /* Carte foncée — Location Sérénité */
    .offer-card.hero-offer {
      background: var(--bg-slate); border-color: transparent;
      box-shadow: 0 24px 64px rgba(0,0,0,.18);
    }
    .offer-card.hero-offer:hover { transform: translateY(-6px); box-shadow: 0 32px 80px rgba(0,0,0,.28); }

    .offer-badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--grn); color: #fff;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
      padding: 5px 12px; border-radius: 980px; margin-bottom: 20px; align-self: flex-start;
    }
    .offer-type { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 8px; }
    /* Contraste amélioré pour la carte foncée */
    .offer-card.hero-offer .offer-type { color: rgba(255,255,255,.55); }

    .offer-name { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }
    .offer-card.hero-offer .offer-name { color: #fff; }

    .offer-desc { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 28px; }
    /* Contraste amélioré : 0.4 → 0.65 */
    .offer-card.hero-offer .offer-desc { color: rgba(255,255,255,.68); }

    .offer-price-block { margin-bottom: 6px; }
    .offer-price-num { font-size: 52px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
    .offer-card.hero-offer .offer-price-num { color: #fff; }
    .offer-price-curr { font-size: 22px; font-weight: 600; vertical-align: super; }
    .offer-price-unit { font-size: 16px; font-weight: 400; color: var(--ink-2); }
    /* Contraste amélioré */
    .offer-card.hero-offer .offer-price-unit { color: rgba(255,255,255,.55); }

    .offer-sub { font-size: 11px; color: var(--ink-3); margin-bottom: 28px; line-height: 1.5; }
    .offer-card.hero-offer .offer-sub { color: rgba(255,255,255,.38); }

    .offer-divider { height: 1px; background: var(--line); margin: 0 0 24px; }
    .offer-card.hero-offer .offer-divider { background: rgba(255,255,255,.10); }

    .offer-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
    .offer-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
    /* Contraste amélioré : 0.52 → 0.72 */
    .offer-card.hero-offer .offer-item { color: rgba(255,255,255,.72); }
    .offer-check {
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--grn-tint); display: flex; align-items: center; justify-content: center;
      font-size: 9px; color: var(--grn); flex-shrink: 0; font-weight: 900; margin-top: 1px;
    }
    .offer-card.hero-offer .offer-check { background: rgba(255,255,255,.10); color: var(--grn-mid); }
    .offer-check.minus { background: var(--red-tint); color: var(--red); font-size: 10px; }

    /* Spacer flex pour pousser l'option + CTA en bas (égalisation hauteur) */
    .offer-flex-grow { flex: 1; }

    /* Option armoire extérieure */
    .offer-option {
      border: 1.5px dashed var(--line);
      border-radius: 12px; padding: 16px 18px;
      margin-bottom: 24px;
      background: var(--bg-off);
    }
    .offer-card.hero-offer .offer-option {
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
    }
    .offer-option-title {
      font-size: 12px; font-weight: 600; color: var(--ink-2);
      margin-bottom: 6px;
    }
    .offer-card.hero-offer .offer-option-title { color: rgba(255,255,255,.75); }
    .offer-option-detail { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
    .offer-card.hero-offer .offer-option-detail { color: rgba(255,255,255,.42); }
    .offer-option-price { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 6px; }
    .offer-card.hero-offer .offer-option-price { color: rgba(255,255,255,.82); }

    .offer-cta {
      width: 100%; padding: 15px; border-radius: 12px;
      font-size: 15px; font-weight: 600; transition: all .2s;
      border: none; cursor: pointer; font-family: var(--font);
      margin-top: auto;
    }
    .offer-cta.cta-green  { background: var(--grn); color: #fff; }
    .offer-cta.cta-green:hover { background: #245924; }
    .offer-cta.cta-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
    .offer-cta.cta-outline:hover { background: var(--bg-off); }

    /* Formation strip */
    .training-strip {
      margin-top: 20px; background: var(--bg); border: 1.5px solid var(--line);
      border-radius: var(--r-card); padding: 28px 36px;
      display: grid; grid-template-columns: 1fr auto;
      gap: 32px; align-items: center;
    }
    .training-type { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 8px; }
    .training-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
    .training-desc { font-size: 14px; color: var(--ink-2); }
    .training-price { text-align: center; }
    .training-price-num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
    .training-price-unit { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
    .cta-red { background: var(--red); color: #fff; border-radius: 12px; padding: 12px 24px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; font-family: var(--font); white-space: nowrap; transition: background .2s; }
    .cta-red:hover { background: var(--red-dk); }

    .pricing-footer { text-align: center; margin-top: 32px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); align-items: center; }
    .pricing-footer span { display: flex; align-items: center; gap: 6px; }

    /* ══════════════════════════════════════════════════════════
       BLOC 4 — CE QUE NOUS FAISONS
    ══════════════════════════════════════════════════════════ */
    .services-row {
      display: grid; grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    }
    .service-item { padding: 44px 36px; border-right: 1px solid var(--line); transition: background .25s; }
    .service-item:last-child { border-right: none; }
    .service-item:hover { background: var(--bg-off); }
    .service-ico   { font-size: 28px; margin-bottom: 18px; display: block; }
    .service-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
    .service-body  { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
    .service-link  { margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--red); display: inline-flex; align-items: center; gap: 4px; transition: gap .2s; }
    .service-link:hover { gap: 8px; }
    .service-link::after { content: '›'; }

    /* ══════════════════════════════════════════════════════════
       BLOC 5 — PRÉSENTATION DU PRODUIT
       DA : blanc pur partout. Épuré. Pas de dégradé.
       Image sur fond #F5F5F7 avec ombre douce.
       Titre "FRED PA-1" une seule fois dans le header de section.
       Astérisque sur les valeurs chiffres : 150* → 200* → 200 J
    ══════════════════════════════════════════════════════════ */
    /* DA : blanc pur partout. L'image se détache uniquement par son drop-shadow.
       Les spec-rows alternent #fafafa / #fff pour créer du relief sans fond de section coloré. */
    .product-section { background: var(--bg); }

    .product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }

    /* ── PRODUIT : colonne image ──
       DA V8 : image éditoriale sur fond blanc pur.
       Pas de box, pas de fond coloré. L'image flotte.
       Badges et certifs en dessous, lisibles.
    */
    .product-img-col { position: sticky; top: 80px; }

    /* DA : l'image flotte sur le fond #F7F7F8 de la section.
       Pas de box, pas de padding-box visible.
       Ombre portée douce uniquement — l'image se détache proprement. */
    .product-img-wrap {
      position: relative;
      background: transparent;
      padding: 0;
      display: flex; flex-direction: column; align-items: center;
    }
    .product-img-wrap img {
      width: 100%; max-width: 480px; object-fit: cover;
      object-position: center top; /* cadrage sur le défibrillateur, pas la table */
      border-radius: 16px;
      /* Photo éditoriale sur fond blanc — pas d'ombre, immaculé */
      transition: transform .55s var(--ease);
    }
    .product-img-wrap:hover img { transform: scale(1.02) translateY(-8px); }

    /* Badges sous l'image — lisibles, pas masqués */
    .product-badges-row {
      display: flex; gap: 10px; flex-wrap: wrap;
      justify-content: center; margin-top: 20px;
    }
    .badge-france {
      display: inline-flex; align-items: center; gap: 6px;
      background: #fff; border: 1px solid var(--line);
      border-radius: 10px; padding: 8px 14px;
      font-size: 12px; font-weight: 600; color: var(--ink);
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    .badge-garantie {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--grn-tint); border: 1px solid rgba(43,107,43,.2);
      border-radius: 10px; padding: 8px 14px;
      font-size: 12px; font-weight: 600; color: var(--grn);
    }
    /* Ancien float-badge (inutilisé mais gardé pour compatibilité) */
    .float-badge { display: none; }

    /* Colonne specs */
    .product-specs-col { padding-top: 8px; }
    /* Titre du modèle : une fois seulement (supprimé du header de section) */
    .product-model { font-size: clamp(36px, 3.2vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; }
    .product-tagline { font-size: 17px; color: var(--ink-2); font-weight: 300; margin-bottom: 36px; }

    .specs-wrap {
      border-radius: 18px 18px 0 0; overflow: hidden;
      border: 1px solid var(--line); border-bottom: none; margin-bottom: 0;
    }
    .spec-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 13px 18px; gap: 12px; }
    .spec-row:nth-child(odd)  { background: #fafafa; }
    .spec-row:nth-child(even) { background: #fff; }
    .spec-k { font-size: 13px; color: var(--ink-2); flex-shrink: 0; min-width: 130px; }
    .spec-v { font-size: 13px; font-weight: 500; text-align: right; }
    .spec-v.red { color: var(--red); }
    .spec-v.grn { color: var(--grn); }

    /* Connectivité 4G avec distinction location/achat */
    .spec-connect { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
    .spec-connect-loc { font-size: 13px; font-weight: 600; color: var(--grn); }
    .spec-connect-buy { font-size: 11px; color: var(--ink-3); }

    /* Note astérisque — directement sous le tableau specs */
    .spec-note-block {
      background: var(--bg-off); border-radius: 0 0 18px 18px;
      padding: 12px 18px; font-size: 12px; color: var(--ink-3); line-height: 1.6;
      border: 1px solid var(--line); border-top: none;
      margin-bottom: 32px;
    }
    .spec-note-block strong { color: var(--ink-2); }

    /* Pastille France dans les specs */
    .fr-pill {
      display: inline-flex; align-items: center; gap: 4px;
      background: #f0f4ff; border: 1px solid #c8d8ff;
      border-radius: 6px; padding: 3px 9px;
      font-size: 12px; font-weight: 600; color: #1a3a8f;
    }

    /* Certifications */
    .cert-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; justify-content: center; }
    .cert-pill { font-size: 11px; color: var(--ink-3); background: var(--bg-off); border: 1px solid var(--line); padding: 5px 12px; border-radius: 8px; font-weight: 500; }

    /* ══════════════════════════════════════════════════════════
       BLOC 6 — QUI SOMMES-NOUS
       Florian = ingénieur UTC + ESSEC + copros/bâtiment
       Damien = pompier + formateur secourisme
       Photo "nous.jpg" dans documents/
    ══════════════════════════════════════════════════════════ */
    .about-section { background: var(--bg-off); }
    .about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .about-img-wrap {
      border-radius: 28px; aspect-ratio: 4/3;
      overflow: hidden; position: relative;
      background: var(--line);
      box-shadow: 0 24px 64px rgba(0,0,0,.10);
    }
    .about-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .about-img-placeholder { font-size: 80px; opacity: .12; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
    .about-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
    .founder-card {
      background: var(--bg); border: 1px solid var(--line);
      border-radius: 14px; padding: 16px 18px;
    }
    .founder-emoji { font-size: 22px; margin-bottom: 8px; }
    .founder-name  { font-size: 14px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 2px; }
    .founder-role  { font-size: 12px; color: var(--ink-3); line-height: 1.4; }

    .about-badge-row  { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
    .about-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--ink-2); }

    /* ══════════════════════════════════════════════════════════
       BLOC 7 — LE CHIFFRE QUI CHANGE TOUT
       DA : bleu nuit #1a3352 — identité forte, professionnelle
    ══════════════════════════════════════════════════════════ */
    .stats-section {
      background: var(--bg-slate);
      background-image:
        radial-gradient(ellipse at 15% 60%, rgba(232,50,26,.07) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(58,140,58,.07) 0%, transparent 55%);
      background-color: var(--bg-slate);
    }
    .key-stats-grid {
      display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
      border-top: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.06);
      margin-bottom: 48px;
    }
    .key-stat-sep { background: rgba(255,255,255,.06); }
    .key-stat     { padding: 40px 24px; text-align: center; }
    .key-stat-num { font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -.05em; line-height: 1; margin-bottom: 8px; }
    .key-stat-num.red   { color: var(--red); }
    .key-stat-num.grn   { color: var(--grn-mid); }
    .key-stat-num.white { color: #fff; }
    .key-stat-num.faded { color: rgba(255,255,255,.28); }
    .key-stat-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.28); margin-bottom: 6px; }
    .key-stat-desc  { font-size: 12px; color: rgba(255,255,255,.3); line-height: 1.5; max-width: 160px; margin: 0 auto; }

    .story-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
    .story-card {
      border-radius: 18px; padding: 32px;
      border: 1px solid rgba(255,255,255,.07);
    }
    .story-card.dark-card { background: rgba(255,255,255,.03); }
    .story-card.grn-card  { background: rgba(43,107,43,.09); border-color: rgba(58,140,58,.18); }
    .story-icon  { font-size: 22px; margin-bottom: 14px; }
    .story-title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 10px; }
    .story-body  { font-size: 14px; color: rgba(255,255,255,.42); line-height: 1.7; }

    /* ══════════════════════════════════════════════════════════
       BLOC 8 — ESPACE CLIENT
       DA V8 : fond blanc cassé #F5F5F7 — propre, lisible.
       Contraste naturel avec bloc 7 (bleu nuit) sans noir.
    ══════════════════════════════════════════════════════════ */
    .portal {
      background: var(--bg-off); /* #F5F5F7 — distinct et reposant */
    }

    .portal-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }
    .portal-feats  { display: flex; flex-direction: column; gap: 20px; }
    .pf      { display: flex; gap: 14px; align-items: flex-start; }
    .pf-ico  {
      width: 40px; height: 40px; border-radius: 10px;
      background: var(--bg); display: flex; align-items: center; justify-content: center;
      font-size: 17px; flex-shrink: 0;
      border: 1px solid var(--line);
      box-shadow: 0 2px 6px rgba(0,0,0,.05);
    }
    .pf-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
    .pf-desc  { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

    /* Pastilles "offre location uniquement" / "achat direct" */
    .plan-tag {
      display: inline-flex; align-items: center;
      font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
      padding: 2px 8px; border-radius: 5px; margin-left: 8px;
      vertical-align: middle;
    }
    .plan-tag.loc { background: var(--grn-tint); color: var(--grn); border: 1px solid rgba(43,107,43,.15); }
    .plan-tag.buy { background: var(--bg); color: var(--ink-3); border: 1px solid var(--line); }

    /* Dashboard mockup — adapté au fond clair */
    .dash-window {
      border-radius: 16px; overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,.10);
      border: 1px solid var(--line);
    }
    .dash-topbar {
      background: var(--bg-dark); padding: 10px 16px;
      display: flex; align-items: center; gap: 8px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .dash-dots { display: flex; gap: 5px; }
    .dash-dot  { width: 10px; height: 10px; border-radius: 50%; }
    .dash-title-bar { font-size: 11px; color: rgba(255,255,255,.4); margin-left: 8px; }
    .dash-window img { display: block; width: 100%; height: auto; }

    /* ══════════════════════════════════════════════════════════
       BLOC 9 — OBLIGATIONS LÉGALES
       Sanctions : civiles, pénales, responsabilité — terminologie juridique correcte
    ══════════════════════════════════════════════════════════ */
    .oblig-section { background: var(--bg-off); }
    .decree-banner { background: linear-gradient(135deg, var(--bg-dark) 0%, #16213e 100%); border-radius: 20px; padding: 28px 36px; display: flex; align-items: flex-start; gap: 20px; margin-bottom: 48px; position: relative; overflow: hidden; }
    .decree-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--red), #ff6b35, var(--red)); }
    .decree-badge-wrap { flex-shrink: 0; }
    .decree-badge { background: var(--red); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 5px 10px; border-radius: 6px; display: inline-block; margin-bottom: 8px; }
    .decree-date  { font-size: 11px; color: rgba(255,255,255,.35); text-align: center; }
    .decree-body  { flex: 1; }
    .decree-title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; }
    .decree-text  { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: 16px; }
    .decree-tags  { display: flex; gap: 8px; flex-wrap: wrap; }
    .decree-tag   { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 980px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.1); }
    .decree-tag.new { background: rgba(232,50,26,.15); color: #ff7a5c; border-color: rgba(232,50,26,.25); }

    .diag-title   { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
    .diag-sub     { font-size: 14px; color: var(--ink-2); margin-bottom: 20px; }
    .diag-tabs    { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
    .diag-tab     { padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink-2); cursor: pointer; transition: all .2s; font-family: var(--font); }
    .diag-tab:hover { border-color: var(--ink-2); color: var(--ink); }
    .diag-tab.active { border-color: transparent; background: var(--ink); color: #fff; }
    .diag-result  { display: none; border-radius: 16px; padding: 28px 32px; }
    .diag-result.show { display: block; }
    .diag-result.obligatoire { background: #fff; border: 2px solid var(--red); }
    .diag-result.nouveau-obligatoire { background: #fff8f6; border: 2px solid var(--red); }
    .diag-result.non-oblige { background: #fff; border: 2px solid var(--line); }
    .diag-verdict { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
    .verdict-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 5px 12px; border-radius: 6px; }
    .verdict-badge.red    { background: var(--red-tint); color: var(--red); }
    .verdict-badge.grey   { background: var(--bg-off); color: var(--ink-3); }
    .verdict-badge.orange { background: #FFF5E5; color: #B85C00; }
    .diag-verdict-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
    .diag-details { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-bottom: 16px; }
    .diag-law     { font-size: 11px; color: var(--ink-3); font-style: italic; }
    .diag-law strong { color: var(--ink-2); font-style: normal; }

    .install-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .install-item  { background: var(--bg); border-radius: 12px; padding: 20px; border: 1px solid var(--line); display: flex; gap: 14px; align-items: flex-start; }
    .install-ico   { width: 36px; height: 36px; border-radius: 9px; background: var(--grn-tint); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
    .install-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
    .install-body  { font-size: 12px; color: var(--ink-2); line-height: 1.5; }

    /* Sanctions — 3 cartes enrichies */
    .sanctions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .sanction-card  { background: var(--bg); border-radius: 14px; padding: 24px 22px; border: 1px solid var(--line); }
    .sanction-ico   { font-size: 22px; margin-bottom: 12px; }
    .sanction-num   { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 4px; }
    .sanction-num.amber { color: #B85C00; }
    .sanction-num.red   { color: var(--red); }
    .sanction-num.dark  { color: var(--ink); }
    .sanction-label { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
    .sanction-body  { font-size: 12px; color: var(--ink-2); line-height: 1.5; }

    .audit-box     { background: var(--grn-tint); border-left: 3px solid var(--grn); border-radius: 12px; padding: 24px 28px; display: flex; align-items: flex-start; gap: 20px; }
    .audit-box-icon { font-size: 28px; flex-shrink: 0; }
    .audit-box strong { color: var(--grn); display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
    .audit-box p    { color: var(--ink-2); font-size: 13px; margin-bottom: 14px; }
    .audit-cta      { display: inline-flex; align-items: center; gap: 6px; background: var(--grn); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: var(--font); transition: background .2s; }
    .audit-cta:hover { background: #245924; }

    /* ── CTA FINAL ── */
    .cta-section { text-align: center; background: var(--bg); }
    .cta-section .section-hed { margin-bottom: 12px; }
    .cta-sub  { font-size: 17px; color: var(--ink-2); letter-spacing: -.01em; margin-bottom: 40px; }
    .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* ── FOOTER ── */
    footer { background: var(--bg-off); border-top: 1px solid var(--line); padding: 56px 40px 32px; }
    .footer-w { max-width: var(--w); margin: 0 auto; }
    .footer-top { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
    .footer-logo { font-size: 15px; font-weight: 700; letter-spacing: -.03em; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .footer-pip  { width: 18px; height: 18px; border-radius: 4px; background: var(--red); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 8px; font-weight: 900; }
    .footer-tagline { font-size: 13px; color: var(--ink-3); line-height: 1.6; max-width: 280px; }
    .fc-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 14px; }
    .fc-links { list-style: none; }
    .fc-links li { margin-bottom: 9px; }
    .fc-links a  { font-size: 13px; color: var(--ink-2); transition: color .15s; }
    .fc-links a:hover { color: var(--ink); }
    .footer-bot  { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-3); }

    /* ── SCROLL REVEAL ── */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
    .reveal.in { opacity: 1; transform: none; }

    /* ── MODALE CONTACT ── */
    .modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
      align-items: center; justify-content: center; padding: 20px;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: var(--bg); border-radius: 20px; padding: 40px 36px 32px;
      max-width: 480px; width: 100%;
      box-shadow: 0 32px 80px rgba(0,0,0,.18), 0 0 0 1px var(--line);
      position: relative; animation: modal-in .3s var(--ease) both;
    }
    @keyframes modal-in {
      from { opacity: 0; transform: translateY(16px) scale(.97); }
      to   { opacity: 1; transform: none; }
    }
    .modal-close {
      position: absolute; top: 16px; right: 16px;
      background: var(--bg-off); border: none; border-radius: 50%;
      width: 30px; height: 30px; cursor: pointer; font-size: 16px;
      display: flex; align-items: center; justify-content: center;
      color: var(--ink-3); transition: background .15s;
    }
    .modal-close:hover { background: var(--line); }
    .modal-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--red); margin-bottom: 8px; }
    .modal-title { font-size: 22px; font-weight: 700; letter-spacing: -.04em; color: var(--ink); margin-bottom: 6px; }
    .modal-sub { font-size: 14px; color: var(--ink-2); margin-bottom: 24px; line-height: 1.5; }
    .modal-phone-block {
      display: flex; align-items: center; gap: 14px;
      background: var(--bg-off); border: 1px solid var(--line);
      border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; text-decoration: none;
      transition: background .15s;
    }
    .modal-phone-block:hover { background: #EBEBED; }
    .modal-phone-ico { font-size: 22px; }
    .modal-phone-label { font-size: 12px; color: var(--ink-3); font-weight: 500; }
    .modal-phone-num { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
    .modal-sep { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .modal-sep-line { flex: 1; height: 1px; background: var(--line); }
    .modal-sep-txt { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
    .modal-form label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; margin-top: 14px; text-transform: uppercase; letter-spacing: .04em; }
    .modal-form label:first-child { margin-top: 0; }
    .modal-form input, .modal-form textarea, .modal-form select {
      width: 100%; box-sizing: border-box;
      border: 1px solid var(--line); border-radius: 10px;
      padding: 11px 14px; font-size: 14px; font-family: inherit;
      background: var(--bg); color: var(--ink);
      transition: border-color .15s, box-shadow .15s; outline: none;
    }
    .modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus {
      border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(0,0,0,.06);
    }
    .modal-form textarea { min-height: 90px; resize: vertical; }
    .modal-submit {
      width: 100%; margin-top: 20px;
      background: var(--ink); color: #fff;
      border: none; border-radius: 12px; padding: 14px;
      font-size: 15px; font-weight: 600; cursor: pointer;
      transition: background .15s, transform .1s;
    }
    .modal-submit:hover { background: #333; }
    .modal-submit:active { transform: scale(.98); }
    .modal-success { display: none; text-align: center; padding: 20px 0; }
    .modal-success-ico { font-size: 48px; margin-bottom: 12px; }
    .modal-success-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
    .modal-success-msg { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

    /* ── RESPONSIVE TABLETTE ── */
    @media (max-width: 960px) {
      .stats-inner         { grid-template-columns: 1fr; }
      .stat-sep            { display: none; }
      .stat-item           { justify-content: flex-start; }
      .offers-grid-2       { grid-template-columns: 1fr; }
      .training-strip      { grid-template-columns: 1fr; }
      .services-row        { grid-template-columns: 1fr 1fr; }
      .service-item:nth-child(2) { border-right: none; }
      .product-layout      { grid-template-columns: 1fr; gap: 40px; }
      .product-img-col     { position: static; }
      .key-stats-grid      { grid-template-columns: 1fr 1fr; }
      .key-stat-sep        { display: none; }
      .story-cards         { grid-template-columns: 1fr; }
      .portal-layout       { grid-template-columns: 1fr; gap: 40px; }
      .about-layout        { grid-template-columns: 1fr; gap: 40px; }
      .about-founders      { grid-template-columns: 1fr; }
      .install-grid        { grid-template-columns: 1fr; }
      .sanctions-grid      { grid-template-columns: 1fr; }
      .footer-top          { grid-template-columns: 1fr 1fr; gap: 32px; }
      .nav-links           { display: none; }
      .hamburger           { display: flex; }
      .nav-btn             { display: none; }
    }

    /* ── RESPONSIVE MOBILE ── */
    @media (max-width: 640px) {
      /* Hero : plein écran mobile sans débord */
      .hero {
        min-height: calc(100svh - 52px); /* svh = small viewport height, évite le bug barre d'adresse mobile */
        padding: 60px 24px;
        background-size: cover;
        background-position: 0% 0%;
        background-image:
          linear-gradient(to bottom, rgba(245,245,247,0.92) 0%, rgba(245,245,247,0.92) 45%, rgba(245,245,247,0.40) 100%),
          url('../documents/image-defib-chatgpt-3.jpg');
      }
      .hero::after { display: block; } /* fondu bas actif sur mobile */
      h1.hero-hed { font-size: clamp(38px, 10vw, 56px); }
      .hero-lead  { font-size: 16px; margin-bottom: 32px; }
      .hero-actions { flex-direction: column; align-items: center; gap: 10px; }
      .btn-pill   { width: 100%; justify-content: center; max-width: 320px; }

      /* Sections */
      .section    { padding: 64px 20px; }
      .section.slim { padding: 48px 20px; }

      /* Services */
      .services-row { grid-template-columns: 1fr; }
      .service-item { border-right: none !important; }

      /* Offres */
      .offers-grid-2 { grid-template-columns: 1fr; }

      /* Stats clés */
      .key-stats-grid { grid-template-columns: 1fr; }

      /* Footer */
      .footer-top { grid-template-columns: 1fr; }
      footer { padding: 40px 20px 24px; }
      .footer-bot { flex-direction: column; gap: 8px; text-align: center; }

      /* Modal */
      .modal-box { padding: 28px 20px 24px; border-radius: 16px; }
    }

/* ═══ V9 — NAV 6 ENTRÉES ═══════════════════════════════════ */
.nav-links { gap: 26px; }

/* ═══ V9 — FAQ VISIBLE (récupérable par les moteurs et les IA) ═══ */
.faq-section   { background: var(--bg-off); }
.faq-wrap      { max-width: 860px; margin: 0 auto; }
.faq-item      { background: #fff; border-radius: 14px; margin-bottom: 12px; border: 1px solid rgba(0,0,0,.06); overflow: hidden; }
.faq-item[open]{ box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.faq-q         { list-style: none; cursor: pointer; padding: 20px 54px 20px 24px; font-size: 17px; font-weight: 600; color: var(--ink); position: relative; line-height: 1.4; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after  { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--red); transition: transform .2s; }
.faq-item[open] .faq-q::after { content: "−"; }
.faq-q:hover   { color: var(--red); }
.faq-a         { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.faq-a strong  { color: var(--ink); }
.faq-a a       { color: var(--red); text-decoration: underline; }
.faq-a ul      { margin: 10px 0 0 18px; }
.faq-a li      { margin-bottom: 6px; }
@media (max-width: 640px) {
  .faq-q { font-size: 15.5px; padding: 17px 46px 17px 18px; }
  .faq-a { font-size: 14.5px; padding: 0 18px 18px; }
}

/* ═══ V9 — PAGES INTÉRIEURES ═══════════════════════════════ */
.page-head       { padding: 64px 40px 48px; background: var(--bg-off); }
@media (max-width: 640px) { .page-head { padding: 44px 20px 34px; } }
nav.breadcrumb, .breadcrumb {
  position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; height: auto; padding: 0; display: block; z-index: auto;
  font-size: 13px; color: var(--ink-3); margin-bottom: 18px;
}
.breadcrumb a    { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--red); }
.page-h1         { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--ink); margin-bottom: 18px; }
.page-lead       { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 720px; }
.page-updated    { font-size: 13px; color: var(--ink-3); margin-top: 20px; }
.prose           { max-width: 780px; margin: 0; }
.prose h2        { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 52px 0 16px; line-height: 1.2; scroll-margin-top: 70px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3        { font-size: 20px; font-weight: 650; color: var(--ink); margin: 34px 0 12px; }
.prose p         { font-size: 17px; line-height: 1.72; color: var(--ink-2); margin-bottom: 16px; }
.prose strong    { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li        { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-bottom: 9px; }
.prose a         { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.answer-box      { background: var(--red-tint); border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 0 0 26px; }
.answer-box p    { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink); }
.note-box        { background: var(--bg-off); border-radius: 12px; padding: 20px 24px; margin: 26px 0; }
.note-box p      { margin: 0; font-size: 15.5px; line-height: 1.65; }
.table-wrap      { overflow-x: auto; margin: 24px 0 28px; -webkit-overflow-scrolling: touch; }
table.data       { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
table.data th    { text-align: left; padding: 13px 14px; background: var(--bg-off); color: var(--ink); font-weight: 650; font-size: 14px; border-bottom: 2px solid rgba(0,0,0,.08); }
table.data td    { padding: 13px 14px; border-bottom: 1px solid rgba(0,0,0,.06); color: var(--ink-2); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data td strong { color: var(--ink); }
.src-note        { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin-top: 8px; }
.cta-inline      { display: inline-block; background: var(--red); color: #fff; padding: 14px 30px; border-radius: 980px; font-size: 15px; font-weight: 550; margin-top: 10px; transition: background .2s; }
.cta-inline:hover{ background: var(--red-dk); color: #fff; }
.cta-inline.ghost{ background: transparent; color: var(--ink); border: 1px solid rgba(0,0,0,.18); }
.cta-inline.ghost:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.related         { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 14px; margin-top: 22px; }
.related a       { display: block; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 20px; transition: border-color .2s, transform .2s; }
.related a:hover { border-color: var(--red); transform: translateY(-2px); }
.related-t       { font-size: 16px; font-weight: 650; color: var(--ink); margin-bottom: 5px; }
.related-d       { font-size: 14px; color: var(--ink-2); line-height: 1.5; }


/* ═══ V9 — LOGO CLIQUABLE ══════════════════════════════════ */
a.logo, a.logo:hover, a.logo:visited { color: inherit; text-decoration: none; }
a.logo { cursor: pointer; }


/* ═══════════════════════════════════════════════════════════
   V10 — 08/10/2026 : pages Tarifs, Ce qui est inclus, CGV ;
   navigation alignée sur le parcours (offre → inclus → tarifs → devis)
   ═══════════════════════════════════════════════════════════ */
.nav-links { gap: 24px; }
.nav-links a.current { color: var(--ink); font-weight: 600; }
.modal-legal { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin-top: 10px; text-align: center; }
.offer-check.plus { background: var(--red-tint); color: var(--red); font-weight: 800; }
.offer-links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 22px; }
.offer-links a { font-size: 15px; font-weight: 600; color: var(--red); }
.offer-links a:hover { text-decoration: underline; }
.cell-sub { font-size: 13px; color: var(--ink-3); }
.about-founders.single { grid-template-columns: 1fr; }
.key-src { display: block; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.42); letter-spacing: .01em; }
.src-dark { font-size: 11.5px; color: rgba(255,255,255,.45); margin-top: 18px; line-height: 1.6; }
.src-dark a { color: rgba(255,255,255,.6); text-decoration: underline; }
.answer-box.wide { max-width: 980px; }
.faq-wrap.left { max-width: 780px; margin: 0; }

/* ── Bandeau d'appel à l'action (reprend le bloc rouge des imprimés) ── */
.cta-band { margin: 40px 0 10px; background: var(--red); color: #fff; border-radius: 16px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta-band-t { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.cta-band-d { font-size: 14.5px; opacity: .9; margin-top: 4px; }
.cta-band-btn { background: #fff; color: var(--red); font-weight: 650; font-size: 15px; padding: 13px 26px; border-radius: 980px; }
.cta-band-btn:hover { background: #FFF4F2; }

/* ── Page Tarifs ── */
.tarif-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 44px; }
.tarif-card { border-radius: 20px; padding: 30px 30px 26px; display: flex; flex-direction: column; }
.tarif-card.dark { background: var(--bg-slate); color: #fff; }
.tarif-card.light { background: #EEF3F9; border: 1px solid #d4deeb; }
.tarif-kicker { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: 6px; }
.tarif-title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; }
.tarif-card.light .tarif-title, .tarif-card.light .tarif-sub { color: var(--bg-slate); }
.tarif-block { margin-bottom: 14px; }
.tarif-block.sep { border-top: 1px solid rgba(255,255,255,.22); padding-top: 16px; }
.tarif-label { font-size: 14px; opacity: .85; margin-bottom: 4px; }
.tarif-price { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.tarif-price span { font-size: 15px; font-weight: 500; letter-spacing: 0; opacity: .8; }
.tarif-ttc { font-size: 14px; opacity: .75; margin-top: 2px; }
.tarif-note { font-size: 13px; line-height: 1.55; opacity: .85; margin: 6px 0 14px; }
.tarif-card.light .tarif-note, .tarif-card.light .tarif-label, .tarif-card.light .tarif-ttc { color: var(--ink-2); opacity: 1; }
.tarif-sub { font-size: 17px; font-weight: 700; margin: 8px 0 8px; }
.tarif-link { margin-top: auto; font-size: 14.5px; font-weight: 650; }
.tarif-card.dark .tarif-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tarif-card.light .tarif-link { color: var(--red); }
table.mini { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 2px; }
table.mini td { padding: 9px 4px; border-top: 1px solid rgba(26,51,82,.12); color: var(--ink-2); vertical-align: top; }
table.mini td.num { text-align: right; white-space: nowrap; color: var(--ink); }
table.mini td.ttc { color: var(--ink-3); }
.tarif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tarif-h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 750; letter-spacing: -.02em; color: var(--ink); margin: 30px 0 4px; }
.tarif-lead { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; margin-top: 6px; }
table.data.prices { min-width: 0; }
table.data.prices td.num, table.data.prices th:nth-child(n+2) { text-align: right; white-space: nowrap; }
table.data.prices td.ttc { color: var(--ink-3); }
table.data.prices.center th:nth-child(n+2), table.data.prices.center td:nth-child(n+2) { text-align: center; white-space: normal; }
table.data td.inc, table.data .inc { color: var(--grn); font-weight: 650; }
.src-note a { color: var(--red); text-decoration: underline; }
.prose .related a { text-decoration: none; color: inherit; }
.prose .related a:hover .related-t { color: var(--red); }

/* ── Page Ce qui est inclus ── */
.inc-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 14px; color: var(--ink-2); margin: 6px 0 18px; }
.inc-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.inc-legend-txt { color: var(--ink-3); font-size: 13px; }
.mk { display: inline-block; width: 22px; height: 22px; border-radius: 50%; position: relative; vertical-align: middle; flex-shrink: 0; }
.mk.yes { background: var(--grn-tint); }
.mk.yes::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--grn-mid); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.mk.no { background: var(--red-tint); }
.mk.no::before, .mk.no::after { content: ""; position: absolute; left: 10px; top: 5px; width: 2.4px; height: 12px; background: var(--red); border-radius: 2px; }
.mk.no::before { transform: rotate(45deg); } .mk.no::after { transform: rotate(-45deg); }
.mk-note { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; margin-top: 5px; }
.mk-plain { font-weight: 650; color: var(--ink); }
.inc-table-wrap { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; overflow: hidden; }
.inc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.inc-table thead th { background: var(--bg-slate); color: #fff; font-weight: 650; padding: 14px 14px; text-align: left; vertical-align: bottom; font-size: 14px; }
.inc-table thead th.c { text-align: center; width: 15%; }
.inc-table thead th.c0 { background: #7a2a20; }
.inc-table thead th.c2 { background: #1f5a2c; }
.th-sub { display: block; font-size: 11.5px; font-weight: 400; opacity: .75; margin-top: 3px; }
.inc-table tbody th { text-align: left; font-weight: 550; color: var(--ink); padding: 12px 14px; width: 26%; }
.lbl-sub { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.inc-table td { padding: 12px 10px; border-top: 1px solid rgba(0,0,0,.06); vertical-align: middle; }
.inc-table tbody th { border-top: 1px solid rgba(0,0,0,.06); }
.inc-table td.c { text-align: center; }
.inc-table td.c0 { background: #FDF3F1; }
.inc-table td.c2 { background: #EFF7EF; }
.inc-table td.impl { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.inc-table tbody tr:hover th, .inc-table tbody tr:hover td { background: #FAFAFB; }
.inc-table tbody tr:hover td.c0 { background: #FBEAE6; }
.inc-table tbody tr:hover td.c2 { background: #E5F2E5; }
.inc-notes { margin-top: 20px; max-width: 900px; }
.inc-notes p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 8px; }
.inc-notes a { color: var(--red); text-decoration: underline; }
.fx { display: none; }
.fx-tabs { display: flex; gap: 6px; background: var(--bg-off); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.fx-tab { flex: 1; background: transparent; border-radius: 9px; padding: 10px 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.fx-tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.fx-panel { display: none; }
.fx-panel.active { display: block; }
.fx-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 14px 0 6px; }
.fx-list { list-style: none; border: 1px solid rgba(0,0,0,.07); border-radius: 14px; overflow: hidden; }
.fx-list li { padding: 12px 14px 12px 46px; border-top: 1px solid rgba(0,0,0,.06); position: relative; font-size: 15px; color: var(--ink); line-height: 1.4; }
.fx-list li:first-child { border-top: none; }
.fx-list li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; }
.fx-list li.yes::before { background: var(--grn-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%233A8C3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.fx-list li.no::before { background: var(--red-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23E8321A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.fx-list li.plain { padding-left: 14px; display: flex; justify-content: space-between; gap: 10px; }
.fx-list li.plain::before { display: none; }
.li-n { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.fx-list li.plain .li-n { margin: 0; font-weight: 650; color: var(--ink); font-size: 15px; }

/* ── Page CGV ── */
.cgv-layout { display: grid; grid-template-columns: 290px 1fr; gap: 48px; align-items: start; }
.cgv-aside { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; }
.cgv-id { background: var(--bg-off); border-radius: 14px; padding: 18px 18px 8px; }
.cgv-id p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-bottom: 10px; }
.cgv-id a { color: var(--red); }
.cgv-id-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 8px; }
.cgv-toc ol { list-style: none; font-size: 13px; line-height: 1.5; }
.cgv-toc li { margin-bottom: 6px; }
.cgv-toc a { color: var(--ink-2); }
.cgv-toc a:hover { color: var(--red); }
.cgv-print { font-size: 13px; padding: 10px 18px; margin-top: 0; }
.cgv-text .cgv-art h2 { font-size: 21px; margin: 40px 0 12px; scroll-margin-top: 70px; }
.cgv-text .cgv-art p { font-size: 15.5px; line-height: 1.7; }

@media (max-width: 960px) {
  .tarif-cards, .tarif-grid { grid-template-columns: 1fr; }
  .cgv-layout { grid-template-columns: 1fr; gap: 24px; }
  .cgv-aside { position: static; }
  .cgv-toc { display: none; }
}
@media (max-width: 640px) {
  .tarif-card { padding: 24px 20px 20px; }
  .tarif-price { font-size: 34px; }
  .cta-band { padding: 22px 20px; }
  .cta-band-btn { width: 100%; }
  .offer-links { flex-direction: column; align-items: center; gap: 12px; }
}
@media print {
  nav, .mobile-menu, footer, .modal-overlay, .cgv-aside .cgv-toc, .cgv-print, .page-head .breadcrumb { display: none !important; }
  .cgv-layout { grid-template-columns: 1fr; }
  .section, .page-head { padding: 12px 0; }
}

/* DA : une seule couleur d'action (rouge), comme sur les imprimés */
.offer-cta.cta-accent { background: var(--red); color: #fff; }
.offer-cta.cta-accent:hover { background: var(--red-dk); }

/* V10.1 — comparaison en un coup d'œil */
.mk { width: 26px; height: 26px; }
.mk.yes::after { left: 9px; top: 5px; width: 7px; height: 12px; }
.mk.no::before, .mk.no::after { left: 12px; top: 6px; height: 14px; }
.mk.yes { background: #D9EFD9; } .mk.no { background: #FBDCD6; }
.inc-table .score-row th, .inc-table .score-row td { background: #fff; border-top: none; padding-top: 16px; padding-bottom: 16px; }
.inc-table .score-row th { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.score-n { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.score-d { font-size: 14px; color: var(--ink-3); }
.score-l { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
td.c0.score .score-n { color: var(--red); } td.c1.score .score-n { color: var(--ink); } td.c2.score .score-n { color: var(--grn-mid); }
@media (max-width: 760px) {
  .inc-table-wrap { overflow-x: auto; }
  .inc-table { font-size: 13px; }
  .inc-table th.impl, .inc-table td.impl { display: none; }
  .inc-table tbody th { width: auto; padding: 10px 8px; font-size: 13px; }
  .inc-table thead th { padding: 10px 6px; font-size: 12px; }
  .inc-table thead th.c { width: 23%; }
  .inc-table td { padding: 10px 4px; }
  .th-sub { display: none; }
  .mk-note { font-size: 10.5px; }
  .score-n { font-size: 22px; }
}

/* V10.1 — contrat de maintenance : une option qu'on a envie d'ajouter */
.offer-addon { margin-top: 18px; border: 1.5px solid #9fd2a0; background: linear-gradient(180deg, #F1FAF1, #E6F4E6); border-radius: 14px; padding: 16px 18px; }
.offer-addon-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--grn-mid); border-radius: 980px; padding: 3px 9px; margin-bottom: 8px; }
.offer-addon-title { font-size: 16px; font-weight: 750; color: var(--grn); }
.offer-addon-price { font-size: 20px; font-weight: 800; color: var(--ink); margin: 4px 0 6px; letter-spacing: -.02em; }
.offer-addon-price span { font-size: 12.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-left: 6px; }
.offer-addon-detail { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* V10.1 — pied de page à 5 colonnes (ajout « Près de chez vous ») */
.footer-top { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 1060px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } .footer-top > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* V10.1 — mobile : le tableau tient dans l'écran, lecture en un coup d'œil */
@media (max-width: 760px) {
  .inc-table { table-layout: fixed; width: 100%; min-width: 0; }
  .inc-table tbody th, .inc-table thead th.lbl { width: 34%; }
  .inc-table thead th.c { width: 22%; font-size: 11px; line-height: 1.25; hyphens: auto; }
  .inc-table .mk-note { display: none; }
  .inc-table .score-row th { font-size: 10px; }
  .score-d { font-size: 11px; }
  .score-l { font-size: 9px; }
  .inc-table .mk { width: 22px; height: 22px; }
}
.offer-mini td:nth-child(2){white-space:nowrap}
@media (max-width:560px){.offer-mini td:nth-child(2){white-space:normal}}

/* ═══════════════════════════════════════════════════════════
   V11 — 09/10/2026 — refonte visuelle « registre Apple »
   Principes : bandes pleine largeur en alternance blanc / gris clair / noir,
   titres courts et centrés, détail après ; aucune émoticône, aucune bordure
   de carte : l'espace et les aplats séparent les blocs.
   HT toujours en encre et en gras, TTC toujours en gris et en maigre.
   ═══════════════════════════════════════════════════════════ */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --x-w: 1080px;
  --x-gray: #F5F5F7;
  --x-black: #000000;
  --x-link: #C72D16;
  --x-r: 28px;
  --x-r-sm: 18px;
}
body { font-family: var(--font); letter-spacing: -.003em; }

/* ── Bandes ───────────────────────────────────────────────── */
.x-band { padding: 110px 24px; }
.x-band.gray { background: var(--x-gray); }
.x-band.black { background: var(--x-black); color: #F5F5F7; }
.x-band.tight { padding-top: 72px; padding-bottom: 72px; }
.x-band.flush-top { padding-top: 0; }
.x-w { max-width: var(--x-w); margin: 0 auto; }
.x-w.narrow { max-width: 760px; }
.x-center { text-align: center; }

/* ── Typo ─────────────────────────────────────────────────── */
.x-kicker { font-size: 17px; font-weight: 600; color: var(--red); margin-bottom: 10px; letter-spacing: -.01em; }
.x-band.black .x-kicker { color: #FF6A55; }
.x-hed { font-size: clamp(36px, 5.6vw, 64px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.x-hed.md { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; }
.x-sub { font-size: clamp(19px, 2.1vw, 24px); font-weight: 400; color: var(--ink-2); line-height: 1.38; letter-spacing: -.012em; margin-top: 14px; text-wrap: balance; }
.x-band.black .x-sub { color: #A1A1A6; }
.x-body { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.x-fine { font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.x-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.x-band.black .x-fine { color: #86868B; }

/* Liens texte « › » façon Apple */
.x-links { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.x-link { font-size: 17px; color: var(--x-link); font-weight: 400; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font); }
.x-link::after { content: " ›"; }
.x-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.x-band.black .x-link { color: #FF6A55; }
.x-btn { display: inline-block; background: var(--red); color: #fff; font-size: 17px; font-weight: 500; padding: 12px 24px; border-radius: 980px; border: 0; cursor: pointer; font-family: var(--font); transition: background .2s; }
.x-btn:hover { background: var(--red-dk); color: #fff; }
.x-btn.dark { background: var(--ink); }
.x-btn.dark:hover { background: #333; }

/* ── Prix : HT en avant, TTC en retrait ────────────────────── */
.x-price { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.x-ht { font-size: clamp(44px, 5vw, 56px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.x-ht small { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-left: 4px; color: var(--ink); }
.x-ttc { font-size: 15px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ht-b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ttc-l { font-weight: 400; color: var(--ink-3); white-space: nowrap; }

/* ── Hero ─────────────────────────────────────────────────── */
.x-hero { padding: 72px 24px 0; text-align: center; background: #fff; overflow: hidden; }
.x-hero .x-hed { font-size: clamp(44px, 8vw, 88px); letter-spacing: -.045em; }
.x-hero .x-hed em { font-style: normal; color: var(--red); }
.x-hero-img { max-width: 1240px; margin: 48px auto 0; border-radius: var(--x-r) var(--x-r) 0 0; overflow: hidden; aspect-ratio: 16 / 8; }
.x-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* ── Chiffre clé ──────────────────────────────────────────── */
.x-proof { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 28px; max-width: 760px; margin: 56px auto 0; }
.x-proof-col { text-align: center; }
.x-proof-n { font-size: clamp(64px, 11vw, 132px); font-weight: 700; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.x-proof-n.low { color: #C7C7CC; }
.x-proof-n.high { color: var(--grn-mid); }
.x-proof-l { font-size: 15px; color: var(--ink-2); margin-top: 14px; line-height: 1.4; }
.x-proof-arrow { font-size: 40px; color: var(--ink-3); padding-bottom: 46px; font-weight: 300; }
.x-proof-x { margin-top: 44px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.x-proof-x strong { color: var(--grn-mid); }
.x-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 72px; border-top: 1px solid var(--line); }
.x-fact { padding: 28px 24px 0; text-align: center; }
.x-fact + .x-fact { border-left: 1px solid var(--line); }
.x-fact-n { font-size: 34px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.x-fact-l { font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.x-fact-s { font-size: 11px; color: var(--ink-3); margin-top: 8px; }

/* ── Offres : deux colonnes jumelles ──────────────────────── */
.x-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; align-items: stretch; }
.x-offer { background: #fff; border-radius: var(--x-r); padding: 52px 40px 44px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.x-band:not(.gray) .x-offer { background: var(--x-gray); }
.x-offer-k { font-size: 13px; color: var(--ink-3); letter-spacing: .01em; }
.x-offer-t { font-size: 40px; font-weight: 700; letter-spacing: -.035em; margin-top: 6px; }
.x-offer-tag { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin-top: 6px; }
.x-offer-d { font-size: 16px; color: var(--ink-2); line-height: 1.5; margin-top: 12px; max-width: 360px; min-height: 72px; }
.x-offer .x-price { margin: 30px 0 6px; padding: 26px 0; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.x-offer-cond { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.x-list { list-style: none; width: 100%; max-width: 340px; margin: 26px auto 0; text-align: left; }
.x-list li { font-size: 15px; line-height: 1.45; padding: 11px 0 11px 26px; position: relative; color: var(--ink); }
.x-list li + li { border-top: 1px solid var(--line); }
.x-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 10px; height: 6px; border-left: 2px solid var(--grn-mid); border-bottom: 2px solid var(--grn-mid); transform: rotate(-45deg); }
.x-list li.you { color: var(--ink-2); }
.x-list li.you::before { border: 0; width: 8px; height: 8px; border-radius: 50%; background: #C7C7CC; transform: none; top: 18px; left: 3px; }
.x-addon { width: 100%; margin-top: 22px; background: #EEF6EE; border-radius: var(--x-r-sm); padding: 18px 20px; text-align: center; }
.x-addon-t { font-size: 15px; font-weight: 600; color: var(--grn); }
.x-addon-t b { font-size: 17px; }
.x-addon-p { margin-top: 4px; }
.x-addon-p .ht-b { color: var(--grn); }
.x-addon-d { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.x-offer-cta { margin-top: auto; padding-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.x-offer-opt { font-size: 13px; color: var(--ink-3); }

/* ── Tuiles (processus, formations) ───────────────────────── */
.x-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.x-step { background: var(--x-gray); border-radius: var(--x-r); overflow: hidden; display: flex; flex-direction: column; }
.x-band.gray .x-step { background: #fff; }
.x-step-img { aspect-ratio: 4 / 3; overflow: hidden; background: #ECECEF; display: flex; align-items: center; justify-content: center; }
.x-step-img img { width: 100%; height: 100%; object-fit: cover; }
.x-step-img svg { width: 46%; height: auto; }
.x-step-b { padding: 22px 24px 28px; }
.x-step-n { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.x-step-t { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.x-step-d { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: 8px; }

/* ── Produit ──────────────────────────────────────────────── */
.x-product-img { width: min(360px, 70%); margin: 40px auto 0; }
.x-specs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
.x-spec { text-align: center; padding: 0 16px; }
.x-spec + .x-spec { border-left: 1px solid var(--line); }
.x-spec-n { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.x-spec-n small { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.x-spec-l { font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }

/* ── Formations : un panneau, deux formats ────────────────── */
.x-duo { background: var(--x-gray); border-radius: 36px; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.x-band.gray .x-duo { background: #fff; }
.x-duo-item { background: #fff; border-radius: var(--x-r); overflow: hidden; display: flex; flex-direction: column; }
.x-band.gray .x-duo-item { background: var(--x-gray); }
.x-duo-img { aspect-ratio: 16 / 10; overflow: hidden; }
.x-duo-img img { width: 100%; height: 100%; object-fit: cover; }
.x-duo-b { padding: 28px 32px 34px; display: flex; flex-direction: column; flex: 1; }
.x-duo-k { font-size: 13px; color: var(--ink-3); }
.x-duo-t { font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-top: 4px; line-height: 1.15; }
.x-duo-d { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin-top: 10px; }
.x-duo-p { margin-top: auto; padding-top: 22px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.x-duo-p .ht-b { font-size: 26px; letter-spacing: -.02em; }
.x-duo-p .ttc-l { font-size: 14px; }

/* ── Split texte / image ──────────────────────────────────── */
.x-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.x-split-img { border-radius: var(--x-r); overflow: hidden; }
.x-split-img img { width: 100%; height: auto; }
.x-feats { list-style: none; margin-top: 32px; }
.x-feats li { padding: 18px 0; border-top: 1px solid var(--line); }
.x-feats li:last-child { border-bottom: 1px solid var(--line); }
.x-feat-t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.x-feat-t span { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 8px; }
.x-feat-d { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }

/* ── Bande noire : chiffres ───────────────────────────────── */
.x-dstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 64px; }
.x-dstat { text-align: center; padding: 0 20px; }
.x-dstat + .x-dstat { border-left: 1px solid #333336; }
.x-dstat-n { font-size: clamp(48px, 6vw, 72px); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: #F5F5F7; }
.x-dstat-n.r { color: #FF6A55; }
.x-dstat-n.g { color: #5BC25B; }
.x-dstat-l { font-size: 16px; color: #F5F5F7; margin-top: 14px; font-weight: 600; letter-spacing: -.01em; }
.x-dstat-d { font-size: 14px; color: #A1A1A6; margin-top: 6px; line-height: 1.45; }
.x-dstat-s { font-size: 11px; color: #6E6E73; margin-top: 10px; }

/* ── Qui sommes-nous ──────────────────────────────────────── */
.x-about-name { font-size: 15px; color: var(--ink-3); margin-top: 14px; }

/* ── CTA final ────────────────────────────────────────────── */
.x-cta .x-links { margin-top: 28px; align-items: center; }

/* ── Obligations : on retire les émoticônes et les bordures épaisses ── */
.oblig-section { background: var(--x-gray); }
.diag-tab { border: 0; background: #fff; border-radius: 980px; padding: 9px 18px; color: var(--ink); }
.diag-tab.active { background: var(--ink); color: #fff; }
.diag-result { border: 0 !important; border-radius: var(--x-r-sm); background: #fff; }
.decree-banner { border-radius: var(--x-r); }
.decree-tag { background: rgba(255,255,255,.1); border: 0; }
.sanction-card { border: 0; background: #fff; border-radius: var(--x-r-sm); }
.audit-box { border: 0; border-radius: var(--x-r); background: #fff; }
.faq-item { border: 0; background: var(--x-gray); }
.faq-section { background: #fff; }

/* ── Pages intérieures : chapeaux centrés, plus d'air ──────── */
.page-head { text-align: center; padding-top: 72px; padding-bottom: 56px; background: #fff; border-bottom: 0; }
.page-head .inner { display: flex; flex-direction: column; align-items: center; }
.page-head .breadcrumb { justify-content: center; }
.page-h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; max-width: 900px; }
.page-lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.45; max-width: 720px; margin-left: auto; margin-right: auto; color: var(--ink-2); text-wrap: balance; }
.page-updated { margin-left: auto; margin-right: auto; }
.page-hero-img { max-width: 1080px; margin: 0 auto 0; padding: 0 24px; }
.page-hero-img img { width: 100%; border-radius: var(--x-r); aspect-ratio: 16 / 7; object-fit: cover; }

/* Encadrés génériques : aplats, pas de bordure */
.related a { border: 0 !important; background: var(--x-gray); border-radius: var(--x-r-sm); }
.related a:hover { background: #EDEDF0; }
.note-box { border: 0; border-radius: var(--x-r-sm); background: var(--x-gray); }
.cta-band { background: var(--ink); border-radius: var(--x-r); }
.cta-band-btn { background: #fff; color: var(--ink); }
.prose a.cta-inline, .prose a.cta-inline:hover { color: #fff; text-decoration: none; }
.prose a.cta-inline.ghost, .prose a.cta-inline.ghost:hover { color: var(--ink); }
.inc-table-wrap { border: 0; }

/* Tableaux de prix : TTC en retrait */
table.data.prices th:last-child, table.mini td.ttc { color: var(--ink-3); font-weight: 400; }
table.data.prices td.ttc { font-weight: 400; }

/* ── Tarifs : bandes de couleur par famille ───────────────── */
.x-tsec-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin-bottom: 36px; }
.x-tsec-head .x-hed { text-align: left; }
.x-tsec-head .x-sub { margin-top: 10px; }
.x-tsec-img { width: 220px; }
.x-tsec-img img { width: 100%; height: auto; border-radius: var(--x-r-sm); }
.x-tsec-img.cut img { border-radius: 0; }
.x-tcard { background: #fff; border-radius: var(--x-r); padding: 8px 32px; }
.x-band:not(.gray) .x-tcard { background: var(--x-gray); }
.x-tcard table.data { margin: 0; }
.x-tcard table.data th, .x-tcard table.data td { background: transparent; }
.x-tcard + .x-fine { margin-top: 14px; }
.x-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── Illustrations « trois gestes » ───────────────────────── */
.x-gestes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.x-geste { background: var(--x-gray); border-radius: var(--x-r); padding: 36px 28px 32px; text-align: center; }
.x-geste svg { width: 88px; height: 88px; }
.x-geste-t { font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin-top: 16px; }
.x-geste-d { font-size: 15px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }

/* Apparition douce au défilement */
.reveal { transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .x-steps { grid-template-columns: 1fr 1fr; }
  .x-split { grid-template-columns: 1fr; gap: 40px; }
  .x-specs { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .x-spec:nth-child(3) { border-left: 0; }
}
@media (max-width: 760px) {
  .x-band { padding: 80px 18px; }
  .x-offers, .x-duo, .x-tgrid, .x-gestes { grid-template-columns: 1fr; }
  .x-duo { padding: 12px; border-radius: 30px; }
  .x-offer { padding: 44px 24px 36px; }
  .x-offer-d { min-height: 0; }
  .x-facts, .x-dstats { grid-template-columns: 1fr; }
  .x-fact + .x-fact, .x-dstat + .x-dstat { border-left: 0; border-top: 1px solid var(--line); padding-top: 28px; margin-top: 28px; }
  .x-dstat + .x-dstat { border-top-color: #333336; }
  .x-proof { grid-template-columns: 1fr; gap: 8px; }
  .x-proof-arrow { transform: rotate(90deg); padding: 0; }
  .x-hero-img { aspect-ratio: 4 / 3; border-radius: 22px 22px 0 0; }
  .x-tsec-head { grid-template-columns: 1fr; }
  .x-tsec-img { width: 160px; }
  .x-tcard { padding: 4px 16px; }
  .page-hero-img img { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  .x-steps { grid-template-columns: 1fr; }
  .x-specs { grid-template-columns: 1fr 1fr; }
  .x-links { gap: 18px; }
}
.sanction-ico{display:none}
.x-product-img { width: min(300px, 62%); }
.install-ico, .audit-box-icon { display: none; }
.install-item { border: 0; background: #fff; border-radius: var(--x-r-sm); }
.audit-cta { background: var(--ink); border-radius: 980px; padding: 11px 22px; }
.audit-cta:hover { background: #333; }
.oblig-section .diag-title { font-size: 21px; letter-spacing: -.02em; }
.verdict-badge { border-radius: 980px; }
.x-band.gray .x-geste { background: #fff; }
.prose + .x-duo, .x-duo + .x-fine + .prose { margin-top: 32px; }
.section .x-duo { margin-top: 24px; }
.x-tcard { overflow-x: auto; }
table.data.prices.center th:last-child { color: inherit; }
.related { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
@media (max-width: 760px) {
  .x-product-img { width: 44%; }
  .x-step-img { aspect-ratio: 16 / 9; }
}
.x-tgrid > div, .x-w > .x-tcard { min-width: 0; max-width: 100%; }
.modal-success-ico{color:var(--grn-mid);font-weight:700}


/* ═══════════════════════════════════════════════════════════
   V12 — 11/10/2026 : refonte UX de l'accueil, accessibilité,
   comparatif mobile, page Obligations
   ═══════════════════════════════════════════════════════════ */

/* Accessibilité */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 15px; }
.skip-link:focus { left: 12px; }
:focus-visible { outline: 3px solid #0A66D8; outline-offset: 3px; border-radius: 6px; }
.x-btn:focus-visible, .y-btn:focus-visible, .nav-btn:focus-visible { outline-offset: 3px; border-radius: 980px; }
.reveal { opacity: 1 !important; transform: none !important; } /* plus de sections vides au chargement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.x-fine { font-size: 13px; color: var(--ink-3); }
.x-fact-s, .x-dstat-s { font-size: 12px; }
.x-link { padding: 10px 2px; min-height: 44px; }
.x-band.black .x-fine, .x-dstat-s { color: #A1A1A6; }

/* En-tête : téléphone + devis toujours accessibles */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-tel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink); padding: 7px 10px; border-radius: 980px; }
.nav-tel svg { width: 15px; height: 15px; fill: currentColor; }
.nav-tel:hover { background: var(--bg-off); }
.nav-links a.current { color: var(--ink); font-weight: 600; }
@media (max-width: 1100px) { .nav-links { gap: 22px; } }
@media (max-width: 960px) {
  nav { padding: 0 16px; }
  .nav-btn { display: inline-flex !important; align-items: center; min-height: 40px; padding: 8px 14px; }
  .nav-tel { width: 40px; height: 40px; justify-content: center; padding: 0; background: var(--bg-off); }
  .nav-tel span { display: none; }
  .hamburger { width: 44px; height: 44px; }
  .nav-actions { gap: 6px; }
}
@media (max-width: 400px) {
  .logo { font-size: 14px; gap: 7px; }
  .nav-btn { font-size: 0; padding: 8px 14px; }
  .nav-btn::after { content: "Devis"; font-size: 14px; }
}
.mobile-menu a.red { color: var(--red); font-weight: 600; }

/* Boutons pilule */
.y-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border-radius: 980px; background: var(--red); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.01em; border: 2px solid var(--red); cursor: pointer; font-family: var(--font); transition: background .2s, color .2s, border-color .2s; }
.y-btn:hover { background: var(--red-dk); border-color: var(--red-dk); color: #fff; }
.y-btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.y-btn.ghost:hover { background: var(--ink); color: #fff; }

/* 1. Premier écran */
.y-hero { padding: 56px 24px 40px; background: #fff; }
.y-hero-w { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.y-hero-k { font-size: 15px; font-weight: 600; color: var(--red); line-height: 1.45; letter-spacing: -.005em; }
.y-hero-h { font-size: clamp(36px, 4.4vw, 60px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin-top: 14px; text-wrap: balance; }
.y-hero-h span { display: block; color: var(--ink-2); }
.y-hero-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); margin-top: 20px; max-width: 34em; }
.y-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.y-hero-cta.y-center { justify-content: center; }
.y-hero-tel { font-size: 15px; color: var(--ink-2); margin-top: 16px; }
.y-hero-tel a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.y-hero-img { position: relative; margin: 0; border-radius: var(--x-r); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--x-gray); }
.y-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
.y-fig { position: relative; margin: 0; }
.y-hero-img figcaption, .y-fig figcaption { position: absolute; right: 10px; bottom: 10px; font-size: 12px; color: #fff; background: rgba(0,0,0,.55); padding: 3px 9px; border-radius: 980px; }
.y-reassure { list-style: none; max-width: 1200px; margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.y-reassure li { font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.y-reassure li::before { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--grn-mid); border-bottom: 2px solid var(--grn-mid); transform: rotate(-45deg) translateY(-2px); }

/* 2. Offres */
.y-offers-band { padding-top: 80px; }
.x-offer-d { min-height: 0; font-size: 17px; }
.x-offer-k { font-size: 14px; color: var(--ink-2); }
.x-list li { font-size: 16px; }
.x-ttc { color: var(--ink-2); }
.y-engage { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--x-gray); border-radius: 980px; padding: 5px 14px; }
.x-band:not(.gray) .y-engage { background: #fff; }
.y-terms { width: 100%; max-width: 380px; margin: 20px auto 0; text-align: left; font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--x-gray); border-radius: 14px; padding: 12px 16px; }
.y-terms strong { color: var(--ink); }
.x-addon-d { font-size: 14px; }
.x-offer-opt { font-size: 14px; color: var(--ink-2); }
.y-fine-c { max-width: 680px; margin: 14px auto 0; }

/* Sections texte */
.y-lead { margin-top: 18px; font-size: 18px; }
.y-mt { margin-top: 20px; } .y-mt-s { margin-top: 12px; }
.x-body { font-size: 17px; }
.y-h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.y-points { list-style: none; margin-top: 22px; }
.y-points li { padding: 14px 0 14px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.y-points li:last-child { border-bottom: 1px solid var(--line); }
.y-points b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; margin-bottom: 2px; }

/* Trois blocs */
.y-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.y-tri-c { background: #fff; border-radius: var(--x-r); padding: 30px 28px 32px; }
.x-band:not(.gray) .y-tri-c { background: var(--x-gray); }
.y-tri-c h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; line-height: 1.2; }
.y-tri-c p { font-size: 16px; color: var(--ink-2); line-height: 1.55; margin-top: 10px; }
.y-tag { display: inline-block; font-size: 13px; font-weight: 600; color: var(--grn); background: var(--grn-tint); padding: 4px 11px; border-radius: 980px; }
.y-tag.red { color: var(--red-dk); background: var(--red-tint); }
.x-feat-t span { color: var(--ink-2); font-size: 13px; }
.x-feat-d { font-size: 16px; }
.y-split-top { margin-top: 64px; align-items: start; }
.y-durable { background: #fff; border-radius: var(--x-r); padding: 34px 32px; }
.y-durable .y-h3 { margin-bottom: 12px; }

/* Méthode */
.y-steps-h { margin-top: 72px; }
.y-steps { list-style: none; margin-top: 28px; }
.y-steps .x-step-t { font-size: 20px; }
.y-steps .x-step-d { font-size: 16px; }

/* Formations */
.y-claim { display: inline-block; margin-top: 24px; font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; color: var(--ink); background: var(--red-tint); border-radius: 980px; padding: 10px 22px; }
.x-duo { margin-top: 40px; text-align: left; }
.x-duo-b { padding: 30px 32px 32px; }
.x-duo-k { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.x-duo-d { font-size: 16px; }
.y-att { margin-top: 8px; color: var(--ink); font-size: 15px; }
.y-why { max-width: 720px; margin: 28px auto 10px; }
.y-proof { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--line); }
.y-proof-c { padding: 26px 20px 0; }
.y-proof-c + .y-proof-c { border-left: 1px solid var(--line); }
.y-proof-n { font-size: 32px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.y-proof-l { font-size: 15px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.y-proof-s { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.y-proof-s a { color: inherit; text-decoration: underline; }

/* Page Obligations */
.oblig-h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.025em; margin-bottom: 16px; }
.oblig-p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin-bottom: 18px; max-width: 760px; }
.oblig-p a { color: var(--red); }
.diag-tab { min-height: 44px; }
.diag-details { font-size: 16px; line-height: 1.6; }
.install-title { font-size: 16px; }
.install-body { font-size: 15px; line-height: 1.55; }
.decree-text { font-size: 15px; }

/* Modale : états fidèles */
.modal-form .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.modal-form input, .modal-form textarea, .modal-form select { font-size: 16px; min-height: 44px; }
.modal-error { margin-top: 12px; font-size: 14px; color: var(--red-dk); background: var(--red-tint); padding: 8px 12px; border-radius: 10px; }
.modal-fail { display: none; text-align: center; padding: 12px 0 0; }
.modal-fail .modal-success-msg { margin-bottom: 18px; }
.modal-submit.modal-alt { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.modal-alt-link { display: block; margin: 14px auto 0; font-size: 15px; color: var(--red-dk); background: none; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.modal-submit[disabled] { opacity: .6; cursor: wait; }
.modal-legal a { color: inherit; text-decoration: underline; }
.modal-sep-txt, .modal-phone-label { color: var(--ink-2); }

/* Ce qui est inclus : couleurs limitées, résumé, lecture mobile */
.inc-table thead th, .inc-table thead th.c0, .inc-table thead th.c2 { background: var(--ink); }
.inc-table td.c0, .inc-table td.c2, .inc-table tbody tr:hover td.c0, .inc-table tbody tr:hover td.c2 { background: transparent; }
.inc-table tbody tr:hover th, .inc-table tbody tr:hover td { background: #FAFAFB; }
.th-sub { opacity: .85; font-size: 12.5px; }
.mk-note { font-size: 13px; color: var(--ink-2); }
.inc-table td.impl { font-size: 14px; color: var(--ink-2); }
.inc-legend-txt { color: var(--ink-2); font-size: 14px; }
.inc-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 4px 0 36px; }
.inc-sum > div { background: var(--bg-off); border-radius: 18px; padding: 22px 22px 24px; }
.inc-sum h2 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.inc-sum .p { font-size: 15px; font-weight: 600; margin-top: 4px; }
.inc-sum p { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: 8px; }
@media (max-width: 760px) {
  .inc-sum { grid-template-columns: 1fr; }
  .inc-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .inc-table, .inc-table tbody, .inc-table tr, .inc-table th, .inc-table td { display: block; width: auto; }
  .inc-table thead { display: none; }
  .inc-table tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; margin-bottom: 12px; overflow: hidden; }
  .inc-table tbody th { grid-column: 1 / -1; font-size: 16px !important; font-weight: 650; padding: 14px 16px 10px !important; border-top: 0; }
  .inc-table td.c { border-top: 1px solid rgba(0,0,0,.07); padding: 10px 6px 12px; font-size: 13px; }
  .inc-table td.c + td.c { border-left: 1px solid rgba(0,0,0,.07); }
  .inc-table td.c::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; line-height: 1.25; min-height: 30px; }
  .inc-table th.impl, .inc-table td.impl { display: block !important; grid-column: 1 / -1; border-top: 1px solid rgba(0,0,0,.07); padding: 10px 16px 14px; font-size: 14px; background: var(--bg-off); }
  .inc-table tbody tr:hover th, .inc-table tbody tr:hover td { background: inherit; }
}

/* Responsive V12 */
@media (max-width: 980px) {
  .y-hero-w { grid-template-columns: 1fr; gap: 28px; }
  .y-hero-img { aspect-ratio: 16 / 10; }
  .y-tri { grid-template-columns: 1fr; }
  .y-split-top { margin-top: 40px; }
}
@media (max-width: 760px) {
  .y-hero { padding: 28px 16px 28px; }
  .y-hero-h { font-size: clamp(32px, 9.4vw, 40px); }
  .y-hero-k { font-size: 14px; }
  .y-hero-cta .y-btn { flex: 1 1 100%; }
  .y-reassure { justify-content: flex-start; gap: 8px 20px; margin-top: 28px; padding-top: 18px; }
  .y-reassure li { font-size: 14px; }
  .x-band { padding: 64px 16px; }
  .y-offers-band { padding-top: 56px; }
  .x-offer { padding: 36px 20px 30px; }
  .y-proof { grid-template-columns: 1fr; }
  .y-proof-c + .y-proof-c { border-left: 0; border-top: 1px solid var(--line); margin-top: 22px; }
  .y-durable { padding: 26px 22px; }
  .y-claim { border-radius: 18px; }
  .x-duo-b { padding: 24px 22px 26px; }
}
/* Installation / équipe : image alignée en haut, cadrage portrait sur ordinateur */
#installation .x-split, #apropos .x-split { align-items: start; }
@media (min-width: 981px) {
  .y-fig { aspect-ratio: 4 / 5; }
  .y-fig img { width: 100%; height: 100%; object-fit: cover; }
  #installation .y-fig img { object-position: 70% 50%; }
}
.x-product-img { width: min(220px, 50%); margin: 36px auto 0; }
@media (max-width: 760px) {
  .inc-table .mk-note { display: block !important; font-size: 12px; }
  .inc-table tbody th { width: auto !important; }
}
.prose p.x-fine, .prose .x-fine { font-size: 13px; line-height: 1.55; color: var(--ink-3); }


/* ═══════════════════════════════════════════════════════════
   V13 — 12/10/2026 — Accueil recomposé (hero V1, chiffres V2,
   offres V1 à lignes alignées, produit à défilement façon Apple)
   Préfixe z- : n'affecte aucune autre page.
   ═══════════════════════════════════════════════════════════ */
.z-w { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.z-band { padding: 96px 0; background: #fff; }
.z-band.gray { background: var(--bg-off); }
.z-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.z-center { text-align: center; }
.z-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--red); margin-bottom: 12px; }
.z-h2 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.z-h2.left { text-align: left; }
.z-sub { font-size: 19px; color: var(--ink-2); margin-top: 14px; line-height: 1.5; }
.z-lead { font-size: 17px; color: var(--ink-2); line-height: 1.6; margin-top: 18px; }
.z-lead b { color: var(--ink); }
.z-fine { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin-top: 24px; }
.z-fine a { text-decoration: underline; }
.z-links { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.z-link { background: none; border: 0; padding: 0; font: inherit; font-size: 16px; color: var(--red); cursor: pointer; }
.z-link::after { content: ' ›'; }
.z-link:hover { text-decoration: underline; }

/* ── Hero (V1) ── */
.z-hero { position: relative; min-height: min(calc(100svh - 52px), 860px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 24px 120px; overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)), url('../documents/hero-dae.jpg');
  background-size: cover; background-position: center; }
.z-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
.z-hero-in { position: relative; z-index: 1; max-width: 760px; }
.z-hero-h { font-size: clamp(48px, 8vw, 96px); font-weight: 800; letter-spacing: -.045em; line-height: .98; color: var(--ink); margin-bottom: 24px; }
.z-hero-h em { font-style: normal; color: var(--red); }
.z-hero-lead { font-size: clamp(18px, 2.1vw, 23px); font-weight: 400; color: var(--ink-2); line-height: 1.5; max-width: 560px; margin: 0 auto 40px; }
.z-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.z-pill { display: inline-flex; align-items: center; padding: 15px 30px; border-radius: 980px; font-size: 16px; font-weight: 500; transition: background .2s, transform .2s; }
.z-pill.solid { background: var(--red); color: #fff; }
.z-pill.solid:hover { background: var(--red-dk); transform: scale(1.02); }
.z-pill.ghost { color: var(--red); }
.z-pill.ghost:hover { background: var(--red-tint); }

/* ── Chiffres (V2, compactés) ── */
.z-stats { background: #fff; padding: 8px 0 72px; }
.z-stats-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: end; }
.z-stat { padding: 0 24px; border-left: 1px solid var(--line); }
.z-stat:first-child { border-left: 0; padding-left: 0; }
.z-stat-k { font-size: 13px; font-weight: 600; color: var(--red); margin-bottom: 6px; }
.z-stat-n { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; display: flex; align-items: baseline; gap: 12px; }
.z-stat-n .lo { color: #C7C7CC; }
.z-stat-n .ar { font-size: .45em; color: var(--ink-3); font-weight: 400; }
.z-stat-n .hi { color: var(--grn-mid); }
.z-stat-n.sm { font-size: clamp(24px, 2.6vw, 32px); color: var(--ink); }
.z-stat-l { font-size: 14px; color: var(--ink-2); line-height: 1.45; margin-top: 8px; }
.z-stat-s { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.z-stat-s a { text-decoration: underline; }

/* ── Offres (visuel V1, lignes alignées entre les deux cartes) ── */
.z-legend { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.z-legend span { display: inline-flex; align-items: center; gap: 6px; }
.z-mk { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 900; }
.z-mk.ok { background: var(--grn-tint); color: var(--grn); }
.z-mk.opt { background: #E8EEF6; color: var(--bg-slate); }
.z-mk.no { background: var(--red-tint); color: var(--red); }
.z-offers { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(12, auto); column-gap: 24px; row-gap: 0; }
.z-offer { grid-row: span 12; display: grid; grid-template-rows: subgrid; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 40px 36px 36px; }
.z-offer.dark { background: var(--bg-slate); border-color: transparent; box-shadow: 0 24px 64px rgba(0,0,0,.18); color: #fff; }
.z-o-head { padding-bottom: 24px; }
.z-o-badge { display: inline-block; background: var(--grn); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 5px 12px; border-radius: 980px; margin-bottom: 18px; }
.z-o-badge.ghost { background: var(--bg-off); color: var(--ink-2); }
.z-o-k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 8px; }
.z-o-t { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 8px; }
.z-o-d { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.z-o-price { padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.z-o-ht { font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.z-o-ht small { font-size: 16px; font-weight: 500; letter-spacing: 0; margin-left: 6px; color: var(--ink-2); }
.z-o-ttc { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.z-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.z-row b { color: var(--ink); font-weight: 600; }
.z-o-opt { margin-top: 18px; padding: 14px 16px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--bg-off); font-size: 13.5px; color: var(--ink-2); align-self: start; }
.z-o-opt b { color: var(--ink); display: block; font-size: 12.5px; margin-bottom: 2px; }
.z-o-cta { margin-top: 22px; align-self: end; }
.z-btn { width: 100%; padding: 16px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s; font-family: var(--font); }
.z-btn.green { background: var(--grn); color: #fff; border: 0; }
.z-btn.green:hover { background: #245924; }
.z-btn.outline { background: #fff; color: var(--ink); border: 1.5px solid rgba(0,0,0,.14); }
.z-btn.outline:hover { background: var(--bg-off); }
.z-offer.dark .z-o-k { color: rgba(255,255,255,.55); }
.z-offer.dark .z-o-t { color: #fff; }
.z-offer.dark .z-o-d, .z-offer.dark .z-row { color: rgba(255,255,255,.75); }
.z-offer.dark .z-row b, .z-offer.dark .z-o-ht { color: #fff; }
.z-offer.dark .z-o-ht small, .z-offer.dark .z-o-ttc { color: rgba(255,255,255,.55); }
.z-offer.dark .z-o-price { border-color: rgba(255,255,255,.12); }
.z-offer.dark .z-mk.ok { background: rgba(255,255,255,.12); color: #7BC77B; }
.z-offer.dark .z-o-opt { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.z-offer.dark .z-o-opt b { color: #fff; }
.z-row + .z-row { border-top: 1px solid var(--line); }
.z-offer.dark .z-row + .z-row { border-top-color: rgba(255,255,255,.08); }

/* ── Méthode ── */
.z-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0; }
.z-steps li { background: var(--bg-off); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; }
.z-step-n { font-size: 13px; font-weight: 700; color: var(--red); }
.z-steps b { font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.z-steps li > span:last-child { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* ── Installation + accompagnement ── */
.z-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.z-fig { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; background: #E5E5EA; }
.z-fig img { width: 100%; height: 100%; object-fit: cover; }
.z-fig figcaption { position: absolute; right: 12px; bottom: 12px; font-size: 11px; background: rgba(0,0,0,.55); color: #fff; padding: 3px 8px; border-radius: 6px; }
.z-keys { list-style: none; padding: 0; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.z-keys b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 4px; letter-spacing: -.01em; }
.z-keys span { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* ── Produit : image fixe, texte qui défile ── */
.z-fred { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.z-fred-media { position: sticky; top: 90px; height: calc(100vh - 140px); max-height: 680px; display: flex; align-items: center; justify-content: center; background: var(--bg-off); border-radius: 28px; }
.z-fred-media img { width: auto; height: auto; max-width: 78%; max-height: 86%; object-fit: contain; }
.z-fstep { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .z-fstep { opacity: .18; transform: translateY(12px); }
.js .z-fstep.on { opacity: 1; transform: none; }
.z-fh { font-size: clamp(36px, 5vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; color: var(--ink); }
.z-fp { font-size: 20px; color: var(--ink-2); line-height: 1.5; margin-top: 16px; max-width: 440px; }
.z-fp b { color: var(--ink); }

/* ── Formations ── */
.z-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.z-form { background: #fff; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.z-form-img { aspect-ratio: 16 / 10; background: #E5E5EA; }
.z-form-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.z-form-b { padding: 28px 30px 32px; }
.z-form-t { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
.z-form-d { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.z-form-p { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.z-form-p b { font-size: 20px; color: var(--ink); }
.z-ph { display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed rgba(0,0,0,.15); color: var(--ink-3); font-size: 15px; font-weight: 600; }
.z-ph small { font-weight: 400; font-size: 12.5px; }

/* ── Obligations ── */
.z-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.z-card { background: #fff; border-radius: 18px; padding: 28px 26px; }
.z-card h3 { font-size: 19px; letter-spacing: -.02em; color: var(--ink); margin: 12px 0 8px; }
.z-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.z-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 980px; background: var(--bg-off); color: var(--ink-2); }
.z-tag.red { background: var(--red-tint); color: var(--red-dk); }
.z-tag.amber { background: #FFF4E0; color: #8A5300; }
.z-warn { margin-top: 10px; font-size: 13.5px !important; font-weight: 600; color: #8A5300 !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .z-band { padding: 72px 0; }
  .z-stats-in { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .z-stat-lead { grid-column: 1 / -1; padding: 0; }
  .z-stat:nth-child(2) { border-left: 0; padding-left: 0; }
  .z-stat:nth-child(4) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .z-offers { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 24px; }
  .z-offer { grid-row: auto; display: flex; flex-direction: column; padding: 32px 22px 26px; }
  .z-steps { grid-template-columns: 1fr 1fr; }
  .z-split, .z-fred, .z-forms { grid-template-columns: 1fr; gap: 32px; }
  .z-split.rev > div:first-child { order: 2; }
  .z-keys { grid-template-columns: 1fr; }
  .z-tri { grid-template-columns: 1fr; }
  .z-fred { gap: 0; }
  .z-fred-media { top: 60px; height: 40vh; z-index: 2; border-radius: 20px; box-shadow: 0 0 0 16px #fff; }
  .z-fstep { min-height: 42vh; }
  .z-fp { font-size: 17px; }
}
@media (max-width: 520px) {
  .z-steps { grid-template-columns: 1fr; }
  .z-hero { padding: 64px 16px 96px; }
  .z-w, .z-stats-in { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .z-fstep { opacity: 1; transform: none; transition: none; }
}

/* V13 — copropriété : visuel en attente, citation mutualisation */
.page-hero-img.z-ph-hero { max-width: 1120px; margin: 0 auto 24px; aspect-ratio: 21 / 9; border-radius: 24px; }
.prose .z-quote { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.3; border-left: 3px solid var(--red); padding-left: 18px; margin: 8px 0 18px; }
@media (max-width: 900px) { .z-hero { background-position: 18% center; } .page-hero-img.z-ph-hero { aspect-ratio: 4 / 3; margin: 0 16px 24px; } }

/* ═══════════════════════════════════════════════════════════
   V13.1 — 12/10/2026 — mouvement, couleur, harmonisation
   ═══════════════════════════════════════════════════════════ */
/* Mouvement (classes posées par assets/motion.js) */
.m-on .m-rv { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--m-d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--m-d, 0ms); }
.m-on .m-rv.m-in { opacity: 1; transform: none; }
.m-px { will-change: transform; transform-origin: 50% 50%; }
.page-hero-img, .z-form-img, .x-duo-img, .z-fig, .x-split-img { overflow: hidden; }
.page-hero-img { border-radius: var(--x-r, 24px); padding: 0; }
.z-fill .w { color: #C7C7CC; transition: color .35s ease; }
.z-fill .w.on { color: var(--ink); }
.z-fill .w.on:nth-last-child(-n+3) { color: var(--red); }

/* Chiffres : quatre colonnes identiques */
.z-stats { padding: 24px 0 80px; }
.z-stats-k { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--red); margin-bottom: 28px; }
.z-stats-in { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.z-stat, .z-stat:first-child { padding: 4px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.z-stat:first-child { border-left: 0; }
.z-stat-n, .z-stat-n.sm { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); white-space: nowrap; gap: 8px; min-height: 1.1em; }
.z-stat-n .ar { font-size: .6em; }
.z-stat-l { font-size: 14.5px; margin-top: 10px; flex: 1; }
.z-stat-s { margin-top: 10px; }

/* Produit : intégration de la photo */
.z-fred-media { background: radial-gradient(60% 55% at 50% 48%, #FFFFFF 0%, #F3F4F7 55%, #E9ECF2 100%); overflow: hidden; }
.z-fred-media::before { content: ''; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(232,50,26,.16), rgba(232,50,26,0) 70%); left: 21%; top: 22%; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.z-fred-media img { position: relative; filter: drop-shadow(0 30px 40px rgba(26,51,82,.22)); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.z-fred-media[data-step="1"] img { transform: scale(1.06) rotate(-3deg); }
.z-fred-media[data-step="2"] img { transform: scale(.96) translateY(-10px) rotate(2deg); }
.z-fred-media[data-step="3"] img { transform: scale(1.1) translateY(8px); }
.z-fred-media[data-step="1"]::before { transform: scale(1.25); }
.z-fred-media[data-step="3"]::before { transform: scale(1.4); }

/* Bandeaux « noirs » → bleu ardoise de la charte */
.x-band.black { background: radial-gradient(80% 120% at 85% 0%, rgba(232,50,26,.28), rgba(232,50,26,0) 55%), linear-gradient(160deg, #1a3352 0%, #12243b 100%); }

/* En-têtes de pages : un peu de couleur et d'air */
.page-head { background: radial-gradient(55% 80% at 15% 0%, var(--red-tint), rgba(254,240,237,0) 70%), radial-gradient(50% 70% at 90% 10%, #EAF0F7, rgba(234,240,247,0) 70%); padding-bottom: 56px; }
.page-h1 { line-height: 1.1; margin-bottom: 26px; }
.page-h1 em { font-style: normal; color: var(--red); }
.page-lead { margin-bottom: 18px; }

/* Texte courant : centré sur ordinateur, titres en bleu ardoise */
.prose { margin: 0 auto; }
.prose h2 { color: var(--bg-slate); }
.prose ul li::marker { color: var(--red); }
.prose .note-box { background: #EEF3F9; border-left: 0; }
.z-quote.z-fill { border-left: 0; padding-left: 0; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.03em; line-height: 1.15; margin: 10px 0 22px; }

/* Obligations : moins de noir */
.oblig-h2, .diag-title { color: var(--bg-slate); }
.install-item { background: #F4F7FB; border-color: transparent; }
.install-item:nth-child(2) { background: var(--grn-tint); }
.install-item:nth-child(3) { background: var(--red-tint); }
.install-title { color: var(--bg-slate); }
.sanction-card { background: #F4F7FB; border-color: transparent; }
.sanction-num.dark { color: var(--bg-slate); }
.audit-box { background: linear-gradient(135deg, var(--grn-tint), #F4F7FB); border-color: transparent; }
.decree-banner { background: linear-gradient(135deg, #1a3352 0%, #24476F 100%); }

/* Cartes d'offres réutilisées sur la page Tarifs */
.z-offers.tarifs { max-width: 1040px; margin: 0 auto; text-align: left; }

@media (max-width: 900px) {
  .z-stats-in { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .z-stat, .z-stat:first-child { border-left: 0; padding: 0 8px 0 0; }
  .z-stats-in .z-stat { grid-column: auto; }
  .z-stats-in .z-stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: 16px; }
  .z-stat-n, .z-stat-n.sm { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .z-fred-media img, .z-fred-media::before { transition: none; transform: none !important; }
}

/* ═══ V13.2 — 13/10/2026 ═══ */
/* Ouverture des pages : le texte du début glisse en place */
@keyframes zUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.page-head .breadcrumb, .page-head .page-h1, .page-head .page-lead, .page-head .page-updated,
.z-hero-in .z-eyebrow, .z-hero-in .z-hero-h, .z-hero-in .z-hero-lead, .z-hero-in .z-hero-cta { animation: zUp 1s cubic-bezier(.2,.7,.2,1) both; }
.page-head .page-h1, .z-hero-in .z-hero-h { animation-delay: .12s; }
.page-head .page-lead, .z-hero-in .z-hero-lead { animation-delay: .3s; }
.page-head .page-updated, .z-hero-in .z-hero-cta { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .page-head *, .z-hero-in * { animation: none !important; } }
/* Questions fréquentes centrées */
.faq-wrap.left { margin-left: auto; margin-right: auto; }
.prose:has(+ .faq-wrap) h2 { text-align: center; }
/* Titres colorés */
.x-hed em { font-style: normal; color: var(--red); }
.z-tcenter, .z-tcenter .x-hed, .z-tcenter .x-sub { text-align: center; }
.z-tcenter .x-sub { margin-left: auto; margin-right: auto; }
/* Légende des symboles : de l'air avant les cartes */
.z-legend { margin-top: 22px; margin-bottom: 40px; }
/* Parents sauveteurs */
.z-ps-wrap { margin-top: 56px; }
.z-ps-wrap .z-eyebrow { margin-bottom: 14px; }
.z-ps { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; text-align: left; background: linear-gradient(135deg, #FFFFFF 0%, var(--red-tint) 100%); border: 1.5px solid rgba(232,50,26,.18); border-radius: var(--r-card); padding: 40px 44px; max-width: 1040px; margin: 0 auto; }
.z-ps-t { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin-bottom: 10px; }
.z-ps-d { font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.z-ps-l { margin: 14px 0 0 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.z-ps-l li { break-inside: avoid; margin-bottom: 4px; }
.z-ps-l li::marker { color: var(--red); }
.z-ps-n { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.z-ps-side { text-align: center; background: #fff; border-radius: 18px; padding: 28px 24px; box-shadow: 0 18px 40px rgba(26,51,82,.10); }
.z-ps-p { font-size: 15px; color: var(--ink-3); margin-bottom: 18px; }
.z-ps-p b { display: block; font-size: 48px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.z-ps-cta { display: block; text-decoration: none; text-align: center; }
.z-ps-s { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.z-ps-ph { max-width: 1040px; margin: 0 auto 28px; aspect-ratio: 21 / 8; border-radius: var(--r-card); }
@media (max-width: 900px) {
  .z-ps { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }
  .z-ps-l { columns: 1; }
  .z-ps-ph { aspect-ratio: 4 / 3; }
}

/* V13.3 — 14/10/2026 : visuels générés par IA (mention conservée en bas à droite de l'image) */
.z-form-img img, .x-duo-img img, .z-ps-ph img, .z-fig.ai img, .page-hero-img.z-ph-hero img { object-fit: cover; object-position: 50% 100%; }
.z-ps-ph { overflow: hidden; }
.z-ps-ph img { width: 100%; height: 100%; display: block; }
.page-hero-img.z-ph-hero img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.page-hero-img.z-ph-hero { aspect-ratio: 3 / 2; max-width: 960px; }
.z-ps-ph { aspect-ratio: 3 / 2; max-width: 860px; }
@media (max-width: 900px) { .z-ps-ph { aspect-ratio: 3 / 2; } }

/* V13.4 — 14/10/2026 : trois formations côte à côte */
.z-forms.three, .x-duo.three { grid-template-columns: repeat(3, 1fr); }
.z-forms.three .z-form-img, .x-duo.three .x-duo-img { aspect-ratio: 3 / 2; }
.z-forms.three .z-form { display: flex; flex-direction: column; }
.z-forms.three .z-form-b { display: flex; flex-direction: column; flex: 1; }
.z-forms.three .z-form-p { margin-top: auto; padding-top: 16px; }
.x-duo.three .x-duo-t { font-size: 22px; }
.z-form-cta { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--grn); text-decoration: none; }
.z-form-cta:hover { text-decoration: underline; }
@media (max-width: 1000px) { .z-forms.three, .x-duo.three { grid-template-columns: 1fr; } }