/* ==========================================================================
   Windkair · Overlay d'intégration PHP
   --------------------------------------------------------------------------
   Ce fichier est chargé APRÈS style.css (le design system copié à l'identique
   de la maquette). Il contient uniquement les ajustements propres à l'intégration
   PHP — aujourd'hui les états « coming soon » du header et du footer.

   Le design system (style.css) couvre les futures pages du site ; sa part
   inutilisée aujourd'hui est assumée et n'est pas expurgée.
   ========================================================================== */

/* --- En-tête : navigation centrée -------------------------------------------
   La maquette équilibrait le header en trois blocs — logo à gauche, navigation
   au milieu, actions à droite (compte, panier, « Commander »). Ces actions sont
   retirées de l'intégration tant que la boutique n'existe pas : le
   `justify-content: space-between` du design system collait alors la navigation
   contre le bord droit, en laissant un grand vide au centre.

   On la sort donc du flux pour la centrer sur la LARGEUR DU HEADER, et non
   dans l'espace restant à droite du logo — ce que donnerait un simple
   `margin-inline: auto`, et qui ne serait pas un vrai centre.

   Cadré au-dessus de 1024 px : en deçà, le design system fait déjà de .wk-nav
   un panneau déroulant en position absolue (menu burger), qu'il ne faut pas
   perturber. `.wk-header` étant `position: sticky`, il sert de référence au
   positionnement absolu sans qu'on ait à le déclarer.                        */
@media (min-width: 1025px) {
  .wk-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* --- Éléments « Coming soon » -----------------------------------------------
   Utilisés dans le header (Boutique) et le footer (Livraison, SAV, Mon compte,
   CGV). L'élément est focusable (tabindex="0"), non cliquable, grisé, et révèle
   un libellé « Coming soon » au survol ET au focus clavier.

   Le libellé est en position absolue : rendu dans le flux, il réservait sa
   largeur en permanence et creusait un trou dans la nav (« Boutique » occupait
   164 px pour un texte de 65 px).                                            */
.wk-nav-cs,
.wk-footer-cs {
  position: relative;
  display: inline-block;
  cursor: default;
  color: var(--text-2);
  user-select: none;
}

.wk-nav-cs:focus-visible,
.wk-footer-cs:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Libellé « Coming soon » : hors flux, révélé au survol / focus */
.wk-cs-label {
  position: absolute;
  z-index: 1;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-2);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
  pointer-events: none;
}

/* Header : sous l'entrée de nav, centré */
.wk-nav-cs .wk-cs-label {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.wk-nav-cs:hover .wk-cs-label,
.wk-nav-cs:focus .wk-cs-label,
.wk-nav-cs:focus-visible .wk-cs-label,
.wk-footer-cs:hover .wk-cs-label,
.wk-footer-cs:focus .wk-cs-label,
.wk-footer-cs:focus-visible .wk-cs-label {
  opacity: 1;
  visibility: visible;
}

/* --- Footer : aligné sur le traitement des vrais liens ----------------------
   .wk-footer-col a est en 14 px ; sans cette règle les « coming soon » héritent
   du 16 px du corps de page et cassent l'échelle typographique de la colonne.
   La couleur reste dans la palette du footer, simplement estompée.           */
.wk-footer-cs {
  align-self: flex-start;
  font-size: 14px;
  color: var(--footer-text);
  opacity: .65;
}

/* Footer : à droite de l'entrée (la colonne est verticale) */
.wk-footer-cs .wk-cs-label {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--footer-strong);
}

/* Dernière colonne : le libellé bascule à gauche, sinon il déborde du viewport
   (3 px de scroll horizontal — un élément en visibility:hidden compte toujours
   dans l'overflow scrollable).                                               */
.wk-footer-top > .wk-footer-col:last-child .wk-cs-label {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 10px;
}

/* --- Formulaire de contact ---------------------------------------------------
   Champ piège : retiré de l'écran sans être retiré du DOM. Ni `display:none`
   ni `hidden`, qu'un robot un peu sérieux détecte et saute — d'où le décalage
   hors cadre, qui laisse le champ « réel » pour un remplissage automatique.  */
.home-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Retour de soumission, rendu par le serveur après la redirection.
   Sur le fond sombre de la section contact. */
.home-contact-status {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--home-on-dark);
}
.home-contact-status[data-state="success"] { color: #7fd1b9; }
.home-contact-status[data-state="error"]   { color: #ff9b8a; }

/* --- Pointeurs tactiles ------------------------------------------------------
   Sans survol, un élément seulement grisé ne dit rien : le libellé est affiché
   en permanence, dans le flux (le menu déroulant et le footer empilé ont la
   place).                                                                    */
@media (hover: none) {
  .wk-nav-cs .wk-cs-label,
  .wk-footer-cs .wk-cs-label {
    position: static;
    transform: none;
    margin: 0 0 0 8px;
    opacity: 1;
    visibility: visible;
  }
}