/* ==========================================================================
   LES VŒUX D'ISIS — Wedding planner & cérémonies sur-mesure
   Feuille de style principale

   COMMENT S'Y RETROUVER
   Ce fichier est découpé en grandes sections, dans l'ordre :
     1. Polices et variables (couleurs, tailles) — c'est ICI qu'on change
        une couleur pour tout le site d'un coup
     2. Base (réglages généraux du texte, des images, des liens)
     3. Navigation (barre du haut + menu plein écran)
     4. Hero (la grande image d'ouverture de chaque page)
     5. Blocs de contenu (sections, titres, textes, boutons)
     6. Cartes et galeries de photos
     7. Témoignages
     8. Formulaire de contact
     9. Pied de page
    10. Animations d'apparition
   ========================================================================== */


/* ==========================================================================
   1. POLICES ET VARIABLES
   ========================================================================== */

/* --- Polices ---
   Cormorant Garamond : serif fine et très contrastée, pour les titres.
     C'est elle qui donne le côté "affiche de cinéma" du site.
   Jost : sans-serif géométrique, pour le texte courant et les petits
     libellés en majuscules espacées. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap');

:root {
  /* --- Couleurs ---
     Le site est sombre : un noir chaud (jamais un noir pur, qui serait dur
     à l'œil), un ivoire pour le texte, et un laiton doré comme unique
     accent. Changer --laiton change tous les détails dorés du site. */
  --noir:          #151B2E;  /* Bleu nuit — prélevé sur la baignoire du château de Villette */
  --noir-doux:     #1D2440;  /* Fond des sections alternées */
  --noir-releve:   #28304C;  /* Cartes, champs de formulaire */
  --ivoire:        #F4EFE8;  /* Texte principal */
  --ivoire-doux:   #A89E92;  /* Texte secondaire, légendes */
  --laiton:        #C4A87C;  /* Accent doré — liens, filets, boutons */
  --laiton-clair:  #E2CDA8;  /* Doré éclairci — survols */
  --trait:         rgba(244, 239, 232, 0.14); /* Filets et bordures */
  --trait-fort:    rgba(244, 239, 232, 0.28);

  /* Nuances de texte, declinees a partir de l ivoire */
  --texte-doux:    rgba(244, 239, 232, 0.86); /* Paragraphes */
  --texte-fantome: rgba(168, 158, 146, 0.55); /* Textes d exemple des champs */

  /* --- Palette claire ---
     Le site alterne des sections sombres (photos, galeries, grandes images)
     et des sections claires (textes, etapes, formulaire). Ces valeurs-ci
     sont celles des sections claires. */
  --ivoire-fond:   #FFF8F3; /* Ivoire chaud, fond des sections claires */
  --ivoire-tinte:  #F7EBE1; /* Ivoire un peu plus soutenu, bandes alternees */
  --encre:         #1A1414; /* Brun tres sombre, texte des sections claires */
  --encre-douce:   #6A5C55; /* Texte secondaire sur fond clair */
  --laiton-fonce:  #8A651C; /* Dore approfondi : sur ivoire, le laiton clair
                              serait illisible. Cest lui qui porte l accent
                              dans les sections claires. */
  --laiton-vif:    #B8891F; /* Dore sature, pour les aplats de boutons */

  /* --- Le rose fuchsia, couleur daction ---
     Le dore est la couleur dornement : filets, petits titres, details.
     Le rose est la couleur qui appelle a agir : il ne sert quaux boutons
     principaux et a quelques accents rares. Cest ce contraste qui le rend
     visible. Sil etait partout, il ne claquerait plus.
     Preleve sur les robes des demoiselles dhonneur du mariage de Thiphaine
     et Remi, au chateau de Villette : le bleu nuit et ce fuchsia viennent
     tous les deux des memes photographies. */
  --rose:        #CF3074; /* Aplats de boutons, sur fond clair comme sombre */
  --rose-fonce:  #A32456; /* Survol des aplats */
  --rose-clair:  #F2A2C4; /* Rose eclairci, pour du texte sur fond bleu nuit */

  /* --- Typographie --- */
  --font-titre: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-texte: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* --- Rythme vertical et largeurs --- */
  --espace-xs: 0.5rem;
  --espace-sm: 1rem;
  --espace-md: 2rem;
  --espace-lg: 4rem;
  --espace-xl: 7rem;
  --espace-xxl: 11rem;

  --largeur-max: 1240px;      /* Largeur des grandes grilles */
  --largeur-texte: 40rem;     /* Largeur confortable pour lire un paragraphe */

  --transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-lente: 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-texte);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.85;
  background-color: var(--noir);
  color: var(--ivoire);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Quand le menu plein écran est ouvert, on bloque le défilement du fond */
body.menu-ouvert {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--laiton);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--laiton-clair);
}

/* Contour visible au clavier — accessibilité, à ne pas retirer */
:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
}

