/* =========================================================================
   Revendic, feuille de style unique
   Registre de cave : fond calcaire clair, casiers a compartiments inegaux,
   reglettes d etiquette, sachet de graines botaniques en filigrane.
   ========================================================================= */

:root {
  --fond: #FAF4F8;
  --fond-alt: #F1E7EF;
  --surface: #FEF9FC;
  --surface-haute: #F6EBF4;
  --texte: #2A1233;
  --texte-doux: #68466F;
  --accent: #5B2A8C;
  --accent-fonce: #431E6A;
  --accent-texte: #FBF4FB;
  --accent-secondaire: #A83A6B;
  --bordure: #DDC6DB;

  /* ombre courte et pale : sur fond clair, une ombre noire dense alourdit */
  --ombre-casier: drop-shadow(0 1px 2px rgba(42, 18, 51, 0.07));

  --titre: "Space Grotesk", "Trebuchet MS", sans-serif;
  --courant: "Nunito Sans", "Segoe UI", sans-serif;
  --gravure: "Rufina", Georgia, serif;

  --casier-biseau: 14px;
  --reglette-h: 26px;
  --fronton-h: 68px;
  --cadre: 1180px;
  --gouttiere: 22px;
}

/* ---------- reserve des symboles SVG ---------- */

.sprite-cave {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- socle de remise a zero ---------- */

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

html {
  color-scheme: light;
  scrollbar-color: var(--accent) var(--fond-alt);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--fronton-h) + 24px);
  text-size-adjust: 100%;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  text-transform: none;
}

h1 { font-size: 3.25rem; font-weight: 600; line-height: 1.08; }
h2 { font-size: 2.05rem; font-weight: 600; }
h3 { font-size: 1.3rem; font-weight: 500; }
h4 { font-size: 1.05rem; font-weight: 500; }

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-fonce); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.1em; }
li { margin-bottom: 0.45em; }

strong { font-weight: 700; color: var(--texte); }

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

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

/* ---------- reference reglementaire ---------- */

.visa {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--texte);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  white-space: nowrap;
}

.chiffre-tab {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------- lien d evitement ---------- */

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 200;
}
.saut-contenu:focus {
  left: 12px;
  top: 12px;
}

/* ---------- cadre general ---------- */

.cadre {
  width: min(100% - 40px, var(--cadre));
  margin-inline: auto;
}

.cadre-etroit {
  width: min(100% - 40px, 860px);
  margin-inline: auto;
}

/* =========================================================================
   Fronton : en tete fixe et jauge de lecture
   ========================================================================= */

.fronton {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--fronton-h);
  background: rgba(250, 244, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--accent);
  z-index: 100;
}

.fronton__interieur {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.fronton__jauge {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondaire));
}

/* logotype : marque du casier a trois compartiments */

.enseigne {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--texte);
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
}
.enseigne svg { flex: none; color: var(--accent); }
.enseigne:hover { color: var(--accent-fonce); }

/* navigation d ancres */

.rang-ancres {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rang-ancres a {
  color: var(--texte-doux);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.rang-ancres a:hover,
.rang-ancres a:focus-visible { color: var(--texte); border-bottom-color: var(--accent); }

/* bouton d ouverture du panneau lateral */

.loquet {
  display: none;
  background: none;
  border: 1px solid var(--bordure);
  color: var(--texte);
  width: 44px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.loquet span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--texte);
  position: relative;
}
.loquet span::before,
.loquet span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1px;
  background: var(--texte);
}
.loquet span::before { top: -6px; }
.loquet span::after { top: 6px; }

/* =========================================================================
   Panneau lateral mobile : chaque lien dans son compartiment inegal
   ========================================================================= */

.voile {
  position: fixed;
  inset: 0;
  background: rgba(42, 18, 51, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 110;
}
.voile.ouvert { opacity: 1; visibility: visible; }

.panneau {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(340px, 86vw);
  background: var(--fond-alt);
  border-left: 1px solid var(--accent);
  transform: translateX(102%);
  transition: transform 0.28s ease;
  z-index: 120;
  padding: 22px 22px 40px;
  overflow-y: auto;
}
.panneau.ouvert { transform: translateX(0); }

.panneau__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.panneau__fermer {
  background: none;
  border: 1px solid var(--bordure);
  color: var(--texte);
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.panneau__fermer:hover { border-color: var(--accent); }

.panneau ul { list-style: none; margin: 0 0 24px; padding: 0; }
.panneau li { margin: 0 0 8px; }
.panneau li a {
  display: block;
  background: var(--surface);
  border-left: 2px solid var(--bordure);
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
  padding: 14px 16px;
}
.panneau li:nth-child(2n) a { padding-block: 20px; }
.panneau li:nth-child(3n) a { padding-block: 11px; }
.panneau li a:hover { border-left-color: var(--accent); background: var(--surface-haute); }

/* =========================================================================
   Boutons
   ========================================================================= */

.bouton-plein,
.bouton-filet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background-color 0.12s linear, color 0.12s linear;
}

.bouton-plein {
  background: var(--accent);
  color: var(--accent-texte);
}
.bouton-plein::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid transparent;
  pointer-events: none;
}
.bouton-plein:hover { background: var(--accent-fonce); color: var(--accent-texte); }
.bouton-plein:hover::after { border-color: rgba(251, 244, 251, 0.55); }

