/* Lipedouce, feuille de style unique.
   Vocabulaire de classes emprunte au carnet de suivi tenu a la main:
   marge, ruban, cartouche, onglets, feuillet, escalier, quadrille, pli, pupitre, ourlet.
   Mode clair integral, aucune variante sombre. */

:root {
  --papier: #FAF6F0;
  --papier-alt: #F1EAE0;
  --carte: #FFFFFF;
  --encre: #2B241D;
  --encre-douce: #6A5E51;
  --bleu: #1C5CA1;
  --bleu-dense: #164B85;
  --bleu-clair: #E6EEF7;
  --taupe-rose: #B39082;
  --filet: #E2D8C9;

  --titre: "Outfit", "Trebuchet MS", sans-serif;
  --courant: "Manrope", "Segoe UI", system-ui, sans-serif;
  --releve: "Roboto Mono", "Courier New", monospace;

  --gouttiere: 28px;
  --marge-laterale: 6%;
  --biais: 34deg;
  --coupe-x: 22px;
  --coupe-y: 15px;

  --rythme: clamp(64px, 8vw, 118px);
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.06rem;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  color: var(--encre);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-weight: 600;
  font-size: clamp(2.7rem, 8.2vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

h2 {
  font-weight: 600;
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h3 {
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
}

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

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

strong { font-weight: 600; }
em { font-style: italic; }

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

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bleu);
  color: #FFFFFF;
  padding: 12px 20px;
  z-index: 200;
  font-family: var(--releve);
  font-size: 0.82rem;
}
.evitement:focus { left: 12px; top: 12px; color: #FFFFFF; }

/* ---------- Trames et coupes signature ---------- */

.marge {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding-left: var(--marge-laterale);
  padding-right: var(--marge-laterale);
}

.coupe {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}

.rayures-fond {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(var(--biais), rgba(179, 144, 130, 0.08) 0 52px, transparent 52px 104px);
}

.rayures-pied {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(var(--biais), rgba(106, 94, 81, 0.06) 0 52px, transparent 52px 104px);
}

.bande-rayee {
  height: 96px;
  background-color: var(--bleu);
  background-image: repeating-linear-gradient(var(--biais), var(--bleu-dense) 0 52px, var(--bleu) 52px 104px);
  position: relative;
  overflow: hidden;
}

.bande-rayee::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--taupe-rose);
}

.surtitre {
  font-family: var(--releve);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bleu);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.surtitre::before {
  content: "";
  width: 24px;
  height: 3px;
  background: var(--bleu);
  flex: none;
}

.mention {
  font-size: 0.86rem;
  color: var(--encre-douce);
  line-height: 1.6;
}

/* ---------- Onglet de carnet, filet double qui prolonge la coupe ---------- */

.onglet-carnet { position: relative; }
.onglet-carnet::after {
  content: "";
  position: absolute;
  left: -12px;
  bottom: 6px;
  width: 42px;
  height: 3px;
  background: var(--bleu);
  transform: rotate(34deg);
  transform-origin: left center;
}

/* ---------- Boutons ---------- */

.appui {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  border: 0;
  transition: clip-path 240ms var(--courbe);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}

.appui span { position: relative; z-index: 2; }

.appui--bleu {
  background: var(--bleu);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--bleu-dense);
}
.appui--bleu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bleu-dense);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 240ms var(--courbe);
  z-index: 1;
}
.appui--bleu:hover { color: #FFFFFF; --coupe-x: 26px; --coupe-y: 18px; }
.appui--bleu:hover::before { clip-path: inset(0 0 0 0); }

.appui--filet {
  background: transparent;
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--filet), inset 0 0 0 4px var(--papier), inset 0 0 0 5px var(--filet);
}
.appui--filet::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--bleu);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 240ms var(--courbe);
}
.appui--filet:hover { background: var(--papier-alt); color: var(--encre); }
.appui--filet:hover::after { clip-path: inset(0 0 0 0); }

.appui--menu {
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.9rem;
}

/* ---------- En tete ---------- */

.ruban {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  background: transparent;
  transition: background 200ms linear, box-shadow 200ms linear;
}

.ruban--colle {
  position: fixed;
  background: rgba(250, 246, 240, 0.96);
  border-bottom: 1px solid var(--filet);
  box-shadow: 0 2px 0 rgba(43, 36, 29, 0.04);
  backdrop-filter: blur(6px);
}

