/* =========================================================
   Contessa Med — méga-menus « Vos besoins » et « Techniques »
   Dépend des variables et des boutons de style.css.
   ========================================================= */

.mega { position: static; display: flex; align-items: center; }
.mega-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 400 .9rem var(--f-body); color: var(--navy); white-space: nowrap; position: relative;
}
.mega-toggle::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transition: transform .3s;
}
.mega-caret { width: 12px; height: 12px; fill: none; stroke: var(--gold-dark); stroke-width: 1.5; transition: transform .25s; }
.mega.open .mega-caret { transform: rotate(180deg); }
.mega-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

/* ---------- Panneau (bureau) ---------- */
.mega-panel {
  position: absolute; top: 100%; inset-inline: 0; margin-inline: auto; z-index: 70;
  width: calc(100% - 48px); max-width: 1180px;
  background: linear-gradient(180deg, #fff 0%, #FFFCF7 100%);
  border: 1px solid rgba(196, 154, 69, .22); border-top: 0;
  border-radius: 0 0 20px 20px; box-shadow: 0 40px 80px -36px rgba(17, 27, 58, .45);
  overflow: hidden auto; max-height: calc(100vh - 92px); overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
/* pont invisible sous le bouton jusqu au panneau, pour garder le survol */
.mega-toggle::before { content: ""; position: absolute; top: 100%; inset-inline: -16px; height: 34px; }
.mega.open .mega-panel { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1101px) {
  .mega:hover .mega-panel { opacity: 1; visibility: visible; transform: none; }
  .mega:hover .mega-toggle::after, .mega.open .mega-toggle::after { transform: scaleX(1); }
}
.mega-panel:empty { display: none; }

.mega-panel ul { list-style: none; margin: 0; padding: 0; }
.mega-panel a { color: var(--text); }
.main-nav .mega-panel a { padding: 0; font-size: inherit; white-space: normal; }
.main-nav .mega-panel a::after { display: none; }

.mega-title {
  display: block; margin: 0 0 14px; font: 600 .78rem var(--f-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy-deep); line-height: 1.45;
}
:lang(ar) .mega-title, :lang(zh) .mega-title { letter-spacing: .02em; font-size: .92rem; }

/* « Vos besoins » : 4 colonnes avec image */
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-col { padding: 28px 28px 30px; border-inline-start: 1px solid rgba(196, 154, 69, .16); }
.mega-col:first-child { border-inline-start: 0; }
.mega-media {
  position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 22px; overflow: hidden;
  border-radius: 12px; background: var(--cream);
}
.mega-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mega-col:hover .mega-media img { transform: scale(1.04); }
.mega-ai {
  position: absolute; inset-inline-start: 8px; bottom: 8px; max-width: calc(100% - 16px);
  font-size: .66rem; line-height: 1.35; color: var(--ivory); background: rgba(17, 27, 58, .7); padding: 2px 8px; border-radius: 999px;
}
.mega-media-ph { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #fff, var(--ivory) 45%, var(--cream)); }
.mega-media-ph span { font-family: var(--f-script); font-size: 3.4rem; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .2em; }
.mega-col li + li { margin-top: 12px; }
.mega-col li a { font-size: .98rem; line-height: 1.45; display: inline-block; transition: color .2s; }
.mega-col li a:hover { color: var(--gold-dark); }

/* « Techniques » : listes en colonnes équilibrées */
.mega-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 26px 0 8px; }
.mega-tcol { padding: 0 26px; border-inline-start: 1px solid rgba(196, 154, 69, .16); }
.mega-tcol:first-child { border-inline-start: 0; }
.mega-block { padding-bottom: 20px; }
.mega-dot { display: flex; align-items: baseline; gap: 10px; transition: color .2s; }
.mega-dot::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: .7; transform: translateY(-1px); }
a.mega-title:hover { color: var(--gold-dark); }
.mega-block li { padding-inline-start: 16px; position: relative; }
.mega-block li + li { margin-top: 3px; }
.mega-block li::before { content: "›"; position: absolute; inset-inline-start: 2px; top: 0; color: var(--gold); font-size: .95rem; line-height: 1.45; }
[dir="rtl"] .mega-block li::before { content: "‹"; }
.mega-block li a { font-size: .9rem; line-height: 1.4; transition: color .2s; }
.mega-flow .mega-title { margin-bottom: 9px; }
.mega-block li a:hover { color: var(--gold-dark); }

/* Pied du panneau */
.mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 30px; background: var(--cream); border-top: 1px solid rgba(196, 154, 69, .25);
}
.mega-tagline { font-family: var(--f-display); font-size: 1.05rem; color: var(--muted); }
.mega-foot-actions { display: flex; align-items: center; gap: 18px; }
.mega-all { font-size: .82rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark) !important; }
.mega-all::after { content: " →"; }
[dir="rtl"] .mega-all::after { content: " ←"; }
:lang(ar) .mega-all, :lang(zh) .mega-all { letter-spacing: 0; }

@media (min-width: 1101px) and (max-width: 1240px) {
  .mega-col { padding: 22px 20px 24px; }
  .mega-tcol { padding: 0 20px; }
}

/* ---------- Menu burger (≤ 1100 px) : accordéon ---------- */
@media (max-width: 1100px) {
  .mega { display: block; border-bottom: 1px solid rgba(196, 154, 69, .18); }
  .mega-toggle { width: 100%; justify-content: space-between; padding: 14px 0; font-size: 1.05rem; }
  .mega-toggle::after { display: none; }
  .mega-panel {
    position: static; width: auto; max-width: none; margin: 0; transform: none; box-shadow: none;
    border: 0; border-radius: 0; background: transparent; overflow: visible;
    display: none; opacity: 1; visibility: visible;
  }
  .mega-toggle::before { display: none; }
  .mega.open .mega-panel { display: block; }
  .mega-grid { grid-template-columns: 1fr; }
  .mega-col { padding: 4px 0 14px; border: 0; }
  .mega-media { display: none; }
  .mega-title { margin-bottom: 8px; font-size: .74rem; color: var(--gold-dark); }
  .mega-col li + li { margin-top: 0; }
  .main-nav .mega-col li a, .main-nav .mega-flow a { display: block; padding: 7px 0; border: 0; font-size: .95rem; }
  .mega-flow { grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 0 0 10px; }
  .mega-tcol { display: contents; }
  .mega-block { padding: 0; }
  .mega-block ul { display: none; } /* sur mobile : les catégories seulement */
  .main-nav .mega-flow a.mega-title { margin: 0; font: 400 .95rem var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text); }
  .mega-foot { padding: 6px 0 14px; background: transparent; border: 0; }
  .mega-tagline { display: none; }
  .mega-foot-actions { width: 100%; justify-content: space-between; }
  .main-nav .mega-foot a { border: 0; padding: 0; font-size: .82rem; }
  .main-nav .mega-foot .btn { padding: .65em 1.3em; }
}
@media (max-width: 420px) {
  .mega-flow { grid-template-columns: 1fr; }
}