@import url("fonts.css");

/* ============================================================
   Elle et Lui Photographie — système visuel
   Éditorial clair. Le blanc porte tout, le rouge ponctue.
   ============================================================ */

:root{
  --papier:#FFFFFF;
  --creme:#F6F5F3;
  --creme-2:#EEEBE6;
  --encre:#101112;
  --encre-2:#33363A;
  --gris:#6B6E72;
  /* --gris-clair ne porte JAMAIS de texte informatif : 2,48 sur blanc, très en dessous des
     4,5 exigés par le WCAG AA (mesuré le 2026-09-07). Il ne reste que là où la règle ne
     s'applique pas : une pastille décorative, un texte indicatif de champ doublé d'un
     aria-label, et deux commandes désactivées (aria-disabled). Pour du texte, --gris. */
  --gris-clair:#A2A5A8;
  --trait:#E3E2DF;
  --trait-fort:#C9C7C2;
  --rouge:#C8102E;

  --col:1240px;
  --pad:32px;
  --band:clamp(64px, 9vw, 128px);
}

*{box-sizing:border-box;margin:0}
/* L'attribut `hidden` doit gagner sur toute regle qui pose un `display`.
   Sans ca : le bandeau cookies ne se fermait jamais (27/08), le tunnel de
   commande affichait son formulaire et ses totaux vides sur un panier vide,
   et le bouton « Retour » apparaissait des la premiere etape. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  background:var(--papier);color:var(--encre);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--rouge);outline-offset:3px;
}

/* Lien d'évitement : hors écran tant qu'il n'a pas le focus, visible dès la première
   tabulation. Il évite de traverser toute la navigation au clavier à chaque page. */
.evite{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--encre);color:var(--papier);padding:12px 18px;
  font-size:.9rem;font-weight:500;text-decoration:none;border-radius:0 0 3px 0}
.evite:focus{left:0}
main:focus{outline:none}

/* Lu par les lecteurs d'écran, jamais affiché : sert à rétablir une hiérarchie de titres
   là où la maquette n'en montre pas, sans rien changer à ce qui se voit. */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- structure ---------- */
.wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:var(--band)}
.band--creme{background:var(--creme)}
.band--encre{background:var(--encre);color:var(--papier)}
.band--encre .lead,.band--encre .muted{color:#A8ABAE}
.rule{height:1px;background:var(--trait);border:0}
.band--encre .rule{background:#2B2E32}

/* ---------- typographie ---------- */
.display{font-weight:700;letter-spacing:-.035em;line-height:.96;text-wrap:balance}
.d-xl{font-size:clamp(2.9rem,7vw,5.6rem)}
.d-l {font-size:clamp(2.1rem,4.4vw,3.5rem)}
h2.sec{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.028em;line-height:1.06;text-wrap:balance}
h3{font-size:1.08rem;font-weight:600;letter-spacing:-.008em;line-height:1.3}
.lead{font-size:clamp(1.02rem,1.5vw,1.22rem);font-weight:300;line-height:1.55;color:var(--encre-2);max-width:52ch}
.muted{color:var(--gris)}
.label{
  font-size:.66rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gris);display:inline-block;
}
.label--rouge{color:var(--rouge)}
.sans-coupure{white-space:nowrap}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.serif-it{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400}
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(30px,4vw,54px);max-width:62ch}

/* ---------- navigation à deux univers ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:saturate(140%) blur(12px)}
.nav-haut{border-bottom:1px solid var(--trait)}
.nav-in{max-width:var(--col);margin-inline:auto;padding:0 var(--pad);display:flex;align-items:center;gap:20px}
.nav-haut .nav-in{height:66px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:1.02rem;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--rouge);flex:none}
.brand-logo{height:24px;width:auto;display:block}
.brand-txt{display:none;align-items:center;gap:10px}
@media(max-width:640px){
  .brand-logo{display:none}
  .brand-txt{display:flex}
}

.univers{display:flex;gap:2px;background:var(--creme);padding:3px;border:1px solid var(--trait)}
.univers a{padding:8px 18px;font-size:.84rem;font-weight:600;letter-spacing:.02em;color:var(--gris);white-space:nowrap;transition:.16s}
.univers a:hover{color:var(--encre)}
.univers a[data-on]{background:var(--encre);color:var(--papier)}

.nav-fin{display:flex;align-items:center;gap:12px}
.nav-contact{font-size:.86rem;font-weight:500;color:var(--encre-2)}
.nav-contact:hover{color:var(--rouge)}
.nav-cta{padding:10px 18px;font-size:.72rem}

.nav-bas{border-bottom:1px solid var(--trait);background:var(--papier)}
.nav-bas--vide{display:none}
.nav-bas .nav-in{height:46px;gap:26px;overflow-x:auto;scrollbar-width:none}
.nav-bas .nav-in::-webkit-scrollbar{display:none}
.nav-l a{position:relative;font-size:.86rem;font-weight:500;color:var(--gris);white-space:nowrap;padding-block:13px}
.nav-l a:hover{color:var(--encre)}
.nav-l a[aria-current]{color:var(--encre);box-shadow:inset 0 -2px 0 var(--rouge)}
.nav-l-contact{display:none}
.nav-burger{display:none}

@media(max-width:900px){
  .nav-contact{display:none}
  .nav-haut .nav-in{gap:12px}
  .univers a{padding:8px 12px;font-size:.78rem}
  .nav-cta{display:none}
  .nav-burger{display:flex;flex-direction:column;gap:4px;padding:8px;margin-right:-8px}
  .nav-burger i{width:20px;height:1.5px;background:var(--encre);display:block}
  .nav-bas{border-bottom:0}
  .nav-bas .nav-in{flex-direction:column;align-items:stretch;height:auto;gap:0;padding-block:0}
  .nav-l:not([data-open]){display:none}
  .nav-l[data-open]{border-bottom:1px solid var(--trait);padding-bottom:10px}
  .nav-l a{padding:13px 0;border-bottom:1px solid var(--trait);font-size:1rem}
  .nav-l a[aria-current]{box-shadow:none;color:var(--rouge)}
  .nav-l-contact{display:block}
}
@media(max-width:480px){
  .nav-haut .nav-in{padding:0 12px;gap:6px}
  .nav-fin{gap:5px}
  .brand{font-size:.92rem;gap:6px}
  .univers a{padding:8px 8px;font-size:.72rem;letter-spacing:0}
  .pan-lien{padding:7px 7px;gap:5px}
  .nav-burger{margin-right:-6px}
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--encre);transition:background .2s,color .2s,border-color .2s;
  white-space:nowrap;
}
.btn--p{background:var(--encre);color:var(--papier)}
.btn--p:hover{background:var(--rouge);border-color:var(--rouge)}
.btn--s{background:transparent;color:var(--encre)}
.btn--s:hover{background:var(--encre);color:var(--papier)}
.band--encre .btn--s{border-color:#4A4E53;color:var(--papier)}
.band--encre .btn--s:hover{background:var(--papier);color:var(--encre)}
.btn[disabled]{opacity:.4;pointer-events:none}
.lnk{
  display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding-bottom:5px;border-bottom:1px solid currentColor;
}
.lnk:hover{color:var(--rouge)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- photo ---------- */
.ph{display:block;width:100%;height:100%;object-fit:cover;background:var(--creme-2)}
/* Le point d'attention (24/10) : une photo ne se recadre pas ; quand le gabarit impose un cadre,
   c'est le cadre qui glisse sur l'image. Sans point choisi, un portrait montre son haut. */
