/* ==========================================================================
   style-pages-ca.css / style-pages.css

   Styles de pages retires des fichiers PHP, lot par lot. Chargee par
   inc/generic_head.php APRES style-dom.css.

   Deux exemplaires, meme contenu une fois un lot valide :
       style-pages-ca.css   commons_ca  -> aerialcollection.ca (essai)
       style-pages.css      commons     -> .fr et .com
   Chaque lot est une section delimitee par son marqueur. Ne pas editer a
   la main une section sans reporter la modification dans l'autre
   exemplaire.
   ========================================================================== */

/* ===== STYLES_LOT1_2026-09-24 — debut ===================================
   Recherche video : vue liste (inc_berceau_ligne.php), bascule
   vignettes/liste, intertitres achat immediat / sur devis, liens de
   telechargement d'une serie (page_recherche.php).
   ======================================================================== */

/* --- Vue liste — inc_berceau_ligne.php ---------------------------------
   Les VALEURS viennent de $VUE_LIGNE, en tete de inc_berceau_ligne.php,
   qui les emet en variables --vl-* sur :root. C'est la que se regle la
   densite. Les valeurs de repli ci-dessous sont celles du 24 septembre :
   la vue reste correcte si l'emission venait a manquer. */

/* La section porte deja margin:0 4% ; la liste prend donc toute la largeur
   utile, sans second plafond qui la recentrerait dans un coin. */
.vl-liste { display:block; width:100%; margin:0; }

/* flex-start et non center : sur une vignette haute, un texte centre
   verticalement flotte au milieu du vide. Il se lit en haut. */
/* Le saut d'ancre place la cible au tout haut de la fenetre, sous le bandeau
   fixe. scroll-margin-top reserve la hauteur du bandeau — sans JavaScript.
   --vl-ancre : hauteur du bandeau fixe. */
.vl-rang { scroll-margin-top:var(--vl-ancre, 150px);
  display:flex; align-items:flex-start; gap:16px;
  padding:var(--vl-espace, 12px) 8px;
  border-bottom:1px solid rgba(0,0,0,.08); }
.vl-rang:hover { background:rgba(0,0,0,.025); }

