/* ==========================================================================
   Equilune, feuille de style unique
   Carnet de suivi de la perimenopause et de la menopause
   Vocabulaire des classes: veille, cible, repere, sceau, encoche, frise,
   jalon, releve, palier, question, bureau
   Mode clair integral, aucune variante sombre
   ========================================================================== */

/* 1. Jetons de marque ------------------------------------------------------ */

:root {
  --ivoire: #F7F2E7;
  --ivoire-dense: #EFE7D6;
  --surface: #FCFAF3;
  --nuit: #14243F;
  --ardoise: #4A5A72;
  --accent: #0E6E6C;
  --accent-fonce: #0A5654;
  --accent-texte: #F7F2E7;
  --sceau: #A8452F;
  --sable: #D9CDB6;

  --titre: "Arvo", "Rockwell", "Courier New", serif;
  --courant: "Asap", "Segoe UI", system-ui, sans-serif;
  --releve: "JetBrains Mono", "Consolas", monospace;

  --colonne: 1180px;
  --lecture: 68ch;
  --tete: 76px;
  --tete-reduite: 62px;

  --arc: 22px 4px 4px 4px;
  --arc-interne: 18px 3px 3px 3px;
  --pivot: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Champ d etoiles disperse, six sources sur une trame de 240 par 180 */
  --semis-nuit:
    radial-gradient(2.5px 2.5px at 26px 34px, rgba(20, 36, 63, 0.14), rgba(20, 36, 63, 0) 62%),
    radial-gradient(1.4px 1.4px at 108px 17px, rgba(20, 36, 63, 0.14), rgba(20, 36, 63, 0) 62%),
    radial-gradient(1.8px 1.8px at 61px 121px, rgba(20, 36, 63, 0.13), rgba(20, 36, 63, 0) 62%),
    radial-gradient(1.1px 1.1px at 189px 76px, rgba(20, 36, 63, 0.14), rgba(20, 36, 63, 0) 62%),
    radial-gradient(2.1px 2.1px at 214px 148px, rgba(20, 36, 63, 0.12), rgba(20, 36, 63, 0) 62%),
    radial-gradient(1.3px 1.3px at 143px 96px, rgba(20, 36, 63, 0.14), rgba(20, 36, 63, 0) 62%);
  --semis-clair:
    radial-gradient(2.4px 2.4px at 33px 41px, rgba(247, 242, 231, 0.18), rgba(247, 242, 231, 0) 62%),
    radial-gradient(1.3px 1.3px at 121px 24px, rgba(247, 242, 231, 0.18), rgba(247, 242, 231, 0) 62%),
    radial-gradient(1.9px 1.9px at 72px 133px, rgba(247, 242, 231, 0.16), rgba(247, 242, 231, 0) 62%),
    radial-gradient(1.2px 1.2px at 197px 68px, rgba(247, 242, 231, 0.18), rgba(247, 242, 231, 0) 62%),
    radial-gradient(2.2px 2.2px at 226px 156px, rgba(247, 242, 231, 0.15), rgba(247, 242, 231, 0) 62%),
    radial-gradient(1.4px 1.4px at 156px 104px, rgba(247, 242, 231, 0.18), rgba(247, 242, 231, 0) 62%);
}

/* 2. Socle ----------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tete) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ivoire);
  color: var(--nuit);
  font-family: var(--courant);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.68;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: 3.05rem; }
h2 { font-size: 2.05rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.06rem; }

p { margin: 0 0 1.05em; max-width: var(--lecture); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-fonce); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: 0.45em; }
strong { font-weight: 600; }
small { font-size: 0.84rem; }

:focus-visible {
  outline: 3px solid var(--sceau);
  outline-offset: 2px;
  border-radius: 2px;
}

.echappe {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--nuit);
  color: var(--ivoire);
  padding: 12px 20px;
  z-index: 999;
  font-weight: 600;
}
.echappe:focus { left: 8px; top: 8px; color: var(--ivoire); }

.hors-vue {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Gabarit et rythme vertical -------------------------------------------- */

.aire {
  width: 100%;
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: 22px;
}

.aire-etroite {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 22px;
}

.pan {
  position: relative;
  padding-block: 92px;
}
.pan-serre { padding-block: 68px; }
.pan-ample { padding-block: 118px; }
.pan-dense { background-color: var(--ivoire-dense); }
.pan-semis {
  background-image: var(--semis-nuit);
  background-size: 240px 180px;
}
.pan-semis-dense::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--semis-nuit);
  background-size: 180px 140px;
  opacity: 0.85;
  pointer-events: none;
}

.grille-douze {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
}

.surtitre {
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.surtitre::before {
  content: "";
  width: 22px;
  height: 6px;
  border-top: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  flex: none;
}

.chapeau {
  font-size: 1.16rem;
  color: var(--ardoise);
  max-width: 62ch;
}

/* Separation de sections: rangee de reperes radiaux, jamais un trait plein */
.reperes-coupe {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 13px;
  height: 26px;
  margin: 0;
  border: 0;
  padding: 0;
}
.reperes-coupe span {
  display: block;
  width: 1.5px;
  background-color: var(--nuit);
  opacity: 0.55;
}
.reperes-coupe span:nth-child(1) { height: 8px; }
.reperes-coupe span:nth-child(2) { height: 14px; }
.reperes-coupe span:nth-child(3) { height: 20px; }
.reperes-coupe span:nth-child(4) { height: 26px; background-color: var(--sceau); opacity: 1; }
.reperes-coupe span:nth-child(5) { height: 20px; }
.reperes-coupe span:nth-child(6) { height: 14px; }
.reperes-coupe span:nth-child(7) { height: 8px; }

/* 4. Encoche de cible, forme signature ------------------------------------- */

.encoche {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
  padding: 30px 28px;
}
.encoche::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--sable);
  border-radius: var(--arc-interne);
  pointer-events: none;
}
.encoche > * { position: relative; }

.sceau {
  position: absolute;
  top: -15px;
  right: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--sceau);
  color: var(--ivoire);
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 5. Boutons --------------------------------------------------------------- */

.bouton,
.bouton-second {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: 16px 4px 4px 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bouton {
  background-color: var(--accent);
  color: var(--accent-texte);
  border: 1px solid var(--accent);
  position: relative;
}
.bouton:hover,
.bouton:focus-visible {
  background-color: var(--accent-fonce);
  border-color: var(--accent-fonce);
  color: var(--accent-texte);
}
.bouton span { position: relative; display: inline-block; }
.bouton:hover span::after,
.bouton:focus-visible span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background-color: var(--sceau);
}
.bouton:active { transform: translateY(1px); }

