/* ==========================================================================
   ISMOD · Composants
   Nommage en français, BEM léger : .bloc, .bloc__element, .bloc--variante.
   États : .est-plein, .est-ouvert, .est-revele (posés par js/main.js).
   À charger après base.css.
   ========================================================================== */

/* ==========================================================================
   1. Boutons et liens d'action
   Une seule grammaire de lien d'orientation : le lien fléché (texte, puis
   flèche). Les boutons sont réservés aux actions (s'inscrire, appeler).
   ========================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 3rem;
  padding: var(--e-2) var(--e-5);
  border: var(--filet-fin) solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  cursor: pointer;
  transition:
    background-color var(--duree-rapide) var(--ease-etat),
    color var(--duree-rapide) var(--ease-etat),
    border-color var(--duree-rapide) var(--ease-etat);
}
.bouton .icone {
  width: 1.25rem;
  height: 1.25rem;
}

/* Principal : indigo à texte blanc sur clair, blanc à texte noir sur sombre.
   Survol : indigo de nuit sur clair, inversion sur sombre. */
.bouton--principal {
  background-color: var(--bouton-fond);
  border-color: var(--bouton-fond);
  color: var(--bouton-texte);
}
.bouton--principal:hover {
  background-color: var(--bouton-survol-fond);
  border-color: var(--bouton-survol-bord);
  color: var(--bouton-survol-texte);
}

/* Secondaire : au filet. */
.bouton--secondaire {
  background-color: transparent;
  border-color: currentColor;
  color: var(--texte);
}
.bouton--secondaire:hover {
  background-color: var(--texte);
  border-color: var(--texte);
  color: var(--fond);
}

/* WhatsApp : même dessin que le secondaire, icône dédiée. */
.bouton--whatsapp .icone {
  width: 1.375rem;
  height: 1.375rem;
}

.bouton--compact {
  min-height: 2.75rem;
  padding-inline: var(--e-4);
}
.bouton--large {
  width: 100%;
}

.bouton:disabled,
.bouton[aria-disabled="true"] {
  background-color: transparent;
  border-color: var(--filet);
  color: var(--texte-doux);
  cursor: not-allowed;
}

/* Lien fléché : texte puis flèche, sans soulignement au repos ; le filet
   apparaît au survol comme au focus clavier. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.75rem;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  color: var(--texte);
}
.lien-fleche__texte {
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fort);
  text-underline-offset: 0.3em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duree-rapide) var(--ease-etat);
}
.lien-fleche .icone {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--accent);
  transition: transform var(--duree) var(--ease-etat);
}
.lien-fleche:hover .lien-fleche__texte,
.lien-fleche:focus-visible .lien-fleche__texte {
  text-decoration-color: currentColor;
}
.lien-fleche:hover .icone,
.lien-fleche:focus-visible .icone {
  transform: translateX(0.25rem);
}
/* Grand : entrées de premier niveau (colonne d'entrées, fin de section). */
.lien-fleche--grand {
  gap: var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--t-2xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.15;
}
.lien-fleche--grand .icone {
  width: 1.75rem;
  height: 1.75rem;
}
/* Colonne d'entrées fléchées, séparées par des filets. */
.liste-fleches {
  display: grid;
  border-block-start: var(--filet-fin) solid var(--filet);
}
.liste-fleches > li {
  border-block-end: var(--filet-fin) solid var(--filet);
}
.liste-fleches .lien-fleche {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--e-3);
}

/* Lien d'appel : pictogramme nu en accent, numéro en chiffres tabulaires. */
.lien-appel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  font-size: var(--t-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--texte);
  flex-wrap: wrap;
  max-width: 100%;
}
.lien-appel__icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--accent);
}
.lien-appel__icone .icone {
  width: 1.25rem;
  height: 1.25rem;
}
.lien-appel__texte {
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fin);
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duree-rapide) var(--ease-etat);
}
.lien-appel:hover .lien-appel__texte,
.lien-appel:focus-visible .lien-appel__texte {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   2. Titre de section : un titre, éventuellement un chapeau. Aucun surtitre.
   ========================================================================== */

.titre-section {
  display: grid;
  gap: var(--e-5);
  margin-block-end: clamp(var(--e-7), 2rem + 3vw, var(--e-9));
}
.titre-section__titre {
  font-size: var(--t-3xl);
  font-weight: var(--titre-graisse);
  max-width: 18ch;
}
.titre-section__titre em {
  display: inline;
}
.titre-section .chapeau {
  color: var(--texte-doux);
}
.titre-section--centre {
  justify-items: center;
  text-align: center;
}
.titre-section--centre .titre-section__titre,
.titre-section--centre .chapeau {
  margin-inline: auto;
}
@media (min-width: 64em) {
  .titre-section--scinde {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    column-gap: var(--gouttiere);
    align-items: end;
  }
  .titre-section--scinde > .titre-section__titre {
    grid-column: 1 / span 7;
  }
  .titre-section--scinde > .chapeau {
    grid-column: 9 / -1;
    grid-row: 1 / span 2;
    align-self: end;
    padding-block-end: 0.4em;
  }
}

/* ==========================================================================
   3. Couche d'annotation du modéliste
   Cote (ligne, extrémités, valeur), cran de montage, numéro de pièce.
   Ponctuation discrète : jamais un décor.
   ========================================================================== */
.cote {
  --cote-extremite: 0.5625rem;
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  color: var(--texte-doux);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1;
}
.cote::before,
.cote::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--e-4);
  height: var(--cote-extremite);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% var(--filet-fin);
  background-position: 0 50%;
  background-repeat: no-repeat;
}
.cote::before {
  border-inline-start: var(--filet-fin) solid currentColor;
}
.cote::after {
  border-inline-end: var(--filet-fin) solid currentColor;
}
.cote__valeur {
  flex: 0 0 auto;
}
.cote--verticale {
  flex-direction: column;
  width: auto;
  min-height: 6rem;
}
.cote--verticale .cote__valeur {
  writing-mode: vertical-rl;
}
.cote--verticale::before,
.cote--verticale::after {
  min-width: 0;
  min-height: var(--e-4);
  width: var(--cote-extremite);
  height: auto;
  background-size: var(--filet-fin) 100%;
  background-position: 50% 0;
  border: 0;
}
.cote--verticale::before {
  border-top: var(--filet-fin) solid currentColor;
}
.cote--verticale::after {
  border-bottom: var(--filet-fin) solid currentColor;
}

