/* ==========================================================================
   Miel et Plus, page d'accueil
   Système de design : jetons, typographie, composants, sections, mouvement
   ========================================================================== */

/* 1. Jetons ---------------------------------------------------------------- */
:root {
  /* Couleurs : la cire, la propolis, le miel et l'orange du logo */
  --cire: #FBF6EC;          /* fond principal */
  --cire-2: #F3EADA;        /* fond alterné */
  --blanc: #FFFDF8;         /* cartes */
  --trait: #E6D9C4;         /* filets et bordures */
  --propolis: #2B1D16;      /* texte, sections sombres */
  --propolis-2: #3A2A21;    /* sections sombres, variante */
  --propolis-doux: #6B584C; /* texte secondaire */
  --orange: #EE5A24;        /* logo uniquement */
  --orange-brule: #B8401A;  /* boutons et accents lisibles sur la cire (contraste 5,1) */
  --miel: #D8901E;          /* étoiles, ornements, barres du calendrier */
  --miel-clair: #EDB85A;    /* accents sur fond sombre */

  /* Typographie */
  --serif: "Zodiak", Georgia, serif;
  --sans: "Switzer", "Segoe UI", Arial, sans-serif;
  --t-corps: clamp(16.5px, .25vw + 15.5px, 18px);
  --t-h2: clamp(34px, 2.4vw + 18px, 56px);
  --t-h3: clamp(23px, .6vw + 19px, 28px);

  /* Espacements (multiples de 8) */
  --marge: clamp(20px, 5vw, 88px);
  --section: clamp(96px, 9vw + 40px, 184px);
  --largeur: 1240px;

  /* Formes */
  --rayon-s: 8px;
  --rayon-m: 16px;
  --rayon-l: 24px;
  --ombre: 0 1px 2px rgba(43, 29, 22, .04), 0 18px 40px -24px rgba(43, 29, 22, .28);
  --ombre-haute: 0 1px 2px rgba(43, 29, 22, .05), 0 26px 50px -24px rgba(43, 29, 22, .36);

  /* Mouvement */
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --doux: cubic-bezier(.45, 0, .2, 1);
}

