/* Perrulise, feuille de style unique.
   Vocabulaire des classes: carnet, feuillet, mur, brique, fiche, onglet, onde, griffonnage.
   Mode clair integral, aucune variante sombre. */

:root {
  --creme: #FBF6F1;
  --poudre: #F6EAE6;
  --blanc: #FFFFFF;
  --encre: #2E2621;
  --taupe: #6E5B52;
  --sienne: #94562E;
  --sur-sienne: #FFF9F5;
  --magenta: #85526B;
  --lin: #E4D3C9;

  --titre: "Roboto Slab", "Droid Serif", Georgia, serif;
  --courant: "Barlow", "Segoe UI", Helvetica, Arial, sans-serif;
  --plume: "Shadows Into Light", "Bradley Hand", cursive;

  --gouttiere: 28px;
  --laize: 1240px;
  --decroche: 26px;
  --coin: 6px;

  --ombre-basse: 0 8px 8px -6px rgba(46, 38, 33, 0.16);
  --ombre-levee: 0 14px 18px -8px rgba(46, 38, 33, 0.22);
  --glisse: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.075rem;
  font-weight: 400;
  line-height: 1.72;
  hyphens: none;
}

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

a { color: var(--sienne); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #7C4726; }

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: 3.05rem; font-weight: 600; }
h2 { font-size: 2.05rem; font-weight: 600; }
h3 { font-size: 1.35rem; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 500; }

p { margin: 0 0 1.05em; max-width: 66ch; }
strong { font-weight: 500; }

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

.saut-contenu {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 90;
  background: var(--sienne);
  color: var(--sur-sienne);
  padding: 10px 20px;
  border-radius: 18px 6px 6px 6px;
  font-weight: 600;
  transition: top 160ms ease;
}
.saut-contenu:focus { top: 12px; color: var(--sur-sienne); }

/* ---------- Plateau et feuillets ---------- */

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

.feuillet {
  position: relative;
  padding: 92px 0 84px;
}
.feuillet--poudre { background: var(--poudre); }
.feuillet--serre { padding: 64px 0 60px; }

.entete-feuillet { max-width: 760px; margin-bottom: 52px; }
.entete-feuillet p { color: var(--taupe); font-size: 1.12rem; }

.griffonnage {
  font-family: var(--plume);
  font-size: 1.2rem;
  color: var(--magenta);
  display: block;
  transform: rotate(-2deg) translateX(-4px);
  transform-origin: left center;
  margin-bottom: 10px;
}

.filet-onde {
  display: block;
  width: 40%;
  max-width: 220px;
  height: 8px;
  margin: 0 0 22px;
  color: var(--sienne);
  overflow: hidden;
}
.filet-onde svg { width: 100%; height: 8px; display: block; }

/* ---------- Motif signature, onde sonore ---------- */

.onde-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.bande-onde {
  height: 90px;
  background: var(--creme);
  position: relative;
  overflow: hidden;
}
.bande-onde svg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 90px;
}
.bande-onde .onde-basse { top: 0; color: var(--sienne); opacity: 0.22; }
.bande-onde .onde-haute { top: 5px; left: 40px; color: var(--magenta); opacity: 0.12; }

.onde-filigrane {
  position: absolute;
  inset: auto 0 18% 0;
  height: 60px;
  color: var(--sur-sienne);
  opacity: 0.3;
  pointer-events: none;
}
.onde-filigrane svg { width: 100%; height: 60px; }

/* ---------- Mur en briques decalees ---------- */

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

.brique-4 { grid-column: span 4; }
.brique-6 { grid-column: span 6; }
.brique-8 { grid-column: span 8; }

.decale-demi { margin-top: 76px; }
.decale-tiers { margin-top: 44px; }
.decale-court { margin-top: 32px; }
.pousse-3 { grid-column-start: 4; }
.pousse-4 { grid-column-start: 5; }
.pousse-7 { grid-column-start: 7; }

/* ---------- Fiches, le decrochement de brique ---------- */

.fiche {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  padding: 30px 28px 28px;
  box-shadow: var(--ombre-basse);
  transition: transform var(--glisse), box-shadow var(--glisse);
}
.fiche::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 40%;
  height: 2px;
  background: var(--sienne);
  border-radius: 2px;
  transition: width var(--glisse);
}
.fiche p { max-width: 54ch; color: var(--taupe); }
.fiche p:last-child { margin-bottom: 0; }
.fiche h3 { color: var(--encre); }

