/* M7 GOAT — mises en page propres à chaque page. Les valeurs viennent de charte.css. */

/* ===================== ACCUEIL ===================== */
.heros{display:grid;grid-template-columns:38fr 62fr;grid-template-rows:minmax(0,1fr);height:calc(100svh - var(--entete));min-height:560px;max-height:900px}
.heros-tx{padding:46px var(--marge) 70px;display:flex;flex-direction:column;justify-content:space-between}
.heros-tx .lab{color:var(--doux)}
.heros-bas{display:grid;gap:24px;justify-items:start}
.heros h1{font-size:var(--t-titre)}
.heros p{max-width:380px;color:var(--doux)}
.heros-img{min-height:0;overflow:hidden;position:relative}
.heros-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.heros .compteur{position:absolute;right:var(--marge);bottom:28px;color:#fff;font-size:11px;letter-spacing:.12em;display:flex;gap:10px;align-items:center}
.heros .compteur i{display:block;width:60px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.heros .compteur i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:remplir 6s linear infinite}
@keyframes remplir{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.bloc{padding:var(--section) var(--marge)}
.tete{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}

.philo{padding:var(--section) var(--marge) clamp(80px,9vw,130px);text-align:center}
.philo h2{font-size:clamp(26px,2.8vw,40px);line-height:1.15}
.philo-scene{position:relative;width:min(1100px,100%);margin:clamp(50px,7vw,90px) auto 0;height:440px}
.philo .rond{position:absolute;left:50%;top:0;width:440px;height:440px;margin-left:-220px}
.rond{border-radius:50%;overflow:hidden}
.rond img{width:100%;height:100%;object-fit:cover}
.co{position:absolute;display:grid;gap:4px;text-align:left}
.co b{font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.co small{font-size:13px;color:var(--doux)}
.co i{position:absolute;top:8px;height:1px;background:var(--filet)}
.co.a{left:calc(50% + 260px);top:70px}.co.a i{left:-130px;width:118px;transform-origin:left}
.co.b{right:calc(50% + 280px);top:230px;text-align:right}.co.b i{right:-150px;width:138px;transform-origin:right}
.co.c{left:calc(50% + 280px);top:370px}.co.c i{left:-150px;width:138px;transform-origin:left}
.anime .co.b i.r-filet{transform-origin:right}

.plein{position:relative;height:min(100svh,900px);min-height:520px;overflow:hidden}
.plein img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;will-change:transform}
.plein-tx{position:absolute;left:var(--marge);bottom:44px;color:#fff;display:grid;gap:18px;justify-items:start}
.plein h2{font-size:clamp(36px,3.8vw,54px)}

.gestes{background:var(--sable);padding:clamp(70px,8vw,100px) var(--marge);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.gestes-g{display:grid;gap:50px}
.gestes-titre{display:flex;gap:26px;align-items:flex-start}
.trois{font-weight:200;font-size:clamp(150px,20vw,290px);line-height:.8;color:var(--terre)}
.gestes h2{font-size:var(--t-h2);margin-top:clamp(10px,2.4vw,36px)}
.gestes-titre p{font-size:14px;color:var(--doux);max-width:300px;margin-top:12px}
.gestes .rond{width:min(460px,100%);aspect-ratio:1;margin-left:clamp(0px,5vw,70px)}
.pas{display:grid;gap:clamp(50px,6vw,90px)}
.pas li{display:grid;grid-template-columns:auto 1fr;gap:14px;max-width:360px}
.pas li:nth-child(2){margin-left:clamp(0px,10vw,140px)}
.pas li:nth-child(3){margin-left:clamp(0px,20vw,280px)}
.k{font-weight:200;font-size:var(--t-chiffre);color:var(--terre);line-height:1;font-variant-numeric:tabular-nums}
.pas b,.trois-col b{font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin:10px 0 4px}
.pas p,.trois-col p{font-size:13.5px;color:var(--doux)}

.duo{display:grid;grid-template-columns:1fr 1fr;height:min(100svh,900px);min-height:560px}
.duo .c{position:relative;overflow:hidden}
.duo img{width:100%;height:100%;object-fit:cover}
.c-tx{position:absolute;left:var(--marge);bottom:36px;color:#fff;display:grid;gap:12px;justify-items:start}
.duo h3{font-size:clamp(28px,2.8vw,40px)}

.cmd h2{font-size:var(--t-h2);max-width:760px}
.trois-col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(40px,5vw,70px)}
.trois-col li{position:relative;padding-top:22px}
.trois-col li>i{position:absolute;top:0;left:0;right:0;height:1px;background:var(--filet)}
.trois-col p{max-width:330px}
.villes{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 30px;padding-top:22px;margin-top:clamp(60px,9vw,140px);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.villes>i{position:absolute;top:0;left:0;right:0;height:1px;background:var(--filet)}

.comm{padding-top:clamp(60px,7vw,110px)}
.mur{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:330px 330px;gap:var(--gap)}
.mur figure{overflow:hidden}
.mur img{width:100%;height:100%;object-fit:cover}
.mur figure:first-child{grid-row:span 2}

@media (max-width:1100px){
  .co.a{left:auto;right:0}.co.b{right:auto;left:0}.co.c{left:auto;right:0}
  .co i{display:none}
}
@media (max-width:760px){
  .heros{grid-template-columns:1fr;grid-template-rows:auto;height:auto;max-height:none}
  .heros-img{order:-1;height:62svh}
  .heros-tx{padding:28px var(--marge) 40px;gap:26px}
  .philo-scene{height:auto;display:grid;gap:22px;justify-items:center}
  .philo .rond{position:static;margin:0;width:min(300px,80vw);height:auto;aspect-ratio:1}
  .co{position:static;text-align:center}
  .gestes{grid-template-columns:1fr}
  .gestes .rond{margin:0 auto;width:min(300px,80vw)}
  .pas li:nth-child(n){margin-left:0}
  .pas{gap:30px}
  .duo{grid-template-columns:1fr;height:auto}
  .duo .c{height:80svh}
  .trois-col{grid-template-columns:1fr;gap:26px}
  .villes .bouton{width:100%}
  .mur{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .mur figure{aspect-ratio:1}
  .mur figure:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:4/3}
}

/* ===================== EN-TÊTE DE PAGE (boutique, panier, commande) ===================== */
.tete-page{padding:clamp(40px,5vw,70px) var(--marge) clamp(30px,4vw,50px);display:grid;gap:22px}
.tete-page h1{font-size:var(--t-titre)}
.tete-page p{max-width:520px;color:var(--doux)}

/* ===================== BOUTIQUE ===================== */
.filtres{position:sticky;top:var(--entete);z-index:5;background:var(--blanc);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px var(--marge);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);transition:top .6s var(--courbe)}
.entete.cache ~ main .filtres{top:0}
.filtres .onglets{display:flex;gap:6px;flex-wrap:wrap}
.onglet{min-height:40px;padding:0 16px;white-space:nowrap;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);transition:color .3s,box-shadow .3s}
.onglet sup{font-size:9px;margin-left:3px}
.onglet[aria-pressed="true"]{color:var(--encre);box-shadow:inset 0 -1px 0 var(--encre)}
.tri{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.tri select{border:0;background:transparent;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre);min-height:40px;cursor:pointer}
.grille-boutique{padding:34px var(--marge) var(--section)}
.grille-boutique .rang{row-gap:44px}
.vide-filtre{grid-column:1/-1;padding:60px 0;text-align:center;color:var(--doux)}
.conseil{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,60px);align-items:center;margin:0 var(--marge) var(--section);padding:clamp(28px,4vw,50px);background:var(--sable)}
.conseil .rond{width:clamp(110px,12vw,170px);aspect-ratio:1}
.conseil h2{font-size:var(--t-h3);margin-bottom:10px}
.conseil p{color:var(--doux);max-width:460px}
.assurances{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--filet)}
.assurances div{padding:34px var(--marge);display:grid;gap:8px;border-right:1px solid var(--filet)}
.assurances div:last-child{border-right:0}
.assurances b{font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.assurances p{font-size:13.5px;color:var(--doux)}

/* ===================== FICHE PRODUIT ===================== */
.fiche{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;border-bottom:1px solid var(--filet)}
.galerie{display:grid;gap:var(--gap);padding:var(--gap) 0 var(--gap) var(--marge)}
.galerie figure{background:var(--gris);aspect-ratio:4/5;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover}
.galerie-compteur{display:none}
.infos{position:sticky;top:var(--entete);align-self:start;padding:clamp(30px,4vw,56px) var(--marge) 40px clamp(30px,4vw,64px);display:grid;gap:22px}
.infos h1{font-size:clamp(30px,3.2vw,46px)}
.infos .prix-grand{font-size:20px;font-weight:300}
.infos .accroche{font-size:16px;line-height:1.6;max-width:460px}
.achat{display:grid;grid-template-columns:auto 1fr;gap:10px}
.achat .bouton.creux{grid-column:1/-1}
.plis{border-top:1px solid var(--filet)}
.plis details{border-bottom:1px solid var(--filet)}
.plis summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:56px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.plis summary::-webkit-details-marker{display:none}
.plis summary i{position:relative;width:12px;height:12px}
.plis summary i::before,.plis summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s var(--courbe)}
.plis summary i::after{transform:rotate(90deg)}
.plis details[open] summary i::after{transform:rotate(0)}
.plis .corps{padding:0 0 22px;color:var(--doux);font-size:14px;display:grid;gap:8px}
.plis .corps li::before{content:"—";margin-right:10px;color:var(--terre)}
.introuvable{padding:var(--section) var(--marge);display:grid;gap:20px;justify-items:start}
.suite{padding:var(--section) var(--marge)}

@media (max-width:1100px){
  .fiche{grid-template-columns:1fr}
  .infos{position:static;padding:30px var(--marge) 40px}
  .galerie{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;padding:0;gap:6px;scrollbar-width:none}
  .galerie::-webkit-scrollbar{display:none}
  .galerie figure{scroll-snap-align:start}
  .conseil{grid-template-columns:auto 1fr}
  .conseil .bouton{grid-column:1/-1}
}
@media (max-width:760px){
  .filtres{flex-direction:column;align-items:stretch;gap:6px;padding:8px var(--marge)}
  .filtres .onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--marge) * -1);padding:0 var(--marge)}
  .tri{justify-content:space-between}
  .conseil{grid-template-columns:1fr;justify-items:start}
  .assurances{grid-template-columns:1fr}
  .assurances div{border-right:0;border-bottom:1px solid var(--filet)}
  .galerie{grid-auto-columns:100%}
}

