/* ==========================================================================
   Tunnel de commande, panier et liste des demandes (FO) — couche mobile.

   Chargé avec media="(max-width: 768px)" — aucun @media ici.

   Scope : #bloc_secondaire est partagé par d'autres pages FO (produit, mon
   compte, vacances...). Le contexte est donc porté par une classe posée sur
   <body> par mobile/tunnel.js — m-ctx-tunnel, m-ctx-cart, m-ctx-orders —
   plutôt que par un :has() sur le contenu. Un :has() qui cesse de matcher
   échoue en silence : toute la mise en page mobile revient au desktop 1000px
   sans la moindre erreur. La classe, elle, se lit dans l'inspecteur.

   Le reflow des tables denses vient de .m-cards (base.css) ; l'habillage du
   panneau de détail vient de .m-panel (base.css).
   ========================================================================== */

/* --- Fluidifier le chrome fixe 1000px, en tunnel / panier / demandes --- */
body.m-ctx-tunnel #bloc_secondaire,
body.m-ctx-cart #bloc_secondaire,
body.m-ctx-orders #bloc_secondaire {
    width: auto;
    max-width: 100%;
    float: none;
    margin: 0;
}

/* --- Tunnel : colonnes empilées (contenu de l'étape, puis récap panier) --- */
#form_tunnel {
    display: block;
}

/* Le contenu d'étape réserve 400px de haut, dimension d'une colonne desktop.
   Les étapes courtes — le mode de livraison n'a qu'une seule option — laissent
   alors près de 300px de vide entre l'option et le récapitulatif, qui donnent
   l'impression que la page s'est arrêtée de charger. */
#commande_etape_contenu {
    min-height: 0;
}

/* Pas de footer dans le tunnel ni dans « Ma sélection ». Ce sont des étapes
   d'engagement : les liens institutionnels (plan du site, mentions légales,
   contact, vie privée) n'y apportent rien et, empilés à une ligne chacun sur
   mobile, ils occupent quatre rangées pleines sous les boutons — soit autant
   de sorties offertes juste après l'action à accomplir. Mesuré sur le grand
   panier : 1 110px de footer sous un panier de deux écrans.
   Ils restent accessibles partout ailleurs sur le site. */
body.m-ctx-tunnel #footer_container,
body.m-ctx-tunnel #footer,
body.m-ctx-cart #footer_container,
body.m-ctx-cart #footer {
    display: none;
}

/* box-sizing indispensable : ces blocs sont en content-box et portent des
   bordures. width:auto leur donne alors la largeur du parent en CONTENU, à
   quoi s'ajoutent les bordures — mesuré 377px pour une zone de 375, soit
   une barre de défilement horizontale sur toute la page. */
.commande_bloc_gauche {
    float: none;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 0 14px;
    box-sizing: border-box;
}

/* --- Barre d'étapes : le bandeau horizontal d'origine est masqué et remplacé
   par un indicateur compact (markup posé par mobile/tunnel.js). --- */
#commande_bandeau_etapes {
    display: none;
}

.m-tunnel-steps {
    display: block;
    padding: var(--m-space-3) 14px;
    background: var(--m-bg);
    border-bottom: 1px solid var(--m-line);
}

.m-tunnel-steps-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--m-space-3);
    width: 100%;
    min-height: var(--m-tap);
    margin: 0 0 var(--m-space-2);
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.m-tunnel-steps-caret {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--m-muted-3);
    border-bottom: 2px solid var(--m-muted-3);
    transform: rotate(45deg);
    transition: transform .2s;
}

.m-tunnel-steps.m-steps-open .m-tunnel-steps-caret {
    transform: rotate(-135deg);
}

/* Liste complète des étapes, dépliée au tap. Les étapes déjà validées
   conservent leur onclick de navigation arrière : c'est ce que l'indicateur
   compact seul faisait perdre par rapport au desktop. */
.m-tunnel-steps-list {
    display: none;
    margin-top: var(--m-space-3);
    border-top: 1px solid var(--m-line);
}

.m-tunnel-steps.m-steps-open .m-tunnel-steps-list {
    display: block;
}

.m-tunnel-steps-list .commande_lien_etape {
    display: flex;
    align-items: center;
    gap: 10px;
    float: none;
    width: auto;
    min-height: var(--m-tap);
    margin: 0;
    padding: 10px var(--m-space-2);
    border-bottom: 1px solid var(--m-line-2);
    font-size: var(--m-fs);
    color: var(--m-ink-2);
    text-align: left;
    white-space: normal;
}

.m-tunnel-steps-list .commande_lien_etape .numero_etape {
    /* Le desktop le pose en position:absolute avec left: 40px pour le caler sur
       la barre horizontale. Absolu = hors du flux, donc pas de participation au
       flex du parent : la pastille flottait au-dessus du libellé au lieu de se
       placer à côté.

       Le décalage est annulé par `left: auto`, et non en comptant sur `static`
       pour le rendre inopérant : le `left: 40px` du desktop reste déclaré, et
       il ressort dès qu'un état repasse la pastille en `relative` — ce que
       fait l'étape validée pour ancrer sa coche. Mesuré avant correction : les
       étapes franchies avaient leur pastille à 48px du bord, par-dessus le
       libellé, les autres à 8px. */
    position: relative;
    left: auto;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--m-line);
    color: var(--m-ink-2);
    font-size: var(--m-fs-sm);
    font-weight: bold;
}

/* Étape déjà franchie : cliquable, donc signalée comme telle */
.m-tunnel-steps-list .commande_lien_etape.validee {
    color: var(--m-ink-2);
    cursor: pointer;
}

/* Étape validée : le desktop y pose une image (etape_validee.png) que la
   couche mobile remplace par un aplat. Restait le bleu marine par défaut, qui
   ne disait rien — et jurait avec le libellé que le legacy colore en vert.
   La maquette montre un cercle vert coché : le chiffre cède la place à la
   coche, dessinée plutôt qu'écrite pour rester nette à toute taille. */
.m-tunnel-steps-list .commande_lien_etape.validee .numero_etape {
    background: var(--m-valid);
    color: transparent;
}

.m-tunnel-steps-list .commande_lien_etape.validee .numero_etape::after {
    content: '';
    position: absolute;
    top: 46%;
    left: 50%;
    width: 5px;
    height: 9px;
    margin: -5px 0 0 -3px;
    border-right: 2px solid var(--m-bg);
    border-bottom: 2px solid var(--m-bg);
    transform: rotate(45deg);
}

.m-tunnel-steps-list .commande_lien_etape.courante {
    color: var(--m-ink);
    font-weight: bold;
}

.m-tunnel-steps-list .commande_lien_etape.courante .numero_etape {
    background: var(--m-brand);
    color: var(--m-bg);
}

.m-tunnel-steps-title {
    font-family: var(--m-font-bold);
    font-weight: bold;
    text-transform: uppercase;
    font-size: var(--m-fs);
    color: var(--m-ink);
}

.m-tunnel-steps-count {
    flex: 0 0 auto;
    font-size: var(--m-fs-sm);
    font-weight: bold;
    color: var(--m-ink-2);
    white-space: nowrap;
}

.m-tunnel-steps-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--m-line);
    overflow: hidden;
}

.m-tunnel-steps-bar > i {
    display: block;
    height: 100%;
    background: var(--m-brand);
}

/* --- Contenu de l'étape --- */
#commande_etape_contenu {
    width: auto;
    max-width: 100%;
    padding: 0 var(--m-space-3);
    box-sizing: border-box;
}