.bouton-filet {
  background: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.bouton-filet:hover { box-shadow: inset 0 0 0 2px var(--accent); color: var(--texte); }
.bouton-filet:hover .curseur-bouton { opacity: 1; }

.curseur-bouton {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 8px;
  background: var(--accent);
  opacity: 0;
  transform: translateY(0.12em);
}

.bouton-plein--large,
.bouton-filet--large { width: 100%; }

/* =========================================================================
   Reglette d etiquette : signature de toutes les cartes
   ========================================================================= */

.casier {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  filter: var(--ombre-casier);
  padding: 0 24px 24px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--casier-biseau)),
    calc(100% - var(--casier-biseau)) 100%,
    0 100%
  );
}

.casier::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: 8px;
  width: 26px;
  height: 1px;
  background: var(--bordure);
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
}

.casier--manquement { border-color: var(--accent-secondaire); }
.casier--manquement .reglette { border-bottom-color: var(--accent-secondaire); }
.casier--manquement::after { background: var(--accent-secondaire); box-shadow: 0 4px 0 -3px var(--accent-secondaire); }

.reglette {
  height: var(--reglette-h);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--accent);
  margin: 0 -24px 20px;
  padding: 0 24px;
}

.etiq {
  font-family: var(--gravure);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0;
}

.reglette .vignette-sachet { flex: none; margin-left: auto; }

/* surtitre de section, hors carte */

