/* =============================================================================
   common.css — le socle de TOUTES les pages
   =============================================================================
   Reset, polices, variables :root, typographie de base, conteneur.

   ⚠️ JAMAIS de style de bloc ici. Un style partagé par trois types de blocs ou
   plus va dans components.css ; en dessous de trois, il reste chez le bloc.

   Repris de la maquette figée (`_ressources/httpdocs/css/style.css`, sections 1
   a 3 et 5). Les commentaires d'origine sont conserves : ils portent des motifs
   de conception qu'aucune autre source ne documente.
   ============================================================================= */

/* ---------- 1. Variables ---------- */
:root{
  /* Palette (3 couleurs — cf. synthèse décisive) */
  --creme:    #fbf9f0;   /* fond dominant */
  --creme-2:  #f2efe2;   /* crème un ton plus foncé (cartes, séparateurs) */
  --noir:     #0e0e0e;   /* typo, aplats, footer */
  --noir-50:  rgba(14,14,14,.50);
  --jaune:    #f4b721;   /* accent UNIQUE et rare */
  --jaune-d:  #e0a510;   /* jaune foncé (hover) */
  --vert:     #5c7a3f;   /* vert nature (bouton « S'inscrire » du trio CTA) */
  --vert-d:   #4a6432;   /* vert foncé (hover) */
  --blanc:    #ffffff;
  --beige-footer: #f6f3eb; /* RÈGLE SITE : fond de la DERNIÈRE section avant le footer (= haut du back.png) */

  /* Typographie */
  --serif:  "Instrument Serif", Georgia, serif;     /* titres — émotion */
  --sans:   "Inter", -apple-system, sans-serif;     /* texte / UI */
  --display:"Bebas Neue", "Inter", sans-serif;      /* impact / mots-clés / labels */

  /* Mesures */
  --max:    1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --nav-h:  112px;              /* hauteur header MAXIMISÉ (haut de page) */
  --nav-h-collapsed: 84px;      /* hauteur header COLLAPSE au scroll (75%) */
  --header-h: 112px;            /* hauteur COURANTE (mise à jour par JS) -> les sticky s'y réfèrent */
  --topbar-h: 0px;   /* top-bar masquée : 0 pour récupérer l'espace */

  /* Échelle typographique UNIQUE (retours client 03/07 : uniformiser les tailles).
     Toute taille de texte du site référence UNE de ces 6 variables — ne jamais
     remettre de font-size en dur dans les composants. */
  --fs-title: clamp(40px, 5.6vw, 76px);  /* titres de section (H2) */
  --fs-h3:    20px;   /* titres de cartes / de paragraphes / questions FAQ */
  --fs-body:  18px;   /* paragraphes courants */
  --fs-small: 15px;   /* métas, liens secondaires, boutons, petits textes */
  --fs-label: 13px;   /* eyebrows / labels uppercase (noms de section) */
  --fs-nav:   14px;   /* menu principal (réduit de 16 à 14px, Fix 09/07) */

  /* Boutons — hauteur unique de TOUS les .btn du site (voir « 4. Boutons ») */
  --btn-h: 52px;

  /* Transitions */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* PAS de scroll-behavior:smooth : Lenis gère déjà le smooth scroll. Les deux ensemble = scroll qui
   "rattrape d'un coup" / se replace (conflit entre le lissage natif et celui de Lenis). */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--noir);
  background:var(--creme);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }

/* ---------- 3. Typo utilitaires ---------- */
.h-serif{ font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--sans); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--noir-50);
}
.accent{ color:var(--jaune); }

/* ---------- 5. Conteneur ---------- */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- En-tetes de section ----------
   Repris de la section « SECTIONS DE L'INDEX » de la maquette : ces trois
   classes servent toutes les pages editoriales, pas seulement l'accueil. */
.sec-head{ max-width:820px; margin:0 auto clamp(36px,5vw,60px); text-align:center; }
.sec-title{ font-size:var(--fs-title); color:var(--noir); margin:10px 0 16px; line-height:1.02; }
.sec-sub{ font-size:var(--fs-body); color:var(--noir-50); line-height:1.6; }
.eyebrow--dark{ color:var(--jaune-d); }

