/* Structures propres a chaque page : en-tete, pied, accueil, famille, fiche. */

/* ----------------------------------------------------------------- En-tete ---- */

.entete {
  border-bottom: 1px solid var(--sima-bordure);
  background: var(--sima-fond);
  position: sticky;
  top: 0;
  z-index: 40;
}

.entete__haut {
  display: flex;
  align-items: center;
  gap: var(--sima-esp-6);
  padding-block: var(--sima-esp-4);
}

.entete__logo {
  flex: none;
}

.entete__logo img,
.entete__logo svg {
  height: 44px;
  width: auto;
}

/*
 * `min-width: 0` sur le champ de recherche et sur son entree.
 *
 * Un enfant de flex refuse par defaut de descendre sous la taille de son contenu, et le
 * bouton « Rechercher » plus le placeholder faisaient un plancher de plusieurs centaines de
 * pixels. L'en-tete debordait donc de la fenetre au lieu de se resserrer, et c'est le
 * selecteur de langue - le dernier de la ligne - qui sortait de l'ecran.
 *
 * C'est la recherche qui doit ceder : elle est la seule des trois a pouvoir le faire sans
 * rien perdre.
 */
.entete__recherche {
  flex: 1 1 0;
  min-width: 0;
  max-width: 460px;
  display: flex;
  gap: var(--sima-esp-2);
}

.entete__recherche input {
  flex: 1 1 0;
  /*
   * Un plancher, malgre le `min-width: 0` du conteneur.
   *
   * Le conteneur doit pouvoir descendre sous la taille de son contenu, sinon l'en-tete
   * deborde de la fenetre. Le CHAMP, lui, ne doit pas : reduit a quelques caracteres, il
   * ne se lit plus comme un champ de recherche, et l'invite qui s'y trouve - une vraie
   * reference du catalogue - n'apprend plus rien. L'arrivee de l'interrupteur de theme
   * dans l'en-tete l'avait ramene a « Bande ».
   *
   * 12ch laisse passer « Bande 200x750 ». En dessous de 1024 px, la barre se reorganise
   * de toute facon et cette regle ne joue plus.
   */
  min-width: 12ch;
  min-height: var(--sima-touche-min);
  padding: var(--sima-esp-2) var(--sima-esp-3);
  border: 1px solid var(--sima-bordure);
  border-radius: var(--sima-rayon-champ);
}

.entete__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  /* Resserre depuis 16 px : l'interrupteur de theme est un element de plus sur une ligne
     qui etait deja pleine, et c'est la recherche qui payait la difference. */
  gap: var(--sima-esp-3);
}

/*
 * Le selecteur de langue ne se comprime pas.
 *
 * Ses quatre positions ont une largeur fixe et son curseur se cale dessus : reduit, il
 * empilait les drapeaux les uns sur les autres et laissait « LB » deborder de la pilule.
 *
 * La regle ne vise que lui. Posee sur tous les enfants, elle interdisait au telephone et
 * au bouton de demande de ceder quoi que ce soit, et l'en-tete debordait de 538 px dans
 * une fenetre de 320.
 */
.entete__actions > .selecteur-langue {
  flex: none;
}

