/* =====================================================================
   KLAÏS AVOCATS — Styles des pages internes (fiches avocats, compétences,
   honoraires). Complète tokens.css. Chargé après tokens.css.
   ===================================================================== */

/* Fil d'Ariane */
.breadcrumb{padding:calc(clamp(88px,12vh,120px)) 0 0}
.breadcrumb .container{display:flex;gap:10px;align-items:center;font-size:12.5px;letter-spacing:.04em;color:var(--gris-clair);flex-wrap:wrap}
.breadcrumb a{color:var(--gris);transition:color .25s var(--ease)}
.breadcrumb a:hover{color:var(--petrole)}
.breadcrumb .sep{color:var(--filet-froid)}
.breadcrumb .current{color:var(--petrole)}

/* Hero de page interne */
.page-hero{background:var(--ivoire);position:relative;overflow:hidden;padding:clamp(40px,6vw,64px) 0 clamp(64px,9vw,104px)}
.page-hero__colibri{position:absolute;top:6%;right:-24px;width:min(38vw,380px);opacity:.09;transform:rotate(-8deg);pointer-events:none}
.page-hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(36px,5vw,68px);align-items:start;position:relative}
.page-hero__role{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aubergine);margin-bottom:18px}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.9rem);font-weight:500;letter-spacing:-.012em;line-height:1.03}
.page-hero__lead{margin-top:26px;font-size:19px;line-height:1.75;color:var(--gris);max-width:60ch}
.page-hero__cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* Médaillon portrait (en attendant les vraies photos) */
.portrait-medallion{width:100%;max-width:320px;aspect-ratio:4/5;margin-left:auto;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(165deg,var(--voile),#fff 72%);border:1px solid var(--filet-froid)}
.portrait-medallion::after{content:"";position:absolute;inset:12px;border:1px solid var(--petrole);opacity:.3}
.portrait-medallion span{font-family:var(--serif);font-size:64px;color:var(--petrole);letter-spacing:.03em;line-height:1}
.portrait-note{max-width:320px;margin:12px 0 0 auto;text-align:center;font-size:12px;color:var(--gris-clair);font-style:italic}

/* Carte coordonnées */
.contact-card{margin:22px 0 0 auto;max-width:320px;background:#fff;border:1px solid var(--filet);padding:24px 26px}
.contact-card h4{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--petrole);margin-bottom:14px}
.contact-card a{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:15px;color:var(--texte);border-top:1px solid var(--filet);transition:color .25s var(--ease)}
.contact-card a:first-of-type{border-top:0}
.contact-card a:hover{color:var(--petrole)}
.contact-card svg{width:16px;height:16px;stroke:var(--petrole);stroke-width:1.5;fill:none;flex-shrink:0}

/* Prose */
.prose{max-width:68ch}
.prose p{color:var(--gris);line-height:1.85;margin-bottom:18px;font-size:17px}
.prose p .drop{font-family:var(--serif);font-size:3.4em;line-height:.74;float:left;color:var(--petrole);padding:8px 13px 0 0;font-weight:500}

/* Liste qualifications */
.quals{display:grid;gap:0;border-top:1px solid var(--filet)}
.quals li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--filet)}
.quals .idx{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--petrole)}
.quals .txt{font-size:16.5px;color:var(--texte);line-height:1.5}
.quals .txt em{font-style:normal;color:var(--gris);display:block;font-size:14px;margin-top:3px}

/* Puces engagements */
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.tags span{font-size:14px;color:var(--petrole-deep);background:var(--voile);border:1px solid var(--voile2);padding:9px 18px;border-radius:1px}

/* Grille domaines (liens vers compétences) */
.domain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.domain-grid a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:24px 26px;background:#fff;border:1px solid var(--filet);
  font-family:var(--serif);font-size:1.4rem;color:var(--encre);transition:all .3s var(--ease)}
.domain-grid a:hover{border-color:var(--petrole);background:var(--voile);color:var(--petrole)}
.domain-grid a .arw{font-family:var(--sans);transition:transform .3s var(--ease)}
.domain-grid a:hover .arw{transform:translateX(5px)}

/* Deux colonnes texte/aside */
.split{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(36px,5vw,72px);align-items:start}
.aside-block{background:var(--ivoire);border:1px solid var(--filet);padding:34px 32px}
.aside-block h3{font-size:1.55rem;font-weight:500;margin-bottom:16px}

