/* Rev. 2 — invalide l'ETag : les navigateurs ayant mis cette feuille en cache avec
   le mauvais Content-Type ne se repareraient jamais sinon, la revalidation 304 ne
   renvoyant pas d'en-tete Content-Type. */
/* Polices auto-hébergées : aucune requête vers un tiers, aucune IP transmise.
   Sous-ensembles latin + latin-ext uniquement. Régénérer avec
   scripts/fetch-fonts.py si la pile typographique change. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-400-latin-ext.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-500-latin-ext.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Karla-300-700-latin-ext.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;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Karla-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Newsreader-Italic-300-700-latin-ext.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Newsreader-Italic-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Newsreader-300-700-latin-ext.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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Newsreader-300-700-latin.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;
}

/* Rucher Lou Z'Aravis — feuille de style unique, aucune dépendance */
/* Palette reprise de l'étiquette : bleu nuit + doré crème */

:root{
  --brand-dark:#22303A;      /* bleu nuit de l'étiquette */
  --brand-dark-2:#2C3D48;
  --brand-cream:#E9D7A2;     /* doré crème de l'étiquette */

  --white:#FFFFFF;
  --cream:#FCFBF7;
  --sand:#F6F4EE;
  --line:#E7E3D8;
  --line-2:#D6D0C0;
  --ink:#22303A;
  --ink-2:#54606A;
  --ink-3:#616C75;
  --honey:#856416;           /* doré assombri pour rester lisible en petit corps */
  --honey-2:#B0871F;
  --honey-soft:#FBF4E3;
  --honey-tint:#FAF6EC;

  --f-display:'Newsreader',Georgia,'Times New Roman',serif;
  --f-body:'Karla',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--f-display);
  font-optical-sizing:auto;
  margin:0;
  line-height:1.15;
  letter-spacing:-.015em;
  text-wrap:balance;
}
p{margin:0}

a{color:var(--honey);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--honey);outline-offset:3px;border-radius:2px}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--pad)}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);
  padding:10px 16px;z-index:100;
}
.skip:focus{left:8px;top:8px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{
  max-width:1120px;margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.logo{
  display:flex;align-items:center;gap:11px;
  color:var(--ink);text-decoration:none;
}
.logo:hover{text-decoration:none}
.logo-mark{width:34px;height:38px;flex:none}
.logo-text{
  font-family:var(--f-display);font-size:1.16rem;font-weight:600;
  line-height:1.12;
}
.logo small{
  display:block;font-family:var(--f-mono);font-size:.55rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--honey);margin-top:4px;
}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,26px);margin-left:auto;flex-wrap:wrap}
.nav a{font-size:.92rem;color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--honey)}
.nav-cta{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:20px;padding:6px 15px;color:var(--ink-2);
}
.nav-cta:hover{border-color:var(--honey);color:var(--honey)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(44px,7vw,86px)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:center}
.kicker{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--honey);margin-bottom:16px;
}
.hero h1{
  font-size:clamp(2.3rem,6vw,3.9rem);font-weight:500;
}
.hero h1 em{font-style:italic;color:var(--honey)}
.lede{margin-top:18px;font-size:clamp(1.02rem,1.9vw,1.16rem);color:var(--ink-2);max-width:42ch}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-block;padding:11px 22px;border-radius:2px;
  font-size:.92rem;font-weight:600;text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand-dark);color:var(--brand-cream);border:1px solid var(--brand-dark)}
