@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('medias/polices/fraunces-latin-full-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('medias/polices/jost-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('medias/polices/jost-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('medias/polices/jost-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ==========================================================================
   Chrystelle Da Costa — Accompagnement holistique
   Charte : terracotta et sable, tracés à l'encre
   ========================================================================== */

:root {
  /* Ground & surfaces (warm greige, pink bias, from her card stock) */
  --sable:        #F4ECE5;
  --sable-clair:  #FBF6F2;
  --sable-fonce:  #E8DBCF;
  /* Brand */
  --terre:        #9A5340;
  --terre-claire: #C4826C;
  --terre-pale:   #E4C7B9;
  /* Ink */
  --encre:        #2E2320;
  --encre-douce:  #6B5A53;
  --trait:        #D9C8BB;

  --focus:        #9A5340;

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --mesure: 34rem;
  --marge: clamp(1.25rem, 5vw, 4rem);

  --pas-1: .5rem;
  --pas-2: 1rem;
  --pas-3: 1.75rem;
  --pas-4: 3rem;
  --pas-5: 5rem;
  --pas-6: 7.5rem;

  /* Le site assume un seul univers visuel, celui de sa charte : pas de thème sombre. */
  color-scheme: light;
}

html { background: var(--sable); }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--terre-pale); color: var(--encre); }

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

/* --------------------------------------------------------------- Type ---- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40;
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.28; }
h4 { font-size: 1.05rem; line-height: 1.4; }

p { margin: 0; max-width: var(--mesure); }

a { color: inherit; }

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0;
}

.lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: 36rem;
}

.fine { font-size: .82rem; line-height: 1.6; color: var(--encre-douce); }

/* Signature device: a single ink stroke that opens each section */
.trait {
  width: 4.5rem; height: 1px; border: 0;
  background: linear-gradient(90deg, var(--terre), transparent);
  margin: 0;
}

/* ------------------------------------------------------------ Gabarit ---- */

.enveloppe {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--marge);
}

.etroit { max-width: 50rem; }

section { padding-block: clamp(3.5rem, 8vw, var(--pas-6)); }
section.serre { padding-block: clamp(2.5rem, 5vw, var(--pas-5)); }

.pile { display: flex; flex-direction: column; }
.pile-1 { gap: var(--pas-1); }
.pile-2 { gap: var(--pas-2); }
.pile-3 { gap: var(--pas-3); }
.pile-4 { gap: var(--pas-4); }

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1fr 1fr; align-items: center; }
  .duo.decale { grid-template-columns: 1.15fr .85fr; }
  .duo.decale-inverse { grid-template-columns: .85fr 1.15fr; }
}

.bande { background: var(--sable-clair); border-block: 1px solid var(--trait); }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .82rem 1.6rem;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--terre);
  background: var(--terre);
  color: var(--sable-clair);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover { background: transparent; color: var(--terre); }
.btn:active { transform: translateY(1px); }

.btn.creux { background: transparent; color: var(--terre); }
.btn.creux:hover { background: var(--terre); color: var(--sable-clair); }

.btn.nu {
  border: 0; background: none; color: var(--terre);
  padding-inline: 0; padding-block: .35rem;
  border-bottom: 1px solid var(--terre-pale);
}
.btn.nu:hover { background: none; color: var(--encre); border-bottom-color: var(--terre); }

.boutons { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* Un bouton garde ses couleurs même placé dans un bloc de texte, où la règle
   .prose a l'emporterait autrement sur .btn et le rendrait illisible. */
.prose .btn { color: var(--sable-clair); }
.prose .btn:hover { color: var(--terre); }
.prose .btn.creux, .prose .btn.nu { color: var(--terre); }
.prose .btn.creux:hover { color: var(--sable-clair); }
.prose .btn.nu:hover { color: var(--encre); }

/* ------------------------------------------------------------- Entête ---- */

.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--sable) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete .enveloppe { max-width: 78rem; }
.entete-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}
/* Le logo porte déjà la baseline : inutile de la répéter dans l'en-tête. */
.entete .marque-sous { display: none; }
.entete .marque-nom { font-size: 1.06rem; white-space: nowrap; }
.nav .btn { color: var(--sable-clair); border-bottom-color: var(--terre); }
.nav .btn:hover { color: var(--terre); }
.nav .entete-cta { margin-left: .45rem; }

