/* ============================================================================
   VENTILO.IO - COUCHE 2/4 : BASE
   ----------------------------------------------------------------------------
   Le HTML nu : rythme typographique, liens, focus, accessibilité, structure de
   section. Aucune classe de composant ici, uniquement des sélecteurs d'élément
   et les quelques primitives de mise en page dont tout le site se sert.
   ========================================================================== */

/* ── Racine ────────────────────────────────────────────────────────────────
   scroll-behavior est déclaré ici mais neutralisé plus bas pour qui limite les
   animations : un défilement animé non désiré provoque des nausées. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--v-font);
  font-size: var(--v-text-body);
  line-height: var(--v-lh-base);
  color: var(--v-text);
  background: var(--v-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Échelle typographique ─────────────────────────────────────────────────
   Les sept crans validés. Le niveau de titre porte le SENS (plan du document),
   la classe .vs-h* porte l'APPARENCE : un h3 qui doit avoir l'allure d'un h2
   prend .vs-h2, on ne change jamais le niveau pour des raisons visuelles. */
h1, .vs-h1,
h2, .vs-h2,
h3, .vs-h3,
h4, h5, h6 {
  color: var(--v-secondary);
  margin-top: 0;
  text-wrap: balance;          /* évite le mot orphelin en fin de titre */
}

h1, .vs-h1 {
  font-size: var(--v-text-h1);
  line-height: var(--v-lh-tight);
  letter-spacing: var(--v-tracking-h1);
  font-weight: var(--v-weight-black);
}

h2, .vs-h2 {
  font-size: var(--v-text-h2);
  line-height: var(--v-lh-snug);
  letter-spacing: var(--v-tracking-h2);
  font-weight: var(--v-weight-black);
}

h3, .vs-h3 {
  font-size: var(--v-text-h3);
  line-height: var(--v-lh-snug);
  letter-spacing: var(--v-tracking-h3);
  font-weight: var(--v-weight-bold);
}

h4, h5, h6 {
  font-size: var(--v-text-body);
  line-height: var(--v-lh-snug);
  font-weight: var(--v-weight-bold);
}

p { text-wrap: pretty; }

/* Chapeau : la phrase sous un titre. Un seul par bloc. */
.vs-lead {
  font-size: var(--v-text-lead);
  line-height: var(--v-lh-base);
  color: var(--v-muted);
  max-width: var(--v-measure);
}

.vs-muted { color: var(--v-muted); }

/* Sur-titre en petites capitales. Toujours au-dessus d'un titre, jamais seul. */
.vs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-2);
  font-size: var(--v-text-label);
  font-weight: var(--v-weight-bold);
  letter-spacing: var(--v-tracking-label);
  text-transform: uppercase;
  color: var(--v-primary);
}
.vs-eyebrow--pink    { color: var(--v-pink-ink); }
.vs-eyebrow--muted   { color: var(--v-muted); }
.vs-eyebrow--light   { color: var(--v-pink); }            /* sur fond sombre uniquement */
.vs-eyebrow--on-dark { color: var(--v-on-dark-muted); }   /* sur fond sombre, neutre */

/* ── Largeurs ──────────────────────────────────────────────────────────────
   Deux familles, deux unités, deux usages.

   En ch, pour du TEXTE : la largeur suit la taille de la police, donc la ligne
   garde le bon nombre de signes quel que soit le corps.
   En rem, pour un CONTENEUR : la largeur d'un bloc ne dépend pas de sa police.

   Quatre crans en rem, pas un de plus. Toute valeur intermédiaire trouvée dans
   une page se ramène au cran le plus proche : c'est ce qui remplace les
   style="max-width:XXrem" qui traînaient partout. */
.vs-measure       { max-width: var(--v-measure); }        /* 65ch, texte courant */
.vs-measure-tight { max-width: var(--v-measure-tight); }  /* 48ch, chapeau      */

.vs-measure-sm { max-width: 32rem; }
.vs-measure-md { max-width: 44rem; }
.vs-measure-lg { max-width: 52rem; }
.vs-measure-xl { max-width: 64rem; }

/* ── Trois utilitaires de texte, et trois seulement ────────────────────────
   Au-delà, c'est un composant qui manque, pas un utilitaire. */
.vs-ink     { color: var(--v-secondary); }   /* titre ou terme mis en avant */
.vs-accent  { color: var(--v-primary); }     /* valeur saillante dans une phrase */
.vs-text-sm { font-size: var(--v-text-sm); } /* mention, aide, note */

/* ── Liens ─────────────────────────────────────────────────────────────────
   Un lien dans du texte est souligné. Un lien qui est un bouton ou une entrée
   de menu ne l'est pas : il porte alors une classe de composant. */
a { color: var(--v-primary); }
a:hover { color: var(--v-primary-hover); }

/* ── Focus ─────────────────────────────────────────────────────────────────
   RÈGLE NON NÉGOCIABLE : aucune feuille de ce site n'a le droit d'écrire
   outline:none ou de neutraliser cet anneau. C'est la seule chose qui indique
   à une navigation clavier où elle se trouve. Le sélecteur :focus-visible ne
   l'affiche qu'au clavier, donc il ne gêne pas la souris. */
:focus-visible {
  outline: 3px solid rgba(78, 66, 106, .35);
  outline-offset: var(--v-focus-offset);
  border-radius: var(--v-radius-xs);
}
/* Sur fond sombre l'anneau violet disparaît : on le passe en blanc. */
.vs-hero :focus-visible,
.vs-cta  :focus-visible,
.vs-band :focus-visible,
.vs-footer :focus-visible {
  outline-color: rgba(255, 255, 255, .9);
}

