/* =========================================================================
   Arvitria - www.arvitria.fr
   Feuille de style unique du site vitrine.

   Aucune ressource extérieure n'est chargée : les polices sont dans
   assets/fonts/, la photo dans assets/img/, les dessins sont en SVG
   dans la page.

   Les couleurs viennent de la maquette (canevas « Identité Arvitria »).
   Quatre d'entre elles ont été assombries pour tenir les seuils de
   contraste du RGAA ; chaque écart est signalé par un commentaire
   « ECART MAQUETTE ». Voir JOURNAL.md, séance du 27/08.
   ========================================================================= */

/* ---------- 1. Polices auto-hébergées ---------------------------------- */

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

/* ---------- 2. Jetons -------------------------------------------------- */

:root {
  /* Couleurs du logo */
  --marine: #112347;
  --sarcelle: #39828d;

  /* ECART MAQUETTE : le sarcelle du logo porte du texte blanc à 4,42:1,
     sous le seuil de 4,5. Assombri pour les fonds de boutons.            */
  --sarcelle-bouton: #327a85;
  /* ECART MAQUETTE : idem pour le sarcelle en texte sur blanc.            */
  --sarcelle-texte: #2d6a74;

  --gris-texte: #4a566f;
  /* ECART MAQUETTE : ce gris remplace #8d99b5, #a2aabf et #b3bbcc, tous
     sous le seuil (2,3 à 2,9:1). Trois gris clairs deviennent un seul.
     DURCI UNE SECONDE FOIS le 01/09 : #6a7288 donnait 4,80:1, conforme
     mais à 0,30 seulement du seuil opposable de 4,5. Cette valeur porte
     HUIT contextes sur les quatre pages, tous sur blanc et tous à la
     même valeur, donc un seul écart futur les ferait basculer ensemble.
     #626a80 donne 5,39:1, soit trois fois la marge, sans refermer
     l'écart avec --gris-texte, qui reste le gris du texte principal.   */
  --gris-doux: #626a80;

  --fond-tres-doux: #f7fafb;
  --fond-doux: #eef5f6;
  --bord-doux: #d7e6e8;
  --bord-carte: #edf0f5;
  --bord-fin: #f2f4f8;
  --bord-bouton: #d9dee8;

  --marine-tuile: #1b2f58;
  --marine-bord: #2a4070;
  --sur-marine: #b9c2d8;
  --sur-marine-doux: #8fa0c6;
  --sur-marine-pastille: #7fb3bb;
  --pastille-texte: #2d6a74;
  --pointille: #c6d5d8;

  --ombre-carte: 0 1px 2px rgba(17, 35, 71, 0.04), 0 10px 30px rgba(17, 35, 71, 0.06);
  /* L'ombre de la tuile survolee. Meme teinte marine que l'ombre au
     repos, deux fois plus etalee et deux fois plus dense.            */
  --ombre-carte-levee: 0 2px 4px rgba(17, 35, 71, 0.06), 0 18px 46px rgba(17, 35, 71, 0.13);
  --ombre-photo: 0 1px 2px rgba(17, 35, 71, 0.06), 0 12px 34px rgba(17, 35, 71, 0.10);

  /* Rythme : la maquette téléphone fait 390 px, la maquette desktop
     1440 px. Toutes les valeurs qui suivent interpolent entre les deux. */
  --marge-page: clamp(1.5rem, 0.2rem + 5.333vw, 5rem);
  --espace-section: clamp(4.5rem, 3.154rem + 5.524vw, 8.125rem);
  --largeur-max: 1440px;

  --t-h1: clamp(2.5rem, 1.711rem + 3.238vw, 4.625rem);
  --t-h2: clamp(1.9375rem, 1.543rem + 1.619vw, 3rem);
  --t-h2-diag: clamp(1.8125rem, 1.464rem + 1.429vw, 2.75rem);
  --t-nom: clamp(1.875rem, 1.643rem + 0.952vw, 2.5rem);
  --t-chapo: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
  --t-courant: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);
  --t-titre-carte: clamp(1.1875rem, 1.143rem + 0.19vw, 1.3125rem);
  --t-titre-app: clamp(1.375rem, 1.352rem + 0.095vw, 1.4375rem);
  --t-carte: 0.9375rem;
}

/* ---------- 3. Base ---------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* L'en-tête est collant : les ancres ne doivent pas passer dessous. */
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--marine);
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t-courant);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--sarcelle-texte);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--marine);
}

/* ⚠ L'ANCRE DOIT S'ARRETER SOUS L'EN-TETE COLLANT.
   Sans cette regle, un clic sur « Prestations », « Methode » ou
   « Contact » aligne le HAUT de la section sur le haut de la fenetre, et
   l'en-tete, qui est en position sticky, recouvre alors ses 105 premiers
   pixels. Mesure du 01/09 : les sections ont padding-top 0, la pastille
   commence au pixel 0 et le titre au pixel 49, donc la pastille ET la
   quasi-totalite de la premiere ligne du titre disparaissaient.
   La valeur suit la hauteur de la barre : 76 px, puis 105 a partir de
   61.25em ou le logo passe a 52 px. Si la barre change de hauteur, cette
   valeur doit changer avec elle.                                      */