.bouton-second {
  background-color: transparent;
  color: var(--nuit);
  border: 1px solid var(--nuit);
  box-shadow: inset 0 0 0 1px var(--ivoire), inset 0 0 0 2px var(--nuit);
  padding: 13px 25px;
}
.bouton-second:hover,
.bouton-second:focus-visible {
  background-color: var(--ivoire-dense);
  color: var(--nuit);
  box-shadow: inset 0 0 0 1px var(--ivoire-dense), inset 0 0 0 2px var(--accent);
}
.bouton-second:active { transform: translateY(1px); }

.duo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

/* 6. En tete fixe ---------------------------------------------------------- */

.veille {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--tete);
  background-color: var(--ivoire);
  z-index: 60;
  transition: height 0.22s ease;
}
.veille::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  border-top: 1px solid var(--nuit);
  border-bottom: 1px solid var(--nuit);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.veille.veille-posee { height: var(--tete-reduite); }
.veille.veille-posee::after { opacity: 1; }

.veille-aire {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.03em;
  color: var(--nuit);
  text-decoration: none;
  flex: none;
}
.logotype svg { flex: none; }
.logotype .marque-tournante { transform-origin: 32px 32px; }

.veille-nav { margin-left: auto; }
.veille-liens {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.veille-liens a {
  position: relative;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--nuit);
  text-decoration: none;
  padding-bottom: 7px;
}
.veille-liens a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 16px;
  height: 5px;
  border-top: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.veille-liens a:hover::after,
.veille-liens a:focus-visible::after,
.veille-liens a.ancre-active::after { opacity: 1; }

.veille-action { flex: none; }
.veille-action .bouton { padding: 10px 19px; font-size: 0.94rem; }

.bouton-panneau {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--nuit);
  border-radius: 14px 3px 3px 3px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.bouton-panneau span {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: var(--nuit);
}

.panneau {
  position: fixed;
  inset: 0;
  background-color: var(--ivoire);
  background-image: var(--semis-nuit);
  background-size: 240px 180px;
  z-index: 70;
  padding: 26px 24px 40px;
  overflow-y: auto;
  display: none;
}
.panneau[data-ouvert="oui"] { display: block; }
.panneau-haut { display: flex; align-items: center; justify-content: space-between; }
.panneau-fermer {
  width: 46px; height: 42px;
  background: transparent;
  border: 1px solid var(--nuit);
  border-radius: 14px 3px 3px 3px;
  font-size: 1.2rem;
  font-family: var(--releve);
  color: var(--nuit);
  cursor: pointer;
}
.panneau ul {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}
.panneau li { border-bottom: 1px solid var(--sable); }
.panneau a {
  display: block;
  padding: 15px 0;
  font-size: 1.25rem;
  font-family: var(--titre);
  font-weight: 700;
  color: var(--nuit);
  text-decoration: none;
}
.panneau .bouton { margin-top: 28px; width: 100%; }

/* 7. Hero en cible concentrique -------------------------------------------- */

.cible-accueil {
  position: relative;
  padding-top: calc(var(--tete) + 58px);
  padding-bottom: 74px;
  background-image: var(--semis-nuit);
  background-size: 240px 180px;
  overflow: hidden;
}

.cible-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 30px;
  align-items: center;
}

.cible-propos { grid-column: 1 / span 6; position: relative; z-index: 3; }
.cible-propos h1 { margin-bottom: 18px; }
.cible-propos .chapeau { font-size: 1.2rem; }

.cible-visuel {
  grid-column: 7 / span 6;
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anneaux {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 640px;
  pointer-events: none;
}
.anneaux svg { width: 100%; height: 100%; overflow: visible; }

.cliche-cible {
  position: relative;
  z-index: 2;
  width: 86%;
  max-width: 420px;
  margin: 0;
}

.cliche {
  position: relative;
  margin: 0;
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
  padding: 4px;
  background-color: var(--surface);
}
.cliche img {
  border-radius: 19px 2px 2px 2px;
  filter: saturate(0.88) contrast(0.98);
}
.cliche::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 19px 2px 2px 2px;
  background-color: rgba(247, 242, 231, 0.08);
  pointer-events: none;
}
.cliche figcaption {
  font-size: 0.88rem;
  color: var(--ardoise);
  padding: 12px 8px 4px;
  max-width: 46ch;
}

/* Rangee d intensites sous le texte du hero */
.frise-accueil {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 62px;
  margin-top: 38px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sable);
}
.frise-accueil span {
  flex: 1;
  height: 45%;
  background-color: var(--accent);
  opacity: 0.72;
  border-radius: 2px 2px 0 0;
}
.frise-accueil span.pic { background-color: var(--sceau); opacity: 1; }
.frise-legende {
  display: flex;
  justify-content: space-between;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ardoise);
  margin-top: 9px;
  text-transform: uppercase;
}

.gage {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 10px 16px;
  border: 1px solid var(--sable);
  border-radius: 14px 3px 3px 3px;
  background-color: var(--surface);
  font-size: 0.92rem;
  color: var(--ardoise);
}
.gage b {
  font-family: var(--releve);
  font-weight: 700;
  color: var(--nuit);
  font-size: 0.92rem;
}

/* 8. Section probleme, cible en quart bas droite ---------------------------- */

.quart-cible {
  position: relative;
  overflow: hidden;
}
.quart-cible .quart-trace {
  position: absolute;
  right: -240px;
  bottom: -300px;
  width: 620px;
  height: 620px;
  pointer-events: none;
  opacity: 0.65;
}
.quart-cible .quart-trace svg { width: 100%; height: 100%; }

.constat-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.constat-propos { grid-column: 1 / span 5; }
.constat-liste {
  grid-column: 6 / span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.constat-liste li {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--sable);
  border-radius: 18px 3px 3px 3px;
  padding: 22px 20px;
  margin: 0;
}
.constat-liste h3 { margin-bottom: 8px; font-size: 1.12rem; }
.constat-liste p { font-size: 0.98rem; color: var(--ardoise); margin: 0; }
.constat-liste .cout {
  display: block;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sceau);
  margin-bottom: 10px;
}

/* 9. Solution, quatre jalons poses sur un arc ------------------------------ */

