:root{
    --bg:#ffffff;
    --bg-alt:#f5f6fb;
    --paper:#f2efe6;
    --ink:#12142b;
    --ink-dim:#6b7089;
    --ink-dark:#12142b;
    --cyan:#4F9D00;
    --btn:#4F9D00;
    --amber:#4F9D00;
    --emerald:#16a34a;
    --dark-accent:#4F9D00;
    --footer-accent:#4F9D00;
    --footer-bg:#161616;
    --header-bg:#0a0a0a;
    --dark-text:#ffffff;
    --line: rgba(18,20,43,0.09);
    --maxw: 1240px;
  }
  /* Sections sombres façon PeleAI (hero, bande stats, CTA final, footer) :
     on redéfinit localement les mêmes variables pour que toutes les cartes,
     textes et bordures s'adaptent automatiquement sans dupliquer de règles.
     --cyan y est réassigné à --dark-accent (zone dashboard dédiée), pour que
     les liens/accents sur fond noir puissent avoir une couleur différente de
     ceux sur fond clair, sans dupliquer une seule règle CSS. Idem pour --ink,
     réassigné à --dark-text : "Couleur du texte" (fond clair) et "Couleur du
     texte (fonds noirs)" sont donc deux réglages bien séparés. */
  .hero, .stats-band, footer, .solution-banner, header.nav, .fmn-hero, .breadcrumb-bar{
    --bg:#0a0a0a;
    --bg-alt:#161616;
    --ink: var(--dark-text);
    --ink-dim:#a8a8a8;
    --line: rgba(255,255,255,0.14);
    --cyan: var(--dark-accent);
    --amber: var(--dark-accent);
  }
  /* Le header a aussi sa propre zone de couleur de fond (indépendante des autres
     fonds noirs) : cette règle réécrit --bg juste pour <header.nav>. */
  header.nav{ --bg: var(--header-bg); }
  /* Le footer a sa propre zone de couleur (indépendante des autres fonds noirs) :
     cette règle, plus spécifique, réécrit --cyan une seconde fois pour tout ce
     qui est dans <footer> uniquement. */
  footer{ --cyan: var(--footer-accent); --bg-alt: var(--footer-bg); }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  h1,h2,h3,.disp{
    font-family:'Inter', sans-serif;
    font-weight:800;
    letter-spacing:-0.02em;
    text-transform:none;
    line-height:1.12;
  }
  .mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em; text-transform:uppercase; }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px;
    background:var(--bg);
    box-shadow:0 4px 6px -1px rgba(0,0,0,0.25), 0 2px 4px -2px rgba(0,0,0,0.25);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px);
  }
  /* Disposition volontairement plein écran (logo à gauche, menu collé à droite du
     viewport) — décision du client, à ne pas recentrer sur .wrap/1240px. */
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between; width:100%;
  }
  header.nav .logo{ font-family:'Inter'; font-weight:800; font-size:21px; letter-spacing:-0.01em; text-transform:none; color:var(--ink); display:inline-flex; align-items:center;}
  header.nav .logo span{color:var(--cyan);}
  header.nav nav{display:flex; gap:24px; align-items:center;}
  header.nav nav a{ font-family:'Inter'; font-weight:500; font-size:14.5px; letter-spacing:0; text-transform:none; color:var(--ink); transition:color .2s;}
  header.nav nav a:hover{color:var(--cyan);}
  /* Caché en desktop : sinon cette div vide compte comme un 3e élément flex
     dans header.nav (space-between) et pousse le menu vers le centre au lieu
     de le laisser collé à droite. Réactivé uniquement en mobile (voir plus bas). */
  .nav-backdrop{ display:none; }

  /* ---------- MENU DÉROULANT "SERVICES" ---------- */
  .nav-dropdown{ position:relative; display:flex; align-items:center;}
  .nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; padding:8px 0;}
  .nav-dropdown-caret{ display:inline-block; font-size:10px; transition:transform .2s ease; transform:translateY(-1px);}
  .nav-dropdown:hover .nav-dropdown-caret,
  .nav-dropdown:focus-within .nav-dropdown-caret{ transform:translateY(-1px) rotate(180deg);}
  /* .nav-dropdown-menu est la zone de survol invisible : son padding-top comble
     l'espace entre le lien et la carte visible (.nav-dropdown-menu-inner), pour
     que le curseur reste "dans" la zone active pendant la descente et que le
     menu ne se referme pas avant d'atteindre les liens (bug classique du hover
     avec un espace mort entre déclencheur et panneau). */
  .nav-dropdown-menu{
    position:absolute; top:100%; left:0; padding-top:14px;
    min-width:280px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s ease, visibility .15s, transform .15s ease;
    transform:translateY(-4px);
    z-index:150;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .nav-dropdown-menu-inner{
    background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px;
    box-shadow:0 20px 40px rgba(18,20,43,0.16);
    display:flex; flex-direction:column; gap:2px;
  }
  .nav-dropdown-menu a{
    display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left;
    padding:11px 14px; border-radius:10px; white-space:normal; transition:background .15s;
  }
  /* Couleur en dur (pas var(--bg-alt)) : ce panneau est niché dans header.nav,
     qui redéfinit --bg-alt en noir pour toute la barre de nav (fond sombre) —
     utiliser la variable ici rendait le survol noir et le texte illisible. */
  .nav-dropdown-menu a:hover{ background:#f5f6fb;}
  .nav-dropdown-item-title{ font-family:'Inter'; font-weight:600; font-size:14.5px; color:#12142b; line-height:1.3;}
  .nav-dropdown-item-desc{ font-family:'Inter'; font-weight:400; font-size:12.5px; color:#8a8d9e; line-height:1.35;}
  .nav-social{ display:flex; gap:14px; align-items:center; margin-left:6px; padding-left:20px; border-left:1px solid var(--line);}
  .nav-social a{ width:30px; height:30px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .2s;}
  .nav-social a:hover{ border-color:var(--cyan); color:var(--cyan);}
  .nav-social svg{ width:14px; height:14px; fill:currentColor;}
  .nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:200;}
  .nav-toggle span{width:24px; height:2px; background:var(--ink);}

  /* ---------- WHATSAPP LIVE WIDGET ---------- */
  .wa-widget{ position:fixed; right:26px; bottom:26px; z-index:500; display:flex; flex-direction:column; align-items:flex-end; gap:14px; transition:opacity .25s ease, visibility .25s ease;}
  .wa-float{
    position:relative; width:60px; height:60px; border-radius:50%; background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 22px rgba(37,211,102,0.45);
    animation:waBounce 3.2s ease-in-out infinite;
  }
  .wa-float svg{ width:30px; height:30px; fill:#fff;}
  .wa-float::after{
    content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
    animation:waping 1.8s ease-out infinite;
  }
  @keyframes waping{ 0%{transform:scale(1); opacity:0.7;} 100%{transform:scale(1.7); opacity:0;} }
  @keyframes waBounce{ 0%,80%,100%{ transform:translateY(0) rotate(0);} 84%{ transform:translateY(-9px) rotate(-8deg);} 88%{ transform:translateY(0) rotate(6deg);} 92%{ transform:translateY(-4px) rotate(0);} }
  .wa-badge{
    position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%;
    background:var(--amber); color:#211200; font-family:'IBM Plex Mono'; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg);
    animation:badgePop 2.5s ease-in-out infinite;
  }
  @keyframes badgePop{ 0%,70%,100%{ transform:scale(1);} 78%{ transform:scale(1.35);} 86%{ transform:scale(1);} }
  .wa-badge.hidden{ display:none;}

  .wa-bubble{
    width:290px; background:var(--bg-alt); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,0.45); padding:16px 16px 14px; position:relative;
    opacity:0; transform:translateY(16px) scale(0.96); pointer-events:none;
    transition:opacity .35s ease, transform .35s ease;
  }
  .wa-bubble.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .wa-bubble::after{
    content:""; position:absolute; bottom:-8px; right:26px; width:16px; height:16px;
    background:var(--bg-alt); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    transform:rotate(45deg);
  }
  .wa-bubble-close{
    position:absolute; top:8px; right:10px; background:none; border:none; color:var(--ink-dim);
    font-size:18px; cursor:pointer; line-height:1; padding:4px;
  }
  .wa-bubble-close:hover{ color:var(--ink);}
  .wa-bubble-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .wa-bubble-head img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0;}
  .wa-bubble-head strong{ display:block; font-size:13.5px; color:var(--ink);}
  .wa-status{ display:flex; align-items:center; gap:5px; font-family:'IBM Plex Mono'; font-size:10.5px; color:#25D366; text-transform:uppercase; letter-spacing:0.04em; margin-top:2px;}
  .wa-status i{ width:6px; height:6px; border-radius:50%; background:#25D366; display:inline-block; box-shadow:0 0 6px #25D366;}
  .wa-bubble-msg{
    background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
    font-size:13px; color:var(--ink-dim); line-height:1.5; margin-bottom:12px; min-height:20px;
  }
  .wa-typing{ display:inline-flex; gap:4px; align-items:center; height:14px;}
  .wa-typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-dim); animation:waTyping 1s infinite ease-in-out;}
  .wa-typing i:nth-child(2){ animation-delay:.15s;}
  .wa-typing i:nth-child(3){ animation-delay:.3s;}
  @keyframes waTyping{ 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-4px); opacity:1;} }
  .wa-bubble-cta{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    background:#25D366; color:#04160c; font-family:'IBM Plex Mono'; font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.04em; padding:11px; border-radius:8px; transition:filter .2s;
  }
  .wa-bubble-cta:hover{ filter:brightness(1.08);}

  @media(max-width:640px){
    .wa-widget{ right:18px; bottom:18px;}
    .wa-bubble{ width:min(78vw, 290px);}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:radial-gradient(ellipse 70% 60% at 12% 0%, #1c1c1c 0%, var(--bg) 55%);
    color:var(--ink);
    min-height:100svh;
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items:stretch;
    border-bottom:1px solid var(--line);
  }
  .hero-copy{
    display:flex; flex-direction:column; justify-content:center;
    padding:120px 48px 80px 32px;
    position:relative; z-index:2;
  }
  .hero-eyebrow{
    font-family:'Inter'; font-weight:600; font-size:14px; color:#9BE45A; letter-spacing:0; text-transform:none;
    margin-bottom:26px; display:inline-flex; align-items:center; gap:8px;
    background:rgba(6,102,238,0.16); padding:8px 16px; border-radius:999px;
  }
  .hero-eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:#9BE45A; flex-shrink:0;}
  .hero h1{
    font-size: clamp(42px, 6.2vw, 92px);
    letter-spacing:-0.01em;
    color:var(--ink);
    min-height:2.3em;
    transition:opacity .25s ease;
  }
  .hero h1 em .word{ font-style:normal; color:var(--dark-accent); animation:wordUp .8s cubic-bezier(.2,.8,.2,1) forwards;}
  .hero h1.hero-fade, .hero p.lede.hero-fade{ opacity:0; }
  .hero .role{
    font-family:'Inter'; font-weight:600; font-size:clamp(20px,2.4vw,30px);
    color:var(--amber); text-transform:uppercase; letter-spacing:0.04em; margin-top:10px;
  }
  .hero p.lede{
    max-width:480px; margin-top:28px; color:var(--ink-dim); font-size:16px; line-height:1.65;
    min-height:3.3em; transition:opacity .25s ease;
  }
  .hero-slider{
    position:relative; height:44px; overflow:hidden; margin-top:14px; max-width:480px;
  }
  .hero-slide-item{
    position:absolute; left:0; top:0; width:100%; padding-left:22px;
    font-family:'IBM Plex Mono'; font-size:13px; line-height:1.5; color:var(--cyan); letter-spacing:0.03em;
    opacity:0; transform:translateY(100%);
    transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
  }
  .hero-slide-item::before{ content:''; position:absolute; left:0; top:7px; width:12px; height:2px; background:var(--cyan); }
  .hero-slide-item.active{ opacity:1; transform:translateY(0);}
  .hero-slide-item.exit{ opacity:0; transform:translateY(-100%);}
  .hero-cta{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; font-family:'Inter'; font-size:14px; font-weight:500; letter-spacing:0; text-transform:none;
    border:1.5px solid var(--ink); border-radius:12px; transition:all .2s;
  }
  .btn.primary{ background:var(--btn); color:#04191d; border-color:var(--btn); font-weight:500; box-shadow:0 1px 3px rgba(0,0,0,0.08);}
  .btn.primary:hover{ filter:brightness(1.1); box-shadow:0 4px 10px rgba(0,0,0,0.18);}
  .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line);}
  .btn.ghost:hover{ border-color:var(--cyan); color:var(--cyan);}

  .hero-photo{
    position:relative; overflow:hidden; height:100%; z-index:1;
  }
  .hero-photo img{
    width:100%; height:100%; object-fit:cover; object-position: top center;
    filter:grayscale(15%) contrast(1.05);
  }
  .hero-slides{ position:relative; width:100%; height:100%; }
  .hero-slide-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
    filter:grayscale(15%) contrast(1.05);
    opacity:0; transition:opacity 1.1s ease, transform .4s ease-out; z-index:1;
  }
  .hero-slide-img.active{ opacity:1; z-index:2; }
  .hero-slide-dots{
    position:absolute; bottom:28px; left:28px; z-index:3;
    display:flex; gap:8px;
  }
  .hero-slide-dots .dot{
    width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,0.6);
    background:rgba(255,255,255,0.15); cursor:pointer; padding:0; transition:background .25s ease, transform .25s ease;
  }
  .hero-slide-dots .dot.active{ background:var(--cyan); border-color:var(--cyan); transform:scale(1.2); }
  .hero-photo::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(100deg, var(--bg) 0%, rgba(12,12,13,0.15) 20%, rgba(12,12,13,0) 45%);
  }

  /* ---------- SECTION HEADS ---------- */
  .section{ padding:110px 0; border-bottom:1px solid var(--line);}
  .section.alt{ background:var(--bg-alt); }
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px; flex-wrap:wrap;}
  .section-num{ font-family:'Inter'; font-weight:600; font-size:14px; text-transform:uppercase; color:var(--cyan); letter-spacing:0.1em; margin-bottom:14px; display:block;}
  .section-head h2{ font-size:clamp(32px,4.4vw,60px); }
  .section-head p{ max-width:360px; color:var(--ink-dim); font-size:15px; line-height:1.6; padding-bottom:8px;}
  .section-head-side{ display:flex; flex-direction:column; align-items:flex-end; gap:16px;}
  .section-head-side p{ text-align:right; padding-bottom:0;}
  .section-head-cta{ white-space:nowrap;}
  @media(max-width:640px){
    .section-head-side{ align-items:flex-start; width:100%;}
    .section-head-side p{ text-align:left;}
  }

  /* ---------- ABOUT ---------- */
  .about-grid{ display:grid; grid-template-columns: 260px 1fr 1fr; gap:48px; align-items:start;}
  .about-photo{ border-radius:18px; overflow:hidden; border:1px solid var(--line); position:sticky; top:100px;}
  .about-photo img{ display:block; width:100%; height:100%; aspect-ratio:3/5.7; object-fit:cover; filter:grayscale(15%) contrast(1.05);}
  .about-grid p{ color:var(--ink-dim); font-size:16.5px; line-height:1.75; margin-bottom:20px;}
  .about-grid p strong{ color:var(--ink); font-weight:600;}
  .facts{ list-style:none; border-top:1px solid var(--line);}
  .facts li{ display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); font-size:14.5px;}
  .facts li span:first-child{ font-family:'IBM Plex Mono'; color:var(--ink-dim); text-transform:uppercase; font-size:11.5px; letter-spacing:0.06em;}
  .skills-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .pill{ border:1px solid var(--line); padding:8px 16px; font-family:'IBM Plex Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); border-radius:8px; background:#fff;}

  /* ---------- SKILL BADGES (Adobe/HTML icons) ---------- */
  .skill-badge{
    display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); background:#fff;
    padding:7px 14px 7px 7px; border-radius:10px; font-family:'IBM Plex Mono'; font-size:11.5px;
    text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-dim); transition:all .25s ease; box-shadow:0 2px 8px rgba(18,20,43,0.04);
  }
  .skill-badge:hover{ border-color:var(--cyan); color:var(--ink); transform:translateY(-2px);}
  .badge-ico{
    display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:5px;
    font-family:'Inter'; font-weight:700; font-size:11px; font-style:normal; letter-spacing:0; flex-shrink:0;
  }
  .badge-ico-logo{ width:18px; height:18px; object-fit:contain; }
  .ico-ps{ background:#001E36; color:#31A8FF;}
  .ico-ai{ background:#FF9A00; color:#1a1100;}
  .ico-id{ background:#4B0E2F; color:#FF6BA6;}
  .ico-ae{ background:#00005B; color:#B4B4FF;}
  .ico-html{ background:#1c1c1c; color:var(--cyan); font-size:10px;}
  .ico-dev{ background:#1c1c1c; color:var(--amber); font-size:9.5px;}

  /* ---------- EXPERIENCE ---------- */
  .timeline{ border-top:1px solid var(--line);}
  .tl-item{
    display:grid; grid-template-columns: 130px 1fr 260px; gap:24px; align-items:center;
    padding:22px 0; border-bottom:1px solid var(--line);
    transition: background .2s;
  }
  .tl-item:hover{ background:rgba(46,198,222,0.04); }
  .tl-year{ font-family:'Inter'; font-weight:700; font-size:15px; color:var(--cyan); white-space:nowrap;}
  .tl-role{ font-size:17px; font-weight:600; }
  .tl-role small{ display:block; font-family:'IBM Plex Mono'; font-weight:400; font-size:11.5px; color:var(--ink-dim); text-transform:uppercase; margin-top:6px; letter-spacing:0.04em;}
  .tl-mode{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink-dim); text-align:right; text-transform:uppercase; letter-spacing:0.04em;}

  /* ---------- WORK / FILTERS ---------- */
  .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px;}
  .filter-btn{
    font-family:'Inter'; font-weight:600; font-size:13.5px; letter-spacing:0; text-transform:none;
    padding:10px 20px; border:1.5px solid var(--line); color:var(--ink-dim); cursor:pointer; background:#fff; border-radius:30px;
    transition:all .2s;
  }
  .filter-btn:hover{ color:var(--ink); border-color:var(--cyan);}
  .filter-btn.active{ background:var(--btn); color:#04191d; border-color:var(--btn); font-weight:600;}

  /* Grille "façon Behance" : des visuels plein cadre, sans carte blanche ni
     bordure — la grille elle-même EST la présentation. Les infos (client,
     projet, catégorie) n'apparaissent qu'au survol, en surimpression sombre
     en bas de l'image, pour laisser le travail respirer comme sur un profil
     Behance (image d'abord, texte au survol, colonnes serrées). */
  .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  .card{
    position:relative; cursor:pointer; overflow:hidden; border-radius:6px; background:#000;
    aspect-ratio:4/3;
  }
  .card .tab{ display:none;}
  .card .thumb{ position:absolute; inset:0; overflow:hidden;}
  .card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease, filter .4s ease; filter:brightness(0.96);}
  .card:hover .thumb img{ transform:scale(1.07); filter:brightness(0.55);}
  .card .thumb .count{
    position:absolute; top:10px; right:10px; font-family:'IBM Plex Mono'; font-size:10.5px;
    background:rgba(12,12,13,0.7); color:#fff; padding:5px 9px; letter-spacing:0.05em; border-radius:4px;
    opacity:0; transition:opacity .3s ease;
  }
  .card:hover .thumb .count{ opacity:1;}
  .card .info{
    position:absolute; left:0; right:0; bottom:0; padding:18px 18px 16px;
    background:linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0));
    transform:translateY(14px); opacity:0; transition:transform .3s ease, opacity .3s ease;
  }
  .card:hover .info{ transform:translateY(0); opacity:1;}
  .card .info .client{ font-family:'Inter'; font-weight:700; font-size:16px; text-transform:none; color:#fff;}
  .card .info .proj{ font-family:'IBM Plex Mono'; font-size:10.5px; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.04em; margin-top:6px; line-height:1.5;}
  .card .info .meta{ display:flex; justify-content:space-between; margin-top:10px; font-family:'IBM Plex Mono'; font-size:10px; color:rgba(255,255,255,0.55); text-transform:uppercase;}
  @media(max-width:1100px){
    .grid{ grid-template-columns:repeat(3,1fr);}
  }

  /* ---------- WORK CAROUSEL (featured, homepage) ---------- */
  .work-carousel{ position:relative; border:1px solid var(--line); overflow:hidden; background:#000;}
  .work-track{ display:flex; transition:transform .65s cubic-bezier(.2,.8,.2,1);}
  .work-slide{ flex:0 0 100%; position:relative; cursor:pointer; height:clamp(320px, 52vw, 520px);}
  .work-slide img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.8) saturate(1.05); transition:filter .5s ease, transform 6s ease;}
  .work-slide:hover img{ filter:brightness(0.95) saturate(1.15); transform:scale(1.04);}
  .work-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
    padding:28px 30px 30px; background:linear-gradient(180deg, transparent 35%, rgba(8,8,9,0.94) 100%);
  }
  .work-tag{ font-family:'IBM Plex Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em;}
  .work-overlay h3{ font-size:clamp(26px,4vw,42px); margin-top:8px; text-transform:uppercase;}
  .work-overlay p{ color:var(--ink-dim); max-width:560px; margin-top:6px; font-size:14px;}
  .work-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:46px; height:46px; border-radius:50%; border:1px solid rgba(244,242,234,0.3); background:rgba(12,12,13,0.5);
    color:#fff; font-family:'IBM Plex Mono'; font-size:16px; cursor:pointer; transition:all .2s; backdrop-filter:blur(4px);
  }
  .work-arrow:hover{ background:var(--btn); border-color:var(--btn); color:#08181b;}
  .work-arrow-prev{ left:18px;}
  .work-arrow-next{ right:18px;}
  .work-carousel-nav{ display:flex; justify-content:center; margin-top:22px;}
  .work-dots{ display:flex; gap:8px;}
  .work-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:all .25s ease;}
  .work-dots span.active{ background:var(--cyan); transform:scale(1.35);}
  .work-cta{ display:flex; justify-content:center; margin-top:30px;}
  @media(max-width:640px){
    .work-arrow{ width:38px; height:38px; font-size:14px;}
  }

  /* ---------- LOGOS ---------- */
  .logo-wall{ border:1px solid var(--line); background:var(--bg-alt); padding:8px;}
  .logo-wall img{ filter:grayscale(0%);}

  /* ---------- SERVICES ---------- */
  .services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}

  /* ---------- HOME SERVICES TEASER (slider auto + navigable) ---------- */
  .svc-home-carousel{ position:relative; }
  .svc-home-viewport{ overflow:hidden; }
  .svc-track-home{ display:flex; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .svc-home-page{ flex:0 0 100%; display:flex; flex-wrap:wrap; gap:28px; padding:0 3px;}
  .svc-home-page > .service-card{ flex:0 0 calc((100% - 3*28px)/4); max-width:calc((100% - 3*28px)/4);}
  .svc-home-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:32px;}
  .svc-home-arrow{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg-card, #fff);
    color:var(--ink); font-family:'IBM Plex Mono'; font-size:15px; cursor:pointer; transition:all .2s; flex-shrink:0;
    box-shadow:0 8px 20px rgba(18,20,43,0.08);
  }
  .svc-home-arrow:hover{ border-color:var(--cyan); color:var(--cyan);}
  .svc-home-dots{ display:flex; justify-content:center; gap:8px;}
  .svc-home-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:all .25s ease;}
  .svc-home-dots span.active{ background:var(--cyan); transform:scale(1.35);}
  @media(max-width:900px){
    .svc-home-page > .service-card{ flex:0 0 calc((100% - 28px)/2); max-width:calc((100% - 28px)/2);}
  }
  @media(max-width:640px){
    .svc-home-page > .service-card{ flex:0 0 100%; max-width:100%;}
    .svc-home-arrow{ width:36px; height:36px; font-size:13px;}
  }

  /* ---------- TRUST STRIP (accueil) ---------- */
  .trust-strip{ padding:56px 0 16px; text-align:center;}
  .trust-label{ font-family:'Inter'; font-weight:600; font-size:13px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.08em;}

  /* ---------- HOME TESTIMONIALS TEASER (slider auto + navigable) ---------- */
  .testi-home-carousel{ position:relative; }
  .testi-home-viewport{ overflow:hidden; }
  .testi-track-home{ display:flex; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  /* flex (pas grid) + justify-content:center : une page avec moins de cartes que
     "perPage" se centre avec des cartes à taille normale, au lieu d'étirer la
     grille et de laisser des colonnes vides. Chaque page pleine (le cas normal)
     occupe toute la largeur exactement comme avant. */
  .testi-home-page{ flex:0 0 100%; display:flex; flex-wrap:wrap; justify-content:center; gap:22px; padding:0 3px;}
  .testi-home-page > .testi-card{ flex:0 0 calc((100% - 44px)/3); max-width:calc((100% - 44px)/3);}
  /* Barre de navigation sous le slider : flèches + puces, à l'écart des cartes
     (elles ne survolent plus le contenu du témoignage). */
  .testi-home-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:28px;}
  .testi-home-arrow{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg-card, #fff);
    color:var(--ink); font-family:'IBM Plex Mono'; font-size:15px; cursor:pointer; transition:all .2s; flex-shrink:0;
    box-shadow:0 8px 20px rgba(18,20,43,0.08);
  }
  .testi-home-arrow:hover{ border-color:var(--cyan); color:var(--cyan);}
  .testi-home-dots{ display:flex; justify-content:center; gap:8px;}
  .testi-home-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:all .25s ease;}
  .testi-home-dots span.active{ background:var(--cyan); transform:scale(1.35);}
  @media(max-width:900px){
    .testi-home-page > .testi-card{ flex:0 0 calc((100% - 22px)/2); max-width:calc((100% - 22px)/2);}
  }
  @media(max-width:640px){
    .testi-home-page > .testi-card{ flex:0 0 100%; max-width:100%;}
    .testi-home-arrow{ width:36px; height:36px; font-size:13px;}
  }

  /* ---------- VALUES ---------- */
  .values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}

  /* ---------- SERVICE DETAILS ---------- */
  .service-detail-list{ display:flex; flex-direction:column; gap:20px;}
  .service-detail{
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 32px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.04);
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px 32px;
  }
  .sd-head{ grid-column:1; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .sd-head h3{ font-size:19px; font-weight:700; color:var(--ink);}
  .sd-price{ font-family:'Inter'; font-weight:600; font-size:13px; color:var(--cyan); background:#eff6ff; padding:5px 12px; border-radius:20px;}
  .sd-features{ grid-column:1; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin-top:4px;}
  .sd-features li{ color:var(--ink-dim); font-size:13.5px; padding-left:20px; position:relative;}
  .sd-features li::before{ content:"✓"; position:absolute; left:0; color:#16a34a; font-weight:700;}
  .sd-cta{ grid-column:2; grid-row:1 / span 2; white-space:nowrap; align-self:center;}
  @media(max-width:800px){
    .service-detail{ grid-template-columns:1fr;}
    .sd-cta{ grid-column:1; grid-row:auto; width:100%; justify-content:center; margin-top:10px;}
    .sd-features{ grid-template-columns:1fr;}
  }
  .value-card{
    background:#fff; padding:32px 28px; border-radius:16px; border:1px solid var(--line);
    box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.04);
    text-align:center; transition:transform .25s ease, box-shadow .25s ease;
  }
  .value-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.08);}
  .value-icon{ font-size:32px; margin-bottom:16px;}
  .value-card h3{ font-size:19px; font-weight:700; margin-bottom:10px; color:var(--ink);}
  .value-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6;}
  @media(max-width:700px){ .values-grid{ grid-template-columns:1fr;} }

  /* ---------- PROCESS / METHOD ---------- */
  .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative;}
  .process-grid::before{
    content:""; position:absolute; top:34px; left:12.5%; right:12.5%; height:1px;
    background:linear-gradient(90deg, var(--line), color-mix(in srgb, var(--cyan) 35%, transparent) 25%, color-mix(in srgb, var(--cyan) 35%, transparent) 75%, var(--line)); z-index:0;
  }
  .process-step{ text-align:center; position:relative; z-index:1; padding:14px; border-radius:16px; transition:transform .3s ease, background .3s ease;}
  .process-step:hover{ transform:translateY(-6px); background:#fff; box-shadow:0 16px 32px rgba(18,20,43,0.06);}
  .process-num{
    width:68px; height:68px; border-radius:50%; background:#eff6ff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; margin:0 auto 22px;
    font-family:'Inter'; font-weight:700; font-size:20px; color:var(--cyan);
    transition:background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .process-step:hover .process-num{ background:var(--cyan); color:#fff; transform:scale(1.08); box-shadow:0 10px 22px color-mix(in srgb, var(--cyan) 35%, transparent);}
  .process-step h3{ font-size:18px; font-weight:700; margin-bottom:10px; color:var(--ink);}
  .process-step p{ color:var(--ink-dim); font-size:14px; line-height:1.6;}
  @media(max-width:900px){
    .process-grid{ grid-template-columns:repeat(2,1fr); gap:36px 24px;}
    .process-grid::before{ display:none;}
  }
  @media(max-width:600px){
    .process-grid{ grid-template-columns:1fr;}
  }
  .service-card{ background:#fff; padding:28px; border-radius:16px; border:1px solid var(--line); box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.04); transition:transform .25s ease, box-shadow .25s ease; scroll-margin-top:110px; display:block; text-decoration:none; color:inherit;}
  .service-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.08);}
  .service-illustration{ width:100%; height:140px; border-radius:12px; overflow:hidden; margin-bottom:18px; background:#f4f6fb;}
  .service-illustration img{ width:100%; height:100%; object-fit:cover; display:block;}
  .service-card h3{ font-size:22px; margin-top:0; margin-bottom:10px; text-transform:none; font-weight:700; color:var(--ink);}
  .service-card p{ color:var(--ink-dim); font-size:14.5px; line-height:1.65;}
  .service-card-more{ display:inline-block; margin-top:16px; font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--cyan); transition:transform .2s ease;}
  .service-card:hover .service-card-more{ transform:translateX(3px);}

  /* ---------- SOLUTIONS / OFFRES PACKAGÉES ---------- */
  .solutions-list{ display:flex; flex-direction:column; gap:64px;}
  .solution-block{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  .solution-block.reverse .solution-media{ order:2;}
  .solution-block.reverse .solution-copy{ order:1;}
  .solution-media{ border-radius:20px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg,#eef7e2,#f7faf3);}
  .solution-media img{ width:100%; height:100%; object-fit:cover; display:block;}
  .solution-media-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-size:72px; font-weight:700; color:#c9e8a0;}
  .solution-tagline{ display:inline-block; font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:#4F9D00; margin-bottom:10px;}
  .solution-copy h3{ font-size:clamp(24px,2.6vw,32px); font-weight:700; margin-bottom:14px; color:var(--ink);}
  .solution-copy p{ color:var(--ink-dim); font-size:15px; line-height:1.7;}
  .solution-foot{ display:flex; align-items:center; gap:20px; margin-top:26px; flex-wrap:wrap;}
  .solution-price{ font-family:'Space Grotesk'; font-weight:700; font-size:18px; color:var(--ink);}
  @media(max-width:760px){
    .solution-block, .solution-block.reverse .solution-media, .solution-block.reverse .solution-copy{ grid-template-columns:1fr; order:initial;}
    .solution-block{ display:flex; flex-direction:column; gap:24px;}
  }

  /* ---------- SKILLS ---------- */
  .skills-list{ display:flex; flex-direction:column; gap:26px;}
  .skill-row .skill-top{ display:flex; justify-content:space-between; margin-bottom:10px; font-family:'IBM Plex Mono'; font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em;}
  .skill-top .pct{ color:var(--cyan);}
  .skill-bar{ height:6px; background:var(--line); position:relative; overflow:hidden;}
  .skill-bar i{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, var(--cyan), var(--amber)); width:0%; transition:width 1.2s cubic-bezier(.2,.8,.2,1);}

  /* ---------- WEB PROJECTS ("Réalisations" — carte étude de cas) ---------- */
  .webproj-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px;}
  .webproj-card{
    position:relative; border:1px solid var(--line); background:#fff; border-radius:18px;
    display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit;
    box-shadow:0 4px 16px rgba(18,20,43,0.05); transition:box-shadow .3s ease, transform .3s ease;
  }
  .webproj-card:hover{ box-shadow:0 16px 34px rgba(18,20,43,0.14); transform:translateY(-4px);}
  .webproj-thumb{
    width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--bg-alt);
  }
  .webproj-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1;}
  .webproj-body h3{ font-size:19px; text-transform:none; font-weight:700; color:var(--ink); margin:0 0 6px;}
  .webproj-body p{ color:var(--ink-dim); font-size:13.5px; line-height:1.55; margin:0 0 20px; flex:1;}
  .webproj-cta{
    align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
    background:#d97a3d; color:#fff; font-family:'Inter'; font-weight:700; font-size:13.5px;
    padding:11px 20px; border-radius:30px; transition:filter .2s ease, transform .2s ease;
  }
  .webproj-card:hover .webproj-cta{ filter:brightness(1.08); transform:translateX(3px);}

  /* ---------- PARTNERS CAROUSEL ---------- */
  .partners-carousel{ overflow:hidden; position:relative; padding:34px 0; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
  .partners-track{ display:flex; gap:14px; width:max-content; animation:marquee 60s linear infinite;}
  .partners-carousel:hover .partners-track{ animation-play-state:paused;}
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .partner-badge{
    border:1px solid transparent; background:transparent;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:18px 28px; min-height:92px; min-width:180px; transition:all .2s; flex-shrink:0;
  }
  .partner-badge:hover{ background:var(--bg-alt);}
  .partner-badge img{ max-height:56px; max-width:150px; width:auto; object-fit:contain; filter:grayscale(100%); opacity:0.7; transition:all .25s ease;}
  .partner-badge:hover img{ filter:grayscale(0%); opacity:1; transform:scale(1.05);}
  .partner-badge span{ font-family:'Inter'; font-weight:700; font-size:17px; text-transform:uppercase; color:var(--ink-dim); letter-spacing:0.02em; white-space:nowrap;}
  .partner-badge:hover span{ color:var(--ink);}

  /* ---------- TESTIMONIALS CAROUSEL ---------- */
  /* Tous les témoignages sont listés (grille qui s'enroule à la ligne), plus de
     carrousel à défilement horizontal ni de flèches de navigation. */
  .testi-viewport{ display:flex; flex-wrap:wrap; gap:22px;}
  .testi-card{ flex:0 0 calc(33.333% - 15px); border:1px solid var(--line); background:#fff; padding:28px; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.04); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;}
  .testi-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.08);}
  .testi-stars{ color:#f5a623; font-size:14px; letter-spacing:2px; margin-bottom:14px;}
  .testi-stars-empty{ color:var(--line);}
  .testi-quote{ color:var(--ink-dim); font-size:14.5px; line-height:1.7; flex:1;}
  .testi-quote::before{ content:"“"; color:var(--cyan); font-family:'Inter'; font-size:30px; display:block; line-height:0.6; margin-bottom:6px;}
  /* Hors de temoignages.php (accueil, formation…) : 5 lignes max pour éviter
     les grands espaces blancs entre des cartes de longueurs très différentes. */
  .testi-card.is-clamped .testi-quote-text{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
  .testi-more{ display:inline-block; margin-top:8px; font-size:12.5px; color:var(--cyan); text-decoration:none; }
  .testi-more:hover{ text-decoration:underline; }
  .testi-person{ display:flex; align-items:center; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
  .testi-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0;}
  .testi-person .name{ font-weight:700; font-size:14.5px;}
  .testi-person .role{ font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; margin-top:3px;}
  .testi-link{ font-size:12px; font-weight:400; color:var(--cyan); text-decoration:none; margin-left:2px;}
  .testi-link:hover{ text-decoration:underline;}
  .testi-service{ text-transform:none; opacity:.8;}
  @media(max-width:900px){ .testi-card{ flex-basis:calc(50% - 11px);} }
  @media(max-width:640px){ .testi-card{ flex-basis:88%;} }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:50px; text-align:left; margin-top:56px;}

  /* ---------- CONTACT FORM ---------- */
  .contact-form{
    background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:16px;
    padding:32px; backdrop-filter:blur(6px);
  }
  .contact-form h3{ font-size:20px; margin-bottom:8px; text-align:left;}
  .contact-form-note{ color:var(--ink-dim); font-size:13.5px; margin-bottom:22px; text-align:left; line-height:1.5;}
  .contact-form .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .contact-form label{
    display:flex; flex-direction:column; gap:6px; margin-bottom:16px; text-align:left;
    font-family:'Inter'; font-size:13px; font-weight:600; color:var(--ink-dim);
  }
  .contact-form input, .contact-form textarea{
    font-family:'Inter'; font-size:14.5px; padding:11px 14px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.05); color:#fff;
    resize:vertical; transition:border-color .2s;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{ color:rgba(255,255,255,0.35);}
  .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--cyan);}
  @media(max-width:640px){ .contact-form .form-row-2{ grid-template-columns:1fr;} }
  .contact-info{ display:flex; flex-direction:column; gap:22px;}

  /* ---------- FORMULAIRE PUBLIC DE TÉMOIGNAGE (avis.php) ----------
     Même gabarit que .contact-form, mais en clair : ce formulaire vit dans une
     section normale (fond blanc), pas dans .contact (fond sombre) — reprendre
     .contact-form tel quel rendait le texte des champs blanc sur blanc, donc
     invisible. */
  .testi-form{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:32px; box-shadow:0 4px 20px rgba(18,20,43,0.06);
  }
  .testi-form h3{ font-size:20px; margin-bottom:8px; text-align:left; color:var(--ink);}
  .testi-form-note{ color:var(--ink-dim); font-size:12px; margin-bottom:22px; text-align:left; line-height:1.5;}
  .testi-form-hint{ color:var(--ink-dim); font-size:12.5px; margin:-10px 0 18px; line-height:1.5;}
  .testi-form .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .testi-form label{
    display:flex; flex-direction:column; gap:6px; margin-bottom:16px; text-align:left;
    font-family:'Inter'; font-size:13px; font-weight:600; color:var(--ink-dim);
  }
  .testi-form input[type="text"], .testi-form input[type="file"], .testi-form textarea, .testi-form select{
    font-family:'Inter'; font-size:14.5px; padding:11px 14px; border-radius:10px;
    border:1px solid var(--line); background:var(--bg-alt); color:var(--ink);
    resize:vertical; transition:border-color .2s;
  }
  .testi-form input[type="text"]::placeholder, .testi-form textarea::placeholder{ color:var(--ink-dim); opacity:.6;}
  .testi-form input:focus, .testi-form textarea:focus, .testi-form select:focus{ outline:none; border-color:var(--cyan);}
  @media(max-width:640px){ .testi-form .form-row-2{ grid-template-columns:1fr;} }

  /* Liste déroulante "Projet / service concerné" — l'apparence par défaut du
     navigateur (flèche OS, look disparate) est remplacée par un chevron custom
     cohérent avec le reste du site. */
  .testi-form select{
    cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding-right:38px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7089' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  }
  .testi-form select:invalid{ color:var(--ink-dim); }

  /* Champ "Votre photo" — le bouton natif "Choisir un fichier" est repeint aux
     couleurs du site (au lieu du bouton gris par défaut du navigateur) ;
     ::file-selector-button est le standard actuel, ::-webkit-file-upload-button
     couvre les anciens Chrome/Safari qui ne le reconnaissent pas encore. */
  .testi-form input[type="file"]{ cursor:pointer; padding:8px 10px; }
  .testi-form input[type="file"]::file-selector-button,
  .testi-form input[type="file"]::-webkit-file-upload-button{
    font-family:'Inter'; font-weight:600; font-size:13px; letter-spacing:.01em;
    padding:9px 16px; margin-right:14px; border:none; border-radius:8px;
    background:var(--btn); color:#04191d; cursor:pointer; transition:filter .2s;
  }
  .testi-form input[type="file"]::file-selector-button:hover,
  .testi-form input[type="file"]::-webkit-file-upload-button:hover{ filter:brightness(1.08); }

  /* Case de consentement — ligne horizontale (case + texte), distincte des
     autres champs qui sont tous en colonne (label au-dessus du champ). */
  .testi-form label.testi-consent{
    flex-direction:row; align-items:flex-start; gap:10px; font-weight:400;
    font-size:11.5px; line-height:1.5; color:var(--ink-dim); margin-bottom:20px;
  }
  .testi-form label.testi-consent input[type="checkbox"]{
    width:18px; height:18px; margin-top:1px; flex-shrink:0; accent-color:var(--cyan); cursor:pointer;
  }

  /* Sélecteur de satisfaction en étoiles — 5 boutons radio inversés en DOM
     (5→1) affichés en row-reverse, pour que survol/sélection remplissent les
     étoiles de gauche jusqu'à celle choisie, en CSS pur (sans JS). */
  .star-rating{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:6px; margin-bottom:22px;}
  .star-rating input{ position:absolute; opacity:0; pointer-events:none;}
  .star-rating label{
    font-size:30px; line-height:1; color:var(--line); cursor:pointer; margin:0;
    transition:color .15s ease; display:inline-block;
  }
  .star-rating label:hover, .star-rating label:hover ~ label{ color:#f5a524;}
  .star-rating input:checked ~ label{ color:#f5a524;}
  .contact-item{ border:1px solid var(--line); padding:22px 24px; border-radius:16px; background:rgba(255,255,255,0.04); backdrop-filter:blur(6px); transition:background .25s ease, border-color .25s ease;}
  .contact-item:hover{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.25);}
  .contact-item .label{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--cyan); text-transform:uppercase; letter-spacing:0.06em;}
  .contact-item .val{ font-size:19px; font-weight:600; margin-top:8px; color:var(--ink);}
  .contact-social{ display:flex; gap:12px; margin-top:6px;}
  .contact-social a{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .2s;}
  .contact-social a:hover{ border-color:var(--cyan); color:var(--cyan);}
  .contact-social svg{ width:18px; height:18px; fill:currentColor;}
  .map-frame{ border:1px solid var(--line); overflow:hidden; min-height:320px; border-radius:16px; margin-top:40px; filter:grayscale(60%) invert(92%) contrast(90%);}
  .map-frame iframe{ width:100%; height:100%; min-height:320px; border:0; display:block;}

  /* ---------- CONTACT ---------- */
  .contact{
    padding:130px 0 90px;
    text-align:center;
    background:var(--bg);
    color:var(--ink);
  }
  .contact h1, .contact h2{ font-size:clamp(34px,5.6vw,76px); color:var(--ink); }
  .contact h1 span, .contact h2 span{ background:linear-gradient(100deg, #4F9D00, #9BE45A 60%, #4F9D00); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradientShift 6s ease-in-out infinite;}
  .contact p{ color:var(--ink-dim); margin-top:22px; font-size:16px;}
  .contact-links{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:44px;}
  .site-footer{ padding:64px 0 0; border-top:1px solid var(--line); background:var(--bg-alt); color:var(--ink);}
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:48px;}
  .footer-col h4{ font-family:'Space Grotesk'; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink); margin-bottom:18px;}
  .footer-col{ display:flex; flex-direction:column; gap:12px;}
  .footer-col a{ color:var(--ink-dim); font-size:14.5px; text-decoration:none; transition:color .2s ease, transform .2s ease; width:fit-content;}
  .footer-col a:hover{ color:var(--cyan); transform:translateX(3px);}
  .footer-brand .logo{ font-family:'Space Grotesk'; font-weight:700; font-size:20px; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:10px;}
  .footer-brand .logo span{ color:var(--cyan);}
  .footer-brand-name{ font-family:'Space Grotesk'; font-weight:700; font-size:18px; color:var(--ink);}
  .footer-brand p{ color:var(--ink-dim); font-size:14px; line-height:1.6; max-width:280px; margin:2px 0 6px;}
  .footer-social{ display:flex; gap:10px; margin-top:4px;}
  .footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease, transform .2s ease;}
  .footer-social a:hover{ background:var(--btn); border-color:var(--btn); transform:translateY(-3px);}
  .footer-social svg{ width:16px; height:16px; fill:var(--ink-dim); transition:fill .2s ease;}
  .footer-social a:hover svg{ fill:#04191d;}
  .footer-contact span{ color:var(--ink-dim); font-size:14.5px;}
  .footer-cta{ margin-top:6px; width:fit-content;}
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); letter-spacing:0.05em; flex-wrap:wrap; gap:12px; padding:22px 0; border-top:1px solid var(--line);}
  @media(max-width:900px){
    .footer-grid{ grid-template-columns:1fr 1fr; gap:36px 24px;}
  }
  @media(max-width:560px){
    .footer-grid{ grid-template-columns:1fr;}
    .site-footer{ padding-top:48px;}
  }

  /* ---------- LIGHTBOX / PAGE PROJET (façon "case study" Behance) ---------- */
  /* Toutes les images du projet sont empilées et défilent verticalement —
     la visibilité complète du travail, comme sur une page projet Behance —
     plutôt qu'une seule image à la fois avec une pagination par points. */
  .lightbox{
    position:fixed; inset:0; background:var(--bg-alt,#0f0f10); z-index:1000;
    display:none; flex-direction:column; overflow-y:auto;
  }
  .lightbox.open{ display:flex; }
  body.lb-open{ overflow:hidden;}
  .lb-head{
    position:sticky; top:0; z-index:2; width:100%; display:flex; justify-content:space-between; align-items:flex-start;
    gap:20px; padding:22px 40px; background:rgba(10,10,10,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
  }
  .lb-head h3{ font-size:22px; color:#fff;}
  .lb-head .meta{ font-family:'IBM Plex Mono'; font-size:11.5px; color:rgba(255,255,255,0.55); margin-top:8px; text-transform:uppercase; letter-spacing:0.04em;}
  .lb-nav{ display:flex; align-items:center; gap:6px; flex-shrink:0;}
  .lb-close{ cursor:pointer; font-family:'IBM Plex Mono'; font-size:12px; border:1px solid var(--line); color:rgba(255,255,255,0.8); padding:10px 16px; letter-spacing:0.06em; text-transform:uppercase; flex-shrink:0; margin-left:8px;}
  .lb-close:hover{ border-color:var(--cyan); color:var(--cyan);}
  .lb-arrow{ font-family:'IBM Plex Mono'; font-size:18px; padding:10px 14px; cursor:pointer; color:rgba(255,255,255,0.55); flex-shrink:0; border:1px solid var(--line);}
  .lb-arrow:hover{ color:var(--cyan); border-color:var(--cyan);}
  .lb-imgs{ width:100%; max-width:1040px; margin:0 auto; padding:28px 40px 80px; display:flex; flex-direction:column; gap:16px;}
  .lb-imgs img{ width:100%; height:auto; display:block; border-radius:4px;}
  /* Bloc description / mots-clés / outils (façon Behance) — au-dessus de la
     galerie, alimenté depuis le formulaire projet du dashboard. */
  .lb-intro{ width:100%; max-width:1040px; margin:0 auto; padding:24px 40px 0;}
  .lb-desc{ font-size:15px; line-height:1.7; color:rgba(255,255,255,0.8); max-width:760px; margin-bottom:16px;}
  .lb-tags{ display:flex; flex-wrap:wrap; gap:8px;}
  .lb-tag{
    font-family:'IBM Plex Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em;
    color:rgba(255,255,255,0.75); border:1px solid var(--line); padding:6px 12px; border-radius:20px;
  }
  .lb-tag-tool{ color:var(--cyan); border-color:var(--cyan);}
  @media(max-width:640px){
    .lb-head{ padding:16px 20px;}
    .lb-head h3{ font-size:17px;}
    .lb-intro{ padding:18px 20px 0;}
    .lb-imgs{ padding:18px 20px 60px; gap:10px;}
  }

  /* ---------- PRELOADER ---------- */
  #preloader{
    position:fixed; inset:0; z-index:2000; background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    transition:opacity .6s ease, visibility .6s ease;
  }
  #preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none;}
  .pre-logo{ font-family:'Inter'; font-weight:700; font-size:34px; text-transform:uppercase; letter-spacing:0.04em; display:flex; align-items:center; justify-content:center;}
  .pre-logo span{ color:var(--cyan);}
  .pre-bar{ width:220px; height:2px; background:var(--line); overflow:hidden; position:relative;}
  .pre-bar i{ position:absolute; left:-40%; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, var(--cyan), var(--amber), transparent); animation:preload 1.1s ease-in-out infinite;}
  @keyframes preload{ 0%{left:-40%;} 100%{left:100%;} }
  .pre-pct{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); letter-spacing:0.1em;}

  /* ---------- BACK TO TOP ---------- */
  .top-btn{
    position:fixed; left:26px; bottom:26px; z-index:500;
    width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:var(--bg-alt);
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:all .3s ease; cursor:pointer;
  }
  .top-btn.show{ opacity:1; visibility:visible; transform:translateY(0);}
  .top-btn:hover{ border-color:var(--cyan); color:var(--cyan); background:var(--bg);}
  .top-btn svg{ width:18px; height:18px; fill:currentColor;}
  @media(max-width:640px){
    .top-btn{ width:46px; height:46px; left:18px; bottom:18px;}
  }
  @media(max-width:980px){
    .hero{ grid-template-columns:1fr; }
    .hero-photo{ height:60vh; order:-1;}
    .hero-copy{ padding:100px 24px 60px;}
    .about-grid{ grid-template-columns:1fr; gap:32px;}
    .about-photo{ position:static; max-width:280px; margin:0 auto;}
    .grid{ grid-template-columns:repeat(2,1fr);}
    .tl-item{ grid-template-columns:1fr; gap:6px; padding:18px 0;}
    .tl-mode{ text-align:left;}
    header.nav nav{
      position:fixed; top:0; right:0; height:100svh; width:min(320px,80vw);
      background:var(--bg-alt); flex-direction:column; justify-content:center; align-items:flex-start;
      padding:40px; gap:24px; transform:translateX(100%); transition:transform .35s ease; border-left:1px solid var(--line);
      z-index:2; overflow-y:auto;
    }
    header.nav nav.open{ transform:translateX(0); }
    .nav-toggle{ display:flex; z-index:2;}
    /* Fond opaque plein écran derrière le panneau mobile : sans lui, le reste
       de la page (et les boutons flottants WhatsApp/haut de page, qui ont un
       z-index plus élevé qu'eux-mêmes) restait visible et cliquable à côté du
       panneau ouvert. */
    .nav-backdrop{
      display:block; position:fixed; inset:0; z-index:1; background:rgba(0,0,0,0);
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .35s ease, background-color .35s ease, visibility .35s ease;
    }
    .nav-backdrop.show{
      background:rgba(0,0,0,0.55); opacity:1; visibility:visible; pointer-events:auto;
    }
    /* Le menu ouvert doit passer devant les boutons flottants (z-index:500),
       sinon ils restent visibles/cliquables par-dessus le panneau et le fond. */
    body.nav-open .wa-widget,
    body.nav-open .top-btn{
      opacity:0; visibility:hidden; pointer-events:none;
    }
    /* Sur mobile, le menu latéral défile déjà : la liste des services reste
       simplement dépliée sous "Services" au lieu d'un popup au survol. */
    .nav-dropdown{ flex-direction:column; align-items:flex-start; gap:10px;}
    .nav-dropdown-menu{
      position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
      padding:0 0 0 14px; min-width:0;
    }
    .nav-dropdown-menu-inner{
      box-shadow:none; border:none; background:none; padding:0;
      border-left:1px solid var(--line); border-radius:0; gap:12px;
    }
    .nav-dropdown-menu a{ padding:2px 0;}
    .nav-dropdown-item-title{ font-size:13.5px; color:var(--ink);}
    .nav-dropdown-item-desc{ font-size:11.5px; color:var(--ink-dim);}
  }
  @media(max-width:900px){
    .services-grid{ grid-template-columns:repeat(2,1fr);}
    .webproj-grid{ grid-template-columns:1fr;}
    .testi-track{ grid-template-columns:repeat(2,1fr);}
    .contact-grid{ grid-template-columns:1fr;}
  }
  @media(max-width:640px){
    .grid{ grid-template-columns:1fr;}
    .wrap{ padding:0 20px;}
    .section{ padding:80px 0;}
    .services-grid{ grid-template-columns:1fr;}
    .testi-track{ grid-template-columns:1fr;}
    .wa-float{ width:52px; height:52px;}
    .wa-float svg{ width:26px; height:26px;}
    /* Sur mobile, les boutons flottants (WhatsApp / haut de page) restent
       toujours au-dessus du contenu (position:fixed) : arrivé en bas de page,
       ils finissaient par recouvrir le bandeau CTA puis le footer. On les
       masque en douceur dès que l'un ou l'autre entre dans l'écran (voir
       script.js, IntersectionObserver sur .cta-band / .site-footer). */
    body.footer-visible .wa-widget,
    body.footer-visible .top-btn{
      opacity:0; visibility:hidden; pointer-events:none;
    }
  }

  /* ---------- SCROLL PROGRESS ---------- */
  #scrollProgress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:1200;
    background:var(--dark-accent);
    transition:width .08s linear;
  }

  /* ---------- REVEAL ON SCROLL ---------- */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.is-visible{ opacity:1; transform:translateY(0);}
  .reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
  .reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0);}
  .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.03s;}
  .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.09s;}
  .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.15s;}
  .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.21s;}
  .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.27s;}
  .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.33s;}
  .reveal-stagger.is-visible > *:nth-child(n+7){transition-delay:.37s;}

  /* ---------- ACTIVE NAV (scrollspy) ---------- */
  header.nav nav a.active{ color:var(--amber);}
  header.nav nav a{ position:relative; }
  header.nav nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0%; height:1px; background:var(--amber); transition:width .25s ease;}
  header.nav nav a.active::after{ width:100%;}

  /* ---------- HERO GLOW / PARALLAX ---------- */
  .hero-photo{ perspective:1000px; animation:heroFloat 7s ease-in-out infinite;}
  @keyframes heroFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
  .hero-photo .glow{ display:none; }
  .hero-photo img{ transition:transform .4s ease-out;}
  .hero h1 .word{ display:inline-block; opacity:0; transform:translateY(100%); animation:wordUp .8s cubic-bezier(.2,.8,.2,1) forwards;}
  @keyframes wordUp{ to{ opacity:1; transform:translateY(0);} }

  /* ---------- STATS BAND ---------- */
  .stats-band{ padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt); color:var(--ink);}
  .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .stat-item{
    padding:52px 20px; text-align:center; border:1px solid rgba(255,255,255,0.1); border-radius:18px;
    background:rgba(255,255,255,0.04); backdrop-filter:blur(6px); transition:transform .3s ease, background .3s ease;
  }
  .stat-item:hover{ transform:translateY(-4px); background:#ccf900; border-color:#ccf900;}
  .stat-item:hover .stat-num,
  .stat-item:hover .stat-num span,
  .stat-item:hover .stat-label{ color:#0a0a0a;}
  .stat-num{ font-family:'Inter'; font-weight:700; font-size:clamp(36px,4.5vw,58px); color:var(--ink); line-height:1; transition:color .3s ease;}
  .stat-num span{ color:var(--amber); transition:color .3s ease;}
  .stat-label{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; margin-top:10px; transition:color .3s ease;}
  @media(max-width:700px){
    .stats-grid{ grid-template-columns:repeat(2,1fr);}
  }

  /* ---------- CARD TILT ---------- */
  .card, .service-card, .webproj-card{ transform-style:preserve-3d; will-change:transform;}
  .card{ transition:transform .25s ease, border-color .25s ease;}

  /* ---------- MISC MICRO-INTERACTIONS ---------- */
  .btn{ position:relative; overflow:hidden;}
  .btn::before{
    content:""; position:absolute; inset:0; background:rgba(255,255,255,0.16);
    transform:translateX(-110%) skewX(-12deg); transition:transform .5s ease;
  }
  .btn:hover::before{ transform:translateX(110%) skewX(-12deg);}
  .pill{ transition:all .2s ease;}
  .pill:hover{ border-color:var(--cyan); color:var(--ink); transform:translateY(-2px);}
  .filter-btn.active{ background:var(--btn); border-color:var(--btn); color:#04191d;}
  .lb-arrow:hover{ color:var(--cyan);}
  .top-btn:hover{ border-color:var(--cyan); color:var(--cyan);}
  ::selection{ background:var(--cyan); color:#fff;}

  /* ---------- TIKTOK CAROUSEL ---------- */
  .tiktok-carousel{
    display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:10px; scrollbar-width:none; -ms-overflow-style:none;
  }
  .tiktok-carousel::-webkit-scrollbar{ display:none;}
  .tiktok-card{
    position:relative; scroll-snap-align:start; flex:0 0 300px; border:1px solid var(--line); background:var(--bg-alt);
    min-height:540px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .tiktok-card blockquote.tiktok-embed{ margin:0 !important; width:100%;}
  .tiktok-play-overlay{
    width:100%; height:100%; min-height:540px; border:0; background:var(--bg-alt); color:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; cursor:pointer; transition:background .2s;
  }
  .tiktok-play-overlay:hover{ background:var(--line); }
  .tiktok-play-icon{
    width:64px; height:64px; border-radius:50%; border:1px solid var(--line); background:var(--cyan); color:#04191d;
    display:flex; align-items:center; justify-content:center; font-size:20px; padding-left:4px;
  }
  .tiktok-play-label{
    font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim);
  }
  .tiktok-placeholder{
    flex:0 0 300px; min-height:540px; border:1px dashed var(--line); background:var(--bg-alt);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:30px;
    font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em;
  }
  .tiktok-cta{ display:flex; justify-content:center; align-items:center; gap:18px; margin-top:36px;}
  .carousel-arrow{
    width:50px; height:50px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink);
    font-family:'IBM Plex Mono'; font-size:17px; cursor:pointer; transition:all .2s; flex-shrink:0;
  }
  .carousel-arrow:hover{ border-color:var(--amber); color:var(--amber);}
  @media(max-width:640px){
    .tiktok-card, .tiktok-placeholder{ flex-basis:82%; min-height:480px;}
  }

  /* ---------- GRAIN TEXTURE (global) ---------- */
  #grainOverlay{
    position:fixed; inset:0; z-index:900; pointer-events:none;
    opacity:0.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------- AURORA AMBIENT BLOBS ---------- */
  .aurora{ display:none; position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
  .aurora span{
    position:absolute; border-radius:50%; filter:blur(64px); mix-blend-mode:screen; opacity:0.62;
    animation:auroraDrift 16s ease-in-out infinite alternate;
  }
  .aurora span:nth-child(1){ width:460px; height:460px; background:radial-gradient(circle, var(--cyan), transparent 70%); top:-10%; left:-8%; animation-duration:17s;}
  .aurora span:nth-child(2){ width:400px; height:400px; background:radial-gradient(circle, var(--amber), transparent 70%); bottom:-15%; right:-6%; animation-duration:14s; animation-delay:-4s;}
  .aurora span:nth-child(3){ width:300px; height:300px; background:radial-gradient(circle, var(--cyan), transparent 70%); top:35%; right:20%; animation-duration:20s; animation-delay:-9s; opacity:0.4;}
  @keyframes auroraDrift{
    0%{ transform:translate(0,0) scale(1);}
    50%{ transform:translate(70px,-55px) scale(1.22);}
    100%{ transform:translate(-55px,35px) scale(0.9);}
  }
  section.section, section.contact, section.hero, section.stats-band, .fmn-hero{ position:relative; overflow:hidden; }

  /* ---------- PAGE HERO (bandeau de titre des pages individuelles) ---------- */
  .page-hero{ padding:150px 0 60px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
  .page-hero .back-link{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; transition:color .2s;}
  .page-hero .back-link:hover{ color:var(--cyan);}
  .page-hero h1{ font-size:clamp(40px,7vw,84px);}
  .page-hero p{ color:var(--ink-dim); max-width:560px; margin-top:16px; font-size:16px; line-height:1.6;}

  /* ---------- QUICK LINKS (accueil) ---------- */
  .quicklinks-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
  .quicklink-card{ background:var(--bg); padding:30px 26px; transition:background .25s;}
  .quicklink-card:hover{ background:var(--bg-alt);}
  .quicklink-card .ql-num{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--cyan); letter-spacing:0.08em;}
  .quicklink-card h3{ font-size:22px; margin-top:14px; margin-bottom:8px; text-transform:none; font-weight:700;}
  .quicklink-card p{ color:var(--ink-dim); font-size:13.5px; line-height:1.5;}
  .quicklink-card .ql-arrow{ display:inline-block; margin-top:14px; color:var(--amber); font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
  section.section > .wrap, section.contact > .wrap, .fmn-hero > .wrap{ position:relative; z-index:1;}

  /* ---------- DOT GRID for alt sections ---------- */
  .section.alt{ position:relative; }
  .section.alt::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(rgba(244,242,234,0.06) 1px, transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  }

  @media(prefers-reduced-motion: reduce){
    .aurora span{ animation:none;}
  }


  /* ==================================================================
     PAGE SOLUTION DÉDIÉE (solution.php) — bandeau, fil d'Ariane,
     cartes d'étapes/livrables avec icône, CTA final.
     ================================================================== */
  .breadcrumb{
    font-family:'IBM Plex Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--ink-dim); margin-top:14px; margin-bottom:22px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .breadcrumb a{ color:var(--ink-dim); transition:color .2s;}
  .breadcrumb a:hover{ color:var(--cyan);}
  .breadcrumb .current{ color:var(--ink); font-weight:600;}

  .solution-banner{
    background:var(--bg); padding:88px 0 64px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;
  }
  .solution-banner::before{ display:none; }
  .solution-banner .wrap{ position:relative; z-index:1;}
  .solution-eyebrow{
    display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono'; font-weight:600;
    font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:#9BE45A; margin-bottom:18px;
  }
  .solution-eyebrow::before{ content:""; width:22px; height:1.5px; background:#9BE45A;}
  .solution-banner h1{ font-size:clamp(30px,4.2vw,48px); max-width:760px; color:#ccf900;}
  .solution-banner .accent{ color:#4F9D00;}
  .solution-banner p{ max-width:620px; margin-top:22px; color:var(--ink-dim); font-size:16px; line-height:1.7;}

  /* Variante compacte : juste le fil d'Ariane, pour les pages qui ont déjà leur
     propre grand titre juste en dessous (contact.php, formation.php) — évite
     d'empiler deux gros blocs de titre l'un sur l'autre. */
  .breadcrumb-bar{ background:var(--bg); padding:26px 0; border-bottom:1px solid var(--line);}
  .breadcrumb-bar .breadcrumb{ margin-bottom:0;}

  .accent-highlight{ background:rgba(79,157,0,0.18); padding:1px 6px; border-radius:4px;}

  .icon-card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
  .icon-card{
    background:var(--bg-alt); border:1px solid var(--line); border-radius:16px; padding:26px 22px;
    position:relative; transition:transform .3s ease, box-shadow .3s ease;
  }
  .icon-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(18,20,43,0.08);}
  .icon-card .ic-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .icon-badge{
    width:44px; height:44px; border-radius:12px; background:rgba(79,157,0,0.14); color:#4F9D00;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .icon-badge svg{ width:22px; height:22px;}
  .ic-num{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim); letter-spacing:0.05em;}
  .icon-card h3{ font-size:17px; font-weight:700; margin-bottom:8px; color:var(--ink);}
  .icon-card p{ color:var(--ink-dim); font-size:13.5px; line-height:1.6;}

  .icon-card-grid.compact{ grid-template-columns:repeat(2,1fr);}
  .icon-card.compact-item{ display:flex; align-items:flex-start; gap:16px; padding:20px;}
  .icon-card.compact-item .icon-badge{ width:36px; height:36px; margin-top:2px;}
  .icon-card.compact-item .icon-badge svg{ width:18px; height:18px;}
  .icon-card.compact-item h3{ font-size:15.5px; margin-bottom:4px;}

  .solution-cta-final{
    background:var(--bg); border-top:1px solid var(--line); padding:90px 0; text-align:center;
  }
  .solution-cta-final .section-num{ color:#9BE45A;}
  .solution-cta-final h2{ font-size:clamp(28px,4vw,44px); color:var(--ink); max-width:640px; margin:0 auto 30px;}

  @media(max-width:900px){
    .icon-card-grid{ grid-template-columns:repeat(2,1fr);}
    .icon-card-grid.compact{ grid-template-columns:1fr;}
  }
  @media(max-width:560px){
    .icon-card-grid{ grid-template-columns:1fr;}
  }

  /* CTA BAND — bandeau plein largeur avant le footer (géré depuis le dashboard).
     Disposition en une ligne : texte (eyebrow + titre) à gauche, bouton à droite —
     comme dans l'aperçu du dashboard, et non centré/empilé. */
  .cta-band{
    padding:70px 0; overflow:hidden;
  }
  .cta-band-inner{
    display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; text-align:left;
  }
  .cta-band-text{ flex:1 1 420px; min-width:0;}
  .cta-band-eyebrow{
    font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
    display:inline-flex; align-items:center; gap:10px; opacity:0.75; margin-bottom:14px;
  }
  .cta-band-eyebrow::before{
    content:''; display:inline-block; width:28px; height:1px; background:currentColor; opacity:0.6;
  }
  .cta-band-slider{
    position:relative; min-height:2.3em; width:100%;
  }
  .cta-band-slide{
    position:absolute; left:0; top:0; margin:0;
    font-family:'Inter'; font-weight:800; font-size:clamp(28px,4.2vw,48px); line-height:1.15;
    opacity:0; transform:translateY(16px); transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
  }
  .cta-band-slide.active{ position:relative; opacity:1; transform:translateY(0);}
  .cta-band-slide.exit{ opacity:0; transform:translateY(-16px);}
  .cta-band-btn{
    display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
    padding:16px 30px; border-radius:100px; font-family:'Inter'; font-size:14.5px; font-weight:600;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .cta-band-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,0.18);}
  @media(max-width:760px){
    .cta-band-inner{ flex-direction:column; align-items:flex-start; flex-wrap:nowrap;}
    /* En colonne, le "flex:1 1 420px" du bloc texte s'appliquerait à sa HAUTEUR
       (420 px de base + croissance) : c'est ce qui creusait un grand vide entre le
       titre et le bouton sur mobile. On revient à une hauteur naturelle. */
    .cta-band-text{ flex:0 0 auto; width:100%;}
    .cta-band-btn{ width:auto; align-self:flex-start;}
  }
  @media(max-width:640px){
    .cta-band{ padding:36px 0;}
    .cta-band-inner{ gap:18px;}
    .cta-band-slider{ min-height:2.5em;}
    .cta-band-eyebrow{ margin-bottom:8px;}
  }

  /* ============ PAGE RÉSERVATION (reservation.php) ============ */
  .resa-banner{ padding:64px 0 40px; }
  .resa-banner .section-num{ margin-bottom:10px;}
  .resa-banner h1{ font-size:clamp(28px,4vw,44px); color:var(--ink);}

  .resa-steps{ display:flex; align-items:center; gap:10px; margin-bottom:36px; flex-wrap:wrap;}
  .resa-step{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--ink-dim);}
  .resa-step-circle{
    width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center;
    justify-content:center; font-size:12.5px; font-weight:600; color:var(--ink-dim); flex-shrink:0; transition:all .2s;
  }
  .resa-step.current .resa-step-circle{ background:var(--ink); border-color:var(--ink); color:#fff;}
  .resa-step.current{ color:var(--ink); font-weight:600;}
  .resa-step.done .resa-step-circle{ background:var(--cyan); border-color:var(--cyan); color:#fff;}
  .resa-step-line{ width:44px; height:1px; background:var(--line); flex-shrink:0;}
  @media(max-width:640px){ .resa-step-line{ width:20px;} .resa-step span.label{ display:none;} }

  .resa-back{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-dim); font-size:13.5px; margin-bottom:18px; cursor:pointer; transition:color .2s;}
  .resa-back:hover{ color:var(--cyan);}

  .resa-panel{ display:none; }
  .resa-panel.active{ display:block; }
  .resa-panel h2{ font-size:22px; margin-bottom:22px; color:var(--ink);}

  .resa-services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 340px)); gap:22px; margin-bottom:28px;}
  .resa-service-card{
    border:1.5px solid var(--line); border-radius:16px; padding:26px 26px 24px; cursor:pointer; display:flex; flex-direction:column;
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; background:#fff;
  }
  .resa-service-card .resa-service-foot{ margin-top:auto; }
  .resa-service-card:hover{ border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 14px 28px rgba(18,20,43,0.08);}
  .resa-service-meta{ display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px;}
  .resa-service-meta .ui-icon{ color:var(--ink-dim); }
  .resa-service-card h3{ font-size:19px; font-weight:800; letter-spacing:-0.01em; margin-bottom:8px; color:var(--ink);}
  .resa-service-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; margin-bottom:26px;}
  .resa-service-foot{ display:flex; align-items:center; justify-content:space-between;}
  .resa-service-price{ font-weight:800; font-size:20px; letter-spacing:-0.01em; color:var(--ink);}
  .resa-service-price em{ font-style:normal; font-weight:600; font-size:14px; color:var(--ink-dim);}
  .resa-service-arrow{
    width:36px; height:36px; border-radius:50%; background:var(--cyan); color:#04191d; display:flex;
    align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s ease;
  }
  .resa-service-card:hover .resa-service-arrow{ transform:translateX(3px);}
  @media(max-width:720px){ .resa-services-grid{ grid-template-columns:1fr;} }
  .resa-engagements ul li::before{ color:#7cb518; }

  .resa-engagements{ background:var(--bg-alt); border-radius:16px; padding:24px 26px;}
  .resa-engagements .lbl{ font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); margin-bottom:14px; display:block;}
  .resa-engagements ul{ list-style:none; display:flex; flex-direction:column; gap:10px;}
  .resa-engagements li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink);}
  .resa-engagements li::before{ content:'✓'; color:var(--cyan); font-weight:700; flex-shrink:0;}

  .resa-calendar-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;}
  @media(max-width:760px){ .resa-calendar-wrap{ grid-template-columns:1fr;} }
  .resa-calendar{ border:1px solid var(--line); border-radius:16px; padding:22px;}
  .resa-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .resa-cal-head strong{ text-transform:capitalize; font-size:15px;}
  .resa-cal-nav{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; background:none;}
  .resa-cal-nav:hover{ border-color:var(--cyan); color:var(--cyan);}
  .resa-cal-nav:disabled{ opacity:0.3; cursor:not-allowed;}
  .resa-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center;}
  .resa-cal-dow{ font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; padding-bottom:8px;}
  .resa-cal-day{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:13px;
    color:var(--ink-dim); opacity:.4; background:none; border:none; cursor:not-allowed; font-family:inherit;
  }
  .resa-cal-day.available{ opacity:1; background:#eef7e3; color:var(--ink); cursor:pointer; font-weight:700; border:1px solid #cdf900; transition:all .2s;}
  .resa-cal-day.available:hover{ background:#cdf900;}
  .resa-cal-day.selected, .resa-cal-day.available.selected{ background:#0a0a0a; color:#cdf900; border-color:#0a0a0a;}
  .resa-cal-legend span.dot{ background:#eef7e3; border-color:#cdf900; }
  .resa-cal-legend{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:11.5px; color:var(--ink-dim);}
  .resa-cal-legend span.dot{ width:9px; height:9px; border-radius:50%; background:var(--bg-alt); border:1px solid var(--line); display:inline-block;}

  .resa-times-panel{ border:1px solid var(--line); border-radius:16px; padding:22px; min-height:120px;}
  .resa-times-hint{ color:var(--ink-dim); font-size:13.5px;}
  .resa-time-btn{
    display:block; width:100%; text-align:left; padding:12px 16px; border:1px solid var(--line); border-radius:10px;
    background:#fff; font-family:'IBM Plex Mono'; font-size:14px; color:var(--ink); cursor:pointer; margin-bottom:10px; transition:all .2s;
  }
  .resa-time-btn:hover{ border-color:var(--cyan); color:var(--cyan);}

  .resa-form{ max-width:560px; display:flex; flex-direction:column; gap:16px;}
  .resa-form .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .resa-form label{ font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); display:flex; flex-direction:column; gap:7px;}
  .resa-form input, .resa-form textarea{
    font-family:'Inter'; font-size:14.5px; color:var(--ink); padding:12px 14px; border:1px solid var(--line);
    border-radius:10px; background:#fff; text-transform:none; letter-spacing:0;
  }
  .resa-form input:focus, .resa-form textarea:focus{ outline:none; border-color:var(--cyan);}
  .resa-recap-box{ background:var(--bg-alt); border-radius:12px; padding:16px 18px; font-size:13.5px; color:var(--ink); margin-bottom:6px;}
  .resa-consent{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-dim); flex-direction:row;}
  .resa-consent input{ margin-top:3px;}
  @media(max-width:560px){ .resa-form .form-row-2{ grid-template-columns:1fr;} }

  .resa-confirm{ text-align:center; padding:20px 0 10px;}
  .resa-confirm .check{
    width:64px; height:64px; border-radius:50%; background:var(--cyan); color:#04191d; display:flex; align-items:center;
    justify-content:center; margin:0 auto 22px; font-size:28px;
  }
  .resa-confirm h2{ margin-bottom:12px;}
  .resa-confirm p{ color:var(--ink-dim); max-width:460px; margin:0 auto 26px;}
  .resa-confirm-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

  /* ============ PAGE FORMATIONS (formation.php) ============ */
  .fmn-hero{ padding:150px 0 50px;}
  .fmn-hero-badge{
    display:inline-block; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--ink); background:var(--cyan); padding:6px 12px; border-radius:8px; margin-left:10px;
  }
  .fmn-hero-badge.small{ margin-left:0;}
  .fmn-hero-track{ position:relative;}
  .fmn-hero-slide{ display:none;}
  .fmn-hero-slide.active{ display:block; animation:fmnFade .5s ease;}
  @keyframes fmnFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
  .fmn-hero-copy{ max-width:640px;}
  .fmn-hero-copy .pill{ margin-bottom:18px; display:inline-block;}
  .fmn-hero-copy h1{ font-size:clamp(34px,5.2vw,58px); margin:6px 0 18px; line-height:1.12;}
  .fmn-hero-copy h1 span{ color:var(--cyan);}
  .fmn-hero-copy p{ color:var(--ink-dim); font-size:16px; line-height:1.6; max-width:520px;}
  .fmn-hero-stats{ display:flex; gap:28px; flex-wrap:wrap; margin:28px 0;}
  .fmn-hero-stats strong{ display:block; font-size:20px; font-weight:700;}
  .fmn-hero-stats span{ display:block; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); margin-top:4px;}
  .fmn-hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .fmn-hero-price{ font-size:22px; font-weight:700;}
  .fmn-hero-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px;}
  @media(max-width:640px){ .fmn-hero{ padding:120px 0 40px;} }

  /* ---------- CATALOGUE ---------- */
  .fmn-catalogue-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  @media(max-width:820px){ .fmn-catalogue-grid{ grid-template-columns:1fr;} }
  .fmn-course-card{
    background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px;
    display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.04);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .fmn-course-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,0.08);}
  .fmn-course-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
  .fmn-course-card h3{ font-size:21px; margin-bottom:10px; line-height:1.25;}
  .fmn-course-card > p{ color:var(--ink-dim); font-size:14px; line-height:1.6; margin-bottom:16px;}
  .fmn-course-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
  .fmn-course-meta{ display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap;}
  .fmn-course-meta strong{ display:block; font-size:16px; font-weight:700;}
  .fmn-course-meta span{ display:block; font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); margin-top:3px;}
  .fmn-course-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;}
  .fmn-course-price{ font-size:19px; font-weight:700;}
  .fmn-course-note{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em; margin-top:16px; text-align:center;}

  /* ---------- DÉCOUVREZ LES FORMATIONS (contenu) ---------- */
  .fmn-content-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:auto auto; gap:20px;}
  .fmn-content-main{ grid-row:span 2; border-radius:18px; background:var(--bg-alt); min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:1px solid var(--line);}
  .fmn-content-side{ display:contents;}
  .fmn-content-card{ border-radius:18px; background:var(--bg-alt); border:1px solid var(--line); min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
  .fmn-content-play{ width:56px; height:56px; border-radius:50%; background:var(--cyan); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;}
  .fmn-content-play.small{ width:42px; height:42px; font-size:15px;}
  .fmn-content-label{ font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-dim); text-align:center; padding:0 16px;}
  .fmn-content-cta{ background:var(--ink); color:#fff; border-radius:18px; padding:26px; display:flex; flex-direction:column;}
  .fmn-content-cta h3{ font-size:19px; margin-bottom:10px;}
  .fmn-content-cta p{ color:rgba(255,255,255,0.65); font-size:13.5px; line-height:1.6; margin-bottom:18px;}
  .fmn-content-social{ display:flex; gap:10px; flex-wrap:wrap;}
  .fmn-content-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); color:#fff; display:flex; align-items:center; justify-content:center; transition:all .2s;}
  .fmn-content-social a:hover{ border-color:var(--cyan); color:var(--cyan);}
  .fmn-content-social svg{ width:16px; height:16px; fill:currentColor;}
  @media(max-width:900px){
    .fmn-content-grid{ grid-template-columns:1fr 1fr;}
    .fmn-content-cta{ grid-column:span 2;}
  }
  @media(max-width:640px){
    .fmn-content-grid{ grid-template-columns:1fr;}
    .fmn-content-main{ grid-row:auto;}
    .fmn-content-cta{ grid-column:auto;}
  }

  /* ---------- FORMATEUR ---------- */
  .fmn-formateur-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center;}
  @media(max-width:820px){ .fmn-formateur-grid{ grid-template-columns:1fr;} }
  .fmn-formateur-photo{ aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:var(--bg-alt); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
  .fmn-formateur-photo img{ width:100%; height:100%; object-fit:cover;}
  .fmn-formateur-placeholder{ font-size:64px; opacity:0.3;}
  .fmn-formateur-info h2{ font-size:clamp(28px,3.6vw,42px); margin:8px 0 18px;}
  .fmn-formateur-info > p{ color:var(--ink-dim); font-size:15px; line-height:1.7; margin-bottom:26px;}
  .fmn-skills{ display:flex; flex-direction:column; gap:16px; margin-bottom:30px;}
  .fmn-skill-head{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; margin-bottom:8px;}
  .fmn-skill-bar{ height:8px; border-radius:6px; background:var(--line); overflow:hidden;}
  .fmn-skill-bar i{ display:block; height:100%; background:var(--cyan); border-radius:6px;}
  .fmn-formateur-cta{ display:flex; gap:16px; flex-wrap:wrap;}

  /* ---------- AVIS (grille statique, réutilise .testi-card) ---------- */
  .fmn-testi-grid{ display:flex; flex-wrap:wrap; gap:22px;}
  .fmn-testi-grid .testi-card{ flex:0 0 calc((100% - 44px)/3); max-width:calc((100% - 44px)/3);}
  @media(max-width:900px){ .fmn-testi-grid .testi-card{ flex:0 0 calc((100% - 22px)/2); max-width:calc((100% - 22px)/2);} }
  @media(max-width:640px){ .fmn-testi-grid .testi-card{ flex:0 0 100%; max-width:100%;} }

/* ============ LANDING « SITE WEB » (site-web.php — blocs lp_* du Page Builder) ============ */
  /* ===== Landing « Site web » — bannière, présentation + étapes, formulaire complet, encadré infos ===== */
.lp{ --lime:#caf600; --dark:#0a0a0a; --green:var(--btn, #4F9D00); }
.lp-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#0a0a0a; background:#caf600; padding:6px 13px; border-radius:100px; display:inline-flex; align-items:center; margin-bottom:16px; }
.reveal-d1{ transition-delay:.1s; } .reveal-d2{ transition-delay:.2s; } .reveal-d3{ transition-delay:.3s; }

/* --- Bannière --- */
.lp-banner{ position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; padding:130px 0 70px; overflow:hidden; background:var(--dark); }
.lp-banner-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.7); transform:scale(1.04); animation:lpKen 18s ease-in-out infinite alternate; }
@keyframes lpKen{ from{ transform:scale(1.04) translateY(0);} to{ transform:scale(1.12) translateY(-14px);} }
.lp-banner::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.82)); }
.lp-banner .wrap{ position:relative; z-index:1; max-width:820px; }
.lp-badge{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; background:rgba(10,10,10,0.7); border:1px solid rgba(202,246,0,0.5); color:var(--lime); padding:7px 12px; border-radius:100px; margin-bottom:18px; backdrop-filter:blur(6px); }
.lp-banner h1{ font-size:clamp(32px, 6.4vw, 56px); font-weight:800; letter-spacing:-0.02em; line-height:1.08; margin:0 0 14px; }
.lp-banner h1 em{ font-style:normal; color:var(--lime); }
.lp-banner p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,0.78); max-width:520px; margin:0 auto; }

