/* ============================================================================
   DEVISALY — COUCHE 2 : LES PRIMITIVES
   ----------------------------------------------------------------------------
   Réinitialisation, texte courant, titres, liens, boutons, cartes, conteneur,
   rythme vertical. Rien ici ne dessine un gabarit : ces règles valent pour tout
   le site et ne dépendent d'aucune page.

   ⚠️ REFONTE VISUELLE (étape 7). Cette feuille a été réécrite : elle empilait
   quatre générations de surcharges (deux `box-sizing`, trois `body`, quatre
   `.btn`) dont la dernière gagnait par accident. Une seule règle par objet
   désormais, et toutes les valeurs viennent des jetons : plus une seule taille
   ni une seule couleur en dur.
   ========================================================================== */

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

html {background: var(--papier);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  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(--lh-corps);
  letter-spacing: var(--tr-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Pas de tirer-pour-rafraîchir : la page se lit comme une page. */
  overscroll-behavior: none;
  /* La lumière du haut de page : un dégradé radial très doux, bronze sur le
     papier. Il ne se voit pas comme un dégradé, il se voit comme du papier
     éclairé — c'est la différence entre un fond plat et une surface. */
  background-image: radial-gradient(78% 34% at 50% 0%, rgb(201 169 122 / .13), rgb(201 169 122 / 0) 72%);}

/* Le grain du papier (refonte étape 8) : un calque fixe de 140 px, à 3,5 %,
   multiplié. Il ne capte aucun clic et ne bouge pas au défilement, donc il ne
   coûte ni repeint ni décalage. Sans lui, les grandes surfaces claires du site
   se lisent comme du plastique. */
body::after {content: ""; position: fixed; inset: 0; z-index: 60;
  pointer-events: none; background-image: var(--grain); background-size: 140px 140px;
  opacity: .06;}
@media print {body::after {display: none;}}

/* --- les titres : la serif du tract ------------------------------------- */
h1, h2, h3, h4 {margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre);
  letter-spacing: var(--tr-titre);
  text-wrap: balance;}
h1 {font-size: var(--t-heros); line-height: var(--lh-heros);}
h2 {font-size: var(--t-section); line-height: var(--lh-titre);}
h3 {font-size: var(--t-sous); line-height: 1.24;}
h4 {font-size: 1rem; line-height: 1.3;}

p {margin: 0; text-wrap: pretty;}
p + p {margin-top: var(--e-2);}
strong, b {font-weight: 600; color: var(--encre);}
em {font-style: italic;}
small {font-size: var(--t-micro); color: var(--encre-3);}
ul, ol {margin: 0; padding: 0; list-style: none;}
img, svg, canvas {max-width: 100%;}
hr {margin: 0; border: 0; border-top: 1px solid var(--filet);}
code, pre {font-family: var(--mono); font-size: .9em;}

a {color: inherit; text-decoration: none;}
/* Les liens DANS le texte se soulignent : sans cela, un paragraphe de dix lignes
   ne dit pas ce qui se clique. Les boutons et la marque en sont exclus. */
.page a:not(.btn):not(.bouton):not(.nav__marque):not(.carte):not(.vit-carte),
.pied a {text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgb(168 67 42 / .38);
  transition: text-decoration-color var(--t-ui) var(--ease);}
@media (hover: hover) and (pointer: fine) {
  .page a:not(.btn):not(.bouton):not(.nav__marque):hover,
  .pied a:hover {text-decoration-color: var(--terracotta);}}

button {font: inherit; color: inherit; cursor: pointer;}
button, a, .btn, summary {touch-action: manipulation;}
:focus-visible {outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 2px;}
::selection {background: rgb(168 67 42 / .16);}

.saut {position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 16px; background: var(--encre); color: var(--papier);
  font-size: var(--t-micro); font-weight: 600;}
.saut:focus {left: 0;}
/* L'ancien ciel lumineux est retiré : le fond est du papier, pas un dégradé. */
.ciel {display: none !important;}
html, body {overflow-x: clip;}
.page {position: relative; z-index: 1;}

/* --- le conteneur : un seul rail pour toute la page --------------------- */
.grille, .bloc__int {width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);}
main > section {width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);}
main > section > .grille {padding-inline: 0;}

/* --- le rythme vertical ------------------------------------------------- */
.sec {padding-block: var(--rythme);}
.sec--serre {padding-block: calc(var(--rythme) * .55);}
.sec + .sec {border-top: 1px solid var(--filet-2);}
.sec__tete {max-width: 46rem; margin: 0 0 var(--e-6);}
.sec__tete--centre {margin-inline: auto; text-align: center;}
.titre-sec {font-size: var(--t-section); line-height: var(--lh-titre); letter-spacing: var(--tr-titre);}
.dit {margin-top: var(--e-3); max-width: 62ch; font-size: var(--t-corps); color: var(--encre-2); line-height: var(--lh-corps);}
.filet {border: 0; border-top: 1px solid var(--filet); margin: 0;}

