/* Tireliane, feuille de style unique.
   Carnet de croquis a marge libre, surpiqure pointillee, mode clair integral. */

:root {
  --nacre: #F8F4F7;
  --galet: #ECE9EA;
  --surface: #FFFFFF;
  --encre: #241E27;
  --doux: #5E5464;
  --prune: #A2177D;
  --prune-fonce: #87126A;
  --nacre-rose: #FFF4FA;
  --porcelaine: #3F5F7A;
  --fil: #D9D2DA;

  --police-titre: "Michroma", "Trebuchet MS", sans-serif;
  --police-texte: "Nunito Sans", "Segoe UI", Arial, sans-serif;
  --police-etiquette: "Copse", Georgia, "Times New Roman", serif;

  --marge-libre: 220px;
  --colonne: 940px;
  --coupe: 16px;
  --rayon: 10px;
  --duree: 260ms;
  --courbe: cubic-bezier(0.22, 0.68, 0.3, 1);
}

/* ------------------------------------------------------------------
   1. Bases
   ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background-color: var(--nacre);
  color: var(--encre);
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--prune); text-underline-offset: 3px; }
a:hover { color: var(--prune-fonce); }

h1, h2 {
  font-family: var(--police-titre);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0 0 0.6em;
  text-align: left;
}

h1 { font-size: 2rem; letter-spacing: 0.06em; max-width: 15ch; }
h2 { font-size: 1.5rem; letter-spacing: 0.04em; max-width: 20ch; }

h3 {
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 0 0 0.5em;
}

h4 {
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 1rem;
  margin: 0 0 0.4em;
}

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

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

strong { font-weight: 800; }

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

.lecture-seule {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.saut-contenu {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 90;
  background: var(--prune);
  color: var(--nacre-rose);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  transition: top 180ms var(--courbe);
}
.saut-contenu:focus { top: 12px; color: var(--nacre-rose); }

/* ------------------------------------------------------------------
   2. Motif signature : la surpiqure pointillee
   ------------------------------------------------------------------ */

.couture,
.couture-double,
.couture-fine {
  border: 0;
  height: 1.5px;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-repeat: repeat-x;
  margin: 0;
}

.couture-double {
  height: 6.5px;
  background-image:
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px, 100% 1.5px;
  background-position: left top, left bottom;
  background-repeat: repeat-x;
}

/* Cadre cousu : filet pointille a 7 pixels du bord,
   ouvert sur 18 pixels apres le coin coupe. */
.cousu {
  position: relative;
  border-radius: var(--rayon);
  background-color: transparent;
  background-image: linear-gradient(135deg, transparent 0 var(--coupe), var(--surface) var(--coupe));
  transition: background-image var(--duree) var(--courbe);
}

.cousu::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size:
    calc(100% - 18px) 1.5px,
    100% 1.5px,
    1.5px 100%,
    1.5px calc(100% - 18px);
  background-position:
    18px top,
    left bottom,
    right top,
    left 18px;
  background-repeat: no-repeat;
}

/* Les douze premieres dents apres l ouverture passent en prune. */
.cousu::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 7px;
  width: 84px;
  height: 1.5px;
  pointer-events: none;
  opacity: 0;
  background-image: repeating-linear-gradient(90deg, var(--prune) 0 3px, transparent 3px 7px);
  transition: opacity var(--duree) var(--courbe);
}

.cousu:hover::after,
.cousu:focus-within::after,
.cousu.est-cousue::after { opacity: 1; }

.cousu:hover,
.cousu:focus-within,
.cousu.est-cousue {
  background-image: linear-gradient(135deg, var(--prune) 0 var(--coupe), var(--surface) var(--coupe));
}

.cousu-galet {
  background-image: linear-gradient(135deg, transparent 0 var(--coupe), var(--galet) var(--coupe));
}
.cousu-galet:hover,
.cousu-galet.est-cousue {
  background-image: linear-gradient(135deg, var(--prune) 0 var(--coupe), var(--galet) var(--coupe));
}

.cousu-nacre {
  background-image: linear-gradient(135deg, transparent 0 var(--coupe), var(--nacre) var(--coupe));
}
.cousu-nacre:hover,
.cousu-nacre.est-cousue {
  background-image: linear-gradient(135deg, var(--prune) 0 var(--coupe), var(--nacre) var(--coupe));
}

