/* ==========================================================================
   La Coquille de Massiac — design éditorial
   Reconstruit d'après la structure de l'ancienne page « la ferme »
   (l'ancien style.css ayant été perdu). Sert de gabarit à la page ferme,
   aux 7 pages locales et à la page produits.
   ========================================================================== */

/* ---------------------------------------------------------------- HERO FERME */
.lf-hero{
  position:relative;min-height:min(94vh,820px);display:grid;align-items:end;
  padding:clamp(6rem,12vw,9rem) clamp(1.2rem,5vw,4rem) clamp(3rem,6vw,5rem);
  overflow:hidden;color:#fff;
}
.lf-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lf-hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(52,16,9,.55) 0%,rgba(52,16,9,.30) 40%,rgba(28,9,4,.88) 100%);
}
.lf-hero-inner{
  position:relative;z-index:2;width:min(100%,var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4.5rem);align-items:end;
}
.lf-hero-head h1{
  font-size:clamp(2.6rem,7.5vw,5.6rem);color:#fff;letter-spacing:-.02em;
  text-shadow:0 6px 40px rgba(0,0,0,.4);
}
.lf-hero-rule{display:block;width:74px;height:3px;background:var(--gold);margin:1.5rem 0 1.3rem}
.lf-hero-head p{max-width:46ch;color:rgba(255,255,255,.88);font-size:clamp(.98rem,1.4vw,1.1rem)}

.lf-card{
  background:rgba(20,9,5,.62);backdrop-filter:blur(9px);
  border:1px solid rgba(230,217,189,.22);padding:1.8rem 1.7rem;border-radius:var(--r);
}
.lf-card h2{font-size:1.15rem;color:var(--gold);margin-bottom:1.1rem}
.lf-card dl{display:grid;gap:.9rem;margin-bottom:1.5rem}
.lf-card dt{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  font-size:.76rem;color:rgba(255,255,255,.55);
}
.lf-card dd{font-size:.94rem;color:#fff;line-height:1.45}
.lf-card .btn{width:100%;background:var(--gold);color:#fff;border-color:var(--gold)}
.lf-card .btn:hover{background:var(--gold-d);border-color:var(--gold-d)}

/* ---------------------------------------------------------------- WAYPOINTS (accès) */
/* La bande deborde sur telephone : quatre etapes de trajet ne tiennent pas dans
   375 px. Elle affichait donc une barre de defilement grise en travers du
   bandeau sombre — laide, et rien n'indiquait qu'il y avait quelque chose a
   voir. La barre est masquee, un degrade signale la suite, et main.js fait
   defiler la bande une fois toute seule quand elle entre a l'ecran. */
.lf-way{background:var(--ox-d);color:var(--cream);padding:1.5rem clamp(1.2rem,5vw,4rem);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.lf-way::-webkit-scrollbar{display:none}
.lf-way{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.15) 100%);
  transition:mask-image .3s ease,-webkit-mask-image .3s ease;
}
/* arrive au bout : plus rien a annoncer, le degrade disparait */
.lf-way.au-bout{-webkit-mask-image:none;mask-image:none}
.lf-way-inner{
  width:min(100%,var(--maxw));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.4rem);min-width:max-content;
}
.lf-stop{display:flex;flex-direction:column;gap:.15rem;position:relative;padding-left:1.1rem;white-space:nowrap}
.lf-stop-dot{
  position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(199,154,62,.18);
}
.lf-stop b{font-family:'Oswald','Inter',sans-serif;font-weight:600;font-size:.94rem;letter-spacing:.02em}
.lf-stop span{font-size:.74rem;color:rgba(230,217,189,.6);letter-spacing:.05em}
.lf-way-line{flex:1;min-width:28px;height:1px;background:linear-gradient(90deg,rgba(199,154,62,.5),rgba(199,154,62,.15))}

/* ---------------------------------------------------------------- COLLAGE (lieu / carte / visite) */
.lf-collage{
  position:relative;background:var(--cream-2);
  padding:0 clamp(1.2rem,5vw,4rem) clamp(3rem,6vw,5rem);
  display:grid;grid-template-columns:1.02fr .98fr;column-gap:clamp(2rem,5vw,4.5rem);
}
/* La bande sombre est un ITEM de grille placé dans la 1re rangée : elle épouse donc
   exactement la hauteur du bloc « Le lieu », quel que soit le texte. Les marges
   négatives la font déborder jusqu'aux bords de l'écran (full-bleed).
   Ne pas la passer en position:absolute — la règle `.lf-collage > *{position:relative}`
   la remettrait dans le flux et le texte blanc se retrouverait sur fond crème. */
