/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   Bulabois × Thelma — réplique fidèle du design thelma.pet
   ──────────────────────────────────────────────────────────────────────────
   ORGANISATION DU FICHIER
     :root .............. design tokens (couleurs, typo, ombres, rayons)
     reset + helpers .... base, .wrap (conteneur centré), titres, boutons pill
     HEADER ............. barre sticky + nav + soulignement scrollspy
     HERO / carrousels .. sections plein-écran (technique fond flouté + scrim)
     BANDES de contenu .. §3 traits, §7 grille styles, §8 axes, §9 split,
                          §10 metrics, §11 FAQ, §12 CTA, §12bis refuge
     FOOTER
     Reveal + Responsive + reduced-motion

   PRINCIPE COULEUR : sections claires (cream) et sombres (dark/ink) alternées,
   accent corail réservé aux eyebrows / numéros / badges — comme sur thelma.pet.
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */

:root{
  /* — Fonds clairs / encres sombres — */
  --cream:      #F4F1EA;   /* fond principal */
  --cream-2:    #EDE8DD;   /* fond alterné (bandes, refuge) */
  --ink:        #0E0E0E;   /* texte + sections sombres */
  --ink-soft:   #2B2A28;   /* texte de nav */
  --dark:       #121110;   /* bande "méthode" */
  --darker:     #0A0908;   /* bande "preuve" */
  /* — Accents — */
  --coral:      #CB5E3C;   /* accent de marque (eyebrows, numéros, badges) */
  --coral-soft: #E08A6A;   /* variante accent sur fond sombre */
  --amber:      #E0A24E;   /* étoiles / détails */
  /* — Lignes & textes secondaires (rgba pour s'adapter clair/sombre) — */
  --line:       rgba(14,14,14,.12);
  --line-light: rgba(255,255,255,.14);
  --muted:      #6B665E;
  --muted-light:rgba(255,255,255,.62);
  /* — Formes — */
  --radius:     18px;
  --radius-lg:  26px;
  --shadow:     0 10px 40px rgba(14,14,14,.10);
  --shadow-lg:  0 30px 80px rgba(14,14,14,.22);
  --wrap:       1240px;    /* largeur max du contenu centré */
  /* — Typo : display lourde (titres), serif (logo), grotesk (corps) — */
  --font-disp:  'Archivo', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-body:  'Hanken Grotesk', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
.center{text-align:center}

/* ── Typo helpers ───────────────────────────── */
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--coral);
  margin-bottom:18px;
}
.eyebrow.center{text-align:center}
.eyebrow.light{color:var(--coral-soft)}

.display{
  font-family:var(--font-disp);
  font-weight:900;
  font-size:clamp(2.3rem,4.2vw,3.7rem);
  line-height:.96;
  letter-spacing:-.02em;
}
.display.sm{font-size:clamp(2.1rem,4vw,3.4rem)}

