/* Cabinet Benoît Llavador — feuille de style */
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --encre:#2d2d2e;      /* le noir du logo */
  --papier:#ffffff;
  --pierre:#ececea;
  --filet:#cfcfcc;
  --gris:#5e5e5c;
  --clair:#d6d6d3;      /* texte secondaire sur fond noir */
  --sans:"Jost",system-ui,sans-serif;
  --large:1240px;
  --gouttiere:clamp(16px,4.5vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--encre);font:400 1.125rem/1.65 var(--serif);font-kerning:normal}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.saut{position:absolute;left:-9999px}
.saut:focus{left:var(--gouttiere);top:8px;background:var(--papier);color:var(--encre);padding:.5rem 1rem;z-index:10}
h1,h2,h3{font-family:var(--sans);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0}
p{margin:0 0 1em}
.conteneur{max-width:var(--large);margin:0 auto;padding:0 var(--gouttiere)}
.noir{background:var(--encre);color:var(--papier)}
.pierre{background:var(--pierre)}

/* Double filet : les deux traits du L du monogramme */
.double{display:block;width:64px;height:8px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}

/* En-tête, toujours sur fond noir */
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.entete .logo img{height:58px;width:auto}
.nav{display:flex;gap:.25rem 2.25rem;flex-wrap:wrap;font-family:var(--sans);font-size:1.05rem;font-weight:400}
.nav a{text-decoration:none;padding:.3rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:currentColor}

/* Ouverture de l'accueil */
.une{position:relative;overflow:hidden}
.une .conteneur:first-child{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2rem;align-items:end;padding-top:clamp(56px,10vw,150px);padding-bottom:clamp(48px,7vw,96px)}
.une h1{font-weight:300;font-size:clamp(3.4rem,10.5vw,9.5rem);line-height:.92;letter-spacing:-.035em}
.une .chapo{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:44ch;margin:2.2rem 0 0;color:var(--clair)}
.une .qualite{font-family:var(--sans);font-size:1.05rem;margin:1.4rem 0 0}
.monogramme{width:100%;max-width:420px;justify-self:end;color:var(--papier)}
.monogramme path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square}
@media (prefers-reduced-motion:no-preference){
  .monogramme path{stroke-dasharray:1000;stroke-dashoffset:1000;animation:tracer 1.8s cubic-bezier(.6,0,.2,1) forwards}
  .monogramme path+path{animation-delay:.35s}
}
@keyframes tracer{to{stroke-dashoffset:0}}