/* Autres avocats */
.others__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.other-card{background:#fff;border:1px solid var(--filet);padding:24px 22px;text-align:center;transition:all .3s var(--ease)}
.other-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--filet-froid)}
.other-card .mono{width:60px;height:60px;margin:0 auto 14px;border:1px solid var(--petrole);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;color:var(--petrole)}
.other-card h4{font-family:var(--serif);font-size:1.25rem;font-weight:500;color:var(--encre)}
.other-card p{font-size:12px;color:var(--gris);letter-spacing:.03em;margin-top:3px}

/* CTA compacte */
.cta-band{background:var(--petrole-ink);color:#E4EFF0;text-align:center;position:relative;overflow:hidden}
.cta-band__colibri{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;opacity:.05;filter:brightness(0) invert(1)}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:500;position:relative}
.cta-band p{color:#B7CDD1;max-width:54ch;margin:18px auto 32px;position:relative}
.cta-band .btn{position:relative}

/* Hero compétence : photo à droite */
.page-hero__photo{width:100%;aspect-ratio:5/6;object-fit:cover;filter:grayscale(.22) contrast(1.03);border:1px solid var(--filet-froid);margin-left:auto;max-width:400px}
.page-hero__photo-wrap{position:relative;max-width:400px;margin-left:auto}
.page-hero__photo-wrap::after{content:"";position:absolute;bottom:-14px;right:-14px;width:96px;height:96px;border-right:2px solid var(--aubergine);border-bottom:2px solid var(--aubergine);opacity:.5}

/* Services (listes de compétences) */
.service-block{margin-bottom:32px}
.service-block>p{color:var(--gris);line-height:1.8;margin-bottom:14px;font-size:17px}
.service-block>p.intro{font-weight:500;color:var(--texte)}
.service-list{list-style:none;display:grid;gap:11px;margin:12px 0 4px}
.service-list li{position:relative;padding-left:30px;color:var(--gris);line-height:1.55;font-size:16px}
.service-list li::before{content:"";position:absolute;left:2px;top:7px;width:13px;height:7px;border-left:1.6px solid var(--petrole);border-bottom:1.6px solid var(--petrole);transform:rotate(-45deg)}

/* Longform SEO */
.longform{max-width:74ch}
.longform h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--encre);margin:34px 0 12px}
.longform h3:first-child{margin-top:0}
.longform p{color:var(--gris);line-height:1.85;margin-bottom:16px;font-size:16px}

@media(max-width:900px){
  .page-hero__photo,.page-hero__photo-wrap{margin-left:0;max-width:none}
  .page-hero__grid{grid-template-columns:1fr}
  .portrait-medallion,.portrait-note,.contact-card{margin-left:0}
  .split{grid-template-columns:1fr}
  .domain-grid{grid-template-columns:repeat(2,1fr)}
  .others__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .domain-grid,.others__grid{grid-template-columns:1fr}
}

.portrait-medallion img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:filter .55s var(--ease)}
.portrait-medallion:hover img{filter:grayscale(0) contrast(1)}
.portrait-medallion--photo::after{display:none}


/* ===== Cartes avocats (identiques à l'accueil) — section « Vos avocats » des pages compétences ===== */
.lawyers-domain{display:flex;justify-content:center;flex-wrap:wrap;gap:28px}
.lawyers-domain .team-card{width:100%;max-width:300px}
.team-card{background:#fff;border:1px solid var(--filet);padding:30px 24px 26px;text-align:center;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--filet-froid)}
.team-card__portrait{width:140px;aspect-ratio:4/5;margin:0 auto 22px;position:relative;overflow:hidden;border:1px solid var(--filet-froid)}
.team-card__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:filter .55s var(--ease)}
.team-card:hover .team-card__portrait img{filter:grayscale(0) contrast(1)}
.team-card h3{font-size:1.6rem;font-weight:500;margin-bottom:5px;color:var(--encre)}
.team-card__role{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--aubergine);margin-bottom:18px;line-height:1.5}
.team-card__contact{border-top:1px solid var(--filet);padding-top:16px;display:grid;gap:6px}
.team-card__contact a{font-size:13.5px;color:var(--gris);transition:color .25s var(--ease);word-break:break-word}
.team-card__contact a:hover{color:var(--petrole)}
.team-card__profile{margin-top:auto;padding-top:20px;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--petrole);display:inline-flex;gap:9px;align-items:center}
.team-card__profile .arw{transition:transform .3s var(--ease)}
.team-card:hover .team-card__profile .arw{transform:translateX(6px)}
@media(max-width:560px){.lawyers-domain .team-card{max-width:none}}

/* Carte avocat entièrement cliquable vers le profil (retour Me Latouche 29/07) */
.team-card{position:relative}
a.team-card__profile::after{content:"";position:absolute;inset:0;z-index:1}
.team-card__contact a{position:relative;z-index:2}