/* Site public lumeenah.fr — direction issue des maquettes du 11/09.
   Les images des thématiques vivent dans /img/themes, les logos partenaires
   dans /img/partners : elles étaient en base64 dans la maquette, ce qui aurait
   gonflé chaque page de plusieurs centaines de kilo-octets non cachables. */
/* Le noir a été retiré de la palette : l'encre est un lagon profond, les gris
   sont des gris-lagon et les fonds de section un sable chaud. Les seuls aplats
   sombres (pastilles, boutons pleins) passent par --profond, plus clair que
   l'encre : un aplat noir dans une page de bord de mer se voit comme un trou. */
:root{
  --ink:#0B3B45;     /* titres et texte courant — 12,2:1 sur blanc */
  --gray2:#4E6D76;   /* texte secondaire — 5,6:1 sur blanc, 5,1:1 sur sable */
  --gray:#517880;    /* légendes et libellés — 4,8:1 sur blanc */
  --profond:#0E5F73; /* aplats pleins — blanc dessus à 7,2:1 */
  --mist:#F8F4EC;    /* fonds de section : sable chaud, et non plus gris bleuté */
  --hair:#E2D9CA;    /* filets accordés au sable */
  --lagon:#00B4CC; --deep:#0A7EA4; --hibiscus:#FF2D87; --soleil:#FFC300;
  --mangue:#FF7A00; --feuille:#30C35A;
  /* Le rouge porte l'heure limite de retour : c'est la règle de sécurité, il
     doit rester lisible. #FF3B30 ne donnait que 3,6:1, sous le seuil AA. */
  --red:#C9361F;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
button{font-family:inherit;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--lagon);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
/* Le display:none que le navigateur applique à [hidden] vient de sa feuille par
   défaut : n'importe quelle règle d'auteur qui pose un display la bat. C'est ce
   qui arrivait au bloc des âges — .ages{display:grid} le rendait visible malgré
   son attribut hidden, d'où une pastille blanche vide sous le groupe. */
[hidden]{display:none!important}

img{max-width:100%}

/* ── Navigation ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:9;height:52px;display:flex;align-items:center;gap:36px;
  padding:0 max(24px,calc(50% - 490px));font-size:12px;background:rgba(253,250,244,.84);
  border-bottom:1px solid rgba(0,0,0,.06);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px)}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink);min-height:44px}
.logo-svg{height:17px;width:auto;display:block}
.nav .lk{text-decoration:none;color:var(--ink);display:flex;align-items:center;min-height:44px}
/* « FR » ou « EN » ne fait que 16px de large : la cible tactile serait sous
   le minimum de 24px, alors que la barre a la place. */
.nav .sp{margin-left:auto;min-width:44px;justify-content:center}
.mini .court{display:none}
.nav .mini{background:var(--profond);color:#fff;border-radius:980px;padding:6px 14px;font-size:12px;font-weight:500;text-decoration:none}

.pill{display:inline-block;border-radius:980px;padding:13px 24px;font-size:17px;background:var(--deep);color:#fff;text-decoration:none}
.tlink{color:var(--deep);font-size:17px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.tlink:after{content:"\00a0›"}

/* ── Hero ───────────────────────────────────────────────────── */
/* Le fond du héros n'est plus une nappe abstraite mais un horizon : ciel,
   lagon, sable, et le soleil posé en haut à droite. Tout reste très clair —
   c'est un décor derrière un titre, pas une image. */
.hero{background:
    radial-gradient(46% 40% at 82% 2%,rgba(255,195,0,.26),transparent 68%),
    radial-gradient(60% 42% at 10% 10%,rgba(0,180,204,.16),transparent 72%),
    linear-gradient(180deg,#F1FAFC 0%,#E6F5FA 26%,#F7F2E6 70%,#FDFAF4 100%);
  text-align:center;padding:96px 24px 0;overflow:hidden}
.hero h1{font-size:96px;font-weight:700;letter-spacing:-.045em;line-height:.98}
/* Le dégradé part de l'encre elle-même et s'éclaircit vers le lagon : la
   seconde ligne prolonge la première au lieu de lui répondre. Les versions
   rose, orchidée ou corail juraient toutes avec le vert profond des titres, et
   tout ce qui traverse le turquoise vers l'orange passe par le gris. Le dernier
   arrêt s'arrête à #0B99AC et non au lagon vif : celui-ci ne tient que 2,3:1
   sur le ciel du héros, sous le seuil AA des grands caractères. C'est la borne
   du turquoise sur un fond aussi clair — au-delà, le titre cesse d'être
   lisible. */
.hero h1 span{display:block;background:linear-gradient(90deg,#0B3B45,#0C8FA6 50%,#0B99AC);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:6px}
.hero p{font-size:24px;color:var(--gray2);margin:22px auto 0;max-width:34ch;line-height:1.3;letter-spacing:-.015em}
.hero .actions{display:flex;gap:26px;justify-content:center;align-items:center;margin:34px 0 64px;flex-wrap:wrap}
.hero .stage{height:520px;display:flex;justify-content:center}

/* ── Sections ───────────────────────────────────────────────── */
.statement{padding:120px 24px 110px;text-align:center}
.statement h2{font-size:64px;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.statement h2 span{color:var(--gray)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;max-width:980px;margin:80px auto 0;text-align:left}
.trio .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.trio svg{width:24px;height:24px}
.trio h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
.trio p{font-size:17px;color:var(--gray2);margin-top:8px;line-height:1.45}

.feature{background:var(--mist);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;
  padding:110px max(24px,calc(50% - 490px))}
.feature .k{font-size:21px;font-weight:600;color:var(--hibiscus);letter-spacing:-.01em}
.feature h2{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-top:8px}
.feature p{font-size:21px;color:var(--gray2);margin-top:20px;line-height:1.4;max-width:30ch}
.feature .stage{display:flex;justify-content:center}

/* ── Boîtier 4G ─────────────────────────────────────────────── */
/* La seule bande sombre de la page : le matériel se détache du reste, et le
   fond lagon profond est celui de l'encre — la page ne gagne pas une couleur,
   elle en retourne une. */
.boitier{background:linear-gradient(155deg,#06262E,#0B3B45 52%,#0E5F73);color:#fff;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;
  padding:110px max(24px,calc(50% - 490px))}
.boitier .k{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;color:var(--lagon)}
.bientot{border:1px solid rgba(255,255,255,.34);border-radius:980px;padding:3px 11px;
  font-size:12px;font-weight:500;color:rgba(255,255,255,.88)}
.boitier h2{font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-top:14px}
.boitier p{font-size:19px;color:rgba(255,255,255,.78);margin-top:18px;max-width:36ch;line-height:1.45}
.pts{list-style:none;margin-top:36px;display:grid;gap:16px;max-width:40ch}
.pts li{border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
.pts b{display:block;font-size:16px;font-weight:600}
.pts span{display:block;font-size:14px;color:rgba(255,255,255,.7);margin-top:2px}
.boitier .stage{display:flex;justify-content:center}
.boitier svg{width:330px;height:auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.34))}

/* ── Journée type ───────────────────────────────────────────── */
.day{background:#fff;padding:110px max(24px,calc(50% - 520px)) 120px}
.day h2{font-size:56px;font-weight:700;letter-spacing:-.04em;text-align:center}
.day p.sub{text-align:center;color:var(--gray2);font-size:21px;margin:14px 0 70px}
.band{position:relative;height:140px}
.axis{position:absolute;left:0;right:0;top:92px;height:1px;background:var(--hair)}
/* Hauteur minimale et non fixe : « Navette 40 min » ou « 45 min de marge »
   passent à la ligne dans les créneaux étroits, et une hauteur figée les
   coupait. Le pavé grandit vers le bas sans atteindre l'axe, posé à 92px. */
.seg{position:absolute;top:24px;left:calc(var(--l)*1%);width:calc(var(--w)*1%);
  min-height:58px;border-radius:16px;padding:10px 12px;font-size:12px;line-height:1.25}
.seg b{display:block;font-size:13px;font-weight:600}
.seg i{display:none} /* l'heure ne sert qu'à la lecture verticale */
.seg.a{background:var(--lagon)}
.seg.m{background:var(--soleil)}
.seg.t{background:#EFE8DC;color:var(--gray2)}
.seg.r{background:#fff;box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red)}
.deadline{position:absolute;top:10px;left:calc(var(--l)*1%);height:92px;width:1.5px;background:var(--red)}
/* L'étiquette se range à gauche du trait au lieu de l'enjamber : centrée, elle
   débordait de la page entre 960 et 1100px de fenêtre, là où le trait touche
   déjà le bord de la frise. */
.deadline span{position:absolute;top:-26px;right:6px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--red)}
.deadline i{font-style:normal;margin-right:6px}
.ticks{position:absolute;left:0;right:0;top:104px;display:flex;justify-content:space-between;font-size:12px;color:var(--gray)}
.day .example{text-align:center;color:var(--gray);font-size:13px;margin-top:28px}

/* ── Thématiques ────────────────────────────────────────────── */
.themes{padding:120px max(24px,calc(50% - 520px));background:var(--mist)}
.themes h2{font-size:56px;font-weight:700;letter-spacing:-.04em;text-align:center}
.themes .row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px}
.themes .sub{text-align:center;color:var(--gray2);font-size:21px;margin-top:14px}
.themes a,.themes .cap{text-decoration:none;display:block}
.shot{aspect-ratio:4/5;border-radius:24px;position:relative;overflow:hidden}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Le libellé est posé sur la photo : c'est le geste qui fait basculer la page
   du logiciel vers le voyage. Le voile sombre n'est pas décoratif — sans lui,
   du blanc sur une plage surexposée devient illisible. */
.themes .cap .shot:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,32,40,0) 22%,rgba(4,32,40,.52) 56%,rgba(4,32,40,.92) 100%)}
.themes .cap .shot img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.themes .cap:hover .shot img{transform:scale(1.045)}
.over{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}
.over h3{font-size:22px;font-weight:600;letter-spacing:-.025em}
.over p{font-size:14px;color:#fff;margin-top:3px;line-height:1.35}
.over em{font-style:normal;display:block;font-size:13px;font-weight:600;margin-top:8px}

/* ── Plein cadre ────────────────────────────────────────────── */
.vue{padding:0 max(24px,calc(50% - 520px)) 120px;background:#fff}
.vue figure{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:21/9}
.vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vue figcaption{position:absolute;inset:auto 0 0 0;padding:44px 40px 34px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(4,32,40,.72))}
.vue b{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;max-width:22ch}
.vue span{display:block;font-size:15px;color:rgba(255,255,255,.82);margin-top:10px}

/* ── Stands ─────────────────────────────────────────────────── */
.shops{padding:120px max(24px,calc(50% - 490px));display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.shops h2{font-size:48px;font-weight:700;letter-spacing:-.035em;line-height:1.08}
.shops p{font-size:19px;color:var(--gray2);margin-top:18px;line-height:1.45}
.shop{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--hair)}
.shop:first-child{border-top:1px solid var(--hair)}
.thumb{width:72px;height:72px;border-radius:16px;object-fit:cover;background:var(--mist)}
.shop b{font-size:17px;font-weight:600}
.shop small{display:block;font-size:14px;color:var(--gray2);margin-top:2px}
.shop em{font-style:normal;font-size:14px;color:var(--deep)}

.join{background:var(--mist);text-align:center;padding:100px 24px}
.join h2{font-size:48px;font-weight:700;letter-spacing:-.035em}
.join p{font-size:21px;color:var(--gray2);margin:14px auto 30px;max-width:40ch}

/* ── Pied de page ───────────────────────────────────────────── */
footer{background:var(--mist);padding:0 max(24px,calc(50% - 490px)) 28px;font-size:12px;color:var(--gray2)}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--hair);padding:26px 0}
footer b{display:block;color:var(--ink);font-weight:600;margin-bottom:8px}
footer span{display:block;line-height:1.9}
footer a{display:flex;align-items:center;min-height:24px;text-decoration:none}
footer .legal{border-top:1px solid var(--hair);padding-top:16px;display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap}
.sign{display:flex;align-items:center;gap:12px;color:var(--ink)}
.sign .logo-svg{height:14px}
.sign small{font-size:12px;color:var(--gray2)}
.thanks{display:flex;align-items:center;gap:16px}
.thanks small{font-size:12px;color:var(--gray2)}
.logo-slot{height:52px;display:flex;align-items:center;justify-content:center;padding:4px 10px;background:#fff;border-radius:8px}
.logo-slot img{height:44px;width:auto;display:block}

/* ── Maquette de téléphone (illustration) ───────────────────── */
.phone{width:300px;height:640px;border-radius:56px;padding:10px;
  background:linear-gradient(145deg,#8E8E93,#3A3A3C 30%,#1C1C1E 70%,#636366);
  box-shadow:0 40px 80px rgba(0,0,0,.25);flex-shrink:0}
.scr{width:100%;height:100%;border-radius:47px;overflow:hidden;background:#F3F0E9;position:relative;display:flex;flex-direction:column}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:92px;height:27px;border-radius:20px;background:#000;z-index:3}
.sb{display:flex;justify-content:space-between;padding:16px 28px 0;height:48px;font-size:14px;font-weight:600}
.pad{padding:2px 16px 0;flex:1}
.lt{font-size:31px;font-weight:700;letter-spacing:-.035em;margin:4px 4px 12px}
.live{display:flex;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:14px}
.live svg{width:64px;height:64px;flex-shrink:0}
.live small{font-size:12px;color:var(--gray2)}
.live strong{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em}
.ev{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:#fff;border-radius:18px;margin-top:8px}
.ev .gi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ev .gi svg{width:19px;height:19px}
.ev .t{font-size:12px;color:var(--gray2)}
.ev b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ev p{font-size:13px;color:var(--gray2)}
.ev.ret b{color:var(--red)}
.ringwrap{position:relative;width:210px;height:210px;margin:6px auto 4px}
.ringwrap svg{width:100%;height:100%}
.ringtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ringtxt small{font-size:13px;color:var(--gray2)}
.ringtxt strong{font-size:48px;font-weight:700;letter-spacing:-.045em;line-height:1}
.ringtxt span{font-size:13px;color:var(--gray2);margin-top:4px}
.mapc{height:120px;border-radius:20px;background:#CDEFF3;position:relative;overflow:hidden;margin-top:10px}
.mapc .rd{position:absolute;background:#fff}
.mapc .rt{position:absolute;left:40px;top:28px;width:180px;height:62px;border:4px solid var(--deep);
  border-left:0;border-bottom:0;border-radius:0 40px 0 0}
.pin{position:absolute;width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* ── Pages intérieures ─────────────────────────────────────── */
.inner{max-width:980px;margin:0 auto;padding:72px 24px 96px}
.inner h1{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.inner .lead{font-size:21px;color:var(--gray2);margin-top:16px;max-width:60ch;line-height:1.4}
.empty{color:var(--gray2);font-size:19px;margin-top:40px}
.cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:24px;margin-top:56px}
.cards a{display:block;text-decoration:none}
.cards .shot{aspect-ratio:3/2;border-radius:20px;background:var(--mist)}

/* Une fiche peut être publiée sans photo. Le cadre resterait alors un rectangle
   crème, que l'œil lit comme une image qui n'a pas chargé — un défaut, pas une
   absence. Le dégradé et le sigle en filigrane disent que c'est voulu. */
.cards .shot.vide{background:linear-gradient(135deg,#DCEEF1,#F8F4EC 64%);
  display:flex;align-items:center;justify-content:center}
.cards .shot.vide:after{content:"LH";font-size:30px;font-weight:700;
  letter-spacing:-.04em;color:var(--lagon);opacity:.34}
.cards h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:14px}
.cards p{font-size:15px;color:var(--gray2);margin-top:4px;line-height:1.45}
.meta{display:flex;gap:12px;font-size:14px;color:var(--deep);margin-top:10px;flex-wrap:wrap}

.fiche{max-width:820px;margin:0 auto;padding:72px 24px 96px}
.fiche h1{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.fiche .lead{font-size:21px;color:var(--gray2);margin-top:18px;line-height:1.45}
.gallery{display:grid;gap:14px;margin-top:40px}
.gallery img{border-radius:20px;width:100%}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:28px;margin-top:48px;
  border-top:1px solid var(--hair);padding-top:36px}
.facts dt{font-size:13px;color:var(--gray);text-transform:uppercase;letter-spacing:.04em}
.facts dd{font-size:19px;font-weight:600;margin-top:4px;letter-spacing:-.02em}

.defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.calls{width:100%;min-width:460px;border-collapse:collapse;margin-top:48px}
table.calls th{text-align:left;font-size:13px;color:var(--gray);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;padding:0 12px 12px 0;border-bottom:1px solid var(--hair)}
table.calls td{padding:18px 12px 18px 0;border-bottom:1px solid var(--hair);font-size:17px}
table.calls .ship{font-weight:600}
table.calls .back{color:var(--red);font-weight:600}

/* Une frise horaire lue de gauche à droite réclame 860px. Plutôt que de la
   faire défiler — un défilement horizontal se remarque mal et se manipule mal —
   elle se déplie en liste verticale sous 960px : l'heure passe devant, la durée
   n'est plus portée par la largeur mais par le texte, et la journée se lit du
   haut vers le bas comme un programme. */
@media (max-width:960px){
  .day{padding-bottom:90px}
  .day p.sub{margin-bottom:40px}
  .band{height:auto;display:grid;gap:8px;padding-left:20px;
    border-left:2px solid var(--hair);margin-left:6px}
  .axis,.ticks{display:none}
  .seg{position:static;width:auto;height:auto;padding:12px 14px;border-radius:14px;
    display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:baseline}
  .seg i{display:block;font-style:normal;font-size:13px;font-weight:600}
  .seg.t{opacity:.9}
  .deadline{position:static;width:auto;height:auto;background:none;margin-top:6px}
  .deadline span{position:static;transform:none;display:grid;grid-template-columns:58px 1fr;
    gap:12px;align-items:baseline;padding:12px 14px;border-radius:14px;
    box-shadow:inset 0 0 0 1.5px var(--red);background:#FCEFEC;
    white-space:normal;font-size:14px}
  .deadline i{margin-right:0;font-weight:600}
}

/* La maquette de téléphone a une largeur fixe : à 320px d'écran, ses 300px
   plus les marges de la rubrique débordaient. */
@media (max-width:380px){
  .phone{width:268px;height:572px;border-radius:50px}
  .scr{border-radius:42px}
  .hero .stage{height:460px}
}

@media (max-width:900px){
  .hero h1{font-size:54px}
  .statement h2,.feature h2,.day h2,.themes h2,.boitier h2,.inner h1,.fiche h1{font-size:40px}
  .trio,.feature,.shops,.boitier{grid-template-columns:1fr}
  .boitier svg{width:220px}
  .themes .row{grid-template-columns:1fr 1fr}
  .vue figure{aspect-ratio:4/3}
  .vue figcaption{padding:32px 24px 24px}
  .vue b{font-size:26px}
  /* Les respirations de 110 à 120px sont taillées pour une page large ; sur un
     téléphone, deux rubriques qui se suivent laissaient jusqu'à 240px de vide
     entre une image et le titre suivant. */
  .hero{padding-top:64px}
  .statement{padding:76px 24px 64px}
  .trio{margin-top:48px;gap:40px}
  .feature,.boitier,.shops,.themes{padding-block:72px}
  .shops{gap:40px}
  .day{padding-top:72px}
  .vue{padding-bottom:72px}
  .themes .row{margin-top:36px}
  .join{padding-block:72px}
  footer .cols{grid-template-columns:1fr 1fr}
  /* Les rubriques sortent de la barre, mais pas le changement de langue : le
     site est bilingue, et le passager n'a pas d'autre moyen d'en changer. */
  .nav{gap:14px;padding:0 16px}
  .nav .lk:not(.sp){display:none}
  .mini .long{display:none}
  .mini .court{display:inline}
}
@media (max-width:700px){
  .hero{padding-top:56px}
  .statement{padding:60px 24px 52px}
  .feature,.boitier,.shops,.themes,.join{padding-block:56px}
  .day{padding-top:56px;padding-bottom:56px}
  .vue{padding-bottom:56px}
  .themes .row{grid-template-columns:1fr;gap:14px}
  .themes .cap .shot{aspect-ratio:16/10}
  .over{left:22px;right:22px;bottom:20px}
  .over h3{font-size:24px}
  .over p{font-size:15px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ── Rappel de la journée en cours ───────────────────────────── */
/* Flottant plutôt qu'en tête de page : il suit le passager sur toute la
   navigation sans repousser le contenu, et le décalage bas tient compte de la
   barre d'adresse des navigateurs mobiles, qui recouvre les derniers pixels. */
.rappel{position:fixed;right:max(16px,env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;
  background:var(--profond);color:#fff;text-decoration:none;
  box-shadow:0 10px 30px rgba(4,32,40,.28);font-size:14px;font-weight:600}
.rappel-t{opacity:.82;font-weight:500}
.rappel-r{font-variant-numeric:tabular-nums;font-size:16px}
.rappel.urgent{background:var(--red)}
.rappel:hover{transform:translateY(-1px)}

@media (max-width:520px){
  .rappel{left:max(16px,env(safe-area-inset-left));justify-content:center}
}

@media (prefers-reduced-motion:no-preference){
  .rappel{transition:transform .2s ease,background .3s ease}
}