/* =============================================================================
   ELMOUCHIR — entreprise-detail.css
   Couche de modernisation de la fiche entreprise (detailsentreprise.blade.php).
   Aucun balisage n'est modifie : tout s'appuie sur les classes deja presentes.
   A charger APRES all2.css, modern-ui.css et ui-fix.css.
   ============================================================================= */

:root{
  --ent-green:    #0a9c53;
  --ent-green-lt: #23c274;
  --ent-ink:      #0d211a;
  --ent-text:     #20312a;
  --ent-muted:    #6c8578;
  --ent-line:     #e1efe7;
  --ent-surface:  #ffffff;
  --ent-r:        18px;
  --ent-ease:     cubic-bezier(.22,.61,.21,1);
  --ent-spring:   cubic-bezier(.34,1.4,.44,1);
}

/* -----------------------------------------------------------------------------
   0. RYTHME GENERAL
   La page alternait des blocs colles et des vides de 300 px. Un seul rythme.
-------------------------------------------------------------------------------*/
#agency-info{ padding-top: 1.5rem !important; }
#content > .container > .row > [class*="col-"] > section,
#content section.contact-the-agent,
#content section#quick-info,
#content section#amenities{ margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

#content h3,
#content #description h2,
#content .ts-title h2{
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: .85rem;
}

/* -----------------------------------------------------------------------------
   1. CARTE D'EN-TETE
   Le logo flottait dans un carre blanc plus grand que lui, le nom et l'adresse
   avaient le meme poids visuel, et la liste des secteurs affichait une barre de
   defilement de navigateur en plein milieu de la carte.
-------------------------------------------------------------------------------*/
#agency-info > .col-lg-10 > .ts-box{
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-r);
  box-shadow: 0 12px 34px -22px rgba(7,48,30,.45);
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* le logo : cadre carre, image contenue, jamais deformee */
#agency-info .ts-circle__xxl{
  width: min(190px, 100%);
  height: min(190px, 46vw);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #f3faf6, #e6f5ec);
  border: 1px solid var(--ent-line);
  box-shadow: 0 14px 30px -18px rgba(7,48,30,.5);
  display: grid;
  place-items: center;
  animation: ent-pop .6s var(--ent-spring) both;
}
#agency-info .ts-circle__xxl img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

#agency-info h1{
  font-size: clamp(1.5rem, 4vw, 2.1rem) !important;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}
/* l'adresse redescend d'un cran dans la hierarchie */
#agency-info .ts-title + p,
#agency-info h1 + p,
#agency-info .ts-title p{
  color: var(--ent-muted);
  font-size: .95rem;
}

/* etiquette « Secteurs et activites » */
#agency-info .badge,
#agency-info .ts-tag,
#agency-info [class*="badge"]{
  border-radius: 99px;
  padding: .38rem .85rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* la zone des activites : hauteur reguliere, barre fine, fondu de fin de liste */
#agency-info .scrollbar,
#agency-info .scrollbar2,
#agency-info .scrollbar3,
#agency-info [style*="overflow"]{
  scrollbar-width: thin;
}
#agency-info .scrollbar::-webkit-scrollbar,
#agency-info .scrollbar2::-webkit-scrollbar,
#agency-info .scrollbar3::-webkit-scrollbar{ width: 6px !important; }
#agency-info .scrollbar::-webkit-scrollbar-thumb,
#agency-info .scrollbar2::-webkit-scrollbar-thumb,
#agency-info .scrollbar3::-webkit-scrollbar-thumb{
  background: #cfe3d8; border-radius: 99px; border: 0 !important;
}
/* les liens d'activite etaient bleu navigateur sur fond blanc */
#agency-info a[href*="activite"],
#agency-info a[href*="secteur"]{
  color: var(--ent-green) !important;
  font-weight: 600;
}
#agency-info a[href*="activite"]:hover,
#agency-info a[href*="secteur"]:hover{ color: var(--ent-ink) !important; }

/* la barre du bas : wilaya + anciennete */
#agency-info .ts-box .bg-light,
#agency-info .ts-box [class*="bg-light"]{
  background: #f4faf7 !important;
  border-radius: 12px;
  border: 1px solid var(--ent-line);
}

/* bouton « Gerer votre entreprise » : il flottait seul, aligne sur rien */
a[href*="entreprise/edit"], .btn-gerer{
  border-radius: 99px !important;
  font-weight: 700;
  box-shadow: 0 12px 26px -14px rgba(10,156,83,.9);
}