/* Le desktop pose le libellé en colonne de gauche (inline-block ~130px, aligné
   à droite) à côté du champ. En mobile on empile : libellé au-dessus, aligné à
   gauche, pleine largeur, puis champ. */
#commande_etape_contenu .champ_edit {
    display: block;
    width: auto;
    margin: 0 0 var(--m-space-4);
    padding: 0;
    text-align: left;
}

#commande_etape_contenu .champ_edit .label,
#commande_etape_contenu .champ_edit .label.gras {
    display: block;
    float: none;
    width: auto;
    text-align: left;
    padding: 0 0 5px 0;
    font-weight: bold;
    line-height: 1.35;
}

#commande_etape_contenu input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not(.champ_parcourir):not(.input_rib_iban):not(.increasedecreaseinput),
#commande_etape_contenu select,
#commande_etape_contenu textarea {
    /* !important : les dimensions configurées champ par champ en back-office
       sont écrites dans l'attribut style du gabarit, qu'aucune règle de
       feuille ne bat. Elles y restent — ce gabarit est aussi rendu par le
       back-office, sans les feuilles du front, où elles sont la seule source
       de mise en forme. */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    /* Hauteur minimale de cible tactile : le seul rembourrage donnait 38px,
       soit tous les champs du formulaire sous le seuil. */
    min-height: var(--m-tap);
    padding: 9px 10px;
    /* Plusieurs champs arrivent sans bordure (les dates globales notamment) :
       un aplat blanc sur fond blanc ne se lit pas comme une zone saisissable.
       Bordure uniforme sur tous les champs de l'étape. */
    border: 1px solid var(--m-line-field);
    border-radius: var(--m-radius-sm);
    background: var(--m-bg);
}

/* Valeur calculée, pas saisissable : elle doit s'en distinguer. « Montant
   total du séjour » est en readonly mais s'affichait exactement comme les
   champs voisins — fausse affordance, on croit pouvoir le corriger. */
/* --m-muted assumé ici, et c'est le seul cas de texte : la pâleur EST le
   signal d'un champ non saisissable, comme le fond et la bordure qui
   l'accompagnent. Partout ailleurs sur du texte, ce gris tombe sous le seuil
   AA (4.48 pour 4.5) et doit céder la place à --m-ink-2. */
#commande_etape_contenu input[readonly] {
    border-color: var(--m-line-4);
    background: var(--m-bg-alt-2);
    color: var(--m-muted);
}

/* Sauf les dates, qui sont readonly parce que pilotées par un sélecteur de
   calendrier : elles restent des zones d'interaction.

   Les dates GLOBALES en sont exclues. Elles portent le suffixe `_global`
   (`date_debut_global`, `date_fin_global`) et ne s'ouvrent sur aucun
   calendrier : formulaire.phtml:210-241 les REMPLIT en JS, en prenant le
   minimum et le maximum des dates de séjour saisies au-dessus. Le préfixe
   `date_` les attrapait avec les autres et leur rendait l'apparence d'un
   champ actif — la fausse affordance que la règle précédente corrige, à
   l'endroit précis où elle est la plus trompeuse puisque la valeur bouge
   toute seule. */
#commande_etape_contenu input[readonly].calendrier:not([data-cle$="_global"]),
#commande_etape_contenu input[readonly][data-cle^="date_"]:not([data-cle$="_global"]) {
    border-color: var(--m-line-field);
    background: var(--m-bg);
    color: inherit;
}

/* Cases à cocher et radios : case à gauche puis libellé, au lieu du libellé
   empilé au-dessus d'une case orpheline.

   Restreint aux champs qui ne contiennent QUE cette case. Sans les
   exclusions, le champ d'envoi de justificatif — qui embarque un champ
   fichier, un bouton « Parcourir » ET une case « Ne pas télécharger de
   document » — basculait lui aussi en ligne : libellé, champ, bouton et
   case se retrouvaient côte à côte sur 315px, chacun écrasé sur trois
   lignes. */
#commande_etape_contenu .champ_edit:has(input[type=checkbox]):not(:has(input[type=file])):not(:has(input[type=text])):not(.m-optiongroup),
#commande_etape_contenu .champ_edit:has(input[type=radio]):not(:has(input[type=file])):not(:has(input[type=text])):not(.m-optiongroup) {
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: flex-start;
}

#commande_etape_contenu .champ_edit:has(input[type=checkbox]):not(:has(input[type=file])):not(:has(input[type=text])) .label,
#commande_etape_contenu .champ_edit:has(input[type=radio]):not(:has(input[type=file])):not(:has(input[type=text])) .label {
    order: 2;
    padding: 0;
    font-weight: normal;
}

/* Envoi d'un justificatif : le champ visible, le bouton « Parcourir » et
   l'option « Ne pas télécharger de document » s'empilent, chacun pleine
   largeur et à hauteur tapable. Le glisser-déposer de filedrop.js étant
   inopérant au tactile, ce sont ces trois éléments qui portent tout
   l'usage sur mobile. */
/* Champ et bouton solidaires, sur une seule ligne, comme la maquette : le
   nom du fichier à gauche, « Parcourir » à droite, dans la même boîte.
   Séparés, le bouton se lisait comme un élément désactivé posé sous le
   champ — alors que c'est l'action centrale de cet écran. */
#commande_etape_contenu .champ_edit .champ_parcourir {
    /* Base NULLE et non `auto` : avec une base automatique, le calcul retombe
       sur la largeur propre du champ, qui remplit alors la rangée et renvoie
       le bouton à la ligne suivante. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    min-height: var(--m-tap);
    margin: 0;
    border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm);
    border-right: 0;
}

/* Orange plein plutôt que texte orange sur bordure gris clair : le contraste
   d'origine (#FF910C sur blanc, bordure #ccc) donnait un bouton d'apparence
   désactivée. */
#commande_etape_contenu .champ_edit .bouton_parcourir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-space-2);
    flex: 0 0 auto;
    min-height: var(--m-tap);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--m-warn);
    border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
    background: var(--m-warn);
    color: var(--m-bg);
    font-weight: bold;
    white-space: nowrap;
}

/* Le libellé « Parcourir » est un nœud texte du <div>, l'icône une <img> :
   on aligne les deux et on blanchit l'icône pour qu'elle tienne sur
   l'aplat orange. */
#commande_etape_contenu .champ_edit .bouton_parcourir .btn_browse {
    filter: brightness(0) invert(1);
}

/* Le champ et son bouton forment une seule rangée */
#commande_etape_contenu .champ_edit:has(.champ_parcourir) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

#commande_etape_contenu .champ_edit:has(.champ_parcourir) > .label,
#commande_etape_contenu .champ_edit:has(.champ_parcourir) > .option_sans_justificatif {
    flex: 1 0 100%;
}

#commande_etape_contenu .champ_edit:has(.champ_parcourir) > .option_sans_justificatif {
    margin-top: var(--m-space-2);
}

/* --------------------------------------------------------------------------
   Onglets répétables (« Vos prestations 1 », « Vos justificatifs 1 »)

   L'onglet d'ajout ne contient qu'un pictogramme ⊕ de 25px, sans libellé :
   rien n'indique ce qu'il fait ni qu'il est cliquable. La maquette, elle,
   propose des actions nommées — « Ajouter une prestation + » et
   « + Ajouter un justificatif ».

   On garde le markup du socle (le JS s'accroche à .ajout_onglet) et on lui
   ajoute son libellé en CSS, à partir du contexte : le contenu générique
   convient aux deux niveaux d'onglets, la nuance venant du bloc parent.
   -------------------------------------------------------------------------- */