/* Lien invisible qui apparaît à la tabulation, pour sauter le menu */
.lien-evitement {
  position: absolute;
  top: -100px;
  left: var(--espace-sm);
  z-index: 999;
  background: var(--laiton);
  color: var(--noir);
  padding: 0.75rem 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lien-evitement:focus {
  top: var(--espace-sm);
  color: var(--noir);
}

/* Texte réservé aux lecteurs d'écran (invisible à l'œil) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Respect des personnes qui désactivent les animations dans leur système */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   3. NAVIGATION
   Barre fine en haut de page, transparente sur la grande image d'ouverture,
   puis fond noir dès qu'on descend. Le menu s'ouvre en plein écran.
   ========================================================================== */

.barre {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-md);
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  transition: background-color var(--transition), padding var(--transition),
              border-color var(--transition);
  border-bottom: 1px solid transparent;
}

/* Classe ajoutée automatiquement par le script dès qu'on fait défiler */
.barre.est-defilee {
  background-color: rgba(21, 27, 46, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--trait);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.barre__marque {
  font-family: var(--font-titre);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivoire);
  line-height: 1;
}

.barre__marque:hover { color: var(--laiton-clair); }

.barre__marque small {
  display: block;
  font-family: var(--font-texte);
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  color: var(--laiton);
  margin-top: 0.45rem;
  font-weight: 300;
}

/* --- Bouton d'ouverture du menu --- */
.bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ivoire);
  font-family: var(--font-texte);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  z-index: 120;
}

.bouton-menu__traits {
  display: block;
  position: relative;
  width: 30px;
  height: 9px;
  flex: 0 0 30px;
}

.bouton-menu__traits::before,
.bouton-menu__traits::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition), width var(--transition);
}

.bouton-menu__traits::before { top: 0; }
.bouton-menu__traits::after  { bottom: 0; width: 62%; }

.bouton-menu:hover .bouton-menu__traits::after { width: 100%; }

/* Le bouton devient une croix quand le menu est ouvert */
.bouton-menu[aria-expanded="true"] .bouton-menu__traits::before { transform: translateY(4px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .bouton-menu__traits::after  { transform: translateY(-4px) rotate(-45deg); width: 100%; }

/* --- Menu plein écran --- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background-color: rgba(21, 27, 46, 0.985);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem clamp(1.2rem, 5vw, 3rem) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  overflow-y: auto;
}

.menu.est-ouvert {
  opacity: 1;
  visibility: visible;
}

.menu__interieur {
  width: 100%;
  max-width: var(--largeur-max);
}

.menu__surtitre {
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--laiton);
  text-align: center;
  margin-bottom: var(--espace-lg);
}

.menu__liste {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--trait);
}

.menu__lien {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(0.85rem, 2vw, 1.35rem) 0.5rem;
  border-bottom: 1px solid var(--trait);
  color: var(--ivoire);
  transition: color var(--transition), padding-left var(--transition),
              background-color var(--transition);
}

.menu__lien:hover,
.menu__lien:focus-visible {
  color: var(--laiton-clair);
  padding-left: 1.5rem;
  background-color: rgba(196, 168, 124, 0.05);
}

/* Page en cours de consultation */
.menu__lien[aria-current="page"] { color: var(--laiton); }

.menu__numero {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--laiton);
  flex: 0 0 2rem;
}

.menu__titre {
  font-family: var(--font-titre);
  font-size: clamp(1.6rem, 4.5vw, 2.9rem);
  font-weight: 300;
  line-height: 1.1;
  flex: 1;
}

.menu__note {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ivoire-doux);
  text-align: right;
  max-width: 17rem;
  line-height: 1.5;
}

.menu__pied {
  margin-top: var(--espace-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-sm);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ivoire-doux);
}

@media (max-width: 700px) {
  .menu__note { display: none; }
  .menu__lien { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}


/* ==========================================================================
   4. HERO — la grande image d'ouverture
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(1.2rem, 5vw, 4rem) clamp(3.5rem, 9vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Version raccourcie, pour les pages interieures */
.hero--interieur { min-height: 74svh; }

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La photo garde ses couleurs. On ne l assombrit plus : la lisibilite
     du texte est assuree par le voile degrade ci-dessous, qui ne couvre
     que le bas de l image, et par l ombre portee du titre. */
  filter: saturate(1.12) contrast(1.04);
  transform: scale(1.04);
  animation: heroZoom 14s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.1); }
  to   { transform: scale(1.02); }
}

/* Voile degrade, volontairement court : il ne couvre que le bas de la photo,
   la ou se trouve le texte. Les deux tiers superieurs de l image restent
   en couleur pleine. Un second voile, tres leger, passe sous la barre du
   haut pour que le nom du site reste lisible. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Le voile est progressif : nul en haut, ou la photo reste en couleur
     pleine, puis de plus en plus dense en descendant vers le texte.
     Un second voile, court, passe sous la barre du haut. */
  background:
    linear-gradient(to top,
      rgba(21, 27, 46, 0.94) 0%,
      rgba(21, 27, 46, 0.88) 16%,
      rgba(21, 27, 46, 0.74) 34%,
      rgba(21, 27, 46, 0.64) 50%,
      rgba(21, 27, 46, 0.58) 64%,
      rgba(21, 27, 46, 0.28) 78%,
      transparent 86%),
    linear-gradient(to bottom,
      rgba(21, 27, 46, 0.72) 0%,
      rgba(21, 27, 46, 0.34) 12%,
      transparent 26%);
}

