/* JOAS · Accueil
 * Styles en ligne de la maquette convertis en classes (!important conserve leur priorité).
 * Chargé avant base.css : les règles !important de base.css gardent la main, comme dans la maquette.
 * Fichier généré par tools/convert.py depuis Main.dc.html, puis ajusté à la main.
 */
/* Hero */
.jh-hero-1{position:relative !important;height:604px !important;overflow:hidden !important;background:linear-gradient(100deg,#F8E6D3 0%,#F4D0B1 45%,#E5A985 100%) !important}
.jh-hero-2{position: absolute !important;right: 0px !important;bottom: 1px !important;height: 608px !important;width: 1218px !important;-webkit-mask-image: linear-gradient(to right,transparent 0,#000 30%) !important;mask-image: linear-gradient(to right,transparent 0,#000 30%) !important;object-fit: cover !important;object-position: 50% 50.3275% !important}
.jh-hero-3{position:absolute !important;left:96px !important;top:160px !important;max-width:520px !important;z-index:1 !important;display:flex !important;flex-direction:column !important;gap:20px !important}
.jh-hero-4{margin:0 !important;font-size:14px !important;font-weight:700 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--jo-green) !important}
.jh-hero-5{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:52px !important;line-height:1.08 !important;text-transform:uppercase !important;color:var(--jo-green) !important}
@media (max-width:560px){.jh-hero-5{font-size:41.6px !important}}
.jh-hero-6{margin:0 !important;font-size:17px !important;line-height:1.55 !important;font-weight:600 !important;color:var(--jo-green) !important}
.jh-hero-7{margin-top:8px !important}
.jh-hero-8{display:inline-flex !important;align-items:center !important;gap:14px !important;min-height:58px !important;padding:8px 28px 8px 8px !important;border:1.5px solid var(--jo-coral) !important;border-radius:4px !important;background:rgba(255,255,255,0.35) !important;font-size:18px !important;font-weight:600 !important;color:var(--jo-green) !important}
.jh-hero-9{width:42px !important;height:42px !important;border-radius:50% !important;background:var(--jo-green) !important;display:flex !important;align-items:center !important;justify-content:center !important}

/* Naturels */
.jh-naturels-1{height:120px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:var(--jo-white) !important;padding:0 24px !important}
/* Tablette : même espace vertical que sur mobile autour du titre « Nos produits sont » */
@media (max-width:1000px){.jo-sec.jo-nat.jh-naturels-1{padding-top:36px !important;padding-bottom:36px !important}}
.jh-naturels-2{margin: 0 !important;display: flex !important;align-items: baseline !important;gap: 14px !important;flex-wrap: wrap !important;justify-content: center !important;font-weight: 700 !important}
.jh-naturels-3{font-size:32px !important;font-weight:300 !important;color:var(--jo-teal) !important}

/* Catégories */
.jh-categories-1{height:160px !important;padding:0 48px !important;background:var(--jo-white) !important;display:flex !important;align-items:center !important}
.jh-categories-2{width:100% !important;max-width:1244px !important;margin:0 auto !important;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:24px !important}
.jh-categories-3{display:flex !important;align-items:center !important;gap:16px !important;padding:12px !important;background:var(--jo-cream-2) !important;border-radius:10px !important;min-height:96px !important}
.jh-categories-4{width:72px !important;height:72px !important;object-fit:cover !important;border-radius:8px !important;flex:none !important}
.jh-categories-5{font-family:var(--font-display) !important;font-size:20px !important;line-height:1.1 !important;text-transform:uppercase !important;color:var(--jo-green) !important;flex:1 !important;min-width:0 !important;overflow-wrap:anywhere !important}
.jh-categories-6{flex:none !important;margin-right:6px !important}
.jh-categories-7{width: 72px !important;height: 72px !important;object-fit: cover !important;border-radius: 8px !important;flex: none !important;object-position: 47.8002% 51.967% !important}

/* Les chouchoux du moment */
.jh-chouchoux-1{height: 980px !important;padding: 88px 48px !important;background-color: var(--jo-cream) !important}
.jh-chouchoux-2{max-width:1244px !important;margin:0 auto !important;display:grid !important;grid-template-columns:340px minmax(0,1fr) !important;gap:64px !important;align-items:center !important;height:100% !important}
.jh-chouchoux-3{display:flex !important;flex-direction:column !important;gap:20px !important}
.jh-chouchoux-4{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:38px !important;line-height:1.1 !important;text-transform:uppercase !important;color:var(--jo-coral) !important}
.jh-chouchoux-5{margin: 0 !important;font-size: 16px !important;line-height: 1.6 !important;color: var(--jo-green) !important;font-weight: 600 !important}
.jh-chouchoux-6{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:44px 28px !important;align-items:start !important}

/* Bloc contenu SEO */
.jh-seo-1{height:640px !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;background:var(--jo-white) !important}
.jh-seo-2{position:relative !important;overflow:hidden !important;min-height:0 !important}
.jh-seo-3{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important}
.jh-seo-4{display:flex !important;flex-direction:column !important;justify-content:center !important;gap:22px !important;padding:48px 96px !important}
.jh-seo-5{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:36px !important;line-height:1.12 !important;text-transform:uppercase !important;color:var(--jo-coral) !important}
.jh-seo-6{margin: 0 !important;font-size: 16px !important;line-height: 1.65 !important;color: var(--jo-teal) !important;font-weight: 600 !important}
.jh-seo-7{margin-top:6px !important}
.jh-seo-8{display:inline-flex !important;align-items:center !important;gap:14px !important;min-height:58px !important;padding:8px 28px 8px 8px !important;border:1.5px solid var(--jo-coral) !important;border-radius:4px !important;font-size:18px !important;font-weight:600 !important;color:var(--jo-green) !important}
.jh-seo-9{width:42px !important;height:42px !important;border-radius:50% !important;background:var(--jo-green) !important;display:flex !important;align-items:center !important;justify-content:center !important}

/* Je cherche un produit pour… / Ma routine hydratante */
.jh-routine-1{height: 1060px !important;padding: 88px 48px !important;background-color: var(--jo-cream) !important}
.jh-routine-2{max-width:1244px !important;margin:0 auto !important;display:grid !important;grid-template-columns:560px minmax(0,1fr) !important;gap:64px !important;align-items:center !important;height:100% !important}
.jh-routine-3{display:flex !important;flex-direction:column !important;gap:56px !important}
.jh-routine-4{display:flex !important;flex-direction:column !important;gap:12px !important}
.jh-routine-5{font-size: 40px !important;font-weight: 500 !important;line-height: 1.15 !important;color: var(--jo-teal) !important}
.jh-routine-6{position:relative !important;align-self:flex-start !important}
.jh-routine-7{display:flex !important;align-items:center !important;gap:18px !important;border:0 !important;background:transparent !important;padding:6px 0 !important;cursor:pointer !important;text-align:left !important;font:inherit !important;color:inherit !important}
.jh-routine-8{display:block !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:56px !important;line-height:1.02 !important;text-transform:uppercase !important;color:var(--jo-ocre-dark) !important}
.jh-routine-9{display:block !important}
.jh-routine-10{flex:none !important;transition:transform .2s ease !important}
.jh-routine-11{position:fixed !important;inset:0 !important;z-index:40 !important;border:0 !important;background:transparent !important;cursor:default !important}
.jh-routine-12{position:absolute !important;left:0 !important;top:calc(100% + 14px) !important;z-index:41 !important}
.jh-routine-13{margin:0 !important}
.jh-routine-15{flex:none !important;margin-left:10px !important}
.jh-routine-16{display:flex !important;flex-direction:column !important;gap:20px !important}
.jh-routine-17{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:34px !important;line-height:1.12 !important;text-transform:uppercase !important;color:var(--jo-coral) !important}
.jh-routine-18{margin: 0 !important;font-size: 16px !important;line-height: 1.6 !important;color: var(--jo-green) !important;max-width: 420px !important;font-weight: 600 !important}
.jh-routine-19{margin-top:8px !important}
.jh-routine-20{display:inline-flex !important;align-items:center !important;gap:14px !important;min-height:58px !important;padding:8px 28px 8px 8px !important;border:1.5px solid var(--jo-coral) !important;border-radius:4px !important;font-size:18px !important;font-weight:600 !important;color:var(--jo-green) !important}
.jh-routine-21{width:42px !important;height:42px !important;border-radius:50% !important;background:var(--jo-green) !important;display:flex !important;align-items:center !important;justify-content:center !important}
.jh-routine-22{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:44px 28px !important;align-items:start !important}

/* Nos essentiels pour l'hiver */
.jh-essentiels-1{height:1010px !important;padding:80px 48px !important;background:var(--jo-white) !important}
.jh-essentiels-2{max-width:1244px !important;margin:0 auto !important;display:grid !important;grid-template-columns:600px minmax(0,1fr) !important;gap:64px !important;align-items:start !important}
.jh-essentiels-3{display:flex !important;flex-direction:column !important;gap:28px !important}
.jh-essentiels-4{margin:0 !important;display:flex !important;flex-direction:column !important;gap:4px !important}
.jh-essentiels-5{font-size:64px !important;font-weight:300 !important;line-height:1.08 !important;color:var(--jo-teal) !important}
.jh-essentiels-6{font-family:var(--font-display) !important;font-weight:400 !important;font-size:56px !important;line-height:1.08 !important;text-transform:uppercase !important;color:var(--jo-coral) !important}
.jh-essentiels-7{display:block !important;width:100% !important;aspect-ratio:366/316 !important;object-fit:cover !important;border-radius:8px !important}
.jh-essentiels-8{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:44px 28px !important;align-items:start !important}

/* Nos produits sont… */
.jh-engagements-1{height:400px !important;padding:72px 48px !important;background:var(--jo-beige) !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:48px !important}
.jh-engagements-2{margin: 0 !important;font-size: 32px !important;font-weight: 500 !important;color: var(--jo-green) !important;text-align: center !important}
.jh-engagements-3{list-style:none !important;margin:0 !important;padding:0 !important;width:100% !important;max-width:1244px !important;display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:24px !important}
.jh-engagements-4{display:flex !important;flex-direction:column !important;align-items:center !important;gap:16px !important;text-align:center !important}
.jh-engagements-5{width:84px !important;height:84px !important;border-radius:50% !important;background:var(--jo-cream-2) !important;display:flex !important;align-items:center !important;justify-content:center !important}
.jh-engagements-6{font-size:15px !important;font-weight:600 !important;line-height:1.4 !important;color:var(--jo-green) !important}

/* Ce que vous dites de nous */
.jh-avis-1{height: 780px !important;padding: 80px 48px !important;background-color: var(--jo-cream) !important}
.jh-avis-2{max-width:1244px !important;margin:0 auto !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important}
.jh-avis-3{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:34px !important;text-transform:uppercase !important;color:var(--jo-ocre-dark) !important;text-align:center !important}
.jh-avis-4{margin:0 0 30px !important;font-size:14px !important;color:var(--jo-ink-soft) !important;text-align:center !important}
.jh-avis-5{width:100% !important;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:28px !important;align-items:start !important}
.jh-avis-6{display:flex !important;flex-direction:column !important;gap:10px !important}
.jh-avis-7{display:flex !important;flex-direction:column !important;gap:3px !important}
.jh-avis-8{font-size:15px !important;font-weight:700 !important;color:var(--jo-coral-text) !important}
.jh-avis-10{font-size:13px !important;font-weight:600 !important;color:var(--jo-teal) !important}
.jh-avis-11{margin: 0 !important;font-size: 16px !important;line-height: 1.5 !important;color: var(--jo-green) !important;font-weight: 600 !important}
.jh-avis-12{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:15px !important;text-transform:uppercase !important;color:var(--jo-coral-text) !important}
.jh-avis-13{display:block !important;width:100% !important;height:auto !important;aspect-ratio:1/1 !important;object-fit:cover !important;border-radius:8px !important}
.jh-avis-14{font-size:15px !important;letter-spacing:2px !important;line-height:1.2 !important}
.jh-avis-15{color:var(--jo-ocre) !important}
.jh-avis-16{color:var(--jo-sand-5) !important}
/* Mobile : le défilement horizontal des avis étire les cartes à la même hauteur, pour aligner les images en bas */
@media (max-width:560px){#avis .jo-row4.jh-avis-5{align-items:stretch !important}#avis .jo-row4.jh-avis-5>.jh-avis-6{height:auto !important}}

/* Découvrez nos ateliers */
.jh-ateliers-1{height:620px !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;background:var(--jo-white) !important}
.jh-ateliers-2{display:flex !important;flex-direction:column !important;justify-content:center !important;gap:22px !important;padding:48px 96px !important}
.jh-ateliers-3{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:36px !important;line-height:1.12 !important;text-transform:uppercase !important;color:var(--jo-coral) !important}
.jh-ateliers-4{margin: 0 !important;font-size: 16px !important;line-height: 1.65 !important;color: var(--jo-teal) !important;font-weight: 600 !important}
.jh-ateliers-5{margin-top:6px !important}
.jh-ateliers-6{display:inline-flex !important;align-items:center !important;gap:14px !important;min-height:58px !important;padding:8px 28px 8px 8px !important;border:1.5px solid var(--jo-coral) !important;border-radius:4px !important;font-size:18px !important;font-weight:600 !important;color:var(--jo-green) !important}
.jh-ateliers-7{width:42px !important;height:42px !important;border-radius:50% !important;background:var(--jo-green) !important;display:flex !important;align-items:center !important;justify-content:center !important}
.jh-ateliers-8{position:relative !important;overflow:hidden !important;min-height:0 !important}
.jh-ateliers-9{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important}

/* Nos conseils */
.jh-conseils-1{height:1080px !important;padding:88px 48px !important;background:var(--jo-coral) !important;color:var(--jo-white) !important}
.jh-conseils-2{max-width:1244px !important;margin:0 auto !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:20px !important}
.jh-conseils-3{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:34px !important;text-transform:uppercase !important;color:var(--jo-white) !important;text-align:center !important}
.jh-conseils-4{margin: 0 0 28px !important;max-width: 660px !important;font-size: 15px !important;line-height: 1.6 !important;text-align: center !important;color: var(--jo-white) !important;font-weight: 600 !important}
.jh-conseils-5{width:100% !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:28px !important;align-items:stretch !important}
.jh-conseils-6{display:flex !important;flex-direction:column !important;gap:14px !important}
.jh-conseils-7{display:block !important;width:100% !important;aspect-ratio:1/0.95 !important;object-fit:cover !important;border-radius:6px !important}
.jh-conseils-8{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:17px !important;text-transform:uppercase !important;color:var(--jo-white) !important}
.jh-conseils-9{margin:0 !important;font-size:15px !important;line-height:1.55 !important;color:var(--jo-white) !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important}
.jh-conseils-10{margin-top:auto !important}
.jh-conseils-11{display:inline-flex !important;align-items:center !important;min-height:44px !important;padding:0 22px !important;background:var(--jo-green) !important;border-radius:4px !important;font-size:16px !important;font-weight:700 !important;color:var(--jo-white) !important}
.jh-conseils-12{margin-top:36px !important}
.jh-conseils-13{display:inline-flex !important;align-items:center !important;gap:14px !important;min-height:58px !important;padding:8px 28px 8px 8px !important;border:1.5px solid var(--jo-white) !important;border-radius:4px !important;font-size:18px !important;font-weight:600 !important;color:var(--jo-white) !important}
.jh-conseils-14{width:42px !important;height:42px !important;border-radius:50% !important;background:var(--jo-green) !important;display:flex !important;align-items:center !important;justify-content:center !important}

/* Le mot de la créatrice */
.jh-createur-1{height:640px !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;background:var(--jo-ocre) !important}
.jh-createur-2{position:relative !important;overflow:hidden !important;min-height:0 !important;background:#E4E6E8 !important}
.jh-createur-3{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center top !important}
.jh-createur-4{display:flex !important;flex-direction:column !important;justify-content:center !important;gap:22px !important;padding:48px 96px !important}
.jh-createur-5{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:34px !important;line-height:1.12 !important;text-transform:uppercase !important;color:var(--jo-green) !important}
.jh-createur-6{margin: 0 !important;font-size: 16px !important;line-height: 1.65 !important;color: var(--jo-green) !important;font-weight: 600 !important}
.jh-createur-7{margin:0 !important;font-size:16px !important;line-height:1.65 !important;color:var(--jo-green) !important}

/* Personnalisation */
.jh-personnalisation-1{position:relative !important;height:680px !important;padding:0 48px !important;background:#9B5446 !important;overflow:hidden !important;display:flex !important;align-items:center !important;justify-content:center !important}
.jh-personnalisation-2{position:absolute !important;left:0 !important;top:0 !important;height:100% !important;width:30% !important;object-fit:cover !important;-webkit-mask-image:linear-gradient(to right,#000 30%,transparent 100%) !important;mask-image:linear-gradient(to right,#000 30%,transparent 100%) !important}
.jh-personnalisation-3{position:absolute !important;right:0 !important;top:0 !important;height:100% !important;width:30% !important;object-fit:cover !important;-webkit-mask-image:linear-gradient(to left,#000 30%,transparent 100%) !important;mask-image:linear-gradient(to left,#000 30%,transparent 100%) !important}
.jh-personnalisation-4{position:relative !important;z-index:1 !important;max-width:660px !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:22px !important;text-align:center !important;color:var(--jo-white) !important}
.jh-personnalisation-5{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:34px !important;text-transform:uppercase !important;color:var(--jo-white) !important}
.jh-personnalisation-6{margin:0 !important;font-size:16px !important;line-height:1.65 !important;color:var(--jo-white) !important}
.jh-personnalisation-7{margin-top:6px !important}
.jh-personnalisation-8{display:inline-flex !important;align-items:center !important;gap:14px !important;min-height:58px !important;padding:8px 28px 8px 8px !important;border:1.5px solid var(--jo-white) !important;border-radius:4px !important;font-size:18px !important;font-weight:600 !important;color:var(--jo-white) !important}
.jh-personnalisation-9{width:42px !important;height:42px !important;border-radius:50% !important;background:var(--jo-green) !important;display:flex !important;align-items:center !important;justify-content:center !important}
/* Tablette : la hauteur devient automatique, il faut donc de l'air au-dessus et en dessous du contenu */
@media (max-width:1000px){#personnalisation{padding-top:64px !important;padding-bottom:64px !important}}

/* Frise illustrée */
.jh-frise-1{display: block !important;width: 100% !important;height: 36px !important;object-fit: none !important;background: var(--jo-white) !important}

/* Réassurance */
.jh-reassurance-1{height: 260px !important;padding: 0 48px !important;display: flex !important;align-items: center !important;background-color: var(--jo-cream) !important}
.jh-reassurance-2{list-style:none !important;margin:0 auto !important;padding:0 !important;width:100% !important;max-width:1244px !important;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:24px !important}
.jh-reassurance-3{display:flex !important;flex-direction:column !important;align-items:center !important;gap:14px !important;text-align:center !important}
.jh-reassurance-4{width:92px !important;height:46px !important;border-radius:23px !important;background:var(--jo-coral) !important;display:flex !important;align-items:center !important;justify-content:center !important}
.jh-reassurance-5{display:flex !important;flex-direction:column !important;gap:3px !important}
.jh-reassurance-6{font-size:14px !important;font-weight:700 !important;text-transform:uppercase !important;color:var(--jo-green) !important}
.jh-reassurance-7{font-size:14px !important;color:var(--jo-green) !important}
.jh-reassurance-8{display:flex !important;flex-direction:column !important;align-items:center !important;gap:14px !important}

/* FAQ */
.jh-faq-1{position:relative !important;min-height:800px !important;display:flex !important;flex-direction:column !important;justify-content:center !important;padding:80px 48px !important;background:#3B605E !important;overflow:hidden !important}
.jh-faq-2{position:relative !important;z-index:1 !important;max-width:1244px !important;margin:0 auto !important;display:grid !important;grid-template-columns:320px minmax(0,1fr) !important;gap:64px !important;align-items:center !important;height:100% !important}
.jh-faq-3{margin:0 !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:34px !important;line-height:1.15 !important;text-transform:uppercase !important;color:var(--jo-white) !important}
.jh-faq-4{display:flex !important;flex-direction:column !important;gap:8px !important}
.jh-faq-5{background:var(--jo-white) !important;border-radius:5px !important}
.jh-faq-6{display:flex !important;align-items:center !important;justify-content:space-between !important;min-height:44px !important;padding:0 20px !important;font-size:15px !important;font-weight:700 !important;color:var(--jo-teal) !important}
.jh-faq-7{margin:0 !important;padding:0 20px 18px !important;font-size:14px !important;line-height:1.6 !important;color:var(--jo-green) !important}

/* ── Ajustements à la main (comportements que la maquette gérait en JavaScript) ── */
[data-jo-needs] [hidden]{display:none !important}
[data-jo-need]{font-weight:600}
[data-jo-need][aria-selected="true"]{font-weight:700 !important}
[data-jo-need] svg{display:none}
[data-jo-need][aria-selected="true"] svg{display:inline-block}