/* =========================================================================
   Les yeux de Rom’ — version arc-en-ciel
   Mobile d’abord : les règles de base visent le téléphone, les @media
   (min-width) ajoutent la tablette puis l’ordinateur.
   ========================================================================= */

/* ---------- Polices (hébergées avec le site) ---------- */
@font-face {
  font-family: "Fredoka";
  src: url("../polices/fredoka.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../polices/nunito.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* Pacifico (licence OFL, polices/OFL-Pacifico.txt) : réduite aux seules lettres du nom,
   « Les yeux de Rom’ ». Pour écrire autre chose avec, il faut refaire le fichier. */
@font-face {
  font-family: "Pacifico";
  src: url("../polices/pacifico-nom.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Propriétés animables (rotation des anneaux arc-en-ciel, apparition de l’anneau des cartes) */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --anneau { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ---------- Palette : tout se change ici ---------- */
:root {
  --creme: #FFF8EF;
  --nuit: #2B2D5B;
  --nuit-doux: #5A5C7E;
  --blanc: #FFFFFF;

  /* Arc-en-ciel vif : décor, anneaux, confettis */
  --rouge: #FF6B6B;
  --orange: #FF9F43;
  --jaune: #FFD93D;
  --vert: #6BCB77;
  --bleu: #4D96FF;
  --violet: #9B5DE5;
  --rose: #F15BB5;

  /* Arc-en-ciel profond : seulement pour du texte (contraste ≥ 4,5:1 sur le crème) */
  --rouge-f: #D62828;
  --orange-f: #C2410C;
  --jaune-f: #A16207;
  --vert-f: #15803D;
  --bleu-f: #1D4ED8;
  --violet-f: #7E22CE;

  /* Teintes pastel : fonds de cartes et de sections */
  --t-rouge: #FFE3E3;
  --t-orange: #FFEBD6;
  --t-jaune: #FFF4C7;
  --t-vert: #DFF5E3;
  --t-bleu: #DDEBFF;
  --t-violet: #EEE3FB;
  --t-rose: #FDE2F1;

  --arc: linear-gradient(90deg, var(--rouge), var(--orange), var(--jaune), var(--vert), var(--bleu), var(--violet), var(--rose));
  --arc-boucle: linear-gradient(90deg, var(--rouge), var(--orange), var(--jaune), var(--vert), var(--bleu), var(--violet), var(--rose), var(--rouge));
  --arc-conique: conic-gradient(from var(--angle), var(--rouge), var(--orange), var(--jaune), var(--vert), var(--bleu), var(--violet), var(--rose), var(--rouge));

  --police-titre: "Fredoka", "Nunito", system-ui, sans-serif;
  --police-texte: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rayon: 24px;
  --ombre: 0 2px 6px rgba(43, 45, 91, .05), 0 10px 30px rgba(43, 45, 91, .08);
  --ombre-haute: 0 4px 12px rgba(43, 45, 91, .08), 0 22px 50px rgba(43, 45, 91, .16);
  --doux: cubic-bezier(.22, 1, .36, 1);
  --rebond: cubic-bezier(.34, 1.56, .64, 1);
  --largeur: 1140px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--nuit);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 1.4rem + 4vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--bleu-f); text-underline-offset: .18em; }
a:hover { color: var(--violet-f); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; border-radius: 8px; }
.sombre :focus-visible { outline-color: var(--jaune); }

.conteneur { width: min(100% - 32px, var(--largeur)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement {
  position: absolute; left: 16px; top: -80px; z-index: 400;
  background: var(--nuit); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-weight: 800; text-decoration: none; transition: top .25s var(--doux);
}
.evitement:focus { top: 12px; color: #fff; }

/* Étiquette des contenus provisoires */
.a-remplacer {
  display: inline-block; vertical-align: middle;
  font: 800 .72rem/1.4 var(--police-texte); letter-spacing: .04em; text-transform: uppercase;
  color: #6B4A00; background: #FFE7A8; border: 1px dashed #C99A1E; border-radius: 6px; padding: 2px 7px;
}
/* Bandeau « démonstration » */
.demo-bandeau {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 18px; border-radius: 16px; margin: 0 0 28px;
  background: var(--t-violet); border: 2px dashed var(--violet); color: var(--nuit); font-weight: 700;
}
.demo-bandeau svg { width: 22px; height: 22px; flex: none; color: var(--violet-f); margin-top: 2px; }

/* Texte arc-en-ciel (couleurs profondes, lisibles) qui glisse doucement */
.texte-arc {
  background: linear-gradient(90deg, var(--rouge-f), var(--orange-f), var(--jaune-f), var(--vert-f), var(--bleu-f), var(--violet-f), var(--rouge-f), var(--orange-f), var(--jaune-f), var(--vert-f), var(--bleu-f), var(--violet-f), var(--rouge-f));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: glisse-fond 9s linear infinite;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: .7em 1.45em;
  border: 3px solid transparent; border-radius: 999px;
  font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .3s var(--rebond), box-shadow .3s var(--doux), background-color .25s, color .25s;
}
.bouton:hover { transform: translateY(-3px) scale(1.02); }
.bouton:active { transform: translateY(0) scale(.97); }
.bouton svg { width: 1.15em; height: 1.15em; flex: none; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
/* Bouton principal : bleu nuit cerclé d’un anneau arc-en-ciel qui tourne */
.bouton--arc {
  color: #fff;
  background: linear-gradient(var(--nuit), var(--nuit)) padding-box, var(--arc-conique) border-box;
  animation: tourne 5s linear infinite;
}
.bouton--arc:hover { color: #fff; box-shadow: 0 10px 28px rgba(155, 93, 229, .35), 0 4px 12px rgba(255, 107, 107, .25); }
.bouton--arc:hover .coeur { animation: battement .9s var(--doux); }
.bouton--clair { background: var(--blanc); color: var(--nuit); border-color: var(--nuit); }
.bouton--clair:hover { color: var(--nuit); box-shadow: 6px 6px 0 var(--jaune); }
.bouton--soleil { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }
.bouton--soleil:hover { color: var(--nuit); box-shadow: 0 8px 22px rgba(255, 159, 67, .4); }
.bouton--petit { min-height: 44px; padding: .45em 1.1em; font-size: .98rem; }
.bouton--plein { width: 100%; }

/* ---------- En-tête ---------- */
.arc-barre { position: relative; height: 6px; overflow: hidden; }
.arc-barre::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 200%;
  background: var(--arc-boucle) 0 0 / 50% 100% repeat-x;
  animation: glisse 10s linear infinite;
}
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 248, 239, .96);
  transition: box-shadow .3s var(--doux);
}
.entete.defile { box-shadow: 0 6px 24px rgba(43, 45, 91, .1); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 70px; }
.marque {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; line-height: 1;
}
.marque img { width: auto; height: 46px; flex: none; transform-origin: 70% 30%; }
.marque:hover img { animation: papillon .7s var(--rebond); }
/* Le nom, comme sur le logo de l’association : chaque mot sa couleur */
.marque__nom {
  font-family: "Pacifico", var(--police-titre); font-weight: 400;
  font-size: 1.12rem; line-height: 1.15; white-space: nowrap;
}
.n-les { color: #e8473b; }
.n-yeux { color: #e8891a; }
.n-de { color: #2fae66; }
.n-rom { color: #2f7fd6; }
.marque__coeur { display: inline-block; width: .72em; height: .72em; margin-left: .2em; color: #e8473b; vertical-align: -.02em; }
@media (min-width: 420px) {
  .marque__nom { font-size: 1.3rem; }
  .marque__nom br { display: none; }
}

.entete__actions { display: flex; align-items: center; gap: 8px; }
.entete__actions .bouton--arc { display: none; }
.panier-bouton {
  position: relative; display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px; background: var(--t-jaune); color: var(--nuit);
  text-decoration: none; transition: transform .3s var(--rebond);
}
.panier-bouton:hover { color: var(--nuit); transform: rotate(-6deg) scale(1.06); }
.panier-bouton svg { width: 24px; height: 24px; }

.menu-bouton {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border: 0; border-radius: 14px;
  background: var(--t-bleu); color: var(--nuit); cursor: pointer;
}
.menu-bouton__traits { position: relative; width: 22px; height: 2.5px; background: currentColor; border-radius: 2px; transition: background-color .2s; }
.menu-bouton__traits::before, .menu-bouton__traits::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2.5px; background: currentColor; border-radius: 2px;
  transition: transform .35s var(--doux);
}
.menu-bouton__traits::before { transform: translateY(-7px); }
.menu-bouton__traits::after { transform: translateY(7px); }
.menu-bouton[aria-expanded="true"] .menu-bouton__traits { background: transparent; }
.menu-bouton[aria-expanded="true"] .menu-bouton__traits::before { transform: rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-bouton__traits::after { transform: rotate(-45deg); }

.nav {
  display: none;
  position: absolute; inset: 100% 0 auto 0;
  background: var(--creme); box-shadow: 0 18px 30px rgba(43, 45, 91, .1);
  padding: 8px 16px 20px;
}
.nav.ouvert { display: block; animation: deroule .35s var(--doux); }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nav a { display: block; padding: 12px 14px; border-radius: 12px; color: var(--nuit); text-decoration: none; font-weight: 700; }
.nav li:nth-child(7n+1) a:hover { background: var(--t-rouge); }
.nav li:nth-child(7n+2) a:hover { background: var(--t-orange); }
.nav li:nth-child(7n+3) a:hover { background: var(--t-jaune); }
.nav li:nth-child(7n+4) a:hover { background: var(--t-vert); }
.nav li:nth-child(7n+5) a:hover { background: var(--t-bleu); }
.nav a[aria-current="page"] { background: var(--t-violet); }
.nav__don { margin-top: 8px; }
.nav__don a { background: var(--nuit); color: #fff; text-align: center; border-radius: 999px; }
.nav__don a:hover { background: var(--violet-f) !important; color: #fff; }

@media (min-width: 600px) {
  .entete__actions .bouton--arc { display: inline-flex; }
  .nav__don { display: none; }
}
@media (min-width: 1000px) {
  .menu-bouton { display: none; }
  .nav { display: block; position: static; background: none; box-shadow: none; padding: 0; animation: none; }
  .nav ul { display: flex; gap: 2px; }
  .nav a { position: relative; padding: 8px 11px; }
  .nav a::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 3px; border-radius: 3px;
    background: var(--arc); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--doux);
  }
  .nav a:hover, .nav a[aria-current="page"] { background: none !important; }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: 64px 0; }
.section--rose { background: var(--t-rose); }
.section--serree { padding-bottom: 32px; }
.section--bleu { background: var(--t-bleu); }
.section--jaune { background: var(--t-jaune); }
.section--vert { background: var(--t-vert); }
.section__tete { max-width: 44rem; margin-bottom: 34px; }
.section__tete--centre { margin-inline: auto; text-align: center; }
.section__tete p:not(.surtitre) { color: var(--nuit-doux); font-size: 1.12rem; }
.surtitre {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 5px 14px 5px 10px; border-radius: 999px;
  background: var(--blanc); box-shadow: var(--ombre);
  font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-f);
}
.surtitre svg { width: 16px; height: 16px; }
.lien-suite { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; text-decoration: none; }
.lien-suite svg { width: 18px; height: 18px; transition: transform .3s var(--doux); }
.lien-suite:hover svg { transform: translateX(5px); }
/* Vague arc-en-ciel entre deux sections */
.vague-arc { display: block; width: 100%; height: 56px; margin: -1px 0; }
.vague-arc path { animation: ondule 7s ease-in-out infinite alternate; }
.vague-arc path:nth-child(2) { animation-duration: 9s; }
.vague-arc path:nth-child(3) { animation-duration: 11s; }
@media (min-width: 960px) {
  .section { padding: 96px 0; }
  .vague-arc { height: 80px; }
}

/* ---------- Bandeau principal ---------- */
.hero { position: relative; padding: 28px 0 48px; overflow: hidden; isolation: isolate; }
.hero__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.hero__fond span {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  opacity: .55; animation: nage 24s ease-in-out infinite alternate;
}
.hero__fond span:nth-child(1) { left: -18vmax; top: -16vmax; background: radial-gradient(closest-side, var(--t-rose), transparent); }
.hero__fond span:nth-child(2) { right: -16vmax; top: -10vmax; background: radial-gradient(closest-side, var(--t-jaune), transparent); animation-duration: 30s; }
.hero__fond span:nth-child(3) { left: 20%; bottom: -26vmax; background: radial-gradient(closest-side, var(--t-bleu), transparent); animation-duration: 27s; }
.hero__grille { display: grid; gap: 30px; align-items: center; }
.hero h1 { margin-bottom: .4em; }
.hero h1 .mot { display: inline-block; animation: mot-entre .9s var(--rebond) both; animation-delay: calc(var(--i, 0) * .09s + .1s); }
.hero h1 .mot.texte-arc { animation: mot-entre .9s var(--rebond) both, glisse-fond 9s linear infinite; animation-delay: calc(var(--i, 0) * .09s + .1s), 0s; }
.hero__texte { font-size: 1.16rem; color: var(--nuit-doux); max-width: 34em; }
.hero__boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__boutons .bouton { flex: 1 1 auto; }
.hero__boutons .bouton--arc { flex-basis: 100%; }
@media (min-width: 640px) {
  .hero__boutons .bouton, .hero__boutons .bouton--arc { flex: 0 0 auto; }
}
@media (min-width: 960px) {
  .hero { padding: 48px 0 80px; }
  .hero__grille { grid-template-columns: 1fr 1fr; gap: 48px; }
}

/* Scène : arc-en-ciel, nuage qui regarde le visiteur */
.scene {
  position: relative; padding: 5px; border-radius: 38px;
  background: var(--arc-conique); animation: tourne 8s linear infinite;
  box-shadow: var(--ombre-haute);
}
.scene > svg { width: 100%; height: auto; border-radius: 33px; background: #fff; touch-action: manipulation; }
.arc-bande { animation: trace-arc 1.6s var(--doux) both; animation-delay: calc(var(--i) * .12s + .3s); }
.nuage-perso { cursor: pointer; }
.nuage-corps { transform-box: fill-box; transform-origin: 50% 100%; animation: respire-nuage 4s ease-in-out infinite alternate; }
.nuage-perso.saute .nuage-corps { animation: saute .7s var(--rebond); }
.oeil-perso { transform-box: fill-box; transform-origin: center; }
.oeil-perso.cligne { animation: cligne .22s ease-in-out; }
.joue { animation: rougit 3s ease-in-out infinite alternate; }
.ballon { transform-box: fill-box; transform-origin: 50% 100%; animation: flotte 6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.petit-nuage { animation: derive 18s ease-in-out infinite alternate; }
.etoile { transform-box: fill-box; transform-origin: center; animation: scintille 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.bulle {
  position: absolute; left: 50%; top: 36%; z-index: 2;
  translate: -50% 0; padding: 8px 14px; border-radius: 16px;
  background: var(--nuit); color: #fff; font: 700 .92rem var(--police-texte); white-space: nowrap;
  pointer-events: none; opacity: 0;
  animation: bulle-entre .6s var(--rebond) 2.2s forwards;
}
.bulle::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; translate: -50% 0;
  background: var(--nuit); border-radius: 0 0 4px 0; rotate: 45deg;
}
.bulle.partie { animation: bulle-sort .35s var(--doux) forwards; }
.hero__pied { display: flex; justify-content: center; margin-top: 14px; }
.bouton-pause {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px;
  border: 1px solid #E6D7F5; border-radius: 999px; background: rgba(255, 255, 255, .8);
  color: var(--nuit-doux); font: 700 .88rem var(--police-texte); cursor: pointer;
}
.bouton-pause:hover { background: #fff; color: var(--nuit); }
.bouton-pause svg { width: 14px; height: 14px; }
.sombre .bouton-pause { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #E3E4F3; }

/* ---------- Bandeau défilant ---------- */
.defilant-cadre { overflow: hidden; padding: 22px 0 18px; }
.defilant { overflow: hidden; background: var(--nuit); rotate: -2deg; margin: 0 -20px; padding: 14px 0; box-shadow: var(--ombre-haute); }
.defilant__piste { display: flex; width: max-content; animation: glisse 38s linear infinite; }
.defilant:hover .defilant__piste { animation-play-state: paused; }
.defilant span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font: 600 clamp(1.3rem, 1rem + 1.4vw, 2rem) var(--police-titre); white-space: nowrap; }
.defilant span svg { width: .8em; height: .8em; }
.defilant span:nth-child(7n+1) { color: var(--rouge); }
.defilant span:nth-child(7n+2) { color: var(--orange); }
.defilant span:nth-child(7n+3) { color: var(--jaune); }
.defilant span:nth-child(7n+4) { color: var(--vert); }
.defilant span:nth-child(7n+5) { color: var(--bleu); }
.defilant span:nth-child(7n+6) { color: #B98BF0; }
.defilant span:nth-child(7n+7) { color: var(--rose); }

/* ---------- Chiffres ---------- */
.chiffres { display: grid; gap: 16px; }
.chiffre {
  position: relative; padding: 28px 22px 24px; text-align: center;
  border-radius: 34px 28px 38px 26px; box-shadow: var(--ombre);
  transition: transform .4s var(--rebond);
}
.chiffre:hover { transform: rotate(-2deg) scale(1.03); }
.chiffre:nth-child(1) { background: var(--t-rouge); --fonce: var(--rouge-f); --vif: var(--rouge); }
.chiffre:nth-child(2) { background: var(--t-jaune); --fonce: var(--jaune-f); --vif: var(--orange); }
.chiffre:nth-child(3) { background: var(--t-bleu); --fonce: var(--bleu-f); --vif: var(--bleu); }
.chiffre__icone { width: 54px; height: 54px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 18px; background: var(--vif); color: #fff; }
.chiffre__icone svg { width: 28px; height: 28px; }
.chiffre__valeur { margin: 0 0 4px; font: 700 clamp(2.5rem, 2rem + 2vw, 3.4rem)/1 var(--police-titre); color: var(--fonce); font-variant-numeric: tabular-nums; }
.chiffre__libelle { margin: 0; font-weight: 800; }
.chiffres__note { margin-top: 16px; text-align: center; }
@media (min-width: 640px) { .chiffres { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cartes ---------- */
.grille-cartes { display: grid; gap: 22px; }
.carte {
  position: relative; display: flex; flex-direction: column;
  border: 4px solid transparent; border-radius: var(--rayon);
  background:
    linear-gradient(var(--blanc), var(--blanc)) padding-box,
    conic-gradient(from var(--angle),
      rgb(255 107 107 / var(--anneau)), rgb(255 159 67 / var(--anneau)), rgb(255 217 61 / var(--anneau)),
      rgb(107 203 119 / var(--anneau)), rgb(77 150 255 / var(--anneau)), rgb(155 93 229 / var(--anneau)),
      rgb(241 91 181 / var(--anneau)), rgb(255 107 107 / var(--anneau))) border-box;
  box-shadow: var(--ombre);
  transition: transform .45s var(--rebond), box-shadow .4s var(--doux), --anneau .4s var(--doux);
  animation: tourne 4s linear infinite;
}
.carte:hover, .carte:focus-within { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--ombre-haute); --anneau: 1; }
.carte__visuel { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--rayon) - 4px) calc(var(--rayon) - 4px) 0 0; }
.carte__visuel > svg, .carte__visuel > img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--doux); }
.carte:hover .carte__visuel > svg, .carte:hover .carte__visuel > img { transform: scale(1.06); }
.carte__visuel .a-remplacer { position: absolute; top: 12px; left: 12px; }
.carte__corps { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 20px 22px 24px; }
.carte__etiquette { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-f); }
.carte__corps h3 { margin: 0 0 4px; }
.carte__corps p { color: var(--nuit-doux); margin: 0 0 8px; }
.carte__lien { margin-top: auto; }
.carte__lien::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 640px) { .grille-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-cartes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Compte à rebours ---------- */
.soiree-une { display: grid; gap: 26px; align-items: center; }
.soiree-une__carte { background: var(--blanc); border-radius: 30px; padding: 26px; box-shadow: var(--ombre-haute); }
.rebours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 22px; }
.rebours div { border-radius: 18px; padding: 12px 4px 10px; text-align: center; }
.rebours div:nth-child(1) { background: var(--t-rouge); color: var(--rouge-f); }
.rebours div:nth-child(2) { background: var(--t-jaune); color: var(--jaune-f); }
.rebours div:nth-child(3) { background: var(--t-vert); color: var(--vert-f); }
.rebours div:nth-child(4) { background: var(--t-bleu); color: var(--bleu-f); }
.rebours strong { display: block; font: 700 clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem)/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.rebours strong.tic { animation: tic .4s var(--rebond); }
.rebours span { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.micro { position: relative; display: grid; place-items: center; }
.micro svg { width: min(100%, 360px); }
.micro .note { transform-box: fill-box; transform-origin: center; animation: monte 5s ease-in-out infinite; animation-delay: var(--d, 0s); opacity: 0; }
@media (min-width: 900px) { .soiree-une { grid-template-columns: 1.1fr .9fr; gap: 48px; } }

/* ---------- Boutique (aperçu) ---------- */
.apercu-produits { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.apercu-produit {
  display: grid; gap: 8px; justify-items: center; text-align: center; text-decoration: none; color: var(--nuit);
  padding: 14px 8px 16px; border-radius: 26px; background: var(--blanc); box-shadow: var(--ombre);
  transition: transform .4s var(--rebond), box-shadow .4s;
}
.apercu-produit:hover { color: var(--nuit); transform: translateY(-6px) rotate(2deg); box-shadow: var(--ombre-haute); }
.apercu-produit img { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; }
.apercu-produit strong { font: 600 1rem/1.2 var(--police-titre); }
.apercu-produit span { font-weight: 800; color: var(--violet-f); }

/* ---------- Ciel des vœux ---------- */
.ciel {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, #4A3A8C 0%, #2B2D5B 55%, #1E2046 100%);
}
.ciel h2 { color: #fff; }
.ciel .section__tete p:not(.surtitre) { color: #D8DAF0; }
.ciel .surtitre { background: rgba(255, 255, 255, .12); color: var(--jaune); box-shadow: none; }
.voute { position: relative; height: 320px; margin: 10px 0 24px; }
.voeu {
  position: absolute; left: var(--x); top: var(--y);
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  translate: -50% -50%;
}
.voeu svg { width: 100%; height: 100%; color: var(--c, var(--jaune)); filter: drop-shadow(0 0 6px currentColor); }
.voeu svg { animation: scintille 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.voeu::after {
  content: attr(data-voeu);
  position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 3;
  width: max-content; max-width: 190px; padding: 8px 12px; border-radius: 12px;
  background: #fff; color: var(--nuit); font: 700 .9rem/1.35 var(--police-texte); text-align: center;
  opacity: 0; transform: translateX(-50%) translateY(6px) scale(.92); pointer-events: none;
  transition: opacity .25s, transform .35s var(--rebond);
}
.voeu[data-cote="gauche"]::after { left: 0; transform: translateY(6px) scale(.92); transform-origin: left bottom; }
.voeu[data-cote="droite"]::after { left: auto; right: 0; transform: translateY(6px) scale(.92); transform-origin: right bottom; }
.voeu[data-bas]::after { bottom: auto; top: calc(100% + 8px); }
.voeu:hover::after, .voeu:focus-visible::after, .voeu.montre::after { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.voeu[data-cote]:hover::after, .voeu[data-cote]:focus-visible::after, .voeu[data-cote].montre::after { transform: translateY(0) scale(1); }
.voeu.nouveau svg { animation: naissance 1s var(--rebond), scintille 3.6s ease-in-out 1s infinite; }
.filante {
  position: absolute; top: 12%; left: -20%; width: 140px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff);
  rotate: 18deg; opacity: 0; animation: filante 9s ease-in 3s infinite;
}
.filante--2 { top: 40%; animation-delay: 7.5s; animation-duration: 13s; }
.voeu-form { display: grid; gap: 10px; max-width: 640px; margin-inline: auto; }
.voeu-form label { font-weight: 800; text-align: center; }
.voeu-form__ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.voeu-form input {
  flex: 1 1 240px; min-height: 52px; padding: 10px 18px; border-radius: 999px; border: 3px solid transparent;
  background: #fff; color: var(--nuit); font-weight: 700;
}
.voeu-form input:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.voeu-form small { text-align: center; color: #C9CBE6; }
.etoile-volante { position: fixed; top: 0; left: 0; z-index: 300; width: 34px; height: 34px; pointer-events: none; color: var(--jaune); filter: drop-shadow(0 0 8px var(--jaune)); }

/* ---------- Comment aider ---------- */
.aides { display: grid; gap: 16px; }
.aide {
  position: relative; padding: 24px; border-radius: var(--rayon); box-shadow: var(--ombre);
  transition: transform .4s var(--rebond), box-shadow .4s;
}
.aide:nth-child(1) { background: var(--t-rouge); }
.aide:nth-child(2) { background: var(--t-vert); }
.aide:nth-child(3) { background: var(--t-bleu); }
.aide:nth-child(4) { background: var(--t-violet); }
.aide:hover, .aide:focus-within { transform: translateY(-6px) rotate(1deg); box-shadow: var(--ombre-haute); }
.aide:hover .pastille, .aide:focus-within .pastille { transform: rotate(-12deg) scale(1.12); }
.aide h3 { font-size: 1.2rem; }
.aide p { color: var(--nuit-doux); }
/* Toute la carte est cliquable : le bouton s’étend sur elle */
.aide { cursor: pointer; }
.aide .lien-suite::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
button.lien-suite { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--bleu-f); cursor: pointer; }
button.lien-suite:focus-visible { outline: none; }
.aide:has(.lien-suite:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }
.pastille {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 18px;
  background: var(--blanc); color: var(--nuit); box-shadow: var(--ombre);
  transition: transform .45s var(--rebond);
}
.pastille svg { width: 28px; height: 28px; }
@media (min-width: 640px) { .aides { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .aides { grid-template-columns: repeat(4, 1fr); } }

.bandeau {
  position: relative; overflow: hidden; display: grid; gap: 22px; align-items: center;
  margin-top: 40px; padding: 36px 24px; border-radius: 32px; background: var(--nuit); color: #fff;
}
.bandeau::before { content: ""; position: absolute; inset: auto 0 0 0; height: 8px; background: var(--arc); }
.bandeau h2 { color: #fff; }
.bandeau p { color: #E3E4F3; margin: 0; }
.bandeau__action { display: grid; gap: 10px; justify-items: start; }
.bandeau__action small { color: #C9CBE6; }
@media (min-width: 820px) { .bandeau { grid-template-columns: 1.4fr auto; padding: 52px 56px; gap: 40px; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: #E3E4F3; padding: 48px 0 28px; }
.pied a { color: #fff; }
.pied a:hover { color: var(--jaune); }
.pied h2 { font-size: 1.1rem; color: #fff; margin-bottom: 12px; }
.pied__grille { display: grid; gap: 30px; }
/* Sur le fond nuit, le logo garde ses couleurs sur une pastille blanche */
.pied .marque { display: inline-flex; background: #fff; border-radius: 999px; padding: 8px 18px 8px 12px; margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reseaux { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
.reseaux a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .35); text-decoration: none; font-weight: 700;
  transition: background-color .25s, border-color .25s, transform .3s var(--rebond);
}
.reseaux a:hover { background: rgba(255, 255, 255, .1); border-color: var(--jaune); color: #fff; transform: translateY(-2px); }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .92rem;
}
@media (min-width: 640px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- En-tête des pages intérieures ---------- */
.page-tete { position: relative; overflow: hidden; padding: 44px 0 36px; text-align: center; isolation: isolate; }
.page-tete h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); }
.page-tete p:not(.surtitre) { max-width: 38rem; margin-inline: auto; color: var(--nuit-doux); font-size: 1.12rem; }
.page-tete .hero__fond span { opacity: .7; }

/* ---------- Champs de formulaire ---------- */
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 800; }
.champ input, .champ select, .champ textarea {
  min-height: 50px; padding: 10px 14px; border-radius: 14px;
  border: 2px solid #D9D2E9; background: #fff; color: var(--nuit);
  transition: border-color .2s, box-shadow .2s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px var(--t-violet); }
.champ input[aria-invalid="true"] { border-color: var(--rouge-f); }
.champ .erreur { color: var(--rouge-f); font-weight: 700; font-size: .92rem; min-height: 0; }
.champ .aide-champ { color: var(--nuit-doux); font-size: .9rem; }

/* Compteur − / + */
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--t-violet); }
.stepper button {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--nuit);
  font: 700 1.3rem/1 var(--police-titre); cursor: pointer; box-shadow: var(--ombre);
  transition: transform .25s var(--rebond);
}
.stepper button:hover:not([disabled]) { transform: scale(1.12); }
.stepper button[disabled] { opacity: .4; cursor: not-allowed; }
.stepper output { min-width: 34px; text-align: center; font: 700 1.2rem var(--police-titre); font-variant-numeric: tabular-nums; }

/* ---------- Fenêtres (réservation, panier) ---------- */
dialog { color: var(--nuit); }
dialog::backdrop { background: rgba(30, 32, 70, .55); }
.modale {
  width: min(580px, 100% - 20px); max-height: calc(100% - 20px); padding: 0; border: 0; border-radius: 28px;
  background: var(--creme); box-shadow: var(--ombre-haute); overflow: auto;
}
.modale[open] { animation: modale-entre .5s var(--rebond); }
.modale__tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; background: var(--creme); }
.modale__tete h2 { margin: 0; font-size: 1.35rem; }
.modale__corps { padding: 4px 20px 22px; }
.fermer {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--t-rouge); color: var(--nuit); cursor: pointer; transition: transform .3s var(--rebond);
}
.fermer:hover { transform: rotate(90deg); }
.fermer svg { width: 20px; height: 20px; }
@media (min-width: 640px) { .modale__tete { padding: 24px 28px 14px; } .modale__corps { padding: 4px 28px 28px; } }

/* ---------- Soirées et réservation ---------- */
.evts { display: grid; gap: 22px; }
.evt {
  display: grid; overflow: hidden; border-radius: 28px; background: var(--blanc); box-shadow: var(--ombre);
  transition: transform .45s var(--rebond), box-shadow .4s;
}
.evt:hover { transform: translateY(-5px); box-shadow: var(--ombre-haute); }
.evt__date {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  background: var(--c-fond); color: var(--c-texte);
}
.evt__date strong { font: 700 3rem/1 var(--police-titre); }
.evt__date span { display: grid; font-weight: 800; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
.evt__date svg { position: absolute; right: 18px; top: 50%; width: 54px; height: 54px; translate: 0 -50%; color: var(--c-texte); opacity: .85; }
.evt:hover .evt__date svg { animation: gigote .8s var(--rebond); }
.evt__corps { padding: 22px; display: grid; gap: 12px; }
.evt__corps h3 { margin: 0; font-size: 1.4rem; }
.evt__corps p { margin: 0; color: var(--nuit-doux); }
.infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.infos li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.infos svg { width: 20px; height: 20px; flex: none; color: var(--violet-f); }
.jauge { display: grid; gap: 6px; }
.jauge__barre { height: 12px; border-radius: 999px; background: #EEE9F6; overflow: hidden; }
.jauge__barre span { display: block; height: 100%; width: var(--remplie, 0%); border-radius: inherit; background: var(--arc); transition: width 1s var(--doux); }
.jauge small { font-weight: 800; color: var(--nuit-doux); }
.jauge small.presque { color: var(--rouge-f); }
.evt__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.evt__prix { font-weight: 800; }
@media (min-width: 760px) {
  .evt { grid-template-columns: 230px 1fr; }
  .evt__date { flex-direction: column; justify-content: center; text-align: center; padding: 26px 18px; }
  .evt__date strong { font-size: 3.8rem; }
  .evt__date svg { position: static; translate: none; margin-top: 8px; }
  .evt__corps { padding: 26px 30px; }
}

.etapes { display: flex; align-items: center; gap: 0; margin: 4px 0 22px; }
.etapes li { list-style: none; flex: 1; display: grid; justify-items: center; gap: 6px; position: relative; font-size: .82rem; font-weight: 800; color: var(--nuit-doux); text-align: center; }
.etapes li::before {
  content: attr(data-n); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #EEE9F6; color: var(--nuit); font: 700 1rem var(--police-titre); position: relative; z-index: 1;
  transition: background-color .3s, transform .4s var(--rebond);
}
.etapes li::after { content: ""; position: absolute; top: 16px; left: calc(-50% + 17px); right: calc(50% + 17px); height: 3px; background: #EEE9F6; }
.etapes li:first-child::after { display: none; }
.etapes li.faite::before, .etapes li.active::before { background: var(--nuit); color: #fff; }
.etapes li.active::before { transform: scale(1.15); box-shadow: 0 0 0 4px var(--jaune); }
.etapes li.faite::after, .etapes li.active::after { background: var(--arc); }
.etapes li.active { color: var(--nuit); }
.etapes { padding: 0; }

.etape { display: none; }
.etape.active { display: grid; gap: 16px; animation: etape-entre .45s var(--doux); }
.ligne-tarif { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: var(--ombre); }
.ligne-tarif strong { display: block; }
.ligne-tarif small { color: var(--nuit-doux); font-weight: 700; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px; border-top: 2px dashed #D9D2E9; font: 600 1.25rem var(--police-titre); }
.total strong { font-size: 1.6rem; }
.boutons-etape { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.recap { margin: 0; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: var(--ombre); display: grid; gap: 6px; }
.recap div { display: flex; justify-content: space-between; gap: 12px; }
.recap dt { color: var(--nuit-doux); font-weight: 700; }
.recap dd { margin: 0; font-weight: 800; text-align: right; }

/* Billet de confirmation */
.billet {
  position: relative; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: var(--ombre-haute);
  animation: billet-tombe .9s var(--rebond);
  -webkit-mask: radial-gradient(circle 14px at 0 62%, transparent 98%, #000), radial-gradient(circle 14px at 100% 62%, transparent 98%, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 14px at 0 62%, transparent 98%, #000), radial-gradient(circle 14px at 100% 62%, transparent 98%, #000);
  mask-composite: intersect;
}
.billet__haut { padding: 20px 22px 16px; background: var(--arc); color: var(--nuit); }
.billet__haut small { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.billet__haut h3 { margin: 4px 0 0; font-size: 1.35rem; }
.billet__milieu { padding: 16px 22px; display: grid; gap: 4px; font-weight: 700; }
.billet__bas { display: flex; gap: 16px; align-items: center; padding: 16px 22px 20px; border-top: 2px dashed #D9D2E9; }
.billet__bas svg { width: 92px; height: 92px; flex: none; }
.billet__bas strong { display: block; font: 700 1.3rem var(--police-titre); letter-spacing: .04em; }
.billet__bas small { color: var(--nuit-doux); font-weight: 700; }

.mes-resas { display: grid; gap: 12px; }
.mes-resas li { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 18px; background: #fff; box-shadow: var(--ombre); animation: etape-entre .4s var(--doux); }
.mes-resas ul { padding: 0; margin: 0; display: grid; gap: 12px; }
.lien-bouton { border: 0; background: none; padding: 6px 4px; color: var(--rouge-f); font-weight: 800; text-decoration: underline; cursor: pointer; }
.vide { color: var(--nuit-doux); font-weight: 700; }

.album { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.album figure { margin: 0; aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center; transition: transform .45s var(--rebond); }
.album figure:hover { transform: rotate(-3deg) scale(1.04); }
.album figure svg { width: 42%; height: 42%; color: var(--nuit); opacity: .8; }
.album figure:nth-child(6n+1) { background: var(--t-rouge); }
.album figure:nth-child(6n+2) { background: var(--t-orange); }
.album figure:nth-child(6n+3) { background: var(--t-jaune); }
.album figure:nth-child(6n+4) { background: var(--t-vert); }
.album figure:nth-child(6n+5) { background: var(--t-bleu); }
.album figure:nth-child(6n+6) { background: var(--t-violet); }
@media (min-width: 700px) { .album { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Boutique ---------- */
.cent-pourcent {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 22px 12px 14px;
  border-radius: 999px; background: #fff; box-shadow: var(--ombre); font-weight: 800; color: var(--nuit);
}
.cent-pourcent strong { font: 700 1.9rem/1 var(--police-titre); background: var(--arc); -webkit-background-clip: text; background-clip: text; color: transparent; }

.noel-bandeau {
  position: relative; display: grid; gap: 18px; align-items: center; overflow: hidden;
  padding: 28px 24px; border-radius: 32px; background: linear-gradient(135deg, #1E2A5A, #3B2F6B);
}
.noel-bandeau h2 { margin: 6px 0 10px; color: #fff; }
.noel-bandeau p { color: #E3E4F3; margin: 0 0 12px; }
.noel-bandeau .surtitre { color: #FFE8A3; background: rgba(255, 255, 255, .1); }
.noel-bandeau__date { font-weight: 800; }
.noel-bandeau__image { width: 150px; height: 150px; justify-self: center; transform-origin: 50% 10%; animation: suspendu 4s ease-in-out infinite alternate; }
@media (min-width: 760px) {
  .noel-bandeau { grid-template-columns: 1fr 220px; padding: 36px 44px; }
  .noel-bandeau__image { width: 200px; height: 200px; }
}

.catalogue__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.catalogue__tete h2 { margin: 0; }
.catalogue__compte { margin: 0; font-weight: 800; color: var(--nuit-doux); }
.filtres { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 8px; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtre {
  flex: none; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 2px solid #E6DCCB;
  background: #fff; color: var(--nuit); font: 700 1rem var(--police-titre); cursor: pointer;
  transition: transform .3s var(--rebond), background-color .25s, border-color .25s, color .25s;
}
.filtre:hover { transform: translateY(-2px); border-color: var(--violet); }
.filtre[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.filtre:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

.produits { display: grid; gap: 22px; margin-top: 18px; }
.produit {
  display: flex; flex-direction: column; border-radius: 30px; background: var(--blanc); box-shadow: var(--ombre);
  transition: transform .45s var(--rebond), box-shadow .4s;
}
.produit[hidden] { display: none; }
.produits.rejoue .produit { animation: carte-arrive .6s var(--rebond) calc(var(--i, 0) * 60ms) both; }
.produit:hover { transform: translateY(-6px); box-shadow: var(--ombre-haute); }
.produit__visuel { position: relative; aspect-ratio: 4 / 3; border-radius: 30px 30px 0 0; overflow: hidden; display: grid; place-items: center; }
.produit:nth-child(6n+1) .produit__visuel { background: var(--t-rouge); }
.produit:nth-child(6n+2) .produit__visuel { background: var(--t-orange); }
.produit:nth-child(6n+3) .produit__visuel { background: var(--t-jaune); }
.produit:nth-child(6n+4) .produit__visuel { background: var(--t-vert); }
.produit:nth-child(6n+5) .produit__visuel { background: var(--t-bleu); }
.produit:nth-child(6n+6) .produit__visuel { background: var(--t-violet); }
.produit__visuel img { width: 72%; height: 92%; object-fit: contain; transition: transform .5s var(--rebond); }
.produit:hover .produit__visuel img { transform: scale(1.07) rotate(-3deg); }
.etiquettes { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette {
  padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--nuit);
  font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}
.etiquette--noel { background: #1E2A5A; color: #FFE8A3; }
.etiquette--perso { background: var(--violet-f); color: #fff; }
.produit__corps { display: grid; gap: 12px; padding: 18px 20px 22px; flex: 1; align-content: start; }
.produit__titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.produit__titre h3 { margin: 0; font-size: 1.25rem; }
.prix { font: 700 1.35rem var(--police-titre); color: var(--violet-f); white-space: nowrap; }
.produit__corps p { margin: 0; color: var(--nuit-doux); }
.produit__corps .produit__couleurs { font-weight: 800; font-size: .92rem; color: var(--nuit); }
.produit__achat { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.produit__achat .bouton { flex: 1 1 auto; justify-content: center; }
@media (min-width: 700px) { .produits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .produits { grid-template-columns: repeat(3, 1fr); } }

.boutique-infos { display: grid; gap: 16px; margin-top: 40px; }
.boutique-infos > div { padding: 20px 22px; border-radius: 24px; background: var(--t-bleu); }
.boutique-infos > div:nth-child(2) { background: var(--t-vert); }
.boutique-infos > div:nth-child(3) { background: var(--t-jaune); }
.boutique-infos h3 { margin: 0 0 6px; font-size: 1.15rem; }
.boutique-infos p { margin: 0; }
@media (min-width: 860px) { .boutique-infos { grid-template-columns: repeat(3, 1fr); } }

/* Fiche détaillée */
.fiche { width: min(560px, calc(100% - 24px)); }
.fiche__corps { display: grid; gap: 14px; }
.fiche__visuel { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 24px; background: var(--t-jaune); }
.fiche__visuel img { width: 60%; height: 90%; object-fit: contain; }
.fiche__description { margin: 0; }
.fiche__prix { margin: 0; font: 700 1.6rem var(--police-titre); color: var(--violet-f); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fiche__infos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding: 16px 18px; border-radius: 20px; background: #fff; }
.fiche__infos dt { font-weight: 800; }
.fiche__infos dd { margin: 0; color: var(--nuit-doux); }
.fiche__notes { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--nuit-doux); font-size: .95rem; }
.fiche__notes .a-confirmer { color: var(--jaune-f); font-weight: 800; }

/* Petit message en bas de l’écran */
.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 350; translate: -50% 0;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 18px; text-align: center;
  background: var(--nuit); color: #fff; font-weight: 800; box-shadow: var(--ombre-haute);
  opacity: 0; transform: translateY(20px) scale(.95); transition: opacity .3s, transform .4s var(--rebond); pointer-events: none;
}
.toast.visible { opacity: 1; transform: translateY(0) scale(1); }

/* Lâcher de ballons (surprise) */
.lacher { position: fixed; inset: 0; z-index: 250; pointer-events: none; overflow: hidden; }
.ballon-volant {
  position: absolute; bottom: -120px; width: 52px; height: 64px;
  border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 8%, transparent 9%), var(--c);
  animation: ballon-monte var(--duree, 7s) cubic-bezier(.4, 0, .6, 1) forwards;
}
.ballon-volant::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 70px; background: rgba(43, 45, 91, .4); }
.secret {
  position: fixed; left: 50%; top: 24%; z-index: 260; translate: -50% 0;
  width: max-content; max-width: min(90vw, 440px); padding: 16px 24px; border-radius: 22px; background: #fff; color: var(--nuit); text-align: center;
  font: 600 1.2rem var(--police-titre); box-shadow: var(--ombre-haute); border: 4px solid var(--jaune);
  animation: secret-entre 4.5s var(--rebond) forwards; pointer-events: none;
}

/* ---------- Apparitions au défilement ----------
   Le contenu reste visible si le JavaScript ne se charge pas (classe .js absente). */
.js .apparait { opacity: 0; }
.js .apparait.visible { opacity: 1; animation: apparition .9s var(--rebond) var(--delai, 0s) both; }
.js .carte.apparait.visible { animation: apparition .9s var(--rebond) var(--delai, 0s) both, tourne 4s linear infinite; }
[data-cascade] > :nth-child(2) { --delai: .1s; }
[data-cascade] > :nth-child(3) { --delai: .2s; }
[data-cascade] > :nth-child(4) { --delai: .3s; }
[data-cascade] > :nth-child(5) { --delai: .4s; }
[data-cascade] > :nth-child(6) { --delai: .5s; }

/* Le bouton « Mettre en pause » fige tous les mouvements en boucle. */
.pause-anim .deco, .pause-anim .deco *, .pause-anim .bouton--arc, .pause-anim .texte-arc, .pause-anim .scene,
.pause-anim .arc-barre::before, .pause-anim .carte, .pause-anim .noel-bandeau__image, .pause-anim .vague-arc path,
.pause-anim .defilant__piste { animation-play-state: paused !important; }

/* Transitions entre les pages (navigateurs récents, site en ligne) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sort .35s ease both; }
::view-transition-new(root) { animation: vt-entre .45s var(--doux) both; }

/* ---------- Mouvements ---------- */
@keyframes apparition { from { opacity: 0; translate: 0 34px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes mot-entre { from { opacity: 0; translate: 0 .6em; rotate: -6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes glisse { to { transform: translateX(-50%); } }
@keyframes glisse-fond { to { background-position: -200% 0; } }
@keyframes tourne { to { --angle: 360deg; } }
@keyframes trace-arc { from { stroke-dashoffset: 100; } }
@keyframes deroule { from { opacity: 0; transform: translateY(-8px); } }
@keyframes carte-arrive { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes suspendu { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes cligne { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(.08); } }
@keyframes papillon { 0%, 100% { transform: none; } 35% { transform: rotate(-6deg) scale(1.08); } 70% { transform: rotate(3deg); } }
@keyframes battement { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(.94); } }
@keyframes respire-nuage { from { transform: scale(1, 1); } to { transform: scale(1.02, .98); } }
@keyframes saute { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-22px) scale(.96, 1.06); } 60% { transform: translateY(0) scale(1.06, .94); } 100% { transform: translateY(0) scale(1); } }
@keyframes rougit { from { opacity: .45; } to { opacity: .8; } }
@keyframes flotte { from { translate: 0 0; rotate: -3deg; } to { translate: 0 -16px; rotate: 3deg; } }
@keyframes derive { from { translate: 0 0; } to { translate: 26px 0; } }
@keyframes scintille { 0%, 100% { opacity: .45; scale: .78; } 50% { opacity: 1; scale: 1; } }
@keyframes nage { from { translate: 0 0; } to { translate: 8vmax 6vmax; } }
@keyframes ondule { from { translate: 0 0; } to { translate: -60px 0; } }
@keyframes bulle-entre { from { opacity: 0; scale: .6; translate: -50% 10px; } to { opacity: 1; scale: 1; translate: -50% 0; } }
@keyframes bulle-sort { to { opacity: 0; scale: .6; } }
@keyframes tic { 0% { transform: translateY(-6px); opacity: .4; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes monte { 0% { opacity: 0; translate: 0 20px; } 25%, 70% { opacity: 1; } 100% { opacity: 0; translate: 10px -80px; } }
@keyframes naissance { 0% { scale: 0; rotate: -180deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes filante { 0% { opacity: 0; translate: 0 0; } 3% { opacity: 1; } 12% { opacity: 0; translate: 150vw 48vw; } 100% { opacity: 0; translate: 150vw 48vw; } }
@keyframes modale-entre { from { opacity: 0; transform: translateY(30px) scale(.94); } }
@keyframes etape-entre { from { opacity: 0; transform: translateX(18px); } }
@keyframes billet-tombe { 0% { opacity: 0; transform: translateY(-40px) rotate(-6deg) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes gigote { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 50% { rotate: 10deg; } 75% { rotate: -6deg; } }
@keyframes ballon-monte {
  0% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(var(--balance, 30px), -60vh) rotate(5deg); }
  100% { transform: translate(0, -125vh) rotate(-3deg); }
}
@keyframes secret-entre { 0% { opacity: 0; scale: .5; } 12% { opacity: 1; scale: 1; } 85% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; } }
@keyframes vt-sort { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(16px); } }

/* « Réduire les animations » demandé par l’appareil : plus aucun mouvement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .apparait { opacity: 1; }
  .bulle { opacity: 1; }
  .micro .note { opacity: .9; }
  .bouton-pause { display: none; }
  @view-transition { navigation: none; }
}

/* Impression du billet */
@media print {
  body > *:not(dialog) { display: none !important; }
  dialog { position: static; box-shadow: none; }
  .modale__tete button, .boutons-etape, .etapes { display: none !important; }
}

/* Fiche produit sur petit téléphone : intitulé au-dessus de la valeur */
@media (max-width: 420px) {
  .fiche__infos { grid-template-columns: 1fr; gap: 2px; }
  .fiche__infos dd { margin-bottom: 8px; }
}

/* Fenêtre « Nous écrire » */
.ecrire { width: min(540px, calc(100% - 24px)); }
.ecrire__corps { display: grid; gap: 14px; }
.ecrire__intro { margin: 0; color: var(--nuit-doux); }
.ecrire textarea { resize: vertical; min-height: 120px; }
.facultatif { font-weight: 600; color: var(--nuit-doux); }
.ecrire__reste { margin: 0; font-size: .88rem; font-weight: 700; color: var(--nuit-doux); }
.ecrire__reste:empty, .champ .erreur:empty { display: none; }
.champ textarea[aria-invalid="true"] { border-color: var(--rouge-f); }
.ecrire__note { margin: 0; font-size: .9rem; color: var(--nuit-doux); text-align: center; }
.lien-copier { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--bleu-f); text-decoration: underline; cursor: pointer; }
.bouton[hidden] { display: none; }

/* Pages d’informations (conditions de vente, confidentialité, mentions légales) */
.page-tete--court { padding-bottom: 24px; }
.legal { max-width: 780px; }
.legal-avertissement {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 24px; padding: 14px 18px;
  border-radius: 18px; background: var(--t-jaune); border: 2px dashed #E9C46A; font-weight: 600;
}
.legal-avertissement svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--jaune-f); }
.legal-sommaire { margin-bottom: 28px; padding: 18px 22px; border-radius: 22px; background: #fff; box-shadow: var(--ombre); }
.legal-sommaire p { margin: 0 0 8px; font: 700 1.05rem var(--police-titre); }
.legal-sommaire ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.legal-bloc { scroll-margin-top: 96px; padding: 4px 0 18px; }
.legal-bloc + .legal-bloc { border-top: 2px solid #F0E4D2; padding-top: 22px; }
.legal-bloc h2 { font-size: 1.4rem; margin-bottom: 10px; }
.legal-bloc p, .legal-bloc li { color: var(--nuit-doux); }
.legal-bloc ul { padding-left: 22px; display: grid; gap: 6px; }
.legal-bloc strong { color: var(--nuit); }
.legal-maj { margin-top: 24px; font-weight: 700; color: var(--nuit-doux); }

/* Vue 360° (pot « hoodie ») : l’objet, puis les couleurs en dessous */
.vue360 { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 40px 10px 10px; }
.vue360__scene {
  position: relative; flex: 1 1 auto; min-height: 0; height: 100%; max-width: 100%; aspect-ratio: 1;
  cursor: grab; touch-action: pan-y; user-select: none; border-radius: 20px;
  filter: drop-shadow(0 14px 14px rgba(43, 45, 91, .18));
}
.vue360.touche .vue360__scene { cursor: grabbing; }
.vue360__calque { position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none; }
.vue360__calque + .vue360__calque { opacity: 0; }
.vue360__scene:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
.vue360.charge .vue360__scene { opacity: .55; transition: opacity .2s; }
.vue360__couleurs { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pastille-couleur {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 1px 4px rgba(43, 45, 91, .3); transition: transform .25s var(--rebond);
}
.pastille-couleur:hover { transform: scale(1.15); }
.pastille-couleur[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nuit); }
.pastille-couleur:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.pastille-couleur[data-couleur="orange"] { background: #FF8A1F; }
.pastille-couleur[data-couleur="bleu"] { background: #3B82F6; }
.pastille-couleur[data-couleur="jaune"] { background: #FFD21F; }
.pastille-couleur[data-couleur="vert"] { background: #8BD32C; }
.pastille-couleur[data-couleur="rouge"] { background: #E8473B; }
.pastille-couleur[data-couleur="violet"] { background: #8B5CF6; }
.pastille-couleur[data-couleur="blanc"] { background: #EDEDE8; }
.etiquette--360 { background: var(--nuit); color: #fff; }
.fiche__visuel--360 { aspect-ratio: 1; }
.vue360--grand { padding-top: 48px; }
.vue360--grand .pastille-couleur { width: 34px; height: 34px; }
.vue360--grand .vue360__couleurs { gap: 10px; padding-bottom: 4px; }

/* Logos des réseaux sociaux dans le bas de page */
.reseaux a { gap: 8px; }
.reseaux a svg { width: 20px; height: 20px; flex: none; transition: transform .3s var(--rebond); }
.reseaux a:hover svg { transform: scale(1.15) rotate(-6deg); }