/*
 * Canidélite — Design system (v1.1)
 * Source : docs/canidelite-design-system-claude-design.md, §11 (tokens) + §5-7 (composants de base).
 * Chargée partout : pages Gutenberg, templates PHP du réseau, espace partenaire.
 * Ne pas dupliquer ces tokens dans un autre CSS : ce fichier est la source de vérité unique.
 */

/* ---------- Polices locales (pas de Google Fonts) ----------
 * Contre-QA v0.3.2, point 6 : canidelite-formations chargeait sa propre feuille
 * fonts.googleapis.com (graisses 300/400/500/600 Outfit, 400/500/600 Inter) pour les mêmes deux
 * familles — RGPD (appel tiers) et doublon puisque ce fichier est déjà chargé partout sur le site.
 * Outfit est une police à axe variable : Google sert un seul fichier pour toutes les graisses
 * demandées (vérifié : même URL gstatic pour 300/400/500/600) — une déclaration @font-face par
 * graisse, même fichier, comme le fait la feuille Google elle-même pour les navigateurs récents.
 * Inter 400/500/600 sont, de la même façon, un seul et même fichier variable : les graisses 400 et
 * 500 déjà hébergées couvrent aussi 600, sans fichier supplémentaire. */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-400-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-400-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-400-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-400-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-400-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-400-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Polices de repli à métriques ajustées (contre-QA v0.4.1) : tant qu'Inter / Outfit ne sont pas
   chargées, le texte s'affiche en Arial recalibrée à leurs dimensions — à l'arrivée de la vraie
   police (font-display: swap), les mots ne changent presque plus de largeur ni de hauteur : rien ne
   bouge (pilules de l'en-tête alignées à droite comprises). Valeurs calculées sur nos fichiers
   woff2 avec fontTools, une face par tranche de graisse (Inter instanciée en 400 / 500 / 600, Outfit
   en 400 / 500 / 600 — la largeur croît de ~1 % par cran ; largeur moyenne pondérée par un texte
   français, métriques verticales typo), méthode Capsize / Next.js — Inter retombe à 0,1 point
   des valeurs publiées par Next.js. Sans Arial (Android), la pile passe à system-ui. */
@font-face {
  font-family: "Inter Repli";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 449;
  size-adjust: 106.99%;
  ascent-override: 90.55%;
  descent-override: 22.55%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Repli";
  src: local("Arial"), local("ArialMT");
  font-weight: 450 549;
  size-adjust: 108.11%;
  ascent-override: 89.61%;
  descent-override: 22.31%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Repli";
  src: local("Arial"), local("ArialMT");
  font-weight: 550 900;
  size-adjust: 109.21%;
  ascent-override: 88.70%;
  descent-override: 22.09%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit Repli";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 449;
  size-adjust: 98.93%;
  ascent-override: 101.08%;
  descent-override: 26.28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit Repli";
  src: local("Arial"), local("ArialMT");
  font-weight: 450 549;
  size-adjust: 99.06%;
  ascent-override: 100.95%;
  descent-override: 26.25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit Repli";
  src: local("Arial"), local("ArialMT");
  font-weight: 550 900;
  size-adjust: 100.68%;
  ascent-override: 99.32%;
  descent-override: 25.82%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

/* --brand-border (correctif contre-QA) : bordure des pilules d'ancre, extraite des exports HTML
   des maquettes. Pour Éducation/Sport/Dog Wash, la valeur maquette est identique à --brand : alias
   direct. Pour Aéré, la maquette utilise #E6BE3A, qui ne correspond à aucun token existant (ni
   --brand #F3D05C ni --brand-strong) — valeur dédiée. Formation/Réseau : aucune maquette
   avec pilules d'ancre trouvée dans l'échantillon ; alias --brand par défaut (cohérent avec les 3
   univers confirmés), à corriger si une maquette contraire apparaît. */
/* --brand-strong (design system v1.2, décision Emmanuel 2026-10-22) : un seul jeu, fiable sur
   blanc ET sur les fonds clairs (--brand-tint, --ground, --surface-2) — ≥4,5:1 partout, pas de
   double jeu selon le fond. Formation #6F7244, Éducation #A26007, Aéré #8D6C0D, Dog Wash #297895
   (teinte conservée) ; Sport #AA2533 et Réseau #6F6A5E inchangés. Règle v1.2 : tout texte coloré
   (chiffres, numéros, prix, liens, dates, icônes porteuses de sens) passe par --brand-strong. */
/* --brand-fill / --brand-fill-on (phase 2, panneau de note des avis Google) : aplat d'accent qui
   porte du texte. --brand-strong + blanc partout (≥ 4,9:1 avec le jeu v1.2) ; en Aéré, jaune
   --brand + texte foncé --brand-on (10:1), comme la maquette — jamais de blanc sur le jaune, et
   le brun strong n'y est pas l'aplat maquetté. Déclaré univers par univers (même raison que
   --brand-hover). */
/* --brand-hover : fond des boutons primaires au survol — --brand-strong partout sauf Aéré, où le
   texte foncé --brand-on n'atteint que 2,5:1 sur le brun strong ; survol sur --brand-border
   #E6BE3A (6,9:1 avec #353535). Porté par un token plutôt que par un sélecteur
   .cnd[data-branch="aere"] : un bloc en branche « inherit » (data-branch posé sur un ancêtre) en
   bénéficie aussi. Déclaré univers par univers : un var() posé sur :root serait résolu une fois
   pour toutes avec les valeurs Formation. */
/* Contraste des boutons pleins (v0.25.0, décision Emmanuel du 30/10/2026) : le blanc sur --brand ne
   tenait que 2,12 (Éducation) à 2,84 (Réseau), 4,46 en Sport — sous le seuil AA 4,5 du texte
   14 px/500. Les fonds des maquettes sont gardés ; le texte change :
   - Formation, Éducation, Dog wash, Réseau : --brand-on #1F1F1D (6,4 / 7,8 / 7,6 / 5,8:1), comme
     Aéré (#353535, 8,2:1, inchangé) ;
   - Sport : texte blanc, fond --brand-btn #D43A4B, rouge à peine assombri (4,66:1) ; --brand garde
     #D64050 partout ailleurs (surlignages, bordures, puces).
   --brand-btn = fond de tout bouton plein (= --brand hors Sport). Survol --brand-hover : une nuance
   un peu plus foncée de --brand qui garde le texte foncé au-dessus de 4,5 (Formation #909458 5,2,
   Éducation #E28C0B 6,3, Dog wash #49A8C9 6,1, Réseau #908B7D 4,9 ; Aéré #E6BE3A 6,9 ; Sport
   --brand-strong 7,0 avec le blanc). Focus = couleurs du repos + anneau. Contrôle automatique :
   qa/front-check.mjs (contraste des boutons et liens, repos / survol / focus). */
:root, [data-branch="formation"] { --hl-a:75%; --hl-a-photo:85%; --brand:#A1A567; --brand-strong:#6F7244; --brand-tint:#F4F4EC; --brand-tint-2:#E6E7D3; --brand-btn:var(--brand); --brand-on:#1F1F1D; --brand-border:#A1A567; --brand-hover:#909458; --brand-fill:var(--brand-strong); --brand-fill-on:var(--on-strong); --brand-btn-border:transparent; }
[data-branch="education"] { --hl-a:75%; --hl-a-photo:85%; --brand:#F4A023; --brand-strong:#A26007; --brand-tint:#FCF3E3; --brand-tint-2:#F8E1BB; --brand-btn:var(--brand); --brand-on:#1F1F1D; --brand-border:#F4A023; --brand-hover:#E28C0B; --brand-fill:var(--brand-strong); --brand-fill-on:var(--on-strong); --brand-btn-border:transparent; }
[data-branch="sport"]     { --hl-a:45%; --hl-a-photo:90%; --brand:#D64050; --brand-strong:#AA2533; --brand-tint:#FBEDEE; --brand-tint-2:#F4CFD3; --brand-btn:#D43A4B; --brand-on:#FFFFFF; --brand-border:#D64050; --brand-hover:var(--brand-strong); --brand-fill:var(--brand-strong); --brand-fill-on:var(--on-strong); --brand-btn-border:transparent; }
[data-branch="aere"]      { --hl-a:80%; --hl-a-photo:90%; --brand:#F3D05C; --brand-strong:#8D6C0D; --brand-tint:#FDF6DC; --brand-tint-2:#F9E9A8; --brand-btn:var(--brand); --brand-on:#353535; --brand-border:#E6BE3A; --brand-hover:var(--brand-border); --brand-fill:var(--brand); --brand-fill-on:var(--brand-on); --brand-btn-border:var(--brand-border); }
[data-branch="dogwash"]   { --hl-a:60%; --hl-a-photo:90%; --brand:#6EBAD4; --brand-strong:#297895; --brand-tint:#EAF6FA; --brand-tint-2:#C9E7F1; --brand-btn:var(--brand); --brand-on:#1F1F1D; --brand-border:#6EBAD4; --brand-hover:#49A8C9; --brand-fill:var(--brand-strong); --brand-fill-on:var(--on-strong); --brand-btn-border:transparent; }
[data-branch="reseau"]    { --hl-a:75%; --hl-a-photo:90%; --brand:#9E998D; --brand-strong:#6F6A5E; --brand-tint:#F4F3F0; --brand-tint-2:#E4E2DC; --brand-btn:var(--brand); --brand-on:#1F1F1D; --brand-border:#9E998D; --brand-hover:#908B7D; --brand-fill:var(--brand-strong); --brand-fill-on:var(--on-strong); --brand-btn-border:transparent; }

:root {
  --ground:#FAFAFA; --surface:#FFFFFF; --surface-2:#F5F5F6; --surface-3:#ECECED;
  --line:#ECECED; --line-2:#E0E0E1;
  /* --ink-3 (v0.25.0) : #73767D ne tenait 4,5:1 que sur blanc (4,36 sur --ground, 3,85 sur
     --surface-3 ; liens du pied de page relevés par le contrôle de contraste). #676A71 : ≥ 4,5 sur
     tous les fonds clairs du site (5,4 blanc, 5,2 ground, 5,0 surface-2, 4,6 surface-3, 4,9 tints). */
  --ink:#353535; --ink-2:#333741; --ink-3:#676A71; --ink-4:#8A8D92; --ink-5:#B9BBBE; --black:#1D2327;
  --ok:#24983F; --ok-bright:#0BB01B; --ok-deep:#1C7731; --ok-tint:#E6F4EA;
  --info:#0FACC2; --info-tint:#E2F6F8; --warn:#FDB022; --warn-tint:#FEF1D9; --danger:#D94F4F; --danger-tint:#FBE9E9;
  /* --overlay / --overlay-strong / --on-image (contre-QA v0.2.6) : voiles sombres sur photo et
     texte sur photo, basés sur --black #1D2327, remplacent toute rgba(28,28,26,*) / rgba(0,0,0,*)
     / #FFFFFF en dur posée directement sur une image (héro, bande CTA, cartes image). */
  --overlay: rgba(29,35,39,.55); --overlay-strong: rgba(29,35,39,.78); --on-image:#FFFFFF;
  /* --on-strong : texte posé sur un fond --brand-strong (pilules d'ancre actives, aplat du panneau
     Google). Blanc dans tous les univers, Aéré compris : --brand-on (#353535) n'y tient que 2,5:1. */
  --on-strong:#FFFFFF;
  --font-display:"Outfit", "Outfit Repli", system-ui, sans-serif; --font-body:"Inter", "Inter Repli", system-ui, sans-serif;
  --t-display:2.5rem; --t-h1:2rem; --t-h2:1.625rem; --t-h3:1.25rem; --t-h4:1.0625rem; --t-body:1rem; --t-small:.875rem; --t-caption:.75rem;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-float:0 8px 24px rgba(29,35,39,.10), 0 1px 2px rgba(29,35,39,.06);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
}

/*
 * ---------- Composants de base ----------
 * Portée volontairement limitée à la phase 1 (fondations) : boutons pilule, cartes bordées,
 * chips, champs, accordéons. Namespacés sous .cnd- pour ne jamais entrer en collision avec
 * les classes du thème/Elementor existants.
 *
 * Scope défensif (correctif post-QA) : le site reste sous Elementor jusqu'à la fin de la
 * migration — son kit (.elementor-kit-4 h1…h6, .elementor-kit-4 a, boutons du thème) a une
 * spécificité à deux composantes (une classe + un élément) qui écrasait nos règles à une seule
 * classe. Toute règle ci-dessous est donc portée par un sélecteur à deux classes
 * (`.cnd .cnd-xxx` — la racine de chaque bloc porte toujours `.cnd` en plus de sa classe propre),
 * qui l'emporte sur le kit sans `!important` ni `@layer`. Chaque règle redéclare explicitement
 * police/graisse/couleur/soulignement/fond/rayon : on ne compte jamais sur un éventuel silence du
 * thème sur une propriété.
 */

/* Coupe l'héritage du thème (contre-QA v0.2.6, point 2) : le thème pose color:#333 sur le body /
   des conteneurs génériques, qui se propage par héritage dans tout élément du scope .cnd qui ne
   déclare pas sa propre couleur (ex. un <p> brut dans une zone de contenu riche). --ink-2 est la
   couleur de corps de texte par défaut du design system. */
.cnd {
  color: var(--ink-2);
}

/* Reset générique des <button> dans le scope : neutralise l'apparence posée par le thème avant
   que les classes .cnd-btn / .cnd-accordion-trigger (deux classes, plus spécifiques) ne posent
   la leur. */
/* `html .cnd button` (0,1,2) depuis v0.5.0 : `.cnd button` (0,1,1) était à égalité avec les règles
   `[type=button]` du thème, et l'ordre des feuilles décidait. */
html .cnd button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  /* v0.5.0 (test « thème hostile ») : propriétés qu'aucun composant ne redéclarait. */
  text-transform: inherit;
  letter-spacing: inherit;
  text-shadow: none;
  box-shadow: none;
  min-width: 0;
  height: auto;
  float: none;
  cursor: pointer;
}
/* Contre-QA v0.3.1, point 1 : le thème Hello pose `button:focus,button:hover{background-color:#c36;
   color:#fff}` (reset.css) et `[type=button]:focus,[type=button]:hover{…}` — même spécificité
   (0,2,0 / 0,1,1) que nos classes de base sans état (.cnd-btn, .cnd-accordion-trigger…), qui n'a
   pas de règle :hover/:focus propre. À spécificité égale l'ordre de sortie des feuilles décide, et
   celle du thème sort après la nôtre : elle gagne la fuite. On la neutralise ici en amont, à une
   spécificité strictement supérieure à toutes les variantes du thème repérées (0,2,0 et 0,1,1),
   pour tout <button>/<summary> du scope qui n'aurait pas encore sa propre règle :hover/:focus —
   les classes de composant plus bas (.cnd-btn--xxx, .cnd-accordion-trigger, .cnd-carousel__btn)
   redéclarent ensuite explicitement leur propre état, à une spécificité encore supérieure. */
.cnd button:hover,
.cnd button:focus,
.cnd summary:hover,
.cnd summary:focus {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
  border-color: transparent;
}

/* Exception ponctuelle au principe « jamais de !important » de ce fichier : une CSS
   additionnelle du site (réglage WordPress « Additional CSS », hors plugin, visiblement un
   reliquat Tutor LMS) pose `button { margin-top: 32px !important; }` sans ciblage — elle
   s'applique à tous les <button> de TOUTES les pages (vérifié jusque sur le bandeau cookies tiers
   CookieYes). Aucune spécificité ne peut gagner contre un !important : un !important ciblé,
   limité à cette seule propriété et scopé à .cnd, est l'unique façon de neutraliser la fuite dans
   nos blocs sans toucher à cette CSS additionnelle (hors périmètre plugin — signalé à Emmanuel). */
.cnd button {
  margin-top: 0 !important;
}

/* Remise à zéro des contrôles du scope (v0.5.0, test « thème hostile ») : un thème qui habille
   `body a`, `body label`, `body input`, `body table`… (0,0,2 à 0,1,1) passait au travers de toute
   propriété qu'un composant ne redéclare pas — ombre, majuscules, interlettrage, marge, largeur
   minimale, hauteur des champs, fond des libellés. `html .cnd` (0,1,2) l'emporte sur ces règles et
   reste sous chaque composant (.cnd .cnd-xxx, 0,2,0 et plus), qui garde la main. Valeurs = celles du
   navigateur sans thème : rien ne change pour un bloc qui ne subit aucun thème. */
html .cnd :is(a, label, legend, caption, dl, dt, dd) {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  /* Propriétés héritées : reprises du parent, comme sans thème (une cellule nowrap, une légende
     en capitales gardent la main sur leur lien). */
  text-transform: inherit;
  text-align: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  width: auto;
  min-width: 0;
  height: auto;
  float: none;
}
html .cnd img {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  min-width: 0;
  float: none;
}
html .cnd :is(input, select, textarea) {
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  text-align: start;
  letter-spacing: normal;
  min-width: 0;
  height: auto;
  float: none;
}
html .cnd :is(input[type="checkbox"], input[type="radio"]) {
  width: auto;
  padding: 0;
}
html .cnd :is(fieldset, table, th, td) {
  margin: 0;
  box-shadow: none;
  text-transform: inherit;
  text-align: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  min-width: 0;
  height: auto;
  float: none;
}
html .cnd :is(fieldset, table) {
  border: 0;
  padding: 0;
  background: transparent;
}
html .cnd :is(th, td) {
  width: auto;
  line-height: inherit;
}
/* Police : le kit Elementor pose la sienne (Roboto) sur `.elementor-kit-N a` (0,1,1). Hors gabarit
   maison (pages encore servies par Elementor), un lien de bloc qui ne redéclarait pas sa police
   sortait en Roboto (bac à sable, liste à icônes). */
html .cnd :is(a, label, legend, caption) {
  font-family: inherit;
}
html .cnd a {
  line-height: inherit;
}

/* Boutons (règle §7 : toujours en pilule, un seul bouton principal par écran) */
.cnd .cnd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  /* Test « thème hostile » (phase 2) : hauteur et ombre n'étaient pas redéclarées, un thème qui
     les pose sur `body button` (0,0,2+) passait au travers. */
  height: auto;
  min-height: 0;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--font-body);
  /* 500 : design system de référence (« Bouton : Inter 500, 14 px » ; blanc sur l'accent réservé
     aux boutons « ≥ 14 px, graisse 500 »). Était 600 sans source — invisible tant qu'Inter 600
     n'était pas hébergée, réellement servi depuis v0.3.2 (contre-QA v0.3.4). */
  font-weight: 500;
  font-size: var(--t-small);
  line-height: 1.2;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  padding: 12px 22px;
  margin: 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cnd .cnd-btn:hover,
.cnd .cnd-btn:focus,
.cnd .cnd-btn:active { text-decoration: none; }
.cnd .cnd-btn--sm { font-size: var(--t-caption); padding: 8px 16px; }
/* Règle (décision Emmanuel, contre-QA v0.3.4) : 14 px minimum sur tout bouton primaire, tous
   blocs — condition de l'exception « blanc sur l'accent » du design system de référence (≥ 14 px,
   graisse 500). Un primaire en --sm garde son padding compact mais pas son texte 12 px (cas
   cnd/image-cards). */
.cnd .cnd-btn--primary.cnd-btn--sm { font-size: var(--t-small); }
.cnd .cnd-btn--lg { font-size: var(--t-body); padding: 14px 24px; }

/* [Remplacée en v0.25.0 — texte foncé sur --brand, cf. définition des tokens d'univers.] Ancienne décision (Emmanuel, 2026-10-14 — contre-QA point 7, WCAG) : contraste blanc/brand-on sur
   --brand mesuré entre 2,1:1 et 2,8:1 selon l'univers (3,4:1 pour #353535 sur #A8820F en Aéré) —
   sous le seuil AA (4,5:1) pour du texte. Confirmé identique aux maquettes (mêmes paires
   --brand/--brand-on partout, y compris Aéré) : on garde le blanc, à deux conditions tenues
   partout dans ce fichier — taille mini 14px/500 (.cnd-btn, valeurs du design system de
   référence) et focus visible (anneau 2px --brand-strong, cf. règle :focus-visible plus bas). Le
   token --brand-on permet de basculer un univers en texte foncé plus tard sans toucher aux
   composants qui le consomment. À revoir si audit RGAA/accessibilité PSH. */
/* États (contre-QA v0.3.4) : :focus porte les couleurs du REPOS et :hover, déclaré après, celles du
   survol. :focus reste déclaré — sans lui, [type=button]:focus du thème (0,2,0) repeint le bouton
   en rose au focus (contre-QA v0.3.1, point 1) — mais il ne copie plus le survol : après un clic,
   le bouton gardait le fond de survol tant qu'il avait le focus (jaune persistant en Aéré). Le
   focus clavier se voit à l'anneau --brand-strong (:focus-visible), pas au fond.
   Survol (contre-QA v0.2.6, point 4c) : --brand-hover = --brand-strong, sauf Aéré = --brand-border
   #E6BE3A avec --brand-on #353535 (6,9:1) — cf. définition du token.
   Bordure (v0.8.0) : --brand-btn-border, transparente partout sauf Aéré (#E6BE3A, consigne
   d'Emmanuel : texte #353535, bordure #E6BE3A). */
.cnd .cnd-btn--primary,
.cnd .cnd-btn--primary:focus { background: var(--brand-btn); color: var(--brand-on); border-color: var(--brand-btn-border); }
.cnd .cnd-btn--primary:hover { background: var(--brand-hover); color: var(--brand-on); border-color: var(--brand-btn-border); }

.cnd .cnd-btn--secondary,
.cnd .cnd-btn--secondary:focus { background: var(--surface-3); color: var(--ink); border-color: transparent; }
.cnd .cnd-btn--secondary:hover { background: var(--line-2); color: var(--ink); }

.cnd .cnd-btn--outline,
.cnd .cnd-btn--outline:focus { background: transparent; color: var(--ink); border-color: var(--line-2); }
.cnd .cnd-btn--outline:hover { background: var(--surface-2); color: var(--ink); }

/* Texte coloré sur fond clair (contre-QA v0.2.6, point 4a) : --brand-strong partout, jamais
   --brand — --brand seul ne tient pas 4,5:1 sur blanc/tint sur plusieurs univers. */
.cnd .cnd-btn--tint,
.cnd .cnd-btn--tint:focus { background: var(--brand-tint); color: var(--brand-strong); border-color: transparent; }
/* Survol (v0.25.0) : --brand-strong sur --brand-tint-2 ne tenait que 3,8 à 4,0:1 (contrôle de
   contraste du front-check). Aplat --brand-strong + blanc, comme les pilules d'ancre : ≥ 4,9:1. */
.cnd .cnd-btn--tint:hover { background: var(--brand-strong); color: var(--on-strong); }

.cnd .cnd-btn--link,
.cnd .cnd-btn--link:focus { background: transparent; color: var(--brand-strong); padding: 0; border-color: transparent; }
.cnd .cnd-btn--link:hover { color: var(--brand-strong); text-decoration: underline; }

/* Cartes (fond blanc, bordure fine, pas d'ombre) */
.cnd .cnd-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  color: var(--ink);
}
.cnd .cnd-card--lg { border-radius: var(--r-lg); }
/* Variante accent (cartes tarif / avantage) : bordure tint-2 de l'univers */
.cnd .cnd-card--accent { border-color: var(--brand-tint-2); }

/* Chips / statuts */
.cnd .cnd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: 1;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  background: var(--surface-3);
  color: var(--ink);
  text-decoration: none;
}
.cnd .cnd-chip--brand { background: var(--brand-tint); color: var(--brand-strong); }
.cnd .cnd-chip--ok { background: var(--ok-tint); color: var(--ok-deep); }
.cnd .cnd-chip--info { background: var(--info-tint); color: var(--info); }
.cnd .cnd-chip--warn { background: var(--warn-tint); color: var(--warn); }
.cnd .cnd-chip--danger { background: var(--danger-tint); color: var(--danger); }

/* Champs */
.cnd .cnd-field {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 11px 14px;
}
.cnd .cnd-field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint-2);
}
.cnd .cnd-field:disabled { background: var(--surface-2); border-color: transparent; }
.cnd .cnd-field--error { border-color: var(--danger); }
.cnd .cnd-field-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--ink);
  text-decoration: none;
  margin-bottom: var(--s-1);
}
.cnd .cnd-field-help { font-family: var(--font-body); font-size: var(--t-caption); color: var(--ink-3); margin-top: var(--s-1); }
.cnd .cnd-field-error { font-family: var(--font-body); font-size: var(--t-caption); color: var(--danger); margin-top: var(--s-1); }

