*{
Margin:0;
padding:0;
box-sizing: border-box;
font-family:"poppins", sans-serif
}
:root{
--bg:#878a90;
--card:#f1c0c0;
--accent:#2563eb;
--muted:#858a94;
--fg:#111827;
--gap:8px;
}
*{box-sizing:border-box}
header {
background: #2176cb;
color: var(--blanc);
text-align: center;
padding: 40px 20px;
position: relative;
box-shadow: 0 3px 10px var(--ombre);
}
.header-content {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-bottom: 20px;
}
header h1 {
font-size: 1.8em;
margin-top: 10px;
font-weight: bold;
font-family: poppins;
color:antiquewhite;
}
body{
margin:0;
padding:24px;
font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
background:var(--bg);
color:var(--fg);
}
.wrap{
max-width:1100px;
margin:0 auto;
}
h1{margin:0 0 6px;font-size:1.6rem;text-align:center}
h2{margin:0 0 18px;color:var(--muted);font-weight:400;text-align:center}
/* conteneur scrollable pour garder les colonnes alignées sur mobile */
.table-wrap{
overflow-x:auto;
background:linear-gradient(180deg,var(--card),#fbfcfd);
padding:12px;
border-radius:10px;
box-shadow:0 8px 24px rgba(2,6,23,0.04);
}
/* La vraie grille : chaque ligne comprend 3 cellules */
.grid {
display: grid;
grid-template-columns: 1fr 2fr 3fr; /* Date / Objets / Observations */
gap: var(--gap);
align-items: center;
min-width:720px; /* permet le scroll horizontal si l'écran est étroit */
}
/* En-têtes */
.grid .header {
background: linear-gradient(180deg,var(--accent),#1e40af);
color: #fff;
font-weight:700;
padding:10px 12px;
border-radius:8px;
text-align:center;
}
/* Cellules de données */
.cell{
background:var(--card);
padding:10px 12px;
border-radius:8px;
border:1px solid rgba(2,6,23,0.04);
color:var(--fg);
font-size:0.95rem;
}
/* Séparation visuelle entre les lignes : on applique un léger shadow interne via outline sur la rangée */
.row-sep { grid-column: 1 / -1; height:0; margin:0; }
/* exemple : style pour la date plus compacte */
.cell.date{white-space:nowrap}
/* sur très grand écran, ajouter plus d'espace */
@media (min-width:1200px){
.grid { gap:12px; }
}
.Retour{
color: #0c0a0a;
font-size: larger;
text-align: left;
font-weight: bold;
}
footer {
text-align: center;
padding: 20px;
background: #003366;
color: white;
margin-top: 40px;
}