/* ==========================================================================
   Seancier, feuille de style unique
   Vocabulaire de nommage : fronton, enseigne, billet, souche, talon, perfo,
   cadran, bande, copie, carton, guichet, ourlet.
   ========================================================================== */

:root {
  color-scheme: light;

  --fond: #EEF3F4;
  --fond-alt: #E2EBEC;
  --surface: #FAFDFD;
  --texte: #0E2429;
  --texte-doux: #45595E;
  --accent: #0B6C7A;
  --accent-texte: #F4FBFC;
  --accent-2: #0A4B56;
  --bordure: #A9C6CB;

  --titre: "Outfit", "Trebuchet MS", sans-serif;
  --courant: "Overpass", "Segoe UI", sans-serif;
  --tampon: "Special Elite", "Courier New", monospace;

  --cadre: 1200px;
  --gouttiere: 28px;
  --bande-perfo: 24px;
  --entete: 68px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

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

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

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 108, 122, 0.38);
}

a:hover { color: var(--texte); border-bottom-color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--texte);
  outline-offset: 3px;
}

/* Selection : aplat de cabine, texte au blanc de billet, comme un tampon appose */

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

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

ul { margin: 0; padding: 0; list-style: none; }

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

.pour-lecteurs {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saut-au-contenu {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 12px 20px;
  font-family: var(--titre);
  font-weight: 600;
  border: 0;
  transition: top 120ms linear;
}

.saut-au-contenu:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Trames : code barres vertical stylise et perforations
   -------------------------------------------------------------------------- */

.code-barres {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(10, 75, 86, 0.18) 0px, rgba(10, 75, 86, 0.18) 2px,
    transparent 2px, transparent 9px,
    rgba(10, 75, 86, 0.18) 9px, rgba(10, 75, 86, 0.18) 14px,
    transparent 14px, transparent 18px,
    rgba(10, 75, 86, 0.18) 18px, rgba(10, 75, 86, 0.18) 21px,
    transparent 21px, transparent 27px,
    rgba(10, 75, 86, 0.18) 27px, rgba(10, 75, 86, 0.18) 29px,
    transparent 29px, transparent 36px
  );
  background-size: 36px 48px;
  background-repeat: repeat-x;
}

.filet-barres {
  height: 3px;
  width: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent-2) 0px, var(--accent-2) 2px,
    transparent 2px, transparent 7px,
    var(--accent-2) 7px, var(--accent-2) 12px,
    transparent 12px, transparent 16px,
    var(--accent-2) 16px, var(--accent-2) 19px,
    transparent 19px, transparent 26px
  );
  background-size: 26px 3px;
}

.bandeau-barres {
  height: 48px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
}

/* Bord perfore : bande verticale, ligne pointillee, trois demi disques evides */

.talon {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 26px 26px 26px calc(var(--bande-perfo) + 26px);
}

.talon::before {
  content: "";
  position: absolute;
  left: var(--bande-perfo);
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 13px
  );
  background-size: 2px 13px;
}

.talon::after {
  content: "";
  position: absolute;
  left: calc(var(--bande-perfo) - 5px);
  top: 0;
  bottom: 0;
  width: 12px;
  background-image:
    radial-gradient(circle 6px at 6px 18%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 50%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 82%, var(--fond) 99%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}

.talon-mot {
  position: absolute;
  left: 0;
  top: 18px;
  width: var(--bande-perfo);
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  overflow: hidden;
  max-height: calc(100% - 36px);
}

/* --------------------------------------------------------------------------
   Structure generale
   -------------------------------------------------------------------------- */

.cadre {
  width: 100%;
  max-width: var(--cadre);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.rangee {
  padding: 88px 0;
  border-bottom: 1px solid var(--bordure);
}

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

.surtitre {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

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

.petit { font-size: 0.8125rem; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   Fronton (en tete fixe)
   -------------------------------------------------------------------------- */

.fronton {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--entete);
  background: var(--fond);
  border-bottom: 0;
}

.fronton::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent-2) 0px, var(--accent-2) 2px,
    transparent 2px, transparent 8px,
    var(--accent-2) 8px, var(--accent-2) 13px,
    transparent 13px, transparent 18px,
    var(--accent-2) 18px, var(--accent-2) 20px,
    transparent 20px, transparent 28px
  );
  background-size: 28px 3px;
  opacity: 0.7;
}

.fronton.est-defile { background: var(--fond-alt); }
.fronton.est-defile::after { opacity: 1; }

.fronton-rail {
  height: var(--entete);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.enseigne {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--texte);
  border: 0;
}

.enseigne svg { display: block; }
.enseigne:hover { color: var(--accent); }

.chemin {
  display: flex;
  align-items: center;
  gap: 26px;
}

.chemin a {
  position: relative;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  border: 0;
  padding: 4px 0;
}

.chemin a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right 100ms linear;
}

.chemin a:hover,
.chemin a:focus-visible { color: var(--texte); }
.chemin a:hover::after { right: 0; }

.fronton-action { display: flex; align-items: center; gap: 14px; }

/* Bouton de menu mobile : trois barres inegales, echo du code barres */

