:root {
  color-scheme: dark;

  
  --fond: #0b0c10;
  --surface: #14161c;
  --texte: #f2f4f7;
  --attenue: #a8b0bd;
  --filet: #2a2e38;        
  --filet-fort: #6b7280;   

  
  --ambre: #E8A33D;        
  --lime: #B4E36A;         

  --marge-page: 40px;
  --gouttiere: 24px;
  --large: 1280px;

  --t-etiquette: 0.6875rem;
  --t-note: 0.875rem;
  --t-corps: 1.0625rem;
  --t-sous-section: 1.1875rem; /* 19 px : T3, la sous-section (charte visuelle, § 4.4) */
  --t-chapeau: 1.25rem;      
  --t-carte: 1.5rem;         
  --t-section: 1.75rem;       
  --t-nom: clamp(2.25rem, 5.4vw, 3.75rem);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/polices/inter-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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/polices/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

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

html {
  font-size: 100%;
  background: var(--fond);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-corps);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

p, dl, ol, ul { margin: 0; }

/* L'emphase est en 600, la graisse de la maison : le navigateur sert 700 par défaut, qui est la
   graisse des titres (T0, T1), pas celle d'un corps de texte. `.travail strong` portait déjà 600
   dans les puces ; cette règle le dit partout ailleurs, et le `<strong>` de la borne des refus de
   Prestations, désormais dans un paragraphe, la reçoit au lieu du 700 du navigateur (mesuré sur la
   page servie le 28/10/2026 à 17h11, constaté par Camille le même jour à 17h00). */
strong { font-weight: 600; }

a {
  color: var(--ambre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--ambre);
  outline-offset: 3px;
}

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

.mesure { max-width: 62ch; }

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--texte);
}
.evitement:focus {
  left: 16px;
  top: 16px;
  outline: 3px solid var(--ambre);
  outline-offset: 2px;
}

.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
}

.rail {
  grid-column: 1 / span 2;
  margin: 0;
  padding-top: 4px;
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--attenue);
  
  text-wrap: balance;
}

.contenu { grid-column: 3 / span 7; }

figure { margin: 0; }

.bande.ouverture .contenu { grid-column: 1 / span 8; }

figcaption {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--attenue);
  font-size: var(--t-etiquette);
  line-height: 1.5;
}

.titre-section {
  grid-column: 3 / span 7;
  margin: 0 0 24px;
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

/* T3 déclaré (charte visuelle, § 4.4) : les intertitres des trois exemples de Prestations sont les
   premiers `h3` servis hors des pages-documents, et la charte demande qu'une balise de titre
   employée sur une page reçoive une valeur déclarée, sinon le navigateur sert son propre style
   (19,89 px / 700 / interligne 1,17, mesuré le 28/10/2026). La classe porte les valeurs de T3 et
   l'espacement qui fait lire « intertitre + citation » comme un bloc : 6 px sous l'intertitre, là
   où `.travail li` sépare deux citations de 32 px. */
.titre-sous-section {
  margin: 0 0 6px;
  color: var(--texte);
  font-size: var(--t-sous-section);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.bande {
  display: grid;
  align-content: center;
  
  padding: 72px 0;
  border-bottom: 1px solid var(--filet);
}

.bande--surface { background: var(--surface); }

.bande:has(figure) { min-height: 560px; }

.tiers-droit { grid-column: 10 / span 3; grid-row: 1; align-self: start; margin: 0; }
/* `.fait` et `.mention-tva` sont sorties avec le repère de prix de la page Prestations
   (demande de Morph3us du 15/11/2026 ; avis de MARCUS ⚖️ du même jour : sans montant affiché, la
   mention n'explique plus rien et laisse croire qu'un prix manque). Une règle sans porteur se
   retire ; celle-ci se reposera avec un prix, si un prix revient sur une page. */

.entete {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  align-items: center;
  padding: 20px 0 18px;
  border-top: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-note);
}

.marque {
  grid-column: 1 / span 5;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--texte);
  text-decoration: none;
}
.marque:hover { text-decoration: underline; }
.marque .sigma {
  color: var(--ambre);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0;
}

.entete > a:not(.marque) {
  grid-column: 11 / span 2;
  
  grid-row: 1;
  justify-self: end;
  padding: 4px 0;
}

/* **SANS PORTEUR depuis le 11/11/2026** : le lien « Prestations » est retiré de l'en-tête des dix
   pages servies, sur la demande du dirigeant (`task_6487`). L'en-tête ne porte plus que la marque et
   « Nous écrire », et la règle de grille de ce dernier (`.entete > a:not(.marque)`) suffit à le
   placer. La règle se repose ici si le lien revient, et `outils/poser_lien_entete.py` porte le geste. */

