/* Marée Café · prototype web (projet fictif) */

@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/Figtree-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --sable-50: #FFFBF4;
  --sable-100: #F5EDE0;
  --sable-200: #EBE0CE;
  --sable-300: #E3D5BE;
  --sable-400: #CDBA9A;
  --marine-900: #0B1830;
  --marine-800: #14264A;
  --marine-600: #2A3D63;
  --marine-500: #4E586C;
  --marine-400: #7A879F;
  --marine-300: #9AA6BD;
  --marine-100: #E4E8EF;
  --terracotta-500: #D98B6F;
  --terracotta-700: #9C4A33;
  --terracotta-100: #F6DED3;
  --terracotta-200: #ECC1B0;
  --soleil-400: #E8B44C;
  --brume-100: #DFE7EC;
  --brume-300: #B9CAD5;
  --algue-700: #2E6A55;
  --algue-100: #DCEBE2;
  --brique-700: #A33B2C;
  --brique-100: #F6DCD6;

  --fond: var(--sable-100);
  --surface: var(--sable-50);
  --encre: var(--marine-800);
  --encre-douce: var(--marine-500);
  --action: var(--marine-800);
  --sur-action: var(--sable-50);
  --ligne: var(--sable-300);
  --verre: rgba(255, 251, 244, 0.6);
  --voile: rgba(11, 24, 48, 0.32);
  --ombre-carte: inset 0 0 0 2px var(--sable-300);
  --ombre-flottante: 0 1px 3px rgba(20, 38, 74, 0.04), 0 8px 24px -8px rgba(20, 38, 74, 0.10);
  --anneau-focus: 0 0 0 2px #F5EDE0, 0 0 0 4px #14264A;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --font: Figtree, "SF Pro Text", system-ui, sans-serif;

  /* Zones sûres de l'écran : réglées pour le cadre iPhone Air */
  --haut: 62px;
  --bas: 20px;
  --cote-bas: 20px;
  --h-onglets: 68px;

  /* Échelle d'arrondis : un seul rayon par type d'élément, partout */
  --r-feuille: 48px;  /* haut des feuilles */
  --r-bloc: 36px;     /* cartes et blocs */
  --r-interne: 28px;  /* posé à 8 du bord d'un bloc : visuels (36 − 8) */
  --r-petit: 20px;    /* puces, champs, bandeaux compacts, bouton à 16 du bord d'un bloc (36 − 16) */
  --r-mini: 12px;     /* étiquettes, petites images */
  --r-rond: 999px;    /* boutons d'action, pastilles, interrupteurs */
  --ecran-l: 420px;
  --ecran-h: 912px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--encre);
  background: #E7DDCC;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: none; box-shadow: var(--anneau-focus); }
img { display: block; }
p, h1, h2, h3 { margin: 0; }

/* ---------- Scène : texte + iPhone (ordinateur) ---------- */

.scene {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 320px) auto minmax(0, 272px);
  grid-template-areas: "intro iphone commandes";
  align-items: center;
  justify-content: center;
  column-gap: clamp(32px, 5vw, 72px);
  padding: 24px;
  overflow: hidden;
}
.intro { grid-area: intro; display: flex; flex-direction: column; gap: 18px; }
.intro img { width: 168px; height: auto; }
.intro h1 { font-size: 36px; line-height: 42px; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.intro p { font-size: 18px; line-height: 27px; font-weight: 500; color: var(--encre-douce); text-wrap: pretty; }
.intro .mention { margin-top: 6px; font-size: 14px; line-height: 18px; }
.iphone-boite { grid-area: iphone; }

/* Commandes de la simulation, à droite de l'iPhone */
.commandes { grid-area: commandes; display: flex; flex-direction: column; gap: 28px; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.commandes::-webkit-scrollbar { display: none; }
.groupe-demo { display: flex; flex-direction: column; gap: 8px; }
.groupe-demo h2 { margin-bottom: 2px; font-size: 13px; }
.ctrl {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--r-petit);
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); box-shadow: var(--ombre-carte); color: var(--encre);
  font-size: 16px; font-weight: 700; text-decoration: none;
  transition: background .16s, color .16s;
}
.ctrl:hover { background: #fff; }
.ctrl-texte { flex: 1; text-align: left; }
.ctrl-fleche { color: var(--encre-douce); }
.ctrl[aria-pressed="true"]:not(.bascule) { background: var(--action); color: var(--sur-action); box-shadow: none; }
.ctrl .interrupteur { width: 44px; height: 26px; border-radius: var(--r-rond); }
.ctrl .interrupteur::after { width: 20px; height: 20px; border-radius: var(--r-rond); }
.ctrl.on .interrupteur { background: var(--marine-800); }
.ctrl.on .interrupteur::after { transform: translateX(18px); }
.aide { padding: 0 4px; font-size: 14px; line-height: 19px; color: var(--encre-douce); text-wrap: pretty; }
.remettre { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; border-radius: var(--r-mini); font-size: 15px; font-weight: 700; color: var(--encre-douce); }
.remettre:hover { color: var(--encre); }

/* Écran moyen : l'iPhone à gauche, le texte et les commandes à droite */
@media (min-width: 601px) and (max-width: 1099px) {
  .scene { grid-template-columns: auto minmax(0, 300px); grid-template-areas: "iphone intro" "iphone commandes"; grid-template-rows: auto minmax(0, 1fr); row-gap: 24px; align-content: center; }
  .intro { align-self: end; gap: 12px; }
  .intro img { width: 140px; }
  .intro h1 { font-size: 28px; line-height: 34px; }
  .intro p { font-size: 16px; line-height: 23px; }
  .commandes { align-self: start; gap: 20px; }
}
/* Peu de hauteur : on garde l'essentiel, les commandes restent toutes visibles */
@media (min-width: 601px) and (max-width: 1099px) and (max-height: 900px) {
  .intro p:not(.mention), .aide { display: none; }
}
@media (min-width: 1100px) and (max-height: 740px) {
  .aide { display: none; }
  .commandes { gap: 20px; }
}

.iphone-boite { width: calc(444px * var(--e, 1)); height: calc(936px * var(--e, 1)); flex: none; }
.iphone {
  width: 444px; height: 936px;
  padding: 12px;
  border-radius: 74px;
  background: linear-gradient(145deg, #3a3a3e, #1c1c1f 40%, #2c2c30);
  box-shadow: 0 0 0 2px #55555b, 0 30px 60px -20px rgba(20, 38, 74, .35);
  transform: scale(var(--e, 1));
  transform-origin: top left;
  position: relative;
}
.iphone-ecran { position: relative; width: 420px; height: 912px; border-radius: 62px; overflow: hidden; }
.ilot {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 20px; background: #000; z-index: 100;
}

/* ---------- Appli ---------- */

#app {
  position: absolute; inset: 0;
  background: var(--fond);
  overflow: hidden;
  isolation: isolate;
}

.barre-etat {
  position: absolute; top: 0; left: 0; right: 0; height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 34px 0 52px;
  z-index: 90; pointer-events: none;
  font-family: system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 17px;
  color: var(--encre);
}
.barre-etat.claire { color: var(--sable-50); }
.barre-etat .droite { display: flex; gap: 6px; align-items: center; }

.ecran { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--fond); }
.defile {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--haut) 20px calc(var(--bas) + var(--h-onglets) + 32px);
  scrollbar-width: none;
}
.defile::-webkit-scrollbar { display: none; }
.ecran.sans-onglets .defile { padding-bottom: 24px; }

.entre-droite { animation: entreDroite .32s var(--courbe); }
.entre-gauche { animation: entreGauche .32s var(--courbe); }
.fondu { animation: fondu .2s ease-out; }
@keyframes entreDroite { from { transform: translateX(36%); opacity: 0; } }
@keyframes entreGauche { from { transform: translateX(-12%); opacity: .4; } }
@keyframes fondu { from { opacity: 0; } }

