/* Flow · accueil « Hub », pot à cookies et chargeurs. Tout est rangé sous #flow-hub (#fh-holo pour le passage vers la pièce) et préfixé fh- : la pièce Double Allure garde ses propres styles. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/double-allure/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/double-allure/fonts/archivo-latin-wdth-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/double-allure/fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/double-allure/fonts/newsreader-latin-opsz-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Avant que la couche existe : la page reste sombre et masquée, sans flash de la pièce. */
html.fh-wait { background: #0a0b09 !important; }
html.fh-wait body { visibility: hidden; }

/* Chargeurs Flow, un seul style holographique : le mot FLOW en reflets irisés coupés de lignes de balayage, et une ligne de lumière
   qui monte. Il sert avant l'accueil (page en attente, visible seulement si elle dure), au passage de l'accueil à la pièce (#fh-holo),
   et le chargeur de la pièce reprend les mêmes lignes et la même lumière (double-allure/index.html). */
html.fh-wait::after, #fh-holo .fh-holo-word {
  font: 800 clamp(64px, 17vw, 220px)/1 'Archivo', 'Arial Black', system-ui, sans-serif; font-stretch: 125%; letter-spacing: 0; white-space: nowrap;
  color: transparent;
  background-image: repeating-linear-gradient(180deg, rgba(10,11,9,.42) 0 1px, transparent 1px 4px),
    linear-gradient(105deg, #ffb199 0%, #ff6738 20%, #ffd09a 36%, #d6e4e6 50%, #ff6738 66%, #f6b86f 82%, #ffb199 100%);
  background-size: 100% 100%, 250% 100%; background-position: 0 0, 100% 0;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(-2px 0 rgba(255,103,56,.5)) drop-shadow(2px 0 rgba(150,214,226,.42)) drop-shadow(0 0 26px rgba(255,103,56,.28));
}
html.fh-wait::after { content: 'FLOW'; position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; animation: fhHoloAppear .3s .35s both, fhHoloSheen 2.4s linear .35s infinite; }
#fh-holo { position: fixed; inset: 0; z-index: 2147483001; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#fh-holo .fh-holo-face { position: absolute; inset: 0; background: #0a0b09; }
#fh-holo .fh-holo-face::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--fh-holo-x, 50%) var(--fh-holo-y, 50%), rgba(255,103,56,.16), transparent 55%); }
#fh-holo .fh-holo-word { padding: .08em .12em; position: absolute; left: var(--fh-holo-x, 50%); top: var(--fh-holo-y, 50%); transform: translate(-50%, -50%); animation: fhHoloOn .34s cubic-bezier(.2,.8,.2,1) both, fhHoloSheen .9s linear both; }
#fh-holo .fh-holo-beam {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent calc(100% - 120px), rgba(255,103,56,.14) calc(100% - 4px), #ffd9c7 calc(100% - 2px), #ff6738 100%);
}
#fh-holo.fh-holo-go .fh-holo-face { animation: fhHoloWipe .46s cubic-bezier(.7,0,.3,1) both; }
#fh-holo.fh-holo-go .fh-holo-beam { opacity: 1; animation: fhHoloBeam .46s cubic-bezier(.7,0,.3,1) both; }
@keyframes fhHoloAppear { from { opacity: 0; } }
@keyframes fhHoloSheen { to { background-position: 0 0, 0 0; } }
@keyframes fhHoloOn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.06, .02); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1, 1.08); }
  50% { opacity: .45; }
  62%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fhHoloWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes fhHoloBeam { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) {
  #fh-holo *, #fh-holo *::before { animation: none !important; }
  html.fh-wait::after { animation: fhHoloAppear 0s .35s both; }
}

