/* ============================================================
   UFML-Syndicat — Page d'accueil (Lot 3)
   Fidèle à la maquette « Accueil_UFML-Syndicat ». Réutilise les variables
   de charte (définies sur .ufmls-page). Tout est scopé à .ufmls-page--accueil.
   ============================================================ */

@keyframes ufmlPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.82); } }

.ufmls-page--accueil{ background:var(--ufmls-violet); }
.ufmls-home__shell{ max-width:var(--ufmls-wide); margin:0 auto; padding:0 32px; }

/* ---------- HERO ---------- */
.ufmls-hero{ position:relative; overflow:hidden;
  background:radial-gradient(1000px 520px at 90% -10%, rgba(237,0,154,0.32), transparent 58%),
             radial-gradient(720px 460px at 2% 110%, rgba(255,255,255,0.1), transparent 55%), var(--ufmls-violet); }

/* Variante IMAGE DE FOND : overlay violet #545BE3 à 82 % par-dessus la photo
   (--hero-photo posée en inline par le template). Texte/compte à rebours lisibles. */
.ufmls-hero--photo{
  background-image:
    linear-gradient(90deg,
      rgba(84,91,227, var(--hero-overlay,0.82)) 0%,
      rgba(84,91,227, calc(var(--hero-overlay,0.82) * 0.72)) 42%,
      rgba(84,91,227, 0.16) 100%),
    var(--hero-photo);
  background-size:cover; background-position:center; background-repeat:no-repeat; }
/* Sous 768px le texte passe pleine largeur → dégradé vertical (haut lisible). */
@media (max-width:768px){
  .ufmls-hero--photo{
    background-image:
      linear-gradient(180deg,
        rgba(84,91,227, var(--hero-overlay,0.82)) 0%,
        rgba(84,91,227, calc(var(--hero-overlay,0.82) * 0.85)) 100%),
      var(--hero-photo); }
}

/* Variante DUOTONE (opt-in via filtre ufmls_hero_duotone) : photo désaturée +
   bicolore charte (violet → magenta). La photo passe en ::before pour la
   traiter sans toucher au texte ; overlay charte en ::after (multiply). */
.ufmls-hero--duotone{ background:var(--ufmls-violet); }
.ufmls-hero--duotone.ufmls-hero--photo{ background-image:none; }
.ufmls-hero--duotone::before{ content:""; position:absolute; inset:0; z-index:0;
  background:var(--hero-photo) center/cover no-repeat; filter:grayscale(1) contrast(1.08) brightness(0.92); }
.ufmls-hero--duotone::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, rgba(84,91,227,0.92), rgba(237,0,154,0.55)); mix-blend-mode:multiply; }
.ufmls-hero--duotone .ufmls-hero__inner{ position:relative; z-index:2; }
.ufmls-hero__inner{ max-width:var(--ufmls-wide); margin:0 auto; padding:74px 32px 84px;
  display:grid; grid-template-columns:1.12fr 0.98fr; gap:54px; align-items:center; }
.ufmls-hero__eyebrow{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.28); color:#fff; padding:7px 14px; border-radius:100px;
  font-size:12.5px; font-weight:600; letter-spacing:0.3px; margin-bottom:24px; }