#commande_etape_contenu .onglet_champ_visu.ajout_onglet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0 !important;
    min-height: var(--m-tap);
    padding: 0 14px;
    border-radius: var(--m-radius-sm) var(--m-radius-sm) 0 0;
    color: var(--m-warn);
    font-weight: bold;
    font-size: var(--m-fs);
    white-space: nowrap;
}

#commande_etape_contenu .onglet_champ_visu.ajout_onglet::after {
    content: 'Ajouter';
}

#commande_etape_contenu .onglet_champ_visu {
    min-height: var(--m-tap);
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: var(--m-fs);
}

/* Un onglet au repos doit rester lisible : le gris très pâle d'origine se lit
   comme un élément désactivé.

   Au repos SEULEMENT : posée sur tous les onglets, cette couleur d'encre
   l'emportait (sélecteur d'id) sur celles que la page pose elle-même — le
   texte blanc de l'onglet actif sur la couleur du thème, le rouge d'un
   document refusé, la couleur saisie dans le style d'un champ Fichier —, et
   laissait un texte sombre sur un fond coloré. */
#commande_etape_contenu .onglet_champ_visu:not(.selected):not(:hover):not(.refused):not(.erreur_onglet):not(.ajout_onglet) {
    color: var(--m-ink);
}

#commande_etape_contenu .conteneur_onglet_titre_champ_visu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-space-1);
}

#commande_etape_contenu .champ_edit .usurpation_mode_whithout_file {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 var(--m-space-2) 0 0;
}

/* `display: inline` faisait de ce libellé un bloc anonyme dans la rangée
   flex : sa boîte prenait bien les 44px de cible, mais le texte se posait
   tout en haut — mesuré, la phrase à y=581 pour une case à y=593, l'une
   visiblement décrochée de l'autre. Il s'aligne comme les autres libellés
   d'option. */
#commande_etape_contenu .champ_edit .usurpation_mode_whithout_file + label {
    display: inline-flex;
    align-items: center;
    text-align: left;
}

/* L'option « Ne pas télécharger » est centrée en desktop ; empilée sur
   petit écran, elle revient à gauche, alignée avec le reste du champ. */
#commande_etape_contenu .champ_edit .option_sans_justificatif {
    /* !important pour la même raison : le gabarit porte `display: block` et
       `text-align: center` en attribut style, seuls repères de mise en forme
       côté back-office. */
    display: flex !important;
    align-items: center;
    width: 100%;
    text-align: left !important;
}

/* Pas d'`order` ici : cette règle s'applique à TOUTES les cases du tunnel, y
   compris celles d'autres conteneurs flex. Sur l'option « Ne pas télécharger
   de document », un order:1 générique renvoyait la case après son libellé.
   Le réordonnancement appartient au seul cas qui le demande, ci-dessous. */
#commande_etape_contenu .champ_edit input[type=checkbox],
#commande_etape_contenu .champ_edit input[type=radio] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* Champ « case + libellé » seul : la case passe devant le libellé, qui la
   suit dans le DOM. */
#commande_etape_contenu .champ_edit:has(input[type=checkbox]):not(:has(input[type=file])):not(:has(input[type=text])):not(.m-optiongroup) input[type=checkbox],
#commande_etape_contenu .champ_edit:has(input[type=radio]):not(:has(input[type=file])):not(:has(input[type=text])):not(.m-optiongroup) input[type=radio] {
    order: 1;
}

/* --- Boutons de navigation ---
   La géométrie vient de .m-actions / .m-action (base.css), déclarées dans
   index.phtml et footer.phtml. Il ne reste ici que ce qui est propre au
   tunnel : la hiérarchie entre reculer et avancer, et le chevron. */
.commande_liens_navigation {
    padding: var(--m-space-3);
}

/* Libellés d'un seul tenant. « Étape précédente » se coupait en deux dans un
   bouton de 44px de haut — mesuré : 2 lignes pour 153px de large — ce qui
   donne l'impression d'un bouton cassé. Les deux libellés tiennent côte à
   côte sur 390px une fois insécables. */
.commande_liens_navigation .m-action {
    white-space: nowrap;
}

/* Hiérarchie des deux actions : elles étaient strictement identiques — même
   orange plein, même couleur, même graisse — donc rien n'indiquait laquelle
   fait avancer. Le retour passe en contour, l'action principale reste pleine. */
#commande_etape_precedente.commande_etape_precedente {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--m-warn);
    flex: 0 1 auto;
}

#commande_etape_suivante.commande_etape_suivante,
#commande_paiement.commande_etape_suivante,
#commande_subvention.commande_etape_suivante {
    font-weight: bold;
    flex: 1 1 auto;
}


/* Les flèches sont des <div> de 30x30 en image de fond, rendus À CÔTÉ du
   bouton et non dedans (footer.phtml). Sur la rangée flex mobile, elles
   deviennent des éléments frères : on voyait un gros triangle orange
   détaché, débordant à gauche du bouton. La maquette, elle, intègre le
   chevron au bouton.

   On masque donc les <div> d'origine et on dessine le chevron en CSS dans
   le bouton, du bon côté selon le sens. */
.commande_liens_navigation .fleche_tunnel {
    display: none;
}

.commande_liens_navigation .commande_etape_precedente::before,
.commande_liens_navigation .commande_etape_suivante::after {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.commande_liens_navigation .commande_etape_precedente::before {
    transform: rotate(-135deg);
}

.commande_liens_navigation .commande_etape_suivante::after {
    transform: rotate(45deg);
}

/* --- Écran de confirmation : actions de fin de parcours ------------------
   « Ajouter un commentaire » et « Retour à la page d'accueil » sont deux
   inline-block dimensionnés à leur texte, dans deux parents différents : l'un
   se retrouvait à 12px du bord, l'autre à 121px, pour des largeurs de 201 et
   208px et une hauteur de 30. Rien ne les rattachait visuellement l'un à
   l'autre alors que ce sont les deux seules actions de l'écran.

   Leur fond vient d'un <style> du gabarit alimenté par la couleur du CSE : on
   ne touche qu'à la géométrie, la couleur reste celle que le client configure.

   Cette géométrie vient de .m-action (base.css), déclarée dans
   recapitulatif.phtml. Ces deux boutons n'ont pas de conteneur commun et ne
   peuvent pas en recevoir un sans déplacer du DOM : c'est le cas que la classe
   d'action couvre seule, sans rangée.

   Ne restent ici que la marge entre eux et l'annulation d'un décalage : le
   desktop pose `#bouton_retour_accueil { position:relative; left:30%;
   margin-top:75px }`, un centrage à la main calibré sur sa colonne. L'id est
   donc indispensable dans le sélecteur — une classe perd contre un id quelle
   que soit sa place dans la cascade, et sans lui le bouton reste décalé de
   109px et déborde de l'écran une fois élargi.
   -------------------------------------------------------------------------- */
#commande_etape_contenu .lien_navigation.commande_bouton,
#commande_etape_contenu #bouton_retour_accueil.commande_bouton {
    left: 0;
    margin: var(--m-space-3) 0 0;
}

/* --- Colonne droite : sidebar discrète en desktop, elle prenait trop de place
   une fois empilée et « Abandonner le panier » ressortait autant que l'action
   principale. Devient une carte compacte : « Votre choix » en accordéon replié
   (montant remonté dans l'en-tête par le JS) et abandon démoté en lien. --- */