.arc-jalons {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 52px;
}
.jalon {
  position: relative;
  padding-top: 26px;
}
.jalon:nth-child(1) { transform: translateY(46px); }
.jalon:nth-child(2) { transform: translateY(6px); }
.jalon:nth-child(3) { transform: translateY(6px); }
.jalon:nth-child(4) { transform: translateY(46px); }

.jalon-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--nuit);
  background-color: var(--ivoire);
  font-family: var(--releve);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--nuit);
  margin-bottom: 16px;
  position: relative;
}
.jalon-numero::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
  width: 1.5px;
  height: 13px;
  background-color: var(--sceau);
}
.jalon h3 { margin-bottom: 9px; }
.jalon p { font-size: 0.99rem; color: var(--ardoise); }

.arc-trace {
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 120px;
  pointer-events: none;
}
.arc-trace svg { width: 100%; height: 100%; }

.solution-duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 34px;
  align-items: center;
  margin-top: 120px;
}
.solution-duo .cliche-cadre { grid-column: 1 / span 5; }
.solution-duo .solution-texte { grid-column: 7 / span 6; }

/* 10. Fonctionnalites ------------------------------------------------------ */

.carnet-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 48px;
}
.carnet-fiche h3 { margin-bottom: 10px; }
.carnet-fiche p { font-size: 0.99rem; color: var(--ardoise); }
.carnet-fiche .etiquette {
  display: inline-block;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  border-bottom: 1px dotted var(--accent);
}

/* 11. Avantages ------------------------------------------------------------ */

.gains-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
.gains-propos { grid-column: 1 / span 4; }
.gains-liste {
  grid-column: 5 / span 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gains-liste li {
  border-left: 1px solid var(--nuit);
  padding: 4px 0 4px 20px;
  margin: 0;
}
.gains-liste .mesure {
  display: block;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--nuit);
  line-height: 1.2;
  margin-bottom: 6px;
}
.gains-liste h3 { font-size: 1.06rem; margin-bottom: 6px; }
.gains-liste p { font-size: 0.96rem; color: var(--ardoise); margin: 0; }

.gains-cliche { margin-top: 58px; }

/* 12. Preuve sociale ------------------------------------------------------- */

.paroles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 46px;
}
.parole blockquote {
  margin: 0 0 16px;
  font-size: 1.02rem;
}
.parole blockquote p { color: var(--nuit); }
.parole figcaption {
  border-top: 1px solid var(--sable);
  padding-top: 13px;
  font-size: 0.9rem;
  color: var(--ardoise);
}
.parole figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--nuit);
}

.bandeau-chiffres {
  background-color: var(--accent);
  color: var(--accent-texte);
  background-image: var(--semis-clair);
  background-size: 240px 180px;
  padding-block: 44px;
  margin-top: 66px;
  border-radius: 26px 4px 4px 4px;
}
.bandeau-chiffres ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bandeau-chiffres li { margin: 0; text-align: left; }
.bandeau-chiffres .valeur {
  display: block;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.1;
  margin-bottom: 8px;
}
.bandeau-chiffres .libelle {
  display: block;
  font-size: 0.94rem;
  color: var(--accent-texte);
  opacity: 0.92;
  max-width: 26ch;
}

.preuve-duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 34px;
  align-items: center;
  margin-bottom: 60px;
}
.preuve-duo .preuve-texte { grid-column: 1 / span 6; }
.preuve-duo .cliche-cadre { grid-column: 8 / span 5; }

/* 13. Tarifs --------------------------------------------------------------- */

.paliers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
  margin-top: 50px;
}
.palier { display: flex; flex-direction: column; height: 100%; }
.palier-avance {
  transform: translateY(-16px);
  border-width: 1.5px;
}
.palier-avance::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -34px;
  width: 220px;
  height: 68px;
  border: 1.5px solid var(--accent);
  border-bottom: 0;
  border-radius: 110px 110px 0 0;
  pointer-events: none;
}
.palier h3 { margin-bottom: 6px; }
.palier .prix {
  font-family: var(--releve);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--nuit);
  display: block;
  line-height: 1.1;
  margin-top: 12px;
}
.palier .unite {
  display: block;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: 16px;
}
.palier .destinataire {
  font-size: 0.96rem;
  color: var(--ardoise);
  border-top: 1px solid var(--sable);
  padding-top: 15px;
}
.palier ul {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  flex: 1;
}
.palier ul li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  margin-bottom: 11px;
}
.palier ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.palier .bouton,
.palier .bouton-second { width: 100%; }

.note-tarifs {
  margin-top: 46px;
  font-size: 0.95rem;
  color: var(--ardoise);
  max-width: 78ch;
}

/* 14. FAQ ------------------------------------------------------------------ */

.questions { margin-top: 40px; }
.question {
  border: 1px solid var(--sable);
  border-radius: 18px 3px 3px 3px;
  background-color: var(--surface);
  margin-bottom: 14px;
  overflow: hidden;
}
.question summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 52px 19px 22px;
  position: relative;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--nuit);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 26px;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.question[open] summary::after { transform: rotate(-135deg); }
.question[open] summary { color: var(--accent-fonce); }
.question .reponse { padding: 0 22px 22px; }
.question .reponse p { font-size: 0.99rem; color: var(--ardoise); max-width: none; }

/* 15. Formulaire ----------------------------------------------------------- */

.demi-cercle {
  display: block;
  width: 260px;
  height: 62px;
  margin: 0 auto 26px;
}
.demi-cercle svg { width: 100%; height: 100%; }

.formulaire {
  margin-top: 36px;
  background-color: var(--surface);
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
  padding: 34px 30px;
  position: relative;
}
.formulaire::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--sable);
  border-radius: var(--arc-interne);
  pointer-events: none;
}
.formulaire > * { position: relative; }

.champ { margin-bottom: 20px; }
.champ label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 7px;
}
.champ .aide {
  display: block;
  font-size: 0.86rem;
  color: var(--ardoise);
  margin-bottom: 8px;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--nuit);
  background-color: var(--ivoire);
  border: 1px solid var(--sable);
  border-radius: 12px 3px 3px 3px;
  padding: 12px 14px;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--accent);
  outline: 3px solid var(--sceau);
  outline-offset: 1px;
}
.champ textarea { resize: vertical; min-height: 130px; }

.champ-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.champ-accord {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.92rem;
  color: var(--ardoise);
  margin-bottom: 24px;
}
.champ-accord input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--accent); }

.apres-formulaire {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--ardoise);
}

