/* =========================================================================
   §18 - Recherche sans résultat : bloc « Créer mon alerte »
   Partagé par les pages de recherche établissements ET parcours.
   Style « plug » du design system : coins très arrondis, ombre douce,
   badge d'icône en dégradé, beaucoup d'air. Aucune couleur en dur.
   ========================================================================= */

.opd-noresult {
    max-width: 680px;
    margin: 32px auto;
    padding: 0;
    overflow: hidden;
    text-align: center;
    background: var(--surface, #fff);
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 32px;
    box-shadow: 0 26px 60px -30px rgba(var(--primary-rgb), .55),
                0 10px 30px -22px rgba(15, 23, 42, .30);
}

/* -------------------------------------------------------------------------
   Illustration : un paysage equestre calme, en attente. Purement decorative
   (aria-hidden), inline (aucune requete reseau, compatible CSP stricte).
   Les couleurs viennent TOUTES du theme : les formes SVG portent des classes
   stylees ci-dessous, jamais d'attribut fill en dur.
   ------------------------------------------------------------------------- */
.opd-nr-scene {
    position: relative;
}

.opd-nr-svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 150;
}

/* Brume : la scene se fond dans la carte, le sentier semble en sortir. */
.opd-nr-scene::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px 0;
    height: 52px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface, #fff));
    pointer-events: none;
}

