/* ======================================================================
   LE FIL DE CARRIÈRE - FEUILLE DE STYLE COMMUNE

   PROPRIÉTAIRE : LFDC 2 - Communication et visibilité.
   Ce fichier est une SOURCE de production, pas un livrable : il est
   modifié ici, déposé sur GitHub avec le paquet, puis redéposé au projet
   sous claude/site-style.css. Aucune autre conversation ne l'écrit.

   VERSION_CSS, dans generer.py, s'augmente à CHAQUE changement de ce
   fichier : c'est ce numéro qui force le rechargement chez les visiteurs.
   Un changement de style oublié dans VERSION_CSS produit un site qui
   s'affiche correctement chez nous et de travers chez le lecteur.

   Les blocs se numérotent à la suite, « v161, 12/10/2026 », avec la date
   et le motif. Ne jamais réutiliser un numéro.
   ====================================================================== */

@font-face {
  font-family: "Lora";
  src: url("fonts/lora.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --creme: #f4f1ea;
  --creme-fonce: #ebe5d8;
  --papier: #fbf9f4;
  --encre: #2f4459;
  --encre-douce: #4d6178;
  --texte: #2a333d;
  --terre: #b4532a;
  --terre-pale: #ead7c7;
  --trait: #d9d1c1;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --largeur: 68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--terre); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
a:focus-visible, .bouton:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 3px;
  border-radius: 4px;
}

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

/* ---------- En-tête ---------- */

.entete {
  padding-block: 3.5rem 1rem;
  text-align: center;
}

.entete a { text-decoration: none; }
.entete picture { display: block; }

.entete .logo {
  width: min(50rem, 94%);
  height: auto;
  margin: 0 auto;
  display: block;
}

.entete-page { padding-block: 2rem 0.5rem; }
.entete-page .logo { width: min(42rem, 90%); height: auto; display: block; }

.logo-texte {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  color: var(--encre);
  margin: 0;
  font-weight: 500;
}

.sous-titre {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.9rem;
  color: var(--encre);
  margin: 1.6rem 0 0;
}

.sous-titre span, .insecable { white-space: nowrap; }
.sous-titre .point { margin-inline: 0.9em; opacity: 0.7; }

/* ---------- Le fil ---------- */

.fil {
  display: block;
  width: min(30rem, 80%);
  height: auto;
  margin: 2.2rem auto;
  color: var(--terre);
  opacity: 0.55;
}

/* ---------- Accroche ---------- */

.accroche {
  text-align: center;
  padding-block: 2.5rem 3rem;
}

.accroche h1 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--encre);
  font-size: clamp(1.75rem, 4.2vw, 2.6rem);
  line-height: 1.25;
  max-width: 42rem;
  margin: 0 auto;
}

.accroche .chapeau {
  max-width: 40rem;
  margin: 1.4rem auto 0;
  font-size: 1.15rem;
  color: var(--encre-douce);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2.2rem;
}

.bouton {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--encre);
  transition: background 0.15s, color 0.15s;
}

.bouton-plein { background: var(--encre); color: var(--papier); }
.bouton-plein:hover { background: var(--terre); border-color: var(--terre); color: var(--papier); }
.bouton-creux { color: var(--encre); background: transparent; }
.bouton-creux:hover { background: var(--encre); color: var(--papier); }

/* ---------- Sections ---------- */

section { padding-block: 3.5rem; }

.titre-section {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--terre);
  text-align: center;
  margin: 0 0 0.6rem;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--encre);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: 38rem;
}

/* ---------- Prestations ---------- */

.prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}

.carte {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}

.carte .public {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terre);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.carte h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre);
  font-size: 1.35rem;
  margin: 0 0 0.9rem;
}

.carte p { margin: 0 0 1rem; }

.carte ul {
  margin: auto 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--trait);
  list-style: none;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

.carte li { padding-left: 1.2rem; position: relative; margin-bottom: 0.35rem; }
.carte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6rem;
  height: 2px;
  background: var(--terre);
}

.mention-devis {
  text-align: center;
  margin: 2rem auto 0;
  color: var(--encre-douce);
  font-size: 0.98rem;
}

/* ---------- Engagements ---------- */

.bande {
  background: var(--papier);
  border-block: 1px solid var(--trait);
}

.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 2.5rem;
}

.engagements h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre);
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.engagements p { margin: 0; }

/* ---------- Qui suis-je ---------- */

.portrait {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 52rem;
  margin: 0 auto;
}

.photo {
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--terre-pale);
  border: 5px solid var(--papier);
  box-shadow: 0 0 0 1px var(--trait);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--encre);
}

.photo img { width: 100%; height: 100%; object-fit: cover; }

.portrait h2 { text-align: left; margin: 0 0 0.3rem; }

.portrait .fonction {
  font-family: var(--serif);
  color: var(--terre);
  margin: 0 0 1.2rem;
  font-size: 1.05rem;
}

.portrait p { margin: 0 0 1rem; }

/* ---------- Contact ---------- */

.contact { text-align: center; }

.contact .courriel {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--encre);
  word-break: break-word;
}

.contact .zone { color: var(--encre-douce); margin-top: 1.5rem; }

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

.portrait .actions { justify-content: flex-start; margin-top: 1.2rem; }

.pied {
  border-top: 1px solid var(--trait);
  padding-block: 2rem 2.5rem;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.pied-colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: start;
}

.pied-colonnes p { margin: 0 0 0.5rem; }
.pied-colonnes ul { list-style: none; margin: 0; padding: 0; }
.pied-colonnes li { margin-bottom: 0.35rem; }

.pied-titre {
  font-family: var(--serif);
  color: var(--encre);
  font-size: 1rem;
  margin-bottom: 0.7rem !important;
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--trait);
}

.pied a { color: var(--encre-douce); text-decoration: none; }
.pied a:hover { color: var(--terre); text-decoration: underline; }

/* ---------- Page mentions légales ---------- */

.page-texte { max-width: 44rem; margin: 0 auto; padding-block: 1rem 4rem; }
.page-texte h1 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--encre);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  text-align: center;
  margin: 0 0 2.5rem;
}
.page-texte h2 {
  text-align: left;
  font-size: 1.3rem;
  margin: 2.2rem 0 0.8rem;
  max-width: none;
}
.page-texte p, .page-texte address { margin: 0 0 0.9rem; font-style: normal; }
.retour { display: inline-block; margin-top: 2rem; }

/* ---------- Petits écrans ---------- */

@media (max-width: 640px) {
  .entete { padding-block: 2.5rem 0.5rem; }
  .entete .logo { width: 100%; }
  .entete-page .logo { width: 92%; }
  .entete-page .nav-publics { margin-top: 2rem; }
  .sous-titre { letter-spacing: 0.18em; font-size: 0.78rem; line-height: 2; }
  .sous-titre .point { margin-inline: 0.5em; }
  section { padding-block: 2.5rem; }
  .portrait { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .portrait .photo { margin: 0 auto; width: 10rem; height: 10rem; }
  .portrait h2 { text-align: center; }
  .portrait p:not(.fonction) { text-align: left; }
  .sous-titre .point { display: none; }
  .sous-titre span:not(.point) { display: block; }
  /* Pied de page sur téléphone : trois blocs empilés, séparés par un filet,
     et les liens du site sur deux colonnes pour ne pas allonger la page. */
  .pied { padding-block: 1.5rem 2rem; }
  .pied-colonnes { grid-template-columns: 1fr; text-align: center; gap: 0; }
  .pied-colonnes > div { padding-block: 1.25rem; }
  .pied-colonnes > div + div { border-top: 1px solid var(--trait); }
  .pied-colonnes > div:first-child { padding-top: 0.25rem; }
  .pied-titre { margin-bottom: 0.5rem !important; }
  .pied-colonnes li { margin-bottom: 0.2rem; }
  .pied-colonnes .liens-site li { margin-bottom: 0.15rem; }
  .pied-colonnes > div:last-child { padding-bottom: 0.25rem; }
  .pied-bas { justify-content: center; text-align: center; margin-top: 1.2rem; }
  .pied-bas .signature { display: block; }
  .pied-bas .signature .point { display: none; }
}

/* ---------- Publics (entreprises / particuliers) ---------- */

.public-titre {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre);
  font-size: 1.25rem;
  margin: 2.5rem 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
}
.public-titre span {
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terre);
  font-weight: 600;
}
#prestations h2 { margin-bottom: 1rem; }


/* ---------- Choix du public ---------- */

.choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.choix a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 1.75rem 1.6rem 1.5rem;
  text-decoration: none;
  color: var(--texte);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.choix a:hover {
  border-color: var(--encre);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(47, 69, 94, 0.08);
}

.choix .qui {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--encre);
  line-height: 1.3;
}

.choix .detail { color: var(--encre-douce); font-size: 0.98rem; }

.choix .suite {
  margin-top: auto;
  padding-top: 0.8rem;
  color: var(--terre);
  font-weight: 600;
  font-size: 0.95rem;
}

.vous-etes {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--encre);
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  margin: 0 auto 2rem;
}

/* ---------- Pages par public ---------- */

.nav-publics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  font-size: 0.92rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.entete-page .nav-publics { margin-top: 2.4rem; }
.nav-rubriques {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.92rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}
.nav-rubriques a { color: var(--encre); text-decoration: none; border-bottom: 1px solid transparent; }
.nav-rubriques a:hover { border-bottom-color: var(--terre); }
.nav-rubriques a[aria-current] { color: var(--terre); border-bottom-color: var(--terre); font-weight: 600; }

.nav-publics li:first-child { color: var(--encre-douce); }
.nav-publics a { color: var(--encre); text-decoration: none; border-bottom: 1px solid transparent; }
.nav-publics a:hover { border-bottom-color: var(--terre); }
.nav-publics a[aria-current="page"] { color: var(--terre); border-bottom-color: var(--terre); font-weight: 600; }

.intro-page { text-align: center; padding-block: 2.5rem 1rem; }
.intro-page .titre-section { margin-bottom: 0.8rem; }
.intro-page h1 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--encre);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.25;
  max-width: 44rem;
  margin: 0 auto;
}
.intro-page .chapeau {
  max-width: 42rem;
  margin: 1.2rem auto 0;
  font-size: 1.1rem;
  color: var(--encre-douce);
}

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem 2rem;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapes li { counter-increment: etape; }
.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1.5px solid var(--terre);
  color: var(--terre);
  font-family: var(--serif);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.etapes h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre);
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}
.etapes p { margin: 0; }

.note { text-align: center; color: var(--encre-douce); font-size: 0.98rem; max-width: 42rem; margin: 2rem auto 0; }

.engagements.quatre { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }

.contact .telephone { margin-top: 0.4rem; color: var(--encre-douce); }
.contact .telephone a { font-family: var(--serif); font-size: 1.2rem; color: var(--encre); white-space: nowrap; }

/* ---------- Version 2 (11/09/2026) ---------- */

.conteneur.etroit, .etroit { max-width: 46rem; }
.etroit > p { margin: 0 0 1rem; }

/* Repères sous l'accroche */
.reperes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--serif);
  color: var(--encre);
  font-size: 0.98rem;
}
.reperes li { padding-inline: 1rem; }
.reperes li + li { border-left: 1px solid var(--terre); }

/* Situations (citations) */
.situations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.situations li {
  font-family: var(--serif);
  font-style: italic;
  color: var(--encre);
  background: var(--creme);
  border-left: 3px solid var(--terre);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.2rem;
  line-height: 1.5;
}
section.conteneur .situations li { background: var(--papier); }
.situations.liens { grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); }
.situations.liens li { padding: 0; }
.situations.liens a {
  display: block;
  padding: 1rem 1.2rem;
  color: var(--encre);
  text-decoration: none;
}
.situations.liens a:hover { color: var(--terre); }

/* Liste « un bilan utile quand » */
.utile {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.utile li {
  position: relative;
  padding: 0.55rem 0 0.55rem 2rem;
  border-bottom: 1px solid var(--trait);
}
.utile li::before {
  content: "✓";
  position: absolute;
  left: 0.2rem;
  top: 0.55rem;
  color: var(--terre);
  font-weight: 700;
}

/* Ce que l'on a en main */
.livrables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.livrables li { padding-left: 1.2rem; position: relative; }
.livrables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.6rem;
  height: 2px;
  background: var(--terre);
}
.livrables strong { color: var(--encre); }

/* Exemples de situations */
.exemples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}
.exemples article {
  border-top: 2px solid var(--terre);
  padding-top: 1rem;
}
.exemples h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre);
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}
.exemples p { margin: 0; }

/* Page À propos */
.portrait.apropos { margin-bottom: 1.5rem; }
.parcours {
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}
.parcours li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--trait);
}
.parcours .fonction-parcours {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--terre);
}
.parcours strong { color: var(--encre); }
.formation { color: var(--encre-douce); }
.engagements.trois { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); max-width: 58rem; margin: 0 auto; }
.engagements h3 a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--terre); }

/* Pied de page */
.pied .signature { white-space: nowrap; }

@media (max-width: 640px) {
  .reperes { flex-direction: column; align-items: center; }
  .reperes li + li { border-left: 0; }
  .parcours li { grid-template-columns: 1fr; gap: 0.2rem; }
  .pied .signature { display: block; white-space: normal; }
}

.encadre {
  border-left: 3px solid var(--terre);
  background: var(--creme);
  padding: 1rem 1.2rem;
  border-radius: 0 10px 10px 0;
  font-family: var(--serif);
  color: var(--encre);
}

/* Relecture du 11/09/2026 */
.chapo-section { text-align: center; color: var(--encre-douce); max-width: 42rem; margin: -1.6rem auto 2rem; }
.exemples.fiches { grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 1.5rem 1.75rem; }
.exemples.fiches h3 { font-size: 1.05rem; }
.exemples.fiches p { font-size: 0.97rem; color: var(--texte); }
.livrables-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem 3rem; }
.livrables-deux h3 { font-family: var(--serif); font-weight: 600; color: var(--encre); font-size: 1.15rem; margin: 0 0 1rem; }
.livrables-deux .livrables { grid-template-columns: 1fr; gap: 0.7rem; }
.contact .actions + .zone { margin-top: 1.5rem; }
.contact .zone + .actions { margin-top: 1.2rem; }

.maj {
  font-size: .85rem;
  color: #6B7A76;
  margin-block: .9rem 0;
  font-style: italic;
}

.etroit > p.note { margin: 2rem auto 0; }

/* ================================================================
   Refonte de la navigation, 21/09/2026 (générateur v7)
   Bandeau, menu, accueil, fil d'Ariane, cartes des décryptages,
   bande d'appel, page « Prendre contact », textes justifiés.
   ================================================================ */

/* ---------- Bandeau ---------- */
.bandeau {
  position: sticky; top: 0; z-index: 20;
  background: var(--papier); border-bottom: 1px solid var(--trait);
}
.bandeau-ligne { display: flex; align-items: center; gap: .75rem; padding-block: .55rem; }
.bandeau .marque { display: block; line-height: 0; }
.bandeau .marque img { width: 48px; height: 48px; border-radius: 3px; }
.cta-contact {
  margin-left: auto; display: inline-flex; align-items: center;
  background: var(--encre); color: var(--papier); border: 1.5px solid var(--encre);
  border-radius: 999px; padding: .55rem 1rem; font-weight: 600; font-size: .9rem;
  text-decoration: none; white-space: nowrap;
}
.cta-contact:hover, .cta-contact[aria-current] { background: var(--terre); border-color: var(--terre); color: var(--papier); }

.menu > summary {
  list-style: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 8px; cursor: pointer; color: var(--encre);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--creme); }
.menu > summary:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; }
.menu .ico-fermer { display: none; }
.menu[open] .ico-ouvrir { display: none; }
.menu[open] .ico-fermer { display: block; }
.menu-panneau {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papier); border-bottom: 1px solid var(--trait);
  box-shadow: 0 18px 30px -18px rgba(31, 42, 54, .35);
  max-height: calc(100vh - 70px); overflow-y: auto;
}
.menu-groupes { display: grid; gap: 1.1rem; padding-block: .9rem 1.4rem; }
@media (min-width: 760px) { .menu-groupes { grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-block: 1.4rem 1.8rem; } }
.menu-titre {
  margin: 0 0 .25rem; font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .18em; font-size: .72rem; color: var(--terre);
}
.groupe-menu ul { list-style: none; margin: 0; padding: 0; }
.groupe-menu a {
  display: block; padding: .6rem 0; border-bottom: 1px solid var(--creme-fonce);
  text-decoration: none; font-family: var(--serif); font-size: 1.12rem; color: var(--encre);
}
.groupe-menu li:last-child a { border-bottom: 0; }
.groupe-menu a:hover, .groupe-menu a[aria-current="page"] { color: var(--terre); }

/* ---------- Fil d'Ariane ---------- */
.ariane { font-size: .85rem; color: var(--encre-douce); margin: 0 0 1.4rem; text-align: left; }
.ariane a { color: var(--encre-douce); }
.ariane a:hover { color: var(--terre); }
.intro-page { padding-top: 1.4rem; }

/* ---------- Accueil ---------- */
.tete-accueil { text-align: center; padding-block: 2rem 1.6rem; }
.tete-accueil .logotype { width: min(38rem, 100%); height: auto; margin-inline: auto; }
.tete-accueil .devise {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: .2em;
  font-size: .68rem; color: var(--encre-douce); margin: .8rem 0 1.35rem; line-height: 1.7;
}
.tete-accueil .devise span { white-space: nowrap; }
.tete-accueil h1 {
  font-family: var(--serif); font-weight: 500; color: var(--encre);
  font-size: clamp(1.25rem, 3.4vw, 1.65rem); line-height: 1.35; max-width: 34rem; margin: 0 auto;
}
.tete-accueil .chapeau { color: var(--encre-douce); font-size: 1.03rem; margin: 1rem 0 0; }
@media (min-width: 760px) { .tete-accueil .chapeau { max-width: 44rem; margin-inline: auto; } }
.vous-etes-ligne, .actions-tete { display: none !important; }

.selecteur { padding-block: 0 2.4rem; }
.selecteur .libelle { font-family: var(--serif); font-style: italic; color: var(--encre-douce); margin: 0 0 .6rem; }
.selecteur ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.selecteur a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1.1rem; border: 1.5px solid var(--encre); border-radius: 14px;
  text-decoration: none; font-weight: 600; background: var(--papier); color: var(--encre);
}
.selecteur a:hover { background: var(--encre); color: var(--papier); }
@media (min-width: 760px) { .selecteur ul { grid-template-columns: repeat(3, 1fr); } }

/* Accueil sur ordinateur : l'organisation du site d'avant la refonte */
@media (min-width: 1024px) {
  .tete-accueil { padding-block: 3rem 3.2rem; }
  .tete-accueil .logotype { width: min(50rem, 94%); }
  .tete-accueil .devise { font-size: .9rem; letter-spacing: .28em; color: var(--encre); margin: 1.6rem 0; }
  .vous-etes-ligne {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem;
    margin: 0 0 2.6rem; padding: 0; list-style: none; font-size: 1.02rem;
  }
  .vous-etes-ligne .etiquette { color: var(--encre-douce); }
  .vous-etes-ligne a { color: var(--encre); text-decoration: none; border-bottom: 1px solid transparent; }
  .vous-etes-ligne a:hover { border-bottom-color: var(--terre); }
  /* Titre d'accueil, 29/09/2026 : le nouveau titre fait 150 caractères contre 87.
     Taille réduite de 2.6 à 2.2rem au-delà de 760 px pour que la tête de page,
     jusqu'aux deux boutons, tienne sans faire défiler sur un écran d'ordinateur.
     Sur téléphone, le clamp est inchangé : l'affichage y convenait. */
  .tete-accueil h1 { font-size: 2.2rem; max-width: 46rem; line-height: 1.25; }
  .tete-accueil .chapeau { font-size: 1.12rem; }
  .actions-tete { display: flex !important; margin-top: 2rem; }
  .selecteur { display: none; }
}

