/* =================================================================
   MAISON HUBERT — Chocolaterie · Torréfaction · Marseille depuis 1961
   Design system : ivoire chaleureux + chocolat noir, laiton, vert olive
   ================================================================= */

/* ---------- Fonts ---------- */
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/7c23ae3e-e1fe-41b4-8306-f4f621c034ff.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/63ef2d1e-b2f4-4d1e-9bac-993236af56b4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/0b833d3f-cdda-4eb7-99d7-0217cb418206.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fc657519-5711-4177-bcd1-0fec5d7d1fc2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/29ec19c7-9d77-431d-a406-0d9dc04cb341.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/7c23ae3e-e1fe-41b4-8306-f4f621c034ff.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/63ef2d1e-b2f4-4d1e-9bac-993236af56b4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/0b833d3f-cdda-4eb7-99d7-0217cb418206.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fc657519-5711-4177-bcd1-0fec5d7d1fc2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/29ec19c7-9d77-431d-a406-0d9dc04cb341.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/7c23ae3e-e1fe-41b4-8306-f4f621c034ff.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/63ef2d1e-b2f4-4d1e-9bac-993236af56b4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/0b833d3f-cdda-4eb7-99d7-0217cb418206.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fc657519-5711-4177-bcd1-0fec5d7d1fc2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/29ec19c7-9d77-431d-a406-0d9dc04cb341.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/dc5ae2fc-4346-4ab0-a024-e8dc63abcbcd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/abbd6e0a-2497-4ebe-8e06-3fdee100bbf9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/f4ef2bb6-e067-4a6d-b14d-cea31ddbfede.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/2b37fc99-08f0-4e28-8a73-115991ef3525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/76fdb883-f6b9-46f0-94fa-2d7be0b5e8b1.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dc5ae2fc-4346-4ab0-a024-e8dc63abcbcd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/abbd6e0a-2497-4ebe-8e06-3fdee100bbf9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/f4ef2bb6-e067-4a6d-b14d-cea31ddbfede.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/2b37fc99-08f0-4e28-8a73-115991ef3525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/76fdb883-f6b9-46f0-94fa-2d7be0b5e8b1.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dc5ae2fc-4346-4ab0-a024-e8dc63abcbcd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/abbd6e0a-2497-4ebe-8e06-3fdee100bbf9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/f4ef2bb6-e067-4a6d-b14d-cea31ddbfede.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/2b37fc99-08f0-4e28-8a73-115991ef3525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/76fdb883-f6b9-46f0-94fa-2d7be0b5e8b1.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dc5ae2fc-4346-4ab0-a024-e8dc63abcbcd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/abbd6e0a-2497-4ebe-8e06-3fdee100bbf9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/f4ef2bb6-e067-4a6d-b14d-cea31ddbfede.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/2b37fc99-08f0-4e28-8a73-115991ef3525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/76fdb883-f6b9-46f0-94fa-2d7be0b5e8b1.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dc5ae2fc-4346-4ab0-a024-e8dc63abcbcd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/abbd6e0a-2497-4ebe-8e06-3fdee100bbf9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/f4ef2bb6-e067-4a6d-b14d-cea31ddbfede.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/2b37fc99-08f0-4e28-8a73-115991ef3525.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/76fdb883-f6b9-46f0-94fa-2d7be0b5e8b1.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;
}


/* Birds of Paradise (titres) — déposez le .ttf dans assets/ pour l'activer */


/* ---------- Tokens ---------- */
:root{
  --ivory:        #F4EDE0;
  --ivory-2:      #ECE2D0;
  --ivory-deep:   #E4D7C0;
  --paper:        #FBF7EE;

  --espresso:     #20140D;   /* near-black brown */
  --cocoa:        #2E1D13;
  --cocoa-2:      #3C2718;
  --marron:       #502B1C;

  --olive:        #C4C12F;
  --olive-deep:   #A9A627;
  --olive-soft:   #D8D56A;

  --bronze:       #C28E47;
  --bronze-lt:    #E0B16B;
  --bronze-deep:  #9A6F36;

  --ink:          #20140D;            /* text on light */
  --ink-soft:     rgba(32,20,13,.66);
  --ink-faint:    rgba(32,20,13,.42);
  --cream:        #EFE6D6;            /* text on dark */
  --cream-soft:   rgba(239,230,214,.66);
  --cream-faint:  rgba(239,230,214,.40);

  --line-dark:    rgba(32,20,13,.16);
  --line-light:   rgba(239,230,214,.18);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Birds of Paradise', 'Cormorant Garamond', Georgia, serif;

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 88px);
  --avis-gap: 24px;
  --shadow-soft: 0 18px 50px -28px rgba(32,20,13,.55);
  --shadow-card: 0 30px 70px -40px rgba(32,20,13,.7);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  background:var(--ivory);
  color:var(--ink);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--olive); color:var(--espresso); }

/* ---------- Type ---------- */
.overline{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--bronze-deep);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.overline.on-dark{ color:var(--bronze-lt); }
.overline::before{
  content:""; width:26px; height:1px; background:var(--olive-deep); opacity:.9;
}
.overline.center{ justify-content:center; }
.overline.center::after{ content:""; width:26px; height:1px; background:var(--olive-deep); opacity:.9; }
/* Accent vert : filets des titres en olive (plus vif sur fond sombre) */
.overline.on-dark::before, .overline.on-dark.center::after{ background:var(--olive); opacity:.95; }
/* Chapeau de la carte des origines (accueil, Cafés, Nos Chocolats) :
   en italique, pour le distinguer des chapeaux de section classiques. */
.raw-lead{ font-style:italic; }

