/* =============================================================================
   ELMOUCHIR — gold.css
   Couche de mise en forme de l'espace GOLD (layouts_gold + detailsentreprise_gold).

   PARTI PRIS
   Cet espace est payant : il ne doit pas ressembler a une fiche d'annuaire avec
   moins d'options, il doit ressembler au site de l'entreprise. Deux decisions :

     1. Un filet d'or, jamais un aplat. L'or en aplat fait toc ; en trait de
        2 px sous l'en-tete, en bordure de badge et sur la coche de validation,
        il signale le rang sans crier.
     2. Le logo devient l'element dominant. Sur une page qui appartient a
        l'entreprise, c'est sa marque qui doit porter, pas la notre.

   A charger APRES les feuilles du gabarit gold.
   ============================================================================= */

:root{
  --gd-ink:      #0d211a;
  --gd-ink-2:    #132e23;
  --gd-green:    #0a9c53;
  --gd-green-lt: #23c274;
  --gd-gold:     #c9a227;
  --gd-gold-lt:  #e7c765;
  --gd-text:     #20312a;
  --gd-muted:    #6c8578;
  --gd-line:     #e4efe9;
  --gd-surface:  #ffffff;
  --gd-soft:     #f5faf7;
  --gd-ease:     cubic-bezier(.22,.61,.21,1);
  --gd-spring:   cubic-bezier(.34,1.4,.44,1);
}

/* -----------------------------------------------------------------------------
   1. BARRE DU HAUT ET NAVIGATION
   L'en-tete gold tenait sur un bouton « El mouchir », un selecteur de langue et
   deux liens. Rien n'indiquait qu'on etait sur l'espace d'une entreprise.
-------------------------------------------------------------------------------*/
#ts-secondary-navigation{
  background: var(--gd-ink) !important;
  border-bottom: 1px solid rgba(201,162,39,.25);
}
#ts-secondary-navigation a,
#ts-secondary-navigation .btn{
  color: #cfe6da !important;
  font-size: .82rem; font-weight: 600;
}
#ts-secondary-navigation .custom-select{
  color: #cfe6da !important;
  border-color: rgba(255,255,255,.14) !important;
}

#ts-primary-navigation{
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
          backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--gd-line);
  box-shadow: 0 1px 0 rgba(201,162,39,.35);   /* le filet d'or */
}
#ts-primary-navigation .navbar-toggler img{ border-radius: 8px; }
#ts-primary-navigation .nav-link{
  font-weight: 600;
  color: var(--gd-text) !important;
  position: relative;
  padding-inline: .9rem !important;
  transition: color .2s ease;
}
#ts-primary-navigation .nav-link::after{
  content: "";
  position: absolute;
  inset-inline: .9rem; bottom: .35rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gd-gold), var(--gd-gold-lt));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .25s var(--gd-ease);
}
#ts-primary-navigation .nav-link:hover::after,
#ts-primary-navigation .nav-link.active::after{ transform: scaleX(1); }

/* -----------------------------------------------------------------------------
   2. LE BANDEAU D'IDENTITE
   Une boite blanche avec un logo dans un rond et un h2 : c'est une ligne
   d'annuaire, pas la page d'une entreprise qui paie.
-------------------------------------------------------------------------------*/
#content > .container > .row > .offset-lg-1 > .ts-box,
.ts-box:has(> .row > .col-md-4 .ts-circle__xxl){
  position: relative;
  border: 1px solid var(--gd-line) !important;
  border-radius: 22px !important;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 12% -30%, rgba(35,194,116,.10), transparent 58%),
    var(--gd-surface) !important;
  box-shadow: 0 22px 55px -34px rgba(7,48,30,.55) !important;
  animation: gd-rise .6s var(--gd-ease) both;
}
/* le filet d'or : la seule marque du rang */
.ts-box:has(> .row > .col-md-4 .ts-circle__xxl)::before{
  content: "";
  position: absolute; inset-inline: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gd-gold), var(--gd-gold-lt) 45%, var(--gd-gold));
}
/* un trait de lumiere traverse une fois a l'arrivee */
.ts-box:has(> .row > .col-md-4 .ts-circle__xxl)::after{
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.16), transparent);
  transform: translateX(-120%);
  pointer-events: none;
  animation: gd-scan 1.3s cubic-bezier(.4,0,.2,1) .35s both;
}

