/* ==========================================================================
   Nourrizen, feuille de style unique
   Vocabulaire de nommage : plan de travail, eventail, secteur, fiche, encoche,
   etiquette, rayon, constat, temps, formule, pliage, terrazzo, bandeau.
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

:root {
  --fond: #FBF3F1;
  --fond-alt: #F5EAF0;
  --surface: #FFFDF7;
  --texte: #2E1F2C;
  --texte-doux: #5E4A5C;
  --pousse: #365A18;
  --pousse-sombre: #2B4813;
  --vanille: #FBF6E6;
  --aubergine: #7A4E78;
  --bordure: #E2CFD6;

  --encoche: 22px;
  --entete-haut: 68px;
  --rayon-doux: 6px;
  --mesure: 62ch;

  --pas: clamp(1rem, 2.4vw, 1.6rem);
  --respiration: clamp(3.4rem, 8vw, 6.4rem);

  --pile-titre: "Cinzel", "Optima", "Palatino Linotype", Georgia, serif;
  --pile-texte: "Source Serif 4", "Source Serif Pro", Cambria, Georgia, serif;
  --pile-etiquette: "Inconsolata", "Courier New", ui-monospace, monospace;
}

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

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

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

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

a { color: var(--pousse-sombre); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--aubergine); }

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

/* -------------------------------------------------------------- Titres --- */

h1, h2, h3, h4 {
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  font-weight: 600;
  color: var(--texte);
}

h1 { font-size: 2.8rem; font-weight: 700; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.02rem; }

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

.appui { font-weight: 600; }

.etiquette {
  font-family: var(--pile-etiquette);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--aubergine);
  display: inline-block;
}

.etiquette--pousse { color: var(--pousse-sombre); }

.chapo {
  font-size: 1.16rem;
  color: var(--texte-doux);
  max-width: 58ch;
}

/* ----------------------------------------------------- Trame et largeur --- */

.plan-travail {
  width: min(1180px, 100% - 2.4rem);
  margin-inline: auto;
}

.plan-travail--etroit { width: min(820px, 100% - 2.4rem); }

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pousse);
  color: var(--vanille);
  padding: 0.8rem 1.2rem;
  font-family: var(--pile-etiquette);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  z-index: 90;
}
.evitement:focus { left: 12px; top: 12px; }

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.5rem;
  font-family: var(--pile-etiquette);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 0 var(--rayon-doux) var(--rayon-doux) var(--rayon-doux);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease, color 180ms ease;
}

.bouton--pousse {
  background: var(--pousse);
  color: var(--vanille);
}
.bouton--pousse:hover {
  background: var(--pousse-sombre);
  color: var(--vanille);
  transform: translateY(2px);
}

.bouton--petale {
  position: relative;
  background: transparent;
  color: var(--texte);
  border: 1px solid var(--aubergine);
}
.bouton--petale::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--aubergine);
  border-radius: 0 4px 4px 4px;
  pointer-events: none;
}
.bouton--petale:hover {
  background: var(--fond-alt);
  color: var(--texte);
  transform: translateY(2px);
}

.bouton--large { width: 100%; }

/* --------------------------------------------------- Encoche de fiche --- */

.fiche,
.encoche {
  position: relative;
  border-radius: 0 10px 10px 10px;
}

.fiche::before,
.encoche::before {
  content: "";
  position: absolute;
  top: calc(var(--encoche) * -1);
  left: calc(var(--encoche) * -1);
  width: calc(var(--encoche) * 2);
  height: calc(var(--encoche) * 2);
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  pointer-events: none;
  z-index: 2;
}

.sur-alt .fiche::before,
.sur-alt .encoche::before { background: var(--fond-alt); }

.sur-pousse .fiche::before,
.sur-pousse .encoche::before { background: var(--pousse); border-color: var(--pousse-sombre); }

.fiche {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.7rem 1.5rem 1.55rem;
  overflow: visible;
}

/* --------------------------------------------------------- Terrazzo ------ */

.terrazzo-source {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.terrazzo-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.terrazzo-fond--dense { opacity: 0.4; }

/* Trois eclats seulement debordent des cartes de fonctionnalite. */
.fiche--eclats::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 26px;
  width: 12px;
  height: 12px;
  background: var(--aubergine);
  border-radius: 50%;
  opacity: 0.75;
}

.fiche--eclats .eclat-losange,
.fiche--eclats .eclat-virgule {
  position: absolute;
  display: block;
}

.fiche--eclats .eclat-losange {
  right: -6px;
  top: 34px;
  width: 10px;
  height: 10px;
  background: var(--pousse);
  transform: rotate(45deg);
  opacity: 0.8;
}

.fiche--eclats .eclat-virgule {
  left: 22px;
  bottom: -8px;
  width: 16px;
  height: 8px;
  background: var(--bordure);
  border-radius: 8px 8px 0 8px;
}

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

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--entete-haut);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  transition: height 220ms ease, box-shadow 220ms ease;
}

