/*
Theme Name: EBEX Productions
Theme URI: https://ebexprod.com
Author: EBEX Productions
Description: Thème sur-mesure pour EBEX Productions, agence photo & vidéo B2B (Cachan, 94). Basé sur la charte graphique officielle (crème, gris, orange #F24405, marine #14152A).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Usage privé
Text Domain: ebex-productions
*/

/* ============================================================
   EBEX Productions — Prototype site vitrine
   style.css — feuille de style unique, partagée par toutes les pages
   ------------------------------------------------------------
   SOMMAIRE
   01. Variables & thèmes d'accent (orange / violet)
   02. Base & typographie
   03. Texture de fond (grain + halos)
   04. Header / navigation
   05. Boutons & liens
   06. Hero (accueil) — signature "double cadre"
   07. Sections génériques & titres
   08. Cartes segments
   09. Bandeau zones desservies
   10. Placeholders photo / vidéo
   11. Portfolio
   12. Équipe
   13. Configurateur de devis
   14. Contact
   15. Footer
   16. Sélecteur d'accent (outil de validation interne)
   17. Animations d'apparition (scroll reveal)
   18. Responsive
   19. Accessibilité (focus, reduced motion)
   ============================================================ */

/* ---------- 01. Variables & thèmes d'accent ---------- */
:root {
  /* Fond & encre */
  --bg: #1A1B32;
  --bg-soft: #20213E;
  --bg-deep: #14152A;
  --ink: #F2F0E4;
  --ink-dim: rgba(242, 240, 228, 0.66);
  --ink-faint: rgba(242, 240, 228, 0.40);
  --line: rgba(242, 240, 228, 0.12);

  /* Accent — déclinaison ORANGE (par défaut) */
  --accent: #F24405;
  --accent-soft: rgba(242, 68, 5, 0.16);
  --on-accent: #14152A; /* texte marine sur orange : meilleur contraste */

  /* Rythme */
  --radius: 14px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 10vw, 128px);

  /* Typo — Arial imposé par la charte */
  --font: Arial, Helvetica, sans-serif;
}

/* ---------- 02. Base & typographie ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.01em; }

h1 { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 700; }

p { color: var(--ink-dim); max-width: 58ch; }

img, video { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Étiquette de section ("eyebrow") */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.container { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- 03. Texture de fond ---------- */
/* Grain subtil (SVG bruit) + halos radiaux discrets, fixes derrière le contenu */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 85% -5%, var(--accent-soft), transparent 60%),
    radial-gradient(700px 500px at -10% 40%, rgba(245,245,245,0.045), transparent 60%),
    radial-gradient(800px 700px at 60% 110%, var(--accent-soft), transparent 65%),
    var(--bg);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 04. Header / navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(26, 26, 46, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}

/* Wordmark placeholder — à remplacer par le logo définitif */
.wordmark {
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark .dot { color: var(--accent); } /* détail accent, remplaçable */

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  color: var(--ink-dim);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s;
}
.main-nav a:hover, .main-nav a[aria-current="page"], .main-nav .current-menu-item > a { color: var(--ink); text-decoration: none; }
.main-nav a[aria-current="page"], .main-nav .current-menu-item > a { position: relative; }
.main-nav a[aria-current="page"]::after, .main-nav .current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Burger mobile */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  padding: 8px 12px;
  font-size: 1rem;
  cursor: pointer;
}