/* 2. Polices auto-hébergées (Fontshare, licence ITF gratuite) ---------------- */
@font-face { font-family: "Zodiak"; src: url("polices/zodiak-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("polices/zodiak-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("polices/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("polices/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("polices/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--cire); color: var(--propolis); font-family: var(--sans); font-size: var(--t-corps); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-ouvert { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
em, i, cite, address { font-style: normal; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: -999px; top: 12px; z-index: 60; background: var(--propolis); color: var(--cire); padding: 10px 16px; border-radius: 8px; }
.evitement:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--orange-brule); outline-offset: 3px; border-radius: 4px; }
.sombre :focus-visible, .heros :focus-visible { outline-color: var(--miel-clair); }
.ico { width: 1em; height: 1em; flex: none; }
.conteneur { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }

/* 3. Typographie ----------------------------------------------------------- */
.surtitre { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-brule); }
.surtitre .ico { font-size: 18px; }
.sombre .surtitre { color: var(--miel-clair); }
.titre { font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.surtitre + .titre { margin-top: 18px; }
.chapo { font-size: clamp(18px, .4vw + 16px, 20.5px); line-height: 1.65; color: var(--propolis-doux); }
.sombre .chapo { color: rgba(251, 246, 236, .82); }
.texte p + p { margin-top: 1em; }
.signature { font-family: var(--serif); font-size: 22px; margin-top: 28px; }
.signature small { display: block; font-family: var(--sans); font-size: 14px; color: var(--propolis-doux); margin-top: 2px; }

/* 4. Boutons --------------------------------------------------------------- */
.bouton {
  --fond: var(--propolis); --encre: var(--cire);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 13px 26px; border-radius: 8px; border: 1px solid var(--fond);
  background: var(--fond); color: var(--encre); text-decoration: none;
  font-size: 15.5px; font-weight: 500; letter-spacing: .01em; line-height: 1.2;
  transition: background-color .35s var(--doux), color .35s var(--doux), border-color .35s var(--doux);
}
.bouton:hover { background: var(--orange-brule); border-color: var(--orange-brule); color: #FFFDF8; }
.bouton .ico { font-size: 17px; transition: transform .45s var(--sortie); }
.bouton:hover .ico { transform: translateX(4px); }
.bouton.fin { --fond: transparent; --encre: var(--propolis); border-color: rgba(43, 29, 22, .35); }
.bouton.clair { --fond: var(--cire); --encre: var(--propolis); }
.bouton.voile { --fond: rgba(28, 19, 13, .32); --encre: var(--cire); border-color: rgba(251, 246, 236, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lien-fleche { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; color: var(--orange-brule); padding-bottom: 3px; }
.lien-fleche::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--sortie); }
.lien-fleche:hover::after { transform: scaleX(1); transform-origin: left; }
.lien-fleche .ico { transition: transform .45s var(--sortie); }
.lien-fleche:hover .ico { transform: translateX(4px); }

/* 5. En-tête --------------------------------------------------------------- */
.entete { position: fixed; inset: 0 0 auto 0; z-index: 40; color: var(--cire); background-color: rgba(28, 19, 13, .26); transition: background-color .5s var(--doux), color .5s var(--doux), box-shadow .5s var(--doux); }
.entete.est-defile { background-color: rgba(251, 246, 236, .88); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); color: var(--propolis); box-shadow: 0 1px 0 rgba(43, 29, 22, .08); }
.infos { display: flex; justify-content: space-between; gap: 24px; padding: 8px var(--marge); font-size: 13px; letter-spacing: .01em; border-bottom: 1px solid rgba(251, 246, 236, .18); transition: border-color .5s var(--doux); }
.entete.est-defile .infos { border-bottom-color: rgba(43, 29, 22, .08); }
.infos p, .infos a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin: 0; }
.infos .droite { display: flex; gap: 28px; }
.infos a:hover { text-decoration: underline; text-underline-offset: 3px; }
.infos .ico { font-size: 14px; opacity: .8; }
.nav { display: flex; align-items: center; gap: 36px; padding: 16px var(--marge); transition: padding .5s var(--sortie); }
.entete.est-defile .nav { padding-top: 10px; padding-bottom: 10px; }
.marque { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
.marque img { width: 46px; }
.marque .orange { display: none; }
.entete.est-defile .marque .creme { display: none; }
.entete.est-defile .marque .orange { display: block; }
.marque span { font-family: var(--serif); font-size: 23px; line-height: 1; }
.liens { display: flex; gap: clamp(20px, 2.2vw, 36px); }
.liens a { position: relative; text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0; }
.liens a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--sortie); }
.liens a:hover::after, .liens a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav .bouton { min-height: 42px; padding: 9px 20px; font-size: 14.5px; }
.entete:not(.est-defile) .nav .bouton { --fond: rgba(20, 13, 9, .28); --encre: var(--cire); border-color: rgba(251, 246, 236, .55); }
.entete:not(.est-defile) .liens a, .entete:not(.est-defile) .marque span, .entete:not(.est-defile) .infos { text-shadow: 0 0 2px rgba(20, 13, 9, .6), 0 1px 6px rgba(20, 13, 9, .55); }
.entete:not(.est-defile) :focus-visible { outline-color: var(--miel-clair); }
.appel-mobile { display: none; width: 46px; height: 46px; border-radius: 8px; border: 1px solid currentColor; color: inherit; place-items: center; font-size: 19px; text-decoration: none; }
.burger { display: none; width: 46px; height: 46px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; place-items: center; font-size: 20px; }

