/* ==========================================================================
   BGI — Bensouna Global Invest
   Charte reprise de la plaquette AMANA : fond anthracite, or, serif de titrage.
   ========================================================================== */

:root {
  /* Le site est déjà sombre : empêche le mode sombre forcé des navigateurs
     de réappliquer son propre filtre (source de dominantes roses). */
  color-scheme: dark;

  --ink:      #001940;
  --ink-2:    #052349;
  --panel:    #0A2C56;
  --footer:   #000F2A;
  --line:     rgba(255,255,255,.14);
  --gold:     #BE9761;
  --gold-lt:  #D9BA84;
  --head:     #FFFFFF;
  --text:     rgba(255,255,255,.76);
  --text-dim: rgba(255,255,255,.54);

  --display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans:    "Jost", "Futura", "Century Gothic", sans-serif;

  --max:  1080px;
  --gut:  clamp(1.25rem, 4vw, 3rem);
  --sect: clamp(4rem, 9vw, 7.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-lt); text-underline-offset: .22em; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

h1,h2,h3,h4 {
  font-family: var(--display);
  color: var(--head);
  font-weight: 300;
  line-height: 1.14;
  margin: 0 0 .5em;
}

.skip { position:absolute; left:-9999px; background:var(--gold); color:var(--ink); padding:.75rem 1.25rem; z-index:200; }
.skip:focus { left:1rem; top:1rem; }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* ------------------------------------------------------------ Structure --- */

.wrap { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.section { padding-block: var(--sect); }
.section--alt { background: var(--ink-2); }

/* Surtitre : petites capitales or — repris de la plaquette. */
.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
}

/* Le filet or sous les titres : signature graphique de la plaquette. */
.rule { width:3.75rem; height:2px; background:var(--gold); border:0; margin:1.75rem 0 2.25rem; }

.h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -.005em;
  max-width: 18ch;
  margin-bottom: 0;
}
.h2 em { font-style: normal; color: var(--gold-lt); }

.lede { max-width: 68ch; }
.lede p { margin: 0 0 1.15rem; }
.lede p:last-child { margin-bottom: 0; }
.lede strong { color: var(--head); font-weight: 400; }

.note { font-size:.8rem; color:var(--text-dim); line-height:1.7; max-width:78ch; margin-top:2rem; }

.btn {
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--sans); font-size:.74rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2.1rem; border:1px solid var(--gold);
  color:var(--gold-lt); background:transparent;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn::after { content:"\2192"; transition:transform .35s var(--ease); }
.btn:hover { background:var(--gold); color:var(--ink); }
.btn:hover::after { transform:translateX(4px); }

/* --------------------------------------------------------------- Header --- */

.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(0,25,64,.90);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background .35s var(--ease);
}
.site-header__in {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.15rem; transition:padding-block .35s var(--ease);
}
.site-header.is-stuck .site-header__in { padding-block:.7rem; }
.site-header.is-stuck { background:rgba(0,25,64,.98); }

.brand { display:flex; align-items:center; }
.brand img {
  width:auto; height:46px; max-width:min(62vw,262px);
  object-fit:contain; object-position:left center;
  transition:height .35s var(--ease);
}
.site-header.is-stuck .brand img { height:38px; }
@media (max-width:480px){ .brand img { height:36px; } }

