/* ============================================================
   Feuille CSS globale ADN (Autour De Nous)
   Dossier  : Utiles/CSS/Perso.css
   Rôle     : Styles généraux (navbar, icônes, sous-menu, footer,
              thèmes clair/sombre, polices locales, etc.)
   ============================================================ */

/* ============================
   Navbar "verre dépoli" moderne
   ============================ */
.navbar-flottante {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: color-mix(in oklab, var(--bs-body-bg) 80%, transparent);
  transition: background-color .25s ease, padding .2s ease, box-shadow .25s ease;
  padding-top: .65rem;
  padding-bottom: .65rem;
}

/* Logo un poil resserré */
.navbar-flottante .navbar-brand { letter-spacing: .5px; }

/* Etat compact au scroll (appliqué par JS) */
.navbar-flottante.nav-compacte {
  background-color: color-mix(in oklab, var(--bs-body-bg) 92%, transparent);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  padding-top: .35rem;
  padding-bottom: .35rem;
}

/* Lien actif : soulignement discret sous le texte */
.navbar .nav-link.active {
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: .2rem;
  height: 2px;
  background: currentColor;
  opacity: .5;
  border-radius: 2px;
}

/* === Anti-décalage items / caret dans la navbar === */
.navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: .25rem;
  vertical-align: middle;
  transform: translateY(-1px);
}
.navbar .nav-link,
.navbar .dropdown-toggle {
  display: inline-flex !important;
  line-height: 1.25;
}
.navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

/* Supprime la bordure Bootstrap par défaut */
.navbar { border-bottom: none !important; }


/* ============================================================
   Icônes du menu (tailles PC et mobile)
   ============================================================ */

/* Variables globales */
:root{
  --taille-icone-pc:     36px; /* 18 taille image bureau */
  --boite-icone-pc:      44px; /* 22 boîte carrée bureau */
  --taille-icone-mobile: 40px; /* 20 taille image mobile */
  --boite-icone-mobile:  48px; /* 24 boîte carrée mobile */
}

/* Bureau (≥992px) */
@media (min-width: 992px){
  .navbar .menu-icone-box{
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--boite-icone-pc); height:var(--boite-icone-pc);
    margin-right:.5rem; flex:0 0 var(--boite-icone-pc);
  }
  .navbar .menu-icone{
    width:var(--taille-icone-pc); height:var(--taille-icone-pc);
    object-fit:contain; display:block;
  }
  .dropdown-menu .menu-icone-box{
    width:var(--boite-icone-pc); height:var(--boite-icone-pc);
    flex:0 0 var(--boite-icone-pc);
  }
  .dropdown-item .menu-icone{
    width:var(--taille-icone-pc); height:var(--taille-icone-pc);
  }
}

/* Mobile (<992px) */
@media (max-width: 991.98px){
  .offcanvas, .offcanvas-body{ overflow-x:hidden; max-width:100vw; }

  .offcanvas .menu-icone-box,
  .navbar .menu-icone-box{
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--boite-icone-mobile); height:var(--boite-icone-mobile);
    margin-right:.5rem; flex:0 0 var(--boite-icone-mobile);
  }
  .offcanvas .menu-icone,
  .navbar .menu-icone{
    width:var(--taille-icone-mobile); height:var(--taille-icone-mobile);
    object-fit:contain; display:block; max-width:100%; max-height:100%;
  }

  .offcanvas .nav-link{ white-space:normal; }
}


/* ============================================================
   Barre fine sous la navbar
   ============================================================ */
