/* Écran de commande : coordonnées, livraison, récapitulatif et paiement (audit du 08/10, lot 4 : séparé de 50-commande.css,
   qui garde la colonne « Ma commande » de l'atelier). Chargé juste après lui : les règles déplacées gardent leur ordre entre elles,
   et elles ne visent aucun élément de l'atelier. */
.mp-config-contact[hidden]{display:none!important}
.mp-config-ref{font-family:var(--font-edito-body);font-size:var(--atelier-text-md);color:var(--ink)}
.mp-config-model{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--ink-15);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);cursor:pointer;font:inherit;color:var(--ink);transition:border-color 200ms var(--ease-out)}
@media (hover:hover){
 .mp-config-model:hover{border-color:var(--ink-50)}
}
.mp-config-model[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
/* Une colonne alignée sur le titre de l'écran (boules, coordonnées, puis récapitulatif et paiement) jusqu'à 1 099 px ; deux colonnes
   au-delà (bloc « Ordinateur » plus bas). Audit du 08/10, lot 4 : la commande tenait dans une colonne de 360 px à droite, 60 % de
   l'écran vide à gauche. Pas de carte englobante (évite les cartes imbriquées). */
.mp-config{display:flex;flex-direction:column;align-items:stretch;gap:32px;max-width:720px;margin:2.25rem 0 0}
.mp-config-left{position:relative;min-width:0;container-type:inline-size}
.mp-config-fields,.mp-config-pay{display:grid;gap:16px;min-width:0}
/* Formulaire sans cadre (passe 2, 08/10, finitions) : en une colonne, il posait une carte autour des cartes de livraison et du relais choisi
   (carte dans une carte) ; les champs reposent directement sur la page. Dès 1 100 px il est en display:contents (bloc « Ordinateur »). */
.mp-config-contact{position:relative;margin:0;display:grid;gap:16px}
.mp-config-thanks{padding:32px;text-align:center}
.mp-config-formhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mp-config-formerr{color:var(--rouge-ink);font-size:var(--atelier-text-sm);margin:0;padding:8px 12px;background:color-mix(in oklch, var(--rouge) 6%, var(--atelier-paper));border:1px solid color-mix(in oklch, var(--rouge) 28%, transparent);border-radius:var(--atelier-radius-control)}
.mp-config-formerr a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Champs : libellé au-dessus ; l'apparence (encadré) vient du modèle de champ de 80-composants.css. */
.mp-config-contact .mp-config-field{display:flex;flex-direction:column;gap:8px;font-size:var(--atelier-text-sm);font-weight:600;color:var(--ink-70)}
.mp-config-contact .mp-config-input{padding:8px 12px;min-height:44px;font:inherit;width:100%;transition:border-color 200ms var(--ease-out)}
.mp-config-contact textarea.mp-config-input{min-height:64px;resize:vertical}
.mp-config-optional{font-weight:400;color:var(--ink-50)}
/* Récap prix — résumé type devis. */
.mp-config-total{display:grid;gap:8px;margin:2px 0 0;padding:16px 0 0;border-top:1px solid var(--ink-15);font-size:var(--atelier-text-md);color:var(--ink-70)}
.mp-config-total .mp-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mp-config-total .mp-sub{font-size:var(--atelier-text-xs);color:var(--ink-50)}
.mp-config-total .mp-config-destination{margin:0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--rouge-ink)}
.mp-config-total .mp-config-destination a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mp-config-total .mp-grand{margin-top:8px;padding-top:12px;border-top:1px solid var(--ink-15);font-size:var(--atelier-text-xl);font-weight:700;color:var(--ink)}
/* Les lignes de délai (« Expédiée sous une semaine ouvrée », puis la ligne du devis, de l'aperçu ou du logo à recevoir) ont la même taille et le même écart (le premier <p>
   gardait les marges du navigateur et 14 px, la date 13 px). */
.mp-config-total>p{margin:0;font-size:var(--atelier-text-sm);line-height:1.45}
.mp-config-total .mp-config-delivery-date{margin:0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--atelier-ink)}
/* Détail par boule (Robin, 30/09) : ce qu'une case cochée comme « sans cordon » fait gagner, ligne par ligne, avant le
   total agrégé conservé juste en dessous. Une boule reste au niveau du texte, son option (négative ou positive) juste en
   retrait, sans cadre ni fond ajoutés (charte). */
