/* ═══════════════════════════════════════════════════════════════
   e-Casa — theme.css · Couche d'harmonisation globale (2026-07)
   Chargée en DERNIER sur toutes les pages : unifie la palette,
   la texture, le footer et les composants entre l'accueil
   (style.css) et les pages internes (_astro/*.css).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Palette officielle unifiée */
  --blue:#1B4FD8;        /* bleu e-Casa */
  --blue-dark:#0E2A6B;   /* bleu profond (héro sombre, dégradés) */
  --blue-soft:#EEF3FF;
  --blue-50:#EEF3FF;
  --green:#16A34A;       /* vert action */
  --green-dark:#128A3E;
  --green-bright:#22C55E;
  --green-soft:#ECFDF3;

  /* Neutres à fort contraste (lisibilité) */
  --ink:#0F172A;
  --text:#33415A;
  --muted:#5B6573;
  --line:#E7ECF3;
  --bg:#FFFFFF;
  --bg-alt:#F5F9FE;
  --soft:#F5F9FE;
  --card:#FFFFFF;

  /* Système d'ombres et de mouvement commun */
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 2px 10px rgba(14,42,107,.06);
  --shadow:0 14px 34px rgba(14,42,107,.10);
  --shadow-md:0 14px 34px rgba(14,42,107,.10);
  --shadow-lg:0 26px 60px rgba(14,42,107,.16);
  --dot:rgba(27,79,216,.055);
  --grid:rgba(14,42,107,.05);
}

/* Texture « papier premium » identique sur tout le site. */
body{
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);
  background-size:24px 24px;
}

