/* Charlotte Bard — feuille principale (intégration v1, 15/10/2026 ; premier écran « carte de visite » le même jour).
   Chargée après css/fonts.css (polices hébergées sur le site) et avant
   css/animations.css puis css/reservation.css, qui ont chacune leur périmètre. */

:root {
  /* Les codes couleurs de la carte de visite, et rien d'autre (15/10/2026, « codes couleurs ») : relevés sur
     les photos du recto et du verso, balance des blancs corrigée sur le papier
     (_chantier/codes-couleurs/releve_carte.py ; contrastes WCAG : palette.py et contraste_pixels.py).
     Plus aucun fond sombre : ni nuit, ni prune, ni noir. Fonds : papier, crème, rose poudré, blanc.
     Rapports de contraste : sur blanc / papier / rose poudré. */
  /* Fonds */
  --papier: #FFFCF8;   /* le papier de la carte : premier écran, demande de date, pages merci et erreur */
  --creme: #FBF6EF;    /* fond de page */
  --poudre: #FAEDE7;   /* rose poudré : le lavis le plus clair de l'aquarelle (sections alternées, pied, formule Mariage) */
  --ligne: #EDD9D0;    /* filets et bords de cartes, rosés */
  /* Aquarelle (décor seulement, jamais pour du texte) */
  --corail-clair: #F6C3B6;
  --corail: #EB8F7A;
  /* Encres */
  --encre: #3A302D;    /* gris chaud foncé de la phrase de la carte : texte et titres (12,8 / 12,5 / 11,2:1) */
  --gris: #473C38;     /* « BARD » : gris chaud (10,7 / 10,4 / 9,3:1) */
  --doux: #6A5D58;     /* texte secondaire, gris chaud (6,3 / 6,2 / 5,5:1) */
  --rose: #B5675B;     /* le rose-rouge du nom « Charlotte » : titres, grands mots, décor (4,2 / 4,1 / 3,6:1 : grand texte) */
  --rose-fonce: #93574F; /* le rose de « CHANTEUSE » et des libellés du verso : texte rose (5,7 / 5,5 / 4,9:1) */
  --or: #C9A27A;       /* l'or du petit cœur : petites touches (cœurs, filets, cadres des photos), jamais du texte */
  /* Action : une seule couleur, le rose-rouge du nom (même teinte, plus sombre) pour tenir 4,5:1 avec le
     texte blanc des boutons ET en texte sur le rose poudré (boutons en contour) : blanc dessus 5,3:1 ;
     en texte 5,3 / 5,2 / 4,7:1. Survol : 6,6:1 avec le blanc. */
  --action: #A35549;
  --action-fonce: #8E4A40;
  --picto: #5E4F4B;    /* traits des pictogrammes et des notes, gris chaud comme au verso */
  --nav-h: 69px;
  --rayon: 18px;
  --gouttiere: 16px;
  --ombre: 0 18px 40px -22px rgba(71, 60, 56, .32);
  --erreur: #A13F35;   /* message d'erreur : rose-rouge profond (6,4 / 6,3 / 5,6:1), toujours avec le picto « ! » */
  --bord-champ: #877771; /* bord des champs, gris chaud (4,3 / 4,2 / 3,7:1 : au moins 3:1) */
  --focus: var(--gris); /* anneau de focus : le gris de BARD (au moins 8,9:1 sur tous les fonds) */
  --duree-courte: 180ms;
  --duree: 320ms;
  --duree-longue: 700ms;
  --courbe: cubic-bezier(.2, .7, .2, 1);
  --courbe-sortie: cubic-bezier(.4, 0, 1, 1);
}
@media (min-width: 700px) { :root { --gouttiere: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: "DM Sans", "DM Sans Repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 {
  font-family: "Fraunces", "Fraunces Repli", Georgia, serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}
/* Mot fort des titres : le rose-rouge du nom sur la carte (titres ≥ 32 px : 3:1 suffit) */
h1 em, h2 em { font-style: italic; color: var(--rose); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.conteneur { width: min(1140px, 100% - 2 * var(--gouttiere)); margin-inline: auto; }
/* Noms composés qu'on ne coupe pas au trait d'union (« Bouches-/du-Rhône ») */
.sans-coupure { white-space: nowrap; }
/* Texte lu par les lecteurs d'écran seulement (ex. « (nouvel onglet) ») */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bandeau de maquette (à retirer à la mise en ligne) : corail clair de l'aquarelle, texte à l’encre (8,2:1) */
.maquette {
  margin: 0;
  padding: 7px var(--gouttiere);
  background: var(--corail-clair);
  color: var(--encre);
  font-size: .82rem;
  font-weight: 500;
  text-align: center;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--corail-clair);  /* lavis d'aquarelle de la carte, texte à l'encre (10:1), bord rose du nom */
  color: var(--encre);
  box-shadow: inset 0 0 0 1.5px var(--rose);
  font: 700 1rem/1.2 "DM Sans", "DM Sans Repli", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree-courte, 180ms), color var(--duree-courte, 180ms), transform var(--duree-courte, 180ms);
}
.btn:hover { background: var(--corail); transform: translateY(-1px); }  /* encre sur corail : 5,3:1 */
.btn-petit { min-height: 44px; padding: 10px 18px; font-size: .92rem; }
/* Boutons secondaires : en contour, la même couleur d'action (.btn-fantome, nom gardé : Retour, réseaux,
   « Copier ma demande », « Faire une autre demande », est le même bouton que .btn-ligne). Au survol, ils se
   remplissent. Texte et contour sur blanc, papier, crème et rose poudré : 4,7:1 au moins. */