/* 16. Pied de page --------------------------------------------------------- */

.bureau {
  background-color: var(--ivoire-dense);
  padding-block: 66px 26px;
  border-top: 1px solid var(--nuit);
  position: relative;
  background-image: var(--semis-nuit);
  background-size: 240px 180px;
}
.bureau-grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 34px;
}
.bureau h2, .bureau h3 {
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.bureau ul { list-style: none; margin: 0; padding: 0; }
.bureau li { margin-bottom: 9px; }
.bureau a { color: var(--nuit); text-decoration: none; font-size: 0.95rem; }
.bureau a:hover { color: var(--accent-fonce); text-decoration: underline; }
.bureau p { font-size: 0.93rem; color: var(--ardoise); }

.bureau-signe { margin-bottom: 16px; }
.reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
}
.reseaux a { font-size: 0.88rem; text-decoration: underline; }

.bureau-legal { font-size: 0.86rem; color: var(--ardoise); }
.bureau-legal strong { color: var(--nuit); }

.bureau-bas {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px solid var(--sable);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--ardoise);
}

/* 17. Pages interieures ---------------------------------------------------- */

.entete-page {
  padding-top: calc(var(--tete) + 62px);
  padding-bottom: 48px;
  background-image: var(--semis-nuit);
  background-size: 240px 180px;
}
.entete-page h1 { max-width: 20ch; }
.fil {
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: 18px;
}
.fil a { color: var(--accent); text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.texte-long { max-width: 760px; }
.texte-long h2 { margin-top: 46px; }
.texte-long h3 { margin-top: 30px; }
.texte-long ul { max-width: var(--lecture); }
.texte-long .encoche { margin: 34px 0; }

.portrait-auteur {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 44px;
}
.portrait-auteur img {
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
  padding: 4px;
  background-color: var(--surface);
}

.tableau-plan {
  width: 100%;
  border-collapse: collapse;
  margin-top: 26px;
  font-size: 0.97rem;
}
.tableau-plan th,
.tableau-plan td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--sable);
  vertical-align: top;
}
.tableau-plan th {
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise);
}

.centre-message {
  text-align: center;
  padding-top: calc(var(--tete) + 90px);
  padding-bottom: 100px;
}
.centre-message .duo-actions { justify-content: center; }
.centre-message p { margin-inline: auto; }

/* 18. Etoiles a quatre branches -------------------------------------------- */

.etoile { display: block; }
.etoile-fixe {
  position: absolute;
  pointer-events: none;
}
.etoile-hero { top: 74px; right: 16%; }
.etoile-preuve { top: 40px; left: 8%; }
.etoile-bureau { top: 26px; right: 12%; }

/* 19. Signature d animation, sceau qui pivote ------------------------------ */

.pivote {
  opacity: 0;
  transform: rotate(-14deg) scale(0.94);
}
.pivote.pose {
  animation: sceau-pivot 480ms var(--pivot) forwards;
  animation-delay: calc(var(--rang, 0) * 70ms);
}
@keyframes sceau-pivot {
  from { opacity: 0; transform: rotate(-14deg) scale(0.94); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

.marque-tournante { animation: marque-pivot 620ms var(--pivot) 120ms 1 backwards; }
@keyframes marque-pivot {
  from { transform: rotate(-14deg); opacity: 0; }
  to { transform: rotate(0deg); opacity: 1; }
}

.palier:hover .sceau,
.encoche:hover .sceau { transform: rotate(6deg); transition: transform 0.25s var(--pivot); }

/* 20. Adaptations ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .cible-propos { grid-column: 1 / span 7; }
  .cible-visuel { grid-column: 8 / span 5; min-height: 400px; }
  .anneaux { width: 520px; height: 520px; }
  .constat-propos { grid-column: 1 / span 12; }
  .constat-liste { grid-column: 1 / span 12; }
  .gains-propos { grid-column: 1 / span 12; }
  .gains-liste { grid-column: 1 / span 12; }
  .carnet-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paroles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeau-chiffres ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bureau-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paliers { grid-template-columns: 1fr; }
  .palier-avance { transform: none; }
  .palier-avance::after { display: none; }
  .solution-duo .cliche-cadre,
  .solution-duo .solution-texte,
  .preuve-duo .preuve-texte,
  .preuve-duo .cliche-cadre { grid-column: 1 / span 12; }
  .arc-jalons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jalon { transform: none !important; }
  .arc-trace { display: none; }
}

@media (max-width: 860px) {
  .veille-nav, .veille-action { display: none; }
  .bouton-panneau { display: flex; }
  .cible-grille { grid-template-columns: 1fr; }
  .cible-propos, .cible-visuel { grid-column: auto; }
  .cible-visuel { min-height: 380px; margin-top: 42px; }
  .anneaux { width: 460px; height: 460px; }
  .portrait-auteur { grid-template-columns: 1fr; }
  .portrait-auteur img { max-width: 220px; }
}

@media (max-width: 640px) {
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.65rem; }
  .pan { padding-block: 64px; }
  .pan-ample { padding-block: 76px; }
  .constat-liste { grid-template-columns: 1fr; }
  .carnet-grille { grid-template-columns: 1fr; }
  .paroles { grid-template-columns: 1fr; }
  .gains-liste { grid-template-columns: 1fr; }
  .bandeau-chiffres ul { grid-template-columns: 1fr; }
  .bureau-grille { grid-template-columns: 1fr; }
  .arc-jalons { grid-template-columns: 1fr; }
  .champ-duo { grid-template-columns: 1fr; }
  .anneaux { width: 360px; height: 360px; }
  .cible-visuel { min-height: 320px; }
  .duo-actions .bouton,
  .duo-actions .bouton-second { width: 100%; }
  .formulaire { padding: 26px 20px; }
  .bandeau-chiffres { padding-inline: 22px; }
}

/* 21. Mouvement reduit ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pivote { opacity: 0; transform: none; }
  .pivote.pose {
    animation: sceau-fondu 200ms linear forwards;
    animation-delay: 0ms;
    transform: none;
  }
  @keyframes sceau-fondu {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .marque-tournante { animation: none; transform: none; }
  .palier:hover .sceau,
  .encoche:hover .sceau { transform: none; }
  .bouton:active,
  .bouton-second:active { transform: translateY(1px); }
}

/* 22. Impression ----------------------------------------------------------- */

@media print {
  .veille, .panneau, .bouton, .bouton-second, .bandeau-chiffres { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .pivote { opacity: 1; transform: none; }
}

/* 23. Liens de secours de la page introuvable ------------------------------ */

.liens-secours {
  list-style: none;
  padding: 0;
  margin: 26px auto 0;
  max-width: 520px;
  text-align: left;
}
.liens-secours li {
  border-bottom: 1px solid var(--sable);
  padding-bottom: 9px;
}
/* ==========================================================================
   24. La Frise des trois mois, magazine du carnet Equilune
   Section ajoutee a la suite, sans modifier une seule regle ecrite plus haut.
   Meme palette, meme encoche de cible, meme champ d etoiles disperse et meme
   sceau qui pivote a l apparition que le reste du site.
   Vocabulaire des classes: feuillet pour une carte d article, billet pour un
   article, releve pour les metadonnees en monospace, lire-aussi pour le bloc
   de fin, signature-auteur pour l encart de l auteur.
   Le corps redactionnel ne porte aucune classe: toutes les balises nues sont
   mises en forme en tant que descendantes de .billet-corps.
   ========================================================================== */

/* 24.1 En tete du magazine et fil d Ariane --------------------------------- */

.entete-frise {
  position: relative;
  padding-top: calc(var(--tete) + 62px);
  padding-bottom: 52px;
  background-image: var(--semis-nuit);
  background-size: 240px 180px;
  overflow: hidden;
}
.entete-frise h1 { max-width: 18ch; }
.entete-frise .chapeau { max-width: 66ch; font-size: 1.14rem; }

.frise-arc {
  position: absolute;
  top: 34px;
  right: -110px;
  width: 380px;
  height: 380px;
  opacity: 0.55;
  pointer-events: none;
}
.frise-arc svg { width: 100%; height: 100%; }

.releve-frise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--sable);
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardoise);
  max-width: none;
}
.releve-frise span { display: inline-flex; align-items: center; gap: 10px; }
.releve-frise span + span::before {
  content: "";
  width: 1.5px;
  height: 12px;
  background-color: var(--sceau);
  flex: none;
}

