/* Site de Meli · @still.becoming.me24 · version 1 */

@font-face { font-family: "Lora"; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 500; font-display: swap; src: url("../fonts/lora-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 400; font-display: swap; src: url("../fonts/quicksand-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 500; font-display: swap; src: url("../fonts/quicksand-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 700; font-display: swap; src: url("../fonts/quicksand-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Dancing Script"; font-weight: 600; font-display: swap; src: url("../fonts/dancing-script-latin-600-normal.woff2") format("woff2"); }

:root {
  --creme: #F8F1EA;
  --creme-2: #F2E7DC;
  --encre: #343434;
  --doux: #6B625A;
  --terra: #A35F47;
  --terra-b: #8E4F3A;
  --sauge: #68745A;
  --sauge-b: #57624B;
  --sable: #B8916F;
  --blanc: #FFFFFF;
  --ligne: #E3D4C4;
  --rayon: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: "Quicksand", system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }

.wrap { width: min(1100px, 100% - 48px); margin: 0 auto; }

/* ---------- Menu ---------- */
.menu {
  position: sticky; top: 0; z-index: 10;
  background: rgba(248, 241, 234, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ligne);
}
.menu .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.logo { font-family: "Lora", serif; font-size: 26px; text-decoration: none; letter-spacing: .01em; }
.logo span { color: var(--terra); }
.menu nav { display: flex; align-items: center; gap: 26px; }
.menu nav::-webkit-scrollbar { display: none; }
.menu nav a { text-decoration: none; font-size: 15px; white-space: nowrap; color: var(--doux); transition: color .2s; }
.menu nav a:hover { color: var(--terra); }

/* ---------- Éléments communs ---------- */
section { padding: 96px 0; position: relative; }
.eyebrow {
  font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sauge); margin: 0 0 14px;
}
h1, h2, h3 { font-family: "Lora", serif; font-weight: 500; margin: 0; line-height: 1.15; }
h1, h2 { font-weight: 400; }
h1 { font-size: clamp(34px, 5vw, 52px); }
h2 { font-size: clamp(32px, 4.4vw, 46px); }
h3 { font-size: 22px; }
.kw { color: var(--terra); }
.kw-s { color: var(--sauge); }

/* fin trait avec un point à chaque bout */
.rule { position: relative; width: 120px; height: 2px; background: var(--terra); margin: 26px 0 30px; }
.rule::before, .rule::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--terra); }
.rule::before { left: -5px; } .rule::after { right: -5px; }
.center { text-align: center; }
.center .rule { margin-left: auto; margin-right: auto; }
.intro { max-width: 640px; color: var(--doux); font-size: 18px; }
.center .intro { margin-left: auto; margin-right: auto; }

.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.center .btns, .btns.center { justify-content: center; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px;
  padding: 15px 30px; border-radius: 999px; border: 2px solid var(--terra);
  transition: background .2s, color .2s, transform .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn.plein { background: var(--terra); color: var(--blanc); }
.btn.plein:hover { background: var(--terra-b); border-color: var(--terra-b); }
.btn.vide { color: var(--terra); }
.btn.vide:hover { background: var(--terra); color: var(--blanc); }
.btn.sauge { background: var(--sauge); border-color: var(--sauge); color: var(--blanc); }
.btn.sauge:hover { background: var(--sauge-b); border-color: var(--sauge-b); }

.manuscrit { font-family: "Dancing Script", cursive; font-weight: 600; color: var(--terra); }
.petit { font-size: 13.5px; color: var(--doux); line-height: 1.55; }
.fort { font-weight: 700; color: var(--sauge-b); }

/* éléments à compléter (version de travail) */
.todo {
  display: inline-block; font-weight: 700; font-size: .9em; color: var(--terra-b);
  background: #F3E3D6; border: 1px dashed var(--sable); border-radius: 999px; padding: 0 12px;
}

/* ---------- Arches (formes « demi miroir ») ---------- */
.arche {
  border-radius: 999px 999px 18px 18px;
  overflow: hidden; position: relative;
}
.arche.photo {
  background: linear-gradient(170deg, #E9D8C8 0%, #D9C1AB 100%);
  display: grid; place-items: center; text-align: center; color: var(--terra-b);
  font-weight: 700; font-size: 14px; letter-spacing: .06em;
}
.arche.photo img { width: 100%; height: 100%; object-fit: cover; }
.arche-ligne {
  position: absolute; border: 1px solid var(--sable); opacity: .45;
  border-radius: 999px 999px 0 0; border-bottom: 0; pointer-events: none;
}

/* ---------- 1. Accueil ---------- */
.accueil { padding: 72px 0 96px; overflow: hidden; }
.accueil .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.accueil .texte p.intro { margin-top: 0; }
.accueil .visuel { position: relative; justify-self: center; width: min(400px, 100%); }
.accueil .visuel .arche.photo { aspect-ratio: 4 / 5.2; }
.accueil .visuel .arche-ligne { inset: -22px -22px 40% -22px; }
.pastille {
  position: absolute; left: -38px; top: 90px;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--sauge); color: var(--blanc);
  display: grid; place-items: center; text-align: center;
  font-family: "Lora", serif; font-size: 19px; line-height: 1.15;
  box-shadow: 0 10px 26px rgba(87, 98, 75, .25);
  transform: rotate(-8deg);
}
.pastille b { display: block; font-size: 30px; font-weight: 500; }
.accueil .manuscrit { text-align: center; font-size: 25px; margin-top: 22px; line-height: 1.3; }

/* ---------- 2. Mon histoire ---------- */
.histoire { background: var(--blanc); }
.histoire .grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.histoire .arche.photo { aspect-ratio: 3 / 4; position: sticky; top: 110px; }
.histoire .recit p { color: var(--encre); }
.citation {
  margin: 34px 0 0; padding: 26px 30px; border-left: 3px solid var(--sauge);
  background: var(--creme); border-radius: 0 var(--rayon) var(--rayon) 0;
  font-weight: 700; color: var(--sauge-b); font-size: 19px; line-height: 1.55;
}
.valeurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 64px; }
.valeur { text-align: center; padding: 34px 26px 28px; border: 1px solid var(--ligne); border-radius: 999px 999px var(--rayon) var(--rayon); }
.valeur .num { font-family: "Lora", serif; font-size: 34px; color: var(--terra); line-height: 1; margin-bottom: 14px; }
.valeur h3 { font-size: 20px; margin-bottom: 10px; }
.valeur p { margin: 0; font-size: 15.5px; color: var(--doux); }

/* ---------- 3. Accompagnement ---------- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 56px 0 0; padding: 0; list-style: none; }
.etape { background: var(--blanc); border-radius: var(--rayon); padding: 32px 28px 30px; }
.etape .num { font-family: "Lora", serif; font-size: 48px; color: var(--terra); line-height: 1; }
.etape h3 { margin: 16px 0 10px; font-size: 21px; }
.etape p { margin: 0; font-size: 15.5px; color: var(--doux); }
.bientot {
  margin: 34px auto 0; max-width: 640px; text-align: center;
  border: 1px dashed var(--sauge); border-radius: 999px; padding: 14px 26px; color: var(--sauge-b);
}
.bientot b { font-weight: 700; }
.accompagnement .petit { max-width: 560px; margin: 22px auto 0; text-align: center; }

/* ---------- 4. Mes packs ---------- */
.packs { background: var(--creme-2); }
.cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.carte { background: var(--blanc); border-radius: var(--rayon); padding: 14px 14px 24px; display: flex; flex-direction: column; }
.carte .arche.photo { aspect-ratio: 1 / 1; font-size: 12px; }
.carte .corps { padding: 20px 8px 0; display: flex; flex-direction: column; flex: 1; }
.carte h3 { font-size: 21px; }
.carte .contenu { font-size: 14px; color: var(--sauge-b); font-weight: 700; margin: 8px 0 10px; line-height: 1.45; }
.carte .phrase { font-size: 15px; color: var(--doux); flex: 1; }
.carte .prix { font-family: "Lora", serif; font-size: 22px; margin: 6px 0 16px; }
.carte .btn { text-align: center; padding: 12px 18px; font-size: 15px; }
.encart {
  margin: 44px auto 0; max-width: 760px; text-align: center; background: var(--blanc);
  border-radius: var(--rayon); padding: 22px 30px;
}
.encart p { margin: 0; }
.packs .petit.center { max-width: 640px; margin: 26px auto 0; }

