/*
 * CASA DE ORO — le site public.
 *
 * Cette feuille vient APRES /app/casa.css, dont elle reprend telles quelles les variables : une
 * seule source pour la palette, la typographie et le rayon. Copier les valeurs ici aurait fait
 * deriver les deux surfaces au premier ajustement, et un visiteur qui passe du site a son espace
 * doit avoir le sentiment d'ouvrir une porte, pas de changer de maison.
 *
 * casa.css est figee pour les trois interfaces — aucune page n'y ajoute de style. La vitrine est
 * une autre surface, avec des besoins qu'un cockpit n'a pas : une colonne de lecture, des
 * sections pleine largeur, une hierarchie de titres editoriale. Elle a donc sa feuille propre,
 * et n'ecrit jamais dans celle des interfaces.
 *
 * LA REGLE QUI GOUVERNE TOUT LE RESTE : rien ici ne peut suggerer une performance. Aucune
 * courbe, aucune flèche, aucun degrade ascendant, aucun vert de hausse. Le vert `--paisible` et
 * la terre cuite `--alerte` ne servent qu'a distinguer un fait acquis d'un avertissement, jamais
 * une variation. C'est la position D1, tenue jusque dans la feuille de style.
 */

:root {
  /*
   * Le gris tertiaire du cockpit ne passe pas sur une page de lecture.
   *
   * `--texte-tres-doux` (#6a635b) donne 3,36:1 sur le fond nuit : acceptable pour une etiquette
   * qu'on survole dans un tableau de bord, insuffisant pour du texte que quelqu'un doit lire.
   * On le releve ici, sans toucher a casa.css qui est figee — les deux surfaces n'ont pas le
   * meme usage, elles n'ont pas besoin du meme gris.
   */
  --texte-tres-doux: #8a8177;   /* 4,66:1 sur --nuit */

  --colonne: 68ch;         /* la mesure de lecture : au-dela, l'oeil perd la ligne suivante */
  --large: 1120px;         /* la largeur maximale d'une section, grilles comprises */
  --marge-page: clamp(20px, 5vw, 64px);
  --souffle: clamp(56px, 9vh, 104px);   /* l'espace vertical entre deux sections */
}

body {
  /* casa.css pose un degrade pense pour un cockpit ; la vitrine respire sur un aplat. */
  background: var(--nuit);
  font-size: 16px;
  line-height: 1.65;
}

/* --- Ossature ------------------------------------------------------------ */

/*
 * ⚠️ `main` est neutralise, sinon la page a DEUX conteneurs empiles.
 *
 * `casa.css` — figee, partagee avec le cockpit — pose `main { max-width: 1120px; padding: 56px
 * 40px 120px }`. Sur une page de site, l'en-tete est HORS de `main` et le contenu DEDANS : les
 * deux ne partaient donc pas du meme bord. Le poincon s'arretait 40 px avant le bouton d'entree
 * qui le surplombe, et chaque section etait retrecie d'autant sans que rien ne le dise — un
 * desalignement de 40 px ne se voit pas ligne a ligne, il se voit quand on trace le bord droit.
 *
 * La mesure du site appartient a `.s-enveloppe`, et a elle seule.
 */
body > main { max-width: none; padding: 0; margin: 0; }

.s-enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge-page); }
.s-colonne { max-width: var(--colonne); }
.s-colonne.s-centree { margin-left: auto; margin-right: auto; }

section.s-bande { padding: var(--souffle) 0; border-top: 1px solid var(--filet); }
section.s-bande:first-of-type { border-top: 0; }

/* --- Bandeau de navigation ----------------------------------------------- */

.s-entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(10 9 8 / 88%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filet);
}
/*
 * L'en-tete est une GRILLE nommee, et non une rangee qui deborde.
 *
 * En `flex-wrap: wrap`, cinq liens en capitales espacees retombaient sur un second rang des que
 * l'ecran passait sous 400 px : l'en-tete montait a 150 px, soit pres d'un cinquieme du premier
 * ecran d'un telephone, avant la moindre phrase. Une grille dit ou vont les choses au lieu de les
 * laisser tomber ou elles peuvent.
 *
 * Sur telephone : la marque et l'entree en relation sur le premier rang, la navigation sur le
 * second. Sur grand ecran : les trois sur une seule ligne, la navigation au centre.
 */
