/* ================================================
   GLOBAL CSS
   Styles de base appliqués à tout le site.
   S'appuie sur les variables de variables.css
   ================================================ */

/* --- Polices personnalisées --- */

@font-face {
  font-family: 'lchan';
  src: url('../fonts/lchan.woff2') format('woff2'),
       url('../fonts/lchan.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chomsky';
  src: url('../fonts/Chomsky.woff2') format('woff2'),
       url('../fonts/Chomsky.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Base du document --- */

body {
  font-family: var(--police-base);
  font-size: var(--taille-base);
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  background: radial-gradient(
    ellipse at bottom right,
    var(--gris-moyen) 0%,
    var(--gris-fonce) 100%
  );
  background-attachment: fixed;
  min-height: 100vh;
}

main{
	flex:1; /* prend tout l'espace disponible */
}

/* --- Typographie --- */

h1 {
  font-size: var(--taille-titre);
  color: var(--rouge);
  margin-bottom: var(--espace-l);
}

h2 {
  font-size: 18px;
  color: var(--rouge);
  margin-bottom: var(--espace-m);
  padding-bottom: var(--espace-s);
  border-bottom: 1px solid var(--blanc-discret);
}

h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: var(--espace-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

p {
  line-height: 1.8;
  color: var(--blanc-doux);
  margin-bottom: var(--espace-m);
}

/* --- Liens --- */

a {
  color: var(--blanc);
  text-decoration: underline;
  text-decoration-color: var(--blanc);
  transition: color var(--transition),
              text-decoration-color var(--transition);
}

a:hover {
  color: var(--rouge);
  text-decoration-color: var(--rouge);
}

a:visited {
  color: var(--blanc);
  text-decoration-color: var(--orange);
}

/* --- Composants réutilisables --- */

/* Carte rouge arrondie — bannière RGPD, sidebar */
.rouge {
  background: var(--rouge-fonce);
  padding: var(--espace-l) var(--espace-xl);
  border-radius: var(--rayon-rouge);
  color: var(--blanc);
}

/* Champ de saisie */
.input {
  width: 100%;
  padding: 12px var(--espace-m);
  border-radius: var(--rayon-standard);
  border: 1px solid #444;
  background: #111;
  color: var(--blanc);
  font-size: 15px;
  outline: none;
  transition: border var(--transition);
}

.input:focus {
  border-color: var(--rouge);
}

/* Bouton action principal */
.btn-action {
  padding: 12px var(--espace-l);
  background: var(--rouge);
  color: var(--blanc);
  border-radius: var(--rayon-standard);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  display: inline-block;
}

.btn-action:hover {
  background: #cc1a08;
  color: var(--blanc);
  text-decoration: none;
}

.btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bouton secondaire — style formulaire RGPD */
.btn-secondaire {
  display: block;
  width: 100%;
  padding: 12px var(--espace-m);
  border: 1px solid var(--blanc-discret);
  background: rgba(255,255,255,0.05);
  color: var(--blanc-doux);
  font-size: 13px;
  border-radius: var(--rayon-standard);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition),
              border-color var(--transition),
              color var(--transition);
}

.btn-secondaire:hover {
  background: rgba(255, 33, 10, 0.2);
  border-color: var(--rouge);
  color: var(--blanc);
  text-decoration: none;
}

.btn-secondaire.actif {
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--blanc);
  font-weight: 600;
}

/* Messages retour formulaires */
.msg-succes {
  padding: var(--espace-m);
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid #4caf50;
  border-radius: var(--rayon-standard);
  color: #7dff7d;
  text-align: center;
}

.msg-erreur {
  color: #ff6b6b;
  text-align: center;
}

/* Liste à puces */
.liste {
  list-style: disc;
  padding-left: var(--espace-l);
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.liste li {
  color: var(--blanc-doux);
  line-height: 1.6;
}

.liste li::marker {
  color: var(--rouge);
}

/* Section */
.section {
  margin-bottom: var(--espace-xl);
}