/* Robelise, feuille unique.
   Vocabulaire de classes emprunte a l atelier couture:
   bati (en tete), planche (grille), coupe (hero), epingle (probleme),
   jalon (etapes), casier (fonctionnalites), gain (avantages), souche (temoignages),
   tarif (formules), reserve (faq), carnet (formulaire), ourlet (pied de page).
   Motifs communs: cadre (bloc cerne), perfo (perforation de souche), filet (separateur balaye). */

/* ------------------------------------------------------------------ 1. Socle */

:root {
  --fond: #FAF5EC;
  --fond-alt: #F2E9D8;
  --surface: #FFFCF6;
  --texte: #241A2C;
  --texte-doux: #5C4C63;
  --accent: #672585;
  --accent-texte: #FBF6EE;
  --champagne: #B98E45;
  /* Bronze assombri: le champagne pur ne tient pas le contraste sous un texte creme,
     il sert donc aux filets et aux chiffres, jamais de fond sous du texte clair. */
  --bronze: #6E4E1C;
  --bordure: #3A2C46;

  --trait: 3px;
  --cran: 20px;
  --colonne: 1180px;

  --titre: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --corps: "Literata", Georgia, "Times New Roman", serif;
  --craie: "Pacifico", "Segoe Script", cursive;
}

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

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

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

h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 400; }

h1, h2 {
  font-family: var(--titre);
  letter-spacing: .04em;
  line-height: .94;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.4rem, 6.4vw, 3.4rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 2.4rem); }

h3 {
  font-family: var(--corps);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

h4 { font-family: var(--corps); font-size: 1.0625rem; font-weight: 600; }

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

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--bordure); }

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

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

strong { font-weight: 600; }

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 12px 20px;
  font-family: var(--titre);
  letter-spacing: .08em;
}
.evitement:focus { left: 0; }

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

/* ------------------------------------------------- 2. Grille et blocs cernes */

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

.planche--large { max-width: 1320px; }

.douze {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}

/* Le cadre est double: une couche couleur bordure de 3 pixels, une couche interieure
   claire, toutes deux entaillees du meme cran de patronage a 14 degres. */
.cadre {
  background: var(--bordure);
  padding: var(--trait);
  clip-path: polygon(0 0, calc(100% - var(--cran)) 0, 100% var(--cran), 100% 100%, 0 100%);
}

.cadre__int {
  position: relative;
  background: var(--surface);
  padding: 30px 28px;
  height: 100%;
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
}

/* Filet interieur decale de 6 pixels, comme un cran repasse au crayon. */
.cadre__int::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(185, 142, 69, .38);
  pointer-events: none;
}

.cadre--champagne > .cadre__int { background: var(--fond-alt); }
.cadre--creme > .cadre__int { background: var(--fond); }

/* ------------------------------------------------------- 3. Motif signature */

/* Perforation en pointilles de billet detachable. */
.perfo {
  position: relative;
  height: 15px;
  background-image:
    repeating-linear-gradient(90deg, var(--bordure) 0 6px, transparent 6px 21px),
    radial-gradient(circle at 13.5px 50%, var(--fond) 0 3.5px, transparent 3.6px);
  background-size: 21px 1px, 21px 15px;
  background-position: 0 50%, 0 0;
  background-repeat: repeat-x, repeat-x;
}

.perfo::before, .perfo::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px; height: 15px;
  margin-top: -7.5px;
  background: var(--fond);
  border-radius: 50%;
}
.perfo::before { left: -7.5px; }
.perfo::after { right: -7.5px; }

.perfo--surface { background-image:
    repeating-linear-gradient(90deg, var(--bordure) 0 6px, transparent 6px 21px),
    radial-gradient(circle at 13.5px 50%, var(--surface) 0 3.5px, transparent 3.6px); }
.perfo--surface::before, .perfo--surface::after { background: var(--surface); }

.perfo--champagne { background-image:
    repeating-linear-gradient(90deg, var(--bordure) 0 6px, transparent 6px 21px),
    radial-gradient(circle at 13.5px 50%, var(--fond-alt) 0 3.5px, transparent 3.6px); }
.perfo--champagne::before, .perfo--champagne::after { background: var(--fond-alt); }

.perfo--prune { background-image:
    repeating-linear-gradient(90deg, var(--accent-texte) 0 6px, transparent 6px 21px),
    radial-gradient(circle at 13.5px 50%, var(--accent) 0 3.5px, transparent 3.6px); }
.perfo--prune::before, .perfo--prune::after { background: var(--accent); }

/* -------------------------------------- 4. Separateurs et balayage de couleur */

.filet {
  position: relative;
  height: var(--trait);
  background: var(--bordure);
  overflow: hidden;
}

.filet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 45%, var(--champagne) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}

.filet.est-vu::after { transform: scaleX(1); }

.filet--epais { height: 6px; }

/* ---------------------------------------------------------- 5. Surtitres */

