/* =============================================================================
   Porte +18 (/age) — page autonome, hors gabarit du site.
   ============================================================================= */

html, body { margin: 0; padding: 0; background: #000; }
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; color: #fff; }

body.porte {
  background: #000 url("/images/decors/decor18.jpg") center / cover no-repeat fixed;
  font-family: Arial, Helvetica, sans-serif;
}
.porte-cadre {
  box-sizing: border-box; width: min(640px, calc(100% - 32px)); margin: 24px auto; padding: 28px 24px 32px;
  background: rgba(0, 0, 0, .85); border-radius: 20px; text-align: center;
}
.porte-logo { display: block; width: min(300px, 80%); height: auto; margin: 0 auto 8px; }
.porte-langues { margin: 0 0 18px; font-size: 14px; }
.porte-langues a { display: inline-block; margin: 0 6px; padding: 2px 6px; color: #fff; font-weight: bold; text-decoration: none; border-radius: 3px; }
.porte-langues a[aria-current="true"] { background: rgba(255, 255, 255, .2); }
.porte h1 { margin: 0 0 14px; font-size: 26px; line-height: 1.2; text-transform: uppercase; color: #fcf7b6; }
.porte-texte { margin: 0 0 26px; font-size: 17px; line-height: 1.45; }
.porte-erreur { margin: 0 0 20px; color: #ff9fc8; font-weight: bold; }
.porte-choix { display: flex; flex-wrap: wrap; gap: 18px 22px; justify-content: center; margin: 0; }
.pilule {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border: 2px solid #000; border-radius: 30px; background: #fcf7b6; color: #000; cursor: pointer;
  font: 900 18px "Arial Black", Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none;
  box-shadow: -6px 6px 0 #faada3;
}
.pilule:hover { background: #fffbd0; }
.pilule:active { transform: translate(-2px, 2px); box-shadow: -4px 4px 0 #faada3; }
.pilule:focus-visible { outline: 3px solid #ff9fc8; outline-offset: 4px; }
.pilule-sortir { background: #2b2b2b; color: #fff; border-color: #fcf7b6; box-shadow: -6px 6px 0 #555; }
.pilule-sortir:hover { background: #3a3a3a; }