.section-title{
  font-family:var(--font-disp);
  font-weight:900;
  font-size:clamp(2.1rem,4.6vw,3.8rem);
  line-height:.98;
  letter-spacing:-.02em;
}
.section-title.light{color:#fff}
.section-sub{
  font-size:clamp(1rem,1.3vw,1.15rem);
  color:var(--muted);
  max-width:680px;
  margin:22px auto 0;
}
.section-sub.center{margin-inline:auto}
.section-sub.light{color:var(--muted-light)}
.section-sub.wide{max-width:840px}
.section-sub a{color:var(--coral);font-weight:600}
/* mots-clés mis en avant sur fond sombre (orange de marque) */
.hl{color:var(--coral-soft);font-weight:600}
.section-sub.light strong{color:#fff;font-weight:700}

/* ── Boutons pill ───────────────────────────── */
.btn-pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:700;font-size:.92rem;
  padding:14px 24px;border-radius:999px;
  background:var(--ink);color:#fff;
  border:1px solid var(--ink);
  cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;
  white-space:nowrap;
}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(14,14,14,.25)}
.btn-pill .arrow{transition:transform .25s}
.btn-pill:hover .arrow{transform:translateX(4px)}
.btn-pill.ghost{background:rgba(255,255,255,.92);color:var(--ink);border-color:rgba(255,255,255,.92);box-shadow:var(--shadow)}
.btn-pill.ghost:hover{background:#fff}
.btn-pill.dark{background:var(--ink);color:#fff}
.btn-pill.disabled,.btn-pill.ghost.disabled{cursor:default;opacity:.85}
.btn-pill.disabled:hover{transform:none;box-shadow:var(--shadow)}
.clock,.btn-pill .clock{font-weight:600;opacity:.65;font-size:.82rem}

/* ── HEADER (sticky) ────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(244,241,234,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.site-header.scrolled{
  background:rgba(244,241,234,.92);
  border-color:var(--line);
  box-shadow:0 4px 24px rgba(14,14,14,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.logo{
  font-family:var(--font-serif);font-weight:600;font-size:1.6rem;
  letter-spacing:-.01em;color:var(--ink);
}
.logo .logo-dot{color:var(--coral)}
.logo.light{color:#fff}
.nav{display:flex;gap:30px}
.nav a{
  font-weight:600;font-size:.94rem;color:var(--ink-soft);
  position:relative;padding:4px 0;transition:color .2s;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--ink);transition:width .25s;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}
/* section courante (scrollspy) : petite barre noire sous l'item */
.nav a.active{color:var(--ink)}
.nav a.active::after{width:100%}
.header-cta{padding:11px 20px}

/* ── HERO / carrousels plein-bleed ──────────── */
.hero{
  position:relative;min-height:82vh;display:flex;align-items:flex-start;
  background:var(--cream-2);overflow:hidden;
}
.hero.alt{background:#E7E1D5}
.hero-media{position:absolute;inset:0;z-index:0}
/* rail horizontal : translateX(-i*100%) défile vers la slide i (animé en JS) */
.track{display:flex;height:100%;will-change:transform;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.slide{position:relative;min-width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Technique "fond flouté" : la MÊME image est posée 2 fois — une copie floutée
   en cover qui remplit tout le cadre (.slide-fill), et l'originale nette en
   contain par-dessus (.slide-main). Avantage : on accepte n'importe quel ratio
   d'image (couverture portrait, spread paysage, mockup tél) sans recadrage moche. */
.slide-fill{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(34px) saturate(1.1) brightness(.9);transform:scale(1.18);z-index:0;
}
.slide-main{
  position:relative;z-index:1;max-width:min(66%,960px);max-height:94%;
  width:auto;height:auto;object-fit:contain;border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
/* Placeholder Bella : si le fichier assets/bella/bX.jpg n'existe pas encore,
   le onerror JS ajoute .missing (image masquée), et le :has() ci-dessous fait
   apparaître un cadre pointillé "Portrait à venir". Dès que les vrais fichiers
   sont déposés, ils s'affichent : aucun code à toucher. */
.slide-main.missing{opacity:0}
.slide:has(.slide-main.missing)::after{
  content:'Portrait à venir';
  position:absolute;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:min(46%,440px);aspect-ratio:3/4;
  border:2px dashed rgba(255,255,255,.5);border-radius:12px;
  color:rgba(255,255,255,.85);font-weight:700;letter-spacing:.04em;
  background:rgba(0,0,0,.18);
}
.slide[data-tag]::before{
  content:attr(data-tag);
  position:absolute;z-index:3;bottom:26px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px);
  font-size:.78rem;font-weight:600;letter-spacing:.03em;
  padding:7px 16px;border-radius:999px;
}

/* phones (LOAD) */
.hero.phones .slide-main{max-width:min(34%,360px);border-radius:26px;box-shadow:0 26px 70px rgba(0,0,0,.5)}
.hero.phones .slide-fill{filter:blur(40px) brightness(.55) saturate(1.2)}

/* Scrim de lisibilité : double dégradé sombre (un horizontal depuis la gauche
   où se trouve le texte, un vertical depuis le bas) pour garantir le contraste
   du panneau blanc quelle que soit l'image derrière. pointer-events:none pour
   ne pas bloquer le swipe. */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,7,6,.82) 0%,rgba(8,7,6,.5) 34%,rgba(8,7,6,0) 62%),
             linear-gradient(180deg,rgba(8,7,6,.45) 0%,rgba(8,7,6,0) 32%);
}

/* margin-left calc() : aligne le bord gauche du texte sur la gouttière du .wrap
   centré (= (100vw - largeur max)/2 + padding), avec un plancher de 28px sur
   petits écrans. Le panneau reste ainsi "dans la grille" malgré le hero full-bleed. */
.hero-panel{
  position:relative;z-index:5;max-width:700px;
  padding:96px 0 0 0;   /* top-aligné : le gros titre passe au-dessus de Bella */
  /* texte tiré vers le bord gauche (hors de la gouttière du contenu centré) */
  margin-left:max(24px,calc((100vw - var(--wrap))/2 - 36px));
  color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.4);
}
/* le titre Bella reste sur 2 lignes (les sauts <br>) sans re-wrapper */
.hero-panel h1.display{white-space:nowrap}
.hero-panel .eyebrow{color:var(--coral-soft)}
.hero-panel .lede{
  font-size:clamp(1rem,1.25vw,1.12rem);color:rgba(255,255,255,.86);
  margin:20px 0 26px;max-width:480px;
}
.hero-panel .badge{
  display:inline-block;background:var(--coral);color:#fff;
  font-weight:700;font-size:.82rem;padding:8px 16px;border-radius:999px;margin-bottom:18px;
}
.panel-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero-ps{margin-top:16px;font-size:.82rem;color:rgba(255,255,255,.62);font-style:italic}
.hero-ps a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* indicateur de slide animé (la pilule Telma) */
.indicator{
  position:absolute;z-index:6;right:34px;bottom:34px;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.92);border-radius:999px;
  padding:9px 13px;box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.ind-seg{width:8px;height:8px;border-radius:999px;background:rgba(14,14,14,.18);transition:width .4s,background .4s;cursor:pointer;position:relative;overflow:hidden}
.ind-seg.active{width:42px;background:rgba(14,14,14,.18)}
.ind-seg.done{background:var(--ink)}
/* barre de chargement remplie en JS via rAF → visible même en reduced-motion */
.ind-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--ink);border-radius:999px;pointer-events:none}