.poinconneuse {
  display: none;
  width: 46px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--bordure);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.poinconneuse span {
  display: block;
  width: 3px;
  background: var(--texte);
}

.poinconneuse span:nth-child(1) { height: 20px; }
.poinconneuse span:nth-child(2) { height: 14px; width: 2px; }
.poinconneuse span:nth-child(3) { height: 22px; width: 5px; background: var(--accent); }
.poinconneuse:hover { border-color: var(--accent); }

/* Panneau plein ecran */

.panneau {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--fond);
  padding: 22px var(--gouttiere) 40px;
  overflow-y: auto;
}

.panneau[hidden] { display: none; }

.panneau-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  margin-bottom: 30px;
}

.panneau-fermer {
  background: transparent;
  border: 1px solid var(--bordure);
  color: var(--texte);
  font-family: var(--titre);
  font-size: 1rem;
  padding: 9px 16px;
  cursor: pointer;
}

.panneau-fermer:hover { border-color: var(--accent); color: var(--accent); }

.panneau nav a {
  display: block;
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--texte);
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--bordure);
}

.panneau nav a:hover { color: var(--accent); }
.panneau .poincon { margin-top: 30px; width: 100%; justify-content: center; }

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

.poincon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  background: var(--accent);
  color: var(--accent-texte);
  transition: background-color 120ms linear, color 120ms linear;
}

.poincon::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  top: 50%;
  height: 2px;
  background: var(--accent-texte);
  transition: right 100ms linear;
}

.poincon:hover { background: var(--accent-2); color: var(--accent-texte); }
.poincon:hover::after { right: 0; }

.poincon--creux {
  background: transparent;
  border: 1px solid var(--bordure);
  color: var(--texte);
  padding: 0 24px;
}

.poincon--creux::after { background: var(--accent); }
.poincon--creux:hover { background: transparent; border-color: var(--accent); color: var(--texte); }

.poincon--creux::before {
  content: "";
  position: absolute;
  left: -6px; top: 0; bottom: 0;
  width: 12px;
  opacity: 0;
  background-image:
    radial-gradient(circle 6px at 6px 20%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 50%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 80%, var(--fond) 99%, transparent 100%);
  background-repeat: no-repeat;
  transition: opacity 120ms linear;
}

.poincon--creux:hover::before { opacity: 1; }

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

/* --------------------------------------------------------------------------
   Hero en billet perfore avec souche detachable
   -------------------------------------------------------------------------- */

.guichet-ouvert {
  padding-top: calc(var(--entete) + 62px);
  padding-bottom: 76px;
  border-bottom: 1px solid var(--bordure);
}

.billet {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border: 1px solid var(--bordure);
  background: var(--fond-alt);
  position: relative;
}

.billet-corps {
  grid-column: span 9;
  padding: 52px 52px 46px;
  position: relative;
}

.billet-souche {
  grid-column: span 3;
  padding: 46px 30px;
  position: relative;
  background: var(--surface);
  overflow: hidden;
}

.billet-souche::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 7px,
    transparent 7px, transparent 15px
  );
  background-size: 2px 15px;
}

.billet-souche::after {
  content: "";
  position: absolute;
  left: -6px; top: 0; bottom: 0;
  width: 12px;
  background-image:
    radial-gradient(circle 6px at 6px 14%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 44%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 76%, var(--fond) 99%, transparent 100%);
  background-repeat: no-repeat;
}

.filigrane-barres {
  position: absolute;
  right: -10px;
  bottom: 18px;
  width: 240px;
  opacity: 0.14;
  pointer-events: none;
}

.billet h1 { margin-bottom: 22px; max-width: 17ch; }

.billet-sous-titre {
  font-size: 1.15rem;
  color: var(--texte-doux);
  max-width: 56ch;
  margin-bottom: 30px;
}

.billet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.billet-mention {
  font-size: 0.8125rem;
  color: var(--texte-doux);
  max-width: 58ch;
  margin: 0;
}

.souche-ligne { margin-bottom: 26px; position: relative; z-index: 1; }
.souche-ligne:last-child { margin-bottom: 0; }

.souche-etiquette {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  display: block;
  margin-bottom: 6px;
}

.souche-valeur {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  display: inline-block;
}

.souche-note { font-size: 0.8125rem; color: var(--texte-doux); margin: 6px 0 0; }

/* Jauges de part, remplissage par crans */

.jauge {
  height: 8px;
  background: var(--bordure);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.jauge span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

.jauge-seuil {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--texte);
}

/* Signature d animation : le tic du compteur */

.tic {
  display: inline-block;
  width: 2px;
  height: 0.86em;
  margin-left: 6px;
  vertical-align: baseline;
  background: var(--accent);
  opacity: 0;
}

.tic.est-visible { opacity: 1; }

.cadran-chiffre { display: inline-block; transition: transform 120ms linear; }
.cadran-chiffre.est-cale { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Bandeau photographique
   -------------------------------------------------------------------------- */

.plan {
  position: relative;
  border: 1px solid var(--bordure);
  padding-left: var(--bande-perfo);
  background: var(--surface);
}

.plan::before {
  content: "";
  position: absolute;
  left: var(--bande-perfo);
  top: 8px; bottom: 8px;
  width: 2px;
  z-index: 2;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 13px
  );
  background-size: 2px 13px;
}

.plan-cadre { position: relative; overflow: hidden; }

.plan-cadre img {
  width: 100%;
  height: auto;
  filter: saturate(25%) contrast(105%) brightness(106%);
}

.plan-cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 75, 86, 0.1);
  pointer-events: none;
}

.plan-cadre::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: var(--accent);
  z-index: 2;
}

.plan-legende {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--texte-doux);
  padding: 12px 16px;
  border-top: 1px solid var(--bordure);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Probleme : partage neuf plus trois
   -------------------------------------------------------------------------- */

.bordereau {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border: 1px solid var(--bordure);
  background: var(--surface);
}

.bordereau-corps { grid-column: span 9; padding: 44px 46px; }

.bordereau-souche {
  grid-column: span 3;
  padding: 44px 30px;
  background: var(--fond-alt);
  position: relative;
}

.bordereau-souche::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 14px
  );
  background-size: 2px 14px;
}

.releve { margin-top: 30px; display: grid; gap: 0; }

.releve li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
  max-width: 68ch;
}

.releve li:last-child { border-bottom: 1px solid var(--bordure); }

.releve b {
  font-family: var(--tampon);
  font-size: 0.8125rem;
  color: var(--accent);
  line-height: 1.9;
}

.releve span { color: var(--texte-doux); }
.releve span strong { color: var(--texte); }

/* --------------------------------------------------------------------------
   Solution : quatre bandes horizontales
   -------------------------------------------------------------------------- */

.bandes { display: grid; gap: 0; margin-top: 44px; }

.bande {
  display: grid;
  grid-template-columns: 96px 1fr 300px;
  align-items: start;
  gap: 34px;
  position: relative;
  padding: 34px 34px 34px 0;
  border-top: 1px solid var(--bordure);
  background: var(--surface);
}

.bande:last-child { border-bottom: 1px solid var(--bordure); }

.bande-numero {
  position: relative;
  padding: 0 0 0 calc(var(--bande-perfo) + 18px);
  font-family: var(--titre);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.bande-numero::before {
  content: "";
  position: absolute;
  left: var(--bande-perfo);
  top: -34px;
  height: calc(100% + 68px);
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 13px
  );
  background-size: 2px 13px;
}

.bande h3 { margin-bottom: 10px; }
.bande p { color: var(--texte-doux); margin: 0; }

.bande-sortie {
  font-family: var(--tampon);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--texte);
  border-left: 3px solid var(--accent-2);
  padding-left: 16px;
}

/* --------------------------------------------------------------------------
   Fonctionnalites : trois par deux
   -------------------------------------------------------------------------- */

.copies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.copie h3 { margin-bottom: 10px; }
.copie p { color: var(--texte-doux); font-size: 1rem; margin: 0 0 0.8em; }
.copie p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Avantages : quatre colonnes de compteurs
   -------------------------------------------------------------------------- */

.cadrans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 44px;
  border: 1px solid var(--bordure);
}

.cadran {
  padding: 34px 26px;
  border-right: 1px solid var(--bordure);
  background: var(--surface);
}

.cadran:last-child { border-right: 0; }

.cadran-valeur {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.cadran h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; }
.cadran p { font-size: 0.9375rem; color: var(--texte-doux); margin: 0; }

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

.compteurs-parc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  margin: 0 0 48px;
}

.compteurs-parc div {
  padding: 26px 22px;
  border-right: 1px solid var(--bordure);
}

.compteurs-parc div:last-child { border-right: 0; }

.compteurs-parc b {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--texte);
  margin-bottom: 8px;
}

.compteurs-parc span { font-size: 0.8125rem; color: var(--texte-doux); }

.cartons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.carton blockquote {
  margin: 0 0 20px;
  font-size: 1rem;
  color: var(--texte);
}

.carton blockquote p { max-width: none; }

.carton figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 16px;
  font-size: 0.875rem;
  color: var(--texte-doux);
}

.carton figcaption b {
  display: block;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte);
  letter-spacing: -0.01em;
}

.carton-semaine {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Tarifs : trois billets verticaux
   -------------------------------------------------------------------------- */

.grille-tarifs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 48px;
}

.tarif {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tarif--vedette { margin-top: -26px; border-color: var(--accent-2); }

.tarif--vedette::after { background-image:
    radial-gradient(circle 6px at 6px 12%, var(--fond-alt) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 50%, var(--fond-alt) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 88%, var(--fond-alt) 99%, transparent 100%);
}

.tarif-marque {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}

.tarif h3 { font-size: 1.7rem; font-weight: 600; margin-bottom: 6px; }

.tarif-cible {
  font-size: 0.875rem;
  color: var(--texte-doux);
  min-height: 3.4em;
  margin-bottom: 18px;
}

.tarif-prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 18px 0;
  margin-bottom: 8px;
}

.tarif-montant {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--texte);
}