/* Menu mobile plein écran */
.menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--cire); color: var(--propolis); padding: 18px var(--marge) 32px; visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .45s var(--sortie), transform .6s var(--sortie), visibility 0s linear .6s; }
.menu.est-ouvert { visibility: visible; opacity: 1; transform: none; transition: opacity .45s var(--sortie), transform .6s var(--sortie), visibility 0s; }
.menu .haut { display: flex; justify-content: space-between; align-items: center; }
.menu .haut .marque img { width: 42px; }
.menu nav { margin: auto 0; }
.menu nav li { overflow: hidden; }
.menu nav a { display: block; padding: 10px 0; font-family: var(--serif); font-size: clamp(32px, 8vw, 44px); line-height: 1.15; text-decoration: none; transform: translateY(105%); transition: transform .8s var(--sortie); }
.menu.est-ouvert nav a { transform: none; }
.menu.est-ouvert nav li:nth-child(2) a { transition-delay: .05s; } .menu.est-ouvert nav li:nth-child(3) a { transition-delay: .1s; }
.menu.est-ouvert nav li:nth-child(4) a { transition-delay: .15s; } .menu.est-ouvert nav li:nth-child(5) a { transition-delay: .2s; } .menu.est-ouvert nav li:nth-child(6) a { transition-delay: .25s; }
.menu .pratique { display: grid; gap: 8px; font-size: 15px; color: var(--propolis-doux); border-top: 1px solid var(--trait); padding-top: 20px; }
.menu .pratique a, .menu .pratique p { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.menu .burger { display: grid; color: var(--propolis); }

/* 6. Héros ----------------------------------------------------------------- */
/* Texte centré dans la partie visible de la photo, sous l'en-tête (172 - 56 = hauteur de l'en-tête) : il reste au milieu à l'œil et laisse l'abeille dégagée */
.heros { position: relative; min-height: max(640px, 100svh); display: grid; place-items: center; padding: 172px var(--marge) 56px; color: var(--cire); text-align: center; isolation: isolate; overflow: hidden; }
.heros__fond { position: absolute; inset: 0; z-index: -2; }
.heros__fond img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; transform-origin: 50% 35%; }
.heros::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28, 19, 13, var(--voile, .26)); }
/* Halo serré derrière les lettres : la photo reste claire, le texte garde son contraste (mesuré au 10e centile, halo compris) */
.heros h1, .heros__slogan { text-shadow: 0 0 2px rgba(20, 13, 9, .7), 0 1px 8px rgba(20, 13, 9, .75), 0 0 26px rgba(20, 13, 9, .6); }
.heros__contenu { display: flex; flex-direction: column; align-items: center; max-width: 820px; }
.heros__embleme { width: clamp(64px, 5vw + 30px, 92px); }
.heros h1 { margin: 0; }
.heros h1 .nom { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 4.4vw + 14px, 68px); line-height: 1; letter-spacing: -.02em; }
.heros h1 .metier { display: block; margin-top: 18px; font-size: clamp(12.5px, .3vw + 11px, 14.5px); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.heros__slogan { margin-top: 16px; font-family: var(--serif); font-size: clamp(24px, .5vw + 19px, 27px); }

/* 7. Trois cartes à cheval sur le héros ------------------------------------ */
.offres { position: relative; z-index: 2; padding-top: clamp(56px, 6vw, 88px); }
.offres ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.carte { height: 100%; display: flex; flex-direction: column; background: var(--blanc); border-radius: var(--rayon-l); box-shadow: var(--ombre); padding: 14px 14px 26px; transition: transform .6s var(--sortie), box-shadow .6s var(--sortie); }
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-haute); }
.carte picture img { width: 100%; border-radius: calc(var(--rayon-l) - 10px); }
.carte h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.15; margin: 22px 12px 0; }
.carte p { margin: 10px 12px 0; color: var(--propolis-doux); font-size: 16px; line-height: 1.6; }
.carte { text-align: center; }
.carte .lien-fleche { margin: auto 12px 0; padding-top: 18px; align-self: center; }

/* 8. Récits alternés image et texte --------------------------------------- */
.recit { position: relative; padding-block: var(--section); overflow: clip; }
.recit .conteneur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); align-items: center; }
.recit__image { grid-column: 1 / span 7; position: relative; }
.recit__texte { grid-column: 8 / span 5; position: relative; z-index: 1; }
.recit.inverse .recit__image { grid-column: 6 / span 7; grid-row: 1; }
.recit.inverse .recit__texte { grid-column: 1 / span 5; grid-row: 1; }
.recit__image img { width: 100%; border-radius: var(--rayon-l); }
.recit__image figcaption { margin-top: 12px; font-size: 14px; color: var(--propolis-doux); }
.recit__texte .titre { margin-bottom: 26px; }
.recit__texte .bouton, .recit__texte .lien-fleche { margin-top: 34px; }
.recit.alterne { background: var(--cire-2); }
.ornement { position: absolute; z-index: 0; color: var(--propolis-doux); opacity: .18; pointer-events: none; }
.sombre .ornement { color: var(--cire); opacity: .09; }
.ornement--florent { right: -24px; top: -170px; transform: rotate(8deg); }
.ornement--miels { right: 6%; top: 56px; transform: rotate(-8deg); }
.ornement--atelier { right: -12px; top: -110px; }
.ornement--avis { left: 5%; top: 64px; }
.ornement--visite { right: 3%; bottom: 40px; transform: rotate(-10deg); }
.ornement--pied { right: 6%; top: 48px; }
.retard-1 { --retard: .12s; } .retard-2 { --retard: .24s; }
sup { font-size: .65em; line-height: 0; }