.fiche:hover,
.fiche:focus-within {
  transform: translateY(-4px) rotate(0.7deg);
  box-shadow: 0 18px 18px -10px rgba(46, 38, 33, 0.24);
}
.fiche:hover::before,
.fiche:focus-within::before { width: 62%; }

.mur > .brique-4:nth-child(even) .fiche:hover,
.mur > .brique-6:nth-child(even) .fiche:hover,
.mur > .brique-4:nth-child(even) .fiche:focus-within,
.mur > .brique-6:nth-child(even) .fiche:focus-within {
  transform: translateY(-4px) rotate(-0.7deg);
}

.fiche__rang {
  font-family: var(--titre);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--magenta);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 6px;
}

.note-marge {
  font-family: var(--plume);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--magenta);
  display: block;
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--lin);
}

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

.bouton-sienne,
.bouton-lin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 30px;
  font-family: var(--courant);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--coin) var(--coin) var(--coin) 22px;
  cursor: pointer;
  transition: transform var(--glisse), background-color var(--glisse), border-color var(--glisse), color var(--glisse);
}

.bouton-sienne {
  background: var(--sienne);
  color: var(--sur-sienne);
  border: 1.5px solid var(--sienne);
}
.bouton-sienne:hover {
  background: #7C4726;
  border-color: #7C4726;
  color: var(--sur-sienne);
  transform: translateY(-2px) rotate(0.7deg);
}
.bouton-sienne:active { transform: translateY(1px); }

.bouton-lin {
  background: transparent;
  color: var(--sienne);
  border: 1.5px solid var(--lin);
}
.bouton-lin:hover {
  background: var(--poudre);
  border-color: var(--sienne);
  color: var(--sienne);
}
.bouton-lin:active { transform: translateY(1px); }

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

/* ---------- Bandeau d en tete ---------- */

.bandeau {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 76px;
  background: rgba(251, 246, 241, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: height 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.bandeau--pose {
  height: 64px;
  border-bottom-color: var(--lin);
  box-shadow: 0 6px 6px -6px rgba(46, 38, 33, 0.2);
}
.bandeau__interieur {
  height: 100%;
  max-width: var(--laize);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
}
.logotype:hover { color: var(--encre); }
.logotype svg { width: 34px; height: 34px; flex: none; }

.rail-ancres { display: flex; align-items: center; gap: 26px; }
.rail-ancres a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  padding: 6px 0;
}
.rail-ancres a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--sienne);
  transition: width 220ms ease;
}
.rail-ancres a:hover::after,
.rail-ancres a[aria-current="true"]::after { width: 100%; }

.trois-traits {
  display: none;
  width: 48px; height: 48px;
  background: transparent;
  border: 1.5px solid var(--lin);
  border-radius: 6px 6px 6px 18px;
  cursor: pointer;
  padding: 0;
}
.trois-traits span {
  display: block;
  width: 22px; height: 2px;
  margin: 4px auto;
  background: var(--encre);
}

.panneau-plein {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--creme);
  padding: 96px 24px 40px;
  overflow-y: auto;
}
.panneau-plein[hidden] { display: none; }
.panneau-plein a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid var(--lin);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
}
.panneau-plein a:last-of-type { border-bottom: 0; }
.panneau-plein .bouton-sienne { margin-top: 24px; width: 100%; }
.ferme-panneau {
  position: absolute;
  top: 22px; right: 24px;
  width: 48px; height: 48px;
  font-size: 1.4rem;
  line-height: 1;
  background: transparent;
  border: 1.5px solid var(--lin);
  border-radius: 6px 6px 6px 18px;
  color: var(--encre);
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  padding: 148px 0 60px;
  position: relative;
}
.hero .mur { align-items: start; }
.hero h1 { margin-bottom: 18px; }
.hero__chapeau {
  font-size: 1.2rem;
  color: var(--taupe);
  max-width: 58ch;
}
.hero__photo { margin-top: 54px; }

.reassurance {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 30px;
  padding: 18px 22px;
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  max-width: 620px;
}
.reassurance b {
  font-family: var(--titre);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--sienne);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  flex: none;
}
.reassurance span { font-size: 0.98rem; color: var(--taupe); }

/* ---------- Cadre photographique ---------- */

