/* ==========================================================================
       TOKENS — Portail Notre-Dame Afrique
       Palette reprise du logo « Équipes Notre-Dame » : bleu roi, rouge-orangé
       et jaune doré, sur fond ivoire clair.
       Signature : arche cintrée (clin d'œil à l'architecture des chapelles)
       utilisée sur les cadres photo, vidéo et témoignages, associée à un
       filet de couleur fin comme séparateur de section.
       ========================================================================== */
:root{
    --bg:            #FAFBFC;
    --bg-alt:        #EEF1FB;
    --bg-alt-2:      #FDF3E4;
    --primary:       #1F3FCB;
    --primary-dark:  #101B6B;
    --primary-soft:  #DCE3FA;
    --accent:        #E2492A;
    --accent-hover:  #B23A20;
    --accent-light:  #F7C331;
    --text:          #262B33;
    --text-muted:    #5B6472;
    --white:         #FFFFFF;
    --border:        #E1E6ED;
    --radius-arch:   130px 130px 8px 8px;
    --shadow-soft:   0 10px 30px rgba(16,27,107,.10);
    --shadow-card:   0 6px 18px rgba(16,27,107,.08);
}

html{ scroll-behavior:smooth; }
body{
    font-family:'Inter', sans-serif;
    color:var(--text);
    background:var(--bg);
}
h1,h2,h3,h4,.font-display{
    font-family:'Playfair Display', serif;
    color:var(--primary-dark);
}
.eyebrow{
    font-family:'Inter',sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
}
a{ color:var(--primary); }
.btn-marial{
    background:var(--primary); color:#fff; border:none; border-radius:2px;
    padding:.6rem 1.5rem; font-weight:600; letter-spacing:.02em; transition:.2s;
}
.btn-marial:hover{ background:var(--primary-dark); color:#fff; }
.btn-gold{
    background:var(--accent); color:#fff; border:none; border-radius:2px;
    padding:.6rem 1.5rem; font-weight:600; transition:.2s;
}
.btn-gold:hover{ background:var(--accent-hover); color:#fff; }
.btn-outline-marial{
    border:1px solid var(--primary); color:var(--primary); background:transparent;
    border-radius:2px; font-weight:600;
}
.btn-outline-marial:hover{ background:var(--primary); color:#fff; }

.rule-gold{ display:flex; align-items:center; gap:.6rem; margin:.4rem 0 2rem; }
.rule-gold::before,.rule-gold::after{
    content:""; flex:1; height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-light),transparent);
}
.rule-gold .dot{ width:6px; height:6px; background:var(--accent); transform:rotate(45deg); }

/* ---- barre utilitaire ---- */
.topbar{ background:var(--primary-dark); color:#EAF0FA; font-size:.82rem; }
.topbar select.form-select-sm{
    background:transparent; color:#EAF0FA; border:1px solid rgba(255,255,255,.25); font-size:.8rem;
}
.topbar select.form-select-sm option{ color:#111; }
.topbar .connexion-link{ color:var(--accent-light); font-weight:600; text-decoration:none; white-space:nowrap; }
.topbar .connexion-link:hover{ color:#fff; }

.ticker-wrap{
    flex:1 1 auto; overflow:hidden; position:relative; height:28px;
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{
    position:absolute; white-space:nowrap; display:flex; align-items:center; gap:3rem;
    animation:ticker 32s linear infinite; will-change:transform;
}
.ticker-track span{ display:inline-flex; align-items:center; gap:.4rem; }
.ticker-track i{ color:var(--accent-light); }
@keyframes ticker{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ---- navigation ---- */
.navbar-portail{ background:#fff; border-bottom:1px solid var(--border); transition:box-shadow .2s; }
.navbar-portail.is-stuck{ box-shadow:var(--shadow-soft); }
.navbar-portail .navbar-brand{ font-family:'Playfair Display',serif; font-weight:700; color:var(--primary-dark); font-size:1.25rem; }
.navbar-portail .navbar-brand small{
    display:block; font-family:'Inter',sans-serif; font-size:.65rem; letter-spacing:.12em;
    color:var(--accent); font-weight:600; text-transform:uppercase;
}
.navbar-portail .nav-link{ color:var(--text); font-weight:600; font-size:.92rem; padding:.5rem .9rem !important; position:relative; }
.navbar-portail .nav-link::after{
    content:""; position:absolute; left:.9rem; right:.9rem; bottom:.15rem; height:2px;
    background:var(--accent); transform:scaleX(0); transform-origin:left; transition:.2s;
}
.navbar-portail .nav-link:hover::after, .navbar-portail .nav-link.active::after{ transform:scaleX(1); }
.dropdown-menu{ border:1px solid var(--border); box-shadow:var(--shadow-card); }
.dropdown-item:active{ background:var(--primary-soft); color:var(--primary-dark); }

/* ---- hero / sliders ---- */
.hero-band{ display:flex; width:100%; height:75vh; min-height:460px; background:var(--primary-dark); }
.hero-carousel{ flex:0 0 72%; max-width:72%; position:relative; overflow:hidden; }
.hero-carousel .carousel, .hero-carousel .carousel-inner, .hero-carousel .carousel-item{ height:100%; }
.slide-bg{ height:100%; width:100%; display:flex; align-items:center; position:relative; background-size:cover; background-position:center; }
.slide-bg::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(18,41,77,.88) 0%, rgba(18,41,77,.55) 45%, rgba(18,41,77,.25) 100%);
}
.slide-content{ position:relative; z-index:2; color:#fff; padding:0 5%; max-width:640px; }
.slide-content .eyebrow{ color:var(--accent-light); }
.slide-content h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,3rem); margin-bottom:1rem; }
.slide-content p{ color:#DCE6F4; font-size:1.05rem; }
.slide-1{ background:linear-gradient(120deg,#101B6B,#1F3FCB); }
.slide-2{ background:linear-gradient(120deg,#152694,#3253E0); }
.slide-3{ background:linear-gradient(120deg,#0E1758,#1B33B0); }
.slide-4{ background:linear-gradient(120deg,#16209E,#2A46D0); }
.slide-5{ background:linear-gradient(120deg,#101B6B,#3556E0); }
.slide-6{ background:linear-gradient(120deg,#0C1450,#1F3FCB); }

.hero-carousel .carousel-indicators{ margin-bottom:1.4rem; }
.hero-carousel .carousel-indicators [data-bs-target]{
    width:8px; height:8px; border-radius:50%; background:var(--accent-light); opacity:.55; border:none;
}
.hero-carousel .carousel-indicators .active{ opacity:1; background:var(--accent); }
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next{ width:6%; }

.hero-photo{ flex:0 0 28%; max-width:28%; position:relative; padding:1.6rem 1.6rem 1.6rem 1rem; display:flex; }
.hero-photo-frame{
    position:relative; width:100%; border-radius:var(--radius-arch); overflow:hidden;
    background:linear-gradient(160deg,var(--accent-light),var(--primary-soft));
    display:flex; align-items:flex-end; border:6px solid #fff; box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.hero-photo-frame .caption{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    background:linear-gradient(0deg, rgba(16,27,107,.88), transparent); color:#fff; width:100%; padding:1.2rem 1rem .9rem; font-size:.85rem;
}
.hero-photo-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
}

@media (max-width: 991.98px){
    .hero-band{ flex-direction:column; height:auto; }
    .hero-carousel, .hero-photo{ flex:0 0 100%; max-width:100%; }
    .hero-carousel{ height:60vh; }
    .hero-photo{ height:30vh; padding:1rem; }
}

/* ---- corps ---- */
section{ padding:4.2rem 0; }
.section-alt{ background:var(--bg-alt); }
.section-title{ font-size:clamp(1.5rem,2.4vw,2.1rem); }

.word-card{
    background:#fff; border:1px solid var(--border); border-radius:8px; padding:2.2rem;
    box-shadow:var(--shadow-card); height:100%;
}
.word-card .quote-mark{ font-family:'Playfair Display',serif; font-size:3.2rem; line-height:1; color:var(--accent-light); }
.responsable-photo{
    width:64px; height:64px; border-radius:50%; background:linear-gradient(160deg,var(--primary-soft),var(--accent-light));
    display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1.4rem; flex:0 0 auto;
}
.video-frame{
    position:relative; border-radius:var(--radius-arch); overflow:hidden; height:100%; min-height:340px;
    background:linear-gradient(160deg,var(--primary),var(--primary-dark));
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card);
}
.video-frame .play-btn{
    width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.15); border:2px solid #fff;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem; cursor:pointer; transition:.2s;
}
.video-frame .play-btn:hover{ background:var(--accent); border-color:var(--accent); }
.video-frame .video-label{ position:absolute; bottom:1rem; left:1.2rem; color:#EAF0FA; font-size:.8rem; letter-spacing:.05em; }
.video-frame-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.province-card{
    border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fff;
    box-shadow:var(--shadow-card); height:100%; transition:transform .2s, box-shadow .2s;
}
.province-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.province-thumb{ height:130px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.8rem; }
.province-card .body{ padding:1.1rem 1.2rem 1.3rem; }
.province-card .body small{ color:var(--text-muted); }

.scroll-row{ display:flex; gap:1.1rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; }
.scroll-row::-webkit-scrollbar{ height:7px; }
.scroll-row::-webkit-scrollbar-thumb{ background:var(--primary-soft); border-radius:10px; }
.region-card{
    flex:0 0 220px; scroll-snap-align:start; border:1px solid var(--border); border-radius:8px;
    background:#fff; box-shadow:var(--shadow-card); overflow:hidden; text-align:center;
}
.region-flag{
    height:90px; background:linear-gradient(135deg,var(--primary-soft),var(--bg-alt-2));
    display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1.6rem;
}
.region-foyer{
    width:62px; height:62px; border-radius:50%; border:3px solid #fff; overflow:hidden;
    margin:-31px auto 0; position:relative; background:var(--primary-soft);
    display:flex; align-items:center; justify-content:center; color:var(--primary);
    box-shadow:0 4px 10px rgba(16,27,107,.18); font-size:1.2rem;
}
.region-foyer img{ width:100%; height:100%; object-fit:cover; }
.region-foyer-label{ text-align:center; font-size:.68rem; color:var(--text-muted); margin-top:.25rem; letter-spacing:.03em; text-transform:uppercase; }
.region-card .body{ padding:.5rem .9rem .9rem; }
.region-card .body a{ text-decoration:none; font-weight:600; color:var(--primary-dark); font-size:.95rem; }
.region-card .body span{ display:block; font-size:.76rem; color:var(--text-muted); margin-top:.15rem; }

.stats-band{ background:var(--primary-dark); color:#fff; padding:3.2rem 0; }
.stat-item{ text-align:center; }
.stat-item .num{ font-family:'Playfair Display',serif; font-size:2.6rem; font-weight:700; color:var(--accent-light); line-height:1; }
.stat-item .label{ margin-top:.4rem; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:#C6D3E8; }

.testi-card{
    background:#fff; border-radius:var(--radius-arch); border:1px solid var(--border);
    padding:2.4rem 2.2rem 1.8rem; box-shadow:var(--shadow-card); max-width:720px; margin:0 auto; text-align:center;
}
.testi-card i.bi-quote{ color:var(--accent-light); font-size:1.8rem; }
.testi-card p{ font-size:1.08rem; color:var(--text); font-style:italic; }
.testi-avatar{
    width:52px; height:52px; border-radius:50%; background:var(--primary-soft); color:var(--primary);
    display:flex; align-items:center; justify-content:center; margin:0 auto .6rem; font-weight:700;
}
#testimonials .carousel-indicators [data-bs-target]{ background:var(--primary-soft); width:7px; height:7px; border-radius:50%; }
#testimonials .carousel-indicators .active{ background:var(--accent); }
#testimonials .carousel-control-prev, #testimonials .carousel-control-next{
    width:5%; filter:invert(20%) sepia(30%) saturate(600%) hue-rotate(180deg); opacity:.5;
}

/* ---- footer ---- */
footer{ background:var(--primary-dark); color:#C6D3E8; padding-top:3.4rem; }
footer h6{ color:#fff; font-weight:700; letter-spacing:.04em; margin-bottom:1.1rem; font-size:.92rem; text-transform:uppercase; }
footer a{ color:#C6D3E8; text-decoration:none; font-size:.9rem; }
footer a:hover{ color:var(--accent-light); }
footer ul{ list-style:none; padding:0; margin:0; }
footer ul li{ margin-bottom:.55rem; }
.newsletter-form .form-control{ border-radius:2px 0 0 2px; border:none; height:44px; }
.newsletter-form .btn{ border-radius:0 2px 2px 0; height:44px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.6rem; padding:1.1rem 0; font-size:.8rem; color:#9FB1CB; }
.social-round{
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
    display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right:.5rem; transition:.2s;
}
.social-round:hover{ background:var(--accent); color:#fff; }

    /* ==============================================
               CARTE AVEC GRANDE ZONE PHOTO
               ============================================== */
    .foyer-card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        border: 1px solid #eaeaea;
        overflow: hidden;
    }
    .foyer-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0,0,0,.09)!important;
    }

    /* Zone photo agrandie */
    .foyer-photo-wrapper {
        position: relative;
        height: 260px; /* Grande hauteur d'image */
        overflow: hidden;
        background-color: #e9ecef;
    }
    .foyer-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }
    .foyer-card:hover .foyer-photo {
        transform: scale(1.04); /* Effet zoom au survol */
    }

    /* Badges superposés sur la photo */
    .foyer-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 2;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .foyer-location-badge {
        position: absolute;
        bottom: 12px;
        right: 12px;
        z-index: 2;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px);
        color: #333;
        font-weight: 600;
        font-size: 0.82rem;
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }