/* =========================================================
   Calimeo — Identité visuelle (par-dessus Bootstrap 5)
   Palette : vert profond + crème + or discret.
   Typo : Fraunces (titres) + Inter (texte), chargées dans base.html.twig.
   ========================================================= */

:root{
  --clm-green:#1b4332;         /* vert profond, couleur de marque */
  --clm-green-hover:#153726;
  --clm-green-soft:#e7efe9;    /* fond vert très pâle */
  --clm-gold:#b08d57;          /* or discret */
  --clm-cream:#faf8f4;         /* fond crème */
  --clm-text:#1e2723;
  --clm-muted:#68746d;
  --clm-white:#ffffff;
  --clm-border:#e4e1d8;
  --radius:.75rem;
  --shadow:0 .5rem 1.5rem rgba(27,67,50,.08);
  --shadow-sm:0 .15rem .5rem rgba(27,67,50,.06);
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--clm-text);
  background:var(--clm-cream);
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3,h4,.display-5,.display-4{
  font-family:'Fraunces',Georgia,serif;
  color:var(--clm-green);
}
a{ color:var(--clm-green); }
img{ max-width:100%; height:auto; }

/* ---------- Header ---------- */
.site-header{
  background:var(--clm-white);
  border-bottom:1px solid var(--clm-border);
  position:sticky; top:0; z-index:1030;
}
.brand{
  font-family:'Fraunces',Georgia,serif;
  font-weight:700; font-size:1.6rem;
  color:var(--clm-green);
}
.brand-dot{ color:var(--clm-gold); }
.nav-link-clm{
  color:var(--clm-text); text-decoration:none; font-weight:500;
  padding-bottom:2px; border-bottom:2px solid transparent;
  transition:border-color .15s ease;
}
.nav-link-clm:hover{ border-bottom-color:var(--clm-gold); color:var(--clm-green); }
.btn-cart{
  background:var(--clm-green); color:#fff; font-weight:500;
  border-radius:2rem; padding:.4rem 1.1rem;
}
.btn-cart:hover{ background:var(--clm-green-hover); color:#fff; }
.cart-badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--clm-gold); color:#fff;
  font-size:.7rem; font-weight:600;
  min-width:1.2rem; height:1.2rem; border-radius:1rem;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 .3rem;
}

/* ---------- Bandeau ULTRA ---------- */
.ultra-banner{
  text-align:center; font-size:.85rem; padding:.35rem .5rem;
  letter-spacing:.02em;
}
.ultra-banner.is-open{ background:var(--clm-green); color:#fff; }
.ultra-banner.is-closed{ background:var(--clm-green-soft); color:var(--clm-green); }

/* ---------- Hero ---------- */
.hero{
  padding:4rem 1rem 3.5rem;
  background:
    radial-gradient(60rem 60rem at 110% -20%, rgba(176,141,87,.12), transparent 60%),
    radial-gradient(50rem 50rem at -10% 120%, rgba(27,67,50,.10), transparent 55%),
    var(--clm-white);
  border:1px solid var(--clm-border);
  border-radius:1.25rem;
}
.hero-title{ font-weight:700; }
.hero-subtitle{ color:var(--clm-muted); max-width:38rem; margin-inline:auto; }
.hero-badges .badge{ font-weight:500; }

/* ---------- Cartes produit ---------- */
.card{
  border:1px solid var(--clm-border);
  border-radius:var(--radius);
  background:var(--clm-white);
  box-shadow:var(--shadow-sm);
}
a.card{ transition:transform .18s ease, box-shadow .18s ease; }
a.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.card .card-img-top{
  border-radius:var(--radius) var(--radius) 0 0;
  aspect-ratio:4/3; object-fit:cover;
}
.price{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-weight:600; }

/* ---------- Placeholder image produit ---------- */
.product-image-placeholder{
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--clm-green-soft),#f1ede3);
  color:var(--clm-green);
  font-family:'Fraunces',Georgia,serif; font-size:1.5rem;
  border-radius:var(--radius) var(--radius) 0 0;
}