/* ---------- Cartes des décryptages ---------- */
.cartes-d { display: grid; gap: 1.3rem; margin-top: 1.4rem; text-align: left; }
@media (min-width: 760px) { .cartes-d.deux { grid-template-columns: 1fr 1fr; } }
.carte-d { background: var(--papier); border: 1px solid var(--trait); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.bande .carte-d { background: var(--creme); }
.carte-d .vignette { display: block; line-height: 0; }
.carte-d .vignette img { width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.carte-d .corps { padding: 1rem 1.15rem 1.2rem; display: grid; gap: .45rem; }
.carte-d .date { font-size: .85rem; color: var(--encre-douce); margin: 0; }
.carte-d h3 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; line-height: 1.35; margin: 0; }
.carte-d h3 a { color: var(--encre); text-decoration: none; }
.carte-d h3 a:hover { color: var(--terre); }
.carte-d p { margin: 0; }
.lien-suite { font-weight: 600; text-decoration: none; }
.lien-suite:hover { text-decoration: underline; }
.avec-rail .actions { margin-top: 1.6rem; }

/* ---------- Bande d'appel ---------- */
.appel { background: var(--encre); color: var(--papier); }
.appel h2 { color: var(--papier); text-align: left; margin: 0 0 .6rem; }
.appel p { color: #d6dde6; max-width: 38rem; margin: 0; }
.appel .actions { justify-content: flex-start; margin-top: 1.2rem; }
.appel .bouton-plein { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.appel .bouton-plein:hover { background: var(--terre); border-color: var(--terre); color: var(--papier); }

/* ---------- Page « Prendre contact » ---------- */
.contact-page { padding-top: 1rem; }
.portes { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .portes { grid-template-columns: 1fr 1fr; } }
.porte { background: var(--papier); border: 1px solid var(--trait); border-radius: 6px; padding: 1.3rem 1.25rem; display: grid; gap: .7rem; align-content: start; }
.porte h2 { text-align: left; margin: 0; font-size: 1.35rem; }
.porte p { margin: 0; }
.porte .titre-section { text-align: left; margin: 0; }
.coordonnees { margin-top: 1.4rem; background: var(--papier); border: 1px solid var(--trait); border-radius: 6px; padding: 1.3rem 1.25rem; }
.coordonnees .titre-section { text-align: left; }
.coordonnees dl { margin: 0; display: grid; gap: .8rem; }
@media (min-width: 760px) { .coordonnees dl { grid-template-columns: repeat(3, auto); justify-content: start; gap: 1rem 3rem; } }
.coordonnees dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--encre-douce); }
.coordonnees dd { margin: 0; font-family: var(--serif); font-size: 1.12rem; }
.coordonnees dd a { color: var(--encre); overflow-wrap: anywhere; }

/* ---------- Textes justifiés, avec césure française (lang="fr") ---------- */
.tete-accueil .chapeau, .intro-page .chapeau, .etroit > p, .portrait p:not(.fonction),
.engagements p, .exemples p, .carte-d p:not(.date), .carte > p, .porte p, .appel p, .situations li {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.etroit > p.note, .note { text-align: center; hyphens: manual; }
.porte p:has(.bouton) { text-align: left; }

/* « Ce qui fait la différence » : deux colonnes sur grand écran, comme dans la maquette,
   pour que le texte justifié garde une largeur de ligne suffisante */
#proposition .engagements.quatre { grid-template-columns: 1fr; gap: 1.8rem 2.6rem; max-width: 56rem; margin-inline: auto; }
@media (min-width: 760px) { #proposition .engagements.quatre { grid-template-columns: 1fr 1fr; } }

/* ---------- Retouches du 22/09/2026, relecture de Yannick ---------- */
/* Bande « Une question ? » : centrée comme le bloc de présentation, fond clair
   dans la gamme du site au lieu du bleu d'encre, bouton au centre (atteignable au pouce). */
.appel { background: var(--terre-pale); color: var(--texte); border-top: 1px solid var(--trait); text-align: center; }
.appel h2 { color: var(--encre); text-align: center; }
.appel p { color: var(--texte); max-width: 38rem; margin: 0 auto; text-align: center; hyphens: manual; -webkit-hyphens: manual; }
.appel .actions { justify-content: center; }
.appel .bouton-plein { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.appel .bouton-plein:hover { background: var(--terre); border-color: var(--terre); color: var(--papier); }
@media (max-width: 640px) { .appel br { display: none; } }

/* Chapeaux sous un titre centré : justifiés, dernière ligne centrée,
   pour qu'une phrase courte ne paraisse pas décalée à gauche. */
.tete-accueil .chapeau { text-align-last: center; }

/* Page « Prendre contact » : contenu des portes et des coordonnées centré, trois colonnes égales. */
.porte { text-align: center; justify-items: center; }
.porte .titre-section, .porte h2, .porte p { text-align: center; }
.porte p:not(:has(.bouton)) { text-align: justify; text-align-last: center; max-width: 30rem; }
.coordonnees, .coordonnees .titre-section { text-align: center; }
@media (min-width: 760px) { .coordonnees dl { grid-template-columns: repeat(3, 1fr); justify-content: stretch; gap: 1rem 1.5rem; } }
/* Chapeaux des pages intérieures et textes courts des portes : centrés.
   Justifiés sur deux lignes, ils creusaient de grands blancs sur téléphone. */
.intro-page .chapeau { text-align: center; hyphens: manual; -webkit-hyphens: manual; }
.porte p, .porte p:not(:has(.bouton)) { text-align: center; hyphens: manual; -webkit-hyphens: manual; }
.appel h2 { margin: 0 auto .7rem; }
.appel p { max-width: 46rem; }
/* Chapeaux longs (pages intérieures, décryptages) : justifiés, dernière ligne centrée.
   Chapeau court de la page de contact : centré. */
/* v99, 06/10/2026 : LA DERNIÈRE LIGNE DES DEUX PARAGRAPHES D'INTRODUCTION EST
   AU FER À GAUCHE, sur les dix-huit pages intérieures. Demande de Yannick, qui
   l'avait déjà obtenue le 05/10 pour les deux paragraphes illustrés de
   l'accueil. LE HAUT DE L'ACCUEIL N'EST PAS TOUCHÉ : il l'a exclu lui-même,
   sa forme ayant été réglée au pixel la veille. */
.intro-page .chapeau { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; }
/* Le chapeau de la page de contact est centré, et non justifié : sa dernière
   ligne suit donc le centrage, sans quoi elle partirait seule à gauche. */
main:has(.contact-page) .intro-page .chapeau { text-align: center; text-align-last: auto; hyphens: manual; -webkit-hyphens: manual; }
/* Surtitres des sections étroites : centrés comme le titre qu'ils annoncent
   (la règle de justification des paragraphes les avait décalés à gauche). */
.etroit > p.titre-section { text-align: center; hyphens: manual; -webkit-hyphens: manual; }
/* Mentions légales et page 404 : paragraphes justifiés comme le reste du site. */
.page-texte p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Bande « Une question ? », choix de Yannick du 22/09/2026 (variante D) :
   fond crème du site, texte dans un encadré clair aux bords fins. */
.appel { background: var(--creme); border-top: 1px solid var(--trait); }
.appel .conteneur {
  max-width: min(46rem, calc(100% - 2rem)); margin-inline: auto;
  background: var(--papier); border: 1px solid var(--trait); border-radius: 6px;
  padding: 2rem 1.5rem;
}

/* Bande « Une question, un projet ? », 22/09/2026 : fond papier, celui des bandes
   comme « Du droit à la direction des ressources humaines » ; encadré conservé. */
.appel { background: var(--papier); }
.appel .conteneur { background: var(--papier); }
/* Sur téléphone aussi, une phrase par ligne dans la bande. */
@media (max-width: 640px) { .appel br { display: inline; } }
/* 22/09/2026, demande de Yannick : pas d'encadré autour du texte de la bande. */
.appel .conteneur { border: 0; border-radius: 0; background: transparent; padding: 0 1.5rem; max-width: 46rem; }

/* Alternance foncé / clair de haut en bas, demande de Yannick du 22/09/2026.
   Crème (--creme) = foncé, papier (--papier) = clair. Le générateur pose fond-fonce ou
   fond-clair sur chaque section, la bande d'appel et le pied de page. L'ombre portée étend
   le fond sur toute la largeur de l'écran, même pour une section de largeur limitée. */
.fond-clair, .fond-fonce { border-block: 0; clip-path: inset(0 -100vmax); }
.fond-clair { background: var(--papier); box-shadow: 0 0 0 100vmax var(--papier); }
.fond-fonce { background: var(--creme); box-shadow: 0 0 0 100vmax var(--creme); }
.pied { border-top: 0; background: var(--papier); }
.appel { border-top: 0; }
.pied.fond-fonce { background: var(--creme); }
.pied.fond-clair { background: var(--papier); }


/* Cartes de prestation : la liste suit directement le texte (22/09/2026).
   Elle était poussée en bas de la carte, ce qui creusait un vide inexpliqué dans la carte la plus courte. */
.carte ul { margin-top: 0; }

/* Honoraires de la page Particuliers (22/09/2026) : en bas de page, en caractères discrets,
   pour que l'œil aille d'abord à la prestation. */
.honoraires { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem 2.5rem; max-width: 66rem; margin: 0 auto; }
.honoraires h3 { font-family: var(--serif); font-weight: 600; color: var(--encre); font-size: 1.05rem; margin: 0 0 .5rem; }
.honoraires p { margin: 0 0 .4rem; font-size: .9rem; color: var(--encre-douce); text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.honoraires .prix-montant { color: var(--texte); }

/* Fiches pratiques (22/09/2026) : page de liste par thème, et fiche. */
.theme-fiches { margin-top: 1.6rem; }
.theme-fiches:first-child { margin-top: 0; }
.theme-fiches h2 { font-size: 1.2rem; text-align: left; margin: 0 0 .4rem; padding-bottom: .4rem; border-bottom: 1.5px solid var(--encre); max-width: none; }
.fiches-apercu { list-style: none; margin: 0; padding: 0; }
.fiches-apercu li { border-bottom: 1px solid var(--trait); padding-block: .9rem; display: grid; gap: .25rem; }
.fiches-apercu a { font-family: var(--serif); font-size: 1.12rem; color: var(--encre); text-decoration: none; }
.fiches-apercu a:hover { color: var(--terre); text-decoration: underline; }
.fiches-apercu .resume-fiche { font-size: .92rem; color: var(--encre-douce); }
.fiche-corps > h2 { text-align: left; margin: 2rem 0 .8rem; max-width: none; font-size: clamp(1.25rem, 2.6vw, 1.5rem); }
.fiche-corps > h2:first-child { margin-top: 0; }

/* Accueil, bloc Fiches pratiques (22/09/2026) : le chapo reste centré et collé au titre, comme celui des décryptages */
.etroit > p.chapo-section { text-align: center; hyphens: manual; -webkit-hyphens: manual; margin: -1.6rem auto 2rem; }

/* Accueil sur téléphone (22/09/2026) : les décryptages en cartes compactes, vignette photo à gauche,
   date et titre à droite ; le résumé et le lien « Lire » restent sur ordinateur et sur la page Décryptages */
@media (max-width: 759px) {
  .avec-rail .carte-d { flex-direction: row; align-items: stretch; }
  .avec-rail .carte-d .vignette { flex: 0 0 28%; }
  .avec-rail .carte-d .vignette img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 100% center; }
  .avec-rail .carte-d .corps { padding: .75rem .9rem; gap: .3rem; align-content: center; }
  .avec-rail .carte-d .corps > p:not(.date), .avec-rail .carte-d .lien-suite { display: none; }
  .avec-rail .carte-d .date { font-size: .78rem; }
  .avec-rail .carte-d h3 { font-size: 1rem; }
  .avec-rail .cartes-d { gap: .9rem; }
}
.avec-rail .carte-d .vignette picture { display: block; height: 100%; }

/* Accueil sur ordinateur (22/09/2026) : le titre, que le visuel dit déjà, est masqué à l'écran mais reste
   dans la page (moteurs de recherche, lecteurs d'écran) ; date, résumé et « Lire le décryptage » restent */
@media (min-width: 760px) {
  .avec-rail .carte-d h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .avec-rail .cartes-d { max-width: 860px; margin-inline: auto; }
}

/* Page Particuliers, 22/09/2026 : les neuf situations en liste compacte, le titre portant l'exemple
   et une seule ligne d'explication ; le bloc tenait auparavant près de deux écrans sur téléphone */
.exemples.compacte { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .1rem 2.5rem; }
.exemples.compacte article { border-top: 1px solid var(--trait); padding: .5rem 0; }
.exemples.compacte h3 { font-size: 1rem; margin: 0; }
.exemples.compacte p { font-size: .9rem; color: var(--encre-douce); margin: .15rem 0 0; }

/* Honoraires : même taille de texte que les autres sections de la page */
.honoraires p { font-size: 1rem; }
.honoraires .prix-montant { font-weight: 400; }

/* Fiches pratiques : le bouton de fin de fiche est centré */
.fiche-corps .actions { justify-content: center; }
.fiche-corps .actions .bouton { text-align: center; }

/* Accueil, bandeau de chiffres sourcés (23/09/2026) */
.chiffres { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .chiffres { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; } }
.chiffres li { text-align: center; padding: 0 .2rem; }
.chiffres .nombre { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 3.2rem); line-height: 1; color: var(--encre); margin: 0 0 .6rem; }
.chiffres .nombre::after { content: ""; display: block; width: 2.6rem; height: 3px; background: var(--terre); margin: .55rem auto 0; }
.chiffres .dit { margin: 0; text-align: center; hyphens: manual; -webkit-hyphens: manual; }
.chiffres .source-chiffre { margin: .5rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--encre-douce); text-align: center; hyphens: manual; -webkit-hyphens: manual; }
.chiffres .nombre { font-size: clamp(2rem, 5vw, 2.7rem); }

/* Page de contact : bouton discret vers la page LinkedIn du cabinet, et note repoussée (24/09/2026) */
.contact-page .actions.suivre { margin-top: 2.2rem; }
.contact-page .actions.suivre + .note { margin-top: 2.2rem; }

/* Page Particuliers : la troisième prestation, seule sous les deux autres (24/09/2026) */
.carte-seule { margin-top: 0; }
.carte-seule h3 { margin-top: .2rem; }
.carte-seule ul { display: grid; gap: .35rem; }
@media (min-width: 760px) { .carte-seule ul { grid-template-columns: repeat(3, 1fr); gap: .35rem 1.5rem; } }

/* Intertitres de groupe dans la section Prestations (24/09/2026) */

/* Intertitres de groupe de la section Prestations : alignés à gauche, terre cuite, filet dessous (24/09/2026) */
.titre-groupe { font-family: var(--serif); font-size: 1.25rem; color: var(--terre); text-align: left; margin: 2rem 0 .3rem; padding-left: 1.8rem; }
.titre-groupe::after { content: ""; display: block; width: 2.4rem; height: 2px; background: var(--terre); margin-top: .45rem; }
.titre-groupe.second { margin-top: 2.8rem; }
.groupe-note { text-wrap: balance; font-style: italic; font-size: .92rem; color: var(--encre-douce); text-align: left; margin: .7rem 0 1.2rem; padding-left: 1.8rem; hyphens: manual; }
.titre-groupe + .prestations { margin-top: 1.2rem; }
/* La carte seule a la largeur d'une carte de la grille, alignée à gauche */
.carte-seule { max-width: calc((100% - 1.5rem) / 2); }
@media (max-width: 759px) { .carte-seule { max-width: none; } }
.carte-seule ul, .carte-seule .detail-carte ul { display: block; }
/* Détail des cartes : replié sur téléphone */
.detail-carte { margin-top: auto; }
.detail-carte summary { cursor: pointer; font-size: .92rem; color: var(--terre); list-style: none; padding-top: .8rem; }
.detail-carte summary::-webkit-details-marker { display: none; }
/* v99 : le chevron est dessiné, voir la règle commune plus bas. */
.detail-carte[open] summary { display: none; }
/* Page de contact : deux blocs côte à côte, boutons des portes alignés */
.coordonnees-deux { display: grid; gap: 1.2rem; margin-top: 1.4rem; }

.coordonnees-deux .coordonnees { margin-top: 0; display: flex; flex-direction: column; }
.coordonnees-deux .coordonnees dl { flex: 1; }
@media (min-width: 760px) { .coordonnees-deux .coordonnees dl { grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; } }
.contact-page .porte { display: flex; flex-direction: column; }
.contact-page .porte p:has(.bouton) { margin-top: auto; }
.coordonnees-deux .actions.suivre { margin-top: 1.4rem; }

/* Page de contact : boutons des portes centrés, et blocs de coordonnées sans cadre (24/09/2026) */
.contact-page .porte p:has(.bouton) { text-align: center; }
.coordonnees-deux .coordonnees { background: none; border: 0; border-radius: 0; padding: 0 1.2rem; }
.coordonnees-deux .coordonnees + .coordonnees { border-top: 1px solid var(--trait); padding-top: 1.6rem; }
.coordonnees-deux { gap: 1.6rem; margin-top: 2.4rem; max-width: 40rem; margin-inline: auto; }
@media (max-width: 759px) { .groupe-note br { display: none; } }

/* Page de contact sur téléphone : coordonnées sur deux colonnes, boutons sur une ligne (24/09/2026) */
@media (max-width: 759px) {
  .coordonnees-deux .actions.suivre { margin-top: 1rem; }
  .contact-page .porte { padding-block: 1.5rem; }
}

/* Page « Les chiffres » : un repère = un nombre, une phrase, deux lignes, sa source (24/09/2026) */
.repere { margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--trait); }
.repere:first-of-type { border-top: 0; padding-top: 0; }
.repere-nombre { font-family: var(--serif); font-size: clamp(1.9rem, 4.5vw, 2.5rem); line-height: 1.1; color: var(--encre); margin: 0; }
.repere-nombre::after { content: ""; display: block; width: 2.4rem; height: 2px; background: var(--terre); margin-top: .5rem; }
.repere-dit { font-family: var(--serif); font-size: 1.12rem; color: var(--encre); margin: .8rem 0 0; text-align: left; hyphens: manual; }
.repere-note { margin: .5rem 0 0; font-size: .96rem; color: var(--encre-douce); text-align: left; }
.repere .source-chiffre { display: block; margin: .5rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--encre-douce); text-align: left; }
.etroit > p.aller-plus-loin { margin: 2rem 0 0; font-size: .94rem; color: var(--encre-douce); text-align: left; hyphens: manual; }
.ecartes { background: var(--papier); border-radius: 6px; }
.ecartes { padding-inline: 1.6rem; }
.etroit.ecartes > p { font-size: .96rem; }

/* Bandeau de l'accueil : le renvoi vers la page des chiffres (24/09/2026) */
.chiffres .lien-chiffre { margin: .6rem 0 0; font-size: .82rem; }
/* Seconde salve dans les pages de public */
.deux-reperes { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
@media (min-width: 760px) { .deux-reperes { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.deux-reperes .repere { margin: 0; padding-top: 0; border-top: 0; }
.deux-reperes .repere-nombre { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.deux-reperes .repere-dit { font-size: 1.02rem; }

/* Fiche contact à télécharger, au bas de chaque bloc de coordonnées (25/09/2026). */
.lien-vcard { margin: .9rem 0 0; font-size: .86rem; text-align: center; }
.lien-vcard a { color: var(--terre); text-underline-offset: .2em; }

/* Coupure interdite au fil du texte, pour les noms composés qui ne doivent pas se briser :
   « Île-de-France » se coupait après « Île-de- » dans la colonne étroite du pied (25/09/2026). */
.insecable { white-space: nowrap; }

/* Les trois portes d'entrée de l'accueil (25/09/2026, retour de Morgane Duval) : la ligne
   « Vous êtes : » ne disait que le public, jamais ce qu'on trouve derrière. Trois cartes la
   remplacent, sur une seule colonne au téléphone, deux à partir de 760 px, trois à partir de
   1000 px, la grille de .portes servant de base. */
/* Une grille de TROIS cartes ne passe jamais par deux colonnes : deux cartes plus une orpheline
   est pire qu'une colonne unique. Elle est donc soit à trois colonnes, soit à une (25/09/2026). */
.portes-trois { grid-template-columns: 1fr; }
@media (min-width: 960px) { .portes-trois { grid-template-columns: 1fr 1fr 1fr; } }
.portes-trois .porte { display: flex; flex-direction: column; }
.portes-trois .porte p:last-child { margin-bottom: 0; }
/* « Un particulier » est le seul public dont les deux prestations vivent sur
   deux pages, donc sa carte porte deux liens quand les autres en portent un.
   Sans ce filet d'air, les deux se lisent comme une seule phrase (16/10/2026). */
/* LES DEUX ENTRÉES DE LA CARTE « UN PARTICULIER », 16/10/2026.
   Ce public est le seul dont les deux prestations vivent sur deux pages, et la
   carte ne portait que l'une d'elles. Les entrées nomment la SITUATION du
   lecteur, jamais la prestation : « Seconde partie de carrière » lui demandait
   de se reconnaître dans un terme de métier. Elles se placent sous le titre,
   là où il décide s'il est au bon endroit, et non en pied de carte.
   CHAQUE ENTRÉE PORTE SA PHRASE, DANS SON SEUL DOMAINE : une phrase unique pour
   les deux moments donnait l'impression de ne traiter que le départ, et c'est
   le défaut relevé par Yannick le 16/10/2026. */
.porte-entrees { margin: 0; display: grid; row-gap: .3rem; }
.porte-entrees .entree { margin: 0; }
.porte-entrees .entree a {
  color: var(--terre);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  text-underline-offset: .2em;
}
.porte-entrees .entree-dit { margin: 0 0 .25rem; }
.porte-entrees .entree-dit:last-child { margin-bottom: 0; }
.porte-entrees .entree + .entree-dit { margin-top: 0; }
.porte-entrees .entree-dit + .entree { margin-top: .75rem; }

/* Le chiffre propre à chaque public, dans sa carte de porte d'entrée (25/09/2026). Il montre le
   besoin de ce public-là, et il porte sa source : la méthode du site veut que chaque chiffre
   nomme l'organisme qui le publie et l'année des données. */
.porte-chiffre { margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--filet, rgba(47,68,89,.14)); }
.porte-chiffre .nombre { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.3rem); line-height: 1; color: var(--encre); margin: 0 0 .5rem; }
.porte-chiffre .nombre::after { content: ""; display: block; width: 2.2rem; height: 3px; background: var(--terre); margin: .45rem auto 0; }
.porte-chiffre .dit { margin: 0; font-size: .95rem; }
.porte-chiffre .source-chiffre { margin: .45rem 0 0; font-size: .76rem; line-height: 1.4; color: var(--encre-douce); }

/* Le titre de public en terre cuite, et la phrase d'accroche qui précède le descriptif
   (25/09/2026, demandes de Yannick). */
.portes-trois .porte h3 { color: var(--terre); }
.porte-accroche { font-style: italic; margin: 0 0 .9rem; }

/* Les trois titres de public sur la même ligne de base : « Une direction des ressources humaines »
   tient sur deux lignes, les deux autres sur une seule. Sans cela, les cartes ne s'alignent pas
   (demande de Yannick, 25/09/2026). La réserve de hauteur ne vaut qu'à partir de deux colonnes. */
/* Les trois titres de public sur une même ligne médiane. « Une direction des ressources humaines »
   tient sur deux lignes à partir de 960 px, les deux autres sur une ou deux : la hauteur réservée
   vaut la plus grande. VALEUR MESURÉE le 25/09/2026, à recontrôler si un libellé change. */
@media (min-width: 960px) {
  .portes-trois .porte h3 { display: flex; align-items: center; justify-content: center; min-height: 3.4em; }
}

/* Titre de carte cliquable : il garde l'allure d'un titre, le soulignement ne venant qu'au survol. */
.portes-trois .porte h3 a { color: inherit; text-decoration: none; }
.portes-trois .porte h3 a:hover, .portes-trois .porte h3 a:focus { text-decoration: underline; text-underline-offset: .18em; }

/* Téléphone : la section des trois cartes devenait interminable. Les marges internes, les écarts
   et la taille des nombres sont resserrés en dessous de 760 px (26/09/2026, demande de Yannick).
   Rien n'est masqué ni replié : seul l'espace perdu disparaît. */
@media (max-width: 759px) {
  .portes-trois { gap: .9rem; }
  .portes-trois .porte { padding: 1.1rem 1rem; gap: .55rem; }
  .portes-trois .porte h3 { margin: 0 0 .2rem; }
  .porte-accroche { margin: 0 0 .2rem; }
  .porte-chiffre { margin: .7rem 0 0; padding-top: .8rem; }
  .porte-chiffre .nombre { font-size: 1.55rem; margin: 0 0 .35rem; }
  .porte-chiffre .nombre::after { margin-top: .3rem; }
  .porte-chiffre .dit { font-size: .9rem; }
  .porte-chiffre .source-chiffre { margin-top: .3rem; }
}

/* ------------------------------------------------------------------ tableau
   PREMIER TABLEAU DU SITE (fiche des régimes, 26/09/2026). Aucun composant
   n'existait : celui-ci est écrit pour être réutilisé par les fiches à venir.
   Deux états. À partir de 760 px, un tableau ordinaire, réglé par des filets
   horizontaux seulement, sans quadrillage. En dessous, chaque ligne devient un
   bloc et l'intitulé de colonne se répète devant chaque cellule, repris de
   l'attribut data-intitule : un tableau à trois colonnes est illisible sur un
   téléphone, et le faire défiler latéralement l'est à peine moins. Le contenu
   reste un vrai <table>, donc lisible par un lecteur d'écran et par un moteur. */
.tableau-enveloppe { margin: 1.6rem 0; }
.tableau {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: .97rem;
  line-height: 1.5;
}
.tableau thead th {
  text-align: left;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-weight: 600;
  padding: 0 .9rem .6rem 0;
  border-bottom: 2px solid var(--encre);
}
.tableau tbody td {
  padding: .8rem .9rem .8rem 0;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody td:first-child { color: var(--encre); font-weight: 600; }
/* Largeurs fixées : sans cela la première colonne se casse en deux lignes alors que
   les suivantes ont de l'air de reste (mesuré le 26/09/2026 en 1280 px). */
@media (min-width: 760px) {
  .tableau { table-layout: fixed; }
  .tableau th:first-child { width: 30%; }
  .tableau th:nth-child(2) { width: 32%; }
}

@media (max-width: 759px) {
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tbody tr {
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: 4px;
    padding: .9rem 1rem;
    margin: 0 0 .8rem;
  }
  .tableau tbody td { padding: 0; border-bottom: none; }
  .tableau tbody td:first-child {
    font-family: var(--serif);
    font-size: 1.08rem;
    color: var(--terre);
    margin-bottom: .55rem;
  }
  .tableau tbody td:first-child::before { content: none; }
  .tableau tbody td + td { margin-top: .45rem; }
  .tableau tbody td + td::before {
    content: attr(data-intitule);
    display: block;
    font-size: .74rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--encre-douce);
    font-weight: 600;
    margin-bottom: .1rem;
  }
}

/* Note sous la grille des honoraires, 28/09/2026.
   Le texte fiscal sortait de la troisième colonne, qui portait trois fois plus de texte
   que les deux autres. Il vaut pour la prestation nommée dans sa première phrase, et non
   pour la colonne où il est posé : il se lit donc aussi bien sur toute la largeur. */
.honoraires-note { max-width: 66rem; margin: 2.2rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--trait); }
.honoraires-note p { margin: 0; font-size: .9rem; color: var(--encre-douce); text-align: left; }
@media (min-width: 760px) {
  .honoraires-note p { font-size: 1rem; }
}

/* ================================================================== v54
   REFONTE DE L'ACCUEIL, 30/09/2026. L'accueil devient une page d'aiguillage.
   Décisions de Yannick du 30/09 : titre en deux blocs à amorces grasses,
   justifié, dernière ligne de chaque bloc centrée ; surtitre des portes
   retiré ; rangées des cartes alignées ; chiffres repliables ; descriptifs
   ouverts par « Notamment » ; liens de prestations sortis des cartes, sur
   ordinateur seulement. Sur téléphone, la porte ne montre que le public et
   son accroche : le détail est dans la page du public.
   ================================================================== */

/* ---- Le titre ---- */
.tete-accueil h1 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--encre);
  font-size: clamp(1.08rem, 3.2vw, 1.35rem);
  line-height: 1.55;
  max-width: 34rem;
  margin: 0 auto;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.tete-accueil h1 .bloc-titre { display: block; text-align-last: center; }
.tete-accueil h1 .bloc-titre + .bloc-titre { margin-top: .85rem; }
.tete-accueil h1 strong { font-weight: 700; }
@media (min-width: 1024px) {
  .tete-accueil h1 { font-size: 1.45rem; line-height: 1.6; max-width: 44rem; }
}

/* ---- Les portes : la carte devient une sous-grille ---- */
.portes-trois .porte {
  display: grid;
  align-content: start;
  row-gap: .55rem;
}
.porte-descr { margin: 0; }
.porte-descr .notamment { font-style: italic; color: var(--encre-douce); }

/* La suite de la carte : étiquette et chiffres, calée en haut de sa rangée.
   C'est ce qui évite un blanc entre l'étiquette et le bas de la carte
   quand une carte voisine est dépliée. */
.porte-suite { position: relative; align-self: start; display: grid; row-gap: .55rem; }
.bascule-chiffres {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.etiquette-chiffres {
  cursor: pointer; font-size: .92rem; color: var(--terre);
  padding-top: .4rem; display: block;
}
/* v99, 06/10/2026 : LE CHEVRON DE « LES CHIFFRES » ÉTAIT UN CARACTÈRE UNICODE
   POSÉ APRÈS LE TEXTE. Relevé par Yannick : « la flèche semble tomber là comme
   un rajout, ça ne fait pas ensemble réfléchi. » Il avait raison, et la cause
   est mécanique : un caractère emprunté à une autre fonte ne suit ni la
   graisse, ni la hauteur d'x, ni l'épaisseur du trait du texte qui le porte.
   Il est remplacé par le MÊME CHEVRON DESSINÉ que celui des sections
   repliables des fiches. Le site n'a plus qu'un seul tracé de chevron, ce que
   sa feuille de style s'était déjà donné pour règle. */
.t-ouvrir::after,
.t-fermer::after,
.detail-carte summary::after {
  content: "";
  display: inline-block;
  width: .38rem; height: .38rem;
  margin-left: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.18em) rotate(45deg);
  transition: transform .18s ease;
}
.t-fermer::after { transform: translateY(.06em) rotate(-135deg); }
.porte-suite:not(:has(.bascule-chiffres:checked)) .porte-chiffre { display: none; }
.porte-suite:has(.bascule-chiffres:checked) .t-ouvrir { display: none; }
.porte-suite:not(:has(.bascule-chiffres:checked)) .t-fermer { display: none; }
.porte-suite:has(.bascule-chiffres:focus-visible) .etiquette-chiffres {
  outline: 3px solid var(--terre); outline-offset: 3px; border-radius: 4px;
}
.porte-suite .porte-chiffre:first-of-type { margin-top: 0; }


/* ---- Téléphone : la porte ne montre que le public et son accroche ---- */
@media (max-width: 959px) {
  .portes-trois > .porte-descr,
  .portes-trois .porte-descr,
  .portes-trois .porte-suite { display: none; }
}

/* ---- v161, 12/10/2026, PUIS v153 DU 16/10 QUI LA REND SANS OBJET ----
   Yannick avait relevé le 12/10 : « dans la version mobile, on ne voit pas les
   premières lignes de l'offre pour les entreprises ». La cause était que la
   règle ci-dessus masquait aussi le lien de prestations, qui n'existait donc
   que sur ordinateur, et les trois publics perdaient au téléphone la seule
   ligne disant ce que le cabinet vend.

   LE 16/10, YANNICK A DEMANDÉ DE RETIRER CE LIEN DE PIED DANS LES TROIS CARTES.
   La classe `.porte-lien` n'existe plus nulle part dans le contenu, et ses
   règles sont retirées avec elle. LE DÉFAUT DE 2026-10-12 EST DONC ROUVERT POUR
   LES CARTES 2 ET 3 : au téléphone, le « Notamment » étant masqué, elles ne
   montrent plus que leur titre et leur accroche. La carte 1 y échappe, ses deux
   entrées étant dans le corps de la carte. Signalé à Yannick le 16/10.
   ====================================================================== */

/* ---- Ordinateur : trois colonnes, et chaque carte coule librement ---- */
@media (min-width: 960px) {
  .portes-trois {
    grid-template-columns: repeat(3, 1fr);
  }
  .portes-trois > .porte {
    align-content: start;
  }

  /* v153, 16/10/2026 : LES TROIS CARTES NE PARTAGENT PLUS LEURS RANGÉES.
     Elles le faisaient depuis le 06/10 (`subgrid`), ce qui alignait leurs
     accroches, leurs « Notamment » et leurs étiquettes. CE PARTAGE SUPPOSAIT
     QUE LES TROIS CARTES PORTENT LES MÊMES BLOCS. « Un particulier » porte
     désormais deux entrées et leurs deux phrases là où ses voisines portent une
     accroche, et deux essais l'ont montré sur mesure : un bloc de plus faisait
     passer l'étiquette « Les chiffres » par-dessus le texte du « Notamment », et
     le même bloc rangé dans la rangée de l'accroche ouvrait près de 180 px de
     vide au milieu des deux autres cartes. Chaque carte coule donc librement et
     s'arrête où son contenu s'arrête : le reste d'espace tombe en bas de carte,
     où il ne se voit pas. UN RÉGLAGE POSÉ POUR UNE STRUCTURE SE RETIRE QUAND LA
     STRUCTURE CHANGE. */

  /* Le titre de public occupe toute sa rangée et s'y centre : un titre d'une
     ligne se place au milieu d'un titre de deux, pas sur sa première ligne. */
  .portes-trois .porte h3 {
    display: flex; align-items: center; justify-content: center;
    min-height: 0; margin: 0;
  }

  /* Textes de carte alignés sur le traitement du chapeau. Choix de Yannick
     du 30/09/2026, la réserve sur la largeur de colonne étant consignée. */
  .portes-trois .porte-accroche,
  .portes-trois .porte-descr,
  .portes-trois .porte-chiffre .dit {
    text-align: justify; text-align-last: center;
    hyphens: auto; -webkit-hyphens: auto;
  }
}

