/* ==========================================================================
   Baroni Digital Services — feuille de styles partagée
   --------------------------------------------------------------------------
   Une seule source de vérité pour la D.A. : nuit « Minuit », dégradé
   indigo → violet → cyan, Space Grotesk (titres) + Inter (texte).
   Ordre : polices · tokens · base · mise en page · composants · header ·
   footer · mouvement.
   ========================================================================== */

/* ---------- Polices auto-hébergées (variables, un fichier par famille) ---------- */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('../../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  /* --- Couleurs : fonds et surfaces (du plus profond au plus élevé) --- */
  --bg:        #08070f;   /* Minuit */
  --surface-1: #12101f;   /* cartes courantes */
  --surface-2: #16142a;   /* bloc mis en avant */
  --surface-3: #1c1934;   /* survol, champs actifs */
  --line:        rgba(226,224,255,.09);
  --line-strong: rgba(226,224,255,.16);

  /* --- Texte (contrastes mesurés sur --bg : 17:1 / 7,1:1 / 5,6:1) --- */
  --text:        #f1efff;
  --text-muted:  #9a96b8;
  --text-subtle: #8783a8;

  /* --- Marque --- */
  --indigo: #4f46e5;
  --violet: #8b5cf6;
  --cyan:   #22d3ee;
  --accent-indigo: #6366f1;   /* versions pleines, lisibles en petit */
  --accent-violet: #a78bfa;
  --accent-cyan:   #22d3ee;
  --grad: linear-gradient(120deg, var(--indigo) 0%, var(--violet) 52%, var(--cyan) 100%);
  /* Variante bouton : départ éclairci pour que le texte sombre tienne 4,5:1
     sur toute la largeur (#4f46e5 ne donnait que 3,2:1). */
  --grad-btn: linear-gradient(120deg, #6b6cf3 0%, var(--violet) 52%, var(--cyan) 100%);
  --on-grad: #08070f;
  --danger: #fca5a5;

  /* --- Typographie --- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, sans-serif;
  --fs-xs:  .75rem;      /* 12 */
  --fs-sm:  .875rem;     /* 14 */
  --fs-md:  1rem;        /* 16 */
  --fs-lg:  1.125rem;    /* 18 */
  --fs-xl:  1.3125rem;   /* 21 */
  --fs-2xl: 1.625rem;    /* 26 */
  --fs-3xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.125rem);   /* 28 → 34 */
  --fs-4xl: clamp(2.125rem, 1.4rem + 2.6vw, 3rem);       /* 34 → 48 */
  --fs-5xl: clamp(2.5rem, 1.5rem + 3.6vw, 4rem);         /* 40 → 64 */
  --fs-6xl: clamp(2.75rem, 1.1rem + 5.8vw, 5.5rem);      /* 44 → 88 */
  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.6;
  --track-tight: -.04em;
  --track-snug:  -.02em;
  --track-caps:   .2em;

  /* --- Espacements (base 4) --- */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:20px;  --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  --section: clamp(80px, 10vw, 160px);
  --gutter:  clamp(20px, 4vw, 40px);
  --wrap:    1200px;
  --header-h: 72px;

  /* --- Rayons --- */
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* --- Ombres (4 niveaux + lueur de marque) --- */
  --e-1: 0 1px 2px rgba(0,0,0,.35);
  --e-2: 0 8px 20px -10px rgba(0,0,0,.55);
  --e-3: 0 26px 60px -30px rgba(0,0,0,.75);
  --e-4: 0 50px 100px -40px rgba(0,0,0,.9);
  --glow:    0 14px 34px -14px rgba(139,92,246,.55);
  --glow-hi: 0 20px 44px -14px rgba(139,92,246,.7);

  /* --- Mouvement --- */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1:150ms; --dur-2:250ms; --dur-3:400ms; --dur-4:700ms;

  /* --- Plans --- */
  --z-bg:0; --z-content:1; --z-header:50; --z-menu:60; --z-skip:70;

  color-scheme: dark;
}

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

html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth;              /* clics d'ancre uniquement, la molette reste native */
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-color:#2b2842 var(--bg); scrollbar-width:thin;
}

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* Grain très léger sur toute la page : donne de la matière au noir */
body::after{
  content:''; position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.035;
  background-image:url("../img/grain.png"); /* tuile de bruit en PNG : bien moins coûteuse à afficher qu'un filtre SVG */
}

h1, h2, h3, h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:var(--lh-snug);
  letter-spacing:var(--track-snug);
  text-wrap:balance;
}
p{ text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }
img, svg, video{ display:block; max-width:100%; }
img{ height:auto; }
button, input, textarea, select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }

::selection{ background:rgba(139,92,246,.35); color:var(--text); }