.cadre-photo {
  position: relative;
  padding: 3px;
  background: var(--sur-sienne);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) 34px;
  overflow: hidden;
}
.cadre-photo img {
  width: 100%;
  border-radius: 3px 3px 3px 31px;
  filter: saturate(0.94) contrast(1.02);
}
.cadre-photo::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 3px 3px 3px 31px;
  background: linear-gradient(to top, rgba(148, 86, 46, 0.08), rgba(148, 86, 46, 0));
  pointer-events: none;
}
.cadre-photo figcaption {
  font-size: 0.875rem;
  color: var(--taupe);
  padding: 12px 10px 4px;
}

figure { margin: 0; }

/* ---------- Listes de contenu ---------- */

.liste-cochee { list-style: none; padding: 0; margin: 0 0 1.2em; }
.liste-cochee li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--taupe);
}
.liste-cochee li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--sienne);
  border-bottom: 2px solid var(--sienne);
  transform: rotate(-45deg);
}
.liste-cochee li strong { color: var(--encre); }

.rails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); margin-top: 40px; }
.rail {
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  padding: 28px;
}
.rail h3 { color: var(--magenta); }
.rail ul { margin-bottom: 0; }

/* ---------- Bandeau de chiffres cles ---------- */

.chiffres {
  position: relative;
  overflow: hidden;
  background: var(--sienne);
  color: var(--sur-sienne);
  border-radius: var(--coin) var(--coin) var(--coin) 40px;
  padding: 44px 36px;
  margin-top: 64px;
}
.chiffres ul {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.chiffres b {
  display: block;
  font-family: var(--titre);
  font-size: 2.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 4px;
}
.chiffres span { font-size: 0.95rem; color: var(--sur-sienne); opacity: 0.94; }

/* ---------- Temoignages ---------- */

.temoignage {
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  padding: 30px 28px;
  box-shadow: var(--ombre-basse);
  transition: transform var(--glisse), box-shadow var(--glisse);
  position: relative;
}
.temoignage::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 40%; height: 2px;
  background: var(--magenta);
  border-radius: 2px;
  transition: width var(--glisse);
}
.temoignage:hover,
.temoignage:focus-within {
  transform: translateY(-4px) rotate(-0.7deg);
  box-shadow: 0 18px 18px -10px rgba(46, 38, 33, 0.24);
}
.temoignage:hover::before,
.temoignage:focus-within::before { width: 62%; }
.temoignage blockquote { margin: 0 0 16px; }
.temoignage blockquote p { max-width: 54ch; }
.temoignage figcaption {
  font-size: 0.92rem;
  color: var(--taupe);
  border-top: 1px solid var(--lin);
  padding-top: 12px;
}
.temoignage figcaption b { display: block; color: var(--encre); font-weight: 500; }

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

.trois-durees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}
.duree {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  padding: 30px 26px 28px;
  box-shadow: var(--ombre-basse);
  transition: transform var(--glisse), box-shadow var(--glisse);
  position: relative;
  height: 100%;
}
.duree:hover,
.duree:focus-within {
  transform: translateY(-4px) rotate(0.7deg);
  box-shadow: 0 18px 18px -10px rgba(46, 38, 33, 0.24);
}
.duree--avancee {
  margin-top: -20px;
  border-color: var(--sienne);
  border-width: 2px;
}
.duree--avancee:hover,
.duree--avancee:focus-within { transform: translateY(-4px) rotate(-0.7deg); }
.duree__libelle {
  font-family: var(--plume);
  font-size: 1.2rem;
  color: var(--magenta);
  display: block;
  margin-bottom: 4px;
}
.duree__prix {
  font-family: var(--titre);
  font-size: 2.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--encre);
  display: block;
}
.duree__unite { display: block; font-size: 0.95rem; color: var(--taupe); margin-bottom: 14px; }
.duree__filet {
  display: block;
  width: 40%;
  height: 8px;
  color: var(--sienne);
  margin-bottom: 16px;
}
.duree__filet svg { width: 100%; height: 8px; }
.duree__cible { font-size: 0.98rem; color: var(--taupe); }
.duree .liste-cochee { flex: 1; }
.duree .bouton-sienne,
.duree .bouton-lin { width: 100%; margin-top: 8px; }
.marqueur {
  position: absolute;
  top: -14px; right: 18px;
  background: var(--magenta);
  color: var(--sur-sienne);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 4px 4px 4px 14px;
}
.mention-tarif { font-size: 0.9rem; color: var(--taupe); margin-top: 28px; max-width: 74ch; }

