/* ==========================================================================
   Les Belles Époques — feuille de style unique
   ==========================================================================
   Le site tient en une seule feuille : douze pages, aucune bibliothèque.
   Les valeurs (couleurs, tailles, polices) sont celles relevées sur le site
   Framer d'origine, pour que la reprise soit invisible pour les visiteurs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices
   --------------------------------------------------------------------------
   Elles sont servies depuis l'hébergement, pas depuis Google. Deux raisons :
   une requête vers un serveur américain en moins à chaque visite, et aucune
   adresse IP de visiteur transmise à un tiers — ce que la CNIL reproche
   précisément à l'usage direct de Google Fonts.

   Seul le jeu de caractères latin est embarqué : le cyrillique et le
   vietnamien que Framer chargeait ne servent à rien ici.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Arizonia';
  src: url('../fonts/arizonia-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Variables
   -------------------------------------------------------------------------- */

:root {
  --noir:         #141414;  /* fond général */
  --noir-profond: #0c0c0c;  /* fond du pied de page */
  --or:           #ffd700;  /* couleur d'accent, texte courant */
  --sable:        #e6c2a1;  /* titres de page et intitulés du pied */
  --jaune-vif:    #dede10;  /* titres des soirées */
  --gris:         rgba(212, 212, 212, 0.7);
  --filet:        rgba(255, 249, 243, 0.2);

  --texte:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titre:    'Fraunces', Georgia, 'Times New Roman', serif;
  --enseigne: 'Arizonia', 'Brush Script MT', cursive;

  --largeur: 1200px;   /* largeur du contenu, marges comprises */
  --entete:  64px;     /* hauteur de la barre de navigation */
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--or);
  font-family: var(--texte);
  /* 16 px plutôt que les 14 px du site Framer : du texte doré sur fond noir
     perd déjà en contraste, le réduire en plus le rendait pénible à lire. */
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` n'est pas décoratif, il corrige une déformation.
   Les attributs width et height d'une balise <img> sont appliqués par le
   navigateur comme des dimensions CSS. Dès qu'une règle impose une largeur
   différente — ici max-width, ailleurs width: 100 % — la largeur change mais
   la hauteur reste celle de l'attribut : l'image est écrasée. C'est ce qui
   déformait l'affiche de l'accueil sur téléphone, affichée en 390 × 670 alors
   qu'elle mesure 1280 × 670.
   Les images qui ont besoin d'une hauteur imposée (bandeaux, vignettes des
   galeries) la reçoivent de leur propre règle, plus spécifique. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Le clavier doit voir où il se trouve : Framer masquait le contour de focus,
   ce qui rendait le site difficile à parcourir sans souris. */
:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.lecture-seule {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement : première tabulation de la page, il saute la navigation. */
.evitement {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -150%);
  z-index: 100;
  padding: 10px 18px;
  background: var(--or);
  color: #000;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s;
}
.evitement:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. Barre de navigation
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--entete);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 0.5px solid var(--filet);
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.enseigne {
  margin: 0;
  font-family: var(--enseigne);
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.enseigne a { color: var(--or); text-decoration: none; }

.navigation ul {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation a {
  color: var(--or);
  font-size: 0.95rem;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.navigation a:hover { border-bottom-color: var(--or); }

/* La page courante n'est pas distinguée visuellement, comme sur le site
   d'origine : toutes les entrées restent dorées. L'attribut aria-current
   demeure dans le HTML — il ne se voit pas, mais permet à un lecteur d'écran
   d'annoncer « page actuelle » sur la bonne entrée. */

/* Bouton du menu déroulant : masqué tant que la place suffit. */
.bouton-menu {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--or);
  cursor: pointer;
}
.bouton-menu span {
  display: block;
  width: 26px; height: 2px;
  margin: 6px auto;
  background: currentColor;
  transition: transform 0.25s, opacity 0.2s;
}
.bouton-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bouton-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1100px) {
  .bouton-menu { display: block; }

  /* Le panneau laisse voir l'affiche derrière lui, mais suffisamment atténuée
     pour que le texte doré reste lisible. Le blur(4px) du site d'origine ne
     suffisait pas : sur les zones claires des affiches, les entrées du menu
     se confondaient avec l'image.

     La lisibilité ne repose pas sur le flou seul. Un voile noir à 55 % l'assure
     à lui tout seul, le flou n'étant là que pour l'aspect. C'est délibéré :
     backdrop-filter n'est pas rendu partout de la même façon, et un menu dont
     on ne peut pas lire les entrées est un menu inutilisable. */
  .navigation {
    position: fixed;
    inset: var(--entete) 0 auto 0;
    max-height: calc(100dvh - var(--entete));
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 0.5px solid var(--filet);
    /* Le menu reste dans le flux du document mais devient invisible :
       visibility l'exclut aussi du parcours clavier tant qu'il est fermé. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .navigation.ouvert {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .navigation ul {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 16px 24px 28px;
  }
  /* Pas de filet entre les entrées : l'original n'en a pas. */
  .navigation li + li { border-top: 0; }

  /* Le retrait vertical de 10 px n'est pas décoratif : il porte la zone
     tactile à 42 px de haut, alors que le texte seul n'en fait que 22. Sans
     lui, l'espacement de l'original serait respecté mais les entrées
     deviendraient difficiles à viser au doigt. */
  .navigation a {
    display: block;
    padding: 10px 16px;
    font-size: 1rem;
    text-align: center;
    border-bottom: 0;
  }
}

/* Le flou d'arrière-plan n'existe pas sur tous les navigateurs — les versions
   anciennes d'Android Chrome et de Firefox ne le connaissent pas. Sans lui, le
   fond ne serait qu'un voile à 30 % et le menu resterait illisible. On y
   substitue alors un fond franc : moins joli, mais lisible partout. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1100px) {
    .navigation { background: rgba(0, 0, 0, 0.92); }
  }
}

/* --------------------------------------------------------------------------
   5. Bandeau de page et titres
   --------------------------------------------------------------------------
   Une photo pleine largeur, assombrie, avec le titre de la page par-dessus.
   -------------------------------------------------------------------------- */

.bandeau {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  text-align: center;
}
.bandeau img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Sans ce voile, le titre sable passait mal sur les zones claires de la photo. */
.bandeau::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65));
}
.bandeau h1,
.bandeau h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 32px 24px;
}

/* Bande courte : les pages dont le titre n'est pas affiché, et celles dont
   l'intitulé est un simple sous-titre plutôt qu'un titre de page. */
.bandeau--court { min-height: 140px; }

.bandeau--court h2 {
  font-family: var(--texte);
  font-weight: 500;
  font-size: 22px;
  color: var(--or);
  text-align: center;
  padding: 20px 24px;
}

h1 {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.625rem);  /* 58 px au maximum, comme l'original */
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--sable);
  text-align: center;
}

h2, h3 {
  font-family: var(--titre);
  font-weight: 500;
  color: var(--sable);
}

/* Titre encadré de deux filets, comme sur le site d'origine. Les filets sont
   décoratifs : ils sont dessinés en CSS et non écrits dans le texte, pour
   qu'un lecteur d'écran annonce « Vos soirées » et non « tiret Vos soirées
   tiret ». */
.titre--orne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
/* Le texte est enveloppé dans un <span> : sans lui, il forme un élément
   flexible anonyme, que le navigateur comprime volontiers pour faire de la
   place aux filets — « Vos soirées » se coupait alors en deux lignes. */
.titre--orne > span { flex: 0 0 auto; }

.titre--orne::before,
.titre--orne::after {
  content: '';
  flex: 0 1 90px;
  height: 1px;
  background: var(--sable);
  opacity: 0.55;
}

@media (max-width: 560px) {
  .titre--orne { gap: 14px; }
  .titre--orne::before,
  .titre--orne::after { flex-basis: 40px; }
}

.section { padding: 56px 0; }
.section--serre { padding: 32px 0 56px; }

/* --------------------------------------------------------------------------
   6. Texte courant
   -------------------------------------------------------------------------- */

.prose { max-width: 70ch; margin-inline: auto; text-align: center; }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--sable); }

.encadre {
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 10px;
  padding: 28px 24px;
  background: rgba(255, 215, 0, 0.03);
}

/* Bloc « informations pratiques » : adresse, horaires, contact. */
.pratique {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
  text-align: center;
}
.pratique h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--sable);
}
.pratique p { margin: 0; }

/* --------------------------------------------------------------------------
   7. Cartes de soirées
   -------------------------------------------------------------------------- */

.soirees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  max-width: 820px;
  margin-inline: auto;
}

/* Chaque soirée est présentée dans son cadre, comme sur le site d'origine :
   le titre et l'affiche forment un bloc, et non deux éléments qui flottent. */
.soiree {
  display: block;
  padding: 18px;
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: 12px;
  background: rgba(255, 215, 0, 0.03);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.soiree:hover,
.soiree:focus-visible {
  border-color: var(--or);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.soiree h2 {
  margin: 0 0 14px;
  font-family: var(--texte);
  font-weight: 500;
  font-size: 22px;
  color: var(--jaune-vif);
  text-align: center;
}
/* L'affiche est montrée entière : c'est elle qui porte toute l'information de
   la soirée. Un recadrage, même léger, rognait la date ou l'horaire imprimés
   en bord d'affiche. Les deux affiches ayant le même format, les cartes
   restent de hauteur égale. */
.soiree img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   8. Affiches (accueil, agenda, carte)
   -------------------------------------------------------------------------- */

.affiche { display: block; width: 100%; }

/* La carte est photographiée : elle doit être lisible sans zoomer, d'où une
   largeur plus généreuse que l'affichage d'origine.

   `width: 100 %` est indispensable : sans lui, la première photo (427 px de
   large à la source) s'affichait à sa taille naturelle pendant que les trois
   autres remplissaient la colonne, et la page paraissait mal cadrée. */
.affiches-carte {
  display: grid;
  gap: 32px;
  max-width: 600px;
  margin-inline: auto;
}
.affiches-carte img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.affiche-seule {
  max-width: 500px;
  margin-inline: auto;
}
.affiche-seule img { border-radius: 8px; }

/* --------------------------------------------------------------------------
   9. Galerie défilante
   --------------------------------------------------------------------------
   Deux bandes d'images qui défilent en continu. La liste est écrite une fois
   dans le HTML puis dupliquée par le script : la copie porte aria-hidden pour
   qu'un lecteur d'écran n'annonce pas deux fois les mêmes photos.
   -------------------------------------------------------------------------- */

.galerie { margin-bottom: 64px; }

.galerie h2 {
  margin: 0 0 24px;
  font-family: var(--texte);
  font-weight: 500;
  font-size: 22px;
  color: var(--or);
  text-align: center;
}

/* Le titre « Dan & Lydie » était écrit dans la police d'enseigne sur le site
   d'origine : on garde cette exception plutôt que de l'uniformiser. */
.galerie h2.titre-manuscrit {
  font-family: var(--enseigne);
  font-size: 31px;
  font-weight: 400;
  line-height: 1.4;
}

.defile {
  overflow: hidden;
  /* Les bords s'estompent au lieu d'être coupés net. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.defile-piste {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: defiler var(--duree, 70s) linear infinite;
}
.defile:hover .defile-piste,
.defile:focus-within .defile-piste { animation-play-state: paused; }

/* Toutes les vignettes d'une bande ont la même taille, le cadrage se fait
   par recadrage (object-fit). À hauteur fixe et largeur libre, les panoramas
   s'étalaient sur 824 px à côté de portraits de 214 px : la bande donnait
   l'impression d'un montage bâclé.

   Chaque rangée prend le format de ses photos : paysage pour les initiations,
   portrait pour les soirées. */
.defile-piste img {
  width: 380px;
  height: 270px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
}

.defile--portrait .defile-piste img {
  width: 250px;
  height: 350px;
}

@keyframes defiler {
  /* La piste contient deux fois la même série : arrivée à la moitié, l'image
     affichée est identique à celle du départ, la boucle est invisible. */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Personne ne doit subir une animation qu'il a demandé à ne pas voir : la
   bande devient alors une simple rangée que l'on fait défiler à la main. */
@media (prefers-reduced-motion: reduce) {
  .defile { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .defile-piste { animation: none; }
}

@media (max-width: 700px) {
  .defile-piste img { width: 260px; height: 185px; }
  .defile--portrait .defile-piste img { width: 180px; height: 250px; }
}

/* --------------------------------------------------------------------------
   10. Formulaires
   -------------------------------------------------------------------------- */

.formulaire { max-width: 460px; margin-inline: auto; }

.champ { margin-bottom: 20px; }

.champ label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--or);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input::placeholder,
.champ textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15);
}

/* Champ leurre : invisible et hors du parcours clavier, seuls les robots le
   remplissent. Il ne doit pas être en display:none, que certains détectent. */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.bouton {
  display: inline-block;
  width: 100%;
  padding: 13px 24px;
  background: var(--or);
  border: 1px solid var(--or);
  border-radius: 8px;
  color: #000;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.bouton:hover { background: transparent; color: var(--or); }
.bouton[disabled] { opacity: 0.5; cursor: progress; }

.bouton--lien {
  width: auto;
  text-decoration: none;
  background: transparent;
  color: var(--or);
}
.bouton--lien:hover { background: var(--or); color: #000; }

/* Message de retour affiché après l'envoi. */
.retour {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
}
.retour.succes { background: rgba(72, 187, 120, 0.12); border: 1px solid rgba(72, 187, 120, 0.5); color: #9ae6b4; }
.retour.echec  { background: rgba(245, 101, 101, 0.12); border: 1px solid rgba(245, 101, 101, 0.5); color: #feb2b2; }

/* Deux colonnes : le formulaire et la photo d'ambiance, sur la privatisation. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.duo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: 32px; }

  /* La photo passe au-dessus du formulaire, comme sur le site d'origine :
     elle donne envie avant qu'on demande de remplir six champs. Elle était
     auparavant masquée sur téléphone, ce qui la faisait disparaître pour la
     majorité des visiteurs. */
  .duo .illustration { order: -1; }
}

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  margin-top: 40px;
  padding: 56px 0 24px;
  background: var(--noir-profond);
  border-top: 1px solid rgba(255, 215, 0, 0.12);
}

.pied-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.pied h2 {
  margin: 0 0 16px;
  font-family: var(--texte);
  font-weight: 400;
  font-size: 1rem;
  color: var(--sable);
}

.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li + li { margin-top: 10px; }

/* Chaque lien est un pavé bordé terminé par une flèche, comme sur le site
   d'origine. Les valeurs sont relevées telles quelles : bordure de 1 px en
   rgba(44,44,44,.7), coins de 4 px, hauteur de 48 px et retrait interne
   asymétrique — plus large à gauche pour le texte, plus serré à droite où
   la flèche vient buter. */
.pied li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 6px 12px 16px;
  border: 1px solid rgba(44, 44, 44, 0.7);
  border-radius: 4px;
  color: rgba(255, 215, 0, 0.7);
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.pied li a:hover,
.pied li a:focus-visible {
  border-color: rgba(255, 215, 0, 0.45);
  background-color: rgba(255, 215, 0, 0.05);
  color: var(--or);
}

.pied li a .fleche {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: #ffe2c6;
}

.reseaux {
  display: flex;
  gap: 14px;
}
.reseaux a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  color: var(--or);
}
.reseaux a:hover { background: rgba(255, 215, 0, 0.12); }
.reseaux svg { width: 18px; height: 18px; fill: currentColor; }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--gris);
  font-size: 0.875rem;
}
.pied-bas a { color: var(--gris); }