/* --- Présentation + étapes --- */
.lp-intro{ padding:64px 0; }
.lp-intro-grid{ display:grid; gap:36px; }
.lp-intro h2{ font-size:clamp(24px, 4.2vw, 34px); font-weight:800; letter-spacing:-0.02em; line-height:1.15; margin:0 0 14px; color:var(--ink); }
.lp-intro p.lead{ color:var(--ink-dim); font-size:15.5px; line-height:1.7; margin:0 0 22px; }
.lp-intro p.lead strong{ color:var(--ink); }
.lp-intro h3{ font-size:16px; font-weight:700; margin:0 0 12px; color:var(--ink); }
.lp-checks{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.lp-checks li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink); line-height:1.5; }
.lp-checks li::before{ content:'✓'; flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--lime); color:#0a0a0a; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:2px; }
.lp-steps{ display:grid; gap:18px; align-content:start; margin-top:26px; }
.lp-includes{ background:var(--bg-alt); border-radius:16px; padding:24px; border-left:4px solid var(--lime); }
.lp-includes h3{ margin-top:0; }
.lp-step{ display:flex; gap:16px; align-items:flex-start; transition:transform .25s ease; }
.lp-step:hover{ transform:translateX(6px); }
.lp-step .ico{ position:relative; flex-shrink:0; width:48px; height:48px; border-radius:50%; background:var(--dark); color:var(--lime); display:inline-flex; align-items:center; justify-content:center; font-size:20px; }
.lp-step .ico b{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--lime); color:#0a0a0a; font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--bg); }
.lp-step strong{ display:block; font-size:15.5px; margin-bottom:3px; color:var(--ink); }
.lp-step p{ margin:0; color:var(--ink-dim); font-size:14px; line-height:1.55; }

