/* Fenêtre « Être prévenu » (demande de Franck, 05/10) : même recette que les fenêtres de l'app
   (TRNRWorkoutExitOverlay, validées le 2026-09-28) : page floutée et assombrie de 20 % derrière, panneau de
   verre teinté ardoise aux coins de 30, titre à deux tons (dernier mot en or), bouton principal « Relief » or,
   arrivée en 0,28 s depuis 94 %. Précision de Franck : fond flouté comme un portrait en gros plan, fenêtre en
   VERRE transparent au premier plan, rien d'autre (« en verre », pas « en vert »).
   REFUSÉ par Franck : toute déformation de la page (ondulation, loupe), le vert.
   Noms de classes neutres : les bloqueurs de publicité de Safari masquent « popup », « newsletter »… */
:root{--fen-accent:#c6a052;--fen-ardoise:#171c22}
html.fen-ouverte{overflow:hidden}
/* La page derrière se floute comme l'arrière-plan d'un portrait, en même temps que la fenêtre arrive. */
html.fen-ouverte body{filter:blur(0);transition:filter 280ms ease-in-out}
html.fen-floue body{filter:blur(6px)} /* 6 : le flou des fenêtres de l'app (14 jugé trop fort par Franck) */
html.fen-ouverte.fen-ferme body{transition-duration:320ms;transition-timing-function:ease-out}

.fen-voile{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:rgba(0,0,0,0);
 transition:background-color 280ms ease-in-out;-webkit-tap-highlight-color:transparent}
.fen-voile[hidden]{display:none}
.fen-voile.fen-visible{background:rgba(0,0,0,.2)}
.fen-panneau{position:relative;width:100%;max-width:380px;padding:28px 24px 14px;border-radius:30px;color:#f4f4f1;
 font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
 background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)),rgba(30,38,48,.30);
 -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 0 .5px rgba(255,255,255,.09),0 30px 70px rgba(0,0,0,.42);
 opacity:0;scale:.94;transition:opacity 280ms ease-in-out,scale 280ms ease-in-out}
.fen-visible .fen-panneau{opacity:1;scale:1}
/* Sur iPhone, le panneau reçoit la main à l'ouverture (sans faire surgir le clavier) : pas de contour bleu de Safari. */
.fen-panneau:focus,.fen-panneau:focus-visible{outline:none}
.fen-voile.fen-ferme,.fen-voile.fen-ferme .fen-panneau{transition-duration:320ms;transition-timing-function:ease-out}

.fen-fermer{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;border:0;padding:0;background:none;cursor:pointer;color:#fff}
.fen-fermer span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.05);
 box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
.fen-fermer svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.fen-titre{margin:0;padding-right:36px;font-size:25px;line-height:1.12;font-weight:900;font-style:italic;letter-spacing:-.5px;color:#f4f4f1}
.fen-titre b{font-weight:900;color:var(--fen-accent)}
.fen-texte{margin:8px 0 0;font-size:15px;line-height:1.45;color:#b4bdc7}
.fen-champ{display:block;width:100%;height:52px;margin-top:22px;padding:0 18px;border:0;border-radius:17px;outline:none;
 font:500 16px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#f4f4f1;background:rgba(255,255,255,.07);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.19);transition:box-shadow 160ms ease}
.fen-champ::placeholder{color:#97a1ad}
/* Texte sélectionné (Safari sélectionne l'adresse qu'il vient de remplir) : teinte or au lieu du rectangle blanc. */
.fen-champ::selection{background:rgba(198,160,82,.38);color:#fff;-webkit-text-fill-color:#fff}
/* Remplissage automatique de Safari : il peint le champ en jaune. On garde la couleur du verre (Franck : « ça fait moche »). */
.fen-champ:-webkit-autofill,.fen-champ:-webkit-autofill:hover,.fen-champ:-webkit-autofill:focus{
 -webkit-text-fill-color:#f4f4f1;caret-color:#f4f4f1;-webkit-box-shadow:inset 0 0 0 100px #2b333d,inset 0 1px 0 rgba(255,255,255,.19);
 box-shadow:inset 0 0 0 100px #2b333d,inset 0 1px 0 rgba(255,255,255,.19);transition:background-color 99999s}
.fen-champ:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 100px #2b333d,inset 0 1px 0 rgba(255,255,255,.19),0 0 0 2px rgba(198,160,82,.6);
 box-shadow:inset 0 0 0 100px #2b333d,inset 0 1px 0 rgba(255,255,255,.19),0 0 0 2px rgba(198,160,82,.6)}
.fen-champ:focus{box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 0 0 2px rgba(198,160,82,.6)}
.fen-erreur .fen-champ{box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 0 0 2px rgba(224,90,71,.7)}
.fen-action{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:10px;border:0;border-radius:17px;cursor:pointer;
 font:italic 900 14px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:-.3px;text-transform:uppercase;
 color:var(--fen-ardoise);background:var(--fen-accent);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 12px rgba(0,0,0,.27);transition:scale 120ms ease-out,opacity 160ms ease}
.fen-action:active{scale:.98}
.fen-action:disabled{opacity:.6;cursor:default}
.fen-message{min-height:20px;margin:10px 2px 0;font-size:13px;line-height:1.4;color:#97a1ad}
.fen-erreur .fen-message{color:#ee8a7c}
.fen-note{margin:4px 2px 0;font-size:12px;line-height:1.4;color:#97a1ad}
.fen-note a{color:#c9d1d9;text-underline-offset:2px}
.fen-champ:focus-visible,.fen-action:focus-visible,.fen-fermer:focus-visible span{outline:2px solid var(--fen-accent);outline-offset:3px}

@media(prefers-reduced-motion:reduce){.fen-panneau{scale:1;transition:opacity 200ms ease}}
@media(prefers-reduced-transparency:reduce){.fen-panneau{background:#26303b;-webkit-backdrop-filter:none;backdrop-filter:none}
 html.fen-floue body{filter:none}.fen-voile.fen-visible{background:rgba(0,0,0,.6)}}