/*
Theme Name: Drone-Presta
Theme URI: https://drone-presta.fr
Author: julien
Author URI: https://drone-presta.fr
Description: Thème WordPress personnalisé pour Drone-Presta
Version: 1.0
Text Domain: drone-presta
Tags: nettoyage, demoussage, drone
*/

/* ============================================================
   TABLE DES MATIÈRES
   ============================================================
   00. Imports Google Fonts
   01. Variables CSS & Reset
   02. Typographie de base
   03. Utilitaires & helpers
   04. Navigation
   05. Breadcrumb
   06. Hero — Homepage
   07. Hero — Page service
   08. Hero — Blog liste
   09. Hero — Article
   10. Stats bar
   11. Section label
   12. Services grid
   13. Expertise / Avantages
   14. Processus
   15. CTA central
   16. Blog — Grille liste
   17. Blog — Filtres & pagination
   18. Blog — Sidebar & widgets
   19. Article — Corps typographique
   20. Article — Composants éditoriaux
   21. Article — Navigation & related
   22. Page devis — Layout
   23. Page devis — Formulaire
   24. Footer
   25. Animations & scroll reveal
   26. Responsive
   --
   COMPLÉMENT — Sélecteurs spécifiques pages
   (Homepage · Service · Blog · Article · Devis)
   ~900 sélecteurs · 5 pages couvertes
   ============================================================ */


/* ============================================================
   00. IMPORTS GOOGLE FONTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Outfit:wght@200;300;400;500;600;700&display=swap');


/* ============================================================
   01. VARIABLES CSS & RESET
   ============================================================ */

:root {
  /* — Palette verte — */
  --forest:       #1e3a2f;
  --forest-mid:   #2a4d3e;
  --moss:         #3d6b50;
  --sage:         #6a9b7e;
  --sage-light:   #d4e9e0;
  --forest-pale:  #eef6f2;

  /* — Palette marron / terre — */
  --earth:        #5c3d2e;
  --bark:         #7a5240;
  --sand:         #c8a882;
  --cream:        #f4ede0;
  --ivory:        #faf7f2;

  /* — Neutres — */
  --white:        #ffffff;
  --text:         #2c1f14;
  --muted:        #8a7060;
  --light-muted:  #b8a898;
  --border:       rgba(92, 61, 46, 0.13);
  --border-mid:   rgba(92, 61, 46, 0.22);

  /* — Typographie — */
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-body:    'Outfit', sans-serif;

  /* — Layout — */
  --max-w:        1160px;
  --nav-h:        72px;
  --radius-sm:    .35rem;
  --radius-md:    .65rem;
  --radius-lg:    .85rem;
  --radius-xl:    1.2rem;

  /* — Transitions — */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:     cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ivory);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}


/* ============================================================
   02. TYPOGRAPHIE DE BASE
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--text);
}

h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
h4 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }

p { margin-bottom: 1.2rem; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }
strong { font-weight: 600; }

/* Classes typographiques utilitaires */
.text-serif   { font-family: var(--font-serif); }
.text-sand    { color: var(--sand); }
.text-moss    { color: var(--moss); }
.text-earth   { color: var(--earth); }
.text-muted   { color: var(--muted); }
.text-cream   { color: var(--cream); }
.italic       { font-style: italic; }
.font-300     { font-weight: 300; }
.font-500     { font-weight: 500; }
.font-600     { font-weight: 600; }
.font-900     { font-weight: 900; }


/* ============================================================
   03. UTILITAIRES & HELPERS
   ============================================================ */

.inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 3.5rem;
}

.section-py   { padding-block: 7rem; }
.section-py-sm { padding-block: 4rem; }
.section-py-lg { padding-block: 8rem; }

/* Fond couleurs */
.bg-forest  { background: var(--forest); }
.bg-forest-mid { background: var(--forest-mid); }
.bg-ivory   { background: var(--ivory); }
.bg-cream   { background: var(--cream); }
.bg-white   { background: var(--white); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .85rem 2.2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  transition: background .2s var(--ease-std),
              transform .15s var(--ease-std),
              box-shadow .2s var(--ease-std);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary > a {
  background: var(--sand);
  color: var(--forest);
  box-shadow: 0 4px 22px rgba(200, 168, 130, 0.25);
  padding: .9rem 2.2rem;
  border-radius: .4rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 22px rgba(200,168,130,0.25);
}
.btn-primary:hover > a {
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(200, 168, 130, 0.35);
}

.btn-forest {
  background: var(--forest);
  color: var(--cream);
  box-shadow: 0 4px 22px rgba(30, 58, 47, 0.18);
}
.btn-forest:hover {
  background: var(--forest-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(30, 58, 47, 0.26);
}

.btn-ghost > a {
  background: transparent;
  color: rgba(244, 237, 224, 0.65);
  font-size: .9rem;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s;
}
.btn-ghost:hover > a {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-sm {
  padding: .5rem 1.2rem;
  font-size: .84rem;
}

.btn-full { width: 100%; }

/* Pill / badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .8rem;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.badge-sand {
  background: var(--sand);
  color: var(--forest);
}
.badge-forest {
  background: rgba(200, 168, 130, 0.1);
  border: 1px solid rgba(200, 168, 130, 0.22);
  color: var(--sage);
}
.badge-moss {
  background: rgba(61, 107, 80, 0.08);
  border: 1px solid rgba(61, 107, 80, 0.15);
  color: var(--moss);
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 2.5s ease infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}

/* Tags cliquables */
.tag-chip {
  display: inline-block;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .05em;
  padding: .28rem .7rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  transition: border-color .18s, color .18s, background .18s;
  cursor: pointer;
}
.tag-chip:hover {
  border-color: var(--moss);
  color: var(--moss);
  background: rgba(61, 107, 80, 0.05);
}

/* Visuels couleurs (placeholders avant photos) */
.vis-forest  { background: linear-gradient(135deg, #1a3528, #2a5a3f); }
.vis-sage    { background: linear-gradient(135deg, #2a5a3f, #3d6b50); }
.vis-earth   { background: linear-gradient(135deg, var(--earth), #7a4a2e); }
.vis-moss    { background: linear-gradient(135deg, #2d5240, var(--moss)); }
.vis-sand-bg { background: linear-gradient(135deg, #8c6840, var(--bark)); }
.vis-dark    { background: linear-gradient(135deg, #1a2e22, #0f1f17); }


/* ============================================================
   04. NAVIGATION
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 3.5rem;
  background: rgba(30, 58, 47, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: padding .3s var(--ease-std);
}
.site-nav.scrolled { padding-block: .75rem; }

.nav-links li {
  position: relative;
}

.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 330px;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  text-indent: 15px;
}

.nav-links .sub-menu li::before {
 content: "→";
 width: 10px;
 height: 5px;
 position: absolute;
 left: 0px;
 color: rgba(200, 168, 130, 0.65);
}

.nav-links .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}
.nav-logo-img {
  width: 38px; height: 38px;
  display: block; flex-shrink: 0;
}
.nav-logo-text {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--cream);
  letter-spacing: -.01em;
  line-height: 1;
}
.nav-logo-text span { font-style: italic; color: var(--sand); }

/* Liens */
.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
}
.nav-links a {
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(200, 168, 130, 0.65);
  text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"] { color: var(--cream); }

/* CTA nav */
.nav-cta {
  background: var(--sand);
  color: var(--forest);
  padding: .55rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .84rem;
  text-decoration: none;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--cream);
  transform: translateY(-1px);
}

/* Bouton retour (page devis) */
.nav-back {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 400;
  color: rgba(200, 168, 130, 0.6);
  text-decoration: none;
  letter-spacing: .06em;
  transition: color .2s;
}
.nav-back:hover { color: var(--cream); }

/* Décalage contenu sous nav fixe */
.nav-offset { padding-top: var(--nav-h); }


/* ============================================================
   05. BREADCRUMB
   ============================================================ */

.breadcrumb-bar {
  background: var(--forest);
  padding: .75rem 3.5rem;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.breadcrumb a,
.breadcrumb span {
  font-size: .75rem;
  color: rgba(200, 168, 130, 0.45);
  text-decoration: none;
  letter-spacing: .03em;
  transition: color .2s;
}
.breadcrumb a:hover    { color: var(--sand); }
.breadcrumb .sep       { color: rgba(200, 168, 130, 0.2); }
.breadcrumb .current   { color: rgba(200, 168, 130, 0.65); }


/* ============================================================
   06. HERO — HOMEPAGE
   ============================================================ */

.hero-home {
  min-height: 100vh;
  background: var(--forest);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-home::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 70% at 100% 60%, rgba(61, 107, 80, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 5%  20%, rgba(10, 25, 18, 0.5)  0%, transparent 50%);
  pointer-events: none;
}
.hero-home::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200, 168, 130, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 168, 130, 0.025) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}

.hero-home__left {
  padding: 5rem 4rem 5rem 3.5rem;
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-left: auto;
}

.hero-home__title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--cream);
  margin-bottom: 1.5rem;
}
.hero-home__title em {
  font-style: italic;
  color: var(--sand);
  display: block;
}

.hero-home__desc {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(244, 237, 224, 0.58);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 2.8rem;
}

.hero-home__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.hero-home__link {
  color: rgba(244, 237, 224, 0.6);
  font-size: .9rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s;
}
.hero-home__link::after { content: '→'; transition: transform .2s; }
.hero-home__link:hover  { color: var(--sand); }
.hero-home__link:hover::after { transform: translateX(4px); }

/* Mini-stats dans le hero */
.hero-mini-stats {
  display: flex;
  gap: 2.2rem;
  align-items: center;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-mini-stat__num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--sand);
  line-height: 1;
}
.hero-mini-stat__lbl {
  font-size: .68rem;
  color: rgba(200, 168, 130, 0.45);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .2rem;
}
.hero-mini-sep {
  width: 1px; height: 40px;
  background: rgba(255, 255, 255, 0.08);
}

/* Partie droite — visuel animé */
.hero-home__right {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
}
.hero-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200, 168, 130, 0.07);
  pointer-events: none;
}
.hero-drone {
  position: relative;
  z-index: 2;
  animation: float 6s ease-in-out infinite;
}
.hero-drone img {
  width: 180px; height: 180px;
  filter: drop-shadow(0 0 40px rgba(200, 168, 130, 0.2));
}
@keyframes float {
  0%, 100% { transform: translateY(0)     rotate(-1deg); }
  50%       { transform: translateY(-16px) rotate(1deg);  }
}

/* Anneaux de scan */
.scan-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(107, 184, 152, 0.15);
  animation: scan-pulse 3s ease-out infinite;
}
.scan-ring:nth-child(2) { animation-delay: 1s; }
.scan-ring:nth-child(3) { animation-delay: 2s; }
@keyframes scan-pulse {
  0%   { opacity: .6; transform: scale(.8); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* Cards flottantes */
.hero-float-card {
  position: absolute;
  z-index: 3;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: .8rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  animation: float2 7s ease-in-out infinite;
}
.hero-float-card:nth-child(2) { animation-duration: 8s;   animation-delay: .5s; }
.hero-float-card:nth-child(3) { animation-duration: 6.5s; animation-delay: 1s; }
@keyframes float2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.float-icon  { font-size: 1.2rem; }
.float-label { font-size: .65rem; color: rgba(200, 168, 130, 0.5); letter-spacing: .08em; text-transform: uppercase; }
.float-value { font-size: .85rem; font-weight: 500; color: var(--cream); }


/* ============================================================
   07. HERO — PAGE SERVICE
   ============================================================ */

.hero-service {
  background: var(--forest);
  padding: 5rem 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.hero-service::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(61, 107, 80, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(10, 25, 18, 0.5) 0%, transparent 50%);
  pointer-events: none;
}
.hero-service__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: end;
  position: relative;
  z-index: 1;
}
.hero-service__left  { padding-bottom: 4.5rem; }
.hero-service__title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--cream);
  margin-bottom: 1.4rem;
}
.hero-service__title em { font-style: italic; color: var(--sand); display: block; }
.hero-service__desc {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(244, 237, 224, 0.6);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 2.5rem;
}
.hero-service__actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* Stats flottantes hero service */
.hero-stat-pill {
  background: rgba(200, 168, 130, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 168, 130, 0.2);
  border-radius: var(--radius-md);
  padding: .7rem 1.2rem;
  text-align: center;
}
.hero-stat-pill__num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--sand);
  line-height: 1;
}
.hero-stat-pill__lbl {
  font-size: .65rem;
  color: rgba(244, 237, 224, 0.5);
  margin-top: .2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Visuel card hero service */
.hero-service__visual {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}
.hero-service__visual-card {
  width: 100%;
  background: var(--forest-mid);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  min-height: 380px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
}


/* ============================================================
   08. HERO — BLOG LISTE
   ============================================================ */

.hero-blog {
  background: var(--forest);
  padding: 8rem 3.5rem 5rem;
  position: relative;
  overflow: hidden;
}
.hero-blog::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200, 168, 130, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 168, 130, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-blog__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: end;
}
.hero-blog__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.4rem;
}
.hero-blog__eyebrow::before {
  content: '';
  width: 24px; height: 1.5px;
  background: var(--sage);
  display: block;
}
.hero-blog__title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--cream);
  margin-bottom: 1.2rem;
}
.hero-blog__title em { font-style: italic; color: var(--sand); }
.hero-blog__desc {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(244, 237, 224, 0.55);
  line-height: 1.75;
  max-width: 520px;
}

/* Stats sidebar hero blog */
.hero-blog__stats { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-end; }
.hero-blog-stat {
  text-align: right;
  padding: 1rem 1.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
}
.hero-blog-stat__n {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--sand);
  line-height: 1;
}
.hero-blog-stat__l {
  font-size: .65rem;
  color: rgba(244, 237, 224, 0.4);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .2rem;
}


