/* ============================================================
   louelafête — Feuille de style
   Palette douce, moderne et universelle (validée)
   Organisation : variables → base → nav → hero → packs →
   comment ça marche → rassurance → avis → contact → footer → responsive
   ============================================================ */

/* ===== 1. VARIABLES DE COULEURS =====
   Modifie une couleur ici et elle change partout sur le site. */
:root {
  --fond-clair:    #f6f4f0;   /* fond crème principal */
  --fond-blanc:    #ffffff;   /* cartes */
  --fond-sombre:   #232135;   /* sections "ambiance" (hero, contact) */
  --fond-sombre-2: #2c2942;   /* variante sombre */
  --primaire:      #5b54c9;   /* violet : boutons, titres, accents */
  --primaire-fonce:#4a44ad;   /* violet survol */
  --secondaire:    #6f66e8;   /* violet vif : liens, détails (ex-teal, retiré) */
  --primaire-vif:  #8b85e0;   /* violet clair : accents sur fond nuit */
  --fond-nuit:     #232135;   /* marine (comme le hero) : section galerie */
  --accent:        #f5a623;   /* or : badges, étoiles */
  --texte:         #232135;   /* texte principal sur fond clair */
  --texte-doux:    #6a6880;   /* texte secondaire, gris-violet */
  --texte-clair:   #f6f4f0;   /* texte sur fond sombre */
  --texte-clair-2: #b0aec6;   /* texte secondaire sur fond sombre */
  --bordure:       #e5e2db;   /* bordures légères */
  --radius:        14px;      /* arrondi standard des cartes */
  --max-width:     1140px;    /* largeur max du contenu */
}

/* ===== 2. RÉINITIALISATION & BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }  /* défilement fluide vers les ancres */

body {
  font-family: 'Instrument Sans', 'Segoe UI', sans-serif;
  color: var(--texte);
  background: var(--fond-clair);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Titres : Bricolage Grotesque — plus large et affirmée, esprit affiche
   de soirée. Le texte courant reste en Instrument Sans, discret et lisible. */
h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif; }

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

a { text-decoration: none; color: inherit; }

/* ===== BOUTONS (réutilisables partout) ===== */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, background .2s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }   /* léger soulèvement au survol */

.btn--primary { background: var(--primaire); color: #fff; }
.btn--primary:hover { background: var(--primaire-fonce); }

.btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }

/* Variante du bouton fantôme pour les fonds clairs (bordure violette) */
.btn--ghost-clair { background: transparent; color: var(--primaire); border: 1.5px solid var(--primaire); }
.btn--ghost-clair:hover { background: var(--primaire); color: #fff; }

.btn--block { display: block; width: 100%; }   /* bouton pleine largeur */

/* ===== EN-TÊTES DE SECTION (réutilisables) ===== */
.section__head { text-align: center; max-width: 640px; margin: 0 auto 48px; padding: 0 20px; }
/* Eyebrow (« kicker ») : petite étiquette au-dessus des titres de section.
   Version raffinée : puce ronde colorée à gauche + petite ligne fine à droite,
   pour un rendu éditorial plus soigné qu'une simple ligne en majuscules. */
.section__kicker {
  color: var(--secondaire);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;                 /* interlettrage plus large = plus "premium" */
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section__title { font-size: 36px; font-weight: 700; line-height: 1.2; }
/* Variante alignée à gauche : casse la répétition « tout centré » d'une
   section à l'autre (utilisée sur galerie, réserver et FAQ). */
.section__head--left { text-align: left; margin-left: 0; }
.section__lead { color: var(--texte-doux); margin-top: 14px; font-size: 17px; }

/* ============================================================
   3. NAVIGATION
   ============================================================ */
.nav {
  position: sticky;       /* reste collée en haut quand on défile */
  top: 0;
  z-index: 100;
  background: rgba(246,244,240,.92);
  backdrop-filter: blur(8px);   /* effet verre dépoli */
  border-bottom: 1px solid var(--bordure);
}
.nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Logo dans la barre de nav : c'est maintenant une image SVG.
   On fixe sa hauteur, la largeur s'ajuste automatiquement. */
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 52px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--texte); transition: color .2s; }
.nav__links a:hover { color: var(--primaire); }
.nav__cta {
  background: var(--primaire);
  color: #fff !important;
  padding: 9px 20px;
  border-radius: 9px;
}
.nav__cta:hover { background: var(--primaire-fonce); }

/* Bouton hamburger (caché sur ordinateur, visible sur mobile) */
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.nav__burger span { width: 26px; height: 3px; background: var(--texte); border-radius: 2px; transition: .3s; }

/* ============================================================
   4. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* La photo d'ambiance en fond, recadrée pour couvrir tout l'espace.
     Cadrage vertical calé en haut (`center top`) et non au centre : l'écran est
     plus large que la photo, donc `cover` rogne en hauteur. Centré, il mangeait
     ~160 px en haut et coupait le sommet de l'arche à ballons. Calé en haut,
     l'arche est entière ; ce qui part en bas n'est que du parquet sombre, déjà
     assombri par le voile dégradé. */
  background: var(--fond-sombre) url('../images/hero.jpg') center top/cover no-repeat;
}
/* Léger voile sombre : juste ce qu'il faut pour la lisibilité du texte.
   La vraie photo de fête reste visible — c'est elle qui vend. */
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35,33,53,.35) 0%, rgba(35,33,53,.48) 55%, rgba(35,33,53,.85) 100%);
}
.hero__content { position: relative; z-index: 2; max-width: 760px; padding: 40px 24px; }
/* Le kicker vit maintenant dans le <h1> (voir index.html) : c'est un <span>,
   donc il faut lui redonner à la main le comportement de bloc qu'il avait en
   tant que <p> — sinon il se colle au grand titre sur la même ligne.
   Le reste (couleur, graisse, taille) s'applique tel quel et l'emporte sur ce
   qu'il hériterait du <h1> : à l'écran, rien ne bouge. */
