/* Annonce temporaire : bandeau d'accueil avec les solutions récentes, et fenêtre à l'arrivée. */

/* Palette de la carte de visite : noir, doré, rouge. */
:root {
    --annonce-nuit: #0e0e10;
    --annonce-rouge: #e7302a;
    --annonce-rouge-clair: #ff6b63;
    --annonce-or: #c9a35b;
}

/* ---------- Bandeau d'accueil ---------- */

.annonce-band {
    position: relative;
    overflow: hidden;
    padding: 64px 20px 68px;
    background:
        radial-gradient(900px 480px at 88% 8%, rgba(231, 48, 42, .2), transparent 68%),
        linear-gradient(150deg, var(--annonce-nuit) 0%, #241f18 100%);
    color: #fff;
}

.annonce-band__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 54px;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}

/* ---------- Colonne de gauche : le propos ---------- */

.annonce-band__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 7px 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
}

.annonce-band__fleche { color: var(--annonce-or); font-size: 16px; }

.annonce-band__titre {
    margin: 0 0 14px;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.annonce-band__texte { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .82); }

.annonce-points { margin: 0 0 30px; padding: 0; list-style: none; display: grid; gap: 11px; }

/* Le thème du site remet une puce sur chaque li : on la retire des deux listes. */
.annonce-points li,
.annonce-vignettes li { list-style: none; }
.annonce-points li::marker,
.annonce-vignettes li::marker { content: ""; }

