/* Pages de la plateforme (connexion, inscription, Mon espace, forfaits…) aux couleurs de la page d'accueil.
   Mêmes trois styles (Dessin, Western, Sérieux), choisis sur l'accueil et retenus par le navigateur.
   Ce fichier se charge après les styles de base.html : il remplace leurs jetons et ajoute le trait « dessin ». */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap;
  src: url("polices/display_grotesk/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 200 1000; font-display: swap;
  src: url("polices/rounded_sans/nunito-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Rye"; font-weight: 400; font-display: swap;
  src: url("polices/western_titre/rye-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-weight: 100 900; font-display: swap;
  src: url("polices/western_slab/bitter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-display: swap;
  src: url("polices/serieux_serif/source-serif-4-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url("polices/humanist_sans/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url("polices/humanist_sans/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root, [data-style="dessin"] {
  --fond: #FFF8F1; --surface: #FFFFFF; --texte: #1F1D1A; --texte-doux: #6B655D;
  --accent: #B4532A; --accent-fonce: #8E3E1D; --accent-clair: #F8E1D2;
  --soleil: #F5B841; --soleil-clair: #FDF0CF; --menthe: #2F8F6A; --menthe-clair: #D9F0E6;
  --ciel: #3B6FD9; --ciel-clair: #DCE7FB; --bordure: #EADFD3; --nuit: #1E1A16;
  --heros-a: #291F1A; --heros-b: #6B331A; --voile: rgba(31, 26, 23, 0.95);
  --police-titre: "Bricolage Grotesque", system-ui, sans-serif; --graisse-titre: 800; --titre-espacement: -0.02em;
  --police-texte: "Nunito", system-ui, sans-serif; --graisse-forte: 800;
  --rayon: 22px; --rayon-bouton: 999px; --trait: 2.5px; --trait-couleur: var(--texte);
  --ombre: 0 5px 0 var(--texte); --ombre-bouton: 0 4px 0 var(--texte);
}
[data-style="western"] {
  --fond: #F3E4C8; --surface: #FFF8EC; --texte: #2B1B10; --texte-doux: #6E5642;
  --accent: #9E3F1C; --accent-fonce: #6B2C12; --accent-clair: #EBD3B0;
  --soleil: #D9A441; --soleil-clair: #F4E3BC; --menthe: #6F7F4A; --menthe-clair: #E2E6CF;
  --ciel: #3E5C7A; --ciel-clair: #D8E1EA; --bordure: #CDB894; --nuit: #2B1B10;
  --heros-a: #3B2416; --heros-b: #7A4A26; --voile: rgba(43, 27, 16, 0.95);
  --police-titre: "Rye", Georgia, serif; --graisse-titre: 400; --titre-espacement: 0;
  --police-texte: "Bitter", Georgia, serif; --graisse-forte: 700;
  --rayon: 14px; --rayon-bouton: 10px; --trait: 2.5px; --trait-couleur: var(--texte);
  --ombre: 0 5px 0 var(--texte); --ombre-bouton: 0 4px 0 var(--texte);
}
[data-style="serieux"] {
  --fond: #F6F7F9; --surface: #FFFFFF; --texte: #111827; --texte-doux: #4B5563;
  --accent: #1F4E8C; --accent-fonce: #163A69; --accent-clair: #E3ECF8;
  --soleil: #C9D6E8; --soleil-clair: #F1F5FA; --menthe: #2E7D5B; --menthe-clair: #E8F3EE;
  --ciel: #1F4E8C; --ciel-clair: #EAF0F8; --bordure: #E5E7EB; --nuit: #0F172A;
  --heros-a: #0F172A; --heros-b: #1E3A5F; --voile: rgba(15, 23, 42, 0.95);
  --police-titre: "Source Serif 4", Georgia, serif; --graisse-titre: 600; --titre-espacement: -0.01em;
  --police-texte: "IBM Plex Sans", system-ui, sans-serif; --graisse-forte: 600;
  --rayon: 10px; --rayon-bouton: 8px; --trait: 1px; --trait-couleur: var(--bordure);
  --ombre: 0 4px 16px rgba(15, 23, 42, 0.08); --ombre-bouton: none;
}


/* Les jetons de base.html suivent ceux de l'accueil (même en mode sombre : l'accueil reste clair) */
:root, :root[data-style] {
  --couleur-fond: var(--fond); --couleur-surface: var(--surface); --couleur-texte: var(--texte);
  --couleur-texte-doux: var(--texte-doux); --couleur-accent: var(--accent); --couleur-bordure: var(--bordure);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root, :root[data-style] {
    --couleur-fond: var(--fond); --couleur-surface: var(--surface); --couleur-texte: var(--texte);
    --couleur-texte-doux: var(--texte-doux); --couleur-accent: var(--accent); --couleur-bordure: var(--bordure);
  }
}
body { font-family: var(--police-texte); }
h1, .sous-titre, .site__nom, .forfait__nom, .forfait__montant, .formulaire-compte legend, .texte-legal h2 {
  font-family: var(--police-titre); font-weight: var(--graisse-titre); letter-spacing: var(--titre-espacement);
}
:focus-visible { outline-color: var(--soleil) !important; }

/* Barre du haut : la mascotte et le nom, comme sur l'accueil */
.barre .marque { display: inline-flex; align-items: center; gap: .5rem; font: var(--graisse-titre) 1.45rem/1 var(--police-titre); }
.marque .mascotte { display: none; width: 38px; height: 38px; }
[data-style="dessin"] .marque .mascotte--dessin, [data-style="western"] .marque .mascotte--western,
[data-style="serieux"] .marque .mascotte--serieux { display: block; }

/* Le trait « dessin » : contour d'encre et ombre décalée (fin et doux en style Sérieux) */
.carte, .site, .forfait, .alerte, .theme, .bascule {
  border: var(--trait) solid var(--trait-couleur) !important; box-shadow: var(--ombre); border-radius: var(--rayon);
}
.forfait--vedette { box-shadow: var(--ombre), 0 0 0 3px var(--accent) !important; }
.formulaire-compte input, .formulaire-compte textarea, .adresse__suffixe {
  border: var(--trait) solid var(--trait-couleur) !important; background: var(--surface);
}
.bouton-compte {
  border: var(--trait) solid var(--trait-couleur) !important; border-radius: var(--rayon-bouton) !important;
  box-shadow: var(--ombre-bouton); font-weight: var(--graisse-forte) !important;
  background: var(--accent); color: #fff !important; transition: transform .12s, box-shadow .12s;
}
.bouton-compte:hover { background: var(--accent-fonce); }
.bouton-compte:active { transform: translateY(3px); box-shadow: none; }
.bouton-compte--secondaire { background: var(--surface) !important; color: var(--texte) !important; }
.bouton-compte--secondaire:hover { background: var(--soleil-clair) !important; }
.bouton-compte--danger { background: #b3261e !important; }
.forfait__ruban, .bascule a[aria-current] { background: var(--accent); }
.theme:has(input:checked) { box-shadow: var(--ombre), 0 0 0 3px var(--accent) !important; }
.secteur { border: var(--trait) solid var(--trait-couleur); border-radius: var(--rayon-bouton); }
.secteur.actif { background: var(--accent); border-color: var(--trait-couleur); }
.sites, .forfaits { gap: 1.25rem; }

/* Sites de démonstration */
.demo__illustration { display: block; width: 100%; max-width: 12rem; height: auto; margin-bottom: 0.75rem; }
.demo__liens { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 1rem; }