/* ==========================================================================
   Twadeo — feuille de style commune à toutes les pages
   ========================================================================== */

:root {
  --blue: #1F4E75;
  --ink: #16202B;
  --orange: #F0A02A;
  --cool: #E4EDF4;
  --border: #dbe4ec;
  --text-soft: #16202Bc7;
  --text-softer: #16202Bad;
  --text-faint: #16202B99;
  --hero-gradient: linear-gradient(90deg,rgba(31, 78, 117, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif;
  color: var(--ink);
  background: white;
}

a { text-decoration: none; color: var(--blue); }
a:hover { color: var(--orange); }

.max-content {
  max-width: 1600px;
  margin: 0 auto;
}
.btn-light {
  color: var(--cool);
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--cool);
  border-radius: 50rem;
}
.btn-light:hover {
  background: var(--cool);
  color: var(--blue) !important;
}
.btn-vendre {
  background: var(--blue);
  color: white;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--blue);
  border-radius: 50rem;
}
.btn-vendre:hover {
  background: transparent;
  color: var(--cool) !important;
}
.btn-acheter {
  background: var(--orange);
  color: black !important;
  padding:  0.75rem 1.5rem;
  border: 1px solid var(--orange);
  border-radius: 50rem;
}
.btn-acheter:hover {
  background: transparent;
  color: var(--orange) !important;
}
.text-center {
    text-align: center;
}
h2 {
  color: var(--blue);
  font-weight: 300;
  margin: 3em 0 1em;
  font-size: 2.125rem;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
/* ---------- En-tête / navigation ---------- */
.site-header {
  border-bottom: 1px solid var(--blue);
  background: var(--blue);
  background: var(--hero-gradient);
  color: white;
}
.site-header a {
  color: white;
}
.site-header .max-content  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  flex-wrap: wrap;
  gap: 16px;
}

.logo-img { height: 68px; width: auto; display: block; }

.nav-links {
  display: flex;
  gap: 2rem;
  font-size: 1rem;
  font-weight: 400;
  flex-wrap: wrap;
  align-items: center;
}

.nav-link:not([class*=" btn-"]) { color: white; padding-bottom: .25rem }
.nav-link:hover { color: var(--orange); }
.nav-link:not([class*=" btn-"]).active { color: var(--orange); border-bottom: 1px solid var(--cool) }



.btn-nav {
  background: var(--blue);
  color: white;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
}
.btn-nav:hover { background: var(--ink); color: white; }

/* ---------- Bloc "hero" des pages secondaires (2 colonnes) ---------- */

.hero-split {
  background: var(--hero-gradient);
}
.hero-split .max-content {
  display: grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
}

.hero-split__text { padding: 56px 40px; }

.hero-split__photo {
  min-height: 320px;
  overflow: hidden;
}
.hero-split__photo--tall { min-height: 340px; background: #000; }

/* ---------- Bloc "hero" plat, sans photo (secteurs.php) ---------- */

.hero-flat {
  background: var(--hero-gradient);
  padding: 56px 40px;
}

.photo-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.06);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.eyebrow__dash {
  width: 34px;
  height: 6px;
  background: var(--orange);
  display: block;
}
.eyebrow__label {
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cool);
}

.hero-title {
  font-weight: 800;
  font-size: 2.125rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: white;
}
.hero-title--lg { font-size: 2.25rem; }
.hero-title--sm { font-size: 2rem; line-height: 1.2; }