.mp-config-total .mp-config-detail{display:grid;gap:8px}
.mp-config-total .mp-row--boule span:first-child{color:var(--ink-70)}
.mp-config-total .mp-row--option{padding-left:16px;font-size:var(--atelier-text-xs);color:var(--ink-50)}
.mp-config-total details.mp-config-detail>summary{display:block;min-height:44px;padding:4px 0;font-size:var(--atelier-text-sm);font-weight:600;color:var(--ink-70);cursor:pointer}
.mp-config-total details.mp-config-detail[open]>summary{margin-bottom:2px}
.mp-config-gdpr{display:flex;gap:8px;font-size:var(--atelier-text-sm);color:var(--ink-50);line-height:1.4}
.mp-config-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.mp-config-hpwrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* La suite de la commande ferme les coordonnées ; le filet du récapitulatif, juste après, la sépare du total. */
.mp-config-next{margin:4px 0 0;padding:16px 0 0;border-top:1px solid var(--ink-15)}
.mp-config-next>summary{font-size:var(--atelier-text-lg)}
.mp-config-next[open]>summary{margin-bottom:8px}
.mp-config-next ol{margin:0;padding-left:1.2em;display:grid;gap:8px}
.mp-config-next li,.mp-config-next p{margin:0;font-size:var(--atelier-text-md);line-height:1.5;color:var(--ink-70)}
.mp-config-recap{list-style:none;padding:0;margin:16px auto;display:grid;gap:8px;max-width:32rem;text-align:left}
.mp-config-recap li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--ink-15);padding:8px 0}
.mp-config-recap[hidden]{display:none}
/* Focus clavier visible (cohérent avec le reste du site). */
/* scroll-margin-top : un titre de l'écran commande qui reçoit le focus ou l'ancre ne passe pas sous le menu fixe du site (audit du 08/10). */
/* « Votre commande » (passe 3, lot G4) : récapitulatif compact, une ligne par boule (vignette du recto 40 px sans fond, forme et pièces,
   montant, chevron) qui se déplie sur son détail (pièces, cordon chiffré, Modifier, Retirer) ; filets entre les lignes, aucun cadre. */
