/* ==========================================================================
   SUCCEO — components.css
   Composants d'interface réutilisables. Écrit en mobile-first : les
   adaptations pour les écrans plus larges se trouvent dans responsive.css.
   ========================================================================== */

/* ==========================================================================
   1. BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* min-height 48px : cible tactile confortable (WCAG 2.5.5). */
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn .icon { flex: none; }

/* Bouton principal : aplat vert Sofitex, texte encre (contraste très élevé). */
.btn--primary {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-ink);
  box-shadow: var(--shadow-xs);
}

.btn--primary:hover {
  background-color: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-ink);
  box-shadow: var(--shadow);
}

.btn--primary:active { background-color: var(--c-accent-press); }

/* Bouton foncé : action secondaire forte. */
.btn--dark {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-dark);
}

.btn--dark:hover {
  background-color: var(--c-ink-700);
  border-color: var(--c-ink-700);
  color: var(--c-on-dark);
}

/* Bouton contour : action tertiaire. */
.btn--outline {
  background-color: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-ink);
}

.btn--outline:hover {
  border-color: var(--c-ink);
  background-color: var(--c-surface-alt);
  color: var(--c-ink);
}

/* Variante contour sur fond foncé. */
.btn--outline-light {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--c-on-dark);
}

.btn--outline-light:hover {
  border-color: var(--c-accent);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--c-on-dark);
}

/* Bouton discret, sans fond. */
.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--c-ink);
  padding-inline: var(--sp-4);
}

.btn--ghost:hover { background-color: var(--c-surface-alt); color: var(--c-ink); }

.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 54px; padding: var(--sp-4) var(--sp-8); font-size: var(--fs-lg); }

.btn--block { display: flex; width: 100%; }

/* Groupe de boutons : passe en colonne sur mobile. */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Cas particulier du bouton étiré sur toute la largeur : voir la règle
   « max-width: 479px » de responsive.css, qui l'autorise à revenir à la
   ligne plutôt qu'à sortir de l'écran. */

/* Lien fléché discret ("Lire la suite"). */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semi);
  text-decoration: none;
  color: var(--c-accent-text);
}

.link-arrow::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover { color: var(--c-ink); }
.link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.section--dark .link-arrow { color: var(--c-accent); }
.section--dark .link-arrow:hover { color: var(--c-on-dark); }

/* ==========================================================================
   2. EN-TÊTE DU SITE
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow var(--dur) var(--ease);
}

/* Le fond translucide et son flou sont portés par un pseudo-élément, et non
   par .site-header lui-même.
   Raison : backdrop-filter fait de l'élément qui le porte le **bloc conteneur
   de ses descendants en position: fixed**. Appliqué au header, il ramenait le
   panneau de navigation mobile — qui vit dans .site-header__inner et compte
   sur « inset: var(--header-h) 0 0 0 » pour occuper l'écran — à la hauteur de
   la barre : 73 px au lieu de 652 px. Le menu s'ouvrait dans une fenêtre de
   deux lignes, à faire défiler. Un pseudo-élément est un enfant, pas un
   ancêtre : il ne capture rien. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  pointer-events: none;
}

/* Ombre légère ajoutée par main.js après quelques pixels de défilement. */
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* --- Logo ---------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex: none;
}

.brand__logo {
  display: block;
  height: 34px;
  width: auto;
}

.brand__sub {
  display: none;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.2;
  max-width: 15ch;
}

/* --- Navigation ---------------------------------------------------------- */

/*
   Barre du panneau mobile : logo et bouton de fermeture.
   « position: sticky » dans un conteneur qui défile : la croix reste donc
   atteignable quel que soit l'endroit où l'on se trouve dans la liste. C'est
   tout l'objet de ce bloc — auparavant la fermeture vivait dans l'en-tête du
   site, sous le panneau, et sortait de la vue au premier défilement.
   Masquée à partir de 900px, où la navigation redevient horizontale.
*/
.site-nav__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  min-height: var(--header-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

/*
   La gouttière est portée par les enfants DIRECTS du panneau, et non par le
   panneau — voir le commentaire de .site-nav.

   Deux raisons pour le sélecteur d'enfant direct, l'une et l'autre nécessaires :

     - les intitulés de groupe situés dans .site-nav__more sont des
       petits-enfants. Sans « > », ils cumulaient la gouttière de leur
       conteneur et la leur : 32px de retrait au lieu de 16, désalignés de
       leurs propres liens ;

     - il porte la spécificité à deux classes. Le reset « ul[class] » de
       global.css vaut (0,1,1) et l'emportait sur « .site-nav__list » à (0,1,0)
       — la liste principale restait collée au bord de l'écran, seule parmi les
       enfants du panneau.

   Remise à zéro dès 900px, où .site-nav__list devient la barre horizontale.
*/
.site-nav > .site-nav__group,
.site-nav > .site-nav__list,
.site-nav > .site-nav__more,
.site-nav > .site-nav__cta,
.site-nav > .site-nav__footnote { padding-inline: var(--gutter); }

.site-nav__logo { display: block; height: 30px; width: auto; }

.site-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  cursor: pointer;
}

