/* ==========================================================================
   Reprenelle, feuille de style unique
   Planche contact de studio portrait : couloirs de marge, croix de reperage,
   cadres de tirage, annotations Solway.
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  --papier: #FCFAF3;
  --safran: #F4EFDC;
  --tirage: #FFFFFF;
  --encre: #221F10;
  --crayon: #5C563C;
  --olive: #556E14;
  --olive-sombre: #475C10;
  --sur-olive: #FFFFFF;
  --corail: #A8432A;
  --filet: #DDD4B4;

  --couloir: 28px;
  --utile: 1160px;
  --gouttiere: 24px;
  --rayon: 2px;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --courant: "Gabarito", "Segoe UI", Helvetica, Arial, sans-serif;
  --tampon: "Solway", "Rockwell", Georgia, serif;

  --croix-rail: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='48'%3E%3Cpath%20d='M9.5%2024h3M15.5%2024h3M14%2019.5v3M14%2025.5v3'%20stroke='%23556E14'%20stroke-width='1.25'%20shape-rendering='crispEdges'/%3E%3C/svg%3E");
  --croix-angle: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%3E%3Cpath%20d='M0%207h5M9%207h5M7%200v5M7%209v5'%20stroke='%23556E14'%20stroke-width='1.25'%20shape-rendering='crispEdges'/%3E%3C/svg%3E");
  --croix-trame: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Cpath%20d='M12.5%2016h2.5M17%2016h2.5M16%2012.5v2.5M16%2017v2.5'%20stroke='%23556E14'%20stroke-width='1.25'%20stroke-opacity='0.14'%20shape-rendering='crispEdges'/%3E%3C/svg%3E");
  --croix-puce: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath%20d='M0%204h2.5M5.5%204h2.5M4%200v2.5M4%205.5v2.5'%20stroke='%23556E14'%20stroke-width='1.2'%20shape-rendering='crispEdges'/%3E%3C/svg%3E");
  --croix-puce-corail: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath%20d='M0%204h2.5M5.5%204h2.5M4%200v2.5M4%205.5v2.5'%20stroke='%23A8432A'%20stroke-width='1.2'%20shape-rendering='crispEdges'/%3E%3C/svg%3E");
  --graduation: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='7'%3E%3Cpath%20d='M1%200v7M7%200v5M13%200v7'%20stroke='%23556E14'%20stroke-width='1'%20stroke-opacity='0.55'%20shape-rendering='crispEdges'/%3E%3C/svg%3E");
  --croix-blanche: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%3E%3Cpath%20d='M0%203.5h2M5%203.5h2M3.5%200v2M3.5%205v2'%20stroke='%23FFFFFF'%20stroke-width='1.1'%20shape-rendering='crispEdges'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Bases
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  padding: 0 var(--couloir);
  background: var(--papier);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.74;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

body.panneau-ouvert { overflow: hidden; }

/* Les deux couloirs de marge, fixes, traversent toute la page sans interruption. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--couloir);
  background-color: var(--safran);
  background-image: var(--croix-rail);
  background-repeat: repeat-y;
  background-size: 28px 48px;
  background-position: 0 0;
  z-index: 60;
  pointer-events: none;
  animation: derive-couloir 42s linear infinite;
}

body::before { left: 0; border-right: 1px solid var(--filet); }
body::after { right: 0; border-left: 1px solid var(--filet); }

@keyframes derive-couloir {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}

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

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

:focus-visible {
  outline: 2px solid var(--corail);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--tirage);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 0.6em;
}

h1 { font-size: 3.05rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

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

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

/* --------------------------------------------------------------------------
   3. Grille en couloir
   -------------------------------------------------------------------------- */

.planche {
  width: 100%;
  max-width: var(--utile);
  margin: 0 auto;
  padding: 0 16px;
}

.zone { padding: 84px 0; position: relative; }
.zone--safran { background: var(--safran); position: relative; overflow: hidden; }
.zone--serree { padding: 58px 0; }
.zone--haute { padding: 104px 0; }

/* Le degrade oblique tres pale qui derive sur les sections alternees. */
.zone--safran::before {
  content: "";
  position: absolute;
  inset: -40px -120px;
  background: linear-gradient(108deg, rgba(85, 110, 20, 0) 0%, rgba(85, 110, 20, 0.03) 45%, rgba(168, 67, 42, 0.03) 62%, rgba(85, 110, 20, 0) 100%);
  animation: derive-fond 60s linear infinite alternate;
  pointer-events: none;
}

@keyframes derive-fond {
  from { transform: translateX(-45px); }
  to { transform: translateX(45px); }
}

.zone--safran > .planche { position: relative; z-index: 1; }

