/* Page de vente — feuille de style. Les polices sont dans le dossier « polices ». */
@font-face{font-family:"Bricolage";src:url("polices/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;}
@font-face{font-family:"Instrument";src:url("polices/instrument.woff2") format("woff2");font-weight:400 700;font-display:swap;}
@font-face{font-family:"Caveat";src:url("polices/caveat.woff2") format("woff2");font-weight:700;font-display:swap;}

:root{
  --nuit:#140d22;        /* le fond : la salle, lumières baissées */
  --scene:#1f1535;       /* les blocs posés sur le fond */
  --trait:#3a2c58;       /* filets et bordures */
  --encre:#f6f0fc;       /* le texte */
  --sourd:#bdb1d1;       /* le texte secondaire */
  --rose:#ff3d94;
  --turquoise:#1fdcc5;
  --ambre:#ffb703;
  --papier:#ffe98a;      /* les petits papiers de demande */
  --encre-papier:#2a1c05;
  --titre:"Bricolage","Arial Narrow","Segoe UI",sans-serif;
  --texte:"Instrument","Segoe UI",Helvetica,Arial,sans-serif;
  --large:70rem;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--nuit);color:var(--encre);font-family:var(--texte);font-size:1.125rem;line-height:1.6;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--turquoise);text-underline-offset:.18em;}