/* ---------- FAQ ---------- */

.questionnaire { max-width: 860px; }
.question {
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) 20px;
  margin-bottom: 14px;
  overflow: hidden;
}
.question > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 54px 20px 24px;
  font-family: var(--titre);
  font-size: 1.12rem;
  font-weight: 500;
  position: relative;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--sienne);
  border-bottom: 2px solid var(--sienne);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 200ms ease;
}
.question[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.question[open] > summary { color: var(--sienne); }
.question__corps { padding: 0 24px 22px; }
.question__corps p { color: var(--taupe); margin-bottom: 0.7em; }
.question__corps p:last-child { margin-bottom: 0; }

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

.carnet-contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 46px;
  align-items: start;
}
.formulaire {
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  padding: 32px 30px;
  box-shadow: var(--ombre-basse);
}
.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-weight: 500;
  font-size: 0.98rem;
  margin-bottom: 6px;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--creme);
  border: 1.5px solid var(--lin);
  border-radius: 4px 4px 4px 14px;
  padding: 12px 14px;
  min-height: 48px;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--sienne); background: var(--blanc); }
.champ--aide { font-size: 0.875rem; color: var(--taupe); margin-top: 6px; }

.consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--taupe);
  margin-bottom: 20px;
}
.consentement input { margin-top: 5px; width: 20px; height: 20px; flex: none; accent-color: var(--sienne); }
.formulaire button { width: 100%; }
.apres-envoi { font-size: 0.9rem; color: var(--taupe); margin-top: 16px; }

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