/* -----------------------------------------------------------------------------
   2. BLOC CONTACT
-------------------------------------------------------------------------------*/
.contact-the-agent .ts-box,
#location .ts-box{
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-r);
  box-shadow: 0 2px 10px rgba(7,48,30,.05);
  padding: .35rem 1.1rem;
}
.ts-description-list__line dt{
  color: var(--ent-text);
  font-weight: 700;
  font-size: .88rem;
  padding-top: .7rem;
}
.ts-description-list__line dd{
  color: var(--ent-text);
  font-size: .9rem;
  padding-bottom: .7rem !important;
  border-color: var(--ent-line) !important;
}
.ts-description-list__line dt i{ color: var(--ent-green); opacity: 1 !important; }

/* Champs non renseignes : ils occupaient autant de place qu'une vraie donnee.
   La classe est posee par entreprise-detail.js a partir de window.ENT_EMPTY. */
.entx-empty{ display: none !important; }
.entx-empty-toggle{
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  margin: .25rem 0 .75rem;
  padding: .5rem .25rem;
  background: none; border: 0; border-top: 1px dashed var(--ent-line);
  color: var(--ent-muted);
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: color .2s ease;
}
.entx-empty-toggle:hover{ color: var(--ent-green); }
.entx-empty-toggle svg{ transition: transform .25s var(--ent-ease); }
.entx-empty-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
.entx-open .entx-empty{ display: revert !important; opacity: .55; }

/* Retour visuel du bouton copier (le partial layouts.contact-copy gere le clic) */
.contact-item-wrapper{ display: inline-flex; align-items: center; }
.btn-copy-slide{ transition: transform .18s var(--ent-spring), background-color .2s ease; }
.btn-copy-slide:active{ transform: scale(.9); }

/* -----------------------------------------------------------------------------
   3. CHIFFRES CLES (Effectif / Annee / Capital)
   Trois cartes identiques repetaient « Vous n'avez pas ces informations ».
   La structure du gabarit distingue deja les deux cas : <figure> = valeur,
   <dd> = champ vide. On peut donc traiter sans toucher au balisage.
-------------------------------------------------------------------------------*/
.ts-quick-info.ts-box{
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-r);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(7,48,30,.05);
}
.ts-quick-info__item{
  padding: 1.15rem .75rem;
  text-align: center;
  border-inline-end: 1px solid var(--ent-line);
  transition: background-color .25s ease;
}
.row.no-gutters > [class*="col-"]:last-child .ts-quick-info__item{ border-inline-end: 0; }
.ts-quick-info__item h6{
  margin: 0 0 .35rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ent-muted);
}
.ts-quick-info__item figure{
  margin: 0;
  font-size: 1.45rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ent-ink);
}
/* champ vide : un tiret discret au lieu d'une phrase qui prend deux lignes */
.ts-quick-info__item dd{
  margin: 0;
  font-size: 0;                       /* masque la phrase, garde le flux */
  color: transparent;
}
.ts-quick-info__item dd::after{
  content: "—";
  font-size: 1.45rem; font-weight: 700;
  color: #c3d6cb;
}
.ts-quick-info__item:has(dd){ background: #fbfdfc; }

/* -----------------------------------------------------------------------------
   4. SECTIONS « Nature / Forme juridique / Regime / Certificats »
   Un H2 pleine largeur suivi d'une phrase d'absence : beaucoup de bruit pour
   dire qu'il n'y a rien.
-------------------------------------------------------------------------------*/
#amenities h3, #amenities h2{ margin-bottom: .5rem; }
#amenities .badge,
#amenities .ts-tag,
#amenities span[class*="badge"]{
  display: inline-block;
  border-radius: 8px;
  padding: .3rem .7rem;
  background: #eaf7f0 !important;
  color: #0b6b3c !important;
  font-weight: 700; font-size: .8rem;
  border: 1px solid #cfeadd;
}
/* une pastille vide subsistait pour « Regime » */
#amenities .badge:empty,
#amenities span[class*="badge"]:empty{ display: none; }

/* « Vous n'avez pas ces informations » avait le meme poids qu'une vraie valeur :
   meme taille, meme couleur, juste sous un titre en gras. */
#amenities p, #amenities dd{
  margin: 0 0 .35rem;
  font-size: .82rem;
  color: #9db3a8;
  font-style: italic;
}
#amenities h3, #amenities h2{
  font-size: 1rem !important;
  margin-top: 1.1rem;
}

