/* === RESET DES BALISES OBSOLÈTES === */

/* === Ce css ne touche à rien de la version PC === */

 @media screen and (max-width: 768px) {

font, center, big, small, tt {
  all: unset;
}
font[size], font[face], font[color] {
  all: unset;
}
center {
  display: block;
  text-align: center;
}

/* === BOX MODEL GLOBAL === */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;       /* Empêche les débordements horizontaux globaux */
  overflow-y: scroll;       /* Scroll vertical toujours visible */
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: #fff;
  color: #000;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  /* Pas de restriction d'overflow ici pour les pubs */
}

/* Applique box-sizing à tous les éléments */
*, *::before, *::after {
  box-sizing: inherit;
}

/* === TITRES === */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.3;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* === TABLEAUX RESPONSIVES === */
table {
  width: 100%;
  max-width: 900px;
  margin: 1em auto;
  border-collapse: collapse;
  font-size: 1rem;
  table-layout: auto;
 }
 p{
  
  margin: 1em !important;
 
 }

td, th {
  padding: 0.5em;
  border: 1px solid #ccc;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal;
}

/* Empêche les tableaux imbriqués de casser */
td table {
  width: 100%;
}

/* === IMAGES RESPONSIVES === */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* === PRÉFORMATÉS === */
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
  overflow-x: auto;
}

/* === NE PAS BLOQUER LES PUBS === */
div, section, article, aside {
  /* max-width retiré */
  /* overflow-x retiré pour laisser les pubs fonctionner */
}
* {
  outline: 0px solid red;
}


  /* Tableaux par défaut */
  table {
    width: 100%;               /* Le tableau prend toute la largeur disponible */
    border-collapse: collapse; /* Les bordures des cellules se collent, pas de double ligne */
  }

  td {
    padding: 0.5em;            /* Espace à l’intérieur de la cellule pour que le texte ne touche pas les bords */
    border: 1px solid #ccc;    /* Bordure grise fine autour de chaque cellule */
  }

  /* Version mobile pour écrans ≤ 600px */
 
    table {
      width: 100%;             /* Toujours pleine largeur sur mobile */
      table-layout: fixed;     /* Force les cellules à rester dans la largeur définie pour éviter le débordement */
    }

    tr {
      display: flex;           /* Transforme chaque ligne en conteneur flexible */
      flex-direction: column;  /* Empile les cellules verticalement au lieu d’horizontal */
      margin-bottom: 1em;      /* Espace sous chaque ligne pour aérer la lecture */
      border-bottom: 1px solid #ccc; /* Ligne séparatrice sous chaque ligne */
      height: auto !important; /* Annule toute hauteur fixe des anciens tableaux pour éviter chevauchement */
    }

    td {
      display: block;          /* Chaque cellule devient un bloc vertical, donc s’empile correctement */
      width: 100%;             /* Chaque cellule prend toute la largeur de sa ligne */
      box-sizing: border-box;  /* Bordures et padding sont inclus dans la largeur pour éviter le débordement */
      height: auto !important; /* Annule toute hauteur fixe pour que le contenu s’adapte naturellement */
    }

    /* sécurité : empêche le dépassement horizontal de la page */
    body {
      overflow-x: hidden;      /* Masque tout débordement horizontal éventuel */
    }
	
 }
 
@media screen and (max-width: 768px) {

  /* 🔧 Neutralise le blockquote */
  blockquote {
    all: unset;
    display: contents;
  }

  /* 📐 Style général du bloc de propositions */
  blockquote p font {
    text-align: left;
    word-break: break-word;
  }

  /* ✅ Regroupe chaque case + texte en un bloc inline-block :
     - Empêche la coupure entre la case et sa proposition
     - Ajoute un petit espace avant la case
     - Ajoute un petit espace après la proposition via margin-right */
  blockquote p font img[src*="case.png"] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;    /* espace avant la case */
    margin-right: 6px;   /* espace entre la case et le texte */
    white-space: nowrap; /* empêche la coupure dans le bloc */
  }

  /* 🧱 Ajoute un espacement visuel après chaque paire case + texte :
     - Simule les "3 espaces insécables" par une marge droite
     - Fonctionne même si le texte n’est pas dans une balise */
  blockquote p font img[src*="case.png"] + * {
    margin-right: 6px; /* ajustable selon le rendu */
  }
}


@media screen and (max-width: 768px) {
  /* Ajoute un espace blanc autour de la page */
  body {
    padding: 20px;
  }
  }



@media screen and (min-width: 768px) {
  /* Taille des titres h2 */
  h2 {
    font-size: 24px;
  }
}