/* Atelier : base, cadre et en-tête (plan 04). Issu du découpage de editor.css : l'ordre de chargement (les @import de
   editor.css, les <link> de la page du configurateur) est l'ordre de la cascade. */
#mp-config-mirror[hidden]{display:none!important}
.mp-mirror[hidden],.mp-mirror [hidden]{display:none!important}
.mp-mirror{color:var(--ink);background:var(--paper);border:1px solid var(--ink-15);border-radius:var(--atelier-radius-card);overflow:clip;font-family:var(--font-edito-body,system-ui)}
.mp-mirror button{font:inherit;min-height:44px;padding:12px 16px;border:1px solid var(--ink-15);border-radius:var(--atelier-radius-control);background:var(--paper);color:inherit;cursor:pointer}
.mp-mirror button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.mp-mirror button:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover){
 .mp-mirror button:hover:not(:disabled){border-color:var(--ink)}
}
.mp-mirror input[type=range]{width:100%;accent-color:var(--ink);min-height:30px;display:block}
.mp-mirror output{float:right;font-variant-numeric:tabular-nums}
.mp-mirror input[type=checkbox]{min-width:18px;min-height:18px;accent-color:var(--ink)}
.mp-mirror select{display:block;width:100%;min-height:44px;background:transparent;border:1px solid var(--ink-15);margin-top:8px;color:inherit}
.mp-mirror details{border-top:1px solid var(--ink-15);padding-top:12px}
.mp-mirror summary{cursor:pointer;min-height:36px}
@media(max-width:600px){
 .mp-mirror button{padding:8px 12px}
}
.mp-mirror.mp-studio{display:grid;grid-template-columns:minmax(0,1fr) 320px;border-radius:var(--atelier-radius-card);background:var(--atelier-paper);overflow:hidden;min-width:0}
.mp-studio [data-download]{font-size:var(--atelier-text-sm)}
@media(max-width:900px){
 .mp-mirror.mp-studio{grid-template-columns:minmax(0,1fr) 280px}
}
@media(max-width:680px){
 .mp-mirror.mp-studio{display:block}
}
@media(prefers-reduced-motion:reduce){
 .mp-studio *{scroll-behavior:auto!important}
}
/* ===== Atelier direct (page A) : en-tête compact, rail, composition, panneau contextuel ===== */
.mp-mirror.atelier{display:grid;grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - 72px);min-height:560px;border:0;border-top:1px solid var(--atelier-line);border-radius:0;background:var(--atelier-paper);overflow:hidden;grid-template-columns:none}
.atelier-top{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--atelier-paper);border-bottom:1px solid var(--atelier-line);min-height:54px;flex-wrap:wrap}
.atelier .visually-hidden,.atelier-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atelier-back{font-size:var(--atelier-text-sm);color:var(--atelier-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 8px;border-radius:var(--atelier-radius-control)}
@media (hover:hover){
 .atelier-back:hover{text-decoration:underline}
}
.atelier-history{display:flex;align-items:center;gap:2px;margin-left:auto}
.mp-studio .atelier-history button{min-height:40px;padding:8px 12px;background:transparent;border-color:transparent;font-size:var(--atelier-text-sm);display:inline-flex;gap:8px;align-items:center}
.atelier-history button span{font-size:var(--atelier-text-xs)}
.atelier-save{font-size:var(--atelier-text-xs);color:var(--atelier-muted);min-width:88px;padding:0 8px}
.atelier-save.is-saving{color:var(--atelier-muted)}
.atelier-save.is-error{color:var(--atelier-danger);font-weight:600}
.mp-studio .atelier-continue{background:var(--atelier-focus);color:var(--atelier-paper);border-color:var(--atelier-focus);font-weight:600;min-height:44px;padding:8px 16px}
@media (hover:hover){
 .mp-studio .atelier-continue:hover{background:var(--atelier-danger)}
}
.atelier-body{display:grid;grid-template-columns:76px minmax(0,1fr) 330px;min-height:0}
.atelier-rail svg,.atelier-layers svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.mp-studio .atelier-primary{width:100%;background:var(--atelier-ink);color:var(--atelier-paper);border-color:var(--atelier-ink);margin:8px 0 12px;font-size:var(--atelier-text-sm)}
@keyframes atelier-spin{to{transform:rotate(360deg)}}
.atelier-save{display:inline-flex;align-items:center;gap:8px}
.mp-studio .atelier-save button{min-height:30px;padding:2px 8px;font-size:var(--atelier-text-xs);background:transparent;border-color:var(--atelier-line)}
@media(max-width:1100px){
 .atelier-body{grid-template-columns:68px minmax(0,1fr) 290px}
 .atelier-history button span{display:none}
}
@media(max-width:760px){
 .mp-mirror.atelier{height:calc(100dvh - 72px);min-height:520px;grid-template-rows:auto minmax(0,1fr)}
 .atelier-top{padding:4px 8px;gap:8px;min-height:48px}
 .atelier-back{font-size:var(--atelier-text-xs)}
 .atelier-history{margin-left:0;order:3}
 .atelier-continue{order:2;margin-left:auto;padding:8px 12px}
 .atelier-save{min-width:0}
 .atelier-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(300px,1fr) auto auto;min-height:0}
 .mp-studio .atelier-continue{font-size:var(--atelier-text-xs);min-height:40px}
 .mp-studio.atelier .atelier-save button{min-height:36px}
}
@media(max-width:760px) and (max-height:640px){
 .atelier-body{grid-template-rows:minmax(240px,1fr) auto auto}
}
.mp-studio .atelier-continue{background:var(--atelier-ink);border-color:var(--atelier-ink)}
@media (hover:hover){
 .mp-studio .atelier-continue:hover{background:var(--atelier-accent)}
}
/* The page header already offers navigation; cookie preferences stay in the footer. */
body.is-atelier #silktide-cookie-icon{display:none!important}
@media(max-width:760px){
 .atelier-body{grid-template-rows:minmax(220px,1fr) auto auto}
 .atelier-history{order:3}
 .atelier-continue{order:6!important}
 .atelier-top{gap:4px}
 .atelier-back{flex:1}
 .atelier-history{margin-left:0}
 .atelier-save{max-width:150px;font-size:var(--atelier-text-xs)}
}
/* Atelier: quiet controls around the composition, persistent design collection. */
body.is-atelier .site-header{display:none}
body.is-atelier .mp-config-wrap{padding-top:0}
.mp-mirror.atelier{height:calc(100dvh - var(--atelier-cookie-offset,0px));min-height:min(640px,calc(100dvh - var(--atelier-cookie-offset,0px)));color:var(--atelier-ink);background:var(--atelier-paper);font-family:var(--font-edito-body,system-ui)}
.atelier-top{min-height:72px;padding:12px 24px;gap:16px;background:var(--atelier-paper);flex-wrap:nowrap}
.atelier-back{gap:12px;color:var(--atelier-ink);font-size:var(--atelier-text-sm);white-space:nowrap}
.atelier-back strong{font-size:var(--atelier-text-lg);letter-spacing:-.5px}
.atelier-brand-caption{border-left:1px solid var(--atelier-line);padding-left:12px;color:var(--atelier-muted);font-size:var(--atelier-text-xs)}
.atelier-history{margin-left:auto}
.atelier-save{font-size:var(--atelier-text-xs);min-width:0}
.atelier-history button span{display:none}
.atelier-body{grid-template-columns:80px minmax(0,1fr) 310px}
@media(max-width:1150px){
 .atelier-top{gap:12px;padding:8px 12px}
 .atelier-brand-caption{display:none}
 .atelier-body{grid-template-columns:70px minmax(0,1fr) 280px}
 .atelier-save{max-width:95px}
 .atelier-history{gap:0}
}
/* « Ma commande » plus large dès 1 280 px (audit du 08/10, lot 4) : 360 à 400 px, pour que les prénoms se lisent en entier. */
@media(min-width:1280px){
 .atelier-body{grid-template-columns:80px minmax(0,1fr) clamp(360px,26vw,400px)}
}
@media(max-width:760px){
 .mp-mirror.atelier{height:100dvh;min-height:660px}
 .atelier-top{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:8px 12px;min-height:96px}
 .atelier-back{grid-column:1;grid-row:1;min-height:38px;padding:0}
 .atelier-back strong{font-size:var(--atelier-text-md)}
 .atelier-top .atelier-gamme{grid-column:1;grid-row:2}
 .atelier-history{grid-column:2;grid-row:1;justify-content:flex-end;margin:0}
 .atelier-history .atelier-save{display:none}
 .mp-studio .atelier-top .atelier-continue{grid-column:2;grid-row:2;padding:8px 12px;font-size:var(--atelier-text-xs);min-height:38px}
 .atelier-body{grid-template-columns:1fr;grid-template-rows:minmax(300px,1fr) auto auto}
}
/* Saving failures must remain visible when the quiet mobile save label is hidden. */
.atelier-save.is-conflict,.atelier-save.is-unavailable{color:var(--atelier-danger)}
@media(max-width:760px){
 .atelier-history .atelier-save:is(.is-error,.is-conflict,.is-unavailable){display:flex;position:fixed;top:100px;left:8px;right:8px;z-index:20;max-width:none;padding:12px;background:var(--atelier-soft);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);font-size:var(--atelier-text-xs);line-height:1.4}
}
/* Focused controls: product chooser, camera presets and actionable guidance. */
.atelier-logo{width:126px;height:38px;object-fit:contain}
.atelier-back{gap:8px}
.mp-studio .atelier-gamme{position:relative;min-width:170px;border:0;padding:0;margin:0}
.atelier-gamme summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:12px 16px;background:var(--atelier-soft);border-radius:var(--atelier-radius-card);font-size:var(--atelier-text-sm);color:var(--atelier-ink)}
.atelier-gamme summary::-webkit-details-marker{display:none}
.atelier-gamme summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.atelier-gamme[open] summary svg{transform:rotate(180deg)}
@media(max-width:760px){
 .atelier-logo{width:110px;height:30px}
 .atelier-gamme{min-width:0}
 .atelier-gamme summary{padding:8px 0;background:transparent;font-size:var(--atelier-text-xs);min-height:36px}
}
.atelier-logo{width:80px;height:56px;object-fit:contain}
.atelier-top{min-height:80px}
@media(max-width:760px){
 .atelier-logo{width:64px;height:38px}
 .atelier-top{min-height:100px}
/* Keep the workspace inside small screens; scroll the stage when necessary,
   while keeping the tool rail reachable. A zone selector is never help text. */
 .mp-mirror.atelier{min-height:0}
 .atelier-top{grid-template-columns:minmax(0,1fr) auto}
 .mp-studio .atelier-gamme{min-width:0}
 .atelier-gamme summary{gap:8px}
 .atelier-gamme summary>span{min-width:0;overflow-wrap:anywhere}
 .atelier-gamme summary svg{flex-shrink:0}
 .atelier-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto}
}
@media(min-width:761px) and (max-height:640px){
/* A phone in landscape keeps the rail and the primary action in view. */
 .mp-mirror.atelier{min-height:0}
 .atelier-top{min-height:56px;padding-block:4px;flex-wrap:wrap;gap:8px}
 .atelier-top .atelier-save{display:none}
}
/* Help stays beside the composition and never recreates its editing controls. */
.atelier-body{position:relative}
@media(max-width:760px){
/* Phone audit: preserve a usable canvas and generous controls, including short screens. */
 .atelier-top{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 8px;min-height:104px;padding:4px 12px}
 .atelier-top .atelier-back{grid-column:1;grid-row:1;min-height:44px}
 .atelier-top .atelier-history{grid-column:3;grid-row:1}
 .atelier-top .atelier-gamme{grid-column:1;grid-row:2}
 .mp-studio.atelier .atelier-top .atelier-continue{grid-column:2/4;grid-row:2;min-height:44px;font-size:var(--atelier-text-xs);padding:8px 12px}
 .mp-mirror.atelier{height:calc(var(--atelier-viewport-height,100dvh) - var(--atelier-cookie-offset,0px))}
 .mp-mirror.atelier .atelier-top{min-height:0;row-gap:4px;padding:4px 12px;align-items:center}
 .mp-mirror.atelier .atelier-logo{width:56px;height:36px}
}
@media(min-width:561px) and (max-width:760px) and (max-height:500px){
 .mp-mirror.atelier .atelier-top{grid-template-columns:auto minmax(0,1fr) auto auto auto;min-height:0}
 .mp-mirror.atelier .atelier-top .atelier-back{grid-column:1;grid-row:1}
 .mp-mirror.atelier .atelier-top .atelier-gamme{grid-column:2;grid-row:1;justify-self:start}
 .mp-mirror.atelier .atelier-top .atelier-history{grid-column:4;grid-row:1}
 .mp-studio.atelier.mp-mirror .atelier-top .atelier-continue{grid-column:5;grid-row:1}
 .mp-mirror.atelier .atelier-brand-caption{display:none}
/* A reference opened from the cart: « Annuler et revenir à la sélection » takes a second row instead of squeezing the range name. */
 .mp-mirror.atelier .atelier-top .atelier-return-cart{grid-column:1/-1;grid-row:2;justify-self:start}
}
@media(min-width:761px){
/* Le pied occupe sa propre rangée sous la colonne de réglages : il ne recouvre jamais un réglage focalisé (WCAG 2.4.11). */
 .atelier-body{grid-template-rows:minmax(0,1fr) auto}
}
/* ---- R4. La bannière cookies se pose par-dessus l'atelier (décision D6 : son style ne change pas) ----
   L'atelier ne se réduit plus de la hauteur de la bannière : il ne saute plus quand le client répond. La page garde la
   réserve basse de configurator-core.js (padding et scroll-padding) : un contrôle qui prend le focus sous la bannière
   défile au-dessus d'elle. */
