/* ====================================================================
   PAGES LÉGALES ET DE SERVICE — la mise en page commune à ces six pages.

   cgv, mentions-legales, merci, plan-du-site, politique-confidentialite,
   et 404, née le 28/08 à 16 h 53 et rattachée à ce fichier dès sa
   création. L'en-tête disait encore « commune aux cinq » quand un
   commentaire situé trente lignes plus bas parlait déjà des « cinq pages
   legales et la 404 » : deux mains y étaient passées à deux heures
   d'intervalle. Compté le 28/08 au soir : six fichiers appellent
   legales.css, contre douze pour socle.css.

   POURQUOI CE FICHIER EXISTE
   Décidé le 27/08, appliqué le 28/08. Les cinq
   pages qui existaient alors portaient chacune leur copie de la même mise
   en page : mesure du 28/08, 15 sélecteurs strictement identiques dans les
   cinq fichiers, plus deux qui avaient divergé. C'est la seule famille du
   site où la duplication était réelle, et 404.html est la première page à
   n'avoir jamais eu de copie à elle.

   CE QUI SE CHARGE AVANT : socle.css (polices, jetons, pied, WhatsApp).
   CE QUI SE CHARGE APRÈS : le style en ligne propre à chaque page.
   À spécificité égale, la dernière règle gagne : une page peut donc
   surcharger ce fichier, jamais l'inverse.

   LES DEUX DIVERGENCES, ET CE QUE LA MESURE EN A DIT
   - .rubrique h2 : 12 px sur trois pages, 14 px sur deux. Écart de 2 px
     sans raison trouvée. Unifié à 12 px, la valeur majoritaire.
   - .titre-page : 44 px sur quatre pages, 12 px sur cgv.html. Celle-ci
     N'EST PAS une dérive : cgv est la seule page à porter une date de mise
     à jour (.maj) juste sous son titre, et cet élément fournit lui-même les
     44 px. Unifier aveuglément aurait ajouté 32 px d'espace mort sur la
     page. La surcharge reste donc dans cgv.html, avec son motif écrit.
     Toute divergence n'est pas un défaut : certaines sont des adaptations,
     et on ne peut le savoir qu'en regardant ce qu'il y a autour.
   ==================================================================== */

body{margin:0;font-family:var(--font-display);background:var(--white);
  color:var(--text);-webkit-font-smoothing:antialiased;}
.wrap{max-width:900px;margin:0 auto;padding:0 clamp(24px,5vw,72px);}
a{color:var(--gold-deep);text-decoration:none;}

/* ---------- En-tête ---------- */
.entete{background:var(--cream);border-bottom:1px solid var(--border);}
/* Zone de protection, 28/08 : 19 px pour 18,63 exiges autour d'un
   logo de 64 px. La charte demande la DEMI-HAUTEUR DE CAPITALE, que
   Sora declare a 730 millimes, et non la demi-hauteur d'encre du S,
   qui vaut 768 et deborde optiquement. Reperage sans outil : la
   marge est la moitie de la hauteur du l de Soralva. */
/* Le padding horizontal EST la gouttiere, et il manquait. Trouve le
   28/08 en mesurant. Cet element porte a la
   fois .wrap, qui pose padding:0 clamp(24px,5vw,72px), et .entete__inner,
   qui posait padding:19px 0 : la seconde regle, plus loin dans le
   fichier, ecrasait la premiere sur les DEUX axes.
   Mesure a 375 px sur les cinq pages legales et la 404 : le logo
   commencait a x=0 et « Retour a l'accueil » finissait a x=375, tous
   deux colles au bord de l'ecran, alors que le h1 de la meme page
   avait bien ses 24 px. La gouttiere est reprise a l'identique de
   .wrap plutot que reinventee, pour que les deux ne divergent pas. */
.entete__inner{display:flex;align-items:center;justify-content:space-between;
  padding:19px clamp(24px,5vw,72px);}
/* Option B, 28/08 : verrouillage complet a 64 px de haut, soit 181 px de
   large. La charte fixe la taille minimale de la version AVEC baseline a
   180 px de large : on est donc juste au-dessus, et le logotype ne peut
   pas descendre plus bas sans passer en version nue. */
.logo{display:block;height:64px;width:auto;}
/* Cible tactile du lien de retour. MESURE AVANT CORRECTION, 28/08, sur
   cgv.html : 138,4 x 18 px. C'est le SEUL controle de navigation de ces
   cinq pages, sur telephone comme ailleurs : un visiteur qui vient de lire
   les CGV n'a que ce lien, ou le bouton Precedent du navigateur. La charte
   tient a 44 px toute cible qui sert a agir, et celle-ci en faisait 18.
   Le cas est plus concret que celui du menu : le menu replie derriere le
   bouton a trois barres offre d'autres sorties, ici il n'y en a aucune.
   L'en-tete ne bouge pas d'un pixel : il fait 102 px de haut plus 1 px de
   filet, hauteur fixee par le logotype de 64 px et les 19 px de protection,
   donc 44 px de lien restent tres en dessous et .entete__inner centre deja.
   --slate #57636E sur le creme #EBEFF3 de cet en-tete vaut 5,32:1, mesure,
   pour 4,5 exiges. */
.retour{display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:500;color:var(--slate);}
.retour:hover{color:var(--ink);}

/* ---------- Corps ---------- */
main{padding:clamp(48px,7vw,72px) 0 clamp(64px,8vw,96px) 0;}
.titre-page{display:flex;flex-direction:column;gap:10px;margin-bottom:44px;}
.oeil{margin:0;font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);}
h1{margin:0;font-size:clamp(28px,3.4vw,38px);font-weight:700;
  letter-spacing:-.6px;color:var(--ink);}

.rubrique{padding:28px 0;border-top:1px solid var(--border);}
.rubrique:last-child{border-bottom:1px solid var(--border);}
.rubrique h2{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--ink);}

/* ---------- Pied ---------- */
.pied{background:var(--ink-deep);padding:36px 0;margin-top:24px;}
.pied__inner{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px;}
@media (max-width:700px){
  .pied__inner{flex-direction:column;align-items:flex-start;}
}