/* AMEKTI — le site public. LA MISE EN PAGE.
 *
 * ⚠️ ⛔ AUCUN OUTIL DE CONSTRUCTION, ⛔ aucun npm : le dépôt s'y refuse (D-83),
 *    et une page de présentation ⛔ n'a besoin ⛔ ni de l'un ⛔ ni de l'autre.
 *    Du HTML, du CSS, et le strict minimum de script.
 */

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--interligne-corps);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  /* ⚠️ ⛔ Aucun débordement horizontal, JAMAIS : c'est la faute la plus
   *    visible d'un site sur téléphone, et la plus facile à laisser passer. */
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; display: block; }
a { color: inherit; }

/* ── SQUELETTE ───────────────────────────────────────────────────────────── */
.page { width: min(100% - 2 * var(--e5), var(--largeur-page)); margin-inline: auto; }
.page--texte { width: min(100% - 2 * var(--e5), var(--largeur-texte)); margin-inline: auto; }

.bande { padding-block: var(--e9); }
/* 🔴 CONSTATÉ À L'ÉCRAN : un lien d'ancre amenait le haut de la section SOUS
 *    l'en-tête collant, qui en masquait le titre. `scroll-margin-top` réserve
 *    la hauteur de la barre — ⛔ sans quoi chaque lien du menu arrive à côté. */
[id] { scroll-margin-top: 6rem; }
.bande--serree { padding-block: var(--e8); }
.bande--sable { background: var(--sable); }
.bande--surface { background: var(--surface); }
.bande--nuit { background: var(--nuit); color: var(--nuit-texte); }
.bande--nuit .surtitre { color: var(--nuit-douce); }
.bande--nuit .plomb, .bande--nuit .corps { color: var(--nuit-douce); }

/* ── TYPOGRAPHIE ─────────────────────────────────────────────────────────── */
.titan {
  font-size: var(--t-titan); font-weight: var(--graisse-titan);
  line-height: var(--interligne-titre); letter-spacing: var(--serre-titan);
  text-wrap: balance;
}
.affiche {
  font-size: var(--t-affiche); font-weight: var(--graisse-forte);
  line-height: 1.1; letter-spacing: var(--serre-titre); text-wrap: balance;
}
.section-titre {
  font-size: var(--t-section); font-weight: var(--graisse-forte);
  line-height: 1.15; letter-spacing: var(--serre-titre); text-wrap: balance;
}
.sous-titre {
  font-size: var(--t-sous); font-weight: var(--graisse-demi);
  line-height: 1.35; letter-spacing: var(--serre-titre);
}
.plomb { font-size: var(--t-sous); color: var(--encre-douce); text-wrap: pretty; }
.corps { color: var(--encre-douce); text-wrap: pretty; }
.petit { font-size: var(--t-petit); color: var(--encre-douce); }

/* Le sur-titre : une étiquette de section, en petites capitales espacées. */
.surtitre {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t-menu); font-weight: var(--graisse-demi);
  text-transform: uppercase; letter-spacing: var(--ouvert);
  color: var(--encre-douce);
}
.surtitre::before {
  content: ""; width: var(--e5); height: var(--filet-epais);
  background: var(--accent); border-radius: var(--r-plein);
}

.entete-section { display: grid; gap: var(--e4); max-width: var(--largeur-texte); }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section--centre .surtitre { justify-self: center; }