.mp-studio.mp-mirror.atelier{height:100dvh;min-height:min(640px,100dvh)}
@media(max-width:760px){
 .mp-studio.mp-mirror.atelier{height:var(--atelier-viewport-height,100dvh);min-height:0}
}
@media(max-height:540px){
/* ---- R4. Écran bas (téléphone à l'horizontale, zoom 200 à 400 %) : la page défile ----
   Sous 540 px de haut, l'atelier n'est plus figé à la hauteur de l'écran : la composition garde une hauteur lisible,
   le panneau prend la hauteur de son contenu, la bande des quantités suit, et la page défile. L'atelier cesse d'être un
   conteneur de taille (feat/autre-boule, téléphone) : une hauteur calculée sur son contenu serait nulle. Ce bloc reste
   le dernier du fichier : à spécificité égale, il l'emporte sur la hauteur du bloc précédent. */
 .mp-studio.mp-mirror.atelier{height:auto;min-height:0;overflow:visible;container-type:normal}
 .mp-studio.mp-mirror.atelier .atelier-body{grid-template-rows:none;grid-auto-rows:auto;min-height:0}
}
@media(max-width:760px){
/* Téléphone (plan 02 : scène en rangée 1, rail en dernier) : scène, feuille d'outil, barre de la commande, rail. */
 .mp-mirror.atelier .atelier-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto}
}
/* « Appliquer à » (plan 03, refonte 3) : en tête des outils d'une boule à plusieurs versions. */
.atelier-scope{display:grid;gap:0;margin:0 0 16px;padding:8px 12px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card)}
.atelier-scope legend{padding:0 4px;font-size:var(--atelier-text-xs);font-weight:600;color:var(--atelier-muted)}
.atelier-scope label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:var(--atelier-text-sm);cursor:pointer}
.atelier-scope input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--atelier-ink)}
.mp-config-reassure-inline{font-size:var(--atelier-text-sm);color:var(--ink-50);line-height:1.5;margin:0}
@media (prefers-reduced-motion: reduce){
 #mp-config-send::after{transition:none}
}
.atelier-return-cart{font:inherit;font-size:var(--atelier-text-xs);background:transparent;border:0;text-decoration:underline;cursor:pointer}
/* Atelier ouvert depuis le parcours (guide-link.mjs, lot D) : « ← Retour au parcours » en tête de l'en-tête, texte et flèche sans cadre au
   repos, comme le lien du logo ; sur téléphone il prend la place du logo (qui ramènerait à la fiche de la gamme). */
