/* ==========================================================================
   Reprennia, feuille de style unique
   Vocabulaire des classes: liasse, strate, cote, chemise, onglet, tampon,
   pointage, piece, bareme, releve, paraphe. Mode clair integral.
   ========================================================================== */

:root {
  --meringue: #FBF6EE;
  --meringue-sombre: #F4EDE1;
  --feuillet: #FFFFFF;
  --encre: #14211F;
  --encre-douce: #55605C;
  --instruit: #0A6F67;
  --instruit-fonce: #085B54;
  --instruit-clair: #E3F0EE;
  --sur-instruit: #FBF6EE;
  --verifier: #A33A55;
  --verifier-clair: #F6E6EA;
  --filet: #E2D8C7;

  --titre: "Zilla Slab", "Rockwell", "Georgia", serif;
  --courant: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --annotation: "Faustina", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --respiration: 88px;
  --colonne: 1180px;
  --cut-carte: 18px;
  --cut-bouton: 12px;
}

/* --------------------------------------------------------------------------
   Motif signature: code barres vertical stylise
   Deux degrades superposes, arrets irreguliers, barres de 2 a 7 pixels.
   -------------------------------------------------------------------------- */

.codebarres,
.strate__cote,
.releve__filigrane,
.pied__cote {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(10, 111, 103, 0.16) 0px, rgba(10, 111, 103, 0.16) 3px,
      transparent 3px, transparent 9px,
      rgba(10, 111, 103, 0.16) 9px, rgba(10, 111, 103, 0.16) 16px,
      transparent 16px, transparent 21px,
      rgba(10, 111, 103, 0.16) 21px, rgba(10, 111, 103, 0.16) 23px,
      transparent 23px, transparent 32px,
      rgba(10, 111, 103, 0.16) 32px, rgba(10, 111, 103, 0.16) 37px,
      transparent 37px, transparent 44px),
    repeating-linear-gradient(90deg,
      rgba(10, 111, 103, 0.09) 0px, rgba(10, 111, 103, 0.09) 5px,
      transparent 5px, transparent 26px,
      rgba(10, 111, 103, 0.09) 26px, rgba(10, 111, 103, 0.09) 28px,
      transparent 28px, transparent 71px);
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--meringue);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.06rem;
  line-height: 1.68;
  font-weight: 400;
}

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

a { color: var(--instruit-fonce); }

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

h1 { font-size: 3.1rem; font-weight: 600; line-height: 1.08; }
h2 { font-size: 2.05rem; font-weight: 600; line-height: 1.18; }
h3 { font-size: 1.3rem; font-weight: 500; line-height: 1.3; }
h4 { font-size: 1.06rem; font-weight: 600; line-height: 1.35; }

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

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

strong { font-weight: 700; }

small, .mention { font-size: 0.86rem; font-weight: 500; line-height: 1.55; }

:focus-visible {
  outline: 3px solid var(--verifier);
  outline-offset: 3px;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--instruit);
  color: var(--sur-instruit);
  padding: 12px 22px;
  z-index: 200;
  font-weight: 600;
}
.evitement:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   Grille de strates
   -------------------------------------------------------------------------- */

.strate {
  position: relative;
  padding: var(--respiration) 0;
  border-bottom: 1px solid var(--filet);
  overflow: hidden;
}

.strate--alt { background: var(--meringue-sombre); }
.strate--feuillet { background: var(--feuillet); }

.strate__cote {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 100%;
  opacity: 0.85;
  pointer-events: none;
}

.strate__cote::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--filet);
}

.dedans {
  position: relative;
  width: min(100% - 44px, var(--colonne));
  margin-inline: auto;
  z-index: 1;
}

.dedans--large { width: min(100% - 32px, 1340px); }

/* En tete de strate: numero, surtitre Faustina, separateur code barres SVG */

.cote {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cote__numero {
  font-family: var(--annotation);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sur-instruit);
  background: var(--instruit);
  padding: 2px 10px 3px;
  letter-spacing: 0.04em;
}

.surtitre {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--instruit-fonce);
  border-left: 3px solid var(--instruit);
  padding-left: 10px;
  margin: 0;
}

.separateur { display: block; margin-bottom: 18px; }

.strate__chapeau {
  font-size: 1.12rem;
  color: var(--encre-douce);
  max-width: 62ch;
}

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

