/* =====================================================================
   PAGE D'ACCUEIL — habillage (validé par Eric le 27 sept. 2026)
   Chargé APRÈS style.css, uniquement sur body.accueil (accueil FR et DE).
   Le HTML et les textes sont ceux de toujours : seul l'habillage change. Inspirations 21st.dev :
     - « Feature Grid Spotlight Cards » (hirael) : filets fins, croix de
       repère aux coins, halo qui suit le pointeur ;
     - « Shimmer Button » (magicui) : reflet qui fait le tour du bouton ;
     - « Process Timeline » : étapes reliées par une ligne.
   Charte : noir #0A0A0A, blanc, jaune #D8FF00, Helvetica Neue seule,
   pas d'italique (refusée par Eric le 26 sept. 2026).
   ===================================================================== */

.accueil{
  --filet:rgba(255,255,255,.08);
  --filet-fort:rgba(255,255,255,.16);
  --halo:rgba(216,255,0,.13);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- Typographie : casse normale, plus serrée ---------- */
.accueil h1,.accueil h2{text-transform:none;font-weight:700;letter-spacing:-.045em}
.accueil h1{font-size:clamp(2.6rem,9.2vw,5.6rem);line-height:.96}
.accueil h2{font-size:clamp(2rem,5.8vw,3.5rem);line-height:1.02}
.accueil h3{font-weight:700}
.accueil .surtitre{letter-spacing:.2em;font-size:.7rem}
.accueil .chapo{line-height:1.65}

/* ---------- En-tête : barre en verre ---------- */
.accueil header.colle{
  background:rgba(10,10,10,.6);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
}
.accueil .nav-liens a{position:relative}
.accueil .nav-liens a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--fluo);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.accueil .nav-liens a:hover::after{transform:scaleX(1)}

/* ---------- Bouton principal : reflet qui fait le tour ---------- */
.accueil .btn-fluo{
  position:relative;isolation:isolate;overflow:hidden;
  box-shadow:0 0 0 1px rgba(216,255,0,.4),0 10px 40px -10px rgba(216,255,0,.55);
  transition:transform .18s ease,box-shadow .3s ease,background .2s;
}
.accueil .btn-fluo::before{
  /* le reflet : un cône blanc qui tourne derrière un fond légèrement
     rentré, on n'en voit donc que le liseré */
  content:"";position:absolute;inset:-150%;z-index:-2;
  background:conic-gradient(from 0deg,transparent 0 300deg,rgba(255,255,255,.95) 330deg,transparent 360deg);
  animation:v3-tour 3.2s linear infinite;
}
.accueil .btn-fluo::after{
  content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:inherit;
  background:var(--fluo);
  box-shadow:inset 0 -6px 10px rgba(10,10,10,.12);
  transition:background .2s;
}
.accueil .btn-fluo:hover{box-shadow:0 0 0 1px rgba(216,255,0,.7),0 14px 50px -10px rgba(216,255,0,.75);background:var(--fluo)}
.accueil .btn-fluo:hover::after{background:#E6FF3D}
@keyframes v3-tour{to{transform:rotate(360deg)}}

/* ---------- Héros ---------- */
.accueil .heros::before{
  /* faisceau de lumière venu d'en haut, façon projecteur */
  background:
    conic-gradient(from 180deg at 72% -8%,transparent 0 160deg,rgba(216,255,0,.10) 176deg,rgba(255,255,255,.05) 184deg,transparent 200deg),
    radial-gradient(55% 45% at 75% 18%,rgba(216,255,0,.13) 0%,transparent 65%),
    radial-gradient(40% 40% at 6% 92%,rgba(216,255,0,.06) 0%,transparent 60%);
}
.accueil .grille-fond{
  opacity:.4;background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 35%,#000 0%,transparent 100%);
  mask-image:radial-gradient(70% 55% at 50% 35%,#000 0%,transparent 100%);
}
/* Halo qui suit la souris (posé par accueil.js). Souris seulement : sur
   téléphone il suivait le doigt, restait là où l'on avait touché et
   teintait la Tesla de jaune (signalé par Eric le 27 sept. 2026). */
@media (hover:hover) and (pointer:fine){
  .accueil .heros::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(216,255,0,.07),transparent 70%);
  }
}
/* Tant que la voiture est sous le texte (téléphone, tablette), le faisceau
   s'éteint avant elle : il ne doit éclairer que le titre. */
