/* Atelier SKU — feuille unique. Aucune dépendance, aucune police distante.
 *
 * TROISIÈME PARTI PRIS (3 août 2026). Les deux premiers étaient des métaphores —
 * « un essai », puis « une fiche de spécifications » — et la métaphore a mangé la
 * page : verdict de l'opérateur, « on dirait un document dégueulasse ». Il avait
 * raison. Une page de vente doit donner envie d'être lue.
 *
 * Ce parti pris n'est plus une métaphore, c'est une mesure. J'ai capturé six pages
 * de vente données en référence (attio.com, rulebase.co, lassie.ai, framer.com,
 * rezi.ai, meetsponsors.com) et relevé ce qu'elles ont en commun :
 *
 *              titre h1     corps    <table>   images
 *   attio        74,7 px    16 px      0        344
 *   lassie       86,5 px     —         0         39
 *   rulebase     60,0 px    16 px      0        125
 *   rezi         55,5 px  17,6 px      0        352
 *   framer       54,0 px     —         0        102
 *   sponsors     48,0 px    16 px      0        223
 *   ————————————————————————————————————————————————————
 *   ici, AVANT   34,4 px    16 px      5          0
 *
 * Donc trois règles, et elles sont chiffrées :
 *   1. le titre d'accueil pèse ~75 px, pas 34 ;
 *   2. au-dessus de la ligne de flottaison : un titre, une ligne, un bouton, RIEN
 *      d'autre — c'est le vide qui donne la valeur ;
 *   3. une image, grande. La mienne n'est pas une photo d'agence, ce serait faux :
 *      c'est mon rapport de conformité, présenté comme Attio présente sa capture.
 *
 * Ce qui séparait les sections — filets, §n, bordures de feuille — est remplacé
 * par de l'espace. Corps de texte 17 px / 1,65. Plus un seul intitulé en capitales
 * à 0,72 rem : ils étaient illisibles.
 *
 * Interdits de cette feuille : capitales espacées colorées, citation à barre
 * verticale, cartes jumelles, thème sombre, photo de personne.
 */

:root {
  color-scheme: light;

  --encre: #16181b;          /* 15,4:1 sur la feuille */
  --encre-douce: #5c6169;    /*  5,7:1 sur le plan */
  --feuille: #ffffff;
  --plan: #f7f5f2;           /* fond de page, chaud — comme les références */
  --creux: #f0eeea;          /* fond de bloc */
  --trait: #e2ded7;
  --trait-fort: #b6b0a6;
  --signal: #0b4c9b;         /*  7,7:1 — liens, focus */
  --conforme: #0a6b3d;       /*  6,1:1 — valeur mesurée conforme */
  --accent: var(--signal);   /* compatibilité : styles en ligne existants */
  --mesure: var(--conforme);

  --large: 74rem;
  --prose: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --chasse: "SF Mono", "IBM Plex Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --ombre: 0 32px 64px -28px rgba(22, 26, 32, 0.34), 0 4px 12px -4px rgba(22, 26, 32, 0.06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plan);
  color: var(--encre);
  font: var(--prose);
}

.mono, code, kbd, pre, .mesure, td.n, th.n, .specs dd, .tarif .prix {
  font-family: var(--chasse);
  font-variant-numeric: tabular-nums;
}

code { font-size: 0.9em; background: var(--creux); padding: 0.08em 0.32em; border-radius: 3px; }

pre {
  background: var(--creux);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: inherit; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--encre); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 2px; }

/* Texte réservé aux lecteurs d'écran. `left: 0` n'est pas cosmétique : sans
   lui, la boîte se cale sur sa position statique — au fond d'un tableau qui
   défile, donc à 347 px sur un écran de 320 — et, échappant au conteneur à
   défilement, elle pousse le document entier vers la droite. Mesuré, pas
   supposé : masquer ces spans ramenait scrollWidth de 347 à 320. */
.vh {
  position: absolute; left: 0; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* — la page — */

.enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 1.5rem; }

/* Plus de « feuille » : ni fond blanc, ni bordures latérales. C'étaient les deux
   signaux les plus forts de « ceci est un document », et aucune des six
   références n'en a. C'est la marge qui tient la colonne, pas un trait. */
