/* ═══════════════════════════════════════════════════════════════
   AMAYNÜ — ADAPTATION TÉLÉPHONE
   Chargée en dernier sur toutes les pages : elle a le dernier mot.
   Rien ici ne touche l'affichage sur grand écran.
   ═══════════════════════════════════════════════════════════════ */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}   /* jamais hidden : cela casse position:sticky */
/* un doigt ne vise pas comme une souris */
@media(hover:none){
  a,button{-webkit-tap-highlight-color:rgba(168,138,92,.18)}
  a:hover::after{width:0}          /* pas de soulignement collé après le tap */
}
/* le glissé horizontal du visualiseur ne doit pas bloquer le défilement */
.v360-stage{touch-action:pan-y}
.v360{cursor:default}
@media(pointer:coarse){
  .v360-rail{height:2px;margin-top:26px}
  .v360-rail::before{inset:-18px 0}
}

/* ═══════════ MENU PLEIN ÉCRAN ═══════════ */
#mnav{position:fixed;inset:0;z-index:500;background:#0A0908;color:#EFE9DF;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1),visibility .55s}
#mnav.on{opacity:1;visibility:visible;transform:none}
html.mnav-open,html.mnav-open body{overflow:hidden}

#mnav .mn-bg{position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 38% at 78% 14%, rgba(196,169,124,.22), transparent 68%),
    radial-gradient(40% 46% at 12% 82%, rgba(142,33,48,.26), transparent 70%)}
#mnav .mn-top{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:space-between;padding:22px 20px;
  border-bottom:1px solid rgba(216,204,188,.16)}
#mnav .mn-top img{width:112px;filter:invert(1)}
#mnav .mn-x{font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  padding:14px 4px 14px 18px;cursor:pointer;color:#EFE9DF}

#mnav .mn-in{position:relative;z-index:2;flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:26px 20px 40px}
#mnav nav{display:flex;flex-direction:column}
#mnav nav a{display:flex;align-items:baseline;gap:14px;
  font-family:var(--serif,'Bodoni Moda',serif);font-weight:300;
  font-size:clamp(26px,7.4vw,38px);line-height:1;letter-spacing:-.02em;
  padding:18px 0;border-bottom:1px solid rgba(216,204,188,.14);color:#EFE9DF}
#mnav nav a em{font-style:italic;color:#C4A97C}
#mnav nav a i{font-style:normal;font-family:var(--sans,sans-serif);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.42}
#mnav nav a.hi{color:#C4A97C}
#mnav .mn-sub{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
#mnav .mn-sub a{border:1px solid rgba(216,204,188,.34);padding:14px 20px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#EFE9DF}
#mnav .mn-sub a.solid{background:#D8CCBC;color:#000;border-color:#D8CCBC}
#mnav .mn-foot{margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(216,204,188,.14);
  font-size:11.5px;line-height:2;opacity:.55}

/* ═══════════ LE BOUTON MENU ═══════════ */
@media(max-width:900px){
  header nav.left{display:none}
  header nav.right a:not(.burger){display:none}
  .hin nav.l{display:none}
  .hin nav.r a:not(.burger){display:none}
  .burger{display:block!important;font-size:10px;letter-spacing:.24em;
    text-transform:uppercase;padding:10px 0 10px 14px}
  header{padding:18px 22px}
  header.compact{padding:12px 22px}
  header .logo img,.hin .logo img{width:122px}
  header.compact .logo img{width:112px}
  .hin{padding:16px 22px}
}

