/* =========================================================================
   SWISS PRO MOVING — base.css
   Remise à zéro sobre, corps de texte, titres, liens, listes.

   Se charge APRÈS tokens.css. Ce fichier ne redéfinit JAMAIS ce que
   tokens.css §4 « SOCLE MINIMAL » pose déjà : `body`, `.affiche`, `h1`, `h2`,
   `h3`, `.puce`, `.coupe-rabat`, `.pli`, `.chiffre`, `p/li { max-width }` et
   le bloc `prefers-reduced-motion` vivent là-bas et nulle part ailleurs.
   Une règle, un seul code : si une valeur vous paraît manquer ici, elle est
   dans tokens.css.

   Ce fichier n'écrit AUCUNE couleur en dur. Toute couleur est un `var(--…)`
   défini par tokens.css. Contrôle : `_outils/controle.py`.
   ========================================================================= */

/* ==================================================== 1. REMISE À ZÉRO === */

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

/* Les marges par défaut du navigateur ne sont d'aucune aide dans un système
   à échelle d'espacement. On les retire, on les repose à la main. */
h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre {
  margin: 0;
}

/* Les médias sont des blocs : un `inline` laisse un jour de 4 px sous l'image
   qu'on passe ensuite une heure à chercher. */
img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Une image de logo garde sa proportion et ne se laisse jamais étirer
   (FICHE-LOGO §6, interdit n° 6). */
img { object-fit: contain; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

/* Les champs n'héritent pas de la police du corps par défaut. */
button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Le système n'a pas d'ombre (fondations.md §3.6). Le jeton `--ombre` vaut
   `none` ; on l'applique ici pour que rien ne puisse en réintroduire une
   par un défaut de navigateur (bouton, fieldset, champ sous iOS). */
button, input, select, textarea, fieldset {
  box-shadow: var(--ombre);
  border-radius: var(--rayon);
}

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

/* Le texte se coupe proprement en français : pas de césure automatique, qui
   sur un nom de rue ou « monte-meubles » produit des coupes fausses. */
html { hyphens: none; }

/* ============================================== 2. CORPS DE TEXTE ======= */

/* `body` est posé par tokens.css §4. On ajoute ici ce qu'il ne porte pas. */
body {
  min-height: 100vh;
  text-wrap: pretty;
}

p + p { margin-top: var(--e16); }

strong, b { font-weight: var(--graisse-gras); }

/* L'italique existe, mais il ne remplace jamais une hiérarchie. */
em, i { font-style: italic; }

small {
  font-size: var(--t-petit);
  line-height: var(--interligne-petit);
}

/* Les mentions légales, unités et notes de bas de document. */
.spm-mention {
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--texte-faible);
  max-width: var(--mesure);
}

/* Chapeau d'entrée : une seule par page, jamais deux d'affilée. */
.spm-chapeau {
  font-size: var(--t-texte-large);
  line-height: 1.45;
  color: var(--texte-secondaire);
  max-width: var(--mesure-etroite);
  margin: 0 0 var(--e32);
}

::selection {
  background: var(--marque);
  color: var(--sur-marque);
}

/* ==================================================== 3. TITRES ========= */

/* `.affiche`, `h1`, `h2` (condensée noire 900) et `h3` (texte, 700) sont posés
   par tokens.css §4. Ici : les niveaux que tokens.css ne traite pas, et la
   règle des capitales.

   ⚠️ CAPITALES ACCENTUÉES. Quand un titre passe en capitales par CSS
   (`text-transform: uppercase`), le TEXTE SOURCE porte ses accents :
   on écrit « Contrôle », « État des lieux », « À partir de », « Où » — le
   navigateur rend « CONTRÔLE », « ÉTAT DES LIEUX », « À PARTIR DE », « OÙ ».
   Écrire « CONTROLE » dans la source est un défaut, pas un choix : le français
   de Suisse accentue ses capitales, et un lecteur d'écran lit le texte source.
   Vaut aussi quand aucun CSS n'intervient : É, È, À, Ô, Ç s'écrivent. */

h4 {
  font-family: var(--police-texte);
  font-weight: var(--graisse-gras);
  font-size: var(--t-texte-large);
  line-height: var(--interligne-h3);
  margin: 0 0 var(--e12);
}

h5, h6 {
  font-family: var(--police-texte);
  font-weight: var(--graisse-medium);
  font-size: var(--t-texte);
  line-height: var(--interligne-h3);
  margin: 0 0 var(--e8);
}

/* Capitales : liste close (fondations.md §2.5) — le logo, le camion et la
   tenue, les sigles réels (CHF, TVA, IDE, CHE-, PME), les plaques et numéros
   techniques d'un document. Jamais une étiquette au-dessus d'un titre. */
.spm-capitales {
  text-transform: uppercase;
  letter-spacing: var(--approche-capitales);
  font-weight: var(--graisse-gras);
  font-variant-numeric: lining-nums;
}

/* ===================================================== 4. LIENS ========= */

a {
  color: var(--marque-texte);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color var(--duree-instant) var(--entree);
}

a:hover { text-decoration-thickness: 2px; }

a:active { color: var(--marque-enfoncee); }

