/* Sourcila, feuille unique.
   Casier a compartiments inegaux, semis de points de papier millimetre,
   ouverture en accordeon avec glissement vertical. Mode clair integral. */

:root {
  --fond: #FAF6F0;
  --fond-alt: #F1E3DB;
  --surface: #FFFCF8;
  --texte: #2A211C;
  --texte-doux: #6B5A4E;
  --henne: #34562E;
  --henne-fonce: #294323;
  --henne-texte: #FBF7F1;
  --brun-rose: #C08A72;
  --bordure: #E3D6CB;

  --cloison: 1px solid var(--bordure);
  --cloison-rose: 1px solid var(--brun-rose);

  --coupe: polygon(0 0, calc(100% - 28px) 0, 100% 7px, 100% 100%, 0 100%);
  --coupe-petite: polygon(0 0, calc(100% - 16px) 0, 100% 4px, 100% 100%, 0 100%);

  --pas: 8px;
  --cadre: 1180px;
  --duree-casier: 420ms;
  --duree-glissee: 260ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::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: "Jost", "Trebuchet MS", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.68;
  font-weight: 400;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Epilogue", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.015em;
  color: var(--texte);
  margin: 0 0 0.5em;
  text-transform: none;
}

h1 { font-size: 3.4rem; font-weight: 600; line-height: 1.08; }
h2 { font-size: 2.2rem; font-weight: 600; line-height: 1.15; }
h3 { font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1em; max-width: 68ch; }
ul { margin: 0 0 1em; padding-left: 1.1rem; }
li { margin-bottom: 0.35em; max-width: 66ch; }
a { color: var(--henne); text-underline-offset: 3px; }
a:hover { color: var(--henne-fonce); }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--brun-rose);
  outline-offset: 3px;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--henne);
  color: var(--henne-texte);
  padding: 12px 20px;
  z-index: 90;
  font-size: 0.92rem;
}
.evitement:focus { left: 8px; top: 8px; }

/* Motif signature: semis de points de papier millimetre */

.reglure-fond {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.55) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(190, 172, 158, 0.75) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
  background-position: 0 0, 0 0;
}

.reglure-douce {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.22) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(160, 140, 124, 0.16) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
}

/* Marge interieure gauche de chaque compartiment, douze pixels de reglure */
.case > .marge-reglure,
.marge-reglure {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.5) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(190, 172, 158, 0.8) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
  pointer-events: none;
}

/* Casier: douze colonnes, cloisons partagees, aucune gouttiere */

.cadre {
  width: min(100% - 32px, var(--cadre));
  margin-inline: auto;
}

.casier {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-top: var(--cloison);
  border-left: var(--cloison);
  background: var(--surface);
}

.case {
  position: relative;
  border-right: var(--cloison);
  border-bottom: var(--cloison);
  padding: 34px 30px 34px 40px;
  min-width: 0;
}

.case-3 { grid-column: span 3; }
.case-4 { grid-column: span 4; }
.case-5 { grid-column: span 5; }
.case-6 { grid-column: span 6; }
.case-7 { grid-column: span 7; }
.case-8 { grid-column: span 8; }
.case-9 { grid-column: span 9; }
.case-12 { grid-column: span 12; }

.case--argile { background: var(--fond-alt); }
.case--vide { background: var(--fond); }
.case--serree { padding: 22px 24px 22px 34px; }
.case--large { padding: 46px 44px 46px 52px; }

.etiquette {
  font-family: "Jost", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--texte-doux);
  margin: 0 0 10px;
  display: block;
}

.surtitre {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--henne);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.surtitre::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--brun-rose);
  flex: none;
}

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

.doux { color: var(--texte-doux); }
.mesure { max-width: 60ch; }

.titre-section {
  padding: 72px 0 26px;
}
.titre-section h2 { max-width: 22ch; }

/* Boutons */

.bouton-henne,
.bouton-trace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  clip-path: var(--coupe);
  transition: background-color 200ms ease, transform 160ms ease;
}

.bouton-henne {
  background: var(--henne);
  color: var(--henne-texte);
}
.bouton-henne::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid transparent;
  clip-path: var(--coupe-petite);
  transition: border-color 200ms ease;
}
.bouton-henne:hover {
  background: var(--henne-fonce);
  color: var(--henne-texte);
}
.bouton-henne:hover span { transform: translateY(-2px); }
.bouton-henne:hover::after { border-color: var(--brun-rose); }
.bouton-henne span,
.bouton-trace span { display: block; transition: transform 160ms ease; }
.bouton-henne:active,
.bouton-trace:active { padding-top: 1px; min-height: 47px; }