.site-nav__close:hover { background: var(--c-surface-alt); }

/* Intitulé de groupe : même repère visuel que le menu « toutes les pages » du
   bureau, pour que les deux se lisent de la même façon. */
.site-nav__group {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

.site-nav__more { display: grid; gap: var(--sp-5); }

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.site-nav__sublist { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }

/* Le bouton « Gérer les cookies » doit se confondre avec les liens voisins. */
.site-nav__link--button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
}

.site-nav__link {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  text-decoration: none;
}

.site-nav__link:hover { background-color: var(--c-surface-alt); color: var(--c-ink); }

/* Page courante : soulignement vert plutôt qu'un aplat. */
.site-nav__link[aria-current="page"] {
  color: var(--c-ink);
  font-weight: var(--fw-semi);
  box-shadow: inset 0 -2px 0 var(--c-accent);
}

/* --- Menu « toutes les pages » (affichage bureau) ------------------------ */

/*
   Volet déroulant qui recense l'intégralité des pages, légales comprises. Il
   complète la navigation principale, qui n'en montre que cinq.

   Masqué sous 900px : en dessous, le panneau burger fait déjà ce travail, et
   deux menus concurrents dans une barre étroite n'auraient pas de sens.
*/
.sitemap { display: none; position: relative; }

@media (min-width: 900px) {
  .sitemap { display: block; }
}

.sitemap__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.sitemap__toggle:hover { background-color: var(--c-surface-alt); }

.sitemap__toggle[aria-expanded="true"] {
  background-color: var(--c-surface-alt);
  border-color: var(--c-border-strong);
}

.sitemap__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--z-drawer);
  width: 460px;
  max-width: calc(100vw - 2 * var(--gutter));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.sitemap__panel[hidden] { display: none; }

.sitemap__group-title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

.sitemap__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }

.sitemap__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(-1 * var(--sp-3));
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  text-decoration: none;
}

.sitemap__link:hover { background-color: var(--c-surface-alt); color: var(--c-ink); }

.sitemap__link[aria-current="page"] {
  font-weight: var(--fw-semi);
  box-shadow: inset 2px 0 0 var(--c-accent);
}

/* Le bouton « Gérer les cookies » doit se confondre avec les liens voisins. */
.sitemap__link--button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* --- Actions du header --------------------------------------------------- */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Sur mobile, les deux appels à l'action sont repris dans le panneau de
   navigation : seul le bouton burger reste dans la barre. */
.site-header__actions .btn { display: none; }

/* Bouton burger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
}

.nav-toggle:hover { background-color: var(--c-surface-alt); }

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color var(--dur-fast) var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- Panneau de navigation mobile ---------------------------------------- */

/*
   Le panneau couvre TOUT l'écran, en-tête compris, et porte sa propre barre de
   fermeture. Il partait auparavant sous l'en-tête (« inset: var(--header-h) »)
   et comptait sur le bouton burger, resté en dessous, pour se refermer : dès
   qu'on faisait défiler la liste, la croix disparaissait de la vue.
*/
.site-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);

  /*
     AUCUNE GOUTTIÈRE LATÉRALE ICI : elle est portée par les enfants.

     La barre de fermeture doit aller d'un bord à l'autre. Avec une gouttière
     sur le panneau, il fallait la ressortir par une marge négative calée au
     pixel sur la boîte de rembourrage — et une arithmétique exacte au pixel
     finit toujours par produire un demi-pixel de débordement sur un écran à
     densité non entière. Que « overflow-x » rendait alors défilable.

     La marge basse intègre la zone de gestes iOS : sans elle, la dernière
     entrée du menu tombe sous la barre d'accueil de l'iPhone.
  */
  padding: 0 0 calc(var(--sp-10) + env(safe-area-inset-bottom, 0px));

  background: var(--c-surface);
  border-top: 1px solid var(--c-border);

  /*
     GARANTIE : jamais de défilement latéral dans le panneau.

     « overflow-y: auto » seul ne suffit pas. La spécification impose que si un
     axe n'est pas « visible », l'autre calcule « visible » en « auto » :
     overflow-x valait donc « auto », et le moindre demi-pixel de débordement
     devenait un défilement horizontal. Sur iOS, cela autorisait même un
     glissement latéral élastique sans aucun contenu à faire défiler.
  */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Fermé : le panneau reste dans les limites horizontales du viewport.
     Un glissement latéral (translateX) provoquerait une barre de défilement
     horizontale parasite sur mobile. */
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}