main.enveloppe { padding: 2.5rem 1.5rem 5rem; }
main.etroit { max-width: 52rem; }
/* Une page de second rang — tarif détaillé, mentions légales, formulaire — n'a
   pas besoin d'un titre de 75 px : elle est déjà lue par quelqu'un qui a choisi
   d'y aller. Le titre énorme est un outil d'accueil, pas un tic. */
main.etroit h1 { font-size: clamp(2rem, 4vw, 3.1rem); }

/* — bandeau — */

header.bandeau {
  background: color-mix(in srgb, var(--plan) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.bandeau .enveloppe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  padding-block: 1.05rem;
}
.marque {
  font-family: var(--chasse);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
}
.marque span { color: var(--encre-douce); }
.bandeau nav { display: flex; flex-wrap: wrap; gap: 0 1.3rem; font-size: 0.95rem; }
.bandeau nav a { color: var(--encre-douce); text-decoration: none; }
.bandeau nav a:hover { color: var(--encre); }
.bandeau nav a[aria-current="page"] { color: var(--encre); font-weight: 600; }

/* — titres — */

/* 75 px à 1440, 38 px à 390. La moyenne des six références est de 63 px ;
   attio est à 74,7 et lassie à 86,5. Une seule phrase, un point final. */
h1 {
  font-size: clamp(1.85rem, 5.6vw, 4.7rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

/* Plus de filet au-dessus, plus de numéro de paragraphe : c'est l'espace qui
   sépare. 5,5 rem au-dessus d'un h2, c'est délibéré et ça doit le rester. */
h2 {
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 5.5rem 0 1.4rem;
  max-width: 26em;
  text-wrap: balance;
}
h3 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 2.6rem 0 0.6rem;
}

p { max-width: 40em; }

.chapeau {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--encre-douce);
  max-width: 34em;
  margin: 0 0 2.2rem;
  text-wrap: pretty;
}

/* Ligne d'identification, discrète : une seule au-dessus du titre. */
.fil {
  font-size: 0.98rem;
  color: var(--encre-douce);
  margin: 0 0 1.5rem;
}

/* — la hauteur d'écran d'accueil : titre, une ligne, un bouton. Rien d'autre. — */

.hero { padding: 5.5rem 0 0; text-align: center; }
.hero .chapeau { margin-left: auto; margin-right: auto; }
.hero .actions { justify-content: center; margin: 0 0 6rem; }
.hero h1 { max-width: 15em; margin-left: auto; margin-right: auto; }

/* — la capture : mon rapport de conformité, présenté comme un produit — */

.capture {
  margin: 0 0 2rem;
  background: var(--feuille);
  border: 1px solid var(--trait);
  border-radius: 14px;
  box-shadow: var(--ombre);
  overflow: hidden;
  position: relative;
}
/* Halo diffus derrière la capture — ni image, ni décor : de la lumière.
   La largeur est bornée à 100 % et pas à 118 % : débordant de sa colonne, il
   poussait le document à TOUTES les largeurs — 1 062 px pour une fenêtre de
   1 024. Un élément décoratif qui fait défiler la page est un défaut, même
   invisible. Mesuré par mesure-largeur.mjs, qui l'a attrapé. */
.scene { position: relative; }
.scene::before {
  content: "";
  position: absolute;
  left: 50%; top: -22%;
  width: 100%; height: 105%;
  transform: translateX(-50%);
  background:
    radial-gradient(52% 46% at 50% 26%, rgba(11, 76, 155, 0.18), transparent 68%),
    radial-gradient(38% 36% at 20% 44%, rgba(10, 107, 61, 0.11), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.capture-barre {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 1rem;
  background: var(--creux);
  border-bottom: 1px solid var(--trait);
}
.pastilles { display: flex; gap: 0.38rem; flex: none; }
.pastilles i { width: 10px; height: 10px; border-radius: 50%; background: var(--trait-fort); opacity: 0.55; }
.capture-nom {
  font-size: 0.86rem;
  color: var(--encre-douce);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Sans min-width:0, un enfant flex refuse de rétrécir sous la taille de son
     contenu : l'ellipse ne se déclenche jamais et la barre pousse la page
     entière. C'est ce qui faisait déborder le site sous 430 px. */
  min-width: 0;
}
.capture-corps { padding: 1.5rem 1.6rem 0.4rem; }
.capture-corps > .defile { margin: 0; }
.capture-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.4rem;
  padding: 0.9rem 1.6rem 1.1rem;
  font-size: 0.95rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--trait);
  margin-top: 0.4rem;
}
.capture-pied b { color: var(--conforme); font-weight: 700; }
.capture-pied .puce { color: var(--conforme); }
.sous-capture {
  color: var(--encre-douce);
  font-size: 0.98rem;
  max-width: 46em;
  margin: 0 auto 1rem;
  text-align: center;
}

/* Le rapport lui-même : c'est un tableau, et ce sera toujours un tableau — les
   données sont tabulaires et un lecteur d'écran doit les lire comme telles.
   Ce qu'on change, c'est qu'il ne ressemble plus au reste de la page : pas de
   filet noir en tête, des chiffres qui respirent, des jauges plus hautes. */
.rapport { border-top: 0; margin: 0; font-size: 1rem; }
.rapport thead th {
  border-bottom: 1px solid var(--trait);
  padding-bottom: 0.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--encre-douce);
  text-transform: none;
  letter-spacing: 0;
}
.rapport thead th .limite { display: block; font-family: var(--chasse); font-size: 0.82rem; opacity: 0.85; }
.rapport tbody th { font-weight: 400; font-family: var(--chasse); font-size: 0.86rem; }
.rapport th, .rapport td { padding: 0.85rem 0.7rem; vertical-align: middle; border-bottom: 1px solid var(--trait); }
.rapport th:first-child, .rapport td:first-child { padding-left: 0; }
.rapport tbody tr:last-child > * { border-bottom: 0; }
.rapport tbody tr:hover { background: transparent; }
.rapport .valeur { font-family: var(--chasse); font-weight: 700; font-size: 1.05rem; }