.ph--haut{object-position:50% 10%}
.ph--bas{object-position:50% 90%}
.ph--gauche{object-position:10% 50%}
.ph--droite{object-position:90% 50%}
.ph--haut-gauche{object-position:10% 10%}
.ph--haut-droite{object-position:90% 10%}
.ph--bas-gauche{object-position:10% 90%}
.ph--bas-droite{object-position:90% 90%}
figure{margin:0;position:relative;overflow:hidden;background:var(--creme-2)}
.cap{
  position:absolute;left:0;bottom:0;padding:10px 14px;background:rgba(255,255,255,.94);
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- accroche ---------- */
.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:min(86vh,780px)}
.hero-txt{
  display:flex;flex-direction:column;justify-content:center;gap:26px;
  padding:clamp(40px,6vw,84px) clamp(28px,5vw,72px);
}
.hero-txt .d-xl{max-width:13ch}
.hero-ph{position:relative}
.hero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 26px;padding-top:6px;border-top:1px solid var(--trait)}
.hero-meta span{font-size:.74rem;font-weight:500;letter-spacing:.05em;color:var(--gris);padding-top:12px}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-ph{aspect-ratio:4/3;order:-1}
}

/* ---------- duo ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(18px,2.4vw,34px)}
.duo-c{display:flex;flex-direction:column;gap:20px}
.duo-c figure{aspect-ratio:4/5}
.duo-c figure img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.duo-c:hover figure img{transform:scale(1.035)}

/* ---------- galerie ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,18px)}
.gal figure{overflow:hidden}
.gal figure img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.04)}
.g-a{grid-column:span 7;aspect-ratio:4/3}
.g-b{grid-column:span 5;aspect-ratio:3/4}
.g-c{grid-column:span 4;aspect-ratio:3/4}
.g-d{grid-column:span 8;aspect-ratio:16/10}
.g-e{grid-column:span 6;aspect-ratio:1}
.g-f{grid-column:span 12;aspect-ratio:21/9}
/* Les cellules a la forme des photos (24/10, GrilleGalerie) : paysage 3/2, portrait 3/4,
   rangees par lignes de douze colonnes, pour ne pas recadrer. `.gal .g-…` pese plus que les
   regles generales `.gal figure` du telephone, plus bas. */
.gal .g-l8{grid-column:span 8;aspect-ratio:3/2}
.gal .g-l6{grid-column:span 6;aspect-ratio:3/2}
.gal .g-l12{grid-column:span 12;aspect-ratio:3/2}
.gal .g-p4{grid-column:span 4;aspect-ratio:3/4}
.gal .g-p6{grid-column:span 6;aspect-ratio:3/4}
@media(max-width:820px){
  .gal .g-l8,.gal .g-l6,.gal .g-l12,.gal .g-l8:first-child,.gal .g-l6:first-child,.gal .g-l12:first-child{grid-column:span 12;aspect-ratio:3/2}
  .gal .g-p4,.gal .g-p6,.gal .g-p4:first-child,.gal .g-p6:first-child,.gal .g-p4:last-child:nth-child(even),.gal .g-p6:last-child:nth-child(even){grid-column:span 6;aspect-ratio:3/4}
}
@media(max-width:820px){
  .g-a,.g-b,.g-c,.g-d,.g-e{grid-column:span 6;aspect-ratio:3/4}
  .g-f{grid-column:span 12;aspect-ratio:3/2}
}
/* sur telephone, une photo par ecran fait trois ecrans de galerie : la premiere
   reste pleine largeur, les suivantes vont deux par deux. On raisonne sur le RANG
   et pas sur la classe : un `.g-a` au milieu de la serie ouvrait une pleine largeur
   et laissait un trou dans la rangee precedente. */
@media(max-width:520px){
  .gal figure{grid-column:span 6;aspect-ratio:3/4}
  .gal figure:first-child{grid-column:span 12;aspect-ratio:4/3}
  /* nombre pair de photos : la derniere serait seule sur sa rangee */
  .gal figure:last-child:nth-child(even){grid-column:span 12;aspect-ratio:4/3}
}

/* ---------- produits ---------- */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(238px,100%),1fr));gap:1px;background:var(--trait);border:1px solid var(--trait)}
.prod{background:var(--papier);display:flex;flex-direction:column;transition:background .2s}
.prod:hover{background:var(--creme)}
.prod figure{aspect-ratio:1;background:var(--papier);display:grid;place-items:center;padding:16px}
.prod figure img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 13px rgba(16,17,18,.17))}
.prod-b{padding:0 20px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.prod-m{font-size:.63rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--gris)}
.prod-n{font-size:.97rem;font-weight:500;line-height:1.34}
.prod-p{font-family:"IBM Plex Mono",monospace;font-size:1.02rem;font-weight:500;margin-top:auto;padding-top:10px}
.stock{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--gris)}
.stock i{width:5px;height:5px;border-radius:50%;background:#2E7D4F;flex:none}
.stock--cmd i{background:var(--gris-clair)}

/* ---------- tableaux de specs ---------- */
.specs{border-top:1px solid var(--trait)}
.specs div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--trait)}
.specs dt{color:var(--gris);font-size:.92rem}
.specs dd{font-family:"IBM Plex Mono",monospace;font-size:.86rem;text-align:right}

/* ---------- services ---------- */
.serv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:1px;background:var(--trait);border-block:1px solid var(--trait)}
.serv > div{background:var(--papier);padding:24px 22px;display:flex;flex-direction:column;gap:8px}
.band--creme .serv > div{background:var(--creme)}

/* ---------- avis ---------- */
.avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));gap:clamp(20px,2.6vw,40px)}
.avis blockquote{display:flex;flex-direction:column;gap:16px;margin:0}
.avis q{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.28rem;line-height:1.44;quotes:"«\00a0" "\00a0»"}
.avis figcaption,.avis .who{font-size:.8rem;color:var(--gris);margin-top:auto}
.stars{color:var(--rouge);font-size:.78rem;letter-spacing:.24em}

