/* ===========================================================================
   ABM — CSS unifié (premium, moderne, mobile-first)
   - Mobile first & responsive
   - Thème dark premium, light doux
   - Ombrages/overlays uniformisés
   - A11y: focus visibles, liens soulignés
   =========================================================================== */

/* ========================= 0) RESET & BASE ========================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; overflow-x:clip; }
img,svg,video{ max-width:100%; height:auto; display:block; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.hidden{ display:none !important; }

/* ========================= 1) TOKENS / THEMES ========================= */
:root{
  /* Couleurs principales */
  --brand:#6677ff;             /* bleu premium plus doux */
  --brand-2:#2bd48f;           /* vert accent */
  --accent: var(--brand);

  /* DARK premium */
  --bg:#080b14;                /* fond global (plus profond) */
  --fg:#e8edf6;                /* texte principal */
  --muted:#a6b1c7;             /* texte secondaire */
  --surface-0:#0a0f1e;         /* page */
  --surface-1:#0f1426;         /* cartes/nav */
  --surface-2:color-mix(in oklab, var(--surface-1) 88%, #000 12%); /* relief */
  --border:color-mix(in oklab, #93a4c5 12%, #0a0f1e 88%);

  /* Ombres uniformisées */
  --shadow-sm: 0 6px 16px rgba(0,0,0,.28);
  --shadow-md: 0 12px 26px rgba(0,0,0,.34);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.42);

  /* Typo fluide */
  --step--1: clamp(.86rem, .83rem + .2vw, .92rem);
  --step-0:  clamp(1rem , .96rem + .4vw, 1.1rem);
  --step-1:  clamp(1.15rem, 1.08rem + .6vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.25rem + 1vw, 1.8rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.6vw, 2.4rem);
  --step-4:  clamp(2.2rem, 1.9rem + 2.2vw, 3rem);

  /* Rythme & formes */
  --space-1:.56rem; --space-2:.8rem; --space-3:1.1rem; --space-4:1.6rem; --space-5:2.2rem;
  --radius-1:.7rem; --radius-2:1rem; --radius-3:1.25rem;

  /* Conteneurs */
  --container: min(1280px, 92vw);
  --container-tight: min(1080px, 92vw);

  /* Liens */
  --link-underline: underline;
  --link-offset: 2px;

  /* Dégradé marque */
  --g-brand: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* LIGHT — doux, premium, non éblouissant */
:root[data-theme="light"]{
  /* Fond moins éclatant + contraste lisible */
  --bg:#eef2f7;                            /* blanc cassé neutre */
  --fg:#0a1424;                            /* texte un peu plus sombre */
  --muted:#3b4863;                         /* secondaire plus lisible */
  --surface-0: color-mix(in oklab, #ffffff 70%, #e6edf6 30%);
  --surface-1: color-mix(in oklab, #ffffff 80%, #e6edf6 20%);
  --surface-2: color-mix(in oklab, #ffffff 72%, var(--brand) 28%);
  --border:    color-mix(in oklab, #27344f 36%, #ffffff 64%); /* bordures plus nettes */
  --shadow-sm: 0 6px 16px rgba(15,23,42,.14);
  --shadow-md: 0 12px 26px rgba(15,23,42,.2);
  --shadow-lg: 0 18px 40px rgba(15,23,42,.26);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){ color-scheme: light; }
}

/* Améliorations de lisibilité (mode clair uniquement) */
:root[data-theme="light"] .card,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .methode,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .btn{
  background: var(--surface-1);
  border-color: var(--border);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .badge-glass{
  border-color: color-mix(in oklab, #405178 34%, #ffffff 66%);
}

/* Section titles restent lisibles en clair */
:root[data-theme="light"] .section h2{ text-shadow: none; }

/* Adoucir l'ambiance globale en clair (overlay léger) */
:root[data-theme="light"] body::before{
  opacity:.22;
  mix-blend-mode:multiply;
}

/* Cartes un peu plus colorées en clair pour casser le blanc */
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .methode{
  background: color-mix(in oklab, #ffffff 78%, #e6edf6 22%);
}

/* ========================= 2) TYPO / STRUCTURE ========================= */
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  background:var(--surface-0); color:var(--fg); text-rendering:optimizeLegibility;
}
a{
  color:inherit; text-decoration:var(--link-underline); text-underline-offset:var(--link-offset);
}
a:hover{ filter:brightness(1.07); }
a:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand) 45%, transparent);
  outline-offset:2px; border-radius:.25rem;
}

main{ max-width:var(--container); margin:auto; padding:clamp(1.2rem,1.5vw,2rem) 1rem; }
.section{ padding-block: clamp(1.8rem,3.2vw,3rem); content-visibility:auto; contain-intrinsic-size: 0 600px; }
.section h2{ font-size:var(--step-2); line-height:1.2; margin:0 0 .75rem; }
.lead{ font-size:var(--step-0); color:var(--muted); max-width:70ch; }

/* ========================= 3) LAYOUT / GRID ========================= */
.grid{ display:grid; gap:clamp(1.1rem,2.8vw,1.7rem); }
.grid.cols-2{ grid-template-columns:1fr; }
.grid.cols-3{ grid-template-columns:1fr; }
@media (min-width:700px){  .grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ==================== 4) HEADER & NAV ==================== */
.site-header{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--surface-0) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.05) blur(10px);
  backdrop-filter:saturate(1.05) blur(10px);
}
.site-header.is-scrolled{background:color-mix(in oklab, var(--surface-0) 96%, transparent);box-shadow:0 10px 30px rgba(0,0,0,.25);border-bottom-color: color-mix(in oklab, var(--border), var(--brand) 16%);}
.navbar{
  max-width:var(--container); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.55rem 1rem;
}
.site-header.is-scrolled .navbar{ padding:.4rem 1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:var(--step-0); color:var(--fg); text-decoration:none; letter-spacing:.02em; }
.brand .dot{ width:.8rem; height:.8rem; border-radius:999px; background:var(--g-brand); box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent); }
.nav-actions{ display:inline-flex; align-items:center; gap:.5rem; }

/* Toggle thème */
.theme-toggle{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  height:40px; padding:.45rem .9rem .45rem calc(.7rem + 1.2rem + .5rem);
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface-1); color:var(--fg); cursor:pointer;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
  box-shadow: var(--shadow-sm);
}
.theme-toggle:hover{ background: color-mix(in oklab, var(--fg) 6%, var(--surface-1)); box-shadow:var(--shadow-md); }
.theme-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 45%, transparent); }
.theme-toggle .tt-icon{ position:absolute; left:.7rem; top:50%; transform:translateY(-50%); width:1.2rem; height:1.2rem; display:grid; place-items:center; line-height:0; }
.icon-sun,.icon-moon{ position:absolute; inset:0; display:grid; place-items:center; transform-origin:50% 50%; transition:opacity .28s ease, transform .38s ease; }
.icon-sun svg,.icon-moon svg{ width:100%; height:100%; display:block; vector-effect:non-scaling-stroke; }
.icon-sun{ opacity:0; transform:rotate(-90deg) scale(.94); }
.icon-moon{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .icon-sun{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .icon-moon{ opacity:0; transform:rotate(90deg) scale(.94); }
.theme-toggle .tt-label{ font-weight:700; letter-spacing:.01em; line-height:1; }

/* Burger / panneau mobile */
.nav-toggle{
  display:inline-flex; align-items:center; gap:.5rem; height:40px; padding:0 .9rem;
  border:1px solid var(--border); border-radius:12px; background:var(--surface-1); color:var(--fg); font-weight:700;
  box-shadow: var(--shadow-sm);
}
.nav-toggle .chev{ transition:transform .2s ease; }
.nav-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.nav-collapsible{
  overflow:clip; max-height:0;
  transition:max-height .28s ease, border-color .28s ease, box-shadow .28s ease;
  border-bottom:1px solid transparent;
  background:color-mix(in oklab,var(--surface-0) 98%, transparent);
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.nav-collapsible.open{ max-height:60svh; border-color:var(--border); box-shadow: var(--shadow-md); }
.nav-list{ list-style:none; margin:0; padding:.5rem .75rem 1rem; display:grid; gap:.6rem; }
.nav-list a,.nav-list .btn{
  display:flex; align-items:center; gap:.55rem;
  padding:1rem 1.1rem; border-radius:14px; text-decoration:none;
  color:var(--fg); background:var(--surface-1); border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
/* Mobile-only tweaks for menu icons spacing */
@media (max-width: 991px){
  .nav-list a{ gap:.45rem; padding:.85rem 1rem; }
  /* Icônes masquées sur mobile pour éviter l'encombrement */
  .nav-list .ni{ display:none !important; }
}
@media (max-width: 360px){
  .nav-list .ni{ display:none; }
}
.nav-list a:hover{ border-color:color-mix(in oklab,var(--border),var(--brand) 30%); box-shadow:var(--shadow-md); }

.nav-desktop{ display:none; flex:1 1 auto; min-width:0; }
.nav-inline{ display:flex; align-items:center; gap:.6rem; white-space:nowrap; list-style:none; margin:0; padding:0 .5rem; }
.nav-inline .chip{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-1);text-decoration:none;font-weight:700;}
.nav-inline .chip::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:linear-gradient(90deg, transparent, var(--brand), transparent);transform:scaleX(0);transform-origin:50% 50%;transition:transform .2s ease;}
.nav-inline .chip:hover::after{transform:scaleX(1);}
.nav-inline .chip.is-active{border-color:color-mix(in oklab, var(--border), var(--brand) 40%);box-shadow:0 6px 16px color-mix(in oklab, var(--brand) 24%, transparent);}
@media (min-width:992px){
  .nav-toggle{ display:none; }
  .nav-desktop{ display:block; }
  .nav-actions .theme-toggle{ display:inline-flex; }
  .nav-collapsible{ display:none; }
}

/* CTA nav */
.nav-desktop .btn.cta, .nav-list .btn.cta{
  border:0 !important; background:var(--g-brand) !important; color:#fff !important;
  font-weight:800; letter-spacing:.01em; box-shadow:0 12px 26px color-mix(in oklab, var(--brand) 30%, transparent);
}
.nav-desktop .btn.cta:hover, .nav-list .btn.cta:hover{
  transform:translateY(-1px); box-shadow:0 16px 30px color-mix(in oklab, var(--brand) 36%, transparent);
}

/* ======================== 5) COMPOSANTS ======================== */
.card, .btn, .chip, .contact-item, .ci-copy-btn{
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow: var(--shadow-sm);
}
.card{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-2);
  padding:clamp(1rem, 2.2vw, 1.35rem);
}
@media (hover:hover){ .card:hover{ transform:translateY(-4px); border-color:color-mix(in oklab, var(--border), var(--brand) 28%); box-shadow:var(--shadow-lg); } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:46px; padding:.7rem 1.05rem; line-height:1;
  border:1px solid var(--border); border-radius:.9rem;
  background:var(--surface-1); color:var(--fg); font-weight:600; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); background:color-mix(in oklab,var(--fg) 6%,var(--surface-1)); border-color:color-mix(in oklab,var(--fg) 14%,var(--border)); box-shadow:var(--shadow-md); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 40%,transparent); }