/* Dans le magazine, les intitules du pied de page sont des paragraphes: les
   niveaux de titre sont reserves au corps redactionnel des articles. La mise
   en forme reste rigoureusement celle des intitules du reste du site. */
.bureau .bureau-titre {
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

/* 24.2 Grille de cartes d article ------------------------------------------ */

.feuillets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  margin-top: 50px;
  list-style: none;
  padding: 0;
}
.feuillets > li { margin: 0; }

.feuillet {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 4px;
  background-color: var(--surface);
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
  transition: border-color 0.22s ease, transform 0.22s var(--pivot);
}
.feuillet::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--sable);
  border-radius: var(--arc-interne);
  pointer-events: none;
  z-index: 2;
}
.feuillet:hover,
.feuillet:focus-within {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.feuillet-vignette {
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: 19px 2px 2px 2px;
  background-color: var(--ivoire-dense);
}
.feuillet-vignette img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.98);
  transition: filter 0.25s ease;
}
.feuillet:hover .feuillet-vignette img { filter: saturate(1) contrast(1); }

.feuillet-texte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 20px 20px;
}

.feuillet-angle {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.71rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  margin-bottom: 13px;
}

.feuillet-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  max-width: none;
  text-wrap: balance;
}
.feuillet-titre a {
  color: var(--nuit);
  text-decoration: none;
}
.feuillet-titre a:hover,
.feuillet-titre a:focus-visible {
  color: var(--accent-fonce);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feuillet-extrait {
  font-size: 0.97rem;
  color: var(--ardoise);
  margin: 0 0 18px;
  max-width: none;
}

.feuillet-releve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: auto 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--sable);
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ardoise);
  max-width: none;
}
.feuillet-releve time { color: var(--nuit); }
.feuillet-releve span::before {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 10px;
  margin-right: 12px;
  vertical-align: -1px;
  background-color: var(--sable);
}

/* 24.3 Section Derniers articles de la page d accueil ----------------------- */

.derniers-billets .aire > .surtitre { margin-bottom: 14px; }
.derniers-billets .chapeau { max-width: 64ch; }
.derniers-billets .feuillets { margin-top: 46px; }
.derniers-billets .duo-actions { margin-top: 42px; }

/* 24.4 En tete d un article ------------------------------------------------ */

.entete-billet {
  position: relative;
  padding-top: calc(var(--tete) + 58px);
  padding-bottom: 8px;
  background-image: var(--semis-nuit);
  background-size: 240px 180px;
}
.entete-billet h1 {
  max-width: 22ch;
  margin-bottom: 20px;
}
.entete-billet .fil { margin-bottom: 20px; }
.entete-billet .fil .fil-actuel {
  font-family: var(--courant);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ardoise);
}

.releve-billet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 24px;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ardoise);
  max-width: none;
}
.releve-billet .angle-billet {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
}
.releve-billet time { color: var(--nuit); }
.releve-billet .separe {
  display: inline-block;
  width: 1.5px;
  height: 12px;
  background-color: var(--sceau);
}

.billet-chapo {
  position: relative;
  font-size: 1.16rem;
  line-height: 1.62;
  color: var(--ardoise);
  max-width: 64ch;
  margin: 0;
  padding: 4px 0 4px 24px;
  border-left: 1px solid var(--nuit);
}
.billet-chapo::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--sable);
}

.cliche-billet {
  margin: 40px 0 0;
  max-width: 900px;
}
.cliche-billet img { width: 100%; }

/* 24.5 Corps de l article, balises nues ------------------------------------ */

.billet {
  padding-block: 54px 96px;
}
.billet-corps {
  max-width: 720px;
  font-size: 1.06rem;
}
.billet-corps > :first-child { margin-top: 0; }

.billet-corps h2 {
  position: relative;
  font-size: 1.74rem;
  margin: 56px 0 16px;
  padding-top: 20px;
  max-width: 26ch;
}
.billet-corps h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 6px;
  border-top: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
}

.billet-corps h3 {
  position: relative;
  font-size: 1.24rem;
  margin: 36px 0 12px;
  padding-left: 22px;
  max-width: 32ch;
}
.billet-corps h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 13px;
  height: 1.5px;
  background-color: var(--sceau);
}

.billet-corps p {
  max-width: var(--lecture);
  margin: 0 0 1.15em;
}
.billet-corps strong { font-weight: 600; color: var(--nuit); }
.billet-corps em { font-style: italic; }
.billet-corps a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.billet-corps a:hover,
.billet-corps a:focus-visible { color: var(--accent-fonce); }