.craie {
  font-family: var(--craie);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--bronze);
  margin: 0 0 .35em;
  display: block;
  text-transform: none;
  letter-spacing: 0;
}

.craie--claire { color: var(--champagne); }

.etiquette {
  display: inline-block;
  font-family: var(--titre);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--fond-alt);
  color: var(--bordure);
  border: 2px solid var(--bordure);
  padding: 3px 12px 1px;
}

.etiquette--prune { background: var(--accent); color: var(--accent-texte); border-color: var(--bordure); }

/* ------------------------------------------------------------- 6. Boutons */

.tampon, .bati__cta {
  display: inline-block;
  background: var(--bordure);
  padding: var(--trait);
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.tampon > span {
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  min-height: 46px;
  padding: 0 24px;
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--titre);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}

.tampon > span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bronze);
  transform: translateY(100%);
  transition: transform .2s ease-out;
}

.tampon:hover > span::before, .tampon:focus-visible > span::before { transform: translateY(0); }

.tampon--craie > span { background: var(--bronze); }
.tampon--craie > span::before { background: var(--accent); }

.tampon-clair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  background: transparent;
  color: var(--accent);
  border: var(--trait) solid var(--bordure);
  font-family: var(--titre);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: background-color .2s ease-out;
}

.tampon-clair:hover, .tampon-clair:focus-visible { background: var(--fond-alt); color: var(--accent); }

.duo-boutons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

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

.bati {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--fond);
}

.bati__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}

.bati__socle { position: relative; }
.bati__socle .filet { height: var(--trait); }
.bati__socle .filet::after { transition: none; }

/* La perforation de l en tete se pigmente en prune sur la largeur deja parcourue. */
.bati__jauge {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--champagne));
  transition: width .24s linear;
}

.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte); }
.marque__signe { flex: none; }
.marque__mot {
  font-family: var(--titre);
  font-size: 1.75rem;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
}

.bati__ancres { display: flex; align-items: center; gap: 28px; }

.bati__ancres a {
  position: relative;
  color: var(--texte);
  font-size: .9375rem;
  text-decoration: none;
  padding: 4px 0;
}

.bati__ancres a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .24s ease-out;
}

.bati__ancres a:hover::after, .bati__ancres a:focus-visible::after { transform: scaleX(1); }

.bati__ouvre {
  display: none;
  width: 52px; height: 46px;
  background: var(--surface);
  border: var(--trait) solid var(--bordure);
  cursor: pointer;
  padding: 0;
}

.bati__ouvre span {
  display: block;
  width: 26px; height: 3px;
  margin: 4px auto;
  background: var(--bordure);
}

.bati__panneau { display: none; }

/* ------------------------------------------------------------- 8. Hero */

.coupe { padding: 54px 0 0; }

.coupe__cadre {
  background: var(--bordure);
  padding: var(--trait);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

.coupe__int {
  display: grid;
  grid-template-columns: 7fr 5fr;
  background: var(--bordure);
  gap: var(--trait);
  clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 31px, 100% 100%, 0 100%);
}

.coupe__texte { background: var(--surface); padding: 46px 40px 40px; }
.coupe__visuel { background: var(--fond-alt); padding: 22px; display: flex; flex-direction: column; justify-content: center; }

.coupe__texte h1 { margin-bottom: .35em; }
.coupe__accent { font-family: var(--craie); text-transform: none; letter-spacing: 0; color: var(--accent); font-size: .78em; }

.coupe__chapo { font-size: 1.125rem; color: var(--texte-doux); }

.coupe__rassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 30px;
  border: var(--trait) solid var(--bordure);
  background: var(--bordure);
}

.coupe__rassurance div {
  flex: 1 1 150px;
  background: var(--fond);
  padding: 14px 16px;
  margin: 0;
}

.coupe__rassurance b {
  display: block;
  font-family: var(--titre);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--accent);
}

.coupe__rassurance span { font-size: .875rem; color: var(--texte-doux); }

/* Cadre photo plein prune, liserе interieur creme, perforation au pied. */
.chassis { background: var(--accent); padding: 6px; }
.chassis__lisere { background: var(--accent-texte); padding: 3px; }
.chassis img { filter: saturate(.88) sepia(.06) brightness(1.02); }
.chassis__legende {
  font-size: .8125rem;
  color: var(--texte-doux);
  padding: 10px 2px 0;
  margin: 0;
  max-width: none;
}

/* -------------------------------------------------- 9. Rythme des sections */

.zone { padding: 76px 0; }
.zone--serree { padding: 56px 0; }
.zone--champagne { background: var(--fond-alt); }
.zone--creme { background: var(--fond); }

.titre-zone { margin-bottom: 34px; max-width: 780px; }
.titre-zone p { color: var(--texte-doux); }

/* Debordement: le titre de section sort de la colonne par la gauche. */
.titre-zone--debord {
  position: relative;
  margin-left: -46px;
  background: var(--surface);
  border-left: 6px solid var(--accent);
  padding: 20px 26px 6px;
}

