/* =========================================================================
   calculateur.css — ce que la page d'estimation ajoute a base.css.

   Charge APRES base.css, jamais avant. Elle ne redeclare aucun jeton et
   aucune couleur en dur : partout var(--*).

   Ce qui vit ici, et nulle part ailleurs (_COMPOSANTS.md §15) :
     - les trois positions du recapitulatif (colonne collante, bloc, barre basse)
     - les onglets collants sous le bandeau (top: 56px)
     - la barre basse de 84 px et sa bascule de recapitulatif
     - le repere du couloir gauche de l'arret en cours
     - le champ de recherche de l'inventaire

   Sources : mediane-phase2.md §B.0 a §B.9, §H.4, §H.5. Aucune valeur inventee.
   ========================================================================= */

/* ------------------------------------------------- 1. Reglages de la page */

/* [hidden] est passe dans base.css le 19.09 (_COMPOSANTS.md §9) : un attribut
   du HTML ne doit pas dependre de la feuille de page qui se charge ensuite.
   La regle qui vivait ici est donc partie. Les deux exceptions du bloc
   <noscript> ont une specificite plus haute et continuent de gagner. */

body { min-height: 100dvh; }

/* Le calculateur a ses propres gouttieres : 40 px a gauche, 24 px a droite
   sous 768 px (§B.0, correction 2 du jury). Le couloir gauche n'est pas une
   marge bizarre, il porte le repere de l'arret en cours. */
.calc {
  --gouttiere-g: var(--gouttiere-calc-g);
  --gouttiere-d: var(--gouttiere-calc-d);
  --retrait-rail: 0px;
  padding-top: var(--e32);
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + var(--e48));
}

@media (min-width: 768px) {
  .calc { padding-top: var(--e48); padding-bottom: var(--e96); }
}

.calc-corps { position: relative; }

/* A partir de 1080 px : 792 px de formulaire, 48 px d'ecart, 340 px de
   recapitulatif. 792 + 48 + 340 = 1180 = --largeur-max. */
@media (min-width: 1080px) {
  .calc-corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: var(--e48);
    align-items: start;
  }

  .calc-form { grid-column: 1; min-width: 0; }
}

/* --------------------------------------------- 2. Bandeau de demonstration */

/* Visible seulement avec ?demo=1, pour que personne ne prenne une capture de
   demonstration pour une saisie reelle (§D). */
.bandeau-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e16);
  min-height: 40px;
  padding: var(--e8) var(--gouttiere-calc-d) var(--e8) var(--gouttiere-calc-g);
  background: var(--panneau);
  border-bottom: 1px solid var(--filet-fort);
}

.bandeau-demo-texte {
  max-width: none;
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--craie-douce);
}

/* ----------------------------------------------------- 3. Le bandeau-trajet */

/* Le rail lui-meme est dans base.css §12. Ici, seulement ce qui est propre au
   calculateur : sept marques regulierement espacees (disque, cinq arrets,
   anneau), donc sept etiquettes qui ne se marchent pas dessus.

   LES LIBELLES PASSENT SOUS LE TRACE (constat 4 du chef, 19.09).
   Mesure avant correction, ordinateur 1440 : le trace a y=74, les cinq noms
   d'arret et les deux communes a y=65 sur 16 px de haut. La ligne traversait
   le texte en plein milieu : « Le chargement » se lisait barre.
   Cause : dans calculateur.html le <p class="rail-libelles"> est place DANS
   #rail. Toutes ses soeurs (piste, disque, cinq boutons, anneau) sont en
   position absolue, donc hors flux ; le <p> est le seul enfant en flux et se
   pose en haut de #rail. Son margin-top de 6 px, qui devait l'en ecarter, se
   fond dans celui de #rail : #rail est en position relative, ce qui ne cree
   pas de contexte de formatage, et la marge sort du bloc sans rien decaler.
   Reponse : le sortir du flux a son tour et le caler a 26 px du haut de #rail,
   soit les 20 px du rail plus les 6 px d'ecart que base.css §12 avait prevus.
   Le budget de hauteur du bandeau est respecte au pixel :
   10 (padding haut) + 20 (rail) + 6 (ecart) + 16 (libelles) + 4 = 56 px.
   base.css n'est pas a moi : merci.html porte le meme <p> au meme endroit et
   le meme defaut, c'est signale au chef de chantier. */