/* Le telephone reste le canal naturel de ce metier : il est mis en avant, pas cache. */
.entete__telephone {
  display: inline-flex;
  align-items: center;
  gap: var(--sima-esp-2);
  min-height: var(--sima-touche-min);
  font-family: var(--sima-police-titre);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.entete__demande {
  position: relative;
}

.entete__compteur {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 10px;
  background: var(--sima-rouge);
  color: var(--sima-blanc);
  font-size: var(--sima-micro);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navigation {
  border-top: 1px solid var(--sima-bordure);
}

/*
 * Les entrees se centrent sur la largeur du conteneur.
 *
 * Alignees a gauche, elles laissaient les deux tiers de la barre vides des que le site
 * s'est elargi : six familles ne remplissent pas 90 % d'un ecran d'atelier, et la barre
 * se lisait comme un debut de ligne inacheve.
 */
.navigation ul {
  display: flex;
  flex-wrap: wrap;
  /*
   * `safe center` et non `center`.
   *
   * Sous 1024 px, le media query ci-dessous passe la barre en `overflow-x: auto` et
   * `flex-wrap: nowrap`. Un conteneur centre qui deborde deborde des DEUX cotes, et la
   * partie gauche n'est atteignable par aucun defilement : `scrollLeft` reste a 0. A
   * 390 px, « Machines » se trouvait a -224 px, hors d'atteinte.
   *
   * `safe` centre tant que tout tient, et bascule sur `flex-start` des que ca deborde.
   */
  justify-content: safe center;
  gap: var(--sima-esp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sima-touche-min);
  font-family: var(--sima-police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}

/*
 * Le catalogue papier se distingue des familles : ce n'est pas une rubrique du site, c'est
 * un fichier de 23 Mo qui part sur la connexion du visiteur. Il ouvre la barre, en retrait
 * de couleur, avec son poids annonce.
 */
.navigation__catalogue a {
  gap: var(--sima-esp-2);
  color: var(--sima-texte-2);
  font-size: 1rem;
}

.navigation__catalogue .texte-appui {
  font-size: var(--sima-micro);
  font-weight: 400;
}

.navigation a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--sima-rouge);
}

@media (max-width: 1024px) {
  .entete__haut {
    flex-wrap: wrap;
    gap: var(--sima-esp-3);
  }

  .entete__recherche {
    order: 3;
    max-width: none;
    width: 100%;
  }

  .entete__telephone {
    font-size: 1.1rem;
  }

  .navigation ul {
    gap: var(--sima-esp-4);
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--sima-esp-2);
  }

  .navigation a {
    white-space: nowrap;
    font-size: 1rem;
  }

  /*
   * Le bouton de recherche se reduit a sa loupe.
   *
   * Son intitule lui donnait un plancher de 174 px que rien ne pouvait reduire, et c'est
   * l'en-tete entier qui debordait de la fenetre pour le loger. Le texte passe hors de
   * l'ecran sans quitter l'arbre d'accessibilite : le bouton garde son nom.
   */
  .entete__recherche .bouton span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .entete__recherche .bouton {
    padding-inline: var(--sima-esp-4);
  }
}

@media (max-width: 700px) {
  /*
   * Le numero de telephone laisse la place a son icone.
   *
   * Le telephone reste le canal naturel de ce metier et il est mis en avant partout
   * ailleurs. Sur un ecran de 390 px, l'ecrire en toutes lettres poussait le selecteur de
   * langue hors de la fenetre - or l'icone, elle, appelle d'un doigt. Le numero reste dans
   * l'arbre d'accessibilite et sur toutes les autres tailles.
   */
  .entete__telephone span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .entete__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------------------- Pied ---- */

/*
 * Aucune marge au-dessus.
 *
 * La derniere section de l'accueil est grise : les 96 px de blanc qui separaient ce gris
 * de l'encre du pied le faisaient paraitre decroche de la page, comme un bloc rapporte.
 * Le pied doit fermer la page, pas flotter en dessous.
 */
.pied {
  margin-top: 0;
  padding-block: 80px 40px;
  background: var(--sima-fond-inverse);
  color: var(--sima-gris-300);

  /* Le gris d'appui est calibre pour du texte sombre sur fond clair. Sur l'encre du
     pied, il faut l'inverse : plus clair que le fond, et d'assez loin. Le ROLE est
     redefini ici plutot que chaque regle - toute la zone en herite, dans les deux
     themes, puisque le pied est sombre des deux cotes. */
  --sima-texte-3: #9aa1aa;
  --sima-texte-2: var(--sima-gris-300);
  --sima-texte: var(--sima-blanc);
  --sima-bordure: #333941;

  /* Les lettres du logo restent blanches ici : le pied ne s'eclaircit jamais. */
  --sima-logo-texte: var(--sima-blanc);
}

.pied a {
  color: var(--sima-gris-300);
}

.pied a:hover {
  color: var(--sima-blanc);
}

/*
 * Colonnes inegales.
 *
 * A largeur egale, le bloc d'identite - raison sociale, baseline, adresse - occupait
 * autant de place qu'une liste de quatre liens. Quatre colonnes molles, aucun point
 * d'entree pour le regard.
 */
.pied__grille {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 56px;
  row-gap: 40px;
}

@media (min-width: 900px) {
  .pied__grille {
    grid-template-columns: 2.2fr 1.4fr 1fr 1fr;
  }
}

.pied__logo {
  display: block;
  height: 33px;
  width: auto;
  margin-bottom: var(--sima-esp-4);
}

.pied__adresse {
  color: var(--sima-texte-3);
}

/*
 * Les intitules de colonne en micro-capitales.
 *
 * A 1,15 rem en Barlow Condensed, ils faisaient exactement la taille des liens qu'ils
 * annoncaient : quatre titres invisibles au milieu de leurs propres listes. Un intitule
 * de colonne n'a pas besoin d'etre gros, il a besoin d'etre DIFFERENT.
 */
.pied__intitule {
  font-family: var(--sima-police-texte);
  font-size: var(--sima-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sima-texte-3);
  margin: 0 0 var(--sima-esp-4);
}

/* Le second point de conversion d'un site sans prix : il doit se voir de loin. */
.pied__telephone {
  display: inline-block;
  font-family: var(--sima-police-titre);
  font-size: var(--sima-t3);
  font-weight: 700;
  line-height: 1.1;
  color: var(--sima-blanc);
  text-decoration: none;
  margin-bottom: var(--sima-esp-3);
}

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

.pied__liens {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sima-esp-2);
}