.entete.entete--posee {
  height: 58px;
  box-shadow: 0 2px 0 rgba(122, 78, 120, 0.14);
}

.entete__rangee {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  text-decoration: none;
  color: var(--texte);
  font-family: var(--pile-titre);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.logotype__bol {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  padding: 3px;
}

.rayon-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.rayon-nav a {
  font-family: var(--pile-etiquette);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  text-decoration: none;
  color: var(--texte-doux);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.rayon-nav a:hover,
.rayon-nav a:focus-visible { color: var(--texte); border-bottom-color: var(--pousse); }

.entete__action { display: flex; align-items: center; gap: 0.7rem; }
.entete__action .bouton { min-height: 42px; font-size: 0.78rem; padding: 0 1.05rem; }

.declic-panneau {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: 0 6px 6px 6px;
  cursor: pointer;
  color: var(--texte);
}
.declic-panneau span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--texte);
  position: relative;
}
.declic-panneau span::before,
.declic-panneau span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--texte);
}
.declic-panneau span::before { top: -6px; }
.declic-panneau span::after { top: 6px; }
.declic-panneau[aria-expanded="true"] span { background: transparent; }
.declic-panneau[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.declic-panneau[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.panneau {
  display: none;
  position: fixed;
  top: var(--entete-haut);
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  z-index: 59;
  transform-origin: top center;
  animation: deplier 320ms ease both;
}
.panneau[data-ouvert="oui"] { display: block; }
.panneau ul { list-style: none; margin: 0; padding: 1rem 1.2rem 1.6rem; }
.panneau li { border-bottom: 1px solid var(--bordure); }
.panneau li:last-child { border-bottom: 0; }
.panneau a {
  display: block;
  padding: 0.95rem 0.2rem;
  font-family: var(--pile-etiquette);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--texte);
}
.panneau .bouton { margin: 1rem 0.2rem 0; }

/* ------------------------------------------------- Rythme des sections --- */

.bande {
  position: relative;
  padding-block: var(--respiration);
  isolation: isolate;
}

.bande > .plan-travail { position: relative; z-index: 1; }

.sur-alt { background: var(--fond-alt); }
.sur-surface { background: var(--surface); }

.sur-pousse {
  background: var(--pousse);
  color: var(--vanille);
}
.sur-pousse h2,
.sur-pousse h3 { color: var(--vanille); }
.sur-pousse .etiquette { color: #DCE8C6; }
.sur-pousse p { color: #EFEEDD; }

/* Onglet de section : le meme quart de cercle, en plus grand. */
.bande--onglet::before {
  content: "";
  position: absolute;
  top: -34px;
  left: -34px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  z-index: 2;
}
.sur-alt.bande--onglet::before { background: var(--fond); }
.sur-surface.bande--onglet::before { background: var(--fond-alt); }
.sur-pousse.bande--onglet::before { background: var(--fond-alt); border-color: var(--bordure); }

/* --------------------------------------- Grille en eventail radial ------- */

.eventail {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
  position: relative;
}

.eventail--trois { grid-template-columns: repeat(3, 1fr); }
.eventail--deux { grid-template-columns: repeat(2, 1fr); }

.secteur {
  --rang: 0;
  position: relative;
  transform: translateY(calc(var(--rang) * 13px));
}

.secteur--pivot { transform: translateY(calc(var(--rang) * 13px)) rotate(0.45deg); }

/* Le rayon qui separe deux secteurs de l eventail. */
.rayon-trait {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--bordure), rgba(226, 207, 214, 0));
  transform-origin: top center;
  pointer-events: none;
}

/* Hero : premier secteur etroit, photographie sur le secteur large. */
.hero {
  position: relative;
  padding-top: clamp(2.6rem, 6vw, 4.4rem);
  padding-bottom: var(--respiration);
  overflow: hidden;
}

.hero__eventail {
  display: grid;
  grid-template-columns: minmax(0, 47fr) 1px minmax(0, 53fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
}

.hero__rayon {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom, var(--aubergine), rgba(122, 78, 120, 0));
  transform: rotate(1.4deg);
  transform-origin: top center;
}

.hero h1 { margin-top: 0.7rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.7rem 0 1.5rem;
}

.reassurance {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  border-top: 1px solid var(--bordure);
  padding-top: 1.1rem;
  max-width: 46ch;
}
.reassurance strong {
  font-family: var(--pile-etiquette);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--pousse-sombre);
  line-height: 1;
}
.reassurance span { font-size: 0.98rem; color: var(--texte-doux); }