.lf-darkband{
  grid-column:1 / -1;grid-row:1;z-index:0;background:var(--ox-d);
  margin-inline:calc(-1 * clamp(1.2rem,5vw,4rem));
}
.lf-collage > *{position:relative}
.lf-cell-start{
  grid-column:1;grid-row:1;z-index:2;color:var(--cream-2);
  padding:clamp(3rem,6vw,4.6rem) 0 clamp(2.4rem,4vw,3.4rem);align-self:start;
}
.lf-cell-start h2{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);margin:.4rem 0 1rem}
.lf-cell-start p{color:rgba(240,228,200,.82);max-width:44ch}
.lf-pt{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.22em;text-transform:uppercase;
  font-size:.9rem;color:var(--gold);
}
.lf-pt.dark{color:var(--gold-d)}

.lf-photos{
  grid-column:2;grid-row:1 / span 2;z-index:3;
  display:flex;gap:clamp(.8rem,1.6vw,1.4rem);align-items:flex-start;
  padding-top:clamp(3rem,6vw,4.6rem);
}
.lf-photo{flex:1;min-width:0}
.lf-photo img{
  width:100%;aspect-ratio:3/4.4;object-fit:cover;border-radius:var(--r);
  box-shadow:0 26px 60px rgba(28,9,4,.38);
}
.lf-photo figcaption{padding-top:.8rem;display:grid;gap:.1rem}
.lf-photo figcaption b{font-size:.9rem;color:var(--ink)}
.lf-photo figcaption span{font-size:.75rem;color:var(--muted);letter-spacing:.05em}
.lf-photo-peek{flex:.72;padding-top:clamp(2.5rem,6vw,5rem)}
.lf-photo-peek img{aspect-ratio:3/4}

/* Colonne 2, rangee 3 : elle etait vide sur les neuf pages qui utilisent ce
   bloc. Le contenu prolonge la carte « Nous rendre visite » d'a cote plutot que
   de la decorer — ce qu'on voit vraiment en venant. */
.lf-cell-plus{
  grid-column:2;grid-row:3;z-index:2;align-self:center;
  padding:clamp(1.5rem,3vw,2.5rem) 0;
}
.lf-cell-plus h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:.35rem 0 1.4rem;color:var(--ox)}
.lf-plus-liste{list-style:none;display:grid;gap:0}
.lf-plus-liste li{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:1rem;row-gap:.2rem;align-items:start;
  padding:1rem 0;border-top:1px solid var(--line);
}
.lf-plus-liste li:last-child{border-bottom:1px solid var(--line)}
.lf-plus-ico{
  grid-row:1 / span 2;width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(199,154,62,.4);color:var(--gold-d);
}
.lf-plus-ico svg{width:19px;height:19px}
.lf-plus-liste b{font-family:'Oswald','Inter',sans-serif;font-weight:600;font-size:1rem;color:var(--ink)}
.lf-plus-liste li > span:not(.lf-plus-ico){font-size:.88rem;color:var(--muted);line-height:1.55}
.lf-plus-liste a{color:var(--gold-d);border-bottom:1px solid currentColor;white-space:nowrap}
.lf-plus-liste a:hover{color:var(--ox)}

.lf-cell-map{grid-column:1;grid-row:2;z-index:2;align-self:start;padding:clamp(1.8rem,3vw,2.6rem) 0 clamp(1.5rem,3vw,2.5rem)}
.lf-cell-map img{width:min(100%,420px);opacity:.95}

.lf-cell-visite{
  grid-column:1;grid-row:3;z-index:2;background:var(--cream-3);
  border:1px solid var(--line);padding:clamp(1.8rem,3.5vw,2.6rem);border-radius:var(--r);
}
.lf-cell-visite h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.35rem 0 .9rem}
.lf-visite-info{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:1.3rem 0 1.6rem}
.lf-visite-info dt{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  font-size:.78rem;color:var(--gold-d);align-self:center;
}
.lf-visite-info dd{font-size:.93rem}
.lf-visite-info a:hover{color:var(--gold-d);text-decoration:underline}