.ruban__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  color: var(--encre);
}
.logotype span.finale { color: var(--taupe-rose); }
.logotype:hover { color: var(--encre); }

.cartouche {
  width: 40px;
  height: 40px;
  flex: none;
  display: block;
}

.onglets {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.onglets a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--encre);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.onglets a:hover { border-bottom-color: var(--bleu); color: var(--encre); }

.declic {
  display: none;
  background: transparent;
  border: 1px solid var(--filet);
  padding: 10px 14px;
  font-family: var(--releve);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
  cursor: pointer;
}

.paravent {
  position: fixed;
  inset: 0;
  z-index: 120;
  background-color: var(--papier);
  background-image: repeating-linear-gradient(var(--biais), rgba(179, 144, 130, 0.1) 0 52px, transparent 52px 104px);
  padding: 28px var(--marge-laterale) 40px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms var(--courbe);
  overflow-y: auto;
}
.paravent[hidden] { display: none; }
.paravent--ouvert { clip-path: inset(0 0 0 0); }

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

.paravent ul {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid var(--filet);
}
.paravent li { margin: 0; border-bottom: 1px solid var(--filet); }
.paravent a {
  display: block;
  padding: 18px 0;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--encre);
  text-decoration: none;
}

/* ---------- Hero, typographie surdimensionnee qui deborde ---------- */

.releve-ouverture {
  position: relative;
  padding-top: 150px;
  padding-bottom: var(--rythme);
  overflow: hidden;
  background: var(--papier);
}

.releve-ouverture__grille {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  align-items: start;
}

.releve-ouverture__intro {
  grid-column: 1 / span 12;
  position: relative;
  z-index: 3;
}

.releve-ouverture h1 {
  width: 118%;
  max-width: none;
  margin-bottom: 26px;
}
.releve-ouverture h1 .ligne {
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: revele-ligne 620ms var(--courbe) forwards;
}
.releve-ouverture h1 .ligne:nth-child(1) { animation-delay: 120ms; }
.releve-ouverture h1 .ligne:nth-child(2) { animation-delay: 210ms; }
.releve-ouverture h1 .ligne:nth-child(3) { animation-delay: 300ms; }

@keyframes revele-ligne {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.releve-ouverture h1 .ligne--debord { color: var(--bleu); }

.releve-ouverture__socle {
  grid-column: 1 / span 6;
  position: relative;
  z-index: 3;
  margin-top: -26px;
  padding-top: 28px;
}

.releve-ouverture__socle p { font-size: 1.14rem; }

.paire-appuis {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 30px 0 34px;
}

.reassurance {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--carte);
  border: 1px solid var(--filet);
  padding: 18px 22px;
  max-width: 460px;
  position: relative;
}
.reassurance__nombre {
  font-family: var(--releve);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--bleu);
  line-height: 1.1;
  flex: none;
}
.reassurance p { margin: 0; font-size: 0.92rem; color: var(--encre-douce); line-height: 1.55; }

.photo-cadre {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 27px));
}
.photo-cadre::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--bleu);
  z-index: 2;
}
.photo-cadre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 33%;
  background: linear-gradient(to top, rgba(28, 92, 161, 0.12), rgba(28, 92, 161, 0));
  z-index: 2;
}
.photo-cadre img { width: 100%; }

.releve-ouverture__photo {
  grid-column: 7 / span 6;
  grid-row: 1;
  margin-top: 232px;
  z-index: 1;
}

.legende {
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
  margin: 12px 0 0;
  text-transform: uppercase;
}

/* ---------- Section generique ---------- */

.pan {
  position: relative;
  padding-top: var(--rythme);
  padding-bottom: var(--rythme);
}
.pan--taupe { background: var(--papier-alt); }
.pan--blanc { background: var(--papier); }

.pan__entete { max-width: 760px; margin-bottom: 46px; }
.pan__entete p { font-size: 1.08rem; color: var(--encre-douce); }

/* ---------- Probleme: deux colonnes de texte, une colonne de couts ---------- */

.constat {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: 34px;
  align-items: start;
}
.constat__texte { grid-column: 1 / span 4; }
.constat__texte--second { grid-column: 5 / span 4; }
.constat__couts { grid-column: 9 / span 4; }

.couts {
  background: var(--carte);
  border: 1px solid var(--filet);
  padding: 30px 28px 24px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}