.billet-corps ul,
.billet-corps ol {
  max-width: var(--lecture);
  margin: 0 0 1.35em;
  padding-left: 0;
  list-style: none;
}
.billet-corps li { margin-bottom: 0.6em; }
.billet-corps ul > li {
  position: relative;
  padding-left: 28px;
}
.billet-corps ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.78em;
  width: 12px;
  height: 1.5px;
  background-color: var(--accent);
}
.billet-corps ol {
  counter-reset: releve-liste;
}
.billet-corps ol > li {
  position: relative;
  padding-left: 38px;
  counter-increment: releve-liste;
}
.billet-corps ol > li::before {
  content: counter(releve-liste);
  position: absolute;
  left: 0;
  top: 0.06em;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent);
  border-bottom: 1.5px solid var(--sable);
  padding: 0 3px 1px;
}
.billet-corps li ul,
.billet-corps li ol { margin: 0.6em 0 0.2em; }

.billet-corps table {
  width: 100%;
  margin: 34px 0 38px;
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background-color: var(--surface);
  font-size: 0.97rem;
}
.billet-corps thead { background-color: var(--ivoire-dense); }
.billet-corps th,
.billet-corps td {
  text-align: left;
  vertical-align: top;
  padding: 13px 15px;
  border-bottom: 1px solid var(--sable);
}
.billet-corps th {
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise);
  border-bottom: 1px solid var(--nuit);
}
.billet-corps tbody tr:last-child td { border-bottom: 0; }
.billet-corps td strong { color: var(--nuit); }

.billet-corps blockquote {
  position: relative;
  margin: 36px 0;
  padding: 26px 28px 24px;
  max-width: var(--lecture);
  background-color: var(--surface);
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
  font-family: var(--titre);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--nuit);
}
.billet-corps blockquote::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--sable);
  border-radius: var(--arc-interne);
  pointer-events: none;
}
.billet-corps blockquote::after {
  content: "";
  position: absolute;
  top: -15px;
  right: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--sceau);
}
.billet-corps blockquote p {
  position: relative;
  margin-bottom: 0.7em;
  max-width: none;
}
.billet-corps blockquote p:last-child { margin-bottom: 0; }

.billet-corps aside {
  position: relative;
  margin: 36px 0;
  padding: 30px 26px 24px;
  max-width: var(--lecture);
  background-color: var(--ivoire-dense);
  background-image: var(--semis-nuit);
  background-size: 240px 180px;
  border: 1px solid var(--sable);
  border-radius: var(--arc);
}
.billet-corps aside::before {
  content: "Rep\00E8re";
  position: absolute;
  top: 12px;
  left: 26px;
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.billet-corps aside p:last-child { margin-bottom: 0; }
.billet-corps aside > :first-child { margin-top: 10px; }

.billet-corps figure {
  margin: 34px 0;
  max-width: 100%;
}
.billet-corps figcaption {
  font-size: 0.88rem;
  color: var(--ardoise);
  padding-top: 10px;
  max-width: 52ch;
}

/* 24.6 Appel a l action de fin d article ------------------------------------ */

.appel-frise {
  margin: 52px 0 0;
  padding: 34px 32px;
  max-width: 720px;
  background-color: var(--accent);
  background-image: var(--semis-clair);
  background-size: 240px 180px;
  color: var(--accent-texte);
  border-radius: 26px 4px 4px 4px;
}
.appel-frise .appel-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.34rem;
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--accent-texte);
  max-width: 30ch;
}
.appel-frise p {
  color: var(--accent-texte);
  max-width: 58ch;
}
.appel-frise .bouton-ivoire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 25px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--nuit);
  background-color: var(--ivoire);
  border: 1px solid var(--ivoire);
  border-radius: 16px 4px 4px 4px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.appel-frise .bouton-ivoire:hover,
.appel-frise .bouton-ivoire:focus-visible {
  background-color: var(--surface);
  color: var(--accent-fonce);
}
.appel-frise .bouton-ivoire:active { transform: translateY(1px); }

/* 24.7 Encart auteur -------------------------------------------------------- */

.signature-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
  margin: 56px 0 0;
  max-width: 720px;
  padding: 30px 28px;
  background-color: var(--surface);
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
}
.signature-auteur::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--sable);
  border-radius: var(--arc-interne);
  pointer-events: none;
}
.signature-auteur > * { position: relative; }
.signature-auteur img {
  width: 96px;
  height: 96px;
  border-radius: 18px 3px 3px 3px;
  border: 1px solid var(--sable);
}
.signature-auteur .signature-role {
  font-family: var(--releve);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.signature-auteur .signature-nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--nuit);
}
.signature-auteur p { font-size: 0.99rem; color: var(--ardoise); }
.signature-auteur .signature-lien { margin-top: 12px; }

/* 24.8 Bloc A lire aussi ---------------------------------------------------- */

.lire-aussi {
  margin-top: 0;
  padding-block: 78px;
}
.lire-aussi .lire-aussi-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.62rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--nuit);
  margin: 0 0 8px;
  max-width: 28ch;
}
.lire-aussi .lire-aussi-intro {
  color: var(--ardoise);
  margin-bottom: 34px;
  max-width: 62ch;
}