/* Accordéons (FAQ) */
.cnd .cnd-accordion-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
  overflow: hidden;
}
.cnd .cnd-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  /* Test « thème hostile » (phase 2) : le thème pose un rayon de 3 px sur les <button>, et une
     hauteur ou une ombre posées sur `body button` passaient aussi. */
  border-radius: 0;
  height: auto;
  min-height: 0;
  box-shadow: none;
  text-shadow: none;
  margin: 0;
  text-align: left;
  /* v0.5.0 : le thème Hello pose white-space:nowrap sur les <button> — une question longue sortait
     de sa carte sur mobile, coupée. */
  white-space: normal;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  padding: 16px 20px;
  cursor: pointer;
}
.cnd .cnd-accordion-trigger > span:first-child { min-width: 0; }
.cnd .cnd-accordion-trigger .cnd-accordion-chevron { flex: none; }
.cnd .cnd-accordion-trigger[aria-expanded="true"] { color: var(--brand-strong); }
/* Contre-QA v0.3.1, point 1 : aucun état :hover/:focus propre jusqu'ici — le bouton retombait sur
   sa règle de base (0,2,0), à égalité avec [type=button]:focus,:hover du thème (0,2,0) sur ce
   bouton en question blanc sur rose (#c36). Fond/couleur redéclarés explicitement ici pour
   trancher l'égalité, sans changer la couleur du texte selon l'état déplié/replié. */