.couts h3 { margin-bottom: 18px; }
.couts dl { margin: 0; }
.couts dt {
  font-family: var(--releve);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--bleu);
  line-height: 1.2;
}
.couts dd {
  margin: 4px 0 20px;
  font-size: 0.94rem;
  color: var(--encre-douce);
  line-height: 1.55;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 18px;
}
.couts dd:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.avertissement-soin {
  margin-top: 30px;
  background: var(--bleu-clair);
  border-left: 3px solid var(--bleu);
  padding: 20px 24px;
  font-size: 0.95rem;
  color: var(--encre);
}
.avertissement-soin p { margin: 0; max-width: 74ch; }

/* ---------- Solution en escalier ---------- */

.escalier {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: 30px;
  counter-reset: marche;
}

.marche {
  background: var(--carte);
  border: 1px solid var(--filet);
  padding: 30px 28px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}
.marche:nth-child(1) { grid-column: 1 / span 5; }
.marche:nth-child(2) { grid-column: 4 / span 5; margin-top: 34px; }
.marche:nth-child(3) { grid-column: 7 / span 5; margin-top: -18px; }
.marche:nth-child(4) { grid-column: 8 / span 5; margin-top: 16px; }

.marche__rang {
  font-family: var(--releve);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  color: var(--taupe-rose);
  display: block;
  margin-bottom: 10px;
}
.marche p { margin-bottom: 0; font-size: 0.98rem; color: var(--encre-douce); }
.marche p + p { margin-top: 0.9em; }

/* ---------- Fonctionnalites ---------- */

.quadrille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.case-carnet {
  background: var(--carte);
  border: 1px solid var(--filet);
  padding: 30px 26px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}
.case-carnet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--bleu);
}
.case-carnet h3 { margin-top: 6px; }
.case-carnet p { font-size: 0.97rem; color: var(--encre-douce); margin-bottom: 0; }
.case-carnet p + p { margin-top: 0.8em; }

.etiquette {
  display: inline-block;
  font-family: var(--releve);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  border: 1px solid var(--filet);
  padding: 3px 9px;
  margin-bottom: 14px;
}

.diptyque {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px var(--gouttiere);
  align-items: center;
  margin-bottom: 52px;
}

.bande-photo { margin: 0 0 52px; }
.bande-photo img { width: 100%; }
.bande-photo figcaption { padding-top: 12px; }

/* ---------- Avantages, bandeau de chiffres ---------- */

.bandeau-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 12px;
}

.chiffre { border-top: 3px solid var(--taupe-rose); padding-top: 20px; }
.chiffre__valeur {
  font-family: var(--releve);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1;
  color: var(--encre);
  display: block;
  letter-spacing: -0.02em;
}
.chiffre__libelle {
  display: block;
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--encre-douce);
  line-height: 1.55;
}

.gains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gouttiere) 46px;
  margin-bottom: 52px;
}
.gains h3 { margin-bottom: 8px; }
.gains p { margin-bottom: 0; color: var(--encre-douce); font-size: 0.98rem; }

/* ---------- Preuve sociale ---------- */

.citations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}
.citations > *:nth-child(2) { margin-top: 32px; }
.citations > *:nth-child(3) { margin-top: 64px; }

.citation {
  background: var(--carte);
  border: 1px solid var(--filet);
  margin: 0;
  padding: 30px 28px 26px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}
.citation blockquote { margin: 0 0 20px; }
.citation blockquote p { font-size: 1.02rem; margin-bottom: 0.9em; }
.citation blockquote p:last-child { margin-bottom: 0; }
.citation figcaption {
  border-top: 1px solid var(--filet);
  padding-top: 16px;
  font-size: 0.9rem;
  color: var(--encre-douce);
}
.citation figcaption strong { display: block; color: var(--encre); font-size: 0.98rem; }
.citation__marque {
  font-family: var(--releve);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  display: block;
  margin-bottom: 16px;
}

/* ---------- Tarifs ---------- */

.formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: stretch;
}

.formule {
  background: var(--carte);
  border: 1px solid var(--filet);
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}
.formule--phare {
  transform: translateY(-20px);
  box-shadow: inset 0 0 0 2px var(--bleu);
  border-color: var(--bleu);
}
.formule__fanion {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--bleu);
  color: #FFFFFF;
  font-family: var(--releve);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.formule h3 { margin-bottom: 6px; font-size: 1.45rem; }
