/* Site public 2-12-10 (accueil, pages légales, suppression du compte) : charte « 3D doux ».
   Fichier statique, sans compilation (aucun asset front n'est compilé en production), chargé par
   resources/views/site/styles.blade.php. Aucun style dans les pages : la CSP n'autorise pas les styles inline. */

@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/fredoka/fredoka-latin.woff2') format('woff2'); }

/* Tokens du design system 2-12-10 (copie de design_handoff/tokens : colors, typography, spacing, radii, elevation) */
:root{
  /* Base — lilas */
  --lilac-50:#f4f1ff; --lilac-100:#ece7ff; --lilac-150:#e2dcfa; --lilac-200:#d9d1fb; --lilac-300:#cfc5f5; --lilac-400:#a99dff; --lilac-500:#9a91c8;
  --ink-900:#2b2350; --ink-700:#5a5382; --ink-600:#6a6390; --canvas:#dcd6f2; --white:#ffffff;
  /* Accents — chaque teinte a sa « tranche » plus foncée pour le relief */
  --violet:#7b6cf0; --violet-edge:#5545c8; --violet-deep:#4334b0;
  --orange:#ff9a73; --orange-edge:#e06a40; --orange-ink:#c2501f; --orange-soft:#ffe3d6; --orange-soft-edge:#f3c2ab;
  --yellow:#ffd36e; --yellow-edge:#e8b23c; --yellow-ink:#8a6410; --yellow-soft:#fff6dc; --yellow-tip:#fff3c9; --yellow-tip-edge:#f0d98a;
  --mint:#9be3c6; --mint-edge:#66c39f; --mint-ink:#1f4a3a; --mint-text:#3f9a74;

  /* Sémantique */
  --surface-app:var(--lilac-100); --surface-card:var(--white); --surface-sunken:var(--lilac-100); --surface-canvas:var(--canvas);
  --text-strong:var(--ink-900); --text-muted:var(--ink-600); --text-soft:var(--lilac-500); --text-link:var(--violet-edge);
  --edge-neutral:var(--lilac-300); --focus-ring:var(--lilac-400);
  --action-primary:var(--violet); --action-primary-edge:var(--violet-edge); --action-disabled:var(--lilac-200); --action-disabled-edge:#c6bcf2;
  --danger-bg:var(--orange-soft); --danger-edge:var(--orange-soft-edge); --danger-text:var(--orange-ink);
  --role-conteur:var(--orange); --role-indice:var(--violet); --role-photos:var(--yellow); --role-success:var(--mint);
  --apero:var(--yellow); --apero-edge:var(--yellow-edge);
  --scrim:rgba(43,35,80,.45);
}
:root{
  --font-sans:'Fredoka',ui-rounded,system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-display:34px; --fs-h1:30px; --fs-h2:26px; --fs-h3:24px; --fs-h4:20px; --fs-lg:17px; --fs-body:15px; --fs-sm:14px; --fs-xs:13px; --fs-2xs:12px;
  --lh-tight:1.05; --lh-snug:1.1; --lh-body:1.45;
  --tracking-display:-.02em;
}
:root{
  --space-1:4px; --space-2:6px; --space-3:8px; --space-4:10px; --space-5:12px; --space-6:14px; --space-7:16px; --space-8:18px; --space-9:20px; --space-10:22px; --space-12:28px;
  --gutter:16px; --gutter-text:22px;
  --tap-min:44px; --btn-h:54px;
}
:root{
  --radius-xs:12px; --radius-sm:16px; --radius-md:20px; --radius-lg:24px; --radius-xl:28px; --radius-2xl:32px; --radius-3xl:34px; --radius-device:46px; --radius-pill:99px;
}
:root{
  /* Relief « pâte à modeler » : une ombre pleine décalée vers le bas, jamais floue */
  --lift-sm:0 3px 0; --lift-md:0 5px 0; --lift-lg:0 6px 0; --lift-xl:0 8px 0;
  --shadow-card:0 5px 0 var(--lilac-300);
  --shadow-card-lg:0 8px 0 var(--lilac-300);
  --shadow-btn-primary:0 6px 0 var(--violet-edge);
  --shadow-device:0 30px 60px rgba(60,40,140,.18);
  --press-offset:4px;
}

