/* =============================================================================
   LATTAFA — identite visuelle dediee (espace /lattafa uniquement).
   Feuille de style totalement independante de css/style.css : aucune classe
   partagee, prefixe .ltf- partout, pour que cette identite reste propre a la
   marque et ne derive jamais avec le reste du site.

   Direction artistique : ivoire / beige sable / or mat, noir profond reserve
   aux moments de contraste (section vedette + footer). Lumineux, chaleureux,
   sensoriel. Le dore souligne, il n'envahit jamais.
============================================================================= */
:root {
  /* Fonds clairs */
  --ltf-ivoire: #FCF8F1;
  --ltf-sable: #F2E9D8;
  --ltf-sable-fonce: #E8DBC2;
  --ltf-blanc: #FFFEFB;

  /* Or */
  --ltf-or: #B08949;
  --ltf-or-clair: #E3CB99;
  --ltf-or-fonce: #8A6630;

  /* Encre */
  --ltf-noir: #1C1710;
  --ltf-encre: #2E271D;
  --ltf-gris: #7C7263;
  --ltf-gris-clair: #A79C8A;

  /* Accents */
  --ltf-ligne: #E6DAC2;
  --ltf-terracotta: #9E5A2C;
  --ltf-wa: #25A05E;

  --ltf-radius: 4px;
  --ltf-radius-lg: 8px;
  --ltf-ombre: 0 1px 2px rgba(28,23,16,.04), 0 8px 24px rgba(28,23,16,.06);
  --ltf-ombre-hover: 0 2px 4px rgba(28,23,16,.06), 0 24px 48px rgba(28,23,16,.12);

  --ltf-titre: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ltf-texte: 'Jost', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Motif oriental discret (etoile a 4 branches), utilise en texture de fond */
  --ltf-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 6l6.5 19.5L58 32l-19.5 6.5L32 58l-6.5-19.5L6 32l19.5-6.5z' fill='none' stroke='%23B08949' stroke-width='.7'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
.ltf-body {
  margin: 0;
  font-family: var(--ltf-texte);
  font-size: 16px;
  background: var(--ltf-ivoire);
  color: var(--ltf-encre);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ltf-body * { box-sizing: border-box; }
.ltf-body a { color: inherit; text-decoration: none; }
.ltf-body img { max-width: 100%; display: block; }
.ltf-body h1, .ltf-body h2, .ltf-body h3, .ltf-body h4 {
  font-family: var(--ltf-titre); font-weight: 500; margin: 0; color: var(--ltf-noir);
  letter-spacing: .01em;
}
.ltf-body p { margin: 0; }
.ltf-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.ltf-container-etroit { max-width: 820px; margin: 0 auto; padding: 0 32px; }

/* Petites majuscules espacees : signature typographique de la marque */
.ltf-surtitre {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; color: var(--ltf-or-fonce);
}

/* ---------- Barre d'annonce ---------- */
.ltf-annonce {
  background: var(--ltf-noir); color: var(--ltf-or-clair);
  text-align: center; padding: 11px 16px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.ltf-annonce span { opacity: .55; margin: 0 14px; }

/* ---------- En-tete ---------- */
.ltf-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(252,248,241,.94); backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--ltf-ligne);
}
.ltf-header .ltf-container { display: flex; align-items: center; justify-content: space-between; height: 92px; gap: 24px; }
/* Logo officiel + mention "Parfumerie orientale", separes par un filet dore.
   Le logo est un SVG : il reste parfaitement net sur ecran Retina et pese
   moins qu'une image classique. */
.ltf-logo { display: flex; align-items: center; gap: 13px; line-height: 1; }
.ltf-logo-img { height: 64px; width: auto; display: block; }
.ltf-logo .sub {
  font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ltf-or-fonce); line-height: 1.9;
  padding-left: 13px; border-left: 1px solid var(--ltf-ligne);
}
/* Repli si le fichier du logo manque : on n'affiche jamais l'icone
   d'image cassee, le nom de la marque prend sa place. */