.vl-vignette { position:relative; flex:0 0 var(--vl-vignette, 220px);
  width:var(--vl-vignette, 220px); height:var(--vl-vignette-hauteur, 124px);
  overflow:hidden; border-radius:3px; background:#111; }
.vl-vignette img { width:100%; height:100%; object-fit:cover; display:block; }
.vl-vignette a { position:absolute; inset:0; display:block; }

.vl-infos { flex:1 1 auto; min-width:0; padding-top:var(--vl-marge-haut, 4px); }
.vl-titre { font-size:var(--vl-titre, 20px); line-height:1.3;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vl-lieu { font-size:var(--vl-lieu, 16px); opacity:.75; margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Largeur en ch : une unite qui vaut la largeur d'un caractere de la fonte
   courante. Le pave de mots-cles occupe donc toujours la meme emprise, quel
   que soit le nombre de termes — et la case centrale garde sa place. */
.vl-motscles { font-size:var(--vl-meta, 16px); opacity:.6;
  margin-top:6px; line-height:1.45;
  max-width:var(--vl-motscles-largeur, 62ch);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--vl-motscles-lignes, 2); overflow:hidden; }
.vl-motscles a { color:inherit; text-decoration:none; }
.vl-motscles a:hover { text-decoration:underline; opacity:1; }

/* Case centrale. flex:0 0 : elle ne retrecit PAS. Sa place est constante
   d'une ligne a l'autre et d'une recherche a l'autre — c'est la colonne de
   gauche qui absorbe les variations. Elle disparait d'un coup sous le seuil
   etroit plutot que de se tasser progressivement. */
.vl-centre { flex:0 0 var(--vl-centre-largeur, 340px);
  min-width:0; align-self:stretch;
  margin-top:var(--vl-marge-haut, 4px);
  padding:8px 12px; border:1px solid rgba(0,0,0,.12); border-radius:3px;
  font-size:var(--vl-meta, 16px); line-height:1.4; opacity:.8;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--vl-centre-lignes, 4); overflow:hidden; }

.vl-meta { flex:0 0 auto; display:flex; align-items:center; gap:10px;
  font-size:var(--vl-meta, 16px); opacity:.85;
  padding-top:calc(var(--vl-marge-haut, 4px) + 2px); }
.vl-duree { font-variant-numeric:tabular-nums; }
.vl-format { border:1px solid currentColor; border-radius:3px;
  padding:1px 5px; font-size:11px; letter-spacing:.04em; }
.vl-ref { font-family:ui-monospace,Menlo,monospace; font-size:11px; opacity:.6; }

/* Reprend .berc-vente / .berc-vente--direct du site : le vert reste celui du
   catalogue. Seule la marge verticale est neutralisee, elle etait prevue pour
   un bloc sous une vignette. */
/* color force : une regle de lien du site l'emporterait sinon sur le blanc
   de .berc-vente--direct, et le texte ressortirait en fonce sur le vert.
   Le survol n'est PAS touche : il reste celui du catalogue. */
.vl-rang .berc-vente { margin:calc(var(--vl-marge-haut, 4px) + 2px) 0 0; flex:0 0 auto;
  text-decoration:none; cursor:pointer; }
.vl-rang a.berc-vente--direct { color:#fff !important; }

/* LIGNE_DROITE_2026-09-10 — duree, format et pastilles reunis dans un
   bloc de largeur FIXE. Enfants directs du rang, leur largeur cumulee
   variait selon les pastilles presentes, .vl-infos retrecissait d'autant
   et la case de description se decalait d'une ligne a l'autre.

   La duree en haut, les pastilles dessous : la duree figure sur toutes
   les lignes, elle donne donc une colonne alignee par le haut, et ce
   sont les pastilles — intermittentes — qui varient en dessous. */
.vl-droite { flex:0 0 var(--vl-droite, 190px);
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  padding-top:calc(var(--vl-marge-haut, 4px) + 2px); }
.vl-droite .vl-meta { padding-top:0; }
.vl-pastilles { display:flex; flex-wrap:wrap; justify-content:flex-end;
  align-items:center; gap:6px; }
/* Les marges verticales d'origine etaient prevues pour des enfants
   directs du rang. Dans le bloc, c'est le gap qui espace. */
.vl-rang .vl-pastilles .berc-vente,
.vl-rang .vl-pastilles .serie-pastille { margin:0; }

/* Meme cause et meme parade que pour la pastille verte, plus haut :
   une regle de lien du site l'emporte sur la couleur et le soulignement
   de la classe. La pastille de serie ne l'avait jamais recue — d'ou un
   texte souligne et en couleur de lien en vue LISTE, correct en grille.
   Le selecteur doit rester prefixe par .vl-rang : le conflit est propre
   a cette presentation. */
.vl-rang .serie-pastille, .vl-rang .serie-pastille:link,
.vl-rang .serie-pastille:visited, .vl-rang .serie-pastille:hover,
.vl-rang .serie-pastille:active { color:#fff !important;
  text-decoration:none !important; }

/* SERIE_ANCRE_2026-09-10 — l'etat deplie doit reprendre le noir a la
   regle blanche ci-dessus, qui est en !important. Elle vient donc apres,
   dans la meme feuille, avec le meme poids. Ne pas intervertir. */
.vl-rang .serie-pastille--deplie, .vl-rang .serie-pastille--deplie:link,
.vl-rang .serie-pastille--deplie:visited,
.vl-rang .serie-pastille--deplie:hover,
.vl-rang .serie-pastille--deplie:active { color:#1a1a1a !important; }

.vl-ajout { flex:0 0 auto; border:1px solid rgba(0,0,0,.25); background:none;
  border-radius:4px; width:32px; height:32px; cursor:pointer; font-size:18px;
  line-height:1; padding:0; margin-top:var(--vl-marge-haut, 4px); }
.vl-ajout:hover { background:rgba(0,0,0,.06); }
.vl-ajout[data-inclus="1"] { border-color:transparent; background:rgba(0,0,0,.12); }

@media (max-width:760px) {
  .vl-vignette { flex-basis:132px; width:132px; height:74px; }
  .vl-meta, .vl-motscles, .vl-centre { display:none; }
  /* LIGNE_DROITE_2026-09-10 — sur ecran etroit la case de description
     disparait : il n'y a plus d'alignement a tenir, et une largeur fixe
     de 190 px prendrait un tiers de l'ecran pour une seule pastille. */
  .vl-droite { flex:0 0 auto; padding-top:0; }
}

/* --- Bascule vignettes / liste — page_recherche.php -------------------- */
.vl-bascule-icone { margin-top:6px; text-align:right; padding-right:25px; }
.vl-bascule-icone a { display:inline-block; width:32px; height:28px;
  line-height:28px; text-align:center; text-decoration:none;
  border:1px solid rgba(0,0,0,.18); margin-left:-1px; opacity:.55; }
.vl-bascule-icone a:first-child { border-radius:3px 0 0 3px; }
.vl-bascule-icone a:last-child  { border-radius:0 3px 3px 0; }
.vl-bascule-icone a:hover { opacity:.85; }
.vl-bascule-icone a.actif { opacity:1; background:rgba(0,0,0,.10); }

/* --- Intertitres achat immediat / sur devis — page_recherche.php --------
   SCISSION_VENTE_2026-09-20b — l'intertitre doit occuper une ligne
   entiere. section#resultats est en display:flex, et tout enfant y
   devient un element de rangee : sans flex-basis a 100%, le titre se
   range a cote des vignettes au lieu de les surplomber.
   Les elements .sc-groupe ne sont rendus que s'il y a deux groupes : la
   regle, toujours chargee, ne touche donc rien quand il n'y en a qu'un.
   Pas de :first-child ici : le premier enfant de #resultats est le chevron
   de separation, jamais un groupe. Le filet est porte par une classe que
   PHP n'ajoute qu'a partir du deuxieme. */
#resultats > .sc-groupe { flex: 0 0 100%; width: 100%; max-width: none;
    margin: 0 0 0.6em; }
#resultats > .sc-groupe--suite { padding-top: 1.6em;
    border-top: 1px solid #e3e3e3; }
#resultats > .sc-groupe .sc-titre { margin: 0; line-height: 2.2rem;
    font-size: 1.15em; font-weight: 400; letter-spacing: 1px; color: #0d79b9; }
#resultats > .sc-groupe .sc-note { margin: 0.15em 0 0; line-height: 2rem;
    font-size: 0.95em; font-weight: 300; letter-spacing: 1px; color: #6a6969; }

/* --- Telecharger une serie — page_recherche.php (SERIE_ZIP_2026-09-23) -- */
.serie-zip { margin:10px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.serie-zip a { display:inline-block; padding:7px 14px;
  border:1px solid #0d79b9; border-radius:3px; color:#0d79b9;
  text-decoration:none; font-size:0.95em; }
.serie-zip a:hover { background:#0d79b9; color:#fff; }

/* ===== STYLES_LOT1_2026-09-24 — fin ===================================== */

/* ===== STYLES_LOT2_2026-09-24 — debut ===================================
   Recherche video : survol des vignettes (page_recherche.php), barre de
   vue, pastilles de serie et d'achat immediat (inc_barre_vue.php).
   ======================================================================== */

/* --- Hauteur du bandeau fixe ------------------------------------------
   Seule definition. Sert au saut d'ancre au retour de la Fancybox : c'est le
   NAVIGATEUR qui saute a #<id du clip> et place la cible au tout haut de la
   fenetre, donc sous le bandeau ; scroll-margin-top lui reserve la place.
   Vaut pour les deux vues : elle corrige aussi la grille, ou la vignette
   retrouvee etait masquee par le titre.
   Remplace $_vlOffset (inc_barre_vue.php) et ancre_offset ($VUE_LIGNE),
   qui valaient 150 tous les deux.
   ATTENTION : page_recherche.php (script du bas, saut vers les resultats
   approchants) retranche encore 150 en dur. Si le bandeau change de
   hauteur, changer les deux. */
:root { --vl-ancre:150px; }
.berceau-bloc-warper { scroll-margin-top:var(--vl-ancre); }

/* --- Survol video des vignettes — page_recherche.php --------------------
   Portee limitee a la page par la classe du <body> : .berc-lesimages et
   .overlay-link servent aussi a la recherche photo et aux selections, qui
   n'ont jamais recu ces regles. */
.p-recherche-video .berc-lesimages {
  position: relative;
  overflow: hidden;
}

/* Image */
.p-recherche-video .berc-lesimages img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.2s ease;
}

/* Video */
.p-recherche-video .berc-lesimages video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: none;
  z-index: 10;
  background: black;
  filter: brightness(1);
  transition: filter 0.3s ease;
}

.p-recherche-video .berc-lesimages:hover video {
  filter: brightness(1.01) contrast(1.01);
}

.p-recherche-video .overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 25px;
  z-index: 15;
  background-color: rgba(255, 255, 255, 0); /* transparent par defaut */
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
  pointer-events: auto;
  border-radius: 4px;
}

.p-recherche-video .overlay-link:hover {
  background-color: rgba(255, 255, 255, 0.08); /* un peu plus clair */
  backdrop-filter: contrast(1.35) saturate(1.15); /* leger contraste + saturation */
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);  /* halo blanc doux */
}

