/* =========================================================
   UtiliNexus — Design System
   Un compte. Dix univers.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Polices réelles de chaque outil, chargées pour que les cartes
   "reprennent" fidèlement leur identité typographique d'origine. */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Orbitron:wght@700&family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,600&family=Space+Grotesk:wght@600&family=Cinzel:wght@600;700;800&display=swap');

:root{
  /* --- Couleurs de base : le "vide" du nexus --- */
  --bg: #0A0C16;
  --bg-soft: #10122390;
  --surface: #14162C;
  --surface-2: #1B1E3B;
  --border: #2A2D52;
  --text: #EDEBF7;
  --text-dim: #A6A3C9;
  --text-faint: #6F6C93;

  /* --- Le "conduit" : l'énergie qui relie tous les outils --- */
  --conduit-1: #7C5CFF;
  --conduit-2: #23D9D9;
  --conduit-grad: linear-gradient(120deg, var(--conduit-1), var(--conduit-2));
  --warm: #FF7A45;

  /* --- Couleurs propres à chaque outil (identité conservée) ---
     Frigofuté, Cairn, Loup-Garou, TournaPilot et Undercover reprennent
     les vraies variables CSS de chaque app. Meldova, Clandestio,
     HolidayHub Elite, AlcoCheck et Trouver Ma Voiture sont encore en
     teintes approximatives, en attendant leurs fichiers sources. */
  --c-frigofute: #E06A38;      /* paprika */
  --c-frigofute-2: #E7B446;    /* butter */
  --c-meldova: #D4AF37;        /* doré */
  --c-meldova-2: #F6E27A;      /* champagne */
  --c-cairn: #8FE3D2;          /* glacier */
  --c-cairn-2: #F2B84B;        /* amber */
  --c-managlimpse: #CBA135;    /* gold (réel) */
  --c-managlimpse-2: #E8C565;  /* gold-bright (réel) */
  --c-clandestio: #9B4DFF;
  --c-clandestio-2: #43E0FF;
  --c-tournapilot: #7C5CFF;    /* violet */
  --c-tournapilot-2: #33E6D8;  /* cyan */
  --c-tournapilot-3: #FFB224;  /* amber */
  --c-voiture: #17B8A6;
  --c-voiture-2: #BFEFEA;
  --c-loupgarou: #C94A51;      /* blood-hot */
  --c-loupgarou-2: #F2AB5C;    /* ember */
  --c-holidayhub: #F2B705;
  --c-holidayhub-2: #12A9A0;
  --c-alcocheck: #F5A623;
  --c-alcocheck-2: #FFD98A;
  --c-undercover: #00F2FF;     /* neon-blue */
  --c-undercover-2: #FF007A;   /* neon-pink */

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(.16,.9,.22,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

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

body{
  background:
    radial-gradient(80vw 60vh at 15% -10%, #201947 0%, transparent 60%),
    radial-gradient(70vw 50vh at 110% 10%, #0F2A34 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
}
/* Les champs de saisie restent sélectionnables (copier/coller un
   e-mail, corriger une frappe...) même si le reste du site ne l'est pas. */
input, textarea{
  user-select:text;
  -webkit-user-select:text;
  -moz-user-select:text;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font:inherit; cursor:pointer;}

:focus-visible{
  outline:2px solid var(--conduit-2);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(24px, 5.5vw, 48px);
}
@media (max-width:640px){
  .container{ padding:0 26px; }
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--conduit-2);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background:var(--conduit-2);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.01em;
}

.section-title{
  font-size:clamp(1.9rem, 3.6vw, 2.7rem);
  margin:.5rem 0 1rem;
}

.section-lede{
  color:var(--text-dim);
  font-size:1.05rem;
  max-width:640px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.9em 1.6em;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--conduit-grad);
  color:#0A0C16;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px -8px rgba(124,92,255,.55);
}
.btn-ghost{
  border-color:var(--border);
  color:var(--text);
  background:rgba(255,255,255,.02);
}
.btn-ghost:hover{
  border-color:var(--conduit-2);
  color:var(--conduit-2);
}
.btn-sm{padding:.6em 1.2em; font-size:.85rem;}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,12,22,.72);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(24px, 5.5vw, 48px);
}
@media (max-width:640px){
  .nav{ padding-left:26px; padding-right:26px; }
}
.logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.15rem;
  display:flex; align-items:center; gap:.55em;
}
.logo .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--conduit-grad);
  box-shadow:0 0 14px 2px rgba(124,92,255,.7);
}
.nav-links{
  display:flex; align-items:center; gap:2rem;
  font-size:.92rem; color:var(--text-dim);
}
.nav-links a:hover{color:var(--text);}
.nav-cta{display:flex; align-items:center; gap:1rem;}
.nav-toggle{display:none;}

