/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--black-elegant);
}

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

.site-header__logo {
  display: block;
  flex: none;
}

.site-header__logo-img {
  /* La fleur du damassé, identique dans les quatre déclinaisons, sert d'unité :
     c'est elle qui doit faire la même taille d'une page à l'autre, pas la boîte
     de l'image — les lockups n'ont ni le même nombre de lignes ni les mêmes
     marges. Une seule valeur ici règle donc tout l'en-tête.
     Attention en la changeant : ce qui occupe la barre, c'est --logo-fleur
     multiplié par le plus grand --ratio (professional, 1.838). À 40px la boîte
     la plus haute fait 73,5px, d'où --header-h à 88px. Les deux se bougent
     ensemble, sinon la barre grandit toute seule par son min-height et tous les
     « calc(100svh - var(--header-h)) » du site sont faux d'autant. */
  --logo-fleur: 40px;
  --ratio: 1; /* default, overridden by variant classes */
  height: calc(var(--logo-fleur) * var(--ratio));
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

/* Le ratio vaut « hauteur du fichier ÷ hauteur de la fleur dans ce fichier » :
   c'est ce qui donne à la fleur la même taille d'une déclinaison à l'autre,
   --logo-fleur. C'est la fleur qui doit s'aligner, jamais la boîte de l'image —
   les quatre lockups n'ont ni le même nombre de lignes ni les mêmes marges.

   Mesuré sur les fichiers (boîte d'encre du damassé, canal alpha) :
     connivence   fleur 296 / fichier 296 -> 1
     la-suite     fleur 340 / fichier 340 -> 1
     future       fleur 278 / fichier 278 -> 1
     professional fleur 179 / fichier 291 -> 1.626
   Trois fichiers sont détourés au ras de la fleur, qui y est l'élément le plus
   haut ; seul Professional porte des marges transparentes (32px en haut, 80px
   en bas), d'où son ratio supérieur à 1 — sa boîte est plus haute, mais sa
   fleur sort bien à --logo-fleur comme les autres.

   Les trois valeurs d'origine sortaient la fleur à des tailles différentes :
   la-suite 1.841 (fleur à 62,6px quand les autres étaient à 34), professional
   1.838 (45,2px) et future 1.2 (48px). L'en-tête n'était donc jamais deux fois
   le même d'une rubrique à l'autre.

   « limoges » a été retiré : aucune page ne demande cette déclinaison et
   $logoMap (includes/header.php) n'en a pas l'entrée — la classe servait donc
   le fichier Connivence avec un ratio de 1.387. Sans règle, le --ratio: 1
   par défaut est justement la bonne valeur pour ce fichier. */
.site-header__logo-img--la-suite { --ratio: 1; }
/* Professional est le seul fichier non détouré : son encre occupe les pixels 32
   à 211 d'une image de 291 de haut. La boîte étant centrée dans la barre, le
   lockup se retrouve 8,25% de la hauteur de boîte trop haut — 5,4px à la taille
   servie, assez pour se voir en passant d'une rubrique à l'autre. On le
   redescend d'autant. Les trois autres fichiers sont détourés au ras de la
   fleur : leur encre est déjà centrée, ils n'ont rien à corriger. */
.site-header__logo-img--professional {
  --ratio: 1.626;
  transform: translateY(calc(var(--logo-fleur) * var(--ratio) * 0.0825));
}
.site-header__logo-img--future { --ratio: 1; }

.site-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--white);
  cursor: var(--cursor-pointer);
}

.site-header__toggle-icon--close { display: none; }
.site-header.is-open .site-header__toggle-icon--open { display: none; }
.site-header.is-open .site-header__toggle-icon--close { display: block; }

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--u3);
}

.site-header.is-open .site-nav { display: block; }

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

.site-nav__link {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--u1) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* --------------------------------------------------------------------------
   Sous-menu d'une entrée de navigation (rubrique Salons).
   Au format burger : liste imbriquée, dépliée par le chevron.
   -------------------------------------------------------------------------- */

.site-nav__item--parent {
  /* Ancre du panneau déroulant en version large. */
  position: relative;
}

.site-nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--white);
  cursor: var(--cursor-pointer);
}

.site-nav__sub-caret {
  transition: transform var(--ease);
}

.site-nav__sub-toggle[aria-expanded="true"] .site-nav__sub-caret {
  transform: rotate(180deg);
}