.pied {
  position: relative;
  background: var(--poudre);
  padding: 72px 0 0;
  margin-top: 0;
}
.pied__onde {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  color: var(--sienne);
  opacity: 0.22;
  overflow: hidden;
}
.pied__onde svg { width: 100%; height: 34px; }
.colonnes-pied {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
}
.colonnes-pied h2 { font-size: 1.02rem; font-family: var(--titre); font-weight: 600; margin-bottom: 14px; }
.colonnes-pied ul { list-style: none; margin: 0; padding: 0; }
.colonnes-pied li { margin-bottom: 9px; }
.colonnes-pied a { color: var(--encre); text-decoration: none; font-size: 0.97rem; }
.colonnes-pied a:hover { color: var(--sienne); text-decoration: underline; }
.colonnes-pied p { font-size: 0.95rem; color: var(--taupe); }
.liens-profils { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.liens-profils a { font-size: 0.9rem; color: var(--sienne); text-decoration: underline; }
.coordonnees-editeur { font-size: 0.875rem; color: var(--taupe); line-height: 1.6; }

.barre-pied {
  margin-top: 48px;
  border-top: 1px solid var(--lin);
  padding: 20px 0 26px;
  font-size: 0.875rem;
  color: var(--taupe);
}
.barre-pied p { max-width: none; margin: 0; }

/* ---------- Pages internes ---------- */

.page-interne { padding: 132px 0 40px; }
.page-interne h1 { font-size: 2.5rem; }
.fil { font-size: 0.9rem; color: var(--taupe); margin-bottom: 18px; }
.fil a { color: var(--taupe); }

.texte-long { max-width: 72ch; }
.texte-long h2 { margin-top: 46px; font-size: 1.6rem; }
.texte-long h3 { margin-top: 30px; }
.texte-long ul { padding-left: 22px; color: var(--taupe); }
.texte-long li { margin-bottom: 8px; }
.texte-long table { border-collapse: collapse; width: 100%; margin: 20px 0 28px; font-size: 0.95rem; }
.texte-long th, .texte-long td { border: 1px solid var(--lin); padding: 10px 12px; text-align: left; vertical-align: top; }
.texte-long th { background: var(--poudre); font-weight: 500; }

.portrait-auteur {
  float: right;
  margin: 0 0 24px 32px;
  max-width: 260px;
}
.portrait-auteur img {
  border-radius: var(--coin) var(--coin) var(--coin) 30px;
  border: 1px solid var(--lin);
  padding: 3px;
  background: var(--blanc);
}
.portrait-auteur figcaption { font-size: 0.85rem; color: var(--taupe); margin-top: 8px; }

.encadre {
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-left: 3px solid var(--sienne);
  border-radius: var(--coin) var(--coin) var(--coin) 20px;
  padding: 24px 26px;
  margin: 30px 0;
}
.encadre p:last-child { margin-bottom: 0; }

.centre-page { text-align: center; max-width: 640px; margin: 0 auto; padding: 150px 0 90px; }
.centre-page p { margin-left: auto; margin-right: auto; }
.centre-page .duo-boutons { justify-content: center; }

.plan-liste { list-style: none; padding: 0; }
.plan-liste > li {
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) 20px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.plan-liste a { font-weight: 500; }
.plan-liste span { display: block; color: var(--taupe); font-size: 0.97rem; }

/* ---------- Apparition au defilement ---------- */

.a-lever { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
.a-lever.levee { opacity: 1; transform: none; }

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

@media (max-width: 1080px) {
  .chiffres ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonnes-pied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.72rem; }
  .rail-ancres { display: none; }
  .bandeau .bouton-sienne { display: none; }
  .trois-traits { display: block; }
  .mur { grid-template-columns: minmax(0, 1fr); }
  .brique-4, .brique-6, .brique-8 { grid-column: auto; }
  .decale-demi, .decale-tiers, .decale-court { margin-top: 0; }
  .pousse-3, .pousse-4, .pousse-7 { grid-column-start: auto; }
  .rails { grid-template-columns: minmax(0, 1fr); }
  .trois-durees { grid-template-columns: minmax(0, 1fr); }
  .duree--avancee { margin-top: 0; }
  .carnet-contact { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero { padding-top: 116px; }
  .hero__photo { margin-top: 28px; }
  .portrait-auteur { float: none; margin: 0 0 24px; max-width: 100%; }
  .feuillet { padding: 64px 0 60px; }
}

@media (max-width: 560px) {
  .chiffres ul { grid-template-columns: minmax(0, 1fr); }
  .colonnes-pied { grid-template-columns: minmax(0, 1fr); }
  .chiffres { padding: 32px 24px; }
  .fiche { padding: 24px 22px; }
}

@media print {
  .bandeau, .panneau-plein, .saut-contenu { display: none; }
  body { background: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .fiche:hover, .fiche:focus-within,
  .temoignage:hover, .temoignage:focus-within,
  .duree:hover, .duree:focus-within,
  .duree--avancee:hover, .duree--avancee:focus-within,
  .bouton-sienne:hover { transform: none; }
  .a-lever { opacity: 1; transform: none; transition: none; }
}
/* =========================================================
   MAGAZINE, La Meche temoin
   Section ajoutee a la fin de la feuille, aucune regle existante n est modifiee.
   Le magazine reprend les variables de couleur du site, ses trois polices,
   la forme signature du decrochement de brique (angle bas gauche a 26 pixels,
   filet de 2 pixels sur les 40 premiers pour cent du bord superieur), le motif
   d onde sonore et l inclinaison des cartes au survol.
   Vocabulaire de classes: magazine, mur-articles, carte-article, entete-article,
   corps-article, encart-auteur, lire-aussi, derniers-articles.
   ========================================================= */

/* ---------- Magazine, cadre general des pages ---------- */

.page-magazine { padding: 132px 0 40px; }

.magazine-entete { max-width: 780px; margin-bottom: 56px; }
.magazine-entete h1 { margin-bottom: 16px; }
.magazine-chapo {
  font-size: 1.2rem;
  color: var(--taupe);
  max-width: 62ch;
}
.magazine-sommaire {
  font-family: var(--plume);
  font-size: 1.2rem;
  color: var(--magenta);
  display: block;
  transform: rotate(-2deg) translateX(-4px);
  transform-origin: left center;
  margin-top: 6px;
}

/* ---------- Grille des cartes, briques decalees ---------- */

.mur-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px var(--gouttiere);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Une brique sur deux descend, ce qui inverse le decalage a chaque rangee
   et donne le rythme d un mur monte a joints croises. */
.mur-articles > *:nth-child(even) { margin-top: 38px; }

.mur-articles--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Carte d article ---------- */

.carte-article {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  box-shadow: var(--ombre-basse);
  overflow: hidden;
  transition: transform var(--glisse), box-shadow var(--glisse);
}
.carte-article::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 2px;
  background: var(--sienne);
  border-radius: 2px;
  z-index: 3;
  transition: width var(--glisse);
}
.carte-article:hover,
.carte-article:focus-within {
  transform: translateY(-4px) rotate(0.7deg);
  box-shadow: 0 18px 18px -10px rgba(46, 38, 33, 0.24);
}
.mur-articles > *:nth-child(even) .carte-article:hover,
.mur-articles > *:nth-child(even) .carte-article:focus-within,
.carte-article:nth-child(even):hover,
.carte-article:nth-child(even):focus-within {
  transform: translateY(-4px) rotate(-0.7deg);
}
.carte-article:hover::before,
.carte-article:focus-within::before { width: 62%; }

.carte-article__vue {
  display: block;
  position: relative;
  background: var(--poudre);
  overflow: hidden;
}
.carte-article__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}
.carte-article__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(148, 86, 46, 0.08), rgba(148, 86, 46, 0));
  pointer-events: none;
}

