/* ══════════════════════════════════════════════════════════════
   Les Ailes de Charleen · feuille de styles partagée
   Une seule feuille pour toutes les pages : une couleur ou une
   taille se change ici, et le site entier suit.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Fonds */
  --creme:        #FAF6EE;
  --creme-carte:  #ffffff;
  --creme-bord:   #eee4d2;
  --creme-trait:  #f2eade;
  --bord-doux:    #c9bfa8;

  /* Encres */
  --bleu:         #232B5C;   /* bleu nuit du logo */
  --bleu-clair:   #2e3a78;
  --texte:        #5a5647;
  --texte-doux:   #98917f;

  /* Accents */
  --cuivre:       #C08552;
  --or:           #D9A45B;
  --lagon:        #3da4b6;
  --lagon-fonce:  #2f8fa0;
  --cyan:         #7FE0EC;

  /* Couleurs de l'Argus bleu et de la lande girondine.
     --argus et --bruyere passent en texte sur le crème ;
     --lotier et --lunule sont trop clairs : décoration seulement. */
  --argus:        #4C63C4;   /* dessus des ailes */
  --argus-clair:  #8FA0E8;   /* frange et femelle */
  --bruyere:      #A9578F;   /* bruyère cendrée */
  --lotier:       #E3A81E;   /* lotier corniculé */
  --lunule:       #E08A4B;   /* lunules du bord de l'aile */

  /* Fonds indigo */
  --indigo-haut:  #141B4D;
  --indigo-bas:   #0B1030;
  --indigo-texte: #c3cae6;
  --indigo-titre: #F5F1E8;
  --indigo-faible:#7d86b8;

  --largeur: 1060px;
}

/* L'attribut hidden doit gagner contre les classes de mise en page
   (.pile pose display:flex, ce qui ecrasait le display:none du
   navigateur et affichait les trois vues de merci-playlist.html). */
[hidden] { display: none !important; }

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: #3c3a30;
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

