/* ==========================================================================
   Tracencre, feuille de style unique.
   Vocabulaire des classes, emprunte au poste de travail de la praticienne:
     cabine        enveloppe generale de la page
     registre      en tete fixe et sa navigation
     plateau       conteneur central d une section
     brique        cellule de la grille en quinconce
     etiquette     carte, dessinee comme une etiquette de flacon
     tampon        motif de tampons encreurs superposes
     lot           champ recopie du flacon (reference, numero de lot, cycle)
     marche        etape numerotee
     gain          benefice mesurable
     parole        temoignage de praticienne
     formule       offre tarifaire
     fiche         formulaire et blocs administratifs
     pied          pied de page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  --fond: #FBF2F4;
  --fond-alt: #F4E6EB;
  --surface: #FFFFFF;
  --texte: #1F1A34;
  --texte-doux: #635889;
  --accent: #4A3A8C;
  --accent-texte: #FFF7FA;
  --accent-secondaire: #B03A62;
  --bordure: #E0CFD9;

  --laize: 1180px;
  --gouttiere: clamp(18px, 3vw, 34px);
  --respire: clamp(56px, 7vw, 104px);

  --coupe: 14px;
  --filet: 4px;
  --decalage-plein: 6px;

  --titre: "Kanit", "Segoe UI", Tahoma, sans-serif;
  --courant: "Noto Sans", "Segoe UI", Arial, sans-serif;
  --grave: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;

  --forme-etiquette: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Bases
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.6em;
  color: var(--texte);
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.2rem); font-weight: 600; }
h3 { font-size: 1.35rem; font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 1.05em; max-width: 68ch; }

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

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin: 0 0 0.4em; }

strong { font-weight: 600; }

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

::selection { background: var(--accent); color: var(--accent-texte); }

.evitement {
  position: absolute;
  left: 12px;
  top: -70px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 12px 22px;
  font-weight: 600;
  text-decoration: none;
  transition: top 150ms var(--courbe);
}
.evitement:focus { top: 12px; color: var(--accent-texte); }

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.plateau {
  width: min(100% - (2 * var(--gouttiere)), var(--laize));
  margin-inline: auto;
}

.rayon { padding-block: var(--respire); position: relative; }
.rayon--dense { background: var(--fond-alt); }
.rayon--encre { background: var(--texte); color: var(--fond); }
.rayon--encre h2,
.rayon--encre h3 { color: var(--fond); }
.rayon--encre p { color: #D9CFE6; }

.surtitre {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-doux);
  display: block;
  margin: 0 0 14px;
}
.rayon--encre .surtitre { color: #C3AEDD; }

.chapeau {
  font-size: 1.125rem;
  color: var(--texte-doux);
  max-width: 62ch;
}

.tete-rayon { margin-bottom: clamp(32px, 4vw, 54px); max-width: 780px; }

/* --------------------------------------------------------------------------
   4. Etiquette, forme signature du projet
   -------------------------------------------------------------------------- */

.etiquette {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  padding: clamp(20px, 2.4vw, 30px);
  height: 100%;
}

.etiquette::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid var(--bordure);
  pointer-events: none;
  opacity: 0.75;
}

.etiquette h3 { margin-bottom: 0.45em; }
.etiquette p:last-child { margin-bottom: 0; }

.etiquette--rappel {
  background: var(--surface);
  border-color: var(--accent-secondaire);
  padding-left: calc(clamp(20px, 2.4vw, 30px) + 10px);
}
.etiquette--rappel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-secondaire);
}
.etiquette--rappel::after { border-color: #ECC6D4; }

.coin-rappel {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--coupe);
  height: var(--coupe);
  background: var(--accent-secondaire);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.etiquette--pleine {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
}
.etiquette--pleine h3 { color: var(--accent-texte); }
.etiquette--pleine p { color: #E4DBF4; }
.etiquette--pleine::after { border-color: rgba(255, 247, 250, 0.35); }

/* Champ recopie du flacon */
.lot {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  background: var(--fond-alt);
  color: var(--accent);
  padding: 2px 8px;
  white-space: nowrap;
}
.rayon--encre .lot { background: #332C52; color: #D7C7F2; }

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

.bouton {
  display: inline-block;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  padding: 14px 26px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: transform 180ms var(--courbe), background-color 180ms var(--courbe),
              color 180ms var(--courbe), box-shadow 180ms var(--courbe);
  position: relative;
}

.bouton--encre {
  background: var(--accent);
  color: var(--accent-texte);
}
.bouton--encre:hover,
.bouton--encre:focus-visible {
  color: var(--accent-texte);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--accent-secondaire);
}

.bouton--filet {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.bouton--filet:hover,
.bouton--filet:focus-visible {
  background: var(--fond-alt);
  color: var(--accent-secondaire);
  box-shadow: inset 0 0 0 1.5px var(--accent-secondaire);
  transform: translate(-2px, -2px);
}

.bouton--clair {
  background: var(--fond);
  color: var(--accent);
}
.bouton--clair:hover { background: var(--surface); color: var(--accent-secondaire); }

.duo-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 22px;
}

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

.registre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 72px;
  background: rgba(251, 242, 244, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: height 180ms var(--courbe), border-color 180ms var(--courbe);
}
.registre[data-defile="oui"] {
  height: 60px;
  border-bottom-color: var(--accent);
}

.registre-rang {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100% - (2 * var(--gouttiere)), var(--laize));
  margin-inline: auto;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--accent);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.logotype svg { flex: 0 0 auto; }

.ancres {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ancres li { margin: 0; }
.ancre {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--texte);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
}
.ancre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right 200ms var(--courbe);
}
.ancre:hover::after,
.ancre[aria-current="true"]::after { right: 0; }