.btn-ligne,
.btn-fantome { background: transparent; color: var(--action); box-shadow: inset 0 0 0 1.5px var(--action); }
.btn-ligne:hover,
.btn-fantome:hover { background: var(--action); color: #fff; }

/* Barre de navigation : le papier de la carte (68 px + 1 px de filet = --nav-h) */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 252, 248, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(181, 103, 91, .2);
  color: var(--encre);
}
.nav .conteneur { display: flex; align-items: center; gap: 28px; height: calc(var(--nav-h) - 1px); }
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  text-decoration: none;
  color: var(--encre);
}
.logo .logotype { --logo-taille: 1.95rem; }
.nav-liens { display: flex; gap: 28px; }
/* Zone de clic de 44 px ; les marges négatives gardent la barre (et son filet) à sa place.
   Encre pleine : les liens passent sur la tache d'aquarelle du coin quand la barre est transparente. */
.nav-liens a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; color: var(--encre); text-decoration: none; font-size: .95rem; }
.nav-liens a:hover { color: var(--encre); text-decoration: underline 1.5px var(--rose); text-underline-offset: 6px; }
/* Accueil : la barre se pose sur le haut du héros (marge négative, le héros réserve la place). Tant que le
   grand logotype du héros est entièrement visible, elle est transparente et son petit logo s'efface :
   un seul logotype à l'écran. visibility retire aussi le lien du parcours clavier. */
