/* Composant « Actualités » (#/actualites) — ultimate-actus.js.
   Proposition B « Une + fil » (choisie le 14/10/2026) : l'actu la plus récente en affiche large (date en très grand, photo à droite),
   puis « Le fil » des autres en tickets (souche sombre avec la date à gauche, trait perforé, photo, texte).
   Modèle de rendu : maquettes-ultimate/v3/actualites.html?v=b — mêmes règles, recopiées sous la classe racine.
   Règle : tout est sous .uactu, chaque classe créée par le composant commence par « uactu- » (attributs : data-uactu-…).
   Classes du site réutilisées telles quelles : .wrap, .kicker, .old, .ht, .hl, .hl-etq (ajustées ici sous .uactu) ;
   filtres = barre commune .fx-barre de commun.css (seule sa place dans la page est réglée ici).
   Le site garde son en-tête, son pied de page et son fond. Aucune règle de mouvement réduit (choix du propriétaire). */
.uactu {
  --papier: #efe6d8; --encre: #16130f; --brun: #7a5a33;
  --creme: linear-gradient(135deg, #f6eee2 0%, #ede1cd 60%, #e5d6bd 100%);
  --fiche: linear-gradient(170deg, #f7efe2, #ebdfc9);
  --or: linear-gradient(90deg, #b48a52, #e7c48f 50%, #b48a52);
  /* Grain du papier (bruit SVG, aucune image à charger) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .17 .62 0 0 0 -.25'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
.uactu a, .uactu button { -webkit-tap-highlight-color: transparent; }
/* Trame des photos : au-dessus de l'image et du dégradé du bas (comme la maquette) */
.uactu .ht::after { z-index: 1; opacity: .2; }

/* ======================================================================
   HAUT DE PAGE : retour, mot « Los Santos », titre, phrase (les filtres sont en tête de la liste, juste dessous)
   ====================================================================== */
/* En bas : 18 px + les 8 px de la barre = les 26 px qu'il y avait entre la phrase et les filtres */
.uactu .uactu-tete { position: relative; padding: calc(var(--hd) + clamp(14px, 2.4vh, 30px)) 0 18px; text-align: center; }
.uactu .uactu-retour { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 clamp(4px, 1vh, 12px); font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .02em;
  text-transform: uppercase; color: var(--acc); transition: gap .45s var(--ease), color .3s; }
.uactu .uactu-retour i { font-size: 19px; }
.uactu .uactu-retour:hover { gap: 13px; color: #fff; }
.uactu .uactu-tete .kicker { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 8px; color: var(--acc); }
.uactu .uactu-tete .kicker .old { font-size: 30px; line-height: 1; }
.uactu .uactu-titre { margin: 0; font-weight: 900; font-style: italic; font-size: clamp(42px, 5.4vw, 88px); line-height: 1.04; letter-spacing: -.035em; word-spacing: .12em; text-transform: uppercase; }
.uactu .uactu-titre .hl { --hd-delay: .55s; white-space: nowrap; }
.uactu .uactu-tete-desc { max-width: 560px; margin: 14px auto 0; font-size: 16px; line-height: 1.7; color: rgba(246, 241, 234, .78); }

/* ---------- Filtres : BARRE COMMUNE du site (.fx-barre de commun.css, ton beige posé par ultimate-actus.js, mécanique
   Ultimate.filtres de commun.js), segments seuls (la page n'a pas de recherche). Apparence et comportement : rien à styler ici.
   Seulement sa place dans la page (sous la racine) :
   - en tête de la liste (.uactu-sec), collée sous l'en-tête pendant la lecture ; centrée comme le haut de page ;
   - au-dessus de l'affiche, qui passe à z-index 9 pendant son animation Flip ;
   - en bas : 8 px de la barre + cette marge = l'écart d'avant entre les filtres et l'affiche (scotchs compris). */
.uactu .fx-barre { z-index: 10; justify-content: center; margin-bottom: clamp(26px, calc(3.4vw - 8px), 44px); }
/* Segments centrés s'ils tiennent (barre compacte sans loupe : bande sur toute la ligne et hauteur de 64 px, réglées dans
   commun.css pour toutes les barres sans recherche) */
.uactu .fx-barre .fx-segs { margin-inline: auto; }

/* ---------- Pièces communes : scotch, filet, bouton sombre, photo recadrée, étiquette ---------- */
.uactu .uactu-tape { position: absolute; z-index: 4; width: 110px; height: 30px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent 30%, transparent 70%, rgba(255, 255, 255, .12)), rgba(236, 211, 177, .76);
  box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .45);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)); }
.uactu .uactu-filet { display: block; flex: none; width: 64px; height: 2px; margin: 16px 0; background: var(--or); }
.uactu .uactu-bouton-encre { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; background: var(--encre); color: var(--acc);
  font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; transform: skewX(-8deg);
  box-shadow: 4px 4px 0 rgba(13, 12, 11, .16); transition: gap .4s var(--ease), transform .5s var(--ease), box-shadow .4s; }
.uactu .uactu-bouton-encre > * { transform: skewX(8deg); }
.uactu .uactu-bouton-encre i { font-size: 19px; }
.uactu .uactu-bouton-encre:hover { gap: 13px; transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(13, 12, 11, .24); }
/* Photo des textes : image recadrée (--img / --pos / --size), zoom lent au survol */
.uactu .uactu-im { position: absolute; inset: 0; z-index: 0; background: var(--img) var(--pos) / var(--size) no-repeat; transition: transform 1.3s var(--ease); }
.uactu .uactu-etq { position: absolute; z-index: 2; left: 14px; bottom: 14px; }
.uactu .uactu-etq .hl-etq { font-size: 12px; }
/* Pendant une animation Flip : rien ne freine ce qui vole (la barre de filtres, dans la même section, garde ses transitions) */
.uactu .uactu-is-flip > :not(.fx-barre), .uactu .uactu-is-flip > :not(.fx-barre) * { transition: none !important; }

/* ======================================================================
   UNE + FIL : l'actu la plus récente en affiche large, puis le fil des autres (tickets : la date à gauche)
   ====================================================================== */
.uactu .uactu-sec { padding: 0 0 clamp(110px, 10vw, 160px); }
.uactu .uactu-une-slot { position: relative; }
.uactu .uactu-une { position: relative; z-index: 2; }
.uactu .uactu-une .uactu-tape { width: 124px; }
.uactu .uactu-t1 { top: -11px; left: -28px; transform: rotate(-30deg); }
.uactu .uactu-t2 { top: -11px; right: -28px; transform: rotate(30deg); }
/* L'affiche à la une : la date en très grand, le titre et le texte à gauche ; la photo à droite */
.uactu .uactu-une-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 14px; border-radius: 3px; color: var(--encre); background: var(--grain), var(--creme);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 60px 80px -34px rgba(0, 0, 0, .95), 0 14px 24px -10px rgba(0, 0, 0, .6); }
.uactu .uactu-une-in::before { content: ""; position: absolute; z-index: 3; inset: 6px; border: 1px solid rgba(122, 90, 51, .38); pointer-events: none; }
.uactu .uactu-une-ph { position: relative; min-height: clamp(400px, 34vw, 520px); overflow: hidden; background: #2a2622; isolation: isolate; }
.uactu .uactu-une-ph::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(13, 12, 11, .5)); }
.uactu .uactu-une:hover .uactu-une-ph .uactu-im { transform: scale(1.03); }
.uactu .uactu-une-ph .uactu-etq { left: 18px; bottom: 18px; }
.uactu .uactu-une-ph .uactu-etq .hl-etq { font-size: 13px; }
.uactu .uactu-une-bas { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: clamp(26px, 3vw, 52px) clamp(20px, 3vw, 52px) clamp(24px, 2.6vw, 44px) clamp(14px, 2.4vw, 40px); }
.uactu .uactu-une-date { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 clamp(18px, 2vw, 28px); }
.uactu .uactu-une-date b { font-size: clamp(76px, 7.2vw, 118px); font-weight: 900; font-style: italic; line-height: .8; letter-spacing: -.06em; padding-right: .06em; }
.uactu .uactu-une-date > span { padding-bottom: 6px; border-bottom: 2px solid var(--encre); font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .1em; text-transform: uppercase; color: var(--brun); white-space: nowrap; }
.uactu .uactu-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 11.5px; font-weight: 800; font-style: italic; letter-spacing: .08em; text-transform: uppercase; color: var(--brun); }
.uactu .uactu-tag i { font-size: 16px; }
.uactu .uactu-une-t { margin: 10px 0 0; font-size: clamp(30px, 2.9vw, 48px); font-weight: 900; font-style: italic; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.uactu .uactu-une-bas .uactu-filet { margin: 18px 0; }
.uactu .uactu-une-x { margin: 0; font-size: 16.5px; line-height: 1.75; color: rgba(22, 19, 15, .84); }
.uactu .uactu-une-bas .uactu-bouton-encre { margin-top: 26px; }
/* Le fil */
.uactu .uactu-fil { position: relative; margin-top: clamp(64px, 6.4vw, 96px); }
.uactu .uactu-fil-h { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.uactu .uactu-fil-t { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.uactu .uactu-fil-n { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.uactu .uactu-fil-n b { min-width: 26px; padding: 4px 7px 3px; border-radius: 2px; background: rgba(236, 211, 177, .14); color: var(--acc); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.uactu .uactu-fil-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(236, 211, 177, .32), transparent); }
.uactu .uactu-liste { position: relative; display: flex; flex-direction: column; gap: 18px; }
/* Une ligne du fil : un ticket crème, souche sombre avec la date, trait perforé, photo, texte */
.uactu .uactu-ligne { position: relative; z-index: 1; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)) drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.uactu .uactu-ligne-in { --cut: 118px; position: relative; display: grid; grid-template-columns: var(--cut) minmax(0, 220px) minmax(0, 1fr); min-height: 152px; border-radius: 3px; color: var(--encre);
  background: var(--grain), var(--fiche); transition: transform .6s var(--ease);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 9px, #000 9.5px) top / 100% 50.5% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 9px, #000 9.5px) bottom / 100% 50.5% no-repeat;
  mask: radial-gradient(circle at var(--cut) 0, transparent 9px, #000 9.5px) top / 100% 50.5% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 9px, #000 9.5px) bottom / 100% 50.5% no-repeat; }
.uactu .uactu-ligne-in::after { content: ""; position: absolute; left: calc(var(--cut) - 1px); top: 14px; bottom: 14px; border-left: 2px dashed rgba(236, 211, 177, .3); pointer-events: none; }
.uactu .uactu-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 14px 8px; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(236, 211, 177, .1), transparent 70%), linear-gradient(170deg, #241b13, #110d09); }
.uactu .uactu-date b { font-size: 50px; font-weight: 900; font-style: italic; line-height: .82; letter-spacing: -.06em; padding-right: .06em; color: var(--acc); }
.uactu .uactu-date span { font-size: 10.5px; font-weight: 800; font-style: italic; letter-spacing: .08em; text-transform: uppercase; color: rgba(236, 211, 177, .66); }
.uactu .uactu-ph { position: relative; margin: 12px 0 12px 16px; overflow: hidden; border-radius: 2px; background: #2a2622; isolation: isolate; }
.uactu .uactu-txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 20px clamp(18px, 2.2vw, 34px); }
.uactu .uactu-lt { margin: 8px 0 0; font-size: clamp(19px, 1.6vw, 24px); font-weight: 900; font-style: italic; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.uactu .uactu-lx { max-width: 780px; margin: 7px 0 0; font-size: 14.5px; line-height: 1.65; color: rgba(22, 19, 15, .78); }
.uactu .uactu-txt .uactu-bouton-encre { height: 42px; margin-top: 14px; padding: 0 16px; font-size: 12px; }
@media (hover: hover) {
  .uactu .uactu-ligne:hover .uactu-ligne-in { transform: translateX(8px); }
  .uactu .uactu-ligne:hover .uactu-im { transform: scale(1.07); }
}
/* « Afficher plus » (au-delà de 6 lignes) */
.uactu .uactu-plus-zone { display: flex; justify-content: center; margin-top: 36px; }
.uactu .uactu-plus { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border: 1px solid rgba(236, 211, 177, .3); background: var(--verre); color: var(--acc);
  font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; transform: skewX(-8deg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s, color .3s, border-color .3s, transform .5s var(--ease); }
.uactu .uactu-plus > * { transform: skewX(8deg); }
.uactu .uactu-plus i { font-size: 20px; transition: transform .5s var(--ease); }
.uactu .uactu-plus b { min-width: 24px; padding: 3px 6px 2px; border-radius: 2px; background: rgba(236, 211, 177, .14); font-size: 11px; text-align: center; }
.uactu .uactu-plus:hover { background: var(--beige); color: var(--on-acc); border-color: transparent; transform: skewX(-8deg) translateY(-2px); }
.uactu .uactu-plus:hover b { background: var(--on-acc); color: var(--acc); }
.uactu .uactu-plus:hover i { transform: skewX(8deg) translateY(3px); }

/* ---------- Adaptation écrans ---------- */
/* Tablette : l'actu à la une passe en hauteur (photo au-dessus) */
@media (max-width: 880px) {
  .uactu .uactu-une-in { grid-template-columns: minmax(0, 1fr); }
  .uactu .uactu-une-ph { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .uactu .uactu-une-bas { padding: 26px 12px 12px; }
  .uactu .uactu-ligne-in { --cut: 100px; grid-template-columns: var(--cut) minmax(0, 170px) minmax(0, 1fr); }
  .uactu .uactu-date b { font-size: 42px; }
}
/* Téléphone */
@media (max-width: 700px) {
  .uactu .uactu-tete .kicker .old { font-size: 26px; }
  .uactu .uactu-titre { font-size: clamp(36px, 10.6vw, 56px); }
  .uactu .uactu-tete-desc { font-size: 15.5px; }
  /* 17 px + les 5 px de la barre compacte = les 22 px d'avant ; en bas, 5 + 29 = les 34 px d'avant */
  .uactu .uactu-tete { padding-bottom: 17px; }
  .uactu .fx-barre { margin-bottom: 29px; }
  .uactu .uactu-etq { left: 10px; bottom: 10px; }
  .uactu .uactu-une .uactu-tape { width: 84px; height: 26px; }
  .uactu .uactu-t1 { top: -8px; left: -12px; } .uactu .uactu-t2 { top: -8px; right: -12px; }
  .uactu .uactu-une-in { padding: 10px; }
  .uactu .uactu-une-ph { aspect-ratio: 16 / 10.5; }
  .uactu .uactu-une-bas { padding: 20px 6px 8px; }
  .uactu .uactu-une-date b { font-size: 72px; }
  .uactu .uactu-une-t { font-size: clamp(26px, 7.6vw, 34px); }
  .uactu .uactu-une-x { font-size: 15.5px; }
  .uactu .uactu-une-bas .uactu-bouton-encre { align-self: stretch; justify-content: center; margin-inline: 4px; }
  .uactu .uactu-fil-h { gap: 12px; }
  .uactu .uactu-ligne-in { --cut: 78px; grid-template-columns: var(--cut) minmax(0, 1fr); min-height: 0; }
  .uactu .uactu-ph { display: none; }
  .uactu .uactu-date b { font-size: 34px; }
  .uactu .uactu-date span { font-size: 9px; letter-spacing: .04em; }
  .uactu .uactu-txt { padding: 16px 16px 18px; }
  .uactu .uactu-lt { font-size: 17px; }
  .uactu .uactu-lx { font-size: 14px; }
}