/* ---------------------------------------------------- 10. Probleme, epingles */

.epingle-suite {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--bordure);
  border: var(--trait) solid var(--bordure);
  row-gap: var(--trait);
  column-gap: var(--trait);
}

.epingle {
  background: var(--surface);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}

.epingle__cout {
  font-family: var(--titre);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}

.epingle h3 { margin-bottom: .5em; }
.epingle p { margin-bottom: 0; color: var(--texte-doux); }

.constat {
  margin-top: 34px;
  background: var(--accent);
  color: var(--accent-texte);
  border: var(--trait) solid var(--bordure);
  padding: 26px 30px;
}
.constat p { color: var(--accent-texte); margin-bottom: 0; max-width: 78ch; }
.constat strong { color: #F4DCA6; }

/* ------------------------------------------------------- 11. Solution, jalons */

.jalonnier { border: var(--trait) solid var(--bordure); background: var(--bordure); }

.jalon {
  display: grid;
  grid-template-columns: 118px 1fr 220px;
  background: var(--surface);
  margin-bottom: var(--trait);
}
.jalon:last-child { margin-bottom: 0; }

.jalon__numero {
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--titre);
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jalon__corps { padding: 26px 30px; }
.jalon__corps p { margin-bottom: 0; color: var(--texte-doux); }

.jalon__delai {
  border-left: var(--trait) solid var(--bordure);
  background: var(--fond-alt);
  padding: 22px 20px;
  font-size: .875rem;
  color: var(--texte-doux);
}

.jalon__delai b {
  display: block;
  font-family: var(--titre);
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--bordure);
  margin-bottom: 4px;
}

.jauge-jalon {
  height: 8px;
  background: var(--fond);
  border: 2px solid var(--bordure);
  margin-top: 10px;
  overflow: hidden;
}

.jauge-jalon i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--champagne));
  transition: width .9s ease-out;
}

.jalon.est-vu .jauge-jalon i { width: var(--part, 50%); }

/* ------------------------------------------- 12. Fonctionnalites, casiers */

.casier-suite {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--trait);
  background: var(--bordure);
  border: var(--trait) solid var(--bordure);
}

.casier { background: var(--surface); padding: 28px 26px; }
.casier:nth-child(even) { background: var(--fond); }
.casier p { margin-bottom: 0; color: var(--texte-doux); font-size: 1rem; }

.casier__rang {
  font-family: var(--titre);
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--bronze);
  display: block;
  margin-bottom: 10px;
}

/* --------------------------------------------------- 13. Avantages, gains */

.gain-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

.gain-liste { list-style: none; padding: 0; margin: 0; }

.gain-liste li {
  position: relative;
  padding: 18px 0 18px 46px;
  border-bottom: 2px solid rgba(58, 44, 70, .22);
  margin: 0;
}
.gain-liste li:last-child { border-bottom: 0; }

/* Puce en cran de patronage. */
.gain-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 24px;
  width: 22px; height: 22px;
  background: var(--accent);
  clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%);
}

.gain-liste b { display: block; font-family: var(--titre); font-size: 1.25rem; letter-spacing: .05em; }
.gain-liste span { color: var(--texte-doux); font-size: 1rem; }

/* ------------------------------------------------ 14. Preuve, souches */

.chiffrier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--trait);
  background: var(--bordure);
  border: var(--trait) solid var(--bordure);
  margin-bottom: 40px;
}

.chiffrier div { background: var(--surface); padding: 22px 20px; text-align: left; }

.chiffrier b {
  display: block;
  font-family: var(--titre);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--accent);
}

.chiffrier span { font-size: .875rem; color: var(--texte-doux); }

.souche-suite { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.souche { display: flex; flex-direction: column; }
.souche blockquote { margin: 0 0 14px; font-size: 1rem; }
.souche blockquote p:last-child { margin-bottom: 0; }

.souche__signature { font-family: var(--craie); font-size: 1.1rem; color: var(--accent); margin: 0 0 2px; }
.souche figcaption { font-size: .875rem; color: var(--texte-doux); }

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

.tarif-suite {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 0;
  padding-top: 24px;
}

.tarif { background: var(--bordure); padding: var(--trait); clip-path: polygon(0 0, calc(100% - var(--cran)) 0, 100% var(--cran), 100% 100%, 0 100%); }
.tarif + .tarif { margin-left: calc(var(--trait) * -1); }

.tarif__int { background: var(--surface); padding: 30px 26px 26px; display: flex; flex-direction: column; height: 100%; clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%); }

.tarif--phare { padding: 6px; margin-top: -24px; position: relative; z-index: 2; }
.tarif--phare .tarif__int { background: var(--fond); padding-bottom: 30px; }

.tarif__souche {
  position: absolute;
  top: 14px; right: -1px;
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--titre);
  font-size: .8rem;
  letter-spacing: .12em;
  padding: 4px 12px 2px;
}