/* Debordement pleine largeur, par dessus les marges de la page. */
.pleine-largeur {
  margin-left: calc(-1 * var(--couloir) - 16px);
  margin-right: calc(-1 * var(--couloir) - 16px);
}

.entree-zone {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: var(--gouttiere);
  align-items: start;
  margin-bottom: 44px;
}

.entree-zone h2 { margin-bottom: 0.35em; }

.chapeau-zone {
  font-size: 1.1875rem;
  font-weight: 300;
  color: var(--crayon);
  margin: 0;
}

/* Etiquette de repere Solway, calee dans le couloir de marge gauche. */
.etiquette-repere {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0;
  padding-top: 0.55em;
  text-align: right;
  border-right: 1px solid var(--filet);
  padding-right: 14px;
  position: relative;
}

.etiquette-repere::after {
  content: "";
  position: absolute;
  right: -7px;
  top: calc(0.55em + 0.35em);
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.etiquette-libre {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  display: inline-block;
  margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   4. Cartes et cadres de tirage
   -------------------------------------------------------------------------- */

.carte {
  position: relative;
  background: var(--tirage);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 30px 28px 34px;
}

.carte::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.carte::before {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 16px;
  height: 7px;
  background-image: var(--graduation);
}

.carte h3 { margin-bottom: 0.45em; }
.carte p:last-child { margin-bottom: 0; }

/* Cadre de tirage autour des photographies. */
.cadre-tirage {
  position: relative;
  border: 1px solid var(--filet);
  background: var(--tirage);
  padding: 10px;
  border-radius: var(--rayon);
}

.cadre-tirage img { border-radius: 1px; }

.cadre-tirage::before,
.cadre-tirage::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-image: var(--croix-angle);
  background-size: 8px 8px;
}

.cadre-tirage::before { top: -14px; left: -14px; }
.cadre-tirage::after { top: -14px; right: -14px; }

.cadre-tirage > .angles-bas { position: absolute; inset: 0; pointer-events: none; }
.cadre-tirage > .angles-bas::before,
.cadre-tirage > .angles-bas::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-image: var(--croix-angle);
  background-size: 8px 8px;
}
.cadre-tirage > .angles-bas::before { bottom: -14px; left: -14px; }
.cadre-tirage > .angles-bas::after { bottom: -14px; right: -14px; }

.legende-seance {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crayon);
  margin: 12px 0 0;
  display: block;
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

.bouton-tirage,
.bouton-filet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: var(--rayon);
  font-family: var(--courant);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color 180ms linear, border-color 180ms linear, transform 120ms linear;
}

.bouton-tirage {
  background: var(--olive);
  color: var(--sur-olive);
  border: 1.5px solid var(--olive);
  padding: 0 30px;
}

.bouton-tirage::before,
.bouton-tirage::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  background-image: var(--croix-blanche);
  opacity: 0;
  transition: opacity 180ms linear;
}
.bouton-tirage::before { left: 10px; }
.bouton-tirage::after { right: 10px; }

.bouton-tirage:hover {
  background: var(--olive-sombre);
  border-color: var(--olive-sombre);
  color: var(--sur-olive);
}
.bouton-tirage:hover::before,
.bouton-tirage:hover::after { opacity: 1; }
.bouton-tirage:active { transform: translateY(1px); }

.bouton-filet {
  background: transparent;
  color: var(--encre);
  border: 1.5px solid var(--olive);
  padding: 0 28px 0 33px;
}

.bouton-filet::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -4.5px;
  width: 9px;
  height: 9px;
  background-image: var(--croix-angle);
  background-size: 9px 9px;
}

.bouton-filet:hover {
  background: var(--safran);
  border-width: 2px;
  padding: 0 27.5px 0 32.5px;
  color: var(--encre);
}

.bouton-tirage:focus-visible,
.bouton-filet:focus-visible {
  outline: 2px solid var(--corail);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 1px var(--tirage);
}

.duo-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 0;
}

/* --------------------------------------------------------------------------
   6. En tete
   -------------------------------------------------------------------------- */

.bandeau-tete {
  position: fixed;
  top: 0;
  left: var(--couloir);
  right: var(--couloir);
  height: 76px;
  background: rgba(252, 250, 243, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  transition: height 180ms linear;
}

.bandeau-tete.est-defile { height: 60px; border-bottom: 1px solid var(--filet); }

.bandeau-tete.est-defile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: linear-gradient(to right, transparent 0, transparent 24px, var(--olive) 24px, var(--olive) 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0 210px, #000 210px);
  mask-image: linear-gradient(to right, transparent 0 210px, #000 210px);
}

.rang-tete {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--encre);
}

.marque-nom {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1;
}

.marque svg { display: block; flex: none; }

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

.nav-planche a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  position: relative;
  padding-bottom: 12px;
}