.nav-heros { margin-bottom: calc(-1 * var(--nav-h)); }
html.logo-heros-visible .nav-heros {
  background-color: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.logo-heros-visible .nav-heros .logo { opacity: 0; visibility: hidden; }
/* Rien ne se coupe dans la barre : logo, liens et bouton tiennent chacun sur une ligne */
.nav-liens a, .nav .btn-petit { white-space: nowrap; }

/* Logotype de la carte de visite : « Charlotte » manuscrit, « BARD » en capitales espacées, filet au cœur.
   Une seule taille à régler (--logo-taille) ; tout le reste en suit. Couleurs de la carte partout (barre,
   héros, pied de page, pages) ; --logo-prenom et --logo-nom permettent de les redéfinir au besoin.
   Ephesis n'a qu'un style droit : font-style italic + font-synthesis: none donne Ephesis telle quelle,
   et une italique vraie (Fraunces, Georgia) si Ephesis manque. La hauteur de ligne fixe évite tout
   saut de mise en page quand la police arrive. */
.logotype {
  --logo-taille: 2rem;
  display: inline-grid;
  justify-items: center;
  margin: 0;
  font-size: var(--logo-taille);
  line-height: 1;
  white-space: nowrap;
}
.logotype-prenom {
  padding-inline: .14em;
  font-family: "Ephesis", "Ephesis Repli", "Fraunces", "Fraunces Repli", Georgia, serif;
  font-size: 1em;
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.1;
  color: var(--logo-prenom, var(--rose));
}
.logotype-nom {
  margin-top: -.06em;
  padding-left: .58em; /* équilibre l'espacement laissé après le D */
  font-family: "Fraunces", "Fraunces Repli", Georgia, serif;
  font-size: .34em;
  font-weight: 400;
  letter-spacing: .58em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--logo-nom, var(--gris));
}
/* Filet au cœur doré (sous BARD, sous « Les occasions ») */
.logotype-filet,
.filet-coeur {
  display: flex;
  align-items: center;
  gap: .55em;
  color: var(--or);
}
.logotype-filet { width: 6.4em; margin-top: .3em; font-size: .34em; }
.logotype-filet::before, .logotype-filet::after,
.filet-coeur::before, .filet-coeur::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .7; }
.logotype-filet svg { flex: none; width: .5em; height: auto; }
.filet-coeur svg { flex: none; width: 1.05em; height: auto; }
/* Barre : version compacte, tout tient dans les 68 px */
.logo .logotype-nom { margin-top: -.16em; }
.logo .logotype-filet { width: 5.4em; margin-top: .14em; }
.logo .logotype-filet svg, .logotype-pied .logotype-filet svg { width: .8em; }
@media (max-width: 359.98px) { .logo .logotype { --logo-taille: 1.75rem; } }
@media (max-width: 900px) { .nav-liens { display: none; } }
/* De 901 à 1099 px, menu court : « Formules » au lieu de « Formules et tarifs » (span .nav-suite,
   qui commence par   : une espace simple serait avalée dans le lien en inline-flex), espacements
   resserrés. Les 5 rubriques restent accessibles et tout tient sur une ligne, avec au moins
   24 px de réserve à 901 px (mesuré avec Fraunces et DM Sans, puis avec les polices de repli). */
@media (min-width: 901px) and (max-width: 1099.98px) {
  .nav .conteneur { gap: 18px; }
  .nav-liens { gap: 16px; }
  .nav-suite { display: none; }
  /* Depuis le logotype et le lien « Charlotte » (15/10/2026) : réserve à 901 px de 51 px avec Ephesis,
     21 px si aucune police n'arrive (Georgia italique brute, system-ui), jamais de débordement
     (_chantier/identite-carte/nav.py et nav_repli.py). */
  .logo .logotype { --logo-taille: 1.8rem; }
}

/* Héros : le recto de la carte de visite. Papier à grain très léger, grande tache d'aquarelle dans le coin
   haut droit de la page (sous la barre transparente), logotype centré comme sur la carte, portrait dans
   l'arche avec son cadre or décalé, tache et notes de musique sous le coin bas gauche de la photo.
   Les taches sont des pseudo-éléments (décor, hors de l'arbre d'accessibilité, aucun décalage de mise en
   page) et ne passent sous aucun texte du héros : contrastes mesurés au pixel (_chantier/derniere-passe). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--nav-h) + 44px) 0 80px;
  color: var(--encre);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E") var(--papier);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: clamp(250px, 44vw, 720px);
  aspect-ratio: 680 / 520;
  background: url("img/aquarelle-2.webp") top right / contain no-repeat;
  transform-origin: 100% 0;
  pointer-events: none;
}
.hero-grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 72px;
  align-items: center;
}
/* Texte centré, comme sur la carte */
.hero-texte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-marque { display: grid; justify-items: center; }
.logotype-heros {
  --logo-taille: clamp(4.2rem, 2.6rem + 5vw, 7rem);
  --logo-prenom: var(--rose);
  --logo-nom: var(--gris);
}
/* Surtitres des sections : capitales espacées au rose de « CHANTEUSE », comme sur la carte (5,5:1 sur papier,
   4,9:1 sur rose poudré) */