/* Pictos Phosphor en masque : prennent la couleur du texte */
.ico {
  width: 24px; height: 24px; flex: none; display: inline-block;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.ico.p18 { width: 18px; height: 18px; }
.ico.p20 { width: 20px; height: 20px; }
.ico.p22 { width: 22px; height: 22px; }
.ico.p28 { width: 28px; height: 28px; }

/* Typo */
.surtitre { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta-700); }
.surtitre.gris { color: var(--encre-douce); }
.titre-ecran { font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; }
.titre-1 { font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -0.015em; }
.titre-2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.titre-3 { font-size: 19px; line-height: 24px; font-weight: 650; }
.corps { font-size: 18px; line-height: 26px; font-weight: 500; }
.secondaire { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--encre-douce); }
.prix { font-size: 19px; line-height: 24px; font-weight: 700; }
.chiffre-hero { font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -0.03em; }
.chiffre-grand { font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }

/* En-tête d'écran */
.entete { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; }
.entete .actions { display: flex; gap: 12px; }
.grand-titre { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 0; }
.entete .grand-titre { padding: 0; }
.retour-titre { display: flex; align-items: flex-start; gap: 16px; }
.retour-titre .verre { margin-top: 0; }

/* Liquid Glass : seulement barre du bas et boutons ronds */
.verre {
  width: 48px; height: 48px; flex: none; border-radius: 999px;
  display: grid; place-items: center; position: relative;
  background: var(--verre);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--ombre-flottante), inset 0 0 0 1px rgba(255, 255, 255, .6);
  color: var(--encre);
  transition: transform .16s var(--courbe);
}
.verre:active { transform: scale(.92); }
.compteur {
  position: absolute; top: -5px; right: -5px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--terracotta-500); color: var(--marine-800);
  font-size: 13px; line-height: 22px; font-weight: 800; text-align: center;
}
.compteur.saute { animation: saute .45s var(--courbe); }
@keyframes saute { 40% { transform: scale(1.35); } }

.onglets {
  position: absolute; left: var(--cote-bas); right: var(--cote-bas); bottom: var(--bas); height: var(--h-onglets); z-index: 20;
  border-radius: 999px; padding: 6px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--verre);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--ombre-flottante), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.onglet {
  border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 14px; line-height: 18px; font-weight: 700; color: var(--encre);
  transition: background .16s var(--courbe);
}
.onglet .ico { width: 26px; height: 26px; }
.onglet.actif { background: rgba(236, 193, 176, .55); color: var(--terracotta-700); }

