/* ==========================================================================
   WILO Évènement — feuille de style du site public
   Charte : noir profond, blanc, dégradé bleu (#0763ff → #1aa0ff), bleu doux #77a7da
   ========================================================================== */
:root {
  --noir: #06070a;
  --noir-2: #0d0f15;
  --noir-3: #141824;
  --bord: rgba(255, 255, 255, .08);
  --bord-fort: rgba(255, 255, 255, .16);
  --blanc: #ffffff;
  --texte: #e9edf5;
  --texte-2: #a6afc3;
  --texte-3: #6f788e;
  --bleu: #0763ff;
  --bleu-2: #1aa0ff;
  --bleu-doux: #77a7da;
  --degrade: linear-gradient(100deg, #0a4dff 0%, #0770ff 45%, #1aa0ff 100%);
  --ok: #2fd18a;
  --alerte: #ffb454;
  --erreur: #ff6b6b;
  --rayon: 16px;
  --rayon-s: 10px;
  --ombre: 0 20px 60px rgba(0, 0, 0, .45);
  --police: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--noir); color: var(--texte); font-family: var(--police);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-2); text-decoration: none; }
a:hover { color: #6cc4ff; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; color: var(--blanc); }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.conteneur { width: min(1180px, 100% - 2rem); margin-inline: auto; }
.saut { position: absolute; left: -999px; top: 0; background: var(--bleu); color: #fff; padding: .5rem 1rem; z-index: 100; }
.saut:focus { left: 1rem; }
.ico { vertical-align: -.2em; flex: none; }

/* ---- texte dégradé et petites étiquettes ------------------------------- */
.degrade { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sur-titre {
  display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bleu-doux); margin-bottom: 1rem;
}
.sur-titre::before { content: ""; width: 26px; height: 2px; background: var(--degrade); border-radius: 2px; }
.etiquette { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px; background: rgba(7, 99, 255, .15); color: #8ec3ff; border: 1px solid rgba(26, 160, 255, .25); }
.etiquette-ok { background: rgba(47, 209, 138, .12); color: #7fe9b6; border-color: rgba(47, 209, 138, .3); }
.etiquette-alerte { background: rgba(255, 180, 84, .12); color: #ffd08a; border-color: rgba(255, 180, 84, .3); }
.etiquette-erreur { background: rgba(255, 107, 107, .12); color: #ff9c9c; border-color: rgba(255, 107, 107, .3); }
.etiquette-neutre { background: rgba(255, 255, 255, .06); color: var(--texte-2); border-color: var(--bord); }

/* ---- boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: .95rem; border: 1px solid var(--bord-fort); color: var(--blanc);
  background: rgba(255, 255, 255, .04); cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; line-height: 1.2;
}
.btn:hover { background: rgba(255, 255, 255, .09); color: #fff; transform: translateY(-1px); }
.btn-principal { background: var(--degrade); border-color: transparent; box-shadow: 0 8px 28px rgba(7, 99, 255, .35); }
.btn-principal:hover { box-shadow: 0 12px 36px rgba(7, 99, 255, .5); background: var(--degrade); }
.btn-grand { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-petit { padding: .5rem .95rem; font-size: .84rem; }
.btn-danger { border-color: rgba(255, 107, 107, .4); color: #ff9c9c; }
.btn-danger:hover { background: rgba(255, 107, 107, .12); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-lien { background: none; border: 0; padding: 0; color: var(--bleu-2); font-weight: 600; cursor: pointer; font-family: inherit; }

/* ---- en-tête ------------------------------------------------------------ */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(6, 7, 10, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bord); }
.entete-int { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.marque { display: inline-flex; align-items: center; gap: .7rem; color: #fff; }
.marque img { width: 46px; height: auto; }
.marque-texte { display: flex; flex-direction: column; line-height: 1; }
.marque-texte strong { font-size: 1.35rem; font-weight: 800; letter-spacing: .22em; }
.marque-texte small { font-size: .58rem; letter-spacing: .32em; color: var(--bleu-doux); margin-top: .2rem; }
.nav { display: flex; align-items: center; gap: .2rem; }
.nav > a { padding: .55rem .8rem; border-radius: 999px; color: var(--texte-2); font-weight: 500; font-size: .93rem; }
.nav > a:hover, .nav > a.actif { color: #fff; background: rgba(255, 255, 255, .06); }
.nav .nav-compte, .nav .nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 40px; padding: 0 1.1rem; font-size: .9rem; font-weight: 600; line-height: 1; white-space: nowrap; box-sizing: border-box; }
.nav .nav-compte { margin-left: .4rem; border: 1px solid var(--bord-fort); color: #fff; }
.nav .nav-cta { margin-left: .5rem; color: #fff; border-color: transparent; }
.burger { display: none; background: none; border: 1px solid var(--bord); color: #fff; border-radius: 10px; padding: .45rem; cursor: pointer; }

@media (max-width: 1000px) {
  .burger { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--noir-2); border-bottom: 1px solid var(--bord); padding: .8rem 1rem 1.2rem; gap: .2rem; }
  .nav.ouverte { display: flex; }
  .nav > a { padding: .8rem 1rem; }
  .nav .nav-compte, .nav .nav-cta { margin: .4rem 0 0; justify-content: center; height: 44px; }
}

/* ---- messages flash ----------------------------------------------------- */
.flash { margin: 1rem 0 0; padding: .9rem 1.2rem; border-radius: var(--rayon-s); border: 1px solid; font-weight: 500; }
.flash-ok { background: rgba(47, 209, 138, .1); border-color: rgba(47, 209, 138, .35); color: #9df0c6; }
.flash-info { background: rgba(7, 99, 255, .12); border-color: rgba(26, 160, 255, .35); color: #b6dcff; }
.flash-erreur { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .35); color: #ffb3b3; }
.erreurs { margin: 0 0 1.2rem; padding: 1rem 1.2rem 1rem 2.2rem; border-radius: var(--rayon-s); background: rgba(255, 107, 107, .08); border: 1px solid rgba(255, 107, 107, .3); color: #ffb3b3; }
.erreurs li { margin: .2rem 0; }

/* ---- sections ----------------------------------------------------------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-sombre { background: var(--noir-2); border-block: 1px solid var(--bord); }
.section-tete { max-width: 720px; margin-bottom: 2.6rem; }
.section-tete p { color: var(--texte-2); font-size: 1.08rem; }
.section-tete.centre { margin-inline: auto; text-align: center; }
.section-tete.centre .sur-titre::before { display: none; }

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(6rem, 12vw, 9rem); }
.hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 80% 20%, rgba(7, 99, 255, .28), transparent 60%),
  radial-gradient(40% 40% at 10% 90%, rgba(26, 160, 255, .12), transparent 60%); pointer-events: none; }
.hero-grille { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero h1 { margin-bottom: 1.2rem; }
.hero-texte p { font-size: 1.15rem; color: var(--texte-2); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-logo { position: relative; display: grid; place-items: center; }
.hero-logo img { width: min(100%, 420px); filter: drop-shadow(0 0 60px rgba(7, 99, 255, .45)); animation: flotter 7s ease-in-out infinite; }
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-onde { position: absolute; left: 0; right: 0; bottom: -30px; opacity: .5; z-index: 0; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.hero-onde img { width: 100%; max-height: 160px; object-fit: cover; }
@media (max-width: 860px) {
  .hero-grille { grid-template-columns: 1fr; text-align: center; }
  .hero-texte p { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-logo { order: -1; }
  .hero-logo img { width: min(60%, 260px); }
}

/* ---- chiffres clés ------------------------------------------------------ */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
.chiffre { padding: 1.2rem 1.4rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: rgba(255, 255, 255, .025); }
.chiffre strong { display: block; font-size: 1.7rem; font-weight: 800; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chiffre span { color: var(--texte-2); font-size: .9rem; }
@media (max-width: 800px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }

/* ---- cartes ------------------------------------------------------------- */
.grille { display: grid; gap: 1.3rem; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grille-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grille-3, .grille-2 { grid-template-columns: 1fr; } }

.carte {
  position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.7rem; border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)); border: 1px solid var(--bord);
  transition: transform .2s, border-color .2s, box-shadow .2s; color: var(--texte);
}
a.carte:hover { transform: translateY(-4px); border-color: rgba(26, 160, 255, .45); box-shadow: 0 18px 50px rgba(7, 99, 255, .18); color: var(--texte); }
.carte-icone { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: rgba(7, 99, 255, .14); color: #6cc4ff; border: 1px solid rgba(26, 160, 255, .25); }
.carte h3 { margin: 0; }
.carte p { margin: 0; color: var(--texte-2); font-size: .95rem; }
.carte .lien-fleche { margin-top: auto; padding-top: .6rem; font-weight: 600; color: var(--bleu-2); display: inline-flex; align-items: center; gap: .4rem; }
.carte-image { padding: 0; overflow: hidden; }
.carte-image img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.carte-image .carte-corps { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; }

/* ---- étapes ------------------------------------------------------------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: etape; }
.etape { position: relative; padding: 1.6rem 1.5rem 1.5rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--bord); }
.etape::before { counter-increment: etape; content: counter(etape, decimal-leading-zero); display: block; font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: .8rem; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.etape h3 { font-size: 1.05rem; }
.etape p { color: var(--texte-2); font-size: .93rem; margin: 0; }
@media (max-width: 900px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .etapes { grid-template-columns: 1fr; } }

/* ---- formules ----------------------------------------------------------- */
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 1.3rem; align-items: stretch; }
.formule { position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.6rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--bord); }
.formule.populaire { border-color: rgba(26, 160, 255, .55); box-shadow: 0 0 0 1px rgba(26, 160, 255, .25), 0 20px 50px rgba(7, 99, 255, .2); }
.formule .badge { position: absolute; top: -.75rem; left: 1.4rem; background: var(--degrade); color: #fff; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; }
.formule h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.formule .prix { font-size: 2rem; font-weight: 800; color: #fff; margin: .4rem 0 .2rem; }
.formule .prix small { font-size: .85rem; font-weight: 500; color: var(--texte-2); }
.formule .duree { color: var(--bleu-doux); font-size: .85rem; font-weight: 600; margin-bottom: .9rem; }
.formule p { color: var(--texte-2); font-size: .92rem; flex: 1; }
.formule .btn { margin-top: 1rem; }

/* ---- galerie ------------------------------------------------------------ */
.galerie-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.galerie-grille a, .galerie-grille figure { margin: 0; border-radius: var(--rayon-s); overflow: hidden; position: relative; border: 1px solid var(--bord); background: var(--noir-3); }
.galerie-grille img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s; }
.galerie-grille a:hover img { transform: scale(1.04); }
.galerie-grille figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .9rem; font-size: .82rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; }
.galerie-vide { padding: 3rem; text-align: center; border: 1px dashed var(--bord-fort); border-radius: var(--rayon); color: var(--texte-2); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.filtres button { font-family: inherit; font-size: .85rem; font-weight: 600; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--bord-fort); background: none; color: var(--texte-2); cursor: pointer; }
.filtres button.actif { background: var(--degrade); color: #fff; border-color: transparent; }
@media (max-width: 800px) { .galerie-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .galerie-grille { grid-template-columns: 1fr; } }

/* visionneuse */
.visionneuse { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); display: none; place-items: center; z-index: 100; padding: 2rem; }
.visionneuse.ouverte { display: grid; }
.visionneuse img { max-width: 100%; max-height: 85vh; border-radius: var(--rayon-s); box-shadow: var(--ombre); }
.visionneuse button { position: absolute; top: 1rem; right: 1rem; background: rgba(255, 255, 255, .1); border: 0; color: #fff; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: grid; place-items: center; }
.visionneuse figcaption { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: var(--texte-2); }

/* ---- témoignages -------------------------------------------------------- */
.temoignage { padding: 1.8rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--bord); display: flex; flex-direction: column; gap: .8rem; }
.temoignage .etoiles { color: #ffc857; letter-spacing: .1em; font-size: .9rem; }
.temoignage blockquote { margin: 0; font-size: 1rem; color: var(--texte); font-style: italic; }
.temoignage footer { color: var(--texte-2); font-size: .88rem; }
.temoignage footer strong { color: #fff; }

/* ---- bandeau appel à l'action ------------------------------------------ */
.cta { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; background: var(--noir-3); border: 1px solid rgba(26, 160, 255, .3); }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 120%, rgba(7, 99, 255, .45), transparent 70%); pointer-events: none; }
.cta > * { position: relative; }
.cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.cta p { color: var(--texte-2); max-width: 600px; margin-inline: auto; }
.cta .hero-actions { justify-content: center; }

/* ---- pages de contenu -------------------------------------------------- */
.page-tete { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--bord); background: radial-gradient(70% 60% at 90% 0%, rgba(7, 99, 255, .18), transparent 60%); }
.page-tete p { color: var(--texte-2); font-size: 1.12rem; max-width: 720px; margin: 0; }
.fil { font-size: .82rem; color: var(--texte-3); margin-bottom: 1rem; }
.fil a { color: var(--texte-2); }
.prose { max-width: 760px; font-size: 1.04rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .35rem 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--rayon-s); margin: 1rem 0; }
.prose blockquote { margin: 1.4rem 0; padding: .4rem 1.2rem; border-left: 3px solid var(--bleu); color: var(--texte-2); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } }
.encart { position: sticky; top: 90px; padding: 1.6rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--bord); }
.encart h3 { font-size: 1.05rem; }
.points { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .6rem; }
.points li { display: flex; gap: .6rem; align-items: flex-start; color: var(--texte-2); font-size: .95rem; }
.points li .ico { color: var(--ok); margin-top: .15rem; }
.image-tete { border-radius: var(--rayon); overflow: hidden; margin-bottom: 2rem; border: 1px solid var(--bord); }
.image-tete img { width: 100%; max-height: 460px; object-fit: cover; }

/* ---- formulaires -------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.champ label, .legende { font-size: .86rem; font-weight: 600; color: var(--texte-2); }
.champ label .req { color: var(--bleu-2); }
.aide { font-size: .8rem; color: var(--texte-3); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input[type="search"], select, textarea {
  width: 100%; font-family: inherit; font-size: .98rem; color: #fff; padding: .78rem .95rem; border-radius: var(--rayon-s);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--bord-fort); outline: none; transition: border-color .15s, box-shadow .15s; color-scheme: dark;
}
input:focus, select:focus, textarea:focus { border-color: var(--bleu-2); box-shadow: 0 0 0 3px rgba(26, 160, 255, .2); }
textarea { min-height: 120px; resize: vertical; }
select option { background: var(--noir-3); }
.ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.case { display: flex; align-items: flex-start; gap: .65rem; font-size: .93rem; color: var(--texte-2); cursor: pointer; }
.case input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--bleu); flex: none; }
.case a { text-decoration: underline; }
.honeypot { position: absolute; left: -9999px; }
.formulaire-carte { padding: 2rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--bord); }
.formulaire-etroit { max-width: 460px; margin: 3rem auto; }
.formulaire-etroit .formulaire-carte { padding: 2.2rem; }
.formulaire-etroit h1 { font-size: 1.7rem; text-align: center; }
.formulaire-etroit .logo-centre { display: block; width: 90px; margin: 0 auto 1.2rem; }
.liens-secondaires { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-size: .88rem; }

/* ---- devis en ligne ----------------------------------------------------- */
.devis-grille { display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start; }
@media (max-width: 960px) { .devis-grille { grid-template-columns: 1fr; } .devis-recap { position: static !important; } }
.devis-etapes { display: flex; gap: .4rem; margin-bottom: 2rem; flex-wrap: wrap; }
.devis-etapes button { font-family: inherit; font-size: .84rem; font-weight: 600; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--bord); background: none; color: var(--texte-3); cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.devis-etapes button .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); font-size: .75rem; }
.devis-etapes button.actif { color: #fff; border-color: rgba(26, 160, 255, .5); background: rgba(7, 99, 255, .12); }
.devis-etapes button.actif .num, .devis-etapes button.fait .num { background: var(--degrade); color: #fff; }
.devis-etapes button.fait { color: var(--texte-2); }
.panneau { display: none; }
.panneau.actif { display: block; animation: apparaitre .25s ease; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panneau h2 { font-size: 1.5rem; margin-bottom: .3rem; }
.panneau > p.intro { color: var(--texte-2); margin-bottom: 1.6rem; }
.choix-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 600px) { .choix-types { grid-template-columns: repeat(2, 1fr); } }
.choix-type { position: relative; }
.choix-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix-type span { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.3rem .8rem; text-align: center; border-radius: var(--rayon-s); border: 1px solid var(--bord); background: rgba(255, 255, 255, .02); font-weight: 600; font-size: .9rem; color: var(--texte-2); transition: .15s; }
.choix-type span .ico { color: var(--bleu-doux); }
.choix-type input:checked + span { border-color: var(--bleu-2); background: rgba(7, 99, 255, .14); color: #fff; box-shadow: 0 0 0 1px rgba(26, 160, 255, .5) inset; }
.choix-type input:checked + span .ico { color: #6cc4ff; }
.choix-type input:focus-visible + span { outline: 2px solid var(--bleu-2); }
.choix-formules { display: grid; gap: .9rem; }
.choix-formule { position: relative; }
.choix-formule input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix-formule > div { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.2rem; padding: 1.2rem 1.4rem; border-radius: var(--rayon-s); border: 1px solid var(--bord); transition: .15s; }
.choix-formule input:checked + div { border-color: var(--bleu-2); background: rgba(7, 99, 255, .12); box-shadow: 0 0 0 1px rgba(26, 160, 255, .5) inset; }
.choix-formule strong { color: #fff; font-size: 1.05rem; }
.choix-formule .prix { grid-row: span 2; align-self: center; text-align: right; font-weight: 800; font-size: 1.3rem; color: #fff; }
.choix-formule .prix small { display: block; font-size: .75rem; font-weight: 500; color: var(--texte-3); }
.choix-formule p { grid-column: 1; margin: 0; color: var(--texte-2); font-size: .9rem; }
.choix-formule .badge { font-size: .68rem; color: #8ec3ff; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.choix-formule.masque, .option.masque { display: none; }
.options-cat { margin: 1.4rem 0 .6rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-doux); font-weight: 700; }
.option { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .9rem 1rem; border-radius: var(--rayon-s); border: 1px solid var(--bord); margin-bottom: .6rem; }
.option input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--bleu); }
.option strong { color: #fff; display: block; font-size: .95rem; }
.option small { color: var(--texte-2); font-size: .84rem; }
.option .prix { font-weight: 700; color: #fff; white-space: nowrap; text-align: right; }
.option .prix small { display: block; color: var(--texte-3); font-size: .72rem; }
.option .quantite { display: none; align-items: center; gap: .3rem; }
.option.choisie .quantite { display: inline-flex; }
.option .quantite input { width: 62px; padding: .4rem; text-align: center; }
.devis-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.devis-recap { position: sticky; top: 90px; padding: 1.6rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid rgba(26, 160, 255, .3); box-shadow: 0 20px 60px rgba(7, 99, 255, .12); }
.devis-recap h3 { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; }
.recap-lignes { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; font-size: .9rem; }
.recap-lignes li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--bord); padding-bottom: .5rem; }
.recap-lignes li span:first-child { color: var(--texte-2); }
.recap-lignes li small { display: block; color: var(--texte-3); font-size: .78rem; }
.recap-lignes li span:last-child { font-weight: 600; white-space: nowrap; }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .6rem; }
.recap-total strong { font-size: 1.9rem; font-weight: 800; }
.recap-sous { display: flex; justify-content: space-between; color: var(--texte-2); font-size: .86rem; }
.recap-acompte { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--rayon-s); background: rgba(7, 99, 255, .12); font-size: .88rem; color: #b6dcff; }
.recap-erreurs { margin-top: .8rem; font-size: .84rem; color: #ffb3b3; }
.recap-vide { color: var(--texte-3); font-size: .9rem; }

/* ---- contact ------------------------------------------------------------ */
.contact-grille { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; }
@media (max-width: 860px) { .contact-grille { grid-template-columns: 1fr; } }
.contact-infos ul { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; }
.contact-infos li { display: flex; gap: .8rem; align-items: flex-start; color: var(--texte-2); }
.contact-infos li .ico { color: var(--bleu-2); margin-top: .2rem; }
.contact-infos li a { color: #fff; }

/* ---- pied de page ------------------------------------------------------- */
.pied { position: relative; margin-top: 4rem; border-top: 1px solid var(--bord); background: var(--noir-2); overflow: hidden; }
.onde-deco { position: absolute; left: 0; right: 0; top: 0; opacity: .25; pointer-events: none; mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent); }
.onde-deco img { width: 100%; max-height: 120px; object-fit: cover; }
.pied-grille { position: relative; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 2.5rem; padding: 3.5rem 0 2rem; }
.pied h3 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bleu-doux); margin-bottom: 1rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pied a { color: var(--texte-2); font-size: .93rem; }
.pied a:hover { color: #fff; }
.pied-logo { width: 150px; }
.pied-slogan { color: var(--texte-3); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 1rem; }
.pied-contact li { display: flex; align-items: center; gap: .5rem; color: var(--texte-2); font-size: .93rem; }
.reseaux { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.reseaux a { padding: .35rem .8rem; border: 1px solid var(--bord); border-radius: 999px; font-size: .82rem; }
.pied-bas { position: relative; padding: 1.2rem 0 1.6rem; border-top: 1px solid var(--bord); color: var(--texte-3); font-size: .8rem; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied-grille { grid-template-columns: 1fr; } }

/* ---- tableaux (espace client) ------------------------------------------ */
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); font-weight: 700; }
.tableau td.num, .tableau th.num { text-align: right; white-space: nowrap; }
.tableau tr:hover td { background: rgba(255, 255, 255, .02); }
.tableau a.fort { color: #fff; font-weight: 600; }
.defilable { overflow-x: auto; }

/* ---- erreur ------------------------------------------------------------- */
.page-erreur { text-align: center; padding: 6rem 0; }
.page-erreur .code { font-size: 6rem; font-weight: 800; line-height: 1; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   Habillage photo (noir & blanc)
   ========================================================================== */
.hero-photo { position: relative; min-height: clamp(560px, 82vh, 860px); display: flex; align-items: center; padding: clamp(4rem, 9vw, 7rem) 0; overflow: hidden; }
.hero-photo .hero-fond { position: absolute; inset: 0; background: url("../img/photos/hero.jpg") center 30% / cover no-repeat; filter: grayscale(1) contrast(1.05); transform: scale(1.03); }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(6, 7, 10, .96) 0%, rgba(6, 7, 10, .82) 38%, rgba(6, 7, 10, .35) 70%, rgba(6, 7, 10, .55) 100%),
  linear-gradient(180deg, rgba(6, 7, 10, .2), rgba(6, 7, 10, 0) 30%, rgba(6, 7, 10, .9) 100%); }
.hero-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(50% 60% at 75% 45%, rgba(7, 99, 255, .22), transparent 70%); mix-blend-mode: screen; pointer-events: none; }
.hero-photo .conteneur { position: relative; z-index: 2; }
.hero-photo .hero-texte { max-width: 640px; }
.hero-photo h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.hero-photo .hero-texte p { font-size: 1.18rem; }
.hero-logo-flottant { position: absolute; right: clamp(1rem, 5vw, 5rem); bottom: 2.5rem; z-index: 2; width: clamp(90px, 12vw, 150px); opacity: .9; filter: drop-shadow(0 0 30px rgba(7, 99, 255, .5)); }
.hero-photo .hero-onde { z-index: 2; opacity: .6; }
@media (max-width: 860px) {
  .hero-photo { min-height: 0; text-align: left; }
  .hero-photo::before { background: linear-gradient(180deg, rgba(6, 7, 10, .35), rgba(6, 7, 10, .8) 55%, rgba(6, 7, 10, .98)); }
  .hero-photo .hero-texte p { margin-inline: 0; }
  .hero-photo .hero-fond { background-position: 70% 30%; }
  .hero-logo-flottant { display: none; }
  .hero-photo .hero-actions { justify-content: flex-start; }
}

/* bandeau photo plein écran avec citation */
.bandeau-photo { position: relative; padding: clamp(5rem, 12vw, 9rem) 0; background: url("../img/photos/ambiance-large.jpg") center / cover no-repeat; overflow: hidden; }
.bandeau-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 10, .75), rgba(6, 7, 10, .35) 50%, rgba(6, 7, 10, .8)); }
/* halo noir en vignette : le centre reste lisible, les bords s'enfoncent dans le noir → profondeur */
.bandeau-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at 50% 50%, rgba(6, 7, 10, 0) 0%, rgba(6, 7, 10, .35) 55%, rgba(6, 7, 10, .92) 100%);
  box-shadow: inset 0 0 140px 40px rgba(0, 0, 0, .85), inset 0 -60px 80px rgba(6, 7, 10, .9), inset 0 60px 80px rgba(6, 7, 10, .9); }
.bandeau-photo .conteneur { position: relative; text-align: center; max-width: 820px; }
.bandeau-photo blockquote { margin: 0; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.3; color: #fff; }
.bandeau-photo blockquote span { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bandeau-photo p { margin: 1.2rem 0 0; color: #d6dceb; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.bandeau-photo blockquote { text-shadow: 0 4px 24px rgba(0, 0, 0, .8); }

/* à propos avec portrait */
.apropos { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.apropos-photo { position: relative; }
.apropos-photo img { border-radius: var(--rayon); aspect-ratio: 3/4; object-fit: cover; width: 100%; filter: grayscale(1); box-shadow: var(--ombre); }
.apropos-photo::before { content: ""; position: absolute; inset: -14px auto auto -14px; width: 60%; height: 60%; border: 2px solid var(--bleu); border-radius: var(--rayon); z-index: -1; opacity: .7; }
.apropos-photo::after { content: ""; position: absolute; right: -14px; bottom: -14px; width: 55%; height: 45%; background: var(--degrade); border-radius: var(--rayon); z-index: -1; opacity: .45; filter: blur(2px); }
.apropos-texte p { color: var(--texte-2); font-size: 1.05rem; }
.apropos-liste { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .7rem; }
.apropos-liste li { display: flex; gap: .7rem; align-items: flex-start; }
.apropos-liste li .ico { color: var(--bleu-2); margin-top: .2rem; }
.apropos-liste li strong { color: #fff; }
@media (max-width: 860px) { .apropos { grid-template-columns: 1fr; } .apropos-photo { max-width: 380px; margin: 0 auto 1rem; } }

/* cartes de prestation illustrées */
.carte-image img { filter: grayscale(1) contrast(1.05); transition: transform .5s, filter .4s; }
a.carte-image:hover img { transform: scale(1.04); filter: grayscale(.85) contrast(1.05); }
.carte-image .carte-icone { position: absolute; top: 1rem; left: 1rem; width: 44px; height: 44px; background: rgba(6, 7, 10, .7); backdrop-filter: blur(6px); }
.carte-image { position: relative; }
.carte-image .carte-visuel { position: relative; overflow: hidden; }
.carte-image .carte-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--noir-3)); }

/* en-tête de page avec photo */
.page-tete-photo { position: relative; overflow: hidden; }
.page-tete-photo .page-fond { position: absolute; inset: 0; background-size: cover; background-position: center 40%; filter: grayscale(1); opacity: .42; }
.page-tete-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6, 7, 10, .97) 0%, rgba(6, 7, 10, .85) 45%, rgba(6, 7, 10, .45)), linear-gradient(180deg, rgba(6, 7, 10, .3), rgba(6, 7, 10, .97)); }
.page-tete-photo h1, .page-tete-photo p { text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.page-tete-photo .conteneur { position: relative; z-index: 2; }
.page-tete-photo { padding: clamp(4rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); }

/* galerie : mosaïque et noir & blanc */
.galerie-grille { grid-auto-flow: dense; }
.galerie-grille a.portrait { grid-row: span 2; }
.galerie-grille a.portrait img { aspect-ratio: auto; height: 100%; }
.galerie-grille img { filter: grayscale(1); }
.galerie-grille a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(6, 7, 10, .7)); opacity: 0; transition: opacity .3s; }
.galerie-grille a:hover::after { opacity: 1; }
.galerie-grille a figcaption { transform: translateY(6px); opacity: 0; transition: .3s; z-index: 1; }
.galerie-grille a:hover figcaption { transform: none; opacity: 1; }
.image-tete img { filter: grayscale(1); }

