/* Charte Paddock : catalogue ivoire. Papier de catalogue d'encheres plein
   jour, encre brune, filets typographiques. Anti-generique : aucun degrade,
   aucune ombre diffuse, aucune carte, coins nets, laiton par petites touches.
   Les planches blueprint restent marines : planches contrecollees du livre. */
:root {
  color-scheme: light;
  --ground: #F6F1E7;
  --panel-image: #1E2A38;
  --hair: #B8AC94;
  --hair-2: #DCD2BC;
  --hair-in: #E7DFCC;
  --ink: #2A251C;
  --ink-2: #5C5545;
  --ink-faint: #6F6450;
  --brass: #8F6D2C;
  --brass-dim: #B8965A;
  --danger: #A44E3E;
  --ok: #5F7F4B;
  --cyan: #8FB8CE;
  --r: 4px;
  /* La mesure de la page (decision Vincent du 28/08, qui AMENDE la pleine
     largeur du 27/08) : toute la page se pose sur une colonne centree. La
     gouttiere se resserre au repli, ce qui recale les trois bandeaux d'un
     coup au lieu de trois paddings a tenir en phase a la main. */
  --mesure: 1240px;
  --mesure-courte: 40rem;
  --gouttiere: 32px;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  font-family: var(--sans);
  background: var(--ground);
  color: var(--ink);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
/* Liens editoriaux : soulignement fin laiton terni decolle du texte, jamais
   le souligne epais par defaut du navigateur qui fait "HTML brut". */
a {
  color: var(--ink);
  text-decoration-color: var(--brass-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--brass); text-decoration-color: var(--brass); }

/* Trois voix typographiques : serif pour noms de modeles et titres, mono
   pour les chiffres, sans pour les micro-labels (capitales espacees). */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }
h1 { font-size: 2rem; line-height: 1.15; }
/* Reinitialisation durable : .num et .muted vivent souvent imbriques dans un
   .micro (synthese, entry-spec) et heritaient sinon sa voix capitales
   espacees. */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: normal; }
.micro {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-faint);
}

/* Oreilles du journal : date a gauche, recherche et compte a droite. */
/* UN SEUL AXE POUR TOUTE LA PAGE. Les oreilles, le masthead et le contenu se
   posent sur la meme colonne centree. Avant, chacun gerait sa largeur dans
   son coin : le wordmark se centrait sur la fenetre pendant que le contenu
   restait colle a gauche, deux axes differents et un tiers d'ecran vide a
   droite (constat Vincent du 28/08). Regle GROUPEE a dessein : trois regles
   separees rederiveraient au premier lot suivant. Les paddings horizontaux
   des trois bandeaux sont a zero, la gouttiere est portee par cette largeur,
   sinon l'encre du contenu ne s'aligne pas sur le filet du masthead. */
.ears, .masthead, .content {
  width: min(var(--mesure), 100% - var(--gouttiere) * 2);
  margin-inline: auto;
}
.ears {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px 18px; flex-wrap: wrap; padding: 10px 0 4px;
}
.ears-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ears form { display: inline; margin: 0; }
.ears input[type=search] {
  width: 15rem; max-width: 40vw; background: transparent;
  border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0;
  padding: .25rem .1rem;
}
.ears button { border: 0; padding: .25rem 0; }

/* Masthead catalogue (spec section 5) : filet double, embleme du jour,
   wordmark serif espace, devise, navigation en capitales espacees. */
.masthead { text-align: center; border-top: 3px double var(--ink); }
.masthead .embleme { height: 64px; margin: 16px auto 6px; display: block; }
.wordmark {
  display: inline-block; font-family: var(--serif); font-size: 2rem;
  letter-spacing: .35em; padding-left: .35em; color: var(--ink);
  text-decoration: none;
}
.masthead .devise { margin: 6px 0 12px; }
.mast-nav {
  display: flex; justify-content: center; gap: 26px; padding: 8px 2px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  overflow-x: auto; white-space: nowrap;
}
.mast-nav a {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  text-decoration: none; color: var(--ink-2); padding: 2px 0;
  border-bottom: 2px solid transparent;
}
.mast-nav a:hover { color: var(--ink); }
/* Le laiton marque l'actif : filet sous l'item, ni fond ni pastille. */
.mast-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }

/* Version compacte des pages denses (fiche, saisie) : wordmark a gauche,
   nav a droite, sans gravure ni devise. */