.surtitre {
  margin: 0 0 16px;
  color: var(--rose-fonce);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* « CHANTEUSE » sous le filet au cœur, en capitales roses espacées (5,5:1 sur le papier). C'est le h1 de la page
   (« Charlotte Bard, » y est lu par les lecteurs d'écran) : il garde la police et l'interligne du texte. */
.hero .surtitre {
  margin: .9em 0 0;
  padding-left: .42em; /* équilibre l'espacement laissé après la dernière lettre */
  color: var(--rose-fonce);
  font-family: inherit;
  font-size: clamp(.84rem, .74rem + .4vw, 1.06rem);
  font-weight: 500;
  line-height: inherit;
  letter-spacing: .42em;
}
.hero .surtitre::before { display: none; }
.hero .slogan { margin: 30px 0 20px; font-family: "Fraunces", "Fraunces Repli", Georgia, serif; font-weight: 500; font-size: clamp(2rem, 1.25rem + 2.3vw, 3.2rem); line-height: 1.08; letter-spacing: -.01em; color: var(--encre); text-wrap: balance; }
.hero .slogan em { font-style: italic; color: var(--rose); }
/* Téléphone : chaque groupe du slogan (« Une voix douce », « pour accompagner », « vos plus beaux moments »)
   tient sur sa ligne de 320 à 479 px (7,6vw ; 24 px au moins : le mot rose reste un grand texte, 3:1). */
@media (max-width: 479.98px) { .hero .slogan { font-size: clamp(1.5rem, 7.6vw, 2.15rem); margin-top: 26px; } }
.chapo { max-width: 31em; margin: 0 0 30px; font-size: 1.12rem; color: var(--doux); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.atouts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: #5D514D; /* gris chaud, un peu plus soutenu que --doux (7,6:1 sur papier) */
}
.atouts li { display: flex; align-items: center; gap: 9px; }
.atouts li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
}

/* Portrait dans l'arche, cadre or décalé, tache d'aquarelle et notes de musique (comme au recto) */
.hero-photo { position: relative; isolation: isolate; margin: 0; justify-self: center; width: min(400px, 100%); }
.arche {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 26px 26px;
  box-shadow: 0 34px 64px -32px rgba(71, 60, 56, .45);
}
.arche img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16px -16px -16px 16px;
  border: 1.5px solid var(--or);
  border-radius: 999px 999px 30px 30px;
  pointer-events: none;
}
.hero-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -30%;
  bottom: -12%;
  width: 58%;
  aspect-ratio: 520 / 640;
  background: url("img/aquarelle-3.webp") center / contain no-repeat;
  transform-origin: 60% 60%;
  pointer-events: none;
}
.hero-notes {
  position: absolute;
  right: calc(100% + 4px);
  bottom: 4%;
  width: clamp(64px, 7.5vw, 100px);
  color: var(--picto);
  pointer-events: none;
}
.hero-notes svg { width: 100%; height: auto; overflow: visible; }
.hero-badge {
  position: absolute;
  right: -20px;
  bottom: 34px;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 1px rgba(181, 103, 91, .28), 0 16px 30px -14px rgba(71, 60, 56, .4);
  color: var(--rose-fonce);
  font-size: .85rem;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
}
.hero-badge span { color: var(--doux); }
.hero-badge strong { display: block; color: var(--encre); font-weight: 700; }
.hero-badge:hover { box-shadow: 0 0 0 1.5px var(--rose-fonce), 0 16px 30px -14px rgba(71, 60, 56, .4); }

/* Deux colonnes serrées (901 à 1099 px) */
@media (min-width: 901px) and (max-width: 1099.98px) {
  .hero-grille { gap: 48px; }
  /* Colonne de texte étroite : la tache se resserre contre la photo ; les notes, sans place entre le
     texte et la photo, attendent la mise en page suivante */
  .hero-photo::before { left: -15%; width: 46%; }
  .hero-notes { display: none; }
  .hero-badge { right: -12px; }
}
@media (max-width: 900px) {
  .hero { padding: calc(var(--nav-h) + 26px) 0 72px; }
  .hero-grille { grid-template-columns: 1fr; gap: 52px; }
  .hero-photo { width: min(340px, 74%); }
  .hero-badge { right: -12px; bottom: 24px; }
}
@media (max-width: 560px) {
  .hero::before { top: -26px; width: 230px; }
  /* La photo glisse à droite : les notes gardent leur place à sa gauche */
  .hero-photo { justify-self: end; margin-right: 18px; }
  .hero-notes { right: calc(100% + 2px); width: 56px; }
  .hero-badge { right: -14px; }
}
/* Petits téléphones : la tache remonte, le prénom reste sur le papier nu comme sur la carte */
@media (max-width: 400px) { .hero::before { top: -46px; width: 205px; } }