/* bandeau CTA final sur photo console */
.cta-photo { background: url("../img/photos/ambiance-large.jpg") center / cover no-repeat; }
.cta-photo::before { background: linear-gradient(180deg, rgba(6, 7, 10, .82), rgba(6, 7, 10, .9)), radial-gradient(60% 80% at 50% 120%, rgba(7, 99, 255, .5), transparent 70%); }

/* ---- lyres : faisceaux animés du hero ---------------------------------- */
.hero { --lyre: 120, 190, 255; --lyre-clair: 160, 210, 255; }
.hero-lyres { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lyre { position: absolute; top: -6px; width: 0; height: 0; }
.lyre .tete { position: absolute; left: -5px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(var(--lyre-clair), .7), 0 0 34px 10px rgba(var(--lyre), .55); transition: box-shadow .4s; }
.lyre .faisceau { position: absolute; left: 0; top: 0; width: 440px; height: 95vh; margin-left: -220px; transform-origin: 50% 0;
  background: conic-gradient(from 171deg at 50% 0%, transparent 0deg, rgba(var(--lyre), .55) 5deg, rgba(var(--lyre-clair), .72) 9deg, rgba(var(--lyre), .55) 13deg, transparent 18deg);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55) 45%, transparent 88%); -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55) 45%, transparent 88%);
  filter: blur(10px); mix-blend-mode: screen; opacity: .75; will-change: transform; }
