/* Socle : remise a zero raisonnee, typographie, elements de base. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--sima-taille-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--sima-police-texte);
  font-size: var(--sima-corps);
  /* 1,65 tenait la ligne ; 1,75 la fait respirer. Sur une mesure de 68 caracteres, c'est
     l'interligne qui decide si un paragraphe technique se parcourt ou se dechiffre. */
  line-height: 1.75;
  color: var(--sima-texte);
  background: var(--sima-fond);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--sima-police-titre);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--sima-esp-6);
  text-wrap: balance;
}

/*
 * Un titre qui suit un paragraphe a besoin de plus d'air AU-DESSUS que d'en-dessous :
 * c'est ce qui le rattache a ce qu'il annonce plutot qu'a ce qu'il termine. La regle ne
 * touche pas un titre en debut de bloc, qui n'a rien au-dessus de quoi se detacher.
 */
:is(p, ul, ol, table, figure) + :is(h2, h3, h4) {
  margin-top: var(--sima-esp-12);
}

h1 {
  font-size: var(--sima-t1);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--sima-t2);
  font-weight: 600;
}

h3 {
  font-size: var(--sima-t3);
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 768px) {
  h1 {
    font-size: 1.9rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  h3 {
    font-size: 1.3rem;
  }
}

p,
ul,
ol {
  margin: 0 0 var(--sima-esp-6);
}

/* La longueur de ligne est limitee sur le texte courant : au-dela de 68 caracteres,
   l'oeil perd la ligne suivante. */
.prose p,
.prose li {
  max-width: var(--sima-mesure);
}

a {
  color: var(--sima-texte);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--sima-transition);
}

a:hover {
  color: var(--sima-rouge);
}

/* Le focus reste TOUJOURS visible. Le supprimer rend le site inutilisable au clavier,
   et c'est le defaut le plus frequent des themes du commerce. */
:focus-visible {
  outline: 3px solid var(--sima-texte);
  outline-offset: 2px;
  border-radius: 2px;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Un tableau large defile DANS son conteneur : le corps de page ne defile jamais
   horizontalement. */
.table-defilante {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  /* Le fond et la bordure DOIVENT etre poses.
   *
   * Sans eux, le navigateur applique ses couleurs systeme : sur un fond clair cela
   * passait inapercu, le gris d'usine etant proche du blanc. Sur le theme sombre, le
   * champ de recherche sortait en gris moyen sur un fond presque noir - un rectangle
   * clair posee au milieu de l'en-tete, que rien dans la feuille n'expliquait. */
  background-color: var(--sima-fond);
  border-color: var(--sima-bordure);
}

/* Le texte d'invite suit le texte d'appui, dans les deux themes : le gris d'usine du
   navigateur tombe sous le seuil de lisibilite sur fond sombre. */
input::placeholder,
textarea::placeholder {
  color: var(--sima-texte-3);
  opacity: 1;
}

.conteneur {
  width: 100%;
  max-width: var(--sima-largeur-max);
  margin-inline: auto;
  padding-inline: var(--sima-gouttiere);
}

/*
 * Le contenu ne colle pas au pied de page.
 *
 * `main` ne portait aucun style : la derniere section d'une page - la description d'une
 * fiche produit, le plus souvent - se terminait sur le bord du pied, sans respiration.
 * Le pied bascule alors d'un element separe a la suite du texte.
 */
main {
  display: block;
  padding-bottom: var(--sima-esp-24);
}

.conteneur-texte {
  max-width: var(--sima-largeur-texte);
  margin-inline: auto;
}

/*
 * Le rythme vertical des sections.
 *
 * 64 px separaient deux sections sur toutes les tailles d'ecran. Sur un 1 440 px, cela
 * donne une page dense ou rien ne respire entre deux blocs ; sur un telephone, 96 px
 * mangeraient un tiers de l'ecran pour du vide. D'ou les deux paliers.
 */
.section {
  padding-block: var(--sima-esp-12);
}

.section--serree {
  padding-block: var(--sima-esp-8);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--sima-esp-24);
  }

  .section--serree {
    padding-block: var(--sima-esp-16);
  }
}

.section--grise {
  background: var(--sima-fond-2);
}

