/* =============================================================
 *  Skilldesign Hero — styles autonomes (aucune dépendance au thème).
 *
 *  Aucune police n'est chargée ni imposée : la typographie est héritée du thème.
 *
 *  Personnalisation : redéfinis les variables --skilldesign-* dans le CSS de ton
 *  thème, par exemple :
 *    .skilldesign-hero {
 *      --skilldesign-gold: #b8860b;      // fond du bouton principal
 *      --skilldesign-navy-1: #101820;    // fond visible au chargement
 *    }
 *  Les couleurs se règlent aussi page par page depuis la metabox du hero.
 * ============================================================= */

:root {
  /* Palette par défaut volontairement NEUTRE (noir et blanc) : un plugin
     réutilisé de site en site ne doit imposer aucune couleur de marque. Chaque
     page choisit les siennes dans la metabox du hero. */
  --skilldesign-navy-1: #111111;                          /* fond du hero pendant le chargement */
  --skilldesign-gold: #000000;                            /* fond du bouton principal */
  --skilldesign-gold-dark: #333333;                       /* survol du bouton principal */
  --skilldesign-text-dark: #000000;                       /* texte des boutons à fond clair */
  --skilldesign-dot: #ffffff;                             /* point actif du diaporama */
  --skilldesign-hero-h: 700px;                            /* hauteur desktop */

  /* Aucune variable de police ici, volontairement : le hero n'impose aucune
     typographie et n'en charge aucune. Titres, textes et boutons héritent
     intégralement de celle du thème. Pour une police différente dans le hero,
     la cibler depuis le CSS du thème (.skilldesign-slide__title, etc.). */

  /* -- Apparition du texte -- */
  --skilldesign-reveal-dur: 1.8s;
  --skilldesign-reveal-ease: cubic-bezier(.4, 0, .2, 1);
}

.skilldesign-hero {
  position: relative;
  width: 100%;
  height: var(--skilldesign-hero-h);
  overflow: hidden;
  background: var(--skilldesign-navy-1);

  /* -------------------------------------------------------------------------
   * Résistance aux mises en page du thème hôte.
   *
   * Tout le contenu du hero est en position: absolute — sa hauteur intrinsèque
   * est donc NULLE. Placé dans un conteneur « display: flex; flex-direction:
   * column » (le .off-canvas-content de tout thème JointsWP / Foundation),
   * flex-shrink l'écrase à 0 malgré son height: 700px : le markup est présent,
   * la CSS chargée, et la section invisible.
   *
   * Chacune de ces règles est INERTE hors de son contexte : flex n'agit que
   * dans un conteneur flex, grid-column que dans une grille, etc. Aucune ne
   * change le rendu d'un site où le hero s'affiche déjà correctement.
   * ---------------------------------------------------------------------- */
  flex: 0 0 auto;        /* conteneur flex : ne jamais écraser ni étirer */
  grid-column: 1 / -1;   /* conteneur grid : occuper toute la ligne */
  max-width: none;       /* neutralise un max-width hérité du thème */
  float: none;           /* neutralise un float hérité */
  contain: none;         /* évite qu'un confinement ne fausse la hauteur */
}

/* -------------------------------------------------------------------------
 * Sortie pleine largeur (case « pleine largeur » de la metabox).
 *
 * La largeur de référence est --skilldesign-vw, publiée par le plugin avec la
 * largeur RÉELLE de la zone de contenu (documentElement.clientWidth). On ne
 * s'appuie pas sur 100vw pour la valeur nominale : cette unité inclut la barre
 * de défilement (~15 px sous Windows) et ferait déborder le hero.
 *
 * Le repli, lui, est bien 100vw et non 100% : un repli à 100% donne la largeur
 * du CONTENEUR, souvent une colonne étroite de constructeur de page, et le hero
 * saute en pleine largeur dès que la variable arrive. 100vw est juste à quelques
 * pixels près dès le premier rendu — et sur mobile, où les barres de défilement
 * sont en surimpression, il est exact.
 * ---------------------------------------------------------------------- */
.skilldesign-hero--full {
  width: var(--skilldesign-vw, 100vw);
  max-width: var(--skilldesign-vw, 100vw);
  margin-left: calc(50% - var(--skilldesign-vw, 100vw) / 2);
  margin-right: calc(50% - var(--skilldesign-vw, 100vw) / 2);
}

/* Filet de sécurité contre le débordement : pendant un redimensionnement (la
   mesure peut avoir une frame de retard) et sur le repli 100vw quand le
   JavaScript est indisponible. « clip » et non « hidden » : hidden ferait du
   body un conteneur de défilement et casserait les en-têtes en position: sticky.
   Deux sélecteurs pour un même effet : :has() agit sans JavaScript, la classe
   prend le relais sur les navigateurs qui ne le connaissent pas encore. */
body:has(.skilldesign-hero--full),
body.skilldesign-hero-has-full {
  overflow-x: clip;
}
.skilldesign-hero__viewport { position: absolute; inset: 0; }
.skilldesign-hero__nav {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 5;
  display: flex; justify-content: center; gap: 10px;
}