.hero__kicker {
  display: block;
  line-height: 1.4;
  color: var(--accent);
  font-weight: 600; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 18px;
}
.hero__title { color: #fff; font-size: 54px; font-weight: 700; line-height: 1.12; }
.hero__subtitle { color: var(--texte-clair-2); font-size: 20px; margin: 22px auto 34px; max-width: 560px; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Petits arguments de confiance sous les boutons */
.hero__trust {
  list-style: none;
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  margin-top: 36px;
  color: var(--texte-clair-2); font-size: 14px;
}

/* ============================================================
   5. PACKS
   ============================================================ */
.packs { max-width: var(--max-width); margin: 0 auto; padding: 90px 24px; }

.packs__grid {
  /* Flexbox centré : quand la dernière ligne n'est pas pleine (ici 2 packs
     sur 5), les cartes restantes sont automatiquement centrées. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

/* Carte d'un pack */
.pack {
  /* flex: 0 1 320px = largeur de base 320px, peut rétrécir sur petit écran,
     mais ne s'étire pas (pour garder les cartes du dernier rang centrées). */
  flex: 0 1 320px;
  max-width: 360px;
  position: relative;
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Courbe d'easing « douce » (accélère puis freine) + durée un peu plus longue :
     donne au hover un côté « objet posé sur coussin » plutôt qu'un saut sec. */
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease;
}
.pack:hover {
  transform: translateY(-8px);
  /* Ombre en deux couches : une ombre chaude et large (teinte violette
     de la charte, pas un gris neutre) + une ombre nette près du bord.
     Beaucoup plus vivant qu'une ombre plate. */
  box-shadow:
    0 20px 40px -12px rgba(91, 84, 201, .22),
    0 8px 16px -8px rgba(35, 33, 53, .08);
  border-color: transparent;   /* la bordure grise disparaît sous l'ombre */
}

/* L'image de la carte zoome doucement au survol (effet « ken burns ») :
   nécessite une transition sur .pack__img (voir plus bas). */
.pack:hover .pack__img { transform: scale(1.04); }

/* Le prix devient plus vif au survol : petit signal visuel qui « suit » l'oeil. */
.pack:hover .pack__price span { color: var(--primaire-fonce); }

/* Pack mis en avant (le plus populaire) : bordure violette + léger zoom.
   Au hover, on cumule le lift avec le scale existant. */
.pack--featured { border: 2px solid var(--primaire); transform: scale(1.02); }
.pack--featured:hover { transform: scale(1.02) translateY(-8px); }

/* Badge "Le plus populaire" */
.pack__badge {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: var(--accent); color: #5a3a00;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
}

/* Image du pack (en fond de la zone haute de la carte) */
/* Note : .pack a déjà overflow: hidden, donc le zoom de l'image reste clippé
   dans les bords arrondis de la carte. La transition (même courbe que le lift)
   fait bouger l'image en même temps que la carte, pas décorrélé. */
.pack__img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: #efece6;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
/* Visuel « nuit » provisoire : remplace les photos de fiches produit
   (fond blanc type e-commerce) en attendant la session photo du matériel
   allumé. Dégradés lumineux sur fond marine, dans la palette. */
.pack__img--nuit,
.resa-carte__media--nuit,
.reserver__fiche-media--nuit {
  background-image:
    radial-gradient(circle at 22% 30%, rgba(91,84,201,.55), transparent 55%),
    radial-gradient(circle at 78% 72%, rgba(245,166,35,.20), transparent 50%),
    radial-gradient(circle at 62% 15%, rgba(139,133,224,.25), transparent 45%) !important;
  background-color: var(--fond-sombre) !important;
}

/* Le prix a aussi une transition pour que le changement de couleur au hover
   soit fluide plutôt qu'un flash. */
.pack__price span { transition: color .3s ease; }

.pack__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.pack__name { font-size: 21px; font-weight: 600; }
.pack__desc { color: var(--texte-doux); font-size: 14.5px; margin: 8px 0 16px; }

/* Liste du contenu du pack */
.pack__items { list-style: none; margin-bottom: 18px; }
.pack__items li {
  font-size: 14.5px; padding: 5px 0 5px 24px; position: relative; color: var(--texte);
}
.pack__items li::before {   /* petite puce check verte */
  content: "✓"; position: absolute; left: 0; color: var(--secondaire); font-weight: 700;
}

/* Pied de carte : prix + caution. margin-top:auto colle le bloc en bas */
.pack__footer { margin-top: auto; padding-top: 8px; }
.pack__price { font-size: 16px; color: var(--texte-doux); }
.pack__price span { font-size: 34px; font-weight: 700; color: var(--primaire); }
.pack__caution { font-size: 13px; color: var(--texte-doux); margin: 6px 0 16px; }

/* Phrase "à la pièce" sous la grille */
.packs__alacarte { text-align: center; margin-top: 40px; color: var(--texte-doux); font-size: 16px; }
.packs__alacarte a { color: var(--primaire); font-weight: 600; }

/* ============================================================
   CAROUSEL 3D DES PACKS
   Les cartes sont placées en cercle autour d'un axe vertical
   (rotateY + translateZ). Le stage tourne pour amener une carte
   face à nous. Le JS ajuste opacité et rotation, tout le reste
   (position, transitions, styles carte) est piloté ici.
   ============================================================ */
.packs-carousel {
  position: relative;
  max-width: 1040px;
  margin: 40px auto 0;
  padding: 20px 60px;               /* padding latéral = place pour les flèches ‹ › */
  perspective: 1800px;               /* profondeur de la scène 3D */
}

/* La scène : c'est elle qui tourne (rotateY). Les cartes filles gardent
   leur position fixe sur le cercle, seule la scène pivote autour. */
.packs-carousel__stage {
  position: relative;
  width: 100%;
  height: 420px;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
  outline: none;                     /* focus visible via .is-focus au clavier */
}
.packs-carousel__stage:focus-visible {
  outline: 2px dashed var(--primaire);
  outline-offset: 6px;
  border-radius: 12px;
}

/* Une carte 3D : lien qui prend une taille fixe et se pose sur le cercle.
   Le JS applique ensuite rotateY(iθ) translateZ(rayon) pour chaque carte.
   L'image occupe TOUT le cadre ; le nom + le prix sont posés en bas dans
   un dégradé sombre (style éditorial minimaliste, façon galerie photo). */
.pack.pack--3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 360px;
  margin-left: -130px;
  margin-top: -180px;
  padding: 0;
  flex: none;
  max-width: none;
  display: block;
  border-radius: 18px;
  background: #232135;               /* fond neutre pendant le chargement image */
  box-shadow: 0 20px 40px -10px rgba(35,33,53,.35);
  overflow: hidden;
  /* On garde les cartes visibles même quand elles sont à l'arrière du cercle
     (avec une opacité plus faible pilotée en JS) : elles suggèrent la
     profondeur du carousel plutôt que de disparaître complètement. */
  backface-visibility: visible;
  cursor: pointer;
  text-decoration: none;             /* c'est un <a>, on retire le soulignement */
  color: #fff;
  /* On ne transitionne PAS le transform ici (c'est la scène qui tourne).
     Seule l'opacité change au fil de la rotation. */
  transition: opacity .5s ease, box-shadow .3s ease, transform .3s ease;
}

/* On coupe les effets hover hérités des cartes de la grille classique :
   dans le carousel c'est la scène qui bouge, pas les cartes. */
.pack.pack--3d:hover {
  transform: none;
  box-shadow: 0 24px 50px -10px rgba(35,33,53,.5);
  border-color: transparent;
}

/* Pack "populaire" en version 3D : liseré violet lumineux + badge en haut-gauche */
.pack.pack--3d.pack--featured {
  transform: none;
  box-shadow: 0 24px 50px -10px rgba(91,84,201,.5),
              0 0 0 3px var(--primaire) inset;
}
.pack.pack--3d.pack--featured:hover {
  transform: none;
  box-shadow: 0 28px 60px -10px rgba(91,84,201,.6),
              0 0 0 3px var(--primaire) inset;
}
.pack.pack--3d .pack__badge {
  top: 14px;
  left: 14px;
  right: auto;
  z-index: 2;
}

/* Image plein cadre (couvre toute la carte) */
.pack--3d__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Légende posée en bas de la carte, sur un dégradé sombre pour la lisibilité */
.pack--3d__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 50px 18px 18px;
  background: linear-gradient(to top,
    rgba(35,33,53,.95) 0%,
    rgba(35,33,53,.7) 45%,
    rgba(35,33,53,0) 100%);
  color: #fff;
  z-index: 1;
}
.pack.pack--3d .pack__name {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 5px;
}
.pack--3d__tag {
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,.85);
  margin: 0 0 8px;
  line-height: 1.4;
}
/* Fourchette d'invités conseillée : petite pastille claire sur le fond sombre,
   pour aider le client à se situer sans réfléchir au matériel. */
.pack--3d__capacite {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  padding: 3px 9px;
  border-radius: 999px;
  margin: 0 0 10px;
}
.pack--3d__price {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1;
}
.pack--3d__price small {
  font-size: 12px;
  font-weight: 500;
  opacity: .85;
  margin-left: 4px;
}

/* ── Contrôles de navigation ── */
.packs-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  color: var(--primaire);
  font-size: 26px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.packs-carousel__nav:hover {
  background: var(--primaire);
  color: #fff;
  box-shadow: 0 10px 24px -6px rgba(91,84,201,.35);
  transform: translateY(-50%) scale(1.08);
}
.packs-carousel__nav--prev { left: 12px; }
.packs-carousel__nav--next { right: 12px; }

/* Points d'indication (un par pack) */
.packs-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.packs-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bordure);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.packs-carousel__dot:hover { background: var(--texte-doux); }
.packs-carousel__dot.is-active {
  background: var(--primaire);
  transform: scale(1.3);
}

/* Accessibilité : moins d'animations → on abandonne le 3D et on revient
   à une grille lisible, sans rotation ni transition. */
@media (prefers-reduced-motion: reduce) {
  .packs-carousel { perspective: none; padding: 20px 24px; }
  .packs-carousel__stage {
    height: auto;
    transform: none !important;
    transition: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
  }
  .pack.pack--3d {
    position: relative;
    left: auto; top: auto;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
    cursor: default;
  }
  .packs-carousel__nav,
  .packs-carousel__dots { display: none; }
}

/* Mobile : le 3D n'a pas de sens sur un petit écran (cartes trop
   proches, effet perspective écrasé). On bascule sur un scroll
   horizontal snap, plus naturel au doigt. */
@media (max-width: 768px) {
  .packs-carousel { perspective: none; max-width: 100%; padding: 10px 0 0; }
  .packs-carousel__stage {
    height: auto;
    transform: none !important;
    transition: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 10px 24px 20px;
    -webkit-overflow-scrolling: touch;
  }
  .pack.pack--3d {
    position: relative;
    left: auto; top: auto;
    margin: 0;
    flex: 0 0 240px;
    height: 340px;
    transform: none !important;
    opacity: 1 !important;
    scroll-snap-align: center;
    cursor: pointer;
  }
  .packs-carousel__nav { display: none; }
  .packs-carousel__dots { display: none; }
}

/* ============================================================
   5bis-ter. RÉSERVER — bloc à deux onglets
   Onglet 1 « J'ai ma date » : calendrier + catalogue filtré par date.
   Onglet 2 « Je choisis mon matériel » : boutons panier + quiz.
   ============================================================ */
.reserver {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 24px;
}

/* ══════════════════════════════════════════════════════════════════
   RÉSERVER — split 2 colonnes
   Gauche  : présentation + calendrier (ou fiche détail quand une carte
             est cliquée) + mini-récap panier sticky en bas.
   Droite  : grille unifiée de cartes (packs + appareils à la pièce),
             toutes au même format visuel (photo + chip + prix + bouton).
   ══════════════════════════════════════════════════════════════════ */

.reserver__split {
  display: grid;
  grid-template-columns: 1fr;                /* mobile : empilé */
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .reserver__split {
    grid-template-columns: minmax(360px, 460px) 1fr;   /* gauche fixe, droite fluide */
    gap: 40px;
  }
}

/* ── Colonne gauche ── */
.reserver__gauche {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 24px;                                 /* suit le scroll pour ne jamais perdre le calendrier */
}
/* Sur mobile on désactive le sticky, la colonne s'affiche normalement */
@media (max-width: 899px) {
  .reserver__gauche { position: static; }
}

.reserver__intro {
  color: var(--texte-doux);
  font-size: 15px;
  margin: 0 0 14px;
}

/* Bloc calendrier (visible par défaut, masqué quand une fiche est ouverte) */
.reserver__date { animation: guide-apparait .25s ease; }
.reserver__cal  { margin-bottom: 12px; }
.reserver__hint { font-size: 14px; color: var(--texte-doux); margin: 0 0 16px; text-align: center; }

/* Badge de date replié (visible quand la fiche prend la place du calendrier) */
.reserver__date-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font: inherit;
  color: var(--texte);
  cursor: pointer;
  transition: border-color .18s, background .18s;
  align-self: flex-start;
}
.reserver__date-badge:hover { border-color: var(--primaire); background: #fff; }
.reserver__date-badge[hidden] { display: none; }
.reserver__fiche[hidden] { display: none; }
.reserver__droite-hint[hidden] { display: none; }
.reserver__date-badge-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.reserver__date-badge-val { font-size: 14px; font-weight: 700; }
.reserver__date-badge-chg {
  font-size: 12px;
  font-weight: 600;
  color: var(--primaire);
  margin-left: 4px;
}

/* Fiche détail (rendu par le JS quand une carte est cliquée) */
.reserver__fiche {
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  overflow: hidden;
  animation: guide-apparait .25s ease;
}
.reserver__fiche-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.reserver__fiche-corps { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.reserver__fiche-chip {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: var(--secondaire);
  background: rgba(0,0,0,.04);
  padding: 3px 9px;
  border-radius: 999px;
}
.reserver__fiche-nom  { font-size: 22px; font-weight: 700; margin: 0; }
.reserver__fiche-desc { font-size: 14.5px; color: var(--texte-doux); margin: 0; line-height: 1.5; }
.reserver__fiche-contenu {
  list-style: none;
  padding: 12px 14px;
  margin: 6px 0 0;
  background: var(--fond-clair);
  border-radius: 10px;
  font-size: 13.5px;
}
.reserver__fiche-contenu li { padding: 3px 0; color: var(--texte); }
.reserver__fiche-contenu li::before { content: "· "; color: var(--primaire); font-weight: 700; }
/* Options d'un pack (« Ajouter la machine à fumée »). Posées entre le contenu
   et le prix : on lit ce que contient le pack, ce qu'on peut y ajouter, puis
   le total — dans cet ordre, le prix qui change juste en dessous se comprend
   sans explication. */
.fiche-options { display: grid; gap: 8px; margin: 12px 0 4px; }
.fiche-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.fiche-option:hover { border-color: var(--primaire); }
/* La bordure teintée sert de confirmation : sans elle, seule la petite case
   dirait que l'option est prise, et le saut de prix paraîtrait inexpliqué. */
.fiche-option:has(input:checked) {
  border-color: var(--primaire);
  background: rgba(91, 84, 201, .06);
}
.fiche-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--primaire);
  flex-shrink: 0;
  cursor: pointer;
}
.fiche-option__txt { flex: 1; }
.fiche-option__prix { color: var(--primaire); font-weight: 700; white-space: nowrap; }
/* Appareil complet à la date choisie : on montre l'option, grisée, plutôt que
   de la faire disparaître — sinon le client croit qu'elle n'existe pas. */
