/* ============ Syntaxe	Explication
margin: 10px;	1 valeur → tous les côtés = 10px
margin: 10px 20px;	2 valeurs → haut & bas = 10px, gauche & droite = 20px
margin: 10px 20px 30px;	3 valeurs → haut = 10px, gauche & droite = 20px, bas = 30px
margin: 10px 20px 30px 40px;	4 valeurs → haut = 10px, droite = 20px, bas = 30px, gauche = 40px
=============================*/

/*===== oblige les navigateurs a accepter le blanc lorsqu'il est demandé======*/
:root { color-scheme: light; } 

/* ============ Base ============ */
body{
  margin: 3px auto;
  width: 100%;
  max-width: 680px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.3;
  font-size: clamp(10px, 4vw, 16px);
  color: #fff;
  /* Fond limité visuellement à 680px */
  background-color: #000; /* fond plein écran */
  background-image: url('../pics/fondbleu4.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 680px auto;  
  background-attachment: fixed;  /* évite les bugs 'fixed' sur body */
}


/* ============ Titres & texte ============ */
h1 {
  margin: 10px 0;
  font-weight: 400;
  font-size: clamp(20px, 4vw, 32px);
  text-align: center;
  color: #f5e0c1;
  line-height: 1.3;
}

h2 {
  margin: 20px 0 10px;
  font-weight: 300;
  font-size: clamp(16px, 4vw, 20px);
  text-align: center;
  color: #f5e0c1;
}

h3 {
  font-weight: 300;
  font-size: clamp(12px, 4vw, 16px);
  text-align: left;
  margin: 5px 0;
  color: #f5e0c1;
}

p {
  font-weight: 300;
  font-size: clamp(12px, 4vw, 16px);
  text-align: left;
  margin: 5px 0;
}

/* ============ Utilitaires ============ */
/* Retrait doux et responsive */
.retrait {
  padding-left: clamp(5px, 2vw, 20px);
}

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 98%;
  max-width: 680px;  /* borné comme ton body */
  height: auto;
}


.full-img {
  display: block;       /* pour gérer correctement le centrage */
  width: 100vw;         /* largeur de la fenêtre (viewport width) */
  max-width: 100%;      /* sécurité pour éviter les débordements */
  margin: 0 auto;       /* centrage horizontal */
}


/* Petite ligne décorative centrée (optionnel) */
.decor {
  display: block;
  margin: 1px auto;
  width: 50%;
  max-width: 250px;
}
/*======= les ronds en banane =========*/
.rond {
  width: 10px;
  height: 10px;
  background-color:

/* Texte mis en avant (couleur claire, un peu plus gros) */
.highlight {
  color: #f5e0c1;
  font-weight: 400;
  font-size: 1.05em;
}

/* Avertissement ou attention (rouge/orangé) */
.warning {
  color: #ff6666;
  font-weight: bold;
}

/* Note ou complément d’info (bleu clair/gris) */
.note {
  color: #66ccff;
  font-style: italic;
}

/* Accent discret (jaune pâle/beige) */
.accent {
  color: #f0e68c;
  font-weight: 300;
}

/* Mise en avant forte (comme un mini-titre inline) */
.strong {
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
}

a:active, a:focus, a:hover, a:visited, a:link  {
	color: #FFFFFF;
	text-decoration: none;
}