.cnd .cnd-accordion-trigger:hover,
.cnd .cnd-accordion-trigger:focus { background: none; color: var(--ink); }
.cnd .cnd-accordion-trigger[aria-expanded="true"]:hover,
.cnd .cnd-accordion-trigger[aria-expanded="true"]:focus { color: var(--brand-strong); }
.cnd .cnd-accordion-trigger .cnd-accordion-chevron {
  /* --ink-4 (contre-QA v0.2.6, point 4d) : 3,1:1 sur blanc, sous le seuil AA. --ink-3 : 4,5:1. */
  color: var(--ink-3);
  /* v0.33.5 (recette A3) : chevron fin au trait de la maquette (14 px, trait 1,4) à la place du « ▾ ». */
  display: inline-flex;
  width: 14px;
  height: 14px;
  transition: transform .18s ease;
}
.cnd .cnd-accordion-trigger .cnd-accordion-chevron svg { display: block; width: 14px; height: 14px; }
.cnd .cnd-accordion-trigger[aria-expanded="true"] .cnd-accordion-chevron { transform: rotate(180deg); }
.cnd .cnd-accordion-panel {
  padding: 0 20px 16px;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* Mot surligné (signature §8). v0.23.0, conforme aux maquettes et au DS (« ≈ 0,28 em, accent, placé
   derrière le bas des lettres ») : bande pleine et translucide de la couleur d'univers, posée à 82 %
   de la boîte du mot comme dans les maquettes (`0 82% / 100% .28em`), et non plus un trait opaque en
   dégradé sous la ligne. Opacité relevée dans les maquettes, par univers (--hl-a), et plus forte sur
   photo (--hl-a-photo : hero immersif, bande CTA avec photo). Format RichText disponible sur tout
   titre (hero, bande CTA, titres natifs...).
   Historique utile : background-image sur l'élément + box-decoration-break:clone (contre-QA v0.2.6,
   point 5) pour que chaque fragment d'un mot coupé sur deux lignes reçoive sa bande ;
   background-color transparent, l'élément est un <mark> au fond jaune par défaut. color-mix() :
   Chrome 111, Safari 16.2, Firefox 113 ; avant, bande pleine (@supports ci-dessous, v0.23.1). */