/* ── Icônes ────────────────────────────────────────────────────────────────
   Un seul registre sur tout le site : Solar « line duotone » (voir icon() dans
   bootstrap.php et partials/icons.php). Les tracés sont inlinés en SVG, il n'y
   a aucune police d'icônes à charger.

   Le SVG se comporte comme le glyphe qu'il remplace : 1em de côté, donc réglé
   par le font-size du parent, et en currentColor, donc de la couleur du texte.
   L'alignement optique est le même que celui d'une police d'icônes. */
.vs-ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  fill: currentColor;
  color: currentColor;
}

/* ── Lien d'évitement ──────────────────────────────────────────────────────
   Premier élément focusable de la page : saute la navigation. */
.vs-skip-link {
  position: absolute;
  top: var(--v-space-2);
  left: var(--v-space-2);
  z-index: var(--v-z-skip);
  padding: var(--v-space-2) var(--v-space-4);
  border-radius: var(--v-radius-sm);
  background: var(--v-primary);
  color: var(--v-on-dark);
  font-weight: var(--v-weight-semibold);
  text-decoration: none;
}

/* ── Section ───────────────────────────────────────────────────────────────
   L'unité de rythme vertical de la page.

   RÈGLE DE SURFACE, la plus importante du système. Les cartes n'ont ni
   bordure ni ombre : seul le contraste de fond les détoure. Donc une carte
   prend TOUJOURS le fond opposé à celui de sa section.

       .vs-section            blanche  ->  .vs-card--tinted
       .vs-section--tinted    teintée  ->  .vs-card

   Sur une page, les sections alternent, ce qui donne son rythme au défilement
   sans qu'aucun trait ne soit nécessaire.

   RYTHME VERTICAL : toute la respiration vient de --v-section-y, appliqué en
   haut ET en bas de chaque bloc de page. Deux blocs voisins donnent donc
   toujours le même écart, deux fois cette valeur. Aucun bloc n'a le droit
   d'annuler l'un de ses cotés : une exception suffit à casser le rythme de
   toute la page. */
.vs-section {
  padding-block: var(--v-section-y);
  background: var(--v-surface);
  /* Une composition interne a le droit de sortir du conteneur ; la PAGE, elle,
     ne doit jamais defiler horizontalement. clip et non hidden : hidden creerait
     un conteneur de defilement et casserait le position:sticky de l'en-tete. */
  overflow-x: clip;
}
.vs-section--tinted { background: var(--v-bg); }
.vs-section--dark   { background: var(--v-secondary); color: var(--v-on-dark); }
.vs-section--lg     { padding-block: var(--v-section-y-lg); }
/* DERNIER BLOC AVANT LE PIED DE PAGE. Entre deux sections, l'ecart vaut deux
   fois --v-section-y : les deux paddings s'additionnent. Contre le footer il
   n'y a rien a additionner (le footer est sombre, sa bordure haute est un
   trait net et non une transition), donc le dernier bloc n'offrait que la
   moitie de l'ecart utilise partout ailleurs et se retrouvait serre. Ce
   supplement le remet au niveau du rythme de la page ; il n'annule aucun cote
   et ne change rien entre deux sections. */
main > section:last-of-type { padding-bottom: var(--v-space-24); }

/* Section dont le dernier bloc doit TOUCHER le pied de page : un visuel qui
   ferme la page, par exemple. Selecteur qualifie par `main > section` a dessein,
   sinon la regle ci-dessus (0,1,1) l'emporte sur une simple classe (0,1,0) et
   les 96px reviennent. A n'utiliser que dans ce cas : partout ailleurs, le
   padding bas est ce qui tient le rythme vertical du site. */
main > section.vs-section--flush { padding-bottom: 0; }

/* En-tête de section : sur-titre, titre, chapeau. Centré par défaut, la
   variante --start l'aligne à gauche. */
.vs-section__head {
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: var(--v-space-10);
  text-align: center;
}
.vs-section__head--wide  { max-width: 64rem; }
/* Ecart sous le chapeau CALE SUR LA SECTION : il vaut son padding vertical,
   donc exactement le vide qui separe le dernier contenu de la fin de section.
   Le chapeau et le bas de bloc respirent alors pareil. */
.vs-section__head--loose { margin-bottom: var(--v-section-y); }
.vs-section__head--start { margin-inline: 0; text-align: left; }
.vs-section__head > * + * { margin-top: var(--v-space-3); }
.vs-section__head > :last-child { margin-bottom: 0; }
.vs-section__head .vs-lead { margin-inline: auto; }
.vs-section__head--start .vs-lead { margin-inline: 0; }

/* Ancre : le titre visé doit se poser SOUS l'en-tête collant, jamais derrière.
   La marge est calée sur la hauteur réelle de l'en-tête, et élargie quand le
   menu passe sur deux lignes. */
section[id],
[id].vs-anchor { scroll-margin-top: 100px; }
@media (min-width: 992px) and (max-width: 1399.98px) {
  section[id],
  [id].vs-anchor { scroll-margin-top: 140px; }
}

/* ── Séparateur ────────────────────────────────────────────────────────────
   Le filet est le SEUL usage légitime de --v-border. Il ne sert jamais à
   entourer une carte. */
.vs-rule {
  border: 0;
  border-top: 1px solid var(--v-border);
  margin-block: var(--v-space-5);
  opacity: 1;
}

/* ── Mouvement réduit ──────────────────────────────────────────────────────
   Garde globale. Toute animation ajoutée au site est couverte par cette règle
   sans avoir à y penser. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}