/* ===== Commun : base, en-tête, boutons, pied de page ===== */
/* Teintes de la maquette du site absentes des tokens */
:root { --mint-soft: #e3f7ef; --mint-soft-edge: #b9e6d3; }
/* Contraste (WCAG AA) renforcé sans toucher à l'orange, au jaune ni au violet : seulement des textes et des contours. */
:root { --text-on-lilac: var(--ink-700); --danger-text: #a8431a; --link-hover: #a8431a; --field-edge: #857bb8; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--surface-app); color: var(--text-strong); font: 16px/1.5 var(--font-sans); overflow-x: hidden; overflow-x: clip; }
h1, h2, p { margin: 0; }
a { color: var(--text-link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--violet-edge); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 860px; }

/* En-tête : logo et langue */
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 0; }
.brand { display: block; flex: none; border-radius: var(--radius-xs); }
.logo { display: block; width: auto; height: 50px; }
.brand.small .logo { height: 42px; }
/* Sur un petit téléphone, le logo et le sélecteur de langue tiennent sur une ligne. */
@media (max-width: 420px) { .site-header .logo { height: 40px; } }
.lang { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: 0 4px 0 var(--edge-neutral); font-weight: 600; font-size: 14px; }
.lang a { padding: 7px 14px; border-radius: var(--radius-pill); color: var(--text-strong); text-decoration: none; line-height: 1.3; }
.lang a[aria-current] { background: var(--text-strong); color: var(--white); }

/* Boutons : ombre pleine dans la tranche de leur couleur ; à l'appui, ils descendent de 4px. Pas d'effet au survol.
 Texte en grand et gras (19px, 700) : le blanc sur le violet n'atteint 4:1, que l'AA n'accepte que pour un grand texte. */
.btn { --edge: var(--action-primary-edge); display: inline-flex; align-items: center; justify-content: center; min-height: 56px; max-width: 100%; padding: 8px 26px; border: 0; border-radius: var(--radius-pill); background: var(--action-primary); color: var(--white); box-shadow: 0 6px 0 var(--edge); font: 700 19px/1.25 var(--font-sans); text-align: center; text-decoration: none; cursor: pointer; transition: transform 80ms, box-shadow 80ms; }
.btn:hover { color: var(--white); }
.btn:active:not(:disabled) { transform: translateY(var(--press-offset)); box-shadow: 0 2px 0 var(--edge); }
.btn:disabled { --edge: var(--action-disabled-edge); background: var(--action-disabled); color: var(--ink-700); cursor: not-allowed; }
.btn.danger { --edge: var(--danger-edge); background: var(--danger-bg); color: var(--danger-text); }

/* Pied de page */
.site-footer { padding: 0 0 40px; }
.site-footer.on-white { background: var(--surface-card); }
.footer-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px; border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: var(--lift-lg) var(--edge-neutral); }
.on-white .footer-card { background: var(--surface-app); }
.footer-links { display: flex; gap: 10px 22px; flex-wrap: wrap; }
.footer-links a, .footer-mail { font-weight: 600; font-size: 15px; text-decoration: none; }
.footer-links a { color: var(--text-strong); }
.footer-links a:hover { color: var(--link-hover); }

/* ===== Accueil et pages de secours (links.blade.php) ===== */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: center; padding: 30px 0 70px; }
.hero-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.eyebrow { align-self: flex-start; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: 0 4px 0 var(--edge-neutral); font-weight: 600; font-size: 15px; }
.hero h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -.03em; line-height: 1.18; text-wrap: balance; }
/* Contraste : encre sur l'orange et le jaune ; blanc sur le violet, réservé aux grands textes gras (4:1). */
.n { display: inline-block; padding: 0 14px; border-radius: 22px; color: var(--text-strong); transform: rotate(-2deg); }
.n.orange { background: var(--orange); box-shadow: 0 5px 0 var(--orange-edge); }
.n.yellow { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-edge); }
.n.violet { background: var(--violet); color: var(--white); box-shadow: 0 5px 0 var(--violet-edge); }
.lead { font-size: 19px; line-height: 1.5; color: var(--text-on-lilac); max-width: 480px; text-wrap: pretty; }
.invite { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--lift-lg) var(--edge-neutral); }
.invite-title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.invite-text { color: var(--text-muted); }
/* Badges officiels, sans retouche, à la même hauteur visible : les PNG de Google Play ont une marge transparente, différente selon la langue. */
.stores { --badge: 54px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 6px; }
.store-badge { display: block; border-radius: 10px; }
.store-badge img { display: block; width: auto; height: var(--badge); }
.store-badge.play.fr { margin: calc(var(--badge) * -30 / 190) 0; }
.store-badge.play.fr img { height: calc(var(--badge) * 250 / 190); }
.store-badge.play.en { margin: calc(var(--badge) * -41 / 168); }
.store-badge.play.en img { height: calc(var(--badge) * 250 / 168); }
/* Sur un petit téléphone, les deux badges tiennent sur une ligne (Apple : 40px de haut au minimum). */
@media (max-width: 420px) { .stores { --badge: 44px; gap: 12px; } }