#mp-reference-cart{display:grid;gap:8px;min-width:0}
#mp-reference-cart .reference-cart-title{margin:0;font-size:var(--atelier-text-lg);line-height:1.3;scroll-margin-top:var(--mp-top-clear,6rem)}
#mp-reference-cart h3{font-size:var(--atelier-text-lg);margin:2px 0 8px}
.reference-cart-add p{color:var(--ink-50);font-size:var(--atelier-text-md)}
.reference-cart-toggle{display:none}
.reference-cart-body{display:grid;gap:8px;min-width:0}
.reference-cart-list{display:grid;border-top:1px solid var(--ink-15)}
.reference-cart-list>p{margin:16px 0;font-size:var(--atelier-text-md);color:var(--ink-70)}
.reference-cart-row{border-bottom:1px solid var(--ink-15)}
#mp-reference-cart .reference-cart-row>details>summary{list-style:none;display:grid;grid-template-columns:40px minmax(0,1fr) auto 12px;align-items:center;column-gap:12px;min-height:56px;padding:8px 0;font-weight:400;cursor:pointer}
.reference-cart-row>details>summary::-webkit-details-marker{display:none}
.reference-cart-row>details>summary::after,.reference-cart-toggle::after{content:'';justify-self:end;width:6px;height:6px;margin-right:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease-out,ease-out)}
.reference-cart-row>details[open]>summary::after,.reference-cart-toggle[aria-expanded=true]::after{transform:translateY(2px) rotate(-135deg)}
@media(prefers-reduced-motion:reduce){.reference-cart-row>details>summary::after,.reference-cart-toggle::after{transition:none}}
.reference-cart-thumb{display:block;width:40px;height:40px;object-fit:contain}
.reference-cart-name{display:grid;gap:2px;min-width:0}
.reference-cart-name strong{font-size:var(--atelier-text-md);font-weight:600;line-height:1.35;color:var(--ink)}
.reference-cart-name small{font-size:var(--atelier-text-sm);font-weight:400;line-height:1.35;color:var(--ink-70);overflow-wrap:anywhere}
.reference-cart-amount{font-size:var(--atelier-text-md);font-weight:600;color:var(--ink);white-space:nowrap}
.reference-cart-detail{display:grid;gap:8px;padding:0 0 12px calc(40px + var(--atelier-space-3))}
.reference-cart-versions{margin:0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--ink-70)}
.reference-cart-version{white-space:nowrap}
.reference-cart-quantity{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:4px}
.reference-cart-quantity label{font-size:var(--atelier-text-sm);font-weight:600;color:var(--ink-70)}
.reference-cart-quantity input{width:80px;min-height:44px;padding:8px;border:1px solid var(--ink-15);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);font:inherit}
/* Total des versions (lecture seule) : la valeur s'aligne sur l'étiquette « Pièces », sans le retrait d'un champ à remplir. */
.reference-cart-quantity input[readonly]{width:auto;min-width:3ch;padding-inline:0}
.reference-cart-quantity small{font-size:var(--atelier-text-xs);color:var(--ink-50)}
.reference-cart-quantity button{flex-basis:100%;justify-self:start;text-align:left}
.reference-cart-actions{display:flex;gap:24px}
/* Option d'une boule (« Sans cordon en lin ») : même case que les cases du formulaire (20 px, cible de 44 px), le montant au bout. */
.reference-cart-options label{display:flex;align-items:flex-start;gap:8px;min-height:44px;font-size:var(--atelier-text-md);line-height:1.4;color:var(--ink-70);cursor:pointer}
.reference-cart-options input{flex:0 0 20px;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.reference-cart-option-amount{margin-left:auto;padding-left:12px;white-space:nowrap;color:var(--ink)}
/* Téléphone et tablette (une colonne) : la commande se replie dans une barre en tête, « Votre commande · 1 boule · 19,80 € ». */
@media(max-width:1099px){
 #mp-reference-cart .reference-cart-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #mp-reference-cart .reference-cart-toggle{display:flex;align-items:center;gap:0;width:100%;min-height:52px;padding:12px 0;border:0;border-bottom:1px solid var(--ink-15);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--atelier-text-md);font-weight:400;text-align:left;cursor:pointer}
 .reference-cart-toggle-title{font-weight:600}
 .reference-cart-toggle-meta{color:var(--ink-70);white-space:pre-wrap}
 .reference-cart-toggle::after{margin-left:auto}
 .reference-cart-body:not(.is-open){display:none}
 .reference-cart-toggle+.reference-cart-body>.reference-cart-list{border-top:0}
}
/* « ?gamme=… » avec une commande en cours (lot 6b) : la question avant « Vos boules », sur le papier foncé de la charte, sans cadre. */
.reference-cart-offer{margin:0 0 24px;padding:16px;border-radius:var(--atelier-radius-card);background:var(--atelier-soft)}
.reference-cart-offer-text{margin:0 0 8px;font-size:var(--atelier-text-lg);line-height:1.45;color:var(--atelier-ink)}
.reference-cart-offer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
.reference-cart-offer-actions .atelier-primary{min-height:44px;padding:8px 16px}
.reference-cart-add{padding:32px 0}
.reference-cart-choices{display:flex;flex-direction:column;gap:0;margin-top:16px}
.reference-cart-choices button{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border:0;border-bottom:1px solid var(--ink-15);background:none;text-align:left;color:var(--ink);cursor:pointer;font:inherit}
@media (hover:hover){
 .reference-cart-choices button:hover strong{color:var(--rouge-ink)}
}
.reference-cart-choices span{font-size:var(--atelier-text-sm);color:var(--ink-50)}
.reference-cart-status:empty{display:none}
@container (max-width:650px){
 .reference-cart-choices button{flex-direction:column;gap:4px}
}
.reference-cart-choices button{justify-content:flex-start;align-items:center}
.reference-cart-choices img{width:64px;height:64px;object-fit:contain}
.reference-cart-choices button>span{display:grid;gap:4px}
.reference-cart-choices strong{font-size:var(--atelier-text-lg);color:var(--ink)}
@container (max-width:650px){
 .reference-cart-choices button{flex-direction:row}
}
.reference-cart-review{min-height:44px;margin:8px 0 16px;padding:12px 16px;border:1px solid var(--ink);border-radius:var(--atelier-radius-control);background:var(--ink);color:var(--paper);font:inherit;font-weight:600;cursor:pointer}
/* Upsell « Votre visuel, sur une autre boule en bois » : après le formulaire (audit du 08/10, lot 3 : plus de carte dans une carte
   entre le panier et le formulaire). Sans cadre ; un titre-lien déplie les cartes (deux côte à côte dès 320 px), la ligne
   « Ajouter une autre boule » reste dessous. */
.mp-config-upsell{min-width:0}
.mp-config-upsell[hidden]{display:none}
.upsell{margin:0;padding:0;border:0;background:none}
.upsell h3{display:inline;font:inherit!important;margin:0!important}
.upsell-cards>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.upsell-cards>summary::-webkit-details-marker{display:none}
.upsell-cards>summary::after{content:'';flex:none;width:6px;height:6px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease-out,ease-out)}
.upsell-cards[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.upsell-cards[open]{padding-bottom:8px}
.upsell-intro{margin:0 0 12px;color:var(--ink-70);font-size:var(--atelier-text-md)}
.upsell-ship{display:inline-block;margin:0 0 16px;padding:4px 12px;border-radius:var(--atelier-radius-round);background:var(--paper-deep);color:var(--rouge-ink);font-size:var(--atelier-text-sm);font-weight:600}
.upsell-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.upsell-card{display:flex;flex-direction:column;gap:4px;padding:0 0 12px;border:1px solid var(--ink-15);border-radius:var(--atelier-radius-card);overflow:hidden;background:var(--paper)}
.upsell-image{position:relative;aspect-ratio:1/1;background:var(--paper-deep)}
.upsell-image img{display:block;width:100%;height:100%;object-fit:contain}
.upsell-wait{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:var(--atelier-radius-card);background:var(--ink);color:var(--paper);font-size:var(--atelier-text-xs)}
.upsell-image.is-ready .upsell-wait{display:none}
.upsell-card h4{margin:8px 12px 0;font-size:var(--atelier-text-lg)}
.upsell-card p{flex-grow:1;margin:0 12px;color:var(--ink-70);font-size:var(--atelier-text-sm)}
.upsell-card button{align-self:flex-start;min-height:44px;margin:8px 12px 0;padding:12px 16px;border:0;border-radius:var(--atelier-radius-card);background:var(--ink);color:var(--paper);font:inherit;font-weight:600;cursor:pointer}
.upsell-card[aria-busy=true] button{opacity:.6;cursor:progress}
.upsell-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:0;font-size:var(--atelier-text-md);color:var(--ink-70)}
.upsell-cards[open]+.upsell-more{margin-top:16px}
.upsell-more span{flex-basis:100%}
.upsell-more button{flex:0 1 calc(50% - 8px);min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.upsell-more small{font-size:inherit;white-space:nowrap}
@media (hover:hover){
 .upsell-more button:hover{color:var(--rouge-ink);text-decoration-thickness:2px}
}
/* Petites cartes (deux côte à côte à 320 px) : le bouton prend la largeur de la carte, sans être rogné. */
.upsell-card{container-type:inline-size}
@container (max-width:180px){
 .upsell-card h4,.upsell-card p{margin-inline:8px}
 .upsell-card button{align-self:stretch;margin:8px 8px 0;padding:12px 4px;font-size:var(--atelier-text-sm)}
}
@media(max-width:400px){
/* Ligne « Ajouter une autre référence » : libellé seul sur sa ligne, puis les liens deux par rangée à toute largeur (jamais un lien
   isolé), chacun avec le minimum de sa gamme (07/10) : voir .upsell-more button. */
 .upsell-grid{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-config[hidden],#mp-config-review[hidden]{display:none}
.mp-config-contact .mp-config-input{font-size:var(--atelier-text-lg);scroll-margin-block:100px}
.mp-config-contact [aria-invalid=true]{border-color:var(--rouge-ink);border-bottom-width:2px}
.mp-config-fieldhint{font-size:var(--atelier-text-sm);font-weight:400;line-height:1.4;color:var(--ink-70)}
.mp-config-fielderr{margin:-12px 0 0;font-size:var(--atelier-text-sm);font-weight:600;line-height:1.4;color:var(--rouge-ink)}
.mp-config-field>.mp-config-fielderr{margin:0}
.mp-config-gdpr{align-items:flex-start;min-height:44px;color:var(--ink-70);cursor:pointer}
.mp-config-gdpr input{flex:0 0 20px;width:20px;height:20px;margin:2px 0;accent-color:var(--ink)}
.mp-config-gdpr span{min-width:0}
/* Une seule case au paiement (08/10) : celle des conditions de vente, avec son lien de lecture dessous (aligné sur le texte de la
   case, 20 px de case et 8 px d'écart) ; puis la mention sur les données, simple information, juste au-dessus du bouton. */
.mp-config-agree{display:grid;gap:0}
.mp-config-agree-link{margin:-8px 0 0 calc(20px + var(--atelier-space-2));font-size:var(--atelier-text-sm);line-height:1.4}
.mp-config-agree-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.mp-config-legal{margin:0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--ink-70)}
/* Réassurance sous « Payer » (passe 3, G4) : cadenas et « Paiement sécurisé par Stripe », les logos officiels des moyens de paiement
   (09/10, en couleurs, 24 px de haut), puis la phrase sur la suite ; centrée sous le bouton, sans cadre. */
.mp-config-pay-secure{display:grid;justify-items:center;gap:8px;text-align:center}
.mp-config-pay-secure[hidden]{display:none}
.mp-config-pay-secure p{margin:0}
.mp-config-pay-secure-head{display:inline-flex;align-items:center;gap:8px;font-size:var(--atelier-text-sm);font-weight:600;line-height:1.4;color:var(--ink-70)}
.mp-config-pay-secure-head svg{flex:none;width:16px;height:16px}
.mp-config-pay-secure-marks{display:flex;align-items:center;justify-content:center;gap:8px}
.mp-config-pay-secure-marks img{display:block;height:24px;width:auto}
.mp-config-pay-secure-note{max-width:44ch;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--ink-70)}
.mp-config-pay>.mp-config-reassure-inline{text-align:center}
/* Resolving the city on blur must not move the checkbox under a pointer. */
#mp-cfg-city-dept{min-height:2.8em;margin:0;line-height:1.4}
#mp-cfg-city-dept[hidden]{display:block;visibility:hidden}
#mp-reference-cart .reference-cart-review{background:transparent;color:var(--ink);border-color:var(--ink-15)}
@media (hover:hover){
 #mp-reference-cart .reference-cart-review:hover{border-color:var(--ink)}
}
.mp-config-cookies{justify-self:start;align-self:start;min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--ink);font:500 var(--atelier-text-md)/1.4 var(--font-edito-body,system-ui);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.mp-config-cookies[hidden]{display:none}
/* Dans le pied de la coque (passe 2, lot A) : sur la ligne des liens légaux, centré comme eux. */
.mp-checkout-legal .mp-config-cookies{align-self:center;display:inline-flex;align-items:center;padding-block:0}
.mp-checkout-legal .mp-config-cookies[hidden]{display:none}
/* Livraison : point relais DPD ou domicile (checkout-delivery.mjs). */
.mp-config-delivery{margin:0;padding:0;border:0;display:grid;gap:8px;min-width:0}
.mp-config-delivery[hidden],.mp-config-home[hidden],.mp-config-relay[hidden],.mp-config-relay-list[hidden],.mp-config-relay-map[hidden],.mp-config-relay-chosen[hidden],#mp-cfg-city-billing[hidden]{display:none}
.mp-config-delivery legend{padding:0;margin:0 0 4px;font-size:var(--atelier-text-sm);font-weight:600;color:var(--ink-70)}
.mp-config-choice{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:12px 12px;border:1px solid var(--ink-15);border-radius:var(--atelier-radius-control);cursor:pointer;font-size:var(--atelier-text-md);color:var(--ink)}
.mp-config-choice:has(input:checked){background:var(--paper-deep);font-weight:600}
.mp-config-choice input,.mp-config-relay-option input{flex:0 0 20px;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.mp-config-choice>span{display:grid;gap:2px}
/* Prix de chaque mode de livraison (passe 3, G4), au bout de l'option ; la ligne de délai, une seule, juste dessous. */
.mp-config-choice>.mp-config-choice-price{display:block;margin-left:auto;padding-left:8px;font-weight:600;white-space:nowrap}
.mp-config-choice>.mp-config-choice-price:empty{display:none}
.mp-config-delivery-delay{margin:0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--ink-70)}
.mp-config-delivery-delay[hidden]{display:none}
.mp-config-formhead--delivery{margin-top:16px}
.mp-config-home{display:grid;gap:16px}
.mp-config-relay{display:grid;gap:12px;min-width:0}
.mp-config-relay-title{margin:0;font-size:var(--atelier-text-sm);font-weight:600;color:var(--ink-70)}
.mp-config-relay-button{justify-self:start;min-height:44px;padding:12px 16px;border:1px solid var(--ink);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);color:var(--ink);font:inherit;font-size:var(--atelier-text-md);font-weight:600;cursor:pointer}
@media (hover:hover){
 .mp-config-relay-button:hover{background:var(--paper-deep)}
}
.mp-config-relay-button[aria-disabled=true]{opacity:.6;cursor:progress}
.mp-config-relay-status{margin:0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--ink-70)}
.mp-config-relay-status:empty{display:none}
.mp-config-relay-map{height:240px;border:1px solid var(--ink-15);border-radius:var(--atelier-radius-control);overflow:hidden;z-index:0}
.mp-config-relay-list{margin:0;padding:0;border:0;min-width:0}
#mp-cfg-relay-options{display:grid;max-height:340px;overflow-y:auto;border-top:1px solid var(--ink-15)}
.mp-config-relay-option{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:12px 4px;border-bottom:1px solid var(--ink-15);cursor:pointer;font-size:var(--atelier-text-md);line-height:1.4;color:var(--ink-70)}
.mp-config-relay-option:has(input:checked){background:var(--paper-deep)}
.mp-config-relay-text{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.mp-config-relay-text strong{color:var(--ink);font-size:var(--atelier-text-md)}
.mp-config-relay-distance{font-size:var(--atelier-text-sm);color:var(--ink-50)}
.mp-config-relay-chosen{padding:12px 16px;border:1px solid var(--ink);border-radius:var(--atelier-radius-control);font-size:var(--atelier-text-md);line-height:1.45;color:var(--ink-70)}
.mp-config-relay-chosen p{margin:0}
/* Relais choisi (08/10, audit du lot 3) : la recherche, la liste et la carte se replient sur la carte « Votre point relais », qui porte
   « Changer » en action de second rang (famille lien, 80-composants.css). Le bouton garde ses 44 px de haut sans agrandir la carte. */
.mp-config-relay-find{display:grid;gap:12px;min-width:0}
.mp-config-relay-find[hidden]{display:none}
.mp-config-relay-chosen-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mp-config-relay-chosen .mp-config-relay-change{flex:none;margin:-8px 0}
.mp-config-relay-chosen-title{font-size:var(--atelier-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
.mp-config-relay-chosen-name{font-weight:700;color:var(--ink)}
.mp-config-relay-chosen-sub{margin-top:8px!important;font-weight:600;color:var(--ink)}
.mp-config-relay-hours{margin:2px 0 0;padding:0;list-style:none;font-size:var(--atelier-text-sm)}
/* Volets repliés (passe 2, lot E) : « Affiner avec votre adresse », « Ajouter un mot sur votre projet », « La suite de votre commande ».
   Un résumé en lien, un chevron qui se retourne à l'ouverture ; rien d'encadré au repos. */
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-config-fold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-config-fold>summary::-webkit-details-marker{display:none}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-config-fold>summary::after{content:'';flex:none;width:6px;height:6px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease-out,ease-out)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-config-fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
@media(prefers-reduced-motion:reduce){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-config-fold>summary::after{transition:none}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-config-fold[hidden]{display:none}
.mp-config-project>.mp-config-field{margin-top:4px}
/* Pli « Une commande pour votre entreprise ? » (passe 3, G4) : la phrase sous le titre, puis les quatre champs, au rythme du formulaire. */
.mp-config-business>.mp-config-fieldhint{margin:4px 0 0}
.mp-config-business>.mp-config-field{margin-top:16px}
/* « Affiner avec votre adresse » : le champ de la rue s'ouvre sous le résumé ; le bloc n'a plus de titre quand le relais est choisi. */
.mp-config-relay-refine>.mp-config-field{margin-top:4px}
.mp-config-relay:has(>.mp-config-relay-chosen:not([hidden]))>.mp-config-relay-title{display:none}
.mp-config-relay-button[hidden]{display:none}
/* Adresse du client : combobox (liste au style du sélecteur de ville), repère sur la carte et légende. */
.mp-config-combobox{position:relative;display:grid}
.mp-config-relay-street .mp-city-list{top:calc(100% + 2px)}
.mp-config-relay-legend[hidden]{display:none}
.mp-config-relay-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin:-4px 0 0;font-size:var(--atelier-text-sm);color:var(--ink-70)}
.mp-config-relay-legend-home,.mp-config-relay-legend-relay{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%}
.mp-config-relay-legend-home{background:var(--ink)}
.mp-config-relay-legend-relay{margin-left:12px;border:2px solid var(--ink);background:var(--atelier-paper)}
.mp-config-relay-home{display:grid;place-items:center;border:2px solid var(--atelier-paper);border-radius:50%;background:var(--ink);color:var(--atelier-paper)}
/* Logo envoyé après la commande (plan 06b) : case et son aide sur l'écran de commande, lien de dépôt du remerciement. */
.mp-config-logo-later{display:grid;gap:var(--atelier-space-1)}
.mp-config-logo-later[hidden]{display:none}
.mp-config-logo-later p{margin:0}
.mp-config-thanks .mp-config-logo-link a{display:inline-flex;align-items:center;min-height:44px}
/* Ordinateur, dès 1 100 px (audit du 08/10, lot 4) : coordonnées et livraison à gauche, en deux colonnes de champs quand ils sont
   courts ; à droite, les boules puis le récapitulatif (total, case des conditions, « Payer … »), collé sous le menu pendant que la
   colonne de gauche défile. Le formulaire garde ses deux groupes (display:contents) : ils se placent dans la grille de la page.
   Sa carte passe au récapitulatif ; les champs, sur toute la largeur de leur colonne, n'en ont plus besoin. */
@media(min-width:1100px){
 .mp-config{display:grid;grid-template-columns:minmax(0,760px) minmax(360px,400px);grid-template-rows:auto 1fr;column-gap:64px;row-gap:24px;align-items:start;max-width:none}
 .mp-config-contact{display:contents}
 .mp-config-left{grid-column:2;grid-row:1}
 .mp-config-fields{grid-column:1;grid-row:1/3;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start}
 .mp-config-fields>*{grid-column:1/-1}
 .mp-config-fields>:is(:has(#mp-cfg-name),:has(#mp-cfg-email),:has(#mp-cfg-phone),.mp-city){grid-column:auto}
 .mp-config-delivery{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
 .mp-config-delivery>p{grid-column:1/-1}
 .mp-config-relay-map{height:320px}
 .mp-config-pay{grid-column:2;grid-row:2;position:sticky;top:var(--mp-top-clear,6rem);padding:24px;background:var(--atelier-paper);border:1px solid var(--ink-15);border-radius:var(--atelier-radius-card)}
 .mp-config-pay>.mp-config-total{margin:0;padding:0;border-top:0}
 /* Les autres modèles restent dans la colonne de gauche, sous le formulaire : sur toute la largeur, la ligne
    « Ajouter une autre boule » débordait de la colonne vers la carte du récapitulatif (relevé du lot 8, 1 440 px). */
 .mp-config-upsell{grid-column:1}
 .mp-config-thanks{grid-column:1/-1}
}
/* Barre « Total · Payer » (passe 2, lot A ; critique du 08/10, problème 1 : sur téléphone, « Payer » était à 4,6 écrans du haut de la
   commande, sans total en vue). Sous 1 100 px, collée au bas de l'écran (au-dessus de la bannière cookies) tant que le bouton du
   formulaire est plus bas ; dès qu'il entre à l'écran, elle s'efface (un seul bouton encre). Boîte de hauteur nulle : elle ne prend
   aucune place dans la page, la barre visible monte au-dessus d'elle. Zone de sécurité de l'iPhone sous le bouton ; effacée pendant la
   saisie sur un écran tactile (le clavier est ouvert) et quand une liste de suggestions est dépliée. Dès 1 100 px, le récapitulatif
   collé de la colonne de droite porte déjà le total et le bouton. */
.mp-config-paybar{display:none}
@media(max-width:1099px){
 .mp-config-paybar:not([hidden]){display:block;position:sticky;bottom:var(--atelier-cookie-offset,0px);z-index:10;height:0;margin-top:calc(-1 * var(--atelier-space-6))}
 .mp-config:has(>#mp-config-contact[hidden]) .mp-config-paybar{display:none}
 .mp-config-paybar-inner{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--atelier-space-3);padding:var(--atelier-space-2) 0 calc(var(--atelier-space-2) + env(safe-area-inset-bottom));border-top:1px solid var(--ink-15);background:var(--paper)}
 .mp-config-paybar.is-away .mp-config-paybar-inner,.mp-config:has([aria-expanded=true]) .mp-config-paybar-inner{visibility:hidden;opacity:0}
 .mp-config-paybar-total{flex:1 1 auto;min-width:0;display:grid;gap:2px;margin:0;font-size:var(--atelier-text-sm);line-height:1.35;color:var(--ink-70)}
 .mp-config-paybar-total strong{font-size:var(--atelier-text-lg);font-weight:700;color:var(--ink)}
 .mp-config-paybar-total strong[hidden]{display:none}
 #mp-screen-order .mp-config-paybar-send{--btn-pad-y:8px;--btn-pad-x:16px;flex:0 0 auto;min-height:48px;max-width:62%;text-align:center}
 /* Un contrôle atteint au clavier, ou ramené par la barre (premier champ à compléter), s'arrête au-dessus d'elle. */
 .mp-config :is(input,select,textarea,button,a,summary,[tabindex]){scroll-margin-bottom:calc(var(--atelier-space-6) * 3 + env(safe-area-inset-bottom))}
}
@media(max-width:1099px) and (max-height:500px){
 /* Téléphone à l'horizontale : comme la barre de la vérification, rien de collé sur un écran si bas ; le bouton du formulaire suffit. */
 .mp-config-paybar:not([hidden]){display:none}
}
@media(max-width:1099px) and (pointer:coarse){
 .mp-config:has(:is(input:not([type=checkbox],[type=radio],[type=hidden]),textarea):focus) .mp-config-paybar-inner{visibility:hidden;opacity:0}
}
@media(max-width:1099px) and (prefers-reduced-motion:no-preference){
 .mp-config-paybar-inner{transition:opacity 200ms var(--ease-out,ease-out),visibility 200ms}
}
/* Commande sur téléphone (passe 2, lot E ; objectif : quatre écrans de 664 px pour une boule) : le surtitre « Dernière étape » laisse la
   place à l'étape que la coque annonce déjà (Créer, Vérifier, Payer), et moins d'air entre les blocs. */
@media(max-width:699px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-screen-order .mp-config-head>.mp-eyebrow{display:none}
 .mp-config{margin-top:16px;gap:24px}
}
/* Lot I (B2) : un contrôle qui prend le focus au clavier défile au-dessus de la barre collée « Continuer » (radio du point relais, « La suite de votre commande »), jamais dessous. */
@media(max-width:1099px){
 html:has(.mp-config-paybar:not([hidden])){scroll-padding-bottom:calc(var(--atelier-cookie-offset,0px) + 6rem + env(safe-area-inset-bottom))}
}