@charset "UTF-8";
/* =====================================================================
   PFP — Widget Elementor « Slide Mobilité »
   Feuille reprise de html_seb/css/style.css (Séb), réduite au module
   parcours (HUD + vidéo de fond + six étapes), avec deux adaptations pour
   la vie dans WordPress :
     1. tous les sélecteurs sont préfixés par .slide-mobilite — le widget ne
        déborde sur rien d'autre (.wrap, .btn, .chip, .col, .body, .logos
        sont des noms trop courants pour rester globaux) ;
     2. les images de fond pointent sur assets/img/ au lieu de ../assets/.
   Les tokens de la charte vivent donc sur .slide-mobilite (ex-:root), et
   seul `html{scroll-behavior}` reste global (défilement fluide de la page).
   Les règles des autres sections (intro, conclusion, constat, bénévolat,
   association, partenaires, footer) ont été retirées automatiquement, avec
   leurs commentaires ; le sommaire ci-dessous est celui de la feuille de Séb.
   Ne pas éditer à la main : régénérer depuis html_seb si Séb livre une v5.
   ===================================================================== */
/* =====================================================================
   PFP — Rapport #11 « Isolement des personnes âgées & mobilités »
   Landing page « Mireille a rendez-vous » — feuille de style d'intégration
   D'après la maquette Figma « RA-mobilité-2026 › Mobilité-v4 »
   (desktop node 349-19248, mobile node 349-19949) et le prototype v4.

   Sommaire
   01. Tokens (charte PFP)          06. Cartes étape
   02. Base                         07. Constat + carte rapport
   03. Composants du kit            08. Bénévolat
   04. Intro / Conclusion           09. Association + partenaires
   05. Barre de parcours (HUD)      10. Footer
                                    11. Révélations / reduced-motion
   ===================================================================== */

/* =====================================================================
   01. TOKENS — charte PFP (à mapper sur les couleurs globales Elementor)
   ===================================================================== */
.slide-mobilite{
  /* couleurs */
  --bordeaux:#671C3D;        /* fond de l'expérience, titres sur fond clair */
  --bordeaux-hud:#4E142E;    /* barre de parcours sticky */
  --panel:#6B233F;           /* fond des cartes étape */
  --rouge:#E52645;           /* CTA principal, chiffres clés, accents */
  --rouge-trajet:#E40046;    /* portion parcourue de la barre de parcours */
  --jaune:#FCC749;           /* accroches, chips, jauge 40-70 % */
  --vert:#30A878;            /* jauge > 70 % */
  --blanc:#FFFFFF;
  --gris-clair:#F9F7F8;      /* sections claires */
  --gris-chip:#E6E6E6;       /* chip « du rapport » */
  --gris-txt:#606060;        /* texte du footer */
  --gris-filet:#CACACA;      /* filet bas du bloc partenaires */
  --noir:#000000;
  --w50:rgba(255,255,255,.5);

  /* typographies */
  --ft:"Josefin Sans",system-ui,sans-serif;   /* titres, capitales */
  --fx:"Montserrat",system-ui,sans-serif;     /* tout le reste */

  /* grille & mouvement */
  --col:1280px;              /* largeur de contenu (page 1440) */
  --hud-h:84px;              /* hauteur de la barre de parcours */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ombres de la charte */
  --ombre-carte:drop-shadow(0 0 20px rgba(0,0,0,.5));
  --ombre-flottante:0 0 40px rgba(0,0,0,.5);
}

/* =====================================================================
   02. BASE
   ===================================================================== */
.slide-mobilite *,.slide-mobilite *::before,.slide-mobilite *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
.slide-mobilite{
  margin:0;
  background:var(--bordeaux);
  color:var(--blanc);
  font-family:var(--fx);
  font-size:18px;
  line-height:26px;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
}
.slide-mobilite img{max-width:100%;display:block}
.slide-mobilite a{color:inherit}
.slide-mobilite p{margin:0}
.slide-mobilite h1,.slide-mobilite h2,.slide-mobilite h3{font-family:var(--ft);font-weight:600;text-transform:uppercase;margin:0;text-wrap:balance}
/* <em> = accroche colorée : jaune sur fond bordeaux, rouge sur fond clair */
.slide-mobilite em{font-style:normal;color:var(--jaune)}