/* ═══════════ TÉLÉPHONE ═══════════ */
@media(max-width:720px){

  /* — l'ouverture — */
  #splash .frame{inset:16px}
  #splash .corner{width:40px;height:40px}
  #splash .corner.tl,#splash .corner.bl{left:26px}
  #splash .corner.tr,#splash .corner.br{right:26px}
  #splash .corner.tl,#splash .corner.tr{top:26px}
  #splash .corner.bl,#splash .corner.br{bottom:26px}
  #splash .medal{width:min(150vmin,760px);height:min(150vmin,760px)}
  #splash .inner{gap:28px;padding:0 26px}
  #splash img.lg{width:min(240px,64vw)}
  #splash .choices{flex-direction:column;width:100%;max-width:320px}
  #splash button{padding:19px 22px;font-size:9.5px}
  #splash button+button{border-left:none;border-top:1px solid rgba(28,26,23,.28)}

  /* — le hero : la robe d'abord, le texte dessous — */
  body.locked{height:100svh}
  .hero{--pieceH:min(56svh,470px);--pieceTop:74px;
    padding:var(--pieceTop) 20px 96px;min-height:100svh}
  .hero .piece{height:var(--pieceH)}
  .hero .word h1{font-size:clamp(40px,15.5vw,96px);line-height:.86}
  /* le titre doit rester DERRIÈRE la robe, pas sous elle : la colonne
     s'allonge sur téléphone, donc on le recale sur la robe elle-même */
  .hero .word{justify-content:flex-start;
    padding-top:calc(var(--pieceTop) + var(--pieceH) * .26)}
  .hero .glow{width:126vmin;height:126vmin;top:44%}
  .hero .carpet{width:92vmin;height:60vmin}
  .hero .side,.hero .meta{position:static;max-width:none;text-align:center;
    margin:0 auto;padding:0 4px}
  .hero .side{margin-top:26px}
  .hero .side p{font-size:13.5px}
  .hero .side .cta{padding:16px 30px}
  .hero .meta{display:none}       /* les mêmes infos sont dans le bandeau */
  .hero .ticker{position:static;margin-top:30px;padding:14px 0 0;
    justify-content:center;text-align:center;font-size:9px;gap:8px 14px}
  .scrollhint{display:none}

  /* — le texte long respire moins — */
  .manifesto{padding:96px 20px 84px}
  .manifesto .frise{margin-bottom:34px}
  .manifesto .sig{margin-top:30px}
  .geste{padding:88px 20px}
  .geste .head{margin-bottom:38px}
  .trio>div{padding:34px 24px}
  .trio .mot{width:130px;height:130px;right:-26px;top:-26px}

  /* — le tunnel : allégé, recentré — */
  .loom{height:260vh}
  .loom .caption{padding:0 24px}
  .loom .caption h3{font-size:clamp(26px,8vw,44px)}
  .loom .caption p{font-size:13.5px;line-height:1.95}
  .loom .gauge{display:none}
  .loom .cue{left:20px;right:20px;bottom:22px}
  .loom .warp{opacity:.34}

  /* — grilles — */
  .sgrid,.steps,.trio,.fwrap,.duo{grid-template-columns:1fr!important}
  .sgrid .scard:nth-child(n){margin-top:0!important}
  .selec,.cols,.mesure,.rdv{padding-left:20px;padding-right:20px}
  .pgrid{grid-template-columns:1fr!important}
  .pgrid .pc:nth-child(n){margin-top:0!important}
  .chead{padding:78px 20px 46px}
  .chead .row{margin-top:30px;padding-top:24px}
  .chead .facts{gap:26px}
  .chead .facts div span{font-size:26px}
  .pieces{padding:14px 20px 90px}

  /* — fiche pièce — */
  .pw{padding:0 20px}
  .prod{gap:38px;padding:24px 0 84px}
  .info h1{font-size:clamp(34px,10.5vw,60px)}
  .info .accroche{font-size:20px;padding-left:18px;margin-top:26px}
  .acq{padding:26px 22px}
  .also{padding:84px 0}
  .also .g{grid-template-columns:1fr 1fr;gap:14px}
  .also a h4{font-size:17px}

  /* — le vestiaire — */
  .vest{padding:56px 20px 90px}
  .vest .row{margin-top:28px;padding-top:22px}
  .grid{gap:40px 0;margin-top:44px}

  /* — pied de page — */
  footer{padding:70px 20px 34px}
  .fwrap{gap:38px}
  .fbot{margin-top:46px;flex-direction:column;gap:8px;text-align:center;
    justify-content:center}
  footer img{width:150px}

  /* — le panneau de démo n'a rien à faire sur un téléphone — */
  .ctrl{display:none!important}
}

