/* 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;
}
/* Le doré vif du sceau, pas le doré textuel. L'accroche fait 37 à 62px selon
   l'écran : c'est du « grand texte » au sens WCAG, qui n'exige que 3:1 —
   B0871F y est à 3,32:1. Le même ton sur un surtitre ou un lien tomberait
   sous le seuil, d'où --honey partout ailleurs. Ne pas generaliser. */
.hero h1 em{font-style:italic;color:var(--honey-2)}
.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;
  /* Colonne pour que les tarifs se calent en pied : les descriptions n'ont pas
     la meme longueur, et des prix a des hauteurs differentes se lisent comme un
     desalignement, pas comme une variation de texte. */
  display:flex;flex-direction:column;
}
.card-body{flex:1;display:flex;flex-direction:column}
.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)}

/* Tarifs : le format dans la voix mono, le prix dans la voix de titrage. Les
   chiffres sont en tabular-nums pour que les colonnes s'alignent d'une ligne a
   l'autre -- la table tnum a ete conservee au sous-ensemble des polices pour ca. */
.card-tarifs{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:grid;gap:5px;
}
.card-tarifs>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card-tarifs dt{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.card-tarifs dd{
  margin:0;font-family:var(--f-display);font-size:1rem;font-weight:600;
  color:var(--honey);font-variant-numeric:tabular-nums;
}

/* ---------- 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)}

/* ---------- abeilles des alveoles ---------- */
/* Une abeille butine autour de chaque miel. Decor pur : aria-hidden, sans
   interaction, et le site ne perd rien si elle ne tourne pas. Elle reutilise
   #bee-simple -- pas un motif de plus, la meme abeille que partout ailleurs.

   Chacune a sa place ET sa trajectoire. Un meme trace decale dans le temps se
   reconnait immediatement : quatre abeilles au meme endroit, c'est un gabarit,
   pas quatre abeilles. Les ancres sont en pourcentage pour suivre la carte quelle
   que soit sa largeur, et se logent dans les creux laisses par l'hexagone. */
.card-img{position:relative}

.card-bee{
  position:absolute;left:var(--bx);top:var(--by);
  width:22px;height:22px;margin:-11px 0 0 -11px;
  pointer-events:none;color:var(--honey);opacity:.7;
}
.card-bee svg{display:block}

@supports (offset-path:path("M0 0")){
  .card-bee{offset-rotate:0deg;animation:bee-orbit linear infinite}
  .card-bee svg{transform-origin:center;animation:bee-roll ease-in-out infinite alternate}

  /* 1. creux haut gauche : survol large et plat */
  .card:nth-child(1) .card-bee{
    --bx:31%;--by:30%;
    offset-path:path("M-30 0a30 12 0 1 0 60 0a30 12 0 1 0-60 0");
    animation-duration:9s;animation-delay:-1s;
  }
  /* 2. flanc droit : montee et descente le long du pot */
  .card:nth-child(2) .card-bee{
    --bx:79%;--by:47%;
    offset-path:path("M0 -26a14 26 0 1 0 0 52a14 26 0 1 0 0-52");
    animation-duration:11.5s;animation-delay:-5s;animation-direction:reverse;
  }
  /* 3. creux bas droit : orbite penchee */
  .card:nth-child(3) .card-bee{
    --bx:71%;--by:73%;
    offset-path:path("M-27 6a28 13 0 1 0 54-12a28 13 0 1 0-54 12");
    animation-duration:8s;animation-delay:-3.5s;
  }
  /* 4. creux bas gauche : petite ronde serree, a contresens */
  .card:nth-child(4) .card-bee{
    --bx:25%;--by:66%;
    offset-path:path("M-20 0a20 18 0 1 0 40 0a20 18 0 1 0-40 0");
    animation-duration:12.5s;animation-delay:-8s;animation-direction:reverse;
  }

  /* Le roulis aussi differe, sinon les quatre penchent ensemble. */
  .card:nth-child(1) .card-bee svg{animation-duration:3.7s}
  .card:nth-child(2) .card-bee svg{animation-duration:4.6s}
  .card:nth-child(3) .card-bee svg{animation-duration:3.1s}
  .card:nth-child(4) .card-bee svg{animation-duration:5.2s}
}

@keyframes bee-orbit{to{offset-distance:100%}}
@keyframes bee-roll{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}

/* ---------- le sceau ---------- */
/* Une marque qui s'assemble a l'arrivee se lit comme dessinee ; une marque qui
   s'affiche d'un coup se lit comme posee. Le contour se trace, le filet dore suit,
   l'abeille arrive en dernier.

   Regle du contenu inconditionnel : l'etat visible est celui de l'element, l'etat
   masque n'existe que dans les images cles, en fill-mode backwards. Si l'animation
   ne tourne jamais -- navigateur ancien, onglet en arriere-plan -- le sceau est
   entier. Aucune combinaison ne peut le laisser invisible. */
.seal-edge,.seal-rule{stroke-dasharray:1;stroke-dashoffset:0}

@media (prefers-reduced-motion:no-preference){
  .seal-ground{animation:seal-fade .9s ease-out .15s backwards}
  .seal-edge{animation:seal-draw 1.25s cubic-bezier(.62,0,.3,1) backwards}
  .seal-rule{animation:seal-draw 1s cubic-bezier(.62,0,.3,1) .5s backwards}
  .seal-arrive{
    transform-box:fill-box;transform-origin:center;
    /* --spring-soft porte deja sa duree : en ajouter une invalide le raccourci
       et l'animation disparait sans le moindre avertissement. */
    animation:seal-bee-arrive var(--spring-soft) .95s backwards;
  }

  /* Le battement ne tourne pas en continu : trois salves par cycle de 9s,
     d'intensite decroissante, separees par de longs repos. Il ne demarre qu'une
     fois l'abeille arrivee. */
  .seal-bee{
    transform-box:fill-box;transform-origin:center;
    animation:seal-idle 9s ease-in-out 1.5s infinite;
  }
}

/* Les ailes pivotent a leur attache au thorax -- une mise a l'echelle epaissirait
   le trait, une rotation non. */

@keyframes seal-idle{
  0%{transform:translate(0,0) rotate(0)}
  2%{transform:translate(-.2px,.2px) rotate(.2deg)}
  5%{transform:translate(.4px,-1.7px) rotate(-.9deg)}
  13%{transform:translate(-.6px,.5px) rotate(.5deg)}
  28%{transform:translate(-1.5px,.3px) rotate(.9deg)}
  40%{transform:translate(-.8px,0) rotate(.4deg)}
  43%{transform:translate(.3px,-1.2px) rotate(-.6deg)}
  52%{transform:translate(1px,.5px) rotate(.4deg)}
  68%{transform:translate(1.6px,-.2px) rotate(-.3deg)}
  76%{transform:translate(1.2px,-.6px) rotate(-.2deg)}
  100%{transform:translate(0,0) rotate(0)}
}
@keyframes seal-fade{from{opacity:0}}
@keyframes seal-draw{from{stroke-dashoffset:1}}
@keyframes seal-bee-arrive{from{opacity:0;transform:scale(.86) translateY(4px)}}

/* ---------- l'abeille de la newsletter ---------- */
/* Elle recompense un geste au lieu de meubler : elle ne parait qu'a l'inscription
   reussie. opacity:0 au repos, jamais display:none, pour qu'elle n'ait aucun effet
   sur la mise en page du formulaire. */
.news-row{position:relative}
.news-bee{
  position:absolute;right:16px;top:50%;margin-top:-12px;
  width:24px;height:24px;opacity:0;pointer-events:none;color:var(--honey);
}
.news-bee svg{display:block}
.news-bee.is-flying{animation:news-bee-away 1.6s cubic-bezier(.3,.1,.4,1) forwards}
.news-bee.is-flying svg{animation:bee-roll .2s ease-in-out infinite alternate}

@keyframes news-bee-away{
  0%{opacity:0;transform:translate(0,8px) scale(.85)}
  12%{opacity:.9;transform:translate(2px,0) scale(1)}
  100%{opacity:0;transform:translate(58px,-86px) scale(.7)}
}

/* ---------- navigation : on voyage jusqu'a la section ---------- */
/* Le saut instantane fait perdre le fil : on ne sait pas d'ou l'on vient. Le
   defilement anime montre le chemin. Conditionne au mouvement non reduit --
   scroll-behavior ignore la regle globale sur animation-duration. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
/* Le header est collant et haut de 67px : sans cette marge, le titre de la
   section arrive dessous et on croit avoir rate la cible. */
:target{scroll-margin-top:92px}


@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  /* Sans cette exception, la regle ci-dessus ferait tourner l'orbite en 0,01ms :
     l'abeille se poserait n'importe ou. On l'immobilise franchement. */
  .card-bee,.card-bee svg,.seal-bee,.seal-wing{animation:none!important}
  .card-bee{offset-distance:26%}
  .motion [data-reveal]{opacity:1;transform:none;will-change:auto}
  .motion .portrait-img img{transform:none}
}