.btn-primary:hover{background:var(--brand-dark-2);border-color:var(--brand-dark-2)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--honey);color:var(--honey)}
/* Variantes pour fond bleu nuit uniquement (bloc professionnels). */
.btn-cream{background:var(--brand-cream);color:var(--brand-dark);border:1px solid var(--brand-cream)}
.btn-cream:hover{background:#F2E4BC;border-color:#F2E4BC}
.btn-outline-cream{border:1px solid rgba(233,215,162,.45);color:var(--brand-cream)}
.btn-outline-cream:hover{border-color:var(--brand-cream)}

.hero-art{display:flex;justify-content:center;align-items:center;margin:0}
/* Le sceau tient la place jusqu'aux photos ; une <img> déposée ici s'adapte seule. */
.seal{width:78%;max-width:300px;height:auto}
.hero-art img{width:100%;height:auto;display:block;border-radius:3px;
  aspect-ratio:4/5;object-fit:cover;background:var(--sand)}

/* ---------- bandeau confiance ---------- */
.trust{background:var(--cream);border-block:1px solid var(--line)}
.trust-in{
  display:flex;flex-wrap:wrap;gap:8px clamp(16px,3vw,40px);padding-block:15px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
.trust b{color:var(--honey);font-weight:600}

/* ---------- sections ---------- */
.section{padding-block:clamp(48px,7vw,84px)}
.section.tint{background:var(--sand);border-block:1px solid var(--line)}
.head{margin-bottom:36px;max-width:60ch}
.eyebrow{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--honey);margin-bottom:12px;
}
h2{font-size:clamp(1.6rem,3.4vw,2.25rem);font-weight:500}
.sub{margin-top:14px;color:var(--ink-2)}
.note{margin-top:28px;font-size:.9rem;color:var(--ink-3)}

/* ---------- grille produits ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{
  border:1px solid var(--line);border-radius:3px;background:var(--white);
  overflow:hidden;
}
.card:hover{border-color:var(--brand-dark);transform:translateY(-2px)}
.card-img{
  background:var(--honey-soft);display:flex;justify-content:center;align-items:center;
  aspect-ratio:1/.9;
}
/* Alvéole : l'hexagone rempli du miel. Le dégradé distingue la variété. */
.cell{width:52%;max-width:112px;height:auto}
.cell.wide{width:78%;max-width:180px}
.card-body{padding:18px 20px 22px}
.card h3{font-size:1.12rem;font-weight:600}
.card-meta{margin-top:4px;font-size:.84rem;color:var(--ink-3)}
.card-desc{margin-top:12px;font-size:.93rem;color:var(--ink-2)}
.card-price{
  margin-top:16px;font-family:var(--f-display);font-size:1.2rem;font-weight:600;
  color:var(--honey);font-variant-numeric:tabular-nums;
}
.card-price span{font-family:var(--f-body);font-size:.82rem;font-weight:400;color:var(--ink-3)}

/* ---------- deux colonnes ---------- */
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:start}
.two-col p{color:var(--ink-2);margin-top:16px}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.facts li{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 0;border-bottom:1px solid var(--line-2);
}
.facts li:first-child{padding-top:0}
.facts li:last-child{border-bottom:0}
.facts b{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--honey);
}
.facts span{font-size:.93rem;color:var(--ink-2);line-height:1.55}

