/* Styles propres a la page d'accueil. Le design system (couleurs, engrenages, plaques, boutons) vit
   dans varuna.css ; ici, seulement la mise en scene du hero et des sections de l'accueil. */

.defs-svg { position:absolute; width:0; height:0; overflow:hidden }

/* --- Hero ------------------------------------------------------------------------------------- */
.hero { padding:var(--e7) 0 var(--e6); overflow:hidden; text-align:center;
  border-bottom:1px solid var(--bord) }
.hero-inner { display:flex; flex-direction:column; align-items:center; position:relative; z-index:1 }
.hero .surtitre, .hero .chapeau { justify-content:center }
.hero .surtitre { margin-top:var(--e3) }
.hero .chapeau { margin-left:auto; margin-right:auto; text-align:center }
.hero .actions { justify-content:center; margin-top:var(--e5) }
.hero-logo img {
  width:clamp(110px,20vw,168px); height:auto; display:block;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(224,179,82,.14));
  animation:flotte 7s ease-in-out infinite;
}
@keyframes flotte { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
.hero h1 { margin-top:var(--e3) }

.adresse-rappel {
  margin:var(--e4) 0 0; color:var(--gris-faible); font-size:.92rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
}

/* --- Le champ d'engrenages du hero ----------------------------------------------------------- */
/* Positionnes en classes (jamais en attribut style : le CSP l'interdit). Grands, sombres, en partie
   hors-cadre : la salle des machines derriere la vitrine. */
.hero .rouages .engrenage { color:var(--bord-clair) }
/* Toutes les roues partagent un MEME module : une dent = 15 px de diametre, donc chaque diametre vaut
   N*15 (le symbole #engrenage-N porte N dents) et toutes les dents ont la meme taille physique - sans
   ca, deux roues ne peuvent pas s'engrener. g1<->g2 (22 et 14 dents) et g3<->g4 (29 et 11) sont deux
   couples : sens opposes, places tangents (entraxe = 0,44*(D1+D2)), et --d = 0,11 s/px de diametre.
   La duree etant exactement proportionnelle au nombre de dents, le rapport reste entier (22/14, 29/11)
   et les dents restent en phase indefiniment. g5 (8 dents) tourne seul. */
.g1 { width:330px; height:330px; top:-90px; right:-70px; opacity:.55; color:var(--bord-clair); --d:36.3s }
.g2 { width:210px; height:210px; top:125px; right:170px; opacity:.4; --d:23.1s }
.g3 { width:435px; height:435px; bottom:-200px; left:-160px; opacity:.42; --d:47.85s }
.g4 { width:165px; height:165px; bottom:-15px; left:235px; opacity:.35; --d:18.15s }
.g5 { width:120px; height:120px; top:40px; left:60px; opacity:.3; --d:13.2s }

/* Sous les engrenages d'ambiance, une teinte laiton tres faible sur les plus proches. */
.g1, .g4 { color:#4a3f2b }

/* --- Section installation : deux rouages + etapes -------------------------------------------- */
.install { overflow:hidden }
.install .rouages .engrenage { color:var(--bord-clair) }
/* gi1 (20 dents) et gi2 (10) sont loin l'une de l'autre (haut/bas) : elles ne s'engrenent pas, mais
   meme module et meme regle taille->vitesse pour que rien ne detonne. */
.gi1 { width:300px; height:300px; top:-120px; right:-90px; opacity:.32; --d:33s }
.gi2 { width:150px; height:150px; bottom:-40px; right:120px; opacity:.28; --d:16.5s }
.install > * { position:relative; z-index:1 }

/* Les etapes : chaque numero est un petit engrenage estampe. Un chemin, donc trois maillons. */
.rouage-etapes {
  list-style:none; counter-reset:etape; padding:0; margin:var(--e5) 0 0;
  display:grid; gap:var(--e2); grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.rouage-etapes li {
  counter-increment:etape; position:relative;
  background:linear-gradient(180deg, var(--surface-haute), var(--surface));
  border:1px solid var(--bord); border-radius:var(--rayon);
  padding:var(--e3) var(--e3) var(--e3) 3.9rem; box-shadow:var(--arete); color:var(--gris);
}
.rouage-etapes li::before {
  content:counter(etape); position:absolute; left:var(--e2); top:var(--e2);
  width:2.2rem; height:2.2rem; border-radius:6px;
  background:linear-gradient(160deg, var(--laiton-vif), var(--laiton)); color:#241a08;
  display:grid; place-items:center;
  font-family:var(--police-titre); font-size:.95rem; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.6), 0 2px 6px rgba(0,0,0,.4);
}
.rouage-etapes b { color:var(--creme); font-weight:700 }

/* --- Plaque d'appel final -------------------------------------------------------------------- */
.appel {
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  padding:var(--e5) var(--e5); flex-wrap:wrap;
}
.appel-texte { flex:1 1 24rem }
.appel .surtitre { color:var(--cuivre-vif) }
.appel .surtitre::before { background:linear-gradient(90deg, var(--cuivre), var(--laiton)) }
.appel .chapeau { margin-top:var(--e2) }
.appel .actions { margin-top:0; flex:0 0 auto }

@media (max-width:40rem) {
  .hero { padding:var(--e6) 0 var(--e5) }
  .g1,.g2,.g5,.gi1 { display:none }
  .appel { padding:var(--e4) }
  .appel .actions .bouton { flex:1 1 100% }
}