section {
  padding: 56px 0;
  border-bottom: 1px solid var(--filet);
}

.ouverture { padding-top: 64px; align-items: baseline; }

/* Les deux règles ci-dessous ont un porteur, la page Prestations, dont la première fenêtre est
   une grille de 12 colonnes (`section.grille.ouverture`) : sans elles, `div.mesure` occupe une
   seule colonne et son `h1` se replie un caractère par ligne. Elles ont été retirées le 27/10
   par `a3ad58e`, qui les a jugées sans porteur avec celle de `.action` ; elles ont été rétablies
   le même jour après la mesure de Julia : 73 px de large et 660 px de haut à 1 280 px. */
.ouverture > .mesure { grid-column: 1 / span 8; }
.ouverture > .action { grid-column: 10 / span 3; margin: 0; }

h1 {
  max-width: 22ch;
  margin: 0 0 24px;
  font-size: var(--t-nom);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.marque {
  overflow-wrap: normal;
  hyphens: none;
}

.adresse-bouton {
  margin: 10px 0 0;
  color: var(--attenue);
  font-size: var(--t-note);
}

.bande-fin {
  padding: 56px 0;
  border-bottom: 1px solid var(--filet);
}

.bande-fin-nom {
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.bande-fin-signature {
  max-width: 62ch;
  margin: 0;
  color: var(--attenue);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.metier {
  max-width: 44ch;
  margin: 0 0 16px;
  font-size: var(--t-chapeau);
  line-height: 1.35;
  text-wrap: balance;
}

.action a {
  display: inline-block;
  padding: 6px 0;
  font-weight: 600;
  text-underline-offset: 0.25em;
}

.action a.bouton {
  padding: 14px 22px;
  
  border-radius: 4px;
  background: var(--ambre);
  color: var(--fond);
  line-height: 1.2;
  text-decoration: none;
}
.action a.bouton:hover,
.action a.bouton:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.action a.bouton:focus-visible {
  outline: 3px solid var(--texte);
  outline-offset: 3px;
}

.travail { padding: 0; list-style: none; }
.travail li {
  padding: 16px 0;
  border-top: 1px solid var(--filet);
  color: var(--attenue);
  font-size: var(--t-note);
  line-height: 1.6;
  text-wrap: pretty;
}
.travail li:first-child { padding-top: 0; border-top: 0; }
.travail strong {
  display: block;
  margin-bottom: 2px;
  color: var(--texte);
  font-size: var(--t-corps);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.travail-chute {
  margin-top: 20px;
  color: var(--texte);
  font-size: var(--t-note);
  line-height: 1.6;
  text-wrap: pretty;
}

.travail-chute + .chapeau-section { margin-top: 20px; }

.travail-chute + .action { margin-top: 20px; }

.contenu > :first-child { margin-top: 0; }
.contenu > p + .action { margin-top: 20px; }

.note-fait {
  margin: 0 0 24px;
  font-size: var(--t-etiquette);
  font-weight: 700;
  color: var(--attenue);
}

.chapeau-section {
  max-width: 52ch;
  margin-bottom: 40px;
  color: var(--attenue);
  font-size: var(--t-corps);
  line-height: 1.6;
  text-wrap: pretty;
}

.texte-legal { padding: 48px 0 56px; }
.texte-legal h1 { font-size: var(--t-section); letter-spacing: -0.01em; line-height: 1.25; }
.texte-legal h2 {
  margin: 40px 0 12px;
  font-size: var(--t-section);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.texte-legal h2:first-of-type { margin-top: 32px; }
.texte-legal h3 { margin: 24px 0 6px; font-size: var(--t-corps); font-weight: 600; }

.numero { color: var(--attenue); }
.texte-legal p,
.texte-legal li { margin-bottom: 16px; text-wrap: pretty; }
.texte-legal ul { padding-left: 20px; margin-bottom: 24px; }
.texte-legal dl { margin-bottom: 32px; }
.texte-legal dt { margin-top: 16px; font-weight: 600; }
.texte-legal dd { margin: 4px 0 0; color: var(--attenue); }

.citation {
  margin: 24px 0;
  padding: 16px 0 16px 20px;
  border-left: 2px solid var(--filet-fort);
}

.introuvable { padding: 96px 0 64px; }
.introuvable h1 { font-size: var(--t-section); letter-spacing: -0.01em; line-height: 1.25; }
.introuvable p { margin-bottom: 24px; max-width: 52ch; }

.introuvable .contenu > p:first-of-type { text-wrap: balance; }

.inventaire {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inventaire > li {
  padding: 24px 0;
  border-top: 1px solid var(--filet);
}

.inventaire-nom {
  margin: 0 0 6px;
  /* **Une seule forme pour le nom d'un produit** (direction artistique du 11/11/2026, CAMILLE 🌈,
     `task_4432`) : il était servi à 28 px / 400 sur l'accueil (`entree-nom`) et à 24 px / 600 ici.
     La valeur retenue est **28 px / 600** — l'accueil avait la bonne taille, cette page la bonne
     graisse. `--t-section` porte 28 px à 1 280 et suit le palier étroit. **Éprouvé avant la pose**
     (CAMILLE, sur la page servie aux deux largeurs) : les 6 noms font 2 lignes chacun avant comme
     après, et le débordement reste à 0 px. */
  font-size: var(--t-section);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.inventaire-phrase {
  max-width: 62ch;
  margin: 0 0 6px;
}

footer,
.colophon {
  padding: 40px 0 64px;
  border-top: 3px solid var(--texte);
}

.colophon .grille { align-items: baseline; }

.pied-liens { grid-column: 6 / span 7; font-size: var(--t-note); }

.pied-liens ul {
  display: flex;
  flex-wrap: wrap;
  
  justify-content: flex-end;
  gap: 4px 20px;
  padding: 0;
  list-style: none;
}
.pied-liens a { display: inline-block; padding: 4px 0; }

.pied-logotype {
  grid-column: 1 / span 5;
  grid-row: 1;
  margin: 0 0 12px;
  color: var(--ambre);
  font-size: 1rem;
  line-height: 1;
}

.pied-signature {
  grid-column: 1 / span 8;
  grid-row: 3;
  margin: 24px 0 0;
  color: var(--attenue);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: 1.5;
}

.pied-mention {
  grid-column: 1 / span 5;
  
  grid-row: 2;
  margin-top: 0;
  color: var(--attenue);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* La mention d'origine des textes. Aucune page de ce site ne la porte plus depuis le 31/10/2026 :
   Morph3us ne veut aucune ligne parlant d'IA au bas de ses pages, et la consigne d'Elena du 31/10 la
   retire. La règle reste en place parce que la classe a un autre porteur : le générateur des sites
   produits l'emploie (`systems/m3s/modules/usine/generateur.py`, `_bloc_mention_ia`). */
.mention-ia {
  grid-column: 1 / span 8;
  grid-row: 4;
  margin: 12px 0 0;
  color: var(--attenue);
  font-size: var(--t-etiquette);
  line-height: 1.5;
}

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

@media (max-width: 900px) {
  :root {
    --marge-page: 20px;
    
    --t-section: 1.75rem;
    --t-nom: 2.5rem;
  }

  
  .bande { min-height: 0; padding: 40px 0; }
  .ouverture { min-height: 0; }
  .titre-section,
  .tiers-droit { grid-column: 1 / -1; }

  .rail,
  .contenu,
  .pied-liens,
  .pied-mention,
  .pied-signature,
  .pied-logotype,
  .mention-ia,
  .marque,
  .entete > a:not(.marque) { grid-column: 1 / -1; }

  .bande.ouverture .contenu { grid-column: 1 / -1; }

  .rail { padding-top: 0; margin-bottom: 12px; }
  
  .pied-mention,
  .pied-signature,
  .pied-logotype,
  .mention-ia { grid-row: auto; }
  
  .pied-liens ul { justify-content: flex-start; }
  .entete > a:not(.marque) { justify-self: start; margin-top: 8px; grid-row: auto; }
  
  .entete > a:not(.marque) { grid-column: 7 / -1; justify-self: end; }
  
  .ouverture > .mesure, .ouverture > .action { grid-column: 1 / -1; }

  section { padding: 40px 0; }
  .ouverture { padding-top: 40px; }
}

@media (min-width: 901px) and (max-width: 1000px) {
  .rail { grid-column: 1 / span 3; }
  .contenu { grid-column: 4 / span 6; }
  .titre-section { grid-column: 4 / span 6; }
  .tiers-droit { grid-column: 10 / span 3; }
}

/* L'échelle étroite de la charte visuelle (§ 4.6) : T3 descend à 18 px sous 640 px. La fenêtre est
   celle que la charte déclare pour cette échelle, et non celle du bloc de 900 px ci-dessus, qui
   porte les valeurs d'autres niveaux et leur écart. */
@media (max-width: 640px) {
  :root { --t-sous-section: 1.125rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Direction artistique du 31/10/2026 (Camille 🌈, `MORPH3US_MARKETING/Branding/
   2026-10-31-direction-artistique-du-site-corporate.md`) : la première fenêtre comme unité,
   l'échelle typographique, la grille, le cadre de preuve et le mouvement. Appliquée par Maël le
   31/10/2026, à la demande d'Elena (`task_4938`). Ce bloc vient en fin de feuille et surcharge
   les règles d'avant, volontairement : c'est la dernière décision de forme qui gagne.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

:root {
  --t-surtitre: 0.8125rem;                       /* 13 px, capitales espacées */
  --t-ouverture: clamp(2.5rem, 7.5vw, 5.5rem);   /* 40 à 88 px : 88 px à 1 280, 40 px à 390 */
}

/* ── L'ouverture de l'accueil : une unité, quatre objets, et rien d'autre dedans ─────────────── */

.ouverture-accueil {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 5rem);
  padding: 56px 0 0;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid var(--filet);
}

.ouverture-accueil .ouverture-haut,
.ouverture-accueil .ouverture-bas,
.ouverture-accueil .cadre-preuve { position: relative; z-index: 1; }

.ouverture-accueil .ouverture-bas { margin-top: auto; padding-bottom: 40px; }

.sur-titre {
  margin: 0 0 24px;
  color: var(--attenue);
  font-size: var(--t-surtitre);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ouverture-accueil h1 {
  max-width: 24ch;
  margin: 0 auto;
  font-size: var(--t-ouverture);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
}

/* ── Le grand titre de la première fenêtre : les deux voix et la couleur qui vient ─────────────
   Direction artistique du 11/11/2026 (Camille 🌈, `task_6486`), sur la demande de Morph3us :
   « Le gros titre de notre site n'est pas assez coloré et animé, c'est beaucoup trop basique et
   classique et pas assez original. » Deux gestes, et chacun est mesuré :
   — la COMPOSITION : Inter est servie en police variable (100 à 900) depuis le 21/10, donc les
     deux graisses existaient déjà dans le fichier de la page et ne coûtent aucun octet ;
   — la COULEUR : le corps porte un dégradé de l'ambre vers le constat, borné à 135 % pour que sa
     dernière ligne n'atteigne jamais le vert plein — sans la borne, le mot perd son signalement.
   **Le départ du dégradé est l'ambre depuis le 11/11/2026** (décision du dirigeant : « Je préfère
   avec le orange dans le titre, ce sont les couleurs de notre entreprise. ») : il partait du blanc
   du texte. Le contraste est mesuré sur le fond réellement servi, halo compris : 9,13:1 à
   1 280 × 900, 7,72:1 à 390 × 844, et **6,84:1 au pire instant de la transition** (à 350 ms), tous
   au-dessus du seuil de 4,5:1 du grand texte ; 17,4:1 à l'impression. Détail complet :
   ADMINISTRATION/Infrastructure_Web/SITE-CORPORATE/2026-11-11-le-grand-titre-la-couleur-qui-vient-et-les-deux-voix.md
   **Ce qui précède** : la forme du 10/11 (`task_6359`, `task_6398`) — le corps en `--texte`, le mot
   en `--lime` plein, 12,44:1 au pire point —, puis la forme du 11/11 au départ blanc (12,78:1 au
   pire point, 12,3:1 au pire instant de la transition) ; leurs mesures restent dans l'historique.
   ─────────────────────────────────────────────────────────────────────────────────────────── */

/* `initial-value` porte la COULEUR FINALE, et non le blanc du texte : l'état de base est donc
   coloré sans animation. Avec le blanc, le corps du titre redevenait blanc dès que l'animation
   ne jouait pas. Défaut trouvé par JULES ♿, reproduit et mesuré par CAMILLE 🌈 (11/11/2026). */
@property --teinte-titre { syntax: "<color>"; inherits: false; initial-value: #b4e36a; }

.ouverture-accueil h1 {
  /* Le repli `var(--lime)` couvre le moteur qui ne connaît pas `@property` : sans lui la variable
     n'est définie nulle part, le dégradé devient `none`, et `color: transparent` rend le corps du
     titre invisible (mesuré : 3,76 % de pixels clairs contre 12,04 % en temps normal). */
  background-image: linear-gradient(180deg, var(--ambre) 0%, var(--teinte-titre, var(--lime)) 135%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: teinte-degrade 900ms ease-out 200ms both;
}

@keyframes teinte-degrade {
  from { --teinte-titre: var(--ambre); }
  to   { --teinte-titre: var(--lime); }
}

/* Les deux voix : le corps énonce, le mot affirme. **`display: block` et `allume` restent** — le
   mot se place sur sa propre ligne et s'allume en 700 ms après 350 ms (direction du 10/11,
   `task_6398`), et la direction du 11/11 les range dans « ce qui ne change pas » (`task_6486`).
   Le mot garde sa couleur pleine : il est le seul vert franc du titre. */
.ouverture-accueil h1 .titre-corps { font-weight: 300; }
.ouverture-accueil h1 .titre-mot {
  display: block;
  color: var(--lime);
  font-weight: 800;
  animation: allume 700ms ease-out 350ms both;
}

@keyframes allume {
  from { color: var(--texte); }
  to   { color: var(--lime); }
}

/* **SANS PORTEUR depuis le 11/11/2026.** Deux règles vivaient ici — `.phrase-ouverture` (la devise
   de la maison, sous le grand titre) et `.micro-promesse` (« Réponse écrite sous cinq jours
   ouvrés. ») — et elles sont parties avec leurs phrases : le dirigeant les a retirées de la
   vitrine le 11/11/2026, et le dépôt ne les sert plus nulle part (relevé du même jour,
   `task_6485`). La valeur `--t-phrase` de l'échelle les suivait et s'en va aussi. Elles se
   reposent ici si les phrases reviennent, et la charte visuelle (§ 4) garde leurs valeurs. */

.ouverture-accueil .action { margin: 0; }
.ouverture-accueil .action a.bouton { padding: 16px 28px; }

/* Le halo de fond : décoratif, CSS seul, aucune requête ni image, et il s'éteint avec la
   préférence de mouvement réduit (bloc plus bas). */
.halo {
  position: absolute;
  inset: -30% -10% auto;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 163, 61, 0.07), rgba(232, 163, 61, 0));
  animation: derive 24s ease-in-out infinite alternate;
}

@keyframes derive {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* ── Le cadre de preuve : ratio 16/10, largeur pleine, sous l'action, à cheval sur le pli ────── */

.cadre-preuve {
  width: min(100%, 1200px);
  margin: 48px auto 0;
}

/* Le visuel de preuve, dans sa forme révisée du 31/10/2026 (§ 3.4, commit `d468ba8d8d`) :
   largeur pleine du contenu, à son ratio, jamais recadré, et ni cadre, ni ombre, ni fond.

   **SANS PORTEUR depuis le 31/10/2026.** Elena a fait retirer le bloc de l'accueil, sur une raison
   de fond : le biffage est une fonctionnalité de MORPH3US-PDF, donc **un produit**, et `S6` dit
   qu'un produit va sur son sous-domaine, jamais sur la vitrine de l'entreprise. La place et sa
   forme restent écrites ici parce que la direction de Camille les décrit, et qu'elles se
   reposeront le jour où l'accueil aura **une pièce de l'entreprise** à montrer. */
.cadre-preuve img {
  display: block;
  width: 100%;
  height: auto;
}

.cadre-preuve figcaption {
  max-width: 62ch;
  margin: 12px auto 0;
  color: var(--attenue);
  font-size: 0.8125rem;   /* 13 px : la variante « Légende » de la charte (§ 4.4), « sous une capture » */
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: left;
}

/* ── Les liens : un lien de navigation ne se souligne pas, un lien du corps se souligne ──────── */

.entete a,
.pied-liens a { text-decoration: none; }

.entete a:hover,
.entete a:focus-visible,
.pied-liens a:hover,
.pied-liens a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }

/* ── Le mouvement : il sert la lecture, il ne décore pas ─────────────────────────────────────── */

.ouverture-accueil .ouverture-haut,
.ouverture-accueil .ouverture-bas { animation: entree 500ms ease-out both; }

/* L'entrée passe de 320 ms à 500 ms (direction artistique du 10/11/2026, `task_6359`). À 320 ms
   elle est finie avant que l'œil se pose sur le titre : c'est pourquoi le mouvement existait sans
   se voir. */

@keyframes entree {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

a, .bouton { transition: color 160ms ease, background-color 160ms ease, transform 160ms ease; }
a:hover { transform: translateY(-2px); }
.action a.bouton:hover { transform: translateY(-2px); }

html { scroll-behavior: smooth; }

/* L'apparition des sections au défilement, et son repli : sans `animation-timeline`, la règle
   n'est pas appliquée du tout et les sections s'affichent d'emblée. Le contenu ne dépend jamais
   du mouvement pour être lisible.

   **Ce repli est établi par la construction du `@supports`, et il n'est pas mesuré** (04/11/2026,
   `task_5545`) : le vérifier demanderait un navigateur sans cette fonctionnalité, et nous n'en
   avons pas sous la main (Firefox n'est pas installé pour l'outil de capture, et les options de
   Chromium essayées pour la désactiver n'ont rien désactivé). Ce qui est mesuré, c'est l'autre
   bout de la chaîne : à l'écran sans défilement l'opacité vaut 0, après défilement 1, en
   impression 1 et en mouvement réduit 1. */
@supports (animation-timeline: view()) {
  main > section:not(.ouverture-accueil) {
    animation: apparition 320ms ease-out both;
    animation-timeline: view();
    animation-range: entry 5% cover 35%;
  }
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Le mouvement réduit éteint tout, et c'est une exigence, pas une option (direction, § 3.5). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    /* Le délai fait partie du mouvement (direction artistique du 10/11/2026, `task_6359`). Sans
       cette ligne, la teinte du titre resterait en `--texte` pendant 350 ms pour qui a réglé son
       système en mouvement réduit, puis changerait d'un coup : c'est un clignotement, et c'est
       exactement ce que le mouvement réduit doit éviter. Défaut mesuré le 10/11/2026, corrigé,
       remesuré. */
    animation-delay: 0s !important;
  }
  .halo { display: none; }
  .apparait { opacity: 1; transform: none; }
  a:hover, .action a.bouton:hover { transform: none; }
  /* Les animations pilotées par le défilement (`animation-timeline: view()`) ne sont pas éteintes
     par `animation-duration` : leur horloge est la position de défilement, pas le temps. Sans cette
     règle, une section encore sous le pli resterait à l'opacité de départ pour qui demande le
     mouvement réduit, c'est-à-dire invisible (constaté et corrigé le 31/10/2026). */
  main > section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Les valeurs étroites de l'échelle (direction, § 3.2) ───────────────────────────────────── */

@media (max-width: 900px) {
  .ouverture-accueil {
    min-height: 0;
    padding: 40px 0 0;
  }
  .ouverture-accueil .ouverture-bas { margin-top: 32px; padding-bottom: 0; }
  .ouverture-accueil h1 { max-width: none; }
  .cadre-preuve figcaption { margin-left: 0; margin-right: 0; }
  .cadre-preuve { margin-top: 32px; }
}

@media (max-width: 640px) {
  :root { --t-section: 1.5rem; }
  /* La variante portrait est servie sous 640 px : elle a son propre ratio, et le réserver évite
     que la page saute quand l'image arrive. */
  .cadre-preuve img { aspect-ratio: 952 / 1360; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Les deux blocs de la page d'orientation (direction artistique du 31/10/2026, § 3.8, Camille 🌈).
   Posés par Maël le 31/10/2026 : le bloc des produits et le bloc des engagements, entre
   l'ouverture et le pied de page. Les mots sont de Chloé ✍️ (pièce du 31/10/2026, § 2 et § 3),
   la forme est au § 3.8, et les huit critères 11 à 18 s'y mesurent.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

.liste-produits,
.liste-engagements {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 24 px entre deux entrées d'une même liste, et rien au-dessus de la première (critère 17). Aucun
   filet : le § 3.8 n'en demande pas, et sans lui l'écart entre deux entrées se mesure exactement
   à 24 px, ce qui est la valeur écrite. */
.liste-produits > li + li,
.liste-engagements > li + li { margin-top: 24px; }

/* Le nom du produit : au titre de section (28 px à 1 280, 24 px à 390), en graisse de corps. Il se
   distingue du titre de son bloc, qui a la même taille, par la graisse (400 contre 600) et par
   l'espacement (24 px sous le titre du bloc, 0 sous le nom) : deux des trois axes du § 3.2. */
.entree-nom {
  margin: 0;
  font-size: var(--t-section);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.entree-nom a { font-weight: 400; }

/* La phrase courte du produit (direction artistique du 31/10/2026, § 3.8 : « une phrase de douze
   mots au plus en note ») : 14 px (`--t-note`, la note de la charte), encre atténuée, 4 px sous le
   nom. **La forme est à CAMILLE 🌈** : cette règle est ma proposition, à arrêter ou corriger ; les
   mots sont de CHLOÉ ✍️ et le contenu produit d'AURORE 📦 (`task_6491`).
   **SANS PORTEUR à sa pose** : aucune fiche ne porte encore de `phrase_accueil`, donc aucune ligne
   ne porte la classe. Le porteur vient avec les mots de CHLOÉ ✍️, et la règle est datée ici pour
   qu'un lecteur ne la prenne pas pour une règle morte. */
.entree-phrase {
  margin: 4px 0 0;
  color: var(--attenue);
  font-size: var(--t-note);
  line-height: 1.5;
}

/* Le numéro d'un engagement : l'étiquette de la maison (11 px, capitales espacées, encre
   atténuée). Il porte le chiffre, le titre porte l'acte, et la numérotation permet de citer
   l'engagement 03. */
.entree-numero {
  margin: 0 0 4px;
  color: var(--attenue);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.entree-titre {
  max-width: 62ch;
  margin: 0;
  font-size: var(--t-corps);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* Le renvoi qui suit une liste : « Nos produits et nos services », « Les six engagements ». Il ne
   fait pas partie de la liste, et il s'en détache de 32 px. */
.note-renvoi {
  margin: 32px 0 0;
  font-size: var(--t-note);
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   L'état d'une ligne d'inventaire (direction artistique du 08/11/2026, Camille 🌈, `task_6093`).
   Le lime n'avait aucun porteur : la charte le donne à « ce qui se constate » (§ 3.1), et le
   composant « ligne d'inventaire » est son seul porteur (§ 9). Les deux listes étant générées,
   l'état se pose par `outils/liste_produits.py`, dans la même source que le nom et l'adresse.
   Aucun aplat, aucun fond, aucun filet, aucune icône : le lime porte du texte, et rien d'autre.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

.etat-inventaire {
  margin: 4px 0 0;
  color: var(--lime);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* ── L'impression du site corporate ───────────────────────────────────────────────────────────────

   Direction de forme du 11/11/2026 (CAMILLE 🌈, `task_6377`). Registre papier de la charte
   visuelle, § 3.2 : monochrome, et l'accent y est interdit (§ 3.3). Les valeurs sont celles du
   § 3.2, elles ne sont pas choisies ici :

     --papier          #FFFFFF
     --encre           #1A1A1A   17,40:1 sur le papier
     --encre-attenuee  #5A5F68    6,42:1 sur le papier
     --filet           #767676    4,54:1 sur le papier

   Ce que la mesure a établi AVANT cette feuille (11/11/2026 à 04h06, `eprouver_impression.py`,
   fonds non imprimés — le cas par défaut) : le corps de page sort à **1,10:1** (`--texte` ivoire
   sur le papier blanc) et le texte atténué à **2,19:1**. Aucun texte de la page n'atteint 4,5:1.

   Et le rendu, regardé, montre deux défauts de mise en page que la couleur ne dit pas :

   1. la première fenêtre de l'accueil porte `min-height: calc(100svh - 5rem)` et `overflow: hidden`
      (ligne 583 de `styles.css`) : sur une page A4, cette hauteur ne veut plus rien dire et la
      boîte RETRANCHE son contenu — la micro-promesse sortait traversée par le filet de section.
      **L'élément cité n'existe plus (relevé du 11/11/2026 à 10h38)** : la devise et la
      micro-promesse ont été retirées de la vitrine le 11/11/2026 (`task_6485`), et la première
      fenêtre ne porte plus que le grand titre et le bouton. **Le défaut de retranchement, lui,
      reste** : il reviendrait avec n'importe quel contenu plus haut que la fenêtre, et c'est la
      règle `min-height: auto !important; overflow: visible !important` qui le répare ;
   2. les filets de section et du pied s'impriment dans la couleur du texte (`--texte` ivoire, et
      `border-top: 3px solid var(--texte)` au pied) : sans fond imprimé, ils disparaissent.

   La feuille est écrite pour que la page se lise sur du papier, pas pour reproduire l'écran. */

@media print {
  /* ── 1. Le registre papier ──────────────────────────────────────────────────────────────────────
     Tout le site tire ses couleurs des variables : les basculer ici passe la page entière en encre
     sans reprendre chaque composant un par un. C'est ce que les rôles nommés rendent possible. */
  :root {
    --fond: #ffffff;
    --surface: #f4f5f7;
    --texte: #1a1a1a;
    --attenue: #5a5f68;
    --filet: #767676;
    --filet-fort: #767676;
    /* L'accent n'existe pas sur une pièce (§ 3.3 : l'ambre mesure 2,16:1 sur le papier, le lime
       1,49:1). Ce qui se clique et ce qui se constate deviennent de l'encre, et c'est la mise en
       page qui les distingue — jamais la couleur seule (§ 3.1.b). */
    --ambre: #1a1a1a;
    --lime: #1a1a1a;
  }

  html,
  body {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  /* ── 2. La mise en page ne coupe rien ───────────────────────────────────────────────────────────
     Une première fenêtre est dimensionnée sur l'écran. Sur une page A4 sa hauteur ne veut plus rien
     dire, et `overflow: hidden` retranche ce qui dépasse : le contenu doit sortir en entier. */
  .ouverture-accueil,
  .bande,
  .ouverture {
    min-height: auto !important;
    overflow: visible !important;
  }

  /* ── 3. Ce qui ne s'imprime pas, et ce qui reste pour identifier la feuille ─────────────────────
     La navigation n'existe pas sur papier : le lien d'évitement ne sert qu'au clavier, les liens de
     pied ne se cliquent pas, et les deux liens de l'en-tête non plus. **Mais le logotype reste** :
     c'est l'identification de la marque, et une feuille détachée du site doit dire d'où elle vient.
     Le premier jet de cette feuille masquait l'en-tête entier — le PDF regardé le 11/11/2026 à 04h08
     sortait sans aucune marque en tête, et c'est ce que la correction répare. */
  .entete {
    padding: 0 0 12px !important;
    border-top: 0 !important;
    border-bottom: 1px solid #767676 !important;
  }

  .entete > a:not(.marque) {
    display: none !important;
  }

  .evitement,
  .pied-liens {
    display: none !important;
  }

  /* Une lumière de fond n'a rien à faire sur du papier, où les fonds ne s'impriment pas de toute
     façon. Et il débordait : `overflow: visible` sur `.ouverture-accueil`, nécessaire pour que la
     première fenêtre ne retranche plus son contenu sur A4, libère le halo posé en
     `inset: -30% -10% auto`. Mesuré en média print à 1 280 px : document 1 303 px, seul élément
     sorti `.halo` (+23 px). Masqué, le débordement tombe à 0 px. Direction artistique du
     11/11/2026 (CAMILLE 🌈), qui a diagnostiqué l'élément et arrêté la règle : masquer plutôt que
     remettre `overflow: hidden`, qui ramènerait le retranchement du contenu sur A4 — le défaut
     même que cette feuille répare. Le halo est déjà masqué en mouvement réduit, donc la forme
     existe et ne s'invente pas ici. */
  .halo {
    display: none !important;
  }

  /* Les entrées de lecture s'éteignent : le contenu ne dépend jamais du mouvement. */
  main > section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 32px 0 !important;
  }

  .ouverture-accueil {
    padding-bottom: 24px !important;
    text-align: left;
  }

  footer,
  .colophon {
    padding: 24px 0 !important;
  }

  /* ── 4. Les liens ───────────────────────────────────────────────────────────────────────────────
     Un lien imprimé ne se clique pas : le soulignement le désigne, et l'adresse est ce qui permet
     d'agir. Elle ne s'imprime que pour un lien SORTANT — les adresses internes du site sont
     redondantes avec leur texte et alourdiraient la page pour rien. */
  a {
    color: #1a1a1a !important;
    text-decoration: underline !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #5a5f68;
    word-break: break-all;
  }

  /* Un bouton ne se clique pas : il garde sa forme par un filet, et perd son aplat. */
  .action a.bouton {
    background: none !important;
    color: #1a1a1a !important;
    border: 1px solid #767676;
    padding: 6px 10px;
  }

  /* ── 5. Les images ──────────────────────────────────────────────────────────────────────────────
     Chromium imprime les images (seuls les FONDS CSS sont optionnels) : elles sortent, et ne
     doivent ni dépasser la colonne ni se couper entre deux pages. */
  img,
  svg {
    max-width: 100% !important;
    break-inside: avoid;
  }

  /* ── 6. Les filets, et ce qui porte encore une information ──────────────────────────────────────
     Sur papier, l'accent n'existe plus : l'état d'une ligne d'inventaire perd sa couleur, et c'est
     sa graisse qui le fait encore lire comme un état. Les filets reprennent une valeur visible
     (4,54:1), sans quoi les blocs n'ont plus de séparation du tout. */
  main > section {
    border-bottom: 1px solid #767676;
  }

  .travail li,
  .inventaire > li {
    border-top-color: #767676 !important;
  }

  footer,
  .colophon {
    border-top-color: #1a1a1a !important;
  }

  .etat-inventaire {
    font-weight: 600;
  }

  /* ── 7. Les coupures de page ────────────────────────────────────────────────────────────────────
     Un titre ne reste pas seul en bas de page, un bloc ne se coupe pas au milieu d'une phrase, et
     trois lignes au moins restent ensemble. */
  @page {
    margin: 14mm 15mm;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    break-inside: avoid;
  }

  p,
  li,
  figure,
  blockquote {
    orphans: 3;
    widows: 3;
    break-inside: avoid;
  }

  /* ── 8. Le grand titre : le dégradé s'efface, l'encre reste ─────────────────────────────────────
     Direction artistique du 11/11/2026 (CAMILLE 🌈, `task_6486`). `color: transparent` retire le
     titre du papier dès que le dégradé n'est pas peint. La bascule des variables ci-dessus suffit
     aujourd'hui (16,87:1, mesuré), mais cette règle-ci ne dépend pas d'elle, et c'est ce qui la
     rend utile. **`animation: none` est nécessaire sur le mot** : `@keyframes allume` porte
     `fill-mode: both`, donc l'animation TIENT la couleur du mot après sa fin et gagne sur la
     déclaration — sans cette ligne, le mot restait vert sur le papier (1,46:1, mesuré). Et la
     protection n'emploie pas `var(--texte)`, c'est-à-dire la variable même dont la valeur peut
     être fausse : le premier jet l'essayait, et rendait 1,07:1 (éprouvé). */
  .ouverture-accueil h1 {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #1a1a1a;
    animation: none;
  }
  .ouverture-accueil h1 .titre-mot { color: #1a1a1a; animation: none; }
}