.btn--primary{ color:#fff; border:0; background:var(--g-brand); box-shadow:0 12px 26px color-mix(in oklab, var(--brand) 30%, transparent); }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 16px 32px color-mix(in oklab, var(--brand) 36%, transparent); }
.btn--ghost{ background:transparent; }

.chip{
  display:inline-flex; align-items:center; gap:.5rem; line-height:1;
  padding:.5rem .8rem; border:1px solid var(--border); border-radius:12px;
  background:var(--surface-1); color:var(--fg); text-decoration:none; font-weight:600;
}
.chip:hover{ transform:translateY(-1px); border-color:color-mix(in oklab, var(--border), var(--brand) 30%); box-shadow: var(--shadow-md); }

.pill{ display:inline-block; padding:.24rem .6rem; border-radius:.7rem; font-size:var(--step--1); font-weight:800; line-height:1.25; letter-spacing:.01em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.pill--talend{  background:color-mix(in oklab, var(--brand) 82%, var(--bg) 18%);  color:#fff; border:1px solid color-mix(in oklab, var(--brand) 55%, var(--border)); }
.pill--powerbi{ background:color-mix(in oklab, var(--brand-2) 78%, var(--bg) 22%); color:#fff; border:1px solid color-mix(in oklab, var(--brand-2) 55%, var(--border)); }
.pill:is(:hover,:focus-visible){ filter:brightness(1.06); outline:none; box-shadow:0 0 0 3px color-mix(in oklab, currentColor 28%, transparent); }

/* ========================== 6) SECTIONS / MÉTHODES ========================== */
.hero{ display:grid; grid-template-columns:1fr; gap:clamp(1rem,2vw,1.5rem); align-items:center; }
.hero .actions{ display:flex; gap:.7rem; margin-top:1rem; flex-wrap:wrap; }
.hero__img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-3); border:1px solid var(--border); }
.hero__viz{ width:100%; aspect-ratio:16/9; border-radius:var(--radius-3); border:1px solid var(--border); background:var(--surface-1); background-image:var(--hero-image); background-size:cover; background-position:50% 50%; box-shadow:var(--shadow-lg); }
@media (min-width:900px){ .hero{ grid-template-columns:1.25fr .85fr; } }

.methodes.methodes--modern{ display:grid; grid-template-columns:1fr; gap:clamp(1rem,2.5vw,1.6rem); margin-top:clamp(1.5rem,3vw,2.6rem); }
@media (min-width:700px){  .methodes.methodes--modern{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .methodes.methodes--modern{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Badge glass reutilisable (bleu->vert, léger et transparent) */
.badge-glass{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg,
              color-mix(in oklab, var(--brand) 22%, transparent),
              color-mix(in oklab, var(--brand-2) 28%, transparent));
  border:1px solid color-mix(in oklab, var(--border), var(--brand) 24%);
}
.badge-glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(120% 120% at -10% -10%, rgba(255,255,255,.18), transparent 50%),
              radial-gradient(120% 120% at 110% 110%, rgba(255,255,255,.12), transparent 40%);
  pointer-events:none;
}

.methode{
  display:grid; grid-template-columns:2.6rem 1fr; align-items:start; column-gap:1rem; row-gap:.7rem;
  padding:clamp(1.2rem,2.2vw,1.6rem);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface-1) 96%, transparent), color-mix(in oklab, var(--surface-0) 98%, transparent));
  border:1px solid color-mix(in oklab, var(--border), var(--brand) 12%);
  border-radius:var(--radius-2); box-shadow:var(--shadow-md);
  -webkit-backdrop-filter: blur(4px) saturate(1.02);
  backdrop-filter: blur(4px) saturate(1.02);
}
@media (hover:hover){ .methode:hover{ transform:translateY(-6px); border-color:color-mix(in oklab,var(--brand) 35%,var(--border)); box-shadow:var(--shadow-lg); } }
.methode-head{ display:contents; }
.methode__icon{ grid-column:1; grid-row:1; width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:.9rem; color:#fff; font-size:1.2rem; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.methode__title{ grid-column:2; grid-row:1; margin:0; align-self:center; font-size:var(--step-1); font-weight:800; color:var(--fg); line-height:1.3; }
.m-list{ grid-column:1 / -1; list-style:none; margin:.25rem 0 0; padding:0; display:grid; gap:.6rem; }
.m-item{ display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:.6rem; }
.m-bullet{ width:28px; height:28px; display:grid; place-items:center; border-radius:.7rem; color:var(--fg);
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 22%, transparent), color-mix(in oklab, var(--brand-2) 28%, transparent));
  border:1px solid color-mix(in oklab, var(--border), var(--brand) 24%);
}
.m-text{ color:var(--muted); font-size:var(--step--1); }
.m-tech{ font-size:calc(var(--step--1) - .02rem); padding:.25rem .5rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--border), var(--brand) 24%);
  background: color-mix(in oklab, var(--surface-1) 95%, transparent); color:var(--fg); white-space:nowrap; }