.hero__contenu {
  position: relative;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
}

.hero__surtitre {
  font-size: clamp(0.58rem, 1.4vw, 0.7rem);
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

/* Petit filet dore devant le surtitre */
.hero__surtitre::before {
  content: '';
  width: clamp(28px, 6vw, 62px);
  height: 1px;
  background: var(--laiton);
  flex: none;
}

.hero__titre {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(2.6rem, 8.5vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  max-width: 16em;
}

.hero__titre em {
  font-style: italic;
  color: var(--laiton-clair);
}

.hero__soustitre {
  margin-top: 1.8rem;
  max-width: 34rem;
  color: var(--ivoire);
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  font-weight: 200;
  line-height: 1.8;
}

/* Petite fleche animee invitant a faire defiler */
.hero__defiler {
  position: absolute;
  /* Cale a droite, et non au centre, pour ne jamais chevaucher
     le titre ni le sous-titre qui sont alignes a gauche */
  bottom: 1.6rem;
  right: clamp(1.2rem, 5vw, 4rem);
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivoire-doux);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.hero__defiler::after {
  content: '';
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--laiton), transparent);
  animation: defile 2.4s ease-in-out infinite;
}

@keyframes defile {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);    transform-origin: top; }
}

@media (max-width: 760px) {
  .hero__defiler { display: none; }
}


/* ==========================================================================
   5. BLOCS DE CONTENU
   ========================================================================== */

.section {
  padding: clamp(4.5rem, 11vw, var(--espace-xxl)) clamp(1.2rem, 5vw, 4rem);
}

.section--doux   { background-color: var(--noir-doux); }
.section--serree { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }

.contenant {
  max-width: var(--largeur-max);
  margin: 0 auto;
}

.contenant--texte {
  max-width: var(--largeur-texte);
  margin: 0 auto;
}

/* --- Petit libelle en majuscules espacees, au-dessus des titres --- */
.surtitre {
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 1.4rem;
}

.titre-section {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.12;
  margin-bottom: var(--espace-md);
  max-width: 18em;
}

.titre-section em { font-style: italic; color: var(--laiton-clair); }

.titre-section--centre,
.surtitre--centre { text-align: center; }
.titre-section--centre { margin-left: auto; margin-right: auto; }

h3, .titre-3 {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  margin-bottom: 0.8rem;
}

.texte p + p { margin-top: 1.35rem; }

.texte p {
  color: var(--texte-doux);
  font-weight: 200;
}

.texte strong {
  font-weight: 400;
  color: var(--ivoire);
}

/* Premier paragraphe mis en avant, plus grand et plus clair */
.texte--intro p {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.85;
  color: var(--ivoire);
  font-weight: 200;
}

.texte ul {
  list-style: none;
  margin-top: 1.35rem;
  display: grid;
  gap: 0.7rem;
}

.texte ul li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--texte-doux);
  font-weight: 200;
}

/* Puce en forme de petit losange dore */
.texte ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  background: var(--laiton);
  transform: rotate(45deg);
}

/* --- Filet de separation orne --- */
.filet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: var(--espace-lg) auto;
  max-width: 22rem;
  color: var(--laiton);
}

.filet::before, .filet::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--trait-fort), transparent);
}

.filet span {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--laiton);
  transform: rotate(45deg);
}

/* --- Citation mise en exergue --- */
.exergue {
  font-family: var(--font-titre);
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
  color: var(--ivoire);
  max-width: 26em;
  margin: 0 auto;
}

/* --- Boutons ---
   La fleche est ecrite en code CSS (\2192) plutot qu'en caractere,
   pour eviter tout probleme d'encodage. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 2.3rem;
  border: 1px solid var(--laiton);
  color: var(--laiton);
  background: transparent;
  font-family: var(--font-texte);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), gap var(--transition);
}

.bouton::after {
  content: "\2192";
  font-size: 0.9rem;
  letter-spacing: 0;
}

.bouton:hover {
  background-color: var(--laiton);
  color: var(--noir);
  gap: 1.3rem;
}

.bouton--plein {
  background-color: var(--laiton);
  color: var(--noir);
}

.bouton--plein:hover {
  background-color: var(--laiton-clair);
  border-color: var(--laiton-clair);
  color: var(--noir);
}

/* Bouton sans cadre, reduit a un mot souligne */
.bouton--nu {
  border: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--trait-fort);
}

.bouton--nu:hover {
  background: transparent;
  color: var(--laiton-clair);
  border-bottom-color: var(--laiton);
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm);
  margin-top: var(--espace-md);
}

.boutons--centre { justify-content: center; }

/* --- Grille de deux colonnes : texte d'un cote, image de l'autre --- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.duo--inverse .duo__media { order: -1; }

.duo__media {
  position: relative;
  overflow: hidden;
}

.duo__media img {
  width: 100%;
  /* Pas de format impose : la photographie est montree entiere.
     Un cadre 4/5 coupait les photos prises en paysage. */
  height: auto;
  object-fit: cover;
  transition: transform var(--transition-lente);
}

