/* =====================================================================
   JaCynth Corp — feuille de style unique.

   AUCUN FRAMEWORK, AUCUNE POLICE DISTANTE, AUCUN APPEL A UN TIERS.
   Le site doit tenir sur un hébergement mutualisé, se déposer par FTP et
   ne rien demander à personne d'autre que le serveur qui le sert. Une
   police chargée depuis un CDN, c'est une requête de plus, une adresse IP
   de visiteur communiquée à un tiers, et une page qui saute quand ce tiers
   tombe. On s'en passe.

   LA PALETTE VIENT DES EMBLÈMES, elle n'a pas été choisie à côté.
   Les SVG de ./assets/ portent, en toutes lettres : le bleu nuit du badge
   (#0e1622), le liseré et le dégradé d'or (#c9a227, #edd070, #8a5e1e), la
   gemme rouge du cœur (#c4202e) et le crème du fond (#f3f1ec). Tout ce qui
   suit en dérive.

   ⚠ LES BLASONS ONT UN FOND CRÈME OPAQUE, ET ON NE LES RETOUCHE PAS.
   Chaque SVG de division porte son propre <rect fill="#f3f1ec">. Sur une
   page sombre, ils apparaissent donc comme des plaques claires. Ce n'est
   pas un accident qu'on subit : ils sont traités en ÉCUSSONS — cadre à
   liseré d'or, coins adoucis, ombre portée courte — de sorte que la plaque
   claire se lise comme un objet posé sur la page, et non comme un trou.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONS
   ------------------------------------------------------------------ */
:root {
  /* fonds, du plus profond au plus proche */
  --nuit:        #0b111a;
  --nuit-2:      #101a27;
  --surface:     #14202e;
  --surface-2:   #1a2a3b;

  /* traits et textes */
  --trait:       #24384d;
  --trait-fort:  #33506d;
  --texte:       #e8eef4;
  --texte-doux:  #a9bccd;

  /* les ors de l'emblème */
  --or:          #c9a227;
  --or-clair:    #edd070;
  --or-sombre:   #8a5e1e;
  --gemme:       #c4202e;
  --creme:       #f3f1ec;

  /* espacements : une seule échelle, utilisée partout */
  --e1: 0.25rem; --e2: 0.5rem;  --e3: 0.75rem; --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4.5rem;

  --filet: 1px;
  --rayon: 10px;
  --rayon-l: 16px;
  --largeur: 68rem;

  --fonte: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Les emblèmes appellent Poppins/Montserrat puis Arial : on reste dans la
     même famille géométrique pour que titres et blasons se ressemblent. */
  --fonte-titre: "Poppins", "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------------
   2. SOCLE
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  /* Une ancre ne doit pas glisser sous l'en-tête collant. */
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--or-clair); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--creme); }

/* ⚠ Un contour de focus VISIBLE, et sur tout ce qui se navigue au clavier.
   Sans lui, la tabulation traverse la page sans qu'on sache où l'on est —
   c'est le défaut d'accessibilité le plus courant et le plus simple à éviter. */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--fonte-titre);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 var(--e3);
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(1.45rem, 3.6vw, 2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

/* Le sur-titre en capitales espacées : c'est la signature typographique des
   emblèmes (« CORP » y est posé en letter-spacing 30). */
.surtitre {
  font-family: var(--fonte-titre);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 var(--e3);
}

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--e4);
}
@media (min-width: 48rem) { .enveloppe { padding-inline: var(--e6); } }

/* Le lien d'évitement : premier élément focalisable de la page. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--or);
  color: #14202a;
  padding: var(--e3) var(--e4);
  font-weight: 700;
  z-index: 100;
}
.evitement:focus { left: var(--e4); top: var(--e2); }

/* ---------------------------------------------------------------------
   3. EN-TÊTE ET NAVIGATION

   ⚠ Mobile d'abord : la barre porte la marque et, en dessous, les ancres
   qui défilent horizontalement. Pas de menu « hamburger » — quatre entrées
   ne justifient pas un panneau à ouvrir, un état à gérer et un piège de
   focus à corriger.
   ------------------------------------------------------------------ */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 17, 26, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--filet) solid var(--trait);
}

.entete .enveloppe {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding-block: var(--e3);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--fonte-titre);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--texte);
  text-decoration: none;
}
.marque:hover { color: var(--or-clair); }
.marque .sceau {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: var(--filet) solid var(--or-sombre);
  background: var(--creme);
  object-fit: cover;
  object-position: center 22%;
}
.marque .nom { font-size: 1.02rem; }
.marque .nom span { color: var(--or); font-weight: 600; }