/* Cadre photographique, coin superieur gauche evide. */
.cadre-photo {
  position: relative;
  border: 1px solid var(--bordure);
  background: var(--surface);
  padding: 6px;
  border-radius: 0 12px 12px 12px;
}
.cadre-photo img {
  width: 100%;
  border-radius: 0 8px 8px 8px;
  -webkit-mask-image: radial-gradient(circle 26px at 0 0, transparent 0 26px, #000 26.6px);
  mask-image: radial-gradient(circle 26px at 0 0, transparent 0 26px, #000 26.6px);
}
.cadre-photo::before {
  content: "";
  position: absolute;
  top: -22px;
  left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  z-index: 2;
}
.sur-alt .cadre-photo::before { background: var(--fond-alt); }
.sur-surface .cadre-photo::before { background: var(--surface); }

.cadre-photo__eclats {
  position: absolute;
  right: -14px;
  bottom: -14px;
  z-index: 3;
  pointer-events: none;
}

.legende-photo {
  font-family: var(--pile-etiquette);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 0.75rem;
}

/* ---------------------------------------- Arc decroissant des constats --- */

.arc {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.arc li {
  --rang: 0;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--aubergine);
  border-radius: 0 10px 10px 10px;
  padding: 1.15rem 1.3rem;
  width: calc(100% - var(--rang) * 4.4%);
  margin-left: calc(var(--rang) * 2.2%);
}

.arc li h3 { margin-bottom: 0.35rem; }
.arc li p { margin: 0; color: var(--texte-doux); max-width: 68ch; }

.arc li .compte {
  font-family: var(--pile-etiquette);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--pousse-sombre);
  display: block;
  margin-bottom: 0.3rem;
}

.cout-encadre {
  margin-top: 2.4rem;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  padding: 1.5rem 1.6rem;
  position: relative;
}
.sur-surface .cout-encadre { background: var(--fond); }

/* ------------------------------------------------- Les quatre temps ------ */

.temps-suite {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.temps {
  --rang: 0;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  padding: 1.5rem 1.25rem 1.35rem;
  transform: translateY(calc(var(--rang) * 16px));
}

.temps__numero {
  font-family: var(--pile-etiquette);
  font-size: 2rem;
  font-weight: 700;
  color: var(--pousse);
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
}

.temps h3 { font-size: 1.08rem; }
.temps p { font-size: 0.99rem; color: var(--texte-doux); margin: 0; }

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

.fiche--fonction h3 { margin-bottom: 0.5rem; }
.fiche--fonction p { color: var(--texte-doux); font-size: 1rem; margin: 0; }
.fiche--fonction .etiquette { margin-bottom: 0.55rem; }

/* ------------------------------------------------------- Avantages ------- */

.gains {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.gain {
  --rang: 0;
  border-top: 3px solid var(--pousse);
  padding-top: 1.1rem;
  transform: translateY(calc(var(--rang) * 11px));
}
.gain strong {
  display: block;
  font-family: var(--pile-etiquette);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--pousse-sombre);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.gain h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.gain p { font-size: 0.98rem; color: var(--texte-doux); margin: 0; }

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

.temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 2.3rem;
}

.temoignage {
  --rang: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  padding: 1.6rem 1.4rem 1.3rem;
  position: relative;
  transform: translateY(calc(var(--rang) * 14px));
}
.temoignage blockquote { margin: 0 0 1rem; }
.temoignage blockquote p { font-size: 1rem; margin-bottom: 0.7rem; }
.temoignage figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 0.8rem;
  font-size: 0.93rem;
  color: var(--texte-doux);
}
.temoignage figcaption b {
  display: block;
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.92rem;
  color: var(--texte);
}

.bandeau-chiffres {
  position: relative;
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bordure);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  overflow: hidden;
}
.bandeau-chiffres div {
  background: var(--surface);
  padding: 1.4rem 1.15rem;
  position: relative;
  z-index: 1;
}
.bandeau-chiffres b {
  display: block;
  font-family: var(--pile-etiquette);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pousse-sombre);
  line-height: 1.1;
}
.bandeau-chiffres span {
  display: block;
  font-size: 0.93rem;
  color: var(--texte-doux);
  margin-top: 0.3rem;
}

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

.formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 2.4rem;
  align-items: start;
}

.formule {
  --rang: 0;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  padding: 1.8rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--rang) * 15px));
}

.formule--ouverte {
  border-color: var(--pousse);
  border-width: 2px;
  transform: translateY(0);
  box-shadow: 0 10px 0 -6px rgba(54, 90, 24, 0.18);
}

.formule__fanion {
  position: absolute;
  top: -13px;
  right: 14px;
  background: var(--pousse);
  color: var(--vanille);
  font-family: var(--pile-etiquette);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 0 5px 5px 5px;
}

.formule h3 { margin-bottom: 0.4rem; }