.s-entete > .s-enveloppe {
  display: grid;
  grid-template-areas: 'logo entree' 'nav nav';
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/*
 * Le logotype se lit, il ne se devine pas.
 *
 * Il etait a 17 px, en `--champagne`, avec 0,3 em d'interlettrage. Les trois se cumulaient contre
 * lui : au-dela de ~0,15 em l'oeil cesse de reconnaitre la SILHOUETTE du mot et epelle lettre a
 * lettre, et le champagne sur nuit tombe sous le contraste du texte courant. Une marque qui se
 * lit moins bien que le corps de la page n'est plus une marque, c'est un ornement.
 */
.s-logotype {
  grid-area: logo;
  font-family: var(--serif);
  /*
   * L'echelle suit la largeur SANS point de rupture.
   *
   * A 320 px, la marque et le bouton d'entree se disputaient 280 px utiles et le bouton sortait
   * de l'ecran — invisible a la mesure, parce que le volet du navigateur ne descendait pas sous
   * 362 px, et vu du premier coup d'oeil sur la capture. Un `clamp` en vw retrecit les deux
   * ensemble et continument : il n'y a pas de largeur ou l'un gagne contre l'autre.
   */
  font-size: clamp(17px, 5.2vw, 25px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1;
}
.s-logotype:hover, .s-logotype:focus-visible { color: var(--champagne); }

/*
 * L'entree en relation n'est pas un lien de navigation.
 *
 * La navigation dit ou l'on peut aller ; ceci dit ce que l'on peut faire. Lui donner la meme
 * casse, la meme couleur et la meme taille qu'a « Tarifs » revenait a cacher le seul geste que
 * la page attend.
 */
.s-entree {
  grid-area: entree;
  font-size: clamp(10.5px, 3.2vw, 12px);
  letter-spacing: clamp(0.05em, 0.4vw, 0.1em);
  text-transform: uppercase;
  color: var(--champagne);
  text-decoration: none;
  white-space: nowrap;
  padding: clamp(6px, 1.6vw, 9px) clamp(10px, 3vw, 16px);
  border: 1px solid var(--or);
  border-radius: 2px;
  transition: background var(--transition), color var(--transition);
}
.s-entree:hover, .s-entree:focus-visible { background: var(--or); color: #100e0a; }
.s-entree-courante { background: var(--or); color: #100e0a; }

.s-entete nav {
  grid-area: nav;
  display: flex;
  gap: clamp(14px, 3.4vw, 26px);
  align-items: center;
}
.s-entete nav a {
  font-size: clamp(11px, 2.9vw, 12px);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.s-entete nav a:hover, .s-entete nav a:focus-visible { color: var(--texte); }
.s-entete nav a[aria-current="page"] { color: var(--champagne); border-bottom-color: var(--or); }

/* --- Remise a zero de ce que casa.css impose ------------------------------ */

/*
 * casa.css met les h2 et h3 en capitales espacees, parce que dans un cockpit un titre est une
 * etiquette de section. Sur une page de lecture, c'est une phrase — « DU METAL, PAS UN PRODUIT
 * FINANCIER. » se crie au lieu de se lire.
 *
 * Le prefixe `s-` protege les CLASSES ; il ne protege pas des regles posees sur les BALISES.
 * D'ou cette remise a zero explicite, groupee ici pour qu'on voie d'un coup d'oeil tout ce que
 * la vitrine reprend a son compte.
 */
main h2, main h3, main h4, main h5,
.s-pied h5, .s-entete .s-logotype + nav {
  text-transform: none;
  letter-spacing: normal;
}
main h4 { font-size: inherit; color: inherit; margin: 0; }

/* Ces deux-la gardent leurs capitales : ce sont bien des etiquettes, pas des phrases. */
h3.s-rubrique, .s-pied h5, .s-enseigne-legende, .s-appel, .s-entete nav a, .s-logotype {
  text-transform: uppercase;
}

/* --- Titres --------------------------------------------------------------- */

h1.s-titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--champagne);
  margin: 0 0 24px;
}

h2.s-section {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(25px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.008em;
  text-wrap: balance;
  color: var(--champagne);
  margin: 0 0 20px;
}

h3.s-rubrique {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 18px;
}

.s-chapeau {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.6;
  color: var(--texte-doux);
  margin: 0 0 32px;
}

p.s-corps { margin: 0 0 18px; color: var(--texte); }
p.s-corps.s-doux { color: var(--texte-doux); }
p.s-corps:last-child { margin-bottom: 0; }

.s-corps a, .s-liste a, .s-chapeau a { color: var(--or-clair); text-underline-offset: 3px; }
.s-corps a:hover, .s-liste a:hover { color: var(--champagne); }

/* --- L'accueil ------------------------------------------------------------ */

/*
 * Le souffle d'ouverture a ete REDUIT en meme temps que le chiffre a change de nature.
 *
 * Les 12vh d'origine equilibraient un nombre de 132 px : il fallait de l'air au-dessus pour qu'il
 * ne colle pas a l'en-tete. Le poincon parti sur le cote, ce meme espace devenait un trou de
 * 109 px entre la navigation et le titre — sur un telephone, un dixieme du premier ecran a ne
 * rien regarder. Un espacement se regle contre ce qu'il separe, pas une fois pour toutes.
 */
/*
 * ⚠️ `section.s-ouverture`, et non `.s-ouverture` — SPECIFICITE.
 *
 * La regle a vecu ici en simple `.s-ouverture` sans jamais s'appliquer une seule fois.
 * `section.s-bande` (element + classe) l'emporte sur une classe seule, et la section porte les
 * deux : le padding d'ouverture valait donc `--souffle`, comme n'importe quelle autre bande. La
 * page n'avait pas l'air cassee, elle avait l'air ordinaire — c'est le mode de defaillance d'une
 * regle CSS perdue, et rien ne la signale.
 */
section.s-ouverture { padding: clamp(28px, 6vh, 80px) 0 var(--souffle); }

/*
 * Le chiffre d'ouverture est un POIDS, jamais une valeur.
 *
 * C'est le renversement qui tient toute la page : partout ailleurs on ouvre sur un montant qui
 * monte, ici on ouvre sur des grammes. Un gramme ne promet rien — il pese. Afficher un euro a
 * cet endroit ferait glisser la lecture vers la performance sans qu'un seul mot interdit soit
 * ecrit.
 */
/*
 * Le chiffre est un POINCON, et c'est ce qui a change.
 *
 * Il ouvrait la page en 132 px, au-dessus du titre. Le renversement de depart reste juste — on
 * ouvre sur un titre d'or et non sur un montant, parce qu'un gramme ne promet rien la ou un euro
 * suggere une performance — mais l'execution le retournait contre lui-meme : le nombre ecrasait
 * la phrase qu'il devait servir, et mangeait 40 % du premier ecran d'un telephone avant que le
 * visiteur ait lu ce que fait la maison.
 *
 * Sur un lingot, 999,9 n'est pas une enseigne : c'est une marque FRAPPEE, petite, precise, qui
 * certifie. La traiter comme telle rend au titre sa place ET rapproche l'objet de sa verite. Le
 * cadre, le filet d'or et la mesure serree viennent de la ; ce n'est pas une reduction de
 * taille, c'est un changement de nature.
 */
.s-ouverture-grille { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }

.s-poincon {
  display: inline-grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  padding: clamp(16px, 2.4vw, 22px) clamp(20px, 3vw, 28px);
  border: 1px solid var(--or);
  border-radius: 3px;
  background: rgb(201 162 39 / 5%);
  text-align: center;
}
.s-poincon-valeur {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 46px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--or-clair);
  white-space: nowrap;
}
.s-poincon-valeur .s-unite { font-size: 0.46em; letter-spacing: 0.02em; color: var(--or); margin-inline-start: 0.12em; }
.s-poincon-legende {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  max-width: 18ch;
  line-height: 1.5;
}

/* --- Avertissement de risque --------------------------------------------- */

/*
 * Il ne descend jamais en note de bas de page.
 *
 * D25 pose la regle pour l'horizon — « la contrepartie s'affiche a cote de l'avantage » — et
 * elle vaut ici : le risque se lit dans le meme ecran que la proposition, sans defilement,
 * dans le meme corps que le texte courant. Un asterisque serait une facon polie de le cacher.
 */
.s-risque {
  border-inline-start: 2px solid var(--alerte);
  padding: 2px 0 2px 20px;
  margin: 32px 0 0;
  max-width: var(--colonne);
}
.s-risque p { margin: 0; color: var(--texte-doux); font-size: 15px; }
.s-risque p + p { margin-top: 10px; }
.s-risque strong { color: var(--texte); font-weight: 600; }

/* --- Boutons et appels --------------------------------------------------- */

.s-appels { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.s-appel {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--rayon);
  border: 1px solid var(--filet-vif);
  color: var(--texte);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.s-appel:hover, .s-appel:focus-visible { border-color: var(--or); color: var(--champagne); }

.s-appel.s-principal {
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  border-color: var(--or);
  color: #100e0a;
}
.s-appel.s-principal:hover, .s-appel.s-principal:focus-visible { filter: brightness(1.06); color: #100e0a; }

/* --- Grilles et cartes ---------------------------------------------------- */

.s-grille { display: grid; gap: 22px; }
.s-grille.s-deux { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.s-grille.s-trois { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.s-bloc {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--nuit-carte), var(--nuit-creux));
  padding: 28px 26px;
}
.s-bloc h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  color: var(--champagne);
  margin: 0 0 12px;
}
.s-bloc p { margin: 0; color: var(--texte-doux); font-size: 15px; }
.s-bloc p + p { margin-top: 12px; }

/* --- Etapes numerotees ---------------------------------------------------- */

/*
 * La numerotation dit ici quelque chose de vrai : les etapes se suivent dans le temps, et
 * l'ordre porte de l'information — on ne garde pas de l'or avant de l'avoir achete. Ailleurs sur
 * le site, rien n'est numerote.
 */
.s-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* casa.css dessine une pastille devant chaque etape ; ici le rang porte deja le numero. */
.s-etapes li::before, .s-etapes li::marker { content: none; display: none; }
.s-etape {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--filet);
}
.s-etape:last-child { border-bottom: 1px solid var(--filet); }
.s-etape .s-rang {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--or);
  line-height: 1.1;
}
.s-etape h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--champagne);
  margin: 0 0 8px;
  text-transform: none;
  letter-spacing: normal;
}
.s-etape p {
  margin: 0;
  color: var(--texte-doux);
  max-width: 62ch;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
}
.s-etape p + p { margin-top: 10px; }

/* --- Tarifs --------------------------------------------------------------- */

.s-tarif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 28px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--filet);
}
.s-tarif:last-of-type { border-bottom: 1px solid var(--filet); }
.s-tarif h4 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--texte);
  margin: 0;
}
.s-tarif .s-taux {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--or-clair);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.s-tarif p {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  color: var(--texte-doux);
  font-size: 15px;
  max-width: 68ch;
}

/* --- Listes --------------------------------------------------------------- */

.s-liste { margin: 0 0 18px; padding-left: 0; list-style: none; }
.s-liste li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--texte-doux);
}
.s-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--or);
}
.s-liste li strong { color: var(--texte); font-weight: 600; }

/* --- Definitions (mentions legales, fiscalite) ---------------------------- */

.s-definitions { display: grid; gap: 0; margin: 0; }
.s-definitions > div {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 8px 28px;
  padding: 16px 0;
  border-top: 1px solid var(--filet);
}
.s-definitions > div:last-child { border-bottom: 1px solid var(--filet); }
.s-definitions dt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  padding-top: 3px;
}
.s-definitions dd { margin: 0; color: var(--texte); }
.s-definitions dd .chiffre { font-family: var(--chiffres); font-size: 15px; letter-spacing: 0.02em; }

/* --- Mention discrete ----------------------------------------------------- */

