/* ============================================================
   EN-TÊTE ET LOGOTYPE
   Le signe prend l'encre ou le papier par currentColor.
   Il se trace une seule fois au chargement, jamais rejoué.
   ============================================================ */

.entete{
  position:fixed; inset-block-start:0; inset-inline:0;
  z-index:50;
  block-size:var(--entete-h);
  display:flex; align-items:center;
  /* Aucun fond au repos : le titre passe dessous sans rupture. */
  background:transparent;
  transition:background-color var(--t-etat) var(--courbe);
}
.entete__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-4);
  inline-size:100%;
}

/* ---------- Le logotype ---------- */
.logotype{
  display:inline-flex; align-items:center; gap:var(--e-3);
  min-block-size:var(--tap-min);   /* cible tactile, même pour un lien */
  text-decoration:none;
  color:var(--ink);
}
.logotype__signe{
  inline-size:22px; block-size:22px; flex:none;
  overflow:visible;
}
.logotype__nom{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-titre);
}

/* Le tracé : joué une fois, à la demande du script.
   Sans la classe, le signe est simplement dessiné — donc visible
   même si le script ne s'exécute jamais. */
.signe-trace .signe__cadre{
  stroke-dasharray:var(--longueur, 120);
  stroke-dashoffset:var(--longueur, 120);
  animation:tracer var(--trace) var(--courbe) forwards;
}
.signe-trace .signe__carre{
  transform:scale(0);
  transform-origin:36.5px 26.5px;
  animation:poser var(--t-etat) var(--courbe) forwards;
  animation-delay:calc(var(--trace) * .62);
}
@keyframes tracer{ to{ stroke-dashoffset:0 } }
@keyframes poser{ to{ transform:scale(1) } }

.entete__droite{
  display:flex; align-items:center; gap:var(--e-4);
}
.entete__tel{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-variant-numeric:tabular-nums;
  text-decoration:none;
  color:var(--ink-2);
  min-block-size:var(--tap-min);
  display:inline-flex; align-items:center;
  transition:opacity var(--t-reaction) var(--courbe);
}
.entete__tel:hover{ opacity:.7 }

/* Une fois décollé du haut, l'en-tête prend un fond pour rester lisible. */
.entete.est-collee{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px);
}

/* ============================================================
   NAVIGATION ET APPEL À L'ACTION
   La page fait onze mille pixels : il faut pouvoir sauter à une
   section, et retrouver le contact sans remonter.
   ============================================================ */

.nav{ display:none }
@media (min-width:940px){
  .nav{ display:flex; align-items:center; gap:var(--e-1); margin-inline:auto }
}
.nav a{
  position:relative;
  display:inline-flex; align-items:center;
  min-block-size:var(--tap-min);
  padding-inline:var(--e-4);
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-3);
  white-space:nowrap;
  transition:color var(--t-etat) var(--courbe);
}
.nav a:hover{ color:var(--ink) }
.nav a[aria-current="true"]{ color:var(--ink) }

/* Le filet de section courante : scaleX, jamais width. */
.nav a::after{
  content:"";
  position:absolute;
  inset-inline:var(--e-4);
  inset-block-end:calc(var(--e-2) + var(--e-1));
  block-size:var(--trait-fort);
  background:var(--ink);
  border-radius:var(--r-rond);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-etat) var(--courbe);
}
.nav a[aria-current="true"]::after{ transform:scaleX(1) }

/* L'appel à l'action : présent partout, y compris sur téléphone. */
.entete__action{
  flex:none;
  padding-inline:var(--e-4);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  white-space:nowrap;
}
@media (min-width:640px){
  .entete__action{ padding-inline:var(--e-6); font-size:var(--fs-micro) }
}

/* ---------- Bascule de thème ----------
   Le disque à moitié plein montre l'idée sans mot : une face
   claire, une face sombre. Il tourne d'un demi-tour au passage
   d'un thème à l'autre — transform seul. */
.bascule-theme{
  inline-size:var(--tap-min); block-size:var(--tap-min);
  flex:none;
  display:grid; place-items:center;
  border:var(--trait) solid var(--rule-fort);
  border-radius:var(--r-rond);
  color:var(--ink-2);
  transition:transform var(--t-etat) var(--courbe),
             opacity var(--t-reaction) var(--courbe);
}
.bascule-theme:hover{ opacity:.75 }
.bascule-theme svg{ inline-size:18px; block-size:18px }
/* En clair, le disque a pivoté : la face pleine change de côté. */
.bascule-theme[aria-pressed="true"]{ transform:rotate(180deg) }