/* =========================================================================
   LE MUR D'EPINGLES — releve sur Pinterest, applique tel quel.
   Fond noir plein, colonnes independantes, coins a 16 px, zero bordure,
   zero ombre, zero soulevement. Le seul mouvement au survol est un voile
   qui s'assombrit, et il n'existe pas sur ecran tactile.
   ========================================================================= */

body.pinterest{ background:#000; color:#fff; }
body.pinterest .bar{
  background:rgba(0,0,0,.86); border-bottom:0;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

.mur-zone{ padding:6px 6px 96px; }
.mur{ columns:2; column-gap:6px; }
@media (min-width:760px){ .mur{ columns:4; column-gap:10px; } .mur-zone{ padding:10px 10px 110px; } }
@media (min-width:1200px){ .mur{ columns:5; } }
@media (min-width:1600px){ .mur{ columns:6; } }

.pin{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 6px; }
@media (min-width:760px){ .pin{ margin-bottom:10px; } }

.pin-media{
  position:relative; width:100%; overflow:hidden; border-radius:16px;
  background:#141414; cursor:zoom-in; display:block;
  -webkit-tap-highlight-color:transparent;
}
.pin-media picture, .pin-media img, .pin-media video{
  display:block; width:100%; height:100%; object-fit:cover;
}
@media (hover:hover){
  .pin-media::after{
    content:""; position:absolute; inset:0; background:rgba(0,0,0,.38);
    opacity:0; transition:opacity .15s linear; pointer-events:none;
  }
  .pin-media:hover::after{ opacity:1; }
}

/* la serie : on fait defiler du doigt DANS la carte */
.pin-serie{
  display:flex; height:100%; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pin-serie::-webkit-scrollbar{ display:none; }
.pin-vue{ flex:0 0 100%; scroll-snap-align:center; height:100%; }
.pin-points{
  position:absolute; left:0; right:0; bottom:8px; z-index:2;
  display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.pin-points i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.45); transition:background .2s linear;
}
.pin-points i.vu{ background:#fff; }

/* la video : badge de duree en bas a gauche, comme dans l'application */
.pin-duree{
  position:absolute; left:8px; bottom:8px; z-index:2;
  padding:3px 7px; border-radius:8px; background:rgba(0,0,0,.6);
  font:600 11.5px/1 Archivo,sans-serif; letter-spacing:-.01em; color:#fff;
}

/* le pied : le bouton « … » et rien d'autre */
.pin-pied{ display:flex; justify-content:flex-end; padding:2px 4px 0; }
.pin-plus{
  width:30px; height:26px; border:0; background:transparent;
  color:rgba(255,255,255,.72); font-size:15px; line-height:1;
  letter-spacing:.06em; cursor:pointer; border-radius:8px;
  -webkit-tap-highlight-color:transparent;
}
.pin-plus:hover{ color:#fff; background:rgba(255,255,255,.10); }

.mur-vide{ text-align:center; color:rgba(255,255,255,.5); padding:60px 20px;
  font:400 14px/1.5 Archivo,sans-serif; }

/* ----------------------------------------------- la barre de recherche */
.barre-bas{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, #000 55%, rgba(0,0,0,0));
}
.chercher{
  flex:1; display:flex; align-items:center; gap:10px; min-width:0;
  height:46px; padding:0 16px; border-radius:999px;
  background:rgba(255,255,255,.10);
}
.chercher svg{ width:17px; height:17px; color:rgba(255,255,255,.62); flex:0 0 auto; }
.chercher input{
  flex:1; min-width:0; border:0; background:transparent; color:#fff;
  font:400 15px/1 Archivo,sans-serif; letter-spacing:-.012em;
}
.chercher input::placeholder{ color:rgba(255,255,255,.55); }
.chercher input:focus{ outline:none; }
.reserver-rond{
  flex:0 0 auto; height:46px; padding:0 20px; display:grid; place-items:center;
  border-radius:999px; background:#fff; color:#000;
  font:600 14.5px/1 Archivo,sans-serif; letter-spacing:-.02em;
}

/* --------------------------------------------------------- la feuille */
.feuille{ position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; }
.feuille[hidden]{ display:none; }
.feuille-fond{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.feuille-carte{
  position:relative; width:100%; margin:0 auto; max-width:520px;
  padding:8px 8px calc(10px + env(safe-area-inset-bottom));
  background:#1b1b1d; border-radius:22px 22px 0 0;
}
.feuille-carte > *{
  display:block; width:100%; padding:16px; border:0; border-radius:14px;
  background:transparent; color:#fff; text-align:left;
  font:500 15.5px/1.3 Archivo,sans-serif; letter-spacing:-.018em; cursor:pointer;
}
.feuille-carte > *:hover{ background:rgba(255,255,255,.08); }
.feuille-carte .annuler{ color:rgba(255,255,255,.55); text-align:center; }

/* ------------------------------------------------------ la visionneuse */
.visio{
  position:fixed; inset:0; z-index:90; display:flex;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(0,0,0,.96);
}
.visio[hidden]{ display:none; }
.visio-cadre{ max-width:min(94vw,900px); max-height:88vh; }
.visio-cadre img{ display:block; max-width:100%; max-height:88vh;
  border-radius:16px; object-fit:contain; }
.visio-fermer{
  position:absolute; top:14px; right:14px; width:44px; height:44px;
  display:grid; place-items:center; border:0; border-radius:999px;
  background:rgba(255,255,255,.12); color:#fff; font-size:24px; cursor:pointer;
}


/* Aucun zoom sur le site, double-appui compris. */
.sans-zoom, .sans-zoom *{ touch-action:manipulation; }
/* Sauf la visionneuse, ou le geste lateral doit rester libre. */
.visio, .visio *{ touch-action:pan-x; }

/* La page figee derriere la visionneuse : sans ca, le fond defile sous
   l'image des qu'on fait glisser le doigt. */
body.gele{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* Les fleches sur grand ecran */
.visio-precedent, .visio-suivant{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  border:0; border-radius:999px; background:rgba(255,255,255,.12);
  color:#fff; font-size:22px; cursor:pointer;
}
.visio-precedent{ left:14px; } .visio-suivant{ right:14px; }
@media (max-width:700px){ .visio-precedent, .visio-suivant{ display:none; } }