.trois-filets {
  display: none;
  width: 46px;
  height: 40px;
  background: transparent;
  border: 1.5px solid var(--accent);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.trois-filets span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--accent);
  position: relative;
}
.trois-filets span::before,
.trois-filets span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--accent);
}
.trois-filets span::before { top: -6px; }
.trois-filets span::after { top: 6px; }

.panneau {
  position: fixed;
  inset: 0 0 auto 0;
  background: var(--fond);
  border-bottom: 1px solid var(--accent);
  padding: 88px var(--gouttiere) 30px;
  transform: translateY(-102%);
  transition: transform 240ms var(--courbe);
  z-index: 99;
  display: none;
}
.panneau[data-ouvert="oui"] { transform: translateY(0); }
.panneau ul { list-style: none; margin: 0 0 20px; padding: 0; }
.panneau li { margin: 0; border-bottom: 1px solid var(--bordure); }
.panneau a {
  display: block;
  padding: 14px 2px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--texte);
  text-decoration: none;
}
.panneau a:hover { color: var(--accent-secondaire); }

/* --------------------------------------------------------------------------
   7. Motif signature: tampons encreurs superposes
   -------------------------------------------------------------------------- */

.tampon {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.tampon--hero { top: -40px; right: -70px; width: min(520px, 62vw); }
.tampon--marches { top: 10px; left: -90px; width: min(460px, 55vw); opacity: 0.9; }
.tampon--chiffres { bottom: -80px; right: -40px; width: min(430px, 50vw); mix-blend-mode: screen; }
.tampon--contact { top: -60px; left: -80px; width: min(400px, 46vw); }

.rayon > .plateau { position: relative; z-index: 1; }

/* Version reduite du meme motif, repetee en fond des blocs de citation */
.parole {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%234A3A8C' stroke-width='7'%3E%3Ccircle cx='74' cy='72' r='50' stroke-dasharray='11 5 23 8'/%3E%3Ccircle cx='142' cy='118' r='62' stroke-dasharray='17 7 6 11'/%3E%3C/g%3E%3Ccircle cx='104' cy='150' r='36' fill='%23B03A62'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -46px bottom -52px;
  background-size: 220px 220px;
}

/* --------------------------------------------------------------------------
   8. Grille en briques decalees d une demi largeur
   -------------------------------------------------------------------------- */

.briques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: repeat(2, 1fr);
  --demi: calc((100% - clamp(20px, 2.4vw, 30px)) / 4);
  width: calc(100% - 60px);
}

.brique {
  position: relative;
  margin: 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}