.tarif__nom { font-family: var(--titre); font-size: 1.8rem; letter-spacing: .04em; margin: 0 0 4px; text-transform: uppercase; }
.tarif__cible { font-size: .9375rem; color: var(--texte-doux); min-height: 5.5em; }

.tarif__prix { font-family: var(--titre); font-size: 3.4rem; line-height: 1; letter-spacing: .02em; color: var(--accent); }
.tarif__unite { font-size: .875rem; color: var(--texte-doux); display: block; margin-bottom: 16px; }

.tarif__inclus { list-style: none; padding: 0; margin: 0 0 20px; font-size: .9375rem; flex: 1; }
.tarif__inclus li { position: relative; padding-left: 24px; margin-bottom: .6em; }
.tarif__inclus li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 13px; height: 13px;
  background: var(--bronze);
  clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 0 100%);
}

.tarif .perfo { margin: 0 -26px 20px; }
.tarif__pied .tampon, .tarif__pied .tampon-clair { width: 100%; }
.tarif__pied .tampon > span { width: 100%; }

.tarif-note { margin-top: 26px; font-size: .9375rem; color: var(--texte-doux); }

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

.reserve-suite { border-top: var(--trait) solid var(--bordure); }

.reserve { border-bottom: var(--trait) solid var(--bordure); }

.reserve summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 54px 22px 0;
  position: relative;
  font-family: var(--corps);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

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

.reserve summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 30px;
  width: 18px; height: 18px;
  background: var(--accent);
  clip-path: polygon(0 40%, 40% 40%, 40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%);
  transition: transform .24s ease-out;
}

.reserve[open] summary::after { transform: rotate(45deg); }

.reserve__reponse { padding: 0 40px 24px 0; color: var(--texte-doux); }
.reserve__reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------- 17. Formulaire, carnet */

.carnet { background: var(--bordure); padding: var(--trait); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.carnet__int { background: var(--surface); padding: 38px 34px; clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 27px, 100% 100%, 0 100%); }

.carnet-duo { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }

.champ { margin-bottom: 18px; }
.champ label { display: block; font-family: var(--titre); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }

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

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

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

.champ--case { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; }
.champ--case input { width: 20px; height: 20px; margin-top: 4px; flex: none; accent-color: var(--accent); }
.champ--case label { font-family: var(--corps); font-size: .9375rem; letter-spacing: 0; text-transform: none; font-weight: 400; }

.carnet__note { font-size: .875rem; color: var(--texte-doux); margin-top: 16px; }

.aparte { background: var(--fond-alt); border: var(--trait) solid var(--bordure); padding: 26px 24px; }
.aparte h3 { margin-bottom: .4em; }
.aparte ul { padding-left: 18px; font-size: .9375rem; color: var(--texte-doux); }

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

.ourlet { background: var(--fond-alt); color: var(--texte); padding: 0 0 0; }
.ourlet__grille { display: grid; grid-template-columns: 2.1fr 1fr 1fr 1.4fr; gap: 34px; padding: 52px 0 40px; }
.ourlet h2 { font-size: 1.15rem; font-family: var(--titre); letter-spacing: .1em; margin-bottom: .8em; }
.ourlet ul { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.ourlet li { margin-bottom: .5em; }
.ourlet a { color: var(--texte); text-decoration: none; border-bottom: 1px solid rgba(103, 37, 133, .35); }
.ourlet a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ourlet p { font-size: .9375rem; color: var(--texte-doux); }

.ourlet__social { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: .875rem; margin-top: 14px; }

.ourlet__reseau { padding: 0 0 34px; font-size: .875rem; color: var(--texte-doux); }
.ourlet__reseau a { margin-right: 14px; }

.ourlet__bas { border-top: var(--trait) solid var(--bordure); padding: 20px 0 30px; font-size: .8125rem; color: var(--texte-doux); }
.ourlet__bas p { margin: 0 0 .3em; font-size: .8125rem; max-width: none; }

/* ------------------------------------------------- 19. Pages interieures */

.papier { padding: 54px 0 76px; }
.papier__cadre { background: var(--bordure); padding: var(--trait); }
.papier__int { background: var(--surface); padding: 46px 46px 40px; }
.papier h2 { margin-top: 1.6em; }
.papier h2:first-of-type { margin-top: .8em; }
.papier h3 { margin-top: 1.4em; }
.papier p, .papier li { max-width: 74ch; }
.papier dl { margin: 0 0 1.2em; }
.papier dt { font-weight: 600; margin-top: .7em; }
.papier dd { margin: 0 0 .2em; color: var(--texte-doux); }

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

.portrait { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; margin-bottom: 30px; }
.portrait img { border: var(--trait) solid var(--bordure); }

.mini-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--trait); background: var(--bordure); border: var(--trait) solid var(--bordure); margin: 24px 0 8px; }
.mini-menu div { background: var(--fond); padding: 20px 22px; }
.mini-menu h3 { margin: 0 0 .3em; font-size: 1.1rem; }
.mini-menu p { margin: 0; font-size: .9375rem; color: var(--texte-doux); }