.formule__prix {
  font-family: var(--pile-etiquette);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--texte);
  line-height: 1;
  display: block;
}
.formule__unite {
  display: block;
  font-family: var(--pile-etiquette);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0.4rem 0 1rem;
}
.formule__cible {
  font-size: 0.98rem;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.formule ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.62rem;
  flex: 1;
}
.formule li {
  position: relative;
  padding-left: 1.55rem;
  font-size: 0.98rem;
}
.formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--pousse);
  transform: rotate(45deg);
}

.note-tarifs {
  margin-top: 2rem;
  font-size: 0.97rem;
  color: var(--texte-doux);
  max-width: 78ch;
}

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

.pliages {
  margin-top: 2.2rem;
  display: grid;
  gap: 0.9rem;
}

.pliage {
  --rang: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  overflow: hidden;
}

.pliage__declic {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.15rem 1.3rem;
  cursor: pointer;
  font-family: var(--pile-titre);
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte);
  line-height: 1.3;
}
.pliage__declic:hover { background: var(--fond-alt); }

.pliage__croix {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: 0 5px 5px 5px;
  background: var(--fond-alt);
}
.pliage__croix::before,
.pliage__croix::after {
  content: "";
  position: absolute;
  background: var(--pousse-sombre);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pliage__croix::before { width: 12px; height: 2px; }
.pliage__croix::after { width: 2px; height: 12px; transition: transform 240ms ease; }
.pliage__declic[aria-expanded="true"] .pliage__croix::after { transform: translate(-50%, -50%) scaleY(0); }

.pliage__reponse {
  padding: 0 1.3rem 1.3rem;
  transform-origin: top center;
  animation: deplier 380ms ease both;
}
.pliage__reponse[hidden] { display: none; }
.pliage__reponse p { color: var(--texte-doux); font-size: 1rem; max-width: 74ch; }

/* -------------------------------------------------------- Formulaire ----- */

.contact-eventail {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
  margin-top: 2.2rem;
}

.contact-appui p { color: var(--texte-doux); }
.contact-appui ul {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.contact-appui li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.99rem;
  color: var(--texte-doux);
}
.contact-appui li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aubergine);
}

.formulaire {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 12px 12px 12px;
  padding: 1.9rem 1.7rem;
  position: relative;
}

.champ { margin-bottom: 1.15rem; }
.champ:last-of-type { margin-bottom: 1.4rem; }

.champ label,
.champ .intitule {
  display: block;
  font-family: var(--pile-etiquette);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--texte-doux);
  margin-bottom: 0.42rem;
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--pile-texte);
  font-size: 1.02rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 0 6px 6px 6px;
  padding: 0.75rem 0.8rem;
  min-height: 52px;
}
.champ textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.champ select { appearance: none; background-image: none; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--pousse); }

.champ--case {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: 0 6px 6px 6px;
  padding: 0.95rem 1rem;
}
.champ--case input { margin-top: 0.35rem; width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--pousse); }
.champ--case label {
  font-family: var(--pile-texte);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  color: var(--texte);
  margin: 0;
  line-height: 1.55;
}

.apres-formulaire {
  margin-top: 1.2rem;
  font-size: 0.94rem;
  color: var(--texte-doux);
}

/* ---------------------------------------------------------- Pied ---------- */

.pied {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding-block: clamp(2.8rem, 6vw, 4.2rem) 0;
}

.pied__colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.pied h2,
.pied h3 {
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
  color: var(--texte);
}

.pied p { font-size: 0.95rem; color: var(--texte-doux); max-width: 40ch; }

.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pied a { color: var(--texte-doux); text-decoration: none; font-size: 0.95rem; }
.pied a:hover { color: var(--pousse-sombre); text-decoration: underline; }

.pied__sociaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.pied__sociaux a {
  font-family: var(--pile-etiquette);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  border: 1px solid var(--bordure);
  background: var(--surface);
  border-radius: 0 5px 5px 5px;
  padding: 0.4rem 0.65rem;
}

.pied__barre {
  margin-top: 2.6rem;
  border-top: 1px solid var(--bordure);
  padding-block: 1.2rem 1.6rem;
  font-size: 0.9rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

/* -------------------------------------------------- Pages secondaires ---- */

.page-tete {
  padding-block: clamp(2.6rem, 6vw, 4rem) clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--bordure);
  position: relative;
}

.fil {
  font-family: var(--pile-etiquette);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--texte-doux);
  margin-bottom: 0.9rem;
}
.fil a { color: var(--texte-doux); }

