/* Menu principal (12/10) : Expertises ▾ (quatre offres + page de choix), Réalisations, Le Studio.
   Fichier à part de main.css (où vivent la barre noire, le burger et le premier jet du déroulant) : il complète ces règles.
   Seuil du burger : 1080 px (main.css et nav.js). */

/* Lien de pied de liste : « Quel site choisir ? Comparer les offres » vers /expertises/ */
.lw-nav .lw-nowrap { white-space: nowrap; } /* .lw-nowrap vit dans expertises.css, absent des autres pages */
.lw-nav__sub-pied a { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--lw-fw-semibold); }
.lw-nav__sub-pied svg { width: 24px; height: 24px; flex: none; transition: transform .2s var(--lw-ease-out); }
.lw-nav__sub-pied svg [fill] { fill: currentColor; } /* la flèche prend la couleur du texte (noire au déroulant, lime en mobile) */
.lw-nav__sub-pied a:hover svg { transform: translateX(3px); }

/* ---------- Ordinateur : la carte déroulante ---------- */
@media (min-width: 1080px) {
  .lw-nav__sub { width: 372px; } /* 13/10 : icônes + « Hébergement, maintenance, évolutions » sur une ligne, flèche du pied entière */
  /* 13/10 (Pierre, variante B) : nom en texte + point, bénéfice dessous, un seul alignement.
     Les pastilles de largeur variable laissaient un vide à droite et se lisaient comme des badges, pas comme un menu. */
  .lw-nav__list .lw-nav__sub-item a { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--lw-radius-inner); background: none; }
  .lw-nav__list .lw-nav__sub-item a:hover, .lw-nav__list .lw-nav__sub-item.current-menu-item > a { background: var(--lw-off-white); }
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-pill { display: block; padding: 0; border: 0; background: none; box-shadow: none; color: var(--lw-black); font-size: 1rem; font-weight: var(--lw-fw-bold); line-height: 1.2; } /* block et pas inline-flex : le gap s'insérait entre « Site » et le span nowrap « e-commerce » */
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-pill::before { display: inline-block; width: 10px; height: 10px; margin-right: 9px; vertical-align: .05em; box-sizing: border-box; }
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-pill::before { display: none; } /* 13/10 (Maxence, Pierre) : quatre points identiques ne distinguent rien, retirés */
  .lw-nav__list .lw-nav__sub-desc { font-size: 0.875rem; line-height: 1.3; color: #666; }
  .lw-nav__sub-pied { margin-top: 6px; padding-top: 6px; border-top: 1px solid #e3e3e3; }
  .lw-nav__list .lw-nav__sub-pied a { flex-direction: row; padding: 10px 12px; color: var(--lw-black); font-size: 0.9375rem; line-height: 1.3; white-space: nowrap; }
}

/* ---------- Mobile et tablette : panneau plein écran, les offres en tuiles à leur surface ---------- */
@media (max-width: 1079px) {
  .lw-nav.is-open { min-height: calc(100dvh - var(--lw-header-h)); padding-top: 24px; }

  /* « Expertises » devient l'intitulé du groupe (il reste un lien vers la page de choix) */
  .lw-nav__list .lw-nav__has-sub { margin-bottom: 18px; }
  .lw-nav__list .lw-nav__has-sub > a { display: inline-block; padding: 0 0 12px; border-bottom: 0; color: #9a9a9a; font-size: 0.8125rem; font-weight: var(--lw-fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
  .lw-nav__list .lw-nav__has-sub.current-menu-item > a { color: var(--lw-lime); }

  .lw-nav__sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
  .lw-nav__list .lw-nav__sub-item a {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; height: 100%; min-height: 96px;
    padding: 14px 12px; border: 0; border-radius: var(--lw-radius); white-space: normal; color: var(--lw-black); background: var(--lw-white);
  }
  .lw-nav__list .lw-nav__sub-item--dark a { background: #1a1a1a; color: var(--lw-white); box-shadow: inset 0 0 0 1.5px #3a3a3a; }
  .lw-nav__list .lw-nav__sub-item--lime a { background: var(--lw-lime); }
  .lw-nav__list .lw-nav__sub-item--grey a { background: var(--lw-off-white); }
  /* Dans une tuile, la pastille devient un titre (la tuile porte déjà la surface du produit) ; le point reste. */
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-pill { padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font-size: 1rem; font-weight: var(--lw-fw-bold); line-height: 1.2; letter-spacing: -0.01em; white-space: normal; }
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-pill { display: block; } /* en flex, le titre ne se coupait pas entre « Site » et « e-commerce » */
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-pill::before { display: inline-block; margin-right: 7px; vertical-align: .12em; }
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-desc { display: block; font-size: 0.8125rem; line-height: 1.3; opacity: .72; }
  .lw-nav__list .lw-nav__sub-item.current-menu-item a { box-shadow: 0 0 0 3px var(--lw-lime); }
  .lw-nav__list .lw-nav__sub-item--lime.current-menu-item a { box-shadow: 0 0 0 3px var(--lw-white); }
  .lw-nav__list .lw-nav__sub-pied { grid-column: 1 / -1; }
  .lw-nav__list .lw-nav__sub-pied a { padding: 6px 0 0; border: 0; color: var(--lw-lime); font-size: 1rem; }

  /* Réalisations, Le Studio : en grand */
  .lw-nav__list > li:not(.lw-nav__has-sub) > a { padding: 14px 0; font-size: 1.75rem; font-weight: var(--lw-fw-bold); letter-spacing: -0.02em; line-height: 1.15; }
  .lw-nav__list > li.lw-nav__has-sub + li > a { border-top: 1px solid #333; }

  /* Entrée en cascade à l'ouverture */
  .lw-nav.is-open .lw-nav__sub-item, .lw-nav.is-open .lw-nav__sub-pied, .lw-nav.is-open .lw-nav__list > li:not(.lw-nav__has-sub), .lw-nav.is-open .lw-nav__extra { animation: lw-nav-in .32s var(--lw-ease-out) both; }
  .lw-nav.is-open .lw-nav__sub-item:nth-child(2) { animation-delay: .04s; }
  .lw-nav.is-open .lw-nav__sub-item:nth-child(3) { animation-delay: .08s; }
  .lw-nav.is-open .lw-nav__sub-item:nth-child(4) { animation-delay: .12s; }
  .lw-nav.is-open .lw-nav__sub-pied { animation-delay: .16s; }
  .lw-nav.is-open .lw-nav__list > li:nth-child(2) { animation-delay: .2s; }
  .lw-nav.is-open .lw-nav__list > li:nth-child(3) { animation-delay: .24s; }
  .lw-nav.is-open .lw-nav__extra { animation-delay: .28s; }
}
@keyframes lw-nav-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lw-nav.is-open * { animation: none !important; } }

/* 13/10 (Maxence) : tuiles du menu mobile toutes blanches, sans point (plus de couleur par produit) */
@media (max-width: 1079px) {
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-pill::before { display: none; }
}

/* Icônes des offres (13/10, Pierre : à la place des points) : pictogramme dans un carré, nom et bénéfice à côté */
.lw-nav__sub-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--lw-radius-inner); background: var(--lw-white); color: var(--lw-black); box-shadow: inset 0 0 0 1.5px #e3e3e3; transition: box-shadow .2s var(--lw-ease-out); }
@media (min-width: 1080px) {
  .lw-nav__list .lw-nav__sub-item a { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; }
  .lw-nav__sub-icon { grid-row: 1 / span 2; }
  .lw-nav__list .lw-nav__sub-item .lw-nav__sub-pill, .lw-nav__list .lw-nav__sub-item .lw-nav__sub-desc { grid-column: 2; }
  .lw-nav__list .lw-nav__sub-item a:hover .lw-nav__sub-icon, .lw-nav__list .lw-nav__sub-item.current-menu-item .lw-nav__sub-icon { box-shadow: inset 0 0 0 1.5px var(--lw-black); }
}
@media (max-width: 1079px) {
  .lw-nav__sub-icon { width: 34px; height: 34px; }
  .lw-nav__sub-icon svg { width: 20px; height: 20px; }
}