.site-nav.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.site-nav__cta { display: grid; gap: var(--sp-3); }

.site-nav__footnote {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-4);
}

/*
   Verrou de défilement, menu mobile ouvert.
   « overflow: hidden » seul ne tient pas sur iOS Safari, qui continue de faire
   défiler la page derrière le panneau. La position figée, elle, tient partout.
   main.js pose « top: -<décalage>px » pour que la page ne saute pas, et
   restitue le décalage à la fermeture.
*/
body.nav-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* La jauge de lecture ne doit pas barrer le panneau : elle est plus haute que
   l'en-tête dans l'ordre de peinture, et son filet vert traversait le menu. */
body.nav-open .scroll-progress { display: none; }

/*
   GARDE-FOU : au-delà de 900px, le verrou est levé quoi qu'il arrive.

   Le burger disparaît à cette largeur. Si le verrou y survivait, la page
   resterait figée SANS AUCUN BOUTON pour la libérer — c'est ce qui se produisait
   en tournant un téléphone récent en paysage (932px sur un iPhone 14 Pro Max).

   main.js referme déjà le menu au franchissement du point de rupture, mais cela
   suppose que l'événement « change » de matchMedia soit bien émis. Pour un
   défaut de cette gravité, une règle CSS — évaluée par le moteur de rendu, sans
   intermédiaire — est une garantie et non une redondance.

   « top » porte !important parce que main.js l'écrit en style en ligne.
*/
@media (min-width: 900px) {
  body.nav-open {
    position: static;
    overflow: visible;
    top: auto !important;
  }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(60% 70% at 88% 0%, var(--c-accent-soft) 0%, transparent 62%),
    var(--c-surface);
  overflow: hidden;
}

/* minmax(0, 1fr) et non « auto » : une piste automatique est dimensionnée sur
   la contribution min-content de son contenu et peut donc dépasser son
   conteneur. C'est ce qui arrivait ici — un libellé de bouton insécable
   poussait toute la colonne 33 px hors de l'écran sur mobile. Le 0 comme
   minimum autorise la piste à devenir plus étroite que son contenu, et laisse
   les enfants gérer leur propre débordement. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: center;
}

.hero__title { margin-bottom: var(--sp-5); }

/* Mot mis en valeur par un surlignage vert épais et bas. */
.hl {
  background-image: linear-gradient(to top, var(--c-accent) 0 34%, transparent 34%);
  padding-inline: 2px;
}

.hero__text { font-size: var(--fs-lg); color: var(--c-muted); max-width: 56ch; }

.hero__actions { margin-top: var(--sp-8); }

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Étiquette d'appartenance au groupe, discrète. */
.badge-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  color: var(--c-ink-500);
}

.badge-group::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}

/* --- Visuel du hero ------------------------------------------------------ */

.hero__media { position: relative; }

.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Carte flottante posée sur le visuel. */
.hero__floating {
  display: none;
  position: absolute;
  left: -18px;
  bottom: -18px;
  flex-direction: column;
  gap: 3px;
  max-width: 240px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.hero__floating strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.hero__floating span {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}

/* Emplacement d'image temporaire, visuellement identifiable. */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  aspect-ratio: 4 / 3;
  padding: var(--sp-6);
  text-align: center;
  border: 2px dashed var(--c-border-strong);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(45deg,
      var(--c-surface-alt) 0 12px,
      var(--c-surface-sunk) 12px 24px);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.media-placeholder strong {
  font-size: var(--fs-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-500);
}

.media-placeholder--wide { aspect-ratio: 16 / 9; }
.media-placeholder--square { aspect-ratio: 1 / 1; }

/* ==========================================================================
   4. BANDEAU DE RÉASSURANCE
   ========================================================================== */

.trustbar {
  border-block: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  padding-block: var(--sp-6);
}

.trustbar__list {
  display: grid;
  gap: var(--sp-5);
}

.trustbar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-500);
}

.trustbar__item .icon { color: var(--c-accent-text); flex: none; margin-top: 2px; }