.masthead.compact {
  display: flex; justify-content: space-between; align-items: baseline;
  text-align: left; border-top: 2px solid var(--ink); padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.masthead.compact .wordmark { font-size: 1.15rem; letter-spacing: .22em; padding-left: 0; }
.masthead.compact .mast-nav { border: 0; padding: 0; justify-content: flex-end; }

/* Largeur du contenu : la colonne partagee ci-dessus (--mesure). La decision
   du 27/08 bornait a 1100px puis a rien du tout ; celle du 28/08 tranche a
   1240px centres, ce qui laisse la page de lot et les tables d'entretien
   s'etaler sans coller aux bords. Padding HORIZONTAL A ZERO : la gouttiere
   est portee par la largeur partagee, sinon l'encre du contenu se decale du
   filet du masthead. La lisibilite du texte long est rendue par la mesure de
   prose ci-dessous, pas par un plafond de plus. */
.content { padding: 22px 0; min-width: 0; }
/* Ecrans courts (saisie, confirmation, connexion, petits formulaires) :
   colonne etroite et texte centre. C'est le traitement de la couverture de
   connexion du lot K5, generalise plutot que redecline. */
.content.court {
  width: min(var(--mesure-courte), 100% - var(--gouttiere) * 2);
  text-align: center;
}
/* Le texte SAISI reste au fer a gauche : un champ dont le contenu se centre
   pendant la frappe est illisible. Les champs eux-memes se centrent dans la
   colonne par l'alignement du parent, ce sont des boites en ligne. */
.content.court input, .content.court select, .content.court textarea { text-align: left; }
/* La prose garde sa mesure de lecture mais son bloc se recentre, sinon un
   paragraphe plus court que la colonne se colle a gauche. */
.content.court > p { margin-inline: auto; }
/* Mesure de lecture des paragraphes poses a la racine de la page (notes d'un
   vehicule, chapeaux d'ecran) : une ligne de prose de 1800px ne se lit pas.
   Enfant DIRECT seulement : dans la marge reglee ou un panneau, la largeur
   est deja contrainte par le conteneur et un plafond en plus decalerait le
   texte de son cadre. */
.content > p { max-width: 78ch; }
/* Couverture de connexion : la premiere page du catalogue. */
.cover { max-width: 26rem; margin: 9vh auto 0; text-align: center; }
.cover .embleme { height: 96px; margin: 0 auto 12px; display: block; }
.cover .devise { margin-top: 6px; }
.cover form {
  text-align: left; margin-top: 24px;
  border-top: 1px solid var(--hair); padding-top: 16px;
}
.cover h1 { font-size: 1.1rem; margin: 0 0 .6rem; }

/* Message flash : laiton, dans la nuance lisible sur papier (annonce vocale,
   role=status pose au HTML). Combine avec .muted (base.html rend "muted
   flash") : sans la combinaison, .muted plus tardif ecrasait la couleur et
   le correctif K2 restait inerte. */
.flash, .muted.flash { color: var(--brass); }

/* Filets fins plutot que cartes ombrees. */
.hairline { border: 0; border-top: 1px solid var(--hair); margin: 14px 0; }
.panel { background: transparent; border: 1px solid var(--hair-2); border-radius: var(--r); padding: 14px 18px; }
/* Panneau image : le fond porte la grille blueprint que la spec (section 9)
   confie a l'app ("l'app dessine elle-meme tout le chrome : cadre fin,
   grille"). Hairlines cyan a peine visibles, pas un degrade. Regle groupee :
   les deux planches marines (planche de la fiche, entree editoriale)
   partagent le meme fond, chacune gardant chez elle bordure/mise en page. */
.plate, .entry-media {
  background-color: var(--panel-image);
  background-image:
    repeating-linear-gradient(0deg, rgba(143, 184, 206, .07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(143, 184, 206, .07) 0 1px, transparent 1px 26px);
}

/* Icones : trait encre par defaut (lisible sur papier), sans remplissage,
   18 a 20 px. */
.icon { width: 18px; height: 18px; stroke: var(--ink-2); fill: none; stroke-width: 1.4; flex: 0 0 auto; }
/* Sur les planches marines, le trait redevient blueprint. */
.plate .icon, .entry-media .icon { stroke: var(--cyan); }

/* Signaux. */
.danger { color: var(--danger); }
.ok { color: var(--ok); }
/* Voix reprises des ecrans de depot (31/08). Ils etaient restes a la charte
   d'avant le renversement ivoire, avec vingt-quatre couleurs en dur posees
   en style en ligne : l'ancien laiton #a06000, l'ancien rouge #b00020 et le
   filet gris #ddd. Un style en ligne echappe a toute reprise de charte, d'ou
   ces deux classes et la garde qui bannit les litteraux. L'avertissement et
   l'erreur, eux, reprennent .flash et .danger qui existaient deja. */
.encart { margin-bottom: 1.2rem; }
.encart > p { margin: 0; }
.encart .encart-total { font-size: 1.4rem; margin-top: .2rem; }
.encart .encart-total .muted { font-size: .85rem; }
.encart.etroit { max-width: 22rem; }
/* Apercu de piece (carte grise, facture, controle technique) : le document
   se lit en pleine largeur de sa colonne, dans un filet de charte. */
.apercu { width: 100%; height: 70vh; border: 1px solid var(--hair-2); border-radius: var(--r); }
.pill { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.pill.overdue { background: var(--danger); }

/* Tables editoriales, filets internes. */
table { border-collapse: collapse; width: 100%; }
/* Conteneur de toute table : sur un telephone, une table plus large que sa
   colonne defile ICI, sinon elle pousse la page entiere et tout le document
   part de cote (fiche a 390px : 587px de large pour 485px de fenetre,
   recette du 28/08). Le conteneur plutot qu'un display: block sur la table :
   ce dernier contient aussi le debordement mais retire a la table sa nature
   de table dans l'arbre d'accessibilite. */
.table-scroll { overflow-x: auto; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--hair-in); }
/* En-tetes de colonnes dans la voix micro-label : l'instrument etiquette
   en capitales espacees, jamais en gras de tableur. */
th {
  color: var(--ink-faint); font-weight: 400; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .14em;
}

/* Formulaires. */
form p { margin: .6rem 0; }
label { display: block; font-size: .85rem; color: var(--ink-2); }
input, select, textarea {
  padding: .45rem .55rem; width: 100%; max-width: 26rem; background: transparent;
  color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r);
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--brass-dim); }
/* Boutons en controles d'instrument : capitales espacees, fond transparent,
   filet ; le laiton n'arrive qu'au survol ou sur l'action primaire. */