.m-note{ grid-column:1 / -1; margin-top:.7rem; display:flex; align-items:flex-start; gap:.5rem; color:var(--muted); font-size:var(--step--1); }
.m-note-ico{ width:16px; height:16px; opacity:.9; color:var(--brand-2); flex:0 0 16px; margin-top:.15rem; }

/* ========================== 7) SERVICES ========================== */
.services-grid{ align-items:stretch; }
.service-card{
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface-1) 96%, transparent), color-mix(in oklab, var(--surface-0) 98%, transparent));
  border:1px solid color-mix(in oklab, var(--border), var(--brand) 12%);
  -webkit-backdrop-filter: blur(4px) saturate(1.02);
  backdrop-filter: blur(4px) saturate(1.02);
  display:grid; gap:.6rem;
}
.svc-head{ display:grid; grid-template-columns:2.6rem 1fr; align-items:center; gap:.8rem; }
.svc-ico{ width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:.9rem; font-weight:800; }
.svc-title{ margin:0; font-size:var(--step-1); font-weight:800; line-height:1.2; color:var(--fg); }
.svc-desc{ color:var(--muted); margin:.25rem 0 .35rem; }
.svc-badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem; }
.svc-badge{ padding:.28rem .55rem; border-radius:999px; font-size:calc(var(--step--1) - .02rem);
  border:1px solid color-mix(in oklab, var(--border), var(--brand) 28%);
  background: color-mix(in oklab, var(--surface-1) 96%, transparent); color:var(--fg);
}

/* Services: puces sans "V" (simple pastille) */
.service-card .m-item{ grid-template-columns: 1fr auto; }
.service-card .m-bullet{ display:none !important; }

/* ========================== 7) CERTIFICATIONS ========================== */
.certs{ padding-block:clamp(2rem,3vw,3.5rem); }
.certs-head{ text-align:left; margin-bottom:1.25rem; }
.certs .h2{ font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0; }
.certs .muted{ color: var(--muted); margin-top:.5rem; }

.certs-viewport{ max-width:min(100vw,1100px); margin-inline:auto; overflow:hidden; }
.certs-rail{
  list-style:none; margin:0; padding:0; display:grid;
  grid-auto-flow:column; grid-auto-columns:100%; gap:0;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.certs-rail > li{ width:100%; scroll-snap-align:center; }
@media (min-width:900px){
  .certs-viewport{ overflow:visible; }
  .certs-rail{ grid-auto-flow:row; grid-auto-columns:initial; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem 1.5rem; overflow:visible; scroll-snap-type:none; }
  .certs-rail > li{ scroll-snap-align:unset; }
}
.cert-card{
  display:grid; grid-template-columns:56px 1fr; align-items:start; column-gap:1.4rem; row-gap:.7rem;
  padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.6rem,3vw,2.4rem);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface-1) 94%, transparent), color-mix(in oklab, var(--surface-0) 98%, transparent));
  border:1px solid color-mix(in oklab, var(--border), var(--brand) 12%);
  border-radius:var(--radius-2); box-shadow:var(--shadow-md);
  -webkit-backdrop-filter: blur(6px) saturate(1.02);
  backdrop-filter: blur(6px) saturate(1.02);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover:hover){ .cert-card:hover{ transform:translateY(-4px); border-color:color-mix(in oklab,var(--brand) 40%,var(--border)); box-shadow:0 18px 40px rgba(0,0,0,.42); } }
.cert-badge{ position:relative; grid-column:1; grid-row:1; display:grid; place-items:center; width:56px; height:56px; border-radius:.9rem; background:var(--surface-1); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.25); overflow:hidden; }
.cert-badge::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  background: conic-gradient(from 0turn,
              color-mix(in oklab, var(--brand) 100%, transparent) 0 150deg,
              color-mix(in oklab, var(--brand-2) 100%, transparent) 150deg 300deg,
              transparent 300deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); 
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding:2px;
  transform-origin:50% 50%;
}
.cert-card:hover .cert-badge{ box-shadow:0 6px 18px rgba(0,0,0,.28); }
.cert-card:hover .cert-badge::after{ filter: drop-shadow(0 0 10px color-mix(in oklab, var(--brand) 55%, transparent)); animation: ring-rotate 1.1s ease-out 1; }
@keyframes ring-rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(180deg); } }