/* ------------------------------------------------------------------
   3. Page de carnet : marge libre et couture verticale
   ------------------------------------------------------------------ */

.feuillet {
  position: relative;
  padding: 92px 24px 96px;
}

.feuillet-galet { background-color: var(--galet); }

.feuillet-corps {
  position: relative;
  max-width: calc(var(--marge-libre) + var(--colonne));
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--marge-libre) minmax(0, 1fr);
}

.feuillet-corps::before {
  content: "";
  position: absolute;
  left: calc(var(--marge-libre) - 24px);
  top: -92px;
  bottom: -96px;
  width: 1.5px;
  background-image: repeating-linear-gradient(180deg, var(--fil) 0 3px, transparent 3px 7px);
  pointer-events: none;
}

.marge {
  padding-right: 32px;
  padding-top: 4px;
}

.colonne-texte { min-width: 0; }

/* Annotation de marge, jamais un paragraphe. */
.annotation {
  font-family: var(--police-etiquette);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--doux);
  margin: 18px 0 0;
  max-width: 16ch;
}

.numero-temps {
  font-family: var(--police-etiquette);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--prune);
  display: block;
}

/* ------------------------------------------------------------------
   4. Surtitres, etiquettes, chiffres
   ------------------------------------------------------------------ */

.surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-etiquette);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--porcelaine);
  margin: 0 0 14px;
  max-width: none;
}

.surtitre::before {
  content: "";
  flex: 0 0 18px;
  height: 1.5px;
  background-image: repeating-linear-gradient(90deg, var(--porcelaine) 0 3px, transparent 3px 7px);
}

.chapeau {
  font-weight: 300;
  font-size: 1.175rem;
  line-height: 1.65;
  color: var(--doux);
  max-width: 60ch;
}

.mention {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--doux);
  line-height: 1.6;
}

.heure {
  font-family: var(--police-etiquette);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--porcelaine);
}

.heure-soulignee {
  color: var(--prune);
  box-shadow: inset 0 -6px 0 rgba(162, 23, 125, 0.14);
}

.chiffre-cle {
  font-family: var(--police-etiquette);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.05;
  color: var(--prune);
  display: block;
}

.chiffre-unite {
  display: block;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--encre);
  margin-top: 6px;
  max-width: 26ch;
}

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

.bouton,
.bouton-second {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 26px;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background-color var(--duree) var(--courbe), transform 90ms var(--courbe);
}

.bouton {
  color: var(--nacre-rose);
  background-color: transparent;
  background-image: linear-gradient(135deg, transparent 0 12px, var(--prune) 12px);
}

.bouton::after {
  content: "";
  position: absolute;
  inset: 5px;
  opacity: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--nacre-rose) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--nacre-rose) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--nacre-rose) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--nacre-rose) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px, 100% 1.5px, 1.5px 100%, 1.5px 100%;
  background-position: left top, left bottom, left top, right top;
  background-repeat: no-repeat;
  transition: opacity var(--duree) var(--courbe);
}

.bouton:hover {
  color: var(--nacre-rose);
  background-image: linear-gradient(135deg, transparent 0 12px, var(--prune-fonce) 12px);
}
.bouton:hover::after { opacity: 1; }
.bouton:active { transform: translateY(1px); }

.bouton-second {
  color: var(--encre);
  background-color: transparent;
  background-image: linear-gradient(135deg, transparent 0 12px, var(--surface) 12px);
}

.bouton-second::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px, 100% 1.5px, 1.5px 100%, 1.5px 100%;
  background-position: left top, left bottom, left top, right top;
  background-repeat: no-repeat;
  transition: background-image var(--duree) var(--courbe);
}

.bouton-second:hover {
  color: var(--encre);
  background-image: linear-gradient(135deg, transparent 0 12px, var(--galet) 12px);
}

.bouton-second:hover::after {
  background-image:
    repeating-linear-gradient(90deg, var(--porcelaine) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--porcelaine) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--porcelaine) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--porcelaine) 0 3px, transparent 3px 7px);
}

.bouton-second:active { transform: translateY(1px); }

.rangee-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 0;
}

/* ------------------------------------------------------------------
   6. Pictogrammes qui pivotent
   ------------------------------------------------------------------ */

.picto {
  width: 40px;
  height: 40px;
  display: block;
  stroke: var(--porcelaine);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 0 100%;
  transition: transform var(--duree) var(--courbe), stroke var(--duree) var(--courbe);
}