.hero-intro {
  font-size: 0.96875rem;
  line-height: 26px;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.hero-intro--lg { font-size: 1rem; line-height: 27px; }
.hero-intro--spaced { margin: 0 0 40px; }

/* Largeurs de lecture (max-width en "ch") */
.mw-16 { max-width: 16ch; }
.mw-18 { max-width: 18ch; }
.mw-20 { max-width: 20ch; }
.mw-22 { max-width: 22ch; }
.mw-26 { max-width: 26ch; }
.mw-38 { max-width: 38ch; }
.mw-44 { max-width: 44ch; }
.mw-56 { max-width: 56ch; }
.mw-60 { max-width: 60ch; }
.mw-62 { max-width: 62ch; }
.mw-64 { max-width: 64ch; }
.mw-66 { max-width: 66ch; }

/* ---------- Sections génériques ---------- */

.section { padding: 56px 40px; border-bottom: 2px solid var(--ink); }
.section--tint { background: var(--cool); }
.section--white { background: white; }
.section--last { border-bottom: none; }

.section-title {
  font-weight: 800;
  font-size: 1.375rem;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.section-title--sm { font-size: 1.25rem; margin-bottom: 12px; }
.section-title--flush { margin-bottom: 28px; }

.section-text {
  font-size: 1rem;
  line-height: 25px;
  color: var(--text-soft);
  margin: 0 0 28px;
}
.section-text--form {
  font-size: 1rem;
  line-height: 26px;
  color: var(--text-soft);
  margin: 0 0 28px;
}

/* ---------- Grille "pourquoi" (2 colonnes, raisons numérotées) ---------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px 40px;
}
.why-item { display: flex; gap: 14px; }
.why-item__num {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--orange);
  flex: 0 0 24px;
}
.why-item__title { font-weight: 700; font-size: 0.90625rem; margin-bottom: 5px; }
.why-item__text { font-size: 0.84375rem; line-height: 21px; color: var(--text-softer); }

/* ---------- Grille "pourquoi / quand" (racheter.php) ---------- */

.why-when-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 48px;
}
.subheading {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-item__title { font-weight: 700; font-size: 0.875rem; margin-bottom: 3px; }
.stack-item__text { font-size: 0.8125rem; line-height: 20px; color: var(--text-softer); }

/* ---------- Étapes numérotées ("Comment ça se passe ?") ---------- */

.steps-grid { display: grid; gap: 20px; }
.steps-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.steps-grid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.step__num { font-weight: 800; font-size: 0.8125rem; color: var(--orange); margin-bottom: 10px; }
.step__title { font-weight: 700; font-size: 0.90625rem; margin-bottom: 8px; }
.step__text { font-size: 0.8125rem; line-height: 20px; color: var(--text-softer); }

/* ---------- Bandeau sombre ---------- */

.banner-dark {
  padding: 48px 40px;
  background: var(--ink);
  color: white;
  border-bottom: 2px solid var(--ink);
}
.banner-dark--noborder { border-bottom: none; }
.banner-dark__title {
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 14px;
  color: var(--orange);
}
.banner-dark__text {
  font-size: 1rem;
  line-height: 26px;
  color: #fffccf;
  margin: 0;
}
.banner-dark .tag-row { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

.closing-grid { background: var(--ink); }
.closing-grid .max-content { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr); }
.closing-grid__text { padding: 64px 40px; display: flex; flex-direction: column; gap: 40px; }
.closing-grid__form { padding: 64px 40px; border-left: 1px solid rgba(255,255,255,0.15); }

/* ---------- Pastilles ("tags") ---------- */

.tag-pill {
  display: inline-block;
  background: var(--orange);
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 999px;
}
.tag-pill--outline {
  background: white;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 8px 16px;
}

.note-italic { font-size: 0.84375rem; color: #16202B8c; font-style: italic; margin: 24px 0 0; }

/* ---------- Formulaires ---------- */

.form-card {
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px #16202b14;
  padding: 28px 32px;
  max-width: 480px;
}
.form-card__title { font-weight: 700; font-size: 1rem; margin-bottom: 16px; }

.form-fields { display: flex; flex-direction: column; gap: 10px; }
.form-fields--wide { max-width: 420px; gap: 12px; }
.form-row { display: flex; gap: 10px; }

.field {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  font-family: inherit;
}
.field--wide { padding: 12px 14px; }
.field--cp { flex: 0 0 110px; }
.field--date { color: var(--text-faint); }
.field--textarea { height: 60px; resize: vertical; }
.field--textarea-lg { height: 100px; resize: vertical; }

.pill-choice-row { display: flex; gap: 10px; }
.pill-choice {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--text-faint);
  background: white;
  cursor: pointer;
}
.pill-choice input { margin-right: 6px; }

.btn-submit {
  background: var(--blue);
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.875rem;
  margin-top: 6px;
  border: none;
  cursor: pointer;
  width: 100%;
}
.btn-submit--lg { padding: 13px; font-size: 0.90625rem; }

/* ---------- Pied de page ---------- */

.site-footer {
  border-top: 2px solid var(--ink);
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--cool);
  color: #16202Bb3;
}
.site-footer--wrap { flex-wrap: wrap; gap: 8px; }
.site-footer a { color: var(--blue); }

/* ---------- Page "Qui suis-je ?" ---------- */

.stats-simple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--border);
  padding: 1px 0;
}
.stats-simple__cell { background: white; padding: 28px 40px; text-align: center; }
.stats-simple__num { font-weight: 800; font-size: 2.75rem; }
.stats-simple__label { font-size: 0.8125rem; font-weight: 600; color: var(--text-faint); margin-top: 6px; }