.lire-aussi-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.carte-lire {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px;
  background-color: var(--surface);
  border: 1px solid var(--nuit);
  border-radius: var(--arc);
  transition: border-color 0.22s ease, transform 0.22s var(--pivot);
}
.carte-lire::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--sable);
  border-radius: var(--arc-interne);
  pointer-events: none;
  z-index: 2;
}
.carte-lire:hover,
.carte-lire:focus-within {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.carte-lire > a {
  display: block;
  overflow: hidden;
  border-radius: 19px 2px 2px 2px;
}
.carte-lire img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 19px 2px 2px 2px;
  filter: saturate(0.88) contrast(0.98);
}
.carte-lire-texte { padding: 18px 18px 20px; }
.carte-lire-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 9px;
  max-width: none;
}
.carte-lire-titre a { color: var(--nuit); text-decoration: none; }
.carte-lire-titre a:hover,
.carte-lire-titre a:focus-visible {
  color: var(--accent-fonce);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.carte-lire-accroche {
  font-size: 0.93rem;
  color: var(--ardoise);
  margin: 0;
  max-width: none;
}

/* 24.9 Adaptations du magazine --------------------------------------------- */

@media (max-width: 1080px) {
  .feuillets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lire-aussi-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frise-arc { display: none; }
  .cliche-billet { max-width: 100%; }
}

@media (max-width: 860px) {
  .entete-billet h1 { max-width: none; }
  .billet-corps h2 { max-width: none; }
  .billet-corps h3 { max-width: none; }
}

@media (max-width: 640px) {
  .feuillets { grid-template-columns: 1fr; gap: 30px; }
  .lire-aussi-grille { grid-template-columns: 1fr; }
  .billet { padding-block: 40px 66px; }
  .billet-corps h2 { font-size: 1.5rem; margin-top: 44px; }
  .billet-corps h3 { font-size: 1.14rem; }
  .billet-corps table { font-size: 0.88rem; }
  .billet-corps th,
  .billet-corps td { padding: 10px 11px; }
  .signature-auteur { grid-template-columns: 1fr; }
  .appel-frise { padding: 26px 22px; }
  .lire-aussi { padding-block: 54px; }
}

/* 24.10 Mouvement reduit, magazine ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .feuillet:hover,
  .feuillet:focus-within,
  .carte-lire:hover,
  .carte-lire:focus-within { transform: none; }
  .feuillet-vignette img { transition: none; }
}

/* 24.11 Impression du magazine --------------------------------------------- */

@media print {
  .lire-aussi,
  .appel-frise { display: none !important; }
  .billet-corps { max-width: none; }
}

/* Maillage du reseau, bandeau de pied de page. Mise en page seulement:
   les couleurs, la police et le survol restent ceux du site.
   grid-column et flex-basis font tenir le bandeau sur toute la largeur,
   que le pied de page soit une grille ou une boite flexible.
   Les raccourcis margin et padding sont evites: ils ecraseraient le retrait
   interieur d une colonne dont le bandeau herite la classe. */
[data-reseau-bloc]{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:26px;padding-top:18px}
[data-reseau-titre]{font-size:.8rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px}
ul[data-reseau]{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0}
ul[data-reseau] li{margin:0;padding:0}

/* En tete: aucun libelle ne se coupe en deux lignes. La gouttiere et la taille
   du texte cedent avant le mot, jamais l inverse. */
header a, header button { white-space: nowrap; }
header nav[class] { column-gap: clamp(10px, 1.3vw, 26px); }
/* Entre le menu de bureau et le menu replie du telephone, la barre est a l etroit:
   la gouttiere et le corps du texte cedent d un cran plutot que de deborder. */
@media (max-width: 1220px) {
  header nav[class] { column-gap: clamp(8px, 1vw, 16px); }
  header nav[class] a, header nav[class] button { font-size: 0.93em; letter-spacing: 0; }
  /* Le bouton de l en tete se resserre lui aussi: c est la piece la plus large
     de la barre, et c est elle qui sortait de la fenetre. */
  header a[class*="bouton"], header a[class*="cta"] { padding-left: 14px; padding-right: 14px; }
}

/* Le quart de trace decoratif est pose hors cadre: la section les coupe a son bord.
   Sans cela, le debordement s ajoutait a la largeur de la page et toute la mise
   en page se mettait a defiler de cote. */
section, .section { overflow-x: clip; }

/*xn:start*/
/* Pages ressources: portail, guide pilier, comparatifs, outils, aimant.
   Un seul bloc, prefixe xn-, ajoute a la feuille du site. Il ne redefinit
   aucune classe existante et emprunte au site ses couleurs et ses polices. */
:root{
  --xn-bg:#F7F2E7;--xn-soft:#EFE7D6;--xn-surface:#FCFAF3;--xn-text:#14243F;
  --xn-muted:#4A5A72;--xn-accent:#0E6E6C;--xn-on-accent:#F7F2E7;--xn-line:#D9CDB6;
  --xn-h:"Arvo", "Rockwell", "Courier New", serif;--xn-b:"Asap", "Segoe UI", system-ui, sans-serif;
}
.xn-main{background:var(--xn-bg);color:var(--xn-text);font-family:var(--xn-b);line-height:1.65}
.xn-main *,.xn-main *::before,.xn-main *::after{box-sizing:border-box}
.xn-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.xn-wrap--narrow{max-width:800px}
.xn-band{padding:clamp(34px,5.2vw,68px) 0}
.xn-band--soft{background:var(--xn-soft)}
.xn-band--surface{background:var(--xn-surface)}
.xn-main h1,.xn-main h2,.xn-main h3,.xn-main h4{font-family:var(--xn-h);color:var(--xn-text);line-height:1.16;margin:0 0 .55em;text-wrap:balance}
.xn-main h1{font-size:clamp(1.95rem,4.4vw,3.05rem);letter-spacing:-.01em}
.xn-main h2{font-size:clamp(1.4rem,2.7vw,2.05rem);margin-top:1.6em}
.xn-main h3{font-size:clamp(1.08rem,1.7vw,1.3rem);margin-top:1.4em}
.xn-main p{margin:0 0 1.05em;color:var(--xn-text)}
.xn-main a{color:var(--xn-accent);text-underline-offset:3px}
.xn-main a:hover{text-decoration:none}
.xn-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.83rem;color:var(--xn-muted);padding:22px 0 0;margin:0}
.xn-crumb a{color:var(--xn-muted)}
.xn-crumb span[aria-hidden]{opacity:.5}
.xn-eyebrow{display:inline-block;font-family:var(--xn-h);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--xn-accent);margin:0 0 .7em}
.xn-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--xn-muted);max-width:64ch}
.xn-hd{padding:clamp(26px,4vw,52px) 0 clamp(18px,3vw,32px)}
.xn-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.83rem;color:var(--xn-muted);margin:.4em 0 0;padding:0;list-style:none}
.xn-prose>*:first-child{margin-top:0}
.xn-prose ul,.xn-prose ol{margin:0 0 1.2em;padding-left:1.25em}
.xn-prose li{margin:0 0 .5em}
.xn-note{border-left:3px solid var(--xn-accent);background:var(--xn-surface);padding:14px 18px;margin:0 0 1.3em;font-size:.95rem;color:var(--xn-muted)}
.xn-card{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:clamp(18px,2.4vw,26px)}
.xn-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin:0;padding:0;list-style:none}
.xn-grid h3{margin-top:0}
.xn-grid p{font-size:.94rem;color:var(--xn-muted);margin-bottom:.8em}
.xn-tag{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--xn-h);color:var(--xn-muted);margin:0 0 .6em}
.xn-btn,.xn-main a.xn-btn{display:inline-block;font-family:var(--xn-h);font-size:.95rem;letter-spacing:.02em;padding:13px 24px;border-radius:3px;border:1px solid var(--xn-accent);background:var(--xn-accent);color:var(--xn-on-accent);text-decoration:none;cursor:pointer;text-align:center}
.xn-btn:hover,.xn-main a.xn-btn:hover{filter:brightness(1.09);text-decoration:none}
.xn-btn--ghost,.xn-main a.xn-btn--ghost{background:transparent;color:var(--xn-accent)}
.xn-actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 0}
.xn-tablewrap{overflow-x:auto;border:1px solid var(--xn-line);border-radius:4px;background:var(--xn-surface)}
.xn-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
.xn-table th,.xn-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--xn-line);vertical-align:top}
.xn-table thead th{font-family:var(--xn-h);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;background:var(--xn-soft);color:var(--xn-text)}
.xn-table tbody th{font-weight:600;color:var(--xn-text);width:26%}
.xn-table td:first-of-type{color:var(--xn-text)}
.xn-table .xn-yes{color:var(--xn-accent);font-weight:600}
.xn-faq dt{font-family:var(--xn-h);font-size:1.06rem;margin:1.4em 0 .4em;color:var(--xn-text)}
.xn-faq dd{margin:0;color:var(--xn-muted)}
.xn-toc{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:20px 24px;margin:0 0 2em}
.xn-toc p{font-family:var(--xn-h);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--xn-muted);margin:0 0 .7em}
.xn-toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:32px}
.xn-toc li{margin:0 0 .42em;font-size:.94rem;break-inside:avoid}
@media(max-width:640px){.xn-toc ol{columns:1}}
.xn-check{list-style:none;margin:0;padding:0}
.xn-check li{position:relative;padding:0 0 .62em 30px;color:var(--xn-text)}
.xn-check li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:8px;border-left:2.5px solid var(--xn-accent);border-bottom:2.5px solid var(--xn-accent);transform:rotate(-45deg)}
.xn-form{display:grid;gap:14px;max-width:520px}
.xn-form label{font-family:var(--xn-h);font-size:.86rem;letter-spacing:.03em;display:block;margin:0 0 5px;color:var(--xn-text)}
.xn-form input[type=text],.xn-form input[type=email],.xn-form input[type=number]{width:100%;padding:11px 13px;border:1px solid var(--xn-line);border-radius:3px;background:var(--xn-surface);color:var(--xn-text);font:inherit;font-size:1rem}
.xn-form input:focus-visible,.xn-btn:focus-visible,.xn-main a:focus-visible{outline:3px solid var(--xn-accent);outline-offset:2px}
.xn-consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--xn-muted)}
.xn-consent input{margin-top:.25em;flex:0 0 auto}
.xn-tool{display:grid;gap:26px;grid-template-columns:minmax(280px,1fr) minmax(260px,.85fr);align-items:start}
@media(max-width:820px){.xn-tool{grid-template-columns:1fr}}
.xn-out{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:22px 24px;position:sticky;top:16px}
@media(min-width:821px){.xn-sticky{position:sticky;top:16px}}
.xn-out__row{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--xn-line)}
.xn-out__row:last-child{border:0;margin:0;padding:0}
.xn-out__lab{font-family:var(--xn-h);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--xn-muted);margin:0 0 .3em}
.xn-out__val{font-family:var(--xn-h);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.05;color:var(--xn-accent);margin:0}
.xn-out__row--first .xn-out__val{font-size:clamp(2rem,4.6vw,2.9rem)}
.xn-out__note{font-size:.86rem;color:var(--xn-muted);margin:.35em 0 0}
.xn-field__help{font-size:.83rem;color:var(--xn-muted);margin:5px 0 0}
.xn-hint{font-size:.85rem;color:var(--xn-muted);margin:1.2em 0 0}
.xn-cta{background:var(--xn-accent);color:var(--xn-on-accent);border-radius:4px;padding:clamp(24px,3.4vw,40px)}
.xn-cta h2,.xn-cta p{color:var(--xn-on-accent)}
.xn-cta h2{margin-top:0}
.xn-cta a{color:var(--xn-on-accent)}
.xn-cta .xn-btn,.xn-main .xn-cta a.xn-btn{background:var(--xn-on-accent);color:var(--xn-accent);border-color:var(--xn-on-accent)}
.xn-cta .xn-btn--ghost,.xn-main .xn-cta a.xn-btn--ghost{background:transparent;color:var(--xn-on-accent)}
.xn-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.xn-links a{font-family:var(--xn-h);font-size:1rem}
.xn-links span{display:block;font-family:var(--xn-b);font-size:.89rem;color:var(--xn-muted)}