.bandeau-calc .rail-libelles {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--e20) + 6px);
  margin-top: 0;
}

/* Les deux communes ne sont plus tronquees tant que la place existe.
   Avant : max-width 11ch = 63 px, alors que « 1206 Genève » en demande 67 et
   « 1227 Carouge » 72. Les deux extremites du trajet s'affichaient « 1206 Gen »
   et « 1227 Car… » sur un ecran de 1440 px ou le rail fait 1219 px de large.
   La vraie contrainte n'est pas un nombre de caracteres, c'est le premier nom
   d'arret : il est centre sur 16,67 % du rail, et il mesure au plus 81 px
   (« Le chargement »). Reste donc 16,67 % moins la moitie du nom moins un
   ecart franc, que --e24 arrondit : 91 px a 768, 179 px a 1440.
   Sous 768 px les noms d'arret ne s'affichent pas (base.css §12) : les deux
   communes se partagent la largeur, la moitie moins un ecart chacune. */
.bandeau-calc .rail-lieu { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
  .bandeau-calc .rail-lieu { max-width: calc(50% - var(--e12)); }
}

@media (min-width: 768px) {
  .bandeau-calc .rail-lieu { max-width: calc(16.67% - var(--e24)); }
}

/* ---------------------------------------------------------- 4. Sans script */

.sans-js {
  display: none;
  max-width: 62ch;
  margin-bottom: var(--e32);
  padding-left: var(--e16);
  border-left: 2px solid var(--signal);
  color: var(--craie);
}

/* ------------------------------------------------------------- 5. L'arret */

.arret { position: relative; }

/* Les 64 px separent deux arrets EMPILES, c'est-a-dire le seul cas ou ils le
   sont : sans JavaScript, les cinq sections se suivent dans la page.
   Avec JavaScript un seul arret est visible et les autres portent [hidden].
   La marge haute de l'arret courant subsistait pourtant : elle n'avait plus
   rien contre quoi se fondre, et poussait tout l'ecran de 64 px vers le bas.
   Mesure du 19.09, mobile 375, arret 2 : bas du bandeau y=56, bouton de retour
   y=152, soit 96 px de vide pour 32 px de retrait voulu (constat 5 du chef).
   Des que le voisin de gauche est masque, la marge n'a plus d'objet.
   Meme specificite que la regle au-dessus (0,2,0), declaree apres : elle
   gagne par l'ordre, et le cas sans script n'est pas touche. */
.arret + .arret { margin-top: var(--e64); }
.arret[hidden] + .arret { margin-top: 0; }

/* Le repere du couloir gauche. Statique : il ne se remplit pas, ne s'anime pas
   et ne mesure rien. Il dit « le titre est ici », comme les huit marqueurs de
   l'accueil disent « la section est ici ». C'est ce qui l'empeche d'entrer en
   concurrence avec le rail horizontal, qui lui mesure l'avancement (§B.0).
   --repere-y est pose par le script : c'est la mediane du <h2> dans l'arret.
   Au-dela de 768 px la gouttiere n'est plus asymetrique, le repere disparait. */
@media (max-width: 767px) {
  .arret::before,
  .arret::after {
    content: "";
    position: absolute;
    left: calc(-1 * var(--gouttiere-calc-g) / 2);
    width: 0;
  }

  .arret::before {
    top: 0;
    height: var(--repere-y, 60px);
    border-left: 1px solid var(--filet-fort);
  }

  .arret::after {
    top: var(--repere-y, 60px);
    bottom: 0;
    border-left: 1px dashed var(--filet-fort);
  }

  .arret-titre::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--gouttiere-calc-g) / 2);
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: var(--fond);
    border: 2px solid var(--signal);
    border-radius: 999px;
  }
}

/* « Arret 2 sur 5 ». Renomme depuis .compteur, deja pris par le groupe
   moins / valeur / plus d'une case d'objet (_COMPOSANTS.md §16). */
.arret-compte {
  max-width: none;
  font-family: var(--police-chiffre);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--craie-douce);
}

.arret-titre { margin-top: var(--e4); }

/* La mesure de charge, sur l'arret 2 seulement : celui qui pese la charge est
   le seul a le faire (§B.1). */
.arret-mesure {
  font-family: var(--police-chiffre);
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--craie-douce);
  white-space: nowrap;
}

/* Resume d'arret. Une seule ligne au-dela de 768 px, ou la place existe ;
   deux lignes en dessous, ou elle n'existe pas (voir plus bas). */
.arret-resume {
  display: flex;
  align-items: baseline;
  gap: var(--e12);
  margin-top: var(--e12);
  max-width: none;
}

.arret-resume-texte {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--police-chiffre);
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--craie-douce);
}

.arret-resume .bouton-texte { flex: none; }

/* Sous 768 px la ligne perdait sa fin, c'est-a-dire l'information la plus
   recente. Releve du 19.09 sur 375 px : arret 2, « 1206 Genève, 3e, sans
   ascenseur · 3 piè… » ; arret 5, « 1206 Genève → 1227 Carouge · 24,7 m³ ·… ».
   Le nombre de pieces, le volume et la date tombaient a chaque fois.
   Or sur mobile le recapitulatif est replie dans la barre basse : cette ligne
   est le seul endroit ou le visiteur relit ce qu'il vient de donner.
   Deux lignes, puis les points de suspension, comme .case-nom dans base.css.
   « Modifier » remonte en premier et se cale a droite : il garde sa rangee et
   la ligne prend la largeur entiere en dessous. Cout : jusqu'a 20 px sur
   quatre arrets, largement couverts par les 64 px rendus plus haut. */
@media (max-width: 767px) {
  .arret-resume {
    flex-wrap: wrap;
    row-gap: var(--e4);
  }

  .arret-resume-texte {
    flex: 1 1 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .arret-resume .bouton-texte { order: -1; margin-left: auto; }
}

.arret-aide {
  margin-top: var(--e12);
  font-size: 15px;
  line-height: 1.5;
  color: var(--craie-douce);
}

/* Le bouton de retour vit en haut a gauche de l'arret (§B.4.7) : la barre
   basse de 84 px n'a la place que de la bascule et du bouton principal.

   SA PLACE EST RESERVEE SUR LES CINQ ARRETS, y compris le premier, qui n'a
   nulle part ou revenir. Mesure du 19.09, ordinateur 1440, avant correction :
   haut du <h2> a y=170 sur l'arret 1, y=310 sur les arrets 2 a 5. Le titre,
   element le plus important de l'ecran, changeait de place entre le premier
   ecran et les quatre suivants, et l'oeil devait le rechercher a chaque
   passage d'un arret a l'autre. 76 px = 52 de bouton + 24 de marge basse.
   L'arret 1 porte une bande vide, pas un bouton masque : un controle qu'on
   cache reste un controle, et celui-la n'existe pas.
   Elle ne coute rien la ou le bouton est present, c'est-a-dire quatre fois
   sur cinq ; sur l'arret 1 elle coute 76 px, sur l'ecran le plus court des
   cinq, et c'est le prix d'un titre qui ne bouge plus. */
.arret-entete { min-height: 76px; }

.arret-retour {
  width: auto;
  margin-bottom: var(--e24);
}

/* Zone tactile de 44 px sur les boutons de texte, qui n'en font que 32. */
.bouton-texte { position: relative; }
.bouton-texte::after { content: ""; position: absolute; inset: -6px -4px; }

.arret > .champ,
.arret > .pastilles,
.arret > .groupe-lie,
.arret > .case-a-cocher,
.arret > .voies { margin-top: var(--e32); }

.arret > .message-erreur + .champ,
.arret > .message-erreur + .pastilles,
.arret > .message-erreur + .groupe-lie { margin-top: var(--e24); }

/* ------------------------------------------- 6. Les deux voies de l'arret 2 */

.voie-logement { margin-top: var(--e24); }
.voie-objets { margin-top: var(--e32); }

.voie-logement .etat-vide-titre {
  font-family: var(--police-chiffre);
  font-size: 20px;
  letter-spacing: .02em;
}

/* ------------------------------------------------------- 7. La recherche */

.recherche { margin-bottom: var(--e24); }

.champ-saisie-icone .picto-champ {
  position: absolute;
  left: var(--e16);
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--craie-douce);
  pointer-events: none;
}

