/* =====================================================================
   Couche « verre liquide » : une seule typo système (SF sur Apple), fonds en dégradés
   de couleur doux, panneaux translucides floutés avec reflet, mouvements fluides.
   ===================================================================== */
:root {
  --f-sys: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Geist", "Helvetica Neue", system-ui, sans-serif;
  --f-shell: var(--f-sys);
  --f-mono: var(--f-sys);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --bg: #F2F3F7;
  --surface: rgba(255, 255, 255, .62);
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --line: rgba(0, 0, 0, .08);
  --g-bg: rgba(255, 255, 255, .5);
  --g-brd: rgba(255, 255, 255, .75);
  --g-hi: rgba(255, 255, 255, .9);
  --g-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 12px 40px -12px rgba(30, 40, 80, .18);
  --blob-a: #B9D2FF; --blob-b: #F5C9E6; --blob-c: #FFE1B8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0B0C10; --surface: rgba(40, 42, 50, .55); --ink: #F5F5F7; --muted: #A1A1A6; --line: rgba(255, 255, 255, .1);
    --g-bg: rgba(38, 40, 48, .48); --g-brd: rgba(255, 255, 255, .14); --g-hi: rgba(255, 255, 255, .22); --g-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 16px 48px -16px rgba(0, 0, 0, .7);
    --blob-a: #22325E; --blob-b: #4A2346; --blob-c: #4A3820; }
}
:root[data-theme="dark"] { --bg: #0B0C10; --surface: rgba(40, 42, 50, .55); --ink: #F5F5F7; --muted: #A1A1A6; --line: rgba(255, 255, 255, .1);
  --g-bg: rgba(38, 40, 48, .48); --g-brd: rgba(255, 255, 255, .14); --g-hi: rgba(255, 255, 255, .22); --g-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 16px 48px -16px rgba(0, 0, 0, .7);
  --blob-a: #22325E; --blob-b: #4A2346; --blob-c: #4A3820; }

body { font-family: var(--f-sys); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; background: var(--bg);
  background-image: radial-gradient(60vw 50vw at 8% -5%, var(--blob-a), transparent 70%), radial-gradient(50vw 45vw at 100% 8%, var(--blob-b), transparent 70%), radial-gradient(55vw 40vw at 50% 60vh, var(--blob-c), transparent 70%);
  background-repeat: no-repeat; background-size: 100% 140vh; }
.mono, .u-covea .mono3, .u-label .mono, .u-coabri .u-label .mono, .u-joue .u-label .mono, .u-bio .u-label .mono, .u-covea .u-label .mono, .gamme .mono {
  font-family: var(--f-sys); text-transform: none; letter-spacing: -0.005em; font-size: 14px; font-weight: 600; }
h1, h2, h3, h4 { letter-spacing: -0.025em; }

/* Le verre : panneau translucide, flou d'arrière-plan, bord lumineux, reflet qui suit le pointeur */
.glass, .facts, .tile, .c-line, .cert, .sk li, .lang,
.c-fact, .c-img, .gamme, .c-role,
.block, .box, .ticket, .j-quote,
.searchbar, .chat, .panel, .vs, .reco, .cv-first, .cv-mission span,
.b-sign, .crate, .polaroid {
  position: relative; isolation: isolate;
  background: var(--gl, var(--g-bg));
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--gb, var(--g-brd));
  box-shadow: inset 0 1px 0 var(--gh, var(--g-hi)), var(--g-shadow);
  border-radius: 26px;
}
.tile::after, .c-fact::after, .gamme::after, .block::after, .box::after, .ticket::after, .reco::after, .crate::after, .c-line::after, .cert::after, .panel::after, .chat::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .45), transparent 45%);
}
.tile:hover::after, .c-fact:hover::after, .gamme:hover::after, .block:hover::after, .box:hover::after, .ticket:hover::after, .reco:hover::after, .crate:hover::after, .c-line:hover::after, .cert:hover::after, .panel:hover::after, .chat:hover::after { opacity: 1; }
.tile, .c-fact, .gamme, .block, .box, .ticket, .reco, .crate, .c-line, .cert, .panel, .chat, .polaroid { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.tile:hover, .c-fact:hover, .gamme:hover, .box:hover, .ticket:hover, .reco:hover, .crate:hover, .c-line:hover, .panel:hover { transform: translateY(-4px) scale(1.01); }

/* Barre de navigation flottante en capsule */
html { scroll-padding-top: 84px; }
body::before { background: transparent; }
.bar { top: calc(env(safe-area-inset-top, 0px) + 12px); width: min(calc(100% - 24px), 1040px); margin: 12px auto 0; border-radius: 999px; border: 1px solid var(--g-brd); border-bottom: 1px solid var(--g-brd);
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%); box-shadow: inset 0 1px 0 var(--g-hi), 0 10px 30px -12px rgba(0, 0, 0, .25); overflow: hidden; }
.bar-in { height: 50px; padding-left: 20px; padding-right: 8px; max-width: none; }
.bar nav a { font-size: 13.5px; padding: 6px 12px; transition: color .4s var(--ease), background-color .4s var(--ease); }
.bar nav a.on { background: var(--ink); color: var(--bg); }
.bar .prog { bottom: 0; height: 2px; opacity: .35; }
.lang { border-radius: 999px; padding: 3px; }
.lang span { font-family: var(--f-sys); font-weight: 600; }