.cousu:hover .picto,
.cousu:focus-within .picto,
.picto-pivot:hover .picto,
.temps.est-vue .picto {
  transform: rotate(10deg);
  stroke: var(--prune);
}

.temps.est-vue .picto { transition-delay: var(--retard, 0ms); }

/* ------------------------------------------------------------------
   7. En tete
   ------------------------------------------------------------------ */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 74px;
  background-color: rgba(248, 244, 247, 0.96);
  backdrop-filter: blur(8px);
  transition: height var(--duree) var(--courbe);
}

.entete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  transition: background-image var(--duree) var(--courbe);
}

.entete.est-reduite { height: 62px; }
.entete.est-reduite::after {
  background-image: repeating-linear-gradient(90deg, rgba(162, 23, 125, 0.25) 0 3px, transparent 3px 7px);
}

.entete-corps {
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--encre);
  font-family: var(--police-titre);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logotype:hover { color: var(--encre); }

.monogramme { width: 44px; height: 44px; flex: 0 0 44px; }

.navigation-ancres {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.navigation-ancres a {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--encre);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
}

.navigation-ancres a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  opacity: 0;
  background-image: repeating-linear-gradient(90deg, var(--prune) 0 3px, transparent 3px 7px);
  transition: opacity 180ms var(--courbe);
}
.navigation-ancres a:hover { color: var(--prune); }
.navigation-ancres a:hover::after { opacity: 1; }

.entete .bouton { min-height: 42px; padding: 11px 20px; font-size: 0.875rem; }

.ouvre-panneau {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background-color: var(--surface);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.ouvre-panneau span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--encre);
  position: relative;
}
.ouvre-panneau span::before,
.ouvre-panneau span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background-color: var(--encre);
}
.ouvre-panneau span::before { top: -7px; }
.ouvre-panneau span::after { top: 7px; }

.panneau {
  position: fixed;
  inset: 0;
  z-index: 70;
  background-color: var(--nacre);
  transform: translateX(100%);
  transition: transform 300ms var(--courbe);
  display: flex;
  flex-direction: column;
  padding: 22px 24px 40px;
  overflow-y: auto;
}
.panneau.est-ouvert { transform: translateX(0); }
.panneau[hidden] { display: none; }

.panneau-haut {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.ferme-panneau {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 6px;
  background-color: var(--surface);
  color: var(--encre);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.panneau nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panneau nav a {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--encre);
  text-decoration: none;
  padding: 16px 4px;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.panneau nav a:hover { color: var(--prune); }
.panneau .bouton { margin-top: 26px; }

body.defilement-bloque { overflow: hidden; }

/* ------------------------------------------------------------------
   8. Hero, pose libre de carnet de croquis
   ------------------------------------------------------------------ */

.hero {
  padding-top: 138px;
  padding-bottom: 0;
}

.hero-pose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 34px;
  align-items: start;
}

.hero-fiche {
  margin-top: 40px;
  margin-right: -60px;
  padding: 26px 24px 24px;
}

.hero h1 { margin-bottom: 18px; }

.reassurance {
  margin-top: 30px;
  padding: 16px 20px 16px 22px;
  background-image: repeating-linear-gradient(180deg, var(--porcelaine) 0 3px, transparent 3px 7px);
  background-size: 1.5px 100%;
  background-position: left top;
  background-repeat: no-repeat;
  max-width: 54ch;
}

.reassurance .mention { margin: 0; }

.grille-horaire {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}

.grille-horaire caption {
  font-family: var(--police-etiquette);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--porcelaine);
  text-align: left;
  padding-bottom: 10px;
}

.grille-horaire th,
.grille-horaire td {
  text-align: left;
  padding: 9px 8px;
  font-size: 0.9375rem;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

.grille-horaire th {
  font-family: var(--police-etiquette);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--porcelaine);
}

.grille-horaire td:first-child { white-space: nowrap; }
.grille-horaire tr:last-child td { background-image: none; }

.legende-fiche {
  font-family: var(--police-etiquette);
  font-size: 0.8125rem;
  color: var(--doux);
  margin: 14px 0 0;
  line-height: 1.5;
}

.hero-bas {
  height: 6.5px;
  margin: 84px 0 0;
  background-image:
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px, 100% 1.5px;
  background-position: left top, left bottom;
  background-repeat: repeat-x;
}

/* ------------------------------------------------------------------
   9. Photographies
   ------------------------------------------------------------------ */

