:root{
  --marine:#12305A;
  --marine-2:#0B2242;
  --jaune:#FFD43B;
  --jaune-pale:#FFF3C4;
  --papier:#F4F6F9;
  --tuile:#EAF0F7;
  --blanc:#FFFFFF;
  --encre:#0E1A2B;
  --gris:#5B6B80;
  --trait:#DCE3EC;
  --rouge:#C62828;
  --vert:#1E7B4A;
  --r:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--papier);color:var(--encre);font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.45;font-variation-settings:"wdth" 100}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--marine);outline-offset:2px}
.num{font-variation-settings:"wdth" 68;font-weight:760;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.titre{font-weight:850;font-variation-settings:"wdth" 118;color:var(--marine);letter-spacing:-.015em;line-height:1.04}

/* Bandeau maquette */
.maq{background:var(--encre);color:#C9D3E0;font-size:12.5px;text-align:center;padding:6px 16px}
.maq b{color:var(--jaune);font-weight:600}
.maq a{color:var(--jaune);font-weight:600}

/* En-tête */
header{position:sticky;top:0;z-index:20;background:var(--marine);color:var(--blanc)}
.tete{max-width:1180px;margin:0 auto;padding:10px 16px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo panier" "cherche cherche";gap:10px 12px;align-items:center}
.logo{grid-area:logo;display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{width:42px;height:42px;border-radius:50%;background:var(--jaune)}
.logo span{font-weight:800;font-variation-settings:"wdth" 118;font-size:18px;line-height:1.05}
.logo small{display:block;font-weight:500;font-size:12px;color:var(--jaune-2,#FFE680);font-variation-settings:"wdth" 100}
.cherche{grid-area:cherche;position:relative}
.cherche input{width:100%;height:44px;border-radius:6px;border:0;padding:0 16px 0 42px;background:var(--blanc);color:var(--encre)}
.cherche svg{position:absolute;left:14px;top:12px;width:20px;height:20px;color:var(--gris)}
.btn-panier{grid-area:panier;position:relative;height:44px;min-width:44px;border-radius:6px;border:0;background:var(--jaune);color:var(--marine);font-weight:750;padding:0 14px;display:flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none}
.btn-panier svg{width:22px;height:22px}
.btn-panier .compte{background:var(--marine);color:var(--jaune);border-radius:6px;font-size:13px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px}
.btn-panier .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rail{max-width:1180px;margin:0 auto;padding:0 16px 10px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:none;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--blanc);padding:7px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.28);white-space:nowrap}
.rail a[aria-current="page"]{background:var(--jaune);color:var(--marine);border-color:var(--jaune)}

main{max-width:1180px;margin:0 auto;padding:16px 16px 120px}
h2{font-size:22px;margin:30px 0 12px}
.entete-section{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 0 12px}
.entete-section h2{margin:0}
.entete-section a{font-size:14.5px;font-weight:600;color:var(--marine)}

/* Accueil : l'étagère */
.une{background:var(--jaune);margin:-16px calc(50% - 50vw) 0;padding:18px max(16px, calc(50vw - 574px)) 0;display:grid;gap:12px}
.une h1{margin:0;font-size:clamp(23px,6vw,48px)}
.une .long{display:none;margin:0;font-size:17px;color:var(--marine-2);max-width:46ch}
.creneau{margin:0;font-size:15px;font-weight:650;color:var(--marine)}
.creneau b{display:inline-block;background:var(--marine);color:var(--jaune);padding:2px 7px;border-radius:4px;font-weight:700;white-space:nowrap}
.etagere{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end;border-bottom:8px solid var(--marine);padding-top:4px}
.etagere a{display:block;background:var(--blanc);border-radius:4px 4px 0 0;aspect-ratio:4/5;padding:6px}
.etagere a img{width:100%;height:100%;object-fit:contain}
.etagere a:nth-child(6){display:none}

/* Dernière commande */
.encore{background:var(--blanc);border-radius:var(--r);padding:14px;display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;margin-top:14px}
.encore .mini{display:flex}
.encore .mini img{width:44px;height:44px;object-fit:contain;background:var(--tuile);border-radius:6px;padding:4px;border:2px solid var(--blanc);margin-left:-10px}
.encore .mini img:first-child{margin-left:0}
.encore b{display:block;color:var(--marine)}
.encore small{color:var(--gris)}
.encore button{grid-column:1/-1}

/* Rayons */
.rayons{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:10px}
.rayon:last-child:nth-child(odd){grid-column:span 2}
.rayon:last-child:nth-child(odd) .trio img{width:24%}
.rayon:last-child:nth-child(odd) .trio img:nth-child(1){left:18%}
.rayon:last-child:nth-child(odd) .trio img:nth-child(2){left:38%}
.rayon:last-child:nth-child(odd) .trio img:nth-child(3){right:18%}
.rayon{background:var(--blanc);border-radius:var(--r);padding:12px;text-decoration:none;display:grid;gap:10px}
.rayon .trio{background:var(--tuile);border-radius:6px;height:92px;position:relative;overflow:hidden}
.rayon .trio img{position:absolute;bottom:8px;width:44%;height:76px;object-fit:contain;mix-blend-mode:multiply}
.rayon .trio img:nth-child(1){left:6%}
.rayon .trio img:nth-child(2){left:28%;z-index:1}
.rayon .trio img:nth-child(3){right:6%}
.rayon b{display:block;font-size:16px;line-height:1.2;color:var(--marine)}
.rayon small{color:var(--gris);font-size:13px}

/* Étapes */

/* Cases produit */
.grille{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:14px 10px}
.rangee{display:grid;grid-auto-flow:column;grid-auto-columns:44%;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.carte{display:flex;flex-direction:column;gap:8px;min-width:0}
.carte .tuile{position:relative;background:var(--blanc);border-radius:var(--r);aspect-ratio:1/1;overflow:hidden}
.carte .tuile a.couvre{position:absolute;inset:0}
.carte .tuile img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.carte .ctl{position:absolute;right:8px;bottom:8px;z-index:2}
.carte .marque{position:absolute;left:8px;top:8px;z-index:2;background:var(--jaune-pale);color:var(--marine);font-size:12.5px;font-weight:650;padding:3px 8px;border-radius:6px}
.carte .nom{font-size:15px;font-weight:600;line-height:1.25;text-decoration:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.5em;padding:0 2px}
.carte .pied{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:6px;padding:0 2px;margin-top:auto;min-width:0}
.carte .pied .prix{white-space:nowrap;flex:none}
.prix{font-size:23px;color:var(--marine)}
.carte .des{font-size:14px;font-weight:600;font-variation-settings:"wdth" 100}
.carte .format{font-size:13px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0;text-align:right}
.saveurs i{font-style:normal;opacity:.75;font-size:13px}
.carte .choix{font-size:13px;color:var(--gris);text-align:right}
.ajout{height:42px;min-width:42px;border-radius:6px;border:0;background:var(--marine);color:var(--blanc);font-weight:700;cursor:pointer;display:grid;place-items:center;padding:0 12px;text-decoration:none}
.ajout svg{width:20px;height:20px}
.pas{display:flex;align-items:center;background:var(--jaune);border-radius:6px;height:42px;color:var(--marine)}
.pas button{width:40px;height:42px;border:0;background:transparent;color:var(--marine);font-size:22px;font-weight:700;cursor:pointer;border-radius:6px}
.pas output{min-width:20px;text-align:center;font-weight:800}
.ajout.off{background:var(--blanc);color:var(--rouge);border:1.5px solid currentColor;cursor:default;font-size:14px}
.carte.epuise .tuile img{opacity:.45}
.stock.non{color:var(--rouge)}
.ligne.off{opacity:.6}
.ligne .rupture{color:var(--rouge);font-size:13.5px;font-weight:600}
.gros[disabled]{opacity:.45;cursor:not-allowed}
.pas.clair{background:var(--papier)}
.vide{background:var(--blanc);border-radius:var(--r);padding:28px 18px;text-align:center;color:var(--gris)}
.fil{font-size:14px;color:var(--gris);margin:4px 0 0}
.fil a{color:var(--marine)}
.titre-rayon{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.titre-rayon h1{font-size:30px;margin:6px 0 10px}
.titre-rayon span{color:var(--gris);font-size:14px}
.filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filtres button{border:1.5px solid var(--trait);background:var(--blanc);border-radius:6px;padding:7px 14px;font-weight:600;font-size:14.5px;cursor:pointer}
.filtres button[aria-pressed="true"]{background:var(--marine);border-color:var(--marine);color:var(--blanc)}
.filtres select{margin-left:auto;height:38px;border-radius:6px;border:1.5px solid var(--trait);background:var(--blanc);padding:0 12px;font-size:14.5px;font-weight:600}

/* Fiche */
.fiche{display:grid;gap:18px}
.fiche .photo{position:relative;background:var(--blanc);border-radius:6px;aspect-ratio:1/1;overflow:hidden}
.fiche .photo img{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);object-fit:scale-down}
.fiche h1{margin:0;font-size:32px}
.fiche .prix{font-size:40px}
.fiche p.desc{margin:0;max-width:60ch}
.saveurs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.saveurs legend{font-weight:700;margin-bottom:8px}
.saveurs label{position:relative}
.saveurs.replie label:nth-of-type(n+9){display:none}
.voir-choix{border:1.5px dashed var(--marine);background:none;color:var(--marine);border-radius:var(--r);padding:8px 14px;font-weight:650;font-size:14.5px;cursor:pointer}
.saveurs input{position:absolute;opacity:0}
.saveurs span{display:block;padding:8px 14px;border-radius:6px;border:1.5px solid var(--trait);background:var(--blanc);font-size:14.5px;cursor:pointer}
.saveurs input:checked+span{border-color:var(--marine);background:var(--marine);color:var(--blanc)}
.saveurs input:focus-visible+span{outline:3px solid var(--marine);outline-offset:2px}
.saveurs input:disabled+span{color:#9AA7B8;text-decoration:line-through;cursor:not-allowed;background:var(--papier)}
.stock{font-size:14.5px;font-weight:600;color:var(--marine)}
.gros{height:54px;border-radius:6px;border:0;background:var(--marine);color:var(--blanc);font-weight:750;font-size:17px;padding:0 22px;cursor:pointer;width:100%;display:grid;place-items:center;text-decoration:none}
.gros.jaune{background:var(--jaune);color:var(--marine)}
.gros.leger{background:var(--tuile);color:var(--marine)}
.ligne-achat{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.ligne-achat .pas{height:54px;background:var(--blanc)}
.ligne-achat .pas button{height:54px;width:48px}
.atouts{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:14.5px;color:var(--gris)}
.atouts li{display:flex;gap:8px}
.atouts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--jaune);margin-top:8px;flex:none}

/* Panier */
.panier{display:grid;gap:16px}
.lignes{background:var(--blanc);border-radius:var(--r)}
.ligne{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:12px;align-items:center;border-top:1px solid var(--trait)}
.ligne:first-child{border-top:0}
.ligne img{width:64px;height:64px;object-fit:contain;background:var(--tuile);border-radius:6px;padding:6px}
.ligne .n{font-weight:600;line-height:1.25}
.ligne .v{font-size:13.5px;color:var(--gris)}
.ligne .d{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ligne .d .num{font-size:18px}
.ligne .pas{height:38px}
.ligne .pas button{height:38px;width:36px}
.retirer{border:0;background:none;color:var(--gris);text-decoration:underline;cursor:pointer;font-size:13.5px;padding:2px}
.garde{background:var(--jaune-pale);color:var(--marine-2);border-radius:var(--r);padding:12px 14px;font-size:14.5px;margin:0}
.alerte{background:#FDECEC;color:#7F1D1D;border-radius:var(--r);padding:12px 14px;font-size:14.5px;margin:0}
.total{background:var(--blanc);border-radius:var(--r);padding:14px 16px;display:grid;gap:8px}
.total div{display:flex;justify-content:space-between;gap:10px}
.total .fort{font-size:20px;font-weight:800;border-top:1px solid var(--trait);padding-top:10px;color:var(--marine)}
.total .fort .num{font-size:30px}
.total small{color:var(--gris)}

/* Commande */
.bloc{background:var(--blanc);border-radius:var(--r);padding:16px;display:grid;gap:12px}
.bloc h2{margin:0;font-size:19px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.option{position:relative}
.option input{position:absolute;opacity:0}
.option span{display:block;border:1.5px solid var(--trait);border-radius:6px;padding:12px;cursor:pointer;height:100%}
.option span b{display:block}
.option span small{color:var(--gris);font-size:13px}
.option input:checked+span{border-color:var(--marine);box-shadow:inset 0 0 0 1px var(--marine);background:#EEF3FA}
.option input:focus-visible+span{outline:3px solid var(--marine);outline-offset:2px}
.option input:disabled+span{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.jours{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.jours .option span{min-width:78px;text-align:center;padding:10px 8px}
.creneaux{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.creneaux .option span{text-align:center;padding:10px 6px;font-weight:600;font-size:14.5px}
label.champ{display:grid;gap:4px;font-size:14px;font-weight:600}
label.champ input,label.champ select{height:48px;border-radius:6px;border:1.5px solid var(--trait);padding:0 12px;font-weight:400;font-size:16px;background:var(--blanc)}
.coche{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.coche input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--marine)}
.note{font-size:13.5px;color:var(--gris);margin:0}

/* Merci */
.merci{background:var(--blanc);border-radius:6px;padding:24px 18px;display:grid;gap:12px}
.merci h1{margin:0;font-size:32px}
.merci .quand{background:var(--jaune);border-radius:var(--r);padding:16px;color:var(--marine);font-size:18px;font-weight:650}

/* Barre panier */
.barre{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;background:var(--marine);color:var(--blanc);border-radius:6px;padding:10px 10px 10px 16px;display:flex;align-items:center;gap:12px;text-decoration:none;transition:transform .25s ease}
.barre[hidden]{display:flex;transform:translateY(160%)}
.barre .info{flex:1;line-height:1.15}
.barre .info small{display:block;color:#B9C7DB;font-size:13px}
@media (max-width:359px){.barre .opt{display:none}}
.barre .info .num{font-size:26px;color:var(--jaune)}
.barre .aller{background:var(--jaune);color:var(--marine);font-weight:750;border-radius:6px;padding:12px 16px}
.barre.pulse{animation:pulse .45s ease}
@keyframes pulse{0%{scale:1}40%{scale:1.04}100%{scale:1}}

footer{background:var(--marine-2);color:#C9D3E0;font-size:14.5px}
footer .pied{max-width:1180px;margin:0 auto;padding:28px 16px 120px;display:grid;gap:18px}
footer b{color:var(--blanc)}
footer a{color:var(--jaune);text-decoration:none}

@media (min-width:760px){
  .tete{grid-template-columns:auto 1fr auto;grid-template-areas:"logo cherche panier"}
  .logo img{width:48px;height:48px}
  .btn-panier .txt{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .grille{grid-template-columns:repeat(3,1fr)}
  .rangee{grid-auto-columns:calc((100% - 30px)/4)}
  .rayons{grid-template-columns:repeat(4,1fr)}
  .fiche{grid-template-columns:1fr 1fr;align-items:start}
  .creneaux{grid-template-columns:repeat(6,1fr)}
  .une{padding-top:28px}
  .une .long{display:block}
  .une .creneau{padding-bottom:4px}
  .etagere{grid-template-columns:repeat(6,1fr)}
  .etagere a:nth-child(6){display:block}
  .encore{grid-template-columns:auto 1fr auto}
  .encore button{grid-column:auto;width:auto}
}
@media (min-width:1040px){
  .une{grid-template-columns:1fr 1.1fr;padding-top:34px;gap:14px 40px;align-items:end}
  .une h1{grid-column:1;max-width:14ch}
  .une .long{display:block;grid-column:1}
  .une .creneau{grid-column:1;padding-bottom:30px}
  .une .etagere{grid-column:2;grid-row:1/span 3;grid-template-columns:repeat(3,1fr);row-gap:0;gap:10px;border-bottom:0;background:linear-gradient(var(--marine),var(--marine)) bottom/100% 10px no-repeat,linear-gradient(var(--marine),var(--marine)) 0 calc(50% + 2px)/100% 10px no-repeat;padding-bottom:10px}
  .une .etagere a{margin-bottom:10px}
  .une .etagere{width:100%;max-width:470px;justify-self:end}
  .grille{grid-template-columns:repeat(4,1fr)}
  .panier{grid-template-columns:1.5fr 1fr;align-items:start}
  .barre{left:auto;right:24px;width:380px}
  footer .pied{grid-template-columns:repeat(3,1fr);padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}