/* ==========================================================================
   Cantiline, feuille de style unique
   Vocabulaire des classes emprunte au cahier de regie d une cuisine centrale :
   quai, regie, bandeau, bordereau, filet, sillon, jauge, releve, palier.
   ========================================================================== */

:root {
  --fond: #F3F3F2;
  --fond-alt: #E7E6E3;
  --surface: #FFFFFF;
  --texte: #17181A;
  --texte-doux: #55585C;
  --accent: #F9BC06;
  --accent-texte: #17181A;
  --accent-brule: #7A5D04;
  --bordure: #D2D2CF;
  --graphite: #17181A;
  --graphite-clair: #2C2E31;
  --blanc-casse: #F6F5F2;

  --regie: 1180px;
  --gouttiere: 28px;
  --quai-haut: 72px;
  --quai-bas: 60px;
  --lisiere-haute: 64px;
  --lisiere-basse: 88px;

  --titre: "Fredoka", "Trebuchet MS", sans-serif;
  --corps: "Alegreya", Georgia, "Times New Roman", serif;
  --accent-police: "Signika", "Segoe UI", Arial, sans-serif;

  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1.08rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1 { font-size: 3.4rem; font-weight: 600; }
h2 { font-size: 2.3rem; font-weight: 500; }
h3 { font-size: 1.35rem; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 500; }

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

strong { font-weight: 700; }

a { color: var(--accent-brule); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--texte); }

ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.5em; }

small, .menu-fin, figcaption, .legende {
  font-family: var(--accent-police);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(249, 188, 6, 0.85);
}

/* --------------------------------------------------------------------------
   Conteneurs et rythme des bandeaux
   -------------------------------------------------------------------------- */

.regie {
  width: 100%;
  max-width: var(--regie);
  margin: 0 auto;
  padding: 0 24px;
}

.bandeau {
  position: relative;
  padding: 76px 0 84px;
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
}

.bandeau + .bandeau { border-top: 0; box-shadow: inset 0 -5px 0 -4px var(--bordure); }

.bandeau--kraft { background: var(--fond-alt); }
.bandeau--graphite { background: var(--graphite); color: var(--blanc-casse); border-color: #000; }
.bandeau--graphite h2, .bandeau--graphite h3 { color: var(--blanc-casse); }
.bandeau--graphite p { color: #D9D8D4; }

.mention {
  display: inline-block;
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brule);
  margin: 0 0 14px;
  padding-left: 44px;
  position: relative;
}
.mention::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 32px;
  height: 3px;
  background: var(--accent);
}
.bandeau--graphite .mention { color: var(--accent); }
.bandeau--graphite .mention::before { background: var(--accent); }

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

.tete-de-bandeau { margin-bottom: 46px; }

/* --------------------------------------------------------------------------
   Motif signature : rangs de culture
   -------------------------------------------------------------------------- */

.rangs {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.rangs path { fill: none; stroke: var(--graphite); opacity: 0.12; }
.rangs .rang-ambre { stroke: var(--accent); opacity: 0.4; }

.rangs--clair path { stroke: var(--blanc-casse); opacity: 0.14; }
.rangs--clair .rang-ambre { stroke: var(--accent); opacity: 0.42; }

.separateur-rangs {
  background: var(--fond-alt);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  line-height: 0;
  overflow: hidden;
}

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

.bouton-tampon,
.bouton-filet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--courbe), background-color 0.22s var(--courbe);
}

.bouton-tampon {
  background: var(--accent);
  color: var(--accent-texte);
  border: 0;
  border-bottom: 2px solid var(--graphite);
  border-radius: 4px 4px 0 0;
}
.bouton-tampon:hover { background: #E2A705; color: var(--accent-texte); transform: translateX(2px); }

.bouton-filet {
  background: transparent;
  color: var(--texte);
  border: 0;
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  border-radius: 0;
  position: relative;
}
.bouton-filet::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s var(--courbe);
}
.bouton-filet:hover { color: var(--texte); transform: translateX(2px); }
.bouton-filet:hover::before { width: 32px; }

.bandeau--graphite .bouton-filet { color: var(--blanc-casse); border-color: var(--blanc-casse); }
.bandeau--graphite .bouton-filet:hover { color: var(--accent); }

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

/* --------------------------------------------------------------------------
   En tete fixe, le quai
   -------------------------------------------------------------------------- */

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