/* ── BOUTONS ─────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 3rem; padding: var(--e3) var(--e6);
  font: inherit; font-weight: var(--graisse-demi); text-decoration: none;
  border: var(--filet) solid transparent; border-radius: var(--r-plein);
  background: var(--accent); color: var(--surface);
  cursor: pointer; box-shadow: var(--ombre-douce);
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe),
              background var(--duree) var(--courbe);
}
.bouton:hover { background: var(--accent-vif); box-shadow: var(--ombre-portee); transform: translateY(-1px); }
.bouton:active { transform: none; }
.bouton:focus-visible { outline: var(--filet-epais) solid var(--accent); outline-offset: 3px; }
.bouton--fantome {
  background: transparent; color: var(--encre);
  border-color: var(--trait-fort); box-shadow: none;
}
.bouton--fantome:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.bande--nuit .bouton--fantome { color: var(--nuit-texte); border-color: var(--nuit-trait); }
.bande--nuit .bouton--fantome:hover { background: transparent; border-color: var(--nuit-douce); color: var(--nuit-texte); }
.actions { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ── EN-TÊTE ─────────────────────────────────────────────────────────────── */
.tete {
  position: sticky; top: 0; z-index: 10;
  padding-top: var(--securite-haut);
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  border-bottom: var(--filet) solid var(--trait);
  backdrop-filter: blur(16px);
}
.tete-rangee {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e5);
  min-height: 4.5rem;
}
.marque { display: inline-flex; align-items: center; gap: var(--e3); text-decoration: none; }
.marque img { width: 2rem; height: 2rem; border-radius: var(--r-petit); }
.marque span {
  font-weight: var(--graisse-titan); letter-spacing: var(--ouvert); font-size: var(--t-petit);
}
.menu { display: flex; align-items: center; gap: var(--e6); }
.menu a {
  text-decoration: none; font-size: var(--t-petit); font-weight: var(--graisse-demi);
  color: var(--encre-douce); transition: color var(--duree) var(--courbe);
}
.menu a:hover, .menu a[aria-current] { color: var(--accent); }
/* 🔴 CONSTATÉ EN MESURANT LA COULEUR CALCULÉE, ⛔ pas en relisant : `.menu a`
 *    (0,1,1) l'emporte sur `.bouton` (0,1,0). Le libellé du bouton principal
 *    sortait donc en `--encre-douce` SUR le vert de l'accent — deux tons
 *    sombres l'un sur l'autre, illisible. Un test de navigateur mesure
 *    désormais ce rapport à chaque exécution. */
.menu a.bouton,
.menu a.bouton:hover,
.menu-tel-panneau a.bouton,
.menu-tel-panneau a.bouton:hover { color: var(--surface); }
.tete .bouton { min-height: 2.6rem; padding: var(--e2) var(--e5); font-size: var(--t-petit); }

/* Le menu de téléphone — ⛔ sans JavaScript : `details` fait le travail. */
.menu-tel { display: none; }
.menu-tel > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: var(--filet) solid var(--trait-fort); border-radius: var(--r-moyen);
}
.menu-tel > summary::-webkit-details-marker { display: none; }
.menu-tel[open] > summary { border-color: var(--accent); color: var(--accent); }
.menu-tel-panneau {
  position: absolute; left: 0; right: 0;
  display: grid; gap: var(--e2);
  padding: var(--e5) max(var(--e5), calc((100vw - var(--largeur-page)) / 2)) var(--e6);
  background: var(--papier); border-bottom: var(--filet) solid var(--trait);
  box-shadow: var(--ombre-portee);
}
.menu-tel-panneau a {
  padding: var(--e3) 0; text-decoration: none; font-weight: var(--graisse-demi);
  border-bottom: var(--filet) solid var(--trait);
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero { padding-block: var(--e9) var(--e8); position: relative; overflow: hidden; }
/* ⚠️ La trame : des lignes très pâles, comme un papier réglé. ⛔ Pas un dégradé
 *    violet — l'idée est le DOCUMENT, ⛔ pas la « tech ». */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--trait) var(--filet), transparent var(--filet)) 0 0 / 100% 2.25rem,
    radial-gradient(120% 80% at 70% 0%, var(--accent-clair), transparent 60%);
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.hero > * { position: relative; }
.hero-grille { display: grid; gap: var(--e8); align-items: center; }
.hero-texte { display: grid; gap: var(--e5); max-width: 34rem; }
.hero .titan em { font-style: normal; color: var(--accent); }

/* ── LE PRINCIPE — traité comme un ENGAGEMENT, ⛔ pas comme un slogan ─────── */
.principe {
  display: grid; gap: var(--e4);
  padding: var(--e6);
  background: var(--surface);
  border: var(--filet) solid var(--trait);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-moyen);
  box-shadow: var(--ombre-douce);
}
.principe-etiquette {
  font-size: var(--t-menu); font-weight: var(--graisse-demi);
  text-transform: uppercase; letter-spacing: var(--ouvert); color: var(--accent);
}
.principe q {
  font-size: var(--t-sous); font-weight: var(--graisse-demi);
  line-height: 1.4; letter-spacing: var(--serre-titre); quotes: "« " " »";
}
.principe strong { font-weight: var(--graisse-titan); }
.bande--nuit .principe {
  background: color-mix(in srgb, var(--nuit-texte) 5%, transparent);
  border-color: var(--nuit-trait); border-left-color: var(--accent-vif);
  color: var(--nuit-texte);
}
.bande--nuit .principe-etiquette { color: var(--nuit-douce); }

