/* =========================================================
   VARIABLES
   ========================================================= */
:root{
  /* Palette */
  --bg:#fff;
  --ink-900:#0b0b0c; --ink-700:#1f2023; --ink-500:#3b3d42; --ink-100:#e9ebef; --ink-050:#f6f7f9;
  --accent:#291d36; --accent-2:#892ce6;
  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));

  /* Layout & UI */
  --container:1100px;
  --inset:clamp(16px,6vw,64px);
  --radius:16px; --shadow:0 6px 24px rgba(0,0,0,.06);
  --header-h:84px;

  /* Sections “cadre” */
  --card-radius:28px;
  --card-padY:clamp(1.2rem,2.5vw,2rem);
  --card-w:min(90vw,1100px);

  /* Fonts */
  --heading:"Montserrat","Avenir Next","Futura",system-ui,sans-serif;
  --body:"Cabin",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Footer */
  --footer-bg:#2b165e; --footer-fg:#f5f6f7; --footer-border:rgba(255,255,255,.12);
}

/* =========================================================
   BASE / ACCESSIBILITÉ
   ========================================================= */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; text-rendering:optimizeLegibility; font-size:clamp(16px,.9vw + 12px,19px) }
[id]{ scroll-margin-top:var(--header-h) }
body{ margin:0; background:var(--bg); color:var(--ink-900); font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
a{ text-underline-offset:3px }
:where(a,button,input,textarea):focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 60%,var(--accent-2) 40%); outline-offset:2px;
}

/* =========================================================
   HEADER / NAV + BURGER + HIDE-ON-SCROLL
   ========================================================= */
header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(6px); background:rgba(255,255,255,.75);
  border-bottom:1px solid var(--ink-100);
  transition:transform .22s ease, box-shadow .2s ease; will-change:transform;
}
header.is-hidden{ transform:translateY(calc(-1 * var(--header-h))); box-shadow:none }
body.scrolled header{ box-shadow:0 6px 18px rgba(0,0,0,.06) }

/* nav structure */
.site-nav{ display:flex; align-items:center; gap:1rem; max-width:var(--container); margin:0 auto; padding:.75rem 1rem }
.brand{ margin-right:auto; display:inline-flex; align-items:center }
.brand img{ height:48px; width:auto; display:block }

/* liens nav */
.site-nav a{
  font-family:var(--heading);
  font-size:clamp(.95rem,1.2vw,1.05rem);
  color:var(--ink-500); text-decoration:none; padding:.4rem .25rem;
  position:relative; transition:color .2s ease;
}
.site-nav a:hover{ color:var(--accent-2) }
.site-nav a:not(.brand)::after{
  content:""; position:absolute; left:50%; bottom:.1rem; height:2px; width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px; transform:translateX(-50%) scaleX(0); transform-origin:center;
  transition:transform .25s ease; opacity:.9;
}
.site-nav a:hover::after, .site-nav a.is-active::after{ transform:translateX(-50%) scaleX(1) }
.site-nav a.is-active{ color:var(--accent-2) }