#mp-config-mirror .atelier-top .atelier-return-guide{flex:none;display:inline-flex;align-items:center;gap:var(--atelier-space-2);min-height:44px;padding:0 var(--atelier-space-2);border:0;background:transparent;
 font:inherit;font-size:var(--atelier-text-sm);font-weight:600;color:var(--atelier-ink);white-space:nowrap;border-radius:var(--atelier-radius-control);cursor:pointer}
@media(hover:hover){#mp-config-mirror .atelier-top .atelier-return-guide:hover{background:var(--atelier-soft)}}
#mp-config-mirror .atelier-top .atelier-return-guide:focus-visible{background:var(--atelier-soft)}
#mp-config-mirror .atelier-top:has(.atelier-return-guide)>.atelier-back>span[aria-hidden]{display:none}/* une seule flèche de retour : celle du parcours */
@media(max-width:760px){#mp-config-mirror .atelier-top:has(.atelier-return-guide)>.atelier-back{display:none}}
@media(max-width:650px){
 .atelier-return-cart{max-width:115px}
}
/* The review is an atelier step, separate from the order form. */
.is-config-review .mp-config-head{display:none}
#mp-config-mirror .atelier-actions [aria-pressed=true],#mp-config-mirror [data-action=layers-3d][aria-pressed=true]{font-weight:600;text-decoration-thickness:2px}
@media(max-width:760px){
/* Retour à la sélection (P3) : l'en-tête sur ordinateur, le menu Projet sur téléphone ; confirmation flottante sous l'en-tête. */
 .atelier-top>[data-return-cart]{display:none}
}
/* Statut d'enregistrement (F31) : un mot, largeur fixe, l'heure dans l'info-bulle ; l'en-tête ne se recompose plus. */
.mp-mirror.atelier .atelier-save{flex:none;min-width:15ch;white-space:nowrap}
/* F34 (plan 04) : sur téléphone, l'en-tête tient sur une ligne : retour (logo), gamme, menu « ⋯ ». Le menu « Projet »
   devient ce menu et porte Annuler, Rétablir et l'état d'enregistrement (studio-top-menu.mjs) ; une erreur d'enregistrement
   reste affichée sous l'en-tête (règle plus haut). Les boutons de l'en-tête restent dans la page pour les raccourcis clavier.
   Sur ordinateur, rien ne change. */
.atelier-project-more,.atelier-project-sr,.atelier-menu-history,.atelier-menu-save{display:none}
@media(max-width:760px){
 .mp-mirror.atelier .atelier-top{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--atelier-space-2);min-height:0;padding:var(--atelier-space-1) var(--atelier-space-3)}
 .mp-mirror.atelier .atelier-top>.atelier-history{display:contents}
 .atelier-top>.atelier-history>button,.atelier-project-label{display:none}
 .mp-mirror.atelier .atelier-top>.atelier-back{flex:none}
 .mp-mirror.atelier .atelier-top>.atelier-gamme{flex:1 1 auto;min-width:0}
 .atelier-top .atelier-gamme summary>span:not(.visually-hidden){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .atelier-project-more{display:inline-block;line-height:1}
 .atelier-project-sr{display:block}
 .atelier-menu-history{display:flex;gap:var(--atelier-space-2);padding-bottom:var(--atelier-space-2);border-bottom:1px solid var(--atelier-line)}
 .atelier-menu-save{display:grid;gap:var(--atelier-space-1);margin:0;padding:var(--atelier-space-2) var(--atelier-space-3);border-bottom:1px solid var(--atelier-line);font-size:var(--atelier-text-xs);line-height:1.4;color:var(--atelier-muted)}
 .atelier-menu-save strong{color:var(--atelier-ink);font-weight:600}
 /* <small> prend « smaller » du navigateur (10 px sous 12) : la phrase d'enregistrement garde les 12 px du menu. */
 .atelier-menu-save small{font-size:inherit}
 .atelier-menu-save:is(.is-error,.is-conflict,.is-unavailable) strong{color:var(--atelier-danger)}
 .atelier-menu-save:empty{display:none}
}
/* Secondary text actions share the atelier link style. Product choices and primary actions retain their own states. */
#mp-config-mirror :is([data-action=snap],[data-action=outline])[aria-pressed=false]{color:var(--ink-70)}
/* Caractère absent de la police (lot 6a) : sous le champ du texte, la phrase en rouge encre et l'action ; rien au repos. */
.atelier-glyph-note{display:grid;gap:var(--atelier-space-2);justify-items:start;margin:0 0 var(--atelier-space-3);color:var(--atelier-danger);font-size:var(--atelier-text-sm);line-height:1.45}
.atelier-glyph-note p{margin:0}
/* Coque de commande (passe 2, lot A, 08/10 ; critique du 08/10, problème 6). Vérification et commande (body.is-checkout, posée par
   configurator-order.js) : un en-tête minimal à la place du menu du site et du fil d'Ariane (logo, « ← Retour à l'atelier », étapes
   Créer · Vérifier · Payer), un pied réduit aux liens légaux. Il défile avec la page, comme l'en-tête d'un tunnel de commande. L'étape en
   cours : encre en gras, soulignée d'un trait rouge (le trait qui surligne un mot de la charte) ; faites en encre adoucie, à venir plus
   pâles. Le rendu suit la classe de la vérification, sans attendre le module (aria-current posé par checkout-shell.mjs). */
.mp-checkout-head,.mp-checkout-foot{display:none}
body.is-checkout .mp-checkout-head{display:flex;align-items:center;gap:var(--atelier-space-4);min-height:80px;padding:var(--atelier-space-3) 0;border-bottom:1px solid var(--atelier-line)}
.mp-checkout-logo{flex:none;width:96px;height:56px;padding-right:var(--atelier-space-4);border-right:1px solid var(--atelier-line);object-fit:contain}
/* Apparence : famille lien (80-composants.css) ; ici, place et cible de 44 px. */
.mp-checkout-back{display:inline-flex;align-items:center;gap:var(--atelier-space-2);min-height:44px;padding:0 var(--atelier-space-1);white-space:nowrap;cursor:pointer}
.mp-checkout-steps{margin-left:auto}
.mp-checkout-steps ol{display:flex;align-items:center;gap:var(--atelier-space-3);margin:0;padding:0;list-style:none;font-size:var(--atelier-text-md);line-height:1.4;color:var(--atelier-placeholder)}
.mp-checkout-steps li{display:flex;align-items:center;gap:var(--atelier-space-3)}
.mp-checkout-steps li+li::before{content:"";width:16px;height:1px;background:var(--atelier-line)}
.mp-checkout-steps [data-step=atelier],body.is-checkout:not(.is-config-review) .mp-checkout-steps [data-step=verification]{color:var(--atelier-muted)}
body.is-config-review .mp-checkout-steps [data-step=verification],body.is-checkout:not(.is-config-review) .mp-checkout-steps [data-step=commande]{color:var(--atelier-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--atelier-focus);text-decoration-thickness:2px;text-underline-offset:6px}
body.is-checkout .mp-checkout-foot{display:grid;gap:var(--atelier-space-1);margin-top:var(--atelier-space-6);padding:var(--atelier-space-4) 0 var(--atelier-space-6);border-top:1px solid var(--atelier-line)}
.mp-checkout-made{margin:0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--atelier-muted)}
.mp-checkout-legal{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--atelier-space-5)}
.mp-checkout-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--atelier-ink);font-size:var(--atelier-text-md);font-weight:600;text-underline-offset:4px}
@media (hover:hover){
 #mp-screen-order .mp-checkout-legal a:hover:not(#_):not(#__){text-decoration-line:underline}
}
@media(max-width:760px){
 /* Téléphone : logo et retour sur une ligne, les étapes dessous (elles tiennent lieu de surtitre) ; 80 px au lieu des 170 du menu et
    du fil d'Ariane, pour que la boule à vérifier tienne au premier écran. */
 body.is-checkout .mp-checkout-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--atelier-space-3);min-height:0;padding:var(--atelier-space-1) 0 var(--atelier-space-2)}
 .mp-checkout-logo{width:56px;height:36px;padding-right:0;border-right:0}
 .mp-checkout-back{justify-self:end;padding:0}
 .mp-checkout-steps{grid-column:1/-1;margin:0}
 .mp-checkout-steps ol{gap:var(--atelier-space-2);font-size:var(--atelier-text-sm)}
 .mp-checkout-steps li{gap:var(--atelier-space-2)}
 .mp-checkout-steps li+li::before{width:12px}
 body.is-checkout .mp-checkout-foot{margin-top:var(--atelier-space-5)}
 .mp-checkout-legal{column-gap:var(--atelier-space-4)}
}