.site-nav__sub {
  display: none;
  margin: var(--u1) 0 var(--u2);
  padding-left: var(--u3);
  border-left: 1px solid rgb(255 255 255 / 0.2);
}

.site-nav__item--parent.is-open .site-nav__sub {
  display: block;
}

.site-nav__sub-link {
  display: block;
  padding: var(--u1) 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--white);
  transition: color var(--ease);
}

.site-nav__sub-link:hover,
.site-nav__sub-link:focus-visible,
.site-nav__sub-link.is-active {
  color: var(--red);
}

/* --------------------------------------------------------------------------
   Sélecteur de langue
   Il reprend le sous-menu de la navigation — mêmes classes, mêmes attributs,
   donc le même script l'ouvre, le referme au clic à côté et à la touche Échap.
   Il n'ajoute que son bouton, les drapeaux, et son ancrage à droite sur grand
   écran, où il ferme la barre.
   -------------------------------------------------------------------------- */
.site-nav__lang {
  position: relative;
  margin-top: var(--u3);
}

.site-nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  /* 44px : au doigt, en dessous on vise à côté. */
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  cursor: var(--cursor-pointer);
}

.site-nav__lang-caret {
  transition: transform var(--ease);
}

.site-nav__lang.is-open .site-nav__lang-caret {
  transform: rotate(180deg);
}

.site-nav__lang.is-open .site-nav__lang-menu {
  display: block;
}

.site-nav__lang-option {
  display: flex;
  align-items: center;
  gap: var(--u2);
  min-height: 44px;
}

.site-nav__lang-flag {
  flex: none;
}

.site-nav__lang-option.is-active {
  color: var(--beige);
  cursor: default;
}

@media (min-width: 1200px) {
  :root { --header-h: 96px; }
  .site-header__toggle { display: none; }
  .site-header__logo-img { height: calc(var(--logo-fleur) * var(--ratio)); max-width: none; }
  .site-nav {
    display: flex;
    position: static;
    align-items: center;
    gap: clamp(var(--u2), 2vw, var(--u4));
    padding: 0;
    border: none;
    background: transparent;
  }
  .site-nav__list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
  }
  .site-nav__item {
    display: flex;
    align-items: center;
    flex: none;
    white-space: nowrap;
  }
  .site-nav__item + .site-nav__item::before {
    content: "|";
    margin-inline: clamp(10px, 1.5vw, var(--u3));
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
  }
  .site-nav__lang { margin-top: 0; flex: none; }
  .site-nav__sub-toggle {
    width: 20px;
    height: 20px;
    margin-left: 4px;
  }
  .site-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 244px;
    margin: 0;
    padding: var(--u2) var(--u3);
    border: 1px solid rgb(255 255 255 / 0.12);
    border-left-width: 1px;
    border-radius: 0 0 var(--radius-btn) var(--radius-btn);
    background: var(--black);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.55);
  }
  .site-nav__sub.site-nav__lang-menu {
    left: auto;
    right: 0;
    min-width: 200px;
  }
  .site-nav__item--parent:hover .site-nav__sub,
  .site-nav__item--parent:focus-within .site-nav__sub,
  .site-nav__item--parent.is-open .site-nav__sub {
    display: block;
  }
  .site-nav__sub-link {
    padding: var(--u1) 0;
    white-space: nowrap;
  }
}

.site-footer {
  background: var(--black);
  padding-block: var(--u8) 0;
}

.site-footer__brand {
  text-align: center;
  margin-bottom: var(--u6);
}

.site-footer__logo {
  margin-inline: auto;
  width: 312px;
  max-width: 70%;
  height: auto;
}

.site-footer__tagline {
  margin-top: var(--u1);
  font-size: 1rem;
  color: var(--white);
}

.site-footer__grid {
  display: grid;
  gap: var(--u6) clamp(var(--u4), 14vw - 82px, 118px);
  padding-inline: var(--u3);
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-footer__heading {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--u3);
}

.site-footer__heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 12px;
  background: var(--red);
}

.site-footer__col > .site-footer__heading:not(:first-child) { margin-top: var(--u6); }

.site-footer__addresses {
  display: grid;
  gap: var(--u3);
  font-size: 0.9375rem;
  color: var(--white);
}

.site-footer__street,
.site-footer__city { display: block; }
.site-footer__city { text-transform: uppercase; }