.pied__liens--enligne {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--sima-esp-6);
  row-gap: var(--sima-esp-2);
}

.pied__legal {
  margin-top: var(--sima-esp-12);
  padding-top: var(--sima-esp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sima-esp-4);
  justify-content: space-between;
  font-size: var(--sima-petit);
}

/*
 * La ligne de l'atelier : coeur a gauche, signature au centre, version a droite.
 *
 * Trois colonnes egales et non un `space-between` : avec `space-between`, la signature
 * centrale se decale des que la version change de longueur, et la ligne parait bancale
 * d'une page a l'autre.
 */
/*
 * Trois colonnes : l'atelier a gauche, la mention de droits au centre, la version et
 * l'editeur a droite.
 *
 * La mention de droits vivait au-dessus, dans le bloc des liens legaux, ou elle se lisait
 * comme une note de bas de colonne. Au centre de cette ligne, elle dit ce qu'elle est :
 * la signature du site.
 *
 * Les colonnes laterales portent `1fr` et la centrale se dimensionne sur son texte, qui
 * est le plus long des trois. `minmax(0, 1fr)` empeche les laterales de deborder plutot
 * que de se replier.
 */
.pied__signature {
  margin-top: var(--sima-esp-6);
  padding-top: var(--sima-esp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sima-esp-4);
  font-size: var(--sima-micro);
  color: var(--sima-texte-3);
}

.pied__droits {
  text-align: center;
  text-wrap: balance;
}

.pied__signature > :last-child {
  text-align: right;
}

.pied__signature code {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: inherit;
  color: var(--sima-texte-3);
}

@media (max-width: 599px) {
  .pied__signature {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .pied__signature > :last-child {
    text-align: center;
  }
}

/* ---------------------------------------------------------------- Accueil ---- */

/*
 * Pas de carrousel : c'est lui qui produisait le LCP de 12,1 s sur l'ancien site, et
 * c'est la premiere cause de depart immediat sur mobile.
 */
.bandeau {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sima-esp-16);
  align-items: center;
  padding-block: var(--sima-esp-24);
}

.bandeau h1 {
  margin-bottom: var(--sima-esp-4);
}

.bandeau__accroche {
  font-size: var(--sima-corps-large);
  color: var(--sima-texte-2);
  max-width: 46ch;
  margin-bottom: var(--sima-esp-8);
}

.bandeau__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sima-esp-4);
}

