/* ═══════════════════════════════════════════════════════════════════════════
   Petits plats & Compagnie — Design system
   Charte : Vert Profond #2B3A26 · Cuivré #D08C5D · Vert Émaillé #7C8B64 ·
            Violet Chou-rouge #8F54A4 · Écru #FDF7ED + accents potager.
   Typo : Playfair Display (titres) · Lora (corps) · Dancing Script (accent).
   Polices auto-hébergées (CSP stricte : font-src 'self').
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Polices (woff2 latin + latin-ext, sous-ensembles français) ───────────── */

/* Lora — corps de texte (variable 400→700) */
@font-face {
    font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../fonts/lora-latin-_BuAxlw.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("../fonts/lora-latin-ext-xqeT-_n.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap;
    src: url("../fonts/lora-italic-latin-2IlCPRF.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap;
    src: url("../fonts/lora-italic-latin-ext-G2qDviE.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display — titres (variable 400→800) */
@font-face {
    font-family: 'Playfair Display'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../fonts/playfair-latin-XKXZKVG.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../fonts/playfair-latin-ext-whxIhII.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display'; font-style: italic; font-weight: 400 800; font-display: swap;
    src: url("../fonts/playfair-italic-latin-i9iIiWJ.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display'; font-style: italic; font-weight: 400 800; font-display: swap;
    src: url("../fonts/playfair-italic-latin-ext-mNznki6.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Dancing Script — accent manuscrit (esprit du logo) */
@font-face {
    font-family: 'Dancing Script'; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/dancing-script-700-latin-gb15Fae.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Dancing Script'; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/dancing-script-700-latin-ext-rDf1MOS.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Jetons de design ──────────────────────────────────────────────────────── */

:root {
    /* Palette charte — couleurs brutes */
    --green-deep:    #2B3A26;  /* Vert Profond */
    --green-deep-2:  #354627;  /* nuance pour dégradés */
    --copper:        #D08C5D;  /* Cuivré Chaleureux */
    --copper-deep:   #A85D2E;  /* cuivré assombri — AA sur blanc */
    --copper-deeper: #8F4D24;  /* survol */
    --sage:          #7C8B64;  /* Vert Émaillé */
    --sage-deep:     #5E6B49;
    --purple:        #8F54A4;  /* Violet Chou-rouge */
    --purple-deep:   #7A4490;
    --ecru:          #FDF7ED;  /* Écru de Fond */
    --spoon:         #BEA784;  /* Bois de Cuillère */
    --rosemary:      #868F6C;  /* Herbe de Romarin */
    --leek:          #8AB46C;  /* Vert Poireau */
    --pumpkin:       #F29A33;  /* Orange Citrouille */
    --carrot:        #F68B1F;  /* Orange Carotte */
    --radish:        #D63F3F;  /* Rouge Radis */

    /* Rôles sémantiques */
    --color-bg:           var(--ecru);
    --color-bg-2:         #F6EEDE;  /* écru légèrement plus soutenu */
    --color-surface:      #FFFFFF;
    --color-surface-soft: #FBF4E7;  /* carte tiède */
    --color-border:       #EADFCB;
    --color-border-soft:  #F0E7D6;
    --color-text:         var(--green-deep);
    --color-text-light:   #6B6151;  /* brun-gris chaud — AA sur écru */
    --color-text-inv:     var(--ecru);
    --color-heading:      var(--green-deep);

    --color-primary:      var(--copper);        /* accent de marque */
    --color-primary-dark: var(--copper-deep);
    --color-cta:          var(--copper-deep);    /* fond des boutons d'action */
    --color-cta-hover:    var(--copper-deeper);
    --color-link:         #9E5526;               /* cuivré texte — AA */
    --color-secondary:    var(--sage);
    --color-secondary-dark: var(--sage-deep);
    --color-accent:       var(--purple);

    /* Typographie */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Lora', Georgia, 'Times New Roman', serif;
    --font-script:  'Dancing Script', 'Brush Script MT', cursive;
    --font-ui:      system-ui, -apple-system, 'Segoe UI', sans-serif;

    --font-size-xs:   0.78rem;
    --font-size-sm:   0.88rem;
    --font-size-base: 1.02rem;
    --font-size-lg:   1.15rem;
    --font-size-xl:   1.3rem;
    --font-size-2xl:  1.6rem;
    --font-size-3xl:  2.1rem;
    --font-size-4xl:  2.75rem;

    /* Espacements */
    --space-1:  0.25rem;  --space-2:  0.5rem;  --space-3:  0.75rem;
    --space-4:  1rem;     --space-5:  1.25rem; --space-6:  1.5rem;
    --space-8:  2rem;     --space-10: 2.5rem;  --space-12: 3rem;
    --space-16: 4rem;     --space-20: 5rem;    --space-24: 6rem;

    /* Rayons */
    --radius-sm:   8px;
    --radius:      14px;
    --radius-lg:   24px;
    --radius-pill: 999px;

    /* Ombres chaudes (teintées vert profond / cuivré) */
    --shadow-sm:     0 1px 2px rgba(43,58,38,.06), 0 2px 6px rgba(43,58,38,.05);
    --shadow:        0 8px 24px -8px rgba(43,58,38,.18);
    --shadow-lg:     0 24px 56px -16px rgba(43,58,38,.30);
    --shadow-copper: 0 12px 28px -10px rgba(168,93,46,.55);

    /* Dégradés */
    --grad-hero:   radial-gradient(120% 120% at 85% 0%, #3d5130 0%, #2b3a26 55%, #22301d 100%);
    /* Dégradé cuivré des boutons : maintenu dans une plage où le texte blanc
       reste conforme WCAG AA (≥ 4.5:1) sur toute l'étendue du dégradé. */
    --grad-copper: linear-gradient(135deg, #AB6230 0%, #9E5526 50%, #8F4D24 100%);
    --grad-copper-soft: linear-gradient(135deg, #E0A06F 0%, #C97E48 100%); /* décor non-textuel */
    --grad-page:   linear-gradient(180deg, #FBF4E7 0%, var(--ecru) 100%);

    /* Layout */
    --container-max: 1180px;
    --container-pad: var(--space-5);
    --nav-height:    72px;
}

/* ─── Reset & base ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(40rem 40rem at 110% -10%, rgba(208,140,93,.07), transparent 60%),
        radial-gradient(34rem 34rem at -10% 12%, rgba(124,139,100,.08), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
a:hover, a:focus { color: var(--color-cta-hover); }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.15;
    color: var(--color-heading);
    letter-spacing: -0.01em;
    font-weight: 700;
}

::selection { background: var(--copper); color: #fff; }

/* ─── Layout ─────────────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
.container--narrow { max-width: 720px; }

main { flex: 1; }

/* ─── Accent manuscrit & sur-titres ───────────────────────────────────────────── */

.script {
    font-family: var(--font-script);
    font-weight: 700;
    line-height: 1;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-script);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--copper);
    line-height: 1;
}
.eyebrow::before {
    content: "";
    width: 2rem; height: 2px;
    background: currentColor;
    border-radius: 2px;
    opacity: .6;
}
.eyebrow--center { justify-content: center; }

/* ─── Navigation ─────────────────────────────────────────────────────────────── */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-height);
    background-color: rgba(253,247,237,.82);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.site-nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.site-nav__logo {
    text-decoration: none;
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.25rem, 0.85rem + 1.7vw, 1.75rem);
    letter-spacing: -0.015em;
    color: var(--green-deep);
    line-height: 1.05;
    white-space: nowrap;
    transition: color .15s;
}
.site-nav__logo .amp {
    font-family: var(--font-script);
    font-weight: 700;
    color: var(--copper);
    padding: 0 .06em;
}
.site-nav__logo:hover { color: #1f2b1b; }
.site-nav__logo:hover .amp { color: var(--copper-deep); }

.nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
    color: var(--green-deep);
    border-radius: var(--radius-sm);
}
.nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav-toggle svg { width: 26px; height: 26px; pointer-events: none; }

.site-nav__menu {
    display: none;
    list-style: none;
    position: fixed;
    top: var(--nav-height);
    inset-inline: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0 var(--space-4);
    flex-direction: column;
    z-index: 99;
    box-shadow: var(--shadow);
}
.site-nav__menu.is-open { display: flex; }

.site-nav__menu li a,
.site-nav__menu li button.nav-link {
    display: block;
    padding: var(--space-3) var(--space-6);
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    transition: background .15s, color .15s;
}
/* Reset propre au seul bouton « Se déconnecter » — ne doit pas écraser le
   fond dégradé du .nav-cta (qui partage le sélecteur a). */
.site-nav__menu li button.nav-link {
    border: none; background: none; cursor: pointer;
    width: 100%; text-align: left;
}
.site-nav__menu li a:not(.nav-cta):hover,
.site-nav__menu li a:not(.nav-cta):focus-visible,
.site-nav__menu li button.nav-link:hover {
    background-color: var(--color-bg-2);
    color: var(--color-link);
}
.site-nav__menu li a.active:not(.nav-cta) { color: var(--color-link); font-weight: 600; }

.nav-cta {
    display: block;
    margin: var(--space-4) var(--space-6) var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--grad-copper);
    color: #fff !important;
    border-radius: var(--radius-pill);
    text-align: center;
    text-decoration: none;
    font-family: var(--font-ui);
    font-weight: 600;
    box-shadow: var(--shadow-copper);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.nav-cta:hover {  filter: brightness(1.04); }

@media (min-width: 880px) {
    .nav-toggle { display: none; }
    .site-nav__menu {
        display: flex !important;
        position: static;
        flex-direction: row;
        align-items: center;
        border: none; padding: 0; box-shadow: none;
        background: transparent;
        gap: var(--space-1);
    }
    .site-nav__menu li a,
    .site-nav__menu li button.nav-link {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-pill);
        position: relative;
    }
    .site-nav__menu li a.active::after {
        content: "";
        position: absolute;
        left: 50%; bottom: 2px;
        width: 18px; height: 3px;
        transform: translateX(-50%);
        background: var(--copper);
        border-radius: 3px;
    }
    .nav-cta { margin: 0; }
}

/* ─── Boutons ─────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s, filter .15s;
}
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.btn-primary {
    background: var(--grad-copper);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-copper);
}
.btn-primary:hover { color: #fff; filter: brightness(1.05); }

.btn-secondary {
    background-color: transparent;
    color: var(--color-link);
    border-color: var(--copper);
}
.btn-secondary:hover { background-color: var(--copper); color: #fff; border-color: var(--copper); }

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--font-size-lg); }

/* Boutons sur fond coloré (hero, bandeaux) */
.btn-on-primary {
    background: var(--grad-copper);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-copper);
}
.btn-on-primary:hover { background: var(--grad-copper); color: #fff;  filter: brightness(1.06); }

.btn-ghost {
    background-color: rgba(253,247,237,.08);
    color: var(--ecru);
    border-color: rgba(253,247,237,.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.btn-ghost:hover { background-color: rgba(253,247,237,.18); color: #fff; border-color: var(--ecru); }

/* ─── Formulaires ─────────────────────────────────────────────────────────────── */

.form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.form-label { font-family: var(--font-ui); font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text); }

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-surface);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
    outline: none;
    border-color: var(--copper);
    box-shadow: 0 0 0 3px rgba(208,140,93,.20);
}
.form-control.is-invalid { border-color: var(--radish); }
.form-errors { list-style: none; padding: 0; margin: var(--space-1) 0 0; }
.form-error { font-size: var(--font-size-xs); color: var(--radish); margin-top: var(--space-1); }
.form-help { font-family: var(--font-ui); font-size: var(--font-size-xs); color: var(--color-text-light); margin-top: var(--space-1); }

.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-check { display: flex; align-items: flex-start; gap: var(--space-2); }
.form-check input[type="checkbox"] { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; accent-color: var(--copper); }
.form-check__label { font-size: var(--font-size-sm); }

.contact-form ul { list-style: none; margin: var(--space-1) 0 0; }
.contact-form ul li { font-size: var(--font-size-xs); color: var(--radish); }

/* ─── Alertes flash ───────────────────────────────────────────────────────────── */

.flash-messages { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.alert {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
}
.alert-success { background: #E7F0DC; border-color: var(--leek); color: #3C5226; }
.alert-danger  { background: #FBE3E3; border-color: #EFA5A5; color: #8E2020; }
.alert-warning { background: #FCEFD6; border-color: #F1C57A; color: #8A5A12; }
.alert-info    { background: #E6EBDD; border-color: var(--rosemary); color: #4A5237; }

/* ─── Cartes ──────────────────────────────────────────────────────────────────── */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-body { padding: var(--space-6); }
.card-title { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }

/* ─── Sections ────────────────────────────────────────────────────────────────── */

.section { padding-block: var(--space-20); }
.section-sm { padding-block: var(--space-8); }
.section--alt {
    background-color: var(--color-surface);
    border-block: 1px solid var(--color-border-soft);
}

.section-title {
    font-size: clamp(var(--font-size-2xl), 4.5vw, var(--font-size-3xl));
    margin-bottom: var(--space-4);
    font-weight: 800;
}
.section-subtitle { font-size: var(--font-size-lg); color: var(--color-text-light); max-width: 60ch; }

.section-head { text-align: center; max-width: 68ch; margin-inline: auto; margin-bottom: var(--space-12); }
.section-head .lead { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: var(--space-3); }

.lead { font-size: var(--font-size-lg); color: var(--color-text-light); max-width: 65ch; }
.section-title + .lead { margin-top: var(--space-3); }

/* En-tête de section décoré d'un petit filet cuivré */
.section-title--deco { position: relative; display: inline-block; }
.section-title--deco::after {
    content: "";
    display: block;
    width: 64px; height: 4px;
    margin: var(--space-4) auto 0;
    background: var(--grad-copper);
    border-radius: 4px;
}

/* ═══ HERO d'accueil — dynamique & immersif ═══════════════════════════════════ */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--grad-hero);
    color: var(--ecru);
    padding-block: clamp(var(--space-16), 9vw, var(--space-24));
}

/* Halos colorés flous (potager) en arrière-plan */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: -1;
    pointer-events: none;
}
.hero::before {
    width: 38rem; height: 38rem;
    top: -14rem; right: -10rem;
    background: radial-gradient(circle, rgba(208,140,93,.55), transparent 70%);
}
.hero::after {
    width: 32rem; height: 32rem;
    bottom: -16rem; left: -10rem;
    background: radial-gradient(circle, rgba(143,84,164,.40), transparent 70%);
}

/* Mouchetures / grain léger (texture artisanale) */
.hero__grain {
    position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image:
        radial-gradient(rgba(253,247,237,.10) 1px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 75%);
}

.hero__content { position: relative; max-width: 62ch; margin-inline: auto; text-align: center; }

.hero__inner {
    position: relative;
    display: grid;
    gap: var(--space-12);
    align-items: center;
}
@media (min-width: 920px) {
    .hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--space-16); }
}

.hero__text { text-align: center; }
@media (min-width: 920px) { .hero__text { text-align: left; } }

.hero .eyebrow { color: #F0C49B; font-size: 1.7rem; margin-bottom: var(--space-4); }
@media (min-width: 920px) { .hero__text .eyebrow::before { display: inline-block; } }

.hero__title {
    font-size: clamp(2.4rem, 6.5vw, 4.2rem);
    line-height: 1.05;
    color: var(--ecru);
    font-weight: 800;
    margin-bottom: var(--space-5);
    text-wrap: balance;
}
.hero__title em {
    font-style: italic;
    color: #F2C9A3;
}
.hero__subtitle {
    font-size: clamp(var(--font-size-lg), 2.2vw, var(--font-size-xl));
    color: rgba(253,247,237,.92);
    max-width: 54ch;
    margin: 0 auto var(--space-8);
}
@media (min-width: 920px) { .hero__subtitle { margin-inline: 0; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
@media (min-width: 920px) { .hero__actions { justify-content: flex-start; } }

/* Bandeau de confiance sous les CTA */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    justify-content: center;
    margin-top: var(--space-8);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: rgba(253,247,237,.85);
}
@media (min-width: 920px) { .hero__trust { justify-content: flex-start; } }
.hero__trust span, .hero__trust a { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__trust a { color: inherit; text-decoration: none; }
.hero__trust a:hover, .hero__trust a:focus-visible { text-decoration: underline; }
.hero__trust b { color: var(--ecru); font-family: var(--font-heading); font-weight: 700; }

/* Médaillon logo + orbite de légumes */
.hero__media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 320px;
}
.hero__halo {
    position: absolute;
    width: min(80%, 26rem); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253,247,237,.16), transparent 68%);
}
.hero__logo {
    position: relative;
    z-index: 1;
    width: clamp(220px, 30vw, 340px);
    border-radius: 50%;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.55), 0 0 0 10px rgba(253,247,237,.06);
    animation: float 6s ease-in-out infinite;
}
/* Anneaux décoratifs concentriques (cercles parfaits, centrés sur le logo) */
.hero__ring {
    position: absolute;
    top: 50%; left: 50%;
    width: min(112%, 30rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1.5px dashed rgba(253,247,237,.30);
    border-radius: 50%;
    animation: spin 44s linear infinite;
}
.hero__ring--2 {
    width: min(88%, 23rem);
    border-style: dotted;
    border-color: rgba(208,140,93,.45);
    animation: spin 30s linear infinite reverse;
}
/* Légumes flottants (placés proprement autour du médaillon) */
.hero__float {
    position: absolute;
    z-index: 2;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
    animation: float 5s ease-in-out infinite;
}
.hero__float--1 { top: 5%;    left: 13%;  animation-delay: -.4s;  }  /* carotte */
.hero__float--2 { top: -1%;   right: 25%; animation-delay: -1.6s; }  /* tomate  */
.hero__float--3 { top: 30%;   right: 0%;  animation-delay: -2.8s; }  /* herbe   */
.hero__float--4 { bottom: 17%; right: 7%; animation-delay: -2.1s; }  /* oignon  */
.hero__float--5 { bottom: 2%;  left: 19%; animation-delay: -3.4s; }  /* poireau */
.hero__float--6 { top: 41%;   left: 1%;   animation-delay: -1.1s; }  /* radis     */
.hero__float--7 { top: 9%;    right: 4%;  animation-delay: -2.4s; }  /* poêle     */
.hero__float--8 { bottom: 7%; right: 23%; animation-delay: -0.9s; }  /* casserole */
.hero__float--9 { bottom: 33%; left: 5%;  animation-delay: -3.1s; }  /* couteau   */

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Vague décorative en bas du hero */
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; line-height: 0; }
.hero__wave svg { width: 100%; height: clamp(40px, 6vw, 80px); display: block; }
.hero__wave path { fill: var(--color-bg); }

/* ═══ En-tête de page interne (à propos, prestations…) ════════════════════════ */

.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--grad-page);
    border-bottom: 1px solid var(--color-border);
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    text-align: center;
}
.page-hero::before {
    content: "";
    position: absolute; z-index: -1;
    width: 30rem; height: 30rem; border-radius: 50%;
    top: -16rem; right: -8rem;
    background: radial-gradient(circle, rgba(124,139,100,.22), transparent 70%);
    filter: blur(40px);
}
.page-hero::after {
    content: "";
    position: absolute; z-index: -1;
    width: 24rem; height: 24rem; border-radius: 50%;
    bottom: -16rem; left: -8rem;
    background: radial-gradient(circle, rgba(208,140,93,.20), transparent 70%);
    filter: blur(40px);
}
.page-hero__inner { position: relative; max-width: 70ch; margin-inline: auto; }
.page-hero .eyebrow { margin-bottom: var(--space-3); }
.page-hero__title {
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    font-weight: 800;
    margin-bottom: var(--space-4);
    text-wrap: balance;
}
.page-hero .lead { margin-inline: auto; }

/* ─── Grille de cartes générique ──────────────────────────────────────────────── */

.grid-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-6); list-style: none; }
@media (min-width: 640px)  { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* ─── Cartes « atout » ────────────────────────────────────────────────────────── */

.feature-card {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover {box-shadow: var(--shadow); }
.feature-card__icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 6.5rem; height: 6.5rem;
    margin-bottom: var(--space-4);
    font-size: 2.2rem; line-height: 1;
    border-radius: 50%;
    background: rgba(124,139,100,.16);
    box-shadow: inset 0 0 0 1px rgba(124,139,100,.25);
}
/* Variation chromatique douce des pastilles d'icônes (potager) */
.grid-cards > *:nth-child(3n+1) .feature-card__icon { background: rgba(208,140,93,.16); box-shadow: inset 0 0 0 1px rgba(208,140,93,.3); }
.grid-cards > *:nth-child(3n+2) .feature-card__icon { background: rgba(124,139,100,.16); box-shadow: inset 0 0 0 1px rgba(124,139,100,.3); }
.grid-cards > *:nth-child(3n+3) .feature-card__icon { background: rgba(143,84,164,.14); box-shadow: inset 0 0 0 1px rgba(143,84,164,.28); }
.feature-card__title { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }
.feature-card p { color: var(--color-text-light); }

/* ─── Étapes « Comment ça marche » — timeline à fil conducteur ─────────────────── */

/* Mobile-first : timeline VERTICALE (pastille à gauche, fil pointillé vertical). */
.steps {
    counter-reset: step;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.step {
    position: relative;
    padding: var(--space-5) var(--space-5) var(--space-5) calc(3rem + var(--space-6));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { box-shadow: var(--shadow); }

.step__num {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    width: 3rem; height: 3rem;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--grad-copper);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: 800;
    box-shadow: var(--shadow-copper), 0 0 0 4px var(--color-surface);
    z-index: 2;
}

/* Fil conducteur vertical (mobile) : du bas d'une pastille jusqu'à la carte
   suivante. Porté par ::after de la carte → peint au-dessus de son propre fond. */

.step__title { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-light); margin: 0; }

/* ≥ 860px : timeline HORIZONTALE, sans retour à la ligne (les cartes se
   compressent pour tenir sur une seule rangée — pas de trait parasite). */
@media (min-width: 860px) {
    .steps {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--space-5);
        padding-top: 1.9rem;            /* place pour les pastilles en débord */
    }
    .step {
        flex: 1 1 0;
        min-width: 0;
        padding: calc(1.9rem + var(--space-5)) var(--space-4) var(--space-6);
        text-align: center;
    }
    .step:not(:last-child)::after { content: none; }   /* masque le fil vertical */

    .step__num {
        top: -1.9rem;
        left: 50%;
        transform: translateX(-50%);
        width: 3.8rem; height: 3.8rem;
        font-size: var(--font-size-2xl);
        box-shadow: var(--shadow-copper), 0 0 0 6px var(--color-bg);
    }
    .section--alt .step__num { box-shadow: var(--shadow-copper), 0 0 0 6px var(--color-surface); }

    /* Fil conducteur horizontal : trait reliant chaque pastille à la précédente
       (porté par la carte de droite → peint au-dessus de la carte de gauche). */
   
    .step__title { margin-top: var(--space-2); }
}

/* ─── Cartes « formule » ──────────────────────────────────────────────────────── */

.formula-card { display: flex; flex-direction: column; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.formula-card:hover { box-shadow: var(--shadow); }
.formula-card .card-body { display: flex; flex-direction: column; flex: 1; }
.formula-card__name { font-size: var(--font-size-2xl); color: var(--color-link); margin-bottom: var(--space-1); }
.formula-card__price { font-family: var(--font-heading); font-size: var(--font-size-4xl); font-weight: 800; color: var(--color-text); line-height: 1; }
.formula-card__price span { font-size: var(--font-size-base); font-family: var(--font-body); font-weight: 400; color: var(--color-text-light); }
.formula-card__price-before { font-size: var(--font-size-sm); color: var(--color-text-light); text-decoration: line-through; margin-top: var(--space-1); }
.formula-card__period { font-size: var(--font-size-sm); color: var(--color-text-light); margin: var(--space-2) 0 var(--space-5); }
.formula-card__features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.formula-card__features li { padding-left: 1.8em; position: relative; }
.formula-card__features li::before {
    content: "✓";
    position: absolute; left: 0; top: -1px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3em; height: 1.3em;
    background: rgba(138,180,108,.22);
    color: var(--sage-deep);
    border-radius: 50%;
    font-size: .8em; font-weight: 700;
}
.formula-card .btn { margin-top: auto; }
.formula-card--featured {
    border-color: var(--copper);
    box-shadow: var(--shadow);
    position: relative;
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        var(--grad-copper) border-box;
    border: 2px solid transparent;
}
@media (min-width: 1024px) { .formula-card--featured { transform: scale(1.03); } .formula-card--featured:hover { transform: scale(1.03) } }

.badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--grad-copper);
    color: #fff;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

/* ─── Étiquettes ──────────────────────────────────────────────────────────────── */

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin-top: var(--space-5); }
.tag {
    display: inline-block;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* ─── Bande d'appel à l'action ────────────────────────────────────────────────── */

.cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--grad-hero);
    color: var(--ecru);
    text-align: center;
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);
    box-shadow: var(--shadow-lg);
}
.cta-band::before {
    content: "";
    position: absolute; z-index: -1;
    width: 26rem; height: 26rem; border-radius: 50%;
    top: -14rem; right: -8rem;
    background: radial-gradient(circle, rgba(208,140,93,.5), transparent 70%);
    filter: blur(50px);
}
.cta-band h2 { color: var(--ecru); font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl)); margin-bottom: var(--space-3); }
.cta-band p { max-width: 55ch; margin: 0 auto var(--space-6); color: rgba(253,247,237,.92); }
.cta-band .hero__actions { justify-content: center; }

