/*
Theme Name:   ALC Brébeuf Child
Description:  Child theme CSS — palette et animations ALC. Contenu géré dans Divi.
Template:     Divi
Version:      2.0.0
Text Domain:  alc-child
*/

/* ════════════════════════════════════════════════════
   PALETTE ALC — variables globales
   Modifier ces 7 couleurs change tout le site.
   ════════════════════════════════════════════════════ */
:root {
  --sun:     #FF6B1A;   /* orange coucher de soleil */
  --magenta: #E8157A;   /* rose vif                 */
  --violet:  #7C1FD4;   /* violet profond            */
  --cyan:    #00C2E0;   /* bleu cyan électrique      */
  --lime:    #B4E600;   /* vert lime                 */
  --cream:   #FDFAF3;   /* fond clair                */
  --ink:     #0E0A1A;   /* fond sombre / texte       */

  /* Dégradés prêts à l'emploi */
  --grad-sun-mag:  linear-gradient(135deg, var(--sun), var(--magenta));
  --grad-mag-vio:  linear-gradient(135deg, var(--magenta), var(--violet));
  --grad-vio-cya:  linear-gradient(135deg, var(--violet), var(--cyan));
  --grad-full:     linear-gradient(135deg, var(--sun) 0%, var(--magenta) 35%, var(--violet) 70%, var(--cyan) 100%);
  --grad-text:     linear-gradient(90deg, var(--sun) 0%, var(--magenta) 45%, var(--violet) 100%);
}

/* ════════════════════════════════════════════════════
   BASE & RESET
   ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--cream) !important;
  color: var(--ink) !important;
  font-family: 'Archivo Black', 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
}

/* ════════════════════════════════════════════════════
   TYPOGRAPHIE — Archivo Black remplace Divi
   ════════════════════════════════════════════════════ */

/* Titres Divi → Archivo Black */
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
h1.et_pb_slide_title,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3 {
  font-family: 'Archivo Black', sans-serif !important;
  letter-spacing: -.01em;
  line-height: .95;
}

/* Corps de texte → Plus Jakarta Sans */
.et_pb_module p,
.et_pb_module li,
.et_pb_text p,
body, input, select, textarea {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 300;
}

/* ════════════════════════════════════════════════════
   NAVIGATION DIVI — override couleurs
   ════════════════════════════════════════════════════ */
#main-header,
#main-header.et-fixed-header {
  background: rgba(253, 250, 243, .92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1.5px solid rgba(14,10,26,.07) !important;
  box-shadow: none !important;
}

/* Logo */
#main-header .et_pb_menu__logo,
#main-header .logo_container a,
.et_pb_image_wrap img { filter: none; }

/* Liens nav */
#main-header ul.nav > li > a,
#main-header .et-menu > li > a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(14,10,26,.5) !important;
  transition: color .2s !important;
}
#main-header ul.nav > li > a:hover,
#main-header .et-menu > li > a:hover {
  color: var(--ink) !important;
}

/* Lien actif — dégradé texte */
#main-header ul.nav > li.current-menu-item > a,
#main-header .et-menu > li.current-menu-item > a {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Bouton CTA dans la nav (si module bouton Divi dans le header) */
#main-header .et_pb_button,
.et_header_style_centered .et_pb_button {
  background: var(--grad-sun-mag) !important;
  border: none !important;
  border-radius: 100px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
}

/* ════════════════════════════════════════════════════
   BOUTONS DIVI — tous les boutons du site
   ════════════════════════════════════════════════════ */
.et_pb_button {
  background: var(--grad-sun-mag) !important;
  background-size: 200% !important;
  border: none !important;
  border-radius: 100px !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  transition: background-position .4s, transform .2s !important;
}
.et_pb_button:hover {
  background-position: 100% !important;
  transform: scale(1.02) !important;
  color: #fff !important;
}

/* Bouton fantôme (outline) — classe CSS ID dans Divi : btn-outline */
.et_pb_button.btn-outline {
  background: transparent !important;
  border: 1.5px solid rgba(14,10,26,.2) !important;
  color: var(--ink) !important;
  border-radius: 100px !important;
}
.et_pb_button.btn-outline:hover {
  border-color: var(--ink) !important;
  background: rgba(14,10,26,.04) !important;
  transform: none !important;
}

/* Bouton blanc (pour sections sombres) — classe : btn-white */
.et_pb_button.btn-white {
  background: #fff !important;
  color: var(--magenta) !important;
  box-shadow: 0 8px 30px rgba(14,10,26,.2) !important;
}
.et_pb_button.btn-white:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(14,10,26,.25) !important;
}

/* ════════════════════════════════════════════════════
   SECTIONS DIVI — backgrounds par classe CSS ID
   Dans Divi, chaque section a un champ "CSS ID / Classe"
   ════════════════════════════════════════════════════ */

/* Section fond sombre (ink) — classe : alc-dark */
.et_pb_section.alc-dark,
.et_pb_row.alc-dark {
  background: var(--ink) !important;
}

/* Section fond crème — classe : alc-cream */
.et_pb_section.alc-cream,
.et_pb_row.alc-cream {
  background: var(--cream) !important;
}

