/* ===================================================================
   FORME CONNEXION — la page d'accueil de N15 dans la charte de paxter.eu
   12/10/2026, nuit. Couche posée PAR-DESSUS les styles de login.html,
   réversible : retirer la balise <link> de login.html, et la page
   reprend son habillage d'avant (noir chaud / papier).

   Joël : « refais la page d'accueil de N15 en respectant le style du
   site Paxter, mais en gardant tout ce qui est animation ; les deux
   versions, lumineuse et sombre ; l'important, c'est le rendu visuel. »

   Ce qui vient du site, MESURÉ (bancs/2026-10-12/style-paxter-mesure.md) :
     . l'ardoise #3f4e55 pour l'encre et les aplats sombres, le rouge
       #a52524 pour l'action, la page #f3f5f3, les cartes #feffff, le gris
       #c8c9cb pour le texte sur ardoise ;
     . Lato pour le corps, Titillium Web 700 pour les titres ;
     . les boutons : rouge plein, texte blanc, capitales, rayon 5 px ;
       au survol, rouge à 85 % ; les boutons à bord : filet #c8c9cb, fond
       gris au survol ;
     . les liens : encre, rouge au survol, jamais soulignés ;
     . pas d'ombre, pas de déplacement : un survol est une couleur.

   Ce qui reste de la page : ses animations (la question qui se tape, la
   courbe qui se trace, les blocs qui montent, les trois faces), son
   canevas, son repli à toutes les tailles, sa vidéo.
   =================================================================== */

/* ── Les jetons : la page relit ceux qu'elle connaît ─────────────── */
:root {
  --texte-rgb:        227,233,235;
  --page-rgb:         16,23,26;
  --texte-faible-rgb: 166,179,185;

  --page:   #10171a;              /* l'ardoise poussée au noir, comme le chat */
  --page-2: #161f24;
  --page-3: #121a1e;
  --texte:        #e3e9eb;
  --texte-dim:    #b9c8ce;
  --texte-faible: #a6b3b9;

  --surface-forte:        #a52524;   /* le bouton principal : le rouge du site */
  --surface-forte-survol: #b5302e;
  --sur-forte:            #ffffff;
  --sur-forte-rgb:        255,255,255;
  --panneau-a-rgb: 22,31,36;
  --panneau-b-rgb: 16,23,26;
  --lueur-a: #182329;
  --lueur-b: #141c21;

  --erreur-filet: rgba(201,64,60,.45);
  --erreur-fond:  rgba(201,64,60,.12);
  --erreur-texte: #f0a9a4;

  --rouge:       #a52524;
  --rouge-clair: #c9403c;
  --rouge-texte: #e38a86;
  --filet:      rgba(var(--texte-rgb),.12);
  --bord-champ: #3f4e55;
  --encre-poids: 1;
  --logo-paxter-filtre:  brightness(0) invert(1);
  --logo-paxter-opacite: .85;
}
:root[data-theme="clair"] {
  --texte-rgb:        63,78,85;
  --page-rgb:         243,245,243;
  --texte-faible-rgb: 94,103,109;

  --page:   #f3f5f3;              /* --grey-color du site */
  --page-2: #feffff;              /* --light-grey-color : la porte est une carte blanche */
  --page-3: #feffff;
  --texte:        #3f4e55;        /* l'encre du site, exacte */
  --texte-dim:    #5e676d;
  --texte-faible: #6c767c;

  --surface-forte:        #a52524;
  --surface-forte-survol: #b5302e;
  --sur-forte:            #ffffff;
  --sur-forte-rgb:        255,255,255;
  --panneau-a-rgb: 254,255,255;
  --panneau-b-rgb: 254,255,255;
  --lueur-a: #e6eae7;
  --lueur-b: #eceeec;

  --erreur-filet: rgba(165,37,36,.35);
  --erreur-fond:  rgba(165,37,36,.07);
  --erreur-texte: #8c1a14;

  --rouge-texte: #a52524;
  --filet:      rgba(63,78,85,.14);
  --bord-champ: #c8c9cb;          /* --dark-grey-color : le filet des boutons du site */
  --encre-poids: 2.1;
  --logo-paxter-filtre:  none;
  --logo-paxter-opacite: 1;
}