/* Fiche technique du domaine */
.fiche { display: grid; grid-template-columns: auto 1fr; margin-top: 30px; border-top: 1px solid var(--trait); }
.fiche dt, .fiche dd { padding: 13px 0; border-bottom: 1px solid var(--trait); }
.fiche dt { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--propolis-doux); padding-right: 28px; align-self: center; }
.fiche dd { font-family: var(--serif); font-size: 19px; }
.source { margin-top: 14px; font-size: 13.5px; color: var(--propolis-doux); }
.preuves { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--trait); font-size: 15.5px; color: var(--propolis-doux); }
.preuves a { color: var(--propolis); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.preuves a:hover { color: var(--orange-brule); }
.sombre .fiche { border-top-color: rgba(251, 246, 236, .18); }
.sombre .fiche dt, .sombre .fiche dd { border-bottom-color: rgba(251, 246, 236, .18); }
.sombre .fiche dt { color: rgba(251, 246, 236, .74); }

/* 9. Calendrier des miels -------------------------------------------------- */
.miels { padding-block: var(--section); background: var(--cire); position: relative; overflow: clip; }
.miels__tete { max-width: 780px; margin-inline: auto; text-align: center; }
.miels__tete .chapo { margin-top: 24px; }
.calendrier { margin-top: clamp(48px, 5vw, 72px); background: var(--blanc); border-radius: var(--rayon-l); box-shadow: var(--ombre); padding: clamp(18px, 3vw, 40px); }
.calendrier table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendrier caption { text-align: left; font-size: 14px; color: var(--propolis-doux); padding-bottom: 18px; }
.calendrier th, .calendrier td { padding: 0; }
.calendrier thead th { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--propolis-doux); text-align: left; padding-bottom: 12px; border-bottom: 1px solid var(--trait); }
.calendrier thead th:first-child { width: 30%; }
.calendrier tbody th { font-family: var(--serif); font-weight: 400; font-size: 19px; text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.calendrier tbody td { border-bottom: 1px solid var(--trait); }
.calendrier .periode { position: relative; height: 12px; margin-inline: 2px; }
.calendrier .barre { position: absolute; top: 0; bottom: 0; left: calc(var(--debut) / 12 * 100%); width: calc((var(--fin) - var(--debut)) / 12 * 100%); border-radius: 999px; background: var(--miel); transform-origin: left; }
.calendrier tbody td[colspan] { position: relative; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%25%27 height=%27100%25%27%3E%3Cg stroke=%27%232B1D16%27 stroke-opacity=%27.08%27%3E%3Cline x1=%2716.667%25%27 y1=%270%27 x2=%2716.667%25%27 y2=%27100%25%27/%3E%3Cline x1=%2733.333%25%27 y1=%270%27 x2=%2733.333%25%27 y2=%27100%25%27/%3E%3Cline x1=%2750%25%27 y1=%270%27 x2=%2750%25%27 y2=%27100%25%27/%3E%3Cline x1=%2766.667%25%27 y1=%270%27 x2=%2766.667%25%27 y2=%27100%25%27/%3E%3Cline x1=%2783.333%25%27 y1=%270%27 x2=%2783.333%25%27 y2=%27100%25%27/%3E%3C/g%3E%3C/svg%3E") no-repeat; }
/* Position des barres en demi-mois depuis le 1er avril (0) jusqu'au 30 septembre (12) */
.d0 { --debut: 0; } .d1 { --debut: 1; } .d2 { --debut: 2; } .d3 { --debut: 3; } .d4 { --debut: 4; } .d5 { --debut: 5; } .d6 { --debut: 6; } .d7 { --debut: 7; } .d8 { --debut: 8; } .d9 { --debut: 9; } .d10 { --debut: 10; } .d11 { --debut: 11; } 
.f1 { --fin: 1; } .f2 { --fin: 2; } .f3 { --fin: 3; } .f4 { --fin: 4; } .f5 { --fin: 5; } .f6 { --fin: 6; } .f7 { --fin: 7; } .f8 { --fin: 8; } .f9 { --fin: 9; } .f10 { --fin: 10; } .f11 { --fin: 11; } .f12 { --fin: 12; } 
.r1 { --rang: 1; } .r2 { --rang: 2; } .r3 { --rang: 3; } .r4 { --rang: 4; } .r5 { --rang: 5; } .r6 { --rang: 6; } .r7 { --rang: 7; } .r8 { --rang: 8; } .r9 { --rang: 9; } .r10 { --rang: 10; } .r11 { --rang: 11; } 
/* Calendrier cliquable : le nom du miel ouvre sa description */
.miel-bouton { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; transition: color .3s var(--sortie); }
.miel-bouton .ico { font-size: 20px; color: var(--orange-brule); transition: transform .45s var(--sortie); }
.miel-bouton:hover { color: var(--orange-brule); }
.miel-bouton[aria-expanded="true"] { color: var(--orange-brule); }
.miel-bouton[aria-expanded="true"] .ico { transform: rotate(180deg); }
.calendrier tbody .detail td { padding: 0 0 18px; border-bottom: 1px solid var(--trait); background: none; }
.detail__contenu { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 40px; padding: 20px 22px; background: var(--cire); border-radius: var(--rayon-s); font-size: 16px; line-height: 1.65; }
.detail__contenu .texture { color: var(--propolis-doux); }
.detail__contenu .texture span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) { .detail:not([hidden]) .detail__contenu { animation: monte .6s var(--sortie) both; } }
@media (max-width: 700px) { .detail__contenu { grid-template-columns: minmax(0, 1fr); padding: 16px; } }
.miels__pied { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 40px; text-align: center; }
.miels__pied p { max-width: 44em; color: var(--propolis-doux); }

/* 10. Produits ------------------------------------------------------------- */
.produits { padding-block: var(--section); }
.produits__tete { max-width: 780px; margin-inline: auto; text-align: center; }
.produits__tete .chapo { margin-top: 24px; }
.produits ul.familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(48px, 5vw, 72px); }
.famille { border-top: 1px solid var(--propolis); padding-top: 26px; }
.famille .ico { font-size: 34px; color: var(--orange-brule); }
.famille h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); margin-top: 18px; }
.famille li { padding: 12px 0; border-bottom: 1px solid var(--trait); font-size: 16.5px; line-height: 1.55; }
.famille li strong { font-weight: 600; }
.famille ul { margin-top: 12px; }