.cliche {
  margin: 0;
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  background-image: linear-gradient(135deg, transparent 0 var(--coupe), var(--surface) var(--coupe));
  box-shadow: 0 0 0 1px var(--fil) inset;
}

.cliche img {
  width: 100%;
  border-radius: var(--rayon);
  filter: saturate(0.94) brightness(1.03);
}

.cliche::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--nacre) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--nacre) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--nacre) 0 3px, transparent 3px 7px);
  background-size: calc(100% - 18px) 1.5px, 1.5px 100%, 1.5px calc(100% - 18px);
  background-position: 18px top, right top, left 18px;
  background-repeat: no-repeat;
}

.cliche figcaption {
  position: relative;
  z-index: 3;
  background-color: rgba(248, 244, 247, 0.94);
  font-family: var(--police-etiquette);
  font-size: 0.875rem;
  color: var(--doux);
  padding: 12px 18px 14px;
  line-height: 1.5;
}

.cliche-hero { margin-top: 46px; }
.cliche-detail { margin-top: 34px; }

/* ------------------------------------------------------------------
   10. Probleme : trois encadres de largeurs inegales
   ------------------------------------------------------------------ */

.pile-charges {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 34px;
}

.charge { padding: 24px 26px 26px; }
.charge:nth-child(1) { width: 100%; }
.charge:nth-child(2) { width: 92%; margin-left: 24px; }
.charge:nth-child(3) { width: 84%; margin-left: 48px; }

.charge h3 { margin-bottom: 8px; }
.charge p { color: var(--doux); margin-bottom: 0; }

.charge-cout {
  display: block;
  font-family: var(--police-etiquette);
  font-size: 0.95rem;
  color: var(--prune);
  margin-top: 12px;
}

/* ------------------------------------------------------------------
   11. Solution : quatre temps numerotes dans la marge
   ------------------------------------------------------------------ */

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

.temps {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.temps:last-child { background-image: none; }

.temps-marque { text-align: left; }
.temps-marque .picto { margin-top: 10px; }

.temps h3 { margin-bottom: 6px; }
.temps p { color: var(--doux); }

.temps-delai {
  font-family: var(--police-etiquette);
  font-size: 0.875rem;
  color: var(--porcelaine);
  display: block;
  margin-top: 10px;
}

/* ------------------------------------------------------------------
   12. Fonctionnalites : trois colonnes calees sur la couture
   ------------------------------------------------------------------ */

.atelier {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.outil {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
}

.outil .picto { margin-bottom: 16px; }
.outil p { color: var(--doux); font-size: 1rem; margin-bottom: 0; }

.outil-note {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--police-etiquette);
  font-size: 0.8125rem;
  color: var(--porcelaine);
}

/* ------------------------------------------------------------------
   13. Avantages : bande de chiffres cles
   ------------------------------------------------------------------ */

.bande-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 34px;
  padding-top: 30px;
  background-image:
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px, 100% 1.5px;
  background-position: left top, left 5px;
  background-repeat: repeat-x;
}

.gains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}

.gain { padding: 22px 24px 24px; }
.gain h3 { margin-bottom: 6px; }
.gain p { color: var(--doux); margin-bottom: 0; font-size: 1rem; }

.duo-terrain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 40px;
}

/* ------------------------------------------------------------------
   14. Preuve sociale
   ------------------------------------------------------------------ */

.temoignages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.temoin {
  margin: 0;
  padding: 24px 22px 24px;
  display: flex;
  flex-direction: column;
}

.temoin blockquote {
  margin: 0 0 16px;
  padding: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--encre);
}
.temoin blockquote p { margin-bottom: 0.9em; }
.temoin blockquote p:last-child { margin-bottom: 0; }

.temoin figcaption {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--police-etiquette);
  font-size: 0.875rem;
  color: var(--doux);
  line-height: 1.5;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left top;
  background-repeat: no-repeat;
}

.temoin figcaption b {
  display: block;
  font-family: var(--police-texte);
  font-weight: 800;
  color: var(--encre);
}

/* ------------------------------------------------------------------
   15. Tarifs
   ------------------------------------------------------------------ */

.formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}

.formule {
  padding: 28px 24px 28px;
  display: flex;
  flex-direction: column;
}

.formule-avancee { transform: translateY(-12px); }

.formule-drapeau {
  font-family: var(--police-etiquette);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prune);
  display: block;
  margin-bottom: 8px;
}