.lyre-1 { left: 10%; } .lyre-1 .faisceau { animation: balayage-a 8.5s ease-in-out infinite, pulsation 3.1s ease-in-out infinite; }
.lyre-2 { left: 34%; } .lyre-2 .faisceau { animation: balayage-b 11s ease-in-out infinite -3s, pulsation 2.7s ease-in-out infinite .6s; }
.lyre-3 { left: 64%; } .lyre-3 .faisceau { animation: balayage-c 9.5s ease-in-out infinite -6s, pulsation 3.6s ease-in-out infinite 1.1s; }
.lyre-4 { left: 90%; } .lyre-4 .faisceau { animation: balayage-b 7.8s ease-in-out infinite reverse -1.5s, pulsation 2.9s ease-in-out infinite .3s; }
@keyframes balayage-a { 0% { transform: rotate(-30deg); } 50% { transform: rotate(14deg); } 100% { transform: rotate(-30deg); } }
@keyframes balayage-b { 0% { transform: rotate(22deg); } 40% { transform: rotate(-8deg); } 70% { transform: rotate(-26deg); } 100% { transform: rotate(22deg); } }
@keyframes balayage-c { 0% { transform: rotate(6deg); } 30% { transform: rotate(-20deg); } 60% { transform: rotate(18deg); } 100% { transform: rotate(6deg); } }
@keyframes pulsation { 0%, 100% { opacity: .75; } 50% { opacity: .5; } }
.hero-brume { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(80% 50% at 50% 0%, rgba(var(--lyre), .14), transparent 70%); transition: background .4s; animation: pulsation 6s ease-in-out infinite; }
@media (max-width: 860px) { .lyre-2, .lyre-3 { display: none; } .lyre .faisceau { width: 170px; margin-left: -85px; } }
@media (prefers-reduced-motion: reduce) { .lyre .faisceau, .hero-brume, .hero-logo img { animation: none; } .lyre-1 .faisceau { transform: rotate(-16deg); } .lyre-2 .faisceau { transform: rotate(6deg); } .lyre-3 .faisceau { transform: rotate(-5deg); } .lyre-4 .faisceau { transform: rotate(18deg); } }
/* ---- carte de contact (Leaflet) ---------------------------------------- */
.contact-carte { margin-top: 1.5rem; }
.contact-carte h3 { font-size: 1rem; margin: 0 0 .6rem; color: #fff; }
.carte { height: 320px; border-radius: var(--rayon); border: 1px solid var(--bord); overflow: hidden; background: var(--noir-3); }
.carte .leaflet-tile-pane { filter: invert(1) hue-rotate(190deg) brightness(.7) contrast(1.05) saturate(.35); }
.carte .leaflet-control-attribution { background: rgba(6, 7, 10, .7); color: var(--texte-3); font-size: 10px; }
.carte .leaflet-control-attribution a { color: var(--texte-2); }
.carte .leaflet-control-zoom a { background: var(--noir-3); color: #fff; border-color: var(--bord-fort); }
.carte .leaflet-popup-content-wrapper, .carte .leaflet-popup-tip { background: var(--noir-3); color: var(--texte); box-shadow: var(--ombre); }
.carte .leaflet-popup-content { margin: .8rem 1rem; font: .9rem/1.4 var(--police); }
.marqueur-wilo { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(26, 160, 255, .45), 0 0 24px 6px rgba(7, 99, 255, .8); animation: pulse-marqueur 2.4s ease-out infinite; }
@keyframes pulse-marqueur { 0% { box-shadow: 0 0 0 4px rgba(26, 160, 255, .5), 0 0 24px 6px rgba(7, 99, 255, .8); } 100% { box-shadow: 0 0 0 18px rgba(26, 160, 255, 0), 0 0 24px 6px rgba(7, 99, 255, .8); } }
.carte-legende { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .85rem; color: var(--texte-2); }
.carte-legende i { width: 12px; height: 12px; border-radius: 50%; background: rgba(26, 160, 255, .35); border: 2px solid var(--bleu-2); }

/* ---- compte à rebours (espace client) ---------------------------------- */
.rebours { position: relative; overflow: hidden; border-radius: var(--rayon); padding: 1.8rem; background: var(--noir-3); border: 1px solid rgba(26, 160, 255, .35); margin-bottom: 1.5rem; }
.rebours::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 90% 0%, rgba(7, 99, 255, .35), transparent 70%); pointer-events: none; }
.rebours > * { position: relative; }
.rebours .sur-titre { display: block; margin-bottom: .3rem; }
.rebours h2 { margin: 0 0 1.2rem; font-size: 1.25rem; }
.rebours-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; max-width: 520px; }
.rebours-chiffres div { text-align: center; padding: .9rem .4rem; border-radius: var(--rayon-s); background: rgba(6, 7, 10, .6); border: 1px solid var(--bord); }
.rebours-chiffres strong { display: block; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.rebours-chiffres small { display: block; margin-top: .35rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.rebours-jourj { font-size: 1.4rem; font-weight: 800; color: #fff; }
.rebours .rebours-detail { margin-top: 1rem; color: var(--texte-2); font-size: .9rem; }

/* ---- bandeau d'avis défilant ------------------------------------------- */
.avis-bandeau { position: relative; overflow: hidden; padding: .5rem 0 1rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.avis-piste { display: flex; gap: 1.2rem; width: max-content; animation: defiler var(--duree, 60s) linear infinite; }
.avis-bandeau:hover .avis-piste, .avis-bandeau:focus-within .avis-piste { animation-play-state: paused; }
.avis-piste .temoignage { width: min(340px, 78vw); flex: 0 0 auto; }
.avis-piste .temoignage blockquote { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .avis-piste { animation: none; flex-wrap: wrap; width: auto; } .avis-piste [aria-hidden="true"] { display: none; } .avis-bandeau { mask-image: none; -webkit-mask-image: none; } }

/* ---- étincelle qui fait le tour du cadre CTA --------------------------- */
.avec-etincelle { position: relative; overflow: hidden; }
.cta .etincelle, .avec-etincelle .etincelle { position: absolute; inset: 0; border-radius: inherit; padding: 3px; pointer-events: none; z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.cta .etincelle::before, .avec-etincelle .etincelle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 72%, rgba(26, 160, 255, .4) 86%, rgba(120, 200, 255, .95) 95%, #fff 98.5%, transparent 100%);
  animation: tour-cadre 7s linear infinite; }
.cta .etincelle::after, .avec-etincelle .etincelle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 97%, rgba(255, 255, 255, .9) 98.6%, transparent 100%); filter: blur(6px); animation: tour-cadre 7s linear infinite; }
.cta > :not(.etincelle), .avec-etincelle > :not(.etincelle) { position: relative; z-index: 2; }
@keyframes tour-cadre { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cta .etincelle, .avec-etincelle .etincelle { display: none; } }

/* ---- bande de séparation noir profond / stries bleu-aluminium ---------- */
.separation { position: relative; height: 42px; overflow: hidden; border-top: 1px solid rgba(119, 167, 218, .32); border-bottom: 1px solid rgba(119, 167, 218, .32);
  background:
    linear-gradient(90deg, #030408 0%, rgba(3, 4, 8, 0) 18%, rgba(3, 4, 8, 0) 82%, #030408 100%),
    repeating-linear-gradient(180deg, rgba(160, 190, 220, 0) 0 3px, rgba(160, 190, 220, .22) 3px 4px),
    linear-gradient(180deg, #020306, #0a0e18 50%, #020306);
  box-shadow: inset 0 0 50px rgba(7, 99, 255, .12); }
.separation::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(190, 215, 240, 0) 0 22px, rgba(190, 215, 240, .11) 22px 24px); }
.separation::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 32%, rgba(200, 225, 250, .14) 50%, transparent 68%); }
.pied .separation { margin-top: -1px; }
.contact-infos .tel-contact { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.contact-infos li em { display: block; margin-top: .3rem; font-style: normal; color: var(--texte-2); font-size: .92rem; }

/* ---- annuaire des salles (espace client) ------------------------------- */
.salles-filtres { align-items: end; }
.salles-liste { display: grid; gap: 1rem; }
.salle-carte { padding: 1.4rem 1.6rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--bord); }
.salle-carte header h2 { font-size: 1.15rem; margin: .5rem 0 .3rem; }
.salle-carte .salle-adresse { display: flex; align-items: center; gap: .4rem; color: var(--texte-2); font-size: .92rem; }
.salle-carte .salle-adresse .ico { color: var(--bleu-2); }
.salle-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 1rem 0; }
.salle-infos small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); margin-bottom: .15rem; }
.salle-infos a { color: #fff; }
.salle-texte { margin: .4rem 0; color: var(--texte-2); font-size: .92rem; }
.salle-texte.muet { color: var(--texte-3); font-style: italic; }
.salle-carte footer { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.salles-source { margin-top: 2rem; font-size: .8rem; color: var(--texte-3); }
.salle-choix { border-color: rgba(26, 160, 255, .35); background: rgba(7, 99, 255, .06); }
.salle-choix .aide { color: var(--texte-2); font-size: .9rem; margin: -.4rem 0 1rem; }
input.rempli { box-shadow: 0 0 0 3px rgba(26, 160, 255, .45); transition: box-shadow .4s; }

/* ---- bandeau des marques (matériel) ------------------------------------ */
.marques { padding: 0 0 2.5rem; }
.marques .conteneur { text-align: center; margin-bottom: .6rem; }
.marques-bandeau { overflow: hidden; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marques-piste { display: flex; align-items: center; width: max-content; animation: defiler var(--duree, 24s) linear infinite; }
.marques-bandeau:hover .marques-piste { animation-play-state: paused; }
.marque-item { flex: 0 0 auto; padding: 1.1rem 3.2rem; font-family: var(--police); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 237, 245, .55); white-space: nowrap; position: relative; transition: color .3s; }
.marque-item::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu-2); transform: translateY(-50%); opacity: .6; }
.marque-item:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .marques-piste { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .marques-bandeau { mask-image: none; -webkit-mask-image: none; } }