/* burger (mobile uniquement) */
.nav-menu{ display:flex; align-items:center; gap:1rem; margin-left:auto }
.nav-toggle{ display:none }
@media (max-width:900px){
  .nav-toggle{
    display:inline-flex; appearance:none; border:1px solid var(--ink-100); background:#fff;
    border-radius:12px; padding:.45rem .55rem; cursor:pointer; flex-direction:column; justify-content:center;
    gap:4px; margin-left:auto; box-shadow:var(--shadow);
  }
  .nav-toggle .bar{ width:22px; height:2px; border-radius:2px; background:var(--ink-700); transition:transform .2s, opacity .2s }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0 }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

  .nav-menu{
    position:fixed; inset:0 0 auto 0; top:var(--header-h);
    background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--ink-100);
    display:grid; gap:.25rem; padding:.85rem 1rem 1rem;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .2s, opacity .2s; z-index:9998;
  }
  .nav-menu.open{ transform:none; opacity:1; pointer-events:auto }
  .nav-menu a{ padding:.75rem .5rem; font-size:1.15rem; border-radius:10px }
  body.nav-open{ overflow:hidden }
}
@media (min-width:901px){ .nav-menu{ display:flex } }
@media (prefers-color-scheme:dark){
  .nav-toggle{ background:#0f1115; border-color:#2a2e37 }
  .nav-toggle .bar{ background:#b3b7c0 }
  @media (max-width:900px){ .nav-menu{ background:rgba(15,16,18,.96); border-bottom-color:#2a2e37 } }
}

/* =========================================================
   SECTIONS / TITRES
   ========================================================= */
section{ position:relative; padding:clamp(5rem,8vw,7.5rem) 1rem; overflow-x:clip }
section>*{ max-width:var(--container); margin-inline:auto }
#hero{ border-top:none }

h1{
  margin:0 0 .75rem; text-align:center;
  font-family:var(--heading); letter-spacing:-.01em;
  font-size:clamp(2.6rem,8vw,4.8rem); line-height:1.06;
}
h2{
  font-family:var(--heading); letter-spacing:-.01em;
  margin:.5rem 0 1rem; line-height:1.08; font-size:clamp(1.9rem,4.6vw,3rem);
  max-width:var(--card-w); width:100%; margin-inline:auto;
  text-align:left; padding-left:var(--inset); padding-right:calc(var(--inset)*.25);
}
.h2-gradient{ font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }

.section-lead{
  font-size:clamp(1.1rem,2vw,1.6rem); line-height:1.45; color:var(--ink-500);
  max-width:var(--card-w); width:100%; margin:0 auto;
  text-align:left; padding-left:var(--inset); padding-right:calc(var(--inset)*.25);
}

/* Mots importants = violet secondaire (pas de dégradé partout) */
.gtext, .hero-sub strong, .section-lead strong, #apropos .about-body strong{
  background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
  color:var(--accent-2) !important; font-weight:800;
  text-shadow:0 0 .5px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  .gtext, .hero-sub strong, .section-lead strong, #apropos .about-body strong{
    text-shadow:0 0 .5px rgba(255,255,255,.30);
  }
}
/* Exceptions : H1 et banderole gardent le dégradé */
#hero .hero-title .gtext, .ticker .gtext, .ticker .sep{
  background:var(--grad) !important; -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important; text-shadow:none !important;
}

/* =========================================================
   HERO
   ========================================================= */
#hero{
  min-height:calc(100dvh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  row-gap:clamp(1.5rem,5vw,3rem); padding-top:0; text-align:center;
}
.hero-title .line{ display:block }
.hero-sub{ font-size:clamp(1.2rem,2.2vw,1.8rem); line-height:1.45; color:var(--ink-500); max-width:1000px; margin:0 auto }
.hero-cta .btn + .btn{ margin-left:.6rem }
.nowrap{ white-space:nowrap }

/* =========================================================
   SECTIONS EN “CADRE” (Pro / Particuliers / À propos)
   ========================================================= */
#pro, #particuliers, #apropos{ position:relative; padding-block:max(var(--card-padY),3rem) }
#pro::before, #particuliers::before, #apropos::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:var(--card-padY); bottom:var(--card-padY); width:var(--card-w);
  background:#fff; border:1px solid var(--ink-100); border-radius:var(--card-radius); box-shadow:0 10px 30px rgba(0,0,0,.06); z-index:0;
}
#pro>* , #particuliers>* , #apropos>* { position:relative; z-index:1 }
@media (min-width:1600px){ #pro::before, #particuliers::before, #apropos::before{ width:min(86vw,1200px) } }
@media (max-width:540px){ #pro::before, #particuliers::before, #apropos::before{ width:calc(100vw - 24px) } }

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  font-family:var(--heading); border:0; color:#fff; background:var(--grad);
  padding:.65rem 1.15rem; border-radius:9999px; display:inline-block; text-decoration:none;
  transition:transform .15s, filter .2s, box-shadow .2s, background-position .35s;
  will-change:transform; background-size:150% 150%; background-position:0% 50%;
  box-shadow:0 8px 24px rgba(137,44,230,.18);
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06); background-position:100% 50% }
.btn--ghost{
  color:var(--accent);
  background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; border:1px solid transparent;
}
.btn--ghost:hover{ color:#fff; background:var(--grad) padding-box, var(--grad) border-box }

/* =========================================================
   SERVICES (grille + cartes pictos)
   ========================================================= */
.service-grid{
  display:grid; gap:1.25rem; margin-top:1.25rem; grid-template-columns:1fr;
}
@media (min-width:700px){ .service-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .service-grid{ grid-template-columns:repeat(4,1fr) } }

.service-card{
  position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--ink-100); border-radius:16px;
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#e2e5ea }
.service-card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:.95;
}