/* ============================================================
   09. HERO — ARTICLE
   ============================================================ */

.reading-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--moss), var(--sand));
  transition: width .1s linear;
  pointer-events: none;
}

.hero-article {
  padding-top: var(--nav-h);
  background: var(--forest);
  position: relative;
  overflow: hidden;
}
.hero-article::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200, 168, 130, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 168, 130, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.hero-article__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 3.5rem 3.5rem 0;
  position: relative;
  z-index: 1;
}
.hero-article__category {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(200, 168, 130, 0.12);
  border: 1px solid rgba(200, 168, 130, 0.2);
  border-radius: 99px;
  padding: .28rem .85rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.5rem;
}
.hero-article__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--cream);
  max-width: 820px;
  margin-bottom: 1.3rem;
}
.hero-article__title em { font-style: italic; color: var(--sand); }
.hero-article__excerpt {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(244, 237, 224, 0.58);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 2.2rem;
}

/* Meta barre auteur */
.article-meta {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}
.meta-author { display: flex; align-items: center; gap: .7rem; }
.author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--moss), var(--sage));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700; font-size: .85rem;
  color: var(--cream);
  flex-shrink: 0;
}
.author-name { font-size: .82rem; font-weight: 500; color: rgba(244, 237, 224, 0.8); }
.author-role { font-size: .72rem; color: rgba(200, 168, 130, 0.45); margin-top: .05rem; }
.meta-sep    { width: 1px; height: 28px; background: rgba(255, 255, 255, 0.1); }
.meta-item   { font-size: .78rem; color: rgba(200, 168, 130, 0.45); display: flex; align-items: center; gap: .35rem; }
.meta-item strong { color: rgba(200, 168, 130, 0.7); font-weight: 500; }

/* Visual hero article */
.hero-article__visual {
  margin-top: 3rem;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  position: relative;
  height: 380px;
}
.hero-article__visual-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--ivory));
  pointer-events: none;
}


/* ============================================================
   10. STATS BAR
   ============================================================ */

.stats-bar {
  background: var(--earth);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  border-bottom: 3px solid var(--sand); 
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100vw;
}
.stats-bar__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 2.2rem 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem;
  padding: .5rem 0;
  position: relative;
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: rgba(255, 255, 255, 0.07);
}
.stat-item__num {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 900;
  color: var(--sand);
  line-height: 1;
}
.stat-item__lbl {
  font-size: .75rem;
  color: rgba(200, 168, 130, 0.5);
  letter-spacing: .06em;
}


/* ============================================================
   11. SECTION LABEL
   ============================================================ */

.section-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--moss);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.section-label::before {
  content: '';
  width: 24px; height: 2px;
  background: var(--moss);
  display: block;
  flex-shrink: 0;
}
.section-label--light { color: var(--sage); }
.section-label--light::before { background: var(--sage); }
.section-label--center { justify-content: center; }
.section-label--center::before,
.section-label--center::after {
  content: '';
  width: 24px; height: 2px;
  background: var(--moss);
  display: block;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: 1rem;
}
.section-title em { font-style: italic; color: var(--earth); }
.section-title--light { color: var(--cream); }
.section-title--light em { color: var(--sand); }


/* ============================================================
   12. SERVICES GRID
   ============================================================ */

.section-services {
  padding: 7rem 3.5rem;
  background: var(--ivory);
}
.services__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 4rem;
}
.services__intro {
  font-size: .97rem;
  color: var(--muted);
  line-height: 1.8;
  align-self: end;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out),
              border-color .25s;
}
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--moss), transparent);
  opacity: 0;
  transition: opacity .25s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(44, 31, 20, 0.09);
  border-color: rgba(61, 107, 80, 0.2);
}
.service-card:hover::before { opacity: 1; }

.service-card--featured {
  background: var(--forest);
  border-color: transparent;
}
.service-card--featured::before {
  background: linear-gradient(90deg, var(--sand), transparent);
  opacity: 1;
}
.service-card--featured .svc-name { color: var(--cream); }
.service-card--featured .svc-desc { color: rgba(244, 237, 224, 0.55); }
.service-card--featured .svc-icon {
  background: rgba(200, 168, 130, 0.15);
  border-color: rgba(200, 168, 130, 0.2);
}
.service-card--featured .svc-link { color: var(--sand); }

.svc-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(61, 107, 80, 0.08);
  border: 1px solid rgba(61, 107, 80, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.svc-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.svc-desc {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
}
.svc-link {
  font-size: .8rem;
  font-weight: 500;
  color: var(--moss);
  display: flex;
  align-items: center;
  gap: .3rem;
  transition: gap .2s;
}
.svc-link::after { content: '→'; }
.service-card:hover .svc-link { gap: .6rem; }


/* ============================================================
   13. EXPERTISE / AVANTAGES
   ============================================================ */

.section-expertise {
  background: var(--forest);
  padding: 7rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.section-expertise::before,
.section-expertise::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200, 168, 130, 0.05);
  pointer-events: none;
}
.section-expertise::before { width: 500px; height: 500px; top: -80px; right: -80px; }
.section-expertise::after  { width: 320px; height: 320px; top: 0;    right: -30px; border-color: rgba(200,168,130,0.04); }

.expertise__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.expertise__intro {
  font-size: .97rem;
  font-weight: 300;
  color: rgba(244, 237, 224, 0.5);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}
.expertise__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

/* Cards avantages */
.av-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: background .25s, border-color .25s, transform .25s;
}
.av-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--moss), var(--sand));
  opacity: 0;
  transition: opacity .25s;
}
.av-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(200, 168, 130, 0.15);
  transform: translateY(-3px);
}
.av-card:hover::before { opacity: 1; }
.av-card--full { grid-column: span 2; }

.av-icon {
  width: 40px; height: 40px;
  border-radius: .5rem;
  background: rgba(200, 168, 130, 0.1);
  border: 1px solid rgba(200, 168, 130, 0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: .9rem;
}
.av-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: .4rem;
  line-height: 1.3;
}
.av-desc {
  font-size: .83rem;
  font-weight: 300;
  color: rgba(244, 237, 224, 0.48);
  line-height: 1.7;
}


/* ============================================================
   14. PROCESSUS
   ============================================================ */

.section-processus {
  padding: 7rem 3.5rem;
  background: var(--ivory);
}
.processus__head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4.5rem;
}
.processus__sub {
  font-size: .97rem;
  color: var(--muted);
  line-height: 1.75;
}
.processus__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.processus__steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 1px;
  background: linear-gradient(90deg, var(--moss) 0%, var(--sand) 100%);
  opacity: .25;
  z-index: 0;
}

.step-item > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.step-num-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--forest);
  border: 2px solid var(--moss);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
  flex-shrink: 0;
  transition: border-color .3s, box-shadow .3s;
}
.step-item:hover .step-num-wrap {
  border-color: var(--sand);
  box-shadow: 0 0 0 6px rgba(200, 168, 130, 0.08);
}
.step-num {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--sand);
}
.step-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
  line-height: 1.3;
}
.step-desc {
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.7;
}


/* ============================================================
   15. CTA CENTRAL
   ============================================================ */

.section-contact {
  background: var(--cream);
  padding: 6rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.section-contact::before {
  content: '';
  position: absolute; bottom: -100px; right: -100px;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 61, 46, 0.05) 0%, transparent 70%);
  pointer-events: none;
}
.section-contact::after {
  content: '';
  position: absolute; top: -60px; left: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 107, 80, 0.04) 0%, transparent 70%);
  pointer-events: none;
}
.cta__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta__text { }
.cta__sub {
  font-size: .97rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 540px;
  margin-bottom: 1.8rem;
}
.cta__reassurances { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.cta__reass {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--bark);
}
.cta__reass::before { content: '✓'; color: var(--moss); font-weight: 700; }

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  min-width: 220px;
}
.cta__phone {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--earth);
  text-decoration: none;
  transition: color .2s;
}
.cta__phone:hover { color: var(--forest); }
.cta__hours {
  font-size: .7rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: .04em;
}


/* ============================================================
   16. BLOG — GRILLE LISTE
   ============================================================ */

.blog-layout {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 3.5rem 6rem;
  display: grid;
  grid-template-columns: 1fr 288px;
  gap: 5rem;
  align-items: start;
}

/* Article featured */
.featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .3s, transform .3s;
}
.featured-card:hover {
  box-shadow: 0 16px 48px rgba(44, 31, 20, 0.1);
  transform: translateY(-3px);
}
.featured-visual {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.featured-body {
  padding: 2.5rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.featured-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
}
.featured-excerpt {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  flex: 1;
}
.featured-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--forest);
  transition: gap .2s;
}
.featured-cta::after { content: '→'; }
.featured-cta:hover  { gap: .7rem; }

/* Grille articles */
.articles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.art-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s, transform .25s;
}
.art-card:hover {
  box-shadow: 0 8px 32px rgba(44, 31, 20, 0.09);
  transform: translateY(-3px);
}
.art-card--wide {
  grid-column: span 2;
  flex-direction: row;
}
.art-card--wide .art-card__visual { height: auto; width: 240px; flex-shrink: 0; }
.art-card--wide .art-card__title  { font-size: 1.15rem; }