.bouton-trace {
  background: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--bordure);
  text-decoration: none;
}
.bouton-trace:hover {
  background: var(--fond-alt);
  box-shadow: inset 0 0 0 1px var(--brun-rose);
  color: var(--texte);
}

.bouton-petit { min-height: 42px; font-size: 0.88rem; padding: 0 20px; }
.duo-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 0; }

/* En tete de cabine */

.cabine-entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: 72px;
  background: rgba(250, 246, 240, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: var(--cloison);
  z-index: 60;
  transition: height 220ms var(--courbe), border-color 220ms ease;
}
.cabine-entete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 2px;
  opacity: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.6) 1px, transparent 1.2px);
  background-size: var(--pas) var(--pas);
  transition: opacity 220ms ease;
}
.cabine-entete.pose::after { opacity: 1; }
.cabine-entete.pose { height: 60px; border-bottom-color: var(--brun-rose); }

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

.cabine-marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--texte);
}
.marque-mot {
  font-family: "Epilogue", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.ancres { display: flex; align-items: center; gap: 26px; }
.ancres a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--texte);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
}
.ancres a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--brun-rose);
  transition: width 220ms var(--courbe);
}
.ancres a:hover::after,
.ancres a:focus-visible::after { width: 100%; }

.barre-menu {
  display: none;
  width: 46px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--bordure);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.barre-menu i {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--texte);
  transition: transform 220ms var(--courbe), opacity 160ms ease;
}
.barre-menu[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.barre-menu[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.barre-menu[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.panneau-ancres {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: var(--cloison-rose);
  z-index: 55;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duree-casier) var(--courbe);
}
.panneau-ancres > div { overflow: hidden; }
.panneau-ancres.ouvert { grid-template-rows: 1fr; }
.panneau-ancres nav {
  display: flex;
  flex-direction: column;
  padding: 10px 0 22px;
}
.panneau-ancres nav a {
  padding: 13px 4px;
  border-bottom: var(--cloison);
  text-decoration: none;
  color: var(--texte);
  font-weight: 500;
}
.panneau-ancres .bouton-henne { margin-top: 18px; align-self: flex-start; }

/* Hero, casier de deux cases */

.premier-ecran {
  padding-top: 118px;
  padding-bottom: 104px;
  background: var(--fond);
}
.casier-hero { align-items: stretch; }
.case-hero-texte { padding: 54px 48px 54px 56px; background: var(--surface); }
.case-hero-photo {
  padding: 0;
  background: var(--fond-alt);
  margin-bottom: -80px;
  position: relative;
  overflow: hidden;
}
.case-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.case-hero-photo::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -10px;
  width: 128px;
  height: 96px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.5) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(120, 100, 88, 0.35) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
  pointer-events: none;
}

.h1-fin { display: block; color: var(--henne); }

.jauge-hero {
  margin: 30px 0 0;
  border-top: var(--cloison);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.jauge-hero div {
  padding: 18px 14px 4px 0;
}
.jauge-hero strong {
  display: block;
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--texte);
}
.jauge-hero span { font-size: 0.86rem; color: var(--texte-doux); }

/* Bande de mots cles sous le hero */

.bande-lexique {
  background: var(--henne);
  color: var(--henne-texte);
  padding: 14px 0;
}
.bande-lexique ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}
.bande-lexique li { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--henne-texte); }
.bande-lexique li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--brun-rose);
  flex: none;
}

/* Probleme */

.zone-probleme { background: var(--fond-alt); padding-bottom: 84px; }
.zone-probleme .casier { background: var(--fond); }
.cout-chiffre {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--henne);
  display: block;
  margin-bottom: 8px;
}

/* Solution, quatre bandes de hauteurs decroissantes */

.zone-temps { padding-bottom: 90px; }
.temps {
  display: grid;
  grid-template-columns: 96px 1fr;
  border-top: var(--cloison);
  border-left: var(--cloison);
  border-right: var(--cloison);
  background: var(--surface);
}
.temps:last-of-type { border-bottom: var(--cloison); }
.temps-numero {
  border-right: var(--cloison);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 26px;
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--brun-rose);
  background: var(--fond);
}
.temps-corps { padding: 26px 34px; }
.temps-1 .temps-corps { padding-bottom: 46px; }
.temps-2 .temps-corps { padding-bottom: 38px; }
.temps-3 .temps-corps { padding-bottom: 30px; }
.temps-4 .temps-corps { padding-bottom: 22px; }