/* Section dégradé full — classe : alc-grad */
.et_pb_section.alc-grad {
  background: var(--grad-full) !important;
}

/* Section dégradé sun→magenta — classe : alc-grad-a */
.et_pb_section.alc-grad-a { background: var(--grad-sun-mag) !important; }

/* Section dégradé magenta→violet — classe : alc-grad-b */
.et_pb_section.alc-grad-b { background: var(--grad-mag-vio) !important; }

/* Section dégradé violet→cyan — classe : alc-grad-c */
.et_pb_section.alc-grad-c { background: var(--grad-vio-cya) !important; }

/* ════════════════════════════════════════════════════
   TEXTE DÉGRADÉ — classe sur n'importe quel module texte
   ════════════════════════════════════════════════════ */

/* Texte dégradé sun→violet — classe : alc-text-grad */
.alc-text-grad,
.alc-text-grad h1,
.alc-text-grad h2,
.alc-text-grad h3,
.alc-text-grad span {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Texte dégradé violet→cyan — classe : alc-text-grad-b */
.alc-text-grad-b,
.alc-text-grad-b h1,
.alc-text-grad-b h2 {
  background: linear-gradient(90deg, var(--violet), var(--cyan)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ════════════════════════════════════════════════════
   BLOBS ANIMÉS — ajouter dans une section hero
   Dans Divi : Code Module avec <div class="alc-blobs">...</div>
   Les blobs se positionnent par rapport à la section parente.
   ════════════════════════════════════════════════════ */
.et_pb_section:has(.alc-blobs) {
  position: relative;
  overflow: hidden;
}
.alc-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.alc-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: alcBlobFloat 12s ease-in-out infinite;
}
.alc-blob--1 { width:600px;height:600px;top:-150px;left:-100px;background:radial-gradient(circle,var(--sun),var(--magenta));animation-delay:0s }
.alc-blob--2 { width:500px;height:500px;top:100px;right:-120px;background:radial-gradient(circle,var(--magenta),var(--violet));animation-delay:-4s }
.alc-blob--3 { width:400px;height:400px;bottom:-80px;left:30%;background:radial-gradient(circle,var(--violet),var(--cyan));animation-delay:-8s }

@keyframes alcBlobFloat {
  0%,100%{ transform:translate(0,0) scale(1) }
  33%    { transform:translate(30px,-40px) scale(1.06) }
  66%    { transform:translate(-20px,25px) scale(.96) }
}

/* S'assurer que le contenu Divi passe au-dessus des blobs */
.et_pb_section:has(.alc-blobs) > .et_pb_row {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════
   TICKER — Code Module dans Divi
   ════════════════════════════════════════════════════ */
.alc-ticker-wrap {
  background: var(--ink);
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.alc-ticker-track {
  display: flex;
  animation: alcTick 18s linear infinite;
  white-space: nowrap;
}
.alc-ticker-item {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.9);
  padding: 12px 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.alc-ticker-sep {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sun), var(--cyan));
  display: inline-block;
}
@keyframes alcTick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════════
   CARTES TRAVAUX — module Blurb ou portfolio Divi
   ════════════════════════════════════════════════════ */

/* Grille bento — classe sur section Divi : alc-bento */
.alc-bento .et_pb_image,
.alc-bento .et_pb_blurb {
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform .3s !important;
}
.alc-bento .et_pb_image:hover,
.alc-bento .et_pb_blurb:hover {
  transform: scale(1.015) !important;
}

/* Cards avec badge catégorie coloré */
.alc-card-cinema  .et_pb_blurb_content { border-top: 3px solid var(--violet) !important; }
.alc-card-design  .et_pb_blurb_content { border-top: 3px solid var(--sun) !important; }
.alc-card-lettres .et_pb_blurb_content { border-top: 3px solid var(--cyan) !important; }
.alc-card-theatre .et_pb_blurb_content { border-top: 3px solid var(--magenta) !important; }
.alc-card-medias  .et_pb_blurb_content { border-top: 3px solid var(--lime) !important; }

/* Badge catégorie (span dans le texte Divi) */
.alc-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; color: #fff; margin-bottom: .5rem;
}
.alc-badge--cinema  { background: var(--grad-mag-vio); }
.alc-badge--design  { background: var(--grad-sun-mag); }
.alc-badge--lettres { background: linear-gradient(90deg, #185fa5, var(--cyan)); }
.alc-badge--theatre { background: linear-gradient(90deg, var(--magenta), var(--sun)); }
.alc-badge--medias  { background: linear-gradient(90deg, #3b6d11, var(--lime)); }

/* ════════════════════════════════════════════════════
   GALERIE / PORTFOLIO DIVI — page Travaux
   ════════════════════════════════════════════════════ */

/* Forcer fond sombre sur la galerie Divi */
.et_pb_gallery .et_pb_gallery_item,
.et_pb_portfolio .et_pb_portfolio_item {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--ink) !important;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94) !important;
}
.et_pb_gallery .et_pb_gallery_item:hover,
.et_pb_portfolio .et_pb_portfolio_item:hover {
  transform: scale(1.02) !important;
}

/* Overlay dégradé sur les images */
.et_pb_gallery .et_pb_gallery_item .et_overlay,
.et_pb_portfolio .et_pb_portfolio_item .et_overlay {
  background: linear-gradient(to top, rgba(14,10,26,.88) 0%, transparent 55%) !important;
  opacity: 1 !important;
}

/* Titre sur l'image */
.et_pb_portfolio .et_pb_portfolio_item h2 a,
.et_pb_portfolio .et_pb_portfolio_item h3 a {
  font-family: 'Archivo Black', sans-serif !important;
  color: #fff !important;
  font-size: 16px !important;
}

/* Filtres catégorie Divi portfolio */
.et_pb_portfolio_filter li a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  border: 1.5px solid rgba(14,10,26,.15) !important;
  color: rgba(14,10,26,.5) !important;
  transition: all .2s !important;
}
.et_pb_portfolio_filter li a:hover,
.et_pb_portfolio_filter li a.active {
  background: var(--grad-sun-mag) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════
   STATS / COMPTEURS DIVI — module Number Counter
   ════════════════════════════════════════════════════ */
.et_pb_number_counter .title,
.et_pb_number_counter .percent {
  font-family: 'Archivo Black', sans-serif !important;
  background: var(--grad-sun-mag) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ════════════════════════════════════════════════════
   SECTION COURS — modules Blurb en grille
   Classe sur la section : alc-cours
   ════════════════════════════════════════════════════ */
.alc-cours .et_pb_blurb {
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: background .3s !important;
}
.alc-cours .et_pb_blurb:hover {
  background: rgba(255,255,255,.04) !important;
}
.alc-cours .et_pb_blurb_title {
  font-family: 'Archivo Black', sans-serif !important;
  color: #fff !important;
  font-size: 22px !important;
}
.alc-cours .et_pb_blurb_content p {
  color: rgba(255,255,255,.4) !important;
}

/* Icône Blurb avec gradient — classe sur le blurb : alc-icon-a / b / c */
.alc-icon-a .et_pb_main_blurb_image { background: var(--grad-sun-mag) !important; border-radius: 12px !important; padding: 10px !important; }
.alc-icon-b .et_pb_main_blurb_image { background: var(--grad-mag-vio) !important; border-radius: 12px !important; padding: 10px !important; }
.alc-icon-c .et_pb_main_blurb_image { background: var(--grad-vio-cya) !important; border-radius: 12px !important; padding: 10px !important; }

/* ════════════════════════════════════════════════════
   ANCIENS — module Person ou Blurb en scroll horizontal
   Classe sur la row : alc-anciens
   ════════════════════════════════════════════════════ */
.alc-anciens {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none !important;
}
.alc-anciens::-webkit-scrollbar { display: none; }
.alc-anciens .et_pb_column {
  flex-shrink: 0 !important;
  width: 220px !important;
}
.alc-anciens .et_pb_blurb,
.alc-anciens .et_pb_team_member {
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform .3s !important;
}
.alc-anciens .et_pb_blurb:hover,
.alc-anciens .et_pb_team_member:hover {
  transform: translateY(-6px) !important;
}

/* Année (badge sur les cartes anciens — classe : alc-annee) */
.alc-annee {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px; color: #fff;
  background: var(--grad-sun-mag);
}

/* ════════════════════════════════════════════════════
   FOOTER DIVI — override couleurs
   ════════════════════════════════════════════════════ */
#footer-bottom,
#main-footer {
  background: var(--ink) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
#footer-bottom *,
#main-footer * {
  color: rgba(255,255,255,.35) !important;
}
#main-footer a:hover,
#footer-bottom a:hover {
  color: #fff !important;
}
/* Liens en couleur accent dans le footer */
#main-footer a.alc-accent,
#footer-bottom a.alc-accent { color: var(--cyan) !important; }

/* ════════════════════════════════════════════════════
   UTILITAIRES — classes utilisables partout dans Divi
   ════════════════════════════════════════════════════ */

/* Arrondi pill */
.alc-pill { border-radius: 100px !important; }

/* Texte blanc */
.alc-white, .alc-white * { color: #fff !important; }

/* Texte couleurs */
.alc-sun     { color: var(--sun) !important; }
.alc-magenta { color: var(--magenta) !important; }
.alc-violet  { color: var(--violet) !important; }
.alc-cyan    { color: var(--cyan) !important; }
.alc-lime    { color: var(--lime) !important; }

/* Petite étiquette style eyebrow */
.alc-eyebrow {
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
}
.alc-eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important; height: 1.5px !important;
  background: currentColor !important;
  flex-shrink: 0 !important;
}

/* Séparateur dégradé */
.alc-divider {
  height: 2px !important;
  background: var(--grad-full) !important;
  border: none !important;
  margin: 0 !important;
}

/* Animations scroll-reveal (déclenché par JS) */
.alc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.alc-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .alc-blobs { display: none; } /* performance mobile */
  .et_pb_button {
    width: 100% !important;
    text-align: center !important;
  }
}