/* Feuille propre à la page cas-pratiques, reprise de la maquette dans l'ordre d'origine. */
/* ============ DESIGN SYSTEM, cf. src/styles/tokens.css ============ */
:root{
--navy-50:#5F7080; --navy-25:#87969F;
--violet-mid:#9069FA; --violet-10:#F6F3FF;
  --on-navy-70:#C6D2DE; --on-navy-25:#8FA2B4;

  /* Bricolage Grotesque remplace Syne : chasse plus etroite, hauteur d'x
     plus basse, donc un bloc de titre plus vertical a corps egal. Variable
     a axe optique, le navigateur ajuste le dessin selon la taille. */
  /* TYPO : Josefin Sans a des traits fins et une petite hauteur d'oeil.
     Rien sous 16px pour du texte lu, et graisse 500 au lieu de 300/400. */
  --fs-h3:1.22rem;
  --fs-h2:clamp(1.7rem,3.4vw,2.5rem); --fs-h1:clamp(2rem,4.3vw,3.05rem);
  --lh-tight:1.08; --lh-snug:1.38; 
  /* LARGEUR DE CONTENU, règle applicable à tout le site */
--stack-2:14px; --stack-3:22px;     --pad-card:clamp(18px,1.8vw,24px);

  /* RYTHME TYPOGRAPHIQUE D'UN BLOC DE TEXTE
     surtitre -> titre -> texte -> bouton. Jamais d'écart uniforme. */
  --hero-y:clamp(38px,4.4vw,62px);
  --hero-y-end:clamp(30px,3vw,38px);

--r-xl:30px;     --shadow-card:0 14px 34px rgba(14,46,73,.12);
  --shadow-tile:0 10px 26px rgba(14,46,73,.14);
  --t-fast:.15s ease; --t-base:.22s ease;
}
@media (min-width:1100px){ :root{ --gutter:32px; } }
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--body);font-size:var(--fs-base);font-weight:var(--fw-text);line-height:var(--lh-base);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Interlettrage resserre et interlignage reduit a chaque niveau : c'est ce
   resserrement, autant que le changement de famille, qui corrige
   l'impression d'aplati. Les valeurs descendent avec le corps, un titre
   large supportant un serrage que le petit corps ne supporte pas. */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:var(--lh-tight);text-wrap:balance;margin:0}
h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.03em;line-height:1.04}
h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.025em;line-height:1.08}
h3{font-size:var(--fs-h3);letter-spacing:-.012em;line-height:1.28}
h4{letter-spacing:-.01em;line-height:1.25}
p{margin:0}
/* Surtitre : libellé, pas bouton. Un filet court puis le mot. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65em;
  background:none;border:0;padding:0;border-radius:0;
  color:var(--violet);font-family:var(--display);font-weight:700;
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.18em;line-height:1.5;
}
/* Filet du surtitre : barre oblique, reprise du signe « / » de la charte. */
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor;flex:none;transform:rotate(-38deg)}
.lead{font-size:var(--fs-lead);color:var(--navy-70);max-width:58ch;font-weight:var(--fw-text)}
.slash{display:block;width:54px;height:18px;position:relative;flex:none}
.slash::before,.slash::after{content:"";position:absolute;left:0;width:56px;height:4px;background:var(--violet-light);transform:rotate(-36deg);transform-origin:left center;border-radius:var(--r-pill)}
.slash::before{top:2px}
.slash::after{top:11px}
/* BOUTONS : largeur toujours dictée par le libellé, jamais pleine largeur.
   Hauteur minimale de 48px pour la cible tactile. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:auto;min-height:48px;font-family:var(--display);font-weight:700;font-size:1rem;padding:.85em 1.7em;text-decoration:none;border:2px solid transparent;border-radius:var(--r-pill);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:none}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--violet);color:#fff}
.btn-sm{padding:.65em 1.3em;font-size:var(--fs-sm)}
.btn-lg{padding:1em 2em;font-size:1.02rem}
.ph{background:var(--ph);border:1px dashed var(--ph-line);border-radius:var(--r-sm);display:grid;place-items:center;text-align:center;color:var(--ph-text);font-size:0.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:var(--stack-1)}
.todo{display:inline-block;background:var(--sky-20);color:var(--sky-ink);border-radius:var(--r-xs);font-size:0.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.28em .6em;border:1px solid #B5E0F6}
/* ---------- NAV ---------- */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--stack-3);min-height:74px}
/* Lien de navigation : le trait se trace de la gauche vers la droite */
.nav-links>a{position:relative;text-decoration:none;font-weight:600;font-size:var(--fs-sm);padding-bottom:5px}
.nav-links>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--violet);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .34s cubic-bezier(.33,0,.2,1);
}
.nav-links>a:hover::after,
.nav-links>a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.nav-links>a[aria-current]::after{transform:scaleX(1);transform-origin:left center}
/* Halo du bouton principal, déclenché après 20 s sans défilement */
.halo-wrap::before{
  content:"";position:absolute;inset:-3px;border-radius:var(--r-pill);z-index:0;opacity:0;
  background:conic-gradient(from var(--halo-ang),
    transparent 0 66%,
    rgba(166,130,251,.22) 76%,
    var(--violet-light) 87%,
    #ffffff 93%,
    var(--violet-light) 97%,
    transparent 100%);
}
.halo-wrap.halo-on::before{
  animation:haloTour 2.9s cubic-bezier(.42,0,.58,1) 1 forwards,
            haloFondu 2.9s linear 1 forwards;
}
.nav-cta{display:flex;justify-content:flex-end}
/* ---------- HERO : texte à gauche, mosaïque de logos à droite ---------- */
.hero{padding-block:var(--hero-y) var(--hero-y-end)}
/* Le fold occupe la hauteur de l'ecran, moins la barre de navigation
   collante qui mesure 75 px. La zone de filtres commence donc sous la
   ligne de flottaison : c'est le bouton "Voir tous les cas" qui y mene.
   Les 60 px retires laissent la grille affleurer juste en dessous, assez
   pour signaler qu'il y a une suite sans faire disparaitre le reperage.
   Uniquement en desktop : sur telephone, une hauteur d'ecran imposee
   pousserait les filtres hors de portee du pouce. */
