/* L'habillage des Fêtes — vert sapin, rouge, doré, et Lumi, le lutin.
 *
 * Porté depuis la passation « Édition des Fêtes + mascotte Lumi » du
 * 2026-09-30, qui fait foi au pixel près. Voir `habillage.tsx` et la
 * migration 148.
 *
 * ⚠️ TOUT CE QUI EST ICI VIT SOUS L'HABILLAGE. Deux préfixes, selon où vit
 * l'élément :
 *   - DANS l'écran : `[data-habillage="fetes"]`, l'enveloppe que pose chaque
 *     écran dès le rendu serveur;
 *   - HORS de l'écran (le fond, le voile du chargement, une fenêtre portée
 *     dans `<body>`) : `:root:has(.v-habillage[data-habillage="fetes"]:not([style*="display: none"], [style*="display: none"] *))`.
 * Une règle écrite sans l'un des deux habillerait chaque site de chaque
 * client.
 *
 * ⚠️ LE `:not(...)` DU SECOND N'EST PAS DÉCORATIF. Après une navigation dans le
 * site, Next garde l'écran QUITTÉ dans la page, caché par un `display: none`
 * que React pose en style sur l'enveloppe même. Sans lui, `/noel` puis un lien
 * vers la politique laissait la politique en vert sapin (relevé par Codex,
 * reproduit le 2026-10-01). Ne PAS y ajouter `[hidden]` : c'est le conteneur
 * où arrive la page pendant le premier chargement, et l'exclure rendait les
 * bords noirs jusqu'à la fin du chargement.
 *
 * ⚠️ ET ICI, LA COULEUR EST ÉCRITE EN DUR, au contraire de `base.css`. C'est
 * voulu : un habillage est un décor que la plateforme offre, choisi par le
 * client pour une page, pas sa marque. Le rouge et le doré de Noël sont les
 * mêmes chez tout le monde; la couleur du client garde le reste de son site. */

/* L'enveloppe n'existe pas pour la mise en page — seulement pour les
 * sélecteurs. Voir `habillage.tsx`. */
.v-habillage {
  display: contents;
}

/* ── Les jetons ────────────────────────────────────────────────────────────
 *
 * Les mêmes noms que `base.css`, redéfinis : tout ce qui s'appuie sur eux
 * (fonds, cartes, textes, filets, accents) passe au vert sapin sans qu'une
 * règle de plus soit écrite. Ce qui reste à habiller en propre — boutons,
 * titres, décor, Lumi — l'est plus bas.
 *
 * Posés sur la RACINE, pour que ce qui vit hors de l'écran les reçoive aussi.
 * Et redits sur `[data-marque]`, qui est plus bas que la racine et
 * redériverait ses propres accents de la couleur du client : la règle
 * `:root:has(...) [data-marque]` est plus spécifique que la sienne. */
