/* ============================================================
   La Truffe Éduquée — identité « encre & papier »
   Dérivée du logo dessiné à l'encre : papier chaud, noir d'encre,
   accent rouille. Typographie : Fraunces (titres) + Karla (texte),
   auto-hébergées — aucune ressource externe.
   ============================================================ */

/* ---------- Polices ---------- */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/fraunces-v38-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/fraunces-v38-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/fraunces-v38-latin-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/fraunces-v38-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/karla-v33-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/karla-v33-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/karla-v33-latin-italic.woff2') format('woff2');
}

/* ---------- Jetons ---------- */
:root {
  --papier: #f4eee1;        /* fond général, papier chaud */
  --papier-clair: #fbf8f0;  /* cartes */
  --papier-ombre: #e7ddc8;  /* filets, séparations */
  --encre: #211d16;         /* noir d'encre */
  --encre-douce: #57503f;   /* texte secondaire */
  --rouille: #b5501d;       /* accent — la « truffe » */
  --rouille-sombre: #8f3c12;
  --brun: #3a2c1f;          /* brun café profond, secondaire */
  --rayon: 4px;
  --trait: 2px solid var(--encre);
  --ombre-dure: 4px 4px 0 rgba(33, 29, 22, .9);
  --ombre-carte: 3px 3px 0 rgba(33, 29, 22, .16);
  --titres: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texte: 'Karla', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; } /* les ancres ne se cachent pas sous l'en-tête collant */
:focus-visible { outline: 3px solid var(--rouille); outline-offset: 2px; border-radius: 2px; }
body {
  margin: 0;
  font-family: var(--texte);
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rouille); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--rouille-sombre); }
h1, h2, h3 { font-family: var(--titres); color: var(--encre); line-height: 1.12; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); font-weight: 900; letter-spacing: -.01em; margin: 0 0 .5em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); font-weight: 700; margin: 0 0 .8em; }
h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .5em; }
.conteneur { width: min(1120px, 92%); margin-inline: auto; }
.liste-nue { list-style: none; margin: 0; padding: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--encre);
  color: var(--papier); padding: .6em 1em; z-index: 100;
}
.skip-link:focus { left: 0; color: var(--papier); }