/* Le plein decale derriere chaque brique, a la maniere d une etiquette collee */
.brique::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fond-alt);
  clip-path: var(--forme-etiquette);
  transform: translate(var(--decalage-plein), var(--decalage-plein));
  z-index: 0;
}
.rayon--dense .brique::before { background: #E9D6DE; }
.rayon--encre .brique::before { background: #332C52; }
.brique > * { position: relative; z-index: 1; }

/* Rangees paires poussees d une demi brique vers la droite,
   par transformation pour que toutes les briques gardent la meme largeur */
.briques--six .brique:nth-child(4n+3),
.briques--six .brique:nth-child(4n+4) { --tx: 60px; --ty: -14px; }
.briques--six .brique:nth-child(4n+5),
.briques--six .brique:nth-child(4n+6) { --ty: 12px; }

/* Trois briques larges puis deux briques etroites, pour les avantages */
.gains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: repeat(6, 1fr);
  width: calc(100% - 60px);
}
.gains > li {
  grid-column: span 2;
  margin: 0;
  position: relative;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}
.gains > li:nth-child(4) { grid-column: span 3; --tx: 60px; }
.gains > li:nth-child(5) { grid-column: span 3; --tx: 60px; --ty: -14px; }
.gains > li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fond-alt);
  clip-path: var(--forme-etiquette);
  transform: translate(var(--decalage-plein), var(--decalage-plein));
  z-index: 0;
}
.rayon--dense .gains > li::before { background: #E9D6DE; }
.gains > li > * { position: relative; z-index: 1; }

.gain-valeur {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--accent-secondaire);
  display: block;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.cabine-haute {
  padding-top: calc(72px + var(--respire));
  padding-bottom: var(--respire);
  position: relative;
  overflow: hidden;
}

.cabine-rang {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}

.cabine-haute h1 { margin-bottom: 0.35em; }

.accroche-secondaire {
  font-size: 1.1875rem;
  color: var(--texte-doux);
  max-width: 56ch;
}

.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--texte-doux);
}
.reassurance b {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--accent);
  margin-right: 6px;
}

/* Cadre photographique tamponne */
.cadre-photo {
  position: relative;
  isolation: isolate;
}
.cadre-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fond-alt);
  transform: translate(var(--decalage-plein), var(--decalage-plein));
  clip-path: var(--forme-etiquette);
  z-index: -1;
}
.cadre-photo img {
  clip-path: var(--forme-etiquette);
  filter: saturate(0.86);
  width: 100%;
}
.cadre-photo::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid var(--accent);
  opacity: 0.55;
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.voile-prune {
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0.12;
  mix-blend-mode: multiply;
  clip-path: var(--forme-etiquette);
  pointer-events: none;
}
.legende-photo {
  font-family: var(--grave);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 12px 0 0;
}

/* Empreinte de tampon qui deborde d un angle de la photo */
.cadre-photo .empreinte {
  position: absolute;
  width: 190px;
  height: 190px;
  right: -54px;
  bottom: -58px;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   10. Probleme
   -------------------------------------------------------------------------- */

.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.pile-alertes { display: grid; gap: 18px; }
.pile-alertes > li { margin: 0; list-style: none; }
.pile-alertes { list-style: none; margin: 0; padding: 0; }
.pile-alertes > li:nth-child(even) { margin-left: 42px; }

.entete-alerte {
  font-family: var(--grave);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-secondaire);
  display: block;
  margin-bottom: 8px;
}

.addition {
  border-top: 2px solid var(--accent);
  margin-top: 26px;
  padding-top: 16px;
  font-family: var(--grave);
  font-size: 1.0625rem;
  color: var(--texte);
}

/* --------------------------------------------------------------------------
   11. Solution, marches numerotees
   -------------------------------------------------------------------------- */

.marches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 2.6vw, 32px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc(100% - 54px);
}
.marches > li {
  position: relative;
  margin: 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}
.marches > li:nth-child(3),
.marches > li:nth-child(4) { --tx: 54px; --ty: -10px; }
.marches > li:nth-child(5) { --ty: 10px; }

.marche-numero {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
  opacity: 0.85;
}
.marche-titre { margin-bottom: 0.4em; }

.marche-fiche {
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  padding: clamp(20px, 2.4vw, 28px);
  height: 100%;
  position: relative;
}
.marche-fiche::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid var(--bordure);
  opacity: 0.7;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   12. Preuve sociale, temoignages en escalier
   -------------------------------------------------------------------------- */

.escalier {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.escalier > li {
  margin: 0;
  position: relative;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}
.escalier > li:nth-child(2) { --ty: 34px; }
.escalier > li:nth-child(3) { --ty: 68px; }
.escalier { margin-bottom: 68px; }

.parole {
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  padding: clamp(22px, 2.4vw, 30px);
  margin: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.parole blockquote {
  margin: 0 0 18px;
  font-family: var(--grave);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
}
.parole blockquote p { max-width: none; }
.parole figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
  font-size: 0.875rem;
  color: var(--texte-doux);
}
.parole figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--texte);
  letter-spacing: -0.01em;
}

.bandeau-chiffres {
  margin: clamp(48px, 6vw, 78px) 0 0;
  padding: clamp(26px, 3vw, 40px) clamp(20px, 3vw, 40px);
  background: var(--texte);
  color: var(--fond);
  clip-path: var(--forme-etiquette);
  position: relative;
  overflow: hidden;
}