/* Boutons (pilule pour l'action du bas, décision du 22/10) */
.btn {
  width: 100%; height: 56px; border-radius: var(--r-rond); padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--action); color: var(--sur-action);
  font-size: 18px; line-height: 24px; font-weight: 700;
  transition: transform .16s var(--courbe), background .16s;
}
.btn:active { transform: scale(.98); background: var(--marine-600); }
.btn.centre { justify-content: center; }
.btn.doux { background: var(--surface); color: var(--encre); }
.btn.doux:active { background: var(--sable-200); }
.btn.noir { background: #000; color: #fff; justify-content: center; gap: 4px; font-size: 22px; font-weight: 600; font-family: system-ui, -apple-system, sans-serif; }
.btn .droite { display: flex; align-items: center; gap: 10px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.action-bas { display: flex; gap: 12px; align-items: center; }

/* Compteur de quantité */
.quantite {
  flex: none; height: 56px; border-radius: var(--r-rond); padding: 4px;
  display: flex; align-items: center;
  background: var(--sable-300);
}
.quantite button { width: 48px; height: 48px; border-radius: var(--r-rond); background: var(--surface); display: grid; place-items: center; }
.quantite button:active { background: var(--sable-200); }
.quantite span { width: 40px; text-align: center; font-size: 20px; font-weight: 800; }
.quantite.petit { height: 40px; padding: 3px; border-radius: var(--r-rond); background: var(--sable-200); box-shadow: inset 0 0 0 2px var(--sable-300); }
.quantite.petit button { width: 34px; height: 34px; border-radius: var(--r-rond); }
.quantite.petit span { width: 32px; font-size: 17px; }

/* Cartes */
.carte-claire { background: var(--surface); border-radius: var(--r-bloc); box-shadow: var(--ombre-carte); }
.section { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.section-tete { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 0 10px; }
.section-tete .voir { display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 700; padding: 8px 0 8px 12px; }
.sous-section { padding-left: 10px; margin: 8px 0 -2px; }

/* Visuels illustrés */
.visuel { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-interne); background: var(--terracotta-100); flex: none; }
.visuel img { width: 76%; height: 76%; position: relative; z-index: 1; }
.visuel.sable { background: var(--sable-200); }
.visuel.brume { background: var(--brume-100); }
.visuel .vague-fond { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 0; }

/* Bloc recommander */
.recommander {
  margin-top: 24px; border-radius: var(--r-bloc); background: var(--marine-800); color: var(--sable-50);
  padding: 24px 16px 16px; display: flex; flex-direction: column; overflow: hidden;
}
.recommander .haut { padding: 0 8px; display: flex; flex-direction: column; gap: 4px; }
.recommander .surtitre { color: var(--terracotta-500); }
.recommander .details { color: var(--marine-100); font-size: 17px; line-height: 24px; font-weight: 500; }
.recommander .heure { display: flex; gap: 10px; margin-top: 10px; color: var(--marine-100); font-size: 16px; line-height: 22px; font-weight: 500; }
.recommander .heure .ico { margin-top: 1px; }
.recommander .ressac { height: 30px; margin: 10px -16px 8px; opacity: .9; }
.recommander .ressac img { width: 100%; height: 30px; object-fit: cover; }
.recommander .bouton-recommander {
  height: 64px; border-radius: var(--r-petit); background: var(--surface); color: var(--encre);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  font-size: 18px; font-weight: 700; transition: transform .16s var(--courbe);
}
.recommander .bouton-recommander:active { transform: scale(.98); }
.recommander .bouton-recommander .prix { margin-left: auto; }

/* Carte de fidélité */
.fidelite { position: relative; overflow: hidden; padding: 24px 20px 20px; border-radius: var(--r-bloc); }
.fidelite .compte { display: flex; align-items: baseline; gap: 8px; }
.fidelite .sur { font-size: 22px; font-weight: 700; color: var(--encre-douce); }
.fidelite .phrase { margin-top: 10px; position: relative; z-index: 1; }
.planche { position: relative; z-index: 1; margin-top: 20px; display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 16px; justify-items: center; }
.planche img { width: 52px; height: 52px; }
.planche .pose { animation: pose .5s var(--courbe) both; }
@keyframes pose { from { transform: scale(1.4) rotate(-12deg); opacity: 0; } }
.maree { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; transition: height .6s var(--courbe); }
.maree svg { position: absolute; top: -14px; left: 0; width: 200%; height: 16px; animation: houle 6s linear infinite; }
.maree .eau { position: absolute; inset: 0; background: var(--terracotta-100); }
@keyframes houle { to { transform: translateX(-50%); } }

/* Cartes boisson */
.liste { display: flex; flex-direction: column; gap: 12px; }
.boisson {
  position: relative; display: flex; gap: 16px; padding: 8px; border-radius: var(--r-bloc); /* « + » (rayon 20) à 16 du coin, visuel (28) à 8 */
  background: var(--surface); box-shadow: var(--ombre-carte); width: 100%;
}
.boisson .visuel { width: 112px; height: 112px; border-radius: var(--r-interne); }
.boisson .textes { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 0 6px; min-width: 0; }
/* Le prix est calé en bas, sur la rangée du « + » : le texte au-dessus n'est jamais recouvert */
.boisson .prix-grand { margin-top: auto; min-height: 32px; display: flex; align-items: center; padding-right: 40px; font-size: 24px; line-height: 28px; font-weight: 800; }
.boisson-ouvrir { display: flex; gap: 16px; width: calc(100% + 16px); margin: -8px; padding: 8px; border-radius: inherit; text-align: left; }
.boisson .prix-grand .des { margin-right: 5px; font-size: 15px; font-weight: 600; color: var(--encre-douce); }
.boisson .plus {
  position: absolute; right: 14px; bottom: 14px; width: 32px; height: 32px; border-radius: var(--r-rond); /* calé dans le coin, à 14 comme le texte */
  display: grid; place-items: center; background: var(--action); color: var(--sur-action);
  transition: transform .16s var(--courbe);
}
.boisson .plus:active { transform: scale(.9); }
.boisson.indispo .visuel, .boisson.indispo .textes { opacity: .45; }
.boisson .indispo-pastille {
  position: absolute; right: 16px; bottom: 16px; padding: 6px 12px; border-radius: var(--r-rond);
  background: var(--sable-200); font-size: 14px; font-weight: 700;
}
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.boisson.grille { flex-direction: column; gap: 10px; padding: 8px 8px 12px; border-radius: var(--r-bloc); }
.boisson.grille .visuel { width: 100%; height: 120px; border-radius: var(--r-interne); }
.boisson.grille .textes { flex: 1; padding: 0 6px 2px; }
.boisson.grille .boisson-ouvrir { flex: 1; flex-direction: column; gap: 10px; width: calc(100% + 16px); margin: -8px -8px -12px; padding: 8px 8px 12px; }
.boisson.grille .prix-grand { font-size: 20px; padding-top: 6px; box-sizing: content-box; }

/* Filtres */
.filtres {
  display: flex; gap: 8px; align-items: center; margin: 16px -20px 0; padding: 0 40px 4px 20px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.filtres::-webkit-scrollbar { display: none; }
.filtre {
  flex: none; height: 48px; padding: 0 16px; border-radius: var(--r-petit);
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); font-size: 17px; font-weight: 700;
}
.filtre.actif { background: var(--action); color: var(--sur-action); }
.filtres .vague-v { flex: none; width: 10px; height: 34px; color: var(--sable-400); }

/* Produits */
.produit { position: relative; display: flex; flex-direction: column; padding: 0; border-radius: var(--r-bloc); background: var(--surface); box-shadow: var(--ombre-carte); }
/* Toute la carte ouvre la fiche ; le « + » (rayon 20) est à 16 du coin, comme sur la Carte */
.produit-ouvrir { flex: 1; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 8px 8px 14px; /* prix centré sur le « + » */ border-radius: inherit; text-align: left; }
.produit .plus {
  position: absolute; right: 14px; bottom: 14px; width: 32px; height: 32px; border-radius: var(--r-rond);
  display: grid; place-items: center; background: var(--action); color: var(--sur-action);
  transition: transform .16s var(--courbe);
}
.produit .plus:active { transform: scale(.9); }
/* Zone de toucher de 44 autour du « + » de 32 */
:is(.boisson, .produit) .plus::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
.produit .visuel { width: 100%; aspect-ratio: 1 / .86; }
.produit .visuel img { width: 70%; height: 70%; }
.produit .textes { flex: 1; padding: 0 6px; display: flex; flex-direction: column; gap: 2px; }
.produit .prix { margin-top: auto; padding-top: 4px; min-height: 32px; display: flex; align-items: center; padding-right: 40px; box-sizing: content-box; }
.produit .surtitre { font-size: 13px; }

/* Feuilles iOS */
.voile { position: absolute; inset: 0; background: var(--voile); z-index: 30; }
.voile.apparait { animation: fondu .28s ease-out; }
.voile.disparait { opacity: 0; transition: opacity .22s ease-in; }
.feuille {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 31;
  max-height: calc(100% - var(--haut) - 24px);
  display: flex; flex-direction: column;
  background: var(--fond); border-radius: var(--r-feuille) var(--r-feuille) 0 0; /* bouton Fermer (rayon 24) à 24 du coin */
}
.feuille.haute { height: calc(100% - var(--haut) - 44px); }
.feuille.monte { animation: monte .38s var(--courbe); }
.feuille.descend { transform: translateY(100%); transition: transform .24s ease-in; }
@keyframes monte { from { transform: translateY(100%); } }
.poignee { width: 36px; height: 5px; border-radius: 3px; background: var(--sable-400); margin: 8px auto 4px; flex: none; }
.feuille .tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 7px 24px 16px 20px; flex: none; }
.feuille .tete .grand-titre { padding: 0; gap: 4px; }
.feuille .corps-feuille { flex: 1; overflow-y: auto; padding: 0 20px 8px; scrollbar-width: none; overscroll-behavior: contain; }
.feuille .corps-feuille::-webkit-scrollbar { display: none; }
.feuille .pied { flex: none; padding: 12px var(--cote-bas) var(--bas); }

.intro-produit { display: flex; gap: 16px; align-items: center; }
.intro-produit .visuel { width: 112px; height: 112px; }
/* Contour doux par-dessus l'illustration et la vague, sans changer la taille */
.intro-produit .visuel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--ombre-carte); z-index: 2; pointer-events: none; }
.intro-produit .textes { display: flex; flex-direction: column; gap: 8px; }
.bloc { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.bloc-tete { display: flex; justify-content: space-between; align-items: baseline; }
.bloc-tete h3 { font-size: 19px; line-height: 24px; font-weight: 700; }

/* Notes de dégustation, détails, conseil */
.notes { display: flex; flex-wrap: wrap; gap: 6px; }
.note { padding: 4px 10px; border-radius: var(--r-mini); background: var(--sable-200); font-size: 14px; line-height: 18px; font-weight: 700; }
.fiche .groupe-ligne { padding: 14px 16px; justify-content: space-between; }
.fiche .groupe-ligne + .groupe-ligne::before { left: 16px; right: 16px; }
.fiche .libelle-fiche { font-size: 16px; font-weight: 500; color: var(--encre-douce); }
.fiche strong { font-size: 16px; font-weight: 700; text-align: right; }
.conseil { margin-top: 20px; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-bloc); background: var(--terracotta-100); }
.conseil .pastille-ico { width: 40px; height: 40px; border-radius: var(--r-rond); background: var(--surface); color: var(--terracotta-700); display: grid; place-items: center; flex: none; }
.conseil .textes { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 22px; font-weight: 500; }
.conseil strong { font-size: 17px; font-weight: 800; }
.encart-semaine { width: 100%; margin-top: 20px; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-bloc); background: var(--surface); }
.encart-semaine .pastille-ico { width: 44px; height: 44px; border-radius: var(--r-rond); background: var(--soleil-400); color: var(--marine-800); display: grid; place-items: center; flex: none; }
.encart-semaine .textes { flex: 1; display: flex; flex-direction: column; }
.encart-semaine .surtitre { font-size: 12px; }
.encart-semaine strong { font-size: 18px; font-weight: 800; }

/* Choix en segments (taille, contenance, lot) */
.segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.segment { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: var(--r-petit); background: var(--surface); text-align: center; }
.segment strong { font-size: 18px; font-weight: 700; }
.segment span { font-size: 15px; font-weight: 500; color: var(--encre-douce); }
.segment.choisie { background: var(--surface); box-shadow: inset 0 0 0 2px var(--marine-800); }
.segment.choisie strong { font-weight: 800; }

/* Couleurs d'émail */
.couleurs { display: flex; gap: 24px; padding-left: 4px; }
.couleur { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; min-width: 56px; }
.couleur .pastille-couleur { width: 48px; height: 48px; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(20, 38, 74, .12); transition: box-shadow .16s var(--courbe); }
.couleur.choisie { font-weight: 800; }
.couleur.choisie .pastille-couleur { box-shadow: 0 0 0 3px var(--fond), 0 0 0 5px var(--marine-800); }
.option .prix-option { font-size: 16px; font-weight: 700; color: var(--algue-700); }