.tarif-devise { font-family: var(--titre); font-size: 1.2rem; color: var(--accent); }

.tarif-unite {
  font-size: 0.8125rem;
  color: var(--texte-doux);
  margin: 0 0 22px;
}

.tarif-inclus { display: grid; gap: 12px; margin-bottom: 26px; }

.tarif-inclus li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  line-height: 1.55;
}

.tarif-inclus li::before {
  content: "";
  width: 3px;
  height: 14px;
  margin-top: 5px;
  background: var(--accent);
  display: block;
}

.tarif .poincon { margin-top: auto; }

.tarif-pied {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  height: 14px;
}

.tarif--vedette .tarif-pied { border-top: 3px solid var(--accent); }

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

/* --------------------------------------------------------------------------
   Foire aux questions
   -------------------------------------------------------------------------- */

.questions { margin-top: 44px; max-width: 900px; }

.question {
  border-top: 1px solid var(--bordure);
  background: transparent;
}

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

.question summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--texte);
}

.question summary::-webkit-details-marker { display: none; }

.question summary:hover { color: var(--accent); }

.question-signe {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
  margin-top: 6px;
}

.question-signe::before,
.question-signe::after {
  content: "";
  position: absolute;
  background: var(--accent);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

.question-signe::before { width: 16px; height: 2px; }
.question-signe::after { width: 2px; height: 16px; transition: height 120ms linear; }

.question[open] .question-signe::after { height: 0; }

.question-reponse { padding: 0 4px 26px; }
.question-reponse p { color: var(--texte-doux); max-width: 80ch; }

/* --------------------------------------------------------------------------
   Guichet : formulaire
   -------------------------------------------------------------------------- */

.guichet {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border: 1px solid var(--bordure);
  margin-top: 44px;
  background: var(--surface);
}

.guichet-formulaire { grid-column: span 8; padding: 44px 46px; }

.guichet-souche {
  grid-column: span 4;
  padding: 44px 32px;
  background: var(--fond-alt);
  position: relative;
}

.guichet-souche::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 14px
  );
  background-size: 2px 14px;
}

.guichet-souche h3 { margin-bottom: 14px; }
.guichet-souche p { font-size: 0.9375rem; color: var(--texte-doux); }
.guichet-souche ul { display: grid; gap: 12px; margin-top: 20px; }

.guichet-souche ul li {
  font-size: 0.875rem;
  color: var(--texte-doux);
  padding-left: 16px;
  border-left: 2px solid var(--accent-2);
}

.champ { margin-bottom: 20px; }

.champ label {
  display: block;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--texte);
  margin-bottom: 7px;
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  background: var(--fond);
  border: 1px solid var(--bordure);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 0;
  appearance: none;
}

.champ select {
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.champ textarea { resize: vertical; min-height: 130px; }

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

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.champ-aide { font-size: 0.8125rem; color: var(--texte-doux); margin: 6px 0 0; }

.consentement {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  margin: 26px 0;
  font-size: 0.875rem;
  color: var(--texte-doux);
  line-height: 1.55;
}

.consentement input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.consentement label { display: contents; }

.guichet-apres {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
  font-size: 0.875rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   Pages interieures
   -------------------------------------------------------------------------- */

.page-tete {
  padding-top: calc(var(--entete) + 62px);
  padding-bottom: 48px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-alt);
}

.page-tete h1 { font-size: 2.7rem; max-width: 22ch; }

.fil {
  font-size: 0.8125rem;
  color: var(--texte-doux);
  margin-bottom: 18px;
}

.fil a { border: 0; }

.texte-long { padding: 62px 0 88px; }

.texte-long h2 {
  font-size: 1.8rem;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--bordure);
}

.texte-long h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.texte-long h3 { margin-top: 30px; }
.texte-long p, .texte-long li { color: var(--texte-doux); }
.texte-long strong { color: var(--texte); }

.texte-long ul.liste {
  display: grid;
  gap: 10px;
  margin: 0 0 1.2em;
  max-width: 72ch;
}

.texte-long ul.liste li {
  padding-left: 18px;
  border-left: 2px solid var(--accent-2);
}

.texte-long dl { margin: 0 0 1.4em; max-width: 72ch; }
.texte-long dt { font-family: var(--titre); font-weight: 600; color: var(--texte); margin-top: 14px; }
.texte-long dd { margin: 4px 0 0; color: var(--texte-doux); }

.colonnes-texte {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}

.portrait { position: sticky; top: calc(var(--entete) + 26px); }
.portrait img { filter: saturate(28%) contrast(104%) brightness(106%); width: 100%; }

.portrait-legende {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--texte-doux);
  padding: 12px 16px;
  border-top: 1px solid var(--bordure);
  margin: 0;
}

.liens-profils { display: grid; gap: 10px; margin-top: 22px; }
.liens-profils a { font-size: 0.9375rem; }

.plan-liste { display: grid; gap: 20px; margin-top: 30px; }

.plan-liste article {
  padding: 22px 26px;
  border: 1px solid var(--bordure);
  background: var(--surface);
}

