/* =============================================================================
   trouverunfabricant.fr — design system
   Écrit à la main : pas d'étape de build disponible (Node absent de l'hôte).
   Tout est piloté par des jetons, pour qu'une évolution de charte ne demande
   pas de reprendre les composants un par un.
   ============================================================================= */

:root{
  /* Couleurs — bleu nuit, blanc, bleu technique, gris très clair.
     Quatre teintes seulement : la tenue vient de l'espace et du trait, pas
     d'un dégradé. */
  --c-navy:#0a1729;      --c-navy-soft:#15263f;   --c-ink:#0f1c2e;
  --c-body:#3f4b5c;      --c-muted:#6a7686;
  /* Même gris, deux crans plus dense. --c-muted convient sur blanc (4,62:1)
     mais tombe à 4,34 sur --c-bg-soft et 4,11 sur --c-bg-tint : sous le seuil
     AA. Les mentions légales d'un formulaire changent de fond selon la page,
     et ce sont justement celles qu'on ne peut pas se permettre de rendre
     illisibles. Cette valeur passe sur les trois fonds clairs. */
  --c-muted-lisible:#646e7d;
  --c-line:#e3e7ee;      --c-line-soft:#eff2f6;   --c-line-strong:#cdd5e0;
  --c-bg:#ffffff;        --c-bg-soft:#f6f8fb;     --c-bg-tint:#edf2f9;
  --c-accent:#1d6bff;    --c-accent-dark:#1550c8; --c-accent-soft:#e8f0ff;
  --c-ok:#0f7a52;        --c-warn:#8a5a00;        --c-warn-bg:#fdf6e7;

  /* Trait de plan : la trame technique qui structure les fonds clairs. */
  --c-blueprint:rgba(29,107,255,.10);
  --c-blueprint-soft:rgba(29,107,255,.05);

  /* Registre sombre du héros. Quatre valeurs de bleu nuit plutôt qu'un aplat :
     c'est l'écart entre elles qui crée la profondeur, pas une ombre portée. */
  --d-fond:#06101d;      --d-fond-2:#091827;   --d-fond-3:#0e2236;
  --d-texte:#f7f9fc;     --d-texte-2:#c3d0de;  --d-ligne:rgba(220,228,236,.14);
  --d-ligne-forte:rgba(220,228,236,.26);
  --d-accent:#2f7cf6;    --d-accent-clair:#7fb0ff;
  /* Filet métallique : un liseré, pas un reflet. */
  --d-metal:linear-gradient(112deg,rgba(220,228,236,.34) 0%,rgba(220,228,236,.06) 32%,
                            rgba(220,228,236,.30) 55%,rgba(220,228,236,.05) 78%,
                            rgba(220,228,236,.28) 100%);

  /* Typographie — pile système : aucune requête réseau, rendu immédiat. */
  --f-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:3rem;
  --fs-5xl:3.75rem;

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;   --sp-9:6rem;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;
  --shadow:0 1px 2px rgba(10,23,41,.05),0 8px 24px -12px rgba(10,23,41,.13);
  --shadow-lift:0 2px 4px rgba(10,23,41,.05),0 18px 40px -20px rgba(10,23,41,.22);
  --wrap:1200px;
  --t:.18s cubic-bezier(.32,.72,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--f-sans); font-size:var(--fs-base); line-height:1.65;
  color:var(--c-body); background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--c-ink); line-height:1.2; letter-spacing:-.02em; margin:0 0 var(--sp-3)}
h1{font-size:clamp(2rem,4.4vw,var(--fs-4xl)); font-weight:800; letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,3vw,var(--fs-3xl)); font-weight:750}
h3{font-size:var(--fs-xl); font-weight:700}
p{margin:0 0 var(--sp-4)}
a{color:var(--c-accent); text-underline-offset:3px}
a:hover{color:var(--c-accent-dark)}
img,svg{max-width:100%; height:auto}
ul{margin:0 0 var(--sp-4); padding-left:1.2em}

:focus-visible{outline:3px solid var(--c-accent); outline-offset:2px; border-radius:2px}

.wrap{width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto}
.section{padding:var(--sp-8) 0}
.section--tint{background:var(--c-bg-soft)}
.section__head{max-width:62ch; margin-bottom:var(--sp-6)}
.eyebrow{
  display:inline-block; font-size:var(--fs-xs); font-weight:700;
  /* accent-dark et non accent : à 13 px, le bleu clair tombait à 4,29:1,
     sous le seuil AA pour du texte normal. */
  letter-spacing:.09em; text-transform:uppercase; color:var(--c-accent-dark);
  margin-bottom:var(--sp-2);
}
.lead{font-size:var(--fs-lg); color:var(--c-body); max-width:62ch}
.muted{color:var(--c-muted)}

/* --- Boutons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:48px; padding:.75rem 1.4rem; border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:650; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn--primary{background:var(--c-accent); color:#fff}
.btn--primary:hover{background:var(--c-accent-dark); color:#fff}
.btn--ghost{background:#fff; color:var(--c-ink); border-color:var(--c-line)}
.btn--ghost:hover{border-color:var(--c-ink); color:var(--c-ink)}
.btn--dark{background:var(--c-navy); color:#fff}
.btn--dark:hover{background:var(--c-navy-soft); color:#fff}
.btn--sm{min-height:40px; padding:.5rem 1rem; font-size:var(--fs-xs)}

/* --- Entête ----------------------------------------------------------------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--c-line);
  /* Le passage blanc → nuit se fait au défilement : sans transition, la barre
     change d'un coup au vingt-cinquième pixel. --t vaut 180 ms, la même durée
     que partout ailleurs sur le site. */
  transition:background-color var(--t), border-color var(--t)}
