:root{
  --bleu:#2477BC;
  --bleu-fonce:#1B5C93;
  --bleu-texte:#17527F;
  --bleu-pale:#EAF2FA;
  --anthracite:#404040;
  --anthracite-fonce:#333333;
  --gris:#6E6E6E;
  --gris-clair:#E6E6E6;
  --blanc:#FFFFFF;
  --fond:#FAFAFA;
  --display:"Bodoni Moda",Georgia,serif;
  --texte:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--blanc);color:var(--anthracite);
  font-family:var(--texte);font-weight:400;font-size:17px;line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;line-height:1.12;font-optical-sizing:none;font-variation-settings:"opsz" 14;}
.hero h1{font-variation-settings:"opsz" 12;font-weight:600;-webkit-font-smoothing:auto;text-rendering:optimizeLegibility;}
p{margin:0 0 1.1em;}
a{color:var(--bleu-texte);text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

/* ---------- Logo ---------- */
.logo{display:inline-block;line-height:0;}
.logo img{height:60px;width:auto;}
footer .logo img{height:92px;}
.hero-logo{margin-bottom:44px;line-height:0;}
.hero-logo img{width:340px;max-width:72%;height:auto;}
@media(max-width:760px){
  .logo img{height:46px;}
  footer .logo img{height:72px;}
  .hero-logo{margin-bottom:32px;}
  .hero-logo img{width:250px;max-width:80%;}
}

/* ---------- En-tête ---------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--gris-clair);
}
.bar{display:flex;align-items:center;justify-content:space-between;height:96px;}
nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
nav a{
  font-size:13.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--anthracite);padding:6px 0;border-bottom:2px solid transparent;transition:.2s;
}
nav a:hover{color:var(--bleu-texte);border-bottom-color:var(--bleu);}
.contact-top{display:flex;align-items:center;gap:18px;}
.tel-top{font-size:14px;font-weight:600;color:var(--bleu-texte);white-space:nowrap;}
.mail-top{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;
  color:var(--blanc);background:var(--bleu);padding:10px 18px;
  white-space:nowrap;cursor:pointer;transition:.2s;border:2px solid var(--bleu);
}
.mail-top:hover{background:var(--blanc);color:var(--bleu);}
.mail-top svg{width:16px;height:16px;flex:none;}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.burger span{display:block;width:24px;height:2px;background:var(--anthracite);margin:5px 0;transition:.25s;}

/* ---------- Héro ---------- */
.hero{position:relative;background:var(--anthracite);color:var(--blanc);overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,var(--anthracite-fonce) 0%,var(--anthracite) 55%,#4A4A4A 100%);
}
.diag{position:absolute;top:-25%;height:150%;transform:skewX(-18deg);pointer-events:none;}
.diag--1{left:-6%;width:110px;background:var(--bleu);opacity:.95;}
.diag--2{left:8%;width:16px;background:var(--bleu);opacity:.55;}
.diag--3{left:12%;width:8px;background:var(--bleu);opacity:.3;}
.hero-in{position:relative;padding:104px 28px 120px;max-width:780px;}
.eyebrow{
  font-size:15px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bleu-texte);margin-bottom:22px;
}
.hero .eyebrow,.contact .eyebrow{color:var(--blanc);}
.titre-sec .eyebrow{font-size:16px;margin-bottom:18px;}
.hero h1{font-size:clamp(38px,6.2vw,68px);letter-spacing:-.01em;}
.hero h1 em{font-style:italic;color:var(--blanc);}
.hero .chapeau{
  margin-top:28px;font-size:18px;font-weight:300;line-height:1.75;
  color:rgba(255,255,255,.85);max-width:580px;
}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;}
.btn{
  display:inline-block;padding:15px 32px;font-size:14px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;transition:.22s;border:2px solid transparent;
}
.btn--plein{background:var(--bleu);color:var(--blanc);}
.btn--plein:hover{background:var(--blanc);color:var(--anthracite);}
.btn--vide{border-color:rgba(255,255,255,.45);color:var(--blanc);}
.btn--vide:hover{border-color:var(--blanc);background:var(--blanc);color:var(--anthracite);}