/* Aquarelle : taches corail générées (img/aquarelle-*.webp, _chantier/images-carte/outils/aquarelle2.py),
   purement décoratives. Toujours en pseudo-éléments (hors de l'arbre d'accessibilité), en position absolue
   (aucun décalage de mise en page), jamais sous du texte dense : contrastes vérifiés au pixel
   (_chantier/derniere-passe/contraste_pixels.py). Une tache « de coin » est coupée par deux bords : on la pose
   toujours contre un bord visible (bord de l'écran, de la carte, ou changement de fond d'une section).
   Coin bas droit d'une section claire (la tache 1, retournée : chargée dans le coin) */
.aquarelle-coin { position: relative; overflow: clip; isolation: isolate; }
.aquarelle-coin::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: clamp(200px, 30vw, 420px);
  aspect-ratio: 720 / 560;
  background: url("img/aquarelle-1.webp") center / contain no-repeat;
  rotate: 180deg;
  opacity: .85;
  pointer-events: none;
}

/* Les occasions : le verso de la carte, en carte blanche posée sur le même papier que le héros (le recto).
   Le rose poudré de la section Charlotte commence juste en dessous : sa tache de coin s'appuie sur ce bord. */
.occasions { padding: 8px 0 80px; background: var(--papier); }
.occasions-carte {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: 34px 24px 38px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre);
}
.occasions-carte::before,
.occasions-carte::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(200px, 30%, 340px);
  aspect-ratio: 720 / 560;
  background: url("img/aquarelle-1.webp") center / contain no-repeat;
  opacity: .8;
  pointer-events: none;
}
/* Les taches restent dans les coins : aucun libellé sous 4,5:1 (contraste_pixels.py, 320 à 1920 px) */
.occasions-carte::before { top: -30px; left: -44px; }
.occasions-carte::after { right: -90px; bottom: -80px; rotate: 180deg; }
.occasions-titre {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0 0 30px;
  font: 700 .78rem/1.3 "DM Sans", "DM Sans Repli", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose-fonce);
}
.occasions-titre .filet-coeur { width: 150px; font-size: 10px; }
.occasions-liste {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.occasions-liste li {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  padding: 0 10px;
  text-align: center;
}
/* Filets verticaux entre les occasions, comme au verso */
.occasions-liste li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 1px;
  height: 70px;
  background: var(--rose);
  opacity: .55;
}
.occasions-liste li:first-child::before { display: none; }
.occasions-liste .picto { width: 72px; height: 72px; color: var(--picto); }
.occasions-liste span { font-size: .92rem; font-weight: 500; line-height: 1.3; color: var(--rose-fonce); }
.picto .p-or { fill: #EED9A8; }
.picto .p-rose { fill: #F6C6BA; }
.picto .p-sauge { fill: #CBD5BA; }
.picto .p-blanc { fill: #fff; }
@media (max-width: 899.98px) {
  .occasions-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .occasions-liste li:nth-child(4)::before { display: none; }
}
@media (max-width: 479.98px) {
  .occasions { padding-bottom: 64px; }
  .occasions-carte { padding: 30px 12px 32px; }
  .occasions-carte::before, .occasions-carte::after { width: 170px; }
  .occasions-carte::before { top: -34px; left: -52px; }
  .occasions-carte::after { right: -64px; bottom: -56px; }
  .occasions-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .occasions-liste li:nth-child(4)::before { display: block; }
  .occasions-liste li:nth-child(odd)::before { display: none; }
  .occasions-liste .picto { width: 60px; height: 60px; }
  .occasions-liste li::before { height: 60px; }
}

/* Charlotte : la photo de la terrasse dans l'arche (cadre or décalé), sa guirlande qui s'allume
   (css/animations.css), une tache d'aquarelle dans le coin haut droit de la section, récit court. */
.charlotte { position: relative; overflow: clip; isolation: isolate; }
.charlotte::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: clamp(220px, 32vw, 460px);
  aspect-ratio: 720 / 560;
  background: url("img/aquarelle-1.webp") top left / contain no-repeat;
  scale: -1 1; /* la tache 1, retournée : chargée dans le coin haut droit */
  opacity: .95;
  pointer-events: none;
}
.charlotte-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 80px;
  align-items: center;
}
.charlotte-photo {
  position: relative;
  isolation: isolate;
  justify-self: end;
  width: min(380px, 78%);
  margin: 0 16px 0 0;
}
.charlotte-cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 24px 24px;
  box-shadow: 0 30px 60px -30px rgba(71, 60, 56, .42);
}
.charlotte-cadre img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Cadre or décalé, derrière la photo */
.charlotte-photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--or);
  border-radius: 999px 999px 28px 28px;
  pointer-events: none;
}
.charlotte-texte .entete { margin-bottom: 28px; }
.charlotte-recit p { max-width: 33em; margin: 0 0 16px; font-size: 1.08rem; color: var(--doux); }
.charlotte-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.charlotte-signature {
  margin: 0;
  font-family: "Ephesis", "Ephesis Repli", "Fraunces", "Fraunces Repli", Georgia, serif;
  font-size: 3.2rem;
  font-style: italic;
  font-synthesis: none;
  line-height: 1;
  color: var(--rose);
  rotate: -4deg;
}
@media (max-width: 900px) {
  .charlotte-grille { grid-template-columns: 1fr; gap: 64px; }
  .charlotte-photo { justify-self: center; width: min(340px, 72%); margin: 0; }
}
@media (max-width: 560px) {
  .charlotte-signature { font-size: 2.7rem; }
}