.bouton {
  display: inline-block;
  font-family: var(--courant);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  padding: 15px 30px;
  border: 0;
  cursor: pointer;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-bouton)), calc(100% - var(--cut-bouton)) 100%, 0 100%);
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.bouton--instruit {
  background: var(--instruit);
  color: var(--sur-instruit);
}
.bouton--instruit:hover {
  background: var(--instruit-fonce);
  box-shadow: inset 4px 0 0 0 rgba(251, 246, 238, 0.7);
}

.bouton--contour {
  background: var(--meringue);
  color: var(--instruit-fonce);
  box-shadow: inset 0 0 0 1.5px var(--instruit);
}
.bouton--contour:hover {
  background: var(--meringue-sombre);
  box-shadow: inset 0 0 0 2px var(--instruit);
}

.bouton--verifier {
  background: var(--feuillet);
  color: var(--verifier);
  box-shadow: inset 0 0 0 1.5px var(--verifier);
}
.bouton--verifier:hover { background: var(--verifier-clair); }

.bouton--large { width: 100%; text-align: center; }

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

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--meringue);
  border-bottom: 1px solid var(--filet);
}

.entete__barre {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100% - 44px, 1340px);
  margin-inline: auto;
}

.entete__avancement {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  background: var(--instruit);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--encre);
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.marque svg { flex: none; }

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

.navigation a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.navigation a:hover { border-bottom-color: var(--instruit); }

.entete__action { display: flex; align-items: center; gap: 14px; }
.entete__action .bouton { padding: 11px 22px; }

.declencheur {
  display: none;
  width: 46px;
  height: 42px;
  background: var(--meringue);
  box-shadow: inset 0 0 0 1px var(--filet);
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}
.declencheur span {
  display: block;
  width: 3px;
  background: var(--instruit);
}
.declencheur span:nth-child(1) { height: 18px; }
.declencheur span:nth-child(2) { height: 24px; width: 5px; }
.declencheur span:nth-child(3) { height: 14px; background: var(--verifier); }

.panneau {
  position: fixed;
  inset: 0;
  background: var(--meringue);
  z-index: 90;
  padding: 26px;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.panneau[data-ouvert="oui"] { display: flex; }

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

.panneau__fermer {
  background: none;
  border: 0;
  font-family: var(--courant);
  font-size: 1rem;
  font-weight: 600;
  color: var(--instruit-fonce);
  cursor: pointer;
  padding: 10px;
}

.panneau nav { display: flex; flex-direction: column; }
.panneau nav a {
  padding: 15px 0;
  border-bottom: 1px solid var(--filet);
  text-decoration: none;
  color: var(--encre);
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 500;
}
.panneau .bouton { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Hero, strate a deux couches
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  border-bottom: 1px solid var(--filet);
  background: var(--meringue);
}

.hero__haut {
  padding: 74px 0 66px;
  position: relative;
}

.hero__grille {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 54px;
  align-items: start;
}

.hero h1 { margin-bottom: 0.35em; }

.hero__accroche {
  font-size: 1.16rem;
  color: var(--encre-douce);
  max-width: 56ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 22px;
}

.hero__garantie {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 1rem;
  color: var(--instruit-fonce);
  border-left: 3px solid var(--verifier);
  padding-left: 12px;
  max-width: 46ch;
}

.vignette {
  position: relative;
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
  padding: 6px 6px 6px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
}
.vignette::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--instruit);
  margin-bottom: 6px;
}
.vignette--verifier::before { background: var(--verifier); }

.vignette img { width: 100%; }

.vignette__legende {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--encre-douce);
  padding: 10px 4px 4px;
  margin: 0;
}

.hero__bas {
  background: var(--meringue-sombre);
  border-top: 1px solid var(--filet);
  padding: 30px 0;
}

.releve {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
}

.releve__case {
  position: relative;
  padding-left: 16px;
  border-left: 3px solid var(--instruit);
}
.releve__case:nth-child(even) { border-left-color: var(--verifier); }

.releve__chiffre {
  font-family: var(--annotation);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--encre);
  display: block;
}

.releve__libelle {
  font-size: 0.9rem;
  color: var(--encre-douce);
  margin: 8px 0 0;
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Probleme: quatre bandes de risque empilees
   -------------------------------------------------------------------------- */

.risques { margin-top: 34px; border-top: 1px solid var(--filet); }

.risque {
  display: grid;
  grid-template-columns: 190px 1fr 220px;
  gap: 28px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--filet);
}