html {
  scroll-padding-top: 76px;
}

/* Indicateur de focus : marine sur blanc, 15,5:1. Jamais supprimé. */
:focus-visible {
  outline: 3px solid var(--marine);
  outline-offset: 3px;
  border-radius: 4px;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  background: var(--marine);
  color: #ffffff;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-out;
}

.lien-evitement:focus {
  top: 1rem;
  color: #ffffff;
}

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

/* ---------- 4. Gabarit ------------------------------------------------- */

.enveloppe {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding-inline: var(--marge-page);
}

.section {
  padding-bottom: var(--espace-section);
}

.section__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 0.74rem + 0.571vw, 1.125rem);
  max-width: 47.5rem;
  margin-bottom: clamp(1.75rem, 1.19rem + 2.286vw, 3rem);
}

.surtitre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Space Mono', ui-monospace, monospace;
}

.surtitre__num {
  font-size: 0.75rem;
  color: var(--pastille-texte);
  background: var(--fond-doux);
  padding: 0.375rem 0.6875rem;
  border-radius: 9px;
}

.surtitre__mot {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-doux);
}

.section__titre {
  font-size: var(--t-h2);
  line-height: 1.1;
}

/* ---------- 5. En-tête, navigation, menu ------------------------------- */

/* L'en-tête est collant : le bouton « Auto-évaluation » doit rester
   visible pendant tout le défilement (arbitrage du 27/08). */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffff;
  border-bottom: 1px solid var(--bord-fin);
}

.entete__barre {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0.875rem var(--marge-page);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.625rem;
}

.logo {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
}

.logo__embleme {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo__mot {
  height: 22px;
  width: auto;
  flex-shrink: 0;
  margin-bottom: 1px; /* pose le mot sur la même ligne de base que l'emblème */
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nav-large {
  display: none;
}

.bouton-menu {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid #e6eaf1;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.bouton-menu span {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--marine);
  border-radius: 2px;
}

.bouton-menu[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6.6px) rotate(45deg);
}
.bouton-menu[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.bouton-menu[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6.6px) rotate(-45deg);
}
.bouton-menu span {
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 19;
  background: #ffffff;
  padding-top: 4.75rem;
  overflow-y: auto;
}

.menu[data-ouvert='true'] {
  display: flex;
  flex-direction: column;
}

.menu__liste {
  padding: 1.625rem var(--marge-page) 0 var(--marge-page);
}

.menu__lien {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--bord-fin);
  font-size: 1.5625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--marine);
  text-decoration: none;
}

.menu__pied {
  margin-top: auto;
  padding: 2rem var(--marge-page) 2.5rem var(--marge-page);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.menu__contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
}

.menu__courriel {
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sarcelle-texte);
  text-decoration: none;
}

.menu__courriel:hover {
  text-decoration: underline;
}

/* Sous 383 px de fenêtre, la barre déborde : 142 px de logo, 183 px
   d'actions, 10 px d'écart et 48 px de marges ne tiennent plus (mesuré en
   navigateur le 30/08 : il manque 8 px à 375, 23 px à 360). Tout se
   resserre d'un cran. Les hauteurs tactiles ne bougent pas : la pilule
   garde son padding vertical et reste au-dessus de 44 px. Tient jusqu'à
   340 px de large. */
@media (max-width: 23.9375em) {
  .entete__barre {
    padding-inline: 1rem;
    gap: 0.5rem;
  }
  .entete__actions {
    gap: 0.375rem;
  }
  /* Le parent est nécessaire : .bouton--entete est défini plus bas dans la
     feuille, et à spécificité égale c'est lui qui gagnerait. */
  .entete__actions .bouton--entete {
    padding-inline: 0.625rem;
  }
  .entete .logo__embleme {
    width: 28px;
    height: 28px;
  }
  .entete .logo__mot {
    height: 19px;
  }
}

/* ---------- 6. Boutons ------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* cible tactile */
  padding: 1rem 2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.03125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bouton--marine {
  background: var(--marine);
  color: #ffffff;
}
.bouton--marine:hover {
  background: #1c3466;
  color: #ffffff;
}

.bouton--sarcelle {
  background: var(--sarcelle-bouton);
  color: #ffffff;
}
.bouton--sarcelle:hover {
  background: #2a6a74;
  color: #ffffff;
}

.bouton--contour {
  background: #ffffff;
  border-color: var(--bord-bouton);
  color: var(--marine);
  font-weight: 500;
}
.bouton--contour:hover {
  background: var(--fond-tres-doux);
  color: var(--marine);
}