/* Horloge grande (badge) pour pending */
/* Animer les aiguilles du SVG pending existant (cert-ph--clock) */
/* Aiguilles animées via SVG SMIL (pas d'animation CSS nécessaire) */
.cert-logo{ width:100%; height:100%; object-fit:contain; }
.cert-body{ grid-column:1 / -1; display:grid; gap:.55rem; }
.cert-title{ margin:0; font-size:var(--step-1); font-weight:800; line-height:1.3; }
.cert-issuer{ margin:.1rem 0 0; font-size:var(--step--1); color:var(--muted); }
.cert-statusline{ grid-column:2; grid-row:1; display:flex; align-items:center; gap:.6rem; font-size:var(--step-0); font-weight:700; }
.cert-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .7rem; line-height:1; border-radius:999px; font-size:var(--step--1); border:1px solid var(--border); background:color-mix(in oklab, var(--surface-1) 96%, transparent); font-weight:800; letter-spacing:.01em; }
.cert-chip::before{ display:none !important; content:none; }
.cert-chip .ci-ico{ width:14px; height:14px; flex:0 0 14px; }
.cert-chip.chip-ok{ color:var(--brand-2); border-color:color-mix(in oklab,var(--brand-2) 40%,var(--border)); }
.cert-chip.chip-ok .ci-ico{ color: var(--brand-2); }
.cert-chip.chip-pending{ color:var(--muted); }
.cert-chip.chip-pending .ci-ico{ color: var(--muted); }

/* Horloge animée pour statut pending */
.cert-chip .ci-ico.clock .clk-h,
.cert-chip .ci-ico.clock .clk-m{ transform-origin:12px 12px; transform-box: fill-box; }
.cert-chip .ci-ico.clock .clk-h{ animation: clk-h 12s linear infinite; opacity:.95; }
.cert-chip .ci-ico.clock .clk-m{ animation: clk-m 2s linear infinite;  opacity:.95; }
@keyframes clk-h{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes clk-m{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.cert-date{ opacity:.9; font-size:var(--step--1); }
.cert-tags{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:.55rem 0 0; padding:0; }
.cert-tags .tag{ padding:.35rem .6rem; border-radius:999px; background:color-mix(in oklab, #94a3b8 14%, transparent); border:1px solid color-mix(in oklab, #94a3b8 28%, transparent); font-size:calc(var(--step--1) - .02rem); line-height:1; white-space:nowrap; }
:root[data-theme="light"] .cert-tags .tag{ background:color-mix(in oklab, #94a3b8 10%, #fff 92%); border:1px solid color-mix(in oklab, #94a3b8 22%, #fff 0%); color:color-mix(in oklab, var(--fg) 88%, #000 0%); }

/* UI/UX: limiter à 5 tags visibles avec toggle */
.cert-tags.is-collapsed .tag:nth-child(n+6){ display:none; }
.cert-tags + .tags-toggle{ margin-top:.4rem; background:none; border:0; color:var(--muted); cursor:pointer; padding:0; font:inherit; text-decoration:underline; text-underline-offset:2px; }
.cert-tags + .tags-toggle:hover{ color:var(--fg); }

/* Dots (certs) */
.certs-dots{ display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:.75rem; padding-bottom:.25rem; }
.certs-dot{ -webkit-tap-highlight-color:transparent; width:8px; height:8px; border-radius:999px; border:0; background:color-mix(in oklab, var(--muted) 55%, transparent); opacity:.6; transform:scale(.9); transition: transform .2s ease, opacity .2s ease, background .2s ease; }
.certs-dot:is(:hover,:focus-visible){ opacity:.85; transform:scale(1); outline:none; }
.certs-dot.is-active{ opacity:1; transform:scale(1.2); background:color-mix(in oklab, var(--brand) 60%, #fff 0%); }
@media (min-width:900px){ .certs-dots{ display:none; } }

/* ===== Brand logo (header) ===== */
.brand-logo{ height:40px; width:auto; object-fit:contain; transition: transform .25s ease, filter .25s ease; ; transition: transform .25s ease, filter .25s ease, height .2s ease; }
@media (min-width:600px){ .brand-logo{ height:44px; ; transition: transform .25s ease, filter .25s ease, height .2s ease; } }
@media (min-width:992px){ .brand-logo{ height:56px; ; transition: transform .25s ease, filter .25s ease, height .2s ease; } }
.brand:hover .brand-logo{ transform: scale(1.08); filter: drop-shadow(0 0 6px color-mix(in oklab, var(--brand) 60%, transparent)); ; transition: transform .25s ease, filter .25s ease, height .2s ease; }
@keyframes logo-pulse{ 0%,100%{ transform:scale(1); filter:drop-shadow(0 0 0 color-mix(in oklab,var(--brand) 0%, transparent)); } 50%{ transform:scale(1.05); filter:drop-shadow(0 0 10px color-mix(in oklab,var(--brand) 60%, transparent)); } }
body.home .brand-logo{ animation: logo-pulse 3s ease-in-out infinite; ; transition: transform .25s ease, filter .25s ease, height .2s ease; }

/* ========================== 8) CONTACT v2 ========================== */
.contact-v2 .section-head{ margin-bottom:.8rem; }
.contact-grid{ display:grid; gap:1rem; align-items:start; }
.contact-left{ min-width:0; }
.contact-v2 .calendly-card{ max-width:760px; margin-left:0; margin-right:auto; }

.calendly-card{ padding:0; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-2); box-shadow:var(--shadow-lg); }
.calendly-head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.9rem 1rem; border-bottom:1px solid var(--border); background: color-mix(in oklab, var(--surface-1) 95%, var(--surface-0) 5%); }
.calendly-title{ display:flex; align-items:center; gap:.6rem; }
.calendly-title h3{ margin:0; font-size:var(--step-1); line-height:1.2; }
.calendly-dot{ width:.8rem; height:.8rem; border-radius:999px; background:var(--g-brand); box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 20%,transparent); }

.calendly-inline{ position:relative; min-height: clamp(560px, 70vh, 920px); background:var(--surface-1); }
.calendly-inline > .calendly-inline-widget, .calendly-inline iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0 !important; min-height:0 !important; display:block; }
.calendly-overlay, .calendly-skeleton{ position:absolute; inset:0; display:grid; place-items:center; padding:1rem; z-index:2; }
.calendly-overlay{ background:transparent; }
.calendly-skeleton{ border-top:1px solid var(--border); background: color-mix(in oklab, var(--surface-1) 90%, var(--surface-0)); }
.calendly-inline.is-ready .calendly-overlay, .calendly-inline.is-ready .calendly-skeleton{ display:none !important; }

#calendly-inline-embed{ position:relative; min-height: clamp(640px, 70vh, 920px); margin: 0 1rem 1rem; }
#calendly-inline-embed > .calendly-inline-widget, #calendly-inline-embed iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0 !important; min-height:0 !important; display:block; }
@media (max-width: 991px){ #calendly-inline-embed{ display:none; } .contact-v2 .actions--center{ display:flex; } }
@media (min-width: 992px){ .contact-v2 .actions--center{ display:none; } .contact-sticky{ position: sticky; top: 88px; } }

/* ===== Desktop-only layout for contact (rearranged, smaller calendar) ===== */
@media (min-width: 992px){
  /* Two-column layout inside the contact card */
  .contact-v2 .calendly-card{
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 420px;
    grid-template-areas:
      "head head"
      "cal  contacts"
      "note contacts";
    align-items: start;
    gap: .25rem 1rem;
  }
  .contact-v2 .calendly-head{ grid-area: head; }
  #calendly-inline-embed{ grid-area: cal; margin: 0; }
  .contact-v2 .contact-inline{ grid-area: contacts; padding: 1rem; }
  .contact-v2 .soft-sep{ display: none; }
  .contact-v2 .note{ grid-area: note; margin: .5rem 0 0 0; padding: 0 0 .75rem 0; }

  /* Reduce calendar height on desktop */
  .calendly-inline{ min-height: clamp(420px, 56vh, 720px); }
  #calendly-inline-embed{ min-height: clamp(460px, 58vh, 760px); }
}

/* Liste contacts + copy */
.contact-inline{ text-align:left; display:grid; gap:1rem; padding: 1rem 1.25rem 1.25rem; }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.contact-row{ display:flex; align-items:center; justify-content:flex-start; gap:.5rem; }
.contact-item{ flex:1; display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--fg); padding:.9rem 1rem; border:1px solid var(--border); border-radius:1rem; background: color-mix(in oklab, var(--surface-1) 98%, var(--brand) 2%); }
.contact-item:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--border), var(--brand) 28%); background: color-mix(in oklab, var(--surface-1) 94%, var(--brand) 6%); box-shadow: var(--shadow-md); }
.ci-icon{ width:40px; height:40px; border-radius:.9rem; display:grid; place-items:center; background: var(--g-brand); color:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); font-size:1.05rem; }
.ci-icon.badge-glass{ background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 22%, transparent), color-mix(in oklab, var(--brand-2) 28%, transparent)); border:1px solid color-mix(in oklab, var(--border), var(--brand) 24%); }
.ci-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; }
.ci-body strong{ font-weight:800; color:var(--fg); line-height:1.2; }
.ci-body small{ color:var(--muted); line-height:1.2; }
.ci-cta{ margin-left:auto; font-weight:800; opacity:.7; }
.ci-copy-btn{ width:40px; height:40px; display:grid; place-items:center; border-radius:.9rem; border:1px solid var(--border); background: color-mix(in oklab, var(--surface-1) 96%, var(--fg) 4%); color: var(--muted); cursor:pointer; }
.ci-copy-btn:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--border), var(--brand) 26%); background: color-mix(in oklab, var(--surface-1) 90%, var(--brand) 10%); color:#fff; box-shadow: var(--shadow-md); }
.ci-copy-btn.is-copied{ background: var(--g-brand); color:#fff; border-color: transparent; box-shadow: 0 8px 22px color-mix(in oklab, var(--brand) 24%, transparent); }

/* ======================== 9) MODAL (projets) ======================== */
.modal[hidden]{ display:none; }
.modal{
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in oklab, #000 58%, transparent);
  display:grid; place-items:center; padding:1rem;
}
.modal__dialog{
  position: relative; width:min(92vw, 720px);
  background:var(--surface-0); color:var(--fg);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:clamp(16px, 2.5vw, 28px);
  max-height:90vh; overflow:auto; animation: pop .18s ease-out;
}
.btn.btn--details{
  color:#fff; font-weight:800;
  background: linear-gradient(135deg,
               color-mix(in oklab, var(--brand) 22%, transparent),
               color-mix(in oklab, var(--brand-2) 28%, transparent));
  border:1px solid color-mix(in oklab, var(--border), var(--brand) 26%);
  -webkit-backdrop-filter: blur(2px) saturate(1.02);
  backdrop-filter: blur(2px) saturate(1.02);
  box-shadow:0 10px 24px color-mix(in oklab, var(--brand) 30%, transparent);
}
.btn.btn--details:hover{ transform:translateY(-1px); box-shadow:0 14px 30px color-mix(in oklab, var(--brand) 36%, transparent); }

/* Modal projet — style premium */
#project-modal .modal__dialog{
  width:min(94vw, 860px);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface-0) 94%, transparent), color-mix(in oklab, var(--surface-1) 96%, transparent));
  border-radius:20px; border:1px solid color-mix(in oklab, var(--border), var(--brand) 16%);
}
#project-modal .modal__header{ padding-bottom:.5rem; border-bottom:1px solid var(--border); }
#project-modal .modal__header h3{ font-size: clamp(1.2rem, 1.4vw, 1.6rem); }
#project-modal .modal__abstract{ font-size: 1.05rem; color: var(--muted); }
#project-modal .modal__body{ padding-top:.5rem; }
#project-modal .modal__body h4{
  margin:.25rem 0 .35rem; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase; color: color-mix(in oklab, var(--fg) 92%, #fff 0%);
}
#project-modal .modal__body ul{ list-style:none; padding-left:0; margin:.25rem 0 0; display:grid; gap:.35rem; }
#project-modal .modal__body li::before{ content:""; display:inline-block; width:.46rem; height:.46rem; border-radius:999px; margin-right:.5rem; background: var(--g-brand); vertical-align:middle; }
#project-modal .modal__footer{ border-top:1px solid var(--border); padding-top:.75rem; }
#project-modal .modal__close{ color: var(--muted); }