/* Recherche */
.recherche { margin-top: 16px; }
.recherche input::-webkit-search-cancel-button { display: none; }
.verre.enfonce { background: var(--marine-800); color: var(--sable-50); }
.aucun { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 40px; padding: 0 20px; }
.aucun img { width: 140px; height: 140px; margin-bottom: 8px; }

/* Sélecteur de taille dessiné */
.tailles { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; }
.taille { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; }
.taille svg { display: block; overflow: visible; }
.taille .socle { width: 96px; height: 2px; border-radius: 1px; background: var(--marine-300); margin-bottom: 8px; }
.taille.choisie .socle { height: 3px; background: var(--marine-800); }
.taille .nom { font-size: 18px; font-weight: 600; }
.taille.choisie .nom { font-weight: 800; }
.taille .vol { font-size: 14px; font-weight: 500; color: var(--encre-douce); }

/* Options radio en lignes */
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  width: 100%; min-height: 64px; border-radius: var(--r-bloc); padding: 10px 16px;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); font-size: 18px; font-weight: 600;
  transition: background .16s;
}
.option .pastille-ico { width: 40px; height: 40px; border-radius: var(--r-rond); display: grid; place-items: center; background: var(--sable-200); flex: none; }
.option .libelle { flex: 1; }
.option.choisie { background: var(--surface); box-shadow: inset 0 0 0 2px var(--marine-800); font-weight: 800; }
.option.choisie .pastille-ico { background: var(--sable-200); }
.radio { width: 28px; height: 28px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--marine-400); flex: none; display: grid; place-items: center; }
.choisie .radio { box-shadow: inset 0 0 0 2.5px var(--marine-800); }
.choisie .radio::after { content: ''; width: 14px; height: 14px; border-radius: 7px; background: var(--marine-800); }

/* Panier */
.ligne-panier { display: flex; gap: 14px; padding: 8px 16px 8px 8px; border-radius: var(--r-bloc); background: var(--surface); }
.ligne-panier .visuel { width: 92px; height: auto; min-height: 92px; align-self: stretch; } /* toujours à 8 du bord, en haut comme en bas */
.ligne-panier .textes { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }
/* En bas de la ligne : la quantité à gauche, le prix à droite, à la même hauteur */
.ligne-panier .bas { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ligne-panier .prix { font-weight: 800; }
.offert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-petit); background: var(--algue-100); color: var(--algue-700); font-weight: 700; }

.asap { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-bloc); background: var(--surface); }
/* Choisi : contour marine sur fond clair (le bleu pâle manquait de contraste) */
.asap.choisie { background: var(--surface); box-shadow: inset 0 0 0 2px var(--marine-800); }
.asap .radio { width: 32px; height: 32px; border-radius: 16px; } /* à ~19 du coin d'un bloc de 36 */
.asap .pastille-ico { width: 40px; height: 40px; border-radius: var(--r-rond); background: var(--terracotta-100); color: var(--terracotta-700); display: grid; place-items: center; flex: none; }
.asap .textes { flex: 1; display: flex; flex-direction: column; }
.asap .textes strong { font-size: 18px; line-height: 24px; font-weight: 800; }
.separateur-tard { padding: 18px 0 6px 10px; }

/* Panier vide */
.vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 8px 12px 16px; }
.vide img { width: 200px; height: auto; }

/* Récapitulatif */
.recap { padding: 16px 20px; /* tampon gagné (20) à 16 du coin */ border-radius: var(--r-bloc); background: var(--surface); box-shadow: var(--ombre-carte); display: flex; flex-direction: column; }
.recap .ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--encre-douce); padding: 3px 0; }
.recap .ligne strong { color: var(--encre); font-weight: 700; white-space: nowrap; }
.pointilles { height: 4px; margin: 14px 0 6px; background: radial-gradient(circle, var(--sable-400) 1.5px, transparent 1.8px) 0 0 / 12px 4px repeat-x; }
.recap .total { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 14px; }
.recap .total > span:first-child { font-size: 19px; font-weight: 700; }
.encart { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-petit); background: var(--sable-200); font-size: 16px; font-weight: 700; }

.champ-libelle { font-size: 17px; font-weight: 700; padding-left: 4px; }
.champ { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-radius: var(--r-petit); background: var(--surface); box-shadow: var(--ombre-carte); }
.champ input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 18px var(--font); color: var(--encre); }
.champ:focus-within { box-shadow: inset 0 0 0 2px var(--marine-800); }
.aide { font-size: 15px; line-height: 20px; color: var(--encre-douce); padding-left: 4px; }

.pied-paiement { display: flex; flex-direction: column; gap: 12px; }
.note-securite { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 15px; color: var(--encre-douce); }

/* Livraison */
.choix-retrait { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.choix { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border-radius: var(--r-bloc); background: var(--surface); min-height: 176px; position: relative; }
.choix.choisie { background: var(--surface); box-shadow: inset 0 0 0 2px var(--marine-800); }
.choix img { width: 40px; height: 40px; margin-bottom: 12px; }
.choix .radio { position: absolute; top: 22px; right: 22px; } /* rond (14) à 22 du coin : 36 − 22 */
.choix .nom { font-size: 19px; font-weight: 800; }
.choix .prix { margin-top: auto; padding-top: 12px; font-weight: 800; }
.ligne-lieu { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-bloc); background: var(--surface); }
.ligne-lieu .pastille-ico { width: 40px; height: 40px; border-radius: var(--r-rond); background: var(--sable-200); display: grid; place-items: center; flex: none; }
.ligne-lieu .textes { flex: 1; display: flex; flex-direction: column; }
.ligne-lieu strong { font-size: 18px; font-weight: 700; }

/* Suivi */
.ticket { margin-top: 20px; padding: 24px; border-radius: var(--r-bloc); background: var(--surface); box-shadow: var(--ombre-carte); }
.ticket .numero { display: flex; justify-content: space-between; align-items: flex-end; }
.ticket .client { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ticket .client strong { font-size: 24px; font-weight: 800; }
.etiquette { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-mini); font-size: 14px; font-weight: 700; background: var(--marine-100); }
.etiquette.prete { background: var(--algue-100); color: var(--algue-700); }
.etapes { margin-top: 24px; display: flex; flex-direction: column; }
.etape { display: flex; gap: 16px; }
.etape .repere { width: 44px; display: flex; flex-direction: column; align-items: center; flex: none; }
.etape .pastille { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; flex: none; transition: background .3s; }
.etape .liaison { flex: 1; width: 10px; overflow: hidden; min-height: 24px; color: var(--algue-700); position: relative; }
.etape .liaison.attente { color: var(--sable-400); }
.etape .liaison svg { display: block; position: absolute; top: 0; left: 0; }
.etape .texte { padding: 9px 0 33px; display: flex; flex-direction: column; gap: 4px; }
.etape:last-child .texte { padding-bottom: 0; }
.etape .texte strong { font-size: 19px; line-height: 26px; font-weight: 600; }
.etape.active .texte strong { font-weight: 800; }
.etape.attente .texte strong { color: var(--encre-douce); }
.etape.faite .pastille { background: var(--algue-100); color: var(--algue-700); }
.etape.active .pastille { background: var(--marine-800); color: var(--sable-50); }
.etape.active.verte .pastille { background: var(--algue-700); color: var(--sable-50); }
.etape.attente .pastille { background: var(--sable-200); color: var(--encre-douce); }
.etape.active .texte { padding-bottom: 24px; }
.etape:last-child.active .texte { padding-bottom: 0; }
.lieu { margin-top: 24px; display: flex; align-items: center; gap: 10px; padding: 16px 14px; border-radius: var(--r-petit); background: var(--sable-200); font-size: 16px; font-weight: 700; }
.lieu .heure { margin-left: auto; font-weight: 800; white-space: nowrap; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* Confirmation boutique */
.bandeau-ok { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-bloc); background: var(--algue-100); }
.bandeau-ok .pastille { width: 40px; height: 40px; border-radius: var(--r-rond); background: var(--algue-700); color: var(--sable-50); display: grid; place-items: center; flex: none; }
.bandeau-ok strong { font-size: 19px; font-weight: 800; }
.note-prevenir { display: flex; align-items: center; gap: 10px; padding: 4px 20px; color: var(--encre-douce); font-size: 16px; font-weight: 500; }