.slide-mobilite .wrap{width:min(var(--col),calc(100% - 48px));margin-inline:auto}

.slide-mobilite .i{display:block}                       /* pictos, <svg> comme <img> */

/* =====================================================================
   03. COMPOSANTS DU KIT (chip, bouton, échelle typographique)
   ===================================================================== */
.slide-mobilite .chip{
  display:inline-block;background:var(--blanc);color:var(--noir);
  font-weight:600;font-size:14px;line-height:20px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 8px;
}

.slide-mobilite .chip-rouge{background:var(--rouge);color:var(--blanc)}
.slide-mobilite .chip-gris{background:var(--gris-chip)}

/* focus visible jaune sur tous les éléments actionnables (accessibilité) */
.slide-mobilite a:focus-visible,.slide-mobilite button:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}

.slide-mobilite .label{font-weight:600;font-size:14px;line-height:20px;letter-spacing:.12em;text-transform:uppercase}

.slide-mobilite .track-lbl{display:flex;justify-content:space-between;font-weight:600;font-size:14px;line-height:20px;letter-spacing:.12em;text-transform:uppercase}

/* =====================================================================
   05. BARRE DE PARCOURS (HUD)
   Sticky uniquement pendant les six étapes : elle vit dans #parcours,
   qui se termine avant la conclusion. Ne jamais poser d'overflow:hidden
   sur #parcours ni sur un de ses parents (cela casserait le sticky).
   ===================================================================== */
.slide-mobilite .xp{position:relative}
.slide-mobilite .hud{
  position:sticky;top:0;z-index:20;height:var(--hud-h);
  background:var(--bordeaux-hud);
  border-top:1px solid var(--w50);border-bottom:1px solid var(--w50);
}
.slide-mobilite .hud .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.slide-mobilite .hud-grp{display:flex;align-items:center;gap:40px}
.slide-mobilite .hud-sep{width:1px;align-self:stretch;background:var(--w50)}

/* trajet Mireille → Simone */
.slide-mobilite .track-box{padding:12px 20px;display:grid;gap:14px;width:280px}
.slide-mobilite .track-box .track-lbl{letter-spacing:.09em}
.slide-mobilite .track-box .track-lbl span+span{color:var(--w50)}
.slide-mobilite .track{position:relative;height:3px;background:var(--blanc)}
.slide-mobilite .track-done{position:absolute;inset:0 auto 0 0;width:0;background:var(--rouge-trajet);transition:width .25s linear}
.slide-mobilite .track-mark{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--blanc);transform:translate(-50%,-50%)}
.slide-mobilite .track-dot{position:absolute;top:50%;left:0;width:20px;height:20px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.25);transition:left .25s linear}
.slide-mobilite .track-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--blanc)}
.slide-mobilite .track-heart{position:absolute;right:-10px;top:50%;width:20px;height:18px;transform:translateY(-50%)}

/* valeurs chiffrées (km, %, heure) */
.slide-mobilite .hud-val{display:grid;text-transform:uppercase}
.slide-mobilite .hud-val b{font-weight:700;font-size:22px;line-height:32px;font-variant-numeric:tabular-nums}
.slide-mobilite .hud-val span{font-weight:600;font-size:14px;line-height:20px;letter-spacing:.12em;color:var(--w50)}