.separateur-sous-navbar{
  width: min(960px, 92vw);
  height: 1px;
  background: var(--adn-hr-couleur);
  margin: 0;
  position: relative;
}
.capot-sous-nav{
  position: fixed;
  left: 0; right: 0;
  top: var(--nav-bottom, 0px);
  height: var(--sousnav-gap, 8px);
  z-index: 1029;
  background: var(--bs-body-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
.capot-sous-nav .separateur-sous-navbar{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.separateur-sous-navbar::before,
.separateur-sous-navbar::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 1px;
  pointer-events: none;
}
.separateur-sous-navbar::before { left: -12px; }
.separateur-sous-navbar::after  { right: -12px; }


/* ============================================================
   Offcanvas : fond adapté aux thèmes
   ============================================================ */
.offcanvas {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}


/* ============================================================
   Footer ADN
   ============================================================ */
.footer-adn {
  background: transparent;
  border: none;
  color: var(--bs-body-color);
  text-align: center;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.footer-adn .lien-footer {
  color: inherit;
  opacity: .85;
  text-decoration: none;
  transition: opacity .2s ease;
}
.footer-adn .lien-footer:hover {
  opacity: 1;
  text-decoration: underline;
}


/* ============================================================
   Thèmes clair / sombre
   ============================================================ */
[data-theme="sombre"] .card,
[data-theme="clair"]  .card {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}


/* ============================================================
   Polices Lato (local)
   ============================================================ */
@font-face {
  font-family: 'Lato';
  src: url('../Polices/Lato/Lato-Regular.woff2') format('woff2'),
       url('../Polices/Lato/Lato-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../Polices/Lato/Lato-RegularItalic.woff2') format('woff2'),
       url('../Polices/Lato/Lato-RegularItalic.woff')  format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../Polices/Lato/Lato-Bold.woff2') format('woff2'),
       url('../Polices/Lato/Lato-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../Polices/Lato/Lato-BoldItalic.woff2') format('woff2'),
       url('../Polices/Lato/Lato-BoldItalic.woff')  format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../Polices/Lato/Lato-Light.woff2') format('woff2'),
       url('../Polices/Lato/Lato-Light.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html, body { font-family: 'Lato', sans-serif; }
h1 { font-weight: 700; }
p  { font-weight: 400; }


/* ============================================================
   Séparateur haut footer
   ============================================================ */
.separateur-haut-footer {
  width: min(960px, 92vw);
  height: 1px;
  margin: 16px auto 0;
  background: var(--adn-hr-couleur);
  position: relative;
}
.separateur-haut-footer::before,
.separateur-haut-footer::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 1px;
  pointer-events: none;
}
.separateur-haut-footer::before { left: -12px; }
.separateur-haut-footer::after  { right: -12px; }
:root, [data-bs-theme="light"] {
  --adn-hr-couleur: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.10) 20%,
    rgba(0,0,0,.18) 50%,
    rgba(0,0,0,.10) 80%,
    transparent 100%
  );
}
[data-bs-theme="dark"] {
  --adn-hr-couleur: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,.12) 20%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.12) 80%,
    transparent 100%
  );
}


/* ============================================================
   Bouton "Compris"
   ============================================================ */