/* Index des domaines en pied d'ouverture */
.index{display:grid;margin-bottom:0;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #5a5a5b;margin:0;padding:0;list-style:none}
.index li+li{border-left:1px solid #5a5a5b}
.index a{display:block;padding:1.3rem 1.2rem 1.6rem 0;font-family:var(--sans);font-size:1.05rem;text-decoration:none;min-height:100%}
.index li+li a{padding-left:1.2rem}
.index a:hover{text-decoration:underline}

/* Têtes de pages intérieures */
.tete .conteneur{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;padding-top:clamp(48px,8vw,110px);padding-bottom:clamp(44px,6vw,80px)}
.tete h1{font-weight:300;font-size:clamp(2.8rem,7.5vw,6.5rem);line-height:.95;letter-spacing:-.03em}
.tete .chapo{max-width:52ch;margin:1.6rem 0 0;color:var(--clair);font-size:1.15rem}
.tete .monogramme{width:clamp(90px,14vw,180px);max-width:none;height:auto;aspect-ratio:1}

/* Sections */
.section{padding:clamp(64px,10vw,140px) 0}
.grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2rem clamp(24px,5vw,88px)}
.grille>.etiquette{display:flex;flex-direction:column;gap:1.2rem}
.grille>.etiquette h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.declaration{font-family:var(--serif);font-size:clamp(1.45rem,2.6vw,2.15rem);line-height:1.38;margin:0;max-width:34ch}
.declaration+p{margin-top:2rem;max-width:60ch;color:var(--gris)}

/* Domaines, en grandes lignes typographiques */
.domaines{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0}
.domaines>li{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:1rem clamp(24px,5vw,88px);padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--filet);align-items:start}
.domaines>li:last-child{border-bottom:1px solid var(--filet)}
.domaines h3{font-weight:300;font-size:clamp(2rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.03em}
.domaines h3 a{text-decoration:none}
.domaines h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.domaines p{margin:0 0 .9rem}
.domaines .points{font-family:var(--sans);font-size:1rem;color:var(--gris);margin:0}

.clients{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:400}
.clients li{padding:.9rem 0;border-bottom:1px solid var(--filet)}
.clients li:first-child{border-top:2px solid var(--encre)}

.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,5vw,72px);margin-top:clamp(40px,6vw,72px)}
.trois>div{border-top:1px solid #5a5a5b;padding-top:1.5rem}
.trois h3{font-size:1.4rem;margin-bottom:.9rem}
.trois p{color:var(--clair);font-size:1.05rem;margin:0}
.noir .etiquette h2{color:var(--papier)}

/* Pages intérieures */
.texte{max-width:66ch}
.texte h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:0 0 1.2rem}
.texte h2:not(:first-child){margin-top:3.2rem}
.texte h3{font-size:1.2rem;margin:2rem 0 .6rem}
.texte ul{padding-left:1.2em;margin:0 0 1.2em}
.texte li{margin-bottom:.35em}
.encart{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.4;font-style:italic;border-left:4px double var(--encre);padding-left:1.4rem;margin:2.5rem 0}

.sommaire{display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-family:var(--sans);margin-top:2rem}
.sommaire a{text-decoration:none;border-bottom:1px solid #6a6a6b;padding-bottom:.15rem}
.sommaire a:hover{border-bottom-color:currentColor}
.detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.5rem clamp(24px,5vw,88px);padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--filet);scroll-margin-top:16px}
.detail:first-child{border-top:0}
.detail h2{font-weight:300;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.03em}
.detail h3{font-size:1.1rem;margin:1.8rem 0 .5rem}
.detail h3:first-child{margin-top:.2rem}
.detail ul{margin:0;padding-left:1.1em}
.detail li{margin-bottom:.35em}

.legal-texte h2{font-size:1.35rem;margin:2.6rem 0 .8rem}
.legal-texte h2:first-child{margin-top:0}