a { color: var(--lagon-fonce); text-decoration: none; }
a:hover { color: var(--bleu); }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 2px solid var(--lagon); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; }
input, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #a89f8a; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Structure ────────────────────────────────────────────── */
.wrap { max-width: var(--largeur); margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.wrap-etroit { max-width: 760px; }

/* Verticales uniquement : le raccourci « padding: 76px 0 » remettait
   les 24px lateraux de .wrap a zero — meme specificite, declare plus
   bas — et tout le contenu des sections touchait le bord de l'ecran
   des que la fenetre passait sous la largeur maximale du site. */
.sec { padding-top: 76px; padding-bottom: 76px; }
.sec-serre { padding-top: 40px; padding-bottom: 76px; }

.pile { display: flex; flex-direction: column; }
.pile-12 { gap: 12px; } .pile-16 { gap: 16px; } .pile-22 { gap: 22px; }
.pile-30 { gap: 30px; } .pile-34 { gap: 34px; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* ── Typographie ──────────────────────────────────────────── */
.eyebrow {
  color: var(--lagon); font-weight: 500; font-size: 11.5px;
  letter-spacing: .3em; text-transform: uppercase;
}

h1 {
  margin: 0; color: var(--bleu);
  font: 400 clamp(32px, 5.5vw, 50px)/1.2 'Marcellus', Georgia, serif;
  text-wrap: balance;
}

h2 {
  margin: 0; color: var(--bleu);
  font: 400 clamp(26px, 4.5vw, 36px)/1.3 'Marcellus', Georgia, serif;
  text-wrap: balance;
}

h3 { margin: 0; color: var(--bleu); font: 400 23px 'Marcellus', Georgia, serif; }

p { margin: 0; color: var(--texte); font: 300 16px/1.8 'Mulish', sans-serif; }
.chapo { font-size: 16.5px; line-height: 1.75; max-width: 60ch; }
.mention { color: var(--texte-doux); font: 300 13px/1.7 'Mulish', sans-serif; max-width: 72ch; }
.citation { color: var(--lagon); font: italic 400 19px/1.6 'Marcellus', Georgia, serif; }

/* ── En-tête ──────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 238, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 191, 168, .35);
}
.entete .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; padding-bottom: 12px; }

.marque { display: flex; align-items: center; gap: 9px; }
.marque img { display: block; width: 38px; height: auto; }
.marque span { color: var(--bleu); font: 400 13px 'Marcellus', Georgia, serif; letter-spacing: .22em; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 24px; }
.nav a { color: var(--texte); font: 400 14px 'Mulish', sans-serif; white-space: nowrap; }
.nav a:hover { color: var(--bleu); }
.nav a[aria-current="page"] { color: var(--bleu); font-weight: 500; }

.entete-actions { display: flex; align-items: center; gap: 12px; }

/* ── Menu mobile ──────────────────────────────────────────────
   Sous 1000px la nav du bandeau disparaissait sans rien pour la
   remplacer : le site n'etait plus navigable au telephone. Le
   burger prend le relais, et le CTA du bandeau s'efface sous
   560px puisque le bouton flottant porte deja l'appel a
   l'action — c'est lui qui recouvrait la marque. ───────────── */
.burger {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid rgba(201, 191, 168, .55);
  border-radius: 12px; cursor: pointer;
}
.burger:hover { border-color: var(--bord-doux); }
.burger span {
  display: block; width: 18px; height: 1.5px; border-radius: 2px;
  background: var(--bleu);
  transition: transform .28s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.menu-mobile {
  border-top: 1px solid rgba(201, 191, 168, .35);
  background: rgba(250, 246, 238, .98);
  animation: menu-entre .26s ease both;
}
/* Le bandeau etant sticky, un panneau plus haut que la fenetre
   verrait son bas devenir inatteignable : il defile chez lui. */
.menu-mobile { max-height: calc(100vh - 66px); overflow-y: auto; overscroll-behavior: contain; }
@supports (height: 100dvh) { .menu-mobile { max-height: calc(100dvh - 66px); } }
.menu-mobile .wrap { padding-top: 10px; padding-bottom: 22px; }
@keyframes menu-entre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.menu-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu-liens a {
  display: flex; align-items: center; min-height: 47px;
  color: var(--texte); font: 400 15.5px 'Mulish', sans-serif;
  border-bottom: 1px solid var(--creme-trait);
}
.menu-liens li:last-child a { border-bottom: none; }
.menu-liens a:hover { color: var(--bleu); }
.menu-liens a[aria-current="page"] { color: var(--bleu); font-weight: 500; }

.menu-titre {
  margin: 20px 0 2px; color: var(--lagon);
  font: 500 11px 'Mulish', sans-serif;
  letter-spacing: .26em; text-transform: uppercase;
}
.menu-liens-second a { min-height: 43px; font-size: 14.5px; color: var(--texte-doux); }
.menu-liens-second a:hover { color: var(--bleu); }

@media (min-width: 1001px) { .menu-mobile { display: none; } }
@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}
/* Specificite volontaire : .btn { display: inline-flex } est declare
   plus bas dans la feuille et l'emporterait a spécificité égale. */
@media (max-width: 560px) { .entete-actions .entete-cta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .menu-mobile { animation: none; }
  .burger span { transition: none; }
}

/* ── Boutons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 30px; border-radius: 999px;
  font: 500 15px 'Mulish', sans-serif; box-sizing: border-box;
}
.btn-plein { background: var(--bleu); color: var(--creme); }
.btn-plein:hover { background: var(--bleu-clair); color: var(--creme); }
.btn-vide { border: 1px solid var(--bord-doux); color: var(--bleu); font-weight: 400; }
.btn-vide:hover { border-color: var(--bleu); color: var(--bleu); }
.btn-petit { height: 40px; padding: 0 20px; font-size: 13.5px; }

/* ── Cartes ───────────────────────────────────────────────── */
.carte {
  background: var(--creme-carte); border: 1px solid var(--creme-bord);
  border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.carte-titre { color: var(--bleu); font: 400 19px 'Marcellus', Georgia, serif; }
.carte p { font-size: 14.5px; line-height: 1.75; }

/* ── Listes de tarifs ─────────────────────────────────────── */
.tarifs { background: var(--creme-carte); border: 1px solid var(--creme-bord); border-radius: 18px; overflow: hidden; }
.tarifs .ligne { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; padding: 20px 24px; border-bottom: 1px solid var(--creme-trait); }
.tarifs .ligne:last-child { border-bottom: none; }

.ligne-texte { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.ligne-nom { color: var(--bleu); font: 500 15.5px 'Mulish', sans-serif; }
.ligne-desc { color: var(--texte); font: 300 14px/1.65 'Mulish', sans-serif; }
.ligne-prix { color: var(--cuivre); font: 500 15px 'Mulish', sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ligne-lien { color: var(--lagon-fonce); font: 500 14.5px 'Mulish', sans-serif; white-space: nowrap; }

/* Variante indigo (formations) */
.tarifs-nuit { background: linear-gradient(150deg, var(--indigo-haut), var(--indigo-bas)); border: none; }
.tarifs-nuit .ligne { border-bottom-color: rgba(127, 224, 236, .14); }
.tarifs-nuit .ligne-nom { color: var(--indigo-titre); }
.tarifs-nuit .ligne-desc { color: var(--indigo-texte); }
.tarifs-nuit .ligne-prix { color: var(--or); }
.tarifs-nuit .ligne-lien { color: var(--cyan); }
.tarifs-nuit .ligne-lien:hover { color: #c9ecf2; }

/* ── Sections indigo ──────────────────────────────────────── */
.nuit { position: relative; overflow: hidden; background: linear-gradient(var(--indigo-haut), var(--indigo-bas) 75%); }
.nuit h2, .nuit h3 { color: var(--indigo-titre); }
.nuit p { color: var(--indigo-texte); }
.nuit .eyebrow { color: var(--cyan); }
.nuit .mention { color: var(--indigo-faible); }

.halo {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(94, 200, 216, .13), transparent 60%);
  animation: respire 9s ease-in-out infinite;
}
@keyframes respire { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .85; transform: scale(1.07); } }
@keyframes derive  { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(3deg); } }

.etape { border: 1px solid rgba(127, 224, 236, .22); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.etape-num { color: var(--cyan); font: 400 13px 'Mulish', sans-serif; letter-spacing: .18em; }

/* ── Pastilles ────────────────────────────────────────────── */
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille { border: 1px solid #dcd0b8; color: var(--texte); border-radius: 999px; padding: 10px 18px; font: 300 14px 'Mulish', sans-serif; }
.nuit .pastille { border-color: rgba(217, 164, 91, .5); color: #e8cfa8; }

/* ── Photos ───────────────────────────────────────────────── */
.photo { position: relative; min-height: 260px; border-radius: 18px; overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Playlist : lecteur d'extrait, prix ───────────────────── */
.extrait { background: var(--creme-carte); border: 1px solid var(--creme-bord); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.extrait audio { width: 100%; }
.prix-bloc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.prix-gros { color: var(--bleu); font: 400 42px 'Marcellus', Georgia, serif; line-height: 1; }
.prix-note { color: var(--texte-doux); font: 300 13.5px 'Mulish', sans-serif; }
.btn[disabled] { opacity: .55; pointer-events: none; }
code { font: 400 13px ui-monospace, Menlo, Consolas, monospace; background: var(--creme-trait); padding: 2px 6px; border-radius: 5px; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { background: var(--creme-carte); border: 1px solid var(--creme-bord); border-radius: 14px; padding: 18px 22px; }
.faq > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--bleu); font: 500 15.5px 'Mulish', sans-serif; }
.faq > summary::-webkit-details-marker { display: none; }
.faq .chevron { color: var(--cuivre); font: 300 20px 'Mulish', sans-serif; transition: transform .3s; }
.faq[open] .chevron { transform: rotate(45deg); }
.faq p { margin-top: 14px; font-size: 14.5px; line-height: 1.75; }

/* ── Témoignages ──────────────────────────────────────────── */
.temoignage { margin: 0; background: var(--creme-carte); border: 1px solid var(--creme-bord); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.temoignage p { color: var(--bleu); font: italic 400 17px/1.7 'Marcellus', Georgia, serif; }
.temoignage figcaption { color: var(--texte-doux); font: 300 13px 'Mulish', sans-serif; letter-spacing: .08em; }

/* ── Planning ─────────────────────────────────────────────── */
.date { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--creme-carte); border: 1px solid var(--creme-bord); border-radius: 16px; padding: 20px 24px; }
.date-jour { color: var(--cuivre); font: 400 16px 'Marcellus', Georgia, serif; min-width: 110px; }
.date-info { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.date-lieu { color: var(--bleu); font: 500 15px 'Mulish', sans-serif; }
.date-detail { color: var(--texte-doux); font: 300 13px 'Mulish', sans-serif; }

/* ── Formulaire de contact ────────────────────────────────── */
.formulaire { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.formulaire input, .formulaire textarea {
  border-radius: 12px; border: 1px solid rgba(127, 224, 236, .3);
  background: rgba(250, 246, 238, .06); color: var(--indigo-titre);
  padding: 14px 18px; font-size: 15px; outline: none; box-sizing: border-box;
}
.formulaire input { height: 52px; padding-top: 0; padding-bottom: 0; }
.formulaire textarea { resize: vertical; }
.formulaire button { height: 54px; border-radius: 999px; border: none; background: var(--or); color: var(--indigo-bas); font: 600 15px 'Mulish', sans-serif; cursor: pointer; }

.lien-contact { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 999px; border: 1px solid rgba(127, 224, 236, .4); color: #e9edfb; font: 400 15px 'Mulish', sans-serif; }
.lien-contact:hover { border-color: var(--cyan); color: #fff; }
.lien-contact.whatsapp { background: linear-gradient(120deg, #5b9be0, var(--cyan)); color: var(--indigo-bas); font-weight: 600; border: none; }
.lien-contact.petit { height: 50px; font-size: 14px; border-color: rgba(127, 224, 236, .25); color: var(--indigo-texte); flex: 1; }

/* ── Pied de page ─────────────────────────────────────────── */
.pied { position: relative; border-top: 1px solid rgba(127, 224, 236, .15); }
.pied .wrap { padding-top: 60px; padding-bottom: 26px; }

/* Quatre colonnes : la marque, deux groupes de liens, le contact.
   Les liens sont empiles en listes plutot qu'en un seul pave qui
   s'enroule : sous 1000px le pied devient la seule navigation du
   site, la nav du header etant masquee. */
.pied-haut {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1.35fr 1.15fr;
  gap: 42px 38px;
  align-items: start;
}
.pied-haut-reduit { grid-template-columns: 1.4fr 1fr; max-width: 720px; }

.pied-bloc { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.pied-bloc-marque { gap: 18px; }

.pied-marque { display: flex; align-items: center; gap: 13px; }
.pied-marque img { display: block; width: 60px; height: 60px; border-radius: 10px; }
.pied-nom {
  color: var(--indigo-titre);
  font: 400 12px/1.5 'Marcellus', Georgia, serif;
  letter-spacing: .22em; text-transform: uppercase;
}

.pied-baseline { color: var(--indigo-texte); font: 300 13px/1.75 'Mulish', sans-serif; max-width: 32ch; }

.pied-insta { align-self: start; color: var(--cyan); font: 400 13px 'Mulish', sans-serif; }
.pied-insta:hover { color: #fff; }

/* Un intitule par colonne : c'est ce qui manquait pour que le pied
   se lise comme un plan et non comme une liste en vrac. */
.pied-titre {
  margin: 0; color: var(--cyan);
  font: 500 11px 'Mulish', sans-serif;
  letter-spacing: .26em; text-transform: uppercase;
}

.pied-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pied-liens a {
  color: var(--indigo-texte);
  font: 300 13.5px/1.45 'Mulish', sans-serif;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.pied-liens a:hover { color: #fff; border-bottom-color: rgba(127, 224, 236, .55); }

.pied-note { color: var(--indigo-faible); font: 300 12.5px/1.7 'Mulish', sans-serif; }

.pied-bas {
  margin-top: 46px; padding-top: 20px;
  border-top: 1px solid rgba(127, 224, 236, .12);
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between;
}
.pied-bas p { color: var(--indigo-faible); font: 300 12px/1.7 'Mulish', sans-serif; }

@media (max-width: 940px) {
  .pied-haut, .pied-haut-reduit { grid-template-columns: 1fr 1fr; gap: 36px 30px; }
}
@media (max-width: 540px) {
  .pied .wrap { padding-top: 44px; }
  .pied-haut, .pied-haut-reduit { grid-template-columns: 1fr; gap: 30px; }
  .pied-bas { margin-top: 34px; }
}

/* ── Fil d'Ariane ─────────────────────────────────────────── */
/* ── Fil d'Ariane ─────────────────────────────────────────────
   Une liste ordonnee, les chevrons poses par le CSS : ils sont
   decoratifs et n'ont rien a faire dans le HTML, ou un lecteur
   d'ecran les enoncerait. Ils reculent d'un ton pour que seuls
   les intitules portent le regard. ─────────────────────────── */
.ariane { padding: 20px 0 16px; }
.ariane ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  font: 300 13px 'Mulish', sans-serif;
}
.ariane li { display: flex; align-items: center; }

.ariane li + li::before {
  content: '\203A'; flex: none;
  margin: 0 10px; color: var(--bord-doux);
  font-size: 15px; line-height: 1;
}

.ariane a {
  color: var(--texte-doux);
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.ariane a:hover { color: var(--bleu); border-bottom-color: var(--bord-doux); }

/* La page courante ne se clique pas : elle s'affirme par la
   couleur pleine du texte, pas par un gras qui crierait. */
.ariane [aria-current="page"] { color: var(--texte); }

@media (max-width: 540px) {
  .ariane { padding: 16px 0 13px; }
  .ariane ol { font-size: 12.5px; }
  .ariane li + li::before { margin: 0 7px; }
}

/* ── Bouton flottant mobile ───────────────────────────────── */
.flottant {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 24px;
  border-radius: 999px; background: var(--bleu); color: var(--creme);
  font: 500 14.5px 'Mulish', sans-serif; box-shadow: 0 12px 30px rgba(11, 16, 48, .35);
}
.flottant:hover { color: var(--creme); }

/* ── Apparition au défilement ─────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
[data-reveal].on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════════════
   L'Argus bleu · couleurs, fleurs et papillons
   ──────────────────────────────────────────────────────────────
   Tout ce qui suit est décoratif. Les motifs viennent de l'Argus
   bleu — le petit papillon qui a donné son nom à l'activité — et
   des fleurs de la lande girondine dont il se nourrit : le lotier
   corniculé et la bruyère cendrée.

   Les dessins sont des SVG écrits dans la feuille elle-même, sous
   forme de variables --pap-… et --brin-… : aucun fichier à
   charger, aucune requête réseau. Pour retoucher un dessin, on
   modifie le SVG ; pour en changer la couleur, le %23xxxxxx qu'il
   contient (%23 est le caractère # encodé, obligatoire dans une
   url()). Le papillon est dessiné plein et non en trait : en
   dessous de 20 px, un contour se referme et se lit comme un cœur.

   Pour calmer l'ensemble : baisser les opacités de ce bloc.
   Pour tout retirer : supprimer ce bloc, le site reste entier.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Argus bleu, ailes ouvertes. Les deux points crème sur chaque
     aile sont ses ocelles ; ils ne se voient qu'en grand format. */
  --pap-argus:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='%234C63C4'><path d='M24 13 C20 6 12 1 7 4 C2 7 4 15 9 19 C13 22 20 20 24 18 Z'/><path d='M24 20 C19 21 11 24 10 29 C9 34 14 37 18 34 C22 31 24 26 24 24 Z'/><path d='M24 13 C28 6 36 1 41 4 C46 7 44 15 39 19 C35 22 28 20 24 18 Z'/><path d='M24 20 C29 21 37 24 38 29 C39 34 34 37 30 34 C26 31 24 26 24 24 Z'/><path d='M24 11 C25.6 11 26.4 14 26.4 20 C26.4 27 25.4 32 24 32 C22.6 32 21.6 27 21.6 20 C21.6 14 22.4 11 24 11 Z'/><path d='M24 12 C22 8 19 5 16 3.6 M24 12 C26 8 29 5 32 3.6' fill='none' stroke='%234C63C4' stroke-width='1.2' stroke-linecap='round'/><g fill='%23FAF6EE' opacity='.55'><circle cx='11' cy='11' r='1.4'/><circle cx='15.2' cy='8.4' r='1.1'/><circle cx='37' cy='11' r='1.4'/><circle cx='32.8' cy='8.4' r='1.1'/></g></svg>");
  --pap-bruyere: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='%23A9578F'><path d='M24 13 C20 6 12 1 7 4 C2 7 4 15 9 19 C13 22 20 20 24 18 Z'/><path d='M24 20 C19 21 11 24 10 29 C9 34 14 37 18 34 C22 31 24 26 24 24 Z'/><path d='M24 13 C28 6 36 1 41 4 C46 7 44 15 39 19 C35 22 28 20 24 18 Z'/><path d='M24 20 C29 21 37 24 38 29 C39 34 34 37 30 34 C26 31 24 26 24 24 Z'/><path d='M24 11 C25.6 11 26.4 14 26.4 20 C26.4 27 25.4 32 24 32 C22.6 32 21.6 27 21.6 20 C21.6 14 22.4 11 24 11 Z'/><path d='M24 12 C22 8 19 5 16 3.6 M24 12 C26 8 29 5 32 3.6' fill='none' stroke='%23A9578F' stroke-width='1.2' stroke-linecap='round'/><g fill='%23FAF6EE' opacity='.55'><circle cx='11' cy='11' r='1.4'/><circle cx='15.2' cy='8.4' r='1.1'/><circle cx='37' cy='11' r='1.4'/><circle cx='32.8' cy='8.4' r='1.1'/></g></svg>");
  --pap-lagon:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='%233da4b6'><path d='M24 13 C20 6 12 1 7 4 C2 7 4 15 9 19 C13 22 20 20 24 18 Z'/><path d='M24 20 C19 21 11 24 10 29 C9 34 14 37 18 34 C22 31 24 26 24 24 Z'/><path d='M24 13 C28 6 36 1 41 4 C46 7 44 15 39 19 C35 22 28 20 24 18 Z'/><path d='M24 20 C29 21 37 24 38 29 C39 34 34 37 30 34 C26 31 24 26 24 24 Z'/><path d='M24 11 C25.6 11 26.4 14 26.4 20 C26.4 27 25.4 32 24 32 C22.6 32 21.6 27 21.6 20 C21.6 14 22.4 11 24 11 Z'/><path d='M24 12 C22 8 19 5 16 3.6 M24 12 C26 8 29 5 32 3.6' fill='none' stroke='%233da4b6' stroke-width='1.2' stroke-linecap='round'/><g fill='%23FAF6EE' opacity='.55'><circle cx='11' cy='11' r='1.4'/><circle cx='15.2' cy='8.4' r='1.1'/><circle cx='37' cy='11' r='1.4'/><circle cx='32.8' cy='8.4' r='1.1'/></g></svg>");
  --pap-or:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='%23D9A45B'><path d='M24 13 C20 6 12 1 7 4 C2 7 4 15 9 19 C13 22 20 20 24 18 Z'/><path d='M24 20 C19 21 11 24 10 29 C9 34 14 37 18 34 C22 31 24 26 24 24 Z'/><path d='M24 13 C28 6 36 1 41 4 C46 7 44 15 39 19 C35 22 28 20 24 18 Z'/><path d='M24 20 C29 21 37 24 38 29 C39 34 34 37 30 34 C26 31 24 26 24 24 Z'/><path d='M24 11 C25.6 11 26.4 14 26.4 20 C26.4 27 25.4 32 24 32 C22.6 32 21.6 27 21.6 20 C21.6 14 22.4 11 24 11 Z'/><path d='M24 12 C22 8 19 5 16 3.6 M24 12 C26 8 29 5 32 3.6' fill='none' stroke='%23D9A45B' stroke-width='1.2' stroke-linecap='round'/></svg>");
  --pap-cyan:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='%237FE0EC'><path d='M24 13 C20 6 12 1 7 4 C2 7 4 15 9 19 C13 22 20 20 24 18 Z'/><path d='M24 20 C19 21 11 24 10 29 C9 34 14 37 18 34 C22 31 24 26 24 24 Z'/><path d='M24 13 C28 6 36 1 41 4 C46 7 44 15 39 19 C35 22 28 20 24 18 Z'/><path d='M24 20 C29 21 37 24 38 29 C39 34 34 37 30 34 C26 31 24 26 24 24 Z'/><path d='M24 11 C25.6 11 26.4 14 26.4 20 C26.4 27 25.4 32 24 32 C22.6 32 21.6 27 21.6 20 C21.6 14 22.4 11 24 11 Z'/><path d='M24 12 C22 8 19 5 16 3.6 M24 12 C26 8 29 5 32 3.6' fill='none' stroke='%237FE0EC' stroke-width='1.2' stroke-linecap='round'/></svg>");

  /* Fleurettes pleines, pour les petits repères. */
  --fleurette-cuivre: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='%23C08552' fill-opacity='.8'><circle cx='8' cy='3.4' r='2.5'/><circle cx='12.4' cy='6.6' r='2.5'/><circle cx='10.7' cy='11.8' r='2.5'/><circle cx='5.3' cy='11.8' r='2.5'/><circle cx='3.6' cy='6.6' r='2.5'/></g><circle cx='8' cy='7.9' r='2' fill='%23E3A81E'/></svg>");
  --fleurette-or:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='%23D9A45B' fill-opacity='.85'><circle cx='8' cy='3.4' r='2.5'/><circle cx='12.4' cy='6.6' r='2.5'/><circle cx='10.7' cy='11.8' r='2.5'/><circle cx='5.3' cy='11.8' r='2.5'/><circle cx='3.6' cy='6.6' r='2.5'/></g><circle cx='8' cy='7.9' r='2' fill='%237FE0EC'/></svg>");

  /* Brins en noir : ils servent de masques, la couleur vient du CSS. */
  --brin-lotier:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 54' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'><path d='M21 54 C21 42 20 34 23 26'/><path d='M20 44 C14 43 11 39 11 39 C11 39 16 37 20 40'/><path d='M22 35 C28 34 31 30 31 30 C31 30 26 28 22 31'/><path d='M23 26 C17 24 15 18 18 14 C21 10 27 11 28 16 C29 21 27 25 23 26 Z'/><path d='M28 22 C24 17 26 11 30 10 C34 9 37 13 35 17 C33 21 30 23 28 22 Z'/></svg>");
  --brin-bruyere: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 62' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'><path d='M15 62 C15 48 13.5 34 15.5 17'/><g fill='%23000' stroke='none'><circle cx='10' cy='48' r='3'/><circle cx='21' cy='43.5' r='2.9'/><circle cx='9.8' cy='38.5' r='2.8'/><circle cx='20.6' cy='33.5' r='2.6'/><circle cx='10.4' cy='28.5' r='2.4'/><circle cx='19.8' cy='23.5' r='2.2'/><circle cx='15' cy='17.5' r='2'/></g></svg>");

  /* Semis du fond : un motif perdu dans une très grande tuile
     transparente. Trois tuiles de tailles différentes, donc un
     raccord qui ne se voit pas. Compter un ou deux brins par
     écran — au-delà, ce n'est plus une texture, c'est un décor. */
  --semis-lotier:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 860 860' fill='none' stroke='%234C63C4' stroke-opacity='.14' stroke-width='1.5' stroke-linecap='round'><g transform='translate(88 612) scale(1.7)'><path d='M21 54 C21 42 20 34 23 26'/><path d='M20 44 C14 43 11 39 11 39 C11 39 16 37 20 40'/><path d='M22 35 C28 34 31 30 31 30 C31 30 26 28 22 31'/><path d='M23 26 C17 24 15 18 18 14 C21 10 27 11 28 16 C29 21 27 25 23 26 Z'/><path d='M28 22 C24 17 26 11 30 10 C34 9 37 13 35 17 C33 21 30 23 28 22 Z'/></g></svg>");
  --semis-bruyere:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1040 1040' fill='none' stroke='%23A9578F' stroke-opacity='.13' stroke-width='1.5' stroke-linecap='round'><g transform='translate(690 168) rotate(14) scale(1.6)'><path d='M15 62 C15 48 13.5 34 15.5 17'/><g fill='%23A9578F' fill-opacity='.13' stroke='none'><circle cx='10' cy='48' r='3'/><circle cx='21' cy='43.5' r='2.9'/><circle cx='9.8' cy='38.5' r='2.8'/><circle cx='20.6' cy='33.5' r='2.6'/><circle cx='10.4' cy='28.5' r='2.4'/><circle cx='19.8' cy='23.5' r='2.2'/><circle cx='15' cy='17.5' r='2'/></g></g></svg>");
  --semis-papillon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1240 1240' fill='%233da4b6' fill-opacity='.11'><g transform='translate(872 470) rotate(-12) scale(1.5)'><path d='M24 13 C20 6 12 1 7 4 C2 7 4 15 9 19 C13 22 20 20 24 18 Z'/><path d='M24 20 C19 21 11 24 10 29 C9 34 14 37 18 34 C22 31 24 26 24 24 Z'/><path d='M24 13 C28 6 36 1 41 4 C46 7 44 15 39 19 C35 22 28 20 24 18 Z'/><path d='M24 20 C29 21 37 24 38 29 C39 34 34 37 30 34 C26 31 24 26 24 24 Z'/><path d='M24 11 C25.6 11 26.4 14 26.4 20 C26.4 27 25.4 32 24 32 C22.6 32 21.6 27 21.6 20 C21.6 14 22.4 11 24 11 Z'/></g><g transform='translate(210 176) rotate(8)'><path d='M24 13 C20 6 12 1 7 4 C2 7 4 15 9 19 C13 22 20 20 24 18 Z'/><path d='M24 20 C19 21 11 24 10 29 C9 34 14 37 18 34 C22 31 24 26 24 24 Z'/><path d='M24 13 C28 6 36 1 41 4 C46 7 44 15 39 19 C35 22 28 20 24 18 Z'/><path d='M24 20 C29 21 37 24 38 29 C39 34 34 37 30 34 C26 31 24 26 24 24 Z'/><path d='M24 11 C25.6 11 26.4 14 26.4 20 C26.4 27 25.4 32 24 32 C22.6 32 21.6 27 21.6 20 C21.6 14 22.4 11 24 11 Z'/></g></svg>");

  /* Teinte par défaut des éléments qui alternent (voir plus bas). */
  --teinte: var(--lagon);
}

/* ── Le semis du fond ─────────────────────────────────────────
   Une texture de papier, pas un papier peint : à peine visible,
   c'est voulu. ─────────────────────────────────────────────── */
body {
  background-image: var(--semis-lotier), var(--semis-bruyere), var(--semis-papillon);
  background-position: 0 0, 120px 60px, 40px 180px;
  background-size: 860px 860px, 1040px 1040px, 1240px 1240px;
  background-attachment: fixed;
}

/* ── Vol des papillons ────────────────────────────────────────
   .pap est un papillon posé où on veut : la taille et la place
   en style en ligne, la couleur par la classe, le reste par
   l'animation. ─────────────────────────────────────────────── */
.pap {
  position: absolute; display: block; pointer-events: none;
  background: center/contain no-repeat;
  animation: vole 9s ease-in-out infinite;
}
.pap-argus   { background-image: var(--pap-argus); }
.pap-bruyere { background-image: var(--pap-bruyere); }
.pap-lagon   { background-image: var(--pap-lagon); }
.pap-or      { background-image: var(--pap-or); }
.pap-cyan    { background-image: var(--pap-cyan); }

@keyframes vole {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
  25%      { transform: translate3d(7px, -15px, 0) rotate(4deg); }
  50%      { transform: translate3d(-5px, -24px, 0) rotate(-3deg); }
  75%      { transform: translate3d(-10px, -10px, 0) rotate(6deg); }
}

/* Deux papillons dans chaque section indigo : tout le site en
   hérite, sans une ligne de HTML. Le pied de page en est exclu —
   il occupe déjà ses pseudo-éléments avec les festons. */
.nuit:not(.pied)::before,
.nuit:not(.pied)::after {
  content: ''; position: absolute; display: block; pointer-events: none;
  background: center/contain no-repeat;
  animation: vole 11s ease-in-out infinite;
}
.nuit:not(.pied)::before { width: 30px; height: 25px; left: 2.5%; bottom: 26%; background-image: var(--pap-cyan); opacity: .4; }
.nuit:not(.pied)::after  { width: 22px; height: 18px; right: 34%; bottom: 22%; background-image: var(--pap-or);   opacity: .45; animation-duration: 8s; animation-delay: -3s; }

/* ── Le papillon des surtitres ────────────────────────────────
   Il ouvre chaque « eyebrow » du site. Immobile : le mouvement
   est réservé aux papillons en vol, sinon la page s'agite. ──── */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before {
  content: ''; flex: none; width: 15px; height: 12.5px;
  background: var(--pap-lagon) center/contain no-repeat;
}
.nuit .eyebrow::before { background-image: var(--pap-cyan); }

/* ── Alternance des teintes ───────────────────────────────────
   Cartes, témoignages et pastilles prennent à tour de rôle les
   quatre couleurs de la lande. Une seule règle sert partout. ── */
.carte:nth-child(4n+1), .temoignage:nth-child(4n+1), .pastille:nth-child(4n+1) { --teinte: var(--argus); }
.carte:nth-child(4n+2), .temoignage:nth-child(4n+2), .pastille:nth-child(4n+2) { --teinte: var(--bruyere); }
.carte:nth-child(4n+3), .temoignage:nth-child(4n+3), .pastille:nth-child(4n+3) { --teinte: var(--lunule); }
.carte:nth-child(4n),   .temoignage:nth-child(4n),   .pastille:nth-child(4n)   { --teinte: var(--lagon); }

/* ── Cartes : l'ocelle et le brin ─────────────────────────────
   L'ocelle est l'œil cerclé du dessous de l'aile de l'Argus. Il
   marque le coin de chaque carte, dans la teinte du tour. Le brin
   de lotier en filigrane est un masque : il prend la même. ──── */
.carte { position: relative; overflow: hidden; transition: border-color .35s, transform .35s; }
.carte::before {
  content: ''; position: absolute; right: -10px; bottom: -12px;
  width: 84px; height: 100px; background: var(--teinte); opacity: .1; pointer-events: none;
  -webkit-mask: var(--brin-lotier) right bottom/contain no-repeat;
          mask: var(--brin-lotier) right bottom/contain no-repeat;
}
/* Le titre s'arrête avant l'ocelle, sinon un titre long passe dessous. */
.carte-titre { padding-right: 22px; }
.carte::after {
  content: ''; position: absolute; top: 17px; right: 17px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--teinte); background: var(--creme-carte);
}
a.carte:hover { border-color: var(--teinte); transform: translateY(-3px); }

/* Les cartes des sections indigo gardent leur fond : on éclaircit. */
.nuit .carte { background: transparent; border-color: rgba(127, 224, 236, .22); }
.nuit .carte::after { background: var(--indigo-haut); }

/* ── Témoignages ──────────────────────────────────────────── */
.temoignage { position: relative; overflow: hidden; }
.temoignage::before {
  content: ''; position: absolute; right: -14px; top: -10px;
  width: 76px; height: 130px; background: var(--teinte); opacity: .09; pointer-events: none;
  -webkit-mask: var(--brin-bruyere) right top/contain no-repeat;
          mask: var(--brin-bruyere) right top/contain no-repeat;
}
.temoignage figcaption { color: var(--teinte); }

/* ── Pastilles ────────────────────────────────────────────── */
.pastille { border-color: var(--teinte); }
.nuit .pastille { border-color: var(--teinte); color: #e8cfa8; }

/* ── Listes de tarifs ─────────────────────────────────────────
   Un filet de couleur à gauche de chaque ligne, qui s'épaissit
   au survol : on voit tout de suite quelle prestation on vise. */
.tarifs .ligne { position: relative; isolation: isolate; }
.tarifs .ligne:nth-child(4n+1) { --teinte: var(--argus); }
.tarifs .ligne:nth-child(4n+2) { --teinte: var(--bruyere); }
.tarifs .ligne:nth-child(4n+3) { --teinte: var(--lunule); }
.tarifs .ligne:nth-child(4n)   { --teinte: var(--lagon); }
.tarifs .ligne::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--teinte); opacity: 0; transition: opacity .35s;
}
.tarifs .ligne::after {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--teinte); opacity: .5; transition: opacity .35s, width .35s;
}
.tarifs .ligne:hover::before { opacity: .06; }
.tarifs .ligne:hover::after  { opacity: 1; width: 5px; }
.tarifs-nuit .ligne:hover::before { opacity: .12; }

/* ── Planning : une fleurette par date ───────────────────────── */
.date-jour { display: flex; align-items: center; gap: 9px; }
.date-jour::before {
  content: ''; flex: none; width: 15px; height: 15px;
  background: var(--fleurette-cuivre) center/contain no-repeat;
}
.nuit .date-jour::before { background-image: var(--fleurette-or); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { transition: border-color .35s; }
.faq:hover, .faq[open] { border-color: #e2d3bb; }
.faq[open] .chevron { color: var(--bruyere); }

/* ── Citation : une fleurette en ouverture ───────────────────── */
.citation::before {
  content: ''; display: block; width: 20px; height: 20px; margin: 0 auto 12px;
  background: var(--fleurette-cuivre) center/contain no-repeat;
}

/* ── Fleuron : séparateur de section ─────────────────────────
   Un filet qui s'interrompt sur une fleurette. À poser entre
   deux sections : <div class="fleuron"><i></i></div> ────────── */
.fleuron { display: flex; align-items: center; gap: 16px; }
.fleuron::before, .fleuron::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bord-doux), transparent);
}
.fleuron > i {
  display: block; width: 22px; height: 22px; flex: none;
  background: var(--fleurette-cuivre) center/contain no-repeat;
}

/* ── Lunules : le bord d'aile de l'Argus ─────────────────────
   La rangée de croissants orange qui borde l'aile de l'Argus,
   reprise en feston. Elle ferme le haut de l'accueil et le pied
   de chaque page : deux serre-livres. ──────────────────────── */
.pied { position: relative; }
.pied::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px; pointer-events: none;
  background: radial-gradient(circle 13px at 13px 21px, transparent 11.2px, rgba(217, 164, 91, .38) 11.4px 12.4px, transparent 12.6px) 0 0/26px 16px repeat-x;
}
.modalites { position: relative; }
.modalites::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px; pointer-events: none;
  background: radial-gradient(circle 13px at 13px 21px, transparent 11.2px, rgba(224, 138, 75, .3) 11.4px 12.4px, transparent 12.6px) 0 0/26px 16px repeat-x;
}

/* Une fleurette devant chacune des trois façons de venir. */
.modalites .pile > span:first-child { display: flex; align-items: center; gap: 9px; }
.modalites .pile > span:first-child::before {
  content: ''; flex: none; width: 16px; height: 16px;
  background: var(--fleurette-cuivre) center/contain no-repeat;
}

/* ── Écrans étroits ───────────────────────────────────────────
   Le semis et les papillons de halo disparaissent : sur un
   téléphone, la place manque et le texte prime. ─────────────── */
@media (max-width: 700px) {
  body { background-image: none; }
  .nuit:not(.pied)::before, .nuit:not(.pied)::after { display: none; }
  .carte::before, .temoignage::before { opacity: .07; }
}