/* Aromasol · styles communs du site statique (remplace le runtime Claude Design) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden}
h1,h2,h3{text-transform:none!important}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--spice-orange);outline-offset:2px}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media(min-width:1700px){html{zoom:1.2}}
@media(min-width:2100px){html{zoom:1.35}}
@media(min-width:2500px){html{zoom:1.55}}

/* Bouton (composant Button du design system) */
.btn{font-family:var(--font-body);font-weight:var(--weight-body-bold);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border-width-thick) solid transparent;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;transition:var(--transition-base);line-height:1}
.btn:active{transform:scale(.98)}
.btn-sm{font-size:var(--text-body-sm);padding:8px 14px}
.btn-md{font-size:var(--text-body-md);padding:12px 22px}
.btn-lg{font-size:var(--text-body-lg);padding:16px 30px}
.btn-primary,.btn-primary:hover{color:var(--text-on-brand)}
.btn-primary{background:var(--aroma-red)}
.btn-primary:hover{background:var(--aroma-red-700)}
.btn-outline{background:transparent;color:var(--aroma-red);border-color:var(--aroma-red)}
.btn-outline:hover{background:var(--aroma-red);color:var(--white)}
.btn-inverse,.btn-inverse:hover{color:var(--aroma-red)}
.btn-inverse{background:var(--white)}
.btn-inverse:hover{background:var(--off-white)}

/* Titre de section (composant SectionHeading) */
.sh{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start;max-width:var(--container-narrow)}
.sh-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--weight-body-bold);font-size:var(--text-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--spice-orange)}
.sh-eyebrow::before{content:"";width:8px;height:8px;background:currentColor;transform:rotate(45deg);display:inline-block}
.sh-title{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-display-3);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.sh-lead{margin:0;font-family:var(--font-body);font-size:var(--text-body-lg);line-height:var(--leading-body);color:var(--text-muted)}
.sh-dark .sh-eyebrow{color:var(--sun-yellow)}
.sh-dark .sh-title{color:var(--white)}
.sh-dark .sh-lead{color:rgba(255,255,255,.9)}

/* En-tête : mobile < 1024 px, compact 1024–1179 px, large ≥ 1180 px */
.site-header{position:sticky;top:0;z-index:20;background:var(--white);color:var(--grey-900);font-family:var(--font-body);transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}
.site-header.is-scrolled{box-shadow:0 6px 20px rgba(49,44,41,.10)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--aroma-red);color:var(--white);padding:8px 12px;font-weight:700;z-index:40}
.skip:focus{left:8px;color:var(--white)}
.hdr-top-mail:hover{text-decoration:underline!important;color:var(--white)}
.hdr-top-lang a{transition:background .15s cubic-bezier(.4,0,.2,1)}
.hdr-top-lang a:hover{background:rgba(255,255,255,.15);color:var(--white)}
.hdr-nav{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:700}
.hdr-nav a{position:relative;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:var(--grey-900);text-decoration:none;padding:10px 0;transition:color .15s cubic-bezier(.4,0,.2,1)}
.hdr-nav a::before{content:"";width:8px;height:8px;background:var(--spice-orange);transform:rotate(45deg);opacity:0}
.hdr-nav a[aria-current="page"]{color:var(--aroma-red)}
.hdr-nav a[aria-current="page"]::before{opacity:1}
.hdr-nav a:hover{color:var(--aroma-red)}
.lang-box{display:flex;border:1.5px solid var(--aroma-red);border-radius:4px;overflow:hidden;font-size:14px;font-weight:700;letter-spacing:.06em;flex:none}
.lang-box>*{min-width:44px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--aroma-red);text-decoration:none}
.lang-box>[aria-current]{background:var(--aroma-red);color:var(--white)}
.lang-box>a+a{border-left:1px solid var(--aroma-red-100)}
.lang-box>a:hover{background:var(--aroma-red-100);color:var(--aroma-red)}
.burger{width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
.burger span{width:26px;height:3px;background:var(--aroma-red);display:block;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu-mobile{display:flex;flex-direction:column;background:var(--white);padding:8px 16px 24px;border-bottom:1px solid var(--border-subtle)}
.menu-mobile a{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;color:var(--aroma-red);text-decoration:none;font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em;border-bottom:1px solid var(--grey-100)}
.menu-mobile a.menu-mail{border:0;padding:18px 4px 0;color:var(--grey-800);font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:0;overflow-wrap:anywhere}
.quick-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--border-subtle);box-shadow:0 -4px 12px rgba(49,44,41,.08);font-family:var(--font-body)}
.only-mobile,.only-compact,.only-wide{display:none!important}
@media(max-width:1023px){
  .only-mobile{display:flex!important}
  .quick-bar.only-mobile{display:grid!important}
  .not-mobile{display:none!important}
  body{padding-bottom:72px}
}
@media(min-width:1024px){
  .menu-mobile{display:none!important}
}
@media(min-width:1024px) and (max-width:1179px){.only-compact{display:flex!important}}
@media(min-width:1180px){
  .only-wide{display:block!important}
  .btn.only-wide{display:inline-flex!important}
  .hdr-nav{gap:clamp(22px,2.2vw,36px);font-size:18px}
}