.photo-case { position: relative; padding: 0; overflow: hidden; }
.photo-case img { width: 100%; height: auto; }
.photo-case figcaption {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--texte-doux);
  padding: 14px 20px 16px 30px;
  border-top: var(--cloison);
  background: var(--surface);
  margin: 0;
}
figure { margin: 0; }

/* Fonctionnalites */

.zone-fiches { background: var(--fond-alt); padding-bottom: 88px; }
.zone-fiches .casier { background: var(--surface); }
.fiche h3 { margin-bottom: 8px; }
.fiche p { font-size: 1rem; color: var(--texte-doux); margin-bottom: 0; }
.fiche-repere {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-style: italic;
  color: var(--brun-rose);
  font-size: 0.86rem;
  display: block;
  margin-bottom: 12px;
}

/* Avantages */

.zone-gains { padding-bottom: 90px; }
.bande-gains {
  background: var(--fond-alt);
  border: var(--cloison);
  border-bottom: 0;
  padding: 30px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.bande-gains p { margin: 0; font-size: 1.1rem; }
.gain-valeur {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  display: block;
  color: var(--henne);
  margin-bottom: 6px;
}
.gain p { font-size: 0.98rem; color: var(--texte-doux); margin-bottom: 0; }

/* Preuve sociale */

.zone-preuve {
  padding-bottom: 96px;
  background-color: var(--fond);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.28) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(120, 100, 88, 0.14) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
}
.paroles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  align-items: start;
}
.parole {
  background: var(--surface);
  border: var(--cloison);
  padding: 30px 28px 26px 38px;
  position: relative;
  margin-left: -1px;
}
.parole:first-child { margin-left: 0; }
.parole--haute { margin-top: -32px; padding-bottom: 40px; }
.parole blockquote {
  margin: 0 0 18px;
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--texte);
}
.parole blockquote p { max-width: none; }
.parole figcaption { font-size: 0.88rem; color: var(--texte-doux); border-top: var(--cloison-rose); padding-top: 12px; }
.parole figcaption b { display: block; color: var(--texte); font-weight: 600; font-size: 0.95rem; }

.compteurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--cloison);
  background: var(--surface);
  margin-top: 44px;
}
.compteurs div { padding: 26px 22px 24px 32px; border-right: var(--cloison); position: relative; }
.compteurs div:last-child { border-right: 0; }
.compteurs strong {
  display: block;
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--henne);
}
.compteurs span { font-size: 0.9rem; color: var(--texte-doux); }

/* Tarifs */

.zone-tarifs { background: var(--fond-alt); padding-bottom: 92px; }
.formules { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
.formule {
  grid-column: span 4;
  background: var(--fond);
  border: var(--cloison);
  margin-left: -1px;
  padding: 32px 28px 30px 38px;
  position: relative;
}
.formule:first-child { margin-left: 0; }
.formule--phare {
  background: var(--surface);
  border-color: var(--brun-rose);
  padding-top: 44px;
  padding-bottom: 42px;
  z-index: 2;
}
.formule-marque {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--henne);
  color: var(--henne-texte);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  padding: 5px 14px;
}
.formule h3 { margin-bottom: 4px; }
.formule-cible { font-size: 0.93rem; color: var(--texte-doux); min-height: 5.4em; }
.formule-prix {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--texte);
  display: block;
}
.formule-unite { font-size: 0.88rem; color: var(--texte-doux); display: block; margin: 6px 0 20px; }
.formule-liste { list-style: none; padding: 0; margin: 0 0 24px; border-top: var(--cloison); }
.formule-liste li {
  padding: 9px 0 9px 22px;
  border-bottom: var(--cloison);
  font-size: 0.94rem;
  position: relative;
  margin: 0;
}
.formule-liste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 6px;
  height: 6px;
  background: var(--brun-rose);
}
.note-tarifs { margin-top: 26px; font-size: 0.94rem; color: var(--texte-doux); }

/* FAQ */

.zone-faq { padding-bottom: 92px; }
.casier-faq { display: grid; grid-template-columns: repeat(12, 1fr); border-top: var(--cloison); border-left: var(--cloison); }
.faq-liste { grid-column: span 8; border-right: var(--cloison); border-bottom: var(--cloison); background: var(--surface); padding: 10px 34px 26px 40px; }
.faq-marge {
  grid-column: span 4;
  border-right: var(--cloison);
  border-bottom: var(--cloison);
  background-color: var(--fond-alt);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.45) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(120, 100, 88, 0.2) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
  padding: 34px 30px 30px 40px;
}
.faq-marge p { font-size: 0.98rem; }

