/* ============================================================
   Zesam — feuille de style du site
   ------------------------------------------------------------
   Tout part du monogramme : une porte. Le linteau et le seuil
   forment les barres du Z, la diagonale est un rai de lumière.
   Le site reprend cette architecture — des seuils qu'on
   franchit — plutôt qu'une suite de blocs.
   La palette est celle du SPEC §14.3, sans ajout. « Lumière »
   (#F0997B) ne sert qu'à faire de la lumière, jamais à signaler
   un état : dans une application de sécurité, une teinte chaude
   se lit comme une alerte.
   ============================================================ */

:root {
  /* Palette du SPEC §14.3 */
  --seuil: #26215C;
  --accent: #7F77DD;
  --clair: #CECBF6;
  --lumiere: #F0997B;

  /* L'accent porte mal le petit texte sur fond clair : #7F77DD n'y atteint
     que 3,59 de contraste, sous le seuil de 4,5 exigé. Ce n'est pas un second
     accent — c'est le même violet, assombri du strict nécessaire pour être
     lisible. La règle « un seul accent » vaut sur la teinte, pas sur la
     luminosité, et un texte illisible n'honore aucune charte. */
  --accent-texte: #6A61D0;

  /* Fond des boutons pleins, identique dans les deux thèmes : le contraste du
     texte blanc dessus ne dépend pas du fond de la page. Blanc sur #7F77DD ne
     donnait que 3,76. */
  --bouton-fond: #6A61D0;

  /* Neutres biaisés vers le violet : un gris pur paraîtrait emprunté. */
  --jour: #FAF9FE;
  --papier: #FFFFFF;
  --encre: #17142A;
  --encre-douce: #55506E;
  --trait: rgba(23, 20, 42, 0.12);

  --largeur: 68rem;
  --colonne: 34rem;

  --pas: clamp(3.5rem, 7vw, 6.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jour: #100E1B;
    --papier: #17142A;
    --encre: #F4F2FC;
    --encre-douce: #A9A3C4;
    --trait: rgba(206, 203, 246, 0.16);
    /* Sur fond sombre, l'accent doit au contraire s'éclaircir. */
    --accent-texte: #9A93E6;
  }
}

:root[data-theme="dark"] {
  --jour: #100E1B;
  --papier: #17142A;
  --encre: #F4F2FC;
  --encre-douce: #A9A3C4;
  --trait: rgba(206, 203, 246, 0.16);
  --accent-texte: #9A93E6;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--jour);
  color: var(--encre);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .eyebrow, .lockup, nav a, .bouton {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0; }

a { color: inherit; }

.enveloppe {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}

/* --- Barre haute ------------------------------------------------ */

header.barre {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--jour) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}

header.barre .enveloppe {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.lockup svg { width: 30px; height: 30px; flex: none; }

header.barre nav {
  margin-inline-start: auto;
  display: flex;
  gap: 1.4rem;
  font-size: 0.9rem;
  font-weight: 500;
}

header.barre nav a {
  text-decoration: none;
  color: var(--encre-douce);
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
}

header.barre nav a:hover,
header.barre nav a:focus-visible { color: var(--encre); border-bottom-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Le seuil : l'ouverture de la page -------------------------- */

.seuil {
  position: relative;
  overflow: hidden;
  background: var(--seuil);
  color: #FFFFFF;
  padding-block: clamp(4rem, 10vw, 7.5rem);
}

/* Le rai de lumière du monogramme, agrandi à l'échelle de la page.
   C'est la seule chose que « Lumière » a le droit de faire. */
.seuil::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  background:
    linear-gradient(112deg,
      transparent 34%,
      rgba(240, 153, 123, 0.30) 46%,
      rgba(240, 153, 123, 0.10) 54%,
      transparent 62%);
  pointer-events: none;
}

.seuil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 15% 0%, rgba(127, 119, 221, 0.45), transparent 60%);
  pointer-events: none;
}

.seuil .enveloppe {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 62rem) {
  .seuil .enveloppe { grid-template-columns: 1.15fr 0.85fr; }
}

.seuil p.chapeau {
  max-width: 32rem;
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: var(--clair);
}

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-texte);
}

.seuil .eyebrow { color: var(--clair); opacity: 0.75; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}

.bouton.plein { background: var(--bouton-fond); color: #FFFFFF; }
.bouton.plein:hover { transform: translateY(-1px); background: #7A70DC; }

.bouton.creux { border-color: rgba(255, 255, 255, 0.28); color: #FFFFFF; }
.bouton.creux:hover { border-color: var(--clair); }

.mention {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--clair);
  opacity: 0.72;
}

/* --- La carte, telle qu'elle vit dans l'application ------------- */

.carte {
  position: relative;
  background: rgba(11, 9, 24, 0.55);
  border: 1px solid rgba(127, 119, 221, 0.3);
  border-radius: 22px;
  padding: 2.1rem 1.5rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* La jauge se vide, elle ne se remplit pas : une jauge qui se remplit se lit
   comme un chargement — quelque chose arrive — là où une jauge qui se vide se
   lit comme un temps restant.

   Un simple filet plutôt qu'un contour tracé en SVG : étiré aux dimensions de
   la carte, un rectangle arrondi voit ses angles déformés et son trait déborder
   du bord. Le filet, lui, tient sa place quelle que soit la largeur. */
.carte .jauge {
  position: absolute;
  inset-inline: 1.5rem;
  top: 0.9rem;
  height: 4px;
  border-radius: 999px;
  background: rgba(127, 119, 221, 0.22);
  overflow: hidden;
}

.carte .jauge span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.carte .service {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.carte .compte {
  font-size: 0.85rem;
  color: var(--clair);
  opacity: 0.7;
}

.carte .code {
  display: block;
  margin-top: 0.9rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #FFFFFF;
}

/* Un code se lit de gauche à droite dans toutes les langues : en arabe, sans
   `dir="ltr"`, les deux groupes de chiffres s'échangeaient (« 406 881 » pour
   881 406). Il reste aligné sur le bord de la carte où commence le texte. */
[dir="rtl"] .carte .code { text-align: right; }

.carte .reste {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--clair);
  opacity: 0.7;
}

/* --- Sections, ouvertes par un linteau -------------------------- */

section.pan { padding-block: var(--pas); }

.linteau {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.6rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--trait);
}

.linteau h2 { flex: 1; }

.colonne { max-width: var(--colonne); }

.colonne p + p { margin-top: 1rem; }

.grille {
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.grille h3 { margin-bottom: 0.4rem; }
.grille p { color: var(--encre-douce); font-size: 0.98rem; }

/* --- Ce que l'application ne fait pas --------------------------- */

.refus {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.refus ul { margin: 0; padding-inline-start: 1.1rem; }
.refus li { margin-block: 0.55rem; color: var(--encre-douce); }
.refus li strong { color: var(--encre); }

/* --- Plateformes ------------------------------------------------ */

.plateformes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.jeton {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  color: var(--encre-douce);
}

.jeton.actif { border-color: var(--accent); color: var(--accent-texte); }

/* --- Pied ------------------------------------------------------- */

footer {
  border-top: 1px solid var(--trait);
  padding-block: 2.5rem 3.5rem;
  font-size: 0.9rem;
  color: var(--encre-douce);
}

footer .enveloppe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
}

footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
footer a { text-decoration-color: var(--trait); text-underline-offset: 3px; }
footer a:hover { text-decoration-color: var(--accent); }
footer .droite { margin-inline-start: auto; }

/* --- Pages de texte --------------------------------------------- */

.texte { padding-block: var(--pas); }
.texte h2 { margin-top: 2.75rem; }
.texte h3 { margin-top: 1.75rem; }
.texte p, .texte li { max-width: var(--colonne); color: var(--encre-douce); }
.texte p { margin-top: 0.85rem; }
.texte strong { color: var(--encre); }
.texte ul { padding-inline-start: 1.1rem; }
.texte li { margin-block: 0.4rem; }

.tableau { overflow-x: auto; margin-top: 1.5rem; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.95rem;
}

th, td {
  text-align: start;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}

th {
  font-family: Archivo, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

td { color: var(--encre-douce); }


/* --- Sélecteur de langue ---------------------------------------- */

.langues {
  appearance: none;
  padding: 0.3rem 1.6rem 0.3rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236A61D0' stroke-width='1.6'/%3E%3C/svg%3E")
    no-repeat right 0.6rem center / 10px 6px;
  color: var(--encre-douce);
  font-family: Archivo, sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
}

.langues:hover { border-color: var(--accent); color: var(--encre); }

/* En écriture droite-à-gauche, le chevron passe de l'autre côté. */
[dir="rtl"] .langues {
  padding: 0.3rem 0.6rem 0.3rem 1.6rem;
  background-position: left 0.6rem center;
}

[dir="rtl"] footer .droite,
[dir="rtl"] header.barre nav { margin-inline-start: auto; }