/* ============================================================
   app.css — Custom Microtel Multimedia
   Strategie : on override les variables Bootstrap quand possible,
   et on ajoute uniquement le CSS specifique au club (hero, cartes
   filieres, FAB) — Bootstrap gere tout le reste.
============================================================ */

/* ============================================================
   0. Police Nunito — self-hostee (sous-set latin, woff2)
============================================================ */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/nunito/nunito-v32-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/nunito/nunito-v32-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/nunito/nunito-v32-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/nunito/nunito-v32-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/nunito/nunito-v32-latin-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/nunito/nunito-v32-latin-900.woff2') format('woff2');
}

/* ============================================================
   1. Variables : couleurs du club + override Bootstrap
============================================================ */
:root {
    /* Couleurs du club */
    --club-blue:        #1a6696;
    --club-blue-dark:   #1a5276;
    --club-blue-darker: #0d3d5e;
    --club-blue-light:  #e8f3fa;
    --club-orange:      #e85d26;
    --club-orange-2:    #f07030;
    --club-green:       #1e7a3e;
    --club-red:         #c0392b;

    /* Couleurs filieres (PC=bleu, Android=vert, iOS=violet) */
    --track-pc:      #1a5276;
    --track-android: #1e7a3e;
    --track-ios:     #6020b0;

    /* Override Bootstrap */
    --bs-primary:        #1a6696;
    --bs-primary-rgb:    26, 102, 150;
    --bs-link-color:     #1a6696;
    --bs-link-color-rgb: 26, 102, 150;
    --bs-link-hover-color:     #e85d26;
    --bs-link-hover-color-rgb: 232, 93, 38;

    --bs-warning: #f5c040;
    --bs-warning-rgb: 245, 192, 64;

    --bs-body-font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.7;
    --bs-body-color: #1a1a1a;
}

/* ============================================================
   2. Override des composants Bootstrap + utilitaires couleurs club
============================================================ */
.btn-primary {
    --bs-btn-bg:           var(--club-blue);
    --bs-btn-border-color: var(--club-blue);
    --bs-btn-hover-bg:           var(--club-blue-dark);
    --bs-btn-hover-border-color: var(--club-blue-dark);
    --bs-btn-active-bg:           var(--club-blue-darker);
    --bs-btn-active-border-color: var(--club-blue-darker);
}

.btn-orange {
    --bs-btn-color:        #fff;
    --bs-btn-bg:           var(--club-orange);
    --bs-btn-border-color: var(--club-orange);
    --bs-btn-hover-color:  #fff;
    --bs-btn-hover-bg:           var(--club-orange-2);
    --bs-btn-hover-border-color: var(--club-orange-2);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg:           #c14a18;
    --bs-btn-active-border-color: #c14a18;
}

.text-orange   { color:            var(--club-orange) !important; }
.bg-orange     { background-color: var(--club-orange) !important; }
.border-orange { border-color:     var(--club-orange) !important; }

.border-purple-subtle { border-color: #d0b0ef !important; }

/* Gradients filieres (utilises sur pages Filieres, Accueil, Parcours) */
.bg-track-pc      { background: linear-gradient(135deg, #0d2d47, var(--track-pc)); }
.bg-track-android { background: linear-gradient(135deg, #061408, var(--track-android)); }
.bg-track-ios     { background: linear-gradient(135deg, #1a0535, var(--track-ios)); }

/* ============================================================
   3. Top bar (contact)
============================================================ */
#topbar {
    background: #1a1a1a;
    color: #ccc;
    font-size: .85rem;
}
#topbar .topbar-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #ddd;
    text-decoration: none;
    transition: color .15s;
}
#topbar a.topbar-item:hover { color: #fff; }
#topbar .topbar-item .bi { color: var(--club-orange); }

/* ============================================================
   4. Header / Navbar
============================================================ */
#site-header {
    border-bottom: 5px solid var(--club-blue);
}
#site-header .site-logo {
    height: 95px;       /* taille par defaut, ajuste-la a ta convenance */
    width: auto;
    display: block;
}
#site-header .navbar-nav .nav-link {
    font-weight: 700;
    color: #1a1a1a;
    border-radius: .5rem;
    padding: .55rem .85rem;
    white-space: nowrap;
    transition: all .15s;
}
#site-header .navbar-nav .nav-link:hover  { background: var(--club-blue-light); color: var(--club-blue); }
#site-header .navbar-nav .nav-link.active { background: var(--club-blue);       color: #fff; }
#site-header .nav-item--new .nav-link        { color: var(--club-orange) !important; font-weight: 900 !important; }
#site-header .nav-item--new .nav-link.active { color: #fff !important; }

/* ============================================================
   5. Footer
============================================================ */
#site-footer            { background: #1a1a2e; color: rgba(255,255,255,.65); }
#site-footer a          { color: rgba(255,255,255,.65); text-decoration: none; }
#site-footer a:hover    { color: #fff; text-decoration: underline; }
#site-footer .footer-copy { border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.4); }

/* ============================================================
   6. Helpers de section (titre, lead, divider orange)
============================================================ */
.section-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--club-blue-dark);
    font-weight: 800;
    margin-bottom: .75rem;
}
.section-lead {
    font-size: 1.05rem;
    color: #555;
    max-width: 680px;
    margin-bottom: 2rem;
    line-height: 1.8;
}
.divider {
    width: 60px;
    height: 4px;
    background: var(--club-orange);
    border-radius: 2px;
    margin: .75rem 0 1.75rem;
}

/* ============================================================
   7. Hero des sous-pages
============================================================ */
.page-hero {
    background: linear-gradient(135deg, var(--club-blue-dark), var(--club-blue));
    border-bottom: 5px solid var(--club-orange);
}
.page-hero--orange {
    background: linear-gradient(135deg, #7b2000, #b03000, var(--club-orange));
}

/* ============================================================
   8. Hero accueil
============================================================ */
#home-hero {
    background: linear-gradient(145deg, var(--club-blue-darker) 0%, var(--club-blue-dark) 55%, var(--club-blue) 100%);
}
.hero-badge {
    padding: .35rem 1rem;
    border-radius: 30px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.hero-badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--club-orange);
    animation: hpulse 2s infinite;
}
@keyframes hpulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.hero-title    { line-height: 1.1; }
.hero-title em { color: #f5c040; font-style: normal; }

.hero-visual {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
}
.hero-big-num { font-size: 3.8rem; font-weight: 900; line-height: 1; }
.hero-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 700;
}
.hero-track[data-track="pc"]      { background: rgba( 91,192,240,.2); border: 1px solid rgba( 91,192,240,.35); color: #c0e8ff; }
.hero-track[data-track="android"] { background: rgba( 64,216,120,.2); border: 1px solid rgba( 64,216,120,.35); color: #c0ffe0; }
.hero-track[data-track="ios"]     { background: rgba(176,109,232,.2); border: 1px solid rgba(176,109,232,.35); color: #ead4ff; }
.hero-track[data-track="ia"]      { background: rgba(232, 93, 38,.2); border: 1px solid rgba(232, 93, 38,.35); color: #ffd0b8; }

/* ============================================================
   9. Stats bar
============================================================ */
.stats-bar { background: var(--club-blue-dark); }
.stats-bar .stat-item {
    padding: 1.4rem .8rem;
    border-right: 1px solid rgba(255,255,255,.12);
}
.stats-bar .stat-item:last-child { border-right: none; }
.stats-bar .stat-num { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.stats-bar .stat-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); margin-top: 4px; }

/* ============================================================
   10. Mission cards (accueil)
============================================================ */
.mission-card           { transition: transform .2s, box-shadow .2s; }
.mission-card:hover     { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
.mission-card .mc-icon  { font-size: 2.4rem; color: var(--club-blue); }

/* ============================================================
   11. Temoignage (accueil)
============================================================ */
.testimonial-section { background: var(--club-blue-light); }
.testimonial-box     { max-width: 800px; }
.quote-mark          { font-size: 5rem; line-height: .6; font-family: Georgia, serif; }
.qa-avatar           { width: 52px; height: 52px; flex-shrink: 0; }

.testimonial-carousel { max-width: 920px; }

.testimonial-carousel .carousel-control-prev,
.testimonial-carousel .carousel-control-next {
    width: 56px;
    opacity: 1;
    align-items: center;
}
.testimonial-carousel .carousel-control-prev-icon,
.testimonial-carousel .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--club-blue);
    background-size: 22px 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transition: background-color .15s, transform .15s;
}
.testimonial-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.testimonial-carousel .carousel-control-next:hover .carousel-control-next-icon,
.testimonial-carousel .carousel-control-prev:focus-visible .carousel-control-prev-icon,
.testimonial-carousel .carousel-control-next:focus-visible .carousel-control-next-icon {
    background-color: var(--club-orange);
    transform: scale(1.08);
}
.testimonial-carousel .carousel-indicators {
    position: static;
    margin: 1rem 0 0;
}
.testimonial-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--club-blue);
    opacity: .35;
    border: 0;
}
.testimonial-carousel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--club-orange);
}

@media (max-width: 575.98px) {
    .testimonial-carousel .carousel-control-prev,
    .testimonial-carousel .carousel-control-next { width: 40px; }
    .testimonial-carousel .carousel-control-prev-icon,
    .testimonial-carousel .carousel-control-next-icon {
        width: 36px; height: 36px; background-size: 18px 18px;
    }
}