.question { border-bottom: var(--cloison); }
.question:last-of-type { border-bottom: 0; }
.question > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: "Epilogue", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.35;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 28px;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--brun-rose);
  border-bottom: 1px solid var(--brun-rose);
  transform: rotate(45deg);
  transition: transform var(--duree-casier) var(--courbe);
}
.question[open] > summary::after { transform: rotate(-135deg); }
.question > summary:hover { color: var(--henne); }
.reponse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--duree-casier) var(--courbe); }
.reponse.plie { grid-template-rows: 0fr; }
.reponse > div { overflow: hidden; }
.reponse p { padding-right: 20px; color: var(--texte-doux); font-size: 1rem; }
.reponse p:last-child { margin-bottom: 22px; }

/* Formulaire */

.zone-contact { background: var(--fond-alt); padding-bottom: 96px; }
.casier-contact { background: var(--surface); }
.case-champs { padding: 40px 40px 44px 48px; }
.case-rassurance { background: var(--fond); padding: 40px 32px 40px 42px; }

.champ { display: block; margin-bottom: 18px; }
.champ span, .champ-libelle {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: var(--cloison);
  padding: 11px 13px;
  border-radius: 0;
}
textarea { resize: vertical; min-height: 128px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brun-rose);
  outline-offset: 2px;
  background: var(--surface);
}
.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--texte-doux);
  margin: 6px 0 22px;
  max-width: 62ch;
}
.consentement input { margin-top: 5px; accent-color: var(--henne); }
.apres-envoi { font-size: 0.92rem; color: var(--texte-doux); margin-top: 18px; }

.liste-rassurance { list-style: none; padding: 0; margin: 0; }
.liste-rassurance li {
  border-bottom: var(--cloison);
  padding: 14px 0 14px 20px;
  font-size: 0.95rem;
  position: relative;
}
.liste-rassurance li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 1px;
  background: var(--brun-rose);
}

/* Pied de page */

.pied-casier {
  background: var(--fond);
  border-top: var(--cloison-rose);
  padding-top: 56px;
}
.pied-colonnes {
  display: grid;
  grid-template-columns: 3.2fr 2fr 2fr 2.6fr;
  border-top: var(--cloison);
  border-left: var(--cloison);
}
.pied-colonne {
  border-right: var(--cloison);
  border-bottom: var(--cloison);
  padding: 30px 26px 30px 34px;
  position: relative;
}
.pied-colonne h2 { font-size: 0.95rem; font-family: "Jost", system-ui, sans-serif; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 14px; }
.pied-colonne ul { list-style: none; padding: 0; margin: 0; }
.pied-colonne li { margin-bottom: 9px; font-size: 0.93rem; }
.pied-colonne a { color: var(--texte); text-decoration: none; }
.pied-colonne a:hover { color: var(--henne); text-decoration: underline; }
.pied-positionnement { font-size: 0.95rem; color: var(--texte-doux); }
.profils { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.9rem; margin-top: 14px; }
.pied-bas {
  padding: 22px 0 40px;
  font-size: 0.88rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
}

/* Pages internes */

.page-interne { padding-top: 118px; padding-bottom: 30px; }
.fil { font-size: 0.86rem; color: var(--texte-doux); margin-bottom: 18px; }
.fil a { color: var(--texte-doux); }
.corps-legal { padding-bottom: 80px; }
.corps-legal .casier { background: var(--surface); }
.bloc-texte { padding: 40px 44px 34px 52px; }
.bloc-texte h2 { font-size: 1.6rem; margin-top: 34px; }
.bloc-texte h2:first-of-type { margin-top: 0; }
.bloc-texte h3 { margin-top: 24px; }
.sommaire-legal { position: sticky; top: 100px; }
.sommaire-legal ul { list-style: none; padding: 0; margin: 0; }
.sommaire-legal li { border-bottom: var(--cloison); padding: 9px 0; font-size: 0.9rem; }
.sommaire-legal a { color: var(--texte); text-decoration: none; }
.sommaire-legal a:hover { color: var(--henne); text-decoration: underline; }