.marque { display: flex; align-items: center; gap: .75rem; text-decoration: none; }

/* Preuve sociale : la note Resalib, visible dès le premier écran. */
.pastille {
  margin-right: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .72rem;
  border: 1px solid var(--terre-pale);
  border-radius: 999px;
  background: var(--sable-clair);
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--encre-douce);
  transition: border-color .2s ease, background .2s ease;
}
.pastille:hover { border-color: var(--terre); background: var(--sable); }
.pastille-etoiles { color: var(--terre); font-size: .66rem; letter-spacing: .05em; }
.pastille strong { color: var(--encre); font-weight: 400; }

.lecteur {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.marque img { width: 46px; height: auto; flex: none; }
.pied-marque { display: inline-block; margin-bottom: 1rem; }
.pied-marque img { width: 128px; }

.marque-nom {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 20;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.marque-sous {
  display: block;
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: .18rem;
}

.nav { display: flex; align-items: center; gap: 1.15rem; }
.nav a {
  font-size: .82rem;
  white-space: nowrap;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--encre-douce);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { color: var(--encre); }
.nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--terre); }

.entete .btn { padding: .62rem 1.05rem; font-size: .72rem; white-space: nowrap; }

.burger {
  display: none;
  background: none; border: 1px solid var(--trait); color: var(--encre);
  width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center;
  cursor: pointer;
}
.burger svg { width: 18px; height: 18px; }

@media (max-width: 74.99rem) {
  .burger { display: inline-flex; order: 2; margin-left: auto; }
  .entete-inner { flex-wrap: wrap; row-gap: .55rem; padding-block: .7rem; min-height: 0; }
  .marque { order: 1; }
  .pastille { order: 3; margin-right: 0; }
  .nav { order: 4; }
  .entete .nav { display: none; }
  .entete[data-ouvert="true"] .nav {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .2rem;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--sable-clair);
    border-bottom: 1px solid var(--trait);
    padding: var(--pas-2) var(--marge) var(--pas-4);
  }
  .entete[data-ouvert="true"] .nav a { font-size: 1rem; padding-block: .55rem; }
  .entete .marque-sous { display: block; }
  .entete[data-ouvert="true"] .entete-cta { margin-top: .9rem; }
  .entete[data-ouvert="true"] { position: sticky; }
}

/* --------------------------------------------------------------- Héros ---- */

.heros { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem); }
.heros h1 { margin-block: .9rem 1.4rem; }
.heros .lead { margin-bottom: .6rem; }
.heros .boutons { margin-top: 1.6rem; }

.citation-heros {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 60;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  line-height: 1.5;
  color: var(--terre);
  max-width: 24rem;
}

.cadre-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sable-fonce);
  border: 1px solid var(--trait);
  display: grid; place-items: center;
  overflow: hidden;
}
.cadre-photo { margin: 0; }
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; }
.cadre-photo.large { aspect-ratio: 3 / 2; }
.cadre-photo.paysage { aspect-ratio: 4 / 3; }