.formule__cible { font-size: 0.92rem; color: var(--encre-douce); min-height: 84px; }
.formule__prix {
  font-family: var(--releve);
  font-weight: 500;
  font-size: 3.1rem;
  line-height: 1;
  color: var(--encre);
  display: block;
  margin: 10px 0 4px;
  letter-spacing: -0.03em;
}
.formule__unite {
  font-family: var(--releve);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: block;
  margin-bottom: 22px;
}
.formule ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid var(--filet);
}
.formule li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--filet);
  font-size: 0.94rem;
  color: var(--encre-douce);
  line-height: 1.5;
  margin: 0;
}
.formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 14px;
  height: 3px;
  background: var(--taupe-rose);
  transform: rotate(34deg);
}
.formule .appui { margin-top: auto; width: 100%; }

.note-tarifs {
  margin-top: 46px;
  font-size: 0.94rem;
  color: var(--encre-douce);
  border-left: 3px solid var(--filet);
  padding-left: 22px;
}
.note-tarifs p { max-width: 78ch; margin-bottom: 0.7em; }
.note-tarifs p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */

.plis {
  max-width: 780px;
  border-top: 1px solid var(--filet);
}

.pli { border-bottom: 1px solid var(--filet); }

.pli__question {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 24px 46px 24px 0;
  position: relative;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.16rem;
  line-height: 1.4;
  color: var(--encre);
  cursor: pointer;
}
.pli__question::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 3px;
  background: var(--bleu);
  transform: translateY(-50%) rotate(34deg);
  transition: transform 240ms var(--courbe);
}
.pli__question[aria-expanded="true"]::after { transform: translateY(-50%) rotate(124deg); }
.pli__question:hover { color: var(--bleu-dense); }

.pli__reponse {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms var(--courbe);
  padding: 0 60px 6px 0;
}
.pli__reponse[hidden] { display: none; }
.pli__reponse--ouvert { clip-path: inset(0 0 0 0); }
.pli__reponse p { font-size: 0.99rem; color: var(--encre-douce); }
.pli__reponse p:last-child { margin-bottom: 24px; }

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

.pupitre {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px var(--gouttiere);
  align-items: start;
}

.formulaire {
  background: var(--carte);
  border: 1px solid var(--filet);
  padding: 34px 32px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}

.champ { margin-bottom: 20px; }
.champ label {
  display: block;
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 7px;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-bottom: 2px solid var(--taupe-rose);
  padding: 13px 14px;
  border-radius: 0;
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible { background: var(--carte); }

.duo-champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gouttiere);
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 26px 0 24px;
  font-size: 0.92rem;
  color: var(--encre-douce);
  line-height: 1.55;
}
.consentement input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--bleu); }

.reperes { position: relative; }
.reperes ul { list-style: none; padding: 0; margin: 0; }
.reperes li {
  border-top: 1px solid var(--filet);
  padding: 18px 0;
  font-size: 0.95rem;
  color: var(--encre-douce);
}
.reperes li strong {
  display: block;
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.08rem;
  margin-bottom: 4px;
}
.voie-directe {
  margin-top: 26px;
  background: var(--papier-alt);
  border: 1px solid var(--filet);
  padding: 22px 24px;
  font-size: 0.94rem;
}
.voie-directe p { margin-bottom: 0.6em; }
.voie-directe p:last-child { margin-bottom: 0; }

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

.ourlet {
  position: relative;
  background: var(--papier-alt);
  border-top: 3px solid var(--bleu);
  padding-top: 68px;
  padding-bottom: 30px;
  overflow: hidden;
}

.ourlet__grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px var(--gouttiere);
  z-index: 2;
}
.ourlet h2, .ourlet p.pos { font-size: 1rem; }
.ourlet__titre {
  font-family: var(--releve);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 0 16px;
  font-weight: 500;
}
.ourlet ul { list-style: none; margin: 0; padding: 0; }
.ourlet li { margin-bottom: 10px; }
.ourlet a { color: var(--encre); text-decoration: none; font-size: 0.94rem; }
.ourlet a:hover { color: var(--bleu); text-decoration: underline; }
.ourlet p { font-size: 0.92rem; color: var(--encre-douce); }

.reseaux-auteur { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
.reseaux-auteur a { font-family: var(--releve); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }

.ourlet__bas {
  position: relative;
  z-index: 2;
  margin-top: 54px;
  border-top: 1px solid var(--filet);
  padding-top: 22px;
  font-size: 0.86rem;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}
.ourlet__bas p { margin: 0; font-size: 0.86rem; }

/* ---------- Pages internes ---------- */

.entete-interne {
  position: relative;
  padding-top: 148px;
  padding-bottom: 52px;
  background: var(--papier-alt);
  overflow: hidden;
}
.entete-interne h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); max-width: 16ch; }
.entete-interne p { font-size: 1.1rem; color: var(--encre-douce); position: relative; }

