/* ============================================================
   instanta — le site public « Vistempos » : le socle
   ============================================================
   RÉÉCRITE LE 23/09/2026 (lot V, V2) d'après `docs/maquettes/maquette-vitrine.html`,
   validée le 07/09. Les blocs propres à une page sont dans `vitrine-blocs.css`,
   les schémas dessinés dans `vitrine-visuels.css`.

   ⚑ AUCUNE COULEUR EN DUR (DEC-013). La maquette en portait TRENTE-DEUX : elle
   redéfinissait les jetons du thème et posait ses propres couleurs hexadécimales
   et translucides… La recopier aurait donné un site dont les couleurs
   cessent de suivre `theme.css` au premier changement de charte, et un thème
   sombre à moitié faux. D'où « réécrit » et non « repris » dans le plan.

   ⚑ ET AUCUN `color-mix()` : DEC-013 le réserve à `theme.css`. Les surfaces
   translucides sur le bleu emploient les jetons prévus pour cela —
   `--entete-contour`, `--entete-survol`. Le thème sombre vient donc
   gratuitement : aucun bloc `prefers-color-scheme` ici.

   ⚑ TROIS APLATISSEMENTS ASSUMÉS : le TEXTE TERTIAIRE devient le secondaire
   (le thème n'en a pas, et inventer un gris serait inventer une couleur) ; les
   rayons de 12 et 16 px deviennent `--rayon` et `--rayon-bulle` (DEC-014).
   ============================================================ */

/* ── La couche d'alias : les noms courts de la maquette, pris dans le thème ──
   Elle existe pour que les règles ci-dessous se lisent comme la maquette, sans
   jamais nommer une couleur. Un seul endroit à relire pour vérifier DEC-013. */
:root {
  --v-principale: var(--couleur-principale);
  --v-principale-texte: var(--couleur-principale-texte);
  --v-fond: var(--fond-page);        --v-surface: var(--couleur-surface);
  --v-creux: var(--fond-creux);         --v-texte: var(--couleur-texte);
  --v-texte-2: var(--couleur-texte-secondaire);
  --v-bordure: var(--couleur-bordure);  --v-bordure-carte: var(--couleur-bordure-carte);
  --v-ombre: var(--ombre-carte);        --v-ombre-haute: var(--ombre-flottante);
  --v-ombre-survol: var(--ombre-survol);

  /* Les largeurs ne sont pas des couleurs : ici, et nulle part ailleurs, pour
     que toutes les bandes s'alignent sur la même colonne. */
  --v-large: 1120px;                    --v-bande: 72px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  color: var(--v-texte);
  background: var(--v-fond);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: var(--graisse-forte); letter-spacing: -0.02em; }
h1 { font-size: 40px; }
h2 { font-size: 27px; }
h3 { font-size: 17px; }
p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* ⚑ LE FOCUS RESTE VISIBLE. Un site public se parcourt aussi au clavier, et le
   masquer pour « faire propre » exclut des gens. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--v-principale);
  outline-offset: 2px;
}

/* ── L'accroche ─────────────────────────────────────────────────────── */

.accroche {
  background: var(--v-principale);
  color: var(--entete-texte); padding: 64px 0 72px;
}

.accroche-in {
  max-width: var(--v-large); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}

.accroche h1 { color: var(--entete-texte); }
.accroche > .accroche-in > div > p { margin-top: 18px; font-size: 17px; max-width: 46ch; }
.accroche-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.accroche-note { margin-top: 18px; font-size: var(--taille-petit); opacity: 0.85; }

/* ── Les bandes ─────────────────────────────────────────────────────── */

.bande { padding: var(--v-bande) 0; }
.bande-creuse { background: var(--v-creux); }
.bande-surface { background: var(--v-surface); border-bottom: 1px solid var(--v-bordure); }

.centre { text-align: center; }
.large.centre { text-align: center; }

.surtitre {
  font-size: var(--taille-etiquette);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-principale);
  margin-bottom: 10px;
}

.chapo { margin-top: 14px; color: var(--v-texte-2); font-size: 16px; max-width: 62ch; }
.centre .chapo, .large.centre .chapo { margin-left: auto; margin-right: auto; }

/* ── Les grilles et les cartes ──────────────────────────────────────── */

