/* ===============================
   Thème global — GuildHub
   =============================== */
:root{
  --brand:#c4161c;        /* rouge principal */
  --brand-dark:#8e0f13;   /* variante sombre */
  --ink:#eaeaea;          /* couleur texte par défaut */
  --muted:#6c757d;
  --bg:#0a0a0c;           /* fond global (contraste amélioré) */
  --card:#121217;
  --border:#2a2a2f;
}

/* Base */
html,body{height:100%; background:var(--bg); color:var(--ink)}
a{color:var(--brand)} a:hover{color:#ff4d53}
.has-sticky{padding-top:4.5rem}

/* Boutons */
.btn-brand{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-brand:hover{background:var(--brand-dark); border-color:var(--brand-dark); color:#fff}

/* Sections */
section{scroll-margin-top:6rem}
.section-title .bar{width:72px; height:4px; background:var(--brand); border-radius:8px; display:block; margin:.5rem 0 0}

/* Cartes / badges / meta */
.card{background:var(--card); border:1px solid var(--border)}
.badge-soft{background:rgba(196,22,28,.15); color:#ff8e92; border:1px solid rgba(196,22,28,.35)}
.badge-muted{background:rgba(255,255,255,.06); color:#b8bcc6; border:1px solid rgba(255,255,255,.08)}
.news-meta{font-size:.85rem; color:#b8bcc6}

/* Amélioration contrastes texte secondaire */
.text-secondary{color:#c5c9d2 !important}

/* HERO / Slider (page d'accueil) */
.hero{position:relative}
/* Laisse Bootstrap gérer l’affichage des slides */
.hero .carousel-item{
  min-height:68vh;
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(255,0,0,.25), transparent),
    radial-gradient(1000px 500px at 80% 90%, rgba(255,0,0,.15), transparent),
    linear-gradient(180deg, #1a1a1f 0%, var(--bg) 100%);
  /* SUPPRIMER display:flex et align-items ici */
}

/* Centre verticalement le contenu du slide */
.hero .carousel-item .container{
  min-height:68vh;
  display:flex;
  align-items:center;
}
.hero .slide-media{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.25; filter:contrast(1.1) saturate(1.2)}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,11,13,.85) 0%, rgba(11,11,13,.4) 60%, rgba(11,11,13,0) 100%)}
.hero h1{font-weight:800; letter-spacing:.3px}

/* Calendrier teaser (accueil) */
.calendar-teaser{
  background:
    radial-gradient(900px 400px at 10% -10%, rgba(196,22,28,.25), transparent),
    radial-gradient(900px 400px at 90% 110%, rgba(196,22,28,.15), transparent);
  border:1px solid var(--border); border-radius:1rem;
}
.timeline{position:relative; padding-left:1.5rem}
.timeline::before{content:""; position:absolute; left:.45rem; top:.25rem; bottom:.25rem; width:2px; background:rgba(255,255,255,.08)}
.timeline .item{position:relative; margin-bottom:1rem}
.timeline .item::before{
  content:""; position:absolute; left:-1.05rem; top:.3rem; width:.7rem; height:.7rem; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px rgba(196,22,28,.2);
}

/* Footer CTA band */
.cta-band{background:linear-gradient(180deg, rgba(196,22,28,.18), rgba(196,22,28,.06)); border:1px solid var(--border); border-radius:1rem}

/* Header / menus au-dessus du slider */
.navbar, .navbar .dropdown-menu, .offcanvas, .offcanvas-backdrop{z-index:1045 !important}
.navbar{position:relative}
/* Header / menus au-dessus du slider */
.navbar, .navbar .dropdown-menu{ z-index: 2000 !important; }

/* Offcanvas (panneaux latéraux) — couche correcte */
.offcanvas{ z-index: 1050 !important; }          /* au-dessus du backdrop */
.offcanvas-backdrop{ z-index: 1040 !important; } /* derrière l’offcanvas */
/* ---- Header : champ recherche + icône loupe plus visibles ---- */
.navbar .input-group-text {
  background: transparent;
  border-color: #3a3a42;
  color: #cfd4dd;          /* icône + texte sur l’addon */
}
.navbar .input-group-text i { color: #cfd4dd; }

.navbar .form-control {
  background: transparent;
  color: #eaeaea;
  border-color: #3a3a42;
}
.navbar .form-control::placeholder { color: #9aa0ab; }
/* Amélioration de contraste pour les icônes et titres dans les cartes de la section features */
#features .card i {
  color: var(--brand);
  opacity: 0.9;
}

#features .card h5 {
  color: #fff;
  font-weight: 600;
}
h5, .h5 { color: #f1f3f6 !important; }

/* === HEADER A 135px + OFFCANVAS AU-DESSUS === */
.navbar{
  position: relative;
  min-height: 135px;                 /* hauteur demandée */
  overflow: visible;                 /* pour laisser dépasser le logo */
  z-index: 1055 !important;
}
.navbar .container{
  min-height: 135px;
  align-items: center;               /* tout centré verticalement */
}
.offcanvas{ z-index: 1060 !important; }
.offcanvas-backdrop{ z-index: 1050 !important; }

/* === DÉCALAGE LOGO VERS LA GAUCHE (sans écraser le menu) === */
.navbar-brand{
  position: relative;
  margin-left: clamp(-24px, -3vw, -40px);  /* "un peu plus" à gauche */
  padding-top: .5rem; padding-bottom: .5rem;
}
@media (max-width: 575.98px){
  .navbar-brand{ margin-left: clamp(-8px, -3vw, -18px); }  /* plus soft en mobile */
}

/* Zone cliquable du logo : reste DANS la navbar (135px) */
.brand-lift{
  position: relative;
  display: inline-block;
  width: clamp(170px, 40vw, 310px);
  height: 145px;                       /* clickable area ; le logo déborde au-dessus */
  margin-right: .25rem;
}

/* Le vrai logo : ancré en bas, déborde au-dessus du header */
.brand-logo{
  position: absolute; left: 0; bottom: -8px;
  height: clamp(180px, 28vw, 250px);  /* bien grand */
  width: auto; display: block;
  transform-origin: left bottom;

  /* La transform est pilotée par des variables → animation organique */
  transform: translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0)) scale(var(--sc,1));
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition: filter .35s ease;
  will-change: transform, filter;
}

/* --- Animation organique du logo (on garde celle en place) --- */
@property --tx { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --ty { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --rot{ syntax:'<angle>';  inherits:false; initial-value:0deg; }
@property --sc { syntax:'<number>'; inherits:false; initial-value:1; }

.brand-logo.anim{
  animation:
    organic-move 14s cubic-bezier(.22,.61,.36,1) infinite,
    breathe       6.5s ease-in-out               infinite;
}

@keyframes organic-move{
  0%   { --tx:0px;  --ty:0px;  --rot:0deg; }
  12%  { --tx:-1px; --ty:-2px; --rot:-0.6deg; }
  25%  { --tx:2px;  --ty:-1px; --rot:0.4deg; }
  37%  { --tx:1px;  --ty:-3px; --rot:-0.2deg; }
  50%  { --tx:0px;  --ty:0px;  --rot:0.3deg; }
  62%  { --tx:-2px; --ty:1px;  --rot:0deg; }
  75%  { --tx:2px;  --ty:2px;  --rot:0.5deg; }
  88%  { --tx:-1px; --ty:1px;  --rot:-0.4deg; }
  100% { --tx:0px;  --ty:0px;  --rot:0deg; }
}
@keyframes breathe{
  0%{ --sc:1 } 50%{ --sc:1.025 } 100%{ --sc:1 }
}

/* Halo doux derrière le logo (reste confiné au bloc brand) */
.brand-lift::after{
  content:""; position:absolute; left:-16px; right:-16px; bottom:-10px; top:-45%;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 70% at 50% 55%, rgba(196,22,28,.30), transparent 70%),
    radial-gradient(40% 50% at 60% 45%, rgba(255,110,116,.18), transparent 60%);
  filter: blur(18px);
  opacity:.50; animation: glowPulse 5.2s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{opacity:.38; transform:scale(1)} 50%{opacity:.72; transform:scale(1.06)} }

/* --- Shine sur tout le header, sans scroll horizontal --- */
.navbar::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.22;

  /* on ANIME la position du background (pas de transform) */
  background:
    linear-gradient(110deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.18) 10%,
      rgba(255,255,255,0) 20%) no-repeat;
  background-size: 22% 100%;           /* largeur du “rayon” */
  background-position-x: -30%;         /* démarre à gauche hors cadre */
  background-position-y: 0%;
  animation: headerShine 8s linear infinite;
  will-change: background-position;
  /* évite tout débordement de rendu */
  contain: paint;
}

@keyframes headerShine{
  0%   { background-position-x: -30%; }
  100% { background-position-x: 130%; }
}

/* Option “ceinture et bretelles” si d’autres effets débordent ponctuellement */
html, body { overflow-x: hidden; }


/* Hover : logo un poil plus présent */
.navbar-brand:hover .brand-logo{
  filter: drop-shadow(0 10px 18px rgba(196,22,28,.35));
}

/* Accessibilité : animations coupées si demandé */
@media (prefers-reduced-motion: reduce){
  .brand-logo.anim{ animation:none; }
  .brand-lift::after{ animation:none; }
  .navbar::after{ animation:none; }
}
/* === Micro-AOS sans JS AOS (transitions par défaut) === */
[data-aos]{
  /* garde tes transitions */
  transition-property: transform, opacity;
  transition-duration: .7s;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}

/* On ne met l'opacité à 0 QUE quand AOS a marqué l’élément */
[data-aos].aos-init{ opacity: 0; }
[data-aos].aos-animate{ opacity: 1; }

/* Accessibilité (inchangé) */
@media (prefers-reduced-motion: reduce){
  [data-aos]{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Variantes usuelles (comme ta maquette) */
[data-aos="fade-up"]{
  transform: translate3d(0, 18px, 0);
}
[data-aos="fade-right"]{
  transform: translate3d(-18px, 0, 0);
}
[data-aos="fade-left"]{
  transform: translate3d(18px, 0, 0);
}
[data-aos="zoom-in"]{
  transform: scale(.98);
}

/* Respect du "delay" en cas de prefer-reduced-motion: off -> ok, sinon on annule tout */
@media (prefers-reduced-motion: reduce){
  [data-aos]{ transition: none !important; transform: none !important; opacity: 1 !important; }
}
/* Compacte UNIQUEMENT les actions user dans la navbar */
.navbar .user-actions{
  flex-wrap: nowrap;
  white-space: nowrap;
}

.navbar .user-actions .btn{
  /* compacité */
  padding: .375rem .75rem;       /* ~btn-sm mais sans toucher le reste */
  font-size: .9rem;
  line-height: 1.2;
  border-radius: .5rem;
  height: 38px;                  /* hauteur fixe harmonisée */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.navbar .user-actions .btn i{
  margin-right: .25rem;          /* icône plus serrée */
}

/* Harmonise aussi le bouton dropdown (état connecté) pour cohérence visuelle */
.navbar .dropdown-toggle.btn{
  height: 38px;
  padding: .375rem .75rem;
  line-height: 1.2;
  font-size: .9rem;
}

/* Option : rétrécir un peu l’écart entre boutons sur grands écrans */
@media (min-width: 992px){
  .navbar .user-actions{ gap: .5rem; }
}
/* Nav-items (hors dropdown) : icône + texte sur une seule ligne */
.navbar .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle){
  display: inline-flex;          /* aligne le contenu sur une ligne */
  align-items: center;           /* centre verticalement icône + texte */
  gap: .4rem;                    /* petit espace entre icône et texte */
  line-height: 1.2;              /* évite l’effet “empilé” */
  padding-top: .5rem;            /* cohérence avec ta hauteur de header */
  padding-bottom: .5rem;
}

/* S’assure que l’icône reste bien “inline” */
.navbar .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle) i{
  display: inline-block;
  line-height: 1;                /* élimine tout “saut” vertical parasite */
}

/* Sur grands écrans, évite que texte revienne à la ligne */
@media (min-width: 992px){
  .navbar .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle){
    white-space: nowrap;
  }
}
/* ===============================
   Footer v2 — Invicta
   =============================== */
.ix-footer{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-top: 1px solid var(--border);
  overflow: hidden;
}

/* Bande “hero” du footer avec rubans animés */
.ix-footer-hero{
  position: relative;
  padding: 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background:
    radial-gradient(600px 300px at 10% 0%, rgba(196,22,28,.18), transparent 70%),
    radial-gradient(600px 300px at 90% 100%, rgba(196,22,28,.10), transparent 70%);
}

.ix-footer-ribbon{
  position: absolute;
  inset: auto 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(196,22,28,.0), rgba(196,22,28,.6), rgba(196,22,28,.0));
  opacity: .6;
  animation: footerSweep 6.5s linear infinite;
}
.ix-footer-ribbon.ribbon-1{ left: -20%; right: -20%; bottom: 0; }
.ix-footer-ribbon.ribbon-2{ left: -30%; right: -30%; bottom: .6rem; animation-duration: 7.8s; opacity: .35; }

@keyframes footerSweep{
  0%{ transform: translateX(-15%); }
  100%{ transform: translateX(15%); }
}

/* Liens stylés */
.ix-links .ix-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem 0;
  color: #e9ebef;
  text-decoration: none;
}
.ix-links .ix-link::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--brand);
  border-radius: 2px;
  transition: right .25s ease;
}
.ix-links .ix-link:hover{ color:#fff; }
.ix-links .ix-link:hover::after{ right:0; }

/* Socials : capsules avec micro-élévation */
.ix-social{
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.ix-social-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: #eaeaea; text-decoration: none;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.ix-social-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(196,22,28,.15);
  border-color: rgba(196,22,28,.45);
  background: rgba(196,22,28,.18);
  color: #fff;
}
.ix-social-btn i{ font-size: 1.1rem; }

/* Input newsletter compact + icône intégrée */
.ix-input-wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
}
.ix-input-wrap i{
  position:absolute; left:.65rem; top:50%; transform: translateY(-50%);
  color:#cfd4dd; pointer-events:none;
}
.ix-input-wrap .form-control{
  padding-left: 2rem;
  background: transparent; color:#eaeaea; border-color:#3a3a42;
}
.ix-input-wrap .form-control::placeholder{ color:#9aa0ab; }
.ix-input-wrap .btn{ height: 42px; }

/* Séparateur doux */
.ix-divider{
  border:0; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(196,22,28,.45), rgba(255,255,255,.04));
}