.ltf-logo .nom { font-family: var(--ltf-titre); font-size: 30px; letter-spacing: .16em; color: var(--ltf-noir); font-weight: 500; }
.ltf-nav { display: flex; align-items: center; gap: 36px; }
.ltf-nav a { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ltf-encre); position: relative; padding: 6px 0; }
.ltf-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ltf-or); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.ltf-nav a:hover::after { transform: scaleX(1); }
.ltf-header-wa {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ltf-or); color: var(--ltf-or-fonce);
  padding: 10px 18px; border-radius: 999px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  transition: background-color .25s ease, color .25s ease;
}
.ltf-header-wa:hover { background: var(--ltf-or); color: #fff; }
.ltf-header-wa svg { width: 15px; height: 15px; }

/* ---------- Boutons ---------- */
.ltf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 34px; border: 1px solid transparent; border-radius: var(--ltf-radius);
  cursor: pointer; font-family: var(--ltf-texte);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  transition: all .28s cubic-bezier(.4,0,.2,1);
}
.ltf-btn-or { background: var(--ltf-or); color: #fff; }
.ltf-btn-or:hover { background: var(--ltf-or-fonce); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(138,102,48,.28); }
.ltf-btn-ligne { background: transparent; color: var(--ltf-noir); border-color: var(--ltf-noir); }
.ltf-btn-ligne:hover { background: var(--ltf-noir); color: var(--ltf-ivoire); }
.ltf-btn-clair { background: transparent; color: var(--ltf-or-clair); border-color: rgba(227,203,153,.5); }
.ltf-btn-clair:hover { background: var(--ltf-or-clair); color: var(--ltf-noir); border-color: var(--ltf-or-clair); }
.ltf-btn-wa { background: var(--ltf-wa); color: #fff; }
.ltf-btn-wa:hover { filter: brightness(.93); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,160,94,.3); }
.ltf-btn-bloc { width: 100%; }
.ltf-btn-sm { padding: 12px 22px; font-size: 10.5px; }
.ltf-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ltf-btn svg { width: 16px; height: 16px; }

/* Lien souligne discret */
.ltf-lien { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ltf-noir); border-bottom: 1px solid var(--ltf-or); padding-bottom: 4px; transition: color .25s ease; }
.ltf-lien:hover { color: var(--ltf-or-fonce); }

/* ---------- Flacons (illustrations SVG) ---------- */
.ltf-flacon { width: 100%; height: 100%; display: block; }
.ltf-flacon-sm { width: 130px; height: 195px; }

/* ---------- Hero ---------- */
.ltf-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--ltf-ivoire) 0%, var(--ltf-sable) 58%, var(--ltf-sable-fonce) 100%);
}
.ltf-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--ltf-motif); background-size: 64px 64px; opacity: .16; pointer-events: none;
}
.ltf-hero .ltf-container { position: relative; }
.ltf-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; min-height: 620px; padding: 70px 0; }
.ltf-hero-texte .ltf-surtitre { display: block; margin-bottom: 22px; }
.ltf-hero h1 { font-size: clamp(44px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -.005em; margin-bottom: 26px; }
.ltf-hero h1 em { font-style: italic; color: var(--ltf-or-fonce); }
.ltf-hero-sous { font-size: 16px; line-height: 1.75; color: var(--ltf-gris); max-width: 430px; margin-bottom: 36px; font-weight: 300; }
.ltf-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.ltf-hero-note { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ltf-gris); letter-spacing: .02em; }

/* Visuel hero : flacon sur halo dore */
.ltf-hero-visuel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; }
.ltf-hero-halo {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 48% 38%, #FFF6E4 0%, var(--ltf-or-clair) 46%, var(--ltf-or) 78%, rgba(138,102,48,0) 100%);
  filter: blur(2px); opacity: .85;
}
.ltf-hero-cercle {
  position: absolute; width: 84%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(176,137,73,.32);
}
.ltf-hero-cercle.deux { width: 96%; border-style: dashed; border-color: rgba(176,137,73,.2); }
.ltf-hero-flacon { position: relative; width: 300px; height: 450px; filter: drop-shadow(0 30px 45px rgba(28,23,16,.28)); }
/* Photo produit detouree posee sur le halo du hero. `position: relative`
   la fait passer au-dessus du halo et des cercles, qui sont en absolu. */