.note { font-family: var(--font-ui); font-size: var(--font-size-sm); color: var(--color-text-light); }

/* ─── Sous-titre de groupe ────────────────────────────────────────────────────── */

.subsection-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
}
.subsection-title small { font-weight: 400; color: var(--color-text-light); font-size: var(--font-size-sm); }

/* ─── Contenu rédactionnel ────────────────────────────────────────────────────── */

.prose { color: var(--color-text); }
.prose h2 { font-size: var(--font-size-2xl); margin-top: var(--space-10); margin-bottom: var(--space-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--font-size-xl); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose p { margin-bottom: var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose a { text-decoration: underline; }
/* Lettrine sur le premier paragraphe d'un récit */
.prose--lead > p:first-of-type::first-letter {
    font-family: var(--font-heading);
    font-size: 3.4em;
    font-weight: 800;
    float: left;
    line-height: .8;
    padding: .05em .12em 0 0;
    color: var(--copper);
}

/* ─── Encart d'information ────────────────────────────────────────────────────── */

.callout {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--sage);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
}
.callout p { margin: 0; }

/* ─── Emplacements photo (cadres + visuels d'attente à remplacer) ──────────────── */

/* Cadre d'image générique. Quand une vraie photo est fournie, le <figure>
   contient un <img> ; sinon il affiche un visuel d'attente (.photo-ph). */
.media-frame {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 3;
}
.media-frame--portrait { aspect-ratio: 4 / 5; }
.media-frame--square   { aspect-ratio: 1 / 1; }
.media-frame--wide     { aspect-ratio: 16 / 9; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Visuel d'attente : dégradé écru + icône + légende, liseré pointillé « déposez
   une photo ici ». Purement décoratif (aria-hidden côté template). */
.photo-ph {
    position: absolute; inset: 0;
    display: grid; place-content: center; justify-items: center; gap: var(--space-3);
    text-align: center; padding: var(--space-6);
    background: radial-gradient(120% 120% at 50% 0%, #FBF4E7 0%, #F1E6D2 100%);
    color: var(--color-text-light);
}
.photo-ph::after {
    content: "";
    position: absolute; inset: 12px;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius);
    pointer-events: none;
}
.photo-ph__icon { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; filter: drop-shadow(0 4px 8px rgba(43,58,38,.18)); }
.photo-ph__label { font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: 600; color: var(--copper-deep); max-width: 24ch; }

/* Bande « image + texte » sur deux colonnes (desktop), empilée sur mobile. */
.media-band { display: grid; gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: center; }
.media-band__text > :first-child { margin-top: 0; }
.media-band__text .btn { margin-top: var(--space-6); }
@media (min-width: 860px) {
    .media-band { grid-template-columns: 1fr 1fr; }
    .media-band--reverse .media-band__media { order: 2; }
}

/* Galerie d'images (aperçu) : colonnes fluides. */
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }

/* Lien social (Instagram…) sous une présentation. */
.social-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-6);
    font-family: var(--font-ui); font-weight: 600;
    color: var(--color-link); text-decoration: none;
}
.social-link:hover { text-decoration: underline; }