/* Focus clavier visible partout, invisible à la souris */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip-link{
  position:fixed; top:12px; left:12px; z-index:var(--z-skip);
  transform:translateY(-200%);
  background:var(--surface-2); border:1px solid var(--line-strong);
  font-size:var(--fs-sm); font-weight:600;
  padding:12px 18px; border-radius:var(--r-pill);
  box-shadow:var(--e-3);
  transition:transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible{ transform:none; }

/* ==========================================================================
   MISE EN PAGE
   ========================================================================== */
.wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ position:relative; z-index:var(--z-content); padding-block:var(--section); }

.section-head{ max-width:44rem; margin-bottom:clamp(40px, 5vw, 72px); }
.section-head h2{ font-size:var(--fs-5xl); line-height:1.06; letter-spacing:var(--track-tight); }
.section-head > p:not(.eyebrow){ margin-top:var(--s-5); font-size:var(--fs-lg); color:var(--text-muted); max-width:52ch; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center p{ margin-inline:auto; }

/* Sur-titre : capitales espacées, filet cyan (signature éditoriale) */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s-3);
  font-size:var(--fs-xs); font-weight:600;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--accent-cyan);
}
.eyebrow::before{ content:''; width:30px; height:1px; background:currentColor; opacity:.7; }
.section-head .eyebrow{ margin-bottom:var(--s-5); }

.lead{ font-size:clamp(1.0625rem, 1rem + .4vw, 1.25rem); color:var(--text-muted); line-height:1.6; }

.gradient-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ==========================================================================
   COMPOSANTS
   ========================================================================== */

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:48px; padding:0 26px;
  border-radius:var(--r-pill);
  font-family:var(--font-text); font-size:var(--fs-md); font-weight:600; line-height:1;
  white-space:nowrap;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
             background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out);
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn:active{ transform:scale(.98); }

.btn-primary{ background:var(--grad-btn); color:var(--on-grad); box-shadow:var(--glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--glow-hi); }
.btn-primary:disabled{ cursor:progress; opacity:.6; transform:none; box-shadow:none; }

.btn-secondary{ background:var(--surface-1); border:1px solid var(--line-strong); color:var(--text); }
.btn-secondary:hover{ background:var(--surface-3); border-color:rgba(226,224,255,.28); transform:translateY(-2px); }

.btn-sm{ min-height:40px; padding:0 18px; font-size:var(--fs-sm); }

/* Lien texte avec flèche qui glisse au survol */
.link-arrow{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-weight:600; color:var(--text);
  border-bottom:1px solid var(--line-strong); padding-block:6px;
  transition:color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.link-arrow .arrow{ transition:transform var(--dur-2) var(--ease-out); }
.link-arrow:hover{ color:var(--accent-cyan); border-color:var(--accent-cyan); }
.link-arrow:hover .arrow{ transform:translateX(4px); }

/* ---------- Logo (monogramme B au trait) ---------- */
.logo{ display:inline-flex; align-items:center; gap:var(--s-3); }
.logo-mark{ width:36px; height:36px; flex:none; }
.logo-word{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); line-height:1.15; letter-spacing:.005em; }
.logo-word small{
  display:block; font-family:var(--font-text); font-weight:400; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); margin-top:2px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out),
             backdrop-filter var(--dur-3) var(--ease-out);
}
/* Transparent sur le hero, verre dépoli dès qu'on a défilé */
.site-header.is-scrolled{
  background:rgba(8,7,15,.78);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.site-header .wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); }

.nav{ display:flex; align-items:center; gap:clamp(20px, 2.6vw, 36px); }
.nav a{
  position:relative; padding-block:8px;
  font-size:var(--fs-sm); color:var(--text-muted);
  transition:color var(--dur-2) var(--ease-out);
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:1.5px;
  background:var(--grad); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-3) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="true"]{ color:var(--text); }
.nav a:hover::after, .nav a[aria-current="true"]::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:var(--s-5); }
.header-phone{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-sm); font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums;
  transition:color var(--dur-2) var(--ease-out);
}
.header-phone svg{ width:16px; height:16px; color:var(--accent-cyan); }
.header-phone:hover{ color:var(--accent-cyan); }