@media (min-width:981px){
  .hero{display:flex;align-items:center;min-height:calc(100vh - 60px)}
  .hero{min-height:calc(100svh - 60px)}
  .hero>.wrap{width:100%}
}
.hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,4vw,64px);align-items:center}
/* rythme différencié, pas de gap uniforme */
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:44ch}
.hero-copy>*+*{margin-top:var(--flow-base)}
.hero-copy .eyebrow+h1{margin-top:var(--flow-tight)}
.hero-copy .lead+.btn{margin-top:var(--flow-cta)}
.hero h1 .hl{color:var(--violet)}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
.tile{
  aspect-ratio:1;border-radius:clamp(14px,1.6vw,20px);
  display:grid;place-items:center;padding:14%;
  background:transparent;border:1px solid transparent;
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
}
.tile.full,.tile.invite{animation:pop .5s cubic-bezier(.2,.8,.3,1) backwards}
.tile.full{background:var(--paper);border-color:var(--line);box-shadow:0 2px 10px rgba(14,46,73,.06)}
.tile .slot{
  width:100%;height:100%;border-radius:10px;
  display:grid;place-items:center;
  color:#6B5BA8;font-family:var(--display);font-weight:800;
  font-size:clamp(.58rem,.95vw,.76rem);letter-spacing:.04em;text-align:center;
  overflow:hidden;line-height:1.25;
}
.tile.full .slot{background:var(--violet-10);border:1px dashed #CFC2F6}
/* Une tuile qui porte un vrai logo perd l'habillage d'emplacement vide :
   fond violet et bordure pointillée servaient à montrer une place à remplir. */
.tile.marque .slot{background:none;border:0}
.tile .slot img{width:100%;height:100%;object-fit:contain}
.tile.on{border-color:var(--violet);box-shadow:var(--shadow-tile);transform:translateY(-4px)}
/* tuile d'invitation : la place du prochain client */
.tile.invite{
  /* Du violet encre au violet : le blanc y mesure 5,88 puis 4,59:1.
     L'ancien dégradé finissait sur #9069FA, 3,76:1. */
  background:linear-gradient(145deg,var(--violet-ink),var(--violet));
  border-color:transparent;box-shadow:0 10px 26px rgba(113,91,250,.3);
}
.tile.invite .slot{
  background:transparent;border:1.5px dashed rgba(255,255,255,.65);
  color:#fff;gap:3px;align-content:center;
}
.tile.invite .slot small{display:block;font-weight:700;font-size:.82em;letter-spacing:.02em}
.tile.invite:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(113,91,250,.42)}
@keyframes pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
/* ---------- FILTRES ---------- */
.filterzone{padding-bottom:var(--stack-3);border-bottom:1px solid var(--line)}
.filter-hint{font-size:var(--fs-sm);color:var(--navy-50);font-weight:var(--fw-text);margin-bottom:var(--stack-2);display:flex;align-items:flex-start;gap:.5em}
.filter-hint svg{width:17px;height:17px;flex:none;color:var(--violet);margin-top:.38em}
.filters{display:flex;gap:var(--stack-1);flex-wrap:wrap}
.filter{
  font-family:var(--display);font-weight:700;font-size:var(--fs-sm);
  padding:.5em 1.05em;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--paper);color:var(--navy-70);
  cursor:pointer;display:inline-flex;align-items:center;gap:.5em;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.filter .n{font-size:1rem;font-weight:700;color:var(--navy-50);font-variant-numeric:tabular-nums}
