/*
  Theme Name: hangar-b
  Theme URI: https://www.hangar-b.be
  Version: 1.0.0
  Template: Divi
  Author: designer@arpeggio.be
  Author URI: https://www.arpeggio.be/fr
  Description: designed with flow by Arpeggio
  Text Domain: hangar-b
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ----------------------------------------
 ------------------------------------------
			      BUTTONS
-------------------------------------------
-------------------------------------------*/

/* body #page-container .et_pb_section .et_pb_row .et_pb_button:hover:after {
    margin-left: 0.6em !important;
} */

body #page-container .et_pb_section .et_pb_button_0:after {
    font-weight: 400 !important;
    font-size: 30px !important;
    display: inline-block;
    margin-left: 0.3em !important;
    color: #ffaf30;
    opacity: 1;
}

/* ----------------------------------------
 ------------------------------------------
			      BLURB
-------------------------------------------
-------------------------------------------*/

.et_pb_blurb_position_left .et_pb_blurb_container
 {
    padding-left: 0px !important;
}

/* ----------------------------------------
 ------------------------------------------
                  Images RATIO 
-------------------------------------------
-------------------------------------------*/

.arp-ratio-16-9 .et_pb_main_blurb_image img,
.arp-ratio-16-9 .et_pb_blurb_image img,
.arp-ratio-16-9 .et_pb_image_wrap > img,
.arp-ratio-4-3 .et_pb_main_blurb_image img,
.arp-ratio-4-3 .et_pb_blurb_image img,
.arp-ratio-4-3 .et_pb_image_wrap > img,
.arp-ratio-3-2 .et_pb_main_blurb_image img,
.arp-ratio-3-2 .et_pb_blurb_image img,
.arp-ratio-3-2 .et_pb_image_wrap > img,
.arp-ratio-1-1 .et_pb_main_blurb_image img,
.arp-ratio-1-1 .et_pb_blurb_image img,
.arp-ratio-1-1 .et_pb_image_wrap > img,
.arp-ratio-3-4 .et_pb_main_blurb_image img,
.arp-ratio-3-4 .et_pb_blurb_image img,
.arp-ratio-3-4 .et_pb_image_wrap > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arp-ratio-16-9 .et_pb_main_blurb_image,
.arp-ratio-16-9 .et_pb_blurb_image,
.arp-ratio-16-9 .et_pb_image_wrap{ aspect-ratio: 16 / 9; }

.arp-ratio-4-3 .et_pb_main_blurb_image,
.arp-ratio-4-3 .et_pb_blurb_image,
.arp-ratio-4-3 .et_pb_image_wrap{ aspect-ratio: 4 / 3; }

.arp-ratio-3-2 .et_pb_main_blurb_image,
.arp-ratio-3-2 .et_pb_blurb_image,
.arp-ratio-3-2 .et_pb_image_wrap{ aspect-ratio: 3 / 2; }

.arp-ratio-1-1 .et_pb_main_blurb_image,
.arp-ratio-1-1 .et_pb_blurb_image,
.arp-ratio-1-1 .et_pb_image_wrap{ aspect-ratio: 1 / 1; }

.arp-ratio-3-4 .et_pb_main_blurb_image,
.arp-ratio-3-4 .et_pb_blurb_image,
.arp-ratio-3-4 .et_pb_image_wrap{ aspect-ratio: 3 / 4; }



/* ----------------------------------------
 ------------------------------------------
             PLAN interactif

	Toutes les classes sont préfixées "wh-" pour ne pas entrer
   	en conflit avec les styles Divi existants.
-------------------------------------------
-------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');
/* ==========================================================
   Toutes les classes sont préfixées "wh-" pour ne pas entrer
   en conflit avec les styles Divi existants.
   ========================================================== */
.wh-plan-wrap{
  --wh-box-libre: #ff7530;      /* couleur exacte demandée, remplissage du box "libre" */
  --wh-box-occupe: #f4f7f9;     /* couleur exacte demandée, remplissage du box "occupé" */
  --wh-libre: #ff7530;          /* accent (texte, dot, légende) — libre */
  --wh-libre-badge: #ffe4d3;    /* fond clair du badge statut "libre" */
  --wh-occupe: #7c8890;         /* accent (texte, dot, légende) — occupé, lisible sur fond clair */
  --wh-occupe-badge: #e7ebed;   /* fond clair du badge statut "occupé" */
  --wh-line: #1c1c1c;
  --wh-ink: #1c1c1c;
  /* --wh-bg: #f4f2ee; */
  max-width: 1320px;
  margin: 0 auto;
  font-family: 'Space Grotesk', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--wh-ink);
  box-sizing: border-box;
}
.wh-plan-wrap *{ box-sizing: border-box; }

.wh-plan-stage{
  position: relative;
  background: var(--wh-bg);
/*   border: 1px solid #ddd8cf; */
  border-radius: 6px;
  padding: clamp(10px, 3vw, 28px);
}

.wh-svg{ width: 100%; height: auto; display: block; }

/* Boxes */
.wh-box{
  stroke: none;
  cursor: pointer;
  transition: opacity .15s ease, filter .15s ease;
}
.wh-box.is-libre{ fill: var(--wh-box-libre); }
.wh-box.is-occupe{ fill: var(--wh-box-occupe); }
.wh-box:hover, .wh-box.is-active{ filter: brightness(0.96); }
.wh-box:focus{ outline: none; stroke: #1868c9; stroke-width: 5; }

.wh-box-num{
  font-family: 'Space Grotesk', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 64px;
  fill: var(--wh-ink);
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
}
.wh-box-num.is-libre{ fill: #ffffff; }
.wh-box-num.is-occupe{ fill: var(--wh-ink); }

.wh-box-surface{
  font-family: 'Space Grotesk', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: .85;
}
.wh-box-surface.is-libre{ fill: #ffffff; }
.wh-box-surface.is-occupe{ fill: var(--wh-ink); }

.wh-box-status-dot{
  pointer-events: none;
}
.wh-box-status-dot.is-libre{ fill: #ffffff; }
.wh-box-status-dot.is-occupe{ fill: var(--wh-occupe); }

/* Legend */
.wh-legend{
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 14px 4px 0;
  padding: 0;
  font-size: 14px;
  color: #fff;
}
.wh-legend li{ display: flex; align-items: center; gap: 8px; }
.wh-dot{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.wh-dot--libre{ background: var(--wh-libre); }
.wh-dot--occupe{ background: var(--wh-occupe); }

/* Tooltip */
.wh-tooltip{
  position: absolute;
  z-index: 20;
  min-width: 220px;
  max-width: 260px;
  background: #fff;
  border: 1px solid #1c1c1c;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 12px 14px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  top: 0; left: 0;
}
.wh-tooltip.is-visible{ opacity: 1; transform: translateY(0); }

.wh-tt-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #e6e3db;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.wh-tt-num{ font-size: 18px; font-weight: 700; }
.wh-tt-status{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
}
.wh-tt-status.is-libre{ background: var(--wh-libre-badge); color: #a34718; }
.wh-tt-status.is-occupe{ background: var(--wh-occupe-badge); color: var(--wh-occupe); }

.wh-tt-grid{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0;
  font-size: 13px;
}
.wh-tt-grid dt{ color: #6b6b6b; }
.wh-tt-grid dd{ margin: 0; text-align: right; font-weight: 600; }
.wh-tt-grid dt.is-hidden, .wh-tt-grid dd.is-hidden{ display: none; }

@media (max-width: 640px){
  .wh-box-num{ font-size: 80px; }
  .wh-box-surface{ font-size: 26px; }
}