/* -----------------------------------------------------------------------------
   5. EMPLOYES — le bloc le plus casse de la page
   .disabledbutton posait un voile noir a 30 % PLUS un ::after contenant le texte
   « Pour consulter les contacts... » en 1.9em blanc, clignotant en boucle
   (opacity 0 -> 1, 7 s, infini). Resultat : un texte fantome illisible par-dessus
   les noms, et un clignotement permanent — WCAG 2.2.2.
   On neutralise les deux pseudo-elements ; entreprise-detail.js reconstruit un
   vrai calque, avec le texte traduit et les boutons repris de la modale.
-------------------------------------------------------------------------------*/
.disabledbutton::before,
.disabledbutton::after{ content: none !important; animation: none !important; }

.entx-lock{
  position: relative;
  min-height: 210px;            /* le calque etait rogne quand la liste etait courte */
  border-radius: var(--ent-r);
  overflow: hidden;
  border: 1px solid var(--ent-line);
}
.entx-lock__content{
  filter: blur(4px) saturate(.7);
  opacity: .5;
  pointer-events: none;
  user-select: none;
  transition: filter .5s var(--ent-ease), opacity .5s var(--ent-ease);
}
.entx-lock__veil{
  position: absolute; inset: 0;
  display: grid;
  place-content: center;
  overflow: auto;
  justify-items: center;
  gap: .55rem;
  padding: 1.25rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(244,250,247,.55), rgba(13,33,26,.86));
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.entx-lock__badge{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem .3rem .55rem;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #d7f3e4;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.entx-lock__badge svg{ overflow: visible; }
.entx-lock__badge .entx-shackle{
  transform-origin: 12px 11px;
  transition: transform .35s var(--ent-spring);
}
.entx-lock:hover .entx-shackle{ transform: translateY(-3px) rotate(-14deg); }
.entx-lock__text{
  margin: 0;
  max-width: 30ch;
  color: #fff;
  font-size: .92rem; font-weight: 600; line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.entx-lock__actions{ display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.entx-lock__actions .btn{
  border-radius: 99px;
  padding: .45rem 1.1rem;
  font-weight: 700; font-size: .84rem;
  transition: transform .18s var(--ent-spring), box-shadow .2s ease;
}
.entx-lock__actions .btn:hover{ transform: translateY(-2px); }
/* survoler le bloc entrouvre le flou : on devine, on ne lit pas */
.entx-lock:hover .entx-lock__content{ filter: blur(2.5px) saturate(.85); opacity: .68; }

/* -----------------------------------------------------------------------------
   6. ENTREPRISES SIMILAIRES
   Le logo etait etire en `cover` sur une boite sans hauteur fixe : logos
   deformes, deborde de la carte, et le titre pose dessus sans voile.
-------------------------------------------------------------------------------*/
.ts-items-carousel .card.ts-item{
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-r);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(7,48,30,.05);
  transition: transform .25s var(--ent-ease), box-shadow .25s ease, border-color .25s ease;
}
.ts-items-carousel .card.ts-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(7,48,30,.35);
  border-color: rgba(10,156,83,.35);
}
/* Une vignette de carrousel contient soit un vrai logo, soit une lettre-avatar
   generee par ui-avatars. En `cover` les deux etaient etires ; en `contain` sans
   hauteur bornee, la lettre-avatar carree occupait 330 px de haut — d'ou les
   enormes « DL » et « SF » qui mangeaient la carte. On borne la hauteur ET la
   taille du dessin. */
.ts-items-carousel .card-img,
.ts-items-carousel .card-img.ts-item__image{
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 172px;
  background-color: #f4faf7;
  background-size: auto 62% !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
  border-radius: 0;
  overflow: hidden;
}
.ts-items-carousel .card-img img{
  position: absolute; inset: 0; margin: auto;
  max-height: 62%; width: auto; object-fit: contain;
}
/* Le voile est porte par le bloc de texte lui-meme : il reste lisible meme si
   le theme repositionne la vignette. Il ne couvre que le bas — sur la capture
   il mangeait la moitie de la vignette et le logo disparaissait dedans. */
.ts-items-carousel .ts-item__info{
  background: linear-gradient(to top, rgba(4,26,16,.90) 0%, rgba(4,26,16,.55) 55%, rgba(4,26,16,0) 100%);
  padding: 1.6rem 1rem .85rem !important;
  margin: 0 !important;
}

/* Une carte de produit sans description gardait une bande blanche vide sous la
   vignette. */
.ts-items-carousel .card-body:empty,
.ts-items-carousel .card-footer:empty{ display: none; }
.ts-items-carousel .card-body{ padding: .75rem 1rem; }
.ts-items-carousel .card-body p:empty,
.ts-items-carousel .card-body :is(p, div):-moz-only-whitespace{ display: none; }
.ts-items-carousel .ts-item__info{
  position: relative; z-index: 2;
  width: 100%;
  margin: 0;
  padding: .9rem 1rem;
}
.ts-items-carousel .ts-item__info h4{
  margin: 0 0 .15rem;
  color: #fff !important;
  font-size: 1rem !important; font-weight: 700; line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.ts-items-carousel .ts-item__info aside{
  color: rgba(255,255,255,.82) !important;
  font-size: .78rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.ts-items-carousel .ts-item__info-badge{ z-index: 3; }
.ts-items-carousel .card-body{ padding: .9rem 1rem; }
.ts-items-carousel .card-footer{
  background: transparent;
  border-top: 1px solid var(--ent-line);
  padding: .55rem 1rem;
}

/* -----------------------------------------------------------------------------
   7. BARRE D'ACTIONS FLOTTANTE
   Les deux boutons « signaler » et « partager » n'avaient que des icones, sans
   libelle ni largeur commune. On les rend lisibles et on les garde a portee.
-------------------------------------------------------------------------------*/
#actions .d-flex{ gap: .5rem; }
#actions .btn3d{
  border-radius: 12px !important;
  border: 1px solid var(--ent-line) !important;
  background: var(--ent-surface) !important;
  box-shadow: 0 2px 6px rgba(7,48,30,.06) !important;
  padding: .65rem .5rem !important;
  transition: transform .18s var(--ent-spring), border-color .2s ease, color .2s ease;
}
#actions .btn3d:hover{
  transform: translateY(-2px);
  border-color: rgba(10,156,83,.45) !important;
  color: var(--ent-green) !important;
}
#actions .btn3d i{ font-size: 1rem; }

/* barre collante : le nom et l'action principale restent accessibles */
.entx-sticky{
  position: fixed;
  inset-inline: 0;
  top: var(--hdr-h, 112px);
  z-index: 1029;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem clamp(1rem, 4vw, 3rem);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
          backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--ent-line);
  transform: translateY(-120%);
  transition: transform .35s var(--ent-ease);
}
.entx-sticky.is-on{ transform: none; }
.entx-sticky__name{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800; font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--ent-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entx-sticky__wilaya{
  flex: none;
  padding: .2rem .6rem;
  border-radius: 99px;
  background: #eaf7f0;
  color: #0b6b3c;
  font-size: .72rem; font-weight: 700;
}
@media (max-width: 767.98px){
  .entx-sticky{ display: none; }
}

/* -----------------------------------------------------------------------------
   8. ANIMATIONS D'ARRIVEE
   Les blocs montent une seule fois, quand ils entrent dans l'ecran.
-------------------------------------------------------------------------------*/
.entx-in{ animation: ent-rise .55s var(--ent-ease) both; animation-delay: var(--d, 0s); }

@keyframes ent-rise{
  from{ opacity: 0; transform: translateY(18px); }
  to  { opacity: 1; transform: none; }
}
@keyframes ent-pop{
  from{ opacity: 0; transform: scale(.86) rotate(-3deg); }
  to  { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .entx-in, #agency-info .ts-circle__xxl{ animation: none !important; opacity: 1; transform: none; }
  .entx-sticky{ transition: none; }
  .ts-items-carousel .card.ts-item:hover,
  #actions .btn3d:hover,
  .entx-lock__actions .btn:hover{ transform: none; }
}

/* -----------------------------------------------------------------------------
   9. MODE SOMBRE
-------------------------------------------------------------------------------*/
.navbar-dark #agency-info > .col-lg-10 > .ts-box,
.navbar-dark .contact-the-agent .ts-box,
.navbar-dark .ts-quick-info.ts-box,
.navbar-dark .ts-items-carousel .card.ts-item{
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}
.navbar-dark .ts-quick-info__item{ border-inline-end-color: rgba(255,255,255,.08); }
.navbar-dark .ts-quick-info__item:has(dd){ background: rgba(255,255,255,.02); }
.navbar-dark .entx-sticky{ background: rgba(13,33,26,.92); border-bottom-color: rgba(255,255,255,.10); }
.navbar-dark .entx-sticky__name{ color: #eaf6ef; }