:root{
  --sand:#F5EFE6;
  --sand-raised:#FBF8F3;
  --ink:#241B2E;
  --ink-soft:#5B5265;
  --violet:#6B3FA0;
  --violet-deep:#3B2159;
  --clay:#B24B32;
  --clay-soft:#F1DED6;
  --lagoon:#1F7A6C;
  --lagoon-soft:#D9EAE6;
  --bleu:#2B6C99;
  --bleu-soft:#DAE6EC;
  --line:#E4D9CC;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3{font-family:"Fraunces", ui-serif, Georgia, serif; font-weight:500; margin:0;}
button{font-family:inherit;}

/* ---- login ---- */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  background:var(--sand-raised);
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px 32px;
  width:100%;
  max-width:380px;
}
.login-card h1{font-size:26px; color:var(--violet-deep); margin-bottom:4px;}
.login-card .tag{color:var(--ink-soft); font-size:13.5px; margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line);
  background:#fff; font-size:14.5px; color:var(--ink); font-family:inherit;
}
.field textarea{resize:vertical; min-height:70px;}
.field textarea.textarea-grande{min-height:150px; font-size:15.5px; line-height:1.5; padding:12px 14px;}
.section-titre{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--violet-deep); margin:22px 0 12px; padding-top:16px; border-top:1px solid var(--line);
}
.section-titre span{font-weight:400; text-transform:none; letter-spacing:normal; color:var(--ink-soft); font-size:12px;}