/* Grand titre de section (remplace l'ancien style en ligne).
   Les filets latéraux sont réservés aux petites étiquettes : sur un grand
   titre, ils alourdissent la composition. */
.overline.ov-lg{ font-size:clamp(1.6rem,3.4vw,2.8rem); }
.overline.ov-lg::before,
.overline.ov-lg.center::after{ content:none; }
/* Titre de section sur deux lignes (séparateur « | ») : le texte forme un bloc
   centré, et les filets se calent sur la PREMIÈRE ligne au lieu de flotter
   au milieu du bloc. Corps et interlettrage réduits — deux lignes au corps
   d'une seule déborderaient de la colonne. */
.overline .ov-t{ display:block; text-align:center; }
.overline.is-multiline{ align-items:flex-start; line-height:1.2; letter-spacing:.22em; }
/* Même progression que les titres d'une ligne (3.4vw), plafond à peine en
   retrait : la ligne la plus longue doit tenir dans la colonne. */
.overline.ov-lg.is-multiline{ font-size:clamp(1.5rem,3.4vw,2.65rem); }
.overline.is-multiline::before,
.overline.is-multiline::after{ margin-top:.56em; }
.overline .ov-sun{ width:.92em; height:.92em; flex:none; opacity:.95; }
.overline .ov-sun:first-of-type{ order:-1; }
.overline .ov-sun:last-of-type{ order:1; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0; }

.display{
  font-family:var(--display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:.92;
  font-size:clamp(2.6rem, min(8.6vw, 9.6vh), 7rem);
}
.hero .display{ font-size:clamp(3.2rem, min(10.6vw, 11.6vh), 8.8rem); }
.h-section{
  font-size:clamp(2.1rem,4.4vw,3.5rem);
  text-transform:uppercase;
  letter-spacing:.05em;
  line-height:1.04;
  font-weight:500;
}
.h-feature{
  font-size:clamp(2rem,4vw,3.2rem);
  text-transform:uppercase;
  letter-spacing:.045em;
  line-height:1.02;
  font-weight:500;
}
.lead{
  font-size:clamp(1.1rem,1.5vw,1.32rem);
  line-height:1.7;
  color:var(--ink-soft);
}
.on-dark .lead, .lead.on-dark{ color:var(--cream-soft); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,9vw,140px); position:relative; }
.section.dark{ background:var(--espresso); color:var(--cream); }
.section.cocoa{ background:var(--cocoa); color:var(--cream); }
.center{ text-align:center; }
.rule{ height:1px; background:var(--line-dark); border:0; }
.dark .rule{ background:var(--line-light); }

/* anchor divider */
.divider{ display:flex; align-items:center; justify-content:center; gap:18px; color:var(--bronze); }
.divider::before,.divider::after{ content:""; height:1px; width:min(120px,18vw); background:currentColor; opacity:.45; }
.divider svg{ width:20px; height:20px; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--olive); --fg:var(--espresso);
  display:inline-flex; align-items:center; gap:.7em;
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-weight:600;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 1.9em; border:1px solid var(--bg); border-radius:2px;
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), color .3s;
  position:relative; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); background:var(--olive-deep); border-color:var(--olive-deep); box-shadow:0 16px 30px -16px rgba(169,166,39,.7); }
.btn .ar{ transition:transform .35s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }

.btn-outline{
  background:transparent; color:var(--ink); border:1px solid var(--line-dark);
}
.btn-outline:hover{ background:transparent; border-color:var(--ink); box-shadow:none; }
.on-dark .btn-outline, .btn-outline.on-dark{ color:var(--cream); border-color:var(--line-light); }
.on-dark .btn-outline:hover, .btn-outline.on-dark:hover{ border-color:var(--cream); }

/* text link with arrow */
.link-ar{
  display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--body); font-weight:600;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronze-deep);
  padding-bottom:6px; position:relative;
}
.on-dark .link-ar, .link-ar.on-dark{ color:var(--bronze-lt); }
.link-ar::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--olive-deep); opacity:.55; transform-origin:left; transform:scaleX(.35); transition:transform .4s var(--ease), opacity .3s; }
.on-dark .link-ar::after, .link-ar.on-dark::after{ background:var(--olive); }
.link-ar:hover::after{ transform:scaleX(1); opacity:1; }
.link-ar .ar{ transition:transform .35s var(--ease); }
.link-ar:hover .ar{ transform:translateX(5px); }

/* ---------- Placeholders (image slots) ---------- */
.ph{
  position:relative; overflow:hidden;
  background-color:var(--cocoa);
  background-image:
    repeating-linear-gradient(135deg, rgba(224,177,107,.06) 0 2px, transparent 2px 16px),
    radial-gradient(120% 120% at 30% 20%, rgba(224,177,107,.08), transparent 60%);
  border:1px solid rgba(224,177,107,.16);
}
.ph::after{
  content:attr(data-ph);
  position:absolute; inset:auto 0 0 0;
  margin:auto; padding:14px;
  display:flex; align-items:center; justify-content:center;
  inset:0;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bronze-lt); opacity:.72; text-align:center;
}
.ph.light{
  background-color:var(--ivory-deep);
  background-image:
    repeating-linear-gradient(135deg, rgba(80,43,28,.06) 0 2px, transparent 2px 16px),
    radial-gradient(120% 120% at 30% 20%, rgba(80,43,28,.06), transparent 60%);
  border-color:rgba(80,43,28,.18);
}
.ph.light::after{ color:var(--bronze-deep); }