.nav-planche a:hover { color: var(--olive); }

.nav-planche a.est-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  background-image: var(--croix-angle);
  background-size: 8px 8px;
}

.tete-action { display: flex; align-items: center; gap: 14px; }
.tete-action .bouton-tirage { height: 44px; padding: 0 22px; font-size: 0.9375rem; }

.bouton-trois-traits {
  display: none;
  width: 46px;
  height: 44px;
  background: transparent;
  border: 1.5px solid var(--olive);
  border-radius: var(--rayon);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.bouton-trois-traits span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--olive);
}

.panneau-planche {
  position: fixed;
  top: 0;
  left: var(--couloir);
  right: var(--couloir);
  bottom: 0;
  background: var(--papier);
  z-index: 70;
  padding: 92px 22px 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 180ms linear;
}

.panneau-planche[hidden] { display: none; }
.panneau-planche.est-ouvert { transform: translateY(0); }

.panneau-planche a {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  padding: 15px 0 15px 26px;
  border-bottom: 1px solid var(--filet);
  background-image: var(--croix-angle);
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 12px 12px;
}

.panneau-planche .bouton-tirage { margin-top: 26px; width: 100%; background-image: none; color: var(--sur-olive); padding: 0 24px; }

/* --------------------------------------------------------------------------
   7. Ouverture (hero)
   -------------------------------------------------------------------------- */

.ouverture { padding: 132px 0 0; position: relative; }

.rang-ouverture {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}

.ouverture-texte { grid-column: 1 / span 8; }
.ouverture-portrait { grid-column: 9 / span 4; padding-top: 10px; }

.ouverture h1 { margin-bottom: 0.3em; }
.ouverture h1 .en-corail { color: var(--corail); }

.sous-promesse {
  font-size: 1.1875rem;
  font-weight: 300;
  color: var(--crayon);
  max-width: 60ch;
}

.mention-appui {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crayon);
  margin: 22px 0 0;
}

/* Bande de pied du hero, pleine largeur, filet en haut. */
.bande-appui {
  margin-top: 70px;
  border-top: 1px solid var(--filet);
  background: var(--safran);
  background-image: var(--croix-trame);
  background-size: 32px 32px;
  animation: derive-couloir 42s linear infinite;
}

.rang-appui {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.appui-cellule {
  padding: 26px 24px;
  border-left: 1px solid var(--filet);
}
.appui-cellule:first-child { border-left: 0; }

.appui-cellule b {
  display: block;
  font-family: var(--tampon);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--corail);
}

.appui-cellule span {
  display: block;
  font-size: 0.875rem;
  color: var(--crayon);
  line-height: 1.5;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   8. Constat : trois couloirs verticaux
   -------------------------------------------------------------------------- */

.trois-couloirs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--filet);
}

.colonne-constat {
  padding: 34px 30px 40px;
  border-left: 1px solid var(--filet);
  position: relative;
}
.colonne-constat:first-child { border-left: 0; padding-left: 0; }
.colonne-constat:last-child { padding-right: 0; }

.colonne-constat h3 { margin-top: 14px; }
.colonne-constat p:last-child { margin-bottom: 0; }

.numero-constat {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
}

.note-crayon {
  margin-top: 46px;
  border-left: 3px solid var(--corail);
  padding: 4px 0 4px 20px;
  color: var(--crayon);
  font-size: 1.0625rem;
  max-width: 74ch;
}

.note-crayon strong { color: var(--encre); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Methode : etapes numerotees
   -------------------------------------------------------------------------- */

.suite-etapes { border-top: 1px solid var(--filet); }

.etape {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr) 250px;
  gap: var(--gouttiere);
  padding: 32px 0;
  border-bottom: 1px solid var(--filet);
  align-items: start;
}

.numero-etape {
  font-family: var(--tampon);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--olive);
  text-align: right;
  padding-right: 14px;
  border-right: 1px solid var(--filet);
}

.etape h3 { margin-bottom: 0.4em; }
.etape p { margin-bottom: 0; }

.delai-etape {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corail);
  padding-top: 6px;
}

.bloc-terrain {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 46px;
  align-items: center;
  margin-top: 60px;
}

/* --------------------------------------------------------------------------
   10. Reglages : grille de cartes
   -------------------------------------------------------------------------- */

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

.carte-reglage .repere-reglage {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  display: block;
  margin-bottom: 10px;
}

.carte-reglage p { font-size: 1rem; color: var(--crayon); }

/* --------------------------------------------------------------------------
   11. Gains : deux couloirs larges
   -------------------------------------------------------------------------- */

.duo-gains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  border-top: 1px solid var(--filet);
}