/* Sélection & focus visibles, aux couleurs de la marque. */
::selection{background:rgba(27,79,216,.16)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

/* ── En-tête : même rendu partout ── */
header.site{position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
header.site .nav-links a{transition:color .15s}
header.site .nav-links a:hover{color:var(--blue)}

/* ── Boutons : un seul langage d'action (vert = action principale) ── */
.btn-green,.btn-cta{
  background:linear-gradient(135deg,#22C55E,#15A047);color:#fff;
  box-shadow:0 10px 24px rgba(22,163,74,.32)}
.btn-green:hover,.btn-cta:hover{
  background:linear-gradient(135deg,#22C55E,#15A047);
  box-shadow:0 16px 32px rgba(22,163,74,.42);transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--blue),#1538A0);color:#fff}

/* ── Fils d'Ariane et liens de contenu : bleu marque lisible ── */
.crumb a,.prose a{color:var(--blue)}
.prose a:hover{text-decoration:underline}

/* ── Pages internes : héro d'entrée avec liseré de marque ── */
.page-hero h1{color:var(--ink)}

/* Chips d'infos (.facts) aux couleurs de la marque. */
.facts .fact{background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--blue);border-radius:12px;
  box-shadow:var(--shadow-sm)}
.facts .fact .fact-v,.facts .fact-v{color:var(--blue-dark)}

/* Cartes de listes (guides, quartiers…) : survol premium unifié. */
.container .card{position:relative;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.container .card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--green-bright));
  transition:transform .35s var(--ease)}
.container .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#d7e2f6}
.container .card:hover::before{transform:scaleX(1)}

/* FAQ des pages internes : même style que l'accueil (carte + « + »). */
.prose details.faq,.container details.faq{
  border:1px solid var(--line);border-radius:13px;background:#fff;
  padding:0;overflow:hidden;margin:0 0 12px;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.prose details.faq summary,.container details.faq summary{
  list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.prose details.faq summary::-webkit-details-marker,
.container details.faq summary::-webkit-details-marker{display:none}
.prose details.faq summary::after,.container details.faq summary::after{
  content:"+";font-size:22px;color:var(--blue);font-weight:400;line-height:1}
.prose details.faq[open] summary::after,.container details.faq[open] summary::after{content:"–"}
.prose details.faq p,.container details.faq p{padding:0 20px 16px;margin:0;color:var(--muted)}
.prose details.faq:hover,.container details.faq:hover{
  border-color:rgba(27,79,216,.28);box-shadow:var(--shadow-sm)}
.prose details.faq[open],.container details.faq[open]{
  border-color:rgba(27,79,216,.20);box-shadow:var(--shadow-sm)}

/* Bandeau CTA des pages internes : mêmes dégradé/texture que l'accueil. */
.prose .cta-band,.container .cta-band{
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;
  border:0;border-radius:20px;box-shadow:0 20px 48px rgba(27,79,216,.26)}
.prose .cta-band p,.container .cta-band p,
.prose .cta-band strong,.container .cta-band strong{color:#fff}
.prose .cta-band{padding:26px 28px}

/* ── Footer : identique et signé sur toutes les pages ── */
footer.site{position:relative;background:#0B1426;color:#CDD6E4}
footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--green-bright))}
footer.site a{transition:color .15s}
footer.site a:hover{color:#fff}
footer.site h4{color:#fff}

/* ═══════════════════════════════════════════════════════════════
   POLISH PRO (v2) — signature visuelle et micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* Signature : le mot-clé du héro en dégradé de marque (bleu → vert). */
.hero h1 .hl{
  background:linear-gradient(92deg,var(--blue) 0%,#2E7CF6 55%,var(--green-bright) 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Piliers de confiance du héro : pastilles nettes et lisibles. */
.hero .trust{gap:10px;margin-top:28px}
.hero .trust span{background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;box-shadow:var(--shadow-sm);color:var(--text)}

/* Valeurs : une couleur d'accent par carte (bleu / vert / bleu profond). */
.cards3 .vcard:nth-child(2) .ic{
  background:linear-gradient(135deg,var(--green-soft),#fff);color:var(--green);
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.12)}
.cards3 .vcard:nth-child(3) .ic{
  background:linear-gradient(135deg,#E9EEFB,#fff);color:var(--blue-dark);
  box-shadow:inset 0 0 0 1px rgba(14,42,107,.12)}

/* En-tête : ombre douce au défilement (toutes les pages, via main.js). */
header.site.scrolled{box-shadow:0 6px 24px rgba(14,42,107,.10)}

/* Animations d'apparition au défilement — désormais sur TOUTES les
   pages (main.js pose déjà les classes ; seul l'accueil avait le CSS). */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.stagger.in>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1;transform:none;transition:none}
}

/* Titres : chasse resserrée, rendu éditorial. */
h1,h2{letter-spacing:-.02em}

/* Boutons : léger relief interne, geste uniforme sur tout le site. */
.btn{position:relative}
.btn-green::after,.btn-cta::after{content:"";position:absolute;inset:1px;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%)}

/* Mobile : actions du héro pleine largeur, confort tactile. */
@media(max-width:540px){
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* Confort mobile : héros internes plus compacts. */
@media(max-width:640px){
  .page-hero{padding:44px 0}
}

/* ── Pages internes : titres H2 légèrement réduits ──
   (l'accueil n'utilise pas .section/.prose/.page-hero, il n'est pas affecté) */
.section h2,.prose h2,.page-hero h2{font-size:clamp(1.3rem,2.8vw,1.85rem)}

/* ── Boutons verts : texte toujours blanc ──
   Corrige l'écrasement par « .prose a{color:var(--blue)} » ci-dessus. */
a.btn-green,a.btn-cta,.btn-green,.btn-cta,
.prose a.btn-green,.prose a.btn-cta,.cta-band a.btn-green{color:#fff}


/* ── Footer : badges "stores" IDENTIQUES à l'accueil (15px) sur TOUTES les
   pages (audit footer). theme.css est chargé sur les 44 pages ; sélecteur
   spécifique + !important → fait foi quel que soit le CSS de base. ── */
footer.site .stores .badge{padding:5px 8px!important;gap:6px!important}
footer.site .stores .badge .glyph{width:15px!important;height:15px!important}
footer.site .stores .badge .t small{font-size:7.5px!important}
footer.site .stores .badge .t b{font-size:11px!important}