/* le logo : une plaque, pas un rond rogne */
.ts-circle__xxl{
  width: min(190px, 100%) !important;
  height: min(190px, 46vw) !important;
  border-radius: 20px !important;
  overflow: hidden;
  display: grid !important; place-items: center;
  background: #fff;
  border: 1px solid var(--gd-line);
  box-shadow: 0 16px 34px -20px rgba(7,48,30,.5);
  animation: gd-pop .65s var(--gd-spring) .15s both;
}
.ts-circle__xxl img{
  width: 88%; height: 88%;
  object-fit: contain;                  /* un logo ne se recadre jamais */
}

.ts-box .ts-title h2{
  font-size: clamp(1.4rem, 2.8vw, 2.05rem) !important;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.14;
  color: var(--gd-ink);
  text-wrap: balance;
}
.ts-box .ts-title h5{
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .93rem !important;
  font-weight: 500;
  color: var(--gd-muted) !important;
  margin-bottom: .35rem;
}
.ts-box .ts-title h5 i{ color: var(--gd-green); margin: .15rem 0 0 !important; }

/* la coche de validation : passee en or, elle dit « compte verifie » */
.ts-box .fa-check-circle{
  color: var(--gd-gold) !important;
  filter: drop-shadow(0 2px 6px rgba(201,162,39,.45));
  animation: gd-pop .5s var(--gd-spring) .55s both;
}

/* le ruban d'angle : lisible au lieu d'un triangle colore */
.ts-ribbon-corner{
  border-radius: 0 22px 0 14px !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   3. LA PRESENTATION ET LES ACTIVITES
-------------------------------------------------------------------------------*/
#description h2, #description h3,
.ts-block > .container > .ts-title h2{
  font-size: clamp(1.1rem, 2.2vw, 1.45rem) !important;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--gd-ink);
}
#description p{ line-height: 1.7; color: var(--gd-text); }

/* « Secteurs et activités » : une pastille bleue Bootstrap au milieu du vert */
h5.badge.badge-primary{
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--gd-ink) !important;
  color: #d7f3e4 !important;
  border-radius: 99px !important;
  padding: .4rem .9rem !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: none !important;
}

/* la liste d'activites : le secteur en tete, ses activites en retrait */
.ts-block b, .ts-block strong{ color: var(--gd-ink); }
#content ul.list-unstyled li a,
#content .col-md-6 li a{
  color: var(--gd-text) !important;
  font-weight: 500;
  transition: color .18s ease, transform .18s var(--gd-spring);
  display: inline-block;
}
#content ul.list-unstyled li a:hover,
#content .col-md-6 li a:hover{
  color: var(--gd-green) !important;
  transform: translateX(2px);
}

