@page {
  size: A4 landscape;
  margin: 0;
  font-family: Lato, Verdana, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #fff;
}

h1 {
  background: #f0f8f0;
  font-size: 30px;
  padding: 10px 10px 10px 50px;
  
}

/* 2. Le conteneur (section) : devient une boîte flexible */
section {
    display: flex;           /* Active le mode Flexbox */
    flex-direction: row;     /* Aligne les éléments horizontalement */
    gap: 20px;               /* Espace entre les colonnes (gouttière) */
    width: 100%;             /* Utilise toute la largeur de la page */
    padding: 20px 30px;
}

    /* 3. Les éléments (article) : largeur égale */
article {
    /* flex-grow: 1   -> L'élément s'agrandit pour remplir l'espace
       flex-shrink: 1 -> L'élément rétrécit si nécessaire
       flex-basis: 0  -> IMPORTANT : On part de 0 pour le calcul, 
                         ce qui force une largeur strictement égale 
                         quel que soit le contenu du texte.
    */
    flex: 1 1 0; 

    /* Styles visuels pour le rapport (optionnel) */
    border-radius: 10px;
    padding: 15px;
    
    
    /* Empêche de couper un article en deux sur deux pages (si multiligne) */
    break-inside: avoid; 
    page-break-inside: avoid;
}

article.fonctionnement {
background-color: #e9e9f9;
}

article.indicateurs {
background-color: #e9f9e9;
}

article.prescriptions {
background-color: #f9e9e9;
}


    /* Style basique pour vos titres (optionnel) */
    h2 {
        font-size: 14pt;
        color: #333;
        border-bottom: 2px solid #0056b3;
        padding-bottom: 5px;
        text-transform: uppercase;
    }
    
    h3 {
        font-size: 12pt;
        text-transform: uppercase;
        margin: 5px 2px 10px 2px;
    }
    
    p {
        margin-left: 20px;
        margin-bottom: 10px;
    }
    
    ul {
        list-style-type: none;
    }
    
    li {
        margin-left: 20px;
    }