/* ---- v55, 30/09/2026 ----------------------------------------------
   Le chapeau est calé sur les bords du logotype, à toutes les largeurs.
   Demande de Yannick : les deux blocs doivent former un rectangle net. */
.tete-accueil .chapeau {
  max-width: min(38rem, 100%);
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .tete-accueil .chapeau { max-width: min(50rem, 94%); }
}

/* Les deux boutons reviennent sous le chapeau à TOUTES les largeurs.
   Ils étaient masqués en dessous de 1 024 px depuis la refonte du 21/09. */
.actions-tete {
  display: flex !important;
  flex-direction: column;
  gap: .7rem;
  margin-top: 1.8rem;
  align-items: center;
}
.actions-tete .bouton { min-width: 16rem; text-align: center; }
@media (min-width: 640px) {
  .actions-tete { flex-direction: row; justify-content: center; }
  .actions-tete .bouton { min-width: 0; }
}

/* ---- v56, 30/09/2026 ----------------------------------------------
   Les accroches des portes sont alignées sur le chapeau : justifiées,
   césure française. Demande de Yannick, à toutes les largeurs. */
.portes-trois .porte-accroche,
.portes-trois .porte-descr {
  text-align: justify;
  text-align-last: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: none;
}

/* ---- Les décryptages de l'accueil en défilement horizontal -------------
   v58 bis, 30/09/2026. Le rail vaut désormais à TOUTES LES LARGEURS, sur
   demande de Yannick. Cinq éléments : « Tous les décryptages », les trois
   décryptages, « Tous les décryptages ». Aucun script.
   Ce qui change avec la largeur, c'est la part d'écran que prend une carte,
   et la forme de la carte elle-même, qui reste celle du site : compacte en
   dessous de 760 px, complète au-delà. */
.rail {
  display: flex;
  align-items: stretch;
  gap: .7rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* « proximity » et non « mandatory » : le rail se cale sur une carte quand
     on s'arrête près d'elle, mais il ne retient pas le doigt. Avec
     « mandatory » et un arrêt forcé sur chaque carte, un balayage rapide ne
     pouvait franchir qu'une carte à la fois, ce qui rendait le parcours long. */
  scroll-snap-type: x proximity;
  padding-bottom: .3rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }

/* La grille interne s'efface : ses cartes deviennent enfants du rail. */
.rail .cartes-d { display: contents; }

.rail article,
.rail .carte-tous {
  min-width: 0;
  /* « start » et non « center » : la première carte est calée au bord gauche,
     et le dépassement se voit à droite, là où le geste va. */
  scroll-snap-align: start;
}

/* Les deux cartes « Tous les décryptages » : sobres, sans image, pour ne pas
   concurrencer les trois décryptages qu'elles encadrent. */
.rail .carte-tous {
  display: grid; place-content: center; text-align: center;
  background: var(--creme); border: 1px dashed var(--terre);
  border-radius: 6px; padding: 1rem .8rem;
  color: var(--terre); text-decoration: none;
  font-size: .95rem; line-height: 1.35;
}
.rail .carte-tous:hover { background: var(--terre); color: var(--papier); }

/* Le bouton du dessous fait doublon avec les deux cartes du rail. */
.avec-rail .actions { display: none; }

/* Téléphone : une carte par écran, la suivante dépasse.
   v59, 30/09/2026 : 62 % au lieu de 72 %, et la vignette prend 32 % de la
   carte au lieu de 28 %, de sorte que c'est la COLONNE DE TEXTE qui se
   resserre, et non la photo qui devient un filet. Mesuré au navigateur :
   ce resserrement ne coûte de la hauteur que si le titre reste entier,
   d'où le titre abrégé et la date sur une ligne, ci-dessous. */
@media (max-width: 759px) {
  /* Règle de proportion donnée par Yannick le 30/09/2026 : le visuel est un
     CARRÉ, et la colonne de texte ne prend pas plus d'une fois et demie à
     deux fois sa largeur. Le carré fait 34 % de la carte, la colonne 1,7
     fois le carré. La vignette ne tient plus toute la hauteur de la carte :
     un carré qui la tiendrait imposerait, à ce rapport, une carte de plus
     de 300 px, soit presque tout l'écran. Elle est donc centrée
     verticalement, comme la vignette d'une liste. */
  .avec-rail .rail .carte-d {
    flex: 0 0 68%;
    /* stretch, et non center : c'est ce qui permet au bloc de texte de
       tenir toute la hauteur, donc au lien de se caler en bas. Le carré,
       lui, reste centré par son propre align-self. */
    align-items: stretch;
    padding: .8rem;
    gap: .8rem;
  }
  .avec-rail .rail .carte-d .vignette {
    flex: 0 0 34%;
    align-self: center;
    border-radius: 4px;
    overflow: hidden;
  }
  .avec-rail .rail .carte-d .vignette img,
  .avec-rail .rail .carte-d .vignette picture {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
  }
  .rail .carte-tous { flex: 0 0 34%; }
  .avec-rail .rail .carte-d .corps { padding: 0; gap: .25rem; }

  /* Le titre reste ENTIER dans la page : la coupe est d'affichage, par
     points de suspension, et jamais dans le texte. Décision de Yannick du
     30/09/2026, contre le titre abrégé qui avait été essayé. */
  .avec-rail .rail .carte-d h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* « Lire le décryptage », comme sur les cartes de la page Décryptages.
     Mesuré : au corps du site, ce libellé passait sur QUATRE lignes dans
     une colonne de 123 px, 84 px de hauteur à lui seul, et c'est lui qui
     faisait la carte de 205 px. Au corps réduit, il en prend deux. */
  .avec-rail .rail .carte-d .lien-suite {
    display: block;
    font-size: .82rem;
    line-height: 1.3;
    margin-top: .15rem;
  }

  /* La date tient sur une ligne : c'est elle qui, dans une colonne
     resserrée, passait sur deux puis trois lignes et tirait les trois
     cartes vers le bas, toutes s'alignant sur la plus haute. La mention
     de mise à jour est retirée de la carte : elle est sur l'article. */
  .avec-rail .rail .carte-d .date { white-space: nowrap; }
  .avec-rail .rail .carte-d .date-maj { display: none; }
}

/* Tablette et ordinateur : trois cartes de front, et le dépassement de la
   quatrième dit qu'on peut faire défiler. La carte garde la forme complète
   du site, visuel en haut, date, titre, résumé et lien. */
@media (min-width: 760px) {
  .rail { gap: 1.2rem; }
  .avec-rail .rail .carte-d { flex: 0 0 30%; }
  .rail .carte-tous { flex: 0 0 16%; padding: 1.2rem .9rem; }
}

/* ---- v56 ter, 30/09/2026. Espacements et typographie -------------------
   Demande de Yannick : le blanc sous le chapeau d'une section doit être le
   même partout. Il était de 2 rem après un chapeau, 2,5 rem après un titre
   sans chapeau, et 2,9 rem dans les Fiches pratiques, où la première ligne
   de la liste ajoutait sa propre marge intérieure. Tout est ramené à 2 rem,
   la valeur que Yannick a jugée la meilleure sur les Décryptages. */
h2 { margin-bottom: 2rem; }
.fiches-apercu li:first-child { padding-top: 0; }

/* La ligne de source d'un chiffre a la même taille partout : elle valait
   0,76 rem dans les cartes de public et 0,78 rem ailleurs. */
.porte-chiffre .source-chiffre { font-size: .78rem; }

/* ---- v57, 30/09/2026 ----------------------------------------------
   Les textes des cartes de public se justifient EXACTEMENT comme le chapeau
   de la tête d'accueil : dernière ligne calée à gauche, et non recentrée.
   La spécificité doit dépasser celle de « .porte p:not(:has(.bouton)) »,
   d'où les trois classes. */
.portes-trois .porte .porte-accroche,
.portes-trois .porte .porte-descr {
  text-align: justify;
  text-align-last: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: none;
}

/* Le bloc d'un chiffre reste CENTRÉ, et c'est voulu : le nombre, son filet
   terre cuite, la phrase et la source forment une composition centrée, la
   même que la bande de chiffres de l'accueil et des pages de public.
   Justifier la seule phrase désaxerait l'ensemble. */
.portes-trois .porte .porte-chiffre .dit,
.portes-trois .porte .porte-chiffre .source-chiffre {
  text-align: center;
  text-align-last: auto;
  hyphens: manual;
}

/* ---- v58, 30/09/2026 ----------------------------------------------
   CORRECTION. Le chapeau de la tête d'accueil porte « text-align-last:
   center » : sa dernière ligne EST recentrée. La version précédente avait
   calé celle des accroches à gauche, sur une lecture fautive. Les accroches
   reprennent donc le traitement exact du chapeau. */
.portes-trois .porte .porte-accroche,
.portes-trois .porte .porte-descr {
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: none;
}

/* Et les bords. Le chapeau est calé sur le logotype, 38 rem ; les cartes
   occupaient toute la largeur du conteneur, bien au-delà. En dessous de
   960 px, la colonne des cartes est donc limitée à la largeur du chapeau
   AUGMENTÉE de la marge intérieure d'une carte et de son filet : le TEXTE
   d'une carte tombe alors exactement sur les bords du chapeau.
   Sur un vrai téléphone, où tout occupe la largeur de l'écran, il subsiste
   la marge intérieure de la carte, 1 rem de chaque côté : un texte dans un
   cadre ne peut pas toucher son filet. */
@media (max-width: 959px) {
  .portes-trois {
    max-width: min(calc(38rem + 2rem + 2px), 100%);
    margin-inline: auto;
  }
}

/* ---- v60, 30/09/2026. Les points de position sous le rail -------------
   Demande de Yannick, sur les deux versions. Ils disent combien de cartes
   le rail porte et où l'on en est. Le script les construit ; sans lui, la
   classe « actifs » n'est jamais posée et rien ne s'affiche. */
.points-rail { display: none; }
.points-rail.actifs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
}
.points-rail .point {
  position: relative;
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--trait);
  cursor: pointer;
  transition: width .25s ease, border-radius .25s ease, background .2s ease;
}
/* La cible du doigt fait 24 px, le point visible en fait 8. */
.points-rail .point::after { content: ""; position: absolute; inset: -.5rem; }

/* Le point courant s'étire en bâtonnet, et s'étire un peu plus tant que le
   doigt fait défiler : c'est le seul retour visuel pendant le geste.
   Demande de Yannick du 30/09/2026. */
.points-rail .point[aria-current="true"] {
  background: var(--terre);
  width: 1.5rem;
  border-radius: .25rem;
}
.points-rail.defile .point[aria-current="true"] { width: 2.1rem; }

.points-rail .point:hover { background: var(--encre-douce); }
.points-rail .point[aria-current="true"]:hover { background: var(--terre); }
.points-rail .point:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .points-rail .point { transition: none; }
  .points-rail.defile .point[aria-current="true"] { width: 1.5rem; }
}

/* ---- v61, 30/09/2026. Le titre revient sur la carte, sur ordinateur ----
   Constat de Yannick : sur la version ordinateur, le titre du décryptage
   n'existait que DANS le visuel, où il est composé pour 1 200 px de large
   et se retrouve affiché sur 312 px, soit un quart de sa taille. La ligne
   sous le chiffre y tombe autour de huit pixels : elle n'est plus lisible.
   Le chiffre reste l'accroche, il est fait pour ça ; le titre, lui, doit
   être du texte.

   MESURE, page réelle à 1 440 px. Carte de 455 px aujourd'hui, sans titre
   lisible. Avec le titre ET le résumé, 561 px : la section prend un écran
   entier. Avec le titre à la place du résumé, 386 px, donc PLUS COURTE
   qu'aujourd'hui et enfin lisible.

   Le résumé n'est pas perdu : il est sur la page Décryptages, qui est
   faite pour parcourir, et la carte de l'accueil porte désormais les mêmes
   éléments que celle du téléphone, date, titre et lien. */
@media (min-width: 760px) {
  .avec-rail .rail .carte-d h3 {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
  }
}

/* ---- v62, 30/09/2026 -------------------------------------------------
   Trois demandes de Yannick, après avoir vu la treizième version.

   1. LE RÉSUMÉ REVIENT SUR LA CARTE D'ORDINATEUR. Le titre seul faisait
      double emploi avec le visuel, qui porte déjà le chiffre et sa ligne
      d'explication : la carte ne disait alors rien de plus que l'image.
      Le résumé est ce qui ajoute quelque chose. La carte repasse de 386
      à environ 560 px, et c'est le prix assumé de ce qu'elle apporte.

   2. « LIRE LE DÉCRYPTAGE » S'ALIGNE D'UNE CARTE À L'AUTRE. Il suivait
      le bas du texte, donc il montait et descendait au gré du nombre de
      lignes du titre. Il est désormais poussé au bas de la carte, sur
      les deux versions : les cartes du rail ayant toutes la même
      hauteur, les liens tombent sur la même ligne.

   3. LES TITRES ET LES TEXTES SONT JUSTIFIÉS, comme le reste du site. */
.avec-rail .rail .carte-d .corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.avec-rail .rail .carte-d .lien-suite { margin-top: auto; }

/* La justification ne vaut QUE sur ordinateur, et c'est une mesure, pas un
   goût : la colonne de texte du téléphone fait 123 px, soit une quinzaine
   de signes, et le drapeau justifié y ouvre des blancs de la largeur d'un
   mot au milieu des lignes. Essayé, regardé, écarté pour cette largeur. */
