/*
Theme Name: Kolonw
Theme URI: https://dojocamppara.test
Author: Maiga
Description: Thème sur mesure pour le Dojo Camppara — Équipe, Événements et Galerie gérés depuis wp-admin, compatible Elementor gratuit.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kolonw
*/

:root{
  --dj-black:#0D0D0D;
  --dj-black-2:#1A1414;
  --dj-red:#C81E1E;
  --dj-red-2:#8F1414;
  --dj-white:#FFFFFF;
  --dj-text-muted:#C9C0C0;
  --dj-bg-light:#F7F5F5;
  --dj-border:#E8E0E0;
}
body,button,input,select,textarea{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
body{ color:#1A1414; margin:0; }
h1,h2,h3,h4,h5,h6,.dj-h1,.dj-h2,.dj-h3{ font-family:'Bebas Neue','Inter',sans-serif; letter-spacing:.02em; text-transform:uppercase; }
img{ max-width:100%; height:auto; }
a{ text-decoration:none; }

/* ===== Header ===== */
.dj-header{
  background:var(--dj-black); position:sticky; top:0; left:0; width:100%; z-index:999;
  border-bottom:3px solid var(--dj-red); box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.dj-header-inner{ max-width:1200px; margin:0 auto; padding:16px 24px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; }
.dj-logo{ font-family:'Bebas Neue',sans-serif; font-size:26px; font-weight:400; color:#fff; letter-spacing:.06em; margin:0; display:flex; align-items:center; }
.dj-logo p{ margin:0; }
.dj-logo a{ color:inherit; display:flex; align-items:center; }
/* Le logo Kolonw est fonce (texte gris/or) -> un fond clair arrondi lui garde un bon contraste
   sur le header noir, sans changer la charte rouge/noir du reste du site. */
.dj-logo img.custom-logo{ max-height:36px; width:auto; display:block; background:#fff; border-radius:8px; padding:6px 10px; }
/* Zone de widgets a cote du logo (Apparence > Widgets > En-tête) : le menu s'y trouve par
   defaut, mais on peut y ajouter/retirer/reorganiser n'importe quel autre widget librement. */
.dj-header-widgets{ display:flex; flex-direction:row; align-items:center; gap:20px; flex-wrap:wrap; }
.dj-header-widget{ display:flex; align-items:center; }
.dj-header-widget .widget-title{ font-size:12px; color:var(--dj-text-muted); margin:0 10px 0 0; text-transform:uppercase; letter-spacing:.03em; font-weight:700; }
/* Rend lisible/propre n'importe quel autre widget ajoute dans l'en-tête (téléphone, texte,
   réseaux sociaux...) : texte clair sur fond sombre, pas de puces de liste par defaut. */
.dj-header-widget{ color:#EDE6E6; font-size:13px; }
.dj-header-widget p{ margin:0; color:inherit; text-transform:none; }
.dj-header-widget a:not(.dj-nav a):not(.menu a){ color:inherit; }
.dj-header-widget ul{ list-style:none; margin:0; padding:0; }
.dj-header-widget .wp-block-social-links{ margin:0; }
/* .dj-header-widgets .menu : le widget natif "Menu de navigation" (place par defaut dans la
   zone En-tête) n'accepte pas de classe personnalisee et rend toujours class="menu" -> on
   cible aussi cette classe reelle pour que le menu garde son style si on le laisse tel quel. */
.dj-nav, .dj-header-widgets .menu{ display:flex; flex-direction:row; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.dj-nav li, .dj-header-widgets .menu li{ list-style:none; margin:0; position:relative; }
.dj-nav a, .dj-header-widgets .menu a{
  color:#EDE6E6; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  padding:8px 16px; border-radius:4px; transition:all .2s ease; display:inline-block;
}
.dj-nav a:hover, .dj-nav .current-menu-item > a, .dj-nav .current_page_item > a,
.dj-header-widgets .menu a:hover, .dj-header-widgets .menu .current-menu-item > a, .dj-header-widgets .menu .current_page_item > a{ background:var(--dj-red); color:#fff; }

/* ----- Sous-menus (menus deroulants crees dans Apparence > Menus) ----- */
.dj-nav .menu-item-has-children > a::after, .dj-header-widgets .menu .menu-item-has-children > a::after{ content:"▾"; display:inline-block; margin-left:6px; font-size:10px; opacity:.7; transform:translateY(-1px); }
.dj-nav .sub-menu, .dj-header-widgets .menu .sub-menu{
  list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0; min-width:210px;
  background:var(--dj-black-2); border:1px solid rgba(255,255,255,.08); border-radius:8px;
  box-shadow:0 18px 36px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:1000;
}
.dj-nav li:hover > .sub-menu, .dj-nav li:focus-within > .sub-menu,
.dj-header-widgets .menu li:hover > .sub-menu, .dj-header-widgets .menu li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.dj-nav .sub-menu li, .dj-header-widgets .menu .sub-menu li{ margin:0; }
.dj-nav .sub-menu a, .dj-header-widgets .menu .sub-menu a{ display:block; padding:10px 14px; border-radius:6px; white-space:nowrap; font-size:13px; }
.dj-nav > li:last-child > .sub-menu, .dj-nav > li:nth-last-child(2) > .sub-menu,
.dj-header-widgets .menu > li:last-child > .sub-menu, .dj-header-widgets .menu > li:nth-last-child(2) > .sub-menu{ left:auto; right:0; }
/* ----- Bouton "hamburger" (mobile uniquement) ----- */
.dj-nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px;
  background:transparent; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.dj-nav-toggle span{ display:block; width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
body.dj-nav-open .dj-nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.dj-nav-open .dj-nav-toggle span:nth-child(2){ opacity:0; }
body.dj-nav-open .dj-nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.dj-nav-overlay{ display:none; }

@media (max-width:900px){
  .dj-nav-toggle{ display:flex; }
  .dj-nav, .dj-header-widgets .menu{ flex-direction:column; align-items:flex-start; gap:2px; }
  .dj-nav .sub-menu, .dj-header-widgets .menu .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding:0 0 4px 18px; margin:0; }
  .dj-nav .menu-item-has-children > a::after, .dj-header-widgets .menu .menu-item-has-children > a::after{ display:none; }

  /* Le menu devient un panneau lateral qui glisse depuis la droite, cache par defaut. */
  .dj-header-widgets{
    position:fixed; top:0; right:0; height:100vh; width:min(300px, 82vw); z-index:1001;
    background:var(--dj-black); flex-direction:column; align-items:flex-start; gap:0;
    padding:88px 24px 24px; overflow-y:auto; box-shadow:-16px 0 40px rgba(0,0,0,.35);
    transform:translateX(100%); transition:transform .3s ease;
  }
  body.dj-nav-open .dj-header-widgets{ transform:translateX(0); }
  .dj-header-widget{ width:100%; }
  .dj-nav-overlay{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  }
  body.dj-nav-open .dj-nav-overlay{ opacity:1; visibility:visible; }
  body.dj-nav-open{ overflow:hidden; }
}

/* ===== Hero ===== */
.dj-hero{
  position:relative; min-height:600px; display:flex; align-items:center; padding:90px 24px;
  background-size:cover; background-position:center 30%; overflow:hidden;
}
.dj-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(13,13,13,.95) 0%, rgba(13,13,13,.85) 35%, rgba(20,10,10,.55) 65%, rgba(20,10,10,.25) 100%);
}
.dj-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--dj-red) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--dj-red) 6%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
}
.dj-hero-inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; width:100%; }
.dj-hero-content{ max-width:640px; }
.dj-badge{
  display:inline-block; background:color-mix(in srgb, var(--dj-red) 18%, transparent); border:1px solid color-mix(in srgb, var(--dj-red) 50%, transparent);
  color:color-mix(in srgb, var(--dj-red) 70%, white); padding:6px 16px; border-radius:100px; font-size:12px; font-weight:700;
  letter-spacing:1px; margin-bottom:22px; text-transform:uppercase; font-family:'Inter',sans-serif;
}
.dj-hero h1{ font-size:clamp(38px,6vw,64px); font-weight:400; color:#fff !important; line-height:1.05; margin:0 0 18px !important; }
.dj-hero h1 span{ color:var(--dj-red); }
.dj-cta-row{ display:flex; flex-direction:row; gap:14px; flex-wrap:wrap; }

/* ===== Boutons ===== */
.dj-btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:4px;
  font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease; border:2px solid transparent; font-family:'Inter',sans-serif;
  cursor:pointer;
}
.dj-btn:hover{ transform:translateY(-2px); }
/* Les boutons crees via le widget Elementor "button" posent leur classe sur le wrapper ->
   cibler aussi .elementor-button. Les boutons/liens en HTML brut (formulaire, pages de detail)
   portent la classe directement -> les selecteurs a.dj-btn- et button.dj-btn- couvrent ce cas. */
.dj-btn-primary .elementor-button, button.dj-btn-primary, a.dj-btn-primary{
  background:linear-gradient(90deg,var(--dj-red),var(--dj-red-2)) !important; color:#fff !important;
  box-shadow:0 8px 24px color-mix(in srgb, var(--dj-red) 40%, transparent) !important; border:none !important;
  font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important;
}
.dj-btn-primary .elementor-button:hover, button.dj-btn-primary:hover, a.dj-btn-primary:hover{ box-shadow:0 12px 30px color-mix(in srgb, var(--dj-red) 55%, transparent) !important; color:#fff !important; }
.dj-btn-outline .elementor-button, button.dj-btn-outline, a.dj-btn-outline{
  background:transparent !important; border:2px solid rgba(255,255,255,.5) !important; color:#fff !important;
  font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important;
}
.dj-btn-outline .elementor-button:hover, button.dj-btn-outline:hover, a.dj-btn-outline:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
.dj-btn-dark .elementor-button, button.dj-btn-dark, a.dj-btn-dark{
  background:var(--dj-black) !important; color:#fff !important; border:none !important;
  font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important;
}
.dj-btn-dark .elementor-button:hover, button.dj-btn-dark:hover, a.dj-btn-dark:hover{ box-shadow:0 8px 20px rgba(0,0,0,.4) !important; color:#fff !important; }
div.dj-btn{ border:none !important; background:none !important; box-shadow:none !important; padding:0 !important; }

/* ===== Sections ===== */
.dj-section{ padding:80px 24px; max-width:1200px; margin:0 auto; }
.dj-section-alt{ background:var(--dj-bg-light); }
.dj-section-dark{ background:var(--dj-black); }
.dj-eyebrow{ text-transform:uppercase; letter-spacing:2px; font-size:13px; font-weight:700; color:var(--dj-red); margin:0 0 12px; font-family:'Inter',sans-serif; }
/* NOTE : les widgets Elementor (heading/text) posent leur classe sur le DIV wrapper, pas sur
   l'element reel affiche -- il faut donc cibler explicitement .elementor-heading-title /
   .elementor-text-editor en plus du wrapper, et forcer avec !important (Elementor a ses
   propres styles par defaut sur ces elements, meme en version gratuite). */
.dj-h2, .dj-h2 .elementor-heading-title{ font-size:clamp(28px,4vw,44px) !important; font-weight:400 !important; color:var(--dj-black) !important; margin:0 0 16px !important; line-height:1.05 !important; }
.dj-section-dark .dj-h2, .dj-section-dark .elementor-heading-title{ color:#fff !important; }
.dj-lead, .dj-lead .elementor-text-editor, .dj-lead p{ font-size:17px !important; color:#4A4141 !important; max-width:680px; line-height:1.7 !important; margin:0 0 40px; }
.dj-section-dark .dj-lead, .dj-section-dark .dj-lead .elementor-text-editor, .dj-section-dark .dj-lead p{ color:var(--dj-text-muted) !important; }
.dj-tagline, .dj-tagline .elementor-text-editor, .dj-tagline p{ font-size:clamp(16px,2vw,19px) !important; color:#DCD2D2 !important; margin:0 0 32px; font-weight:400; text-transform:none; max-width:520px; line-height:1.6 !important; }
.dj-center, .dj-center .elementor-heading-title, .dj-center .elementor-text-editor, .dj-center p{ text-align:center !important; margin-left:auto; margin-right:auto; }

/* ===== Cartes valeurs / programmes =====
   Grilles "flexibles" : auto-fill+minmax calcule lui-meme le nombre de colonnes selon la
   largeur disponible, plutot qu'un nombre de colonnes fige -- les cartes s'adaptent donc
   naturellement (plus petites/plus nombreuses par ligne sur un grand ecran, empilees sur mobile)
   sans media queries a maintenir. */
.dj-grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.dj-card{ background:#fff; border:1px solid var(--dj-border); border-radius:6px; padding:30px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; position:relative; overflow:hidden; }
.dj-card::before{ content:""; position:absolute; top:0; left:0; width:4px; height:0; background:var(--dj-red); transition:height .25s ease; }
.dj-card:hover::before{ height:100%; }
.dj-card:hover{ transform:translateY(-5px); box-shadow:0 18px 36px rgba(0,0,0,.1); }
.dj-card-icon{
  width:56px; height:56px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--dj-red),var(--dj-red-2)) !important; color:#fff !important; margin-bottom:18px; box-shadow:0 6px 16px color-mix(in srgb, var(--dj-red) 35%, transparent);
}
.dj-card-icon svg{ width:26px; height:26px; }
.dj-card h3{ font-size:19px !important; font-weight:400 !important; color:var(--dj-black) !important; margin:0 0 10px !important; overflow-wrap:normal !important; word-break:normal !important; }
.dj-card p{ font-size:14.5px; color:#5A5050; line-height:1.65; margin:0; text-transform:none; }

/* ===== Galerie photo (accueil) ===== */
.dj-gallery{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.dj-gallery-item{ border-radius:6px; overflow:hidden; aspect-ratio:4/5; position:relative; }
.dj-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.dj-gallery-item:hover img{ transform:scale(1.06); }

/* ===== Images contenues ===== */
.dj-about-img, .dj-full-img{ border-radius:8px !important; overflow:hidden !important; }
.dj-about-img img, .dj-full-img img{ width:100% !important; height:100% !important; display:block; object-fit:cover !important; }
.dj-about-img{ aspect-ratio:4/3 !important; max-height:440px; }
.dj-full-img{ aspect-ratio:21/9 !important; max-height:520px; }

/* ===== Mise en page 2 colonnes ===== */
.dj-split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
@media (max-width:820px){ .dj-split{ grid-template-columns:1fr; } }

/* ===== Evenements ===== */
/* Nombre de cartes par ligne choisi dans Réglages > Réglages du thème (variable --dj-event-cols
   posee en inline sur la grille) ; repasse automatiquement a moins de colonnes sur petit ecran. */
.dj-events-grid{ display:grid; gap:24px; grid-template-columns:repeat(var(--dj-event-cols, 4), minmax(0, 1fr)); }
@media (max-width:900px){ .dj-events-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .dj-events-grid{ grid-template-columns:1fr; } }
.dj-event-card{
  background:#fff; border:1px solid var(--dj-border); border-radius:14px; overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  display:block; text-decoration:none; color:inherit;
}
.dj-event-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(0,0,0,.14); border-color:transparent; }
.dj-event-img{ aspect-ratio:16/10; overflow:hidden; position:relative; }
.dj-event-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.dj-event-card:hover .dj-event-img img{ transform:scale(1.08); }
.dj-event-date{ position:absolute; top:14px; left:14px; background:var(--dj-red); color:#fff; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:7px 14px; border-radius:100px; box-shadow:0 8px 18px color-mix(in srgb, var(--dj-red) 45%, transparent); }
.dj-event-body{ padding:24px; }
.dj-event-body h3{ font-size:18px !important; font-weight:400 !important; color:var(--dj-black) !important; margin:0 0 10px !important; }
.dj-event-body p{ font-size:13.5px; color:#5A5050; line-height:1.65; margin:0; text-transform:none; }
.dj-event-more{ display:inline-block; margin-top:16px; color:var(--dj-black); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; transition:color .2s ease, transform .2s ease; }
.dj-event-card:hover .dj-event-more{ color:var(--dj-red); transform:translateX(3px); }
.dj-event-date-inline{ display:inline-block; background:var(--dj-red); color:#fff; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:7px 14px; border-radius:100px; margin-bottom:12px; }

/* ----- Style "Minimaliste" : rangée compacte en jeton arrondi, pas d'image ----- */
.dj-event-card--minimaliste{ display:flex; align-items:center; gap:16px; background:var(--dj-bg-light); border:1px solid transparent; border-radius:12px; }
.dj-event-card--minimaliste:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.09); background:#fff; border-color:var(--dj-border); }
.dj-event-card--minimaliste .dj-event-body{ padding:18px 20px; flex:1; }

/* ----- Style "Encadré" : cadre colore permanent, coins adoucis, lueur au survol ----- */
.dj-event-card--encadre{ border:2px solid var(--dj-red); border-radius:14px; }
.dj-event-card--encadre:hover{ box-shadow:0 24px 48px color-mix(in srgb, var(--dj-red) 22%, transparent); }

/* ===== Galerie (page dediee) ===== */
/* Widget Elementor natif "Galerie basique" (image-gallery) : juste des images a ajouter
   depuis le panneau Elementor, aucun titre requis. On habille le rendu WordPress par
   defaut (balises dl/dt, id #gallery-N genere dynamiquement) en jolies cartes carrees. */
.elementor-image-gallery .gallery{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(180px, 240px)) !important; justify-content:center !important; gap:14px !important; margin:0 !important; }
/* WordPress insere un <br style="clear:both"> toutes les N photos (N = colonnes choisies dans
   Elementor) pour l'ancien systeme en float -- avec une grille CSS, ce <br> devient lui-meme
   une case de la grille et decale les photos suivantes : on le retire entierement de la grille. */
.elementor-image-gallery .gallery br{ display:none !important; }
/* Elementor fixe lui-meme un max-width en % selon le nombre de "Colonnes" choisi dans le widget
   (.gallery-columns-N .gallery-item{max-width:25%} etc., plus specifique que notre regle) : ce
   plafond l'emporte toujours sur width quelle que soit sa force, d'ou la necessite de l'annuler. */
.elementor-image-gallery .gallery-item{ float:none !important; width:100% !important; max-width:none !important; justify-self:stretch; margin:0 !important; border-radius:6px; overflow:hidden; aspect-ratio:1/1; position:relative; }
.elementor-image-gallery .gallery-icon{ display:block; height:100%; }
.elementor-image-gallery .gallery-icon a{ display:block; height:100%; }
.elementor-image-gallery .gallery img{ width:100% !important; height:100% !important; object-fit:cover; display:block; border:none !important; transition:transform .3s ease; }
.elementor-image-gallery .gallery-item:hover img{ transform:scale(1.06); }
.elementor-image-gallery .gallery-caption{ display:none; }
/* Cache le nom du fichier / la description qu'Elementor affiche sous la photo agrandie
   (visionneuse plein ecran au clic) -- juste la photo, sans texte en dessous. */
.elementor-slideshow__footer{ display:none !important; }

/* ===== Equipe ===== */
/* Nombre de cartes par ligne choisi dans Réglages > Réglages du thème (variable --dj-team-cols
   posee en inline sur la grille) ; repasse automatiquement a moins de colonnes sur petit ecran. */
.dj-team-grid{ display:grid; gap:24px; grid-template-columns:repeat(var(--dj-team-cols, 4), minmax(0, 1fr)); }
@media (max-width:900px){ .dj-team-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .dj-team-grid{ grid-template-columns:1fr; } }
.dj-team-card{
  background:#fff; border:1px solid var(--dj-border); border-radius:16px;
  text-align:center; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.dj-team-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--dj-red),var(--dj-red-2)); }
.dj-team-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(0,0,0,.14); border-color:transparent; }
.dj-team-card-link{ display:block; text-decoration:none; color:inherit; padding:32px 22px 22px; }
.dj-team-photo{ width:100px; height:100px; border-radius:50%; overflow:hidden; margin:0 auto 18px; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--dj-red); background:var(--dj-bg-light); }
.dj-team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dj-team-avatar-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--dj-black); color:var(--dj-red); font-family:'Bebas Neue',sans-serif; font-size:36px; }
.dj-team-photo-single{ width:140px; height:140px; border-radius:50%; overflow:hidden; margin:0 auto 24px; box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--dj-red); background:var(--dj-bg-light); }
.dj-team-photo-single img{ width:100%; height:100%; object-fit:cover; display:block; }
.dj-team-photo-single .dj-team-avatar-fallback{ font-size:52px; }
.dj-team-card h3{ font-size:18px !important; font-weight:700 !important; font-family:'Inter',sans-serif !important; text-transform:none !important; letter-spacing:0 !important; color:var(--dj-black) !important; margin:0 0 6px !important; }
.dj-team-role{ display:block; font-size:11.5px !important; color:var(--dj-red) !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.05em; margin:0 0 14px !important; }
.dj-team-bio{ font-size:13px !important; color:#5A5050 !important; line-height:1.6 !important; margin:0 !important; text-transform:none; }
.dj-team-more{ display:inline-block; margin-top:16px; color:var(--dj-black); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; transition:color .2s ease; }
.dj-team-card:hover .dj-team-more{ color:var(--dj-red); }

/* Icônes des réseaux sociaux d'un membre (Réglages du membre > Réseaux sociaux) : n'affiche
   que les reseaux renseignes, en petits ronds cliquables sous la carte. */
.dj-team-social{ display:flex; justify-content:center; gap:10px; padding:0 22px 24px; flex-wrap:wrap; }
.dj-team-social-icon{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--dj-bg-light); color:var(--dj-red); transition:background .2s ease, color .2s ease, transform .2s ease;
}
.dj-team-social-icon:hover{ background:var(--dj-red); color:#fff; transform:translateY(-2px); }
.dj-team-social-icon svg{ width:16px; height:16px; }

/* ----- Style "Minimaliste" : rangée compacte en jeton arrondi, avatar réduit, pas de bio ----- */
.dj-team-card--minimaliste{ display:flex; align-items:center; background:var(--dj-bg-light); border:1px solid transparent; border-radius:12px; }
.dj-team-card--minimaliste::before{ display:none; }
.dj-team-card--minimaliste:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.09); background:#fff; border-color:var(--dj-border); }
.dj-team-card--minimaliste .dj-team-card-link{ display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px; }
.dj-team-card--minimaliste .dj-team-photo{ width:52px; height:52px; margin:0; flex-shrink:0; box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--dj-red); }
.dj-team-card--minimaliste .dj-team-avatar-fallback{ font-size:20px; }
.dj-team-card--minimaliste .dj-team-info{ flex:1; }
.dj-team-card--minimaliste h3{ font-size:15px !important; margin:0 !important; }
.dj-team-card--minimaliste .dj-team-role{ margin:5px 0 0 !important; font-size:10px !important; }
.dj-team-card--minimaliste .dj-team-more{ display:none; }