/* ── Les polices du site ─────────────────────────────────────────── */
body { font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.promesse, .deja {
  font-family: 'Titillium Web', 'Lato', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Le titre en Titillium 700, comme les h2 du site (32 px, 700) : la
   graisse 300 n'est pas servie, et le site ne l'emploie pas. */
.promesse { font-weight: 700; }
.promesse b { color: var(--rouge); }
.ana-dit { font-family: 'Lato', Georgia, serif; font-weight: 300; font-style: italic; }

/* ── La porte : une carte blanche posée sur la page grise ─────────── */
.porte {
  background: var(--page-2);
  border-left: 1px solid var(--filet);
  box-shadow: 0 4px 2px -2px color-mix(in srgb, var(--texte) 9%, var(--page));
}

/* ── Les boutons, grammaire du site ──────────────────────────────── */
/* Le bouton d'essai : rouge plein, capitales, rayon 5. L'animation qui
   dessinait son cadre n'a plus d'objet. */
.essai {
  background: var(--rouge);
  color: #fff;
  border: 1px solid var(--rouge);
  border-radius: 5px;
  padding: 13px 22px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 400;
  animation: none;
  transition: background .15s ease, border-color .15s ease;
}
.essai::before { display: none; }
.essai:hover { background: rgba(165,37,36,.85); border-color: rgba(165,37,36,.85); }
.essai:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }
/* La seconde porte : le bouton à bord du site. */
.offres {
  border: 1px solid var(--bord-champ);
  border-radius: 5px;
  padding: 13px 22px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 400;
  color: var(--texte);
  transition: background .15s ease;
}
.offres::before, .offres::after { display: none; }
.offres:hover { background: color-mix(in srgb, var(--texte) 7%, transparent); }
.trait { background: transparent; width: 0; margin: 0 7px; }
/* Se connecter : le même rouge plein. */
.entrer {
  background: var(--rouge);
  color: #fff;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 400;
  transition: background .15s ease;
}
.entrer:hover { background: rgba(165,37,36,.85); transform: none; box-shadow: none; }
.entrer .spinner { border-color: rgba(255,255,255,.3); border-top-color: #fff; }

/* ── Les liens : encre, rouge au survol, jamais soulignés ────────── */
.sortie { border-bottom-color: transparent; color: var(--texte); }
.sortie::after { display: none; }
.sortie:hover { color: var(--rouge); }
.oubli-lien { color: var(--texte-faible); }
.oubli-lien span { border-bottom: 0; }
.oubli-lien:hover { color: var(--rouge); }
.pied a:hover { color: var(--rouge); }
.voir-mdp:hover { color: var(--rouge); background: none; }

/* ── Les champs : filet gris, rayon 5, le rouge n'y a rien à faire ── */
label {
  font-family: 'Lato', system-ui, sans-serif;
  color: var(--texte-faible);
  letter-spacing: .08em;
}
input {
  background: color-mix(in srgb, var(--texte) 3%, var(--page-2));
  border: 1px solid var(--bord-champ);
  border-radius: 5px;
  color: var(--texte);
}
input:focus {
  background: var(--page-2);
  border-color: var(--texte);
  box-shadow: none;
}
input::placeholder { color: rgba(var(--texte-rgb),.45); }

/* ── Les faces du produit : les noms, comme le menu du site ───────── */
.facettes-noms .facette {
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-faible);
  border-bottom: 0;
  box-shadow: inset 0 2px 0 transparent;
  padding-top: 8px;
  transition: color .15s ease, box-shadow .15s ease;
}
.facettes-noms .facette:hover { color: var(--rouge); }
.facettes-noms .facette[aria-current="true"] {
  color: var(--texte);
  border-bottom: 0;
  box-shadow: inset 0 2px 0 var(--texte);     /* le trait du site, en haut */
}
/* Les deux autres présentations (traits, points) gardent leur marque
   active en rouge. Pas la présentation « noms » : vu sur la première
   capture, la règle générale peignait un PAVÉ rouge derrière le nom
   actif, texte illisible. */
.facettes:not(.facettes-noms) .facette[aria-current="true"] { background: var(--rouge); }
.facettes-noms .facette[aria-current="true"] { background: none; }
.facette:focus-visible { outline: 2px solid var(--texte); outline-offset: 4px; }

/* ── Le pied et les réglages ─────────────────────────────────────── */
.pied { font-family: 'Lato', system-ui, sans-serif; }
.langues button[aria-pressed="true"] { color: var(--rouge); background: none; }
.bascule-theme:hover { color: var(--rouge); background: none; }
.bascule-theme:focus-visible { outline: 2px solid var(--texte); }

/* ── La voix off et les sources, dans l'encre ────────────────────── */
.question { color: rgba(var(--texte-rgb),.55); font-weight: 300; }
.sources  { color: rgba(var(--texte-rgb),.55); }
.ana-dit  { color: rgba(var(--texte-rgb),.62); }
.ana-rond { border-color: rgba(165,37,36,.6); background: rgba(165,37,36,.10); }
.sous { color: var(--texte-dim); }
.deja-sous, .marque-sous, .delai, .sans-carte { color: var(--texte-faible); }

/* ── Le sombre : les visages et le fond de la vidéo ───────────────── */
#toile { background: var(--page); }
.tete { border-color: var(--page-2); color: var(--texte-dim); }

/* Le mouvement réduit garde ses règles ; rien ici n'ajoute d'animation. */