.embleme { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.embleme img { width: min(100%, 22rem); opacity: .9; }

/* --------------------------------------------------------------- Repères -- */

.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--pas-3) var(--pas-4);
}
.repere { display: flex; flex-direction: column; gap: .3rem; }
.repere .valeur {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 30;
  color: var(--terre);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.repere .quoi { font-size: .84rem; color: var(--encre-douce); line-height: 1.45; }

/* --------------------------------------------------------- Liste motifs --- */

.motifs { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.motifs li {
  font-size: .86rem;
  padding: .42rem .95rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--encre-douce);
  background: var(--sable-clair);
}

/* ------------------------------------------------------------ Approches --- */

.approches { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
@media (min-width: 52rem) { .approches { grid-template-columns: repeat(3, 1fr); } }

.approche {
  background: var(--sable-clair);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: .85rem;
  text-decoration: none;
  transition: background .25s ease;
}
.approche:hover { background: var(--sable); }
.approche svg { width: 34px; height: 34px; color: var(--terre); }
.approche h3 { margin-top: .2rem; }
.approche p { font-size: .95rem; color: var(--encre-douce); }
.approche .fleche {
  margin-top: auto; padding-top: .6rem;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terre);
}

/* ---------------------------------------------------------------- Temps --- */

.temps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.temps li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 1.4rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--trait);
  counter-increment: t;
}
.temps li:last-child { border-bottom: 1px solid var(--trait); }
.temps li::before {
  content: counter(t, decimal-leading-zero);
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .12em;
  color: var(--terre);
  padding-top: .35rem;
  font-variant-numeric: tabular-nums;
}
.temps h4 { margin-bottom: .3rem; font-family: var(--sans); font-weight: 400; font-size: 1rem; letter-spacing: .01em; }
.temps p { font-size: .93rem; color: var(--encre-douce); }

/* ---------------------------------------------------------------- Avis ---- */

.avis-grille { display: grid; gap: var(--pas-3); }
@media (min-width: 52rem) { .avis-grille { grid-template-columns: repeat(3, 1fr); } }

.avis { display: flex; flex-direction: column; gap: .8rem; padding-top: 1.2rem; border-top: 2px solid var(--terre-pale); }
.avis blockquote {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 20;
  font-size: 1.08rem;
  line-height: 1.5;
}
.avis figcaption { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); }
.etoiles { color: var(--terre); font-size: .8rem; letter-spacing: .18em; }

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

.tarifs { display: grid; gap: 0; }
.tarif {
  display: grid;
  gap: .35rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--trait);
  align-items: baseline;
}
.tarif:last-child { border-bottom: 1px solid var(--trait); }
@media (min-width: 46rem) {
  .tarif { grid-template-columns: 1fr auto; }
  .tarif .detail { grid-column: 1; }
  .tarif .prix { grid-row: 1; grid-column: 2; text-align: right; }
}
.tarif h3 { font-family: var(--sans); font-weight: 400; font-size: 1.08rem; letter-spacing: .005em; }
.tarif .detail { font-size: .92rem; color: var(--encre-douce); max-width: 34rem; }
.tarif .prix {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 30;
  color: var(--terre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tarif .duree { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }

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

.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none;
  padding-block: 1.25rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--terre); font-size: 1.2rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding-bottom: 1.4rem; font-size: .95rem; color: var(--encre-douce); }

/* ------------------------------------------------------------- Contact ---- */

.coordonnees { display: grid; gap: var(--pas-3); }
@media (min-width: 46rem) { .coordonnees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.coordonnee { display: flex; flex-direction: column; gap: .25rem; }
.coordonnee .quoi { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-douce); }
.coordonnee a, .coordonnee span { font-size: 1.05rem; text-decoration: none; color: var(--encre); }
.coordonnee a:hover { color: var(--terre); }

.rappel {
  border: 1px solid var(--terre-pale);
  background: var(--sable-clair);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: .8rem;
}

.horaires { list-style: none; margin: 0; padding: 0; max-width: 22rem; }
.horaires li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: .58rem;
  border-bottom: 1px solid var(--trait);
  font-size: .95rem;
}
.horaires li:first-child { border-top: 1px solid var(--trait); }
.horaires li span:last-child { color: var(--terre); font-variant-numeric: tabular-nums; }
.horaires .ferme { color: var(--encre-douce); }
.horaires .ferme span:last-child { color: var(--encre-douce); font-size: .86rem; }

/* ----------------------------------------------------------------- CTA ---- */