.risque__etiquette {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--instruit-fonce);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.risque__etiquette em {
  font-family: var(--annotation);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--encre-douce);
}

.risque p { margin: 0; }

.risque__cout {
  font-family: var(--annotation);
  font-size: 1rem;
  font-weight: 600;
  color: var(--verifier);
  background: var(--verifier-clair);
  padding: 10px 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   Solution: frise de quatre strates numerotees
   -------------------------------------------------------------------------- */

.frise { margin-top: 36px; }

.marche {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid var(--filet);
  position: relative;
}
.marche:last-child { border-bottom: 1px solid var(--filet); }

.marche__rang {
  font-family: var(--annotation);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--instruit);
  font-variant-numeric: lining-nums tabular-nums;
}

.marche h3 { margin-bottom: 0.35em; }
.marche p { margin-bottom: 0; }

.marche__sortie {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--instruit-fonce);
  border-left: 3px solid var(--filet);
  padding-left: 12px;
}

/* --------------------------------------------------------------------------
   Cartes de chemise, communes aux fonctionnalites, formules, temoignages
   -------------------------------------------------------------------------- */

.chemise {
  position: relative;
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
  padding: 26px 24px 28px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
}

.chemise::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--instruit);
}
.chemise--verifier::before { background: var(--verifier); }

.chemise h3 { margin-top: 8px; }
.chemise p:last-child { margin-bottom: 0; }

.chemise__index {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
}

.outils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--filet);
  border-left: 1px solid var(--filet);
}

.outils .chemise {
  clip-path: none;
  box-shadow: none;
  border-right: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  background: var(--feuillet);
  padding: 30px 26px 32px;
}
.outils .chemise::before { height: 4px; left: -1px; right: -1px; }

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

.gains {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.gain {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 20px;
  align-items: start;
  background: var(--meringue);
  box-shadow: inset 0 0 0 1px var(--filet);
  padding: 22px 22px 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
}

.gain__mesure {
  font-family: var(--annotation);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--instruit);
  font-variant-numeric: lining-nums tabular-nums;
  border-right: 1px solid var(--filet);
  padding-right: 16px;
  min-height: 62px;
}

.gain h3 { font-size: 1.12rem; margin-bottom: 0.3em; }
.gain p { margin: 0; font-size: 0.99rem; color: var(--encre-douce); }

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

.dossiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.dossier { display: flex; flex-direction: column; }

.dossier blockquote {
  margin: 0 0 18px;
  font-family: var(--annotation);
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--encre);
}
.dossier blockquote p { margin-bottom: 0.8em; }
.dossier blockquote p:last-child { margin-bottom: 0; }

.dossier figcaption {
  border-top: 1px solid var(--filet);
  padding-top: 14px;
  font-size: 0.9rem;
  color: var(--encre-douce);
  margin-top: auto;
}
.dossier figcaption b {
  display: block;
  font-family: var(--courant);
  font-size: 0.99rem;
  color: var(--encre);
}

.issue {
  display: inline-block;
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--instruit-fonce);
  background: var(--instruit-clair);
  padding: 3px 10px;
  margin-bottom: 14px;
}
.issue--verifier { color: var(--verifier); background: var(--verifier-clair); }

.preuve__bandeau {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--filet);
  position: relative;
}

.releve__filigrane {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
}

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

.bareme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 38px;
  align-items: start;
}

.formule { display: flex; flex-direction: column; height: 100%; }
.formule--retenue { box-shadow: inset 0 0 0 2px var(--instruit); }

.formule__tampon {
  position: absolute;
  top: 18px;
  right: 0;
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sur-instruit);
  background: var(--instruit);
  padding: 3px 12px;
}

.formule h3 { margin-top: 10px; margin-bottom: 0.2em; }

.formule__prix {
  font-family: var(--annotation);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
  margin: 14px 0 4px;
}
.formule__unite {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--encre-douce);
  margin-bottom: 16px;
}

.formule__cible {
  font-size: 0.99rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  padding-top: 16px;
}

.pointage { list-style: none; margin: 0 0 24px; padding: 0; }
.pointage li {
  position: relative;
  padding-left: 26px;
  font-size: 0.97rem;
  margin-bottom: 10px;
}
.pointage li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1.5px var(--instruit);
}
.pointage li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--instruit);
  border-bottom: 2px solid var(--instruit);
  transform: rotate(-45deg);
}

.formule .bouton { margin-top: auto; }

.bareme__note {
  margin-top: 26px;
  font-size: 0.94rem;
  color: var(--encre-douce);
  max-width: 78ch;
}

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

.questions { margin-top: 34px; border-top: 1px solid var(--filet); }

.question {
  border-bottom: 1px solid var(--filet);
  background: var(--feuillet);
  position: relative;
}
.question + .question { margin-top: 0; }

.question > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 26px;
  font-family: var(--titre);
  font-size: 1.18rem;
  font-weight: 500;
  position: relative;
}
.question > summary::-webkit-details-marker { display: none; }

.question > summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--instruit);
}
.question[open] > summary::before { background: var(--verifier); }

.question > summary::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 2px solid var(--instruit);
  border-bottom: 2px solid var(--instruit);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.question[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }

.question__reponse { padding: 0 26px 24px 26px; }
.question__reponse p:last-child { margin-bottom: 0; }

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

.instruction {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 46px;
  margin-top: 36px;
  align-items: start;
}

.instruction__aide ul { list-style: none; padding: 0; }
.instruction__aide li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 12px;
  color: var(--encre-douce);
  font-size: 0.99rem;
}
.instruction__aide li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 3px;
  background: var(--instruit);
}

.formulaire {
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
  padding: 30px 28px 32px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
}
.formulaire::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--instruit);
}

.champ { margin-bottom: 18px; }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 0; }

.champ label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--meringue);
  border: 1px solid var(--filet);
  border-bottom: 2px solid var(--instruit);
  padding: 12px 14px;
  border-radius: 0;
}
.champ textarea { resize: vertical; min-height: 130px; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus { background: var(--feuillet); }

.consentement {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9rem;
  color: var(--encre-douce);
  margin-bottom: 22px;
}
.consentement input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--instruit); }

.suite {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   Pages internes, contenu long
   -------------------------------------------------------------------------- */

.feuillet-texte {
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
  padding: 40px 42px 44px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
}
.feuillet-texte::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--instruit);
}
.feuillet-texte h2 { font-size: 1.55rem; margin-top: 1.6em; }
.feuillet-texte h2:first-of-type { margin-top: 0.4em; }
.feuillet-texte h3 { margin-top: 1.4em; }

.fil {
  font-size: 0.86rem;
  color: var(--encre-douce);
  margin-bottom: 18px;
}
.fil a { color: var(--instruit-fonce); }

.auteur__entete {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 30px;
}

.auteur__portrait {
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
  padding: 6px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
}
.auteur__portrait::before { content: ""; display: block; height: 6px; background: var(--verifier); margin-bottom: 6px; }

.profils { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.profils li { margin: 0; }
.profils a {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--instruit-fonce);
  background: var(--meringue-sombre);
  padding: 8px 14px;
  box-shadow: inset 0 0 0 1px var(--filet);
}
.profils a:hover { background: var(--instruit-clair); }

.sommaire { list-style: none; padding: 0; }
.sommaire li { margin-bottom: 18px; }
.sommaire b { font-family: var(--titre); font-size: 1.12rem; font-weight: 600; }
.sommaire a { font-family: var(--titre); font-size: 1.12rem; font-weight: 600; }
.sommaire p { margin: 4px 0 0; color: var(--encre-douce); font-size: 0.97rem; }

.tableau-plan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.centre-court { text-align: center; padding: 96px 0; }
.centre-court h1 { font-size: 2.6rem; }
.centre-court p { margin-inline: auto; }
.centre-court .hero__actions { justify-content: center; }

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

.pied {
  position: relative;
  background: var(--meringue-sombre);
  border-top: 3px solid var(--instruit);
  padding: 60px 0 0;
  overflow: hidden;
}

.pied__cote {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 100%;
  opacity: 1;
  filter: saturate(1.2) contrast(1.35);
  pointer-events: none;
}

.pied__colonnes {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 34px;
}

.pied h2 {
  font-size: 0.95rem;
  font-family: var(--annotation);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--instruit-fonce);
  margin-bottom: 14px;
}

.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
.pied a { color: var(--encre); text-decoration: none; font-size: 0.95rem; }
.pied a:hover { text-decoration: underline; }
.pied p { font-size: 0.93rem; color: var(--encre-douce); }

.pied__position { max-width: 40ch; }

.reseau { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--filet); }
.reseau h2 { margin-bottom: 10px; }
.reseau ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.reseau li { margin: 0; }

