/*
Theme Name: Écrin
Theme URI: https://fruitssecsetcie.com
Description: Thème code-pur écrit pour fruitssecsetcie.com — Fruits Secs & Cie, le guide français des fruits secs et oléagineux. Papier amande, encre cacao, sarcelle confiseur. Aucun page-builder, aucune dépendance externe.
Author: Fruits Secs & Cie
Version: 1.0.0
Requires PHP: 7.4
Text Domain: ecrin
*/

/* ==========================================================================
   ecrin/style.css — fruitssecsetcie.com (vague 2026-08, designer 04/08/2026)
   Tokens 9 variables canaux RGB (PROP-11). Pile typo SYSTÈME (P-086).
   Palette « boîte de confiseur » : amande dorée + encre cacao + sarcelle
   monochrome (P-116). Contrastes vérifiés par calcul (IDENTITE.md) :
   clair texte/fond 13,26:1 · brand/fond 7,21:1 · footer 13,04:1 ·
   sombre texte/fond 18,07:1 · brand/fond 9,00:1. Lagune (--brand-2) :
   JAMAIS en texte sur fond clair (2,0:1) — décor seulement.
   Aucune couleur en dur dans les composants : tout passe par les tokens.
   ========================================================================== */

/* ----- 1. TOKENS ---------------------------------------------------------- */
:root {
    --fond-1:   246 239 227;  /* papier amande dorée */
    --fond-2:   239 229 211;  /* encart */
    --fond-3:   227 214 188;  /* encart appuyé */
    --texte-1:  46 36 28;     /* encre cacao */
    --texte-2:  92 78 64;
    --texte-3:  122 106 86;
    --bordure:  217 204 180;
    --brand:    17 86 102;    /* sarcelle confiseur */
    --brand-2:  156 196 204;  /* lagune — décor uniquement en clair */
    /* colophon sombre même en mode clair (P-110 : posé sur l'élément) */
    --colophon-fond:  46 36 28;
    --colophon-texte: 244 237 227;
    --colophon-lien:  156 196 204;
    --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px; /* kit commun */
}
html[data-mode="nuit"] {
    /* OLED noir pur (PROP-11), élévations CHAUDES propres au site */
    --fond-1:   0 0 0;
    --fond-2:   23 19 16;
    --fond-3:   36 30 24;
    --texte-1:  244 237 227;
    --texte-2:  196 184 168;
    --texte-3:  150 138 120;
    --bordure:  50 42 34;
    --brand:    111 180 196;  /* sarcelle éclaircie — 9,0:1 sur noir */
    --brand-2:  167 211 220;
    --colophon-fond:  23 19 16;
    --colophon-texte: 244 237 227;
    --colophon-lien:  167 211 220;
}