.art-card__visual {
  height: 160px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.art-card__visual img { width: 100%; height: 100%; object-fit: cover; }

.cat-pill {
  position: absolute;
  top: .8rem; left: .8rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .65rem;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
}

.art-card__body {
  padding: 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.art-card__meta { display: flex; align-items: center; gap: .6rem; }
.art-date       { font-size: .72rem; color: var(--muted); }
.art-read       { font-size: .72rem; color: var(--muted); margin-left: auto; }
.art-category   { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); }

.art-card__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text);
  flex: 1;
}
.art-card__excerpt {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.art-card__tag {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moss);
  background: rgba(61, 107, 80, 0.08);
  border-radius: 99px;
  padding: .18rem .55rem;
}
.art-card__arrow {
  font-size: .78rem;
  color: var(--muted);
  transition: color .2s, transform .2s;
}
.art-card:hover .art-card__arrow {
  color: var(--forest);
  transform: translateX(3px);
}


/* ============================================================
   17. BLOG — FILTRES & PAGINATION
   ============================================================ */

.filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
}
.filter-bar__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 3.5rem;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-bar__inner::-webkit-scrollbar { display: none; }
.filter-btn {
  flex-shrink: 0;
  padding: 1.05rem 1.3rem;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: .04em;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.filter-btn:hover        { color: var(--text); }
.filter-btn.is-active    { color: var(--forest); font-weight: 600; border-bottom-color: var(--forest); }

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 99px;
  background: var(--cream);
  color: var(--muted);
  font-size: .62rem;
  font-weight: 600;
  margin-left: .35rem;
  vertical-align: middle;
}
.filter-btn.is-active .filter-count { background: var(--forest); color: var(--cream); }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.page-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.page-btn:hover     { border-color: var(--forest); color: var(--forest); }
.page-btn.is-active { background: var(--forest); border-color: var(--forest); color: var(--cream); font-weight: 600; }
.page-ellipsis      { color: var(--muted); font-size: .85rem; padding: 0 .3rem; }


/* ============================================================
   18. BLOG — SIDEBAR & WIDGETS
   ============================================================ */

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.article-sidebar {
  padding-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 92px;
}

/* Widget générique */
.widget {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.widget__header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

/* Widget newsletter */
.widget--newsletter { background: var(--forest); border-color: transparent; }
.widget--newsletter .widget__header { border-bottom-color: rgba(255, 255, 255, 0.08); color: var(--cream); }
.newsletter__body { padding: 1.4rem; }
.newsletter__desc {
  font-size: .83rem;
  color: rgba(244, 237, 224, 0.55);
  line-height: 1.65;
  margin-bottom: 1.1rem;
}
.newsletter__input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--cream);
  outline: none;
  transition: border-color .2s;
  margin-bottom: .7rem;
}
.newsletter__input::placeholder { color: rgba(244, 237, 224, 0.3); }
.newsletter__input:focus { border-color: rgba(200, 168, 130, 0.4); }
.newsletter__btn {
  width: 100%;
  background: var(--sand);
  color: var(--forest);
  border: none;
  border-radius: var(--radius-sm);
  padding: .75rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.newsletter__btn:hover { background: var(--cream); }
.newsletter__legal {
  font-size: .68rem;
  color: rgba(244, 237, 224, 0.3);
  line-height: 1.5;
  margin-top: .5rem;
}

/* Widget catégories */
.cat-list { }
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.4rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-size: .85rem;
  transition: background .15s, color .15s;
}
.cat-item:last-child { border-bottom: none; }
.cat-item:hover      { background: var(--ivory); color: var(--forest); }
.cat-item.is-active  { color: var(--forest); font-weight: 500; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: .6rem; }
.cat-count {
  font-size: .72rem;
  color: var(--muted);
  background: var(--ivory);
  border-radius: 99px;
  padding: .1rem .5rem;
  font-weight: 500;
}

/* Articles récents sidebar */
.recent-item {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .85rem 1.4rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.recent-item:last-child { border-bottom: none; }
.recent-item:hover      { background: var(--ivory); }
.recent-thumb {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  overflow: hidden;
}
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-title {
  font-size: .83rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-date { font-size: .7rem; color: var(--muted); }

/* Tags cloud sidebar */
.tags-cloud {
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Widget CTA devis */
.widget--cta {
  background: linear-gradient(145deg, var(--earth), var(--bark));
  border-color: transparent;
}
.widget--cta .widget__header { color: var(--cream); border-bottom-color: rgba(255, 255, 255, 0.1); }
.cta-widget__body   { padding: 1.4rem; }
.cta-widget__text   { font-size: .85rem; color: rgba(244, 237, 224, 0.65); line-height: 1.65; margin-bottom: 1.2rem; }
.cta-widget__btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--cream);
  color: var(--earth);
  padding: .75rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
  margin-bottom: .8rem;
}
.cta-widget__btn:hover { background: var(--white); }
.cta-widget__phone {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 700;
  color: var(--sand);
  text-decoration: none;
}

/* Table des matières (article) */
.toc-widget { }
.toc-widget .widget__header { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.toc-list   { padding: .6rem 0; }
.toc-item {
  display: block;
  padding: .55rem 1.3rem;
  font-size: .82rem;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: color .18s, background .18s, border-color .18s;
  line-height: 1.4;
}
.toc-item:hover  { color: var(--forest); background: var(--ivory); }
.toc-item.active { color: var(--forest); font-weight: 500; border-left-color: var(--forest); background: rgba(30, 58, 47, 0.03); }
.toc-item--h3   { padding-left: 2.2rem; font-size: .78rem; }


/* ============================================================
   19. ARTICLE — CORPS TYPOGRAPHIQUE
   ============================================================ */

.article-layout {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 3.5rem 6rem;
  display: grid;
  grid-template-columns: 1fr 288px;
  gap: 5rem;
  align-items: start;
}

.article-content {
  padding-top: 3.5rem;
  max-width: 720px;
}

.article-lead {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--earth);
  line-height: 1.7;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 2.5rem;
}

.article-body {
  font-size: .975rem;
  line-height: 1.85;
  color: var(--text);
}
.article-body p          { margin-bottom: 1.4rem; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong     { font-weight: 600; color: var(--text); }
.article-body em         { font-style: italic; color: var(--earth); }

/* H2 avec accent gauche */
.article-body h2 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.2;
  margin: 3rem 0 1.2rem;
  padding-top: 1rem;
  position: relative;
}
.article-body h2::before {
  content: '';
  position: absolute;
  top: 0; left: -1.5rem;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--moss), transparent);
  border-radius: 99px;
}
.article-body h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 2rem 0 .8rem;
}


/* ============================================================
   20. ARTICLE — COMPOSANTS ÉDITORIAUX
   ============================================================ */

/* Blockquote */
.article-body blockquote {
  margin: 2.5rem 0;
  padding: 1.6rem 2rem;
  background: var(--cream);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--moss);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
}
.article-body blockquote::before {
  content: '\201C';
  position: absolute;
  top: -1rem; left: 1.5rem;
  font-family: var(--font-serif);
  font-size: 4rem;
  color: var(--moss);
  opacity: .2;
  line-height: 1;
  pointer-events: none;
}
.article-body blockquote p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--earth);
  line-height: 1.65;
  margin-bottom: 0;
}
.article-body blockquote cite {
  display: block;
  margin-top: .8rem;
  font-size: .78rem;
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
}

/* Callouts */
.callout {
  margin: 2.5rem 0;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-md);
  display: flex;
  gap: 1rem;
}
.callout--tip  { background: rgba(61, 107, 80, 0.07);  border: 1px solid rgba(61, 107, 80, 0.15); }
.callout--warn { background: rgba(92, 61, 46, 0.06);   border: 1px solid rgba(92, 61, 46, 0.15); }
.callout--info { background: rgba(200, 168, 130, 0.08); border: 1px solid rgba(200, 168, 130, 0.18); }
.callout__icon  { font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }
.callout__title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.callout--tip  .callout__title { color: var(--moss); }
.callout--warn .callout__title { color: var(--earth); }
.callout--info .callout__title { color: var(--bark); }
.callout__text { font-size: .88rem; line-height: 1.7; color: var(--muted); }
.callout__text strong { color: var(--text); font-weight: 500; }

/* Image avec légende */
.article-img { margin: 2.5rem 0; border-radius: var(--radius-lg); overflow: hidden; }
.article-img--wide { margin: 2.5rem -3rem; border-radius: 0; }
.article-img figcaption {
  padding: .6rem .9rem;
  background: var(--cream);
  font-size: .76rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-top: none;
}

/* Séparateur ornemental */
.article-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
}
.article-divider::before,
.article-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.article-divider__icon { color: var(--sand); font-size: .9rem; opacity: .6; }

/* Tags bas article */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* Partage */
.article-share {
  margin-top: 2rem;
  padding: 1.4rem;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.share-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.share-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.share-btn {
  padding: .38rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--muted);
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color .18s, color .18s, background .18s;
}
.share-btn:hover { border-color: var(--forest); color: var(--forest); background: rgba(30, 58, 47, 0.04); }

/* Bio auteur */
.author-bio {
  margin-top: 3rem;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  display: flex;
  gap: 1.4rem;
  border: 1px solid var(--border);
}
.bio-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--forest), var(--moss));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cream);
}
.bio-name  { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }
.bio-title { font-size: .75rem; color: var(--moss); font-weight: 500; margin-bottom: .6rem; }
.bio-text  { font-size: .85rem; color: var(--muted); line-height: 1.65; }


/* ============================================================
   21. ARTICLE — NAVIGATION & RELATED
   ============================================================ */

.article-nav {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.art-nav-card {
  padding: 1.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: box-shadow .22s, transform .22s;
}
.art-nav-card:hover {
  box-shadow: 0 6px 24px rgba(44, 31, 20, 0.08);
  transform: translateY(-2px);
}
.art-nav-card--prev { align-items: flex-start; }
.art-nav-card--next { align-items: flex-end; text-align: right; }
.art-nav-dir  { font-size: .65rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.art-nav-cat  { font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); }
.art-nav-title { font-family: var(--font-serif); font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.3; }

/* Articles liés */
.related-articles {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 2px solid var(--border);
}
.related-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.related-all {
  font-size: .82rem;
  color: var(--moss);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s;
}
.related-all:hover { color: var(--forest); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.rel-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .22s, transform .22s;
}
.rel-card:hover { box-shadow: 0 6px 24px rgba(44, 31, 20, 0.08); transform: translateY(-2px); }
.rel-visual { height: 120px; }
.rel-visual img { width: 100%; height: 100%; object-fit: cover; }
.rel-body   { padding: 1rem; }
.rel-cat    { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); margin-bottom: .4rem; }
.rel-title  { font-family: var(--font-serif); font-size: .88rem; font-weight: 700; color: var(--text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-date   { font-size: .7rem; color: var(--muted); margin-top: .4rem; }


/* ============================================================
   22. PAGE DEVIS — LAYOUT
   ============================================================ */

.devis-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  min-height: calc(100vh - var(--nav-h));
}

/* Panneau gauche */
.devis-left {
  background: var(--forest);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.devis-left__title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--cream);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.devis-left__title em { font-style: italic; color: var(--sand); }
.devis-left__sub { font-size: .9rem; color: rgba(244, 237, 224, 0.55); line-height: 1.7; }

/* Réassurances */
.reass-list { display: flex; flex-direction: column; gap: 1rem; }
.reass-item {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
}
.reass-icon { font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }
.reass-title { font-size: .85rem; font-weight: 500; color: var(--cream); margin-bottom: .2rem; }
.reass-desc  { font-size: .78rem; color: rgba(244, 237, 224, 0.45); line-height: 1.55; }

/* Contact direct */
.devis-left__contact { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.contact-label { font-size: .65rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--sage); margin-bottom: .8rem; }
.contact-phone {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--cream);
  text-decoration: none;
  margin-bottom: .3rem;
}
.contact-email { font-size: .84rem; color: rgba(200, 168, 130, 0.5); text-decoration: none; }