.chiffres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.chiffres > li { margin: 0; position: relative; z-index: 1; }
.chiffre-valeur {
  font-family: var(--grave);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  display: block;
  color: var(--fond);
}
.chiffre-legende {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
  color: #C9BCE2;
}

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

.grille-tarifs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  align-items: start;
}
.grille-tarifs > li { margin: 0; position: relative; }
.grille-tarifs > li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fond-alt);
  clip-path: var(--forme-etiquette);
  transform: translate(var(--decalage-plein), var(--decalage-plein));
  z-index: 0;
}
.grille-tarifs > li > * { position: relative; z-index: 1; }
.grille-tarifs > li.formule-avancee { margin-top: -24px; }

.formule {
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  padding: clamp(22px, 2.4vw, 30px);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 200ms var(--courbe);
}
.formule:hover { transform: scale(1.01); }
.formule-avancee .formule {
  border: 2px solid var(--accent);
  box-shadow: inset 0 0 0 1px var(--surface);
}

.fanion {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-texte);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 14px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.formule-nom { margin-bottom: 6px; }
.formule-cible {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  min-height: 3.2em;
}
.formule-prix {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin: 10px 0 2px;
}
.formule-prix small {
  font-family: var(--courant);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texte-doux);
  display: block;
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.formule-inclus {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
  font-size: 0.9375rem;
  flex: 1 1 auto;
}
.formule-inclus li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.55;
}
.formule-inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  background: var(--accent-secondaire);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.note-tarifs {
  margin-top: 26px;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

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

.accordeon { display: grid; gap: 12px; max-width: 900px; }

.question-bloc {
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
}

.question {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--texte);
  padding: 18px 54px 18px 22px;
  cursor: pointer;
  position: relative;
  line-height: 1.35;
}
.question:hover { color: var(--accent); }
.question::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 200ms var(--courbe);
}
.question[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -3px; }

.reponse {
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms var(--courbe), padding 260ms var(--courbe);
}
.reponse[data-ouvert="oui"] { padding: 0 22px 20px; max-height: 1000px; }
.reponse p { font-size: 0.9375rem; margin-bottom: 0.8em; }
.reponse p:last-child { margin-bottom: 0; }

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

.rang-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.fiche-formulaire {
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  padding: clamp(22px, 3vw, 36px);
  position: relative;
}
.fiche-formulaire::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid var(--bordure);
  opacity: 0.7;
  pointer-events: none;
}

.champs { display: grid; gap: 16px; position: relative; z-index: 1; }
.champs-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label,
.champ-libelle {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 0;
  padding: 11px 13px;
  width: 100%;
  transition: border-color 160ms var(--courbe), background-color 160ms var(--courbe);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.champ textarea { resize: vertical; min-height: 120px; }

.champ-consentement {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.875rem;
  color: var(--texte-doux);
  text-transform: none;
  letter-spacing: 0;
}
.champ-consentement input { margin-top: 4px; accent-color: var(--accent); width: 18px; height: 18px; }

.apres-formulaire {
  margin-top: 18px;
  font-size: 0.875rem;
  color: var(--texte-doux);
  position: relative;
  z-index: 1;
}

.liste-nue { list-style: none; margin: 0 0 1.1em; padding: 0; }
.liste-nue li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.liste-nue li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--accent);
}

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