/* L'id est indispensable dans le sélecteur : cet élément porte à la fois la
   classe .commande_bloc_droit et l'id #bloc_droite, or le desktop le
   dimensionne par l'id (float:right, width:268px). Une classe perd contre un
   id quelle que soit sa place dans la cascade — mesuré : le récapitulatif
   restait à 240px, tronqué, au lieu de prendre la largeur de l'écran. */
#bloc_droite.commande_bloc_droit,
.commande_bloc_droit {
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--m-line-5);
    border-radius: var(--m-radius);
    overflow: hidden;
    background: var(--m-bg);
}

.commande_bloc_droit #div_commande_timer {
    order: 0;
}

.commande_bloc_droit #div_commande_timer:empty {
    display: none;
}

.commande_bloc_droit .commande_nom_bloc {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    padding: 13px 14px;
    background: var(--m-bg-alt-2);
    font-family: var(--m-font-bold);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--m-ink);
}

.commande_bloc_droit .commande_nom_bloc .m-recap-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.commande_bloc_droit .commande_nom_bloc .m-recap-amount {
    font-weight: bold;
    color: var(--m-brand);
}

.commande_bloc_droit .commande_nom_bloc .m-recap-caret {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--m-muted-3);
    border-bottom: 2px solid var(--m-muted-3);
    transform: rotate(45deg);
    transition: transform .2s;
    flex: 0 0 auto;
}

.commande_bloc_droit.m-recap-open .commande_nom_bloc .m-recap-caret {
    transform: rotate(-135deg);
}

.commande_bloc_droit #commande_produit_desc {
    order: 2;
    display: none;
    padding: 10px var(--m-space-3);
}

.commande_bloc_droit.m-recap-open #commande_produit_desc {
    display: block;
}

/* --------------------------------------------------------------------------
   « Votre choix » DANS LE TUNNEL — alignement sur la maquette

   La maquette ne montre pas d'accordéon ici : le bloc est déplié, la carte est
   un encadré gris clair posé sous un simple intitulé, et « Abandonner le
   panier » est un bouton gris pleine largeur placé AVANT — ce qui est déjà son
   ordre dans le DOM.

   L'accordéon et la démotion en lien restent en revanche sur la page panier :
   ils répondaient au retour client de PEG-4721 sur l'encombrement de cette
   colonne, retour qui portait sur cette page-là et non sur le tunnel.
   -------------------------------------------------------------------------- */
body.m-ctx-tunnel .commande_bloc_droit {
    gap: var(--m-space-3);
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

/* Descendue sous les boutons d'étape, la carte n'a plus rien qui la sépare
   d'eux : mesuré 1px entre le bas de « Étape suivante » et le haut de « Votre
   choix ». Le `gap` n'y peut rien — il espace les enfants de cette carte, pas
   la carte de son frère.

   L'id est repris pour la même raison que plus haut : la règle qui pose
   `margin: 0` sur ce bloc est une liste dont une branche porte `#bloc_droite`,
   et un id bat une classe quelle que soit sa place dans la cascade. Sans lui
   la marge était écrite, calculée à 0, et l'écart restait à 1px. */
body.m-ctx-tunnel #bloc_droite.commande_bloc_droit,
body.m-ctx-tunnel .commande_bloc_droit {
    margin: var(--m-space-4) 0 0;
}

/* Plus rien dans le panier : la colonne n'a plus rien à dire. L'état est posé
   par mobile/tunnel.js, seule la mesure du contenu permettant de trancher.

   L'id est repris parce que la règle qui donne son `display` à ce bloc est une
   LISTE dont une branche porte `#bloc_droite` : dans une liste, chaque
   sélecteur compte pour sa propre spécificité, et c'est celle-là qui gagnait. */
body.m-ctx-tunnel #bloc_droite.commande_bloc_droit.m-recap-vide,
body.m-ctx-tunnel .commande_bloc_droit.m-recap-vide {
    display: none;
}

/* L'ORDRE de la colonne, une fois descendue sous les boutons d'étape, tel que
   le client l'a demandé : « Votre choix » et son panier d'abord, puis le
   compte à rebours, puis l'abandon.

   Le gabarit les écrit dans l'ordre inverse — timer, abandon, « Votre choix »,
   panier. C'est précisément ce que `order` sait faire, et la raison pour
   laquelle mobile/tunnel.js descend le CONTENEUR plutôt que ses éléments : sur
   des frères d'un même flex, l'ordre visuel ne coûte que ces quatre nombres.

   Ils sont posés sur `body.m-ctx-tunnel` seul, sans `#form_tunnel` : hors du
   tunnel — page panier — la carte garde l'ordre du gabarit et son accordéon. */
body.m-ctx-tunnel .commande_bloc_droit #div_commande_timer {
    order: 2;
}

body.m-ctx-tunnel .commande_bloc_droit #delete_cart_tunnel {
    order: 3;
}

/* Le compte à rebours annonce une échéance, pas une action : fond neutre et
   texte lisible, sans le contraste de l'abandon qu'il précède.

   `border: 0` est nécessaire : panier.css et cart.css lui donnent un contour
   orange de 2px, que le gabarit repeint en bleu dans un <style> inline
   (index.phtml:67). C'est l'habillage de sa carte dans la colonne de droite —
   posé sous les boutons d'étape, ce contour le fait lire comme un champ de
   saisie à côté du bouton d'abandon.

   Le sélecteur reste autonome, sans son parent : la règle ne coûte rien de
   plus ainsi, et elle survivrait à un nouveau déplacement. */
body.m-ctx-tunnel #div_commande_timer {
    margin: 0 var(--m-space-3) var(--m-space-2);
    padding: var(--m-space-2) var(--m-space-4);
    border: 0;
    border-radius: var(--m-radius-sm);
    background: var(--m-bg-alt-2);
    color: var(--m-ink);
    font-size: var(--m-fs-field);
    text-align: center;
}

body.m-ctx-tunnel #div_commande_timer:empty {
    display: none;
}

/* L'id se suffit à lui-même, sans le `.commande_bloc_droit` où le gabarit le
   déclare : mobile/tunnel.js le sort de cette carte pour le poser en fin de
   formulaire, sous les boutons d'étape. Un sélecteur qui nomme le parent
   d'origine cesserait de matcher à l'instant précis du déplacement, et
   l'action retomberait sur le rendu du bureau. */
body.m-ctx-tunnel #delete_cart_tunnel {
    margin: 0 var(--m-space-3) var(--m-space-3);
    padding: 0 var(--m-space-4);
    border: 0;
    border-radius: var(--m-radius-sm);
    /* Le libellé est blanc : --m-muted-2 ne donnait que 3.54 pour 1, et --m-muted
       4.48 — mesurés tous deux à l'écran. L'action reste volontairement en
       retrait, mais elle doit se lire. */
    background: var(--m-muted-contrast);
    color: var(--m-bg);
    font-size: var(--m-fs-field);
    text-decoration: none;
}

/* Le titre s'aligne sur les blocs qu'il annonce. Le `padding: 0` d'origine le
   collait au bord de l'écran — mesuré à 1px quand le panier, le compte à
   rebours et l'abandon sont tous à 11-13px — et la première lettre touchait
   le bord. Le retrait vertical reste nul : c'est un intitulé, pas un bandeau,
   et le `gap` de la carte l'espace déjà de ce qui suit. */
body.m-ctx-tunnel .commande_bloc_droit .commande_nom_bloc {
    order: 0;
    padding: 0 var(--m-space-3);
    background: transparent;
    cursor: default;
    font-size: var(--m-fs-sm);
}

body.m-ctx-tunnel .commande_bloc_droit #commande_produit_desc {
    order: 1;
    display: block;
    padding: var(--m-space-3) var(--m-space-4);
    border: 1px solid var(--m-line-5);
    border-radius: var(--m-radius-sm);
    background: var(--m-bg-alt-2);
}

/* Le nom du rayon est un bandeau ardoise à texte blanc dans le legacy. Sur
   « Ma sélection » la maquette le conserve — c'est là un repère entre
   plusieurs rayons — mais dans le récapitulatif du tunnel, qui n'en montre
   qu'un, elle le rend en simple texte gras sur la carte. */
body.m-ctx-tunnel .commande_bloc_droit .little_cart_align_line_offre {
    padding: 0 0 var(--m-space-2);
    background: transparent;
    color: var(--m-ink);
    font-weight: bold;
}

/* Contenu de « Votre choix ».

   Rendu d'origine : gris #666 sur gris #eee, 13px, tassé, avec une colonne de
   quantite et deux colonnes vides — c'est ce qu'on lit au moment de valider
   son engagement. La maquette montre une carte nette : nom du produit
   lisible, détail dessous, montant aligné à droite. */
.commande_bloc_droit #commande_produit_desc {
    background: var(--m-bg);
}

/* Le petit panier du tunnel et celui du panneau de la tabbar sont le MEME
   composant : ils doivent partager leur échelle, sinon la sélection change de
   taille selon l'écran d'où on la regarde. */
.commande_bloc_droit #little_cart_details_table {
    width: 100%;
    background: transparent;
    font-size: var(--m-fs);
    color: var(--m-ink-2);
}

.commande_bloc_droit #little_cart_details_table .little_cart_details_product_name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: bold;
    color: var(--m-ink);
    line-height: 1.35;
}

/* La quantité RESTE visible. Elle avait été masquée ici au motif qu'elle
   « n'a pas de valeur pour une ligne unique » — généralisation faite depuis
   une offre de subvention où elle valait toujours 1. Sur une billetterie elle
   vaut 10, et c'est elle qui explique le montant : 10 x 4,68 = 46,80 €.
   Masquer une donnée sur mobile alors que le desktop l'affiche, c'est
   justement l'écart qu'on s'interdit.

   Elle se dimensionne à son contenu et se colle au libellé plutôt que
   d'occuper la colonne de 10% du desktop. */
.commande_bloc_droit #little_cart_details_table .little_cart_details_quantity {
    /* `width: 1%` disait « la plus petite largeur possible » à l'algorithme de
       tableau. Les rangées étant devenues des lignes flex, il se lit désormais
       comme une base de 3px que le retrait comprime : mesuré, 9px de cellule
       pour 16px de contenu — le « × » se coupait. */
    flex: 0 0 auto;
    width: auto;
    padding-right: 6px;
    color: var(--m-ink);
    font-weight: bold;
    white-space: nowrap;
}

/* --m-muted assumé : le signe multiplié n'est pas du texte à lire mais une
   ponctuation entre la quantité et le libellé. Il doit s'effacer derrière les
   deux nombres qu'il relie. */
.commande_bloc_droit #little_cart_details_table .little_cart_details_quantity::after {
    content: ' \00d7';
    color: var(--m-muted);
    font-weight: normal;
}

/* Les cellules réellement vides, elles, ne font que rogner la largeur. */
.commande_bloc_droit #little_cart_details_table td:empty {
    display: none;
}

.commande_bloc_droit #little_cart_details_table .little_cart_align_right {
    text-align: right;
    white-space: nowrap;
    font-weight: bold;
}

.commande_bloc_droit #little_cart_details_table td {
    padding: 4px 0;
    vertical-align: top;
}

/* La table sort du modèle de tableau.

   Passer la seule LIGNE de détail en bloc ne suffisait pas : la table restant
   `display: table`, l'algorithme de colonnes continue de gouverner, et une
   cellule en bloc n'obtient jamais plus que la largeur que cet algorithme a
   calculée pour sa colonne. Mesuré : 70px pour le détail d'une subvention,
   dans une table de 319 — « Prestation : » n'y tenait pas, et le libellé se
   coupait en deux avec son deux-points seul en tête de ligne.

   Les rangées deviennent donc des lignes flex : la quantité et le libellé
   restent côte à côte, le montant se cale à droite, et la cellule de détail
   prend la largeur entière. */
.commande_bloc_droit #little_cart_details_table,
.commande_bloc_droit #little_cart_details_table > tbody {
    display: block;
    width: 100%;
}

.commande_bloc_droit #little_cart_details_table > tbody > tr {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    width: 100%;
}

.commande_bloc_droit #little_cart_details_table .little_cart_align_right {
    margin-left: auto;
}

.commande_bloc_droit #little_cart_details_table .little_cart_declination_tr td:nth-child(2) {
    flex: 1 1 100%;
}

.commande_bloc_droit #little_cart_details_table .little_cart_declination_tr td:not(:nth-child(2)) {
    display: none;
}

.commande_bloc_droit #little_cart_details_table .little_cart_declination_tr td:nth-child(2) {
    padding: 2px 0 0;
    color: var(--m-ink-2);
    line-height: 1.5;
}

.commande_bloc_droit #delete_cart_tunnel {
    order: 3;
    background: transparent;
    color: var(--m-danger);
    border: 0;
    border-top: 1px solid var(--m-line);
    width: auto;
    padding: var(--m-space-3);
    text-align: center;
    font-size: var(--m-fs-sm);
    text-decoration: underline;
    cursor: pointer;
}

/* Ligne des totaux mise en avant (spécifique au récapitulatif) */
table.m-cards tr.ligne_totaux {
    border: 2px solid var(--m-brand);
}

/* ==========================================================================
   Page « Mes demandes » (/commande/mescommandes).
   Jamais passée en responsive : #bloc_secondaire (1000px) forçait la page
   entière à 1000px sur un écran de 390. Conséquence signalée par le client :
   « la barre de menu est absente, ça empêche de naviguer » — la tabbar est
   bien rendue, mais un élément position:fixed se cale sur le layout viewport ;
   dès qu'on défile horizontalement, elle sort du champ.
   ========================================================================== */
#header_commande,
#choixAnnee,
.liste_commandes {
    width: auto;
    max-width: 100%;
    float: none;
    box-sizing: border-box;
}

#choixAnnee {
    position: static;
    float: none;
    width: auto;
    /* Le conteneur se dimensionnait au contenu (136px, calé à droite) malgré
       width:auto, position statique et aucun float — cause non élucidée côté
       legacy. min-width force le remplissage. C'est un contournement assumé,
       pas une explication. */
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px var(--m-space-3);
}

#choixAnnee .onglet {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
    padding: 0 14px;
    margin: 0;
    box-sizing: border-box;
}

#header_commande {
    padding: 10px var(--m-space-3);
}

.liste_commandes {
    padding: 0 var(--m-space-3);
}

/* Garde-fou : la liste imbrique des tables sur 3 niveaux (108 au total).
   Plutôt que de traiter chaque classe, on borne toute table de cette page —
   sans quoi la plus profonde réimpose sa largeur intrinsèque, fait déborder
   la page et chasse la tabbar hors du champ au défilement horizontal. */
body.m-ctx-orders #bloc_secondaire table {
    max-width: 100%;
}

body.m-ctx-orders #bloc_secondaire td,
body.m-ctx-orders #bloc_secondaire th {
    word-break: break-word;
}

