/* ===== Page « Domaines d'intervention » ===== */
  .subnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
  .subnav__inner{display:flex;align-items:center;gap:var(--space-2);overflow-x:auto;padding:var(--space-3) 0}
  /* Base mobile : remplissage vertical porte a 12 px pour une cible tactile
     de 44 px de haut. La typographie n'est pas touchee ; le remplissage du
     design (9 px) revient au palier 900, ou le pointeur est precis. */
  .subnav a{flex:none;font-family:var(--font-data);font-size:var(--text-sm);font-weight:600;color:var(--neutral-600);text-decoration:none;padding:12px 16px;border-radius:var(--radius-full);transition:background var(--dur-base),color var(--dur-base)}
  .subnav a:hover{color:var(--navy);background:var(--neutral-100)}
  .subnav a.is-active{background:var(--navy);color:#fff}

  /* grille des domaines — carte reprise du design (ex-secteurs).
     PAS une grille CSS, mais un flex wrap. Motif :
     le nombre de domaines est piloté par le back-office et la cellule
     « besoin hors liste » s'ajoute en dernier ; le total n'est donc jamais
     un multiple du nombre de colonnes. Avec `grid-template-columns`, ni
     auto-fill ni auto-fit ne rattrapent une dernière rangée incomplète —
     auto-fit ne réduit le nombre de pistes que si des pistes sont VIDES au
     sens du total, pas si la dernière rangée est courte. À 1200 px, 13
     domaines + 1 CTA donnaient 4 colonnes et 4 rangées, la dernière laissant
     deux pistes vides.
     RECTIFICATIF — le commentaire précédent affirmait que cet espace
     résiduel « reste blanc, donc invisible ». C'est faux : le panneau porte
     une bordure visible (`border:1px solid var(--border)`), le vide se lit
     donc comme un trou dans un cadre, et la cellule CTA — au fond
     `--neutral-50`, distinct du blanc — s'y retrouvait réduite à une piste de
     280 px, titre coupé.
     `flex:1 1 280px` fait grandir les cellules de la dernière rangée jusqu'à
     la remplir, quel que soit le nombre de domaines et quelle que soit la
     largeur. `min-width:min(100%,280px)` empêche une cellule plus large que
     le viewport sous 280 px — cause classique de débordement horizontal.
     Corollaire assumé : à très faible cardinalité (un domaine + le CTA) les
     deux cellules se partagent toute la largeur. C'est le compromis inverse
     de celui retenu pour .team, et c'est ici le bon : dans un panneau bordé,
     un vide se voit, un étirement non. */
  .domaines{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-12);scroll-margin-top:120px}
  .domaine{flex:1 1 280px;min-width:min(100%,280px);background:#fff;box-shadow:1px 0 0 0 var(--border),0 1px 0 0 var(--border);padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);text-decoration:none;transition:background var(--dur-base) var(--ease-out);position:relative}
  .domaine:hover{background:var(--navy-900)}
  .domaine__ico{width:34px;height:34px;color:var(--blue-600);transition:color var(--dur-base);flex:none}
  .domaine:hover .domaine__ico{color:var(--orange)}
  .domaine h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);transition:color var(--dur-base);line-height:1.25}
  .domaine:hover h3{color:#fff}
  .domaine p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600);transition:color var(--dur-base)}
  .domaine:hover p{color:var(--cyan-100)}
  .domaine .badge{align-self:flex-start}
  .domaine .arr{margin-top:auto;font-family:var(--font-data);font-size:var(--text-xs);color:var(--neutral-400);opacity:0;transform:translateX(-6px);transition:opacity var(--dur-base),transform var(--dur-base),color var(--dur-base)}
  .domaine:hover .arr{opacity:1;transform:none;color:var(--orange)}
  .domaine:focus-visible{outline:none;box-shadow:var(--ring);z-index:1}

  /* cellule « besoin hors liste » : dernière cellule du flux, soumise au même
     `flex:1 1 280px`. Elle occupe donc la place restante de la dernière
     rangée au lieu d'y être compressée à 280 px. */
  .domaine--cta{background:var(--neutral-50);justify-content:center}
  .domaine--cta h3{color:var(--navy)}
  .domaine--cta:hover{background:var(--navy-900)}
  .domaine--cta .arr{margin-top:var(--space-2);opacity:1;transform:none;color:var(--blue-500)}
  .domaine--cta:hover .arr{color:var(--orange)}

  /* méthode timeline */
  .timeline{position:relative;margin-top:var(--space-12);display:grid;grid-template-columns:1fr;gap:var(--space-8)}
  /* Le filet relie les jalons d'une meme rangee : il n'a de sens qu'une fois
     les quatre etapes alignees, donc a partir du dernier palier. */
  .timeline::before{content:"";position:absolute;top:22px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--cyan-300),var(--orange));display:none}
  .tl{position:relative;text-align:left}
  .tl .dot{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--cyan-300);color:var(--navy);display:grid;place-items:center;font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-5);position:relative;z-index:2}
  .tl:last-child .dot{border-color:var(--orange);background:var(--orange);color:#fff}
  .tl h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);margin-bottom:var(--space-2)}
  .tl p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600)}

  /* modèles d'intervention */
  /* Exception : trois formats, celui du milieu mis en avant (.featured) —
     la composition a trois colonnes est une decision de design. */
  .models{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-12)}
  .model{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
  .model:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
  .model.featured{background:var(--navy-900);color:#fff;border-color:transparent;position:relative;overflow:hidden}
  .model.featured .grid-bg{opacity:.4}
  .model__tag{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-600);position:relative}
  .model.featured .model__tag{color:var(--cyan-300)}
  .model h3{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--navy);position:relative}
  .model.featured h3{color:#fff}
  .model p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600);position:relative;flex:1}
  .model.featured p{color:var(--cyan-100)}
  .model ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2);position:relative}
  .model li{font-size:var(--text-sm);color:var(--neutral-700);display:flex;gap:8px;align-items:flex-start}
  .model.featured li{color:#d9d8ea}
  .model li::before{content:"›";color:var(--orange);font-weight:700}

  /* ---- Paliers (mobile-first) ---- */
  @media(min-width:640px){
    .timeline{grid-template-columns:1fr 1fr}
  }
  @media(min-width:900px){
    .subnav a{padding:9px 16px}
  }
  /* Quatrieme palier — 1000 px, hors de la serie 640/900/1200.
     Il existe parce que le seuil de bascule a deux colonnes de ce theme est
     historiquement a ~980 px (les blocs @media(max-width:980px) d'avant la
     refonte mobile-first) : la composition a deux colonnes etait donc active
     des 981 px. Le forcer a 1200 pour respecter la serie a trois paliers
     laissait toute la bande 981-1199 px — celle des portables — empilee sur
     une seule colonne, au prix de +54 % de hauteur sur /contact/ a 1024 px.
     La regle des trois paliers a cede, pas le rendu. */
  @media(min-width:1000px){
    /* .domaines n'a pas de palier : le flex wrap decide seul du nombre de colonnes. */
    .timeline{grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
    .timeline::before{display:block}
    .models{grid-template-columns:repeat(3,1fr)}
  }