.plan-liste h3 { margin-bottom: 6px; font-size: 1.15rem; }
.plan-liste p { color: var(--texte-doux); margin: 0; font-size: 0.9375rem; }

.ecran-vide {
  padding-top: calc(var(--entete) + 90px);
  padding-bottom: 90px;
  text-align: left;
}

.ecran-vide .code-perdu {
  font-family: var(--tampon);
  font-size: 4.4rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Ourlet (pied de page)
   -------------------------------------------------------------------------- */

.ourlet {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 62px 0 0;
}

.ourlet-colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}

.ourlet h2 {
  font-family: var(--tampon);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.ourlet ul { display: grid; gap: 10px; }
.ourlet a { color: var(--texte-doux); border: 0; font-size: 0.9375rem; }
.ourlet a:hover { color: var(--accent); }
.ourlet p { font-size: 0.9375rem; color: var(--texte-doux); }

.ourlet-position { max-width: 34ch; margin-bottom: 20px; }

.ourlet-social { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ourlet-social a { font-size: 0.875rem; }

.ourlet-editeur { font-size: 0.8125rem; line-height: 1.7; margin-top: 16px; }

.ourlet-barre {
  border-top: 1px solid var(--bordure);
  padding: 22px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.ourlet-barre p { font-size: 0.8125rem; margin: 0; }

.ourlet-signature {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   Apparition au defilement
   -------------------------------------------------------------------------- */

.au-defile {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms linear, transform 420ms ease-out;
}

.au-defile.est-entre { opacity: 1; transform: none; }

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

@media (max-width: 1040px) {
  .billet-corps { grid-column: span 12; }
  .billet-souche { grid-column: span 12; }
  .billet-souche::before { display: none; }
  .billet-souche::after {
    left: 0; right: 0; top: -6px; bottom: auto;
    width: auto; height: 12px;
    background-image:
      radial-gradient(circle 6px at 14% 6px, var(--fond) 99%, transparent 100%),
      radial-gradient(circle 6px at 50% 6px, var(--fond) 99%, transparent 100%),
      radial-gradient(circle 6px at 86% 6px, var(--fond) 99%, transparent 100%);
  }
  .bordereau-corps, .bordereau-souche { grid-column: span 12; }
  .guichet-formulaire, .guichet-souche { grid-column: span 12; }
  .copies { grid-template-columns: repeat(2, 1fr); }
  .cartons { grid-template-columns: 1fr; }
  .grille-tarifs { grid-template-columns: 1fr; }
  .tarif--vedette { margin-top: 0; }
  .cadrans { grid-template-columns: repeat(2, 1fr); }
  .cadran:nth-child(2) { border-right: 0; }
  .cadran:nth-child(1), .cadran:nth-child(2) { border-bottom: 1px solid var(--bordure); }
  .compteurs-parc { grid-template-columns: repeat(2, 1fr); }
  .compteurs-parc div:nth-child(2) { border-right: 0; }
  .compteurs-parc div:nth-child(1), .compteurs-parc div:nth-child(2) {
    border-bottom: 1px solid var(--bordure);
  }
  .bande { grid-template-columns: 82px 1fr; }
  .bande-sortie { grid-column: 2; }
  .colonnes-texte { grid-template-columns: 1fr; }
  .portrait { position: static; max-width: 420px; }
  .ourlet-colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --gouttiere: 20px; }

  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
  .page-tete h1 { font-size: 2rem; }

  .chemin { display: none; }
  .fronton-action .poincon { display: none; }
  .poinconneuse { display: inline-flex; }

  .rangee { padding: 62px 0; }
  .guichet-ouvert { padding-top: calc(var(--entete) + 40px); padding-bottom: 54px; }
  .billet-corps { padding: 34px 26px 30px; }
  .billet-souche { padding: 34px 26px; }
  .bordereau-corps, .bordereau-souche { padding: 30px 24px; }
  .guichet-formulaire, .guichet-souche { padding: 30px 24px; }
  .copies { grid-template-columns: 1fr; }
  .cadrans { grid-template-columns: 1fr; }
  .cadran { border-right: 0; border-bottom: 1px solid var(--bordure); }
  .cadran:last-child { border-bottom: 0; }
  .compteurs-parc { grid-template-columns: 1fr; }
  .compteurs-parc div { border-right: 0; border-bottom: 1px solid var(--bordure); }
  .compteurs-parc div:last-child { border-bottom: 0; }
  .bande { grid-template-columns: 1fr; padding: 26px 24px 26px 0; }
  .bande-numero { padding-left: calc(var(--bande-perfo) + 16px); }
  .bande h3, .bande p, .bande-sortie { margin-left: calc(var(--bande-perfo) + 16px); }
  .bande-sortie { grid-column: 1; }
  .duo { grid-template-columns: 1fr; }
  .ourlet-colonnes { grid-template-columns: 1fr; gap: 34px; }
  .filigrane-barres { display: none; }
  .question summary { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .au-defile { opacity: 1; transform: none; }
  .tic { opacity: 1; }
}

@media print {
  .fronton, .panneau, .poincon { display: none; }
  body { background: #FFFFFF; color: #0E2429; }
}

/* ==========================================================================
   Magazine Grille et Bordereau
   Section ajoutee a la suite de la feuille, sans retoucher une regle existante.
   Meme palette, meme forme signature (bande perforee, ligne pointillee, demi
   disques evides), meme motif de code barres vertical, meme tic de compteur.
   Vocabulaire : programme, affiche, exergue, pellicule, signature, rappel,
   parution.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Entete des pages du magazine
   -------------------------------------------------------------------------- */

.tete-magazine {
  padding-top: calc(var(--entete) + 62px);
  padding-bottom: 46px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-alt);
}

.tete-magazine h1 { font-size: 3rem; max-width: 20ch; }
.tete-magazine .chapeau { max-width: 74ch; }

.tete-magazine-releve {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  max-width: none;
}

.tete-magazine-releve b { color: var(--accent); font-weight: 400; }

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

.programme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.affiche {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding-left: var(--bande-perfo);
  transition: border-color 120ms linear;
}

.affiche::before {
  content: "";
  position: absolute;
  left: var(--bande-perfo);
  top: 10px;
  bottom: 10px;
  width: 2px;
  z-index: 2;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 13px
  );
  background-size: 2px 13px;
}

.affiche::after {
  content: "";
  position: absolute;
  left: calc(var(--bande-perfo) - 5px);
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 2;
  background-image:
    radial-gradient(circle 6px at 6px 16%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 50%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 84%, var(--fond) 99%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}

.affiche:hover { border-color: var(--accent-2); }

.affiche-mot {
  position: absolute;
  left: 0;
  top: 16px;
  width: var(--bande-perfo);
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  overflow: hidden;
  max-height: calc(100% - 32px);
}

.affiche-vue { position: relative; overflow: hidden; }

.affiche-vue img {
  width: 100%;
  height: auto;
  filter: saturate(25%) contrast(105%) brightness(106%);
}

.affiche-vue::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: var(--accent);
  z-index: 2;
}

.affiche-vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 75, 86, 0.1);
  pointer-events: none;
}

.affiche-texte {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.affiche-angle {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}

.affiche-titre {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.affiche-titre a {
  position: relative;
  color: var(--texte);
  border: 0;
}

.affiche-titre a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 2px;
  background: var(--accent);
  transition: right 100ms linear;
}

.affiche:hover .affiche-titre a::after,
.affiche-titre a:focus-visible::after { right: 0; }

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

.affiche-pied {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--texte-doux);
  max-width: none;
}

.affiche-pied b { color: var(--accent); font-weight: 400; }

/* --------------------------------------------------------------------------
   Entete d un article
   -------------------------------------------------------------------------- */

.tete-article {
  padding-top: calc(var(--entete) + 56px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-alt);
}

.tete-article h1 { font-size: 2.9rem; max-width: 24ch; margin-bottom: 20px; }

.marque-article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 0 0 16px;
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-doux);
  max-width: none;
}

