/* Mamorine : bandeau, offre de bienvenue, caisse, commande, pages de service et console. */

.visuellement-cache,.piege{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- bandeau d'offres ---------- */
.bandeau{position:relative;background:var(--marque);color:var(--os);font-size:12.5px;letter-spacing:.02em;height:36px;overflow:hidden}
.bandeau-piste{position:relative;height:100%;max-width:var(--col);margin-inline:auto}
.bandeau-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 44px;
  text-align:center;text-decoration:none;color:inherit;font-weight:500;opacity:0;transform:translateY(100%);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.bandeau-msg.actif{opacity:1;transform:none}
.bandeau-msg.sort{opacity:0;transform:translateY(-100%)}
.bandeau-msg:hover{text-decoration:underline;text-underline-offset:3px}
.bandeau-suivant{position:absolute;right:max(10px,calc((100vw - var(--col)) / 2));top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:grid;place-items:center;background:none;border:0;color:var(--os);opacity:.7;cursor:pointer}
.bandeau-suivant:hover,.bandeau-suivant:focus-visible{opacity:1}
@media(max-width:620px){.bandeau{font-size:12px}.bandeau-msg{padding:0 38px 0 14px}}

/* ---------- messages ---------- */
.message{margin:18px 0;padding:13px 16px;font-size:14.5px;border-left:3px solid var(--vert);background:var(--os-2)}
.message--erreur{border-left-color:var(--terre);background:var(--terre-clair)}

/* ---------- offre de bienvenue ---------- */
.offre{background:var(--terre-clair);border-top:1px solid var(--pierre);margin-top:var(--air)}
.offre + .pied{margin-top:0}
.offre-grille{display:grid;gap:22px 40px;grid-template-columns:minmax(0,1fr);align-items:center;padding:clamp(40px,5vw,64px) 0}
@media(min-width:960px){.offre-grille{grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr)}}
.offre-chiffre{font-family:var(--titre);font-weight:700;font-size:clamp(64px,8vw,104px);line-height:.85;color:var(--marque);letter-spacing:-.05em}
.offre-chiffre small{font-size:.45em;letter-spacing:0;margin-left:2px}
.offre h2{font-size:clamp(21px,2.4vw,28px);margin-bottom:10px}
.offre p{color:var(--gris);font-size:14.5px;max-width:46ch}
.offre-ligne{display:flex;gap:0;border:1.5px solid var(--marque);background:#fff}
.offre-ligne input{flex:1;min-width:0;border:0;padding:15px 16px;font:inherit;font-size:16px;background:transparent;color:var(--encre)}
.offre-ligne input:focus{outline:none}
.offre-ligne:focus-within{outline:2px solid var(--terre);outline-offset:2px}
.offre-ligne .bouton{border:0;background:var(--marque);color:var(--os);white-space:nowrap}
.offre-ligne .bouton:hover{background:var(--terre)}
@media(max-width:480px){.offre-ligne{flex-direction:column}.offre-ligne .bouton{width:100%}}
.offre-case{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;color:var(--gris);cursor:pointer}
.offre-case input{margin-top:3px;accent-color:var(--marque)}
.offre-retour{margin:12px 0 0;padding:10px 12px;background:#fff;border-left:3px solid var(--vert);color:var(--encre)!important;font-size:14px}
.offre-retour--erreur{border-left-color:var(--terre)}
.offre-note{margin-top:10px!important;font-size:12px!important}

/* ---------- code promo ---------- */
.code-promo{margin:14px 0 16px;font-size:13.5px}
.code-promo summary{cursor:pointer;color:var(--gris);text-decoration:underline;text-underline-offset:3px}
.code-form{display:flex;gap:8px;margin-top:10px}
.code-form input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--pierre);background:var(--os);font:inherit;font-size:16px;text-transform:uppercase}
.code-form .bouton{padding:11px 16px}
.code-applique{margin:0 0 4px;color:var(--vert)}
.code-note{font-size:13px;margin:8px 0 0;padding:8px 10px;background:var(--os)}
.code-note--erreur{color:var(--terre)}
.recap-note{font-size:12.5px;color:var(--gris);margin-top:12px}