/* 11. Galerie -------------------------------------------------------------- */
.sombre { background: var(--propolis); color: var(--cire); }
.galerie { padding-block: var(--section); position: relative; overflow: clip; }
.galerie__tete { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mosaique { margin-top: clamp(40px, 5vw, 72px); columns: 3; column-gap: clamp(12px, 1.6vw, 24px); }
.mosaique li { break-inside: avoid; margin-bottom: clamp(12px, 1.6vw, 24px); }
.mosaique button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--rayon-m); overflow: hidden; position: relative; }
.mosaique img { width: 100%; transition: transform 1s var(--sortie), filter .6s var(--sortie); }
.mosaique button:hover img { transform: scale(1.035); }
/* Trois colonnes : le miel de sapin est recadré par le bas (sol seul) pour que les colonnes finissent au même niveau. La visionneuse montre la photo entière. */
@media (min-width: 901px) { .mosaique .recadree img { aspect-ratio: 608 / 940; object-fit: cover; object-position: 50% 0; } }
.mosaique button::after { content: attr(data-legende); position: absolute; left: 14px; bottom: 14px; right: 14px; text-align: left; font-size: 14px; color: var(--cire); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--sortie), transform .5s var(--sortie); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.mosaique button:hover::after, .mosaique button:focus-visible::after { opacity: 1; transform: none; }