.formule h3 {
  font-family: var(--police-titre);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: 12px;
}

.formule-prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.formule-prix .chiffre-cle { font-size: 2.4rem; }

.formule-unite {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--encre);
}

.formule-cible {
  color: var(--doux);
  font-size: 0.9375rem;
  margin: 12px 0 18px;
}

.formule ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.formule li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 16px;
  height: 1.5px;
  background-image: repeating-linear-gradient(90deg, var(--prune) 0 3px, transparent 3px 7px);
}

.formule .bouton,
.formule .bouton-second { margin-top: auto; width: 100%; }

.note-tarifs {
  margin-top: 26px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--doux);
  max-width: 72ch;
}

/* ------------------------------------------------------------------
   16. FAQ
   ------------------------------------------------------------------ */

.questions { margin-top: 30px; }

.question {
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

.question-bouton {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 22px 44px 22px 0;
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--encre);
  cursor: pointer;
  position: relative;
}

.question-bouton:hover { color: var(--prune); }

.question-bouton::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--porcelaine);
  border-bottom: 2px solid var(--porcelaine);
  transform: rotate(45deg);
  transition: transform var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.question-bouton[aria-expanded="true"]::after {
  transform: rotate(225deg);
  border-color: var(--prune);
}

.reponse { padding: 0 44px 24px 0; }
.reponse[hidden] { display: none; }
.reponse p { color: var(--doux); }

/* ------------------------------------------------------------------
   17. Formulaire
   ------------------------------------------------------------------ */

.bloc-contact {
  margin-top: 32px;
  padding: 32px 30px 34px;
}

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

.champ { display: flex; flex-direction: column; }
.champ-large { grid-column: 1 / -1; }

.champ label,
.consentement span {
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 7px;
}

.champ input,
.champ select,
.champ textarea {
  font-family: var(--police-texte);
  font-size: 1rem;
  color: var(--encre);
  background-color: var(--nacre);
  border: 1px solid var(--fil);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
}

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

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 3px solid var(--prune);
  outline-offset: 2px;
  background-color: var(--surface);
}

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

.consentement {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.consentement input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 18px; }

.pied-formulaire {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

.pied-formulaire .mention { margin: 0; max-width: 42ch; }

/* ------------------------------------------------------------------
   18. Pied de page
   ------------------------------------------------------------------ */

.pied {
  background-color: var(--galet);
  padding: 0 24px 34px;
  margin-top: 0;
}

.pied-couture {
  max-width: 1240px;
  margin: 0 auto;
  height: 6.5px;
  background-image:
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px, 100% 1.5px;
  background-position: left top, left bottom;
  background-repeat: repeat-x;
  position: relative;
  top: 0;
}

.pied-corps {
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 0 34px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 34px;
}

.pied h2,
.pied h3 {
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 14px;
  max-width: none;
}

.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.9375rem;
}
.pied a:hover { color: var(--prune); text-decoration: underline; }

.pied-position {
  font-size: 0.9375rem;
  color: var(--doux);
  max-width: 34ch;
  margin: 14px 0 16px;
}

.pied-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.875rem;
}

.pied-editeur {
  font-size: 0.875rem;
  color: var(--doux);
  line-height: 1.65;
  margin-top: 14px;
}

.pied-barre {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 22px;
  font-size: 0.875rem;
  color: var(--doux);
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left top;
  background-repeat: no-repeat;
}

.pied-barre a { color: var(--prune); font-size: 0.875rem; }

/* ------------------------------------------------------------------
   19. Pages internes
   ------------------------------------------------------------------ */

.page-interne { padding-top: 132px; }

.fil-ariane {
  font-size: 0.875rem;
  color: var(--doux);
  margin-bottom: 18px;
}
.fil-ariane a { color: var(--porcelaine); }

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

.portrait-auteur {
  float: right;
  margin: 0 0 24px 28px;
  max-width: 260px;
}
.portrait-auteur img { border-radius: var(--rayon); }

.encadre-methode {
  padding: 26px 26px 28px;
  margin: 34px 0;
}
.encadre-methode ul { margin-bottom: 0; }

.liste-plan {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}
.liste-plan > li { margin-bottom: 20px; }
.liste-plan a { font-weight: 800; }
.liste-plan span { display: block; color: var(--doux); font-size: 0.9375rem; }