/* Cran de montage : petit triangle posé sur une arête. */
.cran {
  display: inline-block;
  width: 0;
  height: 0;
  border-inline: 0.3125rem solid transparent;
  border-block-start: 0.4375rem solid currentColor;
  color: var(--accent);
  vertical-align: middle;
}
.cran--haut,
.cran--bas,
.cran--gauche,
.cran--droite {
  position: absolute;
}
.cran--haut {
  top: 0;
  left: var(--cran-position, 50%);
  transform: translateX(-50%);
}
.cran--bas {
  bottom: 0;
  left: var(--cran-position, 50%);
  transform: translateX(-50%) rotate(180deg);
}
.cran--gauche {
  left: 0;
  top: var(--cran-position, 50%);
  transform: translate(-0.125rem, -50%) rotate(-90deg);
}
.cran--droite {
  right: 0;
  top: var(--cran-position, 50%);
  transform: translate(0.125rem, -50%) rotate(90deg);
}

/* Numéro de pièce */
.piece {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.2;
  color: var(--texte-doux);
}
.piece__num {
  font-family: var(--police-titre);
  font-size: 1.25em;
  font-style: normal;
  font-weight: var(--titre-graisse-petit);
  text-transform: none;
  color: var(--texte);
}

/* ==========================================================================
   4. Signature : le décalage
   Petit carré, grand bloc décalé, séparés par un jour net. Le bloc est
   découpé en équerre autour du carré (clip-path), comme l'emblème.
   ========================================================================== */
.decalage {
  --carre: clamp(3.5rem, 2.4rem + 4.4vw, 7.5rem);
  --dx: calc(var(--carre) * 0.41);
  --dy: calc(var(--carre) * 0.1);
  --jour: calc(var(--carre) * var(--sig-jour-ratio));
  --entaille-x: calc(var(--carre) - var(--dx) + var(--jour));
  --entaille-y: calc(var(--carre) - var(--dy) + var(--jour));
  display: flow-root; /* la marge du bloc ne doit pas fusionner avec le parent */
  position: relative;
  isolation: isolate;
}
.decalage__carre {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--carre);
  height: var(--carre);
  background-color: var(--decalage-carre, var(--aplat));
  color: var(--decalage-carre-texte, var(--fond));
}
.decalage__bloc {
  margin-inline-start: var(--dx);
  margin-block-start: var(--dy);
  padding: calc(var(--entaille-y) + var(--e-5)) clamp(var(--e-5), 1rem + 2vw, var(--e-8)) clamp(var(--e-6), 1rem + 2vw, var(--e-8));
  background-color: var(--decalage-bloc, var(--fond-alt));
  clip-path: polygon(
    var(--entaille-x) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--entaille-y),
    var(--entaille-x) var(--entaille-y)
  );
}
/* Miroir : carré en haut à droite. */
.decalage--miroir .decalage__carre {
  left: auto;
  right: 0;
}
.decalage--miroir .decalage__bloc {
  margin-inline-start: 0;
  margin-inline-end: var(--dx);
  clip-path: polygon(
    0 0,
    calc(100% - var(--entaille-x)) 0,
    calc(100% - var(--entaille-x)) var(--entaille-y),
    100% var(--entaille-y),
    100% 100%,
    0 100%
  );
}

/* Cadre photo d'équerre : aplat décalé derrière, jour entre les deux. */
.cadre {
  position: relative;
  isolation: isolate;
  padding: 0 var(--sig-decalage) var(--sig-decalage) 0;
}
.cadre::before {
  content: "";
  position: absolute;
  inset: var(--sig-decalage) 0 0 var(--sig-decalage);
  z-index: -1;
  background-color: var(--cadre-aplat, var(--aplat));
}
.cadre__image,
.cadre > img,
.cadre > picture img {
  width: 100%;
  aspect-ratio: var(--ratio, 3 / 4);
  object-fit: cover;
  object-position: var(--focale, 50% 25%);
  outline: var(--sig-jour) solid var(--fond);
  outline-offset: 0;
}
.cadre--gauche {
  padding: 0 0 var(--sig-decalage) var(--sig-decalage);
}
.cadre--gauche::before {
  inset: var(--sig-decalage) var(--sig-decalage) 0 0;
}
.cadre--alt {
  --cadre-aplat: var(--fond-alt);
}
.cadre + figcaption,
.cadre__legende {
  margin-block-start: var(--e-3);
}

/* ==========================================================================
   5. En-tête et navigation
   La navigation mène à des pages. Aucune transition : quand l'en-tête change
   d'état, tout bascule dans la même image (pas de passage par un gris).
   ========================================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background-color: var(--fond);
  color: var(--texte);
  border-block-end: var(--filet-fin) solid var(--filet);
}
.entete__barre {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  max-width: var(--conteneur);
  min-height: calc(var(--hauteur-entete) - var(--filet-fin));
  margin-inline: auto;
  padding: 0 var(--marge);
}
.entete__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}
/* Logo court de l'en-tête : 88 px de large, 39 px de haut, comme sur un
   site courant (demande du client du 2026-11-12, sous le minimum de 120 px
   de la charte : la version optique au trait du I épaissi reste lisible). */
.entete__logo img,
.entete__logo-svg {
  display: block;
  width: 5.5rem;
  height: auto;
}
/* Version optique « petite taille » du logo court (trait du I épaissi),
   en SVG en ligne : elle prend la couleur du texte de l'en-tête (noir sur
   clair, blanc sur sombre). Le logo n'est jamais recoloré autrement. */
.entete__logo-svg,
.menu-mobile__logo {
  fill: currentColor;
  aspect-ratio: 786.82 / 349.72;
}
.entete__logo-blanc {
  display: none;
}
.entete__nav {
  display: none;
  justify-self: center;
}
.entete__liste {
  display: flex;
  align-items: center;
  gap: clamp(var(--e-4), -0.5rem + 2vw, var(--e-6));
}
.entete__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.entete__lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: var(--filet-fort);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree) var(--ease-etat);
}
.entete__lien:hover::after {
  transform: scaleX(1);
}
/* Page courante : filet d'accent de 2 px + aria-current="page". */
.entete__lien[aria-current="page"]::after {
  background-color: var(--accent);
  transform: scaleX(1);
}
.entete__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-1);
}
.entete__cta {
  margin-inline-end: var(--e-2);
}
/* Appeler et WhatsApp : icônes nues de 44 px, sous 64 em. */
.entete__icone {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--texte);
  text-decoration: none;
}
.entete__icone .icone {
  width: 1.5rem;
  height: 1.5rem;
}
.entete__icone:hover {
  color: var(--accent);
}
.entete__bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--e-2);
  margin-inline-end: calc(-1 * var(--e-2));
  font-size: var(--t-sm);
  font-weight: 500;
}
.entete__menu-secours {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 500;
}
html.js .entete__menu-secours,
html:not(.js) .entete__bouton-menu {
  display: none;
}
@media (max-width: 29.99em) {
  .entete__cta {
    display: none;
  }
}
@media (min-width: 30em) {
  .entete__barre {
    gap: var(--e-5);
  }
  .entete__logo img,
  .entete__logo-svg {
    width: 5.5rem;
  }
}
@media (min-width: 64em) {
  .entete__nav {
    display: block;
  }
  .entete__cta {
    margin-inline-end: 0;
  }
  .entete__bouton-menu,
  .entete__icone,
  html:not(.js) .entete__menu-secours {
    display: none;
  }
}