.duo__media:hover img { transform: scale(1.04); }

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: var(--espace-md); }
  .duo--inverse .duo__media { order: 0; }
}

/* --- Chiffres cles --- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
}

.chiffre {
  background: var(--noir);
  padding: clamp(1.8rem, 4vw, 2.8rem) 1.4rem;
  text-align: center;
}

.chiffre__valeur {
  font-family: var(--font-titre);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 300;
  color: var(--laiton-clair);
  line-height: 1;
  display: block;
}

.chiffre__libelle {
  margin-top: 0.8rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivoire-doux);
}

/* --- Etapes numerotees (deroule d'une ceremonie, methode de travail) --- */
.etapes {
  display: grid;
  gap: 1px;
  background: var(--trait);
  border-block: 1px solid var(--trait);
}

.etape {
  background: var(--noir);
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(0.5rem, 2vw, 1.5rem);
  align-items: start;
}

.etape__numero {
  font-family: var(--font-titre);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  color: var(--laiton);
  line-height: 1;
}

.etape h3 { margin-bottom: 0.6rem; }

.etape p { color: var(--texte-doux); font-weight: 200; }

@media (max-width: 620px) {
  .etape { grid-template-columns: 1fr; gap: 0.7rem; }
}


/* ==========================================================================
   6. CARTES ET GALERIES DE PHOTOS
   ========================================================================== */

/* --- Grille de cartes (les mariages, les ceremonies) --- */
.cartes {
  display: grid;
  /* auto-fit et non auto-fill : sans cela, une rangee de deux cartes
     garde une troisieme colonne vide et se retrouve calee a gauche. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.carte {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--noir-releve);
  color: var(--ivoire);
  isolation: isolate;
}

.carte__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(1.06);
  transition: transform var(--transition-lente), filter var(--transition);
}

.carte:hover .carte__image,
.carte:focus-visible .carte__image {
  transform: scale(1.06);
  filter: saturate(1.14) brightness(1.04);
}

/* Voile sombre en bas de la carte, pour que le texte reste lisible */
.carte::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Le voile doit couvrir le bloc de texte, et RIEN DE PLUS.
     Tout ce qu il couvre au-dela, c est de la photo perdue.
     Or ce bloc n a pas la meme hauteur partout : le descriptif est replie
     tant qu on ne survole pas, et toujours ouvert sur ecran tactile. D ou
     trois reglages, du plus court au plus long. Ici : texte replie, le
     voile s efface des la moitie de la carte. */
  background: linear-gradient(to top,
    rgba(21, 27, 46, 0.95) 0%,
    rgba(21, 27, 46, 0.88) 14%,
    rgba(21, 27, 46, 0.66) 20%,
    rgba(21, 27, 46, 0.32) 28%,
    rgba(21, 27, 46, 0.08) 36%,
    transparent 44%);
  pointer-events: none;
  transition: background var(--transition);
}

/* Au survol, le descriptif se deplie : le voile doit monter avec lui. */
.carte:hover::after,
.carte:focus-visible::after {
  background: linear-gradient(to top,
    rgba(21, 27, 46, 0.95) 0%,
    rgba(21, 27, 46, 0.88) 34%,
    rgba(21, 27, 46, 0.66) 42%,
    rgba(21, 27, 46, 0.32) 50%,
    rgba(21, 27, 46, 0.08) 58%,
    transparent 66%);
}

/* Sur ecran tactile, le descriptif est toujours ouvert : le bloc de texte
   occupe environ 35 % de la carte au lieu de 13 %. Le voile suit, mais il
   s arrete la : au-dessus, la photographie reste en couleur pleine. */
@media (hover: none) {
  .carte::after {
    background: linear-gradient(to top,
      rgba(21, 27, 46, 0.95) 0%,
      rgba(21, 27, 46, 0.88) 34%,
      rgba(21, 27, 46, 0.66) 42%,
      rgba(21, 27, 46, 0.32) 50%,
      rgba(21, 27, 46, 0.08) 58%,
      transparent 66%);
  }
}

.carte__texte {
  position: absolute;
  z-index: 2;
  bottom: 0; left: 0; right: 0;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.carte__surtitre {
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 0.7rem;
}

.carte__titre {
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.15;
}

.carte__note {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 200;
  color: var(--ivoire-doux);
  line-height: 1.6;
  /* Le descriptif apparait au survol sur grand ecran */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition), opacity var(--transition);
}

.carte:hover .carte__note,
.carte:focus-visible .carte__note {
  max-height: 8rem;
  opacity: 1;
}

/* Sur ecran tactile, pas de survol : le descriptif reste visible */
@media (hover: none) {
  .carte__note { max-height: 8rem; opacity: 1; }
}

/* Carte plus large, sur toute la largeur de la grille */
.carte--large { grid-column: 1 / -1; }
.carte--large .carte__image { aspect-ratio: 16 / 9; }

@media (max-width: 620px) {
  .cartes { grid-template-columns: 1fr; }
  .carte--large .carte__image { aspect-ratio: 3 / 4; }
}

/* --- Galerie de photos en colonnes irregulieres (effet mosaique) --- */
.galerie {
  columns: 3;
  column-gap: clamp(0.5rem, 1.5vw, 1.1rem);
}