/* Éventail de photos : maquette dessinée sur 420px de large, mise à l'échelle avec son conteneur. */
.fan { position: relative; width: min(100%, 420px); aspect-ratio: 420 / 400; margin: 0 auto; container-type: inline-size; }
.fan > * { --p: calc(100cqw / 420); position: absolute; }
.fan-photo { width: calc(200 * var(--p)); padding: calc(18 * var(--p)) calc(18 * var(--p)) calc(52 * var(--p)); border-radius: calc(28 * var(--p)); background: var(--white); box-shadow: 0 calc(14 * var(--p)) 0 var(--edge-neutral); }
.fan-photo img, .fan-mystery { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: calc(16 * var(--p)); object-fit: cover; }
.fan-photo.left { left: 0; top: calc(70 * var(--p)); transform: rotate(-14deg); }
.fan-photo.middle { left: calc(110 * var(--p)); top: calc(20 * var(--p)); transform: rotate(2deg); }
.fan-photo.right { left: calc(210 * var(--p)); top: calc(80 * var(--p)); transform: rotate(14deg); z-index: 2; }
.fan-mystery { display: flex; align-items: center; justify-content: center; background: var(--role-conteur); color: var(--white); font-weight: 700; font-size: calc(90 * var(--p)); line-height: 1; }
.fan-clue { left: calc(30 * var(--p)); bottom: 0; z-index: 3; padding: calc(12 * var(--p)) calc(18 * var(--p)); border-radius: var(--radius-md); background: var(--role-indice); color: var(--white); font-weight: 700; font-size: 19px; line-height: 1.3; max-width: calc(100% - 30 * var(--p)); text-wrap: balance; box-shadow: var(--shadow-btn-primary); transform: rotate(-2deg); }

/* Une partie, 24 heures : bande blanche, frise 2/12/10 et trois étapes */
.how { padding: 70px 0 80px; border-radius: 48px 48px 0 0; background: var(--surface-card); }
.how-head { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 36px; text-align: center; }
.how h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.timeline { display: flex; gap: 6px; width: min(100%, 560px); margin-top: 10px; }
.timeline span { height: 16px; border-radius: 8px; }
.timeline .orange { flex: 2; } .timeline .yellow { flex: 12; } .timeline .violet { flex: 10; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.step { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--radius-2xl); color: var(--text-strong); transform: rotate(-1deg); }
.step:nth-child(2) { transform: rotate(1deg); }
.orange.step, .timeline .orange { background: var(--orange); --edge: var(--orange-edge); }
.yellow.step, .timeline .yellow { background: var(--yellow); --edge: var(--yellow-edge); }
.violet.step, .timeline .violet { background: var(--violet); --edge: var(--violet-edge); }
.step { box-shadow: 0 8px 0 var(--edge); }
.violet.step { color: var(--white); }
.step-hours { align-self: flex-start; padding: 6px 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .35); color: var(--text-strong); font-weight: 700; font-size: 28px; line-height: 1.2; }
.step-text { font-size: 19px; font-weight: 700; line-height: 1.4; }

/* Mode apéro : carte bleu nuit sur la bande blanche, trois points et un podium d'illustration.
   La tranche de la carte n'a pas de token (aucun encre plus foncée que --ink-900) : elle en est dérivée. */