.champ-saisie-icone input { padding-left: calc(var(--e16) + 16px + var(--e12)); }

/* Le bouton natif d'effacement de Safari mange le texte indicatif. */
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ------------------------------------------------- 8. Onglets et planches */

/* Deux mobiliers fixes sur l'arret 2 : 56 px de bandeau et 44 px d'onglets.
   C'est le prix a payer pour ne pas perdre les onglets au bout de huit
   rangees de cases, et c'est assume (§B.4.2). */
.onglets-cadre {
  position: sticky;
  top: 56px;
  z-index: 3;
  background: var(--fond);
}

/* Le chevron de fin de rangee : une opacite, jamais un degrade de couleur. */
.onglets-suite {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 44px;
  padding-left: var(--e12);
  background: var(--fond);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree-courte) ease-out;
}

.onglets-suite .picto {
  width: var(--e16);
  height: var(--e16);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--craie-douce);
}

.onglets-cadre.a-droite .onglets-suite { opacity: 1; }
.onglets-cadre.a-droite .onglets { padding-right: var(--e32); }

.panneau-piece { margin-top: var(--e24); }
.panneau-piece:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

/* Visible seulement sans script, quand les sept planches s'ouvrent a la
   suite : sans titre, on ne saurait plus quelle piece on lit. */
.planche-titre {
  display: none;
  margin-bottom: var(--e16);
  font-size: 18px;
  color: var(--craie);
}

/* La case « Ajouter un objet qui n'est pas ici » est un vrai bouton. */
button.case-objet {
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--e8);
  background: transparent;
  color: var(--craie-douce);
  font-family: var(--police-texte);
  text-align: left;
  cursor: pointer;
}

button.case-objet:hover { border-color: var(--signal); color: var(--craie); }
button.case-objet .case-nom { margin-top: 0; }

/* ------------------------------------------ 9. Resultats de la recherche */

.resultats { margin-top: var(--e24); }

.resultats-titre {
  margin-bottom: var(--e16);
  max-width: none;
  font-size: 15px;
  color: var(--craie-douce);
}

/* Dans les resultats, le nom de l'onglet occupe le coin superieur droit :
   le point ambre passe a gauche du pictogramme (_COMPOSANTS.md §8). */
.resultats .case-objet.est-comptee::after { right: auto; left: var(--e8); }

/* ------------------------------------------------------ 10. Objets libres */

.objets-libres { margin-top: var(--e32); }

.objets-libres-titre { font-size: 18px; color: var(--craie); }

.objets-libres-liste { margin-top: var(--e16); }

.objet-libre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: var(--e12);
  padding: var(--e16) 0;
  border-top: 1px solid var(--filet-fort);
}

.objet-libre .champ { margin: 0; }
.objet-libre .compteur { width: 120px; }

.objet-libre-note {
  grid-column: 1 / -1;
  max-width: none;
  font-family: var(--police-chiffre);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--craie-douce);
}

