/* =========================================================================
   chargement-d.css — RETOUCHE D de l'arrêt 2 « Le chargement »
   (prototype du 26.10.2026, chantier C, rien publié). Se charge après
   calculateur.css, sur la seule page qui porte le balisage de D.

   Jetons seulement (var(--…)), angles droits, aucune ombre, aucun dégradé,
   aucune transition ni animation. Pas de filet rouge de 3 px : c'est la
   forme de l'erreur (_COMPOSANTS.md §6). Les boutons sont des spm-btn tels
   quels : aucune propriété d'un spm-* n'est redite ici (règle 1).
   ========================================================================= */

/* --- 1. La ligne d'arrivée et « Tout enlever » ----------------------------
   Elle prend la place de « 3 pièces · Modifier » (« Revenir au départ » reste
   juste au-dessus). L'intro de la liste et l'aide grise de la recherche se
   taisent : la ligne et l'exemple du champ disent la même chose, plus court
   (l'aide reste la description du champ pour les lecteurs d'écran). */
#arret-2.d-montre #resume-arret-2,
#arret-2.d-montre #type-intro,
#arret-2.d-montre #aide-recherche { display: none; }

.d-entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--e16);
  margin-top: var(--e12);
}
.d-entete[hidden] { display: none; }
.d-compte {
  margin: 0;
  max-width: none;
  font-size: var(--t-texte);
  line-height: 1.35;
  font-weight: var(--graisse-medium);
  color: var(--texte);
}
/* Au téléphone, la phrase tient sur deux lignes à l'arrivée et sur une après
   « Tout enlever » : la rangée réserve les deux, rien ne bouge d'un pixel
   (ni le bouton, ni la bande dessous ; banc du 26.10 : 1,7 px sans cela). */
@media (max-width: 599px) {
  .d-compte { display: flex; align-items: center; min-height: calc(2em * 1.35); }
}
/* Les deux libellés sont empilés dans la même cellule : la case prend la
   largeur du plus long et ne bouge plus d'un état à l'autre. */
.d-libelles { display: grid; }
.d-libelle { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; }
#d-geste[data-geste="enlever"] .d-libelle[data-pour="enlever"],
#d-geste[data-geste="remettre"] .d-libelle[data-pour="remettre"] { visibility: visible; }

/* --- 2. L'exemple touchable, dans la rangée du champ --------------------
   Au téléphone, il passe à la ligne sous le champ ; dès 768 px, il se pose à
   droite du champ (la rangée est bornée à --mesure-etroite, la colonne a la
   place) : à 1440×900, sous le champ, il tombait au pli. Il se tait dès que
   le champ porte un texte (« Effacer » prend la place) ou qu'une liste est
   ouverte. */
#arret-2.d-actif .recherche-ligne { flex-wrap: wrap; position: relative; }
/* base nulle : le champ ne pousse jamais « Effacer » à la ligne */
#arret-2.d-actif .recherche-ligne .saisie-icone { flex-basis: 0; }
/* le texte du bouton fantôme (marge intérieure de spm-btn--petit) s'aligne
   sur le bord du champ ; la base compte la marge négative, sinon l'exemple
   tiendrait sur la rangée du champ et l'écraserait */
.d-exemple { flex: 1 0 calc(100% + var(--e16)); margin: calc(var(--e4) - var(--e8)) 0 0 calc(-1 * var(--e16)); }
@media (min-width: 768px) {
  .d-exemple {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 0 var(--e8);
    white-space: nowrap;
  }
}
.d-exemple[hidden],
#recherche-effacer:not([hidden]) ~ .d-exemple,
.recherche-collante.est-en-recherche .d-exemple,
#arret-2:has(#voie-objets:checked) .d-exemple { display: none; }

/* Le titre des objets proposés après « Tout enlever » : une ligne hors des
   options, en casse de phrase. */
.d-propositions-titre {
  padding: var(--e8) var(--e12) var(--e4);
  font-size: var(--t-petit);
  line-height: 1.3;
  font-weight: var(--graisse-gras);
  color: var(--texte-secondaire);
  list-style: none;
}