/* ─── Médaillon « cuisinière » dans le hero ───────────────────────────────────── */

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-16) var(--space-4) var(--space-4);
    background: rgba(253,247,237,.08);
    border: 1px solid rgba(253,247,237,.22);
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.hero__badge img {
    width: 5.2rem; height: 5.2rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--copper), 0 6px 16px -6px rgba(0,0,0,.6);
}
.hero__badge span {
    font-family: var(--font-ui);
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: rgba(253,247,237,.92);
    line-height: 1.25;
    text-align: left;
}
.hero__badge b { display: block; color: var(--ecru); font-family: var(--font-script); font-size: 3.25rem; font-weight: 700; }
@media (min-width: 920px) { .hero__text .hero__badge { align-self: flex-start; } }

/* ─── Bloc concept embelli (fond doux + cartes plus présentes) ─────────────────── */

.section--soft {
    background:
        radial-gradient(48rem 26rem at 50% -10%, rgba(124,139,100,.12), transparent 70%),
        radial-gradient(40rem 24rem at 100% 120%, rgba(208,140,93,.10), transparent 70%),
        var(--grad-page);
    border-block: 1px solid var(--color-border-soft);
}
.feature-card--lg { padding: var(--space-10) var(--space-6); }
.feature-card--lg .feature-card__icon {
    width: 10.6rem; height: 10.6rem;
    font-size: 2.9rem;
    margin-bottom: var(--space-5);
    box-shadow: inset 0 0 0 1px rgba(124,139,100,.25), 0 10px 24px -12px rgba(43,58,38,.35);
}
.feature-card--lg .feature-card__title { font-size: var(--font-size-2xl); }
.feature-card--lg p { font-size: var(--font-size-lg); }