.service-front{
  --gap:.5rem;
  padding:1.25rem 1rem 2.75rem;
  text-align:center; display:flex; flex-direction:column; align-items:center;
  gap:var(--gap);
  min-height:clamp(240px,28vw,320px); /* hauteur boostée */
}

/* pictos sans rond */
.service-emoji{ display:block }
.service-emoji--plain{ background:none; border-radius:0; width:auto; height:auto; padding:0; box-shadow:none }
.service-emoji--plain img{ display:block; width:clamp(44px,8vw,56px); height:auto }

/* espace picto ↔ h3 collé, sans changer la taille de carte */
.service-emoji--plain + .service-title{ margin-top:calc(var(--gap) * -1) }

.service-title{
  font-family:var(--heading); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.18; margin:0;
}
.service-kicker{ color:var(--ink-500); font-size:clamp(1rem,1.4vw,1.1rem); margin:.15rem 0 0 }

.service-detail{
  position:absolute; left:0; right:0; bottom:0;
  background:#fff; border-top:1px solid var(--ink-100);
  padding:1rem .9rem; min-height:140px;
  transform:translateY(110%); transition:transform .28s ease;
  text-align:left; color:var(--ink-700);
}
.service-detail p{ margin:0; font-size:.95rem }
.service-card:hover .service-detail, .service-card:focus-within .service-detail{ transform:translateY(0) }

/* pas de bouton “Détails” */
.service-more{ display:none !important }

/* mobile/sans hover → détail visible */
@media (hover:none){
  .service-detail{ transform:none !important }
  .service-front{ padding-bottom:1.25rem }
}

/* Thème violet pour Pro/Particuliers (contraste) */
#pro .service-card, #particuliers .service-card{
  background:linear-gradient(160deg,var(--accent) 0%, #241732 100%);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
#pro .service-card:hover, #particuliers .service-card:hover{
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  border-color:rgba(255,255,255,.14);
}
#pro .service-card::after, #particuliers .service-card::after{
  background:linear-gradient(90deg,var(--accent-2),#b17af0); opacity:1;
}
#pro .service-front, #particuliers .service-front,
#pro .service-title, #particuliers .service-title{ color:#fff }
#pro .service-kicker, #particuliers .service-kicker{ color:rgba(255,255,255,.78) }
#pro .service-detail, #particuliers .service-detail{
  background:color-mix(in srgb,var(--accent) 85%, black 15%);
  border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.92);
}
@supports not (color-mix(in srgb, red, blue)){
  #pro .service-detail, #particuliers .service-detail{ background:#221630 }
}

/* CTA pack (si utilisé) */
.pro-note{
  grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:.55rem;
  text-align:center; padding:1rem 1.25rem; margin:1.5rem auto 0; max-width:720px;
  border:1px solid #e6e2f5; background:#f7f3ff; border-radius:12px; font-weight:600;
}
.pro-note .btn, .pro-note .btn--ghost{ margin-left:.15rem }
@media (max-width:560px){ .pro-note{ max-width:100%; padding:.9rem 1rem } }

/* =========================================================
   WORK GRID
   ========================================================= */