@media (min-width: 900px){
  #project-modal .modal__body{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem 1.25rem; }
  #project-modal .modal__body section:nth-child(1),
  #project-modal .modal__body section:last-child{ grid-column: 1 / -1; }
}
.modal__header h3{ margin: 0 0 .25rem; line-height: 1.2; }
.modal__client{ opacity:.85; margin:0 0 .5rem; }
.modal__abstract{ margin:0 0 1rem; font-size: 1.05rem; }
.modal__body section{ margin:1rem 0; }
.modal__footer{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
.modal__close{
  position:absolute; top:8px; right:8px; width:40px; height:40px;
  border:none; background:transparent; font-size:24px; cursor:pointer; color:var(--fg);
}
.stack-list{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; }
.stack-list li{ padding:.25rem .5rem; border-radius:999px; background: color-mix(in oklab, var(--fg) 10%, transparent); font-size:.9rem; }

@keyframes pop{ from{ transform:translateY(8px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }

/* ======================== 10) CAROUSEL (réalisations) ======================== */
.carousel{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.carousel__track{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  display:grid; grid-auto-flow:column; gap: clamp(12px, 2vw, 20px);
  grid-auto-columns:min(100%, 34rem); padding:.25rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
@media (min-width:720px){  .carousel__track{ grid-auto-columns: calc(50% - 12px); } }
@media (min-width:1100px){ .carousel__track{ grid-auto-columns: calc(33.333% - 14px); } }
.carousel__slide{ scroll-snap-align:start; }
.carousel__btn{
  appearance:none; border:1px solid var(--border);
  background:var(--surface-2); color:var(--fg);
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center; font-size:22px; line-height:1; cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.carousel__btn:disabled{ opacity:.45; cursor:not-allowed; }
.carousel__dots{
  grid-column:1 / -1; display:flex; justify-content:center; gap:8px; margin-top:.4rem;
}
.carousel__dot{
  width:8px; height:8px; border-radius:999px; border:0; cursor:pointer; padding:0;
  background: rgba(255,255,255,.35);
  transition: transform .18s ease, background .18s ease, width .18s ease;
}
.carousel__dot.is-active{ width:22px; background:var(--accent); }

/* ======================== 11) FOOTER & MISC ======================== */
.site-footer{ border-top:1px solid var(--border); padding:clamp(1.4rem,2vw,2rem) 1rem; text-align:center; color:var(--muted); }
/* Footer premium */
.footer{ max-width:var(--container); margin-inline:auto; text-align:left; }
.footer-grid{ display:grid; gap:1.1rem 1.5rem; align-items:start; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
@media (max-width: 899px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.footer-logo{ width:56px; height:56px; border-radius:.8rem; border:1px solid var(--border); background:var(--surface-1); box-shadow: var(--shadow-sm); }
.footer-title{ font-size: clamp(1.05rem, 1vw, 1.2rem); }
.footer-col-title{ margin:.2rem 0 .5rem; font-size: var(--step-0); color: var(--fg); font-weight:800; }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.footer-list a{ color: var(--muted); text-decoration: none; display:flex; align-items:center; gap:.55rem; }
.footer-list a:hover{ color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.fi{ width:18px; height:18px; flex:0 0 18px; opacity:.85; }
.footer-list a:hover .fi{ opacity:1; }
.footer-meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--muted); }
@media (max-width:599px){ .footer-meta{ flex-direction:column; align-items:flex-start; } }

/* ===================== 12) MOBILE TWEAKS ===================== */
@media (min-width:1600px){
  .section{ padding-block: clamp(2.2rem, 2vw, 3.6rem); }
  .hero{ grid-template-columns: 1.1fr .9fr; gap: 2rem; }
  .card{ padding: clamp(1.2rem, 1.4vw, 1.8rem); }
}
@media (max-width:599px){
  .site-header, .navbar{ overflow:clip; max-width:100vw; }
.site-header.is-scrolled .navbar{ padding:.4rem 1rem; }
  .brand{ flex:1 1 auto; min-width:0; }
  .brand-logo{ height:36px; max-width:48vw; ; transition: transform .25s ease, filter .25s ease, height .2s ease; }
  .nav-actions{ flex:0 0 auto; }
  .theme-toggle, .nav-toggle{ max-width:44vw; }
}
@media (max-width:360px){
  .nav-toggle{ padding:0 .7rem; }
  .theme-toggle{ height:38px; padding:.4rem .6rem .4rem calc(.7rem + 1.2rem + .35rem); }
  .methode{ grid-template-columns:2.4rem 1fr; }
  .methode__icon{ width:2.4rem; height:2.4rem; }
  .cert-card{ grid-template-columns:52px 1fr; }
  .cert-badge{ width:52px; height:52px; }
}

/* ===================== 13) UTILITAIRES SEO/UI ===================== */
.muted{ color:var(--muted); }
.soft-sep{
  display:block; width:100%; height:1px; border:0; margin:.25rem 0 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--fg) 12%, transparent) 25%,
    color-mix(in oklab, var(--fg) 18%, transparent) 50%,
    color-mix(in oklab, var(--fg) 12%, transparent) 75%,
    transparent 100%
  );
}
:target{ scroll-margin-top: 88px; }

/* Rôle (mise en avant) */
.role{
  font-size:var(--step-1); font-weight:700; line-height:1.3; margin-top:.3rem;
  background:var(--g-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px;
  text-decoration-color: color-mix(in oklab, var(--brand) 55%, transparent);
  text-shadow:0 0 4px color-mix(in oklab, var(--brand-2) 30%, transparent);
}

/* A11y: réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .nav-toggle .chev, .nav-collapsible, .btn, .card, .methode, .cert-card,
  .icon-sun, .icon-moon, .theme-toggle, .certs-dot, .chip,
  .contact-item, .ci-copy-btn, .brand-logo { transition:none !important; animation:none !important; }
}


/* Masquer les barres horizontales des zones scrollables */
.carousel__track,
.certs-rail{
  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge legacy */
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar,
.certs-rail::-webkit-scrollbar{
  /* Chrome/Safari/Edge (Chromium) */
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}


/* Empêche scroll horizontal sur le carousel */
.carousel__track {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: .25rem; /* petit espace pour éviter que l’ombre coupe */
}

/* Mobile : réduire l’intensité des ombres pour éviter que ça masque la card */
@media (max-width: 599px) {
  .card {
    box-shadow: 0 4px 12px rgba(0,0,0,.18); /* plus soft que var(--shadow-lg) */
  }
}

/* Bouton CTA dans la section Contact */
.contact-v2 .btn.cta,
.contact-v2 [data-booking-open] {
  border: 0 !important;
  background-image: var(--g-brand) !important;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 12px 26px color-mix(in oklab, var(--brand) 30%, transparent);
}

.contact-v2 .btn.cta:hover,
.contact-v2 [data-booking-open]:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px color-mix(in oklab, var(--brand) 36%, transparent);
}


/* --- Carousel : mobile-first ------------------------------------------- */

/* Piste */
.carousel__track{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* Gutter interne pour que la 1ʳᵉ/dernière card ne colle pas au bord */
  padding-inline: 14px;
  /* on enlève le masque sur mobile pour ne pas rogner la carte */
  -webkit-mask-image: none;
          mask-image: none;

  /* on masque la barre de scroll, mais on garde le swipe */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
.carousel__track::-webkit-scrollbar{ display:none; }

/* Flèches : positionnées sur le même gutter */
.carousel__btn.prev{ margin-left: 6px; }
.carousel__btn.next{ margin-right: 6px; }

/* Ombre des cards plus douce sur mobile */
@media (max-width: 599px){
  .card{ box-shadow: 0 4px 12px rgba(0,0,0,.18); }
}

/* Header accent + chips icons */
.site-header{ animation: header-in .24s ease-out both; }
.site-header{ --accent-a: var(--brand); --accent-b: var(--brand-2); }
.site-header::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-a), var(--accent-b), transparent);
  opacity:.7; transition: background .35s ease, opacity .25s ease;
}
.site-header.is-scrolled{ -webkit-backdrop-filter:saturate(1.06) blur(14px); backdrop-filter:saturate(1.06) blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.28); }
.nav-inline .chip{ position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .8rem; border:1px solid var(--border); border-radius:999px; background:var(--surface-1); text-decoration:none; font-weight:700; }
.nav-inline .chip::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:linear-gradient(90deg, transparent, var(--brand), transparent); transform:scaleX(0); transform-origin:50% 50%; transition:transform .2s ease; }
.nav-inline .chip:hover::after{ transform:scaleX(1); }
.nav-inline .chip.is-active{ border-color: color-mix(in oklab, var(--border), var(--brand) 40%); box-shadow: 0 6px 16px color-mix(in oklab, var(--brand) 24%, transparent); }
.nav-inline .chip .ni{ width:16px; height:16px; opacity:.9; }

@keyframes header-in{ from{ transform:translateY(-8px); opacity:0 } to{ transform:none; opacity:1 } }

/* Neon bounce logo on home */
@keyframes neon-bounce{ 0%{ transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 color-mix(in oklab,var(--brand) 0%, transparent)); } 30%{ transform:translateY(-2px) scale(1.03); filter:drop-shadow(0 0 10px color-mix(in oklab,var(--brand) 55%, transparent)); } 60%{ transform:translateY(0) scale(1.01); filter:drop-shadow(0 0 6px color-mix(in oklab,var(--brand-2) 45%, transparent)); } 100%{ transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 color-mix(in oklab,var(--brand) 0%, transparent)); } }
body.home .brand-logo{ animation: neon-bounce 3.2s ease-in-out infinite; }

