/* ==========================================================================
   SII 2026 — refonte.css
   Feuille de surcharge, chargee APRES /assets/site.css.
   Elle ne contient que des corrections d apparence. Aucun HTML, aucun
   JavaScript n est modifie : toutes les fonctionnalites restent intactes.

   Version 2 du 1er octobre 2026.
   Sommaire
     1. Le logo dans les cartes du hall
     2. Le logo sur la fiche de l exposant
     3. Le bouton Site web, retire des cartes du hall
     4. Les emplacements libres, mis en retrait
     5. Les cartes d exposants, mises en avant
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LE LOGO DANS LES CARTES DU HALL

   Une carte d exposant a distance porte a la fois les classes « niv4 » et
   « centree ». La regle .hl-stand.niv4 .hl-logo bridait le logo a 50 pixels
   alors que la case lui en reserve 200. La regle ci-dessous est plus
   specifique, elle reprend la main.
   -------------------------------------------------------------------------- */

.hl-stand.centree .hl-c-logo .hl-logo,
.hl-stand.niv4 .hl-c-logo .hl-logo{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:150px;
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
  mix-blend-mode:multiply;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}

/* Le logo respire legerement quand on approche de la carte */
.hl-stand.centree:hover .hl-c-logo .hl-logo{ transform:scale(1.04) }

/* L initiale de remplacement, quand l exposant n a pas encore depose de logo */
.hl-stand.centree .hl-c-logo .hl-logo.vide,
.hl-stand.niv4 .hl-c-logo .hl-logo.vide{
  width:78px;
  height:78px;
  max-width:none;
  max-height:none;
  border-radius:50%;
  background:var(--papier);
  border:1px solid var(--filet);
  mix-blend-mode:normal;
}

@media (max-width:620px){
  .hl-stand.centree .hl-c-logo .hl-logo,
  .hl-stand.niv4 .hl-c-logo .hl-logo{ max-height:124px }
}


/* --------------------------------------------------------------------------
   2. LE LOGO SUR LA FICHE DE L EXPOSANT
   -------------------------------------------------------------------------- */

.fx-entete .fx-logo{
  width:clamp(118px,13vw,160px);
  height:clamp(118px,13vw,160px);
  padding:10px;
  object-fit:contain;
  background:#fff;
}

@media (max-width:780px){
  .fx-entete .fx-logo{
    width:clamp(104px,26vw,132px);
    height:clamp(104px,26vw,132px);
    margin-top:-40px;
  }
}


/* --------------------------------------------------------------------------
   3. LE BOUTON SITE WEB, RETIRE DES CARTES DU HALL

   Un visiteur qui part sur le site de l exposant quitte le hall et ne
   revient pas. Le bouton d entree dans le stand prend toute la largeur.
   Le lien vers le site reste disponible sur la fiche de l exposant.
   -------------------------------------------------------------------------- */

.hl-c-btn .btn-contour{ display:none }
.hl-c-btn{ grid-template-columns:1fr }
.hl-c-btn .btn-encre{ width:100% }


/* --------------------------------------------------------------------------
   4. LES EMPLACEMENTS LIBRES, MIS EN RETRAIT

   Le hall compte aujourd hui plus de cases a reserver que d exposants.
   Elles restent visibles et cliquables, mais cessent de crier plus fort
   que les entreprises reellement presentes.
   -------------------------------------------------------------------------- */

.hl-stand.libre{
  background:transparent;
  border-style:dashed;
  border-color:rgba(216,210,204,.9);
  box-shadow:none;
  opacity:.82;
  transition:opacity .3s ease, border-color .3s ease, background .3s ease;
}
.hl-stand.libre:hover{
  opacity:1;
  background:var(--creme);
  border-color:var(--orange);
}

/* L etiquette de formule s allege */
.hl-stand.libre .hl-etq{ opacity:.78 }

/* Le texte se fait plus discret */
.hl-stand.libre p{
  font-size:13px;
  color:var(--gris-clair);
}

/* Le bouton passe en contour : il invite, il n interpelle plus */
.hl-stand.libre .btn{
  background:transparent;
  color:var(--marron);
  border:1px solid var(--filet);
  box-shadow:none;
  font-weight:600;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.hl-stand.libre .btn:hover{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}


/* --------------------------------------------------------------------------
   5. LES CARTES D EXPOSANTS, MISES EN AVANT

   Face aux emplacements libres devenus discrets, les vraies entreprises
   doivent se detacher nettement.
   -------------------------------------------------------------------------- */

.hl-stand.centree{
  box-shadow:0 2px 10px rgba(26,18,16,.05);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),
             box-shadow .3s ease,
             border-color .3s ease;
}
.hl-stand.centree:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 34px rgba(26,18,16,.12);
  border-color:var(--orange);
}

/* Le ruban de secteur s epaissit au survol */
.hl-stand .hl-ruban{ height:5px; transition:height .3s ease }
.hl-stand:hover .hl-ruban{ height:9px }