/* ---------- pied ---------- */
.foot{background:var(--encre);color:var(--papier);padding-block:clamp(48px,6vw,76px) 34px}
.foot a{color:#B9BCBF}
.foot a:hover{color:var(--papier)}
.foot-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
@media(max-width:820px){.foot-g{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-g{grid-template-columns:1fr}}
.foot-c{display:flex;flex-direction:column;gap:11px;font-size:.89rem}
.foot .label{color:#7E8286;margin-bottom:3px}
.foot-bot{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  margin-top:46px;padding-top:20px;border-top:1px solid #2B2E32;font-size:.78rem;color:#7E8286;
}

/* Crédit « Propulsé par MyBoook » (rangée basse du pied). Rendu de la référence MyBoook :
   lien en inline-flex, 12/16 px, 60 % d'opacité (100 % au survol), logo Mb de 15 px passé
   en gris. La couleur est celle du texte du pied (--papier) et non celle de `.foot a` ou de
   `.foot-bot` : à 60 %, le gris #7E8286 de la rangée tomberait à ~2,5:1 sur l'encre. */
.foot .powered-by-myboook,.foot .powered-by-myboook:hover{color:var(--papier);text-decoration:none}
.powered-by-myboook{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;line-height:16px;opacity:.6;transition:opacity .2s ease;
}
.powered-by-myboook:hover{opacity:1}
.powered-by-myboook__logo{
  display:inline-block;vertical-align:middle;width:15px;height:15px;
  border-radius:3px;object-fit:cover;filter:grayscale(1);opacity:.9;
}

/* ---------- bandeau démo ---------- */
.demo-bar{
  background:var(--rouge);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:9px var(--pad);display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;
}

/* ---------- utilitaires ---------- */
.stack{display:flex;flex-direction:column}
.gap-s{gap:10px}.gap-m{gap:20px}.gap-l{gap:34px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(26px,4vw,66px);align-items:start}
.pill{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--trait-fort);
  padding:7px 14px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- garde-fous anti-débordement ---------- */
img,figure,video,canvas{max-width:100%}
input,select,textarea,button{max-width:100%;box-sizing:border-box}
.split > *,.stack > *,.duo-c > *,.hero-txt > *{min-width:0}
.gal,.prods,.duo,.split,.serv,.avis{min-width:0}
table{max-width:100%}

/* ---------- barre de navigation sur petit écran ---------- */
.nav-cta{padding:11px 20px}
@media(max-width:700px){
  .nav-in{gap:10px}
  .nav-cta{padding:9px 13px;font-size:.7rem;letter-spacing:.06em}
  .brand{font-size:.95rem}
}
@media(max-width:900px){
  .nav-cta{display:none}
}

/* ---------- panier ---------- */
.pan-lien{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;
  border:1px solid var(--trait);color:var(--encre);transition:.18s}
.pan-lien:hover{border-color:var(--encre)}
.pan-lien[data-plein]{border-color:var(--rouge);color:var(--rouge)}
.pan-n{font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:500;min-width:1ch}
@media(max-width:700px){.pan-lien{padding:8px 10px}.pan-n{font-size:.74rem}}

/* ---------- vignettes fiche produit ---------- */
.vgn{background:var(--creme);aspect-ratio:1;display:grid;place-items:center;padding:10%;
  border:1px solid transparent;cursor:pointer;transition:border-color .15s}
.vgn:hover{border-color:var(--trait-fort)}
.vgn[aria-pressed="true"]{border-color:var(--encre)}
.vgn img{width:100%;height:100%;object-fit:contain}

#cook[hidden]{display:none}
#cook{position:fixed;left:16px;right:16px;bottom:16px;z-index:95;background:var(--papier);
  border:1px solid var(--encre);box-shadow:0 18px 50px -20px rgba(0,0,0,.4);
  padding:18px 20px;display:flex;gap:16px 22px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;max-width:760px;margin-inline:auto}
#cook p{font-size:.9rem;color:var(--encre-2);flex:1 1 300px;line-height:1.5}
#cook .cook-b{display:flex;gap:10px}
#cook .btn{padding:11px 18px;font-size:.7rem}

#pan-toast{position:fixed;right:20px;bottom:20px;z-index:90;background:var(--papier);
  border:1px solid var(--encre);box-shadow:0 14px 40px -18px rgba(0,0,0,.4);
  padding:14px 16px;display:none;align-items:center;gap:14px;max-width:min(420px,calc(100vw - 40px))}
#pan-toast[data-on]{display:flex;animation:toast .28s ease}
@keyframes toast{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#pan-toast img{width:42px;height:42px;object-fit:contain;flex:none;background:var(--creme)}
#pan-toast div{display:flex;flex-direction:column;gap:2px;min-width:0}
#pan-toast strong{font-size:.82rem;font-weight:600}
#pan-toast span{font-size:.8rem;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pan-toast .btn{padding:10px 14px;font-size:.7rem;white-space:nowrap}
@media(max-width:560px){#pan-toast{right:12px;left:12px;bottom:12px}#pan-toast .btn{display:none}}

.pan-l{display:grid;grid-template-columns:84px 1fr auto auto;gap:0 20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--trait)}
.pan-l img{width:84px;height:84px;object-fit:contain;background:var(--creme);padding:8px}
.pan-i{display:flex;flex-direction:column;gap:5px;min-width:0}
.pan-nom{font-size:.98rem;font-weight:500;line-height:1.3}
.pan-nom:hover{color:var(--rouge)}
.pan-sup{align-self:flex-start;font-size:.76rem;color:var(--gris);border-bottom:1px solid var(--trait-fort);padding-bottom:2px;margin-top:3px}
.pan-sup:hover{color:var(--rouge);border-color:var(--rouge)}
.pan-q{display:flex;align-items:center;border:1px solid var(--trait)}
.pan-q button{width:34px;height:34px;font-size:1.05rem;line-height:1;color:var(--encre)}
.pan-q button:hover{background:var(--creme)}
.pan-q span{min-width:30px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:.9rem}
.pan-p{font-size:1rem;font-weight:500;min-width:110px;text-align:right}
@media(max-width:680px){
  .pan-l{grid-template-columns:64px 1fr;gap:12px 14px}
  .pan-l img{width:64px;height:64px}
  .pan-q{grid-column:2}.pan-p{grid-column:2;text-align:left;min-width:0}
}
.pan-vide{padding:60px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.pan-recap{border:1px solid var(--trait);padding:24px;display:flex;flex-direction:column;gap:0;position:sticky;top:92px}
.pan-recap .l{display:flex;justify-content:space-between;gap:18px;padding:10px 0;font-size:.94rem;border-bottom:1px solid var(--trait)}
.pan-recap .l.gros{border-bottom:0;padding-top:16px;font-weight:700;font-size:1.05rem}
.pan-recap .l.gros span:last-child{font-family:"IBM Plex Mono",monospace;font-size:1.35rem;font-weight:500;letter-spacing:-.02em}

/* ============================================================
   Motion — composition d'accueil, rail épinglé, apparitions
   Tout est neutralisé si l'utilisateur refuse les animations.
   ============================================================ */

/* --- états de départ : posés seulement si le moteur est armé (html.mo) --- */
html.mo{scroll-behavior:auto}
html.mo [data-rise],
html.mo .sec-head,
html.mo .gal figure,
html.mo .serv > div,
html.mo .duo-c,
html.mo .maison .liste li,
html.mo .cmp-t,
html.mo .hero-txt > *{opacity:0}

/* --- barre de progression de lecture --- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none}
.prog i{display:block;height:100%;width:100%;background:var(--rouge);
  transform:scaleX(0);transform-origin:0 50%}

/* --- navigation : ombre à partir du premier défilement --- */
.nav{transition:box-shadow .3s}
.nav[data-scr]{box-shadow:0 1px 22px rgba(16,17,18,.09)}

/* --- héro en composition de produits --- */
.hero--cmp .hero-cmp{
  position:relative;overflow:hidden;background:#15171A;
  min-height:clamp(420px,52vw,640px);isolation:isolate}
.hero--cmp .hero-cmp::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 70% 20%,rgba(255,255,255,.07),transparent 62%)}
.cmp-dot{
  position:absolute;top:12%;right:-10%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(200,16,46,.42),rgba(200,16,46,0) 68%);
  filter:blur(6px);z-index:0}
.cmp-t{
  position:absolute;z-index:1;display:flex;flex-direction:column;gap:9px;
  will-change:transform}
.cmp-t img{width:100%;aspect-ratio:1;object-fit:contain;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.62)) drop-shadow(0 5px 10px rgba(0,0,0,.45));
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cmp-t:hover img{transform:translateY(-6px) scale(1.03)}
.cmp-l{display:flex;flex-direction:column;gap:1px;padding-inline:2px}
.cmp-l b{color:#EFEEEC;font-size:.76rem;font-weight:500;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cmp-l i{font-family:"IBM Plex Mono",monospace;font-style:normal;
  font-size:.78rem;color:#9AA0A4}
.cmp-t1{left:6%;top:11%;width:58%}
.cmp-t2{right:5%;top:31%;width:36%}
.cmp-t3{left:24%;bottom:5%;width:38%}
@media(max-width:900px){
  .hero--cmp .hero-cmp{min-height:400px}
  .cmp-t1{left:4%;top:8%;width:54%}
  .cmp-t2{right:4%;top:24%;width:36%}
  .cmp-t3{left:21%;bottom:4%;width:38%}
}
@media(max-width:620px){
  /* trois tuiles sans recouvrement : les etiquettes doivent rester lisibles */
  .hero--cmp .hero-cmp{min-height:448px}
  .cmp-t1{left:2%;top:5%;width:54%}
  .cmp-t2{right:2%;top:3%;width:36%}
  .cmp-t3{left:auto;right:6%;bottom:3%;width:41%}
}
@media(max-width:520px){
  .cmp-l b{font-size:.7rem}
  .cmp-l i{font-size:.72rem}
}

/* --- rail horizontal épinglé --- */
.rail{background:var(--creme);border-block:1px solid var(--trait);overflow:hidden}
.rail-in{
  display:flex;align-items:center;gap:clamp(24px,3vw,52px);
  min-height:min(100vh,760px);padding-inline:var(--pad);
  max-width:none}
.rail-t{flex:0 0 clamp(260px,29%,400px);display:flex;flex-direction:column;gap:15px}
.rail-h{
  margin-top:22px;font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);display:inline-flex;align-items:center;gap:9px}
.rail-h::after{content:"";width:38px;height:1px;background:var(--trait-fort)}
.rail-p{flex:1 1 auto;min-width:0;overflow:hidden}
.rail-r{display:flex;gap:1px;background:var(--trait);width:max-content;
  border:1px solid var(--trait);will-change:transform}