/* ===================== PANIER ===================== */
.panier{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(30px,5vw,80px);padding:0 var(--marge) var(--section);align-items:start}
.lignes{border-top:1px solid var(--filet)}
.ligne{display:grid;grid-template-columns:110px 1fr auto;gap:22px;padding:22px 0;border-bottom:1px solid var(--filet);align-items:start}
.ligne .v{aspect-ratio:3/4;background:var(--gris);overflow:hidden}
.ligne .v img{width:100%;height:100%;object-fit:cover}
.ligne h3{font-size:13px;font-weight:400;letter-spacing:.06em}
.ligne .q{display:flex;gap:18px;align-items:center;margin-top:16px;flex-wrap:wrap}
.ligne .retirer{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);border-bottom:1px solid currentColor;padding:6px 0 2px}
.ligne .retirer:hover{color:var(--encre)}
.ligne .total-ligne{font-size:14px}
.recap{position:sticky;top:calc(var(--entete) + 20px);background:var(--sable);padding:30px;display:grid;gap:16px}
.recap h2{font-size:var(--t-h3)}
.recap dl{display:grid;gap:10px;font-size:14px}
.recap dl div{display:flex;justify-content:space-between;gap:20px}
.recap dt{color:var(--doux)}
.recap .total{border-top:1px solid var(--filet);padding-top:14px;font-size:16px}
.recap .total dt{color:var(--encre);text-transform:uppercase;font-size:12px;letter-spacing:.1em}
.recap .mini-lignes{display:grid;gap:12px;font-size:13px}
.recap .mini-lignes div{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center}
.recap .mini-lignes img{width:52px;aspect-ratio:3/4;object-fit:cover;background:var(--gris)}
.vide{display:grid;justify-items:center;text-align:center;gap:20px;padding:20px var(--marge) var(--section)}
.vide .rond{width:220px;aspect-ratio:1}
.vide p{color:var(--doux);max-width:380px}