/* Variante XL du titre de section — l'accueil l'emploie pour « Conseils & récits de
   terrain », les pages Offres et Récits l'emploieront. L'en-tete s'elargit avec lui :
   un titre de 98px dans 820px se couperait en trois lignes.
   ⚠️ `:has()` n'a pas de repli : sur un navigateur qui ne le connait pas, l'en-tete
   garde ses 820px et le titre passe sur une ligne de plus. Degradation acceptable,
   et c'est le choix de la maquette. */
.sec-title--xl{ font-size:clamp(52px, 7.2vw, 98px); }
.sec-head:has(.sec-title--xl){ max-width:1080px; }

/* Rangee de boutons sous une section (« Voir tous les articles »).
   ⚠️ `mobile.css:1379` ajoute `justify-content:center; flex-wrap:wrap` a une liste de
   selecteurs dont `.sec-cta` fait partie — NON REPRIS ICI, et c'est mesure : `.sec-cta`
   n'est `display:flex` NULLE PART dans la maquette, ces deux proprietes y sont donc
   INERTES. Elles visent ses voisines de la liste (`.pg-suite__btns`, `.cta-trio`…),
   qui sont des conteneurs flex. Porter une regle morte, c'est faire croire a un
   comportement. */
.sec-cta{ text-align:center; margin-top:clamp(30px,4vw,50px); }

/* ---------- Rythme vertical des sections ----------
   Toute section identifiee porte le meme rythme : c'est ce qui fait tenir
   l'alternance des blocs sans que chacun redefinisse ses marges. */
section[id]{ padding:clamp(70px,9vw,130px) 0; }

/* ---------- Corps de page ----------
   Enveloppe posee entre l'en-tete et le pied de page ; porte le fond creme et
   passe AU-DESSUS de la scene decorative du footer. */
.site-content{ position:relative; z-index:210; background:var(--creme); }


/* =============================================================================
   RESPONSIVE — tokens mobiles, repris de la maquette (mobile.css l. 55-77)
   =============================================================================
   ⚠️ Ce titre se refermait ICI jusqu'au 2026-10-07, et le paragraphe suivant, hors commentaire,
   était lu comme un sélecteur : il emportait tout le bloc `@media (max-width:640px)` des TOKENS
   MOBILES (tailles de texte du téléphone), qui ne s'appliquait pas.
   2. TOKENS MOBILE (<=640px)
   L'échelle typo du site est centralisée dans :root (--fs-*) et AUCUN composant
   ne porte de font-size en dur (cf. commentaire style.css l.33-35) : redéfinir
   les tokens ici rebascule tout le site d'un coup, sans toucher un composant.
   Seules les valeurs qui posent réellement problème au téléphone sont changées.
   ========================================================================== */
@media (max-width:640px){
  :root{
    /* --fs-title était clamp(40px,5.6vw,76px) : plancher 40px -> ~8 caractères
       par ligne sur un 375px. Plancher descendu à 30px, plafond mobile 52px. */
    --fs-title: clamp(30px, 8vw, 52px);
    /* les 5 autres tokens typo (h3 20 / body 18 / small 15 / label 13 / nav 14)
       et --btn-h (52px, = cible tactile mini) tiennent tels quels au téléphone. */
    --gutter: clamp(16px, 4vw, 64px);
  }

  /* Respiration verticale des sections : 70px en haut ET en bas d'une section
     sur un écran de 667px de haut, c'est un cinquième de l'écran perdu. */
  section[id]{ padding:clamp(48px, 9vw, 130px) 0; }

  /* Le titre XL redescend fortement : 98px sur un telephone, c'est trois mots par ligne. */
  .sec-title--xl{ font-size:clamp(30px, 8.6vw, 46px); }
}

/* ⚠️ Une ligne d'ouverture de commentaire orpheline précédait ce bloc jusqu'au 2026-10-07 : elle
   l'avalait jusqu'au premier fermant, et la règle d'ancre mobile ci-dessous ne s'appliquait pas. */
@media (max-width:1024px){
  section[id]{ scroll-margin-top:72px; }   /* l'ancre se cale sous l'en-tete mobile */
}