/* Le raccourci de l'en-tête est en contour, pas en aplat. Il suit le
   lecteur sur toute la page : un aplat sarcelle, qui est le poids visuel le
   plus fort du site, concurrencerait le contenu en permanence. Le contour
   garde l'affordance de bouton et la teinte de l'action principale, sans
   crier. L'aplat revient au survol.
   Ce style existe déjà sur la page, c'est celui de « Voir les prestations »
   dans le héros : le vocabulaire reste cohérent. */
.bouton--entete {
  padding: 0.875rem 0.875rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  background: #ffffff;
  border-color: var(--sarcelle);
  color: var(--sarcelle-texte);
}

.bouton--entete:hover {
  background: var(--sarcelle-bouton);
  border-color: var(--sarcelle-bouton);
  color: #ffffff;
}

/* ---------- 7. Héros --------------------------------------------------- */

.heros {
  display: grid;
  gap: clamp(1.625rem, 0.9rem + 2.95vw, 4.5rem);
  padding-top: clamp(2.25rem, 0.9rem + 3.4vw, 4.5rem);
  padding-bottom: clamp(4rem, 2.6rem + 5.7vw, 7.5rem);
  align-items: center;
}

.heros__texte {
  display: flex;
  flex-direction: column;
  gap: clamp(1.625rem, 1.44rem + 0.76vw, 1.875rem);
}

.etiquette {
  align-self: flex-start;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pastille-texte);
  background: var(--fond-doux);
  border: 1px solid var(--bord-doux);
  padding: 0.5625rem 1.0625rem;
  border-radius: 18px;
}

.heros__titre {
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.heros__chapo {
  font-size: var(--t-chapo);
  line-height: 1.65;
  color: var(--gris-texte);
  max-width: 33.75rem;
}

.heros__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Le dessin d'élévation vectoriel a été remplacé le 30/08 par une
   illustration composite. Le cadre ne porte donc plus ni dégradé ni marges :
   l'image apporte son propre fond, et les superposer donnerait un liseré
   coloré autour d'une image déjà teintée. */
.heros__illustration {
  display: flex;
  justify-content: center;
}

.heros__image {
  width: 100%;
  /* Sans « height: auto », les attributs width et height de la balise img
     imposent une hauteur de 810 px et le rapport 4:3 est ignoré. C'est le
     piège qui avait déformé la photo du gérant le 27/08. */
  height: auto;
  border-radius: 24px;
  box-shadow: var(--ombre-photo);
}


/* ---------- 8. Cartes -------------------------------------------------- */

.grille {
  display: grid;
  gap: 1rem;
}

.carte {
  background: #ffffff;
  border: 1px solid var(--bord-carte);
  border-radius: 18px;
  box-shadow: var(--ombre-carte);
  padding: 1.625rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.carte__titre {
  font-size: var(--t-titre-carte);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.carte__texte {
  font-size: var(--t-carte);
  line-height: 1.6;
  color: var(--gris-doux);
}

.carte--app .carte__titre {
  font-size: var(--t-titre-app);
}

.carte--esquisse {
  background: none;
  border: 1.5px dashed var(--pointille);
  box-shadow: none;
  justify-content: center;
}

/* ---------- 8bis. Refonte : constat, tuiles dépliantes, méthode,
   avant/après, panneau final (28-30/08) ------------------------------- */

/* Le paragraphe qui suit un titre de section (constat, intro des
   applications). */
.section__corps {
  font-size: var(--t-courant);
  line-height: 1.65;
  color: var(--gris-texte);
}

/* Le cadre qui tient la place d'une image à fournir. Toléré sur l'adresse
   de test, INTERDIT le jour de l'ouverture publique (règle du 28/08). */
.illustration-attente {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fond-tres-doux);
  border: 1.5px dashed var(--pointille);
  border-radius: 12px;
}

.illustration-attente span {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-doux);
}

/* Les captures de l'avant/après sont des écrans : format plus large. */
.illustration-attente--capture {
  aspect-ratio: 16 / 10;
}

/* Le composant « vignette » (image réelle dans une tuile, plus une cote
   posée par-dessus en HTML) a existé le 30/08 puis a été retiré, la
   capture retenue ne correspondant pas à la prestation. Il est complet et
   fonctionnel dans l'historique : `git show d3d1b24` le restitue. Le
   reprendre tel quel quand la première vraie image arrivera. */

/* Une vignette de tuile pourvue de sa vraie image, au même format 3:2 que le
   cadre d'attente qu'elle remplace. Le composant vient de `git show d3d1b24`,
   moins la cote posée par-dessus : elle disait « 10 min », durée de
   l'auto-évaluation, qui n'a rien à voir avec la prestation de cette tuile. */
.vignette {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.vignette__image {
  display: block;
  width: 100%;
  /* Sans « height: auto », les attributs width et height de la balise img
     imposent 480 px de haut et le rapport est ignoré. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.carte--pliante {
  gap: 0.875rem;
  /* Ancre de la couche de clic posee plus bas par .carte__detail::after. */
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* LE SURVOL DES TUILES, pose le 01/09 a la demande de Victor.

   Il vient avec une seconde decision, et les deux se tiennent : la tuile
   entiere devient cliquable. Mesure qui l'a emporte : le bouton
   « Voir le detail » occupe 344 x 44 px dans une carte de 409 x 453,
   soit 8 % de sa surface. Une carte qui se souleve promet un clic sur
   toute sa surface ; sans l'extension, 92 % de cette promesse etait
   fausse.

   ⚠ La couche de clic est un ::after du BOUTON, pas un second element
   focusable : le clavier continue de ne rencontrer qu'un seul controle
   par carte, et rien n'est ajoute a l'arbre d'accessibilite.
   ⚠ Cout assume : le texte de la carte n'est plus selectionnable a la
   souris. C'est le prix connu de ce motif, et il a ete dit avant.
   ⚠ Ne pas donner de position ni de z-index a .carte__detail : la
   couche se resoudrait alors contre le bouton et ne couvrirait plus la
   carte.                                                              */
.carte__detail::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Le clavier d'abord, hors de toute media query : sans cette regle, un
   visiteur qui tabule ne verrait jamais l'effet que la souris declenche. */
.carte--pliante:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--ombre-carte-levee);
}

/* ⚠ (hover: hover) n'est pas une precaution de confort : sans elle, un
   ecran tactile FIGE la carte dans son etat survolu apres un appui, et
   elle y reste jusqu'a ce qu'on touche ailleurs. */
@media (hover: hover) {
  .carte--pliante:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-carte-levee);
  }
}