/* ---------------------------------------------------------------- BANDE CITATION */
.lf-band{position:relative;min-height:min(56vh,480px);display:grid;place-items:center;overflow:hidden;padding:clamp(3rem,7vw,6rem) 1.5rem}
.lf-band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lf-band-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,9,4,.72),rgba(28,9,4,.86))}
.lf-band-inner{position:relative;z-index:2;max-width:56ch;text-align:center}
.lf-band blockquote{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.95rem);line-height:1.42;color:var(--cream-2);
}
.lf-band cite{
  display:block;margin-top:1.6rem;font-style:normal;font-family:'Bebas Neue',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;color:var(--gold);
}

/* ---------------------------------------------------------------- FEATURE (carrousel recettes) */
.feature{
  display:grid;grid-template-columns:.9fr 1.1fr 1fr;align-items:stretch;
  background:var(--ox);color:var(--cream-2);min-height:min(72vh,620px);
}
.feature-panel{
  padding:clamp(2.4rem,4vw,3.6rem);display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid rgba(230,217,189,.16);
}
.feature-panel h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:.9rem}
.feature-panel-sub{color:rgba(240,228,200,.78);font-size:.96rem}
.feature-nav{display:flex;gap:.7rem;margin-top:2rem}
.fnav{
  width:52px;height:52px;border:1px solid rgba(230,217,189,.35);border-radius:50%;
  color:var(--cream-2);font-size:1.6rem;line-height:1;display:grid;place-items:center;transition:.25s;
}
.fnav:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.feature-img{
  display:grid;place-items:center;padding:clamp(1.5rem,3vw,2.5rem);
  background:radial-gradient(ellipse at center,rgba(199,154,62,.16),transparent 62%);
}
.feature-img img{
  max-height:min(52vh,440px);width:auto;object-fit:contain;
  filter:drop-shadow(0 30px 46px rgba(20,8,4,.5));transition:opacity .35s ease,transform .5s ease;
}
.feature-img img.fading{opacity:0;transform:translateX(26px)}
.feature-detail{
  background:var(--cream-3);color:var(--ink);
  padding:clamp(2.4rem,4vw,3.6rem);display:flex;flex-direction:column;justify-content:center;
}
.feature-detail h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:.3rem 0 .9rem}
.feature-detail > p{color:var(--muted);font-size:.97rem}
.feature-specs{
  list-style:none;display:flex;flex-wrap:wrap;gap:1rem 1.8rem;
  margin:1.5rem 0;padding:1.2rem 0;border-block:1px solid var(--line);
}
.feature-specs b{font-family:'Fraunces',serif;display:block;font-size:1rem;line-height:1.1}
.feature-specs span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.feature-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.6rem}
.feature-count{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;color:var(--muted);font-size:.95rem}
.feature-count b{color:var(--ink);font-size:1.35rem}