.texte-long { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.texte-long h2 { margin-top: 2.4rem; }
.texte-long h2:first-of-type { margin-top: 0; }
.texte-long h3 { margin-top: 1.6rem; }
.texte-long ul, .texte-long ol { max-width: var(--mesure); padding-left: 1.2rem; }
.texte-long li { margin-bottom: 0.5rem; }
.texte-long dl { max-width: var(--mesure); }
.texte-long dt { font-weight: 600; margin-top: 1rem; }
.texte-long dd { margin: 0.2rem 0 0; color: var(--texte-doux); }

.portrait-auteur {
  float: none;
  margin: 0 0 1.6rem;
  max-width: 220px;
}
.portrait-auteur img {
  border-radius: 0 10px 10px 10px;
  border: 1px solid var(--bordure);
}

.liens-profils {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding: 0;
  list-style: none;
}
.liens-profils a {
  display: inline-block;
  font-family: var(--pile-etiquette);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  text-decoration: none;
  border: 1px solid var(--bordure);
  background: var(--surface);
  border-radius: 0 5px 5px 5px;
  padding: 0.5rem 0.8rem;
  color: var(--texte);
}
.liens-profils a:hover { background: var(--fond-alt); }

.plan-liste { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 1rem; }
.plan-liste li {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  padding: 1.1rem 1.25rem;
}
.plan-liste a { font-family: var(--pile-titre); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.98rem; text-decoration: none; }
.plan-liste p { margin: 0.35rem 0 0; font-size: 0.97rem; color: var(--texte-doux); max-width: 76ch; }

.centre-court {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  text-align: left;
}
.centre-court .bouton { margin-top: 1.4rem; }

/* -------------------------------------------- Depliement vertical -------- */

@keyframes deplier {
  from { opacity: 0; transform: scaleY(0.86); }
  to { opacity: 1; transform: scaleY(1); }
}

.deplie {
  opacity: 0;
  transform: scaleY(0.86);
  transform-origin: top center;
  transition: opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--attente, 0ms);
}
.deplie.deplie--ouvert { opacity: 1; transform: scaleY(1); }

.deplie img { opacity: 1; }

/* ---------------------------------------------------------- Ecrans ------- */

@media (max-width: 1040px) {
  .temps-suite { grid-template-columns: repeat(2, 1fr); }
  .bandeau-chiffres { grid-template-columns: repeat(2, 1fr); }
  .pied__colonnes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .rayon-nav { display: none; }
  .entete__action .bouton--pousse { display: none; }
  .declic-panneau { display: inline-flex; }
  .hero__eventail { grid-template-columns: 1fr; }
  .hero__rayon { display: none; }
  .eventail--trois,
  .eventail--deux,
  .gains,
  .temoignages,
  .formules { grid-template-columns: 1fr; }
  .contact-eventail { grid-template-columns: 1fr; }
  .secteur,
  .secteur--pivot,
  .temps,
  .gain,
  .temoignage,
  .formule { transform: translateY(0); }
  .secteur:nth-child(even),
  .temoignage:nth-child(even),
  .formule:nth-child(even) { margin-left: 12px; }
  .arc li { width: 100%; margin-left: 0; }
  h1 { font-size: 2.1rem; }
  body { font-size: 1.05rem; }
}

@media (max-width: 620px) {
  .temps-suite { grid-template-columns: 1fr; }
  .bandeau-chiffres { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: 1fr; }
  .formulaire { padding: 1.4rem 1.15rem; }
  :root { --encoche: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .deplie { opacity: 1; transform: none; transition: none; }
  .panneau,
  .pliage__reponse { animation: none; }
  .bouton { transition: none; }
  .bouton--pousse:hover,
  .bouton--petale:hover { transform: none; }
}

@media print {
  .entete, .panneau, .pied__sociaux, .formulaire { display: none; }
  body { background: #fff; }
}
/* ==========================================================================
   LA FICHE DU JOUR, section magazine
   Ajout en fin de feuille, aucune regle precedente n est touchee.
   Meme palette, meme encoche de fiche plastifiee, meme terrazzo d eclats,
   meme depliement vertical que le reste de Nourrizen.
   Vocabulaire : sommaire, carte-article, reperes, tete-article,
   corps-article, encart-auteur, lire-aussi, derniers.
   ========================================================================== */

:root {
  --mesure-lecture: 66ch;
  --encoche-carte: 18px;
}

/* ----------------------------------------- Reperes du magazine (Inconsolata) */

.reperes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 0.9rem;
  font-family: var(--pile-etiquette);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--texte-doux);
  list-style: none;
  padding: 0;
}

.reperes > * { margin: 0; }

.reperes__angle {
  color: var(--vanille);
  background: var(--pousse);
  border-radius: 0 5px 5px 5px;
  padding: 0.28rem 0.6rem;
  font-weight: 600;
}

.reperes__duree {
  color: var(--aubergine);
  border: 1px solid var(--bordure);
  background: var(--surface);
  border-radius: 0 5px 5px 5px;
  padding: 0.26rem 0.6rem;
}

.reperes time { color: var(--texte-doux); }

/* --------------------------------------------------- Sommaire du magazine --- */

.sommaire {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.3rem, 2.6vw, 2.1rem);
  align-items: start;
}

.sommaire--deux { grid-template-columns: repeat(2, 1fr); }