/* Variante transparente : posée sur la photo d'ouverture, pleine au défilement.
   Un voile linéaire limité à la bande de l'en-tête protège la lisibilité. */
.entete--transparent {
  position: absolute;
  left: 0;
  right: 0;
  border-block-end-color: transparent;
}
html.js .entete--transparent {
  position: fixed;
}
.entete--transparent:not(.est-plein) {
  --texte: var(--blanc);
  --fond: var(--noir);
  --filet: var(--graphite);
  --accent: var(--indigo-clair);
  --accent-plein: var(--blanc);
  --sur-accent: var(--noir);
  --focus: var(--blanc);
  --bouton-fond: var(--blanc);
  --bouton-texte: var(--noir);
  --bouton-survol-fond: var(--noir);
  --bouton-survol-texte: var(--blanc);
  --bouton-survol-bord: var(--blanc);
  background-color: transparent;
  color: var(--blanc);
  --focus-contraste: var(--noir);
}
.entete--transparent:not(.est-plein)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--voile-entete);
}
.entete--transparent:not(.est-plein) .entete__logo-noir {
  display: none;
}
.entete--transparent:not(.est-plein) .entete__logo-blanc {
  display: block;
}
.entete--transparent.est-plein {
  border-block-end-color: var(--filet);
}

/* ==========================================================================
   6. Menu mobile : plein écran noir, grands liens en Zodiak
   Ouverture en 280 ms au plus (rideau d'équerre), fermeture en 160 ms.
   Sous la liste, les deux pôles en petit ; puis l'appel à s'inscrire.
   ========================================================================== */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--noir);
  color: var(--blanc);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    opacity var(--duree-rapide) var(--ease-etat),
    clip-path var(--duree) var(--ease-equerre),
    overlay var(--duree) allow-discrete,
    display var(--duree) allow-discrete;
}
.menu-mobile[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  clip-path: inset(0);
}
.menu-mobile:not([open]) {
  transition-duration: var(--duree-rapide);
  transition-timing-function: var(--ease-sortie);
}
@starting-style {
  .menu-mobile[open] {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}
.menu-mobile::backdrop {
  background: none;
}
.menu-mobile__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: calc(var(--hauteur-entete) - var(--filet-fin));
  padding: 0 var(--marge);
  border-block-end: var(--filet-fin) solid var(--graphite);
}
.menu-mobile__barre img,
.menu-mobile__logo {
  display: block;
  width: var(--logo-min-court);
  height: auto;
}
.menu-mobile__barre a {
  display: inline-flex;
  color: var(--blanc);
}
.menu-mobile__fermer {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--e-2);
  margin-inline-end: calc(-1 * var(--e-2));
  font-size: var(--t-sm);
  font-weight: 500;
}
.menu-mobile__nav {
  padding: var(--e-5) var(--marge) 0;
}
.menu-mobile__liste {
  display: grid;
}
.menu-mobile__liste > li {
  border-block-end: var(--filet-fin) solid var(--graphite);
}
.menu-mobile__lien {
  display: flex;
  align-items: baseline;
  padding-block: var(--e-3);
  font-family: var(--police-titre);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  font-weight: var(--titre-graisse);
  line-height: 1.1;
  text-decoration: none;
}
/* Liens du menu sous 40 px en dessous de 587 px de large. */
@media (max-width: 36.6875em) {
  .menu-mobile__lien {
    font-weight: var(--titre-graisse-petit);
  }
}
.menu-mobile__lien[aria-current="page"] {
  font-style: italic;
}
.menu-mobile__lien[aria-current="page"] .menu-mobile__texte {
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fort);
  text-decoration-color: var(--indigo-clair);
  text-underline-offset: 0.15em;
}
.menu-mobile__lien:hover .menu-mobile__texte {
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fin);
  text-underline-offset: 0.15em;
}
.menu-mobile__poles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
  padding: var(--e-5) var(--marge) 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--gris-300);
}
.menu-mobile__poles strong {
  display: block;
  font-weight: 500;
  color: var(--blanc);
}
.menu-mobile__poles a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.menu-mobile__pied {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5) var(--marge) var(--e-7);
}
.menu-mobile__pied .bouton {
  width: 100%;
}

/* ==========================================================================
   7. Pied de page
   Logo complet, les deux pôles (adresse et numéro principal), plan du site,
   réseaux, statut d'agrément, mentions légales.
   ========================================================================== */
.pied {
  padding-block: clamp(var(--e-8), 3rem + 4vw, var(--e-10)) var(--e-6);
  font-size: var(--t-sm);
}
.pied__haut {
  padding-block-end: var(--e-7);
  border-block-end: var(--filet-fin) solid var(--filet);
}
.pied__logo {
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
}
.pied__logo img {
  width: max(var(--logo-min-complet), min(24vw, 22rem));
  height: auto;
}
.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-7) var(--gouttiere);
  padding-block: var(--e-7);
}
/* Mobile : les deux pôles sur toute la largeur, plan du site et réseaux côte à côte. */
.pied__colonnes > :nth-child(-n + 2) {
  grid-column: 1 / -1;
}
.pied__accroche {
  font-family: var(--police-titre);
  font-size: var(--t-2xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.15;
}
.pied__accroche em {
  font-style: italic;
  font-weight: inherit;
}
.pied__titre {
  margin-block-end: var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.2;
}
.pied address {
  color: var(--texte);
  line-height: 1.55;
}
.pied__liste {
  display: grid;
  margin-block-start: var(--e-2);
}
.pied__liste a:not(.lien-appel) {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  text-decoration: none;
  min-width: 2.75rem;
}
.pied__liste a:not(.lien-appel):hover,
.pied__liste a:not(.lien-appel):focus-visible {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
}
.pied__liste a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fort);
  text-decoration-color: var(--accent);
}
.pied .lien-appel {
  font-size: var(--t-sm);
  margin-block-start: var(--e-2);
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-6);
  padding-block-start: var(--e-5);
  border-block-start: var(--filet-fin) solid var(--filet);
  color: var(--texte-doux);
  font-size: var(--t-sm);
}
.pied__bas p {
  max-width: none;
}
.pied__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-5);
}
.pied__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
@media (min-width: 40em) {
  .pied__colonnes > :nth-child(-n + 2) {
    grid-column: auto;
  }
}
@media (min-width: 80em) {
  .pied__colonnes {
    grid-template-columns: 3fr 3fr 2fr 2fr;
  }
}