/* — sections aérées — */

.section { margin: 0; }
.large-texte { font-size: 1.15rem; line-height: 1.62; max-width: 37em; }

/* Une liste de premier niveau se lit comme de la prose : même mesure de ligne.
   Sans cette borne, « Ce que nous ne faisons pas » courait sur 1 130 px, soit
   plus de 110 signes par ligne — l'œil perd le début de la ligne suivante. */
main.enveloppe > ul, main.enveloppe > ol:not(.etapes) { max-width: 42em; }
main.enveloppe > ul > li, main.enveloppe > ol > li { margin: 0.5rem 0; }

/* Un fait mis en avant, sans encadré ni filet vertical. */
.enonce {
  font-size: clamp(1.2rem, 2.3vw, 1.85rem);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.016em;
  max-width: 22em;
  margin: 6rem 0;
  text-wrap: pretty;
}
.enonce strong { font-weight: 700; }

.encadre {
  border: 1px solid var(--trait);
  background: var(--feuille);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
  font-size: 1rem;
}
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
blockquote.encadre { margin-left: 0; margin-right: 0; }

/* — deux prestations, côte à côte, sans tableau — */

.colonnes {
  display: grid;
  gap: 3rem 3.5rem;
  /* `min(20rem, 100%)` et pas `20rem` : sur un écran de 320 px la colonne libre
     ne peut pas être plus large que son parent, sinon la grille impose 320 px
     de largeur minimale et la page entière part de travers. Mesuré : 339 > 320. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  margin: 2.5rem 0 0;
}
.colonnes > * > :first-child { margin-top: 0; }
.colonnes h3 { font-size: 1.45rem; }
.colonnes .depart {
  font-size: 1.02rem;
  color: var(--encre-douce);
  margin: 0 0 1.2rem;
}
.colonnes .depart b {
  color: var(--encre);
  font-family: var(--chasse);
  font-size: 1.3rem;
  margin-right: 0.15rem;
}
.colonnes ul { padding-left: 1.15rem; margin: 0 0 1.3rem; }
.colonnes li { margin: 0.5rem 0; max-width: 34em; }

/* — étapes numérotées, sans tableau — */

.etapes {
  display: grid;
  gap: 2.6rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.etapes li { max-width: 24em; }
.etapes li::before {
  counter-increment: etape;
  content: counter(etape);
  display: block;
  font-family: var(--chasse);
  font-size: 1.6rem;
  font-weight: 700;
  /* 3,4:1 sur le plan — au-dessus du seuil de 3:1 des grands caractères.
     --trait-fort n'était qu'à 2,2:1 : un filet peut l'être, un chiffre non. */
  color: #8a8378;
  line-height: 1;
  margin-bottom: 0.7rem;
}
.etapes strong { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; }
.etapes p { margin: 0; color: var(--encre-douce); font-size: 1rem; }

/* — bloc d'identification : les caractéristiques de la prestation — */

.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 2.5rem;
  margin: 3rem 0;
}
.specs > div { padding: 0; }
.specs dt {
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre-douce);
}
.specs dd { margin: 0.3rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.specs dd small { font-weight: 400; font-size: 0.95rem; color: var(--encre-douce); }
.specs.trio { grid-template-columns: repeat(3, 1fr); }

/* — tableaux — */

/* RÈGLE DE LARGEUR, et elle n'a pas d'exception :
 * un contenu plus large que l'écran défile DANS SON PROPRE conteneur,
 * il ne fait jamais défiler la page. Donc tout tableau est soit `.empilable`
 * (il se déplie en blocs sous 46rem), soit enveloppé dans `.defile`.
 * Et rien de rédigé n'entre dans un `.defile` : une légende de tableau se
 * place au-dessus, en `.legende`, où elle se replie à la largeur de l'écran.
 * Vérifié par `outils/mesure-largeur.mjs`, pas à l'œil. */
.defile { overflow-x: auto; max-width: 100%; container-type: inline-size; }

.legende, caption {
  text-align: left;
  color: var(--encre-douce);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 1.4rem 0 0.4rem;
  max-width: 46em;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0 1.4rem;
  font-size: 1rem;
  border-top: 1px solid var(--encre);
}
caption { padding-bottom: 0.5rem; margin: 0; }
th, td {
  border-bottom: 1px solid var(--trait);
  padding: 0.75rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
th:first-child, td:first-child { padding-left: 0; }

/* Les intitulés de colonne étaient en capitales espacées à 0,72 rem : illisibles.
   Casse normale, 0,95 rem, gris. Toujours PAS de white-space: nowrap ici — un
   intitulé rédigé qui refuse de se couper impose au tableau une largeur
   minimale supérieure à l'écran, et c'est la page entière qui part de travers.
   Le nowrap est réservé aux valeurs insécables, via `.nw`. */
thead th {
  border-bottom: 1px solid var(--encre);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre-douce);
  font-weight: 600;
}

.nw { white-space: nowrap; }
tbody th { font-weight: 700; }
tbody tr:last-child > * { border-bottom: 1px solid var(--trait); }
td.n, th.n { text-align: right; }
tbody tr:hover { background: rgba(22, 24, 27, 0.022); }
table ul { padding-left: 1.1rem; margin: 0; }
table li { margin: 0.25rem 0; }

/* Intitulé de groupe : il court sur toute la largeur du tableau, donc plus
   large que l'écran. On l'épingle à gauche et on le replie sur la largeur
   VISIBLE du conteneur (100cqi), sinon il sort du cadre sans jamais revenir. */
tr.groupe > * { position: sticky; left: 0; }
tr.groupe > * > span.libelle { display: inline-block; max-width: 100cqi; }
tr.groupe > * {
  background: transparent;
  border-bottom: 1px solid var(--trait-fort);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: none;
  padding-top: 2rem;
}

.mesure { color: var(--conforme); font-weight: 700; }

/* — tarif — */

.tarif .prix { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.tarif td a { white-space: nowrap; }
.tarif tbody th { font-size: 1.05rem; }

/* — matrice — */

.matrice th[scope="row"] { font-weight: 400; }
.matrice thead th.n, .matrice td.n { text-align: center; }
.matrice td.oui, .matrice td.non { text-align: center; }
.matrice td.oui::before { content: "●"; font-size: 0.82rem; }
.matrice td.non::before { content: "—"; color: var(--trait-fort); }

/* — jauges : une valeur mesurée, face à sa limite — */

.jauge { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.55rem; }
.barre {
  display: inline-block;
  width: 3.4rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--trait);
  flex: none;
  position: relative;
  overflow: hidden;
}
.barre::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p);
  border-radius: 999px;
  background: var(--conforme);
}
.jauge .limite { color: var(--encre-douce); font-family: var(--chasse); font-size: 0.85rem; }