/* ---------- Boutons : tampon d'imprimerie ---------- */
.btn {
  display: inline-block; background: var(--rouille); color: var(--papier-clair);
  padding: .7em 1.4em; border-radius: var(--rayon); text-decoration: none;
  font-weight: 700; font-family: var(--texte); font-size: 1rem;
  border: var(--trait); box-shadow: var(--ombre-dure);
  transition: transform .12s, box-shadow .12s; cursor: pointer;
}
.btn:hover {
  background: var(--rouille-sombre); color: var(--papier-clair);
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(33,29,22,.9);
}
.btn-contour { background: var(--papier-clair); color: var(--encre); }
.btn-contour:hover { background: var(--papier-ombre); color: var(--encre); }
.btn-clair { background: var(--papier); color: var(--encre); border-color: var(--papier); box-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.btn-clair:hover { background: var(--papier-clair); border-color: var(--papier-clair); color: var(--encre); box-shadow: 1px 1px 0 rgba(0,0,0,.45); }

/* ---------- En-tête : cartouche éditorial ---------- */
.site-header {
  background: var(--papier);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 3px double var(--encre);
}
.barre-nav { display: flex; align-items: center; gap: 1rem; padding: .5rem 0; }
.marque { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.marque img { border-radius: 50%; border: 2px solid var(--encre); background: #fff; }
.marque-nom { font-family: var(--titres); font-weight: 900; font-size: 1.2rem; color: var(--encre); letter-spacing: -.01em; white-space: nowrap; }
.nav-principale ul { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
.nav-principale a {
  text-decoration: none; color: var(--encre); font-weight: 700; font-size: .93rem;
  padding: .45em .55em; display: block; border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav-principale a:hover { color: var(--rouille); border-bottom-color: var(--papier-ombre); }
.nav-principale a[aria-current="page"] { color: var(--rouille); border-bottom-color: var(--rouille); }
.btn-nav {
  background: var(--rouille); color: var(--papier-clair) !important;
  border: 2px solid var(--encre); border-radius: var(--rayon);
  margin-left: .5rem; padding: .45em 1.1em !important; box-shadow: 3px 3px 0 rgba(33,29,22,.9);
}
.btn-nav:hover, .btn-nav.actif { background: var(--rouille-sombre) !important; border-bottom-color: var(--encre) !important; }
.nav-burger { display: none; }

/* ---------- Recherche ---------- */
.libelle-recherche { display: none; }
@media (max-width: 1100px) { .libelle-recherche { display: inline; } }
.form-recherche { display: flex; align-items: center; margin-left: .35rem; }
.form-recherche input {
  width: 6.5rem; padding: .35em .6em; border: 1.5px solid var(--encre);
  border-radius: var(--rayon) 0 0 var(--rayon); font: inherit; font-size: .85rem;
  background: var(--papier-clair); transition: width .2s;
}
.form-recherche input:focus { width: 10rem; outline: none; border-color: var(--rouille); }
.form-recherche button {
  border: 1.5px solid var(--encre); border-left: none; background: var(--papier-clair);
  border-radius: 0 var(--rayon) var(--rayon) 0; padding: .3em .55em; cursor: pointer; font-size: .88rem;
}
.form-recherche button:hover { background: var(--papier-ombre); }
.form-recherche-page { display: flex; gap: .6rem; max-width: 480px; margin-top: 1rem; }
.form-recherche-page input {
  flex: 1; padding: .65em .9em; border: 1.5px solid var(--encre); border-radius: var(--rayon);
  font: inherit; background: #fff;
}
.form-recherche-page input:focus { outline: 3px solid rgba(181,80,29,.35); border-color: var(--rouille); }
.resultat-recherche { border-bottom: 1px dashed var(--papier-ombre); padding: 1rem 0; }
.resultat-recherche h2 { font-size: 1.15rem; margin-bottom: .2em; }
.resultat-recherche p { margin: 0; color: var(--encre-douce); font-size: .95rem; }

/* ---------- Héros ---------- */
.heros {
  padding: 3.8rem 0 3.2rem;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(181, 80, 29, .07), transparent 45%),
    var(--papier);
  border-bottom: 1px solid var(--papier-ombre);
}
.heros-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center; }
.heros p.accroche { font-size: 1.22rem; color: var(--encre-douce); max-width: 34em; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.7rem; }
.heros-photo { position: relative; }
.heros-photo img {
  border: var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre-dure);
  aspect-ratio: 4/5; object-fit: cover; width: 100%;
}
.heros-legende {
  font-family: var(--titres); font-style: italic; font-size: .98rem;
  color: var(--encre-douce); margin: .8rem .2rem 0; text-align: center;
}
.surtitre {
  display: inline-block; font-family: var(--texte); font-weight: 700;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rouille); margin-bottom: 1.1rem; padding-bottom: .35rem;
  border-bottom: 2px solid var(--rouille);
}
.badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; padding: 0; list-style: none; }
.badges li {
  background: var(--papier-clair); border: 1.5px solid var(--encre); border-radius: var(--rayon);
  padding: .3em .9em; font-size: .92rem; font-weight: 700; box-shadow: 2px 2px 0 rgba(33,29,22,.14);
}