.rail-r .prod{width:clamp(224px,25vw,292px);flex:none}
.rail-r .prod figure{background:var(--papier)}
@media(max-width:900px){
  .rail-in{flex-direction:column;align-items:stretch;min-height:0;
    padding-block:var(--band);gap:30px}
  .rail-t{flex:none}
  .rail-h{display:none}
  .rail-p{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding-bottom:8px}
  .rail-r{width:max-content}
  .rail-r .prod{width:min(66vw,260px);scroll-snap-align:start}
}

/* --- l'utilisateur refuse les animations : tout reste visible et fixe --- */
@media (prefers-reduced-motion:reduce){
  html.mo [data-rise],
  html.mo .sec-head,
  html.mo .gal figure,
  html.mo .serv > div,
  html.mo .duo-c,
  html.mo .maison .liste li,
  html.mo .cmp-t,
  html.mo .hero-txt > *{opacity:1}
  .prog{display:none}
}

/* ---------- les deux maisons (accueil) ----------
   Le bloc n'avait jamais eu de style : les images partaient a la hauteur
   naturelle du fichier (2656 px en ligne). Grille a deux colonnes, photo
   cadree, texte au meme fer. */
.deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait)}
.maison{background:var(--papier);display:flex;flex-direction:column;
  transition:background .25s}
.maison-ph{aspect-ratio:4/3;overflow:hidden;background:var(--creme)}
.maison-ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.maison:hover .maison-ph img{transform:scale(1.035)}
.maison-t{padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;
  gap:14px;flex:1}
.maison--sombre{background:var(--encre);color:var(--papier)}
.maison--sombre .maison-ph{background:#15171A}
.maison--sombre .maison-ph img{filter:drop-shadow(0 22px 26px rgba(0,0,0,.6))}
.maison--sombre .lead{color:#A8ABAE}
.maison--sombre .liste li{color:#C3C6C9;border-color:#2B2E32}
.maison--sombre:hover{background:#191B1D}
.liste{list-style:none;padding:0;display:flex;flex-direction:column}
.liste li{font-size:.93rem;color:var(--encre-2);padding:9px 0 9px 20px;
  border-bottom:1px solid var(--trait);position:relative}
.liste li:last-child{border-bottom:0}
.liste li::before{content:"";position:absolute;left:2px;top:1.05em;
  width:7px;height:1px;background:var(--rouge)}
.maison .lnk{margin-top:auto;padding-top:14px}
@media(max-width:900px){
  .maison-ph{aspect-ratio:16/10}
}

/* --- tres petits telephones : la barre haute ne doit jamais deborder --- */
@media(max-width:400px){
  .nav-haut .nav-in{padding:0 10px;gap:4px}
  .brand{font-size:.82rem;gap:5px;min-width:0;overflow:hidden}
  .brand-txt{min-width:0}
  .univers{padding:2px}
  .univers a{padding:7px 6px;font-size:.67rem}
  .nav-fin{gap:3px}
}

/* --- doigts : les commandes de la barre haute font au moins 44 px sur telephone --- */
@media(max-width:900px){
  .nav-burger{min-width:44px;min-height:44px;padding:0;margin-right:-10px;
    align-items:center;justify-content:center}
  .univers a{padding-block:12px}
  .pan-lien{min-height:42px}
  /* Le logo est un lien : il se touche au doigt comme les autres. */
  .brand{min-height:44px}
}

/* --- le selecteur de langue passe dans le menu sur telephone ---
   Ajoute avec le bilingue le 07/09, il occupait 69 px dans la barre haute, qui n'en avait
   plus. A 414 px de large, la barre demandait 442 px : la marque, les deux univers, le
   panier et le menu remplissaient deja la ligne. Le retrecir n'etait pas une issue, ses
   deux liens etant deja sous les 44 px exiges au doigt.
   Il descend donc dans le menu, ou les liens sont en colonne et ou il y a la place de le
   toucher. Un seul des deux exemplaires est visible a la fois. */
.langues--menu{display:none}
@media(max-width:900px){
  .nav-fin > .langues{display:none}
  /* .langues.langues--menu : plus precis que .langues{display:flex}, ecrit plus bas dans ce fichier. */
  .langues.langues--menu{display:block;padding:4px 0 10px}
}


/* ============================================================
   Barre de filtres de la boutique
   Elle n'avait aucune regle : elle sortait du gabarit a gauche.
   ============================================================ */
.shop-bar{background:var(--creme);border-block:1px solid var(--trait);
  padding-block:clamp(20px,2.6vw,30px)}
.shop-bar .wrap{display:flex;flex-direction:column;gap:13px}
.f-ligne{display:grid;grid-template-columns:88px minmax(0,1fr);
  gap:10px 16px;align-items:start}
.f-lib{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);padding-top:9px}
.filtres{display:flex;flex-wrap:wrap;gap:7px}
.pill{
  background:var(--papier);color:var(--encre-2);cursor:pointer;white-space:nowrap;
  transition:border-color .16s,background .16s,color .16s;
}
.pill i{font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:.92em;font-weight:400;color:var(--gris)}
.pill:hover{border-color:var(--encre);color:var(--encre)}
.pill[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.pill[aria-pressed="true"] i{color:rgba(255,255,255,.6)}
.f-ligne--fort .f-lib{color:var(--encre)}
.f-ligne--fort .pill{padding:10px 18px;font-size:.77rem}
/* L'état actif est le même sur les trois rangées (08/10) : le fond encre de la pilule, règle
   commune de la maquette. Le liseré rouge que la maquette ajoutait à la seule rangée « État »
   faisait lire deux états actifs différents ; la rangée garde sa taille, pas son liseré. */

/* Le bloc des filtres replié derrière « Filtrer » (21/10) : un <details> natif, sans script. */
.f-pli{margin:0 0 14px}
.f-pli-btn{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;list-style:none;cursor:pointer}
.f-pli-btn::-webkit-details-marker{display:none}
.f-pli-lib{display:inline-flex;align-items:center;gap:8px}
.f-pli-lib i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.72rem;background:var(--encre);color:var(--papier);border-radius:999px;padding:2px 8px}
.f-pli-actifs{font-size:.84rem;color:var(--gris)}
.f-pli[open] .f-pli-lib{background:var(--encre);color:var(--papier)}
.f-pli[open] .f-pli-lib i{background:var(--papier);color:var(--encre)}
.f-pli-corps{margin-top:16px}
.shop-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:4px;padding-top:16px;border-top:1px solid var(--trait-fort)}
.shop-row #q{flex:1 1 240px;min-width:0;font:inherit;font-size:.94rem;
  padding:11px 14px;border:1px solid var(--trait-fort);background:var(--papier);
  color:var(--encre);border-radius:0;-webkit-appearance:none}
.shop-row #q::placeholder{color:var(--gris-clair)}
.shop-row #q:focus{outline:none;border-color:var(--encre)}
.shop-row #tri{font:inherit;font-size:.9rem;padding:11px 38px 11px 14px;
  border:1px solid var(--trait-fort);background-color:var(--papier);color:var(--encre);
  border-radius:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6E72' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.shop-row #tri:focus{outline:none;border-color:var(--encre)}
.compte{margin-left:auto;color:var(--gris);font-size:.84rem;white-space:nowrap}
@media(max-width:760px){
  .f-ligne{grid-template-columns:1fr;gap:7px}
  .f-lib{padding-top:0}
  .compte{margin-left:0;width:100%;order:3}
}

/* ---------- etiquette Occasion sur une carte produit ----------
   Un rond rouge, le mot en blanc (Smery, 13/10). Le rectangle d'avant se lisait mal : la
   regle des etiquettes du journal, plus bas, le grisait et lui ajoutait un filet. */
.prod figure{position:relative}
.etiq{position:absolute;top:10px;left:10px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:66px;aspect-ratio:1;border-radius:50%;padding:0 7px;box-sizing:border-box;
  font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.05;
  text-align:center;overflow-wrap:anywhere;
  background:var(--encre);color:var(--papier);pointer-events:none}
.etiq--occ{background:var(--rouge)}
/* Un mot long dans le rond (« Second-hand », « Gebraucht » : 24/10, remarque de Smery) :
   plus petit, moins espace, et centre sur une ou deux lignes au lieu de sortir du cercle. */
.etiq--long{font-size:.5rem;letter-spacing:.02em;padding:0 5px}
.fiche-fig .etiq{top:16px;left:16px;width:88px;font-size:.74rem;padding:0 9px}
.fiche-fig .etiq--long{font-size:.62rem;padding:0 7px}

/* ---------- les quatre prestations du studio ---------- */
.presta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait)}
.pr-c{background:var(--papier);display:flex;flex-direction:column;transition:background .25s}
.pr-c:hover{background:var(--creme)}
.pr-ph{aspect-ratio:4/3;overflow:hidden;margin:0}
.pr-ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.pr-c:hover .pr-ph img{transform:scale(1.04)}
.pr-c > div{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:9px;flex:1}
.pr-c h3{font-size:1.1rem;font-weight:600;letter-spacing:-.012em;line-height:1.24}
.pr-c .lnk{margin-top:auto;padding-top:12px}

