/* ============================================================
   Thanadoula Au-delà des Étoiles — système visuel « De la nuit à l'aube »

   L'idée : la page traverse une nuit. Elle commence dans le bleu profond
   (le moment qu'on redoute), passe par la brume, et finit dans la première
   lumière chaude — là où se trouvent le téléphone et l'après. C'est le sujet
   même du métier : accompagner un passage.

   Contraintes tirées de la recherche d'audience (familles d'une personne en
   fin de vie, aidants, endeuillés, milieu rural, souvent 45-75 ans) :
   — tons naturels et doux : bleus, verts, terre. Aucune couleur dure.
   — la confiance vient de LA PERSONNE, pas du catalogue de services.
   — corps de texte généreux (18 px mini) et mesure courte : on lit ça
     fatigué, sur un téléphone, parfois en pleurant.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Nuit (sections de respiration) ---- */
  --nuit:        #13162E;
  --nuit-2:      #1F2547;
  --crepuscule:  #343C6B;

  /* ---- Aube (sections chaudes) ---- */
  --aube:        #C98B72;   /* rose terre, décoratif sur sombre */
  --or:          #D9A441;   /* décoratif sur sombre uniquement */
  --terre:       #8F5535;   /* accent texte sur fond clair */

  /* ---- Végétal (sections calmes) ---- */
  --sauge:       #7D8E72;   /* décoratif */
  --sauge-fonce: #43513C;   /* texte */

  /* ---- Surfaces ---- */
  --creme:       #FCF9F4;
  --sable:       #F4EEE2;
  --blanc:       #FFFFFF;
  --trait:       #E3D9C7;

  /* ---- Encre ---- */
  --ink:         #1B1F35;
  --ink-soft:    #414763;
  --ink-faded:   #5B617E;
  --sur-nuit:    #F4F0E8;
  --sur-nuit-2:  #C9C6D4;

  /* ---- Typographie ----
     Fraunces : serif chaleureuse, un peu irrégulière — elle a une présence
     humaine que les grotesques n'ont pas. Source Sans 3 en corps : humaniste,
     grande hauteur d'x, lisible pour un œil de 70 ans. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --corps:   "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Rythme ---- */
  --gouttiere: 22px;
  --max: 1140px;
  --mesure: 60ch;
  --sec: clamp(68px, 10vw, 128px);

  /* ---- Formes & profondeur ---- */
  --r-s: 10px;
  --r:   18px;
  --r-l: 28px;
  --ombre: 0 2px 4px rgba(27,31,53,.04), 0 12px 32px -12px rgba(27,31,53,.14);
  --ombre-forte: 0 4px 8px rgba(27,31,53,.06), 0 28px 60px -20px rgba(27,31,53,.22);

  /* ---- Mouvement : lent. Rien ne doit sursauter sur ce sujet. ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--ink);
  font-family: var(--corps);
  font-size: 19px;               /* public âgé : on ne descend pas en dessous */
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }
.etroit { max-width: 760px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
h1 { font-size: clamp(2.5rem, 7.6vw, 4.3rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 5.2vw, 3rem); }
h3 { font-size: clamp(1.4rem, 3.4vw, 1.72rem); }
p  { margin: 0 0 1.15em; max-width: var(--mesure); }
p:last-child { margin-bottom: 0; }
a  { color: var(--terre); text-underline-offset: 3px; }
strong { font-weight: 600; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--corps);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1.5px; background: currentColor; flex: none; opacity: .55;
}

.chapo {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.9vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 44ch;
  font-weight: 400;
}

section { padding: var(--sec) 0; position: relative; }
.sec--sable { background: var(--sable); }
.sec--nuit  { background: var(--nuit); color: var(--sur-nuit); }
.sec--nuit h2, .sec--nuit h3 { color: #FFFDF8; }
.sec--nuit p { color: var(--sur-nuit-2); }
.sec--nuit .eyebrow { color: var(--or); }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(252,249,244,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.entete .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); min-width: 0; min-height: 44px; }
.marque svg { flex: none; }
.marque b {
  font-family: var(--display); font-size: 1.04rem; font-weight: 500;
  line-height: 1.2; display: block; max-width: 15ch;
}
/* Le sous-titre ne tient que sur les grands écrans : ailleurs il pousse la
   nav sur deux lignes. */
