/* Herbes & Astuces — accueil. Direction « Le Masque » : filets épais, capitales
   condensées, aplats francs. La photographie porte la page ; la couleur la tient. */
:root{
  --nuit:#0B3B23; --feuille:#0F7A46; --pousse:#17A05C; --or:#D9A441;
  --soleil:#E9A020; --mangue:#E8721E; --piment:#C62828; --terre:#8A4B1D;
  --papier:#F4EFE4; --papier-clair:#FAF7EF; --encre:#161208; --plume:#4A4232;
  --trait:3px solid #161208;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--encre);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
img{display:block}
a{color:inherit}

/* ── La barre ── */
.barre{display:flex;align-items:stretch;border-bottom:var(--trait);background:var(--papier);
  position:sticky;top:0;z-index:30}
.marque{display:flex;align-items:center;gap:11px;padding:15px 24px;background:var(--encre);
  color:var(--papier);text-decoration:none;font-weight:900;font-size:16px;letter-spacing:-.02em;
  text-transform:uppercase;white-space:nowrap}
.liens{display:flex;margin-left:auto}
.liens a{display:flex;align-items:center;padding:0 20px;border-left:var(--trait);
  font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.liens a:hover{background:#E7DFCC}
.abo{display:flex;align-items:center;padding:0 24px;background:var(--mangue);color:var(--encre);
  border-left:var(--trait);font-weight:900;text-transform:uppercase;font-size:12.5px;
  text-decoration:none;letter-spacing:.04em}
.abo:hover{background:var(--soleil)}

/* ── Le hero : la photographie tient la page ── */
.hero{position:relative;min-height:min(78vh,620px);display:flex;align-items:flex-end;
  border-bottom:var(--trait);background:var(--photo) center 42%/cover no-repeat,#0B3B23;
  overflow:hidden}
.hero .voile{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,32,19,.95) 0%,rgba(8,40,24,.86) 38%,rgba(10,50,30,.35) 72%,rgba(10,50,30,.12) 100%)}
.hero .dit{position:relative;padding:52px 30px 46px;max-width:840px}
.sur{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soleil);margin-bottom:16px}
.hero h1{font-size:clamp(34px,5.6vw,62px);line-height:.97;font-weight:900;letter-spacing:-.035em;
  text-transform:uppercase;color:#FFFDF7;margin-bottom:18px;text-wrap:balance}
.hero h1 em{font-style:normal;display:block;color:#6FD79A}
.chapeau{max-width:52ch;color:#D6E7DA;font-size:16.5px}
.boutons{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.boutons a{padding:14px 24px;font-weight:900;text-transform:uppercase;font-size:12.5px;
  letter-spacing:.05em;text-decoration:none;border:3px solid transparent}
.boutons .premier{background:var(--soleil);color:var(--encre)}
.boutons .premier:hover{background:#FFC64D}
.boutons .second{border-color:#FFFDF7;color:#FFFDF7}
.boutons .second:hover{background:#FFFDF7;color:var(--encre)}
.credit{position:absolute;right:14px;bottom:10px;font-size:10.5px;color:rgba(255,253,247,.62);
  letter-spacing:.03em}

/* ── Les trois entrées ── */
.entrees{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:var(--trait)}
.e{position:relative;padding:30px 26px 28px;border-right:var(--trait);background:var(--papier-clair)}
.e:last-child{border-right:0}
.e .filet{position:absolute;top:0;left:0;right:0;height:7px;background:var(--accent)}
.e .no{font-weight:900;font-size:40px;line-height:1;color:var(--accent);margin-bottom:10px}
.e h2{font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px}
.e p{font-size:14.5px;color:var(--plume)}

/* ── La fiche à la une ── */
.une{display:grid;grid-template-columns:.9fr 1.1fr;border-bottom:var(--trait);background:var(--papier-clair)}
.une .visuel{min-height:330px;background:center/cover no-repeat;border-right:var(--trait);display:block}
.une .texte{padding:34px 30px}
.une h2{font-size:clamp(24px,3vw,34px);line-height:1.05;font-weight:900;letter-spacing:-.028em;
  text-transform:uppercase;margin-bottom:6px}
.une h2 a{text-decoration:none}
.une h2 a:hover{color:var(--feuille)}
.une .latin{font-style:italic;color:var(--terre);margin-bottom:12px}
.une .texte p{color:var(--plume);max-width:56ch}
.une .meta{margin-top:14px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#8A8471}
.une .lire{display:inline-block;margin-top:18px;font-weight:900;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.05em;color:var(--feuille);text-decoration:none;
  border-bottom:3px solid var(--feuille);padding-bottom:3px}

/* ── La bande citée ── */
.bande{position:relative;border-bottom:var(--trait);background:var(--photo) center 55%/cover no-repeat,#0B3B23;
  padding:56px 30px}
.bande .voile{position:absolute;inset:0;background:rgba(8,36,22,.82)}
.bande blockquote{position:relative;max-width:60ch}
.bande p{color:#F1F7F2;font-size:clamp(18px,2.3vw,25px);line-height:1.35;font-weight:600;
  letter-spacing:-.012em}
.bande cite{display:block;margin-top:16px;font-style:normal;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#9DC3A8}

/* ── La lettre ── */
.lettre{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;
  padding:36px 30px;background:var(--nuit);color:var(--papier-clair);border-bottom:var(--trait)}
.lettre h2{font-size:clamp(20px,2.6vw,27px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.024em;margin-bottom:8px}
.lettre p{color:#9DC3A8;max-width:52ch;font-size:15px}
.inscription{display:flex}
.inscription input{flex:1;padding:15px 16px;border:3px solid var(--papier-clair);background:transparent;
  color:var(--papier-clair);font-size:15px;min-width:0}
.inscription input::placeholder{color:#7FA98C}
.inscription button{padding:15px 24px;border:3px solid var(--papier-clair);border-left:0;
  background:var(--soleil);color:var(--encre);font-weight:900;text-transform:uppercase;
  font-size:13px;cursor:pointer;letter-spacing:.04em}

/* ── Le pied ── */
footer{padding:28px 30px 44px}
.pied{display:flex;gap:16px;align-items:flex-start;max-width:78ch}
.pied b{font-size:15px}
.avert{margin-top:6px;font-size:13px;color:var(--plume);line-height:1.55}
.mentions{margin-top:18px;font-size:12.5px;color:#7C7460;max-width:80ch}

@media(max-width:960px){
  .une{grid-template-columns:1fr}
  .une .visuel{border-right:0;border-bottom:var(--trait);min-height:230px}
}
@media(max-width:860px){
  .entrees,.lettre{grid-template-columns:1fr}
  .e{border-right:0;border-bottom:var(--trait)}
  .e:last-child{border-bottom:0}
  .liens{display:none}
  .hero{min-height:auto}
  .hero .dit{padding:36px 22px 40px}
}