.surtitre {
  font-family: var(--gravure);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.surtitre::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

/* =========================================================================
   Curseur clignotant, signature d animation
   ========================================================================= */

.curseur {
  display: inline-block;
  width: 0.58em;
  height: 1em;
  background: var(--accent);
  vertical-align: -0.08em;
  margin-left: 0.14em;
  animation: battement 1.1s steps(1, end) infinite;
}

.curseur--surtitre {
  width: 0.5em;
  height: 0.9em;
  opacity: 0;
}
.surtitre.en-vue .curseur--surtitre {
  animation: battement 1.1s steps(1, end) 6;
  opacity: 1;
}

@keyframes battement {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* =========================================================================
   Sections, rythme vertical inegal
   ========================================================================= */

.chai {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}
.chai--alt { background: var(--fond-alt); }
.chai--serre { padding: 72px 0; }
.chai--ample { padding: 118px 0; }

.chai__titre { max-width: 22ch; }
.chai__chapeau { color: var(--texte-doux); max-width: 62ch; font-size: 1.09rem; }

.sachet-filigrane {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 420px;
  opacity: 0.10;
  pointer-events: none;
  color: var(--accent);
}
.sachet-filigrane--bas {
  top: auto;
  bottom: -70px;
  right: auto;
  left: -70px;
  width: 340px;
  opacity: 0.08;
}

/* =========================================================================
   Hero : casier texte de 7 colonnes, casier photo de 5, decales
   ========================================================================= */

.hero {
  padding-top: calc(var(--fronton-h) + 78px);
  padding-bottom: 88px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(91, 42, 140, 0.07), rgba(91, 42, 140, 0) 58%),
    var(--fond);
}

.hero__mur {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: start;
}

.hero__texte { grid-column: 1 / span 7; }
.hero__photo {
  grid-column: 8 / span 5;
  margin-top: 40px;
}

.hero h1 { margin-bottom: 22px; }
.hero h1 .mot-cle { color: var(--accent); }

.hero__sous {
  font-size: 1.16rem;
  color: var(--texte-doux);
  max-width: 54ch;
  margin-bottom: 26px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 28px;
}

.hero__gage {
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.hero__gage div { max-width: 210px; }
.hero__gage b {
  display: block;
  font-family: var(--gravure);
  font-size: 1.72rem;
  color: var(--accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero__gage span { font-size: 0.88rem; color: var(--texte-doux); }

/* compartiment photographique */

.compartiment-photo {
  position: relative;
  border: 1px solid var(--accent);
  background: var(--fond-alt);
  margin: 0;
}
.compartiment-photo img {
  width: 100%;
  filter: saturate(0.88) contrast(1.02) brightness(1.06);
}
.compartiment-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(91, 42, 140, 0.19), rgba(168, 58, 107, 0.12) 62%, rgba(91, 42, 140, 0.15));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.compartiment-photo__cartouche {
  border-top: 1px solid var(--accent);
  padding: 9px 14px;
  font-family: var(--gravure);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: var(--surface);
  position: relative;
  z-index: 2;
}
.compartiment-photo .sachet-coin {
  position: absolute;
  left: 10px;
  bottom: 58px;
  width: 84px;
  opacity: 0.12;
  z-index: 2;
  color: var(--accent-texte);
}

/* =========================================================================
   Bandeau de chiffres cles
   ========================================================================= */

.bandeau-registre {
  border-block: 1px solid var(--bordure);
  background: var(--fond-alt);
  padding: 34px 0;
}
.bandeau-registre__mur {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.bandeau-registre__mur > div {
  padding: 4px 20px;
  border-left: 1px solid var(--bordure);
}
.bandeau-registre__mur > div:first-child { border-left: 0; padding-left: 0; }
.grand-nombre {
  display: block;
  font-family: var(--gravure);
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.grand-nombre .curseur { height: 0.72em; width: 0.34em; }
.bandeau-registre p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--texte-doux);
  max-width: 30ch;
}

/* =========================================================================
   Probleme : trois compartiments de 5, 4 et 3 colonnes
   ========================================================================= */

.mur-constat {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 40px;
  align-items: start;
}
.mur-constat > *:nth-child(1) { grid-column: span 5; }
.mur-constat > *:nth-child(2) { grid-column: span 4; margin-top: 34px; }
.mur-constat > *:nth-child(3) { grid-column: span 3; margin-top: 68px; }

.casier p:last-child { margin-bottom: 0; }

.note-risque {
  margin-top: 44px;
  border-left: 2px solid var(--accent-secondaire);
  padding: 6px 0 6px 20px;
  color: var(--texte);
  font-size: 1.06rem;
  max-width: 74ch;
}

/* =========================================================================
   Solution : quatre casiers en escalier
   ========================================================================= */

.escalier {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px var(--gouttiere);
  margin-top: 44px;
}
.escalier .marche { grid-column: 1 / span 8; }
.escalier .marche:nth-child(2) { grid-column: 3 / span 8; }
.escalier .marche:nth-child(3) { grid-column: 5 / span 8; }
.escalier .marche:nth-child(4) { grid-column: 7 / span 6; }

.marche__tete {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.marche__rang {
  font-family: var(--gravure);
  font-size: 1.9rem;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.marche h3 { margin-bottom: 10px; }

/* =========================================================================
   Fonctionnalites : mur de casiers 6 6 / 4 4 4 / pleine largeur
   ========================================================================= */

.mur-fonctions {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 44px;
}
.mur-fonctions .casier:nth-child(1),
.mur-fonctions .casier:nth-child(2) { grid-column: span 6; }
.mur-fonctions .casier:nth-child(3),
.mur-fonctions .casier:nth-child(4),
.mur-fonctions .casier:nth-child(5) { grid-column: span 4; }
.mur-fonctions .casier:nth-child(4) { margin-top: 26px; }
.mur-fonctions .casier:nth-child(6) { grid-column: 1 / -1; }

.casier--tableau { padding-bottom: 30px; }

.table-revendic {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  margin-top: 6px;
}
.table-revendic caption {
  text-align: left;
  color: var(--texte-doux);
  font-size: 0.88rem;
  padding-bottom: 12px;
}
.table-revendic th,
.table-revendic td {
  border-bottom: 1px solid var(--bordure);
  padding: 11px 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-revendic th:first-child,
.table-revendic td:first-child { text-align: left; white-space: normal; }
.table-revendic thead th {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--texte-doux);
  border-bottom-color: var(--accent);
}
.table-revendic tbody td { color: var(--texte); }
.table-revendic .valeur-engage { color: var(--accent); font-weight: 700; }
.table-revendic .statut { font-weight: 700; font-size: 0.86rem; }
.table-revendic .statut--conforme { color: var(--texte-doux); }
.table-revendic .statut--verifier { color: var(--accent); }
.table-revendic .statut--manquement { color: var(--accent-secondaire); }

.defilement-lateral { overflow-x: auto; }

/* =========================================================================
   Avantages : un compartiment haut, deux compartiments bas
   ========================================================================= */

.mur-effets {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 44px;
}
.mur-effets .colonne-haute { grid-column: span 4; display: grid; gap: var(--gouttiere); align-content: start; }
.mur-effets .colonne-haute--decalee { margin-top: 42px; }

.effet b {
  display: block;
  font-family: var(--gravure);
  font-size: 1.62rem;
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.effet p { margin-bottom: 0; font-size: 0.98rem; color: var(--texte-doux); }
.effet h3 { font-size: 1.12rem; margin-bottom: 8px; }

.bloc-photo-large {
  grid-column: span 8;
  align-self: start;
}

.mur-effets--suite { margin-top: 26px; }

/* =========================================================================
   Preuve : citations en casiers
   ========================================================================= */

.mur-citations {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 44px;
}
.mur-citations > *:nth-child(1) { grid-column: span 7; }
.mur-citations > *:nth-child(2) { grid-column: span 5; margin-top: 30px; }
.mur-citations > *:nth-child(3) { grid-column: span 5; }
.mur-citations > *:nth-child(4) { grid-column: span 7; margin-top: 30px; }

.citation blockquote {
  margin: 0 0 16px;
  font-family: var(--gravure);
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--texte);
}
.citation figcaption {
  font-size: 0.9rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
}
.citation figcaption b { display: block; color: var(--texte); font-weight: 700; }

/* =========================================================================
   Tarifs : trois compartiments de hauteurs differentes
   ========================================================================= */

.mur-tarifs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 46px;
  align-items: start;
}
.formule { grid-column: span 4; }
.formule--retenue {
  margin-top: -32px;
  border-color: var(--accent);
  background: var(--surface-haute);
}
.formule--retenue .reglette { border-bottom-color: var(--accent-secondaire); }

.formule__nom {
  font-family: var(--gravure);
  font-size: 1.5rem;
  color: var(--texte);
  margin: 0 0 6px;
  line-height: 1.2;
}
.formule__cible { font-size: 0.92rem; color: var(--texte-doux); min-height: 4.6em; }
.formule__prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 14px 0;
  margin-bottom: 18px;
}
.formule__prix b {
  font-family: var(--gravure);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.formule__prix span { font-size: 0.88rem; color: var(--texte-doux); }

.liste-incluse { list-style: none; margin: 0 0 22px; padding: 0; }
.liste-incluse li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--texte-doux);
  margin-bottom: 11px;
}
.liste-incluse li svg { flex: none; margin-top: 3px; color: var(--accent); }

.mention-tarif {
  margin-top: 30px;
  font-size: 0.92rem;
  color: var(--texte-doux);
  border-left: 1px solid var(--bordure);
  padding-left: 18px;
  max-width: 72ch;
}

/* =========================================================================
   FAQ : casier etroit de 8 colonnes cale a gauche
   ========================================================================= */

.mur-registre {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 40px;
}
.registre { grid-column: span 8; }
.registre-aparte { grid-column: span 4; margin-top: 54px; }

.question {
  border-bottom: 1px solid var(--bordure);
}
.question:first-child { border-top: 1px solid var(--accent); }

.question summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 34px 18px 0;
  position: relative;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.06rem;
  color: var(--texte);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 27px;
  width: 11px;
  height: 11px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.question[open] summary::after { transform: rotate(-135deg); }
.question summary:hover { color: var(--accent-fonce); }
.question__reponse { padding: 0 40px 20px 0; color: var(--texte-doux); }
.question__reponse p:last-child { margin-bottom: 0; }

/* =========================================================================
   Contact : 7 colonnes de formulaire, 5 de reassurance
   ========================================================================= */

.mur-contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 42px;
  align-items: start;
}
.casier-formulaire { grid-column: span 7; }
.casier-reassurance { grid-column: span 5; margin-top: 36px; }

.champ { margin-bottom: 17px; }
.champ label {
  display: inline-block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
  position: relative;
  padding-left: 0;
  transition: padding-left 0.15s ease;
}
.champ label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 0;
  height: 0.95em;
  background: var(--accent);
  transition: width 0.15s ease;
}
.champ.actif label { padding-left: 12px; }
.champ.actif label::before { width: 7px; }

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1rem;
  padding: 12px 13px;
}
.champ textarea { resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--accent); outline-offset: 1px; }