.skilldesign-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease;
}
.skilldesign-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* image de fond + Ken Burns */
.skilldesign-slide__bg {
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover; background-position: center;
  transform: scale(1.04);
}
.skilldesign-slide.is-active .skilldesign-slide__bg {
  animation: skilldesign-kenburns 8s ease-out forwards;

  /* will-change UNIQUEMENT sur le slide affiché.
   *
   * Posé sur tous les .skilldesign-slide__bg, il promeut en couche GPU autant
   * de plein-écrans qu'il y a de slides — cinq images plein cadre gardées en
   * mémoire vidéo en permanence. Sur téléphone, iOS finit par libérer ces
   * textures et repeint la zone en NOIR OPAQUE le temps de la reconstruire, à
   * chaque changement de slide. C'est aussi un contresens : will-change est une
   * pré-annonce, elle ne vaut que juste avant l'animation, pas à demeure. */
  will-change: transform;
}

/* contenu */
.skilldesign-slide__content {
  position: absolute; inset: 0; z-index: 3;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; max-width: 1500px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  text-align: center;
}
.skilldesign-slide__inner { max-width: 680px; }

.skilldesign-slide__eyebrow {
  margin: 0 0 14px;
  font-weight: 600; font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--skilldesign-gold, #fff);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.skilldesign-slide__title {
  margin: 0 0 18px;
  font-weight: 600; color: var(--skilldesign-title-color, #fff);
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18;
  overflow-wrap: break-word;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.skilldesign-slide__subtitle {
  margin: 0 0 30px;
  font-weight: 400; color: var(--skilldesign-text-color, #fff);
  font-size: clamp(15px, 1.4vw, 20px); line-height: 1.55; opacity: .95;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.skilldesign-slide__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* apparition en cascade */
.skilldesign-slide__eyebrow,
.skilldesign-slide__title,
.skilldesign-slide__subtitle,
.skilldesign-slide__actions { opacity: 0; transform: translateY(30px); }
.skilldesign-slide.is-active .skilldesign-slide__eyebrow  { animation: skilldesign-reveal var(--skilldesign-reveal-dur) var(--skilldesign-reveal-ease) .35s forwards; }
.skilldesign-slide.is-active .skilldesign-slide__title    { animation: skilldesign-reveal var(--skilldesign-reveal-dur) var(--skilldesign-reveal-ease) .6s  forwards; }
.skilldesign-slide.is-active .skilldesign-slide__subtitle { animation: skilldesign-reveal var(--skilldesign-reveal-dur) var(--skilldesign-reveal-ease) 1.1s forwards; }
.skilldesign-slide.is-active .skilldesign-slide__actions  { animation: skilldesign-reveal var(--skilldesign-reveal-dur) var(--skilldesign-reveal-ease) 1.6s forwards; }

/* boutons (auto-stylés, surchargeables via les variables) */
.skilldesign-btn {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none; padding: 10px 30px;
  border: none; cursor: pointer;
  transition: all .3s ease;
}
.skilldesign-btn--primary { background: var(--skilldesign-gold); color: var(--skilldesign-btn-text, #fff); }
.skilldesign-btn--primary:hover { background: var(--skilldesign-gold-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.skilldesign-btn--light { background: #fff; color: var(--skilldesign-text-dark); }
.skilldesign-btn--light:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }

/* Bouton secondaire (facultatif) : fond plein, sans contour. Fond clair par
   défaut pour se distinguer du bouton principal tout en restant lisible sur
   une photo. Les deux couleurs se règlent depuis la metabox du hero. */
.skilldesign-btn--secondary { background: var(--skilldesign-btn2, #fff); color: var(--skilldesign-btn2-text, var(--skilldesign-text-dark)); }
.skilldesign-btn--secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }

.skilldesign-dot {
  width: 11px; height: 11px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .45); transition: background .2s, width .2s;
}
.skilldesign-dot.is-active { background: var(--skilldesign-dot, var(--skilldesign-gold)); width: 28px; border-radius: 6px; }

.skilldesign-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 20px; line-height: 1;
  display: grid; place-items: center; transition: background .2s;
}
.skilldesign-arrow:hover { background: rgba(255, 255, 255, 0.5); }
.skilldesign-arrow--prev { left: 18px; }
.skilldesign-arrow--next { right: 18px; }

/* =============================================================
 *  MOBILE — panneau plein dégradé bas→haut, contenu centré,
 *  boutons empilés pleine largeur.
 * ============================================================= */
@media (max-width: 860px) {
  :root { --skilldesign-hero-h: auto; }

  .skilldesign-hero { min-height: 88vh; min-height: 88svh; }

  /* image mobile dédiée si renseignée, sinon repli sur l'image desktop */
  .skilldesign-slide__bg { background-image: var(--bg-mobile, var(--bg)); }

  .skilldesign-slide__content { justify-content: center; padding: 0 32px; }
  .skilldesign-slide__inner { max-width: none; }
  .skilldesign-slide__title { max-width: none; }
  .skilldesign-slide__subtitle { font-size: 17px; }
  .skilldesign-slide__actions { flex-direction: column; align-items: stretch; }
  .skilldesign-slide__actions .skilldesign-btn { flex: 0 0 auto; text-align: center; }

  .skilldesign-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skilldesign-slide__bg,
  .skilldesign-slide__eyebrow, .skilldesign-slide__title, .skilldesign-slide__subtitle, .skilldesign-slide__actions {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

@keyframes skilldesign-kenburns {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.16) translate(-2%, -1.5%); }
}
@keyframes skilldesign-reveal  { to { opacity: 1; transform: translateY(0); } }
@keyframes skilldesign-fade-in { from { opacity: 0; } to { opacity: 1; } }