/* ===============================================================
   HEADER
   =============================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
/* Décalage sous la barre d'admin WordPress (vue connectée) : évite que le logo soit rogné. */
.admin-bar .site-header{ top:32px; }
@media screen and (max-width:782px){
  .admin-bar .site-header{ top:46px; }
  /* Sur mobile, WordPress passe la barre d'admin en position:absolute : elle
     défile avec la page et libère la bande des 46px réservée en haut, laissant
     le contenu « dépasser » au-dessus du menu. On prolonge le fond du header
     (état solid, c.-à-d. après défilement) pour combler cette bande.
     Visible par l'admin connecté uniquement — aucun effet pour les visiteurs. */
  .admin-bar .site-header.solid::before{
    content:""; position:absolute; left:0; right:0; top:-46px; height:46px;
    background:var(--ivory);
  }
}
.site-header .bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:24px; padding-block:24px; transition:padding .45s var(--ease);
}
.nav-left,.nav-right{ display:flex; align-items:center; gap:clamp(18px,2.2vw,34px); min-width:0; }
.nav-left{ justify-content:flex-end; }
.nav-right{ justify-content:flex-start; }
.nav-link{
  font-family:var(--body); font-size:.84rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--cream); position:relative; padding:6px 0; opacity:.9;
  transition:opacity .3s, color .3s;
  /* Un intitulé de menu ne se coupe jamais en deux lignes. */
  white-space:nowrap;
}
/* Entre le passage en burger (1024px) et le confort du grand écran, la barre
   est trop serrée : « Nos Chocolats » débordait sur deux lignes. On resserre
   l'espacement et l'interlettrage plutôt que de laisser couper les intitulés. */
@media(max-width:1160px){
  .nav-left,.nav-right{ gap:clamp(12px,1.5vw,20px); }
  .nav-link{ font-size:.78rem; letter-spacing:.12em; }
}
.nav-link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--olive); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav-link:hover{ opacity:1; }
.nav-link:hover::after{ transform:scaleX(1); }

.brand{ display:flex; flex-direction:column; align-items:center; justify-self:center; }
.brand img{ height:74px; width:auto; transition:height .45s var(--ease); }
.brand .logo-d{ display:none; }
.site-header.solid .logo-l{ display:none; }
.site-header.solid .logo-d{ display:block; }

.icon-btn{
  background:none; border:0; padding:6px; color:var(--cream); display:inline-flex;
  opacity:.9; transition:opacity .3s, color .3s, transform .3s;
}
.icon-btn:hover{ opacity:1; transform:translateY(-1px); }
.icon-btn svg{ width:22px; height:22px; }
.cart-dot{ position:relative; }
.cart-dot::after{ content:"2"; position:absolute; top:-2px; right:-4px; width:15px; height:15px; border-radius:50%;
  background:var(--olive); color:var(--espresso); font-family:var(--body); font-weight:700; font-size:.6rem;
  display:flex; align-items:center; justify-content:center; }

.burger{ display:none; }

/* scrolled state */
.site-header.solid{
  background:var(--ivory); border-bottom-color:var(--line-dark);
  box-shadow:0 10px 40px -28px rgba(32,20,13,.5);
}
.site-header.solid .bar{ padding-block:14px; }
.site-header.solid .nav-link,
.site-header.solid .icon-btn{ color:var(--ink); }
.site-header.solid .brand img{ height:74px; }
.site-header.solid .cart-dot::after{ background:var(--olive); color:var(--espresso); }

/* mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:110; background:var(--espresso); color:var(--cream);
  display:flex; flex-direction:column; padding:28px var(--gutter);
  overflow-y:auto; -webkit-overflow-scrolling:touch;   /* défilement si le menu dépasse l'écran */
  transform:translateY(-100%); transition:transform .6s var(--ease); visibility:hidden;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; }
.mobile-menu .mm-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:clamp(22px,4vh,48px); flex:none; }
.mobile-menu .mm-top img{ height:46px; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:4px; flex:none; }
.mobile-menu nav a{ font-family:var(--serif); font-size:clamp(1.5rem,5.4vw,2rem); text-transform:uppercase; letter-spacing:.04em;
  padding:clamp(7px,1.1vh,11px) 0; border-bottom:1px solid var(--line-light); }
.mobile-menu nav a:hover{ color:var(--olive-soft); }
.mm-foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:14px 22px; padding-top:clamp(20px,3vh,30px); flex:none; }
.mm-foot a{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-soft); }

/* ===============================================================
   HERO
   =============================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  color:var(--cream); overflow:clip; }
.hero .hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* Le voile est commun à tous les heros : voir « VOILE DES HEROS » en fin de feuille. */
.hero .hero-bg::after{ content:""; position:absolute; inset:0; }
.hero .wrap{ position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,6vh,80px); padding-top:clamp(80px,10vh,118px); }
.hero-inner{ max-width:680px; }
@media (prefers-reduced-motion: no-preference){
  .hero-inner > *{ animation:heroIn .8s var(--ease) both; }
  .hero-inner > *:nth-child(1){ animation-delay:.05s; }
  .hero-inner > *:nth-child(2){ animation-delay:.13s; }
  .hero-inner > *:nth-child(3){ animation-delay:.21s; }
  .hero-inner > *:nth-child(4){ animation-delay:.29s; }
  .hero-inner > *:nth-child(5){ animation-delay:.37s; }
  /* .hero-brand ne r�serve que la place du logo, qui est en position:fixed et plac� par le JS.
     L'animer d�placerait la cible que measureRest() mesure au chargement -> le logo sautait de 20 px. */
  .hero-inner > .hero-brand{ animation:none; }
}
@keyframes heroIn{ from{ transform:translateY(20px); } to{ transform:none; } }
.hero .display{ margin:.18em 0 0; white-space:nowrap; }
.hero .display .l2{ display:inline; }
.hero-role{ font-family:var(--body); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  font-size:1rem; color:var(--bronze-lt); margin-top:clamp(.8rem,2vh,1.4rem); }
.hero-tag{ font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,min(2.2vw,2.6vh),1.8rem);
  color:var(--cream); margin:.6rem 0 clamp(1.2rem,2.6vh,2rem); max-width:30ch; line-height:1.32; opacity:.92; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; }