.champ-accord {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin-bottom: 20px;
}
.champ-accord input { margin-top: 4px; accent-color: var(--accent); }

.suite-formulaire {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.liste-reassurance { list-style: none; margin: 0; padding: 0; }
.liste-reassurance li {
  border-bottom: 1px solid var(--bordure);
  padding: 13px 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}
.liste-reassurance li:last-child { border-bottom: 0; }
.liste-reassurance b { display: block; color: var(--texte); font-weight: 700; margin-bottom: 2px; }

/* =========================================================================
   Pied de page
   ========================================================================= */

.socle {
  background: var(--fond-alt);
  border-top: 1px solid var(--accent);
  padding: 64px 0 24px;
  position: relative;
  overflow: hidden;
}
.socle::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%235B2A8C' stroke-width='2'%3E%3Cpath d='M96 76h68l7 94H89z'/%3E%3Cpath d='M96 76l34-24 34 24'/%3E%3Cpath d='M103 84h54l6 79h-66z'/%3E%3Cpath d='M130 100v28'/%3E%3Cpath d='M128 112c-9-7-19-5-21 3s8 13 21 9z'/%3E%3Cpath d='M132 112c9-7 19-5 21 3s-8 13-21 9z'/%3E%3Ccircle cx='130' cy='138' r='4'/%3E%3Ccircle cx='122' cy='145' r='4'/%3E%3Ccircle cx='138' cy='145' r='4'/%3E%3Ccircle cx='130' cy='152' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

.socle__mur {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 34px;
  position: relative;
  z-index: 1;
}
.socle h2 {
  font-family: var(--gravure);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: 0.16em;
}
.socle ul { list-style: none; margin: 0; padding: 0; }
.socle li { margin-bottom: 9px; }
.socle a { color: var(--texte-doux); text-decoration: none; font-size: 0.94rem; }
.socle a:hover { color: var(--accent); text-decoration: underline; }
.socle p { font-size: 0.94rem; color: var(--texte-doux); max-width: 40ch; }

.socle__profils {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
}
.socle__profils a { font-size: 0.88rem; border-bottom: 1px solid var(--bordure); }

.socle__barre {
  margin-top: 44px;
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
  font-size: 0.84rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* =========================================================================
   Pages interieures
   ========================================================================= */

.tete-interieure {
  padding: calc(var(--fronton-h) + 62px) 0 40px;
  border-bottom: 1px solid var(--bordure);
  background:
    linear-gradient(180deg, rgba(91, 42, 140, 0.06), rgba(91, 42, 140, 0) 70%),
    var(--fond);
  position: relative;
  overflow: hidden;
}
.tete-interieure h1 { font-size: 2.6rem; max-width: 20ch; }
.tete-interieure p { color: var(--texte-doux); font-size: 1.08rem; }

.fil-ariane {
  font-size: 0.85rem;
  color: var(--texte-doux);
  margin-bottom: 18px;
}
.fil-ariane a { color: var(--texte-doux); }
.fil-ariane a:hover { color: var(--accent); }

.corps-page { padding: 60px 0 90px; }
.corps-page h2 {
  font-size: 1.5rem;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--bordure);
}
.corps-page h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.corps-page h3 { margin-top: 26px; font-size: 1.12rem; }
.corps-page p,
.corps-page li { color: var(--texte-doux); }
.corps-page li { max-width: 68ch; }

.encart {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 22px 24px;
  margin: 26px 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.encart p:last-child { margin-bottom: 0; }
.encart ul { margin-bottom: 0; }

.fiche-identite { list-style: none; padding: 0; margin: 0; }
.fiche-identite li {
  border-bottom: 1px solid var(--bordure);
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.fiche-identite li span:first-child {
  min-width: 250px;
  color: var(--texte);
  font-weight: 600;
}

/* page auteur */

.portrait-auteur {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: start;
  margin-bottom: 40px;
}
.portrait-auteur .compartiment-photo img { mix-blend-mode: normal; filter: saturate(0.9); }
.portrait-auteur .compartiment-photo::before { opacity: 0.5; }

.mur-preuves {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin: 34px 0;
}
.mur-preuves > *:nth-child(1) { grid-column: span 7; }
.mur-preuves > *:nth-child(2) { grid-column: span 5; margin-top: 26px; }

/* page merci et 404 */

.centre-message {
  min-height: 68vh;
  display: flex;
  align-items: center;
  padding: calc(var(--fronton-h) + 70px) 0 80px;
}
.centre-message .casier { max-width: 720px; }
.centre-message h1 { font-size: 2.4rem; }

/* plan du site */

.mur-plan {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 34px;
}
.mur-plan > *:nth-child(odd) { grid-column: span 7; }
.mur-plan > *:nth-child(even) { grid-column: span 5; margin-top: 22px; }
.mur-plan h3 { margin-bottom: 8px; }
.mur-plan p { font-size: 0.95rem; color: var(--texte-doux); margin-bottom: 0; }

/* =========================================================================
   Apparition au defilement
   ========================================================================= */

.apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.apparait.en-vue { opacity: 1; transform: none; }

/* =========================================================================
   Adaptations
   ========================================================================= */

@media (max-width: 1080px) {
  .socle__mur { grid-template-columns: 1.6fr 1fr 1fr; }
  .socle__mur > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .rang-ancres,
  .fronton .bouton-plein { display: none; }
  .loquet { display: inline-flex; }

  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.6rem; }
  .tete-interieure h1 { font-size: 1.9rem; }

  .hero { padding-top: calc(var(--fronton-h) + 46px); padding-bottom: 56px; }
  .hero__mur { grid-template-columns: 1fr; }
  .hero__texte, .hero__photo { grid-column: 1 / -1; }
  .hero__photo { margin-top: 8px; }

  .chai, .chai--ample { padding: 62px 0; }
  .chai--serre { padding: 52px 0; }

  .bandeau-registre__mur { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
  .bandeau-registre__mur > div:nth-child(3) { border-left: 0; padding-left: 0; }

  .mur-constat > *,
  .mur-fonctions .casier,
  .mur-effets .colonne-haute,
  .mur-citations > *,
  .formule,
  .registre,
  .registre-aparte,
  .casier-formulaire,
  .casier-reassurance,
  .bloc-photo-large,
  .mur-preuves > *,
  .mur-plan > * {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }
  .escalier .marche,
  .escalier .marche:nth-child(2),
  .escalier .marche:nth-child(3),
  .escalier .marche:nth-child(4) { grid-column: 1 / -1; }

  .formule--retenue { margin-top: 0; }
  .formule__cible { min-height: 0; }

  .portrait-auteur { grid-template-columns: 1fr; }
  .portrait-auteur .compartiment-photo { max-width: 240px; }

  .sachet-filigrane { width: 260px; opacity: 0.08; }
}

@media (max-width: 600px) {
  body { font-size: 1.02rem; }
  .cadre, .cadre-etroit { width: min(100% - 28px, var(--cadre)); }
  .casier { padding: 0 18px 20px; }
  .reglette { margin: 0 -18px 18px; padding: 0 18px; }
  .socle__mur { grid-template-columns: 1fr; }
  .hero__actions .bouton-plein,
  .hero__actions .bouton-filet { width: 100%; }
  .fiche-identite li span:first-child { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .curseur,
  .surtitre.en-vue .curseur--surtitre { animation: none; opacity: 1; }
  .apparait { opacity: 1; transform: none; transition: none; }
  .panneau, .voile { transition: none; }
}

@media print {
  .fronton, .panneau, .voile, .socle__profils { display: none; }
  body { background: #FFFFFF; color: #2A1233; }
}

/* =========================================================================
   MAGAZINE : Le Registre d Appellation
   Meme registre de cave que le reste du site : casiers a compartiments
   inegaux, reglette d etiquette fermee par un filet lavande, biseau de
   14 pixels au coin inferieur droit, sachet de graines en filigrane et
   curseur clignotant apres le mot cle.
   Section ajoutee en fin de feuille : aucune regle existante n est touchee.
   ========================================================================= */

/* ---------- intitule de colonne du pied de page, hors balise h2 ----------
   Les pages du magazine ne portent qu une hierarchie de titres, celle de
   l article. Les colonnes du pied de page passent donc en paragraphe, avec
   exactement l aspect des intitules du reste du site. */

.socle__titre {
  font-family: var(--gravure);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0 0 16px;
  max-width: none;
}

/* =========================================================================
   Fil d Ariane du magazine
   ========================================================================= */

.fil-registre {
  padding-top: calc(var(--fronton-h) + 26px);
}
.fil-registre ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.84rem;
  color: var(--texte-doux);
}
.fil-registre li { margin: 0; }
.fil-registre li + li::before {
  content: "\203A";
  color: var(--accent);
  margin-right: 10px;
}
.fil-registre a { color: var(--texte-doux); text-decoration: none; border-bottom: 1px solid var(--bordure); }
.fil-registre a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fil-registre li:last-child { color: var(--texte); }

/* =========================================================================
   Entete de la page d index du magazine
   ========================================================================= */

.tete-magazine {
  padding: 26px 0 44px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(91, 42, 140, 0.07), rgba(91, 42, 140, 0) 66%),
    var(--fond);
}
.tete-magazine h1 { font-size: 2.9rem; max-width: 18ch; margin-bottom: 20px; }
.tete-magazine h1 .curseur { vertical-align: -0.06em; }
.tete-magazine__chapeau {
  color: var(--texte-doux);
  font-size: 1.09rem;
  max-width: 66ch;
}

.reperes-magazine {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
}
.reperes-magazine > div {
  padding: 0 26px;
  border-left: 1px solid var(--bordure);
}
.reperes-magazine > div:first-child { border-left: 0; padding-left: 0; }
.reperes-magazine b {
  display: block;
  font-family: var(--gravure);
  font-size: 1.62rem;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.reperes-magazine span { font-size: 0.86rem; color: var(--texte-doux); }

/* =========================================================================
   Mur de feuillets : la grille de cartes d article.
   Compartiments inegaux, comme le mur de casiers du reste du site.
   ========================================================================= */

.mur-sommaire {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px var(--gouttiere);
  align-items: start;
}
.mur-sommaire > *:nth-child(1) { grid-column: span 7; }
.mur-sommaire > *:nth-child(2) { grid-column: span 5; margin-top: 34px; }
.mur-sommaire > *:nth-child(3) { grid-column: span 4; }
.mur-sommaire > *:nth-child(4) { grid-column: span 4; margin-top: 28px; }
.mur-sommaire > *:nth-child(5) { grid-column: span 4; margin-top: 56px; }
.mur-sommaire > *:nth-child(6) { grid-column: span 5; }
.mur-sommaire > *:nth-child(7) { grid-column: span 7; margin-top: 30px; }
.mur-sommaire > *:nth-child(8) { grid-column: span 6; }
.mur-sommaire > *:nth-child(9) { grid-column: span 6; margin-top: 26px; }

/* la carte elle meme */

.feuillet {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  filter: var(--ombre-casier);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--casier-biseau)),
    calc(100% - var(--casier-biseau)) 100%,
    0 100%
  );
  transition: border-color 0.16s linear, background-color 0.16s linear;
}
.feuillet::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: 8px;
  width: 26px;
  height: 1px;
  background: var(--bordure);
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
}
.feuillet:hover,
.feuillet:focus-within {
  border-color: var(--accent);
  background: var(--surface-haute);
}
.feuillet:hover::after,
.feuillet:focus-within::after { background: var(--accent); }