.nav-user{
  display:flex; align-items:center; gap:.65rem;
  padding:.35em .9em .35em .35em;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav-user:hover{ border-color:var(--conduit-2); background:rgba(255,255,255,.06); }
.nav-user-avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--conduit-grad);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.85rem; color:#0A0C16;
  flex-shrink:0;
}
.nav-user-name{
  font-size:.86rem; font-weight:600; color:var(--text);
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media (max-width: 480px){
  .nav-cta{ gap:.5rem; }
  .nav-cta .btn{ padding:.55em .85em; font-size:.78rem; gap:.35em; }
  .nav-user-name{ max-width:80px; }
}

@media (max-width: 860px){
  .nav-links{display:none;}
  .nav-toggle{display:block; background:none; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:.5em .7em;}
}

/* ============ HERO / CONSTELLATION ============ */
.hero{
  position:relative;
  padding:clamp(60px, 10vw, 110px) 0 40px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:2.5rem;
  align-items:center;
}
@media(min-width:980px){
  .hero-grid{grid-template-columns: 1fr 1.1fr;}
}
.hero h1{
  font-size:clamp(2.4rem, 5.4vw, 4.1rem);
  margin:.6rem 0 1.3rem;
}
.hero h1 em{
  font-style:normal;
  background:var(--conduit-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lede{
  color:var(--text-dim);
  font-size:1.12rem;
  max-width:520px;
  margin-bottom:2rem;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.2rem;}
.hero-meta{
  display:flex; gap:2.2rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.8rem; color:var(--text-faint);
}
.hero-meta b{color:var(--text); font-family:var(--font-body); font-weight:700; font-size:1.05rem; display:block;}

/* Deux gabarits distincts : un grand schéma pour ordinateur,
   un schéma plus compact et centré pour mobile (voir aussi main.js,
   qui recalcule les positions des nœuds selon la largeur d'écran). */
.constellation-wrap{
  position:relative;
  aspect-ratio:1/1;
  max-width:400px;
  margin:0 auto;
}
@media(min-width:640px){
  .constellation-wrap{ max-width:480px; }
}
@media(min-width:980px){
  .constellation-wrap{ max-width:660px; }
}
.constellation-wrap svg{width:100%; height:100%; overflow:visible;}
.node-core{
  filter:drop-shadow(0 0 22px rgba(124,92,255,.65));
}
.node-line{
  stroke-width:1.4;
  fill:none;
  stroke-dasharray:6 7;
  opacity:.5;
  animation:flow 6s linear infinite;
  transition:stroke-width .5s var(--ease), opacity .5s var(--ease);
}
@keyframes flow{ to{ stroke-dashoffset:-130; } }

.node-group{ cursor:pointer; }
.node-group:hover .node-line, .node-group:focus-visible .node-line{
  stroke-width:2.2;
  opacity:.85;
}
.node-dot{
  transition:transform .5s var(--ease);
  transform-origin:center;
  transform-box:fill-box;
}
.node-group:hover .node-dot, .node-group:focus-visible .node-dot{ transform:scale(1.18); }

/* Halo discret et continu, sans "saut" perceptible : cycle lent,
   amplitude réduite, disparition progressive plutôt qu'un arrêt net. */
.node-pulse{
  animation:pulse 4.6s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes pulse{
  0%{opacity:.28; transform:scale(1);}
  75%{opacity:0; transform:scale(1.9);}
  100%{opacity:0; transform:scale(1.9);}
}
.node-label{
  font-family:var(--font-mono);
  font-size:9.5px;
  fill:var(--text-faint);
  pointer-events:none;
  transition:fill .4s var(--ease);
}
.node-group:hover .node-label, .node-group:focus-visible .node-label{ fill:var(--text); }

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{opacity:1; transform:none;}

/* ============ VALEURS ============ */
.values{padding:100px 0;}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1rem;
  margin-top:2.6rem;
}
@media(max-width:900px){ .values-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .values-grid{grid-template-columns:1fr;} }
.value-card{
  background:linear-gradient(160deg, var(--surface), var(--bg-soft));
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:1.8rem 1.5rem;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.value-card:hover{ transform:translateY(-6px); border-color:var(--conduit-1); }
.value-card:nth-child(2){ margin-top:1.4rem; }
.value-icon{
  width:42px; height:42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--conduit-grad);
  margin-bottom:1.1rem;
}
.value-card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.value-card p{ color:var(--text-dim); font-size:.92rem; }

/* ============ GALAXIE / GRILLE OUTILS ============ */
.galaxy{padding:60px 0 100px;}
.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.3rem;
  margin-top:2.8rem;
}

.tool-card{
  position:relative;
  border-radius:var(--radius-m);
  padding:1.7rem 1.6rem 1.5rem;
  border:1px solid var(--border);
  background:var(--surface);
  overflow:hidden;
  isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tool-card:hover{
  transform:translateY(-7px);
  box-shadow:0 26px 55px -24px var(--tool-glow, rgba(124,92,255,.4));
}
.tool-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  opacity:.16;
}
.tool-card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.tool-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem;}
.tool-name{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; }
.tool-badge{
  font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.3em .6em; border-radius:6px; border:1px solid var(--border); color:var(--text-dim); white-space:nowrap;
}
.tool-badge.live{ color:#8BF0B0; border-color:#8BF0B0; }
.tool-tagline{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); margin-bottom:.9rem; letter-spacing:.03em;}
.tool-desc{ color:var(--text-dim); font-size:.92rem; margin-bottom:1.3rem; min-height:66px;}
.tool-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.tool-domain{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); }