.hero .hero-cta{ margin-top:clamp(2.5rem,10vh,7rem); gap:20px 96px; }
.hero .hero-cta .link-ar{ font-size:1.12rem; }
/* CTA hero : soulignement centré sous le texte, qui s'agrandit des deux côtés au survol */
.hero-cta .link-ar::after{ left:50%; width:100%; transform:translateX(-50%) scaleX(.3); transform-origin:center; }
.hero-cta .link-ar:hover::after{ transform:translateX(-50%) scaleX(1); }

/* ---- Logo voyageur : centré dans le hero au repos, se docke dans le header au scroll ---- */
:root{ --hero-logo-h: clamp(200px, 34vh, 420px); }
.hero-brand{ min-height:var(--hero-logo-h); margin:0 0 .2rem; }
.hero-logo{
  position:fixed; left:0; top:0; height:var(--hero-logo-h); width:auto;
  transform:translate(50vw,34vh) translate(-50%,-50%);   /* repli sans JS : centré dans le hero */
  transform-origin:center center; will-change:transform, opacity; pointer-events:none;
  z-index:95; filter:drop-shadow(0 14px 34px rgba(20,12,8,.45));
  transition:opacity .25s var(--ease);
}
/* En haut, pas de logo dans le header (c'est le logo hero qui sert d'identité) ;
   il apparaît une fois « docké » au scroll. */
/* Spécifique à l'accueil (logo voyageur) : en haut pas de logo dans le header. */
body[data-hero="overlay"] .site-header .brand .logo-l{ display:none !important; }
body[data-hero="overlay"] .site-header .brand .logo-d{ display:block; opacity:0; transition:opacity .3s var(--ease); }
body[data-hero="overlay"] .site-header.logo-docked .brand .logo-d{ opacity:1; }
body[data-hero="overlay"] .site-header.logo-docked .brand img{ height:74px; }
/* Texte de marque masqué visuellement (accessibilité / SEO). */
.u-vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Bloc logo + sous-titre légèrement remonté pour un meilleur centrage visuel.
   (Compense aussi le décalage de 32px dû à la barre d'admin en vue connectée.) */
body[data-hero="overlay"] .hero-inner{ transform: translateY(-4vh); }

.hero-seal{ position:absolute; z-index:3; top:clamp(96px,14vh,150px); right:clamp(20px,5vw,80px);
  width:clamp(96px,12vw,150px); height:auto; opacity:.92; animation:spin 60s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-scroll{ position:absolute; z-index:3; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:11px; color:var(--cream-soft);
  font-family:var(--body); font-size:.82rem; letter-spacing:.26em; text-transform:uppercase; }
@media (max-height:640px){ .hero-scroll{ display:none; } }
.hero-scroll .stem{ width:1px; height:56px; background:linear-gradient(var(--bronze-lt),transparent); animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ 0%{transform:scaleY(.2);transform-origin:top;opacity:0;} 40%{opacity:1;} 100%{transform:scaleY(1);transform-origin:top;opacity:0;} }

/* hero variant: OVERLAY — full-bleed, content centered */
body[data-hero="overlay"] .hero{ text-align:center; }
/* Pas de voile propre : c'est celui de « VOILE DES HEROS » qui s'applique. */
body[data-hero="overlay"] .hero-inner{ max-width:760px; margin-inline:auto; }
body[data-hero="overlay"] .hero .overline{ justify-content:center; }
body[data-hero="overlay"] .hero .overline::after{ content:""; width:26px; height:1px; background:var(--olive); opacity:.85; }
body[data-hero="overlay"] .hero-tag{ margin-inline:auto; max-width:none; white-space:nowrap; }
body[data-hero="overlay"] .hero-cta{
  justify-content:center;
  position:absolute; left:0; right:0; bottom:clamp(150px,17vh,210px);
  margin-top:0; z-index:3; padding-inline:var(--gutter);
}
body[data-hero="overlay"] .hero-cta .link-ar{ white-space:nowrap; }

/* hero variant: SPLIT (ivory text left / image right) */
body[data-hero="split"] .hero{ background:var(--ivory); color:var(--ink); align-items:stretch; }
body[data-hero="split"] .hero .hero-bg{ left:auto; width:48%; }
body[data-hero="split"] .hero .hero-bg::after{
  background:linear-gradient(90deg, rgba(20,12,8,.35), transparent 60%); }
body[data-hero="split"] .hero .wrap{ display:flex; align-items:center; }
body[data-hero="split"] .hero-inner{ max-width:560px; }
body[data-hero="split"] .hero-role{ color:var(--bronze-deep); }
body[data-hero="split"] .hero-tag{ color:var(--ink); opacity:1; }
body[data-hero="split"] .hero-seal{ top:auto; bottom:clamp(40px,8vh,90px); }
@media(max-width:860px){
  body[data-hero="split"] .hero{ color:var(--cream); }
  body[data-hero="split"] .hero .hero-bg{ width:100%; }
  body[data-hero="split"] .hero .hero-bg::after{ background:linear-gradient(90deg, rgba(20,12,8,.82) 0%, rgba(20,12,8,.5) 42%, rgba(20,12,8,.2) 100%),linear-gradient(0deg, rgba(20,12,8,.7) 0%, transparent 45%); }
  body[data-hero="split"] .hero-role{ color:var(--bronze-lt); }
  body[data-hero="split"] .hero-tag{ color:var(--cream); }
}

/* hero variant: CENTERED */
body[data-hero="centered"] .hero{ align-items:center; text-align:center; }
/* Pas de voile propre : c'est celui de « VOILE DES HEROS » qui s'applique. */
body[data-hero="centered"] .hero .wrap{ padding-top:160px; padding-bottom:120px; }
body[data-hero="centered"] .hero-inner{ max-width:760px; margin-inline:auto; }
body[data-hero="centered"] .hero-tag{ margin-inline:auto; }
body[data-hero="centered"] .hero-cta{ justify-content:center; }
body[data-hero="centered"] .hero-seal{ display:none; }

/* ===============================================================
   HISTOIRE
   =============================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center; }
.split.narrow-left{ grid-template-columns:1.05fr .95fr; }
.col-pad{ max-width:36rem; }

.figure{ position:relative; }
.figure .ph{ aspect-ratio:4/5; border-radius:2px; }
.figure.tall .ph{ aspect-ratio:3/4; }
.figure .seal-badge{ position:absolute; width:clamp(92px,12vw,132px); animation:spin 70s linear infinite; }
.figure .seal-badge.br{ right:-28px; bottom:-28px; }
.figure .seal-badge.tr{ right:-26px; top:-26px; }
.figure .frame-corner{ position:absolute; inset:14px; border:1px solid rgba(239,230,214,.3); pointer-events:none; }
.figure.light .frame-corner{ border-color:rgba(80,43,28,.25); }

.eyebrow-num{ font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--bronze-deep); }

/* ===============================================================
   QUOTE BAND
   =============================================================== */
.quote-band{ background:var(--espresso); color:var(--cream); position:relative; overflow:hidden; }
.quote-band .split{ align-items:stretch; gap:0; grid-template-columns:.9fr 1.1fr; }
.quote-band .qb-media{ position:relative; min-height:420px; }
.quote-band .qb-media .ph{ position:absolute; inset:0; }
.quote-band .qb-text{ padding:clamp(48px,7vw,110px) var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.bigquote{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.28; letter-spacing:.01em; }
.bigquote .first{ font-size:1.3em; color:var(--bronze-lt); }
.quote-attrib{ margin-top:1.6rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-soft); }

/* ===============================================================
   SAVOIR-FAIRE
   =============================================================== */
.sf-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:end; margin-bottom:clamp(40px,5vw,72px); }
.pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(18px,2.4vw,34px); margin-top:clamp(40px,5vw,70px);
  border-top:1px solid var(--line-dark); padding-top:clamp(36px,4vw,56px); }