/* la reglette d etiquette de la carte, sans les marges negatives du casier */

.feuillet .reglette { margin: 0; padding: 0 20px; }
.feuillet .reglette .vignette-sachet { flex: none; margin-left: auto; color: var(--accent); }

/* le compartiment photographique de la carte */

.feuillet__cadre {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--accent);
  background: var(--fond-alt);
}
.feuillet__cadre img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.02) brightness(1.06);
  transition: transform 0.4s ease;
}
.feuillet__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(91, 42, 140, 0.18), rgba(168, 58, 107, 0.11) 62%, rgba(91, 42, 140, 0.14));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.feuillet:hover .feuillet__cadre img { transform: scale(1.03); }

.feuillet__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.feuillet__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.24;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  max-width: none;
}
.feuillet__titre a { color: var(--texte); text-decoration: none; }
.feuillet__titre a:hover { color: var(--accent-fonce); }
.feuillet__titre a::after {
  content: "";
  display: inline-block;
  width: 0.44em;
  height: 0.92em;
  margin-left: 0.16em;
  vertical-align: -0.08em;
  background: var(--accent);
  opacity: 0;
}
.feuillet:hover .feuillet__titre a::after,
.feuillet:focus-within .feuillet__titre a::after {
  opacity: 1;
  animation: battement 1.1s steps(1, end) infinite;
}
.feuillet__extrait {
  font-size: 0.95rem;
  color: var(--texte-doux);
  margin: 0 0 16px;
  max-width: none;
}
.feuillet__pied {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.82rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.feuillet__pied time { color: var(--texte); }

/* premiere carte du sommaire, la une du numero */

.feuillet--une .feuillet__titre { font-size: 1.62rem; }
.feuillet--une .feuillet__extrait { font-size: 1.02rem; }

/* carte compacte, employee dans le bloc A lire aussi */

.feuillet--compact .feuillet__cadre img { aspect-ratio: 16 / 9; }
.feuillet--compact .feuillet__titre { font-size: 1.08rem; }
.feuillet--compact .feuillet__corps { padding: 16px 18px 18px; }

/* =========================================================================
   Entete d un article : angle, titre, chapeau en exergue, reperes
   ========================================================================= */

.tete-article {
  padding: 22px 0 34px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(91, 42, 140, 0.06), rgba(91, 42, 140, 0) 70%),
    var(--fond);
}
.tete-article h1 {
  font-size: 2.85rem;
  max-width: 24ch;
  margin-bottom: 22px;
}