/* Qui a demande moins d'animation dans son systeme garde l'ombre, qui
   informe, et perd le deplacement, qui ne fait que decorer. */
@media (prefers-reduced-motion: reduce) {
  .carte--pliante {
    transition: box-shadow 0.18s ease;
  }
  .carte--pliante:hover,
  .carte--pliante:focus-within {
    transform: none;
  }
}

/* Le nom de la prestation, sous le titre de situation. */
.carte__prestation {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sarcelle-texte);
}

/* Le statut n'est affiché que sur l'exception (« En développement »). */
.carte__statut {
  align-self: flex-start;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.65625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pastille-texte);
  background: var(--fond-doux);
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
}

/* Le dépliage est l'élément details natif : il fonctionne sans script,
   au clavier comme au doigt, et le second clic referme. */
.depliant {
  margin-top: auto; /* pousse le bouton au bas de la carte : rangs alignés */
  border-top: 1px solid var(--bord-fin);
}

.depliant__bouton {
  list-style: none; /* le chevron remplace le triangle natif */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px; /* cible tactile */
  padding-top: 0.375rem;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sarcelle-texte);
}

.depliant__bouton::-webkit-details-marker {
  display: none;
}

.depliant__bouton:hover {
  color: var(--marine);
}

.depliant__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.depliant[open] .depliant__chevron {
  transform: rotate(180deg);
}

.depliant__texte {
  padding: 0.25rem 0 0.375rem;
  font-size: var(--t-carte);
  line-height: 1.6;
  color: var(--gris-texte);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.depliant__mention {
  color: var(--gris-doux);
}

/* La méthode : trois étapes numérotées, chacune fermée par son livrable. */
.etapes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.etape {
  gap: 0.875rem;
}

/* Le numero d'etape n'est PAS un jeton, et c'est voulu depuis le 01/09.
   Il portait exactement le meme dessin que le numero de section : meme
   corps de 12 px, meme Space Mono, meme couleur, meme fond, meme
   remplissage, meme rayon, soit onze proprietes calculees identiques sur
   onze, et la meme boite de 37 x 31 px. Colles l'un sous l'autre, le 04
   de la section et le 01 de la premiere carte se lisaient comme une
   suite, et l'oeil cherchait un quatrieme temps.
   La regle est donc : le jeton repere une section, le chiffre nu compte
   une etape. Ne pas lui rendre son fond. */
.etape__num {
  align-self: flex-start;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sarcelle-texte);
}

.etape__livrable {
  margin-top: auto;
  border-top: 1px solid var(--bord-fin);
  padding-top: 0.875rem;
  font-size: var(--t-carte);
  line-height: 1.6;
  color: var(--gris-texte);
}

/* L'avant/après : empilé sur téléphone (lisibilité, arbitré le 28/08),
   côte à côte dès qu'il y a la place. */
.avant-apres {
  display: grid;
  gap: 1.25rem;
}

.avant-apres__volet {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.avant-apres__marque {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-doux);
}