/* ---------- Burger + menu mobile plein écran ---------- */
.burger{ display:none; width:48px; height:48px; margin-right:-12px; position:relative; }
.burger span{
  position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:var(--text);
  transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease;
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

.mobile-menu{ display:none; }

@media (max-width:960px){
  .nav, .header-actions .header-phone, .header-actions .btn{ display:none; }
  .burger{ display:block; }

  .mobile-menu{
    display:flex; flex-direction:column;
    position:fixed; inset:var(--header-h) 0 0 0; z-index:var(--z-menu);
    padding:var(--s-8) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom));
    background:rgba(8,7,15,.96);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    overflow-y:auto;
    opacity:0; visibility:hidden;
    transition:opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }
  .mobile-menu.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
  .mobile-menu nav{ display:flex; flex-direction:column; }
  .mobile-menu nav a{
    font-family:var(--font-display); font-weight:600; font-size:var(--fs-3xl); letter-spacing:var(--track-snug);
    padding-block:var(--s-3); border-bottom:1px solid var(--line);
    transform:translateY(12px); opacity:0;
    transition:transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  }
  .mobile-menu.is-open nav a{ transform:none; opacity:1; }
  .mobile-menu.is-open nav a:nth-child(2){ transition-delay:40ms; }
  .mobile-menu.is-open nav a:nth-child(3){ transition-delay:80ms; }
  .mobile-menu.is-open nav a:nth-child(4){ transition-delay:120ms; }
  .mobile-menu.is-open nav a:nth-child(5){ transition-delay:160ms; }
  .mobile-menu-actions{ margin-top:auto; padding-top:var(--s-8); display:grid; gap:var(--s-3); }
  .mobile-menu-actions .btn{ width:100%; }

  body.menu-open{ overflow:hidden; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  position:relative; z-index:var(--z-content);
  border-top:1px solid var(--line);
  padding-block:clamp(56px, 7vw, 96px) var(--s-8);
  font-size:var(--fs-sm);
  color:var(--text-muted);
}
.footer-grid{
  display:grid; gap:var(--s-10);
  grid-template-columns:1.4fr 1fr 1fr;
}
.footer-brand p{ margin-top:var(--s-5); max-width:34ch; }
.footer-col h2{
  font-family:var(--font-text); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:var(--track-caps); text-transform:uppercase; color:var(--text-subtle);
  margin-bottom:var(--s-4);
}
.footer-col li + li{ margin-top:var(--s-1); }
.footer-col a{ display:inline-block; padding-block:6px; transition:color var(--dur-2) var(--ease-out); }
.footer-col a:hover{ color:var(--accent-cyan); }
.footer-bottom{
  margin-top:clamp(40px, 6vw, 72px); padding-top:var(--s-6);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-3);
  font-size:var(--fs-xs); color:var(--text-subtle);
}

@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

/* ---------- Composants partagés : cadre navigateur, étiquettes, listes cochées ---------- */
/* Cadre navigateur réutilisable : la capture longue défile au survol */
.browser{
  overflow:hidden; border-radius:var(--r-md); background:#fff;
  border:1px solid var(--line-strong); box-shadow:var(--e-3);
}
.browser-top{
  display:flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  background:#f1f1f4; border-bottom:1px solid #e2e2e8;
}
.browser-top i{ width:9px; height:9px; border-radius:50%; background:#ff6159; flex:none; }
.browser-top i:nth-child(2){ background:#ffbd2e; }
.browser-top i:nth-child(3){ background:#28c941; }
.browser-top span{
  flex:1; max-width:55%; margin-inline:auto; padding:3px 12px; border-radius:99px; background:#fff;
  font-size:11px; color:#55546a; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser-view{
  position:relative; aspect-ratio:16 / 10; overflow:hidden;
  container-type:size; /* 100cqh = hauteur visible, pour s'arrêter en bas de la capture */
}
.browser-view img{
  display:block; width:100%; height:auto;
  transition:transform 1.4s var(--ease-in-out); /* retour en haut, assez vif */
}

@keyframes shot-scroll{ to{ transform:translateY(calc(-100% + 100cqh)); } }

/* Étiquettes : vrai client en cyan, site concept en neutre */
.tag{
  display:inline-flex; align-items:center; gap:6px; width:fit-content;
  padding:4px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:500;
}
.tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; }
.tag-client{ border-color:rgba(34,211,238,.4); color:var(--accent-cyan); background:rgba(34,211,238,.06); }

.checks{ display:grid; gap:var(--s-2); }
.checks li{ position:relative; padding-left:26px; }
.checks li::before{
  content:''; position:absolute; left:0; top:.35em; width:16px; height:16px;
  background:var(--accent-cyan);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ==========================================================================
   MOUVEMENT
   Apparitions au scroll : seulement si le JS tourne (classe .js posée dans
   le <head>) et si le mouvement est permis. Filet de sécurité côté JS.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{
    opacity:0; transform:translateY(24px);
    transition:opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
    transition-delay:calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].is-in{ opacity:1; transform:none; }

  /* Le B du header se dessine au chargement (path avec pathLength="1") */
  .js .site-header .logo-mark path{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:logo-draw 1.6s var(--ease-in-out) .1s forwards;
  }
}
@keyframes logo-draw{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0s !important;
  }
}