/* ============================================================
   ANIMA — Sélecteur d'images Unsplash (brique J-U, spec 2026-09-24 « Le journal » § 3, critère 4)
   Composant montable (js/images/selecteur.js) : « Imaginer », la une du séjour, la couverture du projet pédagogique.
   Vignettes hotlinkées depuis images.unsplash.com (CSP img-src), crédit visible sous chaque image, avec ses liens.
   Tokens de css/tokens.css seuls ; aucun emoji ; la recherche est un blanc souligné, pas un cadre de formulaire.
   ============================================================ */
.img-sel { display: grid; gap: .45rem; min-width: 0; }
.img-sel [hidden] { display: none !important; }
.img-sel-form { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.img-sel-q { flex: 1 1 14rem; min-width: 0; min-height: 44px; padding: 0 .1em; background: transparent; border: 0; border-bottom: 1px solid var(--accent); border-radius: 0; color: var(--texte); font-family: var(--serif); font-size: 1.2rem; }
.img-sel-q::placeholder { color: var(--texte-3); opacity: 1; }
.img-sel-q:focus, .img-sel-q:focus-visible { outline: none; border-bottom: 2px solid var(--accent); background: var(--accent-fond); }
.img-sel .lien-bouton { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--texte-2); font: inherit; font-size: .9rem; text-decoration: underline; text-decoration-color: var(--ligne-2); text-underline-offset: 4px; cursor: pointer; }
.img-sel .lien-bouton:hover { color: var(--texte); text-decoration-color: currentColor; }
.img-sel .lien-bouton:disabled { opacity: .55; cursor: progress; }
.img-sel-note { margin: 0; min-height: 1.2em; font-size: .86rem; color: var(--texte-2); text-wrap: pretty; }
.img-sel-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .8rem .6rem; }
.img-sel-compact .img-sel-grille { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.img-sel-v { min-width: 0; }
.img-sel-choix { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--s3); cursor: pointer; }
.img-sel-choix img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.img-sel-choix:hover img { transform: scale(1.04); }
.img-sel-choix[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 0; }
.img-sel-choix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.img-sel-credit, .img-credit, .une-credit { margin: .2rem 0 0; font-family: var(--sans); font-size: .68rem; line-height: 1.3; color: var(--texte-3); overflow-wrap: anywhere; }
.img-sel-credit a, .img-credit a, .une-credit a { color: var(--texte-2); text-decoration: underline; text-decoration-color: var(--ligne-2); text-underline-offset: 2px; }
.img-sel-mention { margin: 0; font-size: .72rem; color: var(--texte-3); }

/* Dans « Imaginer » : le panneau de photos sous la phrase. */
.rc .choix-photos { padding-block: .6rem .7rem; }
.rc .une-credit-hote .une-credit { margin: -.55rem 0 .6rem; }
.rc .une-ed-photo { font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin-top: .35rem; }
.rc .une-ed-selecteur { margin: .3rem 0 .6rem; }

@media (prefers-reduced-motion: reduce) { .img-sel-choix img { transition: none; } }
@media (max-width: 860px) {
  .rc .une-credit-hote { grid-column: 1; grid-row: 3; }
  .rc .une-credit-hote .une-credit { margin: .2rem 0 0; font-size: .58rem; }
  .rc .une-sejour.est-deplie .une-credit-hote { grid-row: auto; }
}