/* =========================================================
   Délices du Mont — Granby
   Couleurs EXACTES du logo 2026 (rouge, noir, blanc).
   Polices : celles de Shefford (titre manuscrit + Lemonada).
   Le logo a un fond transparent avec dessin noir :
   toujours le poser sur fond blanc ou pâle.
   ========================================================= */
@font-face {
  font-family: 'beyond_the_mountainsregular';
  src: url('../fonts/beyond_the_mountains-webfont.woff2') format('woff2');
  font-display: swap;
}

:root {
  --brand: #ED1C24;        /* rouge du logo */
  --brand-dark: #C4141B;   /* survol des boutons */
  --brand-line: #A01016;   /* liseré sous les boutons */
  --ink: #231F20;          /* noir du logo (texte, fonds foncés) */
  --muted: #6E625C;        /* gris chaud */
  --bg: #ffffff;
  --bg-alt: #FBF5EC;       /* crème chaude (sections alternées) */
  --line: #EADFD2;
  --shadow: 0 8px 24px rgba(90, 50, 25, .09); /* ombre chaude, douce */

  --font-script: 'beyond_the_mountainsregular', cursive;
  --font-title: 'Lemonada', cursive;
  --font-body: 'Open Sans', sans-serif;
  --radius: 16px;
  --header-h: 100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 720px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .9em; }