/* ---- photos (module ImageKit) ---- */
.field-photos{margin-bottom:20px;}
.photos-liste{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.photo-item{position:relative; width:88px; height:66px; border-radius:8px; overflow:hidden; border:1px solid var(--line); flex-shrink:0; background:var(--sand);}
/* object-fit:contain (et non "cover") — pour que cette vignette de gestion
   montre la photo entière, sans recadrage, comme partout ailleurs dans
   l'appli (carte, fiche de lecture, page publique). Avec "cover", cette
   seule vignette zoomait/recadrait l'image alors que le reste de l'appli
   l'affichait en entier : c'est ce résidu d'incohérence qui donnait encore
   une impression de "zoom" après la première correction (celle de
   urlRedimensionnee, qui ne concernait que le paramètre d'URL ImageKit, pas
   ce object-fit CSS local). */
.photo-item img{width:100%; height:100%; object-fit:contain; display:block;}
.photo-item-actions{
  position:absolute; inset:0; background:rgba(36,27,46,.55); opacity:0; transition:opacity .15s;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.photo-item:hover .photo-item-actions, .photo-item:focus-within .photo-item-actions{opacity:1;}
.photo-item-actions button{
  width:22px; height:22px; border-radius:999px; border:none; background:#fff; color:var(--ink);
  font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.photos-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.photos-note{font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-top:6px;}

/* ---- filigrane sur les photos (bien par bien) ---- */
.field-filigrane{margin-bottom:20px;}
.field-filigrane > label.check-archive{font-weight:600;}
.filigrane-reglages{margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--sand);}
.filigrane-apercu{
  position:relative; width:100%; max-width:320px; aspect-ratio:4/3; margin-top:12px;
  border-radius:8px; overflow:hidden; background:linear-gradient(135deg,#6b6b6b,#3a3a3a);
  background-size:cover; background-position:center;
}
.filigrane-apercu-texte{
  position:absolute; left:0; top:0; white-space:nowrap; line-height:1; pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
}
.filigrane-apercu-note{font-size:12px; color:var(--ink-soft); font-style:italic; margin-top:8px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border-radius:9px; border:none; cursor:pointer;
  font-size:14px; font-weight:600; font-family:inherit;
}
.btn-primary{background:var(--violet); color:#fff;}
.btn-primary:hover{background:var(--violet-deep);}
.login-card .btn-primary{width:100%;}
.rester-connecte{
  display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft);
  margin:-6px 0 18px; cursor:pointer; user-select:none;
}
.rester-connecte input{ margin:0; width:16px; height:16px; accent-color:var(--violet); cursor:pointer; }
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
.btn-danger{background:transparent; color:var(--clay); border:1px solid var(--clay);}
.btn-danger:hover{background:var(--clay); color:#fff;}
.error-msg{background:var(--clay-soft); color:var(--clay); padding:9px 12px; border-radius:8px; font-size:13px; margin-bottom:16px;}
.gps-actions{display:flex; gap:10px; flex-wrap:wrap;}
/* Repli "Saisir les coordonnées manuellement" sous « Coller un GPS » — même
   principe que la fiche Terrain (bouton qui déplie un champ + un bouton
   Valider), masqué par défaut. Les champs à l'intérieur restent stylés par
   .field input (voir plus haut) puisqu'ils sont imbriqués dans le même .field. */
.gps-manuel-toggle{margin-top:10px;}
.gps-manuel-fields{display:none; flex-direction:column; gap:8px; margin-top:8px;}
.gps-manuel-fields.show{display:flex;}
.geocode-statut{font-size:12.5px; margin-top:8px; min-height:16px;}
.geocode-statut.ok{color:var(--lagoon);}
.geocode-statut.approx{color:var(--ink-soft); font-style:italic;}
.geocode-statut.erreur{color:var(--clay);}
.demo-accounts{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft); line-height:1.7;}
.demo-accounts strong{color:var(--ink);}

/* ---- dashboard ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid var(--line); background:var(--sand-raised);
}
.topbar .brand{font-size:19px; color:var(--violet-deep);}
.topbar .brand span{color:var(--violet);}
.topbar .who{display:flex; align-items:center; gap:14px; font-size:13.5px; color:var(--ink-soft);}
.pill{background:var(--lagoon-soft); color:var(--lagoon); padding:4px 10px; border-radius:999px; font-weight:600; font-size:12px;}
#who-agence{text-decoration:none; cursor:pointer;}
#who-agence:hover{background:var(--lagoon); color:#fff;}
.wrap{max-width:1400px; margin:0 auto; padding:26px 28px 60px;}

/* ---- panneau de stats ----
   Référence de taille pour l'harmonisation avec .crm-stat (Contacts/
   Prospects, voir crm.css) : c'est cette taille plus fine, pas l'inverse,
   qui a été choisie comme référence commune. */
.stats-panel{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px;}
.stat{
  flex:1; min-width:108px;
  background:var(--sand-raised); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; display:flex; flex-direction:column; gap:2px;
}
.stat-valeur{
  font-family:"Fraunces", serif; font-weight:600; font-size:25px; line-height:1.15;
  color:var(--violet-deep); font-variant-numeric:tabular-nums;
}
.stat-label{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.stat-vente .stat-valeur{color:var(--violet);}
.stat-location .stat-valeur{color:var(--bleu);}
.stat-dispo .stat-valeur{color:var(--lagoon);}
.stat-publie .stat-valeur{color:var(--lagoon);}
.stat-archives .stat-valeur{color:var(--ink-soft);}

.toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.toolbar input[type=search]{
  flex:1; min-width:200px; padding:9px 14px; border-radius:9px; border:1px solid var(--line); background:#fff; font-size:14px;
}
.check-archives{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); white-space:nowrap;}
.check-archives input{width:auto;}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px;}
.card{
  position:relative;
  background:var(--sand-raised); border:1px solid var(--line); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:8px; cursor:pointer;
}
.card:hover{border-color:var(--violet);}
.card.card-archive{opacity:.6;}
.card-photo{
  width:calc(100% + 36px); height:140px; margin:-18px -18px 2px; border-radius:14px 14px 0 0;
  background-size:contain; background-repeat:no-repeat; background-position:center; background-color:var(--sand);
}
.card-photo.vide{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--violet-deep), var(--violet));
  color:rgba(255,255,255,.65); font-size:12px; font-style:italic;
}
.btn-masquer{
  position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft); font-size:14px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.btn-masquer:hover{border-color:var(--violet); color:var(--violet-deep);}