.marque-article b { color: var(--accent); font-weight: 400; }
.marque-article span { display: inline-flex; align-items: center; gap: 8px; }

.exergue {
  position: relative;
  margin: 0;
  padding: 24px 28px 24px calc(var(--bande-perfo) + 28px);
  background: var(--surface);
  border: 1px solid var(--bordure);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--texte);
  max-width: 76ch;
}

.exergue::before {
  content: "";
  position: absolute;
  left: var(--bande-perfo);
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 13px
  );
  background-size: 2px 13px;
}

.exergue::after {
  content: "";
  position: absolute;
  left: calc(var(--bande-perfo) - 5px);
  top: 0;
  bottom: 0;
  width: 12px;
  background-image:
    radial-gradient(circle 6px at 6px 18%, var(--fond-alt) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 50%, var(--fond-alt) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 82%, var(--fond-alt) 99%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}

.image-une { margin-top: 40px; }
.image-une .plan-legende { max-width: none; }

/* --------------------------------------------------------------------------
   Corps d article : balises nues, aucune classe dans le texte redactionnel
   -------------------------------------------------------------------------- */

.pellicule { padding: 56px 0 40px; }

.pellicule-colonne { max-width: 68ch; }

.pellicule-colonne h2 {
  font-size: 1.8rem;
  margin: 52px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
  position: relative;
  color: var(--texte);
}

.pellicule-colonne h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 88px;
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent) 0px, var(--accent) 2px,
    transparent 2px, transparent 7px,
    var(--accent) 7px, var(--accent) 12px,
    transparent 12px, transparent 16px,
    var(--accent) 16px, var(--accent) 19px,
    transparent 19px, transparent 26px
  );
  background-size: 26px 3px;
}

.pellicule-colonne > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.pellicule-colonne > h2:first-child::before { content: none; }

.pellicule-colonne h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--texte);
  margin: 34px 0 12px;
  padding-left: 16px;
  border-left: 3px solid var(--accent-2);
}

.pellicule-colonne p {
  color: var(--texte-doux);
  margin: 0 0 1.15em;
  max-width: 68ch;
}