.gain {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--filet);
  align-items: baseline;
}

.gain b {
  font-family: var(--tampon);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--corail);
  text-align: right;
}

.gain h3 { font-size: 1.15rem; margin-bottom: 0.3em; }
.gain p { margin: 0; font-size: 1rem; color: var(--crayon); }

/* --------------------------------------------------------------------------
   12. Preuve : bandeau de chiffres et temoignages
   -------------------------------------------------------------------------- */

.bandeau-chiffres {
  background: var(--safran);
  background-image: var(--croix-trame);
  background-size: 32px 32px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  animation: derive-couloir 42s linear infinite;
  padding: 40px 0;
}

.rang-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: var(--utile);
  margin: 0 auto;
  padding: 0 16px;
}

.chiffre-cle { padding: 0 24px; border-left: 1px solid var(--filet); }
.chiffre-cle:first-child { border-left: 0; }

.chiffre-cle b {
  display: block;
  font-family: var(--tampon);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}

.chiffre-cle span {
  display: block;
  font-size: 0.875rem;
  color: var(--crayon);
  line-height: 1.5;
  margin-top: 8px;
}

.trio-temoins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 54px;
}

.carte-temoin blockquote {
  margin: 0 0 18px;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.carte-temoin blockquote p:last-child { margin-bottom: 0; }

.attribution {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--filet);
  padding-top: 16px;
}

.vignette-carree {
  width: 52px;
  height: 52px;
  border: 1px solid var(--filet);
  background: var(--safran);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tampon);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--olive);
}

.attribution b { display: block; font-weight: 600; font-family: var(--courant); }

.attribution span {
  display: block;
  font-size: 0.875rem;
  color: var(--crayon);
  line-height: 1.45;
}

.etiquette-ville {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corail);
}

.bloc-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 46px;
  align-items: center;
  margin-top: 62px;
}

/* --------------------------------------------------------------------------
   13. Tarifs
   -------------------------------------------------------------------------- */

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

.fiche-formule {
  position: relative;
  background: var(--tirage);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 32px 26px 34px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fiche-formule::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.fiche-formule--retenue {
  margin: -16px 0;
  padding: 48px 26px 50px;
  border-color: var(--olive);
  box-shadow: 0 0 0 4px var(--papier), 0 0 0 5px var(--olive);
}

.mention-retenue {
  position: absolute;
  top: 14px;
  left: 26px;
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corail);
}

.nom-formule { font-size: 1.5rem; margin-bottom: 0.25em; }

.prix-formule {
  font-family: var(--tampon);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--olive);
  display: block;
  margin: 14px 0 4px;
  font-variant-numeric: tabular-nums;
}

.unite-formule {
  display: block;
  font-size: 0.875rem;
  color: var(--crayon);
  margin-bottom: 16px;
}

.cible-formule {
  font-size: 0.9375rem;
  color: var(--crayon);
  border-top: 1px solid var(--filet);
  padding-top: 16px;
  margin-bottom: 18px;
}

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

.liste-inclus li {
  position: relative;
  padding: 0 0 12px 22px;
  font-size: 0.9375rem;
  line-height: 1.6;
  background-image: var(--croix-puce);
  background-repeat: no-repeat;
  background-position: 0 8px;
}

.fiche-formule--retenue .liste-inclus li { background-image: var(--croix-puce-corail); }

.fiche-formule .bouton-tirage,
.fiche-formule .bouton-filet { margin-top: auto; width: 100%; }

.mention-tarifs {
  margin-top: 34px;
  font-size: 0.9375rem;
  color: var(--crayon);
  border-top: 1px solid var(--filet);
  padding-top: 18px;
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

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

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

.question summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 26px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.0625rem;
  position: relative;
  background-image: var(--croix-angle);
  background-repeat: no-repeat;
  background-position: 0 24px;
  background-size: 12px 12px;
  transition: color 180ms linear;
}

.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--olive); }

.question summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 28px;
  width: 12px;
  height: 1.5px;
  background: var(--olive);
  box-shadow: 0 0 0 0 transparent;
  transition: transform 180ms linear;
}

.question summary::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 22.5px;
  width: 1.5px;
  height: 12px;
  background: var(--olive);
  transition: transform 180ms linear, opacity 180ms linear;
}

.question[open] summary::before { transform: scaleY(0); opacity: 0; }

.reponse { padding: 0 40px 22px 26px; color: var(--crayon); }
.reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */

.rang-contact {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: start;
}

.formulaire-planche {
  background: var(--tirage);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 34px 30px;
  position: relative;
}

.formulaire-planche::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.champ { margin-bottom: 20px; position: relative; }

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

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 12px 14px;
  transition: border-color 180ms linear;
}