.mise-en-avant-merci { padding: 34px 30px 36px; margin-top: 24px; }

/* ------------------------------------------------------------------
   20. Apparition au defilement
   ------------------------------------------------------------------ */

.a-paraitre {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--courbe), transform 520ms var(--courbe);
}
.a-paraitre.est-vue { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   21. Adaptations
   ------------------------------------------------------------------ */

@media (max-width: 1120px) {
  .hero-pose { grid-template-columns: minmax(0, 1fr) 320px; }
  .hero-fiche { margin-right: -20px; }
  .pied-corps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .atelier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formules { grid-template-columns: 1fr; }
  .formule-avancee { transform: none; }
  .temoignages { grid-template-columns: 1fr; }
  .bande-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo-terrain { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --marge-libre: 28px; }

  html { scroll-padding-top: 84px; }

  .navigation-ancres { display: none; }
  .entete .bouton { display: none; }
  .ouvre-panneau { display: inline-flex; }

  .feuillet { padding: 62px 20px 66px; }
  .feuillet-corps { grid-template-columns: 1fr; }
  .feuillet-corps::before { left: 0; top: -62px; bottom: -66px; }
  .marge { padding-right: 0; padding-left: 18px; margin-bottom: 12px; }
  .colonne-texte { padding-left: 18px; }
  .annotation { max-width: 40ch; margin-top: 10px; }

  .hero { padding-top: 108px; }
  .hero-pose { grid-template-columns: 1fr; gap: 26px; }
  .hero-fiche { margin: 0; }
  .hero-bas { margin-top: 54px; }

  .charge:nth-child(1),
  .charge:nth-child(2),
  .charge:nth-child(3) { width: 100%; margin-left: 0; }

  .temps { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }

  .champs { grid-template-columns: 1fr; }
  .gains { grid-template-columns: 1fr; }

  .portrait-auteur { float: none; margin: 0 0 24px; max-width: 220px; }
}

@media (max-width: 700px) {
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.25rem; }
  .atelier { grid-template-columns: 1fr; }
  .bande-chiffres { grid-template-columns: 1fr; gap: 20px; }
  .chiffre-cle { font-size: 2rem; }
  .pied-corps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .picto { transition: stroke 0.001ms; }
  .cousu:hover .picto,
  .cousu:focus-within .picto,
  .picto-pivot:hover .picto,
  .temps.est-vue .picto { transform: none; }
  .a-paraitre { opacity: 1; transform: none; }
}

@media print {
  .entete, .panneau, .saut-contenu { display: none; }
  body { background: #FFFFFF; }
}
/* ==================================================================
   22. Magazine, La Grille de reprise
   Section ajoutee pour la partie editoriale du site. Aucune regle
   precedente n est modifiee: tout ce qui suit reprend les variables,
   la surpiqure pointillee, le coin coupe a 45 degres et le pivot des
   pictogrammes deja en place, pour que le magazine se lise comme une
   page de plus du carnet et non comme un module rapporte.
   Le corps des articles ne porte aucun attribut class: les balises
   nues y sont mises en forme comme descendantes de .corps-article.
   ================================================================== */

/* ------------------------------------------------------------------
   22.1 En tete editoriale, fil d Ariane et jalons
   ------------------------------------------------------------------ */

.page-magazine { padding-top: 132px; }

.entete-article { margin-bottom: 6px; }

.entete-article h1 { max-width: 17ch; margin-bottom: 20px; }

/* Angle, dates et temps de lecture, en etiquettes Copse separees
   par une dent de couture, comme les mentions d une fiche de plan. */
.jalons {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 0;
  margin: 0 0 20px;
  font-family: var(--police-etiquette);
  font-size: 0.875rem;
  color: var(--doux);
}

.jalons li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.jalons li + li::before {
  content: "";
  flex: 0 0 16px;
  height: 1.5px;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
}

.jalons time,
.jalons .duree { font-variant-numeric: tabular-nums; }

.jalons .angle {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--porcelaine);
}

/* Chapeau en exergue: une fiche blanche posee sur la page,
   avec la surpiqure ouverte de la forme signature. */
.chapeau-article {
  font-weight: 300;
  font-size: 1.175rem;
  line-height: 1.65;
  color: var(--encre);
  max-width: 62ch;
  margin: 0 0 34px;
  padding: 24px 26px 26px 28px;
}

.cliche-article { margin: 0 0 38px; max-width: 100%; }