.pellicule-colonne strong { color: var(--texte); font-weight: 700; }
.pellicule-colonne em { color: var(--texte); font-style: italic; }

.pellicule-colonne a {
  color: var(--accent);
  border-bottom: 1px solid rgba(11, 108, 122, 0.38);
}

.pellicule-colonne a:hover { color: var(--texte); border-bottom-color: var(--accent); }

.pellicule-colonne ul,
.pellicule-colonne ol {
  display: grid;
  gap: 10px;
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  max-width: 68ch;
}

.pellicule-colonne li { color: var(--texte-doux); line-height: 1.6; }

.pellicule-colonne ul > li {
  position: relative;
  padding-left: 22px;
}

.pellicule-colonne ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 3px;
  background: var(--accent);
}

.pellicule-colonne ol { counter-reset: bordereau; }

.pellicule-colonne ol > li {
  position: relative;
  padding-left: 38px;
  counter-increment: bordereau;
}

.pellicule-colonne ol > li::before {
  content: counter(bordereau);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--tampon);
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--accent);
}

.pellicule-colonne li ul,
.pellicule-colonne li ol { margin: 10px 0 0; }

/* Tableau recapitulatif */

.pellicule-colonne table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--bordure);
  background: var(--surface);
  margin: 0 0 1.7em;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.pellicule-colonne thead th {
  background: var(--fond-alt);
  font-family: var(--tampon);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  vertical-align: bottom;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bordure);
}

.pellicule-colonne tbody th {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  color: var(--texte);
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border-top: 1px solid var(--bordure);
}

.pellicule-colonne td {
  color: var(--texte-doux);
  vertical-align: top;
  padding: 13px 16px;
  border-top: 1px solid var(--bordure);
}

.pellicule-colonne tbody tr:first-child th,
.pellicule-colonne tbody tr:first-child td { border-top: 0; }

.pellicule-colonne tbody tr:hover td,
.pellicule-colonne tbody tr:hover th { background: var(--fond-alt); }

/* Citation */

.pellicule-colonne blockquote {
  margin: 0 0 1.7em;
  padding: 6px 0 6px 24px;
  border-left: 3px solid var(--accent);
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--texte);
  max-width: 62ch;
}

.pellicule-colonne blockquote p {
  color: var(--texte);
  max-width: none;
  margin: 0 0 0.5em;
}

.pellicule-colonne blockquote p:last-child { margin-bottom: 0; }

/* Encadre */

.pellicule-colonne aside {
  position: relative;
  margin: 0 0 1.8em;
  padding: 26px 28px 26px calc(var(--bande-perfo) + 28px);
  border: 1px solid var(--bordure);
  background: var(--surface);
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 13px
  );
  background-size: 2px 13px;
  background-position: var(--bande-perfo) 12px;
  background-repeat: repeat-y;
  max-width: 76ch;
}

.pellicule-colonne aside::before {
  content: "Encadré";
  position: absolute;
  left: 0;
  top: 18px;
  width: var(--bande-perfo);
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  overflow: hidden;
  max-height: calc(100% - 36px);
}

.pellicule-colonne aside::after {
  content: "";
  position: absolute;
  left: calc(var(--bande-perfo) - 5px);
  top: 0;
  bottom: 0;
  width: 12px;
  background-image:
    radial-gradient(circle 6px at 6px 18%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 50%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 82%, var(--fond) 99%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}

.pellicule-colonne aside p { max-width: none; }
.pellicule-colonne aside > :last-child { margin-bottom: 0; }

/* Figure */

.pellicule-colonne figure {
  margin: 0 0 1.8em;
  border: 1px solid var(--bordure);
  background: var(--surface);
}

.pellicule-colonne figure img { width: 100%; filter: saturate(25%) contrast(105%) brightness(106%); }

.pellicule-colonne figcaption {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--texte-doux);
  padding: 12px 16px;
  border-top: 1px solid var(--bordure);
}

/* --------------------------------------------------------------------------
   Appel a l action et encart auteur
   -------------------------------------------------------------------------- */

.appel-billet {
  position: relative;
  margin-top: 44px;
  padding: 30px 32px 32px calc(var(--bande-perfo) + 32px);
  border: 1px solid var(--bordure);
  background: var(--fond-alt);
  max-width: 78ch;
}

.appel-billet::before,
.signature-auteur::before {
  content: "";
  position: absolute;
  left: var(--bande-perfo);
  top: 12px;
  bottom: 12px;
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 13px
  );
  background-size: 2px 13px;
}

.appel-billet::after,
.signature-auteur::after {
  content: "";
  position: absolute;
  left: calc(var(--bande-perfo) - 5px);
  top: 0;
  bottom: 0;
  width: 12px;
  background-image:
    radial-gradient(circle 6px at 6px 18%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 50%, var(--fond) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 82%, var(--fond) 99%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}

.appel-titre {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--texte);
  margin: 0 0 12px;
}

.appel-billet p { color: var(--texte-doux); max-width: 62ch; }
.appel-billet .poincon { margin-top: 8px; }

