/* ==========================================================================
   Accueil — maquette « Accueil Paradis du Thé v2 » et « Mobile 320 » (13/09/2026)
   ========================================================================== */

.section { max-width: var(--largeur-site); margin: 0 auto; padding: 56px var(--gouttiere) 0; }
.section__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.section__titre { margin: 0; font: 600 clamp(26px, 3vw, 36px)/1.1 var(--f-titre); }
.section__titre a { color: inherit; }
.section__intro { margin: 0; font-size: var(--t-compact); color: #77776a; flex: 1 1 240px; min-width: 180px; }
.section__tout { margin-left: auto; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-prune); }
.section__tout:hover { color: var(--c-vert); }

/* Bannière */
.hero-cadre { padding: 16px var(--gouttiere) 0; }
.hero { position: relative; overflow: hidden; background: var(--c-hero); min-height: clamp(340px, 34vw, 440px); display: flex; align-items: center; max-width: calc(var(--largeur-site) - 2 * var(--gouttiere) + 2 * var(--gouttiere)); margin: 0 auto; }
.hero__image { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: auto; min-width: 66%; max-width: none; object-fit: cover; object-position: center right; }
.hero__voile { position: absolute; inset: 0; background: linear-gradient(97deg, #c3cebb 0%, #c3cebb 38%, rgb(195 206 187 / 0.94) 46%, rgb(195 206 187 / 0.5) 58%, rgb(195 206 187 / 0) 74%); }
.hero__contenu { position: relative; width: 100%; max-width: 1192px; margin: 0 auto; padding: clamp(34px, 5vw, 64px) clamp(22px, 3vw, 40px); }
.hero__contenu > * { max-width: 560px; }
.hero__surtitre { display: block; font-size: var(--t-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-prune-texte); }
.hero__titre { margin: 16px 0; font: 600 clamp(32px, 4.4vw, 54px)/1.08 var(--f-titre); color: #2f3628; text-wrap: balance; }
.hero__texte { margin: 0 0 26px; font-size: var(--t-courant); line-height: 1.6; color: var(--c-texte-2); max-width: 38ch; text-wrap: pretty; }
.hero__boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* Opération promo (inc/promo.php) : visuel carré + offre, code en ticket copiable */
.promo-accueil { max-width: var(--largeur-site); margin: 0 auto; padding: 40px var(--gouttiere) 0; scroll-margin-top: 90px; }
.promo-accueil__carte { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(18px, 2.4vw, 28px); background: linear-gradient(115deg, var(--c-vert-pale) 0%, #fff 62%); border: 1px solid var(--c-creme-bord); border-radius: var(--rayon); overflow: hidden; }
.promo-accueil__carte::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(145 104 122 / 0.10) 0%, rgb(145 104 122 / 0) 70%); pointer-events: none; }
.promo-accueil__visuel { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--rayon); box-shadow: 0 22px 40px -30px rgb(42 42 36 / 0.55); }
.promo-accueil__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.promo-accueil__visuel:hover .promo-accueil__img { transform: scale(1.03); }
.promo-accueil__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 520px; }
.promo-accueil__surtitre { margin: 0; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-prune-texte); }
.promo-accueil__titre { margin: 0; font: 600 clamp(28px, 3.4vw, 42px)/1.08 var(--f-titre); color: #2f3628; text-wrap: balance; }
.promo-accueil__texte { margin: 0; font-size: var(--t-courant); line-height: 1.6; color: var(--c-texte-2); text-wrap: pretty; }
.promo-accueil__ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; background: #fff; border: 1px dashed var(--c-prune); border-radius: var(--rayon); }
.promo-accueil__ticket-libelle { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-texte-doux); }
.promo-accueil__code { font: 600 clamp(20px, 2.2vw, 26px)/1 var(--f-titre); letter-spacing: 0.16em; color: var(--c-prune-texte); user-select: all; }
.promo-accueil__copier { padding: 6px 12px; border: 1px solid var(--c-creme-bord); border-radius: var(--rayon); background: var(--c-creme-clair); font: 600 var(--t-micro)/1 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-texte-2); cursor: pointer; }
.promo-accueil__copier:hover { border-color: var(--c-prune); color: var(--c-prune); }
.promo-accueil__conditions { margin: 0; font-size: var(--t-petit); line-height: 1.5; color: var(--c-texte-doux); }
@media (max-width: 760px) {
	.promo-accueil { padding-top: 28px; }
	.promo-accueil__carte { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 14px 14px 22px; background: linear-gradient(180deg, #fff 0%, var(--c-vert-pale) 100%); }
	.promo-accueil__contenu { max-width: none; padding: 0 6px; }
	.promo-accueil__actions, .promo-accueil__actions .button { width: 100%; }
}

/* Cartes produit et rails */
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(205px, 100%), 1fr)); gap: 18px; }
.rail--guides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
/* Thés habituels : de un à quatre produits selon le client. Colonnes fixes, sinon un produit seul
   occuperait toute la largeur (auto-fit réduit la grille au nombre d'éléments). */