.fiche-option--indispo { opacity: .5; cursor: not-allowed; }
.fiche-option--indispo:hover { border-color: var(--bordure); }
.fiche-option--indispo input { cursor: not-allowed; }
.fiche-option--indispo .fiche-option__prix { color: var(--texte-doux); font-weight: 500; font-size: 12.5px; }

.reserver__fiche-prix {
  color: var(--primaire);
  font-weight: 700;
  font-size: 22px;
  margin-top: 2px;
}
.reserver__fiche-prix small { color: var(--texte-doux); font-weight: 500; font-size: 13px; }
.reserver__fiche-caution { font-size: 12.5px; color: var(--texte-doux); }
.reserver__fiche-stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.reserver__fiche-stepper-lbl { font-size: 13px; color: var(--texte-doux); }
/* « En savoir plus sur le produit » : dernier élément de la fiche de
   gauche, sous le stepper ou sous le bouton du pack. Volontairement
   en lien et non en bouton — la réservation en cours reste l'action
   principale, celle-ci est une sortie de secours pour qui hésite. */
.reserver__fiche-plus {
  display: inline-flex;
  align-items: center;
  /* Le corps de la fiche est une colonne flex : sans ce align-self, le
     lien s'étirerait sur toute la largeur et sa zone cliquable irait
     bien au-delà du texte. */
  align-self: flex-start;
  gap: 5px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primaire);
  text-decoration: none;
}
.reserver__fiche-plus svg { width: 14px; height: 14px; }
.reserver__fiche-plus:hover { text-decoration: underline; }

.reserver__fiche-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.reserver__fiche-actions .btn { flex: 1; min-width: 140px; }
.reserver__fiche-fermer {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--texte);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .15s;
}
.reserver__fiche-fermer:hover { transform: scale(1.08); }
.reserver__fiche-badge-rarete {
  position: absolute;
  top: 12px;
  left: 12px;
}
.reserver__fiche-complet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(178,59,59,.88);
  padding: 6px;
}

/* Mini-récap panier (sticky en bas de la colonne gauche) */
.reserver__mini-recap {
  padding: 16px 18px;
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  text-align: center;
  animation: guide-apparait .25s ease;
}
.reserver__mini-recap-tt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 6px;
}
.reserver__mini-recap-date { font-size: 13px; color: var(--texte-doux); margin: 0 0 6px; }
.reserver__mini-recap-date strong { color: var(--texte); }
.reserver__mini-recap-tot { font-size: 14px; color: var(--texte); margin-bottom: 12px; }
.reserver__mini-recap-tot strong { color: var(--primaire); font-size: 17px; }
.reserver__mini-recap-tot small { display: block; font-size: 12px; margin-top: 2px; }

/* ── Colonne droite : cartes ── */
.reserver__droite-titre {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--texte);
}
.reserver__droite-hint {
  font-size: 13px;
  color: var(--texte-doux);
  margin: 0 0 18px;
  padding: 8px 12px;
  background: var(--fond-clair);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.reserver__droite-hint[hidden] { display: none; }

/* Deux groupes empilés (packs / appareils) séparés par un titre-filet */
.reserver__cartes { display: flex; flex-direction: column; gap: 28px; }
.reserver__cartes-groupe { display: flex; flex-direction: column; gap: 14px; }
/* Titre de groupe avec petit filet horizontal, ambiance éditoriale */
.reserver__cartes-titre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.reserver__cartes-titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bordure);
}
.reserver__cartes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

/* Bouton "Voir plus" : discret, pleine largeur du groupe */
.reserver__voir-plus {
  margin-top: 4px;
  padding: 12px 18px;
  background: transparent;
  border: 1px dashed var(--bordure);
  border-radius: 10px;
  color: var(--texte-doux);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.reserver__voir-plus:hover {
  background: var(--fond-clair);
  color: var(--primaire);
  border-color: var(--primaire);
  border-style: solid;
}

/* Bloc "prochaines dispos" dans la fiche (quand l'article est complet) */
.reserver__fiche-dispo {
  margin-top: 8px;
  padding: 14px;
  background: var(--fond-clair);
  border-radius: 10px;
}
.reserver__fiche-dispo-tt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 4px;
}
.reserver__fiche-dispo-hint {
  font-size: 13px;
  color: var(--texte-doux);
  margin: 0 0 10px;
}
/* Flatpickr inline insère son calendrier comme SIBLING (pas comme enfant) :
   on cible donc le sibling adjacent, pas un descendant. */
.reserver__fiche-dispo .flatpickr-calendar.inline {
  box-shadow: none;
  background: transparent;
  margin: 0 auto;
}
/* Dernier recours sous les "prochaines dispos" : garder SA date et se faire
   prévenir. Volontairement discret — un lien souligné, pas un bouton plein :
   le geste qui doit attirer l'œil reste le choix d'une date libre juste
   au-dessus. Ceux pour qui la date ne bouge pas le trouveront quand même. */
.reserver__fiche-alerte {
  margin-top: 10px;
  text-align: center;
}
.reserver__fiche-alerte-btn {
  background: none;
  border: none;
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  color: var(--texte-doux);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.reserver__fiche-alerte-btn:hover { color: var(--primaire); }

.reserver__fiche-alerte-form {
  margin-top: 8px;
  padding: 14px;
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  text-align: left;
}
.reserver__fiche-alerte-txt {
  font-size: 13px;
  color: var(--texte-doux);
  margin: 0 0 10px;
}
.reserver__fiche-alerte-champ {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  font: inherit;
  font-size: 15px;             /* < 16px ferait zoomer iOS à la saisie */
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--fond-blanc);
}
.reserver__fiche-alerte-champ:focus {
  outline: none;
  border-color: var(--primaire);
}
.reserver__fiche-alerte-statut {
  font-size: 13px;
  color: var(--texte-doux);
  margin: 8px 0 0;
}
.reserver__fiche-alerte-statut.is-erreur { color: #c0392b; }
.reserver__fiche-alerte-ok {
  font-size: 14px;
  color: var(--texte);
  margin: 0;
}

/* ============================================================
   À LA PIÈCE — les 9 appareils en HTML statique (accueil)
   ============================================================
   Elle suit la section des packs, blanche comme elle : le filet du
   haut fait le séparateur, puisque le changement de couleur ne peut
   pas le faire ici (« Réserver » qui suit est déjà en parchemin, et
   deux surfaces parchemin collées ne se sépareraient plus).
   Les photos sont des packshots sur fond blanc : `contain` et non
   `cover`, sinon l'appareil sort du cadre. */
.alacarte { border-top: 1px solid var(--hairline); }
/* Replié, la section ne doit pas peser autant qu'une vraie section :
   un padding serré, et c'est une ligne dans la page, pas un chapitre. */
.alacarte__inner { max-width: var(--max-width); margin: 0 auto; padding: 34px 24px 40px; }

/* ── Le repli natif <details>/<summary> ── */
.alacarte__pli { border: none; }

.alacarte__resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  cursor: pointer;
  /* Le triangle par défaut du navigateur (▸) ne suit aucune charte :
     on le retire des deux façons — Safari a besoin de la seconde. */
  list-style: none;
}
.alacarte__resume::-webkit-details-marker { display: none; }
.alacarte__resume:focus-visible { outline: 2px solid var(--primaire); outline-offset: 4px; border-radius: 8px; }

.alacarte__resume-txt { display: flex; flex-direction: column; gap: 3px; }
/* Un vrai <h2> pour la structure du document, mais à la taille d'un
   sous-titre : la hiérarchie visuelle reste celle des packs au-dessus. */
.alacarte__titre { font-size: 21px; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; }
.alacarte__resume-sous { font-size: 15px; color: var(--texte-doux); }

.alacarte__chevron {
  flex: 0 0 22px; width: 22px; height: 22px;
  color: var(--primaire);
  transition: transform .22s ease;
}
.alacarte__pli[open] .alacarte__chevron { transform: rotate(180deg); }
.alacarte__resume:hover .alacarte__titre { color: var(--primaire); }

.alacarte__lead { margin: 14px 0 26px; font-size: 16px; line-height: 1.55; color: var(--texte-doux); max-width: 620px; }

.alacarte__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.alacarte__item {
  display: flex;
  flex-direction: column;
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.alacarte__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(35, 33, 53, .14);
  border-color: var(--primaire);
}

.alacarte__media {
  aspect-ratio: 4 / 3;
  background: #fff;
  /* La hauteur vient du ratio, jamais de l'image : aucun saut de mise
     en page pendant le chargement, même sans width/height sur l'img. */
  display: flex;
  align-items: center;
  justify-content: center;
}
.alacarte__media img { width: 100%; height: 100%; object-fit: contain; }

.alacarte__corps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 15px;
  border-top: 1px solid var(--hairline);
}
.alacarte__nom { font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px; }
.alacarte__prix { color: var(--primaire); font-weight: 700; font-size: 17px; }
.alacarte__prix small { color: var(--texte-doux); font-weight: 500; font-size: 12px; }

.alacarte__note {
  margin-top: 26px;
  font-size: 15px;
  color: var(--texte-doux);
}
.alacarte__note a { color: var(--primaire); font-weight: 600; }