/* — boutons — */

.bouton, button.bouton {
  display: inline-block;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--feuille);
  padding: 0.82rem 1.5rem;
  border-radius: 999px;
  font: 600 1.02rem/1.3 inherit;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bouton:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.bouton.creux { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.bouton.creux:hover { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
.bouton.pleine { display: block; width: 100%; }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2rem 0; }

/* Rappel d'action en fin de page : du vide, un titre, un bouton. */
.rappel { text-align: center; margin: 7rem 0 2rem; }
.rappel h2 { margin-left: auto; margin-right: auto; }
.rappel .chapeau { margin-left: auto; margin-right: auto; }
.rappel .actions { justify-content: center; }

/* — formulaire — */

form.commande { margin: 1.6rem 0 3rem; }
fieldset {
  border: 0;
  border-top: 1px solid var(--encre);
  padding: 1.1rem 0 0.4rem;
  margin: 2.6rem 0 0;
}
legend {
  font-size: 1rem;
  font-weight: 700;
  color: var(--encre);
  padding-right: 0.7rem;
}
.champ { margin: 1.3rem 0; }
.champ label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; }
.champ .aide { display: block; color: var(--encre-douce); font-size: 0.94rem; margin-bottom: 0.4rem; font-weight: 400; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="url"],
.champ input[type="number"], .champ select, .champ textarea {
  width: 100%;
  border: 1px solid var(--trait-fort);
  border-radius: 8px;
  background: var(--feuille);
  padding: 0.65rem 0.75rem;
  font: 400 1.02rem/1.5 inherit;
  color: var(--encre);
}
.champ input[type="number"], .champ input[type="url"] { font-family: var(--chasse); }
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--signal);
  outline-offset: -1px;
}
.champ.requis label::after { content: " *"; color: var(--signal); }
.duo { display: grid; gap: 0 1.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cases label { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 400; margin: 0.5rem 0; }
.cases input { margin: 0; flex: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.total {
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--encre);
  padding: 1rem 0;
  margin: 2rem 0 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
}
.total .montant { font-size: 2rem; font-weight: 700; margin-left: auto; letter-spacing: -0.025em; }
.message {
  padding: 0.85rem 1rem;
  margin: 1.2rem 0;
  border: 1px solid var(--signal);
  border-radius: 8px;
  background: #eef3fa;
  color: var(--encre);
}
.message:empty { display: none; }

/* — listes de fichiers — */

.liste-fichiers { list-style: none; padding: 0; border-top: 1px solid var(--encre); }
.liste-fichiers li {
  border-bottom: 1px solid var(--trait);
  padding: 0.7rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  font-size: 1rem;
}
.liste-fichiers a { font-family: var(--chasse); font-size: 0.95rem; }
.liste-fichiers .poids { color: var(--encre-douce); font-size: 0.9rem; margin-left: auto; }

/* — pied — */

footer.pied {
  padding: 3rem 0 4rem;
  font-size: 0.95rem;
  color: var(--encre-douce);
}
footer.pied .enveloppe { border-top: 1px solid var(--trait); padding-top: 1.4rem; }
footer.pied nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin-bottom: 0.8rem; }
footer.pied a { color: var(--encre-douce); }