.cta-final { background: var(--terre); color: var(--sable-clair); }
.cta-final h2, .cta-final p { color: inherit; }
.cta-final .eyebrow { color: color-mix(in srgb, var(--sable-clair) 75%, transparent); }
.cta-final .trait { background: linear-gradient(90deg, var(--sable-clair), transparent); }
.cta-final .btn {
  background: var(--sable-clair); color: var(--terre); border-color: var(--sable-clair);
}
.cta-final .btn:hover { background: transparent; color: var(--sable-clair); }
.cta-final .btn.creux { background: transparent; color: var(--sable-clair); border-color: color-mix(in srgb, var(--sable-clair) 55%, transparent); }
.cta-final .btn.creux:hover { background: var(--sable-clair); color: var(--terre); }

/* Utilitaires d'espacement, en remplacement des styles en ligne : la politique
   de sécurité du site interdit tout style inline. */
.haut-4  { margin-top: .4rem; }
.haut-6  { margin-top: .6rem; }
.haut-10 { margin-top: 1rem; }
.etroit-22 { max-width: 22rem; }
.pied-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.cta-final .cta-texte { color: inherit; opacity: .85; }

/* --------------------------------------------------------------- Prose ---- */

.prose { display: flex; flex-direction: column; gap: 1.2rem; max-width: 40rem; }
.prose h2 { margin-top: 1.6rem; }
.prose h3 { margin-top: 1rem; }
.prose ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .5rem; max-width: var(--mesure); }
.prose li::marker { color: var(--terre); }
.prose a { color: var(--terre); }


/* ---------------------------------------------------------------- Blog ---- */

.cartes { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
@media (min-width: 52rem) {
  .cartes { grid-template-columns: repeat(3, 1fr); }
  .cartes.deux { grid-template-columns: repeat(2, 1fr); }
}

.carte {
  background: var(--sable-clair);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none;
  transition: background .25s ease;
}
.carte:hover { background: var(--sable); }
.carte-meta {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-douce);
}
.carte h3 { font-size: 1.22rem; line-height: 1.22; }
.carte-chapo { font-size: .93rem; color: var(--encre-douce); }
.carte .fleche {
  margin-top: auto; padding-top: .8rem;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terre);
}

/* Un titre d'article est long : plus mesuré que celui d'une page, il évite
   les césures sur les mots composés comme art-thérapie. */
.entete-article { padding-bottom: clamp(1.2rem, 2vw, 2rem); }
.entete-article h1 {
  font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.9rem);
  line-height: 1.12;
}

/* Corps d'article : mesure plus étroite et respiration plus grande que la prose courante. */
.prose.article { max-width: 38rem; gap: 1.35rem; }
.prose.article .intro {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.22rem);
  line-height: 1.6;
  color: var(--encre);
}
.prose.article h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  margin-top: 1.4rem;
}
.prose.article ul { gap: .6rem; }
.prose.article li { max-width: none; }

/* -------------------------------------------------------------- Alerte ---- */

.avertissement {
  border-left: 2px solid var(--terre);
  padding: .9rem 0 .9rem 1.2rem;
  font-size: .88rem;
  color: var(--encre-douce);
  max-width: 40rem;
}

/* -------------------------------------------------------------- Footer ---- */

.pied { background: var(--sable-clair); border-top: 1px solid var(--trait); padding-block: var(--pas-5) var(--pas-3); }
.pied-grille { display: grid; gap: var(--pas-4); }
@media (min-width: 52rem) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied h4 { font-family: var(--sans); font-weight: 400; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pied a { font-size: .92rem; text-decoration: none; color: var(--encre-douce); }
.pied a:hover { color: var(--terre); }
.pied-bas {
  margin-top: var(--pas-4); padding-top: var(--pas-2);
  border-top: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .76rem; color: var(--encre-douce);
}
.pied-bas a { font-size: .76rem; }

/* ------------------------------------------------------------ Révélation -- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--terre); color: var(--sable-clair); padding: .7rem 1.2rem; z-index: 100;
}
.saut-contenu:focus { left: var(--marge); top: .6rem; position: fixed; }