.ltf-hero-photo { position: relative; display: block; line-height: 0; }
.ltf-hero-photo img { height: 470px; width: auto; display: block; filter: drop-shadow(0 30px 45px rgba(28,23,16,.28)); }

/* ---------- Bandeau de reassurance ---------- */
.ltf-reassurance { background: var(--ltf-blanc); border-top: 1px solid var(--ltf-ligne); border-bottom: 1px solid var(--ltf-ligne); }
.ltf-reassurance-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ltf-reassurance-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 34px 20px; border-left: 1px solid var(--ltf-ligne); }
.ltf-reassurance-item:first-child { border-left: none; }
.ltf-reassurance-item svg { width: 26px; height: 26px; color: var(--ltf-or); }
.ltf-reassurance-item .titre { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ltf-noir); }
.ltf-reassurance-item .desc { font-size: 12.5px; color: var(--ltf-gris); font-weight: 300; }

/* ---------- Sections ---------- */
.ltf-section { padding: 104px 0; }
.ltf-section-blanche { background: var(--ltf-blanc); }
.ltf-section-sable { background: var(--ltf-sable); }
.ltf-section-tete { text-align: center; margin-bottom: 58px; }
.ltf-section-tete .ltf-surtitre { display: block; margin-bottom: 16px; }
.ltf-section-tete h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.14; margin-bottom: 16px; }
.ltf-section-tete p { font-size: 15.5px; color: var(--ltf-gris); font-weight: 300; max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* Filet decoratif */
.ltf-filet { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 18px; max-width: 200px; }
.ltf-filet::before, .ltf-filet::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--ltf-or)); }
.ltf-filet::after { background: linear-gradient(90deg, var(--ltf-or), transparent); }
.ltf-filet svg { width: 13px; height: 13px; color: var(--ltf-or); }

/* ---------- Grille produits ---------- */
.ltf-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 42px 32px; }
.ltf-carte { background: transparent; display: flex; flex-direction: column; }
.ltf-carte-visuel {
  position: relative; display: block; aspect-ratio: 4/5; overflow: hidden;
  background: linear-gradient(165deg, var(--ltf-blanc) 0%, var(--ltf-sable) 100%);
  border: 1px solid var(--ltf-ligne); border-radius: var(--ltf-radius-lg);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .35s ease;
}
.ltf-carte-visuel::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--ltf-motif); background-size: 64px 64px; opacity: .1; pointer-events: none;
}
.ltf-carte:hover .ltf-carte-visuel { box-shadow: var(--ltf-ombre-hover); border-color: var(--ltf-or-clair); }
.ltf-carte-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.ltf-carte:hover .ltf-carte-visuel img { transform: scale(1.05); }
.ltf-carte-flacon { position: relative; width: 62%; height: 78%; transition: transform .55s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 16px 26px rgba(28,23,16,.16)); }
.ltf-carte:hover .ltf-carte-flacon { transform: translateY(-8px) scale(1.03); }
.ltf-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--ltf-terracotta); color: #fff;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  padding: 6px 12px; border-radius: 2px;
}
.ltf-badge-rupture { background: var(--ltf-gris); }

.ltf-carte-corps { padding: 22px 4px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ltf-carte-etoiles { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ltf-gris-clair); }
.ltf-carte-etoiles .ltf-etoiles { color: var(--ltf-or); }
.ltf-carte h3 { font-size: 25px; line-height: 1.2; }
.ltf-carte-notes { font-size: 12.5px; color: var(--ltf-gris); font-weight: 300; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ltf-carte-prix { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.ltf-carte-prix .prix { font-size: 17px; font-weight: 500; letter-spacing: .04em; color: var(--ltf-noir); }
.ltf-carte-prix .barre { font-size: 13.5px; color: var(--ltf-gris-clair); text-decoration: line-through; font-weight: 300; }
.ltf-carte-action { margin-top: 14px; }
.ltf-carte-indispo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ltf-gris-clair); padding: 16px 0; text-align: center; border: 1px solid var(--ltf-ligne); border-radius: var(--ltf-radius); }