/* ===================== COMMANDE (checkout) ===================== */
.etapes{display:flex;gap:28px;flex-wrap:wrap;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.etapes span[aria-current]{color:var(--encre)}
.etapes span::before{content:attr(data-n) "/";color:var(--terre);margin-right:8px;font-weight:300}
.formulaire{display:grid;gap:54px}
.groupe{display:grid;gap:22px}
.groupe>h2{font-size:var(--t-h3);display:flex;gap:14px;align-items:baseline}
.groupe>h2 .k{font-size:28px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.choix-liste{display:grid;gap:10px}
.choix .droite-choix{margin-left:auto;font-size:13px;white-space:nowrap}
.mm{display:grid;gap:10px;padding:18px;background:var(--gris);font-size:13.5px;color:var(--doux)}
.mm b{color:var(--encre);font-weight:500}
.alerte-form{color:var(--alerte);font-size:13px}

/* ===================== MERCI ===================== */
.merci{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--entete))}
.merci-img{overflow:hidden;background:var(--gris)}
.merci-img img{width:100%;height:100%;object-fit:cover}
.merci-tx{padding:clamp(40px,6vw,90px) var(--marge);display:grid;gap:22px;align-content:center;justify-items:start}
.merci-tx h1{font-size:var(--t-titre)}
.merci-tx .numero{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.merci-tx .recap{position:static;width:100%;max-width:480px}
.boutons{display:flex;gap:10px;flex-wrap:wrap}

/* ===================== CONNEXION ===================== */
.acces{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--entete))}
.acces-img{position:sticky;top:var(--entete);height:calc(100svh - var(--entete));overflow:hidden}
.acces-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.acces-img .citation{position:absolute;left:var(--marge);right:var(--marge);bottom:36px;color:#fff;display:grid;gap:14px}
.acces-img .citation p{font-size:var(--t-h3);font-weight:300;text-transform:uppercase;line-height:1.1;max-width:440px}
.acces-img .logo{color:#fff;font-size:34px}
.acces-form{display:grid;align-content:center;padding:clamp(40px,6vw,90px) clamp(24px,7vw,110px)}
.acces-form .boite{width:100%;max-width:440px;display:grid;gap:30px}
.acces-form h1{font-size:var(--t-h2)}
.bascule{position:relative;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--filet)}
.bascule button{min-height:48px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);transition:color .3s}
.bascule button[aria-selected="true"]{color:var(--encre)}
.bascule i{position:absolute;bottom:-1px;left:0;width:50%;height:1px;background:var(--encre);transition:transform .6s var(--courbe)}
.bascule[data-onglet="inscription"] i{transform:translateX(100%)}
.acces-form form{display:grid;gap:22px}
.mdp{position:relative}
.mdp button{position:absolute;right:0;bottom:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);min-height:36px}
.ligne-options{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;color:var(--doux)}
.ligne-options label{display:flex;gap:8px;align-items:center}
.ligne-options input{accent-color:var(--encre)}
.ligne-options a{border-bottom:1px solid currentColor}
.ou{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.ou::before,.ou::after{content:"";height:1px;background:var(--filet)}
.message-form{font-size:13px;padding:14px 16px;background:var(--sable)}

@media (max-width:1100px){
  .panier{grid-template-columns:1fr}
  .recap{position:static}
}
@media (max-width:760px){
  .ligne{grid-template-columns:84px 1fr;gap:16px}
  .ligne .total-ligne{grid-column:2}
  .deux{grid-template-columns:1fr}
  .merci,.acces{grid-template-columns:1fr}
  .merci-img{height:40svh}
  .acces-img{position:relative;top:0;height:46svh}
  .acces-form{padding:34px var(--marge) 60px}
}

/* ===================== VIDÉOS (TikTok) ===================== */
.videos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.video{display:grid;gap:10px;align-content:start}
.video-v{position:relative;display:block;width:100%;aspect-ratio:9/16;background:var(--gris);overflow:hidden;cursor:pointer}
.video-v img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--courbe)}
.video:hover .video-v img{transform:scale(1.03)}
.lecture{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;background:rgba(255,255,255,.88);transition:transform .6s var(--sortie)}
.lecture::after{content:"";position:absolute;left:26px;top:21px;border-left:16px solid var(--encre);border-top:11px solid transparent;border-bottom:11px solid transparent}
.video:hover .lecture{transform:scale(1.08)}
.video .tt{position:absolute;left:12px;top:12px;background:var(--blanc);padding:5px 8px;font-size:10px}
.video h3{font-size:12px;font-weight:400;letter-spacing:.06em;line-height:1.4}
.video a.lab{font-size:10px}
.video a.lab:hover{color:var(--encre)}