/* ---------- page des marques ---------- */
.marque{display:grid;grid-template-columns:minmax(180px,.85fr) minmax(0,2fr) auto;
  gap:clamp(16px,3vw,46px);align-items:start;
  padding-block:clamp(24px,3vw,38px);border-bottom:1px solid var(--trait)}
.marque-t{display:flex;flex-direction:column;gap:5px}
.marque-a{display:flex;flex-direction:column;gap:9px;align-items:flex-end;
  text-align:right;white-space:nowrap}
.marque-a .mono{font-size:.84rem;color:var(--gris)}
@media(max-width:820px){
  .marque{grid-template-columns:1fr;gap:14px}
  .marque-a{align-items:flex-start;text-align:left}
}

/* ---------- case a cocher des formulaires (manquait sur commande.html) ---------- */
.fields .check{flex-direction:row;align-items:flex-start;gap:11px;text-transform:none;
  letter-spacing:0;font-weight:400;font-size:.88rem;color:var(--encre-2);line-height:1.5}
.fields .check input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--rouge)}

/* ============================================================
   Alignement des blocs pleine largeur sur la gouttiere du gabarit
   Le hero et le rail commencaient 60 px a gauche du reste de la page.
   `100%` se resout ici sur la largeur du corps, barre de defilement
   exclue — exactement ce que voit `.wrap`.
   ============================================================ */
@media(min-width:901px){
  .hero{padding-left:max(var(--pad),calc((100% - var(--col))/2 + var(--pad)))}
  .hero-txt{padding-inline:0 clamp(28px,5vw,72px)}
}
.rail-in{padding-left:max(var(--pad),calc((100% - var(--col))/2 + var(--pad)))}

/* --- catalogue sur telephone : deux colonnes ---
   Une carte par ligne, c'est 48 ecrans de defilement pour une page de resultats.
   A deux colonnes la page fait moitie moins et se lit comme un vrai catalogue. */
@media(max-width:560px){
  .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod figure{padding:10px}
  .prod-b{padding:0 12px 15px;gap:5px}
  .prod-m{font-size:.57rem;letter-spacing:.14em}
  .prod-n{font-size:.85rem;line-height:1.32}
  .prod-p{font-size:.92rem;padding-top:7px}
  .stock{font-size:.68rem;gap:5px}
  .etiq{top:6px;left:6px;width:54px;font-size:.5rem;letter-spacing:.04em}
  .fiche-fig .etiq{top:10px;left:10px;width:66px;font-size:.58rem}
}

/* ── Ajouts Laravel (remplacent des attributs style= de la maquette) ─────── */
.foot-logo{height:22px;width:auto}
.foot-desc{color:#8E9295;max-width:34ch;margin-top:6px}
.foot-tel{color:#B9BCBF;margin-top:10px}
.foot-mail{color:#B9BCBF;font-size:.86rem}
.foot-adr{color:#8E9295;font-size:.86rem}
.lien-souligne{text-decoration:underline}
.label--corail{color:#E4736D}
.ph--produit{object-fit:contain;padding:13%;background:transparent}
.actions--haut{margin-top:26px}
.actions--haut30{margin-top:30px}
.note-avis{margin-top:24px;font-size:.86rem}
.stock--non i{background:#B9BCBF}
.d-m{font-size:clamp(1.9rem,3.6vw,2.6rem)}

/* ── Lot L6 : légal ── */
/* Pages d'information (mentions, CGV, confidentialité, cookies) : les attributs style= de
   la maquette et son <style> en ligne (.lg) deviennent des classes. */
.band--legal{padding-block:clamp(28px,4vw,52px)}
.legal-col{max-width:820px}
.stack--legal{gap:34px;margin-top:14px}
.lg{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--trait);padding-top:20px}
.lg h2{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.lg p,.lg li{font-size:.96rem;color:var(--encre-2);line-height:1.62}
.lg ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.lg a{text-decoration:underline;text-underline-offset:2px}
.legal-maj{margin-top:40px;font-size:.84rem}
/* L'encadré prescrit par l'article L217-15 du code de la consommation. Son contenu est
   fixé par la loi, et la loi veut qu'il soit encadré : il se voit, il ne se confond pas
   avec la prose autour. */
.lg .encadre{margin:0;padding:12px 14px;border:1px solid var(--trait);background:var(--papier);font-size:.9rem}
.lg .encadre+.encadre{border-top:none}
/* Tableau des dépôts de la page cookies */
.cook-t-scroll{overflow-x:auto}
.cook-t{width:100%;min-width:560px;border-collapse:collapse;font-size:.9rem;line-height:1.5}
.cook-t th,.cook-t td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--trait)}
.cook-t th{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.cook-t td{color:var(--encre-2)}
.cook-t code{font-family:"IBM Plex Mono",monospace;font-size:.84rem;white-space:nowrap}
.cook-etat{font-size:.9rem}
/* Case de consentement des formulaires (composant x-consentement), même dessin que .fields .check.
   `.fields .full` vient du <style> de contact.html et reservation.html : la case s'étale sur les
   deux colonnes de la grille. Les lots contact et réservation peuvent le garder ici. */
.fields .full{grid-column:1/-1}
.consentement{display:flex;flex-direction:row;align-items:flex-start;gap:11px;text-transform:none;
  letter-spacing:0;font-weight:400;font-size:.88rem;color:var(--encre-2);line-height:1.5;cursor:pointer}
.consentement input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--rouge)}
.consentement a{text-decoration:underline;text-underline-offset:2px}
.consentement-err{color:var(--rouge);font-size:.84rem}

/* ── Lot L4/L8 : boutique ── */
/* Remplace les attributs style= de boutique/neuf/occasion/marques/produit/panier/commande.html.
   Rien de nouveau dans la DA : mêmes valeurs, posées en classes. */
.band--sans-bas{padding-bottom:0}
.band--serre{padding-top:clamp(22px,3vw,34px)}
.band--serre2{padding-top:clamp(26px,3.5vw,44px)}
.sec-head--large{max-width:72ch}
.sec-head--large70{max-width:70ch}
.serv--haut{margin-top:30px}
.specs--large{max-width:520px;width:100%}
.split--haut{align-items:start}
.actions--centre{justify-content:center;margin-top:32px}

/* catalogue : la barre de filtres en liens et formulaire (complets sans JavaScript) */
.filtres a.pill{text-decoration:none}
.shop-go{padding:11px 16px;font-size:.72rem;letter-spacing:.08em}
.shop-go--js{display:none}
.cat-source{font-size:.82rem;margin-bottom:18px}
.cat-vide{text-align:center;margin-top:30px}
.pagi{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:32px}
.pagi a,.pagi span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border:1px solid var(--trait);font-size:.8rem;color:var(--encre-2);transition:border-color .16s,color .16s}
.pagi a:hover{border-color:var(--encre);color:var(--encre)}
.pagi .pagi-actif{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.pagi .pagi-off{color:var(--gris-clair);border-color:var(--trait)}
.pagi .pagi-pts{border:0;min-width:auto;padding:0 4px;color:var(--gris-clair)}

/* fiche produit */
.fiche{padding-block:clamp(26px,4vw,50px)}
.fil{margin-bottom:22px}
.fil a:hover{color:var(--rouge)}
.fiche-fig{background:var(--creme);aspect-ratio:1;display:grid;place-items:center;padding:8%;position:relative;margin:0}
.fiche-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(16,17,18,.22))}
.vignettes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}
.fiche-nom{font-size:clamp(1.6rem,3vw,2.4rem)}
.fiche-prix{font-size:2.1rem;font-weight:500;letter-spacing:-.03em}
.fiche-source{font-size:.8rem;margin-top:-8px}
.fiche-desc{font-size:1.01rem}
.fiche-actions{margin-top:4px}
.fiche-specs{margin-top:12px}
.fiche-serv{border:1px solid var(--trait);margin-top:8px}
.fiche-serv h3{font-size:.93rem}
.fiche-serv p{font-size:.85rem}
.occ-garantie{border-left:3px solid var(--rouge);padding:10px 14px;background:var(--creme);font-size:.9rem;line-height:1.5}
.occ-garantie b{font-weight:600}
.assoc-actions{margin-top:28px}