/* ===== Relief pack (subtil, dark & light) ===== */
/* Texture douce d'arrière-plan (désactivable en retirant ce bloc) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(900px 420px at 12% -8%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 60%),
    radial-gradient(720px 360px at 110% 8%, color-mix(in oklab, var(--brand-2) 5%, transparent), transparent 55%);
  opacity:.35; mix-blend-mode:soft-light;
}

/* Titres de section avec dégradé de marque + légère lueur */
.section h2{
  background: var(--g-brand);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow: 0 0 8px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* Cartes et boutons: hover/focus plus posé et premium */
@media (hover:hover){
  .card:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.36); }
}
.card:focus-within{ outline:0; box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 28%, transparent), var(--shadow-md); }
.btn, .chip{ transition-timing-function:cubic-bezier(.22,.8,.2,1); }

/* ==== Carousel (final rules) ==== */
/* Aligner les slides au début pour garantir l'accès aux extrémités */
.carousel__slide{ scroll-snap-align: start !important; }
.carousel__track{
  justify-content: flex-start !important;
  grid-auto-columns: 100% !important; /* 1 carte = 100% viewport */
  align-items: stretch; /* toutes les slides pleine hauteur */
}

/* Desktop: plusieurs cartes visibles (dots gardent 1:1) */
@media (min-width: 900px){
  .carousel__track{ grid-auto-columns: calc(50% - 12px) !important; }
}
@media (min-width: 1200px){
  .carousel__track{ grid-auto-columns: calc(33.333% - 14px) !important; }
}