/* ------------------------------------------------------------------
   22.2 Corps de l article, balises nues
   Mesure de lecture limitee a 68 caracteres, jamais justifiee.
   ------------------------------------------------------------------ */

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

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

.corps-article p {
  max-width: none;
  margin: 0 0 1.25em;
  color: var(--encre);
}

.corps-article h2 {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--encre);
  max-width: 26ch;
  margin: 52px 0 18px;
  padding-top: 24px;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left top;
  background-repeat: no-repeat;
}

.corps-article h3 {
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--encre);
  max-width: 40ch;
  margin: 34px 0 12px;
}

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

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

/* Listes a puces: la puce est une dent de couture prune,
   comme dans les cartes de formule. */
.corps-article ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.4em;
}

.corps-article ul > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.6em;
}

.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 16px;
  height: 1.5px;
  background-image: repeating-linear-gradient(90deg, var(--prune) 0 3px, transparent 3px 7px);
}

/* Listes numerotees: le chiffre est une etiquette Copse,
   comme les numeros des quatre temps de la page d accueil. */
.corps-article ol {
  list-style: none;
  counter-reset: point-article;
  padding-left: 0;
  margin: 0 0 1.4em;
}

.corps-article ol > li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 0.6em;
  counter-increment: point-article;
}

.corps-article ol > li::before {
  content: counter(point-article);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--police-etiquette);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--prune);
}

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

/* Tableau recapitulatif: une fiche blanche cousue, chiffres tabulaires. */
.corps-article table {
  width: 100%;
  margin: 6px 0 1.8em;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--rayon);
  background-color: transparent;
  background-image: linear-gradient(135deg, transparent 0 var(--coupe), var(--surface) var(--coupe));
  box-shadow: 0 0 0 1px var(--fil) inset;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.corps-article th,
.corps-article td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

.corps-article thead th {
  font-family: var(--police-etiquette);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--porcelaine);
  padding-top: 16px;
}

.corps-article thead th:first-child { padding-left: 26px; }
.corps-article tbody th { font-weight: 800; color: var(--encre); }
.corps-article tbody tr:last-child th,
.corps-article tbody tr:last-child td { background-image: none; }

/* Encadre recapitulatif: aplat gris galet, coin coupe et surpiqure ouverte. */
.corps-article aside {
  position: relative;
  margin: 30px 0 1.8em;
  padding: 24px 26px 26px;
  border-radius: var(--rayon);
  background-color: transparent;
  background-image: linear-gradient(135deg, transparent 0 var(--coupe), var(--galet) var(--coupe));
}

.corps-article aside::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--fil) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(180deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size:
    calc(100% - 18px) 1.5px,
    100% 1.5px,
    1.5px 100%,
    1.5px calc(100% - 18px);
  background-position:
    18px top,
    left bottom,
    right top,
    left 18px;
  background-repeat: no-repeat;
}

.corps-article aside > *:last-child { margin-bottom: 0; }
.corps-article aside p { font-size: 1rem; }

/* Citation: couture verticale prune, comme la marge annotee du carnet. */
.corps-article blockquote {
  margin: 30px 0 1.8em;
  padding: 6px 0 6px 26px;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--encre);
  background-image: repeating-linear-gradient(180deg, var(--prune) 0 3px, transparent 3px 7px);
  background-size: 1.5px 100%;
  background-position: left top;
  background-repeat: no-repeat;
}

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

.corps-article figure {
  margin: 30px 0 1.8em;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--fil) inset;
}

.corps-article figcaption {
  font-family: var(--police-etiquette);
  font-size: 0.875rem;
  color: var(--doux);
  line-height: 1.5;
  padding: 12px 18px 14px;
  background-color: rgba(248, 244, 247, 0.94);
}

/* ------------------------------------------------------------------
   22.3 Appel a l action de fin d article et encart auteur
   ------------------------------------------------------------------ */

.appel-article {
  margin-top: 46px;
  padding: 28px 28px 30px;
  max-width: 68ch;
}

.appel-article-titre {
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.appel-article p { color: var(--doux); }
.appel-article .rangee-boutons { margin-top: 22px; }

.encart-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  margin-top: 34px;
  padding: 26px 26px 28px;
  max-width: 68ch;
}

.encart-auteur img {
  width: 96px;
  height: 96px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--fil);
}

.encart-auteur-role {
  font-family: var(--police-etiquette);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--porcelaine);
  margin-bottom: 6px;
}