/* Boutons d'action de la liste. Malgré son nom, `.payer` est la classe
   GÉNÉRIQUE de toutes les actions de ligne (LineOrder/view.phtml) : payer,
   annuler, refuser, renseigner un RIB, justificatif de retour, délégation...
   et plusieurs peuvent cohabiter sur une même commande. En desktop ce sont de
   petites pastilles de 58x38 pensées pour une colonne étroite.
   Couleurs reprises de CETTE page (tons chauds) et non de la charte globale.
   Par défaut en contour : une commande peut proposer « Annuler » ou
   « Refuser », qui ne doivent pas crier comme une action principale ; seules
   les actions de paiement passent en plein. */
body.m-ctx-orders .payer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-space-2);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--m-tap);
    margin: 0;
    padding: 10px var(--m-space-4);
    border: 1px solid var(--m-warm-line);
    border-radius: var(--m-radius-sm);
    background-color: var(--m-bg);
    color: var(--m-warm-ink);
    font-weight: bold;
    font-size: var(--m-fs);
    line-height: 1.25;
    text-align: center;
}

body.m-ctx-orders .payer + .payer {
    margin-top: var(--m-space-2);
}

/* « Détails » (posé par mobile/tunnel.js). Il emprunte le gabarit des actions
   de ligne, comme demandé, mais il ne touche pas à la commande : il ouvre une
   lecture. D'où le contour seul et un libellé en poids normal, qui le range
   visuellement derrière « Annuler » et « Payer » sans le distinguer par la
   forme. */
body.m-ctx-orders .payer.m-detail-action {
    cursor: pointer;
    font-weight: normal;
}

body.m-ctx-orders .payer.continue_payment_order_js,
body.m-ctx-orders .payer.complete_order_js,
body.m-ctx-orders .payer.refund_payment_order_js {
    border-color: var(--m-navy);
    background-color: var(--m-navy);
    color: var(--m-bg);
}

/* Le pictogramme est en float:left en desktop */
body.m-ctx-orders .payer .img_payer {
    float: none;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* Même rendu au survol : le hover tactile reste collé après le tap */
body.m-ctx-orders .payer:hover {
    background-color: var(--m-bg);
    color: var(--m-warm-ink);
}

body.m-ctx-orders .payer.continue_payment_order_js:hover,
body.m-ctx-orders .payer.complete_order_js:hover,
body.m-ctx-orders .payer.refund_payment_order_js:hover {
    background-color: var(--m-navy);
    color: var(--m-bg);
}

/* ==========================================================================
   Détail d'une commande en plein écran.
   En desktop, cliquer une commande déplie la ligne de détail sous elle ; sur
   mobile ce dépliage inline est illisible (tables imbriquées sur 3 niveaux).
   L'habillage vient de .m-panel ; il ne reste ici que la neutralisation du
   reflow en cartes.
   ========================================================================== */

/* Dans le panneau, le détail garde sa forme de TABLEAU : le reflow en cartes
   doit y être neutralisé, sinon les cellules passent en blocs et l'on perd la
   correspondance colonne/valeur — les en-têtes du détail vivent dans une table
   `table_head` distincte de ses données `table_product`, impossible de les
   corréler cellule par cellule. La table défile horizontalement DANS son
   conteneur, sans jamais faire déborder la page. */
#m-order-detail .m-panel-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Le contenu cloné provient d'une cellule de table : remise en flux normal */
#m-order-detail .m-panel-body > td {
    display: block;
    width: auto;
    padding: 0;
}

/* Le détail sort de la grille de table : chaque ligne devient un bloc large
   de l'écran. C'est ce qui supprime le défilement — et il fallait le faire
   pour TOUTES les lignes, pas seulement celles qu'on sait libeller : une
   seule ligne laissée en `table-row` avec son `nowrap` impose sa largeur à
   toute la table, donc aux cartes elles-mêmes, qui débordaient malgré leur
   mise en blocs. */
#m-order-detail table,
#m-order-detail thead,
#m-order-detail tbody,
#m-order-detail tr {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

#m-order-detail th,
#m-order-detail td {
    display: block;
    width: auto;
    border-bottom: 0;
    padding: var(--m-space-1) 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

#m-order-detail td::before {
    content: none;
}

#m-order-detail td.m-empty {
    display: block;
}

/* Rien à afficher : ni valeur, ni contrôle. */
#m-order-detail tr.m-detail-vide,
#m-order-detail td.m-empty:empty {
    display: none;
}

/* Ligne sans libellé connu — l'historique de paiement. Ses cellules
   s'alignent en une phrase plutôt qu'en pile : « 09/08/2026 · Ventes en
   ligne · Encaissement · Validé · 28.80 € » se lit d'un trait, là où six
   blocs empilés feraient six lignes pour une seule information. */
#m-order-detail tr.m-detail-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--m-space-1) var(--m-space-3);
    padding: var(--m-space-2) var(--m-space-3);
    border-bottom: 1px solid var(--m-line);
}

#m-order-detail tr.m-detail-ligne > td {
    width: auto;
    padding: 0;
}

#m-order-detail tr.m-detail-ligne > td:empty {
    display: none;
}

/* Série de lignes sous un même titre : UN cadre, pas une pile. `m-cards`
   encadre chaque `tr` séparément — sous « Livraison », le mode, le lien de
   téléchargement et le bouton de renvoi se présentaient en trois cartes alors
   qu'ils parlent de la même chose. Les bornes sont posées par
   mobile/tunnel.js, qui seul sait où une série commence et finit. */
#m-order-detail tr.m-detail-ligne {
    margin: 0;
    border: 1px solid var(--m-line-5);
    border-top-width: 0;
    border-radius: 0;
    background: var(--m-bg);
}

#m-order-detail tr.m-detail-groupe-debut {
    border-top-width: 1px;
    border-top-left-radius: var(--m-radius-sm);
    border-top-right-radius: var(--m-radius-sm);
}

#m-order-detail tr.m-detail-groupe-fin {
    margin-bottom: var(--m-space-3);
    border-bottom-left-radius: var(--m-radius-sm);
    border-bottom-right-radius: var(--m-radius-sm);
}

/* Séparateur entre deux blocs d'un même groupe — sauf sur le premier, qui n'a
   rien au-dessus de lui. Le trait est plus clair que le cadre : il sépare
   sans découper. */
#m-order-detail tr.m-detail-ligne + tr.m-detail-ligne:not(.m-detail-groupe-debut),
#m-order-detail tr.m-detail-carte + tr.m-detail-carte:not(.m-detail-groupe-debut),
#m-order-detail tr.m-detail-carte + tr.m-detail-ligne:not(.m-detail-groupe-debut),
#m-order-detail tr.m-detail-ligne + tr.m-detail-carte:not(.m-detail-groupe-debut) {
    border-top: 1px solid var(--m-line);
}

/* --- Lignes libellées par mobile/tunnel.js -------------------------------
   Seules les lignes dont CHAQUE cellule a été appariée à son en-tête par sa
   classe sortent de la table pour s'empiler. Les règles ci-dessus restent la
   norme : ce qui n'a pas été libellé garde sa table et son défilement, parce
   qu'un libellé deviné vaut moins qu'un libellé absent. */
/* Le cadre appartient au GROUPE, pas à la carte : c'est la série de blocs
   qui se suivent sous un même titre qui forme l'unité visuelle. Les bornes
   sont posées plus bas, à partir des marques laissées par mobile/tunnel.js. */
#m-order-detail tr.m-detail-carte {
    display: block;
    margin: 0;
    border: 1px solid var(--m-line-5);
    border-top-width: 0;
    border-radius: 0;
    overflow: hidden;
}