/* ═══════════ PETIT TÉLÉPHONE ═══════════ */
@media(max-width:400px){
  .hero{--pieceH:min(50svh,410px)}
  .hero .word h1{font-size:clamp(34px,14vw,72px)}
  .also .g{grid-template-columns:1fr}
  #mnav nav a{font-size:clamp(23px,7vw,30px);padding:15px 0}
}

/* ═══════════ ÉCRAN COUCHÉ, PEU HAUT ═══════════ */
@media(max-height:520px) and (orientation:landscape){
  .hero{--pieceH:min(78svh,360px);--pieceTop:80px;
    min-height:auto;padding:80px 24px 40px}
  #splash .medal{display:none}
  #mnav nav a{font-size:20px;padding:11px 0}
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTIONS DE LISIBILITÉ
   ═══════════════════════════════════════════════════════════════ */

/* 1. Le texte du site était trop petit d'un cran, partout. */
.hero .side p{font-size:15px!important;line-height:2!important}
.manifesto .sig,.chead p,.geste .head p,.vest .row p,.mh .row p{font-size:16.5px!important}
.info .txt p{font-size:16.5px!important;line-height:2.05!important}
.specs div{font-size:14.5px!important}
.acq p{font-size:14.5px!important}
.trio p,.pc .s,.it .cap .s{font-size:14px}
.trio p{line-height:2.05}
.mono{font-size:10.5px}
.pc h3,.it .cap h3{font-size:24px}
.mgrid h3{font-size:24px}
.mgrid .s{font-size:10.5px}
.dgrid figcaption b{font-size:21px}
footer li{font-size:14px}
.loom .caption p{font-size:16px!important;line-height:2!important}
.cend p{font-size:16.5px}
.et{font-size:9.5px}
.et .aide span{font-size:9.5px}

/* 2. Le titre du hero passait derrière la robe et devenait illisible.
      À la fin de l'apparition, le texte doit être franc — pas un souvenir. */
.mots span{opacity:0}
.mots.in span{opacity:1!important;filter:none!important}
.hero .side{--voile:rgba(251,249,245,.86)}
.hero .side p.mots.in{color:#241F1A!important;font-weight:400}
.hero .side .k{color:#8A6C36!important}

/* le bloc de texte du hero se pose sur un voile : sur une photo claire,
   du texte sans fond n'est jamais sûr d'être lisible */
.hero .side{background:var(--voile);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:24px 26px;border-left:1px solid var(--gold)}
@media(max-width:720px){
  .hero .side{padding:20px;margin-left:0;margin-right:0}
  .hero .side p{font-size:14.5px!important}
}

/* ═══ LES SIGNES, PLUS DISCRETS ═══
   Ils gardent toute leur force dans le tunnel et sur l'accueil, où ils
   racontent quelque chose. Ailleurs ils n'étaient que du décor : on les
   ramène à une présence, pas à un motif. */
.cend .msk,.mot .msk,.chead .msk,.vest .msk,
.trio .mot,.pc .ph.soon .mk,.cover .mot{opacity:.16!important}
.cend .msk{opacity:.2!important}
.pieces .msk,.prod .msk,.also .msk{opacity:.12!important}
.trio .mot{width:130px;height:130px;right:-30px;top:-30px}
.cover .mot{transform:scale(.72)}

/* ═══ SÉLECTEUR DE LANGUE ═══ */
.langsw{cursor:default}
.langsw span{cursor:pointer;padding:2px 1px;transition:opacity .35s ease}
.langsw span:not(.on){opacity:.42}
.langsw span.on{opacity:1;border-bottom:1px solid currentColor}
.langsw::after{display:none!important}
@media(max-width:900px){header .langsw,.hin .langsw{display:none!important}}


/* ═══════════════════════════════════════════════════════════════
   LA ROBE DÉTOURÉE SUR L'ACCUEIL
   Aucun mélange, aucun cadre, aucun calque isolé : la robe est
   simplement au premier plan et le titre passe derrière elle.
   Les modes de fusion créaient un rectangle visible autour de la
   silhouette — c'est le prix d'un calque isolé sur fond clair.
   ═══════════════════════════════════════════════════════════════ */
.hero.detoure .piece{
  z-index:3;                      /* devant le titre */
  background:none;border:none;box-shadow:none;
  mix-blend-mode:normal;isolation:auto;overflow:visible}
.hero.detoure .piece::before,
.hero.detoure .piece::after{content:none!important}
.hero.detoure .piece img{
  background:none;border:none;box-shadow:none;
  filter:drop-shadow(0 34px 46px rgba(70,45,32,.22));
  mix-blend-mode:normal}
.hero.detoure .word{
  z-index:2;                      /* derrière la robe */
  mix-blend-mode:normal}
.hero.detoure .word h1{color:var(--ink);mix-blend-mode:normal}
.hero.detoure .word h1 em{color:var(--blood)}
.hero.detoure .plinth{display:none}

/* la robe et le titre, un cran plus grands sur téléphone aussi */
@media(max-width:720px){
  .hero{--pieceH:min(62svh,540px)}
  .hero .word h1{font-size:clamp(44px,17vw,112px)!important}
}
@media(max-width:400px){
  .hero{--pieceH:min(55svh,460px)}
  .hero .word h1{font-size:clamp(38px,15.5vw,84px)!important}
}
/* le mouvement doit rester une caresse, jamais un sursaut */
.hero .piece,.hero .word{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .hero .piece,.hero .word{transform:none!important}
}

/* ═══ AIDES AU DÉFILEMENT ═══
   Discrètes, à droite, sur toute la hauteur utile. La barre entre les
   deux flèches montre où l'on en est dans la page. */
#navrap{position:fixed;right:22px;bottom:26px;z-index:180;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s var(--ease,ease),transform .5s var(--ease,ease),visibility .5s}
#navrap.on{opacity:1;visibility:visible;transform:none}
#navrap button{width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(28,26,23,.28);background:rgba(251,249,245,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#1C1A17;cursor:pointer;font-size:15px;line-height:1;
  transition:background .35s var(--ease,ease),color .35s var(--ease,ease),
             border-color .35s var(--ease,ease),opacity .35s var(--ease,ease)}
#navrap button:hover{background:#1C1A17;color:#FBF9F5;border-color:#1C1A17}
#navrap .nr-j{width:1px;height:60px;background:rgba(28,26,23,.2);position:relative}
#navrap .nr-j i{position:absolute;inset:0;background:#1C1A17;
  transform-origin:50% 0;transform:scaleY(0)}
#navrap.fin .nr-b{opacity:.3;pointer-events:none}

/* sur fond sombre, les flèches s'inversent */
.t-night ~ #navrap,.t-black ~ #navrap{}
@media(max-width:720px){
  #navrap{right:14px;bottom:16px;gap:8px}
  #navrap button{width:38px;height:38px;font-size:14px}
  #navrap .nr-j{height:40px}
}
@media print{#navrap{display:none}}

/* ═══════════════════════════════════════════════════════════════
   TABLETTE — 721 à 1100 px

   C'est la zone qu'aucune règle ne couvrait : les bascules du site
   sautaient de 720 px (téléphone) à 1100 px (bureau). Un iPad en
   portrait fait 768 px et un iPad en paysage 1024 px — tous deux
   tombaient entre les deux, avec une mise en page de bureau serrée ou
   une image de produit démesurée.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:721px) and (max-width:1100px){

  /* La respiration : 44 px de marge est une mesure de grand écran. */
  .hin, .chead, .cwrap, .pw, .page, .inv, .vf{ padding-left:30px; padding-right:30px }

  /* La fiche produit passe en une colonne dès 1100 px. L'image
     occuperait alors toute la largeur : sur un iPad, cela fait une
     photo de 1000 px de haut qu'on ne voit pas d'un seul regard. */
  .prod > div:first-child{ max-width:620px; margin:0 auto }
  .prod .info{ max-width:720px; margin:0 auto }

  /* La galerie reste à deux colonnes : une seule donnerait des images
     énormes, trois les rendraient illisibles. */
  .gal{ grid-template-columns:1fr 1fr; gap:16px }

  /* Les grilles de collection : trois pièces par ligne tiennent bien
     sur un iPad en paysage, deux en portrait. */
  .pgrid{ grid-template-columns:repeat(2,1fr); gap:28px 20px }
  .mgrid{ grid-template-columns:repeat(3,1fr) }
  .grid { grid-template-columns:1fr 1fr; gap:44px 24px }
  .grid .it:nth-child(n){ margin-top:0 }
  .grid .it:nth-child(2n){ margin-top:44px }

  /* Le récapitulatif du rendez-vous passe au-dessus du formulaire :
     on doit voir ce qu'on commande avant de le remplir. */
  .page{ grid-template-columns:1fr; gap:44px }
  .recap{ position:static; order:-1; max-width:620px; margin:0 auto }

  /* Le pied de page à quatre colonnes devient illisible sous 1100 px. */
  .fwrap{ grid-template-columns:1fr 1fr; gap:40px }
}

/* ═══════════════════════════════════════════════════════════════
   IPAD EN PORTRAIT — 768 px exactement

   La largeur la plus répandue après le téléphone.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:721px) and (max-width:820px){
  .pgrid, .mgrid, .grid{ grid-template-columns:1fr 1fr }
  .steps4{ grid-template-columns:1fr 1fr }
  .modes{ grid-template-columns:1fr }
  .f2{ grid-template-columns:1fr 1fr }
  .slots{ grid-template-columns:repeat(2,1fr) }
}

/* ═══════════════════════════════════════════════════════════════
   LE DOIGT

   Une cible de moins de 44 px se rate une fois sur trois. Cela vaut
   pour la tablette comme pour le téléphone — on ne vise pas mieux
   sur un écran plus grand.
   ═══════════════════════════════════════════════════════════════ */
@media (pointer:coarse){
  .hin a, .burger, .langsw,
  .btn, .submit, .pas-prec, .pas-suiv,
  .slot, .place, .pm, .mode,
  .outils button, .champ button{
    min-height:44px;
  }
  .hin a{ display:inline-flex; align-items:center }

  /* Le survol n'existe pas au doigt : ce qui ne se montrait qu'au
     survol doit être visible d'emblée. */
  .gal figure .zoomhint{ opacity:.8 }
  .it .go, .pc .go{ opacity:1 }
}

/* ═══════════════════════════════════════════════════════════════
   L'INVENTAIRE SUR TABLETTE

   Huit colonnes ne tiennent pas sous 1100 px. On passe en fiches,
   comme sur téléphone, mais à deux par ligne.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:721px) and (max-width:1100px){
  .inv table, .inv thead, .inv tbody, .inv tr, .inv th, .inv td{ display:block }
  .inv thead{ display:none }
  .inv tbody{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
  .inv tr{ border:1px solid rgba(28,26,23,.18); padding:16px }
  .inv td{ border:none; padding:3px 0 }
  .compte{ grid-template-columns:repeat(3,1fr) }
}

/* Rien ne doit dépasser en largeur, sur aucun écran : un défilement
   horizontal sur un site de couture donne l'impression d'un accident.

   ATTENTION — overflow-x:hidden sur html ou body fait de la page un
   conteneur de défilement, et TOUT position:sticky à l'intérieur cesse
   de coller. La scène du tissage, qui s'épingle pendant la traversée,
   se mettait à défiler comme un bloc ordinaire.

   overflow-x:clip coupe ce qui dépasse SANS créer de conteneur : le
   collant continue de fonctionner. C'est la seule forme utilisable ici. */
html, body{ overflow-x:clip; max-width:100% }
img, video, table, pre{ max-width:100% }