/* jauge de sociabilité */
.slide-mobilite .gauge-box{display:grid;gap:16px;width:240px}
.slide-mobilite .gauge{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
.slide-mobilite .gauge-fill{position:absolute;inset:0 auto 0 0;width:100%;border-radius:6px;background:var(--vert);transition:width .25s linear,background .4s}
/* le pourcentage prend la couleur de la jauge dès qu'elle quitte le vert */
.slide-mobilite .hud-gauge .hud-val b{transition:color .4s}

/* horloge */
.slide-mobilite .hud-time{display:flex;align-items:center;gap:12px}
.slide-mobilite .hud-time .i{width:40px;height:40px;flex:none}
.slide-mobilite .hud-time b{font-size:28px;letter-spacing:.08em;line-height:32px}
.slide-mobilite .hud-time b i{font-style:normal;font-size:18px;letter-spacing:.08em}
.slide-mobilite .hud-time.late b{color:var(--jaune)}   /* l'heure passe en jaune dès 10h00 */

@media (max-width:1180px){
  .slide-mobilite .hud-grp{gap:20px}
  .slide-mobilite .track-box{width:220px}
  .slide-mobilite .gauge-box{width:170px}
}

/* — HUD mobile (maquette 349-19949, 375 px) : 97 px, deux lignes à gauche,
     filet vertical, horloge empilée à droite — */
@media (max-width:900px){
  .slide-mobilite{--hud-h:97px}
  .slide-mobilite .hud{height:auto;min-height:var(--hud-h)}
  .slide-mobilite .hud .wrap{
    width:calc(100% - 24px);
    display:grid;grid-template-columns:minmax(0,1fr) 1px auto;grid-template-rows:auto auto;
    gap:12px 15px;padding:12px 0;align-items:end;
  }
  .slide-mobilite .hud-grp{gap:16px;width:100%;align-items:flex-end}
  .slide-mobilite .hud-grp:first-child{grid-area:1/1}
  .slide-mobilite .hud-gauge{grid-area:2/1}
  .slide-mobilite .hud-sep{display:none}
  .slide-mobilite .hud-grp:first-child + .hud-sep{display:block;grid-area:1/2/3/3;align-self:stretch}
  .slide-mobilite .hud-time{grid-area:1/3/3/4;flex-direction:column;gap:12px;align-self:center;justify-self:center;padding-left:2px}
  .slide-mobilite .track-box{padding:0;flex:1;width:auto;min-width:0;gap:6px}
  .slide-mobilite .track-box .track-lbl{font-size:12px;letter-spacing:.09em}
  .slide-mobilite .track-dot{width:18px;height:18px}
  .slide-mobilite .track-heart{width:17px;height:16px;right:-8px}
  .slide-mobilite .gauge-box{flex:1;width:auto;min-width:0;gap:6px}
  .slide-mobilite .gauge-box .label{font-size:12px;letter-spacing:.12em}
  .slide-mobilite .hud-val{min-width:58px;justify-items:center}
  .slide-mobilite .hud-val b{font-size:16px;line-height:20px}
  .slide-mobilite .hud-val span{display:none}          /* « Restant », « lien social », « rendez-vous à 10h » */
  .slide-mobilite .hud-time .hud-val{min-width:0}
  .slide-mobilite .hud-time b{font-size:20px;line-height:24px;letter-spacing:.04em}
  .slide-mobilite .hud-time b i{font-size:14px}
  .slide-mobilite .hud-time .i{width:30px;height:30px}
}

/* =====================================================================
   06. MODULE PARCOURS — vidéo de fond fixe + cartes étape
   ===================================================================== */
.slide-mobilite .steps{position:relative}
.slide-mobilite .video-bg{
  position:sticky;top:0;height:100vh;overflow:hidden;z-index:0;
  background:var(--bordeaux) url("../img/parcours-fond-poster.jpg") center/cover no-repeat;
}
.slide-mobilite .video-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.slide-mobilite .stepcol{position:relative;z-index:1;margin-top:-100vh}
.slide-mobilite .step{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--hud-h) + 24px) 24px 40px;scroll-margin-top:var(--hud-h);
}

/* Fondu séquencé à l'entrée (≥ 35 % de la carte visible → classe .in) :
   0,6 s de latence, puis le visuel « pop », le texte 1 s après, l'encart
   chiffre clé 2,5 s après le texte. Les trois délais sont des variables,
   réglables sans toucher au script. À la sortie, tout disparaît ensemble
   sans délai (les délais ne sont posés que sur l'état .in). */