.pied {
  background: var(--texte);
  color: #CFC4E4;
  padding-block: clamp(46px, 6vw, 72px) 0;
  margin-top: var(--respire);
}
.pied a { color: #E7DEF6; text-decoration: none; }
.pied a:hover { color: #FFFFFF; text-decoration: underline; }

.pied-rang {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 3vw, 44px);
}
.pied h2, .pied h3 {
  font-family: var(--titre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.pied ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.pied li { margin-bottom: 9px; }
.pied p { font-size: 0.9375rem; color: #B9ACD3; }

.pied .logotype { color: #FFFFFF; margin-bottom: 14px; }

.reseaux { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.875rem; margin-top: 14px; }

.pied-bas {
  margin-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid #372F55;
  padding-block: 20px 26px;
  font-size: 0.8125rem;
  color: #A99CC4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
}

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

.page-interieure { padding-top: calc(72px + clamp(38px, 5vw, 64px)); }

.fil {
  font-size: 0.8125rem;
  color: var(--texte-doux);
  margin-bottom: 18px;
}
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.fil li::after { content: "/"; margin-left: 8px; color: var(--bordure); }
.fil li:last-child::after { content: ""; }

.prose { max-width: 74ch; }
.prose h2 {
  margin-top: 2.1em;
  padding-top: 0.7em;
  border-top: 1px solid var(--bordure);
  font-size: 1.55rem;
}
.prose h3 { margin-top: 1.7em; font-size: 1.15rem; }
.prose ul li, .prose ol li { margin-bottom: 0.5em; }
.prose dl { margin: 0 0 1.2em; }
.prose dt { font-weight: 600; margin-top: 0.8em; }
.prose dd { margin: 0 0 0.2em; color: var(--texte-doux); }

.encart {
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  padding: clamp(20px, 2.4vw, 28px);
  margin: 26px 0;
  position: relative;
}
.encart::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid var(--bordure);
  opacity: 0.7;
  pointer-events: none;
}
.encart p:last-child, .encart ul:last-child { margin-bottom: 0; }

.portrait-auteur {
  float: right;
  margin: 0 0 22px 28px;
  width: 220px;
  position: relative;
}
.portrait-auteur img { clip-path: var(--forme-etiquette); filter: saturate(0.9); }

.mesure-centre {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.mesure-centre p { margin-inline: auto; }
.mesure-centre .duo-boutons { justify-content: center; }

.plan-liste { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.plan-liste > li { margin: 0; }
.plan-liste h3 { margin-bottom: 4px; }
.plan-liste p { margin-bottom: 0; font-size: 0.9375rem; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   18. Signature d animation: agrandissement bref a l apparition
   -------------------------------------------------------------------------- */

[data-pose] {
  opacity: 0;
  will-change: transform, opacity;
}

/* Sans script actif, rien ne doit rester invisible */
@media (scripting: none) {
  [data-pose] { opacity: 1; }
}

@keyframes tampon-pose {
  0%   { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0.94); }
  65%  { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.015); }
  100% { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1); }
}

[data-pose="posee"] {
  animation: tampon-pose 340ms var(--courbe) both;
  animation-delay: var(--retard, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @keyframes tampon-pose {
    0% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, 0px)); }
    100% { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)); }
  }
  [data-pose="posee"] { animation-duration: 150ms; }
  .bouton:hover, .formule:hover { transform: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   19. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .pied-rang { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .cabine-rang { grid-template-columns: 1fr; }
  .rang-contact { grid-template-columns: 1fr; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .escalier { grid-template-columns: 1fr 1fr; margin-bottom: 34px; }
  .escalier > li:nth-child(3) { --ty: 0px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-tarifs { grid-template-columns: 1fr; }
  .grille-tarifs > li.formule-avancee { margin-top: 0; }
  .gains { grid-template-columns: repeat(4, 1fr); width: 100%; }
  .gains > li { grid-column: span 2; }
  .gains > li:nth-child(4),
  .gains > li:nth-child(5) { grid-column: span 2; --tx: 0px; --ty: 0px; }
}

@media (max-width: 900px) {
  .ancres { display: none; }
  .registre .bouton--encre { display: none; }
  .trois-filets { display: inline-flex; }
  .panneau { display: block; }
}

@media (max-width: 720px) {
  :root { --coupe: 12px; }
  .briques { grid-template-columns: 1fr; width: 100%; }
  .briques--six .brique { --tx: 0px; --ty: 0px; }
  .marches { grid-template-columns: 1fr; width: 100%; }
  .marches > li { --tx: 0px; --ty: 0px; }
  .escalier { grid-template-columns: 1fr; margin-bottom: 0; }
  .escalier > li:nth-child(2) { --ty: 0px; }
  .gains { grid-template-columns: 1fr; width: 100%; }
  .gains > li { grid-column: span 1 !important; --tx: 0px; --ty: 0px; }
  .pile-alertes > li:nth-child(even) { margin-left: 0; }
  .champs-paire { grid-template-columns: 1fr; }
  .pied-rang { grid-template-columns: 1fr; }
  .portrait-auteur { float: none; width: 100%; max-width: 300px; margin: 0 0 24px; }
  .chiffres { grid-template-columns: 1fr; }
  .tampon--hero { right: -110px; top: -20px; }
}

/* ==========================================================================
   20. MAGAZINE, Le Cahier de Cabine
   Section ajoutee en fin de feuille, aucune regle precedente n est modifiee.
   Meme vocabulaire que le reste du site: le magazine est un classeur de cabine,
   chaque article une fiche perforee, chaque carte une etiquette collee.
   On reprend telles quelles la forme signature (coin superieur droit coupe
   sur 14 pixels, filet interieur decale de 4 pixels, decalage plein derriere
   la carte), la grille en briques decalees d une demi largeur, le motif de
   tampons encreurs superposes et l agrandissement bref a l apparition.
     cahier          page d index du magazine
     sommaire        grille des neuf fiches d article
     fiche-article   carte d article
     article-cahier  page d un article
     exergue         chapeau en tete d article
     corps-article   corps redactionnel, balises nues sans aucune classe
     appel-article   appel a l action de fin d article
     encart-auteur   signature de l auteur
     lire-aussi      trois articles proches, en fin de page
     suite           carte du bloc A lire aussi
     derniers        mise en avant du magazine sur la page d accueil
   ========================================================================== */

/* --------------------------------------------------------------------------
   20.1 Page d index du magazine
   -------------------------------------------------------------------------- */

.cahier { position: relative; }

.cahier-tete {
  max-width: 760px;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.cahier-tete h1 { margin-bottom: 0.3em; }

.cahier-chapeau {
  font-size: 1.125rem;
  color: var(--texte-doux);
  max-width: 64ch;
  margin-bottom: 0;
}

.cahier-compte {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 2px solid var(--accent);
  padding-top: 14px;
  margin: 26px 0 0;
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   20.2 Sommaire, grille en briques decalees d une demi largeur
   -------------------------------------------------------------------------- */

.sommaire {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: calc(100% - 60px);
}

.sommaire > li {
  margin: 0;
  position: relative;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}

/* Le plein decale derriere chaque fiche, comme une etiquette recollee de travers */
.sommaire > li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fond-alt);
  clip-path: var(--forme-etiquette);
  transform: translate(var(--decalage-plein), var(--decalage-plein));
  z-index: 0;
}
.sommaire > li > * { position: relative; z-index: 1; }

/* Rangee du milieu poussee d une demi fiche vers la droite, rangee basse
   redescendue: le quinconce du classeur, sans changer la largeur des fiches */
.sommaire > li:nth-child(n+4):nth-child(-n+6) { --tx: 60px; --ty: -14px; }
.sommaire > li:nth-child(n+7) { --ty: 12px; }

/* --------------------------------------------------------------------------
   20.3 Carte d article
   -------------------------------------------------------------------------- */

.fiche-article {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  transition: transform 200ms var(--courbe);
}
.fiche-article::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid var(--bordure);
  opacity: 0.75;
  pointer-events: none;
  z-index: 3;
}
.fiche-article:hover { transform: scale(1.01); }
.fiche-article:hover::after { border-color: var(--accent-secondaire); opacity: 0.6; }

.fiche-article-vue {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--bordure);
}
.fiche-article-vue img {
  width: 100%;
  filter: saturate(0.86);
}

.fiche-article-texte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(18px, 2.1vw, 26px);
}

.fiche-article-angle {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-secondaire);
  display: block;
  margin-bottom: 10px;
}