/* --- Formulaire (colonne visuelle + formulaire complet) --- */
.lp-form-section{ padding:64px 0 60px; background:#f5f6fb; }
.lp-form-card{ background:#fff; border:1px solid rgba(18,20,43,0.08); border-radius:20px; padding:16px; display:grid; gap:18px; box-shadow:0 10px 30px rgba(18,20,43,0.05); }
.lp-visual{ display:grid; gap:12px; align-content:start; }
.lp-visual-item{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/10; background:#161616; display:block; text-decoration:none; color:#fff; }
.lp-visual-item:first-child{ aspect-ratio:4/5; }
.lp-visual-item img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.lp-visual-item:hover img{ transform:scale(1.06); }
.lp-visual-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.85)); }
.lp-visual-item .cap{ position:absolute; left:14px; right:14px; bottom:12px; z-index:1; }
.lp-visual-item .cap strong{ display:block; font-size:16px; font-weight:800; letter-spacing:-0.01em; }
.lp-visual-item .cap small{ display:block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:rgba(255,255,255,0.7); margin-top:2px; }
.lp-visual-item .tag{ position:absolute; top:12px; left:12px; z-index:1; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; background:var(--lime); color:#0a0a0a; padding:5px 9px; border-radius:100px; font-weight:600; }
.lp-form{ background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:22px 18px; }
.lp-form h2{ font-size:20px; font-weight:800; margin:0 0 16px; color:var(--ink); }
.lp-fieldset{ display:flex; align-items:center; gap:12px; margin:22px 0 16px; }
.lp-fieldset:first-of-type{ margin-top:6px; }
.lp-fieldset::after{ content:''; flex:1; height:1px; background:var(--line); }
.lp-fs-title{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:#0a0a0a; font-weight:700; background:#caf600; padding:5px 11px; border-radius:100px; }
.lp-form .lp-yesno.lp-features label{ font-size:13px; padding:6px 12px; }
.lp-form label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:14px; }
.lp-form label > input, .lp-form label > select, .lp-form label > textarea{ margin-top:6px; display:block; }
.lp-form input, .lp-form select, .lp-form textarea{ font-family:'Inter', sans-serif; font-size:15px; color:var(--ink); background:var(--bg-alt); border:1.5px solid var(--line); border-radius:8px; padding:12px 13px; width:100%; text-transform:none; letter-spacing:0; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.lp-form input:focus, .lp-form select:focus, .lp-form textarea:focus{ outline:none; border-color:var(--green); background:var(--bg); box-shadow:0 0 0 4px rgba(79,157,0,0.12); }
.lp-form .req{ color:#e5484d; }
/* Survol / focus : le champ et son libellé réagissent ensemble */
.lp-form label{ transition:color .18s ease; border-radius:8px; }
.lp-form label:hover{ color:var(--ink); }
.lp-form label:hover > input, .lp-form label:hover > select, .lp-form label:hover > textarea{ border-color:rgba(18,20,43,0.35); background:var(--bg); box-shadow:0 4px 14px rgba(0,0,0,0.06); transform:translateY(-1px); }
.lp-form input, .lp-form select, .lp-form textarea{ transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease; }
.lp-form label:focus-within{ color:var(--ink); }
.lp-form label:focus-within::before{ content:''; }
.lp-form input:focus, .lp-form select:focus, .lp-form textarea:focus{ transform:translateY(-1px); }
.lp-form select{ cursor:pointer; }
.lp-form .lp-yesno label:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.lp-form .lp-yesno label{ transition:all .18s ease; }
.lp-form .lp-fieldset:hover .lp-fs-title{ box-shadow:0 0 0 4px rgba(202,246,0,0.35); }
.lp-fs-title{ transition:box-shadow .18s ease; }
.lp-form .lp-row-2{ display:grid; gap:0 14px; }
.lp-form .lp-yesno{ display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 16px; }
.lp-form .lp-yesno label{ display:inline-flex; align-items:center; gap:8px; margin:0; text-transform:none; font-family:'Inter'; font-size:13.5px; letter-spacing:0; color:var(--ink); border:1.5px solid var(--line); border-radius:100px; padding:7px 13px; cursor:pointer; transition:all .15s ease; }
.lp-form .lp-yesno label:hover{ border-color:var(--green); }
.lp-form .lp-yesno input{ width:auto; padding:0; margin:0; accent-color:var(--green); }
.lp-form .lp-yesno label:has(input:checked){ border-color:var(--green); background:rgba(79,157,0,0.08); }
.lp-form .hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.lp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--dark); color:#fff; font-weight:600; font-size:15px; padding:15px 24px; border-radius:10px; text-decoration:none; border:0; cursor:pointer; width:100%; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.lp-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,0.2); background:#1a1a1a; }
.lp-btn .arrow{ transition:transform .2s ease; } .lp-btn:hover .arrow{ transform:translateX(4px); }
.lp-btn.is-sending{ pointer-events:none; opacity:.8; }
.lp-form .lp-privacy{ font-size:12px; color:var(--ink-dim); margin:12px 0 0; line-height:1.55; }
.lp-errors{ background:rgba(229,72,77,0.1); border:1px solid #e5484d; color:#b3262b; border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:14px; }
.lp-errors ul{ margin:0; padding-left:18px; }

/* --- Encadré infos --- */
.lp-info-section{ padding:0 0 80px; }
.lp-info{ max-width:760px; margin:0 auto; background:var(--bg-alt); border-radius:16px; padding:28px 24px; border-left:4px solid var(--lime); }
.lp-info h2{ font-size:20px; font-weight:800; margin:0 0 14px; color:var(--ink); line-height:1.3; }
.lp-info ul{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px; }
.lp-info li{ position:relative; padding-left:16px; font-size:14.5px; line-height:1.6; color:var(--ink-dim); }
.lp-info li::before{ content:''; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--green); }
.lp-info p{ margin:0; font-size:14.5px; color:var(--ink); }
.lp-info a{ color:var(--green); font-weight:600; text-decoration:none; } .lp-info a:hover{ text-decoration:underline; }

/* --- Slider sites réalisés --- */
.lp-slider-section{ padding:80px 0 70px; }
.lp-carousel{ padding:16px 16px 44px; margin:-16px -16px -44px; }
.lp-pcard.lp-slide{ transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.lp-pcard.lp-slide:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(10,10,10,0.08); }
.lp-slider-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; }
.lp-slider-head h2{ font-size:clamp(22px, 4vw, 32px); font-weight:800; letter-spacing:-0.02em; line-height:1.15; margin:0; color:var(--ink); }
.lp-slider-nav{ display:flex; gap:8px; flex-shrink:0; }
.lp-arrow{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; font-size:16px; transition:all .2s ease; }
.lp-arrow:hover{ border-color:var(--green); color:var(--green); transform:translateY(-2px); }
.lp-carousel{ overflow:hidden; }
.lp-track{ display:flex; gap:18px; transition:transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.lp-slide{ flex:0 0 100%; max-width:100%; background:var(--bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.lp-slide:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(10,10,10,0.08); border-color:#caf600; }
.lp-slide figure{ margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); }
.lp-slide img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.lp-slide:hover img{ transform:scale(1.04); }
.lp-slide-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; }
.lp-slide-body strong{ font-size:16px; color:var(--ink); }
.lp-slide-body p{ margin:0; color:var(--ink-dim); font-size:13.5px; line-height:1.55; }
.lp-slide-body span{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--green); margin-top:4px; }
.lp-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
/* Grille de cartes « Sites web réalisés » */
.lp-pgrid{ display:grid; gap:22px; }
.lp-pcard{ background:var(--bg); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .12s), transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * .12s), box-shadow .3s ease, border-color .3s ease; }
.lp-pcard.is-visible{ transition-delay:0s, 0s, 0s, 0s; }
.lp-pcard:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(10,10,10,0.08); border-color:#caf600; }
.lp-pcard-media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); }
.lp-pcard-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.lp-pcard:hover .lp-pcard-media img{ transform:scale(1.04); }
.lp-pcard-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 65%, rgba(10,10,10,0.18)); opacity:0; transition:opacity .3s ease; }
.lp-pcard:hover .lp-pcard-media::after{ opacity:1; }
.lp-pcard-zoom{ position:absolute; right:14px; bottom:14px; z-index:1; width:40px; height:40px; border-radius:50%; background:#caf600; color:#0a0a0a; display:flex; align-items:center; justify-content:center; font-weight:700; transform:translateY(12px); opacity:0; transition:all .3s ease; }
.lp-pcard:hover .lp-pcard-zoom{ transform:none; opacity:1; }
.lp-pcard-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.lp-pcard-cat{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); }
.lp-pcard h3{ font-size:19px; font-weight:800; letter-spacing:-0.01em; margin:0; color:var(--ink); }
.lp-pcard p{ margin:0; color:var(--ink-dim); font-size:14px; line-height:1.6; }
.lp-pcard-btn{ align-self:flex-start; margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; background:#0a0a0a; color:#fff; font-weight:600; font-size:14px; padding:12px 20px; border-radius:100px; text-decoration:none; transition:background .2s ease, color .2s ease, transform .2s ease; }
.lp-pcard-btn .arrow{ transition:transform .2s ease; }
.lp-pcard-btn:hover{ background:#caf600; color:#0a0a0a; transform:translateY(-2px); }
.lp-pcard-btn:hover .arrow{ transform:translateX(4px); }
@media(min-width:640px){ .lp-pgrid{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1000px){ .lp-pgrid{ grid-template-columns:repeat(3, 1fr); } }
.lp-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:all .25s ease; }
.lp-dots span.active{ background:var(--green); transform:scale(1.35); }
/* --- Témoignages web --- */
.lp-testi-section{ padding:64px 0 72px; background:#f5f6fb; }
.lp-testi-section .testi-card{ background:#fff; }
.lp-testi-section h2{ font-size:clamp(22px, 4vw, 32px); font-weight:800; letter-spacing:-0.02em; line-height:1.15; margin:0 0 24px; color:var(--ink); }
.lp-testis{ display:grid; gap:18px; }
.lp-testis .testi-card{ flex:none; }

@media(min-width:640px) and (max-width:899px){ .lp-slide{ flex:0 0 calc((100% - 18px) / 2); max-width:calc((100% - 18px) / 2); } .lp-testis{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:900px){
  .lp-slide{ flex:0 0 calc((100% - 36px) / 3); max-width:calc((100% - 36px) / 3); }
  .lp-testis{ grid-template-columns:repeat(3, 1fr); }
  .lp-banner{ min-height:460px; padding:150px 0 90px; }
  .lp-intro{ padding:80px 0 60px; }
  .lp-intro-grid{ grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:start; }
  .lp-form-card{ grid-template-columns:300px 1fr; gap:22px; padding:22px; }
  .lp-form-card.no-visual{ grid-template-columns:1fr; }
  .lp-form{ padding:30px 28px; }
  .lp-form .lp-row-2{ grid-template-columns:1fr 1fr; }
  .lp-info{ padding:32px 34px; }
}


/* ============ FRISE D'ÉTAPES HORIZONTALE (bloc steps_timeline) ============
   Cercles avec icône, pastille numérotée, ligne qui se dessine au défilement,
   survol qui "allume" l'étape. Vertical sur mobile. */
.tl-section{ padding:80px 0; }
.tl-section.tl-alt{ background:var(--bg-alt); }
.tl-section.tl-card{ padding:40px 0 70px; }
.tl-section.tl-card > .wrap{ background:var(--bg-alt); border:1px solid var(--line); border-radius:20px; padding:48px 32px 40px; }
.tl-section.tl-card .tl-circle{ background:var(--bg); }
.tl-section.tl-dark, .tl-section.tl-alt, .tl-section.tl-lime{ margin:0; }
/* Bande lime : cercles noirs, icône lime, texte noir */
.tl-section.tl-lime{ background:#cdf900; --ink:#0a0a0a; --ink-dim:rgba(10,10,10,0.7); --line:rgba(10,10,10,0.25); --cyan:#0a0a0a; }
.tl-section.tl-lime .tl-circle{ background:#0a0a0a; border-color:#0a0a0a; box-shadow:0 10px 26px rgba(0,0,0,0.18); }
.tl-section.tl-lime .tl-ring{ background:rgba(205,249,0,0.14); }
.tl-section.tl-lime .tl-icon{ color:#cdf900; }
.tl-section.tl-lime .tl-num{ background:#fff; color:#0a0a0a; border-color:#cdf900; }
.tl-section.tl-lime .tl-line{ background:rgba(10,10,10,0.25); }
.tl-section.tl-lime .tl-line i{ background:#0a0a0a; }
.tl-section.tl-lime .tl-step h3{ color:#0a0a0a; }
.tl-section.tl-lime .tl-step:hover .tl-circle, .tl-section.tl-lime .tl-step.is-active .tl-circle{ box-shadow:0 18px 40px rgba(0,0,0,0.3); border-color:#fff; }
.tl-section.tl-lime .tl-step:hover .tl-ring, .tl-section.tl-lime .tl-step.is-active .tl-ring{ background:#cdf900; }
.tl-section.tl-lime .tl-step:hover .tl-icon, .tl-section.tl-lime .tl-step.is-active .tl-icon{ color:#0a0a0a; }
.tl-section.tl-lime .tl-step:hover .tl-num, .tl-section.tl-lime .tl-step.is-active .tl-num{ background:#0a0a0a; color:#cdf900; }
.tl-section.tl-lime .tl-step:hover h3, .tl-section.tl-lime .tl-step.is-active h3{ color:#0a0a0a; text-decoration:underline; text-decoration-color:#0a0a0a; text-underline-offset:4px; }
.tl-section.tl-lime .tl-step:hover .tl-circle::after{ border-color:#0a0a0a; }
.tl-section.tl-dark{ background:#0a0a0a; --ink:#fff; --ink-dim:#a8a8a8; --bg-alt:#161616; --line:rgba(255,255,255,0.14); --cyan:#caf600; }
.tl-section.tl-dark .tl-ring{ background:rgba(202,246,0,0.12); }
.tl-section.tl-dark .tl-step:hover .tl-ring, .tl-section.tl-dark .tl-step.is-active .tl-ring{ background:#caf600; }
.tl-section.tl-dark .tl-step:hover .tl-icon, .tl-section.tl-dark .tl-step.is-active .tl-icon{ color:#0a0a0a; }
.tl-section.tl-dark .tl-step:hover .tl-num, .tl-section.tl-dark .tl-step.is-active .tl-num{ background:#fff; }
.tl-section.tl-dark .tl-step:hover .tl-circle, .tl-section.tl-dark .tl-step.is-active .tl-circle{ box-shadow:0 18px 40px rgba(202,246,0,0.25); }
.tl-head{ text-align:center; max-width:640px; margin:0 auto 54px; }
.tl-head .section-num{ display:inline-block; }
.tl-head h2{ font-size:clamp(24px, 4.2vw, 36px); font-weight:800; letter-spacing:-0.02em; line-height:1.15; margin:0 0 10px; color:var(--ink); }
.tl-head p{ color:var(--ink-dim); font-size:15.5px; line-height:1.6; margin:0; }
.tl-track{ position:relative; display:grid; grid-template-columns:repeat(var(--cols, 4), 1fr); gap:24px; }
.tl-line{ position:absolute; top:52px; left:calc(100% / var(--cols, 4) / 2); right:calc(100% / var(--cols, 4) / 2); height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.tl-line i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--cyan), #caf600); transition:width 1.6s cubic-bezier(.2,.8,.2,1); }
.tl-track.is-drawn .tl-line i{ width:100%; }
.tl-step{ position:relative; text-align:center; padding:0 6px; transition-delay:calc(var(--i, 0) * .14s); }
.tl-circle{ position:relative; width:104px; height:104px; margin:0 auto 22px; border-radius:50%; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.06); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.tl-section.tl-dark .tl-circle{ background:#161616; }
.tl-ring{ position:absolute; inset:8px; border-radius:50%; background:rgba(79,157,0,0.12); transition:background .3s ease, transform .3s ease; }
.tl-icon{ position:relative; z-index:1; width:34px; height:34px; color:var(--cyan); transition:color .3s ease, transform .3s ease; }
.tl-icon svg{ width:100%; height:100%; }
.tl-num{ position:absolute; top:-2px; right:-2px; z-index:2; width:34px; height:34px; border-radius:50%; background:#0a0a0a; color:#caf600; font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; border:3px solid var(--bg); transition:background .3s ease, color .3s ease, transform .3s ease; }
.tl-section.tl-dark .tl-num{ border-color:#0a0a0a; background:#caf600; color:#0a0a0a; }
.tl-step h3{ font-size:18px; font-weight:800; margin:0 0 8px; color:var(--ink); transition:color .25s ease; }
.tl-step p{ margin:0 auto; max-width:260px; color:var(--ink-dim); font-size:14px; line-height:1.65; }
.tl-step:hover .tl-circle, .tl-step.is-active .tl-circle{ transform:translateY(-6px) scale(1.04); box-shadow:0 18px 40px rgba(79,157,0,0.22); border-color:var(--cyan); }
.tl-step:hover .tl-ring, .tl-step.is-active .tl-ring{ background:var(--cyan); transform:scale(1.02); }
.tl-step:hover .tl-icon, .tl-step.is-active .tl-icon{ color:#fff; transform:scale(1.08); }
.tl-step:hover .tl-num, .tl-step.is-active .tl-num{ background:#caf600; color:#0a0a0a; transform:scale(1.1); }
.tl-step:hover h3, .tl-step.is-active h3{ color:var(--cyan); }
.tl-step:hover .tl-circle::after{ content:''; position:absolute; inset:-1px; border-radius:50%; border:2px solid var(--cyan); animation:tlPulse 1.2s ease-out infinite; }
@keyframes tlPulse{ from{ transform:scale(1); opacity:.7;} to{ transform:scale(1.35); opacity:0;} }
@media(max-width:900px){
  .tl-track{ grid-template-columns:1fr 1fr; gap:34px 20px; }
  .tl-line{ display:none; }
}
@media(max-width:560px){
  .tl-section{ padding:60px 0; }
  .tl-section.tl-card{ padding:20px 0 50px; }
  .tl-section.tl-card > .wrap{ padding:32px 18px 20px; }
  .tl-track{ grid-template-columns:1fr; gap:0; padding-left:0; }
  .tl-line{ display:block; left:51px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .tl-line i{ width:100%; height:0; transition:height 1.6s cubic-bezier(.2,.8,.2,1); }
  .tl-track.is-drawn .tl-line i{ height:100%; }
  .tl-step{ display:grid; grid-template-columns:104px 1fr; column-gap:16px; text-align:left; padding:0 0 34px; align-items:start; }
  .tl-step .tl-circle{ grid-row:1 / span 2; margin:0; }
  .tl-step p{ margin:0; max-width:none; }
}

/* =====================================================================
   BLOCS « PROFONDEUR » DES FICHES SERVICE (admin/block_types_services.php)
   ===================================================================== */
.sv-section{ padding:72px 0; }
.sv-section.sv-alt{ background:#f5f6fb; }
.sv-section.sv-dark{ background:#0a0a0a; --ink:#fff; --ink-dim:rgba(255,255,255,0.72); --line:rgba(255,255,255,0.12); --bg:#141414; }
.sv-head{ max-width:720px; margin-bottom:36px; }
.sv-head h2{ font-size:clamp(24px, 4vw, 36px); font-weight:800; letter-spacing:-0.02em; line-height:1.12; margin:0 0 12px; color:var(--ink); }
.sv-head p{ margin:0; color:var(--ink-dim); font-size:16px; line-height:1.7; }
.sv-note{ margin:22px 0 0; color:var(--ink-dim); font-size:13.5px; }
.sv-more{ margin:28px 0 0; }
.sv-link{ color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; border-bottom:2px solid #caf600; padding-bottom:2px; }
.sv-link:hover{ color:#0a0a0a; background:#caf600; }

/* Détail des prestations (depuis la base) */
.sv-svc-grid{ display:grid; gap:20px; }
.sv-svc{ display:grid; background:var(--bg); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, opacity .7s cubic-bezier(.2,.7,.2,1); }
.sv-svc:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(10,10,10,0.08); border-color:#caf600; }
.sv-svc-media{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); }
.sv-svc-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.sv-svc:hover .sv-svc-media img{ transform:scale(1.04); }
.sv-svc-body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; }
.sv-svc-num{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-dim); letter-spacing:0.1em; }
.sv-svc h3{ margin:0; font-size:21px; font-weight:800; letter-spacing:-0.01em; }
.sv-svc h3 a{ color:var(--ink); text-decoration:none; }
.sv-svc h3 a:hover{ color:#0a0a0a; border-bottom:2px solid #caf600; }
.sv-svc p{ margin:0; color:var(--ink-dim); font-size:14.5px; line-height:1.65; }
.sv-svc .sd-features{ grid-template-columns:1fr; margin-top:6px; }
.sv-svc-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:10px; }
@media(min-width:900px){
  .sv-svc-grid{ grid-template-columns:repeat(2, 1fr); }
  .sv-svc{ grid-template-columns:38% 1fr; }
  .sv-svc.no-media{ grid-template-columns:1fr; }
  .sv-svc-media{ aspect-ratio:auto; height:100%; min-height:220px; }
}

/* Formules */
.sv-tiers{ display:grid; gap:18px; align-items:stretch; }
.sv-tier{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:30px 28px 28px; display:flex; flex-direction:column; gap:12px; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, opacity .7s cubic-bezier(.2,.7,.2,1); }
.sv-tier:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(10,10,10,0.08); }
.sv-tier.is-hi{ background:#0a0a0a; color:#fff; border-color:#0a0a0a; --ink:#fff; --ink-dim:rgba(255,255,255,0.72); }
.sv-tier-badge{ position:absolute; top:-13px; left:26px; background:#caf600; color:#0a0a0a; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:6px 12px; border-radius:100px; }
.sv-tier h3{ margin:0; font-size:22px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); }
.sv-tier-tag{ margin:-6px 0 0; color:var(--ink-dim); font-size:14px; line-height:1.55; }
.sv-tier-price{ display:flex; align-items:baseline; gap:6px; padding:12px 0 14px; border-bottom:1px solid var(--line); }
.sv-tier-price strong{ font-size:28px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
.sv-tier-price span{ color:var(--ink-dim); font-size:14px; }
.sv-tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.sv-tier li{ position:relative; padding-left:26px; color:var(--ink-dim); font-size:14.5px; line-height:1.55; }
.sv-tier li::before{ content:''; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%; background:#caf600 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.sv-tier-btn{ margin-top:14px; display:inline-flex; justify-content:center; align-items:center; gap:8px; background:#0a0a0a; color:#fff; font-weight:700; font-size:15px; padding:14px 22px; border-radius:100px; text-decoration:none; transition:background .2s ease, color .2s ease, transform .2s ease; }
.sv-tier-btn:hover{ background:#caf600; color:#0a0a0a; transform:translateY(-2px); }
.sv-tier.is-hi .sv-tier-btn{ background:#caf600; color:#0a0a0a; }
.sv-tier.is-hi .sv-tier-btn:hover{ background:#fff; }
@media(min-width:760px){ .sv-tiers{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1000px){ .sv-tiers[data-count="3"]{ grid-template-columns:repeat(3, 1fr); } .sv-tiers[data-count="4"]{ grid-template-columns:repeat(4, 1fr); } .sv-tier.is-hi{ transform:translateY(-8px); } .sv-tier.is-hi:hover{ transform:translateY(-12px); } }

/* FAQ */
.sv-faq-wrap{ max-width:860px; }
.sv-faq{ display:flex; flex-direction:column; gap:10px; }
.sv-faq-item{ background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:0 22px; transition:border-color .2s ease, opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.sv-faq-item[open]{ border-color:#caf600; }
.sv-faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; font-weight:700; font-size:16px; color:var(--ink); }
.sv-faq-item summary::-webkit-details-marker{ display:none; }
.sv-faq-plus{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:#caf600; position:relative; transition:transform .25s ease; }
.sv-faq-plus::before, .sv-faq-plus::after{ content:''; position:absolute; background:#0a0a0a; left:50%; top:50%; transform:translate(-50%,-50%); }
.sv-faq-plus::before{ width:12px; height:2px; }
.sv-faq-plus::after{ width:2px; height:12px; }
.sv-faq-item[open] .sv-faq-plus{ transform:rotate(45deg); }
.sv-faq-a{ color:var(--ink-dim); font-size:15px; line-height:1.7; padding:0 0 20px; max-width:720px; }

/* Avant / Après */
.ba-grid{ display:grid; gap:28px; }
.ba-item{ margin:0; }
.ba-item h3{ margin:0 0 14px; font-size:19px; font-weight:800; color:var(--ink); }
.ba-item figcaption, .ba-cap{ margin:12px 0 0; color:var(--ink-dim); font-size:14px; }
.ba-compare{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--bg-alt); aspect-ratio:4/3; user-select:none; --pos:50%; }
.ba-compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba-before-wrap{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-tag{ position:absolute; top:14px; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:6px 11px; border-radius:100px; z-index:2; }
.ba-tag-b{ left:14px; background:rgba(10,10,10,0.8); color:#fff; }
.ba-tag-a{ right:14px; background:#caf600; color:#0a0a0a; }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); z-index:2; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,0.15); }
.ba-handle i{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:#caf600; border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,0.25); }
.ba-handle i::before{ content:'◀ ▶'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; color:#0a0a0a; letter-spacing:2px; }
.ba-compare input[type=range]{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3; -webkit-appearance:none; }
.ba-cols{ display:grid; gap:16px; }
.ba-col{ border-radius:16px; padding:22px 24px 24px; border:1px solid var(--line); }
.ba-col .ba-tag{ position:static; display:inline-block; margin-bottom:14px; }
.ba-col-b{ background:var(--bg-alt); }
.ba-col-b .ba-tag{ background:rgba(10,10,10,0.8); color:#fff; }
.ba-col-a{ background:var(--bg); border-color:#caf600; box-shadow:0 10px 26px rgba(10,10,10,0.06); }
.ba-col-a .ba-tag{ background:#caf600; color:#0a0a0a; }
.ba-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ba-col li{ position:relative; padding-left:22px; color:var(--ink-dim); font-size:14.5px; line-height:1.55; }
.ba-col-b li::before{ content:'✕'; position:absolute; left:0; color:#c0392b; font-weight:700; }
.ba-col-a li::before{ content:'✓'; position:absolute; left:0; color:#16a34a; font-weight:700; }
.ba-col-a li{ color:var(--ink); }
@media(min-width:760px){ .ba-cols{ grid-template-columns:1fr 1fr; } }
@media(min-width:1000px){ .ba-grid{ grid-template-columns:1fr 1fr; } .ba-grid:has(> :only-child){ grid-template-columns:minmax(0, 820px); } }

/* Cas d'usage */
.sv-cases{ display:grid; gap:16px; }
.sv-case{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:26px 26px 28px; display:flex; flex-direction:column; gap:10px; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, opacity .7s cubic-bezier(.2,.7,.2,1); }
.sv-case:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(10,10,10,0.08); border-color:#caf600; }
.sv-case-ico{ width:46px; height:46px; border-radius:12px; background:#caf600; color:#0a0a0a; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.sv-case-ico svg{ width:22px; height:22px; }
.sv-case-tag{ position:absolute; top:22px; right:22px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); padding:4px 9px; border-radius:100px; }
.sv-case h3{ margin:0; font-size:18px; font-weight:800; color:var(--ink); }
.sv-case p{ margin:0; color:var(--ink-dim); font-size:14.5px; line-height:1.65; }
@media(min-width:640px){ .sv-cases{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1000px){ .sv-cases.sv-cols-3{ grid-template-columns:repeat(3, 1fr); } .sv-cases.sv-cols-4{ grid-template-columns:repeat(4, 1fr); } }

/* Démo conversation */
.cd-layout{ display:grid; gap:40px; align-items:center; }
.cd-layout.cd-solo{ justify-content:center; }
.cd-phone{ width:100%; max-width:380px; margin:0 auto; background:#efeae2; border-radius:34px; border:8px solid #111; box-shadow:0 30px 60px rgba(0,0,0,0.35); overflow:hidden; font-size:14px; }
.sv-alt .cd-phone, .sv-section:not(.sv-dark) .cd-phone{ box-shadow:0 24px 50px rgba(10,10,10,0.18); }
.cd-top{ display:flex; align-items:center; gap:12px; background:#075e54; color:#fff; padding:14px 16px; }
.cd-avatar{ width:38px; height:38px; border-radius:50%; background:#caf600; color:#0a0a0a; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.cd-top strong{ display:block; font-size:15px; }
.cd-top small{ display:block; font-size:12px; opacity:0.85; }
.cd-body{ padding:16px 12px 8px; min-height:340px; display:flex; flex-direction:column; gap:8px; background:#efeae2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23d9d2c5'/%3E%3Ccircle cx='40' cy='35' r='1.2' fill='%23d9d2c5'/%3E%3C/svg%3E"); }
.cd-msg{ max-width:82%; padding:9px 12px 7px; border-radius:12px; position:relative; opacity:0; transform:translateY(10px) scale(.97); transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.cd-phone.is-playing .cd-msg{ transition-delay:calc(var(--i) * .9s); }
.cd-phone.is-playing .cd-msg{ opacity:1; transform:none; }
.cd-msg p{ margin:0; color:#111; line-height:1.45; font-size:13.5px; }
.cd-msg time{ display:block; text-align:right; font-size:10.5px; color:#667; margin-top:3px; }
.cd-ticks{ color:#34b7f1; font-style:normal; }
.cd-client{ align-self:flex-start; background:#fff; border-top-left-radius:4px; }
.cd-bot{ align-self:flex-end; background:#dcf8c6; border-top-right-radius:4px; }
.cd-typing{ align-self:flex-end; display:flex; gap:4px; padding:10px 12px; background:#dcf8c6; border-radius:12px; opacity:0; transition:opacity .3s ease; }
.cd-phone.is-playing .cd-typing{ opacity:1; transition-delay:.2s; }
.cd-phone.is-done .cd-typing{ opacity:0; }
.cd-typing i{ width:6px; height:6px; border-radius:50%; background:#6a8f5b; animation:cdDot 1.2s infinite ease-in-out; }
.cd-typing i:nth-child(2){ animation-delay:.2s; } .cd-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes cdDot{ 0%,80%,100%{ transform:translateY(0); opacity:.5; } 40%{ transform:translateY(-4px); opacity:1; } }
.cd-input{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#f0f0f0; color:#889; font-size:13px; }
.cd-input b{ width:32px; height:32px; border-radius:50%; background:#075e54; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.cd-side h3{ margin:0 0 16px; font-size:clamp(20px, 3vw, 26px); font-weight:800; letter-spacing:-0.01em; color:var(--ink); }
.cd-side ul{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:12px; }
.cd-side li{ position:relative; padding-left:28px; color:var(--ink-dim); font-size:15.5px; line-height:1.6; }
.cd-side li::before{ content:''; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%; background:#caf600 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.sv-dark .cd-side .btn.primary{ background:#caf600; border-color:#caf600; color:#0a0a0a; }
@media(min-width:900px){ .cd-layout{ grid-template-columns:400px 1fr; gap:64px; } .cd-layout.cd-solo{ grid-template-columns:400px; } }

/* Galerie par catégorie */
.sv-gal{ display:grid; gap:16px; }
.sv-gal-item{ position:relative; display:block; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--bg-alt); text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, opacity .7s cubic-bezier(.2,.7,.2,1); }
.sv-gal-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.sv-gal-item:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(10,10,10,0.1); }
.sv-gal-item:hover img{ transform:scale(1.05); }
.sv-gal-cap{ position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px; background:linear-gradient(180deg, transparent, rgba(10,10,10,0.75)); color:#fff; display:flex; flex-direction:column; gap:2px; }
.sv-gal-cap strong{ font-size:14.5px; }
.sv-gal-cap em{ font-style:normal; font-size:12.5px; opacity:0.85; }
@media(min-width:640px){ .sv-gal{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1000px){ .sv-gal{ grid-template-columns:repeat(3, 1fr); } }

/* Chiffres clés */
.sv-kpis{ background:#cdf900; color:#0a0a0a; padding:44px 0; }
.sv-kpis.sv-kpis-dark{ background:#0a0a0a; color:#fff; }
.sv-kpis.sv-kpis-light{ background:var(--bg); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sv-kpis-row{ display:grid; gap:24px; grid-template-columns:repeat(2, 1fr); }
.sv-kpi{ display:flex; flex-direction:column; gap:4px; text-align:center; }
.sv-kpi strong{ font-size:clamp(30px, 5vw, 44px); font-weight:800; letter-spacing:-0.03em; line-height:1; }
.sv-kpi span{ font-size:14px; opacity:0.78; }
.sv-kpis-dark .sv-kpi strong{ color:#caf600; }
@media(min-width:760px){ .sv-kpis-row{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); } }

/* Planning en colonnes */
.sv-plan{ display:grid; gap:16px; }
.sv-plan-col{ background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:24px 24px 26px; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.sv-plan-tag{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; background:#caf600; color:#0a0a0a; padding:5px 11px; border-radius:100px; margin-bottom:12px; }
.sv-plan-col h3{ margin:0 0 12px; font-size:17px; font-weight:800; color:var(--ink); }
.sv-plan-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sv-plan-col li{ position:relative; padding-left:18px; color:var(--ink-dim); font-size:14px; line-height:1.55; }
.sv-plan-col li::before{ content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:#caf600; }
@media(min-width:640px){ .sv-plan{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1000px){ .sv-plan[data-count="3"]{ grid-template-columns:repeat(3, 1fr); } .sv-plan[data-count="4"]{ grid-template-columns:repeat(4, 1fr); } .sv-plan[data-count="5"]{ grid-template-columns:repeat(5, 1fr); } }

/* Décalage des cartes en cascade (via --i) */
.sv-tier.reveal, .sv-case.reveal, .sv-gal-item.reveal, .sv-plan-col.reveal, .sv-kpi.reveal, .sv-faq-item.reveal, .sv-svc.reveal{ transition-delay:calc(var(--i, 0) * .08s); }

/* « Autres services » : cartes illustrées, même famille que la section Services */
.sv-others{ display:grid; gap:20px; }
.sv-others .service-card{ margin:0; transition-delay:calc(var(--i, 0) * .08s); }
@media(min-width:640px){ .sv-others{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1000px){ .sv-others[data-count="3"]{ grid-template-columns:repeat(3, 1fr); } .sv-others[data-count="4"], .sv-others[data-count="5"]{ grid-template-columns:repeat(4, 1fr); } }

/* « Le service » : titre puis texte sur la largeur de lecture (comme la page Travaux) */
.sv-about .section-head{ margin-bottom:22px; }
.sv-about-text{ max-width:880px; color:var(--ink-dim); font-size:16.5px; line-height:1.85; }
.sv-about-top{ max-width:820px; border-radius:18px; overflow:hidden; margin-bottom:36px; border:1px solid var(--line); }
.sv-about-img{ width:100%; display:block; border-radius:18px; }
.sv-about-split{ display:grid; gap:32px; align-items:start; }
@media(min-width:900px){ .sv-about-split{ grid-template-columns:minmax(0, 1fr) 360px; gap:56px; } }

/* Texte d'intro seul (sans numéro ni titre), sous le bandeau de page */
.sv-section-intro{ margin:0 0 40px; }
/* Règle d'alternance des fonds (appliquée par render_page_blocks) : deux sections
   qui se suivent n'ont jamais le même fond — blanc puis gris #f5f6fb, en alternance. */
section.pb-bg-white{ background:var(--bg) !important; }
section.pb-bg-alt{ background:var(--bg-alt) !important; }

/* Pictogrammes vectoriels (ui_icon) */
.ui-icon{ display:inline-block; vertical-align:-0.2em; flex-shrink:0; }
.btn .ui-icon{ margin-right:6px; }
.value-icon{ width:52px; height:52px; border-radius:14px; background:#caf600; color:#0a0a0a; display:inline-flex; align-items:center; justify-content:center; }
.fmn-content-play .ui-icon, .tiktok-play-icon svg{ display:block; margin-left:2px; }
.fmn-formateur-placeholder .ui-icon{ opacity:0.9; }

/* Page Contact en clair (fond gris très léger, cartes blanches) — demande du 24/09 */
section.contact{ background:var(--bg-alt); padding:90px 0 90px; }
.contact-form{ background:var(--bg); border:1px solid var(--line); backdrop-filter:none; box-shadow:0 10px 30px rgba(10,10,10,0.05); }
.contact-form input, .contact-form textarea{ border:1px solid var(--line); background:var(--bg-alt); color:var(--ink); }
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--ink-dim); opacity:.7; }
.contact-form input:focus, .contact-form textarea:focus{ border-color:#0a0a0a; background:var(--bg); }
.contact-item{ background:var(--bg); border:1px solid var(--line); backdrop-filter:none; }
.contact-item:hover{ background:var(--bg); border-color:#caf600; }
.contact-item .label{ color:#4F9D00; }
.contact-social a{ background:var(--bg); color:var(--ink); }
.contact-social a:hover{ border-color:#0a0a0a; color:#0a0a0a; background:#caf600; }
.map-frame{ filter:none; }

/* Sites réalisés — grille fixe (fiche service) */
.sv-web-grid{ display:grid; gap:20px; }
.sv-web{ background:var(--bg); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, opacity .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * .08s); }
.sv-web:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(10,10,10,0.08); border-color:#caf600; }
.sv-web-media{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); }
.sv-web-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.sv-web:hover .sv-web-media img{ transform:scale(1.04); }
.sv-web-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; }
.sv-web-body h3{ margin:0; font-size:18px; font-weight:800; color:var(--ink); }
.sv-web-body p{ margin:0; color:var(--ink-dim); font-size:14px; line-height:1.6; }
.sv-web-body .sv-link{ align-self:flex-start; margin-top:4px; }
@media(min-width:640px){ .sv-web-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1000px){ .sv-web-grid{ grid-template-columns:repeat(3, 1fr); } }

/* Témoignage mis en avant — grande citation */
.sv-quote{ margin:0 auto; max-width:860px; text-align:center; position:relative; padding:10px 0 0; }
.sv-quote-mark{ display:block; font-family:Georgia, serif; font-size:96px; line-height:.6; color:#caf600; margin-bottom:18px; }
.sv-quote blockquote{ margin:0; font-size:clamp(20px, 2.6vw, 28px); font-weight:600; line-height:1.4; letter-spacing:-0.01em; color:var(--ink); }
.sv-quote figcaption{ margin-top:26px; display:inline-flex; align-items:center; gap:14px; text-align:left; }
.sv-quote-avatar{ width:52px; height:52px; border-radius:50%; overflow:hidden; background:#0a0a0a; color:#caf600; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; flex-shrink:0; }
.sv-quote-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-quote figcaption strong{ display:block; color:var(--ink); font-size:15px; }
.sv-quote figcaption em{ display:block; font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); margin-top:2px; }

/* Récapitulatif de réservation (étapes 3 et 4) */
.resa-recap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.resa-recap-grid div{ display:flex; flex-direction:column; gap:3px; }
.resa-recap-grid span{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim); }
.resa-recap-grid strong{ font-size:14px; color:var(--ink); }
.resa-recap-grid strong:first-letter{ text-transform:uppercase; }
.resa-recap-price{ font-size:18px !important; font-weight:800; }
.resa-recap-note{ margin:14px 0 0; font-size:12.5px; color:var(--ink-dim); line-height:1.5; }
@media(max-width:520px){ .resa-recap-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   RÈGLE SITE : AU SURVOL, TOUTE CARTE PASSE EN LIME #cffc00
   (texte et icônes basculent en noir pour rester lisibles). Les cartes
   « image » (travaux, galerie) gardent leur zoom d'image, sans fond lime.
   ===================================================================== */
:root{ --card-hover:#cffc00; }
.service-card, .quicklink-card, .value-card, .process-step, .webproj-card, .testi-card, .tiktok-card, .icon-card, .stat-item,
.fmn-content-card, .fmn-course-card, .contact-item, .resa-service-card, .lp-pcard, .lp-slide, .sv-case, .sv-tier, .sv-web, .sv-svc,
.sv-plan-col, .sv-faq-item, .ba-col, .resa-time-btn, .sv-kpi, .lp-testi-card, .lp-form-card .lp-option{
  transition:background-color .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, color .28s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, opacity .7s cubic-bezier(.2,.7,.2,1) !important;
}
.service-card:hover, .quicklink-card:hover, .value-card:hover, .process-step:hover, .webproj-card:hover, .testi-card:hover, .tiktok-card:hover, .icon-card:hover, .stat-item:hover,
.fmn-content-card:hover, .fmn-course-card:hover, .contact-item:hover, .resa-service-card:hover, .lp-pcard:hover, .lp-slide:hover, .sv-case:hover, .sv-tier:hover, .sv-web:hover, .sv-svc:hover,
.sv-plan-col:hover, .sv-faq-item:hover, .ba-col:hover, .resa-time-btn:hover, .lp-testi-card:hover{
  background:var(--card-hover) !important; background-color:var(--card-hover) !important; border-color:#0a0a0a !important;
  color:#0a0a0a;
  --ink:#0a0a0a; --ink-dim:rgba(10,10,10,0.72); --line:rgba(10,10,10,0.18); --cyan:#0a0a0a; --amber:#0a0a0a; --green:#0a0a0a; --btn:#0a0a0a; --bg:#cffc00; --bg-alt:rgba(10,10,10,0.06); --bg-card:#cffc00;
  transform:translateY(-4px); box-shadow:0 16px 34px rgba(10,10,10,0.12);
}
/* Textes et éléments codés en dur → noir */
.service-card:hover *, .quicklink-card:hover *, .value-card:hover *, .process-step:hover *, .webproj-card:hover *, .testi-card:hover *, .icon-card:hover *, .stat-item:hover *,
.fmn-content-card:hover *, .fmn-course-card:hover *, .contact-item:hover *, .resa-service-card:hover *, .lp-pcard:hover .lp-pcard-body *, .lp-slide:hover .lp-slide-body *, .sv-case:hover *, .sv-tier:hover *, .sv-web:hover .sv-web-body *, .sv-svc:hover .sv-svc-body *,
.sv-plan-col:hover *, .sv-faq-item:hover *, .ba-col:hover *, .lp-testi-card:hover *{ color:#0a0a0a; }
.service-card:hover p, .quicklink-card:hover p, .value-card:hover p, .process-step:hover p, .testi-card:hover p, .sv-case:hover p, .sv-tier:hover li, .sv-web:hover p, .sv-svc:hover p, .sv-plan-col:hover li, .sv-faq-item:hover .sv-faq-a, .lp-pcard:hover p, .lp-slide:hover p, .resa-service-card:hover p, .fmn-course-card:hover p, .contact-item:hover .label{ color:rgba(10,10,10,0.75); }
/* Pastilles / icônes lime → noir sur lime */
.sv-case:hover .sv-case-ico, .value-card:hover .value-icon, .lp-pcard:hover .lp-pcard-zoom, .resa-service-card:hover .resa-service-arrow, .sv-quote-avatar, .icon-card:hover .icon-card-ico, .process-step:hover .process-num, .fmn-content-card:hover .fmn-content-play{ background:#0a0a0a !important; color:#cffc00 !important; border-color:#0a0a0a !important; }
.sv-tier:hover li::before, .sv-plan-col:hover li::before, .cd-side li::before{ background-color:#0a0a0a; }
.sv-tier:hover li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cffc00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.sv-faq-item:hover .sv-faq-plus{ background:#0a0a0a; } .sv-faq-item:hover .sv-faq-plus::before, .sv-faq-item:hover .sv-faq-plus::after{ background:#cffc00; }
/* Boutons et badges à l'intérieur */
.lp-pcard:hover .lp-pcard-btn, .sv-tier:hover .sv-tier-btn, .sv-svc:hover .btn, .service-card:hover .btn, .fmn-course-card:hover .btn, .sv-tier.is-hi:hover .sv-tier-btn{ background:#0a0a0a !important; color:#cffc00 !important; border-color:#0a0a0a !important; }
.sv-case:hover .sv-case-tag, .sv-tier:hover .sv-tier-badge, .sv-plan-col:hover .sv-plan-tag, .lp-pcard:hover .lp-pcard-cat, .webproj-card:hover .badge, .testi-card:hover .badge{ background:#0a0a0a !important; color:#cffc00 !important; border-color:#0a0a0a !important; }
.sv-svc:hover .sv-link, .sv-web:hover .sv-link, .service-card:hover .service-card-more, .quicklink-card:hover .ql-arrow, .testi-card:hover .testi-link{ color:#0a0a0a !important; border-bottom-color:#0a0a0a; background:transparent; }
.sv-tier.is-hi:hover{ color:#0a0a0a; }
.sv-tier.is-hi:hover h3, .sv-tier.is-hi:hover .sv-tier-price strong{ color:#0a0a0a; }
/* Cartes sur fond sombre (accueil, formation) : même règle */
.hero .service-card:hover, .stats-band .stat-item:hover, .fmn-hero .fmn-content-card:hover{ background:var(--card-hover) !important; }
/* Cartes image (travaux, galerie, slider web) : légère montée + bordure lime, l'image reste maîtresse */
.card:hover, .sv-gal-item:hover, .lp-visual-item:hover{ border-color:var(--card-hover) !important; box-shadow:0 16px 34px rgba(10,10,10,0.14); }

/* =====================================================================
   MICRO-INTERACTIONS GLOBALES (souris) — boutons, liens, champs, images
   ===================================================================== */
.btn{ transition:transform .18s cubic-bezier(.2,.8,.2,1), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(10,10,10,0.14); }
.btn:active{ transform:translateY(0) scale(.98); box-shadow:none; }
.btn.primary:hover{ filter:brightness(1.04); }
.btn.ghost:hover{ background:var(--card-hover); color:#0a0a0a; border-color:var(--card-hover); }
.nav a, .site-footer a, .footer a{ transition:color .18s ease, opacity .18s ease; }
#mainNav > a, #mainNav .nav-dropdown-trigger{ position:relative; }
#mainNav > a::after, #mainNav .nav-dropdown-trigger::after{ content:''; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:var(--card-hover); transition:right .25s cubic-bezier(.2,.8,.2,1); }
#mainNav > a:hover::after, #mainNav .nav-dropdown-trigger:hover::after{ right:0; }
.nav-dropdown-menu a{ transition:background-color .2s ease, transform .2s ease; }
.nav-dropdown-menu a:hover{ background:var(--card-hover) !important; transform:translateX(3px); }
.nav-dropdown-menu a:hover *{ color:#0a0a0a !important; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select{ transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, textarea:focus, select:focus{ outline:none; border-color:#0a0a0a !important; box-shadow:0 0 0 3px rgba(207,252,0,0.55); }
.lp-form label:hover input, .lp-form label:hover select, .lp-form label:hover textarea, .contact-form label:hover input, .contact-form label:hover textarea, .resa-form label:hover input, .resa-form label:hover textarea{ border-color:rgba(10,10,10,0.45); }
.resa-cal-day.available:hover{ background:var(--card-hover) !important; transform:scale(1.08); }
.resa-time-btn:hover{ transform:translateX(4px); }
.filters button:hover, .filters .active{ background:var(--card-hover); color:#0a0a0a; border-color:var(--card-hover); }
.svc-home-arrow:hover, .resa-cal-nav:hover, .lp-arrow:hover, .lb-arrow:hover{ background:var(--card-hover) !important; color:#0a0a0a !important; border-color:var(--card-hover) !important; transform:scale(1.08); }
.svc-home-dots span:hover, .hero-slide-dots .dot:hover, .lp-dots button:hover{ transform:scale(1.4); background:var(--card-hover); }
.partners-track img{ transition:filter .25s ease, transform .25s ease; }
.partners-track img:hover{ filter:none; transform:scale(1.08); }
.contact-social a:hover, .footer-social a:hover, .nav-social a:hover{ background:var(--card-hover) !important; color:#0a0a0a !important; border-color:var(--card-hover) !important; transform:translateY(-2px); }
.whatsapp-float:hover, .wa-float:hover{ transform:scale(1.08); }
a:not(.btn):not([class]){ transition:color .18s ease; }
::selection{ background:var(--card-hover); color:#0a0a0a; }
@media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important; } }
/* Icônes dans les pastilles noires au survol → lime (priorité sur la règle « tout en noir ») */
.sv-case:hover .sv-case-ico *, .value-card:hover .value-icon *, .lp-pcard:hover .lp-pcard-zoom *, .resa-service-card:hover .resa-service-arrow *, .icon-card:hover .icon-card-ico *, .process-step:hover .process-num *, .fmn-content-card:hover .fmn-content-play *{ color:#cffc00 !important; stroke:currentColor; }
.sv-case:hover .sv-case-ico svg, .value-card:hover .value-icon svg, .resa-service-card:hover .resa-service-arrow svg{ color:#cffc00 !important; }
.lp-pcard:hover .lp-pcard-btn *, .sv-tier:hover .sv-tier-btn *, .sv-svc:hover .btn *, .sv-case:hover .sv-case-tag, .sv-tier:hover .sv-tier-badge, .sv-plan-col:hover .sv-plan-tag, .lp-pcard:hover .lp-pcard-cat{ color:#cffc00 !important; }

/* Landing site-web : détails facultatifs repliés sous le formulaire court */
.lp-form .lp-more{ margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.lp-form .lp-more > summary{ cursor:pointer; list-style:none; font-weight:600; font-size:15px; padding:8px 0; display:flex; align-items:center; gap:8px; }
.lp-form .lp-more > summary::-webkit-details-marker{ display:none; }
.lp-form .lp-more > summary::before{ content:'+'; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#caf600; color:#0a0a0a; font-weight:700; }
.lp-form .lp-more[open] > summary::before{ content:'−'; }
.lp-form .lp-more > summary small{ font-weight:400; opacity:.65; }

/* Accueil sur mobile/tablette : le titre et les boutons d'abord, la photo ensuite
   (avant : la photo occupait tout le premier écran et repoussait le message). */
@media(max-width:980px){
  .hero{ min-height:0; }
  .hero-photo{ order:0; height:42vh; min-height:260px; }
  .hero-copy{ padding:96px 24px 36px; }
  .hero-cta{ margin-top:26px; }
}

/* ---------- MENU MOBILE (≤ 980px) : corrections ----------
   - contenu aligné en haut (plus de grand vide, rien de coupé si la liste est longue)
   - sous-menus repliés, ouverts au toucher (voir script.js)
   - fond sombre sur toute la page : le flou de l'en-tête (inutile, son fond est
     opaque) limitait les éléments « fixed » à la hauteur de l'en-tête
   - icône ☰ transformée en ✕ quand le menu est ouvert */
@media(max-width:980px){
  header.nav{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  header.nav nav{
    justify-content:flex-start; width:min(340px,86vw);
    padding:88px 28px 40px; gap:6px; z-index:3;
  }
  header.nav nav > a,
  header.nav nav .nav-dropdown-trigger{ font-size:17px; font-weight:600; padding:12px 0; }
  header.nav nav .nav-dropdown{ width:100%; gap:0; }
  header.nav nav .nav-dropdown-trigger{ width:100%; justify-content:space-between; cursor:pointer; }
  header.nav nav .nav-dropdown-trigger::after{ display:none; }
  header.nav nav .nav-dropdown-caret{ font-size:13px; transform:none; }
  header.nav nav .nav-dropdown.is-open > .nav-dropdown-trigger .nav-dropdown-caret{ transform:rotate(180deg); }
  header.nav nav .nav-dropdown-menu{ display:none; padding:4px 0 12px 14px; }
  header.nav nav .nav-dropdown.is-open > .nav-dropdown-menu{ display:block; }
  header.nav nav .nav-dropdown-menu a{ padding:4px 0 4px 12px; }
  header.nav nav .nav-social{ margin-top:18px; }

  .nav-toggle{ position:relative; z-index:4; padding:10px; margin:-10px; }
  .nav-toggle span{ transition:transform .3s ease, opacity .2s ease; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media(max-width:980px){
  header.nav nav .nav-social{ margin-left:0; padding-left:0; border-left:none; }
}
@media(max-width:980px){
  /* Sous-menus mobiles : pas de trait vertical à gauche */
  header.nav nav .nav-dropdown-menu-inner{ border-left:none; }
  header.nav nav .nav-dropdown-menu{ padding-left:6px; }
}

/* ---------- TARIFS DES SERVICES (partials/pricing.php) ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; align-items:stretch; margin-top:14px; }
.price-grid[data-count="1"]{ grid-template-columns:minmax(0,420px); justify-content:center; }
.price-grid[data-count="2"]{ grid-template-columns:repeat(2, minmax(0,420px)); justify-content:center; }
.price-grid[data-count="4"]{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.price-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; color:#12142b; border:1px solid rgba(18,20,43,0.12); border-radius:18px;
  padding:30px 26px 26px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.price-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(18,20,43,0.10); }
.price-card.is-featured{ background:#0f0f10; color:#f4f2ea; border-color:#caf600; box-shadow:0 18px 44px rgba(18,20,43,0.18); }
.price-badge{
  position:absolute; top:-12px; left:26px; background:#caf600; color:#0a0a0a;
  font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px;
}
.price-card h3{ font-size:20px; line-height:1.25; margin:0; color:inherit; }
.price-tagline{ margin:8px 0 0; font-size:14px; line-height:1.5; opacity:.72; }
.price-amount{ margin:22px 0 0; display:flex; flex-direction:column; gap:2px; }
.price-amount strong{ font-size:clamp(26px,2.6vw,32px); font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
.price-card.is-featured .price-amount strong{ color:#caf600; }
.price-prefix, .price-suffix{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; opacity:.65; }
.price-delay{ margin:14px 0 0; font-size:13px; opacity:.75; padding-left:22px; position:relative; }
.price-delay::before{ content:'⏱'; position:absolute; left:0; top:0; font-size:13px; }
.price-features{ list-style:none; margin:20px 0 26px; padding:20px 0 0; border-top:1px solid rgba(128,128,128,0.25); display:flex; flex-direction:column; gap:11px; flex:1; }
.price-features li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.45; }
.price-features li::before{ content:'✓'; position:absolute; left:0; top:0; font-weight:800; color:#4F9D00; }
.price-card.is-featured .price-features li::before{ color:#caf600; }
.price-cta{ justify-content:center; text-align:center; width:100%; }
.price-card:not(.is-featured) .price-cta{ color:#12142b; border-color:rgba(18,20,43,0.25); }
.price-card:not(.is-featured) .price-cta:hover{ background:#12142b; color:#fff; border-color:#12142b; }
.price-note{ margin:26px auto 0; max-width:760px; text-align:center; font-size:13.5px; line-height:1.6; opacity:.7; }
.price-draft{ margin:22px 0 0; padding:12px 16px; border:1px dashed #e8a100; border-radius:10px; background:rgba(232,161,0,0.10); font-size:13.5px; }
@media(max-width:980px){
  .price-grid, .price-grid[data-count="2"], .price-grid[data-count="4"]{ grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; }
  .price-card.is-featured{ order:-1; }
}

/* ---------- BLOG : liste d'articles et page article (partials/blog.php, article.php) ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.blog-card{ display:flex; flex-direction:column; background:#fff; color:#12142b; border:1px solid rgba(18,20,43,0.12); border-radius:16px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(18,20,43,0.10); }
.blog-card-media{ display:block; aspect-ratio:16/9; background:#0f0f10; overflow:hidden; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.blog-card:hover .blog-card-media img{ transform:scale(1.04); }
.blog-card-ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:64px; font-weight:800; color:#caf600; }
.blog-card-body{ display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; flex:1; }
.blog-card-meta{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#6b6d7c; }
.blog-card-title{ font-size:19px; font-weight:800; line-height:1.3; letter-spacing:-0.01em; }
.blog-card-excerpt{ font-size:14.5px; line-height:1.6; color:#4b4d5c; }
.blog-card-more{ margin-top:auto; padding-top:6px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:#4F9D00; font-weight:700; }

.article-banner h1{ max-width:900px; }
.article-meta{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; }
.article-preview-note{ display:inline-block; margin:0 0 14px; padding:8px 14px; border:1px dashed #e8a100; border-radius:8px; background:rgba(232,161,0,0.14); color:#f4f2ea; font-size:13px; }
.article-wrap{ max-width:780px; }
.article-cover{ margin:0 0 34px; border-radius:16px; overflow:hidden; }
.article-cover img{ width:100%; height:auto; display:block; }
.article-lead{ font-size:19px; line-height:1.65; font-weight:500; color:var(--ink); margin:0 0 28px; }
.article-body{ font-size:17px; line-height:1.8; color:var(--ink); }
.article-body p{ margin:0 0 20px; }
.article-body h2{ font-size:clamp(22px,3vw,28px); line-height:1.25; margin:42px 0 16px; }
.article-body h3{ font-size:20px; line-height:1.3; margin:30px 0 12px; }
.article-body ul, .article-body ol{ margin:0 0 22px; padding-left:24px; }
.article-body li{ margin-bottom:9px; }
.article-body a{ color:#3d7a00; text-decoration:underline; text-underline-offset:3px; }
.article-body a:hover{ color:#12142b; }
.article-body blockquote{ margin:28px 0; padding:18px 24px; border-left:4px solid #caf600; background:rgba(202,246,0,0.10); border-radius:0 12px 12px 0; font-size:18px; font-weight:600; }
.article-body blockquote p{ margin:0; }
.article-cta{ margin-top:46px; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--bg-alt); }
.article-cta strong{ font-size:20px; }
.article-cta p{ margin:8px 0 0; color:var(--ink-dim); }
.article-cta .hero-cta{ margin-top:20px; }
@media(max-width:980px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .blog-grid{ grid-template-columns:1fr; } .article-body{ font-size:16px; } }

/* ---------- ÉTUDES DE CAS (partials/cases.php, etude-de-cas.php) ---------- */
.case-wrap{ max-width:900px; }
.case-figures{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:0 0 40px; }
.case-figures[data-count="1"]{ grid-template-columns:minmax(0,260px); }
.case-figures[data-count="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.case-figures[data-count="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.case-figure{ background:#0f0f10; color:#f4f2ea; border-radius:14px; padding:22px 20px; display:flex; flex-direction:column; gap:6px; }
.case-figure strong{ font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-0.02em; line-height:1.1; color:#caf600; }
.case-figure span{ font-size:13.5px; line-height:1.4; opacity:.8; }
.case-part{ margin:0 0 38px; }
.case-part-head{ display:flex; align-items:center; gap:14px; margin:0 0 14px; }
.case-part-head h2{ font-size:clamp(22px,3vw,28px); margin:0; }
.case-part-num{ font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:700; letter-spacing:0.08em; background:#caf600; color:#0a0a0a; padding:6px 11px; border-radius:100px; }
.case-quote{ margin:10px 0 44px; padding:28px 30px; border-radius:16px; background:var(--bg-alt); border:1px solid var(--line); }
.case-quote p{ margin:0; font-size:19px; line-height:1.65; font-weight:500; color:var(--ink); }
.case-quote footer{ display:flex; align-items:center; gap:14px; margin-top:20px; font-size:14px; color:var(--ink-dim); }
.case-quote footer strong{ color:var(--ink); }
.case-quote footer img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.case-gallery-head{ margin-top:6px; }
.case-gallery{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.case-gallery a{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-alt); }
.case-gallery img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3; transition:transform .5s ease; }
.case-gallery a:hover img{ transform:scale(1.03); }
@media(max-width:700px){
  .case-figures, .case-figures[data-count="3"], .case-figures[data-count="2"]{ grid-template-columns:1fr 1fr; }
  .case-gallery{ grid-template-columns:1fr; }
}

/* ---------- GUIDE GRATUIT (guide-gratuit.php, partials/guide.php) ---------- */
.guide-banner{ padding-bottom:70px; }
.guide-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:48px; align-items:center; }
.guide-tag, .guide-card-tag, .guide-promo-tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  background:#caf600; color:#0a0a0a; padding:6px 12px; border-radius:100px; margin-bottom:16px;
}
.guide-points{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; max-width:560px; }
.guide-points li{ position:relative; padding-left:28px; line-height:1.5; color:var(--ink); }
.guide-points li::before{ content:'✓'; position:absolute; left:0; top:0; font-weight:800; color:#caf600; }
.guide-card{ background:#fff; color:#12142b; border-radius:20px; padding:32px 30px; box-shadow:0 24px 60px rgba(0,0,0,0.35); }
.guide-card h2{ font-size:24px; line-height:1.2; margin:0 0 12px; color:#12142b; }
.guide-card p{ color:#4b4d5c; font-size:14.5px; line-height:1.6; margin:0 0 18px; max-width:none; }
.guide-form{ display:flex; flex-direction:column; gap:14px; }
.guide-form .hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.guide-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#12142b; }
.guide-form input[type=text], .guide-form input[type=tel]{
  font:inherit; font-size:16px; font-weight:400; padding:13px 14px; border:1px solid rgba(18,20,43,0.22); border-radius:10px; background:#fff; color:#12142b; width:100%;
}
.guide-form input:focus{ outline:2px solid #caf600; outline-offset:1px; border-color:#12142b; }
.guide-download{ justify-content:center; text-align:center; width:100%; }
.guide-privacy{ font-size:12px !important; line-height:1.5 !important; color:#6b6d7c !important; margin:0 !important; }
.guide-wa{ display:block; margin-top:14px; text-align:center; font-size:14px; font-weight:600; color:#3d7a00; text-decoration:underline; text-underline-offset:3px; }
.guide-promo{ margin-top:22px; padding:26px 28px; border-radius:16px; background:#0f0f10; color:#f4f2ea; }
.guide-promo strong{ display:block; font-size:20px; line-height:1.3; }
.guide-promo p{ margin:8px 0 18px; color:#bdbbb2; font-size:15px; line-height:1.6; }
.guide-promo-tag{ margin-bottom:12px; }
@media(max-width:980px){ .guide-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- BLOG « magazine » : liste + colonne latérale, grille, article (partials/blog.php) ----------
   Fond sombre, colonne latérale à droite (recherche, rubriques, articles récents, mots-clés). */
.blogx{ background:#0f0f10; color:#f4f2ea; padding:84px 0 96px; }
.blogx a{ color:inherit; text-decoration:none; }
.blogx-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:34px; padding-bottom:18px; border-bottom:1px solid #26262a; }
.blogx-bar-label{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#9a988f; }
.blogx-bar-label a{ color:#caf600; }
.blogx-views{ display:inline-flex; border:1px solid #26262a; border-radius:100px; padding:4px; gap:2px; }
.blogx-views a{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:100px; font-size:12.5px; font-weight:600; color:#9a988f; transition:color .2s ease, background-color .2s ease; }
.blogx-views a:hover{ color:#f4f2ea; }
.blogx-views a.is-on{ background:#caf600; color:#0a0a0a; }

.blogx-layout{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:44px; align-items:start; }
.blogx-layout.is-grid{ grid-template-columns:1fr; }
.blogx-list{ display:flex; flex-direction:column; gap:48px; }
.blogx-layout.is-grid .blogx-list{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:36px 28px; }

.blogx-thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:14px; background:#17171a; }
.blogx-layout.is-grid .blogx-thumb{ aspect-ratio:4/3; }
.blogx-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.blogx-item:hover .blogx-thumb img{ transform:scale(1.05); }
.blogx-thumb-ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:72px; font-weight:800; color:#caf600; }
.blogx-cat{ position:absolute; left:14px; top:14px; background:#caf600; color:#0a0a0a; font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:5px 11px; border-radius:100px; }
.blogx-meta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px; font-size:13px; color:#9a988f; }
.blogx-meta span{ display:inline-flex; align-items:center; gap:7px; }
.blogx-meta svg{ color:#caf600; flex-shrink:0; }
.blogx-meta-end{ margin-left:auto; }
.blogx-title{ margin:12px 0 0; font-size:clamp(21px,2.2vw,27px); line-height:1.25; font-weight:800; letter-spacing:-0.015em; color:#fff; }
.blogx-layout.is-grid .blogx-title{ font-size:19px; }
.blogx-title a{ background:linear-gradient(#caf600,#caf600) 0 100%/0 2px no-repeat; transition:background-size .35s ease, color .2s ease; }
.blogx-item:hover .blogx-title a{ background-size:100% 2px; color:#caf600; }
.blogx-excerpt{ margin:10px 0 0; font-size:15px; line-height:1.65; color:#a9a79f; max-width:none; }
.blogx-layout.is-grid .blogx-excerpt{ font-size:14px; }
.blogx-layout.is-grid .blogx-meta-end{ display:none; }
.blogx-empty{ padding:40px 0; color:#a9a79f; }
.blogx-empty a{ color:#caf600; text-decoration:underline; }

.blogx-pages{ display:flex; gap:8px; flex-wrap:wrap; margin-top:48px; }
.blogx-pages a, .blogx-pages span{ display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:46px; padding:0 12px; border:1px solid #26262a; border-radius:50%; font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:700; color:#f4f2ea; transition:all .2s ease; }
.blogx-pages a:hover{ border-color:#caf600; color:#caf600; }
.blogx-pages .is-on{ background:#caf600; border-color:#caf600; color:#0a0a0a; }

/* Colonne latérale */
.blogx-side{ display:flex; flex-direction:column; gap:24px; position:sticky; top:96px; }
.blogx-widget{ background:#17171a; border:1px solid #26262a; border-radius:16px; padding:24px; }
.blogx-widget h4{ margin:0 0 16px; font-size:17px; font-weight:800; color:#fff; letter-spacing:-0.01em; }
.blogx-search{ position:relative; }
.blogx-search input{ width:100%; font:inherit; font-size:14.5px; padding:13px 46px 13px 16px; border-radius:10px; border:1px solid #2e2e33; background:#0f0f10; color:#f4f2ea; }
.blogx-search input::placeholder{ color:#75736c; }
.blogx-search input:focus{ outline:none; border-color:#caf600; }
.blogx-search button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:none; border-radius:8px; background:transparent; color:#f4f2ea; cursor:pointer; }
.blogx-search button:hover{ background:#caf600; color:#0a0a0a; }
.blogx-cats{ list-style:none; margin:0; padding:0; }
.blogx-cats li + li{ border-top:1px solid #26262a; }
.blogx-cats a{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; font-size:14.5px; font-weight:600; color:#e6e4dc; transition:color .2s ease, padding-left .2s ease; }
.blogx-cats a span:last-child{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:#9a988f; }
.blogx-cats a:hover, .blogx-cats a.is-on{ color:#caf600; padding-left:6px; }
.blogx-recent{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.blogx-recent a{ display:grid; grid-template-columns:74px 1fr; gap:14px; align-items:center; }
.blogx-recent img, .blogx-recent-ph{ width:74px; height:74px; border-radius:10px; object-fit:cover; background:#0f0f10; }
.blogx-recent-ph{ display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; color:#caf600; }
.blogx-recent span{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.blogx-recent em{ align-self:flex-start; font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:#caf600; border:1px solid #2e2e33; padding:3px 8px; border-radius:100px; }
.blogx-recent strong{ font-size:14px; line-height:1.4; font-weight:700; color:#f4f2ea; transition:color .2s ease; }
.blogx-recent a:hover strong{ color:#caf600; }
.blogx-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.blogx-tags a{ font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:100px; background:#0f0f10; border:1px solid #2e2e33; color:#d6d4cc; transition:all .2s ease; }
.blogx-tags a:hover, .blogx-tags a.is-on{ background:#caf600; border-color:#caf600; color:#0a0a0a; }
.blogx-side .guide-promo{ margin-top:0; background:#caf600; color:#0a0a0a; }
.blogx-side .guide-promo p{ color:#2b3300; }
.blogx-side .guide-promo-tag{ background:#0a0a0a; color:#caf600; }
.blogx-side .guide-promo .btn.primary{ background:#0a0a0a; color:#fff; border-color:#0a0a0a; }

/* Page d'un article */
.blogx-post-cover{ margin:0; border-radius:16px; overflow:hidden; }
.blogx-post-cover img{ width:100%; height:auto; display:block; }
.blogx-post .blogx-meta{ margin:20px 0 26px; padding-bottom:20px; border-bottom:1px solid #26262a; }
.blogx-post .article-lead{ color:#fff; }
.blogx-post .article-body{ color:#d6d4cc; }
.blogx-post .article-body h2, .blogx-post .article-body h3{ color:#fff; }
.blogx-post .article-body strong{ color:#fff; }
.blogx-post .article-body a{ color:#caf600; }
.blogx-post .article-body a:hover{ color:#fff; }
.blogx-post .article-body blockquote{ background:#17171a; color:#fff; }
.blogx-post .article-body li::marker{ color:#caf600; }
.blogx-post-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:34px; padding-top:22px; border-top:1px solid #26262a; }
.blogx-post-cat{ font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:#caf600; color:#0a0a0a !important; padding:7px 13px; border-radius:100px; }
.blogx-post .article-cta{ background:#17171a; border-color:#26262a; }
.blogx-post .article-cta strong{ color:#fff; }
.blogx-post .article-cta p{ color:#a9a79f; }
.blogx-post .article-cta .btn.ghost{ color:#f4f2ea; border-color:#3a3a40; }
.blogx-post .article-cta .btn.ghost:hover{ border-color:#caf600; color:#caf600; }
.blogx-more{ margin-top:56px; }
.blogx-more h2{ font-size:24px; color:#fff; margin:0 0 26px; }
.blogx-more .blogx-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
.blogx-more .blogx-title{ font-size:18px; }
.blogx-more .blogx-meta-end, .blogx-more .blogx-excerpt{ display:none; }

@media(max-width:1100px){
  .blogx-layout{ grid-template-columns:1fr; }
  .blogx-side{ position:static; }
  .blogx-layout.is-grid .blogx-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:640px){
  .blogx{ padding:56px 0 64px; }
  .blogx-layout.is-grid .blogx-list, .blogx-more .blogx-list{ grid-template-columns:1fr; }
  .blogx-meta{ gap:12px; font-size:12.5px; }
  .blogx-meta-end{ margin-left:0; }
  .blogx-views span{ display:none; }
}