/* Panneau droit */
.devis-right {
  padding: 3rem 3.5rem;
  background: var(--ivory);
  overflow-y: auto;
}


/* ============================================================
   23. PAGE DEVIS — FORMULAIRE
   ============================================================ */

/* Indicateur d'étapes */
.step-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}
.step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  transition: border-color .3s, background .3s, color .3s;
}
.step-dot.is-active   { border-color: var(--forest); background: var(--forest); color: var(--cream); }
.step-dot.is-complete { border-color: var(--moss); background: var(--moss); color: var(--cream); }
.step-line {
  flex: 1; height: 2px;
  background: var(--border);
  transition: background .3s;
}
.step-line.is-complete { background: var(--moss); }
.step-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
  transition: color .3s;
}
.step-dot.is-active + .step-label { color: var(--forest); }

/* Grille de sélection de service */
.service-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-bottom: 1.5rem;
}
.service-option {
  padding: 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: .4rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
  background: var(--white);
}
.service-option:hover { border-color: var(--moss); background: var(--forest-pale); }
.service-option.is-selected {
  border-color: var(--forest);
  background: rgba(30, 58, 47, 0.04);
  box-shadow: 0 0 0 3px rgba(30, 58, 47, 0.08);
}
.service-option__icon  { font-size: 1.4rem; }
.service-option__label { font-size: .78rem; font-weight: 500; color: var(--text); line-height: 1.3; }

/* Champs de formulaire */
.form-section {
  margin-bottom: 2rem;
}
.form-section__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.field-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; }
.field-group:last-child { margin-bottom: 0; }
.field-label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .02em;
}
.field-label span { color: var(--muted); font-weight: 300; }
.field-input,
.field-textarea,
.field-select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 300;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(30, 58, 47, 0.07);
}
.field-input::placeholder,
.field-textarea::placeholder { color: var(--light-muted); }
.field-textarea { min-height: 120px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Boutons urgence (radio style) */
.urgency-group { display: flex; gap: .7rem; }
.urgency-btn {
  flex: 1; padding: .7rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: .83rem;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: all .18s;
}
.urgency-btn:hover     { border-color: var(--moss); color: var(--text); }
.urgency-btn.is-active { border-color: var(--forest); background: rgba(30, 58, 47, 0.04); color: var(--forest); font-weight: 500; }

/* Checkbox */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}
.checkbox-row input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: .15rem;
  flex-shrink: 0;
  accent-color: var(--forest);
}

/* Notice */
.notice-box {
  padding: .9rem 1.1rem;
  background: var(--forest-pale);
  border: 1px solid var(--sage-light);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  color: var(--forest);
  line-height: 1.6;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

/* Navigation formulaire */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.form-back-btn {
  font-size: .85rem;
  font-weight: 400;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-body);
  transition: color .2s;
}
.form-back-btn:hover { color: var(--text); }

/* Barre de progression form */
.form-progress {
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.form-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--moss), var(--sand));
  border-radius: 99px;
  transition: width .4s var(--ease-out);
}

/* Écran de confirmation */
.devis-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 4rem 2rem;
}
.success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(61, 107, 80, 0.1);
  border: 2px solid var(--moss);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.success-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 900; color: var(--text); }
.success-text  { font-size: .95rem; color: var(--muted); line-height: 1.75; max-width: 440px; }


/* ============================================================
   24. FOOTER
   ============================================================ */