.filter:hover{border-color:var(--violet);color:var(--navy);background:var(--violet-10)}
.filter[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.filter[aria-pressed="true"] .n{color:var(--on-navy-25)}
/* ---------- CARTES ---------- */
.cas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.cas{
  display:flex;flex-direction:column;gap:var(--stack-2);
  padding:var(--pad-card);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);
  text-decoration:none;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.cas:hover{background:var(--violet-10);border-color:var(--violet-light);transform:translateY(-3px);box-shadow:var(--shadow-card)}
.cas-client{display:flex;align-items:center;gap:var(--stack-2)}
.cas-logo{
  width:52px;height:52px;flex:none;border-radius:var(--r-pill);
  background:var(--paper-alt);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;
  font-family:var(--display);font-weight:800;font-size:1rem;color:var(--navy-50);
}
.cas-logo img{width:100%;height:100%;object-fit:contain;padding:18%}
/* Regle des logos clients, la meme que sur les pages de cas : un logo
   qui est deja un disque occupe la pastille entiere, son propre bord
   faisant office de bord. Les 18 % de marge sont pour les logotypes,
   qui ont besoin que le blanc leur serve de fond. La classe est posee
   par le script quand le fichier porte le suffixe -plein. */
.cas-logo.plein{padding:0;overflow:hidden}
.cas-logo.plein img{padding:0;object-fit:cover;border-radius:var(--r-pill)}
.cas-ident{display:flex;flex-direction:column;min-width:0}
.cas-nom{font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.25;color:var(--navy)}
.cas-type{font-size:var(--fs-sm);line-height:1.35;color:var(--navy-50);font-weight:var(--fw-text)}
.cas h3{
  min-height:calc(2 * var(--lh-snug) * var(--fs-h3));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cas:hover h3{color:var(--violet)}
.cas-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:30px;align-items:flex-start}
.tag{font-size:var(--fs-micro);letter-spacing:.07em;text-transform:uppercase;font-weight:700;font-family:var(--display);color:var(--navy-70);background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--r-pill);padding:.34em .75em;line-height:1.5}
.tag.modele{background:var(--violet-20);border-color:#DCCFFB;color:#4B3699}
/* Etiquette de nuance : ce que le cas a produit sans que ce soit notre
   prestation. Fond blanc, gris 5F7080 mesure a 5,10:1, AA. Elle reste
   en retrait des deux etiquettes pleines qui la precedent. */
.tag.suite{background:#fff;color:var(--navy-50);border-color:var(--line)}
/* Logotype horizontal : il lui faut la largeur de la pastille, sinon
   le nom tombe sous le seuil de lisibilite. Jamais de rognage. */
.cas-logo.large{padding:0 3px}
.cas-logo.large img{width:100%;height:auto;object-fit:contain}
/* Pictogramme a fond transparent : la pastille lui donne un fond
   blanc et un filet, sinon il se perd sur le degrade. */
.cas-logo.transp{background:#fff;border:1px solid var(--line);padding:5px}
.cas-logo.transp img{width:100%;height:auto;object-fit:contain}
.cas:hover .tag{background:#fff}
.cas-cta{
  margin-top:auto;padding-top:var(--stack-2);border-top:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--display);font-weight:700;font-size:var(--fs-sm);color:var(--navy);
}
.cas-cta svg{width:17px;height:17px}
.cas-cta svg{width:15px;height:15px;transition:transform var(--t-fast)}
.cas:hover .cas-cta{color:var(--violet);border-top-color:#DCCFFB}
.cas:hover .cas-cta svg{transform:translateX(3px)}
.empty{padding:var(--section-y-sm) var(--stack-4);border:1px dashed var(--ph-line);border-radius:var(--r-md);text-align:center;color:var(--navy-70);font-weight:var(--fw-text);grid-column:1 / -1}
.empty b{display:block;font-family:var(--display);font-weight:700;color:var(--navy);margin-bottom:6px}
/* Maquette : les cas dont la page enfant n'existe pas encore */
.cas-vide{opacity:.72}
.cas-vide .cas-cta{color:var(--navy-50)}
.cas-vide:hover{background:#fff;border-color:var(--line);box-shadow:none;transform:none}
/* ---------- PAGINATION ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--stack-1);margin-top:var(--section-y-sm);flex-wrap:wrap}
.pager button{
  min-width:40px;height:40px;padding:0 .7em;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--paper);color:var(--navy-70);
  font-family:var(--display);font-weight:700;font-size:var(--fs-sm);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.pager button:hover:not(:disabled){border-color:var(--violet);background:var(--violet-10);color:var(--navy)}
.pager button[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager svg{width:15px;height:15px}
/* ---------- BLOC CTA ---------- */
.cta-zone{padding-block:var(--section-y)}
.cta-card{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(34px,4.6vw,72px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;
  background:linear-gradient(118deg,#0E2E49 0%,#24276E 28%,#5438DF 55%,#2B2B7D 78%,#0E2E49 100%);
  background-size:260% 260%;
  animation:drift 26s ease-in-out infinite;
  color:#fff;isolation:isolate;
}
@keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.cta-card::after{
  content:"";position:absolute;z-index:-1;width:44%;aspect-ratio:1;right:-5%;top:-26%;
  background:radial-gradient(circle,rgba(166,130,251,.55),transparent 68%);filter:blur(10px);
}
.cta-txt .eyebrow{color:var(--violet-light)}
/* Sur --paper-alt, le violet tombe à 4,20:1 : les surtitres des sections
   teintées passent au violet encre, 5,39:1. */
.alt .eyebrow{color:var(--violet-ink)}
.cta-txt{display:flex;flex-direction:column;align-items:flex-start}
.cta-txt>*+*{margin-top:var(--flow-base)}
.cta-txt .eyebrow+h2{margin-top:var(--flow-tight)}
.cta-txt p+.btn{margin-top:var(--flow-cta)}
.cta-txt .btn+.reassurance{margin-top:var(--stack-3)}
.cta-txt h2{color:#fff;max-width:17ch}
.cta-txt p{color:var(--on-navy-70);font-weight:var(--fw-text);font-size:var(--fs-lead);max-width:44ch}
.cta-txt .sig{font-size:1rem;color:var(--on-navy-25);font-weight:var(--fw-text)}
.reassurance{display:flex;gap:var(--stack-3);flex-wrap:wrap}
.reassurance span{display:inline-flex;align-items:center;gap:.45em;font-size:var(--fs-sm);color:var(--on-navy-70);font-weight:var(--fw-text)}
.reassurance svg{width:16px;height:16px;flex:none;color:var(--violet-light)}
/* ---------- ORBITE D'OUTILS, bloc de rendez-vous ----------
   Deux anneaux concentriques qui tournent en sens inverse, chacun portant
   des bulles d'outils. La photo est posée devant, immobile.

   Mécanique : le rail tourne, et chaque bulle tourne en sens contraire à la
   même vitesse. Les deux rotations s'annulent, donc un logo reste droit
   pendant que sa position décrit le cercle. Sans ce contre-mouvement, les
   logos tourneraient sur eux-mêmes et deviendraient illisibles.
   Le rail intérieur est en "reverse" : sa bulle l'est aussi, sinon
   l'annulation ne se fait pas. */
.cta-visual{position:relative;aspect-ratio:1;--lueur:30px;--etal:8px}
.orbite{position:absolute;inset:0}
/* Fond sombre sous les orbites. Sans lui les halos violets disparaissent
   dans le dégradé violet de la carte : une lueur ne se voit que sur un fond
   plus sombre qu'elle. Navy de la charte, aucune couleur ajoutée. */
.orbite::before{content:"";position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(8,26,44,.82) 0%, rgba(8,26,44,.55) 46%, rgba(8,26,44,0) 72%)}
.anneau{position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px solid rgba(255,255,255,.17);transform:translate(-50%,-50%);pointer-events:none}
.a1{width:94%;height:94%}
.a2{width:62%;height:62%}
.rail{position:absolute;inset:0;pointer-events:none}
.r1{animation:orbite 76s linear infinite}
.r2{animation:orbite 56s linear infinite reverse}
@keyframes orbite{to{transform:rotate(360deg)}}
/* Le rayon est porté par la BOÎTE de .pos, pas par une translation.
   Un pourcentage dans translateY se résout sur la hauteur de l'élément :
   avec une boîte de hauteur nulle il vaut zéro et toutes les bulles se
   superposent au centre. Ici .pos occupe un carré inscrit dont le demi-côté
   EST le rayon, il tourne, et la bulle est accrochée au milieu de son bord
   haut. Le centrage se fait par marges négatives, ce qui laisse la propriété
   transform entièrement libre pour la contre-rotation. */
.pos{position:absolute;inset:var(--in);transform:rotate(var(--a))}
/* Rayons calculés pour que BULLE COMPRISE rien ne sorte du bloc :
   rayon + demi-bulle doit rester sous 50 %. Extérieur 44 % + 5,1 %,
   intérieur 30 % + 4,1 %. */
.r1 .pos{--in:7%}
/* rayon 43 % du bloc */
.r2 .pos{--in:22%}
/* rayon 28 % du bloc */
/* Diamètre en pourcentage, jamais en pixels : les bulles doivent rétrécir
   avec le bloc, sinon elles s'empilent sur petit écran. La marge négative
   vaut la moitié du diamètre, en pourcentage elle aussi, et les deux se
   résolvent sur la même largeur de référence, donc le centrage tient. */
.bulle{
  position:absolute;top:0;left:50%;width:var(--d);height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%;background:var(--paper);display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.55),
             0 0 var(--lueur) var(--etal) var(--halo);
}
.r1 .bulle{--d:15%}
.r2 .bulle{--d:19%}
/* La contre-rotation doit annuler DEUX rotations, pas une : celle du rail,
   qui est animée, et celle de .pos, qui est fixe et vaut l'angle de
   placement de la bulle sur le cercle. L'oublier laissait chaque logo
   penché de son propre angle : celui posé à 180 degrés était à l'envers.
   L'angle de départ de l'animation vaut donc moins cet angle de placement,
   et --a est hérité de .pos. Somme des trois rotations : zéro, à tout
   instant et sur les deux anneaux, y compris celui qui tourne à l'envers. */
.r1 .bulle{animation:contre 76s linear infinite}
.r2 .bulle{animation:contre 56s linear infinite reverse}
@keyframes contre{
  from{transform:rotate(calc(-1 * var(--a)))}
  to{transform:rotate(calc(-1 * var(--a) - 360deg))}
}
/* 100 % : l'équilibrage optique et la marge intérieure sont déjà dans
   le fichier, les redimensionner ici casserait l'équilibre entre les huit. */
.bulle img{width:100%;height:100%;object-fit:contain;display:block}
/* Emplacement de logo tant que l'outil n'est pas fourni. */
.bulle:empty::after{content:"";width:34%;height:34%;border-radius:50%;
  border:1.5px dashed var(--navy-25)}
/* Quatre halos tirés de la charte, aucun ton inventé. */
.t-violet{--halo:rgba(113,91,250,.62)}
.t-clair {--halo:rgba(166,130,251,.58)}
.t-ciel  {--halo:rgba(79,193,253,.55)}
.t-or    {--halo:rgba(242,179,61,.50)}
/* La marque au centre, immobile : c'est le point fixe autour duquel tout
   tourne. Centrage par inset:0 et margin:auto, qui place l'élément au centre
   exact de la boîte sans translation, donc sans transformation susceptible
   d'entrer en conflit avec une animation.
   C'est la version blanche du logo : le fond de la carte est sombre, et la
   version bleue, dont le disque est en navy, s'y effacerait. */
.orb-marque{position:absolute;inset:0;margin:auto;
  width:36%;height:36%;z-index:2;display:block;pointer-events:none;
  /* Deux ombres portées, pas une bordure : drop-shadow suit la transparence
     du fichier, donc le halo épouse le disque au lieu d'habiller un carré.
     La première, violette, désigne le centre du système ; la seconde pose
     la marque au-dessus des anneaux. Sans le halo, elle se lirait comme une
     neuvième bulle un peu plus grosse. */
  filter:drop-shadow(0 0 38px rgba(113,91,250,.60))
         drop-shadow(0 10px 26px rgba(6,20,40,.45))}
/* ---------- PIED DE PAGE ---------- */
/* =================== RESPONSIVE ===================
   Règle d'or mobile : le texte d'abord, le visuel en dernier.
   Aucun bloc à deux colonnes ne remonte son image au-dessus du titre.
   ================================================== */
/* ---------- PIED DE PAGE ----------
   Bande bleue, plus saturée que le navy du bloc d'appel à l'action qui la
   précède, pour que les deux ne se confondent pas. La marque blanche
   n'existe que là. Identique sur les six pages. */
.pied-col h4{font-family:var(--display);color:#fff;font-size:0.78rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 var(--stack-2)}
footer a{text-decoration:none;color:#D7E2EC;transition:color .16s ease}
footer a:hover{color:#C0A6FF}
.socials{display:flex;gap:var(--stack-1)}
.social{width:44px;height:44px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
/* Plaque pleine : le logo occupe tout le disque, pas de marge interieure. */
.social-plein{padding:0;border-color:transparent;background:none}
.social:hover{background:var(--violet);border-color:var(--violet);transform:translateY(-2px)}
/* Le bleu LinkedIn tombe à 2,16:1 sur le bleu du pied de page. Le logo est
   une marque déposée, sa couleur ne se change pas : on le détache avec un
   anneau clair, qui n'appartient pas au logo. */
.social-li{background:none;border-color:rgba(255,255,255,.34);padding:0}
.social-li:hover{background:none;border-color:rgba(255,255,255,.7)}
/* Appel a l'action secondaire du pied de page. Le pied n'est pas une
   section .dark : btn-ghost y prendrait --navy pour sa bordure et son
   texte, invisible sur le degrade bleu nuit. La fleche est portee ici
   et non par btn-fleche, qui n'existe pas sur toutes les pages. */
.pied-cta{margin-top:var(--stack-3);border-color:rgba(255,255,255,.42);color:#fff}
.pied-cta:hover{background:#fff;border-color:#fff;color:var(--navy)}
.pied-cta svg{width:17px;height:17px;flex:none;display:block;transition:transform .18s ease}
@media (max-width:980px){
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pied-grille{grid-template-columns:1fr}
  .pied-col{padding-top:0}
  /* Pied de page centre en mobile uniquement. Sous 640 px les trois
     colonnes sont empilees : un alignement a gauche laisserait des blocs
     de largeurs tres inegales. Au-dela, on garde l'alignement a gauche
     d'origine, qui structure la grille a trois colonnes.
     .pied-col passe en colonne flex parce que son bouton est un enfant
     direct du nav, hors de la liste : text-align seul ne centrerait pas
     un element en inline-flex.
     La ligne du bas est redeclaree ici et non dans la base : posee dans
     la base avant sa declaration d'origine, elle perdait contre son
     space-between a specificite egale. */
  .pied-grille{text-align:center}
  .pied-marque{align-items:center}
  .pied-col{display:flex;flex-direction:column;align-items:center}
  .pied-col ul{align-items:center}
  .socials{justify-content:center}
  .pied-bas>.wrap{justify-content:center;text-align:center}
}
@media (max-width:1100px){
  .cas-grid{gap:var(--stack-3)}
}
/* tablette portrait */
@media (max-width:980px){
  .nav-inner{grid-template-columns:auto 1fr;row-gap:var(--stack-2);padding-block:var(--stack-2)}
  .nav-links{order:3;grid-column:1 / -1;gap:var(--stack-3);justify-content:flex-start}
  .hero-grid{grid-template-columns:1fr;gap:var(--stack-4)}
  .hero-copy{max-width:none}
  .mosaic{max-width:440px;margin-inline:auto}
  .cas-grid{grid-template-columns:repeat(2,1fr)}
  .cta-card{grid-template-columns:1fr;gap:var(--stack-4)}
  .cta-txt{order:1}
  /* width:100% est obligatoire : tous les enfants du bloc sont en position
     absolue, donc sans elle il n'a aucune largeur propre et disparaît dès
     que margin-inline:auto le fait se centrer au lieu de s'étirer. */
  .cta-visual{order:2;width:100%;max-width:420px;aspect-ratio:1;margin-inline:auto;
    --lueur:18px;--etal:5px}
}
/* grand mobile et petite tablette */
@media (max-width:760px){
  .cta-card{padding:clamp(28px,5vw,40px);border-radius:var(--r-lg)}
  .cta-txt h2,.cta-txt p{max-width:none}
}
/* ---------------- MOBILE ---------------- */
@media (max-width:640px){
  :root{
    --gutter:18px;
    --flow-tight:14px;
    --flow-base:24px;
    --flow-cta:34px;
    --hero-y:40px;
    --hero-y-end:38px;
    --section-y:60px;
    --section-y-sm:40px;
  }
  .cas-grid{grid-template-columns:1fr;gap:var(--stack-3)}
  .cas h3{min-height:0}
  .mosaic{grid-template-columns:repeat(3,1fr);max-width:300px;gap:10px}
  .mosaic .tile:not(.full):not(.invite){display:none}
  .pager{margin-top:var(--stack-4)}

  /* filtres sur une seule ligne, glissement horizontal */
  .filterzone{padding-bottom:var(--stack-3)}
  .filter-hint{margin-bottom:var(--stack-3)}
  .filters-rail{
    position:relative;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .filters{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px;
  }
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none;scroll-snap-align:start;min-height:42px}
}
/* petit mobile */
@media (max-width:480px){
  :root{--gutter:16px}
  h1{font-size:clamp(1.68rem,7.2vw,2rem)}
  .lead{font-size:1.08rem}
  .nav-inner{min-height:0;padding-block:10px}
  .nav .btn-sm{padding:.55em 1em;font-size:1rem;min-height:42px}
  .nav-links{gap:var(--stack-2) var(--stack-3)}
  .nav-links>a{font-size:1rem}
  .btn-lg{font-size:1rem;padding:.9em 1.6em}
  .cas-logo{width:46px;height:46px}
  .cas-nom{font-size:1.02rem}
  .filter{font-size:1rem;padding:.48em 1em}
  .reassurance{gap:var(--stack-2) var(--stack-3)}
  .cta-txt{gap:var(--stack-3)}
}
/* très petits écrans, 320 à 380px */
@media (max-width:380px){
  :root{--gutter:14px}
  .cta-card{padding:24px 20px}
  .cas{padding:16px}
  .cas-client{gap:10px}
  .cas-logo{width:42px;height:42px}
  .tag{font-size:0.76rem;padding:.3em .65em}
  .pager button{min-width:38px;height:38px}
  .mosaic{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .cta-card{animation:none;background-size:100% 100%}
  /* Les orbites s'arrêtent net : une rotation réduite à 0,01 ms laisserait
     les bulles figées dans une position arbitraire. */
  .rail,.bulle{animation:none}
}
/* =================================================================
   SYSTÈME TYPOGRAPHIQUE ET RYTHME, source : src/styles/tokens.css
   Josefin Sans a des traits fins : graisse 500, jamais 300,
   et aucun texte lu sous 16px.
   ================================================================= */
:root{

  /* Échelle d'espacement, multiples de 8 */
--stack-2:16px; --stack-3:24px; 
  /* Rythme interne d'un bloc de texte */
}
body{
  font-size:var(--fs-base);
  font-weight:var(--fw-text);
  line-height:var(--lh-base);
  text-rendering:optimizeLegibility;
}
.lead{font-size:var(--fs-lead);font-weight:var(--fw-text)}
/* Surtitre : un libellé, jamais un pavé qui ressemble à un bouton */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65em;
  background:none;border:0;padding:0;border-radius:0;
  color:var(--violet);font-family:var(--display);font-weight:700;
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.18em;line-height:1.5;
}
/* Filet du surtitre : barre oblique, reprise du signe « / » de la charte. */
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor;flex:none;transform:rotate(-38deg)}
.dark .eyebrow,.foot-cta .eyebrow,.cta-txt .eyebrow{background:none;color:var(--violet-light)}
/* Rythme des blocs de texte, identique partout */
.hero-copy,.sec-head,.cta-txt,.foot-txt{gap:0}
.hero-copy>*+*,.sec-head>*+*,.cta-txt>*+*,.foot-txt>*+*{margin-top:var(--flow-base)}
.hero-copy .eyebrow+h1,
.sec-head .eyebrow+h2,
.cta-txt .eyebrow+h2,
.foot-txt .eyebrow+h2,
.sec-head .slash+.eyebrow,
.cta-txt .slash+.eyebrow,
.foot-txt .slash+.eyebrow{margin-top:var(--flow-tight)}
.hero-copy>.btn,.hero-copy>.halo-wrap,.hero-copy>div:last-child,
.cta-txt>.btn,.foot-txt>.btn{margin-top:var(--flow-cta)}
.cta-txt .btn+.reassurance,.cta-txt .reassurance+.sig,.foot-txt .btn+.sig{margin-top:var(--stack-2)}
/* ---------------- MOBILE : on respire davantage ---------------- */
@media (max-width:640px){
  :root{
    --flow-tight:16px;
    --flow-base:28px;     /* titre et sous-titre nettement séparés */
    --flow-cta:36px;
    --hero-y:44px; --hero-y-end:40px;
    --section-y:64px; --section-y-sm:44px;
    --head-gap:32px; --grid-gap:20px;
  }
  .sec-head{margin-bottom:var(--head-gap)}
}
@media (max-width:480px){
  :root{--flow-base:26px;--flow-cta:34px}
}
/* =================================================================
   MENU BURGER, tablette et mobile (<= 980px)
   Barre : logo à gauche, puis bouton d'action, puis burger.
   Le panneau entre par la gauche, l'arrière-plan passe en flou.
   ================================================================= */
.nav-cta{display:flex;justify-content:flex-end;align-items:center;gap:var(--stack-2)}
.burger{
  display:none;width:46px;height:46px;flex:none;padding:0;cursor:pointer;
  background:none;border:1.5px solid var(--line);border-radius:14px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.burger:hover{border-color:var(--violet);background:var(--violet-10)}
.burger span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--navy);
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;
}
.scrim{
  position:fixed;inset:0;z-index:80;
  background:rgba(14,46,73,.5);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s;
}
.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:90;
  width:min(86vw,370px);
  background:var(--navy);color:#fff;
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .36s cubic-bezier(.33,0,.2,1);
  box-shadow:0 0 50px rgba(0,0,0,.4);
  overflow-y:auto;overscroll-behavior:contain;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  visibility:hidden;
}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--stack-2);
  padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.14);
}
.drawer-close{
  width:44px;height:44px;flex:none;cursor:pointer;
  background:none;border:1.5px solid var(--violet-light);border-radius:12px;
  color:#fff;display:grid;place-items:center;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.drawer-close:hover{background:var(--violet);border-color:var(--violet)}
.drawer-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--stack-2);
  padding:20px 0;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.3;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:color var(--t-fast);
}
.drawer-nav a:last-child{border-bottom:0}
.drawer-nav a svg{width:17px;height:17px;flex:none;opacity:.55;transition:transform var(--t-fast),opacity var(--t-fast)}
.drawer-nav a:hover{color:var(--violet-light)}
.drawer-nav a:hover svg{transform:translateX(4px);opacity:1}
.drawer-nav a[aria-current]{color:var(--violet-light)}
.drawer-foot{margin-top:auto;padding:24px 22px 0}
.drawer-foot::before{content:"";display:block;height:1px;background:rgba(255,255,255,.14);margin-bottom:24px}
/* Exception assumée à la règle "jamais de bouton pleine largeur" :
   dans le tiroir, le bouton est la seule action, il occupe la largeur. */
.drawer-foot .btn{width:100%}
.drawer-foot .note{
  margin-top:14px;text-align:center;font-size:1rem;color:var(--on-navy-25);font-weight:var(--fw-text);
}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--stack-2);min-height:66px;padding-block:11px}
  .burger{display:inline-flex}
}
@media (min-width:981px){
  .drawer,.scrim{display:none}
}
@media (max-width:420px){
  .nav .btn-sm{padding:.55em .95em}
  .drawer{width:min(90vw,340px)}
}
@media (prefers-reduced-motion:reduce){
  .drawer{transition:none}
  .scrim{transition:none}
}
/* ---------- Tiroir : corrections ---------- */
/* Entrée par la droite */
.drawer{left:auto;right:0;transform:translateX(100%);box-shadow:0 0 50px rgba(0,0,0,.4)}
.drawer.open{transform:translateX(0)}
/* Le bouton d'action remonte sous les liens, il n'est plus collé en bas */
.drawer-foot{margin-top:0;padding-top:26px}
.drawer-foot::before{margin-bottom:26px}
/* Au survol, le bouton ne doit jamais se confondre avec le fond du tiroir */
.drawer .btn-primary:hover,
.drawer .btn-primary:focus-visible{background:var(--violet-light);color:var(--navy)}
/* Groupe dépliable, mêmes propositions qu'en desktop */
.drawer-group-btn{
  width:100%;background:none;border:0;cursor:pointer;color:#fff;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:var(--stack-2);
  padding:20px 0;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.3;
  transition:color var(--t-fast);
}
.drawer-group-btn:hover{color:var(--violet-light)}
.drawer-group-btn .chev{width:18px;height:18px;flex:none;opacity:.6;transition:transform .3s ease,opacity var(--t-fast)}
.drawer-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.dsub{
  display:flex!important;align-items:flex-start;gap:12px;
  padding:14px 0 14px 2px;border-bottom:0!important;text-decoration:none;
  justify-content:flex-start!important;
}
.dsub:last-child{padding-bottom:22px}
.dico{
  width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--violet),var(--sky));
}
.dico.alt{background:linear-gradient(140deg,var(--violet-light),var(--violet))}
.dico svg{width:20px;height:20px}
.dtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dtxt strong{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;color:#fff}
.dtxt small{font-size:1rem;line-height:1.4;color:var(--on-navy-70);font-weight:var(--fw-text)}
.dsub:hover .dtxt strong{color:var(--violet-light)}
/* ---------- Tiroir : corrections de survol et de hiérarchie ---------- */
/* La flèche n'avance que sur les liens de premier niveau.
   Les pictogrammes des expertises ne bougent jamais. */
.drawer-nav a svg{transform:none}
.drawer-nav>a svg{transition:transform var(--t-fast),opacity var(--t-fast)}
.drawer-nav>a:hover svg{transform:translateX(4px);opacity:1}
.dsub svg,.dsub:hover svg{transform:none!important}
.dico,.dsub:hover .dico{transform:none}
/* Titre et sous-titre d'une expertise : quatre écarts cumulés,
   famille, graisse, taille et couleur. */
.dtxt{gap:4px}
.dtxt strong{
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  line-height:1.25;letter-spacing:-.01em;color:#fff;
}
.dtxt small{
  font-family:var(--body);font-weight:var(--fw-text);font-size:1rem;
  line-height:1.4;color:var(--on-navy-25);letter-spacing:0;
}
.dsub:hover .dtxt small{color:var(--on-navy-70)}
/* =================================================================
   CENTRAGE OPTIQUE DES PASTILLES RONDES
   Un texte centré dans un rond est centré sur sa boîte de ligne,
   qui réserve de la place sous la ligne de base pour les jambages.
   Un sigle en capitales se retrouve donc décalé, et un accent comme
   le tréma de Ü aggrave le décalage. La valeur exacte dépend des
   métriques de la police : elle est mesurée au rendu par le script
   en bas de page, jamais estimée.
   ================================================================= */
.logo,.cas-logo,.dh-mark .inner,.dh-bar .mk-sm,.side-id .mk,.autre .mk,.social{
  display:flex;align-items:center;justify-content:center;
  line-height:1;text-align:center;
}
.logo>*,.cas-logo>*,.dh-mark .inner>*,.dh-bar .mk-sm>*,.side-id .mk>*,.autre .mk>*{
  display:block;line-height:1;max-width:100%;max-height:100%;
}
.logo img,.cas-logo img,.dh-mark .inner img,.side-id .mk img,.autre .mk img{
  object-fit:contain;
}
/* Décalage mesuré, posé par le script. Zéro tant qu'il n'a pas tourné. */
/* =================================================================
   MENU DÉROULANT DES EXPERTISES, desktop
   Même composant que sur la page d'accueil. En dessous de 980px,
   le relais est pris par le groupe dépliable du tiroir.
   ================================================================= */
.nav-trigger{
  position:relative;text-decoration:none;font-weight:600;font-size:var(--fs-sm);
  font-family:var(--body);color:inherit;background:none;border:0;cursor:pointer;
  line-height:1.5;padding:0 0 5px;display:inline-flex;align-items:center;gap:6px;
}
.nav-trigger::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--violet);transform:scaleX(0);transform-origin:right center;
  transition:transform .34s cubic-bezier(.33,0,.2,1);
}
.nav-trigger:hover::after,
.nav-trigger:focus-visible::after,
.nav-item.open .nav-trigger::after,
.nav-item.actif .nav-trigger::after{transform:scaleX(1);transform-origin:left center}
.nav-trigger .chev{width:14px;height:14px;flex:none;transition:transform .22s ease}
.mega{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,-8px);
  width:min(440px,calc(100vw - (var(--gutter) * 2)));
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(14,46,73,.16);
  padding:var(--stack-2);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:60;
}
/* Pont invisible : le survol ne se coupe pas entre le lien et le panneau. */
.mega::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:18px}
.mega-link{
  display:flex;gap:var(--stack-2);align-items:flex-start;
  padding:var(--stack-2);border-radius:var(--r-sm);text-decoration:none;
  transition:background .15s ease;
}
.mega-link:hover{background:var(--paper-alt)}
.mega-ico{
  flex:none;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--violet),var(--sky));
}
.mega-link:nth-child(2) .mega-ico{background:linear-gradient(140deg,var(--violet-light),var(--violet))}
.mega-txt strong{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.3;color:var(--navy)}
.mega-txt span{display:block;font-size:1rem;font-weight:var(--fw-text);color:var(--navy-70);line-height:1.5;margin-top:2px}
@media (max-width:980px){ .nav-item{display:none} }
/* =================================================================
   BLOCS AJOUTES LE 15 OCTOBRE 2026
   Composants repris a l'identique de la page Qui suis-je, pour que le
   site garde un seul systeme : paliers en trapeze, accordeon de FAQ,
   en-tete centre. Seul le tableau des types de mission est nouveau.
   ================================================================= */
.sec-head-centre{align-items:center;text-align:center}
/* Ecart entre un en-tete de bloc et son contenu.
   Le jeton n'existait que dans la requete mobile de cette page : en
   desktop, var(--head-gap) ne resolvait rien et le tableau se collait a
   son titre, a 0 px. Valeur reprise telle quelle de la page Qui suis-je,
   pour que les deux pages respirent pareil. */
:root{--head-gap:clamp(28px,3.5vw,48px)}
.sec-head{margin-bottom:var(--head-gap)}
/* Les deux boutons du fold sur une seule ligne.
   .hero-copy est borne a 44ch : c'est une mesure de TEXTE, elle sert a
   tenir la longueur de ligne du titre et du chapeau. Elle n'a aucune
   raison de borner une rangee de boutons, et c'est pourtant elle qui
   faisait passer le second bouton a la ligne : 231 + 224 px de boutons
   pour 416 px de mesure.
   La rangee prend donc sa largeur naturelle et deborde cette mesure, en
   restant tres largement a l'interieur de la colonne de grille, qui fait
   plus de 600 px. Sous 980 px la grille repasse sur une colonne, la
   mesure saute et le repli redevient necessaire. */
.hero-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;
  width:max-content}
@media (max-width:980px){
  .hero-actions{flex-wrap:wrap;width:auto;gap:var(--stack-2)}
}
.hero-actions .btn svg{width:18px;height:18px;flex:none;display:block;
  transition:transform .18s ease}