/* L eventail radial : chaque colonne descend un peu plus que la precedente. */
.carte-article {
  --rang: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  margin-top: calc(var(--rang) * 15px);
  overflow: visible;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* Encoche de fiche plastifiee, quart de cercle evide double d un filet. */
.carte-article::before {
  content: "";
  position: absolute;
  top: calc(var(--encoche-carte) * -1);
  left: calc(var(--encoche-carte) * -1);
  width: calc(var(--encoche-carte) * 2);
  height: calc(var(--encoche-carte) * 2);
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  pointer-events: none;
  z-index: 2;
}

.sur-alt .carte-article::before { background: var(--fond-alt); }
.sur-surface .carte-article::before { background: var(--surface); }

/* Un seul eclat de terrazzo deborde d une carte de sommaire. */
.carte-article::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 30px;
  width: 11px;
  height: 11px;
  background: var(--aubergine);
  transform: rotate(45deg);
  opacity: 0.75;
  pointer-events: none;
}

.carte-article:hover { border-color: var(--pousse); }
.carte-article:hover { box-shadow: 0 10px 0 -6px rgba(54, 90, 24, 0.16); }
.carte-article:focus-within { border-color: var(--pousse); }

.carte-article__vue {
  margin: 0;
  padding: 6px 6px 0;
  position: relative;
}

.carte-article__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0 8px 8px 8px;
  -webkit-mask-image: radial-gradient(circle 20px at 0 0, transparent 0 20px, #000 20.6px);
  mask-image: radial-gradient(circle 20px at 0 0, transparent 0 20px, #000 20.6px);
}

.carte-article__texte {
  padding: 1.2rem 1.35rem 1.45rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.carte-article__titre {
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.24;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.65rem;
  color: var(--texte);
}

.carte-article__titre a {
  color: inherit;
  text-decoration: none;
}
.carte-article__titre a:hover { color: var(--pousse-sombre); text-decoration: underline; }

.carte-article__extrait {
  margin: 0 0 1.1rem;
  font-size: 0.98rem;
  color: var(--texte-doux);
  max-width: none;
  flex: 1;
}

.carte-article__pied {
  border-top: 1px solid var(--bordure);
  padding-top: 0.75rem;
  margin: 0;
  font-family: var(--pile-etiquette);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
}

.carte-article__pied .separateur { color: var(--bordure); }

/* --------------------------------------- Entete d un article du magazine --- */

.tete-article {
  position: relative;
  padding-block: clamp(2.2rem, 5vw, 3.4rem) clamp(1.4rem, 3vw, 2.2rem);
  overflow: hidden;
}

.tete-article__eventail {
  position: relative;
  max-width: 74ch;
  padding-left: clamp(0px, 2vw, 26px);
}

.tete-article__rayon {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--aubergine), rgba(122, 78, 120, 0));
  transform: rotate(0.9deg);
  transform-origin: top center;
  pointer-events: none;
}

.tete-article h1 {
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
}

.tete-article__signature {
  font-family: var(--pile-etiquette);
  font-size: 0.79rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  padding-top: 0.85rem;
  margin: 1.2rem 0 0;
  max-width: none;
}
.tete-article__signature a { color: var(--texte-doux); }

/* Exergue du chapeau, encoche comprise. */
.chapo-article {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--pousse);
  border-radius: 0 10px 10px 10px;
  padding: 1.25rem 1.4rem;
  margin: 1.4rem 0 0;
  font-size: 1.13rem;
  line-height: 1.65;
  color: var(--texte);
  max-width: 68ch;
}

.chapo-article::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  pointer-events: none;
}

/* Image a la une de l article. */
.figure-une {
  margin: clamp(1.6rem, 3.4vw, 2.4rem) 0 0;
  position: relative;
  border: 1px solid var(--bordure);
  background: var(--surface);
  padding: 6px;
  border-radius: 0 12px 12px 12px;
}
.figure-une img {
  width: 100%;
  border-radius: 0 8px 8px 8px;
  -webkit-mask-image: radial-gradient(circle 24px at 0 0, transparent 0 24px, #000 24.6px);
  mask-image: radial-gradient(circle 24px at 0 0, transparent 0 24px, #000 24.6px);
}
.figure-une::before {
  content: "";
  position: absolute;
  top: -22px;
  left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  z-index: 2;
}
.figure-une__eclats {
  position: absolute;
  right: -14px;
  bottom: -14px;
  z-index: 3;
  pointer-events: none;
}

/* ------------------------------------------------------- Corps redactionnel --
   Le corps arrive en HTML nu, sans une seule classe : toutes les balises
   sont donc mises en forme ici, en tant que descendantes de .corps-article. */

.corps-magazine { padding-block: clamp(2.2rem, 5vw, 3.4rem); }

.corps-article {
  max-width: var(--mesure-lecture);
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--texte);
}

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

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

.corps-article h2 {
  font-size: 1.5rem;
  letter-spacing: 0.07em;
  line-height: 1.2;
  margin: 2.6rem 0 0.85rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--pousse);
}