/* -----------------------------------------------------------------------------
   4. LES CARTES PRODUIT
   Les vignettes en degrade violet avec deux lettres geantes mangeaient toute la
   carte, et le titre passait dessous, illisible.
-------------------------------------------------------------------------------*/
#data .card.ts-item,
.ts-items-carousel .card.ts-item{
  border: 1px solid var(--gd-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--gd-surface);
  box-shadow: 0 2px 10px rgba(7,48,30,.05);
  transition: transform .25s var(--gd-ease), box-shadow .25s ease, border-color .25s ease;
}
#data .card.ts-item:hover,
.ts-items-carousel .card.ts-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -24px rgba(7,48,30,.4);
  border-color: rgba(201,162,39,.45);
}
#data .card-img, #data .ts-item__image,
.ts-items-carousel .card-img, .ts-items-carousel .ts-item__image{
  position: relative;
  display: flex; align-items: flex-end;
  height: 168px;
  background-color: var(--gd-soft);
  background-size: auto 60% !important;      /* la lettre-avatar cesse de remplir */
  background-position: center 40% !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  overflow: hidden;
}
#data .ts-item__info,
.ts-items-carousel .ts-item__info{
  position: relative; z-index: 2;
  width: 100%; margin: 0;
  padding: 1.9rem .9rem .8rem !important;
  background: linear-gradient(to top, rgba(4,26,16,.92) 0%, rgba(4,26,16,.55) 55%, transparent 100%);
}
#data .ts-item__info h4,
.ts-items-carousel .ts-item__info h4{
  margin: 0;
  color: #fff !important;
  font-size: .98rem !important; font-weight: 700; line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
#data .ts-item__info aside,
.ts-items-carousel .ts-item__info aside{
  color: rgba(255,255,255,.85) !important;
  font-size: .76rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
#data .card-body:empty, .ts-items-carousel .card-body:empty{ display: none; }
#data .card-footer, .ts-items-carousel .card-footer{
  background: transparent;
  border-top: 1px solid var(--gd-line);
  padding: .6rem .9rem;
}
#data .ts-btn-arrow, .ts-items-carousel .ts-btn-arrow{
  color: var(--gd-green) !important;
  font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .35rem;
}

/* -----------------------------------------------------------------------------
   5. LE PANNEAU DE RECHERCHE PRODUITS
-------------------------------------------------------------------------------*/
#display-control .custom-select,
#search-form .form-control{
  border: 1px solid var(--gd-line);
  border-radius: 10px;
  padding: .6rem .85rem;
  height: auto;
}
#search-form .ts-box{
  border: 1px solid var(--gd-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(7,48,30,.05) !important;
}
#search-form .btn-primary,
#myButton{
  background: linear-gradient(135deg, var(--gd-green-lt), var(--gd-green)) !important;
  border: 0 !important;
  color: #04140d !important;
  border-radius: 10px !important;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(35,194,116,.85);
  transition: transform .18s var(--gd-spring), box-shadow .2s ease;
}
#search-form .btn-primary:hover, #myButton:hover{ transform: translateY(-2px); }

#data .pagination{ justify-content: center; margin-top: 1.25rem; }
#data .page-link{
  border-radius: 10px; margin: 0 .15rem;
  border-color: var(--gd-line);
  color: var(--gd-text);
  font-weight: 600;
}
#data .page-item.active .page-link{
  background: var(--gd-ink); border-color: var(--gd-ink); color: #fff;
}

/* -----------------------------------------------------------------------------
   6. LA PAGE CONTACT
-------------------------------------------------------------------------------*/
/* Une valeur absente s'affichait « / » : une barre oblique toute seule sous un
   libelle en gras. La classe est posee par gold.js. */
.gd-empty{ display: none !important; }

.ts-map, #ts-map-simple, #map-results{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gd-line);
  background: var(--gd-soft);
}
/* tuiles absentes : un fond neutre vaut mieux qu'un damier bleu casse */
.leaflet-container{ background: var(--gd-soft) !important; }

form .form-control{
  border: 1px solid var(--gd-line);
  border-radius: 10px;
  padding: .7rem .9rem; height: auto;
  transition: border-color .2s ease, box-shadow .2s ease;
}
form .form-control:focus{
  border-color: rgba(10,156,83,.55);
  box-shadow: 0 0 0 4px rgba(10,156,83,.12);
}
/* le bouton d'envoi etait en bleu pur */
#send_message, form .btn-primary[type="submit"], .btn.btn-primary#sen_msg{
  background: linear-gradient(135deg, var(--gd-green-lt), var(--gd-green)) !important;
  border: 0 !important;
  color: #04140d !important;
  border-radius: 99px !important;
  padding: .75rem 1.6rem !important;
  font-weight: 800;
  box-shadow: 0 12px 26px -14px rgba(35,194,116,.9);
  transition: transform .18s var(--gd-spring);
}
#send_message:hover{ transform: translateY(-2px); }