@media (max-width: 700px) {
  .alacarte__inner { padding: 26px 24px 34px; }
  .alacarte__grille { grid-template-columns: 1fr 1fr; gap: 12px; }
  .alacarte__nom { font-size: 14px; }
  .alacarte__titre { font-size: 19px; }
  .alacarte__resume-sous { font-size: 14px; }
}

/* Enveloppe d'une carte : le bouton (ouvre la fiche à gauche) ET la
   pastille « Voir le détail » (part sur la page de l'article). Les
   deux sont frères et non imbriqués — un <a> dans un <button> est du
   HTML invalide et le navigateur y perd un clic sur deux. C'est ce
   slot qui devient la case de la grille, la carte le remplit. */
.resa-carte-slot { position: relative; display: flex; }
.resa-carte-slot > .resa-carte { flex: 1; min-width: 0; }

/* Posée en haut à GAUCHE de la photo : le badge de rareté
   (« Plus qu'1 ! ») occupe déjà le coin droit. */
.resa-carte__detail {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(35, 33, 53, .62);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 9999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease;
}
.resa-carte__detail svg { width: 12px; height: 12px; }
.resa-carte__detail:hover { background: rgba(35, 33, 53, .9); }

.resa-carte {
  display: flex;
  flex-direction: column;
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
}
.resa-carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(35,33,53,.14);
  border-color: var(--primaire);
}
.resa-carte--active { border-color: var(--primaire); box-shadow: 0 0 0 2px rgba(91,84,201,.18); }
.resa-carte--indispo { opacity: .65; cursor: not-allowed; }
.resa-carte--indispo:hover { transform: none; box-shadow: none; border-color: var(--bordure); }
.resa-carte__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--fond-clair);        /* fallback pendant chargement */
}
.resa-carte--indispo .resa-carte__media { filter: grayscale(.6); }
.resa-carte__badge {
  position: absolute;
  top: 8px; right: 8px;
}
.resa-carte__complet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(178,59,59,.88);
  padding: 5px;
}
.resa-carte__corps {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 14px;
}
.resa-carte__chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: var(--secondaire);
  background: rgba(0,0,0,.04);
  padding: 2px 8px;
  border-radius: 999px;
}
.resa-carte__chip--piece {
  color: var(--texte-doux);
}
.resa-carte__nom { font-weight: 700; font-size: 15px; line-height: 1.25; }
.resa-carte__prix {
  color: var(--primaire);
  font-weight: 700;
  font-size: 17px;
  margin-top: 2px;
}
.resa-carte__prix small { color: var(--texte-doux); font-weight: 500; font-size: 12px; }
.resa-carte__qte {
  font-size: 12px;
  font-weight: 600;
  color: var(--primaire);
  margin-top: 4px;
}

/* ============================================================
   GALERIE — preuve sociale par l'image + carte Instagram
   ============================================================ */
/* La section galerie prend toute la largeur (le bandeau déborde du contenu centré),
   mais on garde des marges intérieures pour l'en-tête et le bouton. */
.galerie { padding: 80px 0; }
.galerie .section__head { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ── Bandeau défilant : ruban horizontal de photos qui glisse en continu.
      Grille 2 lignes façon Bento : certaines tuiles prennent toute la hauteur
      du ruban (--tall), d'autres n'en prennent que la moitié (--short) et se
      stackent PAR PAIRE dans une même colonne → bords haut et bas alignés
      partout, mais deux "niveaux" de tuiles créent le rythme. ── */
.galerie__ruban {
  margin-top: 44px;
  padding: 24px 0;                    /* respire haut/bas + place pour le hover-lift */
  overflow: hidden;
  /* Bords fondus à gauche/droite : les tuiles semblent entrer et sortir en douceur,
     détail éditorial repris de la concurrence (hivingfood). */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* La piste est une GRILLE de 2 lignes × N colonnes. Chaque colonne se remplit
   de haut en bas (grid-auto-flow: column) :
     - une tuile --tall prend les 2 lignes → grande carte pleine hauteur ;
     - une tuile --short n'en prend qu'une → deux --short consécutives se stackent
       automatiquement dans la même colonne (paysages empilés).
   Résultat : bords haut ET bas parfaitement alignés sur toute la ligne. */
.galerie__piste {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: 16px;
  height: 460px;                      /* hauteur totale du ruban (les 2 lignes) */
  width: max-content;                 /* la piste prend la largeur de son contenu */
  animation: galerie-defile 45s linear infinite;
}
/* Au survol du ruban, on met le défilement en pause pour laisser regarder / cliquer */
.galerie__ruban:hover .galerie__piste { animation-play-state: paused; }

@keyframes galerie-defile {
  from { transform: translateX(0); }
  /* -50 % = exactement la moitié de la piste, soit une copie complète de la série :
     l'image se replace à l'identique, la boucle est invisible. */
  to   { transform: translateX(-50%); }
}

/* Base commune à toutes les tuiles photo. Chaque tuile remplit sa case grille. */
.galerie__item {
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* --tall : la tuile prend les 2 lignes → grand format ≈ 380 × 460 */
.galerie__item--tall {
  grid-row: span 2;
  width: 380px;
}
/* --short : une seule ligne → paysage ≈ 340 × 220 ;
   deux --short qui se suivent en HTML s'empilent automatiquement dans la même colonne.
   IMPORTANT : les --short doivent toujours aller PAR PAIRES,
   sinon la grille laisse un vide en bas de colonne. */
.galerie__item--short {
  width: 340px;
}

.galerie__item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(35,33,53,.22);
}
.galerie__cta { text-align: center; margin-top: 32px; }

/* Accessibilité : si l'utilisateur a demandé « moins d'animations », on coupe le
   défilement et on rend le bandeau simplement scrollable au doigt / à la souris. */
@media (prefers-reduced-motion: reduce) {
  .galerie__ruban { overflow-x: auto; }
  .galerie__piste { animation: none; }
}

/* Sur petit écran : mêmes formats mais tout réduit proportionnellement */
@media (max-width: 640px) {
  .galerie__piste        { height: 320px; gap: 12px; }
  .galerie__item--tall   { width: 220px; }
  .galerie__item--short  { width: 240px; }
  .galerie__ruban        { padding: 16px 0; }
}

/* Badge de rareté (« Plus qu'1 ! ») — crée l'urgence quand le stock est bas */
.resa-rarete {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);       /* or : attire l'œil sans alarmer */
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
}


/* ============================================================
   5ter. MINI-QUIZ CONSEILLER
   Bandeau compact + fenêtre (modale) : le quiz ne rallonge pas
   le tunnel, il s'ouvre par-dessus la page.
   ============================================================ */
.quiz {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 70px;
}

/* Bandeau d'appel : une ligne violette avec le bouton */
.quiz__bandeau {
  background: linear-gradient(120deg, var(--primaire), #7a71e0);
  border-radius: 16px;
  color: #fff;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.quiz__bandeau-texte { display: flex; flex-direction: column; gap: 2px; }
.quiz__bandeau-texte strong { font-size: 18px; }
.quiz__bandeau-texte span   { font-size: 14px; opacity: .85; }

/* Bouton blanc sur le bandeau violet */
.quiz__bandeau-btn {
  background: #fff;
  color: var(--primaire);
  white-space: nowrap;
}
.quiz__bandeau-btn:hover { background: var(--fond-clair); }

/* ── FENÊTRE (MODALE) DU QUIZ ── */
.quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.quiz-modal[hidden] { display: none; }

/* Fond sombre semi-transparent derrière la fenêtre */
.quiz-modal__fond {
  position: absolute;
  inset: 0;
  background: rgba(35,33,53,.65);
  backdrop-filter: blur(2px);
}

.quiz-modal__boite {
  position: relative;
  width: 100%;
  max-width: 560px;
  z-index: 1;
}

/* Croix de fermeture, posée sur le coin de la carte */
.quiz-modal__fermer {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--fond-sombre);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: background .15s;
}
.quiz-modal__fermer:hover { background: var(--primaire); }

/* Sur mobile : bandeau empilé, croix à l'intérieur de l'écran */
@media (max-width: 640px) {
  .quiz__bandeau { flex-direction: column; text-align: center; }
  .quiz-modal__fermer { top: -8px; right: 4px; }
}

/* ============================================================
   5quater. GUIDE "PREMIÈRE FOIS"
   5 étapes affichées une par une dans la même fenêtre que le quiz.
   ============================================================ */

/* Bouton d'accès sous les 3 étapes de "Comment ça marche" */
.how__premiere { text-align: center; margin-top: 40px; }

/* Une seule étape visible à la fois */
.guide__etape { display: none; text-align: center; }
.guide__etape.active { display: block; animation: guide-apparait .25s ease; }

@keyframes guide-apparait {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.guide__icone svg { width: 44px; height: 44px; stroke: var(--primaire); }
.guide__icone {
  font-size: 44px;
  margin: 10px 0 14px;
}
.guide__titre {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.guide__texte {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--texte-doux);
  max-width: 420px;
  margin: 0 auto;
}
.guide__texte strong { color: var(--texte); }

/* Navigation Précédent / Suivant */
.guide__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}

/* ============================================================
   5quinquies. COMPOSER MON PANIER
   Fenêtre avec steppers de quantité + calendrier de disponibilité.
   ============================================================ */

/* Boîte plus large que le quiz (liste + calendrier) et défilante si besoin */
.quiz-modal__boite--large { max-width: 620px; }
.quiz-modal__boite--large .quiz__card {
  max-height: 86vh;
  overflow-y: auto;
}

.panier__titre {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.panier__sous-titre {
  font-size: 14px;
  color: var(--texte-doux);
  margin-bottom: 18px;
}

/* Une ligne = un appareil : nom + prix à gauche, − qté + à droite */
.panier__liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.panier__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--fond-clair);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
}
.panier__ligne--active { border-color: var(--primaire); background: #fff; }

.panier__nom {
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.panier__nom small { font-size: 12px; color: var(--texte-doux); font-weight: 400; }

/* Boutons − / + */
.panier__stepper { display: flex; align-items: center; gap: 10px; }
.panier__btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--primaire);
  background: #fff;
  color: var(--primaire);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background .12s, color .12s;
}
.panier__btn:hover { background: var(--primaire); color: #fff; }
.panier__qte { min-width: 18px; text-align: center; font-weight: 700; font-size: 15px; }

/* Total du panier */
.panier__totaux {
  text-align: center;
  font-size: 15px;
  margin-bottom: 14px;
  color: var(--texte-doux);
}
.panier__totaux strong { color: var(--primaire); font-size: 18px; }
.panier__totaux small  { display: block; font-size: 12px; margin-top: 2px; }

/* Zone calendrier */
.panier__cal { margin-top: 18px; text-align: center; }
.panier__cal-info { font-size: 13.5px; color: var(--texte-doux); margin-bottom: 10px; }
.panier__cal-msg  { font-size: 13.5px; color: var(--texte); margin: 10px 0; }

/* Le calendrier Flatpickr intégré : centré, sans ombre portée */
.panier__cal .flatpickr-calendar {
  margin: 0 auto 14px;
  box-shadow: none;
  border: 1px solid rgba(35,33,53,.1);
}

/* Boutons désactivés : grisés et non cliquables visuellement
   (ex. "Réserver ce panier" tant qu'aucune date n'est choisie) */
.btn[disabled],
.btn[disabled]:hover {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   RGPD : case de consentement + page mentions légales
   ============================================================ */

/* Case à cocher du formulaire de contact */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--texte-doux);
  line-height: 1.5;
  cursor: pointer;
}
.consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--primaire);
  flex-shrink: 0;
  cursor: pointer;
}
.consent a { color: var(--primaire); text-decoration: underline; }