/* Visionneuse */
.visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 13, 9, .94); color: var(--cire); }
.visionneuse::backdrop { background: transparent; }
.visionneuse[open] { display: grid; grid-template-rows: auto 1fr auto; animation: apparition .45s var(--sortie); }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }
.visionneuse .barre-haut { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--marge); font-size: 14px; }
.visionneuse .scene { display: grid; place-items: center; padding: 0 clamp(8px, 6vw, 96px); min-height: 0; }
.visionneuse figure { display: grid; justify-items: center; gap: 14px; max-height: 100%; }
.visionneuse img { max-width: 100%; max-height: calc(100dvh - 180px); width: auto; border-radius: var(--rayon-s); transition: opacity .35s var(--doux); }
.visionneuse figcaption { font-size: 15px; color: rgba(251, 246, 236, .85); text-align: center; }
.visionneuse .commandes { display: flex; justify-content: center; gap: 12px; padding: 16px; }
.rond { width: 48px; height: 48px; border-radius: 8px; border: 1px solid rgba(251, 246, 236, .45); background: transparent; color: var(--cire); display: grid; place-items: center; font-size: 20px; cursor: pointer; transition: background-color .35s var(--sortie), border-color .35s var(--sortie); }
.rond:hover { background: rgba(251, 246, 236, .12); border-color: var(--cire); }

/* 12. Atelier et apiculteurs ---------------------------------------------- */
.etapes { display: grid; gap: 0; margin-top: 28px; counter-reset: etape; border-top: 1px solid var(--trait); }
.etapes li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--trait); counter-increment: etape; }
.etapes li::before { content: "0" counter(etape); font-family: var(--serif); font-size: 22px; color: var(--orange-brule); line-height: 1.3; }
.etapes strong { display: block; font-weight: 600; }
.etapes span { color: var(--propolis-doux); font-size: 16px; }
.apiculteurs { padding: clamp(56px, 6vw, 88px) 0; background: var(--cire); border-bottom: 1px solid var(--trait); }
.apiculteurs .conteneur { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 3vw, 40px); text-align: center; }
.apiculteurs h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 1.2vw + 20px, 36px); line-height: 1.15; }
.apiculteurs ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(32px, 5vw, 72px); }
.apiculteurs li { display: flex; align-items: center; gap: 12px; font-size: 16.5px; font-weight: 500; }
.apiculteurs li .ico { font-size: 30px; color: var(--orange-brule); }

/* 13. Avis ----------------------------------------------------------------- */
.avis { padding-block: var(--section); position: relative; overflow: clip; text-align: center; }
.note { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 15px; color: var(--propolis-doux); }
.note strong { display: inline-flex; align-items: center; gap: 3px; font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--propolis); }
.note strong svg { width: 18px; height: 18px; color: var(--miel); }
.note:hover span { text-decoration: underline; text-underline-offset: 4px; }
.avis .titre { margin-top: 18px; }
.temoignages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(44px, 5vw, 72px); text-align: left; }
.temoignage { display: flex; flex-direction: column; background: var(--blanc); border-radius: var(--rayon-l); box-shadow: var(--ombre); padding: clamp(26px, 2.4vw, 38px); }
.temoignage blockquote { font-family: var(--serif); font-size: clamp(19px, .5vw + 16px, 22px); line-height: 1.4; }
.temoignage figcaption { margin-top: auto; padding-top: 22px; font-size: 14px; color: var(--propolis-doux); }

