/* =========================================================================
   MENU LATÉRAL — Webcraft · 23/10/2026
   Ordre voulu par Raphaël : les expertises d'abord (agence SEO avant tout, puis l'IA, la création,
   le marketing, le Studio), l'agence ensuite. Le logo mène à l'accueil (pas d'entrée « Home »).
   Règles (skill bonnes-pratiques-design) : un seul bord gauche, icônes « + » sur un seul bord droit,
   grille de 8 px, 2 tailles de texte, coordonnées et bouton réunis dans une carte (région commune).
   ========================================================================= */

aside.rail .menu{
  display:flex;flex-direction:column;
  margin-top:40px;
  font-family:"Instrument Sans",system-ui,sans-serif;
}

/* Intitulés de groupe : petites capitales espacées (5 à 12 % d'interlettrage). */
aside.rail .menu__titre{
  margin:0 0 8px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(138,154,178,.9);
}
aside.rail .menu__titre:not(:first-child){margin-top:32px}

/* Entrées principales : même taille, même graisse, même rythme ; le « + » au bord droit. */
aside.rail .menu__entree{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;box-sizing:border-box;
  padding:8px 0;
  font-size:15px;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;
  color:#DCE5F2;text-decoration:none;
  cursor:pointer;list-style:none;
  transition:color .2s ease-out;
}
aside.rail .menu__entree:hover,
aside.rail .menu__entree:focus-visible,
aside.rail details[open] > .menu__entree{color:#FFFFFF}
aside.rail .menu__entree--doux{color:rgba(220,229,242,.72)}

aside.rail summary.menu__entree::-webkit-details-marker{display:none}
aside.rail summary.menu__entree::marker{content:""}
aside.rail summary.menu__entree::after{
  content:"+";flex:none;margin-left:auto;
  width:16px;text-align:right;
  font-size:16px;font-weight:400;line-height:1;
  color:rgba(138,154,178,.9);
  transition:transform .25s ease-out,color .2s ease-out;
}
aside.rail details[open] > summary.menu__entree::after{transform:rotate(45deg);color:#FFFFFF}

/* Badge « Nouveau » : discret, aligné sur la hauteur du texte. */
aside.rail .menu__nouveau{
  margin-left:auto;
  padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#0A0B0E;background:#DCE5F2;
}

/* Sous-menu : un filet à gauche, texte en retrait de 16 px, plus petit et plus doux. */
aside.rail .menu__sous{
  display:flex;flex-direction:column;
  margin:0 0 8px;padding-left:16px;
  border-left:1px solid rgba(138,154,178,.22);
}
aside.rail .menu__sous a{
  padding:6px 0;
  font-size:13.5px;line-height:1.4;
  color:rgba(220,229,242,.64);text-decoration:none;
  transition:color .2s ease-out;
}
aside.rail .menu__sous a:hover,
aside.rail .menu__sous a:focus-visible{color:#FFFFFF}

/* Carte de contact : adresse, téléphone et bouton dans une même région, mêmes bords intérieurs. */
aside.rail .menu__carte{
  margin-top:auto;
  font-family:"Instrument Sans",system-ui,sans-serif;
  display:flex;flex-direction:column;gap:8px;
  padding:16px;
  border:1px solid rgba(220,229,242,.10);border-radius:16px;
  background:rgba(220,229,242,.035);
}
aside.rail .menu__adresse{
  margin:0;
  font-size:12.5px;line-height:1.5;color:rgba(138,154,178,.95);
}
aside.rail .menu__tel{
  font-size:14px;font-weight:600;letter-spacing:.02em;
  color:#F7FAFF;text-decoration:none;
}
aside.rail .menu__tel:hover{text-decoration:underline;text-underline-offset:3px}
aside.rail .menu__cta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:44px;margin-top:8px;padding:0 16px;box-sizing:border-box;
  font-family:"Instrument Sans",system-ui,sans-serif;
  border-radius:999px;
  background:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 55%,#AEBBCE 100%);
  color:#0A0B0E;text-decoration:none;
  font-size:13.5px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .2s ease-out,filter .2s ease-out;
}
aside.rail .menu__cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
aside.rail .menu__cta span{color:#0A0B0E!important;-webkit-text-fill-color:#0A0B0E!important;transition:transform .2s ease-out}
aside.rail .menu__cta:hover span{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  aside.rail .menu__entree,aside.rail .menu__sous a,aside.rail .menu__cta,aside.rail .menu__cta span,
  aside.rail summary.menu__entree::after{transition:none}
}
/* Groupe avec badge (Expertise IA) : le badge se cale à droite, juste avant le « + ». */
aside.rail summary.menu__entree .menu__nouveau{margin-left:auto}
aside.rail summary.menu__entree:has(.menu__nouveau)::after{margin-left:12px}
/* Carte de contact (24/10, Raphaël : « pas aligné ») : le texte de la carte s'aligne sur le bord gauche du menu
   et le bouton sur la colonne des « + » ; c'est le fond de la carte qui déborde de 17 px (16 de marge + 1 de bord). */
aside.rail .menu__carte{margin-inline:-17px}