/* ── BANDES de contenu ──────────────────────── */
.band{padding:clamp(80px,11vw,140px) 0}
.band.tight{padding-top:clamp(40px,5vw,70px)}
.band.cream{background:var(--cream)}
.band.dark{background:var(--dark);color:#fff}
.band.darker{background:var(--darker);color:#fff}

/* §3 traits */
.traits{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:960px;margin:56px auto 0;
  align-items:start;            /* la carte survolée grandit sans étirer les voisines */
}
.trait{
  position:relative;  /* ancre le panneau de détail flottant */
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow);min-height:160px;  /* hauteurs égales au repos */
  transition:transform .3s ease,box-shadow .3s ease;
}
.trait:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);z-index:5;border-bottom-left-radius:0;border-bottom-right-radius:0}
.trait-word{display:block;font-family:var(--font-disp);font-weight:800;font-size:1.5rem;margin-bottom:10px}
.trait-desc{display:block;color:var(--muted);font-size:.96rem}
/* ── PATTERN « overlay flottant » (réutilisé par .step-more au §8) ───────────
   Le détail est un panneau en position:absolute ancré sous la carte (top:100%).
   Étant hors du flux, il n'allonge JAMAIS la page : le contenu en dessous reste
   immobile quand on survole/quitte vite les cartes (sinon effet yo-yo). Au repos
   il est masqué (opacity:0 + visibility:hidden) ; au survol il apparaît en fondu.
   Sur écran tactile (@media hover:none) on le repasse en flux normal, tout visible. */
.trait-more{
  position:absolute;left:-1px;right:-1px;top:100%;
  background:#fff;border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 26px 46px -12px rgba(14,14,14,.22);
  padding:2px 28px 24px;
  color:var(--ink-soft);font-size:.92rem;line-height:1.5;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .26s ease,visibility 0s linear .26s;
  z-index:5;
}
.trait:hover .trait-more{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .26s ease,visibility 0s}
/* écrans tactiles (pas de survol) : on repasse en flux normal, tout visible */
@media (hover:none){
  .trait-more{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;background:transparent;padding:14px 0 0}
  .trait:hover{border-radius:var(--radius)}
}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px;color:var(--muted);font-weight:600;font-size:.95rem}
.facts .sep{color:var(--coral)}

/* §7 grille styles — vignettes volontairement compactes (grille cadrée en
   largeur) : catalogue secondaire, on ne lui donne pas trop de place. */
