/* Mission 10.12 : les écrans qui suivent le premier. La nuit tombe à mesure qu'on descend, la mini-carte suit le trajet,
   et chaque écran a son mouvement : la mer de lamelles, le titre qui fume, les anneaux de texte, le téléphone. */
:root{--p:min(100vw / 1440,100svh / 900);--neon:#6ee7ff;interpolate-size:allow-keywords}
html.doux{scroll-behavior:smooth}
body{background:transparent}

/* Le ciel de nuit, fixe derrière les écrans : deux nappes d'étoiles qui glissent vers la gauche, à deux vitesses */
.ciel-nuit{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(ellipse 70% 45% at 72% -8%,rgba(122,64,200,.38),transparent 70%),
  radial-gradient(ellipse 60% 40% at 10% 110%,rgba(255,95,162,.14),transparent 70%),
  linear-gradient(180deg,#0b0620 0%,#110a30 50%,#170c38 100%)}
.ciel-nuit i{position:absolute;top:0;bottom:0;left:0;right:-420px;animation:nuit 90s linear infinite;background-size:420px 300px;background-image:
  radial-gradient(1.2px 1.2px at 30px 40px,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 120px 210px,rgba(255,240,220,.7),transparent),
  radial-gradient(1.4px 1.4px at 260px 90px,rgba(255,255,255,.85),transparent),radial-gradient(1px 1px at 340px 250px,rgba(200,220,255,.7),transparent),
  radial-gradient(1px 1px at 190px 30px,rgba(255,255,255,.6),transparent),radial-gradient(1.6px 1.6px at 395px 160px,rgba(255,230,200,.8),transparent),
  radial-gradient(1px 1px at 75px 280px,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 300px 15px,rgba(255,255,255,.5),transparent)}
.ciel-nuit i+i{right:-640px;opacity:.55;animation:nuit2 60s linear infinite;background-size:640px 460px;background-image:
  radial-gradient(1.8px 1.8px at 80px 120px,rgba(255,255,255,.9),transparent),radial-gradient(1.3px 1.3px at 420px 60px,rgba(255,220,240,.8),transparent),
  radial-gradient(1.5px 1.5px at 560px 380px,rgba(220,235,255,.8),transparent),radial-gradient(1.2px 1.2px at 250px 330px,rgba(255,255,255,.7),transparent)}
@keyframes nuit{to{transform:translateX(-420px)}}
@keyframes nuit2{to{transform:translateX(-640px)}}

/* Le premier écran passe au-dessus des suivants (son interface fixe reste devant), et s'assombrit quand on le quitte */
.mission{z-index:3}
.tete,.hud,.radar{z-index:10}
.scene::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:#0b0620;opacity:calc(var(--sortie,0) * .72)}

/* Sur ordinateur, l'interface du jeu reste à l'écran : onglets, étoiles et compteur, mini-carte */
@media (min-width:701px){
  .tete,.hud{position:fixed}
  .radar{position:fixed;transform-origin:0 100%;transition:scale .5s var(--entree)}
  html.loin .radar{scale:.72}
  /* un voile sombre derrière les onglets quand la page défile dessous */
  .tete::before{content:"";position:fixed;left:0;right:0;top:0;z-index:-1;height:calc(104 * var(--p));pointer-events:none;
    background:linear-gradient(180deg,rgba(11,6,32,.94) 40%,rgba(11,6,32,0));opacity:0;transition:opacity .3s ease}
  html.defile .tete::before{opacity:1}
}
.aller{display:grid;place-items:center;height:calc(42 * var(--p));padding:0 calc(18 * var(--p));background:var(--or);color:var(--encre);text-decoration:none;
  font:700 max(12px,calc(14 * var(--p)))/1 var(--texte);letter-spacing:.06em;text-transform:uppercase;
  opacity:0;translate:0 calc(-8 * var(--p));pointer-events:none;transition:opacity .25s ease,translate .3s var(--entree),background-color .2s ease}
html.loin .aller{opacity:1;translate:0 0;pointer-events:auto}
.balise{fill:#22123f;stroke:var(--creme);stroke-width:2.5;cursor:pointer;transition:fill .2s ease,stroke .2s ease}
.balise.ici{fill:var(--or);stroke:var(--or)}
.radar.suit .joueur{animation:none;opacity:1}

/* Le bouton d'achat dit combien de participations il donne */
.cta-txt{display:grid;gap:calc(5 * var(--p));text-align:left}
.achat.clos .cta{background:#8b7f9e;cursor:default}
.achat.clos .quantite,.achat.clos .tailles{opacity:.45;pointer-events:none}
.cta-txt i{font:700 max(10px,calc(12 * var(--p)))/1 var(--texte);font-style:normal;letter-spacing:.06em;opacity:.8}

/* Les écrans */
.ecran{position:relative;z-index:1;min-height:100svh;padding:calc(130 * var(--p)) calc(120 * var(--p)) calc(110 * var(--p))}
.js .ecran:not(.vu) [data-arrive]{opacity:0}
.ecran.vu [data-arrive]{animation:entre .7s var(--expo) var(--d,0s) both}
@keyframes entre{from{opacity:0;translate:0 calc(36 * var(--p))}to{opacity:1;translate:0 0}}

/* Titres en tracés vectoriels : sous le curseur, l'aplat s'efface et le tracé apparaît en pointillés, avec ses ancres */
.titre-v{display:block;line-height:0}
.vecto{display:block;height:calc(92 * var(--p));width:auto;max-width:100%;overflow:visible}
.vecto .p{fill:var(--or);stroke:#0a0518;stroke-width:84px;paint-order:stroke;stroke-linejoin:round;
  transition:fill-opacity .3s ease,stroke-width .3s var(--entree),stroke .2s ease}
.vecto .ancres{opacity:0;pointer-events:none;transition:opacity .2s ease}
.vecto .ancres rect{fill:#0b0620;stroke:var(--neon);stroke-width:8px}
.vecto .l.v .p{fill-opacity:0;stroke:var(--neon);stroke-width:10px;stroke-dasharray:48 30;animation:fourmis .8s linear infinite}
.vecto .l.v .ancres{opacity:1}
@keyframes fourmis{to{stroke-dashoffset:-78}}

/* Le lot : le titre se condense dans la fumée au-dessus d'une mer de lamelles */
.lot-ecran{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:calc(56 * var(--p));text-align:left;overflow:hidden;padding-top:calc(120 * var(--p))}
.lot-col{display:grid;justify-items:start}
.lot-ecran .recompense{justify-self:stretch;width:100%}
.mer{position:absolute;inset:0;z-index:-1}
.mer canvas{display:block;width:100%;height:100%}
.recompense{position:relative;max-width:100%}
.recompense .vecto{width:100%;height:auto}
/* le titre du lot arrive lettre après lettre, en impact (blanc, puis or), et un reflet le traverse de temps en temps */
.impact .l{transform-box:fill-box;transform-origin:50% 55%}
.js .ecran:not(.vu) .impact .l{opacity:0}
.ecran.vu .impact .l{animation:impact .6s var(--expo) calc(var(--depart,0s) + .1s + var(--i) * .065s) both}
.ecran.vu .impact .p{animation:eclair .7s ease-out calc(var(--depart,0s) + .1s + var(--i) * .065s) both}
@keyframes impact{0%{opacity:0;scale:1.8}30%{opacity:1}100%{opacity:1;scale:1}}
@keyframes eclair{0%,25%{fill:#fff}100%{fill:var(--or)}}
.impact .reflet{transform-box:fill-box;transform:translateX(-150%);animation:balaie-titre 6s linear calc(var(--depart,0s) + 1.6s) infinite}
@keyframes balaie-titre{0%{transform:translateX(-150%)}24%,100%{transform:translateX(480%)}}
.lot-texte{max-width:calc(700 * var(--p));margin-top:calc(22 * var(--p));font:600 max(16px,calc(23 * var(--p)))/1.4 var(--texte);text-shadow:0 2px 6px rgba(5,2,15,.8)}
.chances{display:flex;align-items:stretch;gap:calc(10 * var(--p));margin-top:calc(28 * var(--p));list-style:none}
/* le butin : la jaquette du jeu en carte inclinée, la boîte de la PS5 qui flotte devant, au-dessus d'un anneau de ramassage */
.butin{position:relative;height:calc(500 * var(--p))}
/* à l'échelle réelle : la boîte du jeu (17,1 cm de haut) fait la moitié de la hauteur de celle de la console ;
   le jeu se tient devant le coin droit de la console, les deux flottent ensemble au-dessus d'un seul anneau */
.objets{position:absolute;inset:0;animation:flotte 3.8s ease-in-out infinite alternate}
.boite{position:absolute;left:calc(-20 * var(--p));bottom:calc(90 * var(--p));width:calc(520 * var(--p))}
.boite img,.jeu img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(24 * var(--p)) calc(24 * var(--p)) rgba(3,1,10,.62))}
.jeu{position:absolute;left:calc(375 * var(--p));bottom:calc(76 * var(--p));width:calc(132 * var(--p))}
.jeu::after{content:"";position:absolute;inset:0;border-radius:calc(4 * var(--p));pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%) no-repeat;background-size:260% 100%;background-position:160% 0;
  animation:reflet-boite 6.5s linear 1.2s infinite}
@keyframes reflet-boite{0%,78%{background-position:160% 0}100%{background-position:-60% 0}}
@keyframes flotte{from{translate:0 0}to{translate:0 calc(-12 * var(--p))}}
.socle-lot{position:absolute;left:calc(6 * var(--p));bottom:calc(48 * var(--p));width:calc(530 * var(--p));height:calc(78 * var(--p));pointer-events:none}
.socle-lot b{position:absolute;inset:0;border-radius:50%;border:calc(3 * var(--p)) solid rgba(255,198,41,.9);
  background:radial-gradient(closest-side,rgba(255,198,41,.08),rgba(255,198,41,.28));box-shadow:0 0 calc(26 * var(--p)) calc(5 * var(--p)) rgba(255,198,41,.4)}
.socle-lot i{position:absolute;inset:0;border-radius:50%;border:calc(2 * var(--p)) solid rgba(255,198,41,.7);opacity:0;animation:onde 3.3s linear infinite}
.socle-lot i+i{animation-delay:-1.65s}
.chances li{display:grid;justify-items:center;align-content:end;gap:calc(7 * var(--p));min-width:calc(250 * var(--p));padding:calc(16 * var(--p)) calc(18 * var(--p));
  background:var(--verre);border-top:calc(3 * var(--p)) solid var(--or)}
.pictos{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-end;gap:calc(4 * var(--p));width:calc(84 * var(--p));min-height:calc(26 * var(--p))}
.pictos svg{width:calc(24 * var(--p));height:calc(24 * var(--p));fill:var(--or)}
.ecran.vu .pictos svg{animation:apparait .4s var(--expo) calc(.42s + var(--i) * .035s) both}
@keyframes apparait{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.chances b{font:700 max(15px,calc(22 * var(--p)))/1 var(--texte);color:var(--or)}
.chances li > span:last-child{font:600 max(13px,calc(17 * var(--p)))/1.15 var(--texte)}
.dates{margin-top:calc(14 * var(--p));padding:calc(10 * var(--p)) calc(18 * var(--p));background:var(--verre);font:600 max(11px,calc(14 * var(--p)))/1.5 var(--texte);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,244,234,.84);text-shadow:0 2px 6px rgba(5,2,15,.85)}

/* Le t-shirt : en grand, entouré de ses anneaux de texte, et sa fiche avec l'achat */
.vitrine{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:calc(48 * var(--p));padding-left:calc(150 * var(--p))}
.scene-v{position:relative;display:grid;justify-items:center}
.tshirt-v{position:relative;width:100%;height:calc(600 * var(--p));touch-action:pan-y;cursor:grab}
.tshirt-v.saisi{cursor:grabbing}
.tshirt-v canvas,.tshirt-v .fixe{position:absolute;inset:0;width:100%;height:100%}
.tshirt-v canvas{opacity:0;transition:opacity .4s ease}
.tshirt-v .fixe{object-fit:contain;padding:9%}
.tshirt-v.pret canvas{opacity:1}
.tshirt-v.pret .fixe{visibility:hidden}
.socle{position:absolute;left:50%;top:calc(548 * var(--p));width:calc(400 * var(--p));height:calc(70 * var(--p));transform:translate(-50%,-50%);pointer-events:none}
.socle b{position:absolute;inset:0;border-radius:50%;border:calc(3 * var(--p)) solid rgba(255,198,41,.9);
  background:radial-gradient(closest-side,rgba(255,198,41,.08),rgba(255,198,41,.28));box-shadow:0 0 calc(30 * var(--p)) calc(6 * var(--p)) rgba(255,198,41,.4)}
.socle i{position:absolute;inset:0;border-radius:50%;border:calc(2 * var(--p)) solid rgba(255,198,41,.7);opacity:0;animation:onde 3.3s linear infinite}
.socle i+i{animation-delay:-1.65s}
.faces{display:flex;gap:calc(10 * var(--p));margin-top:calc(6 * var(--p))}
.faces button{display:flex;align-items:center;gap:calc(10 * var(--p));height:calc(56 * var(--p));padding:0 calc(16 * var(--p)) 0 calc(6 * var(--p));
  border:1.5px solid rgba(255,244,234,.45);background:var(--verre);color:var(--creme);cursor:pointer;touch-action:manipulation;
  font:700 max(12px,calc(14 * var(--p)))/1 var(--texte);letter-spacing:.06em;text-transform:uppercase;transition:background-color .15s ease,color .15s ease}
.faces button:active{scale:.97}
.faces button[aria-pressed="true"]{background:var(--creme);color:var(--encre)}
.faces img{width:calc(40 * var(--p));height:calc(44 * var(--p));object-fit:cover;object-position:50% 22%;background:#efe7df}
.astuce{margin-top:calc(12 * var(--p));font:600 max(11px,calc(12 * var(--p)))/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,244,234,.66)}
.fiche{display:grid;gap:calc(22 * var(--p));align-content:center;max-width:calc(520 * var(--p))}
.fiche-texte{font:500 max(15px,calc(19 * var(--p)))/1.5 var(--texte);color:rgba(255,244,234,.9)}
.fiche-prix{display:flex;align-items:center;gap:calc(16 * var(--p));font:600 max(12px,calc(14 * var(--p)))/1.35 var(--texte);letter-spacing:.08em;text-transform:uppercase}
.prix-v{display:flex;align-items:center}
.prix-v img{height:calc(46 * var(--p));width:auto;margin-left:calc(-6 * var(--p))}
.prix-v .chf{margin-left:calc(6 * var(--p))}
.fiche-infos{display:grid;gap:calc(5 * var(--p))}
.fiche-infos div{display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(40 * var(--p));padding:0 calc(14 * var(--p));background:var(--verre)}
.fiche-infos dt{font:600 max(10px,calc(12 * var(--p)))/1 var(--texte);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,244,234,.82)}
.fiche-infos dd{font:700 max(13px,calc(17 * var(--p)))/1 var(--texte)}
.achat-fiche{position:relative;left:auto;top:auto;z-index:auto;animation:none;grid-template-columns:minmax(0,1fr) auto}

/* Le reel : un téléphone qui attend la vidéo */
.reel-ecran{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:calc(90 * var(--p));padding-right:calc(220 * var(--p))}
.reel-texte{display:grid;gap:calc(24 * var(--p));max-width:calc(560 * var(--p))}
.reel-texte p{font:500 max(15px,calc(20 * var(--p)))/1.5 var(--texte);color:rgba(255,244,234,.9)}
.telephone{position:relative;width:calc(300 * var(--p));aspect-ratio:9/19;padding:calc(10 * var(--p));border-radius:calc(46 * var(--p));rotate:-5deg;
  background:linear-gradient(160deg,#2b2048,#0d0820 40%,#1d1438);
  box-shadow:inset 0 0 0 1.5px rgba(255,244,234,.18),0 calc(40 * var(--p)) calc(80 * var(--p)) rgba(3,1,10,.6),0 0 calc(70 * var(--p)) rgba(255,95,162,.2)}
.ecran-tel{position:relative;height:100%;border-radius:calc(37 * var(--p));overflow:hidden;background:linear-gradient(180deg,#2c1466 0%,#6b2492 42%,#ee7388 74%,#f9a878 100%)}
.ecran-tel::before{content:"";position:absolute;left:50%;top:calc(10 * var(--p));z-index:3;width:calc(74 * var(--p));height:calc(22 * var(--p));border-radius:99px;background:#06030f;transform:translateX(-50%)}
.ecran-tel::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent);transform:translateY(-100%);animation:balaye 4.5s linear infinite}
@keyframes balaye{0%{transform:translateY(-100%)}70%,100%{transform:translateY(340%)}}
.logo-tel{position:absolute;left:50%;top:11%;width:80%;height:auto;translate:-50% 0}
.affiche{position:absolute;left:50%;top:24%;width:96%;height:auto;translate:-50% 0}
.bientot{position:absolute;left:0;right:0;bottom:15%;text-align:center;font:700 max(12px,calc(15 * var(--p)))/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 6px rgba(5,2,15,.7)}
.defile-tel{position:absolute;left:0;bottom:0;display:flex;width:max-content;padding:calc(10 * var(--p)) 0;background:var(--or);color:var(--encre);
  font:700 max(11px,calc(13 * var(--p)))/1 var(--texte);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;animation:defile 12s linear infinite}
@keyframes defile{to{transform:translateX(-50%)}}

/* Le règlement : un menu de jeu, une ligne par point */
.reglement{display:grid;grid-template-columns:minmax(0,420fr) minmax(0,760fr);gap:calc(80 * var(--p));align-items:start;overflow:clip}
/* derrière le règlement, deux lueurs dérivent vers la gauche, sans jamais revenir */
.reglement::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:-1;width:200%;pointer-events:none;background-repeat:repeat-x;background-size:50% 100%;
  background-image:radial-gradient(ellipse 34% 42% at 22% 62%,rgba(255,95,162,.24),transparent 70%),radial-gradient(ellipse 26% 34% at 74% 28%,rgba(110,231,255,.16),transparent 70%);
  animation:derive 22s linear infinite}
.regl-tete{display:grid;gap:calc(22 * var(--p));position:sticky;top:calc(130 * var(--p))}
.regl-tete p{font:500 max(15px,calc(19 * var(--p)))/1.5 var(--texte);color:rgba(255,244,234,.88)}
.articles{display:grid;gap:calc(6 * var(--p))}
.articles details{background:var(--verre)}
.articles summary{display:flex;align-items:center;gap:calc(16 * var(--p));min-height:calc(58 * var(--p));padding:0 calc(20 * var(--p));list-style:none;cursor:pointer;
  font:700 max(14px,calc(18 * var(--p)))/1.2 var(--texte);letter-spacing:.06em;text-transform:uppercase;transition:background-color .15s ease,color .15s ease}
.articles summary::-webkit-details-marker{display:none}
.articles summary b{min-width:2ch;color:var(--or);font-variant-numeric:tabular-nums}
.articles summary::after{content:"";margin-left:auto;width:calc(11 * var(--p));height:calc(11 * var(--p));border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -25%;transition:rotate .25s var(--entree),translate .25s var(--entree)}
.articles details[open] summary{position:relative;overflow:hidden;background:var(--creme);color:var(--encre)}
.articles details[open] summary::before{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,198,41,.45),transparent);transform:translateX(-130%);animation:reflet 5.5s linear 1s infinite}
.articles details[open] summary b{color:var(--encre)}
.articles details[open] summary::after{rotate:225deg;translate:0 25%}
.articles details p{padding:calc(18 * var(--p)) calc(20 * var(--p)) calc(22 * var(--p));max-width:68ch;font:500 max(15px,calc(17 * var(--p)))/1.6 var(--texte);color:rgba(255,244,234,.9)}
.articles details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--entree),content-visibility .3s allow-discrete}
.articles details[open]::details-content{block-size:auto}

.pied{position:relative;z-index:1;display:grid;justify-items:start;gap:calc(12 * var(--p));padding:calc(56 * var(--p)) calc(120 * var(--p)) calc(64 * var(--p)) calc(330 * var(--p));
  border-top:1px solid rgba(255,244,234,.12);font:500 max(12px,calc(13 * var(--p)))/1.5 var(--texte);color:rgba(255,244,234,.74)}
.pied img{height:calc(22 * var(--p));width:auto}
.pied a{color:var(--creme)}

@media (hover:hover) and (pointer:fine){
  .aller:hover{background:#ffd457}
  .balise:hover{stroke:var(--or)}
  .faces button[aria-pressed="false"]:hover{background:rgba(255,244,234,.14)}
  .articles details:not([open]) summary:hover{background:rgba(255,244,234,.12)}
}

@media (max-width:700px){
  :root{--p:calc(100vw / 390)}
  .aller{display:none}
  .ecran{min-height:0;padding:calc(72 * var(--p)) calc(16 * var(--p)) calc(64 * var(--p))}
  .vecto{height:calc(56 * var(--p))}
  .lot-ecran{grid-template-columns:1fr;gap:calc(22 * var(--p));justify-items:center;text-align:center;min-height:calc(760 * var(--p));padding-top:calc(64 * var(--p))}
  .lot-col{display:contents}
  .recompense{order:1}
  .butin{order:2}
  .lot-texte{order:3}
  .chances{order:4}
  .dates{order:5}
  .butin{width:100%;height:calc(270 * var(--p))}
  .boite{left:calc(-14 * var(--p));bottom:calc(44 * var(--p));width:calc(300 * var(--p))}
  .jeu{left:calc(214 * var(--p));bottom:calc(36 * var(--p));width:calc(76 * var(--p))}
  .socle-lot{left:0;bottom:calc(18 * var(--p));width:calc(320 * var(--p));height:calc(42 * var(--p))}
  .recompense .vecto{height:auto;width:100%}
  .lot-texte{font-size:16px}
  .chances{width:100%;gap:calc(6 * var(--p))}
  .chances li{flex:1;min-width:0;padding:calc(12 * var(--p)) calc(6 * var(--p))}
  .pictos{width:calc(70 * var(--p));min-height:calc(22 * var(--p));gap:calc(3 * var(--p))}
  .pictos svg{width:calc(20 * var(--p));height:calc(20 * var(--p))}
  .chances b{font-size:15px}
  .chances li > span:last-child{font-size:13px}
  .dates{letter-spacing:.06em}
  .vitrine{grid-template-columns:1fr;gap:calc(28 * var(--p));padding-left:calc(16 * var(--p))}
  .tshirt-v{height:calc(380 * var(--p))}
  .socle{top:calc(350 * var(--p));width:calc(250 * var(--p));height:calc(44 * var(--p))}
  .faces button{height:calc(48 * var(--p))}
  .achat-fiche{display:none!important}
  .reel-ecran{grid-template-columns:1fr;justify-items:center;gap:calc(40 * var(--p));padding-right:calc(16 * var(--p))}
  .telephone{width:calc(230 * var(--p))}
  .reglement{grid-template-columns:1fr;gap:calc(28 * var(--p))}
  .regl-tete{position:static}
  .pied{padding:calc(40 * var(--p)) calc(16 * var(--p)) calc(180 * var(--p))}
}

/* Le reel est là (11/11/2026) : la vidéo joue dans l'écran du téléphone, au format 9:16 */
.telephone.avec-video{aspect-ratio:9/16.6;rotate:-3deg}
.telephone.avec-video .ecran-tel{background:#06030f}
.telephone.avec-video .ecran-tel::before,.telephone.avec-video .ecran-tel::after{display:none}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#06030f}
@media (max-width:700px){
  .telephone.avec-video{width:calc(300 * var(--p));rotate:-2deg}
}

/* Partage de secours (navigateurs intégrés sans partage ni copie) */
.partage-repli{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;max-width:100%}
.partage-repli input{flex:1 1 100%;min-width:0;font:inherit;font-size:16px;color:var(--creme);background:rgba(12,6,32,.84);border:2px solid rgba(255,244,234,.35);padding:.7em .9em}
.partage-repli a{flex:1 1 0;text-align:center;padding:.8em .6em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--encre);background:var(--or);text-decoration:none}