.champ textarea { resize: vertical; line-height: 1.6; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--olive);
  outline: 2px solid var(--corail);
  outline-offset: 2px;
}

.champ.est-actif::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.aide-champ {
  font-size: 0.875rem;
  color: var(--crayon);
  margin: 0 0 8px;
  max-width: none;
}

.champ-consentement {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--crayon);
  margin-bottom: 24px;
}

.champ-consentement input { width: 20px; height: 20px; accent-color: var(--olive); margin-top: 3px; }
.champ-consentement label { font-weight: 400; }

.deux-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }

.apres-formulaire {
  font-size: 0.9375rem;
  color: var(--crayon);
  margin: 18px 0 0;
}

.rappel-contact {
  background: var(--safran);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 30px 26px;
  position: relative;
}

.rappel-contact::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.rappel-contact h3 { font-size: 1.2rem; }
.rappel-contact ul { list-style: none; margin: 0; padding: 0; }

.rappel-contact li {
  padding: 0 0 12px 22px;
  font-size: 0.9375rem;
  line-height: 1.6;
  background-image: var(--croix-puce);
  background-repeat: no-repeat;
  background-position: 0 8px;
}

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */

.pied-planche {
  background: var(--safran);
  border-top: 1px solid var(--filet);
  padding: 62px 0 0;
  margin-top: 0;
}

.rang-pied {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px var(--gouttiere);
}

.colonne-pied h4 {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 16px;
}

.colonne-pied ul { list-style: none; margin: 0; padding: 0; }
.colonne-pied li { margin-bottom: 10px; }

.colonne-pied a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.9375rem;
}
.colonne-pied a:hover { color: var(--olive); text-decoration: underline; }

.positionnement-pied {
  font-size: 0.9375rem;
  color: var(--crayon);
  max-width: 34ch;
  margin: 14px 0 18px;
}

.liens-profils { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.liens-profils a { font-size: 0.875rem; color: var(--olive); }

.coordonnees-pied {
  font-size: 0.875rem;
  color: var(--crayon);
  line-height: 1.6;
  margin: 14px 0 0;
}

.reseau-pied {
  margin-top: 46px;
  border-top: 1px solid var(--filet);
  padding-top: 20px;
}

.reseau-pied h4 {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 10px;
}

.reseau-pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.reseau-pied a { font-size: 0.875rem; color: var(--crayon); text-decoration: none; }
.reseau-pied a:hover { color: var(--olive); text-decoration: underline; }

.barre-signature {
  margin-top: 30px;
  border-top: 1px solid var(--filet);
  padding: 18px 0 28px;
  font-size: 0.875rem;
  color: var(--crayon);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}

.barre-signature p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   17. Pages internes
   -------------------------------------------------------------------------- */

.tete-page { padding: 128px 0 40px; border-bottom: 1px solid var(--filet); }
.tete-page h1 { font-size: 2.6rem; max-width: 22ch; }

.fil-ariane {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crayon);
  margin: 0 0 18px;
}
.fil-ariane a { color: var(--olive); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

.corps-page {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: var(--gouttiere);
  padding: 54px 0 90px;
}

.corps-page > .aside-page { position: sticky; top: 110px; align-self: start; }

.aside-page ul { list-style: none; margin: 0; padding: 0; }
.aside-page li { margin-bottom: 9px; }
.aside-page a {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crayon);
  text-decoration: none;
}
.aside-page a:hover { color: var(--olive); }

.texte-long h2 { margin-top: 1.7em; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long h3 { margin-top: 1.5em; }
.texte-long ul, .texte-long ol { max-width: 68ch; padding-left: 22px; }
.texte-long li { margin-bottom: 9px; }
.texte-long dl { max-width: 68ch; }
.texte-long dt { font-weight: 600; margin-top: 16px; }
.texte-long dd { margin: 4px 0 0; color: var(--crayon); }

.encadre-note {
  background: var(--tirage);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--corail);
  padding: 22px 24px;
  margin: 28px 0;
  max-width: 72ch;
}
.encadre-note p:last-child { margin-bottom: 0; }

.portrait-auteur {
  float: right;
  margin: 0 0 24px 30px;
  max-width: 260px;
}

.tableau-plan { width: 100%; border-collapse: collapse; margin: 24px 0; }
.tableau-plan th, .tableau-plan td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--filet);
  font-size: 0.9375rem;
  vertical-align: top;
}
.tableau-plan th {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
}