/* --- 3. « Ma liste » rangée par pièce -------------------------------------
   Les objets restent visibles, chacun avec son − / + ; seuls de petits titres
   les séparent (le nom des onglets de « Tous les objets »). */
#type-liste.d-par-piece { border-top: 0; }
.d-piece-titre {
  margin: var(--e24) 0 0;
  padding: 0 0 var(--e8);
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  line-height: 1.3;
  font-weight: var(--graisse-gras);
  letter-spacing: 0;
  color: var(--texte);
  border-bottom: var(--filet-epaisseur) solid var(--filet-fort);
}
.d-piece:first-child .d-piece-titre { margin-top: 0; }

/* --- 4. La bande du camion -------------------------------------------------
   Une seule source pour ses hauteurs (lues aussi par calculateur.js).
   --d-bande-marge : l'espace sous la bande pleine, une fois sa marge fondue
   avec celle de la recherche (18 px à l'ordinateur, 12 au téléphone, comme
   au tour 2 ; voir --d-pousse plus bas). Compacte ou repliée, la bande garde sa place dans la page :
   la marge du bas reprend ce que la hauteur rend, rien ne saute. */
#arret-2.d-actif {
  --d-bande-pleine: 300px;
  --d-bande-compacte: 240px;
  --d-bande-vide: 220px;
  --d-bande-repliee: 36px;
  --d-bande-marge: 18px;
  --d-recadrage-haut: 31px;
  --d-recadrage-bas: 19px;
  --d-pousse: 160px;
}
/* Tour 3 (critique 2, point 1) : dès 1000 px de haut (3440×1330), la bande
   reste pleine en descendant (pleine = compacte : bande3d.js ne la rapetisse
   plus) ; il reste plus de 900 px pour la liste. */
@media (min-width: 600px) and (min-height: 1000px) {
  #arret-2.d-actif { --d-bande-compacte: 300px; --d-bande-vide: 300px; }
}
@media (max-width: 599px) {
  #arret-2.d-actif {
    --d-bande-pleine: 196px;
    --d-bande-compacte: 136px;
    --d-bande-vide: 136px;
    --d-bande-marge: 12px;
    --d-reserve-phrase: 36px;
    --d-recadrage: 8px;
  }
}
/* En bas de l'arrêt, une bande collée s'arrête quand sa MARGE touche le bas
   de l'arrêt. Avec une marge courte, la barre collée dessous (champ et 2
   rangées d'onglets, 157 px) remontait la première et glissait sous la bande
   (tour 3 : 11 px à 1440, 71 px à 3440). La marge du bas est donc allongée
   de --d-pousse, et le haut de la recherche la reprend en marge négative :
   les deux marges se fondent, la page ne bouge pas d'un pixel, et la bande
   part avec la barre. */
#arret-2.d-actif .bande3d { margin-bottom: calc(var(--d-bande-marge) + var(--d-pousse)); }
#arret-2.d-actif .bande3d.d-compacte:not(.sans-webgl):not(.est-repliee) {
  height: var(--d-bande-compacte);
  margin-bottom: calc(var(--d-bande-marge) + var(--d-bande-pleine) - var(--d-bande-compacte) + var(--d-pousse));
}
@media (max-width: 767px) {
  #arret-2.d-actif .bande3d.est-repliee:not(.sans-webgl) {
    height: var(--d-bande-repliee);
    margin-bottom: calc(var(--d-bande-marge) + var(--d-bande-pleine) - var(--d-bande-repliee) + var(--d-pousse));
  }
}
/* compacte, la phrase et les noms de véhicule mordraient sur le dessin ;
   le volume reste dans la barre basse (téléphone) ou le récapitulatif */