a:hover{color:#fff;}
:focus-visible{outline:3px solid var(--ambre);outline-offset:3px;border-radius:6px;}
h1,h2,h3{font-family:var(--titre);font-stretch:82%;line-height:1.02;margin:0;text-wrap:balance;}
h2{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;letter-spacing:-.01em;}
h3{font-size:1.35rem;font-weight:700;font-stretch:90%;line-height:1.2;}
p{margin:0 0 1em;max-width:38em;}
.cadre{width:min(100% - 2.5rem,var(--large));margin-inline:auto;}
.sourd{color:var(--sourd);}
.petit{font-size:.92rem;}

/* ---------- Boutons ---------- */
.bouton{display:inline-block;font:700 1.08rem/1.2 var(--texte);text-decoration:none;padding:.95em 1.5em;border-radius:999px;border:2px solid transparent;text-align:center;}
.bouton.plein{background:var(--rose);color:#fff;box-shadow:0 10px 30px -8px rgba(255,61,148,.65);}
.bouton.plein:hover{background:#ff5aa5;color:#fff;}
.bouton.clair{background:transparent;color:var(--encre);border-color:var(--trait);}
.bouton.clair:hover{border-color:var(--turquoise);color:#fff;}
.bouton.sombre{background:var(--encre-papier);color:var(--papier);}
.bouton.sombre:hover{background:#000;color:#fff;}
.bouton.contour{background:transparent;color:var(--encre-papier);border-color:var(--encre-papier);}
.bouton.contour:hover{background:rgba(42,28,5,.1);color:var(--encre-papier);}

/* ---------- 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(--titre);font-stretch:88%;color:var(--encre);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(--sourd);text-decoration:none;font-weight:500;}
.entete nav a:hover{color:#fff;}
.entete nav .bouton{padding:.6em 1.1em;font-size:1rem;color:#fff;}
.entete nav .bouton{white-space:nowrap;}
/* le bouton des langues : un globe, la langue en cours, et la liste qui se déroule */
.langues{position:relative;}
.langues summary{list-style:none;display:flex;align-items:center;gap:.45rem;cursor:pointer;color:var(--encre);font-weight:600;padding:.5em .85em;border:2px solid var(--trait);border-radius:999px;white-space:nowrap;}
.langues summary::-webkit-details-marker{display:none;}
.langues summary::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.15em);margin-left:.15rem;}
.langues summary:hover,.langues[open] summary{border-color:var(--turquoise);}
.langues .nom-court{display:none;}
.langues ul{position:absolute;right:0;top:calc(100% + .5rem);z-index:20;list-style:none;margin:0;padding:.4rem;min-width:11rem;background:var(--scene);border:1px solid var(--trait);border-radius:.9rem;box-shadow:0 20px 40px -12px rgba(0,0,0,.8);}
.entete nav .langues ul a{display:block;padding:.55rem .8rem;border-radius:.6rem;color:var(--encre);font-weight:500;}
.entete nav .langues ul a:hover{background:rgba(255,255,255,.08);}
.entete nav .langues ul a[aria-current]{color:var(--ambre);font-weight:700;}
@media (max-width:68rem){.entete nav{gap:1.1rem;}}
@media (max-width:62rem){.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;}
  .langues .nom-long{display:none;}.langues .nom-court{display:inline;}.langues summary{padding:.45em .7em;}}
@media (max-width:30rem){.entete nav > .bouton{display:none;}}

/* ---------- Ouverture : le titre se colore comme des paroles de karaoké ---------- */
.ouverture{position:relative;overflow:hidden;padding:clamp(2rem,5vw,4rem) 0 clamp(2rem,4vw,3rem);
  background:radial-gradient(60rem 30rem at 85% -10%,rgba(31,220,197,.16),transparent 60%),radial-gradient(50rem 28rem at 0% 0%,rgba(255,61,148,.2),transparent 60%);}
.ouverture .cadre{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center;}
.paroles{font-size:calc(clamp(2.05rem,5.2vw,3.9rem) * var(--echelle,1));font-weight:800;font-stretch:78%;letter-spacing:-.015em;margin-bottom:1.3rem;line-height:1.06;}
.profil,.atouts{list-style:none;margin:0;padding:0;display:grid;max-width:34em;}
.profil{gap:.5rem;font-size:1.2rem;color:var(--encre);margin-bottom:1.5rem;}
.profil li{padding-left:1.5rem;position:relative;}
.profil li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;border-radius:50%;background:var(--turquoise);}
.alors{font:800 clamp(1.4rem,2.65vw,1.95rem)/1.12 var(--titre);font-stretch:80%;margin:0 0 1rem;max-width:none;text-wrap:balance;}
.atouts{gap:.4rem;font-size:1.15rem;font-weight:600;margin-bottom:1.8rem;}
.atouts li{padding-left:1.7rem;position:relative;}
.atouts li::before{content:"✓";position:absolute;left:0;color:var(--turquoise);font-weight:700;}
.ligne{display:block;width:fit-content;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(90deg,var(--ambre) 0 50%,var(--encre) 50% 100%);background-size:200% 100%;background-position:100% 0;
  animation:chante 2s linear var(--retard,.5s) forwards;padding-bottom:.08em;}
.paroles .ligne{white-space:nowrap;}
@keyframes chante{to{background-position:0 0;}}
@media (prefers-reduced-motion:reduce){.ligne{animation:none;background-position:0 0;}html{scroll-behavior:auto;}}
.chapeau{font-size:1.22rem;color:var(--sourd);max-width:31em;margin-bottom:1.8rem;}
.chapeau strong{color:var(--encre);font-weight:600;}
.actions{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-bottom:1rem;}

/* la scène : les petits papiers d'avant, puis le téléphone et l'écran de l'animateur */
.scene{position:relative;min-height:34rem;}
.papier{position:absolute;background:var(--papier);color:var(--encre-papier);font:700 1.45rem/1.15 "Caveat","Segoe Print",cursive;padding:.7rem 1rem .8rem;width:11.5rem;box-shadow:0 12px 24px -10px rgba(0,0,0,.7);}
.papier s{text-decoration-thickness:2px;opacity:.7;}
.papier small{display:block;font-size:1.1rem;opacity:.75;}
.papier.un{top:.4rem;left:0;transform:rotate(-7deg);}
.papier.deux{top:4.3rem;left:12%;transform:rotate(4deg);background:#ffc9e0;}
.papier.trois{top:7.9rem;left:-2%;transform:rotate(-3deg);background:#bff3ea;}
.ecran-anim{position:absolute;right:0;top:0;width:min(20rem,66%);border-radius:14px;border:1px solid var(--trait);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);background:#0d0b14;}
.ecran-anim::before{content:"";display:block;height:1.5rem;background:radial-gradient(circle at .9rem 50%,#ff5f57 .28rem,transparent .3rem),radial-gradient(circle at 1.75rem 50%,#febc2e .28rem,transparent .3rem),radial-gradient(circle at 2.6rem 50%,#28c840 .28rem,transparent .3rem),#2b2140;}
.telephone{position:absolute;left:3%;bottom:0;width:min(12rem,44%);z-index:2;border-radius:1.9rem;border:.5rem solid #07050c;outline:1px solid var(--trait);overflow:hidden;box-shadow:0 30px 60px -18px rgba(0,0,0,.9);background:#0d0b14;}
.legende{position:absolute;right:0;bottom:-1.9rem;margin:0;}
@media (max-width:60rem){
  .ouverture .cadre{grid-template-columns:1fr;}
  .scene{min-height:0;height:33rem;max-width:30rem;margin:1rem auto 2rem;width:100%;}
}
@media (max-width:26rem){.scene{height:29rem;}.papier{font-size:1.2rem;width:9.5rem;}}

/* ---------- Sections ---------- */
.bloc{padding:clamp(3.5rem,8vw,6.5rem) 0;}
.bloc > .cadre > h2{margin-bottom:.5em;}
.intro{font-size:1.2rem;color:var(--sourd);margin-bottom:2.5rem;}

/* Une soirée 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(--scene);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.feuille img{border-radius:3px 3px 0 0;}
.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(--rose);color:#fff;font-size:1.05rem;vertical-align:.1em;}
.temps h3{margin-bottom:.5rem;text-wrap:wrap;}
.temps p{color:var(--sourd);font-size:1.05rem;}
@media (max-width:52rem){.temps{grid-template-columns:1fr;}.temps .vue{height:19rem;}}

/* La file : une grande capture, puis ce qu'elle fait à votre place */
.file{background:var(--scene);}
.grande-vue{border-radius: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 div{border-top:1px solid var(--trait);padding-top:1.1rem;}
.faits dt{font:700 1.25rem/1.25 var(--titre);font-stretch:90%;margin-bottom:.35rem;}
.faits dd{margin:0;color:var(--sourd);font-size:1.05rem;}
.faits div.large{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,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;margin:0;border-radius:14px;border:1px solid var(--trait);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);background:#0d0b14;}
.faits div.large dd.capture::before{content:"";display:block;height:1.5rem;background:radial-gradient(circle at .9rem 50%,#ff5f57 .28rem,transparent .3rem),radial-gradient(circle at 1.75rem 50%,#febc2e .28rem,transparent .3rem),radial-gradient(circle at 2.6rem 50%,#28c840 .28rem,transparent .3rem),#2b2140;}
.faits div.large dd.capture img{display:block;width:100%;height:auto;}
@media (max-width:46rem){.faits div.large{grid-template-columns:1fr;}.faits div.large dd.capture{grid-column:1;grid-row:auto;margin-top:1.1rem;}}
@media (max-width:46rem){.faits{grid-template-columns:1fr;}}

.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.7fr) minmax(0,.75fr);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:24rem;}}

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

/* ---------- Le prix : un billet ---------- */
.billet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--papier);color:var(--encre-papier);border-radius:1.2rem;position:relative;margin-top:2.5rem;}
.billet a{color:var(--encre-papier);}
.billet .talon{padding:clamp(1.6rem,4vw,3rem);border-right:3px dashed rgba(42,28,5,.35);position:relative;}
.billet .talon::before,.billet .talon::after{content:"";position:absolute;right:-1.05rem;width:2rem;height:2rem;border-radius:50%;background:var(--nuit);}
.billet .talon::before{top:-1rem;}
.billet .talon::after{bottom:-1rem;}
.billet .corps{padding:clamp(1.6rem,4vw,3rem);}
.montant{font:800 clamp(4rem,10vw,6.5rem)/.9 var(--titre);font-stretch:76%;letter-spacing:-.02em;margin:0 0 .3rem;}
.montant small{font-size:.32em;font-stretch:90%;font-weight:700;letter-spacing:0;margin-left:.35em;}
.barre{font:700 1.3rem/1.2 var(--titre);opacity:.6;text-decoration:line-through;text-decoration-thickness:2px;margin:0 0 .4rem;}
.tampon{display:inline-block;font:700 1.5rem/1.15 "Caveat","Segoe Print",cursive;color:#b0125a;border:2.5px solid #b0125a;border-radius:.5rem;padding:.25rem .7rem .35rem;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:500;}
.billet li::before{content:"✓";position:absolute;left:0;font-weight:700;}
.billet .actions{margin-bottom:.9rem;}
.lien-mac{margin:-.2rem 0 .9rem;font-size:.98rem;}
.lien-mac a{color:inherit;text-decoration:underline;text-underline-offset:.2em;}
.rappel .lien-mac{margin:1rem auto 0;text-align:center;}
.billet p{max-width:none;}
@media (max-width:50rem){
  .billet{grid-template-columns:1fr;}
  .billet .talon{border-right:0;border-bottom:3px dashed rgba(42,28,5,.35);}
  .billet .talon::before{top:auto;bottom:-1rem;left:-1rem;right:auto;}
  .billet .talon::after{right:-1rem;}
}

/* ---------- 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:700 1.2rem/1.3 var(--titre);font-stretch:92%;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(--turquoise);}
.questions details[open] summary::after{content:"–";}
.questions details p{color:var(--sourd);padding-right:1rem;}

/* ---------- Dernier appel et pied de page ---------- */
.rappel{text-align:center;background:linear-gradient(135deg,#3a0f3f,#1b1a52);}
.rappel h2{margin-bottom:.4em;}
.rappel p{margin-inline:auto;color:var(--sourd);}
.rappel .actions{justify-content:center;margin-top:1.6rem;}
.pied{padding:2.5rem 0 3rem;color:var(--sourd);font-size:.95rem;border-top:1px solid var(--trait);}
.pied p{max-width:52rem;margin-bottom:.6em;}
.pied a{color:var(--sourd);}

/* ---------- 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;margin-bottom:.6em;}
.texte h2{font-size:1.5rem;margin:2.2em 0 .5em;font-stretch:90%;}
.texte p,.texte li{color:var(--sourd);}
.texte p{max-width:none;}
.avis{background:#3b2a05;border-left:5px solid var(--ambre);color:var(--encre);padding:.9rem 1.1rem;border-radius:0 .6rem .6rem 0;margin:1.4rem 0;}

/* ---------- Le blind test, en option : une carte aux couleurs de cette autre application ---------- */
.bloc.voisin{padding-top:0;}
.carte-voisin{--creme:#fff3da;--brume:#c3b5e0;--encre-bt:#1d1238;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center;
  background:#2a1b4f;color:var(--creme);border-radius:1.2rem;padding:clamp(1.6rem,4vw,3rem);}
.carte-voisin h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:.5em;}
.carte-voisin .intro{color:var(--brume);margin-bottom:1.6rem;}
.carte-voisin .tuiles{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;}
.carte-voisin .tuiles li{display:flex;align-items:center;gap:.7rem;min-height:4.2rem;padding:.6rem .9rem;border-radius:1rem;background:var(--c);color:var(--encre-bt);font-weight:700;font-size:1.02rem;line-height:1.2;}
.carte-voisin .tuiles .a{--c:#ff6a5b;} .carte-voisin .tuiles .b{--c:#ffc53d;} .carte-voisin .tuiles .c{--c:#23cdb9;} .carte-voisin .tuiles .d{--c:#b9a0ff;}
.carte-voisin .lettre{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--encre-bt);color:var(--c);font:800 1rem/1 var(--titre);}
.voisin-prix{margin-bottom:1.2rem;max-width:none;}
.voisin-prix strong{color:#ffc53d;font-size:1.25em;}
.bouton.creme{background:var(--creme);color:var(--encre-bt);}
.bouton.creme:hover{background:#fff;color:var(--encre-bt);}
.voisin-seul{color:var(--brume);margin:-.6rem 0 1.2rem;max-width:none;}
.voisin-comme{color:var(--brume);margin:0;max-width:none;}
.scene-voisin{display:flex;flex-direction:column;align-items:flex-end;}
.scene-voisin .tele{width:100%;border-radius:.7rem;border:.4rem solid #0d0719;outline:1px solid #3b2869;overflow:hidden;background:#0d0719;box-shadow:0 30px 60px -22px rgba(0,0,0,.85);}
.scene-voisin .telephone{position:relative;left:auto;bottom:auto;z-index:2;width:min(11rem,46%);margin:-2rem 8% 0 0;outline-color:#3b2869;}
.note-apercu{border:2px dashed var(--ambre);border-radius:.8rem;padding:.7rem 1rem;color:var(--ambre);font-weight:600;font-size:.98rem;max-width:none;margin-bottom:1.5rem;}
@media (max-width:60rem){.carte-voisin{grid-template-columns:1fr;}.scene-voisin{max-width:26rem;margin:0 auto;width:100%;}}
@media (max-width:30rem){.carte-voisin .tuiles{grid-template-columns:1fr;}}

/* ---------- Formules en abonnement : trois billets, aux couleurs des petits papiers ---------- */

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}


/* ---------- Le choix du rythme : chaque mois / chaque année ---------- */
.bascule{display:inline-flex;gap:.3rem;padding:.3rem;border:2px solid var(--trait);border-radius:999px;margin-bottom:2rem;}
.bascule label{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-weight:700;padding:.6em 1.2em;border-radius:999px;color:var(--sourd);line-height:1.2;}
.bascule label:hover{color:#fff;}
.cadeau-an{font:700 1.25rem/1 "Caveat","Segoe Print",cursive;color:var(--ambre);white-space:nowrap;}
#per-mois:checked ~ .bascule label[for="per-mois"],
#per-an:checked ~ .bascule label[for="per-an"]{background:var(--encre);color:var(--nuit);}
#per-an:checked ~ .bascule label[for="per-an"] .cadeau-an{color:#b0125a;}
#per-mois:focus-visible ~ .bascule label[for="per-mois"],
#per-an:focus-visible ~ .bascule label[for="per-an"]{outline:3px solid var(--ambre);outline-offset:3px;}
#per-mois:checked ~ .passes .si-an,
#per-an:checked ~ .passes .si-mois{display:none;}

.fondateurs{border:2px dashed var(--ambre);border-radius:.8rem;padding:.8rem 1.1rem;color:var(--encre);max-width:none;margin:0;}
.fondateurs strong{color:var(--ambre);}

/* ---------- Les trois billets ---------- */
.passes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem;align-items:start;margin-top:3.4rem;}
.pass{--p:var(--papier);position:relative;display:flex;flex-direction:column;background:var(--p);color:var(--encre-papier);border-radius:1.2rem;}
.pass.basic{--p:#bff3ea;}
.pass.complete{--p:#ffc9e0;}
.pass.pro{box-shadow:0 30px 70px -28px rgba(255,183,3,.55);}
.pass .talon{position:relative;padding:1.7rem 1.6rem 1.4rem;border-bottom:3px dashed rgba(42,28,5,.35);}
.pass .talon::before,.pass .talon::after{content:"";position:absolute;bottom:-1rem;width:2rem;height:2rem;border-radius:50%;background:var(--nuit);}
.pass .talon::before{left:-1rem;}
.pass .talon::after{right:-1rem;}
.pass h3{font-size:1.9rem;font-weight:800;font-stretch:80%;}
.pass .pour{margin:.2rem 0 1.1rem;font-weight:600;opacity:.8;}
.pass .prix{font:800 clamp(3.2rem,5.2vw,4.4rem)/.9 var(--titre);font-stretch:76%;letter-spacing:-.02em;margin:0 0 .5rem;white-space:nowrap;}
.pass .prix small{font-size:.3em;font-stretch:90%;font-weight:700;letter-spacing:0;margin-left:.4em;}
.pass .detail{margin:0;font-size:.98rem;line-height:1.4;min-height:2.8em;}
.pass .detail s{opacity:.65;text-decoration-thickness:2px;}
.pass .corps{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1;}
.pass .plus{font-weight:700;margin:0 0 .7rem;}
.pass ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.55rem;font-size:1.02rem;line-height:1.4;}
.pass li{padding-left:1.6rem;position:relative;font-weight:500;}
.pass li::before{content:"✓";position:absolute;left:0;font-weight:700;}
.pass li.offert{margin-top:.5rem;padding:.7rem .8rem .7rem 2.4rem;border:2.5px solid #b0125a;border-radius:.6rem;font-weight:500;}
.pass li.offert::before{content:"";left:.7rem;top:.85rem;width:1.1rem;height:1rem;border:2.5px solid #b0125a;border-radius:.15rem;
  background:linear-gradient(#b0125a,#b0125a) center/2.5px 100% no-repeat,linear-gradient(#b0125a,#b0125a) left 35%/100% 2.5px no-repeat;}
.pass .bouton{margin-top:auto;}
.pass .tampon{position:absolute;right:1rem;bottom:calc(100% - .9rem);margin:0;z-index:1;background:var(--p);font-size:1.35rem;max-width:11rem;text-align:center;}
.sous-passes{margin:2.2rem 0 0;max-width:46rem;color:var(--sourd);}
@media (max-width:62rem){
  .passes{grid-template-columns:1fr;max-width:32rem;gap:3.6rem;}
  .pass.pro{order:-1;}
  .pass .detail{min-height:0;}
}
@media (max-width:26rem){
  .bascule{display:flex;}
  .bascule label{flex:1;justify-content:center;flex-direction:column;gap:.15rem;padding:.55em .6em;text-align:center;}
}

/* ---------- Combien par soirée ---------- */
.calcul{margin-top:3.2rem;border:1px solid var(--trait);border-radius:1.2rem;padding:clamp(1.3rem,3vw,2rem);background:var(--nuit);}
.calcul h3{margin-bottom:1rem;}
.calcul label{display:block;font-weight:600;margin-bottom:.6rem;}
.calcul output{display:inline-block;min-width:1.4em;text-align:center;color:var(--ambre);font:800 1.5rem/1 var(--titre);}
.calcul input[type=range]{width:min(100%,30rem);accent-color:var(--rose);height:2rem;margin:0 0 1.2rem;}
.calcul-resultats{list-style:none;margin:0 0 .8rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:36rem;}
.calcul-resultats li{display:flex;flex-direction:column;border-top:3px solid var(--c);padding-top:.6rem;}
.calcul-resultats li:nth-child(1){--c:#bff3ea;} .calcul-resultats li:nth-child(2){--c:var(--papier);} .calcul-resultats li:nth-child(3){--c:#ffc9e0;}
.calcul-resultats span{color:var(--sourd);font-weight:600;}
.calcul-resultats strong{font:800 clamp(1.5rem,5vw,2.2rem)/1.1 var(--titre);font-stretch:80%;font-variant-numeric:tabular-nums;white-space:nowrap;}
.calcul p{margin:0;}

/* ---------- Le tableau, ligne par ligne ---------- */
.defile{position:relative;overflow-x:auto;border-radius:1rem;border:1px solid var(--trait);}
.comparatif{border-collapse:collapse;width:100%;min-width:34rem;font-size:1.02rem;}
.comparatif th,.comparatif td{padding:.75rem 1rem;text-align:center;border-top:1px solid var(--trait);}
.comparatif thead th{border-top:0;font:800 1.25rem/1.2 var(--titre);font-stretch:85%;color:var(--encre-papier);width:17%;}
.comparatif thead th:nth-child(1){background:transparent;width:auto;}
.comparatif thead th:nth-child(2){background:#bff3ea;}
.comparatif thead th:nth-child(3){background:var(--papier);}
.comparatif thead th:nth-child(4){background:#ffc9e0;}
.comparatif tbody th[scope=row]{text-align:left;font-weight:500;color:var(--encre);}
.comparatif td{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.comparatif .groupe th{text-align:left;background:var(--scene);font:700 1.05rem/1.2 var(--titre);font-stretch:90%;color:var(--ambre);}
.comparatif .oui{color:var(--turquoise);font-size:1.2rem;}
.comparatif .non{color:var(--sourd);opacity:.55;}
@media (max-width:40rem){
  .comparatif{min-width:0;font-size:.86rem;table-layout:fixed;}
  .comparatif th,.comparatif td{padding:.6rem .3rem;}
  .comparatif tbody th[scope=row],.comparatif .groupe th{padding-left:.7rem;}
  .comparatif thead th{font-size:.92rem;width:19%;}
  .comparatif thead th:nth-child(1){width:43%;}
  .comparatif td{white-space:normal;}
}

/* ---------- Recherche de fichiers ---------- */
.exemples{list-style:none;margin:0 0 2.6rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;}
.exemples li{border:2px solid var(--trait);border-radius:999px;padding:.4em 1em .45em 2.3em;position:relative;background:var(--nuit);font-weight:500;}
.exemples li::before{content:"";position:absolute;left:.85em;top:50%;width:.7em;height:.7em;margin-top:-.5em;border:2px solid var(--turquoise);border-radius:50%;}
.exemples li::after{content:"";position:absolute;left:1.55em;top:50%;width:.4em;height:2px;margin-top:.22em;background:var(--turquoise);transform:rotate(45deg);}
#recherche .billet::before,#recherche .billet .talon::before,#recherche .billet .talon::after{background:var(--scene);}
#recherche .faits{margin-bottom:1rem;}

.pass li.note-langue{font-size:.92rem;font-weight:400;opacity:.8;}
.pass li.note-langue::before{content:"";}
.bouton.clair-voisin{background:transparent;color:var(--creme,#fff3da);border-color:#5a4690;}
.bouton.clair-voisin:hover{border-color:#fff3da;color:#fff;}
@media (max-width:52rem){.temps{grid-template-columns:minmax(0,1fr);}}

/* ---------- Les jeux de soirée (Carton Plein, Bonneteau) ---------- */
.jeux .intro{max-width:44rem;color:var(--sourd);}
.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(--scene);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(--ambre);}
.jeu p{margin:.4rem 0 .6rem;}
.jeu ul{margin:.4rem 0 1rem;padding-left:1.2rem;color:var(--sourd);}
.jeu li{margin:.25rem 0;}
.jeu-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.jeux-note{color:var(--sourd);}
