@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@800;900&display=swap');
/* ══ FOND NÉON DU HERO — Zack, 2026-10-18 (choix de Daniel : « version finale épurée »)
   Seul le fond change : bleu nuit, lueur rouge à gauche, bleue à droite, traits néon, cadre rouge → cyan.
   Le jaune (ambre) du bandeau bêta et du bouton prix passe au bleu du « .ai ». Titres en métal.
   Retirer ce fichier (et sa ligne <link>) = retour exact à l'ancien look. */

:root{--neon-rouge:#ff2a44;--neon-bleu:#3f8cff;--neon-cyan:#4edbff;--nuit:#040a1a}

/* ── Bannière du haut = ébauche B : menu bleu nuit, gros logo métal ── */
nav{background:linear-gradient(180deg,rgba(7,26,56,.95),rgba(5,14,34,.9));
  border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(255,42,68,.6),rgba(39,76,142,.6) 50%,rgba(78,219,255,.6)) 1}
nav .wrap{height:84px;max-width:1400px}
nav .menu,nav .menu *{white-space:nowrap}
.plaque-logo{background:#060e24;border:1.5px solid transparent;border-radius:10px;padding:5px;
  background:linear-gradient(#060e24,#060e24) padding-box,linear-gradient(135deg,var(--neon-rouge),#a23a86 50%,var(--neon-bleu)) border-box;
  box-shadow:0 0 14px rgba(255,42,68,.3),0 0 14px rgba(63,140,255,.3)}
.plaque-logo img{width:44px;height:44px}
nav .marque-txt{font-family:'Exo 2',var(--display);font-weight:900;font-size:30px;letter-spacing:-.01em;line-height:1;
  background-image:linear-gradient(180deg,#ffffff 0%,#e4eeff 26%,#a9c2ec 46%,#30477a 50%,#6f93d4 60%,#d8e6ff 82%,#9fb8e6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #121f3e) drop-shadow(0 4px 8px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(78,219,255,.22))}
nav .marque-txt i{background-image:linear-gradient(180deg,#ffd6da 0%,#ff6273 26%,#e01733 46%,#6a0614 50%,#d81e38 60%,#ff8592 82%,#b0122a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
nav .marque-txt u{background-image:linear-gradient(180deg,#eafcff 0%,#9debff 26%,#3cc8f5 46%,#0a5f93 50%,#2fb9f0 60%,#b9f2ff 82%,#4fcff7 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
nav .btn{background:linear-gradient(180deg,#ff7584 0%,#ff2a44 44%,#c8102e 56%,#e8263f 100%);border-color:#ff4a5e;
  box-shadow:0 0 22px rgba(255,42,68,.45),inset 0 1px 0 rgba(255,255,255,.5)}
@media (max-width:1280px){nav .marque-txt{font-size:22px}.plaque-logo img{width:36px;height:36px}.menu>li>a{padding:9px 8px;font-size:14px}nav .btn{padding:10px 16px;font-size:14px}.beta span{font-size:13px}}
@media (max-width:1100px){nav .marque-txt{font-size:19px}.menu>li>a{padding:9px 5px}nav .wrap{gap:12px}}
@media (max-width:640px){nav .marque-txt{font-size:22px}.plaque-logo img{width:34px;height:34px}}

/* ── Bandeau bêta = ébauche B : une ligne, rouge → cyan ── */
.beta{
  background:linear-gradient(90deg,rgba(255,42,68,.22),rgba(7,26,56,.94) 28%,rgba(7,26,56,.94) 72%,rgba(78,219,255,.22));
  border-bottom:1px solid rgba(78,219,255,.35);box-shadow:0 6px 24px rgba(30,108,255,.22)
}
.beta .wrap{flex-wrap:nowrap;padding-top:10px;padding-bottom:10px}
.beta b{background:transparent;color:#fff;border:1.5px solid var(--neon-rouge);border-radius:6px;
  box-shadow:0 0 12px rgba(255,42,68,.7),inset 0 0 8px rgba(255,42,68,.5);text-shadow:0 0 8px var(--neon-rouge)}
.beta span{color:#d9e8ff;font-size:14px}
.beta .places,.beta .lancement{font-style:normal;color:#ff6b7a;font-weight:600;text-shadow:0 0 10px rgba(255,42,68,.6)}
.beta .courtiers{font-style:normal;color:var(--neon-cyan);font-weight:600;text-shadow:0 0 10px rgba(78,219,255,.6)}
@media (max-width:900px){.beta .wrap{flex-wrap:wrap}}

/* ── Le fond du hero ── */
.hero--banniere{
  position:relative;overflow:hidden;isolation:isolate;border-bottom:0;
  background:
    radial-gradient(ellipse 46% 56% at 50% 44%,rgba(3,8,22,.62),rgba(3,8,22,.2) 70%,transparent),
    radial-gradient(circle at 12% 100%,rgba(255,42,68,.42),transparent 42%),
    radial-gradient(circle at 88% 100%,rgba(78,219,255,.36),transparent 42%),
    radial-gradient(circle at 70% 100%,rgba(30,108,255,.4),transparent 40%),
    linear-gradient(180deg,#030a1f 0%,#0a1f56 55%,#1748b8 88%,#3a3aa8 100%);
}
/* le cadre néon rouge → cyan (les traits de lumière ont été retirés à la demande de Daniel) */
.hero--banniere:after{
  content:"";position:absolute;inset:14px 22px;z-index:-1;pointer-events:none;border-radius:20px;padding:2px;
  background:linear-gradient(90deg,var(--neon-rouge) 0%,#9a3c8f 45%,var(--neon-bleu) 70%,var(--neon-cyan) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 8px rgba(255,42,68,.55)) drop-shadow(0 0 14px rgba(78,219,255,.35));
}

/* ── Titres en métal ── */
.hero--banniere .etiq,.hero--banniere .etiq b{color:var(--neon-cyan)}
.hero--banniere h1{
  background-image:linear-gradient(180deg,#ffffff 0%,#dbe7ff 40%,#8fabdc 52%,#c9dbff 70%,#f2f7ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))
}
.hero--banniere h1 em{
  background-image:linear-gradient(180deg,#ffb3bb 0%,#ff4a5e 40%,#c8102e 54%,#ff3b4f 72%,#ff8a96 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}

/* ── La vidéo : cadre néon ── */
.hero--banniere .banniere-video{
  border:3px solid transparent;border-radius:16px;
  background:linear-gradient(#05080D,#05080D) padding-box,linear-gradient(90deg,var(--neon-rouge),#9a3c8f 40%,var(--neon-bleu) 70%,var(--neon-cyan)) border-box;
  box-shadow:-14px 0 40px rgba(255,42,68,.32),14px 0 44px rgba(78,219,255,.42),0 30px 60px rgba(0,0,0,.6)
}

/* ── Texte sous la vidéo : lisible sur le néon ── */
.hero--banniere .amorce{color:#eef5ff;text-shadow:0 2px 6px #000,0 0 18px rgba(3,8,22,.9)}
.hero--banniere .hero-note,.hero--banniere .hero-legende{text-shadow:0 1px 4px #000}

/* ── Bouton « Voir les prix » : bleu du .ai au lieu de l'ambre ── */
.btn--prix{color:#fff;border-color:var(--neon-cyan);
  background:linear-gradient(180deg,#9debff 0%,#3cc8f5 45%,#0a7fb8 56%,#2fb9f0 100%);
  box-shadow:0 0 24px rgba(78,219,255,.45),inset 0 1px 0 rgba(255,255,255,.6);text-shadow:0 1px 2px rgba(0,40,70,.6)}
.btn--prix:hover{color:#fff;border-color:#bff3ff;background:linear-gradient(180deg,#bff3ff 0%,#4fd2fa 45%,#0d8cc8 56%,#3cc8f5 100%)}
.btn--prix .prix-ico{background:#04223a;color:var(--neon-cyan)}

@media (max-width:640px){.hero--banniere:after{inset:8px 8px}}

/* ══ HERO = ÉBAUCHE B (v3) : logo + explication à gauche, vidéo à droite, 3 cartes ══ */
/* Menu : le nom n'apparaît plus en double sur ordinateur — « Accueil » passe à gauche. */
@media (min-width:1001px){body:has(.hero--b) nav .marque{display:none}nav .wrap{justify-content:space-between}body:has(.hero--b) nav .menu{margin-left:-13px}}

.hero--b{padding:clamp(40px,5vw,64px) 0 clamp(40px,5vw,60px)}
.hero-b{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;max-width:1340px}
.hero-b-gauche,.hero-b-droite{min-width:0}
.hero-marque{display:flex;align-items:center;gap:clamp(14px,2vw,24px);margin:16px 0 26px}
.hero-hex{width:clamp(92px,10vw,146px);height:auto;flex:none}
.marque-geante{font-family:'Exo 2',var(--display);font-weight:900;font-size:clamp(46px,6.2vw,94px);line-height:.92;letter-spacing:-.01em;
  filter:drop-shadow(0 2px 0 #1b2b55) drop-shadow(0 3px 0 #0f1a36) drop-shadow(0 8px 14px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(78,219,255,.22))}
.marque-geante span{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mg-sys{background-image:linear-gradient(180deg,#ffffff 0%,#e4eeff 26%,#a9c2ec 46%,#30477a 50%,#6f93d4 60%,#d8e6ff 82%,#9fb8e6 100%)}
.mg-fac{background-image:linear-gradient(180deg,#ffd6da 0%,#ff6273 26%,#e01733 46%,#6a0614 50%,#d81e38 60%,#ff8592 82%,#b0122a 100%)}
.mg-ai{background-image:linear-gradient(180deg,#eafcff 0%,#9debff 26%,#3cc8f5 46%,#0a5f93 50%,#2fb9f0 60%,#b9f2ff 82%,#4fcff7 100%)}
.hero--banniere .hero-b h1{font-size:clamp(28px,3vw,40px);line-height:1.12;margin:0;max-width:none;text-align:left}
.hero--banniere .hero-b .amorce{margin:18px 0 0;max-width:34em;text-align:left;font-size:18px}
.hero--banniere .hero-b .hero-actions{flex-direction:row;align-items:center;justify-content:flex-start;margin-top:28px}
.hero--banniere .hero-b .hero-actions .btn{width:auto}
.hero--banniere .hero-b .hero-note{margin:22px 0 0;text-align:left}
.hero--banniere .hero-b .banniere-video,.hero--banniere .hero-b .banniere-video.ecoute{width:100%}
.hero--banniere .hero-b .hero-legende{text-align:center;margin:14px auto 0}
.hero-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(32px,4vw,48px);max-width:1340px}
.hero-carte{padding:18px 22px;border-radius:16px;border:1px solid rgba(78,219,255,.25);background:rgba(7,26,56,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 18px rgba(78,219,255,.1)}
.hero-carte b{display:block;font-family:'Exo 2',var(--display);font-weight:800;font-size:20px;line-height:1.2;color:#fff;margin-bottom:4px}
.hero-carte span{font-size:15.5px;line-height:1.5;color:#b8cbe6}
@media (max-width:1000px){
  .hero-b{grid-template-columns:1fr}
  .hero-cartes{grid-template-columns:1fr;gap:12px}
}
@media (max-width:820px){
  .hero--banniere .hero-b .hero-actions{flex-direction:column;align-items:stretch}
  .hero--banniere .hero-b .hero-actions .btn{width:100%}
}
.hero--banniere .hero-b .hero-note{max-width:none}

/* ══ v4 (finale) : tout le site en bleu nuit — fin du gris et du jaune ══ */
:root{--fonte:#06112a;--acier:#0b1b3a;--acier-2:#11254d;--trait:#1c3566;--craie-2:#b8cbe6;--ambre:#4edbff}
body:before{background:
  radial-gradient(ellipse 80% 60% at 50% 0%,rgba(30,108,255,.12),transparent 70%),
  radial-gradient(circle at 8% 100%,rgba(255,42,68,.09),transparent 40%),
  radial-gradient(circle at 92% 100%,rgba(78,219,255,.09),transparent 40%),var(--fonte)}
.flottant--prix{color:#fff;background:linear-gradient(180deg,#9debff 0%,#3cc8f5 45%,#0a7fb8 56%,#2fb9f0 100%);text-shadow:0 1px 2px rgba(0,40,70,.6)}
.flottant--prix .prix-ico{background:#04223a;color:var(--neon-cyan)}
/* Menu aligné sur le contenu du haut de page; numéro de téléphone plus gros. */
nav .wrap{max-width:1340px}
nav .btn{font-size:18px;font-weight:700;padding:13px 28px;letter-spacing:.01em}

/* ══ v5 (20 oct, choix de Daniel = ébauche A) : le bas du site dans le dégradé du haut, fini le bleu nuit ══
   Retirer ce bloc = retour au bleu nuit v4. Archive : /var/www/_archives/2026-10-20-avant-bas-bleu-a/ */
body:before{background:linear-gradient(115deg,#7b3b8f 0%,#4b3fa6 30%,#2d55c2 60%,#2f86e6 100%)}
.sec,.bascule,.chiffres,.appel,.transition,.usine,.cerveau,footer{background:transparent}
.sec--creux{background:rgba(255,255,255,.06)}
.sec{border-bottom-color:rgba(255,255,255,.12)}
.pitch-signature b{color:#bff3ff}