/* ==========================================================================
   5. CARTES
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* Halo vert qui suit le pointeur.
   --mx / --my sont posées par main.js sur la carte survolée. Tant qu'elles
   n'existent pas, le halo est centré : une carte au clavier ou au doigt n'a
   donc pas un rendu cassé, juste un dégradé statique.
   Réservé aux appareils dotés d'un vrai survol — sur mobile, :hover reste
   collé après le tap et le halo resterait allumé. */
@media (hover: hover) and (pointer: fine) {
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
                                var(--c-accent-soft), transparent 68%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
  }

  .card:hover::after { opacity: 1; }

  /* Le contenu doit passer au-dessus du halo. */
  .card > * { position: relative; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card::after { display: none; }
}

.card__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--c-ink); }

/* En-tête de carte : pastille d'icône et titre sur la même ligne.
   L'icône garde sa taille (flex: none) et le titre se centre verticalement
   sur elle, quel que soit le nombre de lignes du titre. */
.card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.card__head .icon-badge { flex: none; }

.card__head .card__title { margin: 0; }

.card__text { color: var(--c-muted); font-size: var(--fs-base); margin: 0; }

.card__foot { margin-top: auto; padding-top: var(--sp-3); }

/* Carte interactive (contient un lien principal). */
.card--interactive:hover {
  border-color: var(--c-accent-line);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* Carte posée sur une section grisée : fond blanc, sans ombre. */
.section--alt .card { box-shadow: none; }

/* Carte sur fond foncé. */
.section--dark .card {
  background: var(--c-ink-700);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.section--dark .card__text { color: var(--c-on-dark-muted); }

/* Pastille d'icône. */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  color: var(--c-accent-text);
  flex: none;
}

.section--dark .icon-badge {
  background: rgba(0, 237, 0, 0.12);
  border-color: rgba(0, 237, 0, 0.32);
  color: var(--c-accent);
}

.icon-badge--dark {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-accent);
}

/* Glyphe blanc sur la pastille encre. Utilisé dans l'en-tête du panneau de
   préférences : le vert y entrerait en concurrence avec le bouton
   « Enregistrer mes choix », juste en dessous. */
.icon-badge--glyph-light { color: var(--c-on-dark); }

/* Carte « problème » (constat) vs « réponse ». */
.card--problem { border-left: 3px solid var(--c-border-strong); }
.card--answer  { border-left: 3px solid var(--c-accent); }

/* ==========================================================================
   6. SCHÉMA DES TROIS ACTEURS
   ========================================================================== */

.actors {
  display: grid;
  gap: var(--sp-4);
  align-items: stretch;
}

.actor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.actor__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  flex: none;
}

.actor__role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.actor__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--c-ink); }

.actor__text { color: var(--c-muted); margin: 0; }

/* Connecteur entre les acteurs : chevron vert. */
.actor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--sp-4) - 1px);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: translate(-50%, 50%) rotate(45deg);
}

.actors > .actor:last-child::after { display: none; }

/* ==========================================================================
   7. ÉTAPES NUMÉROTÉES
   ========================================================================== */

.steps { display: grid; gap: var(--sp-6); counter-reset: step; }

.step {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  counter-increment: step;
}

.step__marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-accent-text);
  box-shadow: var(--shadow-xs);
}

/* Numéro d'étape en pastille verte. */
.step__marker::after {
  content: counter(step);
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-ink);
  font-size: 12px;
  font-weight: var(--fw-bold);
}

.step__body { padding-top: var(--sp-1); }
.step__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--c-ink); margin-bottom: var(--sp-2); }
.step__text { color: var(--c-muted); margin: 0; }

/* ==========================================================================
   8. CHIFFRES CLÉS
   ========================================================================== */

.stats { display: grid; gap: var(--sp-6); }

.stat {
  padding: var(--sp-5) 0;
  border-top: 2px solid rgba(255, 255, 255, 0.12);
}

.stat__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--c-on-dark);
}

.stat__value .stat__suffix { color: var(--c-accent); }

.stat__label { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-on-dark-muted); }

/* Mention indiquant qu'une valeur reste à fournir. */
.stat__pending {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 2px var(--sp-2);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-xs);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}

/* ==========================================================================
   9. TÉMOIGNAGES
   ========================================================================== */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

.quote__mark {
  font-size: 2.4rem;
  line-height: 0.6;
  color: var(--c-accent);
  font-weight: var(--fw-black);
}

.quote__text { color: var(--c-text); font-size: var(--fs-base); margin: 0; }

.quote__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}

/* Portrait du témoignage. Le liseré vert est posé ici et non dans les SVG :
   les trois avatars restent ainsi cohérents, et une vraie photo qui viendrait
   les remplacer héritera du même cadre. */