/* Sections : crème (fond de page) et rose poudré en alternance (.section-sable, nom gardé), papier pour la
   demande de date (css/reservation.css). Plus de section sombre. */
.section { padding: 96px 0; }
.section-sable { background: var(--poudre); }
@media (max-width: 700px) { .section { padding: 72px 0; } }
.entete { max-width: 680px; margin-bottom: 48px; }
.entete h2 { margin-bottom: 16px; font-size: clamp(2rem, 3.8vw, 3rem); }
.entete p:not(.surtitre) { margin: 0; font-size: 1.1rem; color: var(--doux); }
.entete-centre { margin-inline: auto; text-align: center; }

/* Formules */
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 28px 28px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre);
}
/* Formule mise en avant (Mariage) : le papier rose poudré de la carte, bord fin au rose-rouge du nom, une
   petite tache d'aquarelle dans le coin haut droit (pseudo-élément : décor pur, aucun décalage ; elle ne passe
   sous aucun texte, contrôlé au pixel). Icône, coches et bouton plein au rose-rouge, titre au gris de BARD. */
.carte-vedette {
  overflow: clip;
  isolation: isolate;
  border: 1.5px solid var(--rose);
  background: var(--poudre);
  box-shadow: 0 24px 48px -26px rgba(181, 103, 91, .45);
}
.carte-vedette::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px;
  right: -12px;
  width: min(240px, 58%);
  aspect-ratio: 720 / 560;
  background: url("img/aquarelle-1.webp") top left / contain no-repeat;
  scale: -1 1; /* la tache 1, retournée : chargée dans le coin haut droit */
  opacity: .8;
  pointer-events: none;
}
.carte-icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--poudre);
  color: var(--action);
}
.carte-vedette .carte-icone { background: #fff; box-shadow: 0 0 0 1px rgba(181, 103, 91, .3); }
.carte h3 { margin-bottom: 6px; font-size: 1.6rem; color: var(--gris); }
.duree { margin: 0 0 22px; font-size: .98rem; color: var(--doux); }
.prix {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 24px;
  font-family: "Fraunces", "Fraunces Repli", Georgia, serif;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.prix small {
  font: 700 .74rem/1 "DM Sans", "DM Sans Repli", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--doux);
}
.carte ul { flex: 1; display: grid; align-content: start; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.carte li { position: relative; padding-left: 28px; }
.carte li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--action);
  border-bottom: 2px solid var(--action);
  transform: rotate(-45deg);
}
.carte .btn { width: 100%; }
/* Lien vers la page de la formule, sous le bouton : couleur d'action soulignée (5,3:1 sur blanc, 4,7:1 sur le rose
   poudré de la carte Mariage), cible de 44 px de haut */