/* Harmoniser la hauteur des cards dans le carousel */
.carousel__slide{ display:grid; }
.carousel__slide .project-card{ height:100%; display:grid; grid-template-rows:auto 1fr auto; }

/* --- À partir de 720px : on réactive le masque progressif premium ------- */
@media (min-width: 720px){
  .carousel__track{
    padding-inline: 0; /* on remet à 0, plusieurs cards visibles */
    -webkit-mask-image: linear-gradient(
      90deg, transparent, #000 24px,
      #000 calc(100% - 24px), transparent
    );
            mask-image: linear-gradient(
      90deg, transparent, #000 24px,
      #000 calc(100% - 24px), transparent
    );
  }
  .carousel__btn.prev{ margin-left: 0; }
  .carousel__btn.next{ margin-right: 0; }
}


/* CONTACT — CTA mobile centré + respiration */
@media (max-width: 991px){
  /* La rangée qui contient le bouton */
  .contact-v2 .actions--center{
    display:flex;
    justify-content:center;
    padding: 1rem 1rem 1.25rem;   /* un peu plus d’air autour du bouton */
  }

  /* Le bouton Cal/CTA dans la section contact */
  .contact-v2 .actions--center [data-booking-open],
  .contact-v2 .actions--center .btn.cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 100%;                  /* prend la ligne mais avec un max */
    max-width: 520px;             /* “respire” sur les côtés */
    margin: .35rem auto 0;        /* centre + espace haut */
    padding: .95rem 1.25rem;      /* hauteur confortable */
    border-radius: 999px;

    /* style premium cohérent avec le bouton flottant */
    background-image: var(--g-brand);
    color:#fff; font-weight:800; letter-spacing:.01em;
    border:0;
    box-shadow: 0 12px 26px color-mix(in oklab, var(--brand) 30%, transparent);
  }

  .contact-v2 .actions--center [data-booking-open]:hover,
  .contact-v2 .actions--center .btn.cta:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 30px color-mix(in oklab, var(--brand) 36%, transparent);
  }
}


/* Centrage & respiration du bouton CTA dans la section contact */
.contact-v2 .actions--center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1rem; /* un peu plus d’air autour */
}

.contact-v2 .btn.cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.9rem 1.6rem; /* plus large = meilleur équilibre visuel */
  min-width: clamp(200px, 60%, 320px); /* largeur responsive */
  border-radius: 999px;
  background: var(--g-brand) !important; /* forcer le dégradé bleu→vert */
  color: #fff !important;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.contact-v2 .btn.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px color-mix(in oklab, var(--brand) 36%, transparent);
}


/* ============ WORKS (Réalisations) — même UX que Certifications ============ */
.works-head{ text-align:left; margin-bottom:1.25rem; }
.works .h2{ font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin:0; }
.works .muted{ color:var(--muted); margin-top:.5rem; }

.works-viewport{ max-width:min(100vw,1100px); margin-inline:auto; overflow:hidden; }

/* Rail mobile = 1 carte par écran, scroll-snap; Desktop = grille fixe (3) */
.works-rail{
  list-style:none; margin:0; padding:0; display:grid;
  grid-auto-flow:column; grid-auto-columns:100%; gap:0;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* masquer la barre (comme certs) */
  scrollbar-width:none; -ms-overflow-style:none;
}
.works-rail::-webkit-scrollbar{ display:none; width:0; height:0; background:transparent; }

.works-rail > .works-item{ width:100%; scroll-snap-align:center; }
@media (min-width:900px){
  .works-viewport{ overflow:visible; }
  .works-rail{
    grid-auto-flow:row; grid-auto-columns:initial;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.25rem 1.5rem; overflow:visible; scroll-snap-type:none;
  }
  .works-rail > .works-item{ scroll-snap-align:unset; }
}