#arret-2.d-actif .bande3d.d-compacte .b3-phrase,
#arret-2.d-actif .bande3d.d-compacte .b3-etq { visibility: hidden; }
/* Au téléphone, la bande compacte cadre le camion au plus près (critique 1,
   point 1 : 183×79 px contre 268×118 en production). Sous 600 px, bande3d.js
   (cadrePour) réserve en haut de la scène la place de la phrase, 36 px au
   moins. Compacte, la phrase est retirée (elle était déjà invisible) : la
   réserve tombe à ces 36 px, et la scène, plus haute que la bande de cette
   réserve, se cale en bas. La réserve passe sous le bord haut ; la scène
   déborde encore de 8 px en haut et en bas, pris dans les marges vides du
   cadre (sonde : 15 et 12 px de vide autour du dessin) : le camion retrouve
   la taille de la production. Aucune ligne de bande3d.js ne change ; la
   scène changeant de taille, bande3d.js redessine à la nouvelle (sans
   animation), comme pour toute bande compacte. */
@media (max-width: 599px) {
  #arret-2.d-actif .bande3d.d-compacte:not(.sans-webgl):not(.est-repliee) .bande3d-scene {
    top: auto;
    bottom: calc(-1 * var(--d-recadrage));
    height: calc(var(--d-bande-compacte) + var(--d-reserve-phrase) + 2 * var(--d-recadrage));
  }
  #arret-2.d-actif .bande3d.d-compacte .b3-phrase { display: none; }
}
/* À l'ordinateur peu haut (1440×900), même idée sans réserve de phrase : la
   scène (290 px) dépasse la bande de 31 px en haut et de 19 px en bas, pris
   dans le vide autour des véhicules, plus large au-dessus qu'au-dessous
   (sonde du tour 3 : 38 et 26 px) ; il en reste ~7 px de chaque côté
   (critique 2, point 1 : 362×156 px, production 542×234 ; le banc exige
   ≥ 500 px de large et rien de coupé). */
@media (min-width: 600px) {
  #arret-2.d-actif .bande3d.d-compacte:not(.sans-webgl):not(.est-repliee) .bande3d-scene {
    top: calc(-1 * var(--d-recadrage-haut));
    bottom: auto;
    height: calc(var(--d-bande-compacte) + var(--d-recadrage-haut) + var(--d-recadrage-bas));
  }
}

/* À 0 objet, la bande n'a qu'un fourgon vide à montrer (critique 2, point 2) :
   elle prend --d-bande-vide, SANS marge compensatrice, pour que les objets
   proposés sous le champ montent dans l'écran (60 px au téléphone, 80 px à
   1440×900 : sous 212 px, « Rien de chargé », posé sous le fourgon, serait
   coupé ; inchangé dès 1000 px de haut, où tout est déjà en vue). Le
   bouton est au-dessus : il ne bouge pas. La bande garde cette hauteur tant
   que ces propositions sont ouvertes : un objet ajouté d'un toucher ne fait
   pas descendre la liste sous le doigt. « Rien de chargé » reste dit. */
#arret-2.d-montre:has(#d-geste[data-geste="remettre"]) .bande3d:not(.sans-webgl):not(.est-repliee),
#arret-2.d-montre:has(#propositions:not([hidden]) .d-propositions-titre) .bande3d:not(.sans-webgl):not(.est-repliee) {
  height: var(--d-bande-vide);
  margin-bottom: calc(var(--d-bande-marge) + var(--d-pousse));
}
#arret-2.d-montre:has(#d-geste[data-geste="remettre"]) .bande3d:not(.sans-webgl):not(.est-repliee) .bande3d-scene,
#arret-2.d-montre:has(#propositions:not([hidden]) .d-propositions-titre) .bande3d:not(.sans-webgl):not(.est-repliee) .bande3d-scene {
  top: 0;
  bottom: 0;
  height: auto;
}
#arret-2.d-montre:has(#d-geste[data-geste="remettre"]) .bande3d .b3-phrase,
#arret-2.d-montre:has(#propositions:not([hidden]) .d-propositions-titre) .bande3d .b3-phrase { visibility: visible; }
#arret-2.d-montre:has(#d-geste[data-geste="remettre"]) .bande3d.d-compacte .b3-etq,
#arret-2.d-montre:has(#propositions:not([hidden]) .d-propositions-titre) .bande3d.d-compacte .b3-etq { visibility: visible; }
/* Au téléphone, le fourgon garde sa taille par le même recadrage que la bande
   compacte ; la phrase, dont la réserve passe sous le bord haut, est posée
   à 6 px du bord visible, comme dans la bande pleine. */
