/* =====================================================================
   HELP 38 - habillage « Tech ambre »
   ---------------------------------------------------------------------
   Ce fichier vient APRES style.css et tech.css et ne fait que remplacer
   leur apparence : nuit profonde, pistes de circuit dans le bandeau,
   polices Space Grotesk (titres) et DM Sans (texte), accent ambre.
   Retirer sa ligne de header.php suffit a revenir a l'aspect precedent.

   La teinte se regle par trois variables :
     --vif       accent eclatant, sur fond sombre et pour les boutons
                 (texte sombre dessus pour rester lisible)
     --vif-rgb   le meme, en composantes, pour les halos et les reflets
     --fonce     meme teinte assombrie, pour le texte et les liens sur
                 fond clair (contraste d'au moins 4,5 pour 1 sur blanc)
   ===================================================================== */

/* ---------- Polices hebergees sur le site (aucune dependance externe) --- */
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:400; src:url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:500; src:url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'DM Sans'; font-style:normal; font-weight:700; src:url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2'); font-display:swap; }

:root{
  --nuit:#0b1220;
  --vif:#f59e0b; --vif-rgb:245,158,11; --vif-survol:#fbbf24;
  --fonce:#b45309; --fonce-survol:#92400e;
  --rayon:12px;
  /* Les couleurs d'origine suivent la teinte : liens, coches, soulignes du menu */
  --ambre:var(--fonce); --ambre-clair:var(--vif);
}

/* ---------------------------------------------------------------------
   1. POLICES
   --------------------------------------------------------------------- */
body,.a-completer,.bulle-copie{ font-family:'DM Sans','Segoe UI',system-ui,sans-serif; }
h1,h2,h3,h4,.btn,.nav a,.nav-mobile a,.nav-tel,.surtitre,.lien-fleche,.champ label,.faq summary,
.tarif .prix,.carte-num .num,.stat-nombre,.partenaire-nom,.pied-coord .tel,.marque-texte,.cta h2{
  font-family:'Space Grotesk','Segoe UI',sans-serif; font-weight:700;
}
h1{ font-size:clamp(2.1rem,5vw,3.4rem); letter-spacing:-.04em; line-height:1.08; }
h2{ letter-spacing:-.03em; }
a:hover{ color:var(--fonce-survol); }

/* ---------------------------------------------------------------------
   2. BANDEAU : nuit, halo ambre, pistes de circuit qui apparaissent vers
      la droite (dessinees en SVG, colorees par la teinte)
   --------------------------------------------------------------------- */
.bandeau{ background:var(--nuit); }
.bandeau::after{ width:620px; height:620px; right:-140px; top:-240px; background:radial-gradient(circle,rgba(var(--vif-rgb),.24),transparent 65%); }
.bandeau::before{
  background:rgba(var(--vif-rgb),.30);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 42h52l22 22h46v42l22 22h38'/%3E%3Cpath d='M24 180v-40l22-22h44'/%3E%3Cpath d='M132 0v26l-18 18'/%3E%3Cpath d='M156 180v-24'/%3E%3Cpath d='M0 150h18'/%3E%3Ccircle cx='120' cy='64' r='3.2'/%3E%3Ccircle cx='90' cy='118' r='3.2'/%3E%3Ccircle cx='114' cy='44' r='3.2'/%3E%3Ccircle cx='156' cy='153' r='3.2'/%3E%3Ccircle cx='21' cy='150' r='3.2'/%3E%3C/svg%3E"),linear-gradient(105deg,transparent 30%,#000 75%);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 42h52l22 22h46v42l22 22h38'/%3E%3Cpath d='M24 180v-40l22-22h44'/%3E%3Cpath d='M132 0v26l-18 18'/%3E%3Cpath d='M156 180v-24'/%3E%3Cpath d='M0 150h18'/%3E%3Ccircle cx='120' cy='64' r='3.2'/%3E%3Ccircle cx='90' cy='118' r='3.2'/%3E%3Ccircle cx='114' cy='44' r='3.2'/%3E%3Ccircle cx='156' cy='153' r='3.2'/%3E%3Ccircle cx='21' cy='150' r='3.2'/%3E%3C/svg%3E"),linear-gradient(105deg,transparent 30%,#000 75%);
  -webkit-mask-size:180px 180px,100% 100%; mask-size:180px 180px,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat; mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* ---------------------------------------------------------------------
   3. SURTITRES, BOUTONS
   --------------------------------------------------------------------- */
.surtitre{ color:var(--fonce); }
.surtitre::before{ background:var(--fonce); }
.section-sombre .surtitre{ color:var(--vif); }
.section-sombre .surtitre::before{ background:var(--vif); }

.btn-ambre{ background:var(--vif); border-color:var(--vif); color:#111827; }
.btn-ambre:hover{ background:var(--vif-survol); border-color:var(--vif-survol); color:#111827; }
.nav-tel{ background:var(--nuit); }
.nav-tel:hover{ background:#1a2634; }

/* ---------------------------------------------------------------------
   4. CARTES : fil fin, qui s'allume en ambre au survol
   --------------------------------------------------------------------- */
.carte,.tarif{ border-radius:14px; border-color:#e2e8f0; box-shadow:none; }
.carte:hover,.tarif:hover{ border-color:var(--vif); box-shadow:0 0 0 1px var(--vif),0 18px 40px rgba(var(--vif-rgb),.18); }
.carte::before{ background:linear-gradient(90deg,var(--vif),rgba(var(--vif-rgb),0)); }
.icone{ background:var(--nuit); color:var(--vif); border-radius:12px; }
.carte:hover .icone,.tarif:hover .icone{ background:var(--nuit); color:var(--vif-survol); }
.carte-num .num{ color:rgba(var(--vif-rgb),.16); }
.tarif li::before,.liste-check li::before{ border-color:var(--fonce); }
.section-sombre .liste-check li::before{ border-color:var(--vif); }
.tarif-phare{ border-color:var(--nuit); }
.tarif-phare .etiquette{ background:var(--vif); color:#111827; }
/* Pictogrammes des petits boutons (telechargements) et du menu : sans pastille */
.liens-os .icone,.nav .icone,.nav-mobile .icone{ background:none; color:inherit; }

/* ---------------------------------------------------------------------
   5. SECTIONS ET BLOCS SOMBRES
   --------------------------------------------------------------------- */
.section-gris{ background-color:#f1f5f9; background-image:radial-gradient(rgba(15,23,42,.08) 1px,transparent 1px); background-size:20px 20px; }
.section-sombre{ background:var(--nuit); }
.section-sombre .icone,.cta .icone{ background:rgba(var(--vif-rgb),.12); color:var(--vif); }
.cta{ background:var(--nuit); border:1px solid rgba(var(--vif-rgb),.30); box-shadow:inset 0 0 80px rgba(var(--vif-rgb),.10); }
/* Cartes posées sur un bloc sombre : elles passent en sombre, sinon leur texte clair serait illisible sur fond blanc */
.section-sombre .carte{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.section-sombre .carte:hover{ background:rgba(255,255,255,.06); }
.section-sombre .carte p{ color:#c3cfdd; }
.pied{ background:var(--nuit); }
.bandeau-alerte{ background:var(--nuit); }
.histo-barre{ background:linear-gradient(180deg,var(--vif),rgba(var(--vif-rgb),.55)); }
.encadre{ border-left-color:var(--vif); }