/* Pied de page */
.pied{font-family:var(--sans);font-size:.98rem;padding:clamp(48px,7vw,80px) 0 36px}
.pied .haut{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2rem clamp(32px,6vw,96px);align-items:start}
.pied img{height:52px;width:auto}
.pied address{font-style:normal;line-height:1.7;color:var(--clair)}
.pied nav{display:flex;flex-direction:column;gap:.35rem}
.pied a{text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied .legal{margin:clamp(40px,5vw,64px) 0 0;border-top:1px solid #4a4a4b;padding-top:1.2rem;color:#a9a9a6;font-size:.88rem}

@media (max-width:900px){
  .une .conteneur:first-child{grid-template-columns:1fr}
  .monogramme{justify-self:start;max-width:200px;order:-1}
  .index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index li:nth-child(3){border-left:0}
  .index li:nth-child(3) a{padding-left:0}
  .index li:nth-child(n+3){border-top:1px solid #5a5a5b}
  .grille,.domaines>li,.detail,.trois{grid-template-columns:1fr}
  .pied .haut{grid-template-columns:1fr 1fr}
  .pied .haut>a{grid-column:1/-1}
}
@media (max-width:520px){
  .entete .logo img{height:46px}
  .nav{gap:.25rem 1.4rem;font-size:1rem}
  .tete .conteneur{grid-template-columns:1fr}
  .tete .monogramme{display:none}
  body{font-size:1.06rem}
}
@media print{.nav,.monogramme{display:none}.noir{background:none;color:#000}}
.une .conteneur:last-child{padding-bottom:0}
.tete .monogramme path{stroke-width:5}

/* Page Contact */
.contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2.5rem clamp(24px,5vw,88px);align-items:start}
.coordonnees{margin:1.6rem 0 0;font-family:var(--sans)}
.coordonnees dt{font-size:.95rem;color:var(--gris);margin-top:1.8rem}
.coordonnees dt:first-child{margin-top:0}
.coordonnees dd{margin:.3rem 0 0;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.35}
.coordonnees a{text-decoration:none}
.coordonnees a:hover{text-decoration:underline}
.itineraire{font-family:var(--sans);margin-top:2.2rem}
.carte{position:relative;aspect-ratio:4/3;background:var(--pierre);overflow:hidden;
  background-image:
    linear-gradient(28deg,transparent 47%,var(--papier) 47%,var(--papier) 50%,transparent 50%),
    linear-gradient(118deg,transparent 60%,var(--papier) 60%,var(--papier) 62.5%,transparent 62.5%),
    repeating-linear-gradient(28deg,transparent 0 46px,rgba(255,255,255,.75) 46px 49px),
    repeating-linear-gradient(118deg,transparent 0 62px,rgba(255,255,255,.75) 62px 65px)}
.carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
.carte-voile{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:clamp(20px,3vw,36px);background:linear-gradient(to top,rgba(236,236,234,.97) 30%,rgba(236,236,234,0) 75%)}
.carte-adresse{font-family:var(--sans);font-weight:300;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 1.4rem}
.carte button{font:500 1rem/1 var(--sans);background:var(--encre);color:var(--papier);border:2px solid var(--encre);padding:15px 24px;cursor:pointer}
.carte button:hover{background:var(--papier);color:var(--encre)}
.carte-note{font-size:.9rem;color:var(--gris);margin:1rem 0 0;max-width:52ch}
@media (max-width:900px){.contact{grid-template-columns:1fr}.carte{aspect-ratio:1/1}}

/* Accueil : nom et qualité (inspiration présentation personnelle) */
.une .nom{font-family:var(--sans);font-weight:500;font-size:clamp(1.1rem,1.6vw,1.35rem);margin:0 0 1.2rem;letter-spacing:.01em}
.une h1{font-size:clamp(3rem,8vw,7.2rem)}
.domaines .suite{font-family:var(--sans);font-size:1rem;margin:1rem 0 0}
.intro-noir{color:var(--clair);max-width:52ch;margin:0;align-self:end}
.note-noir{color:var(--clair);font-size:1rem;margin:2.5rem 0 0}
.fil{font-family:var(--sans);font-size:1rem;margin:0}
.autres{padding:clamp(48px,7vw,88px) 0}
.autres h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-bottom:1.6rem}
.index.trois-col{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.index.trois-col{grid-template-columns:1fr}.index.trois-col li{border-left:0!important;border-top:1px solid #5a5a5b}.index.trois-col li a{padding-left:0!important}}
.declaration+.texte{margin-top:2rem}
/* Nom et titre équilibrés */
.une h1{font-size:inherit;line-height:1}
.une h1 .nom{display:block;font-family:var(--sans);font-weight:300;font-size:clamp(3rem,7.4vw,6.6rem);line-height:.95;letter-spacing:-.035em;margin:0}
.une h1 .titre{display:block;font-family:var(--sans);font-weight:300;font-size:clamp(1.5rem,3.3vw,2.9rem);line-height:1.1;letter-spacing:-.015em;margin-top:.9rem;color:var(--clair)}

/* Textes justifiés, avec césure française pour éviter les blancs */
p,li,dd{text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}
.nav a,.index li,.clients li,.sommaire,.fil,.suite,.itineraire,.carte-adresse,.legal,.pied address,.coordonnees dd{text-align:left;hyphens:manual;-webkit-hyphens:manual}
.declaration{hyphenate-limit-chars:5 2 2}

/* Monogramme du logo (carré, B, LL) en remplacement des deux traits */
.monogramme path{fill:currentColor;stroke:none;stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.monogramme{max-width:300px;align-self:center}
.tete .monogramme{width:clamp(80px,11vw,150px);aspect-ratio:250/285}
@media (prefers-reduced-motion:no-preference){
  .monogramme{animation:apparaitre 1.2s cubic-bezier(.2,0,.2,1) both}
}
@keyframes apparaitre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:900px){.une .monogramme{max-width:140px}}

/* Monogramme retiré ; logo d'en-tête agrandi */
.monogramme{display:none}
.une .conteneur:first-child{grid-template-columns:1fr}
.entete .logo img{height:78px}
@media (max-width:520px){.entete .logo img{height:58px}}

/* ===== Police unique : Jost, celle du logo ===== */
:root{--serif:"Jost",system-ui,sans-serif}
body{font-family:var(--sans);font-weight:400;font-size:1.1rem;line-height:1.7}
.declaration{font-family:var(--sans);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.3;letter-spacing:-.01em}
.chapo{font-weight:300}
.encart{font-family:var(--sans);font-style:normal;font-weight:300}

/* ===== Accueil : signature reprenant le logo (B et LL) ===== */
.accueil .entete .logo{display:none}
.accueil .entete .conteneur{justify-content:flex-end}
.une .conteneur:first-child{display:block;padding-top:clamp(56px,9vw,130px);padding-bottom:clamp(64px,9vw,130px)}
.signature{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px);margin:0}
.b-mono{flex:none;height:clamp(96px,15vw,200px);width:auto;color:var(--papier)}
.b-mono path{fill:currentColor}
.sig-texte{display:flex;flex-direction:column;gap:clamp(6px,1vw,14px)}
.une h1 .nom{font-weight:600;text-transform:uppercase;font-size:clamp(2.3rem,7.2vw,6.4rem);line-height:.9;letter-spacing:.005em;margin:0}
.une h1 .titre{font-weight:400;text-transform:uppercase;font-size:clamp(.85rem,2.05vw,1.85rem);letter-spacing:.3em;line-height:1.2;margin:0;color:var(--clair)}
.une .chapo{max-width:52ch;margin:clamp(36px,5vw,64px) 0 0}
@media (max-width:520px){.signature{gap:14px}.b-mono{height:84px}.une h1 .titre{letter-spacing:.14em}}
h1,h2,h3,.domaines h3{text-align:left;hyphens:manual;-webkit-hyphens:manual}

/* ===== Logo composé : carré du monogramme + nom + « avocat au barreau de Paris » ===== */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--papier)}
.logo:hover{text-decoration:none}
.logo-mono{height:62px;width:auto;flex:none}
.logo-mono path{fill:currentColor}
.logo-texte{display:flex;flex-direction:column;justify-content:center}
.logo-nom{font-family:var(--sans);font-weight:600;text-transform:uppercase;font-size:23px;line-height:.98;letter-spacing:.01em}
.logo-titre{font-family:var(--sans);font-weight:400;text-transform:uppercase;font-size:8.6px;letter-spacing:.16em;margin-top:5px;color:var(--clair);white-space:nowrap}
.logo-pied .logo-mono{height:50px}
.logo-pied .logo-nom{font-size:18.5px}
.logo-pied .logo-titre{font-size:7px}
@media (max-width:520px){.logo-mono{height:50px}.logo-nom{font-size:18.5px}.logo-titre{font-size:7px}}
.logo-nom{font-size:27px;line-height:.95}
.logo-titre{font-size:8.4px;letter-spacing:.085em;margin-top:6px}
.logo-pied .logo-nom{font-size:21.5px}
.logo-pied .logo-titre{font-size:6.8px}
@media (max-width:520px){.logo-nom{font-size:21.5px}.logo-titre{font-size:6.8px}}