/* ─── Chips « prestations sur mesure » (plus gros, plus lisibles) ──────────────── */

.feature-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    list-style: none;
    margin-top: var(--space-10);
}
.feature-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-6);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-text);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-pill:hover { box-shadow: var(--shadow); border-color: var(--copper); }
.feature-pill__icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    background: rgba(208,140,93,.16);
    box-shadow: inset 0 0 0 1px rgba(208,140,93,.3);
    font-size: 1.5rem; line-height: 1;
}
.feature-pills > li:nth-child(3n+2) .feature-pill__icon { background: rgba(124,139,100,.16); box-shadow: inset 0 0 0 1px rgba(124,139,100,.3); }
.feature-pills > li:nth-child(3n+3) .feature-pill__icon { background: rgba(143,84,164,.14); box-shadow: inset 0 0 0 1px rgba(143,84,164,.28); }

/* ─── Icônes crayonnées (style dessiné main) ──────────────────────────────────── */

.sketch-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 5.2rem; height: 5.2rem;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: rgba(208,140,93,.14);
    box-shadow: inset 0 0 0 1.5px rgba(208,140,93,.3);
    color: var(--copper-deep);
}
.sketch-icon svg { width: 2.7rem; height: 2.7rem; filter: url(#sketchy); }
.grid-cards > *:nth-child(3n+2) .sketch-icon { background: rgba(124,139,100,.16); box-shadow: inset 0 0 0 1.5px rgba(124,139,100,.32); color: var(--sage-deep); }
.grid-cards > *:nth-child(3n+3) .sketch-icon { background: rgba(143,84,164,.14); box-shadow: inset 0 0 0 1.5px rgba(143,84,164,.3); color: var(--purple-deep); }

/* ─── Bande signature « la cuisinière » ───────────────────────────────────────── */

.signature {
    font-family: var(--font-script);
    font-size: 2rem;
    color: var(--copper-deep);
    line-height: 1;
    margin-top: var(--space-5);
}
.signature small { display: block; font-family: var(--font-ui); font-size: var(--font-size-sm); color: var(--color-text-light); margin-top: var(--space-1); }

/* ─── Encart d'explication (concept des recettes du mois) ──────────────────────── */

.concept-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    list-style: none;
    margin-top: var(--space-8);
}
@media (min-width: 720px) { .concept-grid { grid-template-columns: repeat(3, 1fr); } }
.concept-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--copper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.concept-item__icon { font-size: 1.8rem; line-height: 1; }
.concept-item h3 { font-size: var(--font-size-lg); }
.concept-item p { color: var(--color-text-light); margin: 0; }

/* ─── Footer ──────────────────────────────────────────────────────────────────── */

.site-footer {
    position: relative;
    background-color: var(--green-deep);
    color: rgba(253,247,237,.72);
    padding-block: var(--space-16) var(--space-8);
    margin-top: auto;
}
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 640px)  { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    text-decoration: none;
}
.site-footer__brand img { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.site-footer__brand b {
    font-family: var(--font-script);
    font-size: 1.5rem;
    color: var(--ecru);
}
.site-footer__tagline { font-family: var(--font-heading); font-style: italic; color: var(--ecru); margin-bottom: var(--space-2); }

.site-footer h3 {
    color: var(--ecru);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: var(--space-4);
}
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer a { color: rgba(253,247,237,.72); text-decoration: none; font-size: var(--font-size-sm); }
.site-footer a:hover { color: var(--ecru); }
.site-footer__bottom {
    border-top: 1px solid rgba(253,247,237,.12);
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    font-size: var(--font-size-xs);
    text-align: center;
}

/* ─── Utilitaires ─────────────────────────────────────────────────────────────── */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-muted { color: var(--color-text-light); }

.skip-link {
    position: absolute; top: -100%; left: var(--space-4);
    background: var(--color-cta); color: #fff;
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-family: var(--font-ui); font-weight: 600;
    z-index: 1000; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ─── Recettes du mois (catalogue + fiche) ────────────────────────────────────── */

.recipe-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
.recipe-card:hover { box-shadow: var(--shadow-lg);  }
/* Carte non cliquable (recettes du mois affichées sans lien vers une fiche) : pas d'effet d'interactivité. */
.recipe-card--static:hover { box-shadow: var(--shadow-sm); }
.recipe-card--static:hover .recipe-card__media img { transform: none; }
.recipe-card__link { display: block; color: inherit; text-decoration: none; }
.recipe-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--color-surface-soft), var(--color-bg-2));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.recipe-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.recipe-card:hover .recipe-card__media img { transform: scale(1.05); }
.recipe-card__placeholder { font-size: 3.2rem; opacity: .55; }
.recipe-card__body { padding: var(--space-5); }
.recipe-card__body .tag { margin-bottom: var(--space-2); }
.recipe-card__title { font-size: var(--font-size-xl); margin: var(--space-2) 0; }
.recipe-card__meta { color: var(--color-text-light); font-family: var(--font-ui); font-size: var(--font-size-sm); margin: 0; }