.nav ul { display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.nav a {
  font-size:.72rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); text-decoration:none;
  padding-block:.35rem; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.nav a:hover, .nav .current-menu-item > a { color:var(--head); border-bottom-color:var(--gold); }

.burger { display:none; background:none; border:0; cursor:pointer; padding:.5rem; width:44px; height:44px; }
.burger span { display:block; height:1px; width:24px; background:var(--head); margin:6px auto; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .burger { display:block; }
  .nav {
    position:absolute; left:0; right:0; top:100%;
    background:var(--ink); border-top:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
  }
  .nav.is-open { max-height:75vh; }
  .nav ul { flex-direction:column; gap:0; padding:.5rem var(--gut) 1.5rem; }
  .nav li { border-bottom:1px solid var(--line); }
  .nav a { display:block; padding:1.05rem 0; border:0; }
}

/* ----------------------------------------------------------------- Hero --- */

.hero { position:relative; isolation:isolate; overflow:hidden; }
.hero__media { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
/* Halo elliptique centré sur le bloc de texte : assied le titre sans
   assombrir les bords ni le haut de l'image. */
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(58% 42% at 50% 68%,
    rgba(0,15,42,.62) 0%,
    rgba(0,15,42,.40) 42%,
    rgba(0,15,42,.14) 68%,
    rgba(0,15,42,0)  84%);
}

.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  /* Aucun voile sur le haut de l'image : elle garde ses couleurs d'origine.
     Le fondu navy ne démarre qu'au niveau du texte, pour la lisibilité.
     rgba(...,0) plutôt que « transparent » : évite l'interpolation grisée. */
  background-color: transparent;
  background-image: linear-gradient(to bottom,
    rgba(0,25,64,0)    0%,
    rgba(0,25,64,0)   26%,
    rgba(0,25,64,.30) 44%,
    rgba(0,25,64,.66) 62%,
    rgba(0,25,64,.90) 80%,
    rgba(0,25,64,1)  100%);
}
.hero__in {
  min-height:clamp(560px, 88vh, 880px);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding-block:clamp(6rem,14vw,9rem) clamp(3rem,7vw,5rem);
  text-align:center;
}
.hero .eyebrow {
  margin-bottom:1.25rem;
  color:var(--gold-lt);
  /* Double ombre : un halo serré pour détacher les lettres du feuillage,
     un halo large pour asseoir le bloc. */
  text-shadow:0 1px 3px rgba(0,15,42,.95), 0 2px 22px rgba(0,15,42,.9);
}
.hero h1 {
  font-size:clamp(3rem,12vw,7rem); font-weight:300;
  letter-spacing:.16em; text-indent:.16em;
  margin:0; color:#fff;
  text-shadow:0 2px 34px rgba(0,20,52,.55);
}
.hero .rule { margin:1.75rem auto 1.75rem; }
.hero__place { text-shadow:0 1px 3px rgba(0,15,42,.9), 0 2px 20px rgba(0,15,42,.85); font-size:.76rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.86); margin:0 0 .9rem; }
.hero__sub { text-shadow:0 1px 16px rgba(0,20,52,.85); color:rgba(255,255,255,.82); font-size:.9rem; max-width:52ch; margin:0 auto 2.5rem; }

/* ------------------------------------------------------------ Chiffres --- */

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--line); margin-top:3rem; }
.stat { padding:1.75rem 1.25rem; text-align:center; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
@media (max-width:640px){
  .stat { border-right:0; border-bottom:1px solid var(--line); }
  .stat:last-child { border-bottom:0; }
}
.stat__n { font-family:var(--display); font-size:clamp(1.9rem,4vw,2.6rem); font-weight:400; color:var(--head); line-height:1; display:block; margin-bottom:.7rem; }
.stat__n span { font-size:.5em; color:var(--gold-lt); }
.stat__l { font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); }

/* ------------------------------------------------------------- Colonnes --- */

.cols3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2rem 2.5rem; margin-top:3rem; }
.col h3 { font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--head); margin-bottom:.7rem; }
.col p { margin:0; font-size:.92rem; }

/* ---------------------------------------------------------- Spécification */

.spec { width:100%; border-collapse:collapse; margin-top:2.5rem; }
.spec tr { border-bottom:1px solid var(--line); }
.spec tr:first-child { border-top:1px solid var(--line); }
.spec th { text-align:left; font-weight:400; padding:1.05rem 1rem 1.05rem 0; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--head); }
.spec td { text-align:right; padding:1.05rem 0; font-size:.95rem; color:var(--text); }
@media (max-width:560px){
  .spec th, .spec td { display:block; text-align:left; padding:0; }
  .spec th { padding-top:1.05rem; }
  .spec td { padding-bottom:1.05rem; }
}