.galerie__element {
  break-inside: avoid;
  margin-bottom: clamp(0.5rem, 1.5vw, 1.1rem);
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}

.galerie__element img {
  width: 100%;
  /* Les attributs width/height du HTML servent uniquement a reserver la place
     avant le chargement. C'est ce height:auto qui rend la hauteur au ratio
     reel de la photo, sinon elle serait ecrasee. */
  height: auto;
  filter: saturate(1.04);
  transition: transform var(--transition-lente), filter var(--transition);
}

.galerie__element:hover img,
.galerie__element:focus-visible img {
  transform: scale(1.035);
  filter: saturate(1.12) brightness(1.03);
}

@media (max-width: 900px) { .galerie { columns: 2; } }
@media (max-width: 520px) { .galerie { columns: 1; } }

/* --- Bandeau de photos qui defile horizontalement --- */
.bande {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(230px, 32vw, 380px);
  gap: clamp(0.5rem, 1.5vw, 1.1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--laiton) var(--noir-releve);
}

.bande > * { scroll-snap-align: start; }

.bande img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}


/* ==========================================================================
   VISIONNEUSE PLEIN ECRAN (au clic sur une photo de galerie)
   ========================================================================== */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 5, 5, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.visionneuse.est-ouverte { opacity: 1; visibility: visible; }

.visionneuse__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

.visionneuse__legende {
  position: absolute;
  bottom: clamp(0.9rem, 3vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 44rem);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 200;
  color: var(--ivoire-doux);
  line-height: 1.6;
}

.visionneuse__compteur {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--laiton);
  margin-bottom: 0.5rem;
}

/* Boutons fermer / precedent / suivant */
.visionneuse__bouton {
  position: absolute;
  background: none;
  border: 1px solid var(--trait);
  color: var(--ivoire);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.visionneuse__bouton:hover {
  background: var(--laiton);
  border-color: var(--laiton);
  color: var(--noir);
}

.visionneuse__fermer    { top: clamp(0.9rem, 3vw, 1.8rem); right: clamp(0.9rem, 3vw, 1.8rem); }
.visionneuse__precedent { left: clamp(0.5rem, 2vw, 1.8rem); top: 50%; transform: translateY(-50%); }
.visionneuse__suivant   { right: clamp(0.5rem, 2vw, 1.8rem); top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   7. TEMOIGNAGES
   ========================================================================== */

.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}

.temoignage {
  border: 1px solid var(--trait);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--noir-releve);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Guillemet ouvrant en gros, en filigrane */
.temoignage::before {
  content: "\201C";
  font-family: var(--font-titre);
  font-size: 4.5rem;
  line-height: 0.7;
  color: var(--laiton);
  opacity: 0.5;
}

.temoignage__texte {
  font-weight: 200;
  color: var(--texte-doux);
  font-style: italic;
  flex: 1;
}

.temoignage__signature {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--laiton);
}

.temoignage__lieu {
  display: block;
  margin-top: 0.4rem;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--ivoire-doux);
  font-size: 0.72rem;
}

/* Temoignage mis en avant, sur toute la largeur */
.temoignage--vedette {
  grid-column: 1 / -1;
  text-align: center;
  align-items: center;
  border-color: var(--trait-fort);
}

.temoignage--vedette .temoignage__texte {
  font-family: var(--font-titre);
  font-size: clamp(1.25rem, 2.8vw, 1.8rem);
  line-height: 1.55;
  max-width: 40rem;
}


/* ==========================================================================
   8. FORMULAIRE DE CONTACT
   ========================================================================== */

.formulaire {
  display: grid;
  gap: 1.5rem;
}

.champ { display: grid; gap: 0.55rem; }

.champ--double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 620px) {
  .champ--double { grid-template-columns: 1fr; }
}

.champ label {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivoire-doux);
}

.champ label .obligatoire { color: var(--laiton); }

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  background: var(--noir-releve);
  border: 1px solid var(--trait);
  color: var(--ivoire);
  font-family: var(--font-texte);
  font-size: 1rem;
  font-weight: 200;
  padding: 0.95rem 1.1rem;
  transition: border-color var(--transition), background-color var(--transition);
}

.champ textarea { min-height: 11rem; resize: vertical; line-height: 1.7; }

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--laiton);
  background: var(--noir);
}

.champ input::placeholder,
.champ textarea::placeholder { color: var(--texte-fantome); }

/* Champ invisible destine a pieger les robots spammeurs */
.champ--piege { position: absolute; left: -9999px; opacity: 0; }

.formulaire__note {
  font-size: 0.8rem;
  color: var(--ivoire-doux);
  font-weight: 200;
  line-height: 1.7;
}

/* Coordonnees directes, a cote du formulaire */
.coordonnees {
  display: grid;
  gap: 1.6rem;
  align-content: start;
}

.coordonnee__libelle {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 0.4rem;
}

.coordonnee__valeur {
  font-family: var(--font-titre);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 300;
  color: var(--ivoire);
}

a.coordonnee__valeur:hover { color: var(--laiton-clair); }