/* Lien occupant toute la zone */
.p-recherche-video .overlay-link a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}

/* .meili-suggestion : aucune page ne produit cette classe au 24 septembre.
   Conservee en attendant de savoir si elle doit revenir. */
.p-recherche-video .meili-suggestion {
    font-size: 0.88em;
    color: #888;
    margin-top: 0.3em;
}
.p-recherche-video .meili-suggestion a {
    color: #888;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.p-recherche-video .meili-suggestion a:hover {
    color: #555;
}

.p-recherche-video .berc-lesimages video::-webkit-media-controls-play-button,
.p-recherche-video .berc-lesimages video::-webkit-media-controls-mute-button,
.p-recherche-video .berc-lesimages video::-webkit-media-controls-volume-slider,
.p-recherche-video .berc-lesimages video::-webkit-media-controls-fullscreen-button,
.p-recherche-video .berc-lesimages video::-webkit-media-controls-current-time-display,
.p-recherche-video .berc-lesimages video::-webkit-media-controls-time-remaining-display,
.p-recherche-video .berc-lesimages video::-webkit-media-controls-seek-back-button,
.p-recherche-video .berc-lesimages video::-webkit-media-controls-seek-forward-button,
.p-recherche-video .berc-lesimages video::-webkit-media-controls-toggle-closed-captions-button {
  display: none !important;
}