.s-mention {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--texte-doux);
  border-inline-start: 1px solid var(--or);
  padding-left: 18px;
  margin: 28px 0 0;
  max-width: var(--colonne);
}

/* --- Formats -------------------------------------------------------------- */

.s-formats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.s-formats li {
  font-family: var(--chiffres);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  border: 1px solid var(--filet-vif);
  border-radius: 999px;
  padding: 7px 16px;
}
.s-formats li.s-retenu { color: var(--champagne); border-color: var(--or); }

/* --- Pied de page --------------------------------------------------------- */

.s-pied {
  border-top: 1px solid var(--filet);
  padding: var(--souffle) 0 48px;
  background: var(--nuit-creux);
}
.s-pied .s-colonnes {
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 40px;
}
.s-pied h5 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
  margin: 0 0 14px;
  font-weight: 600;
}
.s-pied ul { list-style: none; margin: 0; padding: 0; }
.s-pied li { margin-bottom: 9px; }
.s-pied a { color: var(--texte-doux); text-decoration: none; font-size: 15px; }
.s-pied a:hover, .s-pied a:focus-visible { color: var(--champagne); text-decoration: underline; text-underline-offset: 3px; }

/*
 * Le bandeau de statut, sur toutes les pages.
 *
 * Il dit ce que CASA DE ORO n'est pas. Le placer en pied de page n'est pas le minorer : c'est
 * l'endroit ou on le cherche, et il est repete a l'identique partout plutot que reformule au
 * fil des pages — une mention qui change de mot d'une page a l'autre finit par ne plus vouloir
 * rien dire.
 */
