/* =========================================================
   NUIT.CSS : le socle de la vitrine de Dexter Deck, dans la direction de nuit
   (12 oct. 2026). Chaque page publique le charge ; une page qui a des meubles
   à elle les ajoute dans sa propre feuille, après celle-ci.
   La matière : la nuit, la lueur, les pilules blanches (l'application Revolut,
   sans rien en copier). L'ordre : apple.com, une tuile, toujours la même.
   Ce qu'il porte : les jetons, Golos, l'en-tête et le pied partagés, le ruban,
   les pilules, les tuiles et leur lueur, les blocs, l'icône d'un logiciel, le
   formulaire de la liste d'attente, les questions, le focus, le mouvement
   réduit et l'impression.
   Polices locales seulement (zéro CDN).
   ========================================================= */
@font-face{font-family:"Golos";src:url("../fonts/golos-latin.woff2") format("woff2");font-weight:400 900;font-display:swap}
:root{
  --nuit:#05070d; --nuit-2:#0a0e18; --panneau:rgba(20,25,38,.84); --panneau-plein:#121724;
  --dans:rgba(255,255,255,.055); --trait:rgba(255,255,255,.08); --trait-fort:rgba(255,255,255,.16);
  --texte:#f3f5f9; --texte-lueur:#c6ccd8; --texte-2:#aab2c5; --texte-3:#8b95ab;
  --sortie:cubic-bezier(.32,.72,0,1);
  /* la flèche d'une liste déroulante, dessinée en deux traits */
  --fleche-liste:linear-gradient(45deg,transparent 50%,var(--texte-2) 50%),linear-gradient(135deg,var(--texte-2) 50%,transparent 50%);
  --fleche-place:calc(100% - 22px) 50%,calc(100% - 17px) 50%;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#000}
body{margin:0;background:#000;color:var(--texte);font:400 17px/1.47 "Golos",system-ui,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #9db2ff;outline-offset:3px;border-radius:10px}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor}
.masque{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* une ancre atteinte ne finit pas sous la barre collante (48 px) */
[id]{scroll-margin-top:64px}
.skip{position:absolute;left:12px;top:-60px;z-index:90;padding:8px 12px;border-radius:10px;background:var(--texte);color:var(--nuit)}
.skip:focus{top:12px}

/* ---------- l'en-tête partagé du site (.hd), habillé comme la barre d'Apple : 44 px, flou ---------- */
.hd{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;height:48px;padding:0 max(22px,calc((100vw - 1024px)/2));background:rgba(5,7,13,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.lgx{display:inline-flex;align-items:center;gap:8px;color:var(--texte);font-size:17px!important;font-weight:650;letter-spacing:-.02em}
.lgx svg{width:24px;height:24px}
.hd-nav{display:flex;align-items:center;gap:6px}
.hd-link{padding:0 12px;color:#d8dce5;font-size:13px;line-height:48px;transition:color .2s ease}
.hd-link:hover{color:#fff}
.hd-cta{margin-left:10px;padding:6px 14px;border-radius:999px;background:var(--texte);color:var(--nuit);font-size:13px;font-weight:600;transition:background-color .2s ease}
.hd-cta:hover{background:#fff}
.hd-burger{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;color:var(--texte)}
.hd-burger svg{width:22px;height:22px}

.ruban{padding:13px 22px;background:var(--nuit-2);color:var(--texte-lueur);font-size:14px;text-align:center}
.ruban a{color:var(--texte);white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.ruban a:hover{text-decoration-color:currentColor}

/* ---------- les boutons d'Apple, dans la nuit : le choisi est blanc ---------- */
.boutons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:11px 21px;border:1px solid transparent;border-radius:980px;font-size:17px;line-height:20px;white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .12s ease}
.btn:active{transform:scale(.97)}
.btn.plein{background:var(--texte);color:var(--nuit)}
.btn.plein:hover{background:#fff}
.btn.contour{border-color:rgba(243,245,249,.55);color:var(--texte)}
.btn.contour:hover{background:var(--texte);color:var(--nuit)}

/* ---------- les tuiles ---------- */
.tuile{position:relative;overflow:hidden;background:linear-gradient(180deg,#080b14,#05070d 55%);text-align:center;isolation:isolate}
.tuile-texte{position:relative;z-index:2;display:grid;justify-items:center}
.tuile h2,.tuile h1{font-weight:650;letter-spacing:-.022em;text-wrap:balance}
.tuile .phrase{color:var(--texte);font-weight:400;letter-spacing:-.005em;text-wrap:balance}
.tuile .etat{display:grid;gap:2px;margin-top:10px;color:var(--texte-2);font-size:15px;line-height:1.35}
.tuile .etat span:first-child{color:var(--texte)}
.tuile .etat span+span{max-width:36ch}
/* la lueur, propre à chaque tuile, jamais plus forte pour l'une que pour l'autre.
   ⛔ Ni flou ni mouvement : un dégradé peint une fois. La règle dure de
   docs/site-public.md (deux accueils cassés en août 2026 par des couches
   floutées et un fond animé) vaut ici : on ne livre pas un effet qu'on ne peut
   pas éprouver sur un vrai téléphone. Le dégradé a quatre arrêts pour que le
   bord reste doux sans `filter:blur`. */
.lueur{position:absolute;z-index:0;left:50%;width:min(1100px,120%);aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(closest-side,color-mix(in oklab,var(--c) 50%,transparent),color-mix(in oklab,var(--c) 26%,transparent) 35%,color-mix(in oklab,var(--c) 9%,transparent) 68%,transparent 100%);pointer-events:none}

/* l'icône d'un logiciel, en petit et en grand : la même partout */
.ic{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:linear-gradient(160deg,color-mix(in oklab,var(--c) 78%,#05070d),color-mix(in oklab,var(--c) 34%,#05070d));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ic .ico{width:16px;height:16px;color:#fff}
.ic.grande{width:72px;height:72px;border-radius:18px}
.ic.grande .ico{width:34px;height:34px}

/* ---------- les blocs sans tuile : un titre, une phrase, puis le contenu ---------- */
.bloc{max-width:1024px;margin:0 auto;padding:96px 22px 84px;text-align:center}
.bloc h2{font-size:48px;font-weight:650;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
.bloc-dit{max-width:40ch;margin:12px auto 0;color:var(--texte-lueur);font-size:21px;line-height:1.3;text-wrap:balance}
.bloc-lien{margin-top:30px;font-size:17px}
.bloc-lien a{color:var(--texte);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.bloc-lien a:hover{text-decoration-color:currentColor}

/* les questions */
.faq{max-width:820px;margin:36px auto 0;text-align:left}
.q{border-bottom:1px solid var(--trait)}
.q summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;font-size:19px;font-weight:600;line-height:1.3;cursor:pointer;list-style:none;border-radius:10px}
.q summary::-webkit-details-marker{display:none}
.q summary .ico{width:20px;height:20px;flex:none;color:var(--texte-2);transition:transform .25s var(--sortie)}
.q[open] summary .ico{transform:rotate(45deg)}
.q p{max-width:68ch;padding:0 4px 24px;color:var(--texte-lueur);font-size:17px;line-height:1.5}

.attente{position:relative;z-index:2;display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:8px;max-width:640px;margin:36px auto 0;padding:6px;border-radius:999px;background:rgba(20,25,38,.9);box-shadow:inset 0 0 0 1px var(--trait-fort)}
.attente select,.attente input{height:46px;min-width:0;padding:0 18px;border:0;border-radius:999px;background:rgba(255,255,255,.07);font-size:16px}
.attente select{appearance:none;padding-right:36px;background-image:var(--fleche-liste);background-position:var(--fleche-place);background-size:5px 5px;background-repeat:no-repeat}
.attente select option{background:#121724}
.attente input::placeholder{color:var(--texte-3)}
.attente .btn{padding:0 24px;height:46px}
.attente input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px #ff9c8f}
.attente .btn[disabled]{opacity:.6}
.attente-dit,.attente-pour{grid-column:1/-1;margin:2px 14px 4px;color:var(--texte);font-size:15px;text-align:left}
.attente-dit:empty{display:none}
.attente-dit[data-ton="ko"]{color:#ffb4aa}
.attente-pour{color:var(--texte-lueur);font-size:14px}
.form-dit{position:relative;z-index:2;margin-top:14px;color:var(--texte-lueur);font-size:14px}

/* ---------- le pied partagé (.foot), dense comme celui d'Apple ---------- */
.foot{background:var(--nuit-2);color:var(--texte-2);font-size:12.5px;line-height:1.4}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;max-width:1024px;margin:0 auto;padding:30px 22px 26px}
.foot-marque .lgx{font-size:15px!important}
.foot-tag{max-width:34ch;margin-top:10px}
.foot-mail{display:inline-block;margin-top:8px;color:var(--texte)}
.foot-col{display:grid;align-content:start;gap:8px}
.foot-col h3{margin-bottom:2px;color:var(--texte);font-size:12.5px;font-weight:600}
.foot-col a{color:var(--texte-2)}
.foot-col a:hover,.foot-mail:hover{color:var(--texte);text-decoration:underline}
.foot-bientot{color:var(--texte-3)}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;max-width:1024px;margin:0 auto;padding:14px 22px 22px;border-top:1px solid var(--trait);color:var(--texte-2)}
.foot-haut{color:var(--texte)}

/* ---------- les tailles ---------- */
@media (max-width:833px){
  .hd-burger{display:grid;place-items:center}
  /* sous la barre, à sa place : un menu `fixed` aurait pour cadre la barre floutée
     (le flou d'arrière-plan en fait un bloc conteneur), et tomberait à zéro de haut */
  .hd-nav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 48px);height:calc(100dvh - 48px);overflow-y:auto;display:grid;align-content:start;gap:0;padding:18px 40px;background:var(--nuit);visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s}
  .hd-nav[data-ouvert="1"]{visibility:visible;opacity:1}
  .hd-link{padding:6px 0;font-size:26px;font-weight:600;line-height:1.3;color:var(--texte)}
  .hd-cta{justify-self:start;margin:18px 0 0;padding:12px 22px;font-size:17px}
}
@media (max-width:734px){
  body{font-size:15px}
  .ruban{font-size:12.5px;padding:11px 16px}
  .boutons{gap:12px;margin-top:18px}
  .btn{padding:8px 15px;font-size:14px;line-height:18px}
  .attente{grid-template-columns:1fr;border-radius:28px}
  .attente .btn{height:46px}
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr));padding:26px 16px 20px}
  .foot-marque{grid-column:1/-1}
  .foot-bar{padding:14px 16px 22px}
  .bloc{padding:68px 16px 56px}
  .bloc h2{font-size:32px}
  .bloc-dit{font-size:18px}
  .q summary{font-size:17px;padding:18px 2px}
  .q p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}
@media (prefers-reduced-transparency:reduce){.hd{background:var(--nuit)}}
@media print{html,body,.tuile,.foot{background:#fff!important;color:#111!important}.lueur,.hd,.ruban{display:none}}