@media (min-width: 760px) {
  .avec-rail .rail .carte-d h3,
  .avec-rail .rail .carte-d h3 a,
  .avec-rail .rail .carte-d .corps > p:not(.date) {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* ---- v63, 30/09/2026 -------------------------------------------------
   Trois constats de Yannick sur la quatorzième version.

   1. LES TITRES NE S'ALIGNAIENT PAS SUR ORDINATEUR. La cause est la date
      du deuxième décryptage : « 15 septembre 2026, mis à jour le 18
      septembre 2026 » passe sur deux lignes et pousse son titre d'une
      ligne vers le bas. La mention de mise à jour quitte donc la carte
      de l'accueil À TOUTES LES LARGEURS, et non plus sur téléphone
      seulement. Elle reste sur l'article et sur la page Décryptages, qui
      sont les endroits où elle se lit vraiment. Les trois dates tiennent
      alors sur une ligne, et les titres partent de la même ligne.

   2. LE BLANC SOUS LE TITRE SUR TÉLÉPHONE. Il n'apparaît pas sur un
      téléphone, où le bloc de texte est plus haut que le carré, mais
      dans une fenêtre de navigateur rétrécie entre 500 et 759 px, où le
      carré devient plus haut que le texte : le lien, poussé en bas de
      carte, laissait alors un trou. Le lien n'est plus poussé en bas en
      dessous de 760 px ; le bloc de texte est centré en face du carré,
      et comme les trois cartes ont la même structure, les liens
      s'alignent d'eux-mêmes. Le calage en bas reste sur ordinateur, où
      les titres n'ont pas le même nombre de lignes.

   3. LA COUPE DU TITRE SUIT LA LARGEUR. Trois lignes sur un téléphone,
      quatre dès que la colonne s'élargit, à partir de 600 px : c'est le
      blanc que Yannick a vu, et il est maintenant rendu au titre. */
.avec-rail .rail .carte-d .date-maj { display: none; }

@media (min-width: 600px) and (max-width: 759px) {
  .avec-rail .rail .carte-d h3 a { -webkit-line-clamp: 5; }
}

/* ---- v64, 30/09/2026. Le titre n'est plus justifié sur ordinateur -----
   Constat de Yannick sur la quatorzième version : le justifié ouvre par
   endroits des écarts trop grands entre les mots. Il a raison, et c'est
   mesurable sur la troisième carte : « Une pension sur neuf » justifié
   sur 273 px donne trois blancs de la largeur d'un mot sur une seule
   ligne.

   LA CAUSE N'EST PAS RÉPARABLE PAR RÉGLAGE. Un titre est composé en gros
   corps, donc il tient peu de mots par ligne, et le français a des mots
   longs. Moins il y a de mots sur une ligne, plus chacun doit s'écarter
   pour remplir la ligne. La césure, qui est le remède habituel, reste
   demandée par « hyphens: auto », mais elle ne coupe pas tous les mots et
   ne suffit pas ici.

   C'EST AUSSI LA RÈGLE TYPOGRAPHIQUE : on justifie le texte courant, pas
   les titres. Le titre passe donc au fer à gauche, avec « text-wrap:
   pretty » qui évite le mot seul en dernière ligne. LE RÉSUMÉ RESTE
   JUSTIFIÉ, avec césure : il est en petit corps, il tient assez de mots
   par ligne, et c'est là que la justification se voit bien. */
@media (min-width: 760px) {
  .avec-rail .rail .carte-d h3,
  .avec-rail .rail .carte-d h3 a {
    text-align: left;
    text-wrap: pretty;
  }
}

/* ---- v65, 30/09/2026. Le titre entier sur téléphone --------------------
   Constat de Yannick sur le site en ligne, sur son propre téléphone : la
   carte coupait trop, il veut le titre en entier. La coupe d'affichage est
   donc retirée, et la carte reçoit la place qu'il faut.

   MESURE, page réelle à 360, 390 et 430 px, quatre largeurs de carte
   essayées. À 390 px, en gardant 68 % de largeur, le titre le plus long
   prend neuf lignes et le rail monte à 289 px. En passant la carte à 76 %
   et le carré à 32 %, la colonne de texte gagne 22 px, le titre tombe à
   sept lignes et le rail à 246 px. Au-delà, à 84 %, le rapport entre le
   texte et le carré dépasse 2 et sort de la règle fixée par Yannick.

   76 % est donc le point où le titre entier coûte le moins de hauteur SANS
   sortir de la règle : rapport 1,95, aucun titre coupé à aucune des trois
   largeurs. Le rail passe de 162 à 246 px : c'est le prix du titre entier,
   et il est assumé. */
@media (max-width: 759px) {
  .avec-rail .rail .carte-d { flex: 0 0 86%; }
  .avec-rail .rail .carte-d .vignette { flex: 0 0 28%; }
  .rail .carte-tous { flex: 0 0 40%; }
  .avec-rail .rail .carte-d h3 a {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
  }
}

/* ---- v66, 30/09/2026. La règle de proportion est levée ----------------
   Yannick, après avoir vu le résultat : « affranchis-toi de cette règle,
   j'ai mal estimé les impacts ». Le rapport entre la colonne de texte et
   le carré n'est donc plus un plafond, et cinq formes ont été mesurées
   à 360, 390 et 430 px pour choisir la meilleure, titre entier compris.

   À 390 px, hauteur du rail et nombre de lignes du plus long titre :

     carte compacte à 76 %        246 px   7 lignes   écart de blanc 65 px
     carte compacte à 86 %        186 px   5 lignes   écart de blanc 43 px
     carte compacte à 92 %        186 px   5 lignes   écart de blanc 43 px
     visuel entier en haut, 78 %  456 px   5 lignes
     visuel entier en haut, 86 %  461 px   4 lignes

   CE QUE CELA APPREND. Élargir la carte est gratuit en hauteur jusqu'à
   86 %, et ne rapporte plus rien au-delà. Remonter le visuel entier au
   dessus du texte, comme sur ordinateur, coûte 275 px de plus : le visuel
   est composé en 1200 x 630, donc il prend toute la largeur de la carte
   pour un peu moins de la moitié de sa hauteur, et cela s'ajoute au
   texte au lieu de se placer à côté.

   RETENU : la carte compacte à 86 %, le carré à 28 %. Le rail retombe à
   186 px, soit la hauteur qu'il avait AVANT le titre entier, et le titre
   n'est plus coupé nulle part. 92 % ne gagne rien de plus et ne laisse
   que 27 px de la carte suivante, ce qui ne dit plus qu'on peut faire
   défiler.

   Le blanc sous les titres courts tombe de 69 à 47 px : il reste, parce
   que les trois titres font 73, 85 et 112 signes et que les cartes du
   rail ont la même hauteur. C'est le prix de l'alignement des liens. */

/* ---- v67, 30/09/2026. La carte porte la photo seule -------------------
   La vignette de la carte ne charge plus le visuel composé mais la photo
   découpée à la source, 564 x 630. Sur ordinateur, la bannière garde son
   format 1200/630 et prend une bande de cette photo ; sur téléphone, le
   carré en prend le centre. Un seul fichier sert les deux. */
.avec-rail .carte-d .vignette img,
.carte-d .vignette img {
  object-fit: cover;
  object-position: center;
}

/* v67 bis. La carte de lien qui ferme le rail est vue de biais sur grand
   écran : les trois décryptages en occupent presque toute la largeur et il
   n'en dépasse qu'une bande. Son texte est donc calé à gauche, pour que
   cette bande donne « Tous les… » et non le milieu d'un mot. */
@media (min-width: 760px) {
  .rail .carte-tous:not(.carte-tous-tete) { place-content: center start; text-align: left; }
}

/* ---- v68, 30/09/2026. La carte de lien revient en tête ----------------
   Demande de Yannick après avoir vu le site en ligne : il la veut aux deux
   bouts. Elle avait été retirée de la tête parce qu'à 86 % de largeur, sur
   téléphone, elle et son écart mangeaient 143 px des 342 de l'écran et
   repoussaient le premier article hors de vue.

   Le compromis est dans la largeur : celle de TÊTE est plus étroite que
   celle de queue. En tête, elle annonce ; en queue, elle conclut, et c'est
   celle qu'on atteint après avoir tout lu. Sur téléphone, 26 % au lieu de
   40 % : le premier article garde alors l'essentiel de l'écran. */
/* ESSAI ABANDONNÉ, et le motif vaut d'être écrit : la carte de tête avait
   d'abord été faite plus étroite que celle de queue, pour rendre de la
   place au premier article. MESURE : « décryptages » fait onze signes et
   mesure 80 px au corps du téléphone, 95 px sur ordinateur ; une carte de
   tête étroite ne les loge pas, et le mot sortait du cadre ou se coupait
   en « décryptage / s ». Les deux cartes ont donc la MÊME largeur, et le
   premier article montre 57 % de l'écran au lieu de 65 %. C'est le mot le
   plus long du libellé qui fixe la largeur minimale, pas l'envie. */

/* Garde-fou, et il vient d'un défaut constaté : « décryptages » fait onze
   signes et débordait du cadre dans une carte de tête de 89 px. Aucun mot
   ne peut plus sortir de sa carte, quelle que soit la largeur. */
.rail .carte-tous { min-width: 0; overflow-wrap: break-word; }

/* v68 bis. Deux largeurs où le mot ne tient pas, mesurées et traitées :
   un petit téléphone de 320 px, et la bande 760-900 px où la carte de
   lien se resserre à 114 px. Le corps y descend, sinon « décryptages » se
   coupe en « décryptage / s ». */
@media (max-width: 359px) {
  .rail .carte-tous { font-size: .78rem; }
}
@media (min-width: 760px) and (max-width: 899px) {
  .rail .carte-tous { font-size: .78rem; }
}

/* ---- v69, 30/09/2026. Le pied de page ---------------------------------
   Constat de Yannick : le pied n'est pas centré pour toutes ses rubriques.

   CE QUI SE PASSAIT, mesuré à 1 024, 1 280, 1 440 et 1 600 px. Les trois
   colonnes font exactement le même tiers, 320 px chacune, et le bloc est
   bien centré dans la page. Mais leur contenu est ferré à gauche et de
   longueurs très inégales : sept liens dans « Le site », deux dans
   « Contact ». La troisième colonne laissait donc un vide de près de la
   moitié de sa largeur à droite, et l'ensemble paraissait tassé à gauche.

   CE QUI EST FAIT. Le contenu de chaque colonne est centré dans son tiers,
   sur ordinateur comme sur téléphone, où il l'était déjà depuis toujours.
   Le pied devient le même des deux côtés de la bascule, et le vide se
   répartit au lieu de s'accumuler à droite.

   LA LIGNE DU BAS NE CHANGE PAS : la mention de propriété reste à gauche
   et les mentions légales à droite, ce qui donne au pied ses deux bords et
   tient l'ensemble. */
/* La bascule du pied est a 640 px, et non a 760 comme celle des cartes :
   entre 641 et 759 px le pied etait deja en trois colonnes, et il serait
   reste ferre a gauche dans cette bande. */
@media (min-width: 641px) {
  .pied-colonnes { justify-items: center; text-align: center; }
  .pied-colonnes > div { max-width: 22rem; }
}

/* ---- v70, 30/09/2026. Le bloc portrait sur téléphone ------------------
   Constat de Yannick sur le site en ligne : dans le bloc « Yannick
   Charron », tout est centré sur téléphone sauf deux éléments, le lien
   « Pourquoi Le Fil de Carrière » et le bouton « Me suivre sur LinkedIn »,
   restés ferrés à gauche.

   Deux causes distinctes, et c'est pour cela qu'elles avaient survécu.
   La règle du 22/09 ferre à gauche TOUS les paragraphes du portrait sauf
   la fonction, pour que la biographie se lise ; elle attrapait au passage
   le paragraphe qui ne contient que le lien. Et le bloc de boutons est
   calé à gauche à toutes les largeurs, règle d'ordinateur qui n'avait pas
   d'exception pour le téléphone.

   Le paragraphe visé est celui qui ne contient RIEN D'AUTRE qu'un lien :
   la biographie, qui en contient du texte, n'est pas touchée.

   LA VERSION ORDINATEUR N'EST PAS TOUCHEE : la règle est enfermée dans la
   bascule à 640 px, qui est celle du bloc portrait. */
@media (max-width: 640px) {
  .portrait p:has(> a:only-child) { text-align: center; }
  .portrait .actions { justify-content: center; }
}

/* ---- v71, 30/09/2026. Le slogan des pages de public ------------------
   Demande de Yannick : les slogans des trois pages par public doivent être
   alignés sur ceux de la page d'accueil, c'est-à-dire sur l'accroche que
   porte la carte du public. C'est l'achèvement de la décision du matin, et
   l'argument est le même : le visiteur ne doit pas lire deux promesses
   différentes selon l'endroit où il entre.

   ALIGNER LE TEXTE NE SUFFIT PAS, et la mesure le dit. Ces slogans font
   de 148 à 217 signes, là où les anciens titres en faisaient 50 à 100.
   Composés au corps d'un titre court, 38 px, ils occupaient jusqu'à SIX
   LIGNES et 288 px de hauteur sur ordinateur, et neuf lignes sur
   téléphone. Ce n'est plus un titre, c'est un paragraphe en gros corps.

   La tête de ces trois pages reçoit donc EXACTEMENT le traitement que la
   tête d'accueil a reçu le 30/09 pour la même raison, et que Yannick a
   validé : corps réduit, interligne aéré, justifié, dernière ligne centrée.
   Les autres pages intérieures, dont le titre tient sur une ligne, gardent
   le leur. */
.intro-page.intro-public h1 {
  font-weight: 400;
  font-size: clamp(1.08rem, 3.2vw, 1.35rem);
  line-height: 1.55;
  max-width: 34rem;
  text-align: justify;
  text-align-last: left;   /* v99 : voir la note du chapeau ci-dessus */
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (min-width: 1024px) {
  .intro-page.intro-public h1 { font-size: 1.45rem; line-height: 1.6; max-width: 44rem; }
}

/* ---- v73, 30/09/2026. Le slogan doit primer sur le chapeau ------------
   Constat de Yannick sur téléphone : le premier paragraphe ne ressort pas
   assez par rapport au second.

   MESURE, et elle donne tort à l'œil dans le bon sens : sur les trois
   pages de public à 390 px, le slogan fait 17,28 px et le chapeau 17,60.
   LE TITRE ÉTAIT PLUS PETIT QUE SON PROPRE CHAPEAU, rapport 0,98. Ce
   n'était pas une impression, c'était une inversion de hiérarchie.

   D'où elle venait : le slogan a reçu le corps de la tête d'accueil, dont
   le plancher est de 1,08 rem, et il l'a croisé avec le chapeau des pages
   intérieures, qui est à 1,10 rem. Deux règles justes chacune de son côté,
   fausses une fois réunies.

   DEUX CORRECTIONS. Le chapeau des trois pages passe à 1,03 rem, la valeur
   de l'accueil, ce qui les aligne vraiment. Et le plancher du slogan monte
   à 1,22 rem, pour que la hiérarchie se voie et non se devine.

   LA TÊTE D'ACCUEIL N'EST PAS TOUCHÉE : son titre porte deux blocs et fait
   déjà 281 px de haut sur téléphone ; l'agrandir le ferait passer à 317 px
   au tout premier écran du site. À décider séparément. */
.intro-page.intro-public h1 { font-size: clamp(1.22rem, 3.4vw, 1.45rem); }
.intro-page.intro-public .chapeau { font-size: 1.03rem; }

/* ---- v76, 30/09/2026. Le bloc « Pour chacun de ceux que le cabinet
   accompagne », sur la page À propos --------------------------------------
   Constat de Yannick sur le site en ligne : à recentrer et à aligner.

   TROIS DÉFAUTS MESURÉS, page réelle à 390, 760, 1 024 et 1 440 px.

   1. LES PARAGRAPHES NE PARTAIENT PAS DE LA MÊME LIGNE. Le titre du milieu,
      « Une entreprise ou une direction RH », passe sur deux lignes quand les
      deux autres en tiennent une : son paragraphe commençait 30 px plus bas.
      Les trois colonnes deviennent donc une sous-grille, et le titre et le
      texte de chacune tombent sur les mêmes rangées, quel que soit le nombre
      de lignes du titre.

   2. À 760 PX, IL N'Y AVAIT QUE DEUX COLONNES. La grille demandait 14 rem
      minimum par colonne, soit 224 px : trois n'entraient pas dans les
      712 px disponibles, et la troisième carte tombait seule sur une
      deuxième rangée. La bascule est désormais franche, une colonne en
      dessous de 760 px et trois au-dessus.

   3. LE CONTENU ÉTAIT FERRÉ À GAUCHE alors que le surtitre, le titre de
      section et la note du dessous sont centrés : le bloc paraissait
      décalé dans une section qui ne l'est pas. Les titres sont centrés, et
      les textes justifiés dernière ligne centrée, comme les cartes de
      l'accueil.

   Le titre reçoit « text-wrap: balance », qui évite le mot seul en dernière
   ligne : « Une entreprise / ou une direction RH » plutôt que « ... direction
   / RH ». */
.engagements.trois { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .engagements.trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }
  .engagements.trois > div {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: .5rem;
  }
  /* Le titre occupe la rangee entiere, qui fait la hauteur du plus haut des
     trois. Sans cela, un titre d'une ligne se colle EN HAUT d'une rangee de
     deux lignes, et les trois titres ne sont plus sur le meme axe : c'est ce
     que Yannick voyait. « align-content » centre les lignes du titre dans sa
     rangee sans toucher au lien ni a son filet, qui restent en ligne. */
  .engagements.trois > div h3 { margin-bottom: 0; align-content: center; }
}
.engagements.trois h3 { text-align: center; text-wrap: balance; }
.engagements.trois p {
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---- v77, 01/10/2026. Deux retours de Yannick sur le site en ligne -----

   1. « TOUS LES DÉCRYPTAGES », CARTE DE QUEUE, EST RECENTRÉ.
      Elle avait été calée à gauche le 30/09, pour que la bande visible sur
      grand écran donne « Tous les… » plutôt que le milieu d'un mot. Yannick
      la voit entière sur son écran et le calage s'y lit comme un défaut.
      La règle v67 bis est donc annulée et la carte reprend le centrage de
      toutes les autres.

   2. LE PIED DE PAGE REVIENT AU FER À GAUCHE, EN BLOC CENTRÉ.
      Décision de Yannick du 30/09 au soir, dans ses mots : « contenu ferré
      à gauche, mais les trois colonnes resserrées et centrées en bloc, ce
      qui supprime le vide sans centrer le texte ».

      Elle annule le centrage du contenu posé le même jour dans la v56,
      règle v69, qui répondait à son constat du matin. Ce qu'elle garde de
      ce constat : le vide ne se rouvre pas à droite, parce que les colonnes
      ne font plus un tiers chacune mais la largeur de leur contenu, et que
      le groupe est centré.

      Ce qui ne se rouvre pas non plus : la variante où seule la colonne
      « Contact » se calait à droite, essayée et écartée par lui le 30/09.

      La bascule reste à 641 px, celle du pied, et non à 760 comme celle
      des cartes de décryptage. */
@media (min-width: 760px) {
  .rail .carte-tous:not(.carte-tous-tete) { place-content: center; text-align: center; }
}

@media (min-width: 641px) {
  .pied-colonnes {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem 4.5rem;
    justify-items: start;
    text-align: left;
  }
  .pied-colonnes > div { flex: 0 1 auto; max-width: 22rem; }
}

/* ---- v78, 01/10/2026. Une barre de défilement sur ordinateur -----------
   Constat de Yannick : sur son ordinateur, il ne peut faire défiler le rail
   qu'au doigt, son écran étant tactile. À la souris, rien ne le dit et rien
   ne le permet simplement.

   LA BARRE ÉTAIT MASQUÉE DEPUIS LE DÉBUT, par « scrollbar-width: none » et
   la règle webkit qui va avec. C'était juste sur téléphone, où le doigt
   suffit et où une barre mangerait de la place. Ce ne l'était pas sur
   ordinateur, où elle est le seul indice visible qu'un bloc se fait
   défiler, et le seul moyen d'y arriver sans molette horizontale.

   ELLE REVIENT À PARTIR DE 760 PX, et seulement là. Discrète : filet de
   6 px, teinte du trait de la charte, poussé en terre cuite au survol, sur
   une glissière crème à peine marquée. Elle garde son écart au bas des
   cartes, pour ne pas les toucher.

   Les points de position restent : ils disent où l'on en est et amènent une
   carte d'un clic, ce qu'une barre ne fait pas. */
@media (min-width: 760px) {
  .rail {
    scrollbar-width: thin;
    scrollbar-color: var(--trait) transparent;
    -ms-overflow-style: auto;
    padding-bottom: .9rem;
  }
  .rail::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .rail::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
  }
  .rail::-webkit-scrollbar-thumb {
    background: var(--trait);
    border-radius: 3px;
  }
  .rail:hover::-webkit-scrollbar-thumb,
  .rail::-webkit-scrollbar-thumb:hover {
    background: var(--terre);
  }
  .rail:hover { scrollbar-color: var(--terre) transparent; }
}

/* ---------------------------------------------------------------- v63, 02/10/2026
   L'encadré « L'essentiel » en tête de décryptage. Les décryptages font de huit à
   quatorze mille signes : un lecteur venu d'un post ou d'un moteur doit savoir en
   trois secondes si l'article répond à sa question. Il porte les réponses, le chapô
   garde le soin de planter le sujet. */
.essentiel {
  margin-top: 1.4rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--terre);
  border-radius: 6px;
  padding: 1rem 1.2rem 1.1rem;
  max-width: 44rem;
}
.essentiel .titre-encadre {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  color: var(--terre);
  margin: 0 0 .6rem;
}
.essentiel ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.essentiel li { line-height: 1.55; }
.essentiel li::marker { color: var(--terre); }
@media (max-width: 640px) {
  .essentiel { padding: .9rem 1rem 1rem; margin-top: 1.2rem; }
  .essentiel li { font-size: .98rem; }
}

/* ---------------------------------------------------------------- v64, 02/10/2026
   L'encadré héritait du centrage de .intro-page : il flottait à gauche et son texte
   était centré ligne à ligne, ce que la charte ne fait nulle part pour du texte suivi.
   Il reprend ici les usages du site : bloc centré à la largeur du chapô, contenu ferré
   à gauche, texte justifié avec césure, surtitre centré. */
.essentiel {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.essentiel .titre-encadre { text-align: center; }
.essentiel li { text-align: justify; hyphens: auto; }

/* ---------------------------------------------------------------- v66, 02/10/2026
   LE RAIL DEVIENT UN MECANISME COMMUN, et les fiches pratiques en reçoivent un.
   Demande de Yannick : « le même système de défilement horizontal pour la partie
   fiches pratiques, mêmes règles que pour Décryptages ». La classe « rail » porte
   le défilement, l'accroche des cartes, la barre à partir de 760 px et les cartes
   de lien. La classe « avec-rail », posée sur les deux sections de l'accueil, porte
   la forme de la carte, réglée écran par écran de la v54 à la v61.

   v67, 02/10/2026 : LA CARTE DE FICHE REÇOIT SON VISUEL, et devient donc la même
   carte, aux mêmes règles. Les six photos existaient déjà sans qu'on le sache :
   le visuel de partage de chaque fiche est fait d'un panneau de titre à gauche et
   d'une PHOTOGRAPHIE à droite, large de 557 px, exactement comme ceux des
   décryptages, dont les photos de carte sont ce panneau découpé. Il n'y avait donc
   rien à produire, seulement à découper au même endroit.

   CE QUI RESTE PROPRE AUX FICHES, c'est la ligne du haut. Sur un décryptage elle
   porte la date, sur une fiche elle porte le THEME : une fiche n'a pas d'actualité,
   elle a une place dans la rubrique. Elle garde la classe « date », qui lui donne
   sa géométrie, et la classe « ligne-theme » change ce qui doit changer. */
.carte-f .ligne-theme {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  color: var(--terre);
}

/* La bande des fiches est la bande FONCEE : la carte y est claire, à l'inverse de
   la bande des décryptages, où elle est crème sur papier. */
#fiches .carte-d, #fiches .rail .carte-tous { background: var(--papier); }

@media (max-width: 759px) {
  /* Au téléphone, la ligne du haut d'un décryptage tient sur une ligne parce que
     c'est une date. Un thème est plus long : il passe au corps réduit plutôt que
     de pousser la carte vers le bas. */
  .rail-fiches .carte-f .ligne-theme { font-size: .66rem; letter-spacing: .08em; }
}

/* ======================================================================
   v74, 05/10/2026. Les deux pages de rubrique sont harmonisées, et la
   carte « Tous les… » survole pareil des deux côtés.
   ====================================================================== */

/* ---- 1. LE SURVOL DE LA CARTE « TOUS LES… », ET C'ÉTAIT UN DÉFAUT RÉEL.

   Constat de Yannick le 05/10 : « la manière dont on survole est visuellement
   différente entre les fiches pratiques et les décryptages », et le texte
   disparaît au survol.

   LA CAUSE, et elle est de spécificité. La règle de la bande des fiches,
   « #fiches .rail .carte-tous { background: var(--papier) } », porte un
   IDENTIFIANT : elle pèse plus que « .rail .carte-tous:hover », qui n'a que
   des classes. Au survol, la couleur du texte passait donc à --papier pendant
   que le fond restait --papier. Texte invisible sur fond identique.

   LA RÈGLE QUI EN SORT, et elle vaut au-delà de ce cas : UN ÉTAT DE SURVOL SE
   DÉCLARE À LA MÊME SPÉCIFICITÉ QUE L'ÉTAT DE REPOS QU'IL DOIT COUVRIR. Un
   sélecteur d'identifiant posé pour un fond éteint silencieusement tous les
   états déclarés plus bas avec des classes seules. */
#fiches .rail .carte-tous:hover,
#fiches .rail .carte-tous:focus-visible {
  background: var(--terre);
  color: var(--papier);
  border-style: solid;
}
/* Et le même état, explicitement, pour la bande des décryptages, afin que les
   deux soient tenus par une règle de même forme et non l'un par défaut. */
.rail .carte-tous:hover,
.rail .carte-tous:focus-visible {
  background: var(--terre);
  color: var(--papier);
  border-style: solid;
}

/* ---- 2. LE SOMMAIRE DES DEUX PAGES DE RUBRIQUE
   Même forme que la liste de la page des fiches, resserrée : elle ne porte
   que des titres, le résumé étant sur la carte de détail. */
.fiches-apercu.sommaire li { padding-block: .55rem; }
.fiches-apercu.sommaire .resume-fiche { font-size: .85rem; }

/* ---- 3. LA CIBLE D'UNE ANCRE PASSE SOUS LE BANDEAU COLLANT
   Le bandeau est en position collante : sans cette marge, le haut de la carte
   visée se range derrière lui et le lecteur croit avoir mal cliqué. */
/* v146 : la règle générale des ancres couvre ce cas, voir la fin de la feuille. */

/* ---- 4. LE VISUEL SUR LA PAGE D'UNE FICHE
   La photo est composée en 557 x 630, portrait. Elle est présentée ici dans la
   bande 1200/630, qui est la fenêtre de la charte, section 8.1 : le lecteur
   retrouve donc exactement le cadrage qu'il a vu sur la carte. */
.visuel-article {
  margin: 0 0 1.8rem;
  border-radius: 6px;
  overflow: hidden;
}
.visuel-article img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 759px) {
  /* Sur téléphone, la bande ne ferait que 180 px de haut pour 342 de large et
     le sujet y deviendrait illisible. Le carré y reprend la main, comme sur les
     cartes du rail. */
  .visuel-article img { aspect-ratio: 4 / 3; }
}

/* ======================================================================
   v76, 05/10/2026. La carte « Tous les… » de tête, et la ligne de lien.
   ====================================================================== */

/* ---- LA CARTE DE TÊTE DISPARAÎT SUR ORDINATEUR, ET SEULEMENT LÀ.
   Demande de Yannick : « retire les deux Tous les les plus à gauche, conserve
   ceux à droite, des sections Décryptages et Fiches pratiques, de la version
   ordi uniquement ».

   POURQUOI ELLE RESTE SUR TÉLÉPHONE. Le rail y montre une carte à la fois : la
   carte de tête y est la seule chose qui dise, avant tout défilement, que la
   rubrique a une page à elle. Sur ordinateur, trois cartes et la carte de queue
   sont visibles d'un coup, et la ligne de lien posée sous les points le dit
   mieux qu'une carte qui prend la place d'un article. */
/* v77, 05/10/2026 : la carte de tete est retiree du balisage a toutes les
   largeurs, la regle de masquage n'a plus d'objet. */

/* ---- LA LIGNE DE LIEN SOUS LES POINTS
   Elle reprend la forme du lien « Lire le décryptage » des cartes, et non celle
   d'un bouton : c'est un lien de lecture, pas une action. Le bouton creux qui
   vivait sous le rail reste masqué, il faisait doublon. */
.lien-rail {
  margin: .9rem 0 0;
  text-align: center;
}
.lien-rail .lien-suite {
  display: inline-block;
  font-size: .95rem;
}
@media (min-width: 760px) {
  .lien-rail { margin-top: 1.1rem; }
}

/* ======================================================================
   v80, 05/10/2026. LE VISUEL ENTIER SUR LA RUBRIQUE DES FICHES ET SUR LES
   PAGES DE FICHE.
   Décision de Yannick : « essaye d'utiliser la version pleine des visuels,
   le cas échéant n'utilise pas toute la largeur du cadre », pour la page
   Fiches pratiques et pour chaque page de fiche, PUIS, le même jour, pour la
   page Décryptages : « décryptages pareil que les fiches ». Les deux pages de
   rubrique restent donc harmonisées. L'ACCUEIL GARDE LA BANDE.
   Le fichier est au rapport 557 / 630 : à ce rapport, object-fit ne coupe
   rien, et l'image se montre entière. Elle est donc calée par sa LARGEUR,
   et c'est la largeur qui lui laisse de l'air de chaque côté.
   ====================================================================== */

.carte-d .vignette {
  display: flex;
  justify-content: center;
  padding: 1rem 0 .2rem;
}
.carte-d .vignette img {
  width: min(64%, 300px);
  height: auto;
  aspect-ratio: 557 / 630;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  border: 1px solid var(--trait);
}

/* L'accueil n'est pas concerné : ses deux rails gardent la bande. */
.rail .carte-d .vignette {
  display: block;
  padding: 0;
}
.rail .carte-d .vignette img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  border-radius: 0;
  border: 0;
}

/* La page d'une fiche : même plaque, centrée au-dessus du texte. */
.visuel-article {
  display: flex;
  justify-content: center;
}
.visuel-article img,
.visuel-article picture {
  width: min(52%, 300px);
  height: auto;
  aspect-ratio: 557 / 630;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  border: 1px solid var(--trait);
}
@media (max-width: 759px) {
  .visuel-article img,
  .visuel-article picture { width: min(62%, 260px); aspect-ratio: 557 / 630; }
  .carte-d .vignette img { width: min(58%, 260px); }
}

/* ======================================================================
   v81, 05/10/2026. LE HAUT DE L'ACCUEIL.
   Décisions de Yannick, dans l'ordre où elles sont venues :
   - le titre court « Conseil en fin de carrière et retraite » est SUPPRIMÉ.
     Les deux paragraphes redeviennent le h1, comme en ligne, à ceci près
     qu'ils portent chacun leur vignette ;
   - le premier texte est décalé à gauche, sa vignette occupe la marge de
     droite ; le second est décalé à droite, sa vignette occupe la marge de
     gauche. Les deux rangées ont la même largeur totale, donc leurs bords
     extérieurs s'alignent d'eux-mêmes ;
   - la colonne de texte garde la mesure du site en ligne, 44 rem au-delà
     de 1 024 px, 34 rem en dessous. C'est aux vignettes que va l'espace ;
   - LE CORPS EST AUGMENTÉ D'UN DIXIÈME : 1,6 rem au-delà de 1 024 px au
     lieu de 1,45, et clamp(1.2rem, 3.5vw, 1.5rem) en dessous ;
   - les espaces sont resserrés : sous la devise, entre les deux
     paragraphes, et au-dessus du chapeau ;
   - sous 640 px, les vignettes passent au-dessus, la première à gauche,
     la seconde à droite, et le texte garde toute la largeur ;
   - « Notre différence » passe en premier sous 640 px.
   ====================================================================== */

/* Le h1 porte maintenant les deux accroches. Les règles de l'ancien h1 à
   deux blocs sont neutralisées ici, puisque cette feuille est concaténée
   en dernier. */
.tete-accueil .duo {
  display: grid;
  gap: 1.1rem;
  margin: .5rem auto 0;
  max-width: 34rem;
  text-align: left;
  font-size: inherit;
  line-height: inherit;
}
.duo-bloc { display: grid; gap: .7rem; }

.duo-bloc .bloc-titre {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--encre);
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  margin: 0;
}
/* La dernière ligne des deux paragraphes est au fer à gauche, à TOUTES les
   largeurs. Demande de Yannick du 05/10 au soir, d'abord pour le téléphone,
   puis pour l'ordinateur. Une dernière ligne centrée ferme le bloc par un
   axe que rien d'autre ne suit dans cette tête.
   LE SÉLECTEUR PORTE TROIS CLASSES À DESSEIN : il doit peser plus que
   « .duo-bloc .bloc-titre », qui le suit dans la feuille.
   NOTE DU 12/10/2026 : la règle « .tete-accueil h1 .bloc-titre
   { text-align-last: center } », ligne 1309, que ce commentaire citait
   jusqu'ici, ne s'applique plus : le bloc des deux paragraphes n'est plus
   un h1 depuis que le titre de la page est passé à la devise. */
.tete-accueil .duo .bloc-titre { text-align-last: left; }
.duo-bloc strong { font-weight: 700; }
.duo-bloc img {
  width: 4.6rem;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--trait);
}

/* L'espace sous la devise et au-dessus du chapeau, resserré. */
.tete-accueil .devise { margin-bottom: .7rem; }
.tete-accueil .chapeau { margin-top: 1.3rem; }

/* Sous 640 px, mise au point du 05/10 au soir. Demandes de Yannick :
   le chapeau doit tenir entier au chargement, les vignettes se placent à
   droite et à gauche de leur paragraphe comme sur ordinateur, le nom du
   cabinet et la devise remontent vers le bandeau, et tous les espaces se
   resserrent. Le corps du texte ne bouge pas. */
@media (max-width: 639px) {
  /* --air : l'air SUPPLÉMENTAIRE que l'écran peut absorber sans qu'un bouton
     soit coupé au chargement. Il vaut zéro par défaut et se relève par paliers
     plus bas, selon la largeur ET la hauteur de la fenêtre. Il se répartit
     entre les quatre écarts de la tête, le plus gros revenant aux deux
     jointures que Yannick a nommées : sous le bandeau, et entre les blocs. */
  /* L'ORDRE DES BLOCS SUR TÉLÉPHONE, ARRÊTÉ PAR YANNICK LE 06/10/2026.
     Le nom du cabinet et sa devise, puis ce que le cabinet EST, puis les deux
     paragraphes illustrés. Le document garde son ordre : c'est l'affichage qui
     change, par `order`, et seulement en dessous de 640 px. */
  .tete-accueil { display: flex; flex-direction: column; }
  .tete-accueil .logotype { order: 1; }
  .tete-accueil .devise   { order: 2; }
  .tete-accueil .chapeau  { order: 3; }
  .tete-accueil .duo    { order: 4; }
  .tete-accueil .actions-tete { order: 5; }

  /* UN SEUL BOUTON SUR TÉLÉPHONE, décision de Yannick du 06/10.
     « Prendre contact » reste présent en haut de chaque page, dans le bandeau
     collant : le retirer d'ici ne retire donc aucun chemin vers le contact. */
  .actions-tete .bouton-plein { display: none; }

  /* LE TITRE DE LA SECTION SUIVANTE DOIT PARAÎTRE EN BAS DE L'ÉCRAN AU
     CHARGEMENT. Demande de Yannick du 06/10 : il invite à faire défiler.
     Le couloir entre le bas du bouton et le bas de ce titre mesurait 86 px,
     constants à toutes les largeurs : 14 sous la tête, 40 au-dessus de la
     section, 31 de titre. Seuls les 40 sont réductibles, et pour la seule
     section qui suit la tête. À 20 px, le couloir tombe à 66 px, et ces
     vingt pixels rendus sont vingt pixels d'air gardés. */
  .tete-accueil + .fond-clair { padding-top: 20px; }

  /* L'AIR SE CALCULE, IL NE SE TABULE PLUS. 06/10/2026.
     Avec un seul bouton, la place libre sous lui est devenue régulière : elle
     augmente d'un pixel par pixel de hauteur d'écran. Elle vaut donc
     « hauteur de la fenêtre moins hauteur de la tête », et la hauteur de la
     tête ne dépend plus que de la largeur, qui commande le nombre de lignes.
     --tete porte cette hauteur, réserve de sécurité comprise, mesurée par
     largeur. LES CINQ COEFFICIENTS DE RÉPARTITION TOTALISENT EXACTEMENT 1,00 :
     0,18 sous le bandeau, 0,24 avant le bloc du cabinet, 0,22 avant les deux
     paragraphes, 0,14 entre eux, 0,11 avant le bouton, 0,11 après lui. S'ils totalisaient plus,
     le bouton descendrait de davantage que l'air calculé et serait coupé. --air est ce qui reste, borné à 120 px pour que la tête ne se
     distende pas sur les très grands écrans.
     100svh ET NON 100vh : svh est la hauteur quand toutes les barres du
     navigateur sont affichées, c'est-à-dire l'état au chargement, celui que la
     règle des boutons vise. vh donnerait la hauteur barres rétractées, donc
     plus d'air que l'écran n'en a vraiment. Et sur un navigateur qui ignore
     svh, la déclaration entière est invalide et --air reste nul : l'échec se
     fait du bon côté. */
  .tete-accueil {
    --tete: 802px;
    --air: clamp(0px, calc(100svh - var(--tete)), 120px);
    padding-block: calc(.45rem + var(--air) * .18) calc(1.4rem + var(--air) * .11);
  }
  .tete-accueil .devise { margin: .5rem 0 .35rem; }
  /* Écart entre le chapeau et le premier paragraphe illustré. */
  .tete-accueil .duo { gap: calc(.45rem + var(--air) * .14); margin-top: calc(.9rem + var(--air) * .22); }

  /* LA VIGNETTE ENTRE DANS LE TEXTE. Le bloc redevient un bloc ordinaire,
     l'image flotte, et le texte reprend sous elle, au fer du paragraphe.
     Premier paragraphe en haut à gauche, second en haut à droite. */
  .duo-bloc { display: block; }
  /* LA VIGNETTE N'HABILLE QUE LES DEUX PREMIÈRES LIGNES. Demande de Yannick
     du 06/10 : la suite du paragraphe doit démarrer SOUS la vignette, au fer
     de son bord, et non à côté d'elle.
     Le calcul est direct : le nombre de lignes habillées vaut la hauteur de
     l'image plus sa marge basse, divisée par l'interligne, arrondie au
     supérieur. L'interligne du téléphone mesure 27 px, donc deux lignes font
     54 px, et l'image doit tenir dans 54 moins les 4 px de marge, soit 50.
     ARBITRAGE DE YANNICK DU 06/10 : TROIS LIGNES, ET NON DEUX. À 48 px la
     scène de la vignette ne se lisait plus. Trois lignes font 81 px, moins les
     4 px de marge, soit 77 au plus. 4,8 rem valent 76,8 px : trois lignes
     habillées, la quatrième démarre dessous, et la scène redevient lisible.
     À 5,6 rem, l'image en habillait quatre. */
  .duo-bloc img {
    width: 4.8rem;
    border-radius: 5px;
    margin-bottom: .25rem;
  }
  .duo-bloc:nth-child(1) img { float: left; margin-right: .7rem; }
  .duo-bloc:nth-child(2) img { float: right; margin-left: .7rem; }
  /* Le flottant est dégagé à la fin de chaque bloc, sans quoi le second
     paragraphe viendrait se ranger à côté de l'image du premier. */
  .duo-bloc::after { content: ""; display: block; clear: both; }

  /* La devise tient sur une ligne : interlettrage et corps resserrés. */
  .tete-accueil .devise { font-size: .6rem; letter-spacing: .1em; }
  .tete-accueil .devise span { white-space: normal; }

  /* Le chapeau descend d'un cran, il n'est pas la promesse principale. */
  .tete-accueil .chapeau { font-size: .95rem; }

  /* Le corps sur téléphone : 18 px. Mesuré sur sept formats, c'est la
     seule valeur où le chapeau tient entier dès 390 x 780 ET où aucun
     bouton n'est coupé au chargement. À 19,2 px un bouton est coupé sur
     deux formats ; à 17,28 px, celui du site en ligne, sur deux aussi. */
  .duo-bloc .bloc-titre { font-size: 1.125rem; line-height: 1.5; }
  /* Le fer à gauche de la dernière ligne vaut à toutes les largeurs : la
     règle est remontée hors des requêtes de média. */
  /* Écart entre la devise et le bloc qui dit ce que le cabinet est. */
  .tete-accueil .chapeau { margin-top: calc(.6rem + var(--air) * .24); }
  /* 2 rem, et non 0,9 : mesuré sur huit formats de téléphone, c'est la
     valeur où aucun bouton n'est coupé au chargement. À 0,9 rem comme à
     1,5 rem, « Prendre contact » est coupé en 390 x 780 ; à 2,6 rem, un
     bouton est coupé en 390 x 780 et un autre en 390 x 844. À 2 rem, en
     390 x 780, « Notre différence » paraît entier et « Prendre contact »
     passe tout entier sous la ligne de pli, ce que la règle demande. */
  /* LE BOUTON EST CENTRÉ entre la fin du texte et le bas de la section :
     sa marge haute et le fond perdu de la section portent la MÊME valeur de
     base et la MÊME part d'air. Demande de Yannick du 06/10, qui relevait
     34 px au-dessus contre 14 au-dessous. */
  .actions-tete { margin-top: calc(1.4rem + var(--air) * .11); }
  /* Si un seul bouton devait apparaître au chargement, c'est celui-là. */
  .actions-tete .bouton-creux { order: -1; }
}