.ltf-etoiles { letter-spacing: .18em; }

/* ---------- Bande editoriale (recit de marque) ---------- */
.ltf-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; }
.ltf-editorial-visuel { position: relative; aspect-ratio: 4/5; border-radius: var(--ltf-radius-lg); overflow: hidden; background: linear-gradient(160deg, var(--ltf-sable) 0%, var(--ltf-sable-fonce) 60%, var(--ltf-or-clair) 100%); display: flex; align-items: center; justify-content: center; }
.ltf-editorial-visuel::after { content: ''; position: absolute; inset: 0; background-image: var(--ltf-motif); background-size: 64px 64px; opacity: .2; }
.ltf-editorial-visuel .ltf-flacon { position: relative; width: 56%; height: 72%; filter: drop-shadow(0 24px 40px rgba(28,23,16,.24)); }
.ltf-editorial-photo { position: relative; display: block; line-height: 0; width: 84%; }
.ltf-editorial-photo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(28,23,16,.24)); }
.ltf-editorial-texte .ltf-surtitre { display: block; margin-bottom: 18px; }
.ltf-editorial-texte h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.16; margin-bottom: 24px; }
.ltf-editorial-texte p { font-size: 15.5px; line-height: 1.85; color: var(--ltf-gris); font-weight: 300; margin-bottom: 18px; }
.ltf-editorial-texte p strong { color: var(--ltf-noir); font-weight: 500; }
.ltf-editorial-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; padding: 26px 0; border-top: 1px solid var(--ltf-ligne); border-bottom: 1px solid var(--ltf-ligne); }
.ltf-chiffre .val { font-family: var(--ltf-titre); font-size: 34px; color: var(--ltf-or-fonce); line-height: 1; }
.ltf-chiffre .lab { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ltf-gris); margin-top: 8px; }