/* Lien mentions légales dans le pied de page */
.footer__legal { color: inherit; text-decoration: underline; }
.footer__legal:hover { color: #fff; }

/* Page mentions légales */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 90px;
}
.legal h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 32px;
}
.legal__bloc { margin-bottom: 32px; }
.legal__bloc h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--primaire);
  margin-bottom: 10px;
}
.legal__bloc p, .legal__bloc li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--texte);
}
.legal__bloc ul { padding-left: 22px; margin-top: 8px; }
.legal__bloc li { margin-bottom: 6px; }
.legal__bloc em { color: var(--texte-doux); }
.legal__bloc a { color: var(--primaire); }
.legal__retour { margin-top: 40px; }

/* La carte blanche qui contient questions puis résultat */
.quiz__card {
  background: #fff;
  border: 1px solid rgba(35,33,53,.08);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(91,84,201,.08);
  min-height: 280px;
}

.quiz__progress {
  font-size: 13px;
  font-weight: 600;
  color: var(--primaire);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.quiz__question {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 22px;
}

/* Boutons de réponse : grands, faciles à toucher sur mobile */
.quiz__reponses { display: flex; flex-direction: column; gap: 10px; }
.quiz__btn {
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  padding: 14px 18px;
  background: var(--fond-clair);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.quiz__btn:hover {
  border-color: var(--primaire);
  background: #fff;
  transform: translateX(4px);
}

/* Écran de résultat */
.quiz__resultat { text-align: center; }
.quiz__resultat-intro {
  font-size: 14px;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 10px;
}
/* Aperçu photo du lot recommandé */
.quiz__resultat-photo {
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 auto 16px;
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(35,33,53,.18);
}
.quiz__resultat-nom {
  font-size: 30px;
  font-weight: 700;
  color: var(--primaire);
  margin-bottom: 12px;
}
.quiz__resultat-nom span {
  font-size: 18px;
  color: var(--texte);
  font-weight: 600;
}
.quiz__resultat-desc { font-size: 16px; margin-bottom: 12px; }
.quiz__resultat-contenu {
  font-size: 14px;
  color: var(--texte-doux);
  margin-bottom: 8px;
}
.quiz__resultat-astuce {
  font-size: 12px;
  color: var(--texte-doux);
  font-style: italic;
  margin-bottom: 24px;
}

/* ── INFO-BULLE PHOTO D'APPAREIL ──
   Au survol (ou au tap sur mobile) d'un nom d'appareil,
   une petite fenêtre s'ouvre avec sa photo. */
.appareil-tip {
  position: relative;
  border-bottom: 1px dashed var(--primaire);
  cursor: help;
  color: var(--texte);
  white-space: nowrap;
}

/* La bulle : cachée par défaut, apparaît en douceur au-dessus du nom */
.appareil-tip__pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(.92);
  width: 160px;
  padding: 6px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(35,33,53,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}
.appareil-tip__pop img {
  display: block;
  width: 100%;
  border-radius: 8px;
}
/* Petite flèche sous la bulle */
.appareil-tip__pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
}

/* Affichage : au survol, au clavier (focus) ou au tap (classe .open) */
.appareil-tip:hover  .appareil-tip__pop,
.appareil-tip:focus  .appareil-tip__pop,
.appareil-tip.open   .appareil-tip__pop {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.quiz__resultat-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   6. COMMENT ÇA MARCHE
   ============================================================ */
.how { background: var(--fond-blanc); padding: 90px 24px; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.how__steps {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px;
}
.how__step { text-align: center; padding: 20px; }
.how__num {
  width: 56px; height: 56px; margin: 0 auto 18px;
  background: var(--primaire); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.how__step h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.how__step p { color: var(--texte-doux); font-size: 15px; }

/* ============================================================
   7. RASSURANCE CAUTION
   ============================================================ */
.reassure { max-width: var(--max-width); margin: 0 auto; padding: 70px 24px; }
.reassure__card {
  background: #efeafe;   /* violet très clair */
  border: 1px solid #d9d2f7;
  border-radius: var(--radius);
  padding: 36px;
  display: flex; gap: 26px; align-items: flex-start;
}
.reassure__icon { line-height: 1; }
.reassure__icon svg { width: 42px; height: 42px; stroke: var(--primaire); }
.reassure__text h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.reassure__text p { color: var(--texte-doux); font-size: 16px; }
.reassure__text strong { color: var(--texte); }

/* ============================================================
   8. AVIS CLIENTS
   ============================================================ */
.avis { background: var(--fond-blanc); padding: 90px 24px; border-top: 1px solid var(--bordure); }
.avis__grid {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.avis__card {
  background: var(--fond-clair);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 26px;
}
.avis__stars { color: var(--accent); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.avis__card p { font-size: 15.5px; font-style: italic; color: var(--texte); }
.avis__card cite { display: block; margin-top: 14px; font-size: 14px; color: var(--texte-doux); font-style: normal; font-weight: 600; }

/* ============================================================
   9. CONTACT
   ============================================================ */
.contact { background: var(--fond-sombre); padding: 90px 24px; }
.contact__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start;
}
/* Colonne gauche (texte) */
.contact__intro .section__kicker { color: var(--accent); }
.contact__intro .section__title { color: #fff; text-align: left; }
.contact__intro .section__lead { color: var(--texte-clair-2); text-align: left; }
.contact__direct { list-style: none; margin-top: 24px; }
.contact__direct li { font-size: 18px; color: #fff; margin-bottom: 12px; }
.contact__direct a { color: var(--secondaire); font-weight: 600; }

/* Colonne droite (formulaire) */
.contact__form {
  background: var(--fond-blanc);
  border-radius: var(--radius);
  padding: 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }   /* champ sur toute la largeur */
.field label { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--texte); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--bordure); border-radius: 9px;
  background: var(--fond-clair); color: var(--texte);
  transition: border .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primaire);
  box-shadow: 0 0 0 3px rgba(91,84,201,.15);   /* halo violet au focus */
}
.contact__form .btn { grid-column: 1 / -1; }

/* ── Préférence de contact : deux pastilles cliquables ──
      Les styles génériques de .field input (padding, bordure) rendraient les
      boutons radio difformes : on les masque et c'est la pastille qui porte
      l'état, tout en gardant un vrai <input> pour le clavier et le lecteur
      d'écran. */
.field-legende {
  font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--texte);
}
.choix-contact { display: flex; gap: 10px; flex-wrap: wrap; }
.choix-contact__option {
  flex: 1 1 160px;
  display: flex; align-items: center; justify-content: center;
  padding: 11px 13px;
  border: 1px solid var(--bordure); border-radius: 9px;
  background: var(--fond-clair); color: var(--texte);
  font-size: 15px; cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.choix-contact__option:hover { border-color: var(--primaire); }
/* Icône de trait, même gabarit que le reste du site (24×24, currentColor) :
   elle suit donc la couleur du texte, y compris à l'état sélectionné. */
.choix-contact__option svg { width: 18px; height: 18px; margin-right: 8px; flex: none; }
/* Le radio reste focusable : on l'écarte de l'œil, pas du clavier */
.choix-contact__option input {
  position: absolute; opacity: 0; width: 0; height: 0; padding: 0; margin: 0;
}
/* .field label impose déjà 600 aux deux pastilles : c'est 700 qui distingue
   l'option retenue, pas 600 qui ne changerait rien. */
.choix-contact__option { font-weight: 500; }
.choix-contact__option:has(input:checked) {
  border-color: var(--primaire);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 84, 201, .15);
  font-weight: 700;
}
.choix-contact__option:has(input:focus-visible) {
  outline: 2px solid var(--primaire); outline-offset: 2px;
}

/* Dates indisponibles dans le calendrier Flatpickr : réellement BARRÉES (façon Airbnb).
   Flatpickr grise les dates désactivées par défaut ; on ajoute le trait rouge. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: #b8b5c4 !important;
  text-decoration: line-through;
  text-decoration-color: #b8b5c4;      /* trait gris clair, discret */
  text-decoration-thickness: 1.5px;
  cursor: not-allowed;
}

/* Légende sous le champ date : explique les dates barrées du calendrier */
.date-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--texte-doux);
}
/* Petite pastille barrée, comme les dates indisponibles du calendrier */
.date-hint__puce {
  width: 16px; height: 16px;
  border-radius: 4px;
  background: #efeef4;
  position: relative;
  flex-shrink: 0;
}
.date-hint__puce::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 50%;
  height: 1.5px;
  background: #b8b5c4;                 /* trait gris clair, comme le calendrier */
  transform: rotate(-18deg);
}
.contact__note { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--texte-doux); margin-top: -4px; }

