/* Feuille de composants du site Autoviza® (#544), chargée après tokens.css par toutes les bases du site (#547).
   Les règles et l'usage de chaque composant sont dans design/design.md (§ 11) ; chaque composant est montré, avec
   ses variantes, ses états et son code, dans design/composants.html. Mobile d'abord, classes
   av-bloc__element--variante, et seulement des jetons : aucune couleur, taille de texte, espace ni rayon en dur. */

/* ===================== Base ===================== */

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

/* Une ancre (le sommaire d'un guide, le récapitulatif d'erreurs) arrive sous l'en-tête collant, pas derrière lui.
   Sur une tâche, dont l'en-tête défile, 48 px : le libellé d'un champ visé par le récapitulatif sans script reste
   visible ; sans en-tête du site (le rapport), rien. Un navigateur sans :has() garde les 64 px partout (#568). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--av-hauteur-entete);
}

html:has(.av-entete--tache) {
  scroll-padding-top: var(--av-e7);
}

html:not(:has(.av-entete)) {
  scroll-padding-top: 0;
}

body {
  margin: 0;
  background: var(--av-blanc);
  color: var(--av-encre);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  -webkit-font-smoothing: antialiased;
}

/* Les marges viennent des composants et du rythme (§ 5), jamais du navigateur */
:is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
  margin: 0;
}

/* Focus visible partout : contour violet de 2 px décalé de 2 px (§ 13) ; un champ a le sien, contour et halo */
:focus-visible {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

.av-visuellement-cache,
.av-entete__action-texte {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement : le premier lien de chaque page, invisible jusqu'au clavier ; au focus, une pastille blanche qui
   flotte en haut à gauche de l'écran, sur l'en-tête, et rien ne bouge dans la page (Thomas, 21/10/2026, #568) */
.av-evitement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.av-evitement:focus {
  position: fixed;
  top: var(--av-e2);
  left: var(--av-gouttiere);
  z-index: var(--av-z-modale);
  display: inline-flex;
  align-items: center;
  width: auto;
  height: var(--av-hauteur-controle);
  padding: 0 var(--av-e4);
  overflow: visible;
  clip-path: none;
  border-radius: var(--av-rayon-controle);
  background: var(--av-blanc);
  box-shadow: var(--av-ombre-flottant);
  color: var(--av-violet);
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 640px) {
  .av-evitement:focus {
    left: var(--av-gouttiere-large);
  }
}

/* Le contenu atteint par le lien d'évitement n'a pas de contour : ce n'est pas un contrôle, et il est remonté en haut
   de l'écran (exception écrite au § 13, comme GOV.UK) ; le script ne le rend focalisable que le temps du saut (#546) :
   le main, et sur le rapport le premier chapitre (#premier-chapitre, l'id que le serveur pose sur le premier chapitre
   rendu, #545) */
main[tabindex="-1"]:focus,
#premier-chapitre[tabindex="-1"]:focus {
  outline: none;
}

/* Le titre d'une fenêtre ou d'une étape de la visite, qui reçoit le focus à l'ouverture (F-11 A), et un avis qu'un refus
   focalise pour le lecteur d'écran (Thomas, 09/11/2026 : cerclé de violet, il se lisait sélectionné) : pas de contour non
   plus, ce n'est pas un contrôle ; le script le rend focalisable sans en faire un arrêt de tabulation (#546, § 13) */
.av-fenetre__titre[tabindex="-1"]:focus,
.av-visite__titre[tabindex="-1"]:focus,
.av-avis[tabindex="-1"]:focus {
  outline: none;
}

/* Masqué par hidden, masqué pour de bon : le display d'une classe (grid, flex) l'emporte sur le display: none du
   navigateur, et l'élément resterait visible. Ce que le serveur rend pour tous et que le script ne révèle qu'au vendeur
   (« Retirer les données HistoVec », « Services vendeur », la bulle de l'aide ; la page est en cache, #339), le pied d'un
   carrousel dont toutes les cartes tiennent (#545), « Partager » que le script ne pose que là où le navigateur partage
   et « Précédent » à la première étape de la visite (#546), les avis du paiement que checkout.js montre (#551). Une
   classe à display qui porte hidden s'ajoute ici, comme
   les règles [hidden] de chaque composant */
.av-action[hidden],
.av-attente__suite[hidden],
.av-avis[hidden],
.av-carte[hidden],
.av-cartes > li[hidden],
.av-actions[hidden],
.av-pile[hidden],
.av-sondage[hidden],
.av-carrousel__pied[hidden],
.av-bulle[hidden],
.av-champ__bouton[hidden],
.av-champ[hidden],
.av-etape__champs[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* À part : un navigateur qui ne connaît pas ::backdrop rejetterait toute la liste */
  ::backdrop {
    transition-duration: 0.01ms !important;
  }
}

/* ===================== Actions ===================== */

/* Bouton : violet, texte blanc, 48 px, angles de 8 px, libellé 16/20 sans espacement des lettres (Base d'Uber,
   Thomas, 21/10/2026, #562). Un seul bouton principal par écran ; l'achat seul en vert. Pas de bouton secondaire : le
   lien d'action le remplace (Thomas, 20/10/2026). */
.av-bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-e2);
  min-height: var(--av-hauteur-controle);
  padding: var(--av-e2) var(--av-e5);
  border: 0;
  border-radius: var(--av-rayon-controle);
  background: var(--av-violet);
  color: var(--av-blanc);
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--av-duree) var(--av-courbe);
}

.av-bouton:active {
  background: var(--av-violet-survol);
}

@media (hover: hover) {
  .av-bouton:hover {
    background: var(--av-violet-survol);
    color: var(--av-blanc);
  }
}

.av-bouton svg {
  flex: none;
  width: var(--av-icone);
  height: var(--av-icone);
  fill: currentColor;
}

/* L'action d'une tâche ou d'un héros ; sous 375 px, son libellé au prix (« Obtenir le rapport détaillé — 9 € ») tient sur une ligne */
.av-bouton--grand {
  min-height: var(--av-hauteur-controle-grand);
}

@media (max-width: 374px) {
  .av-bouton--grand {
    padding-inline: var(--av-e3);
  }
}

.av-bouton--plein {
  width: 100%;
}

/* Pleine largeur sur téléphone, à sa largeur au-delà ; dans le bloc d'action d'une tâche, pleine à toutes les tailles
   (ci-dessous, l'action d'une étape, 09/11/2026) */
@media (max-width: 639px) {
  .av-bouton--plein-telephone {
    width: 100%;
  }
}

/* Ce qui débite (« Payer 30 € TTC ») et rien d'autre */
.av-bouton--achat {
  background: var(--av-vert-achat);
}

.av-bouton--achat:active {
  background: var(--av-vert-achat-survol);
}

@media (hover: hover) {
  .av-bouton--achat:hover {
    background: var(--av-vert-achat-survol);
  }
}

/* Icône seule : rond de 44 px sur l'aplat (fermer, menu, compte), toujours nommé par aria-label */
.av-bouton--icone {
  flex: none;
  width: var(--av-cible);
  min-height: var(--av-cible);
  padding: 0;
  border-radius: var(--av-rayon-pilule);
  background: var(--av-aplat);
  color: var(--av-encre);
}

.av-bouton--icone:active {
  background: var(--av-aplat-fonce);
}

@media (hover: hover) {
  .av-bouton--icone:hover {
    background: var(--av-aplat-fonce);
    color: var(--av-encre);
  }
}

/* L'icône du site porte sa couleur sur son tracé ({% svg 'img/icons/cross' %}, violet) : l'encre du bouton la
   remplace. Le bouton à icône seul : le logo d'un tiers (av-bouton--tiers) garde ses couleurs (#568) */
.av-bouton--icone svg path {
  fill: currentColor;
}

/* Désactivé : l'état unique et pâle de tous les composants (Thomas, 21/10/2026, #565) ; la raison est écrite à côté,
   en gris secondaire lisible. Un bouton n'est désactivé que si l'action est impossible. Sur un aplat, il prend le
   blanc, comme le champ (--av-champ-fond), pour garder sa forme. */
.av-bouton:disabled,
.av-bouton[aria-disabled="true"] {
  background: var(--av-champ-fond, var(--av-desactive-fond));
  color: var(--av-desactive-texte);
  cursor: not-allowed;
  pointer-events: none;
}

/* Occupé : le libellé reste lu (aria-busy et un texte masqué « en cours »), une roue tourne à sa place */
.av-bouton[aria-busy="true"] {
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.av-bouton[aria-busy="true"] svg {
  visibility: hidden;
}

.av-bouton[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--av-icone);
  height: var(--av-icone);
  margin: auto;
  border: 2px solid var(--av-blanc);
  border-right-color: transparent;
  border-radius: var(--av-rayon-pilule);
  animation: av-tourne 0.8s linear infinite;
}

/* Sur un fond clair (l'icône seule, le bouton de tiers, un bouton désactivé par hx-disabled-elt), la roue est à
   l'encre (#546) */
.av-bouton:is(.av-bouton--icone, .av-bouton--tiers, :disabled)[aria-busy="true"]::after {
  border-color: var(--av-encre);
  border-right-color: transparent;
}

/* Moins de mouvement : pas de roue figée, le libellé reste lisible */
@media (prefers-reduced-motion: reduce) {
  .av-bouton[aria-busy="true"] {
    -webkit-text-fill-color: currentColor;
  }

  .av-bouton[aria-busy="true"]::after {
    content: none;
  }
}

@keyframes av-tourne {
  to {
    transform: rotate(1turn);
  }
}

/* Lien d'action : l'action secondaire, violet souligné, cible de 44 px (« Voir les 11 opérations »). Souligné : il
   ouvre autre chose ; un dépliant garde son chevron. */
.av-action {
  display: inline-flex;
  align-items: center;
  gap: var(--av-e1);
  min-height: var(--av-cible);
  padding: 0;
  border: 0;
  background: none;
  color: var(--av-violet);
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.av-action:active {
  color: var(--av-violet-survol);
}

@media (hover: hover) {
  .av-action:hover {
    color: var(--av-violet-survol);
  }
}

.av-action svg {
  flex: none;
  width: var(--av-icone);
  height: var(--av-icone);
  fill: currentColor;
}

.av-action:disabled,
.av-action[aria-disabled="true"] {
  color: var(--av-desactive-texte);
  cursor: not-allowed;
}

/* Rangée d'actions : le bouton, puis le lien d'action ; ils passent à la ligne quand la place manque */
.av-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--av-e2) var(--av-e5);
}

/* Lien dans un texte : violet souligné, de la taille du texte qui le porte */
.av-lien {
  color: var(--av-violet);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.av-lien:active {
  color: var(--av-violet-survol);
}

@media (hover: hover) {
  .av-lien:hover {
    color: var(--av-violet-survol);
  }
}

/* Lien qui quitte le site : l'icône dit qu'il s'ouvre ailleurs, le texte masqué le dit au lecteur d'écran */
.av-lien svg {
  display: inline;
  width: 1em;
  height: 1em;
  margin-left: var(--av-e1);
  vertical-align: -0.125em;
  fill: currentColor;
}

/* L'icône reste collée au dernier mot (#545) : le navigateur ouvre une coupure avant elle, comme avant une image, et
   à 320 px elle passait seule à la ligne. Le dernier mot, le texte masqué et l'icône vont dans un même élément
   (« … du <span>constructeur<span class="av-visuellement-cache"> (nouvelle fenêtre)</span><svg …></span> »), que
   cette règle rend insécable, quel qu'il soit : la feuille seule ne peut pas lier l'icône au texte qui la précède */
.av-lien :has(> svg) {
  white-space: nowrap;
}

/* ===================== Champs ===================== */

/* Champ : la couche invisible de Base d'Uber, à nos couleurs (Thomas, 21/10/2026, #562). Un aplat sans contour au
   repos ; sa bordure de 2 px est réservée dès le repos, de la couleur du fond, pour que rien ne bouge au focus : le
   champ passe alors au blanc, cadré de violet. Pas d'état survol. Le libellé toujours visible au-dessus, l'aide et
   l'erreur dessous, reliées par aria-describedby. Posé sur un aplat, le champ prend le blanc (--av-fond-champ). */
/* align-content : posé côte à côte (deux champs dès 640 px), un champ ne s'étire pas quand son voisin porte une erreur */
.av-champ {
  display: grid;
  align-content: start;
  gap: var(--av-e2);
  min-width: 0;
}

.av-champ__libelle {
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

/* « (facultatif) », ou « (obligatoire) » quand la plupart des champs du formulaire sont facultatifs : on marque les
   moins nombreux (Mes informations, #549) */
.av-champ__facultatif,
.av-champ__obligatoire {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
}

/* 16 px au moins : le téléphone ne zoome pas sur le champ. Le texte est à 16 px du bord, bordure comprise */
.av-champ__saisie {
  width: 100%;
  min-width: 0;
  min-height: var(--av-hauteur-controle);
  margin: 0;
  padding: 0 calc(var(--av-e4) - var(--av-trait-controle));
  border: var(--av-trait-controle) solid var(--av-champ-fond, var(--av-fond-champ));
  border-radius: var(--av-rayon-controle);
  background: var(--av-champ-fond, var(--av-fond-champ));
  color: var(--av-encre);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  transition:
    border-color var(--av-duree) var(--av-courbe),
    background-color var(--av-duree) var(--av-courbe);
}

/* L'exemple tient 4,5:1 sur le fond du champ, où le gris secondaire ne fait que 4,3:1 */
.av-champ__saisie::placeholder {
  color: var(--av-gris-exemple);
  opacity: 1;
}

/* Un champ désactivé pâlit tout entier, son exemple compris : il ne ressemble plus à un champ actif */
.av-champ__saisie:disabled::placeholder {
  color: var(--av-desactive-texte);
}

.av-champ__saisie:focus {
  outline: none;
  border-color: var(--av-violet);
  background: var(--av-blanc);
}

.av-champ__saisie[aria-invalid="true"] {
  border-color: var(--av-erreur);
  background: var(--av-blanc);
}

/* Un champ en erreur qui a le focus le montre comme les autres : le cadre violet passe devant le rouge */
.av-champ__saisie[aria-invalid="true"]:focus {
  border-color: var(--av-violet);
}

.av-champ__saisie:disabled,
.av-champ__saisie[readonly] {
  border-color: var(--av-champ-fond, var(--av-fond-champ));
  background: var(--av-champ-fond, var(--av-fond-champ));
  color: var(--av-desactive-texte);
  -webkit-text-fill-color: var(--av-desactive-texte);
}

/* Une valeur en lecture seule se lit à l'encre ; son focus reste visible, en gris, sans le blanc ni le violet d'un
   champ où l'on écrit */
.av-champ__saisie[readonly] {
  color: var(--av-encre);
  -webkit-text-fill-color: var(--av-encre);
}

.av-champ__saisie[readonly]:focus {
  border-color: var(--av-gris-texte);
  background: var(--av-champ-fond, var(--av-fond-champ));
}

.av-champ__saisie:disabled {
  cursor: not-allowed;
}

/* Le champ d'une tâche (immatriculation, e-mail de connexion) : 60 px, texte de 18 px */
.av-champ--grand .av-champ__saisie {
  min-height: var(--av-hauteur-champ-grand);
  font: var(--av-texte-chapeau);
  letter-spacing: var(--av-chasse-chapeau);
}

/* Zone de texte : trois lignes, sans poignée */
textarea.av-champ__saisie {
  min-height: calc(var(--av-e8) + var(--av-e6));
  padding: calc(var(--av-e3) - var(--av-trait-controle)) calc(var(--av-e4) - var(--av-trait-controle));
  resize: none;
}

/* Liste déroulante : la flèche pleine, à la couleur du texte, dessinée sans image */
.av-champ__liste {
  position: relative;
  min-width: 0;
}

.av-champ__liste .av-champ__saisie {
  padding-right: calc(var(--av-e7) - var(--av-e2));
  appearance: none;
  cursor: pointer;
}

.av-champ__liste::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--av-e4);
  width: var(--av-e3);
  height: calc(var(--av-e2) - var(--av-trait-controle));
  background: var(--av-encre);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateY(-50%);
  pointer-events: none;
}

.av-champ__liste:has(:disabled)::after {
  background: var(--av-desactive-texte);
}

/* Liste avec suggestions (l'adresse de la BAN) : un panneau blanc qui flotte sous le champ, une suggestion par ligne
   de 48 px, la suggestion active sur l'aplat, la part saisie en gras. Une liste sans saisie reste native. */
.av-suggestions {
  margin: 0;
  padding: var(--av-e1) 0;
  border-radius: var(--av-rayon-controle);
  background: var(--av-blanc);
  box-shadow: var(--av-ombre-flottant);
  list-style: none;
}

.av-suggestions li {
  display: grid;
  align-content: center;
  min-height: var(--av-hauteur-controle);
  padding: var(--av-e2) var(--av-e4);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  cursor: pointer;
}

.av-suggestions li[aria-selected="true"] {
  background: var(--av-aplat);
}

.av-suggestions mark {
  background: none;
  color: inherit;
  font-weight: 700;
}

.av-suggestions small {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* La saisie et son panneau (av-champ__suggestions, la liste ou « Aucune adresse trouvée ») : le panneau flotte sur la
   suite du formulaire, à 4 px sous la saisie, à sa largeur, sans rien pousser (#549, MR 4 ; il était dans le flux, comme
   au catalogue, jusqu'au branchement de la fiche société) */
.av-champ__ancre {
  position: relative;
  display: grid;
}

.av-champ__suggestions {
  position: absolute;
  top: calc(100% + var(--av-e1));
  right: 0;
  left: 0;
  z-index: var(--av-z-dessus);
}

/* Sur un aplat, le champ prend le blanc : deux surfaces qui se touchent n'ont jamais le même fond. Une carte blanche
   (posée sur un aplat, ou à contour) lui rend son gris. --av-champ-fond est locale : le jeton --av-fond-champ ne
   change jamais. Un avis aussi (Thomas, 09/11/2026) : sur un aplat, son fond teinté posé sur le gris rendait mal, deux
   couleurs pâles l'une sur l'autre ; il y prend le blanc, son icône et son texte gardant leur couleur. --av-avis-fond
   est locale, et une carte blanche la vide : l'avis y reprend sa teinte. */
.av-carte,
.av-encadre,
.av-section--aplat,
.av-aplat {
  --av-champ-fond: var(--av-blanc);
  --av-avis-fond: var(--av-blanc);
}

.av-carte--sur-aplat,
.av-carte--contour {
  --av-champ-fond: var(--av-fond-champ);
  --av-avis-fond: initial;
}

.av-champ__aide {
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
}

/* L'erreur dit ce qui ne va pas et comment corriger, avec l'icône : jamais la couleur seule */
.av-champ__erreur {
  display: flex;
  align-items: flex-start;
  gap: var(--av-e1);
  color: var(--av-erreur);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
}

.av-champ__erreur[hidden] {
  display: none;
}

.av-champ__erreur svg {
  flex: none;
  width: var(--av-e3);
  height: var(--av-e3);
  margin-top: var(--av-e1);
  fill: currentColor;
}

/* Une icône du site porte sa couleur sur son tracé ({% svg 'img/icons/warning-circle' %}, violet) : le tracé prend
   celle que le contrôle donne à l'icône */
:is(.av-champ__erreur, .av-champ__icone, .av-champ__bouton, .av-depot__icone, .av-fichiers__icone, .av-fichiers__etat) svg path {
  fill: inherit;
}

/* Champ à garnitures (#566) : une unité, une icône ou un bouton dans le champ. L'aplat passe sur le cadre, la saisie y
   devient transparente : même dessin que le champ seul, bordure de 2 px réservée, blanc cadré de violet au focus, de
   rouge en erreur (les garnitures de BaseWeb). Le texte reste à 16 px du bord, bordure comprise. */
.av-champ__cadre {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--av-hauteur-controle);
  border: var(--av-trait-controle) solid var(--av-champ-fond, var(--av-fond-champ));
  border-radius: var(--av-rayon-controle);
  background: var(--av-champ-fond, var(--av-fond-champ));
  transition:
    border-color var(--av-duree) var(--av-courbe),
    background-color var(--av-duree) var(--av-courbe);
}

.av-champ__cadre:focus-within {
  border-color: var(--av-violet);
  background: var(--av-blanc);
}

.av-champ__cadre:has([aria-invalid="true"]) {
  border-color: var(--av-erreur);
  background: var(--av-blanc);
}

.av-champ__cadre:has([aria-invalid="true"]:focus) {
  border-color: var(--av-violet);
}

/* Une valeur à copier (lien de partage) : le focus reste gris, sans le blanc d'un champ où l'on écrit */
.av-champ__cadre:has([readonly]:focus) {
  border-color: var(--av-gris-texte);
  background: var(--av-champ-fond, var(--av-fond-champ));
}

.av-champ__cadre .av-champ__saisie,
.av-champ__cadre .av-champ__saisie:focus,
.av-champ__cadre .av-champ__saisie[aria-invalid="true"],
.av-champ__cadre .av-champ__saisie[readonly]:focus {
  flex: 1;
  min-height: calc(var(--av-hauteur-controle) - 2 * var(--av-trait-controle));
  padding: 0 calc(var(--av-e4) - var(--av-trait-controle));
  border: 0;
  background: transparent;
}

/* Le champ d'une tâche garde ses 60 px avec une garniture */
.av-champ--grand .av-champ__cadre {
  min-height: var(--av-hauteur-champ-grand);
}

.av-champ--grand .av-champ__cadre .av-champ__saisie {
  min-height: calc(var(--av-hauteur-champ-grand) - 2 * var(--av-trait-controle));
}

.av-champ__cadre > :not(.av-champ__saisie) + .av-champ__saisie {
  padding-left: var(--av-e2);
}

.av-champ__cadre > .av-champ__saisie:has(+ *) {
  padding-right: var(--av-e2);
}

/* L'unité (km, €) : du texte gris au bord droit, relié à la saisie par aria-describedby */
/* Sur le fond du champ, le gris d'exemple (4,69:1) : le gris secondaire n'y tient que 4,31:1 (#546) */
.av-champ__unite {
  flex: none;
  padding-right: calc(var(--av-e4) - var(--av-trait-controle));
  color: var(--av-gris-exemple);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
}

.av-champ__cadre:has(:disabled) .av-champ__unite {
  color: var(--av-desactive-texte);
}

/* L'icône d'en tête (la loupe d'une recherche) : grise, décorative */
.av-champ__icone {
  flex: none;
  display: inline-flex;
  margin-left: calc(var(--av-e4) - var(--av-trait-controle));
}

.av-champ__icone svg {
  width: var(--av-icone);
  height: var(--av-icone);
  fill: var(--av-gris-texte);
}

/* Le bouton qui agit sur le champ (« Appliquer », « Copier », « Afficher ») : violet en 600 au bord droit, jamais un
   bouton plein (la page a le sien) ; une croix grise pour « Effacer » ou « Retirer ». 44 px de cible. */
.av-champ__bouton {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: var(--av-cible);
  min-height: var(--av-cible);
  margin-right: calc(var(--av-e1) - var(--av-trait-controle));
  padding: 0 var(--av-e3);
  border: 0;
  border-radius: calc(var(--av-rayon-controle) - var(--av-trait-controle));
  background: none;
  color: var(--av-violet);
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
  cursor: pointer;
}

.av-champ__bouton--icone {
  padding: 0;
  color: var(--av-gris-texte);
}

.av-champ__bouton:disabled {
  color: var(--av-desactive-texte);
  cursor: not-allowed;
}

.av-champ__bouton svg {
  width: var(--av-icone);
  height: var(--av-icone);
  fill: currentColor;
}

.av-champ__bouton:focus-visible {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: calc(-1 * var(--av-decalage-focus));
}

@media (hover: hover) {
  .av-champ__bouton:not(:disabled):hover {
    background: var(--av-voile-survol);
  }
}

/* Une recherche quitte le dessin natif de Safari ; sa croix laisse la place au bouton « Effacer » */
.av-champ__saisie[type="search"] {
  appearance: none;
}

.av-champ__saisie[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

/* Sous le champ : l'aide ou l'erreur à gauche, le compteur à droite, en chiffres tabulaires */
.av-champ__pied {
  display: flex;
  align-items: start;
  gap: var(--av-e4);
}

.av-champ__compteur {
  flex: none;
  margin-left: auto;
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
  font-variant-numeric: tabular-nums;
}

/* Une immatriculation, un VIN : en capitales à l'affichage, chiffres de même largeur ; pas de masque, le serveur
   nettoie tirets et espaces */
.av-champ__saisie--code {
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.av-champ__saisie--code::placeholder {
  text-transform: none;
}

/* Code à usage unique : un seul champ à la largeur du code, chiffres espacés (collage, remplissage par le téléphone,
   retour arrière) ; court pour les trois caractères du VIN */
.av-champ__saisie--code-unique {
  width: calc(2 * var(--av-e9) + var(--av-e7));
  max-width: 100%;
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-e2);
  font-variant-numeric: tabular-nums;
}

.av-champ__saisie--court {
  width: calc(var(--av-e9) + var(--av-e5));
}

/* La saisie à cases (Thomas, 05/11/2026) : un code ou la fin d'un VIN, une case par caractère. Une seule saisie dessous,
   transparente et posée sur toute la rangée : collage, remplissage par le téléphone, retour arrière et flèches restent
   ceux du navigateur. autoviza.js monte les cases sur une saisie --code-unique et y recopie la valeur ; sans lui, la
   saisie unique ci-dessus reste. Les cases sont muettes : le lecteur d'écran lit la saisie. */
.av-cases {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, var(--av-cible));
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--av-e2);
  width: 100%;
  max-width: 100%;
}

/* Six cases à 320 px : 41 px avec l'écart de 8, sous la cible de 44 (§ 13) ; à 4 px, elles gardent leurs 44 */
@media (max-width: 359px) {
  .av-cases {
    gap: var(--av-e1);
  }
}

.av-cases__case {
  display: grid;
  place-items: center;
  height: calc(var(--av-cible) + var(--av-e1));
  border: var(--av-trait-controle) solid var(--av-champ-fond, var(--av-fond-champ));
  border-radius: var(--av-rayon-controle);
  background: var(--av-champ-fond, var(--av-fond-champ));
  font: var(--av-texte-titre-4);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  transition:
    border-color var(--av-duree) var(--av-courbe),
    background-color var(--av-duree) var(--av-courbe);
}

.av-cases__case--active {
  border-color: var(--av-violet);
  background: var(--av-blanc);
}

.av-cases:has([aria-invalid="true"]) .av-cases__case {
  border-color: var(--av-erreur);
}

/* Le cadre violet de la case du curseur passe devant le rouge, comme le focus d'un champ en erreur */
.av-cases:has([aria-invalid="true"]) .av-cases__case--active {
  border-color: var(--av-violet);
}

/* La saisie : sur toute la rangée, sans rien montrer d'elle ; -webkit-text-fill-color, pour le remplissage du navigateur */
.av-cases .av-champ__saisie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  letter-spacing: 0;
  -webkit-text-fill-color: transparent;
}

/* La case sélectionnée se dit par --active : le reflet de la sélection tomberait à gauche, sur le texte caché */
.av-cases .av-champ__saisie::selection {
  background: transparent;
  color: transparent;
}

/* Une valeur qu'on ne peut pas changer (SIRET) s'écrit comme du texte, jamais dans un champ : libellé, valeur, raison */
.av-valeur {
  display: grid;
  gap: var(--av-e1);
  margin: 0;
}

.av-valeur dt {
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

.av-valeur dd {
  margin: 0;
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
}

.av-valeur dd + dd {
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
}

/* Date connue : jour, mois, année, trois champs à la largeur de ce qu'ils attendent, au clavier numérique */
.av-date {
  display: flex;
  gap: var(--av-e3);
}

.av-date .av-champ {
  flex: none;
  gap: var(--av-e1);
  width: calc(var(--av-e8) + var(--av-e2));
}

.av-date .av-champ--annee {
  width: calc(var(--av-e8) + var(--av-e5));
}

.av-date__libelle {
  font: var(--av-texte-option);
  letter-spacing: var(--av-chasse-option);
}

/* Groupe de choix : un fieldset, sa légende tient lieu de libellé */
.av-groupe {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.av-groupe > .av-titre-groupe {
  padding: 0;
}

.av-groupe__libelle {
  margin-bottom: var(--av-e1);
  padding: 0;
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

/* Case et bouton radio redessinés (Base d'Uber, #562) : 17 px, trait de 2 px, plein violet et coche blanche une fois
   cochés ; une option par ligne, toute la ligne cliquable sur 44 px, le détail sous le libellé, en gris */
.av-choix {
  display: grid;
  grid-template-columns: var(--av-case) minmax(0, 1fr);
  column-gap: var(--av-e3);
  align-items: start;
  min-height: var(--av-cible);
  padding-block: calc((var(--av-cible) - var(--av-e5)) / 2);
  font: var(--av-texte-option);
  letter-spacing: var(--av-chasse-option);
  cursor: pointer;
}

/* La case s'aligne sur la première ligne du libellé (20 px) */
.av-choix input,
.av-carte-choix input {
  appearance: none;
  width: var(--av-case);
  height: var(--av-case);
  margin: calc((var(--av-e5) - var(--av-e1) - var(--av-case)) / 2) 0 0;
  border: var(--av-trait-controle) solid var(--av-gris-texte);
  border-radius: var(--av-e1);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--av-duree) var(--av-courbe),
    border-color var(--av-duree) var(--av-courbe);
}

.av-choix input:checked,
.av-carte-choix input:checked {
  border-color: var(--av-violet);
  background-color: var(--av-violet);
}

/* La coche : un trait blanc dessiné en SVG, sur le plein violet */
.av-choix input[type="checkbox"]:checked,
.av-carte-choix input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75%;
}

/* Le radio : un rond ; coché, un plein violet percé d'un point blanc */
.av-choix input[type="radio"],
.av-carte-choix input[type="radio"] {
  border-radius: var(--av-rayon-pilule);
}

.av-choix input[type="radio"]:checked,
.av-carte-choix input[type="radio"]:checked {
  background: radial-gradient(circle, var(--av-blanc) 0 calc(var(--av-case) * 0.15), var(--av-violet) calc(var(--av-case) * 0.15 + 0.5px));
}

.av-choix input:focus-visible {
  outline: var(--av-trait-controle) solid var(--av-violet);
  outline-offset: var(--av-trait-controle);
}

@media (hover: hover) {
  .av-choix:hover input:not(:checked, :disabled) {
    background-color: var(--av-voile-survol);
  }
}

.av-choix:active input:not(:checked, :disabled) {
  background-color: var(--av-voile-appui);
}

.av-choix__detail {
  grid-column: 2;
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-choix input:disabled,
.av-carte-choix input:disabled {
  border-color: var(--av-desactive-trait);
  cursor: not-allowed;
}

.av-choix input:disabled:checked,
.av-carte-choix input:disabled:checked {
  background-color: var(--av-desactive-trait);
}

.av-choix input[type="radio"]:disabled:checked,
.av-carte-choix input[type="radio"]:disabled:checked {
  background: radial-gradient(circle, var(--av-blanc) 0 calc(var(--av-case) * 0.15), var(--av-desactive-trait) calc(var(--av-case) * 0.15 + 0.5px));
}

.av-choix input:disabled ~ * {
  color: var(--av-desactive-texte);
  cursor: not-allowed;
}

/* La raison du désactivé se lit : le détail garde le gris secondaire */
.av-choix input:disabled ~ .av-choix__detail {
  color: var(--av-gris-texte);
}

/* En erreur, le trait d'une case non cochée passe au rouge (aria-invalid sur chaque option, comme le pose Django) ;
   l'erreur d'un groupe s'écrit sous sa légende, avant les options, pour se lire avant de choisir */
:is(.av-choix, .av-carte-choix) input[aria-invalid="true"]:not(:checked) {
  border-color: var(--av-erreur);
}

.av-groupe > .av-champ__erreur {
  margin-bottom: var(--av-e1);
}

/* Indéterminée : une partie des options est cochée ; un trait blanc sur le plein violet */
.av-choix input[type="checkbox"]:indeterminate {
  border-color: var(--av-violet);
  background: var(--av-violet) linear-gradient(var(--av-blanc), var(--av-blanc)) center / 55% var(--av-trait-controle) no-repeat;
}

/* Interrupteur : un réglage qui s'applique tout de suite (sinon, une case). Le switch de Base d'Uber : un rail en
   pilule de 52 × 32, un rond gris de 16 px éteint, un rond blanc de 24 px allumé sur le rail violet, qui glisse avec un
   léger ressort. Le libellé à gauche, l'interrupteur au bord droit ; toute la ligne est cliquable. */
.av-interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-e4);
  min-height: var(--av-cible);
  font: var(--av-texte-option);
  letter-spacing: var(--av-chasse-option);
  cursor: pointer;
}

/* Le rond est un fond dégradé du rail, pas un ::before : un <input> ne porte pas de contenu généré dans tous les
   navigateurs. Éteint : un rond gris de 16 px à 6 px du bord ; allumé : un rond blanc de 24 px à 4 px du bord. */
.av-interrupteur input {
  appearance: none;
  flex: none;
  width: calc(var(--av-e6) + var(--av-icone));
  height: var(--av-e6);
  margin: 0;
  border: var(--av-trait-controle) solid var(--av-gris-texte);
  border-radius: var(--av-rayon-pilule);
  background:
    radial-gradient(circle closest-side, var(--av-gris-texte) calc(100% - 0.5px), transparent 100%)
      var(--av-e1) 50% / var(--av-e4) var(--av-e4) no-repeat,
    var(--av-aplat-fonce);
  cursor: pointer;
  transition:
    background-position var(--av-duree) var(--av-courbe-ressort),
    background-size var(--av-duree) var(--av-courbe-ressort),
    border-color var(--av-duree) var(--av-courbe);
}

.av-interrupteur input:checked {
  border-color: var(--av-violet);
  background:
    radial-gradient(circle closest-side, var(--av-blanc) calc(100% - 0.5px), transparent 100%)
      calc(100% - var(--av-trait-controle)) 50% / var(--av-e5) var(--av-e5) no-repeat,
    var(--av-violet);
}

.av-interrupteur input:focus-visible {
  outline: var(--av-trait-controle) solid var(--av-violet);
  outline-offset: var(--av-trait-controle);
}

.av-interrupteur input:disabled {
  border-color: var(--av-desactive-trait);
  background:
    radial-gradient(circle closest-side, var(--av-desactive-trait) calc(100% - 0.5px), transparent 100%)
      var(--av-e1) 50% / var(--av-e4) var(--av-e4) no-repeat,
    var(--av-champ-fond, var(--av-desactive-fond));
  cursor: not-allowed;
}

/* Activé et verrouillé (les cookies nécessaires du bandeau de consentement, X-1 B, #573) : allumé, le rond blanc à
   droite, sur le rail pâle du désactivé ; le détail dit pourquoi (« Toujours actifs »). Sans lui, un interrupteur coché
   et désactivé se dessinait éteint. */
.av-interrupteur input:checked:disabled {
  border-color: var(--av-desactive-trait);
  background:
    radial-gradient(circle closest-side, var(--av-blanc) calc(100% - 0.5px), transparent 100%)
      calc(100% - var(--av-trait-controle)) 50% / var(--av-e5) var(--av-e5) no-repeat,
    var(--av-desactive-trait);
}

/* Désactivé, éteint ou verrouillé : le libellé pâlit et la ligne ne promet plus de clic (Désactivé, États) ; le
   détail, qui dit pourquoi, garde son gris */
.av-interrupteur:has(input:disabled) {
  color: var(--av-desactive-texte);
  cursor: not-allowed;
}

/* Un libellé et son détail en gris dessous, à 4 px (une finalité et ce qu'elle fait) */
.av-interrupteur__texte {
  display: grid;
  gap: var(--av-e1);
}

.av-interrupteur__detail {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Contrôle segmenté : deux à quatre choix exclusifs qui changent la vue tout de suite. Un rail sur le fond des champs,
   arrondi à 12 px (concentrique au segment de 8 px qu'il entoure de 4 px), le segment actif blanc, cadré de violet ;
   48 px en tout. Des boutons radio natifs, masqués : le clavier et le lecteur d'écran les lisent. */
.av-segments {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: var(--av-e1);
  border: 0;
  border-radius: calc(var(--av-rayon-controle) + var(--av-e1));
  background: var(--av-champ-fond, var(--av-fond-champ));
}

.av-segments label {
  position: relative;
}

.av-segments input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Le segment non choisi, sur le fond du champ : le gris d'exemple, comme l'unité (#546) */
.av-segments span {
  display: grid;
  place-items: center;
  min-height: calc(var(--av-hauteur-controle) - 2 * var(--av-e1));
  padding: var(--av-e2) var(--av-e3);
  border: var(--av-trait-controle) solid transparent;
  border-radius: var(--av-rayon-controle);
  color: var(--av-gris-exemple);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
  text-align: center;
  cursor: pointer;
}

.av-segments input:checked + span {
  border-color: var(--av-violet);
  background: var(--av-blanc);
  color: var(--av-encre);
}

.av-segments input:focus-visible + span {
  outline: var(--av-trait-controle) solid var(--av-violet);
  outline-offset: var(--av-trait-controle);
}

/* Un filet discret entre deux actions distinctes d'une page (créer un rapport, chercher un rapport ; Thomas, 05/11/2026) */
.av-separation {
  margin: 0;
  border: 0;
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

/* ===================== Choix en cartes ===================== */

/* Un choix qui a un détail et un prix (options du B2C upsell, packs, profil) : une carte blanche au trait discret, la
   case ou le radio visible (on voit si l'on choisit un ou plusieurs), le prix à droite ; cochée, cadrée de violet sur un
   fond à peine teinté ; le gris est réservé à l'option désactivée (Thomas, 05/11/2026 : grises, les cartes non cochées
   se lisaient indisponibles). Angles de 8 px : c'est un contrôle, pas un bloc de contenu (Thomas, 21/10/2026). */
.av-cartes-choix {
  display: grid;
  gap: var(--av-e2);
}

.av-carte-choix {
  display: grid;
  grid-template-columns: var(--av-case) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--av-e3);
  padding: calc(var(--av-e4) - var(--av-trait-filet));
  border: var(--av-trait-filet) solid var(--av-gris-trait);
  border-radius: var(--av-rayon-controle);
  background: var(--av-blanc);
  cursor: pointer;
  transition:
    border-color var(--av-duree) var(--av-courbe),
    background-color var(--av-duree) var(--av-courbe);
}

/* Cochée : double trait à l'encre sur un fond gris très léger (Thomas, 09/11/2026 : le violet pâle jurait avec les gris de
   Stripe, et le cadre violet n'était pas du design system) ; le second trait en ombre intérieure, sans décaler le contenu */
.av-carte-choix:has(:checked) {
  border-color: var(--av-encre);
  background: var(--av-aplat);
  box-shadow: inset 0 0 0 var(--av-trait-filet) var(--av-encre);
}

.av-carte-choix:has(:focus-visible) {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

/* La case s'aligne sur la première ligne du titre (24 px) ; le focus se voit sur la carte */
.av-carte-choix input {
  margin: calc((var(--av-e5) - var(--av-case)) / 2) 0 0;
}

.av-carte-choix input:focus-visible {
  outline: none;
}

.av-carte-choix:has(:disabled) {
  border-color: var(--av-desactive-fond);
  background: var(--av-desactive-fond);
  cursor: not-allowed;
}

/* Avec le pictogramme du produit, entre la case et le texte */
.av-carte-choix--picto {
  grid-template-columns: var(--av-case) var(--av-icone-grande) minmax(0, 1fr) auto;
}

.av-carte-choix__picto {
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
}

.av-carte-choix:has(:disabled) .av-carte-choix__picto {
  opacity: var(--av-opacite-eteinte);
}

.av-carte-choix__texte {
  display: grid;
  gap: var(--av-e1);
  min-width: 0;
}

.av-carte-choix__titre,
.av-carte-choix__prix {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
}

.av-carte-choix__prix {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Une option porte le montant de la synthèse juste dessous, à la même graisse : un même « 7 € », un seul dessin. Toute
   option qui compte dans un total (data-prix), avec ou sans pictogramme (retiré de la sélection du B2C upsell, 09/11/2026) */
.av-carte-choix:has(input[data-prix]) .av-carte-choix__prix {
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
}

/* Sur l'aplat désactivé comme sur le violet pâle, le gris secondaire ne tient pas 4,5:1 : le gris d'exemple, un cran
   plus foncé, relevé par la critique du #546 */
.av-carte-choix__detail {
  color: var(--av-gris-exemple);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-carte-choix:has(:disabled) :is(.av-carte-choix__titre, .av-carte-choix__prix) {
  color: var(--av-desactive-texte);
}

/* Au téléphone, 375 px compris, la largeur de référence : quatre colonnes laissaient 200 px au texte à 375 px et 146 px à
   320 px. Le titre et le prix gardent leur rangée, le détail passe dessous, aligné sur le titre et jusqu'au bord du prix */
@media (max-width: 639px) {
  .av-carte-choix--picto .av-carte-choix__texte {
    display: contents;
  }

  /* Le pictogramme court sur le titre et le détail : seul sur la première rangée, ses 32 px creusaient 12 px sous un titre d'une
     ligne et 4 sous un titre de deux */
  .av-carte-choix--picto .av-carte-choix__picto {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .av-carte-choix--picto .av-carte-choix__prix {
    grid-column: 4;
    grid-row: 1;
  }

  .av-carte-choix--picto .av-carte-choix__detail {
    grid-column: 3 / -1;
    margin-top: var(--av-e1);
  }
}

/* ===================== Pièces jointes ===================== */

/* La zone de dépôt, partout, téléphone compris (Thomas, 21/10/2026) : toute la zone est l'étiquette du champ de
   fichiers, un toucher n'importe où ouvre le choix. Le pointillé est le seul contour admis ici : il dit « déposez ».
   Au toucher, où l'on ne glisse pas, la phrase se réduit à « Choisissez vos fichiers ». */
.av-depot {
  display: grid;
  justify-items: center;
  gap: var(--av-e2);
  padding: var(--av-e5) var(--av-e4);
  border: var(--av-trait-pointille) dashed var(--av-gris-trait);
  border-radius: var(--av-rayon-bloc);
  text-align: center;
  cursor: pointer;
}

.av-depot:focus-within {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

.av-depot__icone svg {
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  fill: var(--av-gris-texte);
}

.av-depot__texte {
  font: var(--av-texte-option);
  letter-spacing: var(--av-chasse-option);
}

.av-depot__action {
  color: var(--av-violet);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: var(--av-e1);
}

.av-depot__souris {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .av-depot:hover {
    background: var(--av-voile-survol);
  }

  .av-depot__souris {
    display: inline;
  }

  .av-depot__toucher {
    display: none;
  }
}

/* La liste des fichiers : une ligne par fichier, un filet entre deux lignes, l'état sous le nom (avancement, envoyé,
   refusé et pourquoi), « Retirer » au bord droit */
.av-fichiers {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Vide (aucun fichier encore), elle ne prend pas l'écart du champ */
.av-fichiers:empty {
  display: none;
}

.av-fichiers li {
  display: grid;
  grid-template-columns: var(--av-icone) minmax(0, 1fr) var(--av-cible);
  align-items: center;
  column-gap: var(--av-e3);
  padding-block: var(--av-e2);
}

.av-fichiers li + li {
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

.av-fichiers__icone svg {
  display: block;
  width: var(--av-icone);
  height: var(--av-icone);
  fill: var(--av-gris-texte);
}

/* L'icône, ou l'aperçu d'une image déposée (I-7), calée en haut de la ligne : 6 px sous le haut du nom (12 pour
   l'aperçu de 32 px), où la remontée de 6 px validée par Thomas la mettait sur une ligne nom et état (contrôle des
   espacements du lot 8, 23/10/2026, #572). Centrée sur la ligne entière, elle tombait trop bas à l'œil, et en face de
   l'erreur sur une ligne à trois étages (nom, erreur, « Réessayer »). La croix « Retirer » se cale sur le même axe
   que l'icône, sa cible de 44 px 6 px au-dessus du nom, dans le blanc de la ligne (8 px) : au lot 6, les deux
   pictogrammes qui encadrent le nom étaient alignés. */
.av-fichiers__icone {
  align-self: start;
  margin-top: calc(var(--av-e3) / 2);
}

.av-fichiers__apercu {
  align-self: start;
  margin-top: var(--av-e3);
}

.av-fichiers__nom {
  overflow: hidden;
  margin: 0;
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av-fichiers__etat {
  display: flex;
  align-items: flex-start;
  gap: var(--av-e1);
  margin: 0;
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
}

.av-fichiers__etat svg {
  flex: none;
  width: var(--av-e3);
  height: var(--av-e3);
  margin-top: var(--av-e1);
  fill: currentColor;
}

.av-fichiers__etat--envoye {
  color: var(--av-succes);
}

.av-fichiers__etat--erreur {
  color: var(--av-erreur);
}

.av-fichiers .av-champ__bouton {
  align-self: start;
  justify-self: end;
  margin: calc(var(--av-e3) / 2 - (var(--av-cible) - var(--av-icone)) / 2) 0 0;
}

/* La barre d'avancement : 4 px, le rail des champs, le plein violet */
.av-progression {
  display: block;
  width: 100%;
  height: var(--av-e1);
  margin: var(--av-e1) 0;
  border: 0;
  border-radius: var(--av-rayon-pilule);
  background: var(--av-aplat-fonce);
  appearance: none;
}

.av-progression::-webkit-progress-bar {
  border-radius: var(--av-rayon-pilule);
  background: var(--av-aplat-fonce);
}

.av-progression::-webkit-progress-value {
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet);
}

.av-progression::-moz-progress-bar {
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet);
}

/* ===================== Patterns de formulaire ===================== */

/* L'étape d'un tunnel (#567) : la barre d'étapes, l'en-tête de page (retour, titre, chapeau), l'avis éventuel, les
   champs, un bouton, ce qui se passe ensuite. 16 px entre deux champs, 24 px jusqu'au bouton, 12 px jusqu'à la phrase
   d'après (Thomas, 21/10/2026). */
.av-etape {
  display: grid;
  padding-top: var(--av-e4);
  padding-bottom: var(--av-e7);
}

/* Le titre d'une étape : 24/32 sur téléphone, 32/40 à partir de 960 px, à gauche ; le jeton titre-2 change seul de
   palier à 960 px (tokens.css), le titre-1 y passerait à 44/52 (#569) */
.av-titre-page--tache .av-titre-page__titre {
  font: var(--av-texte-titre-2);
  letter-spacing: var(--av-chasse-titre-2);
}

/* L'avis d'une étape (récapitulatif des erreurs, information), avant le premier champ */
.av-etape__avis {
  margin-bottom: var(--av-e5);
}

.av-etape__champs {
  display: grid;
  gap: var(--av-e4);
}

/* Deux champs côte à côte, seulement à partir de 640 px (§ 11) : prénom et nom, numéro et extension */
.av-etape__paire {
  display: grid;
  gap: var(--av-e4);
}

@media (min-width: 640px) {
  .av-etape__paire {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Un champ et son bouton sur une ligne (les formulaires des listes de rapports du compte, côte à côte comme aujourd'hui
   au bureau ; lot 3 du #545) : empilés sur téléphone, 24 px jusqu'au bouton pleine largeur, comme une étape ; à
   partir de 640 px, le seuil du § 5 (aujourd'hui 1 025 px), côte à côte sur la largeur de la colonne, comme la
   recherche qui suit, le bouton à sa largeur, à la hauteur de la saisie : décalé du libellé (16 px,
   --av-texte-libelle) et de l'écart du champ (8 px), pour que l'aide d'un champ reste sous lui */
.av-formulaire-ligne {
  display: grid;
  gap: var(--av-e5);
}

@media (min-width: 640px) {
  .av-formulaire-ligne {
    display: flex;
    align-items: flex-start;
    gap: var(--av-e4);
  }

  .av-formulaire-ligne > .av-champ {
    flex: 1 1 auto;
  }

  .av-formulaire-ligne > .av-bouton {
    flex: 0 0 auto;
    margin-top: calc(var(--av-e4) + var(--av-e2));
  }
}

/* L'action d'une étape : le bouton, puis ce qui se passe ensuite. Le bouton pleine largeur sur téléphone ; au-delà de
   640 px, à sa largeur, calé à gauche (§ 11), sauf dans la colonne d'une tâche, où il reste plein (ci-dessous, 09/11/2026) */
.av-etape__action {
  display: grid;
  justify-items: start;
  margin-top: var(--av-e5);
}

@media (max-width: 639px) {
  .av-etape__action {
    justify-items: stretch;
  }

  /* Le pied d'une carte en colonne se cale à gauche : il prend la largeur pour que son bouton plein la prenne aussi */
  .av-carte__pied:has(> .av-bouton--plein-telephone) {
    align-self: stretch;
  }
}

/* Un lien d'action entre les champs et le bouton (« Mot de passe oublié ? ») */
.av-etape__lien {
  justify-self: start;
  margin-top: var(--av-e3);
}

/* Ce qui se passe ensuite : 12 px gris, dans le bloc du bouton, à 12 px dessous, aligné à gauche sur la largeur de la
   colonne, à toutes les tailles, comme la mention sous le bouton des écrans d'Uber (Thomas, 21/10/2026) */
/* Une adresse e-mail sans point de coupure s'y coupe : sinon la grille de l'action s'élargit à sa mesure et la page
   défile de côté à 320 px (« Le lien est envoyé à … », #549) */
/* Ce qui n'est pas l'action de l'écran, replié sous elle (Thomas, 05/11/2026, 9.4 et 2.1) : une mention d'un certificat, le
   motif facultatif du teaser ; le bouton reste seul, le texte reste dans la page, mot pour mot */
.av-etape__mention {
  margin-top: var(--av-e4);
}

.av-etape__mention > .av-depliant__corps {
  padding-top: var(--av-e2);
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
}

.av-etape__ensuite {
  margin: var(--av-e3) 0 0;
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
  overflow-wrap: anywhere;
}

/* L'action d'une étape (Thomas, 09/11/2026) : sur la colonne étroite d'une tâche, mobile d'abord, le bouton prend toute la
   largeur à toutes les tailles, et ce qui le suit se centre sur lui : la phrase d'après, les notes d'une confirmation, les
   liens de sa rangée (« Nous écrire », « Passer », « Utiliser un code de secours »), l'état d'un téléchargement, la connexion.
   Restent calés à gauche, un texte long se lisant mal centré : la mention RGPD et les dépliants posés après l'action (« À
   savoir sur ce certificat », « Comment ça se passe ») */
.av-conteneur--tache .av-etape__action:has(.av-bouton) {
  justify-items: stretch;
}

.av-conteneur--tache .av-etape__action > .av-bouton:not(.av-bouton--icone),
.av-conteneur--tache .av-etape__action > .av-actions > .av-bouton:not(.av-bouton--icone) {
  width: 100%;
}

/* Seulement sous un bouton : un lien seul (« Nous écrire » d'une confirmation sans bouton, la garde du support) reste à
   gauche, comme le titre au-dessus de lui ; sans :has(), tout reste à gauche */
.av-conteneur--tache .av-etape__action:has(.av-bouton) > .av-etape__ensuite:not(.av-mentions__rgpd),
.av-conteneur--tache .av-etape__connexion {
  text-align: center;
}

.av-conteneur--tache .av-etape__action:has(.av-bouton) + .av-notes {
  justify-items: center;
  text-align: center;
}

.av-conteneur--tache .av-etape__action:has(.av-bouton) .av-actions,
.av-conteneur--tache .av-etape__action:has(.av-bouton) > .av-etat {
  justify-content: center;
}

/* Une rangée de liens posée après le bouton (« Utiliser un code de secours », « Recevoir un nouveau code ») : l'écart de la
   rangée de la confirmation, où le bouton est dans la rangée ; collée au bouton, sa cible de 44 px le touchait */
.av-etape__action > .av-bouton + .av-actions {
  margin-top: var(--av-e2);
}

/* Une phrase sous le choix, avant le bloc du bouton (l'usage des crédits, sous les packs de l'Espace Pro) : 14/20
   gris, à 16 px du choix, 24 px jusqu'au bouton (R-7 A ; Thomas, 22/10/2026, #569) */
.av-etape__note {
  margin-top: var(--av-e4);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* « Déjà un compte ? Se connecter », sous le bloc du bouton, pour le seul visiteur non connecté (la sélection du B2C
   upsell) : le lien a sa ligne de 44 px (§ 13), d'où 16 px visibles sous la phrase d'après, 4 plus les 12 que la
   ligne ajoute au-dessus du texte (Thomas, 22/10/2026, #569) */
.av-etape__connexion {
  margin-top: var(--av-e1);
}

.av-etape__connexion .av-lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--av-cible);
}

/* Le lien qui ouvre l'aide illustrée d'un champ (« Où trouver le numéro ? ») ou le texte complet d'un engagement
   (« Lire le mandat ») : sous le champ, ou sous la case, aligné sur le début de son libellé */
.av-champ__suite {
  justify-self: start;
}

.av-choix__suite {
  justify-self: start;
  margin: calc(-1 * var(--av-e2)) 0 0 calc(var(--av-case) + var(--av-e3));
}

/* Un document à lire (le mandat d'accès ; Thomas, 09/11/2026) : une pastille gris clair, son pictogramme de document,
   le nom à l'encre adoucie, sans soulignement. Elle se lit comme une pièce à consulter, pas comme une action, et ne
   concurrence jamais le bouton de l'écran. 36 px dessinés dans une cible de 44, comme une puce de filtre */
.av-document {
  display: inline-flex;
  align-items: center;
  gap: var(--av-e2);
  min-height: calc(var(--av-e6) + var(--av-e1));
  margin-block: calc((var(--av-cible) - var(--av-e6) - var(--av-e1)) / 2);
  padding: var(--av-e1) var(--av-e4);
  border: 0;
  border-radius: var(--av-rayon-pilule);
  background: var(--av-fond-champ);
  color: var(--av-gris-fonce);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
  text-decoration: none;
  cursor: pointer;
}

.av-document svg {
  flex: none;
  width: var(--av-icone-petite);
  height: var(--av-icone-petite);
  fill: currentColor;
}

/* Un document replié dans la page (le mandat d'HistoVec) : la pastille sert de résumé au dépliant ; son pictogramme ne
   tourne pas comme un chevron */
.av-depliant > summary.av-document {
  color: var(--av-gris-fonce);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

.av-depliant[open] > summary.av-document svg {
  transform: none;
}

.av-document:focus-visible {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

@media (hover: hover) {
  .av-document:hover {
    background-image: linear-gradient(var(--av-voile-survol), var(--av-voile-survol));
  }
}

.av-document:active {
  background-image: linear-gradient(var(--av-voile-appui), var(--av-voile-appui));
}

/* Le récapitulatif des erreurs, à partir de deux erreurs : un avis d'erreur en tête du formulaire, « 2 points à
   corriger », le libellé de chaque champ en lien vers lui, 44 px par lien ; il reçoit le focus à l'envoi */
.av-recap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-recap li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--av-cible);
  color: inherit;
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
  text-decoration: underline;
  text-underline-offset: var(--av-e1);
}

.av-recap:focus-visible {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

/* Un groupe titré dans une étape longue (l'adresse du vendeur) : sa légende en titre de niveau 3 */
.av-groupe--titre > .av-groupe__libelle {
  margin-bottom: var(--av-e4);
  font: var(--av-texte-titre-3);
  letter-spacing: var(--av-chasse-titre-3);
}

/* Particulier ou société (Identité ; #551, le certificat de cession) : ce qui ne vaut que pour l'un (la civilité, le
   SIRET, la naissance) est retiré quand l'autre est coché, sans script ; data-av-identite sur chaque radio
   (utils.forms.IdentiteWidget), data-av-pour sur le champ */
.av-etape__champs:has([data-av-identite="societe"]:checked) [data-av-pour="particulier"],
.av-etape__champs:has([data-av-identite="particulier"]:checked) [data-av-pour="societe"] {
  display: none;
}

/* « ou » entre deux façons de faire (l'e-mail, Google) : un filet coupé par le mot */
.av-separateur {
  display: flex;
  align-items: center;
  gap: var(--av-e3);
  margin: var(--av-e5) 0;
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-separateur::before,
.av-separateur::after {
  content: "";
  flex: 1;
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

.av-separateur + .av-etape__action {
  margin-top: 0;
}

/* Le bouton d'un tiers (« Continuer avec Google ») : neutre, sur l'aplat des champs, sans contour, le logo du tiers à
   ses couleurs ; il ne concurrence pas le bouton violet */
.av-bouton--tiers {
  gap: var(--av-e3);
  background: var(--av-fond-champ);
  color: var(--av-encre);
}

.av-bouton--tiers:active {
  background: var(--av-aplat-fonce);
}

@media (hover: hover) {
  .av-bouton--tiers:hover {
    background: var(--av-aplat-fonce);
    color: var(--av-encre);
  }
}

/* Les codes de secours : une grille de deux colonnes sur l'aplat, en chiffres tabulaires */
.av-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--av-e3) var(--av-e4);
  margin: 0;
  padding: var(--av-e4);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-aplat);
  list-style: none;
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
  font-variant-numeric: tabular-nums;
}

/* Les marques d'un SSO : Autoviza® puis le partenaire, un filet vertical entre les deux */
.av-marques {
  display: flex;
  align-items: center;
  gap: var(--av-e4);
}

.av-marques > * + * {
  padding-left: var(--av-e4);
  border-left: var(--av-trait-filet) solid var(--av-gris-trait);
}

.av-marques img {
  display: block;
  height: var(--av-e5);
  width: auto;
}

/* Un relevé rectifié (support) : une fiche par relevé, l'ancien kilométrage barré en gris, le nouveau à l'encre ; ni
   vert ni rouge, c'est un fait du véhicule (Thomas, 21/10/2026) */
.av-releve {
  display: grid;
  gap: var(--av-e1);
  margin: 0;
  padding: var(--av-e4);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-aplat);
}

.av-releve__titre {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
}

.av-releve__ancien {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-releve__ancien del {
  text-decoration-thickness: var(--av-trait-filet);
}

.av-releve__nouveau {
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
}

/* ===================== Avis ===================== */

/* Avis : l'état d'une tâche (envoyé, à vérifier, refusé), un seul composant à quatre tons à la place des cinq alertes
   du site. Toujours un mot avec l'icône, jamais la couleur seule ; jamais sur un fait du véhicule, que le rapport
   constate sans le juger (§ 2). Information par défaut, sur le bleu d'information. */
.av-avis {
  display: grid;
  grid-template-columns: var(--av-icone) minmax(0, 1fr);
  column-gap: var(--av-e3);
  padding: var(--av-e4);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-avis-fond, var(--av-info-pale));
  color: var(--av-encre);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-avis > svg {
  width: var(--av-icone);
  height: var(--av-icone);
  fill: var(--av-violet);
}

/* Une adresse e-mail redite dans l'avis (« Rapport envoyé à … », « Invitation envoyée à … », B-7 A et B-9 A ; Thomas,
   22/10/2026, #570) passe à la ligne plutôt que d'élargir l'avis à 320 px : « anywhere », comme av-etat et
   av-liste__nom, car « break-word » ne réduit pas la largeur minimale du texte, sur laquelle la grille se dimensionne
   (une adresse de 39 caractères débordait de 30 px) */
.av-avis__contenu {
  display: grid;
  gap: var(--av-e1);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Le titre d'un avis en 14/20 600 sur tout le site, au lieu du 14/16 d'un libellé (Q2-3 A ; Thomas, 22/10/2026,
   #570) : l'interligne du texte qui le suit, comme la bannière et le texte d'état ; sur deux lignes à 375 et 320 px
   (« Identification momentanément impossible »), le 14/16 tassait le haut de l'avis, et la première ligne du titre
   s'aligne sur l'icône de 20 px */
.av-avis__titre {
  font: var(--av-texte-court);
  font-weight: 600;
  letter-spacing: var(--av-chasse-court);
}

/* Un lien dans un avis prend la couleur de son ton, dont le contraste est vérifié */
.av-avis .av-lien {
  color: inherit;
}

.av-avis--succes {
  background: var(--av-avis-fond, var(--av-succes-pale));
  color: var(--av-succes);
}

.av-avis--attention {
  background: var(--av-avis-fond, var(--av-attention-pale));
  color: var(--av-attention);
}

.av-avis--erreur {
  background: var(--av-avis-fond, var(--av-erreur-pale));
  color: var(--av-erreur);
}

.av-avis--succes > svg,
.av-avis--attention > svg,
.av-avis--erreur > svg {
  fill: currentColor;
}

/* Le tracé prend la couleur de son icône : un fichier qui porte la sienne (warning-circle, en violet) la perd ici,
   sans quoi l'icône d'un avis d'erreur resterait violette sur le rouge (§ 6, relevé à la MR 3 du #546) */
.av-avis > svg path,
.av-encadre > svg path,
.av-accordeon__question > svg path {
  fill: inherit;
}

/* ===================== Étiquettes et badges ===================== */

/* Étiquette : une donnée courte en pilule (« Nouveau », « Rapport détaillé ») ; aucune ne juge le véhicule */
.av-etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--av-e1);
  min-height: var(--av-e5);
  padding: 0 var(--av-e2);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-aplat-fonce);
  color: var(--av-gris-fonce);
  font: var(--av-texte-etiquette);
  letter-spacing: var(--av-chasse-etiquette);
  white-space: nowrap;
}

/* Usage détecté (taxi, location, école de conduite) : violet plein, texte blanc, sans icône (Thomas, 19/10/2026) */
.av-etiquette--signal {
  background: var(--av-violet);
  color: var(--av-blanc);
}

/* Une valeur à lire d'un coup d'œil, le kilométrage d'un événement : 14 px à l'encre, chiffres tabulaires */
.av-etiquette--valeur {
  color: var(--av-encre);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  font-variant-numeric: tabular-nums;
}

/* L'état d'une tâche ou d'une commande (payée, en attente, échouée), toujours en mots */
.av-etiquette--succes {
  background: var(--av-succes-pale);
  color: var(--av-succes);
}

.av-etiquette--attention {
  background: var(--av-attention-pale);
  color: var(--av-attention);
}

.av-etiquette--erreur {
  background: var(--av-erreur-pale);
  color: var(--av-erreur);
}

/* Badge de source : le nom de la source à la suite du titre d'un événement, dans le titre (Q-11 A), à ses couleurs
   (remplaçables par la source) ; en lien, sa cible fait 44 px de haut sans décaler la ligne */
.av-source {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--av-e5) - var(--av-e1));
  padding: 0 var(--av-e2);
  border: 1px solid var(--av-source-trait);
  border-radius: var(--av-rayon);
  background: var(--av-source-fond);
  color: var(--av-source-texte);
  font: var(--av-texte-etiquette);
  letter-spacing: var(--av-chasse-etiquette);
  text-decoration: none;
  white-space: nowrap;
}

a.av-source::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--av-e3)) calc(-1 * var(--av-e1));
}

@media (hover: hover) {
  a.av-source:hover {
    border-color: var(--av-gris-texte);
  }
}

/* Marque de la source en noir, comme sur le site (CARFAX) */
.av-source--sombre {
  border-color: var(--av-encre);
  background: var(--av-encre);
  color: var(--av-blanc);
}

/* Code (constructeur, rubrique de la carte grise) : un badge gris très léger, à droite de la ligne ou en tête dans
   une colonne de même largeur, jamais collé au nom ni au-dessus de lui */
.av-code {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--av-e5) - var(--av-e1));
  padding: 0 var(--av-e2);
  border-radius: var(--av-rayon);
  background: var(--av-aplat);
  color: var(--av-gris-fonce);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===================== Cartes et listes ===================== */

/* Carte : un bloc qui groupe un contenu, posé sur l'aplat, sans contour ni ombre (§ 6) ; le nom en 600, le détail
   en 14 px gris, un pied pour l'action. Une carte qui ouvre quelque chose porte un vrai lien, étendu à toute la carte. */
.av-carte {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--av-e1);
  padding: var(--av-e4);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-aplat);
}

.av-carte__titre {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
  text-wrap: pretty;
}

.av-carte__texte {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Au-dessus du lien étendu : une action du pied reste cliquable */
.av-carte__pied {
  position: relative;
  z-index: var(--av-z-dessus);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--av-e2) var(--av-e5);
  margin-top: var(--av-e2);
}

/* Un bouton dans le pied, son bord à 24 px du texte, l'écart du texte d'une carte à son action (§ 5) : le pied est fait
   pour un lien d'action, dont la ligne de 44 px donne seule les 24 visibles ; un bouton montre son bord (la carte du
   solde à 0 crédit, l'offre SOH du rapport) */
.av-carte__pied:has(> .av-bouton) {
  margin-top: calc(var(--av-e5) - var(--av-e1));
}

.av-carte__lien {
  color: inherit;
  text-decoration: none;
}

.av-carte__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.av-carte__lien:focus-visible {
  outline: none;
}

.av-carte__lien:focus-visible::after {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

@media (hover: hover) {
  .av-carte--lien:hover {
    background: var(--av-aplat-fonce);
  }

  /* Le gris secondaire n'atteint pas 4,5:1 sur l'aplat foncé */
  .av-carte--lien:hover .av-carte__texte {
    color: var(--av-gris-fonce);
  }
}

/* Sur une section déjà sur l'aplat, la carte passe en blanc : jamais un aplat sur un aplat (1,07:1) */
.av-carte--sur-aplat {
  background: var(--av-blanc);
}

/* Contour fin : seulement pour des cartes qui défilent, qu'un contour fait comprendre comme telles (exception
   écrite, § 6 : les cartes du calendrier d'entretien) */
.av-carte--contour {
  border: var(--av-trait-filet) solid var(--av-gris-trait);
  background: var(--av-blanc);
}

/* Grille de cartes : une colonne sur téléphone, autant de colonnes de 16rem au moins que la largeur en loge */
.av-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--av-e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les cartes d'aiguillage (Contact : le support ou tout autre sujet) : plus carrées au bureau, le pictogramme en haut,
   la question en bas (Thomas, 09/11/2026 : en bandeaux de 124 px, elles se lisaient comme des boutons) */
@media (min-width: 640px) {
  .av-cartes--aiguillage > .av-carte {
    aspect-ratio: 4 / 3;
    align-content: space-between;
  }
}

/* En grille, les cartes d'une rangée ont la hauteur de la plus haute : le pied qui finit une carte se pose en bas, pour
   que leurs actions tombent à la même hauteur, à 28 px du bas (§ 5 ; les cartes « Obtenir un rapport Autoviza® » du
   tableau de bord, lot 3 du #545). La carte à logo, en deux colonnes, garde sa grille */
.av-cartes > .av-carte:not(.av-carte--logo):has(> .av-carte__pied:last-child) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.av-cartes > .av-carte:not(.av-carte--logo) > .av-carte__pied:last-child {
  margin-top: auto;
  padding-top: var(--av-e2);
}

/* De même, une carte à vignette (la liste des guides) pose sa date en bas, pour que les dates d'une rangée tombent à la même
   hauteur quelles que soient les longueurs du titre et de l'extrait (7.1) ; l'extrait reste sous son titre */
.av-cartes > .av-carte:has(> .av-carte__vignette) {
  display: flex;
  flex-direction: column;
}

.av-cartes > .av-carte:has(> .av-carte__vignette) > .av-carte__vignette {
  flex: none;
}

.av-cartes > .av-carte:has(> .av-carte__vignette) > .av-carte__texte:not(.av-carte__texte--extrait):last-child {
  margin-top: auto;
}

/* Titre d'un groupe : le titre en 700, suivi de son nombre en gris (« Options (5) ») ; 16 px jusqu'à sa liste */
.av-titre-groupe {
  margin-bottom: var(--av-e4);
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

.av-titre-groupe__nombre {
  color: var(--av-gris-texte);
}

/* Liste à filet : une ligne par élément, un filet simple entre deux lignes, trois niveaux de texte, une colonne ;
   à droite de la ligne, une valeur, un badge ou une action */
.av-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-liste__ligne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--av-e1) var(--av-e4);
  padding: var(--av-e3) 0;
}

.av-liste__ligne + .av-liste__ligne {
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

/* Une adresse e-mail en nom ou en détail (un collaborateur, un envoi du rapport) passe à la ligne au lieu de déborder à
   320 px à côté d'une action ou d'une étiquette (relevé de l'atelier du #570, B-9, B-11, V-3 ; 22/10/2026) */
.av-liste__nom {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.av-liste__detail {
  grid-column: 1;
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  overflow-wrap: anywhere;
}

/* Au-dessus du lien étendu : une action de la ligne reste cliquable */
.av-liste__fin {
  position: relative;
  z-index: var(--av-z-dessus);
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

/* Une ligne qui ouvre quelque chose : le lien du nom s'étend à toute la ligne, le nom passe au violet au survol */
.av-liste__lien {
  color: inherit;
  text-decoration: none;
}

.av-liste__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.av-liste__lien:focus-visible {
  outline: none;
}

.av-liste__lien:focus-visible::after {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: calc(-1 * var(--av-decalage-focus));
}

@media (hover: hover) {
  .av-liste__lien:hover {
    color: var(--av-violet);
  }

  .av-liste__lien:hover ~ .av-liste__chevron {
    color: var(--av-violet);
  }
}

/* Une ligne qui poste (choisir un espace : la page de choix de la connexion, M-10 A, et la page « mauvais espace »,
   S-17 A, leurs lignes en POST par M-7 A ; 23/10/2026, #571) : le nom est un <button> relié par form= à son
   <form method="post">, posé hors de la liste, pour rester le frère du chevron ; il prend le dessin du lien étendu,
   sans fond, sans cadre, sans marge intérieure */
button.av-liste__lien {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

/* Liste qu'on parcourt (rapports du compte, rubriques) : 16 px de part et d'autre de chaque ligne, la ligne d'Uber
   (#562) ; une longue liste qu'on lit (équipements, fiche technique) garde ses 12 px */
.av-liste--parcours .av-liste__ligne {
  padding: var(--av-e4) 0;
}

/* Chevron d'une ligne qui ouvre une page, et d'elle seule : jamais pour avancer dans un parcours. Gris, tout à droite,
   à 16 px du texte, ou dans sa propre colonne après une valeur ou un badge (« échéance, chevron » des rapports du
   compte) ; le clic le traverse jusqu'au lien étendu de la ligne (sa rotation le ferait passer au-dessus) */
.av-liste__chevron {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  color: var(--av-gris-texte);
  pointer-events: none;
}

.av-liste__fin + .av-liste__chevron {
  grid-column: 3;
}

.av-liste__chevron svg {
  width: var(--av-icone);
  height: var(--av-icone);
  transform: rotate(-90deg);
  fill: currentColor;
}

/* L'icône du site porte sa couleur sur son tracé ({% svg 'img/icons/angle-small-down' %}) : le gris la remplace */
.av-liste__chevron path {
  fill: currentColor;
}

/* ===================== Tableau de données ===================== */

/* Tableau : à partir de 768 px, à cases d'un seul gris, l'aplat foncé (exception écrite, § 6 : sans cases, la
   lecture d'une ligne à l'autre se perdait), tout aligné à gauche, chiffres tabulaires. En dessous, un tableau de
   données reste un tableau, dans son cadre (av-tableau-cadre, qui défile, la page jamais) ; un tableau juridique, en
   phrases (--empile), devient une fiche par ligne. Les rôles (role="table", "row", "cell") restent écrits pour le
   lecteur d'écran. */
.av-tableau {
  width: 100%;
  border-collapse: collapse;
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  font-variant-numeric: tabular-nums;
}

.av-tableau__nombre {
  white-space: nowrap;
}

/* Le gras d'un titre de ligne rédigé (« **HistoVec** » d'un guide) n'en fait pas un titre plus appuyé que ses voisins
   (plus fort que le gras du texte long, .av-texte-long strong) */
.av-tableau .av-tableau__titre strong {
  font-weight: inherit;
}

/* La fiche, sous 768 px (T-4, Thomas, 23/10/2026 ; --empile, Thomas, 05/11/2026 : des pages juridiques, en phrases, que
   le cadre ferait défiler pour rien) : la cellule qui nomme la ligne en titre, en tête même quand elle n'est pas la
   première, puis une donnée par ligne, le libellé de sa colonne (data-libelle) en gris au-dessus de la valeur, 4 px entre
   eux, 16 entre deux données. Les 16 px se prennent au-dessus de chaque donnée (12, plus les 4 du titre ou de la donnée
   d'avant) : du titre à la première donnée et de la dernière au filet, 16 aussi, comme du filet au titre suivant ; à
   8 px de part et d'autre, le filet avait 20 px au-dessus et 16 dessous. */
@media (max-width: 767px) {
  .av-tableau--empile {
    display: block;
  }

  /* L'en-tête masqué, lu par le lecteur d'écran ; celui du comparatif aussi (Pages de vente, #545) */
  .av-tableau--empile thead,
  .av-comparatif thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .av-tableau--empile tbody {
    display: block;
  }

  .av-tableau--empile tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--av-e3) 0;
  }

  .av-tableau--empile tr + tr {
    border-top: var(--av-trait-filet) solid var(--av-gris-trait);
  }

  .av-tableau--empile td {
    display: block;
    grid-column: 1 / -1;
    padding-block: var(--av-e3) var(--av-e1);
    text-align: left;
  }

  .av-tableau--empile td::before {
    content: attr(data-libelle);
    display: block;
    margin-bottom: var(--av-e1);
    color: var(--av-gris-texte);
  }

  /* La cellule qui nomme la ligne : en titre de la fiche, sans libellé, en tête même quand elle n'est pas la première
     (la finalité d'un tableau juridique), passée à la ligne comme un nom (§ 4, pretty : pas de mot seul sur sa
     dernière ligne) */
  .av-tableau--empile .av-tableau__titre {
    order: -1;
    padding-block: var(--av-e1);
    font: var(--av-texte-nom);
    letter-spacing: var(--av-chasse-nom);
    text-wrap: pretty;
  }

  .av-tableau--empile .av-tableau__titre::before,
  .av-tableau--empile .av-tableau__numero::before,
  .av-tableau--empile td:not([data-libelle])::before {
    content: none;
  }

  /* Le numéro de la ligne (av-tableau__numero, le N° d'un tableau juridique ; Thomas, 24/10/2026 : « N° » puis « 1. »
     sur deux lignes sous le titre se lisaient mal) : sur la ligne du titre, avant lui, au style du titre, sans son
     libellé : « 1. Inscription dans le cadre du formulaire de contact ». Le numéro sur 16 px au moins (« 1. » en
     fait 12, « 2. » 15) : le titre et son retrait partent du même bord d'une fiche à l'autre, de « 1. » à « 9. ». Sans
     titre à précéder (un tableau de versions), le numéro reste une donnée, sans cette classe. Au bureau, la colonne
     « N° » reste. */
  .av-tableau--empile tr:has(> .av-tableau__numero) {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--av-e1);
  }

  .av-tableau--empile .av-tableau__numero {
    grid-row: 1;
    grid-column: 1;
    min-width: var(--av-e4);
    padding-block: var(--av-e1);
    font: var(--av-texte-nom);
    letter-spacing: var(--av-chasse-nom);
  }

  .av-tableau--empile tr:has(> .av-tableau__numero) > .av-tableau__titre {
    grid-row: 1;
    grid-column: 2;
  }
}

/* Le tableau au téléphone (Thomas, 05/11/2026 : les fiches perdaient la lecture d'une colonne à l'autre) : il reste un
   tableau, plus dense, dans un cadre qui défile de côté, la page jamais. Une ombre au bord dit qu'il y a une suite ; elle
   disparaît en bout de course (background-attachment : local, l'ombre fixe dessous). autoviza.js le rend atteignable au
   clavier quand il défile.
   Les colonnes prioritaires sont celles de tête, l'ordre des colonnes dit la priorité : la première reste en place, pour
   garder le contexte ; les dates et les nombres (av-tableau__nombre) s'ajustent à leur contenu, sans passer à la ligne ;
   le texte prend ce qui reste, 120 px au moins (« Déclaration de kilométrage » sur deux lignes), et passe à la ligne. Le
   téléphone montre ainsi trois colonnes et le bord de la suivante : à 6 colonnes de 112 px au moins, il en montrait
   deux. */
@media (max-width: 767px) {
  .av-tableau-cadre {
    overflow-x: auto;
    border: var(--av-trait-filet) solid var(--av-aplat-fonce);
    border-radius: var(--av-rayon-bloc);
    background:
      linear-gradient(to left, var(--av-blanc), var(--av-blanc)) right / var(--av-e4) 100% no-repeat local,
      linear-gradient(to left, var(--av-voile-appui), transparent) right / var(--av-e2) 100% no-repeat scroll;
  }

  .av-tableau-cadre .av-tableau {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font: var(--av-texte-court);
    letter-spacing: var(--av-chasse-court);
  }

  .av-tableau-cadre th {
    padding: var(--av-e2);
    background: var(--av-aplat-fonce);
    color: var(--av-gris-fonce);
    font: var(--av-texte-etiquette);
    letter-spacing: var(--av-chasse-etiquette);
    text-align: left;
    vertical-align: bottom;
  }

  .av-tableau-cadre td {
    min-width: calc(var(--av-e9) + var(--av-e5));
    padding: var(--av-e2);
    border-top: var(--av-trait-filet) solid var(--av-aplat-fonce);
    text-align: left;
    vertical-align: top;
  }

  .av-tableau-cadre .av-tableau__nombre {
    width: 1%;
    min-width: 0;
  }

  .av-tableau-cadre :is(th, td):first-child {
    position: sticky;
    left: 0;
    border-right: var(--av-trait-filet) solid var(--av-aplat-fonce);
  }

  .av-tableau-cadre td:first-child {
    background: var(--av-blanc);
    font-weight: 600;
  }

  .av-tableau-cadre .av-tableau__titre {
    font-weight: 600;
  }
}

@media (min-width: 768px) {
  .av-tableau {
    border: 1px solid var(--av-aplat-fonce);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--av-rayon-bloc);
    overflow: hidden;
  }

  .av-tableau th {
    padding: var(--av-e2) var(--av-e3);
    background: var(--av-aplat-fonce);
    color: var(--av-gris-fonce);
    font: var(--av-texte-etiquette);
    letter-spacing: var(--av-chasse-etiquette);
    text-align: left;
    vertical-align: bottom;
  }

  .av-tableau td {
    padding: var(--av-e3);
    border-top: 1px solid var(--av-aplat-fonce);
    text-align: left;
    vertical-align: top;
  }

  .av-tableau th + th,
  .av-tableau td + td {
    border-left: 1px solid var(--av-aplat-fonce);
  }

  /* La cellule qui nomme la ligne, en 600, à l'interligne de ses voisines (14/20, du tableau) : en 14/16, sa première
     ligne remontait de 2 px et un titre de deux lignes ou plus se tassait (le précédent de Q2-3 A) */
  .av-tableau .av-tableau__titre {
    font-weight: 600;
  }
}

/* Légende : la phrase qui doit rester visible sans clic, sous le tableau qu'elle commente */
.av-tableau-legende {
  margin-top: var(--av-e3);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* ===================== Accordéon et onglets ===================== */

/* Accordéon : un <details> natif, sans JS (#468) ; la question en titre, un « + » violet qui tourne en « × », un
   filet simple entre deux questions (FAQ, aide) */
.av-accordeon + .av-accordeon {
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

.av-accordeon__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-e4);
  min-height: calc(var(--av-cible) + var(--av-e3));
  padding: var(--av-e3) 0;
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
  cursor: pointer;
  list-style: none;
}

.av-accordeon__question::-webkit-details-marker {
  display: none;
}

.av-accordeon__question svg {
  flex: none;
  width: var(--av-icone);
  height: var(--av-icone);
  fill: var(--av-violet);
  transition: transform var(--av-duree) var(--av-courbe);
}

.av-accordeon[open] .av-accordeon__question svg {
  transform: rotate(45deg);
}

.av-accordeon__reponse {
  display: grid;
  gap: var(--av-e3);
  padding-bottom: var(--av-e5);
  color: var(--av-gris-fonce);
}

/* Onglets : soulignés, l'actif à l'encre souligné de violet ; sur téléphone ils se partagent la largeur. Motif
   « tabs » de l'ARIA (flèches, Début, Fin), par autoviza.js (#546), qui ne montre que le panneau choisi. Sans lui, les
   panneaux se suivent, chacun sous son titre (.av-onglets__titre, rendu par le serveur), et la liste, qui ne ferait
   rien, est cachée ; avec lui, l'onglet dit le titre, que la feuille cache */
.av-onglets__liste {
  display: flex;
  box-shadow: inset 0 -1px 0 var(--av-gris-trait);
}

:root:not(.av-js) .av-onglets__liste,
.av-js .av-onglets__titre {
  display: none;
}

.av-onglets__titre {
  margin: 0;
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

.av-onglet {
  flex: 1 1 0;
  min-height: var(--av-cible);
  padding: 0 var(--av-e1);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--av-gris-texte);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
  cursor: pointer;
}

.av-onglet[aria-selected="true"] {
  border-bottom-color: var(--av-violet);
  color: var(--av-encre);
}

@media (hover: hover) {
  .av-onglet:hover {
    color: var(--av-encre);
  }
}

.av-onglets__panneau {
  margin-top: var(--av-e5);
}

.av-onglets__panneau[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .av-onglets__liste {
    gap: var(--av-e6);
  }

  .av-onglet {
    flex: none;
    padding: 0;
    font: var(--av-texte-bouton);
    letter-spacing: var(--av-chasse-bouton);
  }
}

/* ===================== Explications et fenêtre ===================== */

/* Encadré : l'explication d'un chapitre ou d'une étape, sur l'aplat, en tête de ce qu'il explique ; icône
   d'information, texte 14 px en gris foncé. Sur téléphone, il passe pleine largeur, sans arrondi, son texte restant
   dans la colonne (§ 5). */
.av-encadre {
  display: grid;
  grid-template-columns: var(--av-icone) minmax(0, 1fr);
  column-gap: var(--av-e3);
  padding: var(--av-e4);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-aplat);
  color: var(--av-gris-fonce);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-encadre > svg {
  width: var(--av-icone);
  height: var(--av-icone);
  fill: var(--av-violet);
}

.av-encadre__texte {
  display: grid;
  gap: var(--av-e2);
  min-width: 0;
}

@media (max-width: 639px) {
  .av-encadre {
    margin-inline: calc(-1 * var(--av-gouttiere));
    padding-inline: var(--av-gouttiere);
    border-radius: 0;
  }

  /* Dans une carte, une fenêtre ou une étape, il reste dans son bloc : pas de débord, pas de défilement de côté (§ 5 ;
     l'étape ajoutée au #570, relevé de l'atelier B-8, 22/10/2026 : l'encadré d'une étape débordait à 375 px) */
  .av-carte .av-encadre,
  .av-fenetre .av-encadre,
  .av-etape .av-encadre {
    margin-inline: 0;
    padding-inline: var(--av-e4);
    border-radius: var(--av-rayon-bloc);
  }
}

/* Information d'un titre : un (i) violet de 20 px collé au dernier mot du titre, une cible de 44 px qui ne grandit
   pas la ligne ; il ouvre une fenêtre, pour ce qui n'est pas indispensable. Positionné, il passe au-dessus de la cible
   étendue d'un badge de source qu'il suit (a.av-source::after, Q-11 A) : ses 44 px restent à lui (#545) */
.av-info {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--av-cible);
  height: var(--av-cible);
  margin: calc((var(--av-e5) - var(--av-cible)) / 2) calc((var(--av-icone) - var(--av-cible)) / 2);
  padding: 0;
  border: 0;
  border-radius: var(--av-rayon-pilule);
  background: none;
  color: var(--av-violet);
  vertical-align: top;
  cursor: pointer;
}

.av-info svg {
  width: var(--av-icone);
  height: var(--av-icone);
  fill: currentColor;
}

/* Le contour de focus suit l'icône, pas la cible : un rond de 48 px sur une ligne de 24 px barrait la ligne voisine
   d'un titre qui passe à la ligne (§ 13, la recette de « Retirer » et du résumé d'un dépliant ; #545) */
.av-info:focus-visible {
  outline: none;
}

.av-info:focus-visible svg {
  border-radius: var(--av-rayon-pilule);
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

@media (hover: hover) {
  .av-info:hover {
    background: var(--av-violet-pale);
  }
}

/* Fenêtre : un popover natif (une information) ou un <dialog> (une confirmation). Sur téléphone, une feuille qui
   monte du bas ; au-delà de 640 px, centrée. Un titre, un bouton de fermeture, le voile ; Échap la ferme. */
.av-fenetre {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: 85dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--av-rayon-bloc) var(--av-rayon-bloc) 0 0;
  background: var(--av-blanc);
  color: var(--av-encre);
  overflow: hidden;
  /* La feuille du bas ne passe pas sous la barre d'accueil de l'iPhone */
  padding-bottom: env(safe-area-inset-bottom);
  /* Sa colonne, posée ici pour qu'elle tienne aussi pendant la sortie : sans display: flex, elle ne fait rien */
  flex-direction: column;
}

/* Ouverte, la fenêtre est une colonne : la tête et le pied restent, seul le corps défile (#568). Les trois façons de
   l'ouvrir dans un :is(), dont la liste tolère un sélecteur inconnu : groupés (« :popover-open, [open] »), un
   navigateur sans popover rejetait toute la règle, et un <dialog> ouvert y perdait sa colonne ; --ouverte est
   l'ouverture du repli sans popover, plus bas (F-17 A, 23/10/2026, #571) */
.av-fenetre:is(:popover-open, [open], .av-fenetre--ouverte) {
  display: flex;
  animation: av-monte var(--av-duree-entree) var(--av-courbe-entree);
}

.av-fenetre::backdrop {
  background: var(--av-voile);
  transition: opacity var(--av-duree-sortie) var(--av-courbe-sortie);
}

/* La sortie (#546) : la fenêtre redescend et s'efface, plus vive qu'à l'entrée, son voile avec elle ; display et
   overlay la gardent affichée, dans la couche du dessus, le temps de la transition (allow-discrete). Un navigateur qui
   ne connaît pas allow-discrete rejette la déclaration, et la fenêtre se ferme d'un coup ; un navigateur qui le connaît
   sans la propriété overlay (Safari, Firefox) la sort de la couche du dessus dès la fermeture : son voile part d'un
   coup, et elle s'efface sous l'en-tête collé. Le mouvement réduit l'arrête, comme tout mouvement. L'état fermé, sous
   :where(), ne pèse rien : une fenêtre montrée fermée dans le flux (le catalogue) le défait d'une règle. */
.av-fenetre {
  transition:
    opacity var(--av-duree-sortie) var(--av-courbe-sortie),
    transform var(--av-duree-sortie) var(--av-courbe-sortie),
    overlay var(--av-duree-sortie) allow-discrete,
    display var(--av-duree-sortie) allow-discrete;
}

.av-fenetre:where([popover]:not(.av-fenetre--ouverte), dialog):where(:not(:popover-open, [open])) {
  opacity: 0;
  transform: translateY(var(--av-e5));
}

.av-fenetre:where(:not(:popover-open, [open]))::backdrop {
  opacity: 0;
}

/* Sous une fenêtre bloquante, la page ne défile pas (par locked-screen) ; le panneau de l'aide du
   vendeur, qui ne bloque rien, la laisse défiler. Le :is() tolère :popover-open là où il est inconnu (#546) */
html:has(.av-fenetre:is(:modal, :popover-open, .av-fenetre--ouverte):not(.av-fenetre--bulle)) {
  overflow: hidden;
}

@keyframes av-monte {
  from {
    opacity: 0;
    transform: translateY(var(--av-e5));
  }
}

.av-fenetre__tete {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-e3);
  padding: var(--av-e2) var(--av-e2) var(--av-e2) var(--av-e4);
  border-bottom: var(--av-trait-filet) solid var(--av-gris-trait);
  background: var(--av-blanc);
}

/* Un titre qui cite une adresse e-mail (« Retirer s.benali@garage-martin.fr de la société ? », A-3 A) se coupe après
   son @ (<wbr>), jamais à son trait d'union (insécable, « garage-&NoBreak;martin.fr ») ; overflow-wrap reste le
   dernier recours, comme le nom d'une ligne de liste (23/10/2026, #571) */
.av-fenetre__titre {
  font: var(--av-texte-titre-3);
  letter-spacing: var(--av-chasse-titre-3);
  overflow-wrap: anywhere;
}

/* La tête d'une fenêtre qui dit où l'on est (le menu du compte) : le titre, puis ses lignes à 4 px, la société à
   l'encre en 600, l'e-mail en gris ; un nom long passe à la ligne, jamais tronqué ; le bouton Fermer reste en face du
   titre (#568) */
.av-fenetre__tete:has(.av-fenetre__entete) {
  align-items: flex-start;
}

.av-fenetre__entete {
  display: grid;
  gap: var(--av-e1);
  min-width: 0;
  padding-block: var(--av-e2);
}

.av-fenetre__detail {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  overflow-wrap: anywhere;
}

.av-fenetre__detail--fort {
  color: var(--av-encre);
  font-weight: 600;
}

.av-fenetre__corps {
  display: grid;
  flex: 1 1 auto;
  gap: var(--av-e3);
  min-height: 0;
  padding: var(--av-e4) var(--av-e4) var(--av-e6);
  overflow: auto;
  overscroll-behavior: contain;
}

/* L'image d'une aide illustrée (la carte grise et sa rubrique) : la largeur de la fenêtre, angles des blocs */
.av-fenetre__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--av-rayon-bloc);
}

.av-fenetre__pied {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--av-e2) var(--av-e5);
  padding: 0 var(--av-e4) var(--av-e5);
}

/* À partir de 640 px, centrée, sur la largeur de fenêtre, la même pour toutes (F-15 A, 23/10/2026, #571 : 35rem
   écrits en dur jusque-là) */
@media (min-width: 640px) {
  .av-fenetre {
    inset: 0;
    width: min(var(--av-largeur-fenetre), calc(100% - 2 * var(--av-e6)));
    height: fit-content;
    margin: auto;
    border-radius: var(--av-rayon-bloc);
  }

  .av-fenetre__tete {
    padding: var(--av-e3) var(--av-e3) var(--av-e3) var(--av-e5);
  }

  .av-fenetre__corps {
    padding: var(--av-e5);
  }

  .av-fenetre__pied {
    padding: 0 var(--av-e5) var(--av-e5);
  }
}

/* ===================== Mise en page et en-têtes ===================== */

/* Conteneur : la colonne de la page, 1 080 px au plus, la gouttière de 16 puis 32 px ; --tache pour la colonne d'une
   tâche (480 px) */
.av-conteneur {
  width: 100%;
  max-width: calc(var(--av-largeur) + 2 * var(--av-gouttiere));
  margin-inline: auto;
  padding-inline: var(--av-gouttiere);
}

.av-conteneur--tache {
  max-width: calc(var(--av-largeur-tache) + 2 * var(--av-gouttiere));
}

@media (min-width: 640px) {
  .av-conteneur {
    max-width: calc(var(--av-largeur) + 2 * var(--av-gouttiere-large));
    padding-inline: var(--av-gouttiere-large);
  }

  .av-conteneur--tache {
    max-width: calc(var(--av-largeur-tache) + 2 * var(--av-gouttiere-large));
  }
}

/* Colonne de lecture : un article (guide, question de la FAQ, article du centre d'aide) centré sur 40rem ; la liste
   des guides, avec ses cartes, garde le conteneur de 1 080 px (Thomas, 21/10/2026, #568) */
.av-conteneur--lecture {
  max-width: calc(var(--av-largeur-lecture) + 2 * var(--av-gouttiere));
}

@media (min-width: 640px) {
  .av-conteneur--lecture {
    max-width: calc(var(--av-largeur-lecture) + 2 * var(--av-gouttiere-large));
  }
}

/* Gabarit de page : le corps en colonne, le contenu pousse le pied en bas d'une page courte */
.av-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.av-page__contenu {
  flex: 1 0 auto;
}

/* Une page de lecture finit à 64 puis 96 px du pied, comme la dernière section d'une page de vente (passe 2,
   21/10/2026) */
.av-page__contenu--lecture {
  padding-bottom: var(--av-e8);
}

@media (min-width: 960px) {
  .av-page__contenu--lecture {
    padding-bottom: var(--av-e9);
  }
}

/* En-tête du site et du compte : blanc, 64 px, un filet en bas, collé en haut quand on fait défiler, comme
   uber.com (Thomas, 21/10/2026) ; le logo à gauche ; la navigation à partir de 960 px, groupée à 48 px du logo, le
   compte seul à droite ; avant 960 px, un bouton menu qui ouvre la même navigation dans une fenêtre (#546) */
.av-entete {
  position: sticky;
  top: 0;
  z-index: var(--av-z-entete);
  background: var(--av-blanc);
  box-shadow: inset 0 -1px 0 var(--av-gris-trait);
}

.av-entete__barre {
  display: flex;
  align-items: center;
  gap: var(--av-e4);
  min-height: var(--av-hauteur-entete);
}

/* Le logo : une cible de 44 px, même le logo carré, sans élargir le dessin (le filet d'av-marques reste à 16 px) */
.av-entete__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--av-cible);
}

.av-entete__logo::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--av-cible);
}

.av-entete__logo img {
  display: block;
  width: auto;
  height: var(--av-e5);
}

.av-entete__nav {
  display: none;
  gap: var(--av-e5);
  margin-left: var(--av-e6);
}

.av-entete__lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--av-cible);
  color: var(--av-encre);
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
  text-decoration: none;
}

.av-entete__lien[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--av-violet);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

@media (hover: hover) {
  .av-entete__lien:hover {
    color: var(--av-violet);
  }
}

.av-entete__actions {
  display: flex;
  align-items: center;
  gap: var(--av-e2);
  margin-left: auto;
}

/* Une action de l'en-tête (le compte) : un bouton à icône sous 960 px (av-bouton av-bouton--icone), le mot au-delà, à
   l'encre comme la navigation ; un seul lien, dont le texte reste le nom. Les pages du site sont en cache : le serveur
   y écrit « Se connecter », le script pose « Mon compte » et son lien pour un client connecté, jamais le rendu serveur
   (#568) */
@media (min-width: 960px) {
  .av-entete__action,
  .av-entete__action:active {
    width: auto;
    border-radius: 0;
    background: none;
  }

  .av-entete__action svg {
    display: none;
  }

  .av-entete__action-texte {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

@media (hover: hover) and (min-width: 960px) {
  .av-entete__action:hover {
    background: none;
    color: var(--av-violet);
  }
}

/* En-tête d'une tâche (tunnel, connexion, support) : celui du site sans navigation ni actions, sur la colonne de
   480 px ; il défile avec la page */
.av-entete--tache {
  position: static;
}

/* Le nom d'un espace après le logo, sur le dessin d'av-marques (#567) : « Centre de support », « Espace Pro » et,
   pour un SSO, « depuis Spider VO » dessous */
.av-entete__marque {
  min-width: 0;
}

.av-entete__espace {
  display: grid;
  min-width: 0;
}

.av-entete__espace-nom {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
  white-space: nowrap;
}

.av-entete__espace-detail {
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
}

/* Le logo carré sur un petit téléphone (--court, sous 375 px), pour qu'un nom d'espace tienne à côté */
.av-entete__logo .av-entete__logo-carre,
.av-entete__logo--court .av-entete__logo-plein {
  display: none;
}

.av-entete__logo--court .av-entete__logo-carre {
  display: block;
}

@media (min-width: 375px) {
  .av-entete__logo--court .av-entete__logo-carre {
    display: none;
  }

  .av-entete__logo--court .av-entete__logo-plein {
    display: block;
  }
}

/* En-tête du compte : à partir de 960 px, l'espace après le logo et l'identité à droite, l'e-mail puis la société, sans
   avatar ; en dessous, le logo et le bouton « Menu du compte », qui ouvre la navigation dans une fenêtre */
.av-entete--compte .av-entete__espace,
.av-entete__identite {
  display: none;
}

.av-entete__identite {
  text-align: right;
}

.av-entete__identite-nom {
  font: var(--av-texte-court);
  font-weight: 600;
  letter-spacing: var(--av-chasse-court);
  overflow-wrap: anywhere;
}

.av-entete__identite-espace {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

@media (min-width: 960px) {
  .av-entete--compte .av-entete__actions {
    gap: var(--av-e4);
  }

  .av-entete--compte .av-entete__espace,
  .av-entete__identite {
    display: grid;
  }

  .av-entete__identite {
    gap: var(--av-e1);
  }
}

@media (min-width: 960px) {
  .av-entete__nav {
    display: flex;
  }

  .av-entete__menu {
    display: none;
  }
}

/* En-tête de page : le retour éventuel, le titre de la page, son chapeau en gris ; 4 px du titre à son chapeau */
.av-titre-page {
  display: grid;
  gap: var(--av-e1);
  padding: var(--av-e6) 0 var(--av-e5);
}

.av-titre-page__retour {
  justify-self: start;
  margin-bottom: var(--av-e2);
}

.av-titre-page__titre {
  font: var(--av-texte-titre-1);
  letter-spacing: var(--av-chasse-titre-1);
  text-wrap: balance;
}

.av-titre-page__chapeau {
  max-width: var(--av-largeur-lecture);
  color: var(--av-gris-texte);
  font: var(--av-texte-chapeau);
  letter-spacing: var(--av-chasse-chapeau);
}

/* Une action de l'en-tête de page, sous son chapeau, hors de toute liste : « Revoir la visite guidée » du tableau de
   bord de l'Espace Pro (D-19, T-5 A ; 23/10/2026, #571 ; sa place est à confirmer au #549). Un lien d'action à sa
   largeur, à 16 px visibles du chapeau : les 4 px de la grille plus les 12 px que sa cible de 44 px ajoute au-dessus
   de son texte ; les 12 px qu'elle ajoute dessous débordent de l'en-tête, pour que l'écart qui suit soit celui du
   rythme, comme av-vehicule__action (§ 5) */
.av-titre-page__action {
  justify-self: start;
  margin-bottom: calc(-1 * var(--av-e3));
}

/* Barre d'étapes : où l'on en est dans un tunnel ; « Étape 1 sur 3 » et le nom de l'étape, puis un segment par étape,
   faites et en cours en violet, à venir en gris */
.av-etapes__texte {
  display: flex;
  justify-content: space-between;
  gap: var(--av-e4);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-etapes__rang {
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

.av-etapes__nom {
  color: var(--av-gris-texte);
  text-align: right;
}

.av-etapes {
  display: flex;
  gap: var(--av-e2);
  margin: var(--av-e3) 0 0;
  padding: 0;
  list-style: none;
}

.av-etapes li {
  flex: 1 1 0;
  height: var(--av-e1);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet);
}

.av-etapes li[aria-current="step"] ~ li {
  background: var(--av-gris-trait);
}

/* Pagination : précédent et suivant en liens d'action, sur la ligne de ce qui les sépare : « Page 2 sur 8 » sur
   téléphone, les numéros à partir de 640 px, la page en cours sur l'aplat foncé. Trois colonnes : « Précédente » au
   bord gauche, le milieu centré sur la ligne, « Suivante » au bord droit, à sa place même seule (la première page).
   Les deux colonnes des bouts ont la même largeur, au moins celle de leur lien : le milieu ne bouge pas d'une page à
   l'autre (centré entre deux liens de largeurs différentes, il sautait de 100 px de la première à la dernière page),
   et chaque lien garde la largeur de son texte (sa cible et son focus ne s'étirent pas sur le vide). Une pagination
   de moins de 21rem (un téléphone de 320 px) perd les flèches de ses liens pour tenir sur sa ligne (T-1 A, retouche
   de Thomas du 23/10/2026, #572 : « Suivante » sur la ligne de « Page 1 sur 66 » ; avant, le résumé avait sa propre
   ligne au-dessus des liens) */
.av-pagination {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: var(--av-e3);
}

.av-pagination > * {
  grid-row: 1;
}

.av-pagination > .av-action:first-child {
  grid-column: 1;
  justify-self: start;
}

.av-pagination__resume ~ .av-action {
  grid-column: 3;
  justify-self: end;
}

.av-pagination__pages {
  display: none;
  grid-column: 2;
  justify-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-pagination__page {
  display: inline-grid;
  place-items: center;
  min-width: var(--av-cible);
  min-height: var(--av-cible);
  border-radius: var(--av-rayon);
  color: var(--av-encre);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.av-pagination__page[aria-current="page"] {
  background: var(--av-aplat-fonce);
}

@media (hover: hover) {
  a.av-pagination__page:hover {
    background: var(--av-aplat);
  }
}

/* « Page 2 sur 8 » ne se coupe pas : sans les flèches, les deux liens lui laissent la place à 320 px, catalogue compris */
.av-pagination__resume {
  grid-column: 2;
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .av-pagination__pages {
    display: flex;
    gap: var(--av-e1);
  }

  .av-pagination__resume {
    display: none;
  }
}

@container (max-width: 21rem) {
  .av-pagination .av-action svg {
    display: none;
  }
}

/* Sans requêtes de conteneur (Safari 15 et avant, l'iPhone SE de 320 px compris ; § 13 : un repli qui reste lisible),
   la même règle sur la fenêtre : 21rem de pagination plus les deux gouttières de 16 px font 368 px */
@supports not (container-type: inline-size) {
  @media (max-width: 367px) {
    .av-pagination .av-action svg {
      display: none;
    }
  }
}

/* Grille de colonnes : une colonne sur téléphone ; à partir de 640 px, les enfants se partagent la largeur par moitiés,
   et à partir de 960 px par moitiés, tiers, deux tiers ou quarts (#565). Un enfant sans classe prend toute la ligne. */
.av-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--av-e5) var(--av-e4);
}

@media (min-width: 640px) {
  .av-grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--av-e6);
  }

  .av-grille > * {
    grid-column: span 12;
  }

  .av-grille__moitie,
  .av-grille__tiers,
  .av-grille__deux-tiers,
  .av-grille__quart {
    grid-column: span 6;
  }
}

@media (min-width: 960px) {
  .av-grille__tiers {
    grid-column: span 4;
  }

  .av-grille__deux-tiers {
    grid-column: span 8;
  }

  .av-grille__quart {
    grid-column: span 3;
  }
}

/* Chiffres tabulaires : dates, kilométrages, prix et codes qui s'alignent en colonne */
.av-chiffres {
  font-variant-numeric: tabular-nums;
}

/* Un identifiant du véhicule, immatriculation ou VIN : jamais coupé en fin de ligne ; une immatriculation s'écrit en
   capitales, sans tiret ni espace, par le filtre immatriculation (Thomas, 22/10/2026, #568) */
.av-identifiant {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Pile : des enfants l'un sous l'autre, à un écart régulier nommé par son rôle (§ 5) ; 16 px par défaut (une phrase
   et sa liste, un bloc et son action). Un bouton s'y pose dans une rangée, qui le garde à sa largeur. */
.av-pile {
  display: flex;
  flex-direction: column;
  gap: var(--av-e4);
}

.av-pile--titre {
  gap: var(--av-e1);
}

.av-pile--pieces {
  gap: var(--av-e2);
}

.av-pile--lignes {
  gap: var(--av-e3);
}

.av-pile--blocs {
  gap: var(--av-e5);
}

.av-pile--groupes {
  gap: var(--av-e6);
}

.av-pile--chapitres {
  gap: var(--av-e7);
}

/* Rangée : des éléments côte à côte qui passent à la ligne ; 8 px (une icône et son texte, un prix et son lien),
   --blocs : 24 px entre eux, 8 px d'une ligne à l'autre (des liens, des logos) */
.av-rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--av-e2);
}

.av-rangee--blocs {
  gap: var(--av-e2) var(--av-e5);
}

/* Section d'une page de vente : 64 px en haut et en bas, 96 px à partir de 960 px ; --aplat de bord à bord, son
   contenu dans le conteneur. Deux sections de même fond qui se suivent : l'air seul, la seconde perd son haut (§ 5) */
.av-section {
  padding-block: var(--av-e8);
}

.av-section--aplat {
  background: var(--av-aplat);
}

/* Le titre d'une section et son texte à 12 px, comme le héros (Thomas, 09/11/2026 : sous un titre 2, les 4 px du § 5
   collaient) ; l'introduction comme le texte et illustration */
.av-section :is(.av-intro, .av-pile--titre) {
  gap: var(--av-e3);
}

.av-section:not(.av-section--aplat) + .av-section:not(.av-section--aplat),
.av-section--aplat + .av-section--aplat {
  padding-top: 0;
}

@media (min-width: 960px) {
  .av-section {
    padding-block: var(--av-e9);
  }
}

/* Introduction d'une section : le titre et sa phrase à 4 px (§ 5), 48 px jusqu'au contenu ; 40rem calée à gauche, ou
   centrée sur 760 px (--centre) au-dessus d'un contenu centré ou qui prend la largeur, comme les questions fréquentes
   (19/10/2026), une liste en deux colonnes ou le comparatif (28/10/2026, #545) */
.av-intro {
  display: grid;
  gap: var(--av-e1);
  max-width: var(--av-largeur-lecture);
  margin-bottom: var(--av-e7);
}

.av-intro__titre {
  font: var(--av-texte-titre-2);
  letter-spacing: var(--av-chasse-titre-2);
  text-wrap: balance;
}

/* Le chapeau sans mot seul sur sa dernière ligne (pretty), centré ou non : « Autoviza®. » restait seul sous deux
   lignes pleines à 320 px (#572) */
.av-intro__texte {
  color: var(--av-gris-texte);
  font: var(--av-texte-chapeau);
  letter-spacing: var(--av-chasse-chapeau);
  text-wrap: pretty;
}

.av-section--aplat .av-intro__texte {
  color: var(--av-gris-fonce);
}

.av-intro--centre {
  max-width: var(--av-largeur-centree);
  margin-inline: auto;
  text-align: center;
}

/* Une introduction seule dans sa section (« Une mauvaise occasion… », #545) : rien sous elle que la section */
.av-intro:last-child {
  margin-bottom: 0;
}

/* Bloc sur l'aplat dans une colonne : sur téléphone, pleine largeur sans arrondi (il déborde de la gouttière, son
   texte reste dans la colonne) ; à partir de 640 px, arrondi de 10 px dans la colonne (Thomas, 21/10/2026). Dans une
   carte, une fenêtre ou une étape, jamais de débord. */
.av-aplat {
  margin-inline: calc(-1 * var(--av-gouttiere));
  padding: var(--av-e4) var(--av-gouttiere);
  background: var(--av-aplat);
}

:is(.av-carte, .av-fenetre, .av-etape) .av-aplat {
  margin-inline: 0;
  padding-inline: var(--av-e4);
  border-radius: var(--av-rayon-bloc);
}

@media (min-width: 640px) {
  .av-aplat {
    margin-inline: 0;
    padding-inline: var(--av-e4);
    border-radius: var(--av-rayon-bloc);
  }
}

/* Texte et illustration : une colonne jusqu'à 959 px, le texte d'abord, l'illustration sur toute la colonne ; deux
   moitiés à 64 px à partir de 960 px, centrées en hauteur, --image-a-gauche y met la figure en premier (exception au
   § 5, Thomas, 21/10/2026) */
.av-deux-colonnes {
  display: grid;
  gap: var(--av-e6);
}

.av-deux-colonnes img {
  display: block;
  width: 100%;
  height: auto;
}

/* L'illustration d'un texte et illustration, plafonnée et centrée (Thomas, 09/11/2026 : carrées depuis la série du
   09/11, elles faisaient deux fois la hauteur de leur texte au bureau, et la moitié de l'écran du téléphone) */
.av-deux-colonnes > img {
  justify-self: center;
  max-width: var(--av-largeur-illustration-telephone);
}

/* Le titre d'un texte et illustration, équilibré comme celui d'une introduction (#545) */
.av-deux-colonnes .av-texte-titre-2 {
  text-wrap: balance;
}

@media (min-width: 960px) {
  .av-deux-colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--av-e8);
  }

  .av-deux-colonnes--image-a-gauche > :last-child {
    order: -1;
  }

  /* Plus grande au bureau, et libre de déborder de 48 px sur l'air de la section, en haut et en bas (Thomas,
     09/11/2026) : la section garde la hauteur de son texte. Pas en haut d'une section qui a perdu son haut (deux
     sections de même fond qui se suivent) : elle mordrait sur la précédente */
  .av-section .av-deux-colonnes > img {
    max-width: var(--av-largeur-illustration);
    margin-block: calc(-1 * var(--av-e7));
  }

  :is(.av-section:not(.av-section--aplat) + .av-section:not(.av-section--aplat), .av-section--aplat + .av-section--aplat) .av-deux-colonnes > img {
    margin-top: 0;
  }
}

/* ===================== Navigation : compte, fil d'Ariane, afficher plus ===================== */

/* Mise en page du compte : le rythme d'une étape, 16 px sous l'en-tête et 48 px avant les mentions ; à partir de
   960 px, la navigation en colonne de 240 px, à 48 px du contenu, en face du titre, et qui défile avec la page (avec
   les espaces, elle dépasse un écran de portable : collée, son bas resterait caché) ; en dessous, elle est dans la
   fenêtre du bouton « Menu du compte » */
.av-lateral {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--av-e4) var(--av-e7);
}

.av-lateral__nav {
  display: none;
}

@media (min-width: 960px) {
  .av-lateral {
    grid-template-columns: var(--av-largeur-navigation) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--av-e7);
  }

  .av-lateral__nav {
    display: block;
    padding-top: var(--av-e6);
  }
}

/* Navigation du compte : des groupes titrés en 14/16 600 gris, des rubriques à icône grise. Dans la colonne, des
   lignes compactes de 48 px, la rubrique en cours sur l'aplat foncé ; dans la fenêtre du téléphone (--fenetre), la
   ligne d'une liste qu'on parcourt, aux mesures d'av-liste--parcours : 16 px, filet, chevron gris (décision du 21/10 ;
   exception écrite pour la colonne, qui reste affichée). Icône et chevron dans un span : {% svg %} rend le fichier
   tel quel. */
.av-rubriques {
  display: grid;
  gap: var(--av-e5);
}

.av-rubriques__titre {
  padding-inline: var(--av-e3);
  color: var(--av-gris-texte);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

.av-rubriques__titre + .av-rubriques__liste {
  margin-top: var(--av-e2);
}

.av-rubriques__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-rubriques__lien {
  display: flex;
  align-items: center;
  gap: var(--av-e3);
  width: 100%;
  min-height: var(--av-hauteur-controle);
  padding: var(--av-e3);
  border: 0;
  border-radius: var(--av-rayon-controle);
  background: none;
  color: var(--av-encre);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.av-rubriques__lien:focus-visible {
  outline-offset: calc(-1 * var(--av-trait-focus));
}

.av-rubriques__lien:not([aria-current]):active {
  background: var(--av-voile-appui);
}

.av-rubriques__lien[aria-current] {
  background: var(--av-aplat-fonce);
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
}

@media (hover: hover) {
  .av-rubriques__lien:hover {
    background: var(--av-voile-survol);
  }

  .av-rubriques__lien[aria-current]:hover {
    background: var(--av-aplat-fonce);
  }
}

.av-rubriques__icone,
.av-rubriques__chevron {
  display: flex;
  flex: none;
  color: var(--av-gris-texte);
}

.av-rubriques__icone svg,
.av-rubriques__chevron svg {
  width: var(--av-icone);
  height: var(--av-icone);
  fill: currentColor;
}

/* L'icône du site porte sa couleur sur son tracé ({% svg %}) : la couleur de la rubrique la remplace */
.av-rubriques__icone path,
.av-rubriques__chevron path {
  fill: currentColor;
}

.av-rubriques__lien[aria-current] .av-rubriques__icone {
  color: var(--av-encre);
}

.av-rubriques__fin {
  margin-left: auto;
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
  font-variant-numeric: tabular-nums;
}

.av-rubriques__chevron {
  display: none;
  margin-left: auto;
}

.av-rubriques__chevron svg {
  transform: rotate(-90deg);
}

.av-rubriques__fin + .av-rubriques__chevron {
  margin-left: var(--av-e1);
}

/* Le solde de crédits de l'Espace Pro, dans la colonne : une carte-lien (av-carte av-carte--lien) en tête, le nombre
   en av-texte-titre-2 av-chiffres, vers les packs ; sa marge de côté est celle des rubriques (12 px), pour s'aligner
   sur les icônes et les titres de groupe ; dans la fenêtre du téléphone, c'est la rubrique « Mes crédits » et son
   solde (Thomas, 21/10/2026) */
.av-rubriques__solde {
  padding-inline: var(--av-e3);
}

.av-rubriques--fenetre .av-rubriques__titre {
  padding-inline: 0;
}

.av-rubriques--fenetre .av-rubriques__liste > li + li {
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

.av-rubriques--fenetre .av-rubriques__lien {
  padding: var(--av-e4) 0;
  border-radius: 0;
}

.av-rubriques--fenetre .av-rubriques__lien:not([aria-current]):active {
  background: none;
}

.av-rubriques--fenetre .av-rubriques__lien:not([aria-current]):focus-visible {
  outline-offset: var(--av-decalage-focus);
}

.av-rubriques--fenetre .av-rubriques__lien[aria-current] {
  width: calc(100% + 2 * var(--av-e4));
  margin-inline: calc(-1 * var(--av-e4));
  padding-inline: var(--av-e4);
}

.av-rubriques--fenetre .av-rubriques__chevron {
  display: flex;
}

@media (hover: hover) {
  .av-rubriques--fenetre .av-rubriques__lien:not([aria-current]):hover {
    background: none;
    color: var(--av-violet);
  }

  .av-rubriques--fenetre .av-rubriques__lien:hover .av-rubriques__chevron {
    color: var(--av-violet);
  }
}

@media (min-width: 640px) {
  .av-rubriques--fenetre .av-rubriques__lien[aria-current] {
    width: calc(100% + 2 * var(--av-e5));
    margin-inline: calc(-1 * var(--av-e5));
    padding-inline: var(--av-e5);
  }
}

/* Fil d'Ariane (FAQ, guides), placé avant le contenu : le lien d'évitement le saute. À partir de 640 px, le fil
   complet en 16/24 (Base d'Uber, question Q22 de l'atelier, posée à partir de 640 px), la page courante en gris
   (aria-current), des chevrons gris de 16 px qui ne commencent jamais une ligne ; il passe à la ligne, jamais tronqué
   (Thomas, 21/10/2026). Exception sur téléphone : le seul parent, en lien de retour, prend le 600 16/20 du lien
   d'action (av-action), comme l'atelier le montrait, sa flèche de 20 px face à sa ligne. Chaque lien garde 12 px
   au-dessus et au-dessous de son texte : une cible de 44 px au moins, la flèche face à la première ligne. */
.av-ariane__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--av-e2);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
}

.av-ariane__element {
  display: flex;
  align-items: flex-start;
  gap: var(--av-e2);
  min-width: 0;
}

.av-ariane__element:not(.av-ariane__element--parent) {
  display: none;
}

.av-ariane__lien,
.av-ariane__courant {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--av-e1);
  min-height: var(--av-cible);
  padding-block: var(--av-e3);
}

.av-ariane__lien {
  color: var(--av-violet);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .av-ariane__lien:hover {
    color: var(--av-violet-survol);
  }
}

.av-ariane__courant {
  color: var(--av-gris-texte);
}

.av-ariane__separateur,
.av-ariane__retour {
  display: flex;
  flex: none;
}

.av-ariane__separateur {
  display: none;
  margin-top: var(--av-e4);
  color: var(--av-gris-texte);
}

.av-ariane__separateur svg {
  width: var(--av-icone-petite);
  height: var(--av-icone-petite);
  fill: currentColor;
  transform: rotate(-90deg);
}

.av-ariane__retour svg {
  width: var(--av-icone);
  height: var(--av-icone);
  fill: currentColor;
}

.av-ariane__separateur path,
.av-ariane__retour path {
  fill: currentColor;
}

/* Le fil précède le contenu, dans son propre conteneur : le titre de la page le suit à 8 px */
.av-ariane + .av-titre-page,
.av-ariane + .av-page__contenu > .av-conteneur > .av-titre-page:first-child {
  padding-top: var(--av-e2);
}

@media (min-width: 640px) {
  .av-ariane__liste {
    font: var(--av-texte-courant);
    letter-spacing: var(--av-chasse-courant);
  }

  .av-ariane__element:not(.av-ariane__element--parent) {
    display: flex;
  }

  .av-ariane__separateur {
    display: flex;
  }

  .av-ariane__retour {
    display: none;
  }
}

/* Afficher plus : une liste déjà dans la page, sa suite repliée (av-replie) sous av-js, que pose autoviza.js (#546) ;
   le script la montre au toucher, cache le lien (hidden) et passe le focus à la première ligne montrée. Sans script, la
   liste est entière, sans lien. */
.av-afficher-plus {
  display: none;
}

.av-js .av-afficher-plus:not([hidden]) {
  display: flex;
}

.av-js .av-replie {
  display: none;
}

/* ===================== Pied de page ===================== */

/* Pied du site : sur l'encre, le logo gris seul, sans phrase de marque pour le moment ; quatre groupes de liens (deux
   colonnes sur téléphone ; trois à partir de 960 px, « Professionnels » sous « Le rapport », av-pied__colonne), puis le
   copyright et les mentions, séparés par l'air seul ; chaque lien sur une cible de 44 px à toutes les largeurs (19 et
   21/10/2026). Les écarts tiennent compte des 12 px de la cible : 16 px d'un titre au texte de son premier lien, 32 px
   d'un groupe au suivant, 64 px jusqu'au copyright. */
.av-pied {
  padding: var(--av-e8) 0 calc(var(--av-e6) - var(--av-e3));
  background: var(--av-encre);
  color: var(--av-gris-sur-encre);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-pied a {
  color: var(--av-blanc);
  text-decoration: none;
}

@media (hover: hover) {
  .av-pied a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

.av-pied :focus-visible {
  outline-color: var(--av-blanc);
}

.av-pied__haut {
  display: grid;
  gap: var(--av-e7);
}

.av-pied__marque {
  display: grid;
  align-content: start;
  gap: var(--av-e4);
}

.av-pied__marque img {
  display: block;
  width: auto;
  height: var(--av-e5);
}

.av-pied__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--av-e6) - var(--av-e3)) var(--av-e5);
}

.av-pied__titre {
  margin-bottom: var(--av-e1);
  color: var(--av-gris-sur-encre);
  font: var(--av-texte-etiquette);
  letter-spacing: var(--av-chasse-etiquette);
}

.av-pied__liens,
.av-pied__mentions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-pied__liens a,
.av-pied__mentions a {
  display: inline-block;
  padding-block: var(--av-e3);
}

/* « Contact » se détache des autres liens : souligné en permanence (Thomas, 19/10/2026) */
.av-pied .av-pied__lien--fort {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.av-pied__bas {
  display: grid;
  gap: var(--av-e2);
  margin-top: calc(var(--av-e8) - var(--av-e3));
}

/* « Le rapport » et « Professionnels » : une colonne à partir de 960 px, deux groupes de la grille en dessous */
.av-pied__colonne {
  display: contents;
}

.av-pied__copyright {
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
}

.av-pied__mentions {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--av-e5);
}

.av-pied .av-pied__mentions a {
  color: var(--av-gris-sur-encre);
}

@media (min-width: 960px) {
  .av-pied__haut {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--av-e8);
  }

  .av-pied__colonnes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* « Professionnels » sous « Le rapport », à 32 px quel que soit le groupe le plus long */
  .av-pied__colonne {
    display: flex;
    flex-direction: column;
    gap: calc(var(--av-e6) - var(--av-e3));
  }

  .av-pied__bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-e5);
    margin-top: calc(var(--av-e8) - 2 * var(--av-e3));
  }
}

/* Mentions d'un écran de tâche (tunnel, connexion, support, compte) : sur blanc, dans la colonne, sous un filet, le
   copyright et les trois liens juridiques en 12 px gris, chacun sur une ligne de 44 px (Thomas, 21/10/2026) */
.av-mentions {
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
}

.av-mentions__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--av-e5);
  padding-block: var(--av-e2);
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

.av-mentions__copyright {
  display: flex;
  align-items: center;
  min-height: var(--av-cible);
}

.av-mentions__liens {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--av-e5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-mentions__liens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--av-cible);
  color: inherit;
  text-underline-offset: 0.2em;
}

/* ===================== Pages : vide, chargement, texte long ===================== */

/* État vide : ce qui n'est pas encore là et comment le faire venir ; sur l'aplat, un titre, une phrase, une action */
.av-vide {
  display: grid;
  justify-items: start;
  gap: var(--av-e1);
  padding: var(--av-e6) var(--av-e5);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-aplat);
}

.av-vide__titre {
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
  text-wrap: balance;
}

.av-vide__texte {
  max-width: var(--av-largeur-lecture);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-vide .av-actions {
  margin-top: var(--av-e3);
}

/* Chargement : un seul composant, une roue (ou le logo animé d'une longue attente, av-chargement--logo, #570) et ce
   qu'on attend, lu par le lecteur d'écran (role="status") ; la roue s'arrête
   quand l'appareil demande moins de mouvement, le texte reste. Centré dans sa zone, partout (A-9 et critique générale
   de Thomas, 22/10/2026, #570) : en largeur sur sa ligne, et en hauteur quand sa zone le tend sur une hauteur réservée
   (la zone du paiement, le corps d'une fenêtre qui garde sa hauteur), la roue et le texte restant au milieu. Le
   texte toujours sous la roue, centré, à 12 px, comme sous le logo animé : avec la roue à côté, un texte long
   (« Récupération des équipements et options d'origine » à 375 px) passait seul dessous et deux chargements voisins
   ne se ressemblaient plus (#570, 23/10/2026). */
.av-chargement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--av-e3);
  text-align: center;
  color: var(--av-gris-fonce);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Masqué par l'attribut hidden (la roue que remplace l'avis d'un sondage arrêté, A-3 C) : en flex, il resterait
   visible (22/10/2026, #570) */
.av-chargement[hidden] {
  display: none;
}

.av-chargement::before {
  content: "";
  flex: none;
  width: var(--av-icone);
  height: var(--av-icone);
  border: 2px solid var(--av-violet);
  border-right-color: transparent;
  border-radius: var(--av-rayon-pilule);
  animation: av-tourne 0.8s linear infinite;
}

/* Texte long : guides, FAQ, centre d'aide, CGU ; une colonne de lecture de 40rem, des titres qui aèrent au-dessus
   plus qu'en dessous, les liens soulignés en violet, des listes à puces discrètes (seul endroit où le site en garde :
   une énumération dans un texte) */
.av-texte-long {
  max-width: var(--av-largeur-lecture);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  overflow-wrap: break-word;
}

.av-texte-long > * + * {
  margin-top: var(--av-e4);
}

.av-texte-long > :first-child {
  margin-top: 0;
}

/* Un h1 dans le contenu (un article de Sphinx, rendu tel quel) prend le style du h2 : la page a déjà son titre (#550) */
.av-texte-long h1,
.av-texte-long h2 {
  margin-top: var(--av-e7);
  font: var(--av-texte-titre-3);
  letter-spacing: var(--av-chasse-titre-3);
  text-wrap: balance;
}

.av-texte-long h3 {
  margin-top: var(--av-e6);
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

.av-texte-long h1 + *,
.av-texte-long h2 + *,
.av-texte-long h3 + * {
  margin-top: var(--av-e2);
}

/* Seulement le texte rédigé, sans classe : un composant posé dans le texte (bouton, liste à filet) garde le sien */
.av-texte-long a:not([class]) {
  color: var(--av-violet);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .av-texte-long a:not([class]):hover {
    color: var(--av-violet-survol);
  }
}

/* Les puces d'un texte long, et celles d'une réponse d'accordéon (#386, « Que contient un rapport Autoviza® ? » de la
   page Rapport), qui garde son rythme et sa largeur : jamais av-texte-long sur une réponse, qui ajouterait sa marge et sa
   colonne de lecture */
.av-texte-long ul:not([class]),
.av-texte-long ol:not([class]),
.av-accordeon__reponse ul:not([class]) {
  display: grid;
  gap: var(--av-e2);
  padding-left: var(--av-e5);
}

.av-texte-long :is(ul, ol):not([class]) > li::marker,
.av-accordeon__reponse ul:not([class]) > li::marker {
  color: var(--av-gris-texte);
}

.av-texte-long strong {
  font-weight: 700;
}

/* Un encadré du texte rédigé : le « > » du Markdown des guides (« TL;DR », « À retenir », le renvoi vers le rapport),
   ou un <blockquote> d'un article de Sphinx. Le dessin de l'encadré (av-encadre) : sur l'aplat, sans contour ni icône,
   pleine largeur sur téléphone, son texte restant dans la colonne ; le texte garde la taille et la couleur du texte long
   (Thomas, 01/11/2026, #550 : guides.scss le dessinait en carte lavande, la bascule l'avait laissé en simple retrait
   gris) */
.av-texte-long blockquote {
  padding: var(--av-e4);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-aplat);
}

.av-texte-long blockquote > * + * {
  margin-top: var(--av-e2);
}

@media (max-width: 639px) {
  .av-texte-long blockquote {
    margin-inline: calc(-1 * var(--av-gouttiere));
    padding-inline: var(--av-gouttiere);
    border-radius: 0;
  }

  /* Dans une carte, une fenêtre ou une étape (l'aide d'un article du support), il reste dans son bloc, comme
     av-encadre */
  :is(.av-carte, .av-fenetre, .av-etape) .av-texte-long blockquote {
    margin-inline: 0;
    padding-inline: var(--av-e4);
    border-radius: var(--av-rayon-bloc);
  }
}

.av-texte-long img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--av-rayon-bloc);
}

.av-texte-long figcaption {
  margin-top: var(--av-e2);
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
}

/* ===================== Tunnel et paiement ===================== */

/* Le tunnel d'achat et sa page de paiement (#569, lot 5), retenus par Thomas le 22/10/2026 sur les passes 1 et 2 de
   l'atelier : la liste de résumé des certificats, le
   véhicule en tête du paiement, le décompte et son code promo, la zone du paiement de Stripe, la confirmation et sa
   suite, la sélection des options du B2C upsell. Le reste reprend le catalogue : la carte d'un pack est une
   av-carte-choix à radio (R-7 A, R-8 B), l'e-mail d'un client connecté une av-valeur (P-5 A), l'échec du paiement un
   av-avis (S-6 A), l'attente de l'Element av-chargement (S-4 A), la phrase sous « Payer » av-etape__ensuite (P-10 B,
   P-11 B). La page de paiement : le véhicule et l'achat en tête (av-vehicule, puis les lignes de prix), puis
   l'e-mail, la facture, le moyen de paiement et la case d'engagement, l'entrée du code ou la remise et le total juste
   au-dessus de « Payer » (P-1 C). */

/* Liste de résumé (R-2 A, R-3 C, R-5 B, R-6 B ; Thomas, 22/10/2026) : ce qu'on a saisi, relu avant d'agir, sur la page
   de téléchargement des certificats (R-1 A) et là seulement : en tête de la page de paiement, le véhicule s'écrit en
   texte (av-vehicule, P-3 E, passe 2). À plat, sans fond, un filet entre deux lignes ; un groupe (av-resume) porte sa
   tête et sa liste. */

/* La tête d'un groupe : son titre et, quand tout le groupe vient d'une même étape, « Modifier » au bord droit (R-3 C,
   22/10/2026) ; 16 px jusqu'à la liste, 28 visibles jusqu'au premier libellé avec les 12 de la ligne, comme
   av-titre-groupe et av-liste (#569, passe 2). Centrés : sur la ligne de base, la tête prendrait 1 px de plus */
.av-resume__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-e2) var(--av-e4);
  margin-bottom: var(--av-e4);
}

/* « Modifier » garde sa cible de 44 px sans grandir la tête : elle déborde de 10 px au-dessus et au-dessous de la
   ligne de 24 px du titre, comme av-info (#569, passe 2) */
.av-resume__tete .av-action {
  margin-block: calc((var(--av-e5) - var(--av-cible)) / 2);
}

/* Le titre du groupe (« Le vendeur ») en 18/24, 700 (22/10/2026) */
.av-resume__titre {
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
  text-wrap: balance;
}

/* Une ligne par notion (R-6 B, 22/10/2026 : l'adresse en une ligne de deux lignes de texte) : le libellé, la valeur
   dessous, une précision en gris ; 12 px de part et d'autre, comme av-liste. Pas d'action sur la ligne : chaque
   groupe vient d'une étape et porte « Modifier » en tête (R-3 C ; l'action de ligne, sans cas depuis P-3 E, est
   retirée, Thomas, 22/10/2026) */
.av-resume__ligne {
  padding: var(--av-e3) 0;
}

/* Un filet entre deux lignes, jamais au-dessus de la première ni sous la dernière (22/10/2026) */
.av-resume__ligne + .av-resume__ligne {
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

/* Sous la dernière ligne, aucun filet, donc pas ses 12 px : l'écart qui suit est celui du rythme, 24 px jusqu'au
   bouton, 32 jusqu'au groupe suivant (§ 5 et 11 ; #569, passe 2) */
.av-resume__ligne:last-child {
  padding-bottom: 0;
}

/* R-2 A (22/10/2026) : le libellé du champ en 14/16, 600, à l'encre, comme au-dessus du champ qu'on a rempli */
.av-resume__libelle {
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

/* R-2 A : la valeur à 4 px, en 16/24 ; une valeur sans espace (une adresse e-mail) passe à la ligne (22/10/2026) */
.av-resume__valeur {
  margin-top: var(--av-e1);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  overflow-wrap: anywhere;
}

/* R-5 B (22/10/2026) : une réponse facultative laissée vide se dit « Non renseigné », en gris */
.av-resume__valeur--vide {
  color: var(--av-gris-texte);
}

/* Une précision (la rubrique de la carte grise) en 12/20 gris, à 4 px (22/10/2026) */
.av-resume__detail {
  margin-top: var(--av-e1);
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
}

/* La carte du véhicule (Thomas, 05/11/2026) : le véhicule relie tous nos produits, il ne s'écrit plus en ligne de texte
   (P-3 E, écartée). Partout le même dessin : le logo de la marque, la marque au-dessus du modèle, la plaque, puis les
   faits. Compacte (--compact) dans un récapitulatif, en ligne (--ligne) dans l'en-tête de la visionneuse. Contour fin :
   quatrième exception du § 6 (une carte d'identité se comprend comme un objet, pas comme un champ). */
.av-vehicule {
  display: grid;
  gap: var(--av-e3);
  padding: var(--av-e4);
  border: var(--av-trait-filet) solid var(--av-gris-trait);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-blanc);
}

.av-vehicule__tete {
  display: flex;
  align-items: center;
  gap: var(--av-e3);
}

.av-vehicule__logo {
  flex: none;
  width: var(--av-e7);
  height: var(--av-e7);
  object-fit: contain;
}

.av-vehicule__identite {
  flex: 1;
  min-width: 0;
}

.av-vehicule__marque {
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
}

.av-vehicule__nom {
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Le logo seul dans sa colonne, tout le reste aligné sur le nom : la plaque et les faits commencent où commence le modèle
   (Thomas, 09/11/2026). Une carte sans tête (un certificat lancé sans rapport) n'a pas de colonne de logo */
.av-vehicule:not(.av-vehicule--ligne):has(> .av-vehicule__tete) {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--av-e3);
}

.av-vehicule:not(.av-vehicule--ligne) > .av-vehicule__tete {
  display: contents;
}

.av-vehicule:not(.av-vehicule--ligne):has(> .av-vehicule__tete) > :not(.av-vehicule__tete),
.av-vehicule:not(.av-vehicule--ligne) .av-vehicule__identite {
  grid-column: 2;
}

.av-vehicule:not(.av-vehicule--ligne) .av-vehicule__logo {
  grid-row: 1 / span 3;
  grid-column: 1;
  align-self: start;
}

/* Compacte (un récapitulatif) : la plaque à droite, en face du nom, la mise en circulation au-dessus d'elle ; la carte gagne une
   ligne (Thomas, 09/11/2026). La détaillée garde sa plaque, plus grande, sous le nom : à droite, le nom n'aurait plus la place.
   À moins de 360 px, la compacte la repasse aussi sous le nom. Sélecteurs plus forts que ceux de la grille commune, ci-dessus */
.av-vehicule.av-vehicule--compact:not(.av-vehicule--ligne):has(> .av-vehicule__tete) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.av-vehicule.av-vehicule--compact:not(.av-vehicule--ligne):has(> .av-vehicule__tete) .av-vehicule__identite {
  grid-row: 1;
}

.av-vehicule.av-vehicule--compact:not(.av-vehicule--ligne):has(> .av-vehicule__tete) > .av-vehicule__plaque {
  display: grid;
  grid-row: 1;
  grid-column: 3;
  align-self: end;
  justify-items: end;
  gap: var(--av-e1);
  text-align: right;
}

.av-vehicule.av-vehicule--compact:not(.av-vehicule--ligne):has(> .av-vehicule__tete) > .av-vehicule__plaque > .av-plaque {
  justify-self: end;
}

@media (max-width: 359px) {
  .av-vehicule.av-vehicule--compact:not(.av-vehicule--ligne):has(> .av-vehicule__tete) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .av-vehicule.av-vehicule--compact:not(.av-vehicule--ligne):has(> .av-vehicule__tete) .av-vehicule__identite {
    grid-row: auto;
  }

  .av-vehicule.av-vehicule--compact:not(.av-vehicule--ligne):has(> .av-vehicule__tete) > .av-vehicule__plaque {
    display: flex;
    grid-row: auto;
    grid-column: 2;
    text-align: left;
  }

  .av-vehicule.av-vehicule--compact:not(.av-vehicule--ligne):has(> .av-vehicule__tete) > .av-vehicule__plaque > .av-plaque {
    order: -1;
  }
}

/* La plaque, avec au-dessus la mise en circulation dans le compact ; « Modifier », discret, au bout. Sa cible de 44 px
   déborde sans grandir la ligne */
.av-vehicule__plaque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--av-e2) var(--av-e3);
  min-width: 0;
}

.av-vehicule__action {
  flex: none;
  margin-block: calc(-1 * var(--av-e2));
  margin-left: auto;
}

.av-vehicule--compact > .av-vehicule__plaque > .av-vehicule__action {
  margin-left: 0;
}

.av-vehicule__details {
  display: grid;
  gap: var(--av-e1);
  margin: 0;
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-vehicule__fait {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--av-e3);
}

.av-vehicule__fait dt {
  color: var(--av-gris-texte);
}

.av-vehicule__fait dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Le logo d'une marque sans fichier : son initiale, dans une pastille grise, muette ; jamais notre symbole à sa place */
.av-logo-initiale {
  display: grid;
  place-items: center;
  border-radius: var(--av-rayon-pilule);
  background: var(--av-fond-champ);
  color: var(--av-gris-texte);
  font: var(--av-texte-nom);
}

/* Compacte : le nom, puis la plaque et la mise en circulation sur une ligne, qui passe à la ligne si elle manque de place */
.av-vehicule--compact {
  row-gap: var(--av-e2);
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* La mise en circulation, au-dessus de la plaque, dans la police de la marque, en face d'elle (Thomas, 09/11/2026) */
.av-vehicule__resume {
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
}

.av-vehicule--compact .av-vehicule__logo {
  width: var(--av-e6);
  height: var(--av-e6);
}

/* Le nom tient sur deux lignes au plus, à toute largeur : Core envoie des versions de 40 caractères, et le modèle est ce qu'on
   cherche d'abord (6.1) ; une seule ligne à 320 px coupait « 2008 1.2 PureTech 130 Allure », un nom banal, sans moyen de le lire */
.av-vehicule--compact .av-vehicule__nom {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
}

/* En ligne, sans cadre ni faits : le logo, le nom et la plaque sur une rangée, qui passe à la ligne si elle manque de
   place ; l'en-tête de la visionneuse laisse sa hauteur au rapport, qui redit les faits, une étape de saisie à son premier
   champ (9.4) */
.av-vehicule--ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--av-e2) var(--av-e4);
  padding: 0;
  border: 0;
  border-radius: 0;
}

.av-vehicule--ligne .av-vehicule__logo {
  width: var(--av-e6);
  height: var(--av-e6);
}

/* La marque et le modèle sur une seule ligne tant qu'ils y tiennent : la rangée garde la hauteur du logo */
.av-vehicule--ligne .av-vehicule__identite br {
  display: none;
}

.av-vehicule--ligne .av-vehicule__marque {
  margin-right: var(--av-e1);
}

.av-vehicule--ligne .av-vehicule__nom {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
}

/* La plaque d'immatriculation : blanche, la bande bleue à gauche, le F dedans. Un dessin d'identité, jamais un état.
   Hors récapitulatif, elle prend une taille de plus : l'immatriculation se lit d'un coup d'œil (6.1). */
.av-plaque {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  justify-self: start;
  overflow: hidden;
  border: var(--av-trait-filet) solid var(--av-encre);
  border-radius: var(--av-rayon);
  background: var(--av-blanc);
  color: var(--av-encre);
  font: var(--av-texte-nom);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.av-plaque::before {
  content: "F";
  content: "F" / "";
  display: grid;
  place-items: center;
  padding-inline: var(--av-e1);
  background: var(--av-plaque-bande);
  color: var(--av-blanc);
  font: var(--av-texte-aide);
}

.av-plaque__numero {
  padding-inline: var(--av-e2);
}

.av-vehicule:not(.av-vehicule--compact, .av-vehicule--ligne) > .av-vehicule__plaque > .av-plaque {
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

/* Le récapitulatif d'un achat (Thomas, 05/11/2026) : la carte du véhicule, compacte, et ce qu'on achète, dans une seule
   carte, sur la page de paiement, le teaser et la sélection des options. Une ligne par produit : son pictogramme, son
   nom, son prix. Sans véhicule (le pack), les lignes seules. */
.av-achat {
  display: grid;
  gap: var(--av-e3);
  padding: var(--av-e4);
  border: var(--av-trait-filet) solid var(--av-gris-trait);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-blanc);
}

/* Ce que contient le rapport, avant le prix (le teaser) : un sous-titre visible, puis, en intertitre gris, ce qui dépend des
   données des partenaires (Thomas, 09/11/2026 : plus d'astérisque) */
.av-achat__titre {
  margin-bottom: var(--av-e3);
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

/* Le premier titre et, en face, le prix du produit ou l'étiquette « Offert » (la sélection du B2C upsell, Thomas, 09/11/2026) */
.av-achat__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--av-e1) var(--av-e3);
  margin-bottom: var(--av-e3);
}

.av-achat__entete > .av-achat__titre {
  margin-bottom: 0;
}

.av-achat__prix {
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* L'offre d'un groupe de choix, sous sa légende (le rapport détaillé offert avec une option, Thomas, 09/11/2026) */
.av-groupe__offre {
  margin-bottom: var(--av-e3);
}

/* « Votre commande », au-dessus de la synthèse d'une sélection, aligné sur le bord de l'étape comme les autres titres de
   groupe : il sort de la marge intérieure du décompte */
.av-decompte--synthese > .av-titre-groupe {
  margin-inline: calc(-1 * var(--av-e4));
  margin-bottom: var(--av-e2);
}

.av-achat__groupe {
  margin-block: var(--av-e4) var(--av-e2);
  color: var(--av-gris-texte);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

.av-achat > .av-vehicule + .av-achat__partie {
  padding-top: var(--av-e3);
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

.av-achat__titre {
  display: flex;
  align-items: center;
  gap: var(--av-e2);
  margin-bottom: var(--av-e2);
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
}

/* L'illustration du produit (img/illustration/doc/, un document de 57 × 69), la seule graisse du récapitulatif : un
   produit qui n'en a pas (une option, le SOH, un pack) n'a pas d'image, et son nom se cale sur la colonne. */
.av-achat__picto {
  flex: none;
  width: var(--av-icone-grande);
  height: calc(var(--av-icone-grande) + var(--av-e2));
  object-fit: contain;
}

/* Un nom sur une ligne se centre sur son illustration, et son montant le suit ; avec un détail dessous, tout reste en
   haut, le montant sur la ligne du nom */
.av-achat .av-achat__produit {
  display: flex;
  align-items: center;
  gap: var(--av-e2);
}

.av-achat .av-achat__produit:has(.av-decompte__detail) {
  align-items: flex-start;
}

.av-achat .av-decompte__ligne:not(:has(.av-decompte__detail)) {
  align-items: center;
}

/* Une ligne sans illustration, sous une ligne qui en a une : les noms restent sur la même colonne */
.av-achat .av-decompte__lignes:has(.av-achat__picto) .av-achat__produit:not(:has(.av-achat__picto)) {
  padding-left: calc(var(--av-icone-grande) + var(--av-e2));
}

.av-achat__nom {
  display: grid;
  min-width: 0;
}

/* Décompte (P-6 A, P-7 A, P-8 A, P-9 B, C-3 B ; Thomas, 22/10/2026) : ce qu'on paie. Une ligne par produit, sans
   sous-total, puis l'entrée du code promo ou la ligne de remise (« Remise (AVZ25) »), puis le total sous un filet,
   « TTC » écrit dans son montant (« 25 € TTC »). Sur blanc, 12 px entre deux lignes, le filet au-dessus du total
   seulement. Sur la page de paiement, il se partage en deux av-decompte (P-1 C) : les lignes de produit en tête,
   sous le véhicule quand l'achat en a un ; l'entrée du code ou la remise et le total juste au-dessus de « Payer », hors du
   formulaire de paiement : le formulaire du code et celui de « Retirer » n'y sont jamais imbriqués. */
.av-decompte {
  display: grid;
  min-width: 0;
}

/* Le bas d'un décompte partagé commence par l'entrée du code ou par le total : rien au-dessus de lui dans son bloc,
   donc pas sa marge de 12 px ; l'écart qui précède est celui du rythme (P-1 C ; #569, passe 2) */
.av-decompte > :first-child {
  margin-top: 0;
}

/* Les lignes, comme les lignes du total : 12 px de l'une à l'autre (P-6 A, 22/10/2026) */
.av-decompte__lignes,
.av-decompte__total {
  display: grid;
  gap: var(--av-e3);
}

/* Une ligne : le libellé à gauche, le montant au bord droit, en haut de la ligne (22/10/2026) */
.av-decompte__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--av-e4);
}

/* Le libellé en 16/24 ; un code de 16 caractères, la longueur maximale, passe à la ligne plutôt que de pousser le
   montant hors de la colonne à 320 px (22/10/2026) */
.av-decompte__libelle {
  display: grid;
  gap: var(--av-e1);
  min-width: 0;
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  overflow-wrap: anywhere;
}

/* Sous le libellé d'un pack, la société qui reçoit les crédits (« Garage Martin »), en 14/20 gris, à 4 px
   (22/10/2026) */
.av-decompte__detail {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Le montant en chiffres tabulaires, au bord droit, jamais coupé (« −5 € », « 113,82 € TTC ») (22/10/2026) */
.av-decompte__montant {
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* C-4 A (22/10/2026) : « Retirer » sous le libellé de la remise, après son montant dans l'ordre du document (lu
   « Remise (AVZ25), −5 €, Retirer le code AVZ25 ») ; un bouton qui poste, dans son propre formulaire. Tant qu'un code
   est posé, le champ du code disparaît. En flex : en ligne, le bouton y prenait la hauteur de ligne de 24 px autour de
   ses 20, 2 px de trop sous lui (#569, passe 2). */
.av-decompte__retrait {
  grid-column: 1;
  display: flex;
}

/* Le formulaire de « Retirer » ne fait pas de boîte : le bouton se pose dans la colonne du libellé (22/10/2026) */
.av-decompte__retrait form {
  display: contents;
}

/* C-4 A : le bouton (av-action) garde la hauteur de son texte, à 4 px du libellé, pour que son contour de focus ne
   barre pas la ligne ; sa cible de 44 px est portée par ::after (22/10/2026) */
.av-decompte__action {
  position: relative;
  min-height: 0;
  margin-top: var(--av-e1);
}

/* La cible de « Retirer » : 12 px au-dessus et au-dessous de son texte de 20 px, 44 px en tout (§ 13, 22/10/2026) */
.av-decompte__action::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--av-e3)) 0;
}

/* Le total : un filet au-dessus, 12 px de part et d'autre (P-6 A, 22/10/2026) */
.av-decompte__total {
  margin-top: var(--av-e3);
  padding-top: var(--av-e3);
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

/* « Total » et son montant à l'encre, en 700 : le vert reste au seul bouton « Payer » (P-7 A) ; « TTC » s'écrit dans
   le montant et dans « Payer », sans « Prix TTC » dessous (P-9 B, 22/10/2026) */
.av-decompte__total :is(.av-decompte__libelle, .av-decompte__montant) {
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
}

/* Dépliant (§ 11, Explications) : un <details> natif, son résumé en lien violet, 600, et son chevron de 20 px qui se
   retourne à l'ouverture, sans soulignement (un dépliant garde son chevron). Écrit pour le code promo (C-1 A,
   22/10/2026 : « Ajouter un code promo », ouvert d'office après un refus par l'attribut open) ; le dépliant du rapport
   (« À propos des données ») le reprend depuis le #545 (gabarits/rapport.html). Le résumé garde la hauteur de son
   texte, pour que son contour de focus ne touche ni la ligne au-dessus ni le filet du total ; en flex de bloc, à sa largeur : en ligne, il prenait
   la hauteur de ligne de 24 px du <details> autour de ses 20, 2 px de trop dessus et dessous (#569, passe 2). */
.av-depliant > summary {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--av-e1);
  border-radius: var(--av-rayon);
  color: var(--av-violet);
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
  list-style: none;
  cursor: pointer;
}

/* La cible du résumé : 12 px au-dessus et au-dessous de son texte de 20 px, 44 px en tout (§ 13, 22/10/2026) */
.av-depliant > summary::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--av-e3)) 0;
}

/* Le triangle de Safari laisse la place au chevron (22/10/2026) */
.av-depliant > summary::-webkit-details-marker {
  display: none;
}

/* Le chevron, à la couleur du texte ; il se retourne à l'ouverture, au rythme du site (22/10/2026) */
.av-depliant > summary svg {
  flex: none;
  width: var(--av-icone);
  height: var(--av-icone);
  fill: currentColor;
  transition: transform var(--av-duree) var(--av-courbe);
}

/* L'icône du site porte sa couleur sur son tracé ({% svg 'img/icons/angle-small-down' %}) : le violet du résumé la
   remplace (22/10/2026) */
.av-depliant > summary svg path {
  fill: inherit;
}

/* Ouvert, le chevron pointe vers le haut (22/10/2026) */
.av-depliant[open] > summary svg {
  transform: rotate(180deg);
}

/* Appui et survol : le violet foncé des liens (§ 11, États ; 22/10/2026) */
.av-depliant > summary:active {
  color: var(--av-violet-survol);
}

@media (hover: hover) {
  .av-depliant > summary:hover {
    color: var(--av-violet-survol);
  }
}

/* La synthèse d'un dépliant (Thomas, 05/11/2026, 8.4 : les relevés, les périodes de détention, la fourchette du SoH, les
   opérations d'un entretien) : l'information d'abord (« 7 relevés disponibles »), la période dessous en gris, seulement si
   elle apprend quelque chose, et, dessous, aligné à gauche, ce que le résumé ouvre, nommé (« Voir les relevés ») : on lit
   toujours de haut en bas, comme « Voir le rapport CARFAX® » sous son texte dans la frise (Thomas, 09/11/2026). */
.av-depliant--synthese > summary {
  flex-wrap: wrap;
  row-gap: var(--av-e1);
  width: 100%;
}

.av-depliant__synthese {
  display: grid;
  flex: 1 0 100%;
  min-width: 0;
}

.av-depliant__compte {
  color: var(--av-encre);
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
}

.av-depliant__periode {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-depliant__periode:empty {
  display: none;
}

.av-depliant__voir {
  flex: none;
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* C-2 A (22/10/2026) : l'entrée du code entre les lignes de produit et le total, là où viendra la ligne de remise ; le
   texte du dépliant à 12 px de la dernière ligne et du filet du total */
.av-decompte__code {
  margin-block: var(--av-e3);
}

/* Le total suit le dépliant sans ajouter sa marge : 12 px seulement jusqu'au filet (22/10/2026) */
.av-decompte__code + .av-decompte__total {
  margin-top: 0;
}

/* Ouvert : 16 px du texte du dépliant au libellé du champ, 16 px du champ au filet (4 ici, 12 de marge). Le champ et
   « Appliquer » sont un av-champ__cadre ; un code refusé a un seul message sous le champ (C-6 A, 22/10/2026) */
.av-decompte__code .av-depliant__corps {
  padding: var(--av-e4) 0 var(--av-e1);
}

/* La zone du paiement (S-1 B, S-4 A, S-5 A ; Thomas, 22/10/2026) : son titre (av-titre-groupe « Moyen de paiement »),
   l'avis d'un échec, puis le Payment Element de Stripe, une iframe, ou notre chargement à sa place. Sur le blanc de
   l'étape, sans aplat ni contour : les champs de Stripe sont nos aplats (apparence dans
   src/static/design/stripe-apparence.js, généré par outils/jetons.py, S-3 A). Conteneur de requête : la place réservée
   suit la largeur que reçoit l'Element, pas celle de la page. */
.av-paiement {
  display: grid;
  container-type: inline-size;
}

/* S-5 A et S-6 A (22/10/2026) : l'échec juste au-dessus de l'Element, 24 px avant lui (« Le paiement n'a pas abouti »,
   le message de Stripe, puis quoi faire), en av-avis d'erreur qui reçoit le focus (tabindex="-1") ; S-7 A : le montant
   changé ailleurs, en av-avis d'attention qui reste */
.av-paiement__avis {
  margin-bottom: var(--av-e5);
}

/* La zone de l'Element : notre chargement, puis l'Element, en haut de la zone (22/10/2026) */
.av-paiement__zone {
  display: grid;
  align-content: start;
}

/* Le chargement et l'Element dans la même case de la zone (A-9 et critique générale de Thomas, 22/10/2026, #570) :
   le chargement s'y tend sur toute la place réservée et se centre en hauteur et en largeur ; l'Element, qui arrive
   dans la même case, reste en haut de la zone. Rien ne bouge à son arrivée : la case garde la hauteur réservée tant
   que la zone est occupée. Sans réserve, la case prend la hauteur du chargement, comme avant. */
.av-paiement__chargement,
.av-paiement__element {
  grid-area: 1 / 1;
}

.av-paiement__element {
  align-self: start;
}

/* S-4 A (22/10/2026) : pendant le chargement (aria-busy), une hauteur réservée, pour que la case d'engagement et
   « Payer » ne bougent pas sous le doigt à l'arrivée de l'iframe. C'est la hauteur mesurée de l'Element, pas un
   jeton : un script la pose sur la zone dans --av-paiement-reserve (sous 468 px de zone) et
   --av-paiement-reserve-large (au-delà), ici design/gabarits/stripe-demo.js ; à la bascule (#551), un attribut de
   données lu par le script, jamais un style en ligne du gabarit. Sans elles, rien n'est réservé. aria-busy part une
   fois l'Element affiché et stable. La case s'étire alors sur toute la réserve (align-content), pour que le
   chargement s'y centre (#570, 22/10/2026). */
.av-paiement__zone[aria-busy="true"] {
  align-content: stretch;
  min-height: var(--av-paiement-reserve);
}

/* À partir de 468 px de zone, Stripe met la date et le cryptogramme côte à côte et l'Element raccourcit : il change de
   grille à cette largeur de zone, que la requête de conteneur suit. Sans @container (0,72 % des visites, § 13), la
   réserve étroite reste : de l'air en trop le temps du chargement (22/10/2026). */
@container (min-width: 468px) {
  .av-paiement__zone[aria-busy="true"] {
    min-height: var(--av-paiement-reserve-large, var(--av-paiement-reserve));
  }
}

/* Le chargement et l'Element se masquent par l'attribut hidden : av-chargement, en flex, resterait visible
   (22/10/2026) */
.av-paiement__chargement[hidden],
.av-paiement__element[hidden] {
  display: none;
}

/* S-7 A (22/10/2026) : le lien d'action d'un avis (« Afficher le nouveau montant », qui recharge la page) prend la
   couleur du ton de l'avis, comme un lien d'avis, dont le contraste est vérifié */
.av-avis .av-action {
  color: inherit;
}

/* S-7 A : le lien sur sa propre ligne, avec sa cible de 44 px, qui déborde de 12 px dans le bas de l'avis : l'avis
   garde ses 16 px sous le texte (22/10/2026) */
.av-avis__action {
  margin-bottom: calc(-1 * var(--av-e3));
}

/* Le panneau de confirmation (K-1 A, K-2 A ; Thomas, 22/10/2026) : une variante de l'en-tête de page, sur le blanc de
   l'étape, sans aplat ni contour, ni barre d'étapes (ce n'est pas une étape) ; une coche de 32 px en vert de succès
   au-dessus du titre (« Commande validée »), calée à gauche, muette, 8 px avant lui (4 de marge, 4 de l'en-tête).
   Sans coche quand l'issue n'est pas un succès (rapport non produit) : le titre le dit seul. */
.av-titre-page--confirmation .av-titre-page__icone {
  display: block;
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  margin-bottom: var(--av-e1);
  fill: var(--av-succes);
}

/* L'icône du site ({% svg 'img/icons/check-circle' %}), posée dans le span de l'icône, en prend la taille
   (22/10/2026) */
.av-titre-page--confirmation .av-titre-page__icone svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: inherit;
}

/* Son tracé porte sa propre couleur : il prend le vert de succès (22/10/2026) */
.av-titre-page--confirmation .av-titre-page__icone--erreur path {
  fill: inherit;
}

.av-titre-page--confirmation .av-coche {
  color: var(--av-succes);
}

/* Le rapport non produit (Thomas, 31/10/2026, à la relecture du #551) : la croix ({% svg 'img/icons/circle-xmark' %}) en
   rouge d'erreur, à la place et à la taille de la coche, pour que l'issue se lise comme celle d'une commande validée */
.av-titre-page--confirmation .av-titre-page__icone--erreur {
  fill: var(--av-erreur);
}

/* Le panneau porte lui-même l'écart entre groupes (32 px, § 5) jusqu'à ce qui le suit : le bouton, les notes, puis le
   compte déplié, sans qu'une classe de la suite le prenne pour elle (22/10/2026) */
.av-titre-page--confirmation {
  padding-bottom: var(--av-e6);
}

/* « La suite » (Thomas, 22/10/2026) : sous le panneau, un titre de groupe (av-titre-groupe), puis une liste à filet
   (av-liste) d'une phrase par ligne, sans chevron, là où il y a vraiment une suite à lire : le rapport en échec, le support,
   le retour d'un avis. Les confirmations d'achat ont leurs notes (av-notes). Une adresse redite passe à la ligne plutôt que
   d'élargir la colonne à 320 px. */
.av-suite {
  overflow-wrap: break-word;
}

/* Une phrase par ligne, sans fin : toute la largeur, sans l'écart de 16 px gardé pour une fin de ligne
   (22/10/2026) */
.av-suite .av-liste__ligne {
  grid-template-columns: minmax(0, 1fr);
}

/* Les notes de la confirmation (Thomas, 05/11/2026) : sous le bouton, ce qui reste utile à savoir (l'adresse, le débit, la
   facture), en petit et sans filet : la commande vient d'être validée, l'écran dit d'abord ce qui est fait et quoi faire. */
.av-notes {
  display: grid;
  gap: var(--av-e2);
  margin: var(--av-e4) 0 0;
  padding: 0;
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  list-style: none;
  overflow-wrap: break-word;
}

/* Sans bouton, les notes suivent le panneau, qui porte déjà ses 32 px, et le lien d'action vient après elles */
.av-titre-page + .av-notes {
  margin-top: 0;
}

/* Le compte après l'achat, déplié sous les notes : le rapport d'abord (Thomas, 05 et 06/11/2026), le groupe suivant à 32 px */
.av-etape__compte {
  margin-top: var(--av-e6);
}

/* Après le « ou » qui dit le choix entre le rapport et le compte (Thomas, 09/11/2026), le séparateur porte l'espace */
.av-separateur + .av-etape__compte {
  margin-top: 0;
}

/* Ce texte est secondaire (le rapport d'abord) : au poids des notes, jamais plus fort qu'elles */
.av-etape__compte > p {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* La coche se trace (Thomas, 05/11/2026) : le cercle, puis le trait. pathLength=1 dans l'icône : un seul tiret, décalé. */
.av-coche circle,
.av-coche path {
  fill: none;
  stroke: currentcolor;
  stroke-dasharray: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: av-coche-trace var(--av-duree-entree) var(--av-courbe) both;
}

.av-coche path {
  animation-delay: var(--av-duree-entree);
}

@keyframes av-coche-trace {
  from {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  /* Le bout arrondi du trait ferait un point avant le tracé */
  1% {
    opacity: 1;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-coche circle,
  .av-coche path {
    animation: none;
  }
}

/* La synthèse de la sélection (R-13 A ; Thomas, 05/11/2026) : le décompte du paiement, une seule mise en forme d'un écran à
   l'autre, dans le bloc du bouton, sur toute la colonne : une ligne par produit retenu, les montants au bord droit, sous
   les prix des cartes, pour qu'ils s'additionnent à l'œil. Le montant supplémentaire est un <output>, qui s'annonce quand
   une case change. Le bouton le redit sans « TTC », que le décompte dit juste au-dessus (#569 Q2-2 B) ; dessous, « Vous
   n'êtes débité qu'une fois votre rapport produit. » (#569 Q2-3 A). */
.av-decompte--synthese {
  justify-self: stretch;
  margin-bottom: var(--av-e4);
  padding-inline: var(--av-e4);
}

.av-decompte__ligne[hidden],
.av-decompte__libelle[hidden],
.av-decompte--synthese[hidden] {
  display: none;
}

/* Aucune ligne à montrer (light inclus, rien de coché) : ni marge ni filet au-dessus de la condition */
.av-decompte--synthese .av-decompte__lignes:not(:has(> :not([hidden]))) + .av-decompte__total {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* À 0 €, la condition d'un rapport offert avec une option à la place du montant (data-total-vide, #586) : son libellé
   masqué, la phrase sur toute la ligne, en texte courant, qui passe à la ligne. Par le voisin du libellé masqué, sans
   :has(), pour qu'un navigateur qui l'ignore ne laisse pas la phrase déborder (§ 13) */
.av-decompte__ligne > [data-total-libelle][hidden] + .av-decompte__montant {
  grid-column: 1 / -1;
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  font-variant-numeric: normal;
  text-align: left;
  white-space: normal;
}

/* La mention RGPD (P-14 C ; Thomas, 22/10/2026 : le texte, imposé par le DPO, reste mot pour mot) : ouverte sous « Payer »
   (demande du DPO, Thomas, 09/11/2026) comme sous « Envoyer » sur la page Contact ; ses paragraphes en 12/20, à 8 px l'un
   de l'autre */
.av-mentions__rgpd {
  display: grid;
  gap: var(--av-e2);
  padding-top: var(--av-e3);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
  overflow-wrap: break-word;
}

/* Son lien (l'adresse de la politique de protection des données) reste dans sa phrase, au gris du texte : sa cible de
   44 px est portée par av-lien--cible, sans casser l'interligne du paragraphe (§ 13, #591) */
.av-mentions__rgpd .av-lien {
  color: inherit;
}

/* Sous le bouton d'un formulaire du site (paiement, contact, candidature ; #386) : la phrase d'après, à 12 px */
.av-etape__ensuite.av-mentions__rgpd {
  padding-top: 0;
}

/* ===================== Retours, attente et pages système ===================== */

/* Les retours, les attentes et les pages système du site (#570, lot 6), retenus par Thomas le 22/10/2026 sur les
   passes 1 et 2 de l'atelier (§ 11 et § 16 du guide) : la bannière de site,
   l'emplacement des messages du compte, le texte d'état, la note, l'attente longue et son logo animé, l'illustration
   et la mise en page des pages d'erreur, la boîte de Cloudflare. Le reste reprend le catalogue : un message ou un
   retour est un avis (av-avis, quatre tons, sa suite en av-avis__action), toute confirmation d'une action du compte un
   avis de succès en tête de la page (B-7 A), le retour du partage un avis sous le champ qui reste jusqu'au prochain
   envoi (B-9 A), une règle permanente un encadré et l'état d'une tâche un avis d'information (B-8 C), un vide
   av-vide, une attente courte av-chargement (la roue), l'avancement d'un envoi av-progression (B-12 B), l'échec d'un
   rapport le panneau de confirmation sans coche et sa suite (av-titre-page--confirmation, av-suite, S-12 A). */

/* Bannière de site (B-1 B, B-2 A ; Thomas, 22/10/2026 : « c'est un bandeau qui doit attirer ») : une bande pleine
   largeur, premier enfant de l'en-tête (av-entete), qui colle donc avec lui en haut de l'écran sur une page du site et
   dans le compte, et défile avec lui sur une tâche ; son texte sur la colonne de la page (av-conteneur, --tache dans
   un tunnel). Une offre : toute la bande est le lien (un <a>), le texte centré et souligné, une flèche au bout, ni
   fermable ni doublée d'un autre lien ; son texte se construit depuis le code et le prix (D-4). Une maintenance
   (--attention) : la même bande, sans lien. Une seule bande à la fois, la maintenance passant avant une offre. Jamais
   le vert d'achat, réservé au débit, ni le ton « attention » pour une offre, pris par la maintenance. Le texte en 14/20
   600 ; 44 px au moins, 12 px au-dessus et au-dessous d'une ligne. Une offre est en violet plein, texte blanc (5,5:1 ;
   Q2-1 A, Thomas, 22/10/2026). */
.av-banniere {
  display: block;
  background: var(--av-violet);
  color: var(--av-blanc);
  font: var(--av-texte-court);
  font-weight: 600;
  letter-spacing: var(--av-chasse-court);
  text-align: center;
  text-decoration: none;
}

/* Le texte et son icône en ligne, centrés : passé à la ligne sur téléphone, le texte se partage en lignes de longueur
   égale, et la flèche suit son dernier mot au lieu de rester au bord de la bande (22/10/2026) */
.av-banniere__barre {
  display: block;
  min-height: var(--av-cible);
  padding-block: var(--av-e3);
  text-wrap: balance;
}

.av-banniere__texte {
  display: inline;
}

/* La flèche d'une offre, au bout du texte, l'icône d'une maintenance, devant lui : 16 px, à la couleur du texte (§ 6,
   une icône dans un texte de 14 px), posées sur la ligne ; l'icône du site porte sa couleur sur son tracé, que celle
   du texte remplace (22/10/2026) */
.av-banniere__barre > svg {
  display: inline-block;
  width: var(--av-icone-petite);
  height: var(--av-icone-petite);
  vertical-align: text-bottom;
  fill: currentColor;
}

.av-banniere__barre > svg path {
  fill: inherit;
}

.av-banniere__texte + svg {
  margin-left: var(--av-e1);
}

.av-banniere__barre > svg:first-child {
  margin-right: var(--av-e2);
}

/* Une offre : le texte souligné dit que la bande est un lien (22/10/2026) */
a.av-banniere .av-banniere__texte {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Survol et appui de la bande d'une offre : le violet foncé d'un contrôle violet (§ 11, États) ; le focus, blanc sur
   le violet comme sur l'encre, se dessine dans la bande, qui touche les bords de l'écran (22/10/2026) */
a.av-banniere:active {
  background: var(--av-violet-survol);
}

@media (hover: hover) {
  a.av-banniere:hover {
    background: var(--av-violet-survol);
  }
}

a.av-banniere:focus-visible {
  outline-color: var(--av-blanc);
  outline-offset: calc(-1 * (var(--av-trait-focus) + var(--av-decalage-focus)));
}

/* L'annonce d'une maintenance (B-2 A ; D-5 : une variable d'environnement posée avant le tag, lue au rendu, avec son
   texte et son heure ; Thomas, 22/10/2026) : la même bande au ton « attention », brun sur son fond pâle (6,45:1), sans
   lien, collée elle aussi, son icône devant le texte ; role="status" */
.av-banniere--attention {
  background: var(--av-attention-pale);
  color: var(--av-attention);
}

/* Une ancre s'arrête sous l'en-tête collant et sa bande : 64 px de plus, la hauteur d'une bande de deux lignes (une
   offre sur téléphone) ; une tâche, dont l'en-tête défile avec sa bande, garde ses 48 px (22/10/2026, #570). Le texte
   d'une maintenance (la variable de D-5) tient donc lui aussi sur deux lignes à 320 px, icône comprise : à trois, la
   bande fait 84 px et cache les 20 premiers pixels d'une ancre. */
html:has(.av-entete:not(.av-entete--tache) > .av-banniere) {
  scroll-padding-top: calc(var(--av-hauteur-entete) + var(--av-e8));
}

/* L'emplacement des messages dans une page du compte (B-3 A, B-7 A ; Thomas, 22/10/2026) : un seul, sous l'en-tête de
   page, posé par site/compte.html, à 24 px de ce qui suit ; le pendant d'av-etape__avis, qui reste celui d'une tâche
   (site/tache.html). Toute confirmation d'une action du compte s'y dit en avis de succès, actions de liste comprises
   (« Invitation renvoyée à … », « … ne fait plus partie de la société. ») ; ni site/page.html ni site/rapport.html,
   pages en cache, n'en ont. */
.av-lateral__avis {
  margin-bottom: var(--av-e5);
}

/* L'avis que le socle htmx pose après l'élément qui a agi quand sa réponse échoue (B-11 A ; Thomas, 22/10/2026) : dans
   une ligne de liste (aucune aujourd'hui : « Renvoyer » recharge la page, lot 3 du #545), sur toute la largeur de la
   ligne, sous son détail ; role="alert", « Impossible de
   mettre à jour cette partie de la page. » et « Recharger la page » (av-avis__action). Après un formulaire, il le suit
   dans le rythme de son bloc. Une page peut s'en dispenser quand elle pose le sien (l'écran d'attente, une option du
   rapport). */
.av-liste__ligne > .av-avis {
  grid-column: 1 / -1;
  margin-top: var(--av-e2);
}

/* L'avis d'un groupe de champs (« Vos pièces jointes n'ont pas été conservées… », B-12 ; 22/10/2026) : entre le
   libellé et la zone de dépôt, 12 px avant elle */
.av-champ > .av-avis {
  margin-bottom: var(--av-e1);
}

/* L'issue d'une fenêtre qui envoie (HistoVec, A-9 A ; 22/10/2026) : en tête de son corps, comme l'avis d'une étape, à
   24 px de ce qui suit (les 12 px de la grille du corps, plus 12) ; il reçoit le focus. Pendant l'envoi, le chargement
   (la roue) prend la place du formulaire, la fenêtre garde sa hauteur, et le corps le centre. */
.av-fenetre__corps > .av-etape__avis {
  margin-bottom: var(--av-e3);
}

/* Pendant l'envoi (aria-busy), la fenêtre garde la hauteur qu'elle avait au clic, sur le motif de la zone du paiement
   (#569, S-4 A) : c'est une mesure, pas un jeton ; le script la pose dans --av-fenetre-reserve, jamais un style en ligne du
   gabarit, et retire aria-busy à l'issue. Sans elle, rien n'est réservé (A-9 A ; 22/10/2026). */
.av-fenetre[aria-busy="true"] {
  min-height: var(--av-fenetre-reserve);
}

/* Une ligne qu'on ne peut pas ouvrir (B-6 B ; Thomas, 22/10/2026 ; aujourd'hui la facture sans fichier : le choix du
   rapport pro et le tableau de bord sont en cartes, #545, #551) : l'état désactivé d'un contrôle neutre (§ 11,
   États), le nom pâle, sans lien ni chevron ; la raison reste en gris secondaire (av-liste__detail), l'issue en lien
   d'action */
.av-liste__ligne--desactivee .av-liste__nom {
  color: var(--av-desactive-texte);
}

/* Texte d'état (§ 14 : le remplaçant de la notification éphémère ; A-13 A ; 22/10/2026) : une phrase courte qui dit
   qu'une action a abouti, à côté de l'action qui l'a produite (« Lien copié », « Certificat téléchargé. »), en vert de
   succès (6,99:1 sur blanc), 14/20 600, une coche de 16 px devant : jamais la couleur seule. role="status", vide au
   chargement et rempli par le script pour être annoncé ; il reste jusqu'au rechargement, jamais effacé seul (§ 11,
   Avis). Une confirmation qui compte (un enregistrement, un envoi) reste un avis de succès (B-7 A, B-9 A). Une adresse
   longue passe à la ligne. */
.av-etat {
  display: flex;
  align-items: flex-start;
  gap: var(--av-e2);
  color: var(--av-succes);
  font: var(--av-texte-court);
  font-weight: 600;
  letter-spacing: var(--av-chasse-court);
  overflow-wrap: anywhere;
}

.av-etat[hidden] {
  display: none;
}

/* Vide au rendu, partout (23/10/2026, #571) : tant que le script ne l'a pas écrit, il ne pèse rien, ni l'écart de
   son parent ni sa marge : les 8 px de la pile de pièces sous « Copier le lien » d'un guide (P-15 A), les 8 px du champ
   du lien dans « Partager le rapport » (P-6 A), les 12 px sous le bouton d'une étape (« Certificat téléchargé. »,
   A-13 A du #570). Hors du flux, sans taille, il reste dans l'arbre d'accessibilité pour être annoncé, jamais en
   display: none ; écrit, il y revient. La balise s'écrit vide, sans espace ni retour à la ligne entre ses deux bornes :
   sinon :empty ne la voit plus, et l'écart revient sans bruit */
.av-etat:empty {
  position: absolute;
}

/* L'échec de ce qu'il annonce, à sa place (Q2-2 A : « Impossible de copier le lien. Copiez l'adresse de la page. »,
   la copie du lien d'un guide, qui n'a pas de champ dont sélectionner le lien ; 23/10/2026, #571) : le rouge d'erreur
   et l'icône d'erreur à la place de la coche, role="status" gardé. Le script pose la classe avec le texte, et la
   retire quand une copie suivante réussit. Dessin à valider par Thomas : la passe 2 n'en montrait que le texte */
.av-etat--erreur {
  color: var(--av-erreur);
}

/* La coche, centrée sur la première ligne de 20 px ; l'icône du site porte sa couleur sur son tracé, que le vert
   remplace (22/10/2026) */
.av-etat > svg {
  flex: none;
  width: var(--av-icone-petite);
  height: var(--av-icone-petite);
  margin-top: calc((var(--av-e5) - var(--av-e1) - var(--av-icone-petite)) / 2);
  fill: currentColor;
}

.av-etat > svg path {
  fill: inherit;
}

/* Sous le bouton d'une étape, à la place de la phrase d'après, à 12 px (A-13 A : « Certificat téléchargé. », une fois
   le certificat reçu et le bouton rendu à son libellé ; 22/10/2026) */
.av-etape__action .av-etat {
  margin-top: var(--av-e3);
}

/* « Réessayer » sous le refus d'un fichier (B-12 : « Impossible d'envoyer ce fichier. », la croix pour le retirer ;
   22/10/2026) : un lien d'action sur sa ligne de 44 px, sous l'état du fichier ; en flex, sans la hauteur de ligne de
   24 px autour du bouton */
.av-fichiers__action {
  display: flex;
}

/* Note : une phrase grise qui dit un vide là où un aplat serait de trop (V-8 A : « Vous n'avez pas encore envoyé votre
   rapport. », l'historique des envois, dans la fenêtre de partage, où le vide n'a pas d'aplat ; 22/10/2026) : 14/20
   gris secondaire, à 4 px sous le titre de son groupe, comme la phrase d'un titre (§ 5) */
.av-note {
  max-width: var(--av-largeur-lecture);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-titre-groupe + .av-note {
  margin-top: calc(-1 * var(--av-e3));
}

/* Le terme d'une recherche redit dans le titre d'un vide (V-6 A : « Aucun article ne correspond à « … » », puis
   « Effacer la recherche » ; 22/10/2026) : seul lui passe à la ligne au milieu d'un mot trop long (un lien collé, à
   320 px), le reste du titre garde ses coupures ; « anywhere », pour que le vide, calé à gauche, ne se dimensionne
   pas sur lui */
.av-vide__terme {
  overflow-wrap: anywhere;
}

/* Le panneau des suggestions sans suggestion (V-9 A ; 22/10/2026) : « Aucune adresse trouvée » en gris, dans une zone
   role="status" à part du champ, qui repasse à aria-expanded="false" ; puis « Saisir l'adresse à la main » en lien
   d'action, sur sa ligne de 44 px. Une panne de l'API Adresse, qui répond 200 avec une liste vide (#481), a le même
   rendu. */
.av-suggestions__vide {
  padding: var(--av-e2) var(--av-e4) 0;
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-suggestions__action {
  margin: 0 var(--av-e4) var(--av-e1);
}

/* Tant que le panneau est ouvert, le lien permanent sous le champ se masque (hidden) : le panneau le recouvre, et la
   même action ne s'offre qu'une fois ; en flex, av-action resterait visible (V-9 A ; 22/10/2026) */
.av-champ__suite[hidden] {
  display: none;
}

/* L'aide d'un groupe de choix sous sa légende (« Plusieurs choix possibles. », S-20 A ; 22/10/2026) : 4 px avant la
   première option, comme l'erreur du groupe qui prend sa place (« Choisissez au moins un motif. ») */
.av-groupe > .av-champ__aide {
  margin-bottom: var(--av-e1);
}

/* Deux liens d'action dans un avis (S-19 C : « Se connecter » et « Nous écrire » ; 22/10/2026) : la rangée
   (av-rangee--blocs) à 24 px de l'un à l'autre, sans écart entre deux lignes, chaque lien ayant sa ligne de 44 px ;
   elle déborde de 12 px dans le bas de l'avis, comme un lien seul (av-avis__action) */
.av-avis__action.av-rangee {
  row-gap: 0;
}

/* L'attente longue (A-1 A, A-2 B, A-3 C, A-4 A, A-5 A ; Thomas, 22/10/2026) : la zone de la génération d'un rapport,
   sur l'écran d'attente (une tâche, sous son en-tête de page) et dans la visionneuse du compte. Le logo animé et ce
   qu'on attend (av-chargement--logo), au centre de la zone ; dessous, sa suite (av-attente__suite) : l'avis d'une
   attente longue (information, « Nous écrire », posé au bout de 60 s, D-12) puis « Recharger la page », toujours là,
   le seul recours sans htmx. L'avis de l'attente longue s'écrit dans une région role="status" sans classe, posée vide
   au rendu en tête de la suite : une région créée avec son texte n'est pas annoncée à coup sûr ; l'avis n'a pas de
   role propre. Quand le sondage s'arrête, l'avis d'erreur (role="alert", « Recharger la page ») prend la place du
   logo, en premier enfant de la zone, et la page retire son chapeau (A-3 C). Un avis garde la largeur de la colonne,
   son texte à gauche. Sur l'écran d'attente, la zone n'a pas de marge propre : 24 px sous l'en-tête de page, 48 px
   avant les mentions, comme le contenu de toute tâche (22/10/2026). La zone reste hors de l'élément que la page sonde
   (#468). Dans la visionneuse, à l'ouverture (« Ouverture du rapport »), la zone recouvre la place réservée de
   l'iframe et y centre le logo. */
.av-attente {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--av-e4);
  text-align: center;
}

/* La suite prend la largeur de la colonne, pour que l'avis de l'attente longue y ait celle de l'avis d'arrêt ;
   « Recharger la page » reste au centre (22/10/2026) */
.av-attente__suite {
  display: grid;
  justify-self: stretch;
  justify-items: center;
  gap: var(--av-e4);
}

.av-attente > .av-avis,
.av-attente__suite > [role="status"] {
  justify-self: stretch;
  text-align: left;
}

/* Sur l'écran d'attente, sous un titre calé à gauche, la zone l'est aussi : centrée, elle se lisait comme une autre page
   (Thomas, 09/11/2026). Seule la visionneuse (--ecran), sans titre, centre le logo sur la place de l'iframe */
.av-attente:not(.av-attente--ecran),
.av-attente:not(.av-attente--ecran) .av-attente__suite {
  justify-items: start;
  text-align: left;
}

.av-attente:not(.av-attente--ecran) .av-chargement--logo {
  align-items: flex-start;
  text-align: left;
}

/* Vide, la région de l'attente longue sort de la grille, sans quoi son écart s'ajouterait au-dessus de « Recharger la
   page » ; elle reste lue par le lecteur d'écran, qui annoncera l'avis (22/10/2026) */
.av-attente__suite > [role="status"]:empty {
  position: absolute;
}

/* Toute la hauteur de l'écran (A-5 A ; 22/10/2026) : la page d'attente rendue dans l'iframe de la visionneuse
   (iframe=1, D-13), sans en-tête ni mentions, son h1 masqué hors de la zone. Le logo au milieu de la hauteur, sa suite
   dessous, hors du calcul du milieu : le logo reste au même endroit que celui de l'ouverture, que la visionneuse centre
   sur la place de l'iframe ; rien ne saute de l'un à l'autre. 24 px en haut et en bas de l'iframe, pour que la suite
   ne touche jamais son bord. */
.av-attente--ecran {
  grid-template-rows: 1fr auto 1fr;
  align-content: stretch;
  min-height: 100dvh;
  padding-block: var(--av-e5);
}

/* Les pages rendues dans la visionneuse (#552), sans fond ; l’arrêt de l’attente masque sa suite par hidden. */
:where(:root):has([data-av-attente-iframe], [data-av-rapport-iframe]) body {
  background: transparent;
}

.av-attente--ecran > :first-child {
  grid-row: 2;
}

.av-attente--ecran > .av-attente__suite {
  grid-row: 3;
  align-self: start;
}

/* Le logo animé (A-2 B, A-5 A, Q2-2 A ; Thomas, 22/10/2026 : le logo, plus pro et sobre, plutôt que la voiture
   d'aujourd'hui, une fausse progression, écartée à la passe 2) : le chargement d'une longue attente, la
   génération du rapport ; la roue reste aux attentes courtes. Les deux brins du logo, écrits en SVG dans la page,
   à leurs couleurs (§ 8 : elles ne se recolorent pas), sans Lottie ni script (305 Ko de moins sur chaque page qui
   attend, et la page autonome de Cloudflare peut le reprendre) : le ruban du Lottie d'aujourd'hui, tel quel (Thomas,
   23/10/2026). Quand l'appareil demande moins de mouvement, le logo reste entier et immobile, et le texte dit
   l'attente. Le texte à 12 px dessous, au centre de sa zone, ses lignes centrées sous le logo. */
.av-chargement--logo::before {
  content: none;
}

/* Le dessin : le ruban du Lottie du site (src/static/lottie/loading.json), tel quel (Thomas, 23/10/2026) : les deux
   brins du logo qui se dessinent en boucle et défilent vers la gauche. design/outils/chargement_logo.py le rejoue en
   SVG et CSS dans src/static/design/chargement-logo.svg, que la page inclut ({% svg 'design/chargement-logo' %}) : ses
   images clés, une par image du Lottie, et son logo immobile sous prefers-reduced-motion sont dans le fichier. 96 px de
   large, sa hauteur suivant son viewBox (5:3, le cadre du Lottie d'aujourd'hui) */
.av-chargement__anime {
  display: block;
  flex: none;
  width: var(--av-e9);
  height: auto;
}

/* L'illustration d'une page système (S-2 B ; Thomas, 22/10/2026) : le panneau de la 404, le feu de la 500 allumé au
   rouge, immobiles (le § 7 n'admet pas d'animation décorative ; le pouls d'aujourd'hui est refusé, § 14). Au-dessus du
   titre, calée à gauche comme la coche du panneau de confirmation, 160 px de haut (96 + 64), 16 px avant le titre
   (12 de marge, 4 de l'en-tête). Muette (aria-hidden) : le titre dit tout. Une illustration du site (§ 9), ses
   couleurs écrites dans son fichier, en SVG dans la page ou en image. */
.av-titre-page__illustration {
  display: block;
  justify-self: start;
  margin-bottom: var(--av-e3);
}

.av-titre-page__illustration :is(svg, img) {
  display: block;
  width: auto;
  height: calc(var(--av-e9) + var(--av-e8));
}

/* Une page système sans champ (404, 500, 403, page expirée, rapport indisponible, lien expiré ; S-1 ; 22/10/2026) : le
   bloc du bouton suit directement l'en-tête de page, qui porte déjà ses 24 px ; sans cette règle, les 24 px du bloc s'y
   ajoutaient (48 px, l'écart entre deux chapitres) au lieu des 24 px jusqu'au bouton d'une étape. Dans le cadre du site
   comme dans l'écran de tâche ; sous le panneau de confirmation, qui porte les siens, 32 px. */
.av-titre-page + .av-etape__action {
  margin-top: 0;
}

/* L'en-tête de page seul dans son étape, sans bloc après lui (une page système sans action ; la 400 en a une depuis
   le #547 ; S-1 ; 22/10/2026) : ses
   24 px du bas ne servent plus à rien, et s'ajoutaient aux 48 px de l'étape (72 px jusqu'aux mentions au lieu des 48
   de toute page de tâche) */
.av-etape > .av-titre-page:last-child {
  padding-bottom: 0;
}

/* Le logo écrit en SVG dans la page (S-7 A : la page autonome de Cloudflare, qui ne demande rien à l'origine, ni
   feuille, ni police, ni image, ni script ; 22/10/2026) : à la hauteur du logo en image, ses couleurs dans le SVG */
.av-entete__logo > svg {
  display: block;
  width: auto;
  height: var(--av-e5);
}

/* La police du système (S-7 A ; 22/10/2026) : la page autonome de Cloudflare ne demande aucune police à l'origine,
   peut-être éteinte. Posée sur la racine (<html class="av-police-systeme">), où les styles de texte sont déclarés
   (tokens.css), la classe remplace la police du site dans tous ; aucun texte n'employant alors la police déclarée
   (@font-face), le navigateur ne la télécharge pas, même si la feuille en ligne de la page la recopie. La pile est le
   jeton --av-police-systeme (tokens.json), les replis de --av-police-sans sans Plus Jakarta Sans : --av-police-sans
   reste écrite en clair, parce que jetons.py la recopie dans l'apparence de Stripe, qui refuse var(). */
:root.av-police-systeme {
  --av-police-sans: var(--av-police-systeme);
}

/* La boîte que Cloudflare insère dans ses pages (::…_BOX::, S-8 A ; Thomas, 22/10/2026) : posée nue dans la colonne,
   après notre texte, sans aplat ni contour (rien à nous autour d'un contenu qui n'est pas à nous, § 6) ; son contenu,
   en anglais, prend notre texte pour ne pas trancher : son titre en libellé, ses lignes en 14/20 gris foncé, sans
   puces. Elle se coupe partout : sa ligne User-Agent dépasse la colonne de 288 px à 320 px. Le contrôle Turnstile
   (300 px fixes) prend 12 px de la gouttière à 320 px, sans défilement de côté. */
.av-cloudflare {
  min-width: 0;
  color: var(--av-gris-fonce);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  overflow-wrap: anywhere;
}

.av-cloudflare :is(h1, h2, h3) {
  margin-bottom: var(--av-e1);
  color: var(--av-encre);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

.av-cloudflare p + p,
.av-cloudflare p + ul {
  margin-top: var(--av-e2);
}

.av-cloudflare ul {
  padding: 0;
  list-style: none;
}

/* Un lien dans un texte qui est la seule action de sa page (l'adresse info@autoviza.fr des pages Cloudflare, avec la
   référence du blocage, S-10 A ; 22/10/2026) ou l'adresse de support d'une phrase sous un bouton (l'offre SOH, #551) :
   sa cible de 44 px est portée hors du texte par ::after, sans grandir la ligne de 24 px (§ 13, la recette de
   « Retirer ») ; insécable, une seule boîte */
.av-lien--cible {
  position: relative;
  white-space: nowrap;
}

.av-lien--cible::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--av-cible);
  transform: translateY(-50%);
}

/* ===================== Surcouches et actions secondaires ===================== */

/* Lot 7 (#571) : la planche de la passe 1 tranchée par Thomas le 23/10/2026, M-11 C et, pour tout le reste, la
   variante recommandée. Ici, les seuls composants qui manquaient au socle ; le reste se fait avec ceux qui existent
   (av-fenetre en <dialog> pour une confirmation, av-action en fin de ligne, av-etat « Lien copié », av-avis). Le
   comportement (ouverture, focus, Échap, placement, copie, repli sans popover) est au #546. Trois règles existantes
   ont changé : la largeur de la fenêtre (F-15 A), sa règle d'ouverture (F-17 A) et son titre (A-3 A) ; quatre sont
   nées à côté de leur composant : la ligne qui poste (button.av-liste__lien, M-7 A), l'action de l'en-tête de page
   (av-titre-page__action, D-19), le texte d'état vide (.av-etat:empty) et son échec (av-etat--erreur, Q2-2 A, à
   valider par Thomas). */

/* Bouton destructif (A-1 B ; Thomas, 23/10/2026, #571) : rouge plein, texte blanc (6,57:1), seulement dans la fenêtre
   (<dialog>) qui confirme une action qu'on ne défait pas soi-même : « Retirer de la société », « Retirer les
   données » d'HistoVec. La ligne qui l'ouvre garde son lien d'action violet (« Retirer ») ; « Désactiver le rapport »
   du Centre de support reste violet, l'attestation cochée valant confirmation (A-6 A) ; créer de nouveaux codes de
   secours n'est pas retirer (A-9 A). Survol et appui foncent le rouge (--av-erreur-survol, 8,99:1) ; désactivé et
   occupé, ceux du bouton. */
.av-bouton--destructif {
  background: var(--av-erreur);
}

.av-bouton--destructif:active {
  background: var(--av-erreur-survol);
}

@media (hover: hover) {
  .av-bouton--destructif:hover {
    background: var(--av-erreur-survol);
  }
}

/* Lien d'action occupé (A-5 A, 23/10/2026, #571) : une action qui poste (« Renvoyer » sur la ligne d'une invitation)
   passe à l'état occupé dès le premier toucher, comme le bouton (§ 11, États) : aria-busy, un texte masqué
   « , en cours », une roue violette à la place du libellé, aucun second envoi. Moins de mouvement : pas de roue, le
   libellé reste, comme le bouton (§ 13). */
.av-action[aria-busy="true"] {
  position: relative;
  color: transparent;
  text-decoration-color: transparent;
  pointer-events: none;
}

.av-action[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--av-icone);
  height: var(--av-icone);
  margin: auto;
  border: var(--av-trait-controle) solid var(--av-violet);
  border-right-color: transparent;
  border-radius: var(--av-rayon-pilule);
  animation: av-tourne 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .av-action[aria-busy="true"] {
    color: var(--av-violet);
    text-decoration-color: currentColor;
  }

  .av-action[aria-busy="true"]::after {
    content: none;
  }
}

/* Fenêtre d'un document tiers (F-1 A, F-2 A ; 23/10/2026, #571) : le rapport CARFAX®, pensé à 1 024 px. Au téléphone,
   l'écran entier (100dvh), la tête collée (« Rapport CARFAX® » et Fermer), le document dessous, bord à bord ; au
   défilement, la tête reste. À partir de 640 px, la largeur de la feuille du rapport, haute de l'écran moins 2 × 32 px.
   Le modificateur ne règle que la taille : quand le document manque, le corps reste celui du socle et porte en haut,
   sans s'étirer sur la hauteur, l'avis d'A-10 A (lot 6) et « Recharger la page ». */
.av-fenetre--document {
  inset: 0;
  height: 100vh; /* repli d'un navigateur sans dvh, sans quoi l'iframe tomberait à sa hauteur par défaut */
  height: 100dvh;
  max-height: none;
  border-radius: 0;
}

.av-fenetre--document > .av-fenetre__corps {
  align-content: start;
}

@media (min-width: 640px) {
  .av-fenetre--document {
    width: min(var(--av-largeur-feuille), calc(100% - 2 * var(--av-e6)));
    height: calc(100vh - 2 * var(--av-e6));
    height: calc(100dvh - 2 * var(--av-e6));
    border-radius: var(--av-rayon-bloc);
  }
}

/* Le corps qui porte le document (F-3 A) : une iframe à hauteur fixe, bord à bord, qui défile elle-même. Rien ne se
   mesure, rien ne saute quand la feuille de CARFAX arrive, et le #546 peut retirer allow-same-origin. */
.av-fenetre__corps--document {
  display: block;
  padding: 0;
  overflow: hidden;
}

.av-fenetre__document {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--av-blanc);
}

/* Aide dépliée sous un champ (F-9 A, 23/10/2026, #571) : dans « Activer HistoVec », « Où trouver le numéro de
   formule ? » (av-depliant) suit l'aide du champ (« Par exemple 2021AA10528. »), à 12 px ; ouvert, sa phrase (« Sur
   la couverture de la carte grise. ») à 16 px du résumé, puis l'image à 12 px. L'image, sur 16rem au plus, aux angles
   des blocs ; rien ne s'agrandit dans le flux au toucher. */
.av-champ > .av-depliant {
  margin-top: var(--av-e1);
}

.av-champ > .av-depliant > .av-depliant__corps {
  display: grid;
  gap: var(--av-e3);
  padding-top: var(--av-e4);
}

.av-champ__image {
  display: block;
  width: 100%;
  max-width: var(--av-largeur-image-aide);
  height: auto;
  border-radius: var(--av-rayon-bloc);
}

/* Aide du vendeur (M-11 C ; Thomas, 23/10/2026, #571) : sur le rapport ouvert avec la clé vendeur, jamais dans la
   visionneuse (F-19 A), la bulle gardée : un rond violet de 56 px à 16 px du coin bas droit (32 px à partir de
   640 px), l'ombre de ce qui flotte (§ 6), son icône blanche de 32 px, nommé par aria-label (« Une erreur dans le
   rapport ? »), rendue hidden : autoviza.js la montre après l'appel du profil (#546). Fermée, elle couvre le texte du bas de l'écran :
   c'est le prix de la bulle, seule surcouche ancrée du site (§ 14, M-1 A). Survol et appui : le violet foncé
   (§ 11, États). Tant que le bandeau de consentement est là, la bulle et son panneau montent au-dessus de lui
   (--av-cookies-hauteur, #573). */
.av-bulle {
  position: fixed;
  right: var(--av-gouttiere);
  bottom: calc(var(--av-gouttiere) + var(--av-cookies-hauteur, 0px));
  z-index: var(--av-z-entete);
  display: grid;
  place-items: center;
  width: var(--av-hauteur-controle-grand);
  height: var(--av-hauteur-controle-grand);
  padding: 0;
  border: 0;
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet);
  color: var(--av-blanc);
  box-shadow: var(--av-ombre-flottant);
  cursor: pointer;
}

.av-bulle:active {
  background: var(--av-violet-survol);
}

@media (hover: hover) {
  .av-bulle:hover {
    background: var(--av-violet-survol);
  }
}

/* L'icône du site porte sa couleur sur son tracé ({% svg %}) : le blanc du rond la remplace */
.av-bulle svg,
.av-bulle svg path {
  fill: currentColor;
}

.av-bulle svg {
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
}

/* Son panneau : une fenêtre (av-fenetre en popover : sa tête « Une erreur dans le rapport ? » et Fermer, son corps qui
   défile, les questions du code en accordéon, son pied « Signaler une erreur », qui transmet le rapport, D-12), au
   modificateur --bulle : non bloquante, ancrée au-dessus du rond, à 8 px, sur 22rem au plus et jamais plus que l'écran
   moins ses gouttières, ni plus haute que lui : en haut, sa gouttière et 16 px, à toutes les largeurs (32 puis 48 px) ;
   l'ombre au lieu du voile (§ 6), aux angles des blocs à toutes les largeurs. Ouverte, elle couvre presque tout l'écran
   du téléphone. */
.av-fenetre--bulle {
  inset: auto var(--av-gouttiere) calc(var(--av-gouttiere) + var(--av-hauteur-controle-grand) + var(--av-e2) + var(--av-cookies-hauteur, 0px)) auto;
  width: min(var(--av-largeur-bulle), calc(100vw - 2 * var(--av-gouttiere)));
  height: auto;
  max-height: calc(100dvh - var(--av-hauteur-controle-grand) - 2 * var(--av-gouttiere) - var(--av-e2) - var(--av-e4) - var(--av-cookies-hauteur, 0px));
  margin: 0;
  padding-bottom: 0;
  border-radius: var(--av-rayon-bloc);
  box-shadow: var(--av-ombre-flottant);
}

.av-fenetre--bulle::backdrop {
  background: none;
}

@media (min-width: 640px) {
  .av-bulle {
    right: var(--av-gouttiere-large);
    bottom: calc(var(--av-gouttiere-large) + var(--av-cookies-hauteur, 0px));
  }

  .av-fenetre--bulle {
    inset: auto var(--av-gouttiere-large) calc(var(--av-gouttiere-large) + var(--av-hauteur-controle-grand) + var(--av-e2) + var(--av-cookies-hauteur, 0px)) auto;
    width: min(var(--av-largeur-bulle), calc(100vw - 2 * var(--av-gouttiere-large)));
    max-height: calc(100dvh - var(--av-hauteur-controle-grand) - 2 * var(--av-gouttiere-large) - var(--av-e2) - var(--av-e4) - var(--av-cookies-hauteur, 0px));
  }
}

/* Sociétés de même nom (M-5 A, 23/10/2026, #571) : dans « Changer d'espace », une société dont un autre espace du
   compte porte le nom (25 des 34 comptes à plusieurs sociétés) prend son SIRET en détail sous le nom, « SIRET 812 345
   678 00021 », 14/20 gris, à 4 px (le nom et le détail d'une ligne de liste, § 4) ; la rubrique passe à deux lignes,
   son icône centrée sur elles. Seulement entre homonymes : sinon le nom seul. La tête de la fenêtre du compte
   (av-fenetre__detail) et l'identité de l'en-tête (« Garage Martin · SIRET … ») le disent avec leurs classes. */
.av-rubriques__texte {
  display: grid;
  gap: var(--av-e1);
  min-width: 0;
}

.av-rubriques__detail {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Visite guidée de l'Espace Pro (T-2 A, T-3 A, T-4 A ; 23/10/2026, #571) : la bulle d'une étape, surcouche non
   bloquante (§ 6) : blanche, l'ombre de ce qui flotte, sans voile, sans contour ni flèche (blanche sur la page blanche,
   une flèche ne se voit pas : la marque de la cible relie la bulle à ce qu'elle décrit), sur 20rem au plus et jamais
   plus que l'écran moins ses gouttières (288 px à 320 px). Sa tête : « Étape 2 sur 6 » en libellé gris et la croix
   « Fermer la visite » (44 px, à 8 px du bord, comme la tête d'une fenêtre) ; son titre en titre 4 (h2) ; son texte en
   14/20 ; son pied, à 16 px : « Suivant » en bouton, puis « Précédent » en lien d'action, absent à la première étape ;
   « Terminer la visite » à la dernière.
   Réalisée au #546 en popover="manual", à la place de TourGuide : la couche du dessus ; Échap et la croix la ferment,
   un clic dehors agit sur la page sans la fermer (T-5 A). Le script la pose à 12 px de la marque de sa cible, en
   coordonnées de la page (contenue par la racine, elle défile avec elle), par --av-visite-haut et --av-visite-gauche :
   une mesure, pas un jeton, jamais un style en ligne du gabarit (le motif de --av-fenetre-reserve). Sans popover
   (F-17 A), enfant de body, ouverte par av-visite--ouverte, elle reste sous l'en-tête collé et au-dessus de ce qui est
   posé en --av-z-dessus, jamais à la couche de la modale. */
.av-visite {
  position: absolute;
  inset: var(--av-visite-haut, auto) auto auto var(--av-visite-gauche, auto);
  z-index: calc(var(--av-z-entete) - 1);
  width: min(var(--av-largeur-visite), calc(100vw - 2 * var(--av-gouttiere)));
  height: auto;
  margin: 0;
  padding: var(--av-e2) var(--av-e2) var(--av-e4) var(--av-e4);
  border: 0;
  border-radius: var(--av-rayon-bloc);
  background: var(--av-blanc);
  color: var(--av-encre);
  box-shadow: var(--av-ombre-flottant);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  text-align: left;
  overflow: visible;
}

/* Près d'une cible de l'en-tête collé (« Menu du compte »), la bulle reste avec lui au défilement : en coordonnées de
   l'écran (#546) */
.av-visite--collee {
  position: fixed;
}

.av-visite__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-e3);
}

.av-visite__rang {
  color: var(--av-gris-texte);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
}

.av-visite__titre {
  padding-right: var(--av-e2);
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

.av-visite__texte {
  display: grid;
  gap: var(--av-e2);
  margin-top: var(--av-e1);
  padding-right: var(--av-e2);
}

.av-visite__pied {
  margin-top: var(--av-e4);
  padding-right: var(--av-e2);
}

/* La marque de la cible d'une étape (T-2 A) : le contour violet de 2 px, sans voile ; à 2 px d'un bouton (« Menu du
   compte » au téléphone, T-6 A), comme son focus ; --bloc, à 8 px d'un bloc (une section, un groupe de rubriques), aux
   angles des contrôles ; en dedans d'une rubrique de la colonne, comme son focus. C'est un contour autour d'un
   contenu : une exception au § 6 (« Contours et filets »), qui naît avec T-2 A. Pour le #546 : la marque ne se confond
   pas avec le focus au clavier, qui entre dans la bulle, et se retire quand la cible elle-même reçoit le focus. */
.av-visite-cible {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

.av-visite-cible--bloc {
  border-radius: var(--av-rayon-controle);
  outline-offset: var(--av-e2);
}

.av-rubriques__lien.av-visite-cible {
  outline-offset: calc(-1 * var(--av-trait-focus));
}

/* Visionneuse du compte (P-1 C, P-2 A, F-19 A ; 23/10/2026, #571) : le rapport ouvert depuis le compte, une iframe sur
   toute la hauteur que l'en-tête laisse, en dvh (le pied d'une fenêtre du rapport reste au-dessus de la barre de
   Safari). Au téléphone, sous 640 px, la rangée : le retour en bouton à icône nommé (« Retour à Mes rapports
   personnels »), puis « Partager le rapport » ; 48 px de contrôles, 8 px au-dessus et au-dessous, un filet en bas,
   dessiné en dedans (la couche de navigation, § 6) ; le titre de la page en h1 masqué. Il reste 539 px au rapport à
   375 × 667, 440 à 320 × 568. À partir de 640 px, où la hauteur ne manque plus, l'en-tête de tâche du #570 : le retour
   nommé, le véhicule en titre, l'immatriculation et la date, puis le bouton, à 24 px du rapport. Les deux sont dans la
   page, l'un caché à chaque largeur. Sans « Partager le rapport » (un import, P-3 A ; un rapport qui ne s'affiche pas,
   P-4 A), la rangée ne garde que le retour, nommé en lien d'action. Pas d'« Ouvrir dans un nouvel onglet » : son
   adresse porte la clé vendeur (P-2 A). De bord à bord sous 960 px ; au-delà, la colonne du contenu, à côté de la
   navigation. */
.av-lateral--visionneuse {
  padding-block: 0;
}

.av-visionneuse {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--av-hauteur-entete));
  margin-inline: calc(-1 * var(--av-gouttiere));
}

.av-visionneuse__barre {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-e2);
  padding: var(--av-e2) var(--av-gouttiere);
  box-shadow: inset 0 calc(-1 * var(--av-trait-filet)) 0 var(--av-gris-trait);
}

.av-visionneuse__entete {
  display: none;
}

/* La carte du véhicule, en ligne, sur sa propre rangée, sous le retour nommé, qui ne lui laisserait pas la place */
.av-visionneuse__vehicule {
  flex-basis: 100%;
  min-width: 0;
}

/* Avec le partage en bouton à icône (Thomas, 06/11/2026) : une seule rangée de 44 px, le retour, la carte, le partage ; le
   rapport y gagne une rangée. La carte y tient en deux lignes, le logo à côté : le nom, coupé s'il le faut, puis la plaque */
.av-visionneuse__barre--partage {
  flex-wrap: nowrap;
}

.av-visionneuse__barre--partage > .av-visionneuse__vehicule {
  flex: 1 1 0;
}

.av-visionneuse__barre--partage .av-vehicule--ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--av-e2);
}

.av-visionneuse__barre--partage .av-vehicule__tete {
  display: contents;
}

.av-visionneuse__barre--partage .av-vehicule__logo {
  grid-row: span 2;
}

.av-visionneuse__barre--partage .av-vehicule__identite {
  overflow: hidden;
  grid-column: 2;
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av-visionneuse__barre--partage .av-vehicule__nom,
.av-visionneuse__barre--partage .av-plaque {
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* text-wrap: pretty, sur le nom de la carte, y remet le retour à la ligne */
.av-visionneuse__barre--partage .av-vehicule__nom {
  white-space: nowrap;
}

.av-visionneuse__barre--partage .av-vehicule__plaque {
  grid-column: 2;
}

.av-visionneuse__entete .av-vehicule--ligne {
  margin-top: var(--av-e2);
}

.av-visionneuse__rapport {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--av-aplat);
}

@media (min-width: 640px) {
  .av-visionneuse {
    margin-inline: calc(-1 * var(--av-gouttiere-large));
  }

  .av-visionneuse__barre {
    display: none;
  }

  /* Le bandeau du véhicule et « Partager le rapport » tout à droite, au bas de l'en-tête, sur la ligne de la carte
     (Thomas, 09/11/2026) */
  .av-visionneuse__entete {
    display: grid;
    flex: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--av-e4);
    padding: 0 var(--av-gouttiere-large) var(--av-e5);
  }

  .av-visionneuse__entete > .av-titre-page {
    padding-bottom: var(--av-e4);
  }

  .av-visionneuse__entete > .av-actions {
    margin-bottom: var(--av-e4);
  }
}

@media (min-width: 960px) {
  .av-visionneuse {
    margin-inline: 0;
  }

  .av-visionneuse__entete {
    padding-inline: 0;
  }
}

/* L'ouverture du rapport dans la visionneuse (A-5 A et D-13 du #570 ; 23/10/2026, #571) : la zone de l'attente prend
   la place de l'iframe et sa hauteur, celle que l'en-tête et la rangée laissent, et non celle de l'écran ; le logo y
   tombe au même endroit que dans la page d'attente rendue ensuite dans l'iframe (attente.html?iframe) : rien ne
   saute. La zone et l'iframe partagent la même case (av-visionneuse__cadre, #549, MR 7) : l'iframe y reste invisible
   tant que la zone est là, qu'autoviza.js retire au chargement du rapport (la page du rapport, en iframe, a un fond
   transparent : elle ne peut pas couvrir la zone). Sans script, la zone n'est jamais montrée. */
.av-visionneuse__cadre {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
}

.av-visionneuse__cadre > * {
  grid-area: 1 / 1;
  min-height: 0;
}

.av-visionneuse__cadre > .av-visionneuse__rapport {
  height: 100%;
}

.av-visionneuse__cadre > .av-attente--ecran {
  display: none;
}

.av-js .av-visionneuse__cadre > .av-attente--ecran:not([hidden]) {
  display: grid;
}

.av-js .av-visionneuse__cadre:has(> .av-attente--ecran:not([hidden])) > .av-visionneuse__rapport {
  visibility: hidden;
}

/* À partir de 960 px, la colonne colle sous l'en-tête et défile seule : plus haute que la visionneuse sur un écran de
   portable (872 px dans l'Espace Pro), elle faisait défiler la page à côté de l'iframe (#549, MR 7 ; la règle proposée
   par gabarits/visionneuse.html, une exception à « la colonne défile avec la page », § 11, Navigation du compte) */
@media (min-width: 960px) {
  .av-lateral--visionneuse .av-lateral__nav {
    position: sticky;
    top: var(--av-hauteur-entete);
    max-height: calc(100dvh - var(--av-hauteur-entete));
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* Contraste élevé (F-16 A, 23/10/2026, #571) : en forced-colors, fonds et ombres tombent, et une surcouche se
   confondait avec la page. Toute surcouche prend un contour de 1 px à la couleur du texte du système : la fenêtre
   (le menu du téléphone compris, § 13), la liste de suggestions, le lien d'évitement qui a le focus, la bulle de
   l'aide du vendeur et celle de la visite ; le bandeau de consentement, collé en bas, par son bord haut (#573). Les
   pastilles de couleur gardent leur teinte, leur cadre et leur coche : la teinte est la donnée, et sans elles le choix
   ne se disait plus que par le gras du nom ; le rail du curseur, un dégradé qui tombait, se redessine aux couleurs du
   système après ses règles (Curseur, #573). */
@media (forced-colors: active) {
  .av-fenetre,
  .av-suggestions,
  .av-evitement:focus,
  .av-bulle,
  .av-visite {
    border: var(--av-trait-filet) solid CanvasText;
  }

  .av-cookies {
    border-top: var(--av-trait-filet) solid CanvasText;
  }

  .av-couleurs__pastille {
    forced-color-adjust: none;
  }
}

/* Navigateur sans popover (F-17 A, 23/10/2026, #571 ; au moins 0,72 % des visites du rapport, plus Safari 16) : une
   fenêtre popover y restait affichée, collée en bas, sans voile, sous le pied d'une carte du rapport. La feuille y
   cache tout [popover] ; le script du #546 ouvre une fenêtre par av-fenetre--ouverte (que reprend sa règle
   d'ouverture) et la bulle d'une étape par av-visite--ouverte. Ouverte, la fenêtre passe au-dessus de tout, à la
   couche de la modale, son voile dessiné par une ombre sans flou, faute de ::backdrop hors de la couche du dessus ; le
   panneau de l'aide du vendeur, non bloquant, garde son ombre, sans voile. Les <dialog> des confirmations, que tous
   les navigateurs connaissent, ne changent pas. */
@supports not selector(:popover-open) {
  [popover]:not(.av-fenetre--ouverte, .av-visite--ouverte) {
    display: none;
  }

  .av-fenetre--ouverte {
    z-index: var(--av-z-modale);
  }

  .av-fenetre--ouverte:not(.av-fenetre--bulle) {
    box-shadow: 0 0 0 100vmax var(--av-voile);
  }
}
/* ===================== Données et Espace Pro ===================== */

/* Lot 8 (#572) : tableaux, listes, recherche, images, carrousel, graphique, notation, codes et chiffres de l'Espace
   Pro. Planche courte du 23/10/2026 : la variante recommandée de chaque question et les défauts des inventaires. */

/* --- Compte et Espace Pro : listes, recherche, chiffres, codes, logo --- */

/* Le début d'une ligne de liste (T-3 A, fusionnée avec I-2 ; #572) : une image de 32 px, le logo de la marque d'une
   ligne de rapport du compte (alt vide, le nom le dit, § 9), ou un pictogramme, un drapeau des listes du rapport
   (#545). Calée sur la première ligne du nom (centrée sur ses 24 px, elle en déborde de 4 px en haut et en bas), à
   16 px du texte, qui commence alors à 64 px du bord (§ 5). Le nom, le détail, la fin et le chevron passent d'une
   colonne à droite ; une colonne de fin n'existe que si la ligne a une fin et un chevron */
.av-liste__ligne:has(> .av-liste__debut) {
  grid-template-columns: var(--av-icone-grande) minmax(0, 1fr) auto;
}

.av-liste__ligne:has(> .av-liste__debut):has(> .av-liste__fin + .av-liste__chevron) {
  grid-template-columns: var(--av-icone-grande) minmax(0, 1fr) auto auto;
}

.av-liste__debut {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  margin-top: calc((var(--av-e5) - var(--av-icone-grande)) / 2);
  object-fit: contain;
}

.av-liste__ligne:has(> .av-liste__debut) > :is(.av-liste__nom, .av-liste__detail) {
  grid-column: 2;
}

.av-liste__ligne:has(> .av-liste__debut) > :is(.av-liste__fin, .av-liste__chevron) {
  grid-column: 3;
}

.av-liste__ligne:has(> .av-liste__debut) > .av-liste__fin + .av-liste__chevron {
  grid-column: 4;
}

/* La pagination d'une liste du compte (T-1 A, T-11 ; #572) : 50 lignes par page, collée sous la liste, sans filet
   (jamais après la dernière ligne, T-12) ; ?page= garde ?search=. Aucune marge : sa ligne de 44 px centre « Page 2 sur
   8 » 12 px sous son bord, qui tombe ainsi à la distance du texte de la dernière ligne où tombe « Voir les 37
   opérations » : 28 px sous une liste qu'on parcourt, 24 sous une liste de 12 px (contrôle des espacements du lot 8) */

/* L'aperçu d'une image déposée (I-7, le logo de la société ; #572) : à la place de l'icône du fichier, 32 px, l'image
   entière (contain), alt vide, son nom le dit ; la colonne de l'action se réduit à son contenu. À 16 px du texte, qui
   commence à 64 px du bord après un pictogramme de 32 px (§ 5), comme après le logo d'une ligne de rapport
   (av-liste__debut) ; les 12 px de l'icône de 20 px le mettaient à 60 */
.av-fichiers li:has(> .av-fichiers__apercu) {
  grid-template-columns: var(--av-icone-grande) minmax(0, 1fr) auto;
  column-gap: var(--av-e4);
}

.av-fichiers__apercu {
  display: block;
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  object-fit: contain;
}

/* La zone de dépôt refusée à l'envoi du formulaire (I-7 : un format refusé, que le navigateur vide) : son pointillé
   passe au rouge d'erreur, jamais la couleur seule : l'erreur dessous nomme le fichier, avec son icône */
.av-depot:has(> input[aria-invalid="true"]) {
  border-color: var(--av-erreur);
}

/* --- Lecture et vente : tableaux du texte long, images, logos, dépliants --- */

/* Une check-list du Markdown d'un guide (render.py, li.task-item) : la case désactivée tient lieu de puce, au bord de
   la colonne, la suite d'une ligne longue alignée sur son texte (§ 11, Texte long ; #550) */
.av-texte-long li.task-item {
  margin-left: calc(-1 * var(--av-e5));
  padding-left: calc(var(--av-case) + var(--av-e2));
  list-style: none;
  text-indent: calc(-1 * (var(--av-case) + var(--av-e2)));
}

.av-texte-long li.task-item input {
  width: var(--av-case);
  height: var(--av-case);
  margin: 0 var(--av-e2) 0 0;
  vertical-align: middle;
  accent-color: var(--av-violet);
}

/* Le sommaire d'un guide ([TOC] du Markdown, div.toc) : « Sommaire » en titre, puis la liste de ses liens, celle du
   texte long (§ 11, Texte long ; #550, pris en route) */
.av-texte-long .toctitle {
  display: block;
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

.av-texte-long .toctitle + ul {
  margin-top: var(--av-e2);
}

/* L'image du haut d'un guide (I-5, I-8, I-9 ; #550) : sur la colonne de lecture, en 16/9, recadrée au centre, l'arrondi
   d'un bloc ; jamais en lazy, width et height écrits ; son texte saisi (hero_alt), vide sinon */
.av-image-tete {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--av-rayon-bloc);
  background: var(--av-aplat-fonce);
  object-fit: cover;
}

/* Le séparateur seul (T-12) : aucun composant ; un filet n'existe qu'entre deux lignes d'une liste ou d'un accordéon,
   jamais après la dernière ; ailleurs, seul l'air sépare (§ 5 : 32 px entre deux groupes, 48 entre deux chapitres ;
   dans un texte long, les 48 px au-dessus d'un h2). Le <hr> du Markdown des guides reste masqué, comme le
   masquait guides.scss, retiré au #550 */
.av-texte-long hr {
  display: none;
}

/* Un tableau dans un texte long (T-4) : av-tableau, sa fiche et --empile (section « Tableau de données »), que render.py
   pose au #550 (la classe, les rôles, data-libelle, le <span> de chaque cellule) à la place du conteneur .guide-table
   qui défilait de côté */

/* Le terme d'une recherche redit dans le titre de ses résultats (T-9 : « 3 articles pour « … » ») : seul lui passe à
   la ligne au milieu d'un mot trop long, comme av-vide__terme */
.av-titre-groupe__terme {
  overflow-wrap: anywhere;
}

/* Vignette d'une carte (la liste des guides ; I-3 A, I-5, I-14) : en tête de la carte, à fond perdu sur ses trois
   bords du haut, en 16/9, recadrée au centre ; 16 px jusqu'au titre, la marge de la carte. Sans image, l'image de repli
   du guide (couverture-guide.svg, #591), la même place, sans icône. Aucun zoom au survol (§ 7) : la carte prend l'aplat
   foncé, comme toute carte qui ouvre une page */
.av-carte__vignette {
  display: block;
  width: calc(100% + 2 * var(--av-e4));
  height: auto;
  aspect-ratio: 16 / 9;
  margin: calc(-1 * var(--av-e4)) calc(-1 * var(--av-e4)) calc(var(--av-e4) - var(--av-e1));
  border-radius: var(--av-rayon-bloc) var(--av-rayon-bloc) 0 0;
  background: var(--av-violet-pale) url("../img/illustration/couverture-guide.svg") center / cover;
  object-fit: cover;
}

/* L'extrait d'une carte de guide : deux lignes au plus, la suite coupée (la description SEO va jusqu'à 200
   caractères) */
.av-carte__texte--extrait {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Rangée de logos (« Des clients majeurs » des pages de vente ; I-4 A) : centrés, sans tuile, qui passent à la ligne,
   dans une rangée --blocs (24 px entre eux, 8 d'une ligne à l'autre). Chaque logo est le masque de son fichier,
   --av-logo, posé sur l'élément avec son ratio (style="--av-logo: url({% static … %}); aspect-ratio: 127 / 45"), le
   nom en aria-label ; une adresse absolue : relative, Chrome la résout depuis cette feuille. Un masque ne garde que la
   forme : un fichier aux découpes peintes en blanc (les lettres de carfax.svg) se réexporte découpes transparentes.
   Peint d'une seule couleur, celle du texte (Thomas, 09/11/2026 : en gris, ils étaient ternes ; à leurs couleurs, la
   rangée était disparate). À la hauteur du logo du rapport (§ 8), au plus 4 fois aussi large, le logo contenu dans sa
   boîte */
.av-logos {
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-logos__logo {
  display: block;
  height: var(--av-hauteur-logo-rapport);
  max-width: calc(var(--av-hauteur-logo-rapport) * 4);
  background: var(--av-encre);
  -webkit-mask: var(--av-logo) center / contain no-repeat;
  mask: var(--av-logo) center / contain no-repeat;
}

/* L'action qui suit la rangée (« Contactez l'équipe commerciale »), centrée comme elle, à 16 px : un bloc et son
   action (§ 5, la pile), comme les autres actions de la page de vente */
.av-logos + .av-actions {
  justify-content: center;
  margin-top: var(--av-e4);
}

/* Illustration recadrée (I-5 ; § 9 : « sur téléphone, une illustration large se recadre pour rester lisible plutôt que
   de rétrécir ») : sous 640 px, l'illustration d'un bloc --recadree passe au carré, recadrée au centre, ou sur le bord
   qui porte son sujet par un object-position posé sur l'image avec la classe (les trois rapports de l'ancienne page
   « Le rapport », à gauche : au centre, le carré coupait le logo Autoviza® du premier) ;
   à partir de 640 px, entière : sur la colonne de 704 px d'une tablette, le carré la grandirait sans rien rendre
   lisible. Posée illustration par illustration, sur une illustration large (une presque carrée n'y gagne rien) ; sans
   emploi depuis la série du 09/11/2026, toute carrée (§ 9), gardée pour la prochaine illustration large */
@media (max-width: 639px) {
  .av-deux-colonnes--recadree img {
    aspect-ratio: 1;
    object-fit: cover;
  }
}

/* --- Rapport : graphique, notation, carrousel, en-tête et pied --- */

/* Graphique (C-2 B, C-6 ; Thomas, 23/10/2026, #572) : ApexCharts 4.3.0, habillé aux jetons par un seul module,
   src/static/design/graphique.js, qui lit les variables --av-… à l'exécution (séries, traits, points, libellés en
   12 px, police) ; la feuille ne dessine que ce qui l'entoure. Une figure : le dessin (role="img" et la phrase de sa
   plage, que la bibliothèque remplit) et la légende en phrase ; puis, juste après la figure, le tableau des valeurs
   replié, rendus par le serveur (§ 3, Graphiques : pas d'infobulle, la valeur se lit sans survol). Une seule valeur ou
   aucune : une phrase, sans bibliothèque ; l'échelle de position (C-7) est en HTML. */
.av-graphique {
  display: grid;
  gap: var(--av-e3);
}

/* Le dessin rétrécit avec sa colonne (min-width: 0) : ApexCharts mesure son conteneur, qu'un élément de grille
   gardait sinon à la largeur d'un SVG vide, 300 px, plus large que la colonne de 288 px à 320 (le dessin mordait sur
   la gouttière). Ses libellés en chiffres tabulaires (§ 3) */
.av-graphique__dessin {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

/* Les places réservées, blanches, à la hauteur que le module donne au dessin (A-11 A : rien ne bouge quand il
   arrive). Le kilométrage : 160 px de tracé, 24 au-dessus (la valeur d'un point au sommet) et 32 pour l'axe ; 200
   puis 240 px de tracé à partir de 640 et de 1 025 px */
.av-graphique__dessin--kilometrage {
  min-height: calc(var(--av-e9) + var(--av-e8) + var(--av-e7) + var(--av-e2));
}

@media (min-width: 640px) {
  .av-graphique__dessin--kilometrage {
    min-height: calc(2 * var(--av-e9) + var(--av-e7) + 2 * var(--av-e2));
  }
}

@media (min-width: 1025px) {
  .av-graphique__dessin--kilometrage {
    min-height: calc(2 * var(--av-e9) + 2 * var(--av-e7) + var(--av-e2));
  }
}

/* Les titulaires : 64 px par type de titulaire (--av-lignes, le nombre de types, que le serveur connaît, posé sur le
   dessin), 72 pour l'axe et une ligne de légende ; une légende qui passe à la ligne se prend sur les lignes */
.av-graphique__dessin--titulaires {
  min-height: calc(var(--av-lignes, 1) * var(--av-e8) + var(--av-e7) + var(--av-e5));
}

/* Le liseré blanc des valeurs et des durées écrites (2 px autour de chaque lettre) : les filets de la grille et le
   pointillé d'une expertise, que le module passe sous la série, ne traversent plus les chiffres */
.av-graphique__dessin .apexcharts-datalabel {
  paint-order: stroke;
  stroke: var(--av-blanc);
  stroke-width: calc(2 * var(--av-trait-controle));
  stroke-linejoin: round;
}

/* La mention de CARFAX® au pied du rapport (Thomas, 05/11/2026) : sobre, un logo de taille maîtrisée */
.av-rapport-pied__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--av-e2);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-rapport-pied__source img {
  width: auto;
  height: var(--av-icone-petite);
}

/* La bulle, plus dense que le rapport (Thomas, 05/11/2026) : une échelle à elle, le titre en 18, la question en 14 à
   l'encre et en 600, la réponse en 14 en gris ; la question garde sa cible de 44 px, tête, corps et pied se serrent.
   Fermée, moins de 400 px à 375 px (mesuré par test_la_bulle_fermee_tient_en_moins_de_400_px) : la réponse a la place
   d'une question ouverte sans que le corps défile */
.av-fenetre--bulle .av-fenetre__tete {
  padding: var(--av-e1) var(--av-e2) var(--av-e1) var(--av-e4);
}

.av-fenetre--bulle .av-fenetre__titre {
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

.av-fenetre--bulle .av-fenetre__corps {
  padding: var(--av-e1) var(--av-e4) var(--av-e2);
}

.av-fenetre--bulle .av-fenetre__pied {
  padding: var(--av-e2) var(--av-e4) var(--av-e4);
}

.av-fenetre--bulle .av-accordeon__question {
  min-height: var(--av-cible);
  padding: var(--av-e2) 0;
  font: var(--av-texte-court);
  font-weight: 600;
  letter-spacing: var(--av-chasse-court);
}

.av-fenetre--bulle .av-accordeon__reponse {
  gap: var(--av-e2);
  padding-bottom: var(--av-e3);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* La légende en phrase, sous le dessin : la plage et ce qu'elle dit, en gris */
.av-graphique__legende {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Le tableau des valeurs, replié (C-6), juste après la figure (le figcaption en reste le dernier enfant, comme le veut
   <figure>) : son résumé à 16 px de la légende, le tableau à 16 px du résumé */
.av-graphique + .av-graphique__valeurs {
  margin-top: var(--av-e4);
}

.av-graphique__valeurs > .av-depliant__corps {
  padding-top: var(--av-e4);
}

/* Un seul relevé (C-6) : la phrase à la place de la courbe, à 4 px du titre de son groupe, du titre à son texte (§ 5),
   comme « Indisponible pour ce véhicule » (av-note) ; les 16 px du titre de groupe vont à une liste ou à un graphique */
.av-titre-groupe + p:not([class]) {
  margin-top: calc(-1 * var(--av-e3));
}

/* Échelle de position (C-7, le kilométrage relatif), sans bibliothèque : une piste grise, les repères minimum, moyen
   et maximum de véhicules semblables écrits au-dessus en gris, le véhicule en violet dessous, à l'encre ; plus de
   dégradé vert → rouge, qui jugeait un fait du véhicule (§ 2). */
.av-graphique__echelle {
  display: grid;
  gap: var(--av-e2);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  font-variant-numeric: tabular-nums;
}

/* Les repères : deux lignes de 20 px (le nom, la valeur), à la hauteur de leur texte ; à 48 px, 8 px vides au-dessus
   éloignaient l'échelle du titre de son groupe */
.av-graphique__reperes {
  position: relative;
  height: calc(var(--av-e7) - var(--av-e2));
  color: var(--av-gris-texte);
}

/* Une position (--x) : un nombre de 0 à 100, sans unité, celui que rend mileage_position (la moyenne au milieu, 0-50 %
   du minimum à la moyenne, 50-100 % de la moyenne au maximum), qui pose à 0 ou à 100 % un véhicule hors des
   véhicules semblables. Un repère est ancré sur sa position à la même part de sa largeur : calé à gauche à 0 %,
   centré à 50 %, calé à droite à 100 % */
.av-graphique__reperes > span,
.av-graphique__vehicule {
  position: absolute;
  left: calc(var(--x) * 1%);
  white-space: nowrap;
  transform: translateX(calc(var(--x) * -1%));
}

/* Les repères des bouts calés sur la piste, celui du milieu centré sur son trait */
.av-graphique__reperes > span {
  bottom: 0;
  text-align: center;
}

.av-graphique__reperes > span:first-child {
  text-align: left;
}

.av-graphique__reperes > span:last-child {
  text-align: right;
}

/* La piste, de l'épaisseur de la frise */
.av-graphique__piste {
  position: relative;
  height: var(--av-epaisseur-frise);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-gris-trait);
}

/* Le trait d'un repère, 2 px sur la hauteur de la piste */
.av-graphique__marque {
  position: absolute;
  inset-block: 0;
  left: calc(var(--x) * 1%);
  width: var(--av-trait-controle);
  background: var(--av-gris-texte);
  transform: translateX(-50%);
}

/* Le véhicule : un point violet de 16 px sur la piste, son kilométrage dessous */
.av-graphique__point {
  position: absolute;
  top: 50%;
  left: calc(var(--x) * 1%);
  width: var(--av-e4);
  height: var(--av-e4);
  border: var(--av-trait-controle) solid var(--av-blanc);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet);
  transform: translate(-50%, -50%);
}

/* Une ligne de 20 px : la légende à 12 px du kilométrage du véhicule, comme sous l'axe des autres graphiques */
.av-graphique__vehicules {
  position: relative;
  height: calc(var(--av-e5) - var(--av-e1));
  container-type: inline-size;
}

/* Le kilométrage du véhicule centré sous son point, calé dans la piste près des bouts (100cqi, la largeur de sa
   ligne) : il ne sort jamais de l'écran, et le cas courant, un véhicule entre 10 et 90 %, reste centré. Sans requête
   de conteneur, il glisse avec sa position, comme un repère */
.av-graphique__vehicule {
  top: 0;
  font-weight: 600;
  transform: translateX(clamp(calc(var(--x) * -1cqi), -50%, calc(100cqi - 100% - var(--x) * 1cqi)));
}

@supports not (container-type: inline-size) {
  .av-graphique__vehicule {
    transform: translateX(calc(var(--x) * -1%));
  }
}

/* Notation (C-3 B, C-4 ; Thomas, 23/10/2026, #572) : l'échelle de l'avis du rapport, cinq visages en vrais boutons
   radio (natifs, masqués comme ceux du contrôle segmenté : le clavier passe de l'un à l'autre aux flèches), un choix
   unique, sans mise en avant cumulée. Chaque visage à sa couleur, du rouge au vert (--av-notation-1 à -5, 3:1 au moins
   sur le blanc et sur le fond des champs), comme aujourd'hui et comme l'e-mail : une exception écrite au § 2, comme
   les séries ; ces couleurs ne servent qu'ici, et le vert du 5 n'est pas celui de l'achat. Le visage dans une cellule
   de 44 px au moins (56 au plus), sur le fond des champs, blanche sur un aplat (la carte de l'avis, av-sondage, au
   #545) ; le choisi se distingue par sa forme, pas par la couleur seule : sa cellule blanche cadrée de 2 px de sa
   couleur (Sélectionné, § 11, États). « Pas du tout satisfait » et « Très satisfait » aux deux bouts, en gris, cachés
   du lecteur d'écran, qui lit le nom de chaque visage. La note part au toucher (htmx, comme aujourd'hui) ; au clavier
   (règle du #546), les flèches déplacent le choix sans l'envoyer, la note part à Espace, à Entrée ou à la sortie du
   groupe : chaque visage traversé ne part pas. Le sur-titre « Enquête satisfaction » part. */
.av-notation {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.av-notation__question {
  margin-bottom: var(--av-e4);
  padding: 0;
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
  text-wrap: pretty;
}

/* La même question, après l'envoi : en paragraphe, sans échelle sous elle */
p.av-notation__question {
  margin-bottom: 0;
}

.av-notation__echelle {
  display: grid;
  grid-template-columns: repeat(5, minmax(var(--av-cible), var(--av-hauteur-controle-grand)));
  gap: var(--av-e2);
}

.av-notation__choix {
  position: relative;
  display: block;
}

.av-notation__choix:nth-child(1) {
  color: var(--av-notation-1);
}

.av-notation__choix:nth-child(2) {
  color: var(--av-notation-2);
}

.av-notation__choix:nth-child(3) {
  color: var(--av-notation-3);
}

.av-notation__choix:nth-child(4) {
  color: var(--av-notation-4);
}

.av-notation__choix:nth-child(5) {
  color: var(--av-notation-5);
}

.av-notation__choix input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.av-notation__visage {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: var(--av-trait-controle) solid transparent;
  border-radius: var(--av-rayon-controle);
  background: var(--av-champ-fond, var(--av-fond-champ));
  cursor: pointer;
  transition: border-color var(--av-duree) var(--av-courbe);
}

.av-notation__visage svg {
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
}

.av-notation__choix input:checked + .av-notation__visage {
  border-color: currentColor;
  background: var(--av-blanc);
}

.av-notation__choix input:focus-visible + .av-notation__visage {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

@media (hover: hover) {
  .av-notation__choix:hover input:not(:checked) + .av-notation__visage {
    background-image: linear-gradient(var(--av-voile-survol), var(--av-voile-survol));
  }
}

.av-notation__choix:active input:not(:checked) + .av-notation__visage {
  background-image: linear-gradient(var(--av-voile-appui), var(--av-voile-appui));
}

/* Les deux bouts, sous la première et la dernière cellule, à 8 px (l'écart de l'échelle, dont ils prennent la
   largeur) */
.av-notation__bornes {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: var(--av-e4);
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
}

/* Carrousel (I-1 C, I-10 ; Thomas, 23/10/2026, #572) : le prototype, en jetons. Des cartes à contour fin (exception
   écrite, § 6) qui défilent au doigt et s'arrêtent sur une carte ; la rangée va jusqu'au bord de l'écran sur
   téléphone, la carte suivante dépasse de 64 px à l'écran (48 dans la colonne, plus la gouttière) ; deux cartes à
   partir de 640 px, trois à partir de 1 025. Chaque carte est un vrai bouton, étendu à toute la carte. Sous la
   rangée, à 8 px, son pied : à gauche la position, une barre de 4 px (av-progression), la part parcourue en violet sur
   la piste grise, que le script avance au défilement ; « Échéance 3 sur 16 » en texte masqué pour le lecteur d'écran,
   réécrit seulement quand il change (aria-live poli : il se lit après une flèche) ; à droite les flèches, des boutons
   à icône de 44 px, blancs au filet gris comme ceux du prototype, qui avancent d'une carte et sont retirées par hidden
   en bout de rangée (une flèche retirée qui avait le focus le passe à l'autre), jamais rendues invisibles, chacune
   dans sa colonne (l'autre ne bouge pas).
   Posées à cheval sur les cartes, comme au prototype, elles couvraient 20 px du texte de la carte à 375 et à 768 px.
   Le défilement est doux, sauf quand l'appareil demande moins de mouvement : la rangée saute d'une carte (§ 7). À
   l'arrivée, la rangée est déjà sur la prochaine échéance, sans animation. Une seule carte : pas de carrousel, la
   carte seule ; trois cartes ou moins dont on veut tout voir (services vendeur) : une grille de cartes (I-11).
   Quand toutes les cartes tiennent (deux sinistres à partir de 640 px), rien ne défile : le pied se retire (hidden,
   sa règle en tête de la feuille), ni barre ni flèches, et la position reste celle du serveur ; il revient si la
   rangée rétrécit. Une flèche qui avait le focus quand le pied se retire (un téléphone qu'on tourne) le passe à la
   première carte, jamais au document. Le focus clavier d'une carte qui n'est pas entière (les 64 px qui dépassent, au
   téléphone) fait défiler la rangée jusqu'à elle, pour chaque carrousel ; au clavier seulement (:focus-visible, aucun
   pointeur enfoncé) : le focus d'un clic ou d'un toucher arrive à l'appui, et la rangée qui défilait alors n'ouvrait
   plus la carte touchée. Le comportement est celui d'autoviza.js (#546) ; sans lui, la rangée défile au doigt et à la
   tabulation, et le pied, qui ne ferait rien, est caché. */
/* 16 px entre deux cartes, et la rangée déborde de la colonne d'autant (--av-carrousel-bord) : arrêtée sur une carte,
   elle ne laisse rien voir de la précédente. Sur téléphone, c'est la gouttière : la rangée va jusqu'au bord de
   l'écran (à 12 px d'écart, comme au prototype, un liseré de 4 px en restait au bord). À partir de 640 px, la
   gouttière passe à 32 px mais le débord reste à l'écart : à 32, 16 px de la carte précédente, son coin et son
   contour, restaient au bord gauche (#572) */
.av-carrousel {
  --av-carrousel-ecart: var(--av-e4);
  --av-carrousel-bord: var(--av-gouttiere);
}

@media (min-width: 640px) {
  .av-carrousel {
    --av-carrousel-bord: var(--av-carrousel-ecart);
  }
}

.av-carrousel__rangee {
  display: flex;
  gap: var(--av-carrousel-ecart);
  margin: 0 calc(-1 * var(--av-carrousel-bord));
  padding: 0 var(--av-carrousel-bord);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-padding-inline: var(--av-carrousel-bord);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.av-carrousel__rangee::-webkit-scrollbar {
  display: none;
}

/* En bout de rangée, la dernière carte s'arrête au début, comme les autres : un vide de la largeur de ce qui dépasse
   (64 px, l'écart compris) la suit ; sans lui, la rangée finissait sur 64 px de la carte précédente (#545). Quand
   toutes les cartes tiennent, il tient aussi : rien ne défile de plus */
.av-carrousel__rangee::after {
  content: "";
  flex: 0 0 calc(var(--av-e8) - var(--av-carrousel-ecart));
}

@media (prefers-reduced-motion: no-preference) {
  .av-carrousel__rangee {
    scroll-behavior: smooth;
  }
}

.av-carrousel__carte {
  flex: 0 0 calc(100% - var(--av-e8));
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .av-carrousel__carte {
    flex-basis: calc((100% - var(--av-e8) - var(--av-carrousel-ecart)) / 2);
  }
}

@media (min-width: 1025px) {
  .av-carrousel__carte {
    flex-basis: calc((100% - var(--av-e8) - 2 * var(--av-carrousel-ecart)) / 3);
  }
}

/* Le vrai bouton de la carte (« Voir les 9 opérations ») couvre toute la carte ; son paragraphe se pose comme le pied
   d'une carte (av-carte__pied : 8 px de plus que l'écart de la carte, sa ligne de 44 px), pour que l'action d'une
   échéance tombe où tombe celle des autres cartes du rapport et du compte (services vendeur, solde) : 24 px visibles
   sous le texte, 28 au-dessus du bas de la carte. À 16 et 16, comme au prototype, elle se serrait contre la durée */
.av-carte > p:has(> .av-carrousel__ouvrir) {
  display: flex;
  margin-top: var(--av-e2);
}

.av-carrousel__ouvrir::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (hover: hover) {
  .av-carrousel__carte:hover .av-carrousel__ouvrir {
    color: var(--av-violet-survol);
  }
}

/* Le pied de la rangée : la barre à gauche, sur toute la place qui reste, les flèches à droite, centrées sur sa
   ligne */
.av-carrousel__pied {
  display: flex;
  align-items: center;
  gap: var(--av-e4);
  margin-top: var(--av-e2);
}

:root:not(.av-js) .av-carrousel__pied {
  display: none;
}

.av-carrousel__pied > .av-progression {
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
}

.av-carrousel__fleches {
  display: grid;
  grid-template-columns: repeat(2, var(--av-cible));
  gap: var(--av-e2);
  margin-left: auto;
}

.av-carrousel__fleche {
  border: var(--av-trait-filet) solid var(--av-gris-trait);
  background: var(--av-blanc);
}

.av-carrousel__fleche[hidden] {
  display: none;
}

.av-carrousel__fleche--suivant {
  grid-column: 2;
}

.av-carrousel__fleche--precedent svg {
  transform: rotate(90deg);
}

.av-carrousel__fleche--suivant svg {
  transform: rotate(-90deg);
}

/* Photo d'une annonce (I-3 A, I-5, I-8 ; #572, 23/10/2026) : la photo du partenaire, recadrée au centre en 16/10,
   jamais retouchée, 48 px de haut puis 68 à partir de 640 px, width et height écrits, jamais en lazy (elle est en
   haut de la page). Absente, ou en erreur (le script la retire, comme absente) : rien n'est réservé, le texte
   remonte ; ni icône ni silhouette sur la carte du véhicule. La carte de l'annonce, av-annonce : § 11 Rapport (#545). */
.av-photo {
  display: block;
  flex: none;
  width: auto;
  height: var(--av-e7);
  aspect-ratio: 16 / 10;
  border-radius: var(--av-rayon);
  object-fit: cover;
  object-position: center;
}

@media (min-width: 640px) {
  .av-photo {
    height: calc(var(--av-e8) + var(--av-e1));
  }
}

/* En tête du rapport (I-6 ; #572, 23/10/2026) : les marques d'av-marques, à la hauteur des logos du rapport (28 px sur
   téléphone, 30 à partir de 640 px, § 8). Le logo de la société ou du partenaire dans une boîte de quatre fois sa
   hauteur au plus, contenu sans être coupé, calé à gauche : un logo de 8:1 garde sa hauteur de boîte et sa largeur
   bornée, au lieu de déborder à 375 px. Sous 375 px, le logo carré d'Autoviza® (av-entete__logo--court). */
.av-marques--rapport {
  --av-marques-hauteur: calc(var(--av-hauteur-logo-rapport) - var(--av-trait-controle));
}

@media (min-width: 640px) {
  .av-marques--rapport {
    --av-marques-hauteur: var(--av-hauteur-logo-rapport);
  }
}

.av-marques--rapport img {
  height: var(--av-marques-hauteur);
}

.av-marques__partenaire {
  display: flex;
  min-width: 0;
}

.av-marques__partenaire img {
  width: auto;
  max-width: calc(4 * var(--av-marques-hauteur));
  object-fit: contain;
  object-position: left center;
}

/* ===================== Éléments sans usage aujourd'hui ===================== */

/* Lot 9 (#573) : saisie (calendrier, heure, montant, couleur, étiquettes, curseur), sélection, filtres, édition en
   ligne, minuterie, étiquette retirable, commentaire. Planche courte du 24/10/2026. */

/* --- Saisie : calendrier, heure, montant, couleur, étiquettes saisies, curseur --- */

/* Une date à choisir parmi des disponibilités (S-1 C, Thomas, 24/10/2026, contre la grille du mois) n'a pas de
   classe : les prochaines dates ouvertes en radios (av-choix) dans un fieldset, la suite, déjà dans la page, repliée
   derrière « Voir les N dates suivantes » (av-afficher-plus) ; jamais de grille de calendrier, ni dans la page ni
   dans une fenêtre. Une date connue reste av-date. */

/* L'heure (S-2) n'a pas de classe : deux champs « Heures » et « Minutes » d'av-date, au clavier numérique, en 24 h,
   l'exemple dans l'aide (« 14 30 »). Le montant (S-3) non plus : un champ à garnitures, « € » au bord droit
   (av-champ__unite, aria-describedby), inputmode="decimal", chiffres tabulaires (av-chiffres sur la saisie) ; « TTC »
   ou « HT » dans le libellé ; rien n'est inséré à la frappe, le serveur retire les espaces et lit la virgule. */

/* Couleur (S-4, #573) : des pastilles rondes en vrais radios masqués, au motif de la notation, jamais de
   type="color" libre. 32 px dessinés dans une cible de 44, le nom dessous, centré ; la choisie cadrée de violet (2 px,
   à 2 px de la pastille) et marquée d'une coche, la coche dans un rond violet en haut à droite, lisible sur n'importe
   quelle teinte. La teinte est la donnée du véhicule, posée par le gabarit en ligne (--av-pastille), jamais dans la
   feuille : l'exception au § 2, comme la notation ; un filet au voile d'appui (--av-voile-appui) détache le blanc et
   l'argent du fond. La première pastille se pose sur le bord commun de l'étape, comme la légende et les champs : sa
   cible déborde de 6 px dans la gouttière, et le nom d'une colonne plus large que la pastille, de quelques pixels. En
   erreur, une pastille non cochée prend l'anneau rouge, séparé de sa teinte par 2 px de blanc (lisible sur le rouge),
   comme le trait rouge des radios. */
.av-couleurs__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--av-hauteur-controle-grand));
  gap: var(--av-e2);
  margin-inline-start: calc((var(--av-icone-grande) - var(--av-hauteur-controle-grand)) / 2);
}

.av-couleurs__choix {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--av-e1);
  cursor: pointer;
}

.av-couleurs__choix input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.av-couleurs__pastille {
  position: relative;
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  margin: calc((var(--av-cible) - var(--av-icone-grande)) / 2);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-pastille, var(--av-fond-champ));
  box-shadow: inset 0 0 0 var(--av-trait-filet) var(--av-voile-appui);
}

.av-couleurs__choix input:checked + .av-couleurs__pastille {
  box-shadow:
    inset 0 0 0 var(--av-trait-filet) var(--av-voile-appui),
    0 0 0 var(--av-trait-controle) var(--av-blanc),
    0 0 0 calc(2 * var(--av-trait-controle)) var(--av-violet);
}

.av-couleurs__choix input[aria-invalid="true"]:not(:checked) + .av-couleurs__pastille {
  box-shadow:
    inset 0 0 0 var(--av-trait-filet) var(--av-voile-appui),
    0 0 0 var(--av-trait-controle) var(--av-blanc),
    0 0 0 calc(2 * var(--av-trait-controle)) var(--av-erreur);
}

.av-couleurs__choix input:checked + .av-couleurs__pastille::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--av-e1));
  right: calc(-1 * var(--av-e1));
  width: var(--av-icone-petite);
  height: var(--av-icone-petite);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
  box-shadow: 0 0 0 var(--av-trait-controle) var(--av-blanc);
}

.av-couleurs__choix input:focus-visible + .av-couleurs__pastille {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: calc(var(--av-e1) + var(--av-trait-focus));
}

.av-couleurs__nom {
  max-width: 100%;
  color: var(--av-gris-fonce);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
  text-align: center;
  overflow-wrap: anywhere;
}

.av-couleurs__choix input:checked ~ .av-couleurs__nom {
  color: var(--av-encre);
  font-weight: 600;
}

/* Étiquettes saisies (S-5, #573) : le champ reste un champ de 48 px ; une valeur validée (Entrée, virgule ou
   suggestion) devient une étiquette retirable (av-etiquette--retirable, E-2) sous le champ, jamais dans son cadre, à
   8 px l'une de l'autre, 12 px d'une rangée à l'autre : à 8, les croix de 44 px de deux rangées se chevauchaient
   (32 + 8 < 44). L'ajout et le retrait s'annoncent (role="status"), le focus revient au champ, sans confirmation
   (A-2 A). */
.av-champ__etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--av-e3) var(--av-e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sans étiquette, la liste se masque, même avec les blancs qu'une boucle du gabarit laisse entre ses balises */
.av-champ__etiquettes:not(:has(li)) {
  display: none;
}

/* Curseur (S-9, #573) : le type="range" natif restylé, toujours doublé de son champ (WCAG 2.5.7), qui en écrit la
   valeur au-dessus du rail ; les bornes aux deux bouts, en gris. Rail de 4 px sur l'aplat foncé (celui de la
   progression), la part choisie en violet (--av-curseur-ratio, de 0 à 1, posé par le gabarit avec la valeur, tenu à
   jour par le script), poignée violette de 24 px cadrée de blanc, sans ombre ; toute la hauteur de 44 px est la
   cible. Le curseur et ses bornes n'apparaissent qu'avec le script (av-js) : sans lui, le rail ne changerait rien à
   ce qui part, et le champ seul suffit. Une fourchette, ce sont deux champs « De » et « À », jamais deux poignées. */
/* Le champ du curseur, à la largeur de sa valeur et de son unité (« 50 km ») */
.av-curseur__champ {
  width: calc(var(--av-e8) + var(--av-e6));
}

.av-curseur__saisie {
  --av-curseur-part: calc(var(--av-e5) / 2 + (100% - var(--av-e5)) * var(--av-curseur-ratio, 0));
  display: none;
  width: 100%;
  height: var(--av-cible);
  margin: var(--av-e1) 0 0;
  padding: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.av-curseur__saisie::-webkit-slider-runnable-track {
  height: var(--av-e1);
  border-radius: var(--av-rayon-pilule);
  background: linear-gradient(to right, var(--av-violet) var(--av-curseur-part), var(--av-aplat-fonce) var(--av-curseur-part));
}

.av-curseur__saisie::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--av-e5);
  height: var(--av-e5);
  margin-top: calc((var(--av-e1) - var(--av-e5)) / 2);
  border: var(--av-trait-controle) solid var(--av-blanc);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet);
  appearance: none;
}

.av-curseur__saisie::-moz-range-track {
  height: var(--av-e1);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-aplat-fonce);
}

.av-curseur__saisie::-moz-range-progress {
  height: var(--av-e1);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet);
}

.av-curseur__saisie::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--av-e5);
  height: var(--av-e5);
  border: var(--av-trait-controle) solid var(--av-blanc);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-violet);
}

.av-curseur__saisie:focus-visible {
  outline: none;
}

.av-curseur__saisie:focus-visible::-webkit-slider-thumb {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

.av-curseur__saisie:focus-visible::-moz-range-thumb {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

.av-js .av-curseur__saisie {
  display: block;
}

/* Les bornes à 8 px sous le rail, centré dans ses 44 px */
.av-curseur__bornes {
  display: none;
  justify-content: space-between;
  gap: var(--av-e4);
  margin-top: calc(var(--av-e2) - (var(--av-cible) - var(--av-e1)) / 2);
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
  font-variant-numeric: tabular-nums;
}

.av-js .av-curseur__bornes {
  display: flex;
}

/* Contraste élevé (F-16 A) : le dégradé du rail tombait, la poignée restait seule ; le rail se redessine aux couleurs
   du système, la part choisie et la poignée en Highlight */
@media (forced-colors: active) {
  .av-curseur__saisie {
    forced-color-adjust: none;
  }

  .av-curseur__saisie::-webkit-slider-runnable-track {
    background: linear-gradient(to right, Highlight var(--av-curseur-part), CanvasText var(--av-curseur-part));
  }

  .av-curseur__saisie::-moz-range-track {
    background: CanvasText;
  }

  .av-curseur__saisie::-moz-range-progress {
    background: Highlight;
  }

  .av-curseur__saisie::-webkit-slider-thumb {
    border-color: Canvas;
    background: Highlight;
  }

  .av-curseur__saisie::-moz-range-thumb {
    border-color: Canvas;
    background: Highlight;
  }

  .av-curseur__saisie:focus-visible::-webkit-slider-thumb {
    outline-color: CanvasText;
  }

  .av-curseur__saisie:focus-visible::-moz-range-thumb {
    outline-color: CanvasText;
  }
}

/* --- Listes et actions : sélection multiple, filtres, édition en ligne, minuterie, étiquette retirable, commentaire --- */

/* Sélection multiple (S-7, #573) : pas de classe. Des cases (av-choix) dans un fieldset (av-groupe), jusqu'à sept ;
   au-delà, cinq cases puis « Voir les N autres » (av-afficher-plus, la suite en av-replie, qui ne replie jamais une
   case cochée : le serveur la rend dans les cinq). Une longue liste où l'on cherche passe aux étiquettes saisies
   (S-5) ; le <select multiple> natif est au registre, remplacé par les cases. */

/* Puces de filtre (S-8 A, #573) : filtrer une liste sur place, plusieurs critères à la fois. De vraies cases masquées,
   comme les radios du contrôle segmenté, dans un formulaire GET : « Filtrer » envoie, sans script ; « Effacer les
   filtres » est un lien d'action vers la liste entière. Une pilule de 36 px dessinée dans une cible de 44, sur l'aplat
   des champs, 14 px en 600, à 8 px l'une de l'autre, en rangée qui passe à la ligne (8 px visibles d'une rangée à
   l'autre : les 4 px de part et d'autre de la pilule). Sélectionnée : blanche, cadrée de violet, une coche violette
   devant le libellé (Sélectionné, États : le segment) ; jamais aria-pressed (registre). La rangée rend en bas les 4 px
   de la cible : 8 px de la légende à la pilule, comme d'un libellé à son champ, puis 16 px visibles jusqu'au groupe
   suivant ou au bouton. */
.av-filtres__puces {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--av-e2);
  margin-bottom: calc((var(--av-e6) + var(--av-e1) - var(--av-cible)) / 2);
}

.av-filtres__puce {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--av-cible);
  cursor: pointer;
}

.av-filtres__puce input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* La puce garde sa largeur en se cochant : au repos, 24 px du bord au texte, le trait compris, de chaque côté, le
   libellé centré ; cochée, 16 px, la coche dans les 8 px rendus à gauche (12 px du bord, 4 px du libellé) : la
   rangée ne se recompose pas */
.av-filtres__puce span {
  display: inline-flex;
  align-items: center;
  gap: var(--av-e1);
  min-height: calc(var(--av-e6) + var(--av-e1));
  padding: var(--av-e1) calc(var(--av-e4) + var(--av-e2) - var(--av-trait-controle));
  border: var(--av-trait-controle) solid transparent;
  border-radius: var(--av-rayon-pilule);
  background-color: var(--av-champ-fond, var(--av-fond-champ));
  color: var(--av-encre);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
  overflow-wrap: anywhere;
  transition:
    background-color var(--av-duree) var(--av-courbe),
    border-color var(--av-duree) var(--av-courbe);
}

.av-filtres__puce svg {
  display: none;
  flex: none;
  width: var(--av-icone-petite);
  height: var(--av-icone-petite);
  margin-left: calc(-1 * var(--av-e1));
  color: var(--av-violet);
  fill: currentColor;
}

.av-filtres__puce input:checked + span {
  padding-inline: calc(var(--av-e4) - var(--av-trait-controle));
  border-color: var(--av-violet);
  background-color: var(--av-blanc);
}

.av-filtres__puce input:checked + span svg {
  display: block;
}

.av-filtres__puce input:focus-visible + span {
  outline: var(--av-trait-focus) solid var(--av-violet);
  outline-offset: var(--av-decalage-focus);
}

@media (hover: hover) {
  .av-filtres__puce:hover input:not(:checked) + span {
    background-image: linear-gradient(var(--av-voile-survol), var(--av-voile-survol));
  }
}

.av-filtres__puce:active input:not(:checked) + span {
  background-image: linear-gradient(var(--av-voile-appui), var(--av-voile-appui));
}

/* Édition d'une valeur d'une ligne (S-6 B, Thomas, 24/10/2026, #573) : « Modifier » en fin de ligne (av-liste__fin,
   la seule action de la ligne) ouvre la fenêtre du bas (av-fenetre), son champ, « Enregistrer » et « Annuler » : un
   seul bouton principal à l'écran. Enregistrée, la fenêtre se ferme, le texte d'état (av-etat) s'écrit dans la ligne,
   sous le détail, à 8 px, et le focus revient à son « Modifier ». */
.av-liste__ligne > .av-etat {
  grid-column: 1;
  margin-top: var(--av-e1);
}

.av-liste__ligne:has(> .av-liste__debut) > .av-etat {
  grid-column: 2 / -1;
}

/* Le bouton à minuterie (S-11 A, #573) : pas de classe. Le bouton (ou le lien d'action) désactivé, sa raison dessous,
   à une heure fixe, jamais un compte qui défile (registre) : « Vous pourrez renvoyer l'invitation à 14 h 32. » ; à
   l'échéance, le serveur ou le script le réactive et la raison devient « Vous pouvez renvoyer l'invitation. »
   (role="status", annoncée). */

/* Étiquette retirable (E-2, #573) : une valeur choisie qu'on retire d'un geste (les étiquettes saisies, S-5). La
   pilule de l'étiquette, à 32 px, sur l'aplat foncé, 14/20 en 600 à l'encre, jamais tronquée : une valeur longue
   passe à la ligne et la pilule grandit. La croix est un vrai bouton de 44 px (av-champ__bouton--icone, nommé
   « Retirer … »), qui déborde de 6 px la pilule en haut, en bas et à droite sans la grandir ; sa croix de 16 px
   tombe à 8 px du bord. Le retrait se fait sans confirmation (A-2 A). */
.av-etiquette--retirable {
  gap: 0;
  max-width: 100%;
  min-height: var(--av-e6);
  padding: var(--av-e1) 0 var(--av-e1) var(--av-e3);
  color: var(--av-encre);
  font: var(--av-texte-court);
  font-weight: 600;
  letter-spacing: var(--av-chasse-court);
  white-space: normal;
  overflow-wrap: anywhere;
}

.av-etiquette--retirable > .av-champ__bouton--icone {
  margin-block: calc((var(--av-e6) - var(--av-cible)) / 2 - var(--av-e1));
  margin-inline: 0 calc((var(--av-e6) - var(--av-cible)) / 2);
  border-radius: var(--av-rayon-pilule);
  color: var(--av-gris-fonce);
}

/* Au clavier, l'anneau se resserre autour de la croix (32 px) : il tient dans la pilule, sans mordre le libellé */
.av-etiquette--retirable > .av-champ__bouton--icone:focus-visible {
  outline-offset: calc(-1 * var(--av-e2));
}

.av-etiquette--retirable > .av-champ__bouton--icone svg {
  width: var(--av-icone-petite);
  height: var(--av-icone-petite);
}

/* Commentaire (E-3, #573) : une note écrite par quelqu'un, le plus récent d'abord. L'auteur en 16/20 600, la date en
   gris à 4 px, le texte en 16/24 à 8 px ; ni bulle, ni contour : un filet entre deux, comme les lignes d'une liste
   qu'on parcourt (16 px de part et d'autre). L'avatar de l'auteur (av-avatar, 32 px), quand il y est, au bord, centré
   sur l'auteur et la date ; tout le reste à 16 px de lui, le texte à 64 px du bord (§ 5, après un pictogramme de
   32 px). Un texte long se coupe à quatre lignes avec le script, « Lire la suite » (lien d'action) le montre entier et
   disparaît ; sans script, le texte est entier, sans lien. */
.av-commentaires {
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-commentaire {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding-block: var(--av-e4);
}

.av-commentaire:has(> .av-avatar) {
  grid-template-columns: var(--av-icone-grande) minmax(0, 1fr);
  column-gap: var(--av-e4);
}

.av-commentaire > .av-avatar {
  grid-row: 1 / span 2;
  align-self: center;
}

.av-commentaire:has(> .av-avatar) > :not(.av-avatar) {
  grid-column: 2;
}

.av-commentaire + .av-commentaire {
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

.av-commentaire__auteur {
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
  overflow-wrap: anywhere;
}

.av-commentaire__date {
  margin-top: var(--av-e1);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-commentaire__texte {
  margin-top: var(--av-e2);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
  overflow-wrap: anywhere;
}

.av-js .av-commentaire__texte--long {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.av-commentaire__suite {
  display: none;
}

.av-js .av-commentaire__suite:not([hidden]) {
  display: inline-flex;
}

/* Avatar (composant de base demandé par Thomas, 24/10/2026, #573) : une personne, au début d'une ligne de personne
   seulement (un collaborateur, l'auteur d'une note), jamais dans l'en-tête (#568). Ses initiales, deux lettres au plus
   (prénom et nom, ou les deux premiers mots de l'adresse), en 600 à l'encre sur l'aplat foncé (15,08:1), cachées du
   lecteur d'écran (aria-hidden) : le nom est écrit à côté ; ou sa photo si on l'a, une <img> ronde, recadrée, alt vide.
   Ni couleur par personne, ni statut, ni contour. Trois tailles : 32 px par défaut (la ligne d'une liste, en
   av-liste__debut ; une note), 24 px (--petit, une personne citée dans une rangée serrée), 40 px (--grand, la tête
   d'une fiche de personne). */
.av-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-aplat-fonce);
  color: var(--av-encre);
  font: var(--av-texte-libelle);
  letter-spacing: var(--av-chasse-libelle);
  text-transform: uppercase;
  object-fit: cover;
  overflow: hidden;
  user-select: none;
}

.av-avatar--petit {
  width: var(--av-e5);
  height: var(--av-e5);
  font: var(--av-texte-etiquette);
  font-weight: 600;
  letter-spacing: var(--av-chasse-etiquette);
}

.av-avatar--grand {
  width: calc(var(--av-cible) - var(--av-e1));
  height: calc(var(--av-cible) - var(--av-e1));
  font: var(--av-texte-bouton);
  letter-spacing: var(--av-chasse-bouton);
}

/* Pastille de compteur (composant de base, #573) : un nombre sur une rubrique de navigation ou un onglet (« 1 »
   invitation en attente). Petite (20 px de haut, 20 de large au moins), en chiffres tabulaires, 12 px en 700 à l'encre
   sur l'aplat foncé, comme une étiquette : ni rouge, ni violet (le violet agit), ni point « non lu ». Au-delà de 99,
   « 99+ » ; le nombre se lit aussi au lecteur d'écran, avec ce qu'il compte (texte masqué). Au bord droit de la
   rubrique, avant son chevron ; sur la rubrique en cours (posée sur l'aplat foncé), elle passe au blanc. */
.av-pastille {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: var(--av-icone);
  height: var(--av-icone);
  padding-inline: var(--av-e1);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-aplat-fonce);
  color: var(--av-encre);
  font: var(--av-texte-etiquette);
  letter-spacing: var(--av-chasse-etiquette);
  font-variant-numeric: tabular-nums;
}

.av-rubriques__lien > .av-pastille {
  margin-left: auto;
}

.av-rubriques__lien > .av-pastille + .av-rubriques__chevron {
  margin-left: var(--av-e1);
}

.av-rubriques__lien[aria-current] > .av-pastille {
  background: var(--av-blanc);
}

/* Bandeau de consentement (X-1 B au design system « au cas où », Thomas, 24/10/2026, #573 ; le site n'en a pas
   besoin aujourd'hui) : une surcouche non bloquante collée en bas, blanche, son ombre portée vers le haut
   (--av-ombre-flottant-haut), sans voile ; rien n'est déposé avant le choix. Au téléphone, le cinquième de l'écran au
   plus, jusqu'au plus petit (112 px sur 320 × 568, 8 px au-dessus et au-dessous) : une phrase courte et « Choisir »
   (lien d'action, qui ouvre la fenêtre des finalités) sur la première ligne, puis « Tout refuser » et « Tout
   accepter » côte à côte, au même dessin neutre (le bouton d'un tiers), à 8 px. À partir de 768 px, une seule ligne.
   La page garde sous elle la hauteur de la bande, que le script pose dans --av-cookies-hauteur : en marge, pour que la
   fin de la page reste lisible, et en scroll-padding, pour qu'un élément qui prend le focus n'y passe jamais dessous
   (WCAG 2.4.11) ; la bulle de l'aide du vendeur monte au-dessus d'elle tant qu'elle est là. Le lien « Cookies » des
   mentions rouvre la fenêtre (retrait permanent). Les finalités : un interrupteur chacune (av-interrupteur et son
   détail), les nécessaires activés et verrouillés. */
html:has(.av-cookies) {
  scroll-padding-bottom: var(--av-cookies-hauteur, 0px);
}

body:has(> .av-cookies) {
  padding-bottom: var(--av-cookies-hauteur, 0px);
}

.av-cookies {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--av-z-entete);
  padding-block: var(--av-e2) calc(var(--av-e2) + env(safe-area-inset-bottom));
  background: var(--av-blanc);
  box-shadow: var(--av-ombre-flottant-haut);
}

.av-cookies__barre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--av-e1) var(--av-e2);
}

/* La phrase et « Choisir » sur la première ligne, à 16 px ; les deux boutons se partagent la suivante, 12 px de bord
   à texte pour tenir à 320 px */
.av-cookies__tete {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--av-e4);
}

.av-cookies__texte {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-cookies__barre > .av-bouton {
  padding-inline: var(--av-e3);
}

@media (min-width: 768px) {
  .av-cookies {
    padding-block: var(--av-e4) calc(var(--av-e4) + env(safe-area-inset-bottom));
  }

  .av-cookies__barre {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--av-e2);
  }

  .av-cookies__tete {
    grid-column: auto;
    margin-right: var(--av-e4);
  }
}
/* ===================== Pages de vente ===================== */

/* Les blocs des pages de vente (#545, lot vente) : l'accueil, la page Rapport et la page Pro telles qu'en production,
   et ceux que la refonte d'Adema leur ajoute (#386). Le design system en change le rendu, jamais ce qui s'affiche, où
   ni dans quel ordre (Thomas, 28/10/2026). Sections, introductions, texte et illustration, logos et accordéon sont
   ceux du socle. */

/* Héros : le titre de la page, sa phrase, le prix et le formulaire du tunnel (le bouton seul sur la page Pro), et
   l'illustration. Sous 960 px, comme aujourd'hui : l'illustration d'abord, dans une boîte 2:1 sur la colonne d'une
   tâche, centrée (les rapports recadrés sur leur haut, l'illustration de la page Pro entière, réduite), puis le texte
   centré ; à partir de 960 px, deux moitiés, le texte calé à gauche, l'illustration à droite, celle des rapports qui
   touche le bas du héros. Sur l'aplat, le champ prend le blanc. */
.av-heros {
  --av-champ-fond: var(--av-blanc);
  --av-avis-fond: var(--av-blanc);
  background: var(--av-aplat);
}

.av-heros__grille {
  display: grid;
  gap: var(--av-e6);
  padding-top: var(--av-e6);
}

.av-heros__visuel {
  justify-self: center;
  width: 100%;
  max-width: var(--av-largeur-tache);
  margin: 0;
}

/* Sous 960 px, la boîte 2:1 garde le bouton dans le premier écran : une illustration large s'y recadre sur son haut ;
   une illustration carrée (--entier : les trois héros des pages de vente, série du 09/11/2026, § 9) y tient entière,
   réduite */
.av-heros__visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top;
}

.av-heros__visuel--entier img {
  object-fit: contain;
}

.av-heros__texte {
  display: grid;
  justify-items: center;
  gap: var(--av-e5);
  padding-bottom: var(--av-e8);
  text-align: center;
}

/* Le titre et sa phrase à 4 px (§ 5) ; deux paragraphes de phrase à 12 px l'un de l'autre (la page Pro) */
/* Le titre du héros et son chapeau à 12 px (Thomas, 09/11/2026 : sous un titre de 48 px, les 4 px des titres de page
   collaient) */
.av-heros__entete {
  display: grid;
  gap: var(--av-e3);
}

.av-heros__titre {
  font: var(--av-texte-titre-1);
  letter-spacing: var(--av-chasse-titre-1);
  text-wrap: balance;
}

.av-heros__chapeau {
  color: var(--av-gris-fonce);
  font: var(--av-texte-chapeau);
  letter-spacing: var(--av-chasse-chapeau);
  text-wrap: pretty;
}

.av-heros__chapeau > p + p {
  margin-top: var(--av-e3);
}

/* Le formulaire du tunnel : le champ d'immatriculation, puis le bouton, pleine largeur au téléphone ; côte à côte à
   partir de 640 px (§ 5), le bouton à sa largeur et à la hauteur du champ ; quand la place manque (un libellé long dans
   une demi-colonne), le bouton passe sous le champ plutôt que de l'écraser sous le tiers de la colonne d'une tâche. Le
   libellé reste calé sur son champ. */
.av-heros__formulaire {
  display: grid;
  gap: var(--av-e4);
  width: 100%;
  max-width: var(--av-largeur-tache);
  text-align: left;
}

@media (min-width: 640px) {
  .av-heros__formulaire {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .av-heros__formulaire > .av-champ {
    flex: 1 1 calc(var(--av-largeur-tache) / 3);
  }

  .av-heros__formulaire > .av-bouton {
    flex: 0 0 auto;
    min-height: var(--av-hauteur-champ-grand);
  }
}

@media (min-width: 960px) {
  .av-heros__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--av-e8);
    padding-top: var(--av-e9);
  }

  .av-heros__texte {
    order: -1;
    align-self: center;
    justify-items: start;
    padding-bottom: var(--av-e9);
    text-align: left;
  }

  .av-heros__visuel {
    justify-self: stretch;
    max-width: none;
  }

  .av-heros__visuel img {
    aspect-ratio: auto;
  }

  .av-heros__visuel--entier {
    align-self: center;
    padding-bottom: var(--av-e9);
  }

  /* Le héros qui montre le produit (--produit : la capture du rapport, l'accueil et la page Rapport ; Thomas, 10/11/2026) : le texte sur
     3/5, pour que le titre et le formulaire respirent, la capture sur 2/5, centrée en hauteur en face du texte au lieu
     d'être posée sur le bas du héros (elle laissait un vide au-dessus d'elle), le héros aussi haut que son texte */
  .av-heros--produit .av-heros__grille {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    padding-bottom: var(--av-e9);
  }

  .av-heros--produit .av-heros__texte {
    padding-bottom: 0;
  }

  /* La capture s'efface sur son dernier tiers dans le fond du héros (Thomas, 10/11/2026) : la page de devant reste
     entière, le bas du document se perd au lieu d'être coupé net. Un masque, qui n'agit que sur la transparence : le
     jeton ne donne que l'opacité pleine, quel que soit le fond */
  .av-heros--produit .av-heros__visuel img {
    -webkit-mask-image: linear-gradient(to bottom, var(--av-encre) 60%, transparent);
    mask-image: linear-gradient(to bottom, var(--av-encre) 60%, transparent);
  }
}

/* Le prix : en titre 3, au vert d'achat, sans pastille (Q-2 C, Thomas, 28/10/2026 ; le vert débite, « Payer » et le
   prix, § 2), ses chiffres tabulaires ; avec un code, l'ancien prix barré devant, en gris ; le lecteur d'écran lit la phrase masquée
   (« 25 € TTC au lieu de 30 € ») */
.av-prix {
  color: var(--av-vert-achat);
  font: var(--av-texte-titre-3);
  letter-spacing: var(--av-chasse-titre-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.av-prix__avant {
  margin-right: var(--av-e2);
  color: var(--av-gris-texte);
  font: var(--av-texte-courant);
  letter-spacing: var(--av-chasse-courant);
}

/* Sur l'aplat du héros, le gris foncé, comme le chapeau */
.av-heros .av-prix__avant {
  color: var(--av-gris-fonce);
}

/* Les listes des pages de vente, sans puces */
:is(.av-statistiques, .av-contenus, .av-valeurs, .av-coches) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les chiffres de l'accueil (Q-7 A, Thomas, 28/10/2026) : leur section à eux, une bande blanche sous le héros et son
   introduction centrée ; deux par ligne, les quatre sur une rangée à partir de 960 px ; le chiffre en titre, ses
   chiffres tabulaires (rien ne bouge autour de lui pendant qu'il défile, § 7), son libellé dessous */
.av-statistiques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--av-e6) var(--av-e4);
  text-align: center;
}

@media (min-width: 960px) {
  .av-statistiques {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.av-statistiques > li {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--av-e1);
}


.av-statistiques__valeur {
  font: var(--av-texte-titre-1);
  letter-spacing: var(--av-chasse-titre-1);
  font-variant-numeric: tabular-nums;
}

.av-statistiques__libelle {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}


/* Liste à pictogramme : ce que contient le rapport, ce qu'offre l'Espace Pro, les deux rapports pro ; le pictogramme
   de 32 px au bord, le texte à 16 px de lui (§ 5) ; une colonne, deux à partir de 640 px. « Nouveau » au-dessus du
   titre, comme aujourd'hui. */
.av-contenus {
  display: grid;
  gap: var(--av-e6);
}

@media (min-width: 640px) {
  .av-contenus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .av-contenus--une-colonne {
    grid-template-columns: minmax(0, 1fr);
  }
}

.av-contenu {
  display: grid;
  grid-template-columns: var(--av-icone-grande) minmax(0, 1fr);
  align-content: start;
  column-gap: var(--av-e4);
}

.av-contenu__picto {
  grid-row: 1 / span 3;
  width: var(--av-icone-grande);
  height: auto;
}

.av-contenu > :not(.av-contenu__picto) {
  grid-column: 2;
}

.av-contenu > .av-etiquette {
  justify-self: start;
  margin-bottom: var(--av-e2);
}

/* L'étiquette d'un rapport pro, au-dessus de la ligne entière (« Pour les revendeurs VO ») ; le document dessous */
.av-contenu > .av-etiquette:first-child {
  grid-column: 1 / -1;
}

.av-contenu > .av-etiquette:first-child + .av-contenu__picto {
  grid-row: 2 / span 2;
}

.av-contenu__titre {
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
  text-wrap: balance;
}

.av-contenu__texte {
  margin-top: var(--av-e1);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  text-wrap: pretty;
}

/* Les valeurs : le pictogramme au-dessus de son titre, trois colonnes à partir de 960 px, comme aujourd'hui */
.av-valeurs {
  display: grid;
  gap: var(--av-e6);
}

@media (min-width: 960px) {
  .av-valeurs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.av-valeurs__valeur {
  display: grid;
  align-content: start;
  gap: var(--av-e1);
}

.av-valeurs__picto {
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  margin-bottom: var(--av-e3);
}

.av-valeurs__titre {
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
  text-wrap: balance;
}

.av-valeurs__texte {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  text-wrap: pretty;
}

.av-section--aplat :is(.av-contenu__texte, .av-valeurs__texte) {
  color: var(--av-gris-fonce);
}

/* Coches : la réassurance sous l'action d'un héros (#386), des phrases courtes, la coche gris foncé comme le texte
   (Q-5 A, Thomas, 28/10/2026) ; la seule liste à coches : une liste de section garde les pictogrammes d'aujourd'hui
   (Q-5 : « trop de check partout et aucune personnalité ») ; l'autre coche du site est le « oui » d'un comparatif
   (§ 14). La coche suit la première ligne du texte. */
.av-coches {
  display: grid;
  gap: var(--av-e2);
  color: var(--av-gris-fonce);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  text-align: left;
}

.av-coches > li {
  display: flex;
  align-items: flex-start;
  gap: var(--av-e2);
}

/* La coche fine, sans disque, en gris, sur toutes les listes à coches (Thomas, 09/11/2026) : elle accompagne le texte sans
   le dominer ; écartés, la pastille pleine, qui pesait plus que le texte, le violet (il agit) et le vert (il débite) */
.av-coches svg {
  flex: none;
  width: var(--av-icone-petite);
  height: var(--av-icone-petite);
  margin-top: calc((1lh - var(--av-icone-petite)) / 2);
  fill: var(--av-gris-texte);
}

/* Dans un héros centré, la réassurance se cale sur le formulaire */
.av-heros .av-coches {
  width: 100%;
  max-width: var(--av-largeur-reassurance);
}

/* Comparatif (la refonte, #386 : HistoVec ou le rapport ; Q-8 A, la version conforme, Thomas, 28/10/2026) : sur la
   colonne centrée, la colonne d'Autoviza® détachée par l'aplat (le blanc dans une section sur l'aplat), aux angles du
   bloc ; en tête de colonne, son nom à l'encre et son prix dessous en gris ; chaque valeur précédée de son symbole, à
   l'encre pour « oui », en gris pour « partiel » et « non », toujours avec son mot (exception écrite au § 14 : la coche
   d'un comparatif). Au téléphone, chaque besoin en titre, puis ses deux valeurs côte à côte sous le nom et le prix de
   leur colonne (data-libelle, « HistoVec (gratuit) »), celle d'Autoviza® dans son aplat. Le gris d'un texte suit sa
   surface : gris secondaire sur le blanc, gris foncé sur l'aplat. Les rôles de tableau sont écrits dans le balisage,
   comme ceux d'av-tableau : au téléphone, le tableau passe en grille. */
.av-comparatif {
  --av-comparatif-fond: var(--av-aplat);
  --av-comparatif-gris: var(--av-gris-texte);
  --av-comparatif-gris-nous: var(--av-gris-fonce);
  width: 100%;
  max-width: var(--av-largeur-centree);
  margin-inline: auto;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-section--aplat .av-comparatif {
  --av-comparatif-fond: var(--av-blanc);
  --av-comparatif-gris: var(--av-gris-fonce);
  --av-comparatif-gris-nous: var(--av-gris-texte);
}

.av-comparatif :is(th, td) {
  padding: var(--av-e4);
  text-align: left;
  vertical-align: middle;
}

.av-comparatif th {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
}

.av-comparatif__prix {
  display: block;
  color: var(--av-comparatif-gris);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-comparatif .av-comparatif__nous {
  background: var(--av-comparatif-fond);
}

.av-comparatif__nous .av-comparatif__prix {
  color: var(--av-comparatif-gris-nous);
}

.av-comparatif__valeur {
  display: flex;
  align-items: flex-start;
  gap: var(--av-e2);
}

.av-comparatif__valeur svg {
  flex: none;
  width: var(--av-icone);
  height: var(--av-icone);
  fill: var(--av-gris-texte);
}

/* Un « Oui » en vert de succès (Thomas, 09/11/2026 : à l'encre, le tableau était froid) ; un fait du produit, pas du
   véhicule : la neutralité du rapport ne s'y applique pas */
.av-comparatif__valeur--oui svg,
.av-comparatif__valeur--reserve svg {
  fill: var(--av-succes);
}

/* Le renvoi d'un astérisque, sous ce qu'il précise : en petit, gris, centré comme la section (la réserve HistoVec du
   comparatif et des contenus, 09/11/2026) */
.av-renvoi {
  margin-top: var(--av-e4);
  color: var(--av-gris-texte);
  font: var(--av-texte-aide);
  letter-spacing: var(--av-chasse-aide);
  text-align: center;
}

/* Deux renvois l'un sous l'autre (« * » puis « ** », 10/11/2026) : serrés, comme les lignes d'une même note */
.av-renvoi + .av-renvoi {
  margin-top: var(--av-e1);
}

@media (min-width: 768px) {
  .av-comparatif thead .av-comparatif__nous {
    border-radius: var(--av-rayon-bloc) var(--av-rayon-bloc) 0 0;
  }

  .av-comparatif tbody tr:last-child .av-comparatif__nous {
    border-radius: 0 0 var(--av-rayon-bloc) var(--av-rayon-bloc);
  }

  .av-comparatif tbody tr + tr > * {
    border-top: var(--av-trait-filet) solid var(--av-gris-trait);
  }
}

@media (max-width: 767px) {
  .av-comparatif,
  .av-comparatif tbody {
    display: block;
  }

  .av-comparatif tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--av-e2);
    padding-block: var(--av-e4);
  }

  .av-comparatif tbody tr + tr {
    border-top: var(--av-trait-filet) solid var(--av-gris-trait);
  }

  .av-comparatif tbody .av-comparatif__nous {
    border-radius: var(--av-rayon-bloc);
  }

  .av-comparatif tbody th {
    grid-column: 1 / -1;
    padding: 0;
  }

  .av-comparatif td {
    display: grid;
    align-content: start;
    gap: var(--av-e1);
    padding: var(--av-e3) 0;
  }

  .av-comparatif td.av-comparatif__nous {
    padding-inline: var(--av-e3);
  }

  .av-comparatif td::before {
    content: attr(data-libelle);
    color: var(--av-comparatif-gris);
    font: var(--av-texte-legende);
    letter-spacing: var(--av-chasse-legende);
  }

  .av-comparatif td.av-comparatif__nous::before {
    color: var(--av-comparatif-gris-nous);
  }
}

/* Questions fréquentes d'une page de vente : les accordéons sur la colonne centrée, puis la suite, « Vous avez
   d'autres questions ? » (un titre h3, comme en production) et le lien d'action vers le centre d'aide, centrés à
   48 px */
.av-questions {
  max-width: var(--av-largeur-centree);
  margin-inline: auto;
}

.av-questions__suite {
  display: grid;
  justify-items: center;
  margin-top: var(--av-e7);
  text-align: center;
}

.av-questions__suite > :first-child {
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
}

/* Tarifs de la page Pro : la liste des packs sur la colonne centrée, une ligne par pack (le document en début, le
   nombre de crédits, le prix du rapport dessous, le prix du pack au bout), puis l'action et sa phrase, centrées */
.av-tarifs {
  display: grid;
  gap: var(--av-e7);
  max-width: var(--av-largeur-centree);
  margin-inline: auto;
}

.av-tarifs :is(.av-liste__nom, .av-liste__detail) {
  text-wrap: balance;
}

.av-tarifs__suite {
  display: grid;
  justify-items: center;
  gap: var(--av-e4);
  text-align: center;
}

.av-tarifs__suite > p {
  max-width: var(--av-largeur-lecture);
  color: var(--av-gris-fonce);
  text-wrap: pretty;
}

/* Conclusion (#386) : la section qui conclut la vente, à la place que lui donne la refonte (avant l'offre pro sur
   l'accueil, avant les questions fréquentes sur la page Rapport), centrée ; le titre, le bouton du héros, qui mène au
   tunnel, et, dessous, le prix de base et le délai */
.av-conclusion {
  display: grid;
  justify-items: center;
  gap: var(--av-e5);
  text-align: center;
}

/* Le formulaire du héros et la note du prix, sur la colonne d'une tâche, centrée (Thomas, 09/11/2026 : la plaque à la
   place du bouton seul) ; le formulaire sur toute la pile, la note centrée dessous */
.av-conclusion > .av-pile {
  justify-items: center;
  width: 100%;
  max-width: var(--av-largeur-tache);
}

.av-conclusion__titre {
  font: var(--av-texte-titre-2);
  letter-spacing: var(--av-chasse-titre-2);
  text-wrap: balance;
}

.av-conclusion__note {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-section--aplat .av-conclusion__note {
  color: var(--av-gris-fonce);
}

/* ===================== Rapport ===================== */

/* #545, lot 1 (composants du produit : le rapport). Planche courte du 27/10/2026. */

/* --- Rapport : structure et données (en-tête, carte véhicule, chapitres, frise, sources, tableaux, pied) --- */

/* La page du rapport (G-1, § 11 Rapport) : le fond gris, sous la feuille blanche et sous le pied */
.av-page--rapport {
  background: var(--av-aplat);
}

/* Le conteneur du rapport (av-rapport : la feuille, le pied, les fenêtres du rapport ; Q-2 B, Thomas, 28/10/2026). Le
   CSS personnalisé d'un partenaire (Partner.report_theme_css) reste une feuille libre, posée pour ce seul partenaire
   et limitée à ce conteneur : chaque sélecteur commence par .av-rapport. Ses points d'appui, stables :
   - les jetons --av-…, redéfinis sur .av-rapport : --av-violet, --av-violet-survol, --av-violet-pale (la couleur qui
     agit : liens, (i), onglet actif, dépliants, focus) ;
   - les variables locales des composants, sans valeur par défaut déclarée (le repli est dans la règle), pour qu'un
     ancêtre les pose : --av-chapitre-fond (le fond du bandeau, une couleur ou un dégradé), --av-chapitre-texte (son
     titre), --av-chapitre-icone (son icône) ;
   - les classes av- (av-evenement__titre, av-annonce, av-rapport-pied…), jamais la structure de la page (enfants,
     balises, :nth-child), qui change sans prévenir.
   La couleur du partenaire sur la carte du véhicule reste --av-partenaire-carte, posée par le serveur (Q-1 A). Sans
   règle propre : le conteneur ne change rien à la mise en page */

/* La feuille (G-1) : blanche, pleine largeur jusqu'à 1 024 px, sa marge celle de la page (16 puis 32 px) ; à partir de
   1 025 px, détachée du fond gris, 1 024 px au plus, au bord fin de l'aplat foncé et aux angles de 5 px, sa marge de
   48 px. Le bandeau d'un chapitre et un aplat débordent de cette marge (--av-feuille-marge, § 5). 48 px sous le
   dernier chapitre, l'écart entre deux chapitres */
.av-feuille {
  --av-feuille-marge: var(--av-gouttiere);
  width: 100%;
  padding: 0 var(--av-feuille-marge) var(--av-e7);
  background: var(--av-blanc);
}

@media (min-width: 640px) {
  .av-feuille {
    --av-feuille-marge: var(--av-gouttiere-large);
  }
}

@media (min-width: 1025px) {
  .av-feuille {
    --av-feuille-marge: var(--av-e7);
    max-width: var(--av-largeur-feuille);
    margin: var(--av-e6) auto;
    border: var(--av-trait-filet) solid var(--av-aplat-fonce);
    border-radius: var(--av-rayon);
  }
}

/* Un aplat dans la feuille (la carte du véhicule, une note de la synthèse, un encadré) déborde de sa marge à toutes
   les largeurs, sans arrondi, son texte dans la colonne (§ 5 ; décision du 19/10/2026), jamais dans une carte ni une
   fenêtre */
.av-feuille :is(.av-aplat, .av-encadre):not(:is(.av-carte, .av-fenetre) *) {
  margin-inline: calc(-1 * var(--av-feuille-marge));
  padding-inline: var(--av-feuille-marge);
  border-radius: 0;
}

/* Le résumé d'un encadré qui se replie reprend la marge de la feuille, pas les 16 px de l'encadré : tout le haut de
   l'encadré reste sa cible, son contour de focus au bord de la bande grise (32 puis 48 px de marge à partir de
   640 px) */
.av-feuille .av-encadre--depliant:not(:is(.av-carte, .av-fenetre) *) > summary {
  margin-inline: calc(-1 * var(--av-feuille-marge));
  padding-inline: var(--av-feuille-marge);
}

/* L'en-tête du rapport (R-6 ; G-2, I-6 tel quel ; § 8) : la bannière de la page (header de premier niveau, G-3), les
   marques à la hauteur des logos du rapport (av-marques--rapport, le filet d'av-marques entre les deux, comme
   aujourd'hui), puis la référence en 12 px : le numéro et la date en gris, et, au bureau seulement, le nom du produit
   sur sa ligne au-dessus (av-rapport__produit, Q-3 A : « Rapport détaillé » ou « Rapport Autoviza® »), à l'encre en
   700, masqué sous 1 025 px comme aujourd'hui (omega le masque jusqu'à 1 024 px). Au téléphone et à la tablette, la
   référence sous les logos, à 8 px, calée à gauche (variante A du 19/10/2026) ; au bureau, à droite des logos et
   centrée sur eux, comme aujourd'hui (Thomas, 28/10/2026). Plus d'étiquette du canal (« ça sert à rien », Thomas,
   28/10/2026) */
.av-rapport__entete {
  display: grid;
  justify-items: start;
  gap: var(--av-e2);
  padding-block: var(--av-e4);
}

@media (min-width: 640px) {
  .av-rapport__entete {
    padding-block: var(--av-e5);
  }
}

@media (min-width: 1025px) {
  .av-rapport__entete {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    gap: var(--av-e5);
  }

  .av-rapport__entete > .av-rapport__ref {
    justify-self: end;
    text-align: right;
  }
}

.av-rapport__ref {
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
  font-variant-numeric: tabular-nums;
}

.av-rapport__produit {
  display: none;
}

/* Au bureau, le nom sur sa ligne au-dessus du numéro et de la date (Thomas, 28/10/2026) */
@media (min-width: 1025px) {
  .av-rapport__produit {
    display: block;
  }
}

.av-rapport__nom {
  color: var(--av-encre);
  font: var(--av-texte-etiquette);
  letter-spacing: var(--av-chasse-etiquette);
}

/* La mention juridique (R-17, G-7) : mot pour mot, à sa place, sous l'en-tête, en 12 px gris ; 24 px jusqu'à la carte
   du véhicule */
.av-rapport__mention {
  margin-bottom: var(--av-e5);
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
}

/* La carte du véhicule (R-7, R-8, G-4 ; I-3 A, § 9) : sur l'aplat, sans contour ; la photo de l'annonce (av-photo),
   puis le nom du véhicule, le titre de la page (h1, une seule fois), en 16/24 700, et sa ligne : le kilométrage et le
   prix d'une annonce, à la couleur du partenaire (--av-partenaire-carte, Q-1 A : posée par le serveur en ligne,
   assombrie vers l'encre jusqu'à 4,5:1 sur l'aplat ; sans couleur, le gris secondaire, 4,5:1), ou la mise en
   circulation ; à droite, le logo de la marque à 32 px, alt vide. Avec une annonce, le logo du partenaire au-dessus du
   nom, comme aujourd'hui (av-annonce__partenaire, Q-11 A). Sans photo, rien n'est réservé, le texte remonte */
.av-annonce {
  display: flex;
  align-items: center;
  gap: var(--av-e3);
}

.av-annonce__texte {
  flex: 1;
  min-width: 0;
}

/* Le logo du partenaire dans la carte (card-car-resume.html : avec une annonce seulement) : 16 px de haut, sa largeur
   à son ratio, à 4 px au-dessus du nom */
.av-annonce__partenaire {
  display: block;
  width: auto;
  height: var(--av-icone-petite);
  margin-bottom: var(--av-e1);
}

.av-annonce__nom {
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.av-annonce__infos {
  margin-top: var(--av-e1);
  color: var(--av-partenaire-carte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
  font-variant-numeric: tabular-nums;
}

.av-annonce__marque {
  flex: none;
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  object-fit: contain;
}

@media (min-width: 640px) {
  .av-annonce {
    gap: var(--av-e4);
  }
}

/* Le chapitre (R-9, G-1 ; § 11 Rapport) : son bandeau sur toute la largeur de la feuille (il déborde de sa marge),
   l'aplat foncé, 52 px au moins, sans rayon ; l'icône d'aujourd'hui (section-title.html), 20 px, grise, au bord de la
   colonne, le titre à 12 px d'elle, à 48 px du bord comme le texte de la frise (§ 5), en 18/24 puis 20/28 à partir de
   640 px ; un titre long passe à la ligne et le bandeau grandit ; rien d'autre dans le bandeau, une option ajoutée
   comprise (Q-5 A, 28/10). Puis le contenu, à 24 px : l'encadré en tête, les groupes à 32 px (av-pile--groupes) ; 48 px d'un
   chapitre au suivant (av-pile--chapitres). Plus de bouton dans le bandeau (l'action HistoVec finit son chapitre,
   A-13 A). Le thème d'un partenaire (av-rapport, Q-2 B) pose sur un ancêtre --av-chapitre-fond (une couleur ou un
   dégradé), --av-chapitre-texte et --av-chapitre-icone ; sans elles, l'aplat foncé, l'encre et le gris secondaire */
.av-chapitre__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--av-e2) var(--av-e3);
  min-height: var(--av-hauteur-bandeau);
  margin-inline: calc(-1 * var(--av-feuille-marge));
  padding: var(--av-e3) var(--av-feuille-marge);
  background: var(--av-chapitre-fond, var(--av-aplat-fonce));
  color: var(--av-chapitre-texte, var(--av-encre));
  font: var(--av-texte-titre-4);
  letter-spacing: var(--av-chasse-titre-4);
  text-wrap: balance;
}

.av-chapitre__titre > svg {
  flex: none;
  width: var(--av-icone);
  height: var(--av-icone);
  fill: var(--av-chapitre-icone, var(--av-gris-texte));
}

/* Les fichiers des icônes de bandeau (img/report/search, checklist, timeline, table, synthese) portent leur olive en
   style en ligne sur le tracé : seul un !important le remplace, comme le fill !important d'omega (common.scss), pour
   que {% svg %} rende le gris ou l'icône du thème d'un partenaire */
.av-chapitre__titre > svg path {
  fill: inherit !important;
}

.av-chapitre__texte {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 640px) {
  .av-chapitre__titre {
    font: var(--av-texte-titre-3);
    letter-spacing: var(--av-chasse-titre-3);
  }
}

.av-chapitre__corps {
  padding-top: var(--av-e5);
}

/* Une ancre de la page (un chapitre, un événement) pose sa cible à 16 px du haut de l'écran */
.av-chapitre,
.av-evenement {
  scroll-margin-top: var(--av-e4);
}

/* La synthèse (R-10, G-22, Q-11 ; § 11 Rapport) : les faits d'aujourd'hui dans leur ordre, un fait par ligne
   (av-liste), son pictogramme de 32 px au début (av-liste__debut, la vignette Crit'Air comprise), le texte à 64 px du
   bord ; à plat, 24 px entre deux faits, sans filet (prototype du 19/10/2026) ; le constat en 16/24 700, son détail en
   14 px gris. Les opérations atypiques sous leur constat, à l'encre (plus de bleu), sans puces (20/10/2026), à 8 px.
   Puis, à 24 px de la liste, les notes de Core (av-synthese__note) */
.av-synthese > .av-liste__ligne {
  padding: 0;
}

.av-synthese > .av-liste__ligne + .av-liste__ligne {
  margin-top: var(--av-e5);
  border-top: 0;
}

.av-synthese .av-liste__nom {
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
}

.av-synthese__liste {
  display: grid;
  grid-column: 2;
  gap: var(--av-e2);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Une note de Core (data.notes, son HTML tel quel), après les faits, comme l'alerte d'information d'aujourd'hui : sur
   le bleu d'information, l'encart d'un fait qu'on doit voir sans qu'il juge le véhicule (§ 3), qui déborde de la
   feuille comme tout aplat ; 16 px de marge, son texte en 14 px gris foncé (le gris secondaire n'y tient pas, § 3) */
.av-synthese__note {
  padding-block: var(--av-e4);
  background: var(--av-info-pale);
  color: var(--av-gris-fonce);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Le rappel du constructeur (OTS, components/ots.html et js/ots.js, en tête de la synthèse pour les marques activées) :
   un encadré (av-encadre), dans les quatre états d'aujourd'hui. L'arrêt de conduite (--arret, ci-dessous) ; concerné
   non réparé, non concerné et réparé au rendu neutre de l'encadré, son icône d'information (§ 2 : l'orange et l'icône
   d'alerte du « concerné non réparé » tombent, seul l'arrêt de conduite a son exception). L'étiquette (« STOP DRIVE »,
   l'arrêt seul) en tête, puis le titre en 16/24 700 et la date du constat (l'arrêt et le concerné non réparé), à 4 px
   (av-pile--titre) ; la consigne et le contact à 8 px ; la source en 12 px, à 16 px. À plat : le contour d'aujourd'hui
   devient le fond (§ 6) */
.av-rappel__titre {
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
}

.av-rappel__source {
  margin-top: var(--av-e2);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
}

/* L'arrêt de conduite (concerned-not-repaired-stop-drive), rendu comme aujourd'hui (ots-status-1) : exception écrite au
   § 2, une consigne de sécurité du constructeur, pas un jugement du rapport (Q-12 A, décision de Thomas du 28/10/2026).
   Le rouge d'erreur : le fond pâle, l'icône d'alerte (img/icons/ots_warning.svg), le titre et la date en rouge
   (6,04:1 sur le fond pâle), l'étiquette en rouge plein, texte blanc (6,57:1) */
.av-rappel--arret {
  background: var(--av-erreur-pale);
}

.av-rappel--arret > svg {
  fill: var(--av-erreur);
}

.av-rappel--arret :is(.av-rappel__titre, .av-rappel__date) {
  color: var(--av-erreur);
}

.av-rappel--arret .av-etiquette {
  background: var(--av-erreur);
  color: var(--av-blanc);
}

/* Les usages professionnels (sections/uses.html) : une liste à filet (av-liste), un usage par ligne dans l'ordre
   d'aujourd'hui, son pictogramme de 32 px au début, son état au bout ; puis, à 24 px, l'explication de chaque usage
   détecté (sa question, à 4 px ses paragraphes, à 8 px l'un de l'autre). Le filet sépare les lignes ; ni filet ni
   marge au bord de la liste : 24 px de l'encadré à la première ligne (§ 5) */
.av-usages > .av-liste__ligne:first-child {
  padding-top: 0;
}

.av-usages > .av-liste__ligne:last-child {
  padding-bottom: 0;
}

/* L'état, sur la première ligne du nom, calé en haut : l'étiquette de 24 px a la hauteur de cette ligne ; centrée,
   elle descendait entre les deux lignes d'un nom qui passe à la ligne (« Location courte-durée » à 320 px). En flex,
   l'étiquette n'ouvre pas de ligne de texte (elle grandissait la ligne d'un pixel) */
.av-usages .av-liste__fin {
  display: flex;
  grid-row: 1;
  align-self: start;
}

/* La frise (R-11 ; § 11 Rapport) : du plus récent au plus ancien, une ligne grise de 8 px qui relie le centre de
   chaque pastille à celui de la suivante et s'arrête à la dernière ; les pastilles de 20 px au bord de la colonne,
   grises, ni violettes ni vertes (« le violet agit, le vert débite ») ; le texte à 12 px d'elles, à 48 px du bord ;
   32 px entre deux événements. La pastille se centre sur la première ligne de l'événement, 24 px (la date et la
   pilule du kilométrage, ou le titre d'une période) */
.av-frise {
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-evenement {
  position: relative;
  padding-left: calc(var(--av-pastille-frise) + var(--av-e3));
}

.av-evenement + .av-evenement {
  margin-top: var(--av-frise-ecart, var(--av-e6));
}

.av-evenement:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--av-e5) / 2);
  bottom: calc(-1 * (var(--av-frise-ecart, var(--av-e6)) + var(--av-e5) / 2));
  left: calc((var(--av-pastille-frise) - var(--av-epaisseur-frise)) / 2);
  width: var(--av-epaisseur-frise);
  background: var(--av-gris-trait);
}

/* Au bureau, plus d'air, comme aujourd'hui (Thomas, 28/10/2026 : « la timeline semble manquer un peu d'espacement en
   version PC ») : 48 px entre deux événements (omega : 48) et le texte à 32 px de la pastille ; les détails d'un
   événement sur une rangée (ci-dessous, av-details) */
.av-frise {
  --av-frise-ecart: var(--av-e6);
}

@media (min-width: 1025px) {
  .av-frise {
    --av-frise-ecart: var(--av-e7);
  }

  .av-evenement {
    padding-left: calc(var(--av-pastille-frise) + var(--av-e6));
  }
}

/* Une période sans donnée et l'événement qui la suit : le segment en pointillé de 2 px, au milieu de la bande */
.av-evenement--pointille:not(:last-child)::before {
  left: calc((var(--av-pastille-frise) - var(--av-trait-pointille)) / 2);
  width: 0;
  border-left: var(--av-trait-pointille) dashed var(--av-gris-trait);
  background: none;
}

.av-evenement__point {
  position: absolute;
  top: calc((var(--av-e5) - var(--av-pastille-frise)) / 2);
  left: 0;
  display: grid;
  place-items: center;
  width: var(--av-pastille-frise);
  height: var(--av-pastille-frise);
  border-radius: var(--av-rayon-pilule);
  background: var(--av-gris-trait);
  font: var(--av-texte-etiquette);
  letter-spacing: var(--av-chasse-etiquette);
}

/* Le changement de titulaire, numéroté : le chiffre blanc sur le gris secondaire (4,8:1) */
.av-evenement__point--titulaire {
  background: var(--av-gris-texte);
  color: var(--av-blanc);
}

/* Une période sans donnée : « ? » gris dans un rond blanc cerclé du gris de la frise */
.av-evenement__point--periode {
  border: var(--av-trait-pointille) solid var(--av-gris-trait);
  background: var(--av-blanc);
  color: var(--av-gris-texte);
}

/* La date (« octobre 2023 », l'année seule avant 2015) en 14 px gris, puis le kilométrage dans sa pilule (14 px à
   l'encre, av-etiquette--valeur) ; la ligne fait 24 px */
.av-evenement__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--av-e1) var(--av-e2);
  min-height: var(--av-e5);
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Le titre (16/24 700) ; le badge de source à sa suite, dans le titre, comme aujourd'hui (Q-11 A, 28/10/2026), puis le
   (i) d'une expertise (av-info) */
.av-evenement__titre {
  margin-top: var(--av-e1);
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
  text-wrap: pretty;
}

/* Le logo d'une société dans un texte (Notre histoire, Thomas, 09/11/2026) : à ses couleurs, sous la date d'un événement de
   la frise, ou en tête d'un texte long ; tous dans la même boîte, la hauteur du logo du rapport sur 3,5 fois cette hauteur,
   contenus et calés à gauche (à la seule hauteur commune, un logo sans marge interne s'étalait sur 174 px) */
.av-logo-societe {
  display: block;
  width: calc(var(--av-hauteur-logo-rapport) * 3.5);
  max-width: 100%;
  height: var(--av-hauteur-logo-rapport);
  margin-top: var(--av-e2);
  object-fit: contain;
  object-position: left center;
}

.av-texte-long > .av-logo-societe:first-child {
  margin-top: 0;
}

/* En tête d'un texte long, la boîte commune l'emporte sur la hauteur libre des images d'un texte */
.av-texte-long img.av-logo-societe {
  height: var(--av-hauteur-logo-rapport);
  border-radius: 0;
}

/* Une période n'a pas de date : son titre ouvre l'événement */
.av-evenement__point + .av-evenement__titre {
  margin-top: 0;
}

/* Le texte d'une période, son détail en 14 px gris, à 4 px du titre. Dans une pile (le nombre d'enregistrements de
   l'historique à l'étranger, sous ses badges), l'écart de la pile seul, 8 px, comme ce bloc partout ailleurs
   (rapport-etats.html, F-5 A ; rapport-vente.html) : la marge s'y ajoutait, 12 px (contrôle des espacements, #545) */
.av-evenement__texte {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-evenement__titre + .av-evenement__texte {
  margin-top: var(--av-e1);
}

/* Ce qui suit les détails (la liste des opérations d'un entretien, l'historique à l'étranger) : à 12 px */
.av-evenement__suite {
  margin-top: var(--av-e3);
}

/* La liste des opérations d'un entretien (#582) : ouverte, son résumé se retire, comme aujourd'hui
   (details.entretien-operations[open] summary) : on la déplie une fois, sans la replier. Le résumé emporterait le
   focus : le script le passe à la liste ouverte (tabindex="-1", #546), sans contour, car ce n'est pas un contrôle et
   elle est à la place du résumé, comme le contenu atteint par le lien d'évitement (§ 13) */
.av-evenement__suite[open] > summary {
  display: none;
}

.av-evenement__suite > .av-depliant__corps[tabindex="-1"]:focus {
  outline: none;
}

/* Le lien d'action d'un événement (« Voir le rapport CARFAX® ») : sa boîte à la hauteur de son texte, sa cible de
   44 px portée hors du texte par ::after (la recette d'av-lien--cible), pour que l'événement garde le rythme de sa
   pile (8 px) et les 32 px du suivant ; occupé, le ::after reste à la roue */
.av-evenement .av-action {
  position: relative;
  min-height: 0;
}

.av-evenement .av-action:not([aria-busy="true"])::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--av-cible);
  transform: translateY(-50%);
}

/* Les détails d'un événement (R-11) : une liste de définitions, chaque donnée le libellé gris au-dessus de sa valeur,
   le trait de 2 px de la frise à leur gauche, comme aujourd'hui (19/10/2026 : « les traits des détails restent ») ;
   la valeur en 600, à l'encre ; 8 px entre deux données, 12 px sous le titre */
.av-details {
  display: grid;
  gap: var(--av-e2);
  margin: var(--av-e3) 0 0;
}

.av-details > div {
  padding-left: var(--av-e3);
  border-left: var(--av-trait-pointille) solid var(--av-gris-trait);
}

.av-details dt {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-details dd {
  margin: 0;
  font: var(--av-texte-court);
  font-weight: 600;
  letter-spacing: var(--av-chasse-court);
  overflow-wrap: anywhere;
}

/* Au bureau, les détails d'un événement de la frise sur une rangée, à 24 px l'un de l'autre, comme aujourd'hui
   (ul.timeline-detail en flex au-delà de 1 024 px, en colonne en dessous) ; une rangée trop longue passe à la ligne */
@media (min-width: 1025px) {
  .av-evenement .av-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--av-e2) var(--av-e5);
  }
}

/* Une valeur absente (R-13) : « – » d'une cellule, « Indisponible » d'une fiche, en gris secondaire */
.av-absent {
  color: var(--av-gris-texte);
}

/* La fiche technique (G-23 A : la fiche de T-4 ; R-14) : une ligne par donnée, un filet entre deux lignes, 12 px de
   part et d'autre (une longue liste qu'on lit, § 11) ; le libellé gris en 14 px dans une colonne de même largeur sur
   toutes les lignes, celle du plus long libellé, 40 % au plus (une grille partagée, subgrid), la valeur calée à gauche
   à sa suite, en 16/24 700 (§ 4 : « valeur d'une fiche technique », comme aujourd'hui), qui passe à la ligne sous
   elle-même. La rubrique de la carte grise (B, D1…, av-code) en tête du
   libellé, dans une colonne de 32 px. À partir de 1 025 px, deux colonnes remplies de haut en bas : --av-lignes, le
   nombre de lignes de la première, posé par le serveur ; la première ligne de la seconde (__haut) perd son filet, et
   chaque ligne règle ses colonnes seule, trois cinquièmes au libellé (prototype du 20/10/2026). Dans une fenêtre (le
   coût et la durée d'une échéance), la fiche garde sa colonne à toutes les largeurs : les deux colonnes sont faites
   pour la feuille, pas pour 560 px (#545) */
.av-technique {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  column-gap: var(--av-e4);
  margin: 0;
}

.av-technique > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: var(--av-e3);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-technique > div:first-child {
  padding-top: 0;
}

.av-technique > div:last-child {
  padding-bottom: 0;
}

.av-technique > div + div {
  border-top: var(--av-trait-filet) solid var(--av-gris-trait);
}

/* La césure, pour le seul mot long qu'une colonne étroite ne loge pas (« environnementale », § 4) : dix lettres au
   moins, quatre de part et d'autre de la coupure (« valant » et « déclarée » ne se coupent plus à 320 px) */
.av-technique dt {
  color: var(--av-gris-texte);
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}

.av-technique dd {
  margin: 0;
  font: var(--av-texte-courant-fort);
  letter-spacing: var(--av-chasse-courant-fort);
  overflow-wrap: anywhere;
}

/* La carte grise : la rubrique dans sa propre colonne de 32 px, avant la colonne des libellés, qui garde ses 40 % (dans
   les 40 %, « Classe environnementale » passait sur trois lignes à 375 px), à 8 px du libellé. Dans la grille
   partagée, dont l'écart est de 16 px, le subgrid rend la moitié de la différence à la rubrique, qui fait 36 px ; au
   bureau, où chaque ligne a sa grille, 32 */
.av-technique:has(.av-technique__rubrique) {
  grid-template-columns: var(--av-e6) fit-content(40%) minmax(0, 1fr);
}

.av-technique__rubrique {
  display: grid;
  grid-column: span 2;
  grid-template-columns: var(--av-e6) minmax(0, 1fr);
  grid-template-columns: subgrid;
  column-gap: var(--av-e2);
  align-items: baseline;
}

/* Le code prend toute sa colonne, centré, 4 px de marge intérieure : « D1 » et « V9 » tiennent dans les 32 px, et tous
   les codes ont la même largeur */
.av-technique__rubrique > .av-code {
  justify-self: stretch;
  justify-content: center;
  padding-inline: var(--av-e1);
}

/* La classe environnementale (une image de 20 px de haut) tient dans la ligne de 20 px du texte, sur sa ligne de base */
.av-technique__classe {
  vertical-align: top;
}

@media (min-width: 1025px) {
  .av-technique:not(.av-fenetre *),
  .av-technique:has(.av-technique__rubrique):not(.av-fenetre *) {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--av-lignes, 1), auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--av-e7);
  }

  .av-technique:not(.av-fenetre *) > div {
    grid-column: auto;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: var(--av-e4);
  }

  .av-technique:not(.av-fenetre *) .av-technique__rubrique {
    grid-column: auto;
    grid-template-columns: var(--av-e6) minmax(0, 1fr);
  }

  .av-technique:not(.av-fenetre *) > .av-technique__haut {
    padding-top: 0;
    border-top: 0;
  }
}

/* Le pied du rapport (R-15 ; G-5, G-6 ; § 8) : hors de la feuille, sur le fond gris, centré : la note de l'astérisque (le
   light comme le rapport détaillé, comme aujourd'hui : footer.html), sur le rapport détaillé qui en a la mention de CARFAX®
   (av-rapport-pied__source, plus de rangée de logos, Thomas, 05/11/2026), puis « À propos des données
   Autoviza® » en dépliant, fermé, son texte calé à gauche, à 16 px. 48 px au-dessus, 64 au-dessous ; sous la feuille détachée, 16 px, qui s'ajoutent à ses 32.
   Son contenu a la largeur de celui de la feuille, au plus */
.av-rapport-pied {
  padding: var(--av-e7) var(--av-gouttiere) var(--av-e8);
  background: var(--av-aplat);
  text-align: center;
}

.av-rapport-pied > * {
  max-width: calc(var(--av-largeur-feuille) - 2 * (var(--av-e7) + var(--av-trait-filet)));
  margin-inline: auto;
}

@media (min-width: 640px) {
  .av-rapport-pied {
    padding-inline: var(--av-gouttiere-large);
  }
}

@media (min-width: 1025px) {
  .av-feuille + .av-rapport-pied {
    padding-top: var(--av-e4);
  }
}

.av-rapport-pied__note {
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
}

.av-rapport-pied__titre {
  color: var(--av-gris-texte);
  font: var(--av-texte-etiquette);
  letter-spacing: var(--av-chasse-etiquette);
}

.av-rapport-pied .av-depliant > summary {
  margin-inline: auto;
}

/* Sa colonne de lecture centrée sous le dépliant et sur le rapport, comme la note et la mention de CARFAX® au-dessus ; le
   texte reste calé à gauche dans cette colonne, un texte long centré ne se lit pas (Thomas, 09/11/2026) */
.av-rapport-pied .av-depliant__corps {
  margin-inline: auto;
  padding-top: var(--av-e4);
  text-align: left;
}

/* --- Rapport : la vente (flou, CTA d'upsell, aperçus vendus des options, carte à logo de l'offre SOH) --- */

/* Le flou : ce que le rapport détaillé montre en clair, flouté sur le light avec upsell seulement (§ 8). Un flou
   sémantique : la valeur floutée est un texte factice, caché du lecteur d'écran (aria-hidden) et suivi du texte masqué
   « Masqué, dans le rapport détaillé », qu'on ne peut pas sélectionner. Le seul flou du site (--av-flou, 4 px, celui du
   prototype ; 5 px sur la feuille omega). */
.av-flou {
  filter: blur(var(--av-flou));
  -webkit-user-select: none;
  user-select: none;
}

/* La vente d'aujourd'hui (report/components/upsell-cta.html ; Q-4 et Q-6 de Thomas, 28/10/2026 : le modèle actuel,
   sans prix, la forme de la vente relevant du test A/B) : sous ce qu'elle débloque, le bouton « Voir le détail », le
   cadenas à gauche, puis à 8 px sa légende, calés à gauche : « Détail disponible dans le rapport détaillé » sous
   l'activité, CARFAX® et une expertise, « Disponible en option » sous le calendrier et les équipements (Q-13 A : une
   option n'est pas dans le rapport détaillé), le texte passé par le site d'inclusion. Le bouton
   est l'av-bouton du socle, à sa largeur : violet, car ce clic ne débite pas (jamais vert, jamais à la couleur du
   partenaire), à plat (ni dégradé ni ombre de .btn-premium, § 2, § 6), 48 px (§ 11 Actions : sur le light, chaque
   vente garde son bouton). La légende en 12 px gris secondaire, la légende d'aujourd'hui (upsell-hint). Le bouton la
   porte en description (aria-describedby). */
.av-vente {
  display: grid;
  justify-items: start;
  gap: var(--av-e2);
}

.av-vente__legende {
  color: var(--av-gris-texte);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
  text-wrap: pretty;
}

/* Le cadenas du site porte sa couleur sur son tracé ({% svg 'img/icons/lock' %}, violet : invisible sur le bouton
   violet) : l'encre du bouton la remplace, comme pour le bouton à icône du socle */
.av-vente .av-bouton svg path {
  fill: currentColor;
}

/* Dans un événement de la frise, la vente suit les détails qu'elle débloque à 16 px, l'écart d'un bloc à son action
   (§ 5) ; dans une carte (l'historique à l'étranger), à 24 px de son texte, l'écart du texte d'une carte à son action
   (§ 5), la carte posant déjà 4 px entre ses lignes */
.av-evenement > .av-vente {
  margin-top: var(--av-e4);
}

.av-carte > .av-vente {
  margin-top: calc(var(--av-e5) - var(--av-e1));
}

/* L'aperçu vendu d'une option (calendrier.html, equipements.html) : l'image de ce qu'on achète, floutée, et
   l'offre posée dessus, au centre, comme aujourd'hui. L'aperçu est une illustration (MAINTENANCE_BLURRED_CARDS, la
   liste factice des équipements), pas un carrousel (§ 11, Navigation) : en inert et aria-hidden, rien n'y défile ni
   n'y prend le focus, ni position, ni flèches ; aucune légende « Exemple » (Thomas, 20/10/2026). Aperçu et offre
   occupent la même case de la grille : le bloc prend la hauteur du plus grand des deux, et l'offre ne déborde jamais
   de l'aperçu. */
.av-vente--apercu {
  grid-template-areas: "apercu";
  justify-items: stretch;
}

.av-vente--apercu > * {
  grid-area: apercu;
}

/* La rangée du calendrier, à la géométrie du carrousel des échéances : une carte et le bout de la deuxième sur
   téléphone, la rangée jusqu'au bord de l'écran (§ 5) ; deux et le bout de la troisième à partir de 640 px, où elle
   déborde de 16 px ; à partir de 1 025 px, les trois cartes factices entières, comme aujourd'hui au bureau */
.av-vente__apercu--rangee {
  --av-vente-bord: var(--av-gouttiere);
  display: flex;
  gap: var(--av-e4);
  margin: 0 calc(-1 * var(--av-vente-bord));
  padding: 0 var(--av-vente-bord);
  overflow: hidden;
  list-style: none;
}

.av-vente__apercu--rangee > * {
  flex: 0 0 calc(100% - var(--av-e8));
}

@media (min-width: 640px) {
  .av-vente__apercu--rangee {
    --av-vente-bord: var(--av-e4);
  }

  .av-vente__apercu--rangee > * {
    flex-basis: calc((100% - var(--av-e8) - var(--av-e4)) / 2);
  }
}

@media (min-width: 1025px) {
  .av-vente__apercu--rangee > * {
    flex-basis: calc((100% - 2 * var(--av-e4)) / 3);
  }
}

/* L'offre posée sur l'aperçu (--av-z-dessus) : le bouton, puis la légende, centrés, comme aujourd'hui. La légende sur
   une plaque blanche, aux angles d'un bloc : posée sur le flou, son gris tient 4,5:1 quoi qu'il y ait dessous (§ 2,
   accessible par défaut) */
.av-vente__offre {
  position: relative;
  z-index: var(--av-z-dessus);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--av-e2);
  padding: var(--av-e4) 0;
  text-align: center;
}

.av-vente__offre .av-vente__legende {
  padding: var(--av-e1) var(--av-e3);
  border-radius: var(--av-rayon-bloc);
  background: var(--av-blanc);
}

/* La mention sous l'aperçu du calendrier, à 8 px (décision du 19/10/2026, gardée par Q-14 A le 28/10 :
   MAINTENANCE_OPTION_DISCLAIMER, que le light n'affichait pas) : 14/20 gris secondaire */
.av-vente__mention {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* Le chapitre d'une option achetée n'a pas de classe propre : son bandeau est celui de tout chapitre, sans rien
   (Q-5 A, 28/10/2026, comme aujourd'hui : plus d'étiquette « Option ajoutée ») ; son encadré, l'encadré gris du socle
   (§ 5, § 11 Explications), comme l'alert--info d'aujourd'hui ; ses états, ceux du socle (av-chargement, av-avis) */

/* Le code d'un équipement (av-code en fin de ligne) : sur la ligne du nom, comme aujourd'hui (equipements.html,
   tech-grid__header, calé sur la première ligne), même quand l'équipement liste ses détails dessous (« Pack hiver »)
   ou que son nom passe à la ligne à 320 px ; la fin du socle, centrée sur le nom et le premier détail, le faisait
   tomber entre deux lignes, et ouvrait une rangée vide de 4 px sous une ligne sans détail. Seuls les équipements
   mettent un code au bout d'une ligne de liste */
.av-liste__fin:has(> .av-code) {
  grid-row: 1;
  align-self: start;
}

/* Une carte à logo (l'offre du rapport SOH, battery.html) : le logo du partenaire dans la boîte d'un logo (§ 9, I-6 :
   la hauteur des logos du rapport, quatre fois cette largeur au plus, contenu sans être coupé). À partir de 640 px, à
   gauche, calé en haut, comme aujourd'hui, le contenu de la carte à 16 px de lui, dans sa colonne. Sous 640 px, au-dessus
   du contenu, à 16 px : aujourd'hui, la colonne laissée à côté du logo y fait déborder le bouton de la carte, qui
   défile de côté (§ 13) */
.av-carte__logo {
  display: block;
  width: auto;
  max-width: calc(4 * var(--av-hauteur-logo-rapport));
  height: var(--av-hauteur-logo-rapport);
  margin-bottom: calc(var(--av-e4) - var(--av-e1));
  object-fit: contain;
}

.av-carte__corps {
  display: grid;
  align-content: start;
  gap: var(--av-e1);
  min-width: 0;
}

/* Son bouton à 24 px du texte : la règle du pied à bouton, au socle (Cartes et listes) */

@media (min-width: 640px) {
  .av-carte--logo {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--av-e4);
  }

  .av-carte__logo {
    margin-bottom: 0;
  }
}

/* --- Rapport : sections (calendrier, expertises, services vendeur, graphiques, sinistres, HistoVec, ZFE, avis) --- */

/* Le contenu des chapitres (#545, 27 et 28/10/2026), sur les briques du socle. Le principe de Thomas (28/10/2026) : le
   design system change le rendu, jamais ce qui s'affiche, où, dans quel ordre, ni le mode d'interaction ; la
   référence est la production (src/report/templates/report/sections/ et components/). Le calendrier reprend
   av-carrousel et av-carte--contour (le carrousel du #572), sa fenêtre av-fenetre, av-technique et av-liste ; HistoVec
   la fiche technique (av-technique) ; « Services vendeur » av-cartes (I-11) ; les sinistres le même carrousel, leurs
   cartes av-details ; les graphiques av-graphique. Ne s'écrit ici que ce qui manquait. */

/* Une phrase d'introduction, puis ce qu'elle introduit, à 16 px (§ 5) : sous un titre de groupe, sa phrase vient à 4 px
   (règle du #572, Données graphiques), puis la liste, la grille ou la pile qu'elle annonce à 16 px (les remplacements
   d'une échéance, les sinistres) ; collée à la phrase, elle se lisait comme sa suite. Une liste à filet (av-liste)
   porte déjà 12 px au-dessus de sa première ligne : 4 de plus, pour 16 visibles, comme les autres (les 16 de la règle
   en faisaient 28 jusqu'à « Huile moteur » ou au premier équipement) */
.av-titre-groupe + p:not([class]) + * {
  margin-top: var(--av-e4);
}

.av-titre-groupe + p:not([class]) + .av-liste {
  margin-top: var(--av-e1);
}

/* Encadré replié (G-20 ; § 11, Explications) : un seul dessin pour le texte long qui explique un chapitre ou un
   graphique du rapport. Un <details> natif, fermé au chargement ; sa première phrase et « Lire la suite » en sont le
   résumé, la suite se déplie dessous, dans la colonne du texte, à 8 px, comme deux paragraphes d'un encadré. Tout le
   haut de l'encadré est la cible : le résumé reprend la marge intérieure de l'encadré (16 px partout, e4 ou la
   gouttière ; écrite, pas héritée : le résumé hérite de l'emplacement de l'ombre du <details>, sans marge ; dans la
   feuille, où l'encadré déborde jusqu'à son bord, la marge de la feuille, règle de la structure), son contour de focus
   en dedans, sur les bords de la bande. Ouvert, « Lire la suite » se retire, comme le lien de la liste des opérations d'un entretien
   (#582) : la phrase referme. Plus de <details> sans corps, dont « Lire la suite » ne dépliait rien (car-zones.html,
   calendrier.html). */
.av-encadre--depliant {
  display: block;
}

.av-encadre--depliant > summary {
  display: grid;
  grid-template-columns: var(--av-icone) minmax(0, 1fr);
  column-gap: var(--av-e3);
  margin: calc(-1 * var(--av-e4));
  padding: var(--av-e4);
  border-radius: inherit;
  list-style: none;
  cursor: pointer;
}

.av-encadre--depliant > summary::-webkit-details-marker {
  display: none;
}

.av-encadre--depliant > summary:focus-visible {
  outline-offset: calc(-1 * var(--av-trait-focus));
}

.av-encadre--depliant > summary > svg {
  width: var(--av-icone);
  height: var(--av-icone);
  fill: var(--av-violet);
}

/* « Lire la suite » : le lien du texte (av-lien, sur le même élément : violet, souligné), en 600 comme un lien
   d'action, jamais coupé ; le résumé entier le porte, son survol le fonce */
.av-encadre__suite {
  font-weight: 600;
  white-space: nowrap;
}

.av-encadre--depliant > summary:active .av-encadre__suite {
  color: var(--av-violet-survol);
}

@media (hover: hover) {
  .av-encadre--depliant > summary:hover .av-encadre__suite {
    color: var(--av-violet-survol);
  }
}

.av-encadre--depliant[open] .av-encadre__suite {
  display: none;
}

.av-encadre--depliant > .av-encadre__texte {
  margin: var(--av-e2) 0 0 calc(var(--av-icone) + var(--av-e3));
}

/* Sinistres et expertises (car-zones.html ; Q-7 A, Thomas, 28/10/2026) : le registre d'aujourd'hui, la vue de dessus
   puis le carrousel de ses événements, à 24 px (damage-registry). Un seul événement : la carte seule (I-10), à côté
   de la vue à partir de 1 025 px, 60/40 et centrées en hauteur, comme damage-registry--single. */
@media (min-width: 1025px) {
  .av-registre-sinistres--une {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    column-gap: var(--av-e6);
  }
}

/* La vue de dessus d'aujourd'hui (img/report/damages/top-base.png), 640 px au plus, centrée, comme damage-schema ;
   chaque zone touchée, le masque de son fichier (--av-masque, posé par le gabarit depuis DAMAGE_ZONES, en URL
   absolue), peinte d'une seule teinte violette, en « produit » sur le dessin : le blanc de la carrosserie et la piste
   grise prennent le violet, le modelé reste ; ni hachures, ni couleur d'intensité (Q-7 A ; § 2 et § 3 : un sinistre
   n'a pas de rouge). La carte visible du carrousel met en avant ses zones (--actif, la série 1 pleine) ; les autres
   restent, plus pâles (la série 1 mêlée de moitié au blanc). Aucune transition : rien ne bouge (§ 7). Les 640 px sont
   ceux de damage-schema, dix fois 64 : --av-largeur-lecture, la colonne d'un texte long, n'entre pas dans le rapport
   (§ 5), et la vue ne doit pas changer avec elle. */
.av-sinistres {
  position: relative;
  width: 100%;
  max-width: calc(10 * var(--av-e8));
  margin-inline: auto;
  container-type: inline-size;
}

.av-sinistres__vehicule {
  display: block;
  width: 100%;
  height: auto;
}

.av-sinistres__zone {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--av-serie-1), var(--av-blanc));
  mix-blend-mode: multiply;
  -webkit-mask: var(--av-masque) center / contain no-repeat;
  mask: var(--av-masque) center / contain no-repeat;
}

.av-sinistres__zone--actif {
  background: var(--av-serie-1);
}

/* L'étiquette d'une zone (av-etiquette) : « Avant gauche 2x », le texte d'aujourd'hui, à la place de son arc, aux
   positions que pose le gabarit (--x, --y : des nombres de 0 à 100, ceux de damage-label, comme l'échelle de position),
   centrée, calée dans le dessin près des bords (100cqi, sa largeur) : « Arrière gauche » sortait de 8 px à 320 px.
   Sans requête de conteneur, elle glisse avec sa position. Hors de la carte visible, neutre et en 500 ; celle d'une
   zone mise en avant, violet plein et texte blanc (av-etiquette--signal, « ce qu'on regarde », § 3) en 700 : la
   graisse et l'écart de clarté la disent sans la couleur. */
.av-sinistres__etiquette {
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  font: var(--av-texte-legende);
  letter-spacing: var(--av-chasse-legende);
  white-space: nowrap;
  transform: translate(clamp(calc(var(--x) * -1cqi), -50%, calc(100cqi - 100% - var(--x) * 1cqi)), -50%);
}

.av-sinistres__etiquette.av-etiquette--signal {
  font: var(--av-texte-etiquette);
  letter-spacing: var(--av-chasse-etiquette);
}

@supports not (container-type: inline-size) {
  .av-sinistres__etiquette {
    transform: translate(calc(var(--x) * -1%), -50%);
  }
}

/* Au téléphone (sous 416 px : la vue sous 384 px, la feuille à 16 px de marge), l'étiquette d'un coin (avant ou
   arrière, gauche ou droit : __etiquette--coin, posée par le gabarit) passe d'une rangée de 24 px vers le milieu du
   dessin, vers le bas en haut (--y à 8), vers le haut en bas (--y à 92) : calée dans le dessin, elle recouvrait celle
   du côté du même bord (« Côté gauch » sous « Avant gauche 2x », 14 px à 320 px). Le sens est le signe de 50 − --y.
   Limite connue : les onze zones touchées, toutes « 2x », de 320 à 329 px, « Arrière droit 2x » touche « Intérieur
   2x » (0,6 px), sans rangée libre dans une vue de 147 px de haut, quel que soit le décalage */
@media (max-width: 415px) {
  .av-sinistres__etiquette--coin {
    margin-top: calc(clamp(-1, 50 - var(--y), 1) * var(--av-e5));
  }
}

/* Les lignes d'une carte d'événement (av-details : le libellé gris, la valeur en 600, comme damage-event-card) à 12 px
   de sa date (l'écart de 4 px de la carte et 8), comme sous le titre d'un événement de la frise ; sans le filet gauche, qui n'appartient qu'à la frise
   (Thomas, 28/10/2026) */
.av-registre-sinistres .av-carte > .av-details {
  margin-top: var(--av-e2);
}

.av-registre-sinistres .av-details > div {
  padding-left: 0;
  border-left: 0;
}

/* Une carte d'événement se focalise (Q-16 A : son focus met ses zones en avant) ; son contour de focus, le violet du
   site, se pose en dedans de la carte : au dehors, la rangée qui défile le coupait en haut et en bas */
.av-registre-sinistres .av-carrousel__carte:focus-visible {
  outline-offset: calc(-1 * var(--av-trait-focus));
}

/* La source de la courbe du SoH, en tête du dessin comme aujourd'hui (soh-chart-container .header) : « Estimation par
   Bib-batteries », puis le logo de Bib-batteries à la hauteur des logos du rapport (§ 9, la boîte d'un logo), calé à
   droite ; il passe sous le texte quand la ligne ne suffit pas */
.av-soh__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-e2) var(--av-e4);
}

.av-soh__logo {
  display: block;
  width: auto;
  height: var(--av-hauteur-logo-rapport);
}

/* La courbe du SoH (Q-8 A ; S-12) : la place réservée à la hauteur de la courbe du kilométrage, que le module lui donne
   (A-11 A) : 160 px de tracé, 24 au-dessus et 32 pour l'axe ; 200 puis 240 px de tracé à partir de 640 et de 1 025 px
   */
.av-graphique__dessin--soh {
  min-height: calc(var(--av-e9) + var(--av-e8) + var(--av-e7) + var(--av-e2));
}

@media (min-width: 640px) {
  .av-graphique__dessin--soh {
    min-height: calc(2 * var(--av-e9) + var(--av-e7) + 2 * var(--av-e2));
  }
}

@media (min-width: 1025px) {
  .av-graphique__dessin--soh {
    min-height: calc(2 * var(--av-e9) + 2 * var(--av-e7) + var(--av-e2));
  }
}

/* Les valeurs écrites sur la courbe du SoH (« 90 à 96 % », « 94 % ») : le liseré blanc des valeurs des graphiques
   (#572), qui les détache de la tendance haute qu'elles croisent */
.av-graphique__dessin--soh .apexcharts-point-annotation-label {
  paint-order: stroke;
  stroke: var(--av-blanc);
  stroke-width: calc(2 * var(--av-trait-controle));
  stroke-linejoin: round;
}

/* Crit'Air (G-29, S-14 ; le prototype, en jetons) : la vignette de 48 px, la hauteur de ses deux lignes, décorative
   (le texte la dit), puis la classe en 600 et le véhicule en gris, centrés sur elle, à 16 px : le texte à 80 px du
   bord au téléphone, la seule exception de colonne du rapport, comme au prototype de la direction (retiré au #546) ; après un
   pictogramme de 32 px, il serait à 64 (exception écrite au § 5, Les repères au bord de la colonne). Le véhicule, le
   texte d'aujourd'hui (zfe.html) : « Véhicule GAZOLE immatriculé en 2016 », le carburant tel que Core l'envoie */
.av-critair {
  display: grid;
  grid-template-columns: var(--av-e7) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--av-e4);
}

.av-critair__vignette {
  display: block;
  width: var(--av-e7);
  height: var(--av-e7);
}

.av-critair__titre {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
}

.av-critair__texte {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* L'illustration d'une carte de « Services vendeur » (services.html ; Q-15 A, Thomas, 28/10/2026), en tête comme
   aujourd'hui : 64 px de haut, à sa proportion, décorative (le titre la dit) ; 12 px jusqu'au titre, l'écart de la
   carte et 8 */
.av-carte__illustration {
  display: block;
  width: auto;
  height: var(--av-e8);
  margin-bottom: var(--av-e2);
}

/* L'icône d'une carte qui ouvre quelque chose, en violet : les deux cartes de la page Contact (§ 11, #386) */
.av-carte__picto {
  display: block;
  width: var(--av-icone-grande);
  height: var(--av-icone-grande);
  margin-bottom: var(--av-e2);
}

.av-carte__picto svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--av-violet);
}

/* Le pictogramme d'une cellule de tableau du rapport (battery.html, « illustrated » : les usages et les modes de
   recharge de la batterie, img/report/technical/, gardés, § 9) : devant le nom, dans sa ligne, comme aujourd'hui ;
   20 px, à 12 px du nom (le repère de 20 px du § 5), alt vide (le nom le dit), calé sur le haut des lettres : centré
   sur la ligne du nom à 1 px près, au téléphone (16/24) comme au bureau (14/20), là où middle le baissait de 2 px. Un
   pictogramme d'image, pas une icône d'interface : ses couleurs sont les siennes */
.av-tableau__picto {
  display: inline-block;
  width: var(--av-icone);
  height: var(--av-icone);
  margin-right: var(--av-e3);
  vertical-align: text-top;
}

/* Le contenu des ZFE (zfe.html, zfe-content), dans l'ordre d'aujourd'hui : d'un côté le Crit'Air de ce véhicule, puis
   le détail de la zone choisie sur la carte ; de l'autre « Pour ce véhicule : », la légende des marqueurs et la carte.
   L'un sous l'autre au téléphone, côte à côte à partir de 1 025 px, comme aujourd'hui ; plus de cadre autour du
   Crit'Air ni du détail (§ 6, à plat) */
.av-zfe {
  display: grid;
  gap: var(--av-e5);
}

@media (min-width: 1025px) {
  .av-zfe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--av-e6);
    align-items: start;
  }
}

/* La carte, à son format d'aujourd'hui : toute la largeur de sa colonne, 400 px de haut ; aux angles des blocs, sans
   contour (§ 6), blanche avant ses tuiles (A-11 A : rien ne s'y lit comme un contenu qui vient) ; rendue dès le
   serveur, avec le chapitre */
.av-zfe__carte {
  position: relative;
  height: calc(4 * var(--av-e9) + var(--av-e4));
  border-radius: var(--av-rayon-bloc);
  overflow: hidden;
}

/* Un marqueur de zone (Q-9 B, Thomas, 28/10/2026 : le code couleur d'aujourd'hui gardé, osm/*.png, vert « Autorisé »,
   orange « Restrictions », rouge « Interdiction », exception écrite au § 2) : l'image d'aujourd'hui, 24 px, dans un
   vrai bouton (§ 11, jamais un élément cliquable sans rôle), nommé par sa zone et sa situation ; sa cible porte à
   44 px (::after, § 13) sans grandir le dessin. Maplibre le place (Marker, element) ; le toucher montre le détail de
   sa zone (aria-controls), comme aujourd'hui, par autoviza.js (#546) */
.av-zfe__marqueur {
  position: relative;
  display: block;
  width: var(--av-e5);
  height: var(--av-e5);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.av-zfe__marqueur::after {
  content: "";
  position: absolute;
  inset: calc((var(--av-e5) - var(--av-cible)) / 2);
}

.av-zfe__marqueur > img,
.av-zfe__legende img {
  display: block;
  width: 100%;
  height: 100%;
}

/* La légende, au-dessus de la carte comme aujourd'hui, sous « Pour ce véhicule : » : chaque marqueur et son nom, en
   rangée qui passe à la ligne */
.av-zfe__legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--av-e2) var(--av-e5);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-zfe__legende > li {
  display: flex;
  align-items: center;
  gap: var(--av-e2);
}

.av-zfe__legende img {
  flex: none;
  width: var(--av-icone);
  height: var(--av-icone);
}

/* La source des données, en bas du chapitre : la note de bas de chapitre d'aujourd'hui (text-footnote, en gris),
   en 12 px (av-texte-legende, qui ne pose pas de couleur) et en gris, comme les autres notes du rapport */
.av-zfe__source {
  color: var(--av-gris-texte);
}

/* La carte de l'avis et du sondage (csat.html, survey.html : csat-card, survey-card) : une carte sur l'aplat, sans
   contour, sur la largeur de la colonne comme aujourd'hui ; l'icône de presse-papiers d'aujourd'hui en tête, violette,
   à 12 px du contenu, centrée sur la première ligne de la carte : la question de l'avis (24 px), son avis de refus ou
   de note quand il ouvre la carte (l'icône de l'avis, à 16 px de son bord), « Enquête » dans le sondage, à 2 px près,
   comme aujourd'hui ; cellules et cases sur le blanc, comme dans toute carte (--av-champ-fond). L'avis n'a plus son
   sur-titre (C-4) ; le sondage garde « Enquête ». */
.av-sondage {
  display: grid;
  grid-template-columns: var(--av-icone) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--av-e3);
}

.av-sondage__icone {
  width: var(--av-icone);
  height: var(--av-icone);
  margin-top: calc((var(--av-e5) - var(--av-icone)) / 2);
  fill: var(--av-violet);
}

.av-sondage:has(> form > .av-avis:first-child) .av-sondage__icone {
  margin-top: var(--av-e4);
}

/* Le commentaire de l'avis grandit avec son texte, comme aujourd'hui (csat-comment-input), à partir de ses trois
   lignes ; un navigateur qui ne le sait pas les garde, et sa barre de défilement */
.av-sondage textarea.av-champ__saisie {
  field-sizing: content;
}

/* Sous 348 px, les cinq cellules de 44 px et leurs écarts (252 px) ne tiennent plus à côté de l'icône (224 px à
   320 px) : l'échelle et ses bornes passent sous elle, sur toute la largeur de la carte ; la question et le
   commentaire restent à 12 px de l'icône */
@media (max-width: 347px) {
  .av-sondage .av-notation__echelle {
    margin-inline-start: calc(-1 * (var(--av-icone) + var(--av-e3)));
  }
}

/* Le sur-titre du sondage (survey-eyebrow), en gris sur l'aplat, à 4 px de sa question */
.av-sondage__surtitre {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

/* La question du sondage : celle de la notation */
.av-sondage__question {
  font: var(--av-texte-nom);
  letter-spacing: var(--av-chasse-nom);
  text-wrap: pretty;
}

/* Les réponses du sondage (les boutons secondaires d'aujourd'hui) : le bouton neutre du socle (av-bouton--tiers), sur
   le blanc dans la carte, comme ses cellules (--av-champ-fond, § 3 : un bouton posé sur un aplat se dessine sur
   blanc) ; l'aplat foncé au survol et à l'appui, comme ailleurs */
.av-sondage .av-bouton--tiers {
  background: var(--av-champ-fond);
}

.av-sondage .av-bouton--tiers:active {
  background: var(--av-aplat-fonce);
}

@media (hover: hover) {
  .av-sondage .av-bouton--tiers:hover {
    background: var(--av-aplat-fonce);
  }
}

/* Le rapport CARFAX® importé (import-direct-report.html ; espace pro), dans la feuille du rapport comme aujourd'hui
   (omega/base_report.html), sous sa bannière : comme aujourd'hui, l'iframe prend la hauteur de son document (mesurée
   par le script de la page) et c'est la page qui défile ; 500 px au moins, comme aujourd'hui. Bord à bord au
   téléphone (elle déborde de la marge de la feuille), dans la colonne de la feuille au-delà, au bord du titre et de
   la phrase, comme aujourd'hui (le retrait propre au document tiers reste le sien) ; sans contour. Le titre de la
   page garde ses 24 px jusqu'au contenu : le document, ou l'avis de son échec. */
/* La phrase du rapport importé, sous la bannière qui le nomme déjà : en gris, sur toute la largeur de la feuille, sans
   titre visible (Thomas, 09/11/2026 : titre et phrase en grand prenaient la place du document) */
.av-import__intro {
  color: var(--av-gris-texte);
  font: var(--av-texte-court);
  letter-spacing: var(--av-chasse-court);
}

.av-import__document {
  display: block;
  width: calc(100% + 2 * var(--av-feuille-marge));
  min-height: calc(5 * var(--av-e9) + var(--av-e4) + var(--av-e1));
  margin-inline: calc(-1 * var(--av-feuille-marge));
  border: 0;
  background: var(--av-blanc);
}

@media (min-width: 640px) {
  .av-import__document {
    width: 100%;
    margin-inline: 0;
  }
}

/* Son pied (footer-import.html), hors de la feuille comme celui du rapport : « Exclusion expresse de garantie » au
   dessin de « Partenaires Autoviza® », la garantie et la note de l'astérisque d'aujourd'hui, visibles comme
   aujourd'hui, en 12 px gris ; le titre et ses paragraphes calés à gauche, comme le texte du dépliant du pied : un
   paragraphe de dix lignes ne se lit pas centré, et son titre se pose à son bord */
.av-rapport-pied--import :is(.av-rapport-pied__titre, .av-rapport-pied__note) {
  text-align: left;
}