.carte-lien { display: inline-flex; align-items: center; justify-content: center; align-self: center; min-height: 44px; margin-top: 10px; color: var(--action); font-size: .95rem; font-weight: 500; text-align: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.carte-lien:hover { color: var(--action-fonce); text-decoration-thickness: 2px; }
.prix-devis { font-size: 2.1rem; }
/* Trois colonnes à partir de 900 px : une sous-grille aligne d'une carte à l'autre l'icône, le titre, la ligne
   de durée, le prix, la liste, le bouton et le lien (le titre « Soirée privée et entreprise » passe sur deux lignes). */
@media (min-width: 900px) {
  .cartes { grid-template-rows: repeat(7, auto); row-gap: 0; }
  .carte { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .carte h3 { align-self: end; } /* un titre sur une ligne se pose au-dessus de sa durée */
  .carte ul { align-self: start; }
  .carte .btn { align-self: end; }
  .carte-lien { align-self: start; justify-self: center; }
  .carte-vedette { translate: 0 -14px; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .cartes { gap: 0 18px; }
  .carte { padding: 30px 22px 24px; }
  .carte h3 { font-size: 1.45rem; }
}
/* Une colonne sous 900 px, centrée */
@media (max-width: 899.98px) { .cartes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* Déroulé */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.etapes li { position: relative; padding-top: 66px; counter-increment: etape; }
.etapes li::before {
  content: counter(etape);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ligne);
  color: var(--rose-fonce);
  font: 500 1.35rem/1 "Fraunces", "Fraunces Repli", Georgia, serif;
}
.etapes li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 60px;
  right: -14px;
  height: 1px;
  background: var(--ligne);
}
.etapes h3 { margin-bottom: 8px; font-size: 1.3rem; }
.etapes p { margin: 0; color: var(--doux); }
@media (max-width: 900px) {
  .etapes { grid-template-columns: repeat(2, 1fr); }
  .etapes li::after { display: none; }
}
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

/* Répertoire */
.repertoire { display: grid; grid-template-columns: 1fr 1fr minmax(220px, 300px); gap: 32px 48px; align-items: start; }
.genre { padding-top: 20px; border-top: 2px solid var(--gris); }
.genre h3 { margin-bottom: 16px; font-size: 1.35rem; }
/* Bandeau « Une chanson compte pour vous ? » : rose poudré, bord rosé, une tache d'aquarelle contre le bord
   droit (derrière le bouton, jamais sous la phrase) */
.appel-chanson {
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 44px;
  padding: 26px 30px;
  border: 1px solid rgba(181, 103, 91, .35);
  border-radius: var(--rayon);
  background: var(--poudre);
  color: var(--encre);
}
.appel-chanson::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -16px;
  bottom: -44px;
  width: 260px;
  aspect-ratio: 720 / 560;
  background: url("img/aquarelle-1.webp") center / contain no-repeat;
  rotate: 180deg;
  opacity: .7;
  pointer-events: none;
}
.appel-chanson p { margin: 0; font-family: "Fraunces", "Fraunces Repli", Georgia, serif; font-size: 1.4rem; line-height: 1.3; }
@media (max-width: 900px) { .repertoire { grid-template-columns: 1fr; } }

.repertoire-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 48px; }
.repertoire-tete h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.chiffre { display: flex; align-items: flex-end; gap: 16px; max-width: 320px; margin: 0; color: var(--doux); line-height: 1.35; }
.chiffre-nombre { display: grid; justify-items: start; font: italic 500 4.4rem/1 "Fraunces", "Fraunces Repli", Georgia, serif; font-variant-numeric: lining-nums; color: var(--rose); }
.chiffre-nombre small { margin-bottom: 4px; font: 700 .7rem/1.2 "DM Sans", "DM Sans Repli", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-fonce); }
.genre p { margin: 0; color: var(--doux); }

/* En live (la galerie est dans css/animations.css) */
.reseaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* Références */
.references { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 20px; }
.reference {
  padding: 28px;
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--rose);
  border-radius: var(--rayon);
  background: #fff;
}
.reference-type { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-fonce); }
.reference h3 { margin-bottom: 4px; font-size: 1.5rem; }
.reference p:last-child { margin: 0; color: var(--doux); }