/* ─── Recettes du mois — « carte du menu » (titres seuls, sans image ni lien) ── */
.recipe-menu {
    max-width: 760px;
    margin-inline: auto;
    padding: var(--space-12) var(--space-8);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.recipe-menu__count {
    font-family: var(--font-script);
    font-size: var(--font-size-2xl);
    color: var(--color-primary-dark);
    margin: 0 0 var(--space-10);
}
.menu-section + .menu-section { margin-top: var(--space-10); }
.menu-section__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-primary-dark);
    margin: 0 0 var(--space-5);
}
.menu-section__title::after {
    content: "";
    display: block;
    width: 44px; height: 2px;
    margin: var(--space-3) auto 0;
    background: var(--copper);
}
.menu-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: var(--space-4);
}
.menu-list__item {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    line-height: 1.3;
    color: var(--color-heading);
}
@media (min-width: 640px) {
    .recipe-menu { padding: var(--space-16) var(--space-12); }
}

.breadcrumb { margin-bottom: var(--space-4); font-family: var(--font-ui); font-size: var(--font-size-sm); }
.recipe-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-text-light); font-family: var(--font-ui); margin: var(--space-3) 0 var(--space-6); }
.recipe-photo { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-6); box-shadow: var(--shadow); }
.recipe-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-6); }
@media (min-width: 768px) { .recipe-layout { grid-template-columns: 300px 1fr; align-items: start; } }
.recipe-ingredients {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .recipe-ingredients { position: sticky; top: calc(var(--nav-height) + var(--space-4)); } }
.ingredient-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.ingredient-list li { padding-bottom: var(--space-2); border-bottom: 1px dashed var(--color-border); }
.ingredient-list li:last-child { border-bottom: 0; }