/* ==========================================================================
   8. Ouvertures (hero)
   ========================================================================== */
.ouverture {
  position: relative;
}

/* Plein cadre : photo à bord perdu, panneau noir en décalage qui mord sur
   le bas de l'image. Le titre ne repose jamais sur une zone claire. */
.ouverture--plein {
  --chevauchement: clamp(4.5rem, 1.5rem + 7vw, 10rem);
  padding-block-end: var(--section);
}
.ouverture__media {
  position: relative;
  margin: 0;
  height: clamp(28rem, 82svh, 62rem);
  overflow: hidden;
  background-color: var(--anthracite);
}
.ouverture__media img,
.ouverture__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focale, 50% 30%);
}
.ouverture__contenu {
  position: relative;
  margin-block-start: calc(-1 * var(--chevauchement));
}
.ouverture__panneau {
  --decalage-carre: var(--noir);
  --decalage-bloc: var(--noir);
  max-width: 54rem;
}
.ouverture__panneau .decalage__bloc {
  display: grid;
  gap: var(--e-5);
  container-type: inline-size;
}
/* Le titre monumental se règle sur la largeur de son bloc (unités cqi) :
   le mot le plus long ne déborde jamais, du mobile au grand écran. */
.ouverture__titre {
  font-size: min(var(--t-5xl), 13.4vw);
  font-size: min(var(--t-5xl), 14.5cqi);
  line-height: 0.98;
}
.ouverture__titre em {
  display: block;
}
/* Titre réglé en cqi (Zodiak, « panafricaine » = 6,6 em) : sous 40 px quand son bloc fait moins de 276 px,
   au-delà de 88 px quand il dépasse 607 px. */
@container (max-width: 275px) {
  .ouverture__panneau .ouverture__titre {
    font-weight: var(--titre-graisse-petit);
  }
}
@container (min-width: 607px) {
  .ouverture__panneau .ouverture__titre {
    font-weight: var(--titre-graisse-monumental);
  }
}
/* Variante décalage (16 cqi, « Formations » = 5,9 em) : au-delà de 88 px dès 550 px. */
@container (min-width: 550px) {
  .ouverture--decalage .ouverture__titre {
    font-weight: var(--titre-graisse-monumental);
  }
}
.ouverture__panneau .chapeau {
  color: var(--texte-doux);
}
.ouverture__panneau .groupe-boutons {
  margin-block-start: var(--e-3);
}
.ouverture__legende {
  position: absolute;
  right: var(--marge);
  bottom: calc(var(--chevauchement) + var(--e-4));
  z-index: 1;
  display: none;
  padding: var(--e-2) var(--e-3);
  background-color: var(--noir);
  color: var(--blanc);
}
@media (min-width: 64em) {
  .ouverture__legende {
    display: block;
  }
  .ouverture__legende .piece,
  .ouverture__legende .piece__num {
    color: var(--blanc);
  }
}

/* Décalage : texte à gauche, portrait dans un cadre d'équerre à droite. */
.ouverture--decalage {
  padding-block: clamp(var(--e-7), 2rem + 4vw, var(--e-10)) var(--section);
}
.ouverture--decalage .ouverture__grille {
  display: grid;
  gap: var(--e-8) var(--gouttiere);
  align-items: end;
}
.ouverture--decalage .ouverture__texte {
  display: grid;
  gap: var(--e-5);
  align-content: end;
  container-type: inline-size;
}
.ouverture--decalage .ouverture__titre {
  font-size: min(var(--t-5xl), 13.4vw);
  font-size: min(var(--t-5xl), 16cqi);
}
.ouverture--decalage .cote {
  margin-block-start: var(--e-3);
}
@media (min-width: 56em) {
  .ouverture--decalage .ouverture__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  }
  .ouverture--decalage .ouverture__texte {
    grid-column: 1 / span 7;
    padding-block-end: var(--sig-decalage);
  }
  .ouverture--decalage .ouverture__figure {
    grid-column: 8 / -1;
  }
}


/* ==========================================================================
   9. Bandeau de repères
   ========================================================================== */
.reperes__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--filet-fort) solid var(--texte);
}
.repere {
  display: grid;
  align-content: start;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-4) var(--e-6) 0;
  border-block-end: var(--filet-fin) solid var(--filet);
}
.repere:nth-child(2n) {
  padding-inline-start: var(--e-4);
  border-inline-start: var(--filet-fin) solid var(--filet);
}
.repere__valeur {
  font-family: var(--police-titre);
  font-size: var(--t-5xl);
  font-weight: var(--titre-graisse);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.repere__legende {
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.35;
}
.repere__detail {
  display: block;
  margin-block-start: var(--e-1);
  font-size: var(--t-sm);
  font-weight: 400;
  text-transform: none;
  color: var(--texte-doux);
}
@media (min-width: 64em) {
  .reperes__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .repere,
  .repere:nth-child(2n) {
    padding: var(--e-6) var(--e-5) var(--e-6);
    border-block-end: 0;
    border-inline-start: var(--filet-fin) solid var(--filet);
  }
  .repere:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}
.reperes--noir .reperes__liste {
  border-block-start-color: var(--accent);
}

/* ==========================================================================
   10. Carte diplôme
   Un bloc sobre : titre, nature du diplôme, conditions, faits. Le sigle en
   carré noir est retiré (l'emblème est gardé pour le logo).
   ========================================================================== */
.diplomes {
  display: grid;
  gap: var(--e-8) var(--gouttiere);
}
@media (min-width: 64em) {
  .diplomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Chaque carte prend la hauteur de son contenu : pas de vide arbitraire
   entre le texte et la liste des faits, qui suit le texte. */
.diplome {
  --decalage-bloc: var(--fond-alt);
  align-self: start;
}
.diplome .decalage__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
.diplome__sigle {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse-petit);
  font-size: calc(var(--carre) * 0.3);
  line-height: 1;
}
.diplome__type {
  color: var(--texte);
  font-weight: 500;
}
.diplome__titre {
  font-size: var(--t-2xl);
  font-weight: var(--titre-graisse-petit);
  max-width: 18ch;
}
.diplome__texte {
  color: var(--texte-doux);
}
.diplome__faits {
  display: grid;
  border-block-start: var(--filet-fin) solid var(--filet);
}
.diplome__faits > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) 2fr;
  gap: var(--e-4);
  padding-block: var(--e-3);
  border-block-end: var(--filet-fin) solid var(--filet);
}
.diplome__faits dt {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--texte-doux);
  padding-block-start: 0.2em;
}
.diplome__faits dd {
  font-size: var(--t-sm);
}
.theme-noir .diplome {
  --decalage-bloc: var(--anthracite);
}

/* ==========================================================================
   11. Tableau des frais
   Bureau : tableau classique. Mobile : chaque ligne devient une fiche,
   les rôles ARIA posés dans le balisage préservent la sémantique.
   ========================================================================== */