/* bandeau juridictions */
.bandeau{background:var(--bleu);color:var(--blanc);}
.bandeau .wrap{
  display:flex;flex-wrap:wrap;gap:10px 44px;padding-top:20px;padding-bottom:20px;
  font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Sections ---------- */
section{padding:100px 0;}
.titre-sec{margin-bottom:56px;max-width:720px;}
.titre-sec .eyebrow{color:var(--bleu);}
.titre-sec h2{font-size:clamp(30px,4.4vw,46px);color:var(--anthracite);font-weight:600;letter-spacing:-.005em;}
.titre-sec .trait{width:64px;height:3px;background:var(--bleu);margin-top:24px;}
.gris{background:var(--fond);}

/* Cabinet */
.duo{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start;}
.chiffres{border-left:3px solid var(--bleu);padding-left:28px;}
.chiffre{margin-bottom:34px;}
.chiffre .n{font-family:var(--display);font-size:46px;font-weight:700;color:var(--bleu-texte);
  line-height:1;font-variation-settings:"opsz" 12;}
.chiffre .l{font-size:14px;color:var(--gris);margin-top:6px;}

/* Matières */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:2px;background:var(--gris-clair);}
.mat{background:var(--blanc);padding:38px 32px;transition:.25s;position:relative;}
.mat::after{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--bleu);transition:.3s;}
.mat:hover{background:var(--bleu-pale);}
.mat:hover::after{height:100%;}
.mat h3{font-size:22px;margin-bottom:14px;}
.mat p{font-size:15px;color:var(--gris);margin:0;line-height:1.65;}

/* Équipe */
.groupe{margin-bottom:64px;}
.groupe-t{
  font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:.01em;
  text-transform:none;color:var(--anthracite);padding-bottom:16px;
  border-bottom:2px solid var(--bleu);margin-bottom:36px;
}
.membres{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px;}
.membre .photo{
  aspect-ratio:3/4;background:var(--gris-clair);margin-bottom:20px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.membre .photo span{
  font-family:var(--display);font-size:52px;color:#B8B8B8;
}
.membre .photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.groupe--hist .membre .photo{aspect-ratio:1;width:168px;border-radius:50%;margin-bottom:22px;}
.groupe--hist .membre .photo::before{display:none;}
.groupe--hist .membre .photo span{font-size:44px;}
.membre .photo::before{
  content:"";position:absolute;bottom:0;left:0;width:100%;height:5px;background:var(--bleu);
  transform:scaleX(0);transform-origin:left;transition:.35s;
}
.membre:hover .photo::before{transform:scaleX(1);}
.membre h3{font-size:21px;}
.membre h3 .nom{font-family:var(--texte);font-weight:600;font-size:18px;letter-spacing:.02em;display:block;}
.membre .role{font-size:13.5px;color:var(--bleu-texte);font-weight:500;margin:6px 0 12px;}
.membre .mat-l{font-size:14px;color:var(--gris);line-height:1.6;}

/* Honoraires */
.hono{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;}
.carte{background:var(--blanc);border:1px solid var(--gris-clair);padding:34px 30px;}
.carte h3{font-size:20px;font-weight:600;margin-bottom:14px;}
.carte p{font-size:15px;color:var(--gris);margin:0;}
.avis{
  margin-top:44px;border-left:3px solid var(--bleu);background:var(--bleu-pale);
  padding:26px 30px;font-size:15px;color:var(--anthracite);
}

/* Contact */
.contact{background:var(--anthracite);color:var(--blanc);position:relative;overflow:hidden;}
.contact .titre-sec h2{color:var(--blanc);}
.contact-duo{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
.coord dt{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blanc);margin-top:26px;
}
.coord dd{margin:6px 0 0;font-size:17px;color:rgba(255,255,255,.9);}
.horaires{margin:8px 0 0;font-size:15.5px;color:rgba(255,255,255,.9);}
.horaires div{display:flex;justify-content:space-between;gap:20px;padding:5px 0;max-width:340px;}
.horaires .j{color:rgba(255,255,255,.6);}
.horaires .f{color:rgba(255,255,255,.45);}
.coord dd a{color:rgba(255,255,255,.9);}
.coord dd a:hover{color:var(--blanc);text-decoration:underline;}
.form label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:8px;
}
.form input,.form select,.form textarea{
  width:100%;padding:13px 15px;margin-bottom:20px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);color:var(--blanc);
  font-family:var(--texte);font-size:16px;
}
.form input:focus,.form select,.form textarea:focus{outline:none;border-color:var(--bleu);}
.form select option,.form select optgroup{color:var(--anthracite);background:var(--blanc);}
.form textarea{min-height:130px;resize:vertical;}
.form button{
  background:var(--bleu);color:var(--blanc);border:0;padding:15px 34px;
  font-family:var(--texte);font-size:14px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;transition:.2s;
}
.form button:hover{background:var(--blanc);color:var(--anthracite);}
.rgpd{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:16px;line-height:1.6;}