/* LA HAUTEUR DE LA TÊTE PAR LARGEUR, MESURÉE LE 06/10/2026 sur une grille de
   sept largeurs et neuf hauteurs, l'air remis à zéro. Chaque valeur est la
   hauteur constatée du bas du bouton, plus quatorze pixels de réserve.
   Une largeur plus grande fait moins de lignes, donc une tête plus courte.
   DEPUIS LE 06/10 CES VALEURS INCLUENT LE COULOIR DE 66 px qui mène au titre
   de la section suivante, plus six pixels sous lui. Conséquence mesurable :
   quand l'air est positif, le bas du titre « Vous êtes » se trouve exactement
   à six pixels du bas de l'écran, et le bouton à soixante-douze. */
@media (max-width: 374px) { .tete-accueil { --tete: 840px } }
@media (min-width: 375px) and (max-width: 389px) { .tete-accueil { --tete: 791px } }
@media (min-width: 428px) and (max-width: 439px) { .tete-accueil { --tete: 779px } }
@media (min-width: 440px) and (max-width: 499px) { .tete-accueil { --tete: 757px } }
@media (min-width: 500px) and (max-width: 639px) { .tete-accueil { --tete: 684px } }

/* Les écrans étroits ET courts, 360 x 640 et 375 x 667, laissaient le
   chapeau dépasser la ligne de pli de quelques pixels. La tête s'y
   resserre. La condition porte sur la hauteur autant que sur la largeur :
   resserrer un écran étroit mais haut, 360 x 780, remonterait les boutons
   dans la ligne de pli, ce qui a été mesuré. */
@media (max-width: 389px) {
  /* Le corps du chapeau seul, à toutes les hauteurs : il gagne douze
     pixels, de quoi tenir entier en 360 x 780, et les boutons restent
     sous la ligne de pli à cette hauteur comme à 800 px. */
  .tete-accueil .chapeau { font-size: .9rem; }
  /* Même largeur que plus haut : l'interligne ne change pas sous 390 px, donc
     le calcul des deux lignes habillées ne change pas non plus. */
  .duo-bloc img { width: 4.8rem; }
  /* LA RÈGLE DE 5 rem QUI ÉTAIT ICI EST RETIRÉE LE 06/10. Elle datait de la
     v85, quand la tête portait DEUX boutons et qu'il fallait les repousser
     ensemble sous la ligne de pli des écrans de 360 px. Depuis la v87 il n'y
     en a qu'un, et le calcul de `--tete` le place déjà. Elle ne faisait plus
     que décaler le bouton de 80 px au lieu de 34, ce qui se voyait.
     RÈGLE : UN RÉGLAGE POSÉ POUR UNE CONTRAINTE SE RETIRE QUAND LA CONTRAINTE
     DISPARAÎT. Un correctif oublié devient un défaut. */
}
@media (max-width: 389px) and (max-height: 730px) {
  .tete-accueil { padding-block: .3rem .9rem; }
  .tete-accueil .devise { margin: .35rem 0 .3rem; }
  .tete-accueil .chapeau { margin-top: .4rem; }
  .tete-accueil .duo { gap: .3rem; margin-top: .2rem; }
}

/* À partir de 640 px : le texte garde sa mesure, la vignette prend la marge.
   34 rem de texte + 1,2 rem d'écart + 8 rem de vignette = 43,2 rem. */
@media (min-width: 640px) {
  .tete-accueil .duo { max-width: 41.5rem; gap: .9rem; }
  /* LA VIGNETTE A LA HAUTEUR DE SON TEXTE, demande de Yannick du 06/10 :
     « sans déborder vers le bas ou le haut de la part du texte ou de la
     vignette ». L'image ne commande donc plus sa hauteur, elle la reçoit de
     la ligne de la grille, et « object-fit: cover » recadre plutôt que de
     déformer. Mesuré avant : image 136 px pour un texte de 119, soit 17 px
     de débordement, exactement ce qui se voyait. */
  .duo-bloc { align-items: stretch; gap: 1.2rem; }
  /* « height: 1px » PUIS « min-height: 100% » : l'astuce est nécessaire.
     Avec « height: 100% » seul, l'image contribue encore à la hauteur de la
     ligne par sa taille intrinsèque, et c'est donc ELLE qui la fixe : mesuré,
     136 px d'image pour 119 px de texte. En lui donnant une hauteur d'un
     pixel, elle cesse de peser dans le calcul, la ligne est fixée par le
     texte, et la hauteur minimale la lui fait rattraper ensuite. */
  .duo-bloc img { height: 1px; min-height: 100%; object-fit: cover; align-self: stretch; }
  .duo-bloc:nth-child(1) { grid-template-columns: 1fr 6.3rem; }
  .duo-bloc:nth-child(1) img { order: 2; }
  .duo-bloc:nth-child(2) { grid-template-columns: 6.3rem 1fr; }
  .duo-bloc img { width: 6.3rem; }
}

/* Au-delà de 1 024 px : la mesure du site, 44 rem, le corps augmenté à
   1,6 rem, et les vignettes à 11,5 rem dans les marges.
   44 + 1,8 + 11,5 = 57,3 rem. */
@media (min-width: 1024px) {
  .tete-accueil .duo { max-width: 54.3rem; margin-top: .3rem; gap: .7rem; }
  .duo-bloc { gap: 1.8rem; }
  .duo-bloc:nth-child(1) { grid-template-columns: 1fr 8.5rem; }
  .duo-bloc:nth-child(2) { grid-template-columns: 8.5rem 1fr; }
  .duo-bloc img { width: 8.5rem; }
  .duo-bloc .bloc-titre { font-size: 1.6rem; line-height: 1.55; }
}

/* ================================================================
   v90, 06/10/2026 : LES BLOCS REPLIABLES SUR TÉLÉPHONE
   Décision de Yannick du 06/10, après mesure des dix-neuf pages.
   Deux emplois : le bloc des sources, sur neuf pages, et les sept
   régimes de la fiche « de quels régimes relevez-vous ».
   Le titre devient le bouton d'ouverture, donc aucun libellé n'est
   dupliqué et la cible du doigt fait toute la largeur.
   ================================================================ */

.replier > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  border-radius: 6px;
}
.replier > summary::-webkit-details-marker { display: none; }
.replier > summary > h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
.replier > summary:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; }

/* Le chevron, dessiné en CSS, qui pivote à l'ouverture. Il est le seul
   indicateur d'état visible, le reste du titre ne changeant pas. */
.replier > summary::after {
  content: "";
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--terre);
  border-bottom: 2px solid var(--terre);
  transform: rotate(45deg) translate(-.12rem, -.12rem);
  transition: transform .18s ease;
}
.replier[open] > summary::after { transform: rotate(-135deg) translate(-.18rem, -.18rem); }

/* UN TITRE QUI DEVIENT UN BOUTON SE FERRE À GAUCHE. La charte centre les
   titres, section 2, et c'est juste tant qu'un titre coiffe un bloc de texte.
   Replié, celui-ci n'coiffe plus rien : il est une ligne de choix dans une
   liste de sept, et une liste de choix centrée se lit mal, le chevron restant
   seul à droite d'un bloc ragué. L'exception vaut pour le seul état replié
   d'un bloc repliable, et elle est consignée à la charte. */

/* Replié, le titre reste seul : de l'air et un filet pour que les sept
   intitulés de régime forment une liste lisible plutôt qu'un pavé. */
.replier:not([open]) > summary { padding-block: .55rem; }
.replier-regime + .replier-regime { border-top: 1px solid var(--trait); }
.replier-regime[open] { padding-bottom: .4rem; }

/* AU-DELÀ DE 640 px, LE BLOC EST OUVERT ET SON BOUTON DISPARAÎT.
   L'attribut « open » est dans le document produit : sans script, le bloc
   reste donc ouvert partout, c'est-à-dire l'état d'avant la v90. Le
   repliement est un confort de lecture, jamais une condition d'accès. */
/* AU-DELÀ DE 640 px, LE BLOC EST OUVERT ET SON BOUTON CESSE D'EN ÊTRE UN.
   DÉFAUT CORRIGÉ LE 06/10 : la v90 écrivait « display: none » sur le summary.
   Or LE TITRE EST DANS LE SUMMARY : masquer le bouton masquait le titre, et
   les sept régimes comme les neuf blocs de sources ont perdu leur intitulé sur
   ordinateur. Le summary reste donc affiché, c'est sa seule qualité de bouton
   qui est retirée : plus de chevron, plus de curseur de main, plus de clic.
   RÈGLE : ON NE MASQUE PAS UN CONTENEUR POUR MASQUER CE QU'IL PORTE. */
/* v108, 06/10/2026 : LE SUMMARY REDEVIENT UN BOUTON À TOUTES LES LARGEURS.
   Yannick revient sur sa décision du matin : les blocs se replient aussi sur
   ordinateur. Les trois qualités de bouton qui avaient été retirées au-delà de
   640 px, le clic, le curseur et le chevron, sont donc rendues. */
@media (min-width: 640px) {
  .replier-regime + .replier-regime { border-top: 0; }
}

/* Et le titre d'un bloc repliable se ferre à gauche à TOUTES les largeurs,
   et non plus sous 640 px seulement : replié, il ne coiffe plus un bloc de
   texte, il est une ligne de choix dans une liste, et une ligne centrée avec
   son chevron seul à droite se lit mal. C'est l'exception à la charte posée
   au v90, élargie par la décision de ce soir. */
.replier > summary > h2 { text-align: left; text-align-last: left; }

/* v108 : LES BLOCS AUTONOMES SE CENTRENT SUR L'AXE VERTICAL.
   Règle posée par Yannick le 06/10 : « centre toujours les éléments, comme
   cette photo, sauf discussion contraire ». Mesuré sur les vingt et une
   pages : la photo d'article l'était déjà, et la seule famille d'éléments
   seuls dans leur colonne qui ne l'était pas est la ligne de renvoi,
   « Tous les chiffres » et « Pour aller plus loin ». L'intérieur des cartes
   garde son fer à gauche, Yannick l'ayant explicitement exclu. */
.etroit > p.aller-plus-loin { text-align: center; }

/* ================================================================
   v96, 06/10/2026 : LE RETOUR EN HAUT, SUR TÉLÉPHONE
   Dix-huit pages sur dix-neuf font cinq écrans de téléphone ou plus,
   la plus longue en fait quatorze et demi. Ce bouton répond à ce
   chiffre, et à lui seul : un signe, un sens, sur toutes les pages.
   Il n'existe pas au chargement, donc il ne masque rien du premier
   écran. C'est le script qui le fait paraître après un écran de
   défilement, et sans script il ne paraît jamais : un confort, pas
   un chemin. Au-delà de 640 px il n'existe pas du tout.
   ================================================================ */

.remonter {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  background: var(--papier);
  box-shadow: 0 6px 16px -8px rgba(31, 42, 54, .45);
  cursor: pointer;
  padding: 0;
  /* Caché par défaut, et retiré de la navigation au clavier tant qu'il l'est. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(.4rem);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.remonter.vu { opacity: 1; visibility: visible; transform: none; }

/* Le chevron, dessiné en CSS, pointe vers le haut. Même tracé que celui des
   blocs repliables, pour que le site n'ait qu'un seul dessin de chevron. */
.remonter::before {
  content: "";
  width: .55rem; height: .55rem;
  border-top: 2px solid var(--encre);
  border-left: 2px solid var(--encre);
  transform: rotate(45deg) translate(.1rem, .1rem);
}
.remonter:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .remonter { transition: none; }
}
/* v98, 06/10/2026 : LE BOUTON EXISTE SUR ORDINATEUR, ET IL RESTE VISIBLE
   JUSQU'AU BAS DE LA PAGE, décision de Yannick. Il s'écarte davantage du bord
   sur ordinateur, où la souris passe.

   LE DÉFAUT MESURÉ, ET SA CORRECTION. 19 pages, 2 largeurs : à 1 440 px la
   colonne laisse 184 px de marge à droite, aucun recouvrement. À 1 121 px, la
   largeur de l'écran de Yannick, elle arrive à 3 px du bord, et le bouton
   recouvrait le lien « Mentions légales » du pied de page, DONC INTERCEPTAIT
   SON CLIC. La première correction effaçait le bouton à l'arrivée du pied de
   page ; Yannick l'a refusée, le bouton doit rester visible.
   LA CORRECTION RETENUE EST DONC DANS LE PIED DE PAGE, QUI RÉSERVE SA PLACE AU
   BOUTON : son fond perdu vaut la hauteur du bouton, plus son écart au bord,
   plus trois pixels de garde. La dernière ligne de texte d'une page se tient
   ainsi toujours au-dessus du carré du bouton, à toutes les largeurs.
   Reste assumé : à 1 121 px, en cours de page, le bouton couvre un carré de
   44 px de texte sur les pages RH et CSE. Un paragraphe recouvert gêne la
   lecture d'un mot, un lien recouvert empêche un clic : seul le second était
   un défaut. */
@media (min-width: 640px) {
  .remonter {
    right: 1.75rem;
    bottom: 1.75rem;
    box-shadow: 0 8px 20px -10px rgba(31, 42, 54, .5);
  }
  .remonter:hover { background: var(--creme); }
}

/* La place réservée au bouton au bas de chaque page : 44 px de bouton,
   1,75 rem d'écart au bord et 3 px de garde font 75 px sur ordinateur ;
   44 px, 1 rem et 3 px font 63 px sur téléphone. Arrondi au quart de rem
   supérieur, et l'encoche du téléphone s'y ajoute. */
.pied { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 639px) {
  .pied { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
}


/* ======================================================================
   v102, 06/10/2026. TROIS RETOURS DE YANNICK SUR LA v101 EN LIGNE.
   ====================================================================== */

/* 1. LE TEXTE D'UN BOUTON SE CENTRE, ET IL NE L'ÉTAIT PAS.
   Relevé par Yannick sur « Le bilan retraite et la reconstitution de
   carrière », dont les deux lignes partaient du même bord gauche.
   LA CAUSE : la règle générale .bouton ne portait aucun alignement, donc le
   texte héritait de celui de son conteneur. Deux correctifs locaux avaient
   déjà été posés, sur la tête d'accueil et sur le corps des fiches : ils
   traitaient le symptôme à deux endroits, jamais la cause.
   RÈGLE : UN CORRECTIF POSÉ DEUX FOIS AU MÊME ENDROIT DE L'ARBRE EST LE SIGNE
   QUE LA RÈGLE MANQUE PLUS HAUT. */
.bouton { text-align: center; }

/* 2. LE TITRE D'UN BLOC REPLIABLE TOUCHAIT SON CONTENU.
   Relevé par Yannick sur la section des sources, et la mesure l'a trouvé sur
   CINQUANTE-TROIS blocs : les quarante-quatre sections des six fiches et les
   neuf blocs de sources. L'écart entre un titre de section et son contenu vaut
   32 px partout ailleurs sur le site ; sous un <summary> il valait ZÉRO,
   parce que la règle qui met le h2 à plat dans le bouton annule sa marge.
   La marge est rendue au bloc OUVERT, donc elle ne s'applique pas à une liste
   de titres repliés sur téléphone, où elle écarterait les choix. */
.replier[open] > summary { margin-bottom: 2rem; }
@media (max-width: 639px) {
  .replier[open] > summary { margin-bottom: 1.2rem; }
}

/* 3. DE L'AIR DANS LA PREMIÈRE SECTION DE L'ACCUEIL, SUR ORDINATEUR.
   Demande de Yannick : « donne davantage d'air à la première section, espace
   un peu plus entre les blocs 1 à 3. » Mesuré avant, à 1 121 px : 26 px entre
   le logotype et la devise, 11 px entre la devise et les deux paragraphes,
   20 px entre les paragraphes et le chapeau. Les trois blocs se touchaient.
   LA MÉCANIQUE DE L'AIR DU TÉLÉPHONE NE S'APPLIQUE PAS ICI : elle vit dans la
   requête « max-width: 639px », et la contrainte qui l'a fait naître, le
   bouton coupé au chargement, n'existe pas sur ordinateur. */
@media (min-width: 640px) {
  .tete-accueil { padding-block: 3.75rem 3.75rem; }
  .tete-accueil .devise { margin-bottom: 1.5rem; }
  .tete-accueil .chapeau { margin-top: 2.2rem; }
}
@media (min-width: 1024px) {
  .tete-accueil .duo { margin-top: 1.1rem; }
}


/* ======================================================================
   v104, 06/10/2026. LES RANGÉES D'UNE LIGNE DE CARTES S'ALIGNENT.
   Relevé par Yannick sur la page RH : la troisième carte a un titre d'une
   ligne quand les deux autres en ont deux, donc son texte démarrait 36 px
   plus haut, et la liste du bas 25 px plus bas que ses voisines.
   MESURÉ SUR LES VINGT ET UNE PAGES : quatre blocs seulement sont concernés,
   les prestations des pages RH et CSE et les deux repères chiffrés de ces
   mêmes pages. Les cartes de rubrique et les trois portes de l'accueil sont
   déjà alignées, ces dernières par la même technique.
   LE MOYEN EST CELUI QUI EXISTE DÉJÀ DANS LA FEUILLE, et c'est ce qui le rend
   sûr : la carte devient une grille dont les rangées sont celles de son
   parent, « subgrid ». Chaque élément de même rang se place alors sur la même
   ligne d'une carte à l'autre, quelle que soit la hauteur du titre. */
@media (min-width: 760px) {
  .prestations { grid-template-rows: repeat(4, auto); }
  .prestations > .carte {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
  }
  /* v144, 11/10/2026. LE PARCOURS EN QUATRE ÉTAPES SE RANGE DEUX PAR DEUX.
     Relevé de Yannick : la grille est en auto-fit, donc elle tient trois
     cartes de front sur un écran large et la quatrième reste seule. Quatre
     cartes dans une grille à trois colonnes ne se rangent pas, c'est le même
     défaut que celui des situations, corrigé le même soir par le même geste :
     fixer les colonnes plutôt que compter sur la souplesse de la grille.
     Deux par deux, comme les deux prestations complémentaires juste en
     dessous, dont c'est déjà le rendu. Huit rangées, soit quatre par rang de
     cartes, pour que l'alignement en « subgrid » tienne sur les deux rangs. */
  .prestations.deux-par-deux {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(8, auto);
  }
  .deux-reperes { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); }
  .deux-reperes > .repere {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
  }
  /* Un repère peut n'avoir que trois lignes : sa source se place malgré tout
     sur la quatrième, sans quoi elle remonterait d'un cran et ne serait plus
     en regard de l'autre. */
  .deux-reperes > .repere > .source-chiffre { grid-row: 4; }
  /* Le bloc repliable était poussé au bas de sa carte par « margin-top: auto ».
     C'est la rangée partagée qui s'en charge désormais : la marge automatique
     le recollait au bas et désalignait son filet d'une carte à l'autre. */
  .prestations > .carte > .detail-carte { margin-top: 0; }
}


/* v106, 06/10/2026 : UN BLOC DE REPÈRES PEUT N'EN PORTER QU'UN.
   La page CSE n'a plus qu'un repère, le temps de lui trouver un remplaçant.
   Dans la grille à deux colonnes et quatre rangées, un repère seul laissait
   une moitié vide et des écarts de rangée démesurés : mesuré, la hauteur du
   bloc passait du simple au double pour moitié moins de contenu.
   LE CAS SE TRAITE PAR LA FEUILLE, et non en gardant un chiffre dont Yannick
   ne veut plus : un repère seul redevient un bloc ordinaire, centré. */
.deux-reperes:has(> .repere:only-child) {
  display: block;
  max-width: 34rem;
  margin-inline: auto;
}

/* ======================================================================
   v109, 06/10/2026. LES SUITES DU REPLIEMENT, ET LA JUSTIFICATION DES
   PAGES D'ARTICLE.
   ====================================================================== */

/* 1. LE SURTITRE D'UN BLOC REPLIABLE SUIT SON TITRE AU FER À GAUCHE.
   Relevé par Yannick : « Article initial du 15 septembre 2026 » et le titre
   dessous n'étaient pas sur le même axe. Mesuré à 1 121 px avant correction :
   41, 67, 130 et 191 px d'écart selon la longueur du titre. La cause est la
   v108, qui a porté le titre au fer à gauche et laissé le surtitre centré.
   Replié, l'ensemble est une ligne de liste : les deux lignes partent du
   même bord. */
p.titre-section:has(+ .replier) { text-align: left; text-align-last: left; }

/* Et quand le surtitre est LUI-MÊME le bouton, faute de titre dessous. */
.replier-surtitre > summary > .titre-section { margin: 0; flex: 1 1 auto; min-width: 0; text-align: left; }

/* 2. « L'ESSENTIEL » EST UNE SECTION, PLUS UN ENCADRÉ DANS LA CARTE D'INTRO.
   Il garde ses puces terre cuite, qui le distinguent d'une liste ordinaire. */
.bloc-essentiel ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; }
.bloc-essentiel li { line-height: 1.6; }
.bloc-essentiel li::marker { color: var(--terre); }

/* 3. LE TEXTE SUIVI DES NEUF PAGES D'ARTICLE EST JUSTIFIÉ, DERNIÈRE LIGNE À
   GAUCHE. Décision de Yannick : « les pages décryptage et fiches pratiques
   doivent utiliser l'aligné et la dernière phrase à gauche, sauf le cas
   échéant le chapeau de section ou de page, ou si nous avions décidé
   expressément de centrer ».
   Le crochet est la figure de l'article, présente sur ces neuf pages et sur
   aucune autre. Sont exclus : les surtitres, la ligne de mise à jour, et la
   ligne « .note », centrée par décision du 02/10. */