.page-courte {
  min-height: 62vh;
  padding: 150px 0 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-courte h1 { max-width: 20ch; }
.page-courte ul { padding-left: 22px; max-width: 62ch; }
.page-courte li { margin-bottom: 8px; }
.page-courte p { font-size: 1.1875rem; font-weight: 300; color: var(--crayon); }

/* --------------------------------------------------------------------------
   18. Apparition au defilement
   -------------------------------------------------------------------------- */

.au-defilement { opacity: 0; transform: translateY(10px); }
.au-defilement.est-visible {
  opacity: 1;
  transform: none;
  transition: opacity 340ms linear, transform 340ms linear;
}

/* --------------------------------------------------------------------------
   19. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  h1 { font-size: 2.55rem; }
  .ouverture-texte { grid-column: 1 / span 12; }
  .ouverture-portrait { grid-column: 1 / span 7; padding-top: 34px; }
  .grille-reglages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio-formules { grid-template-columns: minmax(0, 1fr); }
  .fiche-formule--retenue { margin: 0; padding: 48px 26px 34px; }
  .trio-temoins { grid-template-columns: minmax(0, 1fr); }
  .rang-pied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc-terrain, .bloc-detail, .rang-contact { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .duo-gains { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 860px) {
  :root { --couloir: 14px; }

  body::before,
  body::after { background-size: 14px 96px; }

  @keyframes derive-couloir {
    from { background-position: 0 0; }
    to { background-position: 14px 0; }
  }

  .nav-planche { display: none; }
  .tete-action .bouton-tirage { display: none; }
  .bouton-trois-traits { display: flex; }

  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.7rem; }

  .zone { padding: 58px 0; }
  .zone--haute { padding: 66px 0; }
  .ouverture { padding: 108px 0 0; }

  .entree-zone,
  .corps-page { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .etiquette-repere {
    text-align: left;
    border-right: 0;
    border-left: 1px solid var(--filet);
    padding: 0 0 0 14px;
  }
  .etiquette-repere::after { right: auto; left: -7px; top: 4px; }

  .corps-page > .aside-page { position: static; margin-bottom: 30px; }

  .trois-couloirs { grid-template-columns: minmax(0, 1fr); }
  .colonne-constat {
    border-left: 0;
    border-bottom: 1px solid var(--filet);
    padding: 26px 0 30px;
  }
  .colonne-constat:last-child { border-bottom: 0; }

  .etape { grid-template-columns: 64px minmax(0, 1fr); }
  .numero-etape { font-size: 1.8rem; padding-right: 10px; }
  .delai-etape { grid-column: 2; padding-top: 0; }

  .grille-reglages { grid-template-columns: minmax(0, 1fr); }
  .rang-appui { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appui-cellule { border-left: 0; border-top: 1px solid var(--filet); padding: 20px 16px; }
  .appui-cellule:first-child, .appui-cellule:nth-child(2) { border-top: 0; }

  .rang-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .chiffre-cle { border-left: 0; padding: 0 12px 0 0; }
  .chiffre-cle b { font-size: 2.4rem; }

  .rang-pied { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .deux-champs { grid-template-columns: minmax(0, 1fr); }
  .portrait-auteur { float: none; margin: 0 0 26px; max-width: 100%; }
  .formulaire-planche { padding: 26px 20px; }
  .gain { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  body::before,
  body::after,
  .bande-appui,
  .bandeau-chiffres { animation: none; background-position: 0 0; }

  .zone--safran::before { animation: none; transform: none; }

  .au-defilement { opacity: 1; transform: none; transition: none; }

  *,
  *::before,
  *::after { transition-duration: 1ms !important; }
}

@media print {
  body::before, body::after, .bandeau-tete, .panneau-planche { display: none; }
  body { padding: 0; }
}
/* ==========================================================================
   20. Le Cahier d image professionnelle, magazine du site
   Meme papier, memes couloirs, memes croix de reperage que le reste de la
   planche contact. Les cartes sont des vignettes de planche, l article est
   un tirage encadre, et le corps redactionnel est mis en forme sur ses
   balises nues, sans aucune classe: les redacteurs n ont rien a inventer.
   Aucune regle ci dessous ne modifie une regle des sections 1 a 19.
   ========================================================================== */

/* --------------------------------------------------------------------------
   20.1 Reperes communs au magazine
   -------------------------------------------------------------------------- */

.mag-etiquette {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 12px;
  display: block;
}

.mag-titre-bloc {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--encre);
  margin: 0 0 0.55em;
  max-width: 30ch;
}

.mag-mention {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crayon);
  margin: 20px 0 0;
}

/* --------------------------------------------------------------------------
   20.2 Grille de cartes d article
   Trois colonnes de quatre, comme les cartes de reglage de la page d accueil,
   pour que le sommaire du magazine se lise dans la meme trame.
   -------------------------------------------------------------------------- */

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

.grille-articles > li { margin: 0; padding: 0; display: flex; }