/* ── LES CAPTURES — un composant, ⛔ pas une image posée ──────────────────── */
/* ⚠️ Le cadre imite une FENÊTRE, avec sa barre : la capture fait partie du
 *    dessin de la page. Les proportions viennent des attributs width/height de
 *    l'image — ⛔ aucun décalage de mise en page au chargement (CLS). */
.capture { display: grid; gap: var(--e3); margin: 0; }
.capture-cadre {
  border-radius: var(--r-grand); overflow: hidden;
  background: var(--surface);
  border: var(--filet) solid var(--trait);
  box-shadow: var(--ombre-produit);
}
.capture-barre {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--sable);
  border-bottom: var(--filet) solid var(--trait);
}
.capture-barre i {
  width: 0.6rem; height: 0.6rem; border-radius: var(--r-plein);
  background: var(--trait-fort); opacity: 0.55;
}
.capture-barre b {
  margin-left: var(--e3); font: inherit; font-size: var(--t-menu);
  font-weight: var(--graisse-corps); color: var(--encre-douce);
  font-family: var(--mono);
}
.capture img { width: 100%; height: auto; }
.capture-legende { font-size: var(--t-petit); color: var(--encre-douce); }
.bande--nuit .capture-legende { color: var(--nuit-douce); }

/* La variante TÉLÉPHONE : un appareil, ⛔ sans photo de téléphone. */
.capture--telephone { max-width: 17.5rem; }
.capture--telephone .capture-cadre {
  border-radius: var(--r-tres-grand);
  border: 8px solid var(--encre);
  box-shadow: var(--ombre-produit);
}
.capture--telephone .capture-barre { display: none; }

.capture--nue .capture-cadre { border-radius: var(--r-moyen); }
.capture--nue .capture-barre { display: none; }

/* La composition « produit » : un bureau, deux téléphones qui flottent. */
.scene { position: relative; display: grid; gap: var(--e5); }
.scene-telephones { display: flex; gap: var(--e5); flex-wrap: wrap; }

/* ── LA CHAÎNE — l'histoire du produit en un coup d'œil ──────────────────── */
.chaine { display: grid; gap: var(--e4); counter-reset: maillon; }
.maillon {
  position: relative; display: grid; gap: var(--e2);
  padding: var(--e5); padding-left: var(--e8);
  background: var(--surface); border: var(--filet) solid var(--trait);
  border-radius: var(--r-moyen);
}
.maillon::before {
  counter-increment: maillon; content: counter(maillon, decimal-leading-zero);
  position: absolute; left: var(--e5); top: var(--e5);
  font-family: var(--mono); font-size: var(--t-menu); color: var(--accent);
  font-weight: var(--graisse-demi);
}
.maillon dt { font-weight: var(--graisse-forte); letter-spacing: var(--serre-titre); }
.maillon dd { color: var(--encre-douce); font-size: var(--t-petit); }

/* ── GRILLES ─────────────────────────────────────────────────────────────── */
.grille { display: grid; gap: var(--e5); }
.grille--2 { grid-template-columns: 1fr; }
.grille--3 { grid-template-columns: 1fr; }

.carte {
  display: grid; gap: var(--e3); align-content: start;
  padding: var(--e6);
  background: var(--surface);
  border: var(--filet) solid var(--trait);
  border-radius: var(--r-grand);
  transition: box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe);
}
.carte:hover { box-shadow: var(--ombre-portee); transform: translateY(-2px); border-color: var(--trait-fort); }
.carte h3 { font-size: var(--t-sous); font-weight: var(--graisse-forte); letter-spacing: var(--serre-titre); }
.carte p { color: var(--encre-douce); font-size: var(--t-petit); }
.carte-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-moyen);
  background: var(--accent-clair); color: var(--accent);
}
.carte-icone svg { width: 1.35rem; height: 1.35rem; }
.bande--nuit .carte {
  background: color-mix(in srgb, var(--nuit-texte) 4%, transparent);
  border-color: var(--nuit-trait); color: var(--nuit-texte);
}
.bande--nuit .carte p { color: var(--nuit-douce); }
.bande--nuit .carte-icone { background: color-mix(in srgb, var(--accent-vif) 22%, transparent); color: var(--nuit-texte); }
.bande--nuit .carte:hover { border-color: var(--nuit-douce); }

/* ── ÉTAPES ALTERNÉES ────────────────────────────────────────────────────── */
.etapes { display: grid; gap: var(--e9); }
.etape { display: grid; gap: var(--e6); align-items: center; }
.etape-texte { display: grid; gap: var(--e4); max-width: var(--largeur-texte); }
.etape-numero {
  font-family: var(--mono); font-size: var(--t-menu); font-weight: var(--graisse-demi);
  letter-spacing: var(--ouvert); color: var(--accent);
}