.portrait-auteur {
  border: var(--cloison);
  padding: 6px;
  background: var(--surface);
}
.tableau-simple { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 0.95rem; }
.tableau-simple th, .tableau-simple td { border: var(--cloison); padding: 10px 12px; text-align: left; vertical-align: top; }
.tableau-simple th { background: var(--fond-alt); font-weight: 600; width: 38%; }

.centre-message { padding: 150px 0 110px; }
.centre-message .casier { background: var(--surface); }

/* Ouverture en accordeon avec glissement vertical */

.deplie { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--duree-casier) var(--courbe); }
.deplie > .deplie-corps { overflow: hidden; }
.deplie > .deplie-corps > * { transition: transform var(--duree-glissee) var(--courbe) 80ms, opacity var(--duree-glissee) ease 80ms; }
.js .deplie { grid-template-rows: 0fr; }
.js .deplie > .deplie-corps > * { transform: translateY(-16px); opacity: 0; }
.js .deplie.ouvert { grid-template-rows: 1fr; }
.js .deplie.ouvert > .deplie-corps > * { transform: translateY(0); opacity: 1; }

/* Responsive */

@media (max-width: 1080px) {
  h1 { font-size: 2.9rem; }
  .case-hero-texte { padding: 42px 34px; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ancres { display: none; }
  .barre-menu { display: flex; }
  .entete-rang .bouton-henne { display: none; }
  .casier > .case,
  .formules > .formule,
  .paroles > .parole,
  .casier-faq > * {
    grid-column: 1 / -1;
  }
  .casier { grid-template-columns: 1fr; }
  .formules, .paroles, .casier-faq { grid-template-columns: 1fr; }
  .parole { margin-left: 0; margin-top: 0; border-top: 0; }
  .paroles .parole:first-child { border-top: var(--cloison); }
  .parole--haute { margin-top: 0; }
  .formule { margin-left: 0; border-top: 0; }
  .formules .formule:first-child { border-top: var(--cloison); }
  .case-hero-photo { margin-bottom: 0; }
  .compteurs { grid-template-columns: 1fr 1fr; }
  .compteurs div { border-bottom: var(--cloison); }
  .compteurs div:nth-child(2n) { border-right: 0; }
  .faq-marge { border-left: 0; }
  .sommaire-legal { position: static; }
}

@media (max-width: 640px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.72rem; }
  body { font-size: 1rem; }
  .case, .bloc-texte, .case-hero-texte, .case-champs, .case-rassurance { padding: 26px 20px 26px 28px; }
  .jauge-hero { grid-template-columns: 1fr; }
  .jauge-hero div { border-bottom: var(--cloison); }
  .duo-champs { grid-template-columns: 1fr; }
  .compteurs { grid-template-columns: 1fr; }
  .compteurs div { border-right: 0; }
  .pied-colonnes { grid-template-columns: 1fr; }
  .bande-gains { padding: 22px 20px; }
  .temps { grid-template-columns: 64px 1fr; }
  .temps-corps { padding: 22px 20px; }
  .titre-section { padding-top: 54px; }
  .premier-ecran { padding-top: 98px; padding-bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .deplie, .panneau-ancres, .reponse {
    transition: none;
  }
  .js .deplie { grid-template-rows: 1fr; }
  .js .deplie > .deplie-corps > * {
    transform: none;
    opacity: 0;
    transition: opacity 120ms linear;
  }
  .js .deplie.ouvert > .deplie-corps > * { opacity: 1; }
  .bouton-henne, .bouton-trace, .ancres a::after, .question > summary::after { transition: none; }
}

@media print {
  .cabine-entete, .panneau-ancres, .duo-boutons { display: none; }
  body { background: #fff; }
}
/* ==================================================================
   LE CAHIER DU SOURCIL, magazine de Sourcila.
   Section ajoutee en fin de feuille, aucune regle precedente modifiee.
   Le magazine reprend le casier a compartiments inegaux, le coin
   superieur droit coupe a 12 degres, le filet brun rose, le semis de
   points de papier millimetre et l ouverture en accordeon avec
   glissement vertical deja employes sur le reste du site.
   ================================================================== */

/* 1. Rubrique de pied de page sans titre de niveau deux.
      Les pages d article n admettent qu un seul h1 et aucun h2 hors
      du corps redactionnel: le pied de page y porte donc la meme
      apparence avec un simple paragraphe. */

.pied-colonne .pied-rubrique {
  font-family: "Jost", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--texte);
  margin: 0 0 14px;
  max-width: none;
}

/* 2. Sections du magazine */

.zone-cahier { padding-bottom: 92px; }
.zone-cahier--argile { background: var(--fond-alt); }
.zone-cahier--argile .casier { background: var(--surface); }
.zone-cahier .casier { background: var(--surface); }
.cahier-suite { margin: 32px 0 0; }
.cahier-suite p { margin-bottom: 16px; }

.cahier-chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--cloison);
  border-top: 0;
  background: var(--fond);
}
.cahier-chiffres div { padding: 22px 20px 20px 30px; border-right: var(--cloison); position: relative; }
.cahier-chiffres div:last-child { border-right: 0; }
.cahier-chiffres strong {
  display: block;
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--henne);
  margin-bottom: 6px;
}
.cahier-chiffres span { font-size: 0.88rem; color: var(--texte-doux); }