/* Listes groupées */
.groupe { border-radius: var(--r-bloc); background: var(--surface); padding: 4px 0; }
.groupe-ligne { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px; position: relative; }
.groupe-ligne + .groupe-ligne::before {
  content: ''; position: absolute; top: 0; left: 64px; right: 44px; height: 6px;
  background: url('assets/separateurs/vague-simple.svg') left center / auto 6px repeat-x; opacity: .9;
}
.groupe-ligne .pastille-ico { width: 40px; height: 40px; border-radius: var(--r-rond); background: var(--sable-200); display: grid; place-items: center; flex: none; }
/* Titre + sous-titre = 40 de haut, comme la pastille : elle reste à 16 du bord en haut, en bas et à gauche */
.groupe-ligne .textes > :nth-child(2) { font-size: 15px; line-height: 18px; }
.groupe-ligne .textes { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.groupe-ligne .textes strong { font-size: 18px; line-height: 22px; font-weight: 700; }
.groupe-ligne .valeur { color: var(--encre-douce); font-size: 17px; font-weight: 500; }
.groupe-ligne .chevron { color: var(--encre-douce); }
.groupe-ligne.danger { color: var(--brique-700); }
.groupe-ligne.danger .pastille-ico { background: var(--brique-100); }
.interrupteur { width: 52px; height: 32px; border-radius: 16px; background: var(--marine-300); position: relative; flex: none; transition: background .16s; }
.interrupteur::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: var(--sable-50); transition: transform .2s var(--courbe); }
.interrupteur.on { background: var(--marine-800); }
.interrupteur.on::after { transform: translateX(20px); }

/* Notification « commande prête » */
.notif {
  position: absolute; top: 56px; left: 10px; right: 10px; z-index: 80;
  display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 26px;
  background: rgba(255, 251, 244, .82);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 10px 30px -10px rgba(20, 38, 74, .3), inset 0 0 0 1px rgba(255, 255, 255, .6);
  animation: notif .5s var(--courbe);
  text-align: left;
}
.notif img { width: 40px; height: 40px; border-radius: var(--r-mini); flex: none; }
.notif .textes { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.notif .app { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .04em; }
.notif strong { font-size: 17px; font-weight: 800; }
.notif span.corps-notif { font-size: 15px; color: var(--encre-douce); }
@keyframes notif { from { transform: translateY(-140%); } }
@media (max-width: 600px) { .notif { top: calc(env(safe-area-inset-top) + 8px); } }

/* Paiement en cours */
.attente-paiement { position: absolute; inset: 0; z-index: 60; background: rgba(245, 237, 224, .86); display: grid; place-items: center; animation: fondu .2s; }
.attente-paiement div { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; }
.attente-paiement img { width: 120px; }

.vide-suivi { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-top: 48px; }
.vide-suivi img { width: 220px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Téléphone réel : l'appli prend tout l'écran, sans cadre */
@media (max-width: 600px) {
  :root {
    --haut: max(16px, calc(env(safe-area-inset-top) + 8px));
    --bas: max(16px, env(safe-area-inset-bottom));
    --cote-bas: 16px;
    --ecran-l: 100vw;
    --ecran-h: 100dvh;
  }
  body { background: var(--fond); }
  .scene { padding: 0; display: block; }
  .intro, .commandes { display: none; }
  .iphone-boite { width: 100%; height: 100dvh; }
  .iphone { width: 100%; height: 100dvh; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
  .iphone-ecran { width: 100%; height: 100dvh; border-radius: 0; }
  .ilot, .barre-etat { display: none; }
}

.encarts { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Améliorations UX (22/10) ---------- */

/* Ouvert / fermé sous le titre de l'Accueil */
.ouverture { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--algue-700); }
.ouverture .point { width: 10px; height: 10px; border-radius: 5px; background: var(--algue-700); box-shadow: 0 0 0 4px var(--algue-100); }
.ouverture.fermee { color: var(--brique-700); }

/* Barre « Voir le panier » au-dessus de la barre du bas */
.barre-panier {
  position: absolute; left: var(--cote-bas); right: var(--cote-bas); bottom: calc(var(--bas) + var(--h-onglets) + 10px); z-index: 19;
  height: 56px; border-radius: 28px; padding: 0 20px 0 8px;
  display: flex; align-items: center; gap: 12px;
  background: var(--action); color: var(--sur-action); font-size: 17px; font-weight: 700;
  box-shadow: 0 8px 24px -10px rgba(20, 38, 74, .45);
  animation: entreBas .3s var(--courbe);
}
.barre-panier .nb { min-width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--terracotta-500); color: var(--marine-800); font-weight: 800; }
.barre-panier strong { margin-left: auto; font-size: 18px; }
.barre-panier.saute-barre .nb { animation: saute .45s var(--courbe); }
.ecran.avec-panier .defile { padding-bottom: calc(var(--bas) + var(--h-onglets) + 32px + 66px); }
@keyframes entreBas { from { transform: translateY(24px); opacity: 0; } }

/* Pas de connexion */
.hors-ligne { position: absolute; top: calc(var(--haut) - 10px); left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--marine-800); color: var(--sable-50); font-size: 14px; font-weight: 700; white-space: nowrap; }

/* Suivi : attente, tampon gagné */
p.attente { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 2px; font-size: 17px; font-weight: 500; color: var(--encre-douce); }
p.attente strong { color: var(--encre); font-weight: 800; }
.tampon-gagne { margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-bloc); background: var(--terracotta-100); width: 100%; text-align: left; }
.tampon-gagne img { width: 52px; height: 52px; flex: none; }
.tampon-gagne .textes { display: flex; flex-direction: column; }
.tampon-gagne strong { font-size: 19px; font-weight: 800; }

/* Panier : astuce créneau calme, annulation */
.astuce { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 12px 14px; border-radius: var(--r-petit); background: var(--brume-100); font-size: 15px; font-weight: 500; text-align: left; }
.astuce > span:not(.ico) { flex: 1; }
.astuce strong { font-weight: 800; }
.annulation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 0 8px 0 18px; height: 52px; border-radius: 26px; background: var(--marine-600); color: var(--sable-50); font-size: 16px; font-weight: 600; animation: entreBas .25s var(--courbe); }
.annulation button { height: 40px; padding: 0 16px; border-radius: 20px; background: var(--sable-50); color: var(--encre); font-weight: 800; }

