/* ════════════════════════════════════════════════════════════════════
   WIDGETS

   Deux surfaces distinctes :
     - les pages EMBARQUÉES (body.embed), affichées dans un iframe sur un
       site tiers, sans aucune chrome ;
     - la VITRINE /widgets, dans l'habillage normal du site.
   ════════════════════════════════════════════════════════════════════ */

/* ── Pages embarquées ────────────────────────────────────────────────── */

body.embed {
    margin: 0;
    min-height: 100vh;
    background: var(--fond);
}

.widget-carte {
    width: 100%;
    height: 100vh;
    min-height: 240px;
}

.widget-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: var(--r4);
    color: var(--texte-doux);
    text-align: center;
}

/* La signature, discrète, en bas à droite du cadre. C'est le lien de
   retour vers le site, et le canal qui en ramène du trafic. */
.widget-marque {
    position: fixed;
    right: 8px;
    bottom: 8px;
    z-index: 5;
    padding: 3px 9px;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: var(--fond-carte);
    color: var(--texte-doux);
    font-size: .6875rem;
    text-decoration: none;
}

.widget-marque strong { color: var(--or); }

/* ── Widget « carte + liste » ────────────────────────────────────────── */

.widget-cl {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.widget-cl__carte {
    width: 100%;
    flex: 1 1 60%;
    min-height: 200px;
}

.widget-cl__liste {
    flex: 1 1 40%;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--fond);
    border-top: 1px solid var(--bordure);
}

.widget-cl__item {
    display: flex;
    align-items: center;
    gap: var(--r3);
    width: 100%;
    padding: var(--r3) var(--r4);
    border: 0;
    border-bottom: 1px solid var(--bordure);
    background: none;
    color: var(--texte);
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.widget-cl__item:hover,
.widget-cl__item:focus-visible {
    background: var(--fond-eleve);
    outline: none;
}

.widget-cl__photo {
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--arrondi, 8px);
}

.widget-cl__texte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.widget-cl__texte strong { font-size: .9375rem; }

.widget-cl__badge {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.widget-cl__badge--perdu  { background: rgba(251, 191, 36, .16); color: #fbbf24; }
.widget-cl__badge--trouve { background: rgba(125, 211, 160, .16); color: #7dd3a0; }

.widget-cl__lieu {
    width: 100%;
    color: var(--texte-doux);
    font-size: .8125rem;
}

/* Sur un cadre large, la liste passe à côté de la carte plutôt qu'en
   dessous : on garde la carte visible pendant qu'on parcourt la liste. */
@media (min-width: 44rem) {
    .widget-cl { flex-direction: row; }

    .widget-cl__carte {
        flex: 1 1 60%;
        height: 100vh;
    }

    .widget-cl__liste {
        flex: 1 1 40%;
        max-width: 24rem;
        border-top: 0;
        border-left: 1px solid var(--bordure);
    }
}

/* ── Vitrine /widgets ────────────────────────────────────────────────── */

.widgets-entete {
    max-width: 46rem;
    margin: 0 auto var(--r6);
    text-align: center;
}

.widgets-entete h1 { margin: 0 0 var(--r2); }

.widgets-intro {
    margin: 0;
    color: var(--texte-doux);
    line-height: 1.6;
}

.widgets-galerie {
    display: grid;
    gap: var(--r6);
}

.widget-fiche {
    padding: var(--r5);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-large, 16px);
}

.widget-fiche h2 { margin: 0 0 var(--r1); }
.widget-fiche > .doux { margin: 0 0 var(--r4); }

.widget-reglages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r4);
    margin: 0 0 var(--r4);
}

.widget-reglages label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .8125rem;
    color: var(--texte-doux);
}

.widget-apercu {
    overflow: hidden;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi, 8px);
}

.widget-apercu iframe {
    display: block;
    width: 100%;
    border: 0;
}

.widget-code {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: var(--r4) 0 var(--r3);
    font-size: .8125rem;
    color: var(--texte-doux);
}

.widget-code textarea {
    width: 100%;
    padding: var(--r3);
    background: var(--fond);
    color: var(--texte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi, 8px);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
    resize: vertical;
}

/* ── Widget « fiche animal » ─────────────────────────────────────────── */

.widget-fa {
    box-sizing: border-box;
    min-height: 100vh;
    padding: var(--r3);
}

.widget-fa__carte {
    display: flex;
    flex-direction: column;
    gap: var(--r3);
    padding-bottom: var(--r4);
    overflow: hidden;
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-large, 16px);
}