#m-order-detail tr.m-detail-carte > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--m-space-3);
    width: auto;
    padding: var(--m-space-2) var(--m-space-3);
    /* nowrap est la règle de la table qui défile ; une carte, elle, a le
       droit de faire retour à la ligne — c'est tout l'intérêt. */
    white-space: normal;
    /* `!important` parce que le legacy en pose un : commande.css déclare
       `.table_product td { text-align: center !important }`. Aucune
       spécificité ne le bat — seul un `!important` répond à un `!important`.
       Centrée, la valeur flottait au milieu de la carte au lieu de faire
       colonne avec les autres. */
    text-align: right !important;
}

#m-order-detail tr.m-detail-carte > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    color: var(--m-muted-contrast);
    font-size: var(--m-fs-sm);
    text-align: left;
}

#m-order-detail tr.m-detail-carte > td:last-child {
    border-bottom: 0;
}

/* Cellule sans valeur : le libellé seul n'apprend rien. */
#m-order-detail tr.m-detail-carte > td.m-detail-vide {
    display: none;
}

/* La couleur de l'univers ENTOURE le bloc produit, au lieu de le coiffer d'un
   filet. C'est ce qui le distingue au premier coup d'oeil des blocs de détail
   qui le suivent — déclinaison, paiement, livraison — tous encadrés de gris.
   La teinte est relevée dans le DOM par mobile/tunnel.js (le gabarit la pose
   en style inline, elle change d'un produit à l'autre) et arrive ici en
   `--m-univers`. Le repli sur la couleur de trait vaut pour un produit dont
   l'univers n'en déclare pas. */
#m-order-detail tr.m-detail-carte.m-detail-univers {
    border-color: var(--m-univers, var(--m-line-5));
    border-width: 2px;
}

/* L'aplat lui-même n'a plus rien à montrer, la couleur étant passée au cadre.
   Le gabarit lui réserve pourtant la hauteur d'une colonne desktop — 98px
   mesurés pour un rectangle vide, le tiers de la carte donné à rien. */
#m-order-detail tr.m-detail-carte > td.m-detail-vignette {
    display: none;
}

/* Conteneur dont tout le contenu a été masqué (la cellule du thead qui ne
   portait que la table d'en-têtes, reprise dans les libellés). Vidée, elle
   gardait son fond de bandeau : une barre sombre en tête de panneau, sans
   texte, que rien n'expliquait. */
#m-order-detail .m-detail-conteneur-vide {
    display: none;
}

/* Ce que le bureau ne montre pas dans un détail ouvert par sa référence — le
   formulaire de délégation, qui a son propre bouton. Marqué par
   mobile/tunnel.js, qui rejoue ici l'état que commande.js pose au clic. */
#m-order-detail .m-detail-hors-detail {
    display: none !important;
}

/* L'en-tête a été reporté dans chaque cellule : le garder le répéterait. */
#m-order-detail .m-detail-entete-masquee {
    display: none;
}

/* Bandeaux « Historique de paiement », « Livraison » : des titres, pas des
   lignes de données. */
#m-order-detail tr.m-detail-section {
    display: block;
    margin: var(--m-space-4) 0 var(--m-space-2);
}

#m-order-detail tr.m-detail-section > td {
    display: block;
    width: auto;
    border-bottom: 0;
    padding: 0;
    white-space: normal;
    font-family: var(--m-font-bold);
    font-weight: bold;
    font-size: var(--m-fs-sm);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cibles tactiles des cases et boutons radio

   Mesuré sur l'étape « mode de remboursement » : les seules cibles à 44px
   étaient les trois boutons de navigation. Les contrôles qu'il faut
   RÉELLEMENT viser pour avancer — trois radios à 13px, la case de
   confirmation bancaire à 20px — étaient tous en dessous.

   On agrandit la case elle-même et surtout on transforme son libellé en zone
   tapable de pleine hauteur : c'est lui qui offre la surface, la case seule
   ne peut pas atteindre 44px sans devenir disgracieuse.
   -------------------------------------------------------------------------- */
#commande_etape_contenu input[type=radio],
#commande_etape_contenu input[type=checkbox] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

#commande_etape_contenu input[type=radio] + label,
#commande_etape_contenu input[type=checkbox] + label {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
    padding-left: 8px;
    line-height: 1.35;
    cursor: pointer;
}

/* Certaines options n'ont pas de <label> du tout dans le socle : leur libellé
   est un nœud de texte posé après la case. tunnel-steps.js les enveloppe dans
   un `label.m-option` — englobant et non `for=`, les options d'un même groupe
   de formulaire partageant leur id. La règle ci-dessus vise `input + label` et
   ne les couvre donc pas ; c'est ici qu'elles prennent leur cible. */
#commande_etape_contenu .m-option {
    display: flex;
    align-items: center;
    gap: var(--m-space-2);
    min-height: var(--m-tap);
    line-height: 1.35;
    cursor: pointer;
}

/* Un groupe de choix s'empile : deux options côte à côte dans 327px hachent
   leurs libellés — mesuré sur « Nature du justificatif », « Votre facture
   nominative acquittée » et « Vos billets » se partageaient la ligne en
   quatre morceaux. Le champ est marqué par tunnel-steps.js, qui seul peut
   compter les options, et sort de la mise en ligne des cases uniques
   déclarée plus haut. Son libellé redevient un titre au-dessus, là où la
   case unique le place après. */
#commande_etape_contenu .champ_edit.m-optiongroup {
    display: block;
}

#commande_etape_contenu .champ_edit.m-optiongroup > .label {
    order: 0;
    padding: 0 0 var(--m-space-1);
    font-weight: bold;
}

/* Le select doit lui aussi se viser confortablement */
#commande_etape_contenu select {
    min-height: var(--m-tap);
}

/* --------------------------------------------------------------------------
   « Ma sélection » — bandeaux d'offre et de catalogue

   Le socle les rend avec 5px de rembourrage et un texte de 13px non gras :
   deux filets de 22px l'un sur l'autre, serrés pour du tactile. La maquette
   les montre nettement plus aérés, l'offre en gras au-dessus du catalogue.

   Traité ici et non dans bigcart.css : cette feuille sert aussi le desktop,
   que le client n'a pas demandé de modifier.
   -------------------------------------------------------------------------- */
body.m-ctx-cart .big_cart_align_line_offre,
body.m-ctx-cart .big_cart_align_line_catalogue {
    padding: var(--m-space-3) var(--m-space-4);
    line-height: 1.35;
}

body.m-ctx-cart .big_cart_align_line_offre {
    font-family: var(--m-font-bold);
    font-weight: bold;
    font-size: var(--m-fs);
}