.signature-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 40px;
  padding: 28px 30px 28px calc(var(--bande-perfo) + 30px);
  border: 1px solid var(--bordure);
  background: var(--surface);
  max-width: 78ch;
}

.signature-photo {
  width: 96px;
  height: 96px;
  border: 1px solid var(--bordure);
  filter: saturate(25%) contrast(105%) brightness(106%);
}

.signature-mention {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}

.signature-nom {
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 0 0 10px;
}

.signature-auteur p { color: var(--texte-doux); font-size: 0.9375rem; max-width: 58ch; }

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

.rangee-rappels {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 64px 0 76px;
}

.rappels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.rappel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding-left: var(--bande-perfo);
  transition: border-color 120ms linear;
}

.rappel::before {
  content: "";
  position: absolute;
  left: var(--bande-perfo);
  top: 10px;
  bottom: 10px;
  width: 2px;
  z-index: 2;
  background-image: linear-gradient(
    to bottom,
    var(--accent-2) 0px, var(--accent-2) 6px,
    transparent 6px, transparent 13px
  );
  background-size: 2px 13px;
}

.rappel::after {
  content: "";
  position: absolute;
  left: calc(var(--bande-perfo) - 5px);
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 2;
  background-image:
    radial-gradient(circle 6px at 6px 16%, var(--fond-alt) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 50%, var(--fond-alt) 99%, transparent 100%),
    radial-gradient(circle 6px at 6px 84%, var(--fond-alt) 99%, transparent 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}

.rappel:hover { border-color: var(--accent-2); }

.rappel-vue { position: relative; overflow: hidden; }

.rappel-vue img {
  width: 100%;
  height: auto;
  filter: saturate(25%) contrast(105%) brightness(106%);
}

.rappel-vue::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--accent);
  z-index: 2;
}

.rappel-texte { padding: 20px 22px 24px; }

.rappel-titre {
  font-family: var(--titre);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  max-width: none;
}

.rappel-titre a { position: relative; color: var(--texte); border: 0; }

.rappel-titre a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 2px;
  background: var(--accent);
  transition: right 100ms linear;
}

.rappel:hover .rappel-titre a::after,
.rappel-titre a:focus-visible::after { right: 0; }

.rappel-accroche {
  font-size: 0.875rem;
  color: var(--texte-doux);
  margin: 0;
  max-width: none;
}

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

.magazine-suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
}

.magazine-suite p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Liste des parutions, page auteur et plan du site
   -------------------------------------------------------------------------- */

.parutions {
  display: grid;
  gap: 0;
  margin: 26px 0 0;
  border-top: 1px solid var(--bordure);
  max-width: 80ch;
}

.parutions li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 26px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--bordure);
}

.parutions a {
  position: relative;
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--texte);
  border: 0;
}

.parutions a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 2px;
  background: var(--accent);
  transition: right 100ms linear;
}

.parutions a:hover::after,
.parutions a:focus-visible::after { right: 0; }

.parutions time {
  font-family: var(--tampon);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--texte-doux);
  white-space: nowrap;
}

.parutions-angle {
  display: block;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Intitules de colonne du pied de page dans les pages du magazine
   Meme rendu que les intitules du reste du site, sans niveau de titre,
   pour que la hierarchie d un article reste h1 puis h2 puis h3.
   -------------------------------------------------------------------------- */

.ourlet-titre {
  font-family: var(--tampon);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.08;
  margin: 0 0 18px;
  max-width: none;
}

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

@media (max-width: 1040px) {
  .programme { grid-template-columns: repeat(2, 1fr); }
  .rappels { grid-template-columns: repeat(2, 1fr); }
  .tete-magazine h1 { font-size: 2.5rem; }
  .tete-article h1 { font-size: 2.4rem; }
}

@media (max-width: 760px) {
  .tete-magazine { padding-top: calc(var(--entete) + 40px); padding-bottom: 34px; }
  .tete-magazine h1 { font-size: 2rem; }
  .tete-article { padding-top: calc(var(--entete) + 36px); padding-bottom: 32px; }
  .tete-article h1 { font-size: 1.9rem; max-width: none; }

  .programme { grid-template-columns: 1fr; }
  .rappels { grid-template-columns: 1fr; }

  .exergue { padding: 20px 22px 20px calc(var(--bande-perfo) + 22px); font-size: 1.05rem; }
  .pellicule { padding: 40px 0 30px; }
  .pellicule-colonne h2 { font-size: 1.5rem; margin-top: 40px; }
  .pellicule-colonne h3 { font-size: 1.15rem; }
  .pellicule-colonne aside { padding: 22px 22px 22px calc(var(--bande-perfo) + 22px); }
  .pellicule-colonne blockquote { font-size: 1.1rem; }
  .pellicule-colonne table { display: block; overflow-x: auto; }

  .appel-billet { padding: 26px 22px 28px calc(var(--bande-perfo) + 22px); }
  .signature-auteur {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 22px 26px calc(var(--bande-perfo) + 22px);
  }
  .rangee-rappels { padding: 48px 0 56px; }
  .parutions li { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .affiche-titre a::after,
  .rappel-titre a::after,
  .parutions a::after { transition: none; }
}