.quote__avatar {
  display: block;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-sunk);
  box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-accent-line);
}

/* Le portrait avance légèrement au survol de la citation. */
.quote { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }

.quote__avatar { transition: transform var(--dur) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .quote:hover { border-color: var(--c-accent-line); box-shadow: var(--shadow-sm); }
  .quote:hover .quote__avatar { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .quote__avatar { transition: none; }
  .quote:hover .quote__avatar { transform: none; }
}

.quote__name { font-weight: var(--fw-semi); color: var(--c-ink); font-size: var(--fs-base); }
.quote__role { font-size: var(--fs-sm); color: var(--c-muted); }

/* ==========================================================================
   9 bis. CARTE INTÉGRÉE (chargement au clic)
   ==========================================================================
   Deux états dans un seul bloc : l'invitation, puis l'iframe. Le conteneur
   garde le même rapport d'aspect dans les deux cas, la page ne saute donc pas
   au moment du chargement.
   ========================================================================== */

.map-embed {
  position: relative;
  margin-top: var(--sp-5);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 30% 20%, var(--c-accent-soft) 0%, transparent 60%),
    var(--c-surface-alt);
}

.map-embed__prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  text-align: center;
}

.map-embed__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-accent-text);
  box-shadow: var(--shadow-xs);
}

.map-embed__text {
  max-width: 34ch;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.map-embed__alt { margin: 0; font-size: var(--fs-xs); }

/* Carte chargée : l'iframe occupe tout le bloc, l'invitation disparaît. */
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-embed.is-loaded .map-embed__prompt { display: none; }

/* Étiquette « contenu temporaire ». */
.tag-placeholder {
  align-self: flex-start;
  padding: 2px var(--sp-2);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-xs);
  background: var(--c-surface-alt);
  font-size: 11px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ==========================================================================
   11. ACCORDÉONS (FAQ)
   ========================================================================== */

.accordion {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  overflow: hidden;
}

.accordion__item + .accordion__item { border-top: 1px solid var(--c-border); }

.accordion__header { margin: 0; }

.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
  transition: background-color var(--dur-fast) var(--ease);
}

.accordion__trigger:hover { background-color: var(--c-surface-alt); }

.accordion__trigger:focus-visible { outline-offset: -3px; }

/* Icône + / − en CSS pur. */
.accordion__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  transition: background-color var(--dur) var(--ease);
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c-accent-text);
  transform: translate(-50%, -50%);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.accordion__icon::before { width: 9px; height: 2px; }
.accordion__icon::after  { width: 2px; height: 9px; }

.accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--c-accent); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Le panneau s'ouvre par animation de hauteur pilotée en JS. */
.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur) var(--ease);
}

/* Un panneau replié est réellement retiré du flux (display: none via
   l'attribut hidden) : son contenu sort ainsi de l'ordre de tabulation et de
   l'arbre d'accessibilité. Le laisser affiché à hauteur nulle rendrait les
   liens qu'il contient atteignables au clavier sans être visibles. */

.accordion__content {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--c-muted);
}

.accordion__content > * + * { margin-top: var(--sp-3); }

/* Catégorie de FAQ */
.faq-group + .faq-group { margin-top: var(--sp-10); }
.faq-group__title { margin-bottom: var(--sp-4); font-size: var(--fs-xl); }

.faq-search { margin-bottom: var(--sp-8); }

.faq-status {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* ==========================================================================
   12. TABLEAU COMPARATIF
   ========================================================================== */

.compare {
  min-width: 720px;
  font-size: var(--fs-sm);
  background: var(--c-surface);
}

/* Le tableau des cookies n'a que quatre colonnes courtes : 720px le forceraient
   à défiler sans nécessité. */
.compare--compact { min-width: 600px; }

.compare caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.compare th,
.compare td {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  vertical-align: top;
  text-align: left;
}

.compare thead th {
  background: var(--c-surface-alt);
  color: var(--c-ink);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
}

/* Colonne CDI-E mise en avant (sans dévaloriser les autres contrats). */
.compare thead th.is-featured {
  background: var(--c-ink);
  color: var(--c-on-dark);
  border-color: var(--c-ink);
}

.compare tbody th {
  width: 22%;
  background: var(--c-surface-alt);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}

.compare td.is-featured { background: var(--c-accent-soft); }

.table-wrap { border-radius: var(--radius-md); }

/* ==========================================================================
   13. FORMULAIRES
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }

.form-grid { display: grid; gap: var(--sp-5); }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}

/* Astérisque des champs obligatoires. */
.field__label .req { color: var(--c-danger); margin-left: 2px; }

.field__hint { font-size: var(--fs-xs); color: var(--c-muted); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder { color: var(--c-muted-soft); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--c-ink-500); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-accent-text);
  box-shadow: var(--shadow-focus);
}