.carte-article {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--tirage);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 12px 12px 0;
  transition: border-color 180ms linear;
}

/* Croix de reperage isolee a l angle superieur droit, repere de coupe en bas a gauche. */
.carte-article::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
  z-index: 2;
}

.carte-article::before {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 16px;
  height: 7px;
  background-image: var(--graduation);
  z-index: 2;
}

.carte-article:hover { border-color: var(--olive); }

.carte-article-vue {
  display: block;
  border: 1px solid var(--filet);
  border-radius: 1px;
  overflow: hidden;
}

.carte-article-vue img { width: 100%; }

.carte-article-corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 14px 34px;
}

.carte-article-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 10px;
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  max-width: none;
}

.carte-article-angle { color: var(--olive); }
.carte-article-rang { color: var(--corail); }

.carte-article-titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

.carte-article-titre a {
  color: var(--encre);
  text-decoration: none;
  transition: color 180ms linear;
}

.carte-article-titre a:hover { color: var(--olive); text-decoration: underline; }

.carte-article-extrait {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--crayon);
  margin: 0 0 16px;
  max-width: none;
}

.carte-article-jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--filet);
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crayon);
  max-width: none;
}

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

.entete-article { padding: 128px 0 42px; border-bottom: 1px solid var(--filet); }

.entete-article h1 { font-size: 2.6rem; max-width: 24ch; margin-bottom: 0.3em; }

.fil-ariane-mag {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crayon);
  margin: 0 0 18px;
  max-width: none;
}

.fil-ariane-mag a { color: var(--olive); text-decoration: none; }
.fil-ariane-mag a:hover { text-decoration: underline; }
.fil-ariane-mag span[aria-current] { color: var(--crayon); }

.jalons-article {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--filet);
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crayon);
  max-width: none;
}

.jalons-article b { color: var(--corail); font-weight: 700; }
.jalons-article a { color: var(--olive); text-decoration: none; }
.jalons-article a:hover { text-decoration: underline; }

/* Le chapeau, en exergue, borde par un filet corail comme la note au crayon. */
.chapeau-article {
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--crayon);
  border-left: 3px solid var(--corail);
  padding: 6px 0 6px 22px;
  margin: 28px 0 0;
  max-width: 68ch;
}

.photo-article { margin: 0 0 42px; max-width: 860px; }
.photo-article .legende-seance { margin-top: 14px; }

/* --------------------------------------------------------------------------
   20.4 Corps d article, mis en forme sur ses balises nues
   Aucun attribut class n est admis dans le texte des redacteurs: toutes les
   regles ci dessous visent les descendantes directes du conteneur de corps.
   -------------------------------------------------------------------------- */

.corps-article { max-width: 68ch; }

.corps-article > p,
.corps-article li,
.corps-article blockquote,
.corps-article figcaption { max-width: 68ch; }

.corps-article h2 {
  font-size: 2.1rem;
  margin: 1.85em 0 0.5em;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
  position: relative;
}

.corps-article h2::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
  background-color: var(--papier);
}

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

.corps-article h3 {
  font-size: 1.3rem;
  margin: 1.6em 0 0.45em;
}

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

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

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

/* Listes a puces: la croix de reperage remplace la puce, comme dans les formules. */
.corps-article ul { list-style: none; margin: 0 0 1.4em; padding: 0; }

.corps-article ul li {
  position: relative;
  padding: 0 0 12px 24px;
  background-image: var(--croix-puce);
  background-repeat: no-repeat;
  background-position: 0 9px;
}

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

.corps-article ol li {
  position: relative;
  counter-increment: repere-corps;
  padding: 0 0 12px 40px;
}

.corps-article ol li::before {
  content: counter(repere-corps, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--tampon);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}

.corps-article li ul,
.corps-article li ol { margin: 10px 0 0; }

/* Tableau recapitulatif: en tete en petites capitales Solway, filets sable. */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  background: var(--tirage);
  border: 1px solid var(--filet);
  font-variant-numeric: tabular-nums;
}

.corps-article thead { background: var(--safran); }

.corps-article th {
  text-align: left;
  padding: 13px 15px;
  border-bottom: 1px solid var(--filet);
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  vertical-align: top;
}

.corps-article tbody th { color: var(--encre); background: var(--safran); }

.corps-article td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--filet);
  font-size: 0.9375rem;
  line-height: 1.6;
  vertical-align: top;
}

.corps-article tbody tr:last-child td,
.corps-article tbody tr:last-child th { border-bottom: 0; }

/* Encadre: une carte de tirage posee dans le fil du texte. */
.corps-article aside {
  position: relative;
  background: var(--tirage);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--corail);
  border-radius: var(--rayon);
  padding: 24px 26px 24px 24px;
  margin: 0 0 1.6em;
}