.paraphe {
  margin-top: 30px;
  border-top: 1px solid var(--filet);
  padding: 20px 0 26px;
  font-size: 0.86rem;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}
.paraphe p { margin: 0; font-size: 0.86rem; }

/* --------------------------------------------------------------------------
   Signature d animation: rotation d entree des vignettes
   -------------------------------------------------------------------------- */

.entrant {
  opacity: 0;
  transform: rotate(-2.5deg) translateY(14px);
  transition: opacity 480ms cubic-bezier(0.22, 0.68, 0.36, 1),
              transform 480ms cubic-bezier(0.22, 0.68, 0.36, 1);
  transition-delay: var(--retard, 0ms);
}
.entrant--photo { transform: rotate(2deg) translateY(14px); }
.entrant.pose { opacity: 1; transform: rotate(0deg) translateY(0); }

.chemise.pose:hover,
.gain.pose:hover { transform: rotate(0.5deg); }

.chemise, .gain { transition: transform 260ms ease, box-shadow 260ms ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entrant,
  .entrant--photo { transform: none; transition: opacity 240ms linear; }
  .entrant.pose { transform: none; }
  .chemise.pose:hover,
  .gain.pose:hover { transform: none; }
  .question > summary::after { transition: none; }
}

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

@media (max-width: 1080px) {
  .hero__grille { grid-template-columns: 1fr; gap: 38px; }
  .outils { grid-template-columns: repeat(2, 1fr); }
  .dossiers { grid-template-columns: 1fr; }
  .bareme { grid-template-columns: 1fr; }
  .instruction { grid-template-columns: 1fr; gap: 34px; }
  .auteur__entete { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .navigation, .entete__action .bouton { display: none; }
  .declencheur { display: flex; }
  .strate__cote, .pied__cote { width: 44px; }
  .releve, .preuve__bandeau { grid-template-columns: repeat(2, 1fr); }
  .risque { grid-template-columns: 1fr; gap: 12px; }
  .risque__cout { justify-self: start; }
  .gains { grid-template-columns: 1fr; }
  .tableau-plan { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --respiration: 56px; }
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.6rem; }
  .outils { grid-template-columns: 1fr; }
  .releve, .preuve__bandeau { grid-template-columns: 1fr; }
  .marche { grid-template-columns: 56px 1fr; gap: 18px; }
  .marche__rang { font-size: 1.9rem; }
  .gain { grid-template-columns: 1fr; }
  .gain__mesure { border-right: 0; border-bottom: 1px solid var(--filet); padding: 0 0 12px; min-height: 0; }
  .champ--duo { grid-template-columns: 1fr; gap: 0; }
  .pied__colonnes { grid-template-columns: 1fr; }
  .feuillet-texte { padding: 28px 22px 30px; }
  .strate__cote { opacity: 0.6; }
}

@media print {
  .entete, .panneau, .strate__cote, .pied__cote { display: none; }
  body { background: #FFFFFF; }
}
/* ==========================================================================
   Magazine, Le Dossier avant signature
   Section ajoutee a la fin de la feuille, sans toucher aux regles ci dessus.
   Meme palette, meme forme signature (bandeau de strate de 6 pixels et coin
   inferieur droit coupe de 18 pixels), meme motif de code barres vertical,
   meme rotation d entree des vignettes.
   Vocabulaire: liasse, fiche, chapo, corps-article, encart-auteur, a-lire.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grille de cartes d article, index du magazine et page d accueil
   -------------------------------------------------------------------------- */

.liasse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  margin-top: 38px;
  list-style: none;
  padding: 0;
}

.liasse > li { margin: 0; }

/* --------------------------------------------------------------------------
   Carte d article
   Chemise blanche, bandeau de strate en haut, onglet coupe en bas a droite.
   Une carte sur trois porte le bandeau framboise: la strate a verifier.
   -------------------------------------------------------------------------- */

.fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.fiche::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--instruit);
  z-index: 2;
}

.fiche--verifier::before { background: var(--verifier); }

.fiche__cadre {
  margin: 6px 0 0;
  border-bottom: 1px solid var(--filet);
  background: var(--meringue-sombre);
  overflow: hidden;
}

.fiche__cadre img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.fiche__contenu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 26px;
}

.fiche__angle {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--instruit-fonce);
  border-left: 3px solid var(--instruit);
  padding-left: 9px;
  margin: 0 0 12px;
}

.fiche--verifier .fiche__angle {
  color: var(--verifier);
  border-left-color: var(--verifier);
}