/* ==========================================================================
   9. PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--noir-doux);
  border-top: 1px solid var(--trait);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 5vw, 4rem) 2rem;
}

.pied__haut {
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 820px) {
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .pied__haut { grid-template-columns: 1fr; }
}

.pied__marque {
  font-family: var(--font-titre);
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivoire);
  margin-bottom: 0.8rem;
}

.pied__signature {
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 1.4rem;
}

.pied p {
  font-size: 0.88rem;
  font-weight: 200;
  color: var(--ivoire-doux);
  max-width: 26rem;
}

.pied__titre {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 1.2rem;
}

.pied__liste {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.pied__liste a {
  color: var(--ivoire-doux);
  font-size: 0.92rem;
  font-weight: 200;
}

.pied__liste a:hover { color: var(--laiton-clair); }

.pied__bas {
  max-width: var(--largeur-max);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem var(--espace-md);
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 200;
  color: var(--ivoire-doux);
}


/* ==========================================================================
   10. ANIMATIONS D'APPARITION
   Les elements portant la classe "apparait" montent doucement quand ils
   entrent dans l'ecran. C'est le script site.js qui ajoute "est-visible".
   ========================================================================== */

.apparait {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.apparait.est-visible {
  opacity: 1;
  transform: none;
}

/* Decalage en cascade pour les elements d'une meme grille */
.apparait--2 { transition-delay: 0.1s; }
.apparait--3 { transition-delay: 0.2s; }
.apparait--4 { transition-delay: 0.3s; }

/* Si le navigateur ne sait pas observer le defilement, tout reste visible */
.sans-js .apparait { opacity: 1; transform: none; }


/* ==========================================================================
   11. LES DEUX BOUTONS DE LA GRANDE IMAGE D'OUVERTURE
   Deux actions empilees, de meme largeur, sous le sous-titre du hero.
   ========================================================================== */

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}