/* ------------------------------------------------------------ Échéancier */

.plan { width:100%; border-collapse:collapse; margin-top:2.5rem; }
.plan thead th { font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); font-weight:400; text-align:left; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.plan thead th:last-child, .plan td:last-child { text-align:right; }
.plan td { padding:1.1rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.plan td:first-child { color:var(--head); }
.plan td:last-child { font-family:var(--display); font-size:1.35rem; color:var(--gold-lt); }
.plan tfoot td { border-bottom:0; padding-top:1.4rem; color:var(--head); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.plan tfoot td:last-child { font-size:1.5rem; letter-spacing:0; color:var(--head); }
@media (max-width:640px){ .plan thead th:nth-child(2), .plan td:nth-child(2){ display:none; } }

/* ------------------------------------------------------------- Encadré --- */

.callout { border-left:2px solid var(--gold); background:var(--panel); padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.25rem); margin-top:3rem; }
.callout h3 { font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--head); margin-bottom:.85rem; }
.callout p { margin:0; font-size:.93rem; }

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

.figure { margin:3rem 0 0; }
.figure img { width:100%; }
.figure figcaption { font-size:.8rem; color:var(--text-dim); margin-top:.85rem; }

.gallery { display:grid; gap:1.25rem; margin-top:1.25rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

/* ---------------------------------------------------------------- Prix --- */

.price-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,3.5rem); align-items:start; margin-top:2.5rem; }
@media (max-width:820px){ .price-grid { grid-template-columns:1fr; } }
.price-box { border:1px solid var(--line); background:var(--panel); padding:clamp(2rem,4vw,2.75rem); }
.price-box .eyebrow { margin-bottom:1.25rem; }
.price-box__v { font-family:var(--display); font-size:clamp(1.9rem,4vw,2.5rem); color:var(--head); line-height:1.1; margin:0 0 1rem; }
.price-box__n { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin:0; }
.price-grid .spec { margin-top:0; }

/* ------------------------------------------------------------- Parcours --- */

.steps { margin-top:3rem; }
.step { display:grid; grid-template-columns:4.5rem 1fr; gap:1rem; padding:1.75rem 0; border-bottom:1px solid var(--line); }
.step:first-child { border-top:1px solid var(--line); }
.step__n { font-family:var(--display); font-size:1.75rem; color:var(--gold); line-height:1; }
.step h3 { font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--head); margin-bottom:.6rem; }
.step p { margin:0; font-size:.93rem; }
@media (max-width:560px){ .step { grid-template-columns:1fr; gap:.5rem; } }

/* -------------------------------------------------------------- Contact --- */

.people { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2.5rem; margin-top:3rem; }
.person img { width:130px; height:130px; border-radius:50%; object-fit:cover; margin-bottom:1.25rem; }
.person h3 { font-family:var(--sans); font-size:1rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--head); margin-bottom:.3rem; }
.person__role { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 .7rem; }
.person a { font-size:.92rem; color:var(--text); text-decoration:none; border-bottom:1px solid rgba(217,186,132,.45); }
.person a:hover { color:var(--gold-lt); }

.contact-bar { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; border:1px solid var(--line); padding:clamp(1.75rem,3.5vw,2.25rem); margin-top:3rem; }
.contact-bar dt { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }
.contact-bar dd { margin:0; font-size:.95rem; }
.contact-bar a { color:var(--text); text-decoration:none; border-bottom:1px solid rgba(217,186,132,.45); }
.contact-bar a:hover { color:var(--gold-lt); }

.pull { font-family:var(--display); font-size:clamp(1.35rem,3.2vw,1.9rem); color:var(--head); text-align:center; max-width:28ch; margin:clamp(3.5rem,7vw,5rem) auto 1.25rem; line-height:1.35; }
.pull-place { text-align:center; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0; }

/* --------------------------------------------------------------- Footer --- */