/* --- Identité visuelle propre à chaque outil ---
   Frigofuté, Cairn, TournaPilot, Nuits du Village et Undercover
   reprennent les vrais motifs de fond de leurs apps (extraits de
   leurs fichiers sources), pas seulement leur couleur. */

.tool-frigofute{ --tool-glow: color-mix(in srgb, var(--c-frigofute) 45%, transparent); }
.tool-frigofute::before{
  /* halo de papier chaud en haut à gauche, comme sur l'app réelle */
  background:
    radial-gradient(circle at 8% -10%, #fffdf5 0%, transparent 45%),
    radial-gradient(circle at 90% 100%, var(--c-frigofute), transparent 60%);
}
.tool-frigofute::after{ background:linear-gradient(var(--c-frigofute), var(--c-frigofute-2)); }
.tool-frigofute .tool-badge.live{ color:var(--c-frigofute-2); border-color:var(--c-frigofute); }
.tool-frigofute .tool-name{
  font-family:'Fraunces', serif; font-style:italic; font-weight:600;
  background:linear-gradient(90deg, var(--c-frigofute-2), var(--c-frigofute)); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.tool-meldova{
  --tool-glow: color-mix(in srgb, var(--c-meldova) 50%, transparent);
  background:linear-gradient(165deg, #2B2210, var(--surface) 65%);
}
.tool-meldova::before{
  /* fond doré chaud, comme une salle de cinéma le soir */
  background:
    radial-gradient(circle at 82% -10%, var(--c-meldova), transparent 55%),
    radial-gradient(circle at 6% 105%, var(--c-meldova-2), transparent 45%);
  opacity:.28;
}
.tool-meldova::after{ background:linear-gradient(var(--c-meldova), var(--c-meldova-2)); }
.tool-meldova .tool-badge.live{ color:var(--c-meldova-2); border-color:var(--c-meldova); }
.tool-meldova .tool-name{
  background:linear-gradient(90deg, var(--c-meldova-2), var(--c-meldova));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* petites lumières dorées clignotantes, comme une guirlande de salle obscure */
.mini-lights{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.mini-lights span{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--c-meldova-2);
  box-shadow:0 0 7px 2px color-mix(in srgb, var(--c-meldova) 70%, transparent);
  animation:twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.2; transform:scale(.75); }
  50%{ opacity:1; transform:scale(1.2); }
}
@media (prefers-reduced-motion: reduce){
  .mini-lights span{ animation:none; opacity:.7; }
}

.tool-cairn{ --tool-glow: color-mix(in srgb, var(--c-cairn) 45%, transparent); }
.tool-cairn::before{
  /* lignes de niveau topographiques — motif réel de l'app Cairn */
  background-image:
    repeating-radial-gradient(circle at 18% 24%, transparent 0 22px, rgba(143,227,210,.5) 23px 24px, transparent 25px 46px),
    repeating-radial-gradient(circle at 86% 78%, transparent 0 30px, rgba(242,184,75,.35) 31px 32px, transparent 33px 60px);
  opacity:.4;
}
.tool-cairn::after{ background:linear-gradient(var(--c-cairn), var(--c-cairn-2)); }
.tool-cairn .tool-badge.live{ color:var(--c-cairn-2); border-color:var(--c-cairn); }
.tool-cairn .tool-name{ font-family:'Space Grotesk', sans-serif; }

.tool-managlimpse{
  --tool-glow: color-mix(in srgb, var(--c-managlimpse) 45%, transparent);
  background:linear-gradient(165deg, #1a1128, var(--surface) 70%);
}
.tool-managlimpse::before{
  /* voûte arcane or/parchemin sur violet nocturne — motif réel de l'app */
  background:
    radial-gradient(circle at 88% -10%, var(--c-managlimpse-2), transparent 55%),
    radial-gradient(circle at 4% 100%, #341f4a, transparent 60%);
  opacity:.4;
}
.tool-managlimpse::after{ background:linear-gradient(var(--c-managlimpse), var(--c-managlimpse-2)); }
.tool-managlimpse .tool-badge.live{ color:var(--c-managlimpse-2); border-color:var(--c-managlimpse); }
.tool-managlimpse .tool-name{
  font-family:'Cinzel', serif; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(90deg, var(--c-managlimpse-2), var(--c-managlimpse));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* cinq points de mana (couleurs Magic: The Gathering réelles de l'app) */
.mana-pips{ position:absolute; top:.7rem; right:1.5rem; display:flex; gap:.35rem; z-index:0; }
.mana-pips .pip{ width:8px; height:8px; border-radius:50%; opacity:.8; }
.pip-w{ background:#E9E2C6; box-shadow:0 0 6px 1px rgba(233,226,198,.6); }
.pip-u{ background:#4F8FD6; box-shadow:0 0 6px 1px rgba(79,143,214,.6); }
.pip-b{ background:#8A6BD1; box-shadow:0 0 6px 1px rgba(138,107,209,.6); }
.pip-r{ background:#D1583A; box-shadow:0 0 6px 1px rgba(209,88,58,.6); }
.pip-g{ background:#5C9463; box-shadow:0 0 6px 1px rgba(92,148,99,.6); }

.tool-clandestio{ --tool-glow: color-mix(in srgb, var(--c-clandestio) 45%, transparent); }
.tool-clandestio::before{ background:repeating-linear-gradient(0deg, var(--c-clandestio) 0 1px, transparent 1px 4px); opacity:.08;}
.tool-clandestio::after{ background:linear-gradient(var(--c-clandestio), var(--c-clandestio-2)); }
.tool-clandestio .tool-badge{ color:var(--c-clandestio-2); border-color:var(--c-clandestio); }
.tool-clandestio .tool-name{ text-shadow:0 0 18px rgba(155,77,255,.55); }

.tool-tournapilot{ --tool-glow: color-mix(in srgb, var(--c-tournapilot) 45%, transparent); }
.tool-tournapilot::before{
  /* grille d'arène + double projecteur — motif réel de l'app TournaPilot */
  background:
    radial-gradient(220px 160px at 10% -10%, color-mix(in srgb, var(--c-tournapilot) 22%, transparent), transparent 65%),
    radial-gradient(240px 170px at 105% 15%, color-mix(in srgb, var(--c-tournapilot-2) 20%, transparent), transparent 60%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, auto, 22px 22px, 22px 22px;
}
.tool-tournapilot::after{ background:linear-gradient(var(--c-tournapilot), var(--c-tournapilot-3)); }
.tool-tournapilot .tool-badge.live{ color:var(--c-tournapilot-3); border-color:var(--c-tournapilot-3); }
.tool-tournapilot .tool-name{
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(90deg, #fff, var(--c-tournapilot) 60%, var(--c-tournapilot-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.tool-voiture{ --tool-glow: color-mix(in srgb, var(--c-voiture) 45%, transparent); }
.tool-voiture::before{ background:radial-gradient(2px 2px at 20% 30%, var(--c-voiture) 40%, transparent 41%),
  radial-gradient(2px 2px at 40% 55%, var(--c-voiture) 40%, transparent 41%),
  radial-gradient(2px 2px at 60% 35%, var(--c-voiture) 40%, transparent 41%),
  radial-gradient(2px 2px at 80% 60%, var(--c-voiture) 40%, transparent 41%);
  opacity:.4;
}
.tool-voiture::after{ background:linear-gradient(var(--c-voiture), var(--c-voiture-2)); }
.tool-voiture .tool-badge{ color:var(--c-voiture-2); border-color:var(--c-voiture); }

.tool-loupgarou{
  --tool-glow: color-mix(in srgb, var(--c-loupgarou-2) 45%, transparent);
  background:linear-gradient(180deg, #07080f, var(--surface) 75%);
  border-color:#2A2F52;
}
.tool-loupgarou::before{
  /* grain/bruit + lune + lueur d'ember — motifs réels de l'app Nuits du Village */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle 46px at 88% 10%, #F4ECD8, transparent 72%),
    radial-gradient(circle at 88% 6%, var(--c-loupgarou-2), transparent 55%);
  opacity:.55;
}
.tool-loupgarou::after{ background:linear-gradient(var(--c-loupgarou), var(--c-loupgarou-2)); }
.tool-loupgarou .tool-badge{ color:#D9CBA3; border-color:#5A4F3C; }
.tool-loupgarou .tool-name{ font-family:'Fraunces', serif; font-style:italic; font-weight:600; color:#ECE2C9; }
.tool-loupgarou .tool-domain{ color:#8A94B8; }

.tool-holidayhub{ --tool-glow: color-mix(in srgb, var(--c-holidayhub) 45%, transparent); }
.tool-holidayhub::before{ background:linear-gradient(120deg, var(--c-holidayhub), transparent 55%, var(--c-holidayhub-2)); opacity:.16;}
.tool-holidayhub::after{ background:linear-gradient(var(--c-holidayhub), var(--c-holidayhub-2)); }
.tool-holidayhub .tool-badge.live{ color:var(--c-holidayhub); border-color:var(--c-holidayhub); }

.tool-alcocheck{ --tool-glow: color-mix(in srgb, var(--c-alcocheck) 45%, transparent); }
.tool-alcocheck::before{ background:repeating-linear-gradient(45deg, var(--c-alcocheck) 0 10px, transparent 10px 20px); opacity:.1;}
.tool-alcocheck::after{ background:linear-gradient(var(--c-alcocheck), var(--c-alcocheck-2)); }
.tool-alcocheck .tool-badge.live{ color:var(--c-alcocheck-2); border-color:var(--c-alcocheck); }

.tool-undercover{
  --tool-glow: color-mix(in srgb, var(--c-undercover-2) 55%, transparent);
  background:#030408;
}
.tool-undercover::before{
  /* vignette radiale sombre — motif réel de l'app Undercover */
  background:radial-gradient(circle at 50% 30%, #10111a 0%, #030408 75%),
    radial-gradient(circle at 85% 90%, var(--c-undercover-2), transparent 40%);
  opacity:.9;
}
.tool-undercover::after{ background:linear-gradient(var(--c-undercover), var(--c-undercover-2)); }
.tool-undercover .tool-badge{ color:var(--c-undercover); border-color:var(--c-undercover); }
.tool-undercover .tool-name{
  font-family:'Orbitron', sans-serif; font-weight:700; letter-spacing:.03em;
  background:linear-gradient(90deg, var(--c-undercover), var(--c-undercover-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============ COMPTE UNIQUE ============ */
.account-band{
  padding:90px 0;
  position:relative;
}
.account-panel{
  border-radius:var(--radius-l);
  border:1px solid var(--border);
  background:linear-gradient(135deg, var(--surface-2), var(--surface));
  padding:clamp(2rem, 5vw, 3.6rem);
  display:grid;
  grid-template-columns:1fr;
  gap:2.2rem;
  position:relative;
  overflow:hidden;
}
@media(min-width:900px){ .account-panel{grid-template-columns:1.1fr .9fr;} }
.account-panel::before{
  content:"";
  position:absolute; inset:-40% -10% auto auto; width:60%; aspect-ratio:1/1;
  background:radial-gradient(circle, rgba(124,92,255,.28), transparent 65%);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem;}
.mini-chip{
  font-family:var(--font-mono); font-size:.68rem;
  padding:.4em .7em; border-radius:8px;
  border:1px solid var(--border); color:var(--text-dim);
}
.account-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:1.6rem;
}
.account-card .row{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; border-bottom:1px dashed var(--border); font-size:.88rem;}
.account-card .row:last-child{border-bottom:none;}
.account-card .dot-live{ width:7px; height:7px; border-radius:50%; background:#4CE08A; display:inline-block; margin-right:.5em; box-shadow:0 0 8px #4CE08A;}

/* ============ SEO / GEO ============ */
.deep{ padding:90px 0; }
.deep-grid{
  display:grid; grid-template-columns:1fr; gap:2.5rem;
}
@media(min-width:960px){ .deep-grid{ grid-template-columns:1.1fr .9fr; } }
.deep article h3{ font-size:1.15rem; margin:1.6rem 0 .6rem; }
.deep article p{ color:var(--text-dim); font-size:.95rem; margin-bottom:.5rem;}
.deep article p:first-of-type{margin-top:0;}

.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  margin-bottom:.7rem;
  overflow:hidden;
  background:var(--surface);
}
.faq-q{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem;
  background:none; border:none; color:var(--text);
  font-weight:600; font-size:.95rem;
}
.faq-q .plus{ font-family:var(--font-mono); color:var(--conduit-2); transition:transform .3s var(--ease); }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease), padding .4s var(--ease);
  padding:0 1.2rem;
  color:var(--text-dim);
  font-size:.9rem;
}
.faq-item.open .faq-a{ max-height:220px; padding:0 1.2rem 1.1rem; }

/* ============ CTA FINAL ============ */
.final-cta{
  margin:0 auto 100px;
  max-width:1180px;
  padding:0 clamp(24px,5.5vw,48px);
}
@media (max-width:640px){
  .final-cta{ padding:0 26px; }
}
.final-cta-inner{
  border-radius:var(--radius-l);
  background:var(--conduit-grad);
  color:#0A0C16;
  padding:clamp(2.4rem, 6vw, 4rem);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta-inner h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.9rem;}
.final-cta-inner p{ max-width:520px; margin:0 auto 1.8rem; opacity:.85; }
.final-cta-inner .btn-primary{ background:#0A0C16; color:#fff; }
.final-cta-inner .btn-primary:hover{ box-shadow:0 12px 30px -8px rgba(0,0,0,.5); }

/* ============ FOOTER ============ */
footer{ border-top:1px solid var(--border); padding:60px 0 30px; color:var(--text-faint); font-size:.85rem;}
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:2rem; margin-bottom:2.5rem;}
@media(max-width:600px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-family:var(--font-body); color:var(--text); font-size:.85rem; margin-bottom:.9rem; }
.footer-grid li{ margin-bottom:.55rem; }
.footer-grid a:hover{ color:var(--conduit-2); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; border-top:1px solid var(--border); padding-top:2.4rem; margin-top:.6rem; }