.objet-libre-retrait {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--e8);
  padding: 0;
  background: none;
  border: 1px solid var(--contour);
  border-radius: 999px;
  color: var(--craie-douce);
  cursor: pointer;
}

.objet-libre-retrait::after { content: ""; position: absolute; inset: -8px; }
.objet-libre-retrait:hover { border-color: var(--signal); color: var(--craie); }

.objet-libre-retrait .picto {
  width: var(--e16);
  height: var(--e16);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 480px) {
  .objet-libre { grid-template-columns: minmax(0, 1fr) auto; }
  .objet-libre .champ { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ 11. Photos */

.photos { margin-top: var(--e48); }
.photos-titre { color: var(--craie); }
.photos .depot { margin-top: var(--e16); }
.vignettes { margin-top: var(--e16); }
.photos-exemple { margin-top: var(--e12); }
.photos-vide { margin-top: var(--e24); }
.photos-mention { margin-top: var(--e12); }
.photos-mention + .photos-mention { margin-top: var(--e4); }

/* ---------------------------------------------------- 12. Case a cocher */

/* La rangee, la grille et le libelle sont passes dans base.css §5 bis le
   19.09 : ils ont disparu d'ici, ils y etaient a l'identique.
   Reste LA CASE ELLE-MEME, redessinee, qui surcharge celle de base.css.

   Pourquoi. accent-color ne teinte que l'etat coche. Decochee, la case restait
   la case native du systeme : un carre gris neutre a angles droits, sans
   aucune composante verte, quand tous les contours de la page sont --contour
   #63836F et tous les champs ont 2 px de rayon (base.css, .champ input).
   A l'arret 4 la case decochee se lisait comme un champ desactive ; a l'arret
   5, cochee, c'etait un carre ambre net. Deux objets sans parente pour un seul
   composant, et la seule piece non dessinee de la page.
   Le dessin reprend au trait pres celui du champ de saisie : meme --contour,
   meme rayon de 2 px, meme fond transparent.

   Ce que l'element reste : un <input type="checkbox">. appearance: none ne
   retire que la peinture du systeme ; la semantique, le clavier (Espace),
   l'etat coche et la liaison au <label for> ne bougent pas. Aucun fichier,
   aucune requete, aucun pseudo-controle en <div role="checkbox">.
   Contrastes mesures : --contour sur --fond 4,12:1, au-dela des 3:1 que
   demande un contour de controle ; la coche est en --fond sur --signal.

   A SIGNALER AU CHEF : la regle appartient a base.css §5 bis, a cote du reste
   du composant. Elle est ici parce que base.css ne m'est pas ouvert et que
   .case-a-cocher ne sert qu'a cette page (deux emplois, arrets 4 et 5, aucun
   dans index.html, merci.html ni 404.html). A remonter, et a retirer d'ici. */
.case-a-cocher input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 7px 0 0;
  background: transparent;
  border: 1px solid var(--contour);
  border-radius: 2px;
  cursor: pointer;
}

.case-a-cocher input:hover { border-color: var(--signal); }

.case-a-cocher input:checked {
  background: var(--signal);
  border-color: var(--signal);
}

/* La coche : deux cotes d'un carre, tournes d'un huitieme de tour. */
.case-a-cocher input:checked::after {
  content: "";
  display: block;
  width: 12px;
  height: 6px;
  margin: 5px 0 0 4px;
  border-left: 1.5px solid var(--fond);
  border-bottom: 1.5px solid var(--fond);
  transform: rotate(-45deg);
}

.case-a-cocher input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.nlpd { margin-top: var(--e8); }
.nlpd a { text-decoration: underline; text-underline-offset: .22em; }
.maquette-mention { margin-top: var(--e24); }

/* ------------------------------------------------- 13. Le recapitulatif */

/* Trois positions, une par largeur (§B.2). base.css ne fixe que la surface. */

/* Sous 768 px : replie dans la barre basse, ouvert au-dessus d'elle. */
@media (max-width: 767px) {
  .recap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-bandeau);
    display: none;
    max-height: 60dvh;
    overflow-y: auto;
    padding: var(--e24) var(--gouttiere-calc-d) var(--e24) var(--gouttiere-calc-g);
    border-radius: 0;
    border-top: 1px solid var(--filet-fort);
  }

  .recap[data-ouvert="1"] { display: block; }
}