#flow-hub {
  --bg: #0a0b09; --fg: #f4efe6; --mut: #c2beb5; --line: rgba(244,239,230,.14);
  --card: rgba(18,19,16,.62); --hot: #ff6738; --hot2: #ffb199; --glow: rgba(255,103,56,.38);
  --fd: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs: 'Newsreader', Georgia, serif;
  position: fixed; inset: 0; z-index: 2147483000; visibility: visible;
  background: var(--bg); color: var(--fg); font: 15px/1.5 var(--fd); color-scheme: dark;
  overflow: hidden; isolation: isolate; opacity: 1; transition: opacity .8s ease;
  -webkit-text-size-adjust: 100%;
}
#flow-hub.fh-only { background: rgba(10,11,9,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#flow-hub.fh-out { opacity: 0; pointer-events: none; }
html[lang="ja"] #flow-hub {
  --fd: 'Archivo', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, system-ui, sans-serif;
  --fs: 'Newsreader', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  word-break: auto-phrase; line-break: strict;
}
html[lang="ja"] #flow-hub .fh-it { font-style: normal; }
#flow-hub *, #flow-hub *::before, #flow-hub *::after { box-sizing: border-box; }
#flow-hub [hidden] { display: none !important; }
#flow-hub button { font: inherit; letter-spacing: normal; text-transform: none; color: inherit; background: none; border: 0; padding: 0; min-height: 0; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#flow-hub :focus-visible { outline: 2px solid var(--hot2); outline-offset: 3px; }
#flow-hub [tabindex="-1"]:focus { outline: none; }
#flow-hub a { color: inherit; }

/* Fonds générés par IA (Higgsfield, GPT Image 2.5) : voile sombre pour garder le contraste. Crédits : /credits */
#flow-hub .fh-scene { position: absolute; inset: -2%; z-index: 0; background: #0a0b09 center / cover no-repeat; opacity: 0; transition: opacity .9s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
#flow-hub .fh-scene.fh-on { opacity: 1; }
#flow-hub .fh-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,9,.72), rgba(10,11,9,.88)); }
#flow-hub .fh-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
#flow-hub.fh-only .fh-scene, #flow-hub.fh-only .fh-fx { display: none; }

/* Icône officielle « AI GENERATED » (Commission européenne), version blanche, coin supérieur droit, sans superposition. */
#flow-hub .fh-ai { position: absolute; z-index: 5; top: 74px; right: max(18px, env(safe-area-inset-right, 0px)); width: 96px; display: block; line-height: 0; }
#flow-hub .fh-ai img { display: block; width: 100%; height: auto; }

#flow-hub .fh-hud {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px));
}
#flow-hub .fh-brand { font: 300 13px/1 var(--fd); letter-spacing: .5em; font-stretch: 125%; }
#flow-hub .fh-brand small { display: block; margin-top: 4px; letter-spacing: .9em; font-size: 9px; color: var(--mut); }
#flow-hub .fh-tools { display: flex; gap: 8px; align-items: center; }
#flow-hub .fh-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(10,11,9,.55); backdrop-filter: blur(8px); font-size: 13px;
}
#flow-hub .fh-pill:hover { border-color: rgba(244,239,230,.35); }
#flow-hub .fh-note-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#flow-hub .fh-switch { width: 34px; height: 18px; border-radius: 999px; background: rgba(244,239,230,.18); position: relative; transition: background .25s; flex: none; }
#flow-hub .fh-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--fg); transition: transform .25s; }
#flow-hub [aria-checked="true"] .fh-switch { background: var(--hot); }
#flow-hub [aria-checked="true"] .fh-switch::after { transform: translateX(16px); }
#flow-hub .fh-langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10,11,9,.55); }
#flow-hub .fh-langs button { padding: 6px 9px; min-height: 30px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; color: var(--mut); }
#flow-hub .fh-langs button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

#flow-hub .fh-progress { position: absolute; z-index: 4; top: 70px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; width: min(420px, calc(100% - 36px)); }
#flow-hub .fh-step { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--hot); }
#flow-hub .fh-track { position: relative; width: 100%; height: 2px; background: rgba(244,239,230,.14); border-radius: 2px; }
#flow-hub .fh-track i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--hot), var(--hot2)); box-shadow: 0 0 12px var(--glow); transition: width .6s cubic-bezier(.2,.7,.2,1); border-radius: 2px; }
#flow-hub .fh-track i.fh-pulse { animation: fhPulse .55s ease; }
@keyframes fhPulse { 50% { filter: brightness(1.9) saturate(1.2); } }
#flow-hub .fh-dots { display: flex; justify-content: space-between; width: 100%; margin-top: -6px; }
#flow-hub .fh-dots span { width: 10px; height: 10px; border-radius: 50%; background: #2a2b27; border: 1px solid rgba(244,239,230,.2); transition: all .4s; }
#flow-hub .fh-dots span.fh-on { background: var(--hot); border-color: var(--hot); box-shadow: 0 0 14px var(--glow); }

#flow-hub .fh-stage {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: start center; justify-items: center; gap: clamp(14px, 3vh, 26px);
  padding: 150px max(18px, env(safe-area-inset-right, 0px)) 120px max(18px, env(safe-area-inset-left, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  transition: opacity .32s ease, transform .32s ease;
  /* Le contenu qui défile s'efface sous la barre d'étapes et sous le guide, au lieu de passer dessous.
     Les marges de défilement gardent l'élément qui a le focus clavier dans la zone nette. */
  scroll-padding-top: 150px; scroll-padding-bottom: 110px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 112px, #000 146px, #000 calc(100% - 96px), transparent calc(100% - 64px));
  mask-image: linear-gradient(180deg, transparent 0, transparent 112px, #000 146px, #000 calc(100% - 96px), transparent calc(100% - 64px));
}
#flow-hub.fh-only .fh-stage { -webkit-mask-image: none; mask-image: none; }
#flow-hub .fh-stage.fh-leave { opacity: 0; transform: scale(.98) translateY(10px); }
#flow-hub .fh-intro { text-align: center; display: grid; gap: 10px; }
#flow-hub .fh-h1 { margin: 0; font: 200 clamp(36px, 6.2vw, 74px)/1.04 var(--fd); letter-spacing: -.01em; text-wrap: balance; text-align: center; }
#flow-hub .fh-it { font-family: var(--fs); font-style: italic; font-weight: 400; color: var(--hot2); }
#flow-hub .fh-sub { margin: 0 auto; color: var(--mut); font-size: 16px; max-width: 46ch; text-wrap: balance; }
#flow-hub .fh-q { margin: 4px 0 0; font: 400 clamp(20px, 2.8vw, 28px)/1.2 var(--fd); text-wrap: balance; text-align: center; }
#flow-hub .fh-q b { color: var(--hot); font-weight: 500; }

#flow-hub .fh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; width: min(1080px, 100%); }
#flow-hub .fh-card {
  position: relative; min-height: clamp(128px, 26vh, 220px); padding: clamp(14px, 2.4vh, 22px) 20px; border-radius: 18px; text-align: left;
  border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(12px);
  transition: border-color .3s, box-shadow .3s, background .3s;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  display: flex; flex-direction: column; gap: 10px;
}
#flow-hub .fh-card svg { width: clamp(32px, 5vh, 46px); height: clamp(32px, 5vh, 46px); stroke: var(--fg); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: auto; }
#flow-hub .fh-name { font: 500 19px/1.2 var(--fd); }
#flow-hub .fh-desc { color: var(--mut); font-size: 13px; line-height: 1.45; }
#flow-hub .fh-bar { width: 22px; height: 2px; background: var(--hot); opacity: .7; }
#flow-hub .fh-card:hover, #flow-hub .fh-card:focus-visible { border-color: rgba(255,103,56,.55); background: rgba(26,20,16,.7); }
#flow-hub .fh-card[aria-pressed="true"] { border-color: var(--hot); box-shadow: 0 0 0 1px var(--hot), 0 0 46px var(--glow); background: rgba(40,20,12,.78); animation: fhPop .45s cubic-bezier(.2,1.5,.4,1); }
#flow-hub .fh-card[aria-pressed="true"] svg { stroke: var(--hot2); }
#flow-hub .fh-stage.fh-enter .fh-card { animation: fhRise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes fhRise { from { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(8deg); } }
@keyframes fhPop { 0% { transform: perspective(900px) scale(.96); } 60% { transform: perspective(900px) scale(1.03); } 100% { transform: perspective(900px) scale(1); } }

#flow-hub .fh-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
#flow-hub .fh-other { width: min(520px, 100%); padding: 13px 18px; border-radius: 999px; border: 1px solid var(--hot); background: rgba(10,11,9,.7); color: var(--fg); font: 16px var(--fd); text-align: center; }
#flow-hub .fh-other:focus, #flow-hub .fh-input:focus { outline: 2px solid var(--hot2); outline-offset: 3px; }
#flow-hub .fh-btn {
  min-height: 50px; padding: 13px 26px; border-radius: 999px; font-weight: 500; line-height: 1.2; color: var(--fg);
  border: 1px solid var(--line); background: rgba(10,11,9,.55); backdrop-filter: blur(8px); transition: transform .2s, box-shadow .3s, border-color .3s, background .3s;
}
#flow-hub .fh-btn:hover { transform: translateY(-1px); border-color: rgba(244,239,230,.35); }
/* Dégradé assombri pour garder au moins 4,5:1 entre le texte clair et le fond, partout sur le bouton. */
#flow-hub .fh-btn.fh-primary { border-color: transparent; background: linear-gradient(180deg, #b8431f, #8f3318); box-shadow: 0 10px 34px rgba(255,103,56,.28); }
#flow-hub .fh-btn.fh-primary:hover { box-shadow: 0 12px 40px rgba(255,103,56,.42); }
#flow-hub .fh-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(760px, 100%); }
#flow-hub .fh-note { margin: 0 auto; max-width: 54ch; text-align: center; font-size: 13px; color: var(--mut); text-wrap: pretty; }
#flow-hub .fh-note a { color: var(--fg); text-underline-offset: 3px; }
#flow-hub .fh-link { color: var(--mut); text-decoration: underline; text-underline-offset: 3px; padding: 8px; min-height: 44px; }
#flow-hub .fh-link:hover { color: var(--fg); }

#flow-hub .fh-guide {
  position: absolute; z-index: 4; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(10,11,9,.66); backdrop-filter: blur(10px); max-width: calc(100% - 32px);
}
#flow-hub .fh-orb { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb199, #ff6738 45%, #3a1a10 75%); box-shadow: 0 0 22px var(--glow); animation: fhBreathe 3.2s ease-in-out infinite; }
@keyframes fhBreathe { 50% { transform: scale(1.08); box-shadow: 0 0 34px var(--glow); } }
#flow-hub .fh-guide span:last-child { font-size: 14px; }

/* Prénom : le mot s'écrit en particules. */
#flow-hub .fh-name-stage { position: relative; width: min(640px, 100%); height: 170px; }
#flow-hub .fh-name-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#flow-hub .fh-input { width: min(420px, 100%); padding: 13px 18px; border-radius: 999px; border: 1px solid var(--hot); background: rgba(10,11,9,.7); color: var(--fg); font: 500 17px var(--fd); text-align: center; }
#flow-hub .fh-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 9; box-shadow: 0 0 10px rgba(255,103,56,.8); }

/* Pot à cookies : deux bocaux de verre côte à côte. Essentiels pleins et verrouillés ; statistiques vides par défaut,
   et toute la carte des statistiques est l'interrupteur (une grande cible, un interrupteur visible à côté de l'état). */