/* ---------- 5. Rejoindre l'équipe ---------- */
.equipe { background: var(--sauge); color: var(--creme); overflow: hidden; }
.equipe .eyebrow { color: #DCE2D2; }
.equipe .kw { color: #F3D9CC; }
.equipe .rule, .equipe .rule::before, .equipe .rule::after { background: #F3D9CC; }
.equipe .intro { color: #EEF0E8; }
.equipe .arche-ligne { border-color: var(--creme); opacity: .18; }
.atouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.atout { border: 1px solid rgba(248, 241, 234, .35); border-radius: 999px 999px var(--rayon) var(--rayon); padding: 40px 28px 30px; text-align: center; }
.atout .gros { font-family: "Lora", serif; font-size: 40px; line-height: 1; margin-bottom: 14px; color: #F3D9CC; }
.atout h3 { font-size: 21px; margin-bottom: 10px; }
.atout p { margin: 0; font-size: 15.5px; color: #EEF0E8; }
.demarrer { max-width: 620px; margin: 56px auto 0; padding: 0; list-style: none; counter-reset: e; }
.demarrer li { counter-increment: e; display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; margin-bottom: 18px; }
.demarrer li::before {
  content: counter(e); width: 46px; height: 46px; border-radius: 50%; background: var(--creme); color: var(--sauge-b);
  display: grid; place-items: center; font-family: "Lora", serif; font-size: 21px;
}
.demarrer li p { margin: 9px 0 0; }
.bloom { text-align: center; margin-top: 46px; }
.bloom .nom { font-family: "Lora", serif; font-size: 34px; letter-spacing: .01em; }
.bloom .devise { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; color: #DCE2D2; }
.bloom .fr { font-size: 14.5px; color: #DCE2D2; margin-top: 4px; }
.equipe .btn.vide { border-color: var(--creme); color: var(--creme); }
.equipe .btn.vide:hover { background: var(--creme); color: var(--sauge-b); }
.equipe .btn.plein { background: var(--creme); border-color: var(--creme); color: var(--sauge-b); }
.equipe .petit { color: #DCE2D2; max-width: 620px; margin: 24px auto 0; text-align: center; }
.equipe .todo { background: rgba(255,255,255,.15); color: var(--creme); border-color: rgba(255,255,255,.55); }

/* ---------- 6. Contact ---------- */
.contact .reseaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.contact .manuscrit { font-size: 30px; margin-top: 40px; }

/* ---------- Bas de page ---------- */
footer { border-top: 1px solid var(--ligne); padding: 34px 0 40px; text-align: center; font-size: 14px; color: var(--doux); }
footer .sig { font-weight: 700; color: var(--encre); margin-bottom: 8px; font-size: 15px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--terra); }
footer .sep { margin: 0 10px; color: var(--sable); }

/* ---------- Page mentions légales ---------- */
.legal { padding: 72px 0 96px; }
.legal .wrap { max-width: 760px; }
.legal dl { margin: 40px 0 0; }
.legal dt { font-family: "Lora", serif; font-size: 20px; margin-top: 28px; }
.legal dd { margin: 6px 0 0; color: var(--doux); }

/* ---------- Téléphone ---------- */
@media (max-width: 900px) {
  .cartes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 68px 0; }
  .accueil { padding: 44px 0 64px; }
  .accueil .wrap, .histoire .grille { grid-template-columns: 1fr; gap: 44px; }
  .accueil .visuel { width: min(290px, 74%); }
  .pastille { width: 104px; height: 104px; font-size: 15.5px; left: -22px; top: 70px; }
  .pastille b { font-size: 25px; }
  .histoire .arche.photo { position: relative; top: auto; width: min(300px, 80%); margin: 0 auto; }
  .valeurs, .etapes, .atouts { grid-template-columns: 1fr; gap: 16px; }
  .cartes { grid-template-columns: 1fr; }
  .carte .arche.photo { aspect-ratio: 16 / 11; }
  .equipe .arche-ligne { display: none; }
  .btn { width: 100%; text-align: center; }
  .btns { gap: 12px; }
  .encart { border-radius: var(--rayon); }
}

/* ---------- Packs : onglets par catégorie ---------- */
.onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 44px; }
.onglet {
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  padding: 11px 24px; border-radius: 999px; border: 2px solid var(--terra);
  background: transparent; color: var(--terra); transition: background .2s, color .2s;
}
.onglet:hover { background: rgba(163, 95, 71, .08); }
.onglet.actif { background: var(--terra); color: var(--blanc); }
.groupe { margin-top: 36px; }
.groupe-titre { text-align: center; font-size: 26px; }
.js .groupe-titre { display: none; }
.groupe .cartes { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 0; }
.groupe .carte { width: 262px; }
.js .onglets { display: flex; }
html:not(.js) .onglets { display: none; }
@media (max-width: 760px) {
  .onglets { gap: 8px; margin-top: 32px; }
  .js .onglets { display: grid; grid-template-columns: 1fr 1fr; }
  .onglet { padding: 9px 16px; font-size: 14px; }
  .groupe .carte { width: 100%; }
}

/* ---------- Pages sans rechargement ---------- */
.js .page.entree { animation: entree .45s ease both; }
@keyframes entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.menu nav a.actif { color: var(--terra); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.js main { min-height: calc(100vh - 84px - 120px); }
.js .accueil { padding-bottom: 40px; }

/* Accueil : par où commencer */
.accueil-suite { padding: 40px 0 96px; }
.raccourcis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 10px; }
.raccourci {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
  padding: 36px 20px 24px; border: 1px solid var(--ligne); background: rgba(255,255,255,.55);
  border-radius: 999px 999px var(--rayon) var(--rayon); transition: background .2s, transform .2s, border-color .2s;
}
.raccourci:hover { background: var(--blanc); border-color: var(--sable); transform: translateY(-3px); }
.raccourci .num { font-family: "Lora", serif; font-size: 26px; color: var(--terra); line-height: 1; margin-bottom: 6px; }
.raccourci b { font-family: "Lora", serif; font-weight: 500; font-size: 20px; }
.raccourci span:not(.num) { font-size: 14.5px; color: var(--doux); line-height: 1.5; }
.raccourci i { font-style: normal; font-weight: 700; font-size: 14px; color: var(--sauge-b); margin-top: 8px; }
.raccourci i::after { content: " \2192"; }
.legal h2 { font-size: clamp(34px, 5vw, 48px); }
@media (max-width: 760px) {
  .raccourcis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .raccourci { padding: 28px 12px 18px; }
  .raccourci b { font-size: 17px; }
  .raccourci span:not(.num) { font-size: 13px; }
  .js main { min-height: 0; }
}

/* ---------- Sous-menu des packs (au survol, sur ordinateur) ---------- */
.deroulant { position: relative; }
.lien-packs { text-decoration: none; font-size: 15px; white-space: nowrap; color: var(--doux); transition: color .2s; }
.lien-packs::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.lien-packs:hover, .deroulant:hover .lien-packs { color: var(--terra); }
.lien-packs.actif { color: var(--terra); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.sous-menu {
  position: absolute; top: 100%; left: 50%; padding-top: 22px; z-index: 20;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.deroulant:hover .sous-menu, .deroulant:focus-within .sous-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sm-boite {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 20px; padding: 12px;
  box-shadow: 0 18px 40px rgba(80, 50, 30, .12); display: flex; flex-direction: column; min-width: 200px;
}
.sous-menu a { text-decoration: none; font-size: 15px; color: var(--encre); white-space: nowrap; padding: 9px 16px; border-radius: 12px; transition: color .15s, background .15s; }
.sous-menu a:hover { color: var(--terra); background: var(--creme); }

/* pack visé depuis le sous-menu */
.carte.vise { animation: vise 1.8s ease; }
@keyframes vise { 0%, 100% { box-shadow: 0 0 0 0 rgba(163, 95, 71, 0); } 25%, 60% { box-shadow: 0 0 0 3px var(--terra), 0 14px 30px rgba(163, 95, 71, .2); } }

/* ---------- Menu sur téléphone et tablette ---------- */
.burger { display: none; }
@media (max-width: 1100px) {
  .menu { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--creme); }
  .menu .wrap { height: 78px; }
  .burger {
    display: grid; place-items: center; width: 46px; height: 46px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; border-radius: 50%;
  }
  .burger span { display: block; width: 24px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .25s, opacity .2s; grid-area: 1 / 1; }
  .burger span:nth-child(1) { transform: translateY(-7px); }
  .burger span:nth-child(3) { transform: translateY(7px); }
  .menu.ouvert .burger span:nth-child(1) { transform: rotate(45deg); }
  .menu.ouvert .burger span:nth-child(2) { opacity: 0; }
  .menu.ouvert .burger span:nth-child(3) { transform: rotate(-45deg); }

  .menu nav {
    position: fixed; left: 0; right: 0; top: 78px; bottom: 0; z-index: 30;
    background: var(--creme); border-top: 1px solid var(--ligne);
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px;
    padding: 36px 24px 48px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .menu.ouvert nav { opacity: 1; visibility: visible; transform: none; }
  .menu nav > a, .menu .lien-packs { font-family: "Lora", serif; font-size: 27px; color: var(--encre); padding: 9px 0; display: block; text-align: center; }
  .menu nav > a.actif, .menu .lien-packs.actif { color: var(--encre); text-decoration: none; }
  .lien-packs::after { display: none; }
  .deroulant { display: flex; flex-direction: column; align-items: center; }
  .menu .sous-menu, .menu .deroulant:hover .sous-menu, .menu .deroulant:focus-within .sous-menu {
    position: static; opacity: 1; visibility: inherit; transform: none; padding: 2px 0 10px;
  }
  .menu .sm-boite { background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(250px, 100%); }
  .menu .sous-menu a { text-align: center; }
  .menu .sous-menu a {
    padding: 5px 10px; border: 1px solid var(--terra); border-radius: 999px; background: none;
    color: var(--terra); font-size: 12.5px; font-weight: 700; line-height: 1.3;
  }
  body.menu-ouvert { overflow: hidden; }
}

/* ---------- Ajustements tablette et petits écrans ---------- */
@media (min-width: 961px) {
  .groupe .carte { width: min(262px, calc((100% - 40px) / 3)); }
}
@media (min-width: 761px) and (max-width: 960px) {
  .groupe .carte { width: min(300px, calc((100% - 20px) / 2)); }
}
@media (max-width: 900px) {
  .raccourcis { grid-template-columns: 1fr 1fr; }
  .accueil .wrap { grid-template-columns: 1fr; gap: 48px; }
  .accueil .visuel { width: min(340px, 74%); }
  .accueil .texte { max-width: 640px; }
}
@media (max-width: 760px) {
  .accueil .manuscrit { font-size: 21px; }
  .raccourci i { white-space: nowrap; font-size: 13px; }
  footer .sep { display: none; }
  footer .liens > * { display: block; margin: 2px 0; }
  footer .liens .sep { display: none; }
}

/* ---------- Version 6 : vidéo, témoignages, FAQ, bouton fixe, langues, animations ---------- */
.etapes, .demarrer { text-align: left; }
sup { font-size: .5em; line-height: 0; }

/* Langues */
.langues { display: flex; align-items: center; gap: 6px; margin-left: 4px; padding-left: 18px; border-left: 1px solid var(--ligne); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.langues a { text-decoration: none; color: var(--doux); padding: 4px 2px; }
.langues a.actif { color: var(--terra); }
.langues span { color: var(--sable); }

/* Vidéo de bienvenue */
.bienvenue { padding: 24px 0 72px; }
.bienvenue .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.video-cadre { justify-self: center; width: min(300px, 100%); }
.arche.video {
  aspect-ratio: 9 / 16; border-radius: 999px 999px 22px 22px;
  background: linear-gradient(170deg, #E3D2C1 0%, #CDB098 100%);
  display: grid; place-items: center; align-content: center; gap: 16px;
  color: var(--terra-b); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-align: center;
}
.arche.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lecture { width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.85); position: relative; box-shadow: 0 8px 24px rgba(80,50,30,.15); }
.lecture::after { content: ""; position: absolute; left: 27px; top: 21px; border-left: 20px solid var(--terra); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.bienvenue .manuscrit { font-size: 26px; margin: 6px 0 0; }

/* Témoignages */
.temoignages { margin-top: 96px; }
.avis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; }
.temoin { margin: 0; background: var(--blanc); border-radius: var(--rayon); padding: 52px 32px 28px; position: relative; text-align: left; }
.temoin::before { content: "\201C"; position: absolute; top: 4px; left: 24px; font-family: "Lora", serif; font-size: 80px; line-height: 1; color: var(--terra); opacity: .25; }
.temoin blockquote { margin: 0 0 18px; font-size: 17px; line-height: 1.6; }
.temoin figcaption { font-size: 14px; color: var(--doux); }
.temoin figcaption b { display: block; font-family: "Lora", serif; font-weight: 500; font-size: 18px; color: var(--encre); }
.temoignages .petit.center { margin-top: 20px; }

/* FAQ */
.faq-zone { margin-top: 96px; }
.faq { max-width: 760px; margin: 0 auto; text-align: left; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 4px; font-family: "Lora", serif; font-size: 19px; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--terra);
  background: linear-gradient(var(--terra), var(--terra)) center / 11px 2px no-repeat,
              linear-gradient(var(--terra), var(--terra)) center / 2px 11px no-repeat;
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--terra); }
.faq details p { margin: 0 4px 22px; color: var(--doux); max-width: 640px; }
.faq-sombre { margin-top: 56px; }
.faq-sombre details { border-color: rgba(248, 241, 234, .3); }
.faq-sombre summary:hover { color: #F3D9CC; }
.faq-sombre summary::after { border-color: #F3D9CC; background: linear-gradient(#F3D9CC, #F3D9CC) center / 11px 2px no-repeat, linear-gradient(#F3D9CC, #F3D9CC) center / 2px 11px no-repeat; }
.faq-sombre details p { color: #EEF0E8; }

@media (max-width: 760px) {
  .bienvenue .wrap { grid-template-columns: 1fr; gap: 36px; }
  .video-cadre { width: min(240px, 70%); }
  .bienvenue .texte { text-align: center; order: -1; }
  .bienvenue .rule { margin-left: auto; margin-right: auto; }
  .avis { grid-template-columns: 1fr; }
  .temoignages, .faq-zone { margin-top: 72px; }
  .faq summary { font-size: 17px; padding: 18px 2px; }
}
@media (max-width: 1100px) {
  .langues { border-left: 0; padding-left: 0; margin: 22px 0 0; font-size: 15px; gap: 10px; }
  .langues a { padding: 8px 6px; }
}

/* Animations douces */
.anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease, box-shadow .3s ease; }
.anim .reveal.vu { opacity: 1; transform: none; }
.carte, .etape, .valeur, .atout { transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) {
  .carte:hover, .etape:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(80, 50, 30, .10); }
  .btn.plein:hover { box-shadow: 0 8px 20px rgba(142, 79, 58, .25); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[lang="en"] .bloom .fr { display: none; }

/* ---------- let's bloom. (présentation de l'équipe, avec son logo et sa typographie) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
:root { --olive: #4B4F22; --rose: #E9C3B7; --rose-doux: #FDF4EF; }
.bloom-page { background: var(--rose-doux); overflow: hidden; }
.bloom-page .wrap { max-width: 920px; position: relative; }
.bloom-tete { text-align: center; }
.bloom-logo { width: min(340px, 78%); height: auto; margin: 0 auto; }
.bloom-devise { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: clamp(20px, 2.6vw, 25px); color: var(--encre); margin: 16px 0 0; }
.bloom-trait { width: 200px; height: 1px; background: var(--terra); opacity: .5; margin: 28px auto 0; }
.bloom-bloc { padding: 38px 0; border-bottom: 1px solid #EAD3C8; }
.bloom-bloc p { margin: 0; font-size: 17px; line-height: 1.75; }
.bloom-titre {
  display: flex; align-items: center; gap: 22px; margin: 0 0 18px;
  font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .22em; text-transform: uppercase; color: var(--olive);
}
.bloom-titre::after { content: ""; flex: 1; height: 1px; background: #E2C8BC; }
.bloom-titre-centre::before { content: ""; flex: 1; height: 1px; background: #E2C8BC; }
.bloom-histoire { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: center; }
.bloom-histoire-gauche .bloom-titre::after { display: none; }
.bloom-histoire > p { border-left: 1px solid #E2C8BC; padding-left: 36px; }
.bloom-carte { width: 100%; max-width: 230px; height: auto; display: block; }
.bloom-unit { text-align: center; }
.bloom-pinceau {
  display: inline-block; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
  font-size: clamp(22px, 3vw, 30px) !important; line-height: 1.3 !important; color: var(--encre);
  padding: 16px 40px; background: linear-gradient(100deg, rgba(233,195,183,.25), rgba(233,195,183,.6) 12%, rgba(233,195,183,.55) 88%, rgba(233,195,183,.2));
  border-radius: 46% 54% 48% 52% / 62% 46% 54% 38%;
}
.bloom-piliers { border-bottom: 0; }
.piliers { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 26px; }
.pilier { text-align: center; padding: 6px 12px; border-left: 1px solid #EAD3C8; }
.pilier:first-child { border-left: 0; }
.pilier-icone { width: 46px; height: 46px; margin: 0 auto 12px; display: block; }
.pilier-icone.t { color: #C98D78; }
.pilier-icone.s { color: var(--olive); }
.pilier h4 { margin: 0 0 10px; font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--olive); line-height: 1.35; }
.pilier p { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--doux); }
.bloom-manuscrit { text-align: center; font-family: "Dancing Script", cursive; font-weight: 600; font-size: clamp(24px, 3vw, 32px); color: var(--olive); margin: 30px 0 0; }
.equipe-fin { background: var(--creme); }
@media (max-width: 900px) {
  .piliers { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .pilier:nth-child(4) { border-left: 0; }
}
@media (max-width: 760px) {
  .bloom-histoire { grid-template-columns: 1fr; gap: 18px; }
  .bloom-histoire > p { border-left: 0; padding-left: 0; }
  .bloom-carte { margin: 0 auto; max-width: 200px; }
  .bloom-pinceau { padding: 14px 22px; }
  .piliers { grid-template-columns: 1fr 1fr; }
  .pilier { border-left: 0; padding: 4px 6px; }
  .bloom-bloc p { font-size: 16px; }
  .bloom-titre { font-size: 15px; letter-spacing: .18em; }
}
.bloom-fleur { position: absolute; top: 0; right: 0; width: clamp(96px, 18vw, 240px); height: auto; pointer-events: none; z-index: 0; }
.bloom-page .wrap { z-index: 1; }
@media (max-width: 760px) { .bloom-page { padding-top: 76px; } }

/* ---------- Choix de la personne (Meli · Sophie) ---------- */
.personnes { display: flex; align-items: baseline; gap: 16px; }
.personnes .logo { color: var(--doux); opacity: .6; transition: opacity .2s, color .2s; }
.personnes .logo:hover { opacity: 1; color: var(--encre); }
.personnes .logo.actif { color: var(--encre); opacity: 1; }
.personnes .logo + .logo { padding-left: 16px; border-left: 1px solid var(--ligne); }
@media (max-width: 400px) {
  .personnes { gap: 12px; }
  .personnes .logo { font-size: 23px; }
  .personnes .logo + .logo { padding-left: 12px; }
}

/* Espace entre un bouton et la petite mention en dessous (partout) */
.btns + .petit { margin-top: 24px; }
.equipe-fin .petit { max-width: 620px; margin-left: auto; margin-right: auto; }

/* Vraies photos dans les arches */
.arche.photo picture { position: absolute; inset: 0; }
.arche.photo picture img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 25%; }

/* Accueil : logo let's bloom. au-dessus du surtitre, pastille en bas de la photo */
.hero-bloom { display: inline-block; margin-bottom: 18px; }
.hero-bloom img { height: 84px; width: auto; display: block; }
.accueil .cadre { position: relative; }
.accueil .cadre .pastille { top: auto; bottom: 36px; }
@media (max-width: 760px) {
  .hero-bloom img { height: 68px; }
  .accueil .cadre .pastille { top: auto; bottom: 6px; }
}

/* ---------- Offres du moment ---------- */
.bandeau { background: var(--sauge-b); text-align: center; padding: 9px 16px; font-size: 14px; line-height: 1.4; }
.bandeau a { color: var(--creme); text-decoration: none; }
.bandeau a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bandeau b { font-weight: 700; }
.offres { background: var(--creme); }
.offre-groupe { margin-top: 10px; }
.offre-tete { margin-bottom: 40px; }
.offre-badge {
  display: inline-block; margin: 0 0 14px; padding: 6px 16px; border-radius: 999px;
  background: var(--terra); color: var(--blanc); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.offre-titre { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 14px; }
.offre-groupe .cartes { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.offre-groupe .carte { width: min(262px, calc((100% - 40px) / 3)); }
.carte .pour { margin: 0 0 4px; font-size: 14px; color: var(--doux); }
.contenu-liste { list-style: none; margin: 10px 0 12px; padding: 0; font-size: 14px; color: var(--encre); line-height: 1.45; }
.contenu-liste li { position: relative; padding-left: 16px; margin: 4px 0; }
.contenu-liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); }
.contenu-liste li:last-child { color: var(--sauge-b); font-weight: 700; }
.question-offre { font-family: "Dancing Script", cursive; font-weight: 600; font-size: 30px; color: var(--terra); margin: 72px 0 0; }
.offres-vide { max-width: 560px; margin: 0 auto; color: var(--doux); }
@media (min-width: 761px) and (max-width: 960px) {
  .offre-groupe .carte { width: min(300px, calc((100% - 20px) / 2)); }
}
@media (max-width: 760px) {
  .offre-groupe .carte { width: 100%; }
  .bandeau { font-size: 13px; padding: 8px 14px; }
}

/* Offre en vedette (ex. calendrier de l'Avent) */
.vedette { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; max-width: 860px; margin: 0 auto 44px; background: var(--blanc); border-radius: var(--rayon); padding: 22px 40px 22px 22px; }
.vedette .arche.photo { aspect-ratio: 4 / 5; }
.vedette h3 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 12px; }
.vedette-texte p { margin: 0 0 12px; }
.vedette .prix { font-family: "Lora", serif; font-size: 24px; }
.vedette .btn { margin: 4px 0 14px; }
.offre-badge-s { background: var(--sauge); font-size: 12px; }
@media (max-width: 760px) {
  .vedette { grid-template-columns: 1fr; gap: 22px; padding: 14px 14px 24px; text-align: center; }
  .vedette .arche.photo { aspect-ratio: 16 / 11; }
  .vedette-texte { padding: 0 8px; }
}

/* Offres : page de choix et pages d'offre */
.choix-offres { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 10px; }
.choix-offre {
  width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none;
  background: var(--blanc); border-radius: var(--rayon); padding: 16px 16px 26px; transition: transform .3s ease, box-shadow .3s ease;
}
.choix-offre .arche.photo { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 10px; }
.choix-offre .offre-badge { margin: 0; }
.choix-offre b { font-family: "Lora", serif; font-weight: 500; font-size: 24px; margin-top: 4px; }
.choix-offre span:not(.offre-badge) { color: var(--doux); font-size: 15px; }
.choix-offre i { font-style: normal; font-weight: 700; font-size: 14px; color: var(--terra); margin-top: 6px; }
.choix-offre i::after { content: " \2192"; }
@media (hover: hover) { .choix-offre:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(80, 50, 30, .10); } }
.retour { display: inline-block; margin-bottom: 28px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--terra); }
.retour::before { content: "\2190  "; }
.retour:hover { text-decoration: underline; text-underline-offset: 3px; }
.offre-page .offre-tete h2 { margin-top: 4px; }
.offre-page .cartes { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.offre-page .carte { width: min(262px, calc((100% - 40px) / 3)); }
.offre-terminee { max-width: 560px; margin: 20px auto 0; color: var(--doux); }
@media (min-width: 761px) and (max-width: 960px) { .offre-page .carte { width: min(300px, calc((100% - 20px) / 2)); } }
@media (max-width: 760px) {
  .offre-page .carte { width: 100%; }
  .choix-offre .arche.photo { aspect-ratio: 16 / 11; }
}

/* Images des offres */
.offre-banniere { display: block; max-width: 1000px; margin: 0 auto 44px; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 18px 40px rgba(80, 50, 30, .14); }
.offre-banniere img { display: block; width: 100%; height: auto; }
.arche.photo.produit { background: linear-gradient(170deg, #F4EAE0 0%, #E8D7C6 100%); }
.arche.photo.produit picture img { object-fit: contain; object-position: center 70%; padding: 34px 18px 14px; filter: drop-shadow(0 10px 14px rgba(80, 50, 30, .18)); }

/* Prix boutique et prix inscrites (-30 %) */
.carte .prix { margin-bottom: 4px; }
.prix-fi { margin: 0 0 16px; font-size: 15px; color: var(--sauge-b); font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.prix-fi .moins { background: var(--sauge); color: var(--blanc); border-radius: 999px; padding: 2px 9px; font-size: 12px; letter-spacing: .04em; }
.prix-fi small { font-weight: 500; font-size: 13px; color: var(--doux); }
.info-fi { max-width: 620px; margin: 18px auto 0; background: var(--blanc); border-radius: 16px; padding: 14px 20px; font-size: 15px; }
.info-fi b { color: var(--sauge-b); }

/* L'équipe : deux façons de s'inscrire */
.deux-voies { margin-top: 48px; }
.deux-voies-titre { font-family: "Lora", serif; font-size: clamp(24px, 3vw, 30px); margin: 0 0 24px; }
.voies { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
.voie { background: var(--creme); color: var(--encre); border-radius: var(--rayon); padding: 30px 30px 26px; }
.voie-tag { display: inline-block; margin: 0 0 12px; padding: 4px 14px; border-radius: 999px; background: var(--terra); color: var(--blanc); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.voie:nth-child(2) .voie-tag { background: var(--sauge-b); }
.voie h3 { font-size: 23px; margin-bottom: 10px; }
.voie > p:not(.voie-tag) { color: var(--doux); font-size: 15.5px; margin-bottom: 14px; }
.voie ul { list-style: none; margin: 0; padding: 0; }
.voie li { position: relative; padding-left: 26px; margin: 8px 0; font-size: 15px; font-weight: 500; }
.voie li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 12px; height: 7px; border-left: 2px solid var(--sauge-b); border-bottom: 2px solid var(--sauge-b); transform: rotate(-45deg); }
.voie .todo { background: #F3E3D6; color: var(--terra-b); border-color: var(--sable); }
.voies-note { margin: 22px auto 0; max-width: 620px; color: #EEF0E8; font-size: 15.5px; }
@media (max-width: 760px) {
  .voies { grid-template-columns: 1fr; gap: 16px; }
  .voie { padding: 24px 22px 20px; }
}
.voies-note b { color: var(--creme); }

/* ---------- Noël : bandeau festif et bloc sur l'accueil ---------- */
:root { --noel: #560A1D; --noel-clair: #F3D9CC; }
.bandeau { background: var(--noel); display: flex; justify-content: center; align-items: center; gap: 14px; }
.bandeau[hidden] { display: none; }
.bandeau a { color: #FBF1EA; }
.scintille { color: var(--noel-clair); font-size: 12px; animation: scintille 2.4s ease-in-out infinite; }
.scintille.s2 { animation-delay: 1.2s; }
@keyframes scintille { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }

.noel-accueil { padding: 0; }
.noel-carte {
  position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--noel); color: #FBF1EA;
  min-height: 400px; display: flex; align-items: center; margin: 8px 0 40px; box-shadow: 0 22px 46px rgba(86, 10, 29, .25);
}
.noel-fond { position: absolute; inset: 0; }
.noel-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
.noel-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(86,10,29,.96) 0%, rgba(86,10,29,.85) 34%, rgba(86,10,29,0) 62%); pointer-events: none; }
.noel-texte { position: relative; z-index: 1; max-width: 460px; padding: 44px 0 44px 52px; }
.noel-texte h2 { color: #FBF1EA; margin: 10px 0 14px; }
.noel-texte h2 .kw { color: var(--noel-clair); }
.noel-texte p { color: #F1DFD8; margin: 0; font-size: 17px; }
.noel-texte .offre-badge { background: var(--noel-clair); color: var(--noel); margin: 0; }
.noel-etoiles { letter-spacing: .6em; color: var(--noel-clair) !important; font-size: 13px !important; margin-bottom: 14px !important; }
.btn.creme { background: #FBF1EA; border-color: #FBF1EA; color: var(--noel); }
.btn.creme:hover { background: #fff; }
.btn.vide-creme { border-color: rgba(251, 241, 234, .7); color: #FBF1EA; }
.btn.vide-creme:hover { background: rgba(251, 241, 234, .12); }
.noel-texte .btns .btn[hidden] { display: none; }
@media (max-width: 960px) {
  .noel-carte { flex-direction: column; align-items: stretch; min-height: 0; }
  .noel-fond { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .noel-fond img { object-position: 78% 50%; }
  .noel-carte::after { background: linear-gradient(180deg, rgba(86,10,29,0) 35%, rgba(86,10,29,1) 62%); }
  .noel-texte { max-width: none; padding: 0 24px 28px; margin-top: -40px; text-align: center; }
  .noel-texte .btns { justify-content: center; }
  .bandeau { gap: 8px; }
}
/* Noël : l'image occupe la droite de la carte sur ordinateur */
@media (min-width: 961px) {
  .noel-fond { left: 36%; }
  .noel-fond img { object-position: 50% 50%; }
  .noel-carte::after { background: linear-gradient(90deg, var(--noel) 0%, var(--noel) 36%, rgba(86,10,29,.0) 52%); }
  .noel-texte { max-width: 520px; }
}
@media (max-width: 960px) {
  .noel-etoiles { display: none; }
  .noel-texte { margin-top: -18px; }
}
@media (min-width: 761px) and (max-width: 960px) { .noel-fond { aspect-ratio: 2 / 1; } .noel-texte { padding: 0 48px 36px; } }
.avent-accroche { font-family: "Lora", serif; font-size: 20px; color: var(--terra-b); margin-bottom: 10px !important; }
.avent-liste { margin: 4px 0 16px; font-size: 15px; }
.avent-liste li:last-child { color: var(--encre); font-weight: 500; }
.offre-banniere img[src*="avent-bandeau"] { aspect-ratio: 1159 / 395; object-fit: cover; }
@media (max-width: 760px) { .vedette .avent-liste { display: inline-block; text-align: left; } }

/* ---------- Bouton Retour : petit, sous les prénoms, dans l'en-tête (ne recouvre jamais le contenu) ---------- */
.gauche { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-right: auto; }
.gauche .personnes { line-height: 1.1; }
.btn-retour {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  height: 22px; padding: 0 9px 0 7px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--blanc);
  font-weight: 700; font-size: 12px; line-height: 1; color: var(--terra-b); transition: border-color .2s;
}
.btn-retour::before { content: "\2190"; font-size: 13px; line-height: 1; }
.btn-retour:hover { border-color: var(--terra); }
.btn-retour[hidden] { display: inline-flex; visibility: hidden; }

/* ---------- Formulaire du bilan ---------- */
.form-bilan { max-width: 640px; margin: 40px auto 0; background: var(--blanc); border-radius: var(--rayon); padding: 34px 34px 26px; display: grid; gap: 18px; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.champ > span, .champ legend { font-weight: 700; font-size: 14px; color: var(--encre); }
.champ legend small { font-weight: 500; color: var(--doux); }
.champ input, .champ select, .champ textarea, .apercu-texte {
  font: inherit; font-size: 16px; color: var(--encre); background: var(--creme); width: 100%;
  border: 1px solid var(--ligne); border-radius: 14px; padding: 12px 14px; transition: border-color .2s, background .2s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--terra); background: var(--blanc); }
.champ textarea, .apercu-texte { resize: vertical; }
.cases { gap: 10px; }
.cases legend { margin-bottom: 10px; }
.cases label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 14px; border: 1px solid var(--ligne); border-radius: 14px; background: var(--creme); }
.cases label:has(input:checked) { border-color: var(--sauge); background: #EEF1E8; }
.cases input { width: 20px; height: 20px; accent-color: var(--sauge-b); flex: none; margin: 0; }
.champ .aide { color: var(--doux); font-size: 13px; }
.envoyer { justify-self: start; }
.apercu { border-top: 1px solid var(--ligne); padding-top: 18px; display: grid; gap: 10px; }
.apercu-titre { margin: 0; font-family: "Lora", serif; font-size: 20px; }
.apercu-texte { font-size: 15px; line-height: 1.5; background: #FBF7F2; }
.apercu .btns { margin-top: 4px; }
.btn.whatsapp { background: #2E7D5B; border-color: #2E7D5B; color: var(--blanc); }
.btn.whatsapp:hover { background: #25684B; border-color: #25684B; }
.btn.whatsapp[hidden] { display: none; }
.etat { margin: 0; color: var(--sauge-b); font-weight: 700; }
.confidentialite { margin: 0; text-align: center; }
[data-champ][hidden] { display: none; }
@media (max-width: 760px) {
  .form-bilan { padding: 24px 18px 20px; }
  .champs-2 { grid-template-columns: 1fr; }
  .envoyer { justify-self: stretch; }
}
button.btn { font-family: inherit; cursor: pointer; line-height: inherit; }
button.btn.vide { background: transparent; } button.btn.vide:hover { background: var(--terra); }

/* Formulaire : choix en pastilles */
.pilules { display: flex; flex-wrap: wrap; gap: 10px; }
.pilules legend { width: 100%; margin-bottom: 10px; }
.pilules label { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 18px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--creme); font-size: 15px; font-weight: 500; transition: background .2s, border-color .2s, color .2s; }
.pilules input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilules label:has(input:checked) { background: var(--sauge-b); border-color: var(--sauge-b); color: var(--blanc); }
.pilules label:has(input:checked)::before { content: "\2713"; font-weight: 700; }
.pilules label:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; }
.rappel-medical { margin: 0; padding: 14px 16px 14px 46px; position: relative; background: #EEF1E8; border-radius: 14px; font-size: 14px; line-height: 1.55; color: var(--encre); }
.rappel-medical::before { content: "\2661"; position: absolute; left: 16px; top: 12px; font-size: 20px; color: var(--sauge-b); }
.rappel-medical b { color: var(--sauge-b); }
@media (min-width: 761px) and (max-width: 1060px) { .atouts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- L'équipe : onglets let's bloom. / Nous rejoindre / Questions ---------- */
.onglets-equipe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 48px; }
.onglets-equipe .onglet { text-decoration: none; display: inline-flex; align-items: center; }
.onglets-equipe .onglet.actif { background: var(--terra); color: var(--blanc); }
.bloom-page .onglets-equipe { position: relative; z-index: 2; }
section.page:has(> .wrap > .onglets-equipe) { padding-top: 52px; }
@media (max-width: 760px) { section.page:has(> .wrap > .onglets-equipe) { padding-top: 32px; } }
.equipe .onglets-equipe .onglet { border-color: #EEF0E8; color: #EEF0E8; }
.equipe .onglets-equipe .onglet:hover { background: rgba(238, 240, 232, .12); }
.equipe .onglets-equipe .onglet.actif { background: #EEF0E8; color: var(--sauge); }
@media (max-width: 760px) {
  .onglets-equipe { gap: 6px; margin-bottom: 36px; }
  .onglets-equipe .onglet { padding: 8px 12px; font-size: 13px; }
}
/* menu du téléphone : 3 liens sous L'équipe */
@media (max-width: 1100px) {
  .menu .deroulant-equipe .sm-boite a:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 3px); }
}

/* Coffrets : prix boutique / prix inscrite mis en avant */
.prix-duo { display: grid; grid-template-columns: 1fr 1.15fr; margin: 10px 0 18px; border: 2px solid var(--sauge); border-radius: 16px; overflow: hidden; text-align: center; }
.prix-duo > div { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 6px; }
.prix-duo span { font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.prix-duo b { font-family: "Lora", serif; font-weight: 500; line-height: 1.15; }
.pd-boutique span { color: var(--doux); }
.pd-boutique b { font-size: 19px; color: var(--doux); }
.pd-inscrite { background: var(--sauge); color: var(--blanc); }
.pd-inscrite span { color: rgba(255,255,255,.9); }
.pd-inscrite i { font-style: normal; background: var(--blanc); color: var(--sauge-b); border-radius: 999px; padding: 1px 7px; margin-left: 2px; font-size: 11px; }
.pd-inscrite b { font-size: 25px; }
.pd-eco { grid-column: 1 / -1; margin: 0; padding: 8px 6px; background: rgba(104, 116, 90, .12); color: var(--sauge-b); font-weight: 700; font-size: 14px; }

.vedette .prix-duo { max-width: 340px; margin: 6px 0 16px; }
.vedette-texte .prix-duo p.pd-eco { margin: 0; }
@media (max-width: 760px) { .vedette .prix-duo { margin-left: auto; margin-right: auto; } }

/* Accueil : sur téléphone et tablette, les deux boutons passent sous la photo */
.btns-sous-photo { display: none; }
@media (max-width: 900px) {
  .accueil .texte .btns { display: none; }
  .accueil .btns-sous-photo { display: flex; justify-content: center; margin-top: -16px; width: 100%; max-width: 640px; }
}
.accueil .btns-sous-photo { justify-self: center; }

/* Pied de page : lien Instagram */
footer .sig .insta { display: inline-flex; align-items: center; gap: 7px; color: var(--encre); }
footer .sig .insta:hover { color: var(--terra-b); }
/* Accueil : lien Instagram sous « Je me présente » */
.lien-insta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 22px; text-decoration: none; color: var(--encre); font-weight: 700; }
.lien-insta svg { flex: none; }
.lien-insta b { font-weight: 700; color: var(--terra); }
.lien-insta:hover b { color: var(--terra-b); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .lien-insta { justify-content: center; width: 100%; } }

/* ---------- Par où commencer : liste élégante (numéro, titre, phrase, flèche) ---------- */
.raccourcis { display: block; max-width: 920px; margin: 18px auto 0; border-top: 1px solid var(--ligne); text-align: left; }
.raccourci {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.25fr) 46px; align-items: center; gap: 0 20px;
  padding: 22px 14px; border: 0; border-bottom: 1px solid var(--ligne); border-radius: 0; background: none; min-height: 0;
  transition: background .25s;
}
.raccourci:hover { background: rgba(255, 255, 255, .6); transform: none; border-color: var(--ligne); }
.raccourci .num { font-size: 40px; margin: 0; color: var(--terra); opacity: .55; }
.raccourci b { font-size: 23px; }
.raccourci span:not(.num) { font-size: 15.5px; }
.raccourci i {
  margin: 0; justify-self: end; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--terra);
  font-size: 0; display: grid; place-items: center; transition: background .25s, transform .25s;
}
.raccourci i::after { content: "\2192"; font-size: 18px; color: var(--terra); }
.raccourci:hover i { background: var(--terra); transform: translateX(4px); }
.raccourci:hover i::after { color: var(--blanc); }
@media (max-width: 760px) {
  .raccourci { grid-template-columns: 52px minmax(0, 1fr) 36px; grid-template-rows: auto auto; gap: 2px 14px; padding: 18px 6px; }
  .raccourci .num { grid-row: 1 / 3; font-size: 30px; }
  .raccourci b { grid-column: 2; font-size: 19px; }
  .raccourci span:not(.num) { grid-column: 2; font-size: 14px; }
  .raccourci i { grid-column: 3; grid-row: 1 / 3; width: 36px; height: 36px; }
  .raccourci i::after { font-size: 16px; }
}
.recit p.message { font-weight: 700; color: var(--sauge-b); }

/* Offres : petits kits de Noël */
.choix-offre .arche.photo.arche-kits { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(circle at 50% 35%, #7A1730 0%, var(--noel) 70%); color: #F6E7DA; text-align: center; }
.choix-offre .arche-kits .kits-etoiles { letter-spacing: .4em; font-size: 14px !important; color: #E9C9B6 !important; }
.choix-offre .arche-kits .kits-mot { font-family: "Dancing Script", cursive; font-size: 44px; line-height: 1; color: #F6E7DA !important; }
.choix-offre .arche-kits .kits-sous { font-size: 13px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E9C9B6 !important; }
.kits-page { max-width: 720px; margin: 0 auto; }
.kits-page .bientot { margin: 22px auto 26px; }
/* Offres : les liens « Découvrir » alignés en bas de chaque carte */
.choix-offre { display: flex; flex-direction: column; }
.choix-offre i { margin-top: auto; padding-top: 8px; }
.kits-liste { display: inline-block; text-align: left; margin: 18px auto 0; }
.kits-liste li, .kits-liste li:last-child { font-weight: 400; color: var(--encre); font-size: 15px; }
.kits-cartes { margin: 28px 0 8px; }
.kits-cartes .carte { text-align: left; }
.kits-cartes .kit-desc { font-size: 14px; color: var(--doux); margin: 6px 0 8px; }
.kits-cartes .kit-prix { font-family: "Lora", serif; font-size: 26px; color: var(--terra-b); margin: 6px 0 12px; }
.kits-cartes .btn { width: 100%; margin-top: 8px; }
.kits-cartes .carte { width: min(420px, 100%); }
.kit-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; background: var(--sable); border-radius: 160px 160px 14px 14px; }
.kit-photos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; }
.kits-cartes .kit-valeur { font-size: 13px; color: var(--doux); margin: 4px 0 0; }
.kit-maison { margin-top: 8px; }
.kit-maison summary { list-style: none; cursor: pointer; width: 100%; }
.kit-maison summary::-webkit-details-marker { display: none; }
.kit-maison p { font-size: 14px; margin: 12px 0 4px; }
.kit-maison ul { margin: 0; padding-left: 18px; font-size: 14px; }
.kit-maison li { margin: 4px 0; }
.kit-maison a { color: var(--terra-b); font-weight: 700; }
.kit-maison a::after { content: " \2192"; }
.kit-photos { background: #F3E6DB; }
.kits-cartes .contenu-liste li, .kits-cartes .contenu-liste li:last-child { font-weight: 400; color: var(--encre); }

/* ---------- Petits kits : carte courte + page du kit ---------- */
.kit-carte { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) { .kit-carte:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(80, 50, 30, .10); } }
.kit-carte .corps { text-align: center; }
.kit-carte i { font-style: normal; font-weight: 700; font-size: 14px; color: var(--terra); }
.kit-carte i::after { content: " \2192"; }
.kit-prix { font-family: "Lora", serif; font-size: 26px; color: var(--terra-b); margin: 6px 0 10px; }
.kit-prix small { display: block; font-family: "Quicksand", sans-serif; font-size: 13px; font-weight: 700; color: var(--doux); }
.kit-fiche .pour { margin: 10px 0 0; }
.kit-commun { font-size: 14px; color: var(--sauge-b); font-weight: 700; }
.kit-produits { display: grid; gap: 16px; max-width: 760px; margin: 30px auto; }
.kit-produit { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; background: var(--blanc); border-radius: 18px; padding: 14px; }
.kit-produit img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; }
.kit-produit h3 { font-size: 20px; margin: 0 0 4px; }
.kit-produit h3 small { font-family: "Quicksand", sans-serif; font-size: 13px; color: var(--doux); font-weight: 700; margin-left: 6px; }
.kit-produit p { font-size: 14px; margin: 0 0 6px; color: var(--encre); }
.kit-produit-prix { font-weight: 700; }
.kit-produit-prix a { margin-left: 10px; color: var(--terra-b); font-weight: 700; }
.kit-produit-prix a::after { content: " \2192"; }
.kit-achat { max-width: 420px; margin: 0 auto; }
.kit-achat .btn { width: 100%; }
@media (max-width: 560px) {
  .kit-produit { grid-template-columns: 92px 1fr; gap: 12px; padding: 12px; }
  .kit-produit h3 { font-size: 17px; }
  .kit-produit-prix a { display: block; margin: 4px 0 0; }
}
.kit-photos img, .kit-produit img { object-fit: cover; }

/* ---------- Petits kits : variante 1, liste avec photos en rond ---------- */
.kits-cartes.v-liste { display: block; max-width: 760px; margin: 28px auto 8px; border-top: 1px solid var(--ligne); }
.v-liste .kit-carte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 36px; align-items: center; gap: 4px 18px; width: auto; padding: 16px 8px; border-radius: 0; background: none; border-bottom: 1px solid var(--ligne); box-shadow: none; transform: none; }
.v-liste .kit-carte:hover { background: rgba(255, 255, 255, .6); box-shadow: none; transform: none; }
.v-liste .kit-photos { display: flex; padding: 0; background: none; border-radius: 0; }
.v-liste .kit-photos img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--creme); margin-left: -18px; box-shadow: 0 2px 8px rgba(80, 50, 30, .12); }
.v-liste .kit-photos img:first-child { margin-left: 0; }
.v-liste .corps { display: contents; }
.v-liste .corps .pour { grid-column: 2; grid-row: 2; margin: 0; font-size: 13px; text-align: left; }
.v-liste .corps h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 19px; text-align: left; }
.v-liste .kit-photos { grid-row: 1 / 3; }
.v-liste .kit-prix { grid-column: 3; grid-row: 1 / 3; margin: 0; font-size: 21px; text-align: right; }
.v-liste .kit-prix small { font-size: 11.5px; }
.v-liste .kit-carte i { grid-column: 4; grid-row: 1 / 3; font-size: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--terra); display: grid; place-items: center; }
.v-liste .kit-carte i::after { content: "\2192"; font-size: 16px; }
@media (max-width: 560px) {
  .v-liste .kit-carte { grid-template-columns: auto minmax(0, 1fr) 30px; gap: 2px 12px; padding: 14px 4px; }
  .v-liste .kit-photos img { width: 46px; height: 46px; margin-left: -14px; border-width: 2px; }
  .v-liste .kit-photos { grid-row: 1 / 4; }
  .v-liste .corps h3 { font-size: 16.5px; }
  .v-liste .kit-prix { grid-column: 2; grid-row: 3; text-align: left; font-size: 17px; }
  .v-liste .kit-prix small { display: inline; margin-left: 6px; }
  .v-liste .kit-carte i { grid-column: 3; grid-row: 1 / 4; width: 30px; height: 30px; }
}

/* ---------- Petits kits : variante 3, bande qui défile ---------- */
.kits-cartes.v-bande { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; margin: 28px 0 8px; -webkit-overflow-scrolling: touch; }
.v-bande .kit-carte { flex: 0 0 200px; width: 200px; scroll-snap-align: start; padding: 10px; }
.v-bande .kit-photos { display: block; padding: 0; background: none; border-radius: 14px; overflow: hidden; }
.v-bande .kit-photos img { display: none; width: 100%; border-radius: 14px; }
.v-bande .kit-photos img:first-child { display: block; }
.v-bande .corps { padding: 10px 4px 2px; }
.v-bande .corps .pour { font-size: 12.5px; margin: 0; }
.v-bande .corps h3 { font-size: 17px; margin: 2px 0; }
.v-bande .kit-prix { font-size: 19px; margin: 4px 0 6px; }
.v-bande .kit-prix small { font-size: 11px; }
.v-bande .kit-carte i { font-size: 13px; }
@media (min-width: 900px) { .kits-cartes.v-bande { justify-content: center; flex-wrap: wrap; overflow: visible; } }
@media (max-width: 560px) {
  .v-liste .kit-photos img { width: 40px; height: 40px; margin-left: -16px; }
  .v-liste .corps .pour { font-size: 12.5px; }
  .v-liste .kit-prix small { display: block; margin: 0; }
}
.v-liste .kit-carte { grid-template-columns: 150px minmax(0, 1fr) auto 36px; }
@media (max-width: 560px) { .v-liste .kit-carte { grid-template-columns: 90px minmax(0, 1fr) 30px; } }
.kit-completer { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--ligne); }
.kit-completer-titre { font-size: 24px; margin: 0 0 6px; }
.kit-completer .kit-produits { margin-top: 18px; }
/* Page d'un kit : boutons d'achat plus petits et plus espacés */
.kit-achat { max-width: 340px; }
.kit-achat .btn { width: 100%; padding: 12px 20px; font-size: 15px; }
.kit-achat .btn + .btn { margin-top: 14px; }
.kit-fiche .kit-achat { max-width: 300px; }
.kit-fiche .kit-achat .btn { display: block; padding: 9px 18px; font-size: 14.5px; }
.kit-fiche .kit-achat .btn + .btn { margin-top: 16px; }
.kit-fiche .kit-achat .petit { margin-top: 12px; }
.kit-produit .contenu-liste { margin: 4px 0 8px; }
.kit-produit .contenu-liste li, .kit-produit .contenu-liste li:last-child { font-weight: 400; color: var(--encre); }
.v-liste .kit-photos img:only-child { width: 72px; height: 72px; }
@media (max-width: 560px) { .v-liste .kit-photos img:only-child { width: 56px; height: 56px; } }
/* Packs : encart « Une routine qui dure ? Inscris-toi » */
.encart-routine { max-width: 720px; margin: 26px auto 34px; padding: 22px 24px; border-radius: 22px; background: #E9EDE2; text-align: center; }
.encart-routine .encart-titre { font-family: "Lora", serif; font-size: 22px; margin: 0 0 8px; color: var(--encre); }
.encart-routine p { margin: 0 0 6px; }
.encart-routine .btns { justify-content: center; margin-top: 14px; gap: 10px; }
.encart-routine .btn { padding: 10px 22px; font-size: 15px; }
@media (max-width: 560px) { .encart-routine { padding: 18px 16px; } .encart-routine .encart-titre { font-size: 19px; } }
/* Encart inscription des packs : boutons verts, différents des onglets de catégories */
.encart-routine .btns { flex-direction: row; flex-wrap: wrap; }
.encart-routine .btn { width: auto; padding: 9px 20px; font-size: 14.5px; border-color: var(--sauge-b); }
.encart-routine .btn.plein { background: var(--sauge-b); color: var(--blanc); }
.encart-routine .btn.plein:hover { background: var(--sauge); border-color: var(--sauge); }
.encart-routine .btn.vide { background: transparent; color: var(--sauge-b); }
.encart-routine .btn.vide:hover { background: rgba(87, 98, 75, .1); }
.encart-routine .btn.plein::before { content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 7px -2px 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.encart-routine .btn.vide::after { content: " \2192"; }
/* Textes centrés plus réguliers */
h1, h2, .encart-titre { text-wrap: balance; }
.intro, .encart-routine p { text-wrap: pretty; }
.packs-intro { margin-left: auto; margin-right: auto; }
.packs-intro + .packs-intro { margin-top: -6px; }
@media (max-width: 560px) { .packs-intro { font-size: 16px; } }

/* ---------- Packs : page présentée comme un panier ---------- */
.pack-page .pour { margin: 4px 0 0; }
.panier { max-width: 760px; margin: 30px auto 0; }
.panier-liste { list-style: none; margin: 0; padding: 0; background: var(--blanc); border-radius: 20px; overflow: hidden; }
.pl { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border-bottom: 1px solid var(--ligne); }
.pl:last-child { border-bottom: 0; }
.pl img { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; background: #fff; }
.pl-nom { font-family: "Lora", serif; font-size: 19px; margin: 0 0 4px; color: var(--encre); }
.pl-nom small { font-family: "Quicksand", sans-serif; font-size: 13px; font-weight: 700; color: var(--doux); margin-left: 4px; }
.pl-tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #E9EDE2; color: var(--sauge-b); font-family: "Quicksand", sans-serif; font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.pl-tag.opt { background: #F4E1D7; color: var(--terra-b); }
.pl-desc { font-size: 14px; margin: 0 0 6px; color: var(--encre); }
.pl-info a { font-size: 13.5px; font-weight: 700; color: var(--terra-b); }
.pl-info a::after { content: " \2192"; }
.pl-prix { font-family: "Lora", serif; font-size: 19px; color: var(--terra-b); margin: 0; text-align: right; white-space: nowrap; }
.pl-prix small { display: block; font-family: "Quicksand", sans-serif; font-size: 12px; font-weight: 700; color: var(--sauge-b); }
.pl-option { background: #FCF8F5; }
.panier-total { margin: 18px auto 0; max-width: 360px; text-align: center; }
.panier-total-titre { font-family: "Lora", serif; font-size: 20px; margin: 0 0 4px; }
.panier-total .prix-duo { margin: 6px 0 8px; }
.panier-sep { margin: 34px 0 10px; font-family: "Lora", serif; font-size: 21px; text-align: center; }
.panier .kit-achat { margin-top: 26px; }
.panier .kit-achat .petit { margin: 8px 0 14px; }
@media (max-width: 560px) {
  .pl { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 14px 12px; align-items: start; }
  .pl img { width: 64px; height: 64px; grid-row: 1 / 3; }
  .pl-nom { font-size: 16.5px; }
  .pl-desc { font-size: 13.5px; }
  .pl-prix { grid-column: 2; text-align: left; font-size: 17px; }
  .pl-prix small { display: inline; margin-left: 6px; }
}
/* Liste des kits et packs : 4 photos ou plus, ronds plus petits */
.v-liste .kit-photos:has(img:nth-child(4)) img { width: 50px; height: 50px; margin-left: -16px; }
.v-liste .kit-photos:has(img:nth-child(4)) img:first-child { margin-left: 0; }
@media (max-width: 560px) {
  .v-liste .kit-photos:has(img:nth-child(4)) img { width: 32px; height: 32px; margin-left: -13px; }
  .v-liste .kit-photos:has(img:nth-child(4)) img:first-child { margin-left: 0; }
}
@media (max-width: 560px) { .v-liste .kit-carte { grid-template-columns: 104px minmax(0, 1fr) 30px; } }
.pl-liens { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kit-visuel { display: block; width: min(300px, 80%); height: auto; margin: 22px auto 18px; border-radius: 160px 160px 18px 18px; box-shadow: 0 14px 30px rgba(86, 10, 29, .18); }

/* ---------- Kits et packs : plus de cartes blanches. Lignes fines sur le fond crème,
   photos détourées posées sur une pastille sable ---------- */
.kit-produits { gap: 0; border-top: 1px solid var(--ligne); }
.kit-produit { background: none; border-radius: 0; padding: 18px 4px; border-bottom: 1px solid var(--ligne); }
.panier-liste { background: none; border-radius: 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); overflow: visible; }
.pl { padding: 18px 4px; }
.pl-option { background: none; }
.kit-produit img, .pl img, .v-liste .kit-photos img {
  background: var(--ligne);
}
.kit-produit img, .pl img { border-radius: 18px; }
.v-liste .kit-photos img { border-color: var(--creme); box-shadow: none; }
.packs .v-liste .kit-photos img { border-color: var(--creme-2); }

.kit-visuel-sa { box-shadow: 0 14px 30px rgba(120, 90, 60, .16); }

/* Rangée avec 5 photos (Morning Glow) : ronds un peu plus serrés pour tenir dans la colonne */
.v-liste .kit-photos:has(img:nth-child(5)) { gap: 0; }
.v-liste .kit-photos:has(img:nth-child(5)) img { width: 50px; height: 50px; margin-left: -25px; }
.v-liste .kit-photos:has(img:nth-child(5)) img:first-child { margin-left: 0; }
@media (max-width: 560px) {
  .v-liste .kit-photos:has(img:nth-child(5)) img { width: 36px; height: 36px; margin-left: -19px; }
  .v-liste .kit-photos:has(img:nth-child(5)) img:first-child { margin-left: 0; }
}

/* Une seule photo d'ensemble par kit ou pack dans les listes : petite arche, comme la photo de présentation */
.v-liste .kit-photos img:only-child { width: 78px; height: 98px; border-radius: 40px 40px 10px 10px; border: 0; margin: 0; object-fit: cover; object-position: center 70%; }
@media (max-width: 560px) { .v-liste .kit-photos img:only-child { width: 66px; height: 84px; border-radius: 34px 34px 8px 8px; } }
.kit-visuel-mg { box-shadow: 0 14px 30px rgba(90, 60, 90, .18); }
.kit-visuel-pi { box-shadow: 0 14px 30px rgba(70, 90, 60, .18); }
.kit-photo-note { max-width: 420px; margin: -6px auto 14px; font-style: italic; }

/* Lignes avec une seule photo d'ensemble : la colonne photo prend juste la largeur de l'arche, le titre se rapproche */
.v-liste .kit-carte:has(.kit-photos img:only-child) { grid-template-columns: 78px minmax(0, 1fr) auto 36px; gap: 4px 22px; }
@media (max-width: 560px) { .v-liste .kit-carte:has(.kit-photos img:only-child) { grid-template-columns: 66px minmax(0, 1fr) 30px; gap: 2px 16px; } }
@media (min-width: 561px) {
  .v-liste .kit-carte:has(.kit-photos img:only-child) .corps h3 { align-self: end; }
  .v-liste .kit-carte:has(.kit-photos img:only-child) .corps .pour { align-self: start; }
}
@media (max-width: 560px) { .v-liste .corps h3 .pl-tag { display: table; margin: 4px 0 2px; } }
.pl-desc a { font-size: inherit; }
.v-liste .kit-photos img.ens-mo { object-position: 22% center; }
.kit-visuel-mo { width: min(380px, 92%); border-radius: 190px 190px 18px 18px / 150px 150px 18px 18px; box-shadow: 0 14px 30px rgba(60, 90, 50, .18); }

/* ---------- Petits kits de Noël : paillettes ---------- */
.page-noel { position: relative; overflow: hidden; }
.page-noel > .wrap { position: relative; z-index: 1; }
.kits-page { position: relative; }
.paillettes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.paillette {
  position: absolute; width: var(--t, 10px); height: var(--t, 10px); margin: calc(var(--t, 10px) / -2) 0 0 calc(var(--t, 10px) / -2);
  background: var(--c, #D9B98F);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: scintille 2.8s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(217, 185, 143, .7)); animation-delay: var(--d, 0s);
}
.paillette.vole { z-index: 2; animation: jaillit .9s ease-out forwards; }
@keyframes scintille { 0%, 100% { opacity: 0; transform: scale(.35) rotate(0); } 50% { opacity: .9; transform: scale(1) rotate(45deg); } }
@keyframes jaillit { from { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2) rotate(120deg); } }
@media (prefers-reduced-motion: reduce) { .paillette { animation: none; opacity: .5; } }
.kit-visuel-va { width: min(330px, 86%); box-shadow: 0 14px 30px rgba(60, 110, 100, .18); }

/* Petits kits de Noël : vraies décorations (photos détourées) de chaque côté du titre */
.deco-noel { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; }
.deco-coin { position: absolute; top: -36px; width: 190px; height: auto; filter: drop-shadow(0 8px 14px rgba(80, 50, 30, .16)); }
.deco-coin.g { left: -200px; transform: rotate(-8deg); }
.deco-coin.d { right: -200px; transform: rotate(6deg); }
@media (max-width: 1180px) { .deco-coin { width: 150px; top: -40px; } .deco-coin.g { left: -60px; } .deco-coin.d { right: -60px; } }
@media (max-width: 760px) { .deco-coin { width: 100px; top: -34px; } .deco-coin.g { left: -26px; } .deco-coin.d { right: -26px; } }
@media (max-width: 400px) { .deco-coin { width: 86px; } }
.kit-visuel-pa { box-shadow: 0 14px 30px rgba(120, 60, 40, .18); }
.pays-note { max-width: 560px; margin: 4px auto 0; font-style: italic; }
.btn.btn-mini, .kits-liste .btn.btn-mini { width: auto; max-width: max-content; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 16px; font-size: 13.5px; min-height: 0; }
.btns-video { margin: 18px 0 14px; }

/* Catégories pas encore remplies : encadré « À venir » */
.bientot { max-width: 520px; margin: 18px auto 8px; padding: 26px 24px; text-align: center; border: 1px dashed var(--ligne); border-radius: 22px; }
.bientot-titre { font-family: "Dancing Script", cursive; font-size: 30px; color: var(--terra); margin: 0 0 6px; }
.bientot p { margin: 0 0 10px; }
.bientot-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bientot-btns .btn-mini { margin-top: 4px; }

/* ---------- Test peau (Soins visage) ---------- */
.test-peau { max-width: 760px; margin: 18px auto 26px; padding: 30px 26px; background: var(--creme); border-radius: 26px; text-align: center; }
.tp-sur { display: inline-block; margin: 0 0 10px; padding: 5px 14px; border-radius: 999px; background: var(--terra); color: var(--blanc); font-size: 13px; font-weight: 700; }
.tp-titre { font-family: "Lora", serif; font-weight: 400; font-size: clamp(26px, 5vw, 36px); line-height: 1.15; margin: 0 0 10px; }
.tp-titre .kw { display: block; color: var(--sauge); font-size: .7em; margin-top: 4px; }
.tp-q { max-width: 520px; margin: 0 auto 18px; }
.tp-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.tp-choix-btn { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--blanc); font: inherit; font-size: 14.5px; color: var(--encre); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.tp-choix-btn:hover { border-color: var(--terra); }
.tp-choix-btn[aria-pressed="true"] { border-color: var(--terra); box-shadow: 0 0 0 2px var(--terra) inset; }
.tp-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--blanc); font-family: "Lora", serif; font-size: 14px; }
.tp-num.sauge, .tp-badge.sauge { background: var(--sauge); }
.tp-num.terra, .tp-badge.terra { background: var(--terra); }
.tp-resultats { margin-top: 18px; }
.tp-res { text-align: left; background: var(--blanc); border-radius: 22px; padding: 14px 14px 20px; animation: tpEntree .35s ease-out; }
.tp-res img { width: 100%; height: auto; aspect-ratio: 900 / 356; object-fit: cover; border-radius: 14px; display: block; }
.tp-res-tete { display: flex; align-items: center; gap: 14px; margin: 14px 4px 6px; }
.tp-grand { font-family: "Lora", serif; font-size: 52px; line-height: 1; }
.tp-grand.sauge { color: var(--sauge); }
.tp-grand.terra { color: var(--terra); }
.tp-badge { display: inline-block; margin: 0 0 2px; padding: 3px 11px; border-radius: 999px; color: var(--blanc); font-size: 12.5px; font-weight: 700; }
.tp-res h4 { font-family: "Lora", serif; font-weight: 400; font-size: 28px; margin: 0; }
.tp-res > p { margin: 6px 4px; }
.tp-actif span { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 700; color: var(--terra); margin-right: 6px; }
.tp-actif { font-family: "Lora", serif; font-size: 18px; }
.tp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 4px 14px; }
.tp-chips li { padding: 6px 13px; border: 1px solid var(--ligne); border-radius: 999px; font-size: 13.5px; }
.tp-alerte { color: var(--terra); font-size: 13.5px; font-weight: 700; }
.tp-res .btn-mini { margin: 4px 4px 0; }
.tp-fin { margin: 18px 0 0; font-style: italic; }
@keyframes tpEntree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .tp-choix { grid-template-columns: 1fr; } .test-peau { padding: 24px 14px; } }
.tp-panier { font-size: 14px; color: var(--doux); font-style: italic; margin: 4px 4px 10px; }
.mention-bas { margin-top: 44px !important; }