.frais {
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.frais caption {
  text-align: start;
  caption-side: bottom;
  padding-block-start: var(--e-4);
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.frais th,
.frais td {
  text-align: start;
  vertical-align: top;
  font-weight: 400;
}
.frais thead th {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--texte-doux);
}
.frais__poste {
  display: block;
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse-petit);
  font-size: var(--t-xl);
  line-height: 1.2;
}
.frais__precision {
  display: block;
  margin-block-start: var(--e-1);
  font-size: var(--t-sm);
  color: var(--texte-doux);
  max-width: 34ch;
}
.frais__montant {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse-petit);
  font-size: var(--t-xl);
  line-height: 1.2;
}
.frais__devise {
  font-family: var(--police-texte);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--texte-doux);
}
.frais__periode {
  display: block;
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.frais__non-du {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.frais__non-du .icone {
  display: none;
}

@media (max-width: 47.99em) {
  .frais {
    display: flex;
    flex-direction: column;
  }
  .frais caption {
    order: 1;
    display: block;
  }
  .frais tbody,
  .frais tr,
  .frais th,
  .frais td {
    display: block;
  }
  .frais thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .frais tbody {
    border-block-start: var(--filet-fort) solid var(--texte);
  }
  .frais tbody tr {
    padding-block: var(--e-5);
    border-block-end: var(--filet-fin) solid var(--filet);
  }
  .frais tbody th {
    margin-block-end: var(--e-3);
  }
  .frais tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-1) var(--e-4);
    padding-block: var(--e-2);
  }
  .frais tbody td::before {
    content: attr(data-libelle);
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--texte-doux);
  }
  .frais__cellule {
    text-align: end;
  }
}
@media (min-width: 48em) {
  .frais {
    border-block-start: var(--filet-fort) solid var(--texte);
  }
  .frais th,
  .frais td {
    padding: var(--e-5) var(--e-5) var(--e-5) 0;
    border-block-end: var(--filet-fin) solid var(--filet);
  }
  .frais thead th {
    padding-block: var(--e-4);
  }
  /* Mise en page fixe : les largeurs de l'en-tête s'appliquent vraiment. */
  .frais {
    table-layout: fixed;
  }
  .frais thead th:first-child {
    width: 46%;
  }
}

/* ==========================================================================
   12. Étapes d'inscription et dossier à fournir
   ========================================================================== */
.etapes {
  display: grid;
  gap: var(--e-6) var(--gouttiere);
  counter-reset: etape;
}
.etape {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--e-3);
  padding-block-start: var(--e-5);
  border-block-start: var(--filet-fin) solid var(--texte);
}
.etape__num {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse);
  font-size: var(--t-3xl);
  font-style: normal;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.etape__titre {
  font-family: var(--police-texte);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.35;
}
.etape p {
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
@media (min-width: 40em) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dossier {
  display: grid;
  gap: var(--gouttiere);
}
.dossier__piece {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
  align-content: start;
  padding: var(--e-4) 0;
  border-block-start: var(--filet-fin) solid var(--filet);
}
.dossier__icone {
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  padding-block-start: 0.1em;
}
.dossier__texte {
  display: grid;
  gap: var(--e-2);
}
.dossier__texte p {
  font-size: var(--t-base);
  line-height: 1.45;
}
@media (min-width: 48em) {
  .dossier {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dossier__piece {
    grid-template-columns: 1fr;
    gap: var(--e-4);
    padding: var(--e-5) 0 0;
  }
}

/* ==========================================================================
   13. Questions fréquentes (details / summary)
   ========================================================================== */
.faq {
  border-block-start: var(--filet-fort) solid var(--texte);
  interpolate-size: allow-keywords;
}
.faq__item {
  border-block-end: var(--filet-fin) solid var(--filet);
}
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 2.75rem;
  padding-block: var(--e-5);
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse-petit);
  font-size: var(--t-xl);
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}
.faq__question::-webkit-details-marker {
  display: none;
}
.faq__question:hover .faq__libelle {
  text-decoration: underline;
  text-decoration-thickness: var(--filet-fin);
  text-underline-offset: 0.2em;
}
/* Signe plus / moins dessiné en CSS : un trait vertical qui se replie. */
.faq__signe {
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--accent);
}
.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.875rem;
  height: var(--filet-fort);
  margin: calc(var(--filet-fort) / -2) 0 0 -0.4375rem;
  background-color: currentColor;
  transition: transform var(--duree) var(--ease-etat);
}
.faq__signe::after {
  transform: rotate(90deg);
}
.faq__item[open] .faq__signe::after {
  transform: rotate(0deg);
}
.faq__reponse {
  display: grid;
  gap: var(--e-3);
  padding-block-end: var(--e-6);
  padding-inline-end: 3.75rem;
  color: var(--texte-doux);
}
.faq__reponse strong {
  color: var(--texte);
}
@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size var(--duree) var(--ease-etat),
      content-visibility var(--duree) allow-discrete;
  }
  .faq__item[open]::details-content {
    block-size: auto;
  }
}

/* ==========================================================================
   14. Galerie mosaïque et visionneuse
   ========================================================================== */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-7) var(--gouttiere);
  align-items: start;
}
.galerie__item {
  position: relative;
  min-width: 0;
}
.galerie__item--paysage,
.galerie__item--large {
  grid-column: 1 / -1;
}
.galerie__lien {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--fond-alt);
}
.galerie__lien img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: var(--focale, 50% 25%);
}
.galerie__item--paysage .galerie__lien img {
  aspect-ratio: 16 / 9;
}
.galerie__item--large .galerie__lien img {
  aspect-ratio: 4 / 5;
}
/* Ancien carré d'agrandissement : retiré (tampon). Le lien porte un libellé
   masqué « Agrandir la photo ». */