/* page des marques */
.marques-liste{gap:0;border-top:1px solid var(--encre)}
.marque-nom{font-size:1.5rem}
.marque-txt{font-size:1rem}

/* panier */
.pan{padding-block:clamp(28px,4vw,52px)}
.pan-head{margin-bottom:22px}
.pan-nb{font-size:.9rem}
.pan-split{gap:clamp(26px,4vw,54px)}
.pan-zone{min-width:0}
.pan-recap-lbl{margin-bottom:10px}
.pan-cmd{justify-content:center;margin-top:18px}
.pan-note{margin-top:14px;font-size:.84rem;color:var(--gris)}
.pan-infos{margin-top:18px;font-size:.84rem;color:var(--gris)}

/* commande : passage de main à la boutique en ligne, pas de tunnel ici */
.cmd{padding-block:clamp(30px,4vw,56px)}
.cmd-head{margin-bottom:26px}
.cmd-titre{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.cmd-vide{max-width:560px}
.cmd-corps{gap:clamp(26px,4vw,54px)}
.cmd-col{min-width:0}
.cmd-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none;padding:0;margin:0 0 34px}
.cmd-etapes li{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);padding-top:12px;border-top:2px solid var(--trait)}
.cmd-etapes li .mono{font-size:.72rem}
.cmd-etapes li[data-on]{color:var(--encre);border-top-color:var(--encre)}
@media(max-width:640px){.cmd-etapes li span.mono{display:none}}
.cmd-sous{font-size:1.3rem;margin:28px 0 6px}
.cmd-expl{margin-bottom:18px}
.cmd-coord{margin-bottom:18px}
.cmd-coord dd a:hover{color:var(--rouge)}
.cmd-lignes{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.cmd-lignes .cl{display:flex;gap:12px;align-items:center}
.cmd-lignes img{width:46px;height:46px;object-fit:contain;background:var(--creme);flex:none}
.cmd-lignes .ci{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.cmd-lignes .cn{font-size:.88rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cmd-lignes .cq{font-size:.78rem;color:var(--gris)}
.cmd-lignes .cu{font-size:.8rem;color:var(--encre-2)}
.cmd-lignes .cu:hover{color:var(--rouge)}
.cmd-lignes .cp{font-family:"IBM Plex Mono",monospace;font-size:.86rem;white-space:nowrap}
.cmd-aside{position:static}

/* ── Lot L3 : studio ─────────────────────────────────────────────────────── */
/* Remplacent les attributs style= des pages studio.html, mariage.html, portrait.html,
   entreprises.html, cours.html et contact.html de la maquette. */
.band--sans-bas{padding-bottom:0}
.band--sans-haut{padding-top:0}
.band--haut-court{padding-top:clamp(26px,3.5vw,44px)}
.sec-head--70{max-width:70ch}
.sec-head--66{max-width:66ch}
.actions--haut6{margin-top:6px}
.specs--520{max-width:520px;width:100%}
.specs--haut6{margin-top:6px}
.wrap--780{max-width:780px}
.btn--centre{justify-content:center}

/* page Nous trouver : adresse, téléphone, courriel */
.contact-l{font-size:1.32rem}
.contact-m{font-size:1.05rem}

/* page Cours : le prix du héro, les trois étapes du déroulé */
.prix-hero{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.prix-hero .mono{font-size:3rem;font-weight:500;letter-spacing:-.03em}
.etapes{margin-top:10px}
.etape{display:grid;grid-template-columns:44px 1fr;gap:0 18px;padding:20px 0;border-top:1px solid var(--trait)}
.etape:last-child{border-bottom:1px solid var(--trait)}
.etape-n{color:var(--rouge);font-size:.82rem;padding-top:3px}
.etape p{margin-top:5px}

/* page Cours : les prochaines dates (mêmes lignes que le tunnel de réservation, reservation.html) */
.dates{max-width:620px}
.date{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;
  color:inherit;border:1px solid var(--trait);padding:16px 18px;margin-bottom:10px;
  transition:border-color .18s,background .18s}
a.date:hover{border-color:var(--encre);background:var(--creme)}
.date .d{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:.92rem}
.date .p{font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.date--complet{opacity:.42;cursor:not-allowed}
.date--complet .p{color:var(--rouge)}

/* formulaire de devis (contact.html portait ces règles en ligne) */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.fields .full{grid-column:1/-1}
@media(max-width:600px){.fields{grid-template-columns:1fr}}
.fields label{display:flex;flex-direction:column;gap:7px;font-size:.79rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.fields input,.fields select,.fields textarea{box-sizing:border-box;border:1px solid var(--trait);padding:13px 14px;font:inherit;font-size:1rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--encre);background:var(--papier);border-radius:0;width:100%}
.fields input:focus,.fields select:focus,.fields textarea:focus{border-color:var(--encre);outline:none}
.fields input[aria-invalid="true"],.fields select[aria-invalid="true"],.fields textarea[aria-invalid="true"]{border-color:var(--rouge)}
.err{color:var(--rouge);font-size:.86rem;min-height:1.1em}
.err ul{margin:6px 0 0;padding-left:18px}
.note-ok{border:1px solid var(--encre);padding:22px 24px;display:flex;flex-direction:column;gap:9px}
.note-ok strong{font-size:1.05rem}
/* pot de miel : hors écran, hors tabulation, invisible aux lecteurs d'écran (aria-hidden) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── Lot L5 : réservation ── */
/* Tunnel de réservation et bons cadeaux. Les styles du <style> de reservation.html
   (démo V3) deviennent des classes ; aucun attribut style= n'est ajouté. */
.resa-band{padding-block:clamp(30px,4vw,56px)}
.resa-col{max-width:760px;margin-inline:auto}
.resa-head{margin-bottom:30px}
.resa-titre{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;padding:0;margin-bottom:34px}
.steps li{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);padding-top:12px;border-top:2px solid var(--trait)}
.steps li .mono{font-size:.72rem}
.steps li[data-on]{color:var(--encre);border-top-color:var(--encre)}
.steps li[data-done]{color:var(--gris);border-top-color:var(--rouge)}
@media(max-width:640px){.steps li span{display:none}.steps{gap:6px}}
@media(max-width:430px){.steps{grid-template-columns:1fr 1fr;gap:8px}.steps li{font-size:.72rem;letter-spacing:.03em}}
.resa{min-inline-size:0}
.pane{border:0;padding:0;margin:0;min-inline-size:0}
.pane-titre{font-size:1.3rem;margin-bottom:6px}
.pane-titre--seule{margin-bottom:22px}
.pane-titre--suite{margin-top:34px}
.pane-intro{margin-bottom:22px}
.avis{border:1px solid var(--encre);padding:12px 15px;font-size:.9rem;margin-bottom:26px}
.dates{min-inline-size:0}
.date{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;
  border:1px solid var(--trait);padding:16px 18px;margin-bottom:10px;position:relative;cursor:pointer;
  transition:border-color .18s,background .18s}
.date:hover:not([data-complet]){border-color:var(--encre)}
.date:has(.date-r:checked),.date[aria-pressed="true"]{border-color:var(--encre);background:var(--creme);box-shadow:inset 3px 0 0 var(--rouge)}
.date:has(.date-r:focus-visible){outline:2px solid var(--rouge);outline-offset:3px}
.date[data-complet]{opacity:.42;cursor:not-allowed}
.date .date-r{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.date .d{font-family:"IBM Plex Mono",monospace;font-size:.92rem}
.date .p{font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.date[data-complet] .p{color:var(--rouge)}
.moyens{margin-bottom:6px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields .full{grid-column:1/-1}
@media(max-width:600px){.fields{grid-template-columns:1fr}}
.fields label{display:flex;flex-direction:column;gap:7px;font-size:.8rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris)}
.fields input,.fields select,.fields textarea{box-sizing:border-box;border:1px solid var(--trait);padding:13px 14px;font-size:1rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--encre);background:var(--papier);border-radius:0;width:100%;font-family:inherit}
.fields textarea{resize:vertical;min-height:5.5em;line-height:1.5}
.fields input:focus,.fields select:focus,.fields textarea:focus{border-color:var(--encre);outline:none}
.fields input[aria-invalid="true"]{border-color:var(--rouge)}
.fields--bon{margin-top:22px}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:var(--rouge);font-size:.86rem;margin-top:14px;min-height:1.2em}
.navrow{display:flex;gap:12px;justify-content:space-between;margin-top:34px;padding-top:24px;border-top:1px solid var(--trait)}
.navrow .btn{padding:14px 18px}
.navrow-suite{margin-left:auto}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--trait)}
.total-montant{font-size:1.7rem;font-weight:500}
.note-annulation{margin-top:18px;font-size:.9rem}
.note-message{margin-top:18px;font-size:.92rem;font-style:italic;white-space:pre-line}
.note-bon{margin-top:10px;font-size:.88rem}
.resa-bon{margin-top:26px;font-size:.9rem}
.ok{text-align:center;padding:20px 0 8px}
.ok-dot{width:44px;height:44px;display:inline-block;margin-bottom:22px}
.ok-titre{font-size:1.5rem}
.ok-lead{margin:14px auto 0}
.ok-recap{margin-top:30px;text-align:left}
.ok-ref{margin-top:22px;font-size:.86rem}
.ok-actions{justify-content:center;margin-top:26px}
.bon-specs{margin-bottom:40px}
.verif{margin-top:clamp(40px,6vw,72px);padding-top:clamp(30px,4vw,48px);border-top:1px solid var(--trait)}
.verif-ok,.verif-non{margin-top:16px;padding:12px 15px;font-size:.92rem;border:1px solid var(--encre)}
.verif-non{border-color:var(--rouge);color:var(--rouge)}

/* ── Lot L9 : finition sur téléphone (recette huit largeurs du 06/09) ── */
.navrow{flex-wrap:wrap}
@media (max-width:620px){
  .navrow .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .navrow-suite{margin-left:0}
  .pagi a,.pagi span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .fil a{display:inline-flex;align-items:center;min-height:44px}
}

/* ── Lot L7 : pages 404 et 410 ── */
.sec-head--erreur{max-width:64ch}
.recherche-erreur{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:26px 0 22px}
.recherche-erreur label{flex:1 1 100%;font-size:.86rem;color:var(--gris)}
.recherche-erreur input{flex:1 1 240px;font:inherit;padding:13px 14px;border:1px solid var(--trait);border-radius:4px;background:#fff;min-height:44px}

/* Le journal */
.journal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px}
.jr{display:flex;flex-direction:column;gap:14px}
.jr-ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--creme-2)}
.jr-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.jr-ph:hover img{transform:scale(1.03)}
.jr-t{display:flex;flex-direction:column;gap:8px}
.jr-date{font-size:.74rem;color:var(--gris);letter-spacing:.06em;text-transform:uppercase}
.jr-t h2,.jr-t h3{font-size:1.15rem;line-height:1.25;font-weight:600}
.jr-t p{color:var(--encre-2);font-size:.95rem;line-height:1.65}
.filtres-journal{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:34px}
.filtres-journal .lnk{margin-left:auto}
.vide-pub{padding:60px 0;text-align:center;color:var(--gris)}
.article{max-width:78ch}
.article-ph{margin:30px 0}
.article-ph img{width:100%;height:auto}
.article-corps p{font-size:1.05rem;line-height:1.75;margin-bottom:1.1em}
.fil-ariane{font-size:.8rem;color:var(--gris);margin-bottom:18px;display:flex;gap:8px}
.etiquettes{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.etiquettes .etiq{position:static;display:inline-block;width:auto;aspect-ratio:auto;border-radius:0;
  font-size:.76rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.4;
  background:none;color:var(--gris);border:1px solid var(--trait);padding:4px 10px;pointer-events:auto}
.hero--court{padding-bottom:0}
.filtre-j{font-size:.86rem;color:var(--gris);padding:6px 0;border-bottom:2px solid transparent}
.filtre-j:hover{color:var(--encre)}
/* Au doigt, les filtres du journal font 44 px comme le reste : « Tout » mesurait 27x36,
   et « All » 16x36 sur la version anglaise, un mot court faisant une cible plus petite. */
@media(max-width:900px){
  .filtre-j{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}
.filtre-j--on{color:var(--encre);border-bottom-color:var(--rouge)}

/* Le selecteur de langue (22/10) : un bouton drapeau + code dans la barre haute, qui ouvre
   une petite fenetre avec les sept langues (drapeau, nom dans sa langue, code). C'est un
   <details> : il marche sans script ; le script ne fait que le refermer au clic ailleurs.
   Dans le menu du telephone, la meme liste est a plat, en grille, lignes de 44 px. */
.langues{position:relative;display:flex;align-items:center}
.lang{position:relative}
.lang-b{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;padding:6px 9px;min-height:34px;
  border:1px solid transparent;border-radius:3px;font-size:.72rem;letter-spacing:.08em;color:var(--encre);user-select:none}
.lang-b::-webkit-details-marker{display:none}
.lang-b:hover,.lang[open] .lang-b{border-color:var(--trait)}
.lang-ch{width:10px;height:6px;color:var(--gris);transition:transform .2s}
.lang[open] .lang-ch{transform:rotate(180deg)}
.lang-f{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none;display:block}
.lang-l{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--papier);
  border:1px solid var(--trait);border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,.14);min-width:200px;z-index:70}