/* 14. Visite et contact ---------------------------------------------------- */
.visite { padding-block: var(--section); position: relative; overflow: clip; }
.visite .conteneur { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.visite .fiche dd a { text-decoration: none; }
.visite .fiche dd a:hover { text-decoration: underline; text-underline-offset: 4px; }
.visite .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.formulaire { background: var(--blanc); color: var(--propolis); border-radius: var(--rayon-l); box-shadow: var(--ombre-haute); padding: clamp(26px, 3vw, 44px); }
.formulaire h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); }
.formulaire > p { margin-top: 8px; color: var(--propolis-doux); font-size: 16px; }
.champ { display: grid; gap: 6px; margin-top: 20px; }
.champ label { font-size: 14px; font-weight: 600; }
.champ input, .champ textarea { font: inherit; font-size: 16px; color: inherit; background: var(--cire); border: 1px solid var(--trait); border-radius: var(--rayon-s); padding: 13px 14px; transition: border-color .3s var(--sortie), background-color .3s var(--sortie); }
.champ textarea { min-height: 128px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--propolis); background: var(--blanc); }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--orange-brule); outline-offset: 1px; }
.champ .erreur { font-size: 13.5px; color: #A3311A; min-height: 0; }
.champ [aria-invalid="true"] { border-color: #A3311A; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .bouton { width: 100%; margin-top: 26px; }
.formulaire .etat { margin-top: 14px; font-size: 14.5px; color: var(--propolis-doux); min-height: 1.5em; }

/* 15. Pied de page --------------------------------------------------------- */
.pied { padding: clamp(64px, 7vw, 104px) 0 32px; position: relative; overflow: clip; background: #1E1510; border-top: 1px solid rgba(251, 246, 236, .08); }
.pied__haut { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr)); gap: clamp(32px, 5vw, 80px); }
.pied__marque img { width: 64px; }
.pied__marque p { margin-top: 18px; font-family: var(--serif); font-size: 26px; }
.pied h2 { font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--miel-clair); }
.pied ul { margin-top: 16px; display: grid; gap: 8px; }
.pied a { text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; border-top: 1px solid rgba(251, 246, 236, .14); font-size: 13.5px; color: rgba(251, 246, 236, .72); }

/* 16. Mouvement (amélioration progressive : tout est visible sans script) --- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-apparait] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--sortie), transform 1.3s var(--sortie); transition-delay: var(--retard, 0s); }
  .js [data-apparait].est-visible { opacity: 1; transform: none; }
  .js [data-devoile] { clip-path: inset(0 0 100% 0 round var(--rayon-l)); transition: clip-path 1.5s var(--sortie); transition-delay: var(--retard, 0s); }
  .js [data-devoile].est-visible { clip-path: inset(0 0 0 0 round var(--rayon-l)); }
  .js [data-devoile] img { transform: scale(1.08); transition: transform 1.8s var(--sortie); transition-delay: var(--retard, 0s); }
  .js [data-devoile].est-visible img { transform: none; }
  .js .calendrier .barre { transform: scaleX(0); transition: transform 1.2s var(--sortie); transition-delay: calc(var(--rang) * 60ms + .2s); }
  .js .calendrier.est-visible .barre { transform: none; }
  .heros__fond img { animation: respire 2.8s var(--sortie) both; }
  .heros__contenu > * { animation: monte 1.2s var(--sortie) both; }
  .heros__contenu > :nth-child(2) { animation-delay: .15s; }
  @keyframes respire { from { transform: scale(1.08); } to { transform: none; } }
  @keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  [data-parallaxe] { will-change: transform; }
}

/* 17. Adaptation ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .liens { display: none; }
  .temoignages { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .infos .droite a:first-child { display: none; }
  .nav { gap: 14px; }
  .nav .bouton { display: none; }
  .burger { display: grid; }
  .appel-mobile { display: grid; }
  .marque img { width: 40px; }
  .marque span { font-size: 21px; }
  .offres ul { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .recit .conteneur, .miels__tete, .visite .conteneur, .apiculteurs .conteneur { grid-template-columns: minmax(0, 1fr); }
  .recit__image, .recit__texte, .recit.inverse .recit__image, .recit.inverse .recit__texte { grid-column: 1 / -1; grid-row: auto; }
  .recit.inverse .recit__image { order: -1; }
  .produits ul.familles { grid-template-columns: minmax(0, 1fr); }
  .mosaique { columns: 2; }
  .pied__haut { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied__marque { grid-column: 1 / -1; }
  .calendrier thead th:first-child { width: 36%; }
  .calendrier tbody th { font-size: 17px; }
}
@media (max-width: 560px) {
  .infos .droite { display: none; }
  .infos .long { display: none; }
  .calendrier { padding: 16px 14px; }
  .calendrier thead th { font-size: 10.5px; letter-spacing: .06em; }
  .ornement--florent, .ornement--atelier { display: none; }
  .visite .actions .bouton { flex: 1 1 100%; }
}
@media (min-width: 561px) { .infos .court { display: none; } }
@media (min-width: 1800px) {
  :root { --largeur: 1440px; --t-corps: 19px; }
}