/* --- Pastille de serie — inc_barre_vue.php ------------------------------
   SERIES_2026-09-09 / SERIE_ACHAT_2026-09-10b — commune aux deux
   presentations. Meme forme que la pastille verte d'achat immediat (meme
   pilule, meme padding, meme graisse), dans un bleu ardoise nettement moins
   sature que le #0a7d3c de l'achat : elle se voit, et le vert garde la
   priorite du regard. La teinte tient en deux valeurs : #5c81a8 et #4a6d8c
   au survol. */
.serie-pastille, .berc-serie a { display:inline-block; text-decoration:none;
  font-size:11px; font-weight:600; letter-spacing:.03em; padding:3px 10px;
  border-radius:11px; border:1px solid transparent;
  background:#5c81a8; color:#fff; white-space:nowrap; }
.serie-pastille:hover, .berc-serie a:hover { background:#4a6d8c; }

/* SERIE_ANCRE_2026-09-10 — etat deplie : meme forme, meme place, meme
   lien, mais la pastille cesse de reclamer le regard. Le bleu est reserve
   a la ligne qui represente une serie REPLIEE, c'est-a-dire au seul cas
   ou le clic revele quelque chose. */
.serie-pastille--deplie, .berc-serie a.serie-pastille--deplie {
  background:#fff; color:#1a1a1a; border-color:rgba(0,0,0,.22); }
.serie-pastille--deplie:hover,
.berc-serie a.serie-pastille--deplie:hover { background:rgba(0,0,0,.05); }

/* La mention d'achat immediat est un LIEN dans les deux presentations.
   Deux consequences a fermer : le soulignement par defaut, et la couleur de
   lien du navigateur. Ces regles (a.berc-vente…) sont plus specifiques que
   celles de style-dom.css (.berc-vente…), et cette feuille est chargee
   apres : elles l'emportent des deux facons. La pastille de la page Tarifs
   est un <span>, elle n'est pas concernee. */
a.berc-vente { text-decoration:none; }
a.berc-vente--direct, a.berc-vente--direct:link,
a.berc-vente--direct:visited, a.berc-vente--direct:hover,
a.berc-vente--direct:active { color:#fff; }
.berc-serie { margin:6px 0 0; }
.series-note { font-size:13px; opacity:.7; margin:4px 0 0; }
.series-note a { text-decoration:underline; }
/* En vue liste, la pastille est dans .vl-pastilles, dont la regle
   (margin:0, plus specifique) fixe les marges. */
.vl-rang .serie-pastille { flex:0 0 auto; }

/* --- Barre de vue — inc_barre_vue.php -----------------------------------
   r5 — la bascule vignettes/liste est partie sous le critere de tri, en
   icones. Il ne reste dans la barre que le choix de la selection courante,
   qui n'a de sens qu'en vue liste et pour un visiteur connecte ; la barre
   disparait completement le reste du temps.
   VUE_LIGNE r3 — SORTIR DE LA GRILLE DES VIGNETTES. section#resultats est
   en display:flex, flex-wrap:wrap : tout ce qu'on y insere devient un
   element flex de plus. La classe vl-plein est posee sur la section par le
   script du bas, avant le premier rendu ; la regle :has() fait la meme
   chose sans JavaScript, pour les navigateurs qui la connaissent. */
section.vl-plein,
section:has(> .vl-barre--liste) { display:block !important; }

.vl-barre { display:flex !important; align-items:center; gap:18px;
  flex-wrap:wrap; width:100%; margin:0 0 8px; padding:6px 0 8px;
  font-size:13px; border-bottom:1px solid rgba(0,0,0,.10); }
.vl-barre > * { flex:0 0 auto; }
.vl-barre label { opacity:.7; margin:0; }
.vl-barre select { margin:0; }
.vl-barre select { font-size:13px; padding:3px 6px; max-width:260px; }
#vl-calque { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999;
  display:none; align-items:center; justify-content:center; }
#vl-calque > div { background:#fff; padding:26px 30px; border-radius:5px;
  max-width:420px; text-align:center; }
#vl-calque p { margin:0 0 18px; }
#vl-echo { position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:rgba(0,0,0,.85); color:#fff; padding:9px 18px; border-radius:4px;
  font-size:13px; z-index:9998; display:none; }

/* ===== STYLES_LOT2_2026-09-24 — fin ===================================== */