.centre-page { text-align: center; padding: 90px 0; }
.centre-page h1 { margin-bottom: .3em; }
.centre-page p { margin-left: auto; margin-right: auto; }
.centre-page .duo-boutons { justify-content: center; }

/* -------------------------------------------------------- 20. Adaptations */

@media (max-width: 1080px) {
  .chiffrier { grid-template-columns: repeat(2, 1fr); }
  .casier-suite { grid-template-columns: repeat(2, 1fr); }
  .jalon { grid-template-columns: 96px 1fr; }
  .jalon__delai { grid-column: 1 / -1; border-left: 0; border-top: var(--trait) solid var(--bordure); }
}

@media (max-width: 980px) {
  .coupe__int { grid-template-columns: 1fr; }
  .coupe__texte { padding: 34px 26px 30px; }
  .epingle-suite { grid-template-columns: 1fr; }
  .souche-suite { grid-template-columns: 1fr; }
  .gain-duo { grid-template-columns: 1fr; gap: 22px; }
  .carnet-duo { grid-template-columns: 1fr; gap: 28px; }
  .tarif-suite { grid-template-columns: 1fr; padding-top: 0; }
  .tarif + .tarif { margin-left: 0; margin-top: calc(var(--trait) * -1); }
  .tarif--phare { margin-top: 0; }
  .ourlet__grille { grid-template-columns: 1fr 1fr; }
  .portrait { grid-template-columns: 1fr; }
  .titre-zone--debord { margin-left: 0; }
  .papier__int { padding: 30px 24px 26px; }
}

@media (max-width: 900px) {
  .bati__ancres, .bati__barre > .tampon { display: none; }
  .bati__ouvre { display: block; }

  .bati__panneau[data-ouvert="oui"] {
    display: block;
    position: fixed;
    inset: 72px 0 0;
    z-index: 55;
    background: var(--fond);
    border-top: var(--trait) solid var(--bordure);
    overflow-y: auto;
    padding: 0 0 40px;
  }

  .bati__panneau a {
    display: block;
    padding: 18px 24px;
    font-family: var(--titre);
    font-size: 1.5rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte);
    text-decoration: none;
    border-bottom: var(--trait) solid var(--bordure);
  }

  .bati__panneau a:last-child { color: var(--accent-texte); background: var(--accent); }
}

@media (max-width: 700px) {
  body { font-size: 1rem; }
  .zone { padding: 52px 0; }
  .casier-suite { grid-template-columns: 1fr; }
  .chiffrier { grid-template-columns: 1fr; }
  .mini-menu { grid-template-columns: 1fr; }
  .champ--duo { grid-template-columns: 1fr; }
  .ourlet__grille { grid-template-columns: 1fr; gap: 26px; padding: 40px 0 30px; }
  .carnet__int { padding: 26px 20px; }
  .coupe__rassurance div { flex: 1 1 100%; }
  .jalon { grid-template-columns: 1fr; }
  .jalon__numero { justify-content: flex-start; padding: 8px 20px; font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .filet::after { transform: scaleX(1); transition: none; }
  .jauge-jalon i { width: var(--part, 50%); transition: none; }
  .bati__jauge { transition: none; }
  .tampon > span::before, .bati__ancres a::after, .reserve summary::after, .tampon-clair { transition: none; }
}

@media print {
  .bati, .ourlet__reseau { display: none; }
  body { background: #FFFFFF; }
}
/* ==================================================================================
   21. Magazine, Le Cahier des essayages

   Section ajoutee apres la mise en ligne du site: aucune regle ci dessus n est modifiee.
   Le vocabulaire de classes reste celui de l atelier: cahier (le magazine),
   fiche (carte d article), tete (entete d article), corps (texte redactionnel nu),
   souche (encart auteur), liasse (bloc A lire aussi), sommaire (liste datee).
   Les cadres cernes de 3 pixels, l encoche de patronage a 14 degres, la perforation
   en pointilles de billet detachable et le balayage de couleur des separateurs sont
   exactement ceux du reste du site: le magazine se lit comme une piece du dossier robe,
   pas comme un module rapporte.

   Regle structurante: le corps des articles est du HTML nu, sans aucun attribut class.
   Toutes les balises h2, h3, p, ul, ol, li, table, thead, tbody, tr, th, td,
   blockquote, aside, figure, figcaption, strong, em et a sont donc mises en forme
   ici en tant que descendantes de .cahier-corps. */

/* ------------------------------------------------ 21.1 Bandeau de tete du magazine */

.cahier-page { padding: 40px 0 76px; }

.cahier-une {
  background: var(--bordure);
  padding: var(--trait);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  margin-bottom: 34px;
}

.cahier-une__int {
  position: relative;
  background: var(--surface);
  padding: 42px 40px 34px;
  clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 31px, 100% 100%, 0 100%);
}

.cahier-une__int::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(185, 142, 69, .38);
  pointer-events: none;
}