.galerie__agrandir {
  display: none !important;
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--noir);
  color: var(--blanc);
  transition: background-color var(--duree-rapide) var(--ease-etat), color var(--duree-rapide) var(--ease-etat);
}
.galerie__lien:hover .galerie__agrandir,
.galerie__legende {
  margin-block-start: var(--e-3);
}
/* Mobile : une colonne sur deux descend d'un décalage. */
.galerie__item--decale {
  margin-block-start: calc(var(--sig-decalage) * 1.5);
}
@media (min-width: 48em) {
  .galerie {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    row-gap: var(--e-8);
  }
  .galerie__item {
    grid-column: span 3;
  }
  .galerie__item--paysage {
    grid-column: span 8;
  }
  .galerie__item--large {
    grid-column: span 4;
  }
  .galerie__item--decale {
    margin-block-start: calc(var(--sig-decalage) * 2);
  }
  /* Aplat décalé derrière une pièce, avec le jour du logo. */
  .galerie__item--cadre .galerie__lien {
    overflow: visible;
    outline: var(--sig-jour) solid var(--fond);
  }
  .galerie__item--cadre .galerie__lien::before {
    content: "";
    position: absolute;
    inset: var(--sig-decalage) calc(-1 * var(--sig-decalage)) calc(-1 * var(--sig-decalage)) var(--sig-decalage);
    z-index: -1;
    background-color: var(--aplat);
  }
  .galerie__item--cadre {
    isolation: isolate;
    margin-inline-end: var(--sig-decalage);
  }
  .galerie__item--cadre .galerie__legende {
    margin-block-start: calc(var(--sig-decalage) + var(--e-3));
  }
}

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: var(--z-modale);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--noir);
  color: var(--blanc);
  opacity: 0;
  transition:
    opacity var(--duree) var(--ease-etat),
    overlay var(--duree) allow-discrete,
    display var(--duree) allow-discrete;
}
.visionneuse[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  opacity: 1;
}
@starting-style {
  .visionneuse[open] {
    opacity: 0;
  }
}
.visionneuse::backdrop {
  background: none;
}
.visionneuse__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--hauteur-entete);
  padding-inline: var(--marge);
}
.visionneuse__compteur {
  font-size: 0.9375rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--gris-300);
}
.visionneuse__compteur b {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--blanc);
}
.visionneuse__scene {
  position: relative;
  min-height: 0;
  margin: 0;
}
.visionneuse__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-inline: var(--marge);
  object-fit: contain;
}
.visionneuse__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--hauteur-entete);
  padding: var(--e-3) var(--marge);
}
.visionneuse__legende {
  font-size: var(--t-sm);
  color: var(--gris-300);
  max-width: 60ch;
}
.visionneuse__navigation {
  display: flex;
  gap: var(--e-2);
}
.visionneuse__bouton {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: var(--filet-fin) solid var(--graphite);
  color: var(--blanc);
  transition: background-color var(--duree-rapide) var(--ease-etat), color var(--duree-rapide) var(--ease-etat), border-color var(--duree-rapide) var(--ease-etat);
}
.visionneuse__bouton:hover {
  background-color: var(--blanc);
  border-color: var(--blanc);
  color: var(--noir);
}
.visionneuse,
.video__cadre {
  --focus: var(--blanc);
  --focus-contraste: var(--noir);
}

/* ==========================================================================
   15. Bloc vidéo
   ========================================================================== */
.video {
  position: relative;
}
.video__cadre {
  position: relative;
  overflow: hidden;
  background-color: var(--noir);
}
.video__media {
  width: 100%;
  aspect-ratio: var(--ratio, 9 / 16);
  object-fit: cover;
  background-color: var(--noir);
}
.video--paysage .video__media {
  --ratio: 16 / 9;
}
.video__lecture {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  color: var(--blanc);
  text-align: start;
}
.video__lecture-pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 3.5rem;
  padding: 0 var(--e-5) 0 0;
  background-color: var(--noir);
  font-size: var(--t-sm);
  font-weight: 500;
}
.video__lecture-icone {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--blanc);
  color: var(--noir);
  transition: background-color var(--duree-rapide) var(--ease-etat);
}
.video__lecture:hover .video__lecture-icone {
  background-color: var(--gris-200);
}
/* Anneau blanc à l'intérieur, bande noire de 4 px collée au bord : 19,8:1
   entre les deux, lisible sur toute affiche. */
.video__lecture:focus-visible {
  outline-offset: -6px;
  box-shadow: inset 0 0 0 4px var(--noir);
}
.video__legende {
  margin-block-start: var(--e-3);
}

/* Boucle muette : bouton pause toujours visible (WCAG 2.2.2). */
.video__pause {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.75rem;
  padding: 0 var(--e-4) 0 var(--e-3);
  background-color: var(--noir);
  color: var(--blanc);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: background-color var(--duree-rapide) var(--ease-etat), color var(--duree-rapide) var(--ease-etat);
}
.video__pause .icone {
  width: 1.25rem;
  height: 1.25rem;
}
.video__pause:hover {
  background-color: var(--blanc);
  color: var(--noir);
}

/* ==========================================================================
   16. Cartes contact des deux pôles
   ========================================================================== */
.poles {
  display: grid;
  gap: var(--e-8) var(--gouttiere);
}
@media (min-width: 56em) {
  .poles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pole {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--e-5);
  padding-block-start: var(--e-5);
  border-block-start: var(--filet-fort) solid var(--texte);
}
.pole__entete {
  display: grid;
  gap: var(--e-3);
}
.pole__nom {
  font-size: var(--t-2xl);
}
.pole__infos {
  display: grid;
  gap: var(--e-3);
}
.pole__info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
}
.pole__info .icone {
  color: var(--accent);
}
.pole__info p {
  line-height: 1.5;
}
.pole__telephones {
  display: grid;
  gap: var(--e-1);
}
.pole .groupe-boutons {
  margin-block-start: var(--e-2);
}

/* ==========================================================================
   17. Bande d'appel à l'action
   Un aplat sombre qui part du bord gauche de l'écran et s'arrête net avant le
   bord droit. Pas de carré vide : l'emblème est gardé pour le logo.
   ========================================================================== */
.appel {
  padding-inline-end: var(--marge);
}
.appel__aplat {
  display: grid;
  gap: var(--e-6);
  padding-block: clamp(var(--e-7), 2rem + 3vw, var(--e-9));
  padding-inline: max(var(--marge), calc((100% - var(--conteneur)) / 2 + var(--marge))) clamp(var(--e-5), 1rem + 2vw, var(--e-8));
}
.appel__titre {
  font-size: var(--t-4xl);
  font-weight: var(--titre-graisse);
  line-height: var(--interligne-serre);
  max-width: 14ch;
}
.appel .chapeau {
  color: var(--texte-doux);
}
.appel__actions {
  display: grid;
  gap: var(--e-5);
  align-content: end;
}
/* Numéros des pôles : un lien d'appel par ligne, cible de 44 px. */
.appel__numeros {
  display: grid;
  gap: var(--e-1);
  max-width: none;
}
.appel__numeros > * {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-2);
}
.appel__numeros a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
@media (min-width: 64em) {
  .appel__aplat {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    column-gap: var(--gouttiere);
    align-items: end;
  }
  .appel__texte {
    grid-column: 1 / span 7;
  }
  .appel__actions {
    grid-column: 8 / -1;
  }
}

/* ==========================================================================
   18. Mention d'agrément
   ========================================================================== */