/* ----- Style "Encadré" : cadre colore permanent, coins adoucis, photo carrée pleine largeur ----- */
.dj-team-card--encadre{ border:2px solid var(--dj-red); border-radius:14px; }
.dj-team-card--encadre::before{ display:none; }
.dj-team-card--encadre:hover{ box-shadow:0 24px 48px color-mix(in srgb, var(--dj-red) 22%, transparent); }
.dj-team-card--encadre .dj-team-card-link{ padding:0 0 22px; }
.dj-team-card--encadre .dj-team-photo{ width:100%; height:180px; border-radius:0; box-shadow:none; border-bottom:2px solid var(--dj-red); margin:0 0 18px; }
.dj-team-card--encadre .dj-team-avatar-fallback{ font-size:56px; }
.dj-team-card--encadre .dj-team-info{ padding:0 20px; }
.dj-team-card--encadre .dj-team-social{ padding:0 20px 22px; }
.dj-team-card--encadre .dj-team-role{ background:transparent; padding:0; }

/* ===== Bandeau statistiques ===== */
.dj-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:700px){ .dj-stats{ grid-template-columns:repeat(2,1fr); } }
/* Widget Elementor "Compteur" natif (editable sans code : Nombre final + Titre dans le panneau) */
.dj-stats .elementor-counter{ text-align:center; padding:10px; display:flex; flex-direction:column-reverse; }
.dj-stats .elementor-counter-number-wrapper, .dj-stats .elementor-counter-number{ font-family:'Bebas Neue',sans-serif; font-size:44px !important; color:var(--dj-red); line-height:1; }
.dj-stats .elementor-counter-title{ font-size:12.5px !important; color:var(--dj-text-muted) !important; text-transform:uppercase; letter-spacing:.08em; margin-top:6px !important; font-family:inherit !important; }