.fiche-article-titre {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 12px;
}
.fiche-article-titre a { color: var(--texte); text-decoration: none; }
.fiche-article-titre a:hover,
.fiche-article-titre a:focus-visible { color: var(--accent-secondaire); }

.fiche-article-extrait {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin: 0 0 18px;
  max-width: none;
}

.fiche-article-pied {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  max-width: none;
}
.fiche-article-duree { color: var(--accent); }

/* --------------------------------------------------------------------------
   20.4 Mise en avant du magazine sur la page d accueil
   -------------------------------------------------------------------------- */

.derniers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: calc(100% - 60px);
}
.derniers > li {
  margin: 0;
  position: relative;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}
.derniers > li:nth-child(2) { --ty: 16px; }
.derniers > li:nth-child(3) { --ty: 32px; }
.derniers > li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fond-alt);
  clip-path: var(--forme-etiquette);
  transform: translate(var(--decalage-plein), var(--decalage-plein));
  z-index: 0;
}
.rayon--dense .derniers > li::before { background: #E9D6DE; }
.derniers > li > * { position: relative; z-index: 1; }

.derniers-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin: clamp(48px, 5vw, 70px) 0 0;
}
.derniers-note {
  font-family: var(--grave);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0;
  max-width: 48ch;
}

/* --------------------------------------------------------------------------
   20.5 Entete d article: fil d Ariane, angle, dates et temps de lecture
   -------------------------------------------------------------------------- */

.article-cahier { position: relative; }

.article-cahier-tete { max-width: 780px; margin-bottom: 26px; }
.article-cahier-tete h1 { margin-bottom: 0.4em; }