/*
 * Le bandeau porte desormais une photographie d'ambiance panoramique, et non plus une
 * vignette de produit : le rapport passe de 4:3 a 3:2, celui du maitre. Recadrer une
 * scene panoramique au format d'une vignette de catalogue en coupait les bords, la ou
 * l'interet de l'image est justement la profondeur de la piece.
 */
.bandeau__visuel img {
  display: block;
  width: 100%;
  border-radius: var(--sima-rayon-carte);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sima-fond-2);
}

@media (max-width: 1024px) {
  .bandeau {
    grid-template-columns: 1fr;
    gap: var(--sima-esp-8);
    padding-block: var(--sima-esp-12);
  }
}

.tuiles {
  display: grid;
  /* Piste flexible, carte plafonnee : voir la note de `.grille-produits`. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--sima-esp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tuile {
  max-inline-size: 340px;
  margin-inline: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sima-esp-2);
  padding: var(--sima-esp-6);
  border: 1px solid var(--sima-bordure);
  border-radius: var(--sima-rayon-carte);
  background: var(--sima-fond);
  transition:
    border-color var(--sima-transition),
    box-shadow var(--sima-transition);
}

.tuile:hover {
  border-color: var(--sima-acier);
  box-shadow: var(--sima-ombre-2);
}

.tuile h3 {
  margin: 0;
}

.tuile h3 a {
  text-decoration: none;
}

.tuile h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/*
 * Tuile illustree.
 *
 * L'image vient a fleur de bordure : le rembourrage descend donc dans `.tuile__corps`,
 * sinon la photographie flotterait au milieu d'un cadre blanc. `overflow: hidden` est ce
 * qui lui fait suivre l'arrondi du cadre.
 */
.tuile__corps {
  display: flex;
  flex-direction: column;
  gap: var(--sima-esp-2);
}

.tuile--illustree {
  padding: 0;
  overflow: hidden;
}

.tuile--illustree .tuile__corps {
  padding: var(--sima-esp-6);
}

.tuile__visuel {
  background: var(--sima-fond-2);
  overflow: hidden;
}

.tuile__visuel img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--sima-transition);
}

/*
 * Le leger rapprochement au survol dit que la tuile entiere est cliquable - c'est la
 * seule animation de la page. `prefers-reduced-motion` ramene `--sima-transition` a 0 ms,
 * ce qui supprime le mouvement sans supprimer l'etat.
 */
.tuile:hover .tuile__visuel img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .tuile:hover .tuile__visuel img {
    transform: none;
  }
}

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sima-esp-4);
  margin-bottom: var(--sima-esp-12);
}

.entete-section h2 {
  margin: 0;
}

/* ----------------------------------------------------------------- Famille ---- */

.famille {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sima-esp-12);
  align-items: start;
}

@media (max-width: 1024px) {
  .famille {
    grid-template-columns: 1fr;
    gap: var(--sima-esp-8);
  }
}

.filtres {
  border: 1px solid var(--sima-bordure);
  border-radius: var(--sima-rayon-carte);
  padding: var(--sima-esp-6);
  position: sticky;
  top: 140px;
}

@media (max-width: 1024px) {
  .filtres {
    position: static;
  }
}

.filtres h2 {
  font-size: 1.2rem;
  margin-bottom: var(--sima-esp-4);
}

.filtres fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sima-esp-6);
}

.filtres legend {
  font-size: var(--sima-petit);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--sima-esp-2);
}

.filtres__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sima-esp-2);
}

.filtres__option {
  display: inline-flex;
  align-items: center;
  gap: var(--sima-esp-2);
  min-height: 36px;
  padding: var(--sima-esp-1) var(--sima-esp-3);
  border: 1px solid var(--sima-bordure);
  border-radius: var(--sima-rayon-champ);
  font-size: var(--sima-petit);
  cursor: pointer;
}

.filtres__option input {
  width: 18px;
  height: 18px;
}

.filtres__option:has(input:checked) {
  background: var(--sima-acier);
  border-color: var(--sima-acier);
  color: var(--sima-blanc);
}

