/* Design system CGT Schneider Electric (tokens de colors_and_type.css, polices hébergées dans /fonts) */
@import url('/fonts/fonts.css');

:root{
  --cgt-red:#F03E3E; --cgt-red-hover:#E03131; --cgt-red-deep:#C92A2A;
  --cgt-black:#212529; --cgt-yellow:#F2C230;
  --grey-0:#F8F9FA; --grey-1:#F1F3F5; --grey-2:#E9ECEF; --grey-3:#DEE2E6; --grey-4:#CED4DA; --grey-5:#ADB5BD; --grey-7:#495057;
  --fg-1:var(--cgt-black); --fg-2:var(--grey-7); --fg-3:var(--grey-5);
  --bg-page:#FFFFFF; --bg-soft:var(--grey-0); --bg-muted:var(--grey-1); --bg-card:#FFFFFF;
  --border-1:var(--grey-2); --border-2:var(--grey-4);
  --font-sans:'Satoshi','Helvetica Neue',Arial,sans-serif;
  --font-display:'Zodiak',Georgia,'Times New Roman',serif;
  --radius-1:3px; --radius-pill:999px;
  --logo:84px;            /* diamètre du logo rond */
  --bandeau:68px;         /* hauteur du bandeau (hors encoche) */
}
@media (prefers-color-scheme: dark){
  :root{ --bg-page:#1b1d1f; --bg-soft:#222528; --bg-muted:#26292c; --bg-card:#222528;
    --fg-1:#F5F6F7; --fg-2:var(--grey-4); --border-1:#34383b; --border-2:#3d4145; }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-weight:400;background:var(--bg-page);color:var(--fg-1);
  line-height:1.55;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
a{color:var(--cgt-red-deep)}
@media (prefers-color-scheme: dark){ a{color:#FF8787} }

/* ---------- bandeau : anthracite, filet rouge, logo rond qui déborde ---------- */
header.top{position:sticky;top:0;z-index:10;background:var(--cgt-black);color:#fff;
  min-height:calc(var(--bandeau) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 16px 0 calc(16px + var(--logo) + 14px);
  display:flex;align-items:center;border-bottom:4px solid var(--cgt-red)}
header.top .logo-rond{position:absolute;left:16px;top:calc(10px + env(safe-area-inset-top));
  width:var(--logo);height:var(--logo);border-radius:50%;display:block;
  box-shadow:0 6px 16px rgba(0,0,0,.35)}
header.top .titre{display:flex;flex-direction:column;line-height:1.1;padding:10px 0}
header.top .eyebrow{font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:1rem;color:var(--cgt-red);text-transform:lowercase;letter-spacing:.01em}
header.top h1{margin:2px 0 0;font-family:var(--font-sans);font-weight:900;font-size:clamp(1rem,4.5vw,1.25rem);letter-spacing:-.01em;white-space:nowrap}
header.top .titre{min-width:0}
header.top a.retour{margin-left:auto;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;opacity:.85}

main{max-width:640px;margin:0 auto;padding:40px 16px 16px}
.view{display:none}.view.active{display:block}
h2{font-family:var(--font-sans);font-weight:900;font-size:1.6rem;line-height:1.1;margin:8px 0 16px;letter-spacing:-.015em}
h2 em{font-family:var(--font-display);font-style:italic;font-weight:700;color:var(--cgt-red)}
h2::before{content:"";display:inline-block;width:12px;height:12px;background:var(--cgt-red);margin-right:10px;vertical-align:.12em}

/* ---------- appel à activer les notifications : encart rouge, bouton noir ---------- */
.banner{background:var(--cgt-red);color:#fff;border-radius:var(--radius-1);padding:18px;margin:0 0 24px}
.banner strong{display:block;font-weight:900;font-size:1.15rem;line-height:1.2}
.banner p{margin:6px 0 14px}
.banner .btn{background:var(--cgt-black)}
.banner .btn:hover{background:#000}

/* ---------- fil d'informations ---------- */
.card{background:var(--bg-card);border:1px solid var(--border-1);border-left:5px solid var(--cgt-red);
  border-radius:var(--radius-1);padding:14px 16px;margin:0 0 12px}
.card.alerte{border-left-color:var(--cgt-black);background:var(--bg-soft)}
@media (prefers-color-scheme: dark){ .card.alerte{border-left-color:var(--cgt-yellow)} }
.card h3{margin:0 0 4px;font-weight:900;font-size:1.1rem;line-height:1.25}
.card time{display:block;font-size:.8rem;color:var(--fg-3);margin-bottom:6px}
.card p{margin:0 0 8px;color:var(--fg-2)}
.card a.lien{font-weight:700;text-decoration:none}
.badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--cgt-red);color:#fff;border-radius:var(--radius-pill);padding:2px 10px;margin:0 0 6px}
.vide{color:var(--fg-3);padding:28px 0;text-align:center}

/* ---------- boutons, canaux, listes ---------- */
.btn{display:inline-block;background:var(--cgt-red);color:#fff;border:0;border-radius:var(--radius-1);
  font:700 1rem var(--font-sans);padding:12px 18px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--cgt-red-hover)}
.btn.sec{background:transparent;color:var(--fg-1);border:2px solid var(--fg-1)}
.btn[disabled]{opacity:.5;cursor:default}
.canal{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-1)}
.canal input{width:22px;height:22px;accent-color:var(--cgt-red)}
.canal label{flex:1;font-weight:700}.canal small{display:block;font-weight:400;color:var(--fg-2)}
.note{font-size:.88rem;color:var(--fg-2)}
ul.liens{list-style:none;padding:0;margin:0}
ul.liens li{padding:14px 0;border-bottom:1px solid var(--border-1)}
ul.liens a{color:var(--fg-1);font-weight:700;text-decoration:none}
ul.liens span{display:block;color:var(--fg-2);font-size:.9rem}
.install-ios{display:none;background:var(--cgt-black)}

/* ---------- bouton menu (☰) ---------- */
.burger{margin-left:auto;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:var(--radius-1)}
.burger:focus-visible{outline:2px solid #fff;outline-offset:2px}
.burger span,.burger span::before,.burger span::after{display:block;width:24px;height:3px;background:#fff;border-radius:2px;
  position:relative;transition:transform .2s,background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-8px}.burger span::after{top:8px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-8px) rotate(-45deg)}

/* ---------- menu qui glisse depuis la gauche ---------- */
.voile{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20;opacity:0;transition:opacity .25s}
.voile.ouvert{opacity:1}
.tiroir{position:fixed;top:0;bottom:0;left:0;z-index:30;width:min(82vw,320px);background:var(--cgt-black);color:#fff;
  transform:translateX(-102%);transition:transform .25s cubic-bezier(.2,.7,.2,1);visibility:hidden;
  display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
  box-shadow:4px 0 24px rgba(0,0,0,.35);overflow-y:auto}
.tiroir.ouvert{transform:none;visibility:visible}
.tiroir-tete{display:flex;align-items:center;gap:12px;padding:0 20px 18px;border-bottom:4px solid var(--cgt-red)}
.tiroir-tete img{width:56px;height:56px;border-radius:50%}
.tiroir-tete strong{display:block;font-weight:900;font-size:1.1rem;line-height:1.1}
.tiroir-tete .eyebrow{font-family:var(--font-display);font-style:italic;font-weight:700;color:var(--cgt-red)}
.tiroir ul{list-style:none;margin:12px 0;padding:0}
.tiroir li button{width:100%;display:flex;align-items:center;gap:14px;background:none;border:0;color:#fff;
  font:700 1.08rem var(--font-sans);padding:15px 20px;cursor:pointer;text-align:left;border-left:5px solid transparent}
.tiroir li button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tiroir li button:hover,.tiroir li button:focus-visible{background:rgba(255,255,255,.07);outline:none}
.tiroir li button.active{border-left-color:var(--cgt-red);background:rgba(240,62,62,.14);color:#fff}
.tiroir li button.active svg{color:var(--cgt-red)}
.tiroir-pied{margin:auto 20px 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}
.tiroir-pied a{color:var(--grey-4);text-decoration:none}
body.menu-ouvert{overflow:hidden}
@media (prefers-reduced-motion: reduce){ .tiroir,.voile,.burger span,.burger span::before,.burger span::after{transition:none} }

h3.sous-titre{font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-2);
  margin:26px 0 6px;padding-top:14px;border-top:1px solid var(--border-1)}

/* ---------- pages simples (documents, confidentialité, envoi) ---------- */
main.page h2{font-size:1.3rem;margin-top:24px}
main.page p{margin:0 0 12px}

/* ---------- page d'envoi ---------- */
form.admin label{display:block;font-weight:700;margin:14px 0 4px}
form.admin input[type=text],form.admin input[type=password],form.admin textarea,form.admin select{width:100%;padding:10px;
  border:1px solid var(--border-2);border-radius:var(--radius-1);font:inherit;background:var(--bg-card);color:var(--fg-1)}
form.admin textarea{min-height:90px}
.checks label{display:inline-flex;align-items:center;gap:6px;font-weight:400;margin:6px 14px 6px 0}
#resultat{margin-top:14px;padding:10px;border-radius:var(--radius-1);background:var(--bg-soft)}
h2 + h3.sous-titre{border-top:0;padding-top:0;margin-top:4px}