.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

/* iOS agrandit automatiquement la page au focus dès qu'un champ fait moins
   de 16 px. On fixe donc cette taille sur écran tactile, sans empêcher le
   pincement ou le zoom volontaire de la page. */
@media (max-width: 899px) {
  .input,
  .select,
  .textarea {
    font-size: 16px;
  }
}

/* Chevron du select dessiné en CSS (aucune image). */
.select {
  appearance: none;
  padding-right: var(--sp-10);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink-500) 50%),
    linear-gradient(135deg, var(--c-ink-500) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* --- Champ en erreur ----------------------------------------------------- */

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: var(--c-danger);
  background-color: var(--c-danger-soft);
}

.field__error {
  display: none;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-danger);
}

.field.has-error .field__error { display: flex; }

.field__error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--c-danger);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
}

/* --- Case à cocher / consentement ---------------------------------------- */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: 1.5;
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-xs);
  background: var(--c-surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/*
   La coche est une IMAGE DE FOND, et non un « input::after ».
   Même raison que pour l'interrupteur du panneau de cookies : les
   pseudo-éléments d'un <input> ne sont pas garantis par la spécification.
   Firefox n'en rend aucun — la case passait au vert, sans coche. Sur la case
   de consentement RGPD, seule case obligatoire des formulaires, l'état doit
   être lisible d'un coup d'œil dans tous les navigateurs.

   ⚠ Le trait est en dur à #0f1720 : une URL de données ne peut pas lire une
   variable CSS. C'est la valeur de --c-ink — si vous changez l'encre dans
   variables.css, changez-la ici aussi.
*/
.checkbox input[type="checkbox"]:checked {
  background-color: var(--c-accent);
  border-color: var(--c-accent-press);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3.1 3.1L12.5 4.8' fill='none' stroke='%230f1720' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

.field.has-error .checkbox input[type="checkbox"] { border-color: var(--c-danger); }

/* --- Groupe de boutons radio en cartes ----------------------------------- */

.radio-cards { display: grid; gap: var(--sp-3); }

.radio-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.radio-card:hover { border-color: var(--c-ink-500); }

.radio-card input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid var(--c-border-strong);
  border-radius: 50%;
  cursor: pointer;
}

.radio-card input[type="radio"]:checked {
  border-color: var(--c-accent-press);
  background: radial-gradient(circle, var(--c-accent) 0 45%, transparent 46%);
}

.radio-card:has(input:checked) {
  border-color: var(--c-accent-press);
  background: var(--c-accent-soft);
}

.radio-card:has(input:focus-visible) {
  outline: 3px solid var(--c-accent-text);
  outline-offset: 2px;
}

.radio-card__label { font-size: var(--fs-base); color: var(--c-ink); font-weight: var(--fw-medium); }

/* --- Blocs de formulaire ------------------------------------------------- */

.form-card {
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.form-fieldset { border: 0; padding: 0; margin: 0; }

.form-fieldset + .form-fieldset {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-border);
}

.form-legend {
  padding: 0;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}

.form-privacy {
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* --- Messages de retour du formulaire ------------------------------------ */

.form-feedback {
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--fs-base);
}

.form-feedback.is-visible { display: flex; }

.form-feedback--success {
  background: var(--c-success-soft);
  border-color: #b7e3c9;
  color: #0a5c30;
}

.form-feedback--error {
  background: var(--c-danger-soft);
  border-color: #f2c2be;
  color: #8c1e18;
}

.form-feedback--info {
  background: var(--c-info-soft);
  border-color: #c3dcea;
  color: var(--c-info);
}

.form-feedback strong { display: block; margin-bottom: 2px; color: inherit; }

/* ==========================================================================
   14. ENCADRÉS D'INFORMATION
   ========================================================================== */

.notice {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface-alt);
}

.notice__icon { flex: none; color: var(--c-accent-text); margin-top: 2px; }
.notice__title { font-weight: var(--fw-semi); color: var(--c-ink); margin-bottom: var(--sp-1); }
.notice__text { font-size: var(--fs-base); color: var(--c-muted); margin: 0; }