/*
 * Section d'ambiance : une mise en situation floutee, tenue en fond pendant le
 * defilement.
 *
 * Le fond est pose sur un pseudo-element plutot que sur la section elle-meme, pour deux
 * raisons. Le flou d'un `background` deborderait sur le texte pose dessus, et un
 * `filter` applique a la section flouterait aussi ses enfants. Le pseudo-element est
 * agrandi de 6 % : un flou gaussien depouille les bords, et sans cette echelle on verrait
 * une bande claire sur les quatre cotes.
 *
 * `background-attachment: fixed` suffit a l'effet de parallaxe et ne demande pas une
 * ligne de JavaScript. Il est ignore par iOS, qui affiche alors un fond simplement fixe -
 * degradation acceptable, l'image reste a sa place et le texte reste lisible.
 *
 * Le voile n'est pas un ornement : c'est lui qui garantit le contraste du texte, quelle
 * que soit l'image posee derriere. Le flou seul ne suffirait pas - une image claire
 * floutee reste claire.
 */
.section--ambiance {
  position: relative;
  isolation: isolate;

  /*
   * Le `::before` deborde de 24 px sur les quatre cotes pour cacher les bords depouilles
   * par le flou. Sans cette coupe, ces 24 px sortaient de la page et la faisaient
   * defiler horizontalement a toutes les largeurs - mesure : 414 px de contenu pour une
   * fenetre de 390.
   *
   * `clip` plutot que `hidden` : il coupe sans creer de conteneur de defilement.
   */
  overflow: clip;
  color: var(--sima-blanc);
  background: var(--sima-fond-inverse);
}

.section--ambiance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--ambiance-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /*
   * L'image est assombrie par un filtre, pas par un voile noir pose dessus.
   *
   * Une nappe noire uniforme donnait un rendu terne et plat : elle eteignait justement
   * la couleur qu'on venait chercher. `brightness` fait descendre l'image en gardant ses
   * ecarts, et `saturate` rattrape la desaturation que l'assombrissement entraine.
   */
  filter: blur(7px) brightness(0.48) saturate(1.25);

  /*
   * `inset` negatif, et surtout pas `transform: scale()`.
   *
   * Le debord sert a cacher les bords depouilles par le flou - trois fois le rayon
   * suffit. Une mise a l'echelle faisait la meme chose, mais toute transformation fait
   * de l'element un bloc conteneur, et `background-attachment: fixed` s'y degrade
   * silencieusement en `scroll` : l'effet annonce n'existait tout simplement pas, ni
   * sur Chrome ni sur Firefox. Verifie a la mesure - le cadrage de la bande etait
   * identique a deux positions de defilement eloignees.
   */
  inset: -24px;
}

/*
 * Une teinte d'encre, pas du noir, et concentree au centre.
 *
 * Le degrade radial pose la densite la ou le texte se trouve et relache vers les bords :
 * l'image continue de vivre dans les angles. La teinte reprend `--sima-encre` plutot
 * qu'un noir pur, qui tirait l'ensemble vers le gris sale.
 */
.section--ambiance::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      120% 100% at 50% 50%,
      rgb(22 24 28 / 62%) 0%,
      rgb(22 24 28 / 44%) 55%,
      rgb(22 24 28 / 30%) 100%
    );
}

/*
 * L'ombre porte le texte sans assombrir la section.
 *
 * C'est elle qui permet de garder le voile leger : le contraste local se joue au bord
 * des lettres, la ou il se mesure, plutot qu'en noircissant toute l'image.
 */