.agrement {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  max-width: 100%;
  font-size: var(--t-sm);
  line-height: 1.35;
}
/* Ancien filet devant l'agrément : retiré, il se lisait comme un tiret long. */
.agrement__marque {
  display: none;
}
.agrement__titre {
  font-weight: 500;
  font-size: var(--t-sm);
}
.agrement__statut {
  color: var(--texte-doux);
}
/* Cartouche : bloc-titre de patron, deux lignes à libellé. */
.agrement--cartouche {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 30rem;
  border: var(--filet-fin) solid var(--texte);
  border-block-start: var(--filet-fort) solid var(--texte);
  font-size: var(--t-sm);
}
.agrement > span {
  min-width: 0;
}
.agrement__ligne {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
}
.agrement__ligne + .agrement__ligne {
  border-block-start: var(--filet-fin) solid var(--filet);
}
.agrement__libelle {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--texte-doux);
  padding-block-start: 0.15em;
}
.agrement__valeur {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse-petit);
  font-size: var(--t-lg);
  line-height: 1.25;
}

/* ==========================================================================
   19. Révélations au défilement
   Un seul motif : les photographies se déplient d'équerre, de haut en bas.
   Aucun texte n'apparaît en fondu. Actif seulement si main.js a posé
   .revele-actif sur <html> et si le mouvement n'est pas réduit.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.revele-actif [data-revele="image"] {
    clip-path: inset(0);
    transition: clip-path var(--duree-lente) var(--ease-equerre);
    transition-delay: calc(min(var(--rang, 0), 2) * 80ms);
  }
  html.revele-actif [data-revele="image"]:not(.est-revele) {
    clip-path: inset(0 0 100% 0);
  }
}
/* Dépli terminé (classe posée par main.js) : plus aucun clip-path, pour que
   l'anneau de focus d'un enfant ne soit jamais rogné. Et la règle ne
   s'applique jamais à un élément focalisable lui-même. */
html.revele-actif [data-revele="image"].est-deplie,
html.revele-actif :is(a, button, [tabindex])[data-revele="image"] {
  clip-path: none;
  transition: none;
}

/* ==========================================================================
   20. Graisses de Zodiak selon la taille rendue
   300 au-dessus de 88 px, 400 de 40 à 88 px, 500 sous 40 px.
   --t-3xl passe sous 40 px en dessous de 533 px ; --t-5xl dépasse 88 px à
   partir de 855 px. Placé en fin de fichier pour l'emporter sur les
   graisses déclarées par les composants.
   ========================================================================== */
@media (max-width: 33.3125em) {
  .titre-section__titre,
  .pied__accroche,
  .etape__num {
    font-weight: var(--titre-graisse-petit);
  }
}
@media (min-width: 53.4375em) {
  .repere__valeur {
    font-weight: var(--titre-graisse-monumental);
  }
}

/* ==========================================================================
   21. Ouverture de page intérieure
   Titre de page en Zodiak, chapeau, puis une photographie ou un motif.
   Jamais de surtitre. Variante sombre : aplat indigo de nuit.
   ========================================================================== */
.ouverture-page {
  padding-block: clamp(var(--e-7), 2rem + 4vw, var(--e-9));
  border-block-end: var(--filet-fin) solid var(--filet);
}
.ouverture-page__grille {
  display: grid;
  gap: var(--e-7) var(--gouttiere);
  align-items: end;
}
.ouverture-page__texte {
  display: grid;
  gap: var(--e-5);
  align-content: end;
  min-width: 0;
}
.ouverture-page__titre {
  font-size: var(--titre-page);
  font-weight: var(--titre-graisse);
  line-height: var(--interligne-serre);
  max-width: 14ch;
}
.ouverture-page__chapeau {
  color: var(--texte-doux);
}
.ouverture-page__media,
.ouverture-page__motif {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 3);
  background-color: var(--fond-alt);
}
.ouverture-page__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focale, 50% 30%);
}
/* Emplacement de motif : le fichier SVG (assets/motifs/) est posé en masque,
   il prend la couleur d'accent du thème. Sans --motif, l'emplacement reste
   une surface neutre. */
.ouverture-page__motif[style*="--motif"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  -webkit-mask: var(--motif) repeat center / var(--motif-taille, 15rem auto);
  mask: var(--motif) repeat center / var(--motif-taille, 15rem auto);
}
.ouverture-page--sombre {
  --fond-alt: var(--indigo-nuit);
  background-color: var(--indigo-nuit);
  border-block-end: 0;
}
.ouverture-page--sombre .ouverture-page__media,
.ouverture-page--sombre .ouverture-page__motif {
  background-color: var(--noir);
}
.ouverture-page--seule .ouverture-page__titre {
  max-width: 18ch;
}
/* Deux colonnes à partir de 64 em : le titre garde l'échelle --titre-page
   (« Admissions », 5,8 em, tient dans six colonnes à toutes les largeurs). */
@media (min-width: 64em) {
  .ouverture-page__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  }
  .ouverture-page__texte {
    grid-column: 1 / span 6;
    padding-block-end: var(--e-2);
  }
  .ouverture-page__media,
  .ouverture-page__motif {
    grid-column: 7 / -1;
  }
  .ouverture-page--portrait .ouverture-page__media {
    --ratio: 4 / 5;
    grid-column: 8 / -1;
  }
  .ouverture-page--seule .ouverture-page__texte {
    grid-column: 1 / span 9;
  }
}

/* ==========================================================================
   22. Portes : cartes photo légendées
   Une photo réelle, un intitulé, une flèche. La carte entière est le lien.
   Emplacement de pictogramme optionnel (symboles i-picto-* du sprite).
   ========================================================================== */