.carte-article__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px;
}
.carte-article__angle {
  font-family: var(--courant);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--magenta);
  display: block;
  margin-bottom: 8px;
}
.carte-article__titre {
  font-family: var(--titre);
  font-size: 1.28rem;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.carte-article__titre a {
  color: var(--encre);
  text-decoration: none;
}
.carte-article__titre a:hover { color: var(--sienne); }
.carte-article__extrait {
  font-size: 0.99rem;
  color: var(--taupe);
  max-width: 54ch;
  margin-bottom: 18px;
}
.carte-article__jalons {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lin);
  font-size: 0.875rem;
  color: var(--taupe);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.carte-article__jalons time { white-space: nowrap; }

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

.derniers-articles .mur-articles { margin-top: 44px; }
.derniers-articles__suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 46px;
}
.derniers-articles__suite p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--taupe);
  max-width: 52ch;
}

/* ---------- Entete d article ---------- */

/* Le conteneur d article aligne l entete, la photographie, le corps, l encart
   auteur et le bloc A lire aussi sur une meme marge gauche. */
.article-magazine { max-width: 1000px; }


.fil-magazine {
  font-size: 0.9rem;
  color: var(--taupe);
  margin-bottom: 18px;
}
.fil-magazine a { color: var(--taupe); }
.fil-magazine a:hover { color: var(--sienne); }
.fil-magazine span[aria-current] { color: var(--encre); }

.entete-article { max-width: 800px; margin-bottom: 34px; }
.entete-article h1 { font-size: 2.7rem; margin-bottom: 18px; }
.entete-article .griffonnage { text-transform: lowercase; }

.jalons-article {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 26px;
  padding: 0;
  max-width: none;
  font-size: 0.92rem;
  color: var(--taupe);
  font-variant-numeric: tabular-nums;
}
.jalons-article > * { display: inline-block; }
.jalons-article > * + *::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--lin);
  vertical-align: middle;
}

.chapo-article {
  position: relative;
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--encre);
  background: var(--poudre);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  padding: 24px 28px;
  max-width: 68ch;
  margin: 0;
}
.chapo-article::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 40%;
  height: 2px;
  background: var(--magenta);
  border-radius: 2px;
}

.photo-article {
  max-width: 1000px;
  margin: 34px 0 44px;
}

/* ---------- Corps d article, balises nues ---------- */
/* Le corps redactionnel ne porte aucun attribut class: chaque balise est mise
   en forme ici en tant que descendante du conteneur, avec la forme signature. */

.corps-article {
  max-width: 720px;
  font-size: 1.075rem;
  line-height: 1.72;
  color: var(--encre);
}

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

.corps-article h2 {
  position: relative;
  font-family: var(--titre);
  font-size: 2.05rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--encre);
  margin: 2.1em 0 0.55em;
  padding-top: 18px;
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  max-width: 200px;
  height: 2px;
  background: var(--sienne);
  border-radius: 2px;
}
.corps-article > h2:first-child { margin-top: 0; }

.corps-article h3 {
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--magenta);
  margin: 1.9em 0 0.5em;
}

.corps-article ul,
.corps-article ol {
  max-width: 64ch;
  margin: 0 0 1.4em;
  padding-left: 0;
}
.corps-article ul { list-style: none; }
.corps-article ol {
  list-style: none;
  counter-reset: pas-article;
}
.corps-article li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 11px;
  color: var(--taupe);
}
.corps-article li strong { color: var(--encre); }
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--sienne);
  border-bottom: 2px solid var(--sienne);
  transform: rotate(-45deg);
}
.corps-article ol > li {
  counter-increment: pas-article;
}
.corps-article ol > li::before {
  content: counter(pas-article);
  position: absolute;
  left: 0; top: 3px;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titre);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sur-sienne);
  background: var(--sienne);
  border-radius: 4px 4px 4px 9px;
}
.corps-article li > ul,
.corps-article li > ol { margin: 10px 0 4px; }

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