@media (max-width:1099px){
  .accueil .heros::before{
    -webkit-mask-image:linear-gradient(#000 35%,transparent 62%);
    mask-image:linear-gradient(#000 35%,transparent 62%);
  }
}
/* La Tesla, en fond du héros : sous le texte sur téléphone, à droite sur
   ordinateur. Image décorative : le texte reste la seule information. */
.accueil .heros .grille-fond::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:0;height:46vw;max-height:300px;
  background:url(/tesla-model-3.jpg) center 62%/cover no-repeat;
  -webkit-mask-image:radial-gradient(62% 70% at 50% 60%,#000 35%,transparent 100%);
  mask-image:radial-gradient(62% 70% at 50% 60%,#000 35%,transparent 100%);
}
.accueil .heros .grille-fond{-webkit-mask-image:none;mask-image:none;background-image:none;opacity:1}
.accueil .heros .grille-fond::before{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(var(--bord) 1px,transparent 1px),linear-gradient(90deg,var(--bord) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 35%,#000 0%,transparent 100%);
  mask-image:radial-gradient(70% 55% at 50% 35%,#000 0%,transparent 100%);
}
@media (max-width:759px){
  .accueil .heros{padding-bottom:min(48vw,280px)}
  .accueil .heros .enveloppe{gap:20px}
}
@media (min-width:760px) and (max-width:1099px){
  .accueil .heros{padding-bottom:260px}
  .accueil .heros .grille-fond::after{height:340px;max-height:none;left:10%;right:-10%}
}
@media (min-width:1100px){
  .accueil .heros .grille-fond::after{
    left:auto;right:-4%;bottom:6%;width:62%;height:auto;aspect-ratio:1400/788;max-height:none;
    -webkit-mask-image:radial-gradient(58% 62% at 55% 55%,#000 40%,transparent 100%);
    mask-image:radial-gradient(58% 62% at 55% 55%,#000 40%,transparent 100%);
    opacity:.95;animation:v3-arrivee 1.6s var(--ease) both;
  }
  .accueil .heros h1{max-width:640px}
  .accueil .heros .chapo{max-width:500px}
}
@keyframes v3-arrivee{from{opacity:0;transform:translateX(5%) scale(1.03)}to{opacity:.95;transform:none}}
.accueil .heros h1,.accueil .heros .badge,.accueil .heros .chapo,.accueil .heros .actions,.accueil .heros .sous-actions{
  animation:v3-monte .9s var(--ease) both;
}
.accueil .heros h1{animation-delay:.08s}
.accueil .heros .chapo{animation-delay:.18s}
.accueil .heros .actions{animation-delay:.28s}
.accueil .heros .sous-actions{animation-delay:.36s}
@keyframes v3-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.accueil .badge{
  background:rgba(10,10,10,.55);border-color:var(--filet-fort);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#D4D4D4;
}
.accueil .heros .chapo strong{color:var(--blanc)}
.accueil .sous-actions{color:var(--gris);letter-spacing:.01em}

/* ---------- Réassurance : filets fins et croix de repère ---------- */
.accueil .reassurance{background:transparent;border-color:var(--filet)}
.accueil .reassurance .enveloppe{background:var(--filet);position:relative}
.accueil .point-fort{background:var(--noir);padding:30px 16px 28px;position:relative}
.accueil .point-fort b{font-size:clamp(1.25rem,3.4vw,1.7rem);font-weight:700;letter-spacing:-.04em}
.accueil .point-fort span{color:var(--gris-2)}

/* ---------- Motif commun : croix aux coins + halo au pointeur ---------- */
.accueil .carte,.accueil .etape,.accueil .vehicule{
  --mx:50%;--my:0%;
  background:
    radial-gradient(240px circle at var(--mx) var(--my),var(--halo),transparent 70%) no-repeat,
    radial-gradient(60% 80% at 20% 0%,rgba(255,255,255,.035),transparent) ,
    var(--noir-2);
  background-size:0 0,100% 100%,auto;
}
@media (hover:hover) and (pointer:fine){
  .accueil .carte:hover,.accueil .etape:hover,.accueil .vehicule:hover{background-size:100% 100%,100% 100%,auto}
}

/* ---------- Services : grille « bento » ---------- */
.accueil .services{gap:14px}
.accueil .carte{
  border-radius:16px;border-color:var(--filet);padding:30px 26px 26px;
  overflow:visible;transition:border-color .3s,transform .3s var(--ease);
}
.accueil .carte:hover{transform:translateY(-3px);border-color:rgba(216,255,0,.35)}
.accueil .carte .num{top:26px;right:24px;font-variant-numeric:tabular-nums;color:#5A5A5A}
.accueil .icone{
  border-radius:10px;background:rgba(255,255,255,.03);border-color:var(--filet-fort);
  transition:border-color .3s,background .3s;
}
.accueil .icone svg{stroke-width:1.5}
.accueil .carte:hover .icone{border-color:rgba(216,255,0,.5);background:rgba(216,255,0,.08)}
.accueil .carte h3 a{background:linear-gradient(var(--fluo),var(--fluo)) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.accueil .carte h3 a:hover{background-size:100% 1px}
.accueil .tag{border-color:var(--filet);background:rgba(255,255,255,.02)}
@media (min-width:960px){
  .accueil .services{grid-template-columns:repeat(6,1fr);gap:16px}
  .accueil .carte{grid-column:span 2}
  .accueil .carte:nth-child(1){grid-column:span 4}
  .accueil .carte:nth-child(1) p{max-width:60ch}
  /* Page allemande : quatre cartes seulement, la deuxième ligne en compte
     deux, qui prennent chacune la moitié. */
  .accueil .carte:nth-child(3):nth-last-child(2),
  .accueil .carte:nth-child(4):last-child{grid-column:span 3}
}

/* ---------- Véhicules ---------- */
.accueil .vehicule{border-radius:20px;border-color:var(--filet)}
.accueil .visuel{border-bottom-color:var(--filet)}
.accueil .visuel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(18,18,18,.75));
}
.accueil .etiquette{
  background:rgba(10,10,10,.55);color:var(--fluo);border:1px solid rgba(216,255,0,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.accueil .contenu-vehicule{padding:28px}
.accueil .contenu-vehicule h3{font-size:1.35rem}
.accueil .specs{background:var(--filet);border:1px solid var(--filet)}
.accueil .spec{background:var(--noir)}
.accueil .spec b{color:var(--fluo);font-weight:700}

/* ---------- Déroulement : étapes reliées par une ligne ---------- */
.accueil .etapes{position:relative;gap:0}
.accueil .etape{
  background:transparent;border:0;border-radius:0;padding:0 0 34px 0;position:relative;
}
.accueil .etape:last-child{padding-bottom:0}
.accueil .etape::before{
  /* la ligne qui relie les ronds */
  content:"";position:absolute;left:19px;top:44px;bottom:6px;width:1px;
  background:linear-gradient(var(--fluo),rgba(216,255,0,.08));
}
.accueil .etape:last-child::before{display:none}
.accueil .etape .chiffre{
  background:var(--noir);color:var(--fluo);border:1px solid var(--fluo);
  box-shadow:0 0 0 6px var(--noir),0 0 24px rgba(216,255,0,.35);
  font-weight:700;position:relative;z-index:1;
}
.accueil .etape:first-child .chiffre{background:var(--fluo);color:#0A0A0A}
.accueil .etape h3{font-size:1.2rem;margin-top:6px}
@media (min-width:960px){
  .accueil .etapes{gap:40px}
  .accueil .etape{padding:0}
  .accueil .etape::before{left:50px;right:-40px;top:19px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,var(--fluo),rgba(216,255,0,.08))}
  .accueil .etape h3{margin-top:18px}
}

/* ---------- Engagements (bloc jaune) ---------- */
.accueil .section-fluo{position:relative;overflow:hidden}
.accueil .section-fluo::before{
  /* fines rayures diagonales, à peine visibles : donne de la matière au jaune */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(-45deg,#0A0A0A 0 1px,transparent 1px 14px);
  -webkit-mask-image:radial-gradient(70% 90% at 100% 0%,#000,transparent 70%);
  mask-image:radial-gradient(70% 90% at 100% 0%,#000,transparent 70%);
}
.accueil .section-fluo .enveloppe{position:relative}
.accueil .engagements{counter-reset:eng;border-radius:18px;background:rgba(10,10,10,.14)}
.accueil .engagement{counter-increment:eng;padding:30px 26px;transition:background .25s}
.accueil .engagement::before{
  content:counter(eng,decimal-leading-zero);display:block;margin-bottom:18px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;color:rgba(10,10,10,.5);
}
.accueil .engagement:hover{background:#E1FF33}
.accueil .engagement h3{font-size:1.25rem}

/* ---------- Zone ---------- */
.accueil #zone{position:relative;overflow:hidden}
.accueil #zone::before{
  content:"";position:absolute;right:-20%;top:-10%;width:70%;aspect-ratio:1;pointer-events:none;
  background:
    repeating-radial-gradient(circle at center,transparent 0 46px,rgba(255,255,255,.05) 46px 47px);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);
  mask-image:radial-gradient(closest-side,#000 30%,transparent);
}
.accueil #zone .enveloppe{position:relative}
.accueil .ville{border-color:var(--filet-fort);padding:10px 16px}
.accueil .ville-plus{border-color:rgba(216,255,0,.42)}

/* ---------- Formulaire : liseré lumineux ---------- */
.accueil .calc{
  position:relative;border-radius:22px;border-color:rgba(216,255,0,.22);
  background:
    radial-gradient(80% 60% at 50% 0%,rgba(216,255,0,.08),transparent 70%),
    linear-gradient(180deg,#121212,#0D0D0D);
  box-shadow:0 30px 80px -30px rgba(216,255,0,.18),inset 0 1px 0 rgba(255,255,255,.06);
}
.accueil .calc-champ input,.accueil .calc-champ select{border-radius:12px;background:#0A0A0A;border-color:var(--filet-fort);transition:border-color .2s,box-shadow .2s}
.accueil .calc-champ input:focus,.accueil .calc-champ select:focus{box-shadow:0 0 0 4px rgba(216,255,0,.12)}

/* ---------- Questions : liste épurée à filets ---------- */
.accueil .faq{gap:0;border-top:1px solid var(--filet)}
.accueil .question{
  border:0;border-bottom:1px solid var(--filet);border-radius:0;background:transparent;
  transition:background .25s;
}
.accueil .question:hover{background:rgba(255,255,255,.02)}
.accueil .question summary{padding:24px 4px;font-size:clamp(1.02rem,2.4vw,1.2rem)}
.accueil .question summary::after{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--filet-fort);
  background:
    linear-gradient(var(--fluo),var(--fluo)) center/12px 1.5px no-repeat,
    linear-gradient(var(--fluo),var(--fluo)) center/1.5px 12px no-repeat;
  transition:transform .3s var(--ease),background-color .3s,border-color .3s;
}
.accueil .question[open] summary::after{transform:rotate(45deg);border-color:var(--fluo)}
.accueil .question .reponse{padding:0 4px 26px;line-height:1.7}
.accueil .question[open] .reponse{animation:v3-monte .45s var(--ease) both}

/* ---------- Pied de page : grand mot-symbole en filigrane ---------- */
.accueil footer{position:relative;overflow:hidden;border-top-color:var(--filet)}
.accueil footer::after{
  content:"NEXT DRIVE.";position:absolute;left:50%;bottom:-.18em;transform:translateX(-50%);
  font-size:clamp(4rem,17vw,13rem);font-weight:800;letter-spacing:-.06em;line-height:1;
  white-space:nowrap;pointer-events:none;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);
}
.accueil footer .enveloppe{position:relative;z-index:1}

/* ---------- Barre du bas (téléphone) ---------- */
.accueil .barre-appel{
  background:rgba(10,10,10,.7);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
}

@media (prefers-reduced-motion:reduce){
  .accueil .btn-fluo::before{display:none}
  .accueil .btn-fluo::after{inset:0}
}