.pillar{ text-align:center; }
.pillar .ic{ display:flex; justify-content:center; margin-bottom:18px; color:var(--bronze-deep); }
.pillar .ic svg{ width:40px; height:40px; }
/* Piliers réduits au titre : plus de texte descriptif sous l'icône. */
.pillar h3{ font-size:1.18rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:0; text-wrap:balance; }

/* Encart éco : le groupe logo + texte est centré dans le cadre (le texte est bien
   plus court que la bande, à gauche il laissait un grand vide à droite). */
.eco-note{ display:flex; gap:18px; align-items:center; justify-content:center;
  margin-top:clamp(34px,4vw,52px);
  background:var(--paper); border:1px solid var(--line-dark); border-left:3px solid var(--olive);
  padding:22px 28px; border-radius:2px; }
.eco-note .ic{ color:var(--olive-deep); flex:none; display:flex; align-items:center; }
.eco-note .ic svg{ width:30px; height:30px; }
/* Logo du label : hauteur contenue pour ne pas faire grossir la bande. */
.eco-note .ic img{ display:block; width:auto; height:56px; }
.eco-note p{ margin:0; font-size:.98rem; color:var(--ink-soft); }
.eco-note strong{ color:var(--ink); font-weight:600; }

/* ===============================================================
   NOTRE UNIVERS
   =============================================================== */
.univers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(44px,5vw,72px); }
.univ-card{ position:relative; display:block; overflow:hidden; border-radius:2px; aspect-ratio:3/7;
  border:1px solid var(--line-light); }
.univ-card .ph{ position:absolute; inset:0; transition:transform 1.1s var(--ease); }
.univ-card:hover .ph{ transform:scale(1.06); }
.univ-card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,12,8,.92) 0%, rgba(20,12,8,.25) 48%, rgba(20,12,8,.45) 100%); }
.univ-card .uc-body{ position:absolute; inset:auto 0 0 0; z-index:2; padding:26px clamp(18px,1.6vw,26px);
  transform:translateY(8px); transition:transform .6s var(--ease); }
.univ-card:hover .uc-body{ transform:translateY(0); }
.univ-card .uc-ic{ color:var(--bronze-lt); margin-bottom:14px; }
.univ-card .uc-ic svg{ width:30px; height:30px; }
.univ-card h3{ font-size:1.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cream); }
.univ-card p{ font-size:.9rem; color:var(--cream-soft); margin:.4rem 0 0; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease), opacity .5s, margin .6s; }
.univ-card:hover p{ max-height:60px; opacity:1; margin-top:.5rem; }
.univ-card .uc-ar{ display:inline-flex; align-items:center; gap:.5em; margin-top:14px;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olive-soft); }
.univ-card .uc-ar .ar{ transition:transform .4s var(--ease); }
.univ-card:hover .uc-ar .ar{ transform:translateX(5px); }