.style-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  max-width:720px;margin:44px auto 38px;
}
.style-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.frame.square{
  width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .3s,box-shadow .3s;
}
.style-card:hover .frame.square{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.frame.square img{width:100%;height:100%;object-fit:cover}
.style-name{font-weight:700;font-size:.82rem;margin:11px 0 2px}
.style-price{display:flex;flex-direction:column;line-height:1.2}
.style-price span{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.style-price strong{font-family:var(--font-disp);font-weight:800;font-size:.98rem}

/* §8 — Les 3 axes : cartes dont le détail se déploie au survol.
   Même PATTERN « overlay flottant » que les cartes §3 (cf. .trait-more) :
   le panneau de détail est en position:absolute, donc il ne rallonge pas la
   page → le contenu en dessous (bande sombre §9) ne bouge jamais au survol. */
.steps-hint{text-align:center;color:var(--muted);font-size:.85rem;margin-top:14px;font-style:italic}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px;align-items:start}
.step{
  position:relative;  /* ancre le panneau de détail flottant */
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;box-shadow:var(--shadow);min-height:188px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);z-index:6;border-bottom-left-radius:0;border-bottom-right-radius:0}
.step-num{font-family:var(--font-disp);font-weight:800;font-size:1rem;color:var(--coral)}
.step h3{font-family:var(--font-disp);font-weight:800;font-size:1.3rem;margin:14px 0 10px;line-height:1.05}
.step p{color:var(--muted);font-size:.95rem}
.step-sub{color:var(--muted);font-size:.95rem}
.step-more{
  position:absolute;left:-1px;right:-1px;top:100%;
  background:#fff;border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 26px 46px -12px rgba(14,14,14,.22);
  padding:4px 26px 24px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .26s ease,visibility 0s linear .26s;
  z-index:6;
}
.step:hover .step-more{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .26s ease,visibility 0s}
.step-more-inner{min-height:0}
.step-more-inner p{font-size:.9rem;color:var(--muted);line-height:1.5}
.step-more-inner p + p{margin-top:10px}
.step-more-inner strong{color:var(--ink-soft);font-weight:700}
/* écrans tactiles : pas de survol → flux normal, tout visible */
@media (hover:none){
  .step-more{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;background:transparent;padding:14px 0 0}
  .step:hover{border-radius:var(--radius)}
}