/* ----- 2. BASE ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 18px; line-height: 1.7;          /* site de lecture */
    background: rgb(var(--fond-1));
    color: rgb(var(--texte-1));
}
img { max-width: 100%; height: auto; }
a { color: rgb(var(--brand)); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid rgb(var(--brand)); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; color: rgb(var(--texte-1)); }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 600; text-align: center; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 650; }
.fsc-cadre { max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
.fsc-etroit { max-width: 720px; margin-inline: auto; padding-inline: 20px; }
.fsc-surtitre { font-style: italic; color: rgb(var(--texte-2)); font-size: 1rem; }
.fsc-lead { font-style: italic; font-size: 1.15rem; color: rgb(var(--texte-2)); }
.ecran-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
.fsc-saut { position: absolute; left: -999px; top: 0; background: rgb(var(--brand));
    color: rgb(255 255 255); padding: 10px 16px; z-index: 100; }
html[data-mode="nuit"] .fsc-saut { color: rgb(10 10 10); }
.fsc-saut:focus { left: 8px; }

/* ----- 3. SIGNATURE « l'amande » (3 emplacements max) --------------------- */
.fsc-amande { display: flex; align-items: center; justify-content: center;
    gap: 0; border: 0; margin: 26px auto; max-width: 220px; height: 13px;
    background:
        linear-gradient(rgb(var(--bordure)), rgb(var(--bordure)))
        center / 100% 1px no-repeat; position: relative; }
.fsc-amande::after { content: ""; width: 11px; height: 11px;
    background: rgb(var(--brand)); transform: rotate(45deg);
    border-radius: 2px; box-shadow: 0 0 0 5px rgb(var(--fond-1)); }

/* ----- 4. BANDEAU + NAV PAPILLON (P-004 : flex, zéro puce) ---------------- */
.fsc-bandeau { background: rgb(var(--fond-1));
    border-bottom: 1px solid rgb(var(--bordure));
    padding: 14px 0 10px; }
.fsc-papillon { display: flex; align-items: center; justify-content: center;
    gap: 28px; max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
.fsc-papillon ul { display: flex; align-items: center; gap: 24px;
    list-style: none; margin: 0; padding: 0; flex: 1; }
.fsc-aile-gauche ul { justify-content: flex-end; }
.fsc-aile-droite ul { justify-content: flex-start; }
.fsc-papillon a { color: rgb(var(--texte-1)); text-decoration: none;
    font-weight: 500; padding: 10px 2px; }
.fsc-papillon a:hover,
.fsc-papillon .est-actif > a { color: rgb(var(--brand));
    text-decoration: underline; text-decoration-thickness: 2px; }
.fsc-marque { display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: rgb(var(--texte-1)); flex-shrink: 0; }
.fsc-marque svg { display: block; }
.fsc-marque .fsc-nom { font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.fsc-marque .fsc-et { color: rgb(var(--brand)); font-style: italic; font-weight: 700; }
.fsc-bascule { background: none; border: 1px solid rgb(var(--bordure));
    border-radius: var(--r-8); color: rgb(var(--texte-2));
    width: 44px; height: 44px; cursor: pointer; font-size: 1rem; }
.fsc-bascule:hover { color: rgb(var(--brand)); border-color: rgb(var(--brand)); }
@media (max-width: 899px) {
    .fsc-papillon { flex-wrap: wrap; gap: 8px 16px; }
    .fsc-marque { order: -1; width: 100%; justify-content: center; }
    .fsc-papillon ul { justify-content: center; flex-wrap: wrap; gap: 4px 16px; }
}

/* ----- 5. BREADCRUMB « piste » (« · », dernier item italique) -------------- */
.fsc-piste { margin: 18px 0 0; font-size: .92rem; color: rgb(var(--texte-3)); }
.fsc-piste ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
    margin: 0; padding: 0; }
.fsc-piste li + li::before { content: "·"; margin-right: 6px;
    color: rgb(var(--texte-3)); }
.fsc-piste a { color: rgb(var(--texte-2)); }
.fsc-piste .est-ici { font-style: italic; color: rgb(var(--texte-2)); }

/* ----- 6. OUVERTURE (hero « l'étal » : texte centré + médaillons-arches) --- */
.fsc-ouverture { padding: 44px 0 12px; text-align: center; }
.fsc-ouverture h1 { margin: 8px 0 0; }
.fsc-etal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
    list-style: none; margin: 30px 0 0; padding: 0; }
.fsc-medaillon { text-align: center; }
.fsc-medaillon a { display: block; text-decoration: none;
    color: rgb(var(--texte-1)); font-weight: 600; }
.fsc-medaillon img { display: block; width: 100%; aspect-ratio: 4 / 5;
    object-fit: cover; border-radius: 50% 50% var(--r-12) var(--r-12); /* arche */
    border: 1px solid rgb(var(--bordure)); }
.fsc-medaillon .fsc-legende { display: inline-block; margin-top: 10px; }
.fsc-medaillon a:hover .fsc-legende { color: rgb(var(--brand));
    text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 899px) {
    .fsc-etal { grid-template-columns: repeat(2, 1fr); }
    .fsc-etal li:last-child { grid-column: span 2; max-width: 50%; margin-inline: auto; }
}

/* ----- 7. CARTES « écrin » (double encadrement, fond = page) --------------- */
.fsc-ecrin { background: rgb(var(--fond-1)); border: 1px solid rgb(var(--bordure));
    outline: 1px solid rgb(var(--bordure)); outline-offset: 3px;
    border-radius: var(--r-16); padding: 22px; margin: 8px 4px; }
.fsc-ecrin h3 { margin-top: 0; }
.fsc-ecrin.est-vedette { border-color: rgb(var(--brand)); position: relative; }
.fsc-ecrin.est-vedette::before { content: ""; position: absolute;
    top: -7px; left: 50%; width: 12px; height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: rgb(var(--brand)); border-radius: 2px; }
.fsc-rangee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 899px) { .fsc-rangee { grid-template-columns: 1fr; } }

