/* Azur, glacier. Style "Glacier".
   Un store de terrasse en haut, des formes molles, et un cornet qu'on
   compose soi-même : chaque boule se pose avec un rebond. */

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  src: url('../fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans Variable';
  src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sable: #FFE8C7;
  --sable-clair: #FFF5E6;
  --encre: #26180D;
  --encre-doux: #6E5540;      /* 4.74:1 sur le sable */
  --corail: #FF6F59;          /* aplats et formes */
  --corail-texte: #C03317;    /* petit texte sur le sable, 4.52:1 */
  --menthe: #7ED6B4;
  --bleu: #2A7DE1;
  --bleu-texte: #1A5FB4;      /* petit texte sur le sable, 4.57:1 */
  --gaufre: #C98B43;
  --filet: rgba(38, 24, 13, .18);
  --ressort: cubic-bezier(.2, 1.5, .4, 1);
  --court: cubic-bezier(.3, .9, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Les formes molles débordent volontairement du bord : overflow-x: clip
   les coupe au ras de la fenêtre sans créer de défilement horizontal, ce que
   overflow-x: hidden sur body ne fait pas, puisqu'il se propage à la fenêtre. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding: 0 0 8rem;
  background: var(--sable);
  color: var(--encre);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--corail); color: var(--sable-clair); }

.terrasse { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }

/* ── Le store ─────────────────────────────────────────────────────────── */