.ufmls-hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--ufmls-magenta); animation:ufmlPulse 1.8s ease-in-out infinite; }
.ufmls-hero h1{ font-weight:800; font-size:56px; line-height:1.04; letter-spacing:-1.7px; color:#fff; margin:0 0 22px; text-wrap:balance; }
.ufmls-hero h1 .accent{ color:var(--ufmls-magenta); }
.ufmls-hero__lead{ font-size:18px; line-height:1.62; color:#DDE0F7; margin:0 0 26px; max-width:500px; }
.ufmls-hero__deadline-note{ background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  border-left:4px solid var(--ufmls-magenta); border-radius:12px; padding:16px 20px; margin-bottom:30px; max-width:500px;
  font-size:15.5px; line-height:1.55; color:#fff; font-weight:500; }
.ufmls-hero__deadline-note strong{ color:#FFB6E1; }
.ufmls-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
/* .ufmls-btn-primary et .ufmls-btn-ghost sont désormais des classes PARTAGÉES
   définies dans ufmls-charte.css (robustes, réutilisables sur tout le site). */

/* Carte compte à rebours */
.ufmls-countdown{ background:#3A3FB0; border:1px solid rgba(255,255,255,0.16); border-radius:22px; padding:30px;
  box-shadow:0 30px 70px rgba(28,20,80,0.45); }
.ufmls-countdown__flag{ display:flex; align-items:center; gap:9px; margin-bottom:20px;
  font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--ufmls-pink-soft); }
.ufmls-countdown__flag .dot{ width:8px; height:8px; border-radius:50%; background:var(--ufmls-magenta); animation:ufmlPulse 1.6s ease-in-out infinite; }
.ufmls-countdown__label{ font-size:12.5px; letter-spacing:0.5px; text-transform:uppercase; color:#C6C9F0; font-weight:600; margin-bottom:6px; }
.ufmls-countdown__date{ font-weight:800; font-size:40px; color:#fff; line-height:1; letter-spacing:-1px; margin-bottom:8px; }
.ufmls-countdown__sub{ font-size:13.5px; color:#C6C9F0; margin-bottom:24px; line-height:1.5; }
.ufmls-countdown__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.ufmls-countdown__cell{ background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:14px 6px; text-align:center; }
.ufmls-countdown__num{ font-weight:700; font-size:29px; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.ufmls-countdown__cell--days .ufmls-countdown__num{ color:var(--ufmls-magenta); }
.ufmls-countdown__unit{ font-size:10.5px; letter-spacing:0.8px; text-transform:uppercase; color:#C6C9F0; margin-top:8px; }
.ufmls-countdown__foot{ background:rgba(255,255,255,0.06); border-radius:12px; padding:13px 16px; font-size:13px; color:#D3D6F5; line-height:1.5; }
.ufmls-countdown__foot strong{ color:#fff; }

/* ---------- BARRE DE MOBILISATION ---------- */
.ufmls-mobstrip{ background:#2E3192; }
.ufmls-mobstrip__inner{ max-width:var(--ufmls-wide); margin:0 auto; padding:24px 32px; display:flex; align-items:center; gap:36px; flex-wrap:wrap; }
.ufmls-mobstrip__eyebrow{ font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ufmls-pink-soft); font-weight:600; margin-bottom:5px; }
.ufmls-mobstrip__count{ font-weight:700; font-size:22px; color:#fff; }
.ufmls-mobstrip__count span{ color:#C6C9F0; font-weight:500; font-size:16px; }
.ufmls-mobstrip__mid{ flex:1 1 320px; min-width:240px; }
.ufmls-mobstrip__bar{ height:12px; border-radius:100px; background:rgba(255,255,255,0.12); overflow:hidden; margin-bottom:8px; }
.ufmls-mobstrip__bar > span{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,#7C82F0,var(--ufmls-magenta)); transition:width 1.2s cubic-bezier(.2,.8,.2,1); }
.ufmls-mobstrip__text{ font-size:14px; color:#E4E6FA; font-weight:500; line-height:1.4; }
.ufmls-mobstrip__cta{ flex:0 0 auto; background:#fff; color:var(--ufmls-violet) !important;
  -webkit-text-fill-color:var(--ufmls-violet) !important; text-decoration:none; padding:12px 22px;
  border-radius:10px; font-weight:700; font-size:14.5px; }

/* ---------- Sections claires génériques ---------- */
.ufmls-section{ padding:78px 0 82px; }
.ufmls-section--light{ background:var(--ufmls-bg); }
.ufmls-section--white{ background:#fff; }
.ufmls-section__head{ max-width:640px; margin-bottom:44px; }
.ufmls-eyebrow{ font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ufmls-magenta); font-weight:700; margin-bottom:10px; }
.ufmls-section h2{ font-weight:700; font-size:38px; letter-spacing:-1px; color:var(--ufmls-anthracite); margin:0 0 12px; line-height:1.1; }
.ufmls-section__head p{ font-size:16px; line-height:1.6; color:var(--ufmls-text-muted); margin:0; }

/* ---------- POURQUOI ADHÉRER (3 cartes) ---------- */
.ufmls-why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ufmls-why__card{ background:#fff; border-radius:18px; padding:32px 30px; box-shadow:0 14px 40px rgba(84,91,227,0.09); border-top:4px solid var(--ufmls-violet); }
.ufmls-why__card:nth-child(2){ border-top-color:var(--ufmls-magenta); }
.ufmls-why__num{ width:46px; height:46px; border-radius:12px; background:rgba(84,91,227,0.12); color:var(--ufmls-violet);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; margin-bottom:20px; }
.ufmls-why__card:nth-child(2) .ufmls-why__num{ background:rgba(237,0,154,0.12); color:var(--ufmls-magenta); }
.ufmls-why__card h3{ font-weight:700; font-size:20px; color:var(--ufmls-anthracite); margin:0 0 10px; letter-spacing:-0.3px; }
.ufmls-why__card p{ font-size:14.5px; line-height:1.6; color:var(--ufmls-text-muted); margin:0; }

/* ---------- CHIFFRES CLÉS ---------- */
.ufmls-stats{ background:var(--ufmls-violet); padding:58px 0; }
.ufmls-stats__grid{ max-width:var(--ufmls-wide); margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ufmls-stat{ text-align:center; }
.ufmls-stat__num{ font-weight:800; font-size:46px; color:#fff; line-height:1; letter-spacing:-1.5px; }
.ufmls-stat__num--word{ font-size:30px; line-height:1.05; letter-spacing:-0.8px; }
.ufmls-stat__label{ font-size:14px; color:#DDE0F7; margin-top:10px; }
/* 4e case : emplacement mobilisation vide (pointillés) tant qu'aucun chiffre validé */
.ufmls-stat__placeholder{ border:1.5px dashed rgba(255,255,255,0.5); border-radius:12px; padding:12px 8px;
  display:flex; align-items:center; justify-content:center; min-height:56px;
  font-family:monospace; font-size:12px; color:#DDE0F7; line-height:1.4; text-align:center; }

/* ---------- NOS COMBATS (4 cartes) ---------- */
.ufmls-combats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ufmls-combat{ display:flex; flex-direction:column; background:#fff; border-radius:16px; padding:28px 24px;
  box-shadow:0 14px 40px rgba(84,91,227,0.09); border-top:4px solid var(--ufmls-violet); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease; }
.ufmls-combat:nth-child(even){ border-top-color:var(--ufmls-magenta); }
.ufmls-combat:hover{ transform:translateY(-4px); box-shadow:0 20px 46px rgba(84,91,227,0.16); }
.ufmls-combat__icon{ width:46px; height:46px; border-radius:12px; background:rgba(84,91,227,0.12); color:var(--ufmls-violet);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; margin-bottom:18px; }
.ufmls-combat:nth-child(even) .ufmls-combat__icon{ background:rgba(237,0,154,0.12); color:var(--ufmls-magenta); }
.ufmls-combat h3{ font-weight:700; font-size:18px; color:var(--ufmls-anthracite); margin:0 0 8px; letter-spacing:-0.3px; }
.ufmls-combat p{ font-size:14px; line-height:1.55; color:var(--ufmls-text-muted); margin:0 0 18px; flex:1; }
.ufmls-combat__more{ color:var(--ufmls-violet); font-weight:600; font-size:13.5px; }
.ufmls-combat:nth-child(even) .ufmls-combat__more{ color:var(--ufmls-magenta); }

/* ---------- LE MOT DU PRÉSIDENT ---------- */
.ufmls-presword{ background:#fff; padding:42px 0 46px; }
.ufmls-presword__box{ display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
  background:var(--ufmls-bg); border-left:4px solid var(--ufmls-magenta); border-radius:16px; padding:30px 34px; }
.ufmls-presword__photo{ width:112px; height:112px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  background:#E7E8FB; display:flex; align-items:center; justify-content:center; text-align:center; }
.ufmls-presword__photo img{ width:100%; height:100%; object-fit:cover; }
.ufmls-presword__photo .ph{ font-family:monospace; font-size:10px; color:var(--ufmls-violet); line-height:1.3; }
.ufmls-presword__kicker{ font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ufmls-magenta); font-weight:700; margin-bottom:8px; }
.ufmls-presword__box h3{ font-weight:700; font-size:22px; color:var(--ufmls-anthracite); margin:0 0 8px; letter-spacing:-0.4px; line-height:1.2; }
.ufmls-presword__box p{ font-size:14.5px; line-height:1.6; color:var(--ufmls-text-muted); margin:0 0 14px; max-width:640px; }
.ufmls-presword__box a{ color:var(--ufmls-magenta); text-decoration:none; font-weight:600; font-size:14px; }
.ufmls-placeholder-tag{ display:inline-block; font-family:monospace; font-size:11px; font-weight:700; color:#8a5a00;
  background:#FFF3CD; border:1px solid #FFE69C; border-radius:6px; padding:2px 8px; margin-left:6px; vertical-align:middle; }

/* ---------- ACTUALITÉS (data-driven, 3 cartes) ---------- */
.ufmls-home-news__head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:38px; gap:20px; flex-wrap:wrap; }
.ufmls-home-news__head h2{ margin:0; }
.ufmls-home-news__all{ color:var(--ufmls-violet); text-decoration:none; font-weight:600; font-size:14.5px; border-bottom:2px solid var(--ufmls-magenta); padding-bottom:3px; white-space:nowrap; }
.ufmls-home-news__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.ufmls-news-card{ background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(84,91,227,0.1); display:flex; flex-direction:column; }
.ufmls-news-card__img{ height:170px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:14px;
  background:linear-gradient(135deg, #545BE3 0%, #ED009A 100%); }
/* Repli sans image à la une : filigrane pictogramme logo blanc sur le dégradé
   (identique aux vignettes d'archives .ufmls-card__img). L'image, si présente, le recouvre. */
.ufmls-news-card__img::before{ content:""; position:absolute; pointer-events:none; right:7%; bottom:9%; width:40%; height:56%;
  background:url('../img/picto-ufmls-blanc.svg') no-repeat right bottom / contain; opacity:0.14; }
.ufmls-news-card__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.ufmls-news-card__badge{ position:absolute; top:14px; left:14px; z-index:1; }
.ufmls-news-card__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.ufmls-news-card__date{ font-size:12.5px; color:var(--ufmls-text-faint); margin-bottom:11px; font-weight:500; }
.ufmls-news-card__title{ font-weight:600; font-size:20px; line-height:1.24; color:var(--ufmls-anthracite); margin:0 0 10px; letter-spacing:-0.3px; }
.ufmls-news-card__title a{ color:inherit; text-decoration:none; }
.ufmls-news-card__excerpt{ font-size:14px; line-height:1.55; color:var(--ufmls-text-muted); margin:0 0 18px; }
.ufmls-news-card__more{ margin-top:auto; color:var(--ufmls-magenta); text-decoration:none; font-weight:600; font-size:14px; }

/* ---------- LA PAROLE DU PRÉSIDENT (vidéos) ---------- */
.ufmls-videos__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:start; }
.ufmls-video-main{ background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(84,91,227,0.1); }
.ufmls-video-main__body{ padding:24px 26px 26px; }
.ufmls-video-main__body h3{ font-weight:700; font-size:22px; line-height:1.25; color:var(--ufmls-anthracite); margin:0 0 8px; letter-spacing:-0.4px; }
.ufmls-video-main__meta{ font-size:13px; color:var(--ufmls-text-faint); font-weight:500; }
.ufmls-video-list{ display:flex; flex-direction:column; gap:16px; }
.ufmls-video-item{ display:flex; gap:14px; align-items:stretch; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 14px 40px rgba(84,91,227,0.1); text-decoration:none; }
.ufmls-video-item lite-youtube{ flex:0 0 128px; border-radius:0; }
.ufmls-video-item__title{ padding:10px 14px 10px 0; display:flex; align-items:center; }
.ufmls-video-item__title h4{ font-weight:600; font-size:14.5px; line-height:1.3; color:var(--ufmls-anthracite); margin:0; letter-spacing:-0.2px; }
.ufmls-videos__all{ margin-top:34px; }
.ufmls-videos__all a{ display:inline-block; background:var(--ufmls-violet); color:#fff !important;
  -webkit-text-fill-color:#fff !important; text-decoration:none; padding:13px 26px; border-radius:11px; font-weight:600; font-size:14.5px; }
/* Poster local (pas de requête ytimg au chargement — CNIL) */
.ufmls-video-main lite-youtube,
.ufmls-video-item lite-youtube{
  background-color:#E7E8FB;
  background-image:repeating-linear-gradient(135deg, rgba(84,91,227,0.12) 0 14px, rgba(84,91,227,0) 14px 28px);
}

/* ---------- CTA final ---------- */
.ufmls-home-cta{ position:relative; overflow:hidden; padding:68px 0 72px;
  background:radial-gradient(700px 360px at 92% 0%, rgba(237,0,154,0.28), transparent 58%), var(--ufmls-violet); }
.ufmls-home-cta__inner{ max-width:1000px; margin:0 auto; padding:0 32px; text-align:center; }
.ufmls-home-cta h2{ font-weight:800; font-size:42px; letter-spacing:-1.2px; color:#fff; line-height:1.08; margin:0 0 16px; }
.ufmls-home-cta p{ font-size:17px; line-height:1.6; color:#DDE0F7; margin:0 auto 30px; max-width:560px; }
.ufmls-home-cta__row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; }
.ufmls-home-cta__note{ color:#C6C9F0; font-size:14px; }

/* ---------- Responsive < 768px ---------- */
@media (max-width:768px){
  .ufmls-hero__inner,.ufmls-home__shell,.ufmls-mobstrip__inner,.ufmls-stats__grid{ padding-left:20px; padding-right:20px; }
  .ufmls-hero__inner{ grid-template-columns:1fr; gap:36px; padding-top:52px; padding-bottom:56px; }
  .ufmls-hero h1{ font-size:38px; }
  .ufmls-section{ padding:52px 0 56px; }
  .ufmls-section h2,.ufmls-home-cta h2{ font-size:28px; }
  .ufmls-why__grid,.ufmls-combats__grid,.ufmls-home-news__grid,.ufmls-videos__grid{ grid-template-columns:1fr; }
  .ufmls-stats__grid{ grid-template-columns:repeat(2,1fr); gap:28px 16px; }
  .ufmls-presword__box{ grid-template-columns:1fr; text-align:center; }
  .ufmls-presword__photo{ margin:0 auto; }
  .ufmls-mobstrip__inner{ gap:18px; }
}