/* ============================================================
   Atout Travaux — Design system
   Chauffage · Ramonage · Plomberie — La Ciotat / La Verdière
   ============================================================ */

/* Geist self-hosted (assets/fonts/) rather than pulled from
   fonts.googleapis.com : une dépendance externe de moins, qui peut être
   bloquée par un réseau ou une extension. Police variable : un seul fichier
   couvre toute la plage de graisses via `font-weight: 100 900`.
   Une seule famille sur tout le site — pas de police secondaire. */
@font-face{
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
}

:root{
  /* Canvas & surfaces — warm bone, never pure white/gray */
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --surface-alt: #F3EFE8;
  --border: #E7E1D6;
  --border-soft: rgba(28,24,21,0.08);

  /* Ink */
  --ink: #1C1815;
  --ink-soft: #7A736A;
  --ink-faint: #A69E92;

  /* Rouge signature historique — couleur exacte du logo Atout Travaux (rgba(128, 25, 19) / #801913) */
  --ember: #9B2018;
  --ember-deep: #70140F;
  --ember-pale: #FCEBEA;
  --ember-pale-ink: #801913;

  /* Vert de validation — seul etat "ok" du systeme, il meritait son token */
  --ok: #2F6B3C;
  --ok-pale: #E4EFE6;

  /* Dark surface for contrast sections */
  --dark: #17130F;
  --dark-2: #241D17;
  --on-dark: #F3EEE6;
  --on-dark-soft: #B8AEA0;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-hover: 0 2px 10px rgba(28,24,21,0.05);

  --grad-ember: linear-gradient(135deg, #801913 0%, #B8281E 55%, #D9463A 100%);
  --grad-ember-soft: linear-gradient(135deg, rgba(128,25,19,0.14), rgba(184,40,30,0.06));
  --grad-dark: linear-gradient(160deg, #201A15 0%, #171412 60%);

  --font-sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;

  --max: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4{ margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
p{ margin: 0; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.eyebrow{
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content: '';
  width: 16px; height: 2px;
  background: var(--ember);
  display: inline-block;
  border-radius: 1px;
}

.text-gradient{
  background: var(--grad-ember);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Reveal-on-scroll ----------
   Content is visible by default. Only hidden pre-reveal once main.js has
   actually started running (it adds html.js as its first line) — so a
   blocked, 404'd or throwing script never leaves the page blank. */
html.js .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
/* Same "html.js" prefix as the rule above, on purpose: without it, this rule
   has LOWER specificity than ".reveal" above (which includes the "html"
   element) and never wins, so .is-visible would never actually show anything. */
html.js .reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--grad-dark); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.btn-primary:hover{ background: linear-gradient(160deg, #2A231C, #201A15); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--ink-faint); }
.btn-on-dark{ background: var(--on-dark); color: var(--dark); }
.btn-on-dark:hover{ background: #fff; }
.btn-line-dark{ background: transparent; color: var(--on-dark); border-color: rgba(243,238,230,0.28); }
.btn-line-dark:hover{ border-color: rgba(243,238,230,0.6); }

/* ============================================================
   Header
   ============================================================ */
/* Barre flottante : pleine largeur en haut de page, elle se contracte en une
   pilule translucide centrée dès qu'on scrolle. */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background: rgba(251,250,247,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 20px rgba(23,19,15,0.06);
}
.site-header .wrap{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 68px;
  max-width: var(--max);
  padding: 0 24px;
}
/* Header posé sur le hero sombre (accueil) : tant qu'on n'a pas scrollé, tout
   passe en clair pour rester lisible sur la photo. Dès que .scrolled arrive,
   la barre redevient claire et le texte reprend sa couleur normale. */
.header-over-hero:not(.scrolled) .logo{ color: #fff; }
.header-over-hero:not(.scrolled) .logo-mark{
  border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.1); color: #E7906A;
}
/* Enfants directs uniquement : les liens du menu deroulant sont poses sur un
   panneau blanc, ils ne doivent surtout pas passer en blanc eux aussi. */
.header-over-hero:not(.scrolled) .nav-desktop > a,
.header-over-hero:not(.scrolled) .nav-item-trigger,
.header-over-hero:not(.scrolled) .tel-link{ color: rgba(255,255,255,0.82); }
.header-over-hero:not(.scrolled) .nav-desktop > a:hover,
.header-over-hero:not(.scrolled) .nav-item-trigger:hover{ color: #fff; }
/* Filet de securite explicite pour le contenu du menu deroulant. */
.header-over-hero:not(.scrolled) .nav-dropdown a{ color: var(--ink); }
.header-over-hero:not(.scrolled) .nav-dropdown a:hover{ color: var(--ink); background: var(--surface-alt); }
.header-over-hero:not(.scrolled) .btn-primary{ background: #fff; color: var(--dark); box-shadow: none; }
.header-over-hero:not(.scrolled) .btn-primary:hover{ background: rgba(255,255,255,0.88); }
.header-over-hero:not(.scrolled) .icon-btn,
.header-over-hero:not(.scrolled) .burger{
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.26); color: #fff;
}
/* Menu mobile ouvert : le panneau est clair, le burger doit redevenir sombre. */
body.nav-locked .header-over-hero .burger{
  background: var(--surface); border-color: var(--border); color: var(--ink);
}
/* Le mode clair depend de .scrolled, ajoute par main.js. Si le script ne
   tourne pas, .scrolled n'arrive jamais et le texte blanc se retrouverait sur
   du contenu clair au scroll : sans html.js, on garde donc une barre opaque. */
html:not(.js) .header-over-hero{
  background: rgba(251,250,247,0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
html:not(.js) .header-over-hero .logo{ color: var(--ink); }
html:not(.js) .header-over-hero .nav-desktop > a,
html:not(.js) .header-over-hero .nav-item-trigger,
html:not(.js) .header-over-hero .tel-link{ color: var(--ink-soft); }
html:not(.js) .header-over-hero .logo-mark{
  border-color: var(--border); background: var(--surface-alt); color: var(--ember-deep);
}
html:not(.js) .header-over-hero .btn-primary{ background: var(--grad-dark); color: #fff; }
html:not(.js) .header-over-hero .icon-btn,
html:not(.js) .header-over-hero .burger{
  background: var(--surface); border-color: var(--border); color: var(--ink);
}

/* flex-shrink:0 + nowrap : sans ca, la barre du haut bien remplie (nav +
   telephone + CTA + icones) comprime le logo jusqu'a le passer sur deux
   lignes. */
.logo{ display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.logo-mark{
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(155,32,24,0.35);
  background: #7A1811;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(155,32,24,0.12);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.logo-mark img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (hover: hover){
  .logo:hover .logo-mark{ transform: scale(1.05); box-shadow: 0 4px 14px rgba(155,32,24,0.22); }
}
.footer-brand .logo-mark{ border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); box-shadow: none; }
.nav-desktop{ display: none; align-items: center; gap: 28px; }
.nav-desktop a{ font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); transition: color .2s ease; white-space: nowrap; }
.nav-desktop a:hover{ color: var(--ink); }
.nav-account-link{ padding-left: 20px; margin-left: -8px; margin-right: 4px; border-left: 1px solid var(--border); }

/* Raccourci discret vers l'admin, dans la barre du haut. Volontairement en
   dehors de .icon-btn : ces derniers sont masques au-dela de 1080px, or la
   cliente travaille surtout sur grand ecran. Discret mais present partout. */
.header-admin-link{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 32px; border-radius: var(--radius-sm);
  color: var(--ink-faint); flex: 0 0 32px;
  transition: color .2s ease, background .2s ease;
}
.header-admin-link:hover{ color: var(--ember); background: var(--surface-alt); }
.header-over-hero:not(.scrolled) .header-admin-link{ color: rgba(255,255,255,0.55); }
.header-over-hero:not(.scrolled) .header-admin-link:hover{ color: #fff; background: rgba(255,255,255,0.14); }

/* Zone de survol sur toute la hauteur de la barre : sinon elle ne fait que la
   hauteur du texte et la souris "sort" du menu en descendant vers le panneau.
   cursor/user-select evitent le curseur texte sur cette zone. */
.nav-item{
  position: relative;
  align-self: stretch;
  display: flex; align-items: center;
  cursor: pointer;
  user-select: none;
}
.nav-item-trigger{
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; font-family: inherit;
  font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  padding: 0; transition: color .2s ease;
}
.nav-item-trigger:hover{ color: var(--ink); }
.nav-item-trigger svg{ width: 12px; height: 12px; transition: transform .2s ease; }
.nav-item.open .nav-item-trigger svg, .nav-item:hover .nav-item-trigger svg{ transform: rotate(180deg); }
.nav-dropdown{
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px);
  margin-top: 8px;
  min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(23,19,15,0.1);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Pont invisible qui couvre les 8px restants : la souris peut descendre du
   bouton vers le panneau sans jamais quitter la zone de survol. */
.nav-dropdown::before{
  content: '';
  position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown,
.nav-item:focus-within .nav-dropdown{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-dropdown a{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--ink);
  white-space: nowrap; transition: background .15s ease;
}
.nav-dropdown a:hover{ background: var(--surface-alt); color: var(--ink); }
.nav-dropdown a svg{ width: 16px; height: 16px; color: var(--ember); flex-shrink: 0; }
.header-actions{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tel-link{ font-family: var(--font-sans); font-size: 0.86rem; font-weight: 700; display: none; white-space: nowrap; color: var(--ink); }
.tel-link:hover{ color: var(--ember); }
.header-actions .btn-primary{ display: none; }
.icon-btn, .burger{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  flex-shrink: 0; transition: border-color .2s ease, background .2s ease;
  color: var(--ink);
}
.icon-btn:hover, .burger:hover{ border-color: var(--ink-faint); background: var(--surface-alt); }
.icon-btn svg{ width: 17px; height: 17px; }
.burger svg{ width: 20px; height: 20px; }
.burger svg path{ stroke-width: 2.2px; }
.burger .icon-close{ display: none; }
.burger.is-open .icon-menu{ display: none; }
.burger.is-open .icon-close{ display: block; }

body.nav-locked{ overflow: hidden; }

.mobile-nav{
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 100px 24px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.mobile-nav.open{ transform: translateY(0); }
.mobile-nav > a{ font-size: 1.6rem; font-weight: 700; padding: 14px 0; border-bottom: 1px solid var(--border); letter-spacing: -0.02em; }
.mobile-nav .btn{ margin-top: 28px; width: 100%; }

.mobile-nav-group{ border-bottom: 1px solid var(--border); }
.mobile-nav-toggle{
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; font-family: inherit; text-align: left;
  font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
  padding: 14px 0; cursor: pointer;
}
.mobile-nav-toggle svg{ width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; color: var(--ink-soft); }
.mobile-nav-group.open .mobile-nav-toggle svg{ transform: rotate(180deg); }

.mobile-nav-submenu{
  display: none;
}
.mobile-nav-group.open .mobile-nav-submenu{
  display: block;
}
.mobile-nav-submenu-inner{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0 20px;
}
.mobile-nav-submenu a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
.mobile-nav-submenu a:active{
  background: var(--surface-alt);
  transform: translateX(4px);
  border-color: rgba(155,32,24,0.3);
}
.mobile-nav-submenu a::after{
  content: '→';
  font-family: inherit;
  font-size: 1rem;
  color: var(--ember);
  transition: transform .2s ease;
}
.mobile-nav-submenu a:hover::after{
  transform: translateX(3px);
}

/* ---------- Mobile floating action bar (compacte & discrète) ---------- */

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position: relative;
  padding: 168px 0 48px;
  overflow: hidden;
}
.hero-ambient{
  position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden;
}
.hero-ambient::before, .hero-ambient::after{
  content: ''; position: absolute; border-radius: 50%;
  will-change: transform;
}
.hero-ambient::before{
  top: -18%; right: -8%; width: 56vw; height: 56vw; max-width: 860px; max-height: 860px;
  background: radial-gradient(circle, rgba(184,74,30,0.13) 0%, rgba(184,74,30,0) 68%);
  animation: driftA 26s ease-in-out infinite;
}
.hero-ambient::after{
  top: 8%; left: -12%; width: 40vw; height: 40vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(231,144,106,0.10) 0%, rgba(231,144,106,0) 70%);
  animation: driftB 32s ease-in-out infinite;
}
@keyframes driftA{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-3%, 4%) scale(1.06); }
}
@keyframes driftB{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(4%, -3%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .hero-ambient::before, .hero-ambient::after{ animation: none; }
}
/* Hero centré : accroche + CTA d'abord, la photo vient ensuite dans un cadre
   comme une preuve, plutôt qu'en fond plein écran (trop souvent illisible
   selon la photo disponible — voir les bugs précédents). */
.hero-inner{ position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto; }

.hero-badge{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 5px 5px 5px 16px; margin-bottom: 30px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; font-size: 0.85rem; color: var(--ink);
  box-shadow: 0 2px 10px rgba(23,19,15,0.04);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.hero-badge:hover{ border-color: var(--ink-faint); box-shadow: 0 4px 16px rgba(23,19,15,0.08); }
.hero-badge .sep{ width: 1px; height: 16px; background: var(--border); }
.hero-badge .arrow{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.hero-badge .arrow svg{ width: 12px; height: 12px; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.hero-badge:hover .arrow svg{ transform: translateX(2px); }

.hero h1{
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 auto 24px;
  max-width: 16ch;
  text-wrap: balance;
}
.hero h1 em{ font-style: normal; color: var(--ember); }
.hero-sub{
  font-size: 1.08rem; color: var(--ink-soft); max-width: 52ch; margin: 0 auto 34px;
  text-wrap: balance;
}
.hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
/* Cadre discret autour du CTA principal, comme une touche de relief. */
.hero-actions .btn-frame{
  background: rgba(28,24,21,0.06);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 3px;
}
.hero-actions .btn-frame .btn{ border-radius: 11px; padding: 14px 26px; font-size: 0.95rem; }
.hero-trust{
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
  font-size: 0.82rem; color: var(--ink-soft);
}
.hero-trust strong{ color: var(--ink); font-weight: 600; }
.hero-trust .dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }

/* Ramoneur 3D flottant, entre le badge "depuis 1984" et le grand titre —
   pas de carte/cadre : il flotte directement sur le fond du hero, comme un
   mascotte anime plutot qu'une photo encadree. Sol/ombre porte par le
   degrade radial en dessous plutot qu'une vraie carte. */
.hero-mascot{
  position: relative;
  width: 100%;
  max-width: 1140px;
  height: 320px;
  margin: 10px auto 26px;
}
.hero-mascot::after{
  /* ombre au sol : ancre l'ensemble des 4 ouvriers */
  content: '';
  position: absolute; left: 50%; bottom: 2%; width: 95%; height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(23,19,15,0.2) 0%, rgba(23,19,15,0) 75%);
  z-index: 0;
}
.hero-poster{
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  border-radius: 16px;
}
.frame-3d-ready .hero-poster{ opacity: 0; }
.hero-3d{
  position: absolute; inset: 0; z-index: 2;
  opacity: 0; transition: opacity .5s ease;
  cursor: grab;
}
.hero-3d.is-ready{ opacity: 1; }
.hero-3d:active{ cursor: grabbing; }
@media (max-width: 640px){
  .hero-mascot{ height: 210px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
  .hero-badge{ display: none; }
}
@media (min-width: 641px){
  .hero-mascot{ height: 320px; max-width: 960px; }
}
@media (min-width: 1024px){
  .hero-mascot{ height: 360px; max-width: 1140px; }
}

/* Entrée en cascade : léger flou + montée, décalé par élément (--i). */
html.js .hero-anim{
  opacity: 0; transform: translateY(16px); filter: blur(10px);
  animation: heroIn .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes heroIn{
  to{ opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce){
  html.js .hero-anim{ animation: none; opacity: 1; transform: none; filter: none; }
}

/* ---------- Bandeau certifications ---------- */
.trust-band{ background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 32px 0; }
.trust-band-inner{ display: flex; align-items: center; justify-content: center; gap: 24px 36px; flex-wrap: wrap; }
.trust-band-label{
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 600;
  text-transform: uppercase; color: var(--ink-soft); margin-right: 12px;
}
.trust-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.trust-item:hover{
  transform: translateY(-2px);
  border-color: rgba(155,32,24,0.3);
  box-shadow: 0 6px 16px rgba(155,32,24,0.06);
}
.trust-band img{ height: 42px; width: auto; object-fit: contain; filter: contrast(1.05); }

@media (max-width: 680px){
  .trust-band{ padding: 20px 0; }
  .trust-band-inner{ gap: 10px; }
  .trust-band-label{ width: 100%; text-align: center; margin-right: 0; margin-bottom: 4px; font-size: 0.68rem; }
  .trust-item{ padding: 7px 12px; border-radius: 10px; }
  .trust-band img{ height: 28px; }
}

/* ============================================================
   Section shells
   ============================================================ */
section{ padding: 88px 0; }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.section-head p{ color: var(--ink-soft); margin-top: 14px; font-size: 1.02rem; }
.alt{ background: var(--surface-alt); }

/* ============================================================
   Services — Liquid Glass Cards
   ============================================================ */
.services-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 1024px) {
  .services-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .services-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.service-card{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 
    0 4px 20px -2px rgba(28, 24, 21, 0.05),
    0 12px 36px -4px rgba(28, 24, 21, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(28, 24, 21, 0.04);
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease;
  overflow: hidden;
}

/* Lueur et reflet liquide au survol */
.service-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  background: radial-gradient(800px circle at top left, rgba(255, 255, 255, 0.8), transparent 45%),
              linear-gradient(135deg, rgba(155, 32, 24, 0.04) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity .4s ease;
}

.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(155, 32, 24, 0.25);
  box-shadow: 
    0 12px 32px -4px rgba(155, 32, 24, 0.09),
    0 24px 56px -8px rgba(28, 24, 21, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(155, 32, 24, 0.1);
}

.service-card:hover::before{
  opacity: 1;
}

/* En-tête de carte : numéro minimaliste + badge technique */
.service-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

/* Vignette 3D interactive compacte dans chaque case service */
.service-thumb-3d{
  position: relative;
  width: 100%;
  height: 140px;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, rgba(240, 237, 233, 0.7) 90%);
  border: 1px solid rgba(28, 24, 21, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 16px rgba(28, 24, 21, 0.04);
  z-index: 1;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover .service-thumb-3d{
  transform: translateY(-2px);
  border-color: rgba(155, 32, 24, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 24px rgba(155, 32, 24, 0.08);
}
.service-thumb-3d three-d-stage{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  cursor: grab;
}

.service-num{
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ember);
  background: rgba(155, 32, 24, 0.08);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(155, 32, 24, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.service-badge{
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: rgba(28, 24, 21, 0.04);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(28, 24, 21, 0.08);
}

.service-card h3{
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--ink);
  position: relative;
  z-index: 1;
}

.service-card p{
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.62;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.service-kpi{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(28, 24, 21, 0.06);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}

.service-kpi .kpi-num{
  font-family: var(--font-sans);
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--ember);
  white-space: nowrap;
  flex-shrink: 0;
}

.service-kpi .kpi-label{
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.3;
}

.service-card-foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(28, 24, 21, 0.06);
  position: relative;
  z-index: 1;
}

.service-cta{
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--ember);
  border: 1px solid var(--ember-deep);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(155, 32, 24, 0.25);
  transition: transform .18s ease, background .2s ease, box-shadow .2s ease;
}

.service-cta:hover{
  background: var(--ember-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(155, 32, 24, 0.35);
  color: #fff;
}

.service-link{
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s ease;
}

.service-link svg{
  width: 13px; height: 13px;
  color: var(--ember);
  transition: transform .2s ease;
}

.service-card:hover .service-link{
  color: var(--ember);
}

.service-card:hover .service-link svg{
  transform: translateX(4px);
}

/* ============================================================
   Page hero (service sub-pages) — reuses .story-grid layout
   ============================================================ */
.breadcrumb{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-soft);
  margin-bottom: 22px;
}
.breadcrumb a:hover{ color: var(--ink); }
.breadcrumb .sep{ opacity: 0.5; }
.breadcrumb .current{ color: var(--ink-soft); }

.page-hero{ padding: 148px 0 72px; }
.page-hero .story-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
  gap: 56px;
}
.page-hero .story{
  padding-top: 0;
}
.page-hero .story-media{
  margin-left: auto;
  margin-right: 0;
  width: 100%;
}
.page-hero h1{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 18px; }
/* .hero-sub est centre (margin:0 auto) pour le hero de l'accueil, qui est
   centre. Dans un page-hero aligne a gauche, ce auto decale le paragraphe
   par rapport au titre : on le recale a gauche. */
.page-hero .hero-sub{ margin: 0 0 30px; }

/* ---------- Pages légales ---------- */
.legal-page{ padding-bottom: 0; }
.legal-body{ padding-top: 8px; }
.legal-body .wrap{ max-width: 760px; }
.legal-body h2{ font-size: 1.15rem; margin: 40px 0 14px; }
.legal-body h2:first-child{ margin-top: 0; }
.legal-body p{ color: var(--ink-soft); margin-bottom: 14px; line-height: 1.7; }
.legal-body a{ color: var(--ember-deep); text-decoration: underline; }
.legal-intro{ font-size: 1.05rem; }
.legal-list{ list-style: disc; padding-left: 20px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.7; }
/* ============ Blog : magazine d'artisan & guides terrain ============ */
.blog-page{ padding-bottom: 40px; }
.blog-hero{
  padding: 136px 0 44px;
  position: relative;
}
.blog-hero .breadcrumb{ margin-bottom: 16px; }
.blog-hero-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.blog-badge-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-badge-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 2px var(--ember-pale);
}
.blog-hero h1{
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  line-height: 1.15;
}
.blog-hero-lead{
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 65ch;
  line-height: 1.65;
  margin-bottom: 32px;
}

/* Barre d'outils (recherche & filtres) */
.blog-toolbar{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(28, 24, 21, 0.03);
}
.blog-search-box{
  position: relative;
  width: 100%;
}
.blog-search-box svg{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
}
.blog-search-input{
  width: 100%;
  padding: 12px 40px 12px 42px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.blog-search-input:focus{
  outline: none;
  background: #fff;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(155, 32, 24, 0.12);
}
.blog-search-clear{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--ink-faint);
  display: none;
  cursor: pointer;
  border-radius: 50%;
  transition: color .15s ease;
}
.blog-search-clear:hover{ color: var(--ink); }
.blog-search-clear.show{ display: flex; align-items: center; justify-content: center; }

.blog-filters{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.blog-filters::-webkit-scrollbar{ display: none; }
.blog-filter-btn{
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink-soft);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-filter-btn:hover{
  background: var(--surface-alt);
  color: var(--ink);
  border-color: var(--ink-faint);
}
.blog-filter-btn.active{
  background: var(--ember);
  color: #fff;
  border-color: var(--ember-deep);
  box-shadow: 0 2px 8px rgba(155, 32, 24, 0.22);
}
.blog-filter-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(28, 24, 21, 0.08);
  color: inherit;
}
.blog-filter-btn.active .blog-filter-count{
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Article À la Une (Featured Spotlight) */
.blog-featured{
  margin-bottom: 48px;
}
.blog-featured-card{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(28, 24, 21, 0.04);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.blog-featured-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(28, 24, 21, 0.09);
  border-color: rgba(155, 32, 24, 0.35);
}
.blog-featured-media{
  position: relative;
  min-height: 330px;
  background: var(--surface-alt);
  overflow: hidden;
}
.blog-featured-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.blog-featured-card:hover .blog-featured-img{
  transform: scale(1.04);
}
.blog-featured-badge{
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(28, 24, 21, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-featured-badge svg{ width: 12px; height: 12px; color: #FFB347; }
.blog-featured-cat-tag{
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  color: var(--ember-deep);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.blog-featured-content{
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-featured-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.blog-featured-meta span{ display: inline-flex; align-items: center; gap: 5px; }
.blog-featured-meta svg{ width: 13px; height: 13px; color: var(--ink-faint); }
.blog-featured-title{
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 14px;
  transition: color .2s ease;
}
.blog-featured-card:hover .blog-featured-title{
  color: var(--ember);
}
.blog-featured-excerpt{
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 24px;
}
.blog-featured-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(28, 24, 21, 0.08);
}
.blog-author-info{
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-author-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ember-pale);
  color: var(--ember-deep);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(28, 24, 21, 0.1);
  overflow: hidden;
}
.blog-author-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.blog-author-name{
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.blog-author-title{
  font-size: 0.74rem;
  color: var(--ink-faint);
}
.blog-cta-arrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ember);
  transition: transform .18s ease;
}
.blog-featured-card:hover .blog-cta-arrow svg{
  transform: translateX(4px);
}
.blog-cta-arrow svg{ transition: transform .2s ease; }

/* En-tête de section */
.blog-section-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.blog-section-title{
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}
.blog-results-counter{
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Grille principale d'articles */
.blog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}
.blog-card{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(28, 24, 21, 0.03);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
}
.blog-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 24, 21, 0.08);
  border-color: rgba(155, 32, 24, 0.35);
}
.blog-card-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--surface-alt);
  overflow: hidden;
}
.blog-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card-img{
  transform: scale(1.05);
}
.blog-card-cat{
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  color: var(--ember-deep);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.blog-card-readtime{
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(28, 24, 21, 0.75);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.blog-card-body{
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-card-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.blog-card-meta svg{ width: 12px; height: 12px; }
.blog-card-title, .blog-card h3{
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  transition: color .18s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card:hover .blog-card-title,
.blog-card:hover h3{
  color: var(--ember);
}
.blog-card-desc, .blog-card p{
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}
.blog-card-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(28, 24, 21, 0.06);
  font-size: 0.82rem;
  margin-top: auto;
}
.blog-card-author-name{
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.blog-card-action{
  font-weight: 700;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  transition: transform .18s ease;
}
.blog-card:hover .blog-card-action svg{
  transform: translateX(4px);
}
.blog-card-action svg{ transition: transform .18s ease; }

/* État vide quand aucun article ne correspond */
.blog-empty{
  display: none;
  text-align: center;
  padding: 60px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 48px;
}
.blog-empty.show{ display: block; }
.blog-empty-icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.blog-empty h3{ font-size: 1.15rem; color: var(--ink); margin-bottom: 6px; }
.blog-empty p{ font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 18px; }

/* Bannière conseil de saison & appel à l'action */
.blog-seasonal-banner{
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  margin: 32px 0 54px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(243, 238, 230, 0.08);
}
.blog-seasonal-banner::before{
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, rgba(155, 32, 24, 0.22) 0%, rgba(155, 32, 24, 0) 70%);
  pointer-events: none;
}
.blog-seasonal-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: center;
}
.blog-seasonal-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FF7E74;
  margin-bottom: 12px;
}
.blog-seasonal-grid h2{
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.25;
}
.blog-seasonal-grid p{
  font-size: 0.92rem;
  color: var(--on-dark-soft);
  line-height: 1.6;
}
.blog-seasonal-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.blog-seasonal-actions .btn{ width: 100%; justify-content: center; }
.blog-seasonal-actions .btn-primary{
  background: var(--ember);
  border: 1px solid var(--ember-deep);
  color: #fff;
  box-shadow: 0 4px 14px rgba(155, 32, 24, 0.35);
}
.blog-seasonal-actions .btn-primary:hover{
  background: var(--ember-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(155, 32, 24, 0.5);
}
.blog-seasonal-tel{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  background: rgba(243, 238, 230, 0.08);
  border: 1px solid rgba(243, 238, 230, 0.18);
  border-radius: 999px;
  color: var(--on-dark);
  font-size: 0.88rem;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease;
}
.blog-seasonal-tel:hover{
  background: rgba(243, 238, 230, 0.16);
  border-color: rgba(243, 238, 230, 0.35);
  color: #fff;
}

/* Styles des articles individuels (conservés et affinés) */
.article-meta{ font-size: .85rem; color: var(--ink-faint); margin-top: 10px; }
.article-body h2{ margin-top: 38px; }
.article-body h3{ font-size: 1rem; margin: 26px 0 10px; color: var(--ink); }
.article-body ul{ list-style: disc; padding-left: 20px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.7; }
.article-body li{ margin-bottom: 6px; }
.article-cta{ margin-top: 44px; padding: 26px; background: var(--surface-alt); border-radius: var(--radius-lg); }
.article-cta h2{ margin-top: 0; }
.article-cta .hero-actions{ margin-top: 18px; }
.blog-more{ padding: 10px 0 60px; }
.blog-more .wrap{ max-width: var(--max); }
.blog-more h2{ font-size: 1.35rem; margin: 0 0 22px; font-weight: 700; }

@media (max-width: 900px){
  .blog-featured-card{ grid-template-columns: 1fr; }
  /* max-width d'abord : sans lui, min-height x le ratio impose une largeur
     de 427 px et le bloc sort de l'ecran sur tout telephone. */
  .blog-featured-media{ min-height: 0; aspect-ratio: 16/9; max-width: 100%; }
  .blog-featured-content{ padding: 28px 24px; }
  .blog-seasonal-grid{ grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px){
  .blog-hero{ padding: 110px 0 32px; }
  .blog-toolbar{ padding: 16px; }
  .blog-grid{ grid-template-columns: 1fr; gap: 18px; }
  .blog-seasonal-banner{ padding: 32px 20px; }
}

.legal-updated{ margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .85rem; color: var(--ink-faint); }
.legal-dl{ display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 0 20px; }
.legal-dl dt{ background: var(--surface-alt); padding: 12px 16px; font-size: 0.86rem; font-weight: 600; }
.legal-dl dd{ background: var(--surface); padding: 12px 16px; margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
/* Le hero et le corps de la page compte doivent partager la meme largeur,
   sinon le titre et le contenu n'ont pas le meme bord gauche (effet
   "textes decales"). */
.account-body .wrap,
.account-page-hero .wrap{ max-width: 880px; }
/* Les cartes etaient bridees a 640px et centrees DANS ce wrap de 880px : leur
   bord gauche tombait 120px plus a droite que le titre du hero et que le bloc
   de connexion, ce qui donnait trois bords gauches differents sur la meme
   page. Elles suivent maintenant la largeur du wrap, comme tout le reste. */

/* Le hero de la page compte laissait 190 px de vide avant le formulaire :
   72 px de bas de hero, 30 px sous le sous-titre et 88 px de section. Sur une
   page dont le seul geste est de saisir une adresse email, ce vide donne
   l'impression que la page est terminee et qu'il n'y a rien en dessous. */
.account-page-hero{ padding-bottom: 28px; }
.account-page-hero .hero-sub{ margin-bottom: 0; }
.account-body{ padding-top: 36px; }

.account-split{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 20px;
}
.account-split-benefits{
  background: var(--ink); color: #fff; padding: 44px 38px; display: flex; flex-direction: column; justify-content: center;
}
.account-split-eyebrow{
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.55); margin: 0 0 10px;
}
.account-split-benefits h2{ color: #fff; font-size: 1.5rem; margin: 0 0 22px; line-height: 1.25; }
.account-benefits-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.account-benefits-list li{ display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; color: rgba(255,255,255,0.85); line-height: 1.5; }
.account-benefit-icon{
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.account-benefit-icon svg{ width: 17px; height: 17px; color: #fff; }
.account-split-form{ padding: 44px 38px; }
.account-split-form h2{ margin-top: 0; }
.account-split-form p{ margin-bottom: 22px; }
.account-split-form .field{ margin-bottom: 18px; }
/* PIEGE : .field est pense pour le formulaire de contact sur fond sombre
   (texte clair sur fond quasi transparent). Toute la page compte est claire :
   sans cette inversion, on tape du texte clair sur du blanc et la saisie est
   invisible. La correction etait limitee a .account-split-form, donc elle ne
   couvrait pas les champs poses dans une .account-card (consentement,
   nouveau lien...). On la porte sur tout .account-body, une bonne fois. */
.account-body .field label{ color: var(--ink-soft); }
.account-body .field input,
.account-body .field select,
.account-body .field textarea{
  background: var(--bg); border-color: var(--border); color: var(--ink);
}
.account-body .field input::placeholder,
.account-body .field textarea::placeholder{ color: var(--ink-faint); }
.account-body .field input:focus,
.account-body .field select:focus,
.account-body .field textarea:focus{ border-color: var(--ember); background: var(--surface); }
@media (max-width: 760px){
  .account-split{ grid-template-columns: 1fr; }
  .account-split-benefits{ padding: 32px 26px; }
  .account-split-form{ padding: 32px 26px; }
}

.account-banner{
  background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.account-banner-eyebrow{ text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.55); margin: 0; }
.account-banner h2{ color: #fff; font-size: 1.6rem; margin: 4px 0 0; }
.account-banner-email{ color: rgba(255,255,255,0.65); font-size: 0.88rem; margin: 4px 0 0; }
.account-banner-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.account-banner-logout{ background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.account-banner-logout:hover{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }

.account-hint{ font-size: 0.86rem; color: var(--ink-soft); margin: -8px 0 14px; }
.account-section-title{ display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 14px; }
.account-section-title svg{ width: 19px; height: 19px; color: var(--ember); flex-shrink: 0; }

.account-services{ margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.account-services-sub{ color: var(--ink-soft); font-size: 0.9rem; margin: -6px 0 18px; }
.account-services-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.account-service-card{
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  text-decoration: none; aspect-ratio: 4/3; background: var(--surface-alt);
}
.account-service-card img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.account-service-card::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,19,15,0.82) 0%, rgba(23,19,15,0.15) 55%, rgba(23,19,15,0) 100%);
}
.account-service-card span{
  position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1;
  color: #fff; font-weight: 600; font-size: 0.88rem; line-height: 1.25;
}
.account-service-card:hover img{ transform: scale(1.06); }
@media (max-width: 760px){
  .account-services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.account-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 30px; margin-bottom: 20px;
}
.account-card .field{ margin-bottom: 18px; }
.account-card-icon{
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ember-pale); color: var(--ember-deep); margin-bottom: 16px;
}
.account-card-icon-ok{ background: var(--ok-pale); color: var(--ok); }
.account-card-header{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
#accountStats{ margin-bottom: 20px; }
.devis-next-step{
  font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 7px;
}
.devis-next-step svg{ width: 15px; height: 15px; flex-shrink: 0; color: var(--ember); }

/* ---------- Espace client : connexion et tableau de bord ----------
   Tout ce bloc vit sur fond clair (--bg / --surface). Aucune couleur en dur :
   uniquement les jetons du systeme. */

/* a{color:inherit;text-decoration:none} par defaut : sans ca, le numero glisse
   dans le chapeau du hero sans qu'on voie qu'il est cliquable. */
.account-page-hero .hero-sub{ max-width: 62ch; }
.account-page-hero .hero-sub a{ color: var(--ember-deep); font-weight: 700; }
.account-page-hero .hero-sub a:hover{ text-decoration: underline; }

/* Phrase d'explication du lien magique : les gens se mefient du "sans mot de
   passe", il faut leur dire noir sur blanc ce qui va se passer. */
.account-explain{
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface-alt); border-radius: var(--radius-sm);
  padding: 13px 15px; margin: 0 0 22px;
  font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft);
}
.account-explain svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--ember); }

/* Message d'erreur colle au champ, annonce par aria-describedby. */
.account-field-error{
  display: block; font-size: 0.8rem; color: var(--ember-deep);
  margin: 7px 0 0; line-height: 1.5;
}
.account-body .field input.is-invalid{ border-color: var(--ember); background: var(--ember-pale); }

/* Une zone distincte par issue (envoi, lien perime, quota, reseau, serveur) :
   jamais un "erreur" fourre-tout qui n'aide personne. */
.account-alert{
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 16px;
  font-size: 0.87rem; line-height: 1.6;
}
.account-alert:last-child{ margin-bottom: 0; }
.account-alert svg{ width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.account-alert strong{ display: block; margin-bottom: 3px; }
.account-alert-warn{ background: var(--surface-alt); color: var(--ink-soft); }
.account-alert-warn svg, .account-alert-warn strong{ color: var(--ink); }
.account-alert-error{ background: var(--ember-pale); color: var(--ember-deep); }
.account-alert-error svg, .account-alert-error strong{ color: var(--ember-deep); }
.account-alert-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

/* Etat de chargement du bouton : le disque tourne, le libelle change, la
   largeur ne bouge pas. */
.btn .btn-spinner{
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: accSpin .7s linear infinite;
}
.btn.is-loading{ opacity: 0.85; cursor: progress; }
.account-body .btn:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; }
@keyframes accSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn .btn-spinner, .account-verify-spinner{ animation-duration: 2.4s; }
}

/* Retour du lien magique : un ecran qui dit clairement ce qui se passe. */
.account-verify{ text-align: center; padding: 46px 30px; }
.account-verify-spinner{
  width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 20px;
  border: 3px solid var(--border); border-top-color: var(--ember);
  animation: accSpin .8s linear infinite;
}
.account-verify h2{ margin: 0 0 8px; font-size: 1.2rem; }
.account-verify p{ color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

/* Marche a suivre apres l'envoi du lien : boite de reception PUIS spams. */
.account-steps{ list-style: none; padding: 0; margin: 0 0 20px; counter-reset: accstep; }
.account-steps li{
  position: relative; padding: 0 0 0 36px; margin-bottom: 12px;
  font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft);
}
.account-steps li::before{
  counter-increment: accstep; content: counter(accstep);
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ember-pale); color: var(--ember-deep);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.account-steps li strong{ color: var(--ink); }

/* Le telephone n'est jamais loin : c'est la sortie de secours de toutes les
   impasses de cet ecran. */
.account-help{
  border-top: 1px solid var(--border); margin-top: 22px; padding-top: 20px;
}
.account-help h3{ font-size: 0.95rem; margin: 0 0 7px; }
.account-help p{ font-size: 0.87rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; }
.account-tel{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--ember-deep); text-decoration: none; font-size: 1.02rem;
}
.account-tel svg{ width: 16px; height: 16px; }
.account-tel:hover{ text-decoration: underline; }
.account-actions-row{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Consentement email : etat lisible + interrupteur, au meme endroit. */
.account-consent-row{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.account-consent-text{ flex: 1 1 320px; }
.account-consent-text p{ font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.account-consent-state{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.87rem; font-weight: 600; color: var(--ink); margin: 0 0 7px;
}
.account-consent-state svg{ width: 16px; height: 16px; color: var(--ember); }
.account-switch{ display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 0.86rem; color: var(--ink-soft); }
.account-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.account-switch-track{
  width: 46px; height: 26px; border-radius: 999px; background: var(--border);
  position: relative; flex-shrink: 0; transition: background .18s ease;
}
.account-switch-track::after{
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 3px rgba(28,24,21,0.25); transition: transform .18s ease;
}
.account-switch input:checked + .account-switch-track{ background: var(--ember); }
.account-switch input:checked + .account-switch-track::after{ transform: translateX(20px); }
.account-switch input:focus-visible + .account-switch-track{ outline: 2px solid var(--ember); outline-offset: 2px; }
.account-switch input:disabled + .account-switch-track{ opacity: 0.5; cursor: progress; }

/* Aucune demande : un ecran qui sert a quelque chose, pas une ligne grise. */
.account-empty{
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 30px 28px; background: var(--surface);
}
.account-empty h3{ font-size: 1.1rem; margin: 0 0 8px; }
.account-empty p{ font-size: 0.9rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 14px; }
.account-empty .account-actions-row{ margin-top: 18px; }

/* Fiche demande cote client : la ligne "et maintenant ?" peut faire deux
   lignes, l'icone doit rester en haut. */
.account-body .devis-next-step{ align-items: flex-start; }
.account-body .devis-next-step svg{ margin-top: 2px; }
.devis-card-foot{
  margin-top: 10px; font-size: 0.82rem; color: var(--ink-faint);
}
.devis-card-foot a{ color: var(--ember-deep); font-weight: 600; text-decoration: none; }
.devis-card-foot a:hover{ text-decoration: underline; }

@media (max-width: 560px){
  .account-verify{ padding: 36px 20px; }
  .account-consent-row{ flex-direction: column; }
}

@media (max-width: 560px){
  .legal-dl{ grid-template-columns: 1fr; }
}

/* ---------- Check list ---------- */
.check-list{ display: flex; flex-direction: column; gap: 14px; margin: 22px 0 28px; }
.check-list li{ display: flex; align-items: flex-start; gap: 12px; font-size: 0.98rem; color: var(--ink-soft); line-height: 1.55; }
.check-list svg{ width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ember); }
.check-list strong{ color: var(--ink); font-weight: 600; }

/* ---------- Related services ---------- */
.related-services{ display: flex; flex-wrap: wrap; gap: 10px; }
.related-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 0.86rem; font-weight: 500; color: var(--ink-soft);
  transition: border-color .2s ease, color .2s ease;
}
.related-pill:hover{ border-color: var(--ember); color: var(--ink); }
.related-pill.is-current{ background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Compact CTA band ---------- */
.cta-band{
  background: var(--grad-dark); color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-band::before{
  content: ''; position: absolute; top: -40%; right: -10%; width: 40vw; height: 40vw; max-width: 480px; max-height: 480px;
  background: radial-gradient(circle, rgba(184,74,30,0.18) 0%, rgba(184,74,30,0) 70%);
  pointer-events: none;
}
.cta-band-text{ position: relative; z-index: 1; }
.cta-band h3{ font-size: 1.5rem; color: var(--on-dark); margin-bottom: 8px; }
.cta-band p{ color: var(--on-dark-soft); font-size: 0.96rem; }
.cta-band-actions{ display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ============================================================
   Zone d'intervention (globe)
   ============================================================ */
.zone-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.zone-sub{ color: var(--ink-soft); font-size: 1.02rem; margin: 14px 0 28px; max-width: 46ch; }
.zone-list{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; }
.zone-list li{ display: flex; align-items: flex-start; gap: 10px; }
.zone-list strong{ display: block; font-size: 0.92rem; }
.zone-list em{ font-style: normal; font-size: 0.78rem; color: var(--ink-soft); }
.zone-dot{
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
  background: var(--ink-faint);
}
.zone-list .is-base .zone-dot{
  background: var(--ember);
  box-shadow: 0 0 0 4px rgba(184,74,30,0.16);
}

.zone-globe{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#globeCanvas{
  width: 100%; max-width: 480px; aspect-ratio: 1;
  contain: layout paint;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.8s ease;
}
#globeCanvas.is-ready{ opacity: 1; }
.zone-globe-note{ margin-top: 18px; font-size: 0.84rem; color: var(--ink-soft); text-align: center; }
.zone-globe-note a{ color: var(--ember-deep); text-decoration: underline; }

@media (max-width: 860px){
  .zone-grid{ grid-template-columns: 1fr; gap: 32px; }
  .zone-globe{ order: -1; }
  #globeCanvas{ max-width: 320px; }
}
@media (max-width: 460px){
  .zone-list{ grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ (accordéon)
   ============================================================ */
.faq-list{ max-width: 760px; display: flex; flex-direction: column; }
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-item:first-child{ border-top: 1px solid var(--border); }
.faq-question{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: none; padding: 22px 4px; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.faq-question svg{ width: 18px; height: 18px; flex-shrink: 0; color: var(--ember); transition: transform .25s ease; }
.faq-question[aria-expanded="true"] svg{ transform: rotate(180deg); }
.faq-answer{
  max-height: 0; overflow: hidden;
  transition: max-height .3s cubic-bezier(.16,1,.3,1);
}
.faq-answer p{ padding: 0 4px 22px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.65; max-width: 64ch; }
.faq-answer a{ color: var(--ember-deep); text-decoration: underline; font-weight: 600; }

/* ============================================================
   Outils (zone d'intervention + rappel d'entretien)
   ============================================================ */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.tools-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.tool-card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
  box-shadow: 0 4px 20px -2px rgba(28,24,21,0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tool-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(28,24,21,0.08);
}
.tool-card-badge{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ember-pale); color: var(--ember);
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid rgba(155,32,24,0.14);
  margin-bottom: 20px;
}
.tool-card-badge svg{ color: var(--ember); }
.tool-card h3{ font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--ink); }
.tool-card > p{ color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6; margin-bottom: 22px; }
.tool-card > p strong{ color: var(--ink); font-weight: 700; }
.tool-form{ display: flex; gap: 10px; }
.tool-form-stack{ flex-direction: column; }
.tool-row{ display: flex; gap: 10px; }
.tool-row .field-inline{ flex: 1; min-width: 0; }
.field-inline label{ display: block; font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 6px; }
.tool-form input, .tool-form select{
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-family: var(--font-sans); font-size: 0.92rem; color: var(--ink);
  transition: border-color .2s ease;
}
.tool-form input:focus, .tool-form select:focus{ outline: none; border-color: var(--ember); }
.tool-form > input{ flex: 1; min-width: 0; }
.tool-form .btn{ flex-shrink: 0; }
.tool-form-stack .btn{ width: 100%; margin-top: 4px; }
.tool-result{
  display: none; margin-top: 16px; padding: 13px 16px;
  border-radius: var(--radius-sm); font-size: 0.9rem; line-height: 1.5;
}
.tool-result.show{ display: block; }
.tool-result.ok{ background: var(--ember-pale); border: 1px solid rgba(184,74,30,0.22); color: var(--ember-pale-ink); }
.tool-result.ko{ background: var(--surface-alt); border: 1px solid var(--border); color: var(--ink-soft); }
.tool-result strong{ font-weight: 600; }
.tool-result a{ color: inherit; text-decoration: underline; font-weight: 600; }
.tool-note{ margin-top: 14px; font-size: 0.78rem; color: var(--ink-soft); }

@media (max-width: 860px){
  .tools-grid{ grid-template-columns: 1fr; }
  .tool-card{ padding: 26px 22px; }
}
@media (max-width: 460px){
  .tool-form{ flex-direction: column; }
  .tool-form .btn{ width: 100%; }
  .tool-row{ flex-direction: column; }
}

/* ============================================================
   Story / About
   ============================================================ */
.story-grid{ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.story-media{ border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 3/4; position: relative; }
.story-media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.02); }
.stage-media-frame{
  background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, var(--surface-alt) 88%);
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 460px;
  max-height: 460px;
  margin: 0 0 0 auto;
  box-shadow: 0 10px 32px rgba(28,24,21,0.06);
}
.stage-media-frame .hero-poster{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: none; transition: opacity .4s ease; }
.stage-media-frame.frame-3d-ready .hero-poster{ opacity: 0; pointer-events: none; }
.stage-media-frame .hero-3d{ position: absolute; inset: 0; width: 100%; height: 100%; transform: none; cursor: grab; opacity: 1; }
.story h2{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 20px; }
.story-text{ color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 16px; }
.story-text:last-of-type{ margin-bottom: 28px; }
.story-text strong{ color: var(--ink); font-weight: 600; }

.zones{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.zone-tag{
  font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.04em;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-soft);
}

.certs{ display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border); }
.certs figure{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 120px; }
.certs img{ height: 46px; width: auto; }
.certs figcaption{ font-size: 0.72rem; color: var(--ink-soft); text-align: center; line-height: 1.35; }

/* ---------- Avis Google ---------- */
.google-badge{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px 8px 12px;
  font-size: 0.85rem; font-weight: 500; color: var(--ink);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.google-badge:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(28,24,21,0.08);
  border-color: rgba(184,74,30,0.3);
  color: var(--ink);
}
.google-badge svg{ width: 18px; height: 18px; flex-shrink: 0; }
.google-badge .stars{ display: inline-flex; gap: 2px; color: #F5A623; }
.google-badge .stars svg{ width: 13px; height: 13px; }
.testi-source-logo{ display: flex; justify-content: center; margin-top: 28px; }
.testi-meta-google{ display: inline-flex; align-items: center; gap: 5px; }
.testi-meta-google svg{ width: 12px; height: 12px; flex-shrink: 0; }

/* ============================================================
   Proof stats
   ============================================================ */
.proof-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.proof-card{ background: var(--surface); padding: 40px 32px; }
.proof-card .num{
  font-family: var(--font-sans); font-size: 2.7rem; font-weight: 800; letter-spacing: -0.02em;
  background: var(--grad-ember); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-card .label{ margin-top: 10px; color: var(--ink); font-weight: 600; font-size: 0.94rem; max-width: 26ch; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery-tile{ border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/5; position: relative; }
.gallery-tile img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.03); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.gallery-tile:hover img{ transform: scale(1.04); }
.gallery-tile::after{ content:''; position:absolute; inset:0; background: linear-gradient(200deg, rgba(128,25,19,0.18), rgba(23,19,15,0.06) 55%); mix-blend-mode: multiply; }
.gallery-tag{
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: rgba(23,19,15,0.55); backdrop-filter: blur(4px);
  padding: 6px 11px; border-radius: 999px;
}

/* ============================================================
   Testimonials
   ============================================================ */
.testi-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.testi-card{
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.testi-card:hover{
  transform: translateY(-2px);
  border-color: rgba(184,74,30,0.25);
  box-shadow: var(--shadow-hover);
}
.testi-stars{ display: flex; gap: 3px; margin-bottom: 16px; color: var(--ember); }
.testi-stars svg{ width: 14px; height: 14px; }
.testi-quote{ font-size: 0.98rem; color: var(--ink); margin-bottom: 20px; line-height: 1.65; }
.testi-author{ display: flex; align-items: center; gap: 14px; }
.testi-avatar-wrap{ position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.testi-avatar-img{
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(28,24,21,0.12);
}
.testi-avatar-badge{
  position: absolute; right: -2px; bottom: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #4285F4; color: #fff;
  font-size: 0.62rem; font-weight: 800; font-family: var(--font-sans);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
}
.testi-name{ font-size: 0.94rem; font-weight: 700; color: var(--ink); }
.testi-meta{ font-size: 0.8rem; color: var(--ink-soft); font-family: var(--font-sans); margin-top: 2px; }
.testi-source{ margin-top: 28px; text-align: center; font-size: 0.85rem; color: var(--ink-soft); }
.testi-source strong{ color: var(--ink); }

/* ============================================================
   CTA / Contact — dark section
   ============================================================ */
.contact{ background: var(--dark); color: var(--on-dark); position: relative; overflow: hidden; }
.contact::before{
  content: '';
  position: absolute; bottom: -30%; left: -10%; width: 55vw; height: 55vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(155,32,24,0.18) 0%, rgba(155,32,24,0) 70%);
  pointer-events: none;
}
.contact .eyebrow{ color: #FF6B61; font-weight: 700; }
.contact .eyebrow::before{ background: #FF6B61; }
.contact-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; position: relative; z-index: 1; }
.contact h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--on-dark); margin-bottom: 18px; font-weight: 700; }
.contact-sub{ color: var(--on-dark-soft); font-size: 1.02rem; max-width: 42ch; margin-bottom: 36px; }

.contact-info{ display: flex; flex-direction: column; gap: 22px; }
.contact-info-item{ display: flex; gap: 14px; align-items: flex-start; }
.contact-info-item svg{ width: 18px; height: 18px; margin-top: 3px; color: #FF6B61; flex-shrink: 0; }
.contact-info-item .t1{ display: block; font-weight: 700; font-size: 0.95rem; }
.contact-info-item .t2{ display: block; color: var(--on-dark-soft); font-size: 0.86rem; margin-top: 3px; }
.contact-info-item a.t1:hover, .contact-info-item a.t2:hover{ color: #FF6B61; }

.form-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.field{ margin-bottom: 14px; }
.field label{ display: block; font-size: 0.78rem; color: var(--on-dark-soft); margin-bottom: 7px; font-family: var(--font-sans); letter-spacing: 0.03em; }
.field input, .field select, .field textarea{
  width: 100%; background: rgba(243,238,230,0.05); border: 1px solid rgba(243,238,230,0.16);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--on-dark); font-family: var(--font-sans); font-size: 0.92rem;
  transition: border-color .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(184,174,160,0.55); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: rgba(232,122,114,0.6); background: rgba(243,238,230,0.08);
}
.field textarea{ resize: vertical; min-height: 96px; }
.field select option{ background: var(--dark-2); color: var(--on-dark); }
.form-note{ font-size: 0.78rem; color: var(--on-dark-soft); margin-top: 14px; }
.form-success{
  display: none; align-items: center; gap: 10px; background: rgba(231,144,106,0.12);
  border: 1px solid rgba(231,144,106,0.3); border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 0.88rem; margin-top: 16px; color: #F3D9C8;
}
.form-success.show{ display: flex; }
.form-success svg{ width: 16px; height: 16px; flex-shrink: 0; }
.form-error{
  display: none; align-items: center; gap: 10px; background: rgba(184,74,30,0.12);
  border: 1px solid rgba(184,74,30,0.3); border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 0.88rem; margin-top: 16px; color: #F3D9C8;
}
.form-error.show{ display: flex; }
.form-error svg{ width: 16px; height: 16px; flex-shrink: 0; }
.form-error a{ text-decoration: underline; font-weight: 600; }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent-field{
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  margin: 4px 0 18px; font-size: 0.82rem; color: var(--on-dark-soft); line-height: 1.5;
}
.consent-field input{ margin-top: 3px; flex-shrink: 0; accent-color: var(--ember); }

/* ============================================================
   Footer
   ============================================================ */
footer{ background: var(--dark); color: var(--on-dark-soft); padding: 64px 0 28px; }
.footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(243,238,230,0.08); }
.footer-brand .logo{ color: var(--on-dark); margin-bottom: 14px; }
.footer-brand p{ font-size: 0.88rem; line-height: 1.6; max-width: 32ch; }
.footer-col h4, .footer-col-titre{ color: var(--on-dark); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-sans); font-weight: 500; margin-bottom: 18px; }
.footer-col ul{ display: flex; flex-direction: column; gap: 11px; }
.footer-col a, .footer-col span{ font-size: 0.88rem; transition: color .2s ease; }
.footer-col a:hover{ color: var(--on-dark); }
.footer-social{ display: flex; gap: 10px; margin-top: 18px; }
.footer-social a{
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(243,238,230,0.16);
  display: flex; align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color: rgba(243,238,230,0.5); color: var(--on-dark); }
.footer-social svg{ width: 15px; height: 15px; }
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.8rem; flex-wrap: wrap; gap: 12px; }
.footer-legal{ display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; min-width: 0; }
.admin-lock{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  color: rgba(243,238,230,0.35); transition: color .2s ease, background .2s ease;
}
.admin-lock:hover{ color: var(--on-dark); background: rgba(243,238,230,0.08); }
.admin-lock svg{ width: 15px; height: 15px; }

/* ============================================================
   Admin panel
   ============================================================ */
.admin-body{ background: var(--bg); min-height: 100vh; }
.login-screen{
  position: relative;
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 50% 20%, rgba(155, 32, 24, 0.05), transparent 70%);
}
.login-card{
  width: 100%; max-width: 400px; background: #FFFFFF; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 44px 36px;
  box-shadow: 0 12px 36px rgba(28, 24, 21, 0.08), 0 2px 6px rgba(28, 24, 21, 0.04);
}
.login-card .logo{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 24px;
}
.login-card h1{ font-size: 1.45rem; margin-bottom: 8px; font-weight: 700; letter-spacing: -0.02em; }
.login-card p{ color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 28px; line-height: 1.5; }
.admin-field{ margin-bottom: 18px; }
.admin-field label{ display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.admin-field input, .admin-field select, .admin-field textarea{
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-family: inherit; font-size: 0.95rem; background: var(--bg);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.admin-field input:focus{
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(155,32,24,0.12);
}
.admin-field textarea{ resize: vertical; min-height: 90px; }
.admin-error{
  background: var(--ember-pale); color: var(--ember-deep); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 0.85rem; margin-bottom: 20px; border: 1px solid rgba(155,32,24,0.2);
}
.admin-empty, .admin-loading{ color: var(--ink-soft); font-size: 0.9rem; padding: 20px 0; }

/* ---------- Toasts admin ----------
   Remplacent alert() : le message doit rester lisible pendant que l'admin
   continue de travailler, donc en surcouche fixe et jamais dans le flux.
   Sans ces regles, toast() ajoutait une div nue en bas du body : le retour
   d'action (note enregistree, erreur d'envoi) n'arrivait jamais sous les yeux. */
.toast-host{
  position: fixed; z-index: 1200; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.toast{
  pointer-events: auto;
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius); padding: 11px 15px;
  font-size: 0.85rem; line-height: 1.45; font-weight: 500;
  box-shadow: 0 6px 22px rgba(28,24,21,0.18);
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  overflow-wrap: anywhere;
}
.toast.show{ opacity: 1; transform: none; }
.toast-error{ background: var(--ember-deep); }
@media (prefers-reduced-motion: reduce){
  .toast{ transition: none; }
}
@media (max-width: 640px){
  .toast-host{ left: 16px; right: 16px; bottom: 16px; align-items: stretch; max-width: none; }
}

/* ---------- Ecran de connexion admin ----------
   Volontairement sobre : c'est un back-office, pas une page de vente. Meme
   palette que le site, mais aucune illustration ni argument commercial. */
.login-eyebrow{
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.login-eyebrow svg{ flex-shrink: 0; opacity: 0.7; }
.login-card .login-error{ margin-bottom: 20px; }
.login-error strong{ display: block; margin-bottom: 3px; }
/* Le champ mot de passe et son bouton oeil partagent la meme boite : le
   bouton se superpose au champ, dont le padding droit lui reserve la place. */
.pwd-field{ position: relative; display: block; }
.pwd-field input{ padding-right: 46px; }
.pwd-toggle{
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-faint); cursor: pointer; padding: 0;
}
.pwd-toggle:hover{ color: var(--ink); background: var(--surface-alt); }
.pwd-toggle:focus-visible{ outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(155,32,24,0.12); }
.pwd-toggle[aria-pressed="true"]{ color: var(--ember); }
/* Oeil ouvert par defaut, oeil barre quand le mot de passe est affiche. Pilote
   par aria-pressed plutot que par l'attribut hidden : hidden ne se pilote pas
   depuis le script sur un <svg>, la propriete .hidden n'existant que sur les
   elements HTML. Le CSS reste donc la seule source de verite. */
.pwd-toggle .pwd-icon-hide{ display: none; }
.pwd-toggle[aria-pressed="true"] .pwd-icon-show{ display: none; }
.pwd-toggle[aria-pressed="true"] .pwd-icon-hide{ display: block; }
.login-card .admin-hint{
  margin: 8px 0 0; font-size: 0.76rem; line-height: 1.5; color: var(--ink-faint);
}
.admin-hint{ font-size: 0.78rem; line-height: 1.5; color: var(--ink-faint); }
.login-card .admin-hint-warn,
.admin-hint-warn{
  display: flex; align-items: center; gap: 6px; color: var(--ember-deep); font-weight: 600;
}
.admin-hint-warn svg{ flex-shrink: 0; }
.login-submit{
  width: 100%; justify-content: center; gap: 9px; margin-top: 4px;
}
.login-submit:disabled{ opacity: 0.72; cursor: progress; }
/* Le rond tournant n'apparait que pendant l'envoi : sinon il occuperait de la
   place et ferait sauter le libelle du bouton au premier clic. */
.login-spinner{ display: none; width: 15px; height: 15px; flex-shrink: 0; }
.login-submit.is-loading .login-spinner{
  display: block; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 50%; animation: loginSpin .7s linear infinite;
}
@keyframes loginSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .login-submit.is-loading .login-spinner{ animation-duration: 2s; }
}
.login-card .login-foot{
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--ink-faint);
}
.login-foot a{ color: var(--ink-soft); font-weight: 600; text-decoration: underline; }
.login-foot a:hover{ color: var(--ember); }
.login-card input:focus-visible,
.login-card button:focus-visible,
.admin-nav-btn:focus-visible,
.filter-tab:focus-visible,
.btn-mini:focus-visible{
  outline: 2px solid var(--ember); outline-offset: 2px;
}
@media (max-width: 480px){
  .login-card{ padding: 32px 22px; }
  .admin-back-link{ position: static; margin-bottom: 18px; }
  .login-screen{ flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 72px 18px 32px; }
}

/* ---------- Sidebar + onglets (remplace l'ancienne page unique a scroll
   infini : chaque section est un onglet isole, comme un vrai tableau de
   bord plutot qu'un empilement de blocs) ---------- */
.admin-layout{ display: flex; min-height: 100vh; align-items: stretch; }
.admin-sidebar{
  width: 240px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 22px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar-logo{
  display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.98rem;
  padding: 4px 10px 18px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.admin-lock-icon{ width: 15px; height: 15px; margin-left: auto; opacity: 0.4; flex-shrink: 0; }
.admin-back-btn{
  margin-bottom: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.admin-back-link{
  position: absolute; top: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.admin-back-link svg{ width: 16px; height: 16px; }
.admin-back-link:hover{ color: var(--ink); }
.admin-nav{ display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-nav-btn{
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--radius-sm); border: none; background: none;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.admin-nav-btn svg{ width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; }
.admin-nav-btn:hover{ background: var(--surface-alt); color: var(--ink); }
.admin-nav-btn.active{ background: var(--ink); color: #fff; }
.admin-nav-btn.active svg{ opacity: 1; }
.admin-nav-count{
  margin-left: auto; background: var(--ember-pale); color: var(--ember-deep);
  font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
.admin-nav-btn.active .admin-nav-count{ background: rgba(255,255,255,0.22); color: #fff; }
.admin-logout-btn{ margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--ink-faint); }
.admin-body-wrap{
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  min-height: 100vh; background: var(--bg);
}

.admin-topbar{
  height: 54px; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 32px; background: #FFFFFF; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 35; width: 100%;
}
.admin-topbar-brand{ display: none; }
.admin-topbar-logo{ display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--ink); text-decoration: none; }
.admin-topbar-title{ font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.admin-menu-btn, .admin-topbar .icon-btn{
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  color: var(--ink);
}
.admin-menu-btn svg, .admin-topbar .icon-btn svg{ width: 18px; height: 18px; }
.admin-topbar #logoutBtnMobile{ display: none; }

.admin-drawer-overlay{
  display: none; position: fixed; inset: 0; background: rgba(23,19,15,0.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 95;
}
.admin-drawer-overlay.is-open{ opacity: 1; pointer-events: auto; }

.admin-main{ flex: 1; min-width: 0; padding: 32px 36px 80px; max-width: 1140px; }
.admin-tab-content[hidden]{ display: none; }

@media (max-width: 900px){
  .admin-layout{ flex-direction: column; }
  .admin-sidebar{
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 280px; max-width: 84vw;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100;
    box-shadow: 16px 0 36px rgba(28,24,21,0.16); background: #FFFFFF;
  }
  .admin-sidebar.is-open{ transform: translateX(0); }
  .admin-drawer-overlay{ display: block; }
  .admin-body-wrap{ width: 100%; min-width: 0; }
  .admin-topbar{
    height: 54px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px; background: #FFFFFF; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 40; width: 100%;
  }
  .admin-topbar-brand{ display: flex !important; align-items: center; gap: 8px; }
  .admin-topbar #logoutBtnMobile{ display: inline-flex !important; }
  .admin-main{ padding: 20px 14px 60px; max-width: 100%; }
}

.admin-stats, .stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 24px;
}
.admin-stat, .stat-card{
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(28,24,21,0.03);
  display: flex;
  flex-direction: column;
}
.admin-stat .num, .stat-num{
  font-family: var(--font-sans);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.admin-stat:first-child .num{ color: var(--ember); }
.admin-stat .label, .stat-label{
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
}
@media (max-width: 640px){
  .admin-stats, .stat-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 16px; }
  .admin-stat, .stat-card{ padding: 12px 14px; border-radius: 12px; }
  .admin-stat .num, .stat-num{ font-size: 1.45rem; }
  .admin-stat .label, .stat-label{ font-size: 0.68rem; }
}

.admin-section{
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 30px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(28,24,21,0.03);
}
.admin-section h2{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.admin-section-sub{
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
  margin-bottom: 18px;
}
.admin-section-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.admin-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-toolbar-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.devis-search{
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px 8px 36px;
  font-size: 0.84rem;
  font-family: inherit;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238A8275' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
  min-width: 250px;
  color: var(--ink);
  transition: all .15s ease;
}
.devis-search:focus{
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(155, 32, 24, 0.08);
}

/* --- Barre secondaire : filtres responsive en grille propre --- */
.admin-subtoolbar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: flex-end;
}
.admin-select-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.admin-select-field span{
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-select-field select{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  background: #FFFFFF;
  color: var(--ink);
  height: 38px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.admin-select-field select:focus{
  outline: none;
  border-color: var(--ember);
}
.admin-result-count{
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
}

/* --- Demande non lue : pastille + liseré --- */
.devis-card.is-unread{ border-left: 4px solid var(--ember); background: #FFFFFF; }
.unread-dot{
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember); margin-right: 7px; vertical-align: middle;
}

/* --- Copie rapide d'un contact --- */
.copy-btn{
  border: none; background: none; padding: 0 2px; cursor: pointer;
  font-size: 0.72rem; color: var(--ink-faint); text-decoration: underline; font-family: inherit;
}
.copy-btn:hover{ color: var(--ember); }

/* --- Note interne --- */
.devis-note-row{ display: flex; gap: 8px; align-items: center; margin: 10px 0 12px; }
.devis-note{
  flex: 1; min-height: 36px; height: 36px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 11px; font-family: inherit; font-size: 0.84rem; background: #FFFFFF; color: var(--ink);
}
.devis-note:focus{ outline: none; border-color: var(--ember); }

/* --- Relance programmee --- */
.followup-field{ display: inline-flex; }
.followup-input{
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 9px; font-size: 0.8rem; font-family: inherit; background: #FFFFFF; color: var(--ink);
  height: 34px;
}
.followup-chip{
  display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; background: var(--surface-alt); color: var(--ink-soft);
}
.followup-chip.is-due{ background: var(--ember-pale); color: var(--ember-deep); }

/* --- Repartition par service --- */
.breakdown-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.breakdown-list li{ display: flex; align-items: center; gap: 12px; font-size: 0.86rem; }
.breakdown-label{ width: 150px; flex-shrink: 0; color: var(--ink); font-weight: 500; }
.breakdown-bar{ flex: 1; height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.breakdown-bar span{ display: block; height: 100%; background: var(--ember); border-radius: 999px; transition: width .3s ease; }
.breakdown-value{ min-width: 90px; text-align: right; color: var(--ember); font-weight: 600; white-space: nowrap; font-size: 0.84rem; }

/* --- Fiche client --- */
.client-history{ list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 7px; }
.client-history li{ display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: var(--ink); }
.client-history em{ font-style: normal; color: var(--ink-faint); font-size: 0.78rem; margin-left: auto; }

/* --- Pastille de comptage a cote d'un titre de section --- */
.badge-count{
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  min-width: 22px; padding: 2px 8px; border-radius: 999px;
  background: var(--ember-pale); color: var(--ember-deep);
  font-size: 0.72rem; font-weight: 700; text-align: center;
}

/* ---------- Le brief du matin ----------
   Trois a cinq decisions, chacune avec sa raison. Le fond sombre le distingue
   des sections d'analyse : c'est la seule chose a lire avant de commencer. */
.brief-card{
  background: var(--grad-dark); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 24px;
}
.brief-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.brief-card h2{ display: flex; align-items: center; gap: 9px; font-size: 1.1rem; margin: 0 0 4px; }
.brief-card h2 svg{ color: var(--on-dark-soft); flex-shrink: 0; }
.brief-card .admin-section-sub{ color: var(--on-dark-soft); margin: 0; }
.brief-card .badge-count{ background: rgba(243,238,230,0.12); color: var(--on-dark); margin: 0; }
.brief-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.brief-item{
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(243,238,230,0.06); border: 1px solid rgba(243,238,230,0.1);
  border-radius: var(--radius); padding: 14px 16px;
}
.brief-rank{
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(243,238,230,0.12); color: var(--on-dark);
  font-size: 0.76rem; font-weight: 700;
}
.brief-item.is-urgent .brief-rank{ background: var(--ember); color: #fff; }
.brief-text{ flex: 1; min-width: 0; }
.brief-text strong{ display: block; font-size: 0.94rem; line-height: 1.35; }
.brief-why{ margin: 3px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--on-dark-soft); }
.brief-action{
  flex-shrink: 0; align-self: center;
  background: rgba(243,238,230,0.1); border: 1px solid rgba(243,238,230,0.18);
  color: var(--on-dark); border-radius: var(--radius-sm);
  padding: 7px 12px; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.brief-action:hover{ background: rgba(243,238,230,0.18); }
.brief-action:focus-visible{ outline: 2px solid var(--on-dark); outline-offset: 2px; }
.brief-empty{ margin: 0; font-size: 0.9rem; color: var(--on-dark-soft); }

/* ---------- Sante du systeme ----------
   Verte tant que les demandes arrivent, rouge des que le silence depasse 48 h :
   un formulaire casse ressemble sinon a une saison creuse. */
.health-card{
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ok);
  border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 24px;
}
.health-card.is-alert{ border-left-color: var(--ember); background: var(--ember-pale); border-color: rgba(155,32,24,0.2); }
.health-card.is-unknown{ border-left-color: var(--ink-faint); }
.health-icon{ flex-shrink: 0; color: var(--ok); margin-top: 1px; }
.health-card.is-alert .health-icon{ color: var(--ember); }
.health-card.is-unknown .health-icon{ color: var(--ink-faint); }
.health-title{ font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0 0 4px; font-weight: 700; }
.health-line{ margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.health-card.is-alert .health-line{ color: var(--ember-deep); }
.health-sub{ margin: 5px 0 0; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Suivi : etats mois par mois ---------- */
.state-rows{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.state-row{ display: flex; align-items: center; gap: 14px; font-size: 0.85rem; }
.state-month{ width: 116px; flex-shrink: 0; color: var(--ink); font-weight: 600; text-transform: capitalize; }
.state-bar{ flex: 1; display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-alt); }
.state-bar span{ display: block; height: 100%; }
.state-seg-traite{ background: var(--ok); }
.state-seg-nouveau{ background: var(--ember); }
.state-seg-refuse{ background: var(--ink-faint); }
.state-total{ width: 34px; text-align: right; color: var(--ink); font-weight: 600; }
.state-legend{ display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; font-size: 0.78rem; color: var(--ink-soft); }
.state-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.state-dot{ display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.state-detail{ font-size: 0.78rem; color: var(--ink-faint); margin-top: 4px; }
.silence-chip{
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; background: var(--ember-pale); color: var(--ember-deep);
}

/* ---------- Registre de consentement ---------- */
.consent-tabs{ display: flex; gap: 6px; flex-wrap: wrap; }
.consent-row{
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) 140px;
  align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.consent-who{ min-width: 0; }
.consent-who strong{ display: block; }
.consent-who span{ display: block; font-size: 0.79rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.consent-origin{ font-size: 0.79rem; color: var(--ink-soft); line-height: 1.5; }
.consent-state{ text-align: right; }
.consent-date{ display: block; font-size: 0.75rem; color: var(--ink-faint); margin-top: 4px; }
.status-consent-oui{ background: var(--ok-pale); color: var(--ok); }
.status-consent-non{ background: var(--surface-alt); color: var(--ink-soft); }
.status-consent-desinscrit{ background: var(--ember-pale); color: var(--ember-deep); }
.consent-note{ margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }

/* Repere visuel apres un saut depuis le brief : sans lui, on atterrit sur la
   liste des devis sans savoir laquelle on venait ouvrir. */
.devis-card.is-focus{ border-color: var(--ember); box-shadow: 0 0 0 3px rgba(155,32,24,0.12); }

@media (max-width: 640px){
  .brief-card{ padding: 20px 18px; }
  .brief-item{ flex-wrap: wrap; }
  .brief-action{ width: 100%; align-self: stretch; }
  .state-month{ width: 84px; font-size: 0.8rem; }
  .consent-row{ grid-template-columns: 1fr; gap: 6px; }
  .consent-state{ text-align: left; }
}

@media (max-width: 640px){
  .breakdown-label{ width: 100px; }
  .admin-result-count{ margin-left: 0; }
}
@media (max-width: 640px){
  .devis-search{ min-width: 0; flex: 1 1 100%; }
}
.filter-tabs{ display: flex; gap: 6px; }
.filter-tab{
  background: var(--surface-alt); border: 1px solid transparent; border-radius: 999px;
  padding: 7px 14px; font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
}
.filter-tab.active{ background: var(--ink); color: #fff; }

.devis-card{
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(28, 24, 21, 0.03);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.devis-card:hover{
  box-shadow: 0 4px 14px rgba(28, 24, 21, 0.06);
  border-color: rgba(28, 24, 21, 0.16);
}
.devis-card-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.devis-service{ display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; font-weight: 500; }
.status-badge{ font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.02em; }
.status-nouveau{ background: var(--ember-pale); color: var(--ember-deep); }
.status-traite{ background: var(--ok-pale); color: var(--ok); }
.status-refuse{ background: var(--surface-alt); color: var(--ink-faint); }
.devis-card-meta{ font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 10px; }
.devis-card-meta a{ color: var(--ink); text-decoration: none; font-weight: 500; }
.devis-card-meta a:hover{ color: var(--ember); text-decoration: underline; }
/* Adresse d'intervention : ligne dediee sous les coordonnees, avec sa pastille
   de localisation, pour reperer le secteur d'un coup d'oeil en preparant une
   tournee. Absente des demandes enregistrees avant l'ajout du champ. */
.devis-card-address{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.devis-card-address svg{ flex-shrink: 0; color: var(--ember); }
.devis-card-message{ font-size: 0.88rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 12px; line-height: 1.5; color: var(--ink); }
.devis-card-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.devis-card-actions .status-select{ border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 0.82rem; background: #FFFFFF; font-family: inherit; color: var(--ink); height: 34px; cursor: pointer; }
.btn-mini{
  background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--ink);
  height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: all .15s ease;
}
.btn-mini:hover:not(:disabled){ background: var(--surface-alt); border-color: var(--ink-faint); color: var(--ink); }
.btn-mini:disabled{ opacity: 0.45; cursor: not-allowed; }
.btn-mini-danger{ color: #BC1C1C; }
.btn-mini-danger:hover:not(:disabled){ background: var(--ember-pale); color: var(--ember-deep); border-color: transparent; }

/* ---------- Dashboard de fréquentation (courbe SVG, sans librairie) ----------
   Carte blanche lumineuse, typographie sombre élégante et courbe contrastée */
.dash-chart-card{
  background: #FFFFFF;
  border: 1px solid rgba(28, 24, 21, 0.08);
  border-radius: 20px;
  padding: 28px 30px 24px;
  color: var(--ink);
  margin-bottom: 28px;
  box-shadow: 0 10px 30px rgba(28, 24, 21, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.dash-chart-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dash-label{ font-size: 0.86rem; color: var(--ink-soft); font-weight: 500; }
.dash-amount-row{ display: flex; align-items: baseline; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.dash-amount{ font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
.dash-pill-badge{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: rgba(46, 117, 89, 0.12); color: #2E7559;
}
.dash-pill-badge.is-down{ background: var(--ember-pale); color: var(--ember-deep); }
.dash-pill-badge.is-down .dash-icon{ transform: rotate(90deg); }
.dash-icon{ width: 13px; height: 13px; }
.dash-subtext{ font-size: 0.82rem; color: var(--ink-soft); }

.dash-tabs .filter-tab{ background: var(--surface-alt); border-color: var(--border); color: var(--ink-soft); }
.dash-tabs .filter-tab.active{ background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

.dash-metrics-bar{
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-bottom: 18px; font-size: 0.84rem; color: var(--ink-soft);
  border-bottom: 1px solid rgba(28, 24, 21, 0.06);
}
.dash-metric-group{ display: flex; align-items: center; gap: 8px; }
.dash-metric-val{ color: var(--ink); font-weight: 700; }
.dash-metric-right{ display: flex; gap: 20px; flex-wrap: wrap; }
.dash-stat-item strong{ font-weight: 700; }
.val-blue{ color: #2563EB; }
.val-yellow{ color: #D97706; }
.val-ember{ color: var(--ember); }
.dash-pill-mini{
  font-size: 0.74rem; font-weight: 700; color: #2E7559;
  background: rgba(46, 117, 89, 0.12); padding: 2px 8px; border-radius: 999px;
}

.dash-svg-container{ position: relative; width: 100%; height: 300px; }
.dash-svg-chart{ width: 100%; height: 100%; overflow: visible; display: block; }
.dash-axis-y{ font-size: 11px; fill: var(--ink-faint); font-family: var(--font-sans); }
.dash-grid-lines line{ stroke: rgba(28, 24, 21, 0.07); stroke-dasharray: 3 4; }
.dash-cursor{ stroke: var(--ember); stroke-dasharray: 4 4; opacity: 0.7; }
.dash-hit{ fill: transparent; cursor: crosshair; }

.dash-tooltip{
  position: absolute; z-index: 3; pointer-events: none;
  background: #FFFFFF;
  border: 1px solid rgba(155, 32, 24, 0.25);
  backdrop-filter: blur(12px);
  border-radius: 10px; padding: 9px 14px;
  box-shadow: 0 12px 28px rgba(28, 24, 21, 0.12), 0 0 10px rgba(155, 32, 24, 0.08);
  transform: translate(-50%, -100%);
  white-space: nowrap;
}
.dash-tooltip-date{ font-size: 0.74rem; color: var(--ink-soft); display: block; font-weight: 500; }
.dash-tooltip-val{ display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.dash-tooltip-val strong{ font-size: 1.05rem; color: var(--ink); font-weight: 800; font-family: var(--font-sans); }
.dash-tooltip-badge{ font-size: 0.72rem; color: #2E7559; font-weight: 700; background: rgba(46, 117, 89, 0.12); padding: 2px 6px; border-radius: 4px; }

.dash-axis-x{
  display: flex; justify-content: space-between; gap: 4px;
  margin-top: 10px; font-size: 0.7rem; color: var(--ink-faint); overflow: hidden;
}
@media (max-width: 640px){
  .dash-chart-card{ padding: 22px 18px 18px; }
  .dash-svg-container{ height: 220px; }
  .dash-metrics-bar{ font-size: 0.78rem; }
}

.visitors-globe{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, rgba(244, 241, 237, 0.6) 80%);
  border: 1px solid rgba(28, 24, 21, 0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 20px rgba(28, 24, 21, 0.04);
}
#visitorsGlobe{
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  contain: layout paint;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.8s ease;
}
#visitorsGlobe.is-ready{
  opacity: 1;
}
.visits-split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.visits-subtitle{ font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 12px; font-weight: 600; }
.top-pages li, .recent-visits li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.top-pages li strong{ color: var(--ember); }
.recent-visits li em{ font-style: normal; font-size: 0.76rem; color: var(--ink-faint); white-space: nowrap; }

/* --- Acquisition : provenance du trafic + taux de conversion --- */
/* Reprend le meme vocabulaire visuel que le reste de l'admin : bandeau
   .admin-stats pour le KPI, barres .breakdown-list pour les proportions. */
.acq-block{ margin: 26px 0 30px; }
.acq-stats{ margin-bottom: 24px; }
.acq-stat{ display: flex; align-items: flex-start; gap: 14px; }
.acq-stat-icon{ color: var(--ember); flex-shrink: 0; margin-top: 6px; }
.acq-stat .label{ max-width: 52ch; }
/* auto-fit : sans campagne UTM, la liste des provenances occupe toute la largeur. */
.acq-split{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; align-items: start; }
/* Un nom de campagne long ne doit pas passer sur deux lignes et desaligner la
   colonne : on tronque, le nom complet reste dans l'attribut title. */
.acq-split .breakdown-label{ width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acq-split .breakdown-value{ width: 40px; }
.acq-split .admin-empty{ padding: 6px 0; }

@media (max-width: 640px){
  .acq-split{ grid-template-columns: 1fr; gap: 22px; }
  /* Un peu plus large que la repartition par service : "Recherche Google" doit
     tenir en entier, c'est la ligne que le patron lit en premier. */
  .acq-split .breakdown-label{ width: 122px; }
}

/* --- Modeles d'emails prets a l'emploi --- */
.tpl-picker{ margin-bottom: 26px; }
.tpl-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.tpl-card{
  text-align: left; display: flex; flex-direction: column; gap: 5px;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.tpl-card:hover{ border-color: var(--ember); background: var(--bg); }
.tpl-card.is-active{ border-color: var(--ember); background: var(--ember-pale); }
.tpl-card strong{ font-size: 0.9rem; color: var(--ink); line-height: 1.3; }
.tpl-saison{
  align-self: flex-start; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ember-deep); background: var(--ember-pale);
  padding: 2px 7px; border-radius: 999px;
}
.tpl-desc{ font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; }

.broadcast-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.auto-mail-list{ display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Apercu d'un email --- */
.mail-preview-overlay{
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(23,19,15,0.55); padding: 24px;
}
.mail-preview{
  background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 680px;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(23,19,15,0.3);
}
.mail-preview-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.mail-preview iframe{ flex: 1; width: 100%; border: 0; background: var(--surface-alt); min-height: 420px; }

.settings-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.settings-status{ font-size: 0.85rem; margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); }
.settings-status.ok{ background: var(--ok-pale); color: var(--ok); }
.settings-status.error{ background: var(--ember-pale); color: var(--ember-deep); }

@media (max-width: 640px){
  .settings-grid{ grid-template-columns: 1fr; }
  .admin-stats{ flex-direction: column; }
  .visits-split{ grid-template-columns: 1fr; gap: 22px; }
  .chart{ height: 140px; }
  .chart-label{ display: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 1081px){
  .nav-desktop{ display: flex; }
  .tel-link{ display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); }
  .header-actions .btn-primary{ display: inline-flex; }
  .header-actions .icon-btn{ display: none; }
  .burger{ display: none; }
}

@media (max-width: 1080px){
  .nav-desktop{ display: none; }
  .hero{ padding: 132px 0 36px; }
  .hero-actions .btn{ flex: 1; }
  .trust-band img{ height: 42px; }
  .trust-band-inner{ gap: 16px 26px; }
  .story-grid{ grid-template-columns: 1fr; gap: 36px; }
  .story-media{ aspect-ratio: 16/10; }
  .proof-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .testi-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; gap: 44px; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; }
  section{ padding: 64px 0; }

  
  body{ padding-bottom: 78px; }
  footer{ padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .page-hero{ padding: 116px 0 56px; }
  .page-hero .story-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page-hero .stage-media-frame{
    margin: 0 auto;
    width: 100%;
    max-width: 380px;
    height: 320px;
    aspect-ratio: auto;
  }
  .cta-band{ padding: 32px 24px; flex-direction: column; align-items: flex-start; }
  .cta-band-actions{ width: 100%; }
  .cta-band-actions .btn{ flex: 1; }
}

@media (max-width: 560px){
  /* Every rem-based size (headings, buttons, badges...) shrinks together
     by one notch on phones, rather than tuning each rule individually. */
  html{ font-size: 15px; }
  .services-grid{ grid-template-columns: 1fr; gap: 16px; }
  .service-card{ padding: 24px 20px; }
  .service-card-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .service-link{ font-size: 0.82rem; }
  .service-cta{
    padding: 7px 14px;
    font-size: 0.78rem;
    flex-shrink: 0;
  }
  .gallery-grid{ grid-template-columns: 1fr; }
  .testi-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero-actions .btn{ width: 100%; }
  .hero-actions{ flex-direction: column; }
  .page-hero .stage-media-frame{
    max-width: 100%;
    height: 280px;
    border-radius: var(--radius-md);
  }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px){
  .site-header .wrap{ height: 62px; padding: 0 16px; gap: 12px; }
  .header-actions{ gap: 8px; }
  .header-admin-link{ display: none; }
  .logo{ font-size: 0.98rem; gap: 9px; }
  .logo-mark{ width: 34px; height: 34px; }
  .icon-btn, .burger{ width: 38px; height: 38px; }
  .icon-btn svg{ width: 16px; height: 16px; }
  .burger svg{ width: 20px; height: 20px; }
  .burger svg path{ stroke-width: 2.2px; }
  .hero{ padding-top: 116px; }
}

@media (max-width: 360px){
  .site-header .wrap{ padding: 0 12px; gap: 8px; }
  .logo{ font-size: 0.88rem; gap: 6px; }
  .logo-mark{ width: 32px; height: 32px; }
  .header-actions{ gap: 6px; }
  .icon-btn, .burger{ width: 36px; height: 36px; }
  .hero{ padding-top: 104px; }
}

/* Risque juridique d'un modele d'email (article L. 223-8) */
.tpl-risque{ display: inline-block; margin-top: 10px; padding: 3px 8px; border-radius: var(--radius-sm); font-size: .7rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.tpl-risque-ok{ background: var(--ok-pale); color: var(--ok); }
.tpl-risque-gris{ background: var(--surface-alt); color: var(--ink-soft); }
.tpl-risque-non{ background: var(--ember-pale); color: var(--ember-pale-ink); }
.tpl-card-bloquee{ border-color: var(--ember); }

/* ============ Page tarifs ============ */
.tarifs-body .wrap{ max-width: 820px; }
.tarif-table-wrap{ overflow-x: auto; margin: 0 0 26px; }
.tarif-table{ width: 100%; border-collapse: collapse; font-size: .92rem; }
.tarif-table th{ text-align: left; padding: 10px 12px; background: var(--surface-alt); color: var(--ink); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.tarif-table th:last-child, .tarif-table td:last-child{ text-align: right; white-space: nowrap; }
.tarif-table td{ padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--ink-soft); }
.tarif-table tr:last-child td{ border-bottom: none; }
.tarif-prix{ font-weight: 700; color: var(--ink); }

.estimateur{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; margin: 30px 0 40px; }
.estimateur h2{ margin-top: 0; }
.estim-champs{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 20px 0; }
.field-light label{ display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field-light select{ width: 100%; padding: 11px 12px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.field-light select:focus{ outline: 2px solid var(--ember); outline-offset: 1px; }
.estim-resultat{ background: var(--surface-alt); border-radius: var(--radius); padding: 16px 18px; }
.estim-ligne{ display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .92rem; color: var(--ink-soft); }
.estim-ligne strong{ color: var(--ink); white-space: nowrap; }
.estim-total{ border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; font-size: 1.05rem; }
.estim-total strong{ color: var(--ember); font-size: 1.15rem; }
.estim-note{ font-size: .82rem; color: var(--ink-faint); margin-top: 14px; }

.communes-liste{ list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; margin: 0 0 22px; }
.communes-liste li{ font-size: .88rem; color: var(--ink-soft); padding: 3px 0; }
.communes-liste span{ color: var(--ink-faint); font-size: .78rem; }

@media (max-width: 600px){
  .estim-champs{ grid-template-columns: 1fr; }
}

/* ============ Carrousel des realisations ============ */
.gal-barre{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.gal-filtres{ display: flex; flex-wrap: wrap; gap: 8px; }
.gal-chip{
  padding: 7px 14px; font-family: var(--font-sans); font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.gal-chip:hover{ color: var(--ink); border-color: var(--ink-faint); }
.gal-chip.is-actif{ color: #fff; background: var(--ember); border-color: var(--ember); }
.gal-chip:focus-visible{ outline: 2px solid var(--ember); outline-offset: 2px; }

.gal-nav{ display: flex; align-items: center; gap: 8px; }
.gal-compteur{ font-size: .8rem; color: var(--ink-faint); margin-right: 4px; }
.gal-fleche{
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer; transition: border-color .18s ease, opacity .18s ease;
}
.gal-fleche:hover:not(:disabled){ border-color: var(--ember); color: var(--ember); }
.gal-fleche:disabled{ opacity: .35; cursor: default; }
.gal-fleche:focus-visible{ outline: 2px solid var(--ember); outline-offset: 2px; }

/* Le defilement est natif : scroll-snap. Sans JS, la piste reste utilisable
   au doigt et a la molette. */
.gal-piste{
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 16px;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.gal-piste:focus-visible{ outline: 2px solid var(--ember); outline-offset: 3px; border-radius: var(--radius); }
.gal-piste::-webkit-scrollbar{ height: 6px; }
.gal-piste::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; }

.gal-item{
  flex: 0 0 250px; margin: 0; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.gal-item img{
  display: block; width: 100%; height: 330px; object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.gal-item:hover img{ transform: scale(1.04); }
.gal-item figcaption{
  padding: 11px 13px; font-size: .8rem; line-height: 1.45; color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce){
  .gal-piste{ scroll-behavior: auto; }
  .gal-item img{ transition: none; }
  .gal-item:hover img{ transform: none; }
}
@media (max-width: 600px){
  .gal-item{ flex-basis: 70vw; }
  .gal-item img{ height: 300px; }
  .gal-nav{ width: 100%; justify-content: flex-end; }
}

/* ============ Photos sur les pages de service ============ */
.service-photos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 26px 0 8px; }
.service-photo{ margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.service-photo img{ display: block; width: 100%; height: 300px; object-fit: cover; }
.service-photo figcaption{ padding: 10px 12px; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }

/* ============ Avant / apres ============ */
.aa-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.aa-note{ margin-top: 22px; font-size: .88rem; color: var(--ink-soft); }

/* Repli sans JavaScript : tant que le composant n'est pas defini, les deux
   photos s'affichent cote a cote. Le visiteur voit le chantier meme si le
   script ne charge jamais. */
avant-apres:not(:defined){ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
avant-apres:not(:defined) img{
  display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius);
}

@media (max-width: 860px){
  .aa-grid{ grid-template-columns: 1fr; gap: 20px; }
}

/* ============ Repondre a un client depuis l'admin ============ */
.repondre-boite{ max-width: 620px; }
.repondre-form{ padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.repondre-dest{ margin: 0 0 10px; font-size: .85rem; color: var(--ink-soft); }
.repondre-form label{ font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-top: 8px; }
.repondre-form input[type="text"], .repondre-form textarea{
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.repondre-form textarea{ resize: vertical; line-height: 1.6; }
.repondre-form input:focus, .repondre-form textarea:focus{ outline: 2px solid var(--ember); outline-offset: 1px; }
.repondre-note{ margin: 12px 0 0; font-size: .78rem; color: var(--ink-faint); }
.repondre-erreur{ margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ember-pale); color: var(--ember-pale-ink); font-size: .84rem; }
.repondre-actions{ margin-top: 14px; display: flex; justify-content: flex-end; }
.btn-mini-fort{ border-color: var(--ember); color: var(--ember); font-weight: 600; }
.btn-mini-fort:hover:not(:disabled){ background: var(--ember); color: #fff; }

/* ============ Boite de reception et journal de l'agent ============ */
/* Titre d'un groupe d'anciennete : il porte la lecture, il n'est pas decoratif. */
.msg-groupe{
  display: flex; align-items: center; gap: 10px;
  margin: 26px 0 12px; font-family: var(--font-sans);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.msg-groupe:first-child{ margin-top: 4px; }
.msg-groupe::after{ content: ''; flex: 1; height: 1px; background: var(--border); }
.msg-groupe span{
  order: 1; letter-spacing: 0; font-size: .72rem; color: var(--ink-soft);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}

.msg-carte{
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(28, 24, 21, 0.03);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.msg-carte:hover{
  box-shadow: 0 4px 12px rgba(28, 24, 21, 0.05);
  border-color: rgba(28, 24, 21, 0.16);
  border-left-color: var(--border);
}
.msg-non-lu, .msg-non-lu:hover{ border-left-color: var(--ember); }
.msg-non-lu .msg-sujet{ font-weight: 800; }

.msg-tete{ display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: .92rem; }
.msg-qui{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.msg-qui strong{ color: var(--ink); font-weight: 700; }
.msg-tete time{ color: var(--ink-faint); font-size: .78rem; white-space: nowrap; font-weight: 500; }

/* La pastille double le liseré : sur une carte isolée le liseré seul ne dit rien. */
.msg-pastille{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember); flex: 0 0 auto; align-self: center;
}
.msg-lien, .msg-orphelin{
  font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.msg-lien{ color: var(--ember); background: var(--ember-pale, rgba(193,90,42,.09)); }
.msg-orphelin{ color: var(--ink-faint); background: var(--surface-alt); border: 1px solid var(--border); font-weight: 500; }

.msg-sujet{ margin: 9px 0 7px; font-weight: 700; color: var(--ink); font-size: .95rem; }
.msg-texte{
  margin: 0; padding: 12px 14px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .86rem; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.msg-plus{
  margin-top: 6px; padding: 0; background: none; border: 0;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  color: var(--ember); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.msg-pj{ font-size: .78rem; color: var(--ink-faint); margin: 8px 0 0; font-weight: 500; }
.msg-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Journal de l'agent ── */
#agentEtats{ list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
#agentEtats li{
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .85rem; line-height: 1.5; color: var(--ink-soft);
}
#agentEtats li::before{
  content: '✓'; flex: 0 0 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
  color: #fff; background: var(--ok); margin-top: 1px;
}
#agentEtats .etat-non::before{ content: '✕'; background: var(--ink-faint); }
#agentEtats .etat-attention::before{ content: '!'; background: var(--ember); }

.agent-journal{ list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.agent-ligne{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 15px; background: #FFFFFF; border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px; font-size: .86rem; box-shadow: 0 1px 3px rgba(28, 24, 21, 0.02);
}
.agent-ligne time{ color: var(--ink-faint); font-size: .78rem; min-width: 104px; font-weight: 500; }
.agent-ligne .ag-action{ color: var(--ink); font-weight: 600; flex: 1; min-width: 180px; }
.agent-ligne .ag-etat{
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  border-radius: 999px; padding: 2px 9px; background: var(--surface-alt); color: var(--ink-soft);
}
.agent-ligne code{ font-size: .74rem; color: var(--ink-soft); background: var(--surface-alt); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }
.ag-ok{ border-left-color: var(--ok); }
.ag-ok .ag-etat{ color: var(--ok); background: var(--ok-pale, rgba(45,125,80,.1)); }
.ag-refuse{ border-left-color: var(--ember); }
.ag-refuse .ag-etat{ color: var(--ember); background: var(--ember-pale, rgba(193,90,42,.09)); }
.ag-simule{ border-left-color: var(--ink-faint); }
.ag-echec{ border-left-color: #B23B2E; }
.ag-echec .ag-etat{ color: #B23B2E; }

@media (max-width: 620px){
  .msg-carte{ padding: 14px 15px; }
  .msg-tete{ flex-direction: column; align-items: flex-start; gap: 4px; }
  .agent-ligne{ gap: 6px; }
  .agent-ligne time{ min-width: 0; }
  .agent-ligne .ag-action{ flex: 1 0 100%; min-width: 0; }
}

/* ============ Recherche globale et raccourcis (admin) ============ */
.admin-topbar-actions{ display: flex; align-items: center; gap: 8px; }

.rg-declencheur{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; font-family: var(--font-sans); font-size: .82rem; font-weight: 500;
  color: var(--ink-soft); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: all .15s ease;
}
.rg-declencheur:hover{ color: var(--ink); border-color: var(--ink-faint); background: var(--surface); }
.rg-declencheur kbd{ font-size: .68rem; padding: 2px 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-faint); }

@media (max-width: 768px){
  .btn-label-desktop, .kbd-desktop{ display: none !important; }
  .rg-declencheur{
    width: 36px; height: 36px; padding: 0; margin-left: 0;
    border-radius: 50%; justify-content: center;
  }
  .calc-declencheur{ margin-left: 0; }
}

/* ============ Modales Universelles & Bottom-Sheets Pro (Blanc Épuré) ============ */
.app-modal-overlay, .rg-overlay, .mail-preview-overlay{
  position: fixed; inset: 0; z-index: 250;
  background: rgba(28, 24, 21, 0.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: center;
  padding: 20px; transition: opacity .2s ease;
}

.app-modal-box, .rg-boite, .mail-preview, .calc-boite, .ramonage-boite, .reponses-boite, .repondre-boite{
  width: 100%; max-width: 620px; max-height: 88vh;
  background: #FFFFFF; border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 20px 48px rgba(28,24,21,0.12);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalPopIn .24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn{
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close-btn{
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--ink-soft); cursor: pointer; transition: all .15s ease;
  flex-shrink: 0;
}
.modal-close-btn:hover{ color: var(--ink); background: var(--surface); border-color: var(--ink-faint); transform: scale(1.05); }

/* Bottom-Sheet sur mobile */
@media (max-width: 640px){
  .app-modal-overlay, .rg-overlay, .mail-preview-overlay{
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .app-modal-box, .rg-boite, .mail-preview, .calc-boite, .ramonage-boite, .reponses-boite, .repondre-boite{
    max-width: 100% !important;
    background: #FFFFFF !important;
    border-radius: 20px 20px 0 0 !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
    max-height: 90vh !important;
    animation: sheetSlideUp .26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .app-modal-box::before, .rg-boite::before, .mail-preview::before{
    content: ''; display: block; width: 38px; height: 4px;
    border-radius: 2px; background: rgba(140, 150, 165, 0.35);
    margin: 8px auto 4px; flex-shrink: 0;
  }
  @keyframes sheetSlideUp{
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

#rechercheChamp{ width: 100%; padding: 16px 18px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: none; border-bottom: 1px solid var(--border); }
#rechercheChamp:focus{ outline: none; }
#rechercheResultats{ max-height: 52vh; overflow-y: auto; }
.rg-item{ display: block; width: 100%; text-align: left; padding: 11px 18px; background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; font: inherit; }
.rg-item:hover, .rg-item:focus-visible{ background: var(--surface-alt); outline: none; }
.rg-type{ display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ember); margin-right: 8px; }
.rg-item strong{ color: var(--ink); font-size: .9rem; }
.rg-detail{ display: block; font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }
.rg-vide{ padding: 18px; margin: 0; font-size: .86rem; color: var(--ink-faint); }
.rg-astuce{ margin: 0; padding: 9px 18px; font-size: .74rem; color: var(--ink-faint); background: var(--surface-alt); }

.rg-aide{ position: fixed; right: 18px; bottom: 18px; z-index: 190; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-hover); font-size: .82rem; }
.rg-aide ul{ list-style: none; padding: 0; margin: 8px 0 0; color: var(--ink-soft); line-height: 1.9; }
.rg-aide kbd{ font-size: .7rem; padding: 2px 6px; border-radius: 4px; background: var(--surface-alt); border: 1px solid var(--border); }

/* ============ Outils Admin Plus (Devis Express, SMS, Fiche Chantier) ============ */
.calc-boite{ max-width: 600px; }
.calc-corps{ padding: 16px 20px 22px; overflow-y: auto; max-height: 76vh; }
.calc-grille-champs{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 600px){ .calc-grille-champs{ grid-template-columns: 1fr; gap: 10px; } }
.calc-champ label{ display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.calc-select{ width: 100%; padding: 10px 12px; font: inherit; font-size: .88rem; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.calc-select:focus{ outline: 2px solid var(--ember); outline-offset: 1px; }

.calc-options{ background: var(--surface-alt); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 18px; }
.calc-options-titre{ display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 8px; }
.calc-opt-grille{ display: flex; flex-direction: column; gap: 8px; }
.calc-opt-item{ display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink); cursor: pointer; }
.calc-opt-item input{ width: 16px; height: 16px; accent-color: var(--ember); cursor: pointer; }

.calc-recap{ background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
.calc-recap-ligne{ display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .88rem; color: var(--ink-soft); }
.calc-recap-ligne strong{ color: var(--ink); }
.calc-total-box{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.calc-total-prix{ color: var(--ember); font-size: 1.35rem; font-weight: 800; }

.calc-actions{ display: flex; gap: 10px; }
.calc-actions .btn{ flex: 1; }

/* Modeles de SMS */
.reponses-boite{ max-width: 680px; }
.reponses-corps{ padding: 16px 20px 22px; overflow-y: auto; max-height: 76vh; }
.sms-templates-list{ display: flex; flex-direction: column; gap: 12px; }
.sms-tpl-card{ background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; transition: border-color .15s ease; }
.sms-tpl-card:hover{ border-color: var(--ink-faint); }
.sms-tpl-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sms-tpl-titre{ font-size: .88rem; font-weight: 700; color: var(--ink); }
.sms-tpl-badge{ font-size: .72rem; padding: 2px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); }
.sms-tpl-text{ font-size: .85rem; line-height: 1.55; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 10px; white-space: pre-wrap; word-break: break-word; }
.sms-tpl-actions{ display: flex; flex-wrap: wrap; gap: 8px; }

/* Raccourcis cartes devis (SMS, Fiche, Snooze) */
.btn-mini-sms{ background: #FDF4EB; color: #9B2018; border-color: rgba(155,32,24,0.25); font-weight: 600; }
.btn-mini-sms:hover{ background: #FCE8D8; border-color: #9B2018; }
.btn-mini-fiche{ background: #EDF4F9; color: #1B4D7E; border-color: rgba(27,77,126,0.25); font-weight: 600; }
.btn-mini-fiche:hover{ background: #DFECF5; border-color: #1B4D7E; }

.snooze-chips{ display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.snooze-chip{
  padding: 3px 6px; font-size: .7rem; font-weight: 600;
  color: var(--ink-soft); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; transition: all .15s ease;
}
.snooze-chip:hover{ color: var(--ink); border-color: var(--ink-faint); background: var(--surface); }
.gps-link{ display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: #1B4D7E; text-decoration: none; margin-left: 6px; }
.gps-link:hover{ text-decoration: underline; color: var(--ember); }

/* ============ Pipeline Financier et Synthèse Prévisionnelle ============ */
.pipeline-summary{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.pipeline-card{
  background: #FFFFFF; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 3px rgba(28,24,21,0.03);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pipeline-card:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.pipeline-card-label{ font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.pipeline-card-val{ font-size: 1.45rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.pipeline-card-val.is-ember{ color: var(--ember); }
.pipeline-card-val.is-ok{ color: #0d7a46; }

@media (max-width: 640px){
  .pipeline-summary{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
  .pipeline-card{ padding: 12px 14px; border-radius: 12px; }
  .pipeline-card:last-child{ grid-column: 1 / -1; }
  .pipeline-card-val{ font-size: 1.25rem; }
}

/* ============ Urgences et Badges de Chantier ============ */
.urgency-badge{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: all .15s ease;
  user-select: none;
}
.urgency-urgence{ background: #FDE8E8; color: #BC1C1C; border-color: rgba(188,28,28,0.3); }
.urgency-urgence:hover{ background: #FCD0D0; }
.urgency-normal{ background: #F0F4F8; color: #334155; border-color: rgba(51,65,85,0.2); }
.urgency-normal:hover{ background: #E2E8F0; }
.urgency-projet{ background: #F3E8FF; color: #6B21A8; border-color: rgba(107,33,168,0.25); }
.urgency-projet:hover{ background: #E9D5FF; }
.urgency-entretien{ background: #E6F4EA; color: #137333; border-color: rgba(19,115,51,0.25); }
.urgency-entretien:hover{ background: #CEEAD6; }

.btn-mini-ramonage{ background: #FEF3C7; color: #92400E; border-color: rgba(146,64,14,0.25); font-weight: 600; }
.btn-mini-ramonage:hover{ background: #FDE68A; border-color: #92400E; }

/* ============ Certificat de Ramonage ============ */
.ramonage-boite{ max-width: 620px; }
.ramonage-corps{ padding: 18px 22px 24px; overflow-y: auto; max-height: 76vh; }
.ram-mentions-box{
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 12px;
}
.ram-mentions-box strong{ color: #92400E; font-size: .82rem; }

/* ============ Cartes Devis Pro (Mobile) ============ */
@media (max-width: 640px){
  .devis-card{ padding: 14px; border-radius: 14px; }
  .devis-card-actions{
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px;
    width: 100%; margin-top: 12px;
  }
  .devis-card-actions .status-select{ grid-column: 1 / -1; height: 40px; }
  .devis-card-actions .btn-mini{
    height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: .78rem; padding: 0 8px;
  }
  .devis-card-actions .btn-mini-sms{ grid-column: 1; }
  .devis-card-actions .btn-mini-fiche{ grid-column: 2; }
  .devis-card-actions .btn-mini-ramonage{ grid-column: 1 / -1; }
  .devis-card-actions .followup-field{ grid-column: 1 / -1; width: 100%; }
  .devis-card-actions .followup-input{ width: 100%; height: 38px; }
  .snooze-chips{ grid-column: 1 / -1; justify-content: space-between; width: 100%; margin: 4px 0 0; }
  .snooze-chip{ flex: 1; text-align: center; height: 30px; line-height: 30px; }
}

/* ============ Mobile Action Bar (Public Site) ============ */
@media (max-width: 640px){
  
  
  .hero{ padding: 36px 0 28px; }
  .hero h1{ font-size: 2.15rem; line-height: 1.14; margin-bottom: 12px; }
  .hero-sub{ font-size: .94rem; line-height: 1.48; margin-bottom: 20px; }
  /* margin-block seulement : la regle plus haut sort l'element sur toute la
     largeur de l'ecran avec des marges laterales negatives, et un
     "margin: 0 auto" les effacait. L'element gardait width:100vw dans un
     parent plus etroit, donc debordait d'un cote — la scene 3D paraissait
     decalee au lieu d'etre centree. */
  .hero-mascot{ height: 160px; margin-block: 0 14px; }
}

/* ============ Reponses types du composeur ============ */
.repondre-modeles{ display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.repondre-modele{
  padding: 5px 11px; font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
  color: var(--ink-soft); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.repondre-modele:hover{ color: var(--ember); border-color: var(--ember); }

/* ============ Echeancier des ramonages ============ */
.ech-groupe{
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 10px; font-family: var(--font-sans);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ech-groupe:first-child{ margin-top: 6px; }
.ech-groupe::after{ content: ''; flex: 1; height: 1px; background: var(--border); }
.ech-groupe span{
  order: 1; letter-spacing: 0; font-size: .72rem; color: var(--ink-soft);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.ech-liste{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ech-ligne{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 12px 16px; background: #FFFFFF;
  border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px;
}
.ech-retard{ border-left-color: var(--ember); }
.ech-qui{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ech-qui strong{ color: var(--ink); font-weight: 700; font-size: .9rem; }
.ech-ville{ font-size: .78rem; color: var(--ink-faint); }
.ech-quand{ margin: 0; flex: 1; min-width: 200px; font-size: .8rem; color: var(--ink-soft); }
.ech-actions{ display: flex; gap: 6px; margin-left: auto; }
.ech-actions .btn-mini{ text-decoration: none; }

@media (max-width: 620px){
  .ech-ligne{ flex-direction: column; align-items: flex-start; }
  .ech-quand{ min-width: 0; }
  .ech-actions{ margin-left: 0; }
}

/* ============ Doublons de demandes ============ */
.doublons{
  margin: 0 0 14px; background: var(--ember-pale);
  border: 1px solid rgba(128, 25, 19, .18); border-radius: 10px; overflow: hidden;
}
.doublons-tete{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 16px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: .85rem; font-weight: 600;
  color: var(--ember-pale-ink); text-align: left;
}
.doublons-chevron{ transition: transform .15s ease; font-size: .8rem; }
.doublons-tete.est-ouvert .doublons-chevron{ transform: rotate(180deg); }
#doublonsListe{ padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.doublon-paire{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
}
.doublon-quoi{ margin: 0 0 8px; font-size: .82rem; color: var(--ink-soft); }
.doublon-quoi strong{ color: var(--ink); }
.doublon-ligne{
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; margin-top: 4px; background: var(--surface-alt);
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  font-family: var(--font-sans); font-size: .82rem; color: var(--ink); text-align: left;
}
.doublon-ligne:hover{ border-color: var(--border); }
.doublon-service{ flex: 1; }
.doublon-ligne time{ color: var(--ink-faint); font-size: .76rem; white-space: nowrap; }

/* ============ Transitions entre les pages ============ */
/* Navigation native : le navigateur fond l'ancienne page dans la nouvelle au
   lieu du flash blanc. Ignore silencieusement la ou ce n'est pas supporte. */
@view-transition { navigation: auto; }

::view-transition-old(root){ animation: vt-sortie .18s ease-in both; }
::view-transition-new(root){ animation: vt-entree .26s cubic-bezier(.22,1,.36,1) both; }
@keyframes vt-sortie{ to{ opacity: 0; } }
@keyframes vt-entree{ from{ opacity: 0; transform: translateY(6px); } }

/* L'en-tete n'est volontairement PAS nomme pour les transitions : un element
   nomme est extrait du flux le temps de la bascule, et l'ancien coexiste avec
   le nouveau. Sur un en-tete colle en haut, cela se voit comme un texte
   dedouble. Le fondu simple de la page suffit. */

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation: none; }
}

/* ============ Installation de l'application ============ */
.pwa-bandeau{
  position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px;
  max-width: 470px; margin-inline: auto;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 12px 34px rgba(28,24,21,.16);
  opacity: 0; transform: translateY(14px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.22,1,.36,1);
}
.pwa-bandeau.pwa-visible{ opacity: 1; transform: none; }
.pwa-bandeau img{ border-radius: 10px; flex: 0 0 auto; }
.pwa-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-txt strong{ font-size: .9rem; color: var(--ink); }
.pwa-txt span{ font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }
.pwa-btns{ display: flex; gap: 6px; flex: 0 0 auto; }
.pwa-bandeau button{
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--ink-soft);
}
.pwa-bandeau .pwa-oui{ background: var(--ember); border-color: var(--ember); color: #fff; }

@media (max-width: 560px){
  .pwa-bandeau{ flex-wrap: wrap; }
  .pwa-btns{ width: 100%; }
  .pwa-bandeau button{ flex: 1; }
}

/* ============ Etat du reseau ============ */
.pwa-reseau{
  position: fixed; z-index: 95; left: 50%; top: 14px; transform: translate(-50%, -140%);
  padding: 9px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-sans); font-size: .82rem; font-weight: 500;
  box-shadow: 0 6px 20px rgba(28,24,21,.2);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  max-width: calc(100vw - 32px); text-align: center;
}
.pwa-reseau.pwa-visible{ transform: translate(-50%, 0); }
.pwa-reseau-ok{ background: var(--ok); }

/* ============ Bascule liste / tableau ============ */
.vue-bascule{ display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; }
.vue-btn{
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  padding: 6px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--ink-soft);
}
.vue-btn.active{ background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28,24,21,.08); }

/* ============ Tableau des demandes ============ */
#devisKanban{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kb-col{ background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.kb-tete{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.kb-tete h3{
  margin: 0; font-family: var(--font-sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.kb-n{
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.kb-pile{ display: flex; flex-direction: column; gap: 8px; min-height: 90px; border-radius: 8px; }
.kb-pile.kb-survol{ background: var(--ember-pale); outline: 2px dashed var(--ember); outline-offset: 2px; }
.kb-vide{ margin: 0; padding: 22px 10px; text-align: center; font-size: .8rem; color: var(--ink-faint); }

.kb-carte{
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: 9px;
  padding: 11px 13px; cursor: grab; display: flex; flex-direction: column; gap: 5px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.kb-carte:hover{ box-shadow: 0 3px 10px rgba(28,24,21,.07); }
.kb-carte:focus-visible{ outline: 2px solid var(--ember); outline-offset: 2px; }
.kb-carte.kb-pris{ opacity: .45; cursor: grabbing; }
.kb-urgent{ border-left-color: var(--ember); }
.kb-nom{ font-family: var(--font-sans); font-weight: 700; font-size: .88rem; color: var(--ink); }
.kb-meta{ display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .78rem; color: var(--ink-soft); }
.kb-pied{ display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .74rem; color: var(--ink-faint); }
.kb-tel{ color: var(--ember); text-decoration: none; font-weight: 600; white-space: nowrap; }

@media (max-width: 860px){ #devisKanban{ grid-template-columns: 1fr; } }

/* ============ Annulation ============ */
.annul{
  position: fixed; z-index: 130; left: 50%; bottom: 22px;
  transform: translate(-50%, 130%);
  display: flex; align-items: center; gap: 18px;
  padding: 13px 15px 13px 19px; border-radius: 12px;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 12px 34px rgba(28,24,21,.3);
  max-width: calc(100vw - 32px);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.annul.annul-visible{ transform: translate(-50%, 0); }
.annul-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.annul-txt strong{ font-family: var(--font-sans); font-size: .88rem; font-weight: 600; }
.annul-txt span{ font-size: .76rem; opacity: .72; }
.annul-btn{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.3); color: var(--bg);
}
.annul-btn:hover{ background: rgba(255,255,255,.12); }
.annul-btn kbd{
  font-family: var(--font-sans); font-size: .66rem; opacity: .6;
  border: 1px solid rgba(255,255,255,.28); border-radius: 4px; padding: 0 4px;
}
@media (max-width: 520px){ .annul-btn kbd{ display: none; } }

/* ============ Estimation en direct sur le formulaire ============ */
.estim-live{
  margin: -4px 0 18px; padding: 15px 17px;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-left: 3px solid var(--ember); border-radius: 10px;
  animation: estim-apparait .3s cubic-bezier(.22,1,.36,1);
}
@keyframes estim-apparait{ from{ opacity: 0; transform: translateY(-5px); } }
.estim-titre{ margin: 0 0 10px; font-family: var(--font-sans); font-size: .95rem; color: var(--ink); }
.estim-titre strong{ font-size: 1.22rem; font-weight: 800; color: var(--ember); }
.estim-lignes{ list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.estim-lignes li{
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: .84rem; color: var(--ink-soft);
  padding-bottom: 5px; border-bottom: 1px dotted var(--border);
}
.estim-lignes li:last-child{ border-bottom: 0; padding-bottom: 0; }
.estim-lignes b{ font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.estim-note{ margin: 0; font-size: .78rem; line-height: 1.55; color: var(--ink-faint); }
.estim-note a{ color: var(--ember); font-weight: 600; }

/* ============ Zone d'intervention sur le formulaire ============ */
.zone-live{
  margin: -6px 0 16px; padding: 10px 14px; border-radius: 8px;
  font-size: .83rem; line-height: 1.5;
  animation: estim-apparait .3s cubic-bezier(.22,1,.36,1);
}
.zone-ok{ background: var(--ok-pale); color: var(--ok); border: 1px solid rgba(47,107,60,.22); font-weight: 600; }
.zone-hors{ background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border); }

/* ============ Brouillon retrouve ============ */
.brouillon-avis{
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 11px 15px;
  background: var(--surface-alt); border: 1px dashed var(--border); border-radius: 9px;
  font-size: .83rem; color: var(--ink-soft);
}
.brouillon-avis button{
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px; cursor: pointer;
}
.brouillon-avis button:hover{ color: var(--ember); border-color: var(--ember); }

@media (prefers-reduced-motion: reduce){
  .estim-live, .zone-live{ animation: none; }
}

/* ============ Alertes de nouvelles demandes ============ */
.alerte-btn{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; font-family: var(--font-sans); font-size: .82rem; font-weight: 500;
  color: var(--ink-soft); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.alerte-btn:hover{ color: var(--ink); border-color: var(--ink-faint); }
.alerte-btn-on{ color: var(--ok); border-color: var(--ok); background: var(--ok-pale); font-weight: 600; }
@media (max-width: 900px){ .alerte-btn span{ display: none; } }

.alerte{
  position: fixed; z-index: 125; right: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px 13px 17px; max-width: min(400px, calc(100vw - 36px));
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--ember); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(28,24,21,.16);
  transform: translateY(130%); opacity: 0;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.alerte.alerte-visible{ transform: none; opacity: 1; }
.alerte-pastille{
  width: 8px; height: 8px; border-radius: 50%; background: var(--ember); flex: 0 0 auto;
  animation: alerte-pulse 2s ease-in-out infinite;
}
@keyframes alerte-pulse{ 50%{ opacity: .3; } }
.alerte-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.alerte-txt strong{ font-family: var(--font-sans); font-size: .87rem; color: var(--ink); }
.alerte-txt span{
  font-size: .78rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alerte-voir{
  flex: 0 0 auto; font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: var(--ember); border: 1px solid var(--ember); color: #fff;
}
.alerte-fermer{
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--ink-faint); padding: 0 2px;
}
@media (prefers-reduced-motion: reduce){
  .alerte{ transition: opacity .2s ease; transform: none; }
  .alerte-pastille{ animation: none; }
}

/* ============ Page zone d'intervention ============ */
.zi-hero{ padding: 68px 0 44px; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.zi-hero h1{ margin: 10px 0 18px; font-size: clamp(1.9rem, 5vw, 2.9rem); letter-spacing: -.025em; }
.zi-intro{ max-width: 62ch; font-size: 1.03rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 24px; }
.zi-intro strong{ color: var(--ink); }
.zi-actions{ display: flex; flex-wrap: wrap; gap: 10px; }

.zi-listes{ padding: 52px 0 64px; }
.zi-colonnes{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
.zi-bloc h2{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin: 0 0 4px; font-size: 1.35rem; letter-spacing: -.02em;
}
.zi-compte{
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px;
}
.zi-agence{ margin: 0 0 18px; font-size: .86rem; color: var(--ink-faint); }

.zi-grille{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.zi-grille li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 13px; background: var(--surface); font-size: .87rem;
}
.zi-nom{ color: var(--ink); }
.zi-cp{ font-size: .76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.zi-pied{ margin-top: 58px; padding-top: 40px; border-top: 1px solid var(--border); }
.zi-pied h2{ margin: 0 0 22px; font-size: 1.3rem; letter-spacing: -.02em; }
.zi-services{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.zi-services a{
  display: flex; flex-direction: column; gap: 5px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: 10px;
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.zi-services a:hover{ border-left-color: var(--ember); box-shadow: 0 3px 12px rgba(28,24,21,.06); }
.zi-services strong{ font-family: var(--font-sans); font-size: .95rem; color: var(--ink); }
.zi-services span{ font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 780px){
  .zi-colonnes{ grid-template-columns: 1fr; gap: 36px; }
  .zi-hero{ padding: 46px 0 34px; }
}

/* ============ Sommaire d'article ============ */
.article-sommaire{
  margin: 26px 0 34px; padding: 16px 20px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px;
}
.article-sommaire-titre{
  margin: 0 0 9px; font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.article-sommaire ol{ margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.article-sommaire li{ font-size: .88rem; }
.article-sommaire a{ color: var(--ink-soft); text-decoration: none; }
.article-sommaire a:hover{ color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* ============ Outils d'aide au visiteur ============ */
.outils{ padding: 62px 0; background: var(--surface-alt); border-block: 1px solid var(--border); }
.outils-grille{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.outil{ background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.outil h3{ margin: 0 0 6px; font-size: 1.08rem; letter-spacing: -.015em; }
.outil-sous{ margin: 0 0 16px; font-size: .86rem; color: var(--ink-soft); }

.aide-q{ margin: 14px 0 12px; font-size: .92rem; color: var(--ink); font-weight: 600; }
.aide-choix{ display: flex; flex-direction: column; gap: 7px; }
.aide-choix button{
  text-align: left; font-family: var(--font-sans); font-size: .87rem; color: var(--ink);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 9px; padding: 11px 14px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.aide-choix button:hover{ border-color: var(--ember); color: var(--ember); }
.aide-retour{
  margin-top: 12px; font-family: var(--font-sans); font-size: .8rem; color: var(--ink-faint);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.aide-verdict{ margin: 14px 0 8px; font-size: .95rem; }
.aide-verdict strong{ color: var(--ember); }
.aide-note{ margin: 0 0 16px; font-size: .87rem; color: var(--ink-soft); }
.aide-note strong{ color: var(--ink); font-size: 1.05rem; }
.aide-actions{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.outil-champ{ display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.outil-champ span{ font-family: var(--font-sans); font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.outil-champ input{
  font-family: var(--font-sans); font-size: .92rem; color: var(--ink);
  padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
}
.echeance-reponse{ padding: 13px 16px; border-radius: 9px; font-size: .87rem; line-height: 1.55; }
.echeance-retard{ background: var(--ember-pale); color: var(--ember-pale-ink); border: 1px solid rgba(128,25,19,.2); }
.echeance-ok{ background: var(--ok-pale); color: var(--ok); border: 1px solid rgba(47,107,60,.2); }
.echeance-reponse a{ color: inherit; font-weight: 700; }
.outil-pied{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.outil-lien{
  font-family: var(--font-sans); font-size: .84rem; font-weight: 600; color: var(--ember);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 760px){ .outils-grille{ grid-template-columns: 1fr; } }

/* Impression : le visiteur repart avec son estimation, sans le decor. */
@media print{
  .site-header, .mobile-nav, footer, .outils, .pwa-bandeau,
  .nav-desktop, .header-actions{ display: none !important; }
  .estim-live{ border: 1px solid #000; break-inside: avoid; }
  body{ background: #fff; color: #000; }
}

/* ============ Urgences reperees ============ */
.urgences{ border-left: 3px solid var(--ember); }
#urgencesListe{ display: flex; flex-direction: column; gap: 7px; }
.urg-ligne{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%;
  padding: 11px 14px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--ember); border-radius: 9px;
  font-family: var(--font-sans); font-size: .86rem;
}
.urg-ligne:hover{ box-shadow: 0 2px 9px rgba(28,24,21,.06); }
.urg-motifs{ display: flex; gap: 5px; flex-wrap: wrap; }
.urg-tag{
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ember); background: var(--ember-pale); border-radius: 4px; padding: 2px 7px;
}
.urg-nom{ font-weight: 700; color: var(--ink); flex: 1; min-width: 120px; }
.urg-quand{ font-size: .78rem; color: var(--ink-faint); }

/* ============ Calendrier ============ */
.cal-nav{ display: flex; align-items: center; gap: 10px; }
.cal-titre{ font-family: var(--font-sans); font-size: .88rem; font-weight: 600; min-width: 130px; text-align: center; }
.cal-grille{
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.cal-jour-titre{
  background: var(--surface-alt); padding: 7px 0; text-align: center;
  font-family: var(--font-sans); font-size: .7rem; font-weight: 700; color: var(--ink-faint);
}
.cal-vide{ background: var(--surface-alt); }
.cal-case{ background: var(--surface); min-height: 74px; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; }
.cal-num{ font-family: var(--font-sans); font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cal-auj .cal-num{
  color: #fff; background: var(--ember); border-radius: 999px;
  width: 19px; height: 19px; display: grid; place-items: center;
}
.cal-plein{ background: var(--ember-pale); }
.cal-rdv{
  font-family: var(--font-sans); font-size: .7rem; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink);
}
.cal-rdv:hover{ border-color: var(--ember); color: var(--ember); }
.cal-plus{ font-size: .66rem; color: var(--ink-faint); }
@media (max-width: 700px){ .cal-case{ min-height: 56px; } .cal-rdv{ font-size: .62rem; } }

/* ============ Comparaison mensuelle ============ */
.comp-grille{ display: flex; flex-direction: column; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.comp-ligne{
  display: grid; grid-template-columns: 1.4fr auto auto 1.3fr; gap: 8px 16px;
  align-items: baseline; padding: 13px 16px; background: var(--surface); font-size: .86rem;
}
.comp-label{ font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
.comp-val{ font-family: var(--font-sans); font-size: 1.3rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.comp-ecart{ font-family: var(--font-sans); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.comp-hausse{ color: var(--ok); }
.comp-baisse{ color: var(--ember); }
.comp-plat{ color: var(--ink-faint); }
.comp-ref{ font-size: .78rem; color: var(--ink-faint); text-align: right; }
@media (max-width: 660px){
  .comp-ligne{ grid-template-columns: 1fr auto; }
  .comp-ref{ grid-column: 1 / -1; text-align: left; }
}

/* ============ Filtres enregistres ============ */
.fs-barre{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fs-label{ font-family: var(--font-sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fs-liste{ display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.fs-vide{ font-size: .8rem; color: var(--ink-faint); }
.fs-puce{ display: inline-flex; align-items: stretch; border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; background: var(--surface-alt); }
.fs-puce button{ font-family: var(--font-sans); font-size: .78rem; color: var(--ink-soft);
  background: none; border: 0; padding: 5px 11px; cursor: pointer; }
.fs-puce button:hover{ color: var(--ember); }
.fs-x{ border-left: 1px solid var(--border) !important; padding: 5px 8px !important; }

/* ============ Journal local ============ */
.jr-liste{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.jr-liste li{ display: flex; gap: 14px; padding: 9px 14px; background: var(--surface); font-size: .84rem; }
.jr-liste time{ color: var(--ink-faint); font-size: .76rem; min-width: 118px; }
.jr-liste span{ color: var(--ink); }

/* ============ Espace client sur petit ecran ============ */
/* Les blocs gardaient leurs paddings de bureau — 30 a 32 px de chaque cote —
   ce qui ne laissait que 260 px de contenu utile sur un telephone de 360. */
@media (max-width: 560px){
  .account-banner{
    padding: 20px 18px; flex-direction: column; align-items: flex-start; gap: 14px;
  }
  .account-banner-actions{ width: 100%; }
  .account-banner-actions > *{ flex: 1; justify-content: center; text-align: center; }
  .account-banner-email{ word-break: break-all; }

  .account-card{ padding: 20px 18px; }
  .account-empty{ padding: 22px 18px; }
  .account-verify{ padding: 30px 18px; }
  .account-split-benefits, .account-split-form{ padding: 26px 18px; }

  /* Une adresse email longue ne doit pas pousser la page en largeur. */
  .account-alert, .account-explain, .account-help{ word-break: break-word; }

  /* Les boutons cote a cote deviennent illisibles sous 360 px. */
  .account-actions-row > .btn,
  .account-alert-actions > .btn{ flex: 1 1 100%; justify-content: center; }

  .account-services-grid{ grid-template-columns: 1fr; }
  .account-service-card{ aspect-ratio: 16/9; }

  .account-consent-row{ gap: 12px; }
  .account-section-title{ font-size: 1.05rem; }
}

/* Garde-fou : aucune page ne doit defiler lateralement sur telephone. */
@media (max-width: 640px){
  html, body{ overflow-x: hidden; }
}

/* ============ Garde-fous de largeur ============ */
/* Un seul element plus large que l'ecran suffit a forcer le navigateur a
   dezoomer toute la page. Ces regles empechent le cas de se produire plutot
   que de le masquer apres coup. */
.admin-main, .admin-tab-content, .admin-section{ min-width: 0; }
.admin-section > *, .admin-tab-content > *{ min-width: 0; }

/* Un long email, un nom de fichier ou une URL ne doivent jamais pousser
   leur conteneur. */
.devis-card, .client-card, .msg-carte, .kb-carte, .ech-ligne,
.agent-ligne, .urg-ligne, .doublon-paire{ overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 900px){
  .admin-main{ padding: 20px 16px 70px; }
  .admin-section{ padding-inline: 0; }
}

@media (max-width: 640px){
  /* Sept colonnes sur 360 px donnent des cases de 45 px : lisible pour des
     numeros, pas pour des noms. Le calendrier passe en liste. */
  .cal-grille{ grid-template-columns: minmax(0, 1fr); }
  .cal-jour-titre{ display: none; }
  .cal-case{ flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 0; padding: 8px 10px; }
  .cal-case:not(.cal-plein):not(.cal-auj){ display: none; }
  .cal-num{ min-width: 22px; font-weight: 700; }
  .cal-rdv{ flex: 1 1 auto; max-width: 100%; }
  .cal-vide{ display: none; }

  .comp-val{ font-size: 1.1rem; }
  .admin-stats{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .urg-ligne{ gap: 6px 10px; }
  .urg-nom{ flex: 1 1 100%; min-width: 0; }
}

/* Les tableaux larges defilent dans leur propre cadre, jamais avec la page. */
.scroll-x{ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ============ Section FAQ des pages metier ============ */
/* Reprend le fond alterne des autres sections : sans cela le bloc se fondait
   dans le contenu precedent, sans separation ni respiration. */
.faq-section{ background: var(--surface-alt); }
.faq-section .faq-list{ max-width: 780px; }
.aide-corps{ min-height: 190px; }

/* ── Panneau de devis (admin) ──────────────────────────────────────────────
   Un panneau lateral, pas une fenetre centree : pendant qu'on chiffre, la
   demande du client reste lisible derriere. C'est ce qui evite les
   allers-retours quand un detail manque — une hauteur de conduit, un etage.

   Sur telephone il prend tout l'ecran : a cette taille, un panneau de cote
   laisse deux centimetres de contenu inutilisable a gauche. */
.panneau-overlay{
  position: fixed; inset: 0; z-index: 120;
  background: rgba(23,19,15,0.42);
  display: flex; justify-content: flex-end;
  animation: panneauFond .18s ease-out;
}
@keyframes panneauFond{ from{ opacity: 0 } to{ opacity: 1 } }

.panneau{
  width: min(560px, 100%); height: 100%;
  background: var(--surface);
  display: flex; flex-direction: column;
  box-shadow: -18px 0 48px rgba(23,19,15,0.16);
  animation: panneauEntre .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes panneauEntre{ from{ transform: translateX(28px); opacity: .6 } to{ transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce){
  .panneau-overlay, .panneau{ animation: none }
}

.panneau-tete{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border);
}
.panneau-tete h2{ margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; }
.panneau-ref{ margin: 3px 0 0; font-size: 0.8rem; color: var(--ink-soft); }

.panneau-corps{ flex: 1; overflow-y: auto; padding: 18px 22px 8px; }
.panneau-pied{
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--border); background: var(--bg);
}

.devis-bloc{ margin: 0 0 22px; }
.devis-bloc h3{
  margin: 0 0 10px; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.devis-bloc-tete{ display: flex; align-items: baseline; justify-content: space-between; }
.devis-compte{ font-size: 0.78rem; color: var(--ink-faint); }

.devis-client-grille{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.devis-client-grille label{
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.78rem; color: var(--ink-soft);
}
.devis-client-grille .devis-large{ grid-column: 1 / -1; }
.devis-client-grille input,
.devis-catalogue{
  font: inherit; font-size: 0.9rem; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); width: 100%;
}
.devis-client-grille input:focus, .devis-catalogue:focus,
.devis-ligne input:focus{
  outline: 2px solid var(--ember); outline-offset: 1px; border-color: transparent;
}

.devis-lignes{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.devis-ligne{ display: grid; grid-template-columns: 1fr 108px 34px; gap: 7px; align-items: center; }
.devis-ligne input{
  font: inherit; font-size: 0.88rem; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); width: 100%;
}
.devis-ligne-prix{ text-align: right; }
.devis-ligne-suppr{
  border: 0; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1;
  color: var(--ink-faint); border-radius: 8px; padding: 4px;
}
.devis-ligne-suppr:hover{ color: var(--ember); background: var(--ember-pale); }
.devis-vide{
  margin: 0 0 10px; padding: 16px; text-align: center; font-size: 0.86rem;
  color: var(--ink-faint); border: 1px dashed var(--border); border-radius: 10px;
}
.devis-grille-maj{ margin: 6px 0 0; font-size: 0.74rem; color: var(--ink-faint); }

.devis-bloc-total{
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 16px; background: var(--surface-alt); border-radius: 10px;
  font-size: 0.85rem; color: var(--ink-soft);
}
.devis-bloc-total strong{ font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }

.devis-ferme{
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 14px;
}
.devis-ferme input{ margin-top: 2px; }

.devis-note{
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; font-size: 0.85rem;
  background: var(--surface-alt); color: var(--ink);
}
.devis-note-ok{ background: var(--ok-pale); color: var(--ok); }
.devis-note-erreur{ background: var(--ember-pale); color: var(--ember-pale-ink); }

/* Le fond ne defile plus quand le panneau est ouvert : sinon on perd sa place
   dans la liste des demandes en refermant. */
body.panneau-ouvert{ overflow: hidden; }

@media (max-width: 620px){
  .panneau{ width: 100%; }
  .devis-client-grille{ grid-template-columns: 1fr; }
  .devis-ligne{ grid-template-columns: 1fr 92px 30px; }
  .panneau-pied{ justify-content: stretch; }
  .panneau-pied .btn{ flex: 1; }
}

/* La feuille de style du site donne `section{ padding: 88px 0 }`. Dans le
   panneau, chaque bloc heritait donc de 176 px de vide : le formulaire tenait
   sur trois ecrans au lieu d'un. */
.panneau section.devis-bloc{ padding: 0; }

/* ── Le devis, vu par le client (mon-compte) ───────────────────────────────
   Le client recevait un montant par email et n'avait aucun endroit ou le
   relire : il rappelait pour redemander « c'etait combien, deja ? ». */
.client-devis{
  margin: 14px 0 4px; padding: 14px 16px;
  background: var(--surface-alt); border-radius: 10px;
}
.client-devis-tete{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; font-size: 0.92rem;
}
.client-devis-lignes{ list-style: none; margin: 0; padding: 0; }
.client-devis-lignes li{
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 0.88rem; color: var(--ink);
}
.client-devis-lignes li:last-child{ border-bottom: 0; }
.client-devis-total{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--ink);
  font-size: 0.88rem; color: var(--ink-soft);
}
.client-devis-total strong{ font-size: 1.15rem; color: var(--ink); }
.client-devis-note{
  margin: 10px 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--ink-soft);
}
@media (max-width: 520px){
  .client-devis-tete{ flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Une proposition de l'assistant n'est pas un devis : elle se distingue d'un
   coup d'oeil, et elle dit ce qu'il reste a faire. */
.devis-brouillon{
  margin: 10px 0 0; padding: 10px 12px;
  background: var(--ember-pale); color: var(--ember-pale-ink);
  border-radius: 8px; font-size: 0.84rem; line-height: 1.55;
}

/* ── Les assistants, depuis l'espace de gestion ────────────────────────────
   Chaque personne a le sien. Les adresses trainaient dans un message : les
   poser ici, c'est une question de moins a chaque fois. */
.assistants-grille{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
}
.assistant-carte{
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.assistant-carte:hover{ border-color: var(--ember); transform: translateY(-1px); }
.assistant-carte strong{ font-size: 0.95rem; }
.assistant-carte span{ font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }

/* Un bloc de chiffres qu'on ouvre quand on veut des chiffres, plutot que
   1 200 px a faire defiler chaque matin pour atteindre le bas de la page. */
.admin-repli > summary{
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
}
.admin-repli > summary::-webkit-details-marker{ display: none; }
.admin-repli > summary h2{ display: inline; margin: 0; }
.admin-repli > summary::after{
  content: '▾'; color: var(--ink-faint); font-size: 0.9rem; transition: transform .15s ease;
}
.admin-repli[open] > summary::after{ transform: rotate(180deg); }
.admin-repli h3{ margin: 0; font-size: 0.95rem; }

/* ── Apercu des demandes sur le tableau de bord ────────────────────────────
   Une ligne par demande, avec le geste le plus frequent au bout. Cinq cartes
   prenaient 550 px et ne permettaient aucune action. */
.apercu-demandes{ list-style: none; margin: 0; padding: 0; }
.apercu-demande{
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.apercu-demande:last-child{ border-bottom: 0; }
.apercu-demande-qui{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apercu-demande-qui strong{ font-size: 0.93rem; }
.apercu-demande-qui span{
  font-size: 0.8rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apercu-demande-date{ font-size: 0.8rem; color: var(--ink-faint); white-space: nowrap; }
/* La pastille des non-lues : la meme convention que dans la liste complete. */
.apercu-demande.est-nouvelle .apercu-demande-qui strong::before{
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--ember); vertical-align: middle;
}
@media (max-width: 680px){
  .apercu-demande{ grid-template-columns: 1fr auto; row-gap: 8px; }
  .apercu-demande .btn-mini{ grid-column: 1 / -1; }
}

/* La sante du systeme prenait une bande entiere pour une phrase rassurante.
   Elle reste visible — c'est elle qui previent qu'une demande n'arrive plus —
   mais sur une ligne, au-dessus des compteurs, pas dans un bloc. */
.health-card{
  padding: 10px 14px; margin-bottom: 14px;
  border-left-width: 3px; border-radius: 8px;
  align-items: center; gap: 10px;
}
.health-card .health-title{
  display: inline; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 8px 0 0;
}
.health-card .health-line{ display: inline; margin: 0; font-size: 0.87rem; }
.health-card .health-icon svg{ width: 16px; height: 16px; }

/* ── Le menu des actions secondaires d'une demande ─────────────────────────
   Douze boutons alignes sur une carte, c'est douze decisions a chaque
   demande. Ce qu'on fait vingt fois par jour reste visible ; le reste attend
   ici. */
.carte-plus{ position: relative; display: inline-block; }
.carte-plus > summary{
  list-style: none; cursor: pointer; user-select: none;
  padding: 5px 12px; line-height: 1.2; letter-spacing: 0.08em;
}
.carte-plus > summary::-webkit-details-marker{ display: none; }
.carte-plus[open] > summary{ background: var(--surface-alt); }
.carte-plus-menu{
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; gap: 2px; min-width: 190px;
  padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(23,19,15,0.13);
}
.carte-plus-menu .btn-mini{
  width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px;
}
.carte-plus-menu .btn-mini:hover:not(:disabled){ background: var(--surface-alt); }
.carte-plus-menu .btn-mini:disabled{ opacity: .45; cursor: not-allowed; }

/* Pour qui est ce message : le rappeler evite d'envoyer le bon texte a la
   mauvaise personne quand on a trois fenetres ouvertes. */
.reponses-dest{
  margin: 0 0 14px; padding: 8px 12px;
  background: var(--surface-alt); border-radius: 8px;
  font-size: 0.85rem; color: var(--ink-soft);
}