/* ==============================================================
   SHOTAI — MAQUETTE D : ce qui change pour suivre le Figma de Quentin
   (« LANDING PAGE », 23/10). Les fonds : vert pâle (primary/green/100)
   pour la présentation, les modèles, RSVP et « Dans la poche » ; un
   panneau Nuit arrondi pour les widgets ; le rouge pour « T'attends
   quoi ? » ; les titres en PP Woodland 57 px, vert 900, en haut à gauche.
   ============================================================== */
@font-face { font-family: "Rules"; src: url("../assets/fonts/Rules-Medium.otf") format("opentype"); font-weight: 500; font-display: block; }
:root { --pale: #F2FFC5; --vert-900: #3D5B0C; --vert-50: #FAFFE4; --rouge-50: #FFF2ED; --f-rules: "Rules", "Instrument Sans", sans-serif; }

/* ---------- LES WIDGETS DU FIGMA (js/figw.js) ---------- */
.fw { position: relative; width: 316px; border-radius: 10px; color: #F3F3F4; font-family: var(--f-texte); text-align: left; }
.fw-bento { position: absolute; inset: 0; border-radius: 10px; background: rgba(37, 37, 39, 0.8); box-shadow: inset 0 0 0 0.924px #444546; -webkit-backdrop-filter: blur(36.96px); backdrop-filter: blur(36.96px); }
.fw > *:not(.fw-bento) { position: relative; }
.fw-texte { height: 316px; padding: 8.3px 14.8px; }
.fw-texte .fw-t { margin: 0; font-weight: 600; font-size: 54.02px; line-height: 1.22; color: #F1ADFA; }
.fw-texte.fw-small { height: 71px; }
.fw-texte.fw-small .fw-t { font-size: 24.02px; color: #fff; padding-right: 30px; }
.fw-coin { position: absolute !important; right: 14.8px; top: 14.8px; width: 29.6px; height: 29.6px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.08); color: #F3F3F4; font-size: 14.8px; }
.fw-sondage { height: 316px; padding: 18.48px; display: flex; flex-direction: column; gap: 14.8px; }
.fw-q { margin: 0; height: 44.35px; display: flex; align-items: center; padding: 0 11.1px; font-weight: 500; font-size: 14.78px; }
.fw-opts { display: flex; flex-direction: column; gap: 11.1px; width: 279px; }
.fw-opt { display: flex; align-items: center; gap: 11.1px; height: 44.35px; padding: 0 22.2px; border-radius: 10px; background: rgba(90, 90, 90, 0.3); font-weight: 500; font-size: 14.78px; white-space: nowrap; }
.fw-opt.choisi { background: rgba(141, 201, 255, 0.3); color: #EFF7FF; }
.fw-case { flex: none; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1.4px currentColor; }
.fw-opt.choisi .fw-case { background: #8DC9FF; box-shadow: inset 0 0 0 1.4px #8DC9FF, inset 0 0 0 3.5px #2c3a4a; }
.fw-votes { margin-left: auto; padding: 3px 7px; border-radius: 5px; background: #8DC9FF; color: #162755; font-size: 10.5px; font-weight: 600; }
.fw-ascenseur { position: absolute; right: -14px; top: 0; width: 2.8px; height: 50.8px; border-radius: 37px; background: #4D4D51; }
.fw-bt { display: flex; align-items: center; justify-content: center; height: 44.35px; border-radius: 8px; font-weight: 600; font-size: 14.78px; white-space: nowrap; }
.fw-sondage .fw-bt { margin-top: auto; }
.fw-bt-bleu { background: #8DC9FF; box-shadow: inset 0 0 0 0.924px #5DAEFD; color: #162755; }
.fw-bt-jaune { flex: 1; background: #FCF63A; box-shadow: inset 0 0 0 0.924px #F9E816; color: #422806; }
.fw-album-img { width: 316px; height: 316px; }
.fw-album-img img { width: 100%; height: 100%; display: block; border-radius: 10px; }
.fw-album { height: 316px; padding: 14.8px; display: flex; flex-direction: column; gap: 22.2px; }
.fw-tete { display: flex; align-items: center; gap: 9.24px; }
.fw-tuile { flex: none; width: 40.66px; height: 40.66px; border-radius: 8px; display: grid; place-items: center; font-size: 29.6px; }
.fw-jaune { background: #FCF63A; box-shadow: inset 0 0 0 0.54px #F9E816; color: #422806; }
.fw-violet { background: #6F30F9; box-shadow: inset 0 0 0 0.54px #5F1CE5; color: #fff; }
.fw-noms { display: flex; flex-direction: column; gap: 3.7px; }
.fw-noms small { font-size: 11.09px; line-height: 14.8px; color: #AEAFB2; }
.fw-noms b { font-size: 16.63px; line-height: 16.63px; font-weight: 600; color: #fff; }
.fw-photos { flex: 1; display: flex; align-items: center; justify-content: center; }
.fw-ph { width: 93px; height: 123px; border-radius: 5.5px; object-fit: cover; box-shadow: 0 0 18.5px rgba(0,0,0,0.25); margin-right: -13.4px; }
.fw-ph.a { rotate: -8deg; } .fw-ph.c { rotate: 8deg; margin-right: 0; }
.fw-plus { position: absolute !important; left: 50%; top: calc(50% - 22px); translate: -50% -50%; width: 29.6px; height: 29.6px; border-radius: 50%; display: grid; place-items: center; background: #FCF63A; box-shadow: inset 0 0 0 0.924px #F9E816; color: #422806; font-size: 18.5px; }
.fw-pied { display: flex; gap: 5.5px; }
.fw-carre-bt { flex: none; width: 44.35px; height: 44.35px; border-radius: 8px; display: grid; place-items: center; background: #F3F3F4; box-shadow: inset 0 0 0 0.924px #E6E6E7; color: #4D4D51; font-size: 22.2px; }
.fw-lien { height: 152.5px; padding: 14.8px; display: flex; gap: 9.24px; }
.fw-lien-g { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11.1px; }
.fw-site { min-width: 0; font-size: 11.09px; line-height: 12px; font-weight: 500; color: #AEAFB2; }
.fw-lien-t { margin: auto 0; font-size: 14.78px; line-height: 17.56px; font-weight: 500; color: #F3F3F4; }
.fw-lien-img { flex: none; width: 169px; height: 123px; border-radius: 6px; object-fit: cover; object-position: 50% 30%; }

/* ---------- LA PAGE « 30 ans avec les copains » ---------- */
.fp { position: relative; width: 1330.56px; height: 831.6px; border-radius: 19.8px; overflow: hidden; background: linear-gradient(71.8deg, #131313 51.5%, #363636 102.46%); color: #F3F3F4; font-family: var(--f-texte); text-align: left; }
.fp-fond { position: absolute; left: -369.6px; top: -509.1px; width: 2069.76px; height: 2708.24px; max-width: none; pointer-events: none; }
.fp-menu { position: absolute; left: 0; top: 0; width: 100%; height: 53.6px; display: flex; align-items: center; justify-content: space-between; padding: 0 22.2px; }
.fp-logo { width: 93.3px; height: 16.6px; display: block; }
.fp-menu-d { display: flex; gap: 9.24px; align-items: center; }
.fp-groupe { display: flex; }
.fp-groupe > span { display: inline-flex; align-items: center; gap: 5.5px; padding: 9.24px 11.09px; background: #F3F3F4; box-shadow: inset 0 0 0 0.924px #E6E6E7; color: #4D4D51; font-size: 12.01px; font-weight: 600; line-height: 16.6px; white-space: nowrap; }
.fp-groupe > span:first-child { border-radius: 5.5px 0 0 5.5px; } .fp-groupe > span:last-child { border-radius: 0 5.5px 5.5px 0; }
.fp-groupe .ico, .fp-creer .ico { font-size: 14.8px; }
.fp-creer { display: inline-flex; align-items: center; gap: 5.5px; padding: 9.24px 11.09px; border-radius: 6px; background: var(--lime); box-shadow: inset 0 0 0 0.924px var(--lime-500); color: var(--lime-950); font-size: 12.01px; font-weight: 600; line-height: 16.6px; white-space: nowrap; }
.fp-col { position: absolute; left: 169.3px; top: 92.4px; width: 316px; display: flex; flex-direction: column; gap: 22.2px; }
.fp-carte { position: relative; width: 316px; height: 480.5px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 0.924px #F3F3F4, 0 3.7px 138.6px rgba(0,0,0,0.3); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 16.6px; padding: 22.2px; }
.fp-photo { position: absolute; left: -147.9px; top: -164.1px; width: 620.9px; height: 847.3px; max-width: none; object-fit: cover; }
/* (le flou du bas de la carte : une copie floutée de la photo, fondue vers le haut — un backdrop-filter
   masqué floutait toute la carte dans Chrome) */
.fp-photo-flou { filter: blur(18.5px); -webkit-mask-image: linear-gradient(180deg, transparent 47%, #000 72%); mask-image: linear-gradient(180deg, transparent 47%, #000 72%); }
.fp-filtre { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38.3%, rgba(0,0,0,0.5) 65.2%), linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 97.5%); }
.fp-filtre::after { content: ""; position: absolute; inset: 0; }
.fp-carte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.924px #F3F3F4; pointer-events: none; }
.fp-cadenas { position: absolute; left: 21.25px; top: 21.25px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #F3F3F4; box-shadow: inset 0 0 0 0.924px #E6E6E7, 0 0 11.5px rgba(0,0,0,0.25); color: #4D4D51; font-size: 11.1px; }
.fp-infos { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 11.1px; }
.fp-orga { display: inline-flex; align-items: center; gap: 5.5px; height: 31.4px; padding: 0 9px 0 7.4px; border-radius: 999px; background: rgba(0,0,0,0.3); box-shadow: inset 0 0 0 0.924px #E6E6E7; -webkit-backdrop-filter: blur(46px); backdrop-filter: blur(46px); font-size: 14.78px; font-weight: 600; color: #fff; white-space: nowrap; }
.fp-orga img { width: 18.5px; height: 18.5px; border-radius: 50%; }
.fp-titre { margin: 0; font-family: var(--f-titre); font-size: 27.72px; line-height: 27.72px; color: #E6E6E7; }
.fp-ligne { margin: 0; display: flex; align-items: center; gap: 5.5px; height: 31.4px; font-size: 14.78px; font-weight: 500; color: #E6E6E7; white-space: nowrap; }
.fp-ligne .ico { font-size: 14.8px; margin: 0 6.5px; }
.fp-ligne .ico:last-child { margin: 0; }
.fp-lien { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 36.96px; min-width: 36.96px; border-radius: 999px; color: #F3F3F4; overflow: hidden; white-space: nowrap; }
.fp-lien-ico { flex: none; display: grid; place-items: center; width: 36.96px; height: 36.96px; font-size: 18.5px; }
.fp-lien-url { display: inline-block; max-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; opacity: 0; }
.fp-cal { display: flex; align-items: center; justify-content: center; gap: 5.5px; padding: 9.24px 11.09px; border-radius: 6px; background: #F3F3F4; box-shadow: inset 0 0 0 0.924px #E6E6E7; color: #4D4D51; font-size: 12.01px; font-weight: 600; line-height: 16.6px; }
.fp-cal .ico { font-size: 14.8px; }
.fp-invites { display: flex; flex-direction: column; gap: 12.9px; padding: 11.1px; border-radius: 9.24px; background: rgba(37,37,39,0.7); box-shadow: inset 0 0 0 0.924px #444546; -webkit-backdrop-filter: blur(27.7px); backdrop-filter: blur(27.7px); }
.fp-invites > p { margin: 0; text-align: center; font-size: 11.09px; font-weight: 600; color: #fff; }
.fp-chiffres { display: flex; gap: 5.5px; justify-content: center; }
.fp-chiffres span { width: 93.6px; display: flex; flex-direction: column; align-items: center; padding: 12px 0; border-radius: 6px; background: rgba(50,50,52,0.3); box-shadow: inset 0 0 0 0.924px rgba(68,69,70,0.3); font-size: 9.24px; line-height: 14.8px; color: #CFD0D2; font-weight: 600; }
.fp-chiffres b { font-size: 18.48px; color: #F3F3F4; }
.fp-inviter { display: flex; align-items: center; justify-content: center; gap: 5.5px; padding: 10.2px 12px; border-radius: 6px; background: #323234; box-shadow: inset 0 0 0 0.924px #444546; color: var(--lime); font-size: 11.95px; font-weight: 500; }
.fp-inviter .ico { font-size: 16.6px; }
.fp-place { position: absolute; --pl: 1; }
.fp-pointilles { position: absolute; inset: 0; border-radius: 10px; border: 1.5px dashed rgba(243,243,244,0.22); opacity: var(--pl); }
.fp-w { position: relative; }
.fp-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 92.2%, #000 106%); mix-blend-mode: multiply; pointer-events: none; }
.fp-rsvp { position: absolute; left: 50%; bottom: 25.9px; width: 360px; height: 155px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3.7px; }
.fp-ombre { position: absolute; left: 50%; bottom: -23px; width: 241px; height: 137px; translate: -50% 0; border-radius: 139px 139px 0 0; background: rgba(0,0,0,0.92); filter: blur(41.6px); }
.fp-rsvp img { position: relative; width: 85px; height: 85px; }
.fp-rsvp p { position: relative; margin: 0; height: 29.6px; display: flex; align-items: center; font-size: 12.94px; font-weight: 600; color: #F8F8F9; white-space: pre; }
.fp-rsvp p span { color: #FC4121; }

/* ---------- LA PRÉSENTATION « Un lien qui crée du lien » (v2, Figma du 25/10) ---------- */
/* la section, sous le plateau (l'accueil glisse et la découvre) */
.pres { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--pale); visibility: hidden; color: var(--lime-950); --pr-k: 1; }
#plateau { z-index: 1; }
.pr-int { position: absolute; inset: 0; will-change: transform; }
.pr-titre { position: absolute; left: calc(80px * var(--pr-k)); top: calc(160px * var(--pr-k)); margin: 0; font-family: var(--f-titre); font-weight: 400; font-size: calc(57px * var(--pr-k)); line-height: 1.02; color: var(--lime-950); }
.pr-l { display: block; white-space: nowrap; }
/* (Quentin, 27/10 : « remonte un peu le titre, qu'il y ait moins d'espace entre les dots et lui ») 40 → 20 */
.pr-pied { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(20px * var(--pr-k)); }
/* les points « gooey » : un dessin de 92 × 22 à l'échelle de la section ; les boutons sont posés dessus */
.pr-points { position: relative; width: calc(92px * var(--pr-k)); height: calc(22px * var(--pr-k)); pointer-events: auto; }
.pp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pp-d { fill: var(--lime-950); }   /* (une seule couleur : deux couleurs se mélangent en bavure là où les gouttes fondent) */
.pp-goutte { fill: var(--lime-950); }
.pp-zone { position: absolute; left: 0; top: 0; width: calc(92px * var(--pr-k)); height: calc(22px * var(--pr-k)); }
.pp-bt { pointer-events: auto; position: absolute; top: calc(-2px * var(--pr-k)); width: calc(26px * var(--pr-k)); height: calc(26px * var(--pr-k)); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.pp-bt:focus-visible { outline: 2px solid var(--lime-950); outline-offset: 2px; }
.pr-legende { position: relative; width: 100%; height: calc(70px * var(--pr-k)); }
.pr-leg { position: absolute; left: 0; right: 0; top: 0; text-align: center; color: var(--vert-900); }
.pr-leg p { margin: 0; white-space: nowrap; }
.pr-leg-t { font-family: var(--f-rules); font-weight: 500; font-size: calc(30px * var(--pr-k)); line-height: calc(37px * var(--pr-k)); }
.pr-leg-d { margin-top: calc(6px * var(--pr-k)) !important; font-size: calc(17px * var(--pr-k)); line-height: 1.4; opacity: 0.8; }
/* l'objet, AU-DESSUS du plateau : la carte part de l'accueil et finit dans le manège */
.po { position: fixed; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.po-ancre { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; }
.po-pivot { position: absolute; left: -171px; top: -260px; width: 342px; height: 520px; transform-style: preserve-3d; will-change: transform; }
.po-dos { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #0A0E08; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 30px 70px rgba(30, 51, 0, 0.28); transform: scaleX(-1); visibility: hidden; }
.po-dos i { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(32px) saturate(1.5); }
.po-dos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 60%), rgba(10, 14, 8, 0.5); }
.po-dos svg { position: absolute; left: 50%; top: 50%; width: 176px; transform: translate(-50%, -50%); fill: #fff; opacity: 0.24; z-index: 2; }   /* (lu à l'endroit quand la carte est de dos) */
.po-lueur { position: absolute; inset: 4% -6% 18% -6%; border-radius: 40px; background: rgba(193, 253, 58, 0.42); filter: blur(70px); }
.pc { box-shadow: 0 30px 70px rgba(30, 51, 0, 0.28), 0 10px 22px rgba(30, 51, 0, 0.16); }
.pc-ph { position: absolute; inset: 0; }
.pc-ph img.c-photo { position: absolute; left: 0; top: 0; width: 100%; height: 55%; object-fit: cover; }
.pc-ph img.c-miroir { position: absolute; left: 0; top: 55%; width: 100%; height: 55%; object-fit: cover; transform: scaleY(-1); }
/* (Quentin, 26/10 : « baisse un peu le flou, qu'il commence plus bas dans la carte ») */
.pc-ph img.c-flou { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(16px) saturate(1.1); -webkit-mask-image: linear-gradient(to bottom, transparent 54%, #000 74%); mask-image: linear-gradient(to bottom, transparent 54%, #000 74%); }
.pc-ph-qu { opacity: 0; }
.pc-orga { display: inline-grid; } .pc-orga > span { grid-area: 1 / 1; white-space: nowrap; } .pc-orga .pc-qu { opacity: 0; }
/* chaque champ : la valeur de Léa (qui s'efface), ce qu'on tape, le curseur, l'indication grise */
.pc-v { position: relative; display: inline-flex; align-items: center; min-height: 1em; }
.pc-champ .pc-lea { position: absolute; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; }
.pc-titre .pc-lea { white-space: normal; width: 290px; }
.pc-titre .pc-v { display: block; min-height: 30px; }
.pc-titre .pc-lea { top: 0; translate: none; }
.pc-saisie { white-space: pre-wrap; }
.pc-indice { color: rgba(243, 243, 244, 0.4); opacity: 0; white-space: nowrap; }
.pc-champ.rempli .pc-indice { display: none; }
.pc-caret { display: none; width: 2px; height: 1.05em; margin: 0 2px; background: var(--lime); vertical-align: -0.12em; animation: pr-clignote 1s steps(1) infinite; }
.pc-champ.ecrit .pc-caret { display: inline-block; }
.pc-titre .pc-caret { height: 26px; }
/* le bouton de la carte : « Copier le lien » (carte de l'accueil, du manège) ou « Créer mon évènement » (carte à remplir) */
.pc-bouton { display: inline-grid; place-items: center; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.pc-bouton > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* (en opacité, pas en visibilité : un « visible » sur un enfant percerait la carte cachée pendant ses retournements) */
.pcb-creer { opacity: 0; }
.pc.mode-creer .pcb-copier { opacity: 0; }
.pc.mode-creer .pcb-creer { opacity: 1; }
.pc.mode-creer .pc-bouton { padding: 0 22px; color: rgba(243, 243, 244, 0.38); font-weight: 600; }
.pc.mode-creer.pret .pc-bouton { background: var(--lime); color: var(--lime-950); box-shadow: inset 0 0 0 1px var(--lime-500); }
/* (le nom de l'évènement tient sur deux lignes : on les réserve d'avance, rien ne saute quand il passe à la ligne) */
.pc.mode-creer .pc-titre .pc-v { min-height: 60px; }
/* la toupie et la grille à la main */
.po-pivot { cursor: grab; }
.po-grille.interactif .pg-bloc { pointer-events: auto; touch-action: none; cursor: grab; }
.pg-poignee { position: absolute; left: 50%; bottom: -9px; width: 56px; height: 22px; translate: -50% 0; display: grid; place-items: center; opacity: 0; pointer-events: none; touch-action: none; cursor: ns-resize; transition: opacity 0.25s; z-index: 2; }
.pg-poignee i { width: 30px; height: 5px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--o), 0 2px 6px rgba(0, 0, 0, 0.25); }
.po-grille.interactif .pg-poignee { opacity: 1; pointer-events: auto; }
.pp-pilule { cursor: pointer; }
@keyframes pr-clignote { 50% { opacity: 0; } }
/* les faces (grille, lien), à l'échelle de la section, centrées sous le titre */
.po-faces { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; perspective: 1200px; }
.po-face { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; visibility: hidden; }
.po-tuiles { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; }
/* 2. les blocs : pleins, ils prennent la couleur du widget et son ombre franche (le 950) */
.pg-bloc { position: absolute; width: 174px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1.5px rgba(61, 91, 12, 0.22); color: var(--o); transform-origin: 50% 50%; will-change: transform; }
/* la couleur du widget, qui s'ouvre en cercle depuis la tuile qui se pose (clip-path posé par js/presentation.js) */
.pg-remplir { position: absolute; inset: 0; border-radius: inherit; background: var(--c); box-shadow: inset 0 0 0 0.6px var(--b); clip-path: circle(0px at 50% 50%); }
.pg-ico { position: relative; z-index: 1; opacity: 0; }
/* l'ombre portée du Figma (7 px, franche, le 950 du widget), comme un objet à part posé au sol */
.pg-ombre { position: absolute; width: 174px; border-radius: 8px; background: var(--o); transform-origin: 50% 50%; opacity: 0; }
.pg-ico { display: grid; place-items: center; font-size: 32px; }
.pg-tuile { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--c); box-shadow: inset 0 0 0 0.6px var(--b), 0 8px 18px rgba(30, 51, 0, 0.18); color: var(--o); font-size: 32px; }
/* 3. le lien et les potes */
.pp-pote { position: absolute; left: 0; top: 0; width: 70px; height: 70px; }
.pp-tete { width: 70px; height: 70px; border-radius: 50%; display: block; box-shadow: 0 12px 26px rgba(30, 51, 0, 0.2); }
.pp-rep { position: absolute; right: -18px; top: -18px; width: 40px; height: 40px; opacity: 0; }
.pp-envoi { position: absolute; left: 0; top: 0; z-index: 4; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--lime-950); font-size: 17px; box-shadow: 0 8px 18px rgba(30, 51, 0, 0.25); opacity: 0; }
.pp-pilule { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 10.5px; padding: 19.2px 22.7px; border-radius: 115px; background: #F3F3F4; box-shadow: inset 0 0 0 1.75px #E6E6E7, 0 18px 40px rgba(30, 51, 0, 0.16); color: #4D4D51; font-size: 24.43px; line-height: 31.4px; font-weight: 600; white-space: nowrap; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.pp-pilule.copie-ok { background: var(--lime); color: var(--lime-950); box-shadow: inset 0 0 0 1.75px var(--lime-500), 0 18px 40px rgba(30, 51, 0, 0.2); }
.pp-ico { position: relative; display: inline-grid; place-items: center; width: 31.4px; height: 31.4px; font-size: 31.4px; }
.pp-ico > * { grid-area: 1 / 1; }
.pp-coche { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.pp-bulle { position: absolute; left: 0; top: 0; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 8px; background: #fff; color: var(--lime-950); font-size: 17px; font-weight: 600; white-space: nowrap; box-shadow: 0 12px 26px rgba(30, 51, 0, 0.18); opacity: 0; }
.pp-doigt { position: absolute; left: 0; top: 0; z-index: 6; width: 26px; height: 26px; border-radius: 50%; background: rgba(11, 17, 1, 0.85); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.75); opacity: 0; }
/* au téléphone */
/* (Quentin, 27/10 : « bien distinguer swipe et interaction ») le navigateur ne garde que le défilement vertical (et le
   zoom à deux doigts) : tout geste horizontal revient au site (la carte, le manège, le passage d'une anim à l'autre) */
html.tel, html.tel body { touch-action: pan-y pinch-zoom; }
html.tel .pr-titre { left: var(--marge); top: calc(var(--barre) + 30px); font-size: calc(36px * var(--pr-k)); }
html.tel .pr-leg-t { font-size: calc(22px * var(--pr-k)); line-height: 1.25; }
html.tel .pr-leg-d { font-size: 15px; }

/* ---------- LE PLATEAU, LA BARRE, LES VOLETS ---------- */
/* (la barre sur le vert pâle : le 950 du vert, comme sur le lime) */
.barre-fixe.sur-pale { color: var(--lime-950); }
.barre-fixe.sur-pale .btn-verre { background: rgba(255, 255, 255, 0.55); border-color: rgba(30, 51, 0, 0.14); color: var(--lime-950); }
/* le volet couvre tout le plateau ; sa forme (coins, bosse) est un clip-path posé par js/main.js */
#volet { inset: 0; height: auto !important; border-radius: 0 !important; transform: none !important; }

/* (maquette D) la timeline de gauche n'existe pas dans le Figma */
#sections .tl { display: none !important; }

/* ---------- LES TITRES DES SECTIONS (js/sections.js), comme le Figma ---------- */
html:not(.tel) .sec-bloc { left: calc(80px * var(--pr-k)); top: calc(var(--sec-haut, 160px) * var(--pr-k)); transform: translateY(var(--decal, 0px)); width: auto; }
.sec-titre { position: relative; font-size: calc(57px * var(--pr-k)); line-height: 1.02; letter-spacing: 0; white-space: nowrap; }
/* (Quentin, 26/10) une courte description sous certains titres (widgets, RSVP) */
.sec-desc:empty { display: none; }
html:not(.tel) .sec-bloc.a-pastille .sec-desc { margin-top: calc(40px * var(--pr-k)); }
html:not(.tel) .sec-desc { margin-top: calc(18px * var(--pr-k)); max-width: calc(560px * var(--pr-k)); font-size: calc(18px * var(--pr-k)); line-height: 1.45; }
html:not(.tel) .sec-actions { margin-top: calc(34px * var(--pr-k)); width: 400px; }
/* (Quentin, 26/10) tous les titres sur le vert pâle en primary-green-950, comme celui de la présentation */
.sec-bloc.sur-pale { --enc: var(--lime-950); --doux: rgba(30, 51, 0, 0.66); --trait: rgba(30, 51, 0, 0.18); --point: var(--lime-950); }
.sec-bloc:not(.sur-pale):not(.sur-rouge):not(.sur-clair-d):not(.sur-ciel):not(.sur-lime) { --enc: var(--vert-50); }
.sec-bloc.sur-rouge { --enc: var(--rouge-50); --doux: rgba(255, 242, 237, 0.8); }
.sec-pastille { position: absolute; left: 12.2em; top: 5.15em; display: inline-flex; align-items: center; padding: 0.2em 0.667em; border-radius: 999px; background: var(--lime); box-shadow: inset 0 0 0 1.667px var(--lime-500); font-family: var(--f-texte); font-weight: 500; font-size: 0.351em; line-height: 1.5; color: var(--lime-950); white-space: nowrap; transform-origin: 50% 50%; }
/* (au téléphone, la bande de couleur derrière le titre — c.css — prend le vert pâle ; le titre tient sur la largeur) */
.sec-bloc.sur-pale { --fond-sec: #F2FFC5; }
html.tel .sec-titre { font-size: clamp(24px, 7.2vw, 38px); }

/* ---------- LES MODÈLES (le décor du Figma) ---------- */
#theme, #modBadges, #mot { display: none !important; }
.mod-cercle { position: absolute; left: 0; top: 0; z-index: -1; width: 789px; height: 789px; pointer-events: none; visibility: hidden; transform-origin: 50% 50%; }
.mod-flottants { position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; }
.mod-flot { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; padding: 0.3em 0.667em; border-radius: 999px; background: #F3F3F4; box-shadow: inset 0 0 0 2px #E6E6E7, 0 0 30px rgba(0, 0, 0, 0.15); font-weight: 500; line-height: 1.5; color: #4D4D51; white-space: nowrap; pointer-events: auto; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.mod-flot:hover, .mod-flot.actif { background: var(--lime); color: var(--lime-950); box-shadow: inset 0 0 0 2px var(--lime-500), 0 0 30px rgba(0, 0, 0, 0.15); }
.mod-voir { position: absolute; left: 0; top: 0; translate: -50% -50%; height: auto; padding: 1.05em 1.17em; border-radius: 8px; font-size: 18px; line-height: 1; pointer-events: auto; white-space: nowrap; }

/* ---------- LES WIDGETS (section du Figma) ---------- */
.sw { position: absolute; inset: 0; z-index: 6; visibility: hidden; pointer-events: none; }
.sw-page { position: absolute; left: 0; top: 0; width: 1330.56px; height: 831.6px; transform-origin: 50% 50%; }
.sw-page .fp { box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5); }
.sw-page .fp-w { opacity: 0; }
.sw-vol { position: absolute; left: 0; top: 0; width: 316px; height: 316px; transform-origin: 50% 50%; border-radius: 10px; will-change: transform; }
.sw-vol > div { position: absolute; left: 0; top: 0; width: 316px; }
.sw-vol .sw-b { opacity: 0; }
.sw-vol[data-k="texte"] { overflow: hidden; }
.sw-bulle { left: 0; top: 0; }
/* le bouton-lien de la carte : l'icône seule, qui se déroule en pilule */
.fp-lien.bouton-lien { width: 36.96px; height: 36.96px; padding: 0 12px; justify-content: flex-start; gap: 8px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(243, 243, 244, 0.35); }
.fp-lien.bouton-lien:not(.deroule) { padding: 0; justify-content: center; }
.fp-lien.bouton-lien .pl-ico { font-size: 18px; }
.fp-lien.bouton-lien.deroule .pl-ico { font-size: 14px; }
.fp-lien.bouton-lien .pl-txt { flex: none; }
.fp-lien.bouton-lien:not(.deroule) .pl-txt { display: none; }
.fp-lien .pl-fond { background: var(--lime); }

/* ---------- RSVP, « Dans la poche », le pied de page ---------- */
#ivHalo { display: none !important; }
.iv .nom { color: rgba(30, 51, 0, 0.62) !important; }
/* le champ e-mail sur le vert pâle : blanc, liseré vert */
.sec-bloc.sur-pale .al-champ { background: #fff; box-shadow: inset 0 0 0 1px rgba(30, 51, 0, 0.16); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sec-bloc.sur-pale .al-champ:focus-within { box-shadow: inset 0 0 0 1.5px var(--lime-500); }
.sec-bloc.sur-pale .al-champ .ico, .sec-bloc.sur-pale .al-champ input { color: var(--lime-950); }
.sec-bloc.sur-pale .al-champ input::placeholder { color: rgba(30, 51, 0, 0.45); }
/* le pied passe SOUS le rouge, dont les coins du bas s'arrondissent (le Figma) */
.pied { z-index: 0; margin-top: calc(-1 * var(--r-pied, 80px)); padding-top: calc(56px + var(--r-pied, 80px)); border-radius: 0; box-shadow: none; overflow: hidden; }
html.tel .pied { --r-pied: 36px; }
/* (le Figma : le centre de l'ellipse est 143 px sous le bas du pied ; seul son haut, flouté, éclaire le bas) */
.pied > *:not(.pd-lueur) { position: relative; z-index: 1; }
html.tel .mod-flottants { z-index: 30; }

/* (on fait tourner les cartes, on attrape les widgets : rien ne doit se sélectionner ni se « glisser » comme une image) */
.po, .s1-pivot, .pp-pilule { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.po img, .s1-pivot img { -webkit-user-drag: none; }

/* ---------- LE CURSEUR COMMENTÉ, discret (26/10) : la pointe toujours visible, une petite étiquette à côté ---------- */
#curseur.geste .cu-point { transform: scale(0.8); }
.cu-geste { left: 13px; top: 15px; height: 26px; padding: 0 10px 0 8px; gap: 5px; font-size: 12.5px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); transform-origin: 0 0; }
.cu-ico svg { width: 12px; height: 12px; }
#curseur.sans-ico .cu-geste { padding-left: 10px; }
#curseur.sans-ico .cu-ico { display: none; }
/* sur le vert pâle : la pointe et l'étiquette en vert 950, le mot en lime (bien lisibles) */
#curseur.sur-pale .cu-point, #curseur.sur-pale .cu-geste { background: var(--lime-950); color: var(--lime); }
#curseur.sur-pale .cu-point { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }

/* (26/10) pendant que l'accueil glisse, une copie de son texte, de son bouton et de ses émojis passe AU-DESSUS de la
   carte qui descend : la carte passe sous le texte de l'accueil (js/main.js, rendrePlateau) */
.s1-dessus { position: fixed; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; will-change: transform; }
.s1-dessus .phrase, .s1-dessus .s1-actions, .s1-dessus .objets { pointer-events: none !important; }
/* (26/10) le lien d'un widget : la flèche de sortie à droite */
.w-lien .wl-coin { position: absolute; right: 16px; top: 50%; translate: 0 -50%; color: #AEAFB2; font-size: 18px; display: grid; }

/* ---------- (26/10) LA GALERIE « Tous les modèles » : par-dessus tout, fond pâle, les pages évènement en réduction ---------- */
.gal { position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain; background: var(--pale); color: var(--lime-950); padding: 0 80px 120px; }
.gal[hidden] { display: none; }
.gal-tete { padding: 120px 0 48px; max-width: 760px; }
.gal-titre { margin: 0; font-family: var(--f-titre); font-weight: 400; font-size: 57px; line-height: 1.02; color: var(--lime-950); }
.gal-sous { margin: 18px 0 0; font-size: 18px; line-height: 1.45; color: var(--vert-900); max-width: 560px; }
.gal-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
/* (les filtres reprennent les badges flottants des modèles) */
.gal-filtre { padding: 8px 16px; border: 0; border-radius: 999px; background: #F3F3F4; box-shadow: inset 0 0 0 2px #E6E6E7; font: 500 16px/1.4 inherit; font-family: inherit; color: #4D4D51; cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.gal-filtre:hover, .gal-filtre.actif { background: var(--lime); color: var(--lime-950); box-shadow: inset 0 0 0 2px var(--lime-500); }
.gal-fermer { position: fixed; right: 32px; top: 28px; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--lime-950); color: var(--lime); font-size: 22px; cursor: pointer; transition: transform 0.25s; }
.gal-fermer:hover { transform: rotate(90deg); }
.gal-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.gal-item { display: block; color: inherit; text-decoration: none; content-visibility: auto; contain-intrinsic-size: auto 520px; }
.gal-item[hidden] { display: none; }
.gal-cadre { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; border-radius: 18px; background: #0B1101; box-shadow: 0 24px 60px -20px rgba(30, 51, 0, 0.45); transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s; }
.gal-item:hover .gal-cadre { transform: translateY(-6px); box-shadow: 0 34px 70px -22px rgba(30, 51, 0, 0.55); }
.gal-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.gal-legende { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.gal-theme { padding: 4px 12px; border-radius: 999px; background: var(--lime); box-shadow: inset 0 0 0 2px var(--lime-500); font-size: 14px; font-weight: 500; white-space: nowrap; }
.gal-legende b { flex: 1; min-width: 0; font-family: var(--f-rules); font-weight: 500; font-size: 22px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-utiliser { flex: none; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s; }
.gal-item:hover .gal-utiliser, .gal-item:focus-visible .gal-utiliser { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .gal { padding: 0 16px 80px; }
  .gal-tete { padding: 88px 0 32px; }
  .gal-titre { font-size: 40px; }
  .gal-sous { font-size: 16px; }
  .gal-fermer { right: 16px; top: 16px; width: 44px; height: 44px; }
  /* (au téléphone : deux colonnes de vignettes, le haut de chaque page ; toute la vignette mène au modèle) */
  .gal-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .gal-item { contain-intrinsic-size: auto 360px; }
  .gal-cadre { aspect-ratio: 390 / 640; border-radius: 14px; }
  .gal-utiliser { display: none; }
  .gal-legende { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
  .gal-theme { font-size: 12px; padding: 3px 9px; }
  .gal-legende b { font-size: 15px; width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .gal-filtre { font-size: 14px; padding: 6px 12px; }
}

/* ---------- (26/10) LES WIDGETS EN PLUS : Lien Large, Cagnotte, Map (même grammaire que le Figma) ---------- */
.fw-lien-l { height: 316px; padding: 14.8px; display: flex; flex-direction: column; gap: 14.8px; }
.fw-lien-l-img { width: 100%; height: 190px; border-radius: 6px; object-fit: cover; object-position: 50% 30%; display: block; }
.fw-lien-l .fw-noms b { line-height: 1.2; }
.fw-lien-l .fw-coin { top: auto; bottom: 14.8px; }
.fw-orange { background: #FC4121; box-shadow: inset 0 0 0 0.54px #ED1B09; color: #440608; }
.fw-cagnotte { height: 316px; padding: 14.8px; display: flex; flex-direction: column; gap: 14.8px; }
.fw-cagnotte.fw-rect { height: 147px; gap: 11.1px; }
.fw-cagnotte .fw-noms { flex: 1; min-width: 0; }
.fw-cg-mini { font-family: var(--f-titre); font-weight: 400; font-size: 26px; line-height: 1; color: #fff; }
.fw-cg-montant { display: flex; align-items: baseline; gap: 9px; margin-top: auto; }
.fw-cg-montant b { font-family: var(--f-titre); font-weight: 400; font-size: 54px; line-height: 0.9; color: #fff; }
.fw-cg-montant small { font-size: 13px; color: #AEAFB2; }
.fw-cg-barre { height: 7px; border-radius: 9px; background: rgba(255,255,255,0.1); overflow: hidden; }
.fw-cg-barre i { display: block; width: 80%; height: 100%; border-radius: inherit; background: #FC4121; transform-origin: 0 50%; }
.fw-cg-gens { display: flex; align-items: center; }
.fw-cg-gens img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #252527; margin-right: -7px; }
.fw-cg-gens span { margin-left: 16px; font-size: 12.5px; color: #AEAFB2; }
.fw-bt-orange { background: #FC4121; box-shadow: inset 0 0 0 0.924px #ED1B09; color: #440608; }
.fw-cagnotte.fw-rect .fw-bt { height: 38px; }
.fw-carte { height: 316px; overflow: hidden; border-radius: 10px; box-shadow: inset 0 0 0 0.924px #444546; }
.fw-carte.fw-rect { height: 147px; }
.fw-plan { position: absolute !important; inset: 0; width: 100%; height: 100%; }
.fw-pin { position: absolute !important; left: 50%; top: 52%; width: 34px; height: 34px; margin: -34px 0 0 -17px; display: grid; place-items: center; border-radius: 50% 50% 50% 4px; rotate: -45deg; background: #C1FD3A; box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
.fw-pin .ico { rotate: 45deg; font-size: 16px; color: #1E3300; }
.fw-carte.fw-rect .fw-pin { top: 62%; }
.fw-adresse { position: absolute !important; left: 11px; top: 11px; height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(11, 17, 1, 0.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); font-size: 12.5px; font-weight: 500; white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fw-adresse .ico { font-size: 13px; }
.fw-bt-blanc { position: absolute !important; left: 14.8px; right: 14.8px; bottom: 14.8px; gap: 8px; background: #F3F3F4; box-shadow: inset 0 0 0 0.924px #E6E6E7; color: #1E1E1F; }
/* le bouton de l'organisateur (le « + Widgets » de l'app), en bas de sa page */
.fp-orga-bas { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; }
.fp-orga-bt { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: #C1FD3A; box-shadow: inset 0 0 0 1px #99E300, 0 12px 30px rgba(0,0,0,0.45); color: #1E3300; font-weight: 600; font-size: 16px; }
.fp-orga-bt .ico { font-size: 18px; }

/* ---------- (26/10) LE CARROUSEL DES WIDGETS (ordinateur) ---------- */
.sw-it { position: absolute; left: 0; top: 0; width: 316px; transform-origin: 158px 158px; cursor: grab; pointer-events: auto; user-select: none; -webkit-user-select: none; touch-action: pan-y; visibility: hidden; }
.sw-it:active { cursor: grabbing; }
.sw-it img { -webkit-user-drag: none; user-drag: none; }
.sw-carte { position: relative; width: 316px; height: 316px; }
.sw-nom { margin: 24px 0 0; font-family: var(--f-rules); font-weight: 500; font-size: 26px; line-height: 1.1; color: #F3F3F4; }
.sw-desc { margin: 8px 0 0; max-width: 300px; font-size: 15px; line-height: 1.45; color: #AEAFB2; }
/* à son entrée, chaque widget joue sa petite animation, puis la rejoue en boucle (Quentin, 27/10).
   (Quentin, 28/10 : « la cagnotte, le sondage et la carte doivent être en boucle ping-pong, afin qu'on ne voie pas la
   différence entre la fin et le début ») EN PING-PONG : l'animation se joue à l'endroit, tient, puis se rejoue à
   l'envers (animation-direction: alternate) ; la fin rejoint toujours le début, sans saut. Le Texte s'écrit au
   clavier (js : rendreCarrousel) ; l'album et la cagnotte comptent en direct (js : animerWidgetD) */
@keyframes swMonte { 0% { opacity: 0; transform: translateY(16px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes swGauche { 0% { opacity: 0; transform: translateX(26px); } 26%, 100% { opacity: 1; transform: none; } }
@keyframes swBarre { 0% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } }
@keyframes swZoom { 0% { transform: scale(1.14); } 50%, 100% { transform: scale(1); } }
/* (l'image de l'album contient son en-tête : à peine zoomée, pour ne jamais le rogner) */
@keyframes swZoomDoux { 0% { transform: scale(1.05); } 50%, 100% { transform: scale(1); } }
@keyframes swTuile { 0% { transform: scale(0) rotate(-25deg); } 26%, 100% { transform: none; } }
/* la Map : la ville entière, puis on plonge jusqu'à l'adresse où le repère tombe ; à l'envers, il remonte et on
   ressort jusqu'à la ville */
@keyframes swCarte { 0%, 8% { transform: scale(1); } 62%, 100% { transform: scale(3.2); } }
@keyframes swPin { 0%, 60% { transform: translateY(-46px); opacity: 0; } 78%, 100% { transform: none; opacity: 1; } }
:is(.sw-it, .wt-fw).pop .fw-tuile, :is(.sw-it, .wt-fw).pop .fw-lien-l-img { animation-duration: 2.8s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both; }
:is(.sw-it, .wt-fw).pop .fw-tuile { animation-name: swTuile; animation-delay: 0.2s; animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
:is(.sw-it, .wt-fw).pop .fw-opt { animation-name: swGauche; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
:is(.sw-it, .wt-fw).pop .fw-opt:nth-child(1) { animation-delay: 0.15s; } :is(.sw-it, .wt-fw).pop .fw-opt:nth-child(2) { animation-delay: 0.23s; } :is(.sw-it, .wt-fw).pop .fw-opt:nth-child(3) { animation-delay: 0.31s; }
:is(.sw-it, .wt-fw).pop .fw-lien-l-img { animation-name: swZoom; animation-timing-function: ease-in-out; }
:is(.sw-it, .wt-fw).pop .fw-plan-g, :is(.sw-it, .wt-fw).pop .fw-pin { animation-duration: 3.6s; animation-delay: 0.2s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both; }
:is(.sw-it, .wt-fw).pop .fw-plan-g { animation-name: swCarte; animation-timing-function: cubic-bezier(.45,0,.25,1); }
:is(.sw-it, .wt-fw).pop .fw-pin { animation-name: swPin; animation-timing-function: cubic-bezier(.3,1.5,.5,1); }
:is(.sw-it, .wt-fw).pop .fw-album-img, :is(.sw-it, .wt-fw).pop .fw-lien-l-cadre { overflow: hidden; }
.sw-it .fw-album-img { overflow: hidden; border-radius: 10px; }

/* ---------- (27/10) TÉLÉPHONE, SECTION WIDGETS ---------- */
/* les noms des widgets, en clair sur la nuit (ils étaient gris foncé : illisibles) */
.wt-nom { color: #F3F3F4; }
/* le lien en Medium / Large : la pochette à droite, le service et le titre à gauche, « Ouvrir » en bas */
.wl-riche { position: absolute; inset: 0; }
.wl-image { position: absolute; right: 14px; top: 14px; width: 128px; height: calc(100% - 28px); border-radius: 8px; object-fit: cover; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.wl-tuile { position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; }
.wl-site { position: absolute; left: 66px; top: 20px; right: 156px; font-size: 12px; line-height: 16px; color: #AEAFB2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-titre { position: absolute; left: 16px; right: 156px; top: 66px; font-size: 18px; line-height: 22px; font-weight: 600; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-ouvrir { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 13px; font-weight: 600; color: #F3F3F4; }
.wl-ouvrir .ico { font-size: 13px; }
/* la page de la fin : la bannière et ses infos, le bouton-lien, puis les widgets en réduction */
.wtp { position: absolute; left: 0; top: 0; width: 342px; height: 736px; transform-origin: 0 0; visibility: hidden; }
.wtp-tete { position: absolute; left: 0; top: 0; width: 342px; height: 230px; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08); }
.wtp-tete img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.wtp-tete > i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,17,1,0) 30%, rgba(11,17,1,0.92) 100%); }
.wtp-infos { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; color: #F3F3F4; }
.wtp-orga { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.wtp-orga .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #C1FD3A; color: #1E3300; font-size: 12px; }
.wtp-titre { margin: 0; font-family: var(--f-titre); font-size: 30px; line-height: 1.02; }
.wtp-ligne { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #D9D9DC; }
.wtp .wt-lien { position: absolute; left: 0; top: 242px; width: 342px; justify-content: center; background: #1C2414; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 16px 34px rgba(0,0,0,0.3); }
/* (27/10) la cagnotte : le titre s'arrête avant le montant (il passait dessous) */
.w-cagnotte .w-tete { right: 112px; }
.w-cagnotte .w-noms b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* (Quentin, 28/10 : « aucun widget présenté sur cette section dans le défilement ne doit être en small ou medium »)
   au téléphone, la Cagnotte et le Lien défilent en Large. La Cagnotte : le montant en grand, sous lui les visages
   de ceux qui ont participé, le bouton en bas (à la hauteur de celui du Sondage) */
.w-cagnotte[data-forme="carre"] .w-tete { right: 16px; }
.w-cagnotte[data-forme="carre"] .wc-montant { left: 16px; right: auto; top: 98px; font-size: 76px; }
.w-cagnotte[data-forme="carre"] .wc-ligne { top: 184px; }
.wc-gens { position: absolute; left: 16px; right: 16px; top: 218px; display: flex; align-items: center; }
.wc-gens img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #10140B; }
.wc-gens img + img { margin-left: -8px; }
.wc-gens span { margin-left: 10px; font-size: 13px; color: var(--d300); }
/* le Lien en Large : l'aperçu (la pochette de la playlist) en grand en haut, le service et le titre dessous,
   « Ouvrir » en bas — comme le lien Large du carrousel à l'ordinateur */
/* la taille que le widget reprend en se posant dans la page de la fin : par-dessus le Large, cachée jusqu'au vol
   (30 px plus bas : la hauteur de l'étiquette « 04 Cagnotte ») */
.wt-item > .w.wt-pose { position: absolute; left: 0; top: 30px; opacity: 0; }

/* (Quentin, 28/10 : « un bug sur le zoom de la page évènement sur le bouton lien ») pendant que la caméra s'approche,
   l'adresse du bouton-lien restait floue : le navigateur la dessinait une fois, petite, puis l'agrandissait comme une
   image (à cause de « will-change »). Sans lui, elle se redessine nette à chaque taille */
.bouton-lien .pl-txt > span { will-change: auto; }

/* (Quentin, 28/10 : « les bords arrondis apparaissent d'un coup au scroll ») LES RALLONGES : le fond d'une section qui
   part vers le haut continue un peu sous le bord de l'écran, coins du bas arrondis ; ils entrent donc avec le
   défilement au lieu de s'allumer au premier pixel. Celle de l'accueil suit la feuille (js : rendrePlateau) */
.rallonge { position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 0; background: #0B1101; visibility: hidden; pointer-events: none; will-change: transform; }
/* celle du rouge de la fin : collée sous le plateau (le pied de page passe 1 rayon dessous), 1,25 rayon de haut ;
   le contenu du pied de page descend d'autant */
.pied { padding-top: calc(56px + 2.25 * var(--r-pied, 80px)); }
.pied::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--r-pied, 80px) - 1px); height: calc(1.25 * var(--r-pied, 80px) + 1px); background: #FC4121; border-radius: 0 0 var(--r-pied, 80px) var(--r-pied, 80px); pointer-events: none; }
/* (28/10) la bannière de l'after (Shotgun, 16:9) : centrée, on n'en rogne que les bords */
.fw-lien-l-img, .fw-lien-img { object-position: 50% 50%; }

/* ---------- (Quentin, 28/10) LA SECTION WIDGETS, SUITE ---------- */
/* le Texte s'écrit au clavier : le curseur rose qui clignote au bout */
.fw-caret { display: inline-block; width: 0.06em; height: 0.92em; margin-left: 0.04em; vertical-align: -0.1em; border-radius: 2px; background: #F1ADFA; animation: clignote 1s steps(1) infinite; }
/* (« quand la souris passe sur un widget, qu'il se mette un peu en avant ») il monte, grandit un peu, son ombre
   s'allonge ; à la souris seulement */
.sw-carte { border-radius: 10px; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .sw-it:hover { z-index: 3; }
  .sw-it:hover .sw-carte { transform: translateY(-12px) scale(1.04); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55); }
}
/* le Sondage : la pastille bleue de l'app, la question en gras */
.fw-bleu { background: #8DC9FF; box-shadow: inset 0 0 0 0.54px #5DAEFD; color: #162755; }
.fw-sondage .fw-noms b { font-weight: 700; line-height: 1.2; }
/* le Lien en Large, comme dans l'app : la pastille et le site, le nom (3 lignes au plus), l'aperçu dans le reste */
.fw-lien-l { gap: 0; }
.fw-lien-l .fw-site { font-size: 13.86px; line-height: 1.2; }
.fw-lien-nom { margin: 0; padding: 10.16px 0; font-size: 18.48px; line-height: 1.3; font-weight: 500; color: #F3F3F4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fw-lien-l-cadre { flex: 1; min-height: 0; border-radius: 5.54px; overflow: hidden; }
.fw-lien-l .fw-lien-l-img { height: 100%; border-radius: 0; }
/* la Map : vue de près partout (la page, l'envol) ; seul le carrousel joue le zoom depuis la ville */
.fw-plan-g { transform-box: view-box; transform-origin: 500px 520px; transform: scale(3.2); }
.fw-carte.fw-rect .fw-pin { top: 54%; }
/* la carte de l'évènement : la pastille « Évènement privé » (EventCardSmall), et les lignes de l'app (LigneCarte) */
.fp-prive { position: absolute; left: 21.25px; top: 21.25px; z-index: 2; display: inline-flex; align-items: center; gap: 5.5px; padding: 5.5px 7.4px; border-radius: 999px; background: #F3F3F4; box-shadow: inset 0 0 0 0.924px #E6E6E7, 0 0 11.5px rgba(0, 0, 0, 0.25); color: #4D4D51; font-size: 11.09px; line-height: 16.63px; font-weight: 500; white-space: nowrap; }
.fp-prive .ico { font-size: 11.09px; }
.fp-texte { display: flex; flex-direction: column; align-items: flex-start; }
.fp-ligne .ico:first-child { margin: 0 6.45px; }   /* (l'icône de la date, seule, perdait sa marge : la colonne se décalait) */
/* le bouton-lien : la coche (plus grande que l'icône) ne la pousse plus hors du centre du rond */
.pl-coche { position: absolute; left: 50%; top: 50%; margin: -0.6em 0 0 -0.6em; }
/* (« la page évènement clip énormément quand elle zoome vers le bouton-lien ») à chaque image du zoom, le navigateur
   recalculait tous les flous d'arrière-plan de la page, à trois fois leur taille. Ici le fond est uni ou presque :
   sans eux, rien ne change à l'œil, et le zoom n'a plus rien de lourd à refaire */
#sw .fw-bento { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(37, 37, 39, 0.9); }
#sw .fp-orga { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.45); }
#sw .fp-invites { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(37, 37, 39, 0.86); }
#sw .fp-voile { mix-blend-mode: normal; }

/* ---------- (Quentin, 28/10, suite) ALBUM EN GRILLE, PLAYLIST SPOTIFY, FLÈCHE DES LIENS ---------- */
/* l'album de la rangée : la grille de l'app (vignettes carrées, 4 par rangée, la dernière porte le « +N ») ; une case
   vide reste un carré pâle, la photo y entre */
.fw-album-grille { justify-content: space-between; gap: 0; }
.fw-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5.54px; }
.fw-vign { position: relative; aspect-ratio: 1; border-radius: 2.77px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.fw-vign img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-plus-n { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 22.18px; font-weight: 600; }
/* la cagnotte compte en direct : la barre se remplit depuis la gauche */
.fw-cg-barre i { transform-origin: 0 50%; }
/* les liens : la pastille fléchée du coin, le site s'arrête avant elle */
.fw-lien-l .fw-tete { padding-right: 36px; }
/* la playlist : la pastille blanche au logo du site (comme un favicon dans l'app) ; en Small, la pastille et le nom */
.fw-blanc { background: #fff; box-shadow: inset 0 0 0 0.54px #E6E6E7; }
.fw-logo { width: 62%; height: 62%; display: block; }
.fw-lien-s { height: 71px; align-items: center; gap: 11.1px; padding-right: 52px; }
.fw-lien-s .fw-lien-t { margin: 0; }
/* (la flèche en haut à droite, comme dans l'app — elle était passée en bas du lien Large) */
.fw-lien-l .fw-coin { top: 14.8px; bottom: auto; }

/* (Quentin, 28/10 : « réduis la distance entre le titre et la description sous chaque animation de la présentation ») */
.pr-leg-t { line-height: calc(32px * var(--pr-k)); }
.pr-leg-d { margin-top: calc(1px * var(--pr-k)) !important; }
html.tel .pr-leg-t { line-height: 1.12; }
/* (Quentin, 28/10 : « retire le bouton "Voir les modèles", on l'ajoutera une prochaine fois ») caché, prêt à revenir */
.mod-voir { display: none !important; }

/* (Quentin, 28/10 : « dans le footer, le bouton "Contacte-nous !" doit être en secondary darktone light, pas en primary
   green ») le bouton clair du DS (comme « Ajouter au calendrier ») : Darktone 50, contour Darktone 100, texte 700 */
.btn-clair { background: #F3F3F4; border-color: #E6E6E7; color: #4D4D51; }
.pd-col a.pd-contacte { color: #4D4D51 !important; }
@media (hover: hover) and (pointer: fine) { .pd-col a.pd-contacte:hover { background: #E6E6E7; color: #323234 !important; } }
/* (« "Une question, une collab ?" est trop collé au bouton ») au téléphone, les colonnes du pied n'ont pas d'écart
   entre leurs lignes : celle du contact garde le sien */
.pd-col.pd-contact { gap: 14px; }
/* (28/10) au téléphone, moins de vide en haut du pied : tout tient dans un écran (le sol se calcule, js/pied.js) */
html.tel .pied { padding-top: calc(24px + 2.25 * var(--r-pied, 80px)); }
/* (28/10) au téléphone : la pastille Spotify (logo sur fond blanc) ; le repère de la Map pointe sur l'adresse du plan */
.wl-logo { background: #fff; box-shadow: inset 0 0 0 1px #E6E6E7; display: grid; place-items: center; }
.wl-logo svg { width: 62%; height: 62%; display: block; }
.w-carte .wm-plan.fw-plan .fw-plan-g { transform: scale(3.2); }
.w-carte .fw-plan ~ .wm-pin { top: 52%; }
/* (28/10) les blocs vides du dos de la carte se lisent pendant qu'ils tournent (ils étaient blanc pâle sur le fond pâle),
   et les icônes tournent dans le même espace 3D qu'eux */
.pg-bloc { background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 0 0 1.5px rgba(61, 91, 12, 0.3), 0 10px 24px rgba(30, 51, 0, 0.1); }
.po-tuiles { transform-style: preserve-3d; }
/* (Quentin, 28/10) le Lien en Large au téléphone, comme le vrai widget : la pastille et le site en haut, le nom dessous,
   l'aperçu dans le reste ; la flèche ronde du coin (pas de « Ouvrir ») */
.w-lien[data-forme="carre"] .wl-site { top: 28px; right: 56px; }
.w-lien[data-forme="carre"] .wl-titre { left: 16px; right: 16px; top: 68px; -webkit-line-clamp: 2; }
.w-lien[data-forme="carre"] .wl-image { left: 14px; right: auto; top: 116px; width: calc(100% - 28px); height: calc(100% - 130px); }
.w-lien[data-forme="carre"] .wl-ouvrir { display: none; }
.wl-fleche { display: none; }
.w-lien[data-forme="carre"] .wl-fleche { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #F3F3F4; font-size: 16px; }
/* (Quentin, 28/10 : « utilise les mêmes widgets que sur desktop ») au téléphone, la bande montre les widgets de
   l'ordinateur (316 de large), avec leurs animations (la classe « pop » quand ils arrivent au milieu) */
.wt-item.wt-fw { width: 316px; }
.wt-fw .wt-grand { position: relative; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.wt-fw .wt-pose { position: absolute; left: 0; top: 30px; opacity: 0; }
/* (le flou d'arrière-plan des widgets, lourd au téléphone, ne se voit pas sur la nuit unie) */
#wtel .fw-bento { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(37, 37, 39, 0.92); }
/* (Quentin, 28/10) « En savoir plus », sous le bouton de l'accueil : un petit texte clair, sa flèche qui invite à descendre */
.s1-plus { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-top: -2px; padding: 6px 10px; border: 0; background: none; color: rgba(243, 243, 244, 0.72); font: 500 14px/1.2 var(--f-texte); cursor: pointer; pointer-events: auto; }
.s1-plus .ico { font-size: 13px; rotate: 90deg; animation: plusRebond 1.8s ease-in-out infinite; }
@keyframes plusRebond { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
@media (hover: hover) and (pointer: fine) { .s1-plus:hover { color: #F3F3F4; } }
/* (Quentin, 28/10) au téléphone, plus de page évènement : le bouton-lien arrive seul, au centre, après le dernier widget */
.wt-lien-boite { position: absolute; left: 0; top: 0; visibility: hidden; transform-origin: 50% 50%; }
.wt-lien-boite .wt-lien { display: inline-flex; align-items: center; white-space: nowrap; }
/* (Quentin, 28/10) le sondage : chaque réponse a sa barre (elle grandit avec ses votes) et son nombre de votes */
.fw-opt { position: relative; overflow: hidden; }
.fw-opt > :not(.fw-opt-barre) { position: relative; }
.fw-opt-barre { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); transform-origin: 0 50%; }
.fw-opt.choisi .fw-opt-barre { background: rgba(141, 201, 255, 0.32); }
.fw-opt:not(.choisi) .fw-votes { background: rgba(255, 255, 255, 0.14); color: #EFF7FF; }
.fw-votes { font-variant-numeric: tabular-nums; }
/* (Quentin, 28/10) le widget GIF : la pastille rose « GIF », puis la mosaïque de quatre GIF (une case change de temps en
   temps, avec un petit saut) ; dans la page, une bande de quatre */
.fw-rose { background: #F1ADFA; box-shadow: inset 0 0 0 0.54px #E58BF3; color: #3D0A45; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.fw-gif { height: 316px; padding: 14.8px; display: flex; flex-direction: column; gap: 12px; }
.fw-gif-grille { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.fw-gif-case { border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.fw-gif-case img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-gif-case.saute { animation: gifSaut 0.55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gifSaut { 0% { transform: scale(0.72); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
.fw-gif-s { height: 71px; padding: 8px; }
.fw-gif-bande { display: flex; gap: 6px; height: 100%; }
.fw-gif-bande img { flex: 1; min-width: 0; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
/* (Quentin, 28/10) au téléphone, la barre d'écriture d'une messagerie : le lien s'y tape, puis part avec « Envoyer » */
.composeur { position: absolute; left: 16px; right: 16px; bottom: calc(20px + var(--bas-cache, 0px)); z-index: 6; height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 18px; border-radius: 25px; background: #fff; box-shadow: inset 0 0 0 1px rgba(30, 51, 0, 0.12), 0 14px 34px rgba(30, 51, 0, 0.18); visibility: hidden; pointer-events: none; }
.cp-champ { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: 500; color: #1E3300; }
.cp-caret { flex: none; width: 2px; height: 18px; margin-left: 1px; border-radius: 1px; background: #75B600; animation: clignote 1s steps(1) infinite; }
.cp-envoyer { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-500); color: var(--lime-950); font-size: 18px; }
/* (sous la section RSVP, z 7 : la pilule qui part de la barre passe devant elle) */
/* (Quentin, 28/10) le widget Image (des GIF) comme dans l'app : une image à la fois, qui remplit le widget et glisse ;
   les points blancs (6 px, l'image en cours pleine, les autres à 45 %) sur leur pastille sombre, en bas */
.fw-img { height: 316px; overflow: hidden; border-radius: 10px; background: #252527; box-shadow: inset 0 0 0 0.924px #444546; }
.fw-img.fw-img-s { height: 71px; }
.fw-img-piste { position: absolute !important; left: 0; top: 0; height: 100%; display: flex; will-change: transform; }
.fw-img-piste img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; }
.fw-img-points { position: absolute !important; left: 50%; bottom: 10px; translate: -50% 0; display: flex; gap: 5px; padding: 6px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fw-img-points i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0.45; transition: opacity 0.2s; }
.fw-img-points i.on { opacity: 1; }
.fw-img-s .fw-img-points { bottom: 6px; padding: 4px 6px; }
/* le sondage : chaque réponse a sa barre bleue (à sa part des votes) et sa pastille de votes bleu clair (tertiary 100/950) */
.fw-opt .fw-opt-barre { background: rgba(141, 201, 255, 0.3); }
.fw-opt .fw-votes, .fw-opt:not(.choisi) .fw-votes { background: #DAECFF; color: #162755; }
/* (Quentin, 28/10) le chargement en matières : la boîte des images, au centre (le logo blanc prend ensuite sa place) */
.ch-matieres { position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: var(--nuit); }
/* (le néon, sur fond noir, se fond « en écran » : la boîte qui rebondit isole ses images, il lui faut donc le fond Nuit
   à elle aussi, sinon le carré noir du néon se voyait) */
/* (le symbole attend, caché, que l’intro le montre : plus d’éclair du logo blanc avant les matières) */
.chargement-media { opacity: 0; }