.apero { --apero-card-edge: color-mix(in srgb, var(--ink-900), black 55%); padding: 0 0 80px; background: var(--surface-card); }
.apero-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px clamp(24px, 5vw, 56px); border-radius: 40px; background: var(--ink-900); color: var(--white); box-shadow: 0 10px 0 var(--apero-card-edge); }
@media (max-width: 860px) { .apero-card { grid-template-columns: minmax(0, 1fr); } }
.apero-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.apero-badge { align-self: flex-start; padding: 7px 16px; border-radius: var(--radius-pill); background: var(--apero); color: var(--ink-900); box-shadow: 0 4px 0 var(--apero-edge); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.apero h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.apero-lead { font-size: 18px; line-height: 1.55; color: var(--lilac-200); max-width: 480px; text-wrap: pretty; }
.apero-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.apero-points li { display: flex; align-items: flex-start; gap: 16px; }
.apero-num { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: var(--ink-900); box-shadow: 0 4px 0 var(--yellow-edge); font-weight: 700; font-size: 17px; }
.apero-points div { padding-top: 6px; }
.apero-points h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.apero-points p { font-size: 16px; line-height: 1.5; color: var(--lilac-200); text-wrap: pretty; }
/* Marches de 96px qui rétrécissent sur un petit téléphone ; avatars en initiales */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; }
.podium-place { display: flex; flex: 0 1 96px; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.podium-avatar { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border: 4px solid var(--white); border-radius: 50%; color: var(--ink-900); box-shadow: 0 4px 0 var(--apero-card-edge); font-weight: 700; font-size: 24px; }
.podium-score { padding: 3px 12px; border-radius: var(--radius-pill); background: var(--white); color: var(--ink-900); font-weight: 700; font-size: 14px; white-space: nowrap; }
.podium-step { display: flex; justify-content: center; width: 100%; padding-top: 12px; border-radius: 22px 22px 8px 8px; background: var(--step); box-shadow: inset 0 -8px 0 var(--edge); color: var(--ink-900); font-weight: 700; font-size: 32px; line-height: 1; }
.podium .first .podium-avatar { width: 76px; height: 76px; background: var(--violet); color: var(--white); font-size: 30px; }
.podium .second .podium-avatar { background: var(--orange); }
.podium .third .podium-avatar { background: var(--mint); }
.podium .first .podium-step { --step: var(--yellow); --edge: var(--yellow-edge); height: 120px; }
.podium .second .podium-step { --step: var(--mint); --edge: var(--mint-edge); height: 78px; }
.podium .third .podium-step { --step: var(--orange); --edge: var(--orange-edge); height: 56px; }

/* Menu de la page (accueil) : ancres vers les sections. Sur un téléphone, il passe sous le logo et la langue. */
.page-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; font-weight: 600; font-size: 15px; }
.page-nav a { padding: 8px 12px; border-radius: var(--radius-pill); color: var(--text-strong); text-decoration: none; line-height: 1.3; }
.page-nav a:hover { color: var(--link-hover); }
@media (max-width: 860px) { .page-nav { order: 3; width: 100%; justify-content: flex-start; margin: -4px 0 0 -12px; } }
@media (max-width: 420px) { .page-nav { justify-content: space-between; width: calc(100% + 12px); margin: -4px -6px 0; font-size: 14px; } .page-nav a { padding: 8px 6px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#how, #points, #apero, #faq { scroll-margin-top: 24px; }

/* Titres des sections sur la bande blanche (points, FAQ), comme « Une partie, 24 heures » */
.section-title { margin-bottom: 36px; font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-align: center; text-wrap: balance; }

/* Comment on marque des points : trois cartes pastel aux couleurs des rôles (trouver, bluffer, conter) */
.points { padding: 0 0 80px; background: var(--surface-card); }
.point-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.point-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--radius-2xl); background: var(--soft); box-shadow: 0 8px 0 var(--soft-edge); }
.point-card.mint { --soft: var(--mint-soft); --soft-edge: var(--mint-soft-edge); --badge: var(--mint); --badge-edge: var(--mint-edge); }
.point-card.yellow { --soft: var(--yellow-soft); --soft-edge: var(--yellow-tip-edge); --badge: var(--yellow); --badge-edge: var(--yellow-edge); }
.point-card.orange { --soft: var(--orange-soft); --soft-edge: var(--orange-soft-edge); --badge: var(--orange); --badge-edge: var(--orange-edge); }
.point-badge { align-self: flex-start; margin-bottom: 4px; padding: 6px 16px; border-radius: var(--radius-pill); background: var(--badge); box-shadow: 0 4px 0 var(--badge-edge); color: var(--ink-900); font-weight: 700; font-size: 20px; line-height: 1.2; }
.point-card h3 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; }
.point-card p { font-size: 16px; line-height: 1.5; color: var(--ink-700); text-wrap: pretty; }
.points-note { max-width: 640px; margin: 36px auto 0; font-size: 17px; line-height: 1.55; color: var(--text-muted); text-align: center; text-wrap: pretty; }