.site-footer {
  background: var(--forest);
  border-top: 3px solid var(--sand);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding: 4rem 3.5rem 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-col-title {
  font-family: var(--font-serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.2rem;
}

/* Col 1 — Marque */
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-logo-wrap  { display: flex; align-items: center; gap: .7rem; }
.footer-logo-img   { width: 36px; height: 36px; }
.footer-logo-name  { font-family: var(--font-serif); font-weight: 900; font-size: 1.25rem; color: var(--cream); letter-spacing: -.01em; }
.footer-logo-name span { font-style: italic; color: var(--sand); }
.footer-tagline    { font-size: .87rem; color: rgba(200, 168, 130, .5); line-height: 1.7; max-width: 250px; }
.footer-certif {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(200, 168, 130, .1); border: 1px solid rgba(200, 168, 130, .2);
  border-radius: var(--radius-sm); padding: .4rem .8rem;
  font-size: .74rem; color: var(--sand); font-weight: 500;
}

/* Col 2 — Services */
.footer-links { display: flex; flex-direction: column; gap: .65rem; }
.footer-links a {
  font-size: .85rem; color: rgba(200, 168, 130, .5);
  text-decoration: none; display: flex; align-items: center; gap: .4rem;
  transition: color .2s;
}
.footer-links a::before { content: '→'; font-size: .7rem; color: var(--moss); }
.footer-links a:hover   { color: var(--sand); }
.footer-links a.active  { color: var(--sand); font-weight: 500; }

/* Col 3 — Contact */
.footer-contact      { display: flex; flex-direction: column; gap: .8rem; }
.footer-contact-item { display: flex; align-items: flex-start; gap: .7rem; }
.footer-contact-icon { font-size: .9rem; flex-shrink: 0; margin-top: .05rem; }
.footer-contact-text { font-size: .84rem; color: rgba(200, 168, 130, .5); line-height: 1.5; }
.footer-contact-text a { color: var(--sand); text-decoration: none; transition: opacity .2s; }
.footer-contact-text a:hover { opacity: .75; }

/* Col 4 — Horaires */
.footer-hours      { display: flex; flex-direction: column; gap: .5rem; }
.footer-hour-row   { display: flex; justify-content: space-between; gap: 1rem; }
.footer-hour-day   { font-size: .82rem; color: rgba(200, 168, 130, .4); }
.footer-hour-time  { font-size: .82rem; color: rgba(200, 168, 130, .7); font-weight: 500; }
.footer-hour-closed { font-size: .82rem; color: rgba(200, 168, 130, .28); font-style: italic; }
.footer-hour-divider { height: 1px; background: rgba(255, 255, 255, .06); margin: .4rem 0; }

/* Barre de bas */
.footer-bottom {
  padding: 1.4rem 3.5rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.footer-copy { font-size: .76rem; color: rgba(200, 168, 130, .28); }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: .76rem; color: rgba(200, 168, 130, .28); text-decoration: none; transition: color .2s; }
.footer-legal a:hover { color: var(--sand); }


/* ============================================================
   25. ANIMATIONS & SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

.rd1 { transition-delay: .1s; }
.rd2 { transition-delay: .2s; }
.rd3 { transition-delay: .3s; }
.rd4 { transition-delay: .4s; }
.rd5 { transition-delay: .5s; }




/* ============================================================
   COMPLÉMENT — Sélecteurs spécifiques aux pages
   (extraits des templates HTML et intégrés au design system)
   ============================================================ */


/* ────────────────────────────────────────────────────────
   HOMEPAGE — 101 blocs manquants
   ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 3.5rem;
    background: rgba(30,58,47,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

nav.scrolled {
  padding: .8rem 3.5rem;
}
.nav-logo img {
  width: 38px; height: 38px; display: block;
}
.section-hero {
  min-height: fit-content;
  background: var(--forest);
  display: grid;
  /*grid-template-columns: 1fr 1fr;*/
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 72px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
  radial-gradient(ellipse 65% 70% at 100% 60%, rgba(61,107,80,0.22) 0%, transparent 55%),
  radial-gradient(ellipse 45% 55% at 5% 20%, rgba(10,25,18,0.5) 0%, transparent 50%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
  linear-gradient(rgba(200,168,130,0.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(200,168,130,0.025) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.hero-left {
  padding: 5rem 3.5rem 5rem;
  position: relative; z-index: 1;
  max-width: 50%;
  padding-right: 4rem;
  box-sizing: border-box;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(200,168,130,0.1); border: 1px solid rgba(200,168,130,0.2);
  border-radius: 99px; padding: .3rem 1rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sage);
  margin-bottom: 2rem;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
  animation: blink 2.5s ease infinite;
}
0%,100% {
  opacity:1
}
} .hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 900; line-height: 1.05;
  letter-spacing: -.03em; color: var(--cream);
  margin-bottom: 1.5rem;
}
.hero-title em {
  font-style: italic; color: var(--sand); display: block;
}
.hero-desc {
  font-size: 1.05rem; font-weight: 300;
  color: rgba(244,237,224,0.58); line-height: 1.8;
  max-width: 480px; margin-bottom: 2.8rem;
}
.hero-actions {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
.btn-ghost > a::after {
  content: '→'; transition: transform .2s;
}
.btn-ghost:hover > a::after {
  transform: translateX(4px);
}
.hero-mini-num {
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 900;
  color: var(--sand); line-height: 1;
}
.hero-mini-lbl {
  font-size: .68rem; color: rgba(200,168,130,0.45);
  letter-spacing: .08em; text-transform: uppercase; margin-top: .2rem;
}
.hero-right {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
  overflow: hidden;
}
.hero-visual-stack {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
0%,100% {
  transform: translateY(0) rotate(-1deg);
}
.scan-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(107,184,152,0.15);
  animation: scan-pulse 3s ease-out infinite;
}
.hero-float-card {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: .65rem;
  padding: .8rem 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.hero-float-card.card-1 {
  top: 22%; left: 5%; animation: float2 7s ease-in-out infinite;
}
.hero-float-card.card-2 {
  top: 35%; right: 8%; animation: float2 8s ease-in-out infinite .5s;
}
.hero-float-card.card-3 {
  bottom: 28%; left: 8%; animation: float2 6.5s ease-in-out infinite 1s;
}
0%,100% {
  transform: translateY(0);
}
.float-icon {
  font-size: 1.2rem;
}
.stats-bar-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 2.2rem 3.5rem;
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1rem;
}
.stat-num {
  font-family: var(--font-serif); font-size: 2rem; font-weight: 900;
  color: var(--sand); line-height: 1;
}
.stat-label {
  font-size: .75rem; color: rgba(200,168,130,0.5);
  letter-spacing: .06em;
}
.section-services .inner {
  max-width: var(--max-w); margin: 0 auto;
}
.services-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: end;
  margin-bottom: 4rem;
}
.services-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.025em; color: var(--text);
}
.services-title em {
  font-style: italic; color: var(--earth);
}
.services-intro {
  font-size: .97rem; color: var(--muted); line-height: 1.8;
  align-self: end;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.service-card.featured {
  background: var(--forest);
  border-color: transparent;
}
.service-card.featured::before {
  background: linear-gradient(90deg, var(--sand), transparent);
  opacity: 1;
}
.service-card.featured .svc-icon {
  background: rgba(200,168,130,0.15);
  border-color: rgba(200,168,130,0.2);
}
.service-card.featured .svc-name {
  color: var(--cream);
}
.service-card.featured .svc-desc {
  color: rgba(244,237,224,0.55);
}
.service-card.featured .svc-link {
  color: var(--sand);
}
.expertise-inner {
  max-width: var(--max-w); margin: 0 auto;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
}
.expertise-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.025em; color: var(--cream);
  margin-bottom: 1.4rem;
}
.expertise-title em {
  font-style: italic; color: var(--sand);
}
.expertise-intro {
  font-size: .97rem; font-weight: 300;
  color: rgba(244,237,224,0.5); line-height: 1.8;
  margin-bottom: 2.5rem;
}
.expertise-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--sand); color: var(--forest);
  padding: .8rem 1.8rem; border-radius: .4rem;
  font-weight: 600; font-size: .88rem; text-decoration: none;
  transition: background .2s, transform .15s;
}
.expertise-cta:hover {
  background: var(--cream); transform: translateY(-2px);
}
.expertise-right {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.av-card.full {
  grid-column: span 2;
}
.section-processus .inner {
  max-width: var(--max-w); margin: 0 auto;
}
.processus-head {
  text-align: center; max-width: 600px;
  margin: 0 auto 4.5rem;
}
.processus-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.025em; color: var(--text);
  margin-bottom: .8rem;
}
.processus-sub {
  font-size: .97rem; color: var(--muted); line-height: 1.75;
}
.processus-steps {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0;
  position: relative;
}
.processus-steps::before {
  content: '';
  position: absolute;
  top: 28px; left: calc(12.5% + 20px); right: calc(12.5% + 20px);
  height: 1px;
  background: linear-gradient(90deg, var(--moss) 0%, var(--sand) 100%);
  opacity: .25;
  z-index: 0;
}
.cta-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto;
  gap: 5rem; align-items: center;
  position: relative; z-index: 1;
}
.cta-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.025em; color: var(--text);
  margin-bottom: .9rem;
}
.cta-title em {
  font-style: italic; color: var(--earth);
}
.cta-sub {
  font-size: .97rem; color: var(--muted);
  line-height: 1.8; max-width: 540px; margin-bottom: 1.8rem;
}
.cta-reassurances {
  display: flex; gap: 1.8rem; flex-wrap: wrap;
}
.cta-reass {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--bark);
}
.cta-reass::before {
  content: '✓';
  color: var(--moss); font-weight: 700;
}
.cta-actions {
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem; flex-shrink: 0;
  min-width: 220px;
}
.btn-cta {
  width: 100%; text-align: center;
  background: var(--forest); color: var(--cream);
  padding: 1.05rem 2rem; border-radius: .4rem;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 22px rgba(30,58,47,0.18);
}
.btn-cta:hover {
  background: var(--forest-mid); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(30,58,47,0.26);
}
.cta-phone {
  font-family: var(--font-serif); font-size: 1.1rem;
  font-weight: 700; color: var(--earth); text-decoration: none;
  transition: color .2s;
}
.cta-phone:hover {
  color: var(--forest);
}
.cta-hours {
  font-size: .7rem; color: var(--muted); text-align: center;
  letter-spacing: .04em;
}
.section-blog {
  padding: 7rem 3.5rem;
  background: var(--white);
}
.section-blog .inner {
  max-width: var(--max-w); margin: 0 auto;
}
.blog-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 3rem; gap: 2rem;
}
.blog-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900; letter-spacing: -.02em; color: var(--text);
}
.blog-title em {
  font-style: italic; color: var(--earth);
}
.blog-all {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 500; color: var(--moss);
  text-decoration: none; white-space: nowrap;
  transition: gap .2s, color .2s;
}
.blog-all::after {
  content: '→';
}
.blog-all:hover {
  color: var(--forest); gap: .7rem;
}
.blog-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.4rem;
}
.blog-card {
  border-radius: .8rem; overflow: hidden;
  border: 1px solid var(--border); background: var(--ivory);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: box-shadow .25s, transform .25s;
}
.blog-card:hover {
  box-shadow: 0 8px 32px rgba(44,31,20,0.09);
  transform: translateY(-3px);
}
.blog-card.big {
  grid-row: span 1;
}
.blog-visual {
  height: 200px; position: relative; overflow: hidden;
}
.blog-visual-bg {
  position: absolute; inset: 0;
}
.blog-card.big .blog-visual {
  height: 260px;
}
.blog-cat-pill {
  position: absolute; top: .8rem; left: .8rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .22rem .65rem;
  border-radius: 99px; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
}
.blog-body {
  padding: 1.4rem; flex: 1; display: flex; flex-direction: column; gap: .6rem;
}
.blog-meta {
  display: flex; align-items: center; gap: .5rem;
}
.blog-date {
  font-size: .72rem; color: var(--muted);
}
.blog-read {
  font-size: .72rem; color: var(--muted); margin-left: auto;
}
.blog-card-title {
  font-family: var(--font-serif); font-size: 1rem;
  font-weight: 700; line-height: 1.3; color: var(--text);
  flex: 1;
}
.blog-card.big .blog-card-title {
  font-size: 1.2rem;
}
.blog-card-excerpt {
  font-size: .82rem; color: var(--muted); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-arrow {
  font-size: .8rem; color: var(--muted); margin-top: auto;
  padding-top: .6rem; border-top: 1px solid var(--border);
  transition: color .2s;
}
.blog-card:hover .blog-card-arrow {
  color: var(--forest);
}
footer {
  background: var(--forest); border-top: 3px solid var(--sand);
}
.reveal.visible {
  opacity: 1; transform: none;
}
.vis-g1 {
  background: linear-gradient(135deg,#1a3528,#2a5a3f);
}
.vis-g2 {
  background: linear-gradient(135deg,#2d5240,#3d6b50);
}
.vis-g3 {
  background: linear-gradient(135deg,var(--earth),#7a4a2e);
}
.vis-g4 {
  background: linear-gradient(135deg,#8c6840,var(--bark));
}

/* ────────────────────────────────────────────────────────
   PAGE SERVICE — 95 blocs manquants
   ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.logo {
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700;
  color: var(--cream); text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
}
.logo-icon {
  width: 32px; height: 32px; background: var(--sand);
  border-radius: .35rem; display: grid; place-items: center; font-size: .95rem;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--cream);
}
.breadcrumb-bar a, .breadcrumb-bar span {
  font-size: .75rem; font-weight: 400; color: rgba(200,168,130,0.5);
  text-decoration: none; letter-spacing: .05em;
  transition: color .2s;
}
.breadcrumb-bar a:hover {
  color: var(--sand);
}
.breadcrumb-bar .sep {
  color: rgba(200,168,130,0.25);
}
.breadcrumb-bar .current {
  color: var(--sand);
}
.hero {
  background: var(--forest);
  padding: 5rem 3.5rem 0;
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
  radial-gradient(ellipse 60% 80% at 100% 50%, rgba(61,107,80,0.25) 0%, transparent 60%),
  radial-gradient(ellipse 40% 60% at 0% 100%, rgba(10,25,18,0.5) 0%, transparent 50%);
  pointer-events: none;
}
.hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: end;
  position: relative; z-index: 1;
}
.hero-left {
  padding-bottom: 4.5rem;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(200,168,130,0.1); border: 1px solid rgba(200,168,130,0.22);
  border-radius: 99px; padding: .35rem 1rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sand);
  margin-bottom: 1.8rem;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage); animation: blink 2s ease infinite;
}
0%,100% {
  opacity:1
}
} .hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900; line-height: 1.08;
  letter-spacing: -.03em; color: var(--cream);
  margin-bottom: 1.4rem;
}
.hero-title em {
  font-style: italic; color: var(--sand); display: block;
}
.hero-desc {
  font-size: 1.05rem; font-weight: 300;
  color: rgba(244,237,224,0.6); line-height: 1.75;
  max-width: 480px; margin-bottom: 2.5rem;
}
.hero-actions {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.hero-visual {
  position: relative; align-self: stretch;
  display: flex; align-items: flex-end;
}
.hero-visual-card {
  width: 100%; background: var(--forest-mid);
  border-radius: 1.2rem 1.2rem 0 0;
  overflow: hidden; min-height: 380px;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom: none;
}
.hero-visual-bg {
  position: absolute; inset: 0;
  background:
  linear-gradient(160deg, rgba(61,107,80,0.4) 0%, transparent 50%),
  linear-gradient(to bottom, transparent 30%, rgba(10,25,18,0.6) 100%),
  repeating-linear-gradient(
  -45deg,
  rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px,
  transparent 1px, transparent 28px
  );
  background-color: #1a3528;
}
.roof-shape {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; opacity: .15;
}
.roof-shape svg {
  width: 100%; height: auto;
}
.hero-visual-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(10,25,18,0.85), transparent);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.hero-stat-num {
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 900;
  color: var(--sand); line-height: 1;
}
.hero-stat-lbl {
  font-size: .65rem; color: rgba(244,237,224,0.5);
  margin-top: .2rem; letter-spacing: .08em; text-transform: uppercase;
}
.drone-anim {
  position: absolute; top: 18%; right: 12%;
  animation: hoverdrone 4s ease-in-out infinite;
}
.drone-anim svg {
  width: 52px; height: 52px; opacity: .7;
}
0%,100% {
  transform: translateY(0) rotate(-2deg);
}
} .drone-trail {
  position: absolute; top: 20%; left: 0; right: 0; height: 80px;
  pointer-events: none;
}
.section-presentation {
  padding: 6rem 3.5rem;
  background: var(--ivory);
}
.section-presentation .inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
}
.pres-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 900; line-height: 1.15;
  letter-spacing: -.02em; color: var(--text);
  margin-bottom: 1.4rem;
}
.pres-title em {
  font-style: italic; color: var(--earth);
}
.pres-body {
  font-size: .95rem; color: var(--muted);
  line-height: 1.8; margin-bottom: 1.4rem;
}
.pres-body p + p {
  margin-top: 1rem;
}
.pres-body strong {
  color: var(--text); font-weight: 500;
}
.process-steps {
  display: flex; flex-direction: column; gap: 0;
}
.process-step {
  display: flex; gap: 1.4rem; align-items: flex-start;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border);
  cursor: default;
  transition: background .2s;
}
.process-step:last-child {
  border-bottom: none;
}
.section-avantages {
  background: var(--forest);
  padding: 6rem 3.5rem;
  position: relative; overflow: hidden;
}
.section-avantages::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 400px; height: 400px; border-radius: 50%;
  border: 1px solid rgba(200,168,130,0.07);
  pointer-events: none;
}
.section-avantages::after {
  content: '';
  position: absolute; top: 20px; right: 20px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 1px solid rgba(200,168,130,0.05);
  pointer-events: none;
}
.section-avantages .inner {
  max-width: var(--max-w); margin: 0 auto;
  position: relative; z-index: 1;
}
.avantages-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center; margin-bottom: 4rem;
}
.avantages-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 900; line-height: 1.15;
  letter-spacing: -.02em; color: var(--cream);
}
.avantages-title em {
  font-style: italic; color: var(--sand);
}
.avantages-intro {
  font-size: .95rem; font-weight: 300;
  color: rgba(244,237,224,0.55); line-height: 1.8;
}
.avantages-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.cta-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto;
  gap: 4rem; align-items: center;
  position: relative; z-index: 1;
}
.cta-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 900; line-height: 1.15;
  letter-spacing: -.02em; color: var(--text);
  margin-bottom: .8rem;
}
.cta-title em {
  font-style: italic; color: var(--earth);
}
.cta-sub {
  font-size: .95rem; color: var(--muted);
  line-height: 1.7; max-width: 540px;
}
.cta-reassurance {
  display: flex; gap: 1.5rem; margin-top: 1.5rem; flex-wrap: wrap;
}
.cta-reass-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--bark); font-weight: 400;
}
.cta-reass-item::before {
  content: '✓';
  color: var(--moss); font-weight: 700; font-size: .85rem;
}
.cta-action {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  flex-shrink: 0;
}
.btn-cta-main {
  background: var(--forest); color: var(--cream);
  padding: 1.1rem 2.5rem; border-radius: .5rem;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  text-align: center; white-space: nowrap;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 24px rgba(30,58,47,0.2);
}
.btn-cta-main:hover {
  background: var(--forest-mid); transform: translateY(-2px); box-shadow: 0 8px 36px rgba(30,58,47,0.3);
}
.cta-phone {
  font-family: var(--font-serif); font-size: 1.1rem;
  font-weight: 700; color: var(--earth); text-decoration: none;
  transition: color .2s;
}
.cta-phone:hover {
  color: var(--forest);
}
.cta-delai {
  font-size: .72rem; color: var(--muted); text-align: center;
  letter-spacing: .05em;
}
.section-faq {
  padding: 6rem 3.5rem;
  background: var(--ivory);
}
.section-faq .inner {
  max-width: 820px; margin: 0 auto;
}
.faq-header {
  margin-bottom: 3rem; text-align: center;
}
.faq-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 900; letter-spacing: -.02em;
  color: var(--text); margin-bottom: .6rem;
}
.faq-sub {
  font-size: .95rem; color: var(--muted);
}
.faq-list {
  display: flex; flex-direction: column; gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; text-align: left;
  font-family: var(--font-body); font-size: 1rem;
  font-weight: 500; color: var(--text); line-height: 1.4;
  transition: color .2s;
}
.faq-q:hover {
  color: var(--forest);
}
.faq-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--moss); font-size: .9rem; font-weight: 700;
  transition: transform .3s, border-color .2s, background .2s;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--forest); border-color: var(--forest); color: var(--cream);
}
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(0.16,1,0.3,1), padding .3s;
  font-size: .92rem; color: var(--muted); line-height: 1.8;
}
.faq-item.open .faq-a {
  max-height: 400px;
  padding-bottom: 1.5rem;
}
.faq-a strong {
  color: var(--text); font-weight: 500;
}
.section-related {
  background: var(--forest-mid);
  padding: 4rem 3.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.section-related .inner {
  max-width: var(--max-w); margin: 0 auto;
}
.related-title {
  font-family: var(--font-serif); font-size: 1.3rem;
  font-weight: 700; color: var(--cream);
  margin-bottom: 1.8rem; letter-spacing: -.01em;
}
.related-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: .6rem; padding: 1.2rem;
  text-decoration: none;
  transition: background .2s, transform .2s;
  display: flex; flex-direction: column; gap: .5rem;
}
.related-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.related-icon {
  font-size: 1.4rem;
}
.related-name {
  font-size: .82rem; font-weight: 500;
  color: rgba(244,237,224,0.8); line-height: 1.3;
}
.related-arrow {
  font-size: .72rem; color: var(--sage);
  margin-top: auto; padding-top: .3rem;
}
footer {
  background: var(--forest); border-top: 3px solid var(--sand);
}
.footer-logo {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem;
  color: var(--cream); display: flex; align-items: center; gap: .6rem;
}
.footer-logo-dot {
  width: 9px; height: 9px; background: var(--sand); border-radius: 50%;
}
.reveal.visible {
  opacity: 1; transform: none;
}
.reveal-delay-1 {
  transition-delay: .1s;
}
.reveal-delay-2 {
  transition-delay: .2s;
}
.reveal-delay-3 {
  transition-delay: .3s;
}
.reveal-delay-4 {
  transition-delay: .4s;
}
.reveal-delay-5 {
  transition-delay: .5s;
}

/* ────────────────────────────────────────────────────────
   PAGE BLOG LISTE — 86 blocs manquants
   ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.logo {
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700;
  color: var(--cream); text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
}
.logo-icon {
  width: 32px; height: 32px; background: var(--sand);
  border-radius: .35rem; display: grid; place-items: center; font-size: .95rem;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--cream);
}
.blog-hero {
  background: var(--forest);
  padding: 8rem 3.5rem 5rem;
  position: relative; overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
  radial-gradient(ellipse 55% 70% at 100% 60%, rgba(61,107,80,0.2) 0%, transparent 55%),
  radial-gradient(ellipse 35% 50% at 5% 30%, rgba(10,25,18,0.4) 0%, transparent 50%);
  pointer-events: none;
}
.blog-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
  linear-gradient(rgba(200,168,130,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(200,168,130,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.blog-hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto;
  gap: 4rem; align-items: end;
}
.blog-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sage);
  margin-bottom: 1.4rem;
}
.blog-hero-eyebrow::before {
  content: ''; width: 24px; height: 1.5px;
  background: var(--sage); display: block;
}
.blog-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900; line-height: 1.06;
  letter-spacing: -.03em; color: var(--cream);
  margin-bottom: 1.2rem;
}
.blog-hero-title em {
  font-style: italic; color: var(--sand);
}
.blog-hero-desc {
  font-size: 1rem; font-weight: 300;
  color: rgba(244,237,224,0.55); line-height: 1.75;
  max-width: 520px;
}
.blog-hero-stats {
  display: flex; flex-direction: column; gap: 1.2rem;
  align-items: flex-end;
}
.hero-stat {
  text-align: right;
  padding: 1rem 1.4rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: .6rem;
}
.hero-stat-n {
  font-family: var(--font-serif); font-size: 1.8rem;
  font-weight: 900; color: var(--sand); line-height: 1;
}
.hero-stat-l {
  font-size: .65rem; color: rgba(244,237,224,0.4);
  letter-spacing: .1em; text-transform: uppercase; margin-top: .2rem;
}
.filter-bar-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 3.5rem;
  display: flex; align-items: center;
  gap: 0; overflow-x: auto;
  scrollbar-width: none;
}
.filter-bar-inner::-webkit-scrollbar {
  display: none;
}
.filter-btn.active {
  color: var(--forest); font-weight: 600;
  border-bottom-color: var(--forest);
}
.filter-btn.active .filter-count {
  background: var(--forest); color: var(--cream);
}
.featured-article {
  margin-bottom: 3.5rem;
}
.featured-visual-bg {
  position: absolute; inset: 0;
  background:
  radial-gradient(ellipse 70% 60% at 30% 40%, rgba(61,107,80,0.5) 0%, transparent 65%),
  linear-gradient(160deg, var(--forest-mid), var(--forest));
}
.feat-illustration {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .18;
}
.feat-illustration svg {
  width: 200px; height: auto;
}
.featured-badge {
  position: absolute; top: 1.2rem; left: 1.2rem;
  background: var(--sand); color: var(--forest);
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .3rem .8rem;
  border-radius: 99px;
}
.featured-meta {
  display: flex; align-items: center; gap: .8rem;
}
.art-sep {
  color: var(--border);
}
.articles-section-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--moss);
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.8rem;
}
.articles-section-label::before {
  content: ''; width: 20px; height: 1.5px;
  background: var(--moss); display: block;
}
.art-card-visual {
  height: 160px; position: relative; overflow: hidden;
  background: var(--forest);
  flex-shrink: 0;
}
.art-card-visual-bg {
  position: absolute; inset: 0;
}
.art-card-cat-pill {
  position: absolute; top: .8rem; left: .8rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .22rem .65rem;
  border-radius: 99px; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
}
.art-card-body {
  padding: 1.4rem; flex: 1; display: flex; flex-direction: column; gap: .7rem;
}
.art-card-meta {
  display: flex; align-items: center; gap: .6rem;
}
.art-card-date {
  font-size: .72rem; color: var(--muted);
}
.art-card-read {
  font-size: .72rem; color: var(--muted); margin-left: auto; display: flex; align-items: center; gap: .25rem;
}
.art-card-title {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 700;
  line-height: 1.3; letter-spacing: -.01em;
  color: var(--text); flex: 1;
}
.art-card-excerpt {
  font-size: .82rem; color: var(--muted);
  line-height: 1.65; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .7rem; border-top: 1px solid var(--border);
  margin-top: auto;
}
.art-card-tag {
  font-size: .65rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--moss);
  background: rgba(61,107,80,0.08); border-radius: 99px;
  padding: .18rem .55rem;
}
.art-card-arrow {
  font-size: .78rem; color: var(--muted);
  transition: color .2s, transform .2s;
}
.art-card:hover .art-card-arrow {
  color: var(--forest); transform: translateX(3px);
}
.art-card-wide {
  grid-column: span 2;
  flex-direction: row;
}
.art-card-wide .art-card-visual {
  height: auto; width: 240px; flex-shrink: 0;
  border-radius: 0;
}
.art-card-wide .art-card-title {
  font-size: 1.15rem;
}
.art-card-wide .art-card-excerpt {
  -webkit-line-clamp: 3;
}
.page-btn.active {
  background: var(--forest); border-color: var(--forest);
  color: var(--cream); font-weight: 600;
}
.page-btn.arrow {
  font-size: 1rem;
}
.sidebar {
  display: flex; flex-direction: column; gap: 2rem;
}
.widget-header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif); font-size: .85rem;
  font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.widget-newsletter {
  background: var(--forest); border-color: transparent;
}
.widget-newsletter .widget-header {
  border-bottom-color: rgba(255,255,255,0.08);
  color: var(--cream);
}
.newsletter-body {
  padding: 1.4rem;
}
.newsletter-desc {
  font-size: .83rem; color: rgba(244,237,224,0.55);
  line-height: 1.65; margin-bottom: 1.1rem;
}
.newsletter-form {
  display: flex; flex-direction: column; gap: .7rem;
}
.newsletter-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: .4rem; padding: .7rem .9rem;
  font-family: var(--font-body); font-size: .85rem;
  color: var(--cream); outline: none;
  transition: border-color .2s;
}
.newsletter-input::placeholder {
  color: rgba(244,237,224,0.3);
}
.newsletter-input:focus {
  border-color: rgba(200,168,130,0.4);
}
.newsletter-btn {
  width: 100%; background: var(--sand); color: var(--forest);
  border: none; border-radius: .4rem; padding: .75rem;
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.newsletter-btn:hover {
  background: var(--cream);
}
.newsletter-legal {
  font-size: .68rem; color: rgba(244,237,224,0.3);
  line-height: 1.5; margin-top: .3rem;
}
.cat-item.active {
  color: var(--forest); font-weight: 500;
}
.cat-item-left {
  display: flex; align-items: center; gap: .6rem;
}
.recent-list {
  padding: .5rem 0;
}
.recent-thumb-bg {
  width: 100%; height: 100%;
}
.tag-chip {
  font-size: .72rem; font-weight: 400; letter-spacing: .04em;
  padding: .28rem .7rem; border-radius: 99px;
  border: 1px solid var(--border); color: var(--muted);
  text-decoration: none; transition: all .18s;
  background: none;
}
.widget-cta {
  background: linear-gradient(145deg, var(--earth), var(--bark));
  border-color: transparent;
}
.widget-cta .widget-header {
  color: var(--cream); border-bottom-color: rgba(255,255,255,0.1);
}
.cta-widget-body {
  padding: 1.4rem;
}
.cta-widget-text {
  font-size: .85rem; color: rgba(244,237,224,0.65);
  line-height: 1.65; margin-bottom: 1.2rem;
}
.cta-widget-btn {
  display: block; width: 100%; text-align: center;
  background: var(--cream); color: var(--earth);
  padding: .75rem; border-radius: .4rem;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: background .2s;
}
.cta-widget-btn:hover {
  background: #fff;
}
.cta-widget-phone {
  display: block; text-align: center; margin-top: .8rem;
  font-family: var(--font-serif); font-size: .95rem;
  font-weight: 700; color: var(--sand); text-decoration: none;
}
footer {
  background: var(--forest); border-top: 3px solid var(--sand);
}
.footer-logo {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem;
  color: var(--cream); display: flex; align-items: center; gap: .6rem;
}
.footer-logo-dot {
  width: 9px; height: 9px; background: var(--sand); border-radius: 50%;
}
.reveal.visible {
  opacity: 1; transform: none;
}
.reveal-delay-1 {
  transition-delay: .1s;
}
.reveal-delay-2 {
  transition-delay: .2s;
}
.reveal-delay-3 {
  transition-delay: .3s;
}
.reveal-delay-4 {
  transition-delay: .4s;
}
.vis-green-forest {
  background: linear-gradient(135deg, var(--forest-mid), var(--forest));
}
.vis-green-sage {
  background: linear-gradient(135deg, #2a5a3f, #3d6b50);
}
.vis-sand {
  background: linear-gradient(135deg, #8c6840, var(--bark));
}
.card-deco-icon {
  position: absolute; bottom: 1rem; right: 1.2rem;
  font-size: 3rem; opacity: .12; line-height: 1;
  filter: grayscale(1) brightness(2);
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────
   PAGE ARTICLE — 72 blocs manquants
   ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.logo {
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700;
  color: var(--cream); text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
}
.logo-icon {
  width: 32px; height: 32px; background: var(--sand);
  border-radius: .35rem; display: grid; place-items: center; font-size: .95rem;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--cream);
}
.article-hero {
  padding-top: 72px;
  background: var(--forest);
  position: relative; overflow: hidden;
}
.article-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
  radial-gradient(ellipse 60% 80% at 80% 50%, rgba(61,107,80,0.18) 0%, transparent 55%),
  radial-gradient(ellipse 40% 60% at 10% 80%, rgba(10,25,18,0.5) 0%, transparent 50%);
  pointer-events: none;
}
.article-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
  linear-gradient(rgba(200,168,130,0.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(200,168,130,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.article-hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 3.5rem 3.5rem 0;
  position: relative; z-index: 1;
}
.breadcrumb a, .breadcrumb span {
  font-size: .75rem; color: rgba(200,168,130,0.45);
  text-decoration: none; transition: color .2s; letter-spacing: .03em;
}
body.home .hero-content {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-items: stretch;
}

.hero-slider {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.hero-category {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(200,168,130,0.12); border: 1px solid rgba(200,168,130,0.2);
  border-radius: 99px; padding: .28rem .85rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sage);
  margin-bottom: 1.5rem;
}
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.03em; color: var(--cream);
  margin-bottom: 1.3rem;
}
.hero-title em {
  font-style: italic; color: var(--sand);
}
.hero-excerpt {
  font-size: 1.05rem; font-weight: 300;
  color: rgba(244,237,224,0.58); line-height: 1.75;
  max-width: 640px; margin-bottom: 2.2rem;
}
.hero-meta {
  display: flex; align-items: center; gap: 1.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
}
.hero-visual-wrap {
  margin-top: 3rem;
  border-radius: 1rem 1rem 0 0; overflow: hidden;
  position: relative;
  height: 380px;
}
.hero-visual-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1a3a28, #2a5a3f);
}
.hero-visual-illo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual-illo svg {
  opacity: .22;
}
.hero-visual-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--ivory));
  pointer-events: none;
}
article {
  padding-top: 3.5rem;
  max-width: var(--article-w);
}
.article-body ul {
  list-style: none; margin: 1.2rem 0 1.6rem; padding: 0;
  display: flex; flex-direction: column; gap: .55rem;
}
.article-body ul li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .975rem; line-height: 1.7;
}
.article-body ul li::before {
  content: '→';
  color: var(--moss); font-size: .85rem;
  flex-shrink: 0; margin-top: .1rem; font-weight: 600;
}
.article-body ol {
  counter-reset: ol-counter;
  list-style: none; margin: 1.2rem 0 1.6rem; padding: 0;
  display: flex; flex-direction: column; gap: .7rem;
}
.article-body ol li {
  counter-increment: ol-counter;
  display: flex; align-items: flex-start; gap: .8rem;
  font-size: .975rem; line-height: 1.7;
}
.article-body ol li::before {
  content: counter(ol-counter);
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--forest); color: var(--sand);
  font-family: var(--font-serif); font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: .15rem;
}
.callout-tip {
  background: rgba(61,107,80,0.07); border: 1px solid rgba(61,107,80,0.15);
}
.callout-warn {
  background: rgba(92,61,46,0.06); border: 1px solid rgba(92,61,46,0.15);
}
.callout-info {
  background: rgba(200,168,130,0.08); border: 1px solid rgba(200,168,130,0.18);
}
.callout-icon {
  font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem;
}
.callout-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: .4rem;
}
.callout-tip .callout-title {
  color: var(--moss);
}
.callout-warn .callout-title {
  color: var(--earth);
}
.callout-info .callout-title {
  color: var(--bark);
}
.callout-text {
  font-size: .88rem; line-height: 1.7; color: var(--muted);
}
.callout-text strong {
  color: var(--text); font-weight: 500;
}
.article-img-visual {
  width: 100%; height: 240px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.article-img-visual svg {
  opacity: .25;
}
.article-img-wide {
  margin: 2.5rem -3rem;
}
.article-img-wide .article-img-visual {
  height: 300px; border-radius: 0;
}
.article-img-wide figcaption {
  border-radius: 0;
}
.article-divider::before, .article-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border);
}
.article-divider-icon {
  color: var(--sand); font-size: .9rem; opacity: .6;
}
.art-tag {
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  padding: .28rem .7rem; border-radius: 99px;
  border: 1px solid var(--border); color: var(--muted);
  text-decoration: none; transition: all .18s; background: none;
  cursor: pointer;
}
.art-tag:hover {
  border-color: var(--moss); color: var(--moss); background: rgba(61,107,80,0.05);
}
.art-nav-card.prev {
  align-items: flex-start;
}
.art-nav-card.next {
  align-items: flex-end; text-align: right;
}
.related-title {
  font-family: var(--font-serif); font-size: 1.4rem;
  font-weight: 900; letter-spacing: -.02em; color: var(--text);
}
.toc-header {
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--border);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); display: flex; align-items: center; gap: .5rem;
}
.toc-item.h3 {
  padding-left: 2.2rem; font-size: .78rem;
}
.cta-widget {
  background: linear-gradient(145deg, var(--forest), var(--forest-mid));
  border-radius: .75rem; overflow: hidden;
}
.cta-widget-head {
  padding: 1.4rem 1.4rem 0;
}
.cta-widget-label {
  font-size: .65rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--sage); margin-bottom: .6rem;
}
.cta-widget-title {
  font-family: var(--font-serif); font-size: 1.1rem;
  font-weight: 900; color: var(--cream); line-height: 1.2;
  letter-spacing: -.01em;
}
.cta-widget-title em {
  font-style: italic; color: var(--sand);
}
.cta-widget-body {
  padding: 1.2rem 1.4rem 1.4rem;
}
.cta-widget-text {
  font-size: .83rem; color: rgba(244,237,224,0.55);
  line-height: 1.65; margin-bottom: 1.2rem;
}
.cta-widget-btn {
  display: block; width: 100%; text-align: center;
  background: var(--sand); color: var(--forest);
  padding: .8rem; border-radius: .4rem;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: background .2s; margin-bottom: .8rem;
}
.cta-widget-btn:hover {
  background: var(--cream);
}
.cta-widget-phone {
  display: block; text-align: center;
  font-family: var(--font-serif); font-size: .95rem;
  font-weight: 700; color: var(--sand); text-decoration: none;
}
.newsletter-widget {
  background: var(--cream); border-radius: .75rem;
  border: 1px solid var(--border); padding: 1.4rem;
}
.nl-title {
  font-family: var(--font-serif); font-size: .95rem;
  font-weight: 700; color: var(--text); margin-bottom: .4rem;
}
.nl-desc {
  font-size: .8rem; color: var(--muted);
  line-height: 1.6; margin-bottom: 1rem;
}
.nl-input {
  width: 100%; padding: .65rem .85rem;
  border: 1px solid var(--border); border-radius: .35rem;
  font-family: var(--font-body); font-size: .83rem;
  color: var(--text); outline: none; background: var(--white);
  margin-bottom: .5rem; transition: border-color .2s;
}
.nl-input:focus {
  border-color: var(--moss);
}
.nl-input::placeholder {
  color: var(--light-muted);
}
.nl-btn {
  width: 100%; background: var(--forest); color: var(--cream);
  border: none; border-radius: .35rem; padding: .7rem;
  font-family: var(--font-body); font-size: .83rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.nl-btn:hover {
  background: var(--forest-mid);
}
footer {
  background: var(--forest); border-top: 3px solid var(--sand);
}
.footer-logo {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem;
  color: var(--cream); display: flex; align-items: center; gap: .6rem;
}
.footer-logo-dot {
  width: 9px; height: 9px; background: var(--sand); border-radius: 50%;
}

/* ────────────────────────────────────────────────────────
   PAGE DEVIS — 101 blocs manquants
   ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.logo {
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--cream); text-decoration: none; display: flex; align-items: center; gap: .6rem;
}
.logo-icon {
  width: 32px; height: 32px; background: var(--sand); border-radius: .35rem; display: grid; place-items: center; font-size: .95rem;
}
.nav-back svg {
  width: 14px; height: 14px;
}
.page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  padding-top: 64px;
}
.left-panel {
  background: var(--forest);
  padding: 5rem 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  min-height: calc(100vh - 64px);
}
.left-panel::before {
  content: '';
  position: absolute; bottom: -80px; right: -80px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(92,61,46,0.4) 0%, transparent 70%);
}
.left-panel::after {
  content: '';
  position: absolute; top: -50px; left: -50px;
  width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(61,107,80,0.3) 0%, transparent 70%);
}
.left-panel > * {
  position: relative; z-index: 1;
}
.panel-label {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sand); font-weight: 500; margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .6rem;
}
.panel-label::before {
  content: ''; width: 24px; height: 2px; background: var(--sand); display: block;
}
.panel-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900; line-height: 1.1; letter-spacing: -.02em;
  color: var(--cream); margin-bottom: 1.2rem;
}
.panel-title em {
  font-style: italic; color: var(--sand);
}
.panel-desc {
  font-size: .95rem; color: rgba(200,168,130,0.65);
  line-height: 1.75; margin-bottom: 3rem; max-width: 320px;
}
.reassurance {
  display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 3rem;
}
.reas-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: .6rem;
  transition: background .25s;
}
.reas-item:hover {
  background: rgba(255,255,255,0.07);
}
.reas-icon {
  width: 36px; height: 36px; border-radius: .4rem;
  background: rgba(200,168,130,0.15);
  display: grid; place-items: center; font-size: 1rem; flex-shrink: 0;
}
.reas-text {
  font-size: .85rem; color: rgba(200,168,130,0.75); line-height: 1.5;
}
.reas-text strong {
  display: block; font-weight: 500; color: var(--cream); margin-bottom: .15rem; font-size: .88rem;
}
.panel-contact {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: .8rem;
}
.panel-contact-line {
  display: flex; align-items: center; gap: .7rem;
  font-size: .85rem; color: rgba(200,168,130,0.5);
}
.panel-contact-line a {
  color: var(--sand); text-decoration: none; transition: opacity .2s;
}
.panel-contact-line a:hover {
  opacity: .75;
}
.right-panel {
  background: var(--white);
  padding: 4rem 4rem 4rem;
  overflow-y: auto;
}
.form-header {
  margin-bottom: 2.5rem;
}
.form-header h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); margin-bottom: .5rem;
}
.form-header p {
  font-size: .9rem; color: var(--muted); line-height: 1.6;
}
.steps-bar {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.step-item:not(:last-child)::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border); margin: 0 .5rem;
}
.step-num.active {
  background: var(--forest); border-color: var(--forest); color: #fff;
}
.step-num.done {
  background: var(--moss); border-color: var(--moss); color: #fff;
}
.step-item.active .step-label {
  color: var(--forest); font-weight: 500;
}
.form-section.active {
  display: block; animation: fadeIn .35s ease;
}
from {
  opacity: 0; transform: translateY(10px);
}
to {
  opacity: 1; transform: translateY(0);
}
} .section-title {
  font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700;
  color: var(--text); margin-bottom: .4rem; letter-spacing: -.01em;
}
.section-sub {
  font-size: .85rem; color: var(--muted); margin-bottom: 1.8rem; line-height: 1.5;
}
.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.8rem;
}
.svc-option {
  border: 1.5px solid var(--border);
  border-radius: .6rem; padding: 1.2rem 1rem;
  cursor: pointer; transition: all .2s;
  text-align: center; user-select: none;
  background: var(--ivory);
}
.svc-option:hover {
  border-color: var(--sage); background: var(--green-xl);
}
.svc-option.selected {
  border-color: var(--forest); background: var(--green-xl);
}
.svc-option.selected .svc-opt-name {
  color: var(--forest); font-weight: 500;
}
.svc-opt-ico {
  font-size: 1.5rem; margin-bottom: .5rem; display: block;
}
.svc-opt-name {
  font-size: .82rem; color: var(--text); line-height: 1.35;
}
.field-row.full {
  grid-template-columns: 1fr;
}
.field {
  display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem;
}
label {
  font-size: .8rem; font-weight: 500; color: var(--text);
  letter-spacing: .03em; text-transform: uppercase;
}
label .req {
  color: var(--earth); margin-left: .2rem;
}
input, select, textarea {
  width: 100%; padding: .8rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: .5rem;
  font-family: var(--font-body); font-size: .92rem; font-weight: 300;
  color: var(--text); background: var(--ivory);
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--moss);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(61,107,80,0.1);
}
input::placeholder, textarea::placeholder {
  color: rgba(138,112,96,0.4);
}
.urgency-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin-bottom: 1.5rem;
}
.urgency-opt {
  border: 1.5px solid var(--border); border-radius: .6rem;
  padding: .9rem 1rem; cursor: pointer; transition: all .2s;
  background: var(--ivory); text-align: center;
}
.urgency-opt:hover {
  border-color: var(--sage);
}
.urgency-opt.selected {
  border-color: var(--earth); background: var(--brown-xl);
}
.urg-emoji {
  font-size: 1.2rem; display: block; margin-bottom: .3rem;
}
.urg-label {
  font-size: .8rem; color: var(--text); font-weight: 400;
}
.urgency-opt.selected .urg-label {
  color: var(--earth); font-weight: 500;
}
.check-row {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .9rem 1rem; border-radius: .5rem;
  border: 1.5px solid var(--border); margin-bottom: .6rem;
  cursor: pointer; transition: background .2s, border-color .2s;
  background: var(--ivory);
}
.check-row:hover {
  background: var(--green-xl); border-color: var(--sage);
}
.check-row input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; margin-top: .1rem;
  border-radius: 4px; cursor: pointer; padding: 0;
  accent-color: var(--forest);
}
.check-row-text {
  font-size: .88rem; color: var(--text); line-height: 1.5;
}
.check-row-text span {
  display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem;
}
.notice {
  background: var(--green-xl); border: 1px solid rgba(61,107,80,0.2);
  border-radius: .5rem; padding: 1rem 1.2rem;
  display: flex; gap: .8rem; align-items: flex-start;
  margin-bottom: 1.5rem;
}
.notice-icon {
  font-size: 1rem; flex-shrink: 0; margin-top: .05rem;
}
.notice p {
  font-size: .83rem; color: var(--forest); line-height: 1.6;
}
.btn-prev {
  display: flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: var(--muted); background: none; border: none;
  cursor: pointer; font-family: var(--font-body); padding: .6rem 0;
  transition: color .2s;
}
.btn-prev:hover {
  color: var(--text);
}
.btn-prev svg {
  width: 14px; height: 14px;
}
.btn-next, .btn-submit {
  display: flex; align-items: center; gap: .5rem;
  background: var(--forest); color: #fff;
  padding: .85rem 2rem; border-radius: .5rem;
  font-family: var(--font-body); font-weight: 500; font-size: .95rem;
  border: none; cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(30,58,47,0.25);
}
.btn-next:hover, .btn-submit:hover {
  background: var(--moss); transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(30,58,47,0.3);
}
.btn-next svg, .btn-submit svg {
  width: 15px; height: 15px;
}
.btn-submit {
  background: var(--earth); box-shadow: 0 4px 20px rgba(92,61,46,0.25);
}
.btn-submit:hover {
  background: var(--moss);
}
.progress-wrap {
  margin-bottom: 2rem;
}
.progress-track {
  height: 3px; background: var(--border); border-radius: 99px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--moss), var(--sand)); border-radius: 99px; transition: width .5s ease;
}
.progress-label {
  font-size: .75rem; color: var(--muted); margin-bottom: .6rem; text-align: right;
}
.success-screen {
  display: none; text-align: center;
  padding: 3rem 0; animation: fadeIn .5s ease;
}
.success-screen.visible {
  display: block;
}
from {
  transform: scale(0); opacity: 0;
}
to {
  transform: scale(1); opacity: 1;
}
} .success-screen h2 {
  font-family: var(--font-serif); font-size: 1.8rem; color: var(--text); margin-bottom: .8rem;
}
.success-screen p {
  font-size: .95rem; color: var(--muted); line-height: 1.7; max-width: 360px; margin: 0 auto 2rem;
}
.success-card {
  background: var(--ivory); border: 1px solid var(--border);
  border-radius: .8rem; padding: 1.5rem; margin-bottom: 2rem;
  text-align: left; max-width: 380px; margin-left: auto; margin-right: auto;
}
.success-card-row {
  display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.success-card-row:last-child {
  border-bottom: none;
}
.success-card-row .ico {
  font-size: 1rem; flex-shrink: 0;
}
.success-card-row p {
  font-size: .85rem; color: var(--muted);
}
.success-card-row strong {
  color: var(--text); font-weight: 500;
}
.btn-home {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--forest); color: #fff; padding: .8rem 2rem; border-radius: .5rem; font-weight: 500; text-decoration: none; font-size: .92rem; transition: background .2s;
}
.btn-home:hover {
  background: var(--moss);
}
.page {
  grid-template-columns: 1fr;
}
.left-panel {
  min-height: auto; padding: 4rem 1.5rem 3rem;
}
.panel-desc {
  max-width: 100%;
}
.right-panel {
  padding: 2.5rem 1.5rem;
}
.service-grid {
  grid-template-columns: repeat(2,1fr);
}
.urgency-grid {
  grid-template-columns: repeat(3,1fr);
}
.service-grid {
  grid-template-columns: repeat(2,1fr);
}
.steps-bar {
  gap: .3rem;
}

/* ─────────────────────────────────────────────────────
   @keyframes manquants
   ───────────────────────────────────────────────────── */
@keyframes hoverdrone {
    0%,100% { transform: translateY(0) rotate(-2deg); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); }
@keyframes pop { from { transform: scale(0); opacity: 0; }



/* ── Sélecteurs wrappers (display:flex/grid implicite) ── */

/* Homepage */
.hero-mini-stat        { display: flex; flex-direction: column; gap: .2rem; }
.float-text            { display: flex; flex-direction: column; gap: .1rem; }
.blog-head-left        { display: flex; flex-direction: column; gap: .4rem; }
.expertise-left        { display: flex; flex-direction: column; gap: 0; }

/* Page service */
.pres-left             { display: flex; flex-direction: column; gap: 0; }
.pres-right            { display: flex; flex-direction: column; gap: 0; }
.cta-text              { display: flex; flex-direction: column; gap: 0; }
.step-content          { display: flex; flex-direction: column; gap: .35rem; }

/* Blog */
.blog-hero-left        { display: flex; flex-direction: column; gap: 0; }
.recent-text           { display: flex; flex-direction: column; gap: .25rem; }

/* Article */
.author-info           { display: flex; flex-direction: column; gap: .05rem; }
.bio-content           { display: flex; flex-direction: column; gap: 0; }
.callout-content       { display: flex; flex-direction: column; gap: 0; }

/* ============================================================
   26. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  :root { --max-w: 100%; }
  .inner { padding-inline: 2rem; }

  nav, .site-nav { padding-inline: 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }

  .hero-home { grid-template-columns: 1fr; }
  .hero-home__right { display: none; }
  .hero-home__left { max-width: 100%; padding-right: 2rem; }

  .services__grid { grid-template-columns: 1fr 1fr; }
  .expertise__inner { grid-template-columns: 1fr; gap: 3rem; }

  .devis-layout { grid-template-columns: 1fr; }
  .devis-left   { position: static; height: auto; }

  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }

  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { order: -1; }
}

@media (max-width: 768px) {
  .hero-home__title { font-size: 2.2rem; }
  .section-title    { font-size: 1.6rem; }

  .services__head   { grid-template-columns: 1fr; gap: 1.5rem; }
  .services__grid   { grid-template-columns: 1fr; }
  .processus__steps { grid-template-columns: 1fr 1fr; }
  .processus__steps::before { display: none; }

  .cta__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .articles-grid { grid-template-columns: 1fr; }
  .art-card--wide { flex-direction: column; }
  .art-card--wide .art-card__visual { width: 100%; height: 160px; }

  .related-grid { grid-template-columns: 1fr; }
  .article-nav  { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .hero-service__inner { grid-template-columns: 1fr; }
  .hero-service__visual { display: none; }
  .hero-blog__inner { grid-template-columns: 1fr; }
  .hero-blog__stats { flex-direction: row; align-items: stretch; justify-content: flex-start; }

  .service-selector { grid-template-columns: 1fr 1fr; }
  .field-row        { grid-template-columns: 1fr; }

  .breadcrumb-bar { padding-inline: 1.2rem; }
  .nav-links { display: none; }
}

@media (max-width: 480px) {
  .inner { padding-inline: 1.2rem; }
  nav, .site-nav { padding-inline: 1.2rem; }
  .processus__steps { grid-template-columns: 1fr; }
  .expertise__grid  { grid-template-columns: 1fr; }
  .service-selector { grid-template-columns: 1fr; }
  .urgency-group    { flex-direction: column; }
  .footer-bottom    { flex-direction: column; }
  .footer-legal     { flex-wrap: wrap; gap: .8rem; }
  .hero-mini-stats  { gap: 1.2rem; }
  .stats-bar__inner { grid-template-columns: 1fr 1fr; }
}