/* Questions */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  position: relative;
  padding: 22px 44px 22px 0;
  font-family: "Fraunces", "Fraunces Repli", Georgia, serif;
  font-size: 1.25rem;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--action);
  border-bottom: 2px solid var(--action);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { margin: 0 0 22px; color: var(--doux); }

/* Demande de date : tout est dans css/reservation.css */

/* Pied de page : le rose poudré de l'aquarelle, sous un filet rosé (les taches de coin des sections du dessus
   s'y appuient) ; le logotype garde les couleurs de la carte */
.pied { padding: 40px 0; border-top: 1px solid rgba(181, 103, 91, .3); background: var(--poudre); color: var(--doux); font-size: .9rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.pied p { margin: 0; }
.pied-marque { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.logotype-pied { --logo-taille: 2.3rem; }
.pied-metier { color: var(--doux); }
/* Le téléphone suit le texte quand la ligne passe à la ligne : lien en ligne, zone de clic agrandie par un
   rembourrage vertical (44 px), l'interligne ne bouge pas */
.pied .pied-metier a { display: inline; min-width: 0; min-height: 0; padding-block: .92em; color: var(--encre); }
.pied nav { display: flex; flex-wrap: wrap; column-gap: 22px; }
.pied a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--encre); text-decoration: none; }
.pied a:hover { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }

/* Bouton fixe sur téléphone */
.barre-mobile {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 60;
  display: none;
}
.barre-mobile .btn { width: 100%; box-shadow: inset 0 0 0 1.5px var(--rose), 0 0 0 3px rgba(255, 252, 248, .85), 0 14px 30px -10px rgba(71, 60, 56, .5); }
@media (max-width: 700px) {
  .barre-mobile { display: block; }
  .nav .btn-petit { display: none; }
  .pied { padding-bottom: 100px; }
  /* WCAG 2.4.11 : l'élément qui reçoit le focus clavier s'arrête au-dessus du bouton fixe
     (48 px de bouton + 14 px de marge + l'encoche, et 22 px d'air). Vaut aussi sans JS. */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* Mouvement réduit : filet de sécurité, tout reste visible et statique */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Impression : ni navigation, ni bandeau, ni boutons flottants */
@media print {
  .nav, .barre-mobile, .maquette { display: none !important; }
}

/* Page de texte (mentions légales) */
.page-texte { min-height: 70vh; }
.page-texte .conteneur { max-width: 760px; }
.page-texte h1 { margin-bottom: 32px; font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.page-texte h2 { margin: 36px 0 10px; font-size: 1.4rem; }
.page-texte p { margin: 0 0 14px; color: var(--doux); }
.page-texte a:not(.btn) { color: var(--action); }
.page-texte mark { padding: 0 4px; border-radius: 4px; background: var(--corail-clair); color: var(--encre); } /* « à compléter » (8,2:1) */
.page-texte .btn { margin-top: 24px; }

/* Anneau de focus du badge Instagram : collé au badge, séparé de la photo par un liseré blanc */
.hero-badge:focus-visible { outline-offset: 0; box-shadow: 0 0 0 6px #fff, 0 16px 30px -14px rgba(71, 60, 56, .4); }

/* Photos en arche (demande de date, répertoire) : même cadre que la section Charlotte */
.photo-arche { position: relative; isolation: isolate; margin: 0; }
.photo-arche-cadre {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 24px 24px;
  box-shadow: 0 30px 60px -30px rgba(71, 60, 56, .42);
}
.photo-arche-cadre img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-arche::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--or);
  border-radius: 999px 999px 26px 26px;
  pointer-events: none;
}
.photo-arche-resa { width: min(300px, 80%); margin: 36px 0 0; }
.photo-arche-repertoire { width: 100%; max-width: 300px; justify-self: end; }
@media (max-width: 900px) {
  .photo-arche-resa { width: min(280px, 72%); margin: 28px auto 12px; }
  .photo-arche-repertoire { justify-self: center; max-width: 280px; margin-top: 8px; }
}
/* L'intro de la demande de date n'est collante que si elle tient à l'écran avec sa photo */
@media (max-height: 980px) { #date .resa-intro { position: static; } }