/* ========== Base plein écran (aucun scroll) ========== */
html, body { height: 100%; }
body.imj-home{
  margin: 0;
  overflow: hidden; /* page figée plein écran */
  background: #ffffff;
}

/* zone globale (100vh) */
.imj-stage{
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr; /* top / nav / bas */
}

/* ========== Couleurs “maquette” ========== */
:root{
  --imj-teal: #0e3a43;     /* texte bleu-vert */
  --imj-olive: #9b9a6b;    /* filet olive */
  --imj-rust: #b04c2e;     /* filet rouille */
  --imj-bluegrey: #a9c3c9; /* panneau bas */
}

/* ========== Header haut ========== */
.imj-top{
  padding: 22px 24px 8px;
  text-align: center;
}

.imj-logo-top{
  width: 92px;
  height: auto;
  display: inline-block;
}

.imj-title{
  margin: 10px 0 0;
  color: var(--imj-teal);
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.18em;
  font-size: clamp(22px, 2.3vw, 44px);
}

/* ========== Navigation ========== */
.imj-nav{
  position: relative;
  padding: 10px 36px 0;
}

.imj-nav-inner{
  display: grid;
  grid-template-columns: 1fr 240px 1fr; /* left / gap collage / right */
  align-items: end;
}

.imj-nav-left, .imj-nav-right{
  display: flex;
  gap: 34px;
  align-items: center;
  white-space: nowrap;
}

.imj-nav-left{ justify-content: flex-start; }
.imj-nav-right{ justify-content: flex-end; }

.imj-link{
  color: var(--imj-teal);
  text-decoration: none;
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 18px;
  padding: 6px 0;
}

.imj-link:hover{ text-decoration: none; opacity: .85; }

.imj-nav-gap{ height: 1px; }

/* filets sous la nav */
.imj-rules{
  position: relative;
  height: 10px;
  margin-top: 6px;
}

.imj-rule-left,
.imj-rule-right{
  position: absolute;
  top: 3px;
  height: 4px;
  display: block;
}

.imj-rule-left{
  left: 36px;
  width: calc(50% - 180px);
  background: var(--imj-rust);
}

.imj-rule-right{
  right: 36px;
  width: calc(50% - 180px);
  background: var(--imj-olive);
}

/* dropdown Bootstrap harmonisé */
.imj-dd{
  border-radius: 0;
  border: 1px solid rgba(14,58,67,.25);
  padding: 8px 0;
}

.imj-dd .dropdown-item{
  font-family: "Georgia", "Times New Roman", serif;
  letter-spacing: 0.03em;
  padding: 8px 16px;
}

.imj-dd .dropdown-item:hover{
  background: rgba(169,195,201,.35);
}

/* ========== Bande basse ========== */
.imj-bottom{
  position: relative;
  background: var(--imj-bluegrey);
  overflow: hidden;
}

/* collage au centre */
.imj-collage{
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translateX(-50%);
  width: min(520px, 42vw);
  height: auto;
  pointer-events: none;
}

/* texte central */
.imj-center-text{
  position: absolute;
  left: 50%;
  top: 320px;
  transform: translateX(-50%);
  text-align: center;
  width: min(760px, 92vw);
}

.imj-name{
  color: var(--imj-teal);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 2.8vw, 52px);
  line-height: 1.05;
}

.imj-honours{
  margin-top: 10px;
  color: #ffffff;
  font-family: "Georgia", "Times New Roman", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.6;
}

.imj-phone{
  margin-top: 18px;
  color: var(--imj-teal);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 2.3vw, 44px);
  letter-spacing: 0.06em;
}

/* vignettes droite */
.imj-thumbs{
  position: absolute;
  right: 80px;
  top: 250px;
  width: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.imj-thumb{
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

/* ========== Ajustements responsives (sans casser la composition) ========== */
@media (max-width: 1200px){
  .imj-nav-inner{ grid-template-columns: 1fr 140px 1fr; }
  .imj-link{ font-size: 16px; }
  .imj-thumbs{ right: 30px; width: 280px; }
}

@media (max-width: 992px){
  body.imj-home{ overflow: auto; }      /* sur mobile on autorise le scroll */
  .imj-stage{ height: auto; min-height: 100vh; }
  .imj-nav-inner{ grid-template-columns: 1fr; gap: 10px; }
  .imj-nav-left, .imj-nav-right{ justify-content: center; flex-wrap: wrap; }
  .imj-rule-left, .imj-rule-right{ width: calc(50% - 24px); }
  .imj-collage{ position: relative; left: 50%; top: 10px; }
  .imj-center-text{ position: relative; left: 50%; top: 0; padding: 300px 0 80px; }
  .imj-thumbs{ position: relative; right: auto; top: auto; margin: 18px auto 40px; }
}