.btn-compris {
  background: linear-gradient(135deg, #0d6efd, #66b2ff);
  color: #fff;
  border: none;
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-weight: 500;
  transition: opacity .2s ease-in-out;
}
.btn-compris:hover { opacity: .9; color: #fff; }
[data-theme="sombre"] .btn-compris {
  background: linear-gradient(135deg, #0d6efd, #3399ff);
}


/* ============================================================
   Formulaires : fusion input + bouton
   ============================================================ */
.input-group > .form-floating > .form-control { border-right: 0; }
.input-group > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/* ============================================================
   Toasts
   ============================================================ */
.toast { --bs-toast-max-width: 420px; }
.toast-container { overflow: visible; pointer-events: none; }
.toast { pointer-events: auto; }


/* ============================================================
   ALIGNEMENT ICONES + TEXTE DANS LES SOUS-MENUS
   ============================================================ */
.dropdown-menu .dropdown-item,
.offcanvas .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.25;
}
.dropdown-item .menu-icone-box,
.offcanvas .dropdown-item .menu-icone-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dropdown-item .menu-icone,
.offcanvas .dropdown-item .menu-icone {
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

/* ============================================================
   Lightbox ICONES + Vue dossiers
   ============================================================ */
/* Lightbox nav – boutons au-dessus, sans fond */
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:1060;                 /* au-dessus du contenu */
  background:transparent !important;
  border:0 !important;
  padding:0;
  width:56px; height:56px;      /* large zone de clic */
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* au cas où une ancienne classe serait restée */
.lightbox-nav.icon-btn{
  background:transparent !important;
  border-color:transparent !important;
}

.lightbox-prev{ left:.75rem; }
.lightbox-next{ right:.75rem; }

.lightbox-nav .nav-icon{
  width:40px; height:40px;      /* ajuste si tu veux */
  object-fit:contain;
  opacity:.95;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
  pointer-events:none;          /* l'image ne capte pas le clic, le bouton oui */
}
.lightbox-nav:hover .nav-icon{ opacity:1; }

/* ============================
   Carte profil : chic & moderne
   ============================ */
.carte-profil {
  border-radius: 1.25rem;
  border: 1px solid color-mix(in oklab, var(--bs-border-color) 70%, transparent);
  background:
    radial-gradient(1200px 500px at 120% 120%, color-mix(in oklab, var(--bs-primary) 8%, transparent), transparent 50%),
    color-mix(in oklab, var(--bs-body-bg) 96%, transparent);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.carte-profil:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  border-color: color-mix(in oklab, var(--bs-border-color) 40%, var(--bs-primary) 30%);
}

.titre-profil { letter-spacing: .2px; }
.texte-profil { max-width: 34ch; }

/* Libellés alignés proprement */
.infos-profil .libelle {
  display: inline-block;
  min-width: 5.5rem; /* aligne Pseudo / E-mail / Rôle */
  color: var(--bs-secondary-color);
}

/* Badge rôle un poil plus premium */
.badge-role {
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  letter-spacing: .3px;
}

/* Bouton profil : angle doux */
.bouton-profil {
  border-radius: .8rem;
}

/* Avatar en bas-droite avec anneau subtil */
.avatar-profil {
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  outline: 3px solid color-mix(in oklab, var(--bs-body-bg) 80%, transparent);
  outline-offset: 0;
}

/* Petit ornement dégradé en arrière-plan (sous l'avatar) */
.ornement-bulle {
  width: 120px; height: 120px;
  border-radius: 50%;
  filter: blur(18px);
  pointer-events: none;
  transform: translate(20px, 24px);
  background: radial-gradient(closest-side,
              color-mix(in oklab, var(--bs-primary) 18%, transparent),
              transparent 70%);
}

/* Mode sombre : renforce légèrement les contrastes */
@media (prefers-color-scheme: dark) {
  .carte-profil {
    background:
      radial-gradient(1200px 500px at 120% 120%, color-mix(in oklab, var(--bs-primary) 10%, transparent), transparent 50%),
      color-mix(in oklab, var(--bs-body-bg) 92%, transparent);
  }
  .avatar-profil {
    outline: 3px solid color-mix(in oklab, var(--bs-body-bg) 65%, transparent);
  }
}

/* ============================
   Evenement dans connecter
   ============================ */
/* ======= Liste des événements (5 visibles, pas de scroll) ======= */
.liste-evenements {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem; /* espace entre les items */
}

/* Ligne événement : carte compacte, clic entier avec .stretched-link */
.evt-ligne {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr; /* pastille date + contenu */
  gap: .75rem;
  padding: .75rem .85rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.evt-ligne:hover {
  background: rgba(13,110,253,.04);
  border-color: rgba(13,110,253,.35);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* Pastille date (jour + mois compact) */
.evt-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  width: 56px; min-width: 56px; height: 56px;
  line-height: 1;
  background: var(--bs-tertiary-bg);
}
.evt-date-jour { font-weight: 700; font-size: 1.05rem; }
.evt-date-mois { font-size: .70rem; letter-spacing: .06em; opacity: .8; }

/* Contenu */
.evt-contenu { min-width: 0; } /* pour text-overflow */
.evt-titre { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.evt-meta, .evt-desc { font-size: .9rem; }
.evt-meta .sep { margin: 0 .35rem; opacity: .65; }

/* Mobile first : tout passe sur une colonne ; sur md+, on densifie légèrement */
@media (min-width: 768px) {
  .liste-evenements { gap: .85rem; }
  .evt-ligne { padding: .9rem 1rem; }
  .evt-titre { font-size: 1rem; }
}

/* Supprime les anciens styles de scroll si présents */
#apercu_evenements_conteneur .apercu-evenements-scroll { max-height: none; overflow: visible; }




/* ================================================
 * Ruban Sections — ronds pleins + halo interne
 * ================================================ */
.sections-rail{
  --diametre: 92px;
  --ecart: 16px;
}

.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.sections-rail__wrap{
  display:flex; align-items:center; justify-content:center;
  gap:var(--ecart); flex-wrap:nowrap;
  overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding-inline:max(24px, calc(50vw - (var(--diametre)/2)));
  scroll-padding-inline:calc(50vw - (var(--diametre)/2));
  padding-block:14px;
  scrollbar-width:thin;
}
.sections-rail__wrap::-webkit-scrollbar{ height:8px; }
.sections-rail__wrap::-webkit-scrollbar-track{ background:transparent; }
.sections-rail__wrap::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:999px; }
.sections-rail__wrap:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); }

/* Item cliquable */
.section-rond{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  line-height:0; scroll-snap-align:center;
  width:var(--diametre); height:var(--diametre); aspect-ratio:1/1;
  position:relative;
}

/* Conteneur circulaire (iOS-proof) */
.section-rond__inner{
  position:relative; width:100%; height:100%;
  border-radius:50%; overflow:hidden;
  /* masque robuste pour iOS */
  -webkit-mask-image: radial-gradient(circle, #fff 99%, transparent 100%);
  mask-image: radial-gradient(circle, #fff 99%, transparent 100%);
  clip-path:circle(50% at 50% 50%);

  /* fin liseré discret */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 0 0 1px rgba(0,0,0,.25);
  transition: transform .22s ease, box-shadow .22s ease;
  isolation:isolate;
}

/* Image : REMPLIT le rond (pas de padding), bien centrée */
.section-rond img{
  display:block; width:100%; height:100%;
  object-fit:cover;         /* << remplit vraiment le cercle */
  object-position:center;   /* centre le visuel */
  padding:0;                /* pas d’espace autour */
  border-radius:0;
  box-sizing:border-box;
}

/* Halo lumineux — *à l’intérieur* du cercle */
.section-rond__inner::after{
  content:""; position:absolute; inset:0;   /* << reste dans le cercle */
  border-radius:50%;
  -webkit-mask-image: radial-gradient(circle, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle, #000 99%, transparent 100%);
  pointer-events:none;
  background:
    linear-gradient(135deg,
      rgba(0,255,170,.40) 0%,
      rgba(0,255,120,.28) 35%,
      rgba(0,190,90,.18) 65%,
      rgba(0,150,70,.10) 85%,
      transparent 100%);
  filter:blur(10px);
  opacity:.0;
  transform:scale(.98);
  transition:opacity .22s ease, transform .22s ease;
  mix-blend-mode:screen;
  z-index:0;
}

/* Hover / focus */
.section-rond:hover .section-rond__inner,
.section-rond:focus-visible .section-rond__inner{
  transform:scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    0 0 0 1px rgba(0,0,0,.28);
}
.section-rond:hover .section-rond__inner::after,
.section-rond:focus-visible .section-rond__inner::after{
  opacity:1;
  transform:scale(1);
}

/* Pas de bandes sombres sur les côtés */
.sections-rail::before,
.sections-rail::after{ content:none; }

/* Responsive */
@media (max-width:576px){
  .sections-rail{ --diametre:72px; --ecart:14px; }
  .sections-rail__wrap{ padding-block:18px; }
}
@media (max-width:380px){
  .sections-rail{ --diametre:68px; --ecart:12px; }
}