/* Le panneau final, sans pastille, juste avant le contact. */
.panneau {
  background: var(--fond-doux);
  border-radius: 24px;
  padding: clamp(2rem, 1.2rem + 3.3vw, 3.5rem) clamp(1.5rem, 0.6rem + 3.7vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}

.panneau__titre {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.2;
  max-width: 40rem;
}

.panneau__texte {
  font-size: var(--t-chapo);
  color: var(--gris-texte);
}

/* ---------- 9. Auto-évaluation ----------------------------------------- */

.diagnostic {
  background: var(--marine);
  color: #ffffff;
  border-radius: 24px;
  padding: clamp(2.25rem, 1.1rem + 4.7vw, 4.5rem) clamp(1.625rem, 0.1rem + 6.2vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.625rem, 1.4rem + 0.95vw, 2.25rem);
}

/* Sur téléphone l'ordre est : texte, tuiles, bouton. Sur grand écran le
   bouton remonte à droite du titre. L'ordre du HTML suit le téléphone,
   le placement en grille s'occupe du reste. */
.diagnostic__bloc {
  display: flex;
  flex-direction: column;
  gap: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  max-width: 43.75rem;
}

.diagnostic__etiquette {
  align-self: flex-start;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-marine-pastille);
  border: 1px solid var(--marine-bord);
  padding: 0.5rem 0.9375rem;
  border-radius: 999px;
}

.diagnostic__titre {
  font-size: var(--t-h2-diag);
  line-height: 1.14;
  max-width: 43.75rem;
}

.diagnostic__texte {
  font-size: var(--t-courant);
  line-height: 1.65;
  color: var(--sur-marine);
  max-width: 43.75rem;
}

/* ⚠ Pas de compte de colonnes ici, et c'est delibere depuis le 01/09.
   La grille portait « repeat(3, ...) » a deux endroits, base et grand
   ecran, alors que le nombre de tuiles vit dans le HTML. Retirer la
   tuile « 3 DIMENSIONS » a laisse deux regles qui annoncaient trois
   colonnes pour deux tuiles : la troisieme tombait a 0 px, donc rien ne
   se voyait et rien ne signalait l'ecart.
   Avec grid-auto-flow, les colonnes SUIVENT les tuiles. Un nombre de
   moins a tenir a jour dans deux fichiers.                            */
.tuiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.625rem;
}

.tuile {
  background: var(--marine-tuile);
  border-radius: 14px;
  padding: 1.125rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  align-items: center;
  text-align: center;
}

.tuile__nombre {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
}

.tuile__mot {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--sur-marine-doux);
}

.diagnostic__action {
  align-self: stretch;
}

/* Sur le fond marine du panneau, le cadre de focus marine disparaît
   (marine sur marine). Il passe en blanc : 15,5:1 sur ce fond. */
.diagnostic :focus-visible {
  outline-color: #ffffff;
}

/* ---------- 10. Contact : le gérant et ses coordonnées ------------------ */
/*
   Une seule section depuis le 27/08. La photo prouve la phrase « directement
   avec l'ingénieur qui réalisera la mission » au lieu de la répéter une
   section plus loin, et la page se termine sur un visage et un numéro plutôt
   que sur un bloc à moitié vide.
*/

/* Ce paragraphe ferme le portrait, juste avant les coordonnées : sur
   téléphone il était sinon à deux écrans du numéro à composer. */

.contact {
  display: grid;
  gap: clamp(1.75rem, 0.9rem + 3.4vw, 4rem);
  align-items: start;
}

.contact__photo {
  width: 100%;
  /* Sans « height: auto », les attributs width et height de la balise img
     imposent une hauteur de 720 px et le rapport d'aspect est ignoré. */
  height: auto;
  aspect-ratio: 342 / 348;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 22px;
  box-shadow: var(--ombre-photo);
}

/* ⚠ Ces ecarts ont ete resserres le 01/09, et ce n'est pas cosmetique :
   l'ancre corrigee ci-dessus coute 105 px, et sans eux les coordonnees
   sortaient de l'ecran. Mesure : la section passe de 644 a 600 px de son
   sommet au bas des coordonnees. Ne pas les relacher sans remesurer.
   Seuls les ecarts PROPRES au bloc Contact ont ete touches ; ceux de
   .section__intro sont partages par les quatre sections et commandent le
   rythme de toute la page.                                            */
.contact__identite {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.contact__nom {
  font-size: var(--t-nom);
  line-height: 1.15;
}

.contact__role {
  align-self: flex-start;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pastille-texte);
  background: var(--fond-doux);
  padding: 0.5rem 0.9375rem;
  border-radius: 999px;
}

.contact__bio {
  font-size: var(--t-courant);
  line-height: 1.7;
  color: var(--gris-texte);
  max-width: 40rem;
}

/* Les coordonnées ferment la section sur toute la largeur, sous la photo et
   la bio. Deux raisons : elles y gagnent la présence que Victor a demandée,
   et la colonne de droite cesse de dépasser la photo de 143 px. */
/* Le filet revient ici, et les coordonnees vivent desormais dans la
   colonne de la biographie : voir le commentaire d'index.html. Il court
   donc sur la largeur de cette colonne et non sur la page entiere, ce
   qui est voulu, il separe la biographie de ses coordonnees.        */
