/* Page de vente du blind test — feuille de style. La police est dans le dossier « polices ».
   Les couleurs sont celles de l'application : la nuit de la salle, et les quatre réponses A, B, C, D. */
@font-face{font-family:"Bricolage";src:url("polices/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;}

:root{
  --nuit:#1d1238;        /* le fond : la salle */
  --panneau:#2a1b4f;     /* les blocs posés sur le fond */
  --trait:#3b2869;       /* filets et bordures */
  --creme:#fff3da;       /* le texte */
  --brume:#c3b5e0;       /* le texte secondaire */
  --corail:#ff6a5b;      /* réponse A */
  --soleil:#ffc53d;      /* réponse B */
  --lagon:#23cdb9;       /* réponse C */
  --lilas:#b9a0ff;       /* réponse D */
  --encre:#1d1238;       /* le texte posé sur une couleur */
  --police:"Bricolage","Segoe UI",system-ui,Helvetica,Arial,sans-serif;
  --large:70rem;
  --fond:var(--nuit);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--nuit);color:var(--creme);font-family:var(--police);font-size:1.125rem;line-height:1.55;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--lagon);text-underline-offset:.18em;}
a:hover{color:#fff;}
:focus-visible{outline:3px solid var(--soleil);outline-offset:3px;border-radius:6px;}
h1,h2,h3{font-family:var(--police);line-height:1.04;margin:0;text-wrap:balance;}
h2{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;font-stretch:84%;letter-spacing:-.015em;}
h3{font-size:1.35rem;font-weight:700;font-stretch:92%;line-height:1.2;}
p{margin:0 0 1em;max-width:38em;}
figure{margin:0;}
.cadre{width:min(100% - 2.5rem,var(--large));margin-inline:auto;}
.sourd{color:var(--brume);}
.petit{font-size:.92rem;}

/* ---------- Boutons ---------- */
.bouton{display:inline-block;font:700 1.08rem/1.2 var(--police);text-decoration:none;padding:.95em 1.5em;border-radius:999px;border:2px solid transparent;text-align:center;}
.bouton.plein{background:var(--creme);color:var(--encre);}
.bouton.plein:hover{background:#fff;color:var(--encre);}
.bouton.clair{background:transparent;color:var(--creme);border-color:var(--trait);}
.bouton.clair:hover{border-color:var(--brume);color:#fff;}
.bouton.sombre{background:var(--encre);color:var(--creme);}
.bouton.sombre:hover{background:#000;color:#fff;}
.bouton.contour{background:transparent;color:var(--encre);border-color:var(--encre);}
.bouton.contour:hover{background:rgba(29,18,56,.1);color:var(--encre);}

/* ---------- En-tête ---------- */
.entete{display:flex;align-items:center;gap:1rem;padding:1.1rem 0;}
.marque{display:flex;align-items:center;gap:.7rem;font:800 1.25rem/1 var(--police);font-stretch:90%;color:var(--creme);text-decoration:none;margin-right:auto;}
.marque img{width:42px;height:42px;}
.entete nav{display:flex;align-items:center;gap:1.6rem;}
.entete nav a{color:var(--brume);text-decoration:none;font-weight:500;}
.entete nav a:hover{color:#fff;}
.entete nav .bouton{padding:.6em 1.1em;font-size:1rem;color:var(--encre);white-space:nowrap;}
@media (max-width:52rem){.entete{gap:.6rem;}.entete nav{gap:.6rem;}.entete nav > a:not(.bouton){display:none;}.marque{font-size:1.05rem;}.marque img{width:36px;height:36px;}.entete nav .bouton{font-size:.92rem;padding:.6em .9em;}}
@media (max-width:30rem){.entete nav > .bouton{display:none;}}

/* ---------- Ouverture : une question de blind test, puis la bonne réponse s'allume ---------- */
.ouverture{padding:clamp(1.5rem,4vw,3.5rem) 0 clamp(2.5rem,5vw,4rem);}
.ouverture .cadre{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.ouverture h1{font-size:clamp(2.1rem,5vw,3.7rem);font-weight:800;font-stretch:80%;letter-spacing:-.02em;margin-bottom:1.3rem;}
.chrono{height:.6rem;border-radius:99px;background:var(--trait);overflow:hidden;margin-bottom:1rem;max-width:36rem;}
.chrono i{display:block;height:100%;border-radius:99px;background:var(--creme);transform-origin:left;animation:chrono 3s linear .4s both;}
.tuiles{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-width:36rem;}
.tuiles li{display:flex;align-items:center;gap:.8rem;min-height:4.4rem;padding:.7rem 1rem;border-radius:1.1rem;color:var(--encre);font-weight:700;font-size:1.08rem;line-height:1.2;
  outline:3px solid transparent;outline-offset:3px;animation:eteindre .5s ease 3.5s both;}
/* --c : la couleur de la réponse ; --e : la même, éteinte, quand la bonne réponse est donnée */
.tuiles li{background:var(--c);}
.tuiles .a{--c:var(--corail);--e:#6e3245;} .tuiles .b{--c:var(--soleil);--e:#6e523a;} .tuiles .c{--c:var(--lagon);--e:#1f5566;} .tuiles .d{--c:var(--lilas);}
.tuiles .lettre{flex:none;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--encre);color:var(--creme);font-weight:800;}
.tuiles .lettre{color:var(--c);}
.tuiles .verdict{display:flex;align-items:center;gap:.35em;width:max-content;margin-top:.45rem;padding:.3em .75em .3em .55em;border-radius:99px;background:var(--encre);color:var(--creme);font-size:.95rem;font-weight:800;letter-spacing:.01em;box-shadow:0 0 0 2px var(--creme);animation:paraitre .4s ease 3.5s both;}
.tuiles .verdict::before{content:"\2713";display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--lilas);color:var(--encre);font-size:.85em;}
.tuiles .bonne{animation-name:allumer;}
@keyframes chrono{from{transform:scaleX(1);}to{transform:scaleX(0);}}
@keyframes eteindre{to{background-color:var(--e);color:var(--creme);}}
@keyframes allumer{to{outline-color:var(--creme);}}
@keyframes paraitre{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .chrono i{animation:none;transform:scaleX(0);}
  .tuiles li{animation:none;background:var(--e);color:var(--creme);} .tuiles .bonne{background:var(--c);color:var(--encre);outline-color:var(--creme);} .tuiles .verdict{animation:none;}
}
.chapeau{font-size:1.25rem;max-width:32em;margin-bottom:1.2rem;}
.atouts{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-weight:600;}
.atouts li{padding-left:1.5rem;position:relative;}
.atouts li::before{content:"✓";position:absolute;left:0;color:var(--lagon);font-weight:800;}
.actions{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-bottom:1rem;}
.lien-mac{margin:-.2rem 0 .9rem;font-size:.98rem;}
.lien-mac a{color:inherit;}
@media (max-width:26rem){.tuiles{grid-template-columns:1fr;}}

/* la scène : la télé de la salle, et le téléphone d'une joueuse devant */
.tele{border-radius:.7rem;border:.45rem solid #0d0719;outline:1px solid var(--trait);overflow:hidden;background:#0d0719;box-shadow:0 30px 60px -22px rgba(0,0,0,.85);}
.telephone{border-radius:1.9rem;border:.5rem solid #0d0719;outline:1px solid var(--trait);overflow:hidden;background:#0d0719;box-shadow:0 30px 60px -18px rgba(0,0,0,.9);}
.scene{display:flex;flex-direction:column;align-items:flex-end;}
.scene .tele{width:100%;}
.scene .telephone{position:relative;z-index:2;width:min(13.5rem,50%);margin:-2.4rem 9% 0 0;}
@media (max-width:60rem){
  .ouverture .cadre{grid-template-columns:1fr;}
  .scene{max-width:32rem;margin:0 auto;width:100%;}
}

/* ---------- Sections ---------- */
.bloc{padding:clamp(3.5rem,8vw,6.5rem) 0;background:var(--fond);}
.bloc.fonce{--fond:var(--panneau);--trait:#463280;}
.bloc > .cadre > h2{margin-bottom:.5em;}
.intro{font-size:1.2rem;color:var(--brume);margin-bottom:2.5rem;}

/* Une partie en trois temps : c'est bien une suite, d'où les numéros */
.temps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);counter-reset:temps;}
.temps li{counter-increment:temps;display:flex;flex-direction:column;}
.temps .vue{order:-1;height:21rem;display:flex;align-items:flex-end;justify-content:center;margin-bottom:1.4rem;background:var(--panneau);border-radius:1.2rem;padding:1.4rem 1.4rem 0;overflow:hidden;}
.temps .vue img{max-height:100%;width:auto;border-radius:.9rem .9rem 0 0;box-shadow:0 0 0 1px var(--trait);object-fit:cover;object-position:top;}
.temps .vue.paysage{align-items:center;padding:1.4rem;}
.temps .vue.paysage img{border-radius:.5rem;width:100%;}
.temps .vue.large{padding:1.4rem 0 0 1.4rem;justify-content:flex-start;}
.temps .vue.large img{height:100%;max-width:none;border-radius:.9rem 0 0 0;}
.temps h3::before{content:counter(temps);display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;margin-right:.6rem;border-radius:50%;background:var(--soleil);color:var(--encre);font-size:1.05rem;font-weight:800;vertical-align:.1em;}
.temps h3{margin-bottom:.5rem;text-wrap:wrap;}
.temps p{color:var(--brume);font-size:1.05rem;}
@media (max-width:52rem){.temps{grid-template-columns:1fr;}.temps .vue{height:19rem;}}

/* Les captures en grand, et les listes de faits */
.grande-vue{border-radius:1.1rem;border:1px solid var(--trait);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);margin:0 0 3rem;}
.faits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem clamp(2rem,5vw,4rem);margin:0;}
.faits.trois{grid-template-columns:repeat(3,minmax(0,1fr));}
.faits div{border-top:1px solid var(--trait);padding-top:1.1rem;}
.faits dt{font-weight:700;font-size:1.25rem;line-height:1.25;font-stretch:92%;margin-bottom:.35rem;}
.faits dd{margin:0;color:var(--brume);font-size:1.05rem;}
.faits div.large{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:min-content 1fr;column-gap:clamp(2rem,5vw,4rem);align-items:start;}
.faits div.large dt,.faits div.large dd{grid-column:1;}
.faits div.large dd.capture{grid-column:2;grid-row:1 / span 2;border-radius:1.1rem;border:1px solid var(--trait);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);}
.faits div.large dd.capture img{width:100%;}
@media (max-width:60rem){.faits.trois{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:46rem){.faits,.faits.trois{grid-template-columns:1fr;}.faits div.large{grid-template-columns:1fr;}.faits div.large dd.capture{grid-column:1;grid-row:auto;margin-top:1.1rem;}}

.cote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(2rem,5vw,4rem);align-items:center;}
.cote .grande-vue{margin:0;}
.cote h2{margin-bottom:.5em;}
.cote.envers{grid-template-columns:minmax(0,1.6fr) minmax(0,.85fr);align-items:start;}
.cote.envers .grande-vue{position:sticky;top:1.5rem;}
@media (max-width:60rem){.cote,.cote.envers{grid-template-columns:1fr;}.cote.envers .grande-vue{position:static;max-width:26rem;}}

/* Sur la télé : deux écrans côte à côte, puis l'affiche */
.teles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);}
.teles figcaption{color:var(--brume);font-size:1.02rem;margin-top:.9rem;}
.cote.affiche{grid-template-columns:minmax(0,13rem) minmax(0,1fr);margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:clamp(2rem,5vw,3.5rem);border-top:1px solid var(--trait);}
.cote.affiche h3{margin-bottom:.5rem;}
.feuille{border-radius:3px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.8);transform:rotate(-2deg);}
@media (max-width:46rem){.teles{grid-template-columns:1fr;}.cote.affiche{grid-template-columns:1fr;}.feuille{max-width:13rem;}}

.savoir{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem;max-width:46rem;}
.savoir li{padding-left:1.6rem;position:relative;color:var(--brume);}
.savoir li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;border-radius:50%;background:var(--lagon);}
.savoir strong{color:var(--creme);}

/* ---------- Le prix : un billet d'entrée ---------- */
.billet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--soleil);color:var(--encre);border-radius:1.2rem;position:relative;margin-top:2.5rem;}
.billet a{color:var(--encre);}
.billet .talon{padding:clamp(1.6rem,4vw,3rem);border-right:3px dashed rgba(29,18,56,.4);position:relative;}
.billet .talon::before,.billet .talon::after{content:"";position:absolute;right:-1.05rem;width:2rem;height:2rem;border-radius:50%;background:var(--fond);}
.billet .talon::before{top:-1rem;}
.billet .talon::after{bottom:-1rem;}
.billet .corps{padding:clamp(1.6rem,4vw,3rem);}
.montant{font-weight:800;font-size:clamp(4rem,10vw,6.5rem);line-height:.9;font-stretch:78%;letter-spacing:-.02em;margin:0 0 .3rem;}
.montant small{font-size:.32em;font-stretch:92%;font-weight:700;letter-spacing:0;margin-left:.35em;}
.barre{font-weight:700;font-size:1.3rem;line-height:1.2;opacity:.65;text-decoration:line-through;text-decoration-thickness:2px;margin:0 0 .4rem;}
.tampon{display:inline-block;font-weight:800;font-stretch:80%;font-size:1.12rem;line-height:1.2;color:#a3261a;border:2.5px solid #a3261a;border-radius:.5rem;padding:.35rem .75rem .4rem;transform:rotate(-3deg);margin:.9rem 0 0;}
.billet ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.6rem;}
.billet li{padding-left:1.7rem;position:relative;font-weight:600;}
.billet li::before{content:"✓";position:absolute;left:0;font-weight:800;}
.billet .actions{margin-bottom:.9rem;}
.billet p{max-width:none;}
@media (max-width:50rem){
  .billet{grid-template-columns:1fr;}
  .billet .talon{border-right:0;border-bottom:3px dashed rgba(29,18,56,.4);}
  .billet .talon::before{top:auto;bottom:-1rem;left:-1rem;right:auto;}
  .billet .talon::after{right:-1rem;}
}