/* Accueil : tuiles produits */
.fam-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:40px}
.fam-tile img{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.fam-tile:hover img{transform:scale(1.04)}
.fam-tile:hover{color:var(--white)!important}
@media(max-width:719px){
  .fam-grid{grid-template-columns:1fr}
  .fam-grid .fam-tile{grid-column:span 1!important;aspect-ratio:3/2!important}
}

/* Pied de page */
.ftr-taktic:hover{opacity:1!important;text-decoration:underline!important;color:var(--white)}
.cookie-banner{position:fixed;left:12px;right:12px;bottom:16px;z-index:40;max-width:560px;margin:0 auto;background:var(--white);color:var(--text-body);border:1px solid var(--border-subtle);border-radius:8px;box-shadow:var(--shadow-lg);padding:20px;font-family:var(--font-body);display:flex;flex-direction:column;gap:14px}
@media(max-width:1023px){.cookie-banner{bottom:84px}}

/* Petits téléphones : la rangée logo + langues + menu tient dans 375 px */
@media(max-width:419px){
  .hdr-row{gap:10px!important;padding-left:16px!important;padding-right:16px!important}
  .hdr-logo{height:32px!important}
  .only-mobile{gap:6px!important}
}

/* Pages légales et 404 : pas de barre d'actions mobile */
@media(max-width:1023px){body.no-quick-bar{padding-bottom:0}}

/* Carte (composant Card) */
.card{border-radius:var(--radius-md);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.card-plain{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle)}
.card-raised{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);box-shadow:var(--shadow-md)}
.card-subtle{background:var(--surface-subtle);border:var(--border-width) solid var(--border-subtle)}
.card-inverse{background:var(--surface-inverse);border:var(--border-width) solid var(--trust-blue-800)}
.card-gradient{background:var(--gradient-warm);border:none}
.card-eyebrow{font-family:var(--font-body);font-weight:var(--weight-body-bold);font-size:var(--text-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--spice-orange)}
.card-title{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-title);line-height:var(--leading-title);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.card-body{font-family:var(--font-body);font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-body)}
.card-inverse .card-eyebrow,.card-gradient .card-eyebrow,.card-inverse .card-title,.card-gradient .card-title{color:var(--white)}
.card-inverse .card-body,.card-gradient .card-body{color:rgba(255,255,255,.92)}

/* Étiquette (composant Tag) */
.tag{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:var(--weight-body-bold);font-size:var(--text-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-pill)}
.tag-red{background:var(--aroma-red-100);color:var(--aroma-red)}
.tag-orange{background:var(--spice-orange-100);color:var(--spice-orange-700)}
.tag-yellow{background:var(--sun-yellow-100);color:var(--sun-yellow-700)}
.tag-pink{background:var(--optimism-pink-100);color:var(--optimism-pink-700)}
.tag-blue{background:var(--trust-blue-100);color:var(--trust-blue)}
.tag-neutral{background:var(--grey-100);color:var(--grey-800)}
.tag-solid{background:var(--aroma-red);color:var(--white)}

/* Nos produits : accordéon des familles */
.acc-btn[aria-expanded="true"] .acc-plus{transform:rotate(45deg)}

/* ---------- Mobile : finitions (zones tactiles 44 px, mots longs, petits écrans) ---------- */
@media(max-width:1023px){
  body{overflow-wrap:break-word}
  /* Zones tactiles d'au moins 44 px */
  .hdr-row>a:first-child{min-height:44px;display:flex!important;align-items:center}
  .lang-box>*{height:44px}
  footer nav a,footer address a,footer div>a,footer div>button,footer .ftr-taktic{min-height:44px;display:inline-flex!important;align-items:center;padding-top:0!important;padding-bottom:0!important}
  main nav ol a{display:inline-block;padding:12px 6px;margin:-12px -6px}
  main nav a[style*="padding"]{min-height:44px}
  [aria-labelledby="h-cat"] a[style*="font-size:15px"]{min-height:44px;display:inline-flex;align-items:center}
  /* Langue dans le menu mobile : seulement quand elle ne tient plus dans l'en-tête */
  .menu-lang{display:none!important}
}
/* Accordéon des familles : le texte « Déplier » laisse la place au titre */
@media(max-width:479px){
  .acc-lbl{display:none}
  .acc-btn>span:nth-child(2)>span:first-child{font-size:21px!important}
}
@media(max-width:379px){
  .acc-btn{gap:12px!important}
  .acc-btn>span:first-child{width:40px!important;height:40px!important}
  .acc-btn>span:nth-child(2)>span:first-child{font-size:20px!important}
}
/* Accueil, bloc histoire : les 3 chiffres passent l'un sous l'autre */
@media(max-width:419px){
  [aria-labelledby="h-hist"] div[style*="repeat(3,minmax(0,1fr))"]{grid-template-columns:1fr!important;gap:14px!important}
}
/* Très petits téléphones (< 375 px) : langues déplacées dans le menu */
@media(max-width:374px){
  .hdr-row>.only-mobile>.lang-box{display:none!important}
  .menu-lang{display:flex!important;align-self:flex-start;order:-1;margin:8px 0 8px}
  .hdr-logo{height:32px!important}
}
.menu-mobile .menu-lang>a{padding:0;font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:.06em;border-bottom:0;justify-content:center}
/* Menu mobile plus haut que l'écran : il défile, au lieu d'être coupé sous l'en-tête fixe */
@media(max-width:1023px){
  .menu-mobile{max-height:calc(100svh - 88px - 72px);overflow-y:auto;overscroll-behavior:contain}
  body.no-quick-bar .menu-mobile{max-height:calc(100svh - 88px)}
}

/* Catalogue pas encore disponible */
.btn-soon{pointer-events:none;gap:10px;text-align:center}
.btn-soon::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;animation:soon-pulse 1.6s ease-in-out infinite}
@keyframes soon-pulse{50%{opacity:.25}}
.soon-badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--sun-yellow);color:var(--aroma-red-900);font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
/* Écrans 1180–1365 px : menu resserré pour que l'espagnol (libellés plus longs) tienne avec le bouton */
@media(min-width:1180px) and (max-width:1365px){.hdr-nav{gap:20px;font-size:16px}}
@media(min-width:1024px) and (max-width:1365px){.hdr-nav a:not([aria-current])::before{display:none}}