.site-footer { background:var(--footer); border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,4rem) 2rem; font-size:.88rem; }
.site-footer__top { display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; align-items:flex-start; padding-bottom:2.25rem; border-bottom:1px solid var(--line); }
.site-footer img { height:88px; width:auto; max-width:220px; object-fit:contain; }
.site-footer__nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.75rem; }
.site-footer__nav a { color:var(--text); text-decoration:none; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.site-footer__nav a:hover { color:var(--gold-lt); }
.site-footer__base { padding-top:1.75rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.78rem; color:var(--text-dim); }
.site-footer__base p { margin:0; }

/* -------------------------------------------------------- Pages / posts --- */

.page-head { padding-block:clamp(3.5rem,8vw,5.5rem) clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line); }
.page-head h1 { margin:0; font-size:clamp(2.2rem,6vw,3.6rem); }

.entry { max-width:72ch; }
.entry h2 { font-size:clamp(1.6rem,3.5vw,2.2rem); margin-top:2em; }
.entry h3 { font-family:var(--sans); font-size:1.05rem; font-weight:500; letter-spacing:.06em; margin-top:2em; color:var(--head); }
.entry blockquote { margin:2.25rem 0; padding-left:1.75rem; border-left:2px solid var(--gold); font-family:var(--display); font-size:1.3rem; color:var(--head); }
.entry img { margin-block:2rem; }
.entry ul, .entry ol { padding-left:1.35rem; }
.entry li + li { margin-top:.4rem; }
.entry table { width:100%; border-collapse:collapse; }
.entry th, .entry td { border:1px solid var(--line); padding:.65rem .85rem; text-align:left; }

.card-list { display:grid; gap:2.5rem; }
.card-list article { border-bottom:1px solid var(--line); padding-bottom:2.5rem; }
.card-list h2 { font-size:1.6rem; }
.card-list h2 a { color:var(--head); text-decoration:none; }
.card-list h2 a:hover { color:var(--gold-lt); }
.meta { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }

.pagination { margin-top:3rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.pagination .page-numbers { padding:.5rem .9rem; border:1px solid var(--line); text-decoration:none; font-size:.85rem; color:var(--text); }
.pagination .current { background:var(--gold); color:var(--ink); border-color:var(--gold); }

/* ------------------------------------------------------------ Animation --- */

.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* --------------------------------------------------------------- Projets --- */

.projects { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1.5rem,3vw,2.25rem); margin-top:3rem; }

.project { border:1px solid var(--line); background:var(--ink-2); display:flex; flex-direction:column; }
.section--alt .project { background:var(--panel); }

.project__img { aspect-ratio:16/10; overflow:hidden; background:var(--panel); }
.project__img img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.project:hover .project__img img { transform:scale(1.03); }

.project__img--soon {
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
  background: var(--panel);
}
.project__img--soon span {
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2rem);
  color:var(--gold-lt); letter-spacing:.06em;
}

.project__body { padding:clamp(1.5rem,3vw,2rem); flex:1; }
.project__status {
  display:inline-block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(190,151,97,.5);
  padding:.35rem .75rem; margin-bottom:1.25rem;
}
.project__status--soon { color:var(--text-dim); border-color:var(--line); }
.project h3 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.25rem; }
.project__place { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); margin:0 0 1.15rem; }
.project p { margin:0; font-size:.93rem; }
.project__facts { list-style:none; margin:1.5rem 0 0; padding:1.25rem 0 0; border-top:1px solid var(--line); display:grid; gap:.5rem; }
.project__facts li { font-size:.85rem; display:flex; gap:.7rem; }
.project__facts li::before { content:"—"; color:var(--gold); flex:none; }
.project__link { margin-top:1.75rem; display:inline-block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt); text-decoration:none; border-bottom:1px solid rgba(217,186,132,.5); padding-bottom:.25rem; }
.project__link:hover { color:var(--gold); }

.byline { font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:1.25rem 0 0; }