/* L'introduction en tete est ce qui permet a la page de se positionner. L'ancien site
   n'en avait aucune sur ses 73 categories. */
.famille__intro {
  max-width: var(--sima-mesure);
  margin-bottom: var(--sima-esp-12);
  color: var(--sima-texte-2);
}

.barre-resultats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sima-esp-4);
  margin-bottom: var(--sima-esp-6);
  padding-bottom: var(--sima-esp-4);
  border-bottom: 1px solid var(--sima-bordure);
}

/* ------------------------------------------------------------ Fiche produit ---- */

.fiche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sima-esp-16);
  align-items: start;
}

@media (max-width: 1024px) {
  .fiche {
    grid-template-columns: 1fr;
    gap: var(--sima-esp-8);
  }
}

.fiche__visuels {
  display: flex;
  flex-direction: column;
  gap: var(--sima-esp-4);
}

.fiche__principal {
  aspect-ratio: 4 / 3;
  background: var(--sima-fond-2);
  border-radius: var(--sima-rayon-carte);
  overflow: hidden;
}

.fiche__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

.fiche__miniatures button {
  width: 72px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--sima-bordure);
  border-radius: var(--sima-rayon-champ);
  background: var(--sima-fond);
  overflow: hidden;
  cursor: pointer;
}

.fiche__miniatures button[aria-current="true"] {
  border-color: var(--sima-acier);
  border-width: 2px;
}

.fiche__miniatures img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fiche__marque {
  font-size: var(--sima-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sima-texte-3);
  margin-bottom: var(--sima-esp-2);
}

.fiche__reference {
  font-size: var(--sima-petit);
  color: var(--sima-texte-2);
  font-variant-numeric: tabular-nums;
}

.fiche__resume {
  font-size: var(--sima-corps-large);
  color: var(--sima-texte-2);
  max-width: 52ch;
}

.fiche__achat {
  margin-block: var(--sima-esp-8);
  padding: var(--sima-esp-6);
  border: 1px solid var(--sima-bordure);
  border-radius: var(--sima-rayon-carte);
  background: var(--sima-fond-2);
}

.fiche__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sima-esp-3);
  margin-top: var(--sima-esp-4);
}

.fiche__quantite {
  display: flex;
  align-items: center;
  gap: var(--sima-esp-3);
  margin-bottom: var(--sima-esp-4);
}