/* Accueil */
.hero { padding-block: 96px 48px; }
.hero h1 { font-weight: 700; letter-spacing: -0.05em; line-height: .98; }
html:not(.intro) .hero h1 em, .hero h1 em .wd > span { background: linear-gradient(100deg, #0A84FF, #BF5AF2 55%, #FF6482); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero h1 em .wd { padding-right: .06em; }
.hero .lede { line-height: 1.55; }
.hero .avail { color: var(--ink); background: var(--g-bg); border: 1px solid var(--g-brd); padding: 6px 14px 6px 12px; border-radius: 999px; width: fit-content; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 var(--g-hi); }
.facts { border-radius: 24px; padding: 6px 8px; }
.facts div { padding: 14px 16px; }
.facts div + div { border-left: 1px solid var(--line); }
.tiles { gap: 14px; }
.tile { min-height: 190px; padding: 20px; border-radius: 28px; color: var(--ink); overflow: hidden; background: var(--g-bg); background-image: none; }
.tile::before { content: ""; position: absolute; z-index: -2; width: 170px; height: 170px; right: -40px; bottom: -60px; border-radius: 50%; filter: blur(30px); opacity: .85; background: var(--tc, #0A84FF); transition: transform .8s var(--ease); }
.tile:hover::before { transform: scale(1.25) translate(-10px, -10px); }
.tile strong, .t-coabri strong, .t-joue strong, .t-covea strong, .t-bio strong, .t-tmb strong { font-family: var(--f-sys); font-weight: 700; color: var(--ink); text-transform: none; font-size: 22px; letter-spacing: -0.03em; }
.tile .mono { font-size: 12.5px; color: var(--muted); opacity: 1; }
.tile small { color: var(--muted); opacity: 1; }
.t-coabri { --tc: #34C759; } .t-joue { --tc: #FFB800; } .t-covea { --tc: #0A84FF; } .t-bio { --tc: #FF6B3D; } .t-tmb { --tc: #64D2FF; }
.t-covea, .t-tmb, .t-bio { border: 1px solid var(--g-brd); }

/* Chapitres : disque en dégradé lumineux */
.ch-circle { background: radial-gradient(120% 100% at 30% 15%, color-mix(in srgb, var(--c1) 55%, #fff) 0%, var(--c1) 50%, color-mix(in srgb, var(--c1) 75%, #000) 100%); }
.ch-line { font-family: var(--f-sys); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; opacity: .85; }
.ch-sub { font-family: var(--f-sys) !important; font-weight: 500; letter-spacing: -0.02em; }
.ch-pre strong { font-weight: 700; letter-spacing: -0.04em; }
#wipe span { font-family: var(--f-sys) !important; font-weight: 700 !important; letter-spacing: -0.05em; }

/* Univers : fonds en dégradés de leurs couleurs, une seule typo */
.u-coabri, .u-joue, .u-covea, .u-bio { font-family: var(--f-sys); position: relative; overflow: hidden; }
.u-coabri .wave, .u-bio .vichy, .u-joue::before { display: none; }
.u-coabri .inner, .u-joue .inner, .u-covea .inner, .u-bio .inner { padding-block: 96px; }
.u-coabri { background: #EEF4EC; background-image: radial-gradient(50% 40% at 85% 10%, rgba(124, 179, 66, .45), transparent 70%), radial-gradient(45% 35% at 5% 55%, rgba(91, 143, 163, .4), transparent 70%), radial-gradient(40% 30% at 70% 95%, rgba(242, 194, 48, .35), transparent 70%); }
.u-joue { background: #FFF5D6; background-image: radial-gradient(45% 35% at 10% 8%, rgba(255, 201, 60, .75), transparent 70%), radial-gradient(40% 35% at 95% 30%, rgba(62, 166, 255, .35), transparent 70%), radial-gradient(45% 35% at 20% 80%, rgba(229, 56, 59, .25), transparent 70%), radial-gradient(40% 30% at 85% 90%, rgba(43, 182, 115, .3), transparent 70%); }
.u-covea { background: #EEF2FA; background-image: radial-gradient(50% 40% at 90% 5%, rgba(43, 89, 217, .3), transparent 70%), radial-gradient(45% 35% at 0% 60%, rgba(110, 139, 255, .3), transparent 70%), radial-gradient(40% 30% at 75% 100%, rgba(191, 90, 242, .18), transparent 70%); }
.u-bio { background: #F7F1E6; background-image: radial-gradient(50% 40% at 90% 8%, rgba(43, 107, 48, .3), transparent 70%), radial-gradient(45% 35% at 5% 45%, rgba(240, 151, 58, .3), transparent 70%), radial-gradient(40% 30% at 70% 100%, rgba(224, 74, 59, .2), transparent 70%); }
.u-coabri .u-label, .u-bio .u-label { color: inherit; opacity: .7; }

/* Titres de section : la typo de la marque reste uniquement sur le grand titre */
.c-hero h2, .j-hero h2, .cv-hero h2, .b-hero h2 { letter-spacing: -0.035em; }
.cv-hero h2 { font-family: var(--f-sys); font-weight: 700; }
.b-hero h2 { line-height: 1; }
.b-hero h2 small, .note, .ledger thead th, .parfums span, .polaroid figcaption, .b-sign .k { font-family: var(--f-sys); transform: none; letter-spacing: -0.01em; }
.b-hero h2 small { font-size: .3em; font-weight: 600; margin-bottom: 10px; color: var(--grass); }
.note { font-size: 16px; font-weight: 600; line-height: 1.45; }
.ledger thead th { font-size: 13px; font-weight: 600; color: var(--soil); opacity: .7; }
.b-sign .k { font-size: 14px; font-weight: 600; color: var(--grass); }
.parfums span { font-size: 13px; font-weight: 600; padding: 4px 10px; }

/* Coâbri */
.c-fact, .c-img { --gl: rgba(255, 255, 255, .55); }
.c-fact .v { letter-spacing: -0.03em; }
.c-fact p, .c-row p, .c-row li, .c-role p { font-family: var(--f-sys); }
.lotus img { border-radius: 40px; box-shadow: 0 30px 60px -30px rgba(46, 94, 58, .6); }
.lotus .pad { -webkit-mask: none; mask: none; background: rgba(124, 179, 66, .55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 40px -16px rgba(0, 0, 0, .3); color: #0E2A14; }
.gamme.g1 { --gl: rgba(46, 94, 58, .78); --gb: rgba(255, 255, 255, .25); --gh: rgba(255, 255, 255, .35); }
.gamme.g2 { --gl: rgba(70, 125, 148, .78); --gb: rgba(255, 255, 255, .25); --gh: rgba(255, 255, 255, .35); }
.gamme .chips span, .c-role .chips span { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.c-role { --gl: rgba(242, 194, 48, .55); }
.c-role .chips span { background: rgba(42, 36, 16, .85); }

/* JouéClub : briques en verre coloré, plus de rotations */
.block { --gb: rgba(255, 255, 255, .45); --gh: rgba(255, 255, 255, .6); border-radius: 26px; min-height: 160px; }
.block::before { display: none; }
.b-red { --gl: linear-gradient(160deg, rgba(255, 90, 95, .92), rgba(229, 56, 59, .8)); }
.b-blue { --gl: linear-gradient(160deg, rgba(60, 80, 200, .92), rgba(27, 42, 140, .85)); }
.b-green { --gl: linear-gradient(160deg, rgba(70, 210, 140, .92), rgba(43, 182, 115, .82)); }
.b-sky { --gl: linear-gradient(160deg, rgba(100, 190, 255, .95), rgba(62, 166, 255, .82)); }
.block .d { font-family: var(--f-sys); }
.blocks .block:nth-child(n), .tk-row .phone:nth-child(n), .ph-a, .ph-b, .j-hero h2 .w { transform: none; rotate: none; }
.j-hero h2 .w { box-shadow: inset 0 1px 0 #fff, 0 10px 30px -10px rgba(27, 42, 140, .35); background: rgba(255, 255, 255, .75); }
.j-hero p, .box ul, .ticket p, .cmp .k, .balance div, .tk-head p, .j-quote small { font-family: var(--f-sys); }
.box { --gl: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow); }
.box h3 { font-weight: 700; }
.ticket { --gl: rgba(255, 255, 255, .6); }
.cmp div { background: rgba(255, 255, 255, .6); border-radius: 16px; }
.balance { border: 1px solid rgba(27, 42, 140, .2); border-radius: 18px; }
.balance div:first-child { background: rgba(27, 42, 140, .88); }
.j-quote { --gl: rgba(27, 42, 140, .85); --gb: rgba(255, 255, 255, .25); --gh: rgba(255, 255, 255, .3); border-radius: 30px; font-weight: 700; letter-spacing: -0.03em; }
.phone { border: 1px solid rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 24px 50px -20px rgba(27, 42, 140, .45); border-radius: 34px; }
.phone::before { display: none; }
.phone.shot .ph-top .fmt { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(255, 255, 255, .22); font-family: var(--f-sys); font-weight: 600; font-size: 13px; padding: 3px 10px; }
.phone.shot .ph-bot { background: linear-gradient(transparent, rgba(0, 0, 0, .7) 45%); }
.phone.shot .views { font-family: var(--f-sys); font-weight: 700; letter-spacing: -0.03em; }
.tk-head h3, .box h3, .ticket h3, .block .v, .cmp .v { font-family: var(--f-sys); letter-spacing: -0.03em; }

/* Covéa */
.searchbar { --gl: rgba(255, 255, 255, .65); border-radius: 999px; }
.chat, .panel, .reco, .vs { --gl: rgba(255, 255, 255, .6); }
.vs { overflow: hidden; border-radius: 22px; }
.vs .h { background: rgba(16, 34, 74, .9); }
.vs .h.g { background: rgba(43, 89, 217, .9); }
.cv-first { --gl: linear-gradient(150deg, rgba(30, 52, 110, .92), rgba(16, 34, 74, .9)); --gb: rgba(255, 255, 255, .18); --gh: rgba(255, 255, 255, .25); border-radius: 30px; }
.steps .dot { box-shadow: 0 0 0 4px rgba(16, 34, 74, .9), 0 0 16px rgba(110, 139, 255, .8); }
.cv-mission span { --gl: rgba(255, 255, 255, .6); border-radius: 999px; padding: 8px 16px; }
.msg-user { border-radius: 20px 20px 6px 20px; background: #0A84FF; }
.msg-ai .av { border-radius: 50%; background: conic-gradient(from 200deg, #0A84FF, #BF5AF2, #FF6482, #FFD60A, #0A84FF); }
.rank div { border-radius: 14px; }
.u-covea .mono3 { font-size: 13px; }

/* Bio Avenir : plus de cagettes ni de polaroids penchés */
.b-sign { --gl: linear-gradient(150deg, rgba(43, 107, 48, .9), rgba(31, 84, 36, .88)); --gb: rgba(255, 255, 255, .22); --gh: rgba(255, 255, 255, .3); border-radius: 28px; color: #fff; }
.b-sign .k { color: #CDEBC8; }
.crate { --gl: rgba(255, 255, 255, .6); border-radius: 26px; }
.crate::after { border: 0; inset: 0; }
.crate h3 { font-family: var(--f-sys); font-weight: 700; letter-spacing: -0.025em; color: var(--soil); }
.crate figure img, .c-img img, .gamme figure img { border-radius: 16px; }
.polaroid { padding: 10px; border-radius: 28px; --gl: rgba(255, 255, 255, .55); }
.polaroid img { border-radius: 20px; }
.polaroid figcaption { position: absolute; left: 22px; bottom: 22px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 4px 12px; border-radius: 999px; }
.u-bio .b-hero p, .crate p, .crate li, .b-sign p, .ledger { font-family: var(--f-sys); }

/* Cadre bas de page */
.shell-sec, .contact { border-top: 0; }
.shell-sec h2, .contact h2 { letter-spacing: -0.045em; }
.tl div { border-bottom: 1px solid var(--line); }
.sk li { border-radius: 999px; padding: 7px 14px; font-weight: 500; }
.cert { border-radius: 24px; padding: 18px; }
.cert-thumb { border-radius: 14px; border: 1px solid var(--line); }
.c-line { border-radius: 24px; padding: 20px; }
.c-line button, .c-line a.btn, .cert-btn { border-radius: 999px; padding: 8px 16px; font-family: var(--f-sys); font-weight: 600; }
.cert-dlg { border-radius: 28px; }
.contact h2 { background: linear-gradient(100deg, var(--ink) 30%, #0A84FF 70%, #BF5AF2); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Apparitions : une seule entrée fluide, floue puis nette */
[data-r] { transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease), clip-path 1.2s var(--ease); transition-delay: calc(var(--i) * 70ms); }
html.js [data-r].pre, html.js [data-r="rise"].pre, html.js [data-r="drop"].pre, html.js [data-r="pop"].pre, html.js [data-r="photo"].pre { opacity: 0; transform: translateY(36px) scale(.97); filter: blur(12px); }
html.js [data-r="zoom"].pre { opacity: 0; filter: blur(12px); clip-path: none; transform: translateY(36px) scale(.97); }

@media (max-width: 620px) {
  .facts div + div { border-left: 0; border-top: 1px solid var(--line); }
  .bar-in { padding-left: 8px; }
  .hero { padding-block: 64px 32px; }
  .u-coabri .inner, .u-joue .inner, .u-covea .inner, .u-bio .inner { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .c-fact, .gamme, .block, .box, .ticket, .reco, .crate, .c-line, .cert, .panel, .chat, .polaroid, .tile::before { transition: none; }
  .tile:hover, .c-fact:hover, .gamme:hover, .box:hover, .ticket:hover, .reco:hover, .crate:hover, .c-line:hover, .panel:hover { transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --g-bg: rgba(255, 255, 255, .88); }
}
/* Dans les univers clairs, le verre reste clair même en thème sombre */
.u-coabri, .u-joue, .u-covea, .u-bio { --g-bg: rgba(255, 255, 255, .55); --g-brd: rgba(255, 255, 255, .75); --g-hi: rgba(255, 255, 255, .9); --g-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 12px 40px -12px rgba(30, 40, 80, .18); }
.gamme.g1, .gamme.g2, .c-role, .c-fact, .c-img, .box, .ticket, .chat, .panel, .reco, .vs, .searchbar, .crate, .polaroid, .b-sign, .j-quote, .cv-first, .cv-mission span { background: var(--gl); }
.in-done { transition-delay: 0s !important; }