.quai {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--quai-haut);
  background: var(--graphite);
  z-index: 120;
  transition: height 0.25s var(--courbe);
}
.quai.est-tasse { height: var(--quai-bas); }

.quai__interieur {
  height: 100%;
  max-width: var(--regie);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.quai__progression {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.25s linear;
}
.quai.est-tasse .quai__progression { opacity: 1; }

.marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--blanc-casse);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}
.marque:hover { color: var(--accent); }
.marque svg { flex: 0 0 auto; }

.quai__nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.quai__nav a {
  font-family: var(--accent-police);
  font-weight: 500;
  font-size: 0.92rem;
  color: #DDDCD8;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.quai__nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.quai__action { margin-left: 8px; min-height: 42px; }

.trois-rangs {
  display: none;
  width: 46px;
  height: 42px;
  margin-left: auto;
  background: transparent;
  border: 2px solid #4A4C50;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.trois-rangs span { display: block; width: 24px; height: 2px; background: var(--blanc-casse); margin: 3px auto; }
.trois-rangs span:nth-child(2) { background: var(--accent); width: 30px; }

.panneau {
  position: fixed;
  inset: 0;
  background: var(--graphite);
  z-index: 130;
  display: none;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
.panneau.est-ouvert { display: flex; }
.panneau__fermer {
  align-self: flex-end;
  background: transparent;
  border: 2px solid #4A4C50;
  color: var(--blanc-casse);
  font-family: var(--accent-police);
  font-size: 0.95rem;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 3px;
}
.panneau nav { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; }
.panneau nav a {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--blanc-casse);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid #34363A;
}
.panneau nav a:hover { color: var(--accent); }
.panneau .bouton-tampon { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Hero en ecran large, ceinture de deux bandes sombres
   -------------------------------------------------------------------------- */

.grand-bandeau {
  margin-top: var(--quai-haut);
  background: var(--fond-alt);
  position: relative;
  overflow: hidden;
}

.grand-bandeau__lisiere {
  background: var(--graphite);
  height: var(--lisiere-haute);
  position: relative;
}

.grand-bandeau__pied {
  background: var(--graphite);
  min-height: var(--lisiere-basse);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.grand-bandeau__pied .rangs {
  position: absolute;
  inset: auto 0 -20px 0;
  width: 100%;
}

.reassurance {
  position: relative;
  z-index: 2;
  max-width: var(--regie);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  align-items: center;
  font-family: var(--accent-police);
  font-size: 0.95rem;
  color: #DEDDD9;
}
.reassurance b { color: var(--accent); font-weight: 600; }

.grand-bandeau__corps {
  max-width: var(--regie);
  margin: 0 auto;
  padding: 62px 24px 66px;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 52px;
  align-items: center;
}

.grand-bandeau h1 { margin-bottom: 22px; }
.grand-bandeau__intro { font-size: 1.24rem; color: var(--texte-doux); max-width: 54ch; }

.tampon-seuil {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 2px 8px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Jauges de taux
   -------------------------------------------------------------------------- */

.tableau-jauges {
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  padding: 26px 24px 24px;
  position: relative;
}
.tableau-jauges::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.tableau-jauges__titre {
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 20px;
}

.jauge { margin-bottom: 22px; }
.jauge:last-child { margin-bottom: 0; }
.jauge__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--accent-police);
  font-size: 0.92rem;
  color: var(--texte-doux);
  margin-bottom: 6px;
}
.jauge__valeur {
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.jauge__valeur--petit { font-size: 1.7rem; }
.jauge__piste {
  position: relative;
  height: 16px;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  overflow: hidden;
}
.jauge__remplissage {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
  transition: width 0.9s var(--courbe);
}
.jauge__seuil {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--graphite);
}
.jauge__note {
  font-family: var(--accent-police);
  font-size: 0.82rem;
  color: var(--texte-doux);
  margin-top: 6px;
  display: block;
}

/* --------------------------------------------------------------------------
   Bandes photographiques en 21 pour 9
   -------------------------------------------------------------------------- */

.bande-photo {
  background: var(--graphite);
  padding: 48px 0;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
.bande-photo figure { margin: 0; position: relative; }
.bande-photo img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: saturate(0.65) contrast(1.03);
  border-left: 3px solid var(--accent);
}
.bande-photo figure::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 21 / 9;
  background: var(--accent);
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.bande-photo figcaption {
  max-width: var(--regie);
  margin: 0 auto;
  padding: 16px 24px 0;
  color: #C9C8C4;
}

/* --------------------------------------------------------------------------
   Probleme, deux colonnes de texte
   -------------------------------------------------------------------------- */

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px var(--gouttiere);
}

.encart-cout {
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  padding: 24px 22px;
  position: relative;
  margin-top: 12px;
}
.encart-cout::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.encart-cout p:last-child { margin-bottom: 0; }
.encart-cout h3 { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Solution, quatre temps numerotes
   -------------------------------------------------------------------------- */

.quatre-temps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gouttiere);
}

.temps {
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  padding: 22px 18px 24px;
  position: relative;
  background: var(--surface);
}
.temps::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.temps__rang {
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brule);
  display: block;
  margin-bottom: 10px;
}
.temps h3 { margin-bottom: 8px; }
.temps p { font-size: 1rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Fonctionnalites, six bordereaux
   -------------------------------------------------------------------------- */

.six-bordereaux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px var(--gouttiere);
}