.notice--warning { background: var(--c-warning-soft); border-color: #f0dcb4; }
.notice--warning .notice__icon { color: var(--c-warning); }

.notice--info { background: var(--c-info-soft); border-color: #c3dcea; }
.notice--info .notice__icon { color: var(--c-info); }

/* Encadré « à ne pas confondre » : point de vigilance CDI-E / CDI intérimaire. */
.callout-vigilance {
  padding: var(--sp-6);
  border: 1px solid var(--c-accent-line);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
}

.callout-vigilance h3 { margin-bottom: var(--sp-3); }
.callout-vigilance p { color: var(--c-ink-500); }
.callout-vigilance p + p { margin-top: var(--sp-3); }

/* ==========================================================================
   15. EN-TÊTE DE PAGE INTÉRIEURE
   ========================================================================== */

.page-head {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(52% 100% at 92% 0%, var(--c-accent-soft) 0%, transparent 60%),
    var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
}

.page-head__title { margin-bottom: var(--sp-4); }
.page-head__text { font-size: var(--fs-lg); color: var(--c-muted); max-width: 62ch; }
.page-head__actions { margin-top: var(--sp-8); }

/* Fil d'Ariane */
.breadcrumb { margin-bottom: var(--sp-5); font-size: var(--fs-sm); }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); }

.breadcrumb li + li::before { content: "/"; color: var(--c-muted-soft); }

.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent-text); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-ink); font-weight: var(--fw-medium); }

/* ==========================================================================
   16. BLOC D'APPEL À L'ACTION FINAL
   ========================================================================== */

.cta-split { display: grid; gap: var(--sp-5); }

.cta-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}

.cta-panel__title { font-size: var(--fs-2xl); }
.cta-panel__text { color: var(--c-muted); margin: 0; }
.cta-panel__actions { margin-top: auto; padding-top: var(--sp-4); }

/* Panneau entreprise : mis en avant (public prioritaire). */
.cta-panel--primary {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.cta-panel--primary .cta-panel__title { color: var(--c-on-dark); }
.cta-panel--primary .cta-panel__text { color: var(--c-on-dark-muted); }

/* Bandeau d'appel à l'action pleine largeur. */
.cta-band {
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  background: var(--c-ink);
  color: var(--c-on-dark-muted);
  text-align: center;
}

.cta-band h2 { color: var(--c-on-dark); margin-bottom: var(--sp-3); }
.cta-band p { max-width: 60ch; margin-inline: auto; }
.cta-band .btn-group { margin-top: var(--sp-6); align-items: center; }

/* ==========================================================================
   18. MODALE (détail d'offre, préférences cookies)
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.modal.is-open { display: flex; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 32, 0.55);
  animation: fade-in var(--dur) var(--ease);
}

.modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;

  /* 92vh d'abord, pour les navigateurs sans dvh. Puis 92dvh : sur iOS, vh se
     mesure barre d'outils **masquée**, alors que le conteneur en position
     fixed est haut de l'écran barre d'outils **affichée**. Le panneau, aligné
     en bas, se retrouvait plus haut que son conteneur et son en-tête sortait
     par le haut. dvh suit la hauteur réellement visible. */
  max-height: 92vh;
  max-height: 92dvh;

  background: var(--c-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  animation: slide-up var(--dur) var(--ease-out);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}

/* Pastille d'icône et titre du panneau, groupés pour rester alignés quand le
   titre passe sur deux lignes. */
.modal__heading {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}

.modal__heading .icon-badge { flex: none; }

.modal__title { font-size: var(--fs-xl); }

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
}

.modal__close:hover { background: var(--c-surface-alt); }

.modal__body { padding: var(--sp-6); overflow-y: auto; }

/* Le pied du panneau porte le bouton « Enregistrer ». Ouvert en feuille basse
   sur mobile, il touche le bord de l'écran : la marge de sécurité évite qu'il
   passe sous la barre de gestes de l'iPhone. */
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6)
           calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-alt);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .modal__overlay,
  .modal__dialog { animation: none; }
}

/* ==========================================================================
   19. BANNIÈRE COOKIES
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  display: none;
  padding: var(--sp-5) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 30px rgba(15, 23, 32, 0.12);
}

.cookie-banner.is-visible { display: block; }

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--container);
  margin-inline: auto;
}

.cookie-banner__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-ink); }
.cookie-banner__text { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }

.cookie-banner__actions { display: grid; gap: var(--sp-3); }

/* Préférences détaillées */
.cookie-pref { display: grid; gap: var(--sp-4); }

.cookie-pref__item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}