/* ── LA SOURCE — la démonstration visuelle du principe ───────────────────── */
.lien-source {
  display: grid; gap: 0;
  padding: var(--e6);
  background: var(--surface); border: var(--filet) solid var(--trait);
  border-radius: var(--r-grand); box-shadow: var(--ombre-douce);
}
.lien-source-info { display: grid; gap: var(--e2); }
.lien-source-etiquette { font-size: var(--t-menu); color: var(--encre-douce); text-transform: uppercase; letter-spacing: var(--ouvert); }
.lien-source-valeur { font-size: var(--t-affiche); font-weight: var(--graisse-forte); letter-spacing: var(--serre-titre); line-height: 1.1; }
.lien-source-fil {
  justify-self: start; width: var(--filet-epais); height: var(--e7);
  margin-left: var(--e5); background: linear-gradient(var(--accent), var(--trait));
}
.lien-source-extrait {
  display: grid; gap: var(--e2);
  padding: var(--e4); border-left: 3px solid var(--accent);
  background: var(--papier); border-radius: var(--r-petit);
}
.lien-source-extrait code { font-family: var(--mono); font-size: var(--t-petit); overflow-wrap: anywhere; }
.lien-source-note { margin-top: var(--e4); font-size: var(--t-petit); color: var(--encre-douce); }

/* ── QUESTIONS / RÉPONSES — lisibles par une machine comme par un humain ─── */
.qr { display: grid; gap: var(--e5); }
.qr-bloc {
  display: grid; gap: var(--e2);
  padding-top: var(--e5); border-top: var(--filet) solid var(--trait);
}
.qr-bloc h3 { font-size: var(--t-sous); font-weight: var(--graisse-forte); letter-spacing: var(--serre-titre); }
.qr-bloc p { color: var(--encre-douce); }

.faq { display: grid; gap: 0; }
.faq details {
  border-bottom: var(--filet) solid var(--trait);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e5) 0; cursor: pointer; list-style: none;
  font-size: var(--t-sous); font-weight: var(--graisse-demi); letter-spacing: var(--serre-titre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-size: var(--t-sous);
  color: var(--accent); transition: transform var(--duree) var(--courbe);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: var(--filet-epais) solid var(--accent); outline-offset: 3px; }
.faq-reponse { padding-bottom: var(--e5); color: var(--encre-douce); max-width: var(--largeur-texte); }

/* ── AVERTISSEMENT HONNÊTE ───────────────────────────────────────────────── */
.mise-au-point {
  display: grid; gap: var(--e2);
  padding: var(--e5);
  border: var(--filet) solid var(--trait-fort);
  border-radius: var(--r-moyen);
  background: var(--papier);
}
.mise-au-point strong { font-weight: var(--graisse-forte); }
.bande--nuit .mise-au-point {
  background: transparent; border-color: var(--nuit-trait); color: var(--nuit-douce);
}

/* ── PIED ────────────────────────────────────────────────────────────────── */
.pied { background: var(--nuit); color: var(--nuit-texte); padding-block: var(--e8) var(--e6); }
.pied-grille { display: grid; gap: var(--e7); }
.pied-colonnes { display: grid; gap: var(--e6); grid-template-columns: repeat(2, 1fr); }
.pied h2 {
  font-size: var(--t-menu); text-transform: uppercase; letter-spacing: var(--ouvert);
  color: var(--nuit-douce); font-weight: var(--graisse-demi); margin-bottom: var(--e3);
}
.pied ul { display: grid; gap: var(--e2); }
.pied a { color: var(--nuit-texte); text-decoration: none; font-size: var(--t-petit); }
.pied a:hover { color: var(--accent-vif); text-decoration: underline; }
.pied-bas {
  display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: space-between;
  padding-top: var(--e5); border-top: var(--filet) solid var(--nuit-trait);
  font-size: var(--t-petit); color: var(--nuit-douce);
}

/* ── FIL D'ARIANE ────────────────────────────────────────────────────────── */
.ariane { font-size: var(--t-petit); color: var(--encre-douce); }
.ariane ol { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; padding: 0; }
.ariane li + li::before { content: "/"; margin-right: var(--e2); color: var(--trait-fort); }
.ariane a { text-decoration: none; }
.ariane a:hover { text-decoration: underline; }

