/* Charlotte Bard — pages de prestation : chanteuse-mariage.html, chanteuse-restaurant-bar.html et
   chanteuse-soiree-privee-entreprise.html (15/10/2026). Chargée après styles.css et css/animations.css,
   par ces trois pages seulement. Couleurs : les jetons de :root (styles.css) et le blanc des cartes.
   Aucune animation propre : seules les révélations data-revele de css/animations.css jouent, jamais dans
   le premier écran ; en mouvement réduit, tout est visible et statique. */

/* Menu des prestations : la page en cours est soulignée d'un filet or */
.nav-liens a[aria-current="page"],
.nav-liens a[aria-current="page"]:hover,
.pied a[aria-current="page"] {
  text-decoration: underline 1.5px var(--or);
  text-underline-offset: 6px;
}

/* Fil d'Ariane : petit texte sur le papier de l'en-tête */
.ariane {
  background: var(--papier);
  color: var(--doux);
  font-size: .88rem;
  line-height: 1.4;
}
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  width: min(1140px, 100% - 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 12px 0 0;
  list-style: none;
}
.ariane li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ariane li + li::before {
  content: "›";
  content: "›" / "";
  color: var(--rose-fonce);
  font-size: 1.15em;
  line-height: 1;
}
.ariane a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--action);
  text-underline-offset: 3px;
}
.ariane a:hover { color: var(--action-fonce); }

/* En-tête de page : texte et photo en arche, sur le papier de la carte */
.page-tete { padding: 28px 0 88px; background: var(--papier); }
.page-tete-grille { display: grid; gap: 52px; align-items: center; }
.page-tete-texte { min-width: 0; }
.page-tete h1 {
  margin: 0 0 20px;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  line-height: 1.08;
  color: var(--encre);
}
.page-tete .actions { justify-content: flex-start; }
.page-tete-photo { justify-self: center; width: min(300px, 76%); }
@media (max-width: 559.98px) {
  .page-tete .actions { max-width: 420px; }
  .page-tete .actions .btn { flex: 1 1 auto; }
}
@media (min-width: 900px) {
  .page-tete { padding: 36px 0 104px; }
  .page-tete-grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
  .page-tete-photo { width: min(380px, 100%); }
}

/* En bref : la carte blanche, comme le verso de la carte de visite */
.en-bref { padding: 64px 0; background: var(--poudre); }
.en-bref-carte {
  max-width: 860px;
  margin-inline: auto;
  padding: 32px 28px 30px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre);
}
.en-bref-carte h2 {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font: 700 .78rem/1.3 "DM Sans", "DM Sans Repli", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose-fonce);
}
.en-bref-carte h2 .filet-coeur { width: 150px; font-size: 10px; }
.en-bref-carte ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.en-bref-carte li { position: relative; padding-left: 24px; }
.en-bref-carte li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
}
@media (max-width: 479.98px) { .en-bref-carte { padding: 28px 20px 26px; } }

/* Paragraphes des sections */
.page-recit { max-width: 40em; }
.page-recit p { margin: 0 0 16px; font-size: 1.08rem; color: var(--doux); }
.page-recit p:last-child { margin-bottom: 0; }
.page-recit a:not(.btn),
.liens-croises a {
  padding-block: .5em;
  color: var(--action);
  text-underline-offset: 3px;
}
.page-recit a:not(.btn):hover,
.liens-croises a:hover { color: var(--action-fonce); }

/* Titre à gauche, texte à droite (deux colonnes à partir de 900 px) */
.page-bloc { display: grid; gap: 0 64px; }
.page-bloc .entete { margin-bottom: 24px; }
@media (min-width: 900px) {
  .page-bloc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .page-bloc > .entete { margin-bottom: 0; }
  .page-bloc:has(> .page-occasions) { align-items: center; }
}

/* Deux courtes parties côte à côte (deux colonnes à partir de 900 px) */
.page-duo { display: grid; gap: 64px; }
.page-duo .entete { margin-bottom: 24px; }
.page-duo .entete h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .page-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }

/* Les moments d'un mariage : trois blocs (une colonne sous 700 px) */
.moments { display: grid; gap: 20px; }
.moment {
  padding: 28px 26px 28px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre);
}
.moment::before { content: ""; display: block; width: 28px; height: 1.5px; margin-bottom: 18px; background: var(--or); }
.moment h3 { margin-bottom: 10px; font-size: 1.4rem; }
.moment p { margin: 0; color: var(--doux); }
@media (min-width: 700px) { .moments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Bandeau « Une chanson compte pour vous ? » posé sur le rose poudré : il passe sur le papier */
.page-recit + .appel-chanson { margin-top: 36px; }
.section-sable .appel-chanson { background: var(--papier); }

/* Formule restaurant et bar : l'encadré de la formule mise en avant (sans la sous-grille de .carte) */
.formule-grille { display: grid; gap: 36px; align-items: center; }
.formule {
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  padding: 34px 28px 28px;
  border: 1.5px solid var(--rose);
  border-radius: var(--rayon);
  background: var(--poudre);
  box-shadow: var(--ombre);
}
.formule::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px;
  right: -12px;
  width: min(180px, 44%);
  aspect-ratio: 720 / 560;
  background: url("../img/aquarelle-1.webp") top left / contain no-repeat;
  scale: -1 1;
  opacity: .8;
  pointer-events: none;
}
.formule .carte-icone { background: #fff; box-shadow: 0 0 0 1px var(--ligne); }
.formule h3 { margin-bottom: 6px; font-size: 1.6rem; color: var(--gris); }
.formule ul { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.formule li { position: relative; padding-left: 28px; }
.formule 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);
}
.formule .btn { width: 100%; }
@media (max-width: 899.98px) { .formule { margin-inline: auto; } }
@media (min-width: 900px) { .formule-grille { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; } }
/* La phrase du prix, à côté de l'encadré : en Fraunces, à l'encre */
.formule-texte p {
  font-family: "Fraunces", "Fraunces Repli", Georgia, serif;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.35;
  color: var(--encre);
}

/* Les occasions privées, avec les pictogrammes du verso de la carte */
.page-occasions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 12px;
  margin: 32px 0 0;
  padding: 30px 16px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre);
  list-style: none;
}
.page-occasions li { display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; }
.page-occasions .picto { width: 64px; height: 64px; color: var(--picto); }
.page-occasions span { font-size: .92rem; font-weight: 500; line-height: 1.3; color: var(--rose-fonce); }
@media (min-width: 900px) { .page-occasions { margin-top: 0; } }

/* Vidéos : composant propre aux pages de prestation, format 9:16, ni lecture ni son automatiques */
.page-videos { display: grid; gap: 20px; justify-content: center; }
.page-video { min-width: 0; margin: 0; }
.page-video-cadre {
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: var(--rayon);
  background: var(--poudre);
  box-shadow: var(--ombre);
}
.page-video-cadre video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Le cadre rogne la vidéo : l'anneau de focus se pose donc sur le cadre, y compris quand le focus est
   sur un bouton du lecteur (lecture, son, plein écran) */
.page-video-cadre:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.page-video figcaption { margin-top: 10px; font-size: .9rem; line-height: 1.35; color: var(--doux); }
.page-videos-une { grid-template-columns: minmax(0, 300px); }
/* Plusieurs vidéos : sous 700 px, une rangée qui défile d'un bord à l'autre de l'écran (jamais la page) */
@media (max-width: 699.98px) {
  .page-videos:not(.page-videos-une) {
    grid-auto-flow: column;
    grid-auto-columns: min(64%, 260px);
    justify-content: start;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 4px var(--gouttiere) 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: thin;
    scrollbar-color: var(--ligne) transparent;
  }
  .page-videos:not(.page-videos-une) .page-video { scroll-snap-align: start; }
}
@media (min-width: 700px) {
  .page-videos:not(.page-videos-une) { grid-template-columns: repeat(3, minmax(0, 260px)); gap: 24px; }
}
.page-videos + .reseaux { margin-top: 32px; }
/* Une seule vidéo, à côté de son texte (deux colonnes à partir de 900 px) */
.page-ecoute { display: grid; gap: 36px; align-items: center; }
.page-ecoute .entete { margin-bottom: 24px; }
@media (min-width: 900px) {
  .page-ecoute { grid-template-columns: minmax(0, 600px) minmax(0, 300px); justify-content: start; gap: 80px; }
}

/* Références en un paragraphe (page mariage) et phrase sous les cartes (page restaurant) */
.references + .page-recit { margin-top: 32px; }

/* Appel final, centré, sur le papier ; une tache d'aquarelle au coin haut gauche sur grand écran */
.page-appel { position: relative; overflow: clip; isolation: isolate; background: var(--papier); text-align: center; }
.page-appel .entete { margin-inline: auto; margin-bottom: 28px; }
.page-appel .actions { justify-content: center; }
@media (min-width: 1100px) {
  .page-appel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: clamp(200px, 20vw, 300px);
    aspect-ratio: 720 / 560;
    background: url("../img/aquarelle-1.webp") top left / contain no-repeat;
    opacity: .85;
    pointer-events: none;
  }
}

/* Liens vers les deux autres pages de prestation */
.liens-croises {
  max-width: 640px;
  margin: 44px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--ligne);
  color: var(--doux);
}