.marque .baseline { display: none; font-size: .76rem; color: var(--ink-faded); letter-spacing: .03em; }
@media (min-width: 1280px) { .marque .baseline { display: block; } .marque b { max-width: none; } }

.nav { display: none; align-items: center; gap: 26px; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
  padding: 10px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--terre); }
.entete .tel {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  background: var(--nuit); color: var(--creme);
  padding: 12px 20px; border-radius: 999px; white-space: nowrap;
  text-decoration: none; font-weight: 600; font-size: .95rem;
}
.entete .tel:hover { background: var(--nuit-2); }
@media (min-width: 1040px) { .nav { display: flex; } }
@media (max-width: 480px) {
  .entete .tel span.mot { display: none; }
  .marque b { font-size: .96rem; }
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 15px 30px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--corps); font-size: 1.05rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--or    { background: #F2E2C4; color: #2A1C0A; }
.btn--or:hover { background: #F8EDD8; }
.btn--nuit  { background: var(--nuit); color: var(--creme); }
.btn--nuit:hover { background: var(--nuit-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(27,31,53,.35); }
.btn--ghost:hover { background: var(--ink); color: var(--creme); border-color: var(--ink); }
.btn--clair { background: transparent; color: #F6F2EA; border-color: rgba(246,242,234,.6); }
.btn--clair:hover { background: rgba(246,242,234,.15); border-color: #F6F2EA; color: #FFF; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

:where(a, button, summary):focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; border-radius: 6px; }
.sec--nuit :where(a, button):focus-visible, .hero :where(a, button):focus-visible { outline-color: var(--or); }

/* ============================================================
   HÉROS — la nuit, avec l'aube qui pointe déjà en bas
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  background: linear-gradient(176deg, #0E1128 0%, #171C3C 38%, #262B54 70%, #3A3560 88%, #4C3F5F 100%);
  color: var(--sur-nuit);
  padding: clamp(84px, 13vw, 150px) 0 clamp(96px, 14vw, 160px);
  overflow: hidden;
}
/* Champ d'étoiles : deux couches de densités différentes pour éviter
   le motif régulier qui trahit le dégradé radial répété. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    radial-gradient(1.7px 1.7px at 8% 14%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.3px 1.3px at 23% 32%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.9px 1.9px at 41% 9%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 58% 26%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.6px 1.6px at 72% 12%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.3px 1.3px at 88% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 15% 52%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 35% 62%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.7px 1.7px at 66% 48%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 92% 58%, rgba(255,255,255,.45), transparent);
}
/* Lueur d'aube, en bas à droite : la lumière qui arrive. */
.hero::after {
  content: ""; position: absolute; z-index: -1;
  left: -10%; right: -10%; bottom: -68%; height: 108%;
  background: radial-gradient(ellipse 52% 92% at 72% 100%, rgba(233,170,132,.30), rgba(233,170,132,0) 68%);
}
.hero .wrap { position: relative; }
.hero h1 { color: #FFFDF8; max-width: 17ch; }
.hero h1 .lueur {
  background: linear-gradient(94deg, #F6D9A8, #E9A78B);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #F0C79C;
  font-style: italic;
}
.hero .eyebrow { color: #E9B778; }
.hero .chapo { color: #EBE4DA; max-width: 38ch; }
.hero-contact {
  margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.hero-tel {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--display); font-size: clamp(1.7rem, 4.6vw, 2.3rem); font-weight: 500;
  color: #FFFDF8; text-decoration: none; letter-spacing: .01em;
  padding: 6px 0;
}
.hero-tel:hover { color: #F6D9A8; }
.hero-tel .rond {
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  background: rgba(246,217,168,.16); border: 1px solid rgba(246,217,168,.45);
  display: grid; place-items: center;
}
.hero-note { font-size: 1rem; color: #E8E1D6; max-width: 30ch; margin: 0; }
.hero-rassure {
  margin: 52px 0 0; padding: 0; list-style: none;
  display: grid; gap: 14px;
  border-top: 1px solid rgba(246,242,234,.18); padding-top: 28px;
}
@media (min-width: 760px) { .hero-rassure { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.hero-rassure li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; color: #E8E1D6; }
.hero-rassure svg { flex: none; margin-top: 3px; }

/* La constellation n'apparaît que quand il y a vraiment de la place. */
.constellation { display: none; }
@media (min-width: 1060px) {
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 60px; align-items: center; }
  .hero-rassure { grid-column: 1 / -1; }
  .constellation { display: block; width: 100%; height: auto; opacity: .9; }
}

/* ============================================================
   SITUATIONS — « si vous êtes ici, c'est peut-être que… »
   ============================================================ */
.situations { display: grid; gap: 18px; margin-top: 46px; }
@media (min-width: 820px) { .situations { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.situation {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 34px 28px 30px;
  box-shadow: var(--ombre);
}
.situation .vignette {
  width: 100%; height: auto; aspect-ratio: 501 / 267; object-fit: cover;
  margin-bottom: 22px; border-radius: var(--r-s); display: block;
  background: var(--sable);
}
.situation h3 { font-size: 1.3rem; margin-bottom: .4em; }
.situation p { font-size: 1rem; color: var(--ink-soft); }

/* ============================================================
   PERSONNE — remontée haut de page : sur ce métier, on choisit
   quelqu'un avant de choisir une prestation.
   ============================================================ */
.personne { display: grid; gap: 38px; align-items: start; }
@media (min-width: 900px) { .personne { grid-template-columns: 380px minmax(0, 1fr); gap: 60px; } }
.portrait {
  margin: 0; border-radius: var(--r-l); overflow: hidden;
  background: var(--sable); box-shadow: var(--ombre-forte);
}
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 580 / 810; object-fit: cover; }
.citation-intro {
  font-family: var(--display); font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  line-height: 1.4; color: var(--ink); font-weight: 400; font-style: italic;
  border-left: 3px solid var(--aube); padding-left: 24px; margin: 0 0 1.2em;
  max-width: 34ch;
}

/* ============================================================
   MÉTIER — deux colonnes, avec l'illustration de la clairière
   ============================================================ */
.duo { display: grid; gap: 40px; align-items: start; }
@media (min-width: 940px) { .duo { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
/* Sa photo « Qu'est-ce qu'une thanadoula ? ». Elle remplace la clairière
   dessinée : au milieu de six vraies photos, l'illustration se lisait comme
   une image qui n'a pas chargé — c'est ce que Marion a signalé le 22/09. */
.illu-metier {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r); display: block; box-shadow: var(--ombre);
  background: var(--sable);
}
/* Une image en paysage face à une colonne de texte haute : centrée, elle tient ;
   alignée en haut, elle laisse un vide sous elle. */
@media (min-width: 940px) { #metier .duo { align-items: center; } }
.encadre {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--sauge);
  border-radius: var(--r);
  padding: 30px 28px;
  box-shadow: var(--ombre);
  margin-top: 28px;
}
.encadre h3 { font-family: var(--corps); font-size: 1.08rem; font-weight: 700; letter-spacing: -.005em; }
.encadre p { font-size: 1rem; color: var(--ink-soft); }

/* ============================================================
   CITATION pleine largeur — le moment de silence de la page
   ============================================================ */
.citation { text-align: center; }
.citation blockquote {
  margin: 0 auto; max-width: 20ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 3.4rem); line-height: 1.22;
  color: #FFFDF8; letter-spacing: -.02em;
}
.citation .attribution { margin: 34px auto 0; font-size: .98rem; color: var(--sur-nuit-2); max-width: 46ch; }
.citation .etoile-sep { display: block; margin: 0 auto 30px; }

/* ============================================================
   ACCOMPAGNEMENTS — trois temps plutôt que six cartes identiques
   ============================================================ */
.temps { display: grid; gap: 22px; margin-top: 50px; align-items: start; }
@media (min-width: 900px) { .temps { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.temps-bloc {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 0; overflow: hidden;
  box-shadow: var(--ombre); display: flex; flex-direction: column;
}
.temps-bloc .bandeau {
  padding: 26px 28px 22px; color: #FFF8EE; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 900px) { .temps-bloc .bandeau { min-height: 128px; } }
.temps-bloc:nth-child(1) .bandeau { background: linear-gradient(150deg, #1F2547, #343C6B); }
.temps-bloc:nth-child(2) .bandeau { background: linear-gradient(150deg, #2E3560, #5A4A6B); }
.temps-bloc:nth-child(3) .bandeau { background: linear-gradient(150deg, #574A72, #6E4A58); }
.temps-bloc .bandeau .quand {
  font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: #F3D3AE; margin: 0 0 8px; max-width: none;
}
.temps-bloc .bandeau h3 { color: #FFF8EE; margin: 0; font-size: 1.42rem; }
.temps-bloc ul { list-style: none; margin: 0; padding: 26px 28px 30px; display: grid; gap: 18px; flex: 1; }
.temps-bloc li { position: relative; padding-left: 30px; font-size: 1rem; color: var(--ink-soft); }
.temps-bloc li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.temps-bloc li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--sauge); background: var(--blanc);
}
.note-forfait {
  margin: 34px auto 0; text-align: center; max-width: 52ch;
  font-size: 1.02rem; color: var(--ink-soft);
}

/* ============================================================
   SÉPULTURES — le second volet du métier : le lieu de mémoire.
   Fond crème → sable : la section se fond dans « Comment ça se passe »
   qui la suit. Le dégradé ne porte que du texte FONCÉ — un dégradé
   clair qui porterait du texte clair est le piège de ce projet.
   ============================================================ */
.sec--memoire { background: linear-gradient(180deg, var(--creme) 0%, var(--sable) 100%); }

.formules { display: grid; gap: 22px; margin-top: 50px; align-items: stretch; }
@media (min-width: 720px)  { .formules { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1080px) { .formules { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
/* À quatre colonnes la carte tombe sous 260 px : on resserre plutôt que
   de laisser le prix et les puces se chevaucher. */
@media (min-width: 1080px) {
  .formule { padding: 26px 22px 28px; }
  .formule h3 { font-size: 1.3rem; }
  .formule .prix { font-size: 2.15rem; }
}
.formule {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 30px 28px 32px;
  box-shadow: var(--ombre); display: flex; flex-direction: column;
}
.formule .etiquette {
  align-self: flex-start; margin: 0 0 18px; max-width: none;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sauge-fonce); background: #EBEFE7;
  border-radius: 999px; padding: 6px 14px;
}
.formule h3 { font-size: 1.42rem; margin-bottom: .2em; }
.formule .rythme { font-size: 1rem; color: var(--ink-faded); margin-bottom: 20px; }
.formule .prix {
  font-family: var(--display); font-size: 2.45rem; line-height: 1;
  color: var(--terre); margin: 0 0 24px; font-weight: 500;
}
/* L'unité reste en corps de texte : un « par an » en Fraunces à cette
   taille se lit comme une deuxième somme. */
.formule .prix .unite {
  font-family: var(--corps); font-size: .92rem; font-weight: 600;
  color: var(--ink-faded); letter-spacing: .02em;
}
.formule ul {
  list-style: none; margin: 0; padding: 22px 0 0; display: grid; gap: 15px;
  border-top: 1px solid var(--trait); flex: 1;
  /* Les cartes ont la même hauteur mais pas le même nombre de lignes :
     sans ceci, la grille étire les écarts entre les points. */
  align-content: start;
}
.formule li { position: relative; padding-left: 30px; font-size: 1rem; color: var(--ink-soft); }
.formule li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.formule li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--sauge); background: var(--blanc);
}
.formule .option {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px dashed var(--trait);
  font-size: .98rem; color: var(--ink-soft);
}

.engagements { display: grid; gap: 22px; margin-top: 46px; }
@media (min-width: 860px) { .engagements { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.engagements .encadre { margin-top: 0; }

.appel-sepultures {
  margin-top: 42px; display: flex; flex-wrap: wrap; gap: 16px 22px;
  align-items: center; justify-content: center; text-align: center;
}
.appel-sepultures p { margin: 0; font-size: 1rem; color: var(--ink-soft); max-width: 40ch; }

/* ============================================================
   CHEMIN — le déroulement, comme un sentier
   ============================================================ */
.chemin { position: relative; margin: 54px 0 0; padding: 0; list-style: none; display: grid; gap: 38px; }
.chemin > li { position: relative; padding-left: 78px; }
.chemin > li::before {           /* la pastille */
  content: attr(data-n);
  position: absolute; left: 0; top: 0;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--nuit); color: #FFF8EE;
  font-family: var(--display); font-size: 1.4rem; font-weight: 500;
  display: grid; place-items: center;
  box-shadow: 0 0 0 8px var(--creme);
}
.chemin > li::after {            /* le sentier qui relie */
  content: ""; position: absolute; left: 26px; top: 54px; bottom: -38px;
  width: 2px; background: linear-gradient(var(--trait), var(--trait));
}
.chemin > li:last-child::after { display: none; }
.chemin h3 { margin-bottom: .3em; }
.chemin p { color: var(--ink-soft); font-size: 1.02rem; }
@media (min-width: 900px) {
  .chemin { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .chemin > li { padding-left: 0; padding-top: 76px; }
  .chemin > li::before { box-shadow: 0 0 0 8px var(--sable); }
  .chemin > li::after { left: 54px; right: -34px; top: 26px; bottom: auto; width: auto; height: 2px; }
}
.sec--sable .chemin > li::before { box-shadow: 0 0 0 8px var(--sable); }

.paire { display: grid; gap: 22px; margin-top: 52px; }
@media (min-width: 820px) { .paire { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
.paire .encadre { margin-top: 0; }

/* ============================================================
   FAQ — accordéons : on cherche UNE réponse, on ne lit pas six blocs
   ============================================================ */
.faq { margin-top: 44px; max-width: 840px; }
.faq details {
  border-bottom: 1px solid var(--trait);
  background: transparent;
}
.faq details[open] { background: var(--blanc); border-radius: var(--r-s); box-shadow: var(--ombre); border-bottom-color: transparent; }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 22px; min-height: 60px;
  font-family: var(--display); font-size: clamp(1.15rem, 2.6vw, 1.32rem); font-weight: 500;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .croix {
  flex: none; width: 26px; height: 26px; margin-top: 4px; position: relative;
  transition: transform .3s var(--ease);
}
.faq summary .croix::before, .faq summary .croix::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--terre);
  transform: translate(-50%, -50%);
}
.faq summary .croix::before { width: 15px; height: 2px; }
.faq summary .croix::after  { width: 2px; height: 15px; transition: opacity .3s var(--ease); }
.faq details[open] summary .croix { transform: rotate(90deg); }
.faq details[open] summary .croix::after { opacity: 0; }
.faq .reponse { padding: 0 22px 26px; }
.faq .reponse p { color: var(--ink-soft); font-size: 1.02rem; max-width: 62ch; }

/* ============================================================
   CONTACT — l'aube. La fin du parcours, et le moment d'appeler.
   ============================================================ */
.contact {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(168deg, #20264C 0%, #35325C 45%, #50395B 74%, #6B4557 100%);
  color: #FFF8EE;
}
.contact::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(ellipse 58% 52% at 84% 92%, rgba(249,214,168,.26), transparent 64%);
}
.contact h2 { color: #FFFDF8; max-width: 18ch; }
.contact .chapo { color: #F6ECE2; }
.contact-bloc { display: grid; gap: 44px; align-items: center; }
@media (min-width: 940px) { .contact-bloc { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
.carte-appel {
  background: rgba(19,22,46,.42);
  border: 1px solid rgba(255,248,238,.22);
  backdrop-filter: blur(6px);
  border-radius: var(--r-l);
  padding: clamp(28px, 4.5vw, 42px);
}
.carte-appel .grand-tel {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--display); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 500;
  color: #FFFDF8; text-decoration: none; letter-spacing: .01em; line-height: 1.15;
  padding: 6px 0; min-height: 56px;
}
.carte-appel .grand-tel:hover { color: #FCE0BA; }
.coord { list-style: none; margin: 28px 0 0; padding: 26px 0 0; display: grid; gap: 22px; border-top: 1px solid rgba(255,248,238,.2); }
.coord .libelle {
  display: block; font-size: .76rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #F3D3AE; margin-bottom: 5px;
}
.coord a, .coord span { color: #FFFDF8; text-decoration: none; font-size: 1.05rem; font-weight: 600; word-break: break-word; }
.coord a { display: inline-flex; align-items: center; min-height: 44px; }
.coord a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied { background: var(--nuit); color: var(--sur-nuit-2); padding: 64px 0 40px; font-size: .98rem; }
.pied a { color: #EDE7DC; }
.pied-haut { display: grid; gap: 30px; margin-bottom: 34px; }
@media (min-width: 820px) { .pied-haut { grid-template-columns: 1.25fr 1fr; gap: 54px; } }
.pied-marque { font-family: var(--display); font-size: 1.28rem; color: #FFFDF8; margin-bottom: .45em; display: flex; align-items: center; gap: 12px; }
.pied p { max-width: 42ch; }
.urgence {
  background: rgba(255,248,238,.07);
  border: 1px solid rgba(255,248,238,.18);
  border-radius: var(--r-s); padding: 20px 22px; font-size: .96rem; color: #E0DAD0;
}
.urgence strong { color: #FFFDF8; }
.pied-bas {
  border-top: 1px solid rgba(255,248,238,.16); padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: center; font-size: .92rem;
}
.pied-bas > * { display: inline-flex; align-items: center; min-height: 44px; }

/* ============================================================
   PAGE DE TEXTE (mentions légales)
   ============================================================ */
.page-texte { padding: clamp(52px, 8vw, 88px) 0; }
.page-texte h1 { font-size: clamp(2.1rem, 6vw, 3rem); }
.page-texte h2 { margin-top: 1.9em; font-size: clamp(1.35rem, 3.6vw, 1.7rem); }
.page-texte h2:first-of-type { margin-top: 1.2em; }
.page-texte p { max-width: 68ch; }
.retour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 16px; color: var(--terre); text-decoration: none; font-weight: 600; }
.retour:hover { text-decoration: underline; }

/* ============================================================
   APPARITIONS — très lentes, et désactivables
   ============================================================ */
/* Le contenu est visible par défaut. Seul un JS qui fonctionne a le droit
   de le masquer pour l'animer — jamais le CSS seul. */
html.anim .monte { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.anim .monte.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .monte { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   MODE RELECTURE (?review=1)
   ============================================================ */
[data-todo] { position: relative; }
body.relecture [data-todo] { outline: 2px dashed #B4451F; outline-offset: 7px; border-radius: 6px; }
body.relecture [data-todo]::before {
  content: "À VALIDER — " attr(data-todo);
  position: absolute; top: -14px; left: 0; z-index: 40;
  background: #B4451F; color: #FFF;
  font-family: var(--corps); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bandeau-relecture {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: #B4451F; color: #FFF;
  font-family: var(--corps); font-size: .9rem;
  padding: 12px var(--gouttiere); text-align: center;
}

/* ============================================================
   AJOUTS DU 21/09/2026 — ses propres éléments
   (logo, portrait, visuels de rubrique, grille sépultures, horaires)

   Règle du projet inchangée : sur fond clair, texte foncé uniquement.
   Les seuls accents colorés portés par du texte sont --terre (#8F5535)
   et --sauge-fonce (#43513C), tous deux au-dessus de 4,5:1 sur --blanc,
   --creme et --sable.
   ============================================================ */

/* ---- Emblème du logo, en-tête et pied ---- */
.embleme { flex: none; border-radius: 9px; object-fit: cover; }
.pied-marque .embleme { border-radius: 8px; }

/* ---- Bande d'accueil : la photo des mains ---- */
.bande-presence { margin: 0 0 clamp(40px, 6vw, 64px); }
.bande-presence img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 758 / 263; object-fit: cover;
  border-radius: var(--r-l); box-shadow: var(--ombre);
  background: var(--sable);
}
.bande-presence figcaption {
  margin-top: 20px; text-align: center;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.65rem); line-height: 1.35;
  color: var(--ink);
}

/* ---- Le mot manuscrit de ses visuels, sous la citation ---- */
.mot-manuscrit {
  font-family: var(--display); font-style: italic;
  color: var(--terre); font-size: 1.05rem; margin: -.6em 0 1.4em;
}

/* ---- Formules : la mensualité, sous le prix annuel ---- */
.formule .mensuel {
  margin: -18px 0 22px; font-size: .95rem; color: var(--ink-faded);
}
/* Les quatre cartes n'ont pas le même nombre de lignes de rythme : sans
   plancher, les prix ne sont plus sur la même ligne d'une carte à l'autre. */
@media (min-width: 720px) {
  .formule .rythme { min-height: 3.2em; }
  .formule .mensuel { min-height: 3.1em; }
}
.formule .mensuel span { white-space: nowrap; }

/* ---- Fleurissement / Passage Hommage / Déplacements ---- */
.options-sepulture { display: grid; gap: 22px; margin-top: 46px; }
@media (min-width: 860px) { .options-sepulture { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.options-sepulture .encadre { margin-top: 0; display: flex; flex-direction: column; }
.options-sepulture .sous-titre {
  font-family: var(--display); font-style: italic;
  color: var(--ink-faded); font-size: 1rem; margin: .35em 0 0;
}
.options-sepulture ul {
  list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; flex: 1;
  align-content: start;
}
.options-sepulture li {
  position: relative; padding-left: 26px; font-size: 1rem; color: var(--ink-soft);
}
.options-sepulture li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--sauge); background: var(--blanc);
}
.options-sepulture li strong { color: var(--ink); font-weight: 700; }
.prix-option {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed var(--trait);
  font-family: var(--display); font-size: 1.85rem; line-height: 1; color: var(--terre);
}
.prix-option span {
  font-family: var(--corps); font-size: .92rem; font-weight: 600; color: var(--ink-faded);
}

/* ============================================================
   DISPONIBILITÉS & ASTREINTE
   Posé sur --sable : la carte reste blanche, tout le texte est foncé.
   ============================================================ */
.dispos { display: grid; gap: 34px; margin-top: 60px; align-items: start; scroll-margin-top: 92px; }
@media (min-width: 900px) { .dispos { grid-template-columns: 1fr 1fr; gap: 52px; } }
.dispos-titre { font-size: clamp(1.45rem, 3.4vw, 1.9rem); margin-bottom: .45em; max-width: 20ch; }
.dispos > div > p { color: var(--ink-soft); max-width: 42ch; }

.horaires { margin: 28px 0 0; display: grid; gap: 0; }
.horaires > div {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--trait);
}
.horaires > div:first-child { border-top: 1px solid var(--trait); }
.horaires dt { font-weight: 600; color: var(--ink); }
.horaires dd {
  margin: 0; font-family: var(--display); font-size: 1.28rem;
  color: var(--terre); font-weight: 500;
}
.note-dispos { margin-top: 14px; font-size: 1rem; color: var(--ink-faded); }

.astreinte {
  background: var(--blanc); border: 1px solid var(--trait);
  border-left: 4px solid var(--terre); border-radius: var(--r);
  padding: 30px 28px 32px; box-shadow: var(--ombre);
}
.astreinte .etiquette {
  display: inline-block; margin: 0 0 16px;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--terre); background: #F7EDE4; border-radius: 999px; padding: 6px 14px;
}
.astreinte .prix {
  font-family: var(--display); font-size: 2.45rem; line-height: 1;
  color: var(--terre); margin: 0 0 22px; font-weight: 500;
}
.astreinte .prix .unite {
  font-family: var(--corps); font-size: .92rem; font-weight: 600;
  color: var(--ink-faded); letter-spacing: .02em;
}
.astreinte p { font-size: 1rem; color: var(--ink-soft); }
.astreinte p + p { margin-top: .8em; }
.astreinte ul {
  list-style: none; margin: 20px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--trait); display: grid; gap: 13px;
}
.astreinte li {
  position: relative; padding-left: 26px; font-size: 1rem; color: var(--ink-soft);
}
.astreinte li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--sauge); background: var(--blanc);
}
.astreinte li strong, .astreinte p strong { color: var(--ink); font-weight: 700; }

/* Le garde-fou : il doit se voir, sans crier. Fond terre très dilué,
   texte à l'encre — 14,7:1, bien au-delà de AA. */
.astreinte .garde-fou {
  margin-top: 24px; padding: 18px 20px;
  background: #FBF2EA; border-radius: var(--r-s);
  border-left: 3px solid var(--terre);
  font-size: .98rem; color: var(--ink);
}

.dispos-cta { margin-top: 30px; }

/* Les liens posés sur la nuit doivent être clairs : --terre (#8F5535) sur
   #13162E ne tient que 2,99:1. En doré clair, on est à 13,1:1. */
.hero-rassure a { color: #F6D9A8; text-decoration: underline; text-underline-offset: 3px; }
.hero-rassure a:hover { color: #FFF3DF; }

/* ============================================================
   AJOUTS DU 22/09/2026 — ses réponses : présentation, repères,
   visuel des trois temps, grille de tarifs d'accompagnement.
   Toujours la même règle : sur fond clair, texte foncé uniquement.
   ============================================================ */

/* ---- Un titre de rang h3 qui doit peser comme un h2 ---- */
.sous-h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.18;
  letter-spacing: -.012em; color: var(--ink); margin: 1.4em 0 .5em;
}
.tarifs-bloc .sous-h2 { margin-top: .1em; }

/* ---- Sa phrase de conclusion, détachée du récit ---- */
.credo {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.45;
  color: var(--terre); margin: 1.4em 0 1.6em; max-width: 30ch;
}

/* ---- Formation · parcours · statut ---- */
.reperes { display: grid; gap: 0; border-top: 1px solid var(--trait); }
.reperes > div {
  display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--trait);
}
@media (min-width: 620px) {
  .reperes > div {
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: baseline; column-gap: 22px;
  }
  .reperes .lbl { grid-row: span 2; }
}
.reperes .lbl {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faded);
}
.reperes b { font-family: var(--display); font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.reperes > div > span:last-child { font-size: .98rem; color: var(--ink-soft); }

/* ---- Son visuel des trois temps ---- */
.bande-trois { margin: 0 auto clamp(34px, 5vw, 52px); max-width: 880px; }
.bande-trois img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 800; object-fit: cover;
  border-radius: var(--r-l); box-shadow: var(--ombre); background: var(--sable);
}

/* ============================================================
   SERVICES & TARIFS — les premiers prix de l'accompagnement.
   ============================================================ */
.tarifs-bloc { margin-top: clamp(56px, 8vw, 92px); padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--trait); }
.tarifs-bloc > .etroit > p { color: var(--ink-soft); }

.tarifs { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 720px)  { .tarifs { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1020px) { .tarifs { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tarif {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 26px 24px 28px;
  box-shadow: var(--ombre); display: flex; flex-direction: column;
}
/* La rencontre offerte est la porte d'entrée : elle se distingue. */
.tarif--offert { border-color: var(--sauge); border-left: 4px solid var(--sauge); background: #FBFCFA; }
.tarif .etiquette {
  align-self: flex-start; margin: 0 0 14px;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sauge-fonce); background: #EBEFE7; border-radius: 999px; padding: 6px 13px;
}
.tarif h4 {
  font-family: var(--display); font-weight: 500; font-size: 1.3rem;
  line-height: 1.22; color: var(--ink); margin: 0 0 .25em;
}
.tarif .duree { font-size: 1rem; color: var(--ink-faded); margin: 0 0 14px; }
.tarif .prix {
  font-family: var(--display); font-size: 2.05rem; line-height: 1;
  color: var(--terre); margin: 0 0 16px; font-weight: 500;
}
.tarif > p:last-child {
  font-size: .99rem; color: var(--ink-soft); margin: 0;
  padding-top: 14px; border-top: 1px solid var(--trait); margin-top: auto;
}
.tarif > p:last-child strong { color: var(--ink); }

/* Son récit est long : sans cela, la colonne du portrait reste vide sur
   600 px de haut. Le portrait suit la lecture au lieu de disparaître. */
@media (min-width: 900px) {
  .personne .portrait { position: sticky; top: 100px; }
}
/* Les deux prestations à deux durées : « 60 € · 85 € » en face de « 1 heure · 1 h 30 ». */
.tarif .prix .unite { font-family: var(--corps); font-size: 1.1rem; color: var(--ink-faded); }