/* Mention RGPD sous le formulaire : discrète mais lisible */
.contact__rgpd {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11.5px;
  color: var(--texte-doux);
  line-height: 1.5;
  margin-top: 2px;
}
.contact__rgpd a { color: inherit; text-decoration: underline; }

/* Récapitulatif de la demande, juste au-dessus du bouton d'envoi.
   Volontairement sobre : c'est un rappel, pas une nouvelle offre — s'il
   attirait l'œil plus que le bouton, il ferait hésiter au lieu de rassurer. */
.recap {
  grid-column: 1 / -1;
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 14px 16px;
  background: #faf9f7;
}
.recap__tt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 8px;
}
.recap__lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recap__lignes li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  line-height: 1.45;
}
.recap__lbl { color: var(--texte-doux); flex-shrink: 0; }
.recap__val { text-align: right; font-weight: 600; }
/* Le prix est la seule valeur mise en couleur : c'est l'information
   qu'on remontait chercher. */
.recap__val--prix { color: var(--primaire); }
.recap__note { font-size: 11.5px; color: var(--texte-doux); margin: 10px 0 0; }

/* Message de confirmation / erreur sous le bouton (rempli par le JS) */
.contact__status { grid-column: 1 / -1; text-align: center; font-size: 14.5px; font-weight: 500; margin-top: 4px; }
.contact__status--ok  { color: #1aa89a; }   /* vert : succès */
.contact__status--err { color: #d9534f; }   /* rouge : erreur */
/* Le numéro de secours affiché dans le message d'échec : sans soulignement
   il se fondait dans la phrase et personne ne voyait qu'il était cliquable. */
.contact__status--err a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ============================================================
   10. PIED DE PAGE
   ============================================================ */
.footer { background: var(--fond-sombre-2); color: var(--texte-clair-2); padding: 50px 24px; text-align: center; }
.footer__inner { max-width: 680px; margin: 0 auto; }
/* Logo du footer : image SVG version blanche, centrée */
.footer__logo { height: 64px; width: auto; margin: 0 auto 14px; display: block; }
.footer p { font-size: 14.5px; margin-bottom: 8px; }
.footer__copy { font-size: 13px; opacity: .7; margin-top: 16px; }

/* ── Les communes desservies, dans le pied de page ──
   Présente sur TOUTES les pages, et c'est le but : c'est ce qui
   empêche les pages ville d'être orphelines comme l'étaient les
   pages appareil. Un lien dans un pied de page vaut moins qu'un
   lien en pleine page, mais il vaut infiniment plus que rien. */
.footer__zones { margin: 22px auto 6px; }
.footer__zones-titre { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; opacity: .55; margin-bottom: 8px; }
.footer__zones ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.footer__zones a { font-size: 14px; color: inherit; opacity: .85; text-decoration: none; }
.footer__zones a:hover { opacity: 1; text-decoration: underline; }
/* La precision sous la liste. Sans elle, le seul titre « Le secteur »
   laisserait croire que je livre dans les six communes : je ne livre
   qu'a Rambouillet et Saint-Arnoult, ailleurs on se retrouve. */
.footer__zones-note { font-size: 12.5px; opacity: .5; margin-top: 9px; line-height: 1.45; }

/* ============================================================
   11. RESPONSIVE (adaptation mobile / tablette)
   ============================================================ */
@media (max-width: 860px) {
  /* Le formulaire passe sur une seule colonne */
  .contact__inner { grid-template-columns: 1fr; gap: 36px; }
  .contact__form { grid-template-columns: 1fr; }
  .hero__title { font-size: 40px; }
  .section__title { font-size: 30px; }
}

@media (max-width: 640px) {
  /* Menu : on cache les liens et on affiche le hamburger */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--fond-clair);
    border-bottom: 1px solid var(--bordure);
    /* Caché par défaut : on le déplie en JS */
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav__links.open { max-height: 360px; }   /* classe ajoutée par le JS au clic */
  .nav__links a { padding: 14px 24px; width: 100%; border-top: 1px solid var(--bordure); }
  .nav__cta { border-radius: 0; }
  .nav__burger { display: flex; }

  .hero__title { font-size: 32px; }
  .hero__subtitle { font-size: 17px; }
  .reassure__card { flex-direction: column; gap: 14px; }
  .pack--featured { transform: none; }   /* on enlève le zoom sur mobile */
  .nav__logo img { height: 42px; }       /* logo un peu plus petit sur mobile */
  .nav__inner { padding: 12px 18px; }
  .footer__logo { height: 52px; }
}

/* ============================================================
   BANDE DE CONFIANCE (juste sous le hero)
   4 garanties en un coup d'œil. Passe à 2 colonnes sur mobile.
   ============================================================ */
/* Fond doux (pas blanc pur) pour détacher la bande du hero sans lourdeur. */
.confiance { background: var(--fond-doux, #f7f6f3); border-bottom: 1px solid var(--bordure); }
.confiance__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* Chaque item = petite carte sobre : bord fin, coins arrondis, léger hover. */
.confiance__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.confiance__item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primaire) 35%, var(--bordure));
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.18);
}
/* Icône SVG dans un carré doux teinté (accent discret) */
.confiance__ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--primaire) 10%, transparent);
  color: var(--primaire);
}
.confiance__ico svg { width: 18px; height: 18px; display: block; }
.confiance__txt  { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--texte-doux); line-height: 1.35; }
.confiance__txt strong { color: var(--texte); font-size: 13px; font-weight: 600; letter-spacing: -.005em; }

/* ============================================================
   FAQ — accordéon natif (<details>/<summary>), sans JavaScript
   ============================================================ */
/* scroll-margin-top : décale l'arrivée de l'ancre #faq pour que le titre
   « Questions fréquentes » apparaisse juste sous la barre de menu collante
   (au lieu d'être coupé en deux par l'en-tête, comme le font déjà les autres
   sections grâce à leur padding-top). */
.faq { max-width: 820px; margin: 0 auto; padding: 0 24px 80px; scroll-margin-top: 100px; }
.faq__liste { display: flex; flex-direction: column; gap: 10px; }
.faq__item {
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 4px 20px;
}
.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 0;
  list-style: none;                 /* enlève le triangle par défaut */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--primaire);
  font-weight: 400;
  flex-shrink: 0;
}
.faq__item[open] summary::after { content: '−'; }
.faq__item p { padding: 0 0 18px; color: var(--texte-doux); font-size: 15px; }

/* Relance en fin de FAQ : centrée, un peu détachée de la liste pour qu'on
   comprenne que la série de questions est finie. */
.faq__apres { margin-top: 28px; text-align: center; }
.faq__apres-txt { color: var(--texte-doux); font-size: 15px; margin: 0 0 14px; }

/* ============================================================
   BARRE CTA COLLANTE — mobile uniquement
   ============================================================ */
.cta-mobile { display: none; }      /* masquée sur ordinateur */

/* Bande confiance : 2 colonnes dès les écrans moyens */
@media (max-width: 900px) {
  .confiance__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .cta-mobile {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 400;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--bordure);
    box-shadow: 0 -4px 20px rgba(35,33,53,.12);
  }
  .cta-mobile__btn {
    flex: 1;
    text-align: center;
    padding: 14px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
  }
  .cta-mobile__btn--primary { background: var(--primaire); color: #fff; }
  .cta-mobile__btn--call    { background: var(--fond-clair); color: var(--primaire); border: 1.5px solid var(--primaire); }

  /* Réserve de la place en bas pour que la barre ne masque pas le contenu */
  body { padding-bottom: 74px; }
}

/* ============================================================
   APPARITIONS AU SCROLL (fondu + légère montée)
   Chaque bloc marqué apparaît quand il entre dans l'écran.
   - Piloté par js/script.js (IntersectionObserver).
   - « Amélioration progressive » : tout est visible si le JavaScript
     est absent (les styles ci-dessous ne s'appliquent QUE si la classe
     .reveal-on est posée sur <html>, ce que fait un petit script du <head>).
   - Aucune librairie, animation GPU (opacity + transform) = zéro ralentissement.
   ============================================================ */

/* État caché de départ : légèrement descendu et transparent */
.reveal-on [data-reveal],
.reveal-on [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

/* État visible : remis en place, en fondu */
.reveal-on [data-reveal].is-visible,
.reveal-on [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Effet « cascade » : dans un groupe, les enfants apparaissent l'un après
   l'autre (80 ms d'écart) pour un rendu plus vivant qu'un bloc d'un coup. */
.reveal-on [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0s;    }
.reveal-on [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .08s;  }
.reveal-on [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .16s;  }
.reveal-on [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .24s;  }
.reveal-on [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: .32s;  }
.reveal-on [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: .40s;  }

/* Accessibilité : si l'utilisateur a demandé « moins d'animations » dans son
   système, on affiche tout immédiatement, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal],
  .reveal-on [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Rétablir les transitions personnalisées écrasées par la règle
   « apparition au scroll » (plus spécifique et plus tardive
   dans le fichier). Sélecteur ci-dessous > spécificité de la
   règle scroll ; ainsi le hover garde sa courbe d'easing soignée. */
.reveal-on [data-reveal-group] > .pack {
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    opacity .6s ease;                  /* on garde le fondu du reveal */
}


/* ============================================================
   INVERSION NUIT / CRÈME (audit — point 2)
   Le site vend de la nuit : les sections « émotion » (galerie, packs)
   passent sur fond nuit profonde, les sections « réassurance »
   (comment ça marche, réserver, caution, FAQ) restent sur crème.
   ============================================================ */

/* .packs a un max-width : le box-shadow 100vmax + clip-path étend
   le fond sur toute la largeur de l'écran sans changer la structure. */
.galerie {
  background: var(--fond-nuit);
}

/* Textes des en-têtes de section sur fond nuit */
.galerie .section__title { color: var(--texte-clair); }
.galerie .section__lead { color: var(--texte-clair-2); }
.galerie .section__kicker { color: var(--primaire-vif); }

/* Bouton fantôme sur fond nuit (« Suivre @louelafete.light ») :
   bordure claire au lieu de violette */
.galerie .btn--ghost-clair {
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.galerie .btn--ghost-clair:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}



/* ============================================================
   CARTES PACKS « PHOTO PLEIN CADRE »
   La photo occupe toute la carte ; nom, sous-titre, pastille
   d'invités et prix sont posés en bas sur un dégradé sombre.
   ============================================================ */
.pack.pack--photo {
  position: relative;
  flex: 0 1 300px;
  max-width: 320px;
  height: 420px;
  padding: 0;
  display: block;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  background: var(--fond-sombre);
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(35,33,53,.35);
}
.pack.pack--photo:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px -12px rgba(91,84,201,.35);
}
/* Pack populaire : liseré violet intérieur */
.pack.pack--photo.pack--featured {
  border: none;
  box-shadow: 0 16px 34px -14px rgba(91,84,201,.45), 0 0 0 3px var(--primaire) inset;
}
.pack.pack--photo.pack--featured:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px -12px rgba(91,84,201,.55), 0 0 0 3px var(--primaire) inset;
}
.pack.pack--photo .pack__badge { top: 14px; left: 14px; right: auto; z-index: 2; }

.pack--photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pack.pack--photo:hover .pack--photo__img { transform: scale(1.05); }

.pack--photo__legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 60px 18px 18px;
  background: linear-gradient(to top,
    rgba(35,33,53,.95) 0%,
    rgba(35,33,53,.72) 45%,
    rgba(35,33,53,0) 100%);
  z-index: 1;
}
.pack.pack--photo .pack__name { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.15; margin: 0 0 5px; }
.pack--photo__tag { font-size: 13px; font-style: italic; color: rgba(255,255,255,.88); margin: 0 0 10px; line-height: 1.4; }
.pack--photo__capacite {
  display: inline-block;
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  padding: 3px 10px; border-radius: 999px;
  margin: 0 0 10px;
  white-space: nowrap;
}
.pack--photo__price { font-size: 24px; font-weight: 700; color: #fff; margin: 0; line-height: 1; }
.pack--photo__price small { font-size: 13px; font-weight: 500; opacity: .85; margin-left: 4px; }

/* ── DEUX ACTIONS PAR CARTE ──────────────────────────────────
   La carte entière reste le geste principal : descendre au
   formulaire avec le bon pack présélectionné. La pastille
   « Voir le détail » ouvre la page du pack.

   Deux liens dans une même carte interdisent le <a> englobant
   (un <a> ne s'imbrique pas). La carte est donc un <div>, et
   c'est .pack__lien qui est étiré sur toute sa surface. */
.pack__lien {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
/* Un lien sans texte n'a aucun repère visible au clavier :
   l'anneau de focus est ici la seule chose qui le signale. */
.pack__lien:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}

.pack__detail {
  position: absolute;
  top: 14px;
  right: 14px;
  /* Au-dessus de .pack__lien, sinon la carte entière l'avalerait.
     En haut à droite : le badge « Populaire » est en haut à gauche
     et la légende en bas, les trois ne se croisent jamais. */
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  color: #fff;
  text-decoration: none;
  /* Fond sombre translucide plutôt que blanc translucide : la
     lisibilité ne dépend plus de la photo qui passe dessous. */
  background: rgba(35, 33, 53, .62);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 9999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s ease, transform .25s ease;
}
.pack__detail:hover {
  background: rgba(35, 33, 53, .88);
  transform: translateY(-1px);
}
.pack__detail:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pack__detail svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

/* Sur mobile : cartes un peu moins hautes, pleine largeur confortable */
@media (max-width: 768px) {
  .pack.pack--photo { flex: 0 1 100%; max-width: 340px; height: 380px; }
  /* Pastille un peu resserrée : sur 340 px de large, elle ne doit pas
     entrer en concurrence avec le badge « Populaire » d'en face. */
  .pack__detail { top: 12px; right: 12px; padding: 6px 11px; font-size: 12px; }
}

/* ============================================================
   ESPACE CLIENT « MON COMPTE » (compte.html)
   Page sur fond clair : connexion par téléphone + code,
   cartes de locations, notices dépliantes, fenêtre d'avis.
   ============================================================ */

.page-compte { background: var(--fond-clair); }

.compte {
  max-width: 720px;
  margin: 0 auto;
  padding: 130px 20px 80px;   /* espace sous la barre de navigation fixe */
  min-height: 60vh;
}

.compte__panneau {
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}

.compte__titre { font-size: 1.9rem; color: var(--texte); margin-bottom: .5rem; }
.compte__sous-titre { color: var(--texte-doux); font-size: .95rem; margin-bottom: 1.4rem; }
.compte__sous-titre--gauche { text-align: left; }

.compte__form .field { text-align: left; margin-bottom: 1rem; }
.compte__form label { display: block; font-size: .85rem; font-weight: 600; color: var(--texte); margin-bottom: .35rem; }
/* Petite phrase d'aide sous un libellé de champ (ex. dépôt de photos d'avis). */
.field__aide { font-size: .8rem; color: var(--texte-doux); margin: -.15rem 0 .5rem; }
.compte__form input,
.avis-modal__boite textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1.5px solid var(--bordure);
  border-radius: 10px;
  font: inherit;
  color: var(--texte);
  background: var(--fond-blanc);
}
.compte__form input:focus,
.avis-modal__boite textarea:focus { outline: none; border-color: var(--primaire); }

/* Champs chiffrés : les paires sont créées par compte.js, on garde juste
   un léger espacement pour que chaque groupe se lise d'un coup d'œil. */
#codeInput { text-align: center; letter-spacing: 3px; word-spacing: 8px; font-size: 1.5rem; }
#telInput  { letter-spacing: 1px; }

.compte__note { font-size: .82rem; color: var(--texte-doux); margin-top: 1rem; }
.compte__note a { color: var(--primaire); }