/* §9 split dark : carte de preuve (capture boutique) + grille de features */
.split-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;margin-top:60px;align-items:start}
/* carte blanche affichant la capture au ratio naturel (screenshot, pas crop) */
.proof-visual{margin:0;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.proof-visual img{display:block;width:100%}
.proof-visual figcaption{padding:14px 18px;font-size:.86rem;color:var(--muted);line-height:1.4}
.proof-visual figcaption strong{color:var(--ink);font-weight:700}
.features{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feature{background:rgba(255,255,255,.04);border:1px solid var(--line-light);border-radius:var(--radius);padding:24px 22px}
.feature-ic{display:inline-block;font-size:1.2rem;color:var(--coral-soft);margin-bottom:12px}
.feature h4{font-weight:700;font-size:1.02rem;margin-bottom:7px}
.feature p{color:var(--muted-light);font-size:.9rem}

/* §9 — démo "prompt → rendu" */
.prompt-demo{margin-top:64px}
.prompt-demo-head{text-align:center;max-width:680px;margin:0 auto 34px}
.prompt-demo-head h3{font-family:var(--font-disp);font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:10px}
.prompt-demo-head p{color:var(--muted-light);font-size:.98rem}
/* triptyque : photo réelle → script → rendu (le script, plus dense, prend la
   colonne centrale plus large). align-items:start = colonnes alignées en haut. */
.prompt-trio{display:grid;grid-template-columns:.82fr 1.36fr .82fr;gap:18px;align-items:start}
/* cartes image (photo de départ + rendu corporate), ratio portrait fixe */
.prompt-shot{display:flex;flex-direction:column;gap:10px;margin:0}
.prompt-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.prompt-shot figcaption{text-align:center;font-size:.82rem;color:var(--muted-light);font-weight:600}
/* fenêtre "terminal" qui contient le prompt */
.prompt-code{display:flex;flex-direction:column;background:#0c0b0a;border:1px solid var(--line-light);border-radius:var(--radius);overflow:hidden}
.prompt-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line-light);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem;color:var(--muted-light)}
.prompt-bar span{width:9px;height:9px;border-radius:50%;background:#4a4744}
.prompt-bar span:nth-child(1){background:#E06A5C}
.prompt-bar span:nth-child(2){background:#E0A24E}
.prompt-bar span:nth-child(3){background:#7FB069}
.prompt-bar{gap:7px}
.prompt-bar span:last-of-type{margin-right:8px}
/* le texte du prompt : petit mais lisible, défilable si trop long */
.prompt-code pre{
  margin:0;padding:18px 20px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.72rem;line-height:1.55;color:rgba(255,255,255,.82);
  white-space:pre-wrap;word-break:break-word;
  max-height:440px;overflow-y:auto;
}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.faq-head .section-sub{margin-left:0}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--line);padding:6px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 0;
  font-family:var(--font-disp);font-weight:700;font-size:1.18rem;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'⌄';font-size:1.4rem;color:var(--coral);transition:transform .3s;line-height:1}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-body{padding:0 0 24px;color:var(--muted);max-width:560px;font-size:1rem}
/* réponses longues : paragraphes + liste à puces */
.faq-body p + p,.faq-body ul{margin-top:12px}
.faq-body ul{padding-left:20px;list-style:disc}
.faq-body li{margin-top:8px}
.faq-body li::marker{color:var(--coral)}
.faq-body strong{color:var(--ink-soft);font-weight:700}

/* §12 shelter (refuge de Bella) */
.shelter{background:var(--cream-2);padding:clamp(50px,7vw,86px) 0}
.shelter-inner{display:flex;align-items:center;gap:34px;max-width:920px}
.shelter-mark{
  font-size:2rem;flex:none;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);
}
.shelter-title{font-family:var(--font-disp);font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);margin:6px 0 12px;line-height:1.05}
.shelter-text{color:var(--muted);max-width:620px;margin-bottom:20px}

/* ── FOOTER ─────────────────────────────────── */
.site-footer{background:var(--ink);color:#fff;padding:72px 0 38px}
.footer-inner{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:38px;border-bottom:1px solid var(--line-light)}
.footer-brand{max-width:420px}
.footer-brand .logo{font-size:1.9rem;display:inline-block;margin-bottom:16px}
.footer-brand p{color:var(--muted-light);font-size:.95rem}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{color:rgba(255,255,255,.78);font-weight:600;font-size:.95rem;transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-bottom{padding-top:26px;font-size:.82rem;color:rgba(255,255,255,.45)}

/* ── Modale contact (clic « Échangeons ») ───── */
.contact-overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,7,6,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;
}
.contact-overlay.open{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
.contact-card{
  position:relative;display:grid;
  grid-template-columns:290px 1fr;
  grid-template-areas:"media body" "interests interests";
  max-width:780px;width:100%;max-height:92vh;
  background:var(--cream);border-radius:var(--radius-lg);
  overflow:auto;box-shadow:var(--shadow-lg);
  transform:translateY(14px) scale(.985);transition:transform .3s ease;
}
.contact-overlay.open .contact-card{transform:none}
/* mini-carrousel photo (réutilise la classe Carousel via [data-carousel]) */
.contact-media{grid-area:media;position:relative;overflow:hidden;min-height:400px}
.contact-media .slide img{width:100%;height:100%;object-fit:cover;display:block}
.contact-media .indicator{right:auto;left:50%;transform:translateX(-50%);bottom:12px;padding:7px 10px}
.contact-body{grid-area:body;padding:34px 34px 30px}
.contact-body .eyebrow{margin-bottom:10px}
.contact-name{font-family:var(--font-disp);font-weight:900;font-size:2rem;line-height:1;margin-bottom:8px}
.contact-tagline{color:var(--muted);font-size:.98rem;margin-bottom:18px;max-width:none}
.contact-poles{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px}
.pole{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.84rem;font-weight:600;box-shadow:var(--shadow)}
.contact-info{display:grid;gap:10px;margin-bottom:24px}
.contact-info > div{display:grid;grid-template-columns:92px 1fr;align-items:baseline;gap:10px}
.contact-info dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.contact-info dd{font-size:1rem;font-weight:600}
.contact-info a{color:var(--coral)}
.contact-info a:hover{text-decoration:underline}
/* centres d'intérêt (bande pleine largeur sous photo+infos) */
.contact-interests{grid-area:interests;padding:24px 34px 30px;border-top:1px solid var(--line)}
.ci-intro{font-weight:700;font-size:.95rem;margin-bottom:12px}
.contact-interests ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.contact-interests li{position:relative;padding-left:20px;font-size:.92rem;color:var(--ink-soft);line-height:1.4}
.contact-interests li::before{content:'';position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.contact-close{
  position:absolute;top:14px;right:16px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.88);color:var(--ink);font-size:1.5rem;line-height:1;
  display:grid;place-items:center;transition:background .2s,transform .2s;
}
.contact-close:hover{background:#fff;transform:rotate(90deg)}
body.no-scroll{overflow:hidden}
@media (max-width:640px){
  /* mobile : on quitte la grille pour un simple empilement flex (photo → infos
     → intérêts), plus robuste — la grille provoquait un chevauchement. */
  .contact-card{display:flex;flex-direction:column;max-width:420px;max-height:90vh}
  .contact-card > *{flex:none}
  .contact-media{min-height:0;aspect-ratio:4/3}
  .contact-body{padding:24px}
  .contact-interests{padding:22px 24px 26px}
  .contact-interests ul{grid-template-columns:1fr}
}

/* ── Reveal on scroll ───────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ── Responsive ─────────────────────────────────
   980px : tablette — grilles 4/5 col → 2 col, nav masquée, hero panel pleine largeur
   600px : mobile — tout en 1 colonne, hero un peu plus haut, indicateur resserré */
@media (max-width:980px){
  .nav{display:none}
  .traits,.steps{grid-template-columns:1fr 1fr}
  /* .style-grid reste en 4 colonnes (vignettes déjà compactes, cadrées à 720px) */
  .split-grid,.faq-grid,.prompt-trio{grid-template-columns:1fr;gap:34px}
  .features{grid-template-columns:1fr 1fr}
  .slide-main{max-width:82%}
  .hero.phones .slide-main{max-width:58%}
  .hero-panel{max-width:none;margin-right:28px;padding-bottom:54px}
}
@media (max-width:600px){
  .header-cta{padding:10px 16px;font-size:.84rem}
  .traits,.steps,.features{grid-template-columns:1fr}
  .style-grid{grid-template-columns:1fr 1fr}   /* 2 col sur mobile, vignettes compactes */
  .slide-main{max-width:90%}
  .hero.phones .slide-main{max-width:66%}
  /* Hero mobile : texte compact EN BAS de l'image, étiquette de style EN HAUT
     → la tête du chat (au centre) reste dégagée entre les deux. Titre 1 ligne. */
  .hero{min-height:82vh;align-items:flex-end}
  .hero-panel{padding:0 0 24px 0;margin-right:20px}
  .hero .display br{display:none}                       /* titre sur une seule ligne */
  .hero .display{white-space:nowrap;font-size:clamp(.8rem,4.3vw,1.15rem);line-height:1.12}
  .hero-panel .eyebrow{font-size:.62rem;margin-bottom:8px}
  .hero-panel .lede{font-size:.8rem;line-height:1.45;margin:9px 0 13px}
  .hero-panel .badge{font-size:.7rem;padding:6px 12px;margin-bottom:10px}
  .panel-cta .btn-pill{padding:9px 15px;font-size:.78rem}
  .panel-cta .clock{font-size:.72rem}
  .hero-ps{font-size:.72rem;margin-top:9px}
  /* scrim fort en bas (où est le texte) + léger en haut (où est l'étiquette) */
  .hero::before{background:
    linear-gradient(0deg,rgba(8,7,6,.86) 0%,rgba(8,7,6,.42) 30%,rgba(8,7,6,0) 55%),
    linear-gradient(180deg,rgba(8,7,6,.55) 0%,rgba(8,7,6,0) 18%)}
  .slide[data-tag]::before{bottom:auto;top:68px}        /* étiquette en haut */
  .hero .indicator{top:64px;bottom:auto;right:16px}     /* indicateur hero en haut-droite (scopé hero pour ne pas toucher la modale) */
  .shelter-inner{flex-direction:column;text-align:center}
}

/* Reduced-motion : on coupe transitions/animations décoratives et on rend les
   blocs "reveal" visibles d'emblée. NB : le diaporama, lui, continue d'avancer
   (piloté en JS par setTimeout) et la barre de chargement reste visible (width
   écrite directement, non soumise à ces règles) — cf. commentaires de script.js. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}