/* Pied */
footer{background:var(--anthracite-fonce);color:rgba(255,255,255,.6);padding:64px 0 34px;font-size:13.5px;}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px;margin-bottom:44px;}
footer h4{
  font-family:var(--texte);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blanc);margin-bottom:16px;
}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:8px;}
footer a{color:rgba(255,255,255,.6);}
footer a:hover{color:var(--blanc);}
.legal{border-top:1px solid rgba(255,255,255,.13);padding-top:26px;font-size:12px;line-height:1.8;}

/* Domaines de compétence */
.domaines{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;background:var(--gris-clair);}
.dom{background:var(--blanc);padding:40px 34px;}
.dom h3{font-size:22px;font-weight:600;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--bleu);}
.dom ul{list-style:none;margin:0;padding:0;}
.dom li{font-size:14.5px;color:var(--gris);padding:7px 0 7px 18px;position:relative;line-height:1.5;}
.dom li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--bleu);}
.membre .bio{font-size:14.5px;color:var(--gris);line-height:1.65;margin:0;}
.membre .bio strong{color:var(--anthracite);font-weight:500;}
.membre .coords{margin-top:18px;padding-top:16px;border-top:1px solid var(--gris-clair);}
.membre .coords a{
  display:block;font-size:14.5px;font-weight:500;color:var(--anthracite);
  padding:3px 0;transition:.2s;
}
.membre .coords a:hover{color:var(--bleu-texte);}
.membre .coords .mail{
  display:block;font-size:14.5px;font-weight:500;color:var(--anthracite);
  padding:3px 0;cursor:pointer;transition:.2s;
}
.membre .coords .mail:hover{color:var(--bleu-texte);}
.coord .mail{color:rgba(255,255,255,.9);cursor:pointer;}
.coord .mail:hover{color:var(--blanc);text-decoration:underline;}
footer .mail{color:rgba(255,255,255,.6);cursor:pointer;}
footer .mail:hover{color:var(--blanc);}
.tarif{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--gris-clair);font-size:15px;}
.tarif:last-child{border-bottom:0;}
.tarif .v{font-weight:600;color:var(--bleu-texte);white-space:nowrap;}
.bareme{margin-top:44px;background:var(--blanc);border:1px solid var(--gris-clair);padding:38px 34px;}
.bareme h3{font-size:24px;font-weight:600;margin-bottom:10px;}
.bareme .intro{font-size:15px;color:var(--gris);max-width:640px;}
.bareme table{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px;}
.bareme th{
  text-align:left;font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bleu-texte);padding-bottom:12px;border-bottom:2px solid var(--bleu);
}
.bareme th:last-child,.bareme td:last-child{text-align:right;}
.bareme td{padding:11px 0;border-bottom:1px solid var(--gris-clair);color:var(--gris);}
.bareme td:last-child{font-weight:600;color:var(--anthracite);white-space:nowrap;}
.bareme tr:last-child td{border-bottom:0;}
@media(max-width:520px){.bareme{padding:26px 20px;}.bareme table{font-size:13.5px;}}

