/* ============================================================
   MYALEM — Système de style « MAISON » (registre clair)
   Fond lin crème, texte Vert Forêt, accents Or Ambré / Bronze.
   Les pages « univers » (ex. eclat-de-lune.html) ont leur
   propre thème sombre, autonome.
   ============================================================ */
:root{
  --paper:#F5F2E9; --paper-2:#EDE8DA;
  --forest:#112B1B; --choc:#3B1B11;
  --sage:#727664; --olive:#55583B; --terracotta:#BDA07E;
  --gold:#B58B1B; --sky:#0F4A5E; --cream:#D5CFA9;
  --ink-dim:rgba(17,43,27,.72);
  --line:rgba(85,88,59,.22);
  --serif:"Fraunces",Georgia,serif; --sans:"Mulish",system-ui,sans-serif;
  --wrap:1140px; --gutter:clamp(1.25rem,5vw,4rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--forest);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.eyebrow{font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.serif{font-family:var(--serif)}

/* Barre de marque */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1rem;padding:.85rem var(--gutter);background:rgba(245,242,233,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{width:56px;height:56px;border-radius:50%}
.brand span{font-weight:700;letter-spacing:.18em;font-size:1.45rem;color:var(--forest);padding-left:.34em}
.topnav{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}
.topnav a{position:relative;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);transition:color .3s;white-space:nowrap;padding-bottom:5px}
.topnav a:hover{color:var(--forest)}
/* Page courante : couleur pleine et filet doré. aria-current="page" désigne la
   page elle-même, "true" la rubrique parente — une page univers n'est pas
   index.html, mais c'est bien « Nos univers » qui situe le visiteur. */
.topnav a[aria-current]{color:var(--forest)}
.topnav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--gold)}
.topnav a[aria-current="true"]::after{opacity:.5}

/* Boutons */
.btn{display:inline-block;font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:.85rem 1.5rem;border-radius:3px;border:1px solid var(--olive);color:var(--olive);transition:.3s;background:none;cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--olive);color:var(--paper)}
.btn-solid{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-solid:hover,.btn-solid:focus-visible{background:transparent;color:var(--gold)}

/* Sections */
.section{padding:clamp(3.5rem,9vh,7rem) var(--gutter)}
.wrap{max-width:var(--wrap);margin-inline:auto}
.section-head{max-width:640px;margin:0 auto clamp(2rem,5vh,3.4rem);text-align:center}
.section-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;color:var(--forest);margin-top:.45rem}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.12rem,2.3vw,1.5rem);line-height:1.55;color:var(--olive)}