.rail--habituels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte-produit { display: flex; flex-direction: column; gap: 12px; color: var(--c-texte); }
.carte-produit:hover { color: var(--c-vert); }
.carte-produit__visuel { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--rayon); background: repeating-linear-gradient(135deg, #f2efe7 0 12px, #eae6da 12px 24px); }
.carte-produit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-produit__badge { position: absolute; top: 0; left: 0; background: var(--c-prune); color: #fff; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; }
.carte-produit__nom { font: 400 1.25rem/1.2 var(--f-titre); }
.carte-produit__note { font-size: var(--t-petit); color: #77776a; line-height: 1.5; }
.carte-produit__infos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-compact); color: var(--c-texte); }
.carte-produit__prix { font-weight: 500; }
.carte-produit__format, .carte-produit__avis { font-size: var(--t-label); color: var(--c-texte-discret); }
.etoiles { color: var(--c-etoile); font-size: var(--t-label); letter-spacing: 0.08em; }

/* Envies */
.envies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.svg-defs { position: absolute; width: 0; height: 0; }
.envie { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 52px; border: 1px solid var(--c-creme); border-radius: var(--rayon); color: var(--c-texte); background: var(--c-creme-clair); transition: border-color var(--duree), background-color var(--duree); }
.envie:hover, .envie:focus-visible { border-color: var(--c-vert); color: var(--c-texte); background: var(--c-vert-pale); }
.envie__moment { font: 400 var(--t-petit)/1 var(--f-titre); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-prune); }
.envie__titre { font: 400 1.625rem/1.15 var(--f-titre); }
.envie__texte { font-size: var(--t-compact); line-height: 1.6; color: var(--c-texte-doux); }
.envie__compte { margin-top: 6px; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-vert); }
.envie__illu { position: absolute; bottom: 8px; right: 8px; pointer-events: none; opacity: 0.55; transition: opacity 0.35s ease; }
.envie__illu .lavis { mix-blend-mode: multiply; opacity: 0.14; transition: opacity 0.8s ease 0.1s; }
.envie__illu .trace { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s ease; }
.envie__illu .trace--2 { transition-delay: 0.15s; }
.envie__illu .trace--3 { transition-delay: 0.3s; }
.envie__illu .trace--4 { transition-delay: 0.45s; }
.envie:hover .envie__illu, .envie:focus-visible .envie__illu, .envie.is-vu .envie__illu { opacity: 1; }
.envie:hover .lavis, .envie:focus-visible .lavis, .envie.is-vu .lavis { opacity: 0.5; }
.envie:hover .trace, .envie:focus-visible .trace, .envie.is-vu .trace { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
	.envie__illu { opacity: 1; }
	.envie__illu .trace { stroke-dashoffset: 0; }
}