.article-cahier-reperes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 12px 0;
  margin: 0;
  max-width: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
}
.article-cahier-valeur {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Chapeau en exergue, traite comme l etiquette collee en tete de la fiche */
.exergue {
  position: relative;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 26px) calc(clamp(20px, 2.4vw, 30px) + 10px);
  margin: 30px 0 36px;
  max-width: 68ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--texte);
}
.exergue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}
.exergue::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid var(--bordure);
  opacity: 0.8;
  pointer-events: none;
}

.article-cahier-photo { margin: 0 0 clamp(30px, 3.4vw, 46px); max-width: 900px; }

/* --------------------------------------------------------------------------
   20.6 Corps redactionnel
   Le corps est du HTML semantique nu: aucune balise n y porte de classe.
   Tout est donc mis en forme ici, en descendance de .corps-article, avec la
   forme signature du projet. Un article ne peut jamais paraitre non style.
   -------------------------------------------------------------------------- */

.corps-article {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texte);
}

.corps-article h2 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.55rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--texte);
  border-top: 1px solid var(--bordure);
  margin: 2.4em 0 0.6em;
  padding-top: 0.85em;
  position: relative;
}
.corps-article h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 64px;
  height: 3px;
  background: var(--accent);
}
.corps-article > h2:first-child { margin-top: 0; }

.corps-article h3 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--accent);
  margin: 1.9em 0 0.5em;
  padding-left: 20px;
  position: relative;
}
.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 9px;
  background: var(--accent-secondaire);
}

.corps-article p { margin: 0 0 1.15em; max-width: none; }
.corps-article strong { font-weight: 600; color: var(--texte); }
.corps-article em { font-style: italic; color: var(--texte-doux); }

.corps-article a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover,
.corps-article a:focus-visible { color: var(--accent-secondaire); }

.corps-article ul,
.corps-article ol {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  counter-reset: point-corps;
}
.corps-article li {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 10px 28px;
  border-bottom: 1px solid var(--bordure);
  max-width: none;
}
.corps-article li:last-child { margin-bottom: 0; }
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--accent-secondaire);
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 0 100%);
}
.corps-article ol > li {
  counter-increment: point-corps;
  padding-left: 40px;
}
.corps-article ol > li::before {
  content: counter(point-corps, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.02em;
  font-family: var(--grave);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.corps-article li > ul,
.corps-article li > ol { margin: 12px 0 0; }
.corps-article li > ul > li:last-child,
.corps-article li > ol > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Tableau recapitulatif, lu comme une page du registre */
.corps-article table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  margin: 0 0 1.6em;
  font-size: 0.9375rem;
}
.corps-article thead th {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  vertical-align: bottom;
  background: var(--fond-alt);
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
}
.corps-article tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--texte);
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
}
.corps-article td {
  vertical-align: top;
  color: var(--texte-doux);
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
}
.corps-article tbody tr:last-child th,
.corps-article tbody tr:last-child td { border-bottom: 0; }

/* Encadre, traite comme le bloc d alerte pose sur un flacon retire */
.corps-article aside {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--accent-secondaire);
  clip-path: var(--forme-etiquette);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px) calc(clamp(20px, 2.4vw, 28px) + 10px);
  margin: 34px 0;
}
.corps-article aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-secondaire);
}
.corps-article aside::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--coupe);
  height: var(--coupe);
  background: var(--accent-secondaire);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.corps-article aside p { font-size: 1rem; }
.corps-article aside p:last-child,
.corps-article aside ul:last-child,
.corps-article aside ol:last-child { margin-bottom: 0; }

/* Citation, sur le motif de tampons encreurs pose en filigrane */
.corps-article blockquote {
  position: relative;
  margin: 34px 0;
  padding: 8px 0 8px 26px;
  font-family: var(--grave);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--texte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%234A3A8C' stroke-width='7' opacity='0.06'%3E%3Ccircle cx='74' cy='72' r='50' stroke-dasharray='11 5 23 8'/%3E%3Ccircle cx='142' cy='118' r='62' stroke-dasharray='17 7 6 11'/%3E%3C/g%3E%3Ccircle cx='104' cy='150' r='36' fill='%23B03A62' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -30px center;
  background-size: 200px 200px;
}
.corps-article blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}
.corps-article blockquote p { margin-bottom: 0.5em; }
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure {
  position: relative;
  margin: 34px 0;
}
.corps-article figure img {
  width: 100%;
  clip-path: var(--forme-etiquette);
  filter: saturate(0.86);
}
.corps-article figcaption {
  font-family: var(--grave);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 12px;
}

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