/* ── BLOG ────────────────────────────────────────────────────────────────── */
.articles { display: grid; gap: var(--e6); }
.article-carte {
  display: grid; gap: var(--e3); align-content: start;
  padding: var(--e6); background: var(--surface);
  border: var(--filet) solid var(--trait); border-radius: var(--r-grand);
  text-decoration: none;
  transition: box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.article-carte:hover { box-shadow: var(--ombre-portee); transform: translateY(-2px); }
/* ⚠️ La couverture est un MOTIF, ⛔ pas une photo : elle donne un repère visuel
 *    à la carte sans prétendre illustrer quoi que ce soit. `aspect-ratio` la
 *    tient à sa place même avant son chargement. */
.article-couverture {
  width: 100%; aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: var(--r-moyen); margin-bottom: var(--e2);
  background: var(--sable);
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
  font-size: var(--t-menu); color: var(--encre-douce);
  text-transform: uppercase; letter-spacing: var(--ouvert);
}
.etiquette {
  padding: var(--e1) var(--e3); border-radius: var(--r-plein);
  background: var(--accent-clair); color: var(--accent);
  font-weight: var(--graisse-demi);
}
.article-carte h2 { font-size: var(--t-sous); font-weight: var(--graisse-forte); letter-spacing: var(--serre-titre); }
.article-carte p { color: var(--encre-douce); font-size: var(--t-petit); }

/* Le corps d'un article : une seule colonne, large de ce que l'œil suit. */
.prose { display: grid; gap: var(--e5); max-width: var(--largeur-texte); }
.prose h2 { font-size: var(--t-section); font-weight: var(--graisse-forte); letter-spacing: var(--serre-titre); margin-top: var(--e5); }
.prose h3 { font-size: var(--t-sous); font-weight: var(--graisse-forte); letter-spacing: var(--serre-titre); margin-top: var(--e3); }
.prose p, .prose li { color: var(--encre-douce); }
.prose ul, .prose ol { display: grid; gap: var(--e2); padding-left: var(--e5); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose blockquote {
  padding: var(--e4) var(--e5); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--r-petit);
  font-size: var(--t-sous); letter-spacing: var(--serre-titre);
}
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose code { font-family: var(--mono); font-size: var(--t-petit); }

.partage { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; font-size: var(--t-petit); }
.partage a { color: var(--accent); text-underline-offset: 3px; }

/* ── PAGES LÉGALES — sobres, ⛔ pas décorées ─────────────────────────────── */
.legal { display: grid; gap: var(--e5); max-width: var(--largeur-texte); }
.legal h2 { font-size: var(--t-sous); font-weight: var(--graisse-forte); margin-top: var(--e5); }
.legal p, .legal li { color: var(--encre-douce); }
.legal ul { display: grid; gap: var(--e2); padding-left: var(--e5); list-style: disc; }
/* ⚠️ Ce qui reste à fournir est MARQUÉ, ⛔ jamais inventé. */
.a-fournir {
  padding: var(--e1) var(--e2); border-radius: var(--r-petit);
  background: var(--accent-clair); color: var(--accent);
  font-family: var(--mono); font-size: var(--t-petit);
}

/* ── ACCESSIBILITÉ ───────────────────────────────────────────────────────── */
.saut {
  position: absolute; left: -9999px;
  padding: var(--e3) var(--e5); background: var(--accent); color: var(--surface);
  border-radius: var(--r-moyen); z-index: 20;
}
.saut:focus { left: var(--e5); top: var(--e3); }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: var(--filet-epais) solid var(--accent); outline-offset: 3px; border-radius: var(--r-petit);
}
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * GRANDS ÉCRANS. ⚠️ Le socle ci-dessus est celui du TÉLÉPHONE : c'est la
 * mise en page la plus contrainte, donc celle qui doit être juste par défaut.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 48rem) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .pied-colonnes { grid-template-columns: repeat(4, 1fr); }
  .articles { grid-template-columns: repeat(2, 1fr); }
  .chaine { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .hero-grille { grid-template-columns: 1fr 1.15fr; gap: var(--e7); }
  .etape { grid-template-columns: 1fr 1.1fr; gap: var(--e8); }
  /* Une étape sur deux s'inverse — ⛔ l'ordre de LECTURE, lui, ne bouge pas. */
  .etape:nth-child(even) .etape-texte { order: 2; }
  .chaine { grid-template-columns: repeat(4, 1fr); }
  .scene { grid-template-columns: 1.6fr 1fr; align-items: end; }
}

@media (max-width: 63.99rem) {
  .menu { display: none; }
  .menu-tel { display: block; }
}