/* v0.5.0 : aussi dans les titres natifs des pages au gabarit maison et dans l'éditeur des pages. */
.cnd .cnd-highlight,
body.cnd-site .cnd-site-main .wp-block-heading .cnd-highlight,
.editor-styles-wrapper .wp-block-heading .cnd-highlight {
  --hl: color-mix(in srgb, var(--brand) var(--hl-a, 75%), transparent);
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat;
  background-position: 0 82%;
  background-size: 100% 0.28em;
  padding: 0 0.05em;
  margin: 0 -0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cnd.cnd-hero--immersive .cnd-highlight,
.cnd.cnd-cta-band--photo .cnd-highlight {
  --hl: color-mix(in srgb, var(--brand) var(--hl-a-photo, 90%), transparent);
}
/* v0.23.1 : navigateurs sans color-mix() (iOS < 16.2…) : bande pleine de la couleur d'univers plutôt
   que pas de bande du tout. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .cnd .cnd-highlight,
  body.cnd-site .cnd-site-main .wp-block-heading .cnd-highlight,
  .editor-styles-wrapper .wp-block-heading .cnd-highlight {
    background-image: linear-gradient(var(--brand), var(--brand));
  }
}

/* ---------- Rangées de cartes en défilement horizontal sous 900 px (v0.23.0, maquettes) ----------
   Posé par les blocs (attribut data-cnd-rail, cnd_blocks_rail_attr()) : étapes numérotées, cartes
   image, avantages, cartes tarif, liste à icônes en grille. Défilement natif (scroll-snap), sans
   JavaScript ; la rangée est focalisable (tabindex 0, libellé) pour défiler au clavier, et ne
   déborde jamais de la page (overflow-x: auto sur la rangée elle-même). Carte à 78 % de la largeur,
   88 % pour les cartes de texte larges (data-cnd-rail="large"), comme dans les maquettes.
   Spécificité (0,4,0) : au-dessus des grilles des blocs, chargées après cette feuille (jusqu'à
   (0,3,0) : .cnd.cnd-icon-list.cnd-icon-list--grid). */
@media (max-width: 899px) {
  .cnd.cnd.cnd[data-cnd-rail] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s-2);
    scrollbar-width: thin;
  }
  .cnd.cnd.cnd[data-cnd-rail] > * {
    flex: 0 0 78%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    scroll-snap-align: start;
  }
  .cnd.cnd.cnd[data-cnd-rail="large"] > * {
    flex-basis: 88%;
  }
}
.cnd.cnd.cnd[data-cnd-rail]:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 4px;
}

