/* Reset et Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f0f2f1;
    max-width: 90%;
    margin: 0 auto;
    font-size: 16px;
}

/* Masquer l'en-tête Pandoc */
header, .title, .author, .date, .header { display: none !important; }

/* Conteneur Principal (Grid Global) */
div.content-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    align-items: start;
}
i

/* --- STYLE DU LOGO --- */
.logo-container div {
  float: right;
}
.logo-container img {
  float: left;
    max-width: 50px !important;       /* Largeur maximale du logo */
    height: auto;           /* Garde les proportions */
    margin: 0 auto 30px auto; /* Centrage horizontal et marge basse */
}

.logo-container img:hover {
    transform: scale(1.02); /* Petit effet de zoom au survol */
}


/* Utilitaires */
.full-width { grid-column: 1 / -1; }



/* Style de base des cartes (pour éviter les conflits de style) */
.domain-card, .service-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    border-top: 4px solid #127651;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s;
    margin-bottom: 0; /* Important pour éviter les espaces */
}

.domain-card:hover, .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(18, 118, 81, 0.2);
}

/* Images */
.card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #e0e0e0;
}

/* Titres */
h1, h2, h3 { color: #127651; margin-bottom: 15px; font-weight: 700; }
h1 { font-size: 2.2em; text-transform: uppercase; border-bottom: 2px solid #127651; padding-bottom: 10px; margin-top: 0; }
h2 { font-size: 1.5em; border-left: 5px solid #127651; padding-left: 12px; margin-top: 0; }
h3 { font-size: 1.2em; color: #2c5e42; margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 5px; }

/* Contenu */
p, ul, ol, table { margin-bottom: 15px; }
p:last-child, ul:last-child, ol:last-child, table:last-child { margin-bottom: 0; }
li { margin-bottom: 8px; }

a { color: #127651; text-decoration: none; font-weight: 600; border-bottom: 1px dotted #127651; }
a:hover { background-color: #127651; color: white; border-bottom: 1px solid #127651; padding: 0 3px; }

/* Tableaux */
table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
th { background-color: #127651; color: white; text-align: left; padding: 10px; font-weight: 600; text-transform: uppercase; font-size: 0.8em; }
td { padding: 10px; border-bottom: 1px solid #eee; }
tr:nth-child(even) { background-color: #f9fbfa; }

/* --- GRILLES SPÉCIFIQUES (CORRECTION CLÉ) --- */

/* On force la grille à être un conteneur direct */
.domains-grid, .services-grid {
    display: grid !important;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 3 Colonnes pour Domaines */
.domains-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* 2 Colonnes pour Services */
.services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* On s'assure que les cartes sont des éléments de grille directs */
.domains-grid > *, .services-grid > * {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .domains-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .services-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .domains-grid, .services-grid { grid-template-columns: 1fr !important; }
    div.content-wrapper { padding: 0 15px; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.4em; }
    .card-image { height: 150px; }
        .logo-container img {
        max-width: 150px; /* Logo plus petit sur mobile */
        margin-bottom: 20px;
    }
}