/* Le nom de l entreprise se colore quand on approche */
.hl-stand.centree .hl-nom{ transition:color .3s ease }
.hl-stand.centree:hover .hl-nom{ color:var(--marron) }

/* Le bouton d entree glisse vers la droite, la carte entiere semble repondre */
.hl-c-btn .btn-encre{ transition:transform .25s ease }
.hl-stand.centree:hover .hl-c-btn .btn-encre{ transform:translateX(3px) }

@media (prefers-reduced-motion:reduce){
  .hl-stand.centree,
  .hl-stand.centree:hover,
  .hl-stand.centree .hl-c-logo .hl-logo,
  .hl-c-btn .btn-encre{ transform:none; transition:none }
}


/* --------------------------------------------------------------------------
   6. LA COLONNE DE CONTACT DE LA FICHE, HIERARCHISEE

   Huit boutons de meme poids ne guident personne. Les actions qui comptent
   restent pleines et colorees ; les outils de service passent en retrait,
   sous un filet de separation.

   Groupe de tete  : actions personnalisees, WhatsApp, demande de devis.
   Groupe de pied  : rendez-vous, plaquette, recherche de partenaire.
   -------------------------------------------------------------------------- */

/* Les outils de service s allegent */
.fx-contact .btn-encre,
.fx-contact .btn-contour{
  min-height:42px;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.07em;
  background:transparent;
  color:var(--gris-texte);
  border:1px solid var(--filet);
  box-shadow:none;
  transition:border-color .25s ease, color .25s ease;
}
.fx-contact .btn-encre:hover,
.fx-contact .btn-contour:hover{
  border-color:var(--orange);
  color:var(--marron);
  background:transparent;
}

/* Un filet separe les deux groupes */
.fx-contact .btn-orange + .btn-encre,
.fx-contact .btn-orange + .btn-contour{
  margin-top:22px;
  position:relative;
}
.fx-contact .btn-orange + .btn-encre::before,
.fx-contact .btn-orange + .btn-contour::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-11px;
  height:1px;
  background:var(--filet);
}

/* Les actions personnalisees gagnent en presence */
.fx-contact .btn-marron{
  box-shadow:0 2px 8px rgba(122,30,12,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fx-contact .btn-marron:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(122,30,12,.2);
}

/* La demande de devis reste le geste le plus visible de la colonne */
.fx-contact .btn-orange{
  box-shadow:0 3px 12px rgba(242,84,23,.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fx-contact .btn-orange:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(242,84,23,.3);
}

@media (prefers-reduced-motion:reduce){
  .fx-contact .btn-marron,
  .fx-contact .btn-marron:hover,
  .fx-contact .btn-orange,
  .fx-contact .btn-orange:hover{ transform:none; transition:none }
}


/* --------------------------------------------------------------------------
   7. LA BANNIERE, QUAND L EXPOSANT N EN A PAS DEPOSE

   Sans image, le bandeau d ouverture n est qu un aplat de couleur de pres de
   trois cents pixels. Il se reduit de moitie et recoit un degrade diagonal,
   pour cesser d etre un rectangle vide. Quand une banniere existe, rien ne
   change.
   -------------------------------------------------------------------------- */

.fx-banniere:not(:has(img)){
  height:clamp(120px,15vw,190px);
}

.fx-banniere:not(:has(img))::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(118deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,0) 42%,
    rgba(0,0,0,.26) 100%);
  pointer-events:none;
}

@media (max-width:780px){
  .fx-banniere:not(:has(img)){ height:clamp(104px,24vw,150px) }
}


/* --------------------------------------------------------------------------
   8. LE PARCOURS DU HALL

   Un visiteur traversait deux ecrans d emplacements a vendre avant
   d atteindre une entreprise reelle. Les allees qui comptent au moins un
   exposant remontent en tete ; les emplacements a vendre restent dessous,
   ou ils s adressent aux entreprises qui cherchent un stand.
   -------------------------------------------------------------------------- */

#allees{ display:flex; flex-direction:column }
#allees .hl-allee:has(.hl-stand:not(.libre)){ order:-1 }


/* --------------------------------------------------------------------------
   9. LA GRILLE DES SECTEURS

   Dix-neuf cases, trois seulement menent quelque part. Celles qui comptent
   un exposant passent devant et se detachent ; les autres s estompent, sans
   disparaitre : elles restent cliquables et disent au visiteur que la
   filiere existe.
   -------------------------------------------------------------------------- */

/* La grille reste une grille : « order » fonctionne aussi bien en grid. */

/* Les secteurs peuples passent en tete et se detachent */
#secteurs .hl-carte-sect:has(.nb){
  order:-1;
  background:#fff;
  box-shadow:0 2px 10px rgba(26,18,16,.05);
}
#secteurs .hl-carte-sect:has(.nb):hover{
  border-color:var(--orange);
  box-shadow:0 10px 24px rgba(26,18,16,.1);
}

/* La pastille du nombre d exposants devient lisible */
#secteurs .hl-carte-sect .nb{
  background:var(--orange);
  color:#fff;
  font-weight:700;
}