.feature-list { display: flex; flex-direction: column; gap: 28px; }
.feature-item { display: flex; gap: 20px; }
.feature-item__bar { flex: 0 0 4px; background: var(--orange); border-radius: 2px; }
.feature-item__title { font-weight: 700; font-size: 0.96875rem; margin-bottom: 6px; }
.feature-item__text { font-size: 0.90625rem; line-height: 24px; color: var(--text-softer); }

/* ---------- Page contact ---------- */

.contact-grid {
  background: var(--hero-gradient);
}
.contact-grid .max-content {
  display: grid;
  grid-template-columns: minmax(0,6fr) minmax(0,6fr);
}
.contact-grid__intro { padding: 64px 40px; }
.contact-grid__form {
  padding: 64px 40px;
  border-left: 1px solid rgba(255,255,255,0.15);
  background: white;
}
.detail-group { display: flex; flex-direction: column; gap: 14px; }
.detail-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.detail-value { font-size: 1rem; font-weight: 600; color: white; }
.detail-value--phone { font-size: 1rem; font-weight: 700; color: var(--orange); }

/* ---------- Page de confirmation (merci.html) ---------- */

.confirm { padding: 100px 40px; text-align: center; }
.confirm__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 28px;
}
.confirm__title { font-weight: 800; font-size: 1.75rem; margin: 0 0 14px; }
.confirm__text {
  font-size: 0.96875rem;
  line-height: 26px;
  color: var(--text-soft);
  max-width: 44ch;
  margin: 0 auto 32px;
}
.btn-solid-link {
  background: var(--blue);
  color: white;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-block;
}
.btn-solid-link:hover { color: white; background: var(--ink); }

/* ---------- Page d'accueil (index.html) ---------- */
.hero {
  background: var(--blue);
  background: var(--hero-gradient);
}
.hero .max-content {
  display: grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
}
.hero-body { padding: 64px 40px 60px; display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { font-weight: 800; font-size: 3rem; line-height: 1.08; letter-spacing: -0.025em; margin: 0; max-width: 22ch; color: white; margin-bottom: 2.5rem; }



.btn { text-decoration: none; padding: 15px 30px; font-weight: 700; font-size: 1rem; border-radius: 999px; transition: 1s }
.btn-solid { background: var(--blue); color: white; }
.btn-solid:hover { background: var(--ink); color: white; }
.btn-out { border: 2px solid var(--orange); color: var(--ink); background: white !important;}
.btn-out:hover { background: var(--orange)!important; color: var(--ink) !important }

.hero-photo { position: relative; min-height: 420px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; filter: grayscale(1) contrast(1.06); }
.hero-photo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  pointer-events: none;
}
.handwritten {
  padding: 1rem 2rem;
  border: 1px solid var(--cool);
  border-radius: 1.25rem;
  background: rgba(255,255,255,0.09);
  font-family: 'Reenie Beanie', cursive; font-weight: 400; font-size: 1.9375rem; line-height: 1.35;
  color: white; z-index: 1;
  position: relative;
}
.handwritten:after {
  content: '';
  position: absolute;
  top: -1.3rem;
  left: 1.5rem;
  width: 35px;
  height: 31px;
  background: url("assets/quote.svg") no-repeat;
}