/* Dots (mobiles) */
.works-dots{ display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:.75rem; padding-bottom:.25rem; }
.works-dots button{
  -webkit-tap-highlight-color:transparent;
  width:8px; height:8px; border-radius:999px; border:0;
  background:color-mix(in oklab, var(--muted) 55%, transparent);
  opacity:.6; transform:scale(.9);
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.works-dots button:is(:hover,:focus-visible){ opacity:.85; transform:scale(1); outline:none; }
.works-dots button.is-active{ opacity:1; transform:scale(1.2); background:color-mix(in oklab, var(--brand) 60%, #fff 0%); }

@media (min-width:900px){ .works-dots{ display:none; } }

/* Gouttière mobile pour éviter que l’ombre “mange” le bord gauche */
@media (max-width: 899px){
  .works-rail{ padding-inline: 8px; }
}


/* Piste horizontale (UL) */
.carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(100%, 34rem);
  gap: clamp(12px, 2vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  list-style: none;     /* pas de puces */
  margin: 0;
  padding: .25rem 14px; /* petit gutter latéral sur mobile */
}

/* Chaque LI = un slide */
.carousel__slide{
  scroll-snap-align: start;
}

/* Piste horizontale (UL) */
.carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(100%, 34rem);
  gap: clamp(12px, 2vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  list-style: none;     /* pas de puces */
  margin: 0;
  padding: .25rem 14px; /* petit gutter latéral sur mobile */
}

/* Chaque LI = un slide */
.carousel__slide{
  scroll-snap-align: start;
}


/* --- Réalisations : 1 carte par slide, centrée ----- */
.carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(100%, 56rem);  /* 1 carte à la fois, largeur max confortable */
  justify-content: center;              /* centre la colonne (desktop) */
  gap: 1rem;
  padding-inline: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  /* pas de masque sur mobile pour ne pas rogner la carte */
  -webkit-mask-image: none;
          mask-image: none;

  /* on cache la barre de scroll mais on garde le swipe */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar{ display:none; }

.carousel__slide{ scroll-snap-align: center; }  /* <— clé pour centrer la carte visible */

/* Flèches cachées sur mobile, layout simplifié */
@media (max-width: 899px){
  .carousel{ grid-template-columns: 1fr; }
  .carousel__btn{ display:none !important; }
}

/* Bonus : sur les très grands écrans, garde une carte centrée et “posée” */
@media (min-width: 900px){
  .carousel{ grid-template-columns: auto 1fr auto; }  /* flèches ré-apparaissent */
  .carousel__track{
    padding-inline: 0;
    /* léger masque premium aux bords si tu veux (facultatif)
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    */
  }
}

/* Ombres allégées sur mobile pour éviter de masquer les bords */
@media (max-width: 599px){
  .card{ box-shadow: 0 4px 12px rgba(0,0,0,.18); }
}


/* =========================  Blog / Posts  ========================= */
.muted{ color: var(--muted); }
.post-list{ list-style:none; padding:0; margin:1rem 0; display:grid; gap:1rem; }
.post-item .card{ padding: clamp(1rem, 1.2vw, 1.4rem); }
.post-item h3{ font-size: var(--step-1); }
.post-item a{ text-decoration: var(--link-underline); text-underline-offset: var(--link-offset); }
.post-item small{ color: var(--muted); }

/* Article layout */
.post-hero{
  position: relative;
  display:grid; grid-template-columns: 1fr auto;
  gap: clamp(12px, 1.8vw, 18px);
  background: linear-gradient(135deg, color-mix(in oklab, var(--surface-1) 96%, var(--brand) 4%), var(--surface-1));
  border:1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-md);
  overflow:hidden;
  padding: clamp(.9rem, 1.3vw, 1.4rem) 1rem;
}
/* Accent brand bar */
.post-hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--g-brand); }
@media (max-width:900px){ .post-hero{ grid-template-columns: 1fr; } .post-hero__media{ order:-1; } }
.post-hero__inner{ max-width: min(820px, 100%); margin-inline:auto; }
.post-hero__media{ align-self:center; justify-self:center; opacity:.95; }
.post-hero__media img{ width:min(120px, 22vw); aspect-ratio:1; object-fit:cover; height:auto; border-radius: var(--radius-2); box-shadow: var(--shadow-sm); }
@media (max-width: 1199px){ .post-hero__media{ display:none; } }
.breadcrumbs{ font-size: .95rem; color: var(--muted); display:flex; gap:.5rem; align-items:center; margin:.25rem 0 .5rem 0; }
.post-title{ font-size: var(--step-2); margin:.15rem 0 .15rem; letter-spacing:.2px; line-height:1.18; }
@media (min-width:1100px){ .post-title{ font-size: var(--step-3); } }
.post-desc{ margin:.25rem 0 .5rem; }
.post-meta{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin:0 0 .55rem; }
.post-meta .dot{ opacity:.6; }
.post-meta .icon{ display:inline-flex; align-items:center; justify-content:center; color: color-mix(in oklab, var(--muted) 92%, var(--brand) 8%); }
.post-meta .sep{ opacity:.6; margin:0 .2rem; }
.post-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.25rem 0 .25rem; }
.post-tags .chip{ background: var(--surface-2); border:1px solid var(--border); box-shadow: var(--shadow-sm); }
.back-blog{ margin:.35rem 0 0; font-size:.95rem; }
.link-muted{ color: var(--muted); }

.post-body{
  max-width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(1.2rem, 2vw, 2rem) 1rem;
}
.post-body h2{ font-size: var(--step-2); margin-top:1.6rem; margin-bottom:.6rem; }
.post-body h3{ font-size: var(--step-1); margin-top:1.2rem; margin-bottom:.5rem; }
.post-body p{ margin:.6rem 0 1rem; }
.post-body ul{ padding-left:1.1rem; margin:.6rem 0 1rem; }
.post-body li{ margin:.25rem 0; }
.post-body blockquote{
  margin: 1rem 0; padding: .75rem 1rem; border-left:4px solid color-mix(in oklab, var(--brand) 60%, #fff 0%);
  background: color-mix(in oklab, var(--surface-1) 84%, var(--brand) 16%);
  border-radius: .5rem;
}

.post-nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; max-width:min(820px,100%); margin:0 auto 2rem; padding:0 1rem; }
.btn.ghost{ background: transparent; border:1px solid var(--border); }


/* Blog carousel cards (home) */
.blog-card .card-meta{
  margin-bottom: clamp(.6rem, 1vw, 1rem);
}
.blog-card .card-actions{
  margin-top: clamp(.65rem, 1.2vw, 1.05rem);
}
/* Blog index: grid of premium post cards */
.posts-grid{ display:grid; gap: clamp(.9rem, 1.4vw, 1.2rem); grid-template-columns: 1fr; }
@media (min-width: 880px){ .posts-grid{ grid-template-columns: 1fr 1fr; } }
.post-card{ position:relative; display:grid; grid-template-columns: 92px 1fr; gap: .9rem; align-items:start; }
.post-card .thumb{ width:92px; height:92px; border-radius: .9rem; overflow:hidden; background: var(--surface-1); border:1px solid var(--border); box-shadow: var(--shadow-sm); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .pc-title{ margin:0 0 .2rem; font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); }
.post-card .pc-excerpt{ margin:.1rem 0 .45rem; }
.post-card .pc-meta{ font-size:.95rem; margin-bottom:.35rem; }
.post-card .pc-tags{ display:flex; flex-wrap: wrap; gap:.35rem; }
.post-card .chip{ background: var(--surface-2); border:1px solid var(--border); }
.post-card .stretched{ position:absolute; inset:0; border-radius: inherit; z-index:5; }
@media (hover:hover){ .post-card:hover{ transform:translateY(-4px); box-shadow: var(--shadow-lg); } }