:root:has(.v-habillage[data-habillage="fetes"]:not([style*="display: none"], [style*="display: none"] *)),
:root:has(.v-habillage[data-habillage="fetes"]:not([style*="display: none"], [style*="display: none"] *)) [data-marque] {
  /* La passation : vert sapin (fond), vert foncé (sections, barres), vert
   * nuit (le plus profond). */
  --fond: #123a2c;
  --fetes-sapin: #123a2c;
  --fetes-fonce: #0c2a20;
  --carte: var(--fetes-fonce);
  /* Le fond des cartes sombres du résultat (calendrier, garanties) : vert foncé. */
  --carte-chaude: var(--fetes-fonce);

  /* Crème : le texte sur vert, et les cartes claires. */
  --fetes-creme: #fbf4e6;
  --texte: #fbf4e6;
  --texte-2: #cfe0d6;
  --texte-3: #b9d2c4;
  --discret: #9dbcad;
  --discret-2: #9dbcad;

  /* Le texte posé SUR une carte crème. */

  /* Rouge (l'appel à l'action) et son ombre de relief; doré (les accents, le
   * mot mis en valeur). */
  --fetes-rouge: #d23145;
  --fetes-rouge-relief: #8f1626;
  --fetes-or: #f0c05a;

  --filet: rgba(251, 241, 220, 0.1);
  --filet-carte: rgba(251, 241, 220, 0.14);
  --filet-carte-2: rgba(251, 241, 220, 0.18);
  --filet-bouton: rgba(251, 241, 220, 0.32);

  --acid: #f0c05a;
  --acid-soft: #ffd97e;
  --sur-accent: #2a1a12;
  /* Le mot mis en valeur d'un titre est doré, sans dégradé. */
  --degrade-titre: linear-gradient(95deg, #ffd97e 0%, #f0c05a 100%);
  --degrade-bouton: linear-gradient(95deg, #d23145 0%, #d23145 100%);

  /* Les titres du site — du tunnel et du résultat — prennent la police
   * ronde de l'habillage. */
  --police-titre: var(--police-fetes);
  /* … sans capitales (`--casse-titre`, `base.css`). */
  --casse-titre: none;

  /* La bande festive des en-têtes et des barres du bas. */
  --fetes-bande: repeating-linear-gradient(135deg, #d23145 0 14px, #fbf1dc 14px 28px);

}

/* ── La page ─────────────────────────────────────────────────────────────── */

:root:has(.v-habillage[data-habillage="fetes"]:not([style*="display: none"], [style*="display: none"] *)),
:root:has(.v-habillage[data-habillage="fetes"]:not([style*="display: none"], [style*="display: none"] *)) body {
  background: var(--fetes-sapin);
}

:root:has(.v-habillage[data-habillage="fetes"]:not([style*="display: none"], [style*="display: none"] *)) body {
  font-weight: 300;
}

/* ══ Le tunnel et la page de fin ══════════════════════════════════════════
 *
 * Les écrans du tunnel sont ceux du site, sous un autre habit — la maquette
 * « Tunnel Noel » a gardé leur structure (en-tête, tête d'étape, adresse en
 * grand, panneau, barre du bas) et n'en change que l'apparence. Les valeurs
 * sont recopiées de la maquette; ce qui n'est pas repris ici garde l'allure du
 * site, sur les jetons verts du haut de cette feuille. */

[data-habillage="fetes"] .simu-scene {
  background: var(--fetes-sapin);
}

/* Les tailles de Lumi dans le tunnel — celles de la maquette (`t.lumiH`,
 * `t.cadreLumiH`…), que ses dessins lisent en variables. */
:root:has(.v-habillage[data-habillage="fetes"]:not([style*="display: none"], [style*="display: none"] *)) {
  --ft-lumiH: 112px;
  --ft-cadreLumiH: 96px;
}
@media (max-width: 720px) {
  :root:has(.v-habillage[data-habillage="fetes"]:not([style*="display: none"], [style*="display: none"] *)) {
    --ft-lumiH: 84px;
    --ft-cadreLumiH: 62px;
  }
}

/* L'en-tête : vert foncé, la bande festive dessous, et sa pastille. */
[data-habillage="fetes"] .v-entete {
  border-bottom: 0;
  background:
    linear-gradient(var(--fetes-fonce), var(--fetes-fonce)) top / 100% calc(100% - 6px) no-repeat,
    var(--fetes-bande);
  padding-bottom: 6px;
}
[data-habillage="fetes"] .v-entete > div {
  gap: 14px;
}
[data-habillage="fetes"] .v-logo,
[data-habillage="fetes"] .v-logo:hover {
  color: var(--fetes-creme);
}
[data-habillage="fetes"] .v-entete-pastille {
  border-radius: 999px;
  background: rgba(240, 192, 90, 0.14);
  padding: 5px 12px;
  color: var(--fetes-or);
  font-family: var(--police-fetes), sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* La tête d'étape : le rang en doré, le titre rond. */
[data-habillage="fetes"] .simu-tete .v-surtitre {
  font-size: 14px;
  font-weight: 600;
  color: var(--fetes-or);
}
[data-habillage="fetes"] .v-h1,
[data-habillage="fetes"] .v-h2 {
  font-weight: 600;
  letter-spacing: 0;
}
[data-habillage="fetes"] .simu-tete p {
  color: #cfe0d6;
}
@media (max-width: 720px) {
  [data-habillage="fetes"] .simu-tete .v-h1 {
    font-size: 32px;
  }
  [data-habillage="fetes"] .simu-tete p {
    font-size: 14.5px;
    line-height: 1.45;
  }
}

/* L'adresse en grand : dorée, ronde, et Lumi qui la montre. */
[data-habillage="fetes"] .simu-adresse-grande {
  font-weight: 600;
  letter-spacing: 0;
}
[data-habillage="fetes"] .simu-adresse-grande .v-accent {
  background: none;
  color: var(--fetes-or);
}
[data-habillage="fetes"] .simu-adresse-decor {
  margin-left: auto;
  margin-bottom: -18px;
}
@media (max-width: 720px) {
  [data-habillage="fetes"] .simu-adresse-grande {
    font-size: 24px;
  }
  [data-habillage="fetes"] .simu-adresse-grande svg {
    width: 22px;
    height: 22px;
  }
}

/* Le panneau de la façade. */
[data-habillage="fetes"] .simu-panneau {
  background: repeating-linear-gradient(135deg, var(--fetes-fonce) 0 14px, #0f3326 14px 28px);
}

/* La barre du bas : vert foncé, la bande festive dessus, arrondie en haut;
 * sur téléphone, collée aux bords de l'écran. */
[data-habillage="fetes"] .simu-barre {
  gap: 16px;
  border-top: 0;
  border-radius: 22px 22px 0 0;
  background:
    var(--fetes-bande) top / 100% 5px no-repeat,
    var(--fetes-fonce);
  box-shadow: 0 -20px 44px -22px rgba(0, 0, 0, 0.75);
  padding: 22px 28px 24px;
}
@media (max-width: 720px) {
  [data-habillage="fetes"] .simu-barre {
    gap: 10px;
    margin: auto -14px -16px;
    border-radius: 0;
    padding: 18px 16px 20px;
  }
}

/* Les boutons : rouge en relief pour la décision, crème pour l'autre geste. */
[data-habillage="fetes"] .v-bouton {
  border-radius: 16px;
  background: var(--fetes-rouge);
  color: #fff;
  font-family: var(--police-fetes), sans-serif;
  font-weight: 600;
  box-shadow:
    0 5px 0 var(--fetes-rouge-relief),
    0 14px 26px -14px rgba(0, 0, 0, 0.7);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}
[data-habillage="fetes"] .v-bouton:hover {
  color: #fff;
  filter: none;
  transform: translateY(2px);
  box-shadow:
    0 3px 0 var(--fetes-rouge-relief),
    0 10px 20px -12px rgba(0, 0, 0, 0.7);
}
[data-habillage="fetes"] .simu-action {
  font-size: 18px;
}
[data-habillage="fetes"] .simu-action-douce,
[data-habillage="fetes"] .simu-retour-site {
  border: 1.5px solid rgba(251, 241, 220, 0.32);
  border-radius: 16px;
  background: rgba(251, 241, 220, 0.06);
  color: var(--fetes-creme);
  font-family: var(--police-fetes), sans-serif;
  font-size: 16px;
  font-weight: 600;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}
[data-habillage="fetes"] .simu-action-douce:hover,
[data-habillage="fetes"] .simu-retour-site:hover {
  border-color: var(--fetes-or);
}
[data-habillage="fetes"] .simu-retour {
  color: #cfe0d6;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(240, 192, 90, 0.6);
  text-underline-offset: 5px;
}
[data-habillage="fetes"] .simu-retour:hover {
  color: var(--fetes-creme);
}

/* L'aide sous le panneau : titres ronds, et Lumi sous chaque exemple de
 * cadrage à la place de la pastille ✕/✓. */
[data-habillage="fetes"] .simu-aide-titre {
  font-weight: 600;
  letter-spacing: 0;
}
[data-habillage="fetes"] .simu-cadrage > div {
  overflow: visible;
}
[data-habillage="fetes"] .simu-cadrage-decor {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -10px;
  pointer-events: none;
}

/* La façade introuvable : Lumi à la loupe à la place du point d'exclamation. */
[data-habillage="fetes"] .simu-erreur-decor svg {
  display: block;
  height: 120px;
  width: auto;
  margin: 0 auto;
}

/* ── La couleur ─────────────────────────────────────────────────────────── */

/* La tête de l'écran prend toute la largeur : le titre tient sur une ligne. */
[data-habillage="fetes"] .simu-contenu[data-etape="style"] .simu-tete,
[data-habillage="fetes"] .simu-contenu[data-etape="generation"] .simu-tete {
  max-width: none;
}
[data-habillage="fetes"] .simu-contenu[data-etape="style"] .simu-tete p {
  max-width: 60ch;
}

/* Lumi et sa bulle, à droite de l'adresse; sous elle sur téléphone. */
[data-habillage="fetes"] .simu-bulle-lumi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
[data-habillage="fetes"] .simu-bulle {
  position: relative;
  border-radius: 18px;
  background: var(--fetes-creme);
  padding: 10px 16px;
  color: var(--fetes-sapin);
  font-family: var(--police-fetes), sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6);
}
[data-habillage="fetes"] .simu-bulle::after {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 2px;
  background: var(--fetes-creme);
  content: "";
  transform: rotate(45deg);
}
@media (max-width: 720px) {
  [data-habillage="fetes"] .simu-contenu[data-etape="style"] .simu-adresse-grande {
    flex-wrap: wrap;
  }
  [data-habillage="fetes"] .simu-contenu[data-etape="style"] .simu-adresse-decor {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

/* Les vignettes : le nom rond, doré quand il est choisi; la pastille du plus
 * populaire dorée, celle de la tendance sombre. */
[data-habillage="fetes"] .simu-couleur-texte b {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
[data-habillage="fetes"] .simu-couleur[aria-pressed="true"] .simu-couleur-texte b {
  color: var(--fetes-or);
}
[data-habillage="fetes"] .simu-couleur-texte span {
  color: var(--discret);
}
[data-habillage="fetes"] .simu-couleur-vedette[data-premier] {
  background: linear-gradient(95deg, #ffd84a 0%, #ff9a24 100%);
  color: #080806;
}
[data-habillage="fetes"] .simu-couleur-vedette {
  color: var(--fetes-creme);
}
@media (max-width: 720px) {
  [data-habillage="fetes"] .simu-couleurs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
  }
  [data-habillage="fetes"] .simu-couleur-texte b {
    font-size: 18px;
  }
}
[data-habillage="fetes"] .simu-couleurs-note {
  color: var(--discret);
}

/* ── L'attente ──────────────────────────────────────────────────────────── */

/* Lumi marche sur le bord bas de la vidéo (ordinateur)… */
[data-habillage="fetes"] .simu-lumi-video {
  position: absolute;
  z-index: 2;
  right: 330px;
  bottom: 0;
  left: 20px;
  pointer-events: none;
}
/* … ou dans un bandeau enneigé sous elle (téléphone, ou sans vidéo). */
[data-habillage="fetes"] .simu-lumi-bandeau {
  position: relative;
  height: 230px;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(90% 90% at 50% 10%, #1a4a38, var(--fetes-fonce));
}
[data-habillage="fetes"] .simu-lumi-bandeau::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 26px;
  background: #e9f1ec;
  content: "";
}
[data-habillage="fetes"] .simu-lumi-bandeau > div {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 24px;
  left: 8px;
}



/* Le pourcentage et la jauge. */
[data-habillage="fetes"] .simu-pourcent {
  font-weight: 600;
  letter-spacing: 0;
}
[data-habillage="fetes"] .simu-pourcent.v-accent {
  background: none;
  color: var(--fetes-or);
}
[data-habillage="fetes"] .simu-jauge span {
  background: var(--fetes-rouge);
}
[data-habillage="fetes"] .simu-legende {
  color: var(--fetes-creme);
  font-weight: 500;
}
[data-habillage="fetes"] .simu-jalons li > span:first-child {
  font-weight: 600;
}

/* ── Demande reçue ──────────────────────────────────────────────────────── */
[data-habillage="fetes"] .simu-recue-decor svg {
  display: block;
  height: 120px;
  width: auto;
}
[data-habillage="fetes"] .simu-recue .v-h1 em {
  background: none;
  color: var(--fetes-or);
}

/* Les numéros des étapes d'aide (« Comment ça fonctionne », « Et maintenant? »). */
[data-habillage="fetes"] .simu-pas li > span:first-child {
  font-weight: 600;
}

/* ══ La page de résultat ═══════════════════════════════════════════════════
 *
 * La maquette « Resultat Noel » garde la page du site, au vert sapin : plus
 * de capitales, la police ronde (par `--police-titre`), les fonds sombres en
 * vert, les vignettes d'ambiance avec leur texte SOUS l'image et un « + »
 * rond, et Lumi sur la photo et dans l'appel final. */

[data-habillage="fetes"] .fin {
  background: var(--fetes-sapin);
}
[data-habillage="fetes"] .fin :is(h1, h2, h3) {
  font-weight: 600;
  letter-spacing: 0;
}
[data-habillage="fetes"] .fin :is(h1, h2, h3) em {
  background: none;
  color: var(--fetes-or);
}

/* La tête : la phrase laisse la place à Lumi, qui saute sur le bord de la photo. */
[data-habillage="fetes"] .fin-revelation-tete {
  position: relative;
}
[data-habillage="fetes"] .fin-revelation-tete p {
  padding-right: 118px;
}
[data-habillage="fetes"] .fin-decor-tete {
  position: absolute;
  z-index: 3;
  right: 4px;
  bottom: -18px;
  pointer-events: none;
}

/* Les fonds noirs de la page, en vert. */
[data-habillage="fetes"]
  :is(.fin-reserver, .fin-reserver-gauche, .fin-recap, .fin-video, .fin-fiche, .fin-fiche-photo) {
  background: var(--fetes-fonce);
}
[data-habillage="fetes"] .fin-champs {
  background: #081d15;
}

/* Les vignettes d'ambiance : l'image en haut, son texte dessous, et le « + »
 * rond rouge sur l'image. Le « + » se place par rapport à la hauteur de
 * l'image (les trois quarts de la largeur de la vignette). */
[data-habillage="fetes"] .fin-tuile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  aspect-ratio: auto;
  border: 0;
  background: transparent;
  container-type: inline-size;
}
[data-habillage="fetes"] .fin-tuile:hover {
  transform: translateY(-3px);
}
[data-habillage="fetes"] .fin-tuile::before {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: var(--fetes-fonce);
  content: "";
}
[data-habillage="fetes"] .fin-tuile > img,
[data-habillage="fetes"] .fin-tuile > .fin-teintes {
  inset: 0 0 auto;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}
[data-habillage="fetes"] .fin-tuile-voile {
  display: none;
}
[data-habillage="fetes"] .fin-tuile-pied {
  position: static;
  align-items: flex-start;
}
[data-habillage="fetes"] .fin-tuile-pied b {
  color: var(--fetes-creme);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
}
[data-habillage="fetes"] .fin-tuile-pied small {
  color: var(--discret);
}
[data-habillage="fetes"] .fin-plus {
  position: absolute;
  top: calc(75cqw - 44px);
  right: 10px;
  border-radius: 50%;
  background: var(--fetes-rouge);
  color: #fff;
  box-shadow: 0 3px 0 var(--fetes-rouge-relief);
}
[data-habillage="fetes"] .fin-demande {
  border-radius: 16px;
  background: var(--fetes-rouge);
  color: #fff;
  box-shadow: 0 3px 0 var(--fetes-rouge-relief);
}

/* L'appel final : Lumi au-dessus du titre. */
[data-habillage="fetes"] .fin-decor-final {
  display: block;
  margin: 0 auto;
}
[data-habillage="fetes"] .fin-decor-final svg {
  display: block;
  margin: 0 auto;
}

/* La barre « Réserver » collée en bas, avec sa bande festive. */
[data-habillage="fetes"] .fin-barre {
  background:
    var(--fetes-bande) top / 100% 5px no-repeat,
    rgba(12, 42, 32, 0.96);
}