/* =============================================================================
   Page d'entree des demonstrations blueteam.
   Meme systeme graphique que le site, mais une page unique et autonome : elle
   est servie directement par Apache, sans application derriere.
   ============================================================================= */
@font-face{font-family:'Plex Sans';src:url('/static/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/static/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight:600;font-display:swap}
@font-face{font-family:'Plex Cond';src:url('/static/fonts/IBMPlexSansCondensed-Bold.woff2') format('woff2');
  font-weight:700;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/static/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight:400;font-display:swap}

:root{
  --navy:#0b1f33; --blue:#1157b8; --blue-2:#4f93e8; --tint:#eaf1fa;
  --grey:#55647a; --grey-2:#8a97a8; --rule:#d8dfe8; --fond:#f5f7fa;
  --disp:'Plex Cond','Plex Sans',Arial,sans-serif;
  --body:'Plex Sans',Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--navy);font-family:var(--body);
  font-size:1rem;line-height:1.55}
h1,h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0}
p{margin:0}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.bandeau{background:#fff3d4;border-bottom:1px solid #e6d09a;color:#6b5312;
  padding:.55rem 1.25rem;font-size:.82rem;text-align:center}
.bandeau b{color:#4d3c0c}

.tete{background:var(--navy);display:flex;align-items:center;gap:1.5rem;
  padding:.85rem clamp(1.25rem,5vw,3rem);flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff}
.logo svg{width:2rem;height:2rem}
.wm{font-family:var(--disp);font-size:1.4rem;font-weight:700;letter-spacing:-.035em}
.wm .b{color:var(--blue-2)}
.retour{margin-left:auto;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:#8ea2b8;text-decoration:none}
.retour:hover{color:#fff}

main{max-width:72rem;margin-inline:auto;padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) 4rem}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.75rem}
.intro h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);max-width:20ch}
.intro h1 em{color:var(--blue);font-style:normal;display:block}
.lede{margin-top:1.25rem;font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:var(--grey);
  max-width:62ch;line-height:1.5}

.choix{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:2.75rem}
/* Toute la carte est cliquable : c'est la seule action de la page. */
.demo{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);
  border-top:4px solid var(--blue);padding:1.5rem;text-decoration:none;color:inherit}
.demo:hover{border-color:var(--blue);box-shadow:0 2px 16px rgba(11,31,51,.08)}
.demo .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue)}
.demo h2{font-size:1.5rem;margin:.5rem 0 .6rem}
.quoi{color:var(--grey);font-size:.95rem}
.demo ul{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.45rem;flex:1}
.demo li{font-size:.9rem;color:var(--grey);padding-left:1.1rem;position:relative;line-height:1.4}
.demo li::before{content:'';position:absolute;left:0;top:.5rem;width:.4rem;height:.4rem;
  background:var(--blue-2)}
.ouvrir{display:inline-block;margin-top:1.5rem;font-family:var(--mono);font-size:.82rem;
  background:var(--blue);color:#fff;border:2px solid var(--blue);padding:.6rem 1rem;
  text-align:center}
.demo:hover .ouvrir{background:var(--navy);border-color:var(--navy)}
.mdp{margin-top:.6rem;font-size:.78rem;color:var(--grey-2);text-align:center}
.mdp code{font-family:var(--mono);background:var(--tint);color:var(--grey);padding:.05rem .3rem}

.note{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.9rem;color:var(--grey);max-width:76ch}
.note b{color:var(--navy);font-weight:600}
.note .mt{margin-top:.9rem;font-family:var(--mono);font-size:.78rem}

@media (max-width:52rem){
  .choix{grid-template-columns:1fr}
}