/* 3. Grille de cartes d article et carte d article */

.casier-cahier { align-items: stretch; }

.fiche-cahier {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transition: background-color 220ms ease;
}
.fiche-cahier:hover { background: var(--fond-alt); }

.fiche-cahier-photo {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--fond-alt);
  margin: 0 0 18px;
}
.fiche-cahier-photo img {
  width: 100%;
  height: auto;
  clip-path: var(--coupe-petite);
  transition: transform 420ms var(--courbe);
}
.fiche-cahier-photo::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--bordure);
  clip-path: var(--coupe-petite);
  pointer-events: none;
  transition: border-color 220ms ease;
}
.fiche-cahier:hover .fiche-cahier-photo::after { border-color: var(--brun-rose); }
.fiche-cahier:hover .fiche-cahier-photo img { transform: translateY(-3px); }

.fiche-cahier-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 12px;
  max-width: none;
  font-size: 0.82rem;
  color: var(--texte-doux);
}
.fiche-cahier-titre {
  font-family: "Epilogue", "Segoe UI", system-ui, sans-serif;
  font-size: 1.24rem;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  max-width: 26ch;
}
.fiche-cahier-titre a { color: var(--texte); text-decoration: none; }
.fiche-cahier-titre a:hover { color: var(--henne); text-decoration: underline; text-decoration-color: var(--brun-rose); }
.fiche-cahier-extrait {
  font-size: 0.97rem;
  color: var(--texte-doux);
  margin: 0 0 16px;
}
.fiche-cahier-pied {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: var(--cloison-rose);
  font-size: 0.84rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  max-width: none;
}

/* Etiquette d angle, forme du bouton en petit format */
.angle-cahier {
  display: inline-block;
  background: var(--henne);
  color: var(--henne-texte);
  font-family: "Jost", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  padding: 4px 12px;
  clip-path: var(--coupe-petite);
}
.duree-cahier {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--texte-doux);
}

/* 4. Entete d article, fil d Ariane, angle, dates et temps de lecture */

.article-cahier { display: block; }
.art-tete { padding-bottom: 0; }

.fil-cahier {
  font-size: 0.86rem;
  color: var(--texte-doux);
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.fil-cahier a { color: var(--texte-doux); }
.fil-cahier a:hover { color: var(--henne); }
.fil-cahier span[aria-hidden] { color: var(--brun-rose); }
.fil-cahier > span:last-child { color: var(--texte); }

.art-entete h1 { font-size: 2.9rem; max-width: 20ch; }
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: var(--cloison);
  max-width: none;
  font-size: 0.86rem;
  color: var(--texte-doux);
}
.art-chapo {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--texte);
  border-left: 2px solid var(--brun-rose);
  padding-left: 22px;
  margin: 22px 0 0;
  max-width: 60ch;
}
.art-repere p { font-size: 0.95rem; }
.art-repere-lien { margin-bottom: 0; }

.art-photo {
  position: relative;
  margin: 34px 0 0;
  padding: 8px;
  background: var(--fond-alt);
}
.art-photo img { width: 100%; height: auto; clip-path: var(--coupe); }
.art-photo::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -10px;
  width: 128px;
  height: 88px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.5) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(120, 100, 88, 0.35) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
  pointer-events: none;
}

.art-lecture { padding: 44px 0 0; }
.art-lecture .casier { background: var(--surface); }

/* 5. Colonne de marge, tiers droit du casier de lecture */

.art-marge {
  background-color: var(--fond-alt);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.4) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(120, 100, 88, 0.18) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
}
.art-marge-tenue { position: sticky; top: 104px; }
.art-marge p { font-size: 0.95rem; }
.art-marge .bouton-trace { margin-top: 6px; }