#work-grid{ display:grid; gap:1.5rem; margin-top:1.25rem; grid-template-columns:1fr }
@media (min-width:640px){ #work-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ #work-grid{ grid-template-columns:repeat(3,1fr) } }
.card{
  border:1px solid var(--ink-100); border-radius:var(--radius);
  overflow:hidden; background:var(--ink-050); display:block;
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.card img{ display:block; width:100%; height:auto }
.card p{ margin:.85rem 1rem; color:var(--ink-700); text-align:left; font-size:clamp(.95rem,1.2vw,1.05rem) }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#e2e5ea }

/* =========================================================
   MÉTHODE (flow)
   ========================================================= */
.flow{
  position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.5rem); margin-top:1.25rem; align-items:start;
  min-height:300px; overflow-x:clip; padding:0 .25rem .5rem;
}
.flow::before{
  content:""; position:absolute; left:0; right:0; top:100px; height:8px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:9999px; background-size:300% 100%;
  animation:flowAdvance 5.5s linear infinite reverse; filter:drop-shadow(0 6px 12px rgba(0,0,0,.06));
}
@keyframes flowAdvance{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

.flow-step{ position:relative; text-align:center; padding-top:160px; transition:transform .2s }
.flow-step:hover{ transform:translateY(-3px) }
.flow-badge{
  position:absolute; left:50%; top:100px; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:9999px; display:grid; place-items:center; color:#fff; font-weight:800;
  background:var(--grad); box-shadow:0 8px 24px rgba(137,44,230,.18); z-index:1; transition:transform .2s, box-shadow .2s;
}
.flow-title{ font-family:var(--heading); font-size:clamp(1.05rem,1.6vw,1.25rem); letter-spacing:-.005em; margin:.25rem 0; font-weight:800 }
.flow-desc{ font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.5; margin:.25rem 0 0; color:var(--ink-500) }
.flow-step.is-active .flow-badge{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%, transparent), 0 10px 28px rgba(137,44,230,.24);
}
.flow-step.is-active .flow-title{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }

@media (max-width:900px){
  .flow{ gap:clamp(.6rem,2vw,1rem); min-height:260px }
  .flow::before{ top:86px; height:6px }
  .flow-step{ padding-top:140px }
  .flow-badge{ top:86px; width:42px; height:42px }
}
@media (max-width:600px){
  .flow{ gap:.5rem; min-height:240px }
  .flow::before{ top:78px; height:5px }
  .flow-step{ padding-top:130px }
  .flow-badge{ top:78px; width:38px; height:38px; font-size:.95rem }
}

/* =========================================================
   TICKER (banderole défilante)
   ========================================================= */
.ticker{ overflow:hidden; padding:.9rem 0; background:transparent }
.ticker-track{ display:flex; width:max-content; gap:3rem; animation:tickerMove 22s linear infinite }
.ticker-row{
  display:flex; align-items:center; gap:1.75rem;
  text-transform:uppercase; white-space:nowrap;
  font-family:var(--heading); font-weight:800; letter-spacing:.08em;
  font-size:clamp(1.6rem,3.6vw,2.4rem); padding-inline:1rem;
}
.sep{ opacity:.6; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-inline:.4rem }
@keyframes tickerMove{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none; transform:none } }

/* =========================================================
   À PROPOS
   ========================================================= */
#apropos .section-lead{ margin-top:.25rem; margin-bottom:clamp(1rem,2vw,1.5rem) }
#apropos .about-wrap{
  display:grid; grid-template-columns:1fr; gap:clamp(1rem,2vw,1.5rem);
  align-items:center; max-width:var(--card-w); margin-inline:auto; padding-inline:var(--inset);
}
@media (min-width:900px){
  #apropos .about-wrap{ grid-template-columns:.95fr 1.05fr }
  #apropos .about-img{ order:1; justify-self:start }
  #apropos .about-text{ order:2 }
}
#apropos .about-img img{ width:min(100%,420px); height:auto; display:block; border-radius:16px; box-shadow:var(--shadow); will-change:transform; transition:transform .2s ease-out }
#apropos .about-body{ color:var(--ink-700); font-size:clamp(1rem,1.3vw,1.1rem); margin:0 }
#apropos .about-body strong{ color:var(--accent-2); font-weight:800; background:none }
#apropos .about-body em{ font-style:italic; color:var(--accent-2); font-size:.8em; line-height:1.5 }
#apropos .about-actions{ margin-top:clamp(.9rem,2vw,1.25rem); display:inline-flex }
#apropos .about-actions .btn{ display:inline-flex; align-items:center; font-weight:800 }

/* =========================================================
   CONTACT
   ========================================================= */
#contact .contact-note{
  max-width:var(--card-w); width:100%; margin:.25rem auto 1rem;
  text-align:left; padding-left:var(--inset); padding-right:calc(var(--inset)*.25);
  font-size:clamp(.95rem,1.2vw,1.05rem); color:var(--ink-500);
}
#contact .contact-wrap{
  display:grid; grid-template-columns:1fr; gap:clamp(1rem,2.2vw,1.5rem);
  max-width:var(--card-w); width:100%; margin:0 auto;
  padding-left:var(--inset); padding-right:calc(var(--inset)*.25);
}
@media (min-width:900px){ #contact .contact-wrap{ grid-template-columns:1.15fr .85fr; align-items:start } }

#contact form{ max-width:640px; margin:0 auto }
#contact input,#contact textarea{
  width:100%; border:1px solid var(--ink-100); border-radius:12px; padding:.7rem .9rem; font:inherit; margin-bottom:.8rem; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
#contact input:focus,#contact textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%, transparent);
}
#contact button{
  font-family:var(--heading); border:0; color:#fff; background:var(--grad);
  padding:.7rem 1.2rem; border-radius:9999px; cursor:pointer;
  transition:filter .2s, transform .15s, background-position .35s;
  background-size:150% 150%; background-position:0% 50%;
}
#contact button:hover{ filter:brightness(1.06); transform:translateY(-1px); background-position:100% 50% }

