/* ============================================================================
   DOLCRÉA — FEUILLE DE STYLE PRINCIPALE
   Sommaire (cherchez les tags ===):
   === 0. POLICES AUTO-HÉBERGÉES
   === 1. VARIABLES & TOKENS DE MARQUE
   === 2. RESET & BASE
   === 3. TYPOGRAPHIE
   === 4. MISE EN PAGE / CONTAINERS / UTILITAIRES
   === 5. BOUTONS & LIENS
   === 6. EN-TÊTE / NAVIGATION (+ méga-menus déroulants)
   === 7. MENU MOBILE (BURGER)
   === 8. HERO
   === 9. BANDEAU CONFIANCE / AVIS GOOGLE
   === 10. SECTIONS GÉNÉRIQUES & EYEBROW
   === 11. CARTES SERVICES
   === 12. ÉTAPES ACCOMPAGNEMENT
   === 13. RÉALISATIONS (grille + slider)
   === 14. AVIS CLIENTS (slider)
   === 15. BLOG (grille + article)
   === 16. CTA BANDE
   === 17. FOOTER
   === 18. FORMULAIRE DE CONTACT
   === 19. PAGES LÉGALES
   === 20. ANIMATIONS / REVEAL AU SCROLL
   === 21. RESPONSIVE
   ============================================================================ */

/* === 0. POLICES AUTO-HÉBERGÉES ============================================
   Anciennement chargées depuis fonts.googleapis.com / fonts.gstatic.com.
   Auto-hébergées le 04/08/2026 : évite le transfert de l'IP du visiteur
   vers les serveurs Google (point RGPD/CNIL) et supprime 2 requêtes DNS
   externes au chargement (gain de performance).
   ========================================================================= */
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/jost-400.woff2') format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/jost-500.woff2') format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/jost-600.woff2') format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/jost-700.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/barlow-400.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/barlow-500.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/barlow-600.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/barlow-700.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/cormorant-garamond-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/cormorant-garamond-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:600; font-display:swap;
  src:url('fonts/cormorant-garamond-600-italic.woff2') format('woff2');
}

/* === 1. VARIABLES & TOKENS DE MARQUE ===================================== */
:root{
  /* Palette Dolcréa */
  --noir-mat:      #161412;  /* Texte principal */
  --brun-charbon:  #2A2620;  /* Ombres, fonds foncés (footer) */
  --terre-brulee:  #C45A28;  /* Couleur signature / hover boutons */
  --terre-clair:   #E8A878;  /* Boutons, highlight */
  --terre-fonce:   #9C4218;  /* Actif, accent titres H2 */
  --gris-pierre:   #8A8278;  /* Neutres, textures, texte secondaire */
  --blanc-casse:   #F4F2F0;  /* Fond clair (sections alternées) */
  --blanc:         #FFFFFF;  /* Fond principal du site */

  /* Couleurs d'accent par catégorie de blog — palette étendue, ton sur ton avec la signature */
  --cat-bleu:        #3B6E86;  /* SEO */
  --cat-vert:        #4F7A5B;  /* Tendances */
  --cat-terracotta:  #B3452F;  /* Performance */
  --cat-ardoise:     #4A5A6B;  /* Conseils techniques */
  --cat-or:          #B4872E;  /* Web marketing */
  --cat-mauve:       #8C5A72;  /* Relation client */
  --cat-violet:      #6B4A7D;  /* Branding */
  --cat-sarcelle:    #2F7A72;  /* Conseils */
  --cat-marine:      #34495E;  /* Juridique & RGPD */

  /* Polices */
  --font-display:   'Jost', sans-serif;            /* Titres, slides */
  --font-narrative: 'Cormorant Garamond', serif;    /* Citations, avis, italiques */
  --font-body:       'Jost', sans-serif;            /* Texte courant */
  --font-ui:         'Barlow', sans-serif;           /* Boutons, nav, labels */

  /* Échelle d'espacement */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;

  /* Rayons & ombres — courbes douces, en écho au tracé du logo */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-pill: 100px;
  --shadow-soft: 0 10px 30px -10px rgba(42,38,32,.12);
  --shadow-strong: 0 20px 50px -15px rgba(42,38,32,.22);

  --container: 1240px;
  --header-h: 92px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* === 2. RESET & BASE ====================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--blanc);
  color:var(--noir-mat);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
:focus-visible{ outline:3px solid var(--terre-clair); outline-offset:3px; border-radius:4px; }
section{ position:relative; }

/* === 3. TYPOGRAPHIE ======================================================= */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 var(--space-sm);
  color:var(--noir-mat);
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.4rem,5vw,4rem); font-weight:600; }
h1 .accent, h2 .accent{ color:var(--terre-fonce); }
h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
h3{ font-size:clamp(1.25rem,2vw,1.5rem); font-weight:600; }
h4{ font-size:1.05rem; font-weight:600; font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.04em; }
p{ margin:0 0 var(--space-sm); color:var(--noir-mat); }
.lead{ font-size:1.2rem; color:var(--brun-charbon); }
.text-muted{ color:var(--gris-pierre); }
.citation, blockquote{
  font-family:var(--font-narrative);
  font-style:italic;
  font-size:1.4rem;
  line-height:1.5;
  color:var(--brun-charbon);
  margin:0;
}
.eyebrow{
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:600;
  color:var(--terre-brulee);
  display:inline-flex;
  align-items:center;
  margin-bottom:var(--space-sm);
}