.hero__actions .bouton {
  /* Meme largeur pour les deux, et texte centre a l'interieur */
  width: min(100%, 23rem);
  justify-content: center;
  /* Legere teinte sombre derriere le texte, pour rester lisible
     quelle que soit la photo placee dessous */
  background-color: rgba(21, 27, 46, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.hero__actions .bouton:hover {
  background-color: var(--laiton);
}

.hero__actions .bouton--plein {
  background-color: rgba(196, 168, 124, 0.92);
  color: var(--noir);
}

.hero__actions .bouton--plein:hover {
  background-color: var(--laiton-clair);
}

@media (max-width: 560px) {
  .hero__actions .bouton {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    letter-spacing: 0.18em;
  }
}

/* Pas de fleche dans ces deux boutons : le texte centre se suffit */
.hero__actions .bouton::after { content: none; }


/* ==========================================================================
   12. SECTIONS CLAIRES
   Le site alterne : les photos et les galeries restent sur fond noir, les
   textes passent sur fond ivoire. Il suffit d'ajouter la classe
   "section--clair" : tout ce qu'elle contient bascule automatiquement,
   parce que les composants n'utilisent que des variables.
   ========================================================================== */

.section--clair,
.section--clair-doux {
  background-color: var(--ivoire-fond);
  color: var(--encre);

  /* On redefinit les variables : le noir devient ivoire, l'ivoire devient
     encre. Tout le contenu de la section suit, sans regle supplementaire. */
  --noir:          var(--ivoire-fond);
  --noir-doux:     var(--ivoire-tinte);
  --noir-releve:   #FCF3EC;
  --ivoire:        var(--encre);
  --ivoire-doux:   var(--encre-douce);
  --texte-doux:    rgba(26, 20, 20, 0.82);
  --texte-fantome: rgba(26, 20, 20, 0.42);
  --trait:         rgba(26, 20, 20, 0.16);
  --trait-fort:    rgba(26, 20, 20, 0.32);
  --laiton:        var(--laiton-fonce);
  --laiton-clair:  #6F5216;
}

.section--clair-doux { background-color: var(--ivoire-tinte); }

/* Les titres restent en encre, l'italique mis en avant prend le dore */
.section--clair .titre-section em,
.section--clair-doux .titre-section em,
.section--clair .exergue,
.section--clair-doux .exergue {
  color: var(--laiton-fonce);
}

/* Un bouton plein dans une section claire : aplat dore sature et texte
   ivoire. C'est lui qui doit accrocher l'oeil dans la page. */
.section--clair .bouton--plein,
.section--clair-doux .bouton--plein {
  background-color: var(--laiton-vif);
  border-color: var(--laiton-vif);
  color: #FFF8F3;
}

.section--clair .bouton--plein:hover,
.section--clair-doux .bouton--plein:hover {
  background-color: var(--encre);
  border-color: var(--encre);
  color: #FFF8F3;
}


/* ==========================================================================
   13. LE ROSE FUCHSIA, COULEUR D'ACTION
   Un seul role : les boutons principaux. C'est la seule tache de couleur
   franche du site, donc elle accroche l'oeil immediatement.
   ========================================================================== */

.bouton--plein,
.section--clair .bouton--plein,
.section--clair-doux .bouton--plein {
  background-color: var(--rose);
  border-color: var(--rose);
  color: #FFF8F3;
}

.bouton--plein:hover,
.section--clair .bouton--plein:hover,
.section--clair-doux .bouton--plein:hover {
  background-color: var(--rose-fonce);
  border-color: var(--rose-fonce);
  color: #FFF8F3;
}

/* Les deux boutons de la grande image d'ouverture */
.hero__actions .bouton--plein {
  background-color: var(--rose);
  border-color: var(--rose);
  color: #FFF8F3;
}

.hero__actions .bouton--plein:hover {
  background-color: var(--rose-fonce);
  border-color: var(--rose-fonce);
}

/* Rappels discrets du rose, pour qu'il ne soit pas seul sur la page */
.etape__numero { color: var(--rose-clair); }
.section--clair .etape__numero,
.section--clair-doux .etape__numero { color: var(--rose); }

.chiffre__valeur { color: var(--laiton-clair); }
.section--clair .chiffre__valeur,
.section--clair-doux .chiffre__valeur { color: var(--rose); }

/* Le contour de mise au point au clavier reprend la couleur d'action */
:focus-visible { outline-color: var(--rose); }
.section--clair :focus-visible,
.section--clair-doux :focus-visible { outline-color: var(--rose); }

/* Ombre portee sur le texte du hero : elle remplace l'assombrissement de la
   photo. Le texte reste lisible meme sur une zone claire de l'image, sans
   qu'on ait besoin de ternir toute la photographie. */
.hero__titre,
.hero__soustitre,
.hero__surtitre {
  text-shadow: 0 1px 3px rgba(21, 27, 46, 0.55),
               0 8px 40px rgba(21, 27, 46, 0.45);
}

.barre__marque { text-shadow: 0 1px 12px rgba(21, 27, 46, 0.6); }

/* Un chiffre cle peut etre un mot plutot qu'un nombre (« quelques »).
   Dans ce cas il est bien plus long : on reduit sa taille pour qu'il
   tienne dans sa case, au lieu de deborder. */
.chiffre__valeur--long {
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  line-height: 1.25;
  font-style: italic;
}

/* Dans la grande image, le sur-titre est en ivoire et non en dore : le dore
   n'a pas assez de contraste sur une photographie claire. Le petit trait
   qui le precede, lui, reste dore. */
.hero__surtitre { color: var(--ivoire); }
.hero__surtitre::before { background: var(--laiton); }

/* La signature sous le logo est doree quand la barre a son fond noir, mais
   ivoire tant qu'elle est transparente par-dessus la photo : le dore n'y
   serait pas lisible. */
.barre__marque small { color: rgba(244, 239, 232, 0.92); }
.barre.est-defilee .barre__marque small { color: var(--laiton); }

/* Le guillemet du temoignage mis en avant est tres grand : sans cette
   correction, il laisse un trou entre lui et le texte. */
.temoignage--vedette::before {
  font-size: 3.4rem;
  margin-bottom: -1.2rem;
}


/* ==========================================================================
   14. VIDEO EN EN-TETE
   La video se comporte exactement comme la photo : elle remplit l'en-tete,
   passe sous le meme voile degrade, et garde ses couleurs.
   Elle est toujours muette et en boucle. La photo reste dessous : c'est elle
   qu'on voit sur les telephones et si la video ne demarre pas.
   ========================================================================== */

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.04);
}

/* La photo passe derriere la video, et sert de secours */
.hero__image--sous-video { z-index: -3; }

@media (max-width: 780px) {
  /* Sur telephone, on ne joue pas la video : donnees mobiles et batterie.
     La photo prend sa place, au meme endroit. */
  .hero__video { display: none; }
  .hero__image--sous-video { z-index: -2; }
}

@media (prefers-reduced-motion: reduce) {
  /* Certaines personnes reglent leur appareil pour supprimer les animations,
     souvent parce que le mouvement leur donne le vertige. On respecte ce choix. */
  .hero__video { display: none; }
  .hero__image--sous-video { z-index: -2; }
}

/* Une rangee de deux cartes : elles sont larges, donc on leur donne un format
   paysage. Le format portrait des grilles de sept mariages couperait ici les
   photographies prises en largeur. */
.cartes--duo .carte__image { aspect-ratio: 4 / 3; }