@media (max-width: 599px) {
  #arret-2.d-montre:has(#d-geste[data-geste="remettre"]) .bande3d:not(.sans-webgl):not(.est-repliee) .bande3d-scene,
  #arret-2.d-montre:has(#propositions:not([hidden]) .d-propositions-titre) .bande3d:not(.sans-webgl):not(.est-repliee) .bande3d-scene {
    top: auto;
    bottom: calc(-1 * var(--d-recadrage));
    height: calc(var(--d-bande-vide) + var(--d-reserve-phrase) + 2 * var(--d-recadrage));
  }
  #arret-2.d-montre:has(#d-geste[data-geste="remettre"]) .bande3d .b3-phrase,
  #arret-2.d-montre:has(#propositions:not([hidden]) .d-propositions-titre) .bande3d .b3-phrase {
    display: block;
    top: calc(var(--d-reserve-phrase) + var(--d-recadrage) + 6px) !important;
  }
}

/* La barre de recherche colle SOUS la bande au lieu de passer dessous
   (relevé, défauts g.1 et g.3). Le bloc de la recherche s'efface de la mise
   en page (display: contents) : la barre peut alors rester collée pendant
   tout l'arrêt, et dans « Tous les objets » les onglets de pièce restent en
   vue au-dessus des planches. Dans « Ma liste », au repos, elle ne colle pas
   (la liste garde la place) ; pendant une saisie, elle colle comme avant. */
#arret-2.d-actif .recherche-bloc { display: contents; }
#arret-2.d-actif .recherche-bloc > .recherche { margin-top: calc(-1 * var(--d-pousse)); }
#arret-2.d-actif .recherche-collante { top: var(--d-pile, 56px); }
#arret-2.d-actif:has(#voie-logement:checked) .recherche-collante:not(.est-active) { position: relative; top: 0; }

/* --- 5. Les états de D sans le trait rouge de l'erreur ---------------------
   Le trait rouge à gauche est la forme de l'erreur dans la charte
   (_COMPOSANTS.md §6). « Rien de chargé », la ligne repliée et la
   confirmation « … ajoutés à votre déménagement » suivent un geste voulu :
   trait neutre (greffe 3 du jury), même épaisseur, aucun texte ne bouge. */
#arret-2.d-actif .b3-phrase,
#arret-2.d-actif .bande3d-ligne,
#arret-2.d-actif .recherche-confirmation { border-left-color: var(--filet-fort); }

/* --- 6. Finitions des listes ouvertes par D ---------------------------------
   Les « + n » ont une largeur commune (« + 35 » dépassait de 3 px à gauche),
   et la barre au repos ne double plus le filet du bas de la liste. */
#arret-2.d-actif .proposition--objet .proposition-qte { min-width: 56px; }
#arret-2.d-actif .recherche-collante.est-en-recherche:not(.est-active) { border-bottom: 0; }

/* --- 7. Le récapitulatif ne dit plus « Rien à récapituler » sous le logement
   Après « Tout enlever », le volume est nul : la base affiche « Rien à
   récapituler pour l'instant. » au-dessus de « Logement · 3 pièces ». Le
   logement est connu dès que la ligne d'arrivée de D est là : la phrase se
   tait (son texte n'est pas touché). */
body:has(#arret-2.d-montre) #recap-vide { display: none; }
/* Tour 3 (critique 2, point 3) : à 0 objet, « Ce qu'il faut pour ce
   déménagement » n'avait qu'un tiret seul, puis « Dernier changement ·
   inventaire ». Le logement connu, le tiret (data-vide) ne dit plus rien :
   le bloc se tait, même règle, aucun texte touché. */
body:has(#arret-2.d-montre) .recap-total:has(#recap-devis[data-vide]) { display: none; }