/* =====================================================================
   Largo Avocats — feuille de styles principale
   Organisation : 1) Tokens · 2) Base · 3) Layout · 4) En-tête / nav
   5) Pied de page · 6) Composants · 7) Responsive
   ===================================================================== */

/* 1) ---------- Design tokens ---------------------------------------- */
:root {
  /* Couleurs */
  --navy: #16324f;
  --navy-dark: #0f2338;
  --ink: #1b1b1b;
  --text: #444444;
  --text-soft: #555555;
  --muted: #8a8a86;
  --line: #eceae6;
  --field-border: #d9d6d0;
  --bg: #ffffff;

  /* Typographie */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Mulish', system-ui, -apple-system, sans-serif;

  /* Rythme & largeurs (fluides) */
  --container: 1200px;
  --container-narrow: 860px;
  --pad-x: clamp(20px, 5vw, 32px);
  --section-y: clamp(56px, 8vw, 90px);
  --gap: clamp(32px, 6vw, 72px);
  --gap-cards: clamp(28px, 4vw, 48px);
  --header-h: clamp(84px, 12vw, 118px);

  /* Point de bascule de la navigation */
  --bp-nav: 900px;
}

/* 2) ---------- Base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer : le pied reste collé en bas même si le contenu est court. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Le contenu principal occupe l'espace restant et repousse le footer en bas. */
main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); }
a:hover { color: var(--navy-dark); }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); line-height: 1.3; }

.navy { color: var(--navy); }

/* 3) ---------- Layout ---------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container.narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }

/* Grilles réutilisables — toutes se replient sur une colonne en dessous
   de 820px (voir §7). align-items:start pour aligner texte et image en haut. */
.grid-home,
.grid-detail,
.grid-contact {
  display: grid;
  gap: var(--gap);
  align-items: start;
}
.grid-home    { grid-template-columns: 1.05fr 0.95fr; }
.grid-detail  { grid-template-columns: 1.2fr 0.8fr; }
.grid-detail--no-media { grid-template-columns: 1fr; } /* une seule colonne si pas d'image */
.grid-contact { grid-template-columns: 0.9fr 1.1fr; }

/* Grille de cartes : auto-ajustée, se réorganise seule sans breakpoint */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap-cards);
}

/* Grille fixée à 3 colonnes max (ex. Compétences : 2 lignes de 3), responsive */
.grid-cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}
@media (max-width: 780px) { .grid-cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-cards-3 { grid-template-columns: 1fr; } }

.media { width: 100%; height: auto; display: block; }

/* 4) ---------- En-tête & navigation -------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #f4f2f0 url('../../images/marbre.jpg') center / cover;
}
.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--pad-x);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: clamp(52px, 8vw, 76px); width: auto; }

/* Nav en CSS pur (astuce checkbox) : la case masquée pilote l'état du menu.
   Sur grand écran, le bouton est caché et le panneau est toujours visible ;
   sur mobile, le bouton (label) ouvre/ferme le panneau via :checked (§7). */
.nav { position: static; display: flex; align-items: center; }

/* Case à cocher masquée mais focusable au clavier */
.nav-checkbox {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
}

.nav-toggle {
  display: none;              /* visible seulement en mode mobile (§7) */
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.nav-checkbox:focus-visible + .nav-toggle { outline: 2px solid var(--navy); outline-offset: 2px; }

.nav-burger, .nav-burger::before, .nav-burger::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  transition: transform .25s ease, background .25s ease;
}
.nav-burger { position: relative; }
.nav-burger::before { position: absolute; left: 0; top: -7px; }
.nav-burger::after  { position: absolute; left: 0; top: 7px; }
.nav-checkbox:checked ~ .nav-toggle .nav-burger { background: transparent; }
.nav-checkbox:checked ~ .nav-toggle .nav-burger::before { transform: translateY(7px) rotate(45deg); }
.nav-checkbox:checked ~ .nav-toggle .nav-burger::after  { transform: translateY(-7px) rotate(-45deg); }

.nav-panel { display: block; }   /* toujours visible sur grand écran */

.nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.nav-link:hover, .nav-active {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 9px;
  text-decoration-thickness: 1px;
}

