/* =========================================================================
   ENOGA.AI — Site vitrine (Accueil)
   Direction artistique : context/02-marque-voix/visual-identity.md
   Port fidèle du wireframe Claude Design (canvas dab7062d) en HTML/CSS/JS
   statique déployable.
   ========================================================================= */

:root{
  --bg:#070C1F;
  --bg-2:#122959;
  --indigo:#1E1B4B;
  --magenta:#EC1CE6;
  --cyan:#C2F0F0;
  --violet:#7C2BD4;
  --alert:#E5404A;
  --text:#FFFFFF;
  --muted:rgba(255,255,255,0.64);
  --faint:rgba(255,255,255,0.42);
  --line:rgba(194,240,240,0.16);
  --line-strong:rgba(194,240,240,0.28);
  --panel:#0D1533;
  --accent:var(--magenta);
  --header-h:56px;
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{margin:0;background:var(--bg);}
a{color:var(--magenta);text-decoration:none;}
a:hover{color:var(--cyan);}
img{max-width:100%;}
button{font:inherit;}

.page{
  position:relative;width:100%;color:var(--text);font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(760px 560px at 92% -6%, rgba(30,27,75,0.55), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(18,41,89,0.55), transparent 55%),
    var(--bg);
  overflow-x:clip;
}
.page-content{position:relative;z-index:1;}

/* ---------- decorative background (isometric lattice + drawn path) ---------- */
.bg-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bg-grid-svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  /* grille bien visible sur le hero, nettement atténuée sur les sections
     suivantes pour ne pas gêner la lecture */
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 86vh, rgba(0,0,0,0.30) 150vh, rgba(0,0,0,0.22) 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 86vh, rgba(0,0,0,0.30) 150vh, rgba(0,0,0,0.22) 100%);
}
.bg-grid-line{stroke:rgba(255,255,255,0.08);stroke-width:1;}
.bg-grid-dot{fill:#ffffff;opacity:0.3;}
.bg-decor-svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  /* zigzag vif dans le hero, nettement atténué en dessous : sur les sections
     il passe derrière du texte courant et ne doit pas gêner la lecture */
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 170vh, rgba(0,0,0,0.30) 330vh, rgba(0,0,0,0.26) 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 170vh, rgba(0,0,0,0.30) 330vh, rgba(0,0,0,0.26) 100%);
}
.bg-zigzag{
  fill:none;stroke:var(--magenta);stroke-width:2px;vector-effect:non-scaling-stroke;
  stroke-dasharray:9999;stroke-dashoffset:9999;
  opacity:0.9;
  filter:drop-shadow(0 0 4px rgba(236,28,230,0.28));
}
.bg-edge-fade{position:absolute;top:0;bottom:0;width:260px;z-index:0;pointer-events:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
/* voile flou arrondi sous la navbar : adoucit la grille en haut de page,
   forme en dôme (radial) plutôt qu'une bande rectiligne */
.bg-edge-fade-t{
  left:0;right:0;top:0;bottom:auto;width:auto;height:300px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:linear-gradient(to bottom, var(--bg) 0%, rgba(7,12,31,0.62) 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(135% 130% at 50% 0%, #000 34%, rgba(0,0,0,0.55) 60%, transparent 84%);
  mask-image:radial-gradient(135% 130% at 50% 0%, #000 34%, rgba(0,0,0,0.55) 60%, transparent 84%);
}
.bg-edge-fade-l{left:0;background:linear-gradient(to right, var(--bg) 0%, rgba(7,12,31,0.55) 40%, transparent 100%);-webkit-mask-image:linear-gradient(to right, #000 0%, #000 35%, transparent 100%);mask-image:linear-gradient(to right, #000 0%, #000 35%, transparent 100%);}
.bg-edge-fade-r{right:0;background:linear-gradient(to left, var(--bg) 0%, rgba(7,12,31,0.55) 40%, transparent 100%);-webkit-mask-image:linear-gradient(to left, #000 0%, #000 35%, transparent 100%);mask-image:linear-gradient(to left, #000 0%, #000 35%, transparent 100%);}

/* Sur petit écran, les voiles latéraux (260px chacun) recouvrent presque tout
   l'écran : on les retire et on allège fortement le voile du haut pour laisser
   voir la grille et le zigzag. */
@media (max-width:768px){
  .bg-edge-fade-l,.bg-edge-fade-r{display:none;}
  .bg-edge-fade-t{
    height:130px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
    background:linear-gradient(to bottom, rgba(7,12,31,0.78) 0%, transparent 100%);
  }
  /* la grille reste bien visible sur tout le hero (jusqu'au CTA), elle ne
     s'atténue qu'ensuite, sur les sections de contenu */
  .bg-grid-svg{
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 360vh, rgba(0,0,0,0.4) 470vh, rgba(0,0,0,0.34) 100%);
    mask-image:linear-gradient(to bottom, #000 0, #000 360vh, rgba(0,0,0,0.4) 470vh, rgba(0,0,0,0.34) 100%);
  }
}
.bg-zigzag-dot{
  position:absolute;left:0;top:0;width:8px;height:8px;margin-left:-4px;margin-top:-4px;
  border-radius:50%;background:var(--magenta);box-shadow:0 0 9px 2px rgba(236,28,230,0.38);opacity:0.85;
}

/* ---------- generic ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
.title-font{font-family:'Oxanium',Arial,sans-serif;}
.btn{
  display:inline-block;background:linear-gradient(120deg,var(--magenta),var(--violet));
  color:#ffffff;font-family:'Oxanium',Arial,sans-serif;font-weight:700;font-size:13.5px;
  letter-spacing:0.04em;text-transform:uppercase;padding:14px 26px;border-radius:6px;border:none;
  box-shadow:0 0 28px rgba(236,28,230,0.28);cursor:pointer;
}
.section-label{
  position:relative;padding-left:16px;font-family:'Oxanium',Arial,sans-serif;font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px;
}
.section-label::before{content:'';position:absolute;left:0;top:1px;bottom:1px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--violet),var(--magenta));}
.h1{
  position:relative;padding-left:20px;font-family:'Oxanium',Arial,sans-serif;text-transform:uppercase;
  font-size:34px;line-height:1.24;font-weight:800;letter-spacing:0.01em;margin:0 0 16px 0;color:var(--text);
}
.h1::before{content:'';position:absolute;left:0;top:0.12em;bottom:0.12em;width:4px;border-radius:2px;background:linear-gradient(180deg,var(--violet),var(--magenta));}
.h2{
  position:relative;padding-left:18px;font-family:'Oxanium',Arial,sans-serif;text-transform:uppercase;
  font-size:32px;line-height:1.3;font-weight:800;letter-spacing:0.01em;margin:0 0 14px 0;color:var(--text);
}
.h2::before{content:'';position:absolute;left:0;top:0.1em;bottom:0.1em;width:4px;border-radius:2px;background:linear-gradient(180deg,var(--violet),var(--magenta));}
.body-text{font-size:15px;line-height:1.65;color:rgba(255,255,255,0.82);}
.muted-text{font-size:13px;line-height:1.6;color:var(--muted);}
.micro{font-size:12px;color:var(--faint);margin-top:12px;}
.placeholder-box{
  border:1px solid var(--line-strong);border-radius:8px;background:rgba(255,255,255,0.02);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--faint);text-align:center;
}
.placeholder-label{font-family:'Oxanium',Arial,sans-serif;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;color:var(--faint);}
.section{padding:56px 0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,12,31,0.86);backdrop-filter:blur(6px);}
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
.logo-mark{font-family:'Oxanium',Arial,sans-serif;font-weight:800;font-size:24px;letter-spacing:0.02em;line-height:1;display:inline-block;}
.logo-enoga{
  color:var(--magenta);background:linear-gradient(120deg,var(--violet),var(--magenta));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.logo-dot-ai{color:var(--cyan);-webkit-text-fill-color:var(--cyan);}
.nav-cta{
  display:inline-block;font-family:'Oxanium',Arial,sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:0.05em;text-transform:uppercase;color:var(--magenta);background:transparent;border:1px solid var(--magenta);
  border-radius:0;padding:8px 16px;transition:background .2s ease,color .2s ease;cursor:pointer;
}
.nav-cta:hover{background:var(--magenta);color:#070C1F;}

/* ---------- hero — le H1 reste, sous-titre puis CTA au scroll ---------- */
.hero-scroll{position:relative;height:160vh;}
.hero-sticky{
  position:sticky;top:76px;height:calc(100vh - 76px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:0 40px;text-align:center;overflow:hidden;
}
.hero-inner{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1040px;gap:26px;}
.hero-title{
  font-family:'Oxanium',Arial,sans-serif;text-transform:uppercase;font-weight:800;
  font-size:clamp(30px,5.4vw,64px);line-height:1.12;letter-spacing:0.01em;color:var(--text);margin:0;
}
.hero-subtitle{
  font-family:'Oxanium',Arial,sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(16px,2.6vw,26px);line-height:1.5;letter-spacing:0.02em;
  color:rgba(255,255,255,0.82);max-width:780px;margin:0;
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease;
}
.hero-subtitle.is-visible{opacity:1;transform:translateY(0);}
.hero-cta-reveal{
  margin-top:8px;opacity:0;transform:translateY(14px);
  transition:opacity .32s ease .04s,transform .32s ease .04s;
}
.hero-cta-reveal.is-active{opacity:1;transform:translateY(0);}

/* ---------- cas d'usage — rail d'affaire (un dossier, trois contrôles) ---------- */
.section-label-cyan{color:var(--cyan);}
.section-label-cyan::before{background:linear-gradient(180deg,var(--cyan),var(--violet));}
.usecases-sub{font-size:15px;line-height:1.6;color:var(--muted);max-width:640px;margin:10px 0 0;}

/* section épinglée : le titre défile normalement ; seul le rail (étapes +
   capture) se bloque sous la navbar, le scroll fait avancer l'étape active
   (01 -> 02 -> 03). Le blocage démarre sous la navbar (top/min-height tiennent
   compte de --header-h) pour ne pas passer dessous. */
.usecases-section{padding:0;background:rgba(20,46,102,0.32);}
/* Le titre de section s'affiche DANS la zone épinglée (copie .usecases-head-pinned)
   à toutes les tailles d'écran : il reste visible pendant le défilement des 3
   étapes et comble le vide au-dessus du rail. L'original — qui défilerait puis
   disparaîtrait dès qu'on réduit un peu la fenêtre — est masqué.
   Pas de padding propre : la copie hérite des gouttières de .wrap et reste
   donc alignée sur le rail (40px desktop / 22px mobile). */
.usecases-section>.usecases-head{display:none;}
.usecases-head-pinned{display:block;margin-bottom:24px;}
.usecases-pin{position:relative;height:400vh;}
.usecases-sticky{position:sticky;top:var(--header-h);min-height:calc(100vh - var(--header-h));box-sizing:border-box;
  padding:8px 0 20px;display:flex;align-items:center;}
.usecases-sticky>.wrap{width:100%;}

.rail{display:grid;grid-template-columns:212px 1fr;gap:28px;align-items:stretch;}
.usecases-section .wrap{max-width:1600px;}

/* colonne gauche : ligne lumineuse magenta -> violet -> cyan dans une gouttière
   à gauche ; les noeuds 01/02/03 sont décalés à droite (le rail ne passe pas
   par-dessus les numéros) */
.rail-side{position:relative;}
.rail-line{position:absolute;left:8px;top:6px;bottom:6px;width:2px;border-radius:2px;background:rgba(194,240,240,0.14);}
.rail-fill{position:absolute;left:8px;top:6px;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--magenta),var(--violet),var(--cyan));
  box-shadow:0 0 12px rgba(236,28,230,0.45);transition:height .35s ease;}
.rail-dot{position:absolute;left:9px;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px 4px rgba(194,240,240,0.5);transition:top .35s ease;}
.rail-nodes{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:16px;padding-left:28px;}
.rail-node{display:flex;align-items:center;gap:12px;background:none;border:none;padding:0;cursor:pointer;text-align:left;color:inherit;}
.rail-node-badge{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Oxanium',Arial,sans-serif;font-weight:800;font-size:11px;color:var(--muted);
  border:1px solid var(--line-strong);background:var(--bg);transition:color .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease;}
.rail-node-label{font-family:'Oxanium',Arial,sans-serif;font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.03em;color:var(--muted);line-height:1.3;max-width:138px;transition:color .3s ease;}
.rail-node.is-active .rail-node-badge{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--magenta),var(--violet));box-shadow:0 0 16px rgba(236,28,230,0.45);}
.rail-node.is-active .rail-node-label,.rail-node:hover .rail-node-label{color:var(--text);}

/* colonne droite : UN seul cadre — la capture et la légende changent selon
   l'étape active (fondu enchaîné) */
.rail-stage{display:flex;flex-direction:column;gap:6px;}

/* légende : les 3 blocs se superposent, seul l'actif est visible */
.rail-caption{position:relative;display:grid;flex:0 0 auto;min-height:48px;}
.rail-text{grid-area:1 / 1;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;}
.rail-text.is-active{opacity:1;transform:none;pointer-events:auto;}
.rail-text-num{font-family:'Oxanium',Arial,sans-serif;font-weight:800;font-size:13px;letter-spacing:0.1em;color:var(--cyan);}
.rail-text-num::after{content:"\00a0—\00a0";color:var(--cyan);}
.rail-text-title{display:flex;align-items:baseline;gap:0;font-family:'Oxanium',Arial,sans-serif;font-size:20px;font-weight:700;color:var(--text);line-height:1.3;margin:0;}
.rail-text-desc{font-size:14.5px;line-height:1.55;color:var(--muted);margin:8px 0 0;max-width:560px;}

/* le cadre : au ratio des captures (aucun rognage), glow magenta ; largeur
   bornée par la hauteur d'écran pour tenir dans la zone épinglée */
.rail-frame{position:relative;align-self:center;width:100%;
  max-width:min(100%, max(50vw, calc((100vh - 300px) * 1.49)));
  aspect-ratio:1168 / 784;
  border:1px solid rgba(236,28,230,0.4);border-radius:12px;overflow:hidden;background:#0a1120;
  box-shadow:0 0 0 1px rgba(236,28,230,0.15),0 0 48px rgba(236,28,230,0.2);}
.rail-shot{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;}
.rail-shot.is-active{opacity:1;}
.rail-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

@media (max-width:768px){
  /* mobile : section épinglée aussi — on avance d'étape en étape au scroll.
     Le rail passe en HORIZONTAL (même langage visuel que le desktop) :
     ligne magenta -> violet -> cyan AU-DESSUS des badges 01/02/03
     (la ligne ne traverse jamais les numéros). */
  .usecases-sticky{padding:20px 0 24px;min-height:0;align-items:flex-start;}
  .usecases-head-pinned{margin-bottom:10px;}
  .usecases-head-pinned .h2{margin-bottom:0;}
  .rail{grid-template-columns:1fr;gap:18px;margin-top:16px;}
  .rail-side{order:-1;position:relative;}
  .rail-line,.rail-fill{left:14px;right:14px;top:2px;bottom:auto;width:auto;height:2px;display:block;}
  /* la barre occupe toute la ligne et on l'anime en scaleX depuis la gauche
     (transition de width sur une barre absolue = rendu bloqué à 0 sur
     certains moteurs) */
  .rail-fill{transform:scaleX(0);transform-origin:left center;
    background:linear-gradient(90deg,var(--magenta),var(--violet),var(--cyan));
    transition:transform .35s ease;}
  .rail-dot{display:none;}
  .rail-nodes{flex-direction:row;justify-content:space-between;align-items:flex-start;height:auto;gap:0;padding-left:0;padding-top:16px;}
  .rail-node{flex:0 0 auto;padding:0;background:none;border:none;}
  .rail-node-label{display:none;}
  .rail-node-badge{width:28px;height:28px;border:1px solid var(--line-strong);background:var(--bg);
    box-shadow:none;font-size:11px;color:var(--muted);position:relative;z-index:1;}
  .rail-node.is-active .rail-node-badge{color:#fff;border-color:transparent;
    background:linear-gradient(135deg,var(--magenta),var(--violet));box-shadow:0 0 16px rgba(236,28,230,0.45);}
  .rail-stage{gap:12px;}
  .rail-caption{min-height:84px;}
  .rail-frame{max-width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .rail-fill,.rail-dot,.rail-text,.rail-shot{transition:none;}
}

/* ---------- gains grid ---------- */
.gains-grid{
  display:grid;grid-template-columns:repeat(2,1fr);margin-top:22px;
  border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--panel);
}
.gain-cell{
  padding:30px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(10px);
  animation:gainsCellIn .55s ease both;
}
.gain-cell:nth-child(2n){border-right:none;}
.gain-cell:nth-last-child(-n+2){border-bottom:none;}
/* plus de numéros : le titre reprend le traitement visuel des anciens
   .gain-index (Oxanium 800, cyan, halo) */
.gain-title{
  font-family:'Oxanium',Arial,sans-serif;font-weight:800;font-size:22px;line-height:1.2;color:var(--cyan);
  text-transform:uppercase;letter-spacing:0.01em;text-shadow:0 0 18px rgba(194,240,240,0.35);margin:0;
}
.gain-desc{font-size:13px;line-height:1.6;color:var(--muted);margin:0;}

.gain-cell:nth-child(1){animation-delay:.05s;}
.gain-cell:nth-child(2){animation-delay:.2s;}
.gain-cell:nth-child(3){animation-delay:.35s;}
.gain-cell:nth-child(4){animation-delay:.5s;}

.gains-conclusion{background:var(--indigo);padding:76px 0;}
.gains-conclusion-inner{display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center;}
.gains-conclusion-text{
  font-family:'Oxanium',Arial,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(23px,3.4vw,34px);line-height:1.22;letter-spacing:0.01em;color:var(--text);margin:0;
}
.gains-line{display:block;}
/* apparition animée au scroll : les 3 phrases en cascade, puis le CTA */
.gains-line,.gains-conclusion-cta{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;}
.gains-conclusion.is-visible .gains-line,
.gains-conclusion.is-visible .gains-conclusion-cta{opacity:1;transform:none;}
.gains-conclusion.is-visible .gains-line:nth-child(1){transition-delay:.05s;}
.gains-conclusion.is-visible .gains-line:nth-child(2){transition-delay:.16s;}
.gains-conclusion.is-visible .gains-line:nth-child(3){transition-delay:.27s;}
.gains-conclusion.is-visible .gains-conclusion-cta{transition-delay:.42s;}
@media (prefers-reduced-motion:reduce){
  .gains-line,.gains-conclusion-cta{opacity:1;transform:none;transition:none;}
}

@keyframes gainsCellIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:880px){
  .gains-grid{grid-template-columns:1fr;}
  .gain-cell{border-right:none;}
  .gain-cell:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
  .gain-cell:last-child{border-bottom:none;}
}

/* ---------- faq ---------- */
.faq-list{margin-top:20px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 4px;cursor:pointer;
  font-size:14.5px;font-weight:700;color:var(--text);width:100%;background:none;border:none;text-align:left;
  font-family:Arial,Helvetica,sans-serif;
}
.chevron-wrap{display:flex;flex:0 0 auto;color:var(--magenta);}
.chevron-wrap svg{transition:transform 0.2s ease;}
.chevron-wrap.open svg{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-answer-inner{padding:0 4px 19px 4px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:680px;margin:0;}

/* ---------- footer ---------- */
.footer-mini{padding:20px 0;text-align:center;font-size:11.5px;color:var(--faint);border-top:1px solid var(--line);}
.footer-mini-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}


@media (max-width:480px){
  .wrap{padding:0 22px;}
  .h1{font-size:26px;}
  .h2{font-size:24px;}
  .hero-title{font-size:28px;}
  .hero-subtitle{font-size:15px;}
  .nav-cta{padding:8px 14px;font-size:11px;}
  .logo-mark{font-size:26px;}
  .hero-sticky{top:68px;height:calc(100vh - 68px);}
}

/* =========================================================================
   Ajouts propres au build statique (absents du wireframe canvas) :
   fond plein écran (.page) + modale de demande de démo.
   ========================================================================= */

/* ---------- access-request modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(3,5,15,0.72);display:none;align-items:center;justify-content:center;
  z-index:100;padding:24px;
}
.modal-overlay.is-open{display:flex;}
.modal-box{
  background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;max-width:460px;width:100%;
  padding:40px;position:relative;
  /* la modale est hors de .page : on fixe explicitement couleur + police
     (sinon héritage du défaut navigateur : texte noir en serif) */
  color:var(--text);font-family:Arial,Helvetica,sans-serif;
}
.modal-close{
  position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);
  font-size:22px;line-height:1;cursor:pointer;padding:6px;
}
.modal-close:hover{color:var(--text);}
.modal-title{font-family:'Oxanium',Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:19px;margin:0 0 8px;color:var(--text);}
.modal-sub{font-size:13.5px;color:var(--muted);margin:0 0 24px;line-height:1.6;}
.form-field{margin-bottom:16px;}
.form-field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:6px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--line-strong);border-radius:4px;
  color:var(--text);padding:11px 12px;font-size:14px;font-family:Arial,Helvetica,sans-serif;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--magenta);}
.form-submit{width:100%;margin-top:6px;border:none;}
.form-note{font-size:11.5px;color:var(--faint);margin-top:14px;line-height:1.6;}
.form-success{display:none;text-align:center;padding:12px 0 4px;}
.form-success.is-visible{display:block;}
.form-success.is-visible ~ form{display:none;}
.honeypot-field{position:absolute;left:-9999px;top:-9999px;}

@media (max-width:480px){
  .modal-box{padding:28px 22px;}
}