.coordonnees {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  margin-top: clamp(1.25rem, 1.05rem + 0.85vw, 1.5rem);
  padding-top: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
  border-top: 1px solid var(--bord-carte);
}

.coordonnee {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.coordonnee__etiquette {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-doux);
}

/* En bas de casse et en gras, demandé par Victor le 27/08.
   Space Grotesk et non Space Mono : la mono n'a pas de graisse grasse dans
   le jeu auto-hébergé, le navigateur en fabriquerait une fausse. */
.coordonnee__valeur {
  font-family: inherit;
  /* 21 px sur téléphone, 28 px sur grand écran. Baissé le 27/08 : 24 à 34 px
     pesait trop lourd en fin de page. */
  font-size: clamp(1.3125rem, 1.15rem + 0.667vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--sarcelle-texte);
  align-self: flex-start;
  /* Sans soulignement, demandé le 27/08. Acceptable ici parce que ces deux
     liens sont isolés sous leur étiquette et non noyés dans un paragraphe :
     rien ne dépend de la seule couleur pour les repérer. Le soulignement
     revient au survol, et le focus garde son cadre marine. */
  text-decoration: none;
}

.coordonnee__valeur:hover {
  color: var(--marine);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* ---------- 11. Pages annexes ------------------------------------------ */

.page-simple {
  padding-top: clamp(2.5rem, 1.4rem + 4.5vw, 6.5rem);
  padding-bottom: var(--espace-section);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 46rem;
}

.page-simple h1 {
  font-size: var(--t-h2);
  line-height: 1.1;
}

.page-simple p {
  font-size: var(--t-courant);
  line-height: 1.7;
  color: var(--gris-texte);
}

.page-simple .etiquette {
  margin-bottom: 0.5rem;
}

.page-simple h2 {
  font-size: var(--t-titre-app);
  line-height: 1.25;
  margin: 1rem 0 0;
}

/* Les pages annexes sont les seules à porter de vraies listes à puces.
   Deux pièges, tous deux silencieux, tous deux vus sur l'écran rendu :
   la règle « ul { list-style: none } » de la section 3 s'applique aussi
   ici et doit être rétablie explicitement ; et un display:flex sur la
   liste ferait perdre à chaque élément son affichage list-item, donc sa
   puce. L'espacement passe par une marge entre éléments.                 */
.page-simple ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
  font-size: var(--t-courant);
  line-height: 1.7;
  color: var(--gris-texte);
}

.page-simple li + li {
  margin-top: 0.75rem;
}

.page-simple li::marker {
  color: var(--sarcelle-texte);
}

/* Le bloc d'opposition à la mesure d'audience, page Confidentialité. Il est
   posé « hidden » dans le HTML et révélé par matomo.js : sans JavaScript la
   mesure ne tourne pas, donc un bouton pour la refuser n'aurait aucun sens.  */
.opposition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.25rem;
}

.opposition__etat {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gris-doux);
}

.page-simple__date {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--gris-doux);
}

.retour {
  align-self: flex-start;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
}

/* ---------- 12. Pied de page ------------------------------------------- */

.pied {
  border-top: 1px solid var(--bord-carte);
  padding-block: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pied__logo .logo__embleme {
  width: 30px;
  height: 30px;
}
.pied__logo .logo__mot {
  height: 20px;
}

.pied__liens {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.pied__liens a {
  font-size: 0.9375rem;
  color: var(--gris-doux);
  text-decoration: none;
  align-self: flex-start;
}

.pied__liens a:hover {
  color: var(--marine);
  text-decoration: underline;
}

.pied__legal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--bord-fin);
  padding-top: 1.25rem;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.71875rem;
  line-height: 1.6;
  color: var(--gris-doux);
}

/* ---------- 12bis. Fenêtres de détail des prestations ------------------ */

/* Le détail des huit prestations s'ouvre dans une fenêtre modale depuis le
   31/08, et non plus en dépliant sous la tuile. Motif mesuré : dans la
   grille 3x3, un details qui s'ouvre tire les deux tuiles voisines à la
   hauteur de la plus longue, soit 602 px de blanc dans chacune avec le texte
   détaillé de la première tuile. Le dessin plafonnait donc la longueur des
   textes, ce qui est l'inverse de ce qu'on veut.

   Les cinq tuiles d'applications de la section 06 gardent le dépliant :
   leurs textes sont courts et la question ne s'y pose pas.

   ⚠ FORME PROVISOIRE. Victor a posé le 31/08 que le message prime sur la
   forme : les neuf textes se valident d'abord, la forme sera reprise ensuite
   pour être homogène sur les neuf. Ce qui suit est de quoi éprouver la
   mécanique en vrai, pas un dessin arrêté. */

