/* MILLÉSIME SANTÉ — socle : reset, typographie, garde-fous.
 *
 * Ce fichier est ecrit a la main. Les valeurs viennent toutes de tokens.css,
 * qui est genere : aucune couleur, aucune taille, aucun rayon en dur ici.
 */

* { box-sizing: border-box; }

/* Toute regle d'auteur `display:` bat la regle `[hidden] { display: none }` de
 * la feuille du navigateur, qui est de moindre priorite. Sans ce garde-fou, un
 * element muni d'un `display:` explicite reste visible malgre `hidden` — c'est
 * ainsi que l'ecran de chargement recouvrait l'application entiere alors
 * qu'elle etait chargee et fonctionnelle. */
[hidden] { display: none !important; }

/* Accès et lecture communs aux deux interfaces. */
.aller-contenu {
  position: fixed; top: .5rem; left: .5rem; z-index: 1000;
  transform: translateY(-200%); padding: .75rem 1rem;
  background: var(--md-sys-color-surface); color: var(--md-sys-color-primary);
  border: 2px solid currentColor; border-radius: var(--md-sys-shape-corner-small);
}
.aller-contenu:focus { transform: none; }
.lecture-nav {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .75rem 0; margin: .5rem 0 1.25rem;
}
.lecture-nav button {
  min-height: 44px; padding: .5rem .9rem; font: inherit;
  color: var(--md-sys-color-primary); cursor: pointer;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
}
.lecture-nav button:hover { background: var(--md-sys-color-primary-container); }
.ecran h2 { scroll-margin-top: 11rem; }
.rapport-plan {
  align-self: start; padding: 1.25rem; border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
}
.rapport-plan h3 { font-size: 1.125rem; text-transform: none; letter-spacing: normal; }
.rapport-plan li { padding: .6rem 0; }
.rapport-dialogue .rapport-champ input, .rapport-dialogue .rapport-champ textarea { min-height: 44px; }
.rapport-dialogue .rapport-formulaire .note { max-width: 60ch; line-height: 1.5; }
.devis-statut:not(:empty) { padding: .85rem; border: 1px solid currentColor; border-radius: .75rem; }
.devis-statut:focus { outline: 2px solid currentColor; outline-offset: 3px; }
@media (min-width: 701px) {
  .rapport-dialogue .rapport-formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rapport-formulaire > h4, .rapport-formulaire > p,
  .rapport-formulaire > label:has(textarea), .rapport-formulaire > label:has(input[type="email"]),
  .rapport-formulaire > button { grid-column: 1 / -1; }
}
@media print { .lecture-nav, .aller-contenu { display: none !important; } }

/* `html` garde le rem du navigateur, et SEUL `body` porte la taille de texte.
 *
 * Poser `font-size` en `rem` sur `html` redefinit le rem : il valait alors
 * 14 px et non 16, et comme `body` reprenait la meme declaration, la reduction
 * s'appliquait deux fois. Tout le type scale etait contracte de 12,5 % — corps
 * rendu a 12,25 px au lieu de 14, en-tetes de colonne a 10,5 au lieu de 12,
 * graduations SVG a 9,63 px au lieu de 11, c'est-a-dire sous le plancher de
 * lisibilite. Ne pas remettre de `font-size` sur `html`. */
html { font-size: 100%; }

/* BARRES DE DEFILEMENT — reservees, visibles, et assez larges pour etre prises.
 *
 * Deux defauts constates a l'usage, et ce sont deux defauts distincts.
 *
 * 1. LA BARRE DISPARAISSAIT A CHAQUE ACTION. Chaque changement d'etat redessine
 *    l'ecran entier ; quand le nouveau contenu est plus court, la page cesse de
 *    depasser, la barre s'efface, et TOUTE LA MISE EN PAGE SE DECALE de sa
 *    largeur. Le clic suivant retombe a cote. `scrollbar-gutter: stable`
 *    reserve la gouttiere une fois pour toutes : la barre peut aller et venir,
 *    la largeur utile ne bouge plus.
 *
 * 2. ELLE ETAIT INSAISISSABLE. La barre fine par defaut de Chrome en mode
 *    sombre fait quelques pixels et se confond avec le fond. On la reprend :
 *    largeur franche, curseur contraste, et un survol qui l'affirme. */
html {
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: var(--md-sys-color-outline) transparent;
}
* { scrollbar-color: var(--md-sys-color-outline) transparent; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  /* La bordure transparente rogne le curseur sans reduire la zone
   * cliquable : on garde 12 px a viser pour 6 px dessines. */
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-primary);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--vs-plan);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-famille);
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  /* Un element de grille vaut `min-width: auto` : il refuse de devenir plus
   * etroit que son contenu. Sans les `min-width: 0` de composants.css, le
   * tableau de 14 colonnes elargit son panneau au-dela du viewport, et
   * `overflow-x: hidden` rend alors la partie hors champ INATTEIGNABLE au lieu
   * de la faire defiler. Les deux vont ensemble. */
  overflow-x: hidden;
}

/* Tout chiffre comparable s'aligne verticalement. Pose ici plutot que
 * composant par composant : un futur tableau en herite sans y penser. */
table, .tuile .valeur, .vs-bh-valeur, .vs-infobulle, input, select {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- typographie */

h1, h2, h3 { margin: 0 0 var(--md-sys-spacing-2); }

h1 {
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line);
  font-weight: var(--md-sys-typescale-title-small-weight);
  letter-spacing: .01em;
}

h2 {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: -.01em;
}

/* Material n'a pas de role « sur-titre » : label-medium en est le plus proche. */
h3 {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

p { margin: 0 0 var(--md-sys-spacing-2); }

a { color: var(--md-sys-color-primary); }

button, select, input, textarea {
  font: inherit;
  color: inherit;
  font-variant-numeric: inherit;
}

code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  font-size: .9em;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 0 var(--md-sys-spacing-1);
}

/* ------------------------------------------------------ focus et etats */

/* Un anneau de focus visible partout. La couche d'etat a 10 % d'opacite ne
 * suffit pas a signaler le focus au sens de l'accessibilite : elle s'ajoute a
 * l'anneau, elle ne le remplace pas. */
:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Couche d'etat Material : surcouche de `currentColor`, jamais substitution du
 * fond. C'est ce qui permet a un element de garder sa couleur propre tout en
 * repondant au survol. */
.etat {
  position: relative;
  isolation: isolate;
}
.etat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short3)
              var(--md-sys-motion-easing-standard);
}
.etat:hover::after { opacity: var(--md-sys-state-hover-opacity); }
.etat:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }
.etat:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.etat:disabled::after,
.etat[aria-disabled="true"]::after { opacity: 0; }

/* Contenu reserve aux lecteurs d'ecran : legende de tableau, libelle de
 * contexte. Retire du flux visuel sans etre retire de l'arbre d'accessibilite,
 * ce que ferait `display: none`. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Etend une cible de clic sous le minimum de 24 px sans grossir le visuel. */
.cible-etendue { position: relative; }
.cible-etendue::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--vs-cible-min);
  height: var(--vs-cible-min);
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------ mouvement */

/* Toute animation introduite doit disparaitre ici. L'ancienne barre de
 * chargement n'etait protegee par aucune requete media : elle l'est desormais. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}