/* ============================================================
   COMPOSANT ANNONCES — Bandeau + Section (carrousel vedette)
   A inclure dans votre CSS global, ou en <link> séparé.
   Nécessite : Bootstrap 5 + Bootstrap Icons déjà chargés.
   Optionnel : police 'Fraunces' (titres) — sinon retirez .font-display
   ============================================================ */

:root{
    --annonce-ink:      #0b1730;   /* encre marine profond */
    --annonce-primary:  #16294f;   /* bleu-marine académique */
    --annonce-primary-dark: #0b1730;
    --annonce-accent:   #c9a227;   /* or — échéance, CTA, signature du composant */
    --annonce-accent-light: #e4c766;
    --annonce-bg-soft:  #f7f5ef;   /* ivoire, façon papier diplôme */
    --annonce-border:   #e4ded0;
}

.font-display{ font-family:'Fraunces', serif; }

/* ============ BANDEAU D'ANNONCE ============ */
.annonce-bandeau{
    background: linear-gradient(90deg, var(--annonce-primary-dark), var(--annonce-primary));
    color: #fff;
    padding: .65rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1050;
}
.annonce-bandeau .icone-wrap{
    width: 34px; height: 34px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.annonce-bandeau .badge-jours{
    background: var(--annonce-accent);
    color: var(--annonce-ink);
    font-weight:700;
    font-size:.72rem;
    padding:.3rem .55rem;
    border-radius:20px;
    white-space:nowrap;
}
.annonce-bandeau .btn-cta{
    background:#fff;
    color: var(--annonce-primary-dark);
    font-weight:600;
    border:none;
    white-space:nowrap;
}
.annonce-bandeau .btn-cta:hover{ background:var(--annonce-accent); color: var(--annonce-ink); }
.annonce-bandeau .btn-close{ filter:invert(1) grayscale(1) brightness(2); }


/* ============ SECTION ANNONCES — CARROUSEL "VITRINE" ============
   Format inspiré de Coursera : la card active + un aperçu (peek) de
   la suivante coupée sur le bord droit, glissement net par pas (pas
   de scroll continu), image contenue dans la card (pas en fond avec
   texte superposé), boucle infinie sans à-coup.
   ================================================================ */
.section-annonces{
    padding: 4.5rem 0;
    background: var(--annonce-bg-soft);
}
.section-annonces .eyebrow{
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:.75rem;
    font-weight:700;
    color: var(--annonce-primary);
}
.section-annonces h2{
    font-weight:600;
}

/* Fenêtre visible : cache tout ce qui dépasse à droite/gauche */
.carrousel-fenetre{
    position:relative;
    overflow:hidden;
}

/* Piste : toutes les cards alignées en ligne, translatée par pas de card */
.carrousel-piste{
    display:flex;
    gap:1.25rem;
    will-change: transform;
}
/* transition activée par JS uniquement pendant un vrai déplacement
   (désactivée le temps du "snap" invisible de la boucle infinie) */
.carrousel-piste.avec-transition{
    transition: transform .55s cubic-bezier(.25,.8,.3,1);
}

/* ============================================================
   THÈMES DE CARTE — chaque .carte-vedette reçoit une classe
   .theme-xxx (posée par le JS, en rotation) qui pilote UNIQUEMENT
   ces variables. Le reste de la carte (structure, tailles, layout)
   ne change jamais : seule la palette s'adapte, donc le texte,
   les badges, le bouton et le ruban restent toujours lisibles,
   qu'ils tombent sur un fond clair ou un fond sombre.
   ============================================================ */

/* -- 1. Marine (sombre) — thème d'origine du composant -- */
.carte-vedette.theme-marine{
    --carte-bg: linear-gradient(120deg, var(--annonce-primary), var(--annonce-ink));
    --carte-fondu: var(--annonce-ink);
    --carte-border: rgba(201,162,39,.35);
    --carte-text: #f7f5ef;
    --carte-text-soft: rgba(247,245,239,.78);
    --carte-badge-bg: rgba(247,245,239,.12);
    --carte-badge-border: rgba(201,162,39,.55);
    --carte-badge-text: var(--annonce-accent-light);
    --carte-meta-text: rgba(247,245,239,.7);
    --carte-deadline-text: var(--annonce-accent-light);
    --carte-btn-bg: var(--annonce-accent);
    --carte-btn-text: var(--annonce-ink);
    --carte-btn-hover: var(--annonce-accent-light);
    --carte-ruban-bg: var(--annonce-accent);
    --carte-ruban-text: var(--annonce-ink);
}

/* -- 2. Clair — inspiré du bg-light Bootstrap, texte foncé -- */
.carte-vedette.theme-clair{
    --carte-bg: linear-gradient(120deg, #ffffff, #eef1f6);
    --carte-fondu: #eef1f6;
    --carte-border: rgba(22,41,79,.15);
    --carte-text: var(--annonce-ink);
    --carte-text-soft: #4a5568;
    --carte-badge-bg: rgba(22,41,79,.07);
    --carte-badge-border: rgba(201,162,39,.65);
    --carte-badge-text: var(--annonce-primary);
    --carte-meta-text: #5b6472;
    --carte-deadline-text: #8a6108;
    --carte-btn-bg: var(--annonce-primary);
    --carte-btn-text: #fff;
    --carte-btn-hover: var(--annonce-primary-dark);
    --carte-ruban-bg: var(--annonce-primary);
    --carte-ruban-text: #fff;
}

/* -- 3. Ambre — fond doré, texte foncé (contraste garanti) -- */
.carte-vedette.theme-ambre{
    --carte-bg: linear-gradient(125deg, #f6da8c, #e2b53f);
    --carte-fondu: #e2b53f;
    --carte-border: rgba(11,23,48,.2);
    --carte-text: var(--annonce-ink);
    --carte-text-soft: rgba(11,23,48,.72);
    --carte-badge-bg: rgba(11,23,48,.1);
    --carte-badge-border: rgba(11,23,48,.32);
    --carte-badge-text: var(--annonce-primary-dark);
    --carte-meta-text: rgba(11,23,48,.65);
    --carte-deadline-text: #8c2b2b;
    --carte-btn-bg: var(--annonce-primary-dark);
    --carte-btn-text: #f7f5ef;
    --carte-btn-hover: var(--annonce-primary);
    --carte-ruban-bg: var(--annonce-primary-dark);
    --carte-ruban-text: #f7f5ef;
}

/* -- 4. Sarcelle — vert-bleu profond, texte clair -- */
.carte-vedette.theme-sarcelle{
    --carte-bg: linear-gradient(125deg, #1f6270, #123842);
    --carte-fondu: #123842;
    --carte-border: rgba(201,162,39,.3);
    --carte-text: #f7f5ef;
    --carte-text-soft: rgba(247,245,239,.78);
    --carte-badge-bg: rgba(247,245,239,.12);
    --carte-badge-border: rgba(201,162,39,.5);
    --carte-badge-text: var(--annonce-accent-light);
    --carte-meta-text: rgba(247,245,239,.7);
    --carte-deadline-text: var(--annonce-accent-light);
    --carte-btn-bg: var(--annonce-accent);
    --carte-btn-text: var(--annonce-ink);
    --carte-btn-hover: var(--annonce-accent-light);
    --carte-ruban-bg: var(--annonce-accent);
    --carte-ruban-text: var(--annonce-ink);
}

/* -- 5. Bleu roi — variante plus vive du marine, texte clair -- */
.carte-vedette.theme-bleu{
    --carte-bg: radial-gradient(120% 140% at 85% -10%, rgba(228,199,102,.18), transparent 55%),
                linear-gradient(135deg, #24499e, #16294f);
    --carte-fondu: #16294f;
    --carte-border: rgba(228,199,102,.35);
    --carte-text: #f7f5ef;
    --carte-text-soft: rgba(247,245,239,.8);
    --carte-badge-bg: rgba(247,245,239,.14);
    --carte-badge-border: rgba(228,199,102,.55);
    --carte-badge-text: var(--annonce-accent-light);
    --carte-meta-text: rgba(247,245,239,.72);
    --carte-deadline-text: var(--annonce-accent-light);
    --carte-btn-bg: #ffffff;
    --carte-btn-text: var(--annonce-primary-dark);
    --carte-btn-hover: var(--annonce-accent-light);
    --carte-ruban-bg: var(--annonce-accent);
    --carte-ruban-text: var(--annonce-ink);
}

/* ---- Une card = 1 bloc de la vitrine ---- */
.carte-vedette{
    flex: 0 0 68%;
    display:flex;
    border-radius:14px;
    overflow:hidden;
    background: var(--carte-bg);
    border: 1px solid var(--carte-border);
    min-height: 300px;
}
@media (max-width: 991.98px){
    .carte-vedette{ flex-basis: 82%; }
}
@media (max-width: 575.98px){
    .carte-vedette{ flex-basis: 92%; flex-direction:column; min-height:auto; }
    /* sur mobile : image en haut, texte en bas, quel que soit l'ordre dans le DOM */
    .carte-vedette .panel-image{ order:-1; }
    .carte-vedette .panel-texte{ order:2; }
}

/* -- Zone texte (gauche) -- */
.carte-vedette .panel-texte{
    flex: 1 1 55%;
    padding: 2rem 2.2rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color: var(--carte-text);
    min-width:0;
}
.carte-vedette .badge-type{
    align-self:flex-start;
    background: var(--carte-badge-bg);
    border: 1px solid var(--carte-badge-border);
    color: var(--carte-badge-text);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:.32rem .75rem;
    border-radius:3px;
    margin-bottom:1rem;
    display:flex; align-items:center; gap:.4rem;
}
.carte-vedette h3{
    font-family:'Fraunces', serif;
    font-size: clamp(1.3rem, 1.9vw, 1.7rem);
    font-weight:600;
    line-height:1.25;
    margin-bottom:.6rem;
    color: var(--carte-text);
}
.carte-vedette .description{
    font-size:.9rem;
    line-height:1.5;
    color: var(--carte-text-soft);
    margin-bottom:1.1rem;
    /* garde-fou supplémentaire si jamais un texte non tronqué arrive côté JS */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.carte-vedette .meta{
    display:flex;
    flex-wrap:wrap;
    gap:.9rem 1.3rem;
    font-size:.82rem;
    margin-bottom:1.3rem;
    color: var(--carte-meta-text);
}
.carte-vedette .meta .deadline{ color: var(--carte-deadline-text); font-weight:600; }
.carte-vedette .btn-annonce{
    align-self:flex-start;
    background: var(--carte-btn-bg);
    border:none;
    border-radius:3px;
    color: var(--carte-btn-text);
    font-weight:700;
    padding:.6rem 1.35rem;
    transition: background .2s ease;
}
.carte-vedette .btn-annonce:hover{ background: var(--carte-btn-hover); color: var(--carte-btn-text); }

/* -- Zone image (droite) -- */
.carte-vedette .panel-image{
    position:relative;
    flex: 1 1 45%;
    min-width:0;
}
.carte-vedette .panel-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* Fondu : le bord de l'image adjacent au texte se dissout dans la
   couleur de fond de la carte (--carte-fondu, propre à chaque thème),
   pour que le panneau texte et l'image semblent se confondre plutôt
   que se juxtaposer avec une coupure nette. */
.carte-vedette .panel-image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background: linear-gradient(to right, var(--carte-fondu) 0%, transparent 45%);
}
@media (max-width: 575.98px){
    .carte-vedette .panel-image{ height:190px; }
    /* image en haut sur mobile : le fondu passe donc à la verticale,
       dissous vers le bas où le texte prend le relais */
    .carte-vedette .panel-image::before{
        background: linear-gradient(to top, var(--carte-fondu) 0%, transparent 55%);
    }
}

/* Ruban d'échéance, sur le coin de l'image (signature déjà établie du composant) */
.carte-vedette .ruban-echeance{
    position:absolute;
    top:1.1rem; right:-2.2rem;
    z-index:2;
    background: var(--carte-ruban-bg);
    color: var(--carte-ruban-text);
    font-size:.7rem;
    font-weight:800;
    padding:.28rem 2.5rem;
    transform: rotate(38deg);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    text-transform:uppercase;
    letter-spacing:.05em;
}
/* urgence (≤7 jours) : rouge fixe, volontairement indépendant du thème
   pour que l'alerte reste immédiatement reconnaissable sur toutes les cards */
.carte-vedette .ruban-echeance.urgent{ background:#8c2b2b; color:#f7f5ef; }

/* ---- Flèche "suivant", positionnée sur le bord de la fenêtre ---- */
.carrousel-fleche{
    position:absolute;
    top:50%; transform:translateY(-50%);
    z-index:3;
    width:42px; height:42px;
    border-radius:50%;
    border: 1px solid rgba(201,162,39,.55);
    background: var(--annonce-ink);
    color: var(--annonce-accent-light);
    display:flex; align-items:center; justify-content:center;
    transition: background .2s ease, border-color .2s ease;
}
.carrousel-fleche:hover{ background: var(--annonce-primary); border-color: var(--annonce-accent); }
.carrousel-fleche.precedent{ left:-1.4rem; }
.carrousel-fleche.suivant{ right:-1.4rem; }
@media (max-width: 575.98px){
    .carrousel-fleche{ display:none; } /* sur mobile : navigation au doigt (swipe/scroll natif) */
}

/* ---- Puces de pagination, alignées à gauche sous la vitrine (comme Coursera) ---- */
.carrousel-puces{
    display:flex;
    align-items:center;
    gap:.4rem;
    margin-top:1.1rem;
}
.puce{
    width:8px; height:8px;
    border-radius:50%;
    border:none;
    background: var(--annonce-border);
    cursor:pointer;
    transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.puce.active{
    width:26px;
    border-radius:5px;
    background: var(--annonce-primary);
}

@media (prefers-reduced-motion: reduce){
    .carrousel-piste.avec-transition{ transition:none; }
}