/* ========================================= */
/* 1. CONFIGURATION GÉNÉRALE                 */
/* ========================================= */

:root {
  --swiss-blue: .#c1d6e2;
  --swiss-red: #e63928;
  --swiss-yellow: #ffde03;
  --paper: #f2f2f2;
}

body {
  background-color: var(--swiss-blue);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Empêche les bugs de scroll horizontal */
}

/* ========================================= */
/* 2. LES CARTES (CARRELAGE DROITE/GAUCHE)   */
/* ========================================= */

header,
section {
  background: var(--paper);
  padding: 40px;
  border: 1px solid black;
  width: 50%;
  box-sizing: border-box;
  margin-bottom: -1px; /* Colle les blocs verticalement */
}

header,
section:nth-of-type(even) {
  align-self: flex-start;
  border-left: none;
}

section:nth-of-type(odd) {
  align-self: flex-end;
  border-right: none;
}

/* ========================================= */
/* 3. FIX DES EXEMPLES INTERNES              */
/* ========================================= */

.exemple section {
  width: 100% !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  border: none !important;
  background: transparent !important;
}

.box {
  border: 1px solid black !important;
  padding: 15px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.div-box {
  background: #e0e0e0;
}
.p-box {
  background: #ffffff;
}

/* ÉLÉMENT SÉLECTIONNÉ (JAUNE) */
.descendant .div-box .p-box,
.enfant .div-box > .p-box,
.adjacent h3 + .p-box,
.general h3 ~ .p-box {
  background-color: var(--swiss-yellow) !important;
  color: black;
}

/* ========================================= */
/* 4. TYPOGRAPHIE RESPONSIVE                 */
/* ========================================= */

h1 {
  /* Taille fluide qui s'adapte à l'écran */
  font-size: clamp(1.8rem, 12vw, 4.5rem);
  line-height: 0.9;
  margin: 0 0 20px 0;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--swiss-red);

  /* Sécurité anti-débordement */
  inline-size: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

h2 {
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  border-bottom: 2px solid black;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.intro-page b {
  background: var(--swiss-yellow);
  padding: 0 4px;
}

pre {
  background: white;
  border: 1px solid black;
  padding: 15px;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ========================================= */
/* 5. RESPONSIVE (MOBILE)                    */
/* ========================================= */

@media (max-width: 800px) {
  header,
  section {
    width: 100% !important;
    padding: 30px 20px;
    border-left: none !important;
    border-right: none !important;
  }

  h1 {
    letter-spacing: -1px;
  }
}

p.intro-page {
  margin-top: 60px;
}