/* Appel vers l article pilier, insere dans les neuf articles du magazine */
.xn-pillar{border:1px solid var(--xn-line);border-left:4px solid var(--xn-accent);background:var(--xn-surface);
  border-radius:3px;padding:16px 20px;margin:1.8em 0;font-family:var(--xn-b);line-height:1.55}
.xn-pillar__k{font-family:var(--xn-h);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--xn-accent);margin:0 0 .35em}
.xn-pillar__t{font-family:var(--xn-h);font-size:1.1rem;margin:0 0 .3em;line-height:1.25}
.xn-pillar__t a{color:var(--xn-text)}
.xn-pillar__d{font-size:.9rem;color:var(--xn-muted);margin:0}

/* Le lien de menu ajoute. La barre qui l accueille etait calibree au pixel:
   on l autorise a passer a la ligne plutot qu a casser un libelle en trois. */
.xn-navlink{white-space:nowrap}
nav:has(> .xn-navlink){flex-wrap:wrap}
nav:has(> .xn-navlink) > a{white-space:nowrap}
@media(min-width:1024px){nav:has(> .xn-navlink){font-size:.93em;column-gap:clamp(.7rem,1.45vw,1.5rem);row-gap:.3rem}}

/* Bloc de liens ajoute au pied de page de chaque page du site */
.xn-foot{border-top:1px solid currentColor;margin:26px 0 0;padding:20px 0 2px;font-size:.9rem}
.xn-foot__t{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px;opacity:.72}
.xn-foot__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 22px}
.xn-foot__l a{color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.92}
.xn-foot__l a:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.xn-main *{animation:none!important;transition:none!important}}
/*xn:end*/