.cahier-une h1 { margin-bottom: .3em; }
.cahier-une__chapo { font-size: 1.125rem; color: var(--texte-doux); max-width: 76ch; }

.cahier-une__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 28px;
  border: var(--trait) solid var(--bordure);
  background: var(--bordure);
}

.cahier-une__reperes div { flex: 1 1 170px; background: var(--fond); padding: 14px 16px; }

.cahier-une__reperes b {
  display: block;
  font-family: var(--titre);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--accent);
}

.cahier-une__reperes span { font-size: .875rem; color: var(--texte-doux); }

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

.cahier-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cahier-grille > li { margin: 0; }

.fiche {
  display: block;
  height: 100%;
  background: var(--bordure);
  padding: var(--trait);
  clip-path: polygon(0 0, calc(100% - var(--cran)) 0, 100% var(--cran), 100% 100%, 0 100%);
}

.fiche__int {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
}

/* Cadre photo plein prune, liseré crème intérieur, perforation au pied de l image:
   le traitement photographique du site, ramene a l echelle d une carte. */
.fiche__vue { display: block; background: var(--accent); padding: 5px; }

.fiche__vue img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--accent-texte);
  filter: saturate(.88) sepia(.06) brightness(1.02);
}

.fiche .perfo { flex: none; }

.fiche__corps {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px;
}

/* Balayage de couleur, signature d animation du site, joue ici sur le filet
   qui separe l image du texte quand la carte est survolee ou prend le focus. */
.fiche__corps::before,
.fiche__corps::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--trait);
}

.fiche__corps::before { background: var(--bordure); }

.fiche__corps::after {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 45%, var(--champagne) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .24s ease-out;
}

.fiche:hover .fiche__corps::after,
.fiche:focus-within .fiche__corps::after { transform: scaleX(1); }

.fiche__angle { margin-bottom: 12px; align-self: flex-start; }

.fiche__titre {
  font-family: var(--corps);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 .5em;
  max-width: none;
}

.fiche__titre a { color: var(--texte); text-decoration: none; }
.fiche__titre a:hover, .fiche__titre a:focus-visible { color: var(--accent); text-decoration: underline; }

.fiche__extrait {
  font-size: .9375rem;
  color: var(--texte-doux);
  margin: 0 0 16px;
  max-width: none;
  flex: 1;
}

.fiche__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  margin: 0;
  padding-top: 12px;
  border-top: 2px solid rgba(58, 44, 70, .22);
  font-size: .8125rem;
  color: var(--texte-doux);
  max-width: none;
}

.fiche__pied b {
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--accent);
}

/* ------------------------------------------------- 21.3 Section Derniers articles */

.cahier-derniers .titre-zone { margin-bottom: 30px; }

.cahier-derniers__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  margin-top: 30px;
}

.cahier-derniers__pied p {
  margin: 0;
  font-size: .9375rem;
  color: var(--texte-doux);
  max-width: 58ch;
}

/* ---------------------------------------- 21.4 Entete d article, fil d Ariane et jalons */

.cahier-tete {
  background: var(--bordure);
  padding: var(--trait);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  margin-bottom: 30px;
}

.cahier-tete__int {
  background: var(--surface);
  padding: 36px 40px 30px;
  clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 31px, 100% 100%, 0 100%);
}

.cahier-tete h1 { margin-bottom: .35em; }
.cahier-tete .fil { margin-bottom: 16px; }
.cahier-tete .etiquette { margin-bottom: 16px; }

/* Chapeau en exergue: filet prune epais a gauche, fond champagne, comme une note
   de modeliste agrafee en tete de dossier. */
.cahier-exergue {
  background: var(--fond-alt);
  border-left: 6px solid var(--accent);
  padding: 18px 24px;
  margin: 0 0 6px;
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--texte);
  max-width: 78ch;
}

.cahier-jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  align-items: baseline;
  margin: 24px 0 0;
  padding: 12px 0 0;
  border-top: var(--trait) solid var(--bordure);
  font-size: .875rem;
  color: var(--texte-doux);
  max-width: none;
}

.cahier-jalons b {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--accent);
}

.cahier-jalons a { color: var(--accent); }

/* Image a la une, meme chassis prune que les photographies du site. */
.cahier-vue { margin: 0; background: var(--accent); padding: 6px; }
.cahier-vue img { display: block; width: 100%; height: auto; border: 3px solid var(--accent-texte); filter: saturate(.88) sepia(.06) brightness(1.02); }

.cahier-legende {
  font-size: .8125rem;
  color: var(--texte-doux);
  margin: 10px 0 30px;
  max-width: none;
}

/* --------------------------------------- 21.5 Corps redactionnel, balises nues */

/* Le corps est pose dans un cadre plein de 3 pixels entaille du cran de patronage,
   comme les pages interieures du site: le magazine ne flotte pas sur le fond creme. */
.cahier-feuille {
  background: var(--bordure);
  padding: var(--trait);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

.cahier-feuille__int {
  background: var(--surface);
  padding: 44px 46px 40px;
  clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 31px, 100% 100%, 0 100%);
}

