/* ==========================================================================
   Souche, le site de présentation
   Mêmes jetons que l'outil, échelle plus large (ratio 1,333) parce qu'une page
   de présentation se lit debout et d'une traite, pas les mains dans le cambouis.
   Aucune dépendance réseau : jetons.css, polices/ et images/ sont à côté.
   ========================================================================== */

@import url("jetons.css");

:root {
  /* Échelle de présentation, ratio 1,333, au-dessus de l'échelle de l'outil. */
  --s-1: 1.125rem;   /* 18 px : texte courant du site */
  --s-2: 1.5rem;     /* 24 px : chapô */
  --s-3: 2rem;       /* 32 px : titre de section */
  --s-4: 2.666rem;   /* 42,7 px : titre d'écran présenté */
  --matiere-teinte: oklch(34% 0.05 55);
}

body { font-size: var(--s-1); }

.enveloppe {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--e-5);
}

/* --- La barre du site : discrète, elle ne fait pas le spectacle ---------- */
.barre-site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-5);
  padding-block: var(--e-4);
  border-bottom: var(--filet) solid var(--trait);
  flex-wrap: wrap;
}
.barre-site h1 { font-size: var(--t-2); }
.barre-site nav { display: flex; gap: var(--e-5); font-size: var(--t-0); }

/* ==========================================================================
   L'accueil : le titre matière, l'audace de la page et la seule
   ========================================================================== */

.ouverture { padding-block: var(--e-8) var(--e-7); }

.titre-matiere {
  font-size: clamp(3rem, 11vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin: 0;
  background-image: var(--matiere);
  background-color: var(--matiere-teinte);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center 60%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Sans background-clip, ou sans l'image : le titre reprend l'encre pleine. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .titre-matiere { color: var(--encre); background: none; }
}

.promesse {
  font-size: var(--s-2);
  max-width: 30ch;
  margin-top: var(--e-5);
  line-height: 1.35;
}
.a-qui {
  font-size: var(--s-1);
  color: var(--encre-pale);
  max-width: 56ch;
  margin-top: var(--e-4);
}

/* L'image d'ambiance, fondue vers le fond de page par le bas. Jamais un cadre. */
.matiere-fondue {
  height: 260px;
  margin-block: var(--e-7) var(--e-8);
  background-image: var(--matiere);
  background-size: cover;
  background-position: center 55%;
  mask-image: linear-gradient(to bottom, transparent 0%, black 34%, black 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 34%, black 62%, transparent 100%);
}

/* ==========================================================================
   Les écrans, chacun expliqué en trois cartes.
   Pas de carte blanche arrondie à ombre douce : trois colonnes de papier
   séparées par des perforations, comme trois souches côte à côte.
   ========================================================================== */

.ecran-presente {
  padding-block: var(--e-7);
  border-top: var(--filet) solid var(--trait);
}
.ecran-presente__rang {
  font-family: var(--chiffre);
  font-size: var(--t-00);
  color: var(--encre-tres-pale);
}
.ecran-presente h3 { font-size: var(--s-3); margin-top: var(--e-2); }
.ecran-presente__id {
  font-family: var(--chiffre);
  font-size: var(--t-00);
  /* Le cuivre reste à ce qui demande un geste et aux moments de rédaction :
     l'identifiant d'écran est une référence, pas une action. */
  color: var(--encre-tres-pale);
  margin-top: var(--e-2);
  display: block;
}

.trois {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--e-5);
}
.carte { padding: var(--e-4) var(--e-5) var(--e-4) 0; }
.carte + .carte { padding-left: var(--e-5); }
.carte:not(:last-child) {
  border-right: var(--filet) dashed var(--trait-fort);
  position: relative;
}
.carte:not(:last-child)::after {
  content: "";
  position: absolute; top: 0; bottom: 0; right: -5px; width: 10px;
  background: radial-gradient(circle at 5px 7px, var(--papier) 3.6px, transparent 3.9px);
  background-size: 10px 14px;
}
.carte__quoi {
  display: block;
  font-family: var(--chiffre);
  font-size: var(--t-00);
  color: var(--encre-tres-pale);
  margin-bottom: var(--e-2);
}
.carte p { font-size: var(--t-1); max-width: none; }

@media (max-width: 899px) {
  .trois { grid-template-columns: 1fr; }
  .carte { padding: var(--e-4) 0; border-right: 0 !important; }
  .carte + .carte { padding-left: 0; }
  .carte:not(:last-child) { border-bottom: var(--filet) dashed var(--trait-fort); }
  .carte:not(:last-child)::after {
    top: auto; bottom: -5px; left: 0; right: 0; width: auto; height: 10px;
    background: radial-gradient(circle at 7px 5px, var(--papier) 3.6px, transparent 3.9px);
    background-size: 14px 10px;
  }
}

/* --- Le repère d'un moment d'intelligence artificielle ------------------- */
.moment-ia {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-00);
  padding: 5px var(--e-3);
  border: var(--filet) dashed var(--cuivre-sombre);
  border-radius: var(--rayon-badge);
  color: var(--cuivre-sombre);
  margin-top: var(--e-3);
}
.moment-ia::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  border: var(--filet) dashed currentColor;
}

/* --- L'appel à essayer, une fois en haut, une fois en bas ---------------- */
.essayer { padding-block: var(--e-7); }
.bouton-site {
  display: inline-block;
  font: inherit;
  font-size: var(--s-1);
  font-weight: 700;
  text-decoration: none;
  min-height: var(--cible);
  padding: var(--e-3) var(--e-6);
  border: var(--filet-fort) solid var(--cuivre);
  border-radius: var(--rayon);
  background: var(--cuivre);
  color: var(--papier);
}
.bouton-site--second {
  background: none;
  color: var(--encre);
  border-color: var(--trait-fort);
  border-width: var(--filet);
  font-weight: 400;
}

.pied-site { padding-block: var(--e-6) var(--e-8); }

/* --- Les règles, sur la seconde page ------------------------------------ */
.bloc-regle { padding-block: var(--e-5); border-bottom: var(--filet) solid var(--trait); }
.bloc-regle h3 { font-size: var(--s-2); }
.bloc-regle p { margin-top: var(--e-3); font-size: var(--t-1); max-width: var(--mesure); }
.source {
  display: block;
  margin-top: var(--e-3);
  font-family: var(--chiffre);
  font-size: var(--t-00);
  color: var(--encre-pale);
  overflow-wrap: anywhere;
}
.a-confirmer {
  border-left: var(--filet-fort) solid var(--ardoise);
  background: var(--ardoise-voile);
  padding: var(--e-4) var(--e-5);
  margin-block: var(--e-5);
}

/* ==========================================================================
   Le défilement qui révèle (composant defilement-revele, rethémé)
   La classe n'est posée que si le script tourne et que le mouvement est
   accepté : sans JavaScript, tout est visible d'emblée.
   ========================================================================== */

.avec-revele [data-revele] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--courbe), transform 700ms var(--courbe);
}
.avec-revele [data-revele].vu { opacity: 1; transform: none; }