/* ---------- Familles olfactives ---------- */
.ltf-familles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.ltf-famille { text-align: center; padding: 38px 22px; background: var(--ltf-blanc); border: 1px solid var(--ltf-ligne); border-radius: var(--ltf-radius-lg); transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease; }
.ltf-famille:hover { transform: translateY(-4px); box-shadow: var(--ltf-ombre); border-color: var(--ltf-or-clair); }
.ltf-famille-pastille { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ltf-famille-pastille svg { width: 26px; height: 26px; color: var(--ltf-noir); opacity: .72; }
.ltf-famille h4 { font-size: 21px; margin-bottom: 8px; }
.ltf-famille p { font-size: 12.5px; color: var(--ltf-gris); line-height: 1.6; font-weight: 300; }

/* ---------- Parfum vedette (moment de contraste, fond sombre) ---------- */
.ltf-vedette { position: relative; background: var(--ltf-noir); color: var(--ltf-sable); overflow: hidden; }
.ltf-vedette::before { content: ''; position: absolute; inset: 0; background-image: var(--ltf-motif); background-size: 64px 64px; opacity: .1; }
.ltf-vedette::after {
  content: ''; position: absolute; top: -20%; right: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,137,73,.28) 0%, rgba(176,137,73,0) 68%);
}
.ltf-vedette .ltf-container { position: relative; z-index: 1; }
.ltf-vedette-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; padding: 104px 0; }
.ltf-vedette h2, .ltf-vedette h3, .ltf-vedette h4 { color: var(--ltf-sable); }
.ltf-vedette .ltf-surtitre { color: var(--ltf-or-clair); display: block; margin-bottom: 18px; }
.ltf-vedette h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.1; margin-bottom: 22px; }
.ltf-vedette-desc { font-size: 15.5px; line-height: 1.85; color: rgba(242,233,216,.72); font-weight: 300; margin-bottom: 34px; }
.ltf-vedette-visuel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.ltf-vedette-visuel .ltf-flacon { position: relative; width: 260px; height: 390px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
/* Photo detouree (fond transparent) : ni cadre ni coins arrondis ici, sinon
   on verrait le rectangle de l'image sur ce fond sombre. L'ombre est portee
   par la silhouette du flacon, pas par un rectangle. */
.ltf-vedette-photo { position: relative; display: block; line-height: 0; }
.ltf-vedette-photo img { height: 430px; width: auto; display: block; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
.ltf-vedette-halo { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(227,203,153,.34) 0%, rgba(227,203,153,0) 70%); }

/* Pyramide olfactive */
.ltf-pyramide { display: flex; flex-direction: column; gap: 1px; margin-bottom: 34px; background: rgba(227,203,153,.16); }
.ltf-note { display: grid; grid-template-columns: 116px 1fr; gap: 22px; align-items: baseline; padding: 20px 4px; background: var(--ltf-noir); }
.ltf-note .lab { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ltf-or-clair); }
.ltf-note .val { font-size: 15px; color: rgba(242,233,216,.86); font-weight: 300; }
.ltf-vedette-prix { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.ltf-vedette-prix .prix { font-family: var(--ltf-titre); font-size: 40px; color: var(--ltf-or-clair); line-height: 1; }
.ltf-vedette-prix .barre { font-size: 17px; color: rgba(242,233,216,.42); text-decoration: line-through; }
.ltf-vedette-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Avis clients ---------- */
.ltf-avis-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ltf-avis { background: var(--ltf-blanc); border: 1px solid var(--ltf-ligne); border-radius: var(--ltf-radius-lg); padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; }
.ltf-avis .ltf-etoiles { color: var(--ltf-or); font-size: 14px; }
.ltf-avis p { font-family: var(--ltf-titre); font-size: 19px; line-height: 1.6; color: var(--ltf-encre); font-style: italic; flex: 1; }
.ltf-avis-auteur { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--ltf-ligne); }
.ltf-avis-initiale { width: 36px; height: 36px; border-radius: 50%; background: var(--ltf-sable); color: var(--ltf-or-fonce); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; }
.ltf-avis-nom { font-size: 12.5px; font-weight: 500; color: var(--ltf-noir); }
.ltf-avis-meta { font-size: 11px; color: var(--ltf-gris-clair); }
.ltf-avis-mention { text-align: center; font-size: 12px; color: var(--ltf-gris-clair); margin-top: 30px; font-style: italic; }

/* ---------- FAQ ---------- */
.ltf-faq { max-width: 780px; margin: 0 auto; }
.ltf-faq-item { border-bottom: 1px solid var(--ltf-ligne); }
.ltf-faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 4px; text-align: left;
  font-family: var(--ltf-titre); font-size: 21px; color: var(--ltf-noir);
}
.ltf-faq-q svg { width: 16px; height: 16px; color: var(--ltf-or); flex-shrink: 0; transition: transform .3s ease; }
.ltf-faq-item.ouvert .ltf-faq-q svg { transform: rotate(45deg); }
.ltf-faq-r { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
.ltf-faq-item.ouvert .ltf-faq-r { max-height: 260px; }
.ltf-faq-r p { padding: 0 4px 26px; font-size: 14.5px; line-height: 1.8; color: var(--ltf-gris); font-weight: 300; }

/* ---------- Bandeau contact ---------- */
.ltf-contact { background: var(--ltf-sable); text-align: center; padding: 84px 0; position: relative; overflow: hidden; }
.ltf-contact::before { content: ''; position: absolute; inset: 0; background-image: var(--ltf-motif); background-size: 64px 64px; opacity: .18; }
.ltf-contact .ltf-container { position: relative; }
.ltf-contact h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 16px; }
.ltf-contact p { font-size: 15.5px; color: var(--ltf-gris); font-weight: 300; margin-bottom: 30px; }