/* Questions fréquentes : cartes lilas sur la bande blanche, deux colonnes au plus */
.faq { padding: 0 0 80px; background: var(--surface-card); }
.faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.faq-item { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius-xl); background: var(--surface-app); box-shadow: var(--lift-lg) var(--edge-neutral); }
.faq-item h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.faq-item p { font-size: 16px; line-height: 1.55; color: var(--text-on-lilac); text-wrap: pretty; }
.faq-item a { font-weight: 600; }


/* ===== Conditions, confidentialité, suppression du compte (legal/layout.blade.php) ===== */
.page { display: flex; flex-direction: column; gap: 22px; padding: 10px 0 60px; }
.back { align-self: flex-start; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-pill); color: var(--text-strong); font-weight: 600; font-size: 15px; text-decoration: none; }
.back-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-card); box-shadow: 0 4px 0 var(--edge-neutral); font-size: 18px; }
.page h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: break-word; }
.title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.meta { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--yellow); font-weight: 600; font-size: 14px; }
.page > p, .page > ul, .page > form { font-size: 16px; line-height: 1.6; color: var(--text-on-lilac); }
.page form { margin: 0; }
.page strong { color: var(--text-strong); font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Listes à pastilles (violettes, ou de la couleur de leur carte) */
.page ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.page li { position: relative; padding-left: 18px; }
.page li::before { content: ''; position: absolute; left: 0; top: calc(.8em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--violet)); }

/* Un article par carte, son numéro dans une pastille */
.article { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--lift-lg) var(--edge-neutral); }
.article + .article { margin-top: -4px; }
.article h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.num { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-app); color: var(--violet-edge); font-size: 18px; letter-spacing: 0; }
.article p, .article li { font-size: 16px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.article ul { margin: 2px 0 6px; }
@media (min-width: 640px) {
  .article { padding-left: 92px; }
  .num { position: absolute; left: 24px; top: 24px; }
}

/* Supprimer mon compte */
.intro { font-size: 18px; line-height: 1.55; max-width: 620px; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.box { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-xl); font-size: 16px; line-height: 1.55; }
.box h2 { font-size: 21px; font-weight: 700; line-height: 1.2; }
.box.removed { --dot: var(--orange); background: var(--orange-soft); box-shadow: var(--lift-lg) var(--orange-soft-edge); }
.box.kept { --dot: var(--mint-edge); background: var(--mint-soft); box-shadow: var(--lift-lg) var(--mint-soft-edge); }
.box.owner { --dot: var(--yellow-edge); background: var(--yellow-soft); box-shadow: var(--lift-lg) var(--yellow-tip-edge); }
.request { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: var(--shadow-card-lg); }
.request h2 { font-size: 24px; font-weight: 700; line-height: 1.2; }
.request form { display: flex; flex-direction: column; gap: 14px; }
.request label { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.field { display: flex; flex-wrap: wrap; gap: 14px; }
/* Contour visible au repos (3:1 sur le blanc comme sur le lilas), violet foncé quand le champ est actif */
.field input { flex: 999 1 260px; min-width: 0; height: 56px; padding: 0 18px; border: 3px solid var(--field-edge); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-strong); font: 17px var(--font-sans); outline: none; }
.field input:focus { border-color: var(--violet-edge); }
.field .btn { flex: 1 1 auto; }
@media (max-width: 420px) { .request { padding: 24px 20px; } }
.error { color: var(--danger-text); font-weight: 600; font-size: 15px; }
.hint { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.page > p.aside { font-size: 15px; line-height: 1.55; }
.notice { padding: 14px 18px; border-radius: 18px; font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--text-strong); }
.notice.success { background: var(--mint-soft); color: var(--mint-ink); box-shadow: var(--lift-md) var(--mint-soft-edge); }
.notice.warning { background: var(--yellow-soft); box-shadow: var(--lift-md) var(--yellow-tip-edge); }
.notice.danger { background: var(--danger-bg); color: var(--danger-text); box-shadow: var(--lift-md) var(--danger-edge); }