.widget-fa__photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.widget-fa__corps {
    display: flex;
    flex-direction: column;
    gap: var(--r2);
    padding: 0 var(--r4);
}

.widget-fa__corps > .widget-cl__badge { align-self: flex-start; }

.widget-fa__nom {
    margin: 0;
    font-size: 1.25rem;
}

/*
 * Mêmes tuiles que la fiche du site, adaptées à la largeur de l'iframe :
 * deux colonnes de petites cases (étiquette au-dessus, valeur en dessous)
 * au lieu d'une liste clé/valeur, pour un look cohérent partout. (1.264.29)
 */
.widget-fa__faits {
    display: grid;
    gap: 8px;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    margin: var(--r2) 0;
}

.widget-fa__faits > div {
    display: block;
    background: var(--fond-eleve);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi, 8px);
    padding: 8px 10px;
}

.widget-fa__faits dt {
    margin: 0 0 3px;
    color: var(--texte-doux);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.widget-fa__faits dd {
    margin: 0;
    text-align: left;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--texte);
}

.widget-fa__lien {
    align-self: flex-start;
    margin-top: var(--r2);
}

/* ── Widget « bandeau d'alerte » ─────────────────────────────────────── */

.widget-bandeau {
    display: flex;
    align-items: center;
    gap: var(--r3);
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    padding: 10px var(--r4);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi, 8px);
    color: var(--texte);
    font-size: .9375rem;
    text-decoration: none;
}

.widget-bandeau:hover { background: var(--fond-eleve); }

.widget-bandeau__pastille {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(251, 191, 36, .16);
    color: #fbbf24;
    font-size: 1.05rem;
    font-weight: 800;
}

.widget-bandeau__texte { flex: 1 1 auto; }
.widget-bandeau__texte strong { color: var(--or); }

.widget-bandeau__cta {
    flex: none;
    color: var(--or);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Bloc « intégrer cette fiche » (sur la page annonce) + carte info ─── */

.widget-integrer { margin-top: var(--r4); }
.widget-integrer h2 { margin: 0 0 var(--r1); }

.widget-fiche--info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--r3);
}

/* ── Widget « formulaire de signalement » ────────────────────────────── */

.widget-sig {
    box-sizing: border-box;
    min-height: 100vh;
    padding: var(--r4);
}

.widget-sig__form {
    display: flex;
    flex-direction: column;
    gap: var(--r3);
    max-width: 34rem;
    margin: 0 auto;
}

.widget-sig__form > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .875rem;
}

.widget-sig__form label > span { color: var(--texte-doux); }

.widget-sig__ligne {
    display: flex;
    gap: var(--r3);
}

.widget-sig__ligne > label {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .875rem;
}

.widget-sig__genre,
.widget-sig__contact {
    display: flex;
    flex-direction: column;
    gap: var(--r2);
    padding: var(--r3);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi, 8px);
}

.widget-sig__genre {
    flex-direction: row;
    align-items: center;
    gap: var(--r4);
}

.widget-sig__genre legend,
.widget-sig__contact legend {
    padding: 0 6px;
    color: var(--texte-doux);
    font-size: .8125rem;
}

.widget-sig__genre label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.widget-sig__contact label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .875rem;
}

/* Le pot de miel : hors écran, jamais display:none (des robots l'ignorent). */
.widget-sig__miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.widget-sig__erreur {
    margin: 0;
    padding: var(--r3);
    border-radius: var(--arrondi, 8px);
    background: rgba(220, 80, 80, .14);
    color: #f0a0a0;
    font-size: .875rem;
}

.widget-sig__mention {
    margin: 0;
    color: var(--texte-faible);
    font-size: .75rem;
}

.widget-sig__ok {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--r3);
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--r4);
}

.widget-sig__ok-titre {
    margin: 0;
    color: var(--or);
    font-size: 1.25rem;
}

.widget-integrer__affiche { margin: 0 0 var(--r3); }

/* Mention de parrainage sur la vitrine, pour un partenaire connecté. */
.widgets-parrainage {
    max-width: 46rem;
    margin: 0 auto var(--r6);
    padding: var(--r3) var(--r4);
    background: rgba(217, 164, 65, .1);
    border: 1px solid var(--or);
    border-radius: var(--arrondi, 8px);
    color: var(--texte);
    text-align: center;
    line-height: 1.5;
}