.hero-actions .btn:hover svg{transform:translateY(3px)}
/* Ancre de descente depuis le fold. La barre de navigation est collante
   sur 75 px en desktop et 72 en mobile : sans cette marge, le titre de
   la zone visee passerait dessous. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
#cas{scroll-margin-top:92px}
@media (max-width:640px){ #cas{scroll-margin-top:88px} }
/* ---------- TABLEAU DES TYPES DE MISSION ----------
   Un vrai tableau, pas une grille de div : c'est la forme que les moteurs
   de reponse extraient le mieux, et la seule que lit correctement un
   lecteur d'ecran en mode tableau.
   Le conteneur gere le defilement horizontal sous 760 px. overflow-x
   impose overflow-y, d'ou le padding-block : sans lui, le contour du
   tableau serait rogne. */
/* Le cadre porte le fond, l'arrondi et le filet, pas le tableau :
   overflow:hidden sur un element table ne rogne pas ses lignes de maniere
   fiable, la derniere rangee depassait l'angle arrondi. Pose sur le
   conteneur, qui defile deja en horizontal, le contour reste net et fixe
   pendant que le contenu glisse dessous. */
.tmissions-cadre{overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--paper);border-radius:var(--r-md);box-shadow:0 0 0 1px var(--line)}
.tmissions{width:100%;min-width:620px;border-collapse:collapse;text-align:left;
  background:none}