.compte__status { font-size: .88rem; margin-top: .8rem; min-height: 1.2em; }
.compte__status.est-ok     { color: #1a8a5a; }
.compte__status.est-erreur { color: #c0392b; }

.compte__vide { color: var(--texte-doux); font-size: .92rem; padding: .6rem 0; }

/* ── En-tête de l'espace connecté ── */
.compte__entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.compte__entete .btn--ghost { color: var(--primaire); border-color: var(--primaire); padding: .45rem .9rem; font-size: .85rem; }
.compte__entete .btn--ghost:hover { background: var(--primaire); color: #fff; }
.compte__section-titre { font-size: 1.25rem; color: var(--texte); margin: 1.8rem 0 .8rem; }

/* ── Mon compte & sécurité : téléphone + e-mail de secours ── */
.secu {
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: .4rem 1.2rem 1rem;
}
.secu__bloc { padding: 1rem 0; border-bottom: 1px solid var(--bordure); }
.secu__bloc:last-of-type { border-bottom: 0; }
.secu__ligne { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.secu__cle { display: block; font-size: .78rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em; }
.secu__val { display: block; font-size: 1rem; font-weight: 600; color: var(--texte); margin-top: .15rem; }
.secu__val--ok { color: #1a8a5a; }
.secu__btn { flex: 0 0 auto; padding: .4rem .9rem; font-size: .82rem; color: var(--primaire); border-color: var(--primaire); }
.secu__btn:hover { background: var(--primaire); color: #fff; }
/* .btn impose display:inline-block, ce qui annulerait l'attribut hidden du HTML */
.btn[hidden] { display: none; }
.secu__btn--retirer { margin-top: .8rem; color: #c0392b; border-color: #c0392b; }
.secu__btn--retirer:hover { background: #c0392b; color: #fff; }
.secu__form { margin-top: .9rem; }

/* Rappel affiché tant qu'aucune adresse de secours n'est enregistrée */
.secu-rappel {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  background: rgba(91, 84, 201, .07);
  border: 1px solid rgba(91, 84, 201, .25);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  font-size: .88rem; color: var(--texte);
  margin-bottom: 1.2rem;
}
.secu-rappel a { color: var(--primaire); font-weight: 600; white-space: nowrap; }

/* ── Cartes de locations ── */
.loc-carte {
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: .8rem;
}
.loc-carte__haut { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.loc-carte__statut {
  font-size: .8rem; font-weight: 700;
  padding: .25rem .7rem; border-radius: 99px;
  background: var(--fond-clair); color: var(--texte-doux);
}
.loc-carte--confirmee .loc-carte__statut { background: #eef2ff; color: var(--primaire); }
.loc-carte--en_cours  .loc-carte__statut { background: #e8f8f2; color: #1a8a5a; }
.loc-carte--terminee  .loc-carte__statut { background: var(--fond-clair); color: var(--texte-doux); }
.loc-carte--devis     .loc-carte__statut { background: #fff7e8; color: #b0770c; }
.loc-carte--annulee   .loc-carte__statut { background: #fdeeee; color: #c0392b; }
.loc-carte__prix { font-weight: 700; color: var(--texte); }
.loc-carte__dates, .loc-carte__lieu, .loc-carte__materiel, .loc-carte__caution {
  font-size: .9rem; color: var(--texte-doux); margin: .25rem 0;
}
.loc-carte__materiel { color: var(--texte); }
.loc-carte__avis { margin-top: .7rem; padding: .55rem 1.1rem; font-size: .88rem; }
.loc-carte__avis-ok { font-size: .88rem; color: #1a8a5a; margin-top: .6rem; }

/* ── L'avis déposé, relu par son auteur ──
      Encadré discret sous la location : le client retrouve sa note, son texte,
      ses photos et la réponse du loueur. Sans ça il n'avait qu'un « merci ». */
.loc-avis {
  margin-top: .8rem; padding: .75rem .9rem;
  background: var(--fond-clair); border-radius: 12px;
}
.loc-avis__titre {
  font-size: .82rem; font-weight: 700; color: var(--texte);
  margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .4px;
}
.loc-avis__date { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texte-doux); }
.loc-avis__note { margin: 0 0 .35rem; font-size: 1.05rem; color: #e8a33d; letter-spacing: 2px; }
.loc-avis__note-vide { color: var(--bordure); }
.loc-avis__texte {
  margin: 0; font-size: .9rem; color: var(--texte); font-style: italic;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Occasion de la location : pastille sobre au-dessus du texte de l'avis */
.loc-avis__evenement {
  display: inline-block; margin: 0 0 .4rem; padding: .12rem .55rem;
  font-size: .78rem; font-weight: 600; color: var(--primaire);
  background: var(--primaire-clair, rgba(124, 58, 237, .1));
  border-radius: 999px;
}
/* Réponse du loueur : décalée et liserée, comme une réponse de fil */
.loc-avis__reponse {
  margin-top: .6rem; padding-left: .7rem;
  border-left: 3px solid var(--primaire);
}
.loc-avis__reponse p { margin: 0; font-size: .88rem; color: var(--texte-doux); overflow-wrap: anywhere; }
.loc-avis__reponse-qui { font-weight: 700; color: var(--primaire) !important; font-size: .8rem !important; }
/* Avis masqué en modération : explique l'absence des photos sur le site */
.loc-avis__moderation {
  margin: .6rem 0 0; font-size: .84rem; color: #b0770c;
  background: #fff7e8; border-radius: 8px; padding: .45rem .6rem;
}

/* ── Carte cliquable : ouvre le détail de la location ── */
.loc-carte--cliquable { cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.loc-carte--cliquable:hover {
  border-color: var(--primaire);
  box-shadow: 0 6px 18px rgba(35, 33, 53, .08);
  transform: translateY(-1px);
}
.loc-carte--cliquable:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.loc-carte__voir {
  font-size: .84rem; font-weight: 600; color: var(--primaire);
  margin: .7rem 0 0; text-align: right;
}
/* Le bouton d'avis reste prioritaire au clic (voir compte.js) */
.loc-carte__avis { position: relative; z-index: 1; }

/* ── Fenêtre de détail d'une location ── */
.loc-modal .avis-modal__boite {
  text-align: left;
  width: min(480px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.loc-detail__haut { display: flex; align-items: center; gap: .7rem; margin-bottom: .3rem; padding-right: 1.6rem; }
.loc-detail__num { font-size: .82rem; color: var(--texte-doux); }
.loc-detail__titre {
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texte-doux); margin: 1.2rem 0 .5rem;
}
.loc-detail__ligne {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .9rem; padding: .4rem 0;
  border-bottom: 1px solid var(--bordure);
}
.loc-detail__cle { color: var(--texte-doux); flex-shrink: 0; }
.loc-detail__val { color: var(--texte); font-weight: 600; text-align: right; }
.loc-detail__materiel { margin: 0; padding-left: 1.1rem; }
.loc-detail__materiel li { font-size: .9rem; color: var(--texte); margin-bottom: .3rem; }
.loc-detail__avis { margin-top: 1.2rem; }
.loc-detail__aide { text-align: center; }

/* ── Notices dépliantes (balise <details>) ── */
.notice {
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  margin-bottom: .6rem;
  overflow: hidden;
}
.notice__titre {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--texte);
}
.notice__titre::-webkit-details-marker { display: none; }
.notice__titre img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; }
.notice__chevron { margin-left: auto; color: var(--texte-doux); transition: transform .2s; }
.notice[open] .notice__chevron { transform: rotate(180deg); }
.notice__corps { padding: 0 1.1rem 1rem; }
.notice__corps ul { margin: 0; padding-left: 1.2rem; }
.notice__corps li { font-size: .9rem; color: var(--texte); margin-bottom: .4rem; }
.notice__securite {
  font-size: .85rem; color: #8a6d1a;
  background: #fff7e8; border-radius: 10px;
  padding: .6rem .8rem; margin-top: .6rem;
}

/* ── Fenêtre de dépôt d'avis ── */
.avis-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.avis-modal[hidden] { display: none; }
.avis-modal__fond { position: absolute; inset: 0; background: rgba(35,33,53,.55); }
.avis-modal__boite {
  position: relative;
  background: var(--fond-blanc);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  width: min(430px, calc(100vw - 40px));
  text-align: center;
}
.avis-modal__boite h3 { color: var(--texte); font-size: 1.3rem; margin-bottom: .3rem; }
.avis-modal__boite .field { text-align: left; margin: 1rem 0; }
.avis-modal__boite label { display: block; font-size: .85rem; font-weight: 600; color: var(--texte); margin-bottom: .35rem; }
.avis-modal__fermer {
  position: absolute; top: .8rem; right: .9rem;
  background: none; border: none; font-size: 1.1rem;
  color: var(--texte-doux); cursor: pointer;
}
.avis-etoiles-choix { display: flex; justify-content: center; gap: .3rem; margin: .8rem 0 .2rem; }
.avis-etoiles-choix button {
  background: none; border: none; cursor: pointer;
  font-size: 2rem; color: var(--bordure); transition: color .15s, transform .15s;
}
.avis-etoiles-choix button:hover { transform: scale(1.15); }
.avis-etoiles-choix button.est-active { color: var(--accent); }

/* ── Photos/vidéos jointes à l'avis ── */
.avis-apercus { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.avis-apercu {
  font-size: .78rem; color: var(--texte-doux);
  background: var(--fond-doux, #f5f4fa);
  border: 1px solid var(--bordure); border-radius: 10px;
  padding: .3rem .5rem; max-width: 100%;
  display: flex; align-items: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avis-apercu img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; display: block; margin: -0.3rem -0.5rem;
}
/* Cases « occasion » : grille de puces à cocher, texte à gauche */
.avis-evenements {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
}
.avis-evenements label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: var(--texte); cursor: pointer;
}
.avis-evenements input { flex-shrink: 0; }
.avis-evt-precision {
  margin-top: .55rem; width: 100%;
}
.avis-consent {
  display: flex; gap: .55rem; align-items: flex-start;
  text-align: left; font-size: .8rem; color: var(--texte-doux);
  background: var(--fond-doux, #f5f4fa);
  border: 1px solid var(--bordure); border-radius: 10px;
  padding: .7rem .8rem; margin: 0 0 1rem;
  cursor: pointer; line-height: 1.45;
}
.avis-consent input { margin-top: .2rem; flex-shrink: 0; }
.avis-consent a { color: var(--primaire); }
/* Médias affichés sous un avis déjà déposé (espace client) */
.loc-carte__medias { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.loc-carte__medias img, .loc-carte__medias video {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--bordure);
}

/* ── Section « Les avis de nos clients » (vrais avis vérifiés, page d'accueil) ──
      Même principe que le bandeau galerie : un ruban qui glisse en continu et se
      met en PAUSE au survol pour laisser lire / cliquer les photos.
      En dessous de 4 avis (boucle trop visible), script.js pose la classe
      .temoignages--statique : plus d'animation, simple grille centrée. */
.temoignages { padding: 4.5rem 0; }
.temoignages .section__head { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

/* Le ruban masque le débordement et fond les bords gauche/droite,
   comme la galerie, pour une entrée/sortie en douceur des cartes. */
.temoignages__ruban {
  margin-top: 2rem;
  padding: 12px 0;                     /* place pour l'ombre éventuelle des cartes */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* La piste : une rangée de cartes de largeur fixe qui défile de 0 à -50 %.
   La durée exacte est calculée en JS pour garder une vitesse constante. */
.temoignages__piste {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  animation: avis-defile 40s linear infinite;
}
/* Pause au survol : on laisse le temps de lire l'avis et d'ouvrir les photos */
.temoignages__ruban:hover .temoignages__piste { animation-play-state: paused; }

@keyframes avis-defile {
  from { transform: translateX(0); }
  /* -50 % = une copie complète de la série : la boucle est invisible */
  to   { transform: translateX(-50%); }
}

/* Accessibilité : « moins d'animations » → défilement coupé, ruban scrollable */
@media (prefers-reduced-motion: reduce) {
  .temoignages__ruban { overflow-x: auto; }
  .temoignages__piste { animation: none; }
}

/* REPLI STATIQUE (moins de 4 avis) : pas de boucle, grille centrée classique */
.temoignages--statique .temoignages__ruban {
  overflow: visible;
  -webkit-mask-image: none; mask-image: none;
  max-width: 1080px; margin-left: auto; margin-right: auto; padding: 12px 1.5rem;
}
.temoignages--statique .temoignages__piste {
  display: grid; width: auto; animation: none;
  grid-template-columns: repeat(auto-fit, minmax(270px, 340px));
  justify-content: center;
}
/* En grille statique, la carte remplit sa case (pas de largeur imposée) */
.temoignages--statique .temoignage { width: auto; }

.temoignage {
  background: var(--fond-blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
  width: 340px;                        /* largeur fixe : nécessaire au défilement */
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.temoignage__etoiles { color: var(--accent); font-size: 1.05rem; letter-spacing: .12em; }
.temoignage__texte   { color: var(--texte); font-size: .95rem; line-height: 1.55; }
.temoignage__photos  { display: flex; flex-wrap: wrap; gap: .4rem; }
.temoignage__photos img {
  width: 74px; height: 74px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--bordure); display: block;
}
.temoignage__auteur  { margin-top: auto; font-weight: 600; color: var(--texte); font-size: .9rem; }
.temoignage__auteur span { font-weight: 400; color: var(--texte-doux); }

/* Carte d'invitation « laissez votre avis » — visible uniquement en grille
   statique (peu d'avis) pour combler l'espace et pousser au dépôt.
   Fond légèrement teinté + bord en pointillés pour la distinguer d'un vrai avis. */
.temoignage--invite {
  text-decoration: none;
  align-items: flex-start;
  justify-content: center;
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 6%, var(--fond-blanc));
  transition: transform .2s ease, box-shadow .2s ease;
}
.temoignage--invite:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(35, 33, 53, .12);
}
.temoignage__invite-plus {
  font-size: 1.6rem; line-height: 1; color: var(--accent);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--fond-blanc));
  margin-bottom: .2rem;
}
.temoignage__invite-titre  { font-weight: 700; color: var(--texte); font-size: 1rem; }
.temoignage__invite-texte  { color: var(--texte-doux); font-size: .9rem; line-height: 1.5; }
.temoignage__invite-cta    { margin-top: auto; font-weight: 600; color: var(--accent); font-size: .92rem; }

/* ── Nav simplifiée de la page compte : lien toujours visible ── */
.page-compte .nav__links--visible { display: flex; }

@media (max-width: 640px) {
  .compte { padding-top: 105px; }
  .compte__panneau { padding: 1.6rem 1.2rem; }
  /* Cartes d'avis un peu plus étroites pour tenir sur mobile */
  .temoignage { width: 290px; }
}