/* ---------- portrait ---------- */
.portrait{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,54px);align-items:center}
.portrait-img{margin:0}
.portrait-img img{
  width:100%;height:auto;display:block;border-radius:3px;
  aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;
  background:var(--sand);
}
.portrait-img figcaption{
  margin-top:10px;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.facts-row{
  margin-top:clamp(28px,4vw,44px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 clamp(20px,3vw,36px);
  border-top:1px solid var(--line-2);
}
.facts-row li{border-bottom:0;padding-top:20px}
.facts-row li:first-child{padding-top:20px}

/* ---------- inscription ---------- */
.news{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,54px);align-items:center}
.news p{color:var(--ink-2);margin-top:14px}
.news-form label{
  display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;
}
.news-row{display:flex;gap:10px;flex-wrap:wrap}
.news-row input{
  flex:1 1 200px;min-width:0;font:inherit;font-size:.95rem;padding:11px 14px;
  border:1px solid var(--line-2);border-radius:2px;background:var(--white);color:var(--ink);
}
.news-row input:focus-visible{outline:2px solid var(--honey);outline-offset:2px}
.news-row .btn{border:0;cursor:pointer}
.news-row .btn:disabled{opacity:.5;cursor:default}
.news-msg{margin-top:10px;font-size:.88rem;color:var(--ink-3);min-height:1.2em}

/* ---------- professionnels ---------- */
.pro{
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,52px);align-items:center;
  background:var(--brand-dark);border-radius:3px;
  padding:clamp(26px,4vw,50px);
  color:var(--brand-cream);
}
.pro h2{color:var(--brand-cream)}
.pro .eyebrow{color:var(--brand-cream);opacity:.75;margin-top:0}
.pro p{color:rgba(233,215,162,.82);margin-top:14px}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{
  position:relative;padding-left:24px;font-size:.94rem;color:rgba(233,215,162,.86);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:7px;width:10px;height:11px;
  background:var(--brand-cream);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.pro-cta{
  background:rgba(255,255,255,.06);border:1px solid rgba(233,215,162,.28);border-radius:3px;
  padding:26px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.pro-cta-title{font-family:var(--f-display);font-size:1.12rem;font-weight:600;color:var(--brand-cream)}
.pro-cta-sub{font-size:.86rem;color:rgba(233,215,162,.62);margin-bottom:6px}
.pro-cta .btn{width:100%;text-align:center}

/* ---------- où nous trouver ---------- */
.grid-3{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.box{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:24px}
.box h3{font-size:1.08rem;font-weight:600;margin-bottom:12px}
.box p{font-size:.94rem;color:var(--ink-2)}
.box .muted{margin-top:12px;font-size:.86rem;color:var(--ink-3)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
.contact p{color:var(--ink-2);margin-top:14px}
.contact-links{display:flex;flex-direction:column;gap:12px}
.contact-links a{
  font-family:var(--f-display);font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:10px;text-decoration:none;
}
.contact-links a:hover{color:var(--honey);border-color:var(--honey);text-decoration:none}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--cream);padding-block:26px}
.footer-in{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-3);
}
.footer-in a{color:var(--ink-3)}
.footer-in a:hover{color:var(--honey)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero-grid,.two-col,.pro,.contact,.portrait,.news{grid-template-columns:1fr}
  .hero-art{order:-1;margin-bottom:8px}
  .seal{max-width:200px}
  .bar{gap:14px}
  .nav{width:100%;margin-left:0;justify-content:flex-start;gap:6px clamp(14px,2.2vw,26px)}
  /* Cibles tactiles : les liens de nav passent de 24px à ~44px de haut au doigt.
     :not(.nav-cta) préserve la pastille de contact, déjà dimensionnée. */
  .nav a:not(.nav-cta){padding-block:10px}
}

/* ================= MOUVEMENT =================
   Courbes ressort générées via Motion (generate-css-easing).
   --spring-soft : bounce 0.15, durée perçue 0.55s — révélations au scroll.
   --spring-tight: bounce 0,    durée perçue 0.25s — survols.
   Pas d'overshoot marqué : le site doit rester calme. */
:root{
  --spring-soft:950ms linear(0, 0.0361, 0.1223, 0.2332, 0.3519, 0.4674, 0.5732, 0.666, 0.7448, 0.8098, 0.8621, 0.9031, 0.9345, 0.958, 0.9751, 0.9872, 0.9954, 1.0007, 1.0039, 1.0056, 1.0062, 1.0062, 1.0058, 1.0051, 1.0044, 1.0037, 1.003, 1.0023, 1.0018, 1.0014, 1.001, 1);
  --spring-tight:500ms linear(0, 0.1402, 0.3764, 0.584, 0.7361, 0.838, 0.9029, 0.9428, 0.9668, 0.9809, 0.9892, 0.9939, 0.9966, 0.9981, 0.9989, 0.9994, 1);
}

/* Révélations au scroll. L'état masqué n'existe que si le JS a posé .motion
   sur <html> : sans JS, ou en mouvement réduit, tout reste visible. */
.motion [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--spring-soft), transform var(--spring-soft);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.motion [data-reveal].is-in{opacity:1;transform:none}
.motion [data-reveal].is-done{will-change:auto}

/* La photo se pose avec un très léger recul d'échelle. */
.motion .portrait-img img{
  transform:scale(1.03);
  transition:transform var(--spring-soft);
}
.motion .portrait-img.is-in img{transform:scale(1)}

/* Entrée du hero, au chargement. L'état de base est l'état final :
   si les animations sont coupées, le contenu s'affiche normalement. */
.motion .hero-text > *{animation:rise var(--spring-soft) both}
.motion .hero-text > :nth-child(2){animation-delay:70ms}
.motion .hero-text > :nth-child(3){animation-delay:140ms}
.motion .hero-text > :nth-child(4){animation-delay:210ms}
.motion .hero-art{animation:rise var(--spring-soft) 160ms both}

@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* Contenu injecté par l'API ou par le formulaire : il arrive, il n'apparaît pas.
   Animation (et non transition) parce que l'élément n'a pas d'état de départ :
   il vient d'être écrit dans le DOM. */
@keyframes swap-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.swap-in{
  /* `backwards` et non `both` : l'état masqué ne vaut que pendant le délai.
     Une fois l'animation finie, l'élément revient à son état naturel — et le JS
     retire la classe au bout d'1,2 s quoi qu'il arrive. Rien ne peut rester
     invisible parce qu'une animation n'a pas tourné. */
  animation:swap-in var(--spring-soft) backwards;
  animation-delay:var(--swap-delay, 0ms);
}

/* Survols : ressort court, sans rebond. */
.card{transition:border-color var(--spring-tight), transform var(--spring-tight)}
.btn{transition:background var(--spring-tight), border-color var(--spring-tight), color var(--spring-tight), opacity var(--spring-tight)}
.nav a,.contact-links a{transition:color var(--spring-tight)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .motion [data-reveal]{opacity:1;transform:none;will-change:auto}
  .motion .portrait-img img{transform:none}
}