.s-statut {
  border-top: 1px solid var(--filet);
  padding-top: 28px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--texte-tres-doux);
  max-width: 92ch;
}
.s-statut p { margin: 0 0 10px; }
.s-statut p:last-child { margin-bottom: 0; }

/* --- Accessibilite -------------------------------------------------------- */

.s-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--or);
  color: #100e0a;
  padding: 12px 20px;
  border-radius: var(--rayon);
  z-index: 100;
  font-size: 13px;
  font-weight: 600;
}
.s-evitement:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .s-entete { backdrop-filter: none; background: var(--nuit); }
}

/* --- Petits ecrans -------------------------------------------------------- */

/*
 * A partir de 761 px, tout revient sur une ligne — et le poincon passe a cote du titre.
 *
 * C'est la meme composition aux deux tailles, pas deux designs : la marque a gauche, la
 * navigation, l'entree en relation a droite ; et le poincon qui accompagne le titre au lieu de le
 * preceder. Ce qui change est l'axe, jamais la hierarchie.
 */
@media (min-width: 761px) {
  .s-entete > .s-enveloppe {
    grid-template-areas: 'logo nav entree';
    grid-template-columns: auto 1fr auto;
    column-gap: clamp(28px, 4vw, 56px);
    min-height: 74px;
  }
  .s-entete nav { justify-content: flex-end; }
  .s-ouverture-grille { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 760px) {
  /* Le poincon prend toute la largeur : centre et seul sur sa ligne, il se lit comme une marque
     apposee au bas de la page plutot que comme un encart qui flotte. */
  .s-poincon { justify-self: stretch; }
  .s-poincon-legende { max-width: none; }
  .s-etape { grid-template-columns: 40px 1fr; }
  .s-etape .s-rang { font-size: 21px; }
  .s-definitions > div { grid-template-columns: 1fr; gap: 4px; }
  .s-tarif { grid-template-columns: 1fr; }
  .s-tarif .s-taux { font-size: 26px; }
}

/* --- Impression ----------------------------------------------------------- */

@media print {
  .s-entete, .s-appels, .s-evitement { display: none !important; }
  .s-pied { background: #fff; }
}


/* --- Utilitaires d'espacement --------------------------------------------
 *
 * Ils existent parce que la politique de securite de contenu pose `style-src 'self'` sans
 * `unsafe-inline` : un attribut `style="…"` est **silencieusement supprime** par le navigateur.
 * Silencieusement est le mot important — la page s'affiche, sans erreur visible, avec les
 * espacements en moins. On ne s'en apercoit qu'en comparant a l'intention.
 */
.s-ouverture.s-courte { padding-top: clamp(40px, 8vh, 80px); }
.s-suite { margin-top: 20px; }
.s-suite-large { margin-top: 28px; }
.s-suite-ample { margin-top: 36px; }
.s-suite-vaste { margin-top: 44px; }
.s-au-milieu { text-align: center; }
.s-appels.s-au-milieu { justify-content: center; }

/* --- Cases a cocher -------------------------------------------------------
 *
 * casa.css met les `label` en capitales espacees, ce qui convient a l'etiquette d'un champ de
 * cockpit et pas a une phrase de consentement : « J'AI PRIS CONNAISSANCE DES MENTIONS
 * LEGALES » se crie, et les liens qu'elle contient deviennent illisibles.
 */
.champ.case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.champ.case input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--or);
  flex: 0 0 auto;
}
.champ.case label {
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte-doux);
  margin: 0;
}
.champ.case label a { color: var(--or-clair); text-underline-offset: 3px; }

/* Le champ d'un formulaire de site reste lisible : ni capitales, ni interlettrage de cockpit. */
main form .champ > label { text-transform: none; letter-spacing: normal; font-size: 14px; }

/* --- Impression : ne pas heriter du masquage du cockpit ------------------- */
@media print {
  /* casa.css masque `button` et `.avis` a l'impression. Sur une page de site, un formulaire
     imprime sans son bouton ni ses messages est un formulaire incomprehensible. */
  main form button, main form .avis { display: revert !important; }
}