.stats-wrap {
    padding: 1rem;
    background: var(--cool);
}
.stats-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
/*    border-radius: 16px;
    box-shadow: 0 20px 45px #16202b14;
    overflow: hidden;
    background: rgba(255,255,255,.2);
    background: linear-gradient(180deg,white 0,rgba(255,255,255,0) 60%);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);*/
}
.stat { display: flex; align-items: center; gap: 1rem; padding: 2rem 1.5rem; }
.stat-chiffre {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex: 0 0 auto;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--blue);
}
.stat-icon svg { width: 3rem; height: 3rem; }
.stat small { display: block; font-size: 1.125rem; color: var(--blue);  }

.path-content {
  display: flex; gap: 2rem;  align-items: start;
  margin: 3rem 0;
}
.path-content .path {
  flex: 1 1 0; min-width: 0;
  margin-top: 4rem;
  aspect-ratio: 1/1;
  background: white;  box-shadow: 0 .5rem 2rem #16202b14; position: relative; border-radius: .5rem;
  padding: 1.25rem 1.25rem 0; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 3rem;
}
.path-photo { flex: 1 1 0; min-width: 0; width: 100%; height: auto; aspect-ratio: 1/1; margin-bottom: 2rem }
.path-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; display: block; }
.path .btn {
  margin: 1rem 0 -1.5rem;
  text-transform: uppercase;
}
.path h3 {
  font-weight: 700;
  font-size: 1.75rem;
  margin: 1rem 0;
}
.path-seller h3 {
  color: var(--blue);
}
.path-buyer h3 {
  color: var(--orange);
}


.sectors { padding: 64px 40px; border-top: 2px solid var(--ink); background: white; }
.sectors-editorial { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: 56px; align-items: start; }
.eyebrow--on-light .eyebrow__label { color: var(--blue); }
.sectors-editorial__intro h2 { font-weight: 800; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; }
.sectors-editorial__intro h2 a { color: inherit; }
.sectors-editorial__intro h2 a:hover { color: var(--orange); }
.sectors-editorial__intro p { font-size: 1rem; line-height: 1.6; color: rgba(22,32,43,.65); margin: 0 0 20px; max-width: 34ch; }
.sectors-editorial__zone { margin: 0; }
.sectors-list { list-style: none; margin: 0; padding: 0; }
.sectors-list li { border-bottom: 1px solid rgba(22,32,43,.1); }
.sectors-list__row {
  display: flex; align-items: center; gap: 24px; padding: 14px 4px; color: var(--ink);
}
.sectors-list li:first-child .sectors-list__row { padding-top: 2px; }
a.sectors-list__row:hover, a.sectors-list__row:focus-visible { color: var(--orange); }
.sectors-list__num { font-size: 0.875rem; font-weight: 700; color: var(--orange); width: 32px; flex: 0 0 auto; }
.sectors-list__name { font-size: 1.1875rem; font-weight: 700; }
.sectors-editorial__intro .section-title { margin: 0; }