/* ---------- Sections ---------- */
.section { padding: 3.6rem 0; }
.section-alt { background: var(--papier-clair); border-block: 1px solid var(--papier-ombre); }
.section-verte { background: var(--brun); color: #eae2d5; }
.section-verte h2, .section-verte h3 { color: #f6f3e8; }
.section-intro { max-width: 46em; color: var(--encre-douce); margin-bottom: 2rem; font-size: 1.1rem; }
.section-verte .section-intro { color: #cfc2b0; }

/* ---------- Cartes services ---------- */
.grille-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.carte-service {
  background: var(--papier-clair); border: var(--trait); border-radius: var(--rayon);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--ombre-dure);
}
.carte-service img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-bottom: var(--trait); }
.carte-corps { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.carte-corps h3 a { color: var(--encre); text-decoration: none; }
.carte-corps h3 a:hover { color: var(--rouille); }
.carte-corps p { color: var(--encre-douce); font-size: .97rem; flex: 1; }
.prix { font-family: var(--titres); font-size: 1.5rem; font-weight: 900; color: var(--rouille); }
.prix small { font-family: var(--texte); font-size: .74rem; font-weight: 700; color: var(--encre-douce); display: block; letter-spacing: .04em; text-transform: uppercase; }
.carte-corps .btn { align-self: flex-start; margin-top: 1rem; padding: .5em 1.1em; font-size: .93rem; box-shadow: 3px 3px 0 rgba(33,29,22,.9); }

/* ---------- Étapes / méthode ---------- */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; counter-reset: etape; }
.etape {
  background: var(--papier-clair); border: 1.5px solid var(--encre); border-radius: var(--rayon);
  padding: 1.5rem; position: relative; counter-increment: etape; box-shadow: var(--ombre-carte);
}
.etape::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--titres); font-weight: 900; font-size: 2rem;
  color: var(--rouille); display: block; margin-bottom: .3rem; line-height: 1;
}
.section-verte .etape { background: rgba(246,240,228,.06); border-color: rgba(246,240,228,.35); color: #e6ddce; box-shadow: none; }
.section-verte .etape::before { color: #e89a63; }

.mots-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.2rem; margin-top: 1.8rem; }
.mot-cle {
  font-family: var(--titres); font-style: italic; font-weight: 400;
  font-size: 1.6rem; text-align: center; padding: .6rem .4rem;
  color: inherit;
  text-decoration: underline wavy var(--rouille) 2px; text-underline-offset: 8px;
}
.section-verte .mot-cle { text-decoration-color: #e89a63; }

/* ---------- Tableaux ---------- */
.table-defilante { overflow-x: auto; }
table.tarifs {
  width: 100%; border-collapse: collapse; background: var(--papier-clair);
  border: var(--trait); box-shadow: var(--ombre-dure);
}
table.tarifs th, table.tarifs td { padding: .9rem 1.2rem; text-align: left; border-bottom: 1px solid var(--papier-ombre); }
table.tarifs th { background: var(--encre); color: var(--papier); font-family: var(--texte); letter-spacing: .05em; text-transform: uppercase; font-size: .88rem; }
table.tarifs tr:last-child td { border-bottom: none; }
table.tarifs td.montant { font-family: var(--titres); font-weight: 900; color: var(--rouille); white-space: nowrap; }

/* ---------- Fiches prestation ---------- */
.fiche { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.5rem; align-items: center; padding: 2.5rem 0; border-bottom: 1px dashed var(--papier-ombre); }
.fiche:last-of-type { border-bottom: none; }
.fiche:nth-of-type(even) .fiche-photo { order: 2; }
.fiche-photo img { border: var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre-dure); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.fiche h2 { margin-bottom: .3em; }
.fiche .prix { font-size: 1.8rem; }
.fiche ul { color: var(--encre-douce); padding-left: 1.2em; }
.fiche ul li { margin: .3em 0; }

/* ---------- Points comportementaux ---------- */
.grille-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.point {
  background: var(--papier-clair); border: 1.5px solid var(--encre);
  border-left: 6px solid var(--rouille); border-radius: var(--rayon);
  padding: 1.2rem 1.4rem; box-shadow: var(--ombre-carte);
}
.point h3 { font-size: 1.08rem; }
.point p { margin: 0; color: var(--encre-douce); font-size: .96rem; }

/* ---------- Qui suis-je ---------- */
.profil { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.profil-photo img { border: var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre-dure); }
.encart {
  background: var(--papier-clair); border: 1.5px solid var(--encre);
  border-left: 6px solid var(--rouille); border-radius: var(--rayon);
  padding: 1.4rem 1.6rem; margin: 1.5rem 0; box-shadow: var(--ombre-carte);
}
.encart p:last-child { margin-bottom: 0; }
.frise { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.frise li { padding: .8rem 0 .8rem 1.7rem; border-left: 2px solid var(--encre); position: relative; }
.frise li::before {
  content: ""; width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--rouille); border: 2px solid var(--encre);
  position: absolute; left: -0.58rem; top: 1.15rem;
}
.frise strong { font-family: var(--titres); }

/* ---------- Galerie ---------- */
.grille-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.grille-galerie a { display: block; border: 1.5px solid var(--encre); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-carte); }
.grille-galerie img {
  aspect-ratio: 1; object-fit: cover; width: 100%;
  transition: transform .25s; background: var(--papier-ombre);
}
.grille-galerie a:hover img { transform: scale(1.04); }
dialog.visionneuse { border: none; border-radius: var(--rayon); padding: 0; max-width: min(92vw, 1000px); background: transparent; }
dialog.visionneuse::backdrop { background: rgba(24, 21, 15, .88); }
dialog.visionneuse img { border: var(--trait); border-radius: var(--rayon); max-height: 85vh; width: auto; max-width: 100%; margin-inline: auto; }
dialog.visionneuse button {
  position: absolute; top: .5rem; right: .5rem; background: var(--encre);
  color: var(--papier); border: 1px solid var(--papier); border-radius: 50%;
  width: 2.6rem; height: 2.6rem; font-size: 1.4rem; cursor: pointer; line-height: 1;
}

/* ---------- FAQ ---------- */
.faq details {
  background: var(--papier-clair); border: 1.5px solid var(--encre); border-radius: var(--rayon);
  margin-bottom: .8rem; padding: 0 1.3rem; box-shadow: var(--ombre-carte);
}
.faq summary {
  font-weight: 700; font-family: var(--titres); font-size: 1.05rem; cursor: pointer;
  padding: 1.05rem 0; list-style: none; position: relative; padding-right: 2.2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--rouille); font-weight: 900; font-family: var(--texte);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 0; color: var(--encre-douce); }