.section--ambiance h2,
.section--ambiance p,
.section--ambiance li {
  text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

/*
 * Les liens de texte passent en blanc, les boutons non.
 *
 * Sans le `:not(.bouton)`, un bouton secondaire - fond blanc, texte encre - heritait de
 * cette couleur et devenait blanc sur blanc : invisible, mais toujours cliquable, ce qui
 * est pire qu'absent. Vu en capture sur l'appel de la page d'accueil.
 */
.section--ambiance a:not(.bouton) {
  color: var(--sima-blanc);
}

/*
 * L'anneau de focus est encre par defaut : sur le voile sombre il tombe a 1,1:1, loin
 * des 3:1 exiges. Qui navigue au clavier ne verrait plus ou il se trouve.
 */
.section--ambiance :focus-visible {
  outline-color: var(--sima-blanc);
}

/*
 * Les nuances de gris prevues pour un fond clair ne tiennent pas ici.
 *
 * `.texte-secondaire` et `.texte-appui` sont des gris moyens : poses sur le voile
 * sombre, ils tombent sous le seuil de contraste et le paragraphe devient une tache.
 * Ils passent donc en blanc legerement retenu - la hierarchie se lit a l'opacite, pas
 * a une couleur qui ne s'y prete plus.
 */
.section--ambiance .texte-secondaire,
.section--ambiance .texte-appui {
  color: rgb(255 255 255 / 82%);
}

/*
 * Un fond fixe pendant le defilement est exactement ce que ce reglage demande d'eviter,
 * et c'est aussi ce qui coute le plus cher a repeindre sur une machine modeste.
 */
@media (prefers-reduced-motion: reduce) {
  .section--ambiance::before {
    background-attachment: scroll;
  }
}

/*
 * Les trois fonds, declares ici et non en style inline : la CSP du site n'autorise le
 * style qu'avec un nonce, et une regle inline sur une section serait muette en
 * production sans qu'on le voie en developpement.
 *
 * Un palier par largeur, et non le 1200 pour tout le monde.
 *
 * La premiere version servait le 1200 a tous les ecrans : un telephone de 360 px
 * telechargeait trois images de 1 200 px - 199 Kio, la moitie du poids du premier ecran
 * de l'accueil - pour les afficher floutees a 7 px. Le palier 480 pese 46 Kio pour les
 * trois, soit 77 % de moins sur une image que le flou rend de toute facon indiscernable.
 *
 * Le WebP entre dans la liste : les 12 fichiers etaient produits et jamais servis, faute
 * d'etre declares entre l'AVIF et le JPEG.
 */
.section--ambiance--depot {
  --ambiance-image: image-set(
    url("/visuels/ambiance-depot-480.avif") type("image/avif"),
    url("/visuels/ambiance-depot-480.webp") type("image/webp"),
    url("/visuels/ambiance-depot-480.jpg") type("image/jpeg")
  );
}

.section--ambiance--chantier {
  --ambiance-image: image-set(
    url("/visuels/ambiance-chantier-480.avif") type("image/avif"),
    url("/visuels/ambiance-chantier-480.webp") type("image/webp"),
    url("/visuels/ambiance-chantier-480.jpg") type("image/jpeg")
  );
}

.section--ambiance--parquet {
  --ambiance-image: image-set(
    url("/visuels/ambiance-parquet-fini-480.avif") type("image/avif"),
    url("/visuels/ambiance-parquet-fini-480.webp") type("image/webp"),
    url("/visuels/ambiance-parquet-fini-480.jpg") type("image/jpeg")
  );
}

@media (min-width: 600px) {
  .section--ambiance--depot {
    --ambiance-image: image-set(
    url("/visuels/ambiance-depot-768.avif") type("image/avif"),
    url("/visuels/ambiance-depot-768.webp") type("image/webp"),
    url("/visuels/ambiance-depot-768.jpg") type("image/jpeg")
    );
  }

  .section--ambiance--chantier {
    --ambiance-image: image-set(
    url("/visuels/ambiance-chantier-768.avif") type("image/avif"),
    url("/visuels/ambiance-chantier-768.webp") type("image/webp"),
    url("/visuels/ambiance-chantier-768.jpg") type("image/jpeg")
    );
  }

  .section--ambiance--parquet {
    --ambiance-image: image-set(
    url("/visuels/ambiance-parquet-fini-768.avif") type("image/avif"),
    url("/visuels/ambiance-parquet-fini-768.webp") type("image/webp"),
    url("/visuels/ambiance-parquet-fini-768.jpg") type("image/jpeg")
    );
  }
}

@media (min-width: 1000px) {
  .section--ambiance--depot {
    --ambiance-image: image-set(
    url("/visuels/ambiance-depot-1200.avif") type("image/avif"),
    url("/visuels/ambiance-depot-1200.webp") type("image/webp"),
    url("/visuels/ambiance-depot-1200.jpg") type("image/jpeg")
    );
  }

  .section--ambiance--chantier {
    --ambiance-image: image-set(
    url("/visuels/ambiance-chantier-1200.avif") type("image/avif"),
    url("/visuels/ambiance-chantier-1200.webp") type("image/webp"),
    url("/visuels/ambiance-chantier-1200.jpg") type("image/jpeg")
    );
  }

  .section--ambiance--parquet {
    --ambiance-image: image-set(
    url("/visuels/ambiance-parquet-fini-1200.avif") type("image/avif"),
    url("/visuels/ambiance-parquet-fini-1200.webp") type("image/webp"),
    url("/visuels/ambiance-parquet-fini-1200.jpg") type("image/jpeg")
    );
  }
}

.bande-ambiance {
  min-height: clamp(180px, 26vw, 320px);
}

/*
 * Rien n'y est ecrit : rien n'a donc a etre protege.
 *
 * L'assombrissement des autres sections sert la lisibilite du texte. Ici il ne servirait
 * qu'a eteindre l'image, qui est tout le propos de la bande. Le flou est aussi plus
 * franc : sans texte a lire, l'image peut n'etre qu'une matiere coloree.
 */
.bande-ambiance::before {
  filter: blur(10px) brightness(0.78) saturate(1.3);
}

.bande-ambiance::after {
  background: linear-gradient(
    to bottom,
    rgb(22 24 28 / 34%),
    rgb(22 24 28 / 18%) 50%,
    rgb(22 24 28 / 34%)
  );
}

/* Lien d'evitement : premier element focalisable de la page. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sima-esp-3) var(--sima-esp-4);
  background: var(--sima-fond-inverse);
  color: var(--sima-blanc);
  text-decoration: none;
}

.saut-contenu:focus {
  left: var(--sima-esp-4);
  top: var(--sima-esp-4);
  color: var(--sima-blanc);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.texte-secondaire {
  color: var(--sima-texte-2);
}

.texte-appui {
  color: var(--sima-texte-3);
  font-size: var(--sima-petit);
}

.micro {
  font-size: var(--sima-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sima-texte-3);
}

.chiffres-tabulaires {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Utilitaires ---- */

/*
 * Le strict necessaire pour se passer d'attributs style en ligne.
 *
 * Ils ne sont pas la par gout de l'utilitaire : ils sont la parce que la politique de
 * securite du contenu refuse le style en ligne, et qu'une CSP relachee d'un cran pour
 * garder un margin:0 ne se resserre plus jamais. La liste reste courte et fermee : tout
 * ce qui se repete a vocation a devenir un composant, pas un utilitaire de plus.
 */

.sans-marge {
  margin: 0;
}

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

.aligne-gauche {
  text-align: left;
}

.centre-bloc {
  margin-inline: auto;
}

.centre-flex {
  justify-content: center;
}

.mesure {
  max-width: var(--sima-mesure);
}

.lignes-preservees {
  white-space: pre-line;
}

.lien-nu {
  text-decoration: none;
}

.coins-arrondis {
  border-radius: var(--sima-rayon-carte);
}

.titre-mineur {
  font-size: 1.2rem;
}

/*
 * Les utilitaires d'espacement, et leur classe doublee.
 *
 * `.pastilles espace-dessous-12` ne laissait aucun espace : `.pastilles` declare
 * `margin: 0` dans `composants.css`, chargee apres cette feuille, et a specificite egale
 * c'est la derniere qui gagne. L'utilitaire etait donc inoperant sur tout composant
 * declarant sa propre marge - c'est-a-dire sur presque tous, et sans que rien ne le
 * signale : la classe est bien dans le HTML, elle ne fait rien.
 *
 * La classe doublee met l'utilitaire au-dessus du composant qu'il vient corriger, ce qui
 * est le seul ordre qui ait du sens : on ne pose une marge a la main que pour trancher
 * un cas que le composant ne connait pas.
 *
 * `espace-dessus-6` manquait ici alors que l'accueil s'en sert. Meme silence.
 */
.espace-dessus-3.espace-dessus-3 {
  margin-block: var(--sima-esp-3) 0;
}

.espace-dessus-4.espace-dessus-4 {
  margin-top: var(--sima-esp-4);
}

.espace-dessus-6.espace-dessus-6 {
  margin-top: var(--sima-esp-6);
}

.espace-dessus-8.espace-dessus-8 {
  margin-top: var(--sima-esp-8);
}

.espace-dessus-12.espace-dessus-12 {
  margin-top: var(--sima-esp-12);
}

.espace-dessus-16.espace-dessus-16 {
  margin-top: var(--sima-esp-16);
}

.espace-dessous-3.espace-dessous-3 {
  margin-bottom: var(--sima-esp-3);
}

.espace-dessous-12.espace-dessous-12 {
  margin-bottom: var(--sima-esp-12);
}

.bande-serree {
  padding-block: var(--sima-esp-8);
}

/* Une liste a puces qui garde son retrait sans marge exterieure. */
.liste-retrait {
  margin: 0;
  padding-left: var(--sima-esp-6);
}

/* Suite d'elements sur une ligne, alignes sur leur milieu. */
.ligne-serree {
  display: flex;
  gap: var(--sima-esp-2);
  align-items: center;
}

.liste-en-ligne {
  display: flex;
  gap: var(--sima-esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Un groupe de champs sans le cadre que les navigateurs dessinent par defaut. */
.groupe-nu {
  border: 0;
  padding: 0;
}

/* Le champ de quantite d'une ligne de demande : assez large pour deux chiffres. */
.champ-quantite {
  width: 88px;
  min-height: var(--sima-touche-min);
  text-align: center;
  border: 1px solid var(--sima-bordure);
  border-radius: var(--sima-rayon-champ);
}