.site-footer__direct {
  display: grid;
  gap: 2px;
  margin-top: var(--u3);
  font-size: 0.9375rem;
  color: var(--white);
}

.site-footer__entry + .site-footer__entry { margin-top: var(--u4); }

.site-footer__entry-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--u1);
}

.site-footer__entry-title--red { color: var(--red); }

.site-footer__links {
  display: grid;
  gap: var(--u2);
  font-size: 0.9375rem;
}

.site-footer__links--tight { gap: 4px; }

.footer-link {
  display: inline-block;
  color: var(--white);
  transition: color var(--ease);
}

.footer-link::after {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.55em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-0.06em) rotate(45deg);
}

.footer-link:hover { color: var(--red); }

.site-footer__entry .footer-link { display: block; }

.site-footer__stars {
  color: var(--red);
  font-size: 1.0625rem;
  letter-spacing: 0.12em;
  margin-bottom: var(--u2);
}

.site-footer__copy {
  margin-top: var(--u8);
  padding: var(--u3) var(--u3) var(--u4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

.contact-addresses,
.contact-direct {
  display: grid;
  gap: var(--u2);
  margin-top: var(--u3);
}

.contact-direct { margin-top: var(--u3); }

.contact-addresses a,
.contact-direct a {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--u1);
  color: var(--beige);
  transition: color var(--ease);
}

.contact-addresses a:hover,
.contact-direct a:hover { color: var(--white); }

.contact-addresses svg,
.contact-direct svg {
  flex: none;
  margin-top: 3px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 var(--u3);
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: var(--cursor-pointer);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.btn--lg { min-height: 56px; padding-inline: var(--u3); }
.btn--sm { min-height: 40px; font-size: 0.75rem; }

.btn--primary {
  background: var(--red);
  color: var(--white);
}

.btn--primary:hover { background: var(--red-hover); }
.btn--primary:active { background: var(--red-pressed); }

.btn--secondary {
  background: var(--black-elegant);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn--secondary:hover { background: var(--surface); }

.btn--tertiary {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn--tertiary:hover {
  background: var(--white);
  color: var(--black);
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn.is-disabled {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   MOBILE — LES APPELS À L'ACTION SE CENTRENT
   Sur une colonne unique, un bouton calé à gauche laisse un vide à sa droite
   qui déséquilibre le bloc : le regard descend le long du texte puis bute sur
   un élément qui ne tient plus le milieu. Au-dessus de 768px les mises en page
   redeviennent multi-colonnes et le bouton reprend l'alignement de sa colonne.
   TROIS DÉCLARATIONS ET PAS UNE DE MOINS. `.btn` est en `inline-flex` : c'est
   une boîte de niveau ligne, sur laquelle `margin: auto` ne centre RIEN (les
   marges automatiques ne se partagent l'espace restant que sur une boîte de
   niveau bloc). Il faut donc les trois ensemble — `flex` pour passer en bloc,
   `fit-content` pour que la boîte ne s'étire pas sur toute la largeur, et les
   marges automatiques pour partager ce qui reste de part et d'autre. Écrit
   ainsi, le centrage vaut aussi bien en flux normal que pour un enfant de
   flex ou de grille, sans avoir à toucher au conteneur.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
  transition: color var(--ease), border-color var(--ease);
}

.link-arrow:hover { color: var(--muted); border-bottom-color: var(--muted); }

.link-arrow--light {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--red);
  border-bottom: 0;
  padding-bottom: 0;
}

.link-arrow--light:hover { color: var(--white); }
.link-arrow--light svg { transition: transform var(--ease); }

.field { margin-bottom: var(--u3); }

.field__label {
  display: block;
  margin-bottom: var(--u1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--u2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font: inherit;
}

.field__input:focus { border-color: var(--red); border-width: 2px; }
.field__input.is-error { background: var(--error-bg); border-color: var(--red); }
.field__input.is-valid { background: var(--valid-bg); border-color: var(--valid-text); }

.field__msg { margin-top: var(--u1); font-size: 0.875rem; }
.field__msg--error { color: var(--red); }
.field__msg--valid { color: var(--valid-text); }

.card { background: var(--surface); overflow: hidden; }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { padding: var(--u4); }
.card__title { margin-bottom: var(--u2); }

.hero-grid[data-stagger] > * {
  transform: translate3d(0, 0, 0) scale(1.02);
}

.hero-grid[data-stagger].is-visible > * {
  transform: none;
}

.hero-grid {
  display: grid;
  background: var(--black);
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: repeat(4, 1fr);
    min-height: calc(100svh - var(--header-h));
  }
}

@supports not (height: 100svh) {
  @media (min-width: 768px) {
    .hero-grid { min-height: calc(100vh - var(--header-h)); }
  }
}

.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100svh - var(--header-h));
  padding: var(--u4) var(--u3);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: var(--cursor-pointer);
}

@supports not (height: 100svh) {
  .hero-panel { min-height: calc(100vh - var(--header-h)); }
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  transition: background var(--ease);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 35%,
    rgba(0, 0, 0, 0) 70%
  );
}

.hero-panel__content { z-index: 1; }

.hero-panel .link-arrow--light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

@media (hover: hover) {
  .hero-panel:hover::before {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.15) 100%
    );
  }
  .hero-panel:hover .link-arrow--light { color: var(--white); }
  .hero-panel:hover .link-arrow--light svg { transform: translateX(4px); }
}