/* Bouton Back-to-top (flottant mais contenu dans le footer) */
.ix-backtotop{
  position: relative;
  border-radius: 999px;
  border-color: rgba(255,255,255,.35) !important;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}
.ix-backtotop.show{ opacity: 1; transform: translateY(0); }
.ix-backtotop:hover{
  background: var(--brand);
  border-color: var(--brand) !important;
  color:#fff;
}

/* Ajuste le logo dans le footer-hero (moins grand que le header) */
.ix-footer .brand-lift{ height: 86px; width: auto; }
.ix-footer .brand-logo{
  height: 86px; width: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
  transition: transform .25s ease, filter .35s ease;
}
.ix-footer .brand-lift:hover .brand-logo{
  transform: translateY(-1px);
  filter: drop-shadow(0 10px 18px rgba(196,22,28,.28));
}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  .ix-footer-ribbon{ animation:none; }
  .ix-social-btn, .ix-backtotop, .ix-links .ix-link::after, .ix-footer .brand-logo{
    transition: none !important;
  }
}
/* === Footer: overrides pour le logo (ne pas chevaucher le texte) === */
.ix-footer .brand-lift{
  height: auto;            /* on annule la hauteur “header” */
  width: auto;
  margin: 0;
}
.ix-footer .brand-lift::after{
  content: none;           /* coupe le halo du header dans le footer */
}