.corps-article h3 {
  font-size: 1.12rem;
  letter-spacing: 0.07em;
  color: var(--aubergine);
  margin: 1.9rem 0 0.6rem;
}

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

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

/* Listes a puces : le losange de terrazzo sert de marqueur. */
.corps-article ul {
  list-style: none;
  margin: 0 0 1.35em;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.corps-article ul li {
  position: relative;
  padding-left: 1.6rem;
}
.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 9px;
  height: 9px;
  background: var(--pousse);
  transform: rotate(45deg);
}

/* Listes numerotees : le chiffre monospace, comme une etape de fiche. */
.corps-article ol {
  list-style: none;
  counter-reset: etape;
  margin: 0 0 1.35em;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.corps-article ol li {
  position: relative;
  padding-left: 2.3rem;
  counter-increment: etape;
}
.corps-article ol li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0.06em;
  width: 1.65rem;
  text-align: left;
  font-family: var(--pile-etiquette);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pousse-sombre);
}

.corps-article li { margin: 0; }
.corps-article li p { margin: 0.35em 0 0; }
.corps-article ul ul,
.corps-article ol ol,
.corps-article ul ol,
.corps-article ol ul { margin: 0.6rem 0 0; }

/* Tableau recapitulatif : coin superieur gauche carre, en tete vert pousse. */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  overflow: hidden;
  font-size: 0.99rem;
}

.corps-article thead th {
  background: var(--pousse);
  color: var(--vanille);
  font-family: var(--pile-etiquette);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  text-align: left;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--pousse-sombre);
}

.corps-article tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--texte);
}

.corps-article td,
.corps-article tbody th {
  padding: 0.78rem 0.9rem;
  border-bottom: 1px solid var(--bordure);
  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(--fond); }

/* Encadre : la fiche posee dans le fil du texte, encoche comprise. */
.corps-article aside {
  position: relative;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  padding: 1.35rem 1.45rem;
  margin: 2rem 0;
}
.corps-article aside::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  pointer-events: none;
}
.corps-article aside::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pousse);
  opacity: 0.8;
}
.corps-article aside p { font-size: 1rem; }
.corps-article aside > *:last-child { margin-bottom: 0; }

/* Citation : filet aubergine et guillemet en Cinzel. */
.corps-article blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 0.4rem 0 0.4rem 1.7rem;
  border-left: 3px solid var(--aubergine);
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--texte);
}
.corps-article blockquote p { margin-bottom: 0.7em; }
.corps-article blockquote > *:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 2rem 0;
  border: 1px solid var(--bordure);
  background: var(--surface);
  padding: 6px;
  border-radius: 0 10px 10px 10px;
}
.corps-article figure img { border-radius: 0 6px 6px 6px; }
.corps-article figcaption {
  font-family: var(--pile-etiquette);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  padding: 0.7rem 0.4rem 0.2rem;
}

/* ------------------------------------------------- Appel a l action final --- */

.appel-article {
  position: relative;
  max-width: var(--mesure-lecture);
  margin: 2.6rem 0 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--pousse);
  border-radius: 0 10px 10px 10px;
  padding: 1.5rem 1.5rem 1.6rem;
}
.appel-article p { max-width: none; }
.appel-article .bouton { margin-top: 1rem; }

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

.encart-auteur {
  position: relative;
  max-width: var(--mesure-lecture);
  margin: 2.4rem 0 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  padding: 1.4rem 1.5rem;
}
.encart-auteur::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  pointer-events: none;
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  border-radius: 0 8px 8px 8px;
  border: 1px solid var(--bordure);
  object-fit: cover;
  background: var(--surface);
}
.encart-auteur__nom {
  display: block;
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 0.45rem;
}
.encart-auteur p {
  font-size: 0.98rem;
  color: var(--texte-doux);
  max-width: none;
  margin: 0 0 0.6rem;
}
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi {
  position: relative;
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  border-top: 1px solid var(--bordure);
  background: var(--fond-alt);
  isolation: isolate;
}
.lire-aussi > .plan-travail { position: relative; z-index: 1; }

.lire-aussi__titre {
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 0.4rem;
}

.lire-aussi__appui {
  font-family: var(--pile-etiquette);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--texte-doux);
  margin: 0;
}

.lire-aussi .sommaire { margin-top: 2rem; }

.carte-lire {
  --rang: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0 10px 10px 10px;
  margin-top: calc(var(--rang) * 13px);
  transition: border-color 200ms ease;
}
.carte-lire::before {
  content: "";
  position: absolute;
  top: calc(var(--encoche-carte) * -1);
  left: calc(var(--encoche-carte) * -1);
  width: calc(var(--encoche-carte) * 2);
  height: calc(var(--encoche-carte) * 2);
  border-radius: 50%;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  pointer-events: none;
  z-index: 2;
}
.carte-lire:hover { border-color: var(--pousse); }