.fil { font-family: var(--releve); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--encre-douce); margin-bottom: 22px; position: relative; }
.fil a { color: var(--encre-douce); }

.texte-long { max-width: 760px; }
.texte-long h2 { margin-top: 52px; }
.texte-long h3 { margin-top: 34px; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long ul { padding-left: 1.2em; }
.texte-long li { color: var(--encre); }
.texte-long dl { margin: 0 0 24px; }
.texte-long dt { font-weight: 600; margin-top: 14px; }
.texte-long dd { margin: 2px 0 0; color: var(--encre-douce); }

.portrait-auteur {
  float: right;
  margin: 0 0 26px 34px;
  max-width: 260px;
}
.portrait-auteur img {
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 19px));
  border-top: 3px solid var(--bleu);
}
.portrait-auteur figcaption {
  font-family: var(--releve);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
  margin-top: 10px;
  text-transform: uppercase;
}

.encadre-methode {
  background: var(--carte);
  border: 1px solid var(--filet);
  padding: 28px 30px;
  margin: 34px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}
.encadre-methode h3 { margin-top: 0; }
.encadre-methode p:last-child { margin-bottom: 0; }

.liste-plan { list-style: none; padding: 0; margin: 0; }
.liste-plan li {
  border-bottom: 1px solid var(--filet);
  padding: 20px 0;
  margin: 0;
}
.liste-plan a { font-family: var(--titre); font-weight: 500; font-size: 1.2rem; text-decoration: none; }
.liste-plan p { margin: 6px 0 0; color: var(--encre-douce); font-size: 0.96rem; }

.page-simple {
  position: relative;
  padding-top: 158px;
  padding-bottom: var(--rythme);
  text-align: left;
  overflow: hidden;
}
.page-simple .marge { position: relative; z-index: 2; }
.page-simple h1 { max-width: 18ch; }
.page-simple p { font-size: 1.08rem; }

/* ---------- Animation signature: masque glissant ---------- */

/* Les blocs restent visibles si le script ne s execute pas: c est lui qui arme le masque. */
.anime-pret .glisse {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 620ms var(--courbe), opacity 620ms var(--courbe);
  opacity: 0.001;
}
.anime-pret .glisse--vu { clip-path: inset(0 0 0 0); opacity: 1; }

/* ---------- Adaptations ---------- */