/* ===============================================================
   COLLECTION MARSEILLE — carousel
   =============================================================== */
.collection{ background:var(--cocoa); color:var(--cream); overflow:hidden; }
.coll-stage{ position:relative; margin-top:clamp(36px,4vw,56px); }
.coll-track{ display:grid; }
.coll-slide{ grid-area:1 / 1; flex:none; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center;
  opacity:0; visibility:hidden; transition:opacity .7s var(--ease), visibility .7s var(--ease); pointer-events:none; }
.coll-slide.active{ opacity:1; visibility:visible; pointer-events:auto; }
.coll-slide .ph{ aspect-ratio:5/4.4; border-radius:2px; }
.coll-copy{ max-width:34rem; }
.coll-copy h3{ font-size:clamp(2rem,3.6vw,3rem); text-transform:uppercase; letter-spacing:.04em; line-height:1.02; margin:0; color:var(--bronze-lt); }
/* Titres produits Collection sur une seule ligne (accueil #collection + Nos Créations #marseille) */
#collection .coll-copy h3{ font-size:clamp(1.7rem,2.9vw,2.6rem); white-space:nowrap; }
@media(max-width:560px){ #collection .coll-copy h3, #marseille .coll-copy h3{ white-space:normal; } }
.coll-copy .sub{ color:var(--cream-soft); font-size:clamp(1.05rem,1.25vw,1.2rem); line-height:1.6; margin:1.1rem 0 1.8rem; }
.coll-meta{ display:flex; gap:30px; margin:0 0 2rem; border-top:1px solid var(--line-light); padding-top:18px; }
.coll-meta div span{ display:block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-lt); margin-bottom:4px; }
.coll-meta div strong{ font-family:var(--serif); font-weight:500; font-size:1.2rem; }

.coll-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:clamp(30px,4vw,46px); }
/* min-width:0 autorise la rangée à rétrécir sous sa largeur de contenu (comportement
   par défaut d'un enfant flex sans ça) ; au-delà elle défile plutôt que de pousser
   les flèches hors de l'écran — utile dès qu'une galerie dépasse une poignée de photos
   (ex. #sujets, 16 pastilles) sans rien changer pour les galeries à 3-4 photos. */
.coll-dots{ display:flex; gap:10px; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.coll-dots::-webkit-scrollbar{ display:none; }
.coll-dots button{ width:9px; height:9px; border-radius:50%; border:1px solid var(--bronze-lt); background:transparent; padding:0; flex:none; transition:background .3s, transform .3s; }
.coll-dots button.active{ background:var(--olive-deep); border-color:var(--olive-deep); transform:scale(1.15); }
.coll-arrows{ display:flex; gap:12px; flex:none; }
.carr-btn{ width:54px; height:54px; border-radius:50%; border:1px solid var(--line-light); background:transparent; color:var(--cream);
  display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s, border-color .3s; }
.carr-btn:hover{ background:var(--olive); color:var(--espresso); border-color:var(--olive); }
.carr-btn.dark{ border-color:var(--line-dark); color:var(--ink); }
.carr-btn.dark:hover{ background:var(--olive); color:var(--espresso); border-color:var(--olive); }
.carr-btn:disabled{ opacity:.35; cursor:default; }
.carr-btn:disabled:hover{ background:transparent; color:inherit; border-color:var(--line-dark); }
.carr-btn svg{ width:20px; height:20px; }

/* ===============================================================
   AVIS CLIENTS
   =============================================================== */
.avis-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(36px,4vw,56px); }
.google-rating{ display:flex; align-items:center; gap:14px; }
.google-rating .score{ font-family:var(--serif); font-size:2.6rem; line-height:1; }
.google-rating .stars{ color:var(--olive-deep); letter-spacing:2px; font-size:1.05rem; }
.google-rating .meta{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.04em; }
.avis-stage{ overflow:hidden; }
.avis-track{ display:flex; gap:var(--avis-gap); transition:transform .65s var(--ease); will-change:transform; }
.avis-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:clamp(26px,3vw,42px); }
.avis-card{ flex:0 0 calc((100% - 2*var(--avis-gap)) / 3); background:var(--paper); border:1px solid var(--line-dark); border-radius:2px; padding:28px clamp(22px,2vw,30px);
  display:flex; flex-direction:column; gap:13px; transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.avis-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.avis-card .stars{ color:var(--olive-deep); letter-spacing:2px; }
.avis-card .qt{ font-family:var(--serif); font-size:1.24rem; line-height:1.42; font-style:italic; color:var(--ink); margin:0; }
.avis-card .who{ margin-top:auto; display:flex; align-items:center; gap:12px; padding-top:8px; }
.avis-card .ava{ width:42px; height:42px; border-radius:50%; background:var(--cocoa); color:var(--bronze-lt);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.2rem; flex:none; }
.avis-card .who .nm{ font-weight:600; letter-spacing:.02em; }
.avis-card .who .dt{ font-size:.8rem; color:var(--ink-faint); }
.avis-card .gicon{ width:16px; height:16px; }

.avis-nav .coll-dots button{ border-color:var(--ink-faint); }
.avis-nav .coll-dots button.active{ background:var(--olive-deep); border-color:var(--olive-deep); }

/* ===============================================================
   NOTRE ACTUALITÉ
   =============================================================== */
.actu-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(36px,4vw,56px); }
.actu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,40px); }
.actu-card{ display:flex; flex-direction:column; }
.actu-media{ overflow:hidden; border-radius:2px; margin-bottom:22px; }
.actu-media .ph{ aspect-ratio:4/3; transition:transform 1.1s var(--ease); }
.actu-card:hover .actu-media .ph{ transform:scale(1.05); }
.actu-body{ display:flex; flex-direction:column; flex:1; }
.actu-meta{ display:flex; align-items:center; gap:.85em; font-family:var(--body); font-weight:600;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-deep); }
.actu-meta span:last-child{ color:var(--ink-faint); }
.actu-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--bronze-deep); opacity:.6; }
.actu-card h3{ font-size:clamp(1.45rem,2vw,1.85rem); line-height:1.12; letter-spacing:.005em; margin:.7rem 0 0; text-wrap:balance; }
.actu-card p{ color:var(--ink-soft); font-size:1rem; margin:.7rem 0 1.4rem; max-width:38ch; }
.actu-card .link-ar{ margin-top:auto; align-self:flex-start; }