/* ---------- Footer ---------- */
.ltf-footer { background: var(--ltf-noir); color: rgba(242,233,216,.62); padding: 76px 0 0; }
.ltf-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 52px; }
.ltf-footer-logo-img { height: 74px; width: auto; display: block; margin-bottom: 18px; }
.ltf-footer-logo { font-family: var(--ltf-titre); font-size: 26px; letter-spacing: .16em; color: var(--ltf-sable); margin-bottom: 16px; }
.ltf-footer p { font-size: 13.5px; line-height: 1.85; font-weight: 300; }
.ltf-footer h4 { font-family: var(--ltf-texte); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ltf-or-clair); margin-bottom: 20px; font-weight: 500; }
.ltf-footer-liens a { display: block; font-size: 13.5px; line-height: 2.3; color: rgba(242,233,216,.62); font-weight: 300; transition: color .25s ease; }
.ltf-footer-liens a:hover { color: var(--ltf-or-clair); }
.ltf-footer-wa { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--ltf-sable); font-size: 14px; font-weight: 400; }
.ltf-footer-wa svg { width: 17px; height: 17px; color: var(--ltf-wa); }
.ltf-footer-bas { border-top: 1px solid rgba(242,233,216,.1); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11.5px; color: rgba(242,233,216,.38); font-weight: 300; }
.ltf-footer-bas a { color: rgba(242,233,216,.38); }
.ltf-footer-bas a:hover { color: var(--ltf-or-clair); }

/* ---------- Bouton panier (header) ---------- */
.ltf-panier-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ltf-ligne);
  background: transparent; cursor: pointer; color: var(--ltf-noir);
  transition: border-color .25s ease, background-color .25s ease;
}
.ltf-panier-btn:hover { border-color: var(--ltf-or); background: var(--ltf-blanc); }
.ltf-panier-btn svg { width: 20px; height: 20px; }
.ltf-panier-compteur {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--ltf-or); color: #fff;
  font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ltf-ivoire);
}
.ltf-panier-compteur[hidden] { display: none; }

/* ---------- Tiroir panier ---------- */
.ltf-tiroir-fond {
  position: fixed; inset: 0; background: rgba(28,23,16,.5); backdrop-filter: blur(3px);
  z-index: 70; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.ltf-tiroir-fond.ouvert { opacity: 1; pointer-events: auto; }
.ltf-tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 430px; z-index: 71;
  background: var(--ltf-ivoire); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  box-shadow: -20px 0 50px rgba(28,23,16,.16);
}
.ltf-tiroir.ouvert { transform: translateX(0); }
.ltf-tiroir-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 26px 28px; border-bottom: 1px solid var(--ltf-ligne); flex-shrink: 0;
}
.ltf-tiroir-tete h3 { font-size: 24px; }
.ltf-tiroir-fermer { background: none; border: none; cursor: pointer; color: var(--ltf-gris); padding: 6px; display: flex; }
.ltf-tiroir-fermer:hover { color: var(--ltf-noir); }
.ltf-tiroir-fermer svg { width: 20px; height: 20px; }
.ltf-tiroir-corps { flex: 1; overflow-y: auto; padding: 8px 28px; }
.ltf-tiroir-pied { flex-shrink: 0; padding: 22px 28px 26px; border-top: 1px solid var(--ltf-ligne); background: var(--ltf-blanc); }

.ltf-panier-vide { text-align: center; padding: 60px 20px; color: var(--ltf-gris); }
.ltf-panier-vide svg { width: 44px; height: 44px; color: var(--ltf-ligne); margin: 0 auto 16px; }
.ltf-panier-vide p { font-size: 14.5px; font-weight: 300; margin-bottom: 22px; }

