/* Atelier SKU — feuille unique. Aucune dépendance, aucune police distante.
 *
 * Parti pris, et il découle du produit : nous vendons de la mesure vérifiable,
 * donc la page est une FICHE DE SPÉCIFICATIONS, pas un essai.
 *   — surface claire, un tableau de mesures se lit en clair ;
 *   — chasse fixe pour tout ce qui est un nombre, proportionnelle pour la prose ;
 *   — des tableaux réglés, pas des cartes ;
 *   — un tarif, pas une offre commerciale ;
 *   — une seule couleur fonctionnelle, jamais décorative.
 *
 * Interdits de cette feuille : intertitre en capitales espacées colorées,
 * citation à barre verticale, cartes jumelles, thème sombre.
 */

:root {
  color-scheme: light;

  --encre: #14181c;          /* 15,8:1 sur blanc */
  --encre-douce: #545c63;    /*  6,8:1 sur blanc */
  --feuille: #ffffff;
  --plan: #e9ebed;           /* hors-feuille */
  --creux: #f4f6f7;          /* fond de bloc */
  --trait: #d3d8dc;
  --trait-fort: #a8b0b6;
  --signal: #0b4c9b;         /*  8,2:1 sur blanc — liens, focus */
  --conforme: #0a6b3d;       /*  6,6:1 sur blanc — valeur mesurée conforme */
  --accent: var(--signal);   /* compatibilité : styles en ligne existants */
  --mesure: var(--conforme);

  --large: 72rem;
  --prose: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --chasse: "SF Mono", "IBM Plex Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

* { 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.05em 0.28em; }

pre {
  background: var(--creux);
  border: 1px solid var(--trait);
  padding: 0.8rem 0.9rem;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.5;
}
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: 1px; }

/* 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 feuille — */

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

main.enveloppe {
  background: var(--feuille);
  border-left: 1px solid var(--trait);
  border-right: 1px solid var(--trait);
  padding: 0.4rem 2rem 3rem;
  counter-reset: sec;
}
main.etroit { max-width: 50rem; }

/* — bandeau — */

header.bandeau {
  background: var(--feuille);
  border-bottom: 1px solid var(--encre);
  position: sticky;
  top: 0;
  z-index: 10;
}
.bandeau .enveloppe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.4rem;
  padding-block: 0.75rem;
}
.marque {
  font-family: var(--chasse);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
}
.marque span { color: var(--encre-douce); } /* texte, donc ≥ 4,5:1 — pas un filet */
.bandeau nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; font-size: 0.85rem; }
.bandeau nav a { color: var(--encre-douce); text-decoration: none; }
.bandeau nav a:hover { color: var(--encre); text-decoration: underline; }
.bandeau nav a[aria-current="page"] {
  color: var(--encre);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--encre);
}

/* — titres — */

h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 1.5rem 0 0.5rem;
}
h2 {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.28;
  margin: 2.6rem 0 0.7rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--encre);
}
h2::before {
  content: "§" counter(sec) "  ";
  counter-increment: sec;
  font-family: var(--chasse);
  font-size: 0.8em;
  font-weight: 400;
  color: var(--encre-douce);
}
h2.sansnum::before { content: none; }
h3 { font-size: 1rem; font-weight: 700; margin: 1.6rem 0 0.35rem; }

.chapeau {
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: 44rem;
  margin: 0 0 1.3rem;
}

/* Ligne d'identification du document. Remplace l'ancien intertitre en
   capitales espacées orange : gris, chasse fixe, sans traque. */
.fil {
  font-family: var(--chasse);
  font-size: 0.78rem;
  color: var(--encre-douce);
  margin: 1.5rem 0 0;
}

/* Énoncé : réglé en haut et en bas sur toute la largeur, sans barre verticale
   ni couleur. Le texte, lui, reste court — c'est la réserve à droite qui le
   raccourcit, pas un filet qui s'arrête au milieu de la page. */