/* === 4. MISE EN PAGE / CONTAINERS / UTILITAIRES =========================== */
.container{ max-width:var(--container); margin:0 auto; padding:0 1.5rem;}
.container-narrow{ max-width:780px; margin:0 auto; padding:0 1.5rem; }
.section{ padding:var(--space-sm) 0; }
.section-sm{ padding:var(--space-xl) 0; }
.section-alt{ background:var(--blanc-casse); }
.section-dark{ background:var(--noir-mat); color:var(--blanc-casse); }
.section-dark h2, .section-dark h3, .section-dark p{ color:var(--blanc-casse); }
.section-header{ max-width:680px; margin-bottom:var(--space-lg); }
.section-header.center{ margin-left:auto; margin-right:auto; text-align:center; }
.grid{ display:grid; gap:var(--space-md); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-sm{ gap:var(--space-sm); }
.gap-md{ gap:var(--space-md); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.divider-swoosh{ width:100%; max-width:220px; height:30px; opacity:.7; margin:var(--space-sm) 0; }
.sr-only{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--noir-mat); color:var(--blanc);
  padding:.6rem 1rem; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* === 5. BOUTONS & LIENS =================================================== */
.btn{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.95rem 1.9rem;
  border:2px solid transparent;
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); flex-shrink:0; }
.btn-primary{ background:var(--terre-clair); color:var(--noir-mat); }
.btn-primary:hover{ background:var(--terre-brulee); color:var(--blanc); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.btn-primary:hover svg{ transform:translateX(3px); }
.btn-dark{ background:var(--noir-mat); color:var(--blanc-casse); }
.btn-dark:hover{ background:var(--terre-brulee); color:var(--blanc); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:var(--blanc-casse); color:var(--blanc-casse); }
.btn-outline:hover{ background:var(--noir-mat); color:var(--blanc); border: var(--noir-mat); }
.btn-outline-light{ background:transparent; border-color:rgba(244,242,240,.4); color:var(--blanc-casse); }
.btn-outline-light:hover{ background:var(--blanc-casse); color:var(--noir-mat); border-color:var(--blanc-casse); }
.btn-sm{ padding:.65rem 1.3rem; font-size:.85rem; }
.btn-block{ width:100%; justify-content:center; }
.link-arrow{
  font-family:var(--font-ui); font-weight:600; font-size:.9rem;
  display:inline-flex; align-items:center; gap:.4rem; color:var(--terre-fonce);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:.3s var(--ease);
  justify-content: center;
}
.link-arrow svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.link-arrow:hover{ color:var(--terre-brulee); border-color:var(--terre-brulee); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* === 6. EN-TÊTE / NAVIGATION ============================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(22,20,18,.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 8px 24px -12px rgba(22,20,18,.12); }
.site-header.is-hidden{ transform:translateY(-100%); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h);
  max-width:var(--container); margin:0 auto; padding:0 1.5rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand img{ height:46px; width:auto; }
.brand-word{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:.01em; color:var(--noir-mat); }

.main-nav{ display:flex; align-items:center; gap:.2rem; }
.main-nav > ul{ display:flex; align-items:center; gap:.2rem; }
.nav-link{
  font-family:var(--font-ui); font-weight:600; font-size:.92rem;
  color:var(--noir-mat); padding:.85rem 1rem; display:inline-flex; align-items:center; gap:.35rem;
  transition:color .25s, background .25s;
}
.nav-link svg{ width:11px; height:11px; transition:transform .3s var(--ease); }
.nav-link:hover, .nav-link:focus-visible{ color:var(--terre-brulee); background:var(--blanc-casse); }
.nav-item{ position:relative; }
.nav-item.has-mega:hover .nav-link svg,
.nav-item.has-mega.is-open .nav-link svg{ transform:rotate(180deg); }
.nav-item.is-current > .nav-link{ color:var(--terre-fonce); }

.mega-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  width:min(640px,92vw);
  background:var(--blanc);
  box-shadow:var(--shadow-strong);
  border:1px solid rgba(22,20,18,.06);
  padding:1.4rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:50;
}
.nav-item.has-mega:hover .mega-menu,
.nav-item.has-mega.is-open .mega-menu,
.mega-menu:hover{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.mega-link{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:.8rem .9rem; 
  transition:background .25s;
}
.mega-link:hover{ background:var(--blanc-casse); }
.mega-link .mega-ico{
  width:40px; height:40px; flex-shrink:0; border-radius:10px;
  background:var(--blanc-casse); display:flex; align-items:center; justify-content:center;
  color:var(--terre-brulee);
}
.mega-link .mega-ico svg{ width:19px; height:19px; }
.mega-link strong{ display:block; font-family:var(--font-ui); font-size:.92rem; font-weight:600; color:var(--noir-mat); margin-bottom:.15rem;}
.mega-link span{ font-size:.82rem; color:var(--gris-pierre); line-height:1.35; }
.mega-menu .mega-footer{
  grid-column:1 / -1; margin-top:.4rem; padding-top:.9rem; border-top:1px solid rgba(22,20,18,.08);
}

.header-cta{ display:flex; align-items:center; gap:.6rem; }
.header-cta .btn{ padding:.75rem 1.5rem; }

/* === 7. MENU MOBILE (BURGER) ============================================== */
.burger{
  display:none; width:46px; height:46px; border-radius:50%;
  background:var(--blanc-casse); border:none; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.burger span{ width:20px; height:2px; background:var(--noir-mat); display:block; transition:.3s var(--ease); }
.burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; top:var(--header-h);
  background:var(--blanc); z-index:99;
  transform:translateX(100%); transition:transform .4s var(--ease);
  overflow-y:auto; padding:1.5rem 1.5rem 3rem;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav .m-link{
  font-family:var(--font-ui); font-weight:600; font-size:1.15rem;
  padding:1rem 0; border-bottom:1px solid rgba(22,20,18,.08);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-nav .m-sub{ display:none; padding-left:1rem; }
.mobile-nav .m-sub.is-open{ display:block; }
.mobile-nav .m-sub a{ display:block; padding:.7rem 0; color:var(--gris-pierre); font-family:var(--font-body); }
.mobile-nav .m-toggle svg{ width:13px; height:13px; transition:transform .3s; }
.mobile-nav .m-toggle.is-open svg{ transform:rotate(180deg); }
.mobile-nav .mobile-cta{ margin-top:1.5rem; }
.mobile-nav .mobile-contact{ margin-top:2rem; font-family:var(--font-ui); font-size:.9rem; color:var(--gris-pierre); }
.mobile-nav .mobile-contact a{ color:var(--terre-brulee); font-weight:600; }
body.nav-open{ overflow:hidden; }

/* === 8. HERO =============================================================== */
.hero{
  padding-top:calc(var(--header-h) + 4.5rem);
  padding-bottom:5rem;
  overflow:hidden;
   background-image: url('images/Femme\ pc\ bureau.svg');
}
.hero-inner{ 
  display:grid; 
  grid-template-columns:1.1fr .9fr; 
  gap:3rem; 
  align-items:center; 
}


.hero-eyebrow-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.hero-pill{
  font-family:var(--font-ui); font-size:.78rem; font-weight:600; letter-spacing:.04em;
  padding:.45rem 1rem;  background:var(--blanc-casse); color:var(--brun-charbon);
}
.hero h1{ margin-bottom:1.3rem; }
.hero .lead{ max-width:520px; margin-bottom:2rem; color:var(--blanc-casse); }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.7rem; }
.hero-trust{ display:flex; align-items:center; gap:1.1rem; }
.hero-trust .stars{ color:var(--terre-brulee); font-size:1rem; letter-spacing:2px; }
.hero-trust strong{ font-family:var(--font-ui); }
.hero-trust span{ font-size:.85rem; color:var(--gris-pierre); display:block; }

.hero-visual{ position:relative; }
.hero-art{
  position:relative; overflow:hidden;
  background:linear-gradient(155deg,#fff 0%, var(--blanc-casse) 100%);
  aspect-ratio:4/4.6; box-shadow:var(--shadow-strong);
  display:flex; align-items:center; justify-content:center;
}
.hero-art svg{ width:78%; height:78%; }
.hero-float-card{
  position:absolute; bottom:-1.4rem; left:-1.6rem;
  background:var(--blanc); box-shadow:var(--shadow-strong);
  padding:1.1rem 1.4rem; display:flex; align-items:center; gap:.8rem; max-width:230px;
}
.hero-float-card .ico{ width:42px; height:42px; border-radius:50%; background:var(--terre-clair); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-float-card .ico svg{ width:20px; height:20px; color:var(--noir-mat); }
.hero-float-card strong{ display:block; font-size:.95rem; }
.hero-float-card span{ font-size:.78rem; color:var(--gris-pierre); }
.hero-float-top{
  position:absolute; top:1.6rem; right:-1.2rem; background:var(--noir-mat); color:var(--blanc-casse);
  padding:.6rem 1.1rem; font-family:var(--font-ui); font-size:.8rem; font-weight:600;
  box-shadow:var(--shadow-strong);
}

.hero-title{
  color: var(--blanc-casse);
}

.hero-preuve{
  color: var(--gris-pierre);
}

/* === 9. BANDEAU CONFIANCE / AVIS GOOGLE ==================================== */
.trustbar{ padding:2.4rem 0; border-top:1px solid rgba(22,20,18,.07); border-bottom:1px solid rgba(22,20,18,.07); }
.trustbar-inner{ display:flex; align-items:center; justify-content:center; gap:2.6rem; flex-wrap:wrap; text-align:center; }
.trustbar-item{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.trustbar-item .num{ font-family:var(--font-display); font-size:1.9rem; font-weight:600; color:var(--terre-fonce); }
.trustbar-item .label{ font-family:var(--font-body); font-size:1.2rem; color:var(--noir-mat); letter-spacing:.06em; }

/* === 10. SECTIONS GÉNÉRIQUES =============================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.split-media{ overflow:hidden; box-shadow:var(--shadow-soft); }
.swoosh-rule{ width:140px; height:18px; margin:1.5rem 0; opacity:.85; }

/* === 11. CARTES SERVICES =================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.service-card{
  background:var(--blanc); border:1px solid rgba(22,20,18,.08); 
  padding:2.2rem 1.9rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  display:flex; flex-direction:column; height:100%;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-strong); border-color:transparent; }

/* ── Cartes avec photo de fond : overlay pour garantir la lisibilité du texte ── */
.service-card.has-photo{ position:relative; color:var(--blanc-casse); overflow:hidden; }
.service-card.has-photo::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,20,18,.15) 0%, rgba(22,20,18,.35) 55%, rgba(22,20,18,.75) 100%);
  z-index:0;
}
.service-card.has-photo > *{ position:relative; z-index:1; }
.service-card.has-photo h3{ color:var(--blanc-casse) !important; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.service-card.has-photo p{ color:rgba(244,242,240,.85); }
.service-card.has-photo .s-ico{ background:rgba(244,242,240,.18); color:var(--blanc-casse); backdrop-filter:blur(3px); }
.service-card.has-photo:hover .s-ico{ background:var(--terre-brulee); color:var(--blanc); }
.service-card.has-photo .link-arrow{ color:var(--blanc-casse); }
.service-card .s-ico{
  width:54px; height:54px; border-radius:14px; background:var(--blanc-casse);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; color:var(--terre-brulee);
  transition:background .35s, color .35s;
}

.s-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px; /* ajuste selon ton espacement actuel */
}

.s-header h3 {
  margin: 0; /* supprime la marge par défaut du h3 */
}


.service-card:hover .s-ico{ background:var(--terre-brulee); color:var(--blanc); }
.service-card .s-ico svg{ width:26px; height:26px; }
.service-card h3{ margin-bottom:.6rem; }
.service-card p{ color:var(--gris-pierre); font-size:.94rem; flex-grow:1; }
.service-card .s-price{ font-family:var(--font-ui); font-weight:700; color:var(--terre-fonce); font-size:.92rem; margin:.6rem 0 1rem; }
.service-card .link-arrow{ margin-top:auto; }

/* --- Effet de révélation en cascade (façon "loader") au scroll ---
   Chaque carte démarre comme une petite pastille centrée (clip-path),
   glisse légèrement depuis la droite, puis s'ouvre vers sa taille
   complète. Les cartes s'enchaînent avec un léger décalage. --- */
.services-grid .service-card{ opacity:0; }
.services-grid.is-revealing .service-card{
  animation:svc-card-reveal .2s var(--ease) forwards;
}
.services-grid.is-revealing .service-card:nth-child(1){ animation-delay:.05s; }
.services-grid.is-revealing .service-card:nth-child(2){ animation-delay:.17s; }
.services-grid.is-revealing .service-card:nth-child(3){ animation-delay:.29s; }
.services-grid.is-revealing .service-card:nth-child(4){ animation-delay:.41s; }
.services-grid.is-revealing .service-card:nth-child(5){ animation-delay:.53s; }
.services-grid.is-revealing .service-card:nth-child(6){ animation-delay:.65s; }

/* une fois l'animation terminée : on la retire pour rendre la main
   au survol (.service-card:hover) et éviter tout conflit de transform */
.services-grid .service-card.is-revealed{
  animation:none;
  opacity:1;
  clip-path:none;
  transform:none;
}

@keyframes svc-card-reveal{
  0%{
    opacity:0;
    clip-path:inset(42% 42% 42% 42% round 30px);
    transform:translateX(36px) scale(.92);
  }
  30%{
    opacity:1;
    clip-path:inset(42% 42% 42% 42% round 30px);
    transform:translateX(0) scale(.95);
  }
  60%{
    opacity:1;
    clip-path:inset(0% 0% 0% 0% round 30px);
    transform:translateX(0) scale(.98);
  }
  100%{
    opacity:1;
    clip-path:inset(0% 0% 0% 0% round 0px);
    transform:translateX(0) scale(1);
  }
}

/* Page liste services : grand bloc avec image */
.service-row{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center;
  padding:var(--space-xl) 0; border-bottom:1px solid rgba(22,20,18,.08);
}
.service-row:last-child{ border-bottom:none; }
.service-row.reverse .service-row-media{ order:2; }
.service-row-media{  overflow:hidden; box-shadow:var(--shadow-soft); aspect-ratio:5/4; }
.service-row-tag{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.service-row-tag .price-badge{
  font-family:var(--font-ui); font-weight:700; font-size:.85rem; color:var(--blanc);
  background:var(--terre-fonce); padding:.4rem .9rem; 
}
.service-row ul.check-list{ margin:1.2rem 0; }
.check-list li{ display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.6rem; font-size:.96rem; }
.check-list svg{ width:18px; height:18px; color:var(--terre-brulee); flex-shrink:0; margin-top:3px; }

/* === Page service détail : tarif === */
.price-box{
  background:var(--blanc-casse); padding:2.4rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem;
  margin:2.5rem 0;
}
.price-box .price-value{ font-family:var(--font-display); font-size:2.3rem; font-weight:600; color:var(--terre-fonce); }
.price-box .price-unit{ font-family:var(--font-ui); font-size:.95rem; color:var(--gris-pierre); }
.price-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.price-table{ width:100%; min-width:400px; border-collapse:collapse; margin:2rem 0; }
.price-table th,.price-table td{ text-align:left; padding:1rem .8rem 1rem 0; border-bottom:1px solid rgba(22,20,18,.1); }
.price-table th{ font-family:var(--font-ui); text-transform:uppercase; font-size:.78rem; letter-spacing:.05em; color:var(--gris-pierre); }
.price-table td strong{ color:var(--terre-fonce); white-space:nowrap; }
.price-table th:last-child,.price-table td:last-child{ text-align:right; padding-right:0; white-space:nowrap; }
.process-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin:2rem 0; }
.process-mini .pm-step{ background:var(--blanc); border:1px solid rgba(22,20,18,.08);  padding:1.3rem; }
.process-mini .pm-num{ font-family:var(--font-display); color:var(--terre-clair); font-size:1.6rem; font-weight:600; }

/* === 12. ÉTAPES ACCOMPAGNEMENT ============================================= */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.step-card{ background:var(--blanc); padding:2rem 1.7rem; box-shadow:var(--shadow-soft); }
.step-card .step-ico{ width:48px; height:48px; margin-bottom:1.1rem; color:var(--terre-brulee); }
.step-card .step-ico svg{ width:100%; height:100%; }
.step-card h3{ font-size:1.08rem; }
.step-card p{ font-size:.9rem; color:var(--gris-pierre); }

/* === 13. RÉALISATIONS ====================================================== 
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.work-card{ overflow:hidden; position:relative; box-shadow:var(--shadow-soft); background:var(--blanc-casse); }
.work-card .work-media{ aspect-ratio:4/3.2; overflow:hidden; }
.work-card .work-media svg{ width:100%; height:100%; transition:transform .6s var(--ease); }
.work-card:hover .work-media svg{ transform:scale(1.06) rotate(-1deg); }
.work-card .work-body{ padding:1.4rem 1.5rem 1.6rem; }
.work-card .work-tag{ font-family:var(--font-ui); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--terre-brulee); font-weight:700; }
.work-card h3{ font-size:1.15rem; margin:.4rem 0 .6rem; }
.work-card p{ font-size:.88rem; color:var(--gris-pierre); margin-bottom:.8rem; }

.work-slider{ overflow:hidden; }
.work-track{ display:flex; gap:1.5rem; transition:transform .6s var(--ease); }
.work-track .work-card{ flex:0 0 calc(33.333% - 1rem); }
.slider-controls{ display:flex; justify-content:flex-end; gap:.7rem; margin-bottom:1.6rem; }
.slider-btn{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(22,20,18,.15);
  background:var(--blanc); display:flex; align-items:center; justify-content:center; transition:.3s;
}
.slider-btn:hover{ background:var(--noir-mat); border-color:var(--noir-mat); color:var(--blanc); }
.slider-btn svg{ width:18px; height:18px; }

/* page réalisation détail *
.work-hero-media{  overflow:hidden; box-shadow:var(--shadow-strong); margin:2rem 0 3rem; }
.work-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; background:var(--blanc-casse); padding:1.8rem; margin-bottom:2.5rem; }
.work-meta div span{ display:block; font-family:var(--font-ui); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gris-pierre); margin-bottom:.3rem; }
.work-meta div strong{ font-family:var(--font-ui); font-size:.98rem; }
.work-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:2rem 0; }
.work-gallery svg{  box-shadow:var(--shadow-soft); }


----- ====================================================================- */

/* === 14. AVIS CLIENTS (slider) ============================================= */
.reviews-section{ overflow:hidden; }
.reviews-track-wrap{ overflow:hidden; }
.reviews-track{ display:flex; gap:1.5rem; transition:transform .6s var(--ease); }
.review-card{
  flex:0 0 calc(33.333% - 1rem); background:var(--blanc); border:1px solid rgba(22,20,18,.08);
  padding:2rem; display:flex; flex-direction:column;
}
.review-stars{ color:var(--terre-brulee); letter-spacing:3px; margin-bottom:1rem; font-size:.95rem; }
.review-card .citation{ font-size:1.12rem; flex-grow:1; margin-bottom:1.4rem; }
.review-author{ display:flex; align-items:center; gap:.8rem; }
.review-avatar{
  width:46px; height:46px; border-radius:50%; background:var(--blanc-casse); color:var(--terre-fonce);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-weight:700;
}
.review-author strong{ display:block; font-size:.92rem; }
.review-author span{ font-size:.78rem; color:var(--gris-pierre); }
.reviews-dots{ display:flex; gap:.5rem; justify-content:center; margin-top:2rem; }
.reviews-dots button{ width:9px; height:9px; border-radius:50%; background:rgba(22,20,18,.18); border:none; padding:0; transition:.3s; }
.reviews-dots button.is-active{ background:var(--terre-brulee); width:24px; border-radius:5px; }

/* === 15. BLOG =============================================================== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.blog-card{ background:var(--blanc); overflow:hidden; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease); border-top:4px solid var(--terre-brulee); }
.blog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-strong); }
/* Taille des vignettes réduite (bandeau plus fin, plus élégant) + halo couleur au survol */
.blog-card .blog-media{ aspect-ratio:2/1; overflow:hidden; position:relative; }
.blog-card .blog-media svg{ width:100%; height:100%; }
.blog-card .blog-media img{ transition:transform .5s var(--ease); }
.blog-card:hover .blog-media img{ transform:scale(1.06); }
.blog-card .blog-body{ padding:1.4rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex-grow:1; }
.blog-meta{ display:flex; gap:.8rem; align-items:center; font-family:var(--font-ui); font-size:.74rem; color:var(--gris-pierre); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.7rem; }
.blog-meta .cat{ color:var(--terre-brulee); font-weight:700; display:inline-flex; align-items:center; gap:.4rem; }
.blog-meta .cat::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.blog-card h3{ font-size:1.12rem; margin-bottom:.6rem; }
.blog-card p{ font-size:.89rem; color:var(--gris-pierre); flex-grow:1; }
.blog-card .link-arrow{ margin-top:1rem; }

/* Déclinaisons couleur par catégorie — uniquement la puce/texte du badge (pas d'héritage vers le reste du texte) */
.cat.cat-seo{ color:var(--cat-bleu); }
.cat.cat-tendances{ color:var(--cat-vert); }
.cat.cat-performance{ color:var(--cat-terracotta); }
.cat.cat-conseils-techniques{ color:var(--cat-ardoise); }
.cat.cat-web-marketing{ color:var(--cat-or); }
.cat.cat-relation-client{ color:var(--cat-mauve); }
.cat.cat-branding{ color:var(--cat-violet); }
.cat.cat-conseils{ color:var(--cat-sarcelle); }
.cat.cat-juridique-rgpd{ color:var(--cat-marine); }

.blog-card.cat-bonnes-pratiques{ border-top-color:var(--terre-brulee); }
.blog-card.cat-seo{ border-top-color:var(--cat-bleu); }
.blog-card.cat-tendances{ border-top-color:var(--cat-vert); }
.blog-card.cat-performance{ border-top-color:var(--cat-terracotta); }
.blog-card.cat-conseils-techniques{ border-top-color:var(--cat-ardoise); }
.blog-card.cat-web-marketing{ border-top-color:var(--cat-or); }
.blog-card.cat-relation-client{ border-top-color:var(--cat-mauve); }
.blog-card.cat-branding{ border-top-color:var(--cat-violet); }
.blog-card.cat-conseils{ border-top-color:var(--cat-sarcelle); }
.blog-card.cat-juridique-rgpd{ border-top-color:var(--cat-marine); }

.article-header{ padding-top:calc(var(--header-h) + 3rem); }
/* Hero d'article : hauteur plafonnée pour ne plus écraser le texte */
.article-hero-media{ overflow:hidden; margin:2rem 0 3rem; box-shadow:var(--shadow-strong); border-radius:var(--radius-sm); }
.article-hero-media img{ width:100%; display:block; aspect-ratio:2.4/1; object-fit:cover; max-height:380px; }
.article-body{ font-size:1.08rem; }
.article-body h2{ margin-top:2.4rem; font-size:1.7rem; }
.article-body h3{ margin-top:1.6rem; }
.article-body p{ margin-bottom:1.3rem; }
.article-body ul{ margin:0 0 1.3rem 0; padding-left:1.3rem; list-style:disc; }
.article-body li{ margin-bottom:.5rem; }
.article-share{ display:flex; align-items:center; gap:1rem; padding:1.6rem 0; border-top:1px solid rgba(22,20,18,.1); border-bottom:1px solid rgba(22,20,18,.1); margin:2.5rem 0; }
.article-share a, .article-share button{ width:38px; height:38px; border-radius:50%; border:none; background:var(--blanc-casse); color:var(--noir-mat); display:flex; align-items:center; justify-content:center; transition:.3s; cursor:pointer; padding:0; }
.article-share a:hover, .article-share button:hover{ background:var(--terre-brulee); color:var(--blanc); }
.article-share a svg, .article-share button svg{ width:16px; height:16px; }
.share-copy .icon-check{ display:none; }
.share-copy.is-copied{ background:#4F7A5B; color:var(--blanc); }
.share-copy.is-copied .icon-link{ display:none; }
.share-copy.is-copied .icon-check{ display:block; }
.article-author{ display:flex; align-items:center; gap:1rem; margin:2rem 0; }
.related-posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1.5rem; }
aside.toc{ background:var(--blanc-casse); padding:1.5rem 1.7rem; margin-bottom:2.5rem; border-left:4px solid var(--terre-brulee); }
aside.toc h4{ margin-bottom:.8rem; }
aside.toc ol{ padding-left:1.2rem; margin:0; }
aside.toc li{ margin-bottom:.5rem; font-size:.92rem; }
aside.toc a{ color:var(--brun-charbon); }
aside.toc a:hover{ color:var(--terre-brulee); }

.article-header.cat-seo aside.toc{ border-left-color:var(--cat-bleu); }
.article-header.cat-tendances aside.toc{ border-left-color:var(--cat-vert); }
.article-header.cat-performance aside.toc{ border-left-color:var(--cat-terracotta); }
.article-header.cat-conseils-techniques aside.toc{ border-left-color:var(--cat-ardoise); }
.article-header.cat-web-marketing aside.toc{ border-left-color:var(--cat-or); }
.article-header.cat-relation-client aside.toc{ border-left-color:var(--cat-mauve); }
.article-header.cat-branding aside.toc{ border-left-color:var(--cat-violet); }
.article-header.cat-conseils aside.toc{ border-left-color:var(--cat-sarcelle); }
.article-header.cat-juridique-rgpd aside.toc{ border-left-color:var(--cat-marine); }

/* === 16. CTA BANDE =========================================================== */
.cta-band{
  background:var(--noir-mat); padding:3.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band h2,.cta-band p{ color:var(--blanc-casse); }
.cta-band h2{ margin-bottom:.6rem; }
.cta-band .cta-text{ max-width:540px; }
.cta-band svg.cta-deco{ position:absolute; right:-40px; bottom:-40px; width:240px; opacity:.18; }

/* === 17. FOOTER ============================================================== */
.site-footer{ background:var(--brun-charbon); color:var(--blanc-casse); padding-top:var(--space-2xl); }
.footer-top{ display:grid; grid-template-columns:1.3fr .8fr .8fr 1.1fr; gap:2.5rem; padding-bottom:3rem; }
.footer-brand img{ height:48px; margin-bottom:1.1rem; filter:brightness(0) invert(1); opacity:.92; }
.footer-brand p{ color:rgba(244,242,240,.65); font-size:.92rem; max-width:280px; }
.footer-col h4{ color:var(--terre-clair); margin-bottom:1.2rem; font-size:.85rem; }
.footer-col ul li{ margin-bottom:.7rem; }
.footer-col a{ color:rgba(244,242,240,.78); font-size:.92rem; transition:color .25s; }
.footer-col a:hover{ color:var(--terre-clair); }
.footer-contact li{ display:flex; align-items:flex-start; gap:.7rem; }
.footer-contact svg{ width:17px; height:17px; flex-shrink:0; margin-top:3px; color:var(--terre-clair); }
.footer-social{ display:flex; gap:.7rem; margin-top:1.3rem; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(244,242,240,.1); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--terre-clair); color:var(--noir-mat); }
.footer-social svg{ width:16px; height:16px; }
.footer-map{ overflow:hidden; filter:grayscale(.3) contrast(1.05); }
.footer-map iframe{ width:100%; height:230px; border:0; display:block; }
.footer-bottom{
  border-top:1px solid rgba(244,242,240,.12); padding:1.6rem 0 2.2rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  font-size:.82rem; color:rgba(244,242,240,.55);
}
.footer-bottom-links{ display:flex; gap:1.3rem; flex-wrap:wrap; }
.footer-bottom-links a:hover{ color:var(--terre-clair); }
.back-to-top{
  position:fixed; right:1.6rem; bottom:1.6rem; width:48px; height:48px; border-radius:50%;
  background:var(--noir-mat); color:var(--blanc-casse); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.35s var(--ease); z-index:60; box-shadow:var(--shadow-strong);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ width:18px; height:18px; }

/* === 18. FORMULAIRE DE CONTACT ================================================ */
.contact-wrap{ display:grid; grid-template-columns:1fr 1.15fr; gap:3rem; }
.contact-wrap > *{ min-width:0; }
.contact-infos .ci-item{ display:flex; gap:1rem; margin-bottom:1.6rem; align-items:flex-start; }
.contact-infos .ci-ico{
  width:46px; height:46px; border-radius:12px; background:var(--blanc-casse); color:var(--terre-brulee);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-infos .ci-ico svg{ width:21px; height:21px; }
.contact-infos strong{ display:block; font-family:var(--font-ui); margin-bottom:.2rem; }
.contact-infos span, .contact-infos a{ color:var(--gris-pierre); font-size:.94rem; }
.contact-form{ background:var(--blanc-casse); padding:2.4rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-group{ margin-bottom:1.1rem; }
.form-group label{ display:block; font-family:var(--font-ui); font-size:.85rem; font-weight:600; margin-bottom:.45rem; }
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:.85rem 1rem;   border:1.5px solid rgba(22,20,18,.15);
  background:var(--blanc); transition:border-color .25s, box-shadow .25s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  border-color:var(--terre-brulee); box-shadow:0 0 0 4px rgba(196,90,40,.12); outline:none;
}
.form-group.required label::after{ content:' *'; color:var(--terre-brulee); }
.form-consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color:var(--gris-pierre); margin-bottom:1.3rem; }
.form-consent input{ margin-top:3px; width:auto; }
.form-feedback{ padding:1rem 1.2rem;   margin-bottom:1.2rem; font-size:.92rem; display:none; }
.form-feedback.success{ display:block; background:#E9F2E5; color:#3C6B2C; }
.form-feedback.error{ display:block; background:#FBE7E2; color:#9C2F18; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.faq-item{ border-bottom:1px solid rgba(22,20,18,.1); padding:1.4rem 0; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-ui); font-weight:600; }
.faq-q svg{ width:16px; height:16px; transition:transform .3s; flex-shrink:0; }
.faq-item.is-open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); color:var(--gris-pierre); }
.faq-item.is-open .faq-a{ max-height:300px; padding-top:.9rem; }

/* === 19. PAGES LÉGALES ======================================================== */
.legal-content{ padding-top:calc(var(--header-h) + 3rem); }
.legal-content h2{ margin-top:2.2rem; font-size:1.5rem; }
.legal-content h3{ margin-top:1.3rem; font-size:1.15rem; }
.legal-content p, .legal-content li{ color:var(--brun-charbon); font-size:.97rem; }
.legal-content ul{ padding-left:1.3rem; list-style:disc; margin-bottom:1.2rem; }
.legal-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.5rem 0; }
.legal-content table{ width:100%; border-collapse:collapse; margin:0; }
.legal-content table td, .legal-content table th{ border:1px solid rgba(22,20,18,.15); padding:.7rem 1rem; font-size:.9rem; text-align:left; }
.legal-updated{ color:var(--gris-pierre); font-size:.88rem; margin-bottom:2rem; }

/* breadcrumbs */
.breadcrumbs{ font-family:var(--font-ui); font-size:.82rem; color:var(--gris-pierre); padding-top:calc(var(--header-h) + 1.6rem); }
.breadcrumbs a{ color:var(--gris-pierre); }
.breadcrumbs a:hover{ color:var(--terre-brulee); }
.breadcrumbs span.sep{ margin:0 .5rem; opacity:.5; }
.breadcrumbs span.current{ color:var(--terre-fonce); font-weight:600; }
.page-title-band{ padding-top:2.4rem; padding-bottom:1.5rem; }
.page-title-band .lead{ max-width:680px; }
.page-title-band + .section-sm{ padding-top:1.5rem; }

/* 404 */
.page-404{ min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:var(--header-h); }
.page-404 .code-404{ font-family:var(--font-display); font-size:7rem; color:var(--terre-clair); line-height:1; }

/* === 20. ANIMATIONS / REVEAL ================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; } .reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; } .reveal-delay-4{ transition-delay:.32s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.float-anim{ animation:floaty 5s ease-in-out infinite; }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
.spin-slow{ animation:spin-slow 18s linear infinite; }
.marquee-wrap{ overflow:hidden; }
.marquee{ display:flex; gap:3rem; animation:marquee 28s linear infinite; width:max-content; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* === 21. RESPONSIVE ============================================================ */
@media (max-width:1080px){
  .services-grid, .work-grid, .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .work-track .work-card{ flex:0 0 calc(50% - .75rem); }
  .review-card{ flex:0 0 calc(50% - .75rem); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); }
  .process-mini{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:980px){
  .main-nav{ display:none; }
  .header-cta .btn-text{ display:none; }
  .burger{ display:flex; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:380px; margin:0 auto 1rem; }
  .split{ grid-template-columns:1fr; gap:2rem; }
  .service-row{ grid-template-columns:1fr; }
  .service-row.reverse .service-row-media{ order:0; }
  .contact-wrap{ grid-template-columns:1fr; }
  .work-meta{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  :root{ --header-h:78px; }
  .header-inner{ height:var(--header-h); }
  .mobile-nav{ top:var(--header-h); }
  .brand-word{ font-size:1.25rem; }
  .brand img{ height:38px; }
  .section{ padding:3.6rem 0; }
  .section-sm{ padding:2.6rem 0; }
  .page-title-band{ padding-top:1.8rem; padding-bottom:1rem; }
  .page-title-band + .section-sm{ padding-top:1rem; }
  .container{ padding-left:1.75rem; padding-right:1.75rem; }
  .services-grid, .work-grid, .blog-grid, .related-posts, .work-gallery{ grid-template-columns:1fr; }
  .work-track .work-card, .review-card{ flex:0 0 100%; }
  .steps-grid, .process-mini, .footer-top{ grid-template-columns:1fr; }
  .work-meta{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .cta-band{ padding:2.2rem; flex-direction:column; text-align:center; }
  .form-row{ grid-template-columns:1fr; }
  .price-box{ flex-direction:column; align-items:flex-start; }
  .price-table{ min-width:0; }
  .price-table td:last-child{ white-space:normal; }
  .trustbar-inner{ gap:1.4rem; }
  h1{ font-size:2.1rem; }
}


/* === 22. LAYOUT SPLIT 2 COLONNES + IMAGE SCROLL + ROTATION ===============
   À coller à la fin de style.css, après === 21. RESPONSIVE ===

   Principe desktop :
   - Grille 2 colonnes : texte à gauche, image à droite
   - La colonne visuelle a la même hauteur que le texte (align-items: start)
   - JS pilote translateY + rotate simultanément sur .bloom-img
     → l'image descend avec le scroll ET tourne en même temps
   - overflow: hidden sur le wrapper pour masquer l'image quand elle dépasse
   ========================================================================= */

/* ── Conteneur principal : 2 colonnes côte à côte ── */
.svc-split-layout {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 2.75rem;
  align-items: start;
  max-width: var(--container);
  padding: 0 1rem;
}

/* ── Colonne texte ── */
.svc-col-text {
  min-width: 0;
}

/* ── Colonne visuelle ── */
.svc-col-visual {
  position: relative;
  /* Même hauteur que la colonne texte grâce à align-items:start sur le parent */
}

/* Wrapper : masque le débordement de l'image en rotation */
.svc-sticky-wrap {
  /* PAS de sticky — le JS gère le déplacement vertical */
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Padding réduit au nécessaire pour que l'image en losange (42°) ne soit pas clippée */
  padding: 2.5rem 0.5rem;
  overflow: visible; /* on laisse visible, le clip est géré autrement */
}

/* ── L'image : rotation + translateY + fondu + lueur, pilotés par JS ── */
.bloom-img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--shadow-strong);
  will-change: transform, opacity, box-shadow;
  opacity: 0;
  /* État initial : inclinée, JS prend la main immédiatement */
  transform: rotate(42deg) translateY(0px);
  margin-bottom: 200px;
  transition: box-shadow .4s var(--ease, ease);
}

/* ── Pas d'animation si prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .bloom-img { transform: none !important; opacity: 1 !important; }
}

/* ── Tablette (≤ 1024px) : 1 colonne, image au-dessus du texte ── */
@media (max-width: 1024px) {
  .svc-split-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .svc-col-visual {
    order: -1; /* image en premier */
  }

  .svc-sticky-wrap {
    padding: 2.5rem 1.5rem 1rem;
  }

  .bloom-img {
    max-width: 540px;
    margin: 0 auto;
    transform: none !important; /* image droite, JS désactivé */
    opacity: 1 !important;
  }
}

/* ── Smartphone (≤ 760px) ── */
@media (max-width: 760px) {
  .svc-split-layout {
    padding: 0 1rem;
  }

  .svc-sticky-wrap {
    padding: 1.5rem 0.5rem 0.5rem;
  }

  .bloom-img {
    max-width: 100%;
    border-radius: 14px;
  }
}

/* === 23. BANNIÈRE COOKIES (RGPD) ==========================================
   Ajoutée le 04/08/2026. Ne s'affiche que si aucun choix n'est enregistré
   (voir main.js, initCookieBanner). "Accepter" et "Refuser" ont le même
   poids visuel, conformément à la recommandation CNIL.
   ========================================================================= */
.cookie-banner{
  display:block;
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--brun-charbon); color:var(--blanc-casse);
  box-shadow:var(--shadow-strong);
  transform:translateY(0);
  transition:transform .4s var(--ease, ease);
}
.cookie-banner[hidden]{ display:block; transform:translateY(110%); pointer-events:none; }
.cookie-banner-inner{
  max-width:var(--container); margin:0 auto; padding:1.3rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cookie-banner-inner p{
  margin:0; font-size:.9rem; line-height:1.5; color:rgba(244,242,240,.85); flex:1 1 420px;
}
.cookie-banner-inner p a{ color:var(--terre-clair); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:.8rem; flex-wrap:wrap; flex-shrink:0; }
.cookie-manage-link{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font-family:inherit; font-size:.82rem; color:rgba(244,242,240,.55);
}
.cookie-manage-link:hover{ color:var(--terre-clair); }

@media (max-width:600px){
  .cookie-banner-inner{ padding:1.1rem 1.2rem; }
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1 1 0; }
}

/* === FIN BLOC === */

/* ============================================================================
   === 24. APERÇU PREMIUM (BROUILLON, 07/08/2026) ============================
   Ajouts purement visuels, aucune structure HTML modifiée, entièrement
   réversible en supprimant ce bloc. Ne pas copier vers Site DOLCREA 2 sans
   validation de Badr.
   ============================================================================ */

/* --- Dégradé "mesh" animé en fond des sections claires alternées --- */
.section-alt{ position:relative; overflow:hidden; }
.section-alt::before{
  content:"";
  position:absolute; inset:-12%;
  z-index:0;
  background:
    radial-gradient(42% 38% at 14% 18%, rgba(196,90,40,.16), transparent 70%),
    radial-gradient(38% 42% at 86% 28%, rgba(232,168,120,.24), transparent 70%),
    radial-gradient(48% 48% at 50% 92%, rgba(156,66,24,.11), transparent 70%);
  filter: blur(46px);
  animation: meshDrift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
.section-alt > .container{ position:relative; z-index:1; }
@keyframes meshDrift{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-3%, 2%) scale(1.07); }
  100% { transform: translate(2%, -2%) scale(1.03); }
}

/* --- Cartes de service : liseré dégradé qui apparaît au survol ---
   (::after utilisé volontairement : les cartes .has-photo occupent déjà
   ::before pour l'overlay de lisibilité du texte sur la photo) */
.service-card{ position:relative; }
.service-card::after{
  content:"";
  position:absolute; inset:0;
  padding:1.5px;
  border-radius:inherit;
  background:linear-gradient(135deg, var(--terre-brulee), var(--terre-clair), var(--terre-fonce));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
  z-index:2;
}
.service-card:hover::after{ opacity:1; }

/* --- Bouton principal : reflet lumineux qui balaie au survol --- */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:"";
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .65s ease;
  pointer-events:none;
}
.btn-primary:hover::after{ left:120%; }