.nav-ancres {
  display: flex;
  gap: var(--e4);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.nav-ancres::-webkit-scrollbar { display: none; }
.nav-ancres a {
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav-ancres a:hover, .nav-ancres a[aria-current="true"] {
  color: var(--texte);
  border-bottom-color: var(--or);
}

@media (min-width: 52rem) {
  .entete .enveloppe {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--e6);
    padding-block: var(--e4);
  }
  .nav-ancres { overflow: visible; }
}

/* ---------------------------------------------------------------------
   4. SECTIONS
   ------------------------------------------------------------------ */
section { padding-block: var(--e7); }
@media (min-width: 48rem) { section { padding-block: var(--e8); } }

.section-titre { max-width: 46rem; margin-bottom: var(--e6); }
.section-titre p { color: var(--texte-doux); margin-bottom: 0; }

/* ---------------------------------------------------------------------
   5. HERO

   L'emblème maître d'abord, le texte ensuite : c'est lui qui dit ce
   qu'est cette structure, plus vite qu'une phrase.
   ------------------------------------------------------------------ */
.hero {
  padding-block: var(--e7) var(--e7);
  border-bottom: var(--filet) solid var(--trait);
  background:
    radial-gradient(60rem 32rem at 50% -8rem, rgba(201, 162, 39, 0.10), transparent 70%),
    var(--nuit);
}
.hero .enveloppe {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e5);
}
.hero h1 { margin-bottom: var(--e2); }
.hero .positionnement {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--texte-doux);
  max-width: 34rem;
  margin: 0;
}

/* L'écusson : le SVG garde son fond crème, on l'assume en objet encadré. */
.ecusson {
  display: block;
  background: var(--creme);
  border: 2px solid var(--or-sombre);
  border-radius: var(--rayon-l);
  box-shadow: 0 1px 0 rgba(237, 208, 112, 0.35) inset,
              0 12px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.hero .ecusson { width: min(19rem, 78vw); }
.hero .ecusson img { display: block; width: 100%; }

.hero-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: center;
}
/* ⚠ Sur téléphone les deux boutons s'empilent : centrés avec des largeurs
   différentes, ils se lisent comme deux éléments mal posés. On les aligne
   sur la même largeur — la colonne redevient droite. */
@media (max-width: 34rem) {
  .hero-liens { flex-direction: column; align-items: stretch; }
  .hero-liens .bouton { justify-content: center; }
}