.cahier-corps {
  max-width: none;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.72;
}

.cahier-corps > :first-child { margin-top: 0; }
.cahier-corps > :last-child { margin-bottom: 0; }

.cahier-corps h2 {
  font-family: var(--titre);
  font-size: clamp(1.7rem, 3.6vw, 2.1rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: .96;
  text-transform: uppercase;
  color: var(--texte);
  margin: 1.9em 0 .55em;
  padding-left: 18px;
  border-left: 6px solid var(--accent);
  max-width: none;
}

.cahier-corps h3 {
  position: relative;
  font-family: var(--corps);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  margin: 1.7em 0 .5em;
  padding-left: 28px;
  max-width: none;
}

/* Encoche de patronage en petit, reprise de la puce du site. */
.cahier-corps h3::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 16px; height: 16px;
  background: var(--bronze);
  clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 0 100%);
}

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

.cahier-corps a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(185, 142, 69, .8);
  text-underline-offset: .18em;
  transition: background-color .2s ease-out;
}

.cahier-corps a:hover, .cahier-corps a:focus-visible {
  color: var(--bordure);
  text-decoration-color: var(--accent);
  background: rgba(242, 233, 216, .9);
}

.cahier-corps strong { font-weight: 600; color: var(--bordure); }
.cahier-corps em { font-style: italic; }

.cahier-corps ul, .cahier-corps ol {
  margin: 0 0 1.35em;
  padding-left: 0;
  list-style: none;
  max-width: none;
}

.cahier-corps li { margin-bottom: .55em; }
.cahier-corps li:last-child { margin-bottom: 0; }
.cahier-corps li > ul, .cahier-corps li > ol { margin: .55em 0 0; }

.cahier-corps ul > li { position: relative; padding-left: 28px; }

.cahier-corps ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 13px; height: 13px;
  background: var(--accent);
  clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 0 100%);
}

.cahier-corps ol { counter-reset: cahierpas; }
.cahier-corps ol > li { position: relative; padding-left: 42px; counter-increment: cahierpas; }

.cahier-corps ol > li::before {
  content: counter(cahierpas);
  position: absolute;
  left: 0; top: .12em;
  width: 28px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--titre);
  font-size: 1rem;
  letter-spacing: .04em;
  clip-path: polygon(0 0, 76% 0, 100% 26%, 100% 100%, 0 100%);
}

/* Tableau recapitulatif: cadre plein de 3 pixels, en tete prune, filets internes. */
.cahier-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  border: var(--trait) solid var(--bordure);
  background: var(--surface);
  font-size: .9375rem;
  line-height: 1.5;
}

.cahier-corps caption {
  caption-side: top;
  text-align: left;
  font-family: var(--titre);
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-bottom: 8px;
}

.cahier-corps thead th {
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--titre);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px 8px;
  border-right: 2px solid var(--bordure);
}

.cahier-corps thead th:last-child { border-right: 0; }

.cahier-corps tbody th {
  text-align: left;
  font-weight: 600;
  background: var(--fond-alt);
}

.cahier-corps tbody th, .cahier-corps tbody td {
  padding: 11px 14px;
  border-top: 2px solid var(--bordure);
  border-right: 2px solid rgba(58, 44, 70, .26);
  vertical-align: top;
}

.cahier-corps tbody th:last-child, .cahier-corps tbody td:last-child { border-right: 0; }
.cahier-corps tbody tr:nth-child(even) td { background: var(--fond); }

/* Encadre: cadre double, encoche de patronage et filet interieur decale,
   construit sans element supplementaire puisque le corps ne porte aucune classe. */
.cahier-corps aside {
  position: relative;
  background: var(--bordure);
  padding: 25px 27px 21px;
  margin: 0 0 1.6em;
  clip-path: polygon(0 0, calc(100% - var(--cran)) 0, 100% var(--cran), 100% 100%, 0 100%);
}

.cahier-corps aside::before {
  content: "";
  position: absolute;
  inset: var(--trait);
  background: var(--fond-alt);
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
}

.cahier-corps aside::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(185, 142, 69, .5);
  pointer-events: none;
}

.cahier-corps aside > * { position: relative; z-index: 1; }
.cahier-corps aside > :last-child { margin-bottom: 0; }
.cahier-corps aside p { color: var(--texte); }

/* Citation: filet prune epais a gauche, comme un trait de crayon en marge de patron. */
.cahier-corps blockquote {
  margin: 0 0 1.5em;
  padding: 4px 0 4px 24px;
  border-left: 6px solid var(--accent);
  color: var(--texte);
  max-width: none;
}

.cahier-corps blockquote p { font-style: italic; }
.cahier-corps blockquote > :last-child { margin-bottom: 0; }

.cahier-corps figure { margin: 0 0 1.5em; padding: 0; }
.cahier-corps figure img { border: var(--trait) solid var(--bordure); }