/* Un lien qui enveloppe une image ou un bloc ne se souligne pas. */
a:has(> img), a:has(> svg), a:has(> picture) { text-decoration: none; }

/* L'anneau de focus vient de tokens.css §4 (`:focus-visible`). Il n'a pas de
   teinte : noir sur clair, blanc sur sombre, doublé de `--focus-contre`. */

/* ===================================================== 5. LISTES ======== */

ul, ol { padding-left: var(--e24); }

li + li { margin-top: var(--e8); }

/* La liste à puces de marque. La puce elle-même est `.puce`, définie une
   seule fois, dans tokens.css §4 : un rabat en miniature de 12 × 8 px dont le
   coin haut-gauche est coupé à la pente d'ouverture 1 : 2.

   L'idiome est donc :
     <ul class="spm-liste">
       <li class="puce">Emballage des cartons fragiles</li>
       <li class="puce">Monte-meubles repéré avant le jour J</li>
     </ul>

   Une seule liste à puces de marque par page (langage-graphique.md §5.1) ;
   au-delà, liste neutre. Jamais de puce ronde, de coche ou de croix. */
.spm-liste {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--e24);
}

/* La mesure des `li` vient de tokens.css §4 (`p, li { max-width: --mesure }`) :
   on ne la repose pas ici. */

/* Liste de définitions : les métadonnées d'un document (numéro, date, validité)
   s'écrivent ainsi, jamais dans un tableau à deux colonnes. */
dl { margin: 0; }
dt { font-weight: var(--graisse-medium); color: var(--texte-secondaire); }
dd { margin: 0; }

/* =============================== 6. FILETS ET SÉPARATEURS ============== */

/* Trois épaisseurs, trois emplois, aucun quatrième (fondations.md §3.5 ;
   langage-graphique.md §5.2). `hr` prend le filet de séparation. */
hr {
  border: 0;
  border-top: var(--filet-epaisseur) solid var(--filet);
  margin: var(--e32) 0;
}

/* ============================ 7. MISE EN PAGE ÉLÉMENTAIRE ============== */

/* La coque : 1240 px, marges de page par palier (tokens.css, 3.3). */
.spm-coque {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

/* Le texte courant reste dans sa mesure quelle que soit la largeur de sa
   colonne : une colonne de 12 sur 12 ne donne pas des lignes de 140 signes. */
.spm-mesure { max-width: var(--mesure); }
.spm-mesure-etroite { max-width: var(--mesure-etroite); }

/* Rythme vertical d'une section. Une seule densité par page
   (langage-graphique.md §6.4). */
.spm-section { padding-block: var(--e80); }

@media (min-width: 768px) {
  .spm-section { padding-block: var(--e96); }
}

@media (min-width: 1080px) {
  .spm-section { padding-block: var(--e128); }
}

/* Alignement : à gauche, toujours (fondations.md §3.3). La seule exception
   déclarée est le chiffre isolé d'un récapitulatif, qui s'aligne à droite avec
   ses semblables — c'est `.nombre`, dans components.css. */

/* ======================= 8. LES DEUX PENTES, EN CLAIR ================== */

/* Le logo n'emploie que DEUX pentes, toutes deux de rapport entier
   (langage-graphique.md §1.1, mesurées par geometrie-rabats.py) :

     pente d'ouverture   1 : 2   26,565°   le plan du dessus du carton
     pente de pli        4 : 3   53,130°   les bords rabattus, le double

   Les angles sont déjà des jetons : `--pente-ouverture` et `--pente-pli`.
   Ce qui manquait, ce sont leurs RAPPORTS — la seule forme utilisable quand
   on construit un `clip-path`, où l'on raisonne en course et en montée et non
   en degrés. Les voici, nommés une fois pour toutes :

     course = montée × --pente-ouverture-rapport   →  1 : 2  (course double)
     course = montée × --pente-pli-rapport         →  4 : 3  (course aux 3/4)

   Toute diagonale du paquet se construit à partir de ces deux rapports, ou
   des jetons qui les portent déjà : `--coupe-rabat` (course = 2 × profondeur),
   `--pli-course` et `--pli-montee` (montée = course ÷ 2).
   15°, 30°, 45°, 60° et « à l'œil » sont des défauts, pas des variantes. */
:root {
  --pente-ouverture-rapport: 2;      /* 1 : 2 — course ÷ montée */
  --pente-pli-rapport: .75;          /* 4 : 3 — course ÷ montée */
}

/* ======================= 9. ACCESSIBILITÉ ============================== */

/* Visible pour un lecteur d'écran, invisible à l'œil. Sert aux légendes de
   tableau, aux noms de lien et aux intitulés de champ qu'un dessin porte
   déjà. Ne sert JAMAIS à cacher du texte pour le référencement. */
.spm-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : premier élément focusable de toute page complète. */
.spm-evitement {
  position: absolute;
  left: var(--e16);
  top: var(--e16);
  z-index: var(--z-bandeau);
  padding: var(--e12) var(--e16);
  background: var(--fond);
  color: var(--texte);
  border: var(--filet-epaisseur) solid var(--filet-fort);
  transform: translateY(-200%);
}

.spm-evitement:focus-visible { transform: none; }