.annonce-points li {
    position: relative;
    padding-left: 30px;
    font-size: 15.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

.annonce-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--annonce-rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* ---------- Colonne de droite : la nouveauté ---------- */

.annonce-visuel {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(6, 10, 15, .45);
    text-decoration: none;
    transition: transform .2s ease;
}

.annonce-visuel:hover { transform: translateY(-3px); }
.annonce-visuel:focus-visible { outline: 2px solid var(--annonce-or); outline-offset: 4px; }
.annonce-visuel img { display: block; width: 100%; height: 320px; object-fit: cover; }

.annonce-visuel__etiquette {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    background: rgba(10, 15, 20, .72);
    backdrop-filter: blur(3px);
}

.annonce-visuel__badge {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--annonce-rouge);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.annonce-visuel__nom { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }

.annonce-band__rubrique {
    margin: 24px 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.annonce-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.annonce-vignettes li { display: flex; margin: 0; padding: 0; }

/* Hauteurs égales : un nom sur deux lignes ne doit pas décaler la vignette voisine. */
.annonce-vignettes a {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.annonce-vignettes a:hover,
.annonce-vignettes a:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.annonce-vignettes a:focus-visible { outline: 2px solid var(--annonce-or); outline-offset: 3px; }

/* Les photos produits sont des détourés sur fond blanc : un panneau clair les met en valeur. */
.annonce-vignettes img {
    display: block;
    width: 100%;
    height: 74px;
    object-fit: contain;
    padding: 9px;
    background: linear-gradient(180deg, #ffffff 0%, #f1efe9 100%);
}

.annonce-vignettes span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 8px 10px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: center;
    color: rgba(255, 255, 255, .86);
}

/* ---------- Boutons ---------- */

.annonce-band__lien,
.annonce-pop__lien {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 999px;
    background: var(--annonce-rouge);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.annonce-band__lien:hover,
.annonce-pop__lien:hover { background: #c42722; color: #fff; transform: translateY(-1px); }
.annonce-band__lien:focus-visible,
.annonce-pop__lien:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Fenêtre à l'arrivée ---------- */

/*
 * Au-dessus de tout : l'en-tête du thème est à 99999 et le bandeau de consentement à 100000.
 * En dessous, la fenêtre passait sous la navigation, qui restait nette au milieu du voile.
 */
.annonce-pop { position: fixed; inset: 0; z-index: 100002; }
.annonce-pop[hidden] { display: none; }
.annonce-pop__voile { position: absolute; inset: 0; background: rgba(8, 12, 17, .7); backdrop-filter: blur(3px); }

.annonce-pop__boite {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 36px));
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(170deg, #191410 0%, #0e0e10 100%);
    box-shadow: 0 30px 80px rgba(6, 10, 15, .55), 0 0 0 1px rgba(255, 255, 255, .07);
    color: #fff;
}

.annonce-pop__fermer {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 12, 17, .55);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.annonce-pop__fermer:hover { background: rgba(8, 12, 17, .82); }
.annonce-pop__fermer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.annonce-pop__image { position: relative; display: block; }
/*
 * Recadrage par le haut : la photo est large, la fenêtre la coupe en hauteur, et un cadrage
 * centré plaquait les caméras contre le bord supérieur. Le bas, de l'herbe, ne manque à personne.
 */
.annonce-pop__image img { display: block; width: 100%; height: 215px; object-fit: cover; object-position: center top; }

/* Le dégradé fond la photo dans le panneau : pas de ligne de coupe franche. */
.annonce-pop__voile-image {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .1) 0%, rgba(14, 14, 16, .35) 55%, #0e0e10 100%);
}

.annonce-pop__annees {
    position: absolute;
    left: 20px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(8, 12, 17, .5);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
}

.annonce-pop__fleche { color: var(--annonce-or); }

/* Médaillon anniversaire, à cheval sur la photo et le texte. */
.annonce-pop__medaillon {
    position: absolute;
    top: 178px;
    right: 28px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8352f 0%, #c42722 100%);
    /* Halo court : le panneau rogne ce qui dépasse, et un halo large se verrait coupé au bord. */
    box-shadow: 0 6px 16px rgba(231, 48, 42, .3), 0 0 0 5px rgba(14, 14, 16, .92);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: #fff;
}

.annonce-pop__corps { padding: 26px 28px 30px; }
.annonce-pop__titre { margin: 0 0 10px; font-size: 25px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: #fff; }
.annonce-pop__texte { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .76); }

.annonce-pop__points { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 9px; }
.annonce-pop__points li { list-style: none; position: relative; padding-left: 27px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.annonce-pop__points li::marker { content: ""; }

.annonce-pop__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--annonce-rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

.annonce-pop__lien { display: block; text-align: center; }

/* ---------- Petits écrans ---------- */

@media (max-width: 980px) {
    .annonce-band__inner { grid-template-columns: 1fr; gap: 34px; }
    .annonce-visuel img { height: 260px; }
}

@media (max-width: 700px) {
    .annonce-band { padding: 40px 18px 44px; }
    .annonce-band__inner { gap: 28px; }
    .annonce-visuel img { height: 210px; }
    .annonce-vignettes img { height: 62px; }
    .annonce-vignettes span { font-size: 10.5px; padding: 6px 6px 9px; }

    /* Un bandeau en bas d'écran plutôt qu'une fenêtre qui recouvre le contenu. */
    .annonce-pop__voile { background: rgba(10, 15, 20, .38); backdrop-filter: none; }

    /* La barre d'appel fixe occupe le bas de l'écran : le panneau se pose juste au-dessus,
       sinon son bouton passe dessous et devient inatteignable. */
    .annonce-pop__boite {
        top: auto;
        bottom: 52px;
        left: 0;
        transform: none;
        width: 100%;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        border-radius: 18px 18px 0 0;
    }

    .annonce-pop__image img { height: 150px; }
    .annonce-pop__medaillon { top: 120px; right: 24px; width: 56px; height: 56px; font-size: 23px; }
    .annonce-pop__corps { padding: 20px 20px 24px; }
    .annonce-pop__titre { font-size: 21px; }
    .annonce-pop__points { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .annonce-visuel,
    .annonce-vignettes a,
    .annonce-band__lien,
    .annonce-pop__lien { transition: none; }

    .annonce-visuel:hover,
    .annonce-vignettes a:hover,
    .annonce-band__lien:hover { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .annonce-pop__boite { animation: annonce-entree .24s ease-out; }

    @keyframes annonce-entree {
        from { opacity: 0; transform: translate(-50%, -46%); }
        to { opacity: 1; transform: translate(-50%, -50%); }
    }

    @media (max-width: 700px) {
        .annonce-pop__boite { animation-name: annonce-entree-bas; }

        @keyframes annonce-entree-bas {
            from { opacity: 0; transform: translateY(22px); }
            to { opacity: 1; transform: none; }
        }
    }
}