.grille { display: grid; gap: 16px; margin-top: 36px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.carte {
  background: var(--v-surface); border: 1px solid var(--v-bordure);
  border-radius: var(--rayon-bulle); padding: 20px; box-shadow: var(--v-ombre);
}

.carte h3 { margin-bottom: 8px; }
.carte p { color: var(--v-texte-2); font-size: var(--taille-texte); }

.carte-lien { text-decoration: none; display: block; transition: box-shadow var(--transition), border-color var(--transition); }
.carte-lien:hover { box-shadow: var(--v-ombre-survol); border-color: var(--v-bordure-carte); }

.numero {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--rayon-petit);
  background: var(--fond-principale-doux);
  color: var(--v-principale);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-texte);
}

.pastille {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--rayon-petit);
  background: var(--fond-principale-doux);
  color: var(--v-principale);
  margin-bottom: 14px;
}

/* ── Les listes à puce plate ────────────────────────────────────────── */

.liste { margin-top: 16px; display: grid; gap: 9px; }
.liste li { display: flex; gap: 10px; color: var(--v-texte-2); font-size: var(--taille-texte); }
.coche { color: var(--v-principale); font-weight: var(--graisse-forte); }

.note {
  margin-top: 40px;
  padding: 14px 16px;
  border-left: 3px solid var(--couleur-attention);
  background: var(--fond-attention);
  border-radius: var(--rayon-petit);
  color: var(--v-texte);
  font-size: var(--taille-petit);
}

/* ── La bande finale, et le pied ────────────────────────────────────── */

.final {
  background: var(--v-principale);
  color: var(--entete-texte); padding: 60px 0; text-align: center;
}
.final h2 { color: var(--entete-texte); }
.final p { margin-top: 14px; opacity: 0.9; }
.final .accroche-btns { justify-content: center; }

.pied { background: var(--v-surface); border-top: 1px solid var(--v-bordure); padding: 22px 0; }
.pied-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: var(--taille-petit); color: var(--v-texte-2); }
.pied-in a { text-decoration: none; }
.pied-in a:hover { color: var(--v-texte); }
/* Les liens légaux, sur leur propre ligne (27/09/2026) : mêlés aux pages du
   site, ils faisaient une rangée de neuf liens illisible au téléphone. */
.pied-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; }


/* ============================================================
   LES ÉCRANS ÉTROITS
   ============================================================
   ⚑ UN SEUL POINT DE BASCULE, À 900 px. La maquette n'en avait aucun — elle se
   regardait sur un ordinateur. Or la moitié des visiteurs arriveront d'un
   téléphone, et une grille de quatre colonnes y devient illisible.
   ============================================================ */

@media (max-width: 900px) {
  h1 { font-size: 30px; }
  h2 { font-size: 23px; }
  .bande { padding: 44px 0; }
  .accroche { padding: 44px 0 52px; }
  .accroche-in { grid-template-columns: 1fr; gap: 28px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  /* ⚑ LA BARRE DE LIENS CEDE LA PLACE AU BOUTON « Menu » — ELLE NE DISPARAIT
     PAS DANS LE VIDE. C'est le defaut que Cowork a trouve le 23/09 : les
     quatre liens etaient simplement masques sous 900 px, et rien ne les
     remplacait. Un visiteur au telephone ne pouvait plus changer de page
     autrement qu'en deroulant jusqu'au pied de page. */
  .menu { display: none; }
  .menu-tel { display: block; }
  /* « Se connecter » passe dans le panneau : la barre n'a pas la largeur de
     trois boutons a 375 px (mesure). Voir le commentaire dans les pages. */
  .actions .btn-clair { display: none; }
  .entete-in { min-height: 56px; gap: 10px; }
  .accroche-btns .btn { flex: 1 1 auto; }

  /* ⚑ L'EN-TÊTE DOIT TENIR À 375 px, et il ne tenait pas : la marque plus deux
     boutons dépassaient de 7 px sur un iPhone SE. Mesuré en émulation
     d'appareil, pas devinné. On resserre les boutons plutôt que d'en cacher
     un : « S'inscrire » est l'action que le site existe pour provoquer. */
  .actions .btn { padding: 0 11px; font-size: var(--taille-petit); }
  .marque { font-size: 15px; }
}

/* ⚑ DEUX POINTS DE BASCULE, ET LE SECOND EST NÉ D'UNE MESURE. À 375 px, un
   `62ch` de chapô et les grands boutons côte à côte tenaient encore de justesse ;
   c'est l'en-tête qui cassait. Plutôt qu'un seul seuil à 900 px qui en ferait
   trop pour une tablette, on ajoute ce qui ne concerne QUE les petits écrans. */
@media (max-width: 420px) {
  h1 { font-size: 27px; }
  .entete-in { padding: 0 14px; }
  .large, .accroche-in, .pied-in { padding: 0 16px; }
  .accroche-btns { flex-direction: column; }
  .accroche-btns .btn { width: 100%; }
}