.fiche__titre {
  font-family: var(--titre);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

.fiche__titre a {
  color: var(--encre);
  text-decoration: none;
  background-image: linear-gradient(var(--instruit), var(--instruit));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size 220ms ease;
}

.fiche__titre a:hover { background-size: 100% 2px; }

.fiche__extrait {
  margin: 0 0 18px;
  font-size: 0.99rem;
  color: var(--encre-douce);
  max-width: none;
}

.fiche__pied {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  font-family: var(--annotation);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--encre-douce);
}

.fiche__duree { font-style: italic; }

.fiche.pose:hover {
  transform: rotate(0.5deg);
  box-shadow: inset 0 0 0 1px var(--instruit);
}

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

.tete-article { margin-bottom: 26px; }

.tete-article h1 { margin-bottom: 0.3em; max-width: 24ch; }

.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-family: var(--annotation);
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.reperes li { margin: 0; }

.repere--angle {
  font-style: italic;
  font-weight: 600;
  color: var(--sur-instruit);
  background: var(--instruit);
  padding: 2px 10px 3px;
  letter-spacing: 0.04em;
}

.repere--maj {
  font-style: italic;
  color: var(--verifier);
  border-left: 3px solid var(--verifier);
  padding-left: 9px;
}

/* L angle editorial est verse tel quel par l assembleur, en bas de casse:
   la capitale initiale est donc posee par la feuille de style. */
.repere--angle::first-letter,
.fiche__angle::first-letter { text-transform: uppercase; }

/* Exergue de chapeau: annotation portee en marge du dossier. */

.chapo {
  font-family: var(--annotation);
  font-size: 1.24rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--encre);
  max-width: 66ch;
  margin: 0 0 30px;
  padding: 18px 24px 20px;
  background: var(--meringue-sombre);
  border-left: 6px solid var(--instruit);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-bouton)), calc(100% - var(--cut-bouton)) 100%, 0 100%);
}

.vignette--une { margin: 0 0 36px; max-width: 900px; }
.vignette--une img { aspect-ratio: 3 / 2; object-fit: cover; }

/* --------------------------------------------------------------------------
   Corps d article
   Le texte redactionnel ne porte aucune classe: toutes les balises sont
   mises en forme ici en tant que descendantes du conteneur.
   -------------------------------------------------------------------------- */

.corps-article {
  max-width: 68ch;
  font-size: 1.06rem;
  line-height: 1.68;
}

.corps-article > * { max-width: 100%; }

.corps-article h2 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.22;
  margin: 2em 0 0.55em;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
  position: relative;
}

.corps-article h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 74px;
  height: 6px;
  background: var(--instruit);
}

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

.corps-article h3 {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 1.6em 0 0.45em;
  padding-left: 12px;
  border-left: 3px solid var(--verifier);
}

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

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

.corps-article a:hover {
  background: var(--instruit-clair);
  text-decoration-thickness: 2px;
}

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

.corps-article ul,
.corps-article ol {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  counter-reset: pointage;
}

.corps-article li {
  position: relative;
  margin: 0 0 0.65em;
  padding-left: 30px;
}

/* Cases de pointage cochees dans la marge, comme dans un dossier instruit. */
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  box-shadow: inset 0 0 0 1.5px var(--instruit);
  background: var(--feuillet);
}

.corps-article ul > li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.6em;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--instruit);
  border-bottom: 2px solid var(--instruit);
  transform: rotate(-45deg);
}

.corps-article ol > li::before {
  counter-increment: pointage;
  content: counter(pointage);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--annotation);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sur-instruit);
  background: var(--instruit);
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.corps-article li > ul,
.corps-article li > ol { margin: 0.55em 0 0; }

/* Tableau recapitulatif: strates horizontales, intitules de colonnes en Faustina. */

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 0.99rem;
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
}

.corps-article thead th {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--sur-instruit);
  background: var(--instruit);
  padding: 11px 14px;
}

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

.corps-article td,
.corps-article tbody th {
  padding: 11px 14px;
  border-top: 1px solid var(--filet);
  vertical-align: top;
}

.corps-article tbody tr:nth-child(even) { background: var(--meringue-sombre); }

/* Encadre: feuillet rapporte, bandeau framboise, coin d onglet coupe. */