.bordereau {
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  padding: 24px 20px 26px;
  position: relative;
}
.bordereau::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.bordereau__pictogramme { margin-bottom: 14px; display: block; }
.bordereau h3 { margin-bottom: 10px; }
.bordereau p { font-size: 1rem; margin-bottom: 0; }

.familles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
}
.familles li {
  font-family: var(--accent-police);
  font-size: 0.84rem;
  font-weight: 500;
  border: 1px solid var(--bordure);
  background: var(--surface);
  padding: 5px 12px;
  margin: 0;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   Avantages, trois bandeaux a jauge
   -------------------------------------------------------------------------- */

.gain {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--bordure);
}
.gain:first-of-type { border-top: 0; }
.gain h3 { margin-bottom: 8px; }
.gain p { margin-bottom: 0; font-size: 1rem; }
.gain__chiffre {
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1.05;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  display: block;
}
.gain__unite {
  font-family: var(--accent-police);
  font-size: 0.9rem;
  color: var(--texte-doux);
  display: block;
  margin-top: 2px;
}

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

.compteurs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 48px;
}
.compteurs__fond {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  z-index: 0;
}
.compteurs__case {
  position: relative;
  z-index: 1;
  padding: 26px 20px;
  border-left: 1px solid var(--bordure);
}
.compteurs__case:first-child { border-left: 0; }
.compteurs__case b {
  display: block;
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.compteurs__case span {
  font-family: var(--accent-police);
  font-size: 0.86rem;
  color: var(--texte-doux);
  line-height: 1.45;
  display: block;
  margin-top: 6px;
}

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

.deliberation {
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  padding: 24px 20px 22px;
  margin: 0;
  position: relative;
}
.deliberation::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.deliberation blockquote { margin: 0 0 18px; padding: 0; }
.deliberation blockquote p { font-size: 1.03rem; margin-bottom: 0.8em; }
.deliberation blockquote p:last-child { margin-bottom: 0; }
.deliberation figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
}
.deliberation figcaption b { color: var(--texte); font-weight: 600; display: block; }

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

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

.palier {
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  padding: 26px 22px 28px;
  position: relative;
  overflow: hidden;
}
.palier::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
  z-index: 2;
}
.palier::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 190px;
  height: 190px;
  border-radius: 100% 0 0 0;
  background: repeating-linear-gradient(
    -14deg,
    var(--accent) 0 2px,
    transparent 2px 22px
  );
  opacity: 0.28;
  pointer-events: none;
}
.palier--retenu { transform: translateY(-20px); border-color: var(--graphite); }
.palier--retenu .palier__marque { display: inline-block; }

.palier__marque {
  display: none;
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.palier h3 { margin-bottom: 6px; }
.palier__cible { font-size: 0.98rem; color: var(--texte-doux); min-height: 5.2em; }
.palier__prix {
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-top: 8px;
}
.palier__unite {
  font-family: var(--accent-police);
  font-size: 0.88rem;
  color: var(--texte-doux);
  display: block;
  margin: 4px 0 18px;
}
.palier ul { list-style: none; padding: 0; margin: 0 0 24px; position: relative; z-index: 1; }
.palier ul li {
  font-size: 0.99rem;
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
}
.palier ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--accent-brule);
}
.palier .bouton-tampon, .palier .bouton-filet { width: 100%; position: relative; z-index: 1; }