.enonce {
  border-top: 2px solid var(--encre);
  border-bottom: 1px solid var(--trait);
  padding: 0.85rem 28% 0.9rem 0;
  margin: 1.8rem 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

.encadre {
  border: 1px solid var(--trait);
  background: var(--creux);
  padding: 0.95rem 1.1rem;
  margin: 1.6rem 0;
  font-size: 0.95rem;
}
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
blockquote.encadre { margin-left: 0; margin-right: 0; }

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

.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 1.4rem 0 1.6rem;
  border-top: 2px solid var(--encre);
  border-left: 1px solid var(--trait);
}
.specs > div {
  padding: 0.5rem 0.7rem 0.55rem;
  border-right: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.specs dt {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.specs dd { margin: 0.15rem 0 0; font-size: 0.98rem; font-weight: 600; }
.specs dd small { font-weight: 400; font-size: 0.78rem; color: var(--encre-douce); }
.specs.trio { grid-template-columns: repeat(3, 1fr); }

/* — tableaux : la colonne vertébrale de ce site — */

/* 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; }

/* Légende de tableau, sortie du conteneur à défilement pour rester lisible.
   Reliée au tableau par aria-labelledby : la sémantique de <caption> est
   conservée sans en subir la largeur. */
.legende, caption {
  text-align: left;
  color: var(--encre-douce);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.9rem 0 0.15rem;
  max-width: 52rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.9rem 0 1.2rem;
  font-size: 0.9rem;
  border-top: 2px solid var(--encre);
}
caption { padding-bottom: 0.45rem; margin: 0; }
th, td {
  border-bottom: 1px solid var(--trait);
  padding: 0.48rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
thead th {
  border-bottom: 1px solid var(--encre);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--encre);
  font-weight: 700;
  /* PAS de white-space: nowrap ici. Un intitulé de colonne est une phrase
     courte, pas une valeur : « NETTOYAGE ET ENRICHISSEMENT DE CATALOGUE »
     refusant de se couper imposait au tableau une largeur minimale
     supérieure à l'écran, et c'est la page entière qui partait de travers.
     Le nowrap est réservé aux valeurs réellement insécables — un montant,
     une mesure — via la classe `.nw` ci-dessous. */
}

/* Une valeur qu'on ne coupe pas : « 30,00 € / produit », « 110–160 ». */
.nw { white-space: nowrap; }
tbody th { font-weight: 700; }
tbody tr:last-child > * { border-bottom: 1px solid var(--encre); }
td.n, th.n { text-align: right; }
tbody tr:hover { background: var(--creux); }
table ul { padding-left: 1.05rem; margin: 0; }
table li { margin: 0.18rem 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: var(--creux);
  border-bottom: 1px solid var(--trait-fort);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

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

/* — tarif : un tarif, pas une offre — */

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

/* — matrice : ce que chaque palier contient — */

.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.78rem; }
.matrice td.non::before { content: "—"; color: var(--trait-fort); }

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

.jauge { white-space: nowrap; }
.barre {
  display: inline-block;
  width: 2.6rem;
  height: 0.52rem;
  background: var(--trait);
  vertical-align: baseline;
  margin-right: 0.4rem;
  position: relative;
}
.barre::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p);
  background: var(--conforme);
}

/* — boutons — */

.bouton, button.bouton {
  display: inline-block;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--feuille);
  padding: 0.58rem 1.05rem;
  font: 600 0.92rem/1.3 inherit;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.bouton:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.bouton.creux { background: transparent; color: var(--encre); }
.bouton.creux:hover { background: 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.7rem; margin: 1.5rem 0; }

/* — formulaire — */

form.commande { margin: 1.4rem 0 3rem; }
fieldset {
  border: 0;
  border-top: 2px solid var(--encre);
  padding: 0.9rem 0 0.4rem;
  margin: 2rem 0 0;
}
legend {
  font-family: var(--chasse);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--encre);
  padding-right: 0.7rem;
}
.champ { margin: 1rem 0; }
.champ label { display: block; font-weight: 600; font-size: 0.94rem; margin-bottom: 0.15rem; }
.champ .aide { display: block; color: var(--encre-douce); font-size: 0.85rem; margin-bottom: 0.35rem; 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);
  background: var(--feuille);
  padding: 0.5rem 0.6rem;
  font: 400 0.98rem/1.5 inherit;
  color: var(--encre);
}
.champ input[type="number"], .champ input[type="url"] { font-family: var(--chasse); }
.champ textarea { min-height: 6rem; 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.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cases label { display: flex; gap: 0.55rem; align-items: baseline; font-weight: 400; margin: 0.4rem 0; }
.cases input { margin: 0; flex: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

/* — listes de fichiers — */

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

/* — pied — */

footer.pied {
  padding: 1.6rem 0 3rem;
  font-size: 0.85rem;
  color: var(--encre-douce);
}
footer.pied .enveloppe { border-top: 1px solid var(--trait-fort); padding-top: 1.1rem; }
footer.pied nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.15rem; margin-bottom: 0.6rem; }
footer.pied a { color: var(--encre-douce); }

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

/* — étroit — */

@media (max-width: 60rem) {
  .enonce { padding-right: 0; }
  .specs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 46rem) {
  main.enveloppe { padding: 0.4rem 1.1rem 2.4rem; }
  table { font-size: 0.86rem; }
  th, td { padding: 0.42rem 0.4rem; }
  h1 { margin-top: 1.1rem; }

  /* 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.5rem; }
  .empilable tbody th { border: 0; padding: 0.7rem 0 0.2rem; font-size: 0.95rem; }
  .empilable td { border: 0; padding: 0.15rem 0 0.4rem; }
  /* une cellule dont l'intitulé est déjà porté par le th de ligne n'a pas
     de data-col : pas de ligne vide au-dessus d'elle. */
  .empilable td:not([data-col])::before { content: none; }
  .empilable td[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--encre-douce);
    margin-bottom: 0.15rem;
  }
}

@media print {
  body { background: #fff; }
  main.enveloppe { border: 0; }
  header.bandeau { position: static; }
}