/* =========================================================================
   V3 — base responsive UNIQUE, derivee du canvas DESKTOP actuel.
   Desktop : balisage + styles inline d'origine => rendu IDENTIQUE.
   Mobile (<768px) : overrides ciblees (data-screen-label + selecteurs
   d'attributs), sans duplication de contenu. Tout en !important car les
   styles d'origine sont inline.
   ========================================================================= */

img{max-width:100%}
.v3-page{max-width:1440px; margin:0 auto; width:100%}
.v3-burger{display:none}

/* ============================ MOBILE (<768px) ============================ */
@media (max-width:767px){

  /* ----------------------- En-tete : nav -> burger ----------------------- */
  .v3-header{padding:14px 20px !important}
  .v3-nav-desktop{display:none !important}
  .v3-header > a img{height:40px !important}
  .v3-burger{display:block; position:relative; flex:0 0 auto}
  .v3-burger > summary{display:flex; flex-direction:column; gap:5px; padding:8px}
  .v3-burger > summary > span{width:24px; height:1.5px; background:#1c2940; display:block; transition:transform .25s ease, opacity .2s ease}
  .v3-burger[open] > summary > span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .v3-burger[open] > summary > span:nth-child(2){opacity:0}
  .v3-burger[open] > summary > span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .v3-burger-menu{position:absolute; top:calc(100% + 10px); right:0; width:244px; background:#fcfbf7; border:1px solid rgba(28,41,64,.12); border-radius:6px; box-shadow:0 26px 54px -22px rgba(20,30,50,.45); padding:8px 0; z-index:60}
  .v3-burger-menu > a{display:block; padding:12px 22px; font:500 16px Newsreader,serif; color:#1c2940; text-decoration:none}
  .v3-sub > summary{display:flex; align-items:center; justify-content:space-between; padding:12px 22px; font:500 16px Newsreader,serif; color:#1c2940; border-top:1px solid rgba(28,41,64,.08); border-bottom:1px solid rgba(28,41,64,.08)}
  .v3-sub > div > a{display:block; padding:8px 22px 8px 34px; font:400 14.5px Libre Franklin; color:#6a6458; text-decoration:none}
  .v3-cta{margin:10px 22px 12px !important; text-align:center; color:#f5f3ec !important; background:#1c2940; padding:13px !important; border-radius:1px}

  /* --------------------------- Regles generiques ------------------------- */
  /* padding des sections NON-flex + footer -> compact */
  .v3-page > section:not([style*="display:flex"]){padding:48px 22px !important}
  .v3-page > footer{padding:48px 22px !important}
  /* grilles (cartes, methode, valeurs, timeline, formulaire, contact) -> 1 colonne */
  .v3-page [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* titres : h1 toujours grand -> 33px ; gros h2 de section (38px) -> 28px */
  .v3-page h1{font-size:33px !important; line-height:1.12 !important}
  .v3-page h2[style*="38px"]{font-size:28px !important; line-height:1.18 !important}
  /* sections flex 2 colonnes (heros 2-col + bloc sombre Accueil) -> empilees */
  .v3-page > section[style*="display:flex"]{flex-direction:column !important; min-height:0 !important}
  .v3-page > section[style*="display:flex"] > div{flex:none !important; width:100% !important}
  /* footer -> colonnes empilees */
  .v3-page > footer > div:first-child{flex-direction:column !important; gap:28px !important}

  /* ------------------- Heros 2 colonnes (Accueil, Parcours) -------------- */
  section[data-screen-label="Hero"][style*="display:flex"] > div:first-of-type{padding:40px 22px 30px !important}
  section[data-screen-label="Hero"][style*="display:flex"] p{font-size:15.5px !important; margin-top:22px !important}
  section[data-screen-label="Hero"][style*="display:flex"] > div:last-of-type{padding:0 22px 40px !important}
  section[data-screen-label="Hero"][style*="display:flex"] > div:last-of-type > div{height:auto !important; aspect-ratio:4/5}
  /* cadre dore decale -> masque (evite tout debordement) */
  section[data-screen-label="Hero"][style*="display:flex"] > div:last-of-type > div > div:last-child{display:none !important}

  /* ---------------- Bloc sombre Accueil "Votre avocat" ------------------- */
  section[data-screen-label="Votre avocat en droit des affaires à Lyon"] > div:nth-of-type(1){padding:44px 22px !important; order:2}
  section[data-screen-label="Votre avocat en droit des affaires à Lyon"] > div:nth-of-type(2){height:230px !important; order:1}
  section[data-screen-label="Votre avocat en droit des affaires à Lyon"] p{text-align:left !important}
  section[data-screen-label="Votre avocat en droit des affaires à Lyon"] > div:nth-of-type(2) > div:last-child{background:linear-gradient(to bottom, rgba(19,29,49,0) 58%, #131d31 100%) !important}

  /* ---------- Domaine "Champs d'intervention" : lignes titre|texte ------- */
  section[data-screen-label="Champs d'intervention"] div[style*="display:flex"]{flex-direction:column !important; gap:14px !important; padding-top:28px !important; padding-bottom:28px !important}

  /* ----------------------- Contact : formulaire d'abord ------------------ */
  section[data-screen-label="Coordonnées et formulaire"] > div > div:last-child{order:-1}
  section[data-screen-label="Coordonnées et formulaire"] #formulaire{padding:30px 22px !important}
}