.store {
  height: clamp(4rem, 9vw, 7rem);
  background: repeating-linear-gradient(90deg,
    var(--corail) 0 clamp(2.5rem, 6vw, 4.5rem),
    var(--sable-clair) clamp(2.5rem, 6vw, 4.5rem) clamp(5rem, 12vw, 9rem));
  /* Le bord festonné du store, découpé au masque. */
  -webkit-mask-image: radial-gradient(circle clamp(1.25rem, 3vw, 2.25rem) at 50% 0, #000 98%, transparent 100%);
  mask-image: radial-gradient(circle clamp(1.25rem, 3vw, 2.25rem) at 50% 0, #000 98%, transparent 100%);
  -webkit-mask-size: clamp(2.5rem, 6vw, 4.5rem) 100%;
  mask-size: clamp(2.5rem, 6vw, 4.5rem) 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 bottom;
  mask-position: 0 bottom;
  transform: scaleY(-1);
}

/* ── Enseigne ─────────────────────────────────────────────────────────── */

.enseigne { position: relative; padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(2rem, 5vh, 3rem); }
.bulle {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
}
.bulle-1 { width: 22rem; height: 18rem; top: -3rem; right: -6rem; background: var(--menthe); }
.bulle-2 { width: 13rem; height: 13rem; bottom: -5rem; left: -9rem; background: var(--bleu); opacity: .2; }

.titre {
  margin: 0;
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-size: clamp(4rem, 19vw, 15rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 82, 'wght' 800;
  line-height: .82;
  letter-spacing: -.05em;
}
.titre span { color: var(--corail-texte); }
.accroche {
  max-width: 40ch;
  margin: 1.75rem 0 0;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 500;
}
.lieu-jour {
  margin: 1rem 0 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-doux);
}

/* ── Le composeur de cornet ───────────────────────────────────────────── */

section { padding-top: clamp(3rem, 8vh, 5rem); }
.section-h {
  margin: 0 0 .75rem;
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 88, 'wght' 760;
  line-height: 1;
  letter-spacing: -.04em;
}
.section-p { max-width: 50ch; margin: 0 0 2rem; color: var(--encre-doux); }

.composeur { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 52rem) { .composeur { grid-template-columns: 18rem 1fr; align-items: start; } }
html:not(.js) .composeur { display: none; }
.sans-js-note { display: none; }
html:not(.js) .sans-js-note { display: block; max-width: 50ch; color: var(--encre-doux); }

.cone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 22rem;
  padding: 1.5rem;
  border-radius: 2rem;
  background: var(--sable-clair);
}
.boules { display: flex; flex-direction: column-reverse; align-items: center; }
.boule {
  width: 5.6rem;
  height: 5.6rem;
  margin-bottom: -1.9rem;
  border-radius: 50%;
  background: var(--c, var(--corail));
  box-shadow: inset -.4rem -.5rem 0 rgba(38, 24, 13, .1);
}
.js .boule { animation: poser .5s var(--ressort) both; }
@keyframes poser {
  0% { transform: translateY(-2.5rem) scale(.6); opacity: 0; }
  60% { transform: translateY(.25rem) scale(1.06); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* La gaufre, dessinée au quadrillage. */
.gaufre {
  width: 4.6rem;
  height: 7rem;
  margin-top: .4rem;
  clip-path: polygon(0 0, 100% 0, 54% 100%, 46% 100%);
  background:
    repeating-linear-gradient(58deg, rgba(38,24,13,.22) 0 1.5px, transparent 1.5px 12px),
    repeating-linear-gradient(-58deg, rgba(38,24,13,.22) 0 1.5px, transparent 1.5px 12px),
    var(--gaufre);
}
.cone-vide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 11rem;
  text-align: center;
  font-size: .85rem;
  color: var(--encre-doux);
}

.parfums { display: grid; gap: .6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
@media (min-width: 30rem) { .parfums { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .parfums { grid-template-columns: repeat(3, 1fr); } }
.choix {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .7rem .9rem;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--sable-clair);
  color: inherit;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform .22s var(--court), background-color .22s var(--court);
}
.choix:hover { transform: translateY(-2px); background: #fff; }
.choix:active { transform: translateY(1px) scale(.98); }
.choix:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
.choix[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.pastille {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(38, 24, 13, .2);
}

.addition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 2px dashed var(--filet);
  border-radius: 1.25rem;
}
.addition-total {
  font-family: 'Bricolage Grotesque Variable', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.addition-detail { font-size: .88rem; color: var(--encre-doux); }
.vider {
  margin-left: auto;
  padding: .55rem 1.2rem;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .22s var(--court);
}
.vider:hover { background: var(--encre); color: var(--sable-clair); }
.vider:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

/* ── La carte des parfums ─────────────────────────────────────────────── */

.carte { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--encre); }
.parfum {
  display: grid;
  gap: .2rem 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--filet);
}
@media (min-width: 46rem) { .parfum { grid-template-columns: 2.5rem 1fr 9rem; align-items: baseline; } }
.parfum-rond { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c); }
.parfum-nom {
  font-family: 'Bricolage Grotesque Variable', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.025em;
}
.parfum-det { font-size: .9rem; color: var(--encre-doux); max-width: 54ch; }
.parfum-note { font-size: .82rem; font-weight: 700; color: var(--bleu-texte); }
@media (min-width: 46rem) { .parfum-note { text-align: right; } }

.tarifs-boules {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.tarifs-boules li {
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--sable-clair);
  font-size: .9rem;
  font-weight: 600;
}
.tarifs-boules b { color: var(--corail-texte); }

/* ── Venir ────────────────────────────────────────────────────────────── */

.venir-grille { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 48rem) { .venir-grille { grid-template-columns: 1fr 1fr; } }
.venir-grille p { margin: 0 0 1rem; max-width: 44ch; }
.venir-grille a { color: var(--bleu-texte); text-underline-offset: .25em; }
.horaires { margin: 0; }
.horaire { display: flex; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--filet); }
.horaire dt { width: 11ch; font-weight: 700; }
.horaire dd { margin: 0 0 0 auto; color: var(--encre-doux); }
.horaire.ferme dd { color: var(--corail-texte); }

.venir-grille .passer {
  display: inline-block;
  margin-top: .8rem;
  padding: .95rem 2.1rem;
  border-radius: 999px;
  background: var(--encre);
  color: var(--sable-clair);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  transition: transform .22s var(--court), background-color .22s var(--court);
}
.venir-grille .passer:hover { transform: translateY(-2px); background: var(--corail-texte); }
.passer:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.pied {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 1.25rem;
  border-top: 2px solid var(--encre);
  font-size: .82rem;
  color: var(--encre-doux);
}

/* ── Révélation : courte et élastique ─────────────────────────────────── */

.js .rv { opacity: 0; transform: translateY(14px) scale(.985); animation: secours .5s var(--court) 2.6s forwards; }
.js .rv.vu {
  opacity: 1;
  transform: none;
  animation: none;
  transition: opacity .42s var(--court) var(--retard, 0ms), transform .46s var(--ressort) var(--retard, 0ms);
}
@keyframes secours { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.vu { opacity: 1; transform: none; transition: none; animation: none; }
  .js .boule { animation: none; }
  .choix:hover, .venir-grille .passer:hover { transform: none; }
}

/* ── Bandeau Webot ────────────────────────────────────────────────────────
   Identique sur toutes les démos, volontairement neutre pour rester lisible
   quel que soit le style derrière. Police système : elle ne compte pas dans
   les deux familles de la démo. */

.webot-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 10;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(16, 16, 18, .92);
  color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
@supports (backdrop-filter: blur(8px)) {
  .webot-bar { background: rgba(16, 16, 18, .78); backdrop-filter: blur(10px); }
}
.webot-bar p { margin: 0; color: rgba(255, 255, 255, .78); }
.webot-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 1px;
  white-space: nowrap;
}
.webot-bar a:hover { border-bottom-color: #fff; }
.webot-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 34rem) {
  .webot-bar { top: .75rem; bottom: auto; gap: .75rem; padding: .5rem .9rem; font-size: .75rem; }
}

/* Libellé réservé aux lecteurs d'écran. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}