/* ---------------------------------------------------------------- STORY (manifeste vidéo) */
.story{position:relative;min-height:min(88vh,720px);display:grid;place-items:center;overflow:hidden;padding:clamp(4rem,8vw,7rem) 1.5rem;text-align:center}
.story-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.story-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,9,4,.74),rgba(28,9,4,.62) 50%,rgba(28,9,4,.88))}
.story-inner{position:relative;z-index:2;max-width:60ch;color:var(--cream-2)}
.story-inner h2{color:#fff;font-size:clamp(2.2rem,5.5vw,4.2rem);margin:.5rem 0 1.5rem}
.story-inner p{color:rgba(240,228,200,.88);font-size:clamp(1rem,1.5vw,1.12rem)}
.story-inner strong{color:var(--gold)}
.story-inner .btn{margin-top:1.8rem}

/* ---------------------------------------------------------------- HERO PRODUITS */
.phero{
  position:relative;min-height:min(78vh,660px);display:grid;place-items:center;text-align:center;
  overflow:hidden;padding:clamp(7rem,12vw,9rem) 1.5rem clamp(3rem,6vw,5rem);color:#fff;
}
/* vidéo de fond ; l'attribut poster sert de repli tant qu'elle n'est pas chargée */
.phero-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.phero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(52,16,9,.68),rgba(28,9,4,.86))}
.phero-motif{
  position:absolute;right:-4%;bottom:-8%;width:min(38vw,420px);z-index:1;
  opacity:.12;pointer-events:none;
}
.phero-inner{position:relative;z-index:2;max-width:62ch}
.phero-inner h1{font-size:clamp(2.6rem,7vw,5rem);color:#fff}
.phero-rule{display:block;width:74px;height:3px;background:var(--gold);margin:1.4rem auto 1.3rem}
.phero-inner p{color:rgba(255,255,255,.88)}
.phero-inner .btn{margin-top:1.8rem}

/* ---------------------------------------------------------------- BANDEAU LABELS */
.tagband{background:var(--ox-d);color:var(--cream-2);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,5vw,4rem)}
.tagband-inner{
  width:min(100%,var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1.5rem,4vw,3rem);
}
.tagband-feats{display:flex;flex-direction:column;gap:1.1rem}
.feats-l{align-items:flex-end;text-align:right}
.feats-r{align-items:flex-start}
.feat{display:flex;align-items:center;gap:.85rem}
.feat-ico{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(199,154,62,.4);border-radius:50%}
.feat-ico svg{width:19px;height:19px}
.feat-t b{display:block;font-family:'Oswald','Inter',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.02em}
.feat-t span{font-size:.75rem;color:rgba(240,228,200,.6)}
.tagband-logo{height:clamp(62px,9vw,96px);width:auto}

/* ---------------------------------------------------------------- OFFRES */
.offers{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,5vw,4rem);background:var(--cream-2)}
.offers-head{
  width:min(100%,var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.offers-headtext h2{font-size:clamp(1.9rem,4vw,3rem);margin:.35rem 0 1rem}
.offers-intro{color:var(--muted);max-width:48ch}
.offers-show{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.5rem,2vw,1.6rem)}
.offers-show img{
  width:clamp(90px,14vw,175px);height:auto;object-fit:contain;
  filter:drop-shadow(0 20px 32px rgba(52,16,9,.24));
}
.offers-show img:nth-child(2){width:clamp(110px,17vw,215px);z-index:2}
.offers-grid{
  width:min(100%,var(--maxw));margin:clamp(2.5rem,5vw,4rem) auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;
}
.offer{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.6rem;transition:transform .3s,box-shadow .3s}
.offer:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.offer-ico{display:grid;place-items:center;width:46px;height:46px;color:var(--gold-d);border:1px solid rgba(199,154,62,.4);border-radius:50%;margin-bottom:1.1rem}
.offer-ico svg{width:22px;height:22px}
.offer h3{font-size:1.15rem;margin-bottom:.55rem}
.offer p{font-size:.9rem;color:var(--muted);margin-bottom:1.1rem}
.offer-link{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-d);border-bottom:1px solid currentColor}
.offer-link:hover{color:var(--ox)}