/* ---------- Composants partagés phase 2 (avis, équipe, galerie, liste à icônes, carte) ---------- */

/* Texte réservé aux lecteurs d'écran (ex. « Note : 5 sur 5 » à côté des étoiles). */
.cnd .cnd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icônes (§6) : trait 1,8 px, couleur héritée du texte. */
.cnd .cnd-icon { display: block; flex: none; }

/* Avatar (§7) : cercle, initiales 600, texte --ink ; 40 px par défaut.
   Contre-QA v0.3.2, point 4 : fond --surface-2 + bordure --line derrière TOUTE photo (pas
   seulement le repli initiales) — une photo Google quasi blanche (cas Elodie Da Silva) n'a sinon
   aucun bord visible sur une carte blanche, qu'elle soit transparente ou simplement très claire. */
.cnd .cnd-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  line-height: 1;
  text-decoration: none;
}
.cnd .cnd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Étoiles de notation : caractères ★, donc du texte coloré → --brand-strong (règle v1.2), étoile
   éteinte en --ink-4 (contre-QA v0.3.1, point 7 : --ink-5 ne tenait qu'environ 3:1 sur blanc,
   contour insuffisant pour rester perceptible — --ink-4 remonte le contraste). La note exacte est
   toujours doublée d'un texte .cnd-sr-only. */