.ix-footer .brand-logo{
  position: static;        /* << clé : plus d'absolu = plus de chevauchement */
  display: block;
  height: 72px;            /* ajuste si tu veux */
  width: auto;
  max-width: 100%;
  transform: none;         /* pas de translation footer */
}

@media (min-width: 992px){
  .ix-footer .brand-logo{ height: 86px; } /* taille un peu plus grande en LG+ */
}

/* ==== Back-to-top (inline dans le footer) ==== */
.ix-backtotop{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.ix-backtotop.show{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ==== FAB back-to-top (flottant global) ==== */
.ix-fab-top{
  position: fixed;
  right: clamp(12px, 2.2vw, 24px);
  bottom: clamp(12px, 2.2vw, 24px);
  z-index: 3001;              /* > navbar/backdrops */
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: #eaeaea;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(8px) scale(.92);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.ix-fab-top i{ font-size: 1.1rem; line-height: 1; }
.ix-fab-top.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.ix-fab-top:hover{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 10px 26px rgba(196,22,28,.22);
}
@media (prefers-reduced-motion: reduce){
  .ix-backtotop, .ix-fab-top{ transition: none !important; }
}

/* ==== Sécurité z-index du header/footer décoratif ==== */
.ix-footer-hero{ position: relative; z-index: 1; }
.ix-footer-hero .ix-footer-ribbon{ position: absolute; z-index: 0; }