.cahier-corps figcaption {
  font-size: .875rem;
  color: var(--texte-doux);
  padding: 10px 0 10px;
  border-bottom: 2px solid rgba(58, 44, 70, .22);
}

/* Mesure de lecture, posee en fin de section pour l emporter a specificite egale
   sur les regles de balises ci dessus. Le texte courant ne depasse jamais 68 signes
   par ligne. Le tableau recapitulatif, l encadre et la figure debordent volontairement
   cette mesure et vont chercher la largeur du cadre, comme une planche de patronage
   depliee a cote du texte. */
.cahier-corps > p,
.cahier-corps > h2,
.cahier-corps > h3,
.cahier-corps > ul,
.cahier-corps > ol,
.cahier-corps > blockquote { max-width: 68ch; }

.cahier-corps > table,
.cahier-corps > aside,
.cahier-corps > figure { max-width: 880px; }

.cahier-corps aside p,
.cahier-corps aside ul,
.cahier-corps aside ol,
.cahier-corps blockquote p,
.cahier-corps td p,
.cahier-corps th p { max-width: none; }

/* ----------------------------------------------------- 21.6 Appel a l action */

.cahier-appel {
  background: var(--accent);
  border: var(--trait) solid var(--bordure);
  color: var(--accent-texte);
  padding: 30px 32px 28px;
  margin: 40px 0 0;
}

.cahier-appel__titre {
  font-family: var(--titre);
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  letter-spacing: .04em;
  line-height: .98;
  text-transform: uppercase;
  margin: 0 0 .5em;
  max-width: 26ch;
}

.cahier-appel p { color: var(--accent-texte); max-width: 70ch; }
.cahier-appel .craie { color: #F4DCA6; }
.cahier-appel .tampon > span { background: var(--fond); color: var(--accent); }
.cahier-appel .tampon > span::before { background: var(--accent-texte); }

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

.cahier-auteur {
  background: var(--bordure);
  padding: var(--trait);
  margin: 44px 0 0;
  clip-path: polygon(0 0, calc(100% - var(--cran)) 0, 100% var(--cran), 100% 100%, 0 100%);
}

.cahier-auteur__int {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  background: var(--fond);
  padding: 26px 28px 22px;
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
}

.cahier-auteur img { border: var(--trait) solid var(--bordure); }

.cahier-auteur__nom {
  font-family: var(--titre);
  font-size: 1.5rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 2px;
}

.cahier-auteur__role {
  display: block;
  font-family: var(--craie);
  font-size: 1.05rem;
  color: var(--bronze);
  margin-bottom: 12px;
}

.cahier-auteur p { font-size: .9375rem; color: var(--texte-doux); max-width: 74ch; }
.cahier-auteur p:last-child { margin-bottom: 0; }

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

.cahier-liasse { margin: 44px 0 0; }

.cahier-liasse__titre {
  font-family: var(--titre);
  font-size: 1.9rem;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 .35em;
  max-width: none;
}

.cahier-liasse__intro { color: var(--texte-doux); margin-bottom: 24px; }
.cahier-liasse__mur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ------------------------------------------- 21.9 Sommaire date de la page auteur */

.cahier-sommaire { list-style: none; margin: 0; padding: 0; border-top: var(--trait) solid var(--bordure); }

.cahier-sommaire li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 6px 22px;
  margin: 0;
  max-width: none;
  padding: 16px 0;
  border-bottom: 2px solid rgba(58, 44, 70, .22);
}

.cahier-sommaire time {
  font-family: var(--titre);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-top: 3px;
}

.cahier-sommaire a { font-weight: 600; }
.cahier-sommaire span { display: block; font-size: .9375rem; color: var(--texte-doux); }

/* ------------------------------------ 21.10 Titres de colonne du pied de page */

/* Les pages du magazine emploient h4 dans le pied de page, pour laisser les niveaux
   h2 et h3 au seul corps redactionnel. Le rendu reste celui des autres pages. */
.ourlet h4 {
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: .94;
  text-transform: uppercase;
  margin: 0 0 .8em;
}

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

@media (max-width: 1080px) {
  .cahier-grille, .cahier-liasse__mur { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .cahier-une__int, .cahier-tete__int { padding: 30px 24px 26px; }
  .cahier-feuille__int { padding: 30px 24px 26px; }
  .cahier-sommaire li { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cahier-page { padding: 26px 0 52px; }
  .cahier-grille, .cahier-liasse__mur { grid-template-columns: 1fr; }
  .cahier-une__reperes div { flex: 1 1 100%; }
  .cahier-corps table { font-size: .8125rem; }
  .cahier-corps tbody th, .cahier-corps tbody td, .cahier-corps thead th { padding: 8px 10px; }
  .cahier-auteur__int { grid-template-columns: 1fr; gap: 16px; }
  .cahier-appel { padding: 24px 20px 22px; }
  .cahier-exergue { padding: 16px 18px; font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche__corps::after { transition: none; }
  .cahier-corps a { transition: none; }
}

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