/* ---- FAQ --------------------------------------------------------------- */
.faq { max-width: 860px; }
.faq-item { border: 1px solid var(--bord); border-radius: var(--rayon-s); background: var(--noir-3); margin-bottom: .7rem; overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 3.2rem 1.1rem 1.4rem; font-weight: 700; color: #fff; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: absolute; right: 1.2rem; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 50%; border: 1px solid var(--bord-fort); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--bleu-2); transform: translate(-50%, -50%); transition: transform .25s; }
.faq-plus::before { width: 10px; height: 2px; } .faq-plus::after { width: 2px; height: 10px; }
.faq-item[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary { color: var(--bleu-2); }
.faq-reponse { padding: 0 1.4rem 1.2rem; color: var(--texte-2); }
.faq-reponse p { margin: 0 0 .7rem; }

/* ---- disponibilités ---------------------------------------------------- */
.bloc-clair { padding: 1.4rem 1.6rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid rgba(26, 160, 255, .3); margin-bottom: 1.5rem; }
.dispo-resultat { min-height: 1.4em; font-weight: 600; }
.dispo-resultat.ok { color: var(--ok); } .dispo-resultat.ko { color: var(--alerte); }
.dispo-legende { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 0 0 1.2rem; color: var(--texte-2); font-size: .9rem; }
.dispo-legende i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: .4rem; border: 1px solid var(--bord-fort); }
.dispo-legende i.libre { background: var(--noir-3); } .dispo-legende i.reserve { background: var(--bleu); border-color: var(--bleu-2); } .dispo-legende i.passe { background: transparent; opacity: .35; }
.calendriers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.calendrier { padding: 1rem 1.1rem 1.2rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--bord); }
.calendrier h2 { font-size: 1rem; margin: 0 0 .7rem; color: #fff; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-entete { font-size: .7rem; text-align: center; color: var(--texte-3); letter-spacing: .08em; padding-bottom: .2rem; }
.cal-jour { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font-size: .85rem; border: 1px solid var(--bord); color: var(--texte); }
.cal-jour.we { color: #fff; font-weight: 600; }
.cal-jour.passe { opacity: .3; border-color: transparent; }
.cal-jour.reserve, .cal-jour.bloque { background: var(--bleu); border-color: var(--bleu-2); color: #fff; box-shadow: 0 0 12px rgba(7, 99, 255, .5); }
.cal-jour.auj { outline: 2px solid var(--bleu-2); outline-offset: 1px; }
.devis-dispo { margin: .3rem 0 .8rem; font-size: .9rem; font-weight: 600; min-height: 1.2em; }
.devis-dispo.ok { color: var(--ok); } .devis-dispo.ko { color: var(--alerte); }

/* ---- notation par étoiles (avis) --------------------------------------- */
.notation { display: inline-flex; flex-direction: row-reverse; gap: .2rem; font-size: 2rem; }
.notation input { position: absolute; opacity: 0; width: 0; height: 0; }
.notation label { cursor: pointer; color: rgba(255, 200, 87, .25); transition: color .15s, transform .15s; }
.notation label:hover, .notation label:hover ~ label, .notation input:checked ~ label { color: #ffc857; }
.notation label:hover { transform: scale(1.15); }

/* ---- marques : logo + éclair au survol ----------------------------------- */
.marque-item { display: inline-flex; align-items: center; gap: .8rem; cursor: default; }
.marque-logo { height: 32px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1) opacity(.8); transition: filter .25s, transform .25s; }
.marque-logo-hk-audio { height: 40px; border-radius: 6px; filter: opacity(.85); }
.marque-item:hover .marque-logo { filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 8px rgba(160, 205, 255, .9)); transform: scale(1.06); }
.marque-item:hover .marque-logo-hk-audio { filter: opacity(1) drop-shadow(0 0 8px rgba(160, 205, 255, .9)); }
.marque-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--bord-fort); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); font-style: normal; font-weight: 800; font-size: .95rem; color: var(--texte-2); letter-spacing: 0; }
.marque-item::before { content: ""; position: absolute; left: -20%; top: -30%; width: 40%; height: 160%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .95) 50%, rgba(160, 205, 255, .8) 55%, transparent 65%); transform: skewX(-20deg) translateX(-120%); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.marque-item:hover { color: #fff; text-shadow: 0 0 18px rgba(160, 205, 255, .9); }
.marque-item:hover .marque-ico { color: #fff; border-color: #fff; box-shadow: 0 0 18px rgba(160, 205, 255, .9); }
.marque-item:hover::before, .marque-item.flash::before { animation: eclair .55s ease-out; }
.marque-item-logo { padding: 1rem 2.6rem; cursor: pointer; }
.marque-item-logo .marque-logo { height: 38px; max-width: 200px; }
.marque-item-logo .marque-logo-hk-audio { height: 46px; }
.marque-item.flash .marque-logo, .marque-item:focus-visible .marque-logo { filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 10px rgba(160, 205, 255, 1)); transform: scale(1.08); }
@keyframes eclair { 0% { opacity: 0; transform: skewX(-20deg) translateX(-120%); } 12% { opacity: 1; } 22% { opacity: .2; } 32% { opacity: 1; } 100% { opacity: 0; transform: skewX(-20deg) translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .marque-item:hover::before { animation: none; } }

/* ---- éclair au survol : boutons et liens d'en-tête ------------------------ */
.btn, .nav > a { position: relative; overflow: hidden; isolation: isolate; }
.btn::before, .nav > a::before { content: ""; position: absolute; left: -20%; top: -40%; width: 45%; height: 180%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .85) 50%, rgba(160, 205, 255, .7) 56%, transparent 68%); transform: skewX(-20deg) translateX(-140%); opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 1; }
.btn:hover::before, .nav > a:hover::before, .btn.flash::before, .nav > a.flash::before { animation: eclair .55s ease-out; }
.btn > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .btn::before, .nav > a::before { display: none; } }