main:has(.visuel-article) section:not(.appel) p:not(.titre-section):not(.note):not(.maj),
main:has(.visuel-article) section li,
main:has(.visuel-article) .bloc-essentiel li {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ======================================================================
   v110, 06/10/2026. TROIS DÉCISIONS DE YANNICK, DONT UNE QUI REVIENT SUR
   CELLE DE LA VEILLE.
   ====================================================================== */

/* 1. LES TITRES REPLIABLES REVIENNENT AU CENTRE.
   Décision de Yannick : « centre les titres dépliables, tels que L'essentiel,
   par exemple. Même chose pour Sources / Les documents cités. »
   CECI ANNULE LA RÈGLE DE LA v108, qui les avait ferrés à gauche, et celle
   de la v109, qui y avait aligné le surtitre. La charte retrouve donc sa
   règle unique : un titre se centre, replié ou non.
   LE CHEVRON SORT DU FLUX pour que le centrage soit vrai : en disposition
   flexible, il prenait de la largeur et poussait le titre vers la gauche de
   la moitié de la sienne. Les deux côtés du résumé reçoivent la même
   réserve, et le chevron se pose dans celle de droite. */
.replier > summary {
  display: block;
  position: relative;
  padding-inline: 1.6rem;
}
.replier > summary > h2,
.replier > summary > .titre-section {
  margin-inline: auto;
  margin-block: 0;
  text-align: center;
  text-align-last: center;
}
.replier > summary::after {
  position: absolute;
  right: .3rem;
  top: .62em;
}
p.titre-section:has(+ .replier) { text-align: center; text-align-last: auto; }

/* 2. LA LIGNE « MIS À JOUR LE » PREND LA TERRE CUITE DU SURTITRE, qu'elle
   suit désormais immédiatement. Elle garde son italique et son bas de casse :
   deux lignes de même dessin l'une sous l'autre se liraient comme un seul
   surtitre coupé en deux. */
.maj { color: var(--terre); margin-block: .35rem 0; }

/* 3. LE PARAGRAPHE DU BLOC D'APPEL RESTE CENTRÉ SUR LES PAGES D'ARTICLE.
   Défaut introduit par la v109 : sa règle de justification visait toute
   section des neuf pages d'article, et le bloc d'appel en est une. Le
   paragraphe passait donc au justifié, alors qu'il est centré partout
   ailleurs sur le site. Mesuré : le bouton, lui, était centré au pixel près
   à 1 121, 1 440 et 1 600 px. */
/* (le correctif se fait à la source, dans la règle de la v109 ci-dessus :
   « section:not(.appel) ». Une règle ajoutée après n'y suffisait pas, son
   poids étant inférieur à celui de la règle qu'elle devait corriger.) */

/* ======================================================================
   v112, 06/10/2026. LA PAGE DE DÉCRYPTAGE DEVIENT UNE SUITE DE VOLETS.
   ====================================================================== */

/* 1. LE VOLET SE DISTINGUE PAR LA TAILLE ET PAR UN FILET, décision de
   Yannick du 06/10 contre la couleur et contre le fond. La terre cuite porte
   déjà l'accent et les surtitres, et la bande sert à séparer, pas à contenir.
   Le filet court sur toute la colonne : c'est LUI la ligne dont le chevron
   se tient à distance fixe. */
.volet {
  border-top: 1px solid var(--terre);
  padding-top: 1.15rem;
  margin-top: 2.6rem;
}
/* v120, 06/10/2026 : LE TITRE D'UN VOLET REDESCEND À LA TAILLE D'UN TITRE DE
   SECTION. Relevé par Yannick sur la page des chiffres : « les titres sont
   trop grands, c'est disproportionné dans la page. Ils ne peuvent pas avoir
   la taille du titre de la page. Au plus, ils ont la taille de Une méthode
   fondée sur les données. »
   MESURÉ À 1 121 px : le titre de volet était à 36,8 px, le titre de la page
   à 38,4 px, un titre de section à 32 px. L'écart de 1,6 px entre un volet et
   le titre de la page ne se voit pas, ce qui est exactement le défaut : deux
   niveaux de hiérarchie à la même taille n'en font qu'un.
   CECI RETIRE LA MOITIÉ DE LA DISTINCTION ARRÊTÉE AU v112, qui se faisait par
   la taille ET par le filet. Il reste le filet, plus le surtitre entré dans
   le bouton au v114. */
.volet > summary > h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.volet > summary > .titre-section { margin: 0 0 .4rem; }

/* 2. LE CHEVRON SE POSE À DISTANCE FIXE DU FILET, ET AU MÊME BORD DROIT.
   Relevé par Yannick : « elles semblent hésiter entre le titre et le
   sous-titre ». La cause était que le surtitre vivait HORS du bloc repliable :
   le chevron se calait sur la première ligne du titre, donc plus bas, et
   d'autant plus bas que le titre passait sur deux lignes.
   LE SURTITRE EST ENTRÉ DANS LE RÉSUMÉ, en production : le haut du bouton
   coïncide maintenant avec le haut du volet. Le chevron n'a plus qu'à s'y
   accrocher. */
.volet > summary::after { top: .5rem; right: 0; }

/* 3. LE VOLET D'ACTION RESTE OUVERT, et garde son chevron. Décision de
   Yannick : « il faut le laisser déplié, avec la flèche malgré tout. La
   raison est commerciale, évidemment. » */
.replier-ouvert > summary { cursor: pointer; }

/* ======================================================================
   v113, 06/10/2026. LES QUATRE ESPACEMENTS DU HAUT D'UN ARTICLE.
   Relevés par Yannick sur le décryptage Budget 2027, et ils valent pour
   toutes les pages d'article : ce sont des règles de gabarit.
   ====================================================================== */

/* 1. LE SURTITRE ET LA LIGNE DE MISE À JOUR SE RESSERRENT : elles disent la
   même chose, la date, et doivent se lire d'un seul tenant. */
.intro-page > p.titre-section { margin-bottom: .1rem; }
.intro-page .maj { margin-top: .2rem; }

/* 2. ET LA LIGNE DE MISE À JOUR S'ÉLOIGNE DU TITRE, qui est autre chose. */
.intro-page .maj + h1 { margin-top: 1rem; }

/* 3. « L'ESSENTIEL » REMONTE VERS LE CHAPÔ. Un volet placé en tête de sa
   section n'a pas à porter la marge qui le sépare du volet précédent : il
   n'en a pas. La marge de 2,6 rem reste entre deux volets qui se suivent. */
section > .volet:first-child,
section > .conteneur > .volet:first-child { margin-top: 0; }
.bloc-essentiel { padding-top: 2.1rem; }

/* 4. LE VISUEL SE CENTRE ENTRE LE TEXTE QUI LE PRÉCÈDE ET LA LIGNE DE
   COULEUR QUI LE SUIT. Mesuré avant : 56 px au-dessus, 28 px au-dessous. */
.bloc-essentiel { padding-bottom: 2.25rem; }
main:has(.visuel-article) .visuel-article { margin-block: 0 2.25rem; }

/* ======================================================================
   v114, 06/10/2026. QUATRE RELEVÉS DE YANNICK SUR LES PAGES D'ARTICLE.
   ====================================================================== */

/* 1. LE FILET SE RAPPROCHE DU HAUT DE SA SECTION. Il en marque l'ouverture :
   56 px au-dessus de lui le détachaient de la bande qu'il est censé ouvrir. */
section:has(> .volet),
section:has(> .conteneur > .volet) { padding-block: 1.75rem 2.25rem; }
section:has(> .conteneur > .volet) > .conteneur { padding-block: 0; }
/* v117 : LE SECOND SÉLECTEUR EST LA CORRECTION D'UN DÉFAUT DE LA v114.
   La règle ne visait que le volet enfant DIRECT de sa section. Un seul volet
   du site vit dans une bande, donc dans un conteneur intermédiaire : celui du
   premier geste sur le décryptage des erreurs. Il gardait les 56 px d'origine
   et descendait à 98 px du haut de sa bande, contre 28 partout ailleurs.
   RÈGLE : une règle de mise en page écrite sur une relation d'enfant direct
   se casse dès qu'une instance est enveloppée. On vérifie alors toutes les
   instances, pas celle qu'on a sous les yeux. */
/* Et le bas suit le haut : un volet replié tient sur deux lignes, et 28 px
   au-dessus contre 56 au-dessous l'auraient posé dans le tiers supérieur de
   sa bande. Les 8 px d'écart sont le poids optique habituel, non un reste. */

/* 2. « ARTICLE INITIAL DU 15 SEPTEMBRE 2026 » PREND LA FORME D'UN TITRE.
   Relevé par Yannick : « c'est bien trop petit, cela fait dérisoire dans la
   page ». La cause : ce volet n'a plus de titre depuis ce matin, et son
   surtitre tenait seul le rôle de bouton, en corps de surtitre. Il garde ses
   mots et prend la typographie des autres volets, celle de « L'essentiel ».
   La date reste donc le titre, ce qui était l'objet de la suppression. */
.replier-surtitre > summary > .titre-section {
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--encre);
  line-height: 1.25;
  margin-inline: auto;
  margin-block: 0;
}

/* 3. LES TROIS BLOCS DE TÊTE SE LISENT COMME TROIS BLOCS. La date de
   publication et la date de mise à jour n'en font qu'un, serré à 4 px. Le
   titre en est un autre, le chapô un troisième, et les deux écarts qui les
   séparent sont égaux. */
.intro-page .maj + h1 { margin-top: 1.9rem; }
.intro-page h1 + .chapeau { margin-top: 1.9rem; }

/* ======================================================================
   v116, 06/10/2026. LE VISUEL REVIENT DANS SA PROPRE RANGÉE.
   Yannick est revenu le soir même sur la décision du visuel à gauche du
   chapô : « il est beaucoup mieux placé comme sur les fiches pratiques ».
   Les règles de la v115 sont retirées, et non neutralisées par d'autres :
   une règle annulée se supprime, sinon la feuille garde la trace de chaque
   essai et plus personne ne sait ce qui s'applique.
   ====================================================================== */

/* ======================================================================
   v118, 06/10/2026. LA SYNTHÈSE DE LA PAGE DES CHIFFRES.
   Une page repliée ne doit rien cacher : la synthèse donne les trente-trois
   chiffres d'un coup, chacun menant à la section qui le porte.
   ====================================================================== */

.synthese { width: 100%; border-collapse: collapse; margin-top: 1.4rem; }
.synthese th,
.synthese td {
  text-align: left;
  vertical-align: baseline;
  padding: .55rem .6rem .55rem 0;
  border-bottom: 1px solid var(--trait);
  font-weight: 400;
  line-height: 1.45;
}
.synthese th {
  font-family: var(--serif);
  color: var(--encre);
  white-space: nowrap;
  padding-right: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.synthese th a { color: inherit; text-decoration-color: var(--terre); }
.synthese td { color: var(--texte); font-size: .95rem; }
.synthese tr:last-child th,
.synthese tr:last-child td { border-bottom: 0; }

/* Sous 560 px, les deux colonnes se superposent : le chiffre sur sa ligne,
   ce qu'il dit sous lui. Un tableau à deux colonnes dont l'une ne se coupe
   pas pousse la seconde hors de l'écran. */
@media (max-width: 559px) {
  .synthese, .synthese tbody, .synthese tr, .synthese th, .synthese td { display: block; }
  .synthese tr { border-bottom: 1px solid var(--trait); padding-block: .5rem; }
  .synthese tr:last-child { border-bottom: 0; }
  .synthese th, .synthese td { border-bottom: 0; padding: 0; white-space: normal; }
  .synthese th { font-size: 1.05rem; }
}

/* ======================================================================
   v121, 06/10/2026. LES TROIS BLOCS DE TÊTE, SUR TOUTES LES PAGES.
   Le réglage du v114 ne portait que sur les deux gabarits d'article. Mesuré
   sur les dix-huit pages à carte d'introduction : les dix pages SANS ligne de
   mise à jour laissaient 2 px entre le surtitre et le titre, contre 30 px sur
   celles qui en portent une.
   UNE RÈGLE DE GABARIT SE POSE SUR TOUS LES GABARITS, OU ELLE N'EN EST PAS UNE.
   ====================================================================== */

.intro-page > p.titre-section + h1 { margin-top: 1.9rem; }
.intro-page > h1 + .chapeau { margin-top: 1.9rem; }

/* ======================================================================
   v123, 06/10/2026. LA PAGE CONTACT : LE CHAPÔ APPARTIENT AU TITRE.
   Relevé par Yannick : « remonte le chapô un peu plus haut vers le titre. La
   référence n'est pas le texte dans les cartes, mais les bandes supérieures
   des cartes. »
   MESURÉ AVANT : 30 px du titre au chapô, 32 px du chapô au BORD HAUT des
   cartes. Les deux écarts étant presque égaux, le chapô flottait entre les
   deux blocs au lieu d'appartenir au premier.
   LE CHAPÔ NE REMONTE PAS, C'EST LE BAS QUI S'OUVRE : les 30 px du haut sont
   la règle de gabarit posée au v121 sur les dix-huit pages, et la changer ici
   créerait l'exception qu'on vient de supprimer. Le groupement se fait donc
   par le bas, ce qui produit le même effet sans coûter la règle.
   ====================================================================== */

main:has(.contact-page) .intro-page { padding-bottom: 1.75rem; }
main:has(.contact-page) > .contact-page { padding-top: 1.75rem; }

/* ------------------------------------------------------------------ v125, 07/10/2026
   LE PIED DE PAGE SE COLLE AU BAS DE L'ECRAN SUR LES PAGES COURTES.
   Releve par Yannick sur sa tablette en portrait : 461 px de creme nu sous le
   pied de contact.html. Trois pages concernees des que la fenetre depasse
   environ 1 300 px de haut : 404 (907 px), contact (461), carte (308).

   LA FORME EST CHOISIE APRES MESURE DE TROIS VARIANTES, et la premiere etait
   un piege. Mettre AUSSI main en colonne casse 1 275 reperes et produit jusqu'a
   506 px de debordement horizontal : les sections du site se centrent par
   marges automatiques, et une marge automatique dans une colonne RETRECIT
   l'element au lieu de l'etirer. Le width:100% ci-dessous rend a main une
   largeur definie, ce qui ramene ses marges automatiques a zero et lui rend
   exactement le comportement qu'il avait en bloc.

   MESURE : 13 536 reperes compares sur 21 pages a six largeurs. Zero ecart
   hors des trois pages courtes, zero debordement, et trois pages entieres
   capturees dans les deux versions donnent zero pixel de difference. */
html { height: 100%; }
body { min-height: 100%; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }


/* ------------------------------------------------------------------ v129, 08/10/2026
   L'adresse du cabinet s'affiche et se copie. Motif : un lien mailto ne produit rien
   chez qui n'a pas de logiciel de courrier declare, et le visiteur croit alors que le
   bouton est casse. Signale par Jerome Reboul le 08/10. */
.adresse-bloc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; }
.adresse-bloc .adresse { font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.copier { font: inherit; font-size: .92rem; line-height: 1.2; padding: .4rem .85rem;
  border-radius: 999px; border: 1.5px solid var(--trait); background: transparent;
  color: var(--encre-douce); cursor: pointer; transition: border-color .15s, color .15s; }
.copier:hover { border-color: var(--encre); color: var(--encre); }
.copier[data-fait="oui"] { border-color: var(--terre); color: var(--terre); }



/* v129 variante B : le « i » a survoler. */
.ligne-action { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: .5rem; }
/* nowrap : entre 760 et 1 000 px, le « i » passait sous le bouton et la rangee
   montait a 119 px au lieu de 56, ce que la grille creusait en trou dans la carte
   voisine. Mesure du 08/10. */
.info-enveloppe { position: relative; display: inline-flex; }
.info { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--trait);
  background: transparent; color: var(--encre-douce); font: inherit; font-size: .9rem;
  font-style: italic; line-height: 1; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; }
.info:hover, .info:focus-visible { border-color: var(--encre); color: var(--encre); }
.hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.info-panneau { position: absolute; top: calc(100% + .6rem); right: 0; left: auto;
  /* sous le bouton et non au-dessus : au-dessus, le panneau recouvrait l'adresse
     qu'il demande justement de copier. Mesure du 08/10. */
  width: min(22rem, 78vw); background: var(--papier); border: 1px solid var(--trait);
  border-radius: 6px; padding: .8rem .9rem; font-size: .88rem; line-height: 1.5;
  color: var(--encre-douce); text-align: left; box-shadow: 0 6px 18px rgba(47,68,89,.12);
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 5; }
.info-enveloppe:hover .info-panneau, .info:focus-visible + .info-panneau { opacity: 1; visibility: visible; }
/* :focus-visible et non :focus-within : un clic de souris ne doit rien faire, decision
   de Yannick du 08/10, le « i » se survole et ne se clique pas. :focus-within laissait
   le panneau epingle apres un clic. La tabulation, elle, continue de l'ouvrir : sans
   cela la note n'existerait pas pour qui navigue au clavier. */

/* Le defaut ne touche que l'ordinateur : sur telephone un logiciel de courrier est
   toujours declare, donc le « i » expliquerait un probleme qui ne se pose pas.
   Decision de Yannick du 08/10. BORNE EN LARGEUR ET NON EN APPAREIL : une tablette
   en mode ordinateur garde le « i », et c'est voulu, elle est touchee comme un ordinateur. */
@media (max-width: 759px) { .adresse-bloc, .info-enveloppe { display: none; } }

/* v129, 08/10 : le libelle du bouton change avec la largeur, decision de Yannick.
   « Ouvrir mon logiciel de messagerie » nomme le mecanisme qui peut manquer sur
   ordinateur ; sur telephone il sonne mal et il n'apprend rien, puisque le geste
   marche toujours. Les deux libelles sont dans la page, un seul est affiche.
   La borne est la meme largeur que ci-dessus, et pour la meme raison. */
.libelle-tel { display: none; }
@media (max-width: 759px) {
  .libelle-ordi { display: none; }
  .libelle-tel { display: inline; }
}

/* v129, 08/10 : le bouton « Le cabinet sur LinkedIn » reprend la taille commune
   des boutons, decision de Yannick : « cale-le sur la taille (pas la couleur) de
   Choisir un creneau ». Mesure avant retrait : 14,72 px de corps et 44 px de haut
   sur ordinateur, 13,44 px et 40 px sur telephone, contre 17 px et 56 px pour les
   autres. LES DEUX REGLES QUI LE REDUISAIENT SONT SUPPRIMEES ET NON NEUTRALISEES,
   corollaire de la section 7.11 de la charte. Sa couleur ne bouge pas : il reste
   creux, « Choisir un creneau » reste plein. */

/* L'effet de bord du geste ci-dessus a disparu avec le libelle. A la taille
   commune, « Le cabinet sur LinkedIn » passait sur deux lignes sous 360 px, et
   une marge laterale reduite avait ete posee ici pour le ramener sur une ligne.
   « Sur LinkedIn » fait 170 px de large et tient partout : LA REGLE N'AVAIT PLUS
   RIEN A FAIRE, elle est donc supprimee et non laissee en place. Section 7.6. */


/* ------------------------------------------------------------------ v132, 08/10/2026
   LES LIGNES D'UN LIBELLE DE BOUTON S'EQUILIBRENT.
   Releve par Yannick sur son telephone : « sur ordi le bouton est parfait, mais sur
   mobile il n'est pas equilibre entre la 1ere et la 2e ligne ». SON APPAREIL FAIT
   448 px, et mon balayage par pas de 20 etait passe de 440 a 460 sans le toucher,
   alors que la charte ecrit noir sur blanc que son telephone fait 448 px.
   MESURE, DE 448 A 540 px : le libelle d'action passait de 346 et 105 px a 204 et
   247. Ecart de 241 px ramene a 43. Au-dela de 560 px, la ligne unique est intacte.
   LA REGLE PORTE SUR TOUS LES BOUTONS, et le controle dit ce qu'elle y fait :
   65 boutons mesures sur 24 pages et sept largeurs, TROIS redistributions, toutes
   favorables. Les onze boutons d'action entre 448 et 540 px ; « Programmer un
   rendez-vous » sur la carte de visite a 360 px, ou « vous » restait seul sur sa
   ligne ; « Ouvrir mon logiciel de messagerie » a 760 px. Aucune regression.
   Un navigateur qui ignore text-wrap rend la coupe d'avant : l'echec se fait du
   bon cote. */
.bouton { text-wrap: balance; }

/* ================================================================== v136, 09/10/2026
   QUATRE DECISIONS DE YANNICK, prises apres lecture du paquet v135.

   1. LE CHAPEAU DE L'ACCUEIL porte le resume en QUATRE paragraphes. Les regles
   existantes posent margin-top sur « .tete-accueil .chapeau », donc sur chacun
   des quatre : l'ecart d'apres le titre serait repete trois fois a l'interieur
   du resume. La regle ci-dessous ne vise que les paragraphes SUIVANTS, et sa
   specificite de trois classes passe devant les margin-top des requetes de
   media, quelle que soit la largeur.

   2. L'ORDRE SUR TELEPHONE REVIENT A CELUI DE L'ORDINATEUR, et cela REVIENT SUR
   la decision du 06/10 qui placait le chapeau avant les deux portes. Le motif
   est mesure : le chapeau passe de 300 a 774 signes, et la premiere porte
   tombait de 336 a 670 px sur un telephone de 448 px. Les deux portes d'abord,
   le resume ensuite.

   3. LA GRILLE DES HONORAIRES DEVIENT UN FLUX EN COLONNES. En grille, la hauteur
   d'une rangee est celle de sa carte la plus haute : « Reconstitution de
   carriere » se trouvait rejetee 290 px sous « Entretien ponctuel », et alignee
   sur « Accompagnement a la liquidation ». Yannick a demande qu'elle remonte.
   Un flux en colonnes supprime la notion de rangee : chaque carte se pose sous
   la precedente de sa colonne. break-inside evite qu'une carte se coupe en deux.

   4. DEUX CHAPITRES, la seconde partie de carriere d'abord, puis la retraite.
   Les intitules de prestation descendent de h3 a h4 pour laisser h3 aux
   chapitres ; la regle de typographie les suit. */
.tete-accueil .chapeau + .chapeau { margin-top: .7rem; }

@media (max-width: 639px) {
  .tete-accueil .duo   { order: 3; }
  .tete-accueil .chapeau { order: 4; }
}

.honoraires { display: block; column-gap: 2.5rem; }
.honoraires > div { break-inside: avoid; margin-bottom: 1.6rem; }
/* DEUX colonnes partout au-dela de 760 px, et pas trois : le premier chapitre n'a
   que deux prestations, et il laissait une colonne vide sous le second a 1248 px. */
@media (min-width: 760px) { .honoraires { column-count: 2; } }

.honoraires h4 { font-family: var(--serif); font-weight: 600; color: var(--encre); font-size: 1.05rem; margin: 0 0 .5rem; }
.titre-groupe { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--encre);
  text-align: left; max-width: 66rem; margin: 2.4rem auto 1rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--trait); }
h3.titre-groupe:first-of-type { margin-top: 1.6rem; }

/* ---- v140, 11/10/2026. Les situations : quatre sur ordinateur, trois sur mobile ----
   Cette version remplace la v139, qui repliait la liste dans un <details>.
   Demande de Yannick du 11/10 au soir, et elle a imposé de changer de mécanisme.

   1. LE FILET DES SITUATIONS COMPACTES GARDE L'ACCENT, inchangé depuis la v139.
      La règle générale de .exemples article porte un liseré terre cuite de 2 px
      depuis l'origine ; la variante compacte du 22/09 l'avait remplacé par un
      filet gris de 1 px pour gagner de la hauteur, gain devenu inutile depuis
      que chaque situation porte sa ligne d'explication.

   2. POURQUOI LE <details> A ÉTÉ ABANDONNÉ, ET C'EST UNE CONTRAINTE DU LANGAGE
      ET NON UN CHOIX. Yannick demande quatre cartes visibles sur ordinateur et
      trois sur mobile : la grille compte deux colonnes au-delà de 760 px, donc
      trois cartes laissent un trou en seconde ligne. Un <details> fermé masque
      TOUT son contenu : la quatrième carte aurait dû être écrite deux fois, une
      fois dehors pour l'ordinateur et une fois dedans pour le mobile, et une
      phrase écrite deux fois sur une page est précisément le défaut relevé le
      même soir sur la première situation.

      Les dix cartes vivent donc dans UNE SEULE grille, et une case à cocher
      masquée décide du nombre de visibles. Toujours aucun script : la case se
      coche au clavier comme à la souris, et son étiquette porte le libellé.

   3. LE LIBELLÉ NE DIT PLUS COMBIEN IL EN RESTE. « Les sept autres situations »
      donnait à la liste un air de catalogue complet, alors que ce sont des
      exemples ; le chapô de la section le dit déjà, « quelques exemples, parmi
      bien d'autres ». Demande de Yannick du 11/10 au soir.

   EXCEPTION ASSUMÉE À LA RÈGLE DU 06/10, qui veut que le titre d'un volet ne
   change pas selon l'état et que le chevron soit le seul indicateur. Ici le
   libellé change, « Voir d'autres exemples » puis « Masquer ces exemples ».
   Motif : la règle du 06/10 vise un volet dont le titre NOMME son contenu, et
   qui reste lisible ouvert ; celui-ci porte une action, et « voir » resterait
   faux une fois la liste ouverte. Le chevron reste et tourne. */
.exemples.compacte article { border-top: 2px solid var(--terre); }

/* La case à cocher reste dans le flux et focalisable, mais invisible. */
.bascule-situations {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* LA GRILLE DES SITUATIONS EST FIXÉE À DEUX COLONNES, ET CETTE LIGNE EST LA PLUS
   IMPORTANTE DU BLOC. Mesure du 11/10 au soir, aux dix largeurs de la charte :
   la variante compacte est en auto-fit, donc elle passe à TROIS colonnes au-delà
   de 900 px. Quatre cartes sur trois colonnes laissent un trou de deux, c'est-à-
   dire exactement le vide que la demande de Yannick voulait supprimer, déplacé
   d'une largeur. Un nombre de visibles fixe ne peut remplir des rangées dont le
   nombre de colonnes varie : ou le nombre suit les colonnes, ou les colonnes
   sont fixées. Fixer les colonnes est le seul des deux qui tienne la demande au
   mot, quatre sur ordinateur et trois sur mobile. */
.exemples.compacte.liste-situations,
.situations.liste-situations { grid-template-columns: 1fr; }
@media (min-width: 641px) {
  .exemples.compacte.liste-situations,
  .situations.liste-situations { grid-template-columns: 1fr 1fr; }
}

/* Trois visibles en une colonne, donc sur mobile : la rangée est pleine. */
.liste-situations > article:nth-child(n+4),
.liste-situations > li:nth-child(n+4) { display: none; }

/* Quatre dès que la grille a deux colonnes, soit deux rangées pleines. */
@media (min-width: 641px) {
  .liste-situations > article:nth-child(4),
  .liste-situations > li:nth-child(4) { display: block; }
}

/* Cochée, la liste se montre en entier, à toutes les largeurs. */
.bascule-situations:checked ~ .liste-situations > article,
.bascule-situations:checked ~ .liste-situations > li { display: block; }

label.plus-situations {
  margin-top: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--encre);
  padding: .9rem 0 .2rem;
}
label.plus-situations::after {
  content: "";
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--terre);
  border-bottom: 2px solid var(--terre);
  transform: rotate(45deg) translate(-.12rem, -.12rem);
  transition: transform .18s ease;
}
.bascule-situations:checked ~ label.plus-situations::after {
  transform: rotate(-135deg) translate(-.18rem, -.18rem);
}
label.plus-situations .voir-moins { display: none; }
.bascule-situations:checked ~ label.plus-situations .voir-plus { display: none; }
.bascule-situations:checked ~ label.plus-situations .voir-moins { display: inline; }
.bascule-situations:focus-visible ~ label.plus-situations {
  outline: 3px solid var(--terre);
  outline-offset: 3px;
}
.liste-situations { margin-top: .6rem; }
@media (prefers-reduced-motion: reduce) {
  label.plus-situations::after { transition: none; }
}

/* ---- v141, le renvoi des honoraires ----
   Les prix quittent la page retraite pour honoraires.html, demande de Yannick
   du 11/10 au soir. Ce qui reste en bas de page est un renvoi, et il porte au
   mot près la mention de déductibilité, qu'il ne faut pas perdre.

   PAS DE LISERÉ TERRE CUITE SUR CE BLOC, et la v140 en portait un à tort.
   Relevé par Yannick le 11/10 au soir, vérifié dans la feuille : le liseré de
   2 px appartient aux CARTES, .exemples article depuis l'origine, et un filet
   de 1 px appartient au .volet, qui est un repli. AUCUNE SECTION ENTIÈRE n'en
   porte sur ce site. La v140 l'avait posé par analogie avec la bascule des
   situations, qui est un volet et non une section. Les sections se séparent
   par l'alternance des fonds, pas par un filet. */
/* v143, 11/10/2026 : LE LISERÉ PLEINE LARGEUR AU-DESSUS DE LA BASCULE EST
   RETIRÉ, relevé de Yannick. C'est le dernier des trois liserés que la v140
   avait posés, et il tombe pour la même raison que les deux autres : un filet
   qui traverse la colonne entière n'appartient pas à la charte de ce site, où
   le liseré est une marque de CARTE. Les cartes au-dessus portent déjà le leur,
   donc la bascule se détache sans aide.

   ET LE SURTITRE D'UN BLOC DE RENVOI REDEVIENT CENTRÉ. La règle de
   justification de la v142 visait les paragraphes de texte et attrapait aussi
   le `p.titre-section`, qui est un surtitre et non un paragraphe : il sortait
   aligné à gauche là où tous les autres surtitres du site sont centrés.
   Relevé par Yannick sur la page honoraires. La règle est bornée aux
   paragraphes de texte. */

/* v142, 11/10/2026, trois relevés de Yannick sur ce bloc.

   1. UNE SEULE TAILLE DE TEXTE DANS LE BLOC. La mention de déductibilité
      était en .9 rem et gris doux, le reste en 1.0625 rem : deux tailles pour
      un bloc de quatre lignes. Elles sont ramenées à une.

   2. LE LIEN PREND LA TAILLE DU LIEN « Tous les chiffres », mesurée à
      .94 rem et gris doux. C'est la taille que `.etroit > p.aller-plus-loin`
      donne depuis l'origine, et ce bloc n'est pas dans un `.etroit`, donc il
      ne l'héritait pas. La valeur est reprise d'elle, pas réinventée.

   3. TEXTE JUSTIFIÉ, DERNIÈRE LIGNE À GAUCHE. C'est le réglage du chapô des
      pages intérieures depuis l'origine, `text-align-last: left`, et ce bloc
      ne l'avait pas. Il vaut aussi pour la ligne qui précède un retour forcé,
      ce que la règle CSS prévoit. */