.exergue {
  font-family: var(--gravure);
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--texte);
  max-width: 62ch;
  margin: 0 0 26px;
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 22px;
}

.reperes-article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 13px 0;
  font-size: 0.86rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.reperes-article__angle {
  font-family: var(--gravure);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.reperes-article time { color: var(--texte); }

/* image a la une, en compartiment pleine largeur */

.une-article { margin: 30px 0 0; }
.une-article .compartiment-photo img { aspect-ratio: 3 / 2; object-fit: cover; }

/* =========================================================================
   Corps de l article : HTML semantique nu, sans un seul attribut class.
   Toutes les balises sont mises en forme comme descendantes du conteneur.
   Mesure de lecture limitee a 68 caracteres.
   ========================================================================= */

.corps-article {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.68;
}
.corps-article > *:first-child { margin-top: 0; }

.corps-article h2 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--texte);
  position: relative;
  margin: 54px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
  max-width: 28ch;
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 52px;
  height: 3px;
  background: var(--accent);
}

.corps-article h3 {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 32px 0 10px;
  padding-left: 14px;
  border-left: 2px solid var(--accent-secondaire);
  max-width: 34ch;
}

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

.corps-article a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover {
  color: var(--accent-fonce);
  background: rgba(91, 42, 140, 0.10);
}