/* ----- 8. BOUTONS, ENCARTS, TABLEAUX -------------------------------------- */
.fsc-action { display: inline-block; background: rgb(var(--brand));
    color: rgb(255 255 255); text-decoration: none; font-weight: 600;
    padding: 12px 26px; border-radius: var(--r-12); border: 0;
    cursor: pointer; font-size: 1rem; min-height: 44px; }
html[data-mode="nuit"] .fsc-action { color: rgb(10 10 10); } /* 8,49:1 */
.fsc-action:hover { filter: brightness(1.12); }
.fsc-action-douce { display: inline-block; background: none;
    color: rgb(var(--brand)); border: 1px solid rgb(var(--brand));
    padding: 11px 24px; border-radius: var(--r-12); text-decoration: none;
    font-weight: 600; min-height: 44px; }
.fsc-encart { background: rgb(var(--fond-2)); border-radius: var(--r-16);
    padding: 24px; }
.fsc-source { font-size: .88rem; color: rgb(var(--texte-3)); }
/* --texte-3 validé contraste sur --fond-1 uniquement ; sur encart (--fond-2) passer en --texte-2 */
.fsc-source--encart { color: rgb(var(--texte-2)); }
.fsc-tableau { width: 100%; border-collapse: collapse;
    font-variant-numeric: tabular-nums; }
.fsc-tableau th, .fsc-tableau td { padding: 10px 12px; text-align: left;
    border-bottom: 1px solid rgb(var(--bordure)); }
.fsc-tableau th { color: rgb(var(--texte-2)); font-size: .9rem; }
.fsc-defile { overflow-x: auto; }
.fsc-citable { border-left: 3px solid rgb(var(--brand));
    background: rgb(var(--fond-2)); padding: 18px 22px;
    border-radius: 0 var(--r-12) var(--r-12) 0; margin: 26px 0; }

/* ----- 9. ARTICLE / PILIER / AVIS / OUTIL --------------------------------- */
.fsc-article { padding: 8px 0 56px; }
.fsc-article .fsc-meta { text-align: center; color: rgb(var(--texte-3));
    font-size: .92rem; margin: 10px 0 0; }
.fsc-contenu { margin-top: 26px; }
.fsc-contenu img { border-radius: var(--r-16); }
.fsc-contenu h2 { margin-top: 2.2em; }
.fsc-sommaire { background: rgb(var(--fond-2)); border-radius: var(--r-16);
    padding: 18px 24px; margin: 26px 0; }
.fsc-sommaire strong { display: block; margin-bottom: 6px; }
.fsc-sommaire ol { margin: 0; padding-left: 20px; }
.fsc-sommaire a { color: rgb(var(--texte-2)); }
.fsc-maj { text-align: center; font-size: .92rem; color: rgb(var(--texte-3));
    font-style: italic; }
.fsc-criteres { border: 1px dashed rgb(var(--brand)); border-radius: var(--r-16);
    padding: 20px 24px; margin: 26px 0; }
.fsc-affiliation { font-size: .88rem; color: rgb(var(--texte-2));
    background: rgb(var(--fond-3)); border-radius: var(--r-8);
    padding: 10px 14px; margin: 18px 0; }
