/* =========================================================
   SITE-NUIT.CSS : les pages du site (logiciels, tarifs, questions, contact,
   page introuvable) dans la direction de nuit, comme l'accueil.
   Le même mécanisme que le thème sombre de site.css : des JETONS, portés par
   html[data-nuit], que les composants de site.css suivent tout seuls. Ne
   s'ajoute ici que ce qui change de FORME (l'ordre d'Apple : titres centrés et
   grands, panneaux arrondis, pilules), jamais un meuble recopié.
   Ordre de chargement : site.css, puis nuit.css (en-tête, pied, pilules), puis
   cette feuille.
   ========================================================= */
html[data-nuit]{
  --display:"Golos","Golos Text",system-ui,sans-serif;
  --sans:"Golos","Golos Text",system-ui,sans-serif;
  --fond:#000; --surface:#121724; --surface-bas:#0a0e18; --surface-bas2:#161c2b;
  --encre:#f3f5f9; --encre-douce:#c6ccd8; --encre-tres-douce:#aab2c5;
  --bordure:rgba(255,255,255,.08); --bordure-forte:rgba(255,255,255,.16);
  /* les couleurs des logiciels, celles de l'accueil */
  /* plus clairs qu'à l'accueil, où ils ne sont que lueur : ici ils écrivent aussi (AA sur le noir et sur un panneau) */
  --auto:#5277ff; --auto-fort:#3a62ff; --auto-clair:rgba(58,98,255,.16);
  --crm:#1fb6e8;  --crm-fort:#179ccb;  --crm-clair:rgba(31,182,232,.16);
  --gmao:#f2c200; --gmao-fort:#d6aa00; --gmao-clair:rgba(242,194,0,.16);
  --cpta:#14b88f; --cpta-fort:#109c79; --cpta-clair:rgba(20,184,143,.16);
  --teams:#9a6aff; --atelier:#ff7a1a; --rh:#f0508c;
  /* l'or de l'ancien thème ponctuait des titres et des filets : la nuit n'a
     pas de couleur de plus que celles des logiciels, il devient le blanc */
  --or:#f3f5f9; --succes:#5fd3b8; --alerte:#ff9c8f;
  /* le choisi est blanc : l'accent de la nuit n'est pas une couleur */
  --accent:#f3f5f9; --accent-fort:#ffffff; --accent-clair:rgba(255,255,255,.08);
  --accent-texte:#f3f5f9; --sur-accent:#05070d;
  --ombre-s:0 1px 2px rgba(0,0,0,.5);
  --ombre-m:0 10px 30px -18px rgba(0,0,0,.8);
  --ombre-l:0 40px 90px -40px rgba(0,0,0,.9);
  --rayon:28px;
  color-scheme:dark;
}
html[data-nuit] body{background:#000}
/* plus de grain : la nuit est lisse */
html[data-nuit] body::before{content:none}

/* ---------- la voix des titres : celle de l'accueil, Golos 650 ---------- */
html[data-nuit] :is(h1,h2,h3,h4){font-family:var(--display);font-weight:650;letter-spacing:-.022em}
html[data-nuit] :is(h1,h2){text-wrap:balance}

/* le bandeau du haut, comme le ruban de l'accueil */
html[data-nuit] .bandeau{background:var(--surface-bas);color:var(--encre-douce);border-bottom:1px solid var(--bordure)}
html[data-nuit] .bandeau b{color:var(--encre)}
html[data-nuit] .bandeau-x{color:var(--encre-douce)}

/* ---------- le héros d'une page : un titre centré, une phrase ---------- */
html[data-nuit] .hero{max-width:1024px;padding:96px 22px 56px;text-align:center}
html[data-nuit] .h1{font-size:clamp(40px,23.3px + 4.29vw,80px);line-height:1.05;letter-spacing:-.03em}
html[data-nuit] .hero .sub{max-width:40ch;margin:18px auto 0;font-size:clamp(18px,15.8px + .57vw,24px);line-height:1.3;color:var(--encre-douce)}

/* ---------- les pilules d'Apple : le choisi est blanc ---------- */
html[data-nuit] :is(.btn-main,.btn-ghost){padding:11px 21px;border-radius:980px;font-size:17px;font-weight:400;line-height:20px;box-shadow:none;transition:background-color .2s ease,color .2s ease,transform .12s ease}
html[data-nuit] .btn-main{background:var(--encre);color:var(--sur-accent)}
html[data-nuit] .btn-main:hover{background:#fff;transform:none;box-shadow:none}
html[data-nuit] .btn-ghost{border:1px solid rgba(243,245,249,.55);background:transparent;color:var(--encre)}
html[data-nuit] .btn-ghost:hover{background:var(--encre);color:var(--sur-accent);transform:none}
html[data-nuit] :is(.btn-main,.btn-ghost):active{transform:scale(.97)}

/* ---------- la carte d'appel devient la tuile d'ouverture de l'accueil ---------- */
html[data-nuit] .cta-carte{max-width:none;margin:0 12px;padding:92px 22px 100px;border:0;border-radius:30px;box-shadow:none;text-align:center;
  background:radial-gradient(60% 55% at 50% 38%,rgba(125,143,196,.26),rgba(125,143,196,.08) 55%,transparent 100%),linear-gradient(180deg,#080b14,#05070d 55%)}
html[data-nuit] .cta-carte h2{max-width:22ch;margin:0 auto;font-size:clamp(34px,20.6px + 3.43vw,56px);line-height:1.07;color:var(--encre)}
html[data-nuit] .cta-carte>p{max-width:40ch;margin:12px auto 0;color:var(--encre-douce);font-size:clamp(18px,16.9px + .29vw,21px);line-height:1.3}
html[data-nuit] .cta-carte .attente{margin:36px auto 0}
html[data-nuit] .cta-carte .attente input,html[data-nuit] .cta-carte .attente select{background-color:rgba(255,255,255,.07)}
/* `.cta-carte .attente-metier{background:…}` de site.css remet la flèche à zéro : on la repose entière */
html[data-nuit] .cta-carte .attente select{background-image:var(--fleche-liste);background-position:var(--fleche-place);background-size:5px 5px;background-repeat:no-repeat}
html[data-nuit] .cta-carte .micro{max-width:52ch;margin:14px auto 0;color:var(--encre-douce);font-size:14px}

/* ---------- les questions, comme celles de l'accueil ---------- */
html[data-nuit] .faq{max-width:820px;gap:0}
html[data-nuit] .faq details{background:none;border:0;border-bottom:1px solid var(--bordure);border-radius:0;box-shadow:none}
html[data-nuit] .faq summary{padding:22px 4px;font-size:19px;font-weight:600;line-height:1.3}
html[data-nuit] .faq summary .chev{color:var(--encre-tres-douce)}
html[data-nuit] .faq .rep p{max-width:68ch;padding:0 4px 24px;font-size:17px;line-height:1.5;color:var(--encre-douce)}
html[data-nuit] .faq-cat{margin:64px 0 6px;font-size:28px;font-weight:650;letter-spacing:-.015em;color:var(--encre)}
html[data-nuit] .faq-cat:first-child{margin-top:0}

/* ---------- les petites étiquettes : plus de chasse fixe ni de capitales espacées ---------- */
html[data-nuit]{--mono:var(--sans)}
html[data-nuit] :is(.grille-prix thead th,.core-dev){font-size:13px;letter-spacing:0;text-transform:none}

/* ---------- la page des logiciels : la voix de l'accueil ---------- */
html[data-nuit] .lgc-tete{text-align:center}
html[data-nuit] .lgc-tete h1{max-width:20ch;margin:0 auto;font-size:clamp(40px,23.3px + 4.29vw,80px);line-height:1.05;letter-spacing:-.03em}
html[data-nuit] .lgc-tete .sec-dit{max-width:46ch;margin:18px auto 0;font-size:clamp(18px,16.9px + .29vw,21px);line-height:1.35}
/* le nom d'un logiciel est blanc, comme sur l'accueil ; sa couleur reste dans sa scène */
html[data-nuit] :is(.pv-tete h2,.lgc-txt h2){color:var(--encre);font-weight:650}
html[data-nuit] :is(.lgc-autres,.lgc-fin){border-top-color:var(--bordure)}
html[data-nuit] :is(.lgc-autres h2,.lgc-fin h2){font-size:clamp(32px,22.9px + 1.52vw,48px)}
html[data-nuit] .lgc-fin{text-align:center}
html[data-nuit] .lgc-fin>h2{max-width:22ch;margin-inline:auto}
html[data-nuit] .lgc-fin>.sec-dit{max-width:46ch;margin:14px auto 0}
/* la carte d'ouverture du bas : la même tuile que partout */
html[data-nuit] .finr{margin:56px 0 0;padding:72px 22px 80px;border-radius:30px;text-align:center;
  background:radial-gradient(60% 55% at 50% 38%,rgba(125,143,196,.26),rgba(125,143,196,.08) 55%,transparent 100%),linear-gradient(180deg,#080b14,#05070d 55%)}
html[data-nuit] .finr h3{max-width:22ch;margin:0 auto;font-size:clamp(30px,19.9px + 2.29vw,48px);line-height:1.08}
html[data-nuit] .finr .mentions{max-width:46ch;margin:14px auto 0;font-size:clamp(17px,16.2px + .19vw,19px)}
html[data-nuit] .finr .attente{margin:32px auto 0}
html[data-nuit] .finr .attente input,html[data-nuit] .finr .attente select{background-color:rgba(255,255,255,.07)}
html[data-nuit] .finr .attente select{background-image:var(--fleche-liste);background-position:var(--fleche-place);background-size:5px 5px;background-repeat:no-repeat}

/* ---------- les tarifs : les têtes centrées, les panneaux arrondis ---------- */
html[data-nuit] .formule-tete{max-width:1000px;margin:0 auto 32px;padding-top:0;border-top:0;text-align:center}
html[data-nuit] .formule-tete h2{font-size:clamp(32px,22.9px + 1.52vw,48px)}
html[data-nuit] .formule-tete p{max-width:46ch;margin:12px auto 0;font-size:clamp(17px,15.9px + .29vw,21px);line-height:1.35}
html[data-nuit] .formule-tete .k{color:var(--encre-douce)}
html[data-nuit] .compar-tete{text-align:center}
html[data-nuit] .compar-tete h3{font-size:clamp(28px,22.1px + 1.52vw,44px);font-weight:650}
html[data-nuit] .compar-tete p{margin-inline:auto;font-size:17px}
html[data-nuit] .grille-prix thead th{border-bottom-color:var(--bordure-forte)}
html[data-nuit] .grille-prix .prix-val b{font-weight:650}
html[data-nuit] .inclus{border-top-color:var(--bordure)}
html[data-nuit] .addon{padding:22px 24px;border:0;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--bordure)}
html[data-nuit] .core{border:0;border-radius:30px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--bordure)}
html[data-nuit] .core::before{content:none}
html[data-nuit] .core-aside{padding:24px;border:0;border-radius:24px;background:var(--surface-bas);text-align:center}
html[data-nuit] :is(.core-aside .cadeau,.core-dev){border-radius:999px}

@media (max-width:734px){
  html[data-nuit] .finr{padding:56px 16px 64px;border-radius:24px}
  html[data-nuit] .hero{padding:64px 16px 40px}
  /* au téléphone, la croix du bandeau reste à droite du texte au lieu de tomber seule sur une ligne */
  html[data-nuit] .bandeau{flex-wrap:nowrap;justify-content:space-between;text-align:left}
  html[data-nuit] .cta-carte{margin:0 8px;padding:72px 16px 80px;border-radius:24px}
  html[data-nuit] :is(.btn-main,.btn-ghost){padding:8px 15px;font-size:14px;line-height:18px}
  html[data-nuit] .faq summary{font-size:17px;padding:18px 2px}
  html[data-nuit] .faq .rep p{font-size:16px}
  html[data-nuit] .faq-cat{font-size:24px;margin-top:48px}
}