.corps-article a {
  color: var(--sienne);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--glisse), background-color var(--glisse);
}
.corps-article a:hover {
  color: #7C4726;
  background: var(--poudre);
}

/* Tableau recapitulatif */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0 2em;
  font-size: 0.97rem;
  font-variant-numeric: tabular-nums;
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) 20px;
  overflow: hidden;
}
.corps-article thead { background: var(--poudre); }
.corps-article th {
  font-family: var(--titre);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--encre);
  text-align: left;
  vertical-align: bottom;
  padding: 13px 16px;
  border-bottom: 2px solid var(--sienne);
}
.corps-article tbody th {
  border-bottom: 1px solid var(--lin);
  background: transparent;
  font-weight: 500;
}
.corps-article td {
  padding: 12px 16px;
  vertical-align: top;
  color: var(--taupe);
  border-bottom: 1px solid var(--lin);
}
.corps-article tbody tr:last-child th,
.corps-article tbody tr:last-child td { border-bottom: 0; }
.corps-article tbody tr:nth-child(even) { background: rgba(246, 234, 230, 0.45); }
.corps-article table p { margin: 0; max-width: none; }

/* Encadre */
.corps-article aside {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-left: 3px solid var(--sienne);
  border-radius: var(--coin) var(--coin) var(--coin) 20px;
  padding: 24px 26px;
  margin: 1.9em 0;
  box-shadow: var(--ombre-basse);
}
.corps-article aside p { color: var(--taupe); max-width: 60ch; }
.corps-article aside p:last-child { margin-bottom: 0; }
.corps-article aside ul,
.corps-article aside ol { margin-bottom: 0; }

/* Citation */
.corps-article blockquote {
  position: relative;
  margin: 1.9em 0;
  padding: 6px 0 6px 28px;
  border-left: 2px solid var(--magenta);
  font-family: var(--plume);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--magenta);
}
.corps-article blockquote p {
  max-width: 52ch;
  margin-bottom: 0.45em;
  color: inherit;
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

/* Figure eventuelle */
.corps-article figure {
  margin: 1.9em 0;
  padding: 3px;
  background: var(--sur-sienne);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) 30px;
}
.corps-article figure img { border-radius: 3px 3px 3px 27px; }
.corps-article figcaption {
  font-size: 0.875rem;
  color: var(--taupe);
  padding: 12px 12px 6px;
}

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

.appel-article {
  position: relative;
  overflow: hidden;
  background: var(--sienne);
  color: var(--sur-sienne);
  border-radius: var(--coin) var(--coin) var(--coin) 40px;
  padding: 38px 36px;
  margin: 52px 0 0;
  max-width: 900px;
}
.appel-article__titre {
  position: relative;
  z-index: 2;
  font-family: var(--titre);
  font-size: 1.72rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--sur-sienne);
  margin: 0 0 0.5em;
  max-width: 24ch;
}
.appel-article p {
  position: relative;
  z-index: 2;
  color: var(--sur-sienne);
  max-width: 60ch;
  margin-bottom: 1em;
}
.appel-article .griffonnage { color: var(--sur-sienne); position: relative; z-index: 2; }
.appel-article .bouton-lin {
  position: relative;
  z-index: 2;
  color: var(--sur-sienne);
  border-color: rgba(255, 249, 245, 0.6);
}
.appel-article .bouton-lin:hover {
  background: var(--sur-sienne);
  border-color: var(--sur-sienne);
  color: var(--sienne);
}

/* ---------- Intitules de colonnes du pied de page des articles ---------- */
/* Une page d article ne porte aucun h2 hors du corps redactionnel: les intitules
   de colonnes du pied de page reprennent donc l apparence de .colonnes-pied h2
   sur une balise de paragraphe, sans rien changer aux autres pages du site. */

.colonnes-pied .rubrique-pied {
  font-family: var(--titre);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--encre);
  margin: 0 0 14px;
  max-width: none;
}

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

