/* L'allure commune des pages « à la maison » : la page d'entrée et chaque travail.
   Pensée pour le téléphone d'abord — gros boutons, gros texte, une colonne. */
@import url("fonts/fonts.css");

:root{
  --fond:#0b0e14; --carte:#161c28; --carte-2:#1f2737;
  --trait:rgba(255,255,255,.11); --trait-fort:rgba(255,255,255,.24);
  --encre:#eef2f8; --doux:#aeb8c9; --accent:#4dd0e1; --accent-encre:#06222a;
  --soleil:#ffd166; --ok:#5fd47a; --ok-fond:#12301c; --ko:#ff7f7f; --ko-fond:#3a1a1c;
  --titre:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --texte:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--texte);font-size:18px;line-height:1.5;
     -webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
h1,h2{font-family:var(--titre);font-weight:600;margin:0;line-height:1.2;text-wrap:balance}
p{margin:0}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--soleil);outline-offset:2px}
[hidden]{display:none!important}

.ecran{max-width:520px;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;gap:14px;
       padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(22px + env(safe-area-inset-bottom,0px))}

.btn{min-height:56px;padding:12px 20px;border-radius:999px;border:2px solid var(--trait-fort);background:var(--carte-2);
     font-family:var(--titre);font-weight:600;font-size:1.1rem;transition:transform .08s;text-decoration:none;
     display:inline-flex;align-items:center;justify-content:center;text-align:center}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primaire{background:var(--accent);border-color:var(--accent);color:var(--accent-encre)}
.btn.primaire.pale{opacity:.55}
.btn.geant{min-height:64px;font-size:1.3rem;width:100%}
.btn.danger{background:var(--ko-fond);border-color:var(--ko);color:#ffd3d3}
.lien-discret{background:none;border:none;color:var(--doux);font-size:.9rem;text-decoration:underline;
     text-underline-offset:3px;padding:12px 8px;align-self:center}

.soustitre{color:var(--doux);font-weight:700}
.mention{color:var(--doux);font-size:.88rem}
.avertir{border-radius:14px;padding:10px 14px;font-weight:700;font-size:.92rem;line-height:1.4;
     background:var(--carte);border:1px solid var(--trait);color:var(--doux)}
.avertir.ko{background:var(--ko-fond);border-color:var(--ko);color:#ffd3d3}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:22px;padding:18px}

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