/* OptymaPro Studio — charte OptymaPro (bleu, jaune, rose, encre ; Barlow Condensed, Manrope, IBM Plex Mono). */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/kit/polices/barlow-condensed-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("/kit/polices/barlow-condensed-800-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400 800; font-display: swap; src: url("/kit/polices/manrope-400-800-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap; src: url("/kit/polices/IBMPlexMono-600.woff2") format("woff2"); }

:root {
  --bleu: #334efd; --bleu-fonce: #2037df; --nuit: #1a2bb5; --jaune: #f6ff4e; --rose: #f79ad0;
  --encre: #0b0d26; --lavande: #e9ecff; --papier: #f3f5ff; --blanc: #fff; --gris: #5b6080;
  --vert: #1f9d6b; --rouge: #c8283b;
  --ombre: 5px 5px 0 var(--encre);
  --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; background: var(--papier); color: var(--encre); font: 500 16px/1.45 "Manrope", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; -webkit-appearance: none; appearance: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.mono { font: 600 11px/1.4 "Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }

/* ── En-tête ── */
.entete { position: sticky; top: 0; z-index: 20; background: var(--bleu); color: #fff; padding: calc(var(--haut) + 12px) 16px 0; box-shadow: 0 2px 0 var(--encre); }
.entete__ligne { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.entete__logo { height: 24px; width: auto; display: block; }
.entete__titre { font: 800 22px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--jaune); margin-left: 2px; transform: translateY(1px); }
.entete__espace { flex: 1; }
.rond { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; font-size: 19px; }
.rond:active { transform: scale(.94); }
.rond[aria-pressed="true"] { background: var(--jaune); color: var(--encre); }
.onglets { max-width: 560px; margin: 12px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-bottom: 12px; }
.onglet { padding: 9px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: 700 15px/1 "Manrope", sans-serif; display: flex; justify-content: center; align-items: center; gap: 6px; white-space: nowrap; }
.onglet b { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.2); font: 800 13px/1 "Manrope", sans-serif; }
.onglet[aria-selected="true"] { background: #fff; color: var(--encre); box-shadow: 3px 3px 0 var(--encre); }
.onglet[aria-selected="true"] b { background: var(--jaune); }
.essai { max-width: 560px; margin: 0 auto 10px; text-align: center; background: var(--rose); color: var(--encre); border-radius: 999px; padding: 4px 10px; }

/* ── Liste ── */
main { max-width: 560px; margin: 0 auto; padding: 18px 16px calc(var(--bas) + 40px); display: flex; flex-direction: column; gap: 22px; }
.vide { text-align: center; padding: 48px 18px; color: var(--gris); }
.vide strong { display: block; color: var(--encre); font: 800 26px/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; margin-bottom: 8px; }
.vide .emoji { font-size: 44px; display: block; margin-bottom: 12px; }

.carte { background: var(--blanc); border: 2.5px solid var(--encre); border-radius: 22px; box-shadow: var(--ombre); overflow: hidden; scroll-margin-top: 140px; }
.carte--cible { animation: cible 1.6s ease 1; }
@keyframes cible { 0%, 100% { box-shadow: var(--ombre); } 30% { box-shadow: 0 0 0 6px var(--jaune), var(--ombre); } }
.carte__media { position: relative; background: var(--encre); }
.carte__media video, .carte__media img { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 72dvh; object-fit: contain; background: var(--encre); }
.carte__media .badge { position: absolute; top: 12px; left: 12px; }
.carte__corps { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.carte__titre { font: 800 27px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .005em; }
.carte__accroche { font-weight: 700; font-size: 17px; }
.carte__accroche::before { content: "« "; } .carte__accroche::after { content: " »"; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--lavande); color: var(--encre); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 5px; border-radius: 999px; border: 2px solid var(--encre); background: var(--jaune); color: var(--encre); font: 800 15px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; box-shadow: 3px 3px 0 var(--encre); }
.badge--rose { background: var(--rose); } .badge--blanc { background: #fff; } .badge--vert { background: #b9f5d8; }
.juge { display: flex; gap: 10px; align-items: flex-start; background: var(--papier); border-radius: 14px; padding: 10px 12px; }
.juge__note { flex: none; font: 800 30px/.9 "Barlow Condensed", sans-serif; }
.juge__note small { font-size: 16px; color: var(--gris); }
.juge__note--haut { color: var(--vert); } .juge__note--moyen { color: #9a7b00; } .juge__note--bas { color: var(--rouge); }
.juge p { font-size: 14px; color: var(--encre); }
details.legende { border-top: 1.5px dashed #c9cde6; padding-top: 10px; }
details.legende summary { list-style: none; font-weight: 700; color: var(--bleu-fonce); }
details.legende summary::-webkit-details-marker { display: none; }
details.legende summary::after { content: " ▸"; }
details.legende[open] summary::after { content: " ▾"; }
details.legende p { margin-top: 8px; white-space: pre-wrap; font-size: 14px; }
.avis-liste { display: flex; flex-direction: column; gap: 6px; }
.avis-liste p { font-size: 14px; background: var(--lavande); border-radius: 12px; padding: 7px 10px; }
.alerte { background: #ffe1ec; border: 2px solid var(--rouge); border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.alerte strong { color: var(--rouge); }
.alerte--douce { background: #fffbd6; border-color: var(--encre); }
.alerte--douce strong { color: var(--encre); }
.info { background: var(--lavande); border-radius: 14px; padding: 10px 12px; font-size: 15px; }
.info strong { font: 800 22px/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; display: block; }

/* ── Bandeau du jour ── */
.jour { background: var(--encre); color: #fff; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 5px 5px 0 var(--jaune); }
.jour .mono { color: var(--jaune); padding: 0 4px; }
.jour__ligne { display: flex; align-items: center; gap: 12px; text-align: left; color: #fff; background: rgba(255,255,255,.08); border-radius: 14px; padding: 8px; }
.jour__ligne img, .jour__ligne .miniature { width: 44px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: var(--bleu); flex: none; }
.jour__ligne span { flex: 1; min-width: 0; font-size: 14px; color: #c9cdf0; }
.jour__ligne strong { display: block; color: #fff; font: 800 19px/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jour__ligne b { font-size: 26px; color: var(--jaune); }

/* ── Choix (mascotte…) ── */
.badge--debut { align-self: flex-start; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.option { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 6px 8px; border-radius: 16px; border: 2px solid #d6d9ef; background: var(--papier); text-align: center; }
.option img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 11px; background: var(--encre); display: block; }
.option strong { font: 800 19px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.option .mono { color: var(--bleu-fonce); font-size: 10px; }
.option[aria-pressed="true"] { border-color: var(--encre); background: var(--jaune); box-shadow: 3px 3px 0 var(--encre); }
.option:active { transform: scale(.97); }
.feuille img.grande { width: 100%; max-height: 58dvh; object-fit: contain; border-radius: 16px; background: var(--encre); }

/* ── Boutons ── */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.actions .plein { grid-column: 1 / -1; }
.bouton { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 14px; border-radius: 16px; border: 2.5px solid var(--encre); background: #fff; box-shadow: 4px 4px 0 var(--encre); font: 800 19px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; transition: transform .08s, box-shadow .08s; }
.bouton:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--encre); }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton--jaune { background: var(--jaune); font-size: 23px; min-height: 60px; }
.bouton--bleu { background: var(--bleu); color: #fff; }
.bouton--rose { background: var(--rose); }
.bouton--discret { box-shadow: none; border-width: 2px; min-height: 46px; font-size: 17px; }
.lien { font-weight: 700; color: var(--bleu-fonce); text-decoration: underline; text-underline-offset: 3px; }
.ecartees { display: flex; flex-direction: column; gap: 10px; }
.ecartees h2 { font: 800 20px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--gris); margin-top: 8px; }
.ligne { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid #d6d9ef; border-radius: 16px; padding: 8px; }
.ligne img, .ligne .miniature { width: 54px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 9px; background: var(--encre); flex: none; }
.ligne div { flex: 1; min-width: 0; }
.ligne strong { display: block; font: 800 18px/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne span { font-size: 13px; color: var(--gris); }
.ligne .bouton { min-height: 40px; font-size: 15px; padding: 8px 12px; box-shadow: 2px 2px 0 var(--encre); border-width: 2px; }

/* ── Feuilles (bas d'écran) ── */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(11, 13, 38, .55); display: flex; align-items: flex-end; justify-content: center; animation: fondu .18s ease; }
.feuille { width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; background: #fff; border: 2.5px solid var(--encre); border-bottom: 0; border-radius: 26px 26px 0 0; padding: 10px 18px calc(var(--bas) + 20px); animation: monte .24s cubic-bezier(.2, .9, .2, 1); display: flex; flex-direction: column; gap: 14px; }
.feuille::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: #d6d9ef; margin: 0 auto 2px; }
.feuille h2 { font: 800 30px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.feuille p { color: var(--gris); }
.feuille label { font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.feuille input[type="datetime-local"], .feuille textarea { width: 100%; border: 2px solid var(--encre); border-radius: 14px; padding: 12px; font-size: 17px; background: var(--papier); }
.feuille textarea { min-height: 96px; resize: vertical; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix button { padding: 9px 13px; border-radius: 999px; border: 2px solid var(--encre); background: #fff; font-weight: 700; font-size: 15px; }
.choix button[aria-pressed="true"] { background: var(--jaune); box-shadow: 2px 2px 0 var(--encre); }
.gouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gouts button { min-height: 64px; border-radius: 18px; border: 2.5px solid var(--encre); background: #fff; font: 800 21px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.gouts button[aria-pressed="true"] { background: var(--jaune); box-shadow: 3px 3px 0 var(--encre); }
.micro { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; }
.micro button { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--encre); background: var(--rose); font-size: 38px; box-shadow: 4px 4px 0 var(--encre); }
.micro button[aria-pressed="true"] { background: var(--rouge); color: #fff; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.erreurs { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.erreurs li { background: #ffe1ec; border-radius: 10px; padding: 7px 10px; font-size: 14px; }

/* ── Connexion ── */
.connexion { min-height: 100dvh; background: radial-gradient(120% 80% at 80% 0%, #4560ff 0%, var(--bleu) 45%, var(--nuit) 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: calc(var(--haut) + 30px) 24px calc(var(--bas) + 30px); text-align: center; }
.connexion img { height: 34px; }
.connexion h1 { font: 800 54px/.9 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.connexion h1 span { color: var(--jaune); display: block; }
.connexion p { opacity: .85; max-width: 300px; }
.points { display: flex; gap: 12px; height: 18px; }
.points i { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; }
.points i.plein { background: var(--jaune); border-color: var(--jaune); }
.points--faux { animation: secoue .35s; }
@keyframes secoue { 25% { transform: translateX(-9px); } 75% { transform: translateX(9px); } }
.pave { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; }
.pave button { height: 76px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font: 700 30px/1 "Manrope", sans-serif; }
.pave button:active { background: var(--jaune); color: var(--encre); }
.pave .sans { visibility: hidden; }
.message { min-height: 22px; font-weight: 700; color: var(--jaune); }

/* ── Petit message ── */
#toast { position: fixed; left: 50%; top: calc(var(--haut) + 12px); z-index: 80; transform: translate(-50%, calc(-100% - var(--haut) - 24px)); max-width: calc(100% - 32px); background: var(--encre); color: #fff; padding: 13px 18px; border-radius: 16px; font-weight: 700; box-shadow: 4px 4px 0 var(--jaune); transition: transform .25s cubic-bezier(.2, .9, .2, 1); text-align: center; }
#toast.visible { transform: translate(-50%, 0); }

@keyframes fondu { from { opacity: 0; } }
@keyframes monte { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }