/* =========================================================================
FLEXHO — feuille de style unique
Direction : « Le service » — encre marine (issue du logo), papier chaud,
braise. Structuré, éditorial, humain. Aucun build, aucune dépendance.
Ordre : 1 tokens · 2 reset · 3 typo · 4 layout · 5 composants
6 rail signature · 7 sections · 8 mouvement · 9 responsive
========================================================================= */
/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
/* Encre : le navy de l'application Flexho. Jamais de noir pur. */
--ink: #0C2143;
--ink-2: #14345C; /* le bleu des en-têtes de l'app */
--ink-deep: #071730;
--brand: #011666; /* le bleu du logo */
/* Clair : le fond gris-bleu de l'app, et des cartes blanches par-dessus. */
--paper: #F5F8FC;
--paper-2: #E7EFF9;
--paper-3: #D6E3F2;
--card: #FFFFFF;
/* Azur : l'accent. Doses rares — CTA, focus, chiffres clés.
Deux valeurs : une pour les aplats, une pour le texte sur fond clair,
parce qu'un même bleu ne peut pas passer les deux contrastes. */
--azur: #1F6FEB; /* aplats de bouton, texte blanc dessus */
--azur-deep: #1A56C4; /* texte d'accent sur fond clair */
--azur-soft: #5B9BFF; /* texte d'accent sur fond navy */
/* Teal : le parcours travailleurs et tout ce qui confirme. */
--teal: #0E7C86;
--teal-deep: #0A6570;
--teal-soft: #4FC3CE;
/* Alerte : erreurs de formulaire uniquement. Le rouge d'« Annulé » de l'app. */
--alert: #B3261E;
--alert-soft: #FF8A7A;
/* Texte */
--on-ink: #F5F8FC;
--on-ink-muted: rgba(245,248,252,.62);
--on-ink-faint: rgba(245,248,252,.56);
--on-paper: #14345C;
--on-paper-muted:#4C6182;
--line-ink: rgba(245,248,252,.16);
--line-paper: rgba(20,52,92,.14);
/* Bordures d'éléments interactifs : elles doivent atteindre 3:1, ce qu'un
filet décoratif n'atteint jamais. D'où ces deux valeurs dédiées. */
--edge-ink: rgba(245,248,252,.42);
--edge-paper: rgba(20,52,92,.62);
/* Typo */
--sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Échelle fluide */
--t-mega: clamp(2.9rem, 9.4vw, 8.2rem);
--t-xl: clamp(2.3rem, 6.6vw, 5.2rem);
--t-lg: clamp(1.9rem, 4.6vw, 3.5rem);
--t-md: clamp(1.5rem, 3.4vw, 2.3rem);
--t-lede: clamp(1.05rem, 1.9vw, 1.35rem);
--t-body: clamp(1rem, 1.4vw, 1.075rem);
--t-mono: clamp(.66rem, .95vw, .76rem);
/* Rythme */
--gut: clamp(1.25rem, 5vw, 2.5rem);
--band-y: clamp(4.5rem, 11vh, 9rem);
--maxw: 1360px;
--rail: 0px;
/* Lisibilité du texte posé sur une photo : trois couches, jamais sur un bouton. */
--tshadow: 0 1px 2px rgba(4,12,28,.9), 0 3px 14px rgba(4,12,28,.72), 0 12px 46px rgba(4,12,28,.66);
/* Courbes — deux, partout. */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--dur: .42s;
--dur-slow: .9s;
}
@media (min-width: 1080px){ :root{ --rail: 86px; } }
/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;overflow-x:hidden;overflow-x:clip;
background:var(--ink);color:var(--on-ink);
font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
font-variation-settings:'wdth' 100;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
picture{display:contents}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--azur);outline-offset:3px;border-radius:2px}
::selection{background:var(--azur);color:#fff}
.skip{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--azur);color:#fff;padding:.85rem 1.25rem;font-weight:700;
}
.skip:focus{left:.5rem;top:.5rem}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- 3. TYPOGRAPHIE ---------------------------------------------- */
.mega,.h1,.h2,.h3{
font-weight:800;line-height:.92;letter-spacing:-.035em;
font-variation-settings:'wdth' 112;
text-wrap:balance;
}
.mega{font-size:var(--t-mega);line-height:.86;letter-spacing:-.045em}
.h1{font-size:var(--t-xl)}
.h2{font-size:var(--t-lg)}
.h3{font-size:var(--t-md);font-variation-settings:'wdth' 105;letter-spacing:-.02em;line-height:1.05}
.lede{font-size:var(--t-lede);line-height:1.5;max-width:46ch;color:var(--on-ink-muted)}
.paper .lede,.on-paper .lede{color:var(--on-paper-muted)}
p{max-width:64ch}
/* Le motif « ticket / pointeuse » — mono, jamais en texte courant. */
.mono{
font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
letter-spacing:.16em;text-transform:uppercase;
}
.kicker{
display:inline-flex;align-items:center;gap:.6rem;
font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--azur-soft);
}
.kicker::before{content:"";width:1.8rem;height:1px;background:currentColor;opacity:.6}
.paper .kicker{color:var(--azur-deep)}
.em{color:var(--azur-soft)}
.paper .em{color:var(--azur-deep)}
/* ---------- 4. LAYOUT ---------------------------------------------------- */
.wrap{
width:100%;max-width:var(--maxw);
margin-inline:auto;padding-inline:var(--gut);
}
@media (min-width:1080px){ .wrap{padding-left:calc(var(--gut) + var(--rail))} }
.band{position:relative;padding-block:var(--band-y)}
.paper{background:var(--paper);color:var(--on-paper)}
.paper .mono{color:var(--on-paper-muted)}
.ink{background:var(--ink);color:var(--on-ink)}
.ink-deep{background:var(--ink-deep);color:var(--on-ink)}
/* Recouvrement : la bande suivante glisse par-dessus la précédente.
Bord franc + filet braise. C'est ce qui évite l'effet « blocs empilés ». */
.overlap{position:relative;z-index:2;margin-top:-1px}
/* Le raccord n'est plus un trait franc : la bande entrante s'ouvre sur une
nuance voisine et se stabilise en descendant. C'est ce qui donne le
passage bleu → blanc plutôt qu'un empilement de blocs. */
.overlap::before{
content:"";position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--azur) 24%,var(--azur) 76%,transparent);opacity:.45;
}
.paper.overlap{background:linear-gradient(to bottom,var(--paper-2) 0,var(--paper) clamp(140px,20vh,280px))}
.ink.overlap{background:linear-gradient(to bottom,var(--ink-2) 0,var(--ink) clamp(160px,24vh,320px))}
.ink-deep.overlap{background:linear-gradient(to bottom,var(--ink) 0,var(--ink-deep) clamp(160px,26vh,340px))}
/* Un cran plus bas sur l'echelle claire. La page descend maintenant de
--paper vers --paper-2 avant de basculer sur le navy, au lieu de tenir
deux idees differentes sur un seul aplat. */
.ink.deep{background:var(--ink-deep)}
.ink.deep.overlap{background:linear-gradient(to bottom,var(--ink) 0,var(--ink-deep) clamp(160px,26vh,340px))}
.paper.deep{background:var(--paper-2)}
.paper.deep.overlap{background:linear-gradient(to bottom,var(--paper-3) 0,var(--paper-2) clamp(140px,20vh,280px))}
.grain{position:relative}
.grain::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode:overlay;
}
/* ---------- 5. COMPOSANTS ------------------------------------------------ */
/* Un seul système de boutons. Deux niveaux. Nuance selon l'audience. */
.btn{
--bg:var(--azur);--fg:#fff;--bd:var(--azur);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
min-height:52px;padding:.9rem 1.6rem;
background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);border-radius:2px;
font-weight:700;font-size:.95rem;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
overflow:hidden;isolation:isolate;
transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* Micro-interaction « tampon de pointeuse » : un voile qui s'abat depuis le bas. */
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
transform:translateY(101%);transition:transform .34s var(--ease-out);
}
.btn:hover,.btn:focus-visible{--fg:#fff}
.btn{transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), color .18s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(31,111,235,.3)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.is-stamped{animation:stamp .32s var(--ease-out)}
@keyframes stamp{0%{transform:scale(1)}38%{transform:scale(.94)}100%{transform:scale(1)}}
.btn .arrow{transition:transform .34s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-ghost{--bg:transparent;--fg:var(--on-ink);--bd:var(--edge-ink)}
.btn-ghost::before{background:var(--on-ink)}
.btn-ghost:hover{--fg:var(--ink);--bd:var(--on-ink);box-shadow:none}
.paper .btn-ghost{--fg:var(--on-paper);--bd:var(--edge-paper)}
/* La barre de navigation est fixe : elle n'hérite pas de la bande qu'elle survole.
Sans cette règle, le bouton fantôme reste crème sur crème, donc invisible. */
.nav.on-paper .btn-ghost{--fg:var(--on-paper);--bd:var(--edge-paper)}
.nav.on-paper .btn-ghost::before{background:var(--on-paper)}
.nav.on-paper .btn-ghost:hover{--fg:var(--paper);--bd:var(--on-paper)}
.paper .btn-ghost::before{background:var(--on-paper)}
.paper .btn-ghost:hover{--fg:var(--paper)}
/* Déclinaison travailleur : vert sourd. La distinction reste subtile. */
.btn-worker{--bg:var(--teal);--bd:var(--teal);--fg:#fff}
.btn-worker:hover{box-shadow:0 12px 30px rgba(14,124,134,.32)}
.tag{
display:inline-flex;align-items:center;gap:.5rem;
padding:.34rem .7rem;border:1px solid currentColor;border-radius:2px;
font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.tag-teal{color:var(--teal-soft)}
.paper .tag-teal{color:var(--teal)}
.rule{height:1px;background:var(--line-ink);border:0;margin:0}
.paper .rule{background:var(--line-paper)}
/* Cadre photo commun — un seul traitement d'image sur tout le site. */
.shot{position:relative;overflow:hidden;background:var(--ink-2)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot figcaption{
position:absolute;left:0;bottom:0;padding:.5rem .7rem;
/* Fond opaque plutôt qu'un flou d'arrière-plan : sur une photo sombre le
rendu est identique, et un flou se recalcule à chaque image de défilement. */
background:rgba(7,23,48,.84);
font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--on-ink-muted);
}
/* ---------- NAVIGATION --------------------------------------------------- */
.nav{
position:fixed;inset:0 0 auto 0;z-index:90;
display:flex;align-items:center;gap:1rem;
padding:.9rem var(--gut);
transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
border-bottom:1px solid transparent;
}
.nav.is-stuck{
background:rgba(12,33,67,.92);backdrop-filter:blur(9px);
border-bottom-color:var(--line-ink);padding-block:.62rem;
}
.nav.on-paper.is-stuck{background:rgba(245,248,252,.9);border-bottom-color:var(--line-paper);color:var(--on-paper)}
.nav-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:0 0 auto}
.logo{
display:block;width:clamp(88px,11vw,116px);aspect-ratio:765/147;
background:currentColor;
-webkit-mask:url("assets/logos/flexho-wordmark.svg") no-repeat center/contain;
mask:url("assets/logos/flexho-wordmark.svg") no-repeat center/contain;
}
.nav-clock{
font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
padding:.2rem .45rem;border:1px solid currentColor;opacity:.5;
font-variant-numeric:tabular-nums;
}
@media (min-width:1080px){ .nav-clock{display:none} }
.nav-links{display:none;margin-left:auto;align-items:center;gap:1.9rem}
@media (min-width:900px){ .nav-links{display:flex} }
.nav-links a{
position:relative;text-decoration:none;font-size:.92rem;font-weight:600;
padding-block:.3rem;opacity:.82;transition:opacity var(--dur) var(--ease);
}
.nav-links a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--azur);
transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease-out);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{margin-left:auto;display:flex;gap:.5rem}
@media (min-width:900px){ .nav-cta{margin-left:1.6rem} }
.nav-cta .btn{min-height:44px;padding:.55rem .95rem;font-size:.85rem;white-space:nowrap;text-transform:capitalize}
.only-lg{display:none}
@media (min-width:560px){ .only-lg{display:inline} .nav-cta .btn{text-transform:none} }
.nav-cta .btn.hide-sm{display:none}
@media (min-width:620px){ .nav-cta .btn.hide-sm{display:inline-flex} }
/* Menu mobile */
.burger{
margin-left:.4rem;width:44px;height:44px;flex:0 0 auto;
display:flex;flex-direction:column;align-items:center;justify-content:center;
background:none;border:1px solid var(--edge-ink);border-radius:2px;cursor:pointer;
}
.nav.on-paper .burger{border-color:var(--edge-paper)}
@media (min-width:900px){ .burger{display:none} }
html:not(.js) .burger,html:not(.js) .drawer{display:none}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;transition:transform .3s var(--ease-out),opacity .2s}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{
position:fixed;inset:0;z-index:80;background:var(--ink-deep);
display:flex;flex-direction:column;justify-content:center;gap:.4rem;
padding:6rem var(--gut) 3rem;
clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-out);
visibility:hidden;
}
.drawer.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.drawer a{
display:flex;align-items:baseline;gap:1rem;text-decoration:none;
font-size:clamp(2rem,9vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;
border-bottom:1px solid var(--line-ink);padding-block:.7rem;
opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease-out);
}
.drawer.is-open a{opacity:1;transform:none}
.drawer.is-open a:nth-child(1){transition-delay:.08s}
.drawer.is-open a:nth-child(2){transition-delay:.14s}
.drawer.is-open a:nth-child(3){transition-delay:.2s}
.drawer.is-open a:nth-child(4){transition-delay:.26s}
.drawer.is-open a:nth-child(5){transition-delay:.32s}
.drawer a i{font-family:var(--mono);font-size:.7rem;font-style:normal;color:var(--azur-soft);letter-spacing:.1em}
/* ---------- 6. LE RAIL (élément signature) ------------------------------- */
/* Une pointeuse : l'heure d'un service qui avance pendant qu'on descend.
Chaque section porte data-time + data-stamp. */
.rail{display:none}
@media (min-width:1080px){
.rail{
display:block;position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;
pointer-events:none;
}
.rail-line{
position:absolute;left:43px;top:0;bottom:0;width:1px;
background:var(--line-ink);transition:background .5s var(--ease);
}
.rail-fill{
position:absolute;left:43px;top:0;width:1px;height:100%;background:var(--azur);
transform-origin:top;transform:scaleY(0);
}
.rail-body{
position:absolute;left:0;top:50%;width:var(--rail);transform:translateY(-50%);
display:flex;flex-direction:column;align-items:center;gap:.55rem;
}
.rail-time{
font-family:var(--mono);font-size:1.02rem;font-weight:500;letter-spacing:.02em;
font-variant-numeric:tabular-nums;color:var(--on-ink);
background:var(--ink);padding:.35rem 0;width:100%;text-align:center;
transition:color .4s var(--ease),background .5s var(--ease);
}
.rail-dot{width:7px;height:7px;background:var(--azur);border-radius:50%}
.rail-stamp{
font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--on-ink-faint);writing-mode:vertical-rl;text-orientation:mixed;
max-height:12rem;overflow:hidden;transition:color .4s var(--ease);
}
.rail-flip{display:inline-block;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.rail.is-flipping .rail-flip{opacity:0;transform:translateY(-6px)}
/* Le rail s'inverse quand la bande derrière lui est en papier. */
.rail.on-paper .rail-line{background:var(--line-paper)}
.rail.on-paper .rail-time{color:var(--on-paper);background:var(--paper)}
.rail.on-paper .rail-stamp{color:rgba(20,52,92,.4)}
}
/* ---------- 7. SECTIONS -------------------------------------------------- */
/* — HERO ------------------------------------------------------------------ */
.hero{
position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
padding:8rem 0 clamp(1.6rem,4vh,3rem);overflow:hidden;isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-media::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(to top, var(--ink) 1%, rgba(12,33,67,.9) 22%, rgba(12,33,67,.4) 52%, rgba(12,33,67,.18) 76%, rgba(12,33,67,.55) 100%),
radial-gradient(ellipse 130% 95% at 26% 62%, rgba(12,33,67,0) 34%, rgba(7,23,48,.55) 100%);
}
.hero-inner{position:relative;display:grid;gap:clamp(1.5rem,4vh,2.6rem);text-shadow:var(--tshadow)}
.hero-inner .btn,.hero-inner .door{text-shadow:none}
.hero h1{max-width:13ch}
.hero .lede{color:rgba(245,248,252,.8);max-width:52ch}
/* Les deux portes — l'aiguillage annoncé dès le hero. */
.doors{display:grid;gap:.6rem;grid-template-columns:1fr}
@media (min-width:720px){ .doors{grid-template-columns:1fr 1fr;gap:.9rem;max-width:720px} }
.door{
position:relative;display:flex;flex-direction:column;gap:.35rem;
padding:1.1rem 1.2rem;text-decoration:none;
border:1px solid var(--edge-ink);background:rgba(7,23,48,.42);backdrop-filter:blur(10px);
overflow:hidden;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease-out);
}
.door::after{
content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--azur);
transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);
}
.door.is-worker::after{background:var(--teal-soft)}
.door:hover{transform:translateY(-3px);border-color:rgba(245,248,252,.4)}
.door:hover::after{transform:scaleX(1)}
.door b{font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.door span{font-size:.9rem;color:var(--on-ink-muted);max-width:32ch}
.door i{position:absolute;right:1.1rem;top:1.15rem;font-style:normal;color:var(--azur-soft);transition:transform .4s var(--ease-out)}
.door.is-worker i{color:var(--teal-soft)}
.door:hover i{transform:translate(3px,-3px)}
.scroll-cue{
display:none;align-items:center;gap:.55rem;color:var(--on-ink-faint);
font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
}
@media (min-height:700px){ .scroll-cue{display:flex} }
.scroll-cue s{display:block;width:34px;height:1px;background:currentColor;text-decoration:none;overflow:hidden;position:relative}
.scroll-cue s::after{content:"";position:absolute;inset:0;background:var(--azur);animation:cue 2.6s var(--ease) infinite -1s}
@keyframes cue{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
/* — MUR DE LOGOS ---------------------------------------------------------- */
.logos{padding-block:clamp(2.6rem,6vh,4.2rem);overflow:hidden}
/* Seule section du site à ouvrir sur une bande pleine largeur et symétrique.
Un titre calé à gauche, avec le texte poussé à droite, se battait contre
elle. Le bloc est donc centré — et centré sur l'écran, pas sur la colonne
de texte : le rail horaire décale `.wrap` de 86 px à gauche sur ordinateur,
ce qui aurait désaxé le titre par rapport aux logos juste en dessous.
Les largeurs maximales sont posées sur le titre et le paragraphe eux-mêmes,
jamais sur le conteneur : une mesure en `ch` se calcule dans la police de
l'élément qui la porte, et le titre n'a pas la même que le texte courant. */
.logos-head{
display:grid;justify-items:center;text-align:center;gap:.85rem;
width:100%;max-width:min(780px,100%);
margin:0 auto clamp(1.8rem,4.5vh,3rem);padding-inline:var(--gut);
}
/* Pas de plafond de largeur sur le titre : il doit tenir sur une seule ligne
sur ordinateur. C'est la largeur du bloc qui le contient, et lui seul, qui
décide du retour à la ligne — donc sur mobile uniquement. */
.logos-head h2{max-width:none;text-wrap:pretty}
.logos-head p{font-size:1rem;color:var(--on-paper-muted);max-width:56ch;margin:0}
.marquee{position:relative;display:flex;flex-direction:column;gap:.7rem;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mq-row{display:flex;width:max-content;will-change:transform}
.mq-set{display:flex;align-items:stretch;flex:0 0 auto}
.mq-item{
flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:.55rem;
width:clamp(168px,20vw,228px);min-height:clamp(96px,11vw,124px);padding:1rem 1.2rem;
border-left:1px solid var(--line-paper);text-decoration:none;
}
.mq-item img{
/* Boîte identique pour tous : c'est ce qui met sur un pied d'égalité un
logo carré et une bannière très large. */
height:clamp(30px,3.6vw,42px);width:100%;max-width:clamp(112px,13vw,150px);
margin:0 auto;object-fit:contain;
mix-blend-mode:multiply;filter:grayscale(1) contrast(1.08) brightness(.96);opacity:.75;
transition:filter .45s var(--ease),opacity .45s var(--ease),transform .45s var(--ease-out);
}
.mq-item:hover img{filter:none;opacity:1;transform:scale(1.05)}
.mq-item em{
font-family:var(--mono);font-style:normal;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--on-paper-muted);text-align:center;
}
/* — LE RUSH (scène typographique collante) -------------------------------- */
.rush{position:relative}
.rush-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.rush-shot{position:absolute;inset:0;z-index:0;opacity:.22}
.rush-shot img{width:100%;height:100%;object-fit:cover}
.rush-stage::after{
content:"";position:absolute;inset:0;z-index:1;
background:radial-gradient(ellipse 96% 76% at 46% 50%, rgba(7,23,48,.62) 0%, rgba(7,23,48,.86) 58%, rgba(7,23,48,.97) 100%);
}
.rush-lines{position:relative;z-index:2;width:100%;max-width:var(--maxw);padding-inline:var(--gut);margin-inline:auto}
@media (min-width:1080px){ .rush-lines{padding-left:calc(var(--gut) + var(--rail))} }
/* l'ombre est déjà portée plus bas, avec le scrim de la scène */
.rush-line{
display:block;font-weight:800;letter-spacing:-.04em;line-height:.95;
font-size:clamp(1.85rem,5.5vw,4.3rem);font-variation-settings:'wdth' 106;
padding-block:.1em;text-wrap:nowrap;
transition:opacity .55s var(--ease),color .55s var(--ease);
text-shadow:0 1px 2px rgba(4,12,28,.9),0 6px 30px rgba(4,12,28,.7);
}
@media (max-width:640px){ .rush-line{text-wrap:balance} }
.js .rush-line{opacity:.13}
.rush-line.is-on{opacity:1}
/* Toute la scène est en blanc. Seuls les deux pics de la soirée — le deuxième
serveur injoignable, et le moment où le gérant prend le plateau lui-même —
passent dans le bleu du bouton d'en-tête. */
.rush-line.is-on.hot{color:var(--azur)}
.rush-line time{
font-family:var(--mono);font-size:.42em;font-weight:500;letter-spacing:.06em;
color:inherit;opacity:.72;margin-right:.7em;vertical-align:.28em;font-variant-numeric:tabular-nums;
}
/* L'heure suit la teinte de sa ligne, en léger retrait : c'est un repère, pas
la phrase. Exception sur les lignes bleues : le mono tombe à ~12 px sur
téléphone, taille à laquelle le bleu du bouton passe sous le seuil de
contraste. On l'éclaircit sans quitter la même famille de bleu. */
.rush-line.is-on.hot time{color:var(--azur-soft);opacity:1}
.rush-track{height:340vh}
/* — L'AIGUILLAGE (deux portes, à parts égales) ---------------------------- */
.split{display:grid;grid-template-columns:1fr;gap:2px;background:var(--line-ink)}
@media (min-width:860px){ .split{grid-template-columns:1fr 1fr} }
.half{
position:relative;display:flex;flex-direction:column;justify-content:flex-end;
min-height:66svh;padding:clamp(1.6rem,4vw,3rem);text-decoration:none;overflow:hidden;isolation:isolate;
transition:flex-grow .7s var(--ease-out);
}
@media (min-width:860px){ .half{min-height:88svh} }
.half-media{position:absolute;inset:0;z-index:-2;transform:scale(1.06);transition:transform 1.1s var(--ease-out)}
.half-media img{width:100%;height:100%;object-fit:cover}
.half::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(to top, rgba(7,23,48,.94) 6%, rgba(7,23,48,.66) 44%, rgba(7,23,48,.3) 100%);
transition:background .6s var(--ease);
}
.half.is-biz::before{background:linear-gradient(to top, rgba(9,26,58,.95) 6%, rgba(16,52,110,.6) 46%, rgba(31,111,235,.2) 100%)}
.half.is-worker::before{background:linear-gradient(to top, rgba(6,30,40,.95) 6%, rgba(10,52,66,.6) 46%, rgba(14,124,134,.22) 100%)}
.half:hover .half-media{transform:scale(1)}
.half-body{position:relative;display:grid;gap:.9rem;max-width:38ch;text-shadow:var(--tshadow)}
.half-go{
display:inline-flex;align-items:center;gap:.7rem;font-weight:700;font-size:.95rem;
color:var(--azur-soft);
}
.half.is-worker .half-go{color:var(--teal-soft)}
.half-go s{display:block;width:2rem;height:1.5px;background:currentColor;text-decoration:none;transition:width .4s var(--ease-out)}
.half:hover .half-go s{width:3.4rem}
.half-num{
position:absolute;top:clamp(1.2rem,3vw,2rem);left:clamp(1.6rem,4vw,3rem);
font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:rgba(245,248,252,.5);
}
/* — ÉTAPES (index collant + pile d'images) -------------------------------- */
.steps{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:960px){ .steps{grid-template-columns:1fr 1fr;align-items:start} }
.steps-media{position:sticky;top:72px;z-index:1;aspect-ratio:3/2;order:-1;margin-bottom:.6rem}
@media (min-width:960px){ .steps-media{top:12vh;order:0;aspect-ratio:3/4;margin-bottom:0} }
.steps-media .shot{position:absolute;inset:0;transition:opacity .7s var(--ease)}
.js .steps-media .shot{opacity:0}
.steps-media .shot.is-on{opacity:1}
.steps-media .shot img{transform:scale(1.04);transition:transform 1.4s var(--ease-out)}
.steps-media .shot.is-on img{transform:scale(1)}
.step{
padding-block:clamp(1.4rem,4vh,2.4rem);border-top:1px solid var(--line-paper);
display:grid;gap:.6rem;transition:opacity .5s var(--ease);
}
.step:first-of-type{border-top:0}
.step p.step-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--azur-deep);margin:0}
.step h3{font-size:clamp(1.35rem,2.8vw,1.9rem)}
.step p{color:var(--on-paper-muted);font-size:1rem}
.step.is-dim{opacity:.42}
/* — FAITS (grille asymétrique, chiffres mono) ----------------------------- */
/* Quatre promesses, pas un tableau de chiffres. En bandeau de quatre cellules
egales, ca se lisait comme une ligne de statistiques qu'on saute. En lignes
pleine largeur, chaque promesse a son souffle : la valeur en gros a gauche,
la phrase a cote. Le balisage ne change pas, seule la mise en page. */
.facts{display:grid;gap:0;border-top:1px solid var(--line-ink)}
.fact{
border-bottom:1px solid var(--line-ink);
display:grid;gap:.5rem;align-content:start;
padding:clamp(1.5rem,4vh,2.4rem) 0;
}
@media (min-width:760px){
.fact{
/* 13rem : « En heures » tient sur une ligne a la plus grande taille. */
grid-template-columns:minmax(0,13rem) minmax(0,1fr);
gap:clamp(1.6rem,4vw,2.8rem);align-items:baseline;
}
}
.fact b{
font-family:var(--mono);font-size:clamp(2rem,5.4vw,3.2rem);font-weight:500;
letter-spacing:-.03em;color:var(--azur-soft);line-height:.98;font-variant-numeric:tabular-nums;
}
.fact>span{font-size:1.02rem;line-height:1.55;color:var(--on-ink-muted);max-width:46ch}
.fact.is-teal b{color:var(--teal-soft)}
.paper .facts{border-top-color:var(--line-paper)}
.paper .fact{border-bottom-color:var(--line-paper)}
.paper .fact b{color:var(--azur-deep)}
.paper .fact>span{color:var(--on-paper-muted)}
.paper .fact.is-teal b{color:var(--teal)}
/* — SECTION APPLICATION (la pièce maîtresse) ------------------------------
Les écrans défilent tout seuls, toutes les 4,4 s. Plus de piste de scroll :
le rush, plus haut dans la page, tient déjà ce rôle-là, et le répéter
donnait l'impression de refaire deux fois le même geste.
Le téléphone, lui, garde son entrée : il monte et se redresse quand la
section arrive à l'écran. -------------------------------------------------- */
.app{position:relative;background:var(--ink-deep);overflow:clip}
.app-stage{
display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vh,2.6rem);
padding:var(--band-y) var(--gut);position:relative;
}
@media (min-width:860px){
.app-stage{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem);
padding-left:calc(var(--gut) + var(--rail));max-width:var(--maxw);margin-inline:auto;
}
}
.app-glow{
position:absolute;left:50%;top:50%;width:min(760px,110vw);aspect-ratio:1;
transform:translate(-50%,-50%);pointer-events:none;
background:radial-gradient(circle, rgba(31,111,235,.24) 0%, rgba(31,111,235,0) 62%);
}
.js [data-reveal="glow"]{opacity:0;transition:opacity 1.5s var(--ease) .25s}
[data-reveal="glow"].in{opacity:.9}
/* Le téléphone : cadre en CSS pur, écran = simple ![]()
remplaçable. */
.phone-wrap{display:grid;place-items:center;perspective:1400px}
.phone{width:min(206px,46vw)}
@media (min-width:560px){ .phone{width:min(238px,34vw)} }
@media (min-width:860px){ .phone{width:min(292px,26vw)} }
/* L'entrée : il monte, grandit et se redresse. Une seule fois, à l'arrivée. */
.js [data-reveal="phone"]{
opacity:0;transform:translate3d(0,11vh,0) scale(.86) rotateX(13deg);
transition:opacity .75s var(--ease),transform 1.15s var(--ease-out);
}
[data-reveal="phone"].in{opacity:1;transform:none}
.phone-body{
position:relative;aspect-ratio:1320/2868;border-radius:13.5%/6.4%;
padding:2.6%;background:linear-gradient(150deg,#3B4463 0%,#0E1730 34%,#232C46 62%,#0B1226 100%);
box-shadow:0 2px 0 rgba(255,255,255,.14) inset, 0 44px 90px rgba(0,0,0,.62),
0 0 0 1px rgba(255,255,255,.07), 0 0 90px 8px rgba(31,111,235,.18);
}
.phone-body::before,.phone-body::after{
content:"";position:absolute;left:-2px;width:2px;border-radius:2px;
background:linear-gradient(#4A5474,#1A2340);
}
.phone-body::before{top:19%;height:9%}
.phone-body::after{top:31%;height:14%}
.phone-screen{
position:relative;height:100%;border-radius:11%/5.2%;overflow:hidden;background:var(--paper);
}
.phone-screen img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:translate3d(0,2.2%,0) scale(1.02);
transition:opacity .55s var(--ease),transform .8s var(--ease-out);
}
.js .phone-screen img{opacity:0}
.phone-screen img.is-on{opacity:1;transform:none}
/* L'encoche : mesurée sur un vrai iPhone. Elle descend d'environ 1 % de la
hauteur du boîtier par rapport au haut de l'écran, elle n'y est pas collée. */
.phone-island{
position:absolute;left:50%;top:2.45%;transform:translateX(-50%);
width:30.15%;height:4.24%;background:#04070F;border-radius:99px;z-index:3;
}
.phone-glare{
position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:11%/5.2%;
background:linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%);
}
/* Le texte : les diapos se croisent au même endroit, la barre vit dessous. */
.app-copy{position:relative;display:grid;gap:1.5rem;align-content:start}
@media (min-width:860px){ .app-copy{align-content:center} }
.app-slides{position:relative;display:grid;min-height:11.5rem}
@media (min-width:860px){ .app-slides{min-height:13rem} }
.app-slide{
grid-area:1/1;display:grid;gap:.7rem;align-content:center;
transform:translate3d(0,16px,0);pointer-events:none;
transition:opacity .5s var(--ease),transform .6s var(--ease-out);
}
.js .app-slide{opacity:0}
.app-slide.is-on{opacity:1;transform:none;pointer-events:auto}
.app-slide h3{font-size:clamp(1.4rem,3.4vw,2.2rem)}
.app-slide p{color:var(--on-ink-muted);font-size:1rem;max-width:40ch}
/* La barre : un compteur, cinq repères cliquables, un bouton de pause.
Le repère actif se remplit sur la durée de la diapo : on voit le temps
qui reste au lieu de le subir. */
.app-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.app-counter{
font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
color:var(--on-ink-faint);margin:0;font-variant-numeric:tabular-nums;
}
.app-counter b{color:var(--azur-soft);font-weight:500}
.app-bars{display:flex;gap:6px;flex:1;min-width:120px;max-width:190px}
.app-bar{
flex:1;height:34px;padding:0;background:none;border:0;cursor:pointer;position:relative;
}
.app-bar::before{
content:"";position:absolute;left:0;right:0;top:50%;margin-top:-1px;height:2px;
background:var(--line-ink);transition:background .3s var(--ease);
}
.app-bar:hover::before{background:var(--edge-ink)}
.app-bar i{
position:absolute;left:0;right:0;top:50%;margin-top:-1px;height:2px;display:block;
background:var(--azur-soft);transform:scaleX(0);transform-origin:left;
}
.app-bar.is-done i{transform:scaleX(1)}
.app-bar.is-active i{animation:barFill var(--slide-dur,4400ms) linear forwards}
.app-bar.is-active.is-held i{animation-play-state:paused}
@keyframes barFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.app-toggle{
font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--on-ink-muted);background:none;border:1px solid var(--edge-ink);border-radius:2px;
padding:.45rem .7rem;min-height:34px;cursor:pointer;
transition:color .3s var(--ease),border-color .3s var(--ease);
}
.app-toggle:hover{color:var(--on-ink);border-color:var(--on-ink)}
@media (pointer:coarse){ .app-bar{height:44px} .app-toggle{min-height:44px} }
.app-lead{position:relative;display:grid;gap:.7rem}
@media (min-width:860px){ .app-lead{grid-column:1/-1;text-align:center;justify-items:center;margin-bottom:1rem} }
.app-stores{display:flex;flex-wrap:wrap;gap:.6rem}
/* — PREUVE ---------------------------------------------------------------- */
/* Les temoignages : un seul a la fois, centre, comme sur l'ancien site.
Sans JavaScript ou en mouvement reduit, les trois restent empiles et lisibles :
le carrousel est un confort, jamais une condition pour lire. */
/* =========================================================================
LES TÉMOIGNAGES — un jeu de cartes
-------------------------------------------------------------------------
La carte du dessus se lit ; les deux autres dépassent derrière, réduites et
décalées, comme un paquet de tickets de shift. On la fait glisser au doigt
ou à la souris.
Une seule formule place les trois cartes. `--d` est la profondeur dans le
paquet — 0 devant, 1 puis 2 derrière — et le script l'écrit. Pendant qu'on
tire la carte du dessus, `--d` descend par fractions sur celles de derrière :
elles remontent vers l'avant au rythme du doigt, au lieu d'attendre le
lâcher. C'est ce qui fait que le paquet répond.
Rien ne bouge tout seul. La page a déjà deux défilés automatiques, et un
témoignage se lit à son rythme ; aucun bouton pause n'est donc nécessaire.
========================================================================= */
.deck{display:grid;gap:clamp(1.5rem,3.4vh,2.5rem);justify-items:center}
.deck-stage{display:grid;width:min(46rem,100%)}
.tcard{
display:grid;grid-template-rows:auto 1fr auto;gap:clamp(1rem,2.2vw,1.5rem);
position:relative;overflow:hidden;
padding:clamp(1.8rem,4vw,3.1rem);
background:var(--card);border:1px solid var(--line-paper);
box-shadow:0 1px 2px rgba(20,52,92,.05), 0 18px 46px rgba(20,52,92,.10);
}
/* Le filet azur traverse le haut de la carte quand elle arrive devant. */
.tcard::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--azur);
transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease-out);
}
.tmark{
font-family:var(--sans);font-size:3.6rem;font-weight:800;line-height:.62;
color:var(--azur);opacity:.28;
}
.tmark::before{content:"\201C"}
.tcard blockquote{
font-size:clamp(1.14rem,2.2vw,1.5rem);line-height:1.52;letter-spacing:-.015em;
max-width:38ch;align-self:start;
}
.tcard figcaption{display:grid;gap:.28rem;align-self:end}
.tcard figcaption b{font-size:1.04rem;font-weight:700;color:var(--on-paper)}
.tcard figcaption span{
font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--on-paper-muted);
}
/* --- le paquet, uniquement si le script tourne -------------------------- */
.js .deck-stage{position:relative;cursor:grab;touch-action:pan-y}
.js .deck-stage.is-drag{cursor:grabbing}
.js .tcard{
grid-area:1/1;--d:0;
transform:translate3d(var(--dx,0px), calc(var(--d) * 18px), 0)
scale(calc(1 - var(--d) * .055)) rotate(var(--rot,0deg));
opacity:calc(1 - var(--d) * .30);
transition:transform .6s var(--ease-out), opacity .45s var(--ease);
}
.js .tcard.is-front::before{transform:none}
.js .tcard.no-anim{transition:none}
/* La carte qu'on chasse part sur le côté et sort du cadre. */
.js .tcard.is-out{
transform:translate3d(var(--out,-125%), 10px, 0) rotate(var(--outrot,-7deg));
opacity:0;
}
/* --- la donne : les cartes tombent l'une après l'autre a l arrivee -------
L'etat de depart est pose sur « pas encore apparu » plutot que sur
« apparu ». Ecrit dans l'autre sens, cette regle redeclarait la position de
chaque carte avec un selecteur plus lourd que celui du depart : la carte
qu'on chasse ne partait jamais sur le cote, elle attendait sur place puis
sautait au fond du paquet. */
.js .deck[data-reveal]:not(.in) .tcard{opacity:0;transform:translate3d(0,48px,0) scale(.92)}
.js .deck[data-reveal].in .tcard{transition-delay:calc(var(--i) * 110ms)}
/* Une fois donnees, plus de retard : les glissements suivants sont immediats. */
.js .deck[data-reveal].in.dealt .tcard{transition-delay:0s}
/* --- la navigation ------------------------------------------------------ */
.deck-nav{display:none;align-items:center;gap:1.2rem}
.js .deck-nav{display:flex}
.d-arrow{
width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
background:none;border:1px solid var(--edge-paper);border-radius:2px;color:var(--on-paper);
transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.d-arrow svg{width:17px;height:17px}
.d-arrow:hover{background:var(--on-paper);border-color:var(--on-paper);color:var(--paper)}
.d-bars{display:flex;align-items:center;gap:.45rem}
/* La barre visible fait 3 px ; le retrait donne une cible tactile de 27 px
sans epaissir le trait. */
.d-bar{
width:22px;height:3px;padding:12px 0;box-sizing:content-box;background-clip:content-box;
border:0;cursor:pointer;border-radius:2px;background-color:var(--on-paper);opacity:.22;
transition:width .45s var(--ease-out),opacity .3s var(--ease),background-color .3s var(--ease);
}
.d-bar:hover{opacity:.45}
.d-bar.is-on{width:38px;opacity:1;background-color:var(--azur-deep)}
@media (prefers-reduced-motion:reduce){
/* Pas de paquet : les trois temoignages sont montres ensemble. */
.js .deck-stage{gap:1rem;cursor:auto}
.js .tcard,.js .deck[data-reveal].in .tcard{
grid-area:auto;transform:none;opacity:1;transition:none;
}
.js .tcard::before{transform:none}
.js .deck-nav{display:none}
}
.slot{
display:grid;gap:.7rem;padding:clamp(1.3rem,3vw,2rem);
border:1px dashed var(--edge-paper);background:rgba(20,52,92,.03);
}
.ink .slot{border-color:var(--line-ink);background:rgba(245,248,252,.03)}
.slot h4{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.slot p{font-size:.92rem;color:var(--on-paper-muted)}
.ink .slot p{color:var(--on-ink-muted)}
/* — HISTOIRE -------------------------------------------------------------- */
.story{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:960px){ .story{grid-template-columns:1.05fr .95fr;align-items:center} }
.story-media{position:relative;aspect-ratio:3/2}
.story-media .shot{height:100%}
.story-body{display:grid;gap:1.1rem}
.story-body p{color:var(--on-paper-muted)}
/* Cette mise en page n'avait jamais servi sur fond navy : la couleur du
paragraphe y etait celle des fonds clairs, illisible. Et comme le
surtitre est lui aussi un , la regle ci-dessus le rattrapait au
passage — d'ou le pendant de « .paper .kicker », qui manquait. */
.ink .story-body p{color:var(--on-ink-muted)}
.ink .kicker{color:var(--azur-soft)}
/* — CTA FINAL ------------------------------------------------------------- */
.close{position:relative;overflow:hidden}
.close-media{position:absolute;inset:0;z-index:-2;opacity:.3}
.close-media img{width:100%;height:100%;object-fit:cover}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--ink-deep) 0%,rgba(7,23,48,.72) 50%,var(--ink-deep) 100%)}
/* ---------- FORMULAIRES -------------------------------------------------- */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.42rem}
.field label{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-muted)}
.paper .field label{color:var(--on-paper-muted)}
.field .req{color:var(--azur-soft)}
.paper .field .req{color:var(--azur-deep)}
.field input,.field select,.field textarea{
width:100%;min-height:52px;padding:.85rem .95rem;
background:rgba(245,248,252,.05);border:1px solid var(--edge-ink);border-radius:2px;
color:var(--on-ink);font-size:1rem;
transition:border-color .3s var(--ease),background .3s var(--ease);
}
.paper .field input,.paper .field select,.paper .field textarea{
background:#fff;border-color:var(--edge-paper);color:var(--on-paper);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--azur);outline-offset:1px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--alert)}
.field .err{font-size:.82rem;color:var(--alert-soft);min-height:0}
.paper .field .err{color:var(--alert)}
.field .hint{font-size:.8rem;color:var(--on-paper-muted);opacity:.85}
.grid-2{display:grid;gap:1.1rem}
@media (min-width:640px){ .grid-2{grid-template-columns:1fr 1fr} }
.drop{
display:grid;gap:.4rem;place-items:center;text-align:center;
padding:1.5rem 1rem;border:1.5px dashed var(--edge-paper);border-radius:2px;background:#fff;
cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.drop:hover,.drop.is-over{border-color:var(--azur-deep);background:#F0F6FF}
.drop b{font-weight:700;font-size:.95rem}
.drop small{font-size:.78rem;color:var(--on-paper-muted)}
.drop .file{font-family:var(--mono);font-size:.72rem;color:var(--teal-deep)}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.consent{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.45}
.consent .err{flex:1 0 100%;margin:0}
.consent label{flex:1}
.form-error{color:var(--alert);font-size:.9rem}
.ink .form-error{color:var(--alert-soft)}
.consent input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin-top:.15rem;accent-color:var(--azur-deep)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form-done{
display:none;gap:.7rem;padding:1.4rem;border:1px solid var(--teal);background:rgba(14,124,134,.07);
}
.form-done.is-on{display:grid}
.form-done b{font-size:1.1rem;font-weight:800}
/* ---------- FAQ ---------------------------------------------------------- */
.faq{display:grid}
.faq details{border-top:1px solid var(--line-paper)}
.ink .faq details{border-top-color:var(--line-ink)}
.faq details:last-of-type{border-bottom:1px solid var(--line-paper)}
.ink .faq details:last-of-type{border-bottom-color:var(--line-ink)}
.faq summary{
display:flex;align-items:flex-start;gap:1rem;cursor:pointer;list-style:none;
padding:1.15rem 0;font-weight:700;font-size:clamp(1rem,1.9vw,1.15rem);letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"+";margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-weight:400;font-size:1.2rem;
color:var(--azur-deep);transition:transform .35s var(--ease-out);
}
.ink .faq summary::after{color:var(--azur-soft)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0;max-width:70ch}
.faq .ans>*:last-child{padding-bottom:1.3rem}
.faq .ans p{color:var(--on-paper-muted);font-size:.98rem}
.ink .faq .ans p{color:var(--on-ink-muted)}
.faq .ans p+p{margin-top:.7rem}
/* ---------- PIED DE PAGE ------------------------------------------------- */
.foot{background:var(--ink-deep);padding-block:clamp(3rem,7vh,5rem) 1.5rem;border-top:1px solid var(--line-ink)}
.foot-top{display:grid;gap:2.2rem}
@media (min-width:800px){ .foot-top{grid-template-columns:1.4fr 1fr 1fr} }
.foot-brand .logo{width:132px}
.foot h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-faint);font-weight:500;margin-bottom:.9rem}
.foot li+li{margin-top:.5rem}
.foot a{text-decoration:none;font-size:.95rem;color:var(--on-ink-muted);transition:color .3s var(--ease)}
.foot a:hover{color:var(--azur-soft)}
.foot-legal{
margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--line-ink);
display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-faint);
}
.foot-legal a{font-size:inherit;font-family:inherit;letter-spacing:inherit}
/* ---------- EN-TÊTE DE PAGE (parcours audience) -------------------------- */
.phero{position:relative;min-height:78svh;display:flex;align-items:flex-end;padding:9rem 0 clamp(2rem,6vh,4rem);overflow:hidden;isolation:isolate}
.phero-media{position:absolute;inset:0;z-index:-2}
.phero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.phero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 3%,rgba(12,33,67,.88) 30%,rgba(12,33,67,.42) 100%)}
.phero-inner{display:grid;gap:1.3rem;text-shadow:var(--tshadow)}
.phero-inner .btn{text-shadow:none}
.phero h1{max-width:17ch}
.crumb{display:flex;gap:.6rem;align-items:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-faint)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--azur-soft)}
.two-col{display:grid;gap:clamp(1.8rem,5vw,4rem)}
@media (min-width:960px){ .two-col{grid-template-columns:.85fr 1.15fr;align-items:start} }
.sticky-head{display:grid;gap:1rem;align-content:start}
@media (min-width:960px){ .sticky-head{position:sticky;top:14vh} }
.list-num{display:grid;gap:0}
.list-num li{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.2rem;padding-block:1.15rem;border-top:1px solid var(--line-paper)}
.ink .list-num li{border-top-color:var(--line-ink)}
.list-num li:last-child{border-bottom:1px solid var(--line-paper)}
.ink .list-num li:last-child{border-bottom-color:var(--line-ink)}
.list-num b{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.18em;color:var(--azur-deep);padding-top:.35rem}
.ink .list-num b{color:var(--azur-soft)}
.list-num h3{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.3rem}
.list-num p{font-size:.98rem;color:var(--on-paper-muted)}
.ink .list-num p{color:var(--on-ink-muted)}
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (min-width:760px){ .mosaic{grid-template-columns:repeat(4,1fr);gap:.9rem} }
.mosaic .shot{aspect-ratio:3/4}
.mosaic .shot:nth-child(1){grid-column:span 2;aspect-ratio:3/2}
@media (min-width:760px){ .mosaic .shot:nth-child(4){grid-row:span 2;aspect-ratio:3/5} }
/* ---------- BLOCS DE TÊTE & UTILITAIRES DE CONTENU ---------------------- */
.sec-head{display:grid;gap:1rem;max-width:100%;margin-bottom:clamp(2rem,5vh,3.4rem)}
/* La largeur se plafonne sur le TITRE, pas sur le conteneur. Une mesure en ch
se calcule dans la police de l'element qui la porte : posee sur le bloc, elle
utilisait celle du texte courant, bien plus etroite que celle du titre. Le
titre se retrouvait bride a moins de la moitie de la colonne, avec un grand
blanc a droite et des lignes inutilement nombreuses. */
.sec-head>h2,.sec-head>.h2,.sec-head>.h3{max-width:28ch}
.sec-head.narrow>h2,.sec-head.narrow>.h2,.sec-head.narrow>.h3{max-width:18ch}
.sec-head .lede,.sec-head>p:not(.kicker){max-width:52ch}
.foot-note{margin-top:clamp(1.6rem,4vh,2.4rem);font-size:.92rem;color:var(--on-paper-muted)}
.foot-note a{text-decoration:underline;text-underline-offset:3px}
.inline-link{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.inline-link:hover{color:var(--azur-deep)}
.ink .inline-link:hover,.ink-deep .inline-link:hover,.close .inline-link:hover{color:var(--azur-soft)}
.story-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.foot-line{margin-top:1.1rem;font-size:.95rem;color:var(--on-ink-muted);max-width:38ch}
.foot-mail{display:inline-block;margin-top:.9rem;font-size:1.05rem;font-weight:700;color:var(--on-ink)!important;text-decoration:underline;text-underline-offset:4px}
.foot-mail:hover{color:var(--azur-soft)!important}
.steps-list{display:grid}
.half-title{font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.035em;line-height:.95;font-variation-settings:'wdth' 112}
.half-text{color:rgba(245,248,252,.78);font-size:1rem;line-height:1.55}
/* ---------- PAGE LÉGALE -------------------------------------------------- */
.legal{padding-top:clamp(7rem,14vh,10rem)}
.legal .wrap{max-width:74ch}
.legal h1{margin-block:1.2rem .9rem}
.legal .h3{margin-top:clamp(2.2rem,5vh,3.2rem);margin-bottom:.7rem}
.legal p{color:var(--on-ink-muted);max-width:none}
.legal p.crumb{color:var(--on-ink-faint)}
.legal p.mono{color:var(--on-ink-faint)}
.legal p.lede{color:var(--on-ink-muted);font-size:var(--t-lede);max-width:46ch}
.legal p+p{margin-top:.8rem}
.legal a{color:var(--on-ink);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--azur-soft)}
.legal b{color:var(--on-ink)}
.legal em{color:var(--azur-soft);font-style:normal;font-family:var(--mono);font-size:.86em}
.legal-back{margin-top:clamp(2.4rem,6vh,3.6rem)}
/* ---------- 8. MOUVEMENT -------------------------------------------------
Un vocabulaire, pas une seule animation répétée quarante fois.
Cinq manières d'arriver, choisies par data-reveal="…", plus la composition
des titres mot à mot et le rouleau des chiffres.
Règles tenues partout, sans exception :
· on n'anime que transform et opacity (le voile d'image est un transform)
· rien ne dépasse 900 ms
· sans JavaScript tout est visible : les états cachés vivent sous .js
· une fois joué, les délais sont retirés pour ne pas traîner au survol
------------------------------------------------------------------------ */
/* — a. MONTÉE — le défaut. Un bloc de texte qui arrive du bas. ----------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,26px,0);
transition:opacity .82s var(--ease),transform .82s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
/* — b. TAMPON — pour ce qui se pose : badges, chiffres, cartes.
Léger dépassement, comme un tampon de pointeuse qui rebondit. ------ */
.js [data-reveal="stamp"]{opacity:0;transform:scale(.93);
transition:opacity .42s var(--ease),transform .58s cubic-bezier(.2,1.5,.4,1)}
[data-reveal="stamp"].in{opacity:1;transform:none}
/* — c. VOILE — pour les photos. Un rideau navy remonte et découvre
l'image, qui se remet à l'échelle en même temps. C'est le geste de
l'assiette qu'on pousse sur la passe. ------------------------------ */
.js [data-reveal="wipe"]{position:relative;overflow:hidden}
.js [data-reveal="wipe"]::after{
content:"";position:absolute;inset:0;z-index:3;background:var(--ink);
transform:translate3d(0,0,0);transition:transform .82s var(--ease-out);
}
[data-reveal="wipe"].in::after{transform:translate3d(0,-101%,0)}
.js [data-reveal="wipe"] img:not([data-par]){transform:scale(1.14);transition:transform 1.25s var(--ease-out)}
[data-reveal="wipe"].in img:not([data-par]){transform:none}
[data-reveal="wipe"].done::after{display:none}
/* — d. GLISSE — pour ce qui vient du bord : les deux moitiés de
l'aiguillage, les colonnes qui se répondent. ----------------------- */
.js [data-reveal^="slide"]{opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease-out)}
.js [data-reveal="slide-l"]{transform:translate3d(-5%,0,0)}
.js [data-reveal="slide-r"]{transform:translate3d(5%,0,0)}
[data-reveal^="slide"].in{opacity:1;transform:none}
/* — e. TRAIT — pour les filets et les soulignements qui se dessinent. --- */
.js [data-reveal="draw"]{transform:scaleX(0);transform-origin:left;
transition:transform .8s var(--ease-out)}
[data-reveal="draw"].in{transform:none}
/* — Groupes : les enfants arrivent en cascade. --------------------------- */
.js [data-reveal-group]>*{opacity:0;transform:translate3d(0,22px,0);
transition:opacity .7s var(--ease),transform .7s var(--ease-out)}
[data-reveal-group].in>*{opacity:1;transform:none}
[data-reveal-group].in>*{transition-delay:calc(var(--i,0) * var(--stagger,80ms))}
[data-reveal-group].done>*{transition-delay:0s!important}
/* Un titre composé mot à mot porte déjà son arrivée : le groupe ne la double pas. */
.js [data-reveal-group]>[data-split]{opacity:1;transform:none}
/* Une cascade plus serrée quand les éléments sont petits et nombreux. */
[data-reveal-group="tight"]{--stagger:52ms}
[data-reveal-group="wide"]{--stagger:110ms}
/* — TITRES : chaque mot monte derrière son propre cache.
C'est l'effet « ticket qui s'imprime », appliqué au texte. Le cache est
un simple overflow, la marge en em laisse passer les jambages des g,
des p et des y. ------------------------------------------------------ */
/* Garde-fou : les morceaux découpés héritent toujours de leur parent, pour
qu'aucune règle visant « span » ou « i » ailleurs dans la feuille ne vienne
les restyler par accident. */
.w,.c,.cw,.w>i,.c>i{font:inherit;color:inherit;letter-spacing:inherit;max-width:none;background:none}
/* Un mot roulé reste solidaire : il ne se coupe jamais entre deux lettres. */
.cw{display:inline-block;white-space:nowrap}
.w{display:inline-block;overflow:hidden;vertical-align:top;
padding-bottom:.16em;margin-bottom:-.16em}
.js .w>i{
display:inline-block;font-style:inherit;
transform:translate3d(0,112%,0);
transition:transform .78s var(--ease-out);
transition-delay:calc(var(--i,0) * 45ms);
}
.in .w>i{transform:none}
.done .w>i{transition-delay:0s}
/* — CHIFFRES : chaque caractère roule, comme un afficheur de pointeuse. -- */
.c{display:inline-block;overflow:hidden;vertical-align:top;
padding-bottom:.12em;margin-bottom:-.12em}
.js .c>i{
display:inline-block;font-style:inherit;
transform:translate3d(0,105%,0);
transition:transform .62s cubic-bezier(.2,.9,.25,1);
transition-delay:calc(var(--i,0) * 60ms);
}
.in .c>i{transform:none}
.done .c>i{transition-delay:0s}
/* — Parallaxe discrète : seulement sur les médias, jamais sur le texte lu. */
[data-par]{will-change:transform}
/* — Un élément vivant par section, au niveau chuchotement. --------------- */
.pulse{position:relative}
.pulse::after{
content:"";position:absolute;inset:-30%;border-radius:50%;pointer-events:none;
box-shadow:0 0 60px 20px rgba(31,111,235,.32);opacity:0;
}
.vis .pulse::after{animation:breathe 6.5s var(--ease) infinite -2.2s}
@keyframes breathe{0%,100%{opacity:.16}50%{opacity:.42}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
/* — RIDEAU DE PAGE : les quatre pages cessent d'être quatre sites.
Au clic, le voile monte ; la nouvelle page le fait redescendre. ------- */
.curtain{
position:fixed;inset:0;z-index:200;pointer-events:none;
background:var(--ink-deep);
transform:translate3d(0,100%,0);
will-change:transform;
}
.curtain.is-closing{transform:translate3d(0,0,0);transition:transform .38s cubic-bezier(.6,0,.8,.2)}
.curtain.is-opening{transform:translate3d(0,-100%,0);transition:transform .62s var(--ease-out)}
.curtain-mark{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:84px;aspect-ratio:765/147;background:var(--on-ink);opacity:0;
-webkit-mask:url("assets/logos/flexho-wordmark.svg") no-repeat center/contain;
mask:url("assets/logos/flexho-wordmark.svg") no-repeat center/contain;
transition:opacity .3s var(--ease);
}
.curtain.is-closing .curtain-mark{opacity:.9;transition-delay:.1s}
/* — ACCORDÉON FAQ : la réponse se déplie au lieu de claquer.
grid-template-rows 0fr → 1fr est la seule façon d'animer une hauteur
inconnue sans la mesurer en JavaScript. ------------------------------ */
.faq .ans-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease-out)}
/* Sans JavaScript, [open] suffit. Avec, c'est .is-open qui pilote, sinon
l'ouverture serait instantanée avant que la transition ne démarre. */
html:not(.js) .faq details[open] .ans-wrap{grid-template-rows:1fr}
.faq details.is-open .ans-wrap{grid-template-rows:1fr}
/* overflow:hidden + min-height:0 font de .ans un conteneur dont la taille
minimale vaut zéro. Sans les deux, la réponse refuse de se replier. */
.faq .ans{overflow:hidden;min-height:0;padding:0}
.faq .ans>*{opacity:0;transform:translate3d(0,8px,0);
transition:opacity .38s var(--ease) .08s,transform .38s var(--ease-out) .08s}
.faq details.is-open .ans>*{opacity:1;transform:none}
.faq summary{transition:color .3s var(--ease)}
.faq summary:hover{color:var(--azur-deep)}
.ink .faq summary:hover{color:var(--azur-soft)}
/* ---------- 8b. MOUVEMENT PAR SECTION -----------------------------------
Ici, les gestes propres à un endroit précis. Chacun doit pouvoir répondre
à « qu'est-ce que ça dit de Flexho ? » — sinon il ne devrait pas exister.
------------------------------------------------------------------------ */
/* — Boutons : un reflet balaie le bouton au survol. Court, une seule fois. */
.btn::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);
transform:translate3d(-120%,0,0);
}
.btn:hover::after{transition:transform .62s var(--ease-out);transform:translate3d(120%,0,0)}
/* — Le mur de logos ralentit quand on s'y intéresse. -------------------- */
.mq-item{transition:opacity .4s var(--ease)}
.marquee:hover .mq-item{opacity:.5}
.marquee:hover .mq-item:hover{opacity:1}
/* — Étapes : l'image change par glissement, et l'étape lue porte un
repère qui se remplit. ----------------------------------------------- */
.steps-media .shot img{transform:scale(1.07) translate3d(0,1.4%,0)}
.steps-media .shot.is-on img{transform:none}
.step{position:relative;padding-left:0}
.step::before{
content:"";position:absolute;left:-1.4rem;top:1.2rem;bottom:1.2rem;
width:2px;background:var(--azur-deep);transform:scaleY(0);transform-origin:top;
transition:transform .55s var(--ease-out);
}
.step:not(.is-dim)::before{transform:scaleY(1)}
@media (max-width:959px){ .step::before{display:none} }
/* — Faits : le filet du haut se dessine avant que le chiffre ne roule. --- */
.fact{position:relative}
.fact::before{
content:"";position:absolute;left:0;top:0;width:clamp(2.2rem,6vw,3.4rem);height:2px;background:var(--azur);
transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out);
transition-delay:calc(var(--i,0) * 80ms);
}
[data-reveal-group].in .fact::before{transform:none}
.fact.is-teal::before{background:var(--teal-soft)}
.paper .fact.is-teal::before{background:var(--teal)}
/* — Les deux portes de l'aiguillage : la photo suit très légèrement le
curseur. Quelques pixels, jamais plus — c'est ce qui donne l'impression
que le bloc est vivant sans qu'on sache pourquoi. --------------------- */
.half-media{transition:transform 1.1s var(--ease-out)}
.half:hover .half-media{transition:transform .5s var(--ease-out)}
/* — Formulaires : le champ actif se souligne, le bouton dit ce qu'il fait. */
.field{position:relative}
.field input,.field select,.field textarea{transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(31,111,235,.16)}
.field label{transition:color .3s var(--ease)}
.field:focus-within label{color:var(--azur-deep)}
.ink .field:focus-within label{color:var(--azur-soft)}
.btn.is-busy{pointer-events:none;opacity:.72}
.btn.is-busy .spin{
display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);
border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* — Confirmation d'envoi : le panneau se pose comme un tampon. ----------- */
.form-done.is-on{animation:stampIn .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes stampIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* — Pied de page : la flèche sort au survol. ----------------------------- */
.foot li a{display:inline-flex;align-items:center;gap:.4rem}
.foot li a::before{
content:"→";display:inline-block;width:0;overflow:hidden;color:var(--azur-soft);
transform:translate3d(-4px,0,0);opacity:0;
transition:width .3s var(--ease-out),opacity .3s var(--ease),transform .3s var(--ease-out);
}
.foot li a:hover::before{width:1.1em;opacity:1;transform:none}
/* — Le rail : le trait de progression se dessine au chargement. ---------- */
.js .rail-line{transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease-out) .3s}
.is-ready .rail-line{transform:none}
/* — Ouverture de page : la photo du hero se pose, une seule fois. -------- */
.js .hero-media,.js .phero-media{transform:scale(1.07)}
.is-ready .hero-media,.is-ready .phero-media{
transform:none;transition:transform 1.6s var(--ease-out);
}
/* ---------- 9. RESPONSIVE / PRÉFÉRENCES --------------------------------- */
@media (max-height:560px){ .scroll-cue,.rail{display:none} }
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;transition-delay:0ms!important;
}
[data-reveal],[data-reveal-group]>*,.js [data-reveal],.js [data-reveal-group]>*{opacity:1!important;transform:none!important}
.mask>span,.js .mask>span{transform:none!important}
/* Le vocabulaire de mouvement au complet, ramené à son état final. */
.w>i,.c>i,.js .w>i,.js .c>i{transform:none!important}
[data-reveal="wipe"]::after,.js [data-reveal="wipe"]::after{display:none!important}
[data-reveal="wipe"] img,.js [data-reveal="wipe"] img:not([data-par]){transform:none!important}
[data-reveal="draw"],.js [data-reveal="draw"],.fact::before,.step::before,
.rail-line,.js .rail-line{transform:none!important}
.hero-media,.phero-media,.js .hero-media,.js .phero-media{transform:none!important}
.btn::after{display:none}
/* Le rideau de page ne se déclenche pas : la navigation redevient directe. */
.curtain{display:none!important}
/* La FAQ s'ouvre d'un coup, sans dépliage animé. */
.faq .ans-wrap{grid-template-rows:0fr}
.faq details[open] .ans-wrap{grid-template-rows:1fr}
.faq .ans>*{opacity:1!important;transform:none!important}
.rush-stage{position:relative;height:auto;min-height:auto;padding-block:var(--band-y)}
.rush-track{display:none}
.rush-line,.js .rush-line{opacity:1}
.rush-line.hot{color:var(--azur)}
.phone,.js .phone,.js [data-reveal="phone"]{transform:none!important;opacity:1!important}
.js [data-reveal="glow"]{opacity:.9}
/* Les cinq écrans sont montrés d'un coup : le défilement automatique
n'existe pas, donc la barre de navigation n'a plus rien à piloter. */
.app-nav{display:none}
.app-copy,.app-slides{min-height:0}
.app-slide,.js .app-slide{position:static;grid-area:auto;opacity:1;transform:none;pointer-events:auto;
padding-top:1.4rem;border-top:1px solid var(--line-ink)}
.app-slide:first-of-type{border-top:0}
.phone-screen img,.js .phone-screen img{position:relative;opacity:1;transform:none;height:auto}
.phone-screen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%}
.phone-screen img{flex:0 0 100%;scroll-snap-align:center}
.steps-media .shot,.js .steps-media .shot{position:relative;opacity:1}
.steps-media{aspect-ratio:auto;display:grid;gap:.6rem}
.steps-media .shot{aspect-ratio:3/4}
.step.is-dim{opacity:1}
.mq-row{transform:none!important;flex-wrap:wrap;width:100%}
.marquee{-webkit-mask-image:none;mask-image:none}
/* Le nombre de copies dépend de la largeur de l'écran : on masque tout
sauf le jeu d'origine, pas seulement la deuxième copie. */
.mq-set:not(:first-child){display:none}
.mq-item{width:auto;flex:1 1 140px}
}
/* Cibles tactiles */
@media (pointer:coarse){
.btn{min-height:48px}
.nav-links a{padding-block:.6rem}
.faq summary{padding-block:1.35rem}
}
/* Impression : sobre, lisible. */
@media print{
.nav,.rail,.drawer,.marquee,.scroll-cue,.hero-media,.phero-media{display:none!important}
body{background:#fff;color:#000}
}
/* ---------- LA BULLE « NOTRE HISTOIRE » ---------------------------------- */
/* Ouverte depuis le lien du menu. La section reste en place dans la page :
la bulle n'est qu'un raccourci, elle ne cache rien. Son contenu est cloné
au moment de l'ouverture, donc l'histoire n'existe qu'une fois dans le code.
On s'appuie sur