.ltf-panier-ligne { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--ltf-ligne); }
.ltf-panier-ligne:last-child { border-bottom: none; }
.ltf-panier-vignette {
  aspect-ratio: 4/5; border-radius: var(--ltf-radius); overflow: hidden;
  background: linear-gradient(165deg, var(--ltf-blanc), var(--ltf-sable));
  border: 1px solid var(--ltf-ligne); display: flex; align-items: center; justify-content: center;
}
.ltf-panier-vignette img { width: 100%; height: 100%; object-fit: cover; }
.ltf-panier-vignette .ltf-flacon { width: 66%; height: 82%; }
.ltf-panier-infos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ltf-panier-infos h4 { font-size: 19px; }
.ltf-panier-pu { font-size: 12.5px; color: var(--ltf-gris); font-weight: 300; }
.ltf-panier-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.ltf-qte { display: inline-flex; align-items: center; border: 1px solid var(--ltf-ligne); border-radius: var(--ltf-radius); background: var(--ltf-blanc); }
.ltf-qte button { width: 30px; height: 30px; border: none; background: none; cursor: pointer; color: var(--ltf-noir); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.ltf-qte button:hover { color: var(--ltf-or-fonce); }
.ltf-qte button:disabled { color: var(--ltf-ligne); cursor: not-allowed; }
.ltf-qte .val { min-width: 30px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.ltf-panier-total-ligne { font-size: 15px; font-weight: 500; white-space: nowrap; }
.ltf-panier-retirer { background: none; border: none; cursor: pointer; padding: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ltf-gris-clair); align-self: flex-start; }
.ltf-panier-retirer:hover { color: var(--ltf-terracotta); }
.ltf-panier-alerte { font-size: 11.5px; color: var(--ltf-terracotta); font-weight: 400; }
.ltf-panier-max { font-size: 11.5px; color: var(--ltf-gris); font-weight: 400; }

.ltf-tiroir-recap { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13.5px; color: var(--ltf-gris); }
.ltf-tiroir-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.ltf-tiroir-total .lab { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ltf-gris); }
.ltf-tiroir-total .val { font-family: var(--ltf-titre); font-size: 30px; color: var(--ltf-noir); }
.ltf-tiroir-mention { text-align: center; font-size: 11.5px; color: var(--ltf-gris-clair); margin-top: 12px; font-weight: 300; }

/* Etapes du tunnel (panier -> coordonnees) */
.ltf-etape { display: none; }
.ltf-etape.active { display: block; }
.ltf-retour {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ltf-gris); padding: 0 0 18px;
}
.ltf-retour:hover { color: var(--ltf-noir); }
.ltf-retour svg { width: 14px; height: 14px; }
.ltf-recap-compact { background: var(--ltf-sable); border-radius: var(--ltf-radius); padding: 14px 16px; margin-bottom: 22px; font-size: 13px; }
.ltf-recap-compact .ligne { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--ltf-gris); }
.ltf-recap-compact .total { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--ltf-or-clair); font-weight: 500; color: var(--ltf-noir); font-size: 15px; }

/* Confirmation de commande */
.ltf-succes { text-align: center; padding: 40px 10px; }
.ltf-succes-icone { width: 62px; height: 62px; border-radius: 50%; background: var(--ltf-sable); color: var(--ltf-or-fonce); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.ltf-succes-icone svg { width: 28px; height: 28px; }
.ltf-succes h3 { font-size: 27px; margin-bottom: 12px; }
.ltf-succes p { font-size: 14.5px; color: var(--ltf-gris); line-height: 1.7; font-weight: 300; margin-bottom: 8px; }
.ltf-succes .num { font-family: var(--ltf-titre); font-size: 21px; color: var(--ltf-or-fonce); margin: 16px 0 22px; }

/* Toast "ajoute au panier" */
.ltf-ajout-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ltf-noir); color: var(--ltf-sable); padding: 14px 24px; border-radius: var(--ltf-radius);
  font-size: 13.5px; z-index: 80; box-shadow: var(--ltf-ombre-hover);
  display: flex; align-items: center; gap: 10px;
}
.ltf-ajout-toast svg { width: 17px; height: 17px; color: var(--ltf-or-clair); }