/* ─── Administration ──────────────────────────────────────────────────────────── */

.admin-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
@media (min-width: 768px) { .admin-layout { grid-template-columns: 232px 1fr; } }

.admin-sidebar {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .admin-sidebar { position: sticky; top: calc(var(--nav-height) + var(--space-4)); } }
.admin-sidebar__heading {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-light); margin-bottom: var(--space-3);
}
.admin-sidebar ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.admin-sidebar a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    color: var(--color-text); text-decoration: none;
    transition: background .15s, color .15s;
}
.admin-sidebar a:hover { background-color: var(--color-bg-2); color: var(--color-link); }
.admin-sidebar a.active { background: rgba(208,140,93,.14); color: var(--color-link); font-weight: 600; }

/* Déconnexion en bas de la sidebar — séparateur + bouton calqué sur les liens */
.admin-sidebar__logout { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.admin-sidebar__logout button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: none;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.admin-sidebar__logout button:hover { background-color: var(--color-bg-2); color: var(--radish); }

.admin-content { min-width: 0; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.admin-toolbar .section-title { margin-bottom: 0; }

/* ─── Fiche de détail (facture, contrat…) ─────────────────────────────────── */
.admin-detail {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-8);
    margin-bottom: var(--space-8);
}
.detail-list {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    margin: 0;
}
.detail-list dt {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-primary-dark);
    padding: var(--space-4) var(--space-6) var(--space-4) 0;
    border-top: 1px solid var(--color-border-soft);
    align-self: center;
}
.detail-list dd {
    margin: 0;
    padding: var(--space-4) 0;
    color: var(--color-text);
    border-top: 1px solid var(--color-border-soft);
    align-self: center;
}
.detail-list > dt:first-of-type,
.detail-list > dd:nth-of-type(1) { border-top: 0; }
.detail-list dd small { color: var(--color-text-light); }

@media (max-width: 640px) {
    .admin-detail { padding: var(--space-2) var(--space-5); }
    .detail-list { grid-template-columns: 1fr; }
    .detail-list dt { padding-bottom: 0; }
    .detail-list dd { padding-top: var(--space-1); border-top: 0; }
    .detail-list > dd:nth-of-type(1) { border-top: 0; }
}

/* Barre d'actions sous une fiche de détail : boutons alignés, séparés par un filet. */
.admin-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.admin-actions-bar form { margin: 0; }