.opd-nr-sky-a { stop-color: var(--primary-50, #ecfdf5); }
.opd-nr-sky-b { stop-color: var(--primary-100, #d1fae5); }

.opd-nr-sun       { fill: #fff; opacity: .9; }
.opd-nr-sun-halo  { fill: #fff; opacity: .35; }
.opd-nr-cloud     { fill: #fff; opacity: .7; }

.opd-nr-hill-far  { fill: var(--primary-300, #6ee7b7); opacity: .5; }
.opd-nr-hill-mid  { fill: var(--primary, #10b981); opacity: .55; }
.opd-nr-hill-near { fill: var(--primary-dark, #059669); opacity: .85; }
.opd-nr-tree      { fill: var(--primary-darker, #047857); opacity: .65; }
.opd-nr-horse     { fill: var(--primary-900, #064e3b); opacity: .92; }

/* Sentier pointille : il continue au-dela de ce que la recherche a trouve. */
.opd-nr-trail {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 6 10;
    opacity: .55;
}

/* Radar : oPaddock continue de chercher pour vous. */
.opd-nr-radar-dot { fill: #fff; opacity: .9; }
.opd-nr-ping {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: opdNrPing 4s cubic-bezier(.16, 1, .3, 1) infinite;
}
.opd-nr-ping--2 { animation-delay: 1.15s; }
.opd-nr-ping--3 { animation-delay: 2.3s; }

@keyframes opdNrPing {
    0%   { transform: scale(.35); opacity: 0; }
    12%  { opacity: .8; }
    100% { transform: scale(3.4); opacity: 0; }
}

.opd-nr-clouds {
    transform-box: fill-box;
    transform-origin: center;
    animation: opdNrDrift 22s ease-in-out infinite alternate;
}

@keyframes opdNrDrift {
    from { transform: translateX(-1.6%); }
    to   { transform: translateX(1.6%); }
}

/* -------------------------------------------------------------------------
   Corps du bloc
   ------------------------------------------------------------------------- */
.opd-nr-body {
    padding: 4px 36px 40px;
}

.opd-noresult-title {
    margin: 0 0 14px;
    font-size: clamp(22px, 3.4vw, 28px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--slate-800, #1e293b);
    text-wrap: balance;
}

.opd-noresult-text {
    max-width: 54ch;
    margin: 0 auto 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--slate-600, #475569);
    text-wrap: pretty;
}

/* Intitule discret au-dessus du rappel des criteres. */
.opd-nr-chips-label {
    margin: 26px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--slate-500, #64748b);
}

/* Phrase d'appui sous le bouton : ce que l'alerte fera concretement. */
.opd-nr-hint {
    max-width: 46ch;
    margin: 12px auto 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--slate-500, #64748b);
}

/* -------------------------------------------------------------------------
   Pistes de rebond : elargir, retirer les filtres, tout voir.
   ------------------------------------------------------------------------- */
.opd-nr-rebonds {
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid var(--slate-100, #f1f5f9);
}

.opd-nr-rebonds-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-600, #475569);
}

.opd-nr-links {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.opd-nr-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 11px 16px;
    border: 1px solid var(--slate-100, #f1f5f9);
    border-radius: 18px;
    background: var(--surface, #fff);
    color: var(--slate-700, #334155);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.opd-nr-link:hover {
    border-color: rgba(var(--primary-rgb), .45);
    background: rgba(var(--primary-rgb), .06);
    transform: translateY(-1px);
}

.opd-nr-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.opd-nr-link-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--primary-darker, #047857);
    background: rgba(var(--primary-rgb), .12);
}

.opd-nr-link-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.opd-nr-link-go {
    flex: none;
    font-size: 16px;
    color: var(--slate-400, #94a3b8);
    transition: transform .2s ease, color .2s ease;
}

.opd-nr-link:hover .opd-nr-link-go {
    transform: translateX(3px);
    color: var(--primary);
}

/* Rappel des critères exacts qui seront enregistrés dans l'alerte. */
.opd-noresult-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.opd-noresult-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-darker, #047857);
    background: rgba(var(--primary-rgb), .10);
}

.opd-noresult-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    margin-top: 26px;
    padding: 14px 30px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 12px 26px -14px rgba(var(--primary-rgb), .9);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.opd-noresult-btn:hover  { transform: translateY(-1px); box-shadow: 0 18px 32px -16px rgba(var(--primary-rgb), .95); }
.opd-noresult-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
.opd-noresult-btn:disabled { opacity: .7; cursor: default; transform: none; }

/* Mouvement reduit : aucune animation decorative, aucun deplacement au survol. */
@media (prefers-reduced-motion: reduce) {
    .opd-noresult-btn,
    .opd-nr-link,
    .opd-nr-link-go { transition: none; }
    .opd-noresult-btn:hover,
    .opd-nr-link:hover { transform: none; }
    .opd-nr-link:hover .opd-nr-link-go { transform: none; }
    .opd-nr-clouds { animation: none; }
    .opd-nr-ping {
        animation: none;
        opacity: .3;
        transform: scale(2.2);
    }
    .opd-nr-ping--2 { opacity: .18; transform: scale(3); }
    .opd-nr-ping--3 { display: none; }
}

/* Mobile : pleine largeur, aucun débordement horizontal, cibles >= 44px. */
@media (max-width: 768px) {
    .opd-noresult {
        margin: 18px 0;
        border-radius: 24px;
    }
    .opd-nr-body        { padding: 2px 18px 30px; }
    .opd-nr-scene::after { height: 34px; }
    .opd-noresult-text  { font-size: 14px; }
    .opd-noresult-btn   { width: 100%; }
    .opd-nr-rebonds     { margin-top: 26px; padding-top: 22px; }
    .opd-nr-link        { padding: 10px 13px; gap: 12px; font-size: 14.5px; }
    .opd-nr-link-ic     { width: 38px; height: 38px; border-radius: 13px; font-size: 17px; }
}

/* ==========================================================================
   Pastille « Être alerté des nouveautés » (partial alerte_recherche_cta.php)
   Affichée à côté du compteur de résultats, MÊME quand la recherche renvoie
   des résultats : créer une alerte ne doit plus dépendre du cas zéro résultat.
   ========================================================================== */
/* 2026-07-17 : le bouton etait un contour clair sur fond quasi blanc, il passait
   totalement inapercu a cote des cards. Il devient un bouton PLEIN en degrade du
   theme, plus haut et plus large, avec une cloche animee au survol. C'est le seul
   moyen pour l'utilisateur de se faire prevenir quand une structure arrive : sur un
   catalogue encore petit, c'est l'action la plus utile de la page, elle doit se voir. */
.opd-alerte-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 26px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 12px 26px -12px rgba(var(--primary-rgb), .95),
                0 0 0 0 rgba(var(--primary-rgb), .45);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.opd-alerte-cta i {
    font-size: 20px;
    transition: transform .25s ease;
}
.opd-alerte-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(var(--primary-rgb), .95),
                0 0 0 6px rgba(var(--primary-rgb), .14);
}
/* La cloche sonne au survol : rappelle ce que fait le bouton, sans animation
   permanente (qui deviendrait vite penible et detournerait des resultats). */
.opd-alerte-cta:hover i { transform: rotate(-14deg) scale(1.08); }
.opd-alerte-cta:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.opd-alerte-cta:disabled {
    opacity: .75;
    cursor: default;
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .opd-alerte-cta { transition: none; }
    .opd-alerte-cta:hover { transform: none; }
    .opd-alerte-cta i,
    .opd-alerte-cta:hover i { transition: none; transform: none; }
}

/* Mobile : la pastille passe en pleine largeur sous le compteur / le tri. */
@media (max-width: 768px) {
    .opd-alerte-cta {
        width: 100%;
        white-space: normal;
    }
}