/* De 768 a 1079 px : un bloc en fin de formulaire, pleine largeur. */
@media (min-width: 768px) {
  .recap { margin-top: var(--e64); }
}

/* A partir de 1080 px : colonne de droite, collante.

   UN ELEMENT COLLANT PLUS HAUT QUE LA FENETRE NE COLLE PAS. Mesure du 19.09,
   ordinateur 1440 x 900 : le panneau allait de y=152 a y=1214, soit 1 062 px
   dans une fenetre de 900. Une fois pince a top:72, ses 234 derniers pixels
   restaient sous le pli pour toujours : le montant se posait sur le bord bas
   de l'ecran et les quatre reserves du §B.2 n'etaient JAMAIS atteignables.
   D'ou un plafond de hauteur et un defilement propre au panneau. Le chiffre
   72 px est celui du collage ; --e24 laisse respirer le bas.
   overscroll-behavior: contain empeche le defilement du panneau, arrive en
   butee, d'emporter la page derriere lui.
   Le second geste est dans calculateur.html : les trois reserves qui ne
   changent pas d'un arret a l'autre passent sous un <details> ferme. */
@media (min-width: 1080px) {
  .recap {
    grid-column: 2;
    margin-top: 0;
    position: sticky;
    top: 72px;
    max-height: calc(100dvh - 72px - var(--e24));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Le plafond de hauteur rend le panneau atteignable, il ne suffit pas a
     rendre le montant visible. Mesure du 19.09 apres les deux gestes de la
     critique, arrets 1 a 5 avec les donnees de demonstration : panneau 804 px
     de haut pour 990 px de contenu, montant a y=951, c'est-a-dire sous le bord
     bas du panneau. La critique le prevoyait sans le voir : elle annonce
     elle-meme « panneau a environ 942 px ferme », soit 138 px de plus que les
     804 px qu'elle vient de fixer. Deux gestes sur trois, donc.
     Le troisieme : le bloc du total se cale au bas du panneau et les onze
     lignes defilent DESSOUS. Meme fond que le panneau et filet superieur deja
     en place : rien de neuf a l'ecran, le bloc ne quitte simplement plus la
     vue. La marge negative et le retrait bas couvrent les 32 px de retrait du
     panneau, sans quoi une bande de contenu defilerait dans l'interstice.
     Le prix est ce qu'on vient chercher : il ne se merite pas au defilement. */
  .recap-total {
    position: sticky;
    bottom: calc(var(--e32) * -1);
    padding-bottom: var(--e32);
    background: var(--panneau);
  }
}

.recap-montant[data-vide="1"] { color: var(--craie-douce); }

/* Etat vide du panneau (§3.10, composant .etat-vide de base.css §14).
   Avant : le premier ecran du calculateur ouvrait sur « Estimation », un tiret
   isole, puis deux reserves sur un montant qui n'avait pas encore ete calcule.
   La page commencait par expliquer ce qu'un prix inexistant ne comprend pas.
   Les deux reserves reviennent avec le montant, la ou elles ont un sujet :
   c'est le script qui les redonne, aucune phrase nouvelle ailleurs. */
#recap-vide { margin-top: var(--e16); }

/* Le depli du perimetre. Un <summary>, rien d'autre : pas de fond, pas de
   cadre, pas de pictogramme, pas de fleche maison. Le triangle du navigateur
   est retire au profit du meme signe que le reste de la page, un chevron trace
   en deux traits, pour que l'objet ne detonne pas au milieu des notes.
   Le libelle est un peu plus clair que les notes : il les annonce, il n'en est
   pas une. Pas de transition : le contenu d'un <details> ne s'anime pas sans
   script, et personne n'attend qu'il le fasse. */
.recap-portee { margin-top: var(--e12); }

.recap-portee > summary {
  display: flex;
  align-items: center;
  gap: var(--e8);
  min-height: 32px;
  font-size: var(--t-micro);
  color: var(--craie-douce);
  cursor: pointer;
  list-style: none;
}

.recap-portee > summary::-webkit-details-marker { display: none; }

.recap-portee > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.recap-portee[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.recap-portee > summary:hover { color: var(--craie); }

.recap-portee > summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.recap-portee .recap-notes { margin-top: var(--e8); }

/* --------------------------------------------------- 14. La barre basse */

.arret-actions { margin-top: var(--e48); }

/* Sous 768 px : 8 de marge + 20 de bascule + 4 + 52 de bouton = 84 px. */
@media (max-width: 767px) {
  .arret-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bandeau);
    display: grid;
    grid-template-rows: 20px 52px;
    row-gap: var(--e4);
    margin-top: 0;
    height: calc(84px + env(safe-area-inset-bottom, 0px));
    padding: var(--e8) var(--gouttiere-calc-d) env(safe-area-inset-bottom, 0px) var(--gouttiere-calc-g);
    background: var(--fond);
    border-top: 1px solid var(--filet-fort);
  }
}

