/* ==========================================================================
   Accueil — nouveau design
   ========================================================================== */

.home2 .hdr { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.hdr__logo--text { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.hdr__logo--text img { width: auto; height: 34px; object-fit: contain; transform: none; }
.home2 .nav__link.is-active { color: var(--brand); }
.home2 .nav__link.is-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 2px; background: var(--brand); border-radius: 2px; }
.home2 .nav__link { position: relative; }

/* ---------------- Hero ---------------- */
.h2hero { padding: clamp(12px, 1.8vw, 24px) 0 clamp(38px, 5vw, 62px); position: relative; overflow: hidden; background: var(--surface); }
/* Fond signup-bg du héros RETIRE -> héros en blanc uni (.h2hero a background: var(--surface)). */
.h2hero::before { display: none; }
/* Desktop : décor de COURBES stylées en fond du hero (couleurs marque, faible opacité). */
@media (min-width: 1200px) {
  .h2hero::before {
    display: block; content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='560' viewBox='0 0 1440 560' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M-80,90 C260,30 520,170 820,80 S1320,40 1540,120' stroke='%23d12c2c' stroke-width='2.2' opacity='0.09'/%3E%3Cpath d='M-80,235 C240,150 480,330 760,215 S1260,150 1540,245' stroke='%23ef8a1f' stroke-width='2.2' opacity='0.09'/%3E%3Cpath d='M-80,380 C280,290 560,470 900,350 S1380,290 1540,385' stroke='%23d12c2c' stroke-width='2' opacity='0.08'/%3E%3Cpath d='M-80,505 C240,420 500,585 780,470 S1300,410 1540,505' stroke='%23ef8a1f' stroke-width='1.6' opacity='0.07'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }
}
/* MOBILE & TABLETTE (<1200px) : PAS de fond SUV -> héros en fond blanc uni
   (.h2hero a background: var(--surface)). La carte de réservation prend alors un fond blanc
   + une ombre pour bien ressortir sur le hero blanc. */
@media (max-width: 1199px) {
  .h2hero::before { display: none; }
  /* Tout le hero regroupé dans UNE carte blanche ombrée (titre + badges + réservation),
     avec le décor de courbes stylées en fond de la carte. */
  .h2hero { padding-inline: 14px; }
  .h2hero__in { position: relative; overflow: hidden; border-radius: 22px; padding: 22px 16px 20px;
    box-shadow: 0 14px 38px rgba(20, 16, 17, .14), 0 0 0 1px rgba(20, 16, 17, .05); background: var(--surface); }
  /* SUV en FOND de la carte : très faible opacité, NET (pas de flou), sous le contenu. */
  .h2hero__in::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('/hopv2/assets/SUV.webp') center / cover no-repeat; opacity: .24;
  }
  .h2hero__in > * { position: relative; z-index: 1; }
  /* la carte de réservation se fond dans la carte hero (plus d'ombre séparée) */
  .h2hero__stage .finder2 { background: transparent; border-radius: 0; box-shadow: none; }
}
@keyframes heroBg { from { transform: scale(1); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.h2hero__in { width: 100%; position: relative; z-index: 2; }
/* Forme spéciale : vague blanche en bas de la section */
.h2hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(40px, 5vw, 70px); z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,42 C240,86 480,2 720,30 C960,58 1200,8 1440,38 L1440,71 L0,71 Z'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat; }
.h2hero__in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.12fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.h2hero__left { max-width: 680px; margin: 0 auto; text-align: center; transform: translateX(clamp(0px, 7vw, 120px)); }
.h2hero__left .h2hero__sub { margin-left: auto; margin-right: auto; }
.h2hero__left .h2hero__apps { justify-content: center; }

/* Zone droite : grande carte de réservation (sans photo), agrandie */
.h2hero__stage { position: relative; }
.h2hero__suv, .h2hero__stage::after { display: none; }
/* Diaporama du visuel hero (SUV / moto / livreur) : transition « balayage diagonal » (slash).
   La nouvelle image (.is-on) se révèle derrière une ligne OBLIQUE qui traverse l'écran de la
   gauche vers la droite, avec un léger zoom. La précédente (.prev) reste dessous le temps du
   balayage. Pile : base z0, précédente z1, entrante z2. */
.h2hero__suv--slides img { z-index: 0; will-change: mask-position, -webkit-mask-position; backface-visibility: hidden; }
.h2hero__suv--slides img.prev { z-index: 1; }
/* Dévoilement en dégradé DOUX : un masque diagonal feutré balaie l'image (bord flou, pas de
   ligne nette). La précédente (.prev) reste dessous le temps du fondu. */
.h2hero__suv--slides img.is-on {
  z-index: 2;
  -webkit-mask-image: linear-gradient(110deg, #000 34%, rgba(0,0,0,0) 66%);
          mask-image: linear-gradient(110deg, #000 34%, rgba(0,0,0,0) 66%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  animation: heroReveal 2.2s cubic-bezier(.6, 0, .25, 1) both;
}
@keyframes heroReveal {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
/* Animation PENDANT l'affichage (sans zoom) : un reflet lumineux qui balaie l'image en
   diagonale, en boucle. Au-dessus des images (z3), confiné au cadre isolé (sous la carte). */
.h2hero__suv--slides::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.26) 48%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  animation: heroSheen 8.5s cubic-bezier(.45, 0, .35, 1) infinite;
}
@keyframes heroSheen {
  0%   { transform: translateX(-120%); }
  70%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .h2hero__suv--slides img { opacity: 0; transition: opacity .5s ease; }
  .h2hero__suv--slides img.is-on { opacity: 1; animation: none; -webkit-mask-image: none; mask-image: none; }
  .h2hero__suv--slides::after { animation: none; display: none; }
}
.h2hero__stage { display: flex; justify-content: center; }
.h2hero__stage .finder2 { position: static; transform: none; width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column;
                          background: transparent; box-shadow: none; }
.h2hero__stage .finder2::before { display: none; }   /* plus de fond blanc : la carte se fond dans la section */
.h2hero__stage .finder2__tabs { padding: 14px 22px 0; gap: 12px; }
/* Desktop/tablette : onglets répartis sur toute la largeur (Courses au bord droit) */
@media (min-width: 641px) { .h2hero__stage .finder2__tabs { justify-content: space-between; flex-wrap: nowrap; } }
.h2hero__stage .finder2__tab { height: 48px; font-size: 1.02rem; }
.h2hero__stage .finder2__form { padding: 14px 22px 16px; gap: 10px; }
.h2hero__stage .finder2__field { padding: 12px 20px; }
.h2hero__stage .finder2__lab { font-size: .8rem; }
.h2hero__stage .finder2__field input { font-size: 1.15rem; }
.h2hero__stage .finder2__row { flex-wrap: wrap; gap: 10px; margin-top: 6px; justify-content: center; }
.h2hero__stage .finder2__chip { height: 48px; }
.h2hero__stage .finder2__go { height: 50px; flex: 0 1 auto; min-width: 260px; margin: 0 auto; justify-content: center; font-size: 1.02rem; padding: 0 32px; }
.h2hero__title { font-size: clamp(2.5rem, 4.8vw, 4.2rem); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
                 text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.7); }
.h2hero__title span { color: #c40c11; }   /* « HOP! » du titre : rouge vif (comme la maquette) */
.h2hero__sub { max-width: 48ch; margin-top: 20px; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.5; color: var(--text); font-weight: 500;
               text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.7); }
.h2hero__apps { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.h2hero__apps img { height: 42px; width: auto; }

/* ----- Hero grand écran (ordinateur) : texte aligné à gauche + visuel SUV à droite -----
   3 colonnes [texte | carte de réservation | SUV]. La carte n'est pas modifiée (même
   structure/design) ; seuls l'emplacement du texte et l'ajout du SUV changent. En dessous
   de 1200px : on garde la mise en page actuelle (2 colonnes, texte centré, SUV masqué). */
@media (min-width: 1200px) {
  /* 2 colonnes : [texte à gauche] [panneau carte+SUV à droite].
     padding-inline = marge garantie à GAUCHE et à DROITE (le conteneur du héros est en
     largeur 100%, sans gouttière -> sans ça le texte se collait au bord gauche). */
  /* Tailles FIXES (calées pour une largeur de 1440 = DESIGN de site.js). La mise à l'échelle
     JS (zoom = innerWidth/1440) ramène toujours la mise en page à ~1440 et la met à l'échelle
     de la fenêtre -> taille identique quel que soit le zoom/échelle. Le fixe est OBLIGATOIRE
     ici (le vw suit la largeur BRUTE et casserait cette invariance). */
  /* min-height : le panneau carte+SUV s'etire sur cette hauteur -> il remplit le fond du hero. */
  .h2hero__in { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: center;
                /* Plancher = hauteur mini du hero (la carte + le SUV s'y étirent). Réduit pour un
                   hero plus compact ; reste au-dessus de la hauteur de la carte Repas (min-height). */
                column-gap: 28px; min-height: 380px;
                width: 100%; max-width: none; margin-inline: 0;
                box-sizing: border-box; padding-inline: 50px; }
  /* Marge entre l'en-tête et le hero (desktop) + padding bas réduit. */
  .h2hero { padding-top: 40px; padding-bottom: 18px; }
  /* min-width:0 OBLIGATOIRE sur les items de grille : sinon leur contenu (carte, image,
     gros titre) les empêche de rétrécir -> la grille déborde et le contenu se colle/coupe
     au bord gauche. Avec min-width:0, la grille tient dans .wrap -> la marge (gutter) à
     gauche est préservée. */
  .h2hero__left, .h2hero__panel, .h2hero__stage, .h2hero__suv { min-width: 0; }
  .h2hero__left { max-width: 700px; margin: 0; text-align: left; transform: none; }
  /* Tailles FIXES (voir ci-dessus : invariance au zoom via la mise à l'échelle JS). */
  .h2hero__left .h2hero__title { font-size: 3.8rem; }
  .h2hero__left .h2hero__sub { margin-left: 0; margin-right: 0; font-size: 1.35rem; }
  .h2hero__left .h2hero__apps { justify-content: flex-start; }

  /* Carte de réservation + SUV = UN SEUL bloc, collés (aucun écart entre eux).
     Le PANNEAU porte le fond clair + les coins arrondis + l'ombre (overflow:hidden pour
     arrondir le SUV) ; la carte garde sa structure (non modifiée) et se fond dedans ;
     le SUV remplit la moitié droite à la MÊME hauteur que la carte. */
  /* La carte FLOTTE au-dessus de l'image SUV : même hauteur que la photo (align-items:
     stretch -> la carte définit la hauteur, le SUV s'y aligne), et sa bordure droite
     arrondie est visible PAR-DESSUS la photo (fort chevauchement via marge droite négative
     + z-index supérieur). */
  /* Le panneau carte+SUV remplit TOUTE la hauteur du héros (align-self:stretch -> il prend
     la hauteur de la ligne de grille = hauteur de la colonne texte). La carte et le SUV
     s'étirent dedans (align-items:stretch). */
  .h2hero__panel { display: flex; align-items: stretch; gap: 0; align-self: stretch; }
  /* Carte à LARGEUR FIXE (~500px) : indispensable pour un rendu STABLE et identique quelle
     que soit la largeur de la fenêtre (sinon, en flex, la carte grossit/rétrécit selon
     l'écran et cache plus ou moins le SUV). Le SUV prend tout le reste. */
  /* Largeur FIXE (invariance au zoom). Carte 585px. */
  .h2hero__stage { flex: 0 0 635px; max-width: 635px; min-width: 340px; display: flex;
                   position: relative; z-index: 2; margin-right: -50px; }
  /* Carte étirée en hauteur : on centre son contenu (onglets + formulaire) verticalement. */
  .h2hero__stage .finder2 { width: 100%; max-width: none; margin: 0; background: var(--surface);
                            display: flex; flex-direction: column; justify-content: center;
                            border-radius: 22px;
                            box-shadow: 0 8px 24px rgba(20,16,17,.10), 0 0 0 1px rgba(20,16,17,.06); }
  /* Mode « Repas » (ordinateur) : le champ Destination est masqué (display:none). Pour que la
     hauteur de la carte NE CHANGE PAS (le SUV suit), on réserve au formulaire la hauteur qu'il
     a en « Trajet » (2 champs) via min-height, et on CENTRE verticalement son contenu (champ
     localisation + bouton). La largeur des champs n'est pas touchée (align-items: stretch). */
  .h2hero__stage .finder2__form.is-food { min-height: 222px;
                                          display: flex; flex-direction: column; justify-content: center; }
  /* SUV en position ABSOLUE dans son conteneur : ainsi la hauteur du SUV = hauteur de la
     carte (le conteneur s'étire à la carte via align-self:stretch) et NE suit PAS le ratio
     de l'image (sinon, carte plus large -> image plus haute -> espace vide dans la carte). */
  /* isolation:isolate -> nouveau contexte d'empilement : les z-index des images du diaporama
     (0/1/2) restent CONFINÉS ici et ne passent plus par-dessus la carte (stage z-index:2). */
  .h2hero__suv { display: block; flex: 1 1 0; align-self: stretch; position: relative; isolation: isolate;
                 overflow: hidden; border-radius: 22px; box-shadow: 0 0 0 1px var(--line); }
  .h2hero__suv img { position: absolute; inset: 0; width: 100%; height: 100%;
                     object-fit: cover; object-position: center; border-radius: 0; box-shadow: none; }
}

/* Carte de réservation */
.finder2 { border-radius: var(--r-xl); overflow: visible; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
           position: relative; isolation: isolate; }
.finder2::before { content: ''; position: absolute; inset: 0; z-index: -1;
                   background: linear-gradient(135deg, #d4141a, #7a0205); opacity: .04; }
.finder2__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 16px 16px 0; }
.finder2__tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; min-width: 0; padding: 0 14px;
                font-weight: 600; font-size: .95rem; color: var(--muted); background: var(--soft); transition: .2s var(--ease); }
.finder2__tab i { font-size: 1rem; flex: none; }
.finder2__tab:hover { color: var(--ink); }
.finder2__tab.is-active { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.finder2__tab .chev { width: 16px; height: 16px; margin-left: 2px; flex: none; transition: transform .2s var(--ease); }
/* Nom de la catégorie choisie : tronqué avec … pour ne pas déborder l'onglet */
.finder2__tabTxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Onglet « Repas » : menu déroulant des catégories de magasins (DeliverAll) */
.finder2__tabWrap { position: relative; display: grid; min-width: 0; }
.finder2__tabWrap.is-open .finder2__tab .chev { transform: rotate(180deg); }
.finder2__ddPanel { position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 80;
                    min-width: 240px; max-width: min(320px, 92vw);
                    background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
                    padding: 6px; display: grid; gap: 2px; }
.finder2__ddPanel[hidden] { display: none; }
.finder2__ddItem { display: block; padding: 11px 14px; border-radius: 10px; color: var(--ink);
                   font-weight: 600; font-size: .95rem; white-space: nowrap; transition: .15s var(--ease); }
.finder2__ddItem:hover { background: var(--soft); color: var(--brand); }
/* Menus personnalisés « Quand / Options » (à la place des <select> natifs) */
.finder2__sel { cursor: pointer; user-select: none; }
.finder2__selVal { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder2__selPanel { left: 0; right: auto; min-width: 100%; max-width: min(260px, 92vw); }
.finder2__selPanel .finder2__ddItem { width: 100%; text-align: left; background: none; cursor: pointer; }
/* mobile : menus « Quand / Options » sortis dans <body> (non zoomés) -> on réduit leur
   police/padding pour rester proportionnels aux pills réduits. */
@media (max-width: 620px) {
  .finder2__selPanel { padding: 5px; min-width: 150px; max-width: min(220px, 90vw); border-radius: 11px; }
  .finder2__selPanel .finder2__ddItem { font-size: .7rem; padding: 8px 11px; border-radius: 8px; }
}

.finder2__form { position: relative; padding: 16px; display: grid; gap: 10px; }
.finder2__field { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 8px;
                  padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); cursor: text; }
.finder2__field:focus-within { border-color: var(--brand); }
.finder2__ico { width: 22px; height: 22px; grid-row: span 2; fill: var(--brand); color: var(--brand); }
.finder2__ico--pin { fill: var(--brand); }
.finder2__lab { grid-column: 2; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.finder2__field input { grid-column: 2; width: 100%; border: 0; background: transparent; outline: 0; font: inherit; font-size: 1rem; font-weight: 500; color: var(--ink); }
.finder2__field input::placeholder { color: var(--muted); font-weight: 400; }
/* Groupe de boutons à droite du champ Départ (Ma position + Choisir sur la carte) */
.finder2__locs { grid-column: 3; grid-row: span 2; display: inline-flex; align-items: center; gap: 2px; }
.finder2__locs .finder2__loc { grid-column: auto; grid-row: auto; }
.finder2__loc { grid-column: 3; grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); }
.finder2__loc svg { width: 20px; height: 20px; fill: currentColor; }
.finder2__loc:hover { color: var(--brand); background: var(--soft); }

.finder2__ac { position: absolute; left: 16px; right: 16px; z-index: 60; max-height: 320px; overflow: auto; padding: 8px;
               border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.finder2__ac button { display: block; width: 100%; padding: 10px 12px; border-radius: 10px; text-align: left; }
.finder2__ac button:hover { background: var(--soft); }
.finder2__ac strong { display: block; color: var(--ink); font-weight: 600; }
.finder2__ac small { color: var(--muted); }

.finder2__row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.finder2__chip { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 12px;
                 background: var(--soft); font-size: .9rem; font-weight: 500; color: var(--text); }
.finder2__chip i { color: var(--muted); }
.finder2__go { margin-left: auto; height: 48px; }
.finder2__go:disabled { opacity: .5; cursor: not-allowed; }
/* Repas : une seule adresse (livraison) -> on masque le 2e champ (Destination). */
.finder2__form.is-food .finder2__field:last-of-type { display: none; }

/* ---------------- Barre de confiance ---------------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: clamp(32px, 4vw, 56px); position: relative; z-index: 5;
         padding: 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md), 0 0 0 1px var(--line); }
.trust__item { display: flex; align-items: center; gap: 12px; padding: 6px 12px; }
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__ico { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--brand-50); color: var(--brand); font-size: 1.1rem; }
.trust__txt strong { display: block; font-size: .95rem; color: var(--ink); }
.trust__txt small { color: var(--muted); font-size: .82rem; }

/* ---------------- Sections communes ---------------- */
.h2--left { text-align: left; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.poss, .pros, .dl { padding-top: clamp(40px, 5vw, 64px); }
.around { padding-top: clamp(32px, 4.5vw, 52px); padding-bottom: clamp(12px, 2vw, 20px); }
.around__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.around__all { font-weight: 600; color: var(--brand); white-space: nowrap; }
.around__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Sections masquées sur l'accueil (demande) : « Commander maintenant » (promo),
   « Mieux notés » (accResto), « Vous allez adorer » (accDish). */
#promoSection, #accResto, #accDish { display: none !important; }

/* Autour de vous : cartes défilantes (défilement auto horizontal) */
.around__scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; align-items: stretch; gap: 18px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.around__scroll::-webkit-scrollbar { display: none; }
/* « Autour de vous » réutilise la carte riche (.accResto__card, comme « Les mieux notés »),
   mais en version COMPACTE : on borne la couverture et on réduit toutes les polices
   (sélecteur à 2 classes -> l'emporte sur les surcharges ordinateur ≥1200px à 1 classe). */
.around__scroll .accResto__card { width: 100%; }
.around__scroll .accResto__cover { height: 160px; }
.around__scroll .accResto__body { padding: 13px 15px 14px; }
.around__scroll .accResto__name { font-size: 1.02rem; }
.around__scroll .accResto__rating { font-size: .8rem; padding: 3px 9px; }
.around__scroll .accResto__cuisine { font-size: .82rem; margin-top: 5px; }
.around__scroll .accResto__loc { font-size: .8rem; margin-top: 6px; }
.around__scroll .accResto__price { font-size: .88rem; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.around__scroll .accResto__meta { font-size: .82rem; margin-top: 6px; gap: 12px; }
.around__scroll .accResto__badge { font-size: .72rem; padding: 5px 11px; }
.around__scroll .accResto__when { font-size: .76rem; }
.around__scroll .accResto__fav { width: 34px; height: 34px; font-size: .85rem; }
@media (max-width: 640px) {
  .around__scroll .accResto__cover { height: 118px; }
  .around__scroll .accResto__body { padding: 10px 11px 12px; }
  .around__scroll .accResto__name { font-size: .84rem; }
  .around__scroll .accResto__rating { font-size: .68rem; padding: 2px 7px; gap: 3px; }
  .around__scroll .accResto__cuisine { font-size: .7rem; margin-top: 3px; }
  .around__scroll .accResto__loc { font-size: .68rem; margin-top: 4px; gap: 5px; }
  .around__scroll .accResto__price { font-size: .66rem; margin-top: 4px; }
  .around__scroll .accResto__meta { font-size: .68rem; margin-top: 4px; gap: 8px; }
  .around__scroll .accResto__badge { font-size: .6rem; padding: 3px 8px; gap: 5px; }
  .around__scroll .accResto__when { font-size: .64rem; }
  .around__scroll .accResto__fav { width: 28px; height: 28px; font-size: .72rem; }
}

/* --- Atouts / confiance (sous « Autour de vous ») : 4 items icône + texte --- */
.atouts { padding-top: clamp(20px, 2.6vw, 34px); padding-bottom: clamp(8px, 1.6vw, 16px); }
.atouts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 26px; align-items: center; }
.atout { display: flex; align-items: center; gap: 14px; min-width: 0; }
.atout__ic { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; }
.atout__ic svg { width: 24px; height: 24px; display: block; }
.atout__ic--red { color: #d12c2c; background: rgba(209, 44, 44, .12); }
.atout__ic--orange { color: #ef8a1f; background: rgba(239, 138, 31, .14); }
.atout__ic--navy { color: #4a5c8a; background: rgba(74, 92, 138, .15); }
.atout__ic--green { color: #1f9d4d; background: rgba(31, 157, 77, .14); }
.atout__txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.atout__txt strong { font-weight: 700; font-size: .95rem; color: var(--ink); }
.atout__txt span { font-size: .82rem; color: var(--muted); }
.atout--dup { display: none; }   /* 2e jeu visible seulement pour le défilement auto mobile */
@media (max-width: 900px) and (min-width: 641px) { .atouts__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; } }
/* Mobile : les 4 atouts sur UNE SEULE ligne qui défile toute seule (marquee). Le 2e jeu
   (.atout--dup) rend la boucle continue : translateX(-50%) = exactement un jeu. */
@media (max-width: 640px) {
  /* ligne unique : SCROLLABLE à la main ET défilement auto (piloté en JS, marqueeAuto).
     Vrai conteneur overflow-x -> le doigt peut faire défiler ; le 2e jeu (.atout--dup)
     assure la boucle (on reboucle à la moitié). */
  .atouts__grid { display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .atouts__grid::-webkit-scrollbar { display: none; }
  .atout { flex: 0 0 auto; gap: 8px; margin-right: 24px; }
  .atout--dup { display: flex; }
  .atout__ic { width: 32px; height: 32px; border-radius: 10px; }
  .atout__ic svg { width: 17px; height: 17px; }
  .atout__txt strong { font-size: .78rem; }
  .atout__txt span { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) { .atouts__grid { animation: none; } }

/* --- Une seule app, plusieurs possibilités : grille de cartes de services --- */
.oneapp { padding-top: clamp(30px, 4.5vw, 54px); }
.oneapp__title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-bottom: 20px; }
.oneapp__grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.oneapp__grid::-webkit-scrollbar { display: none; }
.oneapp__card { position: relative; display: flex; flex-direction: column; gap: 9px; min-height: 184px; padding: 18px; border-radius: 18px;
  background: var(--surface); box-shadow: 0 6px 20px rgba(20,16,17,.07), 0 0 0 1px rgba(20,16,17,.05);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.oneapp__card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,16,17,.13), 0 0 0 1px rgba(20,16,17,.05); }
.oneapp__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--c); color: #fff; }
.oneapp__ic svg { width: 24px; height: 24px; display: block; }
.oneapp__name { font-size: 1.02rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.oneapp__desc { font-size: .82rem; line-height: 1.5; color: var(--muted); padding-right: 34px; }
.oneapp__go { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--cs); color: var(--c); transition: transform .2s var(--ease); }
.oneapp__go svg { width: 18px; height: 18px; }
.oneapp__card:hover .oneapp__go { transform: translateX(3px); }
/* Icône + titre sur LA MÊME LIGNE (ligne 1), description dessous (desktop + mobile).
   La carte « & plus encore » garde sa mise en page centrée (exclue). */
.oneapp__card:not(.oneapp__card--plus) { display: grid; grid-template-columns: auto 1fr; align-items: center;
  align-content: start; column-gap: 12px; row-gap: 9px; }
.oneapp__card:not(.oneapp__card--plus) .oneapp__ic { grid-column: 1; grid-row: 1; }
.oneapp__card:not(.oneapp__card--plus) .oneapp__name { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: break-word; }
.oneapp__card:not(.oneapp__card--plus) .oneapp__desc { grid-column: 1 / -1; grid-row: 2; }
/* Couleurs par service (badge plein + flèche sur fond teinté) */
.oneapp__card--trajets { --c: #d12c2c; --cs: rgba(209,44,44,.12); }
.oneapp__card--repas   { --c: #ef8a1e; --cs: rgba(239,138,30,.14); }
.oneapp__card--colis   { --c: #3b4a73; --cs: rgba(59,74,115,.14); }
.oneapp__card--courses { --c: #1f9d4d; --cs: rgba(31,157,77,.14); }
.oneapp__card--loisirs { --c: #d6336c; --cs: rgba(214,51,108,.13); }
.oneapp__card--pay     { --c: #2f7fd6; --cs: rgba(47,127,214,.14); }
@media (max-width: 640px) {
  /* mobile : 3 services par ligne (cartes compactées) */
  .oneapp__grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 12px; overflow-x: visible; }
  .oneapp__card { min-height: 0; padding: 14px 13px 36px; gap: 7px; border-radius: 15px; }
  .oneapp__card:not(.oneapp__card--plus) { column-gap: 10px; row-gap: 7px; }
  .oneapp__ic { width: 38px; height: 38px; border-radius: 11px; }
  .oneapp__ic svg { width: 21px; height: 21px; }
  .oneapp__name { font-size: .74rem; line-height: 1.25; }
  .oneapp__desc { font-size: .64rem; line-height: 1.4; padding-right: 2px; }
  .oneapp__go { width: 28px; height: 28px; right: 10px; bottom: 10px; }
  .oneapp__go svg { width: 15px; height: 15px; }
}

/* --- Ordinateur (>=1200px) : sections à défilement + bannière QR en PLEINE LARGEUR, titres
   alignés sur le grand titre du héros (50px du bord, comme .h2hero__in). Le 1er carte de chaque
   défilement s'aligne aussi sur 50px et les cartes vont bord à bord. Mobile : inchangé. --- */
@media (min-width: 1200px) {
  .around, .promo, .acc__resto, .acc__dish, .dl, .atouts, .oneapp { max-width: none; width: 100%; margin-inline: 0; }
  .around__head,
  .promo > .h2, .acc__resto > .h2, .acc__dish > .h2, .oneapp__title { padding-inline: 50px; box-sizing: border-box; }
  .around__scroll, .promo__track, .acc__restoRow, .acc__dishRow, .atouts__grid, .oneapp__grid, .oneMore__grid { padding-inline: 50px; box-sizing: border-box; }
}
.acard { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: var(--surface);
         box-shadow: 0 6px 20px rgba(20,16,17,.07), 0 0 0 1px rgba(20,16,17,.05);
         transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.acard:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(20,16,17,.14), 0 0 0 1px rgba(20,16,17,.05); }
.acard__img { position: relative; height: 172px; flex-shrink: 0; overflow: hidden; background: var(--soft); }
.acard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.acard:hover .acard__img img { transform: scale(1.07); }
/* dégradé bas pour lisibilité des pastilles */
.acard__grad { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,.42), transparent); pointer-events: none; }
/* note : pastille blanche en bas-gauche sur la photo */
.acard__rate { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--ink);
  font-size: .82rem; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.acard__rate i { color: #f5b301; }
/* temps : pastille sombre translucide en haut-droite */
.acard__time { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; background: rgba(20,16,17,.66); color: #fff; font-size: .74rem; font-weight: 700;
  backdrop-filter: blur(3px); }
/* Badge Halal (haut-gauche : la note est en bas-gauche, le temps en haut-droite) */
/* Hauteur fixe + largeur auto : la pastille « Halal » (image large) remplit la hauteur,
   réglée pour égaler la pastille « 20 minutes » (plus de letterbox carré). */
.acard__halal { position: absolute; left: 10px; top: 10px; z-index: 2; height: 28px; width: auto; filter: drop-shadow(0 3px 8px rgb(0 0 0 / .35)); }
.acard__halal img, .acard__halal svg { height: 100%; width: auto; display: block; }
.acard__closed { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  padding: 7px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.acard.is-closed .acard__img img { filter: grayscale(.55) brightness(.92); }
.acard__body { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 13px 15px 14px; }
.acard__name { font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.acard__cat { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line); }
.acard__price { font-weight: 800; font-size: .9rem; color: var(--brand); }
.acard__cta { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-50, var(--brand-50)); color: var(--brand); font-size: .78rem; transition: .2s var(--ease); }
.acard:hover .acard__cta { background: var(--brand); color: #fff; transform: translateX(2px); }
.acard--sk { aspect-ratio: auto; min-height: 220px; background: linear-gradient(90deg, var(--soft), var(--soft), var(--soft)) 0/200% ; animation: sk 1.3s linear infinite; box-shadow: none; }
.acard--more { align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 20px; color: var(--muted); }
.acard--more span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-50); color: var(--brand); margin-bottom: 6px; }
.acard--more small { font-size: .78rem; }

/* Mobile : cartes « Autour de vous » plus petites -> au moins 2 visibles par vue */
@media (max-width: 640px) {
  .around__scroll { grid-auto-columns: 44vw; gap: 12px; }
  .acard__img { height: 118px; }
  .acard__body { padding: 10px 12px 12px; gap: 3px; }
  .acard__name { font-size: .9rem; }
  .acard__cat { font-size: .75rem; }
  .acard__foot { padding-top: 8px; }
  .acard__price { font-size: .82rem; }
  .acard__cta { width: 26px; height: 26px; }
  /* Halal à la MÊME hauteur que la petite pastille « 20 minutes » (~18px) -> pas de
     chevauchement sur carte étroite. */
  .acard__halal { height: 20px; width: auto; left: 8px; top: 8px; }
  .acard__time { font-size: .6rem; padding: 3px 8px; gap: 4px; top: 8px; right: 8px; }
  .acard__time svg { width: 11px; height: 11px; }
  .acard__rate { font-size: .64rem; padding: 2px 7px; gap: 3px; left: 8px; bottom: 8px; }
  .acard__rate svg, .acard__rate i { font-size: .64rem; }
}

/* Une seule app */
.poss__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.poss__card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r-lg);
              background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.poss__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), 0 0 0 1px var(--brand-200); }
.poss__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-50); }
.poss__ico img { width: 30px; height: 30px; object-fit: contain; }
.poss__ico--more { color: var(--muted); font-weight: 700; letter-spacing: 1px; }
.poss__card strong { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.poss__card small { font-size: .85rem; color: var(--muted); }
.poss__go { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .8rem; }
.poss__card--more { align-items: center; justify-content: center; text-align: center; color: var(--muted); background: var(--soft); box-shadow: none; }

/* HOP! pour les pros */
.pros__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: clamp(20px, 3vw, 32px); }
.pro { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pro:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pro__img { aspect-ratio: 16 / 9.5; background: var(--soft); overflow: hidden; }
/* object-position haut : le cadrage « cover » garde le HAUT de l'image (les têtes ne sont pas coupées). */
.pro__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s var(--ease); }
.pro__img--icon { display: grid; place-items: center; background: radial-gradient(120% 140% at 20% 0%, var(--brand-50, var(--brand-50)), #fff); }
.pro__img--icon i { font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--brand, var(--brand)); transition: transform .35s var(--ease); }
.pro:hover .pro__img--icon i { transform: scale(1.12) rotate(-6deg); }
/* Icône-image (SVG) dans le conteneur icône : dimensionnée comme une icône (non étirée,
   contrairement à .pro__img img qui fait width/height:100% + object-fit:cover). */
.pro__img--icon .pro__iconImg { width: auto; height: clamp(3rem, 6.5vw, 4.4rem); object-fit: contain; transition: transform .35s var(--ease); }
.pro:hover .pro__img--icon .pro__iconImg { transform: scale(1.12) rotate(-6deg); }
.pro:hover .pro__img img { transform: scale(1.05); }
.pro__body { padding: 22px; }
.pro__body strong { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.pro__body p { margin: 6px 0 14px; color: var(--muted); font-size: .92rem; }
.pro__cta { font-weight: 700; color: var(--brand); }

/* Téléchargement */
.dl__card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 48px);
            padding: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 56px); border-radius: var(--r-xl); color: #fff;
            background: radial-gradient(90% 140% at 0% 100%, #5a0103 0%, transparent 60%), radial-gradient(80% 120% at 100% 0%, #d4141a 0%, transparent 55%), var(--brand); box-shadow: var(--shadow-brand); }
/* 1. téléphones */
.dl__phones { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: clamp(220px, 22vw, 300px); height: clamp(180px, 20vw, 260px); }
.dl__phone { position: absolute; width: clamp(120px, 13vw, 175px); height: auto; filter: drop-shadow(0 18px 34px rgb(0 0 0 / .4)); }
.dl__phone--1 { transform: rotate(-9deg) translateX(-32%); z-index: 2; }
.dl__phone--2 { transform: rotate(9deg) translateX(32%); z-index: 1; }
/* 2. texte au centre */
.dl__txt { flex: 1; max-width: 460px; text-align: center; }
.dl__card h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; }
.dl__p { margin: 6px 0 16px; opacity: .92; }
.dl__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.dl__badges img { height: 54px; }
/* 3. QR à droite */
.dl__qr { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }
.dl__qr img { width: clamp(140px, 15vw, 190px); height: auto; border-radius: 14px; cursor: pointer; transition: transform .15s; }
.dl__qr img:hover { transform: scale(1.03); }
.dl__qr span { font-weight: 600; font-size: .95rem; line-height: 1.35; max-width: 12ch; text-align: center; }
/* Modal QR agrandi (clic sur le QR code) */
.qrModal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; }
.qrModal[hidden] { display: none; }
.qrModal__scrim { position: absolute; inset: 0; background: rgba(20, 16, 17, .5); }
.qrModal__box { position: relative; background: #fff; border-radius: 20px; padding: 28px; text-align: center;
  box-shadow: 0 24px 60px rgba(20, 16, 17, .3); max-width: 360px; width: 100%; animation: qrPop .22s var(--ease, ease) both; }
@keyframes qrPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.qrModal__x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 1.9rem; line-height: 1; color: var(--muted); cursor: pointer; }
.qrModal__x:hover { color: var(--ink); }
.qrModal__title { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 0 0 18px; }
.qrModal__img { width: min(280px, 72vw); height: auto; border-radius: 14px; }
.qrModal__hint { margin-top: 14px; color: var(--muted); font-size: .9rem; }
.qrModal__actions { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.qrModal__act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: .92rem; text-align: left; cursor: pointer; transition: .15s; }
.qrModal__act:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50, #fff6f5); }
.qrModal__act svg { width: 19px; height: 19px; flex: none; color: var(--brand); }
.qrModal__act:hover svg { color: var(--brand); }
:root[data-theme="dark"] .qrModal__box { background: var(--surface); }

/* Footer sombre */
.ftr--dark { background: #141011; color: #b9b0b1; padding-top: 0;   /* annule le grand padding-top empilé (home.css) */
  margin-top: clamp(34px, 4.5vw, 60px); }   /* marge (fond clair) entre la bannière rouge et le footer */
.ftr--dark h4 { color: #fff; }
.ftr--dark a:hover { color: #fff; }
.ftr--dark .ftr__bottom { border-top-color: rgb(255 255 255 / .08); color: #857b7c; }
.ftr--dark .ftr__social a { background: rgb(255 255 255 / .07); color: #fff; }
.ftr--dark .ftr__social a:hover { background: var(--brand); }

/* ---------------- Responsive ---------------- */
/* Hero d'accueil : on empile (texte centré -> carte) dès 1024px. */
@media (max-width: 1024px) {
  .h2hero__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .h2hero__left, .h2hero__stage { min-width: 0; }
  .h2hero__left { max-width: none; text-align: center; transform: none; }
  .h2hero__left .h2hero__sub { margin-left: auto; margin-right: auto; }
  .h2hero__apps { justify-content: center; }
  .h2hero__stage .finder2 { width: min(640px, 100%); margin: 0 auto; }
}
@media (max-width: 980px) {
  .trust { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(odd) { border-left: 0; }
  .pros__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* Champ Départ : 2 icônes resserrées -> plus de place pour l'adresse */
  .finder2__locs { gap: 0; }
  .finder2__loc { width: 24px; height: 24px; }
  .finder2__locs .finder2__loc { width: 23px; height: 23px; }
  .finder2__loc svg, .finder2__locs .finder2__loc svg { width: 14px; height: 14px; }
  .trust { grid-template-columns: 1fr; }
  .trust__item { border-left: 0 !important; }
  .finder2__row { flex-wrap: wrap; }
  .finder2__go { width: 100%; margin-left: 0; }
  /* mobile : toute la carte de réservation RÉDUITE AU MAX (police + champs + espacements + hauteurs) */
  /* zoom = réduit TOUTE la carte uniformément d'un coup (immunisé aux surcharges) */
  .h2hero__stage .finder2 { gap: 0; zoom: .8; }
  .h2hero__stage .finder2__tabs { padding: 6px 9px 0; gap: 4px; }
  .h2hero__stage .finder2__tab { height: 26px; font-size: .6rem; gap: 4px; padding: 0 6px; }
  .h2hero__stage .finder2__tab i { font-size: .68rem; }
  .h2hero__stage .finder2__form { padding: 6px 9px 8px; gap: 5px; }
  .h2hero__stage .finder2__field { padding: 4px 9px; row-gap: 0; border-radius: 10px; }
  .h2hero__stage .finder2__ico { width: 14px; height: 14px; }
  .h2hero__stage .finder2__lab { font-size: .46rem; letter-spacing: .02em; }
  .h2hero__stage .finder2__field input { font-size: .68rem; }
  .h2hero__stage .finder2__row { gap: 5px; margin-top: 0; }
  /* « Maintenant / Options » : couleur grise + hauteur comme l'onglet « Colis » */
  .h2hero__stage .finder2__pill { font-size: .82rem; font-weight: 600; color: var(--muted); justify-content: center; height: 40px; }
  .h2hero__stage .finder2__pill .finder2__selVal { color: var(--muted); font-weight: 600; }
  .h2hero__stage .finder2__go { height: 32px; font-size: .68rem; min-width: 0; padding: 0 14px; }
  .dl__card { flex-direction: column; }
  .dl__phones { width: 240px; height: 200px; }
  .dl__phone { width: 130px; }
  /* Badges App Store + Play Store sur UNE SEULE ligne, réduits. */
  .dl__badges { flex-wrap: nowrap; gap: 10px; }
  .dl__badges img { height: 38px; }
  /* QR + légende « Scannez pour télécharger l'app » sur la même ligne. */
  .dl__qr { flex-direction: row; align-items: center; justify-content: center; gap: 14px; text-align: left; }
  .dl__qr img { width: 108px; height: auto; }
  .dl__qr span { max-width: 130px; text-align: left; }
  /* Mobile : espace sous la carte « Télécharger l'app » pour qu'elle ne colle pas au footer. */
  .dl { padding-bottom: clamp(26px, 7vw, 40px); }
}

/* ---- Hero MOBILE : plus compact pour laisser voir « Autour de vous » et les plats ---- */
@media (max-width: 640px) {
  .h2hero { padding: 10px 0 24px; }
  .h2hero__in { gap: 16px; }
  /* Titre + description réduits */
  .h2hero__title { font-size: clamp(1.55rem, 7vw, 2.1rem); line-height: 1.1; }
  .h2hero__sub { margin-top: 10px; font-size: clamp(.9rem, 3.6vw, 1.02rem); line-height: 1.4; max-width: 34ch; }
  /* Badges App Store + Play Store TOUJOURS sur la même ligne (se partagent la
     largeur et rétrécissent pour ne jamais déborder) */
  .h2hero__apps { flex-wrap: nowrap; gap: 10px; margin-top: 14px; justify-content: center; }
  .h2hero__apps a { flex: 0 1 auto; max-width: 140px; min-width: 0; }
  .h2hero__apps img { width: 100%; height: auto; max-height: 38px; display: block; }
  /* Carte de réservation plus petite (largeur + hauteur) */
  .h2hero__stage .finder2 { width: min(420px, 100%); }
  .h2hero__stage .finder2__tabs { padding: 12px 12px 0; gap: 8px; }
  .h2hero__stage .finder2__tab { height: 44px; font-size: .95rem; }
  /* Marge minime entre onglet / champ Départ / champ Destination / bouton */
  .h2hero__stage .finder2__form { padding: 4px 12px 12px; gap: 4px; }
  .h2hero__stage .finder2__field { padding: 11px 14px; margin: 0; }
  .h2hero__stage .finder2__row { margin-top: 4px; }
  .h2hero__stage .finder2__lab { font-size: .68rem; }
  .h2hero__stage .finder2__field input { font-size: 1rem; }
  .h2hero__stage .finder2__chip { height: 40px; }
  .h2hero__stage .finder2__go { height: 46px; min-width: 0; font-size: .95rem; padding: 0 22px; }
}

/* ---- Comment ça marche (icônes serveur) ---- */
.how { padding: clamp(40px, 6vw, 80px) 0; text-align: center; }
.how__title { text-align: center; }
.how__sub { margin: 6px 0 0; color: var(--muted); }
.how__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(28px, 4vw, 48px); }
.how__step { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.how__ico { display: grid; place-items: center; width: 84px; height: 84px; }
.how__ico img { width: 84px; height: 84px; object-fit: contain; }
.how__t { font-size: 1.1rem; color: var(--ink); }
.how__d { margin: 0; color: var(--muted); font-size: .92rem; max-width: 230px; line-height: 1.4; }
@media (max-width: 820px) { .how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mobile : 2 par ligne (au lieu d'1), éléments plus petits */
@media (max-width: 480px) {
  .how { padding: clamp(28px, 7vw, 44px) 0; }
  .how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 22px; }
  .how__step { gap: 7px; }
  .how__ico, .how__ico img { width: 54px; height: 54px; }
  .how__t { font-size: .95rem; }
  .how__d { font-size: .8rem; line-height: 1.35; }
}

/* ---------------- Commander maintenant : bannières promo ---------------- */
.promo { margin-top: clamp(40px, 6vw, 64px); }
.promo__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 18px; padding: 4px 2px 2px; }
.promo__track::-webkit-scrollbar { display: none; }
.promo__card { flex: 0 0 100%; scroll-snap-align: center; border-radius: 18px; overflow: hidden;
  background: var(--brand-50, var(--brand-50)); aspect-ratio: 21 / 9; display: block; box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.promo__card a { display: block; width: 100%; height: 100%; }
.promo__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo__dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.promo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line, #e3ddd9); cursor: pointer; transition: .25s; }
.promo__dot.is-on { width: 22px; border-radius: 5px; background: var(--brand, var(--brand)); }
@media (min-width: 760px) { .promo__card { flex-basis: 62%; } .promo__card { aspect-ratio: 24 / 9; } }

/* ---- Apparition en cascade des cartes au défilement ---- */
.poss__grid > *, .pros__grid > *, .how__grid > * {
  opacity: 0; transform: translateY(26px) scale(.98);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in .poss__grid > *, .reveal.is-in .pros__grid > *, .reveal.is-in .how__grid > * {
  opacity: 1; transform: none;
}
.reveal.is-in .poss__grid > *:nth-child(1), .reveal.is-in .pros__grid > *:nth-child(1), .reveal.is-in .how__grid > *:nth-child(1) { transition-delay: .05s; }
.reveal.is-in .poss__grid > *:nth-child(2), .reveal.is-in .pros__grid > *:nth-child(2), .reveal.is-in .how__grid > *:nth-child(2) { transition-delay: .12s; }
.reveal.is-in .poss__grid > *:nth-child(3), .reveal.is-in .pros__grid > *:nth-child(3), .reveal.is-in .how__grid > *:nth-child(3) { transition-delay: .19s; }
.reveal.is-in .poss__grid > *:nth-child(4), .reveal.is-in .pros__grid > *:nth-child(4), .reveal.is-in .how__grid > *:nth-child(4) { transition-delay: .26s; }
.reveal.is-in .poss__grid > *:nth-child(5) { transition-delay: .33s; }
.reveal.is-in .poss__grid > *:nth-child(6) { transition-delay: .40s; }
.reveal.is-in .poss__grid > *:nth-child(7) { transition-delay: .47s; }
.reveal.is-in .poss__grid > *:nth-child(n+8) { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  .poss__grid > *, .pros__grid > *, .how__grid > * { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Animations du hero d'accueil ---------------- */
.h2hero__title { animation: heroUp .75s cubic-bezier(.2,.85,.25,1) both; }
.h2hero__sub   { animation: heroUp .75s cubic-bezier(.2,.85,.25,1) .12s both; }
.h2hero__apps  { animation: heroUp .75s cubic-bezier(.2,.85,.25,1) .24s both; }
.h2hero__stage { animation: heroUp .85s cubic-bezier(.2,.85,.25,1) .18s both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }


/* Accent du titre (brand) : pulsation douce */
.h2hero__title span { display: inline-block; animation: heroAccent 2.8s ease-in-out .8s infinite; }
@keyframes heroAccent { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Reflet qui balaie le bouton principal */
.h2hero__stage .finder2__go { position: relative; overflow: hidden; }
.h2hero__stage .finder2__go::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); animation: heroSweep 4s ease-in-out 1.5s infinite; }
@keyframes heroSweep { 0%,72% { left: -130%; } 100% { left: 180%; } }

@media (prefers-reduced-motion: reduce) {
  .h2hero__title, .h2hero__sub, .h2hero__apps, .h2hero__stage,
  .h2hero__stage .finder2, .h2hero__title span, .h2hero__stage .finder2__go::after, .h2hero::before { animation: none; }
}

/* ---------------- Cascade des cartes au scroll ---------------- */
.poss.is-in .poss__card, .pros.is-in .pro, .how.is-in .how__step {
  animation: cardUp .55s cubic-bezier(.2,.8,.2,1) both; }
.poss.is-in .poss__card:nth-child(2), .pros.is-in .pro:nth-child(2), .how.is-in .how__step:nth-child(2) { animation-delay: .08s; }
.poss.is-in .poss__card:nth-child(3), .pros.is-in .pro:nth-child(3), .how.is-in .how__step:nth-child(3) { animation-delay: .16s; }
.poss.is-in .poss__card:nth-child(4), .pros.is-in .pro:nth-child(4), .how.is-in .how__step:nth-child(4) { animation-delay: .24s; }
.poss.is-in .poss__card:nth-child(5), .pros.is-in .pro:nth-child(5), .how.is-in .how__step:nth-child(5) { animation-delay: .32s; }
.poss.is-in .poss__card:nth-child(n+6), .pros.is-in .pro:nth-child(n+6), .how.is-in .how__step:nth-child(n+6) { animation-delay: .4s; }
@keyframes cardUp { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }

/* Titres de section : léger glissé à l'apparition */
.around.is-in .sec__head, .poss.is-in .sec__head, .pros.is-in .sec__head, .how.is-in .sec__head { animation: cardUp .6s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .poss.is-in .poss__card, .pros.is-in .pro, .how.is-in .how__step,
  .around.is-in .sec__head, .poss.is-in .sec__head, .pros.is-in .sec__head, .how.is-in .sec__head { animation: none; }
}

/* ===== Accueil : carrousels « Les mieux notés » (restos) + « Vous allez adorer » (plats) ===== */
.acc__resto { margin: clamp(40px, 6vw, 64px) auto 0; }
.acc__restoRow { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.acc__restoRow::-webkit-scrollbar { height: 8px; }
.acc__restoRow::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.accResto__card { flex: 0 0 280px; display: block; background: var(--surface); border-radius: 18px;
  overflow: hidden; box-shadow: 0 6px 20px rgba(20,16,17,.07), 0 0 0 1px var(--line); color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s; }
.accResto__card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,16,17,.13), 0 0 0 1px var(--brand-200); }
.accResto__cover { position: relative; height: 150px; background: var(--soft); }
.accResto__cover img { width: 100%; height: 100%; object-fit: cover; }
/* Haut-gauche : badge Ouvert/Fermé + "Jusqu'à / Ouvre à" (comme l'app) */
.accResto__status { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.accResto__badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.accResto__badge .fa { font-size: .6rem; }
.accResto__badge.is-open { background: #1f9d4d; }
.accResto__badge.is-off { background: #d33b3b; }
.accResto__when { font-size: .84rem; font-weight: 700; color: #fff; align-self: flex-start; padding: 3px 9px; border-radius: 8px; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Haut-droite : cœur favori */
.accResto__fav { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: #c62828; cursor: pointer; display: grid; place-items: center; font-size: .95rem; box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: transform .15s; }
.accResto__fav:hover { transform: scale(1.08); }
.accResto__fav .fa-heart { display: none; }
.accResto__fav.is-on .fa-heart-o { display: none; }
.accResto__fav.is-on .fa-heart { display: block; }
/* Bas-gauche : badge Halal */
.accResto__halal { position: absolute; right: 12px; bottom: 12px; height: 30px; width: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .4)); }
.accResto__halal img, .accResto__halal svg { height: 100%; width: auto; display: block; }
.accResto__body { padding: 14px 16px 16px; }
.accResto__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.accResto__name { font-size: 1.1rem; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accResto__rating { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 10px;
  background: #e6f7ee; color: #1e9e5a; font-size: .85rem; font-weight: 800; }
.accResto__cuisine { margin-top: 5px; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accResto__loc { margin-top: 8px; display: flex; align-items: center; gap: 7px; color: #8a8a8a; font-size: .88rem; }
.accResto__loc .fa { color: var(--brand, var(--brand)); flex-shrink: 0; }
.accResto__loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accResto__price { margin-top: 8px; font-size: .95rem; font-weight: 800; color: var(--ink); }
.accResto__meta { margin-top: 8px; display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; color: #4a4446; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.accResto__mItem { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0; }
.accResto__mItem .fa { color: #6b6168; }
.accResto__sep { width: 1px; height: 15px; background: #e0d9d8; flex-shrink: 0; }
.acc__resto > .h2, .acc__dish > .h2 { margin-bottom: clamp(16px, 2.5vw, 26px); }
.acc__restoFoot { margin-top: clamp(26px, 4vw, 44px); text-align: center; }
.acc__restoCta { display: inline-flex; align-items: center; height: 50px; padding: 0 32px; border-radius: 999px;
  font-weight: 700; box-shadow: 0 10px 24px rgba(156,3,6,.26); }
.acc__dish { margin: clamp(40px, 6vw, 64px) auto clamp(24px, 4vw, 44px); }
.acc__dishRow { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.acc__dishRow::-webkit-scrollbar { height: 8px; }
.acc__dishRow::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.accDish__card { flex: 0 0 180px; display: block; text-decoration: none; color: inherit; }
.accDish__img { display: block; height: 150px; border-radius: 16px; overflow: hidden; background: var(--soft);
  box-shadow: 0 6px 18px rgba(20,16,17,.08); }
.accDish__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.accDish__card:hover .accDish__img img { transform: scale(1.06); }
.accDish__body { display: block; padding: 10px 2px 0; }
.accDish__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .96rem; font-weight: 700; color: var(--ink); line-height: 1.2; min-height: 2.4em; }
/* Prix + note sur UNE SEULE ligne (prix à gauche, note à droite, bien espacés). */
.accDish__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.accDish__price { color: var(--brand, var(--brand)); font-weight: 800; font-size: .82rem; white-space: nowrap; }
.accDish__rating { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--muted); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.accDish__rating .fa { color: #f5a623; }

/* Mobile : « Mieux notés » et « Vous allez adorer » -> cartes plus petites (au moins 2 par vue) */
@media (max-width: 640px) {
  .acc__restoRow, .acc__dishRow { gap: 16px; }
  .accResto__card { flex-basis: 58vw; }
  .accResto__cover { height: 115px; }
  /* Overlays couverture réduits sur carte étroite. */
  .accResto__status { left: 8px; top: 8px; gap: 3px; }
  .accResto__badge { font-size: .62rem; padding: 3px 8px; gap: 5px; }
  .accResto__when { font-size: .64rem; }
  .accResto__fav { width: 30px; height: 30px; right: 8px; top: 8px; font-size: .8rem; }
  .accResto__halal { height: 24px; width: auto; right: 8px; bottom: 8px; }
  .accResto__body { padding: 10px 12px 12px; }
  .accResto__name { font-size: .86rem; }
  .accResto__rating { font-size: .74rem; padding: 2px 7px; gap: 3px; }
  .accResto__cuisine { font-size: .72rem; margin-top: 3px; }
  .accResto__loc { font-size: .7rem; margin-top: 5px; gap: 5px; }
  .accResto__price { font-size: .76rem; margin-top: 5px; }
  .accResto__meta { font-size: .72rem; margin-top: 5px; gap: 7px; }
  .accResto__mItem { gap: 5px; }
  .accResto__price { font-size: .76rem; }
  .accDish__card { flex-basis: 44vw; }
  .accDish__img { height: 120px; }
}

/* « Vous allez adorer » : 5 plats qui défilent, cartes AGRANDIES AU MAX (desktop).
   Placé en FIN de fichier pour l'emporter par ordre de source sur .accDish__card (180px). */
@media (min-width: 1200px) {
  .acc__dishRow { gap: 28px; }
  .accDish__card { flex: 0 0 clamp(360px, 30vw, 520px); }
  .accDish__img { height: clamp(300px, 26vw, 440px); border-radius: 24px; box-shadow: 0 14px 40px rgba(20,16,17,.14); }
  .accDish__body { padding: 18px 6px 0; }
  .accDish__name { font-size: 1.5rem; line-height: 1.25; min-height: 0; -webkit-line-clamp: 1; }
  .accDish__foot { margin-top: 12px; }
  .accDish__price { font-size: 1.35rem; }
  .accDish__rating { font-size: 1.05rem; }
}

/* « Mieux notés » : 6 restos qui défilent, cartes AGRANDIES AU MAX (desktop).
   En fin de fichier pour l'emporter par ordre de source sur .accResto__card (280px). */
@media (min-width: 1200px) {
  .acc__restoRow { gap: 28px; }
  .accResto__card { flex: 0 0 clamp(400px, 33vw, 560px); border-radius: 24px; }
  .accResto__cover { height: clamp(240px, 21vw, 340px); }
  .accResto__status { left: 16px; top: 16px; gap: 6px; }
  .accResto__badge { font-size: .95rem; padding: 8px 16px; gap: 9px; }
  .accResto__when { font-size: 1rem; }
  .accResto__fav { width: 48px; height: 48px; right: 16px; top: 16px; font-size: 1.2rem; }
  .accResto__halal { height: 34px; width: auto; right: 16px; bottom: 16px; }
  .accResto__body { padding: 20px 22px 22px; }
  .accResto__name { font-size: 1.5rem; }
  .accResto__rating { font-size: 1.05rem; padding: 6px 14px; }
  .accResto__cuisine { font-size: 1.1rem; margin-top: 9px; }
  .accResto__loc { font-size: 1rem; margin-top: 10px; }
  .accResto__price { font-size: 1.15rem; margin-top: 10px; }
  .accResto__meta { font-size: 1rem; margin-top: 10px; gap: 18px; }
  .accResto__sep { height: 18px; }
}

/* « Autour de vous » : 7 restos qui défilent, cartes agrandies (desktop) mais un CRAN
   plus petites que « Mieux notés ». En fin de fichier pour l'emporter par ordre de source. */
@media (min-width: 1200px) {
  .around__scroll { grid-auto-columns: clamp(320px, 23vw, 400px); gap: 22px; }
  .around__scroll .accResto__cover { height: clamp(160px, 12vw, 195px); }   /* largeur + hauteur réduites ensemble */
  .acard__img { height: clamp(180px, 16vw, 260px); }
  .acard__body { padding: 15px 17px 17px; }
  .acard__name { font-size: 1.15rem; -webkit-line-clamp: 1; }
  .acard__cat { font-size: .92rem; }
  .acard__foot { padding-top: 11px; }
  .acard__price { font-size: 1.02rem; }
  .acard__rate { font-size: .9rem; padding: 5px 11px; }
  .acard__time { font-size: .8rem; padding: 5px 11px; }
  .acard__cta { width: 34px; height: 34px; font-size: .85rem; }
}

/* ===== Popup promo (comme l'app) : petite carte ancrée en haut à droite, sous « Déconnexion ».
   Le bouton fermer (X) n'apparaît qu'après 4 s (ajouté par JS via .is-on). ===== */
.adpop { position: fixed; top: calc(var(--hdr-h, 64px) + 18px); right: 22px; z-index: 300;
  width: min(380px, 92vw); padding: 0; border-radius: 16px; overflow: hidden;
  background: rgba(18, 14, 15, .28);     /* fond = exactement la taille de l'image (sans marge) */
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(-12px) scale(.96); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.adpop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.adpop__link { display: block; line-height: 0; }
.adpop__img { width: 100%; height: auto; display: block; }
.adpop__close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer;
  opacity: 0; transform: scale(.7); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.adpop__close.is-on { opacity: 1; transform: none; }
.adpop__close:hover { background: rgba(0,0,0,.72); }
/* Pendant le décompte : affiche le chiffre (4..1), pas cliquable. */
.adpop__close--count { cursor: default; font-size: .95rem; font-weight: 700; }
.adpop__close--count:hover { background: rgba(0,0,0,.55); }
@media (max-width: 560px) { .adpop { right: 12px; left: 12px; width: auto; top: calc(var(--hdr-h, 64px) + 8px); } }