/* --- Boutons --- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  text-align: center;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-order { background: var(--brand); color: #fff; box-shadow: inset 0 -3px 0 var(--brand-line), 0 6px 18px rgba(0, 0, 0, .18); }
.btn-order:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }
.btn-ghost { border: 2px solid #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-small { padding: 9px 18px; font-size: .9em; }

/* --- En-tête (blanc, pour que le logo noir ressorte) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}
/* Pics blancs sous l'en-tête (dents de scie comme Shefford) : prolongent l'en-tête blanc */
.site-header::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 100%;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Cpolygon points='0,0 26,0 13,10' fill='%23FFFFFF'/%3E%3C/svg%3E") repeat-x;
  background-size: 26px 10px;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .12));
}
/* Logo + nom + interrupteur de succursale (Shefford / Granby) */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Look d'origine ; petit effet : au clic, la pastille glisse et prend la couleur de l'autre ville */
.loc-switch {
  position: relative;
  isolation: isolate;
  display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 30px;
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--line);
}
.loc-switch::before {
  content: '';
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  z-index: -1;
  border-radius: 30px;
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(237, 28, 36, .35);
  transition: transform .3s cubic-bezier(.5, 0, .2, 1), background-color .3s ease, box-shadow .3s ease;
}
.loc-switch.is-granby::before { transform: translateX(100%); }
/* au clic, la pastille prend le bleu de Shefford en glissant */
.loc-switch.go::before { background: #2A62B7; box-shadow: 0 2px 6px rgba(42, 98, 183, .35); }
.loc-switch.is-granby.go::before { transform: none; }
.loc-switch.go:not(.is-granby)::before { transform: translateX(100%); }
.loc-opt {
  text-align: center;
  padding: 1px 14px;
  border-radius: 30px;
  color: var(--muted);
  font-weight: 700;
  font-size: .78em;
  line-height: 1.8;
  text-decoration: none;
  transition: color .3s ease;
}
.loc-opt:hover { color: var(--ink); }
.loc-opt.active { color: #fff; }
/* pendant la glissade, les couleurs suivent la pastille */
.loc-switch.go .loc-opt.active { color: var(--muted); }
.loc-switch.go .loc-opt:not(.active) { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .loc-switch::before { transition: none; }
}

.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.logo { display: block; line-height: 0; }
.logo img { height: 76px; width: auto; }
.logo-text { font-family: var(--font-title); font-size: 1.05em; line-height: 1.15; white-space: nowrap; color: var(--ink); text-decoration: none; }
.main-nav { display: flex; gap: 22px; margin-left: auto; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.main-nav a:hover { color: var(--brand); }
.nav-toggle { display: none; }

/* Deux versions du contenu : succursale seulement (par défaut) / commande en ligne active
   (html.avec-commande, posée par js/main.js quand ORDER_URL est rempli) */
html:not(.avec-commande) .si-en-ligne,
html.avec-commande .si-succursale { display: none !important; }

/* --- Hero --- */
.hero {
  /* TODO photo : photo d'ingrédients temporaire → remplacer par une photo de Granby ou d'un plat */
  position: relative;
  background:
    linear-gradient(rgba(35, 31, 32, .62), rgba(70, 35, 20, .62)),
    url(../images/ingredients.webp) center / cover no-repeat;
  color: #fff;
  padding: 120px 0 130px;
  text-align: center;
}
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 10px;
  background: url(../images/triangle_bg.png) repeat-x;
  background-size: 26px 10px;
}
.hero-kicker { text-transform: uppercase; letter-spacing: .15em; font-weight: 700; font-size: clamp(.78em, 4.2vw, 1em); white-space: nowrap; margin: 0 0 10px; }
.hero h1 { font-family: var(--font-script); font-weight: normal; font-size: clamp(2.6em, 8vw, 5.2em); line-height: 1.15; }
.hero h1 span { color: var(--brand); }
/* Slogan + étoiles : toujours sur une seule ligne, taille ajustée à l'écran */
.hero-tagline { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: clamp(.7em, 3.6vw, .95em); white-space: nowrap; margin: 0 0 18px; }
.hero-tagline::before, .hero-tagline::after { content: '★'; color: var(--brand); margin: 0 .6em; }
.hero-lead { max-width: 560px; margin: 0 auto 30px; font-size: 1.1em; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* --- Sections --- */
.section { padding: 80px 0; }
.section-alt { background: var(--bg-alt); }
/* Comme Shefford : h1 en manuscrit, titres de section en Lemonada */
.section-title { font-family: var(--font-title); font-size: clamp(1.8em, 5vw, 2.6em); text-align: center; margin-bottom: 40px; }
/* Petit mot manuscrit au-dessus des titres : touche chaleureuse */
.eyebrow {
  font-family: var(--font-script);
  color: var(--brand);
  font-size: clamp(1.5em, 4vw, 1.9em);
  line-height: 1;
  text-align: center;
  margin: 0 0 4px;
  transform: rotate(-2deg);
}
.eyebrow.left { text-align: left; transform-origin: left; }
.reviews-band .eyebrow { color: #fff; opacity: .9; }

/* Ligne rouge + étoile, reprise du logo */
.section-title::after {
  content: '★';
  display: block;
  width: 140px;
  margin: 8px auto 0;
  font-size: .45em;
  line-height: 1;
  text-align: center; /* étoile toujours au milieu des deux lignes, même pour les titres alignés à gauche */
  color: var(--brand);
  background:
    linear-gradient(var(--brand), var(--brand)) left center / 55px 2px no-repeat,
    linear-gradient(var(--brand), var(--brand)) right center / 55px 2px no-repeat;
}
.section-title.left { text-align: left; margin-bottom: 20px; }
.section-title.left::after { margin-left: 0; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.step { background: var(--bg-alt); border-radius: var(--radius); padding: 28px 24px; text-align: center; box-shadow: var(--shadow); }
.step-num {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
  box-shadow: 0 0 0 3px #fff;
}
/* Anneau rouge autour du numéro : se trace en faisant le tour (voir animations plus bas) */
.step-ring {
  position: absolute; inset: -6px;
  width: 56px; height: 56px;
  transform: rotate(-90deg); /* le tracé part du haut */
  overflow: visible;
}
.step-ring circle { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; }
.step h3 { font-size: 1.1em; }
.step p { margin: 0; color: var(--muted); }

/* --- Menu : même HTML que Shefford (onglets .selecton + lignes .food-menu) --- */
ul.selecton {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 0; margin: 0 0 36px;
}
ul.selecton li > a {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  border-radius: 30px;
  color: var(--ink);
  font-size: .85em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
ul.selecton li > a:hover { border-color: var(--brand); color: var(--brand); }
ul.selecton li > a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin-bottom: 30px; }
.menu-grid .col-12 { grid-column: 1 / -1; }
.food-menu { display: none; }
.food-menu.active { display: block; animation: menu-fade .3s ease; }
@keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }

.food-menu .menu-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px dashed var(--line);
}
.food-menu .menu-row:hover { background: var(--bg-alt); }
.menu-name { flex: 1 1 auto; font-weight: 600; line-height: 1.35; }
.menu-name em { font-style: normal; font-weight: 400; font-size: .82em; color: var(--muted); }
.menu-price { flex: 0 0 auto; font-weight: 700; color: var(--brand); white-space: nowrap; }
.menu-sizes { flex: 0 0 auto; display: inline-flex; gap: 6px; font-weight: 700; color: var(--brand); }
.menu-sizes > span { width: 54px; text-align: right; }
.menu-row--head { border-bottom: 2px solid var(--ink) !important; }
.menu-row--head .menu-name, .menu-row--head .menu-sizes > span { color: var(--muted); font-size: .9em; }
.food-menu .menu-subhead { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; }
.food-menu .menu-subhead h3 { margin: 0; font-family: var(--font-title); font-size: 1.15em; white-space: nowrap; }
.food-menu .menu-subhead .line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); }
.food-menu .menu-legend { margin: 0 0 12px; color: var(--muted); font-size: .9em; }
.menu-note { text-align: center; color: var(--muted); font-size: .9em; margin: 0 0 30px; }
.menu-note b { color: var(--brand); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.facts { list-style: none; padding: 0; margin: 20px 0 0; }
.facts li { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.hours td:last-child { text-align: right; font-weight: 600; }

/* --- Bandeau d'infos rapides --- */
.perks { padding: 34px 0; border-bottom: 1px solid var(--line); }
.perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.perk { display: flex; align-items: center; gap: 12px; }
.perk svg {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 10px;
  border-radius: 50%;
  background: var(--bg-alt);
  fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.perk strong { display: block; line-height: 1.2; }
.perk span { color: var(--muted); font-size: .88em; }

/* --- Incontournables --- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature { background: #fff; border-radius: var(--radius); padding: 28px; border-left: 4px solid var(--brand); box-shadow: var(--shadow); }
.feature h3 { font-family: var(--font-title); font-size: 1.25em; color: var(--ink); margin-bottom: .5em; }
.feature p { margin: 0; color: var(--muted); }

/* --- Avis --- */
.reviews-band { background: var(--ink); color: #fff; }
.reviews-band .section-title { color: #fff; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review { margin: 0; padding: 26px; border-radius: var(--radius); background: rgba(255, 255, 255, .07); border-top: 3px solid var(--brand); }
.review p { margin: 0 0 14px; font-size: 1.05em; }
.review cite { font-style: normal; font-weight: 700; }
.review cite::before { content: '★ '; color: var(--brand); }

/* --- Mot de la famille --- */
.famille { background: var(--bg-alt); }
.famille-texte { font-size: 1.08em; line-height: 1.75; }
.signature {
  font-family: var(--font-script);
  font-size: 2.2em;
  color: var(--brand);
  margin: 10px 0 24px;
  transform: rotate(-3deg);
}

/* --- FAQ --- */
.faq details { background: #fff; border-radius: var(--radius); margin-bottom: 10px; padding: 0 20px; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; position: relative; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 1.4em; color: var(--brand); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 16px; color: var(--muted); }

/* --- Appel à l'action final --- */
.cta-band { background: var(--brand); color: #fff; padding: 70px 0; }
.cta-band h2 { font-family: var(--font-title); font-size: clamp(1.8em, 5vw, 2.6em); margin: 0 0 .3em; }
.cta-band p { margin: 0 0 24px; font-size: 1.1em; }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.btn-light:hover { background: var(--ink); color: #fff; }

/* --- Pied de page (fond blanc pour le logo complet) --- */
.site-footer { background: #fff; color: var(--ink); padding: 60px 0 0; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--brand); }
.site-footer h3 { font-size: 1em; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); }
.footer-logo img { width: 220px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; align-items: start; }
.footer-bottom {
  margin-top: 50px;
  padding: 18px 16px;
  background: var(--ink);
  color: #ddd;
  font-size: .85em;
  text-align: center;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #fff; }

/* Bouton flottant « Commander » : cellulaire seulement */
.order-fab { display: none; }

/* --- Page texte (politique de confidentialité) --- */
.legal { padding: 60px 0 80px; }
.legal h1 { font-family: var(--font-title); font-size: 1.8em; }
.legal h2 { font-size: 1.2em; margin-top: 1.6em; }

/* --- Tablette --- */
@media (max-width: 900px) {
  .steps, .perks-grid { grid-template-columns: 1fr 1fr; }
  .features, .reviews { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Petite tablette : l'en-tête n'a pas la place pour le bouton « Commander »
   (le bouton du hero et le bouton flottant le remplacent) --- */
@media (min-width: 701px) and (max-width: 1000px) {
  .header-inner > .btn-order { display: none; }
  .main-nav { gap: 16px; }
}

/* --- Cellulaire --- */
@media (max-width: 700px) {
  :root { --header-h: 80px; }
  .logo-text { font-size: .9em; }
  .brand { gap: 8px; }
  .logo img { height: 60px; }
  .header-inner { gap: 12px; }
  .header-inner > .btn-order { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer; padding: 10px;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
  .main-nav {
    display: none;
    position: absolute; top: calc(var(--header-h) + 10px); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 16px; border-bottom: 1px solid var(--line); }

  .hero { padding: 70px 0 80px; }
  .hero-actions .btn { width: 100%; }
  .section { padding: 56px 0; }
  .steps, .menu-grid, .two-col, .footer-grid { grid-template-columns: 1fr; }
  ul.selecton li > a { padding: 7px 14px; font-size: .78em; }
  .menu-sizes > span { width: 44px; font-size: .82rem; }
  .menu-name { font-size: .95rem; }
  .food-menu .menu-row { padding: 6px 2px; }
  .perks-grid { gap: 18px 12px; }
  .perk { flex-direction: column; text-align: center; gap: 6px; }
  .two-col { gap: 40px; }
  .footer-grid { text-align: center; }
  .footer-logo img { width: 200px; }

  .order-fab {
    display: block;
    position: fixed; left: 16px; right: 16px; bottom: 16px;
    z-index: 90;
    /* caché tant que les boutons du hero sont visibles (voir js/main.js) */
    opacity: 0;
    transform: translateY(140%);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .order-fab.visible { opacity: 1; transform: none; pointer-events: auto; }
  .footer-bottom { padding-bottom: 90px; }
}

/* =========================================================
   LOGO ANIMÉ : petit « bonjour » au chargement et au survol
   (transform seulement = très léger ; désactivé si l'utilisateur
   a demandé moins d'animations)
   ========================================================= */
@keyframes logo-bonjour {
  0%   { transform: rotate(0) scale(1); }
  15%  { transform: rotate(-10deg) scale(1.06); }
  30%  { transform: rotate(8deg) scale(1.06); }
  45%  { transform: rotate(-6deg) scale(1.03); }
  60%  { transform: rotate(4deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0) scale(1); }
}
.logo img { transform-origin: 50% 85%; animation: logo-bonjour 1.1s ease-in-out .4s both; }
.logo:hover img { animation: logo-bonjour 1.1s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .logo img, .logo:hover img { animation: none; }
}

/* =========================================================
   ÉTOILES ANIMÉES
   - Sous les titres : les lignes rouges s'ouvrent depuis le centre
     et l'étoile scintille quand le titre arrive à l'écran
     (classes posées par js/main.js : html.js-anim + .in-view)
   - Slogan du hero : les deux étoiles scintillent doucement
   ========================================================= */
@keyframes titre-lignes {
  from { background-size: 0 2px, 0 2px; }
  to   { background-size: 55px 2px, 55px 2px; }
}
@keyframes etoile-scintille {
  0%   { color: transparent; text-shadow: none; }
  40%  { color: var(--brand); text-shadow: 0 0 12px rgba(237, 28, 36, .9); }
  100% { color: var(--brand); text-shadow: none; }
}
html.js-anim .section-title::after { color: transparent; background-size: 0 2px, 0 2px; }
html.js-anim .section-title.in-view::after {
  animation: titre-lignes .6s ease-out forwards, etoile-scintille .9s ease-out .35s forwards;
}

@keyframes etoile-brille {
  0%, 70%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  80% { transform: scale(1.5) rotate(72deg); opacity: .7; }
  90% { transform: scale(.9) rotate(144deg); opacity: 1; }
}
.hero-tagline::before, .hero-tagline::after { display: inline-block; animation: etoile-brille 4s ease-in-out infinite; }
.hero-tagline::after { animation-delay: .6s; }

/* =========================================================
   BOUTON FLOTTANT « COMMANDER » : légère pulsation (un halo
   qui s'élargit toutes les ~3 secondes)
   ========================================================= */
@keyframes commander-pulse {
  0%   { box-shadow: inset 0 -3px 0 var(--brand-line), 0 6px 18px rgba(0, 0, 0, .18), 0 0 0 0 rgba(237, 28, 36, .55); }
  70%  { box-shadow: inset 0 -3px 0 var(--brand-line), 0 6px 18px rgba(0, 0, 0, .18), 0 0 0 14px rgba(237, 28, 36, 0); }
  100% { box-shadow: inset 0 -3px 0 var(--brand-line), 0 6px 18px rgba(0, 0, 0, .18), 0 0 0 0 rgba(237, 28, 36, 0); }
}
.order-fab.visible { animation: commander-pulse 3s ease-out 1s infinite; }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .section-title::after { color: var(--brand); background-size: 55px 2px, 55px 2px; animation: none; }
  .hero-tagline::before, .hero-tagline::after, .order-fab.visible { animation: none; }
}

/* --- Très petit cellulaire : les 4 colonnes de prix des pizzas tiennent dans l'écran --- */
@media (max-width: 360px) {
  .menu-sizes { gap: 3px; }
  .menu-sizes > span { width: 38px; font-size: .78rem; }
}

/* =========================================================
   ÉTAPES 1-2-3 : l'anneau rouge fait le tour pour apparaître,
   une étape après l'autre (classe .in-view posée sur chaque .step par js/main.js)
   ========================================================= */
@keyframes anneau-trace { to { stroke-dashoffset: 0; } }
html.js-anim .step-ring circle { stroke-dasharray: 170; stroke-dashoffset: 170; }
html.js-anim .step.in-view .step-ring circle { animation: anneau-trace .9s ease-out forwards; }
/* Ordinateur : étapes côte à côte → cascade. Cellulaire : chaque étape a son propre déclencheur. */
@media (min-width: 901px) {
  html.js-anim .step.in-view:nth-child(2) .step-ring circle { animation-delay: .35s; }
  html.js-anim .step.in-view:nth-child(3) .step-ring circle { animation-delay: .7s; }
}
@media (prefers-reduced-motion: reduce) {
  html.js-anim .step-ring circle { stroke-dashoffset: 0; animation: none !important; }
}

/* =========================================================
   NOS INCONTOURNABLES : les cartes deviennent rondes, vues de haut
   (carte blanche + lignes translucides, sans photo)
   - Pizza : coupe des pointes, croûte, pepperonis
   - Poutine : bol avec rebord, frites, sauce et grains de fromage
   - Fait maison : pot maison fermé, tissu à carreaux noué d'une ficelle
   Départ = carte normale ; .feature.in-view (posée par js/main.js, carte par
   carte) = forme finale. Sans JS / « réduire les animations » : forme directe.
   ========================================================= */
.features { filter: drop-shadow(0 8px 16px rgba(90, 50, 25, .10)); }
.feature--pizza, .feature--poutine, .feature--pot {
  box-shadow: none;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  transition: border-radius .9s cubic-bezier(.6, 0, .3, 1), border-color .4s ease, padding .9s ease;
}
.feature--pizza::before, .feature--poutine::before, .feature--pot::before,
.feature--poutine::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .6s ease .5s;
  pointer-events: none;
}
html:not(.js-anim) :is(.feature--pizza, .feature--poutine, .feature--pot),
:is(.feature--pizza, .feature--poutine, .feature--pot).in-view {
  border-radius: 50%;
  border-left-color: transparent;
  padding: 17%;
}
html:not(.js-anim) :is(.feature--pizza, .feature--poutine, .feature--pot)::before,
:is(.feature--pizza, .feature--poutine, .feature--pot).in-view::before,
html:not(.js-anim) .feature--poutine::after, .feature--poutine.in-view::after { opacity: 1; }

/* --- Pizza --- */
.feature--pizza::before {
  background:
    /* pepperonis autour de la pointe, hors du texte */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50.0' cy='10.5' r='4.6' fill='%23ED1C24' fill-opacity='.16' stroke='%23C4141B' stroke-opacity='.25' stroke-width='.5'/><circle cx='48.5' cy='9.5' r='.6' fill='%23A01016' fill-opacity='.3'/><circle cx='51.3' cy='11.7' r='.5' fill='%23A01016' fill-opacity='.3'/><circle cx='78.4' cy='22.6' r='4.6' fill='%23ED1C24' fill-opacity='.16' stroke='%23C4141B' stroke-opacity='.25' stroke-width='.5'/><circle cx='76.9' cy='21.6' r='.6' fill='%23A01016' fill-opacity='.3'/><circle cx='79.7' cy='23.8' r='.5' fill='%23A01016' fill-opacity='.3'/><circle cx='87.6' cy='62.2' r='4.6' fill='%23ED1C24' fill-opacity='.16' stroke='%23C4141B' stroke-opacity='.25' stroke-width='.5'/><circle cx='86.1' cy='61.2' r='.6' fill='%23A01016' fill-opacity='.3'/><circle cx='88.9' cy='63.4' r='.5' fill='%23A01016' fill-opacity='.3'/><circle cx='64.8' cy='86.6' r='4.6' fill='%23ED1C24' fill-opacity='.16' stroke='%23C4141B' stroke-opacity='.25' stroke-width='.5'/><circle cx='63.3' cy='85.6' r='.6' fill='%23A01016' fill-opacity='.3'/><circle cx='66.1' cy='87.8' r='.5' fill='%23A01016' fill-opacity='.3'/><circle cx='32.7' cy='85.5' r='4.6' fill='%23ED1C24' fill-opacity='.16' stroke='%23C4141B' stroke-opacity='.25' stroke-width='.5'/><circle cx='31.2' cy='84.5' r='.6' fill='%23A01016' fill-opacity='.3'/><circle cx='34.0' cy='86.7' r='.5' fill='%23A01016' fill-opacity='.3'/><circle cx='12.4' cy='62.2' r='4.6' fill='%23ED1C24' fill-opacity='.16' stroke='%23C4141B' stroke-opacity='.25' stroke-width='.5'/><circle cx='10.9' cy='61.2' r='.6' fill='%23A01016' fill-opacity='.3'/><circle cx='13.7' cy='63.4' r='.5' fill='%23A01016' fill-opacity='.3'/><circle cx='27.3' cy='17.6' r='4.6' fill='%23ED1C24' fill-opacity='.16' stroke='%23C4141B' stroke-opacity='.25' stroke-width='.5'/><circle cx='25.8' cy='16.6' r='.6' fill='%23A01016' fill-opacity='.3'/><circle cx='28.6' cy='18.8' r='.5' fill='%23A01016' fill-opacity='.3'/></svg>") center / 100% 100% no-repeat,
    /* croûte : deux cercles translucides */
    radial-gradient(circle closest-side, transparent 86%, rgba(237, 28, 36, .18) 86.5% 87.5%, transparent 88% 95%, rgba(237, 28, 36, .12) 95.5% 96.5%, transparent 97%),
    /* 8 pointes */
    repeating-conic-gradient(from 22.5deg, rgba(35, 31, 32, .08) 0 .6deg, transparent .6deg 45deg);
}

/* --- Poutine : bol --- */
.feature--poutine::before {
  background:
    /* rebord du bol */
    radial-gradient(circle closest-side, transparent 84%, rgba(237, 28, 36, .22) 84.5% 85.5%, transparent 86% 95%, rgba(237, 28, 36, .12) 95.5% 96.5%, transparent 97%);
}
/* vu de haut : frites éparpillées, filet de sauce brune, quelques grains de fromage */
.feature--poutine::after {
  inset: 7%;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <g fill='%23F2B33D' fill-opacity='.16' stroke='%23C98A1E' stroke-opacity='.22' stroke-width='.5'><rect x='29.6' y='65.7' width='22.5' height='5.2' rx='1.6' transform='rotate(13 40.8 68.3)'/><rect x='15.2' y='41.3' width='16.6' height='5.2' rx='1.6' transform='rotate(91 23.5 43.9)'/><rect x='69.8' y='54.2' width='16.7' height='5.2' rx='1.6' transform='rotate(16 78.2 56.8)'/><rect x='7.8' y='64.6' width='17.2' height='5.2' rx='1.6' transform='rotate(40 16.4 67.2)'/><rect x='53.8' y='45.0' width='24.6' height='5.2' rx='1.6' transform='rotate(52 66.1 47.6)'/><rect x='52.3' y='62.6' width='19.1' height='5.2' rx='1.6' transform='rotate(147 61.9 65.2)'/><rect x='52.5' y='76.9' width='22.4' height='5.2' rx='1.6' transform='rotate(67 63.7 79.5)'/><rect x='25.5' y='42.4' width='16.6' height='5.2' rx='1.6' transform='rotate(37 33.8 45.0)'/><rect x='28.2' y='21.3' width='19.1' height='5.2' rx='1.6' transform='rotate(105 37.8 23.9)'/><rect x='13.8' y='54.7' width='23.9' height='5.2' rx='1.6' transform='rotate(126 25.8 57.3)'/><rect x='40.6' y='79.8' width='21.3' height='5.2' rx='1.6' transform='rotate(158 51.2 82.4)'/><rect x='33.9' y='22.6' width='25.8' height='5.2' rx='1.6' transform='rotate(21 46.8 25.2)'/><rect x='56.8' y='29.3' width='23.0' height='5.2' rx='1.6' transform='rotate(107 68.2 31.9)'/><rect x='11.9' y='33.2' width='24.4' height='5.2' rx='1.6' transform='rotate(170 24.1 35.8)'/><rect x='7.8' y='53.0' width='16.6' height='5.2' rx='1.6' transform='rotate(126 16.1 55.6)'/><rect x='15.9' y='70.1' width='16.2' height='5.2' rx='1.6' transform='rotate(83 24.0 72.7)'/><rect x='64.9' y='61.6' width='21.5' height='5.2' rx='1.6' transform='rotate(159 75.7 64.2)'/><rect x='12.7' y='77.5' width='25.6' height='5.2' rx='1.6' transform='rotate(27 25.5 80.1)'/><rect x='56.9' y='54.0' width='18.1' height='5.2' rx='1.6' transform='rotate(29 65.9 56.6)'/><rect x='25.3' y='34.0' width='18.5' height='5.2' rx='1.6' transform='rotate(63 34.6 36.6)'/><rect x='63.6' y='20.9' width='18.6' height='5.2' rx='1.6' transform='rotate(66 72.9 23.5)'/><rect x='65.6' y='39.5' width='25.4' height='5.2' rx='1.6' transform='rotate(178 78.2 42.1)'/><rect x='21.1' y='70.9' width='21.8' height='5.2' rx='1.6' transform='rotate(163 32.0 73.5)'/><rect x='78.3' y='48.3' width='17.7' height='5.2' rx='1.6' transform='rotate(85 87.2 50.9)'/><rect x='6.8' y='34.8' width='17.1' height='5.2' rx='1.6' transform='rotate(101 15.3 37.4)'/><rect x='38.4' y='72.0' width='23.7' height='5.2' rx='1.6' transform='rotate(91 50.2 74.6)'/><rect x='62.7' y='67.6' width='16.7' height='5.2' rx='1.6' transform='rotate(43 71.1 70.2)'/><rect x='19.7' y='25.7' width='16.6' height='5.2' rx='1.6' transform='rotate(177 28.0 28.3)'/><rect x='74.8' y='66.6' width='16.7' height='5.2' rx='1.6' transform='rotate(155 83.1 69.2)'/><rect x='38.3' y='62.2' width='23.3' height='5.2' rx='1.6' transform='rotate(99 50.0 64.8)'/><rect x='51.7' y='21.1' width='21.0' height='5.2' rx='1.6' transform='rotate(150 62.1 23.7)'/><rect x='19.7' y='62.4' width='16.5' height='5.2' rx='1.6' transform='rotate(23 28.0 65.0)'/><rect x='74.0' y='57.7' width='24.9' height='5.2' rx='1.6' transform='rotate(113 86.5 60.3)'/><rect x='69.2' y='31.6' width='25.0' height='5.2' rx='1.6' transform='rotate(52 81.7 34.2)'/></g> <path d='M50 22 C64 20 76 30 77 44 C79 58 70 74 54 77 C38 80 24 70 23 55 C21 40 34 24 50 22Z' fill='%237A3E12' fill-opacity='.07'/> <g fill='%23fff' fill-opacity='.55' stroke='%23231F20' stroke-opacity='.10' stroke-width='.4'><path d='M38 40 q3 -2 5 0 q2 3 -1 5 q-3 1 -4 -1 q-2 -2 0 -4z'/><path d='M58 36 q3 -2 5 0 q2 3 -1 5 q-3 1 -4 -1 q-2 -2 0 -4z'/><path d='M62 58 q3 -2 5 0 q2 3 -1 5 q-3 1 -4 -1 q-2 -2 0 -4z'/><path d='M42 62 q3 -2 5 0 q2 3 -1 5 q-3 1 -4 -1 q-2 -2 0 -4z'/><path d='M50 50 q3 -2 5 0 q2 3 -1 5 q-3 1 -4 -1 q-2 -2 0 -4z'/></g> </svg>") center / 100% 100% no-repeat;
}

/* --- Fait maison : pot vu de haut, tissu à carreaux sur le couvercle, ficelle et boucle --- */
.feature--pot::before {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <defs><pattern id='g' width='7' height='7' patternUnits='userSpaceOnUse'> <rect width='3.5' height='7' fill='%23ED1C24' fill-opacity='.07'/><rect width='7' height='3.5' fill='%23ED1C24' fill-opacity='.07'/></pattern></defs> <path d='M97.6 50.0 L97.4 51.2 L96.9 52.5 L96.1 53.6 L95.3 54.8 L94.5 55.9 L93.9 57.0 L93.7 58.1 L93.7 59.3 L94.0 60.6 L94.4 61.9 L94.8 63.3 L95.0 64.6 L94.9 65.9 L94.4 67.0 L93.5 68.0 L92.5 68.9 L91.3 69.7 L90.1 70.5 L89.2 71.3 L88.5 72.2 L88.0 73.3 L87.8 74.5 L87.7 75.9 L87.6 77.3 L87.4 78.7 L86.9 79.9 L86.2 80.9 L85.1 81.6 L83.9 82.2 L82.5 82.5 L81.2 82.8 L79.9 83.2 L78.8 83.8 L78.0 84.6 L77.3 85.6 L76.7 86.8 L76.2 88.1 L75.6 89.4 L74.8 90.4 L73.8 91.2 L72.6 91.7 L71.3 91.8 L69.9 91.7 L68.5 91.6 L67.2 91.5 L65.9 91.5 L64.8 91.9 L63.8 92.5 L62.9 93.4 L61.9 94.4 L60.9 95.4 L59.8 96.3 L58.7 96.8 L57.4 96.9 L56.2 96.7 L54.9 96.2 L53.6 95.6 L52.4 95.0 L51.2 94.6 L50.0 94.4 L48.8 94.6 L47.6 95.0 L46.4 95.6 L45.1 96.2 L43.8 96.7 L42.6 96.9 L41.3 96.8 L40.2 96.3 L39.1 95.4 L38.1 94.4 L37.1 93.4 L36.2 92.5 L35.2 91.9 L34.1 91.5 L32.8 91.5 L31.5 91.6 L30.1 91.7 L28.7 91.8 L27.4 91.7 L26.2 91.2 L25.2 90.4 L24.4 89.4 L23.8 88.1 L23.3 86.8 L22.7 85.6 L22.0 84.6 L21.2 83.8 L20.1 83.2 L18.8 82.8 L17.5 82.5 L16.1 82.2 L14.9 81.6 L13.8 80.9 L13.1 79.9 L12.6 78.7 L12.4 77.3 L12.3 75.9 L12.2 74.5 L12.0 73.3 L11.5 72.2 L10.8 71.3 L9.9 70.5 L8.7 69.7 L7.5 68.9 L6.5 68.0 L5.6 67.0 L5.1 65.9 L5.0 64.6 L5.2 63.3 L5.6 61.9 L6.0 60.6 L6.3 59.3 L6.3 58.1 L6.1 57.0 L5.5 55.9 L4.7 54.8 L3.9 53.6 L3.1 52.5 L2.6 51.2 L2.4 50.0 L2.6 48.8 L3.1 47.5 L3.9 46.4 L4.7 45.2 L5.5 44.1 L6.1 43.0 L6.3 41.9 L6.3 40.7 L6.0 39.4 L5.6 38.1 L5.2 36.7 L5.0 35.4 L5.1 34.1 L5.6 33.0 L6.5 32.0 L7.5 31.1 L8.7 30.3 L9.9 29.5 L10.8 28.7 L11.5 27.8 L12.0 26.7 L12.2 25.5 L12.3 24.1 L12.4 22.7 L12.6 21.3 L13.1 20.1 L13.8 19.1 L14.9 18.4 L16.1 17.8 L17.5 17.5 L18.8 17.2 L20.1 16.8 L21.2 16.2 L22.0 15.4 L22.7 14.4 L23.3 13.2 L23.8 11.9 L24.4 10.6 L25.2 9.6 L26.2 8.8 L27.4 8.3 L28.7 8.2 L30.1 8.3 L31.5 8.4 L32.8 8.5 L34.1 8.5 L35.2 8.1 L36.2 7.5 L37.1 6.6 L38.1 5.6 L39.1 4.6 L40.2 3.7 L41.3 3.2 L42.6 3.1 L43.8 3.3 L45.1 3.8 L46.4 4.4 L47.6 5.0 L48.8 5.4 L50.0 5.6 L51.2 5.4 L52.4 5.0 L53.6 4.4 L54.9 3.8 L56.2 3.3 L57.4 3.1 L58.7 3.2 L59.8 3.7 L60.9 4.6 L61.9 5.6 L62.9 6.6 L63.8 7.5 L64.8 8.1 L65.9 8.5 L67.2 8.5 L68.5 8.4 L69.9 8.3 L71.3 8.2 L72.6 8.3 L73.8 8.8 L74.8 9.6 L75.6 10.6 L76.2 11.9 L76.7 13.2 L77.3 14.4 L78.0 15.4 L78.8 16.2 L79.9 16.8 L81.2 17.2 L82.5 17.5 L83.9 17.8 L85.1 18.4 L86.2 19.1 L86.9 20.1 L87.4 21.3 L87.6 22.7 L87.7 24.1 L87.8 25.5 L88.0 26.7 L88.5 27.8 L89.2 28.7 L90.1 29.5 L91.3 30.3 L92.5 31.1 L93.5 32.0 L94.4 33.0 L94.9 34.1 L95.0 35.4 L94.8 36.7 L94.4 38.1 L94.0 39.4 L93.7 40.7 L93.7 41.9 L93.9 43.0 L94.5 44.1 L95.3 45.2 L96.1 46.4 L96.9 47.5 L97.4 48.8Z' fill='url(%23g)' stroke='%23ED1C24' stroke-opacity='.22' stroke-width='.6'/> <circle cx='50' cy='50' r='39' fill='none' stroke='%238A5A2B' stroke-opacity='.35' stroke-width='.9' stroke-dasharray='2.2 .8'/> <g fill='none' stroke='%238A5A2B' stroke-opacity='.45' stroke-width='.9' stroke-linecap='round'> <path d='M50 89 C44 84 40 88 43 91 C45 93 48 91 50 89 C52 91 55 93 57 91 C60 88 56 84 50 89Z'/> <path d='M50 89 L46 96 M50 89 L54 96'/></g> </svg>") center / 100% 100% no-repeat;
}

/* Ordinateur : les 3 cartes sont côte à côte → transformation en cascade.
   Cellulaire : chaque carte a son propre déclencheur, sans délai ajouté. */
@media (min-width: 901px) {
  .feature.in-view:nth-child(2) { transition-delay: .3s; }
  .feature.in-view:nth-child(3) { transition-delay: .6s; }
  .feature.in-view:nth-child(2)::before, .feature.in-view:nth-child(2)::after { transition-delay: .8s; }
  .feature.in-view:nth-child(3)::before { transition-delay: 1.1s; }
}

@media (prefers-reduced-motion: reduce) {
  .feature--pizza, .feature--poutine, .feature--pot,
  .feature--pizza::before, .feature--poutine::before, .feature--pot::before,
  .feature--poutine::after { transition: none !important; }
}