body.m-ctx-cart .big_cart_align_line_catalogue {
    font-size: var(--m-fs-sm);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   « Ma sélection » — ligne d'en-tête d'un choix (offres à souhaits)

   Servi : le libellé « Choix n°1 » est en `position: absolute` avec un
   `margin-left: -120px`, qui le tire dans la gouttière gauche du desktop.
   Cette gouttière n'existe pas en mobile : le libellé atterrissait à x=-98,
   hors de l'écran. Les cinq choix étaient donc anonymes, réduits à un triangle
   de repli et un montant — impossible de savoir lequel on supprime.

   Le prix et la croix sont par ailleurs flottants à droite. On rassemble le
   tout dans une rangée : libellé à gauche, montant puis suppression à droite.
   -------------------------------------------------------------------------- */
body.m-ctx-cart .big_cart_align_line_product {
    display: flex;
    align-items: center;
    gap: var(--m-space-2);
    min-height: var(--m-tap);
    padding: 0 var(--m-space-2);
    box-sizing: border-box;
}

body.m-ctx-cart .big_cart_align_line_product .show_choice {
    position: static;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 var(--m-space-2);
    border-radius: var(--m-radius-sm);
    white-space: nowrap;
}

/* Flèches de réordonnancement à côté du libellé : le glisser-déposer jQuery UI
   ne répond pas au tactile, c'est le seul moyen de changer l'ordre en mobile.
   Le desktop les place en absolu sous le libellé, dans sa gouttière ; ici
   elles suivent « Choix n°X » sur la même ligne, à la taille d'un doigt. */
body.m-ctx-cart .big_cart_align_line_product .show_choice_group {
    display: flex;
    align-items: center;
    gap: var(--m-space-2);
    flex: 0 0 auto;
}

body.m-ctx-cart .big_cart_align_line_product .choice_move_buttons {
    position: static;
    width: auto;
    margin: 0;
    gap: var(--m-space-2);
}

body.m-ctx-cart .big_cart_align_line_product .choice_move {
    min-width: var(--m-tap);
    height: var(--m-tap);
    border-radius: var(--m-radius-sm);
    font-size: var(--m-fs-sm);
    line-height: 1;
}

/* Le triangle de repli mesure 16x14px : au doigt, le tap tombe à côté et
   « ne fait rien ». On garde le pictogramme et on élargit la cible. */
body.m-ctx-cart .big_cart_align_line_product .showProduct {
    flex: 0 0 auto;
    width: var(--m-tap);
    height: var(--m-tap);
    background-repeat: no-repeat;
    background-position: center;
}

body.m-ctx-cart #big_cart_details_affectation .choice-draggable {
    min-height: 0;
}

/* Le nom du produit prend la place restante, le montant se cale à droite. */
body.m-ctx-cart .big_cart_align_line_product .product_name {
    flex: 1 1 auto;
    min-width: 0;
}

/* Le montant précède la suppression, comme la maquette : dans le DOM la croix
   vient d'abord, parce qu'elle flottait à droite et s'empilait donc en sens
   inverse. Rétablir la lecture naturelle — ce que je choisis, ce qu'il coûte,
   puis le moyen de le retirer — évite aussi d'offrir la croix sur le chemin
   du regard vers le prix. */
body.m-ctx-cart .big_cart_align_line_product .price_by_product {
    float: none;
    flex: 0 0 auto;
    order: 1;
    margin-left: auto;
    font-weight: bold;
}

body.m-ctx-cart .big_cart_align_line_product .big_cart_details_delete {
    float: none;
    flex: 0 0 auto;
    order: 2;
}

/* « Ma sélection » (bigCart) : les actions de fin de panier sont traitées par
   la primitive .m-actions / .m-action (base.css), déclarée dans big_cart.phtml.
   Il ne reste ici que le tableau qui les porte, à sortir de sa mise en page
   de tableau — 186px centrés en dur — pour que la rangée puisse s'exprimer. */
body.m-ctx-cart #footer_big_cart_table,
body.m-ctx-cart #footer_big_cart_table > tbody {
    display: block;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Étape « participants »

   Le bloc porte `style="width: 200px"` en attribut inline sur
   [data-bind_participant_div] : une colonne de bureau, posée là où le
   desktop dispose les choix côte à côte. Mesuré à 375px de large utile, le
   dégât n'est pas cosmétique — le compteur d'extérieurs occupe 190 des
   200px, ses deux commandes n'ont plus de place sur la ligne et se
   dispersent, l'une à droite du libellé (x=155), l'autre sous le champ
   (y=521), chacune réduite à 9x18px. Le stepper n'était plus un stepper.

   La colonne libérée, le panneau des extérieurs (nom, prénom, date de
   naissance) retrouve lui aussi sa largeur : il tenait dans 135px.
   -------------------------------------------------------------------------- */
#commande_etape_contenu [data-bind_participant_div] {
    width: auto !important;
}

#commande_etape_contenu .participantSubDiv {
    width: auto;
}

/* Le libellé de la liste prend l'échelon de titre de section, comme
   « VOTRE CHOIX » sur les autres étapes. */
#commande_etape_contenu .titre_liste_beneficiaire_produit {
    padding-bottom: var(--m-space-2);
    font-size: var(--m-fs);
}

/* --------------------------------------------------------------------------
   Compteur d'extérieurs

   Les deux commandes sont des <div> à background-image (left_arrow.png /
   right_arrow.png, 9x18, images distinctes — pas un sprite, donc les
   recentrer est sans danger). On les rassemble en rangée et on leur donne
   la cible tactile du reste de la couche : la flèche reste petite, la zone
   qui l'entoure ne l'est plus.
   -------------------------------------------------------------------------- */
/* La rangée qui porte le compteur : libellé puis commandes sur une ligne.
   Sans elle, le libellé et le stepper sont deux éléments en ligne dont les
   lignes de base ne s'accordent pas — mesuré, « Extérieur(s) » tombait 20px
   plus bas que les commandes qu'il annonce. */
#commande_etape_contenu [data-bind_participant]:has(.quantityDiv) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--m-space-2);
}

#commande_etape_contenu [data-bind_participant] > [data-bind_exterieur_panel] {
    flex: 1 0 100%;
}

#commande_etape_contenu .quantityDiv {
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-2);
}

#commande_etape_contenu .quantityDiv .increasedecrease {
    width: var(--m-tap);
    height: var(--m-tap);
    flex: 0 0 auto;
    border: 1px solid var(--m-line-4);
    border-radius: var(--m-radius-sm);
    background-position: center;
    background-repeat: no-repeat;
}

/* Un compteur affiche un ou deux chiffres : lui laisser la largeur d'un
   champ de saisie le faisait passer pour une zone de texte libre, et surtout
   poussait la commande « + » hors de l'écran.

   Il est donc retiré de la règle générique des champs, plus haut, par la même
   exclusion que .champ_parcourir et .input_rib_iban — un champ dont la
   largeur ne doit pas suivre celle du formulaire. En contrepartie, il doit
   redéclarer ici l'habillage que cette règle lui donnait. */
#commande_etape_contenu .quantityDiv .increasedecreaseinput {
    width: 72px;
    flex: 0 0 auto;
    min-height: var(--m-tap);
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid var(--m-line-field);
    border-radius: var(--m-radius-sm);
    background: var(--m-bg);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Panneau des participants extérieurs

   Nom, prénom et date de naissance sont posés à `width: 80%` en inline,
   avec un doublon en position absolue qui simule le placeholder — les deux
   doivent garder la même largeur, sans quoi le faux placeholder se décale
   du champ qu'il habille.
   -------------------------------------------------------------------------- */
#commande_etape_contenu .attribut_user_exterieur input[type="text"],
#commande_etape_contenu .attribut_user_exterieur .div_simule_place_holder {
    width: 100% !important;
    box-sizing: border-box;
}

/* Le socle enferme ces trois champs dans un filet noir en pointillés, sans
   arrondi — une convention de formulaire d'administration, seule de son
   espèce dans le tunnel. Elle prend ici la carte utilisée partout ailleurs
   pour grouper des champs qui vont ensemble. */
#commande_etape_contenu .attribut_user_exterieur {
    padding: var(--m-space-3);
    border: 1px solid var(--m-line-4);
    border-radius: var(--m-radius);
    background: var(--m-bg);
}