.corps-article aside {
  position: relative;
  margin: 0 0 1.7em;
  padding: 26px 24px 22px;
  background: var(--meringue-sombre);
  box-shadow: inset 0 0 0 1px var(--filet);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
}

.corps-article aside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--verifier);
}

.corps-article aside p:last-child,
.corps-article aside ul:last-child,
.corps-article aside ol:last-child { margin-bottom: 0; }

/* Citation de repreneuse, en Faustina, barree du motif de code barres. */

.corps-article blockquote {
  position: relative;
  margin: 0 0 1.7em;
  padding: 6px 0 6px 30px;
  border-left: 6px solid var(--instruit);
  font-family: var(--annotation);
  font-size: 1.14rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--encre);
}

.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure { margin: 0 0 1.7em; }
.corps-article figcaption {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  padding-top: 8px;
  margin-top: 8px;
}

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

.appel {
  position: relative;
  max-width: 68ch;
  margin: 40px 0 0;
  padding: 30px 28px 32px;
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
}

.appel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--instruit);
}

.appel__surtitre {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--instruit-fonce);
  margin: 4px 0 6px;
}

.appel__titre {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 6px 0 0.5em;
}

.appel p { color: var(--encre-douce); }
.appel .bouton { margin-top: 8px; }

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

.encart-auteur {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
  max-width: 68ch;
  margin: 38px 0 0;
  padding: 26px 26px 24px;
  background: var(--meringue-sombre);
  box-shadow: inset 0 0 0 1px var(--filet);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
  position: relative;
}

.encart-auteur::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--verifier);
}

.encart-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
}

.encart-auteur__role {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--instruit-fonce);
  margin: 4px 0 6px;
}

.encart-auteur__nom {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

.encart-auteur p { margin-bottom: 0.7em; }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.a-lire {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--filet);
}

.a-lire__intitule {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--instruit-fonce);
  border-left: 3px solid var(--instruit);
  padding-left: 10px;
  margin: 0 0 20px;
}

.a-lire__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.a-lire__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--encre);
  background: var(--feuillet);
  box-shadow: inset 0 0 0 1px var(--filet);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-carte)), calc(100% - var(--cut-carte)) 100%, 0 100%);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.a-lire__carte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--instruit);
  z-index: 2;
}

.a-lire__carte img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-top: 6px;
  border-bottom: 1px solid var(--filet);
}

.a-lire__titre {
  display: block;
  font-family: var(--titre);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  padding: 18px 20px 0;
}

.a-lire__accroche {
  display: block;
  font-size: 0.94rem;
  color: var(--encre-douce);
  padding: 8px 20px 22px;
}

.a-lire__carte:hover {
  transform: rotate(0.5deg);
  box-shadow: inset 0 0 0 1px var(--instruit);
}

.a-lire__carte:hover .a-lire__titre { color: var(--instruit-fonce); }

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

.derniers__suite {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}

.derniers__suite p {
  margin: 0;
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

/* Liste datee des articles, page auteur et plan du site. */

.parutions { list-style: none; padding: 0; margin: 26px 0 0; }

.parutions li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 6px 22px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--filet);
  margin: 0;
}

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

.parutions time {
  font-family: var(--annotation);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--encre-douce);
}

.parutions a {
  font-family: var(--titre);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
}

.parutions a:hover { border-bottom-color: var(--instruit); }

.parutions p {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

/* Intitule de colonne du pied de page sur les pages du magazine:
   les intertitres d une page d article viennent du corps redactionnel,
   le pied de page emploie donc un paragraphe mis en forme. */

.pied__rubrique {
  font-size: 0.95rem;
  font-family: var(--annotation);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--instruit-fonce);
  margin: 0 0 14px;
}

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

@media (max-width: 1080px) {
  .liasse { grid-template-columns: repeat(2, 1fr); }
  .a-lire__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .chapo { font-size: 1.14rem; padding: 16px 18px 18px; }
  .encart-auteur { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 620px) {
  .liasse { grid-template-columns: 1fr; gap: 24px; }
  .a-lire__grille { grid-template-columns: 1fr; }
  .corps-article h2 { font-size: 1.5rem; }
  .corps-article table { font-size: 0.94rem; }
  .corps-article td,
  .corps-article tbody th { padding: 9px 10px; }
  .parutions li { grid-template-columns: 1fr; }
  .parutions p { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche.pose:hover,
  .a-lire__carte:hover { transform: none; }
  .fiche,
  .a-lire__carte,
  .fiche__titre a { transition: none; }
}

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