/* Le bouton reprend trait pour trait le vocabulaire du dépliant qu'il
   remplace : même filet, même sarcelle, même cible tactile de 44 px. Seul le
   chevron change de sens, vers la droite : il n'ouvre plus une trappe sous la
   tuile, il conduit ailleurs. */
.carte__detail {
  margin-top: auto; /* pousse le bouton au bas de la carte : rangs alignés */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.375rem 0 0;
  border: 0;
  border-top: 1px solid var(--bord-fin);
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sarcelle-texte);
  text-align: left;
  cursor: pointer;
}

.carte__detail:hover {
  color: var(--marine);
}

.carte__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.carte__detail:hover .carte__chevron {
  transform: translateX(3px);
}

/* La fenêtre. L'élément dialog natif apporte le fond, le centrage, la couche
   supérieure, le piège du focus et la fermeture par Échap : on ne fait que
   l'habiller. Le display flex est posé sur [open] et non sur .modale, sinon
   la règle du navigateur qui masque un dialog fermé serait écrasée et les
   neuf fenêtres s'afficheraient dans la page. */
.modale {
  width: min(100% - 2rem, 40rem);
  max-height: min(100dvh - 2rem, 46rem);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  color: var(--marine);
  box-shadow: 0 24px 64px rgba(17, 35, 71, 0.24);
  overflow: hidden;
}

.modale[open] {
  display: flex;
  flex-direction: column;
}

.modale__cadre {
  display: flex;
  flex-direction: column;
  min-height: 0; /* sans quoi le corps refuse de défiler et déborde */
}

.modale__entete {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--bord-fin);
}

/* Le symbole BâtiFocale dans l'en-tête de sa fenêtre. C'est le symbole seul et
   non la signature complète : le nom est déjà dans le titre à côté, la
   signature l'écrirait deux fois. La notice de marque
   (`BatiFocale\marque\NOTICE.md`) fixe 24 px de côté minimum pour le symbole
   complet et interdit contour, ombre et dégradé : il est donc posé nu, à
   32 px. Son accent ambre #C87A28 est la première couleur du site qui ne
   vienne pas du logo Arvitria, et c'est voulu par la charte : chaque module
   porte son propre accent. */
.modale__marque {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 1px;
}

.modale__titre {
  flex: 1;
  margin: 0;
  font-size: var(--t-titre-app);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--marine);
}

.modale__fermer {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -0.375rem -0.375rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bord-bouton);
  border-radius: 999px;
  background: #ffffff;
  color: var(--gris-texte);
  cursor: pointer;
}

.modale__fermer svg {
  width: 16px;
  height: 16px;
}

.modale__fermer:hover {
  background: var(--fond-doux);
  border-color: var(--bord-doux);
  color: var(--marine);
}

/* tabindex="0" est posé sur ce bloc dans la page : c'est lui qui défile
   quand le texte dépasse, et une zone de défilement qu'aucun navigateur ne
   met dans l'ordre de tabulation ne se lit pas au clavier. Le cadre de focus
   se pose donc à l'intérieur, pour ne pas déborder du bord arrondi. */
.modale__corps {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-top: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: var(--t-courant);
  line-height: 1.65;
  color: var(--gris-texte);
}

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

.modale__corps p {
  margin: 0;
}

.modale__corps h3 {
  margin: 0.375rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--marine);
}

/* Première liste à puces du site : la base met toutes les listes à plat,
   il n'y avait jusqu'ici aucun texte qui en demande une. La puce est un
   petit rond sarcelle et non un tiret, pour qu'aucune ligne du site ne
   commence par un signe qu'on puisse prendre pour un tiret d'incise. */
.modale__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modale__liste li {
  position: relative;
  padding-left: 1.125rem;
}

.modale__liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sarcelle);
}

/* Un couple de plans avant/après dans une fenêtre. Le motif des étiquettes
   « Avant » et « Après » en Space Mono vient du bloc 05 arbitré le 30/08 et
   supprimé le 31/08 : la comparaison revient ici, dans la prestation qu'elle
   illustre, plutôt qu'en section à part.
   Le liseré est nécessaire : les deux plans sont sur fond blanc comme la
   fenêtre, et sans lui leurs bords se perdraient dans la page. */
.plan {
  margin: 0;
}

.plan__image {
  display: block;
  width: 100%;
  /* Sans « height: auto », les attributs width et height de la balise img
     imposeraient leur hauteur en pixels et écraseraient le rapport. */
  height: auto;
  border: 1px solid var(--bord-carte);
  border-radius: 10px;
  background: #ffffff;
}

.plan__legende {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--gris-doux);
}

.plan__marque {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marine);
  margin-right: 0.375rem;
}

.modale::backdrop {
  background: rgba(17, 35, 71, 0.55);
}

/* Apparition en fondu avec une légère montée. Animer un dialog demande deux
   choses récentes : allow-discrete, pour que display et overlay puissent
   être animés, et @starting-style, qui donne l'état de départ. Un navigateur
   qui ignore l'une ou l'autre affiche la fenêtre d'un coup : la dégradation
   est propre, rien ne casse. */