/* Bandeau d'avertissement maquette */
.note{background:#FFF4D6;border-bottom:1px solid #E8D9A8;color:#6B5518;font-size:13px;padding:12px 0;}
.note .wrap{display:flex;gap:12px;align-items:flex-start;}

@media(max-width:900px){
  .duo,.contact-duo{grid-template-columns:1fr;gap:44px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  body{font-size:16px;}
  section{padding:70px 0;}
  .bar{height:78px;}
  .burger{display:block;}
  nav{
    position:absolute;top:100%;left:0;width:100%;background:var(--blanc);
    border-bottom:1px solid var(--gris-clair);display:none;
  }
  nav.ouvert{display:block;}
  nav ul{flex-direction:column;gap:0;padding:14px 28px 24px;}
  nav a{display:block;padding:13px 0;border-bottom:1px solid var(--gris-clair);}
  .tel-top{display:none;}
  .contact-top{gap:10px;}
  .mail-top{padding:10px 12px;}
  .mail-top .lbl{display:none;}
  .mail-top svg{width:20px;height:20px;}
  .hero-in{padding:76px 24px 84px;}
  .foot-grid{grid-template-columns:1fr;gap:34px;}
  /* Les obliques balayent près de 200px horizontalement : sur petit écran
     elles passent sous le logo et l'accroche. On les masque. */
  .diag{display:none;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  html{scroll-behavior:auto;}
}
/* ============ Pages de matières ============ */
.page-hero{background:var(--anthracite);color:var(--blanc);padding:56px 0 64px;}
.page-hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:600;
  font-variation-settings:"opsz" 12;margin-bottom:22px;}
.page-hero .chapeau-p{font-size:18px;font-weight:300;line-height:1.8;
  color:rgba(255,255,255,.85);max-width:640px;margin-bottom:34px;}
.fil{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:26px;}
.fil a{color:rgba(255,255,255,.75);}
.fil a:hover{color:var(--blanc);}
.fil span{margin:0 8px;}
.btn--vide2{border-color:rgba(255,255,255,.45);color:var(--blanc);}
.btn--vide2:hover{background:var(--blanc);color:var(--anthracite);}

.contenu{max-width:700px;}
.contenu h2{font-size:clamp(24px,3.2vw,32px);font-weight:600;margin:54px 0 20px;}
.contenu h2:first-child{margin-top:0;}
.contenu p{font-size:17px;line-height:1.8;margin-bottom:1.25em;}
.liste{list-style:none;margin:0 0 26px;padding:0;}
.liste li{font-size:16px;color:var(--gris);padding:8px 0 8px 20px;position:relative;line-height:1.6;}
.liste li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:1px;background:var(--bleu);}

.faq{border-bottom:1px solid var(--gris-clair);background:var(--blanc);}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 46px 22px 24px;position:relative;
  font-size:17px;font-weight:500;color:var(--anthracite);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:26px;font-weight:600;color:var(--bleu-texte);line-height:1;
}
.faq[open] summary::after{content:"–";}
.faq summary:hover{color:var(--bleu-texte);}
.faq div{padding:0 24px 26px;font-size:16px;color:var(--gris);line-height:1.75;max-width:680px;}

.contact-court{background:var(--fond);text-align:center;padding:76px 0;}
.contact-court h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;margin-bottom:16px;}
.contact-court p{max-width:620px;margin:0 auto 32px;color:var(--gris);}
.contact-court .actions{justify-content:center;}
.contact-court .btn--vide{border-color:var(--anthracite);color:var(--anthracite);}
.contact-court .btn--vide:hover{background:var(--anthracite);color:var(--blanc);}

.liens-mat{margin-top:22px;padding-top:18px;border-top:1px solid var(--gris-clair);}
.lien-mat{
  display:block;font-size:14.5px;font-weight:600;color:var(--bleu-texte);
  padding:7px 0;transition:.2s;
}
.lien-mat:hover{color:var(--anthracite);}
.lien-mat span{transition:.2s;display:inline-block;}
.lien-mat:hover span{transform:translateX(4px);}

.contenu h3{font-size:20px;font-weight:600;margin:30px 0 12px;color:var(--anthracite);}

/* ============ Justification des textes ============ */
/* La justification n'est propre qu'au-delà d'une certaine largeur de colonne :
   en dessous, les mots s'espacent et créent des « rivières » de blanc.
   Elle est donc réservée aux écrans larges, et seulement aux blocs de prose
   suffisamment larges : ni les questions fréquentes, ni les notices d'avocats,
   dont les colonnes sont trop étroites. */
@media(min-width:900px){
  .contenu p,
  .duo p,
  .page-hero .chapeau-p{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
    -webkit-hyphens:auto;
  }
}

/* Vignette à initiales, en attendant les portraits */
.membre .photo span{
  font-family:var(--display);font-size:56px;font-weight:500;color:#9A9A9A;
  font-variation-settings:"opsz" 14;letter-spacing:.04em;
}
.membre .photo:has(span){background:linear-gradient(160deg,#EFEFEF 0%,#E2E2E2 100%);}