/* Au-dela de 768 px la bascule n'a plus d'objet : le recapitulatif est dans la
   page, en bloc puis en colonne. Elle s'affichait pourtant.
   Le display: none ci-dessous etait ecrit `.recap-bascule`, soit 0,1,0, et la
   regle de base `.recap-bascule { display: flex }` qui la suit porte la meme
   specificite : declaree APRES, elle gagnait, et le none n'a jamais rien fait.
   Trois consequences mesurees le 19.09 sur 1440 :
     — « 2 170 – 2 770 CHF » ecrit deux fois au meme ecran, en bas a gauche et
       en 32 px dans le panneau de droite ;
     — un chevron orphelin sans libelle, a x=688 sur l'arret 1 ;
     — .recap-bascule porte width: 100% : devenue element flexible de la
       rangee, elle reclamait toute la largeur et comprimait le bouton
       principal a son minimum, 209 px a l'arret 1, 173 px a l'arret 5. Les
       cinq libelles passaient a deux lignes alors que la rangee avait 580 px
       de vide.
   Elle etait en outre inerte : elle bascule data-ouvert sur .recap, qui n'a
   display: none que sous 767 px. Un bouton visible, focalisable, qui annonce
   aria-expanded et ne fait rien.
   `.arret-actions .recap-bascule` vaut 0,2,0 et bat la regle de base.
   Le bouton principal reprend sa largeur naturelle et se cale a droite, sur
   la meme verticale que le titre et « Modifier ». */
@media (min-width: 768px) {
  .arret-actions { display: flex; align-items: center; gap: var(--e16); }
  .arret-actions .recap-bascule { display: none; }
  .arret-actions .bouton { flex: none; margin-left: auto; }
}

.recap-bascule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e8);
  width: 100%;
  height: 20px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--craie-douce);
  font-family: var(--police-texte);
  font-size: var(--t-micro);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Le rond visible fait 20 px de haut : la zone tactile est portee a 44. */
.recap-bascule::after { content: ""; position: absolute; inset: -12px -8px; }

.recap-bascule .picto {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duree-courte) ease-out;
}

.recap-bascule[aria-expanded="true"] .picto { transform: rotate(180deg); }

/* ------------------------------------------------- 15. Mouvement reduit */

/* base.css §16 replie le rail. Ce qui suit replie ce que cette feuille
   ajoute : mediane-affinage.md §4 regle 3, toute retouche porte son repli. */
@media (prefers-reduced-motion: reduce) {
  .onglets-suite { transition: none; }
  .recap-bascule .picto { transition: none; }
}