/* Hero */
.hero{text-align:center;padding:clamp(4rem,11vh,7.5rem) var(--gutter) clamp(2.5rem,6vh,4rem);background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,5rem);line-height:1.02;color:var(--forest);margin:.32em auto .3em;max-width:18ch}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .lead{max-width:56ch;margin:0 auto}
.hero .cta{margin-top:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* La marge respire davantage sur téléphone, où les deux boutons s'empilent :
   la mention se retrouvait collée au second, au point de passer pour sa
   légende plutôt que pour une phrase à part entière. */
.hero .hero-note{margin:clamp(1.5rem,5vw,2rem) auto 0;max-width:40ch;
  font-size:.81rem;font-style:italic;line-height:1.5;letter-spacing:.005em;
  color:var(--ink-dim);opacity:.85}

/* Deux colonnes */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.split:last-child{margin-bottom:0}
.split h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.1;color:var(--forest);margin-bottom:1rem}
.split h2 em{font-style:italic;color:var(--gold)}
.split p{color:var(--ink-dim);margin-bottom:1rem}
.split .sub{font-weight:700;color:var(--forest)}
.imgph{aspect-ratio:4/3;border-radius:10px;display:grid;place-items:center;color:rgba(59,27,17,.5);font-size:.8rem;letter-spacing:.1em;background:linear-gradient(150deg,var(--cream),var(--terracotta))}
.imgph.alt{background:linear-gradient(150deg,#cdd7cb,#8fa88a)}
.imgph.warm{background:linear-gradient(150deg,#f0d9b0,#d9a86a)}
.rev{order:-1}
@media(min-width:901px){.split.mirror .txt{order:2}}

/* Grille univers (accueil) */
.uni-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.uni{position:relative;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;box-shadow:0 8px 24px -18px rgba(17,43,27,.5)}
.uni:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(17,43,27,.6)}
.uni::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 32%,rgba(0,0,0,.6))}
.uni .u-eye{font-family:var(--serif);font-style:italic;font-size:.9rem;color:rgba(255,255,255,.85)}
.uni h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;color:#fff;margin:.12rem 0 .5rem}
.uni p{font-size:.9rem;color:rgba(255,255,255,.82);line-height:1.45}
.uni .soon{margin-top:.9rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.uni .go{margin-top:.9rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:.5rem}
.uni .go::after{content:"→";transition:transform .3s}
.uni:hover .go::after{transform:translateX(4px)}
.u-eclat{background:linear-gradient(165deg,#0b2a22,#0f3a30 55%,#1c5147)}
.u-comic{background:linear-gradient(155deg,#c98a2a,#b5602f 52%,#20140f)}
.u-jolie{background:linear-gradient(160deg,#3a3a42,#6b6357 55%,#c9a24a)}
.u-memoire{background:linear-gradient(160deg,#0e2f3a,#1f6f74 55%,#e0b56a)}
.u-conte{background:linear-gradient(160deg,#0c1c33,#123a5a 45%,#c98a3a)}
.u-sieste{background:linear-gradient(160deg,#20301c,#5c6a3e 55%,#cabf8a)}
.u-soleil{background:linear-gradient(160deg,#12354e,#4a6a6a 50%,#d8b877)}
.u-palette{background:linear-gradient(135deg,#c4a95f,#5f86a0 40%,#7d8a55 70%,#e3b3a8)}
.u-plume{background:linear-gradient(165deg,#132b22,#243a30 55%,#8f86c0)}

/* Familles olfactives / cartes */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.fam{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:2rem 1.6rem}
.fam .k{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1rem}
.fam h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--forest);margin:.2rem 0 .8rem}
.fam p{color:var(--ink-dim);font-size:.95rem}
.tint{background:var(--paper-2)}

/* Plantes */
.plant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,5vh,3rem)}
.plant .ph{aspect-ratio:1;border-radius:10px;margin-bottom:.9rem;display:grid;place-items:center;color:rgba(59,27,17,.45);font-size:.72rem}
.plant:nth-child(1) .ph{background:linear-gradient(150deg,#b7a7c9,#8f86c0)}
.plant:nth-child(2) .ph{background:linear-gradient(150deg,#bcd0b6,#7fa88a)}
.plant:nth-child(3) .ph{background:linear-gradient(150deg,#9fb7ac,#4f6a62)}
.plant:nth-child(4) .ph{background:linear-gradient(150deg,#f0c07a,#d98a2e)}
.plant h4{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--forest);margin-bottom:.3rem}
.plant p{color:var(--ink-dim);font-size:.9rem}

/* Articles (Carnet) */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.art{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s}
.art:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(17,43,27,.5)}
.art .ph{aspect-ratio:16/10;background:linear-gradient(150deg,var(--cream),var(--sage));display:grid;place-items:center;color:rgba(59,27,17,.4);font-size:.72rem}
.art .body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.art .cat{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.art h3{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--forest);margin:.4rem 0 .6rem;line-height:1.25}
.art p{color:var(--ink-dim);font-size:.92rem;flex:1}
.art .more{margin-top:1rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
/* Toute la carte est cliquable : viser le seul « Lire l'article » est
   inutilement précis, surtout au doigt sur un téléphone. */
.art-lien{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.art-lien:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:10px}
.art:hover .more{text-decoration:underline;text-underline-offset:3px}

/* Bloc citation sombre */
.quote{text-align:center;background:var(--forest);color:var(--cream)}
.quote .eyebrow{color:var(--gold)}
.quote p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.3rem,3vw,2rem);line-height:1.5;max-width:30ch;margin:1.1rem auto 0}
.quote .small{font-family:var(--sans);font-style:normal;font-weight:300;font-size:.98rem;color:rgba(213,207,169,.8);max-width:60ch;margin:1.5rem auto 0}

/* Bandeau CTA doux */
.band{text-align:center;background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.band h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4vw,2.7rem);color:var(--forest);margin-bottom:1rem}

/* Pied */
.foot{background:var(--forest);color:var(--cream);padding:clamp(3rem,7vh,5rem) var(--gutter);text-align:center}
.foot img{width:94px;height:94px;border-radius:50%;margin:0 auto 1rem}
.foot .sig{font-weight:700;letter-spacing:.4em;font-size:.85rem;padding-left:.4em}
.foot .tag{margin-top:.6rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(213,207,169,.7)}
.foot .fnav{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:center;margin-top:1.6rem}
.foot .fnav a{font-size:.75rem;letter-spacing:.1em;color:rgba(213,207,169,.85)}
.foot .fnav a:hover{color:#fff}
.marks{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;justify-content:center;margin-top:1.6rem}
.marks span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(213,207,169,.7);display:inline-flex;align-items:center;gap:.5rem}
.marks span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
/* Réseaux sociaux du pied de page. Placés entre les mentions de réassurance
   et les mentions légales : assez visibles pour être trouvés, assez discrets
   pour ne pas détourner du parcours d'achat. Les pictogrammes héritent de
   currentColor, ils suivront donc toute évolution du pied de page. */
.foot .fsoc{display:flex;justify-content:center;gap:1.4rem;margin-top:1.8rem}
.foot .fsoc a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;color:rgba(213,207,169,.72);
  border:1px solid rgba(213,207,169,.28);transition:color .2s,border-color .2s,background .2s}
.foot .fsoc a:hover,.foot .fsoc a:focus-visible{color:var(--cream);
  border-color:rgba(213,207,169,.6);background:rgba(213,207,169,.08)}
.foot .fsoc svg{display:block}

.foot .legal{margin-top:1.5rem;font-size:.72rem;color:rgba(213,207,169,.6);line-height:1.7}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .topbar{justify-content:center;text-align:center}
  .topnav{justify-content:center;gap:1rem}
  .uni-grid{grid-template-columns:1fr 1fr}
  .grid3,.art-grid{grid-template-columns:1fr}
  .plant-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .split .imgph{order:-1}
  @media(min-width:901px){.split.mirror .txt{order:0}}
}
@media(max-width:560px){.uni-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}.plant-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.u-visual{width:100%;aspect-ratio:600/295;background-size:cover;background-position:center;background-color:#0d1f16;display:block}
.u-txt{padding:1.35rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;background:none;border:none;cursor:pointer;padding:7px}.nav-toggle span{display:block;height:2px;width:100%;border-radius:2px;transition:transform .3s,opacity .3s}.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.is-open span:nth-child(2){opacity:0}.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-toggle span{background:var(--forest)}@media(max-width:719px){.topbar{justify-content:space-between}.nav-toggle{display:flex}.topnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1.1rem;padding:1.1rem var(--gutter) 1.4rem;background:rgba(245,242,233,.98);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.08)}.topnav.open{display:flex}}
/* Traçabilité : en-tête de l'accordéon et mention discrète sur la carte. */
.compo .fine .trace{margin:0 0 1.15rem;padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.18);line-height:1.6}
/* Le lien vers la fiche de lot doit se voir : c'est la porte d'entrée. */
.compo .fine .trace a{color:var(--gold);text-decoration:underline;
  text-underline-offset:2px}
.card .serie{font-size:.86rem;font-weight:600;color:var(--cream);
  margin:1.15rem 0 0;line-height:1.55}