.fsc-rayon { margin-top: 44px; }
.fsc-rayon ul { list-style: none; margin: 12px 0 0; padding: 0;
    display: grid; gap: 10px; }
.fsc-rayon a { color: rgb(var(--texte-1)); }

/* formulaire contact (couche leads coupée — contact simple) */
.fsc-champ { display: block; margin: 18px 0; }
.fsc-champ span { display: block; font-weight: 600; margin-bottom: 6px; }
.fsc-champ input, .fsc-champ textarea { width: 100%; padding: 12px;
    border: 1px solid rgb(var(--bordure)); border-radius: var(--r-8);
    background: rgb(var(--fond-1)); color: rgb(var(--texte-1));
    font: inherit; min-height: 44px; }
.fsc-champ input:focus, .fsc-champ textarea:focus {
    outline: 3px solid rgb(var(--brand)); outline-offset: 1px; }
.fsc-piege { position: absolute; left: -999px; } /* honeypot fsc_url */

/* ----- 10. COLOPHON (footer sombre centré, variables posées ici — P-110) --- */
.fsc-colophon { background: rgb(var(--colophon-fond));
    color: rgb(var(--colophon-texte)); text-align: center;
    padding: 44px 20px 120px; margin-top: 64px; }
.fsc-colophon .fsc-amande { background:
    linear-gradient(rgb(var(--colophon-texte) / .3), rgb(var(--colophon-texte) / .3))
    center / 100% 1px no-repeat; }
.fsc-colophon .fsc-amande::after { background: rgb(var(--colophon-lien));
    box-shadow: 0 0 0 5px rgb(var(--colophon-fond)); }
.fsc-colophon a { color: rgb(var(--colophon-lien)); }
.fsc-colophon ul { list-style: none; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 8px 22px; margin: 18px 0; padding: 0; }
.fsc-colophon .fsc-sources { font-size: .9rem;
    color: rgb(var(--colophon-texte) / .85); max-width: 640px; margin-inline: auto; }
.fsc-colophon .fsc-legal { font-size: .85rem;
    color: rgb(var(--colophon-texte) / .75); margin-top: 18px; }
@media (min-width: 900px) { .fsc-colophon { padding-bottom: 44px; } }

/* ----- 11. TABLE BASSE (navbar app-feel, mobile) --------------------------- */
.fsc-table-basse { position: fixed; inset: auto 0 0 0; z-index: 50;
    display: flex; justify-content: space-around; align-items: stretch;
    background: rgb(var(--fond-1) / .96); backdrop-filter: blur(8px);
    border-top: 1px solid rgb(var(--bordure));
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.fsc-place { flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; text-decoration: none; color: rgb(var(--texte-2));
    font-size: .72rem; padding: 6px 2px; min-height: 44px; border-radius: var(--r-8); }
.fsc-place svg { width: 22px; height: 22px; }
.fsc-place.est-actif { color: rgb(var(--brand)); font-weight: 600; }
.fsc-place-outil { color: rgb(255 255 255); }
.fsc-place-outil .fsc-pastille { display: flex; align-items: center;
    justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: rgb(var(--brand)); margin-top: -18px;
    box-shadow: 0 2px 8px rgb(var(--texte-1) / .25); }
html[data-mode="nuit"] .fsc-place-outil .fsc-pastille svg { color: rgb(10 10 10); }
.fsc-place-outil .fsc-pastille svg { color: rgb(255 255 255); }
.fsc-place-outil span:last-child { color: rgb(var(--brand)); font-weight: 600; }
@media (min-width: 900px) { .fsc-table-basse { display: none; } }

/* ----- 12. DIVERS --------------------------------------------------------- */
.fsc-section { padding: 34px 0; }
.fsc-section-titre { text-align: center; }
.fsc-reperes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    text-align: center; }
.fsc-reperes strong { display: block; font-size: 1.7rem; color: rgb(var(--brand));
    font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .fsc-reperes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}