/* ---------------------------------------------------------------- FOOTER ÉDITORIAL */
.footer{background:var(--ox-d);color:rgba(240,228,200,.8);padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,5vw,4rem) 0}
.footer-grid{
  width:min(100%,var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1fr;gap:clamp(1.8rem,4vw,3rem);padding-bottom:2.8rem;
}
.footer-logo{height:66px;width:auto;margin-bottom:1.1rem}
.footer-brand p{font-size:.9rem;max-width:36ch}
.footer h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.18em;
  font-size:.95rem;color:var(--gold);text-transform:uppercase;margin-bottom:1.1rem;
}
.footer-links{display:grid;gap:.55rem;font-size:.89rem}
.footer-links a:hover,.footer-contact a:hover{color:var(--gold)}
.footer-contact{list-style:none;display:grid;gap:.9rem;font-size:.89rem}
.footer-contact li{display:grid;gap:.15rem;line-height:1.45}
.footer-contact span{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  font-size:.74rem;color:rgba(240,228,200,.5);
}
.footer-social{display:flex;gap:.6rem;margin-top:1.3rem}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(240,228,200,.22);
  display:grid;place-items:center;color:var(--cream);transition:.22s;
}
.footer-social svg{width:17px;height:17px}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ox-d);transform:translateY(-2px)}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.fbadge{
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;
  border:1px solid rgba(240,228,200,.24);border-radius:100px;color:rgba(240,228,200,.75);
}
.footer-shopbtn{display:block;text-align:center;margin-bottom:1rem}
.footer-soft{font-size:.84rem;color:rgba(240,228,200,.66);display:inline-block}
.footer-soft:hover{color:var(--gold)}
.footer-eu{width:min(100%,var(--maxw));margin-inline:auto;padding-bottom:2rem}
.footer-ue{max-width:320px;width:100%;height:auto;background:#fff;padding:.5rem;border-radius:var(--r);margin-top:1.2rem}
.footer .footer-bar{
  border-top:1px solid rgba(240,228,200,.15);padding:1.2rem 0;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.8rem;
  width:min(100%,var(--maxw));margin-inline:auto;
}
.footer-credit{color:rgba(240,228,200,.55)}
.footer-bar a{color:var(--gold)}
.footer-bar a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width:980px){
  .feature{grid-template-columns:1fr 1fr}
  .feature-panel{grid-column:1/-1;border-right:0;border-bottom:1px solid rgba(230,217,189,.16)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .lf-hero-inner{grid-template-columns:1fr;gap:2.2rem}
  .lf-collage{grid-template-columns:1fr;padding-bottom:3rem}
  .lf-darkband{grid-column:1;grid-row:1}
  .lf-cell-start{grid-column:1;grid-row:1}
  .lf-photos{grid-column:1;grid-row:2;padding-top:0;margin-bottom:2.2rem}
  .lf-cell-map{grid-column:1;grid-row:3}
  .lf-cell-visite{grid-column:1;grid-row:4}
  .lf-cell-plus{grid-column:1;grid-row:5;padding-top:2.2rem}
  .lf-photo-peek{padding-top:2rem}
  .offers-head{grid-template-columns:1fr}
  /* Bandeau de labels sur téléphone.
     Les trois premiers labels ont l'icône APRÈS le texte dans le HTML : sur
     grand écran c'est la colonne de gauche, alignée à droite du logo. Une fois
     empilée, ça donnait un zigzag — trois lignes icône à droite, trois icône à
     gauche, et rien qui s'aligne. On remet tout le monde dans le même sens,
     icône à gauche, textes sur une même verticale. */
  .tagband-inner{grid-template-columns:1fr;justify-items:stretch;gap:1.5rem}
  .tagband-logo{order:-1;justify-self:center}
  .tagband-feats{gap:0}
  .feats-l,.feats-r{align-items:stretch;text-align:left}
  .feats-l .feat{flex-direction:row-reverse;justify-content:flex-end}
  .tagband .feat{padding:.75rem 0;border-bottom:1px solid rgba(240,228,200,.12)}
  .feats-r .feat:last-child{border-bottom:0}
  .feats-r{margin-top:0}
  .feats-l .feat:first-child{border-top:1px solid rgba(240,228,200,.12)}
}
@media (max-width:640px){
  .feature{grid-template-columns:1fr}
  .feature-panel{grid-column:1}
  .footer-grid{grid-template-columns:1fr}
  .lf-photos{gap:.7rem}
  .feature-specs{gap:.8rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .feature-img img{transition:none}
}

/* ------------------------------------- carrousel recettes sur petit écran */
/* Empilé, le bloc gardait son `min-height: min(72vh, 620px)` : les trois lignes
   de la grille s'étiraient pour le remplir, ce qui creusait de grands vides
   entre le titre, les flèches et le pot. La hauteur suit désormais le contenu,
   et les flèches se retrouvent juste au-dessus du visuel qu'elles commandent. */
@media (max-width: 640px) {
  .feature { min-height: 0; }
  .feature-panel { padding: 2rem 1.4rem 1.5rem; }
  .feature-panel h2 { font-size: 1.85rem; margin-bottom: .6rem; }
  .feature-panel-sub { font-size: .92rem; }
  .feature-nav { margin-top: 1.3rem; }
  .fnav { width: 46px; height: 46px; font-size: 1.4rem; }
  .feature-img { padding: 1.2rem 1.4rem 1.6rem; }
  .feature-img img { max-height: min(36vh, 290px); }
  .feature-detail { padding: 1.8rem 1.4rem 2.4rem; }
  .feature-specs { margin: 1.1rem 0; padding: .9rem 0; }
  .feature-actions { gap: .9rem; }
}