#contact .contact-card{
  position:relative; background:#fff; border:1px solid var(--ink-100);
  border-radius:20px; padding:1.1rem; box-shadow:var(--shadow);
}
#contact .contact-card::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-top-left-radius:20px; border-top-right-radius:20px;
}
#contact .contact-card-title{ margin:.1rem 0 .25rem; font-family:var(--heading); font-weight:800; font-size:clamp(1.05rem,1.8vw,1.25rem) }
#contact .contact-card-text{ margin:.1rem 0 .75rem; color:var(--ink-500) }
#contact .phone-link{
  display:inline-flex; align-items:center; gap:.55rem; padding:.6rem .9rem; border-radius:9999px; text-decoration:none; font-weight:800;
  color:#fff; background:var(--grad); box-shadow:0 8px 24px rgba(137,44,230,.18);
  transition:transform .15s, filter .2s, background-position .35s; background-size:150% 150%; background-position:0% 50%;
}
#contact .phone-link:hover{ transform:translateY(-1px); filter:brightness(1.06); background-position:100% 50% }
#contact .contact-aside-hint{ margin:.75rem 0 0; color:var(--ink-500); font-size:clamp(.95rem,1.2vw,1.05rem) }

/* =========================================================
   MODAL (confirmation)
   ========================================================= */
.modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:999 }
.modal.show{ opacity:1; pointer-events:auto }
.modal-card{
  position:relative; width:min(92vw,520px); background:#fff; color:var(--ink-900);
  border:1px solid var(--ink-100); border-radius:20px; padding:1.25rem 1.25rem 1rem; box-shadow:var(--shadow); text-align:center;
}
.modal-card h3{ margin:0 0 .5rem; font-family:var(--heading); font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:clamp(1.3rem,2.6vw,1.6rem) }
.modal-card p{ margin:0 0 .9rem; color:var(--ink-700) }
.modal-close{ position:absolute; top:10px; right:12px; border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position:fixed; left:50%; bottom:16px; z-index:9999 !important;
  border:0; color:#fff; background:var(--grad); border-radius:9999px;
  padding:.6rem .8rem; font:inherit; cursor:pointer; box-shadow:var(--shadow);
  opacity:0; transform:translate(-50%,6px); pointer-events:none;
  transition:opacity .2s, transform .2s, filter .2s, background-position .35s;
  background-size:150% 150%; background-position:0% 50%;
}
.back-to-top.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto }
.back-to-top:hover{ filter:brightness(1.06); background-position:100% 50% }
@media (min-width:768px){ .back-to-top{ bottom:24px } }

/* =========================================================
   MICRO-ANIMS (reveal, scrollbar, sheen, parallaxe hook)
   ========================================================= */
/* Reveal */
.reveal{
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.65,.3,1);
  will-change:transform,opacity;
}
.reveal.is-in{ opacity:1; transform:none }

/* Scroll bar top */
#scrollbar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:9998;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px rgba(137,44,230,.28);
}