/* les deux boutons sans libelle (favori, partager) */
.btn3d{
  border-radius: 12px !important;
  border: 1px solid var(--gd-line) !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(7,48,30,.06) !important;
  padding: .65rem .8rem !important;
  transition: transform .18s var(--gd-spring), border-color .2s ease;
}
.btn3d:hover{ transform: translateY(-2px); border-color: rgba(201,162,39,.5) !important; }

/* -----------------------------------------------------------------------------
   7. PIED DE PAGE
-------------------------------------------------------------------------------*/
#ts-footer{
  background: var(--gd-ink) !important;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--gd-gold), var(--gd-gold-lt), var(--gd-gold)) 1;
}
#ts-footer, #ts-footer p, #ts-footer address, #ts-footer a{ color: #b6d3c4 !important; }
#ts-footer h4{ color: #fff !important; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
#ts-footer a:hover{ color: var(--gd-gold-lt) !important; }
#ts-footer .btn-outline-dark{
  border-color: rgba(255,255,255,.25) !important;
  color: #eaf6ef !important;
  border-radius: 99px;
}

/* -----------------------------------------------------------------------------
   8. APPARITION DES BLOCS
-------------------------------------------------------------------------------*/
.gd-in{ animation: gd-rise .55s var(--gd-ease) both; animation-delay: var(--d, 0s); }

@keyframes gd-rise{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes gd-pop { from{ opacity:0; transform: scale(.86); }      to{ opacity:1; transform:none; } }
@keyframes gd-scan{
  0%{ transform: translateX(-120%); opacity:0; }
  12%{ opacity:1; } 88%{ opacity:1; }
  100%{ transform: translateX(620%); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .gd-in, .ts-circle__xxl, .ts-box:has(> .row > .col-md-4 .ts-circle__xxl),
  .ts-box .fa-check-circle{ animation: none !important; opacity: 1; transform: none; }
  .ts-box:has(> .row > .col-md-4 .ts-circle__xxl)::after{ display: none; }
  #data .card.ts-item:hover, .btn3d:hover, #myButton:hover{ transform: none; }
}

/* -----------------------------------------------------------------------------
   9. MODE SOMBRE
-------------------------------------------------------------------------------*/
.navbar-dark #ts-primary-navigation{ background: rgba(13,33,26,.94) !important; }
.navbar-dark #ts-primary-navigation .nav-link{ color: #dbeee3 !important; }
.navbar-dark .ts-box:has(> .row > .col-md-4 .ts-circle__xxl){
  background: #14231c !important;
  border-color: rgba(255,255,255,.10) !important;
}
.navbar-dark .ts-box .ts-title h2{ color: #f1fbf5; }
.navbar-dark #data .card.ts-item,
.navbar-dark .ts-items-carousel .card.ts-item{
  background: #14231c; border-color: rgba(255,255,255,.10) !important;
}

/* -----------------------------------------------------------------------------
   10. BARRE COLLANTE
   La page est longue : passé le bandeau d'identité, on ne sait plus chez qui
   on se trouve. Le logo et le nom restent accessibles.
-------------------------------------------------------------------------------*/
.gd-sticky{
  position: fixed;
  inset-inline: 0; top: 0;
  z-index: 1035;
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem clamp(1rem, 4vw, 3rem);
  background: rgba(13,33,26,.94);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
          backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 2px solid var(--gd-gold);
  transform: translateY(-120%);
  transition: transform .35s var(--gd-ease);
}
.gd-sticky.is-on{ transform: none; }
.gd-sticky__logo{
  width: 30px; height: 30px; flex: none;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
}
.gd-sticky__name{
  flex: 1 1 auto; min-width: 0;
  color: #fff;
  font-weight: 800; font-size: .95rem;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 767.98px){ .gd-sticky{ display: none; } }
@media (prefers-reduced-motion: reduce){ .gd-sticky{ transition: none; } }