.tmissions th,.tmissions td{padding:clamp(12px,1.3vw,16px) clamp(14px,1.5vw,20px);
  vertical-align:top;font-size:0.97rem;line-height:1.45}
.tmissions thead th{font-family:var(--display);font-weight:700;font-size:0.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet-ink);
  background:var(--violet-10);white-space:nowrap}
.tmissions tbody tr+tr{border-top:1px solid var(--line)}
.tmissions tbody th{font-family:var(--display);font-weight:700;font-size:1rem;
  color:var(--navy);white-space:nowrap}
.tmissions td{color:var(--navy-70);font-weight:var(--fw-text)}
.tmissions .num{white-space:nowrap}
/* ---------- FAQ, format repris de la page d'accueil ----------
   Titre a gauche, cartes a droite. Le fond decoratif de l'accueil n'est
   pas repris : il appartient a cette page-la. */
.faq-grille{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);
  gap:clamp(28px,4vw,72px);align-items:start}
/* En deux colonnes, le titre est a cote des cartes : aucun ecart vertical
   a menager. Il revient quand la grille repasse sur une colonne. */
.faq-grille .sec-head{margin-bottom:0;align-items:flex-start;text-align:left}
.faq{display:flex;flex-direction:column;gap:var(--stack-2)}
.acc-item{
  position:relative;background:var(--paper);border:1px solid #E3E7F0;border-radius:var(--r-lg);
  padding-inline:clamp(20px,2vw,28px);overflow:hidden;
  box-shadow:0 10px 26px rgba(14,46,73,.08), 0 2px 6px rgba(14,46,73,.05);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
/* Lisere de charte sur le bord gauche. */
.acc-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--violet),var(--sky));
  opacity:0;transition:opacity .2s ease}