/* Sheen sur cartes */
.service-card::before{
  content:""; position:absolute; inset:-20% -40% auto; height:60%;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%) rotate(8deg); transition:transform .8s ease; pointer-events:none;
}
.service-card:hover::before{ transform:translateX(140%) rotate(8deg) }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ margin-top:4rem; background:var(--footer-bg); color:var(--footer-fg); padding:3rem 1.25rem 1.5rem }
.site-footer a{ color:var(--footer-fg); text-decoration:none }
.site-footer a:hover{ text-decoration:underline }
.footer-wrap{
  max-width:var(--container); margin:0 auto 1.5rem; display:grid; gap:1.75rem; grid-template-columns:1.3fr 1fr 1fr 1fr;
}
@media (max-width:900px){ .footer-wrap{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .footer-wrap{ grid-template-columns:1fr } }
.footer-brand .brand-link{ display:inline-flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px }
.footer-tagline{ opacity:.9; margin:.5rem 0; font-size:.95rem }
.footer-contact{ opacity:.85; font-size:.95rem }
.footer-title{ font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; opacity:.9; margin:0 0 .6rem }
.footer-nav ul, .footer-legal ul, .footer-social ul{ list-style:none; padding:0; margin:0 }
.footer-nav li, .footer-legal li, .footer-social li{ margin:.35rem 0; font-size:.95rem }
.footer-bottom{ border-top:1px solid var(--footer-border); max-width:var(--container); margin:0 auto; padding-top:1rem; text-align:center; opacity:.9; font-size:.9rem }

/* =========================================================
   REDUCED MOTION / DARK MODE
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0c0d0f; --ink-900:#f5f6f8; --ink-700:#d5d8de; --ink-500:#b3b7c0; --ink-100:#2a2e37; --ink-050:#16181d }
  header{ background:rgba(15,16,18,.6); border-bottom-color:var(--ink-100) }
  .site-nav a{ color:var(--ink-500) }

  .card{ background:#0f1115 }
  .service-card{ background:#121418; border-color:var(--ink-100) }
  .service-detail{ background:#0f1115; border-top-color:var(--ink-100) }

  #pro::before, #particuliers::before, #apropos::before{
    background:#0f1115; border-color:#2a2e37; box-shadow:0 10px 30px rgba(0,0,0,.28);
  }

  .modal-card{ background:#0f1115; border-color:#2a2e37; color:var(--ink-900) }
}
/* === Uniformiser la taille des pictos dans les cartes === */
.service-front{ --gap: .3rem; } /* petit espace global entre éléments */

.service-emoji--plain{
  /* Boîte carrée identique pour tous les pictos */
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.service-emoji--plain img{
  /* L’image remplit la boîte sans être rognée */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Coller le titre juste sous le picto (sans gros vide) */
.service-emoji--plain + .service-title{
  margin-top: .15rem !important;
}

/* Annule toute ancienne règle qui touchait la taille des pictos */
.service-emoji img{ width:auto; height:auto; }

/* Grille responsive propre */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Carte = pleine hauteur, contenu centré */
.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.06));
  overflow: hidden;
}

/* Image : même ratio partout */
.card__media {
  aspect-ratio: 4 / 3;            /* change en 1/1 ou 16/9 si tu préfères */
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* crop propre */
  display: block;
}

/* Corps : centrage parfait */
.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;         /* vertical */
  align-items: center;             /* horizontal */
  text-align: center;
  padding: 16px;
}

.card__title { margin: 0 0 6px 0; }
.card__text  { margin: 0; opacity: .9; }

/* === CTA sous les grilles === */
.section-cta{
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
.section-cta .btn{
  border-radius: var(--radius,16px);
  padding: .9rem 1.25rem;
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.06));
}
@media (max-width: 560px){
  .section-cta .btn{ width: 100%; max-width: 520px; }}
  /* Centrage universel du CTA */
.section-cta{
  display: grid;
  place-items: center;    /* centre horizontal + vertical */
  width: 100%;
  margin-top: 16px;
  text-align: center;
}

/* Si le CTA est placé DANS la grille .service-grid */
.service-grid > .section-cta{
  grid-column: 1 / -1;    /* occupe toute la largeur de la grille */
  justify-self: center;   /* centre l’élément dans la grille */
}

/* Assure un bouton compact et bien centré */
.section-cta .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* === HERO — mascotte très petite (desktop à droite, mobile dessous) === */
@media (min-width: 900px){
  /* Colonne texte fluide + colonne image à largeur auto */
  #hero .hero-inner{ grid-template-columns: 1fr auto; }

  /* Place la mascotte à droite, centrée verticalement par rapport au bloc texte */
  #hero .hero-mascotte{
    justify-self: end;
    align-self: center;
    display: flex; align-items: center; justify-content: flex-end;
  }

  /* Taille "juste un peu plus grande qu’un bouton" */
  #hero .hero-mascotte img{
    width: clamp(48px, 5vw, 72px);
    height: auto !important;     /* override l’ancien height:100% */
    max-height: 80px !important; /* sécurité d’override */
  }
}