.admin-stats { margin-top: var(--space-6); }
.admin-stat {
    text-decoration: none; color: var(--color-text);
    border-radius: var(--radius-lg);
    transition: box-shadow .15s ease, transform .15s ease;
}
.admin-stat:hover { box-shadow: var(--shadow); color: var(--color-text); }
.admin-stat__value { display: block; font-family: var(--font-heading); font-size: var(--font-size-4xl); font-weight: 800; color: var(--color-link); }
.admin-stat__label { display: block; font-family: var(--font-ui); color: var(--color-text-light); margin-top: var(--space-1); }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-family: var(--font-ui);
    box-shadow: var(--shadow-sm);
}
.admin-table th, .admin-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.admin-table thead th { background-color: var(--color-bg-2); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-light); }
.admin-table tbody tr { transition: background .12s; }
.admin-table tbody tr:hover { background: var(--color-surface-soft); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table code { font-size: var(--font-size-sm); color: var(--color-text-light); }
.admin-table__actions { text-align: right; white-space: nowrap; }
.admin-table__actions .btn { margin-left: var(--space-2); }

.admin-form { max-width: 100%; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.btn-danger { background-color: transparent; color: #8E2020; border-color: #EFA5A5; }
.btn-danger:hover { background-color: #8E2020; color: #fff; border-color: #8E2020; }

.admin-thumb {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-bg-2);
}
.admin-thumb--empty { font-size: 1.4rem; }
.admin-thumb--lg { width: 120px; height: 120px; font-size: 2.4rem; }

.admin-table .badge { margin-bottom: 0; }
.badge--ok   { background: linear-gradient(135deg, var(--leek), var(--sage-deep)); }
.badge--off  { background: var(--color-text-light); }
.badge--info { background: var(--color-primary-dark); }

/* ─── Planning hebdomadaire (admin) ───────────────────────────────────────────── */
.schedule-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.schedule-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 700px)  { .schedule-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .schedule-grid { grid-template-columns: repeat(4, 1fr); } }
.schedule-day { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface); }
.schedule-day__title { font-family: var(--font-ui); font-weight: 700; margin-bottom: var(--space-2); }
.schedule-period { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }
.schedule-period__label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-light); margin-bottom: var(--space-1); }
.schedule-free { color: var(--color-text-light); font-style: italic; }
.schedule-event { background: var(--color-bg); border-radius: var(--radius-sm); padding: var(--space-2); margin-bottom: var(--space-2); }
.schedule-event__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.schedule-event .badge { margin-bottom: 0; }
.schedule-event__actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.schedule-event__actions select { padding: .2rem .4rem; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 540px) { .form-grid { grid-template-columns: 1fr 1fr 1fr 1fr;  } }
.admin-form--wide { max-width: 100%; }

.ri-collection-wrap { border: 0; padding: 0; margin: var(--space-6) 0; }
.ri-rows { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.ri-row {
    /* Ligne = [conteneur des 3 champs] + bouton « Retirer ». */
    display: flex; align-items: flex-end; gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
/* Conteneur compound rendu par Symfony (form_widget) qui enveloppe les 3 champs :
   ingrédient | quantité | unité alignés sur une seule ligne.
   minmax(0,…) laisse les <select> rétrécir au lieu de déborder/passer à la ligne. */
.ri-row > div {
    flex: 1 1 auto; min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-3) var(--space-4);
}
.ri-row .form-group { margin-bottom: 0; min-width: 0; }
.ri-row__remove { flex: 0 0 auto; align-self: end; }

/* Empilement maîtrisé sur petits écrans : ingrédient pleine largeur, puis
   quantité/unité côte à côte, bouton « Retirer » sur sa propre ligne. */
@media (max-width: 560px) {
    .ri-row { flex-wrap: wrap; }
    .ri-row > div { grid-template-columns: 1fr 1fr; }
    .ri-row > div > .form-group:first-child { grid-column: 1 / -1; }
    .ri-row__remove { width: 100%; }
}

/* Barre d'actions de la collection (ajouter / nouvel ingrédient) */
.ri-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Mini-formulaire de création rapide d'un ingrédient */
.ri-new {
    margin-top: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface-soft);
    border: 1px dashed var(--copper);
    border-radius: var(--radius);
}
.ri-new__title { font-family: var(--font-heading); font-weight: 700; margin-bottom: var(--space-4); }
.ri-new__fields { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 540px) { .ri-new__fields { grid-template-columns: 2fr 1fr; } }
.ri-new__fields .form-group { margin-bottom: 0; }
.ri-new__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.ms-recipes { border: 0; padding: 0; margin: var(--space-6) 0; }
.checkbox-grid {
    display: grid; grid-template-columns: 1fr; gap: var(--space-2);
    max-height: 360px; overflow-y: auto;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
@media (min-width: 640px)  { .checkbox-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .checkbox-grid { grid-template-columns: 1fr 1fr 1fr; } }
.checkbox-item { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--font-size-sm); }
.checkbox-item input { width: auto; accent-color: var(--copper); }
.checkbox-item input:disabled + * { opacity: .5; }
.choice-counter { margin-top: var(--space-3); font-family: var(--font-ui); font-weight: 600; color: var(--color-text-light); }

.dashboard-note {
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--sage);
    border-radius: var(--radius);
}

/* ─── Animations d'apparition ─────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.hero__text > * { animation: rise .8s cubic-bezier(.2,.7,.3,1) both; }
.hero__text > *:nth-child(1) { animation-delay: .05s; }
.hero__text > *:nth-child(2) { animation-delay: .15s; }
.hero__text > *:nth-child(3) { animation-delay: .25s; }
.hero__text > *:nth-child(4) { animation-delay: .35s; }
.hero__text > *:nth-child(5) { animation-delay: .45s; }
.hero__media { animation: fade-in 1.1s ease both .2s; }
.page-hero__inner > * { animation: rise .7s cubic-bezier(.2,.7,.3,1) both; }
.page-hero__inner > *:nth-child(2) { animation-delay: .1s; }
.page-hero__inner > *:nth-child(3) { animation-delay: .2s; }

/* ─── Impression (liste de courses) ───────────────────────────────────────────── */

@media print {
    .site-nav, .site-footer, .skip-link, .no-print, .flash-messages { display: none !important; }
    body { background: #fff; color: #000; background-image: none; }
    .section { padding-block: 0; }
    .shopping-list .admin-table { box-shadow: none; }
    a[href]::after { content: ''; }
}

/* ─── Mouvement réduit (accessibilité) ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .hero__logo, .hero__orbit, .hero__orbit span { animation: none !important; }
}

.container_admin { max-width:none!important; }
.float_right { float:right!important;   }   
.float_left { float:left!important; }
.hero__actions .btn {     font-size: 15px !important;
    padding: 10px 11px; }

 .home .card {  
        border:0px!important; 
}

.recettes img { float:left; width: 13rem; height:13rem; margin-right:2rem;  }
.recettes { text-align:left!important; }

/* ── Téléphone mis en avant (page contact) ──────────────────────────────── */
.contact-phone { margin-top: var(--space-5); font-family: var(--font-ui); }
.contact-phone > span { color: var(--color-text-light); }
.contact-phone__number { font-size: var(--font-size-xl, 1.4rem); font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.contact-phone__number:hover { text-decoration: underline; }

/* ── Fil d'Ariane hiérarchique (pages SEO) ──────────────────────────────── */
.breadcrumb { padding-top: var(--space-4); }
.breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0; margin: 0; }
.breadcrumb__item { display: flex; align-items: center; color: var(--color-text-light); }
.breadcrumb__item + .breadcrumb__item::before { content: "›"; margin-right: var(--space-2); color: var(--color-text-light); }
.breadcrumb__item a { color: var(--color-text-light); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb__item [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ── Maillage interne « À découvrir aussi » ─────────────────────────────── */
.related-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; margin: 0; }
.related-links__item { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-family: var(--font-ui); color: var(--color-text); text-decoration: none; }
.related-links__item:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── « À découvrir aussi » : cartes (remplace l'ancienne liste à puces) ──── */
.related-cards {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 680px) {
    .related-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.related-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    height: 100%;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--color-text);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--copper); }
.related-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.related-card__tag {
    align-self: flex-start;
    font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-link);
    background: rgba(208,140,93,.12);
    padding: .2rem .6rem; border-radius: var(--radius-pill);
}
.related-card__title { font-size: var(--font-size-xl); margin: 0; }
.related-card__desc { flex: 1; margin: 0; color: var(--color-text-light); font-size: var(--font-size-sm); }
.related-card__more {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-ui); font-weight: 700; font-size: var(--font-size-sm);
    color: var(--color-link);
}
.related-card__more svg { width: 1.1em; height: 1.1em; transition: transform .18s ease; }
.related-card:hover .related-card__more svg { transform: translateX(3px); }