.acc-item:hover{box-shadow:0 14px 32px rgba(14,46,73,.12);transform:translateY(-1px)}
.acc-item.open{border-color:#CDBFFC;box-shadow:0 18px 40px rgba(84,56,223,.16)}
.acc-item.open::before,.acc-item:hover::before{opacity:1}
.acc-q{
  width:100%;background:none;border:0;cursor:pointer;color:inherit;text-align:left;
  font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.35;
  padding-block:clamp(16px,1.6vw,22px);padding-inline:0;
  display:flex;justify-content:space-between;gap:var(--stack-3);align-items:center}
.acc-q .ico{
  flex:none;width:28px;height:28px;border-radius:var(--r-pill);
  background:var(--violet-20);color:var(--violet);
  display:grid;place-items:center;font-size:1.25rem;line-height:1;
  transition:transform .32s ease,background .2s ease,color .2s ease}
.acc-item.open .acc-q .ico{transform:rotate(45deg);background:var(--violet);color:#fff}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel>.acc-inner{overflow:hidden}
.acc-panel p{padding-bottom:clamp(16px,1.6vw,22px);color:var(--navy-70);font-weight:var(--fw-text);max-width:62ch}
@media (max-width:900px){
  .faq-grille{grid-template-columns:minmax(0,1fr)}
  .faq-grille .sec-head{margin-bottom:var(--head-gap)}
}