.carte-lire img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0 8px 8px 8px;
  -webkit-mask-image: radial-gradient(circle 18px at 0 0, transparent 0 18px, #000 18.6px);
  mask-image: radial-gradient(circle 18px at 0 0, transparent 0 18px, #000 18.6px);
}

.carte-lire__vue { margin: 0; padding: 6px 6px 0; }

.carte-lire__texte { padding: 1.05rem 1.2rem 1.25rem; }

.carte-lire__titre {
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.26;
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 0.55rem;
}
.carte-lire__titre a { color: var(--texte); text-decoration: none; }
.carte-lire__titre a:hover { color: var(--pousse-sombre); text-decoration: underline; }

.carte-lire__accroche {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
  max-width: none;
}

/* ------------------------------- Derniers articles, section de la page d accueil --- */

.derniers__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.derniers__tete .chapo { margin-bottom: 0; }
.derniers__lien { margin-top: 2.4rem; }

/* --------------------------------------- Liste datee des articles publies --- */

.liste-parutions {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.liste-parutions li {
  --rang: 0;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--aubergine);
  border-radius: 0 10px 10px 10px;
  padding: 1rem 1.2rem;
  margin-left: calc(var(--rang) * 6px);
}
.liste-parutions a {
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.97rem;
  line-height: 1.3;
  text-decoration: none;
  color: var(--texte);
  display: inline-block;
}
.liste-parutions a:hover { color: var(--pousse-sombre); text-decoration: underline; }
.liste-parutions .reperes { margin: 0.5rem 0 0; font-size: 0.74rem; }

/* ------------------------------------------------------------------ Ecrans --- */

@media (max-width: 1040px) {
  .sommaire { grid-template-columns: repeat(2, 1fr); }
  .carte-article,
  .carte-lire { margin-top: 0; }
  .sommaire > *:nth-child(even) { margin-top: 14px; }
}

@media (max-width: 900px) {
  .tete-article h1 { font-size: 1.85rem; }
  .corps-article h2 { font-size: 1.32rem; }
  .corps-article table { display: block; overflow-x: auto; }
  .encart-auteur { grid-template-columns: 1fr; }
  .encart-auteur img { width: 84px; height: 84px; }
}

@media (max-width: 620px) {
  .sommaire { grid-template-columns: 1fr; }
  .sommaire > *:nth-child(even) { margin-left: 12px; margin-top: 0; }
  .chapo-article { font-size: 1.06rem; padding: 1.1rem 1.15rem; }
  .corps-article { font-size: 1.05rem; }
  :root { --encoche-carte: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-article,
  .carte-lire { transition: none; }
}

@media print {
  .lire-aussi, .appel-article { display: none; }
  .corps-article { max-width: none; }
}

/* ---------------------------- Complements du magazine, poses avec le gabarit --
   Le corps des articles arrive sans classe : les titres de pied de page des
   pages du magazine passent donc en paragraphes, et retrouvent ici l aspect
   exact des titres de colonne du reste du site. */

.pied__titre {
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.12;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 1rem;
  max-width: none;
}

/* Appel a l action de fin d article, meme encoche que les fiches. */
.appel-article__titre {
  font-family: var(--pile-titre);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.16;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 0.8rem;
  max-width: none;
}

.appel-article__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.3rem;
}
.appel-article__boutons .bouton { margin-top: 0; }

.encart-auteur .etiquette { margin-bottom: 0.35rem; }

/* Note de fin du bloc A lire aussi. */
.lire-aussi__note {
  margin: 2.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.94rem;
  color: var(--texte-doux);
  max-width: 78ch;
}

/* L eventail radial du bloc A lire aussi : les trois cartes viennent de
   l assembleur, le decalage de secteur est donc porte par la feuille de style. */
.lire-aussi .sommaire > li:nth-child(2) .carte-lire { margin-top: 13px; }
.lire-aussi .sommaire > li:nth-child(3) .carte-lire { margin-top: 26px; }

@media (max-width: 1040px) {
  .lire-aussi .sommaire > li:nth-child(2) .carte-lire,
  .lire-aussi .sommaire > li:nth-child(3) .carte-lire { margin-top: 0; }
  .lire-aussi .sommaire > li:nth-child(even) .carte-lire { margin-top: 14px; }
}

@media (max-width: 620px) {
  .lire-aussi .sommaire > li:nth-child(even) .carte-lire { margin-top: 0; }
  .appel-article__boutons .bouton { width: 100%; }
}

/* L entete d article passe au dessus du semis de terrazzo, comme les bandes du site. */
.tete-article > .plan-travail { position: relative; z-index: 1; }

/* 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}