/* v145, 11/10/2026. LE PARAGRAPHE DU RENVOI PREND TOUTE LA LARGEUR DU BLOC.
   Relevé par Yannick sur le site en ligne. La v142 lui avait posé un
   « max-width: 44rem » hérité de l'habitude typographique des colonnes de
   lecture : le bloc fait 1040 px et le texte s'arrêtait à 704, ce qui le
   faisait revenir à la ligne bien avant le bord et désalignait tout le bloc,
   dont le titre centré sur la largeur entière. Le retour forcé n'y était pour
   rien, et c'est ce que la mesure a montré : les quatre premières lignes
   faisaient déjà 704 px, soit la largeur plafonnée et non celle du bloc.
   LE PLAFOND PART. Un bloc dont le titre est centré sur toute la largeur a un
   texte qui court sur toute la largeur. */
.renvoi-honoraires p:not(.titre-section):not(.aller-plus-loin) {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.renvoi-honoraires p.aller-plus-loin {
  font-size: .94rem;
  color: var(--encre-douce);
  text-align: left;
  text-align-last: auto;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ======================================================================
   v146, 11/10/2026. OÙ UN LIEN D'ANCRE FAIT ATTERRIR LE LECTEUR.
   Relevé par Yannick depuis l'accueil : « l'endroit où on arrive est tronqué
   dans le sens où le titre de la section ne s'affiche pas ».

   LA CAUSE EST LE BANDEAU COLLANT. Il mesure 66 px, mesuré aux largeurs de la
   charte, de 448 à 1600 px, et il recouvre le haut de la page. Une ancre pose
   sa cible au bord haut de la fenêtre, donc DERRIÈRE le bandeau.

   ET UN SECOND FACTEUR, QUE LE PREMIER CACHE : les ancres de section visent le
   `h2`, pas la section. Même dégagée du bandeau, la cible laisse le surtitre
   au-dessus d'elle hors de l'écran, alors que c'est lui qui nomme la rubrique.
   Mesure : 31 px entre le surtitre et son `h2`, aux mêmes largeurs.

   DEUX VALEURS DONC, ET ELLES SE CALCULENT AU LIEU DE S'ESTIMER :
     5,5 rem, soit 88 px, pour une cible ordinaire : 66 de bandeau et 22 d'air.
       C'est la valeur que portait déjà `.cartes-d > article[id]` depuis son
       introduction ; elle devient la règle générale et cette règle-là est
       retirée plutôt que laissée en double.
     7,5 rem, soit 120 px, pour un `h2` précédé de son surtitre : les 88
       précédents plus les 31 du surtitre, arrondis. Le surtitre atterrit alors
       23 px sous le bandeau.
   ====================================================================== */
[id] { scroll-margin-top: 5.5rem; }
.titre-section + h2[id] { scroll-margin-top: 7.5rem; }


/* ======================================================================
   v147, 12/10/2026. LA TÊTE D'ACCUEIL REÇOIT « NOTRE RAISON D'ÊTRE »,
   ET SES DEUX PARAGRAPHES REÇOIVENT UNE AMORCE AU CORPS DES TITRES.
   Demande de Yannick du 12/10. Trois choses changent, et une quatrième
   en découle, qu'il faut écrire ici parce qu'elle ne se voit pas.

   1. LE TITRE DE LA PAGE PASSE À LA DEVISE. Les deux paragraphes
      illustrés formaient le h1 de l'accueil. Leurs amorces passant au
      corps des titres de section, les garder dans un h1 aurait donné un
      h1 qui contient deux titres apparents, et la page aurait perdu son
      seul titre de premier niveau si on avait simplement retiré la
      balise. « Renouer le fil entre la carrière et la retraite » devient
      donc le h1 : c'est la phrase qui dit le sujet de la page, elle est
      déjà en tête, et SON APPARENCE NE CHANGE PAS D'UN PIXEL.
      C'est un choix de LFDC 2, à confirmer ou à défaire par Yannick.

   2. LES SÉLECTEURS « .tete-accueil h1.duo » DEVIENNENT
      « .tete-accueil .duo », neuf fois dans cette feuille. Leur poids
      passe de (0,2,1) à (0,2,0), ce qui reste au-dessus de
      « .duo-bloc ... » (0,2,0) par le rang, et au-dessus de rien
      d'autre : aucune autre règle ne vise ce bloc.
      Les règles « .tete-accueil h1 » des lignes 822, 857, 1297, 1309 à
      1313 ne s'appliquent plus au bloc des deux paragraphes. Mesure
      faite avant de les laisser en place : elles y étaient DÉJÀ sans
      effet, « .tete-accueil .duo » déclarant « font-size: inherit » et
      « line-height: inherit », et « .duo-bloc .bloc-titre » portant la
      famille, le corps, la couleur et la justification.

   3. ET C'EST LA CONSÉQUENCE QU'IL FAUT DIRE : CES MÊMES RÈGLES
      S'APPLIQUENT MAINTENANT À LA DEVISE, qui est devenue le h1. Deux
      d'entre elles se voient : « text-align: justify » et
      « hyphens: auto ». Elles sont neutralisées ci-dessous, et non
      supprimées : elles servent peut-être encore un h1 ailleurs.
   ====================================================================== */

/* La devise garde EXACTEMENT l'apparence qu'elle avait en tant que
   paragraphe. Quatre déclarations à reprendre, et quatre seulement : les
   autres propriétés de « .tete-accueil h1 » sont déjà battues par
   « .tete-accueil .devise », qui pèse (0,2,0) contre (0,1,1). */
.tete-accueil h1.devise {
  font-weight: 400;
  text-align: center;
  hyphens: manual;
  -webkit-hyphens: manual;
  max-width: none;
}

/* « Notre raison d'être » : même police, même placement et même corps que
   « Vous êtes », donc un h2 qui ne redéclare QUE sa couleur. Si le corps
   des titres change un jour, celui-ci suivra sans qu'on y revienne. */
.raison-detre { color: var(--terre); }

/* L'AMORCE DE CHAQUE PARAGRAPHE, au corps et à la couleur de « Vous êtes ».
   Elle reste DANS la phrase : Yannick a nommé la police, la couleur et la
   taille, et pour « Notre raison d'être » il a nommé aussi le placement.
   L'amorce n'est donc pas un titre posé sur sa ligne, c'est le début de la
   phrase écrit au corps des titres. */
.amorce {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--encre);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
}

@media (max-width: 639px) {
  /* Sous 640 px, l'ordre d'affichage de la tête est explicite, et un frère
     sans « order » se placerait AVANT le logotype. « Notre raison d'être »
     prend donc le rang de la devise : à rang égal, l'ordre du document
     décide, et la devise le précède. Le titre reste ainsi collé au bloc
     qu'il annonce, lequel porte le rang 3 depuis la v138. */
  .tete-accueil .raison-detre { order: 2; }
}

/* LA MÉCANIQUE DE L'AIR DU TÉLÉPHONE EST MISE AU REPOS, ET C'EST UNE
   CONSÉQUENCE MESURÉE, NON UN CHOIX DE FORME. 12/10/2026.
   Cette mécanique, posée le 06/10, répartit l'air que l'écran peut absorber
   SANS QUE LE BOUTON SOIT COUPÉ AU CHARGEMENT. Elle suppose donc une tête
   plus courte que l'écran : « --tete » porte sa hauteur, de 684 à 840 px
   selon la largeur, et « --air » vaut ce que l'écran a de plus.
   LA NOUVELLE TÊTE MESURE DE 1 240 À 1 691 px SELON LA LARGEUR, mesuré le
   12/10 sur huit largeurs de 360 à 639 px. Elle fait donc deux écrans, et la
   question du bouton coupé au chargement ne se pose plus : il est sous le
   pli à toutes les largeurs, quoi qu'on fasse. Mais « --air » valait encore
   jusqu'à 120 px, QUI S'AJOUTAIENT à une tête déjà deux fois trop longue.
   1 700 px dépasse la plus haute tête mesurée, donc « --air » tombe à zéro
   partout, et les écarts du téléphone reprennent leurs valeurs de base.
   LA MÉCANIQUE N'EST PAS SUPPRIMÉE : si le texte de la tête raccourcit un
   jour, il suffira de remesurer les six valeurs de « --tete » pour qu'elle
   reprenne son office. */
@media (max-width: 639px) {
  .tete-accueil { --tete: 1700px; }
}

/* ======================================================================
   v148, 12/10/2026. LE TEXTE DE LA TÊTE S'AÈRE : UN SUJET PAR LIGNE.
   Demande de Yannick du 12/10, qui a nommé les six endroits où le texte
   va à la ligne. Les deux amorces passent donc sur leur propre ligne, et
   chaque bloc devient quatre segments au lieu d'un pavé.
   CHAQUE SEGMENT GARDE LA JUSTIFICATION DU BLOC et son fer à gauche de
   dernière ligne : un segment est un paragraphe à part entière, sa
   dernière ligne est donc la dernière d'un paragraphe.
   L'ÉCART ENTRE SEGMENTS VAUT .55 rem, et non une ligne entière : les
   quatre segments d'un bloc forment un seul propos, et un écart de ligne
   pleine les aurait détachés les uns des autres autant que les deux blocs
   le sont entre eux. Sous l'amorce l'écart tombe à .15 rem, l'amorce et le
   segment qui la suit formant une seule phrase. */
.duo-bloc .amorce { display: block; margin-bottom: .15rem; text-align: left; }
.duo-bloc .bloc-titre .par {
  display: block;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.duo-bloc .bloc-titre .par + .par { margin-top: .55rem; }

/* SUR TÉLÉPHONE, LA VIGNETTE N'HABILLE PLUS QUE L'AMORCE. 12/10/2026.
   L'habillage de trois lignes, réglé le 06/10, visait UN paragraphe
   continu. Le texte étant maintenant coupé en quatre segments, l'amorce
   occupait deux des trois lignes habillées et le segment suivant
   démarrait en retrait sous l'image, à mi-phrase. Mesuré à 360 et 390 px.
   Les segments dégagent donc le flottant : l'image reste à côté de
   l'amorce, et le texte reprend dessous, au fer de la colonne.
   CE QUE CELA COÛTE, ET IL FAUT LE DIRE : dans le second bloc l'amorce
   tient sur une seule ligne, donc une bande d'environ 45 px reste vide à
   côté de la vignette. Réduire l'amorce à 1,25 rem sur téléphone
   supprimerait le dégagement, mais elle ne se distinguerait plus guère
   du texte, qui mesure 1,125 rem, et elle tiendrait encore sur deux
   lignes à 360 px. */
@media (max-width: 639px) {
  .duo-bloc .bloc-titre .par { clear: both; }
}

/* ======================================================================
   v149, 12/10/2026. L'AMORCE REVIENT DANS LA PHRASE, ET ELLE PASSE EN GRAS.
   Deux corrections de Yannick du 12/10 : « Pour chacun d'entre nous, » et
   « Pour une entreprise, » prennent le gras, et « inutile d'aller à la ligne
   après ». L'amorce redevient donc le début de sa phrase, au corps et à la
   couleur des titres, en graisse 700 au lieu de 500.
   ET LES DEUX RÈGLES POSÉES POUR LA LIGNE SÉPARÉE SONT RETIRÉES, NON
   DÉSACTIVÉES : l'amorce n'est plus un bloc, donc le dégagement du flottant
   posé pour le téléphone n'a plus d'objet. Le laisser aurait rejeté le
   premier segment sous la vignette et laissé l'image seule sur sa ligne.
   UN RÉGLAGE POSÉ POUR UNE CONTRAINTE SE RETIRE QUAND LA CONTRAINTE
   DISPARAÎT, règle écrite dans cette feuille le 06/10. */
.duo-bloc .amorce { display: inline; margin-bottom: 0; font-weight: 700; }
@media (max-width: 639px) {
  .duo-bloc .bloc-titre .par { clear: none; }
}

/* ======================================================================
   v150, 12/10/2026. LA HIÉRARCHIE DES ÉCARTS DE LA TÊTE.
   Yannick, le 12/10 : « au sein d'une même section, je ne suis pas certain
   qu'il faille des espacements entre les lignes », et « il faut augmenter
   l'écart entre les sections 1 et 2 ».

   LA MESURE DONNE RAISON À SON DOUTE, ET ELLE DIT POURQUOI IL EST FONDÉ :
   L'ÉCART ENTRE SEGMENTS ÉTAIT AUSSI GRAND QUE CELUI ENTRE LES DEUX BLOCS,
   ET PLUS GRAND SUR TÉLÉPHONE. Relevé avant correction : 8,8 px entre deux
   segments d'un même bloc, contre 11,2 px entre les deux blocs sur
   ordinateur et 7,2 px sur téléphone. Deux niveaux de découpage portaient
   donc le même écart, et l'oeil ne pouvait plus les distinguer : les six
   segments se lisaient comme six paragraphes de même rang.
   LE DÉFAUT N'ÉTAIT PAS L'ESPACEMENT INTÉRIEUR, C'ÉTAIT SON RAPPORT À
   L'AUTRE. Il est gardé, parce qu'il aère comme Yannick l'a demandé, mais
   il descend à .45 rem et l'écart entre les deux blocs monte à 2.4 rem,
   soit plus de cinq fois. La hiérarchie se voit sans se mesurer.
   ====================================================================== */
.duo-bloc .bloc-titre .par + .par { margin-top: .45rem; }
.tete-accueil .duo { gap: 2.4rem; }
@media (max-width: 639px) {
  .tete-accueil .duo { gap: 1.8rem; }
}

/* « NOTRE RAISON D'ÊTRE » SE REMET AU CENTRE DE SES DEUX VOISINS.
   Demande de Yannick du 12/10. Le titre héritait de la marge basse des h2,
   2 rem, et recevait au-dessus la seule marge basse de la devise : il
   était donc nettement plus près de la devise que du texte. Les deux
   écarts sont désormais déclarés ensemble, pour qu'une correction de l'un
   n'aille pas sans l'autre. */
.tete-accueil .raison-detre { margin-top: 1.6rem; margin-bottom: 1.6rem; }
/* SUR TÉLÉPHONE LES DEUX ÉCARTS NE SONT PAS SYMÉTRIQUES DANS LA FEUILLE,
   ET LA RAISON TIENT À UNE PROPRIÉTÉ DE LA BOÎTE FLEXIBLE : sous 640 px la
   tête est un conteneur flex, où les marges voisines NE FUSIONNENT PAS.
   L'écart au-dessus vaut donc la marge basse de la devise plus la marge
   haute du titre, 5,6 + X ; l'écart au-dessous vaut la marge basse du titre
   plus la marge haute du bloc, Y + 14,4. Les deux valeurs ci-dessous sont
   calculées pour donner 28 px de chaque côté, et non estimées. */
@media (max-width: 639px) {
  .tete-accueil .raison-detre { margin-top: 1.4rem; margin-bottom: .85rem; }
}

/* LE PREMIER SEGMENT DE CHAQUE BLOC PASSE AU FER À GAUCHE SUR TÉLÉPHONE.
   12/10/2026, relevé à l'écran après l'allongement de la seconde amorce.
   LA JUSTIFICATION ET UN FLOTTANT NE S'ACCORDENT PAS DANS UNE COLONNE
   ÉTROITE : les trois premières lignes passent à côté de la vignette, donc
   elles mesurent 265 px au lieu de 400, et une ligne justifiée de deux ou
   trois mots au corps des titres s'étire en trous. « représentants
   du » laissait un blanc de la largeur d'un mot.
   Seul le PREMIER segment est touché, parce que c'est le seul que la
   vignette habille. Les deux suivants gardent la justification du bloc. */
@media (max-width: 639px) {
  .duo-bloc .bloc-titre .par:first-child { text-align: left; }
}

/* ======================================================================
   v151, 12/10/2026. LES MOTS DE LA TÊTE DEVIENNENT DES CHEMINS.
   Demande de Yannick du 12/10 : rendre cliquables les deux amorces, le nom
   des deux publics professionnels, et les deux périodes nommées.

   LA FORME DU LIEN EST CELLE QUE LE SITE EMPLOIE DÉJÀ POUR UN LIEN PORTÉ
   PAR UN TITRE, et non celle d'un lien au fil du texte. Relevé dans cette
   feuille : « .portes-trois .porte h3 a » et « .nav-publics a » gardent la
   couleur de leur titre et ne prennent le soulignement qu'au survol.
   LA RAISON EST MESURABLE PLUTÔT QUE DE GOÛT : un lien au fil du texte est
   en terre cuite, et cette tête en compterait cinq. La terre cuite vaut un
   à deux pour cent de la surface d'une page sur ce site, et cinq mots au
   corps des titres la feraient bondir dans le premier écran, juste sous un
   titre qui est lui-même en terre cuite.
   LE SOULIGNEMENT EST DONC PERMANENT MAIS DISCRET, un filet de 1 px dans la
   couleur du trait, qui passe à la terre cuite au survol : le lecteur voit
   qu'il y a un chemin sans que la page devienne bariolée. */
.tete-accueil .duo a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
}
.tete-accueil .duo a:hover,
.tete-accueil .duo a:focus-visible {
  color: var(--terre);
  border-bottom-color: var(--terre);
}

/* SUR TÉLÉPHONE, L'AMORCE REPREND SA PROPRE LIGNE, ET SUR TÉLÉPHONE SEULEMENT.
   Demande de Yannick du 12/10, dessinée sur le bloc entreprise : « Pour une
   entreprise ou / des représentants du / personnel, » puis, à la ligne,
   « ces deux étapes ».
   CE N'EST PAS UN RETOUR À L'ÉTAT DU 12/10 AU MATIN : là, l'amorce était un
   bloc à TOUTES les largeurs, et sur ordinateur Yannick a demandé l'inverse,
   « inutile d'aller à la ligne après ». La règle est donc bornée au
   téléphone, où l'amorce prend deux ou trois lignes et où la suite de la
   phrase, au corps du texte, se mêlait à la dernière d'entre elles.
   ET ELLE PORTE SUR LES DEUX AMORCES, NON SUR LA SEULE QUI A ÉTÉ DESSINÉE :
   à 448 px la première passe déjà seule sur sa ligne, donc la règle n'y
   change rien ; à 390 px elle en occupe deux, et le même mélange s'y
   produirait. Une règle qui ne vaudrait que pour un bloc donnerait deux
   mises en page différentes à deux blocs jumeaux. */
@media (max-width: 639px) {
  .duo-bloc .amorce { display: block; }
}

/* ======================================================================
   v152, 12/10/2026. L'AMORCE ENTREPRISE S'ÉQUILIBRE, ET SON « OU » SORT DU GRAS.
   Yannick, le 12/10 : « il faudrait équilibrer l'apparence », et « retire le
   gras de "ou", pour bien marquer la séparation ».

   1. LE « OU » PERD LE GRAS ET GARDE LE CORPS. Il n'est pas un des deux
      publics, il les sépare : la graisse ordinaire le fait lire comme une
      charnière et non comme un troisième nom. Le corps ne change pas, sans
      quoi la ligne porterait deux tailles et le mot ferait un creux.

   2. LES LIGNES SE RÉPARTISSENT AU LIEU DE SE REMPLIR. « text-wrap: balance »
      demande au navigateur d'égaliser la longueur des lignes au lieu de
      remplir la première jusqu'au bord. Sans lui, la première ligne prenait
      « Pour une entreprise ou des » et coupait le second nom en plein milieu.
      LE PROCÉDÉ EXISTE DÉJÀ DANS CETTE FEUILLE, sur « .groupe-note » : ce
      n'est pas un mécanisme introduit pour l'occasion.
      SA LIMITE EST À CONNAÎTRE : un navigateur qui ne le gère pas ignore la
      déclaration et remplit les lignes comme avant. L'échec se fait donc du
      bon côté, et le texte reste lisible.
   ====================================================================== */
.duo-bloc .amorce .liaison { font-weight: 400; }
.duo-bloc .amorce { text-wrap: balance; }

/* ======================================================================
   v153, 12/10/2026. LES LIENS DE LA TÊTE PASSENT EN TERRE CUITE, SANS FILET.
   Décision de Yannick du 12/10, après avoir vu les deux états : « on utilise
   le terre cuite pour tous les liens cliquables, mais pas de soulignement ».
   La règle A de la v151, encre plus filet discret, est RETIRÉE et non
   commentée : deux formes de lien dans la même tête se contrediraient.
   C'est la forme du lien au fil du texte, déjà déclarée pour tout le site
   sur « a », à ceci près que le soulignement par défaut est retiré ici.

   CE QUE LA COULEUR SEULE NE DIT PAS, ET IL FAUT L'ÉCRIRE : dans cette tête,
   « La seconde partie de carrière » est en gras SANS être un lien, et « à
   l'approche de la retraite » est en gras ET lien. La couleur est donc le
   seul signe qui les distingue. Un lecteur qui distingue mal le rouge du
   bleu sombre ne verra pas la différence AU REPOS.
   DEUX SIGNES NON COLORÉS SONT DONC GARDÉS, et ils ne coûtent rien à
   l'apparence au repos : le soulignement revient au survol, et le cadre de
   mise au point du clavier reste celui du site, déclaré sur « a:focus-visible ».
   ====================================================================== */
.tete-accueil .duo a {
  color: var(--terre);
  text-decoration: none;
  border-bottom: 0;
}
.tete-accueil .duo a:hover,
.tete-accueil .duo a:focus-visible {
  color: var(--encre);
  border-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* v154, 12/10/2026. « NOTRE RAISON D'ÊTRE » REVIENT AU BLEU D'ENCRE.
   Décision de Yannick du 12/10 : « remets-le dans le bleu habituel ».
   La déclaration de couleur de la v147 est donc RETIRÉE et non surchargée :
   le titre reprend exactement la règle générale des h2, sans rien de propre.
   Conséquence à connaître : il est désormais identique à « Vous êtes », ce
   qui est bien ce que « le bleu habituel » demande. */
.raison-detre { color: var(--encre); }

/* ======================================================================
   v155, 12/10/2026. LE HAUT DES BLOCS : L'AMORCE DEVIENT UN SURTITRE,
   ET LA VIGNETTE DEVIENT UN BANDEAU SUR TÉLÉPHONE.
   Choix de Yannick du 12/10, parmi les quatre traitements proposés : T2 et M3.

   POURQUOI LE HAUT NE TENAIT PAS, MESURÉ PLUTÔT QUE SUPPOSÉ : trois choses s'y
   disputaient la place, une vignette de 77 px, une amorce au corps des titres
   montée jusqu'à trois lignes depuis qu'elle nomme les représentants du
   personnel, et « Notre raison d'être » au MÊME corps, vingt-huit pixels plus
   haut. Deux titres de même taille à vingt-huit pixels l'un de l'autre, dont
   l'un est un vrai titre de section et l'autre le début d'une phrase.

   T2 : l'amorce reprend le rang qu'elle a réellement, celui d'un surtitre, et
   c'est « .titre-section », le procédé que portent déjà toutes les pages
   intérieures. Elle est au fer à gauche ici, comme sur « .porte .titre-section ».

   ET UNE CONSÉQUENCE DE GRAMMAIRE QU'IL FAUT ÉCRIRE : l'amorce était le début
   de sa phrase. Détachée en surtitre, elle ne peut plus l'être. La virgule
   finale tombe donc du surtitre, et la phrase qui suit reprend sa majuscule.
   Ce n'est pas un détail de forme : un surtitre qui finit par une virgule
   annonce une suite grammaticale qui n'existe plus.

   M3 : la vignette passe en bandeau pleine largeur sous 640 px, au format
   3 pour 1. Elle cesse d'être une miniature coincée à côté d'un titre.
   SON PRIX EST MESURÉ : la tête de 448 px passe de 1 390 à 1 679 px.
   ====================================================================== */
.duo-bloc .amorce {
  display: block;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: .5rem;
  text-wrap: wrap;
}
.duo-bloc .amorce .liaison { font-weight: 400; }
.duo-bloc .bloc-titre .par:first-child { text-align: justify; }

@media (max-width: 639px) {
  .duo-bloc .bloc-titre .par:first-child { text-align: justify; }
  .duo-bloc img {
    float: none;
    width: 100%;
    max-width: none;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    object-position: center 40%;
    margin: 0 0 .7rem;
    border-radius: 6px;
  }
}

/* v156, 12/10/2026. LE COUPLE SURTITRE / TEXTE DU BLOC, RÉGLÉ ENSEMBLE.
   Yannick, le 12/10 : « le titre de section a l'air trop petit pour ressortir
   vraiment et semble même plus petit que le texte en lui-même ».

   IL A RAISON, ET LA MESURE DIT QUE LE DÉFAUT N'EST PAS DANS LE SURTITRE :
   le texte du bloc mesurait 25,6 px sur ordinateur, contre 17 px pour le reste
   du site. Il était à cette taille PARCE QU'IL ÉTAIT LE TITRE DE PREMIER
   NIVEAU DE LA PAGE. Il ne l'est plus depuis la v147 : la devise l'est, et
   « Notre raison d'être » est le titre de section. UN TEXTE QUI A CESSÉ D'ÊTRE
   UN TITRE DOIT CESSER D'EN AVOIR LA TAILLE, sinon aucun surtitre ne peut
   passer au-dessus de lui sans devenir énorme.
   AGRANDIR LE SEUL SURTITRE NE RÉSOUT RIEN : pour dépasser 25,6 px en
   capitales espacées il aurait fallu 1,7 rem, et le surtitre entreprise fait
   52 signes. Le couple se règle donc ensemble.

   CE QUE CELA REND EN PLUS, ET C'EST MESURÉ : la tête passe de 1 789 à
   1 412 px sur ordinateur, et le chapeau remonte de 1 382 à 1 005 px, donc
   285 px sous le pli au lieu de 662. La demande du 12/10, « c'est en scrollant
   qu'il doit immédiatement apparaître », est tenue par la même correction. */
.duo-bloc .amorce { font-size: 1.25rem; }
.duo-bloc .bloc-titre { font-size: 1.15rem; line-height: 1.6; }
@media (max-width: 639px) {
  .duo-bloc .amorce { font-size: 1.1rem; }
  .duo-bloc .bloc-titre { font-size: 1.05rem; line-height: 1.6; }
}

/* ======================================================================
   v157, 12/10/2026. LA TÊTE SE TERMINE AUX DEUX BLOCS, ET « LE CABINET »
   DEVIENT UNE SECTION.
   Deux demandes de Yannick du 12/10 au soir.

   1. « Notre raison d'être » est retiré. Il tenait 69 px, marges comprises.

   2. LES QUATRE PARAGRAPHES ET LES DEUX BOUTONS SORTENT DE LA TÊTE et
      forment une section à part entière, surtitre « Le cabinet » et titre
      « Pourquoi faire appel au Fil de Carrière ? ». Ils étaient jusqu'ici
      une queue sans titre : un lecteur qui faisait défiler arrivait dessus
      sans savoir où il était.
      CE QUE CELA RETIRE DE LA TÊTE : rien de sa hauteur au premier écran,
      ces paragraphes étant déjà sous les deux blocs. Le gain est de
      structure, pas de place.
      ET LA TÊTE N'A PLUS D'APPEL À L'ACTION : ce n'est pas une perte,
      « Nous contacter » est dans le bandeau collant de toutes les pages
      depuis le 06/10.

   3. LA TÊTE REMONTE DE 32 px sur ordinateur. Le réglage est calculé, et
      non choisi : Yannick veut que la ligne « complexe, qui change
      régulièrement… » soit la première coupée. Sur le site en ligne elle
      se termine à 937 px et la ligne qui la précède à 907. Il faut donc
      économiser entre 92 et 122 px pour que la coupure tombe entre les
      deux. Le titre retiré en rend 69, la tête remontée 32 : 101 au total,
      au milieu de la fourchette.
      CE RÉGLAGE VAUT POUR UNE FENÊTRE DE 815 À 845 px DE HAUTEUR UTILE,
      celle de Yannick mesurée sur sa capture du 12/10. UN AUTRE VISITEUR A
      UN AUTRE ÉCRAN : la coupure tombera plus haut chez lui. Aucun réglage
      ne peut placer une ligne de pli pour tout le monde, et c'est à dire
      une fois plutôt qu'à laisser croire le contraire.
   ====================================================================== */
@media (min-width: 1024px) {
  .tete-accueil { padding-block: 1rem 3.2rem; }
}
/* Les quatre paragraphes de la section du cabinet reprennent la mesure et la
   justification des paragraphes de prose du site, « .etroit > p ». Rien à
   déclarer : la règle existe depuis l'origine. */

/* ======================================================================
   v158, 12/10/2026. LE DUO PREND LA LARGEUR DU CONTENEUR, ET LE TITRE
   REVIENT SOUS LE NOM DE « NOTRE CONSTAT ».
   Idée de Yannick du 12/10 au soir : « pourquoi ne pas utiliser davantage
   la largeur de l'écran ? »

   LE DUO ÉTAIT LE SEUL BLOC DE L'ACCUEIL BRIDÉ PLUS ÉTROIT QUE SON
   CONTENEUR, 54,3 rem contre 68. La bride datait de la v85, quand le bloc
   portait la devise : une devise ne se lit pas sur 875 px. La devise est
   partie à la v147, la bride est restée. ELLE SE RETIRE, et le duo prend
   la mesure de toutes les autres sections du site.

   CE QUE LA MESURE DONNE À 1 448 px, LA FENÊTRE RÉELLE DE YANNICK :
   le texte passe de 704 à 875 px, le premier bloc de 10 lignes à 8, le bas
   du second bloc de 857 à 709 px. CENT QUARANTE-HUIT PIXELS, soit plus que
   « Notre raison d'être » retiré et la tête remontée réunis, qui en
   rendaient 101.

   ET LA LISIBILITÉ Y GAGNE, CE QUE J'ATTENDAIS L'INVERSE : la mesure passe
   de 51 à 64 signes par ligne, donc elle se rapproche de la mesure de
   lecture confortable au lieu de s'en éloigner. LE BLOC ÉTAIT TROP ÉTROIT,
   PAS TROP LARGE.

   UNE AUTRE VOIE ESSAYÉE ET ÉCARTÉE : les deux blocs côte à côte ne
   gagnent que 58 px et ramènent la mesure à 39 signes par ligne.

   LES VIGNETTES RESTENT À 8,5 rem, choix de Yannick entre les deux rendus
   mesurés. À 11 rem elles s'équilibrent mieux contre un texte de 875 px,
   mais l'ensemble passe à 808 px, et il ne reste alors que 7 px de marge
   sur une fenêtre dont l'estimation est à dix pixels près.
   ====================================================================== */
@media (min-width: 1024px) {
  .tete-accueil .duo { max-width: none; }
}

/* ======================================================================
   v159, 12/10/2026. L'AIR DE LA TÊTE SE REDISTRIBUE, MAINTENANT QUE LA
   LARGEUR EN A RENDU.
   Demande de Yannick du 12/10 au soir : « aère correctement les sections ».

   TROIS RÉGLAGES, ET CHACUN RÉPOND À CE QUE LA CAPTURE MONTRE.

   1. L'ÉCART ENTRE LES DEUX BLOCS PASSE DE 2,4 À 3,5 rem, de 38 à 56 px.
      Il valait 38 px quand le texte faisait 704 px de large et que chaque
      bloc tenait sur dix lignes : les blocs étaient hauts et étroits, et
      38 px suffisaient à les séparer. Ils sont maintenant larges et courts,
      et le même écart les fait se toucher. UN ÉCART NE SE JUGE PAS EN
      PIXELS MAIS EN RAPPORT À CE QU'IL SÉPARE : plus un bloc est large,
      plus il lui faut de blanc au-dessous pour cesser d'être lu avec le
      suivant. L'écart intérieur aux segments, lui, ne bouge pas : la
      hiérarchie du 12/10 est conservée, 7 px dedans contre 56 entre.

   2. LA DEVISE SE RAPPROCHE DU LOGOTYPE, de 1,6 à 1 rem au-dessus.
      Elle est la signature du nom, pas un élément autonome : les quatre
      bandes du haut étaient à égale distance les unes des autres, donc
      elles se lisaient comme quatre choses sans rapport. Le nom et sa
      devise forment désormais un seul bloc, et « Notre constat » se
      détache comme le début d'autre chose.
      CE QUE CELA NE TOUCHE PAS : les deux écarts de « Notre constat »,
      qui restent égaux, 26 px de chaque côté. La demande de Yannick du
      12/10, « remets-le au centre de ses deux voisins », tient toujours.

   3. LA TÊTE REPREND 1 rem DE PADDING EN HAUT, de 1 à 2 rem.
      Les 1 rem de la v157 étaient un calcul pour faire tomber la coupure
      sur une ligne précise. CE CALCUL N'A PLUS D'OBJET : la page entière
      tient désormais dans le premier écran, il n'y a plus de ligne à
      couper, donc plus de raison de serrer le haut. UN RÉGLAGE POSÉ POUR
      UNE CONTRAINTE SE RETIRE QUAND LA CONTRAINTE DISPARAÎT. Il ne revient
      pas à 3 rem pour autant : la mesure ci-dessous dit ce qui reste.

   CE QUE CELA COÛTE, MESURÉ : + 24 px au total, et la dernière ligne du
   second bloc passe de 775 à 799 px. Sur la fenêtre de Yannick, 815 px,
   il reste 16 px sous elle. LA MARGE EST MINCE ET IL FAUT LE DIRE : mon
   estimation de sa hauteur de fenêtre est à une dizaine de pixels près,
   donc cette page est réglée au plus juste pour SON écran. Sur un écran
   plus court la dernière ligne passera sous le pli, et c'est sans gravité.
   ====================================================================== */
@media (min-width: 1024px) {
  .tete-accueil { padding-block: 2rem 3.2rem; }
  .tete-accueil .devise { margin-top: 1rem; }
  .tete-accueil .duo { gap: 3.5rem; }
}

/* ======================================================================
   v160, 12/10/2026. « POURQUOI FAIRE APPEL AU FIL DE CARRIÈRE ? » DEVIENT
   UN SOUS-TITRE SUR LES TROIS PAGES DE PUBLIC.
   Demande de Yannick du 12/10 au soir : « traite-le comme un sous-titre
   dans les pages Particuliers, Entreprises et Représentants du personnel.
   Même positionnement, taille de police et bleu que celui de la home. »

   CE QUI CHANGE DANS LE CONTENU : la phrase était la SECONDE LIGNE du
   surtitre, collée à « Vous êtes un particulier ? » par un retour à la
   ligne. Elle en sort et devient un élément à part, qui reçoit ici les
   déclarations du h2 du site, à l'identique : même famille, même graisse,
   même bleu d'encre, même taille, même mesure de 38 rem.

   POURQUOI UN PARAGRAPHE ET NON UN h2, ET C'EST LA SEULE LIBERTÉ PRISE :
   ces pages ont déjà leur titre de premier niveau, l'accroche qui suit.
   Un h2 placé AVANT le h1 donnerait une hiérarchie fausse aux moteurs de
   recherche et aux lecteurs d'écran, pour un gain visuel nul : la forme
   demandée s'obtient sans cela. LE RENDU EST CELUI DU TITRE DE L'ACCUEIL,
   LE BALISAGE RESTE JUSTE.

   CE QU'IL FAUT SAVOIR, ET LE DIRE PLUTÔT QUE LE LAISSER DÉCOUVRIR : à
   1 448 px le sous-titre fait 32 px et l'accroche 23. LA QUESTION EST DONC
   PLUS GROSSE QUE L'ACCROCHE, qui était jusqu'ici le plus gros texte de la
   page. C'est la conséquence directe de « même taille que celui de la
   home », et elle se tient : un titre est court, une accroche est une
   phrase de cent cinquante signes, et les deux ne jouent pas le même rôle.
   À revoir avec Yannick s'il la trouve écrasée.

   L'ÉCART AU-DESSUS VAUT CELUI DE L'ACCUEIL, 16 px, obtenu par fusion de
   marges avec le surtitre. L'ÉCART AU-DESSOUS GARDE LES 1,9 rem que la
   page posait déjà entre son surtitre et son accroche : la règle
   « .intro-page > p.titre-section + h1 » ne s'applique plus, puisque les
   deux ne sont plus voisins, et sa valeur est reprise ici.
   ====================================================================== */
.intro-page .question-public {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--encre);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  max-width: 38rem;
  margin: 1rem auto 1.9rem;
}

/* ---- v162, 12/10/2026. LES SIX VOIES EN RAIL À DÉFILEMENT HORIZONTAL ----
   Demande de Yannick : « plutôt que de les lister et avoir ensuite une carte
   pour chacune, les indiquer complètement sous forme de carte avec scrolling
   horizontal, comme les Décryptages ou les fiches pratiques ».

   CE QUE CELA SUPPRIME, ET C'EST LE GAIN : la page portait SIX cartes
   d'annonce puis SIX sections complètes, donc chaque voie était nommée deux
   fois et chaque carte renvoyait à une section qui renvoyait à la carte.
   Une voie, une carte, tout dedans.

   LE RAIL EST CELUI DES DÉCRYPTAGES, inchangé : .rail porte déjà le
   défilement, l'accroche au doigt et les points de position. Seules la
   largeur et la mise en page intérieure d'une carte de voie sont neuves,
   parce qu'une carte de voie n'a pas de vignette et porte trois fois plus
   de texte qu'une carte de décryptage.

   LA LARGEUR EST DONNÉE EN POURCENTAGE DU RAIL et non en rem : la carte
   suivante doit DÉPASSER du bord droit, car c'est ce dépassement qui dit au
   lecteur qu'il y a une suite. À 86 % au téléphone, il en reste 14 % de
   visible, assez pour se voir et trop peu pour se lire.
   ====================================================================== */
.carte-v {
  flex: 0 0 86%;
  padding: 1.5rem 1.4rem;
  border-radius: 10px;
  gap: .7rem;
}
.carte-v h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--encre);
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}
.carte-v .chapo-v {
  color: var(--terre);
  font-weight: 600;
  margin: 0;
}
.carte-v p { margin: 0; }