/* 6. Corps de l article: HTML semantique nu, aucune classe.
      Chaque balise est mise en forme comme descendante du conteneur,
      avec la forme signature du casier. */

.art-corps {
  max-width: none;
  font-size: 1.05rem;
  line-height: 1.68;
}
.art-corps > * { max-width: 68ch; }

.art-corps h2 {
  font-family: "Epilogue", "Segoe UI", system-ui, sans-serif;
  font-size: 1.78rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 2.3em 0 0.65em;
  padding-top: 22px;
  border-top: var(--cloison-rose);
  position: relative;
  max-width: 30ch;
}
.art-corps h2::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--henne);
}
.art-corps > h2:first-of-type { margin-top: 0; }

.art-corps h3 {
  font-family: "Epilogue", "Segoe UI", system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 1.9em 0 0.5em;
  padding-left: 24px;
  position: relative;
  max-width: 34ch;
}
.art-corps h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  bottom: 0.16em;
  width: 12px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.5) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(190, 172, 158, 0.85) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
}

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

.art-corps a {
  color: var(--henne);
  text-decoration: underline;
  text-decoration-color: var(--brun-rose);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.art-corps a:hover { color: var(--henne-fonce); background: var(--fond-alt); }
.art-corps strong { font-weight: 600; color: var(--texte); }
.art-corps em { font-style: italic; }

.art-corps ul {
  list-style: none;
  padding-left: 0;
  margin: 1.3em 0 1.7em;
}
.art-corps ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.55em;
  max-width: 66ch;
}
.art-corps ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--brun-rose);
}
.art-corps ol {
  list-style: none;
  counter-reset: cahier-pas;
  padding-left: 0;
  margin: 1.3em 0 1.7em;
}
.art-corps ol li {
  counter-increment: cahier-pas;
  position: relative;
  padding-left: 34px;
  margin-bottom: 0.55em;
  max-width: 66ch;
}
.art-corps ol li::before {
  content: counter(cahier-pas);
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--henne);
}
.art-corps li > ul, .art-corps li > ol { margin: 0.5em 0 0.2em; }

.art-corps table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  margin: 1.8em 0 2em;
  font-size: 0.95rem;
  background: var(--surface);
}
.art-corps th, .art-corps td {
  border: var(--cloison);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}
.art-corps thead th {
  font-family: "Epilogue", system-ui, sans-serif;
  font-size: 0.93rem;
  font-weight: 600;
  background: var(--fond-alt);
  border-bottom: var(--cloison-rose);
}
.art-corps tbody th { background: var(--fond); font-weight: 600; }
.art-corps tbody tr:nth-child(2n) td { background: var(--fond); }

.art-corps blockquote {
  margin: 2em 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid var(--brun-rose);
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--texte);
  max-width: 62ch;
}
.art-corps blockquote p { font-family: inherit; font-style: inherit; margin-bottom: 0.6em; }
.art-corps blockquote > :last-child { margin-bottom: 0; }

.art-corps aside {
  position: relative;
  margin: 2.1em 0;
  padding: 26px 30px 22px 44px;
  background: var(--fond-alt);
  clip-path: var(--coupe);
  max-width: 68ch;
}
.art-corps aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(192, 138, 114, 0.5) 1.5px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(190, 172, 158, 0.85) 1px, transparent 1.2px);
  background-size: 40px 40px, var(--pas) var(--pas);
}
.art-corps aside::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--brun-rose);
  clip-path: var(--coupe-petite);
  pointer-events: none;
}
.art-corps aside p { font-size: 0.99rem; }
.art-corps aside > :last-child { margin-bottom: 0; }

.art-corps figure { margin: 1.8em 0; border: var(--cloison); background: var(--surface); }
.art-corps figure img { width: 100%; height: auto; }
.art-corps figcaption {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--texte-doux);
  padding: 12px 18px 14px;
  border-top: var(--cloison);
}

/* 7. Appel a l action de fin d article et encart auteur */

.art-fin { padding: 0 0 10px; }
.art-fin .casier { background: var(--surface); }
.art-suite-titre {
  font-family: "Epilogue", system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  max-width: 24ch;
}
.art-suite .bouton-henne { margin-top: 10px; }

.art-auteur { display: grid; grid-template-columns: 96px 1fr; gap: 22px; }
.art-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: var(--cloison);
  padding: 3px;
  background: var(--surface);
}
.art-auteur p { font-size: 0.96rem; }
.art-auteur-nom {
  font-family: "Epilogue", system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0 0 2px;
}
.art-auteur-role {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-style: italic;
  color: var(--texte-doux);
  font-size: 0.92rem;
  margin: 0 0 12px;
}
.art-auteur-lien { margin-bottom: 0; }