button {
  padding: .55rem 1.1rem; cursor: pointer; background: transparent;
  color: var(--ink-2); border: 1px solid var(--hair-2); border-radius: var(--r);
  font-family: var(--sans); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
button:hover { border-color: var(--brass-dim); color: var(--brass); }
/* Le selecteur natif de fichier suit les boutons (sinon chip claire du
   navigateur, premier signal "site pas fini"). */
input[type=file] { border: 1px dashed var(--hair-2); padding: .6rem; }
input[type=file]::file-selector-button {
  padding: .4rem .8rem; margin-right: .7rem; cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--hair-2); border-radius: var(--r);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
}
/* Habillage du selecteur de fichier. Le "Choose file / No file chosen" du
   champ natif est rendu par le NAVIGATEUR, dans SA langue : ni traduisible
   ni habillable, et sur un outil francais il se lit comme un ecran pas fini.
   Le script de base.html enveloppe donc chaque champ et pose nos propres
   commandes. Les deux regles ci-dessus restent le repli sans JS : elles sont
   ce qu'on voit si le script ne tourne pas. */
.fichier {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px dashed var(--hair-2); border-radius: var(--r); padding: .5rem .6rem;
  text-align: left;
}
/* Masque a l'oeil mais TOUJOURS focalisable : display: none le sortirait de
   l'ordre de tabulation et le selecteur deviendrait inatteignable au
   clavier. Le champ garde son etiquette, c'est lui qui ouvre le dialogue. */
.fichier input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; clip-path: inset(50%);
}
.fichier-bouton {
  display: inline-block; padding: .4rem .8rem; cursor: pointer; flex: none;
  color: var(--ink-2); border: 1px solid var(--hair-2); border-radius: var(--r);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  transition: color .15s ease, border-color .15s ease;
}
.fichier-bouton:hover { border-color: var(--brass-dim); color: var(--brass); }
/* Le champ etant masque, son anneau de focus part avec lui : le bouton
   habille le reprend, sinon le clavier navigue a l'aveugle. */
.fichier input[type=file]:focus-visible + .fichier-bouton {
  outline: 1px solid var(--brass-dim); color: var(--brass);
}
/* L'etat porte un NOM DE FICHIER : pas la voix micro, qui capitalise et
   descend a 9,5px. Un nom de fichier se rend tel qu'il est. */
.fichier-etat {
  font-size: .8rem; color: var(--ink-faint); text-transform: none;
  overflow-wrap: anywhere;
}
/* Relecture d'une date saisie, en toutes lettres francaises. Le format d'un
   <input type=date> est impose par la LOCALE DU NAVIGATEUR : un client dont
   le navigateur est en anglais lit mm/dd/yyyy sur un outil francais et peut
   inverser jour et mois. Plutot que de remplacer le champ natif (on perdrait
   le calendrier et le clavier date du telephone), l'app relit ce qu'elle a
   compris. Vide tant qu'aucune date n'est saisie : rien ne bouge a l'ecran
   avant que l'utilisateur n'ait quelque chose a verifier. */
.date-lue {
  display: block; font-size: .8rem; color: var(--ink-faint);
  text-transform: none; margin-top: .2rem;
}
input[type=checkbox], input[type=radio] { accent-color: var(--brass); }
/* Laiton sur l'action (spec sections 2 et 7) : le bouton primaire porte
   l'accent laiton au repos, en petite touche (bord + texte, pas d'aplat). */
.btn-primary { border-color: var(--brass-dim); color: var(--brass); }
.btn-primary:hover { background: var(--hair-in); }

.muted { color: var(--ink-2); font-size: .85rem; text-transform: none; letter-spacing: normal; }
.errorlist { color: var(--danger); margin: 0; padding-left: 1rem; font-size: .85rem; }

/* Spinner du JS maison : conserve tel quel, recolore charte. */
form.busy button[type=submit]::after {
  content: ""; display: inline-block; width: .7rem; height: .7rem;
  margin-left: .5rem; vertical-align: -.05rem;
  border: 2px solid var(--ink-faint); border-top-color: transparent; border-radius: 50%;
  animation: busy-spin .8s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* Responsive iPhone d'abord : masthead et oreilles se resserrent, la grille
   repasse en une colonne. */
@media (max-width: 720px) {
  /* Une seule valeur a bouger : les trois bandeaux se resserrent ensemble. */
  :root { --gouttiere: 14px; }
  .ears { padding: 8px 0 0; }
  /* Oreilles conservees au repli (decision Vincent 31/08 : elles portent la
     seule recherche et la seule deconnexion), seule la date decorative se
     masque pour rendre une demi-ligne. */
  .ears .ears-date { display: none; }
  .masthead .embleme { height: 48px; }
  .wordmark { font-size: 1.5rem; }
  .mast-nav { justify-content: flex-start; gap: 18px; }
  /* Le wordmark et la nav ne tiennent pas sur une ligne de telephone : la nav
     prend la sienne, sinon son dernier item est clippe de quelques pixels
     (recette 28/08, 348px de contenu pour 341px de boite). */
  .masthead.compact { flex-wrap: wrap; }
  .masthead.compact .mast-nav { justify-content: flex-start; flex: 1 0 100%; padding-top: 6px; }
  .content { padding: 14px 0; }
}

/* Index du catalogue (spec section 7) : bandeau, ligne de synthese reglee,
   echeances editoriales, vehicules en entrees pleine largeur. */
.index-head { padding: 16px 2px 10px; }
.index-head h1 { margin: .1rem 0; }
/* Titre de section prolonge d'un filet (regle conservee de la charte) : la
   page se lit comme une planche composee, pas une suite de titres flottants. */
.section-title { margin-top: 26px; display: flex; align-items: center; gap: 16px; }
.section-title::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }
.synthese {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
  justify-content: space-between; border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair); padding: 10px 2px;
}
.synthese .num { font-size: 1.05rem; color: var(--ink); margin-left: .4em; }
.synthese .num.call { color: var(--brass); }
.deadline-list { padding: 4px 2px; }
.deadline-row, .filet-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair-in); }
.deadline-row:last-child, .filet-row:last-child { border-bottom: 0; }
/* Rangees a filet en remplacement des tables denses (spec finitions 31/08) :
   .grow prend la place libre, .end s'aligne a droite, .sub porte
   l'information secondaire et prend sa propre ligne au repli.
   overflow-wrap : un titre de document a underscores (les titres sont des
   noms de fichiers) ou une note insecable deborderait de la rangee a 390px
   et repousserait la page entiere, le defaut fondateur du lot. La cesure
   vit sur .sub et .grow (les contenus utilisateur) et JAMAIS sur la rangee
   entiere : posee sur la regle de base, elle coupait le vocabulaire de
   l'app en plein mot dans les echeances de la fiche a 390px (Assuran/ce,
   Control/e techniq/ue, recette du 31/08). */
.filet-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.filet-row .end { margin-left: auto; }
.filet-row .sub { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .filet-row { flex-wrap: wrap; row-gap: 2px; }
  .filet-row .sub { order: 9; flex: 1 0 100%; margin-left: 0; }
}
.deadline-date { color: var(--ink-2); min-width: 6.5rem; }
/* L'echu garde sa couleur malgre l'ordre source : la combinaison bat la
   regle de base par specificite, pas par position. */