.card .titre{font-size:16px; font-weight:600;}
.card .meta{font-size:12.5px; color:var(--ink-soft);}
.card .prix{font-size:17px; font-weight:700; color:var(--violet-deep); font-family:"Fraunces", serif;}
.badges{display:flex; flex-wrap:wrap; gap:6px;}
.badge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; align-self:flex-start;}
.badge-dispo{background:var(--lagoon-soft); color:var(--lagoon);}
.badge-autre{background:var(--clay-soft); color:var(--clay);}
.badge-mode{background:#fff; border:1px solid transparent;}
.badge-mode-vente{color:var(--violet-deep); border-color:var(--violet);}
.badge-mode-location{color:var(--bleu); border-color:var(--bleu);}
.badge-archive{background:var(--ink); color:var(--sand);}
.badge-public{background:var(--lagoon); color:#fff;}
.field-archive{display:flex; align-items:flex-end;}
.field-archive label.check-archive{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; text-transform:none; letter-spacing:normal;
  color:var(--ink); cursor:pointer; margin-bottom:10px;
}
.check-archive input{width:auto;}
.card .actions{display:flex; gap:8px; margin-top:6px;}
.card .actions button{flex:1; padding:7px 10px; font-size:12.5px;}
.empty{color:var(--ink-soft); font-size:14px; padding:40px 0; text-align:center;}

/* ---- modal ---- */
.overlay{
  position:fixed; inset:0; background:rgba(36,27,46,.45);
  display:none; align-items:center; justify-content:center; padding:20px; z-index:10;
}
.overlay.show{display:flex;}
.modal{
  background:var(--sand-raised); border-radius:16px; padding:26px; width:100%; max-width:480px;
  max-height:90vh; overflow-y:auto;
}
.modal h2{font-size:19px; margin-bottom:18px; color:var(--violet-deep);}
.modal-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end;}
.modal-row .field label{display:block; min-height:2.6em; line-height:1.3;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

/* ---- fiche de lecture (présentation en lecture seule d'un bien) ---- */
.modal-fiche{max-width:560px; padding:0; overflow-y:auto;}
.btn-close-fiche{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:999px;
  border:none; background:rgba(36,27,46,.55); color:#fff; font-size:20px; line-height:1;
  cursor:pointer; z-index:1;
}
.fiche-photos{
  height:240px; background:linear-gradient(135deg, var(--violet-deep), var(--violet));
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.75);
  font-size:13.5px; font-style:italic; position:relative; overflow:hidden;
  border-radius:16px 16px 0 0;
}
.fiche-photos.a-des-photos{font-style:normal;}
.fiche-photos img{width:100%; height:100%; object-fit:contain; display:block; cursor:zoom-in;}
.fiche-photo-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:999px;
  border:none; background:rgba(36,27,46,.5); color:#fff; font-size:19px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.fiche-photo-prev{left:10px;}
.fiche-photo-suivante{right:10px;}
.fiche-photo-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px;}
.fiche-photo-dots .dot{width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.5);}
.fiche-photo-dots .dot.actif{background:#fff;}
.fiche-corps{padding:26px;}
.fiche-entete h2{font-size:22px; color:var(--violet-deep); margin:6px 0 4px;}
.fiche-adresse{font-size:13.5px; color:var(--ink-soft);}
.fiche-prix{font-size:24px; font-weight:700; color:var(--violet-deep); font-family:"Fraunces", serif; margin:16px 0;}
.fiche-caracteristiques{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px;
  padding:16px 0; margin-bottom:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.carac-item{display:flex; flex-direction:column; gap:2px;}
.carac-label{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.carac-valeur{font-size:14.5px; font-weight:600;}
.carac-lien{color:var(--violet-deep); text-decoration:none;}
.carac-lien:hover{text-decoration:underline;}
.fiche-description{font-size:14px; line-height:1.6; white-space:pre-wrap; color:var(--ink);}

/* ---- visionneuse (photo en grand, ouverte depuis la fiche de lecture) ---- */
.overlay-lightbox{z-index:20; background:rgba(20,15,26,.92); cursor:zoom-out;}
.overlay-lightbox img{max-width:92vw; max-height:92vh; object-fit:contain; border-radius:6px; box-shadow:0 24px 70px rgba(0,0,0,.5); cursor:zoom-out;}
.overlay-lightbox .btn-close-fiche{position:fixed; top:18px; right:22px;}
/* Les flèches et pastilles réutilisent les classes du petit diaporama de la
   fiche (.fiche-photo-nav / .fiche-photo-dots) — ici repositionnées et
   agrandies puisqu'elles se rapportent désormais à tout l'écran, et non
   plus à la seule bannière de 240px. */
.overlay-lightbox .fiche-photo-nav{
  position:fixed; top:50%; width:46px; height:46px; font-size:24px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(2px);
}
.overlay-lightbox .fiche-photo-nav:hover{background:rgba(255,255,255,.26);}
.overlay-lightbox .fiche-photo-prev{left:22px;}
.overlay-lightbox .fiche-photo-suivante{right:22px;}
.overlay-lightbox .fiche-photo-dots{position:fixed; bottom:22px;}


/* ---------------------------------------------------------------------------
   Mobile — le tableau de bord interne n'avait jusqu'ici aucune adaptation
   pour petit écran : le bandeau du haut débordait (défilement horizontal
   forcé), les paires de champs des formulaires restaient côte à côte sur
   une largeur trop étroite pour rester lisibles, etc.
--------------------------------------------------------------------------- */
@media (max-width:680px){
  .topbar{
    flex-direction:column; align-items:flex-start; gap:10px; padding:14px 16px;
  }
  .topbar .brand{font-size:16.5px;}
  .topbar .who{width:100%; flex-wrap:wrap; row-gap:8px; font-size:12.5px;}

  .wrap{padding:18px 16px 40px;}

  .stats-panel{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
  .stat{min-width:0; padding:10px 8px;}
  .stat-valeur{font-size:20px;}

  .toolbar{flex-direction:column; align-items:stretch;}
  .toolbar input[type=search]{min-width:0; width:100%;}
  .toolbar .btn-primary{width:100%;}

  .grid{grid-template-columns:1fr;}

  .modal{padding:20px;}
  .modal-row{grid-template-columns:1fr;}

  .fiche-corps{padding:18px;}
  .fiche-photos{height:200px;}
  .fiche-caracteristiques{grid-template-columns:repeat(2, 1fr);}

  /* Sur mobile, 3-4 boutons alignés à droite sans retour à la ligne
     débordaient hors du cadre (le premier bouton, ex. "Supprimer", devenait
     invisible/inaccessible) — on les empile plutôt en pleine largeur. */
  .modal-actions{flex-direction:column; align-items:stretch;}
  .modal-actions button{width:100%;}
}

@media (max-width:380px){
  .stats-panel{grid-template-columns:repeat(2, 1fr);}
}

/* ---------------------------------------------------------------------------
   Onglet de navigation actif (Biens / Contacts / Prospects) — une couleur
   distincte par section pour repérer d'un coup d'œil sur quelle page on se
   trouve, plutôt qu'un simple gras.
--------------------------------------------------------------------------- */
.nav-actif-biens{ background:var(--violet); color:#fff; border-color:var(--violet); font-weight:600; }
.nav-actif-biens:hover{ background:var(--violet-deep); border-color:var(--violet-deep); }
.nav-actif-contacts{ background:var(--lagoon); color:#fff; border-color:var(--lagoon); font-weight:600; }
.nav-actif-contacts:hover{ background:var(--lagoon); opacity:.9; }
.nav-actif-prospects{ background:var(--clay); color:#fff; border-color:var(--clay); font-weight:600; }
.nav-actif-prospects:hover{ background:var(--clay); opacity:.9; }
.nav-actif-terrain{ background:var(--bleu); color:#fff; border-color:var(--bleu); font-weight:600; }
.nav-actif-terrain:hover{ background:var(--bleu); opacity:.9; }
.nav-actif-reserve{ background:var(--violet-deep); color:#fff; border-color:var(--violet-deep); font-weight:600; }
.nav-actif-reserve:hover{ background:var(--violet-deep); opacity:.9; }

.login-lien{text-align:center; margin-top:16px; font-size:13.5px;}
.login-lien a{color:var(--violet);}
.info-msg{background:#e8f5ec; color:#1f6b3a; border-radius:8px; padding:10px 12px; font-size:13.5px; margin-bottom:16px;}

/* --- Studio de diffusion Facebook / Instagram --- */
.badge-social{color:#fff;}
.badge-social-facebook{background:#1877F2;}
.badge-social-instagram{background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);}
.modal-social{max-width:980px; width:100%; max-height:92vh; overflow-y:auto; position:relative;}
.btn-close-social{position:absolute; top:10px; right:14px; background:none; border:0; font-size:30px; cursor:pointer; color:var(--ink-soft);}
.social-grille{display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:22px; align-items:start;}
.social-apercu canvas{width:100%; height:auto; border-radius:12px; border:1px solid var(--line); background:var(--violet-deep); display:block;}
.social-photos{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px;}
.social-vignette{flex:none; width:58px; height:58px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:none;}
.social-vignette img{width:100%; height:100%; object-fit:cover; display:block;}
.social-vignette.actif{border-color:var(--violet);}
.social-modeles{display:flex; flex-wrap:wrap; gap:8px;}
.social-modele{border:1px solid var(--line); background:var(--sand-raised); border-radius:20px; padding:7px 12px; cursor:pointer; font:inherit; font-size:13.5px;}
.social-modele.actif{background:var(--violet); color:#fff; border-color:var(--violet);}
.social-panneau textarea{width:100%; font:inherit; font-size:14px; line-height:1.45; resize:vertical;}
.social-compteur{font-size:12px; color:var(--ink-soft); text-align:right; margin-top:4px;}
.social-compteur.depasse{color:var(--clay); font-weight:600;}
.social-reseaux{display:flex; gap:22px; flex-wrap:wrap;}
.social-actions{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
.social-alerte{background:var(--clay-soft); color:var(--clay); border-radius:8px; padding:10px 12px; font-size:13.5px; margin-bottom:14px;}
.social-reglages{border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--sand-raised); margin:12px 0;}
.social-reglages h4,.social-historique h4{margin:0 0 6px; font-size:15px;}
.social-ligne{font-size:13.5px; padding:5px 0; border-bottom:1px solid var(--line);}
.social-ligne.erreur{color:var(--clay);}
.geocode-statut.ok{color:var(--lagoon);}
.geocode-statut.erreur{color:var(--clay);}
@media (max-width:760px){.social-grille{grid-template-columns:1fr;}.modal-social{padding:16px;}}
.social-actions .btn:disabled{opacity:.45; cursor:not-allowed;}
.social-reseaux label{text-transform:none; letter-spacing:0; font-size:15px; font-weight:600; color:var(--ink);}
.social-textes{border-left:3px solid var(--line); padding-left:12px; margin-bottom:10px;}
.social-textes input, .social-textes textarea{width:100%;}
.social-pastille{display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.25); margin-right:6px; vertical-align:-2px;}
.social-slides-bloc{margin-top:12px;}
.social-slides{display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px;}
.social-slide-mini{flex:none; width:54px; height:auto; aspect-ratio:4/5; border:2px solid transparent; border-radius:6px; cursor:pointer; background:#ddd;}
.social-slide-mini.actif{border-color:var(--violet);}
.social-slide-mini.exclu{opacity:.35;}

/* Vidéo animée (Reel) */
.social-video-bloc { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.social-video-bloc video { width: 100%; max-width: 460px; aspect-ratio: 9 / 16; background: #111; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.social-video-vide { width: 100%; max-width: 460px; aspect-ratio: 9 / 16; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; box-sizing: border-box; border: 2px dashed #cfd6d1; border-radius: 14px; color: #6b6b6b; font-size: 15px; }
.social-video-barre { width: 100%; max-width: 460px; height: 8px; background: #e6e9e7; border-radius: 4px; overflow: hidden; }
.social-couleur-libre { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13px; color:var(--ink-soft); }
.social-couleur-libre input[type=color] { width:48px; height:34px; border:1px solid #ccc; border-radius:6px; padding:2px; cursor:pointer; background:none; }
.social-reglages-fins { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.social-reglage-fin label { display:block; font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
.social-reglage-fin input[type=range] { width:100%; }
.social-reglage-fin select { width:100%; padding:6px; border:1px solid #ccc; border-radius:6px; }
.btn-mini { padding:4px 10px; font-size:12px; }
@media (max-width:600px) { .social-reglages-fins { grid-template-columns:1fr; } }
.social-video-barre > div { height: 100%; width: 0; background: #2f7d5b; transition: width .15s; }