@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
    body { background: #0a0a0b; }
    ::selection { background: #a855f7; color: #fff; }

    .text-stroke { -webkit-text-stroke: 1px rgba(255,255,255,.07); color: transparent; }

    .grad-text { background-image: linear-gradient(90deg,#a855f7,#ec4899 45%,#f97316); }
    .grad-purple { background-image: linear-gradient(90deg,#a855f7,#ec4899); }
    .grad-warm { background-image: linear-gradient(90deg,#ec4899,#f97316); }
    .grad-text, .grad-pink, .grad-purple, .grad-warm { -webkit-background-clip: text; background-clip: text; color: transparent; }
    .grad-pink { background-image: linear-gradient(90deg,#f472b6,#ec4899); }

    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .animate-marquee { animation: marquee 24s linear infinite; }

    @keyframes blobfloat {
      0%   { transform: translate(0,0) scale(1); }
      50%  { transform: translate(30px,-20px) scale(1.15); }
      100% { transform: translate(-20px,25px) scale(.95); }
    }
    .blob { animation: blobfloat 12s ease-in-out infinite alternate; }

    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    .navlink { transition: all .25s ease; }
    .navlink.active { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

    .card-hover { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
    .card-hover:hover { transform: translateY(-4px); border-color: rgba(168,85,247,.45); box-shadow: 0 10px 40px -12px rgba(168,85,247,.25); }

    select option { background: #101014; color: #e4e4e7; }


    /* ========== ARRIÈRE-PLAN NÉON SUBTIL ========== */
.blob {
  position: absolute;
  pointer-events: none;
  /* On ne "will-change" que transform : mettre 'filter' ici déclenche
     l'artefact rectangulaire du flou sur Safari iOS. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  mix-blend-mode: screen;
  filter: blur(90px) brightness(1.2);
  opacity: 0.3;               /* visible mais discret */
  animation: blobfloat 30s ease-in-out infinite alternate;
  transform-origin: center;
}

.blob-1 {
  width: 45vw;
  height: 45vw;
  top: -15vw;
  left: -10vw;
  background: radial-gradient(circle at 30% 40%, #a855f7 0%, rgba(168,85,247,0) 70%);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation-duration: 32s;
}

.blob-2 {
  width: 40vw;
  height: 40vw;
  bottom: -25vw;          /* bas */
  left: -10vw;            /* gauche */
  background: radial-gradient(circle at 60% 35%, #ec4899 0%, rgba(236,72,153,0) 70%);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation-duration: 38s;
  animation-delay: -5s;
  animation-direction: alternate-reverse;
}

.blob-3 {
  width: 35vw;
  height: 35vw;
  bottom: -12vw;
  right: -12vw;
  background: radial-gradient(circle at 0% 70%, #daa078 0%, rgba(249,115,22,0) 70%);
  border-radius: 30% 0% 70% 30% / 40% 70% 30% 60%;
  animation-duration: 36s;
  animation-delay: -10s;
  opacity: 0.35;   /* léger */
}

.blob-4 {
  width: 30vw;
  height: 20vw;
  top: 5vh;
  left: 70vw;
  background: radial-gradient(circle at 70% 30%, #c084fc 0%, rgba(192,132,252,0) 70%);
  border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
  animation-duration: 40s;
  animation-delay: -15s;
  animation-direction: alternate-reverse;
}

/* Animation lente */
@keyframes blobfloat {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  25%  { transform: translate(20px,-15px) scale(1.05) rotate(2deg); }
  50%  { transform: translate(-15px,10px) scale(0.96) rotate(-1deg); }
  75%  { transform: translate(10px,18px) scale(1.02) rotate(1deg); }
  100% { transform: translate(-8px,-12px) scale(1.03) rotate(-0.5deg); }
}

/* ===== Mobile : flou allégé + animation simplifiée =====
   Sur mobile, un flou de 90px anime tres mal (saccades) et provoque des
   artefacts rectangulaires. On reduit le flou, on supprime scale/rotate
   (qui recalculent le flou a chaque frame) et on retire un blob. */
/* Barre de navigation du haut : fond plus transparent (effet verre depoli
   grace au backdrop-blur). S'applique sur web ET mobile. */
.topnav { background-color: rgba(0, 0, 0, 0.4); }

/* Fleche des encadres "Ex." : taille normale et alignee (avant : text-6xl
   + scale-150 la rendait enorme et deformee). */
.ex-arrow { font-size: 1.5rem; line-height: 1; vertical-align: middle; font-weight: 700; }

/* ===== Ajustements desktop (web) ===== */
@media (min-width: 769px) {
  /* Moins d'espace vertical entre les sections (etait 7rem haut/bas). */
  .py-28 { padding-top: 4rem; padding-bottom: 4rem; }
  /* Numeros 01/02/03 descendus pour ne pas etre coupes en haut par la carte. */
  .card-num { top: 0.5rem; }
}

/* Section "Pour qui" : 6 cartes en 3+3 au lieu de 4+2 sur grand ecran. */
@media (min-width: 1024px) {
  .usecase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  /* Moins d'espace vertical entre les sections sur mobile (etait 7rem haut/bas)
     -> gaps uniformes et moins de vide. */
  .py-28 { padding-top: 3rem; padding-bottom: 3rem; }

  .blob {
    /* AUCUN filter: blur() sur mobile -> c'est lui qui cree le rectangle
       violet sur Safari iOS. Le degrade radial suffit a rendre les taches
       douces, sans artefact et sans cout GPU. */
    filter: none;
    opacity: 0.18;
    mix-blend-mode: normal;      /* le blend-mode aggrave les artefacts mobiles */
    animation-name: blobfloat-mobile;
  }
  .blob-3, .blob-4 { display: none; }   /* on garde 2 taches douces, plus fluide */

  /* Glows du hero (grands rectangles tournes + flou 90px + clip-path) :
     masques sur mobile, c'est EUX qui creaient le rectangle violet sur iOS. */
  .hero-glow { display: none; }

  /* Numeros 01/02/03 des cartes : reduits + repositionnes pour ne pas etre
     coupes par le bord droit de la carte (overflow-hidden) sur mobile. */
  .card-num { font-size: 4.25rem; right: 1.25rem; top: -0.15rem; }

  /* Plus d'air entre le titre "d'impressions." et la 1re carte (sinon le
     grand titre italique chevauche le bord de la carte sur mobile). */
  .steps-grid { margin-top: 2.75rem; }

  /* Cadre decoratif fuchsia (74rem de large) : plus large que l'ecran et
     son bord haut chevauchait le titre -> masque sur mobile. */
  .clip-frame { display: none; }
}

/* Animation mobile : translation douce uniquement (GPU, pas de re-flou). */
@keyframes blobfloat-mobile {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(14px, -12px); }
  100% { transform: translate(-10px, 10px); }
}

/* Accessibilite : coupe l'animation si l'utilisateur a demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

/* Contenu au-dessus */
header, main, section, footer {
  position: relative;
  z-index: 1;
}

/* ========== ANIMATION GRADIENT LIGNE 2 ========== */
#hero-line-2 {
  background-image: linear-gradient(90deg, #a855f7, #ec4899, #f97316, #a855f7);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientSlide 6s linear infinite;
}

@keyframes gradientSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ========== GLITCH CUT ========== */
#hero-title.glitching span {
  animation: glitch-cut 0.35s steps(2, jump-none) infinite;
}

@keyframes glitch-cut {
  0% {
    transform: skew(0deg) translate(0);
    text-shadow: 2px 0 #a855f7, -2px 0 #f97316;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  20% {
    transform: skew(2deg) translate(-4px, 0);
    text-shadow: -3px 0 #a855f7, 3px 0 #f97316;
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%, 0 40%, 100% 40%, 100% 60%, 0 60%, 0 80%, 100% 80%, 100% 100%, 0 100%);
  }
  40% {
    transform: skew(-1deg) translate(3px, 0);
    text-shadow: 2px 0 #a855f7, -2px 0 #f97316;
    clip-path: polygon(0 5%, 100% 5%, 100% 25%, 0 20%, 0 45%, 100% 45%, 100% 65%, 0 65%, 0 85%, 100% 85%, 100% 100%, 0 100%);
  }
  60% {
    transform: skew(1deg) translate(-2px, 0);
    text-shadow: -2px 0 #a855f7, 2px 0 #f97316;
    clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 70%, 100% 70%, 100% 90%, 0 90%);
  }
  80% {
    transform: skew(0deg) translate(1px, 0);
    text-shadow: 2px 0 #a855f7, -2px 0 #f97316;
    clip-path: polygon(0 0, 100% 0, 100% 15%, 0 25%, 0 35%, 100% 35%, 100% 55%, 0 55%, 0 75%, 100% 75%, 100% 100%, 0 100%);
  }
  100% {
    transform: skew(0deg) translate(0);
    text-shadow: 0 0 0 transparent;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}


  .checkbox-arrondie {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    border-radius: 6px; /* Mets 50% ici si tu veux un cercle parfait */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.5);
    appearance: none;
    outline: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }

  /* Quand c'est coché : fond violet + bordure transparente */
  .checkbox-arrondie:checked {
    border-color: transparent;
    background: #a855f7; /* La même couleur violette que ton bouton */
  }

  /* La petite coche blanche à l'intérieur */
  .checkbox-arrondie:checked::after {
    content: '';
    display: block;
    width: 9px;
    height: 5px;
    margin: 3px auto 0;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg);
  }

/* ============================================================
   NOUVELLE IDENTITÉ VISUELLE — deux tons + saumon (v11)
   Repeint le site sans toucher au contenu : zone claire (nav + hero)
   puis zone sombre, accent saumon, typo Archivo.
   ============================================================ */
:root{
  --paper:#eae8e3; --card2:#fbfaf7; --nk:#141310; --nk-2:#3d3a34; --nmuted:#8f8b82; --nline:#dbd8d1;
  --dark:#0c0c0b; --dline:#262421; --cream:#f2efe9; --dmuted:#8b877f; --acc:#e7a99c; --acc-2:#dd9082;
  --fd:"Archivo","Inter",sans-serif;
}

/* ---- Base : canvas sombre (la zone du bas) ---- */
html{ scroll-padding-top:96px; }
body{ background:#0c0c0b !important; color:#d7d3ca; }
::selection{ background:var(--acc); color:#1a1210; }

/* ---- Typo display -> Archivo (droit, premium) ---- */
.font-display{ font-family:var(--fd) !important; font-style:normal !important; font-weight:800 !important; letter-spacing:-.02em !important; }

/* ---- Dégradés de texte -> saumon plein ---- */
.grad-text, .grad-pink, .grad-purple, .grad-warm, #hero-line-2{
  background:none !important; background-image:none !important;
  -webkit-text-fill-color:var(--acc-2) !important; color:var(--acc-2) !important; animation:none !important;
}

/* ---- Accents violet / fuchsia / orange -> saumon ---- */
.text-purple-100,.text-purple-200,.text-purple-300,.text-purple-400,.text-purple-500,
.text-fuchsia-300,.text-fuchsia-400,.text-orange-400,.text-orange-500{ color:var(--acc-2) !important; }

/* ---- Dégradés (boutons, logo, marquee) -> saumon (via substring de classe) ---- */
[class*="from-purple"]{ --tw-gradient-from:var(--acc) var(--tw-gradient-from-position) !important; --tw-gradient-to:rgb(231 169 156 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important; }
[class*="from-orange"],[class*="from-fuchsia"],[class*="from-white"]{ /* garde from-white tel quel */ }
[class*="via-fuchsia"],[class*="via-pink"]{ --tw-gradient-stops:var(--tw-gradient-from), var(--acc) var(--tw-gradient-via-position,50%), var(--tw-gradient-to) !important; }
[class*="to-pink"],[class*="to-orange"],[class*="to-amber"],[class*="to-violet"]{ --tw-gradient-to:var(--acc-2) var(--tw-gradient-to-position) !important; }

/* ---- Cartes sombres ---- */
.bg-card{ background-color:#131211 !important; }

/* ---- Bordures / puces violettes -> saumon discret ---- */
.border-purple-500\/20,.border-purple-500\/30,.border-purple-500\/50,.border-purple-500\/60,.border-fuchsia-400\/20{ border-color:rgba(231,169,156,.42) !important; }
.bg-purple-500\/10{ background-color:rgba(231,169,156,.12) !important; }
.card-hover:hover{ border-color:rgba(231,169,156,.5) !important; box-shadow:0 12px 40px -14px rgba(231,169,156,.25) !important; }
input:focus, textarea:focus, select:focus{ border-color:var(--acc-2) !important; }

/* ---- Checkbox saumon ---- */
.checkbox-arrondie:checked{ background:var(--acc) !important; }
.checkbox-arrondie:checked::after{ border-color:#1a1210 !important; }

/* ---- Blobs de fond -> saumon très doux ---- */
.blob-1{ background:radial-gradient(circle at 30% 40%, rgba(231,169,156,.55) 0%, rgba(231,169,156,0) 70%) !important; }
.blob-2{ background:radial-gradient(circle at 60% 35%, rgba(221,144,130,.45) 0%, rgba(221,144,130,0) 70%) !important; }
.blob-3{ background:radial-gradient(circle at 0% 70%, rgba(231,169,156,.4) 0%, rgba(231,169,156,0) 70%) !important; }
.blob-4{ background:radial-gradient(circle at 70% 30%, rgba(221,144,130,.4) 0%, rgba(221,144,130,0) 70%) !important; }

/* ============ NAV : barre claire ============ */
.topnav{ background-color:rgba(250,249,246,.88) !important; border-color:var(--nline) !important; backdrop-filter:blur(12px); }
.topnav a[href="#"] .text-white{ color:var(--nk) !important; }           /* logo */
.topnav a[data-spy]{ color:var(--nk-2) !important; }
.topnav a[data-spy]:hover{ color:#fff !important; }                       /* survol sur pilule encre */
#nav-pill{ background:var(--nk) !important; opacity:1; }
#nav-pill-color{ opacity:0 !important; }
#mobile-menu-button{ color:var(--nk) !important; border-color:var(--nline) !important; background:rgba(20,19,16,.05) !important; }

/* ============ HERO : zone claire (papier) ============ */
#hero{ background:var(--paper); color:var(--nk); }
.hero-glow{ background:none !important; }
#hero-line-1, #hero .text-zinc-100{ color:var(--nk) !important; }
#hero .text-zinc-400, #hero .text-zinc-300{ color:#5c584f !important; }
#hero .text-purple-400, #hero .text-orange-500, #hero .grad-pink{ color:var(--acc-2) !important; }
#hero .text-stroke{ -webkit-text-stroke:1px rgba(221,144,130,.22) !important; }
/* CTA secondaire "Comprendre le clipping" */
#hero a[href="#le-clipping"]{ border-color:var(--nk) !important; background:transparent !important; color:var(--nk) !important; }
/* Cartes de stats du hero -> claires */
#hero .bg-white\/5{ background:var(--card2) !important; border-color:var(--nline) !important; }
#hero .divide-white\/10 > *{ border-color:var(--nline) !important; }
#hero .text-zinc-400{ color:var(--nmuted) !important; }

/* ---- Marquee : bandeau saumon, texte encre ---- */
#hero .animate-marquee, #hero .animate-marquee *{ color:#1a1210 !important; }
#hero .animate-marquee [class*="border-"]{ border-color:rgba(26,18,16,.35) !important; }
#hero .-rotate-2 > div{ box-shadow:0 10px 34px -8px rgba(221,144,130,.5) !important; }

/* ---- Cadre déco fuchsia du "clipping" -> saumon discret ---- */
.clip-frame{ border-color:rgba(231,169,156,.18) !important; background:rgba(231,169,156,.03) !important; box-shadow:0 0 120px rgba(231,169,156,.1) !important; }

/* Halos violets résiduels -> saumon (CTA hero, carte devis, boutons) */
#hero a[href="#devis"]{ box-shadow:0 8px 26px -6px rgba(221,144,130,.45) !important; }
#devis .shadow-\[0_0_90px_-15px_rgba\(168\,85\,247\,\.55\)\],
[class*="shadow-"][class*="rgba(168"]{ box-shadow:0 0 70px -18px rgba(221,144,130,.4) !important; }

/* ============================================================
   TYPO — calage exact sur l'app (Archivo serré, interlignes tassés)
   ============================================================ */
/* Display global : tracking négatif marqué comme sur l'app */
.font-display{ font-weight:800 !important; letter-spacing:-.03em !important; }

/* Grands titres (hero + sections) : plus serrés, interligne tassé */
h1.font-display, h2.font-display,
#hero h1, #hero-line-1, #hero-line-2{
  letter-spacing:-.04em !important;
  line-height:.9 !important;
}
/* Hero : le bloc le plus dense (comme "VOS / CLIPS") */
#hero h1, #hero-line-1, #hero-line-2{
  letter-spacing:-.045em !important;
  line-height:.86 !important;
}
/* Petits libellés display (nav, cartes) : tracking neutre, pas tassé */
.topnav .font-display, .card-num,
a[data-spy], .mobile-menu-link{
  letter-spacing:-.01em !important;
  line-height:1.1 !important;
}
/* Numéros de cartes 01/02/03 : très serrés comme sur l'app */
.card-num{ letter-spacing:-.05em !important; }

/* ============================================================
   TYPO v13 — display plus fin (bold 700) pour matcher la réf exactement
   ============================================================ */
.font-display{ font-weight:700 !important; }
h1.font-display, h2.font-display, #hero h1, #hero-line-1, #hero-line-2{ font-weight:700 !important; }
.topnav a[href="#"] .font-display, .topnav a[href="#"] span{ font-weight:700 !important; }

/* ============================================================
   TYPO v14 — calage EXACT sur l'app Monitor (mêmes valeurs CSS)
   ============================================================ */
.font-display{ font-weight:800 !important; letter-spacing:-.02em !important; }
/* Hero = .mast h1 de l'app : 800 / -.035em / line-height .88 */
#hero h1, #hero-line-1, #hero-line-2{ font-weight:800 !important; letter-spacing:-.035em !important; line-height:.88 !important; }
/* Titres de sections = .crow .name de l'app : 800 / -.02em / .98 */
h1.font-display, h2.font-display{ font-weight:800 !important; letter-spacing:-.02em !important; line-height:.98 !important; }
/* Mot fantôme = .mast .ghost : 800 / -.03em */
#hero .text-stroke{ font-weight:800 !important; letter-spacing:-.03em !important; }
/* Petits libellés display */
.topnav .font-display, a[data-spy], .mobile-menu-link, .card-num{ font-weight:800 !important; letter-spacing:-.01em !important; }

/* ============================================================
   TYPO v15 — display FIN & éditorial (comme la réf), hero aligné à gauche
   ============================================================ */
.font-display{ font-weight:600 !important; letter-spacing:-.03em !important; }
h1.font-display, h2.font-display, #hero h1, #hero-line-1, #hero-line-2{
  font-weight:600 !important; letter-spacing:-.035em !important; line-height:.9 !important;
}
#hero .text-stroke{ font-weight:600 !important; letter-spacing:-.03em !important; -webkit-text-stroke:1px rgba(221,144,130,.26) !important; }
.topnav .font-display, .topnav a[href="#"] span, a[data-spy], .mobile-menu-link{ font-weight:600 !important; letter-spacing:-.01em !important; }
.card-num{ font-weight:600 !important; }

/* Mot fantôme du hero : taille contrôlée en CSS (les text-[Nvw] arbitraires
   non compilés dans le tailwind.css pré-build ne s'appliquent pas). */
#hero .ghost-word{ font-size:26vw; line-height:.78; display:block; }
@media (min-width:640px){ #hero .ghost-word{ font-size:22vw; } }
@media (min-width:768px){ #hero .ghost-word{ font-size:15vw; } }

/* ============================================================
   TYPO v16 — hero calqué EXACTEMENT sur le masthead de l'app
   (Archivo 800, encre MONO, -.035em, interligne .88)
   ============================================================ */
.font-display{ font-weight:800 !important; letter-spacing:-.02em !important; }
h1.font-display, h2.font-display{ font-weight:800 !important; letter-spacing:-.02em !important; line-height:.98 !important; }
#hero h1, #hero-line-1, #hero-line-2{
  font-weight:800 !important; letter-spacing:-.035em !important; line-height:.88 !important;
  color:var(--nk) !important; -webkit-text-fill-color:var(--nk) !important; background:none !important;
}
#hero .text-stroke{ font-weight:800 !important; }