/* ===== CTA bande ===== */
.dj-cta-band{
  background:linear-gradient(100deg,var(--dj-black),var(--dj-black-2)); color:#fff; text-align:center;
  padding:64px 24px; border-radius:8px; margin:24px auto; max-width:1200px; position:relative; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--dj-red) 25%, transparent);
}
.dj-cta-band h2{ color:#fff !important; }
.dj-cta-band p{ color:var(--dj-text-muted) !important; margin:0 0 28px; text-transform:none; }

/* ===== Contact ===== */
.dj-contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
@media (max-width:820px){ .dj-contact-wrap{ grid-template-columns:1fr; } }
/* Coordonnées de la page Contact : widgets Elementor natifs "Boîte d'icône" (icon-box),
   directement editables (icone, titre, texte) dans le panneau Elementor -- aucun code. */
.dj-contact-info .elementor-icon-box-wrapper{ align-items:flex-start; gap:14px; margin-bottom:22px; }
.dj-contact-info .elementor-icon-box-icon{
  width:44px; height:44px; border-radius:6px; background:var(--dj-bg-light); display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.dj-contact-info .elementor-icon-box-icon svg{ width:18px; height:18px; fill:var(--dj-red); }
.dj-contact-info .elementor-icon-box-title{ margin:0 0 4px !important; font-size:14px !important; font-weight:700 !important; color:var(--dj-black) !important; text-transform:uppercase; letter-spacing:.04em; font-family:inherit !important; }
.dj-contact-info .elementor-icon-box-description{ margin:0 !important; color:#5A5050 !important; font-size:14.5px !important; text-transform:none; }

/* Compatibilite : ancien rendu par shortcode [dojo_contact_info] (pages Contact creees par
   une version plus ancienne du theme, jamais modifiees automatiquement depuis). */
.dj-info-item{ display:flex; gap:14px; margin-bottom:22px; align-items:flex-start; }
.dj-info-icon{
  width:44px; height:44px; border-radius:6px; background:var(--dj-bg-light); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; color:var(--dj-red);
}
.dj-info-item h4{ margin:0 0 4px; font-size:14px; font-weight:700; color:var(--dj-black); text-transform:uppercase; letter-spacing:.04em; }
.dj-info-item p, .dj-info-item a{ margin:0; color:#5A5050; font-size:14.5px; text-decoration:none; text-transform:none; }
.dj-info-item a:hover{ color:var(--dj-red); }

/* Style de formulaire commun : s'applique a notre propre formulaire (.dj-form) ET a n'importe
   quelle extension de formulaire de contact (Contact Form 7, WPForms...) placee sur le site,
   pour qu'un widget de formulaire garde toujours l'apparence du thème sans reglage supplementaire. */
.dj-form,
.elementor-widget-shortcode form,
.elementor-widget-form form{ background:#fff; border:1px solid var(--dj-border); border-radius:8px; padding:32px; }
.dj-form label,
.elementor-widget-shortcode form label,
.elementor-widget-form form label{ display:block; font-size:13px; font-weight:700; color:var(--dj-black); margin:0 0 6px; text-transform:uppercase; letter-spacing:.03em; }
.dj-form input, .dj-form select, .dj-form textarea,
.elementor-widget-shortcode form input[type="text"], .elementor-widget-shortcode form input[type="email"], .elementor-widget-shortcode form input[type="tel"], .elementor-widget-shortcode form input[type="url"], .elementor-widget-shortcode form input[type="number"], .elementor-widget-shortcode form input[type="date"], .elementor-widget-shortcode form select, .elementor-widget-shortcode form textarea,
.wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-email, .wpcf7-form-control.wpcf7-tel, .wpcf7-form-control.wpcf7-url, .wpcf7-form-control.wpcf7-number, .wpcf7-form-control.wpcf7-date, .wpcf7-form-control.wpcf7-select, .wpcf7-form-control.wpcf7-textarea{
  width:100%; padding:12px 14px; border:1px solid var(--dj-border); border-radius:4px; font-size:14.5px;
  margin-bottom:18px; box-sizing:border-box; background:#fff; font-family:inherit;
}
.dj-form input:focus, .dj-form select:focus, .dj-form textarea:focus,
.elementor-widget-shortcode form input:focus, .elementor-widget-shortcode form textarea:focus,
.wpcf7-form-control:focus{ outline:none; border-color:var(--dj-red); }
.dj-form button, .dj-form input[type="submit"],
.elementor-widget-shortcode form input[type="submit"], .elementor-widget-shortcode form button[type="submit"],
.wpcf7-form-control.wpcf7-submit{
  border:none; cursor:pointer; background:var(--dj-red); color:#fff; font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.04em; padding:14px 28px; border-radius:100px; transition:background .2s ease;
  width:100%; display:flex; justify-content:center; align-items:center;
}
.dj-form button:hover, .dj-form input[type="submit"]:hover,
.elementor-widget-shortcode form input[type="submit"]:hover,
.wpcf7-form-control.wpcf7-submit:hover{ background:var(--dj-red-2); }
.dj-form-message{ padding:16px 18px; border-radius:6px; margin-bottom:20px; font-size:14.5px; }
.dj-form-message-ok{ background:#eafaf0; border:1px solid #b8e6c9; color:#1c6b3a; }
.dj-form-message-error{ background:#fdecec; border:1px solid #f3b8b8; color:#a31313; }

/* Messages de reponse/validation propres a Contact Form 7 */
.wpcf7-form-control-wrap{ display:block; }
.wpcf7-not-valid-tip{ color:#a31313; font-size:12.5px; margin-top:-12px; margin-bottom:14px; display:block; text-transform:none; }
.wpcf7-response-output{ margin:16px 0 0; padding:14px 18px; border-radius:6px; font-size:14px; text-transform:none; }
.wpcf7-mail-sent-ok{ background:#eafaf0; border:1px solid #b8e6c9 !important; color:#1c6b3a; }
.wpcf7-validation-errors, .wpcf7-mail-sent-ng, .wpcf7-spam-blocked{ background:#fdecec; border:1px solid #f3b8b8 !important; color:#a31313; }
.wpcf7 form.sent .wpcf7-response-output{ border-color:#b8e6c9; }

/* ===== Footer ===== */
.dj-footer{ background:var(--dj-black); color:#fff; padding-top:56px; }
.dj-footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; padding:0 24px 32px; border-bottom:1px solid rgba(255,255,255,.1); max-width:1200px; margin:0 auto; }
@media (max-width:820px){ .dj-footer-top{ grid-template-columns:1fr; } }
.dj-footer-logo{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:24px; color:#fff; margin:0 0 14px; }
.dj-footer-col p{ color:var(--dj-text-muted); font-size:14px; line-height:1.7; max-width:320px; text-transform:none; }
.dj-footer-links, .dj-footer-col ul{ list-style:none; margin:0; padding:0; }
.dj-footer-links li, .dj-footer-col ul li{ margin-bottom:10px; list-style:none; }
.dj-footer-links li, .dj-footer-links li a, .dj-footer-col ul li, .dj-footer-col ul li a{ color:var(--dj-text-muted); font-size:14px; text-decoration:none; }
.dj-footer-links li a:hover, .dj-footer-col ul li a:hover{ color:var(--dj-red); }
.dj-footer-col .widget-title, .dj-footer-col h4{ color:#fff; font-size:14px; font-weight:700; margin-bottom:16px; text-transform:uppercase; letter-spacing:.04em; }
.dj-footer-col .textwidget p:first-child{ margin-top:0; }
.dj-footer-bottom{ padding:20px 24px; text-align:center; max-width:1200px; margin:0 auto; }
.dj-footer-bottom p{ color:#8A7D7D; font-size:13px; margin:0; text-transform:none; }

/* ===== Animations d'apparition ===== */
.dj-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.dj-reveal.dj-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .dj-reveal{ opacity:1 !important; transform:none !important; } }

/* ===== Import admin ===== */
.dj-import-box{ background:#fff; border:1px solid #ddd; padding:24px; max-width:640px; margin-top:20px; border-radius:6px; }

/* ===== Page evenement : colonne principale + colonne laterale (widgets) ===== */
.dj-event-single-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start; max-width:1000px; margin:0 auto; }
@media (max-width:820px){ .dj-event-single-wrap{ grid-template-columns:1fr; } }
.dj-event-sidebar .widget{ background:var(--dj-bg-light); border:1px solid var(--dj-border); border-radius:8px; padding:22px; margin-bottom:24px; }
.dj-event-sidebar .widget-title{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:20px; letter-spacing:.03em; color:var(--dj-black); margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--dj-red); }
.dj-recent-events-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.dj-recent-events-list li a{ display:block; text-decoration:none; color:inherit; }
.dj-recent-event-date{ display:block; font-size:11px; color:var(--dj-red); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.dj-recent-event-title{ display:block; font-size:14px; color:var(--dj-black); line-height:1.4; }
.dj-recent-events-list li a:hover .dj-recent-event-title{ color:var(--dj-red); }
.dj-sidebar-empty{ font-size:13px; color:#8A7D7D; margin:0; text-transform:none; }

/* ===== Commentaires (page evenement, comme un article WordPress) =====
   Le thème n'a pas son propre comments.php : WordPress utilise alors son modèle de secours
   (wp-includes/theme-compat/comments.php), qui a une structure et des classes différentes
   des thèmes modernes (ol.commentlist et non .comment-list, cite.fn et non b.fn, etc.).
   Ces sélecteurs ont été vérifiés sur un vrai commentaire publié en local, pas devinés. */
.comments-area{ margin-top:56px; padding-top:40px; border-top:1px solid var(--dj-border); }
.comments-area h3#comments, .comments-area .comment-reply-title{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:26px; letter-spacing:.03em; color:var(--dj-black); margin:0 0 24px; text-transform:none; }
.comments-area .navigation:empty{ display:none; }
.commentlist{ list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:14px; }
.commentlist ul.children{ list-style:none; margin:14px 0 0; padding:0 0 0 40px; display:flex; flex-direction:column; gap:14px; }
.commentlist .comment-body{ background:var(--dj-bg-light); border:1px solid var(--dj-border); border-radius:10px; padding:18px 20px; overflow:hidden; }
.commentlist .comment-author.vcard img.avatar{ float:left; width:44px; height:44px; border-radius:50%; margin:0 14px 8px 0; }
.commentlist .comment-author.vcard cite.fn{ font-style:normal; font-weight:700; font-size:14px; color:var(--dj-black); text-transform:none; }
.commentlist .comment-author.vcard .says{ display:none; }
.commentlist .comment-meta.commentmetadata{ font-size:12px; color:#8A7D7D; margin:2px 0 10px; text-transform:none; }
.commentlist .comment-meta.commentmetadata a{ color:inherit; }
.commentlist .comment-body p{ font-size:14px; color:#5A5050; line-height:1.6; margin:0; text-transform:none; clear:both; }
.commentlist .reply{ margin-top:10px; clear:both; }
.commentlist .reply a{ font-size:12px; font-weight:700; color:var(--dj-red); text-transform:uppercase; letter-spacing:.03em; text-decoration:none; }
.comment-respond{ background:var(--dj-bg-light); border:1px solid var(--dj-border); border-radius:8px; padding:28px; }
.comment-form p{ margin:0 0 16px; }
.comment-form label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--dj-black); margin-bottom:6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{ width:100%; padding:12px 14px; border:1px solid var(--dj-border); border-radius:6px; font-family:inherit; font-size:14px; background:#fff; box-sizing:border-box; }
.comment-form textarea{ min-height:120px; resize:vertical; }
.comment-form .form-submit{ margin-bottom:0; }
.comment-form .form-submit input[type="submit"]{ background:var(--dj-red); color:#fff; border:none; padding:12px 28px; border-radius:100px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; transition:background .2s ease; }
.comment-form .form-submit input[type="submit"]:hover{ background:var(--dj-red-2); }
.comment-notes, .logged-in-as{ font-size:13px; color:#8A7D7D; margin-bottom:16px; text-transform:none; }

/* ===== Bouton WhatsApp flottant ===== */
.dj-whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.45);
  transition:transform .15s ease;
}
.dj-whatsapp-float:hover{ transform:scale(1.08); }
.dj-whatsapp-float svg{ width:30px; height:30px; }
@media (max-width:600px){ .dj-whatsapp-float{ width:52px; height:52px; bottom:16px; right:16px; } .dj-whatsapp-float svg{ width:26px; height:26px; } }