.deadline-date.danger { color: var(--danger); }
.deadline-kind { min-width: 9rem; }
.entries { margin-top: 4px; }
.entry {
  display: flex; gap: 22px; align-items: center; padding: 18px 2px;
  border-bottom: 1px solid var(--hair-2); text-decoration: none; color: var(--ink);
}
.entry:hover { color: var(--ink); }
.entry:hover .entry-name { color: var(--brass); }
.entry-media {
  width: 180px; height: 96px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.entry-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Pictogramme agrandi plein cadre : trait fin, sinon boudin. */
.entry-media svg { width: 60%; height: 60%; stroke-width: .7; }
.entry-body { display: flex; flex-direction: column; gap: 2px; }
.entry-name { font-family: var(--serif); font-size: 1.35rem; }
.entry-figures { margin-left: auto; text-align: right; flex: none; }
.entry-figures > * { display: block; }

/* Surcharges mobiles des entrees editoriales : PLACEES APRES les classes
   qu'elles surchargent (meme specificite, l'ordre source departage) sinon
   elles resteraient inertes derriere les regles de base .entry*. */
@media (max-width: 720px) {
  .entry { flex-wrap: wrap; gap: 10px 22px; }
  .entry-media { width: 100%; height: 120px; }
  .entry-figures { margin-left: 0; text-align: left; }
}

/* Cartes-propositions de la saisie (spec section 7) : style panneau, cibles
   tactiles conservees pour le pouce sur telephone tenu d'une main. */
/* .capture-card se pose sur .panel (fond/filet/rayon) et ne surcharge que
   son padding serre et sa marge basse. */
.capture-card { padding: .2rem .8rem .6rem; margin: 0 0 1rem; }
.capture-card legend { font-size: 9.5px; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-faint); }
.capture-card input[type=checkbox] { width: auto; margin-right: .4rem; }
.capture-keep { font-size: 1rem; color: var(--ink); display: inline-block; padding: .5rem .6rem .5rem 0; }
.capture-keep input[type=checkbox] { width: 1.4rem; height: 1.4rem; vertical-align: -.25rem; }

/* Encart carnet a lisere laiton (spec section 6). */
.brass-edge { border-left: 2px solid var(--brass); padding-left: 10px; }

/* Page de lot (spec section 7) : colonne principale + marge reglee a droite. */
.lot-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 2px 2px 12px; border-bottom: 1px solid var(--hair); margin-bottom: 12px;
}
.lot-head .vname { font-family: var(--serif); font-size: 1.6rem; color: var(--ink); margin: 0; }
.lot-head .vsub { font-family: var(--mono); color: var(--ink-2); font-size: .85rem; }
.lot-head .vtools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lot-head .vtools select { width: auto; max-width: 14rem; }
.lot { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(250px, 1fr); gap: 0 30px; margin-top: 8px; }
.lot-main { min-width: 0; }
.lot-main table { margin: .4rem 0; }
.lot-main .micro { display: block; margin-top: 10px; }
.lot-aside { border-left: 1px solid var(--hair); padding-left: 22px; overflow-wrap: anywhere; }
.lot-aside .fig { padding: 6px 0 10px; border-bottom: 1px solid var(--hair-in); }
.lot-aside .fig:last-child { border-bottom: 0; }
.lot-aside .fig > * { display: block; }
.lot-aside .fig .num { font-size: 1.15rem; }
.lot-aside .aside-doc { font-size: .85rem; }
/* La planche : fond marine et grille cyan, une planche contrecollee. */
.plate { border: 1px solid #16202C; padding: 10px; margin-bottom: 6px; }
.plate img { width: 100%; display: block; }
.plate .plate-fallback { width: 100%; height: 150px; stroke: var(--cyan); stroke-width: .7; }
.comparable-prix { color: var(--ink); min-width: 5.5rem; }
.photo-strip { max-height: 70px; margin: .2rem .3rem 0 0; border-radius: var(--r); }
.lot-foot { margin-top: 26px; border-top: 1px solid var(--hair-2); padding-top: 8px; }

@media (max-width: 720px) {
  .lot { grid-template-columns: 1fr; }
  .lot-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); margin-top: 14px; }
  /* Au repli, les chiffres passent en tete, avant les sections (spec section 7). */
  .lot-aside { order: -1; }
  .lot-head .vtools { margin-left: 0; }
}