/* ===========================================================
   ORNAMENTS.CSS · habillage éditorial (TEST)
   Ornements discrets, tous puisés dans le brief de Séverine :
   « lignes fines, petites citations, séparateurs très discrets,
   texture papier très légère, aquarelle très pâle en fond ».
   Fichier isolé : se retire en une ligne si non concluant.
   Le beige doré n'apparaît que par petites touches, jamais en aplat.
   =========================================================== */

/* ─── 1. Séparateur orné ────────────────────────────────────────────────
   Deux filets fins encadrant un losange doré. Remplace le simple trait
   sous les sur-titres centrés. « ─── ◆ ─── » */
.rule--ornament {
  width: 76px;
  height: 6px;
  border: 0;
  margin-top: var(--space-md);
  background:
    linear-gradient(var(--accent), var(--accent)) left  center / 30px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right center / 30px 1px no-repeat;
  position: relative;
  overflow: visible;
}
.rule--ornament::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  background: var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
}
.rule--ornament.rule--center { margin-inline: auto; }

/* ─── 2. Lettrine ───────────────────────────────────────────────────────
   « donner l'impression d'entrer dans un livre » : la première lettre du
   récit s'agrandit, comme au seuil d'un chapitre. Uniquement sur du texte
   aligné à gauche (une lettrine flotte à gauche). */
.prose--drop::first-letter {
  font-family: var(--font-serif);
  font-size: 3.6em;
  line-height: 0.78;
  float: left;
  padding: 0.04em 0.14em 0 0;
  color: var(--text);
  font-weight: 400;
}

/* ─── 3. Guillemet décoratif ────────────────────────────────────────────
   Un grand guillemet doré ouvre les citations mises en valeur. */
.grande-citation { position: relative; }
.grande-citation::before {
  content: '\201C';
  display: block;
  font-family: var(--font-serif);
  font-size: 2.8em;
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: 0.08em;
}

/* Témoignages : le guillemet se place en filigrane, très pâle, derrière le
   texte : une touche, pas un logo. */
.temoignage { position: relative; }
.temoignage__texte { position: relative; z-index: 1; }
.temoignage::before {
  content: '\201C';
  position: absolute;
  top: -0.25em; left: -0.08em;
  font-family: var(--font-serif);
  font-size: 5em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
  pointer-events: none;
}

/* ─── 4. Lavis d'aquarelle ──────────────────────────────────────────────
   Sur les blocs lin, un dégradé radial très pâle en beige doré donne une
   profondeur d'aquarelle, sans introduire de nouvelle couleur. Extrêmement
   discret : à peine perceptible, il ne fait que « respirer » le fond. */
/* Pas d'overflow:hidden ici : il briserait le position:sticky des enfants
   (l'image de la section « Comment ça se passe »). Le calque est déjà borné
   par inset:0, donc rien ne déborde. */
.section--bloc { position: relative; isolation: isolate; }
.section--bloc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Un dégradé de lumière, pas seulement de teinte : un coin haut-gauche plus
     clair (crème) et un coin bas-droit plus chaud (doré). Contre le lin, la
     différence de clarté entre les deux se voit, c'est ce qui donne l'effet
     d'aquarelle, alors qu'un simple assombrissement se lisait comme une ombre
     et restait invisible. Chaque teinte prise seule reste douce. */
  background:
    radial-gradient(115% 70% at 0% 0%,    rgba(255, 253, 250, 0.75), transparent 60%),
    radial-gradient(110% 72% at 100% 100%, rgba(217, 198, 170, 0.38), transparent 58%);
  pointer-events: none;
}

/* Même lavis sur les cartes au fond lin (page Contact, aside du guide) :
   l'habillage reste cohérent partout où le lin apparaît. */
.contact__card:not(.contact__card--rdv) {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* sûr ici : aucun enfant sticky dans une carte */
}
.contact__card:not(.contact__card--rdv)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 0% 0%,    rgba(255, 253, 250, 0.7), transparent 62%),
    radial-gradient(110% 80% at 100% 100%, rgba(217, 198, 170, 0.34), transparent 60%);
  pointer-events: none;
}

/* ─── 5. Sur-titre marqué ───────────────────────────────────────────────
   Un petit trait doré précède le sur-titre, comme une puce éditoriale. */
.eyebrow--mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow--mark::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  /* rien d'animé : l'habillage doit rester immobile, on veut du calme */
}