.modale,
.modale::backdrop {
  opacity: 0;
  transition: opacity 220ms ease,
              transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
              overlay 220ms allow-discrete,
              display 220ms allow-discrete;
}

.modale {
  transform: translateY(14px) scale(0.98);
}

.modale[open],
.modale[open]::backdrop {
  opacity: 1;
}

.modale[open] {
  transform: none;
}

@starting-style {
  .modale[open] {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  .modale[open]::backdrop {
    opacity: 0;
  }
}

/* Le dialog rend le fond inerte mais ne l'empêche pas de défiler sous la
   fenêtre : on bloque donc la page pendant l'ouverture.

   Le bloquer fait disparaître la barre de défilement, et la page s'élargit
   d'autant : mesuré à 1536 px, la largeur utile passait de 1521 à 1536, soit
   un saut latéral de 15 px sur toute la page derrière la fenêtre.
   scrollbar-gutter: stable ne répare rien ici, la gouttière n'est pas tenue
   quand overflow passe à hidden. La largeur de la barre est donc mesurée par
   le script au moment de l'ouverture et rendue en padding. */
html.fond-bloque {
  overflow: hidden;
  padding-right: var(--barre-defilement, 0px);
}


/* ---------- 13. Points de rupture -------------------------------------- */

/* Deux colonnes pour les tuiles. */
@media (min-width: 45em) {
  .grille--situations,
  .grille--applications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .heros__actions {
    flex-direction: row;
    align-items: center;
    gap: 1.125rem;
  }
  .heros__actions .bouton {
    flex: 0 0 auto;
  }
  .diagnostic__action {
    align-self: flex-start;
  }
  .pied__liens {
    flex-direction: row;
    gap: 2rem;
  }
}

/* La photo du gérant à côté de son identité. */
@media (min-width: 52em) {
  .grille--situations,
  .grille--applications {
    gap: 1.375rem;
  }
  .contact {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  }
  /* Les deux coordonnées côte à côte dès qu'il y a la place. */
  .coordonnees {
    flex-direction: row;
    gap: clamp(2.5rem, 1rem + 6vw, 6rem);
  }
  .contact__photo {
    aspect-ratio: 304 / 324;
    max-width: 304px;
  }
}

/* Navigation complète et héros sur deux colonnes. */
@media (min-width: 61.25em) {
  /* La barre passe a 105 px ici, l'ancre suit. */
  html {
    scroll-padding-top: 105px;
  }

  .heros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bouton-menu {
    display: none;
  }
  .menu {
    display: none !important;
  }
  .nav-large {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, -0.6rem + 3vw, 2.375rem);
  }
  .nav-large a {
    font-size: 0.96875rem;
    font-weight: 500;
    color: var(--gris-texte);
    text-decoration: none;
    /* Porte la cible à 45 px de haut sans changer la hauteur de la barre,
       fixée par le logo de 52 px. */
    padding-block: 0.625rem;
  }
  .nav-large a:hover {
    color: var(--marine);
    text-decoration: underline;
  }
  .bouton--entete {
    padding: 0.8125rem 1.625rem;
    font-size: 0.9375rem;
  }
  .logo__embleme {
    width: 52px;
    height: 52px;
  }
  .logo__mot {
    height: 36px;
  }
  .logo {
    gap: 0.875rem;
  }
  .entete__barre {
    /* 26 px comme la maquette : 26 + 52 + 26 = 104 px de barre. */
    padding-block: 1.625rem;
  }
  .entete__actions {
    gap: 2.375rem;
  }
  .pied__logo .logo__embleme {
    width: 36px;
    height: 36px;
  }
  .pied__logo .logo__mot {
    height: 24px;
  }
  .pied {
    padding-block: 2.5rem;
  }
  .pied__entete,
  .pied__legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .pied__entete {
    display: flex;
    gap: 2rem;
  }
  .diagnostic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 4rem;
    row-gap: 2.25rem;
  }
  .diagnostic__bloc {
    grid-column: 1;
    grid-row: 1;
  }
  .diagnostic__action {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }
  .tuiles {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .tuiles {
    grid-auto-columns: max-content;
    gap: 1.125rem;
  }
  .tuile {
    padding: 1.375rem 1.875rem;
  }
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.375rem;
  }
  .avant-apres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.625rem;
  }
}

/* Trois colonnes : la grille des situations devient le 3x3 arbitré. */
@media (min-width: 71.25em) {
  .grille--situations,
  .grille--applications {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.625rem;
  }
  .carte {
    padding: 1.875rem 2rem;
  }
  .contact {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}

/* ---------- 14. Préférences et impression ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .entete,
  .menu,
  .bouton-menu,
  .lien-evitement {
    display: none !important;
  }
  body {
    color: #000000;
  }
  .carte,
  .coordonnees {
    box-shadow: none;
    border: 1px solid #999999;
  }
}