/* =========================================================
   LaMesaQr — Couche expérience (UI/UX)
   Charge APRÈS style.css et design-system.css.

   Principe : ne rien redessiner. La palette (marine / orange QR / crème)
   et les typographies (Montserrat + Poppins) sont celles de la marque.
   Cette couche ajoute trois choses :

     1. Un motif signature — le repère d'angle du code QR — utilisé comme
        grammaire visuelle plutôt que comme décoration ponctuelle.
     2. Les éléments de conversion manquants sur mobile, là où se trouve
        réellement un restaurateur qui découvre le service.
     3. Le plancher de qualité : focus clavier visible, cibles tactiles,
        mouvement réduit respecté, contenu visible même si le CDN tombe.
   ========================================================= */

:root{
  /* Échelle typographique fluide : plus de saut brutal entre mobile et desktop */
  --fs-hero:clamp(2.1rem, 5.2vw, 3.6rem);
  --fs-h2:clamp(1.75rem, 3.4vw, 2.7rem);
  --fs-h3:clamp(1.12rem, 1.9vw, 1.4rem);
  --fs-lead:clamp(1rem, 1.3vw, 1.12rem);

  /* Motif signature : le repère d'angle d'un code QR */
  --qr-bracket-size:16px;
  --qr-bracket-weight:2.5px;
  --qr-bracket-color:var(--gold-600);

  --actionbar-h:68px;
}

/* =========================================================
   1. Rythme typographique
   ========================================================= */

.hero h1{font-size:var(--fs-hero);letter-spacing:-.02em;line-height:1.08;}
.section-head h2{font-size:var(--fs-h2);letter-spacing:-.015em;}
.section-head p{font-size:var(--fs-lead);text-wrap:pretty;}
h3{letter-spacing:-.01em;}

/* Évite les mots orphelins en fin de titre sur les navigateurs récents */
h1,h2,h3{text-wrap:balance;}

/* =========================================================
   2. Signature : le repère d'angle QR
   Deux angles au repos, quatre au survol — le code « se cale »
   comme lorsqu'un téléphone accroche un QR.
   ========================================================= */

.price-card,.feature-card,.testimonial-card,.pricing-teaser-card{
  position:relative;
}

.price-card::before,.price-card::after,
.feature-card::before,.feature-card::after,
.pricing-teaser-card::before,.pricing-teaser-card::after{
  content:"";
  position:absolute;
  width:var(--qr-bracket-size);
  height:var(--qr-bracket-size);
  border:var(--qr-bracket-weight) solid var(--qr-bracket-color);
  opacity:0;
  transition:opacity var(--dur-base,.3s) var(--ease-out,ease),
             transform var(--dur-base,.3s) var(--ease-out,ease);
  pointer-events:none;
}

/* Angle haut-gauche */
.price-card::before,.feature-card::before,.pricing-teaser-card::before{
  top:12px;left:12px;
  border-right:none;border-bottom:none;
  border-top-left-radius:5px;
  transform:translate(5px,5px);
}
/* Angle bas-droit */
.price-card::after,.feature-card::after,.pricing-teaser-card::after{
  bottom:12px;right:12px;
  border-left:none;border-top:none;
  border-bottom-right-radius:5px;
  transform:translate(-5px,-5px);
}

.price-card:hover::before,.price-card:hover::after,
.price-card:focus-within::before,.price-card:focus-within::after,
.feature-card:hover::before,.feature-card:hover::after,
.pricing-teaser-card:hover::before,.pricing-teaser-card:hover::after{
  opacity:1;
  transform:translate(0,0);
}

/* La formule mise en avant porte le repère en permanence : elle est déjà « scannée ». */
.price-card.featured::before,.price-card.featured::after{
  opacity:.9;
  transform:translate(0,0);
}

/* =========================================================
   3. Barre d'action mobile
   Un restaurateur consulte le site sur son téléphone, souvent debout
   entre deux services. Sans cette barre, il doit remonter toute la page
   pour trouver comment demander un devis.
   ========================================================= */

.lm-actionbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1500;
  display:none;
  gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,245,227,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .32s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.lm-actionbar.is-visible{transform:translateY(0);}

.lm-actionbar a{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;
  padding:0 14px;
  border-radius:var(--radius-pill,100px);
  font-family:var(--ff-display);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.01em;
  transition:transform .18s ease, background .18s ease;
}
.lm-actionbar a:active{transform:scale(.97);}

.lm-actionbar .lm-quote{
  background:var(--gold-600);
  color:#fff;
  box-shadow:var(--shadow-orange,0 12px 30px rgba(255,90,0,.35));
}
.lm-actionbar .lm-whatsapp{
  flex:0 0 auto;
  width:48px;padding:0;
  background:var(--green-900);
  color:#fff;
  font-size:1.15rem;
}

/* Repère QR sur la barre : rappel discret du motif signature */
.lm-actionbar::before{
  content:"";
  position:absolute;
  top:-1px;left:18px;
  width:22px;height:3px;
  background:var(--gold-600);
  border-radius:0 0 3px 3px;
}

@media (max-width:900px){
  .lm-actionbar{display:flex;}
  /* Empêche la barre de masquer la fin du contenu */
  body.has-actionbar{padding-bottom:var(--actionbar-h);}
}

/* =========================================================
   4. Progression de lecture
   Trait fin, uniquement sur les pages longues. Signale au visiteur
   ce qu'il lui reste à parcourir avant les tarifs ou le formulaire.
   ========================================================= */

.lm-progress{
  position:fixed;top:0;left:0;
  height:3px;width:0;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-500));
  z-index:1600;
  transition:width .1s linear;
  pointer-events:none;
}

/* =========================================================
   5. Retour en haut
   ========================================================= */

.lm-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1400;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--green-900);
  color:#fff;
  box-shadow:var(--shadow-md,0 10px 30px rgba(15,24,35,.12));
  opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s var(--ease-out,ease), background .2s ease, visibility .25s;
}
.lm-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.lm-top:hover{background:var(--gold-600);}
@media (max-width:900px){
  /* Remonte au-dessus de la barre d'action */
  .lm-top{bottom:calc(var(--actionbar-h) + 14px);right:14px;}
}

/* =========================================================
   6. Filet de sécurité : contenu visible même sans AOS
   Si le CDN d'animation est bloqué (bloqueur de publicité, réseau
   d'entreprise, coupure), les éléments [data-aos] restent invisibles :
   la page paraît vide. La classe est posée par js/ui.js après un délai.
   ========================================================= */

html.aos-failed [data-aos]{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}

/* Révélation maison, utilisée si AOS est absent */
.lm-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s var(--ease-out,ease), transform .55s var(--ease-out,ease);
}
.lm-reveal.is-in{opacity:1;transform:none;}

/* =========================================================
   7. Plancher de qualité
   ========================================================= */

/* Ancres : le titre visé ne se retrouve pas collé sous la barre de navigation */
:target,section[id],div[id]{scroll-margin-top:96px;}

/* Cibles tactiles confortables sur mobile */
@media (max-width:900px){
  .nav-links a,.footer-links a,.faq-question{min-height:44px;display:flex;align-items:center;}
  .faq-question{justify-content:space-between;}
}

/* Le lien d'évitement doit rester visible au clavier, quelle que soit la page */
.skip-link:focus{
  outline:3px solid var(--gold-600);
  outline-offset:2px;
  z-index:3000;
}

/* Sélection de texte cohérente sur fond sombre */
.footer ::selection,.cta-band ::selection{background:var(--gold-600);color:#fff;}

/* Images : réserve la place avant chargement, évite les sauts de mise en page */
img[width][height]{height:auto;}

/* Mouvement réduit : on coupe tout, y compris la signature */
@media (prefers-reduced-motion:reduce){
  .lm-actionbar,.lm-top,.lm-progress,.lm-reveal,
  .price-card::before,.price-card::after,
  .feature-card::before,.feature-card::after,
  .pricing-teaser-card::before,.pricing-teaser-card::after{
    transition:none !important;
  }
  .lm-reveal{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   8. Impression : une page tarifs imprimable proprement
   (un restaurateur imprime souvent les tarifs pour son associé)
   ========================================================= */

@media print{
  .navbar,.lm-actionbar,.lm-top,.lm-progress,.footer-social,
  #preloader,.cookie-banner,.hero-blob{display:none !important;}
  body{background:#fff;color:#000;padding:0;}
  .section-pad{padding:24px 0;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555;}
  .price-card{break-inside:avoid;border:1px solid #ccc;}
}