/* ==========================================================================
   relais.css — page relais des notifications de Pilotage (notif.corsicaia.fr)
   Variables de couleur et police reprises de pilotage/page.html et
   pilotage/appli/appli.css. Rendu sobre, façon Apple, clair et sombre.
   Conçu d'abord pour un téléphone de 375 px (et 320 px sans débordement).
   ========================================================================== */

:root{
  --fond:#f5f5f7; --carte:#ffffff; --texte:#1d1d1f; --doux:#6e6e73; --trait:#e5e5ea;
  --bleu:#0a66d8; --vert:#1a7f45; --jaune:#a86b00; --orange:#c2410c; --rouge:#c62828; --gris:#8e8e93;
  --fond-jaune:#fff4d6; --fond-orange:#ffe9dc;
  --bouton:#0a66d8;                       /* fond du bouton : texte blanc lisible (5,4:1) */
  --lisere-icone:transparent;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --fond:#000; --carte:#1c1c1e; --texte:#f5f5f7; --doux:#a1a1a6; --trait:#2c2c2e;
    --bleu:#4c9bff; --vert:#4cd17f; --jaune:#ffcc4d; --orange:#ff8a4c; --rouge:#ff6b6b; --gris:#8e8e93;
    --fond-jaune:#3a2f12; --fond-orange:#3d2215;
    --bouton:#0071e3;                     /* le bleu sombre de Pilotage (#4c9bff) ne donne que 2,7:1 sous du blanc ; #0071e3 = --bleu-plein d'appli.css (4,7:1) */
    --lisere-icone:rgba(255,255,255,.14); /* l'icône est sombre : un liseré la détache de la carte */ }
}

*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  min-height:100vh;min-height:100dvh;
  background:var(--fond);color:var(--texte);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

[hidden]{display:none !important}
h1,p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
h1:focus{outline:none}

/* Mise en page : la carte un peu au-dessus du centre, comme une feuille iOS. */
.relais{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;
  padding:calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
          calc(56px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.carte{
  width:100%;max-width:400px;
  background:var(--carte);
  border:1px solid var(--trait);border-radius:18px;
  padding:28px 22px 24px;
  text-align:center;
}
.icone{
  display:block;width:56px;height:56px;margin:0 auto 18px;
  border-radius:13px;
  box-shadow:0 0 0 1px var(--lisere-icone);
}

.ecran{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.ecran h1{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.ecran p{font-size:15.5px;max-width:34ch;overflow-wrap:break-word}
.ecran h1,.ecran p{text-wrap:balance}   /* pas de mot seul en fin de paragraphe */
.ecran .astuce{margin-top:4px;font-size:14px;line-height:1.4;color:var(--doux)}
.doux{color:var(--doux)}

/* Boutons : fins, cible tactile d'au moins 44 px. */
.actions{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:100%;margin-top:12px;
}
.principal{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:220px;max-width:100%;
  padding:0 22px;
  border:0;border-radius:11px;
  background:var(--bouton);color:#fff;
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;touch-action:manipulation;
  transition:filter .15s ease, opacity .15s ease;
}
.principal:active{filter:brightness(.94)}
.principal:disabled,.principal:disabled:hover{opacity:.55;cursor:default;filter:none}
/* Attente : le libellé « Activation… » doit rester lisible (jusqu'à 40 s) et montrer un signe de vie. */
.principal[aria-busy="true"]:disabled{opacity:1;cursor:progress}
.principal[aria-busy="true"]::before{
  content:"";flex:none;width:15px;height:15px;margin-right:9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:tourne .8s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}

.discret{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;max-width:100%;
  padding:0 14px;
  border:0;border-radius:10px;
  background:transparent;color:var(--bleu);
  font-size:14.5px;font-weight:500;
  cursor:pointer;touch-action:manipulation;
  transition:background-color .15s ease;
}
.discret:active{background:color-mix(in srgb,var(--bleu) 14%,transparent)}
.discret:disabled,.discret:disabled:hover{opacity:.5;cursor:default;background:transparent}
/* Survol : seulement avec une vraie souris (sur Android, :hover reste collé au doigt après un toucher). */
@media (hover:hover){
  .principal:hover{filter:brightness(1.07)}
  .principal:disabled:hover{filter:none}
  .discret:hover{background:color-mix(in srgb,var(--bleu) 8%,transparent)}
  .discret:disabled:hover{background:transparent}
}

/* Message sous le bouton (refus, échec) : sobre, centré, fond neutre (pas d'alarme). */
.message{
  width:100%;margin-top:2px;
  padding:10px 14px;border-radius:12px;
  background:var(--fond);color:var(--texte);
  font-size:14.5px !important;line-height:1.4;text-align:center;
  max-width:none !important;
}
@media (prefers-color-scheme: dark){ .message{background:#2c2c2e} }

/* Petits signes : coche verte du succès, point vert de l'état actif. */
.coche{
  position:relative;flex:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--vert);
}
.coche::after{
  content:"";position:absolute;left:8px;top:4.5px;
  width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
@media (prefers-color-scheme: dark){ .coche::after{border-color:#000} }

.etat{display:block}
.point{
  display:inline-block;width:8px;height:8px;margin-right:8px;
  border-radius:50%;background:var(--vert);
  vertical-align:.12em;
}

/* Très petit écran (320 px) : un peu plus serré. */
@media (max-width:359px){
  .carte{padding:24px 16px 20px;border-radius:16px}
  .principal{min-width:min(220px,100%)}
  .ecran h1{font-size:19.5px}
  .ecran p{font-size:15px}
}

@media (prefers-reduced-motion: reduce){
  .principal,.discret{transition:none}
  .principal[aria-busy="true"]::before{animation-duration:2.4s}
}