/* Panneaux crème (thé du moment, coffrets) */
.panneau { background: var(--c-creme); border: 1px solid var(--c-creme-bord); border-radius: var(--rayon); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(20px, 2.4vw, 32px); }
.panneau__texte { flex: 1 1 300px; min-width: 0; padding: clamp(6px, 1vw, 12px); display: flex; flex-direction: column; gap: 14px; }
.panneau__accroche { margin: 0; font-size: var(--t-courant); line-height: 1.6; color: var(--c-texte-2); max-width: 38ch; }
.pastilles { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles li { background: rgb(255 255 255 / 0.72); color: #4f4f45; font-size: var(--t-petit); padding: 6px 12px; border-radius: 999px; }
.panneau__achat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.panneau__prix { font: 400 1.625rem/1 var(--f-titre); }
.panneau__format { font-size: var(--t-petit); color: #6b6b5f; }
.panneau__boutons { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.panneau__achat .button { padding: 13px 24px; }
.panneau__achat .added_to_cart { font-size: var(--t-petit); }
.panneau__bouton { align-self: flex-start; margin-top: 6px; padding: 13px 24px; }
.panneau__visuel { flex: 0 0 auto; width: clamp(220px, 30vw, 320px); height: clamp(220px, 30vw, 320px); object-fit: cover; border-radius: var(--rayon); display: block; margin: 0 auto; }

/* Types de thés */
.familles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.famille { display: block; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--rayon); background: repeating-linear-gradient(135deg, #f2efe7 0 12px, #eae6da 12px 24px); }
.famille img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.famille::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgb(28 30 22 / 0.72), transparent); pointer-events: none; }
.famille__nom { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font: 500 clamp(1rem, 1.6vw, 1.375rem)/1.15 var(--f-titre); text-shadow: 0 1px 8px rgb(0 0 0 / 0.35); }
.famille:hover img { transform: scale(1.04); }
.famille:hover, .famille:focus-visible { outline: 2px solid var(--c-vert); outline-offset: -2px; }
.familles__plus { display: none; }

/* Avis */
.avis { border-top: 1px solid var(--c-creme); border-bottom: 1px solid var(--c-creme); padding: 30px 0; display: flex; flex-direction: column; gap: 24px; }
.avis__tete { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
.avis__note { font: 400 2.75rem/1 var(--f-titre); }
.avis__tete .etoiles { font-size: var(--t-courant); letter-spacing: 0.1em; }
.avis__resume { font-size: var(--t-petit); color: #77776a; }
.avis__citations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 24px; }
.avis__citation { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.avis__citation p { margin: 0; font: 400 var(--t-courant)/1.35 var(--f-titre); }
.avis__citation footer { font-size: var(--t-label); color: var(--c-texte-discret); }

/* Guides */
.carte-guide { display: flex; flex-direction: column; gap: 12px; color: var(--c-texte); }
.carte-guide:hover { color: var(--c-vert); }
.carte-guide__visuel { position: relative; aspect-ratio: 3 / 2; border-radius: var(--rayon); overflow: hidden; background: repeating-linear-gradient(135deg, #f2efe7 0 12px, #eae6da 12px 24px); }
.carte-guide__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-guide__type { font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-prune); }
.carte-guide__titre { font: 400 1.25rem/1.2 var(--f-titre); }
.carte-guide__texte { font-size: var(--t-petit); line-height: 1.6; color: #77776a; }

/* À propos */
.apropos { border: 1px solid var(--c-creme); border-radius: var(--rayon); padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 3vw, 44px); align-items: start; }
.apropos__texte p { margin: 0 0 18px; font-size: var(--t-courant); line-height: 1.75; color: #55554a; text-wrap: pretty; }
.apropos__texte p:last-child { margin-bottom: 0; }
.apropos__texte h3 { margin: 0 0 12px; font: 600 var(--t-accent)/1.25 var(--f-titre); }
.apropos__texte strong { font-weight: 600; color: var(--c-texte); }
.chiffres { margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 1px; background: var(--c-creme); border: 1px solid var(--c-creme); border-radius: var(--rayon); overflow: hidden; }
.chiffres__item { background: #fff; padding: 16px; }
.chiffres dt { font: 400 1.625rem/1.1 var(--f-titre); }
.chiffres dd { margin: 4px 0 0; font-size: var(--t-petit); color: #6b6b5f; }
.apropos__suite { display: none; }

/* Newsletter */
.newsletter { margin-top: 56px; background: var(--c-vert-bande); }
.newsletter__inner { max-width: var(--largeur-site); margin: 0 auto; padding: 44px var(--gouttiere); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; align-items: center; }
.newsletter__titre { margin: 0 0 8px; font: 600 clamp(26px, 3vw, 36px)/1.1 var(--f-titre); color: #fff; }
.newsletter__texte { margin: 0; font-size: var(--t-compact); line-height: 1.6; color: #fff; max-width: 44ch; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter__form input { flex: 1; min-width: 180px; border: 0; outline: 0; padding: 14px 18px; font: 400 var(--t-compact) var(--f-texte); color: var(--c-texte); border-radius: var(--rayon); }
.newsletter__form input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.newsletter__form .button:hover { background: var(--c-texte); }

/* Mobile (maquette 320 px) ------------------------------------------------ */
@media (max-width: 999px) {
	.section { padding: 24px 14px 0; }
	.section__tete { flex-wrap: nowrap; justify-content: space-between; margin-bottom: 12px; }
	.section__titre { font-size: 1.3125rem; }
	.section__intro { display: none; }
	.section__tout { font-size: var(--t-micro); letter-spacing: 0.12em; white-space: nowrap; }

	.hero-cadre { padding: 0; }
	.hero { display: block; min-height: 0; }
	/* L'image est un bandeau 3:1 dont tout le sujet (tasse, bol, citrons) occupe le tiers droit :
	   cadrée à droite, elle le montre en entier sur un écran de téléphone ; remontée à 30 %, la
	   tasse garde son rebord sur tablette, où l'image est rognée en hauteur. Le texte étant sous
	   l'image, le voile n'a plus à éclaircir que le bas, pour la transition vers le fond vert. */
	.hero__image { position: relative; inset: auto; display: block; width: 100%; min-width: 0; height: 180px; object-position: 100% 30%; }
	.hero__voile { top: 0; bottom: auto; height: 180px; background: linear-gradient(180deg, rgb(195 206 187 / 0) 72%, #c3cebb 100%); }
	.hero__contenu { padding: 0 16px 20px; }
	.hero__surtitre { font-size: var(--t-micro); letter-spacing: 0.22em; }
	.hero__titre { margin: 8px 0 10px; font-size: 1.625rem; line-height: 1.12; }
	.hero__texte { font-size: var(--t-courant); line-height: 1.5; margin-bottom: 14px; }
	.hero__boutons .button { width: 100%; padding: 13px; font-size: var(--t-label); letter-spacing: 0.14em; }
	.hero__boutons .button--clair { display: none; }

	.rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
	.rail::-webkit-scrollbar { display: none; }
	.rail > * { flex: none; width: 140px; scroll-snap-align: start; }
	.rail--guides > * { width: 170px; }
	.carte-produit { gap: 0; }
	.carte-produit__nom { font-size: var(--t-courant); margin: 8px 0 4px; }
	.carte-produit__note, .carte-produit .etoiles, .carte-produit__avis, .carte-produit__format { display: none; }
	.carte-produit__prix { font-size: var(--t-compact); font-weight: 600; }
	.carte-guide { gap: 6px; }
	.carte-guide__type, .carte-guide__texte { display: none; }
	.carte-guide__titre { font-size: var(--t-courant); }
	.rail-points { display: flex; gap: 5px; justify-content: center; padding-top: 12px; }
	.rail-points span { width: 18px; height: 3px; background: var(--c-creme); }
	.rail-points span.is-actif { background: var(--c-prune); }

	.envies { grid-template-columns: 1fr 1fr; gap: 8px; }
	.envie { padding: 12px 12px 34px; gap: 5px; }
	.envie__moment { font-size: var(--t-micro); letter-spacing: 0.16em; }
	.envie__titre { font-size: var(--t-courant); }
	.envie__texte, .envie__compte { display: none; }
	.envie__illu { width: 40px; height: 40px; bottom: 4px; right: 4px; }

	.panneau { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
	.panneau__texte { display: contents; }
	.panneau .badge { order: 1; font-size: var(--t-micro); letter-spacing: 0.16em; padding: 5px 10px; }
	.panneau__visuel { order: 2; width: 100%; height: auto; aspect-ratio: 1; }
	.panneau .section__titre { order: 3; font-size: 1.25rem; line-height: 1.15; }
	.panneau__accroche { order: 4; font-size: var(--t-courant); line-height: 1.5; }
	.panneau .pastilles { order: 5; }
	.panneau__achat, .panneau__bouton { order: 6; }
	.panneau__prix { font-size: 1.3125rem; }
	.panneau__achat .button, .panneau__bouton { padding: 11px 18px; font-size: var(--t-micro); letter-spacing: 0.14em; }

	.familles { grid-template-columns: 1fr 1fr; gap: 8px; }
	.familles:not(.is-deplie) .famille:nth-child(n+5) { display: none; }
	.familles__plus { display: flex; width: 100%; margin-top: 10px; padding: 11px; font-size: var(--t-micro); letter-spacing: 0.14em; }
	.familles.is-deplie + .familles__plus { display: none; }

	.avis { padding: 16px 0; gap: 12px; }
	.avis__note { font-size: 1.875rem; }
	.avis__tete .etoiles { font-size: var(--t-petit); }
	.avis__resume { flex-basis: 100%; font-size: var(--t-label); }
	.avis__citation:nth-child(n+2) { display: none; }
	.avis__citation p { font-size: var(--t-courant); }
	.avis__citation footer { font-size: var(--t-label); }

	.apropos { display: block; border: 0; padding: 0; position: relative; }
	.apropos:not(.is-deplie) .apropos__col:first-child .apropos__texte, .apropos:not(.is-deplie) .apropos__col:first-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.apropos:not(.is-deplie) .apropos__col:first-child > :not(p:first-child) { display: none; }
	.apropos:not(.is-deplie) .apropos__col + .apropos__col { display: none; }
	.apropos__texte p { font-size: var(--t-courant); line-height: 1.6; }
	.apropos__suite { display: inline-block; margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--c-prune); font: 600 var(--t-label) var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
	.apropos.is-deplie .apropos__suite { display: none; }

	.newsletter { margin-top: 24px; }
	.newsletter__inner { padding: 22px 14px; gap: 12px; }
	.newsletter__titre { font-size: 1.25rem; }
	.newsletter__texte { font-size: var(--t-petit); }
	.newsletter__form .button { width: 100%; }
}