.footer-contacts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-sep { color: #b9c7d4; }

a:focus-visible, .btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- Page "Céder mon agence" — tailles de texte harmonisées ---------- */

.page-ceder .hero-intro { font-size: 1rem; }
.page-ceder .why-item__title { font-size: 1rem; }
.page-ceder .why-item__text { font-size: 1rem; }
.page-ceder .step__title { font-size: 1rem; }
.page-ceder .step__text { font-size: 1rem; }
.page-ceder .banner-dark__title { font-size: 1.375rem; }
.page-ceder .form-card__title { font-size: 1.375rem; }
.page-ceder .field { font-size: 1rem; }

/* ---------- Page "Reprendre une agence" — tailles de texte harmonisées ---------- */

.page-racheter .hero-intro { font-size: 1rem; }
.page-racheter .stack-item__title { font-size: 1rem; }
.page-racheter .stack-item__text { font-size: 1rem; }
.page-racheter .step__title { font-size: 1rem; }
.page-racheter .step__text { font-size: 1rem; }
.page-racheter .banner-dark__title { font-size: 1.375rem; }
.page-racheter .form-card__title { font-size: 1.375rem; }
.page-racheter .field { font-size: 1rem; }

/* ---------- Page "Qui suis-je ?" — tailles de texte harmonisées ---------- */

.page-qui-suis-je .hero-title { font-size: 2.125rem; }
.page-qui-suis-je .feature-item__title { font-size: 1rem; }
.page-qui-suis-je .feature-item__text { font-size: 1rem; }

/* ---------- Page "Secteurs & zone" — tailles de texte harmonisées ---------- */

.page-secteurs .hero-title { font-size: 2.125rem; }
.page-secteurs .hero-intro { font-size: 1rem; }
.page-secteurs .sectors-list__name { font-size: 1rem; }
.page-secteurs .banner-dark__title { font-size: 1.375rem; }

/* ---------- Page "Contact" — tailles de texte harmonisées ---------- */

.page-contact .hero-title { font-size: 2.125rem; }
.page-contact .hero-intro { font-size: 1rem; }
.page-contact .field { font-size: 1rem; }

/* ---------- Media queries ---------- */

@media (max-width: 991px) {
  .hero .max-content, .hero-split .max-content, .contact-grid .max-content, .closing-grid .max-content, .why-grid, .why-when-grid, .sectors-editorial { grid-template-columns: 1fr !important; }
  .steps-grid--4, .steps-grid--5 { grid-template-columns: 1fr; }
  .stats-simple { grid-template-columns: 1fr; }
  .stats-card { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid #eef1f4; }
  .stat:last-child { border-bottom: none; }
  .hero-photo { border-top: 1px solid rgba(255,255,255,0.15); min-height: 340px; }
  .hero-split__photo { min-height: 340px; }
  .contact-grid__form, .closing-grid__form { border-left: 0; border-top: 1px solid rgba(255,255,255,0.15); }
  .handwritten { font-size: 1.375rem; left: 20px; right: 20px; bottom: 16px; }
  .stats-wrap, .paths, .sectors, .hero-flat, .hero-body, .hero-split__text, .contact-grid__intro, .contact-grid__form, .closing-grid__text, .closing-grid__form { padding: 40px 24px; }
  .hero h1 { font-size: 2.375rem; }
  .site-header, .site-footer { padding: 16px 24px; }

  /* Les deux blocs "vous souhaitez céder / acquérir" passaient en colonnes
     écrasées au lieu de s'empiler : .path-content restait en ligne (flex row)
     à toutes les tailles d'écran. */
  .path-content { flex-direction: column; gap: 0; }
  .path-content .path { margin-top: 2rem; }

  /* Formulaires : les paires de champs (prénom/nom, code postal/ville,
     siren/date) passent en colonne sur petit écran pour éviter tout
     tassement ou débordement. */
  .form-row { flex-direction: column; }
  .field--cp { flex: 1; }
}


     /* =========================================
        BOUTON MENU MOBILE
     ========================================= */

   .menu-toggle {
     display: none;

     width: 44px;
     height: 44px;

     padding: 8px;

     border: 0;
     background: transparent;

     cursor: pointer;
   }

.menu-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  margin: 6px auto;
  background: var(--cool);
  transition:
          transform 0.3s ease,
          opacity 0.3s ease;
}


/* =========================================
   OFFCANVAS
========================================= */

.offcanvas-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  padding: 30px;
  background: var(--ink);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

/* Menu ouvert */
body.menu-open .offcanvas-menu {
  transform: translateX(0);
}


/* =========================================
   HEADER DU OFFCANVAS
========================================= */

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60px;
}


/* =========================================
   BOUTON FERMER
========================================= */
.menu-close {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 2px;
  background: white;
}

.menu-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* =========================================
   MENU MOBILE
========================================= */

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.mobile-nav-link {
  display: block;
  color: white;
  transition: 0.25s ease;
}



/* =========================================
   OVERLAY
========================================= */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
          opacity 0.4s ease,
          visibility 0.4s ease;
}

body.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
}


/* =========================================
   ANIMATION DU HAMBURGER
========================================= */

body.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

body.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

body.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

  .nav-links {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

}


@media (min-width: 992px) {

  .offcanvas-menu,
  .menu-overlay {
    display: none;
  }

}