.lang-o{display:flex;align-items:center;gap:10px;padding:9px 10px;min-height:40px;color:var(--encre);text-decoration:none;
  font-size:.86rem;border-radius:3px;white-space:nowrap}
.lang-o:hover{background:rgba(0,0,0,.05)}
.lang-o--on{background:rgba(0,0,0,.04);font-weight:600}
.lang-n{flex:1}
.lang-c{font-weight:600}
.lang-v{font-size:.68rem;letter-spacing:.08em;color:var(--gris)}
.lang-t{margin:14px 0 6px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.lang-l--plat{position:static;box-shadow:none;border:0;border-radius:0;padding:0;display:block;min-width:0}
.lang-l--plat .lang-o{min-height:44px;padding:8px 0;border-radius:0;border-bottom:1px solid var(--trait)}
.lang-l--plat .lang-o--on{background:none}
.lang-l--plat .lang-o--on .lang-n{text-decoration:underline;text-underline-offset:4px}

/* « L'essentiel » : les caractéristiques du fabricant, sous la description de la fiche.
   Une liste sobre — c'est de la donnée, pas un argument de vente. */
.fiche-carac{margin:0}
.fiche-carac .label{display:block;margin-bottom:.5rem}
.fiche-carac ul{margin:0;padding-left:1.1rem;list-style:disc}
.fiche-carac li{margin:.18rem 0;line-height:1.5}

/* ── Mises en avant de la boutique (12/10) : le carrousel et le bandeau d'Anton ── */
/* Le carrousel est une rangée qui défile, au doigt, à la barre ou au clavier, sans aucun
   script ; chaque bannière s'arrête au bord (scroll-snap). La barre de défilement ne
   s'efface que lorsque `mises-en-avant.js` tourne (.mea--js) : ce sont alors ses flèches qui
   la remplacent. Sans lui, elle reste, et rien n'est caché.
   Une bannière se pose dans un cadre deux fois plus large que haut, le format de toutes
   celles de la boutique, et s'y montre entière (contain) : leur texte est dans l'image, un
   recadrage le couperait. Mêmes encres, mêmes traits et même lien souligné que le reste. */
/* Le titre de la page garde sa marge du bas (.sec-head) : la zone ne rajoute de l'air
   qu'avant la barre du catalogue. */
.mea-zone{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);padding-bottom:clamp(26px,3.5vw,44px)}
/* Les marges automatiques de .wrap empêchent un enfant de flex de s'étirer : sans cette
   largeur, le bandeau se resserrait au milieu de la colonne. */