/* listes : la puce reprend l etiquette carree glissee dans sa reglette */

.corps-article ul {
  list-style: none;
  margin: 0 0 1.35em;
  padding: 0;
}
.corps-article ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 0.6em;
  max-width: 66ch;
  color: var(--texte-doux);
}
.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--accent);
}

.corps-article ol {
  list-style: none;
  counter-reset: registre;
  margin: 0 0 1.35em;
  padding: 0;
}
.corps-article ol li {
  counter-increment: registre;
  position: relative;
  padding-left: 38px;
  margin-bottom: 0.6em;
  max-width: 66ch;
  color: var(--texte-doux);
}
.corps-article ol li::before {
  content: counter(registre, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--gravure);
  font-size: 0.98rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.corps-article li ul,
.corps-article li ol { margin-top: 0.55em; margin-bottom: 0; }
.corps-article li strong { color: var(--texte); }

/* tableau recapitulatif, aligne sur le tableau de revendication du site */

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--bordure);
  background: var(--surface);
  margin: 28px 0 32px;
  font-size: 0.94rem;
}
.corps-article th,
.corps-article td {
  border-bottom: 1px solid var(--bordure);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.corps-article thead th {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--texte);
  background: var(--fond-alt);
  border-bottom-color: var(--accent);
}
.corps-article tbody th { color: var(--texte); font-weight: 600; }
.corps-article tbody td { color: var(--texte-doux); }
.corps-article tbody tr:last-child th,
.corps-article tbody tr:last-child td { border-bottom: 0; }

/* encadre : un casier a part entiere, avec son biseau */

.corps-article aside {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 2px solid var(--accent);
  padding: 20px 22px;
  margin: 30px 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.corps-article aside p { color: var(--texte); }
.corps-article aside > *:last-child { margin-bottom: 0; }

/* citation : Rufina, filet rose poudre */

.corps-article blockquote {
  margin: 30px 0;
  padding: 6px 0 6px 22px;
  border-left: 2px solid var(--accent-secondaire);
  font-family: var(--gravure);
  font-size: 1.14rem;
  line-height: 1.56;
  color: var(--texte);
}
.corps-article blockquote p {
  font-family: var(--gravure);
  color: var(--texte);
}
.corps-article blockquote > *:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 30px 0;
  border: 1px solid var(--accent);
  background: var(--fond-alt);
}
.corps-article figcaption {
  border-top: 1px solid var(--accent);
  padding: 9px 14px;
  font-family: var(--gravure);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: var(--surface);
}