@media (max-width: 899.98px){
  /* La mascotte passe SOUS le texte et centrée */
  #hero .hero-mascotte{
    order: 3;
    place-self: center;
  }
  #hero .hero-mascotte img{
    width: clamp(56px, 22vw, 80px);
    height: auto !important;
  }

  /* Un peu d’air avant la mascotte */
  #hero .hero-sub{ margin-bottom: .5rem; }}
  /* HERO — mascotte ~2–3x un bouton */
@media (min-width: 900px){
  #hero .hero-inner{ grid-template-columns: 1fr auto; } /* texte | mascotte */
  #hero .hero-mascotte{
    justify-self: end;
    align-self: center;
    display: flex; align-items: center; justify-content: flex-end;
  }
  #hero .hero-mascotte img{
    width: clamp(96px, 10vw, 140px);  /* ≈ 2–3x un bouton */
    height: auto !important;          /* casse tout ancien height */
    max-height: 160px !important;
  }
}

@media (max-width: 899.98px){
  #hero .hero-mascotte{ order: 3; place-self: center; }
  #hero .hero-mascotte img{
    width: clamp(100px, 40vw, 160px); /* petit mais visible sur mobile */
    height: auto !important;
  }
}/* HERO — mascotte entre le H1 et le sous-titre, à droite (desktop) */
#hero .hero-copy{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title mascotte"
    "sub   mascotte"
    "cta   mascotte";
  align-items: center;
  column-gap: clamp(1rem, 2.5vw, 2rem);
  row-gap: .75rem;
}
#hero .hero-title{ grid-area: title; margin: 0; }
#hero .hero-sub{   grid-area: sub;   margin: .25rem 0 0; }
#hero .hero-cta{   grid-area: cta;   margin: .25rem 0 0; }

#hero .hero-mascotte{
  grid-area: mascotte;
  margin: 0;
  align-self: center;
  justify-self: end;
}
#hero .hero-mascotte img{
  /* un poil plus grand que ta version précédente */
  width: clamp(140px, 13vw, 190px) !important;  /* ≈ 2–3x un bouton, + un peu */
  height: auto !important;
}

/* Mobile : la mascotte passe SOUS le texte et centrée */
@media (max-width: 899.98px){
  #hero .hero-copy{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "sub"
      "cta"
      "mascotte";
  }
  #hero .hero-mascotte{ justify-self: center; }
  #hero .hero-mascotte img{
    width: clamp(140px, 42vw, 220px) !important;
    height: auto !important;
  }
}
/* === HERO — plus d'espace entre Titre / Sous-titre / Boutons === */
#hero .hero-copy{
  row-gap: clamp(1.2rem, 3.6vw, 3rem) !important; /* espace vertical entre les 3 lignes */
}

#hero .hero-title{ margin: 0 0 .2rem 0; }                  /* léger espace sous le H1 */
#hero .hero-sub{   margin-top: .35rem; }                   /* un poil d’air au-dessus du sous-titre */
#hero .hero-cta{   margin-top: clamp(.8rem, 2.2vw, 1.4rem); } /* espace avant les boutons */

/* Mobile : un chouïa plus d’air pour ne pas tasser */
@media (max-width: 899.98px){
  #hero .hero-copy{ row-gap: clamp(1.2rem, 5vw, 2.4rem) !important; }
  #hero .hero-cta{  margin-top: clamp(1rem, 4vw, 1.6rem); }
}/* === DARK MODE : H2 en dégradé secondaire → #D7CEE0 uniquement === */
@media (prefers-color-scheme: dark){
  section h2.h2-gradient{
    background: linear-gradient(135deg, var(--accent-2), #D7CEE0) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important; /* texte net sur fond sombre */
  }
}
/* === DARK MODE : H1 (hero) en dégradé secondaire → #D7CEE0 === */
@media (prefers-color-scheme: dark){
  #hero .hero-title .gtext{
    background: linear-gradient(135deg, var(--accent-2), #D7CEE0) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
  }
}
/* === DARK MODE : banderole (ticker) en dégradé secondaire → #D7CEE0 === */
@media (prefers-color-scheme: dark){
  .ticker .gtext,
  .ticker .sep{
    background: linear-gradient(135deg, var(--accent-2), #D7CEE0) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
  }
}