/* =====================================================================
   REPÈRES ALIMENTAIRES — GRILLES, TABLEAUX ET PHOTOS
   ===================================================================== */

.ra-feature {
    border:1px solid #c9dfd0;
    border-radius:22px;
    padding:clamp(20px,4vw,40px);
    background:#f3faf5;
}

.ra-highlights,.ra-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin:24px 0;
}

.ra-highlights p,.ra-grid article {
    border:1px solid #dce5df;
    border-radius:16px;
    padding:20px;
    background:var(--surface,#fff);
    margin:0;
}

.ra-highlights strong {
    display:block;
    font-size:1.2em;
    margin-bottom:8px;
}

.ra-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.ra-grid h3 {
    margin-top:0;
}

.ra-table-scroll {
    overflow-x:auto;
    margin:24px 0;
    border-radius:14px;
    border:1px solid #dce5df;
}

.ra-table-scroll table {
    width:100%;
    border-collapse:collapse;
    min-width:640px;
}

.ra-table-scroll caption {
    text-align:left;
    font-weight:700;
    padding:18px;
    background:#eef6f0;
}

.ra-table-scroll th,.ra-table-scroll td {
    padding:18px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid #dce5df;
    line-height:1.65;
}

.ra-table-scroll thead {
    background:#f7faf8;
}

.ra-table-scroll tbody th {
    width:20%;
}

.ra-table-scroll td:nth-child(2) {
    width:25%;
}

.ra-table-scroll:focus-visible {
    outline:3px solid #247c4e;
    outline-offset:4px;
}

@media(max-width:720px) {
    .ra-highlights,.ra-grid {
        grid-template-columns:1fr;
    }
    .ra-table-scroll th,.ra-table-scroll td {
        padding:13px;
    }
}

@media(prefers-color-scheme:dark) {
    html:not([data-theme=light]) .ra-feature {
        background:#172b20;
    }
    html:not([data-theme=light]) .ra-table-scroll caption,html:not([data-theme=light]) .ra-table-scroll thead {
        background:#22362a;
    }
}

@media print {
    .ra-table-scroll {
        overflow:visible;
    }
    .ra-table-scroll table {
        min-width:0;
    }
    .ra-grid article {
        break-inside:avoid;
    }
}

.ra-photos {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.ra-photo {
    margin:0;
    border:1px solid #dce5df;
    border-radius:18px;
    overflow:hidden;
    background:var(--surface,#fff);
}

.ra-photo img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1800/945;
    object-fit:contain;
}

.ra-photo figcaption {
    padding:20px;
}

.ra-photo h3 {
    margin:0 0 10px;
}

.ra-photo p {
    margin:0;
    line-height:1.65;
}

@media(max-width:620px) {
    .ra-photos {
        grid-template-columns:1fr;
    }
}


/* =====================================================================
   TROIS REPÈRES — TROIS COULEURS
   ===================================================================== */

.ra-highlights p:nth-child(1) {
    background: #edf6ee;
    border-color: #b8d6bd;
    color: #245b35;
}

.ra-highlights p:nth-child(2) {
    background: #fff1e8;
    border-color: #e7c4b1;
    color: #84472c;
}

.ra-highlights p:nth-child(3) {
    background: #edf4fb;
    border-color: #bfd3e6;
    color: #285578;
}

/* =====================================================================
   QUATRE FAMILLES D’ALIMENTS — CARTES PHOTOGRAPHIQUES
   ===================================================================== */

.ra-grid article.ra-food-card {
    padding: 0;
    overflow: hidden;
}

.ra-food-card > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1800 / 945;
    object-fit: cover;
}

.ra-food-card-body {
    padding: clamp(18px, 3vw, 28px);
}

.ra-food-card-body h3 {
    margin: 0 0 14px;
}

.ra-food-card-body p {
    margin: 0;
}

/* =====================================================================
   AFFICHAGE SOMBRE
   ===================================================================== */

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .ra-highlights p:nth-child(1) {
        background: #203a29;
        color: #e0f3e3;
    }

    html:not([data-theme="light"]) .ra-highlights p:nth-child(2) {
        background: #422c24;
        color: #ffe8db;
    }

    html:not([data-theme="light"]) .ra-highlights p:nth-child(3) {
        background: #233749;
        color: #e1efff;
    }
}