/* =========================================================================
   Chute de l article : rappel produit et appel a l action
   ========================================================================= */

.chute-article {
  margin-top: 46px;
  background: var(--surface-haute);
  border: 1px solid var(--accent);
  padding: 0 24px 26px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--casier-biseau)),
    calc(100% - var(--casier-biseau)) 100%,
    0 100%
  );
}
.chute-article .reglette { margin: 0 -24px 20px; padding: 0 24px; }
.chute-article__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 0 0 10px;
}
.chute-article__titre .curseur { width: 0.44em; height: 0.9em; }
.chute-article p { color: var(--texte-doux); }
.trousse-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

/* =========================================================================
   Encart auteur
   ========================================================================= */

.encart-auteur {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 40px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--accent);
  filter: saturate(0.9);
}
.encart-auteur__mention {
  display: block;
  font-family: var(--gravure);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 6px;
}
.encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 0 0 8px;
}
.encart-auteur p { color: var(--texte-doux); font-size: 0.96rem; }
.encart-auteur p:last-child { margin-bottom: 0; }

/* =========================================================================
   Bloc A lire aussi
   ========================================================================= */

.bloc-lire-aussi { padding: 84px 0 96px; }
.lire-aussi__tete { max-width: 60ch; }
.lire-aussi__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.72rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 0 0 10px;
}
.lire-aussi__titre .curseur { width: 0.44em; height: 0.9em; }
.lire-aussi__tete p { color: var(--texte-doux); }

.mur-lire-aussi {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 34px;
  align-items: start;
}
.mur-lire-aussi > * { grid-column: span 4; }
.mur-lire-aussi > *:nth-child(2) { margin-top: 26px; }
.mur-lire-aussi > *:nth-child(3) { margin-top: 52px; }

/* =========================================================================
   Section Derniers articles de la page d accueil
   ========================================================================= */

.section-registre { border-bottom: 1px solid var(--bordure); }

.mur-derniers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 44px;
  align-items: start;
}
.mur-derniers > * { grid-column: span 4; }
.mur-derniers > *:nth-child(2) { margin-top: 30px; }
.mur-derniers > *:nth-child(3) { margin-top: 60px; }

.suite-magazine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 36px;
  border-top: 1px solid var(--bordure);
  padding-top: 24px;
}
.suite-magazine p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.95rem;
  max-width: 52ch;
}

/* =========================================================================
   Adaptations du magazine
   ========================================================================= */

@media (max-width: 1080px) {
  .mur-sommaire > *:nth-child(3),
  .mur-sommaire > *:nth-child(4),
  .mur-sommaire > *:nth-child(5) { grid-column: span 6; }
  .mur-sommaire > *:nth-child(5) { margin-top: 0; }
}

@media (max-width: 900px) {
  .tete-magazine h1 { font-size: 2.05rem; }
  .tete-article h1 { font-size: 2rem; }

  .mur-sommaire > *,
  .mur-lire-aussi > *,
  .mur-derniers > * {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }

  .feuillet--une .feuillet__titre { font-size: 1.34rem; }
  .bloc-lire-aussi { padding: 56px 0 64px; }

  .corps-article h2 { font-size: 1.42rem; max-width: none; }
  .corps-article h3 { font-size: 1.12rem; max-width: none; }

  .encart-auteur { grid-template-columns: 1fr; gap: 16px; }

  .reperes-magazine > div { padding: 0 16px; }
  .reperes-magazine > div:first-child { padding-left: 0; }
}

@media (max-width: 600px) {
  /* Le corps ne peut pas porter de conteneur a defilement : le tableau
     devient lui meme le compartiment qui defile lateralement. */
  .corps-article table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .corps-article th,
  .corps-article td { padding: 10px 12px; }

  .reperes-magazine { gap: 18px 0; }
  .reperes-magazine > div {
    flex: 1 1 100%;
    border-left: 0;
    padding: 0;
  }
  .exergue { font-size: 1.06rem; padding-left: 16px; }
  .chute-article { padding: 0 18px 22px; }
  .chute-article .reglette { margin: 0 -18px 18px; padding: 0 18px; }
  .trousse-actions .bouton-plein,
  .trousse-actions .bouton-filet { width: 100%; }
  .encart-auteur { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .feuillet:hover .feuillet__titre a::after,
  .feuillet:focus-within .feuillet__titre a::after { animation: none; opacity: 1; }
  .feuillet,
  .feuillet__cadre img { transition: none; }
  .feuillet:hover .feuillet__cadre img { transform: none; }
}

@media print {
  .fil-registre, .bloc-lire-aussi, .trousse-actions { display: none; }
  .corps-article { max-width: none; }
}