@media (max-width: 1080px) {
  .releve-ouverture__photo { margin-top: 180px; }
  .releve-ouverture__socle { grid-column: 1 / span 7; }
  .constat__texte { grid-column: 1 / span 6; }
  .constat__texte--second { grid-column: 7 / span 6; }
  .constat__couts { grid-column: 1 / span 12; }
  .quadrille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marche:nth-child(1) { grid-column: 1 / span 7; }
  .marche:nth-child(2) { grid-column: 5 / span 8; }
  .marche:nth-child(3) { grid-column: 1 / span 8; }
  .marche:nth-child(4) { grid-column: 4 / span 9; }
  .bandeau-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formules { grid-template-columns: minmax(0, 1fr); }
  .formule--phare { transform: none; }
  .citations { grid-template-columns: minmax(0, 1fr); }
  .citations > *:nth-child(2),
  .citations > *:nth-child(3) { margin-top: 0; }
  .pupitre { grid-template-columns: minmax(0, 1fr); }
  .ourlet__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .onglets, .ruban .appui--bleu { display: none; }
  .declic { display: inline-block; }
  .releve-ouverture { padding-top: 128px; }
  .releve-ouverture h1 { width: 112%; }
  .releve-ouverture__photo { grid-column: 1 / span 12; margin-top: 34px; }
  .releve-ouverture__socle { grid-column: 1 / span 12; margin-top: 0; padding-top: 0; }
  .portrait-auteur { float: none; margin: 0 0 30px; max-width: 300px; }
  .diptyque { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 720px) {
  body { font-size: 1.02rem; }
  .quadrille { grid-template-columns: minmax(0, 1fr); }
  .gains { grid-template-columns: minmax(0, 1fr); }
  .bandeau-chiffres { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .marche { margin-top: 0 !important; }
  .marche:nth-child(1),
  .marche:nth-child(2),
  .marche:nth-child(3),
  .marche:nth-child(4) { grid-column: 1 / span 12; }
  .constat__texte,
  .constat__texte--second { grid-column: 1 / span 12; }
  .duo-champs { grid-template-columns: minmax(0, 1fr); }
  .ourlet__grille { grid-template-columns: minmax(0, 1fr); }
  .formulaire { padding: 26px 22px; }
  .paire-appuis .appui { width: 100%; }
}

@media (max-width: 520px) {
  .releve-ouverture h1 { width: 108%; }
  .bande-rayee { height: 68px; }
  .reassurance { flex-direction: column; gap: 6px; }
}

@media print {
  .ruban, .paravent, .declic, .bande-rayee { display: none; }
  body { background: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glisse,
  .glisse--vu,
  .pli__reponse,
  .paravent {
    clip-path: inset(0) !important;
    transition-duration: 120ms !important;
  }
  .anime-pret .glisse { opacity: 1; clip-path: inset(0) !important; }
  .releve-ouverture h1 .ligne {
    animation: none;
    clip-path: inset(0);
  }
  .appui,
  .appui--bleu::before,
  .appui--filet::after,
  .pli__question::after { transition-duration: 120ms !important; }
}
/* ============================================================
   MAGAZINE, Le Releve du soir
   ------------------------------------------------------------
   Section ajoutee en fin de feuille. Aucune regle ecrite plus
   haut n est modifiee. Le magazine reprend la palette du carnet,
   la coupe du coin inferieur gauche a 34 degres doublee de son
   filet bleu, les rayures diagonales larges en aplat et la
   revelation par masque glissant de la gauche vers la droite.
   Vocabulaire de classes, dans la suite du carnet tenu a la main:
   feuillet pour la carte d article, releve pour les reperes
   chiffres, corps-article pour le texte redactionnel nu.
   ============================================================ */

/* ---------- Ouverture du magazine ---------- */

.entete-magazine {
  position: relative;
  padding-top: 150px;
  padding-bottom: 54px;
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
  overflow: hidden;
}
.entete-magazine .marge { position: relative; z-index: 2; }

.entete-magazine h1 {
  width: 112%;
  max-width: none;
  margin-bottom: 26px;
}
.entete-magazine h1 .ligne {
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: revele-ligne 620ms var(--courbe) forwards;
}
.entete-magazine h1 .ligne:nth-child(1) { animation-delay: 120ms; }
.entete-magazine h1 .ligne:nth-child(2) { animation-delay: 210ms; }
.entete-magazine h1 .ligne--debord { color: var(--bleu); }

.mag-chapo {
  font-size: 1.14rem;
  line-height: 1.65;
  color: var(--encre);
  max-width: 68ch;
  margin-bottom: 22px;
}

/* Ligne de reperes: angle, date, temps de lecture, signature. */
.mag-cotes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-family: var(--releve);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0;
  max-width: none;
}
.mag-cotes > * { display: inline-block; }
.mag-cotes > * + *::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 3px;
  background: var(--taupe-rose);
  transform: rotate(34deg);
  margin-right: 16px;
  vertical-align: middle;
}

.mag-angle {
  font-family: var(--releve);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  border: 1px solid var(--filet);
  background: var(--carte);
  padding: 4px 10px;
}

/* Intitule de bloc, quand aucune balise de titre n est disponible. */
.mag-titre-bloc {
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 28px;
  max-width: 24ch;
}

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

.feuillets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px var(--gouttiere);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* L onglet de carnet depasse du bloc: il se pose sur l element de liste,
   que la coupe de la carte ne rogne pas. */
.feuillets > li {
  position: relative;
  margin: 0;
}
.feuillets > li::after {
  content: "";
  position: absolute;
  left: -12px;
  bottom: 6px;
  width: 42px;
  height: 3px;
  background: var(--bleu);
  transform: rotate(34deg);
  transform-origin: left center;
}

.feuillet {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--carte);
  border: 1px solid var(--filet);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
  transition: box-shadow 240ms var(--courbe);
}
.feuillet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--bleu-dense);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 240ms var(--courbe);
  z-index: 3;
}
.feuillet:hover { box-shadow: 0 2px 0 rgba(43, 36, 29, 0.06); }
.feuillet:hover::before { clip-path: inset(0 0 0 0); }
.feuillet:focus-within::before { clip-path: inset(0 0 0 0); }