.note-mandat {
  margin-top: 42px;
  font-family: var(--accent-police);
  font-size: 0.92rem;
  color: var(--texte-doux);
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   Tableau de releve
   -------------------------------------------------------------------------- */

.releve-cadre { overflow-x: auto; margin-top: 34px; }
.releve {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--surface);
  font-family: var(--accent-police);
  font-size: 0.94rem;
}
.releve caption {
  text-align: left;
  font-family: var(--accent-police);
  font-size: 0.86rem;
  color: var(--texte-doux);
  padding-bottom: 10px;
}
.releve th, .releve td {
  border: 1px solid var(--bordure);
  padding: 11px 14px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.releve thead th {
  background: var(--fond-alt);
  font-weight: 600;
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
}
.releve tbody tr:nth-child(even) td { background: #FAFAF9; }
.releve td.gagne { font-weight: 600; color: var(--accent-brule); }

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

.colonne-faq { max-width: 780px; margin: 0 auto; }

.question {
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  margin-bottom: 16px;
  position: relative;
}
.question::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.25s var(--courbe);
}
.question[open]::before, .question:hover::before { width: 32px; }
.question summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 22px;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.17rem;
  line-height: 1.35;
  position: relative;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--graphite);
  transform: translateY(-50%);
}
.question summary::before {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  width: 2px;
  height: 14px;
  background: var(--graphite);
  transform: translateY(-50%);
  transition: opacity 0.2s linear;
}
.question[open] summary::before { opacity: 0; }
.question__reponse { padding: 0 22px 22px; }
.question__reponse p:last-child { margin-bottom: 0; }

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

.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px var(--gouttiere);
  align-items: start;
}

.formulaire {
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  padding: 28px 24px 30px;
  position: relative;
}
.formulaire::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-family: var(--accent-police);
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: 6px;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--corps);
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-bottom: 2px solid var(--graphite);
  border-radius: 3px 3px 0 0;
  padding: 11px 12px;
}
.champ textarea { resize: vertical; line-height: 1.6; }
.champ--case {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--accent-police);
  font-size: 0.9rem;
  line-height: 1.5;
}
.champ--case input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
.aide-formulaire {
  font-family: var(--accent-police);
  font-size: 0.88rem;
  color: var(--texte-doux);
  margin-top: 18px;
}

.colonne-contact ul { list-style: none; padding: 0; }
.colonne-contact ul li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 12px;
}
.colonne-contact ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 2px;
  background: var(--accent);
}

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

.plateau {
  background: var(--graphite);
  color: #D5D4D0;
  border-top: 2px solid #000;
  padding: 58px 0 0;
}
.plateau a { color: #D5D4D0; text-decoration: none; }
.plateau a:hover { color: var(--accent); text-decoration: underline; }
.plateau__colonnes {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr 1.4fr;
  gap: 40px var(--gouttiere);
}
.plateau h2, .plateau h3 { color: var(--blanc-casse); }
.plateau h3 {
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.plateau ul { list-style: none; padding: 0; margin: 0; }
.plateau li { margin-bottom: 9px; font-family: var(--accent-police); font-size: 0.94rem; }
.plateau__position { font-size: 1rem; color: #B9B8B4; max-width: 34ch; margin-top: 16px; }
.plateau__social { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-family: var(--accent-police); font-size: 0.9rem; }
.plateau__editeur { font-family: var(--accent-police); font-size: 0.9rem; color: #B9B8B4; margin-top: 14px; line-height: 1.6; }
.plateau__barre {
  margin-top: 48px;
  border-top: 1px solid #34363A;
  padding: 20px 0 26px;
  font-family: var(--accent-police);
  font-size: 0.86rem;
  color: #A9A8A4;
}
.plateau__barre p { max-width: none; margin: 0; }

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

.page-interieure { margin-top: var(--quai-haut); }

.entete-page {
  background: var(--graphite);
  color: var(--blanc-casse);
  padding: 58px 0 62px;
  border-bottom: 2px solid #000;
  position: relative;
  overflow: hidden;
}
.entete-page h1 { color: var(--blanc-casse); font-size: 2.7rem; }
.entete-page p { color: #D2D1CD; max-width: 66ch; }
.entete-page .rangs { position: absolute; left: 0; right: 0; bottom: -30px; }
.entete-page .regie { position: relative; z-index: 2; }

.fil { font-family: var(--accent-police); font-size: 0.86rem; color: #B9B8B4; margin-bottom: 18px; }
.fil a { color: var(--accent); }

.texte-long { padding: 62px 0 78px; }
.texte-long h2 { margin-top: 46px; font-size: 1.85rem; }
.texte-long h2:first-of-type { margin-top: 0; }
.texte-long h3 { margin-top: 30px; }
.texte-long .regie > p, .texte-long .regie > ul, .texte-long .regie > ol { max-width: 68ch; }

.bloc-auteur {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 44px;
}
.bloc-auteur img {
  width: 100%;
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  border-left: 3px solid var(--accent);
  filter: saturate(0.7);
}
.profils { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.profils li { margin: 0; }
.profils a {
  display: inline-block;
  font-family: var(--accent-police);
  font-size: 0.9rem;
  border: 1px solid var(--bordure);
  background: var(--surface);
  padding: 7px 14px;
  text-decoration: none;
  color: var(--texte);
}
.profils a:hover { border-color: var(--graphite); color: var(--accent-brule); }

.liste-plan { list-style: none; padding: 0; }
.liste-plan > li {
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  padding: 18px 20px;
  margin-bottom: 16px;
  position: relative;
}
.liste-plan > li::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.liste-plan h3 { margin-bottom: 4px; }
.liste-plan p { margin-bottom: 0; font-size: 1rem; }

.centre-message { text-align: center; padding: 92px 0 100px; }
.centre-message h1 { font-size: 2.8rem; }
.centre-message p { margin-left: auto; margin-right: auto; }
.centre-message .paire-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   Signature d animation : entree laterale alternee
   -------------------------------------------------------------------------- */

.sillon {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.48s var(--courbe), transform 0.48s var(--courbe);
  will-change: opacity, transform;
}
.sillon[data-sens="droite"] { transform: translateX(36px); }
.sillon.est-trace { opacity: 1; transform: translateX(0); }

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

@media (max-width: 1080px) {
  h1 { font-size: 2.8rem; }
  .quatre-temps { grid-template-columns: repeat(2, 1fr); }
  .six-bordereaux { grid-template-columns: repeat(2, 1fr); }
  .plateau__colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .quai__nav { display: none; }
  .quai__action { display: none; }
  .trois-rangs { display: flex; }
  .grand-bandeau__corps { grid-template-columns: 1fr; gap: 36px; padding: 42px 24px 46px; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .contact-grille { grid-template-columns: 1fr; }
  .trois-deliberations { grid-template-columns: 1fr; }
  .trois-paliers { grid-template-columns: 1fr; }
  .palier--retenu { transform: none; }
  .compteurs { grid-template-columns: 1fr 1fr; }
  .compteurs__case:nth-child(3) { border-left: 0; }
  .compteurs__case:nth-child(n+3) { border-top: 1px solid var(--bordure); }
  .gain { grid-template-columns: 1fr; gap: 18px; }
  .bloc-auteur { grid-template-columns: 1fr; }
  .bloc-auteur img { max-width: 300px; }
}

@media (max-width: 640px) {
  :root { --lisiere-haute: 28px; --lisiere-basse: 28px; }
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.75rem; }
  body { font-size: 1.04rem; }
  .bandeau { padding: 52px 0 56px; }
  .quatre-temps, .six-bordereaux { grid-template-columns: 1fr; }
  .plateau__colonnes { grid-template-columns: 1fr; }
  .compteurs { grid-template-columns: 1fr; }
  .compteurs__case { border-left: 0; border-top: 1px solid var(--bordure); }
  .compteurs__case:first-child { border-top: 0; }
  .bande-photo { padding: 28px 0; }
  .grand-bandeau__pied { min-height: 0; }
  .entete-page h1 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sillon { transform: none; transition: opacity 0.2s linear; }
  .sillon[data-sens="droite"] { transform: none; }
  .jauge__remplissage { transition: none; }
  .bouton-tampon, .bouton-filet { transition: none; }
  .bouton-tampon:hover, .bouton-filet:hover { transform: none; }
}

/* ==========================================================================
   Le Cahier de regie, section magazine
   Meme palette, meme double filet de bandeau, meme motif de rangs et meme
   entree laterale que le reste du site. Rien n est ajoute au dessus des
   regles precedentes : le magazine prolonge le cahier, il ne s y greffe pas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sommaire du magazine : grille de cartes d article
   -------------------------------------------------------------------------- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px var(--gouttiere);
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.feuillet {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 22px;
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  transition: transform 0.22s var(--courbe);
}
.feuillet::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
  z-index: 3;
  transition: width 0.25s var(--courbe);
}
.feuillet:hover { transform: translateX(3px); }
.feuillet:hover::before { width: 72px; }

.feuillet__cadre {
  display: block;
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.feuillet__cadre img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: saturate(0.65) contrast(1.03);
  border-left: 3px solid var(--accent);
}
.feuillet__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.feuillet__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 0;
}

.feuillet__angle {
  display: inline-block;
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brule);
  margin-bottom: 10px;
}

.feuillet__titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.22;
  margin: 0 0 10px;
  max-width: none;
}
.feuillet__titre a { color: var(--texte); text-decoration: none; }
.feuillet__titre a:hover { color: var(--accent-brule); text-decoration: underline; text-underline-offset: 3px; }

.feuillet__extrait {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texte-doux);
  margin: 0 0 16px;
  max-width: none;
}

.feuillet__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: baseline;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-family: var(--accent-police);
  font-size: 0.84rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.feuillet__pied time { color: var(--texte); }

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

.derniers-articles__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--bordure);
}
.derniers-articles__note {
  font-family: var(--accent-police);
  font-size: 0.92rem;
  color: var(--texte-doux);
  margin: 0;
  max-width: 58ch;
}

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

.entete-article {
  position: relative;
  overflow: hidden;
  background: var(--graphite);
  color: var(--blanc-casse);
  padding: 42px 0 48px;
  border-bottom: 2px solid #000;
}
.entete-article .rangs { position: absolute; left: 0; right: 0; bottom: -30px; }
.entete-article .regie { position: relative; z-index: 2; }
.entete-article h1 {
  color: var(--blanc-casse);
  font-size: 2.9rem;
  margin-bottom: 0;
  max-width: 22ch;
}

.fil-magazine {
  font-family: var(--accent-police);
  font-size: 0.86rem;
  color: #B9B8B4;
  margin: 0 0 20px;
  max-width: none;
}
.fil-magazine ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.fil-magazine li { margin: 0; display: flex; align-items: center; gap: 10px; }
.fil-magazine li + li::before { content: ">"; color: var(--accent); }
.fil-magazine a { color: var(--accent); text-decoration: none; }
.fil-magazine a:hover { color: var(--blanc-casse); text-decoration: underline; }

.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid #34363A;
  font-family: var(--accent-police);
  font-size: 0.9rem;
  color: #C0BFBB;
  max-width: none;
}
.reperes__angle {
  background: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.reperes time { color: var(--blanc-casse); font-variant-numeric: tabular-nums; }

.bande-photo--une { padding: 40px 0 44px; }

/* --------------------------------------------------------------------------
   Corps d article : exergue de chapeau puis HTML nu mis en forme
   -------------------------------------------------------------------------- */

.exergue {
  position: relative;
  max-width: 66ch;
  margin: 0 0 42px;
  padding: 24px 26px 26px;
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  font-size: 1.24rem;
  line-height: 1.62;
  color: var(--texte);
}
.exergue::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}

.corps-article { max-width: 68ch; }
.corps-article > :first-child { margin-top: 0; }

.corps-article h2 {
  position: relative;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.95rem;
  line-height: 1.16;
  margin: 54px 0 16px;
  padding-top: 20px;
  border-top: 2px solid var(--graphite);
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}

.corps-article h3 {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.25;
  margin: 34px 0 10px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}

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

.corps-article a {
  color: var(--accent-brule);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.corps-article a:hover { color: var(--texte); background: rgba(249, 188, 6, 0.3); }

.corps-article ul,
.corps-article ol {
  max-width: 66ch;
  margin: 0 0 1.5em;
  padding-left: 0;
  list-style: none;
}
.corps-article li { margin-bottom: 0.55em; }
.corps-article ul li { position: relative; padding-left: 24px; }
.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 14px;
  height: 2px;
  background: var(--accent-brule);
}
.corps-article ol { counter-reset: rang-regie; }
.corps-article ol li { position: relative; padding-left: 42px; counter-increment: rang-regie; }
.corps-article ol li::before {
  content: counter(rang-regie);
  position: absolute;
  left: 0;
  top: 0.22em;
  min-width: 26px;
  padding: 1px 4px;
  text-align: center;
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--accent-texte);
  background: var(--accent);
  font-variant-numeric: tabular-nums;
}

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-family: var(--accent-police);
  font-size: 0.94rem;
  margin: 32px 0 36px;
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
}
.corps-article th,
.corps-article td {
  border: 1px solid var(--bordure);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.corps-article thead th {
  background: var(--fond-alt);
  font-weight: 600;
  border-top: 0;
  border-bottom: 2px solid var(--graphite);
}
.corps-article tbody th { background: var(--fond-alt); font-weight: 600; }
.corps-article tbody tr:nth-child(even) td { background: #FAFAF9; }

.corps-article blockquote {
  position: relative;
  margin: 32px 0 36px;
  padding: 24px 26px;
  background: var(--fond-alt);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  font-size: 1.12rem;
  line-height: 1.66;
}
.corps-article blockquote::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article aside {
  position: relative;
  margin: 32px 0 36px;
  padding: 24px 22px 26px;
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
  font-size: 1.02rem;
}
.corps-article aside::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.corps-article aside p:last-child { margin-bottom: 0; }
.corps-article aside ul, .corps-article aside ol { margin-bottom: 0; }

.corps-article figure { margin: 32px 0; }
.corps-article figure img { border-left: 3px solid var(--accent); filter: saturate(0.65) contrast(1.03); }
.corps-article figcaption {
  font-family: var(--accent-police);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texte-doux);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Chute d article : rappel produit et appel a l action
   -------------------------------------------------------------------------- */

.chute-article {
  position: relative;
  max-width: 68ch;
  margin-top: 50px;
  padding: 28px 26px 30px;
  background: var(--graphite);
  color: #D5D4D0;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
.chute-article::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.chute-article__titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--blanc-casse);
  margin: 0 0 12px;
}
.chute-article p { color: #D2D1CD; }
.chute-article p:last-of-type { margin-bottom: 0; }
.chute-article .paire-actions { margin-top: 24px; }
.chute-article .bouton-filet { color: var(--blanc-casse); border-color: var(--blanc-casse); }
.chute-article .bouton-filet:hover { color: var(--accent); }

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

.encart-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  max-width: 68ch;
  padding: 24px 22px 26px;
  background: var(--surface);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  box-shadow: inset 0 5px 0 -4px var(--bordure), inset 0 -5px 0 -4px var(--bordure);
}
.encart-auteur::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-left: 3px solid var(--accent);
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
  filter: saturate(0.7);
}
.encart-auteur__mention {
  display: block;
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brule);
}
.encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 6px 0 10px;
}
.encart-auteur p { font-size: 1rem; margin-bottom: 0.8em; }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi__tete { margin-bottom: 38px; }
.lire-aussi__titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.16;
  margin: 0 0 12px;
}
.lire-aussi__note {
  font-size: 1.05rem;
  color: var(--texte-doux);
  margin: 0;
  max-width: 62ch;
}

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

@media (max-width: 1080px) {
  .sommaire { grid-template-columns: repeat(2, 1fr); }
  .entete-article h1 { font-size: 2.4rem; max-width: none; }
  .corps-article h2 { font-size: 1.8rem; }
}

@media (max-width: 900px) {
  .encart-auteur { grid-template-columns: 1fr; gap: 18px; }
  .lire-aussi__titre { font-size: 1.7rem; }
}

@media (max-width: 640px) {
  .sommaire, .sommaire--paire { grid-template-columns: 1fr; }
  .entete-article { padding: 30px 0 34px; }
  .entete-article h1 { font-size: 2rem; }
  .exergue { font-size: 1.12rem; padding: 20px 20px 22px; }
  .corps-article h2 { font-size: 1.6rem; margin-top: 42px; }
  .corps-article h3 { font-size: 1.22rem; }
  .corps-article table { display: block; overflow-x: auto; }
  .chute-article { padding: 24px 20px 26px; }
  .bande-photo--une { padding: 24px 0 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .feuillet { transition: none; }
  .feuillet::before { transition: none; }
  .feuillet:hover { transform: none; }
}

/* Intitules de colonnes du pied de page dans le magazine : meme rendu que .plateau h3,
   en balise de paragraphe, parce que les articles ne portent aucun h2 ni h3
   en dehors du corps redactionnel. */

.plateau__titre {
  font-family: var(--accent-police);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc-casse);
  margin: 0 0 16px;
  max-width: none;
}