/* --- le surtitre : un intertitre de registre, pas un libellé de template --
   ⚠️ UNSLOP (9 novembre). Le surtitre était en capitales espacées : le tic le
   plus visible du genre. Il passe en casse de phrase, bronze, avec le seul
   filet de 28 px qui le distingue d'une légende. */
.kicker {display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--police);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tr-label);
  color: var(--bronze-fonce);}
.kicker::before {content: ""; width: 28px; height: 1px; background: var(--bronze-clair);}
.kicker i {display: none;}
.kicker--centre {justify-content: center;}

/* --- les boutons : un seul style, décliné ------------------------------- */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.75rem;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--police); font-size: var(--t-petit); font-weight: 600;
  letter-spacing: .005em; text-decoration: none;
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease), transform var(--t-appui) var(--ease-out);}
/* ⚠️ UNSLOP (9 novembre). Le bouton n'a plus d'ombre : un bouton s'appuie, il
   ne flotte pas. L'ombre portee sous un rectangle plat est le premier signe de
   composant copie ; la couleur terracotta suffit a en faire le seul objet plein
   de la page. */
.btn--primaire {background: var(--terracotta); color: var(--papier);}
.btn--second {background: transparent; color: var(--encre); border-color: var(--filet-fort);}
@media (hover: hover) and (pointer: fine) {
  .btn--primaire:hover {background: var(--terracotta-fonce);}
  .btn--second:hover {background: var(--encre); color: var(--papier); border-color: var(--encre);}
  .btn:hover .btn__fleche {transform: translateX(3px);}}
.btn:active {transform: translateY(1px);}
.btn__fleche {transition: transform var(--t-ui) var(--ease);}
/* Sur un fond encre, les deux boutons s'inversent : le papier devient la couleur. */
.appel .btn--primaire, .fond-encre .btn--primaire {background: var(--papier); color: var(--encre);}
.appel .btn--second, .fond-encre .btn--second {border-color: rgb(251 250 246 / .34); color: var(--papier);}
@media (hover: hover) and (pointer: fine) {
  .appel .btn--primaire:hover, .fond-encre .btn--primaire:hover {background: var(--bronze-clair); color: var(--encre);}
  .appel .btn--second:hover, .fond-encre .btn--second:hover {background: rgb(251 250 246 / .10); color: var(--papier);}}

/* --- la carte : une feuille posée sur le papier (refonte étape 8) -------
   ⚠️ Une carte n'est plus un rectangle bordé : c'est une feuille qui a une
   épaisseur. Trois signes, et rien de plus : le liseré de lumière sur la
   tranche haute (--relief), l'ombre à trois couches (--ombre-1, teintée brun),
   et la lueur blanche du haut (--lueur) qui dit d'où vient la lumière.
   Au survol, elle se soulève de 3 px dans la perspective : c'est le seul
   mouvement, et il est coupé si le système demande moins d'animation. */
.carte {position: relative; display: flex; flex-direction: column; gap: var(--e-2);
  height: 100%; padding: var(--e-4);
  background-color: var(--blanc); background-image: var(--lueur);
  border: 1px solid var(--filet); border-radius: var(--r);
  box-shadow: var(--ombre-1), var(--relief);
  transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease),
              transform var(--t-ui) var(--ease-out);}
@media (hover: hover) and (pointer: fine) {
  .carte:hover {border-color: var(--bronze-clair); box-shadow: var(--ombre-3), var(--relief);
    transform: perspective(var(--perspective)) translateY(-3px);}
}
@media (prefers-reduced-motion: reduce) {.carte {transition: none;} .carte:hover {transform: none;}}
.carte > h3 {margin: 0;}
.carte p {font-size: var(--t-petit); color: var(--encre-2); line-height: 1.6;}
.carte__num {font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
  line-height: 1; color: var(--bronze-fonce); font-variant-numeric: lining-nums tabular-nums;}
.carte__pied {margin-top: auto; padding-top: var(--e-3);
  border-top: 1px solid var(--filet-2);
  font-size: var(--t-micro); color: var(--encre-3);}
.carte__liste {display: grid; gap: .6rem; margin-top: var(--e-1);}
.carte__liste li {position: relative; padding-left: 1.35rem;
  font-size: var(--t-petit); color: var(--encre-2); line-height: 1.55;}
.carte__liste li::before {content: ""; position: absolute; left: 2px; top: .68em;
  width: 7px; height: 1px; background: var(--bronze);}

/* --- les grilles -------------------------------------------------------- */
.grille-2, .grille-3 {display: grid; gap: var(--e-3); align-items: stretch;}
.grille-2 {grid-template-columns: repeat(2, minmax(0, 1fr));}
.grille-3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
@media (max-width: 900px) {.grille-2, .grille-3 {grid-template-columns: 1fr;}}

/* --- l'accessibilité du mouvement -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;}}