@media (max-width: 620px) {
  .cartes--duo .carte__image { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   15. LE TEXTE DES CARTES RESTE CLAIR
   Une carte est toujours une photographie recouverte d'un voile sombre, meme
   quand la section autour d'elle est en ivoire. Son texte doit donc rester
   clair. Sans ces lignes, il heritait des couleurs de la section claire et
   devenait du texte sombre sur un voile sombre : illisible.
   ========================================================================== */

.carte {
  --ivoire:        #F4EFE8;
  --ivoire-doux:   #A89E92;
  --texte-doux:    rgba(244, 239, 232, 0.86);
  --texte-fantome: rgba(168, 158, 146, 0.55);
  --laiton:        #C4A87C;
  --laiton-clair:  #E2CDA8;
  --trait:         rgba(244, 239, 232, 0.14);
  --trait-fort:    rgba(244, 239, 232, 0.28);
  color: var(--ivoire);
}

/* Meme raison pour les grandes images d'ouverture, dont le texte se pose
   toujours sur la photographie. */
.hero {
  --ivoire:      #F4EFE8;
  --ivoire-doux: #A89E92;
  --laiton:      #C4A87C;
}

/* Le sur-titre est le plus petit texte pose sur la photographie, donc le plus
   fragile. Une ombre portee dense joue le role d'un voile local : elle
   assombrit juste ce qu'il y a derriere les lettres, sans ternir la photo. */
.hero__surtitre {
  text-shadow: 0 1px 2px rgba(21, 27, 46, 0.9),
               0 2px 10px rgba(21, 27, 46, 0.8),
               0 0 22px rgba(21, 27, 46, 0.7);
}


/* ==========================================================================
   16. VIDEO YOUTUBE, CHARGEE AU CLIC
   Avant le clic, ce n'est qu'une image : aucune requete n'est envoyee a
   Google, aucun traceur n'est depose. La video ne se charge que si le
   visiteur la demande.
   ========================================================================== */

.video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--noir-doux);
  cursor: pointer;
  overflow: hidden;
  border-radius: 2px;
}

.video__image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-lente), filter var(--transition);
  filter: saturate(1.04);
}

.video:hover .video__image { transform: scale(1.02); }

/* Le triangle de lecture, dessine en CSS : pas d'image a telecharger */
.video__bouton {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: rgba(21, 27, 46, 0.72);
  border: 1px solid rgba(244, 239, 232, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--transition), transform var(--transition);
}

.video__bouton::before {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.75rem 0 0.75rem 1.2rem;
  border-color: transparent transparent transparent #F4EFE8;
}

.video:hover .video__bouton {
  background: var(--rose);
  border-color: var(--rose);
  transform: translate(-50%, -50%) scale(1.06);
}

/* Une fois la video chargee, elle occupe la place de l'image */
.video--chargee { cursor: default; }
.video iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Vidéos verticales, filmées au téléphone : le lecteur doit être en 9/16,
   sinon YouTube ajoute de larges bandes noires sur les côtés. */
/* Le format du lecteur est repris de l'image d'attente par site.js */

/* Deux vidéos côte à côte. En vertical, l'une sous l'autre prendrait
   une hauteur d'écran entière chacune. */
.videos {
  display: grid;
  /* 180px et non 200 : trois videos verticales tiennent alors cote a cote
     dans la colonne de texte, au lieu de se repartir en deux plus une. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
  margin-top: 2rem;
}

.videos__element { margin: 0; }

.videos__element figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ivoire-doux);
}

/* Le rond de lecture est plus petit sur une vignette étroite */
.videos .video__bouton { width: 3.4rem; height: 3.4rem; }
.videos .video__bouton::before { border-width: 0.5rem 0 0.5rem 0.8rem; }

/* Une vidéo verticale seule ne doit pas occuper toute la largeur du texte :
   en 9/16, elle dépasserait la hauteur d'un écran. On la borne et on la centre. */
.contenant--texte > .video--vertical {
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   16. QUESTIONS FREQUENTES
   Chaque question est un <details> : le navigateur gere l'ouverture et la
   fermeture tout seul, sans une ligne de JavaScript. Les reponses restent
   ecrites dans la page meme quand elles sont fermees, donc Google les lit
   et la recherche du navigateur (Ctrl+F) les trouve.
   ========================================================================== */

.faq {
  margin-top: 2.5rem;
  border-top: 1px solid var(--trait);
}

.faq__element {
  border-bottom: 1px solid var(--trait);
}

/* La question elle-meme : toute la ligne est cliquable. */
.faq__question {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;                 /* enleve le triangle par defaut */
  font-family: var(--font-titre);
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ivoire);
  transition: color 0.25s ease;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question:hover { color: var(--laiton); }

/* Le signe + dessine en CSS, qui bascule en - a l'ouverture. */
.faq__question::after {
  content: '+';
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-texte);
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1;
  color: var(--laiton);
  transition: transform 0.3s ease;
}

.faq__element[open] > .faq__question { color: var(--laiton); }
.faq__element[open] > .faq__question::after {
  content: '\2013';                 /* tiret demi-cadratin */
  transform: translateY(-0.05em);
}

.faq__reponse {
  padding: 0 0 1.6rem;
  max-width: 46em;
}

.faq__reponse > p:first-child { margin-top: 0; }
.faq__reponse > p:last-child,
.faq__reponse > ul:last-child { margin-bottom: 0; }

/* Reperage au clavier : le contour doit rester bien visible. */
.faq__question:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 4px;
}

/* --- Sommaire d'une page longue --- */
.sommaire {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.2rem 2rem;
}

.sommaire li { margin: 0; }

.sommaire a {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--trait);
  font-family: var(--font-texte);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--texte-doux);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.sommaire a:hover,
.sommaire a:focus-visible {
  color: var(--laiton);
  border-color: var(--laiton);
}

/* Quand on arrive sur une famille par le sommaire, le titre ne doit pas
   se retrouver cache sous la barre de navigation fixe. */
.section[id] { scroll-margin-top: 5.5rem; }