/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  landing.css
   Depend de : theme.css, buttons.css, cards.css, documents.css

   Les blocs d'une page commerciale, dans l'ordre ou ils se posent :
   banniere, preuve, offre, objections, action finale.
   Regle tenue partout : chaque bloc porte UN message et UNE action. Deux
   appels a l'action concurrents dans le meme bloc en annulent un.
   ========================================================================= */

.bloc { width: 100%; padding: var(--sp-10) var(--sp-6); }
.bloc__centre { max-width: 1080px; margin: 0 auto; }
.bloc__sur { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .1em; color: var(--c-primary-ink); }
.bloc__titre { margin: 0 0 var(--sp-3); font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--c-text); }
.bloc__chapo { margin: 0; max-width: 62ch; font-size: var(--fs-lg); line-height: 1.6; color: var(--c-text-soft); }

/* ===========================================================================
   FAMILLE A  -  BANNIERES
   ======================================================================== */

/* @v LND-A1
@nom Banniere centree
@usage L'ouverture la plus simple et la plus efficace pour un artisan : promesse, preuve de serieux, un seul bouton, le telephone juste dessous.
@html
<section class="bloc hero hero--centre">
  <div class="bloc__centre">
    <span class="hero__pastille">{{icon:check}} Artisan RGE QualiPAC</span>
    <h1 class="bloc__titre">Votre pompe a chaleur posee en 3 semaines</h1>
    <p class="bloc__chapo">Etude thermique offerte, dossier MaPrimeRenov monte par nos soins, pose par nos equipes salariees. Intervention en Ile-de-France.</p>
    <div class="hero__actions">
      <button class="btn btn--plein btn--xl">Demander mon devis gratuit</button>
      <a href="tel:+33612345678" class="btn btn--tel">{{icon:phone}} 06 12 34 56 78</a>
    </div>
    <p class="hero__note">Reponse sous 24 h, sans engagement.</p>
  </div>
</section>
@tw py-20 text-center [&_h1]:text-5xl [&_h1]:font-extrabold [&_h1]:tracking-tight
@end */
.hero { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.hero--centre { text-align: center; }
.hero--centre .bloc__chapo { margin-left: auto; margin-right: auto; }
.hero__pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-4);
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--c-success-soft);
  color: var(--c-success);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.hero__pastille svg { width: 14px; height: 14px; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
/* @endv */

/* @v LND-A2
@nom Banniere en deux colonnes
@usage Texte a gauche, image ou formulaire a droite. Le formulaire dans la banniere capte davantage qu'un bouton qui renvoie plus bas.
@html
<section class="bloc hero hero--deux">
  <div>
    <span class="bloc__sur">Renovation energetique</span>
    <h1 class="bloc__titre">Divisez votre facture de chauffage par trois</h1>
    <p class="bloc__chapo">Nous prenons en charge l'etude, le dossier d'aides et la pose. Vous ne payez que le reste a charge.</p>
    <ul class="hero__points">
      <li>{{icon:check}} Devis sous 24 h</li>
      <li>{{icon:check}} Aides deduites du devis</li>
      <li>{{icon:check}} Garantie 5 ans pieces et main d'oeuvre</li>
    </ul>
  </div>
  <form class="hero__form">
    <strong>Estimation gratuite</strong>
    <div class="champ"><label class="champ__label">Votre code postal</label><input class="saisie" value="93330"></div>
    <div class="champ"><label class="champ__label">Telephone</label><input class="saisie" type="tel" placeholder="06 12 34 56 78"></div>
    <button class="btn btn--plein btn--bloc btn--lg">Etre rappele</button>
    <small>Sans engagement. Vos donnees ne sont pas revendues.</small>
  </form>
</section>
@tw grid grid-cols-2 items-center gap-12 max-md:grid-cols-1
@end */
.hero--deux {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--sp-10);
  align-items: center;
  container-type: inline-size;   /* suit son conteneur, pas la fenetre */
}
.hero__points { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.hero__points li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-text); }
.hero__points svg { width: 17px; height: 17px; color: var(--c-success); flex: none; }
.hero__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  box-shadow: var(--sh-2);
}
.hero__form strong { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.hero__form small  { font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
@container (max-width: 780px) { .hero--deux { grid-template-columns: 1fr; gap: var(--sp-6); } }
@supports not (container-type: inline-size) {
  @media (max-width: 860px) { .hero--deux { grid-template-columns: 1fr; gap: var(--sp-6); } }
}
/* @endv */

/* @v LND-A3
@nom Banniere sur photo
@usage Quand la photo de chantier porte le message. Le voile sombre est obligatoire : sans lui, le texte devient illisible des que la photo change.
@html
<section class="bloc hero hero--photo">
  <div class="hero__voile"></div>
  <div class="bloc__centre hero__contenu">
    <h1 class="bloc__titre">Chauffagiste a Neuilly-sur-Marne depuis 2009</h1>
    <p class="bloc__chapo">Depannage, entretien et installation. Intervention sous 2 h en urgence.</p>
    <div class="hero__actions">
      <button class="btn btn--lg-verre btn--lg-teinte btn--lg">Demander un devis</button>
      <a href="tel:+33612345678" class="btn btn--lg-verre btn--lg">{{icon:phone}} 06 12 34 56 78</a>
    </div>
  </div>
</section>
@tw relative isolate [&_.voile]:absolute [&_.voile]:inset-0 [&_.voile]:bg-gradient-to-t [&_.voile]:from-black/75
@end */
.hero--photo {
  position: relative;
  isolation: isolate;
  border: none;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 20% 25%, #3b6ea5 0 18%, transparent 52%),
    radial-gradient(circle at 78% 30%, #8a6a4a 0 20%, transparent 55%),
    linear-gradient(160deg, #253347 0%, #3d4d63 55%, #6b5a48 100%);
}
.hero__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,16,.45), rgba(8,10,16,.78)); }
.hero__contenu { position: relative; text-align: center; }
.hero--photo .bloc__titre { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hero--photo .bloc__chapo { color: rgba(255,255,255,.9); margin-left: auto; margin-right: auto; }
/* @endv */

/* @v LND-A4
@nom Bande de reassurance
@usage Juste sous la banniere : les trois arguments qui levent les doutes avant la lecture. Certifications, delais, garanties.
@html
<div class="reassur">
  <div>{{icon:check}}<span><strong>Artisan RGE</strong><small>QualiPAC et QualiBois</small></span></div>
  <div>{{icon:horloge}}<span><strong>Devis sous 24 h</strong><small>Etude thermique offerte</small></span></div>
  <div>{{icon:signature}}<span><strong>Garantie 5 ans</strong><small>Pieces et main d'oeuvre</small></span></div>
  <div>{{icon:phone}}<span><strong>Urgence 2 h</strong><small>7 jours sur 7</small></span></div>
</div>
@tw grid grid-cols-4 gap-6 border-y py-6 max-md:grid-cols-2
@end */
.reassur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.reassur > div { display: flex; align-items: center; gap: var(--sp-3); }
.reassur svg { width: 22px; height: 22px; color: var(--c-primary); flex: none; }
.reassur span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reassur strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text); }
.reassur small  { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* ===========================================================================
   FAMILLE B  -  CONTENU
   ======================================================================== */

/* @v LND-B1
@nom Grille de prestations
@usage Ce que fait l'entreprise. Trois a six entrees : au-dela, le visiteur ne retient plus rien et la page devient un catalogue.
@html
<section class="bloc">
  <div class="bloc__centre">
    <span class="bloc__sur">Nos prestations</span>
    <h2 class="bloc__titre">Ce que nous installons</h2>
    <div class="cartes-grille" style="margin-top:var(--sp-6)">
      <a href="#" class="carte carte--lien service"><span class="service__icone">{{icon:f-pdf}}</span><h3 class="carte__titre">Pompe a chaleur</h3><p class="carte__texte">Air/eau et air/air, de 6 a 16 kW, monobloc ou bi-bloc.</p></a>
      <a href="#" class="carte carte--lien service"><span class="service__icone service__icone--vert">{{icon:archive}}</span><h3 class="carte__titre">Chauffe-eau</h3><p class="carte__texte">Thermodynamique 150 a 300 L, remplacement en une journee.</p></a>
      <a href="#" class="carte carte--lien service"><span class="service__icone">{{icon:calendar}}</span><h3 class="carte__titre">Entretien annuel</h3><p class="carte__texte">Contrat avec rappel automatique et rapport apres visite.</p></a>
    </div>
  </div>
</section>
@tw grid grid-cols-3 gap-4 max-md:grid-cols-1
@end */
/* reutilise .cartes-grille et .service de cards.css */
/* @endv */

/* @v LND-B2
@nom Etapes du parcours
@usage Repondre a « comment ca se passe ». Quatre etapes maximum, chacune avec un delai : c'est le delai qui rassure, pas le nombre d'etapes.
@html
<section class="bloc">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Comment ca se passe</h2>
    <ol class="parcours">
      <li><span>1</span><strong>Vous nous appelez</strong><p>Un echange de 10 minutes pour cerner le besoin.</p><small>Jour 1</small></li>
      <li><span>2</span><strong>Visite technique</strong><p>Releve sur place et etude thermique offerte.</p><small>Sous 5 jours</small></li>
      <li><span>3</span><strong>Devis et aides</strong><p>Devis detaille, aides deduites, dossier monte par nos soins.</p><small>Sous 24 h apres la visite</small></li>
      <li><span>4</span><strong>Pose et mise en service</strong><p>Par nos equipes salariees, en 1 a 3 jours.</p><small>Sous 3 semaines</small></li>
    </ol>
  </div>
</section>
@tw grid grid-cols-4 gap-6 [&_span]:h-10 [&_span]:w-10 [&_span]:rounded-full max-md:grid-cols-1
@end */
.parcours {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-6);
  margin: var(--sp-6) 0 0;
  padding: 0;
}
.parcours li { display: flex; flex-direction: column; gap: 6px; position: relative; }
.parcours span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-primary-text);
  font-size: var(--fs-lg);
  font-weight: 800;
}
.parcours strong { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); }
.parcours p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.55; }
.parcours small { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-primary-ink); }
/* @endv */

/* @v LND-B3
@nom Preuve chiffree
@usage Trois a quatre chiffres qui installent la credibilite. Ils doivent etre verifiables : un chiffre invente se retourne contre l'entreprise.
@html
<div class="chiffres">
  <div><strong>1 240</strong><span>installations depuis 2009</span></div>
  <div><strong>4,8 / 5</strong><span>note moyenne sur 312 avis</span></div>
  <div><strong>2 h</strong><span>delai moyen en urgence</span></div>
  <div><strong>5 ans</strong><span>de garantie incluse</span></div>
</div>
@tw grid grid-cols-4 gap-6 rounded-2xl bg-slate-900 p-8 text-white max-md:grid-cols-2
@end */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-text);
  color: var(--c-surface);
  text-align: center;
}
.chiffres strong { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.chiffres span   { display: block; margin-top: 4px; font-size: var(--fs-sm); opacity: .72; line-height: 1.4; }
/* @endv */

/* @v LND-B4
@nom Avant / apres
@usage La preuve visuelle d'un chantier. Deux photos datees et legendees valent mieux qu'un paragraphe d'arguments.
@html
<section class="bloc">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Nos realisations</h2>
    <div class="realisation">
      <figure><div class="doc-vignette doc-photo doc-photo--6"><span class="doc-etat doc-etat--info">Avant</span></div><figcaption>Chaudiere fioul de 1998, consommation 2 400 L par an</figcaption></figure>
      <figure><div class="doc-vignette doc-photo doc-photo--3"><span class="doc-etat doc-etat--ok">Apres</span></div><figcaption>PAC air/eau 11 kW, facture divisee par 3</figcaption></figure>
    </div>
    <p class="realisation__note">Maison de 112 m2 a Neuilly-sur-Marne, chantier realise en aout 2026.</p>
  </div>
</section>
@tw grid grid-cols-2 gap-4 max-sm:grid-cols-1
@end */
.realisation { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
.realisation figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.realisation figcaption { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.45; }
.realisation__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
@media (max-width: 560px) { .realisation { grid-template-columns: 1fr; } }
/* @endv */

/* @v LND-B5
@nom Questions frequentes
@usage Les objections traitees avant l'appel. Les <details> natifs suffisent : ni JavaScript, ni probleme de clavier, et le contenu reste indexable.
@html
<section class="bloc">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Questions frequentes</h2>
    <div class="faq">
      <details open><summary>Quelles aides puis-je obtenir ?</summary><p>MaPrimeRenov, les CEE et la TVA a 5,5 % selon vos revenus et le logement. Nous montons le dossier et deduisons les aides du devis : vous ne payez que le reste a charge.</p></details>
      <details><summary>Combien de temps dure la pose ?</summary><p>Une journee pour un chauffe-eau, deux a trois jours pour une pompe a chaleur avec depose de l'ancienne chaudiere.</p></details>
      <details><summary>Intervenez-vous en urgence ?</summary><p>Oui, 7 jours sur 7, avec un delai moyen de 2 heures en Ile-de-France.</p></details>
    </div>
  </div>
</section>
@tw [&_details]:border-b [&_summary]:cursor-pointer [&_summary]:py-4 [&_summary]:font-semibold
@end */
.faq { margin-top: var(--sp-5); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-text-muted);
  border-bottom: 2px solid var(--c-text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-base);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq p { margin: 0 0 var(--sp-4); max-width: 70ch; font-size: var(--fs-md); color: var(--c-text-soft); line-height: 1.65; }
/* @endv */

/* @v LND-B6
@nom Zone d'intervention
@usage Un artisan local doit dire ou il intervient, en toutes lettres. C'est aussi ce que cherchent les moteurs de recherche.
@html
<section class="bloc zone">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Ou nous intervenons</h2>
    <p class="bloc__chapo">Seine-Saint-Denis, Val-de-Marne et est parisien, sous 2 h en urgence.</p>
    <div class="zone__villes">
      <span>Neuilly-sur-Marne</span><span>Neuilly-Plaisance</span><span>Le Raincy</span>
      <span>Gagny</span><span>Villemomble</span><span>Rosny-sous-Bois</span>
      <span>Noisy-le-Grand</span><span>Chelles</span><span>Bondy</span>
    </div>
  </div>
</section>
@tw flex flex-wrap gap-2 [&_span]:rounded-full [&_span]:border [&_span]:px-3 [&_span]:py-1.5
@end */
.zone__villes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.zone__villes span {
  padding: 7px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
}
/* @endv */

/* ===========================================================================
   FAMILLE C  -  CONVERSION
   ======================================================================== */

/* @v LND-C1
@nom Appel a l'action final
@usage Le dernier bloc avant le pied de page. Un seul message, un seul bouton, et le telephone en secours pour ceux qui ne remplissent pas de formulaire.
@html
<section class="bloc cta-final">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Recevez votre devis sous 24 heures</h2>
    <p class="bloc__chapo">Etude thermique offerte, aides deduites, sans engagement.</p>
    <div class="hero__actions">
      <button class="btn btn--inverse btn--xl">Demander mon devis</button>
      <a href="tel:+33612345678" class="btn btn--contour btn--xl cta-final__tel">{{icon:phone}} 06 12 34 56 78</a>
    </div>
  </div>
</section>
@tw rounded-2xl bg-blue-600 py-16 text-center text-white
@end */
.cta-final {
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
  text-align: center;
  color: #fff;
}
.cta-final .bloc__titre { color: #fff; }
.cta-final .bloc__chapo { color: rgba(255,255,255,.9); margin-left: auto; margin-right: auto; }
.cta-final__tel { border-color: rgba(255,255,255,.55); color: #fff; }
.cta-final__tel:hover { background: rgba(255,255,255,.14); }
/* @endv */

/* @v LND-C2
@nom Formulaire de contact
@usage Le formulaire final. Quatre champs maximum : chaque champ supplementaire fait perdre des demandes. Le message est le seul champ long.
@html
<section class="bloc contact">
  <div>
    <h2 class="bloc__titre">Parlons de votre projet</h2>
    <p class="bloc__chapo">Un artisan vous rappelle sous 24 h. Pas de robot, pas de centre d'appel.</p>
    <ul class="hero__points">
      <li>{{icon:phone}} 06 12 34 56 78</li>
      <li>{{icon:mail}} contact@jabsdev.fr</li>
      <li>{{icon:horloge}} Du lundi au samedi, 8 h - 19 h</li>
    </ul>
  </div>
  <form class="hero__form">
    <div class="form-grille">
      <div class="champ col-6"><label class="champ__label">Nom</label><input class="saisie"></div>
      <div class="champ col-6"><label class="champ__label">Telephone</label><input class="saisie" type="tel"></div>
      <div class="champ col-12"><label class="champ__label">Votre projet</label><textarea class="saisie" rows="3" placeholder="Remplacement d'une chaudiere fioul dans une maison de 110 m2..."></textarea></div>
    </div>
    <button class="btn btn--plein btn--bloc btn--lg">Envoyer ma demande</button>
    <small>Vos coordonnees ne servent qu'a vous repondre.</small>
  </form>
</section>
@tw grid grid-cols-2 gap-12 max-md:grid-cols-1
@end */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: start; container-type: inline-size; }
.contact .hero__points svg { color: var(--c-primary); }
@container (max-width: 780px) { .contact { grid-template-columns: 1fr; gap: var(--sp-6); } }
@supports not (container-type: inline-size) {
  @media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: var(--sp-6); } }
}
/* @endv */

/* @v LND-C3
@nom Barre d'action collante
@usage Sur telephone, elle suit le defilement : le numero reste a portee de pouce du haut en bas de la page. C'est le bloc le plus rentable d'un site d'artisan.
@html
<div class="cta-collant">
  <a href="tel:+33612345678" class="btn btn--plein btn--lg">{{icon:phone}} Appeler</a>
  <a href="https://wa.me/33612345678" class="btn btn--whatsapp btn--lg">{{icon:whatsapp}} WhatsApp</a>
  <button class="btn btn--secondaire btn--lg">Devis</button>
</div>
@tw fixed inset-x-0 bottom-0 z-40 flex gap-2 border-t bg-white p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] md:hidden
@end */
.cta-collant {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
  max-width: 420px;
  padding: var(--sp-3);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 -4px 16px rgba(16,24,40,.1);
}
.cta-collant .btn { flex: 1; padding: 0 var(--sp-3); }
/* @endv */

/* @v LND-C4
@nom Bandeau de cookies
@usage Obligation legale. Refuser doit etre aussi simple qu'accepter : deux boutons de meme poids visuel, sinon le consentement n'est pas valable.
@html
<div class="cookies">
  <p><strong>Nous utilisons des cookies de mesure d'audience.</strong> Ils nous aident a comprendre quelles pages sont utiles. Aucun cookie publicitaire.</p>
  <div class="cookies__actions">
    <button class="btn btn--secondaire">Refuser</button>
    <button class="btn btn--secondaire">Personnaliser</button>
    <button class="btn btn--plein">Accepter</button>
  </div>
</div>
@tw fixed inset-x-4 bottom-4 z-50 flex items-center gap-4 rounded-xl border bg-white p-4 shadow-2xl
@end */
.cookies {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
}
.cookies p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }
.cookies strong { color: var(--c-text); }
.cookies__actions { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 700px) {
  .cookies { flex-direction: column; align-items: stretch; }
  .cookies__actions { flex-wrap: wrap; }
  .cookies__actions .btn { flex: 1; }
}
/* @endv */