.feuillet__vue {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.feuillet__vue::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--bleu);
  z-index: 2;
}
.feuillet__vue::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 33%;
  background: linear-gradient(to top, rgba(28, 92, 161, 0.12), rgba(28, 92, 161, 0));
  z-index: 2;
}
.feuillet__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.feuillet__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 24px 22px;
}
.feuillet__corps .mag-angle { align-self: flex-start; margin-bottom: 14px; }

.feuillet__titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--encre);
  margin: 0 0 12px;
  max-width: none;
}
.feuillet__titre a {
  color: var(--encre);
  text-decoration: none;
}
.feuillet__titre a:hover {
  color: var(--bleu-dense);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feuillet__extrait {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--encre-douce);
  margin: 0 0 18px;
  max-width: none;
}

.feuillet__cotes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--filet);
  font-family: var(--releve);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  max-width: none;
}

/* ---------- Section magazine de la page d accueil ---------- */

.pan--releve {
  background: var(--papier);
  border-top: 3px solid var(--bleu);
  border-bottom: 1px solid var(--filet);
  overflow: hidden;
}
.pan--releve .marge { position: relative; z-index: 2; }
.pan--releve .rayures-fond { z-index: 1; }

.releve-suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--filet);
}
.releve-suite p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--encre-douce);
  max-width: 54ch;
}

/* ---------- Entete d article et fil d Ariane ---------- */

.entete-article {
  position: relative;
  padding-top: 148px;
  padding-bottom: 48px;
  background: var(--papier-alt);
  overflow: hidden;
}
.entete-article .marge { position: relative; z-index: 2; }
.entete-article h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  max-width: 22ch;
  margin-bottom: 22px;
}

.fil-ariane {
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--encre-douce);
  margin-bottom: 24px;
}
.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fil-ariane li { margin: 0; }
.fil-ariane li + li::before {
  content: "/";
  color: var(--taupe-rose);
  margin-right: 10px;
}
.fil-ariane a { color: var(--encre-douce); }
.fil-ariane a:hover { color: var(--bleu-dense); }
.fil-ariane li[aria-current] { color: var(--encre); }

/* Chapeau en exergue typographique. */
.chapo-article {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.16rem, 2.3vw, 1.44rem);
  line-height: 1.45;
  color: var(--encre);
  max-width: 62ch;
  border-left: 3px solid var(--bleu);
  padding-left: 26px;
  margin: 26px 0 24px;
}

.signature-article {
  font-size: 0.9rem;
  color: var(--encre-douce);
  margin: 0;
  max-width: 68ch;
}

.corps-page {
  position: relative;
  padding-top: 54px;
  padding-bottom: var(--rythme);
  background: var(--papier);
}

.photo-une {
  position: relative;
  margin: 0 0 46px;
  overflow: hidden;
  max-width: 1000px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 27px));
}
.photo-une::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--bleu);
  z-index: 2;
}
.photo-une::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 33%;
  background: linear-gradient(to top, rgba(28, 92, 161, 0.12), rgba(28, 92, 161, 0));
  z-index: 2;
}
.photo-une img { width: 100%; }

/* ---------- Corps redactionnel, balises nues sans attribut de classe ----------
   Le texte des articles n emporte aucune classe: tout se met en forme ici,
   par la balise seule, avec la coupe et les rayures du projet. */

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

.corps-article > *:first-child { margin-top: 0; }

.corps-article h2 {
  position: relative;
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.62rem, 3.4vw, 2.05rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 2.3em 0 0.6em;
  padding-top: 22px;
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--bleu);
}

.corps-article h3 {
  position: relative;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--encre);
  margin: 1.9em 0 0.5em;
  padding-left: 26px;
}
.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 3px;
  background: var(--taupe-rose);
  transform: rotate(34deg);
}

.corps-article p {
  margin: 0 0 1.15em;
  max-width: none;
}

.corps-article strong { font-weight: 600; color: var(--encre); }
.corps-article em { font-style: italic; }

.corps-article a {
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover { color: var(--bleu-dense); }

.corps-article ul,
.corps-article ol {
  margin: 0 0 1.5em;
  padding: 0 0 0 28px;
  list-style: none;
}
.corps-article li {
  position: relative;
  margin-bottom: 0.55em;
  line-height: 1.65;
}
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0.72em;
  width: 14px;
  height: 3px;
  background: var(--taupe-rose);
  transform: rotate(34deg);
}
.corps-article ol {
  counter-reset: releve-rang;
  padding-left: 40px;
}
.corps-article ol > li { counter-increment: releve-rang; }
.corps-article ol > li::before {
  content: counter(releve-rang, decimal-leading-zero);
  position: absolute;
  left: -40px;
  top: 0.06em;
  font-family: var(--releve);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--bleu);
}
.corps-article li > ul,
.corps-article li > ol { margin: 0.55em 0 0.2em; }