/* ============================================================
   12. Volunteer strip + cartes filieres (accueil)
============================================================ */
.volunteer-strip {
    background: linear-gradient(135deg, var(--club-orange) 0%, var(--club-orange-2) 100%);
}
.sp-card { overflow: hidden; box-shadow: 0 2px 12px rgba(26,102,150,.10); }

/* ============================================================
   13. Page Filieres
============================================================ */
.filiere-icon       { font-size: 3rem; line-height: 1; }
.filiere-showcase   { overflow: hidden; transition: transform .2s, box-shadow .2s; }
.filiere-showcase:hover { transform: translateY(-2px); }

.filiere-level--lv1 { background: #daeeff; color: #1a3a5c; }
.filiere-level--lv1 .filiere-level-label { color: #2e6fad; }
.filiere-level--lv2 { background: #fff0dc; color: #5c3000; }
.filiere-level--lv2 .filiere-level-label { color: #e07b20; }
.filiere-level--lv3 { background: #ddf6ec; color: #0e4a22; }
.filiere-level--lv3 .filiere-level-label { color: #2e9e6b; }

/* ============================================================
   14. Page Internet & IA (accordeons par niveau)
============================================================ */
.ia-level-btn {
    border: none;
    box-shadow: none !important;
    color: #fff;
}
.ia-level-btn::after { filter: brightness(0) invert(1); }
.ia-level-btn--lv1 { background: linear-gradient(135deg, #b03000, var(--club-orange)) !important; }
.ia-level-btn--lv2 { background: linear-gradient(135deg, #8a4c00, #e07b20) !important; }
.ia-level-btn--lv3 { background: linear-gradient(135deg, #0e4a22, #2e9e6b) !important; }

.ia-stars {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .9rem;
}

/* ============================================================
   15. Page Parcours (niveaux, filtres, cartes session)
============================================================ */
/* Backgrounds par niveau */
.lvl-bg--lv1   { background: #2e6fad; }
.lvl-bg--lv2   { background: #e07b20; }
.lvl-bg--lv3   { background: #2e9e6b; }
.lvl-body--lv1 { background: #daeeff; }
.lvl-body--lv2 { background: #fff0dc; }
.lvl-body--lv3 { background: #ddf6ec; }

/* Badges niveau dans une session */
.sc-badge--lv1 { background: #daeeff; color: #1a4f80; border: 1px solid #b3d4f5; }
.sc-badge--lv2 { background: #fff0dc; color: #8a4c00; border: 1px solid #f5d0a0; }
.sc-badge--lv3 { background: #ddf6ec; color: #165c3a; border: 1px solid #9fd9be; }

/* Titres et badges de section filiere dans un bloc niveau */
.prog-track-title--pc      { color: #1a4f80; }
.prog-track-title--android { color: #0e4a22; }
.prog-track-title--ios     { color: #4a0e8a; }
.prog-track-badge--pc      { background: #daeeff; color: #1a4f80; }
.prog-track-badge--android { background: #d4f5e0; color: #0e4a22; }
.prog-track-badge--ios     { background: #ead4ff; color: #4a0e8a; }

/* Filtres (pill-toggle custom : couleurs varient selon la valeur) */
.pfb {
    border: 2px solid var(--bs-border-color);
    background: #fff;
    color: var(--bs-secondary-color);
    font-weight: 700;
    border-radius: .5rem;
}
.pfb:hover  { border-color: var(--club-blue); color: var(--club-blue); }
.pfb.active { background: var(--club-blue); border-color: var(--club-blue); color: #fff; }
.pfb[data-value="android"].active { background: var(--track-android); border-color: var(--track-android); }
.pfb[data-value="ios"].active     { background: var(--track-ios);     border-color: var(--track-ios); }
.pfb[data-value="lv2"].active     { background: #e07b20;              border-color: #e07b20; }
.pfb[data-value="lv3"].active     { background: #2e9e6b;              border-color: #2e9e6b; }

/* Pilules planning hebdo */
.rythme-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .8rem;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 700;
}
.rythme-pill--pc      { background: #daeeff; color: #1a4f80; border: 1px solid #b3d4f5; }
.rythme-pill--android { background: #d4f5e0; color: #0e4a22; border: 1px solid #9fd9be; }
.rythme-pill--ios     { background: #ead4ff; color: #4a0e8a; border: 1px solid #c8a0f0; }

/* Etats appliques par le filtrage JS */
.sc.sc-hidden                        { display: none !important; }
.prog-track-section.prog-track-empty { display: none !important; }
.month-block.month-empty             { display: none !important; }

/* ============================================================
   16. Page Notre Club (animateurs)
============================================================ */
.animateur-card                 { transition: transform .2s; }
.animateur-card:hover           { transform: translateY(-3px); }
.animateur-card .anim-avatar    { width: 84px; height: 84px; }

/* ============================================================
   17. Page Contact (gros bouton telephone)
============================================================ */
.contact-big-phone           { background: var(--club-blue-dark); transition: background .2s; }
.contact-big-phone:hover     { background: var(--club-blue); color: #fff !important; }
.contact-big-phone .cbp-icon { font-size: 2.6rem; }
.contact-big-phone .cbp-num  { font-size: 1.8rem; line-height: 1; }

/* ============================================================
   18. Page Inscription (etapes numerotees)
============================================================ */
.step-list .step-num { width: 46px; height: 46px; font-size: 1.25rem; }

/* ============================================================
   19. FAB (boutons flottants globaux)
============================================================ */
#fab-stack {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: flex-end;
}
#fab-stack .btn { font-weight: 900; padding: .9rem 1.4rem; }
#fab-inscrire {
    box-shadow: 0 4px 20px rgba(232,93,38,.45);
    animation: fabpulse 3s infinite;
}
#fab-stack .btn:hover { transform: translateY(-3px) scale(1.05); }
@keyframes fabpulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(232,93,38,.45); }
    50%      { box-shadow: 0 4px 28px rgba(232,93,38,.7);  }
}
@media (max-width: 480px) {
    #fab-stack .btn      { padding: 1rem; border-radius: 50% !important; }
    #fab-stack .fab-text { display: none; }
    #fab-stack .bi       { margin: 0 !important; font-size: 1.4rem; }
}

/* ============================================================
   20. Agenda (calendrier mensuel)
============================================================ */
.agenda-calendar {
    border: 1px solid rgba(26, 102, 150, 0.15);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
}
.agenda-calendar__head,
.agenda-calendar__body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.agenda-calendar__dow {
    padding: 0.65rem 0.25rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--club-blue-dark);
    background: var(--club-blue-light);
    border-bottom: 1px solid rgba(26, 102, 150, 0.12);
}
.agenda-calendar__day {
    min-height: 6.5rem;
    padding: 0.4rem;
    border-right: 1px solid rgba(26, 102, 150, 0.08);
    border-bottom: 1px solid rgba(26, 102, 150, 0.08);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.agenda-calendar__day:nth-child(7n) { border-right: 0; }
.agenda-calendar__day.is-outside {
    background: #f7f9fb;
    color: #9aa8b5;
}
.agenda-calendar__day.is-today .agenda-calendar__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--club-orange);
    color: #fff;
    font-weight: 800;
}
.agenda-calendar__num { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.agenda-calendar__items {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.agenda-calendar__chip {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0.35rem;
    padding: 0.2rem 0.35rem;
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.agenda-calendar__chip:hover,
.agenda-calendar__chip:focus-visible {
    filter: brightness(0.95);
    outline: 2px solid rgba(13, 61, 94, 0.35);
    outline-offset: 1px;
}
.agenda-calendar__chip.is-session {
    background: var(--club-blue-light);
    color: var(--club-blue-dark);
}
.agenda-calendar__chip.is-event {
    background: rgba(232, 93, 38, 0.14);
    color: #9a3a12;
}
.agenda-calendar__chip-time {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.85;
}
.agenda-calendar__chip-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#agendaEventModalHeader.is-session { background: var(--club-blue); }
#agendaEventModalHeader.is-event { background: var(--club-orange); }
.agenda-legend {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.agenda-legend--session { background: var(--club-blue); }
.agenda-legend--event { background: var(--club-orange); }
@media (max-width: 767.98px) {
    .agenda-calendar__day { min-height: 5rem; padding: 0.25rem; }
    .agenda-calendar__dow { font-size: 0.7rem; padding: 0.4rem 0; }
    .agenda-calendar__chip-time { display: none; }
    .agenda-calendar__chip-title { font-size: 0.65rem; }
}

/* ============================================================
   21. Piege anti-robot (formulaires publics)
   Rendu par App\Support\Security\BotGuard::fields(). Sorti du flux
   plutot que display:none : certains robots ignorent les champs
   explicitement caches. Inaccessible au clavier et aux lecteurs
   d'ecran via tabindex="-1" et aria-hidden cote HTML.
============================================================ */
.bg-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   22. Print
============================================================ */
@media print {
    #topbar, #site-header, #site-footer, #fab-stack,
    .volunteer-strip { display: none !important; }
    body { font-size: 11pt; background: #fff; }
}