/* Recommander avec Apple Pay */
.btn.noir .montant-ap { margin-left: 10px; font-family: var(--font); font-size: 18px; font-weight: 700; opacity: .9; }
.lien-discret { align-self: center; padding: 8px 12px; font-size: 16px; font-weight: 700; color: var(--encre-douce); text-decoration: underline; text-underline-offset: 3px; }
.apple-pay {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 71; padding: 18px 24px 28px; border-radius: 54px;
  background: #F2F2F7; color: #000; font-family: system-ui, -apple-system, sans-serif;
  animation: monte .32s var(--courbe);
}
.ap-tete { display: flex; align-items: center; gap: 2px; margin-bottom: 12px; font-size: 22px; }
.ap-tete strong { font-weight: 600; }
.ap-annuler { margin-left: auto; color: #007AFF; font-size: 17px; font-family: inherit; }
.ap-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #D1D1D6; font-size: 15px; color: #6C6C70; }
.ap-ligne strong { color: #000; font-weight: 500; text-align: right; }
.ap-ligne.total strong { font-size: 22px; font-weight: 700; }
.ap-faceid { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; font-size: 15px; color: #007AFF; }
.ap-faceid.ok { color: #34C759; }
.ap-faceid.attente svg { animation: pulse 1.2s ease-in-out infinite; }

/* Formulaires (adresse, profil) */
.formulaire { display: flex; flex-direction: column; gap: 10px; }
.champs-2 { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 10px; }

/* Dynamic Island : la commande en cours */
.ilot { transition: width .45s var(--courbe); cursor: default; }
.ilot.activite { width: 200px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 8px; cursor: pointer; color: #fff; font: 600 14px/1 system-ui, -apple-system, sans-serif; }
.ilot.activite img { width: 24px; height: 24px; }
.ilot-droite { display: flex; align-items: center; gap: 5px; color: var(--soleil-400); }
.ilot.prete .ilot-droite { color: #7FD3AE; }

/* Texte plus grand (réglage d'accessibilité) */
#app.texte-grand .defile > *, #app.texte-grand .corps-feuille > *, #app.texte-grand .feuille .tete, #app.texte-grand .feuille .pied > * { zoom: 1.14; }


/* ---------- Améliorations UI (22/10, suite) ---------- */

/* Téléphone réel : pas de Dynamic Island simulé, le suivi passe sous le titre */
.suivi-mobile { display: none; }
@media (max-width: 600px) {
  .ilot.activite { display: none; }
  .suivi-mobile { display: block; }
  .suivi-mobile .ligne-lieu { margin-top: 12px !important; }
}

/* Tampons gagnés : panier et paiement */
.gain-tampon { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: var(--r-petit); background: var(--terracotta-100); font-weight: 800; color: var(--terracotta-700); }
.gain-tampon img { width: 32px; height: 32px; flex: none; }
.gain-tampon span { margin-left: auto; font-weight: 600; color: var(--encre-douce); }
.encarts .gain-tampon { border-radius: var(--r-petit); padding: 8px 14px 8px 8px; font-size: 16px; }

/* Paiement : identité déjà connue */
.lien-modifier { padding: 8px 4px; font-size: 16px; font-weight: 700; color: var(--terracotta-700); }

/* Suivi : les articles dans le ticket */
.ticket .articles { margin: 12px 0 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--encre-douce); }

/* Fidélité : derniers tampons */
.mini-tampon { width: 40px; height: 40px; flex: none; }
.groupe-ligne .gain { font-size: 17px; font-weight: 800; color: var(--terracotta-700); }

/* ---------- Petits dessins (22/10) ---------- */

/* Fiche boisson : lait, contenant, dose dessinés comme les tailles */
.tailles.dessins { row-gap: 8px; }
.taille .vol.remise { color: var(--algue-700); font-weight: 800; }
.encart-semaine .carte-origine { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--r-petit); background: var(--brume-100); }

/* Prix du bouton « Ajouter » : les chiffres qui changent défilent */
.prix-roulant { display: inline-flex; overflow: hidden; line-height: 24px; height: 24px; }
.prix-roulant .roule { display: inline-block; animation: roule .34s var(--courbe) both; }
.prix-roulant .roule.baisse { animation-name: rouleBas; }
@keyframes roule { from { transform: translateY(100%); opacity: 0; } }
@keyframes rouleBas { from { transform: translateY(-100%); opacity: 0; } }

/* L'article qui s'envole vers le panier, les confettis */
.envol { position: absolute; z-index: 85; pointer-events: none; border-radius: var(--r-interne); }
.confetti { position: absolute; top: 0; z-index: 95; pointer-events: none; }

/* Panier : échelle de marée */
.echelle { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.colonne { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.colonne .bassin {
  position: relative; width: 100%; height: 112px; border-radius: var(--r-petit); overflow: hidden;
  /* Trois graduations espacées de 28, et 28 de vide en haut (colonne de 112) */
  background: var(--surface) repeating-linear-gradient(to top, transparent 0 26px, var(--sable-200) 26px 28px) bottom / 100% 84px no-repeat;
  transition: box-shadow .16s var(--courbe);
}
.colonne .eau { position: absolute; left: 0; right: 0; bottom: 0; background: currentColor; transition: height .5s var(--courbe); }
.colonne.haute .eau { color: var(--terracotta-200); }
.colonne.montante .eau { color: #F1D08C; }
.colonne.calme .eau { color: var(--brume-300); }
.colonne .crete { position: absolute; left: 0; top: -7px; width: 100%; height: 8px; display: block; }
.colonne strong { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--encre-douce); white-space: nowrap; }
/* Créneau choisi : le contour passe par-dessus l'eau, tout autour de la colonne */
.colonne .bassin::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; transition: box-shadow .16s var(--courbe); }
.colonne.choisie .bassin::after { box-shadow: inset 0 0 0 2px var(--marine-800); } /* même contour que les autres choix */
.colonne strong { height: 26px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r-rond); }
.colonne.choisie strong { font-weight: 800; background: var(--marine-800); color: var(--sur-action); }
.colonne .mouette { position: absolute; left: 50%; top: -28px; margin-left: -15px; animation: mouette 3s ease-in-out infinite; }
@keyframes mouette { 50% { transform: translateY(-4px); } }
.legende-maree { margin: 10px 4px 0; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--encre-douce); }
.legende-maree strong { color: var(--encre); font-weight: 800; }

/* Suivi : tasse qui se remplit, onde sur l'étape en cours, ticket déchiré */
.ticket {
  padding-bottom: 36px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
}
.ticket .client { gap: 2px; }
.tampon-num { display: inline-block; margin-top: 8px; padding: 0 12px 2px; border: 3px solid var(--marine-800); border-radius: var(--r-mini); transform: rotate(-4deg); }
.tasse-suivi { display: block; overflow: visible; }
.tasse-suivi .niveau { transition: transform .8s var(--courbe); }
.tasse-suivi.remplit .niveau { animation: remplit 1.4s var(--courbe) backwards; }
@keyframes remplit { from { transform: translateY(80px); } }
.tasse-suivi .clapot { animation: clapot 4s linear infinite; animation-delay: var(--decalage, 0s); }
@keyframes clapot { to { transform: translateX(-48px); } }
.tasse-suivi .fumee path { animation: fumee 2.4s ease-in-out infinite; animation-delay: var(--decalage, 0s); }
@keyframes fumee { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.etape .repere { position: relative; }
.etape .onde { position: absolute; top: -10px; left: -10px; width: 64px; height: 64px; pointer-events: none; }
.etape .pastille { position: relative; z-index: 1; }

/* Fidélité : la marée monte d'un cran après une commande */
.maree.monte { animation: monteMaree 1.3s .3s var(--courbe) backwards; }
@keyframes monteMaree { from { height: var(--avant); } }

/* Boutique : notes en pictos, nuancier de torréfaction */
.note { display: inline-flex; align-items: center; gap: 4px; }
.note .picto-note { width: 18px; height: 18px; flex: none; }
.torrefaction { padding: 14px 12px 10px; border-radius: var(--r-bloc); background: var(--surface); }
.torrefaction .nuancier { display: block; width: 100%; height: auto; }
.torrefaction .bornes { display: flex; justify-content: space-between; padding: 4px 10px 0; font-size: 14px; font-weight: 600; color: var(--encre-douce); }

/* Séparateurs entre les sections */
.separateur { display: block; width: 100%; height: auto; margin-top: 28px; }
.separateur.ecume { margin-top: 24px; }

/* Tirer pour actualiser : une vague se forme */
.actualiser { height: 0; margin: 0 -20px; overflow: hidden; transition: height .35s var(--courbe); }
.actualiser svg { display: block; width: 100%; height: 100%; }
.actualiser .vague-actu { transform-origin: bottom; transform: scaleY(var(--houle, 0)); }
.actualiser.charge .vague-actu { transform: none; animation: houleActu 1s ease-in-out infinite alternate; }
.actualiser.charge .vague-actu + .vague-actu { animation-delay: -.5s; }
@keyframes houleActu { from { transform: translateX(-6%) scaleX(1.12); } to { transform: translateX(6%) scaleX(1.12); } }

/* Écrans vides : l'illustration flotte doucement */
.vide img, .aucun img, .vide-suivi img { animation: flotte 5s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-6px) rotate(-2deg); } }

/* ---------- Écran verrouillé (Live Activity, notification) ---------- */

/* Bouton latéral de l'iPhone : verrouille l'écran */
.bouton-lateral {
  position: absolute; right: -5px; top: 230px; width: 6px; height: 104px; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #2c2c30, #4a4a50); box-shadow: 1px 0 0 #55555b;
}
.bouton-lateral::before { content: ''; position: absolute; inset: -6px -14px -6px -4px; }
.bouton-lateral:hover { background: linear-gradient(90deg, #3a3a3e, #66666d); }
.bouton-lateral:active { transform: translateX(-2px); }


/* Écran éteint un instant, puis rallumé */
.iphone-ecran::after { content: ''; position: absolute; inset: 0; z-index: 99; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s ease-in; }
.iphone-ecran.eteint::after { opacity: 1; pointer-events: auto; }

.verrou {
  position: absolute; inset: 0; z-index: 95;
  display: flex; flex-direction: column; align-items: center;
  padding: 54px 12px 10px;
  color: var(--marine-800);
  transition: transform .42s var(--courbe), opacity .42s var(--courbe);
  animation: fondu .35s ease-out;
  touch-action: none; user-select: none;
  font-variant-numeric: normal;
}
.verrou[hidden] { display: none; }
.verrou.part { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.verrou .barre-etat { color: var(--marine-800); }

.vr-haut { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.vr-haut .ico { margin-bottom: 10px; opacity: .9; }
.vr-date { font-size: 21px; line-height: 26px; font-weight: 600; }
.vr-heure { font-size: 104px; line-height: 104px; font-weight: 800; letter-spacing: -0.04em; margin-top: 2px; }

/* Notifications et Live Activity : empilées en bas, comme sur iOS */
.vr-pile { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }

.vr-notif {
  display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 26px;
  background: rgba(255, 251, 244, .72);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  animation: entreBas .4s var(--courbe);
}
.vr-notif img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.vr-notif .textes { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vr-notif .app { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .04em; }
.vr-notif strong { font-size: 17px; font-weight: 800; }
.vr-notif .corps-notif { font-size: 15px; color: var(--encre-douce); }

/* Live Activity : bloc marine, numéro en très gros, 3 segments */
.vr-live { display: block; width: 100%; padding: 16px 16px 22px; border-radius: 26px; background: var(--marine-800); color: var(--sable-50); font-variant-numeric: tabular-nums; }
.vr-live-haut { display: flex; justify-content: space-between; align-items: center; }
.vr-live-haut .marque { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.vr-live-haut .marque img { width: 24px; height: 24px; }
.vr-live-heure { font-size: 15px; font-weight: 700; color: var(--terracotta-500); }
.vr-live-heure.prete { color: #7FD3AE; }
.vr-live-milieu { display: flex; align-items: center; gap: 16px; margin: 12px 0; }
.vr-live-num { font-size: 52px; line-height: 52px; font-weight: 800; letter-spacing: -0.03em; }
.vr-live-milieu .textes { display: flex; flex-direction: column; min-width: 0; }
.vr-live-milieu strong { font-size: 19px; line-height: 24px; font-weight: 800; }
.vr-live-milieu .textes span { font-size: 15px; color: var(--sable-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-live-piste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 6px; } /* barres (4) à 22 du coin : 22 + 4 = 26 */
.vr-live-piste span { height: 8px; border-radius: 4px; background: rgba(245, 237, 224, .2); transition: background .4s; }
.vr-live-piste span.fait { background: var(--sable-300); }
.vr-live-piste span.encours { background: linear-gradient(90deg, var(--terracotta-500) 50%, rgba(245, 237, 224, .2) 50%); }
.vr-live-piste span.prete { background: #7FD3AE; }

.vr-bas { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 34px 14px; color: var(--sable-50); }
.vr-rond { width: 50px; height: 50px; border-radius: 25px; display: grid; place-items: center; background: rgba(11, 24, 48, .38); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.vr-glisser { font-size: 14px; font-weight: 600; color: rgba(255, 251, 244, .82); }
.vr-barre { width: 140px; height: 5px; border-radius: 3px; background: var(--sable-50); margin-bottom: 0; }



/* ---------- Écran d'accueil de l'iPhone : les widgets Marée Café ---------- */

.accueil-tel {
  position: absolute; inset: 0; z-index: 94;
  display: flex; flex-direction: column; align-items: center;
  padding: 70px 28px 10px;
  transition: transform .36s var(--courbe), opacity .36s var(--courbe);
  animation: fondu .3s ease-out;
  font-variant-numeric: normal;
}
/* Fond d'écran : lever de soleil sur l'estuaire, le même verrouillé et à l'accueil */
.accueil-tel, .verrou { background: var(--fond-ecran); }
.iphone-ecran {
  --fond-ecran:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 912' preserveAspectRatio='none'%3E%3Ccircle cx='300' cy='560' r='70' fill='%23D98B6F'/%3E%3Cpath d='M0 600 C70 580 140 580 210 600 S350 620 420 600 V912 H0Z' fill='%239AA6BD'/%3E%3Cpath d='M0 650 C70 630 140 630 210 650 S350 670 420 650 V912 H0Z' fill='%237A879F'/%3E%3Cpath d='M0 710 C70 690 140 690 210 710 S350 730 420 710 V912 H0Z' fill='%234E586C'/%3E%3Cpath d='M0 780 C70 760 140 760 210 780 S350 800 420 780 V912 H0Z' fill='%232A3D63'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    linear-gradient(180deg, var(--sable-100) 0%, var(--terracotta-100) 45%, var(--terracotta-200) 64%);
}
.accueil-tel[hidden] { display: none; }
/* L'appli s'ouvre : l'écran d'accueil s'efface en grandissant */
.accueil-tel.part { transform: scale(1.12); opacity: 0; pointer-events: none; }

.hw-bandeau { position: absolute; top: 56px; left: 10px; right: 10px; width: auto; z-index: 2; text-align: left; }

.hw-grille { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.hw-legende { align-self: center; font-size: 13px; font-weight: 600; color: var(--marine-800); margin-bottom: 18px; }
.hw-legende-petit { align-self: flex-start; width: 170px; text-align: center; }

.hw-widget { border-radius: 26px; padding: 16px; background: var(--surface); color: var(--encre); text-align: left; box-shadow: inset 0 0 0 2px var(--sable-300); }
.hw-widget:active { transform: scale(.97); }
.hw-surtitre { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--terracotta-700); }
.hw-surtitre img { width: 20px; height: 20px; border-radius: 6px; }
.hw-nom { display: block; margin-top: 8px; font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-sous { display: block; margin-top: 2px; font-size: 14px; line-height: 18px; color: var(--encre-douce); }

.hw-moyen { width: 100%; height: 170px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; column-gap: 16px; }
.hw-col { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
.hw-bouton { grid-column: 1; grid-row: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; background: var(--marine-800); color: var(--sur-action); font-size: 15px; font-weight: 800; }
.hw-maree { grid-column: 2; grid-row: 1 / 3; border-radius: 12px; padding: 12px; background: var(--brume-100); display: flex; flex-direction: column; text-align: left; }
.hw-maree .hw-surtitre { color: var(--encre-douce); }
/* Couleur de la marée : haute en terracotta, montante en soleil, basse en brume */
.hw-maree.haute { background: var(--terracotta-100); }
.hw-maree.haute .hw-surtitre { color: var(--terracotta-700); }
.hw-maree.montante { background: #FBEFD3; }
.hw-maree.montante .hw-surtitre { color: #8A6414; }
.hw-maree.calme .hw-surtitre { color: var(--marine-500); }
.hw-niveau { margin-top: auto; font-size: 20px; line-height: 24px; font-weight: 800; }

.hw-petit { width: 170px; height: 170px; display: flex; flex-direction: column; }
.hw-prix { margin-top: auto; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

.hw-recherche { margin-top: auto; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; background: rgba(11, 24, 48, .38); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--sable-50); font-size: 14px; font-weight: 600; }
.accueil-tel .vr-barre { margin-bottom: 0; }

@media (max-width: 600px) {
  .bouton-lateral, .verrou, .accueil-tel { display: none; }
}

/* ---------- Animations : douces, en vague, dans l'esprit de la marée ----------
   Toutes coupées par « réduire les animations » (règle prefers-reduced-motion plus haut). */

@keyframes vague-entre { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { 0% { transform: scale(.9); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes appui { 0% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes rond-plein { from { transform: scale(0); } 60% { transform: scale(1.25); } }
@keyframes glisse-on { from { transform: translateX(0); } }
@keyframes glisse-off { from { transform: translateX(20px); } }
@keyframes rebond { 0% { transform: translateY(0); } 35% { transform: translateY(-6px) scale(1.08); } 65% { transform: translateY(1px); } 100% { transform: none; } }
@keyframes eau-monte { from { height: 0; } }
@keyframes ressac { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes respire { 50% { opacity: .55; } }
@keyframes eveil { from { opacity: 0; transform: translateY(-10px) scale(.98); } }

/* Changement d'écran : le contenu arrive en vague, bloc après bloc */
.ecran:is(.fondu, .entre-droite, .entre-gauche) .defile > * { animation: vague-entre .5s var(--courbe) backwards; }
.ecran:is(.fondu, .entre-droite, .entre-gauche) .defile > :nth-child(2) { animation-delay: .04s; }
.ecran:is(.fondu, .entre-droite, .entre-gauche) .defile > :nth-child(3) { animation-delay: .08s; }
.ecran:is(.fondu, .entre-droite, .entre-gauche) .defile > :nth-child(4) { animation-delay: .12s; }
.ecran:is(.fondu, .entre-droite, .entre-gauche) .defile > :nth-child(5) { animation-delay: .16s; }
.ecran:is(.fondu, .entre-droite, .entre-gauche) .defile > :nth-child(n+6) { animation-delay: .2s; }
/* Les cartes de la Carte et de la Boutique suivent, comme une houle */
.ecran.fondu :is(.liste, .grille-2) > * { animation: vague-entre .55s var(--courbe) backwards; }
.ecran.fondu :is(.liste, .grille-2) > :nth-child(2) { animation-delay: .06s; }
.ecran.fondu :is(.liste, .grille-2) > :nth-child(3) { animation-delay: .12s; }
.ecran.fondu :is(.liste, .grille-2) > :nth-child(4) { animation-delay: .18s; }
.ecran.fondu :is(.liste, .grille-2) > :nth-child(n+5) { animation-delay: .24s; }
/* Les feuilles : leur contenu suit la feuille qui monte */
.feuille.monte .corps-feuille > * { animation: vague-entre .5s .08s var(--courbe) backwards; }
.feuille.monte .corps-feuille > :nth-child(2) { animation-delay: .14s; }
.feuille.monte .corps-feuille > :nth-child(n+3) { animation-delay: .2s; }

/* L'onglet choisi rebondit */
.ecran.fondu ~ .onglets .onglet.actif .ico { animation: rebond .5s var(--courbe); }

/* Appui : les cartes et les grands boutons s'enfoncent un peu */
:is(.boisson-ouvrir, .produit-ouvrir, .option, .asap, .choix, .segment, .groupe-ligne, .filtre, .astuce, .encart-semaine, .bouton-recommander, .ligne-lieu) { transition: transform .16s var(--courbe), background .16s, box-shadow .16s; }
:is(.boisson-ouvrir, .produit-ouvrir, .option, .asap, .choix, .segment, .groupe-ligne, .filtre, .astuce, .encart-semaine, .bouton-recommander, .ligne-lieu):active { transform: scale(.98); }
.boisson:has(.boisson-ouvrir:active), .produit:has(.produit-ouvrir:active) { transform: scale(.98); }
.boisson, .produit { transition: transform .16s var(--courbe); }

/* Le choix qu'on vient de faire : il répond */
.vient .radio::after, .vient.choisie .radio::after { animation: rond-plein .35s var(--courbe); }
.vient.choisie:is(.asap, .option, .choix, .segment) { animation: appui .3s var(--courbe); }
.vient .interrupteur.on::after { animation: glisse-on .26s var(--courbe); }
.vient .interrupteur:not(.on)::after { animation: glisse-off .26s var(--courbe); }
.taille.vient svg, .couleur.vient .pastille-couleur, .filtre.vient, .colonne.vient .bassin { animation: pop .4s var(--courbe); }
.taille.vient .socle { animation: fondu .3s; }
.colonne.vient strong { animation: pop .4s var(--courbe); }
.quantite button.vient { animation: pop .3s var(--courbe); }
.plus.vient { animation: pop .4s var(--courbe); }

/* Panier : l'eau des créneaux monte quand la feuille s'ouvre */
.feuille.monte .colonne .eau { animation: eau-monte .9s var(--courbe) backwards; }
.feuille.monte .colonne:nth-child(2) .eau { animation-delay: .05s; }
.feuille.monte .colonne:nth-child(3) .eau { animation-delay: .1s; }
.feuille.monte .colonne:nth-child(4) .eau { animation-delay: .15s; }
.feuille.monte .colonne:nth-child(5) .eau { animation-delay: .2s; }
.feuille.monte .colonne:nth-child(6) .eau { animation-delay: .25s; }

/* La vague au pied des visuels ondule doucement, en continu */
.visuel .vague-fond { left: -6%; right: auto; width: 112%; /* un SVG ne s'étire pas avec left/right seuls */ animation: ressac 6s ease-in-out infinite alternate; }
.visuel:nth-of-type(2n) .vague-fond { animation-duration: 7.5s; animation-direction: alternate-reverse; }

/* Suivi : la pastille « Prête » éclot */
.etape.verte .pastille { animation: pop .6s var(--courbe); }

/* Live Activity : la barre en cours respire */
.vr-live-piste span.encours { animation: respire 2s ease-in-out infinite; }

/* Réveil de l'écran verrouillé, arrivée sur l'écran d'accueil */
.verrou.entre .vr-haut { animation: eveil .6s var(--courbe) backwards; }
.verrou.entre .vr-pile > * { animation: vague-entre .55s .15s var(--courbe) backwards; }
.verrou.entre .vr-pile > :nth-child(2) { animation-delay: .25s; }
.verrou.entre .vr-bas { animation: fondu .6s .3s backwards; }
.accueil-tel.entre .hw-grille > * { animation: vague-entre .5s var(--courbe) backwards; }
.accueil-tel.entre .hw-grille > :nth-child(3) { animation-delay: .08s; }
.accueil-tel.entre .hw-grille > :nth-child(4) { animation-delay: .1s; }
.accueil-tel.entre .hw-recherche { animation: fondu .5s .2s backwards; }
.hw-widget { transition: transform .16s var(--courbe); }

/* Page de présentation : l'arrivée, puis des boutons qui répondent */
.intro > *, .commandes > * { animation: vague-entre .6s var(--courbe) backwards; }
.intro > :nth-child(2), .commandes > :nth-child(2) { animation-delay: .06s; }
.intro > :nth-child(3), .commandes > :nth-child(3) { animation-delay: .12s; }
.intro > :nth-child(n+4), .commandes > :nth-child(n+4) { animation-delay: .18s; }
.iphone-boite { animation: vague-entre .7s .1s var(--courbe) backwards; }
.ctrl { transition: background .16s, color .16s, transform .16s var(--courbe); }
.ctrl:active, .remettre:active { transform: scale(.97); }
.ctrl .interrupteur::after { transition: transform .26s var(--courbe); }
.ctrl .interrupteur { transition: background .2s; }