/* ==============================================================
   SHOTAI — IMAGES CLÉS DE LA LANDING (statiques)
   Le système de DA commun aux 5 images : couleurs, typo, grille,
   composants du DS (carte, boutons, badges, widgets), curseur.
   Maquette locale uniquement (PP Woodland est une police payante).
   ============================================================== */

@font-face { font-family: "PP Woodland"; src: url("../assets/fonts/PPWoodland-Regular-Equilibre.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/InstrumentSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: block; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/InstrumentSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: block; }

:root {
  /* --- LE FOND ET LA SIGNATURE ---------------------------------
     Nuit : le noir teinté de vert demandé par Quentin. C'est la scène.
     Lime : la signature Shotai. Réservée aux gestes (boutons d'action,
     le mot « évènement », le curseur). */
  --nuit: #0B1101;
  --nuit-2: #141C08;
  --lime: #C1FD3A; --lime-200: #E5FF91; --lime-500: #99E300; --lime-950: #1E3300;

  /* --- UNE LUMIÈRE PAR SCÈNE -----------------------------------
     Tirées des émojis Shotai, puis assourdies (moins saturées, un peu
     de gris) : elles éclairent, elles ne crient pas. */
  --dragee: #E7A6C0;   /* rose des émojis, assourdi — scène 2 (le manège, la nuit) */
  --ciel: #BEDFFF;     /* le bleu du DS tertiary-200 (fonds unis, 21/10) — « Nos widgets », en FOND */
  --braise: #FC4121;   /* le rouge principal du DS (secondary-500, celui des boutons rouges de l'app), demandé par Quentin le 21/10 — scène 4 en lumière, scène 5 en FOND */
  --rouge-950: #440608; /* texte sombre posé sur le rouge (règle de Quentin, 21/10) */
  --ciel-950: #162755;  /* texte sombre posé sur le Ciel (tertiary-950) */

  /* --- LES COULEURS DU PRODUIT (DS de l'app, tailwind.config.js) ---
     Elles appartiennent aux composants, pas au décor : on n'y touche pas. */
  --orange: #FC4121; --orange-300: #FF9572; --orange-600: #ED1B09; --orange-950: #440608;
  --bleu: #8DC9FF; --bleu-400: #5DAEFD; --bleu-950: #162755;
  --rose: #FFA2C8; --rose-400: #FF70B1; --rose-950: #4E0E2F;
  --violet: #DA4AEB; --violet-950: #3B0442;
  --d50: #F3F3F4; --d100: #E6E6E7; --d200: #CFD0D2; --d300: #AEAFB2; --d500: #6A6B70; --d700: #4D4D51;

  --f-titre: "PP Woodland", Georgia, serif;
  --f-texte: "Instrument Sans", system-ui, sans-serif;

  /* --- LA GRILLE ------------------------------------------------
     Ordinateur : 12 colonnes, marges 40, gouttières 20 (colonne = 95 px à 1440).
     Téléphone : 4 colonnes, marges 16, gouttières 12. */
  --marge: 40px; --gout: 20px; --col: calc((100vw - 2 * var(--marge) - 11 * var(--gout)) / 12);
  --barre: 72px;

  /* --- L'ÉCHELLE TYPO (en vw : elle suit la largeur d'écran) ---- */
  --d1: 13.2vw;   /* 190 px — « T'attends quoi ? » */
  --d2: 8.9vw;    /* 128 px — le mot du manège, « Nos fabuleux widgets » */
  --d3: 7.2vw;    /* 104 px — la phrase d'accueil */
  --t1: 4.4vw;    /*  64 px — les phrases de scène */
  --t2: 1.95vw;   /*  28 px — sous-titres en Woodland */
  --chapo: 20px; --texte: 16px; --etiq: 12px;
}
@media (max-width: 639px) {
  :root { --marge: 16px; --gout: 12px; --col: calc((100vw - 2 * var(--marge) - 3 * var(--gout)) / 4); --barre: 60px;
    --d1: 22vw; --d2: 12.4vw; --d3: 11.8vw; --t1: 10.3vw; --t2: 6.2vw; --chapo: 17px; --texte: 15px; --etiq: 11px; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--nuit); color: var(--d50); font-family: var(--f-texte); font-size: var(--texte); line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { display: block; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }

.ico { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.logo { display: block; height: 24px; aspect-ratio: 621 / 110; background: currentColor; -webkit-mask: url("../assets/img/logo-light.svg") left center / contain no-repeat; mask: url("../assets/img/logo-light.svg") left center / contain no-repeat; }

/* ---------- LA BARRE DU HAUT (la même partout) ---------- */
.barre { position: absolute; z-index: 50; left: 0; right: 0; top: 0; height: var(--barre); padding: 0 var(--marge); display: flex; align-items: center; justify-content: space-between; color: var(--d50); }
.barre-droite { display: flex; gap: 8px; align-items: center; }
.sur-clair .barre { color: var(--nuit); }

/* ---------- BOUTONS ET BADGES DU DS (atoms/Button.tsx) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; font-family: var(--f-texte); font-weight: 500; white-space: nowrap; }
.btn-xl { height: 56px; padding: 0 24px; border-radius: 8px; font-size: 18px; }
.btn-l { height: 48px; padding: 0 20px; border-radius: 8px; font-size: 16px; }
.btn-m { height: 40px; padding: 0 14px; border-radius: 6px; font-size: 14px; }
.btn-xl .ico, .btn-l .ico { font-size: 18px; } .btn-m .ico { font-size: 16px; }
.btn-primary { background: var(--lime); border-color: var(--lime-500); color: var(--lime-950); }
.btn-secondary { background: var(--orange); border-color: var(--orange-600); color: var(--orange-950); }
.btn-verre { background: rgba(11, 17, 1, 0.25); border-color: rgba(255, 255, 255, 0.12); color: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
/* le même bouton vitré, posé sur un fond clair (Ciel, Braise) */
.sur-clair .btn-verre { background: rgba(255, 255, 255, 0.22); border-color: rgba(11, 17, 1, 0.14); color: var(--nuit); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.badge-primary { background: var(--lime); border-color: var(--lime-500); color: var(--lime-950); }

/* ---------- LA CARTE DU DS (molecules/EventCardSmall.tsx, 342 × 520) ---------- */
.carte { position: relative; width: 342px; height: 520px; border-radius: 10px; overflow: hidden; color: var(--d100); text-align: left; background: #141414; }
.carte > .c-photo { position: absolute; left: 0; top: 0; width: 100%; height: 55%; object-fit: cover; }
.carte > .c-miroir { position: absolute; left: 0; top: 55%; width: 100%; height: 55%; object-fit: cover; transform: scaleY(-1); }
.carte > .c-flou { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(26px) saturate(1.15); -webkit-mask-image: linear-gradient(to bottom, transparent 36%, #000 60%); mask-image: linear-gradient(to bottom, transparent 36%, #000 60%); }
.carte > .c-voiles { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 97.5%), linear-gradient(to bottom, rgba(0,0,0,0) 38.3%, rgba(0,0,0,0.5) 65.2%); }
.carte > .c-contour { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--d50); z-index: 3; }
.c-contenu { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 18px; }
.c-infos { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.c-texte { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.c-orga { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 7px; border-radius: 999px; border: 1px solid var(--d100); background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 16px; font-weight: 600; white-space: nowrap; }
.couronne { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--lime-950); }
.couronne .ico { font-size: 11px; }
.c-titre { font-family: var(--f-titre); font-size: 30px; line-height: 30px; color: var(--d100); padding-bottom: 2px; }
.c-ligne { display: flex; align-items: center; height: 34px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.c-ligne .ico { font-size: 16px; margin: 0 13px 0 7px; }
.c-bouton { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; }
.c-bouton .ico { font-size: 12px; }
.c-pastille { position: absolute; left: 23px; top: 23px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--d100); background: var(--d50); box-shadow: 0 0 12.5px rgba(0, 0, 0, 0.25); color: var(--d700); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.c-pastille .ico { font-size: 12px; }

/* ---------- LES WIDGETS (components/widgets/*Read.tsx, rendu ordinateur) ---------- */
.w { position: absolute; overflow: hidden; border-radius: 10px; background: rgba(9, 12, 6, 0.86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: var(--d50); text-align: left; }
.w-tete { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; align-items: center; gap: 14px; }
.w-tuile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px var(--b); color: var(--e); }
.w-tuile .ico { font-size: 24px; }
.w-noms { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.w-noms small { font-size: 12px; line-height: 16px; color: var(--d300); white-space: nowrap; }
.w-noms b { font-size: 17px; line-height: 22px; font-weight: 600; color: #fff; white-space: nowrap; }
.w-bouton { position: absolute; left: 16px; right: 16px; display: grid; place-items: center; height: 44px; border-radius: 8px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.wc-montant { position: absolute; right: 16px; top: 22px; font-family: var(--f-titre); font-size: 30px; line-height: 1; color: #fff; }
.wc-ligne { position: absolute; left: 16px; top: 78px; font-size: 13px; color: var(--d300); }
.wc-jauge { position: absolute; left: 16px; right: 16px; top: 100px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.wc-jauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--orange); }
.ws-choix { position: absolute; left: 16px; right: 16px; height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); font-size: 14px; font-weight: 500; overflow: hidden; }
.ws-barre { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(141, 201, 255, 0.16); }
.ws-choix > :not(.ws-barre) { position: relative; }
.ws-radio { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #F3F3F4; }
.ws-choix.choisi { background: rgba(141, 201, 255, 0.1); }
.ws-choix.choisi .ws-radio { background: var(--bleu); box-shadow: inset 0 0 0 4px var(--bleu), inset 0 0 0 16px #fff; box-shadow: none; border: 4.5px solid var(--bleu); background: #fff; }
.ws-votes { margin-left: auto; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 6px; background: #DCEBFF; color: var(--bleu-950); font-size: 11px; font-weight: 600; }
.wt { position: absolute; left: 16px; right: 16px; top: 14px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.wa-photo { position: absolute; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
.wg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- LE CURSEUR MAISON ----------
   Un disque qui porte le geste en toutes lettres. Lime sur la nuit,
   nuit sur les fonds clairs. Le point exact du pointeur est son centre. */
.curseur { position: absolute; z-index: 60; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--lime); color: var(--lime-950); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; translate: -50% -50%; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2); }
.curseur.rond { width: 88px; height: 88px; padding: 0; }
.curseur .ico { font-size: 15px; }
.sur-clair .curseur { background: var(--nuit); color: var(--lime); }

/* Le repère de grille (planche DA uniquement) */
.grille-repere { position: absolute; inset: 0 var(--marge); z-index: 99; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gout); pointer-events: none; }
.grille-repere i { background: rgba(255, 60, 120, 0.08); box-shadow: inset 1px 0 rgba(255, 60, 120, 0.35), inset -1px 0 rgba(255, 60, 120, 0.35); }
@media (max-width: 639px) { .grille-repere { grid-template-columns: repeat(4, 1fr); } .grille-repere i:nth-child(n+5) { display: none; } }
.tel { display: none; }
@media (max-width: 639px) { .ordi { display: none; } .tel { display: inline; } }
@media (max-width: 639px) {
  .logo { height: 19px; }
  .ordi-seul { display: none !important; }
  .barre .btn-m { height: 36px; padding: 0 12px; font-size: 13px; }
  .barre .badge { height: 20px; font-size: 11px; padding: 0 7px; }
}

/* ---------- LE CADRE DE TRANSFORMATION (émojis, badges) ----------
   Au clic sur un émoji ou un badge : contour fin lime, quatre poignées
   carrées aux coins, une poignée de rotation au-dessus. On glisse pour
   déplacer, on tire un coin pour agrandir. */
.manip { position: absolute; z-index: 20; }
.manip > img { display: block; width: 100%; height: 100%; }
.cadre { position: absolute; inset: -10px; border: 1.5px solid var(--lime); border-radius: 4px; pointer-events: none; }
.cadre .p { position: absolute; width: 11px; height: 11px; margin: -6.5px 0 0 -6.5px; background: #fff; border: 1.5px solid var(--lime); border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.cadre .p1 { left: 0; top: 0; } .cadre .p2 { left: 100%; top: 0; } .cadre .p3 { left: 100%; top: 100%; } .cadre .p4 { left: 0; top: 100%; }
.cadre .rot { position: absolute; left: 50%; top: -30px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fff; border: 1.5px solid var(--lime); box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.cadre .rot::after { content: ""; position: absolute; left: 50%; top: 12px; width: 1.5px; height: 17px; margin-left: -0.75px; background: var(--lime); }
.cadre .cote { position: absolute; left: 50%; bottom: -36px; translate: -50% 0; height: 22px; padding: 0 8px; display: grid; place-items: center; border-radius: 6px; background: var(--lime); color: var(--lime-950); font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* le curseur posé sur une poignée : le point (le vrai pointeur) + l'étiquette du geste */
.curseur.geste { translate: 14px 14px; height: 40px; padding: 0 15px 0 12px; font-size: 14px; }
.curseur.geste::before { content: ""; position: absolute; left: -21px; top: -21px; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(11, 17, 1, 0.85); }
.curseur.geste svg { width: 15px; height: 15px; }
/* les badges du DS devenus autocollants : le choix RSVP « Je suis chaud » */
.puce { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 6px; border-radius: 999px; font-size: 18px; font-weight: 500; white-space: nowrap; box-shadow: 0 14px 30px rgba(0,0,0,0.35); }
.puce img { width: 38px; height: 38px; }
.puce-oui { background: var(--orange); color: var(--orange-950); box-shadow: inset 0 0 0 1px var(--orange-600), 0 14px 30px rgba(0,0,0,0.35); }
.puce-peut { background: var(--bleu); color: var(--bleu-950); box-shadow: inset 0 0 0 1px var(--bleu-400), 0 14px 30px rgba(0,0,0,0.35); }
.puce-non { background: var(--violet); color: var(--violet-950); box-shadow: inset 0 0 0 1px #BE29CC, 0 14px 30px rgba(0,0,0,0.35); }