.portes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--e-7) var(--gouttiere);
}
.porte {
  display: grid;
  align-content: start;
  gap: var(--e-3);
  color: var(--texte);
  text-decoration: none;
  min-width: 0;
}
.porte__media {
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 5);
  background-color: var(--fond-alt);
}
.porte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focale, 50% 20%);
}
.porte__pied {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding-block-start: var(--e-3);
  border-block-start: var(--filet-fin) solid var(--texte);
}
.porte__picto {
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--accent);
}
.porte__picto .icone {
  width: 2rem;
  height: 2rem;
}
.porte__intitule {
  flex: 1 1 auto;
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.2;
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fort);
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--duree-rapide) var(--ease-etat);
  min-width: 0;
}
.porte__fleche {
  flex: none;
  color: var(--accent);
  transition: transform var(--duree) var(--ease-etat);
}
.porte__resume {
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.porte:hover .porte__intitule,
.porte:focus-visible .porte__intitule {
  text-decoration-color: currentColor;
}
.porte:hover .porte__fleche,
.porte:focus-visible .porte__fleche {
  transform: translateX(0.25rem);
}

/* Carte diplôme posée sur .decalage (balisage antérieur) : ni carré ni entaille. */
.diplome .diplome__sigle,
.diplome .decalage__carre {
  display: none;
}
.diplome .decalage__bloc {
  margin: 0;
  clip-path: none;
  padding: clamp(var(--e-5), 1rem + 2vw, var(--e-7));
}
.diplome:not(.decalage) {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: clamp(var(--e-5), 1rem + 2vw, var(--e-7));
  background-color: var(--fond-alt);
}

/* Focus posé sur une image (bouton pause, lecture, visionneuse) : liseré
   noir autour de l'anneau blanc, lisible sur une affiche claire (1.4.11). */
.video__pause,
.video__lecture,
.ouverture__legende {
  --focus: var(--blanc);
  --focus-contraste: var(--noir);
}

/* ==========================================================================
   23. Motifs
   Un motif est un masque : le fichier SVG donne la forme, la couleur vient
   de --motif-couleur. Aucune animation. Jamais sur une photo, un visage ou
   derrière du texte courant ; un motif par section, un dominant par page.
   Couleurs permises : noir ou --gris-300 sur blanc ; --indigo sur
   --indigo-voile ; --gris-700 ou --indigo-clair sur noir ; --indigo-clair
   (bandes à 38 %) sur --indigo-nuit. Règles : _studio/motifs/REGLES-MOTIFS.md.
   ========================================================================== */
.motif {
  position: relative;
  isolation: isolate;
}
.motif::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--motif-couleur, currentColor);
  -webkit-mask: var(--motif) var(--motif-pos, 0 0) / var(--motif-taille) var(--motif-rep, repeat);
  mask: var(--motif) var(--motif-pos, 0 0) / var(--motif-taille) var(--motif-rep, repeat);
}
/* Le papier pointé du modéliste : un point par centimètre, une croix tous les cinq. */
.motif--papier {
  --motif: url("../assets/motifs/motif-papier.svg");
  --motif-taille: 100px 100px;
}
/* Les bandes tissées : réservées aux aplats sombres. */
.motif--bandes {
  --motif: url("../assets/motifs/motif-bandes.svg");
  --motif-taille: 120px 96px;
}
/* Le galon brodé : une seule bande de 40 px, toujours entière. */
.motif--galon {
  --motif: url("../assets/motifs/motif-galon.svg");
  --motif-taille: 40px 40px;
  --motif-rep: repeat-y;
}
.motif--galon-h {
  --motif: url("../assets/motifs/motif-galon-h.svg");
  --motif-taille: 40px 40px;
  --motif-rep: repeat-x;
}
/* Le bâti en motif : une ligne de points ronds (voir .bati). */
.motif--bati::before {
  -webkit-mask: none;
  mask: none;
  background-color: transparent;
  background-image: radial-gradient(circle, var(--motif-couleur, currentColor) 0 1.1px, transparent 1.6px);
  background-size: 0.5rem 0.75rem;
  background-position: 0 50%;
  background-repeat: repeat-x;
}
/* Couleurs permises, en raccourci */
.motif--gris {
  --motif-couleur: var(--gris-300);
}
.motif--indigo {
  --motif-couleur: var(--indigo);
}
.motif--clair {
  --motif-couleur: var(--indigo-clair);
}
.motif--tisse {
  --motif-couleur: color-mix(in srgb, var(--indigo-clair) 38%, transparent);
}

/* Le fil : le trait du I de l'emblème, étiré sur la largeur voulue. */
.fil {
  display: block;
  height: 0.5625rem;
  background-color: var(--fil-couleur, var(--accent));
  -webkit-mask: url("../assets/motifs/motif-fil.svg") 0 0 / 100% 100% no-repeat;
  mask: url("../assets/motifs/motif-fil.svg") 0 0 / 100% 100% no-repeat;
}
/* Le bâti : points de conduite entre un libellé et un montant, ligne des
   étapes. Des points ronds fins et réguliers (2 px tous les 8 px), jamais des
   traits qui se liraient comme des tirets longs. */
.bati {
  display: block;
  min-width: var(--e-6);
  height: 0.75rem;
  background-image: radial-gradient(circle, var(--bati-couleur, var(--accent)) 0 1.1px, transparent 1.6px);
  background-size: 0.5rem 100%;
  background-position: 0 50%;
  background-repeat: repeat-x;
}

/* ==========================================================================
   24. Insécables (1.4.12)
   Numéros, montants et cotes restent d'un tenant à partir de 30 em ; en
   dessous, ils peuvent passer à la ligne plutôt que déborder.
   ========================================================================== */
@media (min-width: 30em) {
  .lien-appel__texte,
  .frais__montant,
  .cote {
    white-space: nowrap;
  }
}

/* En-tête non collant sur un écran bas (téléphone en paysage) : 72 px sur
   390 px de haut mangeraient le cinquième de l'écran. */
@media (max-height: 30em) {
  .entete {
    position: relative;
  }
}

/* ==========================================================================
   25. Fin de page .suite
   Une phrase tirée de la page, un lien fléché vers la page suivante, une
   action. Juste avant le pied, sur fond indigo voilé : jamais en aplat noir
   (le pied l'est déjà), jamais décalée. Variante d'actions : Appeler et
   WhatsApp, à la place de « S'inscrire », sur l'accueil et Admissions.
   ========================================================================== */
.suite {
  padding-block: clamp(var(--e-7), 2rem + 4vw, var(--e-9));
  background-color: var(--indigo-voile);
}
.suite__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6) var(--gouttiere);
  align-items: end;
}
/* Avec l'espacement de texte WCAG à 320 px, un mot long peut se couper :
   la grille ne s'élargit jamais au-delà de l'écran. */
.suite__titre {
  font-size: var(--t-3xl);
  font-weight: var(--titre-graisse);
  line-height: var(--interligne-titre);
  max-width: 20ch;
  overflow-wrap: break-word;
  hyphens: auto;
}
.suite__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-6);
}
.suite__actions .lien-fleche {
  font-size: var(--t-lg);
}
@media (min-width: 64em) {
  .suite__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  }
  .suite__titre {
    grid-column: 1 / span 7;
  }
  .suite__actions {
    grid-column: 8 / -1;
    justify-content: flex-end;
  }
}

/* ==========================================================================
   26. Porte sans photo .porte--picto
   Pour une page qui s'ouvre sans photographie (Admissions, Contact) : le
   pictogramme du métier en 96 px, indigo sur indigo voilé, même format et
   même pied que les portes photo. Règle : une porte montre toujours
   l'ouverture de la page qu'elle ouvre.
   ========================================================================== */
.porte--picto .porte__media {
  display: grid;
  place-items: center;
  background-color: var(--indigo-voile);
  color: var(--indigo);
}
.porte__grand-picto {
  width: 6rem;
  height: 6rem;
  fill: none;
  stroke: currentColor;
}
.porte--picto:hover .porte__media,
.porte--picto:focus-visible .porte__media {
  background-color: color-mix(in srgb, var(--indigo-voile) 70%, var(--indigo-clair));
}