@media (prefers-reduced-motion: reduce){
  .section-alt::before{ animation:none; }
  .btn-primary::after{ transition:none; }
}
/* === FIN APERÇU PREMIUM === */

/* ============================================================================
   === 25. ROUND 2 — ARRONDI CIBLÉ (VALIDÉ PAR BADR, 08/08/2026) =============
   Réponse à la question de Badr : le site est-il trop carré pour ce métier ?

   Découverte en creusant : la réponse était déjà dans le fichier. Section 1
   (tokens de marque, tout en haut de ce fichier) définit depuis le début
   --radius-sm/--radius-md/--radius-pill avec le commentaire "courbes douces,
   en écho au tracé du logo" — une intention de design déjà actée. Mais sur
   les 3 tokens, 2 n'étaient utilisés NULLE PART (--radius-md, --radius-pill)
   et le 3e (--radius-sm) une seule fois sur tout le site (l'image héros des
   articles de blog). Les boutons, cartes, champs, badges : jamais câblés.

   Ici on branche enfin ces tokens existants sur les éléments qu'on touche/
   clique (boutons, champs, cartes, badges). Aucun arrondi sur les photos ni
   les blocs de section : le cadre net y reste, c'est lui qui porte l'effet
   "galerie premium".
   ============================================================================ */
.btn{ border-radius:var(--radius-sm); }
.hero-pill{ border-radius:var(--radius-pill); } /* déjà nommé "pill" dans les tokens, jamais utilisé pour un badge-pilule */
.service-card{ border-radius:var(--radius-md); }
.faq-item{ border-radius:0; } /* reste plein-largeur, l'arrondi casserait la ligne de séparation */
.form-group input, .form-group textarea, .form-group select{ border-radius:var(--radius-sm); }

/* Les masques des liserés dégradés (round 1) doivent suivre le même rayon,
   sinon le liseré reste carré alors que la carte est arrondie dessous */
.service-card::after{ border-radius:var(--radius-md); }
/* === FIN ROUND 2 === */