/* Tableau recapitulatif. */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 34px 0 38px;
  background: var(--carte);
  border: 1px solid var(--filet);
  font-size: 0.95rem;
}
.corps-article thead th {
  background: var(--bleu);
  color: #FFFFFF;
  font-family: var(--releve);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  vertical-align: bottom;
}
.corps-article tbody th {
  font-weight: 600;
  text-align: left;
  color: var(--encre);
}
.corps-article td,
.corps-article tbody th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
  line-height: 1.55;
}
.corps-article tbody tr:last-child td,
.corps-article tbody tr:last-child th { border-bottom: 0; }
.corps-article tbody tr:nth-child(even) { background: var(--papier); }

/* Encadre. */
.corps-article aside {
  position: relative;
  margin: 34px 0 38px;
  padding: 26px 28px 22px;
  background-color: var(--bleu-clair);
  background-image: repeating-linear-gradient(var(--biais), rgba(28, 92, 161, 0.05) 0 26px, transparent 26px 52px);
  border-top: 3px solid var(--bleu);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
  font-size: 0.99rem;
}
.corps-article aside p:last-child,
.corps-article aside ul:last-child,
.corps-article aside ol:last-child { margin-bottom: 0; }

/* Citation. */
.corps-article blockquote {
  position: relative;
  margin: 34px 0 38px;
  padding: 26px 28px 24px 30px;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--taupe-rose);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--encre);
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 34px 0 38px;
}
.corps-article figure img {
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 19px));
  border-top: 3px solid var(--bleu);
}
.corps-article figcaption {
  font-family: var(--releve);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 10px;
}

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

.appel-article {
  position: relative;
  max-width: 1000px;
  margin: 52px 0 46px;
  padding: 32px 34px 30px;
  background-color: var(--papier-alt);
  background-image: repeating-linear-gradient(var(--biais), rgba(179, 144, 130, 0.1) 0 52px, transparent 52px 104px);
  border-top: 3px solid var(--bleu);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}
.appel-article .mag-titre-bloc { margin-bottom: 14px; max-width: 28ch; }
.appel-article p { color: var(--encre-douce); max-width: 66ch; }
.appel-article .paire-appuis { margin: 26px 0 0; }

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

.encart-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1000px;
  margin: 0 0 8px;
  padding: 28px 30px 24px;
  background: var(--carte);
  border: 1px solid var(--filet);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--coupe-x) 100%, 0 calc(100% - var(--coupe-y)));
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 12px));
  border-top: 3px solid var(--bleu);
}
.encart-auteur .role {
  font-family: var(--releve);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 6px;
}
.encart-auteur .nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--encre);
  margin: 0 0 10px;
}
.encart-auteur p { font-size: 0.96rem; color: var(--encre-douce); max-width: 68ch; }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi {
  position: relative;
  padding-top: var(--rythme);
  padding-bottom: var(--rythme);
  background: var(--papier-alt);
  overflow: hidden;
}
.lire-aussi .marge { position: relative; z-index: 2; }
.lire-aussi .feuillet { background: var(--carte); }

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

@media (max-width: 1080px) {
  .feuillets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entete-magazine h1 { width: 108%; }
}

@media (max-width: 900px) {
  .entete-magazine { padding-top: 128px; }
  .entete-article { padding-top: 126px; }
  .chapo-article { padding-left: 20px; }
}

@media (max-width: 720px) {
  .feuillets { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .entete-magazine h1 { width: 104%; }
  .corps-article table { display: block; overflow-x: auto; }
  .encart-auteur { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 22px; }
  .appel-article { padding: 26px 22px 24px; }
  .appel-article .paire-appuis .appui { width: 100%; }
  .releve-suite .appui { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .entete-magazine h1 .ligne { animation: none; clip-path: inset(0); }
  .feuillet,
  .feuillet::before { transition-duration: 120ms !important; }
}

@media print {
  .entete-magazine,
  .entete-article { padding-top: 24px; }
  .lire-aussi,
  .appel-article { display: none; }
}

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