/* vitrine.css — résiduel Tailwind (animations + helpers non-générables sans build) */

/* 1. Keyframes (helpers, ex. shimmer pour skeletons) */
@keyframes shimmer {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1;  }
}

/* 2. Scroll reveal — TRANSITION (pas animation) pour ne pas écraser le transform du hover.
   Une animation 'forwards' verrouille la valeur finale du transform (translateY(0)) et bloque
   le hover:-translate-y-2 (CSS animations > CSS rules en cascade). Avec une transition simple,
   le hover peut reprendre la main. La JS définit déjà transition-delay pour le stagger. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Grille de fond hero */
.hero-grid-bg {
  background-image:
    linear-gradient(rgba(249,115,22,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 100%);
}

/* 4. TOC scroll spy hiérarchique (style ca-patcher centralAdmin) */
.toc-item.active {
  color: #f97316 !important;
  background: rgba(249,115,22,.08);
  border-radius: 6px;
}
/* Niveaux h3/h4 : repliés par défaut, dépliés via .is-visible */
.toc-item.is-h3,
.toc-item.is-h4 {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition:
    max-height .35s cubic-bezier(.4,0,.2,1),
    opacity .25s ease,
    padding-top .35s,
    padding-bottom .35s,
    color .15s,
    background .2s;
}
.toc-item.is-h3 { padding-left: 1.25rem; font-size: .7rem; }
.toc-item.is-h4 { padding-left: 2rem;    font-size: .65rem; opacity: 0; }
.toc-item.is-h3.is-visible,
.toc-item.is-h4.is-visible {
  max-height: 3em;
  opacity: 1;
  pointer-events: auto;
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.toc-item.is-current {
  /* Trait orange à gauche SANS modifier l'indentation (box-shadow inset au lieu de border-left
     qui aurait obligé à réduire padding-left → casserait le retrait des h3/h4 actifs) */
  box-shadow: inset 2px 0 0 #f97316;
}

/* 5. Hover vidéo feature
   La vidéo est cachée par défaut (le poster image / logo reste visible).
   Au hover : le poster fade out + la vidéo fade in.
   Au mouseleave : poster fade in + vidéo fade out → garantit le retour à l'image au repos
   (sinon Chrome affiche la première frame de la vidéo après play() + pause() + currentTime=0). */
.video-feature .poster { transition: opacity 0.3s ease; }
.video-feature video { opacity: 0; transition: opacity 0.3s ease; }
.video-feature:hover .poster { opacity: 0; }
.video-feature:hover video { opacity: 1; }

/* 6. Nav dropdown desktop */
.nav-dropdown-wrapper:hover .nav-dropdown-menu,
.nav-dropdown-wrapper:focus-within .nav-dropdown-menu {
  display: block;
}
/* Bridge invisible généreux : couvre le gap (mt-2 = 8px) entre le bouton et le
   menu + overlap dans le bouton/menu + safety horizontal pour absorber un
   trajet diagonal lent sans perdre le :hover du wrapper.
   Note : `top: -16px` se réfère au padding edge du menu (pas au border edge)
   à cause de position:absolute → le 1px de border décale d'1px, d'où la
   marge confortable. */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -8px;
  right: -8px;
  height: 20px;
}

/* 7. Maintenance banners */
.maintenance-banner {
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
}
.maintenance-banner-1 { background: #78350f; color: #fde68a; }
.maintenance-banner-2 { background: #7c2d12; color: #fed7aa; }
.maintenance-banner-3 { background: #450a0a; color: #fca5a5; }

/* 8. Gel du hover-lift pendant la saisie dans un formulaire imbriqué.
   :focus-within:hover = spécificité 0,3,0 > Tailwind hover:-translate-y-2 (0,2,0).
   Empêche le jitter causé par la liste d'autocomplétion native (qui vole le :hover
   de la carte le temps qu'elle est ouverte). */
.reveal-target:focus-within:hover {
  transform: translateY(0);
}

/* 9. Préférence réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible { transition: none; opacity: 1; transform: none; }
  video { display: none !important; }
}

/* 10. Richtext — rendu du contenu WYSIWYG (richtext_render() côté frontend).
   Tailwind preflight zéro les styles par défaut des éléments structurels
   (h1-h6, p, ul/ol, blockquote, etc.) → on les réapplique ici dans le scope
   .richtext pour qu'ils s'affichent correctement. Cohérent avec
   admin/assets/css/tinymce-content.css.php (style de l'iframe TinyMCE) :
   l'admin voit la même chose que le visiteur. */
.richtext {
  color: #94a3b8; /* text-secondary */
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.richtext > *:first-child { margin-top: 0; }
.richtext > *:last-child  { margin-bottom: 0; }
.richtext h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: #f1f5f9; /* text-primary */
  margin: 1em 0 0.5em;
}
.richtext h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: #f1f5f9;
  margin: 1em 0 0.5em;
}
.richtext h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: #f1f5f9;
  margin: 1em 0 0.5em;
}
.richtext p     { margin: 0 0 1em; }
.richtext strong{ font-weight: 700; color: #f1f5f9; }
.richtext em    { font-style: italic; }
.richtext s     { text-decoration: line-through; opacity: .7; }
.richtext sub   { font-size: .75em; vertical-align: sub;   line-height: 0; }
.richtext sup   { font-size: .75em; vertical-align: super; line-height: 0; }
.richtext a     { color: #f97316; text-decoration: underline; }
.richtext a:hover { color: #ea580c; }
.richtext ul, .richtext ol { padding-left: 1.5em; margin: 0 0 1em; }
.richtext ul { list-style: disc; }
.richtext ol { list-style: decimal; }
.richtext li { margin: .25em 0; }
.richtext blockquote {
  border-left: 3px solid #f97316;
  padding-left: 1em;
  margin: 1em 0;
  color: #cbd5e1;
  font-style: italic;
}
.richtext code,
.richtext pre {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
}
.richtext code { padding: 2px 6px; }
.richtext pre  { padding: 12px; overflow-x: auto; margin: 1em 0; }
.richtext img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
  border-radius: 6px;
}
.richtext hr {
  border: 0;
  border-top: 1px solid #334155; /* surface-border */
  margin: 2em 0;
}
.richtext table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 14px;
}
.richtext th,
.richtext td {
  border: 1px solid #334155;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.richtext th {
  background: rgba(255,255,255,0.04);
  font-weight: 700;
  color: #f1f5f9;
}

/* Field-specific defaults (matche admin/assets/css/tinymce-content.css.php) */
.richtext.field-description {
  font-family: var(--font-body);
  font-weight: 400;
}

/* ── Maintenance niveau 3 — layout sticky header/footer ────────────────── */
body.is-maintenance-full {
  display: flex;
  flex-direction: column;
}
body.is-maintenance-full main {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.is-maintenance-full main > .maintenance-banner {
  position: relative;
  z-index: 1;
}
body.is-maintenance-full footer {
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Splide carousel — overrides brand
   ══════════════════════════════════════════════════════════════════════════ */
.splide__arrow {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--surface-border, #334155);
  transition: background-color 0.2s ease;
}
.splide__arrow:hover { background: rgba(249, 115, 22, 0.6); }
.splide__arrow svg   { fill: #f1f5f9; }
.splide__arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.splide__pagination__page {
  background: var(--surface-border, #334155);
  opacity: 1;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.splide__pagination__page.is-active {
  background: var(--brand, #f97316);
  transform: scale(1.4);
}