/* lecteur plein écran */
.lecteur{position:fixed;inset:0;z-index:50;background:var(--blanc);display:grid;grid-template-columns:auto minmax(0,420px);gap:clamp(24px,5vw,70px);align-items:center;justify-content:center;padding:70px var(--marge) 40px}
.lecteur .fermer{position:absolute;top:18px;right:var(--marge);min-height:44px}
.lecteur-cadre{position:relative;height:min(78svh,760px);aspect-ratio:9/16;background:var(--gris);overflow:hidden}
.lecteur-cadre iframe,.lecteur-cadre img{width:100%;height:100%;border:0;object-fit:cover}
.lecteur-tx{display:grid;gap:16px;justify-items:start}
.lecteur-tx h2{font-size:var(--t-h3)}
.lecteur-tx p{color:var(--doux)}

/* page En vidéo */
.une{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(30px,6vw,100px);align-items:center;padding:0 var(--marge) var(--section)}
.une .video-v{max-height:78svh}
.une-tx{display:grid;gap:20px;justify-items:start;max-width:520px}
.une-tx h2{font-size:var(--t-h2)}
.une-tx p{color:var(--doux);font-size:16px}
.compte{display:flex;align-items:center;gap:16px}
.compte .rond{width:58px;height:58px}
.compte b{display:block;font-weight:500;font-size:13px;letter-spacing:.06em}
.mur-videos{padding:34px var(--marge) var(--section)}
.mur-videos .videos{row-gap:40px}
.bande-tt{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:26px var(--marge);margin:0 var(--marge) var(--section);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.bande-tt p{font-size:var(--t-h3);font-weight:300;text-transform:uppercase;line-height:1.1}
.vu-tiktok{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.vu-tiktok .video h3{font-size:11px}

@media (max-width:1100px){
  .videos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .videos{gap:10px}
  .video h3{font-size:11px}
  .lecture{width:48px;height:48px;margin:-24px}
  .lecture::after{left:19px;top:15px;border-left-width:13px;border-top-width:9px;border-bottom-width:9px}
  .lecteur{grid-template-columns:1fr;align-content:start;overflow-y:auto;padding-top:64px}
  .lecteur-cadre{height:62svh;margin:0 auto}
  .une{grid-template-columns:1fr}
  .une .video-v{max-height:none}
  .bande-tt{margin:0 0 var(--section)}
}