.mea-zone > .wrap{width:100%}
.mea{position:relative}
.mea-piste{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--trait-fort) transparent}
.mea--js .mea-piste{scrollbar-width:none}
.mea--js .mea-piste::-webkit-scrollbar{display:none}
.mea-diapo{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.mea-lien{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%}
.mea-fig{display:block;width:100%;aspect-ratio:2/1;background:var(--creme);overflow:hidden}
.mea-img{width:100%;height:100%;object-fit:contain}
.mea-bouton{margin-bottom:2px}
a.mea-lien:hover .mea-bouton{color:var(--rouge)}
.mea-outils{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
.mea-pos{font-size:.8rem;color:var(--gris);margin-right:auto}
.mea-bouton-rond{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid var(--trait-fort);background:var(--papier);color:var(--encre);transition:border-color .16s,color .16s}
.mea-bouton-rond:hover{border-color:var(--encre);color:var(--rouge)}
.mea-bouton-rond svg{width:16px;height:16px;display:block}
.mea-bouton-rond .mea-ic-lecture{display:none}
.mea-bouton-rond[data-arrete] .mea-ic-pause{display:none}
.mea-bouton-rond[data-arrete] .mea-ic-lecture{display:block}

/* Le bandeau : les pictogrammes en rangée, séparés d'un trait comme les services. En flex
   et pas en grille : une rangée incomplète s'étire au lieu de laisser des cases grises. Sous
   900 pixels, l'image passe au-dessus du texte ; sur un téléphone, deux par ligne. */
.mea-pictos{display:flex;flex-wrap:wrap;gap:1px;margin:0;padding:0;list-style:none;
  background:var(--trait);border-block:1px solid var(--trait)}
.mea-picto{flex:1 1 220px;min-width:0;background:var(--papier);display:flex;align-items:center;gap:14px;padding:16px 18px}
.mea-picto-fig{display:block;flex:none;width:56px;height:56px}
.mea-picto-img{width:56px;height:56px;object-fit:contain}
.mea-picto-t{min-width:0;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;
  overflow-wrap:anywhere}
@media(max-width:900px){
  .mea-picto{flex-basis:150px;flex-direction:column;text-align:center;gap:10px;padding:16px 10px}
}
@media(max-width:620px){
  .mea-picto{flex-basis:120px}
  .mea-picto-t{font-size:.68rem;letter-spacing:.08em}
}

/* ── Tunnel de vente (13/10) : la fiche sur téléphone ── */
/* Le prix et « Ajouter au panier » tiennent dans le premier écran d'un téléphone (audit de
   navigation du 13/10, S4 : le bouton d'une fiche M11 était à 2,7 écrans du haut, sous la
   description et « L'essentiel »). Le bloc d'actions suit désormais la phrase de
   disponibilité, partout ; sur téléphone, la colonne de l'image se dissout en plus dans la
   grille, pour que les vignettes passent après l'achat : l'image, le nom, le prix, le bouton,
   puis les autres vues. Rien ne change de forme ni de couleur, seulement l'ordre. */
@media(max-width:640px){
  .fiche > .split > .stack:first-child{display:contents}
  .fiche #vignettes{order:2}
}

/* ── Tunnel de vente (13/10) : l'en-tête ── */
/* La recherche de la boutique dans la barre du bas, sur toutes les pages : à droite sur
   ordinateur, en tête du menu sur téléphone. Le champ est celui de la barre de filtres du
   catalogue (même trait, même papier), en plus petit. */
.nav-recherche{display:flex;align-items:center;flex:none;order:9;margin-left:auto;
  border:1px solid var(--trait-fort);background:var(--papier)}
.nav-recherche:focus-within{border-color:var(--encre)}
.nav-recherche input{font:inherit;font-size:.84rem;width:210px;min-width:0;padding:7px 10px;
  border:0;background:transparent;color:var(--encre);border-radius:0;-webkit-appearance:none}
.nav-recherche input::placeholder{color:var(--gris-clair)}
.nav-recherche-go{display:flex;align-items:center;justify-content:center;width:34px;height:32px;color:var(--gris)}
.nav-recherche-go:hover{color:var(--encre)}
/* La recherche d'en-tête ouvre les résultats sur la ligne de recherche du catalogue (#q),
   sous l'en-tête collant. */
.shop-row #q{scroll-margin-top:130px}
/* Hors des deux univers, la barre du bas ne porte que la recherche sur ordinateur ; les
   liens vers les deux univers ne servent qu'au menu du téléphone. */
.nav-bas--vide{display:block}
.nav-l-univers{display:none}
/* Le sélecteur de langue du menu ne s'affiche que sur téléphone : `.langues{display:flex}`,
   plus bas dans cette feuille, l'emportait sur `.langues--menu{display:none}` et la langue
   s'affichait deux fois sur ordinateur (audit du 13/10, S5). */
@media(min-width:901px){
  .nav-bas .langues--menu{display:none}
}
@media(max-width:900px){
  .nav-recherche{order:-1;width:100%;margin:12px 0 6px}
  .nav-recherche input{flex:1;width:auto;font-size:1rem;padding:10px 12px}
  .nav-recherche-go{width:44px;height:44px}
  .nav-l-univers{display:block}
}

/* ---------- la visionneuse de la fiche (24/10) ---------- */
.fiche-fig{cursor:zoom-in}
.fiche-zoom{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border:1px solid var(--trait);border-radius:50%;
  background:var(--papier);color:var(--encre);display:grid;place-items:center;cursor:zoom-in;z-index:2}
.fiche-zoom svg{width:16px;height:16px}
.fiche-zoom:hover{border-color:var(--encre)}
.visio{position:fixed;inset:0;z-index:120;background:rgba(16,17,18,.96);display:grid;place-items:center}
.visio-img{max-width:92vw;max-height:86vh;object-fit:contain}
.visio-b{position:absolute;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  font-size:1.8rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.visio-b:hover{background:rgba(255,255,255,.24)}
.visio-fermer{top:16px;right:16px}
.visio-prec{left:16px;top:50%;transform:translateY(-50%)}
.visio-suiv{right:16px;top:50%;transform:translateY(-50%)}
.visio-n{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:.8rem}
.visio-ouverte{overflow:hidden}

/* ---------- pour completer : les complementaires, sur la fiche et dans le panier (24/10) ---------- */
.assoc{margin-top:34px}
.pan-assoc{margin-top:26px;padding-top:22px;border-top:1px solid var(--trait)}
.pan-assoc-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:12px}
.pan-assoc-c{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--trait);background:var(--papier)}
.pan-assoc-c img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--creme)}
.pan-assoc-c .pan-nom{font-size:.9rem}
.pan-assoc-c .btn{margin-top:auto}

/* ---------- la carte Google, sous consentement (24/10) ---------- */
.carte-google{margin-top:18px;aspect-ratio:16/9;max-height:420px;background:var(--creme)}
.carte-google iframe{width:100%;height:100%;border:0;display:block}