/* ── Fil d'Ariane SEO : variante « barre » ─────────────────────────────── */
.breadcrumb--trail {
    margin-bottom: 0;
    padding-block: var(--space-3);
    background: var(--color-bg-2);
    border-bottom: 1px solid var(--color-border);
}
.breadcrumb--trail .breadcrumb__list { justify-content: flex-start; }
.breadcrumb--trail .breadcrumb__item a { display: inline-flex; align-items: center; }
.breadcrumb__home { width: 1.05em; height: 1.05em; margin-right: .4em; }

/* ── Mise en page contact : 2 colonnes (prise de contact + zone) ────────── */
.contact-layout {
    display: grid; grid-template-columns: 1fr;
    gap: clamp(var(--space-8), 4vw, var(--space-12));
    align-items: start;
}
@media (min-width: 920px) {
    .contact-layout { grid-template-columns: 1.15fr 0.85fr; }
}
.contact-layout__main > .section-title,
.contact-layout__aside > .section-title { margin-bottom: var(--space-5); }

.contact-methods { display: flex; flex-direction:column; gap: var(--space-4); margin-bottom: var(--space-8); }
@media (min-width: 480px) { .contact-methods { grid-template-columns: 1fr 1fr; } }
.contact-method {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--color-text);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contact-method:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--copper); }
.contact-method__icon {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--grad-copper); color: #fff;
}
.contact-method__icon svg { width: 1.4rem; height: 1.4rem; }
.contact-method__body { display: flex; flex-direction: column; min-width: 0; }
.contact-method__label { font-family: var(--font-ui); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-light); }
.contact-method__value { font-weight: 700; font-size: var(--font-size-lg); color: var(--color-heading); word-break: break-word; }
.contact-form__title { font-size: var(--font-size-xl); margin-bottom: var(--space-5); }

/* ── Bande « zone d'intervention » (à propos, prestations, pilier) ──────── */
.zone-band { display: grid; gap: clamp(var(--space-6), 4vw, var(--space-10)); align-items: center; }
@media (min-width: 860px) { .zone-band { grid-template-columns: 1fr 1fr; } }
.zone-band__text > :first-child { margin-top: 0; }
.zone-aside__intro { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-ui); font-weight: 600; color: var(--color-text-light); }

/* Communes desservies : pastilles compactes (réutilise .feature-pill). */
.zone-communes { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.zone-communes .feature-pill { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); font-weight: 600; border-width: 1px; }
.feature-pill--link { text-decoration: none; color: var(--color-text); }
.feature-pill--link:hover { color: var(--copper-deep); border-color: var(--copper); }

/* ── Carte SVG de la zone d'intervention (auto-hébergée, CSP-safe) ──────── */
.zone-map-figure { margin: 0; }
.zone-map {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}
.zone-map__bg { fill: var(--color-surface-soft); }
.zone-map__river { stroke: rgba(124,139,100,.45); stroke-width: 6; stroke-linecap: round; }
.zone-map__radius { fill: rgba(208,140,93,.10); stroke: var(--copper); stroke-width: 2; stroke-dasharray: 7 6; }
.zone-map__dot { fill: var(--sage-deep); }
.zone-map__label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; fill: var(--color-text-light); }
.zone-map__label--center { font-size: 15px; font-weight: 800; fill: var(--green-deep); }
.zone-map__pin { fill: var(--copper-deep); }
.zone-map__pin-dot { fill: var(--ecru); }
.zone-map__badge { fill: var(--green-deep); }
.zone-map__badge-text { font-family: var(--font-ui); font-size: 13px; font-weight: 700; fill: var(--ecru); }
.zone-map-figure__caption { margin-top: var(--space-3); font-family: var(--font-ui); font-size: var(--font-size-xs); color: var(--color-text-light); text-align: center; }

/* ── Réseaux sociaux (Facebook, Instagram) ─────────────────────────────── */
.social-links { display: flex; flex-flow: row wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.social-links__item {
    display: inline-flex; align-items: center; gap: .45rem;
    min-width: 2.6rem; height: 2.6rem; padding: 0 .7rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background .15s ease, transform .15s ease, color .15s ease, border-color .15s ease;
}
.social-links__item svg { width: 1.3rem; height: 1.3rem; flex: none; }
.social-links__soon { font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* Variante footer (fond vert profond). */
.site-footer__social { margin-top: var(--space-6); }
.site-footer__social-label { display: block; margin-bottom: var(--space-2); font-family: var(--font-ui); font-weight: 700; font-size: var(--font-size-sm); color: var(--ecru); }
.site-footer .social-links { flex-direction: row; gap: var(--space-3); }
.site-footer .social-links__item {
    color: var(--ecru);
    background: rgba(253,247,237,.10);
    border: 1px solid rgba(253,247,237,.22);
}
.site-footer .social-links__item:not(.social-links__item--soon):hover {
    background: var(--copper); border-color: var(--copper); color: #fff; transform: translateY(-2px);
}
.site-footer .social-links__item--soon { cursor: default; opacity: .8; }
.site-footer .social-links__soon { color: rgba(253,247,237,.7); }

/* Variante claire (sur fond écru) — réutilisable hors footer. */
.social-links--inline .social-links__item { color: var(--color-link); background: var(--color-surface); border: 1px solid var(--color-border); }
.social-links--inline .social-links__item:not(.social-links__item--soon):hover { border-color: var(--copper); color: var(--copper-deep); transform: translateY(-2px); }
.social-links--inline .social-links__item--soon { cursor: default; opacity: .75; }
.social-links--inline .social-links__soon { color: var(--color-text-light); }