/* Header Section */ .header-section { background-color: #000000; color: #ffffff; text-align: center; padding: 60px 20px; } .header-section h1 { font-size: 32px; font-weight: bold; text-transform: lowercase; margin: 0 0 16px 0; letter-spacing: -0.5px; } .header-section p { color: #d8c4a0; /* Teinte dorée/jaune de la charte */ font-size: 14px; line-height: 1.5; max-width: 800px; margin: 0 auto; } /* Grid Section Container */ .grid-wrapper { width: 100%; box-sizing: border-box; padding: 60px 20px; } .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1280px; margin: 0 auto; } /* Card Layout */ .control-card { display: flex; flex-direction: column; } .card-image { width: 100%; height: auto; display: block; margin-bottom: 20px; } .card-title { font-size: 16px; font-weight: bold; text-transform: lowercase; margin: 0 0 12px 0; padding-bottom: 6px; border-bottom: 2px solid #000000; width: fit-content; } .card-list { list-style-type: none; padding: 0; margin: 0; } .card-list li { font-size: 13px; line-height: 1.6; color: #333333; margin-bottom: 4px; } /* Responsive Breakpoints */ @media (max-width: 1024px) { .grid-container { grid-template-columns: repeat(2, 1fr); /* Mode tablette pour un rendu propre */ } } @media (max-width: 640px) { .header-section h1 { font-size: 26px; } .grid-container { grid-template-columns: 1fr; /* Uniquement 1 colonne sur mobile */ gap: 40px; /* Un peu plus d'espace en vertical sur mobile */ } }