.billet .montant{font-size:clamp(3rem,6.2vw,4.6rem);white-space:nowrap;}
.billet .formule{font-weight:800;font-stretch:80%;font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .9rem;}
.billet .detail{margin:.35rem 0 0;font-weight:600;}
.billet.lagon{background:var(--lagon);}
.entre-billets{text-align:center;color:var(--brume);font-weight:600;margin:2.2rem auto 0;max-width:40rem;}
.entre-billets strong{color:var(--soleil);}
.billet .detail s{opacity:.65;text-decoration-thickness:2px;}
.fondateurs{border:2px dashed var(--soleil);border-radius:.8rem;padding:.8rem 1.1rem;max-width:none;margin:2rem 0 0;}
.fondateurs strong{color:var(--soleil);}
/* ---------- L'autre application : le karaoké, dans ses propres couleurs ---------- */
.bloc.voisin{--fond:#140d22;--trait:#3a2c58;border-top:4px solid #ff3d94;}
.voisin .savoir li::before{background:#ff3d94;}
.voisin-prix{font-weight:600;margin:1.8rem 0 1.4rem;max-width:42em;}
.voisin .bouton.clair{border-color:#ff3d94;}
.voisin .bouton.clair:hover{background:#ff3d94;color:#fff;}
.voisin .cote{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}
.scene-voisin{position:relative;padding:0 3rem 2.5rem 0;}
.scene-voisin .telephone{position:absolute;right:0;bottom:0;width:36%;}
@media (max-width:60rem){.voisin .cote{grid-template-columns:1fr;}.scene-voisin{max-width:26rem;}}
.note-apercu{border:2px dashed var(--soleil);border-radius:.8rem;padding:.7rem 1rem;color:var(--soleil);font-weight:600;font-size:.98rem;max-width:none;margin-bottom:2rem;}

/* ---------- Questions ---------- */
.questions{max-width:48rem;}
.questions details{border-top:1px solid var(--trait);}
.questions details:last-child{border-bottom:1px solid var(--trait);}
.questions summary{cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;font-weight:700;font-size:1.2rem;line-height:1.3;font-stretch:94%;position:relative;}
.questions summary::-webkit-details-marker{display:none;}
.questions summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;font-size:1.6rem;font-weight:400;color:var(--lagon);}
.questions details[open] summary::after{content:"–";}
.questions details p{color:var(--brume);padding-right:1rem;}

/* ---------- Dernier appel et pied de page ---------- */
.bloc.rappel{text-align:center;--fond:var(--panneau);border-top:1px solid var(--trait);}
.rappel h2{margin-bottom:.4em;}
.rappel p{margin-inline:auto;color:var(--brume);}
.rappel .actions{justify-content:center;margin-top:1.6rem;}
.rappel .lien-mac{margin:1rem auto 0;}
.pied{padding:2.5rem 0 3rem;color:var(--brume);font-size:.95rem;border-top:1px solid var(--trait);}
.pied p{max-width:52rem;margin-bottom:.6em;}
.pied a{color:var(--brume);}

/* ---------- Pages de texte (conditions, page introuvable) ---------- */
.texte{max-width:46rem;padding:2rem 0 4rem;}
.texte h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;font-stretch:84%;margin-bottom:.6em;}
.texte h2{font-size:1.5rem;margin:2.2em 0 .5em;font-stretch:92%;}
.texte p,.texte li{color:var(--brume);}
.texte p{max-width:none;}
.avis{background:#3b2a05;border-left:5px solid var(--soleil);color:var(--creme);padding:.9rem 1.1rem;border-radius:0 .6rem .6rem 0;margin:1.4rem 0;}

/* ---------- Les jeux de soirée (Carton Plein, Bonneteau) ---------- */
.jeux .intro{max-width:44rem;color:var(--brume);}
.jeux-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.6rem;margin:1.8rem 0 1.2rem;}
.jeu{background:var(--panneau);border:1px solid var(--trait);border-radius:1.4rem;overflow:hidden;display:flex;flex-direction:column;}
.jeu img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0f3b2e;}
.jeu-texte{padding:1.3rem 1.4rem 1.5rem;}
.jeu h3{font-size:1.7rem;margin-bottom:.5rem;color:var(--soleil);}
.jeu p{margin:.4rem 0 .6rem;}
.jeu ul{margin:.4rem 0 1rem;padding-left:1.2rem;color:var(--brume);}
.jeu li{margin:.25rem 0;}
.jeu-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.jeu .bouton.contour{color:var(--creme);border-color:var(--creme);}