.encart-auteur-nom {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

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

/* ------------------------------------------------------------------
   22.4 Grille de cartes et carte d article
   ------------------------------------------------------------------ */

.titre-bloc {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--encre);
  max-width: 20ch;
  margin: 0 0 0.6em;
}

.cartes-articles {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

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

.carte-article {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 16px 18px 20px;
}

.carte-cliche {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--fil);
  margin-bottom: 16px;
}

.carte-cliche img {
  width: 100%;
  filter: saturate(0.94) brightness(1.03);
  transition: filter var(--duree) var(--courbe);
}

.carte-article:hover .carte-cliche img { filter: saturate(1) brightness(1.05); }

.carte-angle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-etiquette);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--porcelaine);
  margin: 0 0 10px;
  max-width: none;
}

.carte-angle::before {
  content: "";
  flex: 0 0 18px;
  height: 1.5px;
  background-image: repeating-linear-gradient(90deg, var(--porcelaine) 0 3px, transparent 3px 7px);
}

.carte-titre {
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
  max-width: none;
  margin: 0 0 10px;
}

.carte-titre a {
  color: var(--encre);
  text-decoration: none;
}
.carte-titre a:hover { color: var(--prune); }

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

.carte-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: auto 0 0;
  padding-top: 14px;
  font-family: var(--police-etiquette);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--doux);
  max-width: none;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left top;
  background-repeat: no-repeat;
}

.carte-pied .picto-petit { margin-left: auto; }

/* Pictogramme de fleche reduit, qui pivote comme les autres au survol. */
.picto-petit {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

/* Carte de une: pleine largeur, image a gauche, texte a droite. */
.carte-une { grid-column: 1 / -1; }

.carte-une .carte-article {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 26px;
  padding: 18px 22px 22px;
}

.carte-une .carte-cliche { margin-bottom: 0; }

.carte-une .carte-corps {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.carte-une .carte-titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-transform: uppercase;
  max-width: 24ch;
}

.carte-une .carte-extrait { font-size: 1rem; max-width: 58ch; }

/* ------------------------------------------------------------------
   22.5 Bloc A lire aussi et rappel du magazine en page d accueil
   ------------------------------------------------------------------ */

.lire-aussi .cartes-articles { margin-top: 28px; }

.carte-breve .carte-cliche { margin-bottom: 14px; }
.carte-breve .carte-titre { font-size: 1rem; }
.carte-breve .carte-extrait { margin-bottom: 0; }

.rappel-magazine .cartes-articles { margin-top: 32px; }
.rappel-magazine .rangee-boutons { margin-top: 30px; }

.note-magazine {
  margin-top: 22px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--doux);
  max-width: 72ch;
}

/* Titres de colonne du pied de page des pages du magazine:
   memes valeurs que .pied h2, sur un paragraphe, parce que le gabarit
   d article ne porte aucun intertitre en dehors du corps redactionnel. */
.pied-titre {
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--encre);
  margin: 0 0 14px;
  max-width: none;
}

/* Liste des articles de la page auteur et du plan du site. */
.liste-articles {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

.liste-articles > li {
  margin-bottom: 18px;
  padding-bottom: 18px;
  background-image: repeating-linear-gradient(90deg, var(--fil) 0 3px, transparent 3px 7px);
  background-size: 100% 1.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

.liste-articles > li:last-child { background-image: none; padding-bottom: 0; margin-bottom: 0; }
.liste-articles a { font-weight: 800; }

.liste-articles span {
  display: block;
  font-family: var(--police-etiquette);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--doux);
  margin-top: 4px;
}

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

@media (max-width: 1120px) {
  .cartes-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .page-magazine { padding-top: 104px; }
  .carte-une .carte-article { grid-template-columns: 1fr; gap: 18px; }
  .carte-une .carte-titre { max-width: none; }
  .corps-article h2 { margin-top: 40px; }
}

@media (max-width: 700px) {
  .cartes-articles { grid-template-columns: 1fr; }
  .entete-article h1 { max-width: none; }
  .chapeau-article { font-size: 1.0625rem; padding: 20px 20px 22px 22px; }
  .corps-article h2 { font-size: 1.25rem; max-width: none; }
  .encart-auteur { grid-template-columns: 1fr; gap: 18px; }
  .corps-article table { display: block; overflow-x: auto; }
}

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