/* Sous-menus : survol sur grand écran */
.has-submenu { position: relative; }
.has-submenu > .nav-link { display: inline-block; padding: 46px 0; }
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 250px;
  padding: 10px 0;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(22,50,79,0.10);
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu { display: flex; }
.submenu a {
  font-family: var(--sans);
  font-size: 14px;
  color: #444;
  text-decoration: none;
  padding: 9px 22px;
}
.submenu a:hover { color: var(--navy); background: #f6f6f4; }

/* 5) ---------- Pied de page ----------------------------------------- */
.site-footer { background: var(--navy-dark); color: #c9d3dd; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  padding-block: 64px 48px;
}
.footer-brand { font-family: var(--serif); font-size: 24px; color: #fff; margin-bottom: 16px; }
.footer-about { font-size: 14px; line-height: 1.8; margin: 0; max-width: 340px; }
.footer-heading {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-link { font-size: 14px; color: #c9d3dd; text-decoration: none; }
.footer-link:hover { color: #fff; }
.footer-contact { font-size: 14px; line-height: 2; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.footer-bottom .container { padding-block: 20px; font-size: 12px; color: #8fa0b0; }

/* 6) ---------- Composants de contenu -------------------------------- */

/* Titres */
.page-title    { font-weight: 500; font-size: clamp(28px, 5vw, 36px); margin: 0 0 36px; }
.page-title--center { text-align: center; } /* nom d'avocat centré (comme l'original) */
.article-title { font-weight: 500; font-size: clamp(26px, 4.5vw, 32px); line-height: 1.4; margin: 0 0 36px; }
.news-title    { font-weight: 500; font-size: clamp(22px, 3.2vw, 26px); line-height: 1.4; margin: 0 0 16px; }
.subheading    { font-weight: 600; font-size: 20px; margin: 32px 0 12px; }

/* Corps de texte — justifié comme sur le site original */
.body-text { font-size: 15.5px; line-height: 1.9; color: var(--text); margin: 0 0 20px; text-align: justify; hyphens: auto; }
.body-list {
  font-size: 15.5px; line-height: 1.9; color: var(--text);
  margin: 0 0 20px; padding-left: 22px;
  list-style: disc; /* vraies puces (pas de flex, qui masquerait les marqueurs) */
}
.body-list li { margin-bottom: 10px; }
.body-list li:last-child { margin-bottom: 0; }
/* Le gras dans le texte riche reprend le bleu marine (fidèle à l'origine). */
.body-text strong, .body-list strong { color: var(--navy); }

/* Accueil */
.home-intro {
  font-size: 16px; line-height: 1.9; color: var(--text);
  text-align: justify; display: flex; flex-direction: column; gap: 22px;
}
.home-intro p { margin: 0; }
/* Le texte d'accueil est rendu depuis le Markdown (paragraphes .body-text) :
   on conserve la taille et l'absence de marge propres à l'accueil. */
.home-intro .body-text { font-size: 16px; margin: 0; }

/* Cartes équipe */
.team-card {
  text-decoration: none;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.portrait { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
/* Emplacement neutre quand aucune image n'est fournie */
.portrait--empty { background: #e8e6e2; }

/* Champ anti-spam (honeypot) — masqué aux humains, sans style inline (CSP) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.card-role { font-style: italic; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.card-name { font-family: var(--serif); font-size: 22px; color: var(--navy); }
.card { transition: opacity .2s ease; }
.card:hover { opacity: 0.92; }

/* Cartes compétences (image + libellé en surimpression) */
.expertise-card { text-decoration: none; position: relative; display: block; }
.expertise-overlay {
  position: absolute; inset: 0;
  background: rgba(15,35,56,0.28);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.expertise-label {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 3vw, 26px); color: #fff; text-align: center;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}

/* Fiche avocat */
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 64px; align-items: start; margin-bottom: 56px;
}
.profile-aside { display: flex; flex-direction: column; gap: 20px; }
.profile-contact { font-style: italic; font-size: 14.5px; line-height: 2; color: #666; }

/* Actualités */
.news-list { display: flex; flex-direction: column; gap: 64px; }
.news-item { border-bottom: 1px solid var(--line); padding-bottom: 56px; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.news-link { text-decoration: none; color: var(--navy); }
.news-excerpt { font-size: 15px; line-height: 1.85; color: var(--text-soft); margin: 0 0 20px; }
.link-more {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy);
  text-decoration: none; border-bottom: 1px solid var(--navy); padding-bottom: 3px;
}

/* Contact */
.contact-col { display: flex; flex-direction: column; gap: 40px; }
.contact-info { font-size: 16px; line-height: 2; color: var(--text); }
.contact-brand { font-family: var(--serif); font-size: 24px; color: var(--navy); margin-bottom: 14px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.field {
  font-family: var(--sans); font-size: 15px;
  padding: 14px 16px; border: 1px solid var(--field-border);
  background: #fff; color: #333; outline: none;
}
.field:focus { border-color: var(--navy); }
textarea.field { resize: vertical; }
.btn {
  align-self: flex-start;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--navy); border: none;
  padding: 16px 32px; cursor: pointer;
}
.btn:hover { background: var(--navy-dark); }
.alert { font-size: 14px; padding: 12px 16px; }
.alert--ok  { color: #2e6b3f; background: #eef5ef; border: 1px solid #cfe3d3; }
.alert--err { color: #8a3b3b; background: #faf0f0; border: 1px solid #e3cfcf; }

/* 7) ---------- Responsive ------------------------------------------ */

/* Pied de page : 3 colonnes → 1 colonne sur mobile */
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Grilles à deux colonnes → une seule colonne sur tablette/mobile */
@media (max-width: 820px) {
  .grid-home,
  .grid-detail,
  .grid-contact,
  .profile-grid {
    grid-template-columns: 1fr;
  }
  /* L'image passe sous le texte sur l'accueil et les fiches compétences */
  .grid-home .media,
  .grid-detail .media { max-width: 520px; }
}

/* Navigation mobile (menu déroulant via <details>) */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .nav-panel {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(22,50,79,0.12);
    padding: 8px 0 16px;
    /* Le menu peut dépasser l'écran (sous-menus dépliés) : on le rend défilable.
       dvh = hauteur réellement visible sur mobile (barre d'adresse déduite) ;
       vh en repli pour les navigateurs sans support de dvh. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-checkbox:checked ~ .nav-panel { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .nav-list > li:last-child { border-bottom: none; }
  .nav-link { display: block; padding: 16px var(--pad-x); }
  .has-submenu > .nav-link { padding: 16px var(--pad-x); }

  /* Sous-menus toujours dépliés et indentés en mode mobile */
  .submenu {
    display: flex;
    position: static;
    min-width: 0;
    padding: 0 0 10px;
    border: none;
    box-shadow: none;
  }
  .submenu a { padding: 8px var(--pad-x) 8px calc(var(--pad-x) + 16px); }
}