@media (min-width: 56rem) {
  .hero .enveloppe {
    flex-direction: row;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    gap: var(--e8);
  }
  .hero .texte { max-width: 32rem; }
  .hero .hero-liens { justify-content: flex-start; }
  .hero .ecusson { width: 22rem; flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   6. BOUTONS — UNE SEULE FAMILLE
   ------------------------------------------------------------------ */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0.7rem 1.15rem;
  border-radius: var(--rayon);
  border: var(--filet) solid var(--trait-fort);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease;
}
.bouton:hover {
  background: var(--surface-2);
  border-color: var(--or-sombre);
  color: var(--texte);
}
.bouton:active { transform: translateY(1px); }

.bouton.principal {
  background: var(--or);
  border-color: var(--or);
  color: #14202a;
}
.bouton.principal:hover { background: var(--or-clair); border-color: var(--or-clair); color: #14202a; }

/* La flèche des liens sortants : elle dit qu'on quitte le site. */
.bouton .fleche { color: currentColor; opacity: 0.75; }

/* ---------------------------------------------------------------------
   7. CE QUI EXISTE — les deux services en ligne
   ------------------------------------------------------------------ */
.services {
  display: grid;
  gap: var(--e5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.service {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5);
  background: var(--nuit-2);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-l);
}
.service h3 { margin: 0; font-size: 1.35rem; }
.service .domaine {
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  color: var(--texte-doux);
  word-break: break-all;
}
.service p { color: var(--texte-doux); margin: 0; }
.service .bouton { align-self: flex-start; margin-top: auto; }

/* L'étiquette « en ligne aujourd'hui ».

   ⚠ La pastille est décorative : l'information est dans le TEXTE, jamais
   dans la couleur seule. Quelqu'un qui ne distingue pas le vert lit
   « en ligne aujourd'hui » exactement comme les autres. */
.etat {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: var(--filet) solid;
}
.etat::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
/* Les états d'un SERVICE (pilotés par js/site.js depuis /etat/etat.json).

   ⚠ `en-service` est le libellé SERVI DANS LE HTML : neutre, vrai en
   permanence, et affiché tel quel si le script ne tourne pas ou si la sonde
   n'a rien de frais à dire. Les trois autres sont posés par le script.

   ⚠ La couleur ne porte JAMAIS l'information seule : le texte change en même
   temps (« En service », « En ligne », « Service dégradé », « Indisponible »).
   Quelqu'un qui ne distingue pas le vert du rouge lit exactement la même
   chose. */
.etat.en-service   { color: #b9c8d6; border-color: #33506d; background: #14202e; }
.etat.en-ligne     { color: #7ddba4; border-color: #2c5d43; background: #10241a; }
.etat.degrade      { color: #e6c168; border-color: #6b5424; background: #241c0c; }
.etat.indisponible { color: #f0a3aa; border-color: #6b2a30; background: #241013; }

/* Les états d'une DIVISION — un autre sujet, d'autres mots. */
.etat.active   { color: #7ddba4; border-color: #2c5d43; background: #10241a; }
.etat.a-venir  { color: #d8c68d; border-color: #4d4326; background: #221d10; }

/* ---------------------------------------------------------------------
   8. LES SIX DIVISIONS

   Une carte par division, l'écusson en haut. Trois colonnes sur grand
   écran : six divisions se lisent en deux rangées de trois, comme la
   corolle de l'emblème.
   ------------------------------------------------------------------ */
.divisions {
  display: grid;
  gap: var(--e4);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 34rem) { .divisions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .divisions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.division {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--nuit-2);
  border: var(--filet) solid var(--trait);
  border-radius: var(--rayon-l);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.division:hover, .division:focus-within {
  border-color: var(--or-sombre);
  transform: translateY(-2px);
}
.division .ecusson { width: 100%; }
.division .ecusson img { display: block; width: 100%; }
.division h3 { margin: 0; font-size: 1.05rem; }
.division .role { color: var(--texte-doux); font-size: 0.92rem; margin: 0; }
.division .bas { margin-top: auto; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.division a { font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   9. CELESTRIUS

   ⚠ Cette section doit se distinguer : Celestrius n'est PAS une division
   de JaCynth Corp mais une structure sœur. Le fond change, le liseré d'or
   passe à gauche — le lecteur voit qu'il a changé de sujet avant de lire.
   ------------------------------------------------------------------ */
.celestrius {
  background:
    radial-gradient(40rem 20rem at 15% 0%, rgba(201, 162, 39, 0.07), transparent 70%),
    var(--nuit-2);
  border-block: var(--filet) solid var(--trait);
}
.celestrius .enveloppe {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  align-items: flex-start;
}
.celestrius .bloc-texte { border-left: 3px solid var(--or-sombre); padding-left: var(--e4); }
.celestrius p { color: var(--texte-doux); max-width: 42rem; }
.celestrius .logo-celestrius {
  width: min(11rem, 46vw);
  align-self: center;
  flex: 0 0 auto;
}
.bientot {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--texte-doux);
  border: var(--filet) dashed var(--trait-fort);
  border-radius: var(--rayon);
  padding: 0.4rem 0.75rem;
}
@media (min-width: 50rem) {
  .celestrius .enveloppe { flex-direction: row-reverse; align-items: center; gap: var(--e8); }
  .celestrius .logo-celestrius { align-self: auto; }
}

/* ---------------------------------------------------------------------
   10. CONTACT

   ⚠ Le site est ENTIÈREMENT STATIQUE : pas de formulaire, donc pas de règles
   pour les champs, le pot de miel ou les messages de retour. Elles existaient
   dans une version antérieure prévue pour un hébergement mutualisé avec PHP ;
   les garder « au cas où » aurait laissé une centaine de lignes que rien ne
   sélectionne — du poids mort qu'on finit par croire utile.
   ------------------------------------------------------------------ */
/* ⚠ `.bloc-contact` et `.contact-direct` ont disparu avec le pavé qu'elles
   encadraient : un cadre autour d'une seule adresse est du bruit, et deux
   règles qui ne sélectionnent plus rien finissent par passer pour utiles. */
.contact-titre { margin-bottom: var(--e3); }
.adresse-courriel {
  font-family: var(--fonte-mono);
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  word-break: break-word;
  margin: 0;
}

/* Les réseaux, en pied de page. Des liens sortants : ils portent le nom du
   service en texte accessible, jamais l'icône seule. */
.reseaux { display: flex; gap: var(--e3); align-items: center; margin-top: var(--e3); }
.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--rayon);
  border: var(--filet) solid var(--trait);
  background: var(--nuit);
  color: var(--texte-doux);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.reseaux a:hover { color: var(--or-clair); border-color: var(--or-sombre); }
.reseaux svg { width: 19px; height: 19px; display: block; }

/* ---------------------------------------------------------------------
   11. PIED DE PAGE
   ------------------------------------------------------------------ */
.pied {
  border-top: var(--filet) solid var(--trait);
  background: var(--nuit-2);
  padding-block: var(--e6);
  font-size: 0.9rem;
  color: var(--texte-doux);
}
.pied .enveloppe { display: grid; gap: var(--e5); }
@media (min-width: 46rem) {
  .pied .enveloppe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pied h2 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: var(--e3);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.pied .filet-bas {
  border-top: var(--filet) solid var(--trait);
  margin-top: var(--e5);
  padding-top: var(--e4);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   12. PRÉFÉRENCES DU VISITEUR
   ------------------------------------------------------------------ */
@media (prefers-contrast: more) {
  :root {
    --texte-doux: #d3e0ea;
    --trait: #4a6379;
    --trait-fort: #6b87a0;
  }
}

@media print {
  .entete, .nav-ancres, .hero-liens { display: none; }
  body { background: #fff; color: #000; }
  .service, .division, .contact-direct { border-color: #999; }
}