/* ---------- formulaires ---------- */
.caisse{padding:28px 0 var(--air)}
.fil{font-size:13px;color:var(--gris);margin-bottom:18px}
.fil a{color:var(--gris)}
.caisse-grille{display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.caisse-grille{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
@media(max-width:959px){.caisse-grille aside{order:-1}}
.caisse-form fieldset{border:0;padding:0;margin:0 0 26px;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.caisse-form legend{font-family:var(--titre);font-size:17px;font-weight:600;margin-bottom:12px;padding:0}
.caisse-form legend small,.champ small{font-family:var(--texte);font-weight:400;color:var(--gris);font-size:12.5px;margin-left:6px}
.champ{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500}
.champ--plein{grid-column:1 / -1}
@media(max-width:560px){.champ{grid-column:1 / -1}}
.champ input,.champ textarea{width:100%;padding:13px 14px;border:1px solid var(--pierre);background:#fff;font:inherit;font-size:16px;font-weight:400;color:var(--encre);border-radius:0}
.champ input:focus,.champ textarea:focus{outline:2px solid var(--marque);outline-offset:-1px;border-color:var(--marque)}
.champ input[aria-invalid],.case input[aria-invalid]{border-color:var(--terre);outline-color:var(--terre)}
.champ-erreur{color:var(--terre);font-size:12.5px;font-weight:500}
.case{display:flex;gap:11px;align-items:flex-start;font-size:14px;margin:6px 0 12px;cursor:pointer}
.case input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--marque)}
.case--discrete{font-size:12.5px;color:var(--gris)}
.bouton--payer{margin-top:10px;padding:19px 28px;font-size:15px}
.recap-article{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--pierre);font-size:14px}
.recap-article img{width:64px;height:64px;object-fit:cover;background:var(--os)}
.recap-article b{font-family:var(--titre);font-weight:600;display:block}
.recap-article span{display:block;color:var(--gris);font-size:12.5px}
.recap-article span.liv{color:var(--vert)}
.recap-article > span:last-child{color:var(--encre);font-size:14px;white-space:nowrap}

/* ---------- commande et suivi ---------- */
.commande{padding:40px 0 var(--air)}
.frise{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;margin:26px 0 30px;counter-reset:etape}
.frise li{position:relative;padding-top:24px;font-family:var(--titre);font-size:12.5px;font-weight:600;color:var(--gris)}
.frise li::before{content:'';position:absolute;top:6px;left:0;right:0;height:3px;background:var(--pierre)}
.frise li::after{content:'';position:absolute;top:1px;left:0;width:13px;height:13px;border-radius:50%;background:var(--os);border:2px solid var(--pierre)}
.frise li.fait{color:var(--encre)}
.frise li.fait::before{background:var(--vert)}
.frise li.fait::after{background:var(--vert);border-color:var(--vert)}
.frise li.actuel::after{box-shadow:0 0 0 4px rgba(47,107,79,.18)}
.commande-detail{background:var(--os-2);padding:8px 20px 18px;margin:20px 0}
.commande-detail .rang{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px}
.commande-detail .rang--total{border-top:1px solid var(--pierre);margin-top:8px;padding-top:12px;font-family:var(--titre);font-weight:700;font-size:18px}
.commande-infos{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);font-size:14.5px}
@media(min-width:640px){.commande-infos{grid-template-columns:1fr 1fr}}
.pied-titre-sombre{font-family:var(--titre);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--terre);margin-bottom:8px}
.commande-actions{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin:18px 0}

/* ---------- 404 ---------- */
.perdu{padding:clamp(36px,6vw,80px) 0 0}
.perdu-grille{display:grid;gap:36px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:880px){.perdu-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.perdu-code{font-family:var(--titre);font-weight:700;font-size:clamp(84px,12vw,150px);line-height:.8;letter-spacing:-.06em;color:var(--marque);margin:0 0 18px}
.perdu-liens{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.perdu-aide{font-size:13.5px;color:var(--gris)}
.perdu-vitrine{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.perdu-carte{text-decoration:none;display:block}
.perdu-carte img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--os-2);transition:transform .5s ease}
.perdu-carte:hover img{transform:scale(1.02)}
.perdu-carte span{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:14px}
.perdu-carte b{font-family:var(--titre);font-weight:600}

/* ---------- guide et tableaux ---------- */
.etapes{padding-left:1.2em}
.etapes li{margin-bottom:.7em}
.tableau-defile{overflow-x:auto;margin:14px 0 22px;-webkit-overflow-scrolling:touch}
.tableau{border-collapse:collapse;width:100%;font-size:14px}
.tableau th,.tableau td{border-bottom:1px solid var(--pierre);padding:10px 12px;text-align:center;white-space:nowrap}
.tableau th{font-family:var(--titre);font-weight:600}
.tableau thead th{background:var(--os-2)}
.tableau--liste th,.tableau--liste td{text-align:left;white-space:normal;vertical-align:top}

/* ---------- console ---------- */
.console{padding:30px 0 var(--air)}
.console-tete{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.console-chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--pierre);border:1px solid var(--pierre);margin:18px 0}
@media(min-width:900px){.console-chiffres{grid-template-columns:repeat(6,minmax(0,1fr))}}
.console-chiffres div{background:var(--os);padding:16px}
.console-chiffres a{text-decoration:none}
.console-chiffres b{display:block;font-family:var(--titre);font-size:22px}
.console-chiffres span{font-size:12.5px;color:var(--gris)}
.console-outils{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:14px 0 20px}
.onglets{display:flex;gap:20px;border-bottom:1px solid var(--pierre);margin-bottom:8px;font-family:var(--titre);font-size:13.5px}
.onglets a{text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.onglets a[aria-current]{border-bottom-color:var(--encre);font-weight:600}
.etiquette{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 8px;background:var(--os-2);font-family:var(--titre)}
.etiquette--payee,.etiquette--preparee,.etiquette--alerte{background:var(--terre);color:#fff}
.etiquette--expediee,.etiquette--livree{background:var(--vert);color:#fff}
.etiquette--anomalie{background:#9B2C2C;color:#fff}
.console-action{margin:22px 0}
.console-message{border-bottom:1px solid var(--pierre);padding:16px 0;font-size:14.5px}
.console-message.traite{opacity:.55}