/*
Theme Name: UU Vitrine
Theme URI: https://uu.legal
Description: Vitrine n°2 / UU — landing sous-traitants. Aesthetique Google Finance / Material 3. Single-page, images externalisees, GSAP ScrollTrigger.
Author: Umut AKKURT — Union d'Amitie Eurasiatique
Version: 3.17.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: uu-vitrine
*/

  :root{
    --bg-page:#FFFFFF; --bg-app:#F1F3F4; --bg-hover:#F1F3F4; --bg-active:#E8EAED;
    --bg-chrome:#FFFFFF; --bg-elevated:#FFFFFF; --row2:#FAFAFA;   /* fond global : blanc */
    --border-default:#DADCE0; --border-subtle:#E6E6E8;
    --text-primary:#202124; --text-secondary:#5F6368; --text-tertiary:#80868B;
    --g-blue:#0B57D0; --g-blue-hover:#0842A0; --g-blue-container:#D3E3FD;
    --nav-strip:#F7F7F8; --nav-fg:#0D0D0D; --nav-fg-muted:#6E6E80;
    --nav-tab-border:#DADCE0; --tab-radius:10px;
    --r-md:8px;
    --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;
    --fs-md:16px; --fs-base:16px;
    /* Corps du site : Google Sans classique (OFL depuis le 10/12/2025). */
    --font-sans:"Google Sans","Noto Sans",Arial,sans-serif;
    /* Navigation seulement : Google Sans Flex (OFL depuis 11/2025). */
    --font-header:"Google Sans Flex","Google Sans","Noto Sans",Arial,sans-serif;
    --text-ink:#191C1D;      /* encre : bandeaux, promo, onglets inactifs */
    --g-blue-deep:#0842A0;   /* bleu du menu actif : plus profond que --g-blue */
    --pill-off:#EFF1F2;      /* fond des onglets inactifs */
    --ease:cubic-bezier(0.2,0,0,1); --dur:200ms;
    /* --wmask pointait sur mark.png, qui est le dessin « 2W » — chiffre
       COMPRIS. Le pied posait donc un <span>2</span> devant un masque qui
       portait deja son 2 : il affichait « 22W ». Les deux lockups tirent
       maintenant sur mark-solo.png, le W seul, et le chiffre est toujours du
       texte — donc reglable. mark.png reste dans assets/ mais n'est plus
       appele nulle part. */
    --brand-color:#0B57D0; --wmask:url("assets/img/mark-solo.png");
    /* Marque : le W SEUL. La mention « n°2 » a ete retiree des deux lockups
       (barre et pied) — un signe, pas deux. Les tokens qui reglaient le
       chiffre (--brand-no-ratio / -lift / -gap / -ink) sont partis avec lui.
       Un palier = une hauteur de W, la largeur suit.

       --mark-ratio : le rapport LARGEUR/HAUTEUR de l'encre du masque, MESURE
       sur le fichier (mark-solo.png : 326x332 pleins bord a bord, soit 0,97).
       La valeur codee en dur valait 1,29 — le rapport de mark.png, l'ancien
       dessin « 2W » chiffre compris. Le W seul etait donc pose dans une boite
       de 44px alors qu'il n'en occupait que 33 : `contain` centrait l'encre et
       laissait 5,5px TRANSPARENTS de chaque cote — le W flottait dans sa
       boite au lieu de la remplir.
       Boite au bon rapport + masque cale a gauche : l'encre du W commence au
       bord gauche de sa boite, la boite ne mesure que le dessin. */
    --mark-h:38px; --mark-ratio:0.97; --mark-w:calc(var(--mark-h) * var(--mark-ratio));
    /* WhatsApp : le vert de la marque. Meme jeu de valeurs que uu-portail —
       le canal doit se lire pareil des deux cotes. */
    --wa-green:#25D366; --wa-green-hover:#1FBA56; --wa-green-tint:#E9F9EF;
    /* Teinte unique des panneaux : hero, bande promo et bandeaux. Une valeur.
       (Avant : 3 tons + un filet. Le promo et le hero sont maintenant deux
       panneaux de MEME couleur separes par 5px de blanc.) */
    --panel-bg:#F6F7F8;
    /* Surface des panneaux : part de --panel-bg en haut, tend vers le blanc en
       descendant. On s'arrete a #F8F9FA et non au blanc pur : a blanc pur, les
       coins ronds du bas se dissoudraient dans la page. */
    --panel-surface:linear-gradient(180deg,#F6F7F8 0%,#F8F9FA 45%,#FBFBFC 100%);
    /* Filet du cadre global. Depuis que le fond de page est blanc, la colonne
       blanche (nav + contenu + pied) n'avait plus aucun contour : ses coins
       ronds etaient invisibles, donc impossible de juger s'ils sont carres. */
    --frame-line:#E3E5E9;
    /* Rayon du cadre global (haut de nav, bas de pied) et des panneaux qu'il
       contient. La bande promo garde son rayon propre, plus rond, ci-dessous. */
    --panel-radius:13px;    /* rayon des panneaux — une valeur pour tout */
    --panel-radius-sm:11px; /* idem, sous 640px */
    --promo-radius:28px;    /* la bande promo, plus ronde que les autres panneaux */
    --promo-radius-sm:22px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;}
  /* Fond global browser-chrome (repris de uu-portail) : bleu #EAF1FE, contenu blanc qui flotte dessus */
  body{ font-family:var(--font-sans); background:var(--bg-chrome); color:var(--text-primary); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; overflow-x:clip; }
  .uu-app{ flex:1; display:flex; flex-direction:column; background:var(--bg-chrome); }
  /* 8px en haut ET en bas : le cadre (nav -> pied) est une colonne posee sur
     la page, pas collee a ses bords. Le bas manquait, le pied touchait la
     fenetre alors que la nav respirait. Sous 900px la barre mobile fixee
     occupe deja le bas, la reserve y est portee par body{padding-bottom}. */
  .uu-shell{ flex:1; display:flex; flex-direction:column; min-height:100vh; background:var(--bg-chrome); padding:8px 0; }

  /* ============================================================
     HEADER — nav flottante en capsule (modele restaure).
     UNE seule barre : marque, liens, WhatsApp, chips.
     Supprimes : la wabar (2e barre) et le champ de recherche — il
     renvoyait sur index.php, donc sur la vitrine elle-meme.
     Sous 860px les liens sortent de la barre et passent dans la
     .uu-mobilebar fixee en bas (portee du pouce), definie plus bas.
     ============================================================ */
  .uu-nav{ font-family:var(--font-header);
    display:flex; align-items:center; gap:20px; margin:0 8px; padding:11px 26px; min-height:70px;
    background:var(--bg-page); border-radius:var(--panel-radius) var(--panel-radius) 0 0;
    border:1px solid var(--frame-line); border-bottom:none; }
  /* Rayon RETABLI : le filet --frame-line redonne un bord visible a la colonne
     blanche sur fond blanc. Sans lui, arrondir un angle invisible ne rendait
     rien — c'etait le motif du retrait precedent. */

  /* Marque : le W pose NU, sans cadre ni pastille. Le filet qui l'entourait
     le separait de la barre au lieu de l'y poser.
     align-items:center depuis que le chiffre est parti : il n'y a plus qu'un
     enfant, et plus aucune ligne de base a partager avec quoi que ce soit. */
  .uu-nav__logo{ display:inline-flex; align-self:center; align-items:center; gap:0; flex-shrink:0;
    padding:0; background:transparent; border:none; border-radius:0;
    text-decoration:none; transition:opacity var(--dur) var(--ease); }
  .uu-nav__logo:hover{ opacity:.68; }
  /* Masque cale a GAUCHE et non centre : la boite est au rapport exact du
     dessin (voir --mark-ratio), un eventuel demi-pixel d'arrondi part donc a
     droite, du cote ou il ne se voit pas. Au centre il se serait partage et
     serait venu s'ajouter a l'ecart, du cote ou il compte. */
  .uu-nav__logo .uu-brand__mark{ width:var(--mark-w); height:var(--mark-h); flex-shrink:0; background:var(--brand-color);
    -webkit-mask:var(--wmask) left center/contain no-repeat;
            mask:var(--wmask) left center/contain no-repeat; }

  /* Liens : pilules pleines, centrees verticalement (modele Google Store).
     Inactif = gris plein, actif = bleu clair. Plus de conges hauts : les
     onglets ne se raccordent plus a rien depuis que la wabar est partie. */
  .uu-nav__links{ display:flex; align-items:center; gap:8px; margin:0; min-width:0; }
  .uu-nav__links a{ display:inline-flex; align-items:center; height:48px; padding:0 21px;
    border-radius:999px; background:var(--pill-off); color:var(--text-ink);
    font:500 16px/24px var(--font-header); text-decoration:none; white-space:nowrap;
    transition:background .18s var(--ease), color .18s var(--ease); }
  .uu-nav__links a:hover{ background:#E4E6E7; }
  /* actif : bleu profond #0842A0, pas le #0B57D0 des liens — releve sur le modele */
  .uu-nav__links a.is-active{ background:var(--g-blue-container); color:var(--g-blue-deep); }
  .uu-nav__links a.is-active:hover{ background:#C2D8FB; color:var(--g-blue-deep); }
  .uu-nav-arrow{ display:inline-flex; align-items:center; margin-left:6px; }
  .uu-nav-arrow svg{ width:14px; height:14px; }

  /* Zone droite : WhatsApp + chips */
  .uu-nav__actions{ display:flex; align-self:center; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
  /* WhatsApp : legerement au-dessus du gabarit de la barre (52 contre 48) et
     porte par le vert de la marque plutot que par du gris. C'est le canal, il
     doit se voir sans crier — fond blanc conserve, un aplat vert plein serait
     le seul point sature de la barre. */
  .uu-wa{ display:inline-grid; place-items:center; width:52px; height:52px; flex-shrink:0; position:relative;
    border:1px solid #CFE9DA; border-radius:50%; background:#FFFFFF; color:var(--wa-green); text-decoration:none;
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .uu-wa:hover{ background:var(--wa-green-tint); border-color:var(--wa-green); color:var(--wa-green-hover); }
  .uu-wa svg{ width:25px; height:25px; display:block; position:relative; z-index:1; }

  /* ===== La pastille WhatsApp respire ======================================
     Tout le reste de la barre MENE quelque part : un onglet ouvre une section,
     Connexion ouvre le portail. Le canal, lui, ATTEND — il n'ouvre pas une
     page, il ouvre une conversation, et quelqu'un repond au bout. Une pastille
     inerte dit mal cette difference. Deux anneaux partent du bord et se
     dissipent, le glyphe reprend son souffle avec eux : une veille, pas une
     sollicitation.

     Le rythme est long a dessein : 7,2s de cycle dont 5,4s d'immobilite
     COMPLETE. L'anneau ne vit que dans le premier quart. C'est ce que « lent »
     veut dire ici — pas une animation ralentie, une animation qui se tait
     l'essentiel du temps. Une pulsation de deux secondes bouclee sans repos
     serait un clignotant ; celle-ci se remarque en peripherie et s'oublie.
     Le premier ping n'a pas lieu au chargement (delai de 2,4s) : la page finit
     d'entrer, ensuite seulement le canal se signale.

     Pas d'ombre ni de lueur : le theme signale par la couleur et le trait.
     Les anneaux sont donc des filets de 1px, du meme calibre que le bord de la
     pastille — c'est litteralement son bord qui part et s'efface.
     Les deux anneaux ne sont pas jumeaux : le second est plus pale et va moins
     loin. Deux copies identiques decalees se lisent comme un begaiement ;
     inegales, elles se lisent comme une onde qui perd de la force.

     PORTEE calee sur le cadre, pas choisie a vue. La barre fait 52px de bouton
     plus 11px de marge interne de chaque cote : son filet passe a 74px, soit
     1,42 fois le bouton. L'anneau atteint donc zero d'opacite exactement sur
     le trait du cadre — l'onde est absorbee par le panneau au lieu de le
     traverser. Une portee plus grande faisait deborder un anneau encore a 20 %
     visible par-dessus la bordure, ce qui cassait le cadre a chaque cycle.
     ------------------------------------------------------------------------ */
  .uu-wa::before,
  .uu-wa::after{
    content:""; position:absolute; inset:-1px; border-radius:50%;
    border:1px solid var(--wa-green); opacity:0; pointer-events:none;
    /* cubic-bezier sortante franche : l'onde part vite et meurt en s'etirant,
       comme une onde reelle. var(--ease) est une entree, elle molliserait. */
    --ping-to:1.42;
    animation:uu-wa-ping 7.2s cubic-bezier(0,.55,.35,1) 2.4s infinite; }
  .uu-wa::after{ --ping-to:1.26; --ping-op:.26; animation-delay:2.95s; }
  /* Le souffle porte sur le SVG, pas sur la pastille : la version mobile de ce
     bouton est calee par transform:translateY(-50%): une animation de transform
     sur l'element l'aurait ejecte de son axe. Sur l'enfant, aucun conflit. */
  .uu-wa svg{ animation:uu-wa-breath 7.2s var(--ease) 2.4s infinite; }
  /* Au survol l'intention est deja la : le signal n'a plus rien a demander,
     il s'efface et laisse la place a l'etat de survol. */
  .uu-wa:hover::before,
  .uu-wa:hover::after{ animation:none; opacity:0; }
  .uu-wa:hover svg{ animation:none; }

  @keyframes uu-wa-ping{
    0%   { transform:scale(1);                    opacity:0; }
    6%   {                                        opacity:var(--ping-op,.45); }
    25%  { transform:scale(var(--ping-to,1.42));  opacity:0; }
    100% { transform:scale(var(--ping-to,1.42));  opacity:0; }
  }
  @keyframes uu-wa-breath{
    0%,100%{ transform:scale(1); }
    5%     { transform:scale(1.085); }
    22%    { transform:scale(1); }
  }
  @media (prefers-reduced-motion:reduce){
    .uu-wa::before,.uu-wa::after{ animation:none; opacity:0; }
    .uu-wa svg{ animation:none; }
  }

  .uu-chip{ display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 21px;
    background:transparent; border:1px solid var(--border-default); border-radius:var(--r-md);
    color:var(--text-ink); font:500 16px/24px var(--font-header);
    cursor:pointer; text-decoration:none; white-space:nowrap; transition:all var(--dur) var(--ease); }
  .uu-chip svg{ width:16px; height:16px; flex-shrink:0; }
  .uu-chip:hover{ background:var(--bg-hover); }
  /* Sous-traitant : corail plein sans bordure (touche conservee) */
  .uu-nav__actions .uu-chip.is-active{ background:#F6E7DF; border-color:#F6E7DF; color:#B85C3E; border-radius:999px; height:48px; padding:0 21px; }
  .uu-nav__actions .uu-chip.is-active:hover{ background:#EFD9CD; color:#B85C3E; }
  /* Connexion : le bouton plein, seul element fort de la barre (cf. « Acheter ») */
  .uu-nav__cta{ display:inline-flex; align-items:center; gap:7px; height:48px; padding:0 26px; flex-shrink:0;
    background:var(--g-blue); border:1px solid var(--g-blue); border-radius:999px; color:#FFFFFF;
    font:500 16px/24px var(--font-header); text-decoration:none; white-space:nowrap;
    transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .uu-nav__cta:hover{ background:var(--g-blue-hover); border-color:var(--g-blue-hover); color:#FFFFFF; }

  @media (max-width:860px){
    .uu-nav{ padding:8px 8px 8px 14px; gap:10px; }
    .uu-nav__links{ display:none; }              /* -> .uu-mobilebar */
    .uu-nav__logo{ padding:0; }
    /* un cran sous le desktop */
    .uu-nav__logo{ --mark-h:33px; }
    .uu-nav__actions{ gap:8px; }
    /* 42px : deux pixels sous la cible tactile recommandee (44), pas plus.
       Le passage a 40 avait ete tente et repris — a cette taille les deux
       boutons perdaient leur poids de bouton. Le corps du texte reste a 15 :
       c'est la HAUTEUR qui devait ceder un peu, pas la lisibilite. */
    .uu-chip{ height:42px; padding:0 16px; font-size:15px; }
    .uu-nav__actions .uu-chip.is-active{ height:42px; padding:0 17px; }
    .uu-nav__cta{ height:42px; padding:0 19px; font-size:15px; }
    .uu-wa{ display:none; }   /* -> repris a gauche de la barre du bas */
  }
  @media (max-width:420px){
    /* La barre debordait (397px de contenu pour 374 dispo) : quatre elements
       ne tiennent pas sous 420px. On garde WhatsApp (le canal) et Connexion
       (le CTA). « Sous-traitant » reste servi par la carte d'offre plus bas.
       NB : cette regle visait .uu-chip--co, classe morte depuis que Connexion
       est passee en bouton plein — elle ne masquait donc plus rien. */
    /* Quatre elements dans une barre de 350px utiles : marque + WhatsApp +
       Sous-traitant + Connexion. Tout est resserre pour qu'ils tiennent
       ensemble sans defilement ni retour a la ligne. */
    .uu-nav{ padding:8px 8px 8px 10px; gap:6px; }
    .uu-nav__actions{ gap:6px; }
    .uu-nav__logo{ gap:0; }
    .uu-chip{ height:38px; padding:0 10px; font-size:13px; }
    .uu-nav__actions .uu-chip.is-active{ height:38px; padding:0 10px; }
    .uu-nav__cta{ height:38px; padding:0 12px; font-size:13px; }
  }
  /* Tres petits ecrans (iPhone SE et assimiles) : un cran de plus, sinon les
     quatre elements debordent de 29px a 320px. */
  @media (max-width:349px){
    .uu-nav{ padding:8px 6px 8px 8px; gap:4px; }
    .uu-nav__actions{ gap:4px; }
    /* Le cadre du logo ajoute 2px de bordure + son padding : sans ce cran,
       la barre debordait de 8px a 320px. */
    .uu-nav__logo{ gap:0; padding:0; --mark-h:29px; }
    /* .uu-wa deja masque plus haut sur mobile */
    .uu-chip{ height:34px; padding:0 8px; font-size:12px; }
    .uu-nav__actions .uu-chip.is-active{ height:34px; padding:0 8px; }
    .uu-nav__cta{ height:34px; padding:0 9px; font-size:12px; }
  }

  /* ===== MOBILE — selecteur de section fixe en bas (portee du pouce) =====
     Pour le retirer : supprimer ce bloc + le <nav id="uuMobilebar"> du footer. */
  .uu-mobilebar{ display:none; font-family:var(--font-header); }   /* nav mobile : meme police que la barre */
  @media (max-width:860px){
    /* Reserve = hauteur de la barre + zone sure. Sans le env(), le bas de page
       passe SOUS la barre des que la barre d'outils du navigateur se retracte. */
    body{ padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px)); }
    /* La barre se colle au bord PHYSIQUE (fond et filet vont jusqu'en bas),
       mais son CONTENU s'arrete a la zone sure : tant que les fleches du
       navigateur sont la, elle se pose dessus ; quand elles disparaissent au
       defilement, elle descend sur l'indicateur d'accueil de l'iPhone — et
       c'est ce padding qui l'empeche de s'y coincer.
       Prerequis : viewport-fit=cover dans le <meta viewport> (header.php). */
    .uu-mobilebar{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:50; margin:0 8px;
      padding-bottom:env(safe-area-inset-bottom, 0px);
      background:var(--bg-page); border:1px solid var(--border-default); border-bottom:none;
      border-radius:18px 18px 0 0; }
    .uu-mobilebar__pill{ position:relative; display:flex; align-items:center; justify-content:center;
      gap:14px; height:72px; padding:0 18px; }

    /* WhatsApp cale a gauche en absolu : le libelle et le burger restent
       centres dans la barre, ce qu'un simple flex aurait decale. */
    /* Meme traitement qu'en haut. Gabarit 50px : deux crans au-dessus de la
       cible tactile (44px), deux sous la barre du haut (52px). Sur un ecran
       de telephone, 52px commencait a peser dans une pilule de 72px. */
    .uu-mobilebar__wa{ position:absolute; left:18px; top:50%; transform:translateY(-50%);
      display:inline-grid; place-items:center; width:50px; height:50px;
      border:1px solid #CFE9DA; border-radius:50%; background:#FFFFFF; color:var(--wa-green);
      text-decoration:none; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
    .uu-mobilebar__wa:hover{ background:var(--wa-green-tint); border-color:var(--wa-green); color:var(--wa-green-hover); }
    .uu-mobilebar__wa svg{ width:25px; height:25px; display:block; position:relative; z-index:1; }

    /* Meme veille qu'en haut : le canal doit se lire pareil des deux cotes.
       Les anneaux vont un peu moins loin (1,44 contre 1,52) — la pilule du bas
       fait 72px pour un bouton de 50, l'onde y a moins de marge avant de
       franchir le bord de la barre. Le bouton porte deja translateY(-50%) :
       les anneaux sont en absolu a l'interieur, le souffle est sur le SVG,
       aucun des deux ne touche au transform de l'element. */
    .uu-mobilebar__wa::before,
    .uu-mobilebar__wa::after{
      content:""; position:absolute; inset:-1px; border-radius:50%;
      border:1px solid var(--wa-green); opacity:0; pointer-events:none;
      --ping-to:1.44;
      animation:uu-wa-ping 7.2s cubic-bezier(0,.55,.35,1) 2.4s infinite; }
    .uu-mobilebar__wa::after{ --ping-to:1.28; --ping-op:.26; animation-delay:2.95s; }
    .uu-mobilebar__wa svg{ animation:uu-wa-breath 7.2s var(--ease) 2.4s infinite; }
    .uu-mobilebar__wa:hover::before,
    .uu-mobilebar__wa:hover::after{ animation:none; opacity:0; }
    .uu-mobilebar__wa:hover svg{ animation:none; }
    /* Menu ouvert : la barre devient un selecteur, on ne clignote pas derriere
       une liste deroulee. */
    .uu-mobilebar.is-open .uu-mobilebar__wa::before,
    .uu-mobilebar.is-open .uu-mobilebar__wa::after{ animation:none; opacity:0; }
    .uu-mobilebar.is-open .uu-mobilebar__wa svg{ animation:none; }
    @media (prefers-reduced-motion:reduce){
      .uu-mobilebar__wa::before,.uu-mobilebar__wa::after{ animation:none; opacity:0; }
      .uu-mobilebar__wa svg{ animation:none; }
    }

    /* Le nom de la section est un DECLENCHEUR, pas une etiquette : il ouvre
       le menu comme le burger. Padding genereux + marge negative egale : la
       zone de frappe deborde de 10px de chaque cote sans que rien ne bouge
       visuellement. 10 < 14 (l'ecart de la pilule) : aucun recouvrement. */
    .uu-mobilebar__current{ -webkit-appearance:none; appearance:none;
      padding:12px 10px; margin:-12px -10px; background:none; border:none;
      font:600 19px var(--font-header); color:var(--text-ink); cursor:pointer;
      -webkit-tap-highlight-color:transparent; transition:opacity var(--dur) var(--ease); }
    .uu-mobilebar__current:active{ opacity:.55; }
    .uu-mobilebar__toggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
      border:none; border-radius:50%; background:var(--g-blue-container); color:var(--g-blue-deep); cursor:pointer;
      transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
    .uu-mobilebar__toggle svg{ width:23px; height:23px; }
    /* Burger : pas de rotation a l'ouverture — trois traits qui pivotent ne
       veulent rien dire. C'est le fond qui marque l'etat actif. */
    .uu-mobilebar.is-open .uu-mobilebar__toggle{ background:var(--g-blue-deep); color:#FFFFFF; }

    /* Menu : lignes en pilule grise, libelle a gauche, pastille ronde a
       droite. La pastille portait une photo, elle porte maintenant l'icone
       de la section (cf. uu_vitrine_nav()). */
    .uu-mobilebar__menu{ position:absolute; bottom:100%; left:0; right:0; margin-bottom:10px;
      display:flex; flex-direction:column; gap:6px; padding:8px;
      background:var(--bg-page); border:1px solid var(--border-default); border-radius:22px;
      box-shadow:0 6px 22px rgba(32,33,36,.13);
      opacity:0; visibility:hidden; translate:0 6px; transition:all var(--dur) var(--ease); }
    .uu-mobilebar.is-open .uu-mobilebar__menu{ opacity:1; visibility:visible; translate:0 0; }

    .uu-mobilebar__item{ display:flex; align-items:center; justify-content:space-between; gap:12px;
      height:62px; padding:0 9px 0 22px; border-radius:999px;
      background:#F5F5F5; color:var(--text-ink);
      font:500 17px var(--font-header); text-decoration:none;
      transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
    .uu-mobilebar__item:hover{ background:#ECECEC; }

    /* ===== Les quatre tons ===================================================
       Une seule classe par ligne (t-blue, t-green...), posee sur le <a>. Elle
       ne peint rien elle-meme : elle DECLARE des variables que la pastille
       lit. Les custom properties descendent, donc la classe peut rester sur
       la ligne alors que la couleur s'applique au rond qu'elle contient.

       La couleur porte sur la PASTILLE, pas sur la ligne. Le fond de ligne
       reste le gris #F5F5F5 : c'est lui qui separe les entrees du panneau
       blanc, il fait deja son travail et n'a pas a dire la section en plus.
       Une teinte sur les deux surfaces a la fois donnait deux signaux pour une
       seule information, et le rond se noyait dans sa propre ligne.
       Le rond reste donc ce qu'il etait — une tache CLAIRE sur le gris — mais
       teintee : ~5 points de clarte sous le blanc quand la ligne en fait 10,
       il se detache par le haut, comme le blanc le faisait avant.
       Le filet est un cran plus fonce, ~13 points, juste assez pour fermer le
       cercle sur le gris. L'encre du glyphe, elle, reste pleinement saturee :
       c'est elle qui porte la couleur, le fond ne fait que la poser. */
    .uu-mobilebar__item.t-blue { --ico-bg:#F7FAFF; --ico-bd:#ECF3FD; --ico-fg:#1A73E8; }
    .uu-mobilebar__item.t-green{ --ico-bg:#F7FBF8; --ico-bd:#ECF5EF; --ico-fg:#1E8E3E; }
    .uu-mobilebar__item.t-amber{ --ico-bg:#FEFAF6; --ico-bd:#FDF3E9; --ico-fg:#E37400; }
    .uu-mobilebar__item.t-red  { --ico-bg:#FEF8F7; --ico-bd:#FCEDEC; --ico-fg:#D93025; }
    .uu-mobilebar__item.is-active{ background:var(--g-blue-container); color:var(--g-blue-deep); font-weight:600; }
    .uu-mobilebar__lbl{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
    .uu-mobilebar__item .uu-nav-arrow svg{ width:15px; height:15px; }

    /* Pastille : cercle teinte, glyphe Material a l'interieur. Elle remplace
       la vignette photo — une icone dit la section, une photo ne disait
       qu'elle-meme. Quatre pastilles blanches a glyphe gris se ressemblaient
       ensuite toutes : il fallait LIRE le glyphe pour distinguer les lignes.
       Une couleur par section, et la ligne se repere avant d'etre lue.
       Aucun ton n'est ecrit ici : la pastille lit --ico-bg / --ico-bd /
       --ico-fg, declares plus haut par la classe de ton de la LIGNE. Elle
       ignore donc lequel des quatre elle porte, et un cinquieme ton n'aurait
       rien a modifier dans ce bloc. La source reste functions.php ('tone'). */
    .uu-mobilebar__ico{ display:grid; place-items:center; width:44px; height:44px; flex-shrink:0;
      border-radius:50%;
      background:var(--ico-bg,#FFFFFF); border:1px solid var(--ico-bd,var(--border-subtle));
      color:var(--ico-fg,var(--text-secondary));
      transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
    /* FILL 1 : la police est servie en instance figee (voir le <link> du
       header, @24,500,1,0). Demander FILL 0 ici ne donnerait rien — ce sont
       les icones pleines partout dans le theme, on garde le meme jeu. */
    .uu-mobilebar__ico .msr{ font-size:23px; line-height:1; }
    /* Ligne active : elle passe au bleu conteneur, nettement plus soutenu que
       le gris. La pastille GARDE son ton — la forcer en blanc effacait la
       couleur de la section a l'endroit exact ou on venait de la choisir.
       Restant a ~5 points sous le blanc contre 30 pour la ligne active, elle
       se detache d'autant mieux ; seul le filet disparait, il n'a plus rien a
       fermer sur un fond aussi marque. */
    .uu-mobilebar__item.is-active .uu-mobilebar__ico{ --ico-bd:transparent; }
  }

  /* Tres petits ecrans UNIQUEMENT des surcharges. Ce bloc avait avale tout le
     style du menu ci-dessus : entre 350 et 860px la barre du bas se rendait
     donc sans aucune mise en forme. */
  @media (max-width:349px){
    .uu-mobilebar__wa{ left:12px; width:44px; height:44px; }
    .uu-mobilebar__wa svg{ width:22px; height:22px; }
    .uu-mobilebar__current{ font-size:16px; }
    .uu-mobilebar__toggle{ width:38px; height:38px; }
    .uu-mobilebar__toggle svg{ width:21px; height:21px; }
  }

  /* ===== CONTENU : carte blanche qui flotte sur le fond bleu ===== */
  .uu-main{ position:relative; flex:1; margin:0 8px; background:var(--bg-page); border-radius:0;
    border-left:1px solid var(--frame-line); border-right:1px solid var(--frame-line); }
  /* --gut = LA gouttiere laterale, definie ici et nulle part ailleurs.
     Les sections ne remettent plus de padding horizontal : elles s'empilaient
     avec celui de .uu-page (8 + 24 + 24 = 56px perdus de chaque cote).
     Marge reelle au bord de l'ecran = 8px (.uu-main) + --gut. */
  .uu-page{ position:relative; z-index:1; max-width:1100px; margin:0 auto;
    --gut:24px; padding:24px var(--gut) 64px; min-height:240px; }

  /* ===== ZONE PLEINE LARGEUR — hors de .uu-page =====
     .uu-page plafonne a 1100px : tant que le hero vivait dedans, il ne pouvait
     pas depasser 1052px de large. On le sort du conteneur plutot que de bricoler
     du 100vw + marge negative (qui compte la barre de defilement et decale tout).
     Gouttiere : 16px ici + 8px de .uu-main = 24px du bord d'ecran. */
  /* 13px et non 8 : le bloc hero est rentre de 5px de chaque cote par rapport
     au cadre. Le carrousel dessous ne suit pas — il a sa propre gouttiere. */
  .uu-top{ max-width:1660px; margin:0 auto; padding:18px 13px 0; }

  /* ===== CARROUSEL SOUS LE HERO — hors de .uu-page, meme boite que .uu-top =====
     La gouttiere vit sur le RAIL (--cgut), pas sur la section : posee sur la
     section elle aurait borne le rail et empeche les cartes de filer jusqu'au
     bord pendant le defilement. Elle est volontairement large (140px) : le
     carrousel ne s'aligne PAS sur le hero au-dessus, il est rentre. */
  /* Respiration : le carrousel est un bloc autonome entre le hero et la
     section de texte anime. Il porte lui-meme son air en haut ET en bas —
     .uu-page ne fournit que 24px, insuffisant pour separer deux blocs. */
  .uu-cards{ max-width:1660px; margin:0 auto; padding:96px 0 72px; --cgut:140px; }

  .uu-cards__rail{ position:relative; display:flex; gap:24px;
    /* Pas d'accroche en desktop : la course de defilement est plus courte
       qu'une carte, l'accroche ramenait donc le rail sur 0 ou sur la butee et
       annulait les positions visees par les puces. Elle reprend la main sous
       900px, ou une carte occupe l'ecran.
       Pas de scroll-behavior:smooth non plus : le glissement a la souris ecrit
       scrollLeft image par image, une transition douce l'aurait rendu pateux.
       Le defilement doux reste demande au coup par coup dans scrollTo(). */
    overflow-x:auto; scroll-snap-type:none; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; scrollbar-width:none;
    padding:2px var(--cgut) 8px; scroll-padding-left:var(--cgut); }
  .uu-cards__rail::-webkit-scrollbar{ display:none; }
  /* le rail est focusable (defilement au clavier) : sans anneau visible, le
     focus disparaissait purement et simplement a la tabulation. */
  .uu-cards__rail:focus-visible{ outline:2px solid var(--g-blue); outline-offset:3px; border-radius:12px; }

  /* Glissement a la souris — pointeur seulement, le tactile garde son inertie
     native. La classe est posee par le JS pendant le geste. */
  @media (hover:hover) and (pointer:fine){
    .uu-cards__rail{ cursor:grab; }
    .uu-cards__rail.is-dragging{ cursor:grabbing; user-select:none; }
    .uu-cards__rail.is-dragging .uucard{ pointer-events:none; }
  }

  /* Le diviseur regle la largeur de carte DANS la boite de contenu (gouttieres
     deja retranchees) : 2.2 donne ~495px a 1440. Ce n'est pas un nombre rond
     parce que ce n'est pas un nombre de cartes visibles — celui-la depend de
     la gouttiere de gauche, qui ne compte qu'une fois. */
  .uucard{ flex:0 0 calc((100% - 2 * 24px) / 2.2); scroll-snap-align:start; }
  /* Fond d'attente teinte de la couleur de la carte plutot que gris neutre :
     avant l'arrivee du visuel, le cadre porte deja sa couleur, donc le
     carrousel se lit comme quatre cartes en cours de chargement et non comme
     quatre boites grises. L'aspect-ratio reserve la place : aucun saut de mise
     en page quand l'image arrive. */
  .uucard__shot{ position:relative; overflow:hidden; border-radius:28px;
    aspect-ratio:6/7; background:var(--bg-app);
    background:color-mix(in srgb, var(--dc,#4285F4) 8%, var(--bg-app)); }
  .uucard__shot img{ display:block; width:100%; height:100%; object-fit:cover;
    -webkit-user-drag:none; user-select:none;
    /* Respiration de l'image : la carte alignee sur la gouttiere se rapproche
       de 3,5 %. Assez pour que l'oeil sache laquelle est lue, trop peu pour
       qu'on y voie un effet. Le cadre rogne (overflow:hidden), donc le zoom
       ne pousse rien hors de la carte. */
    transform:scale(1); transition:transform .7s var(--ease); }
  .uucard.is-active .uucard__shot img{ transform:scale(1.035); }

  /* ---- Conversation posee SUR le visuel ------------------------------------
     Reprise en HTML de la composition qui etait cuite dans les anciens JPEG.
     Toutes les mesures sont relevees sur les deux originaux (1200x1400) et
     exprimees en cqw, c'est-a-dire en % de la largeur de la carte : .uucard__shot
     ouvre le conteneur, donc le calque se redimensionne exactement comme le
     ferait une image. Un seul jeu de valeurs pour desktop et mobile — pas de
     seconde serie a maintenir au point de rupture.

     Releve, en % de la largeur :
                          bleue         violette
       rail gauche        7,8           12,5
       pastille           diam. 7,8     diam. 5,8
       bulle pleine       h 20,6        h 25,8
       bloc bas           pilule 15,2   carte 15,6
       marge basse        10,4          20,6
     D'ou les valeurs par defaut ci-dessous, et --padl / --padb poses par le PHP
     quand une carte demande un autre cadrage.
     --------------------------------------------------------------------- */
  .uucard__shot{ container-type:inline-size; }

  .uuconv{ position:absolute; inset:0; z-index:2; pointer-events:none;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
    gap:2.5cqw; padding:0 var(--padr,7.9cqw) var(--padb,12cqw) var(--padl,9cqw);
    font-family:var(--font-sans); }

  /* Bulles. Le rayon suit la taille du texte (5cqw releve pour du 4cqw de
     police) : a l'echelle mobile un rayon en px se serait aplati. */
  .uuconv__ask,
  .uuconv__say{ margin:0; font-size:var(--fs,4.1cqw); line-height:1.28; font-weight:500;
    border-radius:5cqw; padding:3.6cqw 4.2cqw; }
  /* la question vient de l'utilisateur : elle se range a droite, comme dans
     n'importe quelle messagerie — c'est ce qui fait lire les deux bulles
     comme un echange et non comme deux legendes empilees. */
  /* BLANC TEINTE — jamais #fff pur. Releve #F9FAFE sur l'original bleu, soit
     exactement 3,2 % de la couleur de carte melangee a du blanc. On garde la
     proportion et on laisse --dc fournir la teinte : chaque carte obtient donc
     son propre blanc, parent de son visuel, sans qu'aucune valeur soit ecrite
     a la main. La 1re declaration est le repli sans color-mix. */
  .uuconv__ask,
  .uuconv__meter,
  .uuconv__chart,
  .uuconv__badge,
  .uuconv__cta{ background:#F9FAFE;
    background:color-mix(in srgb, var(--dc,#4285F4) var(--soft,4%), #fff); }
  /* La question se range a droite par defaut — c'est la position de l'original
     bleu, et la lecture « messagerie ». Mais la turquoise la pose a GAUCHE, et
     meme en deca du rail (5 % quand le rail est a 12,5). D'ou deux reglages
     plutot qu'une regle : le cote, et un decalage qui peut etre negatif. */
  .uuconv__ask{ align-self:flex-end; max-width:var(--askw,52cqw); color:var(--ink,#202124); }
  .uuconv--askl .uuconv__ask{ align-self:flex-start; margin-left:var(--askml,0cqw); }
  /* La largeur est un JETON, pas une constante : c'est elle qui decide du
     nombre de lignes, donc de la hauteur de la bulle, donc de la hauteur de
     toute la pile. Releve 54 cqw sur la bleue et 75 sur la violette — les deux
     originaux ne la traitent pas pareil selon la place que laisse le blob. */
  .uuconv__say{ max-width:var(--sayw,75cqw); background:var(--ink,#202124); color:#fff; }

  /* Pastille : dans les deux originaux son bas touche presque la bulle qui
     suit. La marge negative reprend le gap du conteneur pour les recoller. */
  .uucard .uuconv__badge{ width:7.5cqw; height:7.5cqw; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; margin-bottom:-0.9cqw; }
  /* Glyphe a l'encre sombre et non a la couleur de carte : releve #026487 sur
     la bleue et #006C5F sur la turquoise, soit la teinte de la bulle pleine.
     A la couleur de carte, il disparaissait dans son propre fond teinte. */
  .uuconv__badge .msr{ font-size:4.4cqw; color:var(--ink,#202124); }

  /* Carte chiffree a barre — la piece du bas de la violette.
     L'original posait un libelle et une piste. On garde sa geometrie et on
     ajoute la valeur en pastille a droite : elle etait noyee dans le libelle
     (« Temps d'eveil · 17 % »), la sortir rend la carte lisible d'un coup d'oeil
     sans l'alourdir — meme logique que les chiffres du rapport departements. */
  .uuconv__meter{ width:74cqw; max-width:100%; border-radius:5cqw; padding:3cqw 3.6cqw; }
  .uuconv__mhead{ display:flex; align-items:center; justify-content:space-between;
    gap:2cqw; margin-bottom:2.2cqw; }
  .uuconv__meter b{ font:500 2.9cqw/1.3 var(--font-sans); color:#202124; }
  .uuconv__pct{ flex:0 0 auto; font:600 2.6cqw/1 var(--font-sans); color:var(--ink,#202124);
    background:#EDEFF1; background:color-mix(in srgb, var(--dc,#4285F4) 13%, #fff);
    border-radius:999px; padding:1.1cqw 2cqw; }
  .uuconv__track{ display:block; height:4.4cqw; border-radius:999px; position:relative; overflow:hidden;
    background:#EDEFF1; background:color-mix(in srgb, var(--dc,#4285F4) 13%, #fff); }
  /* Remplissage anime en scaleX et non en width : une largeur en % ne
     s'interpole pas image par image sur toutes les machines, un transform si.
     D'ou l'origine a gauche, sinon la barre pousserait depuis son centre. */
  .uuconv__fill{ position:absolute; left:0; top:0; bottom:0; width:var(--pct,0%); border-radius:999px;
    background:#9AA0A6; background:color-mix(in srgb, var(--dc,#4285F4) 52%, #fff);
    transform-origin:left center; transition:transform 1s var(--ease) .35s; }
  .js .uuconv__fill{ transform:scaleX(0); }
  .js .uucard.is-in .uuconv__fill{ transform:scaleX(1); }
  /* Curseur blanc : element a part, hors du remplissage. Dans le remplissage il
     aurait subi le scaleX et se serait etire en barre. */
  .uuconv__knob{ position:absolute; top:0.55cqw; bottom:0.55cqw; left:var(--pct,0%);
    width:5cqw; margin-left:-5.55cqw; border-radius:999px; background:#fff;
    transition:opacity .35s var(--ease) 1.15s; }
  .js .uuconv__knob{ opacity:0; }
  .js .uucard.is-in .uuconv__knob{ opacity:1; }

  /* ---- Graphique — la carte du bas de l'ancienne bleue « VFC » -------------
     Releve : carte de 57,9 cqw de large sur 22,0 de haut, en retrait du rail
     (elle commence a 21,25 % la ou la bulle commence a 8 %). Le trace est un
     SVG genere depuis les donnees, pas une image : il se remet a l'echelle avec
     la carte comme le reste du calque.
     --------------------------------------------------------------------- */
  /* Centre et non cale sur le rail : releve 21,25->79,17, soit un centre a
     50,2 % quand le rail est a 8. La carte du graphique est la seule piece du
     calque qui ne s'aligne pas a gauche. */
  .uuconv__chart{ align-self:center; width:58cqw; max-width:100%;
    border-radius:5cqw; padding:2.4cqw 3.2cqw 1.8cqw; }
  .uuconv__clab{ display:block; font:400 2.7cqw/1.3 var(--font-sans); color:#3C4043; }
  .uuconv__cbody{ display:flex; align-items:center; gap:2.6cqw; margin-top:1.2cqw; }
  /* la valeur : gros chiffre, unite en petit colle a lui, comme sur l'original */
  .uuconv__cval{ flex:0 0 auto; font:500 6.4cqw/1 var(--font-sans); color:#202124;
    display:inline-flex; align-items:baseline; gap:0.7cqw; }
  .uuconv__cval em{ font:500 2.8cqw/1 var(--font-sans); font-style:normal; color:#5F6368; }
  /* flex:1 1 0 et min-width:0, PAS width:100%. Sur un element flexible, une
     largeur en pourcentage vaut 100 % de la boite entiere — valeur comprise —
     et le trace debordait donc de la carte par la droite (72 px releves).
     min-width:0 leve le plancher implicite de la boite flexible, sans quoi elle
     refuse de descendre sous la taille de son contenu. */
  .uuconv__cright{ flex:1 1 0; min-width:0; }
  .uuconv__cplot{ display:block; width:100%; aspect-ratio:200/52; overflow:visible; }
  /* bande de dispersion, puis ses deux bords en pointilles */
  .uuconv__cband{ fill:color-mix(in srgb, var(--dc,#4285F4) 11%, #fff); }
  .uuconv__cdash{ fill:none; stroke:color-mix(in srgb, var(--dc,#4285F4) 55%, #fff);
    stroke-width:2.4; stroke-dasharray:0.1 6; stroke-linecap:round; }
  .uuconv__cline{ fill:none; stroke:var(--dc,#4285F4); stroke-width:3.2;
    stroke-linecap:round; stroke-linejoin:round; }
  .uuconv__cdots circle{ fill:var(--dc,#4285F4); }
  /* dans la colonne du trace : sa largeur est donc exactement celle de la
     courbe, et « Mai » tombe sous le premier point. */
  .uuconv__caxis{ display:flex; justify-content:space-between; margin-top:0.9cqw;
    font:400 2.5cqw/1 var(--font-sans); color:#5F6368; }
  /* le dernier repere est le mois en cours : il porte le poids */
  .uuconv__caxis .is-now{ font-weight:600; color:#202124; }

  /* Trace de la courbe a l'entree : elle s'ecrit de gauche a droite, les points
     apparaissent derriere elle. Un graphique qui se dessine dit « voici une
     evolution » ; le meme, pose d'un coup, n'est qu'une decoration. */
  .uuconv__cline{ stroke-dasharray:1;
    transition:stroke-dashoffset 1.3s var(--ease) .3s; }
  .js .uuconv__cline{ stroke-dashoffset:1; }
  .js .uucard.is-in .uuconv__cline{ stroke-dashoffset:0; }
  .uuconv__cdots{ transition:opacity .5s var(--ease) 1.1s; }
  .js .uuconv__cdots{ opacity:0; }
  .js .uucard.is-in .uuconv__cdots{ opacity:1; }

  /* Pilule d'action — la piece du bas de la bleue. */
  .uuconv__cta{ margin:0; display:inline-flex; align-items:center; gap:2cqw;
    color:var(--ink,#202124); border-radius:999px;
    padding:2.8cqw 4cqw; font-size:3.4cqw; line-height:1.28; font-weight:500; max-width:70cqw; }
  .uuconv__cta .msr{ flex:0 0 auto; font-size:4cqw; }

  /* Entree : le calque monte legerement avec la carte. Une seule transition sur
     le conteneur — animer chaque bulle separement donnait un empilement qui se
     construit sous les yeux, trop bavard pour une carte qu'on survole. */
  /* Conditionne a .js : c'est le script qui rallume le calque, donc sans lui
     il ne doit jamais s'eteindre. Le texte des bulles EST le contenu de la
     carte — le rendre tributaire de JavaScript, c'est le perdre pour qui n'en
     a pas, et pour tout ce qui lit la page sans en executer. */
  .js .uuconv{ opacity:0; transform:translateY(1.6cqw);
    transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .js .uucard.is-in .uuconv{ opacity:1; transform:none; }

  /* Repli sans container queries (navigateurs anterieurs a 2023) : cqw vaut 0,
     tout le calque s'effondre. On le retire plutot que de le laisser en tas. */
  @supports not (container-type:inline-size){ .uuconv{ display:none; } }

  /* ---- Vie de la carte LUE -------------------------------------------------
     Tout ce bloc est conditionne a .is-active, c'est-a-dire la seule carte
     alignee sur la gouttiere. Quatre cartes qui respirent en meme temps, ce
     n'est plus une respiration, c'est du bruit de fond — et le rail defile
     deja tout seul. Une carte bouge : celle qu'on lit.
     ---------------------------------------------------------------------- */
  @property --uu-ring{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

  .uuconv__say{ position:relative; }

  @media (prefers-reduced-motion:no-preference){
    /* Flottement. Amplitudes en cqw et non en px : a 300px de large, une course
       de 12px devenait un balancement de carte, pas un flottement. */
    .uucard.is-active .uuconv__ask,
    .uucard.is-active .uuconv__badge,
    .uucard.is-active .uuconv__say,
    .uucard.is-active .uuconv__meter,
    .uucard.is-active .uuconv__chart,
    .uucard.is-active .uuconv__cta{ animation:uu-float 6s ease-in-out infinite; --floatr:0deg; }
    /* Durees toutes differentes et premieres, et delais negatifs : les pieces
       ne repassent jamais par la meme phase, donc la pile ne se remet jamais
       a bouger d'un bloc. C'est ce qui separe « ca flotte » de « ca glisse ». */
    .uucard.is-active .uuconv__ask   { --float:-1.5cqw; animation-duration:6.4s; }
    .uucard.is-active .uuconv__badge { --float:-2.2cqw; --floatr:7deg;
                                       animation-duration:5.2s; animation-delay:-1.1s; }
    .uucard.is-active .uuconv__say   { --float:-1.1cqw; animation-duration:7.1s; animation-delay:-2.4s; }
    .uucard.is-active .uuconv__meter,
    .uucard.is-active .uuconv__chart,
    .uucard.is-active .uuconv__cta   { --float:-0.8cqw; animation-duration:7.9s; animation-delay:-3.6s; }

    /* Bordure qui s'enroule autour de la bulle de reponse.
       Un degrade conique tourne ; un masque en xor ne laisse voir que
       l'epaisseur du bord. La lumiere fait donc le tour de la forme REELLE,
       coins arrondis compris, quelle que soit la hauteur du texte — la ou un
       trace SVG aurait demande un viewBox recalcule a chaque longueur.
       Sans prise en charge de @property, --uu-ring ne se resout pas, la
       declaration de fond devient invalide et le pseudo-element reste
       transparent : rien ne s'affiche, rien ne casse. */
    .uucard.is-active .uuconv__say::before{
      content:""; position:absolute; inset:-0.62cqw; border-radius:inherit;
      padding:0.62cqw; pointer-events:none;
      /* Deux couches, toutes deux rognees par le masque :
         1. le balayage conique — montee progressive puis coeur presque blanc,
            coupe net apres. La montee en deux paliers evite le trait dur qui
            faisait « barre qui tourne » plutot que « lumiere qui passe ».
         2. un filet constant tres faible dessous : sans lui, les trois quarts
            du contour sont invisibles a tout instant et l'oeil ne lit pas une
            forme parcourue, seulement un eclat qui apparait puis disparait. */
      background:
        conic-gradient(from var(--uu-ring), transparent 0 48%,
          color-mix(in srgb, #fff 55%, var(--dc,#4285F4)) 66%,
          color-mix(in srgb, #fff 94%, var(--dc,#4285F4)) 77%,
          transparent 90%),
        linear-gradient(color-mix(in srgb, #fff 20%, transparent) 0 0);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      animation:uu-ring 4.6s linear infinite; }
    @keyframes uu-ring{ to{ --uu-ring:360deg; } }
  }

  .uucard__h{ margin:24px 0 0; font:500 26px/32px var(--font-sans);
    letter-spacing:-.3px; color:var(--text-ink); }
  .uucard__p{ margin:10px 0 0; font:400 17px/26px var(--font-sans); color:var(--text-ink); }

  /* Progression — meme piece que .swap__dots (pastille qui s'allonge et prend
     la couleur de sa carte), mais couchee en bas du carrousel : a l'horizontale
     elle a de la place, on l'allonge donc a 112px la ou le vertical tient 78. */
  .uu-cards__dots{ display:flex; justify-content:center; align-items:center; gap:14px;
    margin:34px 0 0; padding:0 var(--cgut); }
  .uu-cards__dot{ width:10px; height:10px; padding:0; border:none; border-radius:999px;
    background:#DADCE0; cursor:pointer;
    transition:width .38s var(--ease), background .38s var(--ease); }
  .uu-cards__dot:hover{ background:#C4C7CB; }
  .uu-cards__dot.is-active{ width:112px; background:var(--dotc,#4285F4); }

  /* 140px de gouttiere sur un ecran de portable mangeaient la moitie d'une
     carte : la gouttiere se resserre avant que les cartes ne retrecissent. */
  @media (max-width:1280px){ .uu-cards{ --cgut:64px; } }

  @media (max-width:900px){
    .uu-cards{ padding:60px 0 52px; --cgut:20px; }
    /* mobile : une carte par ecran, l'accroche ferme peut reprendre la main */
    .uu-cards__rail{ gap:12px; scroll-snap-type:x mandatory; cursor:auto; }
    /* 74% laissait trop d'air : le visuel portant desormais un echange de
       bulles, le texte devenait minuscule a cette echelle. 85% garde une
       amorce de carte suivante, donc le geste de defilement reste lisible. */
    .uucard{ flex:0 0 85%; max-width:380px; }
    .uucard__shot{ border-radius:22px; }
    .uucard__h{ margin:18px 0 0; font-size:21px; line-height:27px; }
    .uucard__p{ margin:8px 0 0; font-size:15.5px; line-height:23px; }
    .uu-cards__dots{ gap:10px; margin-top:24px; }
    .uu-cards__dot{ width:8px; height:8px; }
    .uu-cards__dot.is-active{ width:72px; }
    /* Rien a reprendre pour la conversation : elle est entierement en cqw,
       donc elle a deja retreci avec la carte. */
  }

  @media (prefers-reduced-motion:reduce){
    .uu-cards__dot{ transition:none; }
    /* le calque reste, il cesse seulement d'entrer en mouvement */
    .uuconv{ transition:none; opacity:1; transform:none; }
    .uuconv__cline{ transition:none; stroke-dashoffset:0; }
    .uuconv__cdots,.uuconv__knob{ transition:none; opacity:1; }
    .uuconv__fill{ transition:none; transform:scaleX(1); }
    .uucard__shot img{ transition:none; }
    .uucard.is-active .uucard__shot img{ transform:none; }
  }

  /* ===== BLOC HERO — deux panneaux de meme teinte, separes par 5px de blanc ===== */
  .uu-herowrap{ margin:0; background:transparent; }

  /* Panneau 1 — la bande promo. Coins ronds en haut seulement : le blanc de
     5px sous elle fait la coupure, plus besoin de filet. */
  .uu-promo{ display:flex; align-items:center; justify-content:center; gap:11px; flex-wrap:nowrap;
    margin:0 0 5px; padding:10px 24px; background:var(--panel-bg);
    border:none; border-radius:var(--promo-radius) var(--promo-radius) 0 0; }
  /* Pastille blanche, porte-voix bleu : la seule tache de couleur de la
     bande. Le <img> distant est parti, plus rien a rogner — overflow tombe.

     Le glyphe n'a plus de corps propre : il se deduit du diametre. Deux
     valeurs codees separement (30px de cercle, 18px de glyphe) se decalaient
     a chaque palier — le mobile tournait deja a 0,67 quand le bureau tenait
     0,60, sans que ce soit un choix. Un diametre, un taux de remplissage, et
     la pastille se lit pareil partout.

     0,733 : releve sur la fonte plutot qu'estime. L'encre de `campaign` mesure
     0,865 x 0,650 em (glyphe extrait de l'instance Material Symbols Rounded
     que charge le header, @24,500,1,0). A 22px de corps dans un cercle de 30,
     l'encre fait 19,0 x 14,3px et sa demi-diagonale 11,9px pour un rayon de
     15 : environ 3px d'air aux angles. La borne haute serait 25px de corps —
     au-dela le porte-voix vient toucher le bord blanc. */
  .uu-promo__ico{ --promo-ico-d:30px; --promo-ico-fill:0.733;
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--promo-ico-d); height:var(--promo-ico-d);
    border-radius:50%; background:#FFFFFF; color:var(--g-blue); flex-shrink:0; }
  .uu-promo__ico .msr{ font-size:calc(var(--promo-ico-d) * var(--promo-ico-fill)); }
  .uu-promo__txt{ margin:0; min-width:0; font:500 15px/22px var(--font-header); color:var(--text-ink); }
  /* Le montant est l'accroche de l'offre : bleu et souligne, avec un decalage
     pour que le trait ne morde pas sur les jambages du « € ». */
  /* Texte en noir, seul le trait est bleu. */
  .uu-promo__txt strong{ font-weight:600; color:var(--text-ink);
    text-decoration:underline; text-decoration-color:var(--g-blue);
    text-decoration-thickness:2px; text-underline-offset:3px; }
  .uu-promo__cta{ display:inline-flex; align-items:center; gap:1px; flex-shrink:0;
    font:500 15px/22px var(--font-header); color:var(--g-blue); text-decoration:none; white-space:nowrap; }
  .uu-promo__cta .msr{ font-size:18px; }
  .uu-promo__cta:hover{ text-decoration:underline; }
  /* Bouton rond a fleche, restaure du modele d'origine */
  .uu-promo__arrow{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
    border:none; border-radius:50%; background:var(--g-blue); color:#fff; cursor:pointer; flex-shrink:0;
    transition:background .18s var(--ease); }
  .uu-promo__arrow:hover{ background:var(--g-blue-hover); }
  .uu-promo__arrow .msr{ font-size:17px; }
  @media (max-width:640px){
    .uu-promo{ gap:6px; padding:8px 12px; border-radius:var(--promo-radius-sm) var(--promo-radius-sm) 0 0; }

    /* Mobile : reduction legere. Pour coller a la spec desktop au pixel,
       supprimer ces 4 declarations de taille. */
    .uu-promo__txt{ font-size:12.5px; line-height:18px; }
    .uu-promo__cta{ font-size:13.5px; line-height:19px; }
    .uu-promo__arrow{ width:24px; height:24px; } .uu-promo__arrow .msr{ font-size:15px; }
    /* Seul le diametre change : le glyphe suit. */
    .uu-promo__ico{ --promo-ico-d:21px; }
  }

  @media (max-width:839px){
    .uu-main{ border-radius:0; }
  }

  /* ================= BANDEAUX — cartes d'annonce sous le bloc hero =================
     Meme famille de teinte que le hero, un cran plus clair. Icone a gauche,
     titre + sous-titre empiles, lien bleu optionnel a droite.
     --banner-gap pilote l'ecart entre les cartes ET l'ecart au bloc hero :
     une seule valeur a changer. (Le modele mesure 24px, on est a 26.) */
  .uu-banners{ --banner-gap:36px; display:flex; flex-direction:column;
    gap:var(--banner-gap); margin:var(--banner-gap) 0 0; }
  .uu-banner{ display:flex; align-items:center; gap:30px; padding:28px 40px;
    background:var(--panel-surface); border-radius:var(--panel-radius); }
  .uu-banner__ico{ display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; color:#3C4043; }
  .uu-banner__ico .msr{ font-size:34px; }
  .uu-banner__ico svg{ width:32px; height:32px; display:block; }
  /* Vignette illustree — alternative a l'icone. Les visuels fournis sont en
     3/2 paysage (456x300 et 416x276) : dans le carre de 40px de
     .uu-banner__ico ils auraient ete rognes ou ecrases. Cadre dedie. */
  /* Vignette ronde : carre + rayon 50 %, l'image est recadree dedans. */
  .uu-banner__fig{ width:56px; height:56px; flex-shrink:0; overflow:hidden;
    border-radius:50%; border:1px solid #E4E6E9; background:#FFFFFF; }
  .uu-banner__fig img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
  /* Mesure bornee : sur une carte de ~1380px, le sous-titre s'etirait a perte
     et laissait un vide beant avant le lien. */
  .uu-banner__main{ flex:1; min-width:0; max-width:840px; }
  .uu-banner__h{ margin:0; font:500 19px/25px var(--font-header); color:var(--text-ink); }
  /* meme encre que le titre : le sous-titre n'est plus gris */
  .uu-banner__p{ margin:9px 0 0; font:400 13.5px/20px var(--font-header); color:var(--text-ink); }
  /* margin-left:auto : sans lui, le lien se colle au bloc texte (borne a 840px)
     et s'arretait a 192px du bord droit au lieu de s'aligner dessus. */
  .uu-banner__link{ display:inline-flex; align-items:center; gap:2px; flex-shrink:0; margin-left:auto;
    font:500 15px/22px var(--font-header); color:var(--g-blue); text-decoration:none; white-space:nowrap; }
  .uu-banner__link .msr{ font-size:19px; }
  .uu-banner__link:hover{ text-decoration:underline; }
  @media (max-width:820px){
    /* Grille 2 colonnes : le lien passe en 2e ligne DANS la colonne du texte.
       En flex-wrap il repartait a gauche, sous l'image — c'etait le defaut. */
    .uu-banner{ display:grid; grid-template-columns:auto 1fr;
      grid-template-areas:"fig main" ". link";
      align-items:center; column-gap:18px; row-gap:12px; padding:18px 26px; }
    .uu-banner__fig{ grid-area:fig; }
    .uu-banner__main{ grid-area:main; max-width:none; }
    .uu-banner__link{ grid-area:link; justify-self:start; margin-left:0; }
  }
  @media (max-width:640px){
    .uu-banners{ --banner-gap:22px; }   /* ecart au hero, mobile */
    .uu-banner{ padding:10px 13px; gap:11px; border-radius:var(--panel-radius-sm); }
    .uu-banner__ico{ width:26px; height:26px; } .uu-banner__ico .msr{ font-size:22px; }
    .uu-banner__ico svg{ width:21px; height:21px; }
    .uu-banner__fig{ width:44px; height:44px; }
    .uu-banner{ padding:16px 16px; column-gap:14px; row-gap:10px; }
    .uu-banner__h{ font-size:15px; line-height:20px; }
    .uu-banner__p{ margin-top:7px; font-size:12.5px; line-height:17px; }
    .uu-banner__link{ font-size:13px; line-height:18px; } .uu-banner__link .msr{ font-size:15px; }
  }

  /* ================= HERO — reproduction exacte Chrome ================= */
  /* Sous ~780px, icone + texte + lien ne tiennent plus sur une seule ligne.
     Sans flex-basis:0, le texte reclame sa largeur de contenu : il ne peut pas
     se placer a cote de l'icone, qui se retrouve seule sur une ligne (27px
     perdus, promo a 120px au lieu de 89). On force le texte a partir de 0 —
     il partage donc toujours sa ligne avec l'icone — et le lien passe dessous.
     Le seuil suit la longueur du texte promo : a revoir si tu le rallonges. */
  @media (max-width:779px){
    .uu-promo__txt{ flex:1 1 0; }
    /* le CTA ne prend plus une ligne a lui seul : c'etait ca, le mauvais
       agencement. Il reste sur la ligne, le texte se replie tout seul. */
  }

  /* Panneau 2 — le hero. Meme teinte que la bande promo, coins ronds en bas. */
  .uu-hero{ position:relative; overflow:hidden; padding:100px 24px 108px; z-index:1;
    /* Le bas reprend le rayon du HAUT de la bande promo : le bloc est
       symetrique, 28px en haut comme en bas, au lieu de 28 / 13. */
    background:var(--panel-surface); border-radius:0 0 var(--promo-radius) var(--promo-radius); }

  .uu-hero__title{
    display:flex; flex-direction:column; align-items:center; gap:0; margin:0;
    font-family:var(--font-sans); font-weight:700; letter-spacing:-1.5px; line-height:1.333;
    font-size:clamp(41px,7.4vw,78px); color:#202124; text-align:center;
  }

  /* Le pill fait 1.76em de haut (1.66em × 1.06) alors que les lignes du h1 en font 1.333em.
     Sans hauteur propre, le wrap se collait au texte du dessus/dessous de façon asymétrique.
     On lui donne une ligne à lui, avec le pill centré dedans. */
  .uu-pillwrap{ position:relative; display:flex; align-items:center; justify-content:center;
    height:2.02em; }
  /* Pilules colorees des titres — un cran de graisse en moins.
     Pourquoi un cran et pas 10 % pile : Google Sans est charge en poids
     fixes (400/500/600/700). Une valeur intermediaire comme 630 n'existe
     pas dans le fichier, le navigateur remonterait au 700 le plus proche
     et rien ne bougerait a l'ecran. 700 -> 600 et 600 -> 500 sont les
     seules baisses reellement rendues. */
  .uu-pill{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    height:1.66em; border-radius:16px; padding:0 .5em; font-size:1.06em;
    font-weight:600; white-space:nowrap; box-sizing:border-box; overflow:hidden;
    transition:background .5s var(--ease), color .5s var(--ease), width .42s var(--ease);
  }
  /* Blanc franc sur le bleu, comme l'etat vert. Le #D2E3FC d'avant etait un
     bleu pale : lisible, mais il grisait le mot au lieu de le detacher.
     L'etat jaune garde son encre sombre — du blanc sur #FDD633 ne passe pas. */
  .uu-pill.s0{ background:#1A73E8; color:#FFFFFF; }
  .uu-pill.s1{ background:#FDD633; color:#202124; }
  .uu-pill.s2{ background:#34A853; color:#FFFFFF; }
  .uu-pill__word{ display:inline-block; will-change:opacity,transform; }

  /* Décorations flottantes (position à l'extérieur = outer ; float = inner) */
  .uu-deco{ position:absolute; opacity:0; transition:opacity .4s var(--ease); pointer-events:none; z-index:3; }
  .uu-deco.show{ opacity:1; }
  .uu-deco__in{ display:inline-flex; align-items:center; justify-content:center; }
  .uu-deco.show .uu-deco__in{ animation:uu-float 5s ease-in-out infinite; }
  @keyframes uu-float{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(var(--float,-12px)) rotate(var(--floatr,4deg)); } }
  @media (prefers-reduced-motion:reduce){ .uu-deco.show .uu-deco__in{ animation:none; } .uu-pill,.uu-pill__word{ transition:none; } }

  /* bulles rondes */
  .uu-bub{ width:52px; height:52px; border-radius:50%; position:relative; }
  .uu-bub__badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
    border-radius:9px; background:#1E8E3E; color:#fff; font:700 11px/18px var(--font-sans); text-align:center; border:2px solid #fff; box-sizing:border-box; }
  .uu-bub svg{ width:24px; height:24px; }
  .uu-bub--lockblue{ background:#E8F0FE; color:#1A73E8; }
  .uu-bub--eyeamber{ background:#F9AB00; color:#202124; }
  .uu-bub--shieldgreen{ background:#CEEAD6; color:#1E8E3E; }
  /* mini-chips chiffrés UU (carte plate bordée, no shadow) */
  .uu-chipx{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px;
    background:#fff; border:1px solid var(--border-default); border-radius:10px;
    font:600 13px var(--font-sans); color:#3C4043; white-space:nowrap; }
  .uu-chipx__sq{ width:16px; height:16px; border-radius:4px; }
  .uu-chipx__mut{ color:#9AA0A6; font-weight:600; letter-spacing:1px; }
  .uu-chipx em{ font-style:normal; color:#9AA0A6; font-weight:500; }
  .uu-chipx svg{ width:15px; height:15px; }
  .uu-chipx .up{ color:#1E8E3E; }

  /* placement par état (relatif à la pilule) */
  /* placement par état (relatif à la pilule).
     NB : .uu-pillwrap fait désormais 2.02em (le pill 1.76em) — son bord haut est
     ~9px au-dessus du pill. Les offsets ci-dessous intègrent ce décalage. */
  .d-lock{ left:-26px; top:50%; transform:translateY(-50%); }   /* à cheval sur le bord, voulu */
  .d-shieldg{ right:-46px; top:-18px; }
  .d-eye{ left:-14px; top:-16px; }
  .d-field{ right:-6px; bottom:-12px; }
  .d-omni{ left:-26px; top:-10px; }
  .d-shieldgr{ right:-12px; bottom:-14px; }

  @media (max-width:640px){
    .uu-hero{ padding:34px 14px 40px; border-radius:0 0 var(--promo-radius-sm) var(--promo-radius-sm); }
    /* Le plancher de 44px du clamp laissait 24px de marge au titre dans un
       bloc de 366px. On repasse en vw pour qu'il suive vraiment l'ecran. */
    .uu-hero__title{ font-size:clamp(31px,8.7vw,42px); }
    /* mobile : décos visibles, resserrées contre la pilule pour rester à l'écran */
    /* Décos : la pilule fait ~283px sur 390 d'écran, les étiquettes 113-135px.
       Aucune place à côté sans couvrir le mot -> étiquettes AU-DESSUS, bulles à gauche. */
    /* la place pour l'étiquette se prend HORS du wrap (marge), sinon le pill
       se décentre dans son wrap à hauteur fixe et les bulles ne suivent plus.
       Marge symétrique haut/bas, et serrée : .5em creusait 25px de chaque côté
       et le titre partait à 227px de haut. */
    .uu-pillwrap{ margin:.18em 0; }
    .uu-bub{ width:32px; height:32px; }
    .uu-bub svg{ width:15px; height:15px; }
    .uu-bub__badge{ min-width:13px; height:13px; font-size:8px; line-height:13px; }
    /* PAS de transform:scale ici : @keyframes uu-float pose lui aussi un
       transform, qui l'ecrase -> l'etiquette repassait a 100 %. On reduit
       donc les vraies metriques. */
    /* Metriques resserrees : les libelles ont gagne en longueur (Nouveaux
       clients, Reponse < 24 h). Ancrees a droite, elles poussaient vers la
       gauche et mordaient sur la pilule. On recupere la largeur ici plutot
       que de deplacer l'ancrage, releve au pixel sur capture. */
    .uu-chipx{ height:23px; padding:0 7px; gap:4px; font-size:10.5px; border-radius:8px; }
    .uu-chipx svg{ width:11px; height:11px; }
    .uu-chipx__sq{ width:11px; height:11px; border-radius:3px; }
    /* flottement plus discret : a cette echelle, 12px de course tapait dans le texte */
    .uu-deco__in{ --float:-3px; --floatr:3deg; }
    /* bulles : collées au bord gauche de la pilule, sans mordre dessus */
    /* les bulles chevauchent le bord du pill, comme sur desktop (avant : posees
       a cote, elles paraissaient detachees du mot) */
    .d-lock, .d-eye, .d-omni{ left:-21px; right:auto; top:50%; bottom:auto; transform:translateY(-50%); }
    /* étiquettes : posées juste au-dessus, à ras */
    /* l'etiquette se pose SUR le coin haut du pill au lieu de flotter au-dessus.
       Essai fait en 3.15 de la basculer sous la pilule (top:calc(100% - 27px)) :
       moins bon, elle se retrouvait dans la zone de texte. On reste au-dessus. */
    /* Relevé sur capture : l'etiquette touchait le bord du bloc (x=381 pour
       un bloc finissant a 382). On la rentre franchement. */
    .d-shieldg, .d-field, .d-shieldgr{ left:auto; right:10px; top:auto; bottom:calc(100% - 27px); }
  }

  /* ================= SCROLL-REVEAL (texte qui s'illumine) ================= */
  /* La course d'allumage vaut HAUTEUR DE SECTION MOINS HAUTEUR DU STICKY :
     260vh - 100vh = 160vh d'epinglage, contre 100vh avant. Le paragraphe met
     donc une fois et demie plus de scroll a s'allumer, et rien ne part en
     blanc : main.js cale la progression sur la duree exacte de l'epinglage,
     prog atteint 1 pile quand le sticky se decroche.
     Pour ralentir ou accelerer l'allumage : cette seule valeur. */
  .uu-reveal{ position:relative; height:260vh; }
  .uu-reveal__sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden; }
  .uu-reveal__p{ will-change:transform; }
  .uu-reveal__p{ margin:0; max-width:1140px; font-family:var(--font-sans); font-weight:500; letter-spacing:-.4px;
    font-size:clamp(24px,3.35vw,42px); line-height:1.5; color:#C2C6C9; text-align:left; }
  .rword{ color:#C2C6C9; transition:color .6s var(--ease); }
  .rword.lit{ color:#202124; }
  @media (max-width:640px){ }
  /* base chip */
  .rkey{ display:inline-flex; align-items:center; vertical-align:middle; margin:0 5px; }
  .rkey__t{ font-weight:500; color:inherit; text-decoration:none; }
  .rkey__i{ display:inline-flex; align-items:center; justify-content:center; color:inherit; }
  /* Administration : pilule, clé à gauche, texte+icône bleu foncé, fond rond bleu clair */
  .rkey--adm{ font-size:.66em; gap:.3em; padding:.12em .52em; border-radius:999px; background:#E8EAED; color:#9AA0A6;
    transition:background .3s var(--ease), color .3s var(--ease); }
  .rkey--adm .rkey__i .msr{ font-size:1.05em; }
  .rkey--adm.lit{ background:#D3E3FD; color:#0B57D0; }
  .rkey--adm:hover{ background:#BBD6FB; color:#0842A8; cursor:pointer; }
  /* départements : icône ronde colorée + soulignement même couleur (encore plus petits) */
  .rdep{ display:inline-flex; align-items:center; gap:.32em; vertical-align:middle; margin:0 3px; font-size:.6em;
    padding:.08em .3em; border-radius:999px; transition:background .25s var(--ease); }
  .rdep:hover{ cursor:pointer; }
  .rdep__i{ display:inline-flex; align-items:center; justify-content:center; width:1.42em; height:1.42em; border-radius:50%;
    background:#E8EAED; color:#9AA0A6; flex-shrink:0; transition:background .35s var(--ease), color .35s var(--ease); }
  .rdep__i .msr{ font-size:.92em; }
  .rdep__t{ font-weight:600; color:#9AA0A6; text-decoration:underline; text-decoration-color:transparent;
    text-decoration-thickness:2.5px; text-underline-offset:5px;
    transition:color .35s var(--ease), text-decoration-color .35s var(--ease); }
  .rdep--com.lit .rdep__i, .rdep--com:hover .rdep__i{ background:#F3E8FD; color:#9334E8; } .rdep--com.lit .rdep__t, .rdep--com:hover .rdep__t{ color:#9334E8; text-decoration-color:#9334E8; }
  .rdep--fin.lit .rdep__i, .rdep--fin:hover .rdep__i{ background:#E6F4EA; color:#1E8E3E; } .rdep--fin.lit .rdep__t, .rdep--fin:hover .rdep__t{ color:#1E8E3E; text-decoration-color:#1E8E3E; }
  .rdep--jur.lit .rdep__i, .rdep--jur:hover .rdep__i{ background:#E8EAF6; color:#3949AB; } .rdep--jur.lit .rdep__t, .rdep--jur:hover .rdep__t{ color:#3949AB; text-decoration-color:#3949AB; }
  .rdep--tec.lit .rdep__i, .rdep--tec:hover .rdep__i{ background:#FCE8E6; color:#D93025; } .rdep--tec.lit .rdep__t, .rdep--tec:hover .rdep__t{ color:#D93025; text-decoration-color:#D93025; }
  .rdep--exp.lit .rdep__i, .rdep--exp:hover .rdep__i{ background:#FEEFE3; color:#E8710A; } .rdep--exp.lit .rdep__t, .rdep--exp:hover .rdep__t{ color:#E8710A; text-decoration-color:#E8710A; }
  .rdep--com:hover{ background:#F3E8FD; } .rdep--fin:hover{ background:#E6F4EA; } .rdep--jur:hover{ background:#E8EAF6; } .rdep--tec:hover{ background:#FCE8E6; } .rdep--exp:hover{ background:#FEEFE3; }
  /* bouton CTA cloné, inline dans le texte reveal */
  .uu-reveal__cta{ vertical-align:middle; margin:0 4px; }
  @media (max-width:640px){ .rkey{ margin:0 3px; } .rdep{ margin:0 2px; } }
  @media (max-width:640px){
    /* Pas de padding vertical sur la section : sa hauteur est en vh et
       box-sizing:border-box ferait manger la course d'epinglage par le
       padding. La gouttiere horizontale se pose sur le sticky. */
    .uu-reveal{ padding:0 16px; }
    /* La section prend tout l'ecran sur mobile : a 24px le paragraphe n'en
       occupait qu'un tiers et flottait au milieu du vide. Corps fluide, cale
       sur la largeur d'ecran — 30px sur un 390, 27px sur un 360, sans jamais
       deborder de la fenetre (mesure : 11 lignes maxi sur le plus petit). */
    .uu-reveal__p{ font-size:clamp(26px,8.6vw,38px); }
  }

  /* Les trois dernieres proprietes ne sont pas cosmetiques : sans 'liga', un
     navigateur qui desactive les ligatures affiche le NOM de l'icone ; sans
     nowrap, ce nom se coupe en plusieurs lignes et fait exploser le bouton ;
     sans direction, il s'inverse en contexte RTL. */
  .msr{ font-family:'Material Symbols Rounded'; font-weight:500; font-style:normal; line-height:1;
    font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
    -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
    white-space:nowrap; direction:ltr; word-wrap:normal; }

  /* CTA sous le hero */
  .uu-hero__ctawrap{ margin-top:34px; text-align:center; }
  .uu-hero__cta{ display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 24px;
    background:var(--bg-page); color:var(--g-blue); border:1px solid var(--border-default); border-radius:999px;
    font:500 16px var(--font-sans); text-decoration:none; transition:background .2s var(--ease); }
  .uu-hero__cta:hover{ background:var(--bg-hover); }
  .uu-hero__cta svg{ width:20px; height:20px; }
  .uu-pill-g{ display:inline-flex; align-items:center; gap:.24em; padding:.06em .4em;
    border-radius:999px; background:#CEEAD6; color:#1E8E3E; vertical-align:baseline; font-weight:500; }
  .uu-pill-g .msr{ font-size:.82em; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24; }
  @media (max-width:640px){ .uu-pill-g{ border-radius:999px; } }

  /* ================= PERF (titre-chapeau + card split : rapport façon paiement / image) ================= */
  /* Section pleine largeur : elle sort de .uu-page, donc son padding ne
     s'applique pas ici. Le stage refait la gouttiere a la main, en ajoutant
     les 8px de .uu-main pour s'aligner sur toutes les autres sections. */
  .uu-perf{ position:relative; width:100vw; margin-left:calc(50% - 50vw); }
  .uu-perf-stage{ height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:52px; padding:36px calc(var(--gut) + 8px); }

  .uu-perf-title{ margin:0 auto; max-width:880px; text-align:center; font-family:var(--font-sans); font-weight:700; letter-spacing:-.6px;
    line-height:1.24; font-size:clamp(34px,4.9vw,60px); color:#202124; will-change:transform,opacity; }

  .uu-perf-card{ position:relative; width:100%; max-width:1320px; flex:1 1 auto; min-height:0; max-height:620px;
    overflow:hidden; border:1px solid #E3E1DC; border-radius:20px; background:#fff;
    transform-origin:center top; will-change:transform,opacity; }

  /* panneau rapport (moitié gauche, sous l'image au départ) */
  .uu-perf-panel{ position:absolute; z-index:1; top:0; left:0; bottom:0; width:53%;
    display:flex; flex-direction:column; justify-content:center; gap:0; padding:40px 40px 40px 52px; }
  .uu-perf-label{ font:600 11.5px var(--font-sans); letter-spacing:1px; text-transform:uppercase; color:#80868B; }
  .uu-perf-h{ margin:8px 0 0; font:600 clamp(22px,2.4vw,30px)/1.15 var(--font-sans); letter-spacing:-.5px; color:#202124; }
  .uu-perf-sub{ margin:12px 0 22px; font:400 17px/1.56 var(--font-sans); color:#5F6368; max-width:460px; }

  /* boutons zone — segmented chips (primitive thème .uu-segmented/.uu-chip) */
  .uu-perf-geo{ display:flex; gap:8px; margin:0 0 16px; }
  .uu-geo{ display:inline-flex; align-items:center; height:32px; padding:0 15px;
    background:#fff; border:1px solid var(--border-default); border-radius:8px;
    font:500 14px var(--font-sans); color:#202124; cursor:pointer; white-space:nowrap;
    transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .uu-geo:hover{ background:var(--bg-hover); }
  .uu-geo.is-active{ background:var(--g-blue-container); border-color:var(--g-blue-container); color:var(--g-blue); font-weight:600; }

  /* tableau départements — repris du design paiement (lignes outlined, séparateurs fins) */
  .fin-list{ display:flex; flex-direction:column;
    border:1px solid var(--border-default); border-radius:14px; padding:2px 18px; }
  .fin-row{ display:flex; align-items:center; gap:13px; height:46px; margin:0 -18px; padding:0 18px;
    border-top:1px solid #ECECEC; }
  .fin-row:first-child{ border-top:none; }
  /* pastille département : ticket blanc, bordure + texte noirs (uu-ticker--outline) */
  .fin-tk{ display:inline-flex; align-items:center; justify-content:center; height:24px; min-width:42px; padding:0 8px;
    border-radius:5px; background:#fff; color:#202124; box-shadow:inset 0 0 0 1.4px #202124;
    font:700 12px var(--font-sans); letter-spacing:.3px; flex-shrink:0; }
  .fin-name{ font:500 14.5px var(--font-sans); color:#202124; white-space:nowrap; }
  /* chiffres : badge % bleu (uplift) + valeur tabulaire, façon capture paiement */
  .fin-up{ display:inline-flex; align-items:center; gap:2px; height:21px; padding:0 8px 0 6px; margin-left:auto;
    border-radius:999px; font:600 12px var(--font-sans); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .fin-arw{ font-size:14px; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24; }
  .fin-up--up,.fin-up--down{ background:var(--g-blue-container); color:var(--g-blue); }
  .fin-val{ width:82px; text-align:right; font:600 15px var(--font-sans); color:#202124;
    font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
  .fin-val em{ font:400 11.5px var(--font-sans); font-style:normal; color:#9AA0A6; margin-left:4px; }

  /* image — couvre toute la card au départ, se rétracte en colonne droite pendant l'anim */
  /* 16px de marge interieure DES LE DEPART : le tween la ramenait deja a 16
     en fin de course (main.js), mais le CSS partait a 0 — l'image collait donc
     aux bords de la carte pendant toute la phase de couverture. Meme valeur
     des deux cotes = le tween ne fait plus bouger que `left`. */
  .uu-perf-media{ position:absolute; z-index:2; top:16px; left:16px; right:16px; bottom:16px; overflow:hidden;
    will-change:top,left,right,bottom,border-radius; }
  .uu-perf-media img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ------------------------------------------------------------------
     Carte perf sur ecran COURT (1366x768, 1280x720 : le parc portable).
     La carte est etiree par .uu-perf-stage (100vh) : sous ~880px de haut
     elle tombe a 488px alors que le panneau demande 472 + 80 de padding.
     `justify-content:center` mangeait donc le padding (marge reelle : 8px),
     et sous 740px le texte sortait carrement de la carte (-16px).
     On compacte le contenu au lieu de laisser le padding se faire ecraser.
     ------------------------------------------------------------------ */
  @media (min-width:821px) and (max-height:880px){
    .uu-perf-panel{ padding-top:28px; padding-bottom:28px; }
    .uu-perf-sub{ margin:10px 0 16px; }
    .uu-perf-geo{ margin-bottom:12px; }
    .fin-row{ height:38px; }
  }
  @media (min-width:821px) and (max-height:760px){
    .uu-perf-panel{ padding-top:20px; padding-bottom:20px; }
    .uu-perf-h{ font-size:26px; }
    .uu-perf-sub{ font-size:15px; margin:8px 0 12px; }
    .uu-geo{ height:28px; padding:0 12px; font-size:13px; }
    .uu-perf-geo{ margin-bottom:10px; }
    .fin-row{ height:34px; }
  }

  @media (max-width:820px){
    .uu-perf-stage{ height:auto; padding:52px 16px; gap:16px; }
    /* La carte etait a padding:0 : l'image touchait le bord (1px) et son rayon
       de 14px flottait dans celui de la carte (20px). On l'encadre. */
    .uu-perf-card{ max-height:none; height:auto; flex:none; padding:14px; }
    /* 8px ici + 14px de la carte = 22px du bord, et 22px sous l'image / au bas */
    .uu-perf-panel{ position:static; width:100%; padding:22px 8px 8px; }
    .uu-perf-sub{ max-width:none; }
    .uu-perf-media{ position:static; height:190px; }
    /* Le nom etait en nowrap avec une largeur fixe sur la valeur : a 390px de
       large, tk + nom + variation + valeur depassaient le panneau d'environ
       25px. Le nom devient l'element compressible (il se coupe proprement),
       les trois autres gardent leur taille — ce sont eux qui portent le
       chiffre, ils ne doivent jamais etre rognes. */
    .fin-row{ gap:9px; }
    .fin-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
    .fin-tk,.fin-up,.fin-val{ flex:0 0 auto; }
    .fin-val{ width:auto; white-space:nowrap; }
  }

  @media (max-width:430px){
    .fin-row{ gap:7px; }
    /* Le jeton 3 lettres redit le nom du departement juste a cote. Sur un
       ecran etroit c'est 43px voles au seul element qui porte de l'info
       neuve : on le retire ici, et le nom cesse d'etre tronque. */
    .fin-tk{ display:none; }
    .fin-name{ font-size:13.5px; }
    .fin-up{ padding:0 6px 0 4px; font-size:12px; }
    .fin-val{ font-size:14px; }
    .fin-val em{ margin-left:3px; font-size:10.5px; }
  }

  /* ================= CASE STUDIES (carrousel) ================= */
  /* ---- Secteurs : layout inspiré Google One, photos du site ---- */

  /* ---- Deux cards + bouton (inspiré Google One forfaits) ---- */
  .uu-offers{ max-width:1180px; margin:0 auto; padding:40px 0 104px; }
  .uu-offers__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  /* Cartes posees, pas cerclees de bleu : le filet bleu #A8C7FA en faisait
     deux boutons geants alors que ce sont deux panneaux. Filet gris de la
     grille + fond gris tres clair — la carte se detache du blanc de la page
     par sa surface, plus par son contour. */
  .offer{ background:var(--panel-bg); border:1px solid var(--border-default); border-radius:24px; padding:44px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; }
  .offer__title{ margin:0; font:700 clamp(26px,3.2vw,40px)/1.17 var(--font-sans); letter-spacing:-.4px; color:#202124; }
  .offer__price{ margin:8px 0 0; font:600 16px var(--font-sans); color:#202124; }
  .offer__desc{ margin:14px 0 26px; font:400 18px/1.56 var(--font-sans); color:#5F6368; max-width:400px; }
  /* Le bouton porte son fond EN PERMANENCE : sur une carte grise, un libelle
     bleu sans surface ne se lisait pas comme un bouton — il fallait le survol
     pour le decouvrir, et au doigt il n'y a pas de survol. Le survol devient
     donc le cran au-dessus, pas la revelation. */
  .offer__btn{ display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 20px; border-radius:999px;
    background:#EAF1FE; border:none; color:#0B57D0; font:700 16px var(--font-sans); text-decoration:none; transition:background .18s var(--ease); }
  .offer__btn:hover{ background:var(--g-blue-container); }
  .offer__btn:active{ background:#C2D8FB; }
  .offer__btn .msr{ font-size:20px; }
  .case{ flex:0 0 min(960px,64vw); opacity:.32; display:grid; grid-template-columns:1fr 1fr;
    border-radius:18px; overflow:hidden; min-height:440px; }

  @media (max-width:760px){
    .case{ flex:0 0 88%; grid-template-columns:1fr; }
  }

  @media (max-width:820px){
    .uu-offers{ padding:16px 16px 64px; }
    .uu-offers__grid{ grid-template-columns:1fr; gap:12px; }
    .offer{ padding:26px 20px 24px; border-radius:20px; }
    .offer__title{ font-size:24px; letter-spacing:-.2px; }
    .offer__price{ margin:6px 0 0; font-size:14px; }
    .offer__desc{ margin:10px 0 18px; font-size:14.5px; line-height:1.5; max-width:none; }
    .offer__btn{ height:42px; padding:0 18px; font-size:14px; }
    .offer__btn .msr{ font-size:18px; }
  }
  @media (max-width:820px){
  }

  /* titre Personnalisez (pilule rouge) */
  .uu-title3{ padding:96px 0 32px; text-align:center; }
  .uu-title3 h2{ margin:0 auto; max-width:760px; font:700 clamp(34px,4.9vw,60px)/1.24 var(--font-sans); letter-spacing:-.4px; color:#202124; }
  .uu-pill-r{ display:inline-flex; align-items:center; gap:.24em; padding:.06em .4em; border-radius:999px;
    background:#FCE3DD; color:#F4522F; vertical-align:baseline; font-weight:500; }
  .uu-pill-r .msr{ font-size:.82em; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24; }
  @media (max-width:820px){ }
  @media (max-width:820px){ }
  .uu-pill-y{ display:inline-flex; align-items:center; gap:.24em; padding:.06em .4em; border-radius:999px;
    background:#FEEFC3; color:#E8710A; vertical-align:baseline; font-weight:500; }
  .uu-pill-y .msr{ font-size:.82em; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24; }

  /* ================= CARTE JAUNE IA ================= */
  .uu-ai{ max-width:1280px; margin:0 auto; padding:32px 0 20px; }
  @media (max-width:820px){ }

  /* ===== « Moins de gestion, plus de missions » — composition large =====
     Gauche : le message (carte bleue). Droite : la preuve (carte budget).
     Dessous : 3 cartes illustrées. Fini la colonne de 600px étriquée. */
  #uuBud{ max-width:none; margin:0; padding:104px 24px; display:block; }
  .uu-bud__inner{ width:100%; max-width:1180px; margin:0 auto; }
  /* Meme gabarit que .uu-title3 h2, .uu-faq__h et .uu-perf-title :
     clamp(34,4.9vw,60)/1.24 et 52px sous le titre. Il etait le seul a
     30/4.2vw/54 avec 64px de marge -> il ne respirait pas comme les autres. */
  .uu-bud__title{ text-align:center; margin:0 0 52px; font:700 clamp(34px,4.9vw,60px)/1.24 var(--font-sans); letter-spacing:-.8px; color:#202124; }
  /* alignee sur les autres pilules : un cran sous le titre qui la porte */
  .uu-bud__title .uu-pill-y{ font-weight:500; }

  /* rangée du haut : message + preuve */
  .bud__top{ display:grid; grid-template-columns:1.12fr .88fr; gap:20px; align-items:stretch; }

  /* carte bleue : la promesse */
  .bud__say{ display:flex; flex-direction:column; justify-content:center;
    background:var(--g-blue); color:#fff; border-radius:24px; padding:44px 44px 40px; }
  .bud__label{ display:inline-block; font:600 12px var(--font-sans); letter-spacing:1.1px; text-transform:uppercase; color:#A8C7FA; }
  .bud__lead{ margin:16px 0 0; font:700 clamp(24px,2.7vw,34px)/1.26 var(--font-sans); letter-spacing:-.5px; color:#fff; }
  .bud__cta{ display:inline-flex; align-items:center; align-self:flex-start; flex-shrink:0; gap:8px; margin-top:28px;
    height:44px; padding:0 22px; border-radius:999px; background:#fff; color:var(--g-blue);
    font:700 15px var(--font-sans); text-decoration:none; transition:background .18s var(--ease); }
  .bud__cta:hover{ background:#E8F0FE; }
  .bud__cta .msr{ font-size:19px; }

  /* carte budget : la preuve chiffrée */
  .bud__card{ display:flex; flex-direction:column; background:#fff;
    border:1px solid var(--border-default); border-radius:24px; overflow:hidden; }
  .bud__card .paycard__head{ background:#F1F3F4; color:#202124; }
  .bud__card .paycard__head svg{ color:#5F6368; }
  .bud__cardbody{ flex:1; display:flex; flex-direction:column; padding:30px 30px 0; }
  .bud__figure{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .bud__note{ margin:10px 0 0; font:400 14px var(--font-sans); color:#9AA0A6; }
  .bud__spark{ width:100%; margin:auto -30px 0; width:calc(100% + 60px); }
  .bud__spark svg{ display:block; width:100%; height:120px; }

  /* les 3 preuves illustrées : vraies cartes */
  .bud__feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
  .budfeat{ display:flex; flex-direction:column; background:#fff;
    border:1px solid var(--border-default); border-radius:24px; padding:22px 24px 26px;
    transition:box-shadow var(--dur) var(--ease); }
  .budfeat:hover{ box-shadow:0 1px 8px rgba(32,33,36,.10); }
  .budfeat__ic{ width:100%; height:auto; aspect-ratio:456/300; object-fit:cover; border-radius:14px;
    border:1px solid var(--border-subtle); background:#fff; }
  .budfeat__h{ margin:18px 0 0; font:700 18px/1.3 var(--font-sans); color:#202124; letter-spacing:-.2px; }
  .budfeat__p{ margin:8px 0 0; font:400 15px/1.5 var(--font-sans); color:#5F6368; }

  /* graphe qui monte, animé de temps en temps */
  .uu-bud__sparkline{ stroke-dasharray:1; stroke-dashoffset:1; animation:uu-draw 7s ease-in-out infinite; }
  .uu-bud__sparkfill{ opacity:0; animation:uu-fill 7s ease-in-out infinite; }
  @keyframes uu-draw{ 0%{stroke-dashoffset:1;} 24%{stroke-dashoffset:0;} 74%{stroke-dashoffset:0;} 100%{stroke-dashoffset:1;} }
  @keyframes uu-fill{ 0%{opacity:0;} 28%{opacity:1;} 74%{opacity:1;} 100%{opacity:0;} }
  @media (prefers-reduced-motion:reduce){ .uu-bud__sparkline,.uu-bud__sparkfill{ animation:none; stroke-dashoffset:0; opacity:1; } }

  @media (max-width:900px){
    .bud__top{ grid-template-columns:1fr; }
    .bud__say{ padding:32px 26px 30px; }

    /* Les 3 preuves : carrousel horizontal qui déborde jusqu'aux bords.
       (avant : flex-direction:row sur .budfeat mettait img + h4 + p sur une
        même ligne — 3 enfants directs — d'où les espacements incohérents) */
    .bud__feats{ display:flex; gap:12px; margin-top:16px;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain; scrollbar-width:none;
      /* seul debord conserve : le carrousel doit filer jusqu'au bord de la
         carte pour montrer qu'il y a une suite. Il suit --gut, il ne le devine pas. */
      margin-inline:calc(-1 * var(--gut)); padding:2px var(--gut) 6px;
      scroll-padding-left:var(--gut); }
    .bud__feats::-webkit-scrollbar{ display:none; }
    .budfeat{ flex:0 0 78%; max-width:320px; scroll-snap-align:start;
      flex-direction:column; align-items:stretch; gap:0;
      padding:14px 14px 18px; border-radius:18px; }
    .budfeat__ic{ width:100%; aspect-ratio:16/10; }
    .budfeat__h{ margin:12px 0 0; font-size:16px; }
    .budfeat__p{ margin:6px 0 0; font-size:13.5px; }
  }

  /* ---- restauré : animation des mots dans les pilules (perdue lors d'une refonte) ---- */
  .tw{ white-space:nowrap; }
  .tw span{ display:inline-block; will-change:transform,opacity,filter; animation:tw-rise 4s cubic-bezier(.2,.7,.2,1) infinite; }
  @keyframes tw-rise{
    0%{   opacity:0; filter:blur(7px); transform:translateY(16px) scale(.78); }
    16%{  opacity:1; filter:blur(0);   transform:translateY(-3px) scale(1.03); }
    24%{  transform:translateY(0) scale(1); }
    72%{  opacity:1; filter:blur(0);   transform:translateY(0) scale(1); }
    88%{  opacity:0; filter:blur(6px); transform:translateY(-14px) scale(.82); }
    100%{ opacity:0; filter:blur(6px); transform:translateY(-14px) scale(.82); }
  }
  @media (prefers-reduced-motion:reduce){ .tw span{ animation:none; opacity:1; } }

  /* ---- restauré : conteneur de la section paiements ---- */
  .uu-secline{ max-width:880px; margin:0 auto; padding:96px 0; }

  /* ===== Carte-exemple : suivi des paiements par actes (repris du plugin paiement) ===== */
  .payex{ display:flex; flex-direction:column; }
  .payex__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 16px; }
  .payex__title{ margin:0; font:600 clamp(24px,2.8vw,32px) var(--font-sans); letter-spacing:-.5px; color:#202124; }
  .payex__count{ font:500 13px var(--font-sans); color:#9AA0A6; white-space:nowrap; }
  .payex__seg{ display:flex; gap:10px; margin:0 0 12px; overflow-x:auto; scrollbar-width:none; }
  .payex__seg::-webkit-scrollbar{ display:none; }
  .payex__chip{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; flex-shrink:0;
    background:#fff; border:1px solid var(--border-default); border-radius:8px;
    font:500 14px var(--font-sans); color:#202124; cursor:pointer; white-space:nowrap;
    transition:background .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1); }
  .payex__chip:hover{ background:var(--bg-hover); }
  .payex__chip .msr{ font-size:18px; }
  .payex__chip.is-active{ background:var(--g-blue-container); border-color:var(--g-blue-container); color:var(--g-blue); font-weight:600; }
  .payex__on{ display:none; align-items:center; gap:4px; font-weight:600; }
  .payex__on .msr{ font-size:16px; }
  .payex__chip.is-active .payex__on{ display:inline-flex; }
  .payex__note{ margin:0 0 14px; font:400 13.5px/1.5 var(--font-sans); color:#5F6368; }
  .payex__list{ display:flex; flex-direction:column; background:#fff;
    border:1px solid var(--border-default); border-radius:14px; padding:2px 20px; }
  .payex__acte{ display:flex; align-items:center; gap:14px; height:64px; margin:0 -20px; padding:0 20px;
    border-top:1px solid #ECECEC; transition:background var(--dur) var(--ease); }

  /* ===== ESCALIER : les actes tombent 2 par 2, sur 2 colonnes ===== */
  /* ===== Liste : blocs de 2 lignes, révélés au scroll avec leurs traits (haut et bas) ===== */
  .payex__bloc{ position:relative; }
  /* traits qui délimitent le bloc : ils apparaissent AVEC lui */
  .payex__list--stair .payex__bloc{ border-top:1px solid #ECECEC; }
  .payex__list--stair .payex__bloc:first-child{ border-top:none; }
  .payex__list--stair .payex__bloc:last-child{ border-bottom:1px solid #ECECEC; }
  .payex__list--stair .payex__bloc .payex__acte:first-child{ border-top:none; }
  /* le bloc entier (lignes + traits) est animé AU SCROLL par GSAP : pas de transition CSS,
     sinon elle se battrait avec le scrub. `is-in` = repli si GSAP n'est pas là. */
  .payex__list--stair .payex__bloc{ opacity:0; }
  .payex__list--stair .payex__bloc.is-in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){
    .payex__list--stair .payex__bloc{ opacity:1 !important; transform:none !important; }
  }
  .payex__acte:first-child{ border-top:none; }
  .payex__acte:hover{ background:var(--bg-hover); }
  .payex__tk{ display:inline-flex; align-items:center; justify-content:center; height:24px; min-width:44px; padding:0 8px;
    border-radius:5px; background:var(--g-blue-container); color:var(--g-blue); font:700 12px var(--font-sans); flex-shrink:0; }
  .payex__main{ flex:1; min-width:0; }
  .payex__name{ margin:0; font:500 16px/1.4 var(--font-sans); color:#202124; }
  .payex__date{ margin:3px 0 0; font:400 14px/1.4 var(--font-sans); color:#9AA0A6; }
  .payex__right{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
  .payex__status{ display:inline-flex; align-items:center; gap:5px; font:500 14px var(--font-sans); white-space:nowrap; }
  .payex__status .msr{ font-size:16px; }
  .payex__status--paid{ color:var(--g-blue); }
  .payex__status--pending{ color:#9AA0A6; }
  /* Devis accepte : ni bleu (regle) ni gris (en attente) — un acte engage
     mais pas encore paye a son propre etat, il lui faut sa propre couleur. */
  .payex__status--quote{ color:#1E8E3E; }
  .payex__uplift{ display:inline-flex; align-items:center; height:21px; border-radius:999px; overflow:hidden;
    background:var(--g-blue-container); color:var(--g-blue); font:600 12px var(--font-sans); font-variant-numeric:tabular-nums; white-space:nowrap;
    max-width:0; padding:0; opacity:0; transform:scale(.85); margin-left:-16px;
    transition:max-width .55s cubic-bezier(.4,0,.2,1), padding .55s cubic-bezier(.4,0,.2,1), margin .55s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1); }
  .payex.is-max .payex__uplift{ max-width:64px; padding:0 8px; opacity:1; transform:scale(1); margin-left:0; }
  .payex__price{ font:600 17px var(--font-sans); color:#202124; font-variant-numeric:tabular-nums; white-space:nowrap; transition:color .4s var(--ease); }
  .payex__doc{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; flex-shrink:0;
    border:1px solid var(--border-default); border-radius:8px; background:transparent; color:var(--g-blue);
    font:500 13px var(--font-sans); text-decoration:none; white-space:nowrap; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .payex__doc:hover{ background:var(--g-blue-container); border-color:var(--g-blue-container); }
  .payex__doc svg{ width:14px; height:14px; }
  .payex__doc.is-off{ opacity:.4; pointer-events:none; }
  /* Le detail du reglage mobile de la liste vit plus bas, dans le bloc
     « 4. Tableau des actes » (meme media, plus loin dans le fichier : a
     specificite egale c'est lui qui tranche). Rien ici. */

  /* CTA de fin (fond blanc) */
  .uu-endcta{ max-width:1280px; margin:0 auto; padding:96px 0; }
  .endcta{ position:relative; background:#fff; border:1px solid #E3E1DC; border-radius:28px; padding:66px 40px; text-align:center; overflow:hidden; }
  .endcta__h{ margin:0 auto; max-width:760px; font:700 clamp(30px,3.9vw,48px)/1.17 var(--font-sans); letter-spacing:-.6px; color:#202124; }
  .endcta__p{ margin:20px auto 0; max-width:560px; font:400 clamp(15px,1.6vw,18px)/1.55 var(--font-sans); color:#5F6368; }
  .endcta__btn{ display:inline-flex; align-items:center; gap:9px; margin-top:30px; height:52px; padding:0 28px; border-radius:999px;
    background:var(--bg-page); color:var(--g-blue); border:1px solid var(--border-default); font:600 17px var(--font-sans); text-decoration:none; transition:background .2s var(--ease); }
  .endcta__btn:hover{ background:var(--bg-hover); }
  .endcta__btn svg{ width:20px; height:20px; }
  @media (max-width:820px){ .endcta{ padding:44px 24px; } }

  /* FAQ */

  /* ================= SWAP — volets qui glissent au scroll (section épinglée) ================= */
  .uu-swap{ position:relative; min-height:100vh; display:flex; align-items:center; padding:24px 0 40px; overflow:hidden; }
  .swap__inner{ position:relative; width:100%; max-width:1180px; margin:0 auto;
    display:grid; grid-template-columns:1.34fr .66fr; align-items:center; gap:48px; padding-right:52px; }

  /* média : carré à bordure grise (visuels en cours de génération) */
  .swap__media{ position:relative; width:100%; aspect-ratio:4/3; max-height:78vh; margin:0 auto; }
  .swap__shot{ position:absolute; inset:0; margin:0; background:#FFFFFF;
    border:1px solid var(--border-default); border-radius:16px;
    opacity:0; transform:scale(.985); transition:opacity .5s var(--ease), transform .6s var(--ease); }
  .swap__shot.is-active{ opacity:1; transform:none; }
  /* Les visuels n'ont pas tous le meme ratio : 1672x941 (16/9) pour le 1er,
     1448x1086 (4/3) pour les deux autres. En `contain` ils se rendaient a des
     tailles differentes (358x201 vs 299x224). Cadre en 4/3 — le ratio majoritaire —
     et `cover` : les trois occupent exactement le meme rectangle. Les visuels 2
     et 3 tombent au pixel ; seul le 1er est rogne sur les cotes (le re-exporter
     en 4/3 supprimerait ce rognage). */
  .swap__shot img{ width:100%; height:100%; object-fit:cover; object-position:center; border-radius:15px; display:block; }

  /* texte : les volets glissent verticalement avant de changer */
  .swap__text{ position:relative; min-height:280px; }
  .swap__pane{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
    opacity:0; transform:translateY(60px); pointer-events:none;
    transition:opacity .5s var(--ease), transform .72s cubic-bezier(.22,1,.36,1); }
  .swap__pane.is-active{ opacity:1; transform:none; pointer-events:auto; }
  .swap__pane.is-up{ opacity:0; transform:translateY(-60px); }
  .swap__h{ margin:0; font:700 clamp(27px,2.9vw,38px)/1.22 var(--font-sans); letter-spacing:-.5px; color:#202124; }
  .swap__p{ margin:18px 0 0; font:400 17px/1.5 var(--font-sans); color:#5F6368; max-width:380px; }
  .swap__link{ display:inline-flex; align-items:center; align-self:flex-start; flex-shrink:0; height:38px; margin:28px 0 0; padding:0 18px;
    border-radius:999px; background:var(--g-blue-container); color:var(--g-blue);
    font:600 15px var(--font-sans); text-decoration:none; transition:background .18s var(--ease); }
  .swap__link:hover{ background:#BBD4FC; text-decoration:none; }

  /* points de progression (droite) */
  .swap__dots{ position:absolute; right:6px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; align-items:center; gap:14px; }
  .swap__dot{ width:8px; height:8px; padding:0; border:none; border-radius:999px; background:#DADCE0; cursor:pointer;
    transition:background .35s var(--ease), height .35s var(--ease); }
  .swap__dot.is-active{ height:78px; }
  /* couleur propre à chaque volet */
  /* la puce active prend la couleur de son volet — #FEEFC3 etait un jaune si
     pale qu'il se confondait avec le gris inactif (#DADCE0) */
  .swap__dot:nth-child(1).is-active{ background:#4285F4; }   /* guichet unique  — bleu  */
  .swap__dot:nth-child(2).is-active{ background:#FBBC04; }   /* facture a l'acte — jaune */
  .swap__dot:nth-child(3).is-active{ background:#34A853; }   /* documents        — vert  */

  @media (max-width:900px){
    .uu-swap{ padding:24px 16px; min-height:100vh; }
    .swap__inner{ grid-template-columns:1fr; gap:28px; }
    /* le cap 38vh bridait la hauteur. Plus de debord : .uu-swap est en
       overflow:hidden, tout ce qui depassait sa boite etait rogne. */
    /* meme cadre 4/3 qu'en desktop : les 3 visuels doivent se rendre
       exactement a la meme taille (cf. .swap__shot img plus haut) */
    .swap__media{ max-height:none; aspect-ratio:4/3; }
    .swap__text{ min-height:290px; }
    .swap__inner{ padding-right:0; }
    .swap__dots{ position:static; transform:none; flex-direction:row; justify-content:center; margin-top:22px; }
    .swap__dot.is-active{ height:8px; width:78px; }
  }

  .uu-faq{ max-width:1120px; margin:0 auto; padding:100px 0; }
  .uu-faq__h{ text-align:center; margin:0 0 52px; font:700 clamp(34px,4.9vw,60px)/1.24 var(--font-sans); letter-spacing:-.8px; color:#202124; }
  .faq-item{ border-top:1px solid #E6E4DF; }
  .faq-item:last-child{ border-bottom:1px solid #E6E4DF; }
  .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 8px;
    background:none; border:none; cursor:pointer; text-align:left; font:600 clamp(20px,2.4vw,27px)/1.32 var(--font-sans); color:#0B57D0; }
  .faq-q .msr{ color:#0B57D0; font-size:34px; transition:transform .2s var(--ease); flex-shrink:0; }
  .faq-item.open .faq-q .msr{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
  .faq-a p{ margin:0; padding:0 8px 34px; font:400 18px/1.56 var(--font-sans); color:#5F6368; max-width:920px; }
  .faq-item.open .faq-a{ max-height:420px; }

  /* ================= FOOTER ================= */
  .uu-footer{ margin:0 8px; background:#F8F9FA;
    border:1px solid var(--frame-line); border-top:1px solid #E6E4DF;
    border-radius:0 0 var(--panel-radius) var(--panel-radius); }
  .uu-footer__in{ max-width:1240px; margin:0 auto; padding:40px 40px 28px; }
  .uu-footer__social{ display:flex; align-items:center; gap:18px; padding-bottom:30px; border-bottom:1px solid #E6E4DF; }
  .uu-footer__social b{ font:600 14px var(--font-sans); color:#3C4043; margin-right:6px; }
  .uu-footer__social a{ display:inline-flex; }
  .uu-footer__social img{ width:20px; height:20px; opacity:.85; }
  .uu-footer__cols{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; padding:34px 0; }
  .uu-footer__cols h4{ margin:0 0 16px; font:600 14px var(--font-sans); color:#202124; }
  .uu-footer__cols a{ display:block; margin-bottom:12px; font:400 14px var(--font-sans); color:#5F6368; text-decoration:none; }
  .uu-footer__cols a:hover{ color:#202124; }
  .uu-footer__bottom{ display:flex; align-items:center; gap:24px; padding-top:26px; border-top:1px solid #E6E4DF; flex-wrap:wrap; }
  /* La pastille blanche est partie. Elle etait justifiee tant que le pied
     avait un fond gris a detacher ; sur un pied clair elle ne detachait plus
     rien, elle posait un rectangle blanc sur du blanc casse et enfermait la
     marque dans un cadre que la nav n'a pas. Meme marque, meme traitement :
     nue en haut, nue en bas. Le survol passe donc en opacite, comme la nav —
     il n'y a plus de bordure a teinter. */
  .uu-footer__brand{ display:inline-flex; align-items:center; gap:0;
    padding:0; background:transparent; border:none; border-radius:0;
    font:700 20px var(--font-sans); color:#202124; letter-spacing:.2px; text-decoration:none;
    transition:opacity var(--dur) var(--ease); }
  .uu-footer__brand:hover{ opacity:.68; }
  /* Meme lockup qu'en haut : le pied porte la MEME marque. Un cran plus bas
     en taille, c'est tout. */
  .uu-footer__brand{ --mark-h:36px; }
  .uu-footer__brand-mark{ width:var(--mark-w); height:var(--mark-h); background:var(--brand-color); -webkit-mask:var(--wmask) left center/contain no-repeat; mask:var(--wmask) left center/contain no-repeat; flex-shrink:0; }
  .uu-footer__legal{ display:flex; gap:22px; flex-wrap:wrap; }
  .uu-footer__legal a{ font:400 13.5px var(--font-sans); color:#5F6368; text-decoration:none; }
  .uu-footer__legal a:hover{ color:#202124; }
  .uu-footer__lang{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font:400 13.5px var(--font-sans); color:#3C4043; }
  .uu-footer__lang .msr{ font-size:18px; color:#5F6368; }
  @media (max-width:820px){ .uu-footer__cols{ grid-template-columns:repeat(2,1fr); } .uu-footer__lang{ margin-left:0; } }
  .paycard__head{ display:flex; align-items:center; gap:9px; background:var(--g-blue); color:#fff; padding:12px 24px; font:500 15px var(--font-sans); }
  .paycard__head svg{ width:19px; height:19px; }
  .paycard__value{ font:700 clamp(30px,3.2vw,40px)/1 var(--font-sans); color:#202124; letter-spacing:-1px; }
  .paycard__bonus{ display:inline-flex; align-items:center; margin-top:0; padding:6px 14px; border-radius:999px;
    background:#D3E3FD; color:#0B57D0; font:500 14px var(--font-sans); white-space:nowrap; }

  /* =====================================================================
     MOBILE — corrections ciblées : marges superflues, animations, tailles
     ===================================================================== */
  @media (max-width:640px){

    /* 2. « Tous vos services au même endroit » */
    /* EPINGLAGE RETABLI SUR MOBILE. Il avait ete retire (« sur un ecran de 390
       l'epinglage n'apporte rien ») : le paragraphe coulait alors dans le flux
       et on l'abordait avec le carrousel encore en haut de l'ecran et la carte
       solution qui pointait en bas — trois choses a la fois, l'allumage passait
       inapercu. Il reprend donc toute la fenetre : quand on arrive dessus, il
       n'y a que lui. C'est le seul moment de la page qui demande l'ecran entier.
       La hauteur reste celle du desktop (260vh), donc 160vh de course. */
    .uu-reveal{ height:260vh; }
    /* padding bas = la barre mobile fixee (72px) + un peu d'air : sans lui, le
       texte se centre sur la fenetre entiere et la barre lui mange le pied. */
    .uu-reveal__sticky{ position:sticky; top:0; height:100vh; align-items:center;
      padding:0 4px calc(96px + env(safe-area-inset-bottom, 0px)); }

    /* 3. RYTHME VERTICAL — une seule valeur pour toute la page mobile.
       Chaque section porte --sp en haut ET en bas : l'ecart entre deux
       sections voisines vaut donc toujours 2 x --sp = 80px. Avant, ca allait
       de 56px (trop serre) a 242px (le trou du reveal) selon les endroits.
       Pour changer la respiration de toute la page : cette seule ligne.
       NB : #uuBud est cible par ID (min-height:100vh + marge) -> meme
       specificite obligatoire pour le neutraliser. */
    /* gouttiere resserree sur mobile : 8 + 12 = 20px du bord d'ecran
       (contre 48px avant). Les sections n'en rajoutent aucune. */
    .uu-page{ --sp:40px; --sp-t:28px; --gut:12px; }   /* --sp entre sections, --sp-t sous les titres, --gut gouttiere */
    #uuBud{ min-height:0; margin:0; padding:var(--sp) 0; }
    .uu-ai{ margin-top:0 !important; padding:var(--sp) 0; }
    .uu-secline{ padding:var(--sp) 0; }
    .uu-title3{ padding:var(--sp) 0; }
    .uu-swap{ padding:var(--sp) 0; }
    .uu-offers{ padding:var(--sp) 0; }
    .uu-endcta{ padding:var(--sp) 0; }
    .uu-faq{ padding:var(--sp) 0; }
    /* .uu-hero est sorti de .uu-page : var(--sp) n'y est plus defini et la
       declaration entiere serait invalide. Valeurs litterales.
       Respiration doublee : a 40px le hero (344px) ne faisait que 1,02x les
       deux bandeaux cumules (337px) — il ne dominait pas la page. */
    .uu-hero{ padding:88px 10px 98px !important; }
    .uu-top{ padding:9px 8px 0; }   /* mobile : remonte, gouttiere fine */
    /* CTA : 44px de haut et 228px de large sur 390 d'ecran, c'etait enorme.
       NB : ces regles doivent vivre ICI et pas dans le bloc mobile du hero
       plus haut — a specificite egale, la definition de base (l.~423) est
       apres lui dans le fichier et l'emporterait. */
    .uu-hero__ctawrap{ margin-top:24px; }
    .uu-hero__cta{ height:41px; padding:0 18px; gap:7px; font-size:15px; }
    .uu-hero__cta svg{ width:17px; height:17px; }
    /* 138px entre la carte Perf et le titre Budget : 56 de bas de Perf
       + 56 de haut de #uuBud + les marges internes. On coupe le bas de Perf
       et on laisse #uuBud porter seul la respiration entre les deux. */
    .uu-perf-stage{ padding:var(--sp) calc(var(--gut) + 8px) !important; }
    /* marge sous les titres de section : une seule valeur (cf. --sp-t) */
    .uu-faq__h{ margin-bottom:var(--sp-t); }
    .faq-q{ padding:22px 4px; }
    .faq-a p{ padding:0 4px 22px; }

    /* 4. Tableau des actes — COMPACT.
       L'empilement precedent (nom sur une ligne, etat + prix + bouton sur la
       suivante) faisait des lignes de ~114px : quatre actes tenaient a peine
       dans l'ecran. On revient a UNE ligne par acte et c'est la LISTE qui
       glisse vers la droite quand la ligne deborde — la ligne d'un tableau
       est horizontale, elle doit le rester. Le debordement n'est pas force :
       `min-width:100%` + `width:max-content` ne declenchent l'ascenseur que
       si le contenu depasse vraiment. */
    .payex__head{ margin-bottom:12px; }
    .payex__note{ margin-bottom:12px; font-size:13px; }
    .payex__list{ padding:2px 0; overflow-x:auto; overscroll-behavior-x:contain;
      -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#DADCE0 transparent; }
    .payex__list::-webkit-scrollbar{ height:4px; }
    .payex__list::-webkit-scrollbar-thumb{ background:#DADCE0; border-radius:999px; }
    .payex__list::-webkit-scrollbar-track{ background:transparent; }
    /* Blocs et lignes prennent la largeur du CONTENU, pas celle du cadre :
       sans ca les filets des blocs s'arreteraient au bord visible et
       flotteraient au milieu du vide des qu'on pousse vers la droite. */
    .payex__bloc{ width:max-content; min-width:100%; }
    .payex__acte{ width:max-content; min-width:100%; height:auto; margin:0;
      padding:11px 16px; gap:12px; flex-wrap:nowrap; row-gap:0; align-items:center; }
    /* Largeur fixe du libelle : c'est lui qui decide de la hauteur de ligne.
       En `flex:1` il aurait pris toute la place et repousse l'etat hors champ. */
    .payex__main{ flex:0 0 auto; width:178px; min-width:0; }
    .payex__name{ font-size:14.5px; white-space:normal; overflow:visible; text-overflow:clip; }
    .payex__date{ margin-top:2px; font-size:12.5px; }
    .payex__right{ flex:0 0 auto; justify-content:flex-end; gap:12px; flex-wrap:nowrap; }
    .payex__tk{ order:0; height:22px; min-width:40px; font-size:11px; }
    .payex__status{ font-size:13px; }
    .payex__status .msr{ font-size:15px; }
    .payex__price{ font-size:15px; }
    .payex__doc{ display:inline-flex; height:30px; padding:0 10px; gap:5px; font-size:12px; margin-left:0; }
    .payex__doc svg{ width:13px; height:13px; }

    /* 5. Slider : la barre passe EN HAUT */
    /* le passage en flex (pour remonter la barre) mettait .swap__text à 0 de large :
       ses volets sont en absolu, rien ne le dimensionnait. */
    .swap__inner{ display:flex; flex-direction:column; }
    .swap__inner > *{ width:100%; flex:0 0 auto; }
    .swap__dots{ order:-1; margin:0 0 16px; }
    .swap__text{ width:100%; min-height:300px; }
    /* Plus de debord : .uu-swap est en overflow:hidden, tout ce qui sortait de
       sa boite etait rogne — c'est ce qui coupait le visuel. Avec --gut a 12px
       il n'y a plus rien a recuperer. */
    .swap__inner > .swap__media{ max-height:none; }
    .uu-bud__title{ margin-bottom:var(--sp-t); }

    /* Pas de scroll VERTICAL interne : un ascenseur dans l'ascenseur piegeait
       le doigt. L'ascenseur horizontal, lui, ne dispute rien au scroll de la
       page. L'animation reste liee au scroll de page et se joue en fondu seul
       (une translation serait rognee par le conteneur, cf. main.js). */
    .payex__list--stair .payex__bloc{ will-change:opacity; }

  }

  /* =====================================================================
     RÉVÉLATION MOBILE — pilotée par IntersectionObserver, pas par ScrollTrigger.
     Sur mobile la barre d'URL provoque des resize permanents : ScrollTrigger
     se rafraîchit en plein scroll et les tweens `scrub + once` restent
     coincés à opacity:0. IO ne dépend d'aucun recalcul de hauteur.
     ===================================================================== */
  .uu-r{ opacity:0; transform:translateY(26px);
    transition:opacity .5s var(--ease), transform .62s var(--ease); will-change:opacity,transform; }
  .uu-r.is-in{ opacity:1; transform:none; }
  .uu-r--d1{ transition-delay:.07s; } .uu-r--d2{ transition-delay:.14s; }
  .uu-r.is-forced{ opacity:1; transform:none; transition:none; }
  @media (prefers-reduced-motion:reduce){
    .uu-r{ opacity:1; transform:none; transition:none; }
  }

  /* Perf sur mobile : pas d'animation -> l'image devient un visuel unique en tête */
  @media (max-width:820px){
    .uu-perf-stage{ padding:32px 16px; gap:12px; }
    /* Meme choregraphie qu'en desktop, en vertical : l'image couvre toute la
       carte, puis se retracte en bandeau haut au scroll (cf. main.js).
       Elle est en absolu -> la hauteur de carte ne bouge pas pendant le
       mouvement (pas de reflow de la page sous les doigts). Le panneau
       reserve la place du bandeau final via son padding-top. */
    .uu-perf-card{ display:block; position:relative; overflow:hidden; }
    .uu-perf-media{ position:absolute; z-index:2; top:14px; left:14px; right:14px;
      bottom:auto; height:calc(100% - 28px); aspect-ratio:auto;
      border-radius:14px; overflow:hidden; }
    .uu-perf-media img{ width:100%; height:100%; object-fit:cover; border-radius:14px; }
    .uu-perf-panel{ padding:216px 22px 22px; }
  }