/* section separator (anchor divider sitting between two light sections) */
.section-sep{ margin-block:clamp(-72px,-7vw,-104px); color:var(--bronze-deep); }
.section-sep::before,.section-sep::after{ width:min(170px,24vw); opacity:.45; }

/* ===============================================================
   NEWSLETTER
   =============================================================== */
.news{ background:var(--espresso); color:var(--cream); position:relative; overflow:hidden; }
.news .leaf{ position:absolute; right:-40px; bottom:-40px; width:340px; opacity:.06; color:var(--bronze-lt); pointer-events:none; }
.news-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; position:relative; z-index:2; }
.news-form{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; max-width:440px; }
.news-form input{ flex:1; min-width:200px; background:transparent; border:1px solid var(--line-light); color:var(--cream);
  font-family:var(--body); font-size:1rem; padding:1em 1.1em; border-radius:2px; }
.news-form input::placeholder{ color:var(--cream-faint); }
.news-form input:focus{ outline:none; border-color:var(--bronze-lt); }
.news-consent{ font-size:.76rem; color:var(--cream-faint); margin-top:14px; max-width:42ch; }

/* ===============================================================
   FOOTER
   =============================================================== */
.footer{ background:var(--espresso); color:var(--cream); padding-top:clamp(64px,7vw,100px); }
.footer .rule{ background:var(--line-light); }
.foot-top{ display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:clamp(28px,3vw,56px); padding-bottom:clamp(48px,6vw,80px); }
.foot-brand{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; align-self:center; }
.foot-brand img{ height:96px; }
.foot-brand .tag{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--cream-soft); margin:18px 0 0; }
.foot-col h5{ font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze-lt); margin:0 0 18px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-col a{ color:var(--cream-soft); font-size:.96rem; transition:color .3s; }
.foot-col a:hover{ color:var(--cream); }
.foot-pro{ margin-top:24px; }
.foot-pro a{ display:inline-flex; align-items:center; gap:.6em; border:1px solid var(--line-light); padding:.85em 1.3em; border-radius:2px;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); transition:background .3s,color .3s,border-color .3s; }
.foot-pro a:hover{ background:var(--bronze); border-color:var(--bronze); color:var(--espresso); }
.contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:.96rem; color:var(--cream-soft); }
.contact-list li{ display:flex; gap:11px; align-items:flex-start; }
.contact-list svg{ width:17px; height:17px; color:var(--bronze-lt); flex:none; margin-top:3px; }
.socials{ display:flex; gap:12px; margin-top:18px; }
.socials a{ width:42px; height:42px; border:1px solid var(--line-light); border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--cream); transition:background .3s,color .3s,border-color .3s,transform .3s; }
.socials a:hover{ background:var(--olive); color:var(--espresso); border-color:var(--olive); transform:translateY(-2px); }
.socials svg{ width:18px; height:18px; }

.foot-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  padding-block:26px; }
.foot-bottom .legal{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.foot-bottom .legal a{ font-size:.78rem; color:var(--cream-faint); letter-spacing:.04em; }
.foot-bottom .legal a:hover{ color:var(--cream-soft); }
.foot-bottom .copy{ font-size:.78rem; color:var(--cream-faint); }
.made-badge{ display:inline-flex; align-items:center; gap:.6em; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-lt); border:1px solid var(--line-light); padding:.6em 1em; border-radius:40px; }
.made-badge svg{ width:14px; height:14px; }