/* 8. Bloc A lire aussi */

.zone-aussi {
  display: block;
  background-color: var(--fond-alt);
  margin-top: 56px;
  padding: 58px 0 74px;
  border-top: var(--cloison-rose);
}
.aussi-titre {
  font-family: "Epilogue", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.aussi-intro { color: var(--texte-doux); margin-bottom: 26px; }
.aussi-grille {
  display: grid;
  grid-template-columns: 1.16fr 0.95fr 0.89fr;
  border-top: var(--cloison);
  border-left: var(--cloison);
  background: var(--surface);
}
.carte-aussi {
  border-right: var(--cloison);
  border-bottom: var(--cloison);
  padding: 24px 24px 24px 34px;
  position: relative;
  transition: background-color 220ms ease;
}
.carte-aussi:hover { background: var(--fond-alt); }
.carte-aussi-photo {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--fond-alt);
}
.carte-aussi-photo img { width: 100%; height: auto; clip-path: var(--coupe-petite); }
.carte-aussi-photo::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--bordure);
  clip-path: var(--coupe-petite);
  pointer-events: none;
  transition: border-color 220ms ease;
}
.carte-aussi:hover .carte-aussi-photo::after { border-color: var(--brun-rose); }
.carte-aussi-titre {
  font-family: "Epilogue", system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.carte-aussi-titre a { color: var(--texte); text-decoration: none; }
.carte-aussi-titre a:hover { color: var(--henne); text-decoration: underline; text-decoration-color: var(--brun-rose); }
.carte-aussi-accroche { font-size: 0.93rem; color: var(--texte-doux); margin: 0; }

/* 9. Section Derniers articles de la page d accueil */

.derniers-cahier { background: var(--fond); border-top: var(--cloison-rose); }
.derniers-cahier .titre-section h2 { max-width: 26ch; }
.derniers-cahier .casier { background: var(--surface); }
.derniers-cahier .cahier-suite { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* 10. Sommaire du magazine sur la page auteur et le plan du site */

.liste-cahier { list-style: none; padding: 0; margin: 0; }
.liste-cahier li {
  border-bottom: var(--cloison);
  padding: 12px 0 12px 20px;
  position: relative;
  margin: 0;
  max-width: none;
}
.liste-cahier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 1px;
  background: var(--brun-rose);
}
.liste-cahier a { text-decoration: none; }
.liste-cahier a:hover { text-decoration: underline; text-decoration-color: var(--brun-rose); }
.liste-cahier .liste-cahier-date {
  display: block;
  font-size: 0.84rem;
  color: var(--texte-doux);
  margin-top: 2px;
}

/* 11. Reprises responsives du magazine */

@media (max-width: 1080px) {
  .art-entete h1 { font-size: 2.5rem; }
  .aussi-grille { grid-template-columns: 1fr 1fr; }
  .carte-aussi:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .casier-cahier > .fiche-cahier { grid-column: 1 / -1; }
  .art-marge-tenue { position: static; }
  .cahier-chiffres { grid-template-columns: 1fr; }
  .cahier-chiffres div { border-right: 0; border-bottom: var(--cloison); }
  .cahier-chiffres div:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .art-entete h1 { font-size: 2.1rem; }
  .art-corps h2 { font-size: 1.5rem; }
  .art-corps h3 { font-size: 1.14rem; }
  .art-corps table { display: block; overflow-x: auto; }
  .art-corps aside { padding: 22px 20px 18px 34px; }
  .art-chapo { padding-left: 16px; font-size: 1.08rem; }
  .aussi-grille { grid-template-columns: 1fr; }
  .carte-aussi:last-child { grid-column: auto; }
  .carte-aussi { padding: 22px 20px 22px 28px; }
  .art-auteur { grid-template-columns: 1fr; gap: 16px; }
  .art-lecture { padding-top: 30px; }
  .zone-aussi { padding: 40px 0 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche-cahier,
  .fiche-cahier-photo img,
  .fiche-cahier-photo::after,
  .carte-aussi,
  .carte-aussi-photo::after { transition: none; }
  .fiche-cahier:hover .fiche-cahier-photo img { transform: none; }
}

@media print {
  .art-marge, .zone-aussi, .art-suite { display: none; }
  .art-corps { max-width: none; }
}

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