/* ==========================================================================
   ACCUEIL — "Ta Grèce, à ta façon" (section .composer, id #carte) : une
   grille unique de 4 cartes au même traitement visuel (pita / bowl /
   planche / loukoumades) plutôt que 3 cartes + une carte vedette de format
   différent — plus simple à lire, plus "app produit" moderne. Une frise
   façon méandre grec sépare l'intro de la grille : un clin d'œil à la
   Grèce en ligne fine, jamais en colonnes/temples/drapeaux.
   ========================================================================== */

.home-menu-extra-2col{grid-template-columns:repeat(2,1fr);max-width:680px}
@media(max-width:900px){.home-menu-extra-2col{grid-template-columns:1fr;max-width:660px}}

/* Bandeau CTA final : redondant (mêmes boutons de livraison déjà dans
   #commander juste au-dessus, + barre flottante .mobile-order sur mobile)
   et son propre fond bleu cassait la vague blanc → bleu du footer en
   ajoutant un aplat bleu légèrement différent juste avant. Masqué en CSS
   uniquement (contenu conservé dans le HTML) — toutes tailles d'écran,
   plus seulement mobile. */
.cta-band{display:none}

/* Frise méandre grec — motif dessiné en CSS (pas d'image), fine ligne
   blanche semi-transparente sur le fond bleu de la section. */
.meander-divider{
  height:14px;
  max-width:520px;
  margin:34px auto 42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 11 H8 V3 H16 V11 H24 V3 H32 V11 H40' fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='.4'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:center;
}

/* Grille à 4 cartes (desktop) — repasse à 2 colonnes puis au carrousel
   swipe mobile via les règles déjà existantes sur .composer-grid. */
.composer-grid-4{grid-template-columns:repeat(4,1fr);max-width:1100px}

/* AVIS CLIENTS — carrousel de cartes façon widget iOS : scroll-snap
   natif (swipe au doigt, pas de flèches ni de JS de pagination), cartes
   blanches flottantes avec avatar-initiale, étoiles et petite étiquette
   de source. "Qualité exceptionnelle" reprend telle quelle la formule
   du client plutôt qu'une note chiffrée qu'on n'a pas encore. */