/* ===============================================================
   SCROLL REVEAL
   =============================================================== */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media(max-width:1024px){
  .univers-grid{ grid-template-columns:repeat(2,1fr); }
  .actu-grid{ grid-template-columns:repeat(2,1fr); gap:clamp(22px,3vw,32px); }
  .avis-card{ flex-basis:calc((100% - var(--avis-gap)) / 2); }
  .foot-top{ grid-template-columns:1fr 1fr; row-gap:48px; }
  .nav-left .nav-link{ display:none; }
  .nav-right .desk-only{ display:none; }
  .burger{ display:inline-flex; }
  .site-header .bar{ grid-template-columns:1fr auto 1fr; }
  /* burger collé au bord droit (et non près du logo central) */
  .nav-right{ justify-content:flex-end; }
}
@media(max-width:860px){
  .split,.sf-head,.coll-slide,.news-inner,.quote-band .split{ grid-template-columns:1fr; }
  .actu-grid{ grid-template-columns:1fr; gap:40px; }
  .quote-band .qb-media{ min-height:280px; }
  .pillars{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .coll-slide .ph{ aspect-ratio:5/4; }
  .figure .seal-badge{ width:84px; }
}
@media(max-width:560px){
  .univers-grid{ grid-template-columns:1fr; }
  body[data-hero="overlay"] .hero-tag{ white-space:normal; max-width:32ch; }
  .hero .display{ white-space:normal; }
  .avis-card{ flex-basis:100%; }
  .google-rating .score{ font-size:2rem; }
  .hero-cta{ gap:14px 22px; }
  .btn{ width:100%; justify-content:center; }
  .hero-cta .link-ar{ width:100%; justify-content:center; }
}
/* En-tête plus compact sur téléphone : on GARDE la taille d'origine du logo
   (74px) et on réduit seulement l'espace au-dessus/en-dessous pour alléger la
   hauteur du menu. Partagé (toutes les pages en mobile), sans effet sur laptop. */
@media(max-width:768px){
  .site-header .bar{ padding-block:10px; }
  .site-header.solid .bar{ padding-block:6px; }
}

/* ===============================================================
   ICÔNES IMAGE (PNG)  ·  rendues en masque CSS
   Le PNG sert de découpe et la couleur vient de currentColor : l'icône
   se comporte donc comme les icônes SVG du sprite (même teinte héritée).
   =============================================================== */
.ic-img{
  display:inline-block; width:34px; height:34px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.ic-img-magasin{
  -webkit-mask-image:url(../img/icons/magasin.png);
  mask-image:url(../img/icons/magasin.png);
}
.ic-img-ecologie{
  -webkit-mask-image:url(../img/icons/ecologie.png);
  mask-image:url(../img/icons/ecologie.png);
}
.ic-img-plume{
  -webkit-mask-image:url(../img/icons/plume.png);
  mask-image:url(../img/icons/plume.png);
}
.ic-img-barre-chocolat{
  -webkit-mask-image:url(../img/icons/barre-chocolat.png);
  mask-image:url(../img/icons/barre-chocolat.png);
}
.ic-img-cacao{
  -webkit-mask-image:url(../img/icons/cacao.png);
  mask-image:url(../img/icons/cacao.png);
}
.ic-img-notre-dame{
  -webkit-mask-image:url(../img/icons/notre-dame.png);
  mask-image:url(../img/icons/notre-dame.png);
}
.ic-img-oeufs-paques{
  -webkit-mask-image:url(../img/icons/oeufs-paques.png);
  mask-image:url(../img/icons/oeufs-paques.png);
}
/* Les icônes image reprennent la taille des SVG de chaque bloc. */
.pillar .ic .ic-img{ width:40px; height:40px; }

/* ===============================================================
   BANDEAU ALLERGÈNES  ·  fin, après le hero (Nos chocolats & Confiseries)
   Carrousel auto : un message à la fois, en fondu → bande très basse.
   =============================================================== */
.allergenes-band{
  background:var(--ivory);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding-block:clamp(9px,1.1vw,13px);
}
/* Le bandeau ne suit pas la colonne du site : il dispose de sa propre largeur,
   plus généreuse, ce qui permet de garder une police lisible tout en tenant
   le message le plus long sur une seule ligne. */
.allerg-wrap{ max-width:min(1500px, 92vw); margin-inline:auto; padding-inline:20px; }
/* L'étiquette « Allergènes » est le premier volet du carrousel. */
.allerg-rot{ position:relative; margin-inline:auto; max-width:none; min-height:2.9em; }
/* Double sélecteur volontaire : « .allerg-msg » est déclaré plus bas et
   imposerait sinon sa couleur brune à l'étiquette. */
.allerg-msg.allerg-lbl{
  display:flex; align-items:center; justify-content:center; gap:9px;
  color:var(--olive-deep);
  font-weight:600; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
}
.allerg-lbl .allerg-ic{ width:18px; height:18px; flex:none; }
.allerg-msg{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); margin:0;
  text-align:center;
  opacity:0; transition:opacity .55s var(--ease);
  /* Calibrée sur la largeur du bandeau : le message le plus long tient sur une
     ligne, avec une marge d'environ 70 px à toutes les largeurs desktop. */
  font-family:var(--body); font-size:clamp(.75rem,.95vw,.95rem);
  line-height:1.4; color:var(--ink-soft); font-weight:600;
}
.allerg-msg.active{ opacity:1; }
.allerg-msg a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.allerg-msg a:hover{ color:var(--olive-deep); }

@media(max-width:1024px){ .allerg-rot{ min-height:4.3em; } }
@media(max-width:680px){ .allerg-rot{ min-height:5.8em; } }

/* ===============================================================
   VOILE DES HEROS — définition unique
   Repris du hero de « Notre histoire » : un voile centré plutôt que
   dégradé sur un côté, pour que toutes les pages aient le même fond.
   Couvre les trois familles de heros du site :
     .intro-hero      → Notre histoire (la référence)
     .page-hero       → toutes les pages intérieures
     .hero .hero-bg   → page d'accueil (derrière la vidéo)
   Chaque feuille de page garde sa hauteur et son alignement propres,
   mais ne redéfinit plus ce voile — une seule règle, ici.
   =============================================================== */
.page-hero::after,
.hero .hero-bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(20,12,8,.46), rgba(20,12,8,.84) 100%),
    linear-gradient(0deg, rgba(20,12,8,.72) 0%, transparent 56%);
  /* Sur l'accueil, .hero-bg porte aussi la classe .ph : sans ces deux lignes,
     le voile hérite du opacity:.72 de l'étiquette de remplacement et le hero
     ressort plus clair que les autres. */
  opacity:1;
  padding:0;
}
/* Même raison : .ph pose un liseré doré, invisible ailleurs car les pages
   intérieures le retirent déjà sur .hero-ph .ph. */
.hero .hero-bg.ph{ border:0; }