.cnd .cnd-stars {
  display: inline-block;
  color: var(--brand-strong);
  font-size: var(--t-body);
  letter-spacing: 2px;
  line-height: 1;
}
.cnd .cnd-stars__off { color: var(--ink-4); }

/* Carrousel : défilement natif (overflow + scroll-snap), utilisable sans script ; carousel.js
   n'ajoute que les flèches et le compteur. Nombre de diapositives visibles piloté par
   --cnd-per-view (bureau) et --cnd-per-view-md (< 900 px, maquettes : bascule à 900 px) ; sous
   600 px, une diapositive à 85 % de large laisse voir la suivante (invite à faire glisser). */
.cnd .cnd-carousel {
  --cnd-per-view: 3;
  --cnd-per-view-md: 2;
  --cnd-pv: var(--cnd-per-view);
  --cnd-gap: var(--s-4);
  min-width: 0;
}
/* position: relative indispensable : sans bloc conteneur positionné, les éléments en position
   absolute des diapositives hors champ (.cnd-sr-only des étoiles) échappent au rognage de la piste
   et élargissent toute la page (défilement horizontal constaté à 2045 px pour 1280). */
.cnd .cnd-carousel__track {
  position: relative;
  display: flex;
  /* Contre-QA v0.3.2, point 4 : sans ça, le stretch par défaut de l'axe transversal flex étire
     toutes les diapositives à la hauteur de la plus haute de la rangée — un avis déplié (plus de
     min-height borné) gonflait ses voisines avec lui. */
  align-items: flex-start;
  gap: var(--cnd-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cnd .cnd-carousel__track::-webkit-scrollbar { display: none; }
.cnd .cnd-carousel__slide {
  flex: 0 0 calc((100% - (var(--cnd-pv) - 1) * var(--cnd-gap)) / var(--cnd-pv));
  min-width: 0;
  scroll-snap-align: start;
  margin: 0;
}
@media (max-width: 899px) {
  .cnd .cnd-carousel { --cnd-pv: var(--cnd-per-view-md); }
}
@media (max-width: 599px) {
  .cnd .cnd-carousel__slide { flex-basis: 85%; }
}
.cnd .cnd-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.cnd .cnd-carousel__controls[hidden] { display: none; }
.cnd .cnd-carousel__counter {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cnd .cnd-carousel__arrows { display: inline-flex; gap: var(--s-2); }
.cnd .cnd-carousel .cnd-carousel__btn {
  min-width: 0;
  min-height: 0;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
}
/* Même logique que les boutons (contre-QA v0.3.4) : :focus = repos (neutralise le thème, pas de
   survol figé après un clic — les flèches gardent le focus en bout de piste), survol seulement au
   :hover, et jamais sur une flèche désactivée (aria-disabled depuis v0.3.2 : l'ancien
   :not(:disabled) ne l'excluait plus). */
.cnd .cnd-carousel .cnd-carousel__btn:focus {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: none;
}
.cnd .cnd-carousel .cnd-carousel__btn:hover:not([aria-disabled="true"]) {
  background: var(--brand-tint);
  border-color: var(--brand-border);
  color: var(--ink);
  box-shadow: none;
}
/* Contre-QA v0.3.2, point 5 : aria-disabled plutôt que disabled (cf. carousel.js) — le bouton
   reste focusable en bout de piste, seul son style et son clic changent. */
.cnd .cnd-carousel .cnd-carousel__btn[aria-disabled="true"] { opacity: .4; cursor: default; }

/* Focus visible : anneau 2px dans la teinte de l'univers, décalé de 2px — uniforme sur tout
   composant interactif du scope (boutons, pilules d'ancre, champs, déclencheurs FAQ), jamais
   seulement sur .cnd-btn.
   box-shadow: none (contre-QA v0.3.1, point 1) : le thème pose un halo blanc 4px sur ce même état
   (`:focus-visible{box-shadow:0 0 0 4px #fff;outline:2px solid #000}`) sur AUCUNE propriété
   commune avec notre ancienne règle (qui ne posait que outline) — rien ne neutralisait le
   box-shadow, qui passait donc toujours, même quand l'outline était correct. */
/* Contre-QA v0.3.2, point 3 : --brand (2,1-2,8:1 sur blanc) ne tenait pas le minimum RGAA 3:1 des
   indicateurs non textuels (un anneau de focus n'est pas du texte, mais reste un indicateur d'état
   requis à 3:1). --brand-strong (≥4,5:1 sur blanc, v1.2) couvre ce seuil dans tous les univers. */
.cnd a:focus-visible,
.cnd button:focus-visible,
.cnd summary:focus-visible,
.cnd .cnd-btn:focus-visible,
.cnd .cnd-anchor-pill:focus-visible,
.cnd .cnd-field:focus-visible,
.cnd .cnd-accordion-trigger:focus-visible,
.cnd .cnd-carousel__track:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------- Gabarit de site « en-tête et pied de page maison » (templates/site.php, v0.4.0) ----------
   --cnd-site-width : paramètre de mise en page (conteneur des maquettes en-tête/pied, 1200 px), pas
   un token de design (cf. docs/tokens.md §4). Sélecteurs sous body.cnd-site : ils l'emportent sur
   le kit Elementor (.elementor-kit-N a, 0,1,1) sans !important. */
:root { --cnd-site-width: 1200px; }
/* Typographie du design system sur tout le gabarit (contre-QA v0.4.1, point 1). Le kit Elementor pose
   ses polices directement sur les éléments — body.elementor-kit-N : Kollektif, .elementor-kit-N a :
   police d'accent (Roboto), h1–h3 : Kollektif — et une police posée sur un ancêtre ne leur parvient
   donc pas par héritage. body.cnd-site (0,1,1 / 0,1,2) l'emporte sur le kit (0,1,0 / 0,1,1) ; les
   blocs maison gardent leurs polices propres (sélecteurs à deux classes, plus spécifiques). */
body.cnd-site { font-family: var(--font-body); }
body.cnd-site a { font-family: inherit; }
body.cnd-site :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); }
.cnd-site .cnd-skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.cnd-site .cnd-skip-link:focus { transform: none; outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.cnd-site .cnd-site-main {
  display: block;
  max-width: var(--cnd-site-width);
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-7);
}
.cnd-site .cnd-site-main:focus { outline: none; }
/* Hero immersif (v0.23.0) : sa carte déborde du gabarit jusqu'à 20 px des bords de l'écran (marges
   en 100vw). overflow-x: clip coupe l'éventuel débordement de la barre de défilement (Windows) sans
   créer de conteneur de défilement : la barre d'ancres reste collante. 16 px sous l'en-tête. */
body.cnd-site { overflow-x: clip; }
body.cnd-site.cnd-has-immersive .cnd-site-main { padding-top: var(--s-4); }
/* Fil d'Ariane (Rank Math, v0.5.0) : au-dessus du contenu, dans la largeur du gabarit. Rank Math sort
   <nav class="rank-math-breadcrumb"><p><a>…</a><span class="separator">…</span><span class="last">…</span></p></nav>. */
.cnd-site .cnd-breadcrumb {
  max-width: var(--cnd-site-width);
  margin: 0 auto;
  padding: var(--s-4) var(--s-5) 0;
}
.cnd-site .cnd-breadcrumb .rank-math-breadcrumb p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--ink-3);
}
.cnd-site .cnd-breadcrumb .rank-math-breadcrumb a {
  font-family: inherit;
  color: var(--ink-3);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-transform: inherit;
  letter-spacing: inherit;
  min-width: 0;
}
.cnd-site .cnd-breadcrumb .rank-math-breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.cnd-site .cnd-breadcrumb .rank-math-breadcrumb a:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.cnd-site .cnd-breadcrumb .rank-math-breadcrumb .separator { margin: 0 var(--s-1); color: var(--ink-4); }
.cnd-site .cnd-breadcrumb .rank-math-breadcrumb .last { color: var(--ink); }
.cnd-site .cnd-breadcrumb + .cnd-site-main { padding-top: var(--s-5); }

/* ---------- Pastille neutre (v0.33.7, recette ACACED) ----------
   Pictogramme + mention, à la place d'un logo d'institution (ministère, France Travail) : sobre, bordée,
   texte encre. Bornée au scope .cnd : le thème n'y touche pas. */
.cnd .cnd-badge-neutre {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface);
	font-family: var(--font-body);
	font-size: var(--t-small);
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink-2);
	text-align: left;
}
.cnd .cnd-badge-neutre .cnd-icon {
	flex: 0 0 auto;
	color: var(--brand-strong);
}