.reviews{background:#fff;padding-top:100px;padding-bottom:100px}
.reviews-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;padding:10px 4px 8px;margin-top:40px;scrollbar-width:none}
.reviews-track::-webkit-scrollbar{display:none}
.review-card{scroll-snap-align:start;flex:0 0 340px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 24px 46px -30px rgba(1,36,95,.35)}
.rc-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rc-avatar{width:44px;height:44px;border-radius:50%;background:var(--blue-800);color:#fff;font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem;display:grid;place-items:center;flex:none}
.rc-avatar-photo{object-fit:cover}
.rc-id{display:flex;flex-direction:column;gap:3px}
.rc-name{font-family:'Inter',sans-serif;font-weight:700;font-size:.92rem;color:var(--ink)}
.rc-stars{display:flex;gap:2px;color:#f5b400}
.rc-stars svg{width:13px;height:13px}
.rc-src{margin-left:auto;align-self:flex-start;font-family:'Inter',sans-serif;font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--off);padding:5px 10px;border-radius:999px;white-space:nowrap}
.rc-text{color:var(--ink);font-size:.95rem;line-height:1.6;margin:0}
.reviews-cta{text-align:center;margin-top:36px}

@media(max-width:760px){
  .reviews{padding-top:70px;padding-bottom:70px}
  .review-card{flex-basis:88vw}
  .reviews-track{scroll-padding:0 6vw}
}

/* ==========================================================================
   MOBILE "APP-LIKE" — présentation uniquement, aucun contenu retiré du DOM.
   Tout reste dans le HTML (donc crawlable/indexable en mobile-first, voir
   la discussion avec le client) ; on change comment c'est montré sur petit
   écran, et on masque en CSS les blocs qui, sur ce format, sont soit
   redondants avec un autre bloc de la même page ou avec une page dédiée,
   soit clairement pas prêts (photos "à venir"), soit remplacés par un
   mécanisme plus adapté au mobile (barre flottante .mobile-order,
   bouton "Itinéraire" qui ouvre l'app Maps native).
   ========================================================================== */
/* Bouton "Voir toute la carte" (templates/home.php, section #menu) : cette
   règle par défaut (desktop/tablette) doit précéder le media query mobile
   ci-dessous pour que .mobile-menu-cta{display:block} du media query
   l'emporte bien sur petit écran (même sélecteur, donc c'est l'ordre dans
   la feuille de style qui tranche). Sur desktop la grille complète reste
   affichée comme avant, ce bouton n'y est jamais visible. */
.mobile-menu-cta{display:none}

/* Resume court du concept (templates/home.php, section #concept) : meme
   logique -- la regle par defaut doit preceder le media query mobile. Sur
   desktop, ce sont toujours les 3 paragraphes complets (.concept-full-text)
   qui s'affichent, ce resume n'y est jamais visible. */
.concept-mobile-summary{display:none}

/* Icone "Rejoignez les Donkeyeurs" (templates/home.php, section
   #donkeyeurs) : meme logique, uniquement visible sur mobile. Sur
   desktop la carte reste inchangee (bandeau bleu + stickers d'origine). */
.community-icon{display:none}

@media(max-width:760px){
  /* Explication du concept : un résumé court (2 phrases) plutôt que les 3
     paragraphes complets, plus adapté à une lecture rapide sur mobile. */
  .concept-mobile-summary{display:block}
  .concept-full-text{display:none}

  /* "Ta pita / Ta salade / Ta planche" en carrousel swipe plutôt qu'empilées
     verticalement — même geste que .reviews-track juste au-dessus. */
  .composer .composer-grid{
    display:flex;
    grid-template-columns:unset;
    max-width:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:0 6vw;
    gap:16px;
    margin:0 -24px;
    padding:6px 6vw 10px;
    scrollbar-width:none;
  }
  .composer .composer-grid::-webkit-scrollbar{display:none}
  .composer .composer-grid .compose-card{flex:0 0 78vw;scroll-snap-align:start}

  /* "Notre carte" (grille de 21 plats avec onglets) : doublon de la section
     "Donkey, c'est simple" juste au-dessus ET de la page /la-carte/ — avec
     en plus des photos "PHOTO À VENIR" pas finalisées, peu vendeur sur
     mobile. Remplacée par des vignettes catégories façon app iOS (voir
     templates/home.php, .mobile-menu-cta / .mcat-tiles) ; la section #menu
     reste donc une cible d'ancrage valide (boutons "Notre carte"/"Voir la
     carte" du hero et du composer), juste avec un contenu différent sur
     mobile. */
  .menu-visible .menu-cats,
  .menu-visible .menu-grid{display:none}
  .mobile-menu-cta{display:block;text-align:center;margin:0 0 8px}

  /* Vignettes catégories façon app iOS (App Store / Uber Eats "shop by
     category") : icône-photo carrée à coins arrondis + libellé dessous,
     rangée qui défile au doigt, retour tactile au tap. Chacune saute
     directement à sa section sur /la-carte/. */
  .mcat-tiles{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-padding:0 6vw;
    margin:0 -24px 22px;
    padding:4px 6vw 6px;
    scrollbar-width:none;
  }
  .mcat-tiles::-webkit-scrollbar{display:none}
  .mcat-tile{flex:0 0 auto;width:84px;display:flex;flex-direction:column;align-items:center;gap:8px;scroll-snap-align:start;color:inherit}
  .mcat-tile-photo{display:block;width:84px;height:84px;border-radius:22px;overflow:hidden;box-shadow:0 14px 26px -14px rgba(1,36,95,.5);transition:transform .15s ease}
  .mcat-tile-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .mcat-tile:active .mcat-tile-photo{transform:scale(.93)}
  .mcat-tile-label{font-family:'Poppins',sans-serif;font-weight:700;font-size:.76rem;color:var(--ink);text-align:center}

  /* "3 étapes pour commander" : contenu pédagogique générique, redondant
     avec la barre flottante .mobile-order qui permet déjà de commander en
     un tap depuis n'importe où sur mobile. On garde le texte d'intro et
     les boutons de livraison, on masque juste les 3 cartes numérotées. */
  .order .steps{display:none}

  /* Configurateur complet de loukoumades (taille + nappage + 7 toppings,
     ~20 boutons) : doublon du configurateur de la page /loukoumades/ dédiée
     vers laquelle le bouton juste en dessous renvoie déjà. On garde la
     photo, le texte et les réassurances, pour rester une vraie section de
     contenu plutôt qu'un simple lien. */
  .louk-grid .composer-box{display:none}

  /* Bloc traiteur "Un événement à sucrer ?" : usage secondaire (B2B) par
     rapport à l'intention principale sur mobile (comprendre Donkey / venir
     / commander) — masqué pour raccourcir le scroll. */
  .louk-events{display:none}

  /* Carte Google Maps intégrée : lourde et peu manipulable au doigt : le
     bouton "Itinéraire" juste au-dessus ouvre directement l'app Maps du
     téléphone, plus utile sur mobile qu'un iframe. */
  .loc-map{display:none}

  /* "Rejoignez les Donkeyeurs" : carte "verre dépoli" façon widget iOS,
     uniquement sur mobile — desktop garde le bandeau bleu plein d'origine
     avec ses stickers, inchangé (voir .community-icon plus haut pour la
     même logique appliquée à l'icône). Même recette de flou que la barre
     flottante .mobile-order (donkey-base.css). */
  .community{position:relative;overflow:hidden;background:linear-gradient(180deg,#eef3fc,var(--off) 55%)}
  .community::before,
  .community::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
  .community::before{background:rgba(1,61,185,.16);top:-100px;left:-70px}
  .community::after{background:rgba(255,122,61,.14);bottom:-110px;right:-70px}
  .community .wrap{position:relative;z-index:1}

  .community-card{
    padding:36px 22px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 30px 60px -28px rgba(1,36,95,.4);
    color:var(--ink);
  }
  /* Les stickers/pin/silhouette décoratifs de la version desktop
     surchargeraient une carte en verre dépoli aussi compacte — masqués
     ici, l'icône enveloppe (.community-icon) les remplace. */
  .community .heart,
  .community .sticker,
  .community-card .eye-wm,
  .community-card .pin,
  .community-card .bsticker{display:none}

  .community-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:16px;background:var(--blue-050);color:var(--blue-800)}
  .community-icon svg{width:24px;height:24px}
  .community-card .eyebrow{color:var(--orange)}
  .community-card h2{color:var(--blue-900)}
  .community-card p{color:var(--muted)}

  .community .signup{flex-direction:column;gap:12px}
  .community .signup input{background:#f2f4f8;border:1px solid var(--line);border-radius:16px;padding:15px 18px;text-align:left;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
  .community .signup input:focus{outline:none;border-color:var(--blue-800);box-shadow:0 0 0 4px rgba(1,61,185,.15);background:#fff}
  .community .signup .btn{width:100%;background:var(--blue-800);color:#fff}
  .community .signup-note{color:var(--muted)}
}