/* ---------- 05. Boutons ---------- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px) scale(1.02); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 06. Hero — signature "double cadre" ---------- */
.hero {
  padding-block: clamp(56px, 9vw, 120px) var(--section-y);
  display: grid;
  gap: clamp(32px, 5vw, 72px);
}
.hero-copy { max-width: 680px; }
.hero-copy h1 .accent { color: var(--accent); }
.hero-copy p { font-size: 1.12rem; margin-top: 18px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Deux cadres PHOTO / VIDÉO qui convergent en une seule composition.
   Traduction visuelle du positionnement : deux métiers, une équipe. */
.hero-frames {
  position: relative;
  height: clamp(260px, 42vw, 460px);
}
.frame {
  position: absolute;
  width: 62%;
  height: 78%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.4s ease;
}
.frame-photo {
  left: 0;
  top: 0;
  transform: rotate(-2.5deg);
  animation: frame-in-left 1s ease both;
}
.frame-video {
  right: 0;
  bottom: 0;
  transform: rotate(2.5deg);
  animation: frame-in-right 1s ease 0.15s both;
}
@keyframes frame-in-left { from { transform: translateX(-60px) rotate(-8deg); opacity: 0; } to { transform: rotate(-2.5deg); opacity: 1; } }
@keyframes frame-in-right { from { transform: translateX(60px) rotate(8deg); opacity: 0; } to { transform: rotate(2.5deg); opacity: 1; } }

/* Badge à l'intersection des deux cadres */
.hero-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 900;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  animation: badge-pop 0.5s ease 0.9s both;
  text-align: center;
}
@keyframes badge-pop { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ---------- 07. Sections ---------- */
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { margin-top: 10px; }

/* ---------- 08. Cartes segments ---------- */
.segments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.segment-card {
  display: block;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  color: var(--ink);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.segment-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  text-decoration: none;
}
.segment-card .seg-tag {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.segment-card h3 { margin-block: 10px 8px; }
.segment-card p { font-size: 0.95rem; }
.segment-card .seg-more { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 0.9rem; color: var(--accent); }

/* ---------- 09. Bandeau zones desservies ---------- */
.zones {
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
  padding-block: clamp(40px, 6vw, 72px);
}
.zones-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
}
.zone-item {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
}
.zone-item strong { display: block; font-size: 1.05rem; }
.zone-item span { color: var(--ink-dim); font-size: 0.9rem; }

/* Compteurs animés */
.stats { display: flex; gap: clamp(28px, 6vw, 72px); flex-wrap: wrap; margin-top: 36px; }
.stat .num { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: var(--accent); }
.stat .label { color: var(--ink-dim); font-size: 0.9rem; }

/* ---------- 10. Placeholders photo / vidéo ----------
   Tous les visuels réels sont remplacés par des blocs clairement
   identifiés comme provisoires (hachures + libellé). */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(245,245,245,0.05) 0 12px,
      transparent 12px 24px),
    linear-gradient(160deg, var(--bg-soft), var(--bg-deep));
  color: var(--ink-faint);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  border-radius: inherit;
}
.ph .ph-label { position: relative; z-index: 1; padding: 8px 14px; background: rgba(20,20,42,0.7); border-radius: 8px; }
/* Pictogramme "lecture" pour les placeholders vidéo */
.ph-video::before {
  content: "";
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  position: absolute;
  top: calc(50% - 62px);
  left: calc(50% - 29px);
  background:
    linear-gradient(transparent, transparent) padding-box;
}
.ph-video::after {
  content: "";
  position: absolute;
  top: calc(50% - 44px);
  left: calc(50% - 6px);
  border-left: 16px solid var(--accent);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Grand placeholder showreel */
.showreel {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  height: clamp(240px, 46vw, 520px);
}

/* ---------- 11. Portfolio ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.portfolio-grid .tile {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.portfolio-grid .tile:hover { transform: scale(1.02); border-color: var(--accent); }
.portfolio-grid .tile-wide { grid-column: span 2; }

/* ---------- 12. Équipe ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.team-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.team-card .ph { min-height: 260px; border-radius: 0; }
.team-card .team-info { padding: 22px; }
.team-card .team-role { color: var(--accent); font-weight: 700; font-size: 0.9rem; margin-top: 4px; }
.team-card .team-bio { font-size: 0.92rem; margin-top: 10px; }

.story {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 48px);
  margin-top: 48px;
}
.story p + p { margin-top: 14px; }

/* ---------- 13. Configurateur de devis ---------- */
.configurator {
  max-width: 760px;
  margin-inline: auto;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px);
}

/* Barre de progression */
.steps-bar { display: flex; gap: 8px; margin-bottom: 32px; }
.steps-bar .step-dot {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background 0.3s ease;
}
.steps-bar .step-dot.active { background: var(--accent); }

.step-label { color: var(--ink-faint); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.config-step h2 { margin-block: 8px 24px; font-size: clamp(1.3rem, 3vw, 1.8rem); }

/* Transitions douces entre étapes */
.config-step { animation: step-in 0.35s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.config-step.leaving { animation: step-out 0.25s ease both; }
@keyframes step-out { to { opacity: 0; transform: translateX(-24px); } }

/* Options sous forme de cartes cliquables */
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.option-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
  font-weight: 600;
}
.option-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.option-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.option-card .opt-sub { display: block; font-weight: 400; color: var(--ink-dim); font-size: 0.88rem; margin-top: 4px; }
.option-card.featured { border-color: var(--accent); }
.option-card.featured::after {
  content: "Recommandé";
  position: absolute;
  top: -10px; right: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Champs de formulaire */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 0.94rem; margin-bottom: 8px; }
.field .hint { color: var(--ink-faint); font-weight: 400; font-size: 0.84rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 0.98rem;
  transition: border-color 0.18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field textarea { min-height: 120px; resize: vertical; }

/* Groupes de choix (radio/checkbox stylisés en puces) */
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--bg);
  transition: border-color 0.18s ease, background 0.18s ease;
  user-select: none;
}
.chip:hover { border-color: var(--accent); }
.chip.selected { border-color: var(--accent); background: var(--accent-soft); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }

.config-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.config-nav .btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Écran de confirmation */
.config-done { text-align: center; padding-block: 24px; }
.config-done .done-icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 1.6rem;
  font-weight: 900;
}

/* ---------- 14. Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(28px, 5vw, 64px); }
.contact-aside .aside-block { margin-bottom: 26px; }
.contact-aside .aside-block h3 { margin-bottom: 6px; }

/* ---------- 15. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 40px;
  margin-top: var(--section-y);
  background: var(--bg-deep);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.site-footer p { font-size: 0.88rem; color: var(--ink-faint); }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-nav a { color: var(--ink-dim); font-size: 0.88rem; }

/* ---------- 17. Animations d'apparition (scroll reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Parallaxe légère (appliquée en JS via variable) */
.parallax { transform: translateY(calc(var(--py, 0) * 1px)); will-change: transform; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 900px) {
  .segments-grid, .team-grid { grid-template-columns: 1fr 1fr; }
  .zones-list { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line);
    padding: 20px var(--gutter);
    gap: 16px;
  }
  .main-nav.open { display: flex; }
  .segments-grid, .team-grid, .zones-list, .portfolio-grid, .option-grid { grid-template-columns: 1fr; }
  .portfolio-grid .tile-wide { grid-column: span 1; }
  .hero-frames { height: 300px; }
  .frame { width: 72%; }
}

/* ---------- 19. Accessibilité ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .parallax { transform: none; }
}


/* ---------- 20. Logo (ajout thème WordPress) ---------- */
.site-logo { display: flex; align-items: center; }
.site-logo img { height: 36px; width: auto; display: block; }