/* ============================================================
   SYSTÈME — la couche de contraintes, commune aux quatre domaines.
   Se charge EN DERNIER, après site.css et après la feuille propre
   à la page. Elle ne décore rien : elle impose les mesures.

   Écrit le 26/07/2026 en appliquant /site-sans-slop. Chaque bloc
   ci-dessous corrige un « tell » relevé sur nos propres pages, pas
   une règle abstraite.

   Direction retenue : ÉDITORIALE. Des pages qui se lisent, du texte
   long, une hiérarchie portée par la taille et la graisse. D'où
   l'échelle typographique en 1,333 et pas en 1,25.
   ============================================================ */

:root{
  /* ---- Échelle typographique, ratio 1,333 depuis 16 px ----
     Avant : 13,5 · 14,2 · 14,5 · 14,6 · 14,8 · 15 · 15,5 · 16,5 · 17 · 18,5…
     Vingt-trois tailles distinctes tirées au jugé. C'est le tell le
     plus discret et le plus sûr : une échelle non mathématique se
     voit sans se nommer. */
  --t-xs:12px;    /* mentions, dates, notes de bas de bloc */
  --t-s:14px;     /* étiquettes, légendes */
  --t-b:16px;     /* CORPS. Plancher absolu, jamais en dessous. */
  --t-m:21px;     /* chapô, texte d'introduction */
  --t-l:28px;     /* titre de carte, sous-titre de section */
  --t-xl:38px;    /* titre de section */
  --t-2xl:50px;   /* titre de page */
  --t-3xl:67px;   /* accroche pleine page, un seul par page */

  /* ---- Grille de 8. 4 est le seul demi-pas autorisé. ----
     La règle qui porte tout :
     espace DANS un composant < espace ENTRE composants < espace ENTRE sections */
  --e-1:4px;   --e-2:8px;   --e-3:16px;  --e-4:24px;
  --e-5:32px;  --e-6:48px;  --e-7:64px;  --e-8:96px;  --e-9:128px;

  /* ---- Rythme des sections. TROIS valeurs, jamais une seule. ----
     Une page dont toutes les sections ont le même remplissage se lit
     comme un tableur. C'est ce que faisaient nos trois pages. */
  --sec-ample:var(--e-9);
  --sec-normal:var(--e-8);
  --sec-serre:var(--e-7);

  /* ---- Rayons : une échelle, pas une valeur. ----
     Le même rayon sur une pastille de 24 px et sur un panneau de
     900 px fait paraître les deux sortis du même bouton. */
  --r-xs:8px;    /* pastille, étiquette */
  --r-s:14px;    /* petit élément, champ */
  --r-m:22px;    /* carte */
  --r-xl:32px;   /* panneau, bloc pleine largeur */

  /* ---- Élévation. Jamais de filet gris de 1 px sur une carte. ----
     Séparation par le blanc d'abord, puis par un décalage de clarté
     du fond, puis par l'élévation. La bordure est le dernier recours,
     et elle ne sert qu'à marquer ce qui est ACTIF. */
  --el-1:0 1px 2px rgba(36,35,36,.05), 0 6px 18px rgba(36,35,36,.055);
  --el-2:0 2px 4px rgba(36,35,36,.06), 0 14px 38px rgba(36,35,36,.09);
  --el-rose:0 2px 4px rgba(255,152,198,.14), 0 16px 42px rgba(255,152,198,.22);

  /* ---- Longueur de ligne. Entre 60 et 80 signes, mesuré. ---- */
  --mesure:66ch;
  --mesure-courte:52ch;
}

/* ------------------------------------------------------------
   LE RYTHME. Les sections alternent au lieu de défiler à pas égal.
   On cible la position plutôt que d'ajouter une classe partout :
   une section sur trois respire plus large que ses voisines.
   ------------------------------------------------------------ */
section{padding-top:var(--sec-normal);padding-bottom:var(--sec-normal)}
section:nth-of-type(3n+1){padding-top:var(--sec-ample);padding-bottom:var(--sec-ample)}
section:nth-of-type(4n+3){padding-top:var(--sec-serre);padding-bottom:var(--sec-serre)}
/* Une section posée sur un fond différent porte déjà sa séparation :
   elle n'a pas besoin d'en plus. */
section[style*="background"]{padding-top:var(--sec-normal);padding-bottom:var(--sec-normal)}

/* ------------------------------------------------------------
   LA MESURE. Un paragraphe de 110 signes de large ne se lit pas,
   et c'est un tell : personne ne compose du texte comme ça à la main.
   ------------------------------------------------------------ */
.lead,.sub,section > .wrap > p{max-width:var(--mesure)}
.lettre p,.av-c p,.bp-c p{max-width:var(--mesure)}

/* ------------------------------------------------------------
   LE MOUVEMENT. Le fondu sur CHAQUE élément est un tell nommé.
   On le garde là où il porte une intention (le personnage qui
   flotte, la pulsation de disponibilité) et on le retire du reste.
   Une section qui apparaît en fondu au défilement n'apporte rien
   qu'un délai avant de pouvoir lire.
   ------------------------------------------------------------ */
.reveal{opacity:1 !important;transform:none !important;transition:none !important}

/* Les boutons s'adoucissent, ils ne claquent pas. */
.btn,.doc-btn,.car-b,.bp-b{transition:transform .18s cubic-bezier(.22,.61,.36,1),
  background-color .18s ease,box-shadow .18s ease}

/* ------------------------------------------------------------
   LES BORDURES. Aucune carte ne porte de filet gris.
   On neutralise à la source, sur toutes les feuilles chargées avant.
   ------------------------------------------------------------ */
.carte,.liv,.prof,.mission,.rass .r,.bloc3,.av-c,.bp-c,.eng,.step,.ch,.lot{
  border-left:none;border-right:none;border-bottom:none}

/* ------------------------------------------------------------
   LE CONTRASTE. Les gris sont resserrés : #7a7480 sur #FFFDFE était
   trop clair pour du corps de texte.
   ATTENTION, dette assumée : ces valeurs sont posées au jugé, elles
   ne sont PAS mesurées en APCA. Le seuil visé est Lc >= 75 pour le
   corps, >= 45 pour le gros ou gras, >= 30 pour le non textuel.
   À passer au mesureur avant la mise en ligne, c'est l'étape 4 du
   skill et elle n'est pas faite.
   ------------------------------------------------------------ */
:root{
  --gris:#5f5860;        /* était plus clair : Lc insuffisant sur --papier */
  --gris-clair:#7a727b;  /* réservé aux mentions, jamais au corps */
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* ---------- LE PIED DE PAGE COMMUN AUX QUATRE DOMAINES.
     Meme marque ecrite en petit, memes liens legaux, meme ordre.
     C'est la brique qui fait des quatre sites une seule entreprise
     aux yeux d'un visiteur et d'un moteur. ---------- */
footer .pied-marque{font-size:14px;line-height:1.6;color:var(--gris);margin:0 0 6px}
footer .pied-marque b{color:var(--enc)}
footer .pied-note{font-size:14px;line-height:1.6;color:var(--gris-clair);margin:0 0 16px;max-width:70ch}
footer .pied-note b{color:var(--gris)}
footer .pied-liens{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:16px;
  border-top:1px solid rgba(36,35,36,.1)}
footer .pied-liens a{font-size:14px;color:var(--gris);text-decoration:none}
footer .pied-liens a:hover{color:var(--rose-txt);text-decoration:underline;text-underline-offset:3px}