.appel-article {
  position: relative;
  background: var(--accent);
  color: var(--accent-texte);
  clip-path: var(--forme-etiquette);
  padding: clamp(24px, 3vw, 36px);
  margin: clamp(38px, 4vw, 54px) 0 0;
  max-width: 68ch;
}
.appel-article::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid rgba(255, 247, 250, 0.35);
  pointer-events: none;
}
.appel-article-titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--accent-texte);
  margin: 0 0 12px;
  max-width: none;
  position: relative;
  z-index: 1;
}
.appel-article p {
  color: #E4DBF4;
  font-size: 1rem;
  max-width: none;
  position: relative;
  z-index: 1;
}
.appel-article .bouton { margin-top: 6px; }

/* --------------------------------------------------------------------------
   20.8 Encart auteur
   -------------------------------------------------------------------------- */

.encart-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 30px 0;
  margin: clamp(38px, 4vw, 54px) 0 0;
  max-width: 72ch;
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  filter: saturate(0.86);
}
.encart-auteur-role {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-secondaire);
  display: block;
  margin-bottom: 8px;
}
.encart-auteur-nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 0 0 10px;
  max-width: none;
}
.encart-auteur p { font-size: 0.9375rem; color: var(--texte-doux); }
.encart-auteur p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   20.9 Bloc A lire aussi
   -------------------------------------------------------------------------- */

.lire-aussi { margin: clamp(44px, 5vw, 66px) 0 0; }
.lire-aussi-titre {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 2px solid var(--accent);
  padding-top: 14px;
  margin: 0 0 24px;
  max-width: none;
}
.lire-aussi-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}

.suite {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  clip-path: var(--forme-etiquette);
  transition: transform 200ms var(--courbe);
}
.suite::after {
  content: "";
  position: absolute;
  inset: var(--filet);
  border: 1px solid var(--bordure);
  opacity: 0.75;
  pointer-events: none;
  z-index: 3;
}
.suite:hover { transform: scale(1.01); }
.suite:hover::after { border-color: var(--accent-secondaire); opacity: 0.6; }

.suite-vue {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--bordure);
}
.suite-vue img { width: 100%; filter: saturate(0.86); }

.suite-texte { padding: 16px 20px 20px; }
.suite-titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
  max-width: none;
}
.suite-titre a { color: var(--texte); text-decoration: none; }
.suite-titre a:hover,
.suite-titre a:focus-visible { color: var(--accent-secondaire); }
.suite-accroche {
  font-size: 0.875rem;
  color: var(--texte-doux);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   20.10 Liste datee des parutions, employee sur la page auteur
   -------------------------------------------------------------------------- */

.parutions-datees { list-style: none; margin: 0; padding: 0; }
.parutions-datees > li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 22px;
  align-items: baseline;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--bordure);
}
.parutions-datees > li:first-child { border-top: 1px solid var(--bordure); }
.parutions-datees-date {
  font-family: var(--grave);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.parutions-datees-titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.parutions-datees-titre a { color: var(--texte); text-decoration: none; }
.parutions-datees-titre a:hover,
.parutions-datees-titre a:focus-visible { color: var(--accent-secondaire); }
.parutions-datees-angle {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   20.11 Intitule de colonne du pied de page dans les pages du magazine.
   Meme rendu que .pied h2, sans balise de titre: dans un article, les h2 et
   les h3 appartiennent exclusivement au corps redactionnel.
   -------------------------------------------------------------------------- */

.pied-titre {
  font-family: var(--titre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 16px;
  max-width: none;
}

/* --------------------------------------------------------------------------
   20.12 Adaptations du magazine
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .sommaire,
  .derniers { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 40px); }
  .sommaire > li:nth-child(n+4):nth-child(-n+6),
  .sommaire > li:nth-child(n+7) { --tx: 0px; --ty: 0px; }
  .sommaire > li:nth-child(even) { --tx: 40px; --ty: -12px; }
  .derniers > li:nth-child(2),
  .derniers > li:nth-child(3) { --ty: 0px; }
  .derniers > li:nth-child(even) { --tx: 40px; --ty: -12px; }
  .lire-aussi-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .sommaire,
  .derniers { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .sommaire > li,
  .derniers > li,
  .sommaire > li:nth-child(even),
  .derniers > li:nth-child(even) { --tx: 0px; --ty: 0px; }
  .lire-aussi-grille { grid-template-columns: minmax(0, 1fr); }
  .encart-auteur { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .parutions-datees > li { grid-template-columns: minmax(0, 1fr); }
  .corps-article { font-size: 1rem; }
  .corps-article blockquote { font-size: 1.0625rem; background-image: none; }
  .exergue { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche-article,
  .suite { transition: none; }
  .fiche-article:hover,
  .suite:hover { transform: none; }
}