hr { border: 0; border-top: 1px solid var(--trait); margin: 3rem 0; }

/* — étroit — */

@media (max-width: 60rem) {
  /* `.specs.trio` (0,2,0) l'emportait sur `.specs` (0,1,0) : la page /catalogue
     restait à trois colonnes jusqu'à 320 px, où « Volume max. » — 70 px
     insécables — ne rentrait plus dans les 67 px disponibles. 397 > 320. */
  .specs, .specs.trio { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.4rem; }
  .hero { padding-top: 3.5rem; }
  .hero .actions { margin-bottom: 4rem; }
}

@media (max-width: 46rem) {
  :root { --prose: 400 17px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif; }
  main.enveloppe { padding: 0 1.2rem 3.5rem; }
  .enveloppe { padding: 0 1.2rem; }
  h2 { margin-top: 4rem; }
  .enonce { margin: 4rem 0; }
  .rappel { margin-top: 5rem; }
  th, td { padding: 0.6rem 0.5rem; }
  .capture-corps { padding: 1rem 1rem 0.2rem; }
  .capture-pied { padding: 0.8rem 1rem 1rem; font-size: 0.9rem; }
  .capture { border-radius: 12px; }

  /* Un tableau de comparaison à deux colonnes ne tient pas : on l'empile,
     chaque cellule reprenant le nom de sa colonne. */
  .empilable, .empilable tbody, .empilable tr, .empilable td, .empilable th { display: block; width: auto; }
  .empilable caption { display: block; }
  .empilable thead { display: none; }
  .empilable tr { border-bottom: 1px solid var(--encre); padding-bottom: 0.7rem; }
  .empilable tbody th { border: 0; padding: 1rem 0 0.3rem; font-size: 1.05rem; }
  .empilable td { border: 0; padding: 0.2rem 0 0.5rem; }
  .empilable td:not([data-col])::before { content: none; }
  .empilable td[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--encre-douce);
    margin-bottom: 0.25rem;
  }

  /* LE TARIF SUR TÉLÉPHONE — c'était le défaut commercial le plus cher du site :
     à 390 px, 3 colonnes sur 6 restaient hors de l'écran, dont le lien
     « Commander ». Le tableau glissait bien latéralement, mais rien ne
     l'indiquait : un acheteur mobile ne pouvait pas deviner que le bouton
     d'achat existait. Ici chaque palier devient un bloc et le bouton prend
     toute la largeur. Corrige aussi /fiches-produit et /catalogue, qui ont la
     même structure à six colonnes. */
  .tarif, .tarif tbody, .tarif tr { display: block; }
  .tarif thead { display: none; }
  .tarif { border-top: 0; }
  .tarif tr.groupe > * {
    display: block; position: static;
    border-bottom: 0; padding: 2.2rem 0 0.2rem;
    font-size: 1.15rem;
  }
  .tarif tbody tr:not(.groupe) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.15rem 1rem;
    padding: 1.1rem 0 1.2rem;
    border-bottom: 1px solid var(--trait);
  }
  .tarif tbody tr:not(.groupe) > * { border: 0; padding: 0; display: block; }
  .tarif tbody tr:not(.groupe) > :nth-child(1) { grid-area: 1 / 1; font-size: 1.15rem; font-weight: 700; }
  .tarif tbody tr:not(.groupe) > :nth-child(3) { grid-area: 1 / 2; text-align: right; }
  .tarif tbody tr:not(.groupe) > :nth-child(2) { grid-area: 2 / 1; color: var(--encre-douce); font-size: 0.95rem; }
  .tarif tbody tr:not(.groupe) > :nth-child(4) { grid-area: 2 / 2; text-align: right; color: var(--encre-douce); font-size: 0.9rem; }
  .tarif tbody tr:not(.groupe) > :nth-child(5) { grid-area: 3 / 1 / auto / span 2; color: var(--encre-douce); font-size: 0.9rem; text-align: left; }
  .tarif tbody tr:not(.groupe) > :nth-child(5)::before { content: "Délai "; font-family: inherit; }
  .tarif tbody tr:not(.groupe) > :nth-child(6) { grid-area: 4 / 1 / auto / span 2; margin-top: 0.9rem; }
  .tarif tbody tr:not(.groupe) > :nth-child(6) a {
    display: block; text-align: center; text-decoration: none;
    border: 1px solid var(--encre); background: var(--encre); color: var(--feuille);
    border-radius: 999px; padding: 0.7rem 1rem; font-weight: 600; white-space: nowrap;
  }

  /* Le rapport de conformité tient sur un téléphone sans défiler : chaque
     produit devient un bloc, chaque contrôle une ligne « valeur / limite ». */
  .rapport, .rapport tbody, .rapport tr, .rapport td, .rapport th { display: block; width: auto; }
  .rapport thead { display: none; }
  .rapport tbody tr { padding: 0.9rem 0; border-bottom: 1px solid var(--trait); }
  .rapport tbody tr:last-child { border-bottom: 0; }
  .rapport tbody th { padding: 0 0 0.6rem; border: 0; font-size: 0.82rem; word-break: break-all; }
  .rapport tbody td { border: 0; padding: 0.22rem 0; display: flex; align-items: center; gap: 0.6rem; }
  .rapport tbody td::before {
    content: attr(data-col);
    color: var(--encre-douce);
    font-size: 0.92rem;
    flex: none;
    width: 6.4rem;
  }
  .rapport tbody td.n { text-align: left; }
  .rapport .jauge { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  body { background: #fff; }
  header.bandeau { position: static; backdrop-filter: none; }
  .capture { box-shadow: none; }
  .scene::before { display: none; }
}