.hero-panel:has(.link-arrow--light:focus-visible) {
  outline: 3px solid var(--beige);
  outline-offset: -3px;
}

.hero-panel .link-arrow--light:focus-visible { box-shadow: none; }

.hero-panel .eyebrow {
  margin-bottom: 0;
  font-size: var(--surtitre-taille);
  font-weight: var(--surtitre-graisse);
  letter-spacing: var(--surtitre-lettrage);
  color: var(--red);
}

.hero-panel h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
}

.hero-panel__title-line,
.hero-panel__text-line { display: block; }

.hero-panel p {
  margin: var(--u1) 0 20px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white);
}

.hero-tagline {
  padding: var(--u12) var(--gutter);
  text-align: center;
  background: var(--black);
  color: var(--white);
  font-weight: 600;
  font-size: clamp(1.125rem, 2.5vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: var(--u2);
  justify-content: center;
  padding: var(--u2) var(--gutter);
  background: rgba(13, 13, 13, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-salons { background: var(--black); }

.tabs__list {
  display: flex;
  gap: var(--u4);
  margin-bottom: var(--u6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.tabs__btn {
  padding: var(--u2) 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: var(--cursor-pointer);
}

.tabs__btn.is-active,
.tabs__btn:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

.carousel { position: relative; overflow: hidden; }

.carousel__track {
  display: flex;
  gap: var(--u3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--u2);
}

.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { flex: 0 0 min(320px, 85vw); scroll-snap-align: start; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--u4); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.price-table { width: 100%; border-collapse: collapse; }

.price-table th,
.price-table td {
  padding: var(--u2) var(--u3);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-table th {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.map-france {
  position: relative;
  aspect-ratio: 1;
  max-width: 560px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-france__pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  transform: translate(-50%, -50%);
}

.ia-diagram__arrow { color: var(--red); }

/* ==========================================================================
   Retours des pages de second niveau — planning des formations, documents,
   réservation. Ces pages s'ouvrent depuis une autre : on doit pouvoir en
   revenir sans chercher, en haut comme en bas.
   Dans components.css et non dans une feuille de page : les trois pages ne
   chargent pas les mêmes styles, et un composant de navigation n'a pas à être
   écrit trois fois.
   ========================================================================== */

:root {
  --retour-h: 64px;
}

.retour-barre {
  display: flex;
  align-items: center;
  min-height: var(--retour-h);
  background: var(--black);
}

.retour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--u1) 0;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  cursor: var(--cursor-pointer);
  transition: color var(--ease);
}

.retour svg {
  flex: none;
  transition: transform var(--ease);
}

.retour:hover,
.retour:focus-visible {
  color: var(--beige);
}

.retour:hover svg,
.retour:focus-visible svg {
  transform: translateX(-4px);
}

.retour:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.retour-fin {
  padding: var(--u8) 0 var(--u12);
  background: var(--black);
}

.retour-fin .container {
  padding-top: var(--u6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .retour svg { transition: none; }
  .retour:hover svg,
  .retour:focus-visible svg { transform: none; }
}

/* --------------------------------------------------------------------------
   NEWSLETTER — la popup d'inscription
   Le pied de page garde son lien : « S'abonner à la newsletter » pointe sur
   #newsletter, comme avant. C'est cette ancre qui ouvre la popup — et elle
   l'ouvre SANS script, par « :target ». Le script n'évite que le saut d'ancre.
   Un champ et un bouton tenus dans un même cadre : deux cadres côte à côte
   feraient deux objets là où l'on n'accomplit qu'une chose. Le rouge de la
   charte est réservé au bouton — c'est la seule action de la popup, elle a
   droit à l'accent.
   -------------------------------------------------------------------------- */
.newsletter-modale {
  display: none;
  position: fixed;
  inset: 0;
  /* Au-dessus de l'en-tête collant, qui monte à 1100. */
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: var(--u3);
  background: rgb(0 0 0 / 0.78);
  overflow-y: auto;
}

.newsletter-modale:target,
.newsletter-modale.is-open {
  display: flex;
}

.newsletter-modale__carte {
  position: relative;
  width: min(100%, 440px);
  margin: auto;
  padding: var(--u6) var(--u4) var(--u4);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-media);
  background: var(--black-elegant);
  text-align: center;
  animation: newsletter-entree 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes newsletter-entree {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

.newsletter-modale__fermer {
  position: absolute;
  top: var(--u2);
  right: var(--u2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--ease);
}

.newsletter-modale__fermer:hover,
.newsletter-modale__fermer:focus-visible {
  color: var(--white);
}

.newsletter-modale__titre {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}

.newsletter-modale__titre::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 12px auto 10px;
  background: var(--red);
}

.newsletter-modale__lead {
  margin: var(--u3) 0 var(--u3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

.newsletter__champ {
  display: flex;
  align-items: stretch;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-btn);
  background: var(--black-elegant);
  overflow: hidden;
  transition: border-color var(--ease);
}

.newsletter__champ:focus-within {
  border-color: var(--red);
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--u2);
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 1.0625rem;
}

.newsletter__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.newsletter__input:focus {
  outline: none;
}

.newsletter__input[aria-invalid="true"] {
  color: var(--red);
}

.newsletter__envoi {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  border: 0;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  transition: background var(--ease);
}

.newsletter__envoi:hover,
.newsletter__envoi:focus-visible {
  background: var(--white);
  color: var(--black);
}

.newsletter__envoi[disabled] {
  opacity: 0.55;
  cursor: default;
}

.newsletter__message {
  min-height: 1.4em;
  margin: var(--u2) 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.newsletter__message.is-ok {
  color: var(--beige);
}

.newsletter__message.is-erreur {
  color: var(--red);
}

.newsletter__piege {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .newsletter-modale__carte { animation: none; }
}

/* --------------------------------------------------------------------------
   Cibles tactiles — au doigt, 44 px est le minimum sous lequel on vise à côté.
   .btn--sm est dessiné à 40 px pour la souris ; il les retrouve dès qu'il n'y a
   pas de survol, c'est-à-dire sur un écran tactile, sans changer de taille sur
   un ordinateur.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .btn--sm {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   ENTRÉE SÉQUENCÉE DU PANNEAU BURGER
   Sous 1200px, la navigation est un panneau qui se déplie. Ses entrées y
   arrivent l'une après l'autre plutôt que d'un bloc.
   Le rang de chaque entrée est posé par main.js dans --i, et le retard s'en
   déduit — le même calcul que [data-stagger] (base.css), pour que le site n'ait
   qu'une seule cadence.
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .site-nav__item,
  .site-nav__lang {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
      opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  /* La classe qui déclenche l'entrée n'est PAS .is-open : celle-ci fait passer
     le panneau de display:none à display:block, et un changement de display
     n'anime rien — le navigateur n'a pas d'état de départ à interpoler.
     main.js pose donc .is-nav-entre à la frame suivante, une fois le panneau
     réellement affiché. */
  .site-header.is-nav-entre .site-nav__item,
  .site-header.is-nav-entre .site-nav__lang {
    opacity: 1;
    transform: none;
  }

  /* Sans script, le panneau ne s'ouvre pas et .is-nav-entre n'arrive jamais :
     les entrées resteraient invisibles si le panneau venait à s'afficher. */
  .no-js .site-nav__item,
  .no-js .site-nav__lang {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Les entrées du menu arrivent d'un coup, sans décalage ni glissement. */
  .site-nav__item,
  .site-nav__lang {
    transition: none;
    transition-delay: 0s;
    transform: none;
  }
}