.slide-mobilite .card{
  --d-illu:.6s;--d-txt:1.6s;--d-stat:4.1s;
  width:min(1024px,100%);display:flex;align-items:stretch;
  border-radius:40px 0 40px 0;overflow:hidden;background:var(--panel);
  filter:var(--ombre-carte);
  opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.slide-mobilite .card.in{opacity:1;transform:none;transition-delay:var(--d-illu)}
.slide-mobilite .card-txt,.slide-mobilite .card-stat{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.slide-mobilite .card.in .card-txt{opacity:1;transform:none;transition-delay:var(--d-txt)}
.slide-mobilite .card.in .card-stat{opacity:1;transform:none;transition-delay:var(--d-stat)}

.slide-mobilite .card-illu{flex:none;width:420px;height:420px}
.slide-mobilite .card-illu img{width:100%;height:100%;object-fit:cover}
.slide-mobilite .card-side{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.slide-mobilite .card-txt{flex:1;display:flex;align-items:center;padding:24px 40px}
.slide-mobilite .card-txt h3{font-size:28px;line-height:1.2;color:var(--blanc)}

/* encart « chiffre clé » : chips à cheval sur le bord haut, icône centrée
   verticalement par rapport au bloc chiffre + texte */
.slide-mobilite .card-stat{
  position:relative;background:var(--blanc);color:var(--noir);
  padding:32px 40px 24px;display:flex;gap:24px;align-items:center;
  border-radius:0 0 24px 0;
}
.slide-mobilite .stat-chips{position:absolute;left:40px;top:-18px;display:flex}
.slide-mobilite .stat-chips .chip{padding:8px}
.slide-mobilite .stat-ico{width:80px;height:80px;flex:none}
.slide-mobilite .stat-num{font-weight:700;font-size:48px;line-height:1.15;letter-spacing:.08em;color:var(--rouge)}
.slide-mobilite .stat-txt{font-size:18px;line-height:26px;font-weight:500}

@media (max-width:1100px){
  .slide-mobilite .card-illu{width:340px;height:auto;min-height:340px}
  .slide-mobilite .card-txt h3{font-size:24px}
}
@media (max-width:820px){
  /* carte mobile : illustration carrée pleine largeur, titre 22, encart 64/32/14 */
  .slide-mobilite .card{flex-direction:column}
  .slide-mobilite .card-illu{width:100%;height:auto;aspect-ratio:1}
  .slide-mobilite .card-illu img{aspect-ratio:1}
  .slide-mobilite .card-txt{padding:24px 12px 40px}
  .slide-mobilite .card-txt h3{font-size:22px}
  .slide-mobilite .card-stat{padding:32px 16px 24px;gap:24px}
  .slide-mobilite .stat-chips{left:16px}
  .slide-mobilite .stat-ico{width:64px;height:64px}
  .slide-mobilite .stat-num{font-size:32px}
  .slide-mobilite .stat-txt{font-size:14px;line-height:20px}
  .slide-mobilite .step{padding:calc(var(--hud-h) + 40px) 12px 40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide-mobilite .card,.slide-mobilite .card-txt,.slide-mobilite .card-stat{opacity:1;transform:none;transition:none}
  .slide-mobilite .video-bg video{display:none}          /* le poster reste en fond */
  .slide-mobilite .gauge-fill,.slide-mobilite .track-dot,.slide-mobilite .track-done{transition:none}
}


/* =====================================================================
   12. AJOUT WIDGET (hors feuille de Séb)
   Elementor pose le widget dans un container qui a ses propres marges ;
   le module, lui, est pleine largeur : cette classe l'en fait sortir.
   Le conteneur du widget ne doit rien rogner (sticky du HUD).
   ===================================================================== */
.slide-mobilite--fullbleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.elementor-widget-slide-mobilite .elementor-widget-container{overflow:visible}

/* Snap scroll sur les étapes. La page défile sur <html>, c'est donc lui qui
   porte scroll-snap-type, seulement si la page contient le module.
   « proximity » et non « mandatory » : le reste de la page, sans point
   d'accroche, se défile librement. L'étape s'accroche bord haut à 0 (le
   HUD sticky la recouvre ; son padding haut lui réserve déjà la place),
   d'où le scroll-margin-top remis à 0. Repli seulement : quand le script
   gère le « un cran = une étape », il pose .sm-cran sur <html> et le snap
   CSS s'efface (il se battrait avec la glissade JS). Pas de snap sur
   mobile (≤ 900 px) : scroll natif libre. */
@media (min-width:901px){
  html:has(.slide-mobilite .steps):not(.sm-cran){scroll-snap-type:y proximity}
}
.slide-mobilite .step{scroll-snap-align:start;scroll-margin-top:0}

/* Fondu des cartes plus rapide que chez Séb (0,6 / 1,6 / 4,1 s). */
.slide-mobilite .card{--d-illu:.3s;--d-txt:.8s;--d-stat:1.3s}