/* ---- console lumière (accueil) : couleur des lyres, laser, strobe ------ */
.hero[data-couleur="blanc"] { --lyre: 225, 232, 245; --lyre-clair: 255, 255, 255; }
.hero[data-couleur="rouge"] { --lyre: 255, 55, 55; --lyre-clair: 255, 140, 120; }
.hero[data-couleur="bleu"]  { --lyre: 120, 190, 255; --lyre-clair: 160, 210, 255; }
.hero[data-couleur="vert"]  { --lyre: 60, 255, 130; --lyre-clair: 170, 255, 200; }
.console-lumiere { position: relative; z-index: 2; display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; padding: .55rem .7rem .55rem .9rem; border-radius: 14px; background: rgba(6, 7, 10, .55); border: 1px solid var(--bord); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.console-lumiere .console-titre { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); margin-right: .3rem; white-space: nowrap; }
.console-lumiere button { font-family: inherit; cursor: pointer; border: 1px solid var(--bord-fort); background: rgba(255, 255, 255, .04); color: var(--texte); border-radius: 999px; height: 32px; padding: 0 .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .4rem; transition: background .2s, border-color .2s, box-shadow .2s, transform .15s; }
.console-lumiere button:hover { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
.console-lumiere .pastille { width: 32px; padding: 0; justify-content: center; }
.console-lumiere .pastille i { width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 8px rgba(var(--c), .9); }
.console-lumiere .pastille[aria-pressed="true"] { border-color: rgb(var(--c)); box-shadow: 0 0 0 2px rgba(var(--c), .35), 0 0 16px rgba(var(--c), .6); }
.console-lumiere .fx[aria-pressed="true"] { background: rgba(var(--lyre), .18); border-color: rgb(var(--lyre)); color: #fff; box-shadow: 0 0 14px rgba(var(--lyre), .55); }
.console-lumiere .fx .led { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.console-lumiere .fx[aria-pressed="true"] .led { background: rgb(var(--lyre)); box-shadow: 0 0 8px rgb(var(--lyre)); animation: led-clignote 1s steps(2) infinite; }
@keyframes led-clignote { to { opacity: .35; } }
.console-note { display: block; width: 100%; font-size: .66rem; color: var(--texte-3); margin: .15rem 0 0 .2rem; }

/* strobe : 3 éclats/seconde maximum (seuil de sécurité photosensible) */
.hero.strobe .lyre .faisceau, .hero.strobe .lyre .tete, .hero.strobe .hero-brume { animation: strobe .333s steps(2, jump-none) infinite !important; }
@keyframes strobe { 0% { opacity: 1; } 100% { opacity: 0; } }
.hero.strobe .lyre-1 .faisceau { transform: rotate(-24deg); } .hero.strobe .lyre-2 .faisceau { transform: rotate(10deg); }
.hero.strobe .lyre-3 .faisceau { transform: rotate(-8deg); } .hero.strobe .lyre-4 .faisceau { transform: rotate(20deg); }

/* laser : éventail de faisceaux fins depuis le haut, balayage et scintillement */
.hero-laser { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; mix-blend-mode: screen; }
.hero.laser .hero-laser { display: block; }
.hero-laser .source { position: absolute; left: 50%; top: -2px; width: 0; height: 0; animation: laser-balayage 6s ease-in-out infinite; }
.hero-laser .rayon { position: absolute; left: -1px; top: 0; width: 2px; height: 140vh; transform-origin: 50% 0; background: linear-gradient(180deg, rgb(var(--lyre-clair)), rgba(var(--lyre), .9) 30%, rgba(var(--lyre), 0) 100%); box-shadow: 0 0 6px 1px rgba(var(--lyre), .9), 0 0 18px 4px rgba(var(--lyre), .45); animation: laser-scintille .18s steps(2) infinite; }
.hero-laser .rayon:nth-child(1) { transform: rotate(-52deg); } .hero-laser .rayon:nth-child(2) { transform: rotate(-38deg); animation-delay: .05s; }
.hero-laser .rayon:nth-child(3) { transform: rotate(-24deg); animation-delay: .1s; } .hero-laser .rayon:nth-child(4) { transform: rotate(-10deg); animation-delay: .02s; }
.hero-laser .rayon:nth-child(5) { transform: rotate(4deg); animation-delay: .08s; } .hero-laser .rayon:nth-child(6) { transform: rotate(18deg); animation-delay: .13s; }
.hero-laser .rayon:nth-child(7) { transform: rotate(32deg); animation-delay: .04s; } .hero-laser .rayon:nth-child(8) { transform: rotate(46deg); animation-delay: .11s; }
.hero-laser .source-2 { animation-duration: 8s; animation-direction: reverse; opacity: .7; }
.hero-laser .source-2 .rayon { height: 120vh; width: 1px; }
@keyframes laser-balayage { 0% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } 100% { transform: rotate(-16deg); } }
@keyframes laser-scintille { 0% { opacity: 1; } 100% { opacity: .55; } }
.hero-laser .nappe { position: absolute; left: 50%; top: 0; width: 200vw; height: 100%; margin-left: -100vw; background: radial-gradient(60% 40% at 50% 0%, rgba(var(--lyre), .12), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .hero.strobe .lyre .faisceau, .hero.strobe .lyre .tete, .hero.strobe .hero-brume { animation: none !important; opacity: .8; } .hero-laser .source, .hero-laser .rayon { animation: none; } }
@media (max-width: 860px) { .console-lumiere { justify-content: center; margin-inline: auto; } .hero-laser .rayon:nth-child(odd) { display: none; } }

/* ---- bouton « Prix professionnels HT » : vert clignotant, étincelle tournante ---- */
.nav-prix { margin-left: .4rem; padding: .55rem 1rem; font-size: .84rem; white-space: nowrap; border-radius: 999px; }
.btn-pro { --vert: 47, 209, 138; color: #eafff3; border-color: rgba(var(--vert), .7); background: rgba(var(--vert), .16); animation: clignoter-vert 1.4s ease-in-out infinite; }
.btn-pro:hover { animation-play-state: paused; background: rgba(var(--vert), .32); color: #fff; }
.btn-pro .led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--vert)); box-shadow: 0 0 8px rgb(var(--vert)); margin-right: .1rem; }
.btn-pro.btn-pro-actif { animation: none; background: rgb(var(--vert)); color: #062d19; border-color: transparent; font-weight: 700; }
.btn-pro.btn-pro-actif .led { background: #062d19; box-shadow: none; }
.btn-pro.avec-etincelle .etincelle { padding: 2px; }
.btn-pro.avec-etincelle .etincelle::before { background: conic-gradient(from 0deg, transparent 0 70%, rgba(var(--vert), .5) 86%, rgba(150, 255, 200, 1) 95%, #fff 98.5%, transparent 100%); animation-duration: 2.6s; }
.btn-pro.avec-etincelle .etincelle::after { background: conic-gradient(from 0deg, transparent 0 97%, rgba(200, 255, 225, .95) 98.6%, transparent 100%); animation-duration: 2.6s; }
@keyframes clignoter-vert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--vert), 0), 0 0 6px rgba(var(--vert), .25); background: rgba(var(--vert), .16); }
  50% { box-shadow: 0 0 0 5px rgba(var(--vert), .12), 0 0 22px rgba(var(--vert), .75); background: rgba(var(--vert), .38); }
}
@media (prefers-reduced-motion: reduce) { .btn-pro { animation: none; } }
@media (max-width: 1000px) { .nav .nav-prix { margin: .4rem 0 0; justify-content: center; } }
@media (min-width: 1001px) {
  .nav { gap: 0; }
  .nav > a { padding: .45rem .42rem; font-size: .8rem; }
  .nav .nav-cta { padding: .5rem .8rem; margin-left: .25rem; }
  .nav .nav-prix { font-size: .72rem; padding: .45rem .65rem; margin-left: .25rem; }
  .nav .nav-prix .led { display: none; }
  .nav .nav-compte { margin-left: .15rem; padding-left: .55rem; padding-right: .55rem; }
  .marque-texte strong { font-size: 1.1rem; }
  .marque-texte small { display: none; }
}
.formule .prix { font-size: 1.75rem; }
.nav-cta.avec-etincelle .etincelle { padding: 2px; }
.nav-cta.avec-etincelle .etincelle::before, .nav-cta.avec-etincelle .etincelle::after { animation-duration: 3.2s; }

/* ---- étincelle rouge à paillettes (bouton Espace client) ---------------- */
.etincelle-rouge { --rouge: 255, 70, 70; }
.etincelle-rouge .etincelle { padding: 2px; }
.etincelle-rouge .etincelle::before { background: conic-gradient(from 0deg, transparent 0 78%, rgba(var(--rouge), .25) 88%, rgba(255, 140, 110, .95) 96%, #fff5e6 98.6%, transparent 100%); animation-duration: 3s; }
.etincelle-rouge .etincelle::after { background: conic-gradient(from 0deg, transparent 0 97%, rgba(255, 190, 150, .95) 98.6%, transparent 100%); animation-duration: 3s; }
/* paillettes : petits points qui suivent la tête, s'écartent du cadre et s'éteignent */
.etincelle-rouge .etincelle i { position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; border-radius: 50%;
  background: radial-gradient(circle at 50% 0.9%, #fff 0, rgba(255, 200, 120, .95) 35%, rgba(var(--rouge), .7) 60%, transparent 70%) no-repeat;
  background-size: 100% 100%; animation: tour-cadre 3s linear infinite, paillette 1.2s ease-out infinite; }
.etincelle-rouge .etincelle i:nth-child(1) { animation-delay: -.12s, 0s; }
.etincelle-rouge .etincelle i:nth-child(2) { animation-delay: -.24s, -.3s; }
.etincelle-rouge .etincelle i:nth-child(3) { animation-delay: -.38s, -.6s; }
.etincelle-rouge .etincelle i:nth-child(4) { animation-delay: -.55s, -.9s; }
@keyframes paillette { 0% { opacity: 1; background-size: 100% 100%; } 100% { opacity: 0; background-size: 104% 104%; } }
@media (prefers-reduced-motion: reduce) { .etincelle-rouge .etincelle i { display: none; } }

/* ---- machines à étincelles froides (console lumière) ------------------- */
.hero-etincelles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sparkular { position: absolute; bottom: 0; z-index: 1; width: 54px; height: 34px; border-radius: 6px 6px 2px 2px; pointer-events: none;
  background: linear-gradient(180deg, #2a2d36, #101216); border: 1px solid #3a3e4a; box-shadow: 0 6px 18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08); }
.sparkular::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; border-radius: 2px; background: #1a1d24; box-shadow: 0 0 0 1px #0a0b0e; }
.sparkular .buse { position: absolute; left: 50%; top: -9px; width: 14px; height: 12px; margin-left: -7px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #4a4f5c, #22252d); border: 1px solid #555a68; }
.sparkular .buse::before { content: ""; position: absolute; left: 50%; top: -2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #0c0d11; }
.sparkular-g { left: max(12px, 4%); } .sparkular-d { right: max(12px, 4%); }
.hero.etincelles .sparkular .buse::before { background: #fff; box-shadow: 0 0 10px 4px rgba(255, 220, 160, .95), 0 0 30px 10px rgba(255, 150, 60, .6); }
.hero.etincelles .sparkular::after { background: rgb(255, 120, 40); box-shadow: 0 0 10px rgba(255, 140, 60, .9); }
.console-lumiere .fx-etincelles[aria-pressed="true"] { background: rgba(255, 150, 60, .18); border-color: rgb(255, 170, 80); box-shadow: 0 0 14px rgba(255, 150, 60, .6); }
.console-lumiere .fx-etincelles[aria-pressed="true"] .led { background: rgb(255, 190, 90); box-shadow: 0 0 8px rgb(255, 170, 60); animation: led-clignote .5s steps(2) infinite; }
@media (max-width: 600px) { .sparkular { width: 40px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .hero-etincelles, .sparkular { display: none; } .console-lumiere .fx-etincelles { display: none; } }

/* ---- fumée lourde (nappe basse, dense, au ras du sol) ------------------- */
.hero-fumee { position: absolute; left: -10%; right: -10%; bottom: -12%; height: 27%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 2.6s ease; }
.hero.fumee .hero-fumee { opacity: 1; }
.hero-fumee i { position: absolute; bottom: 0; width: 30%; height: 100%; border-radius: 50%; filter: blur(16px); transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 255, 255, .96) 0%, rgba(245, 248, 255, .9) 28%, rgba(var(--lyre-clair), .55) 52%, rgba(var(--lyre), .18) 68%, transparent 76%);
  animation: nappe-derive 16s ease-in-out infinite alternate, nappe-respire 7s ease-in-out infinite; }
.hero-fumee i:nth-child(1) { left: -4%; animation-delay: 0s, 0s; }
.hero-fumee i:nth-child(2) { left: 10%; animation-delay: -3s, -1s; width: 26%; height: 80%; }
.hero-fumee i:nth-child(3) { left: 22%; animation-delay: -6s, -2.5s; height: 92%; }
.hero-fumee i:nth-child(4) { left: 36%; animation-delay: -9s, -4s; width: 34%; height: 76%; }
.hero-fumee i:nth-child(5) { left: 50%; animation-delay: -2s, -1.5s; }
.hero-fumee i:nth-child(6) { left: 64%; animation-delay: -11s, -3.2s; width: 28%; height: 84%; }
.hero-fumee i:nth-child(7) { left: 78%; animation-delay: -5s, -.8s; height: 95%; }
.hero-fumee i:nth-child(8) { left: 90%; animation-delay: -7s, -2s; width: 26%; }
.hero-fumee i:nth-child(9) { left: 5%; animation-delay: -13s, -5s; width: 40%; height: 55%; filter: blur(10px); }
.hero-fumee i:nth-child(10) { left: 58%; animation-delay: -4s, -6s; width: 44%; height: 55%; filter: blur(10px); }
.hero-fumee::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55) 45%, rgba(235, 240, 250, .85)); filter: blur(6px); }
.hero-fumee::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 10, 0), rgba(6, 7, 10, .05) 70%, rgba(6, 7, 10, .18)); }
@keyframes nappe-derive { from { transform: translateX(-5%) scaleY(1); } to { transform: translateX(5%) scaleY(1.12); } }
@keyframes nappe-respire { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.sparkular { z-index: 1; }
.hero-etincelles { z-index: 3; }
.console-lumiere .fx-fumee[aria-pressed="true"] { background: rgba(230, 236, 245, .16); border-color: #dfe6f2; color: #fff; box-shadow: 0 0 14px rgba(220, 230, 245, .55); }
.console-lumiere .fx-fumee[aria-pressed="true"] .led { background: #fff; box-shadow: 0 0 8px #fff; animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-fumee i { animation: none; } }

/* ---- bandeau cookies (RGPD) -------------------------------------------- */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0 1rem 1rem; pointer-events: none; }
.cookies-boite { pointer-events: auto; max-width: 760px; margin: 0 auto; padding: 1.1rem 1.3rem; border-radius: var(--rayon); background: rgba(13, 15, 21, .96); border: 1px solid rgba(26, 160, 255, .35); box-shadow: 0 -10px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: cookies-monte .45s ease; }
@keyframes cookies-monte { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.cookies-tete { display: flex; gap: .9rem; align-items: flex-start; }
.cookies-ico { font-size: 1.6rem; line-height: 1; margin-top: .1rem; }
.cookies h2 { font-size: 1.05rem; margin: 0 0 .35rem; }
.cookies p { margin: 0; font-size: .88rem; color: var(--texte-2); }
.cookies p a { text-decoration: underline; }
.cookies-details { margin: .9rem 0 .2rem; border-top: 1px solid var(--bord); }
.cookies-ligne { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--bord); cursor: pointer; }
.cookies-ligne strong { display: block; font-size: .9rem; color: #fff; }
.cookies-ligne small { display: block; font-size: .78rem; color: var(--texte-3); }
.cookies-ligne input { width: 40px; height: 22px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: rgba(255, 255, 255, .12); position: relative; cursor: pointer; flex: none; transition: background .2s; }
.cookies-ligne input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cookies-ligne input:checked { background: var(--bleu); }
.cookies-ligne input:checked::after { transform: translateX(18px); }
.cookies-ligne input:disabled { opacity: .55; cursor: default; }
.cookies-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .9rem; }
.carte-consentement { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.5rem; text-align: center; background: radial-gradient(60% 60% at 50% 40%, rgba(7, 99, 255, .18), transparent 70%); }
.carte-consentement p { margin: 0; font-size: .9rem; color: var(--texte-2); max-width: 420px; }
@media (max-width: 600px) { .cookies { padding: 0 .5rem .5rem; } .cookies-actions .btn { flex: 1 1 45%; } }
.btn[hidden], [hidden] { display: none !important; }
.cookies-boite.avec-etincelle .etincelle { padding: 1.5px; }
.cookies-boite.avec-etincelle .etincelle::before, .cookies-boite.avec-etincelle .etincelle::after { animation-duration: 9s; }
.cookies-actions .btn.avec-etincelle .etincelle { padding: 2px; }
.cookies-actions .btn.avec-etincelle .etincelle::before, .cookies-actions .btn.avec-etincelle .etincelle::after { animation-duration: 2.8s; }
.carte-consentement .btn.avec-etincelle .etincelle { padding: 2px; }

/* ---- feuille de route interactive (étapes cochables) -------------------- */
.direct-tete { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
.direct-statut { padding: 1.3rem 1.5rem; border-radius: var(--rayon); background: linear-gradient(180deg, rgba(7, 99, 255, .18), rgba(7, 99, 255, .04)); border: 1px solid rgba(26, 160, 255, .35); }
.direct-statut strong { display: block; font-size: 1.35rem; color: #fff; margin-top: .3rem; }
.direct-statut small { color: var(--texte-3); font-size: .8rem; }
.direct-reseau { padding: .7rem 1rem; border-radius: var(--rayon-s); background: rgba(255, 180, 84, .12); border: 1px solid rgba(255, 180, 84, .4); color: #ffd9a3; font-size: .88rem; }
.direct-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 860px) { .direct-colonnes { grid-template-columns: 1fr; } }
.jalons { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.jalon { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .7rem .8rem; border-radius: var(--rayon-s); background: rgba(255, 255, 255, .03); border: 1px solid var(--bord); transition: background .25s, border-color .25s; }
.jalon.faite { background: rgba(47, 209, 138, .08); border-color: rgba(47, 209, 138, .35); }
.jalon.faite .jalon-libelle { color: var(--texte-2); text-decoration: line-through; text-decoration-color: rgba(47, 209, 138, .6); }
.jalon-vide { color: var(--texte-3); padding: .5rem; }
.coche { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bord-fort); background: none; cursor: pointer; display: grid; place-items: center; transition: .2s; flex: none; }
.coche i { width: 18px; height: 18px; border-radius: 50%; background: var(--degrade); transform: scale(0); transition: transform .2s; }
.jalon.faite .coche { border-color: var(--ok); background: rgba(47, 209, 138, .15); }
.jalon.faite .coche i { transform: scale(1); background: var(--ok); }
.coche:disabled { cursor: default; opacity: .8; }
.jalon:not(.cochable) .coche { border-style: dashed; }
.jalon-corps { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.jalon-heure { font-size: .78rem; font-weight: 700; color: var(--bleu-2); letter-spacing: .04em; }
.jalon-libelle { color: #fff; font-weight: 500; font-size: .96rem; }
.jalon-quand { color: var(--ok); font-size: .75rem; }
.jalon .supprimer { background: none; border: 1px solid var(--bord); color: var(--texte-3); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; }
.jalons-grands .jalon { padding: 1rem .9rem; }
.jalons-grands .coche { width: 46px; height: 46px; }
.jalons-grands .coche i { width: 26px; height: 26px; }
.jalons-grands .jalon-libelle { font-size: 1.05rem; }
.hors-ligne .coche { opacity: .5; }

/* ---- mode Jour J (téléphone) ------------------------------------------ */
body.jour-j { background: var(--noir); padding-bottom: env(safe-area-inset-bottom); }
.jj-tete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; padding-top: calc(.6rem + env(safe-area-inset-top)); background: rgba(6, 7, 10, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); }
.jj-retour { font-size: 1.8rem; line-height: 1; color: var(--texte-2); padding: 0 .4rem; }
.jj-titre { flex: 1; font-weight: 700; color: #fff; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jj-lien { font-size: .8rem; color: var(--texte-3); }
.jj-main { max-width: 720px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
.jj-carte { padding: 1.1rem 1.1rem 1.2rem; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--bord); }
.jj-carte h1 { font-size: 1.5rem; margin: .2rem 0 .3rem; }
.jj-carte h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-doux); margin-bottom: .8rem; }
.jj-carte p { color: var(--texte-2); margin: 0; }
.jj-resume { background: linear-gradient(180deg, rgba(7, 99, 255, .2), rgba(7, 99, 255, .04)); border-color: rgba(26, 160, 255, .35); display: grid; gap: .8rem; }
.jj-progression small { color: var(--texte-3); font-size: .8rem; }
.jj-courante { display: block; font-size: 1.3rem; color: #fff; }
.jj-ajout { display: flex; gap: .5rem; margin-top: .8rem; }
.jj-ajout input { min-width: 0; }
.jj-contacts { display: grid; gap: .5rem; }
.jj-contacts .btn { justify-content: flex-start; text-align: left; }
.jj-info { display: flex; gap: .5rem; align-items: center; color: var(--texte-2); padding: .5rem .2rem; }

/* ---- bandeau d'installation de l'application --------------------------- */
.installer { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 85; max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem; align-items: start; padding: 1.1rem 1.2rem; border-radius: var(--rayon); background: rgba(13, 15, 21, .97); border: 1px solid rgba(26, 160, 255, .4); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); animation: cookies-monte .45s ease; }
.installer-icone { border-radius: 12px; }
.installer-texte strong { color: #fff; display: block; margin-bottom: .3rem; }
.installer-texte p { margin: 0; font-size: .84rem; color: var(--texte-2); }
.installer-ios { display: none; margin-top: .5rem !important; color: #fff !important; }
.installer.ios .installer-ios { display: block; }
.installer.ios .installer-oui { display: none; }
.installer-actions { grid-column: 1 / -1; display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.installer.avec-etincelle .etincelle { padding: 1.5px; }
.installer.avec-etincelle .etincelle::before, .installer.avec-etincelle .etincelle::after { animation-duration: 8s; }
@media (max-width: 600px) { .installer { left: .5rem; right: .5rem; bottom: .5rem; grid-template-columns: 1fr; } .installer-icone { display: none; } }

/* ---- widget compte à rebours (thème par évènement) ---------------------- */
.rebours-widget { --theme: 26, 160, 255; border-color: rgba(var(--theme), .45); box-shadow: 0 0 40px rgba(var(--theme), .12); }
.rebours-widget::before { background: radial-gradient(60% 90% at 90% 0%, rgba(var(--theme), .32), transparent 70%), radial-gradient(40% 60% at 10% 100%, rgba(7, 99, 255, .2), transparent 70%); }
.rebours-contenu { position: relative; z-index: 2; }
.rebours-motifs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; opacity: .55; }
.rebours-motifs i { position: absolute; bottom: -2rem; font-style: normal; animation: motif-monte linear infinite; filter: drop-shadow(0 0 6px rgba(var(--theme), .6)); }
@keyframes motif-monte { 0% { transform: translateY(0) rotate(-8deg); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .6; } 100% { transform: translateY(-260px) rotate(10deg); opacity: 0; } }
.rebours-grand { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 .1rem; }
.rebours-emoji { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 0 12px rgba(var(--theme), .7)); animation: emoji-bat 2.4s ease-in-out infinite; }
@keyframes emoji-bat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.rebours-j { font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; background: linear-gradient(100deg, #fff, rgb(var(--theme))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rebours-phrase { font-size: 1.05rem; color: #fff; margin: .2rem 0 .8rem; font-weight: 600; }
.rebours-widget h2 { font-size: 1.05rem; color: var(--texte-2); font-weight: 600; }
.rebours-chiffres strong.tic { animation: chiffre-tic .35s ease; }
@keyframes chiffre-tic { 0% { transform: translateY(-6px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.rebours-actions { margin-top: 1rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.rebours-confettis { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.rebours-confettis i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: .95; animation: confetti-tombe 3s linear infinite; }
@keyframes confetti-tombe { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(420px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rebours-motifs, .rebours-confettis { display: none; } .rebours-emoji { animation: none; } }

/* ---- avis clients : pop-up et page ------------------------------------- */
.avis-modale { border: 0; padding: 0; background: transparent; max-width: min(720px, calc(100vw - 2rem)); width: 100%; color: var(--texte); }
.avis-modale::backdrop { background: rgba(4, 6, 12, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.avis-modale[open] .avis-boite { animation: cookies-monte .4s ease; }
.avis-boite { position: relative; padding: 1.6rem 1.7rem; border-radius: var(--rayon); background: rgba(13, 15, 21, .98); border: 1px solid rgba(255, 200, 87, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden; }
.avis-boite.avec-etincelle .etincelle { padding: 1.5px; }
.avis-boite.avec-etincelle .etincelle::before, .avis-boite.avec-etincelle .etincelle::after { animation-duration: 8s; background: conic-gradient(from 0deg, transparent 0 300deg, #ffc857 330deg, #fff 345deg, transparent 360deg); }
.avis-inline .avis-boite { max-width: 720px; margin: 0 auto; }
.avis-boite.avec-etincelle > .avis-fermer, .avis-fermer { position: absolute; top: .7rem; right: .8rem; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bord); background: rgba(255, 255, 255, .05); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.avis-fermer:hover { background: rgba(255, 255, 255, .12); }
.avis-form { position: relative; z-index: 1; }
.avis-tete { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; padding-right: 2rem; }
.avis-ico { font-size: 1.8rem; line-height: 1; margin-top: .1rem; }
.avis-ico-grand { font-size: 3rem; display: block; margin: 0 0 .5rem; }
.avis-tete h2 { font-size: 1.25rem; margin: 0 0 .3rem; }
.avis-tete p { margin: 0; font-size: .92rem; color: var(--texte-2); }
.avis-form .champ { margin-bottom: .9rem; }
.avis-form .ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.avis-form .notation { align-self: flex-start; }
.avis-form .notation label { font-size: 2rem; font-weight: 400; }
.avis-form .legende { display: block; font-size: .85rem; color: var(--texte-2); margin-bottom: .2rem; }
.avis-accord { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--texte-2); margin: .2rem 0 1rem; cursor: pointer; }
.avis-accord input { margin-top: .25rem; flex: none; }
.avis-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.avis-actions .aide { margin: 0; }
.avis-merci { position: relative; text-align: center; padding: 1rem .5rem; }
.avis-merci h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.avis-merci p { color: var(--texte-2); }
.avis-google { margin-top: 1.2rem; color: #fff !important; }
.avis-confettis { position: absolute; inset: -2rem -2rem auto; height: 0; pointer-events: none; }
.avis-confettis i { position: absolute; top: 0; width: 8px; height: 14px; border-radius: 2px; animation: confetti-tombe 3s linear infinite; }
@media (max-width: 600px) { .avis-form .ligne { grid-template-columns: 1fr; } .avis-boite { padding: 1.3rem 1.1rem; } .avis-actions .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .avis-confettis { display: none; } }