/* ===========================================================
MY LIFE VISION — FEUILLE DE STYLE PRINCIPALE
Sommaire du fichier dans son ordre actuel :
01. Variables, dimensions adaptatives et thème clair
02. Base HTML, globe et interface supérieure
03. Navigation inférieure
04. Panneaux, profils, contenus sociaux et paramètres
05. Pieds de fenêtre, galerie, albums et utilitaires du lecteur
06. Fenêtres des lieux : en-tête, météo, actions et GPS
07. Souvenirs, photos et albums
08. Lecteur photo et menus des albums
09. Dialogues, formulaires, importation et mises à jour
10. Informations, carte GPS et notes du lecteur
11. Adaptations responsive
12. Ajustements complémentaires, conservés dans leur ordre actuel

Les repères décrivent les plages actuelles ; ils ne regroupent pas
toutes les règles d’un module. Des compléments existent dans la partie 12.
Conserver l’ordre des règles lors du rangement : il participe à la cascade.
Vérifier les variantes mobiles et les sélecteurs créés par le JavaScript.
Limiter les nouveaux !important et réutiliser les variables communes.
=========================================================== */

:root{

  /* =========================================================== 
  BLOC CSS 01.01 - COULEURS PRINCIPALES

  Gere :

  - Palette de base du projet
  - Couleurs de texte principales

  ----------------------------------------------------------- */

  --color-bg:#000;                         
  --color-text:#fff;                       
  --color-text-soft:rgba(255,255,255,.84);
  --color-text-dim:rgba(255,255,255,.58); 


  /* =========================================================== 
  BLOC CSS 01.02 - GLASSMORPHISM

  Gere :

  - Fonds translucides
  - Bordures et ombres des surfaces

  ----------------------------------------------------------- */

  --glass-bg: rgba(0,0,0,0.35);       
  --glass-bg-strong: rgba(0,0,0,0.55); 
  --glass-popover-bg: rgba(0,0,0,0.96);
  --glass-popover-shadow: 0 18px 42px rgba(0,0,0,0.72);
  --glass-border: rgba(255,255,255,0.15);
  --glass-shadow: rgba(0,0,0,0.6);


  /* =========================================================== 
  BLOC CSS 01.03 - COULEUR ACCENT

  Gere :

  - Couleur active reutilisee
  - Effets lumineux et bordures accent

  ----------------------------------------------------------- */

  --accent: rgba(255,255,255,0.9);
  --accent-glow: rgba(255,255,255,0.25);             
  --accent-border: rgba(255,255,255,0.15);

  /* =========================================================== 
  BLOC CSS 01.04 - SAFE AREA

  Gere :

  - Marges systeme mobile
  - Protection encoche et barres OS

  ----------------------------------------------------------- */

  --safe-top:env(safe-area-inset-top, 0px);     
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);


  /* =========================================================== 
  BLOC CSS 01.05 - RAYONS

  Gere :

  - Arrondis standards
  - Cohérence des cartes et boutons

  ----------------------------------------------------------- */

  --radius-xs:10px;
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;


  /* ===========================================================
  BLOC CSS 01.06 - BLUR

  Gere :

  - Flous reutilisables
  - Effet verre des interfaces

  ----------------------------------------------------------- */

  --blur-sm:10px;
  --blur-md:14px;


  /* ===========================================================
  BLOC CSS 01.07 - ECHELLE UI GLOBALE

  Gere :

  - Zoom global de l interface
  - Ajustement responsive commun

  ----------------------------------------------------------- */

  --ui-scale:1;   


  /* ===========================================================
  BLOC CSS 01.08 - ETATS HOVER

  Gere :

  - Couleurs de survol
  - Feedback souris desktop

  ----------------------------------------------------------- */

  --ui-hover: rgba(255,255,255,.08);


  /* ===========================================================
  BLOC CSS 01.09 - ESPACEMENTS STANDARD

  Gere :

  - Espacements reutilisables
  - Padding et gaps communs

  ----------------------------------------------------------- */

  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;


  /* ===========================================================
  BLOC CSS 01.10 - BARRES UI

  Gere :

  - Hauteurs des headers/footers
  - Base commune des barres fixes

  ----------------------------------------------------------- */

  --topbar-height:52px;
  --bottombar-height:58px;


  /* ===========================================================
  BLOC CSS 01.11 - POSITION HUD

  Gere :

  - Placement des elements flottants
  - Offsets autour du globe

  ----------------------------------------------------------- */

  --hud-top:calc(var(--safe-top) + 10px);     
  --hud-left:calc(var(--safe-left) + 10px);
  --hud-right:calc(var(--safe-right) + 10px);
  --hud-bottom:calc(var(--safe-bottom) + 10px);


  /* ===========================================================
  BLOC CSS 01.12 - TAILLE DES ICONES

  Gere :

  - Tailles standards des icones
  - Harmonisation des boutons

  ----------------------------------------------------------- */

  --icon-size:38px;


  /* ===========================================================
  BLOC CSS 01.13 - LIMITES LAYOUT

  Gere :

  - Largeurs max des barres
  - Limites desktop et mobile

  ----------------------------------------------------------- */

  --topbar-max:760px;                  
  --panel-width:380px;                  
  --panel-max-height:min(72vh, 760px);  


  /* ===========================================================
  BLOC CSS 01.14 - HAUTEUR APP

  Gere :

  - Hauteur principale application
  - Support viewport moderne

  ----------------------------------------------------------- */

  --app-height:100vh;           


  /* =========================================================== 
  BLOC CSS 01.15 - TYPOGRAPHIE

  Gere :

  - Police et rendus texte
  - Lisibilite globale

  ----------------------------------------------------------- */

  --font-ui:Arial, Helvetica, sans-serif;
}


/* ===========================================================
BLOC CSS 01.16 - SUPPORT MOBILE 100DVH

Gere :

- Correction hauteur mobile
- Fallback viewport dynamique

----------------------------------------------------------- */

@supports (height: 100dvh){

  :root{

    --app-height:100dvh;   
  }

}


/* =========================================================== 
BLOC CSS 01.17 - RESPONSIVE MOBILE <= 480PX

Gere :

- Variables compactes mobile
- Ajustements petits ecrans

----------------------------------------------------------- */

@media (max-width:480px){

  :root{

    --ui-scale:1;

    --space-1:5px;
    --space-2:8px;
    --space-3:12px;
    --space-4:15px;
    --space-5:20px;

    --topbar-height:56px;
    --bottombar-height:70px;

    --icon-size:38px;

    --panel-width:min(100vw - 20px, 360px);

    --hud-top:calc(var(--safe-top) + 10px);
    --hud-left:calc(var(--safe-left) + 10px);
    --hud-right:calc(var(--safe-right) + 10px);
    --hud-bottom:calc(var(--safe-bottom) + 10px);
  }
}


/* ===========================================================
BLOC CSS 01.18 - RESPONSIVE TABLETTE 481PX A 768PX

Gere :

- Variables tablette
- Entre-deux mobile/desktop

----------------------------------------------------------- */

@media (min-width:481px) and (max-width:768px){

  :root{

    --ui-scale:.97;                   
    --topbar-height:58px;
    --bottombar-height:74px;
    --panel-width:min(100vw - 24px, 380px);
  }
}


/* ===========================================================
BLOC CSS 01.19 - RESPONSIVE GRAND ECRAN

Gere :

- Variables desktop large
- Echelle UI confortable

----------------------------------------------------------- */

@media (min-width:1201px) and (max-width:1599px){

  :root{

    --ui-scale:1.05;           
    --panel-width:400px;
  }
}


/* ===========================================================
BLOC CSS 01.20 - RESPONSIVE ULTRA LARGE

Gere :

- Variables tres grands ecrans
- Limites visuelles premium

----------------------------------------------------------- */

@media (min-width:1600px){

  :root{

    --ui-scale:1.14;
    --panel-width:430px;
    --topbar-max:1320px;
  }

  /* Commentaires : actions blanches, média unique et aperçu du brouillon. */
  .comments-send-btn.is-ready,
  .place-comment-submit.is-ready{
    border-color:#fff !important;
    background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
    color:#fff !important;
    opacity:1 !important;
    box-shadow:0 0 14px rgba(255,255,255,.22) !important;
  }

  .comment-draft-media{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 30px;
    align-items:center;
    gap:9px;
    margin:0 8px 7px;
    padding:6px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:11px;
    background:rgba(255,255,255,.055);
    color:#fff;
    font-size:12px;
    font-weight:750;
  }

  

  .comment-draft-media button{
    width:30px;
    height:30px;
    padding:0;
    border:1px solid rgba(255,255,255,.2);
    border-radius:9px;
    background:rgba(255,255,255,.06);
    color:#fff;
  }

  .comment-media-grid{
    margin:7px 0 4px;
  }
}


/* ===========================================================
BLOC CSS 01.21 - THEME CLAIR

Gere :

- Palette claire des surfaces
- Textes, bordures et controles

----------------------------------------------------------- */

html[data-app-theme="light"]{
  --color-bg:#e7ebf1;
  --color-text:#111722;
  --color-text-soft:rgba(17,23,34,.82);
  --color-text-dim:rgba(17,23,34,.58);
  --glass-bg:rgba(248,250,253,.82);
  --glass-bg-strong:rgba(248,250,253,.94);
  --glass-popover-bg:rgba(248,250,253,.98);
  --glass-popover-shadow:0 18px 42px rgba(25,34,48,.24);
  --glass-border:rgba(17,23,34,.16);
  --glass-shadow:rgba(25,34,48,.24);
  --accent:rgba(17,23,34,.9);
  --accent-glow:rgba(47,143,255,.22);
  --accent-border:rgba(17,23,34,.16);
  --ui-hover:rgba(17,23,34,.08);
}

html[data-app-theme="light"] button,
html[data-app-theme="light"] input,
html[data-app-theme="light"] textarea,
html[data-app-theme="light"] select{
  color:var(--color-text);
}

html[data-app-theme="light"] .legend-row,
html[data-app-theme="light"] .viewer-visibility-row,
html[data-app-theme="light"] .network-section-btn,
html[data-app-theme="light"] .album-overview-card,
html[data-app-theme="light"] .album-overview-info{
  background:rgba(17,23,34,.055);
  border-color:rgba(17,23,34,.16);
}

html[data-app-theme="light"] .panel-head,
html[data-app-theme="light"] .panel-footer,
html[data-app-theme="light"] .panel-foot{
  border-color:rgba(17,23,34,.13);
}

html[data-app-theme="light"] .ui-icon-btn:hover,
html[data-app-theme="light"] .legend-row:hover,
html[data-app-theme="light"] .viewer-visibility-row:hover{
  background:rgba(17,23,34,.09);
}


/* ===========================================================
BLOC CSS 02.01 - RESET GLOBAL

Gere :

- Remise a zero des elements
- Base de calcul stable

----------------------------------------------------------- */

*,*::before,*::after{
  box-sizing:border-box;    
}


/* ===========================================================
BLOC CSS 02.02 - BASE HTML, GLOBE ET INTERFACE SUPÉRIEURE

Socle de la page, globe, indicateurs et barre supérieure.
=========================================================== */

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;              
  background:var(--color-bg);
}

body{
  position:relative;
  color:var(--color-text);
  font-family:var(--font-ui);
  -webkit-tap-highlight-color:transparent; 
  text-rendering:optimizeLegibility;
}


/* ===========================================================
🔘 FORM ELEMENTS 🔘  
----------------------------------------------------------- */

button,input{
  font:inherit;    
}

button{
  cursor:pointer;   
}


/* ===========================================================
🧱 STRUCTURE APP 🧱
----------------------------------------------------------- */

#app{
  position:relative;
  width:100%;
  height:var(--app-height);     
  overflow:hidden;
  background:#000;
}

#globe{
  position:absolute;
  inset:0;                
  width:100%;
  height:100%;
}

.lunar-easter-egg{
  position:absolute;
  inset:0;
  z-index:20;
  overflow:hidden;
  pointer-events:none;
  opacity:var(--lunar-opacity, 0);
  visibility:hidden;
  transition:visibility 0s linear 180ms;
}

.lunar-easter-egg.is-visible{
  visibility:visible;
  transition-delay:0s;
}

.lunar-easter-image{
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  height:min(36vh, 66.6667vw);
  object-fit:cover;
  object-position:center 25%;
  transform:translate(-50%, var(--lunar-lift, 28px));
  user-select:none;
  -webkit-user-drag:none;
}

.lunar-easter-message{
  position:absolute;
  left:50%;
  top:13%;
  width:max-content;
  max-width:calc(100% - 48px);
  padding:10px 18px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.82);
  border-radius:18px;
  background:rgba(0,0,0,.52);
  color:#fff;
  box-shadow:0 0 20px rgba(255,255,255,.14);
  font-size:clamp(14px, 1.7vw, 22px);
  font-weight:800;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  opacity:var(--lunar-message-opacity, 0);
}

.lunar-easter-title{
  display:block;
  margin-bottom:4px;
  white-space:nowrap;
}

@media (max-width:700px){
  .lunar-easter-message{
    top:10%;
    white-space:normal;
  }
}


/* ===========================================================
🧠 LAYER UI (AU DESSUS DU GLOBE) 🧠  
----------------------------------------------------------- */

.ui-layer{
  position:absolute;
  inset:0;
  z-index:10000;             /* au-dessus du globe */
  pointer-events:none;       /* laisse passer clic sauf override */
}

.ui-hit{
  pointer-events:auto;      /* active interaction */
}


/* ===========================================================
🧊 GLASS EFFECT GLOBAL 🧊 
----------------------------------------------------------- */

.ui-glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:0 10px 34px var(--glass-shadow);
  border-radius:inherit;
  backdrop-filter:blur(var(--blur-md));        /* blur moderne */
  -webkit-backdrop-filter:blur(var(--blur-md));/* support safari */
}


/* ===========================================================
🔝 TOPBAR 🔝
----------------------------------------------------------- 

Gere :

- 4 boutons
- Recherche
- Parametre
- Reglage
- Pillule header haut sous barre recherche

=========================================================== */

.topbar-wrap{
  position:absolute;
  top:var(--hud-top);
  left:50%;
  transform:translateX(-50%) scale(var(--ui-scale)); /* centré + scale */
  transform-origin:top center;
  width:min(
  calc(100vw - 24px - var(--safe-left) - var(--safe-right)),
  var(--topbar-max)
  );
}

.topbar{
  min-height:var(--topbar-height);
  border-radius:18px;

  display:grid;
  grid-template-columns:auto 1fr auto;

  gap:8px;          
  padding:8px 8px;  

  align-items:center;
}


/* ===========================================================
SECOND HEADER GLOBAL
-----------------------------------------------------------
Même structure que le header principal, boutons ajoutés plus tard
=========================================================== */

.services-topbar{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  box-sizing:border-box;
  opacity:0;
  pointer-events:none;
  transform:translateY(-120%);
}

.services-topbar-content{
  grid-column:1 / -1;
  min-height:38px;
}

.topbar-wrap.is-services-open .topbar-primary{
  opacity:0;
  pointer-events:none;
  transform:translateY(-120%);
}

.topbar-wrap.is-services-open .services-topbar{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.topbar-primary.hide ~ .services-topbar{
  opacity:0;
  pointer-events:none;
  transform:translateY(-120%);
}

.topbar-left-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.notification-topbar-btn{
  position:relative;
}

.header-notifications-icon{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
  opacity:.82;
  pointer-events:none;
}

.header-account-settings-icon{
  display:block;
  width:29px;
  height:29px;
  object-fit:contain;
  transform:translateY(-2px);
  opacity:.82;
  pointer-events:none;
}

.notification-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border:1px solid rgba(255,70,70,.9);
  border-radius:999px;
  background:rgba(255,70,70,.10);
  color:#fff;
  box-shadow:0 0 14px rgba(255,70,70,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}

.notification-badge.is-visible{
  display:flex;
}


/* ===========================================================
🔘 BOUTONS ICÔNES 🔘 
----------------------------------------------------------- */

.ui-icon-btn{
  width:var(--icon-size);
  height:var(--icon-size);
  border-radius:14px;

  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);

  color:var(--color-text);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;
}

.ui-icon-btn:hover{
  background:rgba(255,255,255,.08); /* effet hover */
}

.topbar .ui-icon-btn,
.panel-head .ui-icon-btn,
.panel-footer .ui-icon-btn,
.panel-foot .ui-icon-btn,
.publication-composer-head .ui-icon-btn,
.photo-viewer-top .ui-icon-btn,
.photo-viewer-bottom .ui-icon-btn{
  background:transparent;
}

.panel-head .ui-icon-btn:hover,
.panel-footer .ui-icon-btn:hover,
.panel-foot .ui-icon-btn:hover,
.publication-composer-head .ui-icon-btn:hover,
.photo-viewer-top .ui-icon-btn:hover,
.photo-viewer-bottom .ui-icon-btn:hover{
  background:rgba(255,255,255,.08);
}

.topbar .ui-icon-btn:hover{
  background:transparent;
}

.ui-icon-btn:disabled{
  opacity:.4;
  pointer-events:none;
}

.header-preferences-icon{
  display:block;
  width:32px;
  height:32px;
  object-fit:contain;
  transform:translateY(-1px);
  opacity:.82;
  pointer-events:none;
}

.header-photo-import-icon{
  display:block;
  width:23px;
  height:23px;
  object-fit:contain;
  opacity:.82;
  pointer-events:none;
}

.notifications-panel-body{
  gap:8px;
  padding-top:10px;
}

.notification-date-section{
  flex:0 0 auto;
  width:100%;
  box-sizing:border-box;
  padding:2px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  color:rgba(255,255,255,.82);
}

.notification-date-section:first-child{
  padding-top:0;
}

.automatic-pagination-trigger{
  width:100%;
  height:1px;
  min-height:1px;
  grid-column:1 / -1;
  flex:0 0 1px;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.automatic-pagination-trigger.is-loading{
  height:24px;
  min-height:24px;
  flex-basis:24px;
}

.automatic-pagination-trigger.is-loading::after{
  content:"";
  width:12px;
  height:12px;
  border:1px solid rgba(255,255,255,.22);
  border-top-color:rgba(255,255,255,.82);
  border-radius:50%;
  animation:automatic-pagination-spin .7s linear infinite;
}

@keyframes automatic-pagination-spin{
  to{ transform:rotate(360deg); }
}

.notification-empty{
  flex:1;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--color-muted);
  text-align:center;
}

.notification-empty-icon{
  font-size:28px;
  opacity:.8;
}

.notification-row{
  box-sizing:border-box;
  flex:0 0 auto;
  width:100%;
  height:auto;
  min-height:72px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:var(--color-text);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  text-align:left;
}

.notification-main{
  width:100%;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 10px;
  align-items:start;
  gap:10px;
  cursor:pointer;
  box-sizing:border-box;
}

.notification-row:hover{
  background:rgba(255,255,255,.07);
}
.notification-icon{
  width:50px;
  height:50px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  overflow:hidden;
  margin-top:0;
}



.notification-icon.is-profile-link{
  width:50px;
  height:50px;
  flex:0 0 50px;
  cursor:pointer;
  border-radius:12px;
  border:2px solid rgba(0,0,0,.68);
  background-color:rgba(255,255,255,.08);
  background-size:cover;
  background-position:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22);
  overflow:hidden;
}

.notification-icon.is-profile-link:hover{
  opacity:.86;
}

.notification-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  width:100%;
  margin-top:0;
  align-items:center;
  justify-content:stretch;
  box-sizing:border-box;
}

.notification-result{
  display:block;
  margin:0;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,.65);
}

.notification-status-line{
  display:flex;
  align-items:flex-start;
  gap:5px;
  margin-top:4px;
  white-space:nowrap;
}

.notification-status-separator{
  color:rgba(255,255,255,.42);
  font-size:10px;
}

.notification-status-line .notification-time{
  margin:0;
}

.notification-side{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding-top:4px;
}

.notification-copy{
  display:block;
  min-width:0;
}

.notification-title{
  display:block;
  font-size:13px;
  font-weight:750;
  color:var(--color-text);
}

.notification-message{
  display:block;
  margin-top:2px;
  font-size:11px;
  line-height:1.35;
  color:var(--color-muted);
}

.notification-time{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:rgba(255,255,255,.48);
  transform:none;
}

.notification-unread-dot{
  width:7px;
  height:7px;
  align-self:center;
  border-radius:50%;
  background:#3b82f6;
  opacity:0;
}

.notification-row.is-unread .notification-unread-dot{
  opacity:1;
}


/* ===========================================================
🔎 SEARCH BAR 🔎 
----------------------------------------------------------- */

.search-wrap{
  min-width:0;
  height:var(--icon-size);

  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--glass-bg);

  display:flex;
  align-items:center;
  gap:10px;

  padding:0 14px;
}

.search-wrap input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  color:var(--color-text);
  background:transparent;
}

.search-wrap input::placeholder{
  color:var(--color-text-dim);
}

#mainSearchInput::placeholder{
  color:rgba(255,255,255,.70);
}

.main-search-close[hidden]{
  display:none;
}


/* ===========================================================
🔝 WRAPPER CENTRE TOPBAR 🔝
----------------------------------------------------------- */

.topbar-center-wrapper{
  position:relative;
  flex:1; 
  display:flex;
  justify-content:center;
  align-items:center;
}

.topbar-center-wrapper .search-wrap{
  width:100%;
}


/* ===========================================================
🌍 FLOATING GLOBE (SOUS SEARCH) 🌍
----------------------------------------------------------- */

.nav-floating-bottom{
  position:absolute;
  top:100%;
  bottom:auto;
  margin-top:16px;
  margin-bottom:0;

  left:50%;
  transform:translateX(-50%);

  z-index:10;
}


/* ===========================================================
⬇️ BOUTON GLOBE PILULE ⬇️
----------------------------------------------------------- */

#btnHeaderToggle,
#btnServicesHeaderToggle{
  /* Une flèche suit l'état interactif de son header, même lorsqu'il est masqué. */
  pointer-events:inherit;
  height:20px;
  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:24px;
  line-height:1;

  border-radius:18px;

  background:var(--glass-bg);
  border:1px solid var(--glass-border);

  transition:transform 0.25s ease;
}

#btnServicesHeaderToggle{
  top:calc(100% - 8px);
}

#btnHeaderToggle:hover,
#btnServicesHeaderToggle:hover{
  background:var(--ui-hover);
}


/* ===========================================================
📍 BOUTON FLOATING HUD  📍
-----------------------------------------------------------
Gere :

- LEFT
- RIGHT
- HUD

=========================================================== */

.hud-left{
  position:absolute;
  top:50%;
  left:var(--hud-left);

  display:flex;
  flex-direction:column;
  gap:var(--space-2);

  transform:translateY(-50%) scale(var(--ui-scale));
  transform-origin:top left;
}

.hud-right{
  position:absolute;
  top:calc(var(--hud-top) + 84px);
  right:max(
  var(--hud-right),
  calc((100vw - var(--topbar-max)) / 2)
  );

  display:flex;
  flex-direction:column;
  gap:var(--space-2);

  transform:scale(var(--ui-scale));
  transform-origin:top right;
}

/* ===========================================================
🧩 HUD ELEMENTS 🧩
----------------------------------------------------------- */

.hud-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:40px;
  min-width:112px;

  padding:10px 14px;

  border-radius:var(--radius-sm);

  color:var(--color-text-soft);
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
}

.stack-btn{
  width:43px;
  height:43px;

  border-radius:14px;

  border:1px solid var(--glass-border);
  background:var(--glass-bg-strong);

  color:var(--color-text);

  box-shadow:0 8px 26px rgba(0,0,0,.34);
}

.map-mode-icon{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
  opacity:.82;
  pointer-events:none;
}

#btnMap{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  padding:0;
  line-height:1;
}

.stack-btn:hover{
  background:var(--ui-hover);
}

.stack-btn:focus,
.stack-btn:focus-visible{
  outline:none;
}


/* ===========================================================
BLOC CSS 03 - NAVIGATION INFÉRIEURE

Conteneurs, boutons et états de la barre de navigation inférieure.
=========================================================== */

.bottombar-wrap{
  position:absolute;
  left:50%;
  bottom:var(--hud-bottom);

  transform:translateX(-50%) scale(var(--ui-scale)); /* centre + scale global */
  transform-origin:bottom center;

  width:min(
  calc(100vw - 24px - var(--safe-left) - var(--safe-right)),
  760px /* limite max desktop */
  );
}

.bottombar{
  min-height:var(--bottombar-height);
  border-radius:18px;

  display:grid;
  grid-template-columns:repeat(5, 1fr); 
  gap:var(--space-1);

  padding:8px;
}


/* ===========================================================
🔘 NAV ITEM BOUTON MENU 🔘
----------------------------------------------------------- */

.nav-item{
  position:relative;
  min-height:38px;
  border-radius:14px;

  border:1px solid transparent;
  background:transparent;

  color:var(--color-text-soft);

  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-item .nav-ico{
  font-size:18px;
  line-height:1;
}

.nav-home-icon{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
  opacity:.82;
  pointer-events:none;
}

.nav-contacts-icon{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
  opacity:.82;
  pointer-events:none;
}

.nav-globe-icon{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
  opacity:.82;
  pointer-events:none;
}

.nav-souvenirs-icon{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
  opacity:.82;
  pointer-events:none;
}

.nav-camera-shutter-icon{
  position:relative;
  display:block;
  width:34px;
  height:34px;
  opacity:.82;
  flex:0 0 auto;
  border:2px solid transparent;
  border-radius:999px;
  background:transparent;
  box-shadow:0 0 0 2px #fff;
  pointer-events:none;
}

.nav-camera-shutter-icon::before{
  content:'';
  position:absolute;
  inset:2px;
  border-radius:999px;
  background:#fff;
}




/* ===========================================================
✅ ÉTAT ACTIF ✅
----------------------------------------------------------- */

/* Headers, toutes tailles : sans cadre permanent, avec retour d'appui et focus clavier. */
.topbar-left-actions > .ui-icon-btn,
.topbar-actions > .ui-icon-btn{
  border-color:transparent;
}

.topbar-left-actions > .ui-icon-btn:active,
.topbar-actions > .ui-icon-btn:active,
.bottombar .nav-item:active{
  background:rgba(255,255,255,.08);
}

.topbar-left-actions > .ui-icon-btn:focus-visible,
.topbar-actions > .ui-icon-btn:focus-visible,
.bottombar .nav-item:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:2px;
}


/* ===========================================================
🔘 WRAPPER NAV 🔘
----------------------------------------------------------- */

.nav-item-wrapper{
  position:relative;

  display:flex;
  width:100%;
  height:100%;

  justify-content:center; 
}

.nav-item-wrapper .nav-item{
  width:100%;
  height:100%;
}


/* ===========================================================
🔘 FLOATING BUTTONS 🔘
----------------------------------------------------------- */

.nav-floating-btn{
  position:absolute;
  bottom:100%;
  margin-bottom:16px;

  padding:6px 10px;

  font-size:20px;
  font-weight:700;
  letter-spacing:1px;

  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  color:var(--color-text);

  border-radius:14px; 

  white-space:nowrap;

  pointer-events:auto;
  z-index:5;

}

.nav-floating-btn:hover{
  background:var(--ui-hover);
}

#btnProgress:hover{
  background:var(--ui-hover);
}


/* ===========================================================
🔧 POSITION SPÉCIFIQUE EXPLORATION ET AMIS 🔧
----------------------------------------------------------- */

#btnLegend{
  left:0;
  transform:translateX(-20%);
}

#btnNetwork{
  right:0;
  transform:translateX(20%);
}

#btnLegend,
#btnNetwork{
  width:45px;
  height:45px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
}


/* ===========================================================
⬇️ PROGRESSION BOUTON PILULE ⬇️
----------------------------------------------------------- */

#btnProgress{
  position:absolute;
  bottom:100%;
  margin-bottom:16px;

  height:20px;
  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:24px;
  line-height:1;

  border-radius:999px; 

  background:var(--glass-bg);
  border:1px solid var(--glass-border);

  pointer-events:auto;
  z-index:5;
}


/* ===========================================================
🎬 MASQUAGE TOPBAR / BOTTOMBAR 🎬
----------------------------------------------------------- */

.topbar{
  transition:transform .3s ease, opacity .25s ease;
}

.topbar.hide{
  transform:translateY(-120%);
  opacity:0;
}

.hud-right{
  transition:transform .3s ease, opacity .25s ease;
}

.hud-right.hide{
  transform:scale(var(--ui-scale)) translateY(-120%);
  opacity:0;
  pointer-events:none;
}

.bottombar{
  transition:transform .3s ease, opacity .25s ease;
}

.bottombar.hide{
  transform:translateY(120%);
  opacity:0;
}


/* ===========================================================
MODE ZOOM IMMERSIF DU GLOBE
-----------------------------------------------------------
Affiche le retour à la vue initiale après un zoom manuel
=========================================================== */

.globe-zoom-return{
  position:absolute;
  left:50%;
  bottom:var(--hud-bottom);
  z-index:400;
  width:min(calc(100vw - 24px - var(--safe-left) - var(--safe-right)), 240px);
  min-height:48px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:var(--glass-bg);
  color:#fff;
  font-size:16px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(120%) scale(var(--ui-scale));
  transform-origin:bottom center;
  transition:transform .3s ease, opacity .25s ease, background .2s ease;
}

.globe-zoom-return.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(var(--ui-scale));
}

.globe-zoom-return:hover{
  background:rgba(255,255,255,.08);
}


/* ===========================================================
🌑 MODAL OVERLAY SYSTEM 🌑
-----------------------------------------------------------

Gere : 

- Legend
- Progress
- Network
- Info
- Section
- GPS

=========================================================== */

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:10000;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  opacity:0;
  pointer-events:none;

  transition:
  opacity .22s ease,
  transform .22s ease;
}

.modal-overlay:not(.is-open):not(.show),
.modal-overlay:not(.is-open):not(.show) *{
  pointer-events:none !important;
}


#profileStatPanel.is-open{
  z-index:10090;
}

#commentsPanel.is-open{
  z-index:10110;
}

#reportPanel.is-open{
  z-index:100500;
}

#publicationComposerPanel.is-open{
  z-index:10100;
}
.modal-overlay.is-open,
.modal-overlay.show{
  opacity:1;
  pointer-events:auto;
}


/* ===========================================================
BLOC CSS 04.01 - PANNEAUX, PROFILS ET CONTENUS SOCIAUX

Dimensions des panneaux puis styles des profils et contenus sociaux.
=========================================================== */

.panel-modal-box{
  width:var(--panel-width);
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);

  border-radius:var(--radius-lg);
  overflow:hidden;

  transform:translateY(10px);
  transition:transform .22s ease;
}

.modal-overlay.is-open .panel-modal-box,
.modal-overlay.show .panel-modal-box{
  transform:translateY(0);
}

.profile-panel-box{
  width:min(var(--topbar-max), calc(100vw - 20px));
}

@media (min-width:641px){
  #souvenirsPanel > .panel-modal-box,
  #albumPickerPanel > .panel-modal-box,
  #createAlbumPanel > .panel-modal-box,
  #cameraPanel > .panel-modal-box{
    width:min(600px, calc(100vw - 20px));
  }
}

.contact-message-badge{
  top:-3px;
  right:calc(50% - 22px);
  border-color:rgba(255,23,68,.96);
  background:rgba(255,23,68,.20);
  box-shadow:0 0 12px rgba(255,23,68,.62), inset 0 0 8px rgba(255,255,255,.10);
}

.profile-panel-body{
  padding:0 !important;
  gap:0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
}

#profilePanel .profile-panel-box{
  position:relative;
}

#profilePanel .profile-panel-box > .panel-head,
#profilePanel .profile-panel-box > .panel-footer{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  transform:translateY(0);
  background:#000;
  will-change:transform;
  transition:transform .24s ease;
}

#profilePanel .profile-panel-box > .panel-head{
  top:0;
}

#profilePanel .profile-panel-box > .panel-footer{
  bottom:0;
}

#profilePanel .profile-panel-body{
  padding-top:var(--feed-window-head-height, 58px) !important;
  padding-bottom:var(--feed-window-footer-height, 65px) !important;
  scroll-padding-top:var(--feed-window-head-height, 58px);
  scroll-padding-bottom:var(--feed-window-footer-height, 65px);
  box-sizing:border-box;
}

#profilePanel.is-feed-header-hidden .profile-panel-box > .panel-head{
  transform:translateY(-105%);
  pointer-events:none;
}

#profilePanel.is-feed-header-hidden .profile-panel-box > .panel-footer{
  transform:translateY(105%);
  pointer-events:none;
}

#souvenirsPanel > .panel-modal-box{
  position:relative;
}

#souvenirsPanel > .panel-modal-box > .panel-head,
#souvenirsPanel > .panel-modal-box > .panel-footer{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  transform:translateY(0);
  background:#000;
  will-change:transform;
  transition:transform .24s ease;
}

#souvenirsPanel > .panel-modal-box > .panel-head{
  top:0;
}

#souvenirsPanel > .panel-modal-box > .panel-footer{
  bottom:0;
}

#souvenirsPanelBody{
  padding-top:calc(var(--feed-window-head-height, 58px) + 14px);
  padding-bottom:calc(var(--feed-window-footer-height, 65px) + 20px);
  scroll-padding-top:var(--feed-window-head-height, 58px);
  scroll-padding-bottom:var(--feed-window-footer-height, 65px);
  box-sizing:border-box;
}

#souvenirsPanel.is-feed-header-hidden > .panel-modal-box > .panel-head{
  transform:translateY(-105%);
  pointer-events:none;
}

#souvenirsPanel.is-feed-header-hidden > .panel-modal-box > .panel-footer{
  transform:translateY(105%);
  pointer-events:none;
}

.profile-cover-banner{
  width:100%;
  height:230px;
  flex:0 0 auto;
  display:block;
  position:relative;
  background:#fff;
  background-repeat:no-repeat;
  background-size:100% auto;
  background-position:center;
}

.profile-cover-banner.is-empty{
  background-color:rgba(255,255,255,.025);
  border:0;
  box-sizing:border-box;
}

.profile-cover-empty-plus{
  position:absolute;
  left:50%;
  top:30%;
  transform:translate(-50%, -50%);
  color:#fff;
  font-size:27px;
  line-height:1;
  font-weight:300;
  width:38px;
  height:36px;
  padding:0;
  border:2px dashed #fff;
  border-radius:50%;
  box-sizing:border-box;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 14px color-mix(in srgb, #fff 46%, transparent);
  cursor:pointer;
  z-index:3;
}

.profile-cover-banner.is-cover-hidden{
  height:230px;
  background:transparent;
}

.profile-cover-banner.is-cropping{
  cursor:grab;
  touch-action:none;
}

.profile-cover-banner.is-cropping:active{
  cursor:grabbing;
}

.profile-crop-hint{
  position:absolute;
  left:50%;
  top:34%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
  pointer-events:none;
  z-index:4;
}

.profile-crop-hand{
  font-size:24px;
  line-height:1;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.78);
}

.profile-photo-strip{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:grid;
  grid-template-columns:1fr 1.16fr 1fr;
  gap:10px;
  align-items:end;
}

.profile-photo-strip.is-combined{
  left:50%;
  right:auto;
  width:min(34%, 132px);
  grid-template-columns:minmax(0, 1fr);
  gap:0;
  transform:translateX(-50%);
}

.profile-photo-strip.is-expanded{
  top:10px;
  gap:5px;
  grid-template-columns:repeat(3, 1fr);
}

.profile-photo-strip.is-expanded .profile-photo-slot{
  height:220px;
}

.profile-photo-strip.is-expanded .profile-photo-slot.is-main{
  height:220px;
}

.profile-identity-row{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 32px;
  grid-template-rows:auto;
  align-items:center;
  gap:12px;
  row-gap:5px;
  width:100%;
  box-sizing:border-box;
  padding:14px;
}

.profile-identity-spacer{
  min-width:0;
}

.profile-country-badge{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.profile-country-badge img{
  width:24px;
  height:16px;
  border-radius:2px;
  object-fit:cover;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

.profile-country-badge span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-name-block{
  grid-column:2;
  grid-row:1;
  min-width:0;
  text-align:center;
}

.profile-user-name{
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1.1;
  text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.34);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}



.profile-identity-details{
  grid-column:1 / -1;
  grid-row:2;
  min-width:0;
  text-align:left;
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.profile-identity-details[hidden]{ display:none; }
.profile-identity-detail-line{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.profile-identity-toggle{
  grid-column:3;
  grid-row:1;
  width:32px;
  height:32px;
  padding:0;
  border-radius:10px;
  cursor:pointer;
}
.profile-identity-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }







.profile-owner-actions{
  grid-column:1 / -1;
  grid-row:3;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  margin-top:2px;
  margin-bottom:5px;
}

.profile-visitor-action-btn{
  width:100%;
  min-height:36px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:transparent;
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.profile-visitor-action-btn:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
}

.profile-visitor-action-btn[data-profile-action="toggle-follow"].is-active,
.profile-visitor-action-btn[data-profile-action="friend"].is-active{
  border-color:#fff;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035));
  color:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.18);
}

.profile-visitor-action-btn.is-pending{
  color:rgba(255,255,255,.68);
}

.viewer-share-body .viewer-visibility-row{
  width:100%;
}

.profile-media-picker-body{
  display:flex;
  flex-direction:column;
  gap:0;
}

.profile-media-picker-body img{
  cursor:pointer;
  transition:.2s;
}


.settings-account-input[type="date"]{
  appearance:none;
  -webkit-appearance:none;
  color-scheme:dark;
}
.settings-account-input[type="date"]::-webkit-calendar-picker-indicator{
  display:none;
  opacity:0;
  pointer-events:none;
}

#settingsAccountConfirmBtn.is-ready{
  border-color:rgba(47,143,255,.78);
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
  box-shadow:0 0 14px rgba(47,143,255,.28);
}



.profile-level-pill{
  justify-self:end;
  min-width:74px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 0 18px rgba(47,143,255,.22);
}

.profile-level-pill:hover{
  filter:brightness(1.08);
}

.profile-info-toggle-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  padding:0 14px 12px;
}

.profile-info-toggle-line{
  height:1px;
  background:rgba(255,255,255,.16);
}

.profile-info-toggle-btn{
  min-width:118px;
  height:30px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;
  color:rgba(255,255,255,.86);
  font-size:20px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  transition:border-color .2s ease, color .2s ease;
}

.profile-info-toggle-arrow{
  display:inline-block;
  line-height:1;
  transform:translateY(5px);
}

.profile-info-toggle-arrow.is-open{
  transform:translateY(-5px);
}

.profile-info-toggle-btn:hover{
  border-color:rgba(255,255,255,.26);
  color:#fff;
}

.profile-info-toggle-btn.is-disabled{
  opacity:.42;
  cursor:not-allowed;
  pointer-events:none;
}

.profile-info-toggle-btn.is-disabled:hover{
  border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.86);
}

.profile-content-toggle-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  padding:0 14px 12px;
  flex:0 0 auto;
}

.profile-content-toggle-line{
  height:1px;
  background:rgba(255,255,255,.16);
}

.profile-content-toggle-row[data-profile-content-row="publications"]{
  --profile-section-accent:#54e636;
}

.profile-content-toggle-row[data-profile-content-row="stories"]{
  --profile-section-accent:#2f8fff;
}

.profile-content-toggle-row[data-profile-content-row="reels"]{
  --profile-section-accent:#AEB6C2;
}

.profile-content-toggle-row[data-profile-content-row="friends"]{
  --profile-section-accent:#FF1744;
}

.profile-content-toggle-row[data-profile-content-row="groups"]{
  --profile-section-accent:#FFD84D;
}

[data-profile-content="publications"]{
  --profile-card-accent:#54e636;
}

[data-profile-content="stories"]{
  --profile-card-accent:#2f8fff;
}

[data-profile-content="reels"]{
  --profile-card-accent:#AEB6C2;
}

[data-profile-content="friends"],
.network-section-divider[data-contact-section="contact"] + .network-content-rail{
  --profile-card-accent:#FF1744;
}

[data-profile-content="groups"],
.network-section-divider[data-contact-section="group"] + .network-content-rail{
  --profile-card-accent:#FFD84D;
}

.profile-content-toggle-row[data-profile-content-row="publications"] .profile-content-toggle-line,
.profile-content-toggle-row[data-profile-content-row="stories"] .profile-content-toggle-line,
.profile-content-toggle-row[data-profile-content-row="reels"] .profile-content-toggle-line,
.profile-content-toggle-row[data-profile-content-row="friends"] .profile-content-toggle-line,
.profile-content-toggle-row[data-profile-content-row="groups"] .profile-content-toggle-line{
  background:var(--profile-section-accent);
}

.profile-panel-body.is-remote-profile .profile-content-toggle-row[data-profile-content-row] .profile-content-toggle-line{
  transform:scaleY(.5);
  transform-origin:center;
}

.profile-content-toggle-btn{
  min-width:118px;
  height:30px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-shadow:none;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}

.profile-content-toggle-btn:hover{
  border-color:rgba(255,255,255,.26);
  color:#fff;
  background:rgba(255,255,255,.035);
}

.profile-content-toggle-row[data-profile-content-row="publications"] .profile-content-toggle-btn,
.profile-content-toggle-row[data-profile-content-row="stories"] .profile-content-toggle-btn,
.profile-content-toggle-row[data-profile-content-row="reels"] .profile-content-toggle-btn,
.profile-content-toggle-row[data-profile-content-row="friends"] .profile-content-toggle-btn,
.profile-content-toggle-row[data-profile-content-row="groups"] .profile-content-toggle-btn{
  border-color:var(--profile-section-accent);
}

.profile-content-toggle-row[data-profile-content-row] .profile-content-toggle-btn:hover{
  border-color:var(--profile-section-accent);
  background:color-mix(in srgb, var(--profile-section-accent) 10%, rgba(255,255,255,.035));
}

.profile-see-all-card[data-profile-create],
.profile-see-all-card[data-profile-see-all]{
  border-color:var(--network-accent);
}

.profile-see-all-count{
  min-width:64px;
  height:20px;
  padding:0 18px;
  border:1px solid var(--network-accent);
  border-radius:999px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--network-accent) 10%, rgba(255,255,255,.035));
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 10px color-mix(in srgb, var(--network-accent) 15%, transparent);
}

.network-create-card.is-contact,
.network-create-card.is-group{
  border-color:var(--network-accent);
}

.profile-signature{
  width:100%;
  box-sizing:border-box;
  padding:0 14px 14px;
  flex:0 0 auto;
  text-align:center;
}

.profile-signature .profile-content-toggle-row{
  padding:0 0 14px;
}

.profile-signature-pill{
  min-width:146px;
  height:30px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:transparent;
  color:#fff;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.profile-signature-created{
  color:rgba(255,255,255,.64);
  font-size:12px;
  font-weight:700;
  margin-bottom:7px;
}

.profile-signature-themes{
  color:rgba(255,255,255,.84);
  font-size:12px;
  font-weight:800;
  margin-bottom:8px;
}

.profile-signature-quote{
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.profile-stories-strip{
  width:100%;
  min-height:0;
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  box-sizing:border-box;
  padding:0 14px 14px;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  scroll-padding-inline:14px;
  scroll-snap-type:x proximity;
  touch-action:pan-x pan-y;
  cursor:grab;
  user-select:none;
}

.profile-stories-strip.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

.profile-stories-strip::-webkit-scrollbar{
  display:none;
}
.profile-story-card{
  position:relative;
  width:98px;
  height:202px;
  flex:0 0 98px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background-color:rgba(255,255,255,.035);
  background-position:center;
  background-size:cover;
  color:#fff;
  overflow:hidden;
  box-sizing:border-box;
  scroll-snap-align:start;
}

.profile-story-card-profile{
  width:140px;
  height:202px;
  flex:0 0 140px;
}



.profile-see-all-card{
  flex:0 0 112px;
  width:112px;
}
.profile-content-mini-card{
  cursor:pointer;
  isolation:isolate;
  transition:border-color .18s ease, box-shadow .18s ease;
}

[data-profile-content] .profile-content-mini-card:hover,
[data-profile-content] .profile-content-mini-card:focus-visible,
.network-section-divider[data-contact-section] + .network-content-rail .profile-content-mini-card:hover,
.network-section-divider[data-contact-section] + .network-content-rail .profile-content-mini-card:focus-visible{
  border-color:var(--profile-card-accent);
  box-shadow:0 0 16px color-mix(in srgb, var(--profile-card-accent) 22%, transparent);
  outline:none;
}

.profile-content-mini-card::after{
  content:'';
  position:absolute;
  inset:38% 0 0;
  z-index:0;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.88));
  pointer-events:none;
}

.profile-mini-location{
  position:absolute;
  z-index:2;
  top:2px;
  left:7px;
  right:7px;
  min-height:22px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#fff;
  pointer-events:none;
  text-shadow:0 2px 7px rgba(0,0,0,.9);
  min-width:0;
}

.profile-mini-location-flag{
  width:18px;
  height:11px;
  border-radius:3px;
}

.profile-mini-location-iso,
.profile-mini-location-dot,
.profile-mini-location-city{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.profile-mini-location-city{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-story-create{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
}

.profile-story-create:hover{
  border-color:#2f8fff;
  background:rgba(47,143,255,.08);
}

.profile-story-create-plus{
  width:56px;
  height:56px;
  border:2px dashed #2f8fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-size:38px;
  font-weight:300;
  line-height:1;
  color:#fff;
  box-shadow:0 0 12px rgba(47,143,255,.18);
}

.profile-story-create-label{
  font-size:11px;
  font-weight:850;
  line-height:1.15;
  text-align:center;
}





.profile-stats-grid{
  width:100%;
  box-sizing:border-box;
  padding:0 14px 14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.profile-stat-btn{
  min-height:36px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:13px;
  font-weight:850;
  line-height:1;
  box-sizing:border-box;
  position:relative;
  transition:border-color .2s ease, background .2s ease;
}

.profile-stat-btn:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.04);
}

.profile-stat-btn.is-wide{
  grid-column:1 / -1;
}

.profile-stat-item{
  min-width:0;
  position:relative;
}

.profile-stat-item.is-wide{
  grid-column:1 / -1;
}

.profile-stat-item .profile-stat-btn{
  width:100%;
}

.profile-stat-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  padding:0 10px;
}

.profile-stat-value{
  font-weight:950;
  color:#fff;
}

.profile-stat-dot{
  color:rgba(255,255,255,.58);
  font-weight:900;
}

.profile-stat-label{
  color:rgba(255,255,255,.82);
  font-weight:800;
}

.profile-stat-detail-card{
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  color:rgba(255,255,255,.82);
}

.profile-stat-detail-count{
  min-width:116px;
  min-height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:14px;
  font-weight:900;
  color:#fff;
}

.profile-stat-detail-empty{
  max-width:340px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.68);
}

.profile-lifevision-card{
  width:calc(100% - 28px);
  margin:2px 14px 14px;
  min-height:300px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

.profile-publication-card:not(.profile-publication-fullscreen-card){
  --profile-large-card-accent:#54e636;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.profile-publication-card:not(.profile-publication-fullscreen-card):hover,
.profile-publication-card:not(.profile-publication-fullscreen-card):focus-within{
  border-color:var(--profile-large-card-accent);
  box-shadow:0 0 16px color-mix(in srgb, var(--profile-large-card-accent) 18%, transparent);
}

.profile-lifevision-overview-card{
  display:grid;
  grid-template-rows:minmax(58px, auto) minmax(190px, 1fr) 58px;
  min-height:306px;
}

.profile-lifevision-overview-card > .profile-lifevision-body{
  min-height:190px;
  height:auto;
}

.profile-lifevision-overview-card > .profile-lifevision-foot{
  height:58px;
  min-height:58px;
  align-self:stretch;
  align-items:center;
  justify-items:stretch;
}

.profile-lifevision-overview-card > .profile-lifevision-foot > div{
  height:100%;
  align-items:center;
}

.profile-lifevision-overview-card .profile-lifevision-pill{
  height:36px;
  min-height:36px;
  box-sizing:border-box;
}
.profile-lifevision-fullscreen-box{
  position:relative;
  width:min(var(--topbar-max), calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  background:#000;
}

.profile-lifevision-fullscreen-stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:#000;
}

.publication-feed-box{
  position:relative;
  width:min(var(--topbar-max), calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
}

.publication-feed-body{
  width:100%;
  min-height:0;
  padding:10px;
  gap:12px;
  scroll-behavior:smooth;
}

#publicationFeedBody,
#storyReelFeedBody,
[data-friend-feed-type] .publication-feed-body{
  flex:1 1 auto;
  height:100%;
  padding-top:calc(var(--feed-window-head-height, 62px) + 10px);
  padding-bottom:calc(var(--feed-window-footer-height, 72px) + 10px);
  padding-left:0;
  padding-right:0;
}

#storyReelFeedBody.is-story-step-feed,
#friendStoryFeedBody.is-story-step-feed,
#friendReelFeedBody.is-story-step-feed{
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
}

#storyReelFeedBody.is-story-step-feed > .content-feed-intro,
#friendStoryFeedBody.is-story-step-feed > .content-feed-intro,
#friendReelFeedBody.is-story-step-feed > .content-feed-intro,
#storyReelFeedBody.is-story-step-feed > .publication-fullscreen-feed-list > .story-viewer-inline-box,
#friendStoryFeedBody.is-story-step-feed > .publication-fullscreen-feed-list > .story-viewer-inline-box,
#friendReelFeedBody.is-story-step-feed > .publication-fullscreen-feed-list > .story-viewer-inline-box,
#storyReelFeedBody.is-story-step-feed > .publication-fullscreen-feed-list > .feed-video-ad-card,
#friendStoryFeedBody.is-story-step-feed > .publication-fullscreen-feed-list > .feed-video-ad-card,
#friendReelFeedBody.is-story-step-feed > .publication-fullscreen-feed-list > .feed-video-ad-card{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

#storyReelFeedBody.is-story-step-feed > .content-feed-intro,
#friendStoryFeedBody.is-story-step-feed > .content-feed-intro,
#friendReelFeedBody.is-story-step-feed > .content-feed-intro{
  scroll-margin-top:calc(var(--feed-window-head-height, 62px) + 10px);
}

#publicationFeedBody > .publication-fullscreen-feed-list,
#storyReelFeedBody > .publication-fullscreen-feed-list,
[data-friend-feed-type] .publication-feed-body > .publication-fullscreen-feed-list{
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
}

#publicationFeedBody > .publication-fullscreen-feed-list > .profile-publication-fullscreen-card,
[data-friend-feed-type="publication"] .publication-feed-body > .publication-fullscreen-feed-list > .profile-publication-fullscreen-card{
  height:calc(65vh - 15px);
  min-height:calc(65vh - 15px);
}

#storyReelFeedBody > .publication-fullscreen-feed-list > .story-viewer-inline-box,
[data-friend-feed-type="story"] .publication-feed-body > .publication-fullscreen-feed-list > .story-viewer-inline-box,
[data-friend-feed-type="reel"] .publication-feed-body > .publication-fullscreen-feed-list > .story-viewer-inline-box,
#storyReelFeedBody > .publication-fullscreen-feed-list > .feed-video-ad-card,
[data-friend-feed-type="story"] .publication-feed-body > .publication-fullscreen-feed-list > .feed-video-ad-card,
[data-friend-feed-type="reel"] .publication-feed-body > .publication-fullscreen-feed-list > .feed-video-ad-card{
  height:var(--story-reel-feed-card-height, calc(100vh - 20px));
  min-height:var(--story-reel-feed-card-height, calc(100vh - 20px));
}

#publicationFeedBody .profile-publication-fullscreen-card,
#storyReelFeedBody .story-viewer-inline-box,
[data-friend-feed-type="publication"] .profile-publication-fullscreen-card,
[data-friend-feed-type="story"] .story-viewer-inline-box,
[data-friend-feed-type="reel"] .story-viewer-inline-box{
  border-radius:0;
}

#publicationFeedPanel .panel-head,
#storyReelFeedPanel .panel-head,
#groupViewerPanel .panel-head,
[data-friend-feed-type] .panel-head{
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  right:0;
  transform:translateY(0);
  background:#000;
  will-change:transform;
  transition:transform .24s ease;
}

#publicationFeedPanel .publication-feed-footer,
#storyReelFeedPanel .publication-feed-footer,
#groupViewerPanel .publication-feed-footer,
[data-friend-feed-type] .publication-feed-footer{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  bottom:0;
  transform:translateY(0);
  background:#000;
  will-change:transform;
  transition:transform .24s ease;
}

#publicationFeedPanel.is-feed-header-hidden .panel-head,
#storyReelFeedPanel.is-feed-header-hidden .panel-head,
#groupViewerPanel.is-feed-header-hidden .panel-head,
[data-friend-feed-type].is-feed-header-hidden .panel-head{
  transform:translateY(-105%);
  pointer-events:none;
}

#publicationFeedPanel.is-feed-header-hidden .publication-feed-footer,
#storyReelFeedPanel.is-feed-header-hidden .publication-feed-footer,
#groupViewerPanel.is-feed-header-hidden .publication-feed-footer,
[data-friend-feed-type].is-feed-header-hidden .publication-feed-footer{
  transform:translateY(105%);
  pointer-events:none;
}

.publication-feed-list{
  width:100%;
  display:grid;
  gap:12px;
  box-sizing:border-box;
}

.content-feed-intro{
  --content-feed-accent:#54e636;
  --network-section-accent:84,230,54;
  width:100%;
  display:grid;
  gap:12px;
  padding:0 10px 2px;
  box-sizing:border-box;
  flex:0 0 auto;
}

.content-feed-intro.is-story{
  --content-feed-accent:#2f8fff;
  --network-section-accent:47,143,255;
}
.content-feed-intro.is-reel{
  --content-feed-accent:#AEB6C2;
  --network-section-accent:174,182,194;
}

.content-feed-discovery-controls{
  width:100%;
  display:grid;
  gap:10px;
  box-sizing:border-box;
}

.souvenir-gallery-discovery{
  --content-feed-accent:#fff;
  margin:0;
  padding:0;
  min-width:0;
}

.souvenir-gallery-discovery .content-feed-filter-row{
  padding-bottom:0;
}

.souvenir-gallery-discovery .souvenir-gallery-search-shell{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  box-shadow:none;
  backdrop-filter:none;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.souvenir-gallery-discovery .souvenir-gallery-search-shell:hover,
.souvenir-gallery-discovery .souvenir-gallery-search-shell:focus-within{
  border-color:rgba(255,255,255,.88);
  background-color:rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 18px rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
}

.souvenir-gallery-filter-row{
  min-width:0;
  max-width:100%;
  cursor:grab;
  touch-action:pan-x;
  scroll-behavior:smooth;
  user-select:none;
  -webkit-overflow-scrolling:touch;
}

.souvenir-gallery-filter-row.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}

.souvenir-gallery-filter-row .content-feed-filter-chip{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  box-shadow:none;
}

.souvenir-gallery-filter-row .content-feed-filter-chip:not(.is-active):hover,
.souvenir-gallery-filter-row .content-feed-filter-chip:not(.is-active):focus-visible{
  border-color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.045);
  box-shadow:none;
}

.souvenir-gallery-filter-row .content-feed-filter-chip.is-active{
  border-color:rgba(255,255,255,.9);
  background:linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 16px rgba(255,255,255,.16);
}

.confidentiality-target-discovery .souvenir-gallery-filter-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  overflow:visible;
}

.confidentiality-target-discovery .content-feed-filter-chip{
  width:100%;
}

.content-feed-search-shell{
  min-height:40px;
  border-color:rgba(255,255,255,.14);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.content-feed-search-shell:hover,
.content-feed-search-shell:focus-within{
  border-color:var(--content-feed-accent);
  background:color-mix(in srgb, var(--content-feed-accent) 9%, rgba(255,255,255,.045));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--content-feed-accent) 14%, transparent);
}

.content-feed-filter-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  padding:0 0 2px;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  box-sizing:border-box;
}

.content-feed-filter-row::-webkit-scrollbar{
  display:none;
}

.content-feed-filter-chip{
  flex:0 0 auto;
  min-height:34px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.76);
  font:inherit;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.content-feed-filter-chip:hover,
.content-feed-filter-chip:focus-visible{
  border-color:var(--content-feed-accent);
  color:#fff;
  outline:0;
}

.content-feed-filter-chip.is-active{
  border-color:var(--content-feed-accent);
  background:color-mix(in srgb, var(--content-feed-accent) 22%, rgba(255,255,255,.05));
  color:#fff;
  box-shadow:0 0 14px color-mix(in srgb, var(--content-feed-accent) 24%, transparent);
}

.content-feed-create-card{
  width:100%;
  height:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  padding:17px 14px 8px;
  border:1px solid var(--content-feed-accent);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:#fff;
  box-shadow:0 0 14px color-mix(in srgb, var(--content-feed-accent) 10%, transparent);
  cursor:pointer;
  box-sizing:border-box;
  transition:background .2s ease,box-shadow .2s ease;
}

.content-feed-shortcuts{
  width:100%;
  display:grid;
  grid-template-columns:minmax(92px,3fr) minmax(0,7fr);
  gap:10px;
  box-sizing:border-box;
}

.content-feed-saved-card{
  width:100%;
  height:86px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  padding:17px 6px 8px;
  border:1px solid var(--content-feed-accent);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:#fff;
  box-shadow:0 0 14px color-mix(in srgb, var(--content-feed-accent) 10%, transparent);
  cursor:pointer;
  box-sizing:border-box;
  transition:background .2s ease,box-shadow .2s ease;
}

.content-feed-saved-card:hover,
.content-feed-saved-card:focus-visible,
.content-feed-saved-card.is-active{
  background:color-mix(in srgb, var(--content-feed-accent) 12%, rgba(255,255,255,.035));
  box-shadow:0 0 17px color-mix(in srgb, var(--content-feed-accent) 24%, transparent);
  outline:0;
}

.content-feed-saved-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.content-feed-shortcuts .content-feed-create-label{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.content-feed-create-card:hover,
.content-feed-create-card:focus-visible{
  background:color-mix(in srgb, var(--content-feed-accent) 10%, rgba(255,255,255,.035));
  box-shadow:0 0 16px color-mix(in srgb, var(--content-feed-accent) 18%, transparent);
}

.content-feed-create-plus{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:2px dashed var(--content-feed-accent);
  border-radius:50%;
  color:#fff;
  font-size:26px;
  font-weight:400;
  line-height:1;
  box-shadow:0 0 14px color-mix(in srgb, var(--content-feed-accent) 44%, transparent);
  box-sizing:border-box;
}

.saved-reels-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:0 10px 10px;
  box-sizing:border-box;
}

.saved-reel-grid-card.profile-content-mini-card{
  width:100%;
  min-width:0;
  height:232px;
  min-height:232px;
  flex:none;
  border-color:rgba(174,182,194,.55);
  border-radius:14px;
  background-size:cover;
  background-position:center;
  box-shadow:0 0 14px rgba(174,182,194,.1);
}

.saved-reel-grid-card.profile-content-mini-card:hover,
.saved-reel-grid-card.profile-content-mini-card:focus-visible{
  border-color:#AEB6C2;
  box-shadow:0 0 18px rgba(174,182,194,.24);
  outline:0;
}

.content-feed-create-label{
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.content-feed-divider{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  width:100%;
}

.content-feed-divider .network-section-line{
  height:.5px;
}

.content-feed-divider-title{
  min-width:150px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:1px solid var(--content-feed-accent);
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  box-sizing:border-box;
  transition:background .2s ease,box-shadow .2s ease;
}

.content-feed-divider-title:hover{
  background:color-mix(in srgb, var(--content-feed-accent) 10%, rgba(255,255,255,.035));
  box-shadow:0 0 16px color-mix(in srgb, var(--content-feed-accent) 18%, transparent);
}

.publication-feed-list .profile-publication-card{
  width:100%;
  min-height:0;
  margin:0;
  border-radius:12px;
}

.publication-feed-list .profile-publication-carousel,
.publication-feed-list .image-carousel.profile-publication-carousel{
  height:clamp(280px, 54vh, 500px);
  min-height:280px;
  flex-basis:auto;
}

.publication-feed-list .profile-publication-media{
  object-fit:contain;
}


#publicationFullscreenPanel.is-open{
  z-index:10080;
}
.publication-fullscreen-box{
  position:relative;
  width:min(var(--topbar-max), calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
  background:#000;
}

.publication-fullscreen-stage{
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  overflow:auto;
  box-sizing:border-box;
}

.publication-fullscreen-stage .profile-publication-card{
  width:100%;
  min-height:100%;
  margin:0;
  border-radius:0;
}

.publication-fullscreen-stage .profile-publication-carousel,
.publication-fullscreen-stage .image-carousel.profile-publication-carousel{
  height:calc(100vh - 154px);
  min-height:280px;
  flex:1 1 auto;
}

.publication-fullscreen-stage .profile-publication-media{
  object-fit:contain;
}

.publication-fullscreen-stage
  .profile-publication-fullscreen-card
  video.profile-publication-media{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.story-viewer-box{
  position:relative;
  width:min(var(--topbar-max), calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:#000;
  box-shadow:0 18px 55px rgba(0,0,0,.42);
}

.story-viewer-stage{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  color:#fff;
}

.story-viewer-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  user-select:none;
  -webkit-user-drag:none;
}

.story-viewer-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 25%,transparent 68%,rgba(0,0,0,.58));
}

.story-progress{
  position:absolute;
  z-index:5;
  top:58px;
  bottom:auto;
  left:10px;
  right:10px;
  display:flex;
  gap:5px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.story-progress-segment{
  height:3px;
  flex:1;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.34);
}

.story-progress-fill{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#fff;
}

.story-progress-segment.is-complete .story-progress-fill{
  width:100%;
}

.story-viewer-head{
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  right:0;
  min-height:58px;
  padding:8px 15px 8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-sizing:border-box;
  background:rgba(10,12,16,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:background .25s ease,backdrop-filter .25s ease;
}

.story-viewer-user{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
}

.story-viewer-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.68);
  background:rgba(255,255,255,.08);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.72);
  font-size:18px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  overflow:hidden;
}

.story-viewer-identity{
  min-width:0;
  flex:1;
  width:100%;
}

.story-viewer-name-row{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.story-viewer-name{
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.story-viewer-location{
  min-height:14px;
  margin-top:2px;
  display:flex;
  align-items:flex-start;
  gap:5px;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
}









.story-viewer-location img{
  width:18px;
  height:11px;
  border-radius:2px;
  object-fit:cover;
}

.story-viewer-location > span:first-child{
  display:inline-flex;
  align-items:flex-start;
  gap:5px;
}

.story-viewer-location > span:first-child > span{
  position:relative;
  top:0;
}

.story-viewer-meta{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,.82);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.story-viewer-meta-icon{
  position:relative;
  top:-2px;
  font-size:14px;
  line-height:1;
}

.story-follow-btn{
  display:none;
  min-height:28px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:11px;
  font-weight:900;
}

.story-follow-btn.is-active{
  border-color:rgba(47,143,255,.72);
  background:rgba(47,143,255,.18);
}

.story-viewer-foot{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  min-height:58px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  justify-items:center;
  gap:10px;
  box-sizing:border-box;
  background:rgba(10,12,16,.72);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.14);
  transition:background .25s ease,backdrop-filter .25s ease;
}

.story-viewer-actions{
  grid-column:1;
  display:flex;
  align-items:center;
  gap:8px;
  justify-self:start;
}

.story-viewer-actions.is-right{
  grid-column:3;
  gap:8px;
  justify-content:flex-end;
  justify-self:end;
}











.story-viewer-box.is-immersive .story-viewer-head,
.story-viewer-box.is-immersive .story-viewer-foot{
  background:transparent;
  backdrop-filter:none;
  border-color:transparent;
}

.story-viewer-box.is-immersive .story-progress{
  top:auto;
  bottom:60px;
  opacity:1;
}

.story-viewer-stage.is-video .story-progress{
  display:none;
}

.story-viewer-box.is-immersive .story-viewer-location,
.story-viewer-box.is-immersive .story-viewer-meta,
.story-viewer-box.is-immersive .story-viewer-actions{
  display:none;
}

.story-viewer-box.is-immersive .story-follow-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}




/* Story/reel immersive viewer layout */
.story-viewer-box.is-immersive .story-viewer-head{
  min-height:auto;
  padding:12px 12px 0 12px;
  align-items:flex-start;
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.18), transparent);
  border:0;
  border-bottom:0;
  box-shadow:none;
}

.story-viewer-box.is-immersive .story-viewer-user{
  max-width:calc(100% - 118px);
  align-items:flex-start;
}

.story-viewer-box.is-immersive .story-viewer-avatar{
  width:46px;
  height:46px;
  flex:0 0 46px;
}

.story-viewer-box.is-immersive .story-viewer-name-row{
  justify-content:flex-start;
}

.story-viewer-box.is-immersive.has-card-action-menu .story-viewer-user{
  max-width:100%;
}

.story-viewer-box.is-immersive.has-card-action-menu .story-viewer-name-row{
  justify-content:flex-start;
}

.story-viewer-box.is-immersive.has-card-action-menu .story-viewer-identity > .story-viewer-location{
  flex:0 0 auto;
  margin-top:3px;
}

.story-viewer-box.is-immersive.has-card-action-menu .story-viewer-head > .story-viewer-meta{
  flex:0 0 auto;
  margin-left:auto;
  margin-top:0;
  align-self:flex-start;
}

.story-viewer-box.is-immersive .story-viewer-name{
  font-size:12px;
}

.story-viewer-box.is-immersive .story-viewer-location{
  position:relative;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:visible;
}

.story-viewer-box.is-immersive .story-viewer-meta{
  display:flex;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,.62);
  font-size:10px;
  font-weight:800;
}

.story-viewer-box.is-immersive .story-viewer-meta-icon{
  position:relative;
  top:0;
  font-size:13px;
  line-height:1;
}
.story-viewer-top-action{
  flex:0 0 auto;
  min-height:36px;
}

.story-viewer-box.is-immersive .story-viewer-foot{
  min-height:auto;
  padding:0 12px 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18), transparent);
  border:0;
  border-top:0;
  box-shadow:none;
}

.story-viewer-box.is-immersive .story-viewer-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.story-viewer-return-inline{
  min-width:46px;
  padding:0 12px;
}

.profile-lifevision-pill.publication-return-action{
  min-width:46px;
  padding:0 12px;
}

.profile-lifevision-pill.story-viewer-return-inline,
.profile-lifevision-pill.publication-return-action{
  font-size:inherit;
  font-weight:inherit;
  line-height:1;
}




.content-location-fallback-globe{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:13px;
  line-height:1.3;
  margin-right:-2px;
}

.content-location-fallback-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  line-height:1;
}

/* Publication immersive fullscreen layout */
.publication-fullscreen-stage{
  overflow:hidden;
}

#publicationFullscreenStage.is-story-reel-content > .story-viewer-inline-box{
  width:100%;
  max-width:none;
  min-width:0;
  height:100%;
  min-height:0;
  max-height:none;
}

@media (max-width:640px){
#publicationFullscreenPanel.is-story-reel-fullscreen > .publication-fullscreen-box{
  width:100vw;
  max-width:none;
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  border:0;
  border-radius:0;
}
}

#publicationFullscreenPanel.is-story-reel-fullscreen
  #publicationFullscreenStage
  > .story-viewer-inline-box{
  border:0;
  border-radius:0;
  box-shadow:none;
}

#publicationFullscreenPanel.is-story-reel-fullscreen .story-viewer-media{
  object-fit:cover;
}

.publication-fullscreen-feed-list .story-viewer-inline-box .story-viewer-media{
  object-fit:cover;
}

.publication-fullscreen-feed-list
  .profile-publication-fullscreen-card
  .profile-publication-media{
  object-fit:cover;
}

.publication-fullscreen-feed-list .story-viewer-inline-box{
  border:0;
  box-shadow:none;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card{
  position:relative;
  height:100%;
  min-height:100%;
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:#000;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-head{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  right:0;
  min-height:auto;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:flex-start;
  padding:12px 12px 0 12px;
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.18), transparent);
  border:0;
  border-bottom:0;
  box-shadow:none;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-user{
  max-width:calc(100% - 118px);
  align-items:flex-start;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-avatar{
  width:46px;
  height:46px;
  flex:0 0 46px;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-publication-name-row{
  justify-content:flex-start;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card.has-card-action-menu .profile-lifevision-user{
  max-width:100%;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card.has-card-action-menu .profile-publication-name-row{
  justify-content:flex-start;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card.has-card-action-menu .profile-lifevision-head > .profile-publication-meta{
  justify-self:end;
  margin-top:0;
  align-self:flex-start;
  font-size:10px;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-publication-location{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  max-width:230px;
  min-height:22px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.9);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-publication-fullscreen-subline{
  margin-top:-1px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:100%;
  overflow:visible;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-publication-fullscreen-subline > .profile-publication-meta{
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  color:rgba(255,255,255,.62);
  font-size:10px;
  font-weight:800;
}

.publication-fullscreen-top-action{
  flex:0 0 auto;
  min-height:36px;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-body,
.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-publication-carousel,
.publication-fullscreen-stage .profile-publication-fullscreen-card .image-carousel.profile-publication-carousel{
  height:100%;
  min-height:100%;
}




.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-publication-caption{
  display:none;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:0;
  min-height:auto;
  padding:0 12px 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18), transparent);
  border:0;
  border-top:0;
  box-shadow:none;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot-center{
  display:none;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot-left,
.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot.has-card-action-menu,
.story-viewer-box.is-immersive .story-viewer-foot.has-card-action-menu{
  pointer-events:none;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot.has-card-action-menu{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  justify-content:initial;
}

.story-viewer-box.is-immersive .story-viewer-foot.has-card-action-menu{
  justify-content:space-between;
}

.profile-lifevision-foot.has-card-action-menu > .publication-return-action,
.story-viewer-foot.has-card-action-menu > .publication-return-action{
  pointer-events:auto;
}

.has-card-action-menu > .content-card-description-toggle{
  width:46px;
  min-width:46px;
  height:36px;
  padding:0;
  pointer-events:auto;
  font-size:18px;
  line-height:1;
}

.content-card-description-toggle.is-active{
  border-color:rgba(255,255,255,.16);
  color:inherit;
}

.content-card-description-overlay{
  position:absolute;
  z-index:18;
  left:12px;
  right:12px;
  bottom:72px;
  display:none;
  max-height:min(38vh, 260px);
  padding:12px 14px;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(10,12,16,.42);
  color:#fff;
  text-shadow:none;
  box-shadow:0 0 5px rgba(255,255,255,.08);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:auto;
}

.content-card-description-overlay::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}

.content-card-description-overlay.is-open{
  display:block;
}

.content-card-description-location{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
}

.content-card-description-information{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.content-card-description-country,
.content-card-description-place-date{
  width:100%;
  flex-wrap:nowrap;
}

.content-card-description-place-date{
  gap:7px;
}

.content-card-description-pin{
  flex:0 0 auto;
  line-height:1;
}

.content-card-description-date{
  margin-left:5px;
}

.profile-lifevision-name.social-author-stacked-name,
.story-viewer-name.social-author-stacked-name{
  position:relative;
  top:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  white-space:normal;
  line-height:1.05;
}

.social-author-stacked-name > span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.content-card-description-location .mlv-flag-frame{
  width:18px;
  height:11px;
  flex:0 0 18px;
  border-radius:2px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

.content-card-description-separator{
  height:1px;
  margin:10px 0;
  background:rgba(255,255,255,.10);
}

.content-card-description-text{
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.profile-publication-fullscreen-card:has(.publication-video-controls) > .content-card-description-overlay,
.story-viewer-stage.is-video > .content-card-description-overlay{
  bottom:112px;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot.has-card-action-menu > .content-card-description-toggle{
  justify-self:start;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot.has-card-action-menu > .publication-fullscreen-action{
  width:46px;
  min-width:46px;
  height:36px;
  padding:0;
  justify-self:center;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .profile-lifevision-foot.has-card-action-menu > .content-card-actions{
  justify-self:end;
}

.content-card-actions{
  position:relative;
  z-index:12;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  pointer-events:auto;
}

.content-card-actions-drawer{
  position:absolute;
  right:0;
  bottom:calc(100% + 30px);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.content-card-context-actions{
  position:absolute;
  z-index:17;
  top:42px;
  right:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.profile-publication-fullscreen-card:has(.content-card-actions.is-open)
  > .content-card-context-actions,
.story-viewer-stage:has(.content-card-actions.is-open)
  > .content-card-context-actions{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}

.content-card-actions.is-open .content-card-actions-drawer{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}

.content-card-actions .profile-lifevision-pill{
  flex:0 0 auto;
  min-height:36px;
}

.content-card-actions-drawer .content-card-action-item,
.content-card-context-actions .content-card-action-item{
  width:100px;
  min-width:100px;
  justify-content:flex-start;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(10,12,16,.42);
  box-shadow:0 0 5px rgba(255,255,255,.08);
}

.profile-lifevision-pill.content-card-save-action svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-left:-3px;
  margin-right:-3px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.content-card-save-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.content-card-save-separator{
  font-size:12px;
  line-height:1;
}

.content-card-save-mark{
  font-size:15px;
  font-weight:400;
  line-height:1;
}

.content-card-save-action.is-saved{
  border-color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.18);
  box-shadow:0 0 12px rgba(255,255,255,.18);
}

.content-card-context-actions .content-card-action-item.is-context-action{
  justify-content:center;
  text-align:center;
}

.content-card-actions-drawer .content-card-action-item.is-primary{
  border-color:rgba(47,143,255,.86);
  background:linear-gradient(135deg,#2f8fff,#54adff);
  color:#fff;
}

.content-card-actions-drawer .content-card-action-item.is-following{
  border-color:#fff;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035));
  color:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.18);
}

/* Identités ouvrant un profil : retour visuel explicite au survol. */
.network-publication-avatar[data-network-profile-open],
.network-publication-name[data-network-profile-open],
.profile-lifevision-user[data-profile-user-id],
.story-viewer-user[data-profile-user-id]{
  cursor:pointer;
}

/* Les cartes des trois fils amis restent bord à bord, sans coins arrondis. */
[data-friend-feed-type] .publication-fullscreen-feed-list > .profile-publication-fullscreen-card,
[data-friend-feed-type] .publication-fullscreen-feed-list > .story-viewer-inline-box{
  border-radius:0 !important;
}

.content-card-actions-drawer .content-card-action-item.is-danger,
.content-card-context-actions .content-card-action-item.is-danger{
  border-color:rgba(255,70,70,.9);
  background:rgba(255,45,65,.34);
  color:#fff;
  box-shadow:0 0 10px rgba(255,70,70,.24);
}

.content-card-actions-drawer .content-card-action-item.is-edit,
.content-card-context-actions .content-card-action-item.is-edit{
  border-color:#fff;
  background:rgba(255,255,255,.24);
  color:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.22);
}

.content-card-actions .content-card-actions-toggle{
  width:46px;
  min-width:46px;
  height:36px;
  padding:0;
  font-size:20px;
  line-height:1;
}

.has-card-action-menu > .content-card-description-toggle,
.has-card-action-menu > .publication-fullscreen-action,
.has-card-action-menu > .content-card-actions > .content-card-actions-toggle{
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(10,12,16,.42);
  box-shadow:0 0 5px rgba(255,255,255,.08);
}


.publication-video-ui{
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
}

.publication-video-controls{
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}

.publication-video-ui.is-chrome-visible .publication-video-controls,
.publication-video-ui.is-paused .publication-video-controls{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}

.profile-publication-fullscreen-card > .profile-lifevision-head,
.story-viewer-stage > .story-viewer-head{
  transition:opacity .2s ease, visibility 0s linear 0s;
}

.profile-publication-fullscreen-card:has(.publication-video-ui:not(.is-chrome-visible):not(.is-paused)) > .profile-lifevision-head,
.story-viewer-stage:has(> .publication-video-ui:not(.is-chrome-visible):not(.is-paused)) > .story-viewer-head{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition-delay:0s, .2s;
}

.publication-video-paused-controls{
  position:absolute;
  z-index:5;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility 0s linear .18s;
}

.publication-video-ui.is-paused .publication-video-paused-controls{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}

html.has-content-comments-open .publication-video-paused-controls{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.publication-video-center-play.album-detail-play{
  position:relative;
  top:auto;
  left:auto;
  flex:0 0 72px;
  transform:none;
  pointer-events:auto;
}

.publication-video-seek-button{
  width:46px;
  height:46px;
  flex:0 0 46px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:rgba(0,0,0,.42);
  color:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.38);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  pointer-events:auto;
}

.publication-video-seek-button:hover,
.publication-video-seek-button:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.16);
  outline:none;
}

.publication-video-seek-icon{
  width:34px;
  height:34px;
  overflow:visible;
}

.publication-video-seek-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.publication-video-seek-icon text{
  fill:currentColor;
  font-family:inherit;
  font-size:11px;
  font-weight:900;
  text-anchor:middle;
}

.publication-fullscreen-stage .profile-publication-fullscreen-card .publication-video-controls,
.story-viewer-stage .publication-video-controls,
.photo-viewer-image-wrap .publication-video-controls{
  position:absolute;
  z-index:6;
  left:12px;
  right:12px;
  bottom:60px;
  display:grid;
  grid-template-columns:26px auto 34px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:5px;
  align-items:center;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
  pointer-events:auto;
}

.photo-viewer-image-wrap .publication-video-controls{
  left:50%;
  right:auto;
  width:min(calc(100% - 20px), 760px);
  bottom:6px;
  transform:translateX(-50%);
  box-sizing:border-box;
}

.publication-video-control-btn{
  grid-column:1;
  grid-row:1;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:17px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

.publication-video-time{
  grid-column:2;
  grid-row:1;
  justify-self:start;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}

.publication-video-volume-btn{
  grid-column:3;
  grid-row:1;
  justify-self:start;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:1;
}

.publication-video-volume-btn.is-muted{
  opacity:.62;
}

.publication-video-volume-btn svg{
  width:25px;
  height:25px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.publication-video-range{
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  min-width:0;
  height:4px;
  accent-color:#fff;
}
/* ==========================================================
COMMENTAIRES CONTENUS
---------------------------------------------------------- */

.comments-box{
  position:relative;
  width:min(var(--topbar-max), calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
  border-radius:18px;
  transform:translateY(calc(100% + 20px));
}

#commentsPanel{
  align-items:flex-end;
  padding:10px;
  box-sizing:border-box;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

#commentsPanel.is-open .comments-box{
  transform:translateY(0);
}

#commentsPanel[data-comment-type="publication"] .comments-box,
#commentsPanel[data-comment-type="story"] .comments-box,
#commentsPanel[data-comment-type="reel"] .comments-box{
  background:var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:0 10px 34px var(--glass-shadow) !important;
  border-radius:24px !important;
  overflow:hidden;
  clip-path:inset(0 round 24px);
  isolation:isolate;
  backdrop-filter:blur(var(--blur-md)) !important;
  -webkit-backdrop-filter:blur(var(--blur-md)) !important;
}

#commentsPanel.is-publication-anchored{
  align-items:flex-start;
  justify-content:flex-start;
  padding:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  clip-path:polygon(
    var(--comments-anchor-left) var(--comments-anchor-top),
    calc(var(--comments-anchor-left) + var(--comments-anchor-width)) var(--comments-anchor-top),
    calc(var(--comments-anchor-left) + var(--comments-anchor-width))
      calc(var(--comments-anchor-top) + var(--comments-anchor-height)),
    var(--comments-anchor-left)
      calc(var(--comments-anchor-top) + var(--comments-anchor-height))
  );
}

#commentsPanel.is-publication-anchored .comments-box{
  position:fixed;
  left:calc(var(--comments-anchor-left) + 10px);
  top:calc(var(--comments-anchor-top) + 10px);
  width:calc(var(--comments-anchor-width) - 20px);
  height:calc(var(--comments-anchor-height) - 20px);
  max-height:calc(var(--comments-anchor-height) - 20px);
  border-radius:14px;
  overflow:hidden;
  transform:translateY(var(--comments-anchor-height));
}

#commentsPanel.is-publication-anchored.is-open .comments-box{
  transform:translateY(0);
}

.comments-panel-body{
  height:100%;
  min-height:0;
  overflow-y:auto;
  padding:0 10px calc(var(--feed-window-footer-height, 67px) + var(--comments-composer-height, 57px) + 10px);
  scroll-padding-top:calc(var(--feed-window-head-height, 88px) + 10px);
  gap:10px;
  box-sizing:border-box;
}

#commentsPanel .comments-box > .panel-head{
  position:absolute;
  z-index:22;
  top:0;
  left:0;
  right:0;
  transform:translateY(0);
  will-change:transform;
  transition:transform .24s ease;
  background:#000;
}
#commentsPanel .comments-panel-body::before{
  content:"";
  display:block;
  width:100%;
  height:calc(var(--feed-window-head-height, 88px) - 10px);
  min-height:calc(var(--feed-window-head-height, 88px) - 10px);
  flex:0 0 calc(var(--feed-window-head-height, 88px) - 10px);
}
#commentsPanel .comments-panel-footer{
  position:absolute;
  z-index:22;
  left:0;
  right:0;
  bottom:0;
  transform:translateY(0);
  will-change:transform;
  transition:transform .24s ease;
  background:#000;
}
#commentsPanel .comments-composer{
  position:absolute;
  z-index:23;
  left:0;
  right:0;
  bottom:var(--feed-window-footer-height, 67px);
  transform:translateY(0);
  will-change:transform;
  transition:transform .24s ease;
  background:#000;
}
#commentsPanel .comments-list{
  flex:0 0 auto;
  padding-bottom:56px;
}
#commentsPanel .comments-list.is-empty{
  min-height:calc(84px + var(--comments-composer-height, 57px));
  box-sizing:border-box;
}
#commentsPanel .comments-empty-scroll-tail{
  width:100%;
  height:76px;
  min-height:76px;
  flex:0 0 76px;
  pointer-events:none;
}
#commentsPanel.is-feed-header-hidden .comments-box > .panel-head{
  transform:translateY(-105%);
  pointer-events:none;
}
#commentsPanel.is-feed-header-hidden .comments-panel-footer{
  transform:translateY(105%);
  pointer-events:none;
}
#commentsPanel.is-feed-header-hidden .comments-composer{
  transform:translateY(var(--feed-window-footer-height, 67px));
}

.comments-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 2px;
  flex:0 0 auto;
}

.comments-list-title{
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.comments-order-btn{
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.comments-list{
  display:grid;
  gap:8px;
  padding-bottom:4px;
}

.comment-card{
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  gap:9px;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
}

.comment-card.has-actions{
  grid-template-columns:50px minmax(0,1fr) 30px;
}

.comment-avatar{
  width:50px;
  height:50px;
  box-sizing:border-box;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:rgba(255,255,255,.75);
  font-size:18px;
  overflow:hidden;
}

.comment-avatar.has-photo{
  border-radius:12px;
  border:2px solid rgba(0,0,0,.68);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22);
}

.comment-avatar.is-profile-link,
.comment-author.is-profile-link{
  cursor:pointer;
}

.comment-avatar.is-profile-link:hover,
.comment-author.is-profile-link:hover{
  opacity:.86;
}

.comment-body{
  min-width:0;
  display:block;
}

.comment-meta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}

.comment-author{
  color:#fff;
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.comment-time{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.55);
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
}

.comment-text{
  margin-top:2px;
  color:rgba(255,255,255,.86);
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.comments-empty{
  min-height:84px;
  display:grid;
  align-items:center;
  justify-items:stretch;
  color:rgba(255,255,255,.62);
  font-size:13px;
  font-weight:750;
  text-align:center;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.14);
}

.comment-card-actions{
  position:relative;
  justify-self:end;
  align-self:end;
  margin-top:0;
}

.comment-card > .comment-card-actions .comment-card-actions-menu{
  right:0;
  top:calc(100% + 8px);
  bottom:auto;
}

.comment-card:has(> .comment-card-actions.is-open){
  padding-bottom:48px;
}

.comment-card-actions-toggle{
  width:30px;
  height:30px;
  min-width:30px;
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:10px;
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:30px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-sizing:border-box;
}

.comment-card-actions-toggle:hover,
.comment-card-actions.is-open .comment-card-actions-toggle{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.24);
}

.comment-card-actions-menu{
  position:absolute;
  right:calc(100% + 7px);
  bottom:0;
  z-index:8;
  width:220px;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.comment-card-actions.is-open .comment-card-actions-menu{
  display:grid;
}

.comment-card-actions-menu .profile-stat-card-action-btn{
  width:100%;
  height:30px;
  min-height:30px;
  padding:0 10px;
  border-radius:10px;
  font-size:12px;
  line-height:1;
  box-sizing:border-box;
}

.comment-card-actions-menu .profile-stat-card-action-btn:not(.is-danger){
  border-color:#fff;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035));
  color:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.18);
}

.comment-card-actions-menu .profile-stat-card-action-btn.is-danger{
  border-color:rgba(255,70,70,.9);
  background:rgba(255,70,70,.10);
  color:#fff;
  box-shadow:0 0 14px rgba(255,70,70,.18);
}

.notification-main.has-collapsed-actions{
  grid-template-columns:50px minmax(0,1fr) 30px;
}

.notification-main.has-collapsed-actions .notification-side{
  align-self:stretch;
  min-height:50px;
  height:auto;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding-top:4px;
  box-sizing:border-box;
}

.notification-main.has-collapsed-actions .notification-unread-dot{
  align-self:flex-end;
  margin-right:1px;
}

.notification-card-actions{
  align-self:flex-end;
  margin-top:0;
}

.notification-actions-drawer{
  display:none;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  width:100%;
  box-sizing:border-box;
}

.notification-row.has-open-actions .notification-actions-drawer{
  display:grid;
}

.notification-actions-drawer .profile-stat-card-action-btn{
  width:100%;
  min-height:34px;
  box-sizing:border-box;
}

.comments-panel-footer{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-top:1px solid rgba(255,255,255,.08);
}





.comments-input-shell{
  min-width:0;
  min-height:38px;
  display:grid;
  grid-template-columns:1fr 30px;
  align-items:center;
  gap:6px;
  padding:4px 5px 4px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  box-sizing:border-box;
}

.comments-panel-footer > .comments-input-shell{
  width:100%;
  justify-self:stretch;
}

.comments-panel-footer .ui-icon-btn{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
}

.comments-input{
  width:100%;
  min-height:28px;
  max-height:82px;
  resize:none;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:13px;
  font-weight:750;
  line-height:1.35;
  padding:5px 0;
  overflow:auto;
}

.comments-input::placeholder{
  color:rgba(255,255,255,.48);
}

.comments-send-btn{
  width:30px;
  height:30px;
  border-radius:12px;
  display:grid;
  align-items:center;
  justify-items:stretch;
  color:#fff;
  background:rgba(47,143,255,.92);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  line-height:1;
  opacity:.45;
}

.comments-send-btn.is-ready{
  opacity:1;
  box-shadow:0 0 18px rgba(47,143,255,.28);
}

.panel-footer.publication-feed-footer{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 5px;
}

.profile-lifevision-fullscreen-stage .profile-lifevision-card{
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  border-radius:12px;
  overflow:visible;
}

.profile-lifevision-fullscreen-stage .profile-lifevision-body{
  min-height:0;
}

.profile-lifevision-fullscreen-stage .profile-lifevision-globe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:auto;
  touch-action:none;
  cursor:grab;
}

.profile-lifevision-fullscreen-stage .profile-lifevision-globe:active{
  cursor:grabbing;
}

.profile-lifevision-passive-pill{
  pointer-events:none;
  user-select:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease;
}

.profile-lifevision-passive-pill.is-front-visible{
  opacity:1;
  visibility:visible;
}

.profile-lifevision-passive-pill .pill-shell{
  transform:translate(-50%, -50%);
  pointer-events:none;
  min-height:22px;
  padding:1px 9px;
  background:rgba(8,12,20,.54);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.profile-lifevision-passive-pill .pill-label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
}

.profile-lifevision-passive-pill .pill-country-iso,
.profile-lifevision-passive-pill .pill-country-name{
  font-size:10px;
  line-height:1;
}

.profile-lifevision-passive-pill .pill-flag-img{
  width:14px;
  height:9px;
  margin-right:6px;
}



.profile-lifevision-passive-pill .pill-arrow{
  display:none;
}

.profile-lifevision-fullscreen-stage .profile-lifevision-globe canvas{
  transform:translateY(5px);
}

.profile-lifevision-head{
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(145px, 1fr) auto minmax(70px, 1fr);
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-sizing:border-box;
}

.profile-lifevision-head.profile-lifevision-main-head{
  grid-template-columns:minmax(0, 1fr) auto;
}

.profile-lifevision-user{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}

.profile-lifevision-identity{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
}

.profile-lifevision-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.68);
  background:rgba(255,255,255,.08);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.72);
  font-size:18px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  overflow:hidden;
}

.profile-lifevision-name{
  min-width:0;
  color:#fff;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-lifevision-signature{
  max-width:100%;
  color:rgba(255,255,255,.62);
  font-size:9px;
  font-weight:850;
  letter-spacing:.35px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-lifevision-level-pill{
  min-width:64px;
  height:34px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:transparent;
  box-shadow:none;
  transition:border-color .2s ease, background .2s ease;
}

.profile-lifevision-level-pill:hover{
  filter:none;
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.045);
}

.profile-lifevision-title{
  color:#fff;
  font-size:13px;
  font-weight:950;
  letter-spacing:.4px;
  text-align:center;
  white-space:nowrap;
}

.profile-lifevision-actions{
  position:relative;
  display:flex;
  justify-content:flex-start;
}

.profile-lifevision-actions .profile-lifevision-level-pill{
  min-width:34px;
  width:34px;
  padding:0;
}

.profile-lifevision-level-pill:disabled{
  opacity:1;
  cursor:default;
}

.profile-lifevision-body{
  position:relative;
  min-height:190px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
  radial-gradient(circle at 25% 25%, rgba(47,143,255,.14), transparent 34%),
  radial-gradient(circle at 70% 70%, rgba(255,255,255,.08), transparent 30%),
  rgba(0,0,0,.22);
}

.profile-lifevision-globe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:#000;
}

.profile-lifevision-globe canvas{
  display:block;
  transform:translateY(5px);
}

.profile-lifevision-summary-pill{
  position:absolute;
  top:8px;
  left:8px;
  right:8px;
  transform:none;
  z-index:2;
  max-width:none;
  min-height:20px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px;
  font-weight:850;
  box-shadow:none;
  pointer-events:none;
}

.profile-lifevision-progress-wrap{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  z-index:2;
  pointer-events:none;
}

.profile-lifevision-progress-bar{
  position:relative;
  width:100%;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:rgba(255,255,255,.06);
}

.profile-lifevision-progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
  box-shadow:
  0 0 10px rgba(47,143,255,.7),
  0 0 22px rgba(47,143,255,.35);
  transition:width .6s ease;
  animation:progressGlow 2.5s ease-in-out infinite;
}

.profile-lifevision-progress-fill::after{
  content:'';
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  animation:progressShine 3s linear infinite;
}

.profile-lifevision-progress-text{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  color:rgba(255,255,255,.95);
  font-size:10.5px;
  font-weight:900;
}

.profile-lifevision-foot{
  height:58px;
  min-height:58px;
  flex:0 0 58px;
  display:grid;
  grid-template-columns:minmax(80px, 1fr) auto minmax(80px, 1fr);
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.08);
  box-sizing:border-box;
}

.profile-lifevision-foot-left,
.profile-lifevision-foot-center,
.profile-lifevision-foot-right{
  display:flex;
  align-items:center;
}

.profile-lifevision-foot-left{
  justify-content:flex-start;
  position:relative;
  grid-column:1;
}

.profile-publication-card .profile-lifevision-foot-left{
  gap:8px;
}

.profile-lifevision-pill.publication-fullscreen-action{
  font-size:16px;
  line-height:1;
}

.profile-views-pill{
  min-width:58px;
  pointer-events:none;
  cursor:default;
  color:rgba(255,255,255,.92);
}

.profile-views-pill svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.profile-lifevision-foot-right .profile-views-pill{
  margin-left:8px;
}







.profile-lifevision-foot-center{
  justify-content:center;
  grid-column:2;
}

#profileLifeVisionFullscreenBtn{
  border-color:rgba(255,255,255,.14);
  border-radius:12px;
  background:transparent;
  transition:border-color .2s ease, background .2s ease;
}

#profileLifeVisionFullscreenBtn:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.045);
}

.profile-lifevision-foot-right{
  justify-content:flex-end;
  position:relative;
  grid-column:3;
}

.profile-lifevision-success-action{
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}

.profile-lifevision-options-dropdown{
  right:0;
  bottom:calc(100% + 18px);
  min-width:290px;
}

.profile-lifevision-badges-dropdown{
  left:0;
  right:auto;
}

.profile-lifevision-foot-left .profile-lifevision-options-dropdown{
  left:0;
  right:auto;
}

.profile-lifevision-foot-right .profile-lifevision-badges-dropdown{
  left:auto;
  right:0;
}

.profile-lifevision-badge-empty{
  cursor:default;
}

.profile-lifevision-options-dropdown .album-actions-body{
  margin-top:10px;
  padding:0 4px 2px;
  box-sizing:border-box;
}

.profile-lifevision-options-dropdown .album-actions-label{
  white-space:nowrap;
}

.profile-lifevision-options-dropdown .album-actions-icon{
  width:22px;
  height:22px;
  flex-basis:22px;
}

.profile-lifevision-option-poi{
  width:22px;
  height:22px;
  display:block;
  border-radius:50%;
  flex:0 0 22px;
}

.profile-lifevision-pill{
  min-height:36px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}



.profile-lifevision-pill:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.045);
}

.profile-guestbook{
  width:calc(100% - 28px);
  min-height:39px;
  flex:0 0 auto;
  margin:-2px 14px 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  box-shadow:none;
  box-sizing:border-box;
}

.profile-guestbook-thread{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:10px;
  max-height:0;
  padding:0 12px;
  overflow:hidden;
  opacity:0;
  transition:max-height .3s ease, padding .3s ease, opacity .2s ease;
}

.profile-guestbook.is-open .profile-guestbook-thread{
  max-height:430px;
  padding:12px;
  opacity:1;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.profile-guestbook-count{
  color:#fff;
  font-size:13px;
  font-weight:850;
  text-align:center;
}

.profile-guestbook-list{
  max-height:350px;
  padding:0 2px 2px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.profile-guestbook-composer{
  padding:0;
  border-top:0;
}

.profile-guestbook-input-shell{
  width:100%;
  min-height:38px;
  grid-template-columns:minmax(0,1fr) 30px;
  padding:4px 5px 4px 12px;
  border:0;
  border-radius:0;
  background:rgba(255,255,255,.035);
}

.profile-guestbook-send{
  width:30px;
  height:30px;
  transform:none;
}

.profile-guestbook-send.is-ready{
  color:#fff;
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.78);
  box-shadow:0 0 16px rgba(255,255,255,.22);
}

.profile-guestbook-footer{
  height:58px;
  min-height:58px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.08);
  background:transparent;
  box-sizing:border-box;
}

.profile-guestbook.is-open .profile-guestbook-footer{
  display:flex;
}

.profile-guestbook-toggle{
  width:42px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:18px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}

.profile-guestbook-toggle-icon{
  display:block;
  transform:translateY(4px);
}

.profile-guestbook.is-open .profile-guestbook-toggle-icon{
  transform:translateY(-3px);
}

.profile-guestbook-toggle:hover,
.profile-guestbook-toggle:focus-visible{
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.075);
}

@media (min-width:641px){
  .publication-composer-box{
    width:min(600px, calc(100vw - 20px));
  }
}

.profile-media-picker-box{
  width:min(600px, calc(100vw - 20px));
}

#publicationComposerContent{
  --publication-composer-accent:#54e636;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
}

#publicationComposerContent[data-composer-type="publication"]{
  --publication-composer-accent:#54e636;
}

#publicationComposerContent[data-composer-type="story"]{
  --publication-composer-accent:#2f8fff;
}

#publicationComposerContent[data-composer-type="reel"]{
  --publication-composer-accent:#AEB6C2;
}

#publicationComposerContent > .profile-lifevision-head{
  height:58px;
  min-height:58px;
}

#publicationComposerContent > .publication-picker-head,
#conversationMediaPickerContent > .publication-picker-head{
  min-height:58px;
  grid-template-columns:minmax(0, 1fr);
}

#publicationComposerContent > .publication-picker-head > :empty,
#conversationMediaPickerContent > .publication-picker-head > :empty{
  display:none;
}

#publicationComposerContent > .publication-picker-head > .profile-lifevision-title,
#conversationMediaPickerContent > .publication-picker-head > .profile-lifevision-title{
  min-width:0;
  width:100%;
  white-space:normal;
  text-align:center;
}

#publicationComposerContent > .profile-lifevision-foot{
  min-height:66px;
  padding:14px 5px;
}

#conversationMediaPickerContent{
  --publication-composer-accent:#fff;
  width:100%; height:100%; min-height:0; min-width:0;
  grid-template-columns:minmax(0, 1fr);
  display:grid; grid-template-rows:auto minmax(0, 1fr) auto;
}
#conversationMediaPickerContent > .profile-lifevision-head{
  height:58px; min-height:58px;
}
#conversationMediaPickerContent > .profile-lifevision-foot{
  min-height:66px; padding:14px 5px;
}

.publication-composer-head{
  position:relative;
  padding-left:12px;
  padding-right:12px;
}

.publication-location-wrap,
.publication-visibility-wrap{
  display:flex;
  position:static;
}

.publication-location-wrap{
  justify-content:flex-start;
}

.publication-visibility-wrap{
  justify-content:flex-end;
}

.publication-composer-head .ui-icon-btn{
  width:34px;
  height:34px;
  border-radius:11px;
}


.publication-location-dropdown,
.publication-visibility-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  z-index:30;
  width:min(260px, calc(100vw - 40px));
  padding:8px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:var(--glass-popover-bg);
  box-shadow:0 18px 42px rgba(0,0,0,.48);
  display:none;
}

.publication-location-dropdown{
  left:10px;
  width:min(300px, calc(100vw - 40px));
}

.publication-visibility-dropdown{
  right:10px;
}

.publication-visibility-dropdown.profile-lifevision-visibility-dropdown{
  top:calc(100% + 22px);
  right:-1px;
  width:min(260px, calc(100vw - 40px));
  padding:8px;
  z-index:80;
}

.publication-location-dropdown.is-open,
.publication-visibility-dropdown.is-open{
  display:block;
}

.publication-location-dropdown .viewer-visibility-name,
.publication-visibility-dropdown .viewer-visibility-name{
  white-space:nowrap;
}

.publication-composer-body{
  min-height:0;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.publication-media-picker{
  width:100%;
  min-height:180px;
  flex:1;
  border:1px dashed rgba(255,255,255,.20);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.78);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  overflow:hidden;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.publication-media-picker.has-photo{
  border-style:solid;
  color:transparent;
}

.publication-media-plus{
  width:68px;
  height:68px;
  flex:0 0 68px;
  margin-bottom:12px;
  border:2px dashed var(--publication-composer-accent);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:46px;
  line-height:1;
  font-weight:300;
  box-sizing:border-box;
  box-shadow:0 0 14px color-mix(in srgb, var(--publication-composer-accent) 46%, transparent);
}

.publication-media-label{
  font-size:12px;
  font-weight:800;
}



.publication-text{
  width:100%;
  min-height:76px;
  resize:none;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:#fff;
  padding:11px 12px;
  font:inherit;
  font-size:13px;
  outline:none;
}

.publication-text:focus{
  border-color:rgba(47,143,255,.72);
}

#publicationComposerContent .publication-text{
  min-height:96px;
}

#publicationComposerContent .publication-text:focus{
  border-color:var(--publication-composer-accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--publication-composer-accent) 18%, transparent);
}

.publication-comments-setting{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px 70px;
  align-items:center;
  gap:8px;
  padding:6px 8px 6px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}

.story-duration-note{
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.2;
  font-weight:850;
  text-align:center;
}

.publication-comments-setting-label{
  min-width:0;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.publication-comments-choice{
  min-height:30px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.publication-comments-choice.is-yes.is-active{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
  color:#fff;
  box-shadow:0 0 14px rgba(47,143,255,.22);
}

.publication-comments-choice.is-no.is-active{
  border-color:rgba(255,70,70,.9);
  background:rgba(255,70,70,.10);
  color:#fff;
  box-shadow:0 0 14px rgba(255,70,70,.18);
}



.publication-picker-body{
  min-height:0;
  overflow:hidden;
  padding:10px;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:10px;
}

.profile-media-picker-body.is-publication-style{
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  padding:10px;
  display:block;
}

.profile-media-picker-body.is-publication-style > .publication-picker-scroll{
  min-height:auto;
  overflow:visible;
}

.publication-picker-tabs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.publication-picker-tabs.is-two-tabs{
  grid-template-columns:1fr 1fr;
}

.publication-picker-tabs.is-one-tab{
  grid-template-columns:1fr;
}

.publication-picker-tab{
  min-height:36px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}

.publication-picker-tab:not(.is-active):hover{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
}

.publication-picker-tab.is-active{
  border-color:rgba(47,143,255,.78);
  background:rgba(47,143,255,.16);
  color:#fff;
  box-shadow:0 0 14px rgba(47,143,255,.18);
}

.publication-picker-scroll{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.publication-picker-scroll::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.publication-picker-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  padding:0 2px 8px;
}

.publication-picker-photo{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  padding:0;
  border:2px solid transparent;
  border-radius:9px;
  overflow:hidden;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  box-sizing:border-box;
}

.publication-picker-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.publication-picker-photo.is-selected{
  border-color:#2f8fff;
  box-shadow:0 0 0 1px rgba(47,143,255,.46), 0 0 16px rgba(47,143,255,.28);
}

.publication-picker-order{
  position:absolute;
  right:8px;
  bottom:8px;
  width:18px;
  height:18px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:6px;
  box-sizing:border-box;
  background:#2f8fff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:950;
  box-shadow:0 0 12px rgba(47,143,255,.6);
}

.publication-picker-albums{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
  padding:0 2px 8px;
}

.publication-picker-album{
  min-width:0;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.035);
  color:#fff;
  text-align:left;
  cursor:pointer;
}











.publication-picker-album-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.publication-picker-album-back{
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:#fff;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}

.publication-picker-album-title{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.publication-picker-empty{
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  color:rgba(255,255,255,.58);
  font-size:12px;
  text-align:center;
}

.publication-picker-footer{
  grid-template-columns:1fr 1fr;
}

.publication-composer-footer{
  grid-template-columns:1fr 1fr;
}

.publication-composer-footer .profile-lifevision-foot-left,
.publication-composer-footer .profile-lifevision-foot-right,
.publication-picker-footer .profile-lifevision-foot-left,
.publication-picker-footer .profile-lifevision-foot-right{
  width:100%;
  grid-column:auto;
  box-sizing:border-box;
}

.publication-composer-footer .profile-lifevision-foot-left,
.publication-picker-footer .profile-lifevision-foot-left{
  padding-left:10px;
}

.publication-composer-footer .profile-lifevision-foot-right,
.publication-picker-footer .profile-lifevision-foot-right{
  padding-right:10px;
}

.publication-composer-footer .profile-lifevision-pill,
.publication-picker-footer .profile-lifevision-pill{
  width:100%;
  min-height:38px;
  justify-content:center;
  font-size:16px;
  font-weight:700;
}

.publication-picker-confirm.is-ready{
  border-color:rgba(47,143,255,.78);
  background:rgba(47,143,255,.92);
  color:#fff;
  box-shadow:0 0 14px rgba(47,143,255,.28);
}

.publication-composer-validate.is-ready{
  border-color:rgba(47,143,255,.78);
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
  color:#fff;
  box-shadow:0 0 14px rgba(47,143,255,.28);
}

.profile-publication-carousel{
  position:relative;
  width:100%;
  height:260px;
  min-height:180px;
  flex:0 0 260px;
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
}

.profile-publication-carousel.is-dragging{
  cursor:grabbing;
}

.profile-publication-carousel .carousel-track{
  width:100%;
  height:100%;
  min-height:0;
}

.profile-publication-carousel .slide{
  position:relative;
  min-width:100%;
  height:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
  overflow:hidden;
}

.profile-publication-carousel .slide::before{
  content:"";
  position:absolute;
  inset:-18px;
  background-image:var(--publication-bg);
  background-position:center;
  background-size:cover;
  filter:blur(16px) brightness(.48);
  transform:scale(1.08);
  opacity:.9;
}

.profile-publication-carousel .profile-publication-media{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
}

.profile-publication-carousel video.profile-publication-media{
  pointer-events:auto;
}

.profile-publication-carousel .publication-progress{
  position:absolute;
  z-index:5;
  left:10px;
  right:10px;
  bottom:60px;
  display:flex;
  gap:5px;
  pointer-events:auto;
}

.profile-publication-carousel .publication-progress-segment{
  flex:1;
  height:3px;
  min-height:3px;
  padding:0;
  border:0;
  border-radius:999px;
  display:block;
  background:rgba(255,255,255,.34);
  overflow:hidden;
  cursor:pointer;
}

.profile-publication-carousel .publication-progress-fill{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#fff;
}

.profile-publication-carousel .publication-progress-segment.active .publication-progress-fill{
  width:100%;
}

.publication-composer-preview{
  position:relative;
  width:100%;
  min-height:180px;
  flex:1;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  overflow:hidden;
  background:#050505;
  touch-action:pan-y;
  cursor:pointer;
}

.publication-composer-preview-image{
  width:100%;
  height:100%;
  min-height:180px;
  display:block;
  object-fit:contain;
  background:#050505;
  user-select:none;
  pointer-events:none;
}

.publication-composer-count{
  position:absolute;
  top:8px;
  left:50%;
  z-index:3;
  transform:translateX(-50%);
  min-height:24px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(0,0,0,.52);
  color:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.publication-composer-count.network-media-info{
  top:8px;
  bottom:auto;
  left:50%;
  z-index:3;
  transform:translateX(-50%);
  min-height:20px;
  padding:0 8px;
  border-radius:10px;
  pointer-events:auto;
  cursor:pointer;
}
.profile-publications-list{
  width:100%;
  display:grid;
  gap:12px;
  padding:0 14px 14px;
  box-sizing:border-box;
}

.profile-relations-list{
  width:100%;
  min-height:150px;
  flex:0 0 auto;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 14px 14px;
  box-sizing:border-box;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  scroll-padding-inline:14px;
  scroll-snap-type:x proximity;
  touch-action:pan-x pan-y;
  cursor:grab;
  user-select:none;
}

.profile-relations-list.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

.profile-relations-list::-webkit-scrollbar{
  display:none;
}
.profile-relation-card{
  width:112px;
  height:202px;
  min-height:202px;
  color:inherit;
  font:inherit;
  text-align:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  box-sizing:border-box;
  flex:0 0 112px;
  scroll-snap-align:start;
}

button.profile-relation-card{
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

button.profile-relation-card:hover,
button.profile-relation-card:focus-visible{
  border-color:var(--profile-card-accent, #fff);
  background-color:color-mix(in srgb, var(--profile-card-accent, #fff) 8%, rgba(255,255,255,.035));
  box-shadow:0 0 16px color-mix(in srgb, var(--profile-card-accent, #fff) 20%, transparent);
  transform:none;
  outline:none;
}

.profile-relation-avatar{
  width:30px;
  height:30px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
}

.profile-relation-name{
  min-width:0;
  color:#fff;
  font-size:13px;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#profileStatBody{
  padding-top:14px;
  padding-bottom:0;
  gap:0;
}

#profileStatBody .profile-stat-inline-controls{
  width:100%;
  min-width:0;
  max-width:100%;
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  gap:8px;
  padding:0 10px 10px;
  background:transparent;
  box-sizing:border-box;
}

#profileStatBody .profile-stat-filter-row{
  flex:0 0 auto;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  background:transparent;
  cursor:grab;
  touch-action:pan-x;
  user-select:none;
  -webkit-overflow-scrolling:touch;
}

#profileStatBody .profile-stat-filter-row.is-dragging{
  cursor:grabbing;
}

#profileStatBody .profile-stat-filter-row .content-feed-filter-chip{
  min-height:32px;
  padding:0 12px;
  border-color:rgba(255,255,255,.26);
  background:transparent;
  color:rgba(255,255,255,.76);
  box-shadow:none;
}

#profileStatBody .profile-stat-filter-row .content-feed-filter-chip:hover,
#profileStatBody .profile-stat-filter-row .content-feed-filter-chip:focus-visible{
  border-color:rgba(255,255,255,.72);
  background:transparent;
  color:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.13);
}

#profileStatBody .profile-stat-filter-row .content-feed-filter-chip.is-active{
  border-color:rgba(255,255,255,.94);
  background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.075));
  color:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 9px rgba(255,255,255,.05);
}

#profileStatBody .profile-stat-groups-grid{
  width:100%;
  padding:0;
  box-sizing:border-box;
}

#profileStatBody .profile-stat-groups-grid .group-directory-avatar-media{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

#profileStatBody .profile-stat-groups-grid .group-directory-card:hover,
#profileStatBody .profile-stat-groups-grid .group-directory-card:focus-within{
  border-color:rgba(255,255,255,.28);
  background:
  radial-gradient(circle at 18% 15%,rgba(255,255,255,.12),transparent 42%),
  rgba(255,255,255,.055);
  outline:none;
}

#profileStatBody .profile-stat-groups-grid .group-directory-card .contacts-directory-mutual{
  color:rgba(255,255,255,.74);
}

#profileStatBody .profile-stat-groups-grid .group-directory-card > .profile-stat-card-actions{
  padding:10px 0 0;
}

#profileStatBody::after{
  content:"";
  display:block;
  width:100%;
  flex:0 0 20px;
}

#profileStatBody .profile-publications-list{
  padding-left:10px;
  padding-right:10px;
}

#profileStatBody.is-publications-view,
#profileStatBody.is-stories-view{
  padding-left:0;
  padding-right:0;
}

.profile-stories-stat-list{
  width:100%;
  display:grid;
  gap:12px;
  padding:0 10px 14px;
  box-sizing:border-box;
}



#profileStatBody.is-stories-view .profile-publication-carousel,
#profileStatBody.is-stories-view .image-carousel.profile-publication-carousel{
  height:110px;
  min-height:110px;
  flex-basis:110px;
}

#profileStatBody.is-stories-view .profile-publication-card{
  min-height:0;
  position:relative;
}

#storyReelFeedBody .profile-publication-card{
  position:relative;
}



#profileStatBody.is-stories-view .profile-publication-card .profile-lifevision-body{
  flex:0 0 110px;
  height:110px;
  min-height:110px;
}

#profileStatBody.is-stories-view .profile-publication-card .profile-lifevision-foot{
  height:58px;
  min-height:58px;
  flex:0 0 58px;
  padding-top:8px;
  padding-bottom:8px;
}

#profileStatBody.is-publications-view .profile-publication-carousel,
#profileStatBody.is-publications-view .image-carousel.profile-publication-carousel{
  height:110px;
  min-height:110px;
  flex-basis:110px;
}

#profileStatBody.is-publications-view .profile-publication-card{
  min-height:0;
  position:relative;
}

#profileStatBody.is-publications-view .profile-publication-card .profile-lifevision-head{
  grid-template-columns:minmax(0, 1fr);
  gap:0;
}

#profileStatBody.is-publications-view .profile-publication-card .profile-lifevision-user,
#profileStatBody.is-publications-view .profile-publication-card .profile-publication-identity{
  width:100%;
}

.profile-publication-name-row{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.profile-publication-name-row .profile-lifevision-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-publication-name-row .profile-publication-meta{
  min-width:max-content;
  white-space:nowrap;
  flex-shrink:0;
  gap:5px;
}

.profile-publication-head-inline{
  grid-template-columns:minmax(0, 1fr);
  gap:0;
}

.profile-publication-head-inline .profile-lifevision-user,
.profile-publication-head-inline .profile-publication-identity{
  width:100%;
}

.profile-publication-name-row .profile-publication-visibility{
  position:relative;
  top:-2px;
  margin-left:-2px;
}

#profileStatBody.is-publications-view .profile-publication-card .profile-lifevision-body{
  flex:0 0 110px;
  height:110px;
  min-height:110px;
}

#profileStatBody.is-publications-view .profile-heart-lifevision-body{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
  radial-gradient(circle at 50% 45%, rgba(46,145,255,.28), transparent 34%),
  radial-gradient(circle at 50% 55%, rgba(79,222,160,.22), transparent 46%),
  rgba(4,8,18,.92);
}

#profileStatBody.is-publications-view .profile-heart-lifevision-globe{
  width:76px;
  height:76px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 24px rgba(62,151,255,.22);
  font-size:42px;
  line-height:1;
}

#profileStatBody.is-publications-view .profile-heart-lifevision-body .profile-lifevision-progress-wrap{
  position:absolute;
  left:10px;
  right:10px;
  bottom:8px;
}

#profileStatBody.is-publications-view .profile-publication-card .profile-lifevision-foot{
  height:58px;
  min-height:58px;
  flex:0 0 58px;
  padding-top:8px;
  padding-bottom:8px;
}

#profileStatBody.is-publications-view.is-delete-mode .profile-publication-card{
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}

#profileStatBody.is-publications-view.is-delete-mode .profile-publication-card *{
  pointer-events:none;
}



#profileStatBody.is-publications-view.is-edit-mode .profile-publication-card{
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}

#profileStatBody.is-publications-view.is-edit-mode .profile-publication-card *{
  pointer-events:none;
}

#profileStatBody.is-publications-view.is-edit-mode .profile-publication-card.is-edit-selected{
  border-color:rgba(47,143,255,.88);
  box-shadow:
  0 0 0 1px rgba(47,143,255,.34) inset,
  0 0 18px rgba(47,143,255,.22);
}

.publication-fullscreen-feed-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:10px;
  box-sizing:border-box;
}

#profileStatBody > .publication-fullscreen-feed-list{
  padding-top:0;
  padding-bottom:0;
  flex:0 0 auto;
}

.publication-fullscreen-feed-list.publication-fullscreen-stage{
  height:auto;
  min-height:0;
  max-width:100%;
  overflow:visible !important;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:transparent;
}
.publication-fullscreen-feed-list.publication-fullscreen-stage::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
.publication-fullscreen-feed-list.publication-fullscreen-stage > .profile-publication-fullscreen-card{
  height:calc(100vh - 130px);
  min-height:520px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 32px rgba(0,0,0,.30);
}

.publication-fullscreen-feed-list .story-viewer-inline-box,
.publication-fullscreen-feed-list .profile-stat-fullscreen-item{
  width:100%;
  max-width:none;
  flex:0 0 auto;
}
.publication-fullscreen-feed-list .story-viewer-inline-box{
  height:calc(100vh - 130px);
  min-height:520px;
}
.profile-stat-fullscreen-item{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.profile-stat-fullscreen-item > .profile-stat-card-actions{
  padding:0;
}

#profileStatBody .publication-fullscreen-feed-list .profile-stat-fullscreen-item{
  gap:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:#000;
  box-shadow:0 12px 32px rgba(0,0,0,.30);
}

#profileStatBody .publication-fullscreen-feed-list .profile-stat-fullscreen-item > .story-viewer-inline-box,
#profileStatBody .publication-fullscreen-feed-list .profile-stat-fullscreen-item > .profile-publication-fullscreen-card{
  height:180px;
  min-height:180px;
  border:0;
  border-radius:18px 18px 0 0;
  box-shadow:none;
  overflow:hidden;
}

#profileStatBody .publication-fullscreen-feed-list .profile-stat-fullscreen-item > .profile-stat-card-actions{
  padding:8px 10px 10px;
  border-top:0;
  background:transparent;
}

#profileStatBody .publication-fullscreen-feed-list .profile-stat-fullscreen-item > .story-viewer-inline-box .story-viewer-foot{
  padding-bottom:6px;
}
/* Stats - cartes immersives uniformes */
#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card{
  position:relative;
  display:block;
  width:100%;
  height:180px;
  min-height:180px;
  overflow:hidden;
  border:0;
  border-radius:18px 18px 0 0;
  background:#000;
  box-shadow:none;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-head{
  position:absolute;
  z-index:8;
  top:0;
  left:0;
  right:0;
  min-height:auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px 0;
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.18), transparent);
  border:0;
  box-shadow:none;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-user{
  width:100%;
  max-width:none;
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:9px;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-avatar{
  width:46px;
  height:46px;
  flex:0 0 46px;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-publication-identity{
  width:auto;
  max-width:100%;
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-publication-name-row{
  width:auto;
  max-width:100%;
  min-width:0;
  justify-content:flex-start;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-name{
  display:block;
  max-width:100%;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-publication-fullscreen-subline{
  margin-top:-1px;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  overflow:visible;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .publication-fullscreen-top-action{
  min-height:36px;
  justify-self:end;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-body,
#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-publication-carousel,
#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .image-carousel.profile-publication-carousel{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
  flex:0 0 auto;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .carousel-track{
  width:100%;
  height:100%;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .slide{
  width:100%;
  min-width:100%;
  flex:0 0 100%;
  height:100%;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-publication-media{
  width:100%;
  height:100%;
  object-fit:contain;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-foot{
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  bottom:0;
  height:auto;
  min-height:auto;
  flex:0 0 auto;
  padding:0 12px 6px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18), transparent);
  border:0;
  box-shadow:none;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-foot-center{
  display:none;
}

#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-foot-left,
#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-card .profile-lifevision-foot-right{
  display:flex;
  align-items:center;
  gap:8px;
}
/* Fin stats - cartes immersives uniformes */
.profile-stat-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 10px 10px;
  box-sizing:border-box;
}

.profile-stat-card-actions.is-single{
  grid-template-columns:1fr;
}

.profile-stat-friends-grid{
  padding:0;
  box-sizing:border-box;
}

.profile-stat-friend-item{
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}

.profile-stat-friend-item > .contacts-directory-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
}

.profile-stat-friend-item > .contacts-directory-card > .profile-stat-card-actions{
  padding:10px 0 0;
}

.profile-stat-comment-actions{
  grid-template-columns:1fr 1fr;
}

.profile-stat-comment-open-btn{
  grid-column:1 / -1;
}

.profile-exploration-comment-card{
  display:grid;
  grid-template-rows:minmax(180px, 260px) auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(30,30,34,.96),rgba(8,8,10,.96));
}

.profile-exploration-comment-media{
  min-height:180px;
  background:
  radial-gradient(circle at 50% 35%,rgba(47,143,255,.25),transparent 58%),
  rgba(255,255,255,.035);
  background-size:cover;
  background-position:center;
}









.profile-stat-card-action-btn{
  width:100%;
  min-height:34px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 0 14px rgba(47,143,255,.22);
}

.profile-stat-card-action-btn.is-danger{
  background:rgba(255,70,70,.45);
  box-shadow:none;
}

.profile-stat-card-action-btn:hover{
  filter:brightness(1.08);
}




.profile-publication-card{
  position:relative;
  width:100%;
  min-height:180px;
  margin:0;
}

.profile-publication-card .profile-lifevision-body{
  min-height:0;
  background:#050505;
}

.profile-publication-media{
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#050505;
}

.profile-publication-caption{
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.88);
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
}

.profile-publication-meta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  color:rgba(255,255,255,.65);
  font-size:11px;
  font-weight:750;
}

.profile-publication-meta > span:first-child,
.story-viewer-meta > span:first-child{
  color:#fff;
}

.profile-publication-visibility{
  position:relative;
  top:-2px;
  margin-left:-2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}

.profile-publication-identity{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}

.profile-publication-location{
  max-width:100%;
  display:flex;
  align-items:flex-start;
  gap:5px;
  color:rgba(255,255,255,.68);
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-publication-location img{
  width:18px;
  height:11px;
  flex:0 0 18px;
  border-radius:2px;
  object-fit:cover;
}

.profile-publication-empty{
  min-height:110px;
  display:grid;
  align-items:center;
  justify-items:stretch;
  color:rgba(255,255,255,.56);
  font-size:12px;
  font-weight:700;
}

.profile-photo-slot{
  width:100%;
  height:90px;
  border-radius:14px;
  position:relative;
  border:3px solid rgba(0,0,0,.72);
  background:rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(0,0,0,.45);
  font-size:22px;
  font-weight:900;
  color:rgba(0,0,0,.45);
  overflow:hidden;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}

.profile-photo-strip .profile-photo-slot:not(.is-empty),
#authRememberAvatar.auth-profile-photo.profile-photo-slot:not(.is-empty){
  border:0;
}

.profile-photo-strip .profile-photo-slot:not(.is-empty)::after,
#authRememberAvatar.auth-profile-photo.profile-photo-slot:not(.is-empty)::after{
  content:'';
  position:absolute;
  inset:0;
  border:3px solid rgba(0,0,0,.72);
  border-radius:14px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:3;
}

.profile-photo-slot.is-empty{
  border:1px dashed rgba(255,255,255,.20);
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.78);
  font-size:30px;
  font-weight:500;
  box-shadow:none;
  cursor:pointer;
}

.profile-media-zoom-layer{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  background-repeat:no-repeat;
  background-position:var(--dynamic-bg-position, 50% 50%);
  transform:scale(var(--profile-media-zoom, 1));
  transform-origin:center;
  transition:transform .12s ease;
  pointer-events:none;
}

.profile-photo-slot > .profile-media-zoom-layer,
.profile-photo-position-preview:not(.is-cover) > .profile-media-zoom-layer{
  background-size:cover;
}

.profile-cover-banner > .profile-media-zoom-layer,
.profile-photo-position-preview.is-cover > .profile-media-zoom-layer{
  background-size:100% auto;
}

.profile-photo-strip .profile-photo-slot.is-empty,
#authRememberAvatar.auth-profile-photo.profile-photo-slot.is-empty{
  color:transparent;
  font-size:0;
}

.profile-photo-strip .profile-photo-slot.is-empty::before,
#authRememberAvatar.auth-profile-photo.profile-photo-slot.is-empty::before{
  content:'＋';
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:2px dashed #fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:27px;
  line-height:1;
  font-weight:300;
  box-sizing:border-box;
  box-shadow:0 0 14px color-mix(in srgb, #fff 46%, transparent);
  pointer-events:none;
}

.profile-photo-slot .profile-crop-hint{
  top:50%;
}

.profile-photo-slot.is-main{
  width:100%;
  height:106px;
}

.profile-photo-slot.is-cropping{
  cursor:grab;
  touch-action:none;
  border-color:#2f8fff;
  box-shadow:0 4px 14px rgba(0,0,0,.28), 0 0 0 1px #2f8fff inset;
}

.profile-photo-slot.is-cropping:active{
  cursor:grabbing;
}

.profile-photo-position-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.profile-photo-position-grid.is-cover{
  grid-template-columns:1fr;
}

#profilePhotoPositionBody.profile-media-position-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px 18px;
}

#profilePhotoPositionPanel .panel-modal-box{
  width:min(760px, calc(100vw - 20px));
}

.profile-display-mode-section,
.profile-media-manage-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  box-sizing:border-box;
}

.profile-media-section-title{
  color:#fff;
  font-size:15px;
  line-height:1.2;
  font-weight:850;
  text-align:left;
}

.profile-display-mode-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.profile-display-mode-btn{
  min-width:0;
  min-height:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.72);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.profile-display-mode-btn:hover,
.profile-display-mode-btn.is-active{
  border-color:#fff;
  background:rgba(255,255,255,.09);
  color:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.14);
}

.profile-display-mode-visual{
  position:relative;
  width:58px;
  height:26px;
  display:block;
  border:1px solid currentColor;
  border-radius:6px;
  box-sizing:border-box;
  opacity:.9;
}

.profile-display-mode-visual::before,
.profile-display-mode-visual::after{
  content:'';
  position:absolute;
  box-sizing:border-box;
}

.profile-display-mode-visual.is-photos{
  border:0;
}

.profile-display-mode-visual.is-photos::before{
  inset:3px 0;
  border:1px solid currentColor;
  border-radius:5px;
  box-shadow:20px 0 0 -1px #111, 20px 0 0 0 currentColor, 40px 0 0 -1px #111, 40px 0 0 0 currentColor;
  width:18px;
}

.profile-display-mode-visual.is-cover::before,
.profile-display-mode-visual.is-combined::before{
  inset:5px 7px;
  border-radius:3px;
  background:currentColor;
  opacity:.42;
}

.profile-display-mode-visual.is-combined::after{
  left:50%;
  bottom:-2px;
  width:14px;
  height:14px;
  border:1px solid currentColor;
  border-radius:3px;
  background:#111;
  transform:translateX(-50%);
}

.profile-display-mode-label{
  font-size:12px;
  line-height:1.1;
  font-weight:800;
  text-align:center;
}



.profile-photo-position-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:#fff;
  cursor:pointer;
  padding:0;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.profile-photo-position-card:hover,
.profile-photo-position-card:focus-visible{
  border-color:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.15);
  outline:none;
}

.profile-photo-position-preview{
  position:relative;
  width:100%;
  height:220px;
  border-radius:0;
  border:0;
  background:rgba(255,255,255,.025);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.65);
  font-size:24px;
  font-weight:900;
  box-sizing:border-box;
  transition:.2s;
}

.profile-photo-position-preview.is-cover{
  height:230px;
  background-size:100% auto;
}

.profile-photo-position-card.is-cropping .profile-photo-position-preview{
  cursor:grab;
  touch-action:none;
}

.profile-photo-position-card.is-cropping .profile-photo-position-preview:active{
  cursor:grabbing;
}

.profile-photo-position-card.is-cropping{
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.38), 0 0 18px rgba(255,255,255,.18);
}

#profilePhotoPositionPanel .profile-photo-position-preview .profile-crop-hint{
  top:50%;
  z-index:4;
}

#profilePhotoPositionPanel .profile-media-zoom{
  position:absolute;
  top:auto;
  right:auto;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  align-items:center;
  gap:7px;
  width:170px;
  height:32.6667px;
  box-sizing:border-box;
  padding:7px 10px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:15px;
  font-weight:900;
  box-shadow:inset 0 0 0 .5px #fff;
}

#profilePhotoPositionPanel .profile-media-zoom input{
  --group-zoom-progress:0%;
  flex:1;
  min-width:0;
  height:5px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:999px;
  background:linear-gradient(to right,
  #fff 0 var(--group-zoom-progress),
  rgba(255,255,255,.24) var(--group-zoom-progress) 100%);
  cursor:pointer;
}

#profilePhotoPositionPanel .profile-media-zoom input::-webkit-slider-thumb{
  width:14px;
  height:14px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:none;
}

#profilePhotoPositionPanel .profile-media-zoom input::-moz-range-track{
  height:5px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.24);
}

#profilePhotoPositionPanel .profile-media-zoom input::-moz-range-progress{
  height:5px;
  border:0;
  border-radius:999px;
  background:#fff;
}

#profilePhotoPositionPanel .profile-media-zoom input::-moz-range-thumb{
  width:14px;
  height:14px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:none;
}

.profile-photo-position-preview.is-empty{
  color:transparent;
  font-size:0;
}

.profile-photo-position-preview.is-empty::before{
  content:'＋';
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:2px dashed #fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:27px;
  line-height:1;
  font-weight:300;
  box-sizing:border-box;
  box-shadow:0 0 14px color-mix(in srgb, #fff 46%, transparent);
  pointer-events:none;
}

.profile-photo-position-card .profile-photo-position-preview.is-empty{
  border:1px dashed rgba(255,255,255,.22);
  border-radius:13px 13px 0 0;
}

.profile-photo-position-card.is-selected .profile-photo-position-preview{
  border-color:#2f8fff;
  box-shadow:0 0 0 1px #2f8fff inset;
}



.profile-position-footer-btn{
  display:flex !important;
  grid-template-columns:none !important;
  gap:0 !important;
  align-items:center !important;
  justify-content:center !important;
  justify-items:center !important;
  text-align:center !important;
  line-height:1;
}

.profile-position-footer-btn:disabled{
  opacity:.55;
  cursor:default;
  pointer-events:none;
}

#profilePhotoPositionPanel .footer-command-button,
#profilePhotoPickerPanel .footer-command-button,
#profileCoverPickerPanel .footer-command-button{
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:transparent;
  opacity:1 !important;
  box-shadow:none;
}

#profilePhotoPositionPanel .footer-command-button:hover,
#profilePhotoPickerPanel .footer-command-button:hover,
#profileCoverPickerPanel .footer-command-button:hover{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
}



.profile-photo-position-label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  width:auto;
  min-height:34px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  box-sizing:border-box;
  font-size:12px;
  font-weight:800;
  color:#fff;
  text-align:center;
  pointer-events:none;
  border-radius:0 0 13px 13px;
  overflow:hidden;
}

.profile-photo-position-card.is-cropping .profile-photo-position-label{
  opacity:0;
  visibility:hidden;
}

.profile-media-action-chip{
  position:absolute;
  top:8px;
  right:8px;
  min-height:28px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.profile-media-action-chip:hover{
  border-color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 12px rgba(255,255,255,.18);
}

@media (max-width:620px){
  #profilePhotoPositionBody.profile-media-position-body{
    padding:12px;
  }

  .profile-display-mode-section,
  .profile-media-manage-section{
    padding:11px;
  }

  .profile-display-mode-grid{
    gap:7px;
  }

  .profile-display-mode-btn{
    min-height:70px;
    padding:8px 4px;
  }

  .profile-display-mode-label{
    font-size:10px;
  }
}

.profile-options-dropdown{
  right:10px;
  bottom:calc(100% + 10px);
}

#notificationsSettingsDropdown{
  width:calc(100% - 20px);
  max-width:none;
  right:10px;
  bottom:calc(100% + 10px);
  box-sizing:border-box;
}

#notificationsSettingsDropdown .album-actions-label{
  white-space:nowrap;
}


/* ===========================================================
BLOC CSS 04.02 - PANELS / STRUCTURE INTERNE

Gere :

- Corps internes des fenetres
- Grilles, listes et contenus communs

----------------------------------------------------------- */

.panel-shell{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:180px; 
}

.panel-head{
  display:flex;
  flex-direction:column; 
  align-items:center;     
  justify-content:center; 

  text-align:center; 

  gap:12px;
  padding:8px 16px 8px;

  border-bottom:1px solid rgba(255,255,255,.08);
}

.panel-title{
  font-size:16px;
  font-weight:800;
  letter-spacing:.2px;
}

.panel-sub{
  font-size:12px;
  color:var(--color-text-dim);
  margin-top:4px;
}

.panel-foot{
  display:flex;
  justify-content:center;
  align-items:center;

  padding:14px;

  border-top:1px solid var(--glass-border);
}

.panel-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  padding:14px;
  padding-bottom:20px;

  scrollbar-width:none;
  -ms-overflow-style:none;
}

.panel-body::-webkit-scrollbar{
  width:8px;
}

.panel-body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}


/* ===========================================================
📊 FENETRE EXPLORATION SYSTEM 📊
-----------------------------------------------------------

Gère :

- Vue global
- Souvenirs
- Villes remarquables
- Plages incontournables
- Lieux insolites
- Endroits mythiques
- Merveilles du monde
- Fetes emblematiques
- Coup de coeur 

=========================================================== */

.legend-list{
  display:grid;
  gap:10px;
}

.legend-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;

  align-items:center;

  padding:8px 10px;

  border-radius:18px;

  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);

  opacity:1;

  transition:
  opacity .2s ease,
  border-color .2s ease,
  box-shadow .2s ease,
  background .2s ease;
}

#souvenirsPanel .legend-row{
  border-radius:12px;
}

.legend-row.active{
  opacity:1;

  border-color:rgba(255,255,255,.14);

  box-shadow:
  0 0 0 1px rgba(255,255,255,.03),
  0 10px 28px rgba(0,0,0,.18);

  background:rgba(255,255,255,.055);
}

.legend-dot{
  width:22px;
  height:22px;

  border-radius:999px;

  background:#fff;

  box-shadow:0 0 16px rgba(255,255,255,.26); 
}

.legend-text{
  min-width:0;
  text-align:left;
}

.legend-name{
  font-size:14.5px;
  font-weight:800;
  color:#fff;
}

.profile-lifevision-pill[hidden]{
  display:none !important;
}

.profile-lifevision-pill svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.legend-meta{
  margin-top:2px;
  font-size:11px;
  color:rgba(255,255,255,.72);
}

.legend-meta.is-favorites-counter{
  margin-top:2px;
}


/* ===========================================================
🔘 SWITCH (ON/OFF) 🔘
----------------------------------------------------------- */

.legend-switch{
  position:relative;

  width:52px;
  height:26px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);

  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);

  transition:
  background .22s ease,
  border-color .22s ease,
  box-shadow .22s ease;
}

.legend-switch::before{
  content:'';

  position:absolute;
  top:2px;
  left:3px;

  width:20px;
  height:20px;

  border-radius:999px;

  background:#f0f1d9;

  box-shadow:0 0 16px rgba(255,246,200,.16);

  transition:
  left .22s ease,
  background .22s ease,
  box-shadow .22s ease;
}


/* ===========================================================
✅✅ SWITCH ACTIF ✅✅
----------------------------------------------------------- */

.legend-row.active .legend-switch{
  background:var(--dynamic-color, linear-gradient(
  90deg,
  rgba(81,243,122,.88),
  rgba(83,204,255,.92)
  ));

  border-color:rgba(255,255,255,.24);

  box-shadow:0 0 var(--dynamic-glow-size,18px) var(--dynamic-glow, rgba(122,255,178,.24));
}

.legend-row.active .legend-switch::before{
  left:28px; 

  background:#fffce8;

  box-shadow:0 0 18px rgba(255,255,255,.34);
}

.legend-row:hover{
  opacity:1;

  border-color:rgba(255,255,255,.14);

  box-shadow:
  0 0 0 1px rgba(255,255,255,.03),
  0 10px 28px rgba(0,0,0,.18);

  background:rgba(255,255,255,.055);
}

.footer-command-button{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  min-height:38px;
  border-radius:14px;
  white-space:nowrap;
  font-weight:700;
  color:#fff;
  width:100%;
  background:transparent;
}


/* ===========================================================
🧾 UI CARDS GÉNÉRIQUES 🧾
----------------------------------------------------------- */

.card{
  border-radius:18px;
  padding:14px;

  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.card-title{
  font-size:13px;
  font-weight:800;
  color:#fff;
}




/* ===========================================================
📊 FENETRE PROGRESS SYSTEM 📊
-----------------------------------------------------------

Gère :

- Barre globale
- Sections avec sous-détails
- Succes
- Popup succes
- Barre de progression

=========================================================== */

.progress-panel-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}


/* ===========================================================
BLOC CSS 04.03 - PANELS / LISTE DES SECTIONS

Gere :

- Cartes de sections stats/options
- Etats selection, edition et suppression

----------------------------------------------------------- */

.progress-rows{
  display:grid;
  gap:10px;
}

.progress-section{
  display:grid;
  gap:8px;
  position:relative;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

.progress-row-btn{
  width:100%;
  min-height:54px;

  display:grid;
  grid-template-columns:1fr auto;

  gap:12px;
  align-items:center;

  padding:7px 10px 7px 16px;

  border-radius:18px;

  background:rgba(255,255,255,.045);

  border:1px solid rgba(255,255,255,.14);

  color:#fff;

  box-shadow:none;

  opacity:1;
}

.progress-row-btn.is-available{
  opacity:1;
  color:#fff;
}

.progress-row-btn.is-available .row-label,
.progress-row-btn.is-available .row-count{
  color:#fff;
}

.progress-row-main{
  display:grid;
  gap:6px;
  min-width:0;
}

.progress-row-btn .row-label{
  font-size:14.5px;
  font-weight:800;
  text-align:left;
}

.progress-row-btn .row-count{
  position:relative;
  z-index:1;
  top:-3px;
  font-size:11px;
  font-weight:900;
  color:#fff;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
}

.progress-row-bar{
  position:relative;
  width:calc(100% + 40px);
  height:17px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}

.progress-row-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background:var(--progress-color, linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff));
  box-shadow:
  0 0 8px var(--progress-mini-glow, rgba(47,143,255,.45)),
  0 0 16px color-mix(in srgb, var(--progress-mini-glow, #2f8fff) 45%, transparent);
  animation:progressMiniGlow 2.5s ease-in-out infinite;
}

@keyframes progressMiniGlow{
  0%,
  100%{
    box-shadow:
    0 0 7px var(--progress-mini-glow, rgba(47,143,255,.45)),
    0 0 14px color-mix(in srgb, var(--progress-mini-glow, #2f8fff) 38%, transparent);
  }

  50%{
    box-shadow:
    0 0 13px var(--progress-mini-glow, rgba(47,143,255,.75)),
    0 0 24px color-mix(in srgb, var(--progress-mini-glow, #2f8fff) 58%, transparent);
  }
}

.progress-row-btn .row-arrow{
  position:relative;
  top:-10px;
  width:28px;
  height:20px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);

  font-size:12px;

  transition:transform .2s ease;
}

/* Progression : catégories centrées avec barre compacte et séparateurs. */
.progress-row-btn{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  padding:7px 16px;
}

.progress-row-main{
  position:relative;
  width:100%;
}

.progress-row-btn .row-label{
  text-align:center;
}

.progress-row-bar{
  z-index:1;
  width:100%;
  margin:0 auto;
}

@media (min-width:481px){
  .progress-section{
    width:62%;
  }

  .progress-section::before,
  .progress-section::after{
    content:'';
    position:absolute;
    top:29.5px;
    width:calc(30.645% - 12px);
    height:.5px;
    background:rgba(255,255,255,.18);
    box-shadow:none;
  }

  .progress-section::before{ right:calc(100% + 12px); }
  .progress-section::after{ left:calc(100% + 12px); }
}

.progress-row-btn .row-arrow{
  display:none;
}

/* Progression : résumé global fixé juste au-dessus du header bas. */
.progress-shell > .panel-head{
  order:0;
}

.progress-shell > .progress-panel-body{
  order:1;
}

.progress-shell > .progress-footer-wrap{
  order:2;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:0;
}

.progress-shell > .progress-footer{
  order:3;
}

/* Progression : blanc futuriste réservé aux catégories débloquées. */
.progress-row-btn.is-available{
  border-color:rgba(255,255,255,.62);
  box-shadow:0 0 10px rgba(255,255,255,.08);
}

@media (min-width:481px){
  .progress-section:has(> .progress-row-btn.is-available)::before,
  .progress-section:has(> .progress-row-btn.is-available)::after{
    background:rgba(255,255,255,.72);
    box-shadow:0 0 8px rgba(255,255,255,.16);
  }
}

.progress-row-btn.is-available:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.92);
  box-shadow:0 0 14px rgba(255,255,255,.18);
}

/* Progression : couleurs futuristes des cartes de succès validés. */
.progress-panel-body .progress-valid-card,
[data-country-accordion="success"] .progress-valid-card{
  background:transparent;
  border-color:rgba(255,255,255,.62);
  box-shadow:0 0 10px rgba(255,255,255,.07), 0 10px 34px rgba(0,0,0,.40);
  transition:border-color .2s ease, box-shadow .2s ease;
}

.progress-panel-body .progress-valid-head,
.progress-panel-body .progress-valid-foot{
  background:rgba(0,0,0,.35);
}

.progress-panel-body .progress-valid-main{
  background:rgba(255,255,255,.06);
  transition:background .2s ease;
}

.progress-panel-body .progress-valid-card:hover,
[data-country-accordion="success"] .progress-valid-card:hover{
  border-color:rgba(255,255,255,.92);
  box-shadow:0 0 14px rgba(255,255,255,.18), 0 10px 34px rgba(0,0,0,.40);
}

.progress-panel-body .progress-valid-card:hover .progress-valid-main{
  background:rgba(255,255,255,.06);
}

/* Carte affichée au déblocage : même fond central que dans Progression. */
.success-popup .success-main{
  background:rgba(255,255,255,.06);
}

/* Exploration : tri des commentaires en blanc futuriste. */
.comments-order-btn.place-comments-order{
  border-color:#fff;
  background:rgba(255,255,255,.13);
  box-shadow:0 0 14px rgba(255,255,255,.22);
}

.comments-order-btn.place-comments-order:hover{
  border-color:#fff;
  background:rgba(255,255,255,.18);
  box-shadow:0 0 16px rgba(255,255,255,.28);
}

/* Exploration : indicateurs du carrousel en blanc futuriste. */
.pill-overlay .image-carousel .dots{
  border-color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.10);
  box-shadow:0 0 14px rgba(255,255,255,.16);
}

.pill-overlay .image-carousel .dot{
  background:rgba(255,255,255,.55);
}

.pill-overlay .image-carousel .dot.active{
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.42);
}

.progress-section.is-open .row-arrow{
  transform:rotate(180deg);
}


/* ===========================================================
🔽 DÉTAILS (EXPAND) 🔽
----------------------------------------------------------- */

.progress-details{
  display:none;
  gap:10px;
  padding:4px 8px 0;
}

.progress-section.is-open .progress-details{
  display:grid;
}


/* ===========================================================
🏆 VALIDATION CARD 🏆
----------------------------------------------------------- */

.progress-valid-card{
  border-radius:22px;
  margin-bottom:10px;

  background:var(--glass-bg);

  border:1px solid rgba(255,255,255,.14);

  box-shadow:0 10px 34px var(--glass-shadow);

  backdrop-filter:blur(var(--blur-md));
  -webkit-backdrop-filter:blur(var(--blur-md));

  overflow:hidden;
}

.progress-valid-card:last-child{
  margin-bottom:0;
}









.memory-video-badge{
  position:absolute;
  left:6px;
  bottom:10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:20px;
  padding:0 7px;
  border-radius:10px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:20px;
  pointer-events:none;
  z-index:8;
}

.memory-video-play{
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:7px solid currentColor;
}

.memory-video-duration{
  font-size:11px;
  font-weight:800;
  line-height:1;
}

.memory-video-badge.is-gallery{
  left:6px;
  bottom:8px;
  transform:none;
  min-height:20px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(0,0,0,.58);
  justify-content:center;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
  text-shadow:0 2px 7px rgba(0,0,0,.9);
}

.memory-video-badge.is-gallery .memory-video-duration{
  font-size:10px;
  font-weight:900;
  line-height:1;
}



.memory-video-badge.is-picker{
  left:6px;
  bottom:8px;
  transform:none;
  min-height:20px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(0,0,0,.58);
  justify-content:center;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
  text-shadow:0 2px 7px rgba(0,0,0,.9);
}

.memory-video-badge.is-picker .memory-video-duration{
  font-size:10px;
  font-weight:900;
  line-height:1;
}












/* ===========================================================
BLOC CSS 04.04 - PANELS / HEADER

Gere :

- Headers des fenetres
- Titres, sous-titres et actions hautes

----------------------------------------------------------- */

.progress-valid-head{
  padding:8px 14px;
  text-align:center;

  font-size:12px;
  font-weight:800;

  border-bottom:1px solid rgba(255,255,255,.1);

  color:rgba(255,255,255,.82);
}


/* ===========================================================
✅ CONTENU PRINCIPAL✅ 
----------------------------------------------------------- */

.progress-valid-main{
  min-height:58px;

  display:grid;
  grid-template-columns:48px 1fr 34px;

  gap:12px;
  align-items:center;

  padding:8px 16px;
}

.progress-valid-icon{
  font-size:24px;
  text-align:center;
}

.progress-valid-meta{
  display:grid;
  gap:6px;
  text-align:center;
}

.progress-valid-type{
  font-size:12px;
  color:rgba(255,255,255,.7);
  font-weight:800;
}

.progress-valid-name{
  font-size:16px;
  font-weight:900;
}

.progress-valid-trophy{
  font-size:22px;
  text-align:center;
}


/* ===========================================================
BLOC CSS 04.05 - PANELS / FOOTER

Gere :

- Footers des fenetres
- Actions bas, retour, options et validation

----------------------------------------------------------- */

.progress-valid-foot{
  border-top:1px solid rgba(255,255,255,.1);

  padding:8px 14px;
  text-align:center;

  font-size:12px;
  font-weight:900;

  color:#f4df75;

  letter-spacing:.03em;
}

.progress-valid-foot-text,
.success-foot-text{
  color:rgba(255,255,255,.88);
}

.progress-valid-foot-star,
.success-foot-star{
  color:#f4df75;
}


/* ===========================================================
⏳ LISTE EN ATTENTE ⏳
----------------------------------------------------------- */

.progress-pending-list{
  display:grid;
  gap:8px;
}

.progress-pending-item{
  min-height:66px;

  border-radius:16px;

  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);

  display:grid;
  align-content:center;
  gap:9px;

  text-align:center;

  padding:0 14px;

  font-size:14px;
  font-weight:700;

  color:rgba(255,255,255,.72);
}

.progress-pending-name{
  font-size:14px;
  font-weight:800;
  color:rgba(255,255,255,.78);
}

.progress-pending-bar{
  position:relative;
  height:18px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}

.progress-pending-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background:var(--progress-color, linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff));
  box-shadow:
  0 0 8px var(--progress-mini-glow, rgba(47,143,255,.45)),
  0 0 16px color-mix(in srgb, var(--progress-mini-glow, #2f8fff) 45%, transparent);
  animation:progressMiniGlow 2.5s ease-in-out infinite;
}

.progress-pending-count{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#fff;
}


/* ===========================================================
📊 BARRE PROGRESSION BAS 📊
----------------------------------------------------------- */

.progress-footer-wrap{
  padding:6px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.progress-summary-bar{
  position:relative;

  height:20px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;

  background:rgba(255,255,255,.06);
}

.progress-summary-fill{
  position:absolute;
  inset:0 auto 0 0;

  width:0%; 

  border-radius:999px;
  overflow:hidden;

  background:linear-gradient(
  90deg,
  #2f8fff,
  #5fb8ff,
  #2f8fff
  );

  box-shadow:
  0 0 10px rgba(47,143,255,.7),
  0 0 22px rgba(47,143,255,.35);

  transition:width 0.6s ease;

  animation:progressGlow 2.5s ease-in-out infinite;
}

.progress-summary-fill::after{
  content:'';
  position:absolute;

  top:0;
  left:-40%;

  width:40%;
  height:100%;

  background:linear-gradient(
  120deg,
  transparent,
  rgba(255,255,255,.35),
  transparent
  );

  transform:skewX(-20deg);

  animation:progressShine 3s linear infinite;
}

@keyframes progressShine{
  0%{ left:-40%; }
  100%{ left:120%; }
}

@keyframes progressGlow{
  0%{
    box-shadow:
    0 0 6px rgba(47,143,255,.5),
    0 0 14px rgba(47,143,255,.25);
  }

  50%{
    box-shadow:
    0 0 14px rgba(47,143,255,.9),
    0 0 28px rgba(47,143,255,.45);
  }

  100%{
    box-shadow:
    0 0 6px rgba(47,143,255,.5),
    0 0 14px rgba(47,143,255,.25);
  }
}

.progress-summary-text{
  position:relative;
  z-index:1;

  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 10px;

  font-size:12px;
  font-weight:900;

  color:rgba(255,255,255,.95);
}

.progress-footer{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 5px;
}

.progress-footer-slot{
  display:flex;
  align-items:center;
}

.progress-footer-left{
  width:80px;
  justify-content:flex-start;
  padding-left:10px;
}

.progress-footer-center{
  flex:1;
  justify-content:center;
}

.progress-footer-right{
  width:80px;
  justify-content:flex-end;
  padding-right:10px;
  position:relative;
}

.progress-section-list{
  display:grid;
  gap:10px;
}

.progress-section-list .progress-valid-card{
  margin-bottom:0 !important;
}

.progress-section-list .progress-valid-card:last-child{
  margin-bottom:0;
}

.progress-valid-card.is-notification-target{
  border-color:#2f8fff;
  box-shadow:
  0 0 0 2px rgba(47,143,255,.42),
  0 12px 38px rgba(47,143,255,.28);
}

.progress-options-dropdown{
  right:10px;
  bottom:calc(100% + 10px);
  min-width:230px;
}

.panel-footer.progress-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:14px 5px;
}


/* ===========================================================
🎉 SUCCESS POPUP 🎉
----------------------------------------------------------- */

.success-popup-layer{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%, -50%);

  z-index:40;

  width:min(
  calc(100vw - 24px - var(--safe-left) - var(--safe-right)),
  600px
  );

  pointer-events:none;

  display:grid;
  justify-items:center;
  gap:10px;
}

.success-popup{
  width:100%;

  border-radius:24px;

  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  box-shadow:0 10px 34px var(--glass-shadow);

  backdrop-filter:blur(var(--blur-md));
  -webkit-backdrop-filter:blur(var(--blur-md));

  overflow:hidden;

  opacity:0;
  transform:translateY(14px);

  animation:successIn .25s ease forwards;
}

.success-popup.is-glowing{
  animation:
  successIn .25s ease forwards,
  successGlow 3s ease-out forwards;
}

.success-popup.hide{
  animation:successOut .24s ease forwards;
}

.success-head{
  padding:9px 16px;
  text-align:center;

  font-size:13px;
  font-weight:900;

  color:rgba(255,255,255,.92);

  border-bottom:1px solid rgba(255,255,255,.1);
}

.success-main{
  min-height:74px;

  display:grid;
  grid-template-columns:52px 1fr 40px;

  align-items:center;

  gap:12px;
  padding:10px 16px;
}

.success-icon{ font-size:28px; text-align:center; }

.success-text{
  display:grid;
  gap:6px;
  text-align:center;
}

.success-type{
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.72);
}

.success-name{
  font-size:20px;
  font-weight:900;
  color:#fff;
}

.success-trophy{
  font-size:26px;
  text-align:center;
}

.success-foot{
  padding:9px 16px;
  border-top:1px solid rgba(255,255,255,.1);

  text-align:center;

  font-size:14px;
  font-weight:900;

  color:rgba(255,255,255,.88);
}


/* ===========================================================
🎬 ANIMATIONS 🎬
----------------------------------------------------------- */

@keyframes successIn{
  from{
    opacity:0;
    transform:translateY(14px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes successOut{
  from{
    opacity:1;
    transform:translateY(0);
  }

  to{
    opacity:0;
    transform:translateY(10px);
  }
}


/* ===========================================================
ℹ️ INFOS GRID ℹ️
----------------------------------------------------------- */

.info-grid{
  display:grid;
  gap:12px;
}

.info-row{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  border-radius:16px;

  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.16);
}

.info-row.is-action{
  width:100%;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

button.info-row.is-action{
  font:inherit;
}

.info-row.is-action .info-v{
  margin-top:0;
}

.info-action-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex:1;
  min-width:0;
}

.info-row.is-action:hover{
  border-color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.10);
  box-shadow:0 0 14px rgba(255,255,255,.16);
}

.info-row.is-highlight{
  border-color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.10);
  box-shadow:0 0 14px rgba(255,255,255,.16);
}

.info-accordion{
  display:none;
  padding:4px 0 6px;
  margin-top:-2px;
}

.info-accordion.is-open{
  display:block;
}

.info-mini-list{
  display:grid;
  gap:10px;
}

.info-mini-list .progress-valid-card{
  margin-bottom:0;
}

.info-empty{
  color:var(--color-text-dim);
  font-size:12px;
  font-weight:700;
  text-align:center;
  padding:6px 0;
}

.info-photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:5px;
}

.info-photo-thumb{
  aspect-ratio:1 / 1;
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  padding:0;
  line-height:0;
  cursor:pointer;
}

.info-photo-thumb img,
.info-photo-thumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.info-more-btn{
  width:100%;
  margin-top:9px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.10);
  box-shadow:0 0 14px rgba(255,255,255,.14);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.info-more-btn:hover{
  background:rgba(255,255,255,.16);
  border-color:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.22);
}

.info-arrow{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 0 10px rgba(255,255,255,.10);
  font-size:16px;
  font-weight:900;
}

.info-k{
  font-size:11px;
  color:var(--color-text-dim);

  text-transform:uppercase;
  letter-spacing:.18em;
  white-space:nowrap;
}

.info-v{
  font-size:13px;
  font-weight:800;
  text-align:right;
  min-width:0;
}


/* ===========================================================
🧊 TOAST CENTER 🧊
----------------------------------------------------------- */

.floating-center{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%) scale(var(--ui-scale));
  transform-origin:center center;

  width:min(440px, calc(100vw - 30px));

  opacity:0;
  pointer-events:none;

  transition:opacity .24s ease;
}

.floating-center.is-visible{
  opacity:1;
}

.center-toast{
  border-radius:22px;
  padding:18px;
  text-align:center;
}

.center-toast-title{
  font-size:19px;
  font-weight:800;
}

.center-toast-welcome-line,
.center-toast-brand-line{
  display:block;
}

.center-toast-welcome-line{
  font-size:23px;
  line-height:1.15;
}

.center-toast-brand-line{
  margin-top:3px;
  font-size:17px;
  line-height:1.2;
}

.center-toast-text{
  margin-top:8px;
  font-size:14.5px;
  color:var(--color-text-dim);
  line-height:1.5;
}

.import-progress-toast{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(var(--ui-scale));
  transform-origin:center center;
  z-index:9500;
  width:min(430px, calc(100vw - 30px));
  border-radius:22px;
  padding:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}

.import-upload-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:12px;
  pointer-events:auto;
}
.import-progress-toast [hidden]{ display:none !important; }
.import-upload-actions button{
  min-height:44px;
  padding:8px 16px;
}
.import-progress-toast.is-visible{
  opacity:1;
  transform:translate(-50%, -50%) scale(var(--ui-scale));
}

.import-progress-title{
  color:#fff;
  font-size:15px;
  font-weight:900;
  text-align:center;
}

.import-progress-count{
  margin-top:6px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.import-progress-grid{
  margin-top:12px;
  width:100%;
  display:grid;
  grid-template-columns:repeat(18, minmax(0, 1fr));
  gap:4px;
}

.import-progress-segment{
  width:auto;
  min-width:0;
  height:16px;
  border-radius:5px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.08);
  box-sizing:border-box;
}

.import-progress-segment.is-filled{
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.78));
  border-color:rgba(255,255,255,.92);
  box-shadow:0 0 8px rgba(255,255,255,.42);
}

.import-progress-time{
  margin-top:10px;
  color:rgba(255,255,255,.66);
  font-size:12px;
  font-weight:700;
  text-align:center;
}


/* ===========================================================
🎯 ÉTAT INACTIF 🎯
----------------------------------------------------------- */

.progress-row-btn{
  opacity:1;
  color:rgba(255,255,255,.6);
}

.progress-row-btn .row-label{
  color:rgba(255,255,255,.6);
}

.progress-row-btn .row-count{
  color:rgba(255,255,255,.6);
}


/* ===========================================================
✅ ÉTAT ACTIF ✅
----------------------------------------------------------- */

.progress-section.is-open .progress-row-btn{
  opacity:1;

  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);

  box-shadow:
  0 0 0 1px rgba(255,255,255,.03),
  0 10px 28px rgba(0,0,0,.18);
}

.progress-section.is-open .row-label{
  color:#fff;
}

.progress-section.is-open .row-count{
  color:#fff;
}


/* ===========================================================
✨ HOVER PROGRESSION ✨
----------------------------------------------------------- */

.progress-row-btn:hover{
  opacity:1;

  border-color:rgba(255,255,255,.14);

  box-shadow:
  0 0 0 1px rgba(255,255,255,.03),
  0 10px 28px rgba(0,0,0,.18);

  background:rgba(255,255,255,.055);
}

.progress-row-btn:hover .row-label{
  color:#fff;
}

.progress-row-btn:hover .row-count{
  color:#fff;
}


/* ===========================================================
✅ FLÈCHE ACTIVE ✅
----------------------------------------------------------- */

.progress-section.is-open .row-arrow{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  color:#fff;
}

.progress-row-btn:hover .row-arrow{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.1);
  color:#fff;
}


/* ===========================================================
📊 SYSTEM RESEAUX  📊
-----------------------------------------------------------

Gère:

- La page d'accueil et les pages internes Communauté
- Publication
- Story
- Groupe
- Reels

=========================================================== */

/* ===========================================================
BLOC CSS 04.06 - AUTH / CONNEXION

Gere :

- Fenetre de connexion et creation de compte
- Profil memorise et champs utilisateur
- Etats de verification et erreurs

----------------------------------------------------------- */


.auth-panel{
  z-index:20000;
}

.auth-panel-box{
  width:var(--panel-width);
}

.auth-panel-body{
  display:grid;
  gap:6px;
  align-content:start;
}

.auth-account-choices{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:10px;
  width:100%;
  height:156px;
}

.auth-account-choices[hidden]{
  display:none;
}

.auth-remembered-account{
  min-width:0;
  height:156px;
  margin:0;
  padding:0;
  display:grid;
  grid-template-rows:118px 38px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:#fff;
  cursor:pointer;
  text-align:inherit;
  box-sizing:border-box;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.auth-remembered-account:hover,
.auth-remembered-account:focus-visible,
.auth-account-choices:not(.is-using-other) .auth-remembered-account{
  border-color:#fff;
  background:rgba(255,255,255,.07);
  box-shadow:0 0 16px rgba(255,255,255,.16), inset 0 0 14px rgba(255,255,255,.035);
  outline:none;
}

.auth-remembered-account:active{
  transform:scale(.985);
}

.auth-profile-card{
  width:100%;
  height:118px;
  min-height:118px;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  border:0;
  border-radius:14px;
  background:transparent;
  overflow:hidden;
  box-shadow:none;
  box-sizing:border-box;
}

.auth-profile-card.is-empty{
  border:1px dashed rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  box-shadow:none;
}

.auth-profile-card[hidden]{
  display:none;
}

#authRememberAvatar.auth-profile-photo.profile-photo-slot{
  width:100%;
  height:100%;
  min-height:0;
  box-sizing:border-box;
  border-radius:14px;
}

.auth-profile-photo.profile-photo-slot.is-empty{
  border:1px dashed rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.78);
  font-size:30px;
  font-weight:500;
}

.auth-profile-name{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-top:1px solid rgba(255,255,255,.12);
  line-height:1.15;
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0;
  box-sizing:border-box;
}

.auth-profile-name[hidden]{
  display:none;
}

.auth-card{
  display:grid;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
}

.auth-account-choices:not([hidden]) + .auth-card{
  margin-top:10px;
}

.auth-country-wrap{
  position:relative;
  display:block;
  width:100%;
}

.auth-country-wrap .profile-edit-country-suggestions{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 5px);
  z-index:120;
  max-height:230px;
  overflow:auto;
  padding:5px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(0,0,0,.96);
  box-shadow:0 14px 30px rgba(0,0,0,.45);
  box-sizing:border-box;
  scrollbar-width:none;
}

.auth-country-wrap .profile-edit-country-suggestions.is-open{
  display:block;
}

.auth-country-wrap .profile-edit-country-suggestion{
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:0 10px;
  margin:0 0 4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:rgba(255,255,255,.055);
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-align:left;
  box-sizing:border-box;
}

.auth-country-wrap .profile-edit-country-suggestion:last-child{
  margin-bottom:0;
}

.auth-country-wrap .profile-edit-country-suggestion:hover,
.auth-country-wrap .profile-edit-country-suggestion:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.09);
  box-shadow:0 0 12px rgba(255,255,255,.14);
  outline:none;
}

.auth-register-fields{
  display:grid;
  gap:10px;
}

.auth-register-fields[hidden]{
  display:none;
}

.auth-field{
  display:grid;
  gap:8px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
}

.auth-field[hidden]{
  display:none;
}

.auth-card > .auth-field + .auth-field{
  margin-top:4px;
}

#authSubmitBtn.is-checking{
  border-color:#fff;
  background:rgba(255,255,255,.09);
  color:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.20), inset 0 0 14px rgba(255,255,255,.04);
}

#authSubmitBtn:active,
#authSubmitBtn:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.09);
  color:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.20), inset 0 0 14px rgba(255,255,255,.04);
  outline:none;
}

.auth-verification-dots{
  width:18px;
  display:inline-block;
  text-align:left;
}

.auth-field > span{
  line-height:1.1;
}

.auth-input{
  width:100%;
  min-height:36px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-align:right;
  outline:none;
  box-sizing:border-box;
}

.auth-input:focus{
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 14px rgba(255,255,255,.16);
}

.auth-input.is-invalid{
  border-color:rgba(255,77,77,.92);
  box-shadow:0 0 0 1px rgba(255,77,77,.22), 0 0 14px rgba(255,77,77,.18);
}

.auth-email-wrap{
  position:relative;
  display:block;
  width:100%;
}

.auth-email-suggestion{
  position:absolute;
  z-index:30;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  min-height:40px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:12px;
  background:rgba(8,8,8,.94);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.42), inset 0 0 14px rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}

.auth-email-suggestion[hidden]{
  display:none;
}

.auth-email-suggestion:hover,
.auth-email-suggestion:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.10);
  box-shadow:0 0 16px rgba(255,255,255,.16), 0 12px 28px rgba(0,0,0,.42);
  outline:none;
}

.auth-email-suggestion-icon{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:900;
}

.auth-email-suggestion-value{
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-size:12px;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.auth-password-wrap{
  position:relative;
  display:block;
  width:100%;
}

.auth-password-wrap .auth-input{
  padding-left:46px;
}

.auth-password-toggle{
  position:absolute;
  top:50%;
  left:5px;
  width:34px;
  height:30px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:rgba(255,255,255,.76);
  cursor:pointer;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible{
  background:rgba(255,255,255,.09);
  color:#fff;
  outline:none;
}

.auth-password-toggle svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.auth-password-toggle[aria-pressed="true"] .auth-password-eye-slash{
  display:none;
}

.auth-remember{
  width:100%;
  min-height: 26px;
  margin-top:-2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  text-align:center;
}

.auth-remember[hidden]{
  display:none;
}

.auth-remember-dot{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.34);
  border-radius:5px;
  background:transparent;
  box-sizing:border-box;
}

.auth-remember.is-active .auth-remember-dot{
  border-color:#fff;
  background:rgba(255,255,255,.10);
  box-shadow:0 0 12px rgba(255,255,255,.22), inset 0 0 8px rgba(255,255,255,.05);
}

.auth-remember.is-active .auth-remember-dot::before{
  content:'\2713';
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height: 1;
}

.auth-remember[aria-pressed="true"] span{
  color:#fff;
}


.auth-error{
  display:none;
  padding:9px 10px;
  border:1px solid rgba(255,70,70,.9);
  border-radius:12px;
  background:rgba(255,70,70,.10);
  color:#fff;
  box-shadow:0 0 14px rgba(255,70,70,.18);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}

.auth-error.is-open{
  display:block;
}

.auth-link-btn{
  width:100%;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.70);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  padding:4px 0;
}

.auth-link-btn:hover{
  color:#fff;
}

/* ===========================================================
BLOC CSS 04.07 - PARAMETRES / ACCUEIL

Gere :

- Liste principale des sections Parametres
- Lignes, icones et fleches de navigation

----------------------------------------------------------- */

.settings-panel-body{
  display:block;
}

.settings-panel-list{
  display:grid;
  gap:10px;
}

.settings-panel-row{
  width:100%;
  grid-template-columns:auto 1fr auto;
  text-align:left;
  cursor:pointer;
  pointer-events:auto;
}

.settings-panel-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 30px;
}

.settings-panel-content{
  display:grid;
  gap:3px;
  min-width:0;
}

.settings-panel-title{
  color:#fff;
  font-size:13px;
  font-weight:900;
}

#settingsPanel .settings-panel-title,
#preferencesPanel .viewer-visibility-row{
  font-size:14.5px;
}



.settings-panel-arrow{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  flex:0 0 30px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}

.settings-panel-row:hover .settings-panel-arrow{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.1);
  color:#fff;
}

/* ===========================================================
BLOC CSS 04.08 - PARAMETRES / COMPTE UTILISATEUR

Gere :

- Fiche compte utilisateur
- Champs de lecture et champs de modification
- Validation visuelle des informations obligatoires

----------------------------------------------------------- */

.settings-account-card{
  display:grid;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.settings-account-row{
  display:grid;
  gap:8px;
  padding:0;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
}

.settings-account-row.is-invalid .settings-account-value,
.settings-account-row.is-invalid .settings-account-input,
.settings-account-row.is-invalid .settings-account-country-wrap{
  border-color:rgba(255,77,77,.92);
  box-shadow:0 0 0 1px rgba(255,77,77,.22), 0 0 14px rgba(255,77,77,.18);
}

.settings-account-label{
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
}

.settings-account-value{
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-align:right;
  box-sizing:border-box;
  max-width:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.settings-account-value.has-country-flag{
  position:relative;
  justify-content:flex-end;
  padding-left:40px;
}

.settings-account-value.has-country-flag img{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:16px;
  object-fit:cover;
}

.settings-account-input{
  width:100%;
  min-height:36px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-align:right;
  outline:none;
  box-sizing:border-box;
}


.settings-account-country-wrap{
  width:100%;
  position:relative;
  display:block;
}

.settings-account-country-wrap .settings-account-input{
  padding-left:40px;
}

.settings-account-country-flag{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
}

.settings-account-country-flag img{
  width:22px;
  height:16px;
  object-fit:cover;
}

.settings-account-country-wrap .profile-edit-country-suggestions{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 5px);
  z-index:80;
  padding:5px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(0,0,0,.94);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  max-height:230px;
  overflow:auto;
  box-sizing:border-box;
  scrollbar-width:none;
}

.settings-account-country-wrap .profile-edit-country-suggestions::-webkit-scrollbar{
  width:0;
  height:0;
}

.settings-account-country-wrap .profile-edit-country-suggestions.is-open{
  display:block;
}

.settings-account-country-wrap .profile-edit-country-suggestion{
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:0 10px;
  margin:0 0 4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:rgba(255,255,255,.055);
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-align:left;
  box-sizing:border-box;
}

.settings-account-country-wrap .profile-edit-country-suggestion:last-child{
  margin-bottom:0;
}

.settings-account-country-wrap .profile-edit-country-suggestion:hover{
  border-color:rgba(47,143,255,.55);
  background:rgba(47,143,255,.20);
}
.settings-account-input:focus{
  border-color:rgba(47,143,255,.82);
  box-shadow:0 0 0 1px rgba(47,143,255,.18);
}

.settings-account-delete-card{
  display:grid;
  gap:10px;
  margin-top: 20px;
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  overflow:hidden;
}

.settings-account-delete-title{
  display:block;
  margin:-10px -10px 0;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-align:center;
}

.settings-account-delete-text{
  margin:0;
  color:rgba(255,255,255,.70);
  font-size:12px;
  font-weight:750;
  line-height:1.35;
}

.settings-account-delete-action{
  width:100%;
  min-height:38px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,70,70,.45);
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.settings-account-delete-action:hover{
  background:rgba(255,70,70,.58);
  border-color:rgba(255,255,255,.22);
}
/* ===========================================================
BLOC CSS 04.08.01 - Suppression compte futuriste
=========================================================== */
#settingsAccountPanel .settings-account-delete-action,
.settings-account-delete-action{
  border-color:rgba(255,70,70,.9);
  background:rgba(255,70,70,.10);
  color:#fff;
  box-shadow:0 0 14px rgba(255,70,70,.18);
}
#settingsAccountPanel .settings-account-delete-action:hover,
.settings-account-delete-action:hover{
  border-color:rgba(255,90,90,1);
  background:rgba(255,70,70,.16);
  box-shadow:0 0 16px rgba(255,70,70,.24);
}
/* ===========================================================
BLOC CSS 04.08.02 - Compte utilisateur : champs et validation blancs futuristes
=========================================================== */
#settingsPanel .settings-account-input:focus{
  border-color:rgba(255,255,255,.92) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.20), 0 0 14px rgba(255,255,255,.16) !important;
}
#settingsAccountConfirmBtn.is-ready{
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#settingsAccountConfirmBtn.is-ready:hover{
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
#settingsPanel .settings-account-country-wrap .profile-edit-country-suggestion:hover,
#settingsPanel .settings-account-country-wrap .profile-edit-country-suggestion:focus-visible,
#settingsPanel .settings-account-country-wrap .profile-edit-country-suggestion.is-selected{
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
  outline:none;
}

/* ===========================================================
BLOC CSS 04.09 - PARAMETRES / STOCKAGE ET EXPORT

Gere :

- Resume de l espace utilise
- Details photos/videos
- Bouton et etats d export des donnees

----------------------------------------------------------- */

.settings-storage-card{
  display:grid;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  overflow:hidden;
}

.settings-storage-information{
  margin-top:10px;
  gap:0;
}

.settings-storage-information .settings-storage-head{
  justify-content:center;
  text-align:center;
}

.settings-storage-information-text{
  display:grid;
  gap:10px;
  padding-top:10px;
  color:rgba(255,255,255,.76);
  font-size:11px;
  font-weight:700;
  line-height:1.45;
}

.settings-storage-information-text p{
  margin:0;
}

.settings-storage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:-10px -10px 0;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}

.settings-storage-title{
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.settings-storage-progress{
  position:relative;
  min-height:36px;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}

.settings-storage-progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:inherit;
  transition:width .24s ease;
}

.settings-storage-progress.is-ok .settings-storage-progress-fill{
  background:linear-gradient(90deg, rgba(47,143,255,.86), rgba(84,166,255,.94));
}

.settings-storage-progress.is-warning .settings-storage-progress-fill{
  background:linear-gradient(90deg, rgba(255,160,36,.88), rgba(255,190,70,.96));
}

.settings-storage-progress.is-danger .settings-storage-progress-fill{
  background:linear-gradient(90deg, rgba(255,77,77,.88), rgba(255,105,105,.96));
}

.settings-storage-progress-text{
  position:relative;
  z-index:1;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.settings-storage-total{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.settings-storage-details{
  display:grid;
  gap:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  overflow:hidden;
}

.settings-storage-details + .settings-storage-progress{
  margin-top:-2px;
}

.settings-storage-detail{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.74);
  font-size:12px;
  font-weight:800;
}

.settings-storage-detail + .settings-storage-detail{
  border-top:1px solid rgba(255,255,255,.08);
}

.settings-storage-detail:last-child{
  background:rgba(47,143,255,.07);
}

.settings-storage-detail > span{
  min-width:0;
  line-height:1.4;
}

.settings-storage-detail strong{
  flex-shrink:0;
  white-space:nowrap;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.settings-storage-export{
  margin-top:10px;
  display:grid;
  gap:8px;
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:800;
  text-align:center;
}

.settings-storage-export-button{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid #2f8fff;
  background:#2f8fff;
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.settings-storage-export-dots{
  width:18px;
  display:inline-block;
  text-align:left;
}

.settings-storage-export-button.is-export-busy,
.settings-storage-export-button:disabled{
  background:rgba(255,255,255,.06);
  border-color:rgba(47,143,255,.52);
  color:rgba(255,255,255,.9);
  cursor:default;
  opacity:1;
}

.settings-storage-export-button.is-export-ready{
  background:#2f8fff;
  border-color:#2f8fff;
  color:#fff;
  cursor:pointer;
}

/* ===========================================================
BLOC CSS 04.09.01 - STOCKAGE : ACTION D’EXPORT
=========================================================== */
.settings-storage-export-button:not(:disabled):not(.is-export-busy),
.settings-storage-export-button.is-export-ready{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
.settings-storage-export-button:not(:disabled):not(.is-export-busy):hover,
.settings-storage-export-button.is-export-ready:hover{
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
/* ===========================================================
BLOC CSS 04.10 - APPAREIL PHOTO

Gere :

- Fenetre camera
- Capture photo/video
- Dernier media capture et compteur video

----------------------------------------------------------- */


.camera-panel-box{
  position:relative;
}

.camera-top-band{
  width:100%;
  height:16px;
  min-height:16px;
  flex:0 0 16px;
  background:#000;
}

.camera-options-menu .ui-icon-btn.is-active{
  border-color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.18);
}

.camera-panel-body{
  padding:0;
}

.camera-stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:180px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
}

.camera-stage::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:#000;
  opacity:0;
}

.camera-stage.is-flashing::after{
  animation:none;
}

@keyframes cameraFlash{
  0%{ opacity:0; }
  18%{ opacity:.78; }
  48%{ opacity:.78; }
  100%{ opacity:0; }
}

.camera-stage.is-flashing .camera-preview{
  animation:cameraPreviewBlink .26s ease-out;
}

@keyframes cameraPreviewBlink{
  0%{ opacity:1; }
  18%{ opacity:.05; }
  48%{ opacity:.05; }
  100%{ opacity:1; }
}

.camera-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.camera-crop-frame{
  position:absolute;
  z-index:3;
  pointer-events:none;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 0 0 200vmax rgba(0,0,0,.38);
  opacity:0;
  transition:left .2s ease, top .2s ease, width .2s ease, height .2s ease, opacity .18s ease;
}

.camera-stage.is-ready .camera-crop-frame{
  opacity:1;
}

.camera-stage.is-video-mode .camera-crop-frame{
  opacity:0;
}

.camera-crop-frame.is-widescreen{
  border-color:transparent;
}

.camera-message{
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-align:center;
}

.camera-stage.is-ready .camera-message{
  display:none;
}

.camera-mode-controls{
  position:absolute;
  left:50%;
  bottom:64px;
  z-index:6;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:70px 58px 70px;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.camera-capture-btn{
  position:relative;
  transform:translateY(-20px);
  width:52px;
  height:52px;
  border-radius:999px;
  border:3px solid transparent;
  background:transparent;
  background-clip:padding-box;
  box-shadow:0 0 0 3px #fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  outline:none;
  justify-self:center;
}

.camera-capture-btn:focus,
.camera-capture-btn:focus-visible{
  outline:none;
}

.camera-capture-btn::before{
  content:'';
  position:absolute;
  inset:3px;
  display:block;
  border-radius:999px;
  background:#fff;
  pointer-events:none;
}

.camera-capture-btn.is-video-mode::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M26 0a26 26 0 1 1 0 52a26 26 0 0 1 0-52zM21 16v20l17-10z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M26 0a26 26 0 1 1 0 52a26 26 0 0 1 0-52zM21 16v20l17-10z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.camera-capture-btn.is-video-mode.is-recording::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M26 0a26 26 0 1 1 0 52a26 26 0 0 1 0-52zM18 18h16v16H18z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M26 0a26 26 0 1 1 0 52a26 26 0 0 1 0-52zM18 18h16v16H18z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.camera-capture-btn.is-recording::before{
  background:#ff3b3b;
}

.camera-capture-btn.is-recording{
  box-shadow:0 0 0 3px #ff3b3b;
}

.camera-last-photo-btn{
  position:absolute;
  left:15px;
  bottom:91px;
  z-index:5;
  width:42px;
  height:42px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  cursor:pointer;
}

.camera-last-photo-btn img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.camera-last-photo-btn.is-empty{
  opacity:.42;
  pointer-events:none;
}

.camera-last-photo-btn.is-empty img{
  display:none;
}

.camera-video-timer{
  position:absolute;
  left:50%;
  top:24px;
  transform:translateX(-50%);
  z-index:5;
  min-height:28px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.camera-video-timer.is-visible{
  display:flex;
}

.camera-video-timer.is-recording{
  border-color:#ff3b3b;
  color:#ff3b3b;
}

.camera-video-timer.is-countdown{
  display:flex;
  top:50%;
  min-width:118px;
  min-height:118px;
  padding:0 24px;
  transform:translate(-50%, -50%);
  border-color:rgba(255,255,255,.2);
  border-radius:26px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:64px;
}

.camera-mode-btn{
  width:70px;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(0,0,0,.48);
  color:rgba(255,255,255,.76);
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.camera-mode-btn.is-active{
  border-color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.18);
}

.camera-options-wrap{
  position:relative;
  display:flex;
  justify-content:flex-end;
}

.camera-options-menu{
  position:absolute;
  right:15px;
  top:50%;
  bottom:auto;
  z-index:12;
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  opacity:0;
  visibility:hidden;
  transform:translate(8px, -50%);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.camera-options-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:translate(0, -50%);
  pointer-events:auto;
}

.camera-options-menu .ui-icon-btn{
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.camera-options-menu .camera-format-btn{
  font-size:10px;
  font-weight:900;
  letter-spacing:-.2px;
}

.camera-options-menu .camera-format-btn[hidden]{
  display:none;
}

/* ===========================================================
BLOC CSS 04.11 - PARAMETRES / ABONNEMENT ET FORFAIT

Gere :

- Abonnement actuel
- Liste des forfaits
- Offre cadeau et annulation

----------------------------------------------------------- */

.settings-plan-summary{
  min-height:44px;
  display:grid;
  gap:8px;
  margin-bottom:10px;
  padding:12px;
  border:1px solid rgba(47,143,255,.72);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  box-shadow:0 0 0 1px rgba(47,143,255,.24) inset;
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:800;
  overflow:hidden;
}

.settings-plan-summary strong{
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.settings-plan-list{
  display:grid;
  gap:10px;
}

.settings-plan-card{
  display:grid;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  overflow:hidden;
}

.settings-plan-card.is-active{
  border-color:rgba(47,143,255,.72);
  box-shadow:0 0 0 1px rgba(47,143,255,.24) inset;
}

.settings-plan-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:-10px -10px 0;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}

.settings-plan-summary > .settings-plan-head{
  margin:-12px -12px 0;
}

.settings-plan-name{
  margin:0;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.settings-plan-price{
  color:#2f8fff;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.settings-plan-storage{
  color:#fff;
  font-size:18px;
  font-weight:950;
}

.settings-plan-perks{
  margin:0;
  padding-left:16px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:750;
  line-height:1.35;
}

.settings-about-text{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:750;
  line-height:1.35;
}

.settings-about-commitments{
  display:grid;
  gap:0;
  margin:2px -10px -10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.settings-about-commitment{
  display:grid;
  gap:4px;
  padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:transparent;
}

.settings-about-commitment:last-child{
  border-bottom:1px solid var(--glass-border);
}

.settings-about-commitment-title{
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1.25;
}

.settings-about-commitment-text{
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:11px;
  font-weight:700;
  line-height:1.4;
}

.settings-plan-action{
  width:100%;
  min-height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.settings-plan-action:not(:disabled){
  background:#2f8fff;
  border-color:#2f8fff;
  cursor:pointer;
}

.settings-plan-action:disabled{
  opacity:.72;
}

/* ===========================================================
BLOC CSS 04.11.01 - ABONNEMENTS : PRÉSENTATION DES FORFAITS
=========================================================== */
.settings-plan-summary{
  border-color:rgba(255,255,255,.88) !important;
  box-shadow:0 0 14px rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.12) inset !important;
}
.settings-plan-card:not(.is-active){
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
.settings-plan-card.is-active{
  border-color:rgba(255,255,255,.88) !important;
  background:color-mix(in srgb, #fff 8%, rgba(255,255,255,.04)) !important;
  box-shadow:0 0 14px rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.12) inset !important;
}
.settings-plan-price{
  color:#fff !important;
  text-shadow:0 0 10px rgba(255,255,255,.22);
}
.settings-plan-action:not(:disabled){
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
.settings-plan-action:not(:disabled):not(.is-danger):hover{
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
.settings-plan-action.is-danger:not(:disabled){
  border-color:rgba(255,70,70,.9) !important;
  background:rgba(255,70,70,.10) !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
.settings-plan-action.is-danger:not(:disabled):hover{
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}
.settings-plan-action:disabled{
  border-color:rgba(255,255,255,.15) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}
/* ===========================================================
BLOC CSS 04.12 - PARAMETRES / CORBEILLE

Gere :

- Etat vide
- Liste des elements retires
- Actions restaurer et supprimer

----------------------------------------------------------- */

.settings-trash-empty{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:850;
  text-align:center;
}

.settings-trash-list{
  display:grid;
  gap:10px;
}

.settings-trash-row{
  display:grid;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
}











/* ===========================================================
BLOC CSS 04.13 - CONTACT / COMMUNAUTE

Gere :

- Accueil Contact
- Rails de publications, stories, reels et groupes
- Cartes et boutons de navigation communautaire

----------------------------------------------------------- */

.network-home{
  display:grid;
  gap:0;
}

.network-block{
  display:grid;
  gap:0;
}

.network-content-rail{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:1px 1px 14px;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  touch-action:pan-x pan-y;
  cursor:grab;
  user-select:none;
}

#contactsPanelBody > .network-home > .network-block:first-child > .network-content-rail,
#networkPanelBody > .network-home > .network-block:first-child > .network-content-rail{
  padding-top:0;
}

.network-content-rail.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

/* Let cards scroll to the panel edges; keep the initial inset inside the rail. */
#contactsPanelBody > .network-home > .network-block > .network-content-rail,
#networkPanelBody > .network-home > .network-block > .network-content-rail,
#souvenirsPanel .souvenir-home > .network-block > .network-content-rail,
#countryAlbumPanel .souvenir-home > .network-block > .network-content-rail{
  width:calc(100% + 28px);
  min-width:0;
  margin-left:-14px;
  margin-right:-14px;
  padding-left:15px;
  padding-right:15px;
  box-sizing:border-box;
  scroll-padding-inline:15px;
}

.network-content-rail::-webkit-scrollbar{
  display:none;
}

.network-create-card{
  --network-accent:#2f8fff;
  flex:0 0 112px;
  width:112px;
  height:202px;
  scroll-snap-align:start;
}

/* Keep the plus in the upper-middle slot; distribute label and count below. */
.network-create-card:has(> .profile-see-all-count) > .profile-story-create-plus{
  position:absolute;
  top:43px;
  left:50%;
  transform:translateX(-50%);
}

.network-create-card:has(> .profile-see-all-count) > .profile-story-create-label{
  position:absolute;
  top:111px;
  bottom:39px;
  left:8px;
  right:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0;
}

.network-create-card > .profile-see-all-count{
  position:absolute;
  left:50%;
  bottom:19px;
  transform:translateX(-50%);
}

.network-create-card .profile-story-create-plus{
  border-color:var(--network-accent);
  color:#fff;
  box-shadow:0 0 14px color-mix(in srgb, var(--network-accent) 46%, transparent);
}

.network-create-card.is-publication{ --network-accent:#54e636; }
.network-create-card.is-story{ --network-accent:#2f8fff; }
.network-create-card.is-group{ --network-accent:#FFD84D; }
.network-create-card.is-reel{ --network-accent:#AEB6C2; }
.network-create-card.is-contact{ --network-accent:#FF1744; }


.network-create-card:hover{
  border-color:var(--network-accent);
  background:color-mix(in srgb, var(--network-accent) 10%, rgba(255,255,255,.035));
}

.contacts-search-shell{
  width:100%;
  min-height:40px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  box-sizing:border-box;
  color:#fff;
}

.contacts-search-icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.72);
  font-size:22px;
  font-weight:900;
  line-height:1;
  transform:translateY(-3px);
}

.contacts-search-input{
  width:100%;
  min-width:0;
  height:38px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:750;
}

.contacts-search-input::placeholder{
  color:rgba(255,255,255,.48);
}

.contacts-search-input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-left:4px;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2L2 10' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position:center;
  background-repeat:no-repeat;
  cursor:pointer;
  opacity:.72;
}

.contacts-search-results{
  margin-top:10px;
}

.contacts-directory-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  gap:10px;
}

.contacts-directory-card{
  position:relative;
  width:100%;
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:
  radial-gradient(circle at 18% 15%,rgba(255,255,255,.08),transparent 42%),
  rgba(255,255,255,.035);
  box-sizing:border-box;
  color:#fff;
}

.contacts-directory-card.is-profile-link{
  cursor:pointer;
}

.contacts-directory-card.is-profile-link:hover,
.contacts-directory-card.is-profile-link:focus-visible{
  border-color:rgba(255,255,255,.28);
  background:
  radial-gradient(circle at 18% 15%,rgba(255,255,255,.12),transparent 42%),
  rgba(255,255,255,.055);
  outline:none;
}

.contacts-directory-card.has-message-shortcut{
  display:block;
  min-height:84px;
  padding-right:58px;
}

.contacts-directory-message{
  position:absolute;
  right:10px;
  bottom:10px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:17px;
  cursor:pointer;
}

#publicationComposerContent .publication-composer-preview{
  border-color:var(--publication-composer-accent);
}

#publicationComposerContent .publication-composer-count.network-media-info{
  border:1px solid var(--publication-composer-accent);
}

.publication-composer-change-media{
  position:absolute;
  left:50%;
  bottom:8px;
  z-index:4;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 24px);
  padding:7px 13px;
  border:1px solid var(--publication-composer-accent);
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 0 14px color-mix(in srgb, var(--publication-composer-accent) 18%, transparent);
}

.contacts-directory-message:hover,
.contacts-directory-message:focus-visible{
  border-color:#2f8fff;
  background:rgba(47,143,255,.14);
  outline:none;
}

.contacts-directory-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  align-items:center;
  gap:10px;
}

.contacts-directory-filter-row{
  min-width:0;
  max-width:100%;
  margin:10px 0 2px;
  cursor:grab;
  user-select:none;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
}

.contacts-directory-filter-row.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}

#contactsPanel:not(.is-groups-view) .contacts-directory-filter-row{
  --content-feed-accent:#FF1744;
}

#contactsPanel.is-groups-view .contacts-directory-filter-row{
  --content-feed-accent:#FFD84D;
}

.contacts-add-trigger{
  position:relative;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:16px;
  cursor:pointer;
}

.contacts-add-trigger:hover{
  border-color:#2f8fff;
  background:rgba(47,143,255,.12);
}

.contacts-add-trigger-icon{
  position:relative;
  width:26px;
  height:26px;
  display:block;
  pointer-events:none;
}

.contacts-add-trigger-silhouette{
  position:absolute;
  left:1px;
  top:2px;
  width:22px;
  height:22px;
  display:block;
  object-fit:contain;
  opacity:.9;
}

.contacts-add-trigger-plus{
  position:absolute;
  right:-1px;
  top:-2px;
  color:#fff;
  font-size:15px;
  font-weight:950;
  line-height:1;
  text-shadow:0 0 6px rgba(255,255,255,.72), 0 1px 2px #000;
}

.contacts-add-trigger-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border:2px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:#2f8fff;
  color:#fff;
  box-sizing:border-box;
  font-size:10px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}

.contacts-add-content{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.contacts-add-content.is-searching > :not(.contacts-search-discovery-results){
  display:none;
}

.contacts-new-results .contacts-directory-actions.is-single{
  grid-template-columns:minmax(0,1fr);
}

.contacts-new-results .profile-stat-card-action-btn:disabled{
  cursor:default;
  opacity:1;
}

.contacts-new-results.is-hidden{
  display:none;
}

.contacts-new-results:not(.is-hidden){
  display:flex;
  align-items:stretch;
  gap:10px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 2px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action:pan-x;
}

.contacts-new-results::-webkit-scrollbar{
  display:none;
}

.contacts-new-results .contacts-directory-card{
  flex:0 0 250px;
  width:250px;
  padding:8px 10px;
  scroll-snap-align:start;
}

.contacts-new-results .contacts-directory-main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
  "name"
  "avatar"
  "location"
  "mutual";
  justify-items:center;
  align-items:center;
  gap:4px;
  min-height:0;
}

.contacts-new-results .contacts-directory-info{
  display:contents;
}

.contacts-new-results .contacts-directory-name{
  grid-area:name;
  width:100%;
  min-width:0;
  margin-bottom:4px;
  text-align:center;
  white-space:nowrap;
}

.contacts-new-results .contacts-directory-avatar{
  grid-area:avatar;
  width:100%;
  height:180px;
  border-radius:12px;
  font-size:38px;
}

.contacts-new-results .contacts-directory-location{
  grid-area:location;
  width:100%;
  justify-content:center;
}

.contacts-new-results .contacts-directory-mutual{
  grid-area:mutual;
  width:100%;
  text-align:center;
}

.contacts-new-results .contacts-directory-actions{
  width:100%;
  margin-top:6px;
}

.contacts-new-results .contacts-directory-action{
  height:34px;
  min-height:34px;
  padding:0 8px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.contacts-add-section-title{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  width:100%;
  box-sizing:border-box;
}

.contacts-directory-grid:not(.is-hidden) + .contacts-add-section-title{
  margin-top:4px;
}

.contacts-add-section-line{
  height:0;
  min-height:0;
  max-height:0;
  border:0;
  border-top:1px solid currentColor;
  background:none;
}

.contacts-add-section-label{
  min-width:148px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:transparent;
  box-sizing:border-box;
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}





.contacts-directory-main{
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:62px;
}

.contacts-directory-main.is-profile-link{
  cursor:pointer;
}

.contacts-directory-avatar{
  position:relative;
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22);
  border-radius:12px;
  background:rgba(255,255,255,.08) center / cover no-repeat;
  box-sizing:border-box;
  color:#fff;
  font-size:22px;
  font-weight:950;
  line-height:1;
  overflow:hidden;
}

/* Overlay keeps the photo visible beneath the translucent notification-style frame,
whether the avatar uses a background image or an embedded image/video. */
.contacts-directory-avatar::after,
.discussion-card-avatar::after,
.conversation-head-avatar::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  box-sizing:border-box;
  border:2px solid rgba(0,0,0,.68);
  border-radius:inherit;
  pointer-events:none;
}

.contacts-directory-info{
  min-width:0;
  display:grid;
  align-content:center;
  gap:6px;
}

.contacts-directory-name{
  overflow:hidden;
  color:#fff;
  font-size:16px;
  font-weight:950;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.contacts-directory-location,
.contacts-directory-mutual{
  overflow:hidden;
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:750;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.contacts-directory-location{
  display:flex;
  align-items:center;
  gap:6px;
}

.contacts-directory-flag{
  flex:0 0 auto;
  width:18px;
  height:10px;
  border-radius:2px;
  object-fit:cover;
}

.contacts-directory-mutual{
  color:rgba(255,255,255,.58);
}

.contacts-directory-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  margin-top:10px;
}

.contacts-directory-actions.is-single{
  grid-template-columns:minmax(0,1fr);
}

.contacts-request-time{
  margin-top:7px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  font-weight:750;
  line-height:1.2;
  text-align:center;
}

.contacts-directory-action{
  min-width:0;
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.contacts-directory-action:hover{
  background:rgba(255,255,255,.09);
}

/* ===========================================================
DISCUSSIONS ET CONVERSATION
=========================================================== */

.discussions-panel-body{ display:flex; flex-direction:column; gap:10px; }
.discussions-search-shell{ flex:0 0 auto; }
.discussions-list{ display:flex; flex-direction:column; gap:10px; }

.discussion-card{
  position:relative; width:100%; display:block;
  padding:10px;
  border:1px solid rgba(255,255,255,.14); border-radius:12px;
  background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.08),transparent 42%),rgba(255,255,255,.035);
  box-sizing:border-box;
}

.discussion-card:hover{
  border-color:rgba(255,255,255,.28);
  background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.12),transparent 42%),rgba(255,255,255,.055);
}

.discussion-card-main{
  width:100%; min-width:0; min-height:62px; display:grid;
  grid-template-columns:62px minmax(0,1fr);
  align-items:center; gap:12px; padding:0; border:0;
  background:transparent; color:inherit; text-align:left; cursor:pointer;
}

.discussion-card.has-unread .discussion-card-main{
  padding-right:30px;
}

.discussion-card.has-side-status .discussion-card-main{
  padding-right:30px;
}

.contact-online-indicator{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  display:none;
  width:11px;
  height:11px;
  border:2px solid rgba(255,255,255,.90);
  border-radius:50%;
  background:rgba(255,255,255,.96);
  box-shadow:0 0 10px rgba(255,255,255,.72), inset 0 0 5px rgba(255,255,255,.45);
  box-sizing:content-box;
}

.contact-online-indicator.is-online{
  display:block;
}

.discussion-card .contact-online-indicator{
  top:8px;
  right:8px;
}

.discussion-card-avatar{
  position:relative;
  width:62px; height:62px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:0; border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22);
  background:rgba(255,255,255,.08) center / cover no-repeat;
  box-sizing:border-box; color:#fff; font-size:22px; font-weight:950; line-height:1;
}

.discussion-card-copy{ min-width:0; display:grid; align-content:center; gap:6px; }
.discussion-card-name{
  overflow:hidden; color:#fff; font-size:16px; font-weight:950;
  line-height:1.15; text-overflow:ellipsis; white-space:nowrap;
}
.discussion-card-preview{
  overflow:hidden; color:rgba(255,255,255,.72); font-size:12px; font-weight:750;
  line-height:1.2; text-overflow:ellipsis; white-space:nowrap;
}
.discussion-card-meta{
  display:flex; align-items:center; gap:7px; overflow:hidden;
  color:rgba(255,255,255,.58); font-size:12px; font-weight:750;
  line-height:1.2; text-overflow:ellipsis; white-space:nowrap;
}
.discussion-unread-badge{
  position:absolute; right:8px; bottom:8px; z-index:1;
  min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px; border:2px solid rgba(255,255,255,.12); border-radius:999px;
  background:#2f8fff; color:#fff; font-size:10px; font-weight:800; line-height:1;
}
.discussions-empty,.conversation-empty,.discussions-loading{
  min-height:150px; display:flex; align-items:center; justify-content:center;
  padding:20px; color:rgba(255,255,255,.58); font-size:13px;
  font-weight:800; text-align:center; box-sizing:border-box;
}

.conversation-panel-head{
  min-height:58px;
  align-items:stretch;
  text-align:center;
}
.conversation-head-profile{
  width:100%; max-width:100%; display:flex; align-items:center;
  justify-content:flex-start; gap:10px; margin:0;
  padding:0; border:0; background:transparent; color:#fff; cursor:pointer;
}
.conversation-head-avatar{
  position:relative;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px solid transparent; border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.14);
  background:rgba(255,255,255,.08); background-size:cover; background-position:center;
  color:#fff; font-size:13px; font-weight:950;
}
.conversation-head-avatar::after{
  border-width:1px;
}
.conversation-head-copy{ min-width:0; display:grid; gap:3px; text-align:left; }
.conversation-head-name{
  overflow:hidden; font-size:15px; font-weight:950; text-overflow:ellipsis; white-space:nowrap;
}
.conversation-head-status{ color:rgba(255,255,255,.55); font-size:10px; font-weight:750; }
.conversation-panel-body{
  display:flex; flex-direction:column; gap:7px; padding-top:10px; padding-bottom:10px;
}
.conversation-date-divider{
  align-self:center; margin:2px 0 6px; padding:5px 10px;
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
  background:rgba(0,0,0,.28); color:rgba(255,255,255,.58);
  font-size:9px; font-weight:850;
}
.conversation-message-state-divider{
  align-self:flex-end;
  margin-bottom:0;
}
.conversation-message-row{ width:100%; display:flex; justify-content:flex-start; }
.conversation-message-row.is-mine{ justify-content:flex-end; }
.conversation-message-bubble{
  max-width:78%; display:grid; gap:4px; padding:9px 11px 6px;
  border:1px solid rgba(255,255,255,.14); border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.075); color:#fff; box-sizing:border-box;
}
.conversation-message-row.is-mine .conversation-message-bubble{
  border-color:#2f8fff; border-radius:14px 14px 4px 14px;
  background:#2f8fff;
}
.conversation-message-text{
  overflow-wrap:anywhere; font-size:13px; font-weight:650; line-height:1.35; white-space:pre-wrap;
}
.conversation-message-time{
  justify-self:end; color:rgba(255,255,255,.58); font-size:8px; font-weight:750;
}
.conversation-message-media-grid{
  --conversation-media-card-size:min(170px, 48vw);
  position:relative; width:var(--conversation-media-card-size);
  height:var(--conversation-media-card-size); display:block;
}
.conversation-message-media-grid.is-single{
  width:var(--conversation-media-card-size);
}
.conversation-message-media-grid.is-stack{
  --conversation-media-stack-width:min(240px, 74vw);
  width:var(--conversation-media-stack-width);
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(76px, 1fr);
  grid-template-rows:minmax(0, 1fr) minmax(0, 1fr);
  gap:0;
  touch-action:manipulation;
  user-select:none;
}
.conversation-message-media-grid.is-stack video{
  pointer-events:none;
}
.conversation-message-media-slot{
  position:absolute; right:0; top:0;
  width:var(--conversation-media-card-size); height:var(--conversation-media-card-size);
  min-width:0; overflow:hidden;
  display:grid; place-items:center; border-radius:10px;
  border:1px solid rgba(255,255,255,.24);
  background:#090909; color:rgba(255,255,255,.58); font-size:10px; font-weight:750;
  cursor:pointer; box-sizing:border-box;
  transform:translateX(calc(var(--media-drag-x, 0px) - var(--media-stack-offset, 0px)));
  z-index:var(--media-stack-layer, 1);
  box-shadow:0 7px 18px rgba(0,0,0,.38);
  transition:transform .2s ease, box-shadow .2s ease;
}
.conversation-message-media-grid.is-single .conversation-message-media-slot{
  position:relative; right:auto; top:auto; transform:none;
}
.conversation-message-media-grid.is-stack .conversation-message-media-slot{
  position:relative; right:auto; top:auto;
  width:auto; height:auto; min-width:0; min-height:0;
  transform:none; box-shadow:none;
}
.conversation-message-media-grid.is-stack .conversation-message-media-slot:first-child{
  grid-column:1; grid-row:1 / 3;
  border-right:0;
  border-radius:10px 0 0 10px;
}
.conversation-message-media-grid.is-stack .conversation-message-media-slot:nth-child(2){
  grid-column:2; grid-row:1;
  border-bottom:0;
  border-radius:0 10px 0 0;
}
.conversation-message-media-count{
  grid-column:2; grid-row:2;
  width:100%; min-width:0; min-height:0; padding:0;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); border-radius:0 0 10px 0;
  background:rgba(255,255,255,.035); color:#fff;
  font-size:16px; font-weight:900; letter-spacing:.02em;
  box-shadow:inset 0 0 16px rgba(255,255,255,.04);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}
.conversation-message-media-count:hover,
.conversation-message-media-count:focus-visible{
  border-color:#FF1744;
  background:rgba(255,23,68,.10);
  box-shadow:0 0 14px rgba(255,23,68,.28), inset 0 0 16px rgba(255,255,255,.04);
  outline:none;
}
.group-feed-list .conversation-message-media-count:hover,
.group-feed-list .conversation-message-media-count:focus-visible{
  border-color:#FFD84D;
  background:rgba(255,216,77,.10);
  box-shadow:0 0 14px rgba(255,216,77,.24), inset 0 0 12px rgba(255,216,77,.06);
}
.conversation-message-media{
  width:100%; height:100%; min-height:0; display:block; object-fit:cover;
}
video.conversation-message-media{ object-fit:contain; background:#000; }
.conversation-message-media-expired{
  padding:8px 4px; color:rgba(255,255,255,.65); font-size:11px; font-weight:750;
}
.conversation-message-bubble.is-media-only,
.conversation-message-row.is-mine .conversation-message-bubble.is-media-only{
  padding:0; border:0; background:transparent; box-shadow:none;
}
.conversation-message-bubble.is-media-only .conversation-message-time{
  margin-top:2px; margin-right:3px;
}
.conversation-media-viewer-box{
  width:min(var(--topbar-max), calc(100vw - 20px));
  height:calc(100vh - 20px); max-height:calc(100vh - 20px);
  display:grid; grid-template-rows:minmax(0,1fr) auto;
}
.conversation-media-viewer-body{
  position:relative; min-width:0; min-height:0; display:grid; place-items:center; overflow:hidden;
  padding:12px; background:rgba(0,0,0,.72); color:rgba(255,255,255,.62);
  font-size:13px; font-weight:800; touch-action:pan-y; cursor:grab;
}
.conversation-media-viewer-body.is-dragging{ cursor:grabbing; }
.conversation-media-viewer-media{
  width:100%; height:100%; min-width:0; min-height:0; display:block; object-fit:contain;
  transform:translateX(var(--conversation-viewer-drag-x, 0px));
  transition:transform .18s ease;
}
.conversation-media-viewer-media.is-dragging{ transition:none; }
.conversation-media-viewer-progress{
  position:absolute; z-index:5; left:10px; right:10px; bottom:60px;
  display:flex; gap:5px; pointer-events:auto;
}
.conversation-media-viewer-progress-segment{
  flex:1; height:3px; min-height:3px; padding:0; border:0;
  border-radius:999px; display:block; overflow:hidden; cursor:pointer;
  background:rgba(255,255,255,.34);
}
.conversation-media-viewer-progress-fill{
  display:block; width:0; height:100%; border-radius:inherit; background:#fff;
}
.conversation-media-viewer-progress-segment.active .conversation-media-viewer-progress-fill{
  width:100%;
}
.conversation-media-viewer-footer{
  position:relative;
}
#conversationMediaViewerPanel .conversation-media-viewer-box{
  position:relative; grid-template-rows:minmax(0, 1fr); overflow:hidden;
}
#conversationMediaViewerPanel .conversation-media-viewer-footer{
  position:absolute; z-index:10; left:0; right:0; bottom:0;
  padding:0 12px 12px; border-top:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18), transparent);
}
#conversationMediaViewerPanel .conversation-media-viewer-footer .panel-footer-slot-left,
#conversationMediaViewerPanel .conversation-media-viewer-footer .panel-footer-slot-right{
  padding-left:0; padding-right:0;
}
#conversationMediaViewerPanel.is-open .conversation-media-viewer-footer .panel-footer-slot-left,
#conversationMediaViewerPanel.is-open .conversation-media-viewer-footer .panel-footer-slot-right,
#conversationMediaViewerPanel.is-open .conversation-media-viewer-footer .ui-icon-btn,
#conversationMediaViewerPanel.is-open .conversation-media-viewer-footer .album-actions-dropdown{
  pointer-events:auto;
}
#conversationMediaViewerPanel .conversation-media-viewer-footer .ui-icon-btn{
  background:transparent; border-color:rgba(255,255,255,.14);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.conversation-footer{
  display:flex;
  justify-content:center;
  align-items:center;
}
.conversation-message-row{
  align-items:center;
  gap:12px;
}
.conversation-message-bubble{ cursor:pointer; }
.conversation-message-remove{
  flex:0 0 36px;
  width:36px;
  height:36px;
  box-sizing:border-box;
  padding:4px 0 0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
}
.conversation-message-remove[hidden]{ display:none; }
.conversation-message-row.is-mine .conversation-message-remove{ order:-1; }
.conversation-message-remove:hover,
.conversation-message-remove:focus-visible{
  border-color:rgba(255,255,255,.8);
  box-shadow:0 0 10px rgba(255,255,255,.15);
}
.conversation-composer{
  display:block; padding:9px 12px; border-top:1px solid rgba(255,255,255,.10);
}
.conversation-input-shell{
  width:100%; min-width:0; min-height:38px; display:grid;
  grid-template-columns:30px minmax(0,1fr) 30px; align-items:center; gap:6px;
  padding:4px 5px; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; background:rgba(255,255,255,.055); box-sizing:border-box;
}
.conversation-input{
  width:100%; min-width:0; height:28px; padding:0; border:0;
  outline:0; background:transparent; color:#fff;
  font:inherit; font-size:13px; font-weight:750; box-sizing:border-box;
}
.conversation-input:focus{
  outline:0;
}
.conversation-photo-btn,
.conversation-send-btn{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  padding:0; border:1px solid rgba(255,255,255,.18); border-radius:10px;
  background:rgba(255,255,255,.08); color:#fff; font-size:13px;
  opacity:.55; cursor:pointer; transition:background .18s ease,opacity .18s ease,box-shadow .18s ease;
}
.conversation-photo-btn{
  opacity:.72;
}
.conversation-photo-btn > span{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  position:relative; top:2px; font-size:21px; font-weight:500; line-height:1;
}
.comments-photo-btn > span{
  top:0;
}
.conversation-send-btn > span{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  position:relative; left:1px; line-height:1; transform:rotate(-90deg);
}
.conversation-send-btn.is-ready{
  background:#2f8fff; opacity:1; box-shadow:0 0 18px rgba(47,143,255,.28);
}
.conversation-send-btn:disabled{ opacity:.45; pointer-events:none; }





.contacts-directory-add.is-none,
.contacts-directory-add.is-pending-received{
  border-color:#2f8fff;
  background:#2f8fff;
}

.contacts-directory-add.is-pending-sent{
  color:#fff;
}

.contacts-directory-add.is-friend{
  color:#54e636;
}

.contacts-directory-action:disabled{
  cursor:default;
  opacity:.82;
}
.contacts-directory-empty{
  grid-column:1 / -1;
}

.contacts-load-more{
  grid-column:1 / -1;
  min-height:40px;
  border:1px solid rgba(47,143,255,.55);
  border-radius:10px;
  background:rgba(47,143,255,.12);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.contacts-load-more:disabled{
  cursor:default;
  opacity:.65;
}

.contacts-connection-banner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  gap:8px;
  margin-bottom:10px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  box-shadow:0 0 16px rgba(255,255,255,.12), inset 0 0 12px rgba(255,255,255,.04);
  font-size:12px;
  font-weight:800;
}

.contacts-connection-banner button{
  width:100%;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:7px;
  background:rgba(255,255,255,.10);
  color:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.10);
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.network-publication-card{
  --network-card-accent:#54e636;
  position:relative;
  flex:0 0 140px;
  width:140px;
  height:202px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background-color:rgba(255,255,255,.035);
  background-position:center;
  background-size:cover;
  color:#fff;
  overflow:hidden;
  box-sizing:border-box;
  scroll-snap-align:start;
  cursor:pointer;
  isolation:isolate;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.network-publication-card::after{
  content:'';
  position:absolute;
  inset:38% 0 0;
  z-index:0;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.88));
  pointer-events:none;
}

.network-publication-card:hover,
.network-publication-card:focus-visible,
.network-story-card:hover,
.network-story-card:focus-visible{
  border-color:var(--network-card-accent);
  box-shadow:0 0 16px color-mix(in srgb, var(--network-card-accent) 22%, transparent);
  outline:none;
}

.network-publication-avatar{
  position:absolute;
  z-index:1;
  top:7px;
  left:7px;
  width:25px;
  height:25px;
  border:2px solid rgba(0,0,0,.38);
  border-radius:7px;
  background-color:rgba(255,255,255,.08);
  background-position:center;
  background-size:cover;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.82);
  font-size:13px;
  font-weight:900;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22);
  overflow:hidden;
}



.network-media-info{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  max-width:calc(100% - 16px);
  min-height:20px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(0,0,0,.58);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-sizing:border-box;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 2px 7px rgba(0,0,0,.9);
  pointer-events:none;
}

.network-media-info-play{
  flex:0 0 auto;
  border-top-width:4px;
  border-bottom-width:4px;
  border-left-width:7px;
}

.network-media-info-duration{
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.network-publication-name{
  position:absolute;
  z-index:1;
  top:7px;
  left:40px;
  right:8px;
  min-height:25px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1.05;
  text-align:left;
  text-shadow:0 2px 7px rgba(0,0,0,.9);
}

.network-publication-name span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.network-story-card{
  --network-card-accent:#2f8fff;
  position:relative;
  width:140px;
  height:202px;
  flex:0 0 140px;
  isolation:isolate;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.network-reel-card{
  --network-card-accent:#AEB6C2;
}

.network-story-card::after{
  content:'';
  position:absolute;
  inset:38% 0 0;
  z-index:0;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.88));
  pointer-events:none;
}

.network-section-divider{
  --network-section-accent:47,143,255;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  width:100%;
  padding-bottom:12px;
  box-sizing:border-box;
}

.network-section-divider[data-network-section="publication"]{
  --network-section-accent:84,230,54;
}

.network-section-divider[data-network-section="story"]{
  --network-section-accent:47,143,255;
}

.network-section-divider[data-network-section="reel"]{
  --network-section-accent:174,182,194;
}

.network-section-divider[data-contact-section="contact"]{
  --network-section-accent:255,23,68;
}

.network-section-divider[data-contact-section="group"]{
  --network-section-accent:255,216,77;
}

.network-section-line{
  height:1px;
  background:rgb(var(--network-section-accent));
}

.network-section-btn{
  position:relative;
  min-width:150px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 18px;
  border:1px solid rgb(var(--network-section-accent));
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.88);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.network-section-btn[data-network-page="publication"]{
  --network-section-accent:84,230,54;
}

.network-section-btn[data-network-page="story"]{
  --network-section-accent:47,143,255;
}

.network-section-btn[data-network-page="reel"]{
  --network-section-accent:174,182,194;
}

.network-section-btn[data-contact-page="contact"]{
  --network-section-accent:255,23,68;
}

.network-section-btn[data-contact-page="discussions"]{
  --network-section-accent:255,23,68;
}

.network-section-btn[data-contact-page="group"]{
  --network-section-accent:255,216,77;
}

.network-section-btn[data-contact-page]:hover{
  background:rgba(var(--network-section-accent),.10);
  border-color:rgb(var(--network-section-accent));
  box-shadow:0 0 16px rgba(var(--network-section-accent),.15);
}

.network-section-btn:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(var(--network-section-accent),.62);
  box-shadow:0 0 16px rgba(var(--network-section-accent),.15);
}

.network-section-name{
  text-align:center;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

/* Accueil Mes souvenirs : même structure que Communauté, accent blanc unique. */
.souvenir-home{
  --network-accent:#fff;
}

.souvenir-home .network-section-divider{
  --network-section-accent:255,255,255;
}

.souvenir-home .network-section-line{
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.16);
}

.souvenir-home .network-section-btn{
  border-color:#fff;
  color:#fff;
}

.souvenir-home .network-section-btn:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:0 0 16px rgba(255,255,255,.16);
}

.souvenir-home .souvenir-home-see-all-card{
  --network-accent:#fff;
  justify-content:center;
  padding-top:0;
  border-color:#fff;
}

.souvenir-home .souvenir-home-see-all-card .profile-see-all-count{
  position:absolute;
  left:50%;
  bottom:19px;
  transform:translateX(-50%);
}

.souvenir-home .souvenir-home-see-all-card .profile-story-create-label{
  transform:none;
  white-space:pre-line;
}

.souvenir-home-preview-card{
  border-color:rgba(255,255,255,.16);
  cursor:pointer;
}

.souvenir-home-preview-card:hover,
.souvenir-home-preview-card:focus-visible{
  border-color:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.22);
  outline:none;
}

.souvenir-home .network-content-rail > .souvenir-home-rail-item{
  flex:0 0 65%;
  width:65%;
  min-width:65%;
  border-radius:12px;
  scroll-snap-align:start;
  transition:box-shadow .18s ease;
}

@media (max-width:760px){
  .souvenir-home .network-content-rail > .souvenir-home-rail-item{
    flex-basis:100%;
    width:100%;
    min-width:100%;
  }
}

.souvenir-home .network-content-rail > .souvenir-home-rail-item:hover,
.souvenir-home .network-content-rail > .souvenir-home-rail-item:focus-within{
  box-shadow:0 0 0 1px #fff, 0 0 16px rgba(255,255,255,.22);
}

.souvenir-home-section-icon{
  min-width:14px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  line-height:1;
}

.souvenir-home .network-section-divider[data-souvenir-section="gallery"] .souvenir-home-section-icon{
  font-size:14px;
  transform:translateY(-2px);
}

.network-page-empty{
  min-height:180px;
  display:grid;
  align-items:center;
  justify-items:stretch;
  padding:24px;
  text-align:center;
  color:rgba(255,255,255,.62);
  font-size:13px;
  font-weight:700;
}


/* ===========================================================
BLOC CSS 12.47 - actions Ajouter des groupes identiques aux actions contacts
=========================================================== */
#contactsPanel.is-groups-view #contactsPanelBody .group-request-accept,
#contactsPanel.is-groups-view #contactsPanelBody .group-discovery-join{
  height:34px !important;
  min-height:34px !important;
  padding:0 8px !important;
  border:1px solid rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
  filter:none !important;
}

#contactsPanel.is-groups-view #contactsPanelBody .group-request-accept:hover,
#contactsPanel.is-groups-view #contactsPanelBody .group-request-accept:focus-visible,
#contactsPanel.is-groups-view #contactsPanelBody .group-discovery-join:hover,
#contactsPanel.is-groups-view #contactsPanelBody .group-discovery-join:focus-visible{
  border-color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
  filter:none !important;
}

/* ==========================================================
BLOC CSS 05 - PIEDS DE FENETRE, GALERIE, ALBUMS ET UTILITAIRES

Gere :

- Barres basses specialisees
- Legende, progression et communaute

========================================================== */

/* ===========================================================
BLOC CSS 05.01 - PIEDS DE FENETRE : STRUCTURE ET BOUTONS
=========================================================== */

.panel-footer{
  display:flex;
  justify-content:center;
  align-items:center;

  padding:14px 5px;

  border-top:1px solid var(--glass-border);
}

.panel-footer-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.panel-footer-grid{
  display:grid;
  grid-template-columns:80px 1fr 80px;
  align-items:center;
}

.panel-footer-slot-left,
.panel-footer-slot-center,
.panel-footer-slot-right{
  display:flex;
  align-items:center;
}

.panel-footer-slot-left{
  justify-content:flex-start;
  padding-left:10px;
}

.panel-footer-slot-center{
  justify-content:center;
}

.panel-footer-slot-right{
  justify-content:flex-end;
  padding-right:10px;
  position:relative;
}

.panel-footer-slot-fixed{
  width:80px;
}

.panel-footer-slot-fill{
  flex:1;
}

.panel-footer-slot-stretch{
  justify-content:stretch;
}

.panel-footer-action-slot{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:stretch;
  box-sizing:border-box;
}

.panel-footer-action-slot-left{
  padding-left:10px;
}

.panel-footer-action-slot-right{
  padding-right:10px;
}

.panel-footer-fill-button{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1;
  text-align:center;
}

.panel-footer-action-button{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:14px;
  color:#fff;
  font-weight:700;
  white-space:nowrap;
}

/* ===========================================================
BLOC CSS 05.02 - ALBUMS : GRILLE DE SELECTION
=========================================================== */

.album-picker-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.album-picker-grid.is-photo-picker-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

#albumPickerPanel .gallery-photo-box .gallery-photo-image{
  transition:border-color .18s ease, box-shadow .18s ease;
}

#albumPickerPanel .gallery-photo-box:hover .gallery-photo-image,
#albumPickerPanel .gallery-photo-box:focus-within .gallery-photo-image{
  border-color:rgba(255,255,255,.88);
  box-shadow:0 0 12px rgba(255,255,255,.16);
}

#souvenirsPanel .gallery-photo-box.is-unclassified-picker:hover .gallery-photo-image,
#souvenirsPanel .gallery-photo-box.is-unclassified-picker:focus-within .gallery-photo-image,
#countryAlbumPanel .gallery-photo-box.is-unclassified-picker:hover .gallery-photo-image,
#countryAlbumPanel .gallery-photo-box.is-unclassified-picker:focus-within .gallery-photo-image{
  border-color:rgba(255,255,255,.88);
  box-shadow:0 0 12px rgba(255,255,255,.16);
}

#albumPickerPanel .gallery-photo-box.is-album-picker-selected .gallery-photo-image{
  border-color:#fff;
  box-shadow:0 0 0 1px #fff inset, 0 0 16px rgba(255,255,255,.20);
}

#souvenirsPanel .gallery-photo-box.is-confidentiality-selected .gallery-photo-image,
#countryAlbumPanel .gallery-photo-box.is-confidentiality-selected .gallery-photo-image{
  border-color:#fff;
  box-shadow:0 0 0 1px #fff inset, 0 0 16px rgba(255,255,255,.20);
}

#albumPickerPanel .album-picker-selection-order,
#souvenirsPanel .confidentiality-selection-order,
#countryAlbumPanel .confidentiality-selection-order,
#souvenirsPanel .album-cover-selection-order,
#countryAlbumPanel .album-cover-selection-order,
#souvenirsPanel .album-remove-selection-order,
#countryAlbumPanel .album-remove-selection-order,
#souvenirsPanel .unclassified-selection-order,
#countryAlbumPanel .unclassified-selection-order{
  border-color:#fff !important;
  background:rgba(0,0,0,.68) !important;
  color:#fff !important;
  box-shadow:0 0 12px rgba(255,255,255,.24) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#souvenirsPanel .album-remove-selection-order,
#countryAlbumPanel .album-remove-selection-order{
  border-color:rgba(255,70,70,.9) !important;
  color:rgb(255,70,70) !important;
  box-shadow:0 0 12px rgba(255,70,70,.28) !important;
}

/* ===========================================================
BLOC CSS 05.03 - COMMUNAUTE : COMPTEURS
=========================================================== */

.network-section-count{
  min-width:0;
  height:auto;
  padding:0;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:none;
}

.network-section-count::before{
  content:'•';
  margin-right:7px;
  color:rgba(255,255,255,.68);
}

/* ===========================================================
BLOC CSS 05.04 - GALERIE : MOSAIQUES ET NAVIGATION
=========================================================== */

.gallery-photo-box{
  position:relative;
}

.gallery-photo-grid{
  display:grid;
  margin-bottom:0;
}

.gallery-photo-grid.with-info{
  gap:6px;
  /* La bordure transparente de 2px de la photo complète l'écart visuel à 10px. */
  margin-top:8px;
  margin-bottom:8px;
}

.gallery-photo-grid.without-info{
  gap:1px;
  margin-top:0;
  margin-bottom:0;
}

/* Mosaïque continue façon photothèque lorsque les infos sont masquées. */
.gallery-photo-grid.is-mosaic{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:row;
}

.gallery-photo-grid.with-info.is-mosaic{
  gap:1px;
}

.gallery-photo-grid.is-mosaic .gallery-photo-box{
  min-width:0;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:8px;
}

.gallery-photo-grid.is-mosaic .gallery-photo-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.gallery-photo-grid.is-mosaic .gallery-photo-box.is-mosaic-featured{
  aspect-ratio:1 / 1;
}

.gallery-photo-grid.is-single{
  grid-template-columns:1fr;
}

.gallery-photo-grid.is-double{
  grid-template-columns:1fr 1fr;
}

.gallery-photo-grid.is-grid{
  grid-template-columns:repeat(3,1fr);
}

.gallery-photo-image{
  display:block;
  width:100%;
  height:90px;
  cursor:pointer;
  object-fit:cover;
  image-rendering:auto;
  filter:contrast(1.05) saturate(1.05);
  border-radius:8px;
  box-sizing:border-box;
  border:2px solid transparent;
}

.gallery-photo-image.is-last-full{
  grid-column:1 / -1;
}

.gallery-photo-image.is-last-left{
  grid-column:1 / 2;
}

.gallery-photo-image.is-last-right{
  grid-column:2 / 4;
}

.gallery-photo-grid.is-single .gallery-photo-box{
  aspect-ratio:16 / 9;
}

.gallery-photo-grid.is-single .gallery-photo-image{
  height:100%;
}

.gallery-photo-image.is-remove-selected{
  border-color:rgba(255,70,70,.9);
  box-shadow:0 0 0 1px rgba(255,70,70,.38), 0 0 16px rgba(255,70,70,.18);
}

.gallery-photo-image.is-edit-selected{
  border-color:rgba(47,143,255,.95);
  box-shadow:0 0 0 1px rgba(47,143,255,.45);
}

.gallery-photo-box.is-cover-picker .gallery-photo-image{
  cursor:pointer;
}

.gallery-photo-box.is-cover-picker:hover .gallery-photo-image{
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.72), 0 0 16px rgba(255,255,255,.20);
}

.gallery-photo-box.is-cover-picker .gallery-photo-image.is-edit-selected{
  border-color:#fff;
  box-shadow:0 0 0 1px #fff, 0 0 18px rgba(255,255,255,.24);
}

.gallery-photo-overlay,
.gallery-photo-status{
  position:absolute;
  top:6px;
  display:flex;
  align-items:center;
  gap:5px;
  z-index:5;
}

.gallery-photo-overlay{
  right:6px;
  flex-direction:column;
}

.gallery-photo-status{
  left:6px;
}

.gallery-photo-chip{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:12px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.gallery-photo-chip.is-classification{
  font-size:11px;
  border-color:rgba(255,255,255,.16);
}

.gallery-group-row{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:8px;
  align-items:center;
  margin-top:0;
}

.gallery-group-flag-wrap{
  display:flex;
  align-items:center;
  margin-left:6px;
}

.gallery-group-flag{
  width:20px;
  height:12px;
  border-radius:2px;
}

.gallery-group-meta{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-start;
  font-weight:600;
}

.gallery-group-dot{
  opacity:.6;
  transform:translateY(1px);
}

.gallery-group-date{
  font-size:12px;
  opacity:.7;
}

.gallery-group-meta > .gallery-group-date{
  transform:translateY(1px);
}

.gallery-group-poi-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-right:2px;
}

.gallery-group-poi{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
}

.gallery-group-poi.is-festival{
  background:conic-gradient(#ff0040,#ff7a00,#ffdc00,#33ff66,#00e1ff,#5a62ff,#c300ff,#ff0040);
  box-shadow:0 0 6px rgba(255,255,255,.6);
}

.empty-state-text{
  text-align:center;
}

.legend-row-empty{
  justify-items:center;
  text-align:center;
}

.photo-gallery-render{
  gap:0 !important;
}

.photo-gallery-render > .souvenir-gallery-discovery{
  margin-bottom:10px;
}

/* Infos masquées : 8px d'espace + 2px de bordure photo = 10px visibles. */
.photo-gallery-render.is-photo-info-hidden > .souvenir-gallery-discovery{
  margin-bottom:8px;
}

.souvenir-gallery-months-view{
  gap:0 !important;
}

.souvenir-gallery-months-view > .souvenir-gallery-discovery{
  margin-bottom:10px;
}

.souvenir-gallery-month-group{
  display:grid;
  gap:8px;
  margin-bottom:8px;
}

.souvenir-gallery-month-group:last-child{
  margin-bottom:0;
}

.souvenir-gallery-month-header{
  min-height:0;
}

.souvenir-gallery-month-icon{
  width:20px;
  height:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
}

.souvenir-gallery-month-count{
  font-weight:600;
  white-space:nowrap;
}

.souvenir-gallery-month-photos{
  display:grid;
  gap:0;
}

.album-level-root{
  position:relative;
}

.album-overview-group{
  display:grid;
  gap:10px;
}

.souvenir-navigation-overview-group{
  display:grid;
  gap:0;
}

.souvenir-navigation-divider{
  --network-section-accent:255,255,255;
}

.souvenir-navigation-divider .network-section-line{
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.16);
}

.souvenir-navigation-divider .network-section-btn{
  border-color:#fff;
  color:#fff;
}

.souvenir-navigation-divider .network-section-btn:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:0 0 16px rgba(255,255,255,.16);
}

.souvenir-navigation-current-row{
  gap:8px;
}

.souvenir-navigation-current-row .navigation-row-flag.is-bare{
  margin-left:0;
}

.souvenir-navigation-current-row.has-photo-fallback-icon .navigation-row-icon.is-bare{
  font-size:16px;
  transform:translateY(-2px);
}

/* ===========================================================
BLOC CSS 05.05 - ALBUMS : GROUPES DE CARTES
=========================================================== */

.album-overview-group.album-card-group{
  gap:0;
  height:202px;
  grid-template-rows:minmax(0, 1fr) auto;
}

.album-overview-group.album-card-group > .album-overview-card{
  height:auto;
  min-height:0;
  border-radius:12px 12px 0 0;
}

#souvenirsPanel .album-overview-group.album-card-group > .legend-row,
#countryAlbumPanel .album-overview-group.album-card-group > .legend-row,
.publication-picker-albums .album-overview-group.album-card-group > .legend-row{
  border-top:0;
  border-radius:0 0 12px 12px;
}

.album-overview-group.album-delete-card-group{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.album-overview-group.album-delete-card-group > .album-overview-card{
  border:0;
  border-radius:0;
}

#souvenirsPanel .album-overview-group.album-delete-card-group > .legend-row,
#countryAlbumPanel .album-overview-group.album-delete-card-group > .legend-row{
  border:0;
  border-top:1px solid rgba(255,255,255,.14);
  border-radius:0;
}

.album-overview-group.album-delete-card-group:hover{
  border-color:rgba(255,255,255,.42);
}

.album-overview-group.album-delete-card-group.is-selected{
  border-color:rgba(255,70,70,.9);
  box-shadow:0 0 0 1px rgba(255,70,70,.28), 0 0 18px rgba(255,70,70,.18);
}

#souvenirsPanel .album-overview-group.album-delete-card-group.is-selected > .legend-row,
#countryAlbumPanel .album-overview-group.album-delete-card-group.is-selected > .legend-row{
  border-top-color:rgba(255,70,70,.58);
}

/* ===========================================================
BLOC CSS 05.06 - ALBUMS : CARTES ET COUVERTURES
=========================================================== */

.album-overview-card{
  width:100%;
  height:136px;
  display:grid;
  grid-template-columns:3fr 2fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
}

.album-overview-cover{
  width:100%;
  height:100%;
  min-width:0;
  padding:0;
  border:0;
  border-right:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.025);
  overflow:hidden;
}

.album-overview-cover.is-empty{
  background:rgba(255,255,255,.025);
}

.album-overview-media{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.album-overview-cover.is-preview-mosaic{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows:repeat(2, minmax(0, 1fr));
  gap:2px;
  background:rgba(255,255,255,.14);
}

.album-overview-cover.is-preview-mosaic .album-overview-media{
  min-width:0;
  min-height:0;
}

.album-overview-cover.is-preview-mosaic .album-overview-media:first-child{
  grid-row:1 / 3;
}

/* ===========================================================
BLOC CSS 05.07 - ALBUMS : APERCU ET LANCEMENT
=========================================================== */

.album-detail-hero{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  min-height:210px;
  max-height:300px;
  margin:0 0 10px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  box-shadow:0 14px 30px rgba(0,0,0,.34);
  box-sizing:border-box;
}

.album-detail-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.album-detail-hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
  radial-gradient(circle at 50% 50%, rgba(0,0,0,.04), rgba(0,0,0,.22) 52%, rgba(0,0,0,.52) 100%),
  linear-gradient(180deg, rgba(0,0,0,.08), transparent 48%, rgba(0,0,0,.62));
  pointer-events:none;
}

.album-detail-play{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  width:72px;
  height:72px;
  padding:0;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:rgba(0,0,0,.42);
  color:#fff;
  box-shadow:
  0 0 0 1px rgba(255,255,255,.10) inset,
  0 0 22px rgba(255,255,255,.24),
  0 10px 24px rgba(0,0,0,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.album-detail-play:hover,
.album-detail-play:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.16);
  box-shadow:
  0 0 0 1px rgba(255,255,255,.16) inset,
  0 0 28px rgba(255,255,255,.34),
  0 12px 26px rgba(0,0,0,.46);
  outline:none;
}

.album-detail-play-icon{
  width:0;
  height:0;
  margin-left:5px;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  border-left:21px solid #fff;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.45));
}

.album-detail-count{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:14px;
  min-height:30px;
  padding:0 14px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.48);
  border-radius:999px;
  background:rgba(0,0,0,.54);
  color:#fff;
  box-sizing:border-box;
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 0 15px rgba(0,0,0,.34);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

/* ===========================================================
BLOC CSS 05.08 - DIAPORAMA : MEDIAS ET COMMANDES
=========================================================== */

body.is-album-slideshow-open{
  overflow:hidden;
}

.album-slideshow{
  position:fixed;
  inset:0;
  z-index:22000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow:hidden;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;
  touch-action:none;
  user-select:none;
  box-sizing:border-box;
}

.album-slideshow-frame{
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  isolation:isolate;
  background:#000;
  box-shadow:0 24px 70px rgba(0,0,0,.62);
}

.album-slideshow-stage,
.album-slideshow-shade{
  position:absolute;
  inset:0;
}

.album-slideshow-stage{
  z-index:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#000;
  cursor:pointer;
}

.album-slideshow-media{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  opacity:0;
  transform:scale(.992);
  transition:opacity .28s ease, transform .32s ease;
  pointer-events:none;
}

.album-slideshow-media.is-visible{
  opacity:1;
  transform:scale(1);
}

.album-slideshow-shade{
  z-index:1;
  background:
  linear-gradient(180deg, transparent 68%, rgba(0,0,0,.72)),
  radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.28));
  pointer-events:none;
}

.album-slideshow-frame .album-slideshow-header{
  position:absolute;
  z-index:50;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:58px;
  min-height:58px;
  box-sizing:border-box;
  transform:translateY(0);
  border:0;
  border-bottom:1px solid var(--glass-border);
  border-radius:0;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:auto;
  transition:opacity .28s ease, transform .28s ease;
}

.album-slideshow-header [hidden]{
  display:none !important;
}

.album-slideshow-album-identity{
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.album-slideshow-title{
  max-width:100%;
  overflow:hidden;
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.album-slideshow-year{
  margin-top:4px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.album-slideshow-media-header{
  width:100%;
}

.album-slideshow-frame .album-slideshow-controls{
  position:absolute;
  z-index:50;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:108px;
  min-height:108px;
  box-sizing:border-box;
  transform:translateY(0);
  border:0;
  border-top:1px solid var(--glass-border);
  border-radius:0;
  display:grid;
  grid-template-columns:80px 1fr 80px;
  grid-template-rows:auto auto;
  align-items:center;
  padding:10px 15px 15px;
  transition:opacity .28s ease, transform .28s ease;
}

.album-slideshow-frame.is-chrome-hidden .album-slideshow-header{
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
}

.album-slideshow-frame.is-chrome-hidden .album-slideshow-controls{
  opacity:0;
  transform:translateY(100%);
  pointer-events:none;
}

.album-slideshow-thumbs{
  width:100%;
  box-sizing:border-box;
}

.album-slideshow-frame .viewer-thumb.active{
  border-color:#fff;
  box-shadow:0 0 0 1px #fff inset, 0 0 14px rgba(255,255,255,.20);
}

.album-slideshow-controls .ui-icon-btn{
  position:relative;
  padding:0;
  color:#fff;
  font-size:20px;
  font-weight:700;
  line-height:1;
}

.album-slideshow-controls .album-slideshow-play.is-playing::before,
.album-slideshow-controls .album-slideshow-play.is-playing::after{
  content:'';
  position:absolute;
  top:50%;
  width:4px;
  height:17px;
  border-radius:2px;
  background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.42);
  transform:translateY(-50%);
}

.album-slideshow-controls .album-slideshow-play.is-playing::before{
  left:calc(50% - 6px);
}

.album-slideshow-controls .album-slideshow-play.is-playing::after{
  right:calc(50% - 6px);
}

.album-slideshow-controls .album-slideshow-play.is-replay{
  font-size:25px;
  font-weight:500;
}

.album-slideshow-sound.is-muted{
  opacity:.62;
}

.album-slideshow-sound svg{
  width:25px;
  height:25px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.album-slideshow-controls .ui-icon-btn:hover,
.album-slideshow-controls .ui-icon-btn:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.08);
  outline:none;
}

@media (prefers-reduced-motion:reduce){
  .album-slideshow-media{
    transition:none;
  }
}

/* ===========================================================
BLOC CSS 05.09 - ALBUMS : INFORMATIONS ET AJOUT
=========================================================== */

.album-overview-info{
  min-width:0;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.045);
  color:#fff;
  text-align:center;
}

.album-overview-info:is(button){
  border:0;
  font:inherit;
  cursor:pointer;
}

.album-overview-year,
.album-overview-count{
  font-size:12px;
  font-weight:850;
  line-height:1.15;
}

.album-overview-add{
  width:56px;
  height:56px;
  flex:0 0 56px;
  padding:0;
  border:2px dashed #fff;
  border-radius:50%;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-size:38px;
  font-weight:300;
  line-height:1;
  box-shadow:0 0 14px color-mix(in srgb, #fff 46%, transparent);
}

/* ===========================================================
BLOC CSS 05.10 - UTILITAIRES : VISIBILITE ET DRAPEAUX
=========================================================== */

.is-hidden{
  display:none !important;
}

.inline-icon-slot{
  width:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.album-row-icon{
  display:inline-block;
  margin-left:2px;
  margin-right:6px;
}

.album-row-icon-raised{
  transform:translateY(-1px);
}

.album-row-flag{
  width:18px;
  height:12px;
  border-radius:3px;
  margin-left:4px;
  margin-right:8px;
  vertical-align:-1px;
}

.viewer-country-flag{
  width:22px;
  height:14px;
  border-radius:3px;
  margin-left:4px;
  margin-right:2px;
  flex-shrink:0;
  display:block;
}

.viewer-country-label{
  font-size:17px;
  font-weight:800;
  line-height:1;
  display:block;
}

.flag-chip-small{
  width:18px;
  height:11px;
  border-radius:3px;
  margin-right:6px;
  vertical-align:-1px;
}

.flag-chip-compact{
  width:18px;
  height:11px;
  border-radius:3px;
}

.flag-chip-medium{
  width:34px;
  height:22px;
  border-radius:6px;
}

.flag-chip-large{
  width:36px;
  height:24px;
  border-radius:6px;
}

.navigation-flag{
  width:20px;
  height:12px;
  border-radius:2px;
  margin-right:6px;
  margin-left:-6px;
  vertical-align:middle;
}

/* ===========================================================
BLOC CSS 05.11 - LECTEUR : GLOBE ET CORBEILLE
=========================================================== */

.viewer-globe-button{
  min-height:38px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;
  opacity:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.viewer-globe-button:hover{
  background:rgba(255,255,255,.08);
}

.photo-viewer-shell.is-trash-viewer .photo-viewer-top-actions,
.photo-viewer-shell.is-trash-viewer #viewerShareDropdown,
.photo-viewer-shell.is-trash-viewer #viewerAlbumDropdown,
.photo-viewer-shell.is-trash-viewer #viewerVisibilityDropdown{
  display:none !important;
}

.photo-viewer-shell.is-trash-viewer{
  width:min(600px, calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
}

.photo-viewer-shell.is-trash-viewer{
  position:relative;
  inset:auto;
  flex:0 0 auto;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.58);
}

.photo-viewer-shell.is-trash-viewer .photo-viewer-top{
  top:0;
  left:0;
  right:0;
  width:100%;
  min-height:58px;
  transform:none;
  padding:8px 10px;
  border:0;
  border-bottom:1px solid var(--glass-border);
  border-radius:0;
}

.photo-viewer-shell.is-trash-viewer .photo-viewer-bottom{
  left:0;
  right:0;
  bottom:0;
  width:100%;
  min-height:108px;
  transform:none;
  padding:10px 14px 14px;
  border:0;
  border-top:1px solid var(--glass-border);
  border-radius:0;
}

/* La photo supprimée utilise toute la hauteur réellement disponible entre
les deux headers, même lorsque sa taille native est plus petite. */
.photo-viewer-shell.is-trash-viewer img.photo-viewer-image{
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.photo-viewer-shell.is-trash-viewer .viewer-actions-dropdown{
  right:-5px;
  bottom:103px;
}

.photo-viewer-shell.is-trash-viewer .viewer-globe-button.is-trash-restore{
  border-color:#fff;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035));
  box-shadow:0 0 14px rgba(255,255,255,.18);
}

.photo-viewer-shell.is-trash-viewer .viewer-globe-button.is-trash-restore:hover{
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045));
  box-shadow:0 0 16px rgba(255,255,255,.24);
}

#viewerActionsDropdown [hidden]{
  display:none !important;
}

/* ===========================================================
BLOC CSS 05.12 - UTILITAIRES : CONFIRMATIONS ET INFORMATIONS
=========================================================== */

.relative-slot{
  position:relative;
}

.confirm-delete-message{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
}

.confirm-delete-strong{
  color:#fff;
}

.map-empty-state{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.65);
  font-size:13px;
  font-weight:700;
}



.viewer-info-time-separator{
  margin-left:5px;
}

.viewer-info-longitude{
  margin-left:8px;
}


/* ==========================================================
📍 PILLS POI 📍
----------------------------------------------------------

Gère : 

- Continents
- Pays
- Sections

========================================================== */

/* ===========================================================
BLOC CSS 05.13 - GLOBE : BULLES DES LIEUX
=========================================================== */

.pill-html{
  position:relative;
  pointer-events:auto;
  user-select:none;
  z-index:10;
}

.pill-shell{
  position:absolute;
  left:0;
  top:0;

  transform:translate(
  calc(-50% - var(--pill-offset-x, 0px)),
  calc(-50% + var(--pill-offset-y, 0px))
  );

  display:inline-flex;
  align-items:center;

  gap:0;

  min-height:32px;
  padding:4px 6px 4px 12px;

  border-radius:999px;

  background:rgba(8,12,20,.64);
  border:1px solid rgba(255,255,255,.14);

  box-shadow:0 6px 22px rgba(0,0,0,.34);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  color:#fff;
  white-space:nowrap;
}


/* ==========================================================
🎯 RESET PADDING CONTINENTS / OCEANS 🎯
---------------------------------------------------------- */

.pill-continents .pill-shell,
.pill-oceans .pill-shell{
  padding:4px 12px; 
}


/* ==========================================================
🎯 ESPACEMENTS PRÉCIS 🎯
---------------------------------------------------------- */

.pill-flag-img{
  margin-right:12px;
}

.pill-arrow{
  margin-left:10px; 
}


/* ==========================================================
✅ ÉLÉMENTS INTERNES ✅
---------------------------------------------------------- */

.pill-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 auto;
  box-shadow:0 0 12px currentColor;

  margin-right:8px;
}

.pill-dot[data-dynamic-color]{
  color:var(--dynamic-glow, var(--dynamic-color));
}

.user-location-globe-marker{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%, calc(-100% + 2px)) scale(var(--pill-scale, 1));
  transform-origin:50% 100%;
  width:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
  font-size:18px;
  line-height:1;
  pointer-events:none;
  user-select:none;
  z-index:12;
}

.pill-html{
  transform:scale(var(--pill-scale,1));
}

.pill-flag{
  font-size:16px;
  line-height:1;
}

.pill-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}



.pill-arrow{
  width:22px;
  height:22px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);

  color:#fff;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0;
}

.pill-arrow:hover{
  background:rgba(255,255,255,.12);
}


/* ==========================================================
🎨 COULEURS PAR TYPE 🎨
---------------------------------------------------------- */

.pill-continents .pill-shell{
  border-color:rgba(95,175,255,.18);
}

.pill-oceans .pill-shell{
  border-color:rgba(90,255,229,.18);
}

.pill-country .pill-shell,
.pill-section .pill-shell{
  border-color:rgba(255,255,255,.14);
}


/* ==========================================================
🏳️ DRAPEAUX 🏳️
---------------------------------------------------------- */

.pill-flag-img{
  width:18px;
  height:12px;
  object-fit:cover;
  border-radius:3px;
  display:inline-block;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

.mlv-flag-frame{
  object-fit:cover;
  display:inline-block;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}




/* ==========================================================
✨ GLOW ACTIVE ✨
---------------------------------------------------------- */

.pill-html.is-overlay-active .pill-shell{
  border-color:rgba(255,255,255,.95);

  box-shadow:
  0 0 6px rgba(255,255,255,.9),
  0 0 16px rgba(255,255,255,.7),
  0 0 32px rgba(255,255,255,.4),
  0 6px 22px rgba(0,0,0,.35);

  animation:pillGlowPulse 1.8s ease-in-out infinite;
}

@keyframes pillGlowPulse{
  0%{
    box-shadow:
    0 0 4px rgba(255,255,255,.7),
    0 0 12px rgba(255,255,255,.5),
    0 0 22px rgba(255,255,255,.3),
    0 6px 22px rgba(0,0,0,.35);
  }
  50%{
    box-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 22px rgba(255,255,255,.8),
    0 0 40px rgba(255,255,255,.5),
    0 6px 22px rgba(0,0,0,.35);
  }
  100%{
    box-shadow:
    0 0 4px rgba(255,255,255,.7),
    0 0 12px rgba(255,255,255,.5),
    0 0 22px rgba(255,255,255,.3),
    0 6px 22px rgba(0,0,0,.35);
  }
}


/* ==========================================================
BLOC CSS 06.01 - OVERLAY / PILLS SECTION
----------------------------------------------------------

Gère : 

- Meteo
- Heure
- Panel meteo
- Rating
- Image
- Coeur
- Texte
- GPS

========================================================== */


.section-modal{
  position:fixed;
  inset:0;
  z-index:99998;
  padding:0px;
  display:block;              
  box-sizing:border-box;
}

.section-modal-content{
  position:relative;
  width:100%;
  height:100%;
  display:block;              
}

.pill-overlay{
  position:absolute;
  top:10px;
  bottom:10px;
  left:50%;
  z-index:1;

  width:min(
  calc(100vw - 24px - var(--safe-left) - var(--safe-right)),
  760px
  );

  margin:0;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;

  background:rgba(0,0,0,.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,.20);
  border-radius:14px;
  overflow:hidden;

  transform:translateX(-50%) scaleX(var(--ui-scale)) translateY(10px);
  transform-origin:center top;
  transition:transform .22s ease;
}

.section-modal.is-open .pill-overlay{
  transform:translateX(-50%) scaleX(var(--ui-scale)) translateY(0);
}

@media (max-width:640px){
  .pill-overlay{
    width:min(
    calc(100vw - 16px - var(--safe-left) - var(--safe-right)),
    760px
    );
  }
}


/* ==========================================================
BLOC CSS 06.02 - OVERLAY / HEADER

Gere :

- Header des overlays
- Identite, niveau et boutons principaux

---------------------------------------------------------- */

.pill-overlay .header{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:12px 12px;

  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:14px;
}


/* ==========================================================
🌦️ METEO 🌦️
---------------------------------------------------------- */

.pill-overlay .weather{
  display:flex;
  align-items:center;
  gap:6px;

  font-size:16px;
  opacity:.75;
  cursor:pointer;
}

.pill-overlay .pill-header-btn{
  min-width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--color-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, text-shadow .2s ease;
}

.pill-overlay .pill-header-btn:hover{
  background:rgba(255,255,255,.08);
}

.pill-overlay .weather.pill-header-btn{
  width:auto;
  min-width:62px;
  padding:0 7px;
  opacity:1;
}


/* ==========================================================
🕒 HEURE CENTRÉE 🕒
---------------------------------------------------------- */

.pill-overlay .time-box{
  position:absolute;
  left:50%;
  transform:translateX(-50%);

  display:flex;
  flex-direction:column;
  align-items:center;

  font-size:12px;
  pointer-events:none;
}

.pill-overlay .time-label{
  font-size:12px;
  color:rgba(255,255,255,.72);
}

.pill-overlay .local-time{
  font-size:16px;
  font-weight:700;
  color:#fff;
}


/* ==========================================================
BLOC CSS 06.03 - OVERLAY / METEO

Gere :

- Affichage meteo et infos lieu
- Cartes detaillees des points

---------------------------------------------------------- */

.weather-panel{
  position:absolute;
  top:66px;
  left:8px;
  width:230px;
  box-sizing:border-box;
  padding:8px;
  border-radius:18px;
  background:rgba(15,15,15,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  color:#fff;
  z-index:10;
}

.weather-panel .album-actions-header{
  min-height:52px;
  border-radius:14px;
}

.weather-panel-body{
  flex:0 0 auto;
  min-height:auto;
  overflow:visible;
  margin-top:8px;
  margin-bottom:0;
}

.weather-day{
  min-height:36px;
  cursor:default;
}

.weather-day:hover{
  background:rgba(255,255,255,.05);
}

.weather-day .wd-day{
  width:auto;
  font-size:14px;
  font-weight:700;
  color:#fff;
  opacity:1;
}

.weather-day .wd-temp{
  margin-left:auto;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.82);
}

.gps-panel .viewer-visibility-icon{
  width:24px;
  height:24px;
  font-size:14px;
}


/* ==========================================================
💎 RATING 💎
---------------------------------------------------------- */

.pill-overlay .rating{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;

  margin:8px auto 6px;
}

.pill-overlay .rating-dot{
  font-size:18.5px;
  margin-left:-3px;

  opacity:.35;
  filter:grayscale(1);
}

.pill-overlay .rating-dot.on{
  opacity:1;
  filter:none;
}

.place-comments{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.pill-scroll-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.pill-scroll-body::-webkit-scrollbar{
  display:none;
}

.place-comments-head{
  padding:0;
}

.place-comments-list{
  padding-bottom:10px;
}

.place-comments-composer{
  flex:0 0 auto;
}

.place-comments-composer .place-comment-input{
  min-height:28px;
}

.place-comments-composer .place-comment-submit:disabled{
  opacity:.45;
  pointer-events:none;
}


/* ==========================================================
BLOC CSS 06.04 - OVERLAY / ACTIONS HEADER

Gere :

- Actions hautes overlay
- Boutons coeur, partage, options

---------------------------------------------------------- */

.pill-overlay .header .spacer{ flex:1; }

.pill-overlay .header .actions{
  display:flex;
  gap:8px;
  font-size:16px;
}


/* ==========================================================
🖼️ IMAGE / CAROUSEL 🖼️
---------------------------------------------------------- */

.image-carousel{
  position:relative;
  width:100%;
  height:38vh;
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
}

.image-carousel.is-dragging{
  cursor:grabbing;
}

.image-carousel.profile-publication-carousel{
  height:260px;
  min-height:180px;
}

.carousel-track{
  display:flex;
  height:100%;
  transform:translateX(var(--carousel-x, 0%));
  transition:transform .35s ease;
  will-change:transform;
}

.carousel-track.is-dragging{
  transition:none;
}

.carousel-track .slide{
  min-width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
}

.image-carousel .dots{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.image-carousel .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  transition:width .2s ease, background .2s ease, box-shadow .2s ease;
}

.image-carousel .dot.active{
  width:18px;
  height:6px;
  background:#00E5FF;
  box-shadow:0 0 10px rgba(0,229,255,.5);
}


/* ==========================================================
📝 CONTENU (SCROLL INVISIBLE) 📝
---------------------------------------------------------- */

.pill-overlay .panel{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

.pill-overlay .content{
  flex:0 0 auto;
  min-height:auto;

  padding:10px 16px;
  color:#fff;
  font-size:14px;
  line-height:1.45;

  overflow:visible;

  scrollbar-width:none;
  -ms-overflow-style:none;
}

.pill-overlay .content::-webkit-scrollbar{
  display:none;
}

/* ==========================================================
🏷️ TEXTE 🏷️
---------------------------------------------------------- */

.place-title{
  text-align:center;
  font-weight:800;
  font-size:17px;
  color:#fff;
  margin:4px 0 0;
}

.place-text{
  line-height:1.55;
  margin:5px 0 0;
  color:rgba(255,255,255,.82);
}


/* ==========================================================
❤️ COUP DE CŒUR ❤️
---------------------------------------------------------- */

.pill-overlay .heart.is-active{
  color:#FF1744;
  text-shadow:0 0 6px rgba(255,23,68,.45);
}


/* ==========================================================
BLOC CSS 06.05 - OVERLAY / FOOTER

Gere :

- Actions basses overlay
- Plein ecran, navigation et controles

---------------------------------------------------------- */

.pill-overlay .footer{
  padding:14px 14px;

  display:flex;
  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,.55);
  box-shadow:inset 0 1px rgba(255,255,255,.20);

  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

.pill-overlay .close-btn{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.20);

  background:rgba(0,0,0,.35);
  color:#fff;

  font-size:16px;
  cursor:pointer;

  transition:.25s ease;
}

.pill-overlay .close-btn:hover{
  background:var(--ui-hover);
}


/* ==========================================================
BLOC CSS 06.06 - OVERLAY / GPS

Gere :

- Boutons GPS/localisation
- Etats actifs et affichage position

---------------------------------------------------------- */

.gps-panel{
  position:absolute;
  top:66px;
  right:8px;
  width:230px;
  box-sizing:border-box;
  padding:8px;
  border-radius:18px;
  background:rgba(15,15,15,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  color:#fff;
  text-align:left;
  z-index:10;
}

.gps-panel .album-actions-header{
  min-height:48px;
  border-radius:14px;
}

.gps-options-body{
  flex:0 0 auto;
  min-height:auto;
  overflow:visible;
  margin-top:8px;
  margin-bottom:0;
}

.gps-option{
  width:100%;
  min-height:30px;
  font-size:12px;
  justify-content:center;
  text-align:center;
}

.gps-option .viewer-visibility-left{
  justify-content:center;
}


/* ==========================================================
📍 BOUTON GPS 📍
---------------------------------------------------------- */

.gps-btn{
  font-size:16px;
}


/* ========================================================== 
BLOC CSS 07 - SOUVENIRS / PHOTOS ET ALBUMS 
---------------------------------------------------------- 

Gère : 

- Photos 
- Albums

- Souvenirs 
- Viewer 
- Partage
- Visibilite
- Options
- Information

========================================================== */

#photoViewerPanel{
  position:fixed;
  inset:0;
  z-index:999999;

  opacity:0;
  pointer-events:none;

  transition:0.25s;
}

#photoViewerPanel.is-open{
  opacity:1;
  pointer-events:auto;
}

.photo-viewer-shell{
  position:absolute;
  inset:0;

  background:#000;

  overflow:hidden;
}

/* Le viewer principal conserve exactement ses dimensions actuelles,
mais reprend le cadre visuel des autres fenêtres de l'application. */
.photo-viewer-shell:not(.is-trash-viewer){
  position:relative;
  inset:auto;
  flex:0 0 auto;
  width:min(760px, calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  box-sizing:border-box;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.58);
  overflow:hidden;
}

/* En mode fenêtre, les deux barres deviennent de vrais headers intégrés
au cadre, sur toute sa largeur, comme dans le viewer Corbeille. */
.photo-viewer-shell:not(.is-trash-viewer):not(.is-fullscreen) .photo-viewer-top{
  top:0;
  left:0;
  right:0;
  width:100%;
  height:58px;
  min-height:58px;
  box-sizing:border-box;
  transform:none;
  border:0;
  border-bottom:1px solid var(--glass-border);
  border-radius:0;
}

.photo-viewer-shell:not(.is-trash-viewer):not(.is-fullscreen) .photo-viewer-bottom{
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:108px;
  min-height:108px;
  box-sizing:border-box;
  transform:none;
  border:0;
  border-top:1px solid var(--glass-border);
  border-radius:0;
}

.photo-viewer-shell:not(.is-trash-viewer):not(.is-fullscreen) .photo-viewer-image-wrap{
  top:58px;
  right:0;
  bottom:108px;
  left:0;
  padding:0;
}

.photo-viewer-shell:not(.is-trash-viewer) .viewer-actions-dropdown{
  right:0;
  bottom:103px;
}


/* ==========================================================
🔝 TOP 🔝
---------------------------------------------------------- */

.photo-viewer-top{
  position:absolute;

  top:10px;
  left:50%;
  right:auto;
  width:min(calc(100% - 20px), 760px);
  transform:translateX(-50%);

  z-index:50;

  min-height:58px;

  border-radius:20px;

  padding:8px 10px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:var(--glass-bg);
  backdrop-filter:blur(18px);

  border:1px solid var(--glass-border);
}

.photo-viewer-top-center{
  width:100%;
}

.photo-viewer-top-line{
  width:100%;

  display:grid;
  grid-template-columns:1fr auto 1fr;

  align-items:center;
  min-height:24px; 
  transform:translateY(-2px);
}

.photo-viewer-date{
  font-size:11px;
  opacity:0.7;

  text-align:center;
}


.photo-viewer-country{
  justify-self:start;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:6px;

  white-space:nowrap;

  font-size:17px;
  font-weight:800;
  line-height:1;
}

.photo-viewer-poi{
  justify-self:end;
  align-self:center;

  margin-right:4px;

  width:14px;
  height:14px;

  border-radius:50%;

  display:block;

  background:#54e636;

  box-shadow:0 0 8px #54e636;
}

.photo-viewer-top-actions{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:8px;

  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  margin-top:0;
  transform:translateX(-50%);
}

.photo-viewer-city{
  justify-self:center;
  align-self:center;

  text-align:center;

  font-size:17px;
  font-weight:800;
  line-height:1;

  transform:none; 
}


/* ==========================================================
🖼️ IMAGE 🖼️
---------------------------------------------------------- */

.photo-viewer-image-wrap{
  position:absolute;

  top:var(--viewer-image-safe-top, 92px);
  right:0;
  bottom:var(--viewer-image-safe-bottom, 126px);
  left:0;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;

  padding:0 10px;

  transform:none;
  transition:
  top .28s ease,
  bottom .28s ease,
  padding .28s ease,
  transform .28s ease;
}

.photo-viewer-image-wrap.is-dragging{
  cursor:grabbing;
}

.photo-viewer-shell.is-fullscreen
.photo-viewer-image-wrap{
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:0;
  transform:none;
}

.photo-viewer-image{
  max-width:100%;
  max-height:100%;

  object-fit:contain;

  user-select:none;
  -webkit-user-drag:none;

  transition:
  max-width .28s ease,
  max-height .28s ease,
  transform .28s ease;
}

video.photo-viewer-image{
  width:auto;
  height:100%;
}

.photo-viewer-image.is-dragging{
  transition:none;
  transform:translateX(var(--viewer-drag-x, 0px));
}

.photo-viewer-shell:not(.is-trash-viewer).is-fullscreen img.photo-viewer-image{
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}


/* ==========================================================
🎞️ THUMBS 🎞️
---------------------------------------------------------- */

.photo-viewer-thumbs{
  position:absolute;

  left:12px;
  right:12px;
  bottom:70px;

  z-index:50;

  display:flex;
  gap:1px;

  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  touch-action:pan-x;
  cursor:grab;
  user-select:none;

  padding:14px calc(50% - 25px) 6px;

  background:
  linear-gradient(
  to top,
  rgba(0,0,0,0.50),
  rgba(0,0,0,0.16),
  transparent
  );
}

.photo-viewer-thumbs.is-dragging,
.viewer-share-preview.is-dragging,
.viewer-share-grid.is-dragging{
  cursor:grabbing;
}

.photo-viewer-thumbs::-webkit-scrollbar{
  display:none;
}

.viewer-thumb{
  width:42px;
  height:42px;

  border-radius:12px;

  object-fit:cover;

  flex-shrink:0;

  opacity:0.8;

  border:2px solid transparent;

  transition:0.2s;

  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}

.viewer-thumb.active{
  opacity:1;
  border-color:#2f8fff;
}


/* ==========================================================
🔻 BOTTOM 🔻
---------------------------------------------------------- */

.photo-viewer-bottom{
  position:absolute;

  left:50%;
  right:auto;
  width:min(calc(100% - 20px), 760px);
  transform:translateX(-50%);
  bottom:10px;

  z-index:50;

  min-height:60px;

  border-radius:20px;

  display:grid;

  grid-template-columns:80px 1fr 80px;
  grid-template-rows:auto auto;

  align-items:center;

  padding:10px;

  background:var(--glass-bg);
  backdrop-filter:blur(18px);

  border:1px solid var(--glass-border);
}

.photo-viewer-bottom-left{
  display:flex;
  justify-content:flex-start;
  padding-left:2px;
}

.photo-viewer-bottom-center{
  display:flex;
  justify-content:center;
}

.photo-viewer-bottom-right{
  display:flex;
  justify-content:flex-end;
  padding-right:2px;
}

/* Le vrai viewer reprend les 15 px latéraux des footers standards.
Le viewer Corbeille garde son espacement déjà validé. */
.photo-viewer-shell:not(.is-trash-viewer) .photo-viewer-bottom-left{
  padding-left:5px;
}

.photo-viewer-shell:not(.is-trash-viewer) .photo-viewer-bottom-right{
  padding-right:5px;
}

.photo-viewer-shell:not(.is-trash-viewer) .photo-viewer-bottom{
  padding-bottom:15px;
}


/* ==========================================================
BLOC CSS 08.01 - VIEWER / MINIATURES FOOTER

Gere :

- Miniatures du viewer photo
- Rail horizontal et selection active

---------------------------------------------------------- */

.photo-viewer-thumbs-footer{
  grid-column:1 / -1;

  display:flex;

  overflow-x:auto;
  overflow-y:hidden;

  margin-top:-4px;
  padding-bottom:6px;

  padding-left:calc(50% - 26px);
  padding-right:calc(50% - 26px);
}

.photo-viewer-thumbs-footer::-webkit-scrollbar{
  display:none;
}

.photo-viewer-bottom-left{
  grid-row:2;
}

.photo-viewer-bottom-center{
  grid-row:2;
}

.photo-viewer-bottom-right{
  grid-row:2;
}


/* ==========================================================
🎬 FULLSCREEN 🎬
---------------------------------------------------------- */

.photo-viewer-shell.is-fullscreen
.photo-viewer-top,

.photo-viewer-shell.is-fullscreen
.photo-viewer-bottom,

.photo-viewer-shell.is-fullscreen
.photo-viewer-thumbs-footer{
  opacity:0;
  pointer-events:none;
}


/* ==========================================================
👁️ DROPDOWN VISIBILITY 👁️
---------------------------------------------------------- */

.viewer-visibility-dropdown{
  position:absolute;

  top:106px;
  right:0px;

  z-index:200;

  min-width:190px;

  padding:8px;

  border-radius:18px;

  display:flex;
  flex-direction:column;

  gap:0;

  background:var(--glass-popover-bg);
  backdrop-filter:blur(20px);

  border:1px solid var(--glass-border);

  opacity:0;
  pointer-events:none;

  transform:translateY(-6px);

  transition:0.2s;
}

.viewer-visibility-dropdown.is-open{
  opacity:1;
  pointer-events:auto;

  transform:translateY(0);
}

.viewer-visibility-dropdown .viewer-share-body{
  display:flex;
  flex-direction:column;
  gap:8px;

  margin-top:8px;
  margin-bottom:0;
}


/* ==========================================================
BLOC CSS 08.02 - VIEWER / VISIBILITE

Gere :

- Menu de confidentialite
- Etats prive, amis et public

---------------------------------------------------------- */

.viewer-visibility-row{
  width:100%;
  min-height:38px;

  box-sizing:border-box;

  border:1px solid rgba(255,255,255,0.14);
  outline:none;

  background:rgba(255,255,255,.045);

  color:#fff;

  border-radius:999px;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:0 8px 0 12px;

  font-size:15px;
  font-weight:700;

  text-align:left;

  transition:.2s;
}

.viewer-visibility-row:hover{
  background:rgba(255,255,255,.09);
}


/* ==========================================================
👁️ ICÔNE + TEXTE 👁️
---------------------------------------------------------- */

.viewer-visibility-left{
  min-width:0;
  flex:1;

  display:flex;
  align-items:center;

  gap:10px;
}

.viewer-visibility-icon{
  width:30px;
  height:30px;

  flex:0 0 30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-sizing:border-box;

  font-size:16px;
  line-height:1;
}


/* ==========================================================
👁️ SWITCH OFF 👁️
---------------------------------------------------------- */

.viewer-visibility-switch{
  width:42px;
  height:22px;

  position:relative;

  flex:0 0 auto;

  border-radius:999px;

  background:rgba(255,255,255,.12);

  border:1px solid rgba(255,255,255,.12);

  transition:.2s;
}

.viewer-visibility-switch::after{
  content:'';

  position:absolute;

  top:50%;
  left:3px;

  width:16px;
  height:16px;

  border-radius:999px;

  background:#fff;

  transform:translateY(-50%);

  transition:.2s;
}


/* ==========================================================
✅ SWITCH ON
---------------------------------------------------------- */

.viewer-visibility-row.is-active .viewer-visibility-switch{
  background:linear-gradient(
  90deg,
  #2f8fff,
  #5fb8ff,
  #2f8fff
  );
}

.viewer-visibility-row.is-active .viewer-visibility-switch::after{
  left:21px;
}

.profile-lifevision-visibility-dropdown .viewer-visibility-switch::after{
  top:2px;
  left:2px;
  transform:translateX(0);
  transition:transform .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.profile-lifevision-visibility-dropdown .viewer-visibility-row.is-active .viewer-visibility-switch::after{
  left:2px;
  transform:translateX(20px);
}

/* La piste change d'etat sans interpolation gradient/couleur : l'ancien
choix reste gris pendant que la boule termine son mouvement. */
.profile-lifevision-visibility-dropdown .viewer-visibility-switch{
  background:rgba(255,255,255,.16);
  transition:border-color .2s ease, box-shadow .2s ease;
}

.profile-lifevision-visibility-dropdown .viewer-visibility-row.is-active .viewer-visibility-switch{
  background:linear-gradient(90deg, #2f8fff, #5fb8ff, #2f8fff);
}


/* ==========================================================
📚 MODE ALBUM OUVERT 📚
---------------------------------------------------------- */

.photo-viewer-shell.album-dropdown-open .photo-viewer-bottom{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(12px);
}

.photo-viewer-bottom{
  transition:
  opacity .2s ease,
  transform .2s ease;
}


/* ==========================================================
BLOC CSS 08.03 - VIEWER / MENU ALBUM

Gere :

- Menu ajouter aux albums
- Liste, etats actifs et scroll

---------------------------------------------------------- */

.viewer-album-dropdown{
  position:absolute;

  top:106px;

  right:50%;
  translate:50% 0;

  z-index:200;

  min-width:400px;
  width:max-content;
  max-width:460px;

  padding:8px;

  border-radius:18px;

  display:flex;
  flex-direction:column;

  gap:6px;

  background:var(--glass-popover-bg);
  backdrop-filter:blur(20px);

  border:1px solid var(--glass-border);

  height:calc(100dvh - 106px - 20px);
  max-height:calc(100dvh - 106px - 20px);
  overflow:hidden;

  opacity:0;
  pointer-events:none;

  transform:translateY(-6px);

  transition:0.2s;
}

.viewer-album-dropdown::-webkit-scrollbar{
  width:0;
  height:0;
}

.viewer-album-dropdown{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.viewer-album-dropdown.is-open{
  opacity:1;
  pointer-events:auto;

  transform:translateY(0);
}


/* ==========================================================
BLOC CSS 08.04 - ALBUM / HEADER SIMPLE

Gere :

- Header du menu album
- Titre et contexte de selection

---------------------------------------------------------- */

.viewer-album-header{
  width:100%;
  box-sizing:border-box;

  min-height:58px;

  border:1px solid rgba(255,255,255,0.08);
  outline:none;

  background:rgba(255,255,255,.05);

  color:#fff;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;

  text-align:center;

  flex-shrink:0;
}

.viewer-album-header-title{
  font-size:16px;
  font-weight:800;
  text-align:center;
  color:#fff;
}

.viewer-album-header-sub{
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.62);
  text-align:center;
}


/* ==========================================================
📚 BODY SCROLLABLE ALBUM 📚
---------------------------------------------------------- */

.viewer-album-body{
  display:flex;
  flex-direction:column;
  gap:6px;

  flex:1;
  min-height:0;

  padding:2px 0;

  overflow-y:auto;
  overflow-x:hidden;

  scrollbar-width:none;
  -ms-overflow-style:none;

  opacity:1;
  transform:translateY(0);

  transition:
  opacity .16s ease,
  transform .16s ease;
}

.viewer-album-body::-webkit-scrollbar{
  width:0;
  height:0;
}


/* ==========================================================
BLOC CSS 08.05 - ALBUM / FOOTER FIXE

Gere :

- Footer du menu album
- Actions creer et annuler

---------------------------------------------------------- */

.viewer-album-footer{
  width:100%;
  box-sizing:border-box;

  min-height:38px;

  border:1px solid rgba(255,255,255,0.08);
  outline:none;

  background:rgba(255,255,255,.05);

  color:#fff;

  border-radius:999px;

  cursor:pointer;
  font-size:15px;
  font-weight:800;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:0 14px;

  text-align:center;

  transition:0.2s;

  flex-shrink:0;
}

.viewer-album-footer-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  flex-shrink:0;
}

.viewer-album-footer:hover{
  background:rgba(255,255,255,.09);
}


/* ==========================================================
📚 LIGNE ALBUM 📚
---------------------------------------------------------- */

.viewer-album-row{
  width:100%;
  box-sizing:border-box;

  min-height:38px;

  border:1px solid rgba(255,255,255,0.08);
  outline:none;

  background:rgba(255,255,255,.05);

  color:#fff;

  border-radius:999px;

  cursor:pointer;
  font-size:15px;
  font-weight:700;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:10px;

  padding:0 8px 0 14px;

  text-align:left;

  transition:0.2s;
}

.viewer-album-row:hover{
  background:rgba(255,255,255,.09);
}


/* ==========================================================
📚 NOM ALBUM 📚
---------------------------------------------------------- */

.viewer-album-name{
  min-width:0;
  flex:1;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ==========================================================
🔘 SWITCH ALBUM 🔘
---------------------------------------------------------- */

.viewer-album-switch{
  width:42px;
  height:22px;

  margin-left:auto;

  border-radius:999px;

  position:relative;

  background:rgba(255,255,255,0.16);

  border:1px solid rgba(255,255,255,0.12);

  flex-shrink:0;

  transition:0.2s;
}

.viewer-album-switch::after{
  content:"";

  position:absolute;

  top:50%;
  left:3px;

  width:16px;
  height:16px;

  border-radius:999px;

  background:#fff;

  transform:translateY(-50%);

  transition:0.2s;
}


/* ==========================================================
✅ SWITCH ON ✅
---------------------------------------------------------- */

.viewer-album-row.is-active .viewer-album-switch{
  background:linear-gradient(
  90deg,
  #2f8fff,
  #5fb8ff,
  #2f8fff
  );
}

.viewer-album-row.is-active .viewer-album-switch::after{
  left:21px;
}


/* ==========================================================
📭 VIDE 📭
---------------------------------------------------------- */

.viewer-album-empty{
  width:100%;
  box-sizing:border-box;

  min-height:38px;

  border:1px solid rgba(255,255,255,0.08);
  outline:none;

  background:rgba(255,255,255,.05);

  color:rgba(255,255,255,0.72);

  border-radius:999px;

  font-weight:700;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:0 14px;

  text-align:center;

  transition:0.2s;
}


/* ==========================================================
📤 MODE PARTAGE OUVERT 📤
---------------------------------------------------------- */

.photo-viewer-shell.share-dropdown-open .photo-viewer-bottom{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(12px);
}


/* ==========================================================
BLOC CSS 08.06 - VIEWER / MENU PARTAGE

Gere :

- Menu de partage
- Apercus et destinations sociales

---------------------------------------------------------- */

.viewer-share-dropdown{
  position:absolute;

  top:106px;

  right:50%;
  translate:50% 0;

  z-index:210;

  min-width:400px;
  width:max-content;
  max-width:460px;

  padding:8px;

  border-radius:18px;

  display:flex;
  flex-direction:column;

  gap:8px;

  background:var(--glass-popover-bg);
  backdrop-filter:blur(20px);

  border:1px solid var(--glass-border);

  height:calc(100dvh - 106px - 20px);
  max-height:calc(100dvh - 106px - 20px);
  overflow:hidden;

  opacity:0;
  pointer-events:none;

  transform:translateY(-6px);

  transition:0.2s;
}

.viewer-share-dropdown.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.viewer-share-dropdown::-webkit-scrollbar{
  width:0;
  height:0;
}

.viewer-share-dropdown{
  scrollbar-width:none;
  -ms-overflow-style:none;
}


/* ==========================================================
✅ HEADER ✅
---------------------------------------------------------- */

.viewer-share-header{
  width:100%;
  box-sizing:border-box;

  min-height:58px;

  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,.05);

  color:#fff;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;

  text-align:center;

  flex-shrink:0;
}

.viewer-share-header-title{
  font-size:16px;
  font-weight:800;
  color:#fff;
}

.viewer-share-header-sub{
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.62);
}


/* ==========================================================
✅ BODY ✅
---------------------------------------------------------- */

.viewer-share-body{
  flex:1;
  min-height:0;

  overflow-y:auto;
  overflow-x:hidden;

  display:flex;
  flex-direction:column;
  gap:8px;

  padding:0;

  scrollbar-width:none;
  -ms-overflow-style:none;
}

.viewer-share-body::-webkit-scrollbar{
  width:0;
  height:0;
}

.viewer-share-body-compact{
  margin-top:8px;
  margin-bottom:0;
}


/* ==========================================================
✅ PHOTOS PREVIEW ✅
---------------------------------------------------------- */

.viewer-share-preview{
  display:flex;
  gap:6px;

  overflow-x:auto;
  overflow-y:hidden;

  padding:1px 0;

  scroll-snap-type:x mandatory;

  scrollbar-width:none;
  -ms-overflow-style:none;
  touch-action:pan-x;
  cursor:grab;
  user-select:none;
}

.viewer-share-preview::-webkit-scrollbar{
  width:0;
  height:0;
}

.viewer-share-photo{
  position:relative;

  width:calc((100% - 16px) / 3);
  height:112px;
  flex:0 0 calc((100% - 16px) / 3);
  scroll-snap-align:center;

  border-radius:14px;
  overflow:hidden;

  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,0.08);

  padding:0;
  cursor:pointer;
  outline:none;
}

.viewer-share-spacer{
  width:calc((100% - 16px) / 3);
  min-width:calc((100% - 16px) / 3);
  max-width:calc((100% - 16px) / 3);
  height:112px;
  flex:0 0 calc((100% - 16px) / 3);
  pointer-events:none;
}

.viewer-share-photo img,
.viewer-share-photo video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.viewer-share-check{
  position:absolute;
  right:8px;
  bottom:8px;

  width:18px;
  height:18px;

  border-radius:5px;

  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.45);
  opacity:0;
  visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:10px;
  font-weight:950;
  line-height:1;
}

.viewer-share-photo.is-active .viewer-share-check{
  background:linear-gradient(135deg,#fff,#dce2e8,#fff);
  border-color:#fff;
  color:#111;
  box-shadow:0 0 10px rgba(255,255,255,.3);
  opacity:1;
  visibility:visible;
}

.viewer-share-photo.is-active{
  border-color:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(255,255,255,.92), 0 0 14px rgba(255,255,255,.18);
}

.viewer-share-preview-wrap{
  position:relative;
  width:100%;
}


/* ==========================================================
✅ TABS ✅
---------------------------------------------------------- */

.viewer-share-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:0;
}

.viewer-share-tab{
  min-height:36px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,.05);

  color:#fff;

  font-size:15px;
  font-weight:700;

  display:flex;
  align-items:center;
  justify-content:center;
}

.viewer-share-tab.is-active{
  border-color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 14px rgba(255,255,255,.18);
}

.viewer-share-tab:hover{
  background:rgba(255,255,255,.09);
}

.viewer-share-tab.is-active:hover{
  border-color:#fff;
  background:rgba(255,255,255,.14);
  box-shadow:0 0 16px rgba(255,255,255,.24);
}

/* ==========================================================
✅ ACTIONS SHARE ✅
---------------------------------------------------------- */

.viewer-share-row-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
}

.viewer-share-grid{
  display:flex;
  gap:5px;

  overflow-x:auto;
  overflow-y:hidden;

  scrollbar-width:none;
  -ms-overflow-style:none;

  width:100%;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
  touch-action:pan-x;
  cursor:grab;
  user-select:none;
}

.viewer-share-grid .viewer-share-action{
  flex:0 0 60px;
  width:60px;
  min-width:60px;
  max-width:60px;
  padding:0;
  box-sizing:border-box;
}

.viewer-share-action{
  border:none;
  outline:none;
  background:transparent;
  color:#fff;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  gap:6px;
  cursor:pointer;

  font-size:12px;
  font-weight:700;
  text-align:center;
}

.viewer-share-icon{
  width:54px;
  height:54px;

  border-radius:15px;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,0.08);
}

.viewer-share-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:15px;
}

.viewer-share-separator{
  height:1px;
  background:rgba(255,255,255,0.14);
  margin:-1px;
  flex-shrink:0;
}


/* ==========================================================
✅ FOOTER ✅
---------------------------------------------------------- */

.viewer-share-footer{
  width:100%;
  box-sizing:border-box;

  min-height:38px;

  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,.05);

  color:#fff;

  border-radius:999px;

  cursor:pointer;

  font-size:15px;
  font-weight:800;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 14px;

  transition:0.2s;

  flex-shrink:0;

}

.viewer-share-footer:hover{
  background:rgba(255,255,255,.09);
}


/* ==========================================================
✅ ALBUM ✅
---------------------------------------------------------- */

.viewer-share-album-card{
  position:relative;
}

.viewer-share-album-count{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;

  color:#fff;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  padding-left:8px;
  box-sizing:border-box;

  font-size:11px;
  font-weight:900;
  text-shadow:0 2px 6px rgba(0,0,0,.85);

  pointer-events:none;
}


/* ==========================================================
📂 DROPDOWN ACTIONS 📂
---------------------------------------------------------- */

.viewer-actions-dropdown{
  position:absolute;

  right:-10px;
  bottom:112px;

  z-index:300;

  min-width:270px;

  padding:8px;

  border-radius:18px;

  display:flex;
  flex-direction:column;

  gap:0;

  background:var(--glass-popover-bg);
  backdrop-filter:blur(20px);

  border:1px solid var(--glass-border);

  opacity:0;
  pointer-events:none;

  transform:translateY(6px);

  transition:0.2s;
}

.viewer-actions-dropdown.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.viewer-actions-dropdown button:not(.viewer-actions-footer){
  min-height:38px;

  box-sizing:border-box;

  border:1px solid rgba(255,255,255,0.08);
  outline:none;

  background:rgba(255,255,255,.05);

  color:#fff;

  border-radius:999px;

  font-weight:700;
  font-size:15px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:0 14px;

  text-align:left;

  transition:0.2s;
}

.viewer-actions-dropdown .viewer-share-body{
  display:flex;
  flex-direction:column;
  gap:8px;

  margin-top:8px;
  margin-bottom:0;
}

.viewer-actions-dropdown button:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16);
}



/* ==========================================================
BLOC CSS 08.07 - VIEWER / HOVER COMMUN

Gere :

- Effets hover du viewer
- Feedback commun des actions

---------------------------------------------------------- */

.viewer-album-footer:hover,
.viewer-share-footer:hover,
.viewer-actions-dropdown button:hover,
.viewer-visibility-dropdown button:hover{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#fff !important;
}


/* ==========================================================
BLOC CSS 09 - DIALOGUES, FORMULAIRES, IMPORTATION ET MISES A JOUR

Gere :

- Modales generiques
- Prompt, confirmation et alertes app

---------------------------------------------------------- */

/* ===========================================================
BLOC CSS 09.01 - DIALOGUE GLOBAL : STRUCTURE
=========================================================== */

#globalModal{
  z-index:999999;
}


/* ==========================================================
📦 BOX 📦
---------------------------------------------------------- */

.global-modal-box{

  width:min(92vw, 380px);

  padding:20px;

  border-radius:22px;

  display:flex;
  flex-direction:column;

  gap:18px;

  animation:modalPop .18s ease;
}


/* ==========================================================
📝 TITRE 📝
---------------------------------------------------------- */

.global-modal-title{

  font-size:18px;
  font-weight:800;

  text-align:center;

  color:#fff;
}


/* ==========================================================
📄 TEXTE 📄
---------------------------------------------------------- */

.global-modal-text{

  font-size:15.5px;
  font-weight:500;

  line-height:1.5;

  text-align:center;

  color:rgba(255,255,255,0.78);
}


/* ==========================================================
✏️ INPUT ✏️
---------------------------------------------------------- */

.global-modal-input{

  width:100%;
  min-height:46px;

  border:none;
  outline:none;

  border-radius:14px;

  padding:0 14px;

  font-size:14px;
  font-weight:600;

  color:#fff;

  background:rgba(255,255,255,0.06);

  border:1px solid rgba(255,255,255,0.10);

  box-sizing:border-box;
}

.global-modal-input::placeholder{
  color:rgba(255,255,255,0.35);
}

.global-modal-label{
  width:100%;
  margin-bottom:-10px;
  padding-left:6px;
  box-sizing:border-box;

  color:#fff;
  font-size:13px;
  font-weight:800;
  opacity:.85;
  text-align:left;
}

/* ==========================================================
🔘 ACTIONS 🔘
---------------------------------------------------------- */

.global-modal-actions{

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:10px;
}

.global-modal-actions.is-single{
  grid-template-columns:1fr;
}


/* ==========================================================
🔘 BTN MODAL 🔘
---------------------------------------------------------- */

.global-modal-btn{

  min-height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:15.5px;
  font-weight:800;

  color:#fff !important;

  opacity:1 !important;

  background:rgba(255,255,255,.09) !important;

  border:1px solid rgba(255,255,255,.16) !important;

  box-shadow:none !important;
}

.global-modal-btn:disabled{
  opacity:.45 !important;
  pointer-events:none !important;
}

.global-modal-input.is-error{
  border-color:rgba(255,90,90,.75) !important;
}


/* ==========================================================
🗑️ SUPPRIMER — POPUP + MENU 3 POINTS 🗑️
---------------------------------------------------------- */

/* ===========================================================
BLOC CSS 09.02 - ACTIONS DE SUPPRESSION PARTAGEES
=========================================================== */

.global-modal-btn.global-modal-delete,
.viewer-actions-dropdown button[data-action="delete"],
.album-actions-row.is-danger{

  color:#fff !important;

  opacity:1 !important;

  background:rgba(255,70,70,.45) !important;

  border:1px solid rgba(255,255,255,.16) !important;

  box-shadow:none !important;
}

.global-modal-btn.global-modal-delete:hover,
.viewer-actions-dropdown button[data-action="delete"]:hover,
.album-actions-row.is-danger:hover{

  color:#fff !important;

  opacity:1 !important;

  background:rgba(255,90,90,.58) !important;

  border:1px solid rgba(255,255,255,.16) !important;

  box-shadow:none !important;
}

/* ===========================================================
BLOC CSS 09.03 - LOCALISATION : SUGGESTIONS
=========================================================== */

.manual-location-suggestions{
  scrollbar-width:none;
}

.manual-location-suggestions::-webkit-scrollbar{
  width:0;
  height:0;
}

/* ===========================================================
BLOC CSS 09.04 - ALBUM : FORMULAIRE DE CREATION
=========================================================== */

#createAlbumPanel.is-open{
  /* Album creation can be opened from the photo viewer (999999). */
  z-index:1000100;
}

.create-album-panel-body{
  min-height:0;
  gap:12px;
  overflow-y:auto;
}

.create-album-form{
  display:grid;
  gap:12px;
}

.create-album-field{
  display:grid;
  gap:6px;
}

.create-album-label{
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:800;
}

.create-album-input{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  padding:0 12px;
  font:inherit;
  font-size:14px;
  font-weight:700;
  outline:none;
}

.create-album-input::placeholder{
  color:rgba(255,255,255,.46);
}

.create-album-input:focus{
  border-color:rgba(47,143,255,.82);
  box-shadow:0 0 0 1px rgba(47,143,255,.28);
}

.create-album-input.is-error{
  border-color:rgba(255,90,90,.85);
  box-shadow:0 0 0 1px rgba(255,90,90,.30);
}

.create-album-note{
  min-height:150px;
  padding:12px;
  line-height:1.45;
  resize:vertical;
}

.create-album-error{
  display:none;
  color:#ff6b6b;
  font-size:12px;
  font-weight:800;
  text-align:center;
}

.create-album-error.is-visible{
  display:block;
}

#createAlbumValidate.global-modal-create:hover{
  color:#fff;
  border-color:rgba(255,255,255,.20);
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
}

/* ===========================================================
BLOC CSS 09.05 - LOCALISATION : FORMULAIRE ET ERREURS
=========================================================== */

#manualLocationPanel.is-open{
  z-index:100100;
}
.manual-location-panel-body{
  gap:12px;
}

#manualLocationValidate.global-modal-create:hover{
  color:#fff;
  border-color:rgba(255,255,255,.20);
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
}


.manual-location-error{
  display:none;
  margin-bottom:10px;
  color:#ff6b6b;
  font-size:13px;
  font-weight:800;
}

.manual-location-error.is-visible{
  display:block;
}

.manual-location-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.manual-location-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  gap:8px;
}

.manual-location-label{
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
}

.manual-location-field{
  width:100%;
  position:relative;
  display:block;
}

.manual-location-input{
  width:100%;
  min-height:36px;
  margin:0;
  padding:0 10px;
  border-radius:12px;
  text-align:right;
  box-sizing:border-box;
}

.manual-location-field.has-leading-icon .manual-location-input{
  padding-left:40px;
}

.manual-location-leading-icon{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:18px;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
  font-size:16px;
  line-height:1;
}

.manual-location-leading-icon.is-visible{
  display:flex;
}

.manual-location-leading-icon img{
  width:18px;
  height:12px;
  object-fit:cover;
}
.manual-location-input.is-error{
  border-color:rgba(255,90,90,.85) !important;
  box-shadow:0 0 0 1px rgba(255,90,90,.35) !important;
}

.manual-location-input-with-error{
  padding-right:30px;
}

.manual-location-error-icon{
  display:none;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:999px;
  background:#ff4d4d;
  color:#fff;
  font-size:12px;
  font-weight:900;
  align-items:center;
  justify-content:center;
}

.manual-location-error-icon.is-visible{
  display:flex;
}

.manual-location-suggestions-panel{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 5px);
  padding:5px;
  border-radius:12px;
  background:rgba(0,0,0,.94);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  max-height:230px;
  overflow:auto;
}

.manual-location-suggestions-panel.is-open{
  display:block;
}

.manual-location-suggestions-panel.is-continent{
  z-index:50;
}

.manual-location-suggestions-panel.is-country{
  z-index:45;
}
.manual-location-suggestions-panel .profile-edit-country-suggestion{
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:0 10px;
  margin:0 0 4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:rgba(255,255,255,.055);
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-align:left;
  box-sizing:border-box;
}

.manual-location-suggestions-panel .profile-edit-country-suggestion:last-child{
  margin-bottom:0;
}

.manual-location-suggestions-panel .profile-edit-country-suggestion:hover{
  border-color:rgba(47,143,255,.55);
  background:rgba(47,143,255,.20);
}

/* ===========================================================
BLOC CSS 09.06 - ATTRIBUTS VISUELS DYNAMIQUES
=========================================================== */

[data-dynamic-color]{
  background:var(--dynamic-color);
}

[data-dynamic-glow]{
  box-shadow:0 0 var(--dynamic-glow-size,16px) var(--dynamic-glow);
}

.has-dynamic-bg,
[data-bg-url]{
  background-image:var(--dynamic-bg-image, none);
  background-position:var(--dynamic-bg-position, 50% 50%);
}

[data-progress-width]{
  width:var(--progress-width,0%);
}

/* ===========================================================
BLOC CSS 09.07 - MENUS OPTIONS ET INTERRUPTEURS
=========================================================== */

.album-actions-dropdown{
  position:absolute;
  z-index:300;
  min-width:230px;
  padding:8px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:0;
  background:var(--glass-popover-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:.2s;
}

.footer-dropdown-anchor{
  position:relative;
}

.footer-dropdown-popover{
  top:auto;
  left:auto;
  right:10px;
  bottom:calc(100% + 10px);
}

.footer-dropdown-popover.is-medium{
  min-width:210px;
}

.footer-dropdown-popover.is-wide{
  min-width:230px;
}

.album-actions-dropdown.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.viewer-share-body.is-options-body{
  margin-top:8px;
  margin-bottom:0;
}

.album-actions-header{
  width:100%;
  min-height:58px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,.05);
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:8px 12px;
  text-align:center;
  flex-shrink:0;
}

.album-actions-title{
  font-size:16px;
  font-weight:800;
  color:#fff;
}

.album-actions-sub{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.62);
}

.album-actions-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
  margin-bottom:0;
}

.album-actions-row{
  width:100%;
  min-height:38px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,0.08);
  outline:none;
  background:rgba(255,255,255,.05);
  color:#fff;
  border-radius:999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  font-size:15px;
  font-weight:700;
  text-align:left;
  transition:.2s;
}

.album-actions-row:hover{
  background:rgba(255,255,255,.09);
}

.album-actions-label{
  flex:1;
}

.album-actions-switch{
  width:42px;
  height:22px;
  border-radius:999px;
  position:relative;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  flex:0 0 42px;
  transition:.2s;
}

.album-actions-switch::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#fff;
  transition:.2s;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.album-actions-row.is-active .album-actions-switch{
  background:var(--dynamic-color, linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff));
  box-shadow:0 0 var(--dynamic-glow-size,14px) var(--dynamic-glow, rgba(47,143,255,.26));
}

.album-actions-row.is-active .album-actions-switch::after{
  transform:translateX(20px);
}

.album-actions-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}











/* ===========================================================
BLOC CSS 09.08 - NAVIGATION : ICONES ET ANNEES
=========================================================== */

.navigation-row-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 30px;
  box-sizing:border-box;
  line-height:1;
}

.navigation-row-icon.is-bare{
  width:auto;
  height:auto;
  flex:0 0 auto;
  border:0;
  border-radius:0;
  background:transparent;
}

.souvenir-year-row{
  gap:8px;
}

.souvenir-year-row.is-gallery-year-row .navigation-row-icon.is-bare{
  width:20px;
  height:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
  font-size:12px;
}

.souvenir-year-row.is-navigation-year-row .navigation-row-icon.is-bare{
  width:20px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
  font-size:13px;
}

.souvenir-year-row > :nth-child(2),
.souvenir-year-row .legend-name{
  font-size:inherit;
  font-weight:600;
}

.navigation-row-icon .navigation-row-flag{
  width:18px;
  height:12px;
  border-radius:3px;
  margin:0;
  object-fit:cover;
}

.network-row .navigation-row-flag.is-bare{
  width:18px;
  height:12px;
  border-radius:3px;
  margin-left:6px;
  object-fit:cover;
}
.network-row .network-arrow{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}

.network-row:hover .network-arrow{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.1);
  color:#fff;
}
/* ===========================================================
BLOC CSS 09.09 - ALBUMS : MODIFICATION ET VALIDATION
=========================================================== */

.album-row-clickable{
  cursor:pointer;
}

.album-edit-row.is-editing{
  border-color:#2f8fff !important;
  box-shadow:0 0 0 1px #2f8fff inset;
}

.album-mode-pencil{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
  font-size:15px;
}

.album-edit-fields{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.album-edit-input{
  width:100%;
  min-width:0;
  height:34px;
  box-sizing:border-box;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#fff;
  padding:0 10px;
  font-size:13px;
  font-weight:700;
  outline:none;
}

.album-edit-input::placeholder{
  color:rgba(255,255,255,.45);
}

.album-edit-input:focus{
  border-color:#2f8fff;
  background:rgba(47,143,255,.12);
}

.album-footer-delete{
  background:rgba(255,70,70,.45) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

.album-footer-validate{
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

.confidentiality-visibility-validate.album-footer-validate{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}

.confidentiality-visibility-validate.album-footer-validate:hover{
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}

.album-cover-validate.album-footer-validate{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}

.album-cover-validate.album-footer-validate:hover{
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}


/* ==========================================================
❌ CANCEL ❌
---------------------------------------------------------- */

/* ===========================================================
BLOC CSS 09.10 - DIALOGUES : ACTIONS ANNULER ET CREER
=========================================================== */

#globalModalCancel{

  color:#fff !important;

  background:rgba(255,255,255,.05) !important;

  border:1px solid rgba(255,255,255,0.08) !important;
}

#globalModalCancel:hover{

  color:#fff !important;

  background:rgba(255,255,255,.09) !important;

  border:1px solid rgba(255,255,255,0.08) !important;
}



/* ==========================================================
âž• CREATE BUTTON âž•
---------------------------------------------------------- */

.global-modal-create{

  color:#fff;

  border:1px solid rgba(255,255,255,.16);

  background:linear-gradient(
  90deg,
  #2f8fff,
  #5fb8ff,
  #2f8fff
  );
}

/* ===========================================================
BLOC CSS 09.11 - IMPORTATION : SOURCES ET ACTIONS
=========================================================== */

.import-source-carousel{
  display:block;
  min-width:0;
}

#importSourcePanel .panel-body{
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  scrollbar-width:none;
}

#importSourcePanel .panel-body::-webkit-scrollbar{
  display:none;
}

.import-source-track{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 0 2px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  width:100%;
  touch-action:pan-x pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

.import-source-track.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

.import-source-help{
  margin-top:2px;
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  gap:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  overflow:hidden;
}

.import-source-privacy{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  padding:10px 14px;
  color:rgba(255,255,255,.66);
  font-size:11.5px;
  font-weight:700;
  text-align:center;
  line-height:1.35;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
}

.import-source-privacy-icon{
  flex:0 0 auto;
  color:#fff;
  font-size:13px;
  line-height:1;
  transform:translateY(-2px);
}

.import-source-help-title{
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  padding:12px 14px;
  color:#fff;
  font-size:14px;
  font-weight:850;
  text-align:center;
}

.import-source-help-list{
  margin:0;
  padding:0 14px;
  list-style:none;
  display:flex;
  flex-direction:column;
}

.import-source-help-list li{
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:10px 0;
  color:rgba(255,255,255,.76);
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:9px;
}

.import-source-help-list li:last-child{
  border-bottom:0;
}

.import-source-step-number{
  width:24px;
  height:24px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:850;
  color:#fff;
  box-sizing:border-box;
}

.import-source-step-text{
  min-width:0;
}

.import-source-track::-webkit-scrollbar{
  display:none;
}

.import-source-card{
  --import-accent:#fff;
  flex:0 0 92px;
  height:124px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  scroll-snap-align:start;
  position:relative;
  transition:.2s;
}

.import-source-card[data-import-source="folder-pc"]{
  --import-accent:#FFB84D;
}

.import-source-card[data-import-source="facebook"]{
  --import-accent:#1877F2;
}

.import-source-card[data-import-source="snapchat"]{
  --import-accent:#FFFC00;
}

.import-source-card[data-import-source="icloud"]{
  --import-accent:#5AC8FA;
}

.import-source-card[data-import-source="google-photos"]{
  --import-accent:#4285F4;
}

.import-source-card[data-import-source="phone"]{
  --import-accent:#34C759;
}

.import-source-card.is-selected{
  border-color:var(--import-accent);
  box-shadow:0 0 0 1px var(--import-accent) inset;
}

.import-source-card:hover{
  border-color:var(--import-accent);
  background:color-mix(in srgb, var(--import-accent) 10%, rgba(255,255,255,.035));
}

.import-source-card.is-disabled{
  opacity:1;
}

.import-source-card.is-disabled.is-selected{
  opacity:1;
}

.import-source-plus{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border:2px dashed var(--import-accent);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:38px;
  line-height:1;
  font-weight:300;
  box-sizing:border-box;
  box-shadow:0 0 14px color-mix(in srgb, var(--import-accent) 46%, transparent);
  pointer-events:none;
}

.import-source-card[data-import-source="google-photos"] .import-source-plus{
  border-top-color:#4285F4;
  border-right-color:#EA4335;
  border-bottom-color:#FBBC05;
  border-left-color:#34A853;
  box-shadow:
  0 0 11px rgba(66,133,244,.34),
  0 0 15px rgba(52,168,83,.18);
}

.import-source-name{
  font-size:12px;
  font-weight:800;
  text-align:center;
}







.import-source-footer-slot{
  flex:1;
  display:flex;
  justify-content:center;
  padding:0 5px;
  box-sizing:border-box;
}

#importSourcePanel .panel-footer,
#updatesPanel .panel-footer{
  gap:10px;
  padding:14px;
}

#importSourcePanel .import-source-footer-slot,
#updatesPanel .import-source-footer-slot{
  padding:0;
}

.import-source-footer-btn{
  width:100%;
  min-height:38px;
  justify-content:center;
  opacity:1 !important;
  border-radius:12px;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.16) !important;
  transition:background .18s ease, border-color .18s ease, opacity .18s ease;
}

#importSourceValidate:disabled{
  opacity:1 !important;
  color:#fff !important;
  cursor:default;
  filter:none;
  box-shadow:none;
}

#importSourceValidate:not(:disabled){
  opacity:1 !important;
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff) !important;
  border-color:rgba(255,255,255,.20) !important;
  filter:none;
}

#importSourceCancel:hover{
  background:rgba(255,255,255,.05) !important;
}

#importSourceValidate:hover{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}

/* ===========================================================
BLOC CSS 12.55 - Importer des souvenirs : même survol gris pour Valider et Annuler
=========================================================== */
#importSourcePanel #importSourceValidate:not(:disabled):hover{
  border-color:rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.05) !important;
  box-shadow:none !important;
}
#importSourcePanel.is-open #importSourceValidate:disabled{
  pointer-events:auto !important;
}
#importSourcePanel #importSourceValidate:disabled:hover{
  border-color:rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.05) !important;
  box-shadow:none !important;
}

/* ===========================================================
BLOC CSS 09.12 - MISES A JOUR : SECTIONS ET CONTENU
=========================================================== */

.updates-panel-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.updates-panel-body{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.updates-panel-body::-webkit-scrollbar{
  width:0;
  height:0;
}

.updates-panel-section{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  overflow:hidden;
}

.updates-panel-section-head{
  min-height:48px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);
  box-sizing:border-box;
}

.updates-panel-kicker{
  color:#fff;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
}

.updates-panel-version{
  flex:0 0 auto;
  min-height:26px;
  padding:0 10px;
  border:1px solid #fff;
  border-radius:10px;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035));
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 14px rgba(255,255,255,.18);
}
.updates-panel-section.is-current .updates-panel-section-head{
  justify-content:center;
}

.updates-panel-section-content{
  padding:10px;
}

.updates-panel-current{
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-sizing:border-box;
}

.updates-panel-current strong{
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.updates-panel-current-status{
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.updates-panel-items{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.updates-panel-item{
  min-width:0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  display:flex;
  flex-direction:column;
  gap:4px;
}

.updates-panel-item-title{
  color:#fff;
  font-size:15px;
  font-weight:900;
  line-height:1.25;
}

.updates-panel-item-description{
  color:rgba(255,255,255,.7);
  font-size:12px;
  font-weight:650;
  line-height:1.35;
}

.updates-panel-section-status{
  margin-top:8px;
  color:rgba(255,255,255,.58);
  font-size:11px;
  font-weight:800;
  text-align:center;
}


/* ==========================================================
🎬 ANIM 🎬
---------------------------------------------------------- */

/* ===========================================================
BLOC CSS 09.13 - ANIMATIONS DES DIALOGUES
=========================================================== */

@keyframes modalPop{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@keyframes successGlow{
  0%{
    box-shadow:
    0 10px 34px var(--glass-shadow),
    0 0 0 rgba(255,255,255,0),
    0 0 0 rgba(210,230,255,0);
  }
  12%{
    box-shadow:
    0 10px 34px var(--glass-shadow),
    0 0 0 2px rgba(255,255,255,.95),
    0 0 26px rgba(255,255,255,.88),
    0 0 64px rgba(235,245,255,.58),
    0 0 112px rgba(255,255,255,.30);
  }
  34%{
    box-shadow:
    0 10px 34px var(--glass-shadow),
    0 0 0 1px rgba(255,255,255,.38),
    0 0 22px rgba(255,255,255,.42),
    0 0 54px rgba(235,245,255,.20);
  }
  100%{
    box-shadow:
    0 10px 34px var(--glass-shadow),
    0 0 0 rgba(255,255,255,0),
    0 0 0 rgba(210,230,255,0);
  }
}


/* ==========================================================
BLOC CSS 10.01 - VIEWER / INFO MODAL

Gere :

- Details supplementaires du viewer
- Metadonnees et informations media

---------------------------------------------------------- */

.viewer-info-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;

  padding:10px;

  background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}

.viewer-info-overlay.is-open{
  display:flex;
}

.viewer-info-box{
  width:min(420px, 94vw);
  height:calc(100vh - 20px);
  overflow:hidden;

  display:flex;
  flex-direction:column;

  border-radius:26px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  box-shadow:0 22px 70px var(--glass-shadow);
  color:#fff;
  overflow:hidden;
}

.viewer-info-head{
  padding:8px 20px 8px;
  border-bottom:1px solid rgba(255,255,255,.12);
  text-align:center;
}

.viewer-info-title{
  font-size:18px;
  font-weight:800;
}

.viewer-info-sub{
  margin-top:2px;
  font-size:13px;
  opacity:.68;
}

.viewer-info-body{
  padding:14px;
  display:grid;
  gap:8px;

  flex:1;
  overflow-y:auto;

  align-content:start;
}

.viewer-info-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.viewer-info-label{
  opacity:.65;
  font-size:13px;
}

.viewer-info-value{
  font-size:15px;
  font-weight:700;
  text-align:right;
}

.viewer-info-foot{
  padding:14px;
  border-top:1px solid rgba(255,255,255,.10);
}

.viewer-info-close{
  width:100%;
  height:38px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.viewer-info-close:hover{
  background:rgba(255,255,255,.16);
}


/* ==========================================================
BLOC CSS 10.02 - VIEWER / CARTE GPS

Gere :

- Carte GPS du viewer
- Zone localisation et affichage carte

---------------------------------------------------------- */

.viewer-info-map{
  width:100%;
  height:140px;

  border-radius:18px;
  overflow:hidden;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}


/* ==========================================================
BLOC CSS 10.03 - VIEWER / NOTES

Gere :

- Notes et commentaires internes
- Champs texte et sauvegarde

---------------------------------------------------------- */

.viewer-note-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;

  padding:10px;

  background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}

.viewer-note-overlay.is-open{
  display:flex;
}

.viewer-note-box{
  width:min(420px, 94vw);
  height:calc(100vh - 20px);
  overflow:hidden;

  display:flex;
  flex-direction:column;

  border-radius:26px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  box-shadow:0 22px 70px var(--glass-shadow);
  color:#fff;
}

.viewer-note-head{
  padding:8px 20px 8px;
  border-bottom:1px solid rgba(255,255,255,.12);
  text-align:center;
}

.viewer-note-title{
  font-size:18px;
  font-weight:800;
}

.viewer-note-sub{
  margin-top:2px;
  font-size:13px;
  opacity:.68;
}

.viewer-note-body{
  padding:14px;
  display:grid;
  gap:8px;

  flex:1;
  overflow-y:auto;

  align-content:start;
}

.viewer-note-field{
  display:flex;
  flex-direction:column;
  gap:7px;

  padding:10px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.viewer-note-label{
  font-size:15px;
  font-weight:700;
  opacity:.75;
  padding-left:12px;
}

.viewer-note-input,
.viewer-note-textarea{
  width:100%;
  box-sizing:border-box;

  border:none;
  outline:none;

  border-radius:14px;
  padding:10px 12px;

  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);

  color:#fff;

  font-family:Arial, sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:20px !important;
  letter-spacing:0 !important;
}

.viewer-note-input::placeholder,
.viewer-note-textarea::placeholder{
  font-family:Arial, sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:20px !important;
  letter-spacing:0 !important;
  word-spacing:0 !important;
  opacity:.55 !important;
}

.viewer-note-textarea{
  min-height:90px;
  resize:none;
}







.viewer-note-foot{
  padding:14px;
  border-top:1px solid rgba(255,255,255,.10);

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.viewer-note-btn{
  height:38px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,.05);

  color:#fff;
  font-size:15px;
  font-weight:800;

  cursor:pointer;
}

.viewer-note-btn:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16);
}

.viewer-note-save{
  background:linear-gradient(90deg,#2f8fff,#5fb8ff,#2f8fff);
}







/* ===========================================================
BLOC CSS 11 - ADAPTATIONS RESPONSIVE

Adaptations par largeur d’écran ; d’autres compléments mobiles suivent en partie 12.
=========================================================== */

@media (max-width:768px){

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

  .hud-right{
    top:calc(var(--hud-top) + 74px);
  }

  .panel-modal-box{
    height:calc(100vh - 20px);
    max-height:calc(100vh - 20px);
  }

}

@media (max-width:640px){

  .topbar-wrap{
    width:min(
    calc(100vw - 20px - var(--safe-left) - var(--safe-right)),
    var(--topbar-max)
    );
  }

  .bottombar-wrap{
    width:min(
    calc(100vw - 20px - var(--safe-left) - var(--safe-right)),
    760px
    );
  }

  

  .panel-modal-box{
    width:min(
    calc(100vw - 16px - var(--safe-left) - var(--safe-right)),
    var(--panel-width)
    );
  }
}

@media (max-width:480px){

  .hud-right{
    top:calc(var(--hud-top) + var(--topbar-height) + 16px);
  }

  .bottombar-wrap,
  .bottombar,
  .nav-item-wrapper{
    overflow:visible;
  }

  .topbar .ui-icon-btn{
    position:relative;
  }

  .topbar .ui-icon-btn::after{
    content:'';
    position:absolute;
    inset:-3px;
  }

  #btnLegend,
  #btnNetwork{
    min-width:45px;
    height:45px;
    min-height:45px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:20;
    box-sizing:border-box;
    border-color:transparent;
    box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 8px 26px rgba(0,0,0,.34);
  }

  #btnLegend,
  #btnProgress,
  #btnNetwork{
    margin-bottom:24px;
  }

  #btnHeaderToggle,
  #btnServicesHeaderToggle,
  #btnProgress{
    width:56px;
    min-width:56px;
    height:40px;
    min-height:40px;
    padding:0;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Recherche mobile dépliée dans la largeur disponible du header. */
  .topbar-primary.is-search-open{
    grid-template-columns:minmax(0, 1fr);
  }

  .topbar-primary.is-search-open > .topbar-left-actions,
  .topbar-primary.is-search-open > .topbar-actions{
    display:none;
  }

  .topbar-primary.is-search-open .topbar-center-wrapper{
    min-width:0;
  }

  .topbar-primary.is-search-open .search-wrap{
    padding-right:0;
  }

  .topbar-primary.is-search-open .main-search-close{
    flex:0 0 38px;
    width:38px;
    height:36px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  /* Les deux flèches prennent le header entier comme repère. */
  .topbar-primary{
    position:relative;
  }

  .topbar-primary .topbar-center-wrapper{
    position:static;
  }

  #btnHeaderToggle,
  #btnServicesHeaderToggle{
    top:calc(100% + 1px); /* inclut la bordure basse du header */
    bottom:auto;
    margin-top:16px;
    margin-bottom:0;
  }

  #btnHeaderToggle::after,
  #btnServicesHeaderToggle::after,
  #btnProgress::after{
    content:'';
    position:absolute;
    inset:-2px 0;
  }
}
/* ===========================================================
BLOC CSS 12 - AJUSTEMENTS COMPLÉMENTAIRES
Ordre de cascade conservé. Les variantes mobiles restent à leur place.

BLOC CSS 12.01 - Souvenirs et connexion : ajustements
=========================================================== */

.album-level-root .progress-rows > .viewer-visibility-row{
  min-height:48px;
  border-radius:18px;
  padding:8px 10px;
  background:rgba(255,255,255,.045);
}

/* ===========================================================
BLOC CSS 12.01.01 - CONNEXION : AUTRES COMPTES
=========================================================== */

.auth-other-account-card{
  width:100%;
  height:156px;
  margin:0;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px dashed rgba(255,255,255,.82);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:#fff;
  cursor:pointer;
  box-sizing:border-box;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.auth-other-account-card:hover,
.auth-other-account-card:focus-visible,
.auth-account-choices.is-using-other .auth-other-account-card{
  border-color:#fff;
  background:rgba(255,255,255,.085);
  box-shadow:0 0 18px rgba(255,255,255,.18), inset 0 0 16px rgba(255,255,255,.04);
  outline:none;
}

.auth-other-account-card:active{
  transform:scale(.985);
}

.auth-other-account-plus{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:2px dashed rgba(255,255,255,.9);
  border-radius:50%;
  color:#fff;
  font-size:30px;
  font-weight:400;
  line-height:1;
  box-shadow:0 0 15px rgba(255,255,255,.18);
  box-sizing:border-box;
}

.auth-other-account-label{
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
}

.album-level-root .progress-rows > .viewer-visibility-row:hover{
  background:rgba(255,255,255,.09);
}

.album-level-root .progress-rows > .viewer-visibility-row .viewer-visibility-left{
  gap:12px;
}
.album-level-root .progress-rows > .viewer-visibility-row .viewer-visibility-switch{
  width:48px;
  height:26px;
}

.album-level-root .progress-rows > .viewer-visibility-row .viewer-visibility-switch::after{
  width:20px;
  height:20px;
}

.album-level-root .progress-rows > .viewer-visibility-row.is-active .viewer-visibility-switch::after{
  left:25px;
}
.album-level-root .progress-rows > .network-row{
  opacity:1;
}

.album-level-root .progress-rows > .network-row .navigation-row-icon{
  font-size:16px;
  color:#fff;
}
/* ===========================================================
BLOC CSS 12.02 - Menus Options - icônes compactes
=========================================================== */

.viewer-share-body.is-options-body .viewer-visibility-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  font-size:13px;
}

.viewer-share-body.is-options-body .viewer-visibility-left{
  gap:9px;
}
.viewer-share-body.is-options-body .viewer-visibility-row{
  padding-left:8px;
}
/* ===========================================================
BLOC CSS 12.03 - Menus Options - icônes actions compactes
=========================================================== */

.album-actions-body .album-actions-icon,
.viewer-share-body.is-options-body .album-actions-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-sizing:border-box;
  font-size:13px;
}

.album-actions-body .album-actions-row,
.viewer-share-body.is-options-body .album-actions-row{
  padding-left:8px;
}

.online-sort-icon-dot{
  width:11px;
  height:11px;
  border:2px solid rgba(0,0,0,.72);
  border-radius:50%;
  background:#2f8fff;
  box-shadow:0 0 8px rgba(47,143,255,.7);
  box-sizing:content-box;
}
.viewer-actions-dropdown button[data-action]{
  padding-left:8px;
  gap:9px;
}

.viewer-actions-dropdown button[data-action] > span:first-child{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-sizing:border-box;
  font-size:13px;
  line-height:1;
}

.publication-location-dropdown,
.publication-visibility-dropdown,
.viewer-visibility-dropdown,
.viewer-album-dropdown,
.viewer-share-dropdown,
.viewer-actions-dropdown,
.album-actions-dropdown{
  box-shadow:var(--glass-popover-shadow);
}
/* ===========================================================
BLOC CSS 12.04 - Paramètres - icônes lumineuses
=========================================================== */

.settings-panel-icon{
  font-size:16px;
  color:#fff;
  line-height:1;
}
/* ===========================================================
BLOC CSS 12.05 - Paramètres - lignes lumineuses
=========================================================== */

.settings-panel-row{
  opacity:1;
}

/* ===========================================================
BLOC CSS 12.06 - ADMINISTRATION ET MODERATION
=========================================================== */

.report-panel-box{
  width:min(520px, calc(100vw - 24px));
}

.report-panel-body{
  display:grid;
  gap:12px;
  padding:14px;
}

.report-intro{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}

.report-reasons{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.report-reason-btn{
  min-height:44px;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-align:left;
}

.report-reason-btn.is-active{
  border-color:rgba(255,70,70,.9);
  background:rgba(255,70,70,.10);
  box-shadow:0 0 14px rgba(255,70,70,.18);
}

.report-reason-btn.is-full-width{
  grid-column:1 / -1;
  text-align:center;
}

.report-details{
  width:100%;
  min-height:86px;
  resize:vertical;
  box-sizing:border-box;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  outline:0;
  background:rgba(255,255,255,.045);
  color:#fff;
  font:inherit;
  font-size:13px;
}

#reportSubmitBtn:not(.is-ready){
  opacity:.46;
  pointer-events:none;
}

#reportSubmitBtn.is-ready{
  border-color:rgba(255,70,70,.9);
  background:rgba(255,70,70,.10);
  color:#fff;
  opacity:1;
  box-shadow:0 0 14px rgba(255,70,70,.18);
}

.comment-card-actions-menu.is-single{
  width:104px;
  grid-template-columns:1fr;
}

.comment-card-actions-menu.has-private-message{
  width:min(300px, calc(100vw - 64px));
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

#conversationPanel.is-group-private-conversation .conversation-panel-box{
  border-color:rgba(255,215,0,.72);
  box-shadow:0 0 24px rgba(255,215,0,.12), inset 0 0 18px rgba(255,215,0,.035);
}

#conversationPanel.is-group-private-conversation .conversation-head-status{
  color:#ffe978;
}

#conversationPanel.is-group-private-conversation .conversation-send-btn.is-ready{
  border-color:#ffd84d !important;
  background:rgba(255,216,77,.10) !important;
  color:#fff !important;
  box-shadow:0 0 15px rgba(255,216,77,.24), inset 0 0 8px rgba(255,216,77,.06) !important;
}

#conversationPanel.is-group-private-conversation .conversation-send-btn.is-ready:hover,
#conversationPanel.is-group-private-conversation .conversation-send-btn.is-ready:focus-visible{
  background:rgba(255,216,77,.16) !important;
  box-shadow:0 0 19px rgba(255,216,77,.34), inset 0 0 10px rgba(255,216,77,.08) !important;
}

#conversationPanel.is-group-private-conversation .conversation-message-row.is-mine .conversation-message-bubble{
  border-color:#ffd84d !important;
  background:rgba(255,216,77,.10) !important;
  box-shadow:0 0 14px rgba(255,216,77,.14) !important;
}

#conversationPanel.is-group-private-conversation .conversation-message-row.is-mine .conversation-message-bubble.is-media-only{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.group-feed-list .comment-card:has(.comment-card-actions.is-open .comment-card-actions-menu.has-private-message),
.comment-card:has(> .comment-card-actions.is-open .comment-card-actions-menu.has-private-message){
  padding-bottom:48px;
}

.admin-panel-box{
  width:min(1120px, calc(100vw - 24px));
  max-width:1120px;
  height:min(850px, calc(100dvh - 24px));
}

.admin-panel-head{
  min-height:70px;
}

.admin-panel-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  gap:0;
  padding:0;
  padding-bottom:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.admin-panel-scroll::-webkit-scrollbar{
  width:0;
  height:0;
}

.admin-secure-row{
  flex:0 0 auto;
  width:100%;
  padding:12px 14px 0;
  box-sizing:border-box;
}

.admin-secure-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid #FF1744;
  background:rgba(255,23,68,.10);
  color:#ff6b88;
  box-shadow:0 0 14px rgba(255,23,68,.18);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.admin-panel-body{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  gap:12px;
  padding:14px;
  overflow:visible;
}

.admin-tabs{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,8,10,.94);
  backdrop-filter:blur(18px);
}

.admin-tab{
  min-height:38px;
  padding:0 10px;
  border-radius:10px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:850;
}

.admin-tab.is-active{
  color:#fff;
  background:#2f8fff;
  box-shadow:0 8px 22px rgba(47,143,255,.22);
}

.admin-view{
  display:grid;
  gap:12px;
}

.admin-loading,
.admin-empty{
  min-height:180px;
  display:grid;
  place-items:center;
  padding:20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.66);
  font-size:13px;
  font-weight:800;
  text-align:center;
}

.admin-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

.admin-kpi-card{
  min-width:0;
  display:grid;
  gap:5px;
  padding:14px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
}

.admin-kpi-card.is-alert{
  border-color:rgba(255,70,86,.38);
  background:linear-gradient(145deg, rgba(255,54,72,.15), rgba(255,255,255,.025));
}

.admin-kpi-value{
  color:#fff;
  font-size:26px;
  font-weight:950;
  line-height:1;
}

.admin-kpi-label{
  color:rgba(255,255,255,.62);
  font-size:11px;
  font-weight:800;
}

.admin-grid-two{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.admin-section{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.035);
}

.admin-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.admin-section-title{
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.admin-section-note{
  color:rgba(255,255,255,.48);
  font-size:11px;
  font-weight:750;
}

.admin-metric-list{
  display:grid;
  gap:7px;
}

.admin-metric-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.7);
  font-size:12px;
  font-weight:750;
  box-sizing:border-box;
}

.admin-metric-row.is-danger-fill{
  border:1px solid rgba(255,23,68,.55);
  background:rgba(255,23,68,.12);
  color:#ff8aa0;
}

.admin-metric-row.is-danger-outline{
  border:1px solid rgba(255,23,68,.55);
}

.admin-metric-row strong{
  color:#fff;
  font-size:13px;
}

.admin-toolbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}

.admin-search{
  min-height:40px;
  padding:0 13px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  outline:0;
  background:rgba(255,255,255,.045);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:750;
}

.admin-filter-dropdown{
  position:relative;
  width:170px;
  justify-self:end;
  z-index:20;
}

.admin-filter{
  width:100%;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#141416;
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  cursor:pointer;
  box-sizing:border-box;
}

.admin-filter > span{
  white-space:nowrap;
}

.admin-toolbar.is-report-toolbar{
  position:relative;
  min-height:40px;
  align-items:center;
}

.admin-toolbar.is-report-toolbar .admin-section-note{
  color:rgba(255,255,255,.72);
  font-size:14px;
  font-weight:850;
  line-height:1.2;
  text-align:left;
}

.admin-filter-arrow{
  width:10px;
  height:6px;
  flex:0 0 10px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.admin-filter-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:30;
  display:none;
  width:100%;
  padding:5px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:#141416;
  box-shadow:0 14px 30px rgba(0,0,0,.38);
  overflow:hidden;
}

.admin-filter-menu.is-open{
  display:grid;
  gap:2px;
}

.admin-filter-option{
  width:100%;
  min-height:34px;
  padding:0 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#fff;
  font-size:12px;
  font-weight:750;
  text-align:left;
  cursor:pointer;
}

.admin-filter-option:hover,
.admin-filter-option.is-active{
  background:rgba(255,255,255,.08);
}

.admin-card-list{
  display:grid;
  gap:9px;
}

.admin-report-card,
.admin-user-card,
.admin-audit-card{
  display:grid;
  gap:9px;
  padding:13px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.04);
}

.admin-report-head,
.admin-user-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.admin-card-title{
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.admin-card-meta{
  color:rgba(255,255,255,.55);
  font-size:11px;
  font-weight:750;
  line-height:1.4;
}

.admin-status{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.admin-status.is-pending{ color:#ffcc66; border-color:rgba(255,190,62,.4); background:rgba(255,190,62,.1); }
.admin-status.is-in-review{ color:#77b9ff; border-color:rgba(47,143,255,.4); background:rgba(47,143,255,.1); }
.admin-status.is-resolved{ color:#79df9b; border-color:rgba(63,203,111,.4); background:rgba(63,203,111,.1); }
.admin-status.is-dismissed{ color:rgba(255,255,255,.58); }
.admin-status.is-suspended{ color:#ff8791; border-color:rgba(255,70,86,.4); background:rgba(255,70,86,.1); }

.admin-report-preview{
  padding:10px 11px;
  border-left:3px solid rgba(255,255,255,.18);
  border-radius:4px 10px 10px 4px;
  background:rgba(0,0,0,.24);
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

.admin-report-view-btn{
  width:100%;
  min-height:40px;
  padding:0 14px;
  border:1px solid #2f8fff;
  border-radius:10px;
  background:rgba(47,143,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-align:center;
}

.admin-report-view-btn:hover,
.admin-report-view-btn:focus-visible{
  background:#2f8fff;
}

.admin-purge-notice{
  padding:9px 11px;
  border:1px solid rgba(255,190,62,.35);
  border-radius:10px;
  background:rgba(255,190,62,.08);
  color:#ffcc66;
  font-size:11px;
  font-weight:800;
  text-align:center;
}

.admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.admin-action-btn{
  min-height:32px;
  padding:0 11px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);
  color:#fff;
  font-size:11px;
  font-weight:850;
}

.admin-action-btn.is-primary{
  border-color:#2f8fff;
  background:#2f8fff;
}

.admin-action-btn.is-danger{
  border-color:rgba(255,70,86,.5);
  background:rgba(155,34,44,.82);
}

.admin-action-btn:disabled{
  opacity:.42;
  pointer-events:none;
}

@media (max-width:760px){
  .admin-kpi-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .admin-grid-two{ grid-template-columns:1fr; }
  .admin-tabs{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .admin-panel-box{ height:calc(100dvh - 12px); }
  .report-reasons{ grid-template-columns:1fr; }
}

/* ===========================================================
BLOC CSS 12.07 - Accents blancs du profil : stats, emplacements photo et signature
=========================================================== */
.profile-info-toggle-line,
.profile-signature .profile-content-toggle-line{
  background:#fff;
}

.profile-info-toggle-btn,
.profile-signature-pill{
  border-color:#fff;
  transition:border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

.profile-info-toggle-btn:hover,
.profile-signature-pill:hover{
  border-color:#fff;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035));
  box-shadow:0 0 16px rgba(255,255,255,.15);
}

.profile-photo-strip .profile-photo-slot.is-empty{
  border-color:#fff;
}

/* ===========================================================
BLOC CSS 12.08 - Accents de la fenêtre Communauté
=========================================================== */
#networkPanel .network-create-card{
  border-color:var(--network-accent);
}

#networkPanel .network-section-btn[data-network-page]{
  border-color:rgb(var(--network-section-accent));
}

#networkPanel .network-section-btn[data-network-page]:hover{
  background:rgba(var(--network-section-accent),.10);
  border-color:rgb(var(--network-section-accent));
  box-shadow:0 0 16px rgba(var(--network-section-accent),.15);
}

/* ===========================================================
BLOC CSS 12.09 - Accents des fenêtres de création Publication, Story et Réel
=========================================================== */
#publicationComposerContent .publication-media-picker{
  border-color:var(--publication-composer-accent);
}

#publicationComposerContent .publication-comments-choice.is-yes.is-active{
  border-color:var(--publication-composer-accent);
  background:color-mix(in srgb, var(--publication-composer-accent) 10%, rgba(255,255,255,.035));
  color:#fff;
  box-shadow:0 0 14px color-mix(in srgb, var(--publication-composer-accent) 18%, transparent);
}

#publicationComposerContent .publication-picker-tab.is-active{
  border-color:var(--publication-composer-accent);
  background:color-mix(in srgb, var(--publication-composer-accent) 10%, rgba(255,255,255,.035));
  color:#fff;
  box-shadow:0 0 14px color-mix(in srgb, var(--publication-composer-accent) 18%, transparent);
}

#publicationComposerContent .publication-picker-photo.is-selected{
  border-color:var(--publication-composer-accent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--publication-composer-accent) 46%, transparent),
  0 0 16px color-mix(in srgb, var(--publication-composer-accent) 28%, transparent);
}

#publicationComposerContent .publication-picker-photo{
  transition:border-color .18s ease, box-shadow .18s ease;
}

#publicationComposerContent .publication-picker-photo:hover{
  border-color:var(--publication-composer-accent);
  box-shadow:
  0 0 0 1px color-mix(in srgb, var(--publication-composer-accent) 42%, transparent),
  0 0 16px color-mix(in srgb, var(--publication-composer-accent) 24%, transparent);
}

#publicationComposerContent .publication-picker-order{
  background:var(--publication-composer-accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--publication-composer-accent) 60%, transparent);
}

#publicationComposerContent .publication-picker-confirm.is-ready{
  border-color:var(--publication-composer-accent);
  background:color-mix(in srgb, var(--publication-composer-accent) 10%, rgba(255,255,255,.035));
  color:#fff;
  box-shadow:0 0 14px color-mix(in srgb, var(--publication-composer-accent) 18%, transparent);
}

#publicationComposerContent .publication-composer-validate.is-ready{
  border-color:var(--publication-composer-accent);
  background:color-mix(in srgb, var(--publication-composer-accent) 10%, rgba(255,255,255,.035));
  color:#fff;
  box-shadow:0 0 14px color-mix(in srgb, var(--publication-composer-accent) 18%, transparent);
}

/* ===========================================================
BLOC CSS 12.10 - Création de groupe : même gabarit que les contenus, circuit jaune indépendant
=========================================================== */
#groupComposerContent{
  --group-composer-accent:#FFD84D;
  --publication-composer-accent:#FFD84D;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
}

#groupComposerContent .group-composer-head{
  grid-template-columns:44px minmax(0,1fr) 44px;
}

#groupComposerContent > .profile-lifevision-head{
  height:58px;
  min-height:58px;
}

#groupComposerContent > .profile-lifevision-foot{
  min-height:66px;
  padding:14px 5px;
}

#groupComposerContent .group-composer-body{
  overflow-y:auto;
  scrollbar-width:none;
}

#groupComposerContent .group-composer-body::-webkit-scrollbar{
  display:none;
}

#groupComposerContent .group-photo-picker{
  border-color:var(--group-composer-accent);
  min-height:190px;
}

#groupComposerContent .group-description-input{
  min-height:96px;
}

#groupComposerContent .group-photo-picker.has-photo{
  position:relative;
  padding:0;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
}
#groupComposerContent .group-photo-picker.has-photo:active{ cursor:grabbing; }
#groupComposerContent .group-photo-picker.has-photo .profile-crop-hint{
  top:50%;
}

#groupComposerContent .group-photo-preview{
  width:100%;
  height:100%;
  min-height:190px;
  display:block;
  object-fit:cover;
  transform-origin:center;
  transition:transform .12s ease;
}

#groupComposerContent .group-photo-zoom{
  position:absolute;
  top:12px;
  right:12px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:7px;
  width:170px;
  height:32.6667px;
  box-sizing:border-box;
  padding:7px 10px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:15px;
  font-weight:900;
  box-shadow:inset 0 0 0 .5px rgb(255,216,77);
}
#groupComposerContent .group-photo-zoom input{
  --group-zoom-progress:0%;
  flex:1;
  min-width:0;
  height:5px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:999px;
  background:linear-gradient(to right,
  rgb(255,216,77) 0 var(--group-zoom-progress),
  rgba(255,255,255,.24) var(--group-zoom-progress) 100%);
  cursor:pointer;
}
#groupComposerContent .group-photo-zoom input::-webkit-slider-thumb{
  width:14px;
  height:14px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:50%;
  background:rgb(255,216,77);
  box-shadow:none;
}
#groupComposerContent .group-photo-zoom input::-moz-range-track{
  height:5px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.24);
}
#groupComposerContent .group-photo-zoom input::-moz-range-progress{
  height:5px;
  border:0;
  border-radius:999px;
  background:rgb(255,216,77);
}
#groupComposerContent .group-photo-zoom input::-moz-range-thumb{
  width:14px;
  height:14px;
  border:0;
  border-radius:50%;
  background:rgb(255,216,77);
  box-shadow:none;
}

#groupComposerContent .group-photo-change-label{
  z-index:5;
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 24px);
  padding:7px 13px;
  border:1px solid var(--group-composer-accent);
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 0 14px rgba(255,213,42,.18);
}





#groupComposerContent .group-name-input{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  outline:none;
  background:rgba(255,255,255,.035);
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:750;
}

#groupComposerContent .group-name-input:focus{
  border-color:var(--group-composer-accent);
  box-shadow:0 0 14px rgba(255,213,42,.18);
}

#groupComposerContent .publication-comments-choice.is-active{
  border-color:var(--group-composer-accent);
  background:color-mix(in srgb, var(--group-composer-accent) 10%, rgba(255,255,255,.035));
  color:#fff;
  box-shadow:0 0 14px rgba(255,213,42,.18);
}



#groupComposerContent .group-description-input:focus,
#groupComposerContent .publication-picker-photo.is-selected,
#groupComposerContent .publication-picker-confirm.is-ready,
#groupComposerContent .publication-composer-validate.is-ready{
  border-color:var(--group-composer-accent);
  box-shadow:0 0 14px rgba(255,213,42,.18);
}

#groupComposerContent .publication-picker-photo.is-selected{
  box-shadow:0 0 0 1px rgba(255,213,42,.5), 0 0 16px rgba(255,213,42,.28);
}

#groupComposerContent .publication-picker-order{
  border-color:var(--group-composer-accent);
  background:var(--group-composer-accent);
  color:#090909;
  box-shadow:0 0 12px rgba(255,213,42,.48);
}

#groupComposerContent .publication-picker-confirm.is-ready,
#groupComposerContent .publication-composer-validate.is-ready{
  background:color-mix(in srgb, var(--group-composer-accent) 10%, rgba(255,255,255,.035));
  color:#fff;
}

#groupComposerContent .group-photo-picker-empty{
  grid-column:1 / -1;
  padding:32px 16px;
  color:rgba(255,255,255,.58);
  text-align:center;
  font-weight:750;
}


/* ===========================================================
BLOC CSS 12.11 - Accent blanc des outils Photos et bannière du profil
=========================================================== */
#profilePhotoPositionPanel .profile-photo-position-card.is-selected .profile-photo-position-preview{
  border-color:#fff;
  box-shadow:0 0 0 1px #fff inset, 0 0 16px rgba(255,255,255,.18);
}

#profilePhotoPickerPanel .publication-picker-photo.is-selected,
#profileCoverPickerPanel .publication-picker-photo.is-selected,
#groupPhotoPickerPanel .publication-picker-photo.is-selected{
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.46), 0 0 16px rgba(255,255,255,.28);
}

#profilePhotoPickerPanel .publication-picker-order,
#profileCoverPickerPanel .publication-picker-order,
#groupPhotoPickerPanel .publication-picker-order{
  border-color:#fff;
  background:#fff;
  color:#000;
  box-shadow:0 0 12px rgba(255,255,255,.42);
}



#profilePhotoPositionPanel .album-footer-validate,
#profilePhotoPickerPanel .album-footer-validate,
#profileCoverPickerPanel .album-footer-validate,
#groupPhotoPickerPanel .album-footer-validate,
#profilePanel #profileFooterLeft .album-footer-validate{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}

.global-modal-btn.global-modal-danger-futuristic{
  border-color:rgba(255,70,70,.9) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}

.global-modal-btn.global-modal-danger-futuristic:hover{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}

.global-modal-btn.global-modal-neutral-futuristic{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}

.global-modal-btn.global-modal-neutral-futuristic:hover{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}

/* ===========================================================
BLOC CSS 12.12 - Sélecteur ouvert depuis un commentaire : premier plan et accent blanc
=========================================================== */
#conversationMediaPickerPanel.is-comment-picker.is-open{
  z-index:100600;
}

#conversationMediaPickerPanel{ --media-picker-accent:#FF1744; }
#conversationMediaPickerPanel.is-comment-picker{ --media-picker-accent:#fff; }
#conversationMediaPickerPanel.is-group-private-picker{ --media-picker-accent:#FFD84D; }
#conversationMediaPickerPanel[data-comment-type="publication"]{ --media-picker-accent:#54e636; }
#conversationMediaPickerPanel[data-comment-type="story"]{ --media-picker-accent:#2f8fff; }
#conversationMediaPickerPanel[data-comment-type="reel"]{ --media-picker-accent:#AEB6C2; }
#conversationMediaPickerPanel[data-comment-type="group"]{ --media-picker-accent:#FFD84D; }

#conversationMediaPickerPanel .publication-picker-tab.is-active,
#conversationMediaPickerPanel .publication-picker-confirm.is-ready{
  border-color:var(--media-picker-accent) !important;
  background:color-mix(in srgb, var(--media-picker-accent) 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px color-mix(in srgb, var(--media-picker-accent) 22%, transparent) !important;
}
#conversationMediaPickerPanel .publication-picker-photo.is-selected{
  border-color:var(--media-picker-accent) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--media-picker-accent) 50%, transparent), 0 0 16px color-mix(in srgb, var(--media-picker-accent) 24%, transparent) !important;
}
#conversationMediaPickerPanel .publication-picker-order{
  border-color:var(--media-picker-accent) !important;
  background:color-mix(in srgb, var(--media-picker-accent) 12%, #090909) !important;
  color:#fff !important;
  box-shadow:0 0 12px color-mix(in srgb, var(--media-picker-accent) 35%, transparent) !important;
}

#commentsPanel .comments-send-btn.is-ready,
.place-comments-composer .place-comment-submit.is-ready{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.22) !important;
  opacity:1 !important;
}

#conversationMediaViewerPanel.is-comment-media-viewer.is-open{
  z-index:100700;
}

#conversationMediaOptionsDropdown .album-actions-row.is-danger{
  border-color:rgba(255,70,70,.9) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}

#conversationMediaOptionsDropdown .album-actions-row.is-danger:hover{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}

/* ===========================================================
BLOC CSS 12.13 - Accents contextuels des commentaires
=========================================================== */
#commentsPanel[data-comment-type="publication"]{
  --comment-context-accent:#54e636;
}
#commentsPanel[data-comment-type="story"]{
  --comment-context-accent:#2f8fff;
}
#commentsPanel[data-comment-type="reel"]{
  --comment-context-accent:#AEB6C2;
}
#commentsPanel[data-comment-type] .comments-order-btn,
#commentsPanel[data-comment-type] .comments-send-btn.is-ready{
  border-color:var(--comment-context-accent) !important;
  background:color-mix(in srgb, var(--comment-context-accent) 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px color-mix(in srgb, var(--comment-context-accent) 22%, transparent) !important;
  opacity:1 !important;
}
/* ===========================================================
BLOC CSS 12.14 - Fenêtres Stats au format des fenêtres Créer
=========================================================== */
#profileStatPanel > .panel-modal-box{
  width:min(600px, calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  position:relative;
}
#profileStatPanel > .panel-modal-box > .panel-body{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-top:calc(var(--feed-window-head-height, 58px) + 14px);
  padding-bottom:calc(var(--feed-window-footer-height, 65px) + 20px);
  scroll-padding-top:var(--feed-window-head-height, 58px);
  scroll-padding-bottom:var(--feed-window-footer-height, 65px);
  box-sizing:border-box;
}
#profileStatPanel > .panel-modal-box > .panel-head,
#profileStatPanel > .panel-modal-box > .panel-footer{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  transform:translateY(0);
  background:#000;
  will-change:transform;
  transition:transform .24s ease;
}
#profileStatPanel > .panel-modal-box > .panel-head{
  top:0;
}
#profileStatPanel > .panel-modal-box > .panel-footer{
  bottom:0;
}
#profileStatPanel.is-feed-header-hidden > .panel-modal-box > .panel-head{
  transform:translateY(-105%);
  pointer-events:none;
}
#profileStatPanel.is-feed-header-hidden > .panel-modal-box > .panel-footer{
  transform:translateY(105%);
  pointer-events:none;
}

#contactsPanel > .panel-modal-box,
#discussionsPanel > .panel-modal-box,
#groupDiscussionsPanel > .panel-modal-box{
  position:relative;
}

#contactsPanel > .panel-modal-box > .panel-head,
#contactsPanel > .panel-modal-box > .panel-footer,
#discussionsPanel > .panel-modal-box > .panel-head,
#discussionsPanel > .panel-modal-box > .panel-footer,
#groupDiscussionsPanel > .panel-modal-box > .panel-head,
#groupDiscussionsPanel > .panel-modal-box > .panel-footer{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  transform:translateY(0);
  background:#000;
  will-change:transform;
  transition:transform .24s ease;
}

#contactsPanel > .panel-modal-box > .panel-head,
#discussionsPanel > .panel-modal-box > .panel-head,
#groupDiscussionsPanel > .panel-modal-box > .panel-head{
  top:0;
}

#contactsPanel > .panel-modal-box > .panel-footer,
#discussionsPanel > .panel-modal-box > .panel-footer,
#groupDiscussionsPanel > .panel-modal-box > .panel-footer{
  bottom:0;
}

#contactsPanelBody,
#discussionsPanelBody,
#groupDiscussionsPanelBody{
  padding-top:calc(var(--feed-window-head-height, 58px) + 14px);
  padding-bottom:calc(var(--feed-window-footer-height, 65px) + 20px);
  scroll-padding-top:var(--feed-window-head-height, 58px);
  scroll-padding-bottom:var(--feed-window-footer-height, 65px);
  box-sizing:border-box;
}

#contactsPanel.is-feed-header-hidden > .panel-modal-box > .panel-head,
#discussionsPanel.is-feed-header-hidden > .panel-modal-box > .panel-head,
#groupDiscussionsPanel.is-feed-header-hidden > .panel-modal-box > .panel-head{
  transform:translateY(-105%);
  pointer-events:none;
}

#contactsPanel.is-feed-header-hidden > .panel-modal-box > .panel-footer,
#discussionsPanel.is-feed-header-hidden > .panel-modal-box > .panel-footer,
#groupDiscussionsPanel.is-feed-header-hidden > .panel-modal-box > .panel-footer{
  transform:translateY(105%);
  pointer-events:none;
}

.panel-modal.has-feed-bars-autohide > .panel-modal-box{
  position:relative;
}

.panel-modal.has-feed-bars-autohide > .panel-modal-box > .panel-head,
.panel-modal.has-feed-bars-autohide > .panel-modal-box > .panel-footer{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  transform:translateY(0);
  background:#000;
  will-change:transform;
  transition:transform .24s ease;
}

.panel-modal.has-feed-bars-autohide > .panel-modal-box > .panel-head{
  top:0;
}

.panel-modal.has-feed-bars-autohide > .panel-modal-box > .panel-footer{
  bottom:0;
}

#progressPanelBody,
#notificationsPanelBody,
#settingsPanel.has-feed-bars-autohide #settingsPanelBody,
#adminPanelScroll{
  padding-top:calc(var(--feed-window-head-height, 58px) + 14px);
  padding-bottom:calc(var(--feed-window-footer-height, 65px) + 20px);
  scroll-padding-top:var(--feed-window-head-height, 58px);
  scroll-padding-bottom:var(--feed-window-footer-height, 65px);
  box-sizing:border-box;
}

#adminPanelScroll{
  padding-left:0;
  padding-right:0;
}

.panel-modal.has-feed-bars-autohide.is-feed-header-hidden > .panel-modal-box > .panel-head{
  transform:translateY(-105%);
  pointer-events:none;
}

.panel-modal.has-feed-bars-autohide.is-feed-header-hidden > .panel-modal-box > .panel-footer{
  transform:translateY(105%);
  pointer-events:none;
}
/* ===========================================================
BLOC CSS 12.15 - Actions futuristes des fenêtres Stats
=========================================================== */
#profileStatPanel .profile-stat-card-action-btn:not(.is-danger){
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#profileStatPanel .profile-stat-card-action-btn.is-danger{
  border-color:rgba(255,70,70,.9) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
#profileStatPanel .profile-stat-card-action-btn:not(.is-danger):hover{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
#profileStatPanel .profile-stat-card-action-btn.is-danger:hover{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}
#profileStatPanel .profile-stat-card-actions.is-expired-story{
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);
}
#profileStatPanel .profile-stat-card-actions.is-expired-story .profile-stat-card-action-btn.story-expired-status{
  display:flex;
  align-items:center;
  justify-content:center;
  border-color:rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.025) !important;
  color:rgba(255,255,255,.56) !important;
  box-shadow:none !important;
  filter:none !important;
  cursor:default;
}
#profileStatPanel .story-republish-action{
  border-color:rgba(47,143,255,.92) !important;
  background:rgba(47,143,255,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(47,143,255,.22) !important;
}
#profileStatPanel .story-republish-action:hover{
  border-color:rgba(95,184,255,1) !important;
  background:rgba(47,143,255,.16) !important;
  box-shadow:0 0 16px rgba(47,143,255,.28) !important;
}
/* ===========================================================
BLOC CSS 12.16 - Disposition uniforme des cartes des cinq fenêtres Stats
=========================================================== */
#profileStatBody .is-profile-stat-layout .profile-publication-identity,
#profileStatBody .is-profile-stat-layout .story-viewer-identity{
  width:100%;
  max-width:none;
  min-width:0;
}
#profileStatBody .is-profile-stat-layout .profile-publication-name-row,
#profileStatBody .is-profile-stat-layout .story-viewer-name-row{
  width:100% !important;
  max-width:none !important;
  display:flex;
  align-items:center;
  justify-content:space-between !important;
  gap:10px;
}
#profileStatBody .is-profile-stat-layout .profile-publication-meta,
#profileStatBody .is-profile-stat-layout .story-viewer-meta{
  flex:0 0 auto;
  margin-left:auto;
  margin-right:-12px;
  white-space:nowrap;
}
#profileStatBody .is-profile-stat-layout .profile-publication-fullscreen-subline:empty,
#profileStatBody .is-profile-stat-layout .story-viewer-location:empty{
  display:none;
}
#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-layout .profile-lifevision-foot,
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .story-viewer-foot{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:end !important;
  justify-content:initial !important;
  gap:8px !important;
}
#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-layout .profile-lifevision-foot-center{
  display:flex !important;
  align-items:center;
  justify-self:center;
}
#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-layout .profile-lifevision-foot-left,
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .story-viewer-actions:not(.is-right){
  justify-self:start;
  justify-content:flex-start;
}
#profileStatBody .profile-publication-fullscreen-card.is-profile-stat-layout .profile-lifevision-foot-right,
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .story-viewer-actions.is-right{
  justify-self:end;
  justify-content:flex-end;
}
#profileStatBody .is-profile-stat-layout .profile-stat-meta-actions{
  position:absolute;
  z-index:9;
  top:43px;
  right:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:6px;
}
#profileStatBody .is-profile-stat-layout .profile-stat-meta-actions .profile-lifevision-pill,
#profileStatBody .is-profile-stat-layout .profile-lifevision-foot .profile-lifevision-pill,
#profileStatBody .is-profile-stat-layout .story-viewer-foot .profile-lifevision-pill{
  border-width:1.5px;
  border-color:rgba(255,255,255,.34);
}
#profileStatBody .is-profile-stat-layout .publication-video-paused-controls{
  display:none;
}
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .profile-stat-fullscreen-control{
  grid-column:2;
  justify-self:center;
}

/* ===========================================================
BLOC CSS 12.17 - Stats Story/Reel : hauteur et date
=========================================================== */
#profileStatBody .publication-fullscreen-feed-list .profile-stat-fullscreen-item > .story-viewer-inline-box,
#profileStatBody .publication-fullscreen-feed-list .profile-stat-fullscreen-item > .profile-publication-fullscreen-card{
  height:200px;
  min-height:200px;
}
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .story-viewer-head{
  grid-template-columns:minmax(0,1fr) !important;
}
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .story-viewer-user{
  width:100%;
  max-width:none;
  min-width:0;
}

/* ===========================================================
BLOC CSS 12.18 - Date Story/Reel Stats ancrée indépendamment du média
=========================================================== */
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .story-viewer-meta{
  position:absolute;
  top:12px;
  right:12px;
  margin:0;
}

/* ===========================================================
BLOC CSS 12.19 - Typographie date et visibilité Story/Reel alignée sur Publication
=========================================================== */
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .story-viewer-meta{
  gap:5px;
  color:rgba(255,255,255,.65);
  font-size:10px;
  font-weight:750;
}
#profileStatBody .story-viewer-inline-box.is-profile-stat-layout .story-viewer-meta-icon{
  position:relative;
  top:-2px;
  margin-left:-2px;
  font-size:16px;
  line-height:1;
}

/* ===========================================================
BLOC CSS 12.20 - Carte Exploration des commentaires au format Stats
=========================================================== */
#profileStatBody .profile-exploration-comment-card{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 7px;
  height:200px;
  min-height:200px;
  overflow:hidden;
  border:0;
  border-radius:18px 18px 0 0;
  background:#000;
  box-shadow:none;
}
#profileStatBody .profile-exploration-comment-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  background-color:#050608;
  background-size:cover;
  background-position:center;
  border-radius:18px 18px 0 0;
}
#profileStatBody .profile-exploration-comment-band{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  min-height:34px;
  padding:6px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-sizing:border-box;
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
  backdrop-filter:blur(8px);
}
#profileStatBody .profile-exploration-comment-band.is-top{
  top:0;
  border-radius:18px 18px 0 0;
  background:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.54));
  text-transform:uppercase;
  letter-spacing:.04em;
}
#profileStatBody .profile-exploration-comment-band.is-bottom{
  bottom:0;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.58));
}
#profileStatBody .profile-exploration-comment-flag{
  width:20px;
  height:13px;
  flex:0 0 20px;
  object-fit:cover;
}
#profileStatBody .profile-exploration-comment-pill{
  position:absolute;
  z-index:3;
  right:12px;
  bottom:39px;
  min-width:70px;
}
/* ===========================================================
BLOC CSS 12.22 - Sources import lumineuses
=========================================================== */
#importSourcePanel .import-source-card{
  border-color:var(--import-accent);
  background:rgba(255,255,255,.035);
  box-shadow:
  0 0 0 1px color-mix(in srgb, var(--import-accent) 28%, transparent) inset,
  0 0 12px color-mix(in srgb, var(--import-accent) 28%, transparent);
}
#importSourcePanel .import-source-card:hover{
  border-color:var(--import-accent);
  background:color-mix(in srgb, var(--import-accent) 8%, rgba(255,255,255,.035));
}
#importSourcePanel .import-source-card.is-selected,
#importSourcePanel .import-source-card.is-selected:hover{
  border-color:var(--import-accent);
  background:color-mix(in srgb, var(--import-accent) 14%, rgba(255,255,255,.035));
  box-shadow:
  0 0 0 1px color-mix(in srgb, var(--import-accent) 42%, transparent) inset,
  0 0 16px color-mix(in srgb, var(--import-accent) 38%, transparent);
}
#importSourcePanel #importSourceValidate:not(:disabled){
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
/* ===========================================================
BLOC CSS 12.23 - Actions notifications futuristes
=========================================================== */
#notificationsPanel .profile-stat-card-action-btn:not(.is-danger){
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#notificationsPanel .profile-stat-card-action-btn:not(.is-danger):hover{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
#notificationsPanel .profile-stat-card-action-btn.is-danger{
  border-color:rgba(255,70,70,.9) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
#notificationsPanel .profile-stat-card-action-btn.is-danger:hover{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}
#notificationsPanel .notification-unread-dot{
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.78);
}
/* ===========================================================
BLOC CSS 12.24 - Administration futuriste
=========================================================== */
#adminPanel .admin-tab.is-active,
#adminPanel .admin-report-view-btn,
#adminPanel .admin-action-btn.is-primary{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#adminPanel .admin-tab.is-active:hover,
#adminPanel .admin-report-view-btn:hover,
#adminPanel .admin-report-view-btn:focus-visible,
#adminPanel .admin-action-btn.is-primary:hover{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
#adminPanel .admin-action-btn.is-danger{
  border-color:rgba(255,70,70,.9) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
#adminPanel .admin-action-btn.is-danger:hover{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}
/* ===========================================================
BLOC CSS 12.25 - États onglets Administration
=========================================================== */
#adminPanel .admin-tab{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.68);
  box-shadow:none;
}
#adminPanel .admin-tab:not(.is-active):hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
  color:#fff;
  box-shadow:none;
}
/* ===========================================================
BLOC CSS 12.29 - SOUVENIRS : CLASSEMENT MANUEL
=========================================================== */
.gallery-photo-image.is-unclassified-edit-selected{
  border-color:#fff !important;
  box-shadow:0 0 0 1px #fff, 0 0 16px rgba(255,255,255,.20) !important;
}
.footer-command-button.is-unclassified-futuristic,
#manualLocationValidate.global-modal-create:not(:disabled){
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
.footer-command-button.is-unclassified-futuristic:hover,
#manualLocationValidate.global-modal-create:not(:disabled):hover{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
#manualLocationPanel .manual-location-input:focus{
  border-color:#fff !important;
  box-shadow:0 0 12px rgba(255,255,255,.16) !important;
  outline:none;
}

#manualLocationPanel .manual-location-suggestions-panel .profile-edit-country-suggestion:hover,
#manualLocationPanel .manual-location-suggestions-panel .profile-edit-country-suggestion.is-selected{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  box-shadow:0 0 12px rgba(255,255,255,.14) !important;
}
/* ===========================================================
BLOC CSS 12.30 - LOCALISATION MANUELLE : CHAMPS
=========================================================== */
#manualLocationValidate,
#manualLocationValidate.global-modal-create,
#manualLocationValidate.global-modal-create:disabled{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#manualLocationValidate:disabled{
  opacity:.62;
  box-shadow:0 0 10px rgba(255,255,255,.10) !important;
}
#manualLocationValidate:not(:disabled):hover{
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
/* ===========================================================
BLOC CSS 12.31 - LOCALISATION MANUELLE : LISTE DES CONTINENTS
=========================================================== */
#manualLocationPanel .manual-location-suggestions-panel.is-continent{
  max-height:306px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* ===========================================================
BLOC CSS 12.32 - CRÉATION D’ALBUM : ÉTATS VISUELS
=========================================================== */
#createAlbumPanel .create-album-input:focus{
  border-color:#fff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.32), 0 0 14px rgba(255,255,255,.16) !important;
  outline:none;
}
#createAlbumValidate.global-modal-create:not(:disabled){
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#createAlbumValidate.global-modal-create:not(:disabled):hover{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
/* ===========================================================
BLOC CSS 12.33 - SÉLECTION D’ALBUM ET ACTIONS DE SUPPRESSION
=========================================================== */
#albumPickerPanel .album-footer-validate{
  border-color:#fff !important;
  background:color-mix(in srgb, #fff 10%, rgba(255,255,255,.035)) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#albumPickerPanel .album-footer-validate:hover{
  background:color-mix(in srgb, #fff 15%, rgba(255,255,255,.045)) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
.album-actions-dropdown .album-actions-row.is-danger,
.album-footer-delete{
  border-color:rgba(255,70,70,.9) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
.album-actions-dropdown .album-actions-row.is-danger:hover,
.album-footer-delete:hover{
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}

.album-selection-action:disabled{
  pointer-events:none;
  cursor:default;
  opacity:.48;
  border-color:rgba(255,255,255,.16) !important;
  background:transparent !important;
  color:rgba(255,255,255,.62) !important;
  box-shadow:none !important;
}
/* ===========================================================
BLOC CSS 12.34 - LECTEUR : MINIATURES ET SUPPRESSION
=========================================================== */
#photoViewer .viewer-thumb.active,
.photo-viewer-shell .viewer-thumb.active{
  border-color:#fff !important;
  box-shadow:0 0 0 1px #fff inset, 0 0 14px rgba(255,255,255,.20) !important;
}
#viewerActionsDropdown button[data-action="delete"]{
  border-color:rgba(255,70,70,.9) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
#viewerActionsDropdown button[data-action="delete"]:hover{
  border-color:rgba(255,70,70,.95) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}

/* ===========================================================
BLOC CSS 12.36 - Ajouter des contacts : actions futuristes
=========================================================== */
#contactsPanel .contacts-directory-add.is-none,
#contactsPanel .contacts-directory-add.is-pending-received,
#contactsPanel .profile-stat-card-action-btn:not(.is-danger){
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#contactsPanel .contacts-directory-add.is-none:hover,
#contactsPanel .contacts-directory-add.is-pending-received:hover,
#contactsPanel .profile-stat-card-action-btn:not(.is-danger):hover{
  border-color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}
#contactsPanel .profile-stat-card-action-btn.is-danger{
  border-color:rgba(255,70,70,.90) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
#contactsPanel .profile-stat-card-action-btn.is-danger:hover{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}
#contactsPanel .contacts-directory-add.is-pending-sent,
#contactsPanel .contacts-directory-add.is-friend,
#contactsPanel .contacts-directory-action:disabled{
  border-color:rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:none !important;
}

/* ===========================================================
BLOC CSS 12.37 - Cartes Tous mes contacts : présence et options
=========================================================== */
#contactsPanel .contacts-search-results .contacts-directory-card.has-message-shortcut{
  min-height:84px;
  padding-right:50px;
}
#contactsPanel .contacts-search-results .contacts-directory-card.has-message-shortcut .contacts-directory-main{
  min-height:62px;
}
#contactsPanel .contacts-search-results .contacts-directory-card.is-contact-online{
  border-color:rgba(255,255,255,.92);
  box-shadow:0 0 14px rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.10) inset;
}
#contactsPanel .contacts-search-results .contacts-directory-message{
  top:10px;
  bottom:auto;
  width:30px;
  height:30px;
  border-radius:10px;
  font-size:14px;
}
#contactsPanel .contacts-search-results .contacts-directory-message:hover,
#contactsPanel .contacts-search-results .contacts-directory-message:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 14px rgba(255,255,255,.18);
}
#contactsPanel .contacts-directory-options-toggle{
  position:absolute;
  top:44px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:10px;
}
#contactsPanel .contacts-directory-actions-drawer{
  display:none;
  grid-template-columns:minmax(0,1fr);
  width:auto;
  margin-top:10px;
  margin-right:-40px;
  box-sizing:border-box;
}
#contactsPanel .contacts-directory-card.has-open-actions .contacts-directory-actions-drawer{
  display:grid;
}
#contactsPanel .contacts-directory-actions-drawer .profile-stat-card-action-btn.is-danger{
  width:100%;
  min-height:34px;
  border-color:rgba(255,70,70,.90) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
#contactsPanel .contacts-directory-actions-drawer .profile-stat-card-action-btn.is-danger:hover{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}

/* ===========================================================
BLOC CSS 12.38 - Fenêtres Tous mes groupes / Ajouter des groupes
=========================================================== */
#contactsPanel.is-groups-view .contacts-search-shell:focus-within,
#contactsPanel.is-groups-view .contacts-add-trigger:hover,
#contactsPanel.is-groups-view .group-directory-card:hover,
#contactsPanel.is-groups-view .group-directory-card:focus-within{
  border-color:#FFD84D !important;
  box-shadow:0 0 14px rgba(255,216,77,.18) !important;
}
#contactsPanel.is-groups-view .contacts-add-trigger-badge,
#contactsPanel.is-groups-view .group-request-accept,
#contactsPanel.is-groups-view .group-discovery-join,
#contactsPanel.is-groups-view .profile-stat-card-action-btn:not(.is-danger){
  border-color:#FFD84D !important;
  background:rgba(255,216,77,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,216,77,.18) !important;
}
#contactsPanel.is-groups-view .group-request-accept:hover,
#contactsPanel.is-groups-view .group-discovery-join:hover,
#contactsPanel.is-groups-view .profile-stat-card-action-btn:not(.is-danger):hover{
  border-color:#FFE57F !important;
  background:rgba(255,216,77,.16) !important;
  box-shadow:0 0 16px rgba(255,216,77,.25) !important;
}
#contactsPanel.is-groups-view .contacts-add-section-label{
  border:1px solid #FFD84D;
  color:rgba(255,255,255,.88);
  box-shadow:0 0 12px rgba(255,216,77,.10);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#contactsPanel.is-groups-view .contacts-add-section-label:hover{
  border-color:#FFD84D;
  background:rgba(255,216,77,.10);
  box-shadow:0 0 16px rgba(255,216,77,.18);
}
#contactsPanel.is-groups-view .contacts-add-section-line{
  color:#FFD84D;
}
#contactsPanel.is-groups-view .contacts-connection-banner{
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  box-shadow:0 0 16px rgba(255,255,255,.12), inset 0 0 12px rgba(255,255,255,.04);
}
#contactsPanel.is-groups-view .contacts-connection-banner button{
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.10);
  box-shadow:0 0 12px rgba(255,255,255,.10);
}
#contactsPanel.is-groups-view .group-directory-avatar{
  background-color:rgba(255,255,255,.08) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22) !important;
}
#contactsPanel.is-groups-view .group-directory-avatar-media{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
#contactsPanel.is-groups-view .contacts-search-results .group-directory-card .group-directory-discussion{
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}
#contactsPanel.is-groups-view .contacts-search-results .group-directory-card .group-directory-discussion:hover,
#contactsPanel.is-groups-view .contacts-search-results .group-directory-card .group-directory-discussion:focus-visible{
  border-color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
  outline:none;
}
#contactsPanel.is-groups-view .group-directory-card .contacts-directory-location{
  color:rgba(255,255,255,.74);
}
#contactsPanel.is-groups-view .group-directory-card .contacts-directory-mutual{
  color:#FFE88C;
}

#contactsPanel.is-groups-view .group-request-accept,
#contactsPanel.is-groups-view .group-discovery-join{
  height:34px !important;
  min-height:34px !important;
  padding:0 8px !important;
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}

#contactsPanel.is-groups-view .group-request-accept:hover,
#contactsPanel.is-groups-view .group-request-accept:focus-visible,
#contactsPanel.is-groups-view .group-discovery-join:hover,
#contactsPanel.is-groups-view .group-discovery-join:focus-visible{
  border-color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}

#contactsPanel.is-groups-view .contacts-new-results .contacts-directory-action,
#contactsPanel.is-groups-view .contacts-new-results .profile-stat-card-action-btn{
  height:34px !important;
  min-height:34px !important;
  padding:0 8px !important;
  font-size:12px !important;
  line-height:1 !important;
}

/* ===========================================================
BLOC CSS 12.39 - Cartes Mes discussions et indicateur En ligne
=========================================================== */
#discussionsPanel .discussion-card.has-card-options .discussion-card-main{
  padding-right:38px;
}
#discussionsPanel .discussion-card-options-toggle{
  position:absolute;
  right:8px;
  top:42px;
  bottom:auto;
  width:30px;
  height:30px;
  border-radius:10px;
  z-index:2;
}
#discussionsPanel .discussion-card.has-card-options.has-unread .discussion-unread-badge{
  right:46px;
  top:50px;
  bottom:auto;
  border-width:1px;
  border-color:rgba(255,23,68,.96);
  background:rgba(255,23,68,.20);
  color:#fff;
  box-shadow:0 0 12px rgba(255,23,68,.62), inset 0 0 8px rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
}
#discussionsPanel .discussion-card-actions-drawer{
  display:none;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  margin-top:10px;
  box-sizing:border-box;
}
#discussionsPanel .discussion-card.has-open-actions .discussion-card-actions-drawer{
  display:grid;
}
#discussionsPanel .discussion-card-actions-drawer .profile-stat-card-action-btn.is-danger{
  width:100%;
  min-height:34px;
  border-color:rgba(255,70,70,.90) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
#discussionsPanel .discussion-card-actions-drawer .profile-stat-card-action-btn.is-danger:hover{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}

/* ===========================================================
BLOC CSS 12.40 - CARTES PHOTO PARTAGÉES : IMAGE ET BANDES D’INFORMATION

Shared photo cards: a 136px image between separate information bands.
Keep dynamic-background data on the card so asynchronous thumbnail updates
and saved image positions continue to use the same target.
=========================================================== */
.profile-content-mini-card,
.network-publication-card,
.network-story-card{
  background-image:none;
  background-color:#080808;
}

.profile-content-mini-card::after,
.network-publication-card::after,
.network-story-card::after{
  inset:38px 0 26px;
  background-image:var(--dynamic-bg-image, none);
  background-position:var(--dynamic-bg-position, 50% 50%);
  background-size:cover;
  background-repeat:no-repeat;
}

.profile-content-mini-card::after{
  inset:26px 0 26px;
}

.profile-content-mini-card > .network-media-info,
#networkPanel .network-publication-card > .network-media-info,
#networkPanel .network-story-card > .network-media-info,
#publicationFeedBody .public-feed-module-rail .network-media-info{
  justify-content:flex-start;
  padding-right:26px;
}

.profile-content-mini-card > .profile-contact-presence{
  padding-right:8px;
}

/* ===========================================================
BLOC CSS 12.41 - CARTES DU PROFIL : BANDES D’INFORMATION
=========================================================== */
.profile-content-mini-card > .profile-mini-location{
  top:0;
  left:0;
  right:0;
  height:26px;
  min-height:26px;
  padding:0 8px;
  box-sizing:border-box;
  border-radius:11px 11px 0 0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  text-shadow:0 2px 7px rgba(0,0,0,.9);
}

.profile-content-mini-card > .profile-mini-location .profile-mini-location-flag{
  width:15px;
  height:9px;
  border-radius:2px;
}

.profile-content-mini-card > .profile-mini-location .profile-mini-location-iso{
  display:none;
}

.profile-content-mini-card > .profile-mini-location .profile-mini-location-globe{
  font-size:12px;
  line-height:1;
  margin-left:-2px;
  margin-right:-2px;
}

.profile-content-mini-card > .network-media-info{
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:none;
  height:26px;
  min-height:26px;
  padding:0 26px 0 8px;
  box-sizing:border-box;
  transform:none;
  justify-content:flex-start;
  border:0;
  border-radius:0 0 11px 11px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.profile-group-mini-card > .profile-group-name-band{
  justify-content:center;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.profile-group-mini-card > .profile-group-members-band{
  position:absolute;
  justify-content:flex-start;
  gap:6px;
}

.profile-group-visibility-icon{
  position:absolute;
  right:8px;
  top:calc(50% - 1px);
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  font-size:10px;
  line-height:10px;
}

#contactsPanel.is-groups-view .contacts-search-shell {
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

#contactsPanel.is-groups-view .contacts-search-shell:hover,
#contactsPanel.is-groups-view .contacts-search-shell:focus-within {
  border-color: #FFD84D !important;
  background:rgba(255,216,77,.10) !important;
  box-shadow: 0 0 14px rgba(255,216,77,.18) !important;
}

#contactsPanel.is-groups-view .group-directory-card .contacts-directory-mutual {
  color: #fff !important;
}

#contactsPanel.is-groups-view .contacts-add-trigger:hover,
#contactsPanel.is-groups-view .contacts-add-trigger:focus-visible {
  border-color: #FFD84D !important;
  background:rgba(255,216,77,.12) !important;
  box-shadow: 0 0 14px rgba(255,216,77,.18) !important;
}

#contactsPanel:not(.is-groups-view) .contacts-search-shell {
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

#contactsPanel:not(.is-groups-view) .contacts-search-shell:hover,
#contactsPanel:not(.is-groups-view) .contacts-search-shell:focus-within {
  border-color: #FF1744 !important;
  background:rgba(255,23,68,.10) !important;
  box-shadow: 0 0 14px rgba(255,23,68,.18) !important;
}

#contactsPanel:not(.is-groups-view) .contacts-add-trigger:hover,
#contactsPanel:not(.is-groups-view) .contacts-add-trigger:focus-visible {
  border-color:#FF1744 !important;
  background:rgba(255,23,68,.12) !important;
  box-shadow:0 0 14px rgba(255,23,68,.18) !important;
}

/* ===========================================================
BLOC CSS 12.42 - Fenêtre de consultation d'un groupe
=========================================================== */
#groupViewerPanel.is-open{
  display:flex;
}

.group-composer-box{
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
}

.group-viewer-box{
  position:relative;
  display:flex;
  flex-direction:column;
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
}

.group-viewer-body{
  flex:1 1 auto;
  height:100%;
  min-height:0;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding:var(--feed-window-head-height, 62px) 0 0;
  scroll-padding-bottom:calc(var(--feed-window-footer-height, 72px) + var(--comments-composer-height, 52px) + 18px);
  box-sizing:border-box;
}

.group-viewer-content{
  width:100%;
  min-height:calc(100vh - 20px - var(--feed-window-head-height, 62px) - var(--feed-window-footer-height, 72px));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.group-viewer-photo{
  width:100%;
  height:clamp(195px, 28vh, 290px);
  min-height:clamp(195px, 28vh, 290px);
  flex:0 0 clamp(195px, 28vh, 290px);
  overflow:hidden;
  border:0;
  border-radius:0;
  background:rgba(255,255,255,.025);
  box-shadow:none;
}

.group-viewer-content > :not(.group-viewer-photo){
  width:min(calc(100% - 36px), 860px);
}

.group-viewer-photo.is-empty{
  display:grid;
  place-items:center;
}

.group-viewer-photo-media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.group-viewer-photo-placeholder{
  font-size:54px;
  filter:drop-shadow(0 0 14px rgba(255,216,77,.3));
}

.group-viewer-name{
  width:100%;
  margin-top:-3px;
  text-align:center;
  font-size:18px;
  line-height:1.15;
  font-weight:900;
  color:#fff;
}

.group-viewer-metadata{
  width:100%;
  margin-top:-4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.group-viewer-members{
  text-align:left;
  font-size:14px;
  font-weight:800;
  color:var(--color-text-dim);
}

.group-viewer-created{
  margin-left:auto;
  text-align:right;
  font-size:14px;
  font-weight:800;
  color:var(--color-text-dim);
}

.group-viewer-description{
  width:100%;
  padding:16px;
  box-sizing:border-box;
  text-align:left;
  line-height:1.45;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}

.group-viewer-description.is-empty{
  color:var(--color-text-dim);
}

.group-viewer-primary-action{
  width:100%;
  height:38px;
  min-height:38px;
  flex:0 0 38px;
  margin-top:4px;
  border:1px solid #ffd84d;
  border-radius:12px;
  color:#fff;
  background:rgba(255,216,77,.1);
  font:inherit;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 18px rgba(255,216,77,.12);
}

.group-viewer-primary-action.is-disabled{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.045);
  color:var(--color-text-dim);
  box-shadow:none;
  cursor:default;
}

.group-viewer-private-messages-action{
  margin-top:0;
  border-color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 14px rgba(255,255,255,.18);
}
.group-viewer-private-messages-action:hover,
.group-viewer-private-messages-action:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.14);
  box-shadow:0 0 16px rgba(255,255,255,.24);
  outline:none;
}

#groupPrivateDiscussionsPanel .discussion-card-inline-action:not(.is-danger){
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}

#groupPrivateDiscussionsPanel .discussion-card-inline-action.is-danger{
  border-color:rgba(255,70,70,.90) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}

.group-viewer-footer{
  justify-content:space-between !important;
}

.group-viewer-footer .panel-footer-slot-center{
  flex:1 1 auto;
}

/* ===========================================================
BLOC CSS 12.43 - Fenêtre de gestion d'un groupe
=========================================================== */
#groupManagePanel.is-open{
  display:flex;
}

.group-manage-box{
  position:relative;
  width:min(var(--topbar-max), calc(100vw - 20px));
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  overflow:hidden;
}

.group-manage-body{
  flex:1 1 auto;
  height:100%;
  min-height:0;
  overflow:auto;
  padding:16px 18px calc(var(--feed-window-footer-height, 72px) + 18px);
  box-sizing:border-box;
}

.group-manage-body > .group-manage-section{
  width:min(100%, 860px);
  margin:0 auto 6px;
}

.group-manage-section{
  padding:16px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.group-manage-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.group-manage-section-title{
  color:#fff;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
}

.group-manage-section-subtitle{
  margin-top:3px;
  color:var(--color-text-dim);
  font-size:12px;
  font-weight:700;
}

.group-manage-section-action,
.group-manage-row-action,
.group-manage-delete{
  min-height:36px;
  padding:0 13px;
  border:1px solid rgba(255,216,77,.72);
  border-radius:10px;
  color:#fff;
  background:rgba(255,216,77,.09);
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.group-manage-section-action:disabled,
.group-manage-row-action:disabled,
.group-manage-delete:disabled{
  opacity:.55;
  cursor:wait;
}

.group-manage-section-action{
  height:32px;
  min-height:32px;
  flex:0 0 32px;
}

.group-manage-summary{
  display:flex;
  align-items:stretch;
  gap:14px;
}

.group-manage-photo{
  width:112px;
  min-width:112px;
  height:88px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,216,77,.72);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  font-size:30px;
}

.group-manage-photo-media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.group-manage-summary-copy{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.group-manage-name{
  color:#fff;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
}

.group-manage-meta{
  margin-top:5px;
  color:var(--color-text-dim);
  font-size:12px;
  font-weight:800;
}

.group-manage-created{
  margin-top:3px;
  color:var(--color-text-dim);
  font-size:12px;
  font-weight:800;
}

.group-manage-description{
  margin-top:9px;
  color:var(--color-text-soft);
  font-size:13px;
  line-height:1.4;
  text-align:left;
}

.group-manage-description-card .group-manage-description{
  margin-top:0;
}

.group-manage-members-list{
  display:grid;
  gap:8px;
}

.group-manage-member-row{
  min-height:54px;
  padding:7px 8px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:rgba(0,0,0,.3);
}

.group-manage-member-avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background-color:rgba(255,255,255,.06);
  color:#fff;
  font-size:12px;
  font-weight:900;
  background-size:cover;
  background-position:center;
}

.group-manage-member-copy{
  min-width:0;
  flex:1 1 auto;
}

.group-manage-member-name{
  overflow:hidden;
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.group-manage-member-role{
  margin-top:2px;
  color:var(--color-text-dim);
  font-size:11px;
  font-weight:700;
}

.group-manage-row-action{
  min-width:76px;
  min-height:32px;
  padding:0 10px;
}

.group-manage-row-action.is-danger{
  border-color:rgba(255,70,70,.55);
  background:rgba(255,70,70,.1);
}

.group-manage-empty{
  padding:18px 12px;
  color:var(--color-text-dim);
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.group-manage-activity-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:9px;
}

.group-manage-activity-card{
  min-height:70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:rgba(0,0,0,.28);
  text-align:center;
}

.group-manage-activity-card strong{
  color:#fff;
  font-size:20px;
  line-height:1;
}

.group-manage-activity-card span{
  color:var(--color-text-dim);
  font-size:11px;
  font-weight:700;
}

.group-manage-availability{
  margin-top:11px;
  color:var(--color-text-dim);
  font-size:11px;
  line-height:1.4;
  text-align:left;
}

.group-manage-section.is-danger{
  border-color:rgba(255,70,70,.35);
}

.group-manage-delete{
  width:100%;
  border-color:rgba(255,70,70,.62);
  background:rgba(255,70,70,.12);
  color:#fff;
}

.group-manage-footer{
  justify-content:space-between !important;
}

.group-manage-footer .panel-footer-slot-center{
  flex:1 1 auto;
}

@media (max-width:620px){
  .group-manage-body{
    padding-left:12px;
    padding-right:12px;
  }

  .group-manage-section{
    padding:13px;
  }

  .group-manage-summary{
    align-items:center;
  }

  .group-manage-photo{
    width:82px;
    min-width:82px;
    height:72px;
  }

  .group-manage-activity-grid{
    gap:6px;
  }

  .group-manage-activity-card span{
    padding:0 4px;
    font-size:10px;
  }
}

.profile-contact-mini-card > .profile-contact-name-band,
.profile-contact-mini-card > .profile-contact-name-band .profile-mini-location-city{
  justify-content:center;
  text-align:center;
}

.profile-contact-mini-card > .profile-contact-presence{
  padding-right:8px;
}

.profile-contact-mini-card > .profile-contact-presence.is-online{
  justify-content:space-between;
}

.profile-contact-presence-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-contact-presence-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.88);
}

/* ===========================================================
BLOC CSS 12.44 - CARTES COMMUNAUTÉ : BANDES D’INFORMATION
=========================================================== */
#networkPanel .network-publication-card::before,
#networkPanel .network-story-card::before{
  content:'';
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  right:0;
  height:38px;
  border-radius:11px 11px 0 0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:none;
}

#networkPanel .network-publication-card > .network-media-info,
#networkPanel .network-story-card > .network-media-info{
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:none;
  height:26px;
  min-height:26px;
  padding:0 26px 0 8px;
  box-sizing:border-box;
  transform:none;
  justify-content:flex-start;
  border:0;
  border-radius:0 0 11px 11px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
#discussionsOptionsDropdown .online-sort-icon-dot,
#contactsOptionsDropdown .online-sort-icon-dot{
  border-color:rgba(255,255,255,.72);
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.68);
}

/* ===========================================================
BLOC CSS 12.45 - CORBEILLE : GRILLE, APERÇUS ET DURÉE RESTANTE
=========================================================== */
.settings-trash-list.settings-trash-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.settings-trash-retention-notice + .settings-trash-list.settings-trash-grid{
  margin-top:10px;
}
.settings-trash-retention-notice{
  width:100%;
  box-sizing:border-box;
  padding:13px 15px;
  border:1px solid rgba(255,70,70,.9);
  border-radius:14px;
  background:rgba(255,70,70,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 14px rgba(255,70,70,.18);
  color:#fff;
  font-size:12px;
  font-weight:850;
  line-height:1.45;
  text-align:center;
}
.settings-trash-card{
  position:relative;
  display:block;
  min-width:0;
  aspect-ratio:1 / 1;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.settings-trash-card:hover,
.settings-trash-card:focus-visible{
  outline:none;
  border-color:rgba(255,255,255,.72);
  box-shadow:0 0 18px rgba(255,255,255,.12);
}
.settings-trash-preview{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.settings-trash-preview-unavailable{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:850;
  text-align:center;
}
.settings-trash-card .settings-trash-remaining{
  position:absolute;
  left:50%;
  bottom:8px;
  z-index:2;
  max-width:calc(100% - 12px);
  transform:translateX(-50%);
  padding:6px 10px;
  border:1px solid #ff414d;
  border-radius:999px;
  background:rgba(72,5,10,.78);
  box-shadow:0 0 14px rgba(255,45,58,.22);
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

























@media (max-width:620px){
  .settings-trash-list.settings-trash-grid{ gap:7px; }
  .settings-trash-card .settings-trash-remaining{
    bottom:6px;
    padding:5px 7px;
    font-size:9px;
  }









}
#groupPhotoPickerPanel .publication-picker-photo.is-selected{
  border-color: #FFD84D !important;
  outline-color: #FFD84D !important;
  box-shadow: 0 0 0 1px rgba(255, 216, 77, 0.50), 0 0 16px rgba(255, 216, 77, 0.28) !important;
}

#groupPhotoPickerPanel .publication-picker-order {
  background: color-mix(in srgb, #FFD84D 10%, #090909) !important;
  border-color: #FFD84D !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(255, 216, 77, 0.18) !important;
}

#groupPhotoPickerPanel .album-footer-validate {
  border-color: #FFD84D !important;
  background: color-mix(in srgb, #FFD84D 10%, #090909) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(255, 216, 77, 0.18) !important;
}

#publicationComposerContent[data-composer-type="publication"] .publication-picker-order,
#publicationComposerContent[data-composer-type="story"] .publication-picker-order,
#publicationComposerContent[data-composer-type="reel"] .publication-picker-order,
#publicationComposerContent[data-composer-type="publication"] .publication-picker-confirm.is-ready,
#publicationComposerContent[data-composer-type="story"] .publication-picker-confirm.is-ready,
#publicationComposerContent[data-composer-type="reel"] .publication-picker-confirm.is-ready {
  border-color: var(--publication-composer-accent) !important;
  background: color-mix(in srgb, var(--publication-composer-accent) 10%, #090909) !important;
  color: #fff !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--publication-composer-accent) 18%, transparent) !important;
}

#profilePhotoPickerPanel .publication-picker-order,
#profileCoverPickerPanel .publication-picker-order,
#profilePhotoPickerPanel .album-footer-validate,
#profileCoverPickerPanel .album-footer-validate {
  border-color: #fff !important;
  background: color-mix(in srgb, #fff 10%, #090909) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(255,255,255,.18) !important;
}

/* ===========================================================
BLOC CSS 12.46 - cartes de connexion harmonisées avec les cartes de l'application
=========================================================== */
.auth-remembered-account,
.auth-other-account-card{
  position:relative;
  display:block;
  overflow:hidden;
  padding:0;
}

.auth-remembered-account .auth-profile-card{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  border-radius:inherit;
}

.auth-remembered-account #authRememberAvatar.auth-profile-photo.profile-photo-slot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  background-size:cover;
  background-repeat:no-repeat;
}

.auth-profile-name,
.auth-other-account-label{
  position:absolute;
  z-index:6;
  top:auto;
  bottom:0;
  left:0;
  right:0;
  min-height:34px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:rgba(0,0,0,.68);
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.1;
  text-align:center;
  text-transform:uppercase;
  box-sizing:border-box;
  border-radius:0 0 13px 13px;
  overflow:hidden;
  backdrop-filter:blur(4px);
}

.auth-other-account-plus{
  position:absolute;
  top:50%;
  left:50%;
  margin:0;
  transform:translate(-50%, -50%);
}

/* ===========================================================
BLOC CSS 12.48 - Fil compact du groupe, basé sur les commentaires
=========================================================== */
.group-viewer-primary-action.is-danger{
  border-color:rgba(255,70,70,.90) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}
.group-viewer-primary-action.is-danger:hover,
.group-viewer-primary-action.is-danger:focus-visible{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
}
.group-feed-section{
  display:grid;
  gap:12px;
  width:100%;
  margin-top:6px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  box-sizing:border-box;
}
.group-feed-head{ margin:0; }
.group-feed-order{
  border-color:#FFD84D !important;
  background:rgba(255,216,77,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,216,77,.18) !important;
}
.group-feed-list{ display:grid; gap:10px; }
.group-feed-composer{
  position:sticky;
  bottom:0;
  z-index:8;
  width:100%;
  padding:10px 0;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);
  box-sizing:border-box;
}
.group-feed-composer .comments-input-shell{ width:100%; }
.group-feed-composer .comments-send-btn{
  border-color:rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.045) !important;
  color:rgba(255,255,255,.55) !important;
  box-shadow:none !important;
  opacity:.65;
}
.group-feed-composer .comments-send-btn.is-ready{
  border-color:#FFD84D !important;
  background:rgba(255,216,77,.12) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,216,77,.22) !important;
  opacity:1;
}

/* ===========================================================
BLOC CSS 12.49 - Ajustements : défilement réel et compositeur aligné sur les commentaires
=========================================================== */
.group-feed-section{
  flex:0 0 auto;
  min-height:auto;
  display:flex;
  flex-direction:column;
}
.group-feed-list{
  flex:0 0 auto;
  padding-bottom:2px;
}
.group-feed-scroll-clearance{
  width:100%;
  height:calc(var(--feed-window-footer-height, 72px) + var(--comments-composer-height, 52px) + 2px);
  min-height:calc(var(--feed-window-footer-height, 72px) + var(--comments-composer-height, 52px) + 2px);
  flex:0 0 auto;
  pointer-events:none;
}
.group-feed-list .comment-card{
  align-items:start;
}
.group-feed-list .comment-card.has-actions-below{
  grid-template-columns:50px minmax(0,1fr);
}
.group-feed-list .comment-body{
  width:100%;
  min-width:0;
  overflow:visible;
}
.group-feed-list .comment-text{
  margin-top:6px;
}
.group-feed-list .comment-media-grid{
  width:100%;
  max-width:170px;
  height:auto;
  aspect-ratio:1;
  margin:10px 0 6px auto;
  isolation:isolate;
}
.group-feed-list .comment-media-grid.is-stack{
  width:var(--conversation-media-stack-width);
  max-width:240px;
  height:var(--conversation-media-card-size);
  aspect-ratio:auto;
  margin-left:auto;
}
.group-feed-list .comment-media-grid .conversation-message-media-slot{
  width:auto;
  height:auto;
}
.group-feed-list .comment-media-grid.is-single .conversation-message-media-slot{
  width:100%;
  height:100%;
}

#profilePanel.is-open{
  z-index:10130;
}
.group-comment-card-footer{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 0;
}
.group-comment-card-footer.has-media{
  width:min(170px, 48vw);
  margin-left:auto;
}
.group-feed-list .comment-card:has(.comment-media-grid.is-stack) .group-comment-card-footer.has-media{
  width:min(240px, 74vw);
}
.group-comment-card-footer .comment-time{
  margin-top:0;
}
.group-comment-card-footer .comment-card-actions{
  flex:0 0 auto;
  margin-top:0;
}
.group-comment-card-footer .comment-card-actions-menu{
  top:calc(100% + 7px);
  right:0;
  bottom:auto;
}
.group-feed-list .comment-card:has(.group-comment-card-footer .comment-card-actions.is-open){
  padding-bottom:48px;
}
.group-feed-composer{
  flex:0 0 auto;
  position:absolute;
  left:0;
  right:0;
  bottom:var(--feed-window-footer-height, 72px);
  transform:translateY(0);
  will-change:transform;
  width:auto;
  margin-top:0;
  margin-bottom:0;
  padding:9px 12px;
  border-top:0;
  transition:transform .24s ease;
}
#groupViewerPanel.is-feed-header-hidden .group-feed-composer{
  transform:translateY(var(--feed-window-footer-height, 72px));
}
.group-feed-composer::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  height:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.12);
  pointer-events:none;
}

/* ===========================================================
BLOC CSS 12.50 - Tous mes contacts : survol rouge futuriste et compteur des demandes
=========================================================== */
#contactsPanel:not(.is-groups-view) .contacts-search-results .contacts-directory-card.is-contact-online{
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
#contactsPanel:not(.is-groups-view) .contacts-search-results .contacts-directory-card:hover,
#contactsPanel:not(.is-groups-view) .contacts-search-results .contacts-directory-card:focus-within{
  border-color:#FF1744 !important;
  box-shadow:0 0 14px rgba(255,23,68,.18) !important;
}
#contactsPanel:not(.is-groups-view) .contacts-search-results .contacts-directory-message:hover,
#contactsPanel:not(.is-groups-view) .contacts-search-results .contacts-directory-message:focus-visible{
  border-color:#FF1744 !important;
  background:rgba(255,23,68,.12) !important;
  box-shadow:0 0 14px rgba(255,23,68,.22) !important;
}
#contactsPanel:not(.is-groups-view) .contacts-add-trigger-badge{
  border:1px solid #FF1744 !important;
  background:rgba(255,23,68,.18) !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* ===========================================================
BLOC CSS 12.51 - Ajouter des contacts : séparateurs et bulles en couleur Contact
=========================================================== */
#contactsPanel:not(.is-groups-view) .contacts-add-section-line{
  color:#FF1744;
}
#contactsPanel:not(.is-groups-view) .contacts-add-section-label{
  border:1px solid #FF1744;
  background:transparent;
  box-shadow:none;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#contactsPanel:not(.is-groups-view) .contacts-add-section-label:hover{
  border-color:#FF1744;
  background:rgba(255,23,68,.10);
  box-shadow:0 0 16px rgba(255,23,68,.18);
}

/* ===========================================================
BLOC CSS 12.52 - Discussions Contact : messages envoyés et bouton d'envoi
=========================================================== */
#conversationPanel .conversation-message-row.is-mine .conversation-message-bubble{
  border-color:#FF1744 !important;
  background:rgba(255,23,68,.10) !important;
  box-shadow:0 0 14px rgba(255,23,68,.12) !important;
}
#conversationPanel .conversation-message-row.is-mine .conversation-message-bubble.is-media-only{
  padding:0;
  border:0;
  background:transparent !important;
  box-shadow:none !important;
}
#conversationPanel .conversation-send-btn.is-ready{
  border-color:#FF1744 !important;
  background:rgba(255,23,68,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,23,68,.18) !important;
}

/* ===========================================================
BLOC CSS 12.53 - Mes discussions : survol et recherche en couleur Contact
=========================================================== */
#discussionsPanel .discussions-search-shell{
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}
#discussionsPanel .discussions-search-shell:hover,
#discussionsPanel .discussions-search-shell:focus-within{
  border-color:#FF1744 !important;
  box-shadow:0 0 14px rgba(255,23,68,.18) !important;
}
#discussionsPanel .discussion-card:hover,
#discussionsPanel .discussion-card:focus-within{
  border-color:#FF1744 !important;
  box-shadow:0 0 14px rgba(255,23,68,.18) !important;
}

/* ===========================================================
BLOC CSS 12.54 - Mes discussions groupes : même fenêtre, avec l'identité jaune des groupes
=========================================================== */
#groupDiscussionsPanel .discussions-search-shell{
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}
#groupDiscussionsPanel .discussions-search-shell:hover,
#groupDiscussionsPanel .discussions-search-shell:focus-within{
  border-color:#FFD84D !important;
  box-shadow:0 0 14px rgba(255,216,77,.18) !important;
}
#groupDiscussionsPanel .discussion-card:hover,
#groupDiscussionsPanel .discussion-card:focus-within{
  border-color:#FFD84D !important;
  box-shadow:0 0 14px rgba(255,216,77,.18) !important;
}
#groupPrivateDiscussionsPanel .discussion-card:hover,
#groupPrivateDiscussionsPanel .discussion-card:focus-within{
  border-color:#FFD84D !important;
  box-shadow:0 0 14px rgba(255,216,77,.22) !important;
}
#groupPrivateDiscussionsPanel .discussions-search-shell:hover,
#groupPrivateDiscussionsPanel .discussions-search-shell:focus-within{
  border-color:#FFD84D !important;
  box-shadow:0 0 14px rgba(255,216,77,.22) !important;
}
#groupPrivateDiscussionsPanel .discussions-search-shell:focus-within{
  background:rgba(255,216,77,.10) !important;
}
#groupDiscussionsPanel .group-discussion-avatar{
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
#groupDiscussionsPanel .group-discussion-avatar-media{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* ===========================================================
BLOC CSS 12.56 - Tous ses ami(e)s : survol en couleur Contact
=========================================================== */
#friendsListPanel .contacts-directory-card:hover,
#friendsListPanel .contacts-directory-card:focus-visible,
#friendsListPanel .contacts-directory-card:focus-within{
  border-color:#FF1744 !important;
  box-shadow:0 0 14px rgba(255,23,68,.18) !important;
}

/* ===========================================================
BLOC CSS 12.57 - Mes souvenirs : main sur toutes les sections et sous-sections cliquables
=========================================================== */
#souvenirsPanel .album-level-root .legend-row,
#souvenirsPanel .album-level-root button:not(:disabled),
#souvenirsPanel .album-level-root [role="button"],
#countryAlbumPanel .album-level-root .legend-row,
#countryAlbumPanel .album-level-root button:not(:disabled),
#countryAlbumPanel .album-level-root [role="button"]{
  cursor:pointer;
}

/* ===========================================================
BLOC CSS 12.58 - Réglages - Ma localisation : même interrupteur que dans Exploration
=========================================================== */
#preferencesPanel .preferences-location-visibility{
  display:grid;
  gap:6px;
}

#preferencesPanel .preferences-location-visibility > .panel-sub,
#preferencesPanel .preferences-location-help{
  margin:0;
  line-height:1.4;
}

#preferencesPanel .preferences-location-modes{
  display:grid;
  gap:8px;
}

#preferencesPanel .preferences-location-modes .viewer-visibility-row{
  min-height:38px;
  padding:6px 10px;
}

#preferencesPanel .preferences-location-modes .viewer-visibility-icon{
  width:22px;
  height:22px;
  min-width:22px;
  flex:0 0 22px;
  font-size:13px;
}

#preferencesPanel .preferences-location-row{
  min-height:48px;
  padding:8px 10px;
}
#preferencesPanel .preferences-location-row .viewer-visibility-switch{
  width:52px;
  height:26px;
}
#preferencesPanel .preferences-location-row .viewer-visibility-switch::after{
  width:20px;
  height:20px;
}
#preferencesPanel .preferences-location-row.is-active .viewer-visibility-switch::after{
  left:28px;
}
#preferencesPanel .preferences-language-flag{
  width:18px;
  height:12px;
  display:block;
  object-fit:cover;
  border-radius:2px;
}
#preferencesPanel .preferences-language-row:disabled{
  cursor:default;
  color:rgba(255,255,255,.52);
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.10);
  opacity:1;
}
#preferencesPanel .preferences-language-row:disabled:hover{
  background:rgba(255,255,255,.025);
}
#preferencesPanel .preferences-language-row:disabled .viewer-visibility-switch{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}
#preferencesPanel .preferences-language-row:disabled .viewer-visibility-switch::after{
  background:rgba(255,255,255,.62);
}

/* ===========================================================
BLOC CSS 12.59 - Fil public mixte : découverte sociale, exploration et publicité
=========================================================== */
#publicationFeedBody .public-feed-module{
  --public-feed-module-accent:#fff;
  position:relative;
  z-index:6;
  isolation:isolate;
  flex:0 0 auto;
  width:100%;
  display:grid;
  gap:0;
  margin-block:-12px;
  padding:14px 10px;
  box-sizing:border-box;
  overflow:visible;
  background:#000;
}

#publicationFeedBody .publication-fullscreen-feed-list > .profile-publication-fullscreen-card{
  position:relative;
  z-index:1;
}

#publicationFeedBody .public-feed-module-divider{
  --network-section-accent:255,255,255;
  padding-bottom:12px;
}

#publicationFeedBody .public-feed-module-divider .network-section-line{
  height:.5px;
  background:var(--public-feed-module-accent);
  box-shadow:0 0 10px color-mix(in srgb, var(--public-feed-module-accent) 18%, transparent);
}

#publicationFeedBody .public-feed-module-pill{
  min-width:150px;
  height:30px;
  border-color:var(--public-feed-module-accent);
  background:color-mix(in srgb, var(--public-feed-module-accent) 10%, transparent);
  box-shadow:0 0 16px color-mix(in srgb, var(--public-feed-module-accent) 13%, transparent);
  cursor:default;
  pointer-events:auto;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

#publicationFeedBody .public-feed-module-pill:hover{
  border-color:var(--public-feed-module-accent);
  background:color-mix(in srgb, var(--public-feed-module-accent) 16%, transparent);
  box-shadow:
  0 0 18px color-mix(in srgb, var(--public-feed-module-accent) 25%, transparent),
  0 0 0 1px color-mix(in srgb, var(--public-feed-module-accent) 10%, transparent) inset;
}

#publicationFeedBody .public-feed-module.has-gradient .network-section-line{
  background:var(--public-feed-module-gradient);
}

#publicationFeedBody .public-feed-module.has-gradient .public-feed-module-pill,
#publicationFeedBody .public-feed-module.has-gradient .public-feed-module-band{
  border-color:transparent;
  background:
  linear-gradient(
  color-mix(in srgb, var(--public-feed-module-accent) 10%, #000),
  color-mix(in srgb, var(--public-feed-module-accent) 10%, #000)
  ) padding-box,
  var(--public-feed-module-gradient) border-box;
}

#publicationFeedBody .public-feed-module.has-gradient .public-feed-module-pill:hover,
#publicationFeedBody .public-feed-module.has-gradient .public-feed-module-band:hover{
  border-color:transparent;
  background:
  linear-gradient(
  color-mix(in srgb, var(--public-feed-module-accent) 17%, #000),
  color-mix(in srgb, var(--public-feed-module-accent) 17%, #000)
  ) padding-box,
  var(--public-feed-module-gradient) border-box;
  box-shadow:
  0 0 20px color-mix(in srgb, var(--public-feed-module-accent) 28%, transparent),
  0 0 0 1px color-mix(in srgb, #fff 8%, transparent) inset;
}

#publicationFeedBody .public-feed-module-rail{
  width:100%;
  gap:10px;
  padding:1px 1px 12px;
  box-sizing:border-box;
}

#publicationFeedBody .public-feed-module-rail .network-story-card,
#publicationFeedBody .public-feed-module-rail .network-publication-card{
  width:140px;
  height:202px;
  flex:0 0 140px;
}

#publicationFeedBody .public-feed-social-see-all-card{
  border-color:var(--network-accent);
  position:relative;
  display:flex;
}

body.is-public-feed-globe-journey .topbar-wrap,
body.is-public-feed-globe-journey .bottombar-wrap,
body.is-public-feed-globe-journey .hud-left,
body.is-public-feed-globe-journey .hud-right,
body.is-public-feed-globe-journey .globe-zoom-return{
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
}

body.is-public-feed-globe-journey #globe canvas{
  filter:saturate(1.08) contrast(1.03);
  transition:filter 240ms ease;
}

body.is-public-feed-globe-journey .pill-html{
  opacity:0;
  transition:opacity 200ms ease;
}

body.is-public-feed-globe-journey .pill-html.is-public-feed-journey-focus{
  opacity:1;
}

@media (prefers-reduced-motion: reduce){
  body.is-public-feed-globe-journey .topbar-wrap,
  body.is-public-feed-globe-journey .bottombar-wrap,
  body.is-public-feed-globe-journey .hud-left,
  body.is-public-feed-globe-journey .hud-right,
  body.is-public-feed-globe-journey .globe-zoom-return,
  body.is-public-feed-globe-journey #globe canvas{
    transition:none;
  }
}

#publicationFeedBody .public-feed-module-rail .network-publication-card::before,
#publicationFeedBody .public-feed-module-rail .network-story-card::before{
  content:'';
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  right:0;
  height:38px;
  border-radius:11px 11px 0 0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:none;
}

#publicationFeedBody .public-feed-module-rail .network-media-info{
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:none;
  height:26px;
  min-height:26px;
  padding:0 26px 0 8px;
  transform:none;
  justify-content:flex-start;
  border:0;
  border-radius:0 0 11px 11px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

#publicationFeedBody .public-feed-module-band{
  width:100%;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border:1px solid var(--public-feed-module-accent);
  border-radius:9px;
  background:color-mix(in srgb, var(--public-feed-module-accent) 10%, transparent);
  color:#fff;
  box-shadow:0 0 15px color-mix(in srgb, var(--public-feed-module-accent) 12%, transparent);
  box-sizing:border-box;
  font-size:12px;
  font-weight:900;
  line-height:1.1;
  text-align:center;
}

#publicationFeedBody .public-feed-module-band:hover{
  background:color-mix(in srgb, var(--public-feed-module-accent) 16%, transparent);
  box-shadow:
  0 0 18px color-mix(in srgb, var(--public-feed-module-accent) 25%, transparent),
  0 0 0 1px color-mix(in srgb, var(--public-feed-module-accent) 10%, transparent) inset;
}

#publicationFeedBody .public-feed-exploration-card{
  border-color:var(--public-feed-module-accent);
  background:
  radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--public-feed-module-accent) 24%, transparent), transparent 56%),
  rgba(255,255,255,.035);
}

#publicationFeedBody .public-feed-exploration-card:hover{
  border-color:var(--public-feed-module-accent);
  box-shadow:0 0 16px color-mix(in srgb, var(--public-feed-module-accent) 18%, transparent);
}

#publicationFeedBody .public-feed-exploration-card.has-gradient{
  border-color:transparent;
  background:
  radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--public-feed-module-accent) 24%, transparent), transparent 56%) padding-box,
  linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)) padding-box,
  var(--public-feed-module-gradient) border-box;
}

#publicationFeedBody .public-feed-exploration-card.has-gradient:hover{
  border-color:transparent;
}

#publicationFeedBody .public-feed-exploration-flag{
  position:absolute;
  z-index:2;
  top:9px;
  left:8px;
  width:16px;
  height:10px;
  border-radius:2px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
}

#publicationFeedBody .public-feed-exploration-category{
  position:absolute;
  z-index:2;
  top:8px;
  left:29px;
  right:7px;
  overflow:hidden;
  color:rgba(255,255,255,.84);
  font-size:9px;
  font-weight:900;
  line-height:1.15;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#publicationFeedBody .public-feed-module.is-trending .public-feed-exploration-category{
  font-size:10px;
}

#publicationFeedBody .public-feed-module.is-explore .public-feed-exploration-category{
  font-size:10px;
}

#publicationFeedBody .public-feed-exploration-name{
  position:absolute;
  z-index:2;
  left:8px;
  right:8px;
  bottom:31px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.05;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}

#publicationFeedBody .public-feed-exploration-name:empty{
  display:none;
}

#publicationFeedBody .public-feed-exploration-country{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  border-radius:0 0 11px 11px;
  background:rgba(0,0,0,.68);
  color:rgba(255,255,255,.9);
  font-size:10px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-sizing:border-box;
}

#publicationFeedBody .public-feed-exploration-country.is-ranked{
  justify-content:flex-start;
  gap:4px;
  text-align:left;
}

#publicationFeedBody .public-feed-exploration-country.has-bottom-label{
  justify-content:flex-start;
  text-align:left;
}

#publicationFeedBody .public-feed-exploration-rank{
  flex:0 0 auto;
  white-space:nowrap;
}

#publicationFeedBody .public-feed-exploration-bottom-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#publicationFeedBody .public-feed-advertisement-card{
  width:100%;
  height:136px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:12px;
  background:
  radial-gradient(circle at 50% 45%, rgba(255,255,255,.11), transparent 54%),
  rgba(255,255,255,.035);
  box-shadow:0 0 16px rgba(255,255,255,.10);
  box-sizing:border-box;
}

#publicationFeedBody .public-feed-advertisement-placeholder,
#publicationFeedBody .public-feed-module-loading{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
}

#publicationFeedBody .public-feed-module-loading{
  width:220px;
  height:136px;
  flex:0 0 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,23,68,.36);
  border-radius:12px;
  background:rgba(255,23,68,.06);
}

#publicationFeedBody .public-feed-module.is-contacts .public-feed-module-rail{
  scroll-snap-type:none;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
}

#publicationFeedBody .public-feed-module.is-contacts .contacts-directory-card{
  flex:0 0 250px;
  width:250px;
  scroll-snap-align:none;
}

#publicationFeedBody .public-feed-module.is-contacts .public-feed-contacts-see-all-card{
  flex:0 0 212px;
  width:212px;
  align-self:stretch;
  position:relative;
  display:block;
  min-height:100%;
  padding:0;
  border-color:#FF1744;
  color:#fff;
  font:inherit;
  cursor:pointer;
}

#publicationFeedBody .public-feed-contacts-see-all-card .profile-story-create-plus{
  position:absolute;
  top:calc(50% - 18px);
  left:50%;
  width:70px;
  height:70px;
  transform:translate(-50%, -50%);
  border-color:#FF1744;
  font-size:44px;
  box-shadow:0 0 14px rgba(255,23,68,.46);
}

#publicationFeedBody .public-feed-contacts-see-all-label{
  position:absolute;
  right:16px;
  bottom:50px;
  left:16px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
}

#publicationFeedBody .public-feed-contacts-see-all-card .profile-see-all-count{
  position:absolute;
  bottom:19px;
  left:50%;
  transform:translateX(-50%);
  border:1px solid #FF1744;
  background:rgba(255,23,68,.10);
  box-shadow:0 0 10px rgba(255,23,68,.18);
}

#publicationFeedBody .public-feed-module.is-contacts .public-feed-contacts-see-all-card:hover,
#publicationFeedBody .public-feed-module.is-contacts .public-feed-contacts-see-all-card:focus-visible{
  border-color:#FF1744;
  background:rgba(255,23,68,.10);
  box-shadow:0 0 16px rgba(255,23,68,.18);
  outline:none;
}

#publicationFeedBody .public-feed-module.is-contacts .public-feed-module-band{
  cursor:pointer;
}

#publicationFeedBody .public-feed-module.is-contacts .contacts-directory-add.is-none,
#publicationFeedBody .public-feed-module.is-contacts .contacts-directory-add.is-pending-received{
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}

#publicationFeedBody .public-feed-module.is-contacts .contacts-directory-add.is-none:hover,
#publicationFeedBody .public-feed-module.is-contacts .contacts-directory-add.is-pending-received:hover{
  border-color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
}

@media (max-width:640px){
  #publicationFeedBody .public-feed-module{
    padding-left:8px;
    padding-right:8px;
  }
  #publicationFeedBody .public-feed-module-divider{
    gap:8px;
  }
  #publicationFeedBody .public-feed-module-pill{
    min-width:0;
    max-width:72vw;
    padding:0 13px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
/* ===========================================================
BLOC CSS 12.60 - Publicités immersives des fils Stories et Réels
=========================================================== */
.feed-video-ad-card{
  position:relative;
  width:100%;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.24);
  border-radius:0;
  background:#020306;
  color:#fff;
  box-sizing:border-box;
}

/* ===========================================================
BLOC CSS 12.61 - Publicités immersives : verrouillage, habillage et commandes

Pendant une publicité Story, le fil reste ancré sur la carte courante.
La navigation est réactivée par Passer ou par la fin du chronomètre.
=========================================================== */
.publication-feed-body.is-story-step-feed.is-ad-navigation-locked{
  overflow-y:hidden !important;
  overscroll-behavior:none;
}
.feed-video-ad-media,
.feed-video-ad-overlay{
  position:absolute;
  inset:0;
}
.feed-video-ad-media{
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
  radial-gradient(circle at 50% 45%, rgba(64,171,255,.34), transparent 31%),
  radial-gradient(circle at 22% 17%, rgba(255,194,74,.18), transparent 24%),
  linear-gradient(145deg, #07111d 0%, #020306 52%, #0c1423 100%);
}
.feed-video-ad-media::before,
.feed-video-ad-media::after{
  content:"";
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  animation:feedAdPulse 4s linear infinite;
}
.feed-video-ad-media::after{ animation-delay:-2s; }
.feed-video-ad-media.has-image{
  background-position:center;
  background-size:cover;
}
.feed-video-ad-media video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.feed-video-ad-orbit{
  position:absolute;
  width:min(72vw, 620px);
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  box-shadow:0 0 45px rgba(64,171,255,.2), inset 0 0 45px rgba(64,171,255,.1);
  animation:feedAdOrbit 12s linear infinite;
}
.feed-video-ad-globe{
  position:relative;
  z-index:1;
  font-size:clamp(110px, 23vw, 230px);
  filter:drop-shadow(0 0 36px rgba(70,179,255,.72));
  animation:feedAdFloat 4s ease-in-out infinite;
}
.feed-video-ad-overlay{
  z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.48), transparent 32%, transparent 52%, rgba(0,0,0,.9));
  pointer-events:none;
}
.feed-video-ad-head{
  position:absolute;
  z-index:3;
  top:10px;
  left:10px;
  right:10px;
  display:grid;
  grid-template-columns:46px minmax(0,auto) 1fr;
  align-items:center;
  gap:10px;
}
.feed-video-ad-logo{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.65);
  border-radius:12px;
  background:rgba(255,255,255,.1);
  font-weight:900;
  box-shadow:0 0 18px rgba(255,255,255,.18);
}
.feed-video-ad-logo img{ width:100%; height:100%; object-fit:cover; }
.feed-video-ad-sponsor{ font-weight:900; font-size:18px; }
.feed-video-ad-sponsored{ color:rgba(255,255,255,.7); font-size:14px; }
.feed-video-ad-skip,
.feed-video-ad-cta{
  border:1px solid rgba(255,255,255,.72);
  color:#fff;
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(12px);
  cursor:pointer;
}
.feed-video-ad-copy{
  position:absolute;
  z-index:3;
  left:clamp(22px, 5vw, 64px);
  right:clamp(22px, 5vw, 64px);
  bottom:154px;
  text-align:center;
}
.feed-video-ad-copy h3{
  margin:0 0 10px;
  font-size:clamp(29px, 5vw, 54px);
  line-height:1.04;
  text-shadow:0 3px 20px #000;
}
.feed-video-ad-copy p{
  margin:0 auto 22px;
  max-width:620px;
  color:rgba(255,255,255,.82);
  font-size:clamp(16px, 2.5vw, 22px);
}
.feed-video-ad-cta{
  min-width:min(320px, 82vw);
  min-height:54px;
  border-radius:17px;
  font-size:19px;
  font-weight:900;
  box-shadow:0 0 22px rgba(255,255,255,.16);
}
.feed-video-ad-progress{
  position:absolute;
  z-index:4;
  left:12px;
  right:12px;
  bottom:60px;
  height:43px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:34px 4px;
  column-gap:10px;
  row-gap:5px;
  align-items:center;
}
.feed-video-ad-playback-meta{
  grid-column:1 / -1;
  grid-row:1;
  display:grid;
  grid-template-columns:26px auto 34px 1fr;
  grid-template-rows:auto;
  column-gap:10px;
  align-items:center;
  min-height:34px;
  color:#fff;
}
.feed-video-ad-time{
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}
.feed-video-ad-progress-track{
  position:relative;
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  height:4px;
  border-radius:4px;
  background:rgba(255,255,255,.22);
}
.feed-video-ad-progress-fill{position:absolute;top:0;left:0;width:0;height:4px;border-radius:4px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.85)}
.feed-video-ad-progress-thumb{position:absolute;z-index:2;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 9px rgba(255,255,255,.9);transform:translate(-50%,-50%);pointer-events:none}
.feed-video-ad-skip{
  position:absolute;
  z-index:5;
  right:12px;
  bottom:12px;
  min-width:145px;
  height:36px;
  padding:0 12px;
  border-radius:12px;
  font-weight:850;
}
.feed-video-ad-skip:disabled{
  cursor:default;
  opacity:.62;
}
@keyframes feedAdPulse{
  0%{ transform:scale(.35); opacity:.8; }
  100%{ transform:scale(1.35); opacity:0; }
}
@keyframes feedAdOrbit{ to{ transform:rotate(360deg); } }
@keyframes feedAdFloat{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-18px) rotate(3deg); }
}
@media (prefers-reduced-motion:reduce){
  .feed-video-ad-media::before,
  .feed-video-ad-media::after,
  .feed-video-ad-orbit,
  .feed-video-ad-globe{ animation:none; }
}
/* ===========================================================
BLOC CSS 12.62 - Gestion publicitaire du panneau administrateur
=========================================================== */
.admin-ad-config-form,
.admin-ad-create-form{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.admin-ad-config-form label{
  display:grid;
  gap:7px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:800;
}
.admin-ad-config-form input[type="number"],
.admin-ad-create-form input{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  box-sizing:border-box;
  background:rgba(255,255,255,.055);
  color:#fff;
  font:inherit;
  outline:none;
}
.admin-ad-config-form input:focus,
.admin-ad-create-form input:focus{
  border-color:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.16);
}
.admin-ad-check{
  display:flex !important;
  align-items:center;
  gap:10px !important;
  min-height:46px;
}
.admin-ad-check input{
  appearance:none;
  width:20px;
  height:20px;
  flex:0 0 20px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.5);
  border-radius:5px;
  background:rgba(255,255,255,.055);
  cursor:pointer;
}
.admin-ad-check input:checked{
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}
.admin-ad-check input:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
@media (forced-colors:active){
  .admin-ad-check input{ appearance:auto; }
}
.admin-ad-config-form > button,
.admin-ad-create-form > button{ min-height:46px; }
.admin-ad-config-form > button,
.admin-ad-create-form > button,
.admin-ad-campaign-card [data-admin-ad-toggle]{ border-radius:12px; }
.admin-ad-campaign-card .admin-section-head{ align-items:center; }
.admin-ad-campaign-card .admin-metric-list{ margin-top:14px; }
@media (max-width:780px){
  .admin-ad-config-form,
  .admin-ad-create-form{ grid-template-columns:1fr; }
}
/* ===========================================================
BLOC CSS 12.63 - Chargement progressif des fils : les cartes éloignées gardent leur place

Chargement progressif des fils : les cartes éloignées gardent leur place
sans continuer à mobiliser le rendu graphique.
=========================================================== */
.progressive-feed-sentinel{
  width:100%;
  height:1px;
  min-height:1px;
  pointer-events:none;
  opacity:0;
}

.profile-section-batch-sentinel{
  flex:0 0 1px;
  width:1px;
  min-width:1px;
  height:1px;
  pointer-events:none;
  opacity:0;
}

.progressive-feed-rendered-item{
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
}

.progressive-feed-rendered-item.story-viewer-inline-box,
.progressive-feed-rendered-item.feed-video-ad-card{
  contain-intrinsic-size:auto 100vh;
}



/* ===========================================================
BLOC CSS 12.64 - Mobile : grandes fenêtres bord à bord. Les confirmations .global-modal-box

Mobile : grandes fenêtres bord à bord. Les confirmations .global-modal-box
et les dimensions desktop restent inchangées.
=========================================================== */
@media (max-width:480px){
  /* Popovers are children of the action row: give that containing block the
  viewer width while keeping its buttons centered. */
  .photo-viewer-shell .photo-viewer-top-actions{
    width:100%;
    box-sizing:border-box;
  }

  .photo-viewer-shell .viewer-album-dropdown,
  .photo-viewer-shell .viewer-share-dropdown{
    top:calc(100% + 8px);
    min-width:0;
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    height:calc(100dvh - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 84px - var(--icon-size));
    max-height:calc(100dvh - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 84px - var(--icon-size));
    box-sizing:border-box;
  }

  body .modal-overlay.panel-modal > .panel-modal-box,
  body #settingsPanel.is-trash-panel > .panel-modal-box,
  body #profileStatPanel > .panel-modal-box,
  body #profilePhotoPositionPanel > .panel-modal-box,
  body #photoViewerPanel > .photo-viewer-shell{
    width:100%;
    max-width:none;
    height:100%;
    max-height:none;
    min-height:0;
    margin:0;
    box-sizing:border-box;
    border:0;
    border-radius:0;
  }

  body .modal-overlay.panel-modal > .panel-modal-box{
    padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  }

  body .album-slideshow{
    padding:0;
  }

  /* Les cartes des fils publics remplissent la fenêtre mobile bord à bord. */
  #storyReelFeedBody{
    --story-reel-feed-card-height:calc(100dvh - var(--safe-top) - var(--safe-bottom));
  }

  /* Création publication/story/réel : le titre ne doit pas élargir la grille. */
  #publicationComposerContent{
    min-width:0;
    grid-template-columns:minmax(0, 1fr);
  }

  #publicationComposerContent > .publication-composer-head{
    grid-template-columns:34px minmax(0, 1fr) 34px;
  }

  #publicationComposerContent > .publication-composer-head > .profile-lifevision-title{
    min-width:0;
    white-space:normal;
  }

  /* Profil mobile : identité centrée sous les photos, sans minimums desktop. */
  #profilePanel .profile-identity-row{
    column-gap:8px;
  }

  #profilePanel .profile-user-name{
    white-space:normal;
    overflow-wrap:anywhere;
  }

  body .section-modal .pill-overlay{
    top:0;
    bottom:0;
    width:100%;
    max-width:none;
    margin:0;
    padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    border:0;
    border-radius:0;
  }

  body #photoViewerPanel > .photo-viewer-shell .photo-viewer-top,
  body .album-slideshow-frame .album-slideshow-header{
    top:var(--safe-top);
    left:var(--safe-left);
    right:var(--safe-right);
    width:auto;
  }

  body #photoViewerPanel > .photo-viewer-shell .photo-viewer-bottom,
  body .album-slideshow-frame .album-slideshow-controls{
    bottom:var(--safe-bottom);
    left:var(--safe-left);
    right:var(--safe-right);
    width:auto;
  }
}

/* ===========================================================
BLOC CSS 12.65 - LECTEUR : ÉTAT DU CHARGEMENT DE L’ORIGINAL
=========================================================== */
.photo-viewer-load-status { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; max-width:90%; margin:0; padding:10px 16px; border:1px solid rgba(255,255,255,.25); border-radius:12px; background:rgba(20,24,30,.88); color:#fff; font:inherit; text-align:center; }
button.photo-viewer-load-status { cursor:pointer; }

.user-location-globe-marker.is-cluster{pointer-events:auto;width:auto;min-width:36px;padding:0 8px;font-size:14px;cursor:pointer;white-space:nowrap;}

.social-sync-conflict-notice{position:fixed;right:16px;bottom:105px;z-index:9000;max-width:min(520px,calc(100vw - 32px));display:flex;flex-wrap:wrap;gap:10px;padding:16px;border:1px solid #777;border-radius:16px;background:#181a20;color:#fff;box-shadow:0 8px 30px #0008}.social-sync-conflict-notice>span{flex-basis:100%}.social-sync-conflict-notice button{white-space:normal}

/* Livre d'or du profil : priorité sur les styles généraux du compositeur. */
#profilePanel .profile-guestbook-composer{
  width:100%;
  padding:0;
  background:transparent;
}

#profilePanel .profile-guestbook-input-shell{
  width:100%;
  min-height:38px;
  grid-template-columns:minmax(0,1fr) 30px;
  padding:4px 5px 4px 12px;
  border:0;
  border-radius:0;
  background:rgba(255,255,255,.035);
  box-sizing:border-box;
}

#profilePanel .profile-guestbook-send{
  width:30px;
  height:30px;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  box-shadow:none;
}

#profilePanel .profile-guestbook-send > span{
  left:-1px;
}

#profilePanel .profile-guestbook-send.is-ready{
  color:#fff !important;
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.78) !important;
  box-shadow:0 0 16px rgba(255,255,255,.22) !important;
}

#profilePanel .profile-guestbook-toggle{
  top:auto;
  transform:none;
}

/* ===========================================================
   BLOC CSS 12.04 - CODE DE CONFIRMATION E-MAIL
   =========================================================== */
.email-code-panel{
  z-index:20020;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(9px);
}

.email-code-panel-box{
  width:min(430px, calc(100vw - 28px));
  min-height:0;
  height:auto;
  max-height:calc(100dvh - 28px);
}

.email-code-body{
  display:grid;
  gap:14px;
  align-content:start;
  text-align:center;
}

.email-code-message{
  margin:0;
  color:rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.45;
}

.email-code-address{
  overflow:hidden;
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.email-code-inputs{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:8px;
  width:100%;
  margin:8px auto 2px;
}

.email-code-input{
  width:100%;
  min-width:0;
  height:58px;
  padding:0;
  border:1px solid rgba(255,255,255,.3);
  border-radius:11px;
  outline:none;
  background:rgba(255,255,255,.07);
  color:#fff;
  caret-color:#fff;
  font:900 25px/1 Arial,sans-serif;
  text-align:center;
  box-sizing:border-box;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.email-code-input:focus{
  border-color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}

.email-code-input.is-invalid{
  border-color:#ff4a4a;
  box-shadow:0 0 0 2px rgba(255,74,74,.14);
}

.email-code-resend{
  justify-self:center;
  margin:0;
}

.email-code-footer .panel-footer-slot-fill{
  min-width:0;
}

/* Compteurs de groupes non lus et lecteur média commun groupes/discussions. */
#contactsPanel .contacts-search-results .contacts-directory-card.has-message-shortcut{
  min-height:0;
  padding-right:10px;
}

#contactsPanel .directory-card-inline-actions{
  width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px; margin-top:10px;
}

#contactsPanel .directory-card-inline-action{
  width:100%; min-width:0; min-height:34px; padding:0 8px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11px; line-height:1.1; white-space:nowrap;
}

#discussionsPanel .discussion-filter-row,
#groupDiscussionsPanel .discussion-filter-row,
#groupPrivateDiscussionsPanel .discussion-filter-row{
  margin:0 0 2px;
}

#discussionsPanel .discussion-filter-row{
  --content-feed-accent:#ff1744;
}

#groupDiscussionsPanel .discussion-filter-row{
  --content-feed-accent:#ffd84d;
}

#groupPrivateDiscussionsPanel .discussion-filter-row{
  --content-feed-accent:#ffd84d;
}

#groupPrivateDiscussionsPanel .discussion-filter-row .content-feed-filter-chip.is-active{
  border-color:#ffd84d;
  background:rgba(255,216,77,.18);
  box-shadow:0 0 14px rgba(255,216,77,.25), inset 0 0 8px rgba(255,216,77,.05);
}

#groupPrivateDiscussionsPanel .discussion-filter-row .content-feed-filter-chip:not(.is-active):hover,
#groupPrivateDiscussionsPanel .discussion-filter-row .content-feed-filter-chip:not(.is-active):focus-visible{
  border-color:#ffd84d;
  box-shadow:0 0 13px rgba(255,216,77,.22);
  outline:none;
}

#discussionsPanel .discussion-card-inline-actions,
#groupDiscussionsPanel .discussion-card-inline-actions,
#groupPrivateDiscussionsPanel .discussion-card-inline-actions{
  width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px; margin-top:10px;
}

#discussionsPanel .discussion-card-inline-action,
#groupDiscussionsPanel .discussion-card-inline-action,
#groupPrivateDiscussionsPanel .discussion-card-inline-action{
  width:100%; min-width:0; min-height:34px; padding:0 8px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11px; line-height:1.1; white-space:nowrap;
}

#discussionsPanel .discussion-card.has-inline-actions.has-unread .discussion-unread-badge,
#groupDiscussionsPanel .discussion-card.has-inline-actions.has-unread .discussion-unread-badge,
#groupPrivateDiscussionsPanel .discussion-card.has-inline-actions.has-unread .discussion-unread-badge{
  top:44px; right:10px; bottom:auto;
}

#discussionsPanel .discussion-card-inline-action:not(.is-danger),
#groupDiscussionsPanel .discussion-card-inline-action:not(.is-danger),
#groupPrivateDiscussionsPanel .discussion-card-inline-action:not(.is-danger){
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,255,255,.18) !important;
}

#discussionsPanel .discussion-card-inline-action:not(.is-danger):hover,
#discussionsPanel .discussion-card-inline-action:not(.is-danger):focus-visible,
#groupDiscussionsPanel .discussion-card-inline-action:not(.is-danger):hover,
#groupDiscussionsPanel .discussion-card-inline-action:not(.is-danger):focus-visible,
#groupPrivateDiscussionsPanel .discussion-card-inline-action:not(.is-danger):hover,
#groupPrivateDiscussionsPanel .discussion-card-inline-action:not(.is-danger):focus-visible{
  border-color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 16px rgba(255,255,255,.24) !important;
  outline:none;
}

#discussionsPanel .discussion-card-inline-action.is-danger,
#groupDiscussionsPanel .discussion-card-inline-action.is-danger,
#groupPrivateDiscussionsPanel .discussion-card-inline-action.is-danger{
  border-color:rgba(255,70,70,.90) !important;
  background:rgba(255,70,70,.10) !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,70,70,.18) !important;
}

#discussionsPanel .discussion-card-inline-action.is-danger:hover,
#discussionsPanel .discussion-card-inline-action.is-danger:focus-visible,
#groupDiscussionsPanel .discussion-card-inline-action.is-danger:hover,
#groupDiscussionsPanel .discussion-card-inline-action.is-danger:focus-visible,
#groupPrivateDiscussionsPanel .discussion-card-inline-action.is-danger:hover,
#groupPrivateDiscussionsPanel .discussion-card-inline-action.is-danger:focus-visible{
  border-color:rgba(255,90,90,1) !important;
  background:rgba(255,70,70,.16) !important;
  box-shadow:0 0 16px rgba(255,70,70,.24) !important;
  outline:none;
}

.discussion-unread-badge.is-group-unread{
  border-width:1px;
  border-color:rgba(255,216,77,.92);
  background:rgba(24,20,0,.96);
  color:#fff;
  box-shadow:0 0 10px rgba(255,214,0,.42), inset 0 0 5px rgba(255,236,120,.12);
}

.network-section-unread-badge{
  position:absolute; z-index:2; top:50%; right:-25px; transform:translateY(-50%);
  min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  margin-left:0; padding:0 5px; border:1px solid rgba(255,216,77,.92); border-radius:999px;
  background:rgba(24,20,0,.96); color:#fff; font-size:10px; font-weight:900; line-height:1;
  box-shadow:0 0 10px rgba(255,214,0,.42), inset 0 0 5px rgba(255,236,120,.12);
}

.network-section-btn[data-contact-page="discussions"] .network-section-unread-badge{
  border-color:rgba(255,23,68,.92);
  background:rgba(38,0,9,.96);
  color:#fff;
  box-shadow:0 0 10px rgba(255,23,68,.48), inset 0 0 5px rgba(255,255,255,.10);
}

#conversationMediaViewerPanel .conversation-media-viewer-body{
  padding-left:0;
  padding-right:0;
}

#conversationMediaViewerPanel .conversation-media-viewer-progress{
  bottom:72px;
}

@media (max-width:430px){
  .email-code-inputs{ gap:6px; }
  .email-code-input{ height:52px; border-radius:9px; font-size:22px; }
}