/* ---------- Boutons ---------- */
.btn{ border-radius:.6rem; font-weight:500; }
.btn-dark{
  background:var(--clm-green); border-color:var(--clm-green);
}
.btn-dark:hover,.btn-dark:focus{ background:var(--clm-green-hover); border-color:var(--clm-green-hover); }
.btn-outline-dark{ border-color:var(--clm-green); color:var(--clm-green); }
.btn-outline-dark:hover{ background:var(--clm-green); border-color:var(--clm-green); }
.btn-lg{ padding:.7rem 1.6rem; }

/* ---------- Formulaires ---------- */
.form-control,.form-select{ border-radius:.6rem; border-color:var(--clm-border); }
.form-control:focus,.form-select:focus{
  border-color:var(--clm-green); box-shadow:0 0 0 .2rem rgba(27,67,50,.12);
}
.form-check-input:checked{ background-color:var(--clm-green); border-color:var(--clm-green); }

/* ---------- Blocs blancs ---------- */
.bg-white{ background:var(--clm-white)!important; }
.border{ border-color:var(--clm-border)!important; }
.shadow-sm{ box-shadow:var(--shadow-sm)!important; }

/* ---------- Badges ---------- */
.badge.text-bg-light{
  background:var(--clm-green-soft)!important; color:var(--clm-green)!important;
  border:none!important; font-weight:500;
}

/* ---------- Pagination (KnpPaginator/Bootstrap) ---------- */
.pagination .page-link{ color:var(--clm-green); border-color:var(--clm-border); }
.pagination .active .page-link{
  background:var(--clm-green); border-color:var(--clm-green);
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--clm-green); color:rgba(255,255,255,.85);
  margin-top:3rem;
}
.footer-brand{
  font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:1.3rem; color:#fff;
}
.footer-title{ color:var(--clm-gold); font-weight:600; text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; }
.footer-muted{ color:rgba(255,255,255,.7); }
.site-footer a{ color:rgba(255,255,255,.85); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{
  background:rgba(0,0,0,.15); color:rgba(255,255,255,.6);
}

/* ---------- Age gate ---------- */
#ageGate{ background:rgba(18,31,25,.8); backdrop-filter:blur(4px); }
#ageGate .modal-card{
  max-width:480px; width:92%;
  background:var(--clm-white);
  border-radius:1rem;
  box-shadow:var(--shadow);
}

/* ---------- Alertes ---------- */
.alert{ border-radius:var(--radius); }

/* =========================================================
   Accueil — refonte éditoriale (hero, modes, confiance, WhatsApp)
   ========================================================= */
:root{ --clm-wa:#1f8a54; --clm-wa-hover:#166b41; }

.home-over{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--clm-gold); font-weight:600; }

/* Hero asymétrique */
.home-hero{
  position:relative; overflow:hidden; border:1px solid var(--clm-border); border-radius:1.25rem;
  background:
    radial-gradient(46rem 40rem at 116% -30%, rgba(176,141,87,.16), transparent 60%),
    radial-gradient(42rem 40rem at -20% 130%, rgba(27,67,50,.12), transparent 58%),
    var(--clm-white);
}
.home-hero-inner{ display:grid; grid-template-columns:1.12fr .88fr; gap:2.5rem; align-items:center; padding:3rem 2.4rem; }
.home-h1{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-weight:600; font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.05; letter-spacing:-.01em; text-wrap:balance; margin:.8rem 0 0; }
.home-h1 em{ font-style:italic; color:var(--clm-gold); }
.home-sub{ color:var(--clm-muted); font-size:1.05rem; max-width:31rem; margin:1rem 0 0; }
.home-cta{ display:flex; gap:.7rem; margin-top:1.5rem; flex-wrap:wrap; }
@media (max-width:820px){ .home-hero-inner{ grid-template-columns:1fr; gap:1.6rem; padding:2rem 1.3rem; } }

/* Carte confiance */
.trustcard{ background:var(--clm-white); border:1px solid var(--clm-border); border-radius:1rem; box-shadow:var(--shadow); padding:1.4rem; }
.open-chip{ display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:700; color:var(--clm-green); background:var(--clm-green-soft); padding:.34rem .8rem; border-radius:99px; }
.open-chip--soft{ color:var(--clm-muted); background:#f1efe8; }
.pulse{ width:8px; height:8px; border-radius:50%; background:#3fae72; box-shadow:0 0 0 0 rgba(63,174,114,.6); animation:clmPulse 2s infinite; }
@keyframes clmPulse{ 70%{ box-shadow:0 0 0 7px rgba(63,174,114,0);} 100%{ box-shadow:0 0 0 0 rgba(63,174,114,0);} }
@media (prefers-reduced-motion: reduce){ .pulse{ animation:none; } }
.tc-big{ font-family:'Fraunces',Georgia,serif; font-size:1.5rem; color:var(--clm-text); margin:.85rem 0 .3rem; line-height:1.15; }
.tc-big b{ color:var(--clm-green); }
.tc-lil{ color:var(--clm-muted); font-size:.86rem; }
.tc-who{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--clm-border); }
.tc-who .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(150deg,var(--clm-green),var(--clm-gold)); flex:none; }
.tc-who .t{ font-size:.8rem; color:var(--clm-muted); } .tc-who .t b{ color:var(--clm-text); }

/* Bouton WhatsApp */
.wa-btn{ display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%; margin-top:1rem; background:var(--clm-wa); color:#fff; border:0; border-radius:.7rem; padding:.8rem; font-weight:700; font-size:.92rem; text-decoration:none; }
.wa-btn:hover{ background:var(--clm-wa-hover); color:#fff; }
.wa-btn svg{ width:18px; height:18px; fill:#fff; }
.wa-hours{ font-size:.75rem; color:var(--clm-muted); text-align:center; margin-top:.5rem; }
.wa-hours b{ color:var(--clm-text); }

/* 3 modes de livraison */
.modes{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--clm-border); border-radius:var(--radius); overflow:hidden; margin-top:1.5rem; background:var(--clm-white); }
.modes .mode{ padding:1.15rem 1.3rem; border-left:1px solid var(--clm-border); }
.modes .mode:first-child{ border-left:0; }
.modes .mode-tag{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clm-gold); font-weight:700; }
.modes .mode-name{ font-weight:700; color:var(--clm-text); font-size:1rem; margin:.15rem 0 .2rem; }
.modes .mode--hi .mode-name{ color:var(--clm-green); }
.modes .mode-desc{ font-size:.82rem; color:var(--clm-muted); }
@media (max-width:820px){ .modes{ grid-template-columns:1fr; } .modes .mode{ border-left:0; border-top:1px solid var(--clm-border); } .modes .mode:first-child{ border-top:0; } }

/* Section titre */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; margin:0 0 1.4rem; }
.sec-head h2{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-size:1.8rem; font-weight:600; margin:.2rem 0 0; }
.sec-head a{ font-size:.85rem; color:var(--clm-green); font-weight:600; border-bottom:1px solid var(--clm-gold); padding-bottom:2px; text-decoration:none; }

/* Cartes produit accueil */
.pcard{ display:block; background:var(--clm-white); border:1px solid var(--clm-border); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease; height:100%; }
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.pcard .pcard-img{ position:relative; }
.pcard .pcard-img img,.pcard .pcard-img .product-image-placeholder{ aspect-ratio:4/3; object-fit:cover; width:100%; border-radius:0; }
.pcard .lot{ position:absolute; top:.7rem; left:.7rem; font:.62rem/1 ui-monospace,Consolas,monospace; letter-spacing:.06em; color:var(--clm-green); background:rgba(255,255,255,.85); padding:.28rem .5rem; border-radius:99px; }
.pcard .pcard-body{ padding:1rem 1.1rem 1.2rem; }
.pcard .pcard-cat{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clm-gold); font-weight:700; }
.pcard .pcard-name{ font-family:'Fraunces',Georgia,serif; font-size:1.15rem; color:var(--clm-text); margin:.3rem 0 .1rem; }
.pcard .pcard-desc{ font-size:.82rem; color:var(--clm-muted); }
.pcard .pcard-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.8rem; }
.pcard .pcard-px{ font-family:'Fraunces',Georgia,serif; font-size:1.2rem; font-weight:600; color:var(--clm-green); }

/* Confiance avant/pendant/après */
.conf-lead{ text-align:center; max-width:40rem; margin:0 auto 2rem; }
.conf-lead h2{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-size:1.8rem; font-weight:600; }
.conf-lead p{ color:var(--clm-muted); margin:.5rem 0 0; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.step{ background:var(--clm-white); border:1px solid var(--clm-border); border-radius:var(--radius); padding:1.5rem; }
.step .ph{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--clm-gold); font-weight:700; }
.step h3{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-size:1.15rem; margin:.5rem 0 .6rem; }
.step ul{ margin:0; padding:0; list-style:none; }
.step li{ font-size:.86rem; color:var(--clm-muted); padding-left:1.3rem; position:relative; margin-bottom:.5rem; }
.step li::before{ content:"✓"; position:absolute; left:0; color:var(--clm-green); font-weight:700; }
.step li .wa{ color:var(--clm-wa); font-weight:700; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }

/* Bande toujours ouvert + WhatsApp */
.always{ background:var(--clm-green); color:#fff; border-radius:1.25rem; padding:2.4rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
.always .home-over{ color:var(--clm-gold); }
.always h2{ font-family:'Fraunces',Georgia,serif; color:#fff; font-size:1.9rem; font-weight:600; margin:.5rem 0 .5rem; line-height:1.12; }
.always p{ color:rgba(255,255,255,.82); margin:0; max-width:30rem; }
.always .always-box{ background:rgba(0,0,0,.14); border:1px solid rgba(176,141,87,.4); border-radius:1rem; padding:1.4rem; text-align:center; }
.always .always-box .zt{ font-family:'Fraunces',Georgia,serif; font-size:1.2rem; }
@media (max-width:820px){ .always{ grid-template-columns:1fr; gap:1.4rem; padding:1.6rem; } }

/* Teaser comptoir */
.teaser-card{ display:grid; grid-template-columns:.9fr 1.1fr; border:1px solid var(--clm-border); border-radius:1.25rem; overflow:hidden; }
.teaser-card .vis{ background:linear-gradient(160deg,var(--clm-green),#0f2a1d); min-height:180px; display:flex; align-items:center; justify-content:center; color:var(--clm-gold); font-family:'Fraunces',Georgia,serif; font-size:1.1rem; }
.teaser-card .txt{ background:var(--clm-white); padding:1.8rem; }
.teaser-card h3{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-size:1.4rem; margin:.4rem 0 .5rem; }
.teaser-card p{ color:var(--clm-muted); margin:0 0 1rem; }
@media (max-width:820px){ .teaser-card{ grid-template-columns:1fr; } }

/* Bulle WhatsApp flottante (tout le site) */
.float-wa{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:1040; display:inline-flex; align-items:center; gap:.55rem; background:var(--clm-wa); color:#fff; padding:.7rem 1.1rem .7rem .85rem; border-radius:99px; box-shadow:0 .6rem 1.4rem rgba(0,0,0,.22); font-weight:700; font-size:.86rem; text-decoration:none; }
.float-wa:hover{ background:var(--clm-wa-hover); color:#fff; }
.float-wa svg{ width:22px; height:22px; fill:#fff; }
@media (max-width:576px){ .float-wa .float-wa-txt{ display:none; } .float-wa{ padding:.75rem; } }

/* =========================================================
   Blog éditorial — Le Journal Calimeo
   Rendu typographique (pas de photos) : pastilles de rubrique
   colorées, colonne de lecture confortable, encadrés de réassurance.
   ========================================================= */
.blog-head{ max-width:44rem; margin:1rem 0 2rem; }
.blog-eyebrow{ font-family:'Fraunces',Georgia,serif; color:var(--clm-gold); letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; margin:0 0 .5rem; }
.blog-title{ font-size:clamp(2rem,4.5vw,3rem); line-height:1.05; margin:0 0 .75rem; text-wrap:balance; }
.blog-title span{ color:var(--clm-gold); font-style:italic; }
.blog-lead{ color:var(--clm-muted); font-size:1.08rem; max-width:38rem; margin:0; }

.blog-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.75rem; }
.chip{ --chip:var(--clm-green); display:inline-block; padding:.4rem .9rem; border-radius:99px; border:1px solid var(--clm-border); background:var(--clm-white); color:var(--clm-text); text-decoration:none; font-size:.86rem; font-weight:500; transition:all .15s ease; }
.chip:hover{ border-color:var(--chip); color:var(--chip); }
.chip.is-active{ background:var(--chip); border-color:var(--chip); color:#fff; }

.cat-pill{ display:inline-block; color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:.22rem .6rem; border-radius:99px; margin-bottom:.6rem; }
.cat-pill.sm{ font-size:.66rem; padding:.18rem .5rem; }

/* Article vedette */
.feature-card{ display:grid; grid-template-columns:1.6fr 1fr; gap:0; background:var(--clm-white); border:1px solid var(--clm-border); border-radius:1.25rem; overflow:hidden; text-decoration:none; color:var(--clm-text); box-shadow:var(--shadow-sm); margin-bottom:2.25rem; transition:transform .18s ease, box-shadow .18s ease; }
.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.feature-body{ padding:2rem 2.25rem; display:flex; flex-direction:column; justify-content:center; }
.feature-h{ font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.12; margin:0 0 .6rem; text-wrap:balance; }
.feature-x{ color:var(--clm-muted); margin:0 0 1rem; }
.feature-meta{ font-size:.85rem; color:var(--clm-green); font-weight:600; }
.feature-side{ position:relative; background:linear-gradient(150deg, color-mix(in srgb, var(--a) 88%, #000 0%), color-mix(in srgb, var(--a) 60%, #000 25%)); min-height:220px; display:flex; align-items:center; justify-content:center; }
.feature-side span{ font-family:'Fraunces',Georgia,serif; color:rgba(255,255,255,.9); font-size:1.5rem; letter-spacing:.02em; padding:0 1rem; text-align:center; }
@media (max-width:768px){ .feature-card{ grid-template-columns:1fr; } .feature-side{ order:-1; min-height:120px; } .feature-body{ padding:1.5rem; } }

/* Grille d'articles */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); gap:1.25rem; }
.post-card{ display:flex; flex-direction:column; background:var(--clm-white); border:1px solid var(--clm-border); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--clm-text); box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.post-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.post-band{ height:.5rem; }
.post-body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex-grow:1; }
.post-h{ font-size:1.12rem; line-height:1.2; margin:0 0 .5rem; text-wrap:balance; }
.post-x{ color:var(--clm-muted); font-size:.9rem; margin:0 0 1rem; flex-grow:1; }
.post-meta{ font-size:.78rem; color:var(--clm-muted); }

/* CTA bas de liste */
.blog-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:2.5rem 0 1rem; padding:1.5rem 1.75rem; background:var(--clm-green-soft); border:1px solid var(--clm-border); border-radius:1.25rem; }

/* -------- Page article -------- */
.read-progress{ position:sticky; top:0; height:3px; background:transparent; z-index:1035; margin:-1.5rem 0 0; }
.read-progress span{ display:block; height:100%; width:0; background:var(--clm-gold); transition:width .1s linear; }
.article{ max-width:44rem; margin:1.5rem auto 0; }
.article-crumb{ font-size:.85rem; margin-bottom:1rem; display:flex; gap:.4rem; align-items:center; }
.article-crumb a{ color:var(--clm-muted); text-decoration:none; }
.article-crumb a:hover{ color:var(--clm-green); }
.article-crumb span{ color:var(--clm-border); }
.article-head{ margin-bottom:1.75rem; }
.article-h1{ font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.08; margin:.3rem 0 .75rem; text-wrap:balance; }
.article-byline{ font-size:.85rem; color:var(--clm-muted); }
.article-chapo{ font-size:1.18rem; line-height:1.5; color:var(--clm-text); margin:1.1rem 0 0; padding-left:1rem; border-left:3px solid var(--clm-gold); }

/* Corps d'article (HTML riche rendu en |raw) */
.article-body{ font-size:1.06rem; line-height:1.75; color:var(--clm-text); }
.article-body > * + *{ margin-top:1.15rem; }
.article-body h2{ font-size:1.55rem; margin-top:2.5rem; line-height:1.2; }
.article-body h3{ font-size:1.22rem; margin-top:1.9rem; color:var(--clm-text); }
.article-body p{ margin:0; }
.article-body ul, .article-body ol{ margin:0; padding-left:1.4rem; }
.article-body li + li{ margin-top:.4rem; }
.article-body a{ color:var(--clm-green); text-decoration:underline; text-underline-offset:2px; }
.article-body a:hover{ color:var(--clm-gold); }
.article-body strong{ color:var(--clm-text); }
.article-body blockquote{ margin:1.6rem 0; padding:1rem 1.25rem; background:var(--clm-green-soft); border-left:3px solid var(--clm-green); border-radius:0 .5rem .5rem 0; color:var(--clm-text); }
.article-body blockquote p{ margin:0; }
.article-body .callout{ background:var(--clm-white); border:1px solid var(--clm-border); border-radius:.75rem; padding:1.1rem 1.25rem; box-shadow:var(--shadow-sm); }
.article-body .callout strong{ color:var(--clm-green); }
.article-body hr{ border:0; border-top:1px solid var(--clm-border); margin:2.25rem 0; }

.article-trust{ display:flex; gap:.9rem; align-items:flex-start; margin:2.5rem 0 0; padding:1.15rem 1.3rem; background:var(--clm-green-soft); border-radius:.9rem; font-size:.92rem; line-height:1.5; }
.article-trust-badge{ flex:0 0 auto; width:1.8rem; height:1.8rem; border-radius:99px; background:var(--clm-green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.article-foot-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 0; }
.article-related{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--clm-border); }

/* -------- Bloc FAQ d'article (SEO/GEO) -------- */
.article-faq{ margin:2.5rem 0 0; }
.faq-item{ border:1px solid var(--clm-border); border-radius:.6rem; background:var(--clm-white); margin-bottom:.6rem; overflow:hidden; }
.faq-item summary{ cursor:pointer; padding:.9rem 1.1rem; font-weight:600; color:var(--clm-green); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.3rem; color:var(--clm-gold); line-height:1; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item .faq-a{ padding:0 1.1rem 1rem; color:var(--clm-text); line-height:1.65; }

/* -------- Pages statiques (légal, aide, livraison) -------- */
.legal{ max-width:52rem; margin:1rem auto 0; }
.legal h1{ font-size:clamp(1.8rem,3.5vw,2.4rem); margin-bottom:.4rem; text-wrap:balance; }
.legal .legal-updated{ color:var(--clm-muted); font-size:.85rem; margin-bottom:1.5rem; }
.legal-card{ background:var(--clm-white); border:1px solid var(--clm-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.75rem 1.9rem; }
.legal-card h2{ font-size:1.3rem; margin:2rem 0 .6rem; }
.legal-card h2:first-child{ margin-top:0; }
.legal-card h3{ font-size:1.05rem; color:var(--clm-text); margin:1.3rem 0 .4rem; }
.legal-card p, .legal-card li{ line-height:1.7; }
.legal-card ul, .legal-card ol{ padding-left:1.3rem; }
.legal-card li + li{ margin-top:.35rem; }
.legal-card .todo{ background:#fff8e6; border:1px dashed #d8b34a; border-radius:.4rem; padding:.1rem .4rem; font-size:.92em; color:#7a5c10; }
.legal-card dl{ margin:0; }
.legal-card dt{ font-weight:600; color:var(--clm-green); margin-top:.8rem; }
.legal-card dd{ margin:0 0 .2rem; }

/* Cartes des modes de livraison */
.ship-modes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin:1.25rem 0; }
.ship-mode{ border:1px solid var(--clm-border); border-radius:var(--radius); background:var(--clm-white); padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm); }
.ship-mode .sm-name{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-size:1.15rem; font-weight:600; }
.ship-mode .sm-zone{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--clm-muted); margin:.3rem 0; }
.ship-mode .sm-delay{ color:var(--clm-text); }
.ship-mode .sm-price{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-weight:600; font-size:1.25rem; margin-top:.5rem; }
.cities{ columns:2; column-gap:2rem; font-size:.95rem; }
.cities li{ break-inside:avoid; }
@media (max-width:520px){ .cities{ columns:1; } }

/* -------- Logo Calimeo (C doré + feuille, wordmark géométrique) -------- */
.brand-lockup{ display:inline-flex; align-items:center; gap:.6rem; }
.brand-mark{ width:44px; height:44px; display:block; flex:none; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; gap:.18rem; }
.brand-word{
  font-family:'Jost',system-ui,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.32em;
  font-size:1.35rem; color:var(--clm-gold); padding-left:.32em;
}
.brand-tag{
  font-family:'Jost',system-ui,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.34em;
  font-size:.5rem; color:var(--clm-muted); padding-left:.36em;
}
.brand-tag b{ color:#4f7a4e; font-weight:500; }
@media (max-width:576px){
  .brand-mark{ width:38px; height:38px; }
  .brand-word{ font-size:1.12rem; letter-spacing:.22em; }
  .brand-tag{ display:none; }
}