.encart-auteur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  padding: 28px 30px;
  margin: 40px 0 0;
  max-width: 900px;
  position: relative;
  box-shadow: var(--ombre-basse);
}
.encart-auteur::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 40%;
  height: 2px;
  background: var(--magenta);
  border-radius: 2px;
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  border-radius: 6px 6px 6px 22px;
  border: 1px solid var(--lin);
  padding: 3px;
  background: var(--sur-sienne);
  object-fit: cover;
}
.encart-auteur__nom {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--encre);
  margin: 0 0 4px;
}
.encart-auteur__role {
  font-family: var(--plume);
  font-size: 1.15rem;
  color: var(--magenta);
  display: block;
  margin-bottom: 10px;
}
.encart-auteur p {
  font-size: 0.99rem;
  color: var(--taupe);
  max-width: 62ch;
  margin-bottom: 0.7em;
}
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi {
  margin: 58px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--lin);
}
.lire-aussi__titre {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--encre);
  margin: 0 0 6px;
  max-width: none;
}
.lire-aussi__filet {
  display: block;
  width: 40%;
  max-width: 200px;
  height: 8px;
  margin-bottom: 26px;
  color: var(--sienne);
  overflow: hidden;
}
.lire-aussi__filet svg { width: 100%; height: 8px; display: block; }

.mur-aussi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}
.mur-aussi > *:nth-child(2) { margin-top: 26px; }

.carte-aussi {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--blanc);
  border: 1px solid var(--lin);
  border-radius: var(--coin) var(--coin) var(--coin) var(--decroche);
  box-shadow: var(--ombre-basse);
  overflow: hidden;
  transition: transform var(--glisse), box-shadow var(--glisse);
}
.carte-aussi::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 2px;
  background: var(--sienne);
  border-radius: 2px;
  z-index: 3;
  transition: width var(--glisse);
}
.carte-aussi:hover,
.carte-aussi:focus-within {
  transform: translateY(-4px) rotate(0.7deg);
  box-shadow: 0 18px 18px -10px rgba(46, 38, 33, 0.24);
}
.mur-aussi > .carte-aussi:nth-child(even):hover,
.mur-aussi > .carte-aussi:nth-child(even):focus-within {
  transform: translateY(-4px) rotate(-0.7deg);
}
.carte-aussi:hover::before,
.carte-aussi:focus-within::before { width: 62%; }
.carte-aussi__vue { display: block; background: var(--poudre); }
.carte-aussi__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}
.carte-aussi__titre {
  font-family: var(--titre);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 20px 22px 8px;
  max-width: none;
}
.carte-aussi__titre a { color: var(--encre); text-decoration: none; }
.carte-aussi__titre a:hover { color: var(--sienne); }
.carte-aussi__accroche {
  font-size: 0.93rem;
  color: var(--taupe);
  margin: 0 22px 22px;
  max-width: none;
}

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

@media (max-width: 1080px) {
  .mur-articles,
  .mur-articles--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mur-articles > *:nth-child(even) { margin-top: 0; }
  .mur-articles > *:nth-child(4n+2),
  .mur-articles > *:nth-child(4n+3) { margin-top: 34px; }
  .mur-aussi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .page-magazine { padding-top: 116px; }
  .entete-article h1 { font-size: 2.15rem; }
  .corps-article h2 { font-size: 1.72rem; }
  .mur-aussi { grid-template-columns: minmax(0, 1fr); }
  .mur-aussi > *:nth-child(2) { margin-top: 0; }
  .encart-auteur { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .appel-article { padding: 30px 26px; }
}

@media (max-width: 700px) {
  .mur-articles,
  .mur-articles--trois { grid-template-columns: minmax(0, 1fr); }
  .mur-articles > *:nth-child(even),
  .mur-articles > *:nth-child(4n+2),
  .mur-articles > *:nth-child(4n+3) { margin-top: 0; }
  .chapo-article { padding: 20px 22px; font-size: 1.1rem; }
  .corps-article table { display: block; overflow-x: auto; }
  .carte-article__corps { padding: 22px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-article:hover, .carte-article:focus-within,
  .carte-article:nth-child(even):hover, .carte-article:nth-child(even):focus-within,
  .mur-articles > *:nth-child(even) .carte-article:hover,
  .mur-articles > *:nth-child(even) .carte-article:focus-within,
  .carte-aussi:hover, .carte-aussi:focus-within,
  .mur-aussi > .carte-aussi:nth-child(even):hover,
  .mur-aussi > .carte-aussi:nth-child(even):focus-within { transform: none; }
}

@media print {
  .lire-aussi, .appel-article { display: none; }
  .corps-article { max-width: none; }
}

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