/*
Theme Name: Triatlas Formations
Template: twentytwentyfive
Description: Thème enfant aux couleurs de la charte Triatlas (triatlas.ca) — crème #FAFAF7, marine #0F2845, Inter, épuré et professionnel.
Version: 1.1.0
Author: Triatlas
Text Domain: triatlas-formations
*/

/* =========================================================
   PAGE D'ACCUEIL — héro sombre high-tech (charte Triatlas)
   ========================================================= */

.tri-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0A1628 0%, #0F2845 55%, #123156 100%);
  padding: 110px 32px 90px !important;
}
.tri-hero > * { position: relative; z-index: 2; }
.tri-hero-bg { position: absolute; inset: 0; z-index: 1 !important; pointer-events: none; }

/* Halos lumineux */
.tri-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.tri-glow-1 { width: 520px; height: 520px; background: #2563EB; top: -180px; right: -80px; opacity: .5; }
.tri-glow-2 { width: 420px; height: 420px; background: #4A7BB5; bottom: -200px; left: -120px; opacity: .35; }

/* Grille technologique en filigrane */
.tri-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 20%, black 30%, transparent 75%);
}

/* Triangles flottants (motif Triatlas) */
.tri-float {
  position: absolute; width: 0; height: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-bottom: 44px solid rgba(122, 168, 220, .18);
}
.tri-float-1 { top: 22%; right: 14%; }
.tri-float-2 { top: 60%; right: 27%; transform: scale(.6) rotate(12deg); border-bottom-color: rgba(96,165,250,.24); }
.tri-float-3 { top: 32%; right: 38%; transform: scale(.42) rotate(-10deg); border-bottom-color: rgba(255,255,255,.12); }

/* Badge pilule glass */
.tri-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: .4px;
  color: #BFD3EC;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 7px 16px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  margin: 0 0 28px;
}
.tri-badge::before { content: "▲"; font-size: 9px; color: #60A5FA; }

/* Titre + dégradé */
.tri-hero-title {
  color: #FFFFFF !important;
  font-size: clamp(40px, 6.5vw, 72px) !important;
  font-weight: 650 !important;
  line-height: 1.06 !important;
  letter-spacing: -.02em;
  margin: 0 !important;
}
.tri-gradient-text {
  background: linear-gradient(92deg, #7AB0E8 0%, #60A5FA 45%, #9BE8FF 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.tri-hero-sub {
  color: #B9C7DA !important;
  font-size: 19px; line-height: 1.65;
  max-width: 620px; margin: 26px 0 0;
}

/* Boutons héro */
.tri-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 42px; }
.tri-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #2563EB, #4A7BB5);
  color: #FFFFFF !important; font-weight: 600; font-size: 16px;
  padding: 14px 28px; border-radius: 8px; text-decoration: none;
  box-shadow: 0 8px 30px rgba(37, 99, 235, .35);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.tri-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(37,99,235,.5); }
.tri-btn-primary svg { transition: transform .2s ease; }
.tri-btn-primary:hover svg { transform: translateX(3px); }
.tri-btn-ghost {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  color: #E8EEF6 !important; font-weight: 500; font-size: 16px;
  padding: 14px 28px; border-radius: 8px; text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer;
}
.tri-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }

.tri-hero-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 56px; color: #8FA3BD; font-size: 14px; font-weight: 500; }
.tri-hero-meta i { font-style: normal; color: #3D5573; }

/* ----- Cartes piliers ----- */
.tri-features { background: #FAFAF7; padding: 90px 32px 10px !important; }
.tri-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tri-card {
  position: relative; overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E8E8E3; border-radius: 14px;
  padding: 30px 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tri-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0F2845, #4A7BB5, #9BE8FF);
  opacity: 0; transition: opacity .25s ease;
}
.tri-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,40,69,.12); }
.tri-card:hover::before { opacity: 1; }
.tri-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 10px;
  background: linear-gradient(135deg, #0F2845, #1E4470);
  color: #9BE8FF; margin-bottom: 20px;
}
.tri-card h3 { font-size: 20px; font-weight: 600; color: #0A0A0A; margin: 0 0 10px; }
.tri-card p { font-size: 15.5px; line-height: 1.65; color: #6B6B6B; margin: 0; }

/* ----- Bande CTA finale ----- */
.tri-cta { background: #FAFAF7; padding: 70px 32px 0 !important; }
.tri-cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0A1628, #0F2845 60%, #16375F);
  border-radius: 18px; padding: 64px 48px; text-align: center;
}
.tri-cta-band::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: #2563EB; filter: blur(110px); opacity: .4; top: -160px; right: -120px;
}
.tri-cta-band > * { position: relative; z-index: 1; }
.tri-cta-band h2 { color: #FFFFFF; font-size: clamp(26px, 4vw, 38px); font-weight: 650; margin: 0 0 12px; }
.tri-cta-band p { color: #B9C7DA; font-size: 17px; margin: 0 0 32px; }

/* ----- Animations (douces, respecte prefers-reduced-motion) ----- */
@media (prefers-reduced-motion: no-preference) {
  .tri-float { animation: tri-drift 9s ease-in-out infinite; }
  .tri-float-2 { animation-duration: 12s; animation-delay: -3s; }
  .tri-float-3 { animation-duration: 15s; animation-delay: -6s; }
  .tri-glow-1 { animation: tri-pulse 8s ease-in-out infinite alternate; }
  .tri-badge, .tri-hero-title, .tri-hero-sub, .tri-hero-actions, .tri-hero-meta {
    animation: tri-rise .7s cubic-bezier(.22, .8, .3, 1) both;
  }
  .tri-hero-title { animation-delay: .08s; }
  .tri-hero-sub { animation-delay: .16s; }
  .tri-hero-actions { animation-delay: .24s; }
  .tri-hero-meta { animation-delay: .32s; }
}
@keyframes tri-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -26px; } }
@keyframes tri-pulse { from { opacity: .38; } to { opacity: .6; } }
@keyframes tri-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ----- Responsive héro/cartes ----- */
@media (max-width: 900px) { .tri-cards { grid-template-columns: 1fr; } }
@media (max-width: 782px) {
  .tri-hero { padding: 70px 24px 64px !important; }
  .tri-features, .tri-cta { padding-left: 24px !important; padding-right: 24px !important; }
  .tri-cta-band { padding: 44px 24px; }
  .tri-hero-meta { margin-top: 40px; }
}

/* ----- Typographie fluide (mobile) ----- */
@media (max-width: 782px) {
  main h1.wp-block-heading { font-size: clamp(34px, 9vw, 48px) !important; }
  main.wp-block-group { padding-top: 56px !important; }
  .wp-block-columns { gap: 24px !important; }
}

/* =========================================================
   Charte Triatlas — surcharges globales + Tutor LMS
   ========================================================= */

/* Variables Tutor (doublées pour gagner la spécificité) */
:root:root {
  --tutor-color-primary: #0F2845;
  --tutor-color-primary-hover: #1A3A5C;
  --tutor-color-secondary: #6B6B6B;
  --tutor-border-color: #E8E8E3;
}

body {
  background-color: #FAFAF7;
}

/* ----- Cartes de cours (catalogue) ----- */
.tutor-card {
  border: 1px solid #E8E8E3;
  border-radius: 8px;
  box-shadow: none;
  background: #FFFFFF;
  transition: box-shadow .2s ease, transform .2s ease;
}
.tutor-card:hover {
  box-shadow: 0 8px 24px rgba(15, 40, 69, .10);
  transform: translateY(-2px);
}
.tutor-course-name a {
  font-weight: 600;
  color: #0A0A0A;
  text-decoration: none;
}
.tutor-course-name a:hover { color: #0F2845; }

/* ----- Boutons Tutor ----- */
.tutor-btn { border-radius: 6px; font-weight: 500; }
.tutor-btn-primary, .tutor-btn.tutor-btn-primary {
  background: #0F2845;
  border-color: #0F2845;
  color: #FAFAF7;
}
.tutor-btn-primary:hover, .tutor-btn.tutor-btn-primary:hover {
  background: #1A3A5C;
  border-color: #1A3A5C;
}
.tutor-btn-outline-primary {
  color: #0F2845;
  border-color: #0F2845;
  background: transparent;
}
.tutor-btn-outline-primary:hover { background: #0F2845; color: #FAFAF7; }

/* ----- Liens ----- */
a { color: #0F2845; }

/* ----- Boutons Gutenberg (héro, pages) ----- */
.wp-block-button__link { border-radius: 6px; font-weight: 500; }
.is-style-outline .wp-block-button__link {
  border: 1px solid #0F2845;
  color: #0F2845;
}
.is-style-outline .wp-block-button__link:hover {
  background: #0F2845;
  color: #FAFAF7;
}

/* ----- Zone d'apprentissage Tutor (leçons, quiz) ----- */
.tutor-course-topic-single-header, .tutor-quiz-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E8E8E3;
}
.tutor-progress-bar .tutor-progress-value { background: #0F2845; }

/* ----- Pagination / divers ----- */
.tutor-pagination .page-numbers.current { background: #0F2845; color: #FAFAF7; }