/* Les secteurs encore vides s effacent, sans se fermer : ils restent
   cliquables et disent au visiteur que la filiere existe. */
#secteurs .hl-carte-sect:not(:has(.nb)){
  opacity:.52;
  box-shadow:none;
  transition:opacity .25s ease, border-color .25s ease;
}
#secteurs .hl-carte-sect:not(:has(.nb)):hover{ opacity:.92 }


/* --------------------------------------------------------------------------
   10. L ESPACE EXPOSANT : FILM DE PRESENTATION ET CAPSULE

   Les deux blocs video de /mon-stand n avaient aucun style. Chacun propose
   desormais deux voies, l exposant depose son lien lui-meme ou nous envoie
   son fichier ; le filet orange distingue les deux.
   -------------------------------------------------------------------------- */

.ms-film,
.ms-capsule{
  margin:26px 0 10px;
  padding:24px 24px 20px;
  border:1px solid var(--filet);
  border-radius:14px;
  background:var(--creme);
}

.ms-film h4,
.ms-capsule h4{
  font-family:var(--titre);
  font-size:21px;
  line-height:1.3;
  margin:0 0 10px;
  color:var(--encre);
}

.ms-film p,
.ms-capsule p,
.ms-capsule li{
  font-size:14.5px;
  line-height:1.65;
  color:var(--gris-texte);
  margin:0 0 12px;
}

.ms-capsule ol{ margin:0 0 14px 20px; padding:0 }
.ms-capsule li{ margin-bottom:6px }

/* « Deux façons de procéder » */
.ms-voies{
  margin-top:20px !important;
  margin-bottom:6px !important;
  color:var(--encre) !important;
}

/* Chaque voie, marquee d un filet orange */
.ms-voie{
  padding-left:16px;
  border-left:3px solid var(--orange);
  margin-top:16px !important;
}

.ms-film label,
.ms-capsule label{ margin-top:8px }

.ms-capsule-liens{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:4px 0 16px 16px;
}

.ms-capsule-ok,
.ms-capsule-note{
  margin-top:16px !important;
  padding:12px 14px;
  border-radius:10px;
  font-size:13.5px;
}
.ms-capsule-ok{ background:rgba(22,122,70,.08); color:#146a3e }
.ms-capsule-note{ background:var(--papier); color:var(--gris-clair) }

@media (max-width:620px){
  .ms-film, .ms-capsule{ padding:18px 16px 14px }
  .ms-capsule-liens{ margin-left:0 }
  .ms-voie{ padding-left:12px }
}


/* --------------------------------------------------------------------------
   11. LA CAPSULE DE 60 SECONDES SUR LA FICHE

   Elle etait coincee dans l entete, en timbre-poste, entre l accroche et la
   rangee d informations. Elle devient le premier bloc de la colonne
   principale, pleine largeur, au format 16:9, impossible a manquer.
   -------------------------------------------------------------------------- */

.fx-bloc-capsule{ padding-bottom:22px }

.fx-bloc-capsule h3{
  display:flex;
  align-items:center;
  gap:12px;
}

/* La pastille rouge qui pulse, pour dire que ça se regarde */
.fx-bloc-capsule h3::before{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(242,84,23,.55);
  animation:fxPulse 2.4s ease-out infinite;
  flex:0 0 auto;
}
@keyframes fxPulse{
  0%   { box-shadow:0 0 0 0 rgba(242,84,23,.55) }
  70%  { box-shadow:0 0 0 12px rgba(242,84,23,0) }
  100% { box-shadow:0 0 0 0 rgba(242,84,23,0) }
}

.fx-bloc-capsule .fx-capsule{
  position:relative;
  width:100%;
  margin:18px 0 0;
  aspect-ratio:16 / 9;
  border-radius:16px;
  overflow:hidden;
  background:#0d0a08;
  border:1px solid var(--filet);
  box-shadow:0 14px 38px rgba(26,18,16,.16);
  transition:box-shadow .35s ease, transform .35s ease;
}
.fx-bloc-capsule .fx-capsule:hover{
  box-shadow:0 20px 52px rgba(26,18,16,.22);
  transform:translateY(-3px);
}

.fx-bloc-capsule .fx-capsule iframe,
.fx-bloc-capsule .fx-capsule video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  object-fit:cover;
}

/* L etiquette, posee sur la video */
.fx-bloc-capsule .fx-capsule-lab{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(13,10,8,.72);
  backdrop-filter:blur(6px);
  color:#fff;
  font-family:var(--texte);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  pointer-events:none;
}

@media (max-width:620px){
  .fx-bloc-capsule .fx-capsule{ border-radius:12px; margin-top:14px }
  .fx-bloc-capsule .fx-capsule-lab{ top:10px; left:10px; font-size:10.5px; padding:6px 11px }
}

@media (prefers-reduced-motion:reduce){
  .fx-bloc-capsule h3::before{ animation:none }
  .fx-bloc-capsule .fx-capsule,
  .fx-bloc-capsule .fx-capsule:hover{ transform:none; transition:none }
}