.corps-article aside::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.corps-article aside > :last-child { margin-bottom: 0; }
.corps-article aside p { font-size: 1rem; color: var(--crayon); }
.corps-article aside strong { color: var(--encre); }

/* Citation: le filet olive du couloir de marge, ramene dans la colonne de texte. */
.corps-article blockquote {
  margin: 0 0 1.6em;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--olive);
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--crayon);
}

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

.corps-article figure {
  margin: 0 0 1.6em;
  border: 1px solid var(--filet);
  background: var(--tirage);
  padding: 10px;
  border-radius: var(--rayon);
}

.corps-article figcaption {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crayon);
  margin: 12px 2px 2px;
}

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

.appel-article {
  position: relative;
  background: var(--safran);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 32px 30px 34px;
  margin: 48px 0 0;
  max-width: 780px;
}

.appel-article::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.appel-article p { color: var(--crayon); }
.appel-article .mag-titre-bloc { max-width: 26ch; }
.appel-article .bouton-tirage { margin-top: 8px; }

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

.encart-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  background: var(--tirage);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 28px 28px 30px;
  margin: 34px 0 0;
  position: relative;
  max-width: 780px;
}

.encart-auteur::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
}

.encart-auteur img {
  width: 96px;
  height: 96px;
  border: 1px solid var(--filet);
  background: var(--safran);
  padding: 4px;
  border-radius: 1px;
  object-fit: cover;
}

.encart-auteur p { font-size: 0.9375rem; color: var(--crayon); margin-bottom: 0.8em; }
.encart-auteur p:last-child { margin-bottom: 0; }

.encart-auteur-nom {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--encre);
  margin: 0 0 4px;
}

.encart-auteur-role {
  display: block;
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   20.7 Bloc A lire aussi
   Bande tramee de croix, comme le bandeau de chiffres de la page d accueil,
   avec la meme derive horizontale tres lente.
   -------------------------------------------------------------------------- */

.bloc-lire-aussi {
  margin: 56px 0 0;
  border-top: 1px solid var(--filet);
  padding-top: 34px;
  background-image: var(--croix-trame);
  background-size: 32px 32px;
  background-repeat: repeat-x;
  animation: derive-couloir 42s linear infinite;
}

.mur-lire-aussi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: 22px;
}

.carte-aussi {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tirage);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 10px 10px 0;
  transition: border-color 180ms linear;
}

.carte-aussi::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  background-image: var(--croix-angle);
  z-index: 2;
}

.carte-aussi:hover { border-color: var(--olive); }

.carte-aussi-vue {
  display: block;
  border: 1px solid var(--filet);
  border-radius: 1px;
  overflow: hidden;
}

.carte-aussi-corps { padding: 14px 12px 20px; }

.carte-aussi-titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 0.45em;
}

.carte-aussi-titre a { color: var(--encre); text-decoration: none; transition: color 180ms linear; }
.carte-aussi-titre a:hover { color: var(--olive); text-decoration: underline; }

.carte-aussi-accroche {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--crayon);
  margin: 0;
  max-width: none;
}

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

.zone-magazine { border-top: 1px solid var(--filet); }
.zone-magazine .grille-articles { margin-top: 8px; }

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

.pied-magazine p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--crayon);
  max-width: 52ch;
}

/* Liste des neuf articles sur la page auteur et sur le plan du site. */
.liste-parutions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }

.liste-parutions li {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 8px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--filet);
  align-items: baseline;
  margin: 0;
}

.liste-parutions time {
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corail);
}

.liste-parutions a { color: var(--encre); text-decoration: none; font-weight: 500; }
.liste-parutions a:hover { color: var(--olive); text-decoration: underline; }

.liste-parutions span {
  display: block;
  font-family: var(--tampon);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crayon);
  margin-top: 4px;
}

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

@media (max-width: 1040px) {
  .grille-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mur-lire-aussi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entete-article h1 { font-size: 2.2rem; }
}

@media (max-width: 860px) {
  .grille-articles,
  .mur-lire-aussi { grid-template-columns: minmax(0, 1fr); }

  .entete-article { padding: 104px 0 34px; }
  .entete-article h1 { font-size: 1.95rem; }

  .corps-article h2 { font-size: 1.7rem; }

  /* Un tableau large defile dans sa propre boite, jamais la page entiere. */
  .corps-article table { display: block; overflow-x: auto; }

  .encart-auteur { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .liste-parutions li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .bloc-lire-aussi { animation: none; background-position: 0 0; }
}

@media print {
  .bloc-lire-aussi, .appel-article { display: none; }
  .corps-article { max-width: 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}