.cookie-pref__body { flex: 1; }
.cookie-pref__title { font-weight: var(--fw-semi); color: var(--c-ink); margin-bottom: var(--sp-1); }
.cookie-pref__text { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Interrupteur
   --------------------------------------------------------------------------
   Trois pièces : le conteneur .switch, la case à cocher qui fait la glissière,
   et .switch__knob qui fait le curseur.
   -------------------------------------------------------------------------- */

.switch {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;

  /* Sans cela, le conteneur s'étire à la hauteur de la ligne du parent flex —
     jusqu'à 101px — alors qu'il sert de bloc conteneur au curseur. */
  align-self: center;
}

.switch input {
  appearance: none;
  width: 48px;
  height: 28px;

  /* Chrome applique « margin: 3px 3px 3px 4px » aux cases à cocher, même en
     appearance: none. La glissière s'en trouve décalée par rapport au curseur,
     qui se positionne lui sur le conteneur. */
  margin: 0;

  border-radius: var(--radius-pill);
  background: var(--c-surface-sunk);
  border: 1px solid var(--c-border-strong);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/*
   Le curseur est un VRAI élément, et non « input::after ». Deux raisons, l'une
   et l'autre constatées à l'écran :

     - les pseudo-éléments d'un <input> ne sont pas garantis par la
       spécification : Firefox n'en rend aucun, le curseur était donc
       purement et simplement absent ;

     - le pseudo se positionnait par rapport à .switch, que le parent flex
       étirait à 101px de haut, alors que la glissière restait centrée dedans.
       Avec « top: 4px », la pastille blanche se peignait 32px AU-DESSUS de la
       glissière, flottant hors du composant.

   « top: 50% » avec une demi-hauteur de marge négative centre le curseur sur
   la glissière quelle que soit la hauteur du conteneur : le défaut ne peut pas
   revenir par un changement d'alignement du parent.
*/
.switch__knob {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);

  /* Le clic doit traverser le curseur pour atteindre la case à cocher. */
  pointer-events: none;
}

.switch input:checked { background: var(--c-accent); border-color: var(--c-accent-press); }
.switch input:checked + .switch__knob { transform: translateX(20px); }

/* Le repère de focus doit rester visible : c'est le seul indice pour qui
   navigue au clavier. */
.switch input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.switch input:disabled { cursor: not-allowed; }
.switch input:disabled,
.switch input:disabled + .switch__knob { opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .switch__knob { transition: none; }
}

/* ==========================================================================
   20. PIED DE PAGE
   ========================================================================== */

.site-footer {
  background: var(--c-ink);
  color: var(--c-on-dark-muted);
  padding-top: var(--section-y);
  font-size: var(--fs-sm);
}

.site-footer a { color: var(--c-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); text-decoration: underline; }

.site-footer__grid { display: grid; gap: var(--sp-10); }

.site-footer__brand { max-width: 34ch; }

.site-footer__logo { height: 32px; width: auto; margin-bottom: var(--sp-4); }

.site-footer__desc { color: var(--c-on-dark-muted); margin-bottom: var(--sp-5); }

.footer-col__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-on-dark);
}

.footer-col ul { display: grid; gap: var(--sp-3); }

.footer-contact { display: grid; gap: var(--sp-3); }
.footer-contact div { display: flex; gap: var(--sp-3); align-items: flex-start; }
.footer-contact .icon { flex: none; margin-top: 3px; color: var(--c-accent); }

/* Le même bloc de coordonnées, réemployé hors du pied de page — sur fond clair,
   donc en encre plutôt qu'en blanc. Le vert vif passe au vert lisible : #00ed00
   sur blanc ne donne que 1,6:1 de contraste. */
.footer-contact--on-light { color: var(--c-text); }
.footer-contact--on-light .icon { color: var(--c-accent-text); }

.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  color: var(--c-on-dark-muted);
}

.footer-social a:hover { border-color: var(--c-accent); color: var(--c-accent); }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--section-y);
  padding-block: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__copy { color: var(--c-muted-soft); }

/* Crédit de réalisation : passe à la ligne sous le copyright, en retrait
   typographique. Volontairement discret — c'est une signature, pas une
   annonce. */
.site-footer__credit {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-muted-soft);
}

.site-footer__credit a { color: inherit; text-decoration: none; }
.site-footer__credit a:hover { color: var(--c-accent); text-decoration: underline; }

/* Bouton texte utilisé pour rouvrir les préférences cookies. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

.link-button:hover { color: var(--c-accent); text-decoration: underline; }

/* Bouton employé au fil d'une phrase : il doit se lire comme un lien, donc
   porter le soulignement en permanence. */
.link-button--inline { text-decoration: underline; color: var(--c-accent-text); }
.link-button--inline:hover { color: var(--c-ink); }

/* ==========================================================================
   21. ICÔNES
   ========================================================================== */

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 28px; height: 28px; }