.fiche__quantite input {
  width: 88px;
  min-height: var(--sima-touche-min);
  padding: var(--sima-esp-2);
  border: 1px solid var(--sima-bordure);
  border-radius: var(--sima-rayon-champ);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

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

.bloc h2 {
  margin-bottom: var(--sima-esp-6);
}

/*
 * Un trait, et de l'air de part et d'autre.
 *
 * Le bas d'une fiche enchaine description, documents, compatibilites, suggestions et
 * guides. Separes par la seule marge, ces blocs se lisaient comme un seul long texte :
 * on ne voyait plus ou finissait le produit et ou commencait le reste du catalogue.
 */
.bloc--separe {
  margin-top: var(--sima-esp-12);
  padding-top: var(--sima-esp-12);
  border-top: 1px solid var(--sima-bordure);
}

/* ------------------------------------------------------------------ Guides ---- */

.guides {
  display: grid;
  /* Piste flexible, carte plafonnee : voir la note de `.grille-produits`. Le
     `min(100%, ...)` manquait : sous 360 px, la piste depassait sa colonne et les
     cartes sortaient de 10 px de chaque cote. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--sima-esp-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide-carte {
  max-inline-size: 420px;
  margin-inline: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sima-esp-3);
}

.guide-carte img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  border-radius: var(--sima-rayon-carte);
  background: var(--sima-fond-2);
}

.guide-carte h3 {
  margin: 0;
}

.guide-carte h3 a {
  text-decoration: none;
}

.guide-carte h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.article {
  max-width: 80%;
  margin-inline: auto;
}

/*
 * Le texte occupe toute la largeur du bloc. Choix explicite de Jordan, deux fois : on
 * exploite la surface de l'ecran plutot que de tout ramener a une colonne centree.
 *
 * Ce que cela coute, pour memoire et pour qui relira : `--sima-mesure` (68 caracteres)
 * et son commentaire dans socle.css tenaient la longueur de ligne. Sans borne, un
 * paragraphe de guide mesure environ 170 caracteres par ligne en 1920 px. C'est assume,
 * pas oublie - et c'est la seule regle du projet qui aille contre sa propre charte.
 */
.article.prose p,
.article.prose li {
  max-width: none;
}

/*
 * L'image de tete rejoint les deux bords du bloc.
 *
 * Servie a 1024 px dans un `.article` de 1320, elle laissait 296 px de blanc a sa
 * droite quand les paragraphes, eux, allaient jusqu'au bord : cela se lit comme une
 * image mal posee, pas comme une intention.
 */
.article > picture img {
  width: 100%;
  height: auto;
}

.article h2 {
  margin-top: var(--sima-esp-12);
}

.article h3 {
  margin-top: var(--sima-esp-8);
}

.article table {
  /* Sans cela, trois colonnes courtes s'ecartaient sur 1320 px en corps reduit : l'oeil
     perd la ligne entre la premiere colonne et la derniere. */
  width: fit-content;
  max-width: 100%;
  margin-block: var(--sima-esp-6);
  font-size: var(--sima-petit);
}

.article th,
.article td {
  padding: var(--sima-esp-2) var(--sima-esp-3);
  border: 1px solid var(--sima-bordure);
  text-align: left;
}

.article th {
  background: var(--sima-acier);
  color: var(--sima-blanc);
  font-weight: 600;
}

/* ------------------------------------------------------- Liste de demande ---- */

/*
 * La liste vit desormais dans un `.recapitulatif`, qui porte le cadre et l'en-tete : le
 * meme objet est presente de la meme facon sur les deux ecrans ou il apparait.
 */
.liste-demande {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Une croix carree, de la taille d'une case a cocher, et non un bouton de la largeur de
   son intitule absent. */
.liste-demande__retirer {
  padding: var(--sima-esp-3);
  aspect-ratio: 1;
}

.liste-demande li {
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  gap: var(--sima-esp-4);
  align-items: center;
  padding: var(--sima-esp-4);
  border-top: 1px solid var(--sima-bordure);
  margin: 0;
}

.liste-demande li:first-child {
  border-top: 0;
}

.liste-demande img {
  width: 88px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--sima-fond-2);
  border-radius: var(--sima-rayon-champ);
}

.liste-demande__designation {
  font-weight: 600;
}

.liste-demande__declinaison {
  font-size: var(--sima-petit);
  color: var(--sima-texte-2);
}

@media (max-width: 640px) {
  .liste-demande li {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "image nom"
      "quantite quantite"
      "action action";
  }

  .liste-demande img {
    grid-area: image;
    width: 64px;
  }

  .liste-demande__infos {
    grid-area: nom;
  }
}

.vide {
  text-align: center;
  padding-block: var(--sima-esp-24);
  color: var(--sima-texte-2);
}

.vide h1 {
  margin-bottom: var(--sima-esp-4);
}

/* ------------------------------------------------- Amorces de description ---- */

/*
 * Un paragraphe qui s'ouvre par du gras porte une amorce, pas une emphase.
 *
 * C'est le dispositif de redaction du concurrent que le client a designe : ses fiches
 * n'ont aucun intertitre, mais chaque paragraphe commence par quelques mots en gras qui
 * en tiennent lieu. On lit la fiche en diagonale sans rien manquer, et le redacteur
 * produit du texte plutot qu'une arborescence.
 *
 * Le `<strong>` reste semantiquement juste - c'est bien une mise en valeur forte - et le
 * rendu en fait un point d'accroche. Rien a saisir de special : la regle s'applique
 * d'elle-meme des qu'un paragraphe commence par du gras.
 */
.prose p > strong:first-child {
  display: block;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sima-acier);
  margin-block-end: var(--sima-esp-1);
}