/* ---------- Modale de commande ---------- */
.ltf-modale-fond { position: fixed; inset: 0; background: rgba(28,23,16,.62); backdrop-filter: blur(3px); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ltf-modale-fond.hidden { display: none; }
.ltf-modale { background: var(--ltf-blanc); border-radius: var(--ltf-radius-lg); max-width: 470px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 40px; }
.ltf-modale-tete { text-align: center; margin-bottom: 28px; }
.ltf-modale-tete .ltf-surtitre { display: block; margin-bottom: 10px; }
.ltf-modale-tete h3 { font-size: 30px; }
.ltf-champ { margin-bottom: 16px; }
.ltf-champ label { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ltf-gris); margin-bottom: 8px; font-weight: 500; }
.ltf-champ input, .ltf-champ textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--ltf-ligne); border-radius: var(--ltf-radius);
  font-size: 14.5px; font-family: inherit; background: var(--ltf-ivoire); color: var(--ltf-encre);
  transition: border-color .25s ease;
}
.ltf-champ input:focus, .ltf-champ textarea:focus { outline: none; border-color: var(--ltf-or); }
.ltf-champ textarea { resize: vertical; min-height: 68px; }
.ltf-recap { background: var(--ltf-sable); border-radius: var(--ltf-radius); padding: 18px 20px; margin-bottom: 22px; }
.ltf-recap-ligne { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ltf-gris); padding: 3px 0; }
.ltf-recap-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 500; color: var(--ltf-noir); padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--ltf-or-clair); }
.ltf-modale-actions { display: flex; gap: 12px; margin-top: 24px; }
.ltf-modale-actions .ltf-btn { flex: 1; }
.ltf-modale-note { text-align: center; font-size: 11.5px; color: var(--ltf-gris-clair); margin-top: 16px; font-weight: 300; }
.ltf-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--ltf-noir); color: var(--ltf-sable); padding: 15px 26px; border-radius: var(--ltf-radius); font-size: 13.5px; z-index: 70; box-shadow: var(--ltf-ombre-hover); }
.ltf-toast.error { background: var(--ltf-terracotta); color: #fff; }

.ltf-vide { text-align: center; color: var(--ltf-gris); font-weight: 300; padding: 40px 0; grid-column: 1/-1; }

/* ---------- WhatsApp flottant ---------- */
.ltf-wa-flottant {
  position: fixed; bottom: 26px; right: 26px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; background: var(--ltf-wa);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37,160,94,.4); transition: transform .25s ease;
}
.ltf-wa-flottant:hover { transform: scale(1.06); }
.ltf-wa-flottant svg { width: 27px; height: 27px; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .ltf-familles { grid-template-columns: repeat(2, 1fr); }
  .ltf-avis-grille { grid-template-columns: 1fr; }
  .ltf-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .ltf-container, .ltf-container-etroit { padding: 0 22px; }
  .ltf-nav { display: none; }
  .ltf-header .ltf-container { height: 72px; }
  .ltf-logo-img { height: 46px; }
  .ltf-hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 54px 0; min-height: 0; }
  .ltf-hero-visuel { min-height: 340px; order: -1; }
  .ltf-hero-flacon { width: 210px; height: 315px; }
  .ltf-hero-photo img { height: 330px; }
  .ltf-hero-sous { max-width: none; }
  .ltf-reassurance-grid { grid-template-columns: repeat(2, 1fr); }
  .ltf-reassurance-item:nth-child(3) { border-left: none; }
  .ltf-reassurance-item:nth-child(n+3) { border-top: 1px solid var(--ltf-ligne); }
  .ltf-section { padding: 70px 0; }
  .ltf-editorial { grid-template-columns: 1fr; gap: 40px; }
  .ltf-editorial-visuel { max-width: 380px; margin: 0 auto; }
  .ltf-vedette-grid { grid-template-columns: 1fr; gap: 44px; padding: 70px 0; }
  .ltf-vedette-visuel { min-height: 320px; order: -1; }
  .ltf-vedette-visuel .ltf-flacon { width: 200px; height: 300px; }
  .ltf-vedette-photo img { height: 320px; }
  .ltf-note { grid-template-columns: 92px 1fr; gap: 16px; }
}
@media (max-width: 620px) {
  .ltf-logo .sub { display: none; }
  .ltf-logo-img { height: 42px; }
  .ltf-footer-logo-img { height: 62px; }
  .ltf-grille { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .ltf-carte h3 { font-size: 20px; }
  .ltf-carte-corps { padding-top: 16px; }
  .ltf-familles { grid-template-columns: 1fr; }
  .ltf-footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .ltf-footer-bas { flex-direction: column; text-align: center; }
  .ltf-modale { padding: 28px 22px; }
  .ltf-annonce { font-size: 10px; letter-spacing: .12em; }
  .ltf-annonce span { margin: 0 8px; }
}