#flow-hub .fh-jars { display: grid; grid-template-columns: repeat(2, minmax(0, 232px)); justify-content: center; gap: clamp(10px, 3vw, 28px); width: min(500px, 100%); }
#flow-hub .fh-jar-col {
  display: grid; justify-items: center; align-content: start; gap: 6px; padding: 16px 14px 14px; text-align: center;
  border: 1px solid var(--line); border-radius: 22px; background: rgba(14,15,12,.5); backdrop-filter: blur(10px);
  transition: border-color .3s, background .3s, box-shadow .3s;
}
#flow-hub button.fh-jar-col:hover { border-color: rgba(255,103,56,.5); }
#flow-hub .fh-jar-col[aria-checked="true"] { border-color: var(--hot); background: rgba(40,20,12,.62); box-shadow: 0 0 0 1px var(--hot), 0 0 40px var(--glow); }
#flow-hub .fh-stage.fh-enter .fh-jar-col { animation: fhRise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
#flow-hub .fh-jar-pic { position: relative; display: block; width: 104px; height: 128px; margin-bottom: 4px; }
/* Couvercle : il se soulève quand les cookies tombent dans le bocal. */
#flow-hub .fh-lid {
  position: absolute; z-index: 2; top: 0; left: 15%; width: 70%; height: 12%; border-radius: 6px 6px 3px 3px;
  border: 1px solid rgba(244,239,230,.24); background: linear-gradient(180deg, #4a3a30, #241b15);
  transform-origin: 12% 100%; transition: background .3s;
}
#flow-hub .fh-lid::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -5px; height: 4px; border-radius: 0 0 3px 3px; background: rgba(244,239,230,.16); }
#flow-hub [aria-checked="true"] .fh-lid { background: linear-gradient(180deg, #ff7a4d, #b8431f); }
#flow-hub .fh-jar-pic.fh-pop .fh-lid { animation: fhLid .8s cubic-bezier(.2,.9,.3,1); }
@keyframes fhLid { 25%, 70% { transform: translateY(-12px) rotate(-16deg); } }
#flow-hub .fh-jar {
  position: absolute; left: 0; right: 0; top: 15%; bottom: 0; display: block; overflow: hidden;
  border: 1.5px solid rgba(244,239,230,.3); border-radius: 18px 18px 34px 34px;
  background: linear-gradient(90deg, rgba(244,239,230,.1), rgba(244,239,230,.02) 28%, rgba(244,239,230,0) 62%, rgba(244,239,230,.07)), rgba(10,11,9,.45);
  box-shadow: inset 0 -12px 22px rgba(0,0,0,.4); transition: border-color .3s;
}
#flow-hub [aria-checked="true"] .fh-jar { border-color: rgba(255,103,56,.75); }
/* Reflet du verre, devant les cookies. */
#flow-hub .fh-jar::after { content: ""; position: absolute; z-index: 1; left: 12%; top: 10%; width: 8%; height: 58%; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); }
#flow-hub .fh-ck {
  position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 30% 34%, #5a3418 0 8%, transparent 9%), radial-gradient(circle at 66% 30%, #5a3418 0 7%, transparent 8%),
    radial-gradient(circle at 54% 66%, #5a3418 0 9%, transparent 10%), radial-gradient(circle at 26% 70%, #5a3418 0 6%, transparent 7%),
    radial-gradient(circle at 38% 32%, #f0c27f, #c98c45 58%, #8f5a26);
  box-shadow: inset -2px -3px 0 rgba(0,0,0,.22), 0 3px 5px rgba(0,0,0,.35);
  transform: rotate(var(--r, 0deg));
  animation: fhDrop .65s cubic-bezier(.3,1.35,.5,1) both;
}
#flow-hub .fh-ck.fh-ck-out { animation: fhLift .38s cubic-bezier(.5,0,.75,0) both; }
@keyframes fhDrop { from { transform: translateY(-170px) rotate(calc(var(--r, 0deg) - 140deg)); opacity: 0; } 40% { opacity: 1; } }
@keyframes fhLift { to { transform: translateY(-150px) rotate(calc(var(--r, 0deg) + 90deg)); opacity: 0; } }
#flow-hub .fh-jar-title { display: block; margin: 0; font: 500 15px/1.2 var(--fd); }
#flow-hub .fh-jar-text { display: block; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--mut); text-wrap: balance; }
#flow-hub .fh-jar-state { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--fg); text-align: left; }
#flow-hub .fh-switch.fh-lock { background: rgba(255,103,56,.42); }
#flow-hub .fh-switch.fh-lock::after { transform: translateX(16px); opacity: .8; }

#flow-hub .fh-greet { margin: 0; font: italic 400 clamp(30px, 4.6vw, 50px)/1.15 var(--fs); text-wrap: balance; text-align: center; }
#flow-hub .fh-end { place-content: center; padding-top: 120px; }
#flow-hub:not(.fh-only) .fh-end { cursor: pointer; } /* fin d’accueil : un clic passe le salut */
#flow-hub .fh-close { position: absolute; z-index: 7; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10,11,9,.55); font-size: 13px; }
#flow-hub .fh-close:hover { border-color: rgba(244,239,230,.35); }
#flow-hub .fh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 720px) {
  #flow-hub .fh-ai { top: 66px; width: 72px; }
  #flow-hub .fh-progress { width: calc(100% - 132px); left: calc(50% - 34px); top: 72px; }
  #flow-hub .fh-stage {
    padding-top: 140px; padding-bottom: 72px; gap: 18px;
    scroll-padding-top: 140px; scroll-padding-bottom: 40px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 104px, #000 132px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, transparent 104px, #000 132px, #000 calc(100% - 28px), transparent 100%);
  }
  #flow-hub .fh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #flow-hub .fh-card { min-height: 0; padding: 14px; }
  #flow-hub .fh-card svg { width: 30px; height: 30px; margin-bottom: 6px; }
  #flow-hub .fh-name { font-size: 16px; }
  #flow-hub .fh-desc { font-size: 12px; }
  #flow-hub .fh-choices { grid-template-columns: 1fr; width: min(420px, 100%); }
  #flow-hub .fh-langs button { padding: 6px 7px; }
  #flow-hub .fh-pill .fh-label { display: none; }
  #flow-hub .fh-jars { gap: 10px; }
  #flow-hub .fh-jar-col { gap: 4px; padding: 12px 6px 10px; border-radius: 18px; }
  #flow-hub .fh-jar-pic { width: 76px; height: 94px; }
  #flow-hub .fh-jar-state { gap: 6px; }
  #flow-hub .fh-jar { border-radius: 14px 14px 28px 28px; }
  #flow-hub .fh-choices .fh-btn { min-height: 46px; padding: 11px 20px; }
  #flow-hub .fh-guide { display: none; }
}
/* Écrans bas : on retire le détail des cartes, jamais les phrases qui disent ce qu'il advient des données. */
@media (max-height: 680px) {
  #flow-hub .fh-desc { display: none; }
}
/* Téléphones courts : l'écran des cookies doit montrer l'information et les trois boutons sans défiler. */
@media (max-width: 720px) and (max-height: 760px) {
  #flow-hub .fh-stage {
    gap: 12px; padding-top: 124px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 96px, #000 118px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, transparent 96px, #000 118px, #000 calc(100% - 20px), transparent 100%);
    scroll-padding-top: 124px;
  }
  #flow-hub .fh-h1 { font-size: 30px; }
  /* Titre du pot plus long en anglais, espagnol et japonais : un cran plus petit pour que « Retour » reste dans l'écran. */
  #flow-hub[lang="en"] .fh-stage > .fh-h1, #flow-hub[lang="es"] .fh-stage > .fh-h1, #flow-hub[lang="ja"] .fh-stage > .fh-h1 { font-size: 25px; }
  #flow-hub .fh-jar-text { font-size: 12px; }
  #flow-hub .fh-jar-pic { width: 64px; height: 80px; margin-bottom: 0; }
  #flow-hub .fh-jar-col { gap: 4px; padding: 10px 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #flow-hub *, #flow-hub *::before, #flow-hub *::after { animation: none !important; transition: none !important; }
  #flow-hub { transition: none; }
}