.hdr__nav a,.hdr__logo,.hdr__burger,.hdr .btn{transition:color var(--t), border-color var(--t)}
.hdr__in{display:flex; align-items:center; gap:var(--sp-5); min-height:68px}
.hdr__logo{display:inline-flex; color:var(--c-navy); flex:0 0 auto}
.hdr__logo svg{height:30px; width:auto; display:block}
.hdr__nav{display:flex; gap:var(--sp-5); margin-left:auto}
.hdr__nav a{color:var(--c-ink); text-decoration:none; font-size:var(--fs-sm); font-weight:550}
.hdr__nav a:hover{color:var(--c-accent)}
.hdr__cta{display:flex; gap:var(--sp-2); align-items:center}
.hdr__burger{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-sm); cursor:pointer}
.hdr__drawer{display:none; border-top:1px solid var(--c-line); background:#fff; padding:var(--sp-4) 0}
.hdr__drawer[data-open="true"]{display:block}
.hdr__drawer a{display:block; padding:.7rem 0; color:var(--c-ink); text-decoration:none;
  font-weight:600; border-bottom:1px solid var(--c-line-soft)}

/* Variante « héros sombre ».
 *
 * Deux états, et un seul est sombre.
 *
 * Au repos, la barre est blanche comme partout ailleurs. Le commentaire
 * précédent annonçait une barre transparente posée sur le héros ; la mise en
 * page ne le permet pas. L'entête est « sticky », donc dans le flux : le héros
 * commence à soixante-neuf pixels, sous elle et non derrière. Rendue
 * transparente, elle ne laisse voir que le blanc du corps de page — et c'est
 * exactement ce qui se produisait, avec des liens gris très clair posés dessus,
 * à 1,24 pour 1. Le fond blanc l'emportait par ordre de déclaration, mais les
 * règles de couleur ci-dessous, plus spécifiques, s'appliquaient quand même.
 * Un fond d'un état, un texte de l'autre.
 *
 * Tout ce qui suit est donc attaché à [data-defile="true"] : la couleur du
 * texte ne change que lorsque le fond a changé.
 */
.hdr--sur-sombre[data-defile="true"]{
  background:rgba(6,16,29,.92); border-bottom-color:var(--d-ligne);
  backdrop-filter:saturate(140%) blur(10px);
}
.hdr--sur-sombre[data-defile="true"] .hdr__logo{color:var(--d-texte)}
/* Le sigle suit déjà currentColor : rien à forcer. Ses deux barres portent une
   opacité voulue, un peu trop discrète sur fond nuit — on la relève, sans
   toucher au cercle, qui n'a pas de remplissage. */
.hdr--sur-sombre[data-defile="true"] .hdr__logo svg rect{opacity:.88}
.hdr--sur-sombre[data-defile="true"] .hdr__nav a{color:rgba(220,228,236,.86)}
.hdr--sur-sombre[data-defile="true"] .hdr__nav a:hover{color:#fff}
.hdr--sur-sombre[data-defile="true"] .btn--ghost{
  color:var(--d-texte); border-color:var(--d-ligne-forte); background:transparent;
}
.hdr--sur-sombre[data-defile="true"] .btn--ghost:hover{border-color:var(--d-texte); color:#fff}
/* Le bleu clair du registre nuit, --d-accent, ne donne que 3,94 pour 1 avec du
   blanc — et l'étiquette du bouton fait treize pixels, donc du texte normal au
   sens de la norme. On garde le bleu d'accent du site, qui passe à 4,57 : même
   couleur qu'au repos, le bouton ne change pas d'identité en défilant. */
.hdr--sur-sombre[data-defile="true"] .btn--primary{background:var(--c-accent); color:#fff}
/* Le fond blanc du bouton vient de la règle de base : sur la barre nuit, il
   laisserait une pastille blanche avec une icône presque blanche dessus. */
.hdr--sur-sombre[data-defile="true"] .hdr__burger{
  color:var(--d-texte); border-color:var(--d-ligne-forte); background:transparent;
}

/* Les libellés de navigation ne se coupent jamais en deux : on retire le
   bouton secondaire avant d'en arriver là, puis toute la barre. */
.hdr__nav a{white-space:nowrap}
@media (max-width:1100px){
  .hdr__cta .btn--ghost{display:none}
  .hdr__nav{gap:var(--sp-4)}
}
@media (max-width:900px){
  .hdr__nav{display:none}
  .hdr__burger{display:inline-flex; margin-left:auto}
  .hdr__in{gap:var(--sp-3)}
}
/* En dessous de 430 px, le logo, le bouton d'action et le menu ne tiennent plus
   sur une ligne : la barre poussait la page à 424 px de large et tout le site
   défilait horizontalement. On retire le bouton, que le menu déroulant porte
   déjà en dernière entrée. */
@media (max-width:429px){
  .hdr__cta .btn{display:none}
  .hdr__burger{margin-left:auto}
}

/* --- Héros -------------------------------------------------------------------
   Fond bleu nuit, texte à gauche, visuel à droite. La profondeur vient de
   trois couches très faibles — une trame de plan, un halo, quelques repères —
   et d'aucune ombre portée. Un fond sombre premium se reconnaît à ce qu'on n'y
   voit pas d'effet.
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(var(--sp-7),6vw,var(--sp-9)) 0 clamp(var(--sp-8),6vw,var(--sp-9));
  background:var(--d-fond); color:var(--d-texte-2);
}
/* Couche 1 — trame de plan, portée sur toute la largeur, très atténuée. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(rgba(220,228,236,.045) 1px,transparent 1px) 0 0/78px 78px,
    linear-gradient(90deg,rgba(220,228,236,.045) 1px,transparent 1px) 0 0/78px 78px;
  -webkit-mask-image:radial-gradient(120% 90% at 62% 34%,#000 12%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 62% 34%,#000 12%,transparent 78%);
}
/* Couche 2 — halo bleu, décentré derrière le visuel. Aucun dégradé visible :
   il éclaire, il ne colore pas. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(780px 520px at 72% 26%,rgba(47,124,246,.20) 0%,transparent 68%),
    radial-gradient(620px 460px at 8% 82%,rgba(14,34,54,.85) 0%,transparent 70%),
    linear-gradient(168deg,var(--d-fond-2) 0%,var(--d-fond) 58%,var(--d-fond-3) 100%);
}
.hero .wrap{position:relative; z-index:1}
.hero__grid{
  display:grid; gap:clamp(var(--sp-6),4vw,var(--sp-8));
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  align-items:center;
}
.hero__copy{max-width:38rem}

/* Sur-titre : un repère technique, pas une étiquette marketing. */
.hero__eyebrow{
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--d-accent-clair);
  margin:0 0 var(--sp-4); padding-left:var(--sp-4);
}
.hero__eyebrow::before{
  content:""; position:absolute; left:0; top:50%; width:1px; height:1.35em;
  transform:translateY(-50%); background:var(--d-accent);
}
.hero__eyebrow::after{
  content:""; width:30px; height:1px; background:currentColor; opacity:.4;
}

.hero h1{
  color:var(--d-texte); margin-bottom:var(--sp-4);
  /* Calé sur « pour votre projet industriel. », la plus longue des deux lignes :
     un titre qui se casse en trois n'est plus un titre. */
  font-size:clamp(2.05rem,2.85vw,2.6rem); line-height:1.1; letter-spacing:-.03em;
  font-weight:800;
}
.hero h1 .nowrap-line{display:block; text-wrap:pretty}
/* Accent sur deux mots, tenu par un filet fin plutôt que par une couleur. */
.hero h1 .accent{
  color:var(--d-texte); box-shadow:inset 0 -2px 0 0 rgba(47,124,246,.55);
  padding-bottom:.06em;
}
.hero__sub{
  font-size:var(--fs-lg); color:var(--d-texte-2); margin-bottom:var(--sp-6);
  max-width:44ch; line-height:1.62;
}
.hero__actions{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin:0 0 var(--sp-6)}

/* Filet horizontal, puis la ligne de repères. */
.hero__filet{height:1px; background:var(--d-ligne); margin:var(--sp-6) 0 var(--sp-4)}
.hero__reperes{
  display:flex; gap:var(--sp-4); flex-wrap:wrap; margin:0;
  font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(220,228,236,.62);
}
.hero__reperes li{list-style:none; position:relative; padding-left:.9rem}
.hero__reperes li::before{
  content:""; position:absolute; left:0; top:.52em; width:4px; height:4px;
  border:1px solid var(--d-accent-clair); border-radius:1px; opacity:.85;
}

/* Boutons sur fond sombre. */
.hero .btn--primary{background:var(--d-accent); color:#fff; border-color:transparent}
.hero .btn--primary:hover{background:#1f6ae4; color:#fff}
.hero .btn--ghost{
  background:transparent; color:var(--d-texte); border-color:var(--d-ligne-forte);
}
.hero .btn--ghost:hover{border-color:var(--d-texte); color:var(--d-texte); background:rgba(255,255,255,.04)}
.hero .btn--dark{background:var(--d-texte); color:var(--d-fond)}
.hero .btn--dark:hover{background:#fff; color:var(--d-fond)}

/* --- Visuel du héros ---------------------------------------------------------
   L'illustration ne s'affiche pas dans une carte : elle est fondue dans le fond
   par un masque sur ses bords, et posée sur un cadre au trait métallique très
   pâle. Le sujet reste au centre, non atténué.
   -------------------------------------------------------------------------- */
.hero__visual{position:relative; justify-self:end; width:100%; max-width:44rem}
/* Halo court derrière le sujet : il pose l'image dans la profondeur du fond
   sans dessiner de contour. */
.hero__visual::before{
  content:""; position:absolute; inset:6% -4% 2% 2%; z-index:0; border-radius:50%;
  background:radial-gradient(60% 60% at 52% 46%,rgba(47,124,246,.22) 0%,transparent 72%);
  filter:blur(28px);
}
.hero__visual picture,
.hero__visual img{display:block; width:100%; height:auto; position:relative; z-index:1}
.hero__visual img{
  /* L'illustration arrive sur fond blanc. Deux masques la fondent dans le
     sombre : un ovale qui protège le sujet au centre, et un dégradé qui éteint
     franchement le bord gauche, celui qui touchait le texte. Le personnage, le
     téléphone et les cartes restent hors de toute atténuation. */
  /* Deux dégradés croisés, un par axe. À gauche l'extinction est franche —
     c'est le bord qui touchait le texte. À droite elle reste légère, pour ne
     pas effacer les cartes qui s'y trouvent. En bas elle est nette, en haut
     à peine marquée : le visage doit rester intact. */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 5%,#000 17%,#000 91%,rgba(0,0,0,.3) 100%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 4%,#000 11%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 5%,#000 17%,#000 91%,rgba(0,0,0,.3) 100%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 4%,#000 11%,#000 78%,transparent 100%);
  mask-composite:intersect;
}
/* Repère d'angle, discret, côté visuel. */
.hero__visual::after{
  content:""; position:absolute; right:0; top:-1.2rem; width:38px; height:38px;
  border-top:1px solid var(--d-ligne); border-right:1px solid var(--d-ligne);
  border-radius:0 var(--r-md) 0 0; z-index:2; opacity:.8;
}

/* Panneau de plan, tant que le visuel n'est pas en place. */
.hero__plan{
  position:relative; aspect-ratio:4/3; border:1px solid var(--d-ligne);
  border-radius:var(--r-lg); background:
    linear-gradient(rgba(220,228,236,.05) 1px,transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg,rgba(220,228,236,.05) 1px,transparent 1px) 0 0/36px 36px,
    var(--d-fond-2);
  overflow:hidden;
}
.hero__plan::before,
.hero__plan::after{
  content:""; position:absolute; width:44px; height:44px;
  border:1px solid var(--d-accent); opacity:.4;
}
.hero__plan::before{top:18px; left:18px; border-right:0; border-bottom:0}
.hero__plan::after{right:18px; bottom:18px; border-left:0; border-top:0}
.hero__plan span{
  position:absolute; inset:auto 0 var(--sp-5) 0; text-align:center;
  font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(220,228,236,.55);
}

/* Sortie du héros : un dégradé court vers la section suivante, plus un filet.
   Pas de vague, pas de biseau — juste une frontière tenue. */
.hero__sortie{
  position:absolute; inset:auto 0 0 0; height:120px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(6,16,29,.4) 42%,var(--c-bg-soft) 100%);
}

.search{
  display:flex; gap:var(--sp-2); background:#fff; border:1px solid var(--c-line-strong);
  border-radius:var(--r-lg); padding:var(--sp-2); box-shadow:var(--shadow);
  transition:border-color var(--t), box-shadow var(--t);
}
/* Sur le fond sombre, la barre devient le point le plus clair de la page :
   ivoire, liseré très fin, aucune ombre portée — c'est le contraste qui la
   détache, pas un relief. */
.hero .search{
  background:var(--d-texte); border-color:rgba(255,255,255,.28);
  box-shadow:0 0 0 1px rgba(6,16,29,.35), 0 18px 46px -28px rgba(0,0,0,.7);
}
.hero .search:focus-within{
  border-color:var(--d-accent-clair);
  box-shadow:0 0 0 3px rgba(47,124,246,.28), 0 18px 46px -28px rgba(0,0,0,.7);
}
.hero .search input{color:var(--c-ink)}
.hero .search input::placeholder{color:#7b8899}
.hero .search .btn{background:var(--d-accent); color:#fff; border-color:transparent}
.hero .search .btn:hover{background:#1f6ae4}
.search__label{
  display:block; font-size:var(--fs-sm); font-weight:650; color:var(--c-ink);
  margin-bottom:var(--sp-2);
}
.search input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; padding:.85rem 1rem;
  font:inherit; font-size:var(--fs-base); color:var(--c-ink);
}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft)}
.search__hints{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3)}
.search__hint{
  font-size:var(--fs-xs); color:var(--c-muted); background:var(--c-bg-soft);
  border:1px solid var(--c-line); border-radius:var(--r-full); padding:.3rem .7rem;
  text-decoration:none;
}
.search__hint:hover{border-color:var(--c-accent); color:var(--c-accent)}
/* Dans le héros : des repères de filtre, fins, alignés, sans remplissage. */
.hero .search__hints{margin-top:var(--sp-4); gap:var(--sp-3)}
.hero .search__hint{
  background:transparent; border-color:var(--d-ligne); border-radius:var(--r-sm);
  color:rgba(220,228,236,.78); letter-spacing:.02em; padding:.32rem .72rem;
  transition:border-color var(--t), color var(--t), background var(--t);
}
.hero .search__hint:hover{
  border-color:var(--d-accent-clair); color:var(--d-texte); background:rgba(47,124,246,.10);
}
@media (max-width:620px){
  .search{flex-direction:column}
  .search .btn{width:100%}
}

/* --- Grilles et cartes ------------------------------------------------------ */
.grid{display:grid; gap:var(--sp-4)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:var(--sp-5); text-decoration:none; color:inherit;
  transition:border-color .16s ease, box-shadow .16s ease;
}
a.card:hover{border-color:var(--c-ink); box-shadow:var(--shadow)}
.card__title{font-size:var(--fs-lg); font-weight:700; color:var(--c-ink); margin:0}
.card__meta{font-size:var(--fs-xs); color:var(--c-muted)}
.card__text{font-size:var(--fs-sm); margin:0; flex:1}
.card__tags{display:flex; gap:var(--sp-1); flex-wrap:wrap; margin-top:var(--sp-2)}
.tag{
  font-size:var(--fs-xs); color:var(--c-body); background:var(--c-bg-soft);
  border:1px solid var(--c-line); border-radius:var(--r-sm); padding:.2rem .5rem;
}
.tag--accent{background:var(--c-accent-soft); border-color:#cfe0ff; color:var(--c-accent-dark)}
.badge{
  display:inline-flex; align-items:center; gap:.3em; font-size:var(--fs-xs);
  font-weight:700; border-radius:var(--r-full); padding:.2rem .6rem;
}
.badge--verified{background:#e7f5ee; color:var(--c-ok)}
.badge--premium{background:var(--c-navy); color:#fff}
.badge--demo{background:var(--c-warn-bg); color:var(--c-warn); border:1px solid #f0dfb8}

/* --- Étapes ----------------------------------------------------------------- */
.steps{counter-reset:s; display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.step{position:relative; padding-top:var(--sp-5)}
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; top:0; left:0; font-size:var(--fs-sm); font-weight:800;
  color:var(--c-accent); letter-spacing:.05em;
}
.step h3{font-size:var(--fs-lg); margin-bottom:var(--sp-2)}
.step p{font-size:var(--fs-sm); margin:0}

/* --- Bandeau démonstration -------------------------------------------------- */
.demo-note{
  background:var(--c-warn-bg); border:1px solid #f0dfb8; border-left-width:4px;
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); color:var(--c-warn); margin-bottom:var(--sp-5);
}

/* --- Filtres et annuaire ---------------------------------------------------- */
.layout{display:grid; gap:var(--sp-6); grid-template-columns:270px 1fr; align-items:start}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
.filters{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:var(--sp-5)}
.filters h2{font-size:var(--fs-base); margin-bottom:var(--sp-4)}
.filters fieldset{border:0; margin:0 0 var(--sp-5); padding:0}
.filters legend{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--c-muted); margin-bottom:var(--sp-2); padding:0}
.filters select,.filters input[type=search]{
  width:100%; padding:.6rem .7rem; font:inherit; font-size:var(--fs-sm);
  border:1px solid var(--c-line); border-radius:var(--r-sm); background:#fff; color:var(--c-ink);
}
.results__head{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4)}
.pager{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-6)}
.pager a,.pager span{
  min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--c-line); border-radius:var(--r-sm); text-decoration:none;
  font-size:var(--fs-sm); color:var(--c-ink);
}
.pager .is-current{background:var(--c-navy); color:#fff; border-color:var(--c-navy)}

/* --- Fiche fabricant -------------------------------------------------------- */
.sheet{display:grid; gap:var(--sp-6); grid-template-columns:1fr 320px; align-items:start}
@media (max-width:980px){.sheet{grid-template-columns:1fr}}
.sheet__aside{position:sticky; top:88px; display:grid; gap:var(--sp-4)}
.panel{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:var(--sp-5)}
.panel h2{font-size:var(--fs-base); margin-bottom:var(--sp-3)}
.dl{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-4); margin:0; font-size:var(--fs-sm)}
.dl dt{color:var(--c-muted)}
.dl dd{margin:0; color:var(--c-ink)}
.chips{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin:0; padding:0; list-style:none}

/* --- Fil d'Ariane ----------------------------------------------------------- */
.crumbs{font-size:var(--fs-xs); color:var(--c-muted); padding:var(--sp-4) 0 0}
.crumbs a{color:var(--c-muted)}
.crumbs a:hover{color:var(--c-accent)}

/* --- FAQ -------------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--c-line); padding:var(--sp-4) 0}
.faq summary{font-weight:650; color:var(--c-ink); cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--c-accent); font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin:var(--sp-3) 0 0; font-size:var(--fs-sm); max-width:70ch}

/* --- Pied de page ----------------------------------------------------------- */
.ftr{background:var(--c-navy); color:#c9d3e0; margin-top:var(--sp-9); padding:var(--sp-8) 0 var(--sp-5)}
.ftr__grid{display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ftr__logo{color:#fff; display:inline-flex; margin-bottom:var(--sp-3)}
.ftr__logo svg{height:26px; width:auto}
.ftr h3{color:#fff; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--sp-3)}
.ftr ul{list-style:none; padding:0; margin:0}
.ftr li{margin-bottom:var(--sp-2)}
.ftr a{color:#c9d3e0; text-decoration:none; font-size:var(--fs-sm)}
.ftr a:hover{color:#fff}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:var(--sp-6);
  padding-top:var(--sp-4); font-size:var(--fs-xs); display:flex; gap:var(--sp-4);
  justify-content:space-between; flex-wrap:wrap}

.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--sp-4); top:var(--sp-4); z-index:100; background:#fff;
  padding:.6rem 1rem; border-radius:var(--r-sm); border:1px solid var(--c-line)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* =============================================================================
   Utilitaires
   La politique de sécurité interdit les styles en ligne (style-src 'self').
   Ces classes remplacent les quelques ajustements ponctuels des gabarits :
   la politique reste stricte, sans 'unsafe-inline'.
   ============================================================================= */
.u-mt-1{margin-top:.75rem}   .u-mt-2{margin-top:1.5rem}   .u-mt-3{margin-top:2.5rem}
.u-mb-1{margin-bottom:.75rem}
.u-m0{margin:0}
.u-pt-1{padding-top:1.5rem}  .u-pt-2{padding-top:2rem}
.u-w-full{width:100%}
.u-narrow{max-width:52rem}   .u-mid{max-width:56rem}      .u-tight{max-width:34ch}
.u-fs-sm{font-size:var(--fs-sm)}  .u-fs-xs{font-size:var(--fs-xs)}
.u-fs-base{font-size:var(--fs-base)}
.u-fs-card{font-size:1.0625rem}   .u-fs-card-lg{font-size:1.125rem}
.u-row{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.u-lift{margin-top:-.25rem}

/* =============================================================================
   Formulaires
   ============================================================================= */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

.form{display:grid; gap:var(--sp-5); max-width:44rem}
.form fieldset{border:0; margin:0; padding:0; display:grid; gap:var(--sp-4)}
.form legend{
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--c-muted); padding:0 0 var(--sp-2)
}
.field{display:grid; gap:var(--sp-2)}
.field > label{font-size:var(--fs-sm); font-weight:600; color:var(--c-ink)}
.field .req{color:var(--c-accent); font-weight:700}
.field__hint{font-size:var(--fs-xs); color:var(--c-muted); margin:0; line-height:1.45}
.field__hint:empty{display:none}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:var(--fs-base); color:var(--c-ink);
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-sm);
  padding:.7rem .85rem; min-height:46px
}
.field textarea{min-height:9rem; resize:vertical; line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft)
}
/* Deux champs côte à côte doivent aligner leurs libellés et leurs contrôles,
   que l'un porte une note d'aide ou non. Les lignes ne s'étirent pas, et la
   note occupe la même hauteur des deux côtés — vide comprise. */
.field--half{display:grid; gap:var(--sp-4); grid-template-columns:1fr 1fr;
  align-items:start}
.field--half > .field{align-content:start}
/* Hauteur imposée, identique qu'il y ait une note ou non : c'est ce qui met
   les deux contrôles sur la même ligne. Une note plus longue reste lisible,
   elle déborde simplement sur la ligne suivante. */
.field--half .field__hint,
.field--half .field__hint:empty{display:block; min-height:1.25rem; line-height:1.25rem}
.field.is-error input,.field.is-error select,.field.is-error textarea{
  border-color:#b3261e; box-shadow:0 0 0 3px #fdecea
}
.field__error{font-size:var(--fs-xs); color:#b3261e; margin:0; font-weight:600}

.alert{
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm);
  border:1px solid var(--c-line); background:var(--c-bg-soft); margin:0
}
.alert--error{background:#fdecea; border-color:#f3c4bf; color:#8c1d18}
.alert--ok{background:#e7f5ee; border-color:#bfe3d1; color:var(--c-ok)}

.form__rgpd{font-size:var(--fs-xs); color:var(--c-muted-lisible); max-width:62ch; margin:0}
.form__rgpd a{color:var(--c-muted-lisible); text-decoration:underline}
.form__rgpd a:hover{color:var(--c-accent)}
.form__actions{display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap}

.confirm{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:var(--sp-7) var(--sp-6); text-align:center; box-shadow:var(--shadow)
}
.confirm__ref{
  display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-xl); font-weight:700; letter-spacing:.04em; color:var(--c-navy);
  background:var(--c-bg-tint); border-radius:var(--r-md); padding:.6rem 1.2rem;
  margin:var(--sp-4) 0
}
.confirm__next{text-align:left; max-width:40rem; margin:var(--sp-6) auto 0}

@media (max-width:560px){
  .field--half{grid-template-columns:1fr}
}

/* =============================================================================
   Refonte — rythme des sections, cartes premium, trame d'ingénierie
   ============================================================================= */

/* --- Rythme ----------------------------------------------------------------- */
.section{padding:clamp(var(--sp-7),6vw,var(--sp-9)) 0}
.section--tint{background:var(--c-bg-soft); border-block:1px solid var(--c-line)}
.section--dark{background:var(--c-navy); color:#c9d5e4; border-block:0}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .eyebrow{color:#7fb0ff}
.section--dark .lead{color:#aebdd0}
.section__head{max-width:60ch; margin-bottom:clamp(var(--sp-5),3vw,var(--sp-7))}
.section__head--center{margin-inline:auto; text-align:center}
.section__head h2{margin-bottom:var(--sp-3)}

/* Filet de titre : un trait fin plutôt qu'un aplat. */
.rule{
  display:flex; align-items:baseline; gap:var(--sp-4);
  margin-bottom:clamp(var(--sp-5),3vw,var(--sp-6));
}
.rule::after{content:""; flex:1; height:1px; background:var(--c-line); align-self:center}
.rule h2{margin:0}
.rule a{font-size:var(--fs-sm); white-space:nowrap; text-decoration:none; font-weight:600}
.rule a:hover{text-decoration:underline}

/* --- Cartes ------------------------------------------------------------------
   Une carte premium se reconnaît au trait et à l'espace, pas à l'ombre portée.
   Le survol soulève d'un cheveu et éclaire la bordure : rien de plus.
   -------------------------------------------------------------------------- */
.card{
  padding:clamp(var(--sp-4),2.2vw,var(--sp-5));
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
a.card:hover{
  border-color:var(--c-line-strong); box-shadow:var(--shadow-lift); transform:translateY(-2px);
}
a.card:active{transform:translateY(0)}

/* Carte catégorie : numérotée comme un repère de plan. */
.card--cat{position:relative; counter-increment:cat; padding-top:var(--sp-6)}
.cats{counter-reset:cat}
.card--cat::before{
  content:counter(cat,decimal-leading-zero);
  position:absolute; top:var(--sp-4); left:var(--sp-5);
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.08em; color:var(--c-accent);
  opacity:.7;
}
.card--cat::after{
  content:"→"; position:absolute; top:var(--sp-4); right:var(--sp-5);
  color:var(--c-line-strong); transition:color var(--t), transform var(--t);
}
.card--cat:hover::after{color:var(--c-accent); transform:translateX(3px)}

/* --- Section « Plus qu'un annuaire » : texte + points d'appui --------------- */
.split{
  display:grid; gap:clamp(var(--sp-6),4vw,var(--sp-8));
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start;
}
.points{display:grid; gap:var(--sp-4); margin:0; padding:0; list-style:none}
.point{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4);
  padding-bottom:var(--sp-4); border-bottom:1px solid var(--c-line);
}
.points .point:last-child{border-bottom:0; padding-bottom:0}
.point__mark{
  width:38px; height:38px; border:1px solid var(--c-line-strong); border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--c-accent); background:#fff;
  transition:border-color var(--t), background var(--t);
}
.point:hover .point__mark{border-color:var(--c-accent); background:var(--c-accent-soft)}
.point h3{font-size:var(--fs-base); margin:0 0 var(--sp-1)}
.point p{font-size:var(--fs-sm); margin:0; color:var(--c-body)}

/* --- Étapes : un trait de liaison plutôt que des cartes --------------------- */
.steps{gap:clamp(var(--sp-5),3vw,var(--sp-6))}
.step{padding-top:var(--sp-6); border-top:1px solid var(--c-line)}
.step::before{top:var(--sp-3); font-size:var(--fs-xs); letter-spacing:.1em}

/* --- Bandeau d'appel fabricants --------------------------------------------- */
.band{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--c-navy); color:#c9d5e4;
  padding:clamp(var(--sp-6),4vw,var(--sp-8));
}
.band::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000,transparent 68%);
          mask-image:radial-gradient(120% 100% at 100% 0%,#000,transparent 68%);
}
.band > *{position:relative}
.band h2{color:#fff; max-width:22ch}
.band p{color:#aebdd0; max-width:60ch}
.band .btn--primary{background:#fff; color:var(--c-navy)}
.band .btn--primary:hover{background:#e8f0ff; color:var(--c-navy)}
.band .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.band .btn--ghost:hover{border-color:#fff; color:#fff}

/* --- FAQ --------------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--c-line); padding:var(--sp-5) 0}
.faq details:first-child{border-top:1px solid var(--c-line)}
.faq summary{font-size:var(--fs-lg); font-weight:650; padding-right:var(--sp-5)}
.faq summary::after{
  content:"+"; position:absolute; right:0; float:none; font-weight:400; font-size:1.4em;
  line-height:1; color:var(--c-accent);
}
.faq summary{position:relative}
.faq details[open] summary::after{content:"–"}
.faq p{max-width:74ch}

/* --- Pied de page ------------------------------------------------------------ */
.ftr{position:relative; overflow:hidden}
.ftr::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(#000,transparent 62%);
          mask-image:linear-gradient(#000,transparent 62%);
  pointer-events:none;
}
.ftr > *{position:relative}

/* --- Apparition douce --------------------------------------------------------
   Le contenu est visible par défaut : la classe n'est posée que par le script,
   et seulement si le mouvement est accepté. Sans JavaScript, rien ne manque.
   -------------------------------------------------------------------------- */
[data-reveal]{opacity:1}
.js-reveal [data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.js-reveal [data-reveal].is-in{opacity:1; transform:none}
.js-reveal [data-reveal]:nth-child(2){transition-delay:.06s}
.js-reveal [data-reveal]:nth-child(3){transition-delay:.12s}
.js-reveal [data-reveal]:nth-child(4){transition-delay:.18s}

/* --- Adaptations ------------------------------------------------------------- */
@media (max-width:1023px){
  .hero__grid{grid-template-columns:1fr; gap:var(--sp-6)}
  .hero__copy{max-width:none}
  .hero__visual{justify-self:stretch; max-width:none; order:2}
  .hero::before{width:100%; opacity:.6}
  .split{grid-template-columns:1fr}
}
@media (max-width:767px){
  .hero{padding-top:var(--sp-6)}
  .hero h1{font-size:clamp(1.9rem,7.4vw,2.5rem)}
  .hero__sub{font-size:var(--fs-base)}
  .hero__actions .btn{flex:1 1 100%; justify-content:center}
  /* Le fichier mobile est déjà recadré à la source : on l'affiche tel quel,
     sans second rognage qui déplacerait le sujet. */
  .hero__plan{aspect-ratio:16/10}
  .rule{flex-wrap:wrap; gap:var(--sp-2)}
  .rule::after{display:none}
  .rule a{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{opacity:1; transform:none; transition:none}
  a.card:hover{transform:none}
}

/* =============================================================================
   Statuts éditoriaux
   Un statut se signale par un trait et une lettrine, pas par un aplat coloré.
   L'objectif est qu'il se remarque au deuxième regard, pas au premier : une
   pastille criarde ferait sponsor, exactement ce qu'il faut éviter.
   ============================================================================= */
.statuts{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center}

.statut{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-xs); font-weight:650; letter-spacing:.01em; white-space:nowrap;
  padding:.22rem .6rem .22rem .5rem;
  border:1px solid var(--c-line-strong); border-radius:var(--r-full);
  background:#fff; color:var(--c-body);
}
.statut svg{flex:0 0 auto; opacity:.9}

/* Partenaire fondateur — bleu nuit, avec un filet métallique très pâle qui
   n'apparaît qu'en lumière franche. */
.statut--fondateur{
  color:var(--c-navy); border-color:transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(112deg,#c9d3e0 0%,#f3f6fa 28%,#9fb0c6 52%,#f3f6fa 74%,#c9d3e0 100%) border-box;
  border:1px solid transparent;
}
.statut--fondateur svg{color:var(--c-navy)}

/* Fabricant pilote — bleu technique, tenu en trait fin. */
.statut--pilote{
  color:var(--c-accent-dark); border-color:#cfe0ff; background:var(--c-accent-soft);
}
.statut--verifie{color:var(--c-ok); border-color:#bfe3d1; background:#f2faf6}

/* Sur la fiche, les statuts respirent un peu plus. */
.sheet .statut,
.statuts--large .statut{font-size:var(--fs-sm); padding:.34rem .8rem .34rem .65rem}

/* Mention rédactionnelle : une phrase, pas un encart publicitaire. */
.mention{
  border-left:2px solid var(--c-navy); padding:.1rem 0 .1rem var(--sp-4);
  margin:var(--sp-4) 0; color:var(--c-body); font-size:var(--fs-sm); max-width:62ch;
}
.mention em{font-style:normal; color:var(--c-ink); font-weight:600}

/* La carte d'un partenaire fondateur se distingue par son trait, rien d'autre :
   ni fond teinté, ni ombre plus forte. */
.card--fondateur{border-color:var(--c-line-strong); box-shadow:inset 3px 0 0 var(--c-navy)}
a.card--fondateur:hover{box-shadow:inset 3px 0 0 var(--c-navy), var(--shadow-lift)}

/* --- Galerie de fiche --------------------------------------------------------
   Colonnes plutôt que grille : les photographies d'atelier n'ont pas toutes le
   même format, et un cadrage forcé en 4/3 amputerait les prises verticales.
   Chacune est montrée entière, dans ses proportions d'origine.
   -------------------------------------------------------------------------- */
.galerie{columns:3 210px; column-gap:var(--sp-3)}
.galerie figure{break-inside:avoid; margin:0 0 var(--sp-3); display:inline-block; width:100%}
.galerie img{
  width:100%; height:auto; display:block;
  border:1px solid var(--c-line); border-radius:var(--r-md);
  transition:border-color var(--t);
}
.galerie figure:hover img{border-color:var(--c-line-strong)}
.galerie figcaption{font-size:var(--fs-xs); color:var(--c-muted); margin-top:var(--sp-2)}

/* Encart d'appel dans une fiche — cadre sobre, pas de fond coloré. */
.encart{
  border:1px solid var(--c-line-strong); border-left:3px solid var(--c-navy);
  border-radius:var(--r-md); padding:var(--sp-5); background:var(--c-bg-soft);
}
.encart h2{margin-bottom:var(--sp-2)}
.encart p{font-size:var(--fs-sm)}
.encart .btn span{opacity:.65; font-weight:500; margin-left:.35rem}

/* Appels à l'action en tête de fiche. */
.sheet__actions{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin:var(--sp-5) 0 var(--sp-6)}
@media (max-width:560px){ .sheet__actions .btn{flex:1 1 100%; justify-content:center} }

/* =============================================================================
   Harmonisation — le héros donne le ton, le reste suit
   ============================================================================= */

/* Titres : un cran plus net, un interlettrage un peu plus serré. */
h2{letter-spacing:-.025em}
.section__head h2{margin-bottom:var(--sp-3)}
.section__head .lead{color:var(--c-body)}

/* La première section après le héros reprend le gris clair : la transition se
   fait par le dégradé de sortie, pas par une rupture. */
.hero + .section{background:var(--c-bg-soft); border-top:0}

/* Cartes : le trait porte, l'ombre s'efface. Le survol lève de deux pixels. */
.card{border-color:var(--c-line); box-shadow:none}
a.card:hover{
  border-color:var(--c-line-strong);
  box-shadow:0 1px 2px rgba(10,23,41,.04), 0 10px 26px -18px rgba(10,23,41,.22);
  transform:translateY(-2px);
}
.card__title{letter-spacing:-.015em}
.card__meta{letter-spacing:.02em; text-transform:none; color:var(--c-muted)}
.card--cat::before{opacity:.55}

/* Étiquettes techniques : plus discrètes, moins colorées. */
.tag{background:#fff; border-color:var(--c-line); color:var(--c-body); letter-spacing:.01em}
.tag--accent{background:var(--c-accent-soft); border-color:#cfe0ff}

/* Bandeau d'appel aux fabricants : même registre sombre que le héros. */
.band{background:var(--d-fond-2)}
.band::before{
  background:
    linear-gradient(rgba(220,228,236,.05) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(220,228,236,.05) 1px,transparent 1px) 0 0/64px 64px;
}
.band p{color:var(--d-texte-2)}
.band .btn--primary{background:var(--d-texte); color:var(--d-fond)}
.band .btn--primary:hover{background:#fff; color:var(--d-fond)}
.band .btn--ghost{color:var(--d-texte); border-color:var(--d-ligne-forte)}

/* Pied de page dans le même bleu nuit que le héros, pour fermer la page
   comme elle s'est ouverte. */
.ftr{background:var(--d-fond)}
.ftr a, .ftr p{color:var(--d-texte-2)}
.ftr a:hover{color:#fff}
.ftr__bottom{border-top-color:var(--d-ligne)}

/* FAQ : filets plus fins, titres plus nets. */
.faq summary{letter-spacing:-.01em}
.faq details{border-bottom-color:var(--c-line)}

/* Apparition : translation plus courte, pour que rien ne « saute ». */
.js-reveal [data-reveal]{transform:translateY(10px)}

@media (max-width:1023px){
  /* Le visuel passe sous le texte, dans l'ordre demandé, et garde de l'air. */
  .hero__grid{grid-template-columns:1fr}
  .hero__visual{justify-self:stretch; max-width:none; margin-top:var(--sp-4)}
  .hero__visual::after{display:none}
}
@media (max-width:767px){
  .hero{padding-top:var(--sp-6)}
  .hero h1{font-size:clamp(1.95rem,7.2vw,2.5rem)}
  .hero__sub{font-size:var(--fs-base)}
  .hero__actions .btn{flex:1 1 100%; justify-content:center}
  .hero__reperes{gap:var(--sp-3); font-size:.72rem}
  /* Le personnage doit rester lisible : le masque se resserre, l'image garde
     sa hauteur naturelle plutôt que d'être écrasée. */
  .hero__visual img{
    -webkit-mask-image:
      linear-gradient(90deg,rgba(0,0,0,.55) 0%,#000 10%,#000 90%,rgba(0,0,0,.55) 100%),
      linear-gradient(180deg,rgba(0,0,0,.7) 0%,#000 8%,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(90deg,rgba(0,0,0,.55) 0%,#000 10%,#000 90%,rgba(0,0,0,.55) 100%),
      linear-gradient(180deg,rgba(0,0,0,.7) 0%,#000 8%,#000 84%,transparent 100%);
    mask-composite:intersect;
  }
  .hero__sortie{height:80px}
}
@media (prefers-reduced-motion:reduce){
  a.card:hover{transform:none}
}

/* =============================================================================
   Héros de page éditoriale
   L'illustration occupe tout le cadre, le texte se pose dessus derrière un
   voile qui lui garantit son contraste. Sous 1024 px le texte reprend la main
   et l'illustration passe dessous, dans son propre cadrage.
   ============================================================================= */
.hpage{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--d-fond); color:var(--d-texte-2);
}
.hpage__fond{position:absolute; inset:0; z-index:-2}
.hpage__fond picture,
.hpage__fond img{
  display:block; width:100%; height:100%; object-fit:cover;
  /* Ancrage haut-droit : le recadrage vertical d'un cadre large mange le haut
     de l'image, et c'est là que se trouvent la tête du personnage et la
     première carte d'étape. On préfère perdre le sol. */
  object-position:70% 26%;
}
/* Voile de lisibilité : opaque à gauche, effacé à droite pour ne pas assombrir
   le personnage ni les cartes d'étapes. C'est lui qui tient le contraste du
   texte, pas une ombre portée sur les lettres. */
.hpage__voile{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg,var(--d-fond) 0%,rgba(6,16,29,.92) 26%,rgba(6,16,29,.62) 44%,
                    rgba(6,16,29,.12) 62%,transparent 76%),
    linear-gradient(180deg,rgba(6,16,29,.45) 0%,transparent 32%);
}
.hpage__in{
  position:relative; z-index:1;
  padding:clamp(var(--sp-8),8vw,7rem) 0 clamp(var(--sp-8),7vw,6rem);
  /* Plus le cadre est haut, moins le recadrage ampute l'illustration. */
  min-height:clamp(25rem,40vw,37rem); display:flex; align-items:center;
}
.hpage__copy{max-width:34rem}
.hpage h1{
  color:var(--d-texte); font-size:clamp(2.05rem,3.2vw,2.9rem); line-height:1.09;
  letter-spacing:-.03em; font-weight:800; margin-bottom:var(--sp-4);
}
.hpage__sub{
  font-size:var(--fs-lg); color:var(--d-texte-2); max-width:42ch;
  line-height:1.62; margin-bottom:var(--sp-6);
}
.hpage .btn--primary{background:var(--d-accent); color:#fff; border-color:transparent}
.hpage .btn--primary:hover{background:#1f6ae4; color:#fff}
.hpage .btn--ghost{background:transparent; color:var(--d-texte); border-color:var(--d-ligne-forte)}
.hpage .btn--ghost:hover{border-color:var(--d-texte); color:#fff; background:rgba(255,255,255,.05)}
.hpage .hero__eyebrow{color:var(--d-accent-clair)}

/* Sans illustration, le héros reste un bloc sombre tenu par sa trame. */
.hpage--sans-image{
  background:
    linear-gradient(rgba(220,228,236,.045) 1px,transparent 1px) 0 0/78px 78px,
    linear-gradient(90deg,rgba(220,228,236,.045) 1px,transparent 1px) 0 0/78px 78px,
    linear-gradient(168deg,var(--d-fond-2),var(--d-fond));
}

/* L'illustration mobile n'existe qu'en dessous de 1024 px. */
.hpage__mobile{display:none}
.section--apres-hero{padding-top:clamp(var(--sp-7),5vw,var(--sp-8))}

@media (max-width:1023px){
  /* Le texte passe devant : à cette largeur, une image sous du texte ne se lit
     ni d'un côté ni de l'autre. */
  .hpage__fond, .hpage__voile{display:none}
  .hpage{
    background:
      linear-gradient(rgba(220,228,236,.04) 1px,transparent 1px) 0 0/72px 72px,
      linear-gradient(90deg,rgba(220,228,236,.04) 1px,transparent 1px) 0 0/72px 72px,
      linear-gradient(168deg,var(--d-fond-2),var(--d-fond));
  }
  .hpage__in{min-height:0; padding:clamp(var(--sp-6),7vw,var(--sp-8)) 0 var(--sp-5)}
  .hpage__copy{max-width:none}
  .hpage__mobile{display:block; position:relative; z-index:1; padding-bottom:var(--sp-7)}
  .hpage__mobile img{
    display:block; width:100%; height:auto; border-radius:var(--r-lg);
    /* Fondu des bords, comme sur la page d'accueil : l'illustration se pose
       dans le fond au lieu d'y être collée. */
    -webkit-mask-image:
      linear-gradient(90deg,rgba(0,0,0,.5) 0%,#000 9%,#000 91%,rgba(0,0,0,.5) 100%),
      linear-gradient(180deg,rgba(0,0,0,.65) 0%,#000 7%,#000 86%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(90deg,rgba(0,0,0,.5) 0%,#000 9%,#000 91%,rgba(0,0,0,.5) 100%),
      linear-gradient(180deg,rgba(0,0,0,.65) 0%,#000 7%,#000 86%,transparent 100%);
    mask-composite:intersect;
  }
}
@media (max-width:767px){
  .hpage h1{font-size:clamp(1.95rem,7vw,2.4rem)}
  .hpage__sub{font-size:var(--fs-base)}
  .hpage .hero__actions .btn{flex:1 1 100%; justify-content:center}
}

/* =============================================================================
   ccm — page éditoriale longue « Comment ça marche »
   -----------------------------------------------------------------------------
   Deux vitesses de lecture. En haut un sommaire ancré et un résumé en cinq
   temps ; en dessous le détail, découpé en sections à fond alterné. Les fonds
   ne sont pas décoratifs : ils disent où un sujet commence et où il finit.
   ========================================================================== */

.ccm{--ccm-entete:69px}

/* --- Sommaire ancré --------------------------------------------------------- */
.ccm-toc{
  position:sticky; top:var(--ccm-entete); z-index:40;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--c-line);
}
.ccm-toc__in{display:flex; align-items:center; gap:var(--sp-4); min-height:52px}
.ccm-toc__label{
  flex:0 0 auto; font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--c-muted);
}
.ccm-toc__list{
  display:flex; gap:var(--sp-4); margin:0; padding:0; list-style:none;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ccm-toc__list::-webkit-scrollbar{display:none}
.ccm-toc__list a{
  display:block; padding:.85rem 0; font-size:var(--fs-sm); font-weight:600;
  color:var(--c-body); text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.ccm-toc__list a:hover{color:var(--c-ink); border-bottom-color:var(--c-line-strong)}
.ccm-toc__list a[aria-current="true"]{color:var(--c-accent); border-bottom-color:var(--c-accent)}

/* --- Rythme et typographie --------------------------------------------------- */
.ccm-sec{scroll-margin-top:calc(var(--ccm-entete) + 56px)}
.ccm-sec [id]{scroll-margin-top:calc(var(--ccm-entete) + 68px)}
.ccm{font-size:1.0625rem; line-height:1.75}
.ccm h2{font-size:clamp(1.5rem,2.4vw,1.9rem); letter-spacing:-.022em}
.ccm h3{font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; margin:0 0 var(--sp-2)}
.ccm p{margin:0 0 var(--sp-4); max-width:66ch}
.ccm .section__head p:last-child{margin-bottom:0}
.ccm-prose > p:last-child{margin-bottom:0}

/* Réponse directe : la phrase que reprendra un moteur de réponse. */
.ccm__reponse{
  font-size:var(--fs-lg); line-height:1.6; color:var(--c-ink); font-weight:450;
  border-left:3px solid var(--c-accent); padding-left:var(--sp-4);
  max-width:64ch; margin-bottom:var(--sp-6);
}
/* Première phrase d'une section : la réponse tient là, le reste développe. */
.ccm__direct{font-weight:600; color:var(--c-ink)}
.ccm-sec--dark .ccm__direct{color:#e7eefa}

.ccm-label{
  display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#5a6675; margin:0 0 var(--sp-2);
}
.ccm-sec--dark .ccm-label{color:#9dc0f0}

.ccm-lien{font-size:var(--fs-sm); font-weight:650; text-decoration:none}
.ccm-lien:hover{text-decoration:underline}
.ccm-lien::after{content:" →"}

.ccm-cta{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-6) 0 0}
.ccm-sec--dark .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.ccm-sec--dark .btn--ghost:hover{border-color:#fff; color:#fff}

/* --- 30 secondes : cinq temps, un repère chiffré ----------------------------- */
.ccm-flash{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-4);
  margin:0; padding:0; list-style:none; counter-reset:none;
}
.ccm-flash__i{position:relative; padding-top:var(--sp-5); border-top:1px solid var(--c-line-strong)}
.ccm-flash__i::before{
  content:""; position:absolute; top:-3px; left:0; width:5px; height:5px;
  background:var(--c-accent); border-radius:50%;
}
.ccm-flash__n{
  display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
  color:var(--c-accent); margin-bottom:var(--sp-2);
  font-variant-numeric:tabular-nums;
}
.ccm-flash p{font-size:var(--fs-sm); color:var(--c-body); margin:0}

/* --- Timeline des trois étapes ----------------------------------------------- */
.ccm-tl{display:grid; gap:var(--sp-6); margin:0; padding:0; list-style:none}
.ccm-tl__i{
  display:grid; grid-template-columns:minmax(13rem,20rem) 1fr; gap:var(--sp-6);
  padding-top:var(--sp-5); border-top:1px solid var(--c-line);
}
.ccm-tl__i:first-child{border-top:0; padding-top:0}
.ccm-tl__head{position:relative}
.ccm-tl__n{
  display:block; font-size:var(--fs-2xl); font-weight:700; line-height:1;
  color:var(--c-line-strong); font-variant-numeric:tabular-nums;
  margin-bottom:var(--sp-2);
}
.ccm-tl__head h3{font-size:var(--fs-xl); margin:0}
.ccm-tl__body > *:last-child{margin-bottom:0}
.ccm-tl__ex{
  background:var(--c-bg-soft); border-left:2px solid var(--c-line-strong);
  padding:var(--sp-3) var(--sp-4); font-style:italic; color:var(--c-ink);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.ccm-tl__ex .ccm-label{font-style:normal}

/* --- Listes de lecture -------------------------------------------------------- */
.ccm-check{list-style:none; margin:0 0 var(--sp-4); padding:0; max-width:66ch}
.ccm-check li{position:relative; padding-left:1.5rem; margin-bottom:var(--sp-2); font-size:var(--fs-sm)}
.ccm-check li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:1px;
  background:var(--c-accent);
}
.ccm-check--cols{columns:2; column-gap:var(--sp-6); max-width:none}
.ccm-check--cols li{break-inside:avoid}

.ccm-chips{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 var(--sp-4); padding:0; list-style:none}
.ccm-chips li{
  font-size:var(--fs-xs); font-weight:600; color:var(--c-ink);
  background:var(--c-bg-soft); border:1px solid var(--c-line);
  border-radius:var(--r-full); padding:.3rem .7rem;
}
.ccm-chips--dark li{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#dce7f5}

/* --- Démonstration du configurateur ------------------------------------------ */
.ccm-demo{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); margin-bottom:var(--sp-5)}
.ccm-demo > div{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:var(--sp-5)}
.ccm__citation{margin:0; font-style:italic; color:var(--c-ink)}
.ccm__citation p{margin:0; max-width:none}
.ccm-dl{display:grid; grid-template-columns:auto 1fr; gap:.55rem var(--sp-4); margin:0; font-size:var(--fs-sm)}
.ccm-dl dt{color:var(--c-muted)}
.ccm-dl dd{margin:0; color:var(--c-ink); font-weight:600}
.ccm-dl__vide{color:var(--c-warn) !important}

/* --- Callouts : trois registres, pas un de plus ------------------------------- */
.ccm-callout{border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); margin:0 0 var(--sp-5)}
.ccm-callout p{margin:0; max-width:74ch; font-size:var(--fs-sm); line-height:1.7}
.ccm-callout p + p{margin-top:var(--sp-2)}
.ccm-callout--info{background:var(--c-bg-soft); border:1px solid var(--c-line)}
.ccm-callout--important{background:var(--c-accent-soft)}
.ccm-callout--important p{color:var(--c-ink)}
.ccm-callout--transparence{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  border-left:3px solid #7fb0ff;
}
.ccm-callout--transparence p{color:#dce7f5}

/* --- Grilles de cartes -------------------------------------------------------- */
.ccm-grid{display:grid; gap:var(--sp-4); margin:0 0 var(--sp-5); padding:0; list-style:none}
.ccm-grid--3{grid-template-columns:repeat(3,1fr)}
.ccm-grid--4{grid-template-columns:repeat(4,1fr)}
.ccm-card{
  position:relative; background:#fff; border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:var(--sp-5);
}
.ccm-grid--serre .ccm-card{padding:var(--sp-4)}
.ccm-card p{font-size:var(--fs-sm); color:var(--c-body); margin:0; max-width:none}
.ccm-card__n{
  display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
  color:var(--c-accent); margin-bottom:var(--sp-2); font-variant-numeric:tabular-nums;
}
.ccm-card--action{display:flex; flex-direction:column; gap:var(--sp-2)}
.ccm-card--action .ccm-lien{margin-top:auto; padding-top:var(--sp-2)}
.ccm-card--muet{background:var(--c-bg-soft); border-style:dashed}
.ccm-card--dark{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.ccm-card--dark p{color:#aebdd0}
.ccm-card--dark.ccm-card--muet{background:transparent; border-style:dashed}

.ccm-h2--sec{margin-top:var(--sp-7)}

/* --- Définitions de procédés --------------------------------------------------- */
.ccm-defs{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin:0}
.ccm-defs > div{border-top:2px solid var(--c-navy); padding-top:var(--sp-3)}
.ccm-defs dt{font-weight:700; color:var(--c-ink); margin-bottom:.15rem}
.ccm-defs dd{margin:0; font-size:var(--fs-sm); color:var(--c-body)}

/* --- Schéma du matching -------------------------------------------------------- */
.ccm-flow{
  display:grid; grid-template-columns:1fr auto 1.6fr auto 1fr auto 1fr;
  align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-6);
}
.ccm-flow__e{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md); padding:var(--sp-4); min-height:100%;
}
.ccm-flow__e p{margin:0; font-weight:650; color:#fff; font-size:var(--fs-sm)}
.ccm-flow__e--large{background:rgba(127,176,255,.10); border-color:rgba(127,176,255,.32)}
/* Variante à cinq étapes : neuf enfants, donc neuf colonnes. Déclarée ici, et
   pas en fin de feuille : à spécificité égale c'est l'ordre du fichier qui
   tranche, et une règle placée après les media queries les écrase toutes. */
.ccm-flow--5{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr}
.ccm-flow__e--large .ccm-chips{margin:0}
.ccm-flow__f{position:relative; width:28px; height:1px; background:rgba(255,255,255,.28)}
.ccm-flow__f::after{
  content:""; position:absolute; right:0; top:-3px;
  border-left:6px solid rgba(255,255,255,.45);
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}

/* --- Comparatif ----------------------------------------------------------------- */
.ccm-vs{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5)}
.ccm-vs__col{border:1px solid var(--c-line); border-radius:var(--r-lg); padding:var(--sp-5)}
.ccm-vs__col--fort{border-color:var(--c-accent); box-shadow:inset 3px 0 0 var(--c-accent)}
.ccm-vs__col h3{font-size:var(--fs-lg); margin-bottom:var(--sp-4)}
.ccm-vs__l{margin:0 0 var(--sp-4); padding:0; list-style:none; counter-reset:vs}
.ccm-vs__l li{
  counter-increment:vs; position:relative; padding-left:2rem;
  margin-bottom:var(--sp-3); font-size:var(--fs-sm);
}
.ccm-vs__l li::before{
  content:counter(vs,decimal-leading-zero); position:absolute; left:0; top:.1em;
  font-size:var(--fs-xs); font-weight:700; color:var(--c-muted);
  font-variant-numeric:tabular-nums;
}
.ccm-vs__col--fort .ccm-vs__l li::before{color:var(--c-accent)}
/* #5a6675 et non --c-muted : sur fond gris clair, le gris de métadonnée
   tombait à 4,34:1, sous le seuil AA. */
.ccm-vs__note{margin:0; font-size:var(--fs-sm); color:#5a6675; font-style:italic}

/* --- Échelle des séries ---------------------------------------------------------- */
.ccm-echelle{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3);
  margin:0 0 var(--sp-4); padding:0; list-style:none;
}
.ccm-echelle li{border-top:2px solid var(--c-line-strong); padding-top:var(--sp-2)}
.ccm-echelle li:first-child{border-top-color:var(--c-accent)}
.ccm-echelle strong{display:block; font-size:var(--fs-sm); color:var(--c-ink)}
.ccm-echelle span{font-size:var(--fs-xs); color:var(--c-muted); line-height:1.5; display:block}

/* --- Questions pratiques ---------------------------------------------------------- */
.ccm-pratique{display:grid; gap:var(--sp-7)}
.ccm-pratique article{padding-top:var(--sp-6); border-top:1px solid var(--c-line)}
.ccm-pratique article:first-child{padding-top:0; border-top:0}
.ccm-pratique h2{font-size:var(--fs-xl)}

.ccm-pied{margin-top:var(--sp-7); padding-top:var(--sp-6); border-top:1px solid rgba(255,255,255,.14)}
.ccm-pied h2{font-size:var(--fs-xl)}

/* --- FAQ ---------------------------------------------------------------------------- */
.ccm-faq details{border:1px solid var(--c-line); border-radius:var(--r-md); margin-bottom:var(--sp-3); padding:0}
.ccm-faq summary{
  display:flex; align-items:center; gap:var(--sp-4); justify-content:space-between;
  padding:var(--sp-4) var(--sp-5); min-height:56px; font-size:var(--fs-base);
  font-weight:650; color:var(--c-ink); cursor:pointer; list-style:none;
}
.ccm-faq summary::-webkit-details-marker{display:none}
.ccm-faq summary::after{
  content:"+"; flex:0 0 auto; float:none; width:1.5rem; height:1.5rem;
  display:grid; place-items:center; font-size:1.1rem; font-weight:400;
  color:var(--c-accent); border:1px solid var(--c-line); border-radius:var(--r-sm);
  transition:background-color .16s ease, color .16s ease;
}
.ccm-faq details[open]{border-color:var(--c-line-strong)}
.ccm-faq details[open] summary::after{content:"–"; background:var(--c-accent-soft)}
.ccm-faq summary:hover::after{background:var(--c-accent-soft)}
.ccm-faq__r{padding:0 var(--sp-5) var(--sp-5)}
.ccm-faq__r p{margin:0; font-size:var(--fs-sm); max-width:74ch}

.ccm-fin h2{color:#fff; max-width:22ch; font-size:var(--fs-2xl)}
.ccm-fin p{color:#aebdd0; max-width:56ch}

/* --- Raccourci mobile ---------------------------------------------------------------
   Il n'apparaît qu'une fois le héros dépassé et disparaît à l'appel final, pour
   ne jamais recouvrir la FAQ ni le bouton qu'il duplique. -------------------- */
.ccm-sticky{display:none}
.ccm-sticky[hidden]{display:none !important}
.ccm-sticky__x{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-md);
  font-size:1.25rem; line-height:1; color:var(--c-muted); cursor:pointer;
}

/* --- Adaptations ----------------------------------------------------------------- */
@media (max-width:1023px){
  .ccm-flash{grid-template-columns:repeat(2,1fr)}
  .ccm-defs{grid-template-columns:repeat(2,1fr)}
  .ccm-grid--4{grid-template-columns:repeat(2,1fr)}
  .ccm-grid--3{grid-template-columns:repeat(2,1fr)}
  .ccm-tl__i{grid-template-columns:1fr; gap:var(--sp-4)}
  .ccm-tl__head{display:flex; align-items:baseline; gap:var(--sp-3)}
  .ccm-tl__n{font-size:var(--fs-xl); margin:0}
  .ccm-flow,.ccm-flow--5{grid-template-columns:1fr; gap:var(--sp-2)}
  .ccm-flow__f{width:1px; height:22px; margin-inline:auto}
  .ccm-flow__f::after{right:-3px; top:auto; bottom:0;
    border-left:3.5px solid transparent; border-right:3.5px solid transparent;
    border-top:6px solid rgba(255,255,255,.45); border-bottom:0}
  .ccm-echelle{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
  .ccm{font-size:1rem; line-height:1.72}
  .ccm h2{font-size:clamp(1.3rem,5.2vw,1.55rem)}
  .ccm__reponse{font-size:var(--fs-base); padding-left:var(--sp-3)}
  .ccm-toc__label{display:none}
  .ccm-toc__in{gap:0}
  /* Le sommaire défile bord à bord. La marge négative doit valoir exactement
     la gouttière de .wrap (1.25rem de chaque côté) : au-delà, elle élargit le
     document et toute la page défile horizontalement. */
  .ccm-toc__list{gap:var(--sp-4); margin-inline:-1.25rem; padding-inline:1.25rem}
  .ccm-flash{grid-template-columns:1fr; gap:var(--sp-3)}
  .ccm-flash__i{padding-top:var(--sp-3)}
  .ccm-demo{grid-template-columns:1fr}
  .ccm-vs{grid-template-columns:1fr}
  .ccm-grid--3,.ccm-grid--4{grid-template-columns:1fr}
  .ccm-defs{grid-template-columns:1fr}
  .ccm-check--cols{columns:1}
  .ccm-echelle{grid-template-columns:1fr; gap:var(--sp-2)}
  .ccm-echelle li{display:flex; gap:var(--sp-3); align-items:baseline; padding-top:var(--sp-2)}
  .ccm-echelle strong{flex:0 0 8.5rem}
  .ccm-cta .btn{flex:1 1 100%}
  .ccm-faq summary{padding:var(--sp-4); font-size:var(--fs-sm)}
  .ccm-faq__r{padding:0 var(--sp-4) var(--sp-4)}

  .ccm-sticky{
    display:flex; gap:var(--sp-2); align-items:center;
    position:fixed; left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4); z-index:45;
    padding:.55rem; background:rgba(255,255,255,.96); border:1px solid var(--c-line);
    border-radius:var(--r-lg); box-shadow:0 8px 28px rgba(10,23,41,.16);
    backdrop-filter:saturate(1.4) blur(8px);
  }
  .ccm-sticky .btn{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .ccm-faq summary::after{transition:none}
  .ccm-toc{scroll-behavior:auto}
}

/* --- Compléments du système éditorial pour /a-propos/ ------------------------
   Deux listes en regard (ce que fait / ce que ne fait pas) et une variante de
   puce négative. Rien de neuf ailleurs : la page réutilise les composants
   existants. -------------------------------------------------------------- */
.ccm-deux-listes{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin:0 0 var(--sp-5)}
.ccm-bloc-liste{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:var(--sp-5)}
.ccm-bloc-liste h3{margin:0 0 var(--sp-3)}
.ccm-bloc-liste .ccm-check{margin-bottom:0}

/* Puce négative : un trait barré, pas une croix rouge. On énonce une limite,
   on n'annonce pas une erreur. */
.ccm-check--non li::before{background:var(--c-muted); width:10px}
.ccm-check--non li::after{
  content:""; position:absolute; left:0; top:.55em; width:10px; height:1px;
  background:var(--c-muted); transform:rotate(-24deg);
}
.ccm-check li{position:relative}

.ccm-chips--large li{font-size:var(--fs-sm); padding:.45rem 1rem}


@media (max-width:767px){
  .ccm-deux-listes{grid-template-columns:1fr}
}

/* =============================================================================
   Blog — hub de ressources et gabarit d'article
   -----------------------------------------------------------------------------
   Le hub doit se lire comme un centre de ressources industrielles, pas comme un
   listing. D'où les index chiffrés, les filets, et l'absence totale d'ombre
   portée : la hiérarchie vient du trait et de l'espace.
   ========================================================================== */

/* --- Héros du hub, sans image : trame de plan et dégradé ------------------- */
.hblog{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(168deg,var(--d-fond-2) 0%,var(--d-fond) 60%,var(--d-fond-3) 100%);
  color:var(--d-texte-2);
  padding:clamp(var(--sp-7),7vw,var(--sp-9)) 0 clamp(var(--sp-6),5vw,var(--sp-8));
}
/* Fond illustré : l'image occupe tout le cadre, le texte se pose dessus. Aucun
   cadre, aucune ombre — une image dans une carte casserait la continuité du
   bandeau. */
.hblog__fond{position:absolute; inset:0; z-index:-3; overflow:hidden}
.hblog__fond picture,.hblog__fond img{display:block; width:100%; height:100%}
.hblog__fond img{object-fit:cover; object-position:62% 42%}

/* Voile : dense à gauche, où se trouve le texte ; presque nul à droite, où se
   trouve le sujet. Le dégradé suit la composition de l'image plutôt que de
   l'assombrir uniformément. */
.hblog__voile{
  position:absolute; inset:0; z-index:-2;
  /* Valeurs mesurées, pas choisies à l'œil : à cette opacité le texte blanc
     reste à 8,6:1 dans le pire centile de la zone du titre, et l'illustration
     reste visible. Un voile plus dense aplatissait l'image en aplat navy. */
  background:
    linear-gradient(90deg,
      rgba(6,16,29,.86) 0%, rgba(6,16,29,.78) 32%,
      rgba(6,16,29,.52) 58%, rgba(6,16,29,.26) 82%, rgba(6,16,29,.18) 100%),
    linear-gradient(180deg, rgba(6,16,29,.28) 0%, transparent 32%, rgba(6,16,29,.48) 100%);
}
.hblog--image{background:var(--d-fond)}

.hblog__trame{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/72px 72px;
  -webkit-mask-image:radial-gradient(120% 100% at 85% 0%,#000,transparent 70%);
          mask-image:radial-gradient(120% 100% at 85% 0%,#000,transparent 70%);
}
.hblog h1{color:var(--d-texte); font-size:clamp(2rem,4vw,3rem); max-width:22ch; margin-bottom:var(--sp-4)}
.hblog__sub{font-size:var(--fs-lg); color:var(--d-texte-2); max-width:60ch; margin-bottom:var(--sp-5)}
.hblog .hero__eyebrow{color:#7fb0ff}
.hblog .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.hblog .btn--ghost:hover{border-color:#fff; color:#fff}
.hblog__nav{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:var(--sp-6) 0 0; padding:0; list-style:none;
}
.hblog__nav a{
  display:block; font-size:var(--fs-xs); font-weight:600; color:#dce7f5; text-decoration:none;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  /* 44 px : c'est la cible tactile minimale, et cette micro-navigation est
     justement ce qu'on touche en premier sur téléphone. */
  border-radius:var(--r-full); padding:.7rem 1rem; min-height:44px; line-height:1.5;
  display:flex; align-items:center;
}
.hblog__nav a:hover{background:rgba(255,255,255,.12); color:#fff}

/* --- Cartes de guide ------------------------------------------------------- */
.bgrille{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin:0; padding:0; list-style:none}
.bgrille--2{grid-template-columns:repeat(2,1fr)}
.bcarte{
  display:flex; flex-direction:column; height:100%; gap:var(--sp-2);
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:var(--sp-5); text-decoration:none; color:inherit;
  transition:border-color var(--t), transform var(--t);
}
.bcarte:hover{border-color:var(--c-line-strong); transform:translateY(-2px); color:inherit}
.bcarte__meta{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:var(--sp-2)}
.bcarte__cat{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-accent-dark);
}
.bcarte__min{font-size:var(--fs-xs); color:#5a6675}
.bcarte__min::before{content:"· "}
.bcarte__t{font-size:var(--fs-lg); font-weight:700; color:var(--c-ink); line-height:1.3; letter-spacing:-.015em}
.bcarte__r{font-size:var(--fs-sm); color:var(--c-body); line-height:1.6}
.bcarte__lire{
  margin-top:auto; padding-top:var(--sp-3); font-size:var(--fs-sm); font-weight:650;
  color:var(--c-accent-dark);
}
.bcarte__lire::after{content:" →"}

/* La une : plus large, un filet d'accent sur le flanc. */
.bcarte--une{
  border-left:3px solid var(--c-accent); padding:clamp(var(--sp-5),3vw,var(--sp-7));
}
.bcarte--une .bcarte__t{font-size:clamp(1.35rem,2.4vw,1.9rem); max-width:24ch}
.bcarte--une .bcarte__r{font-size:var(--fs-base); max-width:62ch}

/* --- Taxonomie éditoriale --------------------------------------------------- */
.btaxo{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin:var(--sp-6) 0 0; padding:0; list-style:none}
.btaxo > li{border-top:2px solid var(--c-navy); padding-top:var(--sp-3); scroll-margin-top:6rem}
.btaxo__n{
  display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
  color:var(--c-accent-dark); font-variant-numeric:tabular-nums; margin-bottom:.2rem;
}
.btaxo h3{font-size:var(--fs-base); margin:0 0 var(--sp-2)}
.btaxo__s{margin:0 0 var(--sp-3); padding:0; list-style:none; font-size:var(--fs-sm); color:var(--c-body)}
.btaxo__s li{padding:.15rem 0}
.btaxo__c{margin:0; font-size:var(--fs-xs); color:#5a6675; font-style:italic}

/* --- Gabarit d'article ------------------------------------------------------ */
.bart__tete{
  background:var(--c-bg-soft); border-bottom:1px solid var(--c-line);
  padding:var(--sp-4) 0 clamp(var(--sp-6),4vw,var(--sp-7));
}
.bart__tete h1{font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:22ch; margin:0 0 var(--sp-3)}
.bart__meta{display:flex; flex-wrap:wrap; gap:.5rem; font-size:var(--fs-sm); color:#5a6675; margin:0}
.bart__corps{padding-top:clamp(var(--sp-6),4vw,var(--sp-7))}
/* Colonne de lecture : 46rem ≈ 740 px, soit environ 65 caractères à 17 px. */
.bart__texte{max-width:46rem}
.bart__som{
  max-width:46rem; background:var(--c-bg-soft); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:var(--sp-5); margin-bottom:var(--sp-6);
}
.bart__som ol{margin:0; padding-left:1.2rem; font-size:var(--fs-sm); columns:2; column-gap:var(--sp-6)}
.bart__som li{margin-bottom:.35rem; break-inside:avoid}
.bart__cta{margin:clamp(var(--sp-7),5vw,var(--sp-8)) 0 0}
.bart__cta h2{color:#fff; margin-top:0}

@media (min-width:1200px){
  /* Le sommaire passe à côté du texte quand la place existe. */
  .bart__corps{display:grid; grid-template-columns:1fr minmax(0,46rem) 1fr; gap:var(--sp-6); align-items:start}
  .bart__som{position:sticky; top:5.5rem; grid-column:1; margin-bottom:0; font-size:var(--fs-sm)}
  .bart__som ol{columns:1}
  .bart__texte{grid-column:2}
}

@media (max-width:1023px){
  .bgrille{grid-template-columns:repeat(2,1fr)}
  .btaxo{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  /* Le recadrage mobile place le personnage plein cadre : sans voile appuyé,
     le titre passerait sur son visage. On assume un fond très sombre, l'image
     reste lisible en second plan. */
  .hblog__fond img{object-position:50% 30%}
  .hblog__voile{
    /* 0,58 → 0,72 : pire centile à 7,0:1, et le personnage reste lisible
       derrière le texte au lieu de disparaître sous un aplat. */
    background:linear-gradient(180deg,
      rgba(6,16,29,.58) 0%, rgba(6,16,29,.66) 50%, rgba(6,16,29,.72) 100%);
  }
  .hblog h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  .hblog__sub{font-size:var(--fs-base)}
  .hblog .hero__actions .btn{flex:1 1 100%; justify-content:center}
  .bgrille,.bgrille--2{grid-template-columns:1fr}
  .btaxo{grid-template-columns:1fr}
  .bart__som ol{columns:1}
  .bart__cta .btn{flex:1 1 100%}
}

/* --- Revendication de fiche ---------------------------------------------------
   Un parcours en quatre temps, dont le dernier est une phrase. La barre d'étapes
   n'est pas décorative : elle dit combien il reste à faire, ce qui suffit
   souvent à ce qu'on le fasse. -------------------------------------------- */
.hblog--court{padding:clamp(var(--sp-6),5vw,var(--sp-8)) 0 clamp(var(--sp-5),4vw,var(--sp-6))}
.hblog--court h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}

.rvd-etapes{display:flex; flex-wrap:wrap; gap:var(--sp-4); margin:0 0 var(--sp-6); padding:0; list-style:none}
.rvd-etapes li{display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); color:#5a6675}
.rvd-etapes__n{
  display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--c-bg-soft); border:1px solid var(--c-line);
  font-size:var(--fs-xs); font-weight:700; color:#5a6675;
}
.rvd-etapes [aria-current="step"]{color:var(--c-ink); font-weight:650}
.rvd-etapes [aria-current="step"] .rvd-etapes__n{background:var(--c-accent); border-color:var(--c-accent); color:#fff}
.rvd-etapes .est-fait .rvd-etapes__n{background:var(--c-accent-soft); border-color:var(--c-accent-soft); color:var(--c-accent-dark)}

.rvd-recherche{display:flex; gap:var(--sp-3); align-items:flex-end; flex-wrap:wrap; margin-bottom:var(--sp-5)}
.rvd-recherche .field{flex:1 1 20rem; margin:0}

.rvd-liste{margin:0; padding:0; list-style:none}
.rvd-liste li{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;
  padding:var(--sp-4) 0; border-bottom:1px solid var(--c-line);
}
.rvd-liste__nom{font-weight:650; color:var(--c-ink); flex:1 1 14rem}
.rvd-liste__ville{font-size:var(--fs-sm); color:#5a6675}

.rvd-form{display:grid; gap:var(--sp-4); margin-top:var(--sp-5)}

@media (max-width:767px){
  .rvd-recherche .btn{flex:1 1 100%}
  .rvd-liste li .btn{flex:1 1 100%; justify-content:center}
}

/* Fiche préparée — la page que découvre un fabricant invité.
   Chaque information porte sa source juste en dessous : c'est la première
   question que se pose quelqu'un qui reçoit une fiche de lui-même écrite par
   un site qu'il ne connaît pas. */
.fprep__liste{list-style:none; margin:var(--sp-3) 0 0; padding:0}
.fprep__liste li{border-top:1px solid var(--c-line-soft); padding:var(--sp-3) 0}
.fprep__val{display:block; font-size:var(--fs-sm)}
.fprep__inc{display:block; margin-top:.25rem; font-size:var(--fs-xs); line-height:1.5; color:var(--c-warn)}
.fprep__src{display:block; margin-top:.25rem; font-size:var(--fs-xs); color:var(--c-muted)}
.field--case{display:flex; gap:var(--sp-3); align-items:flex-start; margin-top:var(--sp-4)}
.field--case input{margin-top:.2rem; flex:0 0 auto}
.field--case span{font-size:var(--fs-sm); line-height:1.5}
.fprep__legende{list-style:none; margin:var(--sp-3) 0 0; padding:0; font-size:var(--fs-sm)}
.fprep__legende li{margin-top:var(--sp-2); line-height:1.5}
.fprep__legende .badge{margin-right:.35rem}

/* Page de contact.
   Deux colonnes au-dessus du pli mobile, une seule en dessous : les deux
   parcours sont symétriques, rien ne justifie d'en montrer un avant l'autre. */
.ccm-grid--2{grid-template-columns:repeat(2,1fr)}

/* Le bloc d'adresse. Il est encadré et centré parce qu'il est la réponse à la
   question que pose la page : l'entourer de texte le ferait manquer. */
.ctc-direct{
  border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-bg);
  padding:var(--sp-6) var(--sp-5); text-align:center;
}
.ctc-direct__qui{margin:0 0 var(--sp-4); font-size:var(--fs-base); line-height:1.5}
.ctc-direct__mail{margin:0 0 var(--sp-4)}
.ctc-direct__mail a{
  display:inline-block; font-size:clamp(1.0625rem,2.4vw,1.375rem); font-weight:650;
  /* Bleu foncé plutôt qu'accent : sur le fond bleu très clair du bouton,
     l'accent tombe à 3,99 pour 1, sous le seuil confortable. */
  color:var(--c-accent-dark); text-decoration:none; word-break:break-word;
  /* Cible tactile confortable : une adresse qu'on rate au doigt ne sert pas. */
  padding:var(--sp-3) var(--sp-4); min-height:44px; border-radius:var(--r-md);
  border:1px solid var(--c-accent-soft); background:var(--c-accent-soft);
}
.ctc-direct__mail a:hover{border-color:var(--c-accent); text-decoration:underline}
.ctc-direct__note{
  margin:0; font-size:var(--fs-sm); color:var(--c-muted); max-width:52ch;
  margin-inline:auto;
}
.form__rgpd--alerte{margin-top:var(--sp-3); color:var(--c-warn)}
@media (max-width:767px){
  .ccm-grid--2{grid-template-columns:1fr}
}

/* Mentions légales. Une liste de définitions, pas un tableau : les valeurs
   sont de longueurs très inégales et certaines lignes manquent. */
.lgl__dl{display:grid; grid-template-columns:14rem 1fr; gap:var(--sp-2) var(--sp-4); margin:var(--sp-4) 0 0}
.lgl__dl dt{font-size:var(--fs-sm); color:var(--c-muted-lisible)}
.lgl__dl dd{margin:0; font-size:var(--fs-sm); color:var(--c-ink)}
.lgl__manque{margin:var(--sp-3) 0 0; padding-left:1.1rem; font-size:var(--fs-sm)}
.lgl__manque li{margin-top:.2rem; line-height:1.5}
@media (max-width:600px){
  .lgl__dl{grid-template-columns:1fr; gap:0}
  .lgl__dl dt{margin-top:var(--sp-3)}
}
/* Le téléphone, sous l'adresse : présent sans concurrencer le canal principal. */
.ctc-direct__tel{margin:0 0 var(--sp-4); font-size:var(--fs-base)}
.ctc-direct__tel a{color:var(--c-ink); text-decoration:none; padding:var(--sp-2) var(--sp-3);
  display:inline-block; min-height:44px; line-height:1.7}
.ctc-direct__tel a:hover{text-decoration:underline}

/* Un lien dans un encart clair : l'accent y tombe à 4,29 pour 1, sous le
   seuil. Le bleu foncé du même registre y passe à 6,32 — même famille, même
   lecture, contraste tenu. */
.ccm-callout--info a{color:var(--c-accent-dark)}

/* =============================================================================
   Gestionnaire de consentement
   Le bandeau est une région en bas de page, pas une fenêtre modale : il ne
   masque pas le contenu et ne piège pas le clavier. Les trois boutons ont la
   même forme, la même taille et le même poids visuel — un « tout refuser »
   discret serait un choix qu'on n'offre pas vraiment.
   ============================================================================= */
.cmp-banniere{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--c-bg); border-top:1px solid var(--c-line-strong);
  box-shadow:0 -8px 32px -18px rgba(10,23,41,.35);
  padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
}
.cmp-banniere__in{
  max-width:var(--wrap); margin:0 auto; display:flex; gap:var(--sp-5);
  align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cmp-banniere__txt{flex:1 1 26rem; min-width:0}
.cmp-banniere__titre{
  font-size:var(--fs-lg); color:var(--c-ink); margin:0 0 var(--sp-1);
}
.cmp-banniere__txt p{margin:0; font-size:var(--fs-sm); color:var(--c-body); line-height:1.6}
.cmp-banniere__txt a{color:var(--c-accent-dark)}

.cmp-actions{display:flex; gap:var(--sp-2); flex-wrap:wrap; flex:0 0 auto}
.cmp-btn{
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  /* Sans nowrap, « Tout refuser » passe sur deux lignes là où « Personnaliser »
     tient sur une : les deux boutons cessent d'avoir la même hauteur, et le
     refus se met à peser visuellement moins que le reste. */
  min-height:44px; white-space:nowrap;
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-sm);
  border:1px solid var(--c-line-strong); background:var(--c-bg); color:var(--c-ink);
  transition:background var(--t), border-color var(--t);
}
.cmp-btn:hover{background:var(--c-bg-soft); border-color:var(--c-muted)}
.cmp-btn:focus-visible{outline:2px solid var(--c-accent); outline-offset:2px}
/* Réservé à l'enregistrement d'un choix déjà fait — jamais à « accepter »,
   qui doit rester l'égal de « refuser ». */
.cmp-btn--fort{background:var(--c-accent); border-color:var(--c-accent); color:#fff}
.cmp-btn--fort:hover{background:var(--c-accent-dark); border-color:var(--c-accent-dark)}

.cmp-voile{position:fixed; inset:0; z-index:70; background:rgba(10,23,41,.55)}
.cmp-panneau{
  position:fixed; inset:0; z-index:71; display:flex; align-items:center;
  justify-content:center; padding:var(--sp-4); overflow:auto;
}
/* Un display déclaré par la feuille de style l'emporte sur le display:none que
   le navigateur applique à [hidden] : sans ces deux lignes, le panneau reste
   affiché en permanence alors que son attribut dit le contraire. */
.cmp-panneau[hidden], .cmp-voile[hidden], .cmp-banniere[hidden]{display:none}
.cmp-panneau__in{
  background:var(--c-bg); border-radius:var(--r-lg); box-shadow:var(--shadow-lift);
  width:100%; max-width:36rem; max-height:calc(100vh - 2 * var(--sp-4));
  overflow:auto; padding:var(--sp-5);
}
.cmp-panneau__tete{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3)}
.cmp-panneau__tete h2{font-size:var(--fs-xl); color:var(--c-ink); margin:0}
.cmp-fermer{
  border:1px solid transparent; background:none; cursor:pointer; color:var(--c-body);
  font-size:1.5rem; line-height:1; min-width:44px; min-height:44px; border-radius:var(--r-sm);
}
.cmp-fermer:hover{background:var(--c-bg-soft); color:var(--c-ink)}
.cmp-fermer:focus-visible{outline:2px solid var(--c-accent); outline-offset:2px}

.cmp-vide{
  margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm);
  line-height:1.6; color:var(--c-ink); background:var(--c-bg-soft);
  border-left:3px solid var(--c-accent); border-radius:0 var(--r-sm) var(--r-sm) 0;
}

.cmp-cats{list-style:none; padding:0; margin:var(--sp-4) 0 0}
.cmp-cat{padding:var(--sp-4) 0; border-top:1px solid var(--c-line)}
.cmp-cat:first-child{border-top:0}
.cmp-cat__tete{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3)}
.cmp-cat__nom{font-weight:600; color:var(--c-ink)}
.cmp-cat__fixe{font-size:var(--fs-xs); color:var(--c-muted-lisible); text-transform:uppercase;
  letter-spacing:.06em}
.cmp-cat__desc{margin:var(--sp-2) 0 0; font-size:var(--fs-sm); color:var(--c-body); line-height:1.6}

/* Bascule : une vraie case à cocher, déplacée hors du champ visuel mais jamais
   masquée — display:none la retirerait de l'ordre de tabulation et du clavier. */
.cmp-bascule{display:inline-flex; align-items:center; cursor:pointer; min-height:44px}
.cmp-bascule input{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.cmp-bascule__txt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap}
.cmp-bascule__piste{
  width:46px; height:26px; border-radius:var(--r-full); background:var(--c-line-strong);
  position:relative; transition:background var(--t); flex:0 0 auto;
}
.cmp-bascule__piste::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform var(--t);
  box-shadow:0 1px 2px rgba(10,23,41,.3);
}
.cmp-bascule input:checked + .cmp-bascule__piste{background:var(--c-accent)}
.cmp-bascule input:checked + .cmp-bascule__piste::after{transform:translateX(20px)}
.cmp-bascule input:focus-visible + .cmp-bascule__piste{outline:2px solid var(--c-accent);
  outline-offset:2px}

.cmp-panneau__note{margin:var(--sp-4) 0 0; font-size:var(--fs-sm); color:var(--c-muted-lisible);
  line-height:1.6}
.cmp-panneau__note a{color:var(--c-accent-dark)}
.cmp-actions--panneau{margin-top:var(--sp-5)}
.cmp-actions--panneau .cmp-btn{flex:1 1 auto}

body.cmp-ouvert{overflow:hidden}

@media (max-width:640px){
  .cmp-banniere__in{gap:var(--sp-4)}
  .cmp-actions{width:100%}
  .cmp-actions .cmp-btn{flex:1 1 100%}
  .cmp-panneau__in{padding:var(--sp-4)}
}

/* Le pied de page ouvre le panneau. C'est un bouton, pas un lien : il ne mène
   nulle part, il ouvre quelque chose. Il reste caché tant que le script qui
   l'anime n'a pas tourné. */
.ftr__cmp{
  font:inherit; font-size:var(--fs-sm); color:#c9d3e0; background:none; border:0;
  padding:0; cursor:pointer; text-decoration:none;
}
.ftr__cmp:hover{color:#fff; text-decoration:underline}
.ftr__cmp:focus-visible{outline:2px solid #fff; outline-offset:2px}