/* « L'apport du Fil de Carrière » se cale EN BAS de la carte, par marge
   automatique : les six voies n'ont pas la même longueur de texte, et sans
   cela la ligne qui dit ce que le cabinet fait flotterait à six hauteurs
   différentes. Le filet au-dessus la détache de la prose. */
.carte-v .apport {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--trait);
}

/* DEUX CARTES PAR ÉCRAN SUR ORDINATEUR, ET NON TROIS. Mesuré : à trois, la
   colonne de texte tombait à 328 px, soit quarante signes par ligne, et le
   texte justifié du site y creusait des rivières. À deux, la colonne fait
   480 px et la carte perd un tiers de sa hauteur. La troisième dépasse du
   bord, ce qui suffit à dire qu'il y en a d'autres. */
@media (min-width: 641px) { .carte-v { flex-basis: 58%; } }
@media (min-width: 1024px) { .carte-v { flex-basis: 48%; } }


/* ======================================================================
   v163, 13/10/2026. LE PLIAGE DES CARTES DU RAIL DES SIX VOIES.
   Demande de Yannick, en regardant la page en ligne : « il faudrait avoir
   acces au bandeau pour scroller et aux points sur l'ensemble de la
   section. En clair, voir le titre, le sous titre, les cartes et les
   bandeaux et points. »
   MESURE QUI L'A PRODUITE : l'en-tete de section coute 251 px sur sa
   fenetre de 1448 x 815, la barre et les points 8 px seulement, et la
   carte 779 px. Pour que tout tienne, la carte doit tenir en 532 px.
   CE QUI RESTE VISIBLE PLIE : le titre, le chapo, la ligne d'apport et la
   commande. L'apport reste parce que c'est la seule ligne de la carte qui
   dit ce que le cabinet fait ; une carte pliee qui ne montrerait que le
   probleme ferait lire six problemes et aucune reponse.
   POURQUOI UN COMPOSANT NEUF ET NON « .detail-carte » : celui-la efface sa
   commande une fois ouvert, « [open] summary { display: none } », donc on
   ne peut plus replier. Yannick demande un demasquage ET un masquage.
   ====================================================================== */

.detail-v { margin: 0; }
.detail-v > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: .35rem; padding: .5rem 0; font-size: .92rem; color: var(--terre);
  text-underline-offset: .2em;
}
.detail-v > summary:hover { text-decoration: underline; }
.detail-v > summary::-webkit-details-marker { display: none; }
.detail-v > summary:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; }
.detail-v > summary::after {
  content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-.1rem, -.1rem);
  transition: transform .15s ease;
}
.detail-v[open] > summary::after { transform: rotate(-135deg) translate(-.14rem, -.14rem); }
.detail-v > summary .plier-moins { display: none; }
.detail-v[open] > summary .plier-plus { display: none; }
.detail-v[open] > summary .plier-moins { display: inline; }
.detail-v > p:last-child { margin-bottom: 0; }
.detail-v[open] { padding-bottom: .4rem; }

/* ======================================================================
   v168, 13/10/2026 au soir. LE CORPS DEPLIE SE LIT, AU LIEU DE FAIRE BLOC.
   Demande de Yannick : « Les textes des cartes des voies dépliées (sous
   Lire la suite) sont monoblocs. on n'a pas envie de lire. Améliore le
   rendu. »

   LA CAUSE, TROUVEE EN MESURANT ET NON EN REGARDANT : « .carte-v p » pose
   « margin: 0 » sur TOUS les paragraphes de la carte, et le « details »
   n'est pas une boite a gouttiere. Les paragraphes du corps n'avaient donc
   AUCUNE separation entre eux. Mesure a 448 px, la carte de l'employeur :
   deux paragraphes de 14 et 12 lignes de 33 signes, collees l'une a
   l'autre, soit vingt-six lignes d'affilee sans un blanc. C'etait un bloc
   au sens propre.

   TROIS CORRECTIONS, ET AUCUNE NE TOUCHE UN MOT :
   1. Les paragraphes du corps se separent par un blanc, plus large au
      telephone, ou la colonne tombe a 33 signes par ligne.
   2. La cesure automatique est rendue au corps replie. La colonne y est
      deux fois plus etroite que celle d'une page, et un mot long y laisse
      sans elle un bord droit en dents de scie.
   3. « text-wrap: pretty » evite la ligne orpheline d'un seul mot a la fin
      d'un paragraphe, qui est ce qui se voit le plus dans une colonne
      etroite.
   ====================================================================== */
.detail-v > p + p { margin-top: .8em; }
@media (max-width: 640px) { .detail-v > p + p { margin-top: .95em; } }
.detail-v > p { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.detail-v > p.note { margin-top: 1.1em; hyphens: manual; -webkit-hyphens: manual; }

/* LA CARTE DU RAIL CESSE D'ETRE JUSTIFIEE, 13/10/2026 au soir.
   RELEVE SUR UNE CAPTURE DE YANNICK, et non par un controle : « Encadrer,
   cesser d'encadrer ou viser une fonction de » occupait toute la largeur de la
   carte avec des blancs de trois cadratins entre les mots.
   LA CAUSE : « .carte > p » justifie, et le chapo comme la ligne d'apport sont
   des enfants directs de la carte. Le corps, lui, vit dans le repli, donc la
   regle ne l'atteint pas et il etait deja ferre a gauche. UNE MEME CARTE
   PORTAIT DONC DEUX ALIGNEMENTS.
   POURQUOI FERRER A GAUCHE PLUTOT QUE JUSTIFIER LE CORPS : la colonne fait
   452 px sur l'ecran de Yannick et 312 px sur son telephone, soit 48 et 33
   signes par ligne. La justification demande une ligne longue pour repartir le
   blanc ; sous quarante signes elle creuse des rivieres a chaque ligne.
   La page, elle, garde ses textes justifies : sa colonne fait 68 rem. */
.rail-voies .carte-v > p { text-align: left; hyphens: auto; -webkit-hyphens: auto; }

/* L'apport garde sa place au bas de la carte, pliee comme depliee : c'est la
   marge automatique declaree plus haut qui l'y tient, et le filet qui l'en
   separe. Rien a redeclarer ici : la regle etait ecrite trois fois dans cette
   feuille, et trois copies d'une meme regle finissent par diverger. */


/* ======================================================================
   v164, 13/10/2026. LES CARTES DU RAIL SE RESSERRENT SOUS 641 PX.
   MESURE : avec les six cartes definitives, la carte pliee passe de 360 a
   448 px sur l'ordinateur et de 468 a 554 px sur le telephone de Yannick,
   parce que les lignes d'apport se sont allongees. Sur sa fenetre tout
   tient encore ; sur son telephone il manquait 28 px pour voir le titre,
   le sous-titre, les cartes, la barre et les points d'un seul coup.
   LE RESSERREMENT NE TOUCHE QUE LE TELEPHONE, ou l'espace coute le plus
   cher, et il ne retire aucun mot.
   ====================================================================== */

@media (max-width: 640px) {
  .carte-v { padding: 1.15rem 1.1rem; gap: .55rem; }
  .carte-v .apport { padding-top: .7rem; }
  .detail-v > summary { padding: .35rem 0; }
}


/* ======================================================================
   v165, 13/10/2026. UNE CARTE DEPLIEE NE DOIT PAS ETIRER LES CINQ AUTRES.
   DEFAUT RELEVE PAR YANNICK sur la page en ligne : « Chaque Lire la suite
   demasque les 6 cartes a chaque fois [...] Cela fait un encart vide sur
   les cartes non demasquees, et ce n'est pas plaisant a l'oeil. »
   LA CAUSE EST DANS « .rail { align-items: stretch } » : le rail etant une
   rangee flexible, toutes les cartes prennent la hauteur de la plus haute.
   Quand une carte s'ouvre, les cinq autres s'etirent avec elle, et la marge
   automatique de la ligne d'apport pousse celle-ci au bas de la carte
   etiree : le vide se creuse ENTRE le chapo et l'apport, c'est-a-dire au
   pire endroit.
   LE RAIL DES SIX VOIES PASSE DONC EN « start », et lui seul : celui des
   decryptages garde « stretch », ses cartes ne s'ouvrant pas.
   ET LA MARGE AUTOMATIQUE DE L'APPORT EST NEUTRALISEE DANS CE RAIL : sans
   etirement elle n'a plus rien a pousser, et la laisser ferait croire a une
   mecanique encore en service.
   ====================================================================== */

/* REVENU A « stretch » LE 13/10/2026 AU SOIR, et le motif a change.
   La veille, « start » evitait qu'une carte ouverte etire les cinq autres.
   Yannick tranche autrement : les six voies s'ouvrent et se referment
   ENSEMBLE, par le script du generateur. Toutes etant alors dans le meme
   etat, l'etirement ne cree plus de vide, et l'alignement des lignes
   d'apport d'une carte a l'autre redevient ce qu'il doit etre.
   LA REGLE QUI RESTE VRAIE : un vide dans une carte ne vient pas de
   « stretch », il vient d'un ecart de longueur entre les cartes. */

/* Sous 481 px, vingt pixels manquaient encore pour que le titre, le
   sous-titre, les cartes, la barre et les points tiennent d'un seul coup.
   Resserrement supplementaire des seules cartes du rail, aucun mot retire. */
@media (max-width: 480px) {
  .carte-v { padding: 1rem .95rem; gap: .45rem; }
  .carte-v .apport { padding-top: .6rem; }
  .detail-v > summary { padding: .25rem 0; }
}

/* ======================================================================
   v167, 13/10/2026 au soir. LES LIGNES D'APPORT SE PARTAGENT UNE RANGEE.
   Demande de Yannick : « L'apport du Fil de Carriere doit etre au meme
   niveau horizontal dans toutes les cartes. »

   LA MESURE QUI A CHANGE LE DIAGNOSTIC, et elle contredit ce que j'avais
   d'abord ecrit ici. Le defaut ne venait PAS de la longueur des corps. Les
   six cartes ont la meme hauteur et la marge automatique collait les lignes
   d'apport au BAS de la carte, donc leurs BAS etaient alignes et leurs
   HAUTS ne l'etaient pas, parce que les six lignes d'apport n'ont pas le
   meme nombre de lignes de texte. Position du haut de l'apport, mesuree
   sur sa fenetre de 1448 px : 179 px pour cinq cartes et 207 px pour la
   voie du metier, dont l'apport tient en quatre lignes quand les autres en
   prennent cinq. Sur son telephone de 448 px, TROIS hauteurs : 175, 203 et
   231 px. Les mots qu'il designe, « L'apport du Fil de Carriere », sont au
   DEBUT de la ligne, donc c'est le haut qui doit s'aligner.

   ALLONGER LES CORPS N'Y AURAIT RIEN CHANGE : des corps egaux auraient
   aligne les hauts de repli, pas les hauts d'apport, puisque l'ecart vient
   du nombre de lignes de l'apport lui-meme, qui varie en plus avec la
   largeur de l'ecran. Egaliser ces nombres de lignes largeur par largeur
   serait a refaire a chaque retouche de texte et sur onze largeurs.

   LA SOLUTION EST DONC DE MISE EN PAGE ET NON DE TEXTE : le rail porte
   quatre rangees, titre, chapo, repli et apport, et chaque carte reprend
   ces rangees au lieu des siennes. La rangee d'apport prend alors la
   hauteur du plus haut des six apports, et son bord haut est a la meme
   ordonnee dans les six cartes, A TOUTE LARGEUR et quel que soit le nombre
   de lignes. Le vide des cartes courtes tombe au bas de la rangee du
   repli, c'est-a-dire sous le texte du corps, ou il se lit comme un corps
   qui finit tot et non comme un trou au-dessus d'une ligne.
   La marge automatique de « .apport » reste utile pour les cartes d'autres
   sections, qui ne sont pas dans un rail.
   ====================================================================== */
@supports (grid-template-rows: subgrid) {
  .rail-voies {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-rows: auto auto 1fr auto;
  }
  .rail-voies .carte-v {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
  }
  /* ET LA LIGNE SANS LAQUELLE TOUT LE RESTE NE SERT A RIEN, mesuree deux fois
     avant d'etre ecrite : la rangee d'apport prend la hauteur du plus haut des
     six apports, mais la marge automatique continuait d'y coller chaque apport
     en BAS de sa propre rangee, donc les hauts restaient decales de 28 px.
     L'apport se cale au DEBUT de sa rangee, et c'est son bord haut qui est
     commun aux six cartes. */
  .rail-voies .carte-v .apport { margin-top: 0; align-self: start; }
  @media (min-width: 641px)  { .rail-voies { grid-auto-columns: 58%; } }
  @media (min-width: 1024px) { .rail-voies { grid-auto-columns: 48%; } }
}


/* ======================================================================
   v166, 13/10/2026. LES REPERES DEVIENNENT UN RAIL DE CARTES.
   Demande de Yannick : « Les reperes, ca prend trop de place : chaque
   chiffre devrait faire l'objet d'une carte avec defilement horizontal.
   Demasquage, masquage selon le meme principe (tout ensemble). »
   QUATRE PAGES SONT CONCERNEES : retraite, carriere, direction RH et
   representants du personnel. LA PAGE DES CHIFFRES N'EST PAS TOUCHEE, sur
   sa consigne : elle a son propre traitement, par volets repliables.
   CE QUI RESTE VISIBLE PLIE : le nombre et la phrase qu'il porte. La note
   et la source sont dans le repli, et elles restent dans la page, donc
   lues par les moteurs et accessibles en un geste.
   ====================================================================== */

.rail-reperes { margin-top: 1.4rem; }
.rail-reperes .repere {
  /* « 1 0 » et non « 0 0 » : la base vaut pour un rail de quatre cartes, qui
     doit deborder. Un rail de DEUX cartes, lui, n'a rien a faire deborder :
     la croissance autorisee les laisse alors remplir la rangee au lieu de
     tasser deux cartes a gauche et de laisser un tiers de vide a droite. */
  flex: 1 0 82%;
  display: flex; flex-direction: column; gap: .2rem;
  margin: 0; padding: 1.3rem 1.2rem; border-top: 0;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 10px;
}
@media (min-width: 641px)  { .rail-reperes .repere { flex-basis: 46%; } }
@media (min-width: 1024px) { .rail-reperes .repere { flex-basis: 31%; } }

/* Le nombre garde son filet terre cuite, mais il ne porte plus la marge
   d'un bloc isole : c'est la carte qui fait l'espacement. */
.rail-reperes .repere-nombre { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.rail-reperes .repere-dit { font-size: 1.05rem; margin-top: .7rem; }
.rail-reperes .repere-note { margin-top: 0; }
.rail-reperes .repere .source-chiffre { margin-top: .5rem; }
.rail-reperes .detail-v { margin-top: auto; padding-top: .3rem; }
.rail-reperes .detail-v[open] { padding-bottom: 0; }

/* Le renvoi « Tous les chiffres » suivait un bloc, il suit maintenant les
   points de position : il lui faut sa propre respiration. */
.points-rail + .aller-plus-loin,
.etroit > .points-rail + p.aller-plus-loin { margin-top: 1.4rem; }

/* ======================================================================
   v164, 25/10/2026. LE LIEN D'UNE CARTE DE PRESTATION VERS SA PAGE.

   Deux prestations ont désormais leur propre page, le contrôle de la
   pension et la reconstitution de carrière. La carte de particuliers.html
   garde son rôle de résumé et gagne un lien, sous le détail dépliable.

   POURQUOI UN BLOC DE PIED ET NON UN CINQUIÈME ENFANT DE LA CARTE, et
   c'est la seule chose à retenir de ce bloc : au-dessus de 760 px, la
   règle v143 met les cartes en « subgrid » sur QUATRE rangées exactement,
   pour que les éléments de même rang s'alignent d'une carte à l'autre. Un
   cinquième enfant ne trouve pas de rangée et se superpose au quatrième.
   Mesuré : le lien recouvrait la dernière puce du détail. Le détail et le
   lien tiennent donc dans un seul bloc, qui reste le quatrième enfant.

   Ce bloc porte le « margin-top: auto » que `.detail-carte` portait pour
   lui sous 760 px, et le lien prend à son tour une marge automatique pour
   se coller au bas du bloc : les cartes d'une même rangée n'ayant pas le
   même texte, c'est ce qui aligne les liens entre eux.

   La taille et la couleur sont celles de `p.aller-plus-loin`, .94 rem et
   gris doux, reprises et non réinventées. Un second renvoi avec un
   troisième réglage aurait fait une troisième convention.
   ====================================================================== */
.carte > .pied-carte {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}
.carte > .pied-carte > .detail-carte { margin-top: 0; }
.carte > .pied-carte > p.lien-prestation {
  margin: auto 0 0;
  padding-top: .85rem;
  font-size: .94rem;
  line-height: 1.4;
  color: var(--encre-douce);
}