/* ---------- Formulaires ---------- */
.grille-contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: start; }
form.formulaire {
  background: var(--papier-clair); border: var(--trait); border-radius: var(--rayon);
  padding: 2rem; box-shadow: var(--ombre-dure);
}
.champ { margin-bottom: 1.1rem; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .93rem; letter-spacing: .02em; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .7em .9em; border: 1.5px solid var(--encre); border-radius: var(--rayon);
  font: inherit; background: #fff; color: var(--encre);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 3px solid rgba(181, 80, 29, .35); border-color: var(--rouille);
}
.champ .aide { font-size: .85rem; color: var(--encre-douce); margin: .25rem 0 0; }
.champ-rgpd { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--encre-douce); }
.champ-rgpd input { width: auto; margin-top: .3rem; }
.hp-champ { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.alerte { border-radius: var(--rayon); border: 1.5px solid var(--encre); padding: 1rem 1.3rem; margin-bottom: 1.5rem; font-weight: 700; box-shadow: var(--ombre-carte); }
.alerte-ok { background: #ece5cf; color: #4a3c14; }
.alerte-erreur { background: #f4ddd3; color: #7c2a10; }
.coordonnees { background: var(--encre); color: var(--papier); border-radius: var(--rayon); padding: 2rem; box-shadow: var(--ombre-dure); }
.coordonnees h2 { color: var(--papier-clair); font-size: 1.45rem; }
.coordonnees a { color: #f0b088; font-weight: 700; }
.coordonnees .gros { font-size: 1.35rem; font-family: var(--titres); }
.coordonnees ul { padding-left: 1.1em; }

/* ---------- Bandeau CTA + pied ---------- */
.bandeau-cta { background: var(--rouille); color: var(--papier-clair); text-align: center; padding: 3.2rem 0; border-block: var(--trait); }
.bandeau-cta h2 { color: #fff8ec; }
.bandeau-cta p { color: #f3ddc9; margin-top: 0; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.bandeau-cta .btn { background: var(--encre); color: var(--papier-clair); }
.bandeau-cta .btn:hover { background: #000; color: var(--papier-clair); }
.bandeau-cta .btn-clair { background: var(--papier); color: var(--encre); }
.bandeau-cta .btn-clair:hover { background: var(--papier-clair); color: var(--encre); }
.site-footer { background: var(--encre); color: #bdb5a3; padding: 3rem 0 1rem; font-size: .95rem; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer a { color: var(--papier); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #f0b088; }
.marque-pied { display: flex; align-items: center; gap: .6rem; font-family: var(--titres); font-size: 1.15rem; color: var(--papier); }
.marque-pied img { border-radius: 50%; background: #fff; }
.pied-titre { font-weight: 700; color: var(--papier); text-transform: uppercase; font-size: .82rem; letter-spacing: .12em; }
.site-footer .liste-nue li { margin: .4rem 0; }
.reseaux { margin-top: 0; }
.pied-bas { border-top: 1px solid rgba(244,238,225,.2); margin-top: 2.5rem; padding-top: 1rem; font-size: .85rem; text-align: center; }

/* ---------- Divers ---------- */
.fil-ariane { font-size: .88rem; color: var(--encre-douce); margin: 1.2rem 0 0; }
.fil-ariane a { color: var(--encre-douce); }
.entete-page { padding: 3rem 0 2.2rem; border-bottom: 1px solid var(--papier-ombre); background: radial-gradient(ellipse at 90% 0%, rgba(181,80,29,.06), transparent 50%), var(--papier); }
.entete-page h1 { margin-bottom: .25em; }
.entete-page .sous-titre { color: var(--encre-douce); font-size: 1.18rem; max-width: 44em; margin: 0; }
.note { font-size: .9rem; color: var(--encre-douce); }
.zone-villes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding: 0; list-style: none; }
.zone-villes li { background: var(--papier-clair); border: 1.5px solid var(--encre); border-radius: var(--rayon); padding: .25em .8em; font-size: .9rem; font-weight: 700; box-shadow: 2px 2px 0 rgba(33,29,22,.12); }

/* ---------- Utilitaires (remplacent tout style inline — CSP stricte) ---------- */
.mt-15 { margin-top: 1.5rem; }
.mt-20 { margin-top: 2rem; }
.mt-25 { margin-top: 2.5rem; }
.mb-15 { margin-bottom: 1.5rem; }
.pt-0 { padding-top: 0; }
.centre { text-align: center; }
.centre .section-intro { margin-inline: auto; }
.centre .cta-actions { justify-content: center; }
.pad-vertical { padding: 4rem 0; }
.largeur-420 { max-width: 420px; }
.en-ligne { display: inline; }
.btn-petit { padding: .3em .8em; font-size: .85rem; box-shadow: 2px 2px 0 rgba(33,29,22,.9); }
table.tarifs td form { display: flex; flex-direction: column; gap: .4rem; min-width: 180px; }
.form-participant { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.form-participant input {
  flex: 1 1 150px; padding: .45em .7em; border: 1.5px solid var(--encre);
  border-radius: var(--rayon); font: inherit; font-size: .9rem; background: #fff;
}
table.tarifs td form input[type="text"] {
  padding: .4em .6em; border: 1.5px solid var(--encre); border-radius: var(--rayon);
  font: inherit; font-size: .85rem; background: #fff;
}
.flotte-droite { float: right; }
.contenu-page { max-width: 800px; }
.image-article {
  border: var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre-dure);
  margin-bottom: 2rem; width: 100%;
}
.video-galerie {
  width: 100%; border: var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre-carte); background: var(--encre);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .heros-grille, .profil, .grille-contact { grid-template-columns: 1fr; gap: 2rem; }
  .fiche { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.8rem 0; }
  .fiche:nth-of-type(even) .fiche-photo { order: 0; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .heros-photo { max-width: 420px; }
}
@media (max-width: 1100px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: 1.5px solid var(--encre); border-radius: var(--rayon);
    cursor: pointer; padding: .6rem;
  }
  .nav-burger span { width: 24px; height: 3px; background: var(--encre); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav-principale { display: none; width: 100%; }
  .nav-principale.ouverte { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; padding-bottom: 1rem; }
  .nav-principale a { border-bottom: none; }
  .btn-nav { margin-left: 0; text-align: center; }
  .barre-nav { flex-wrap: wrap; }
  .champ-double { grid-template-columns: 1fr; }
}
/* ---------- Séances collectives : liste + calendrier ---------- */
.etiquette-groupe { display: block; font-weight: 700; margin-bottom: .4rem; font-size: .93rem; }
.liste-seances { display: flex; flex-direction: column; gap: .5rem; }
.choix-seance {
  display: flex; align-items: flex-start; gap: .6rem; background: #fff;
  border: 1.5px solid var(--encre); border-radius: var(--rayon);
  padding: .6rem .9rem; cursor: pointer; font-size: .95rem;
}
.choix-seance:hover { background: var(--papier); }
.choix-seance input { margin-top: .25rem; }
.cadre-calendrier {
  background: var(--papier-clair); border: var(--trait); border-radius: var(--rayon);
  padding: 1.2rem 1.4rem; box-shadow: var(--ombre-carte);
}
.titre-calendrier { font-size: 1.15rem; margin-bottom: .8rem; }
.cal-mois { margin-bottom: 1rem; }
.cal-titre { font-family: var(--titres); font-weight: 700; text-transform: capitalize; margin-bottom: .4rem; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-entete { font-size: .72rem; font-weight: 700; text-align: center; color: var(--encre-douce); }
.cal-jour {
  aspect-ratio: 1; display: grid; place-items: center; font-size: .85rem;
  color: var(--encre-douce); border: none; background: none; border-radius: var(--rayon);
}
button.cal-jour.cal-seance {
  background: var(--rouille); color: #fff; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--encre); position: relative;
}
button.cal-jour.cal-seance:hover { background: var(--rouille-sombre); }
button.cal-jour.cal-complet { background: var(--papier-ombre); color: var(--encre-douce); }
button.cal-jour.cal-libre {
  background: #fff; color: var(--encre); font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--encre);
}
button.cal-jour.cal-libre:hover { background: var(--rouille); color: #fff; }
button.cal-jour.cal-choisi { background: var(--rouille); color: #fff; }
.cal-jour.cal-indispo { color: var(--papier-ombre); text-decoration: line-through; }

/* ---------- Barre d'action mobile (appeler / RDV en un pouce) ---------- */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(244, 238, 225, .97); border-top: 2px solid var(--encre);
  }
  .barre-mobile .btn { text-align: center; padding: .65em .5em; font-size: .98rem; box-shadow: 2px 2px 0 rgba(33,29,22,.9); }
  body { padding-bottom: 4.4rem; } /* la barre ne masque jamais le contenu */
}

@media (max-width: 540px) {
  .pied-grille { grid-template-columns: 1fr; }
  .section { padding: 2.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grille-galerie img, .nav-burger span, .btn { transition: none; }
}