/* Cabinet Janson — couleurs reprises du logo */
@font-face { font-family: "Montserrat"; font-weight: 300; font-display: swap; src: url(fonts/montserrat-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url(fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 400; font-display: swap; src: url(fonts/mulish-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 600; font-display: swap; src: url(fonts/mulish-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 700; font-display: swap; src: url(fonts/mulish-latin-700-normal.woff2) format("woff2"); }

:root {
  --ardoise: #4e5154;
  --ardoise-fonce: #33363a;
  --rouille: #a04321;
  --rouille-fonce: #86371a;
  --rouille-pale: #f4e6df;
  --sable: #bfb6ab;
  --sable-pale: #e9e3db;
  --creme: #f6f2ed;
  --blanc: #ffffff;
  --texte: #3b3e42;
  --texte-doux: #6b6e72;
  --titre: "Montserrat", system-ui, sans-serif;
  --corps: "Mulish", system-ui, sans-serif;
  --rayon: 14px;
  --ombre: 0 1px 2px rgb(51 54 58 / .06), 0 8px 24px -12px rgb(51 54 58 / .18);
  --largeur: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--corps); color: var(--texte); background: var(--blanc); }
img { max-width: 100%; display: block; }
a { color: var(--rouille); text-underline-offset: .2em; }
a:hover { color: var(--rouille-fonce); }
h1, h2, h3 { font-family: var(--titre); color: var(--ardoise-fonce); line-height: 1.2; margin: 0; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--rouille); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 1rem; top: -4rem; background: var(--ardoise); color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 50; }
.evitement:focus { top: 1rem; color: #fff; }
.enveloppe { width: min(100% - 32px, var(--largeur)); margin-inline: auto; }
.ico { width: 1.05em; height: 1.05em; flex: none; }

.surtitre {
  font: 500 .78rem/1.4 var(--titre); letter-spacing: .22em; text-transform: uppercase;
  color: var(--rouille); margin-bottom: .9rem;
}

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: 500 .95rem/1 var(--titre); letter-spacing: .02em; text-decoration: none;
  padding: .95em 1.4em; border-radius: 999px; border: 1.5px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.bouton--plein { background: var(--rouille); color: #fff; }
.bouton--plein:hover { background: var(--rouille-fonce); color: #fff; }
.bouton--ligne { border-color: var(--sable); color: var(--ardoise-fonce); background: transparent; }
.bouton--ligne:hover { border-color: var(--ardoise); color: var(--ardoise-fonce); }
.bouton--petit { font-size: .85rem; padding: .75em 1.15em; }
.bouton--large { width: 100%; }

/* En-tête */
.entete {
  position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / .92);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--sable-pale);
}
.entete__barre { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marque__symbole { width: 40px; height: auto; }
.marque__nom { font: 400 1.08rem/1 var(--titre); letter-spacing: .26em; text-transform: uppercase; color: var(--ardoise); }
.marque__accent { color: var(--rouille); }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a:not(.bouton) { font: 500 .9rem/1 var(--titre); color: var(--ardoise); text-decoration: none; letter-spacing: .03em; }
.nav a:not(.bouton):hover { color: var(--rouille); }
.menu-bouton { display: none; }

@media (max-width: 860px) {
  .menu-bouton {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; border-radius: 10px;
  }
  .menu-bouton__trait, .menu-bouton__trait::before, .menu-bouton__trait::after {
    display: block; width: 22px; height: 2px; background: var(--ardoise); border-radius: 2px; position: relative; transition: transform .2s, background .2s;
  }
  .menu-bouton__trait::before, .menu-bouton__trait::after { content: ""; position: absolute; left: 0; }
  .menu-bouton__trait::before { top: -7px; }
  .menu-bouton__trait::after { top: 7px; }
  .menu-ouvert .menu-bouton__trait { background: transparent; }
  .menu-ouvert .menu-bouton__trait::before { transform: translateY(7px) rotate(45deg); }
  .menu-ouvert .menu-bouton__trait::after { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--sable-pale); padding: .5rem 16px 1.25rem; box-shadow: var(--ombre);
  }
  .menu-ouvert .nav { display: flex; }
  .nav a:not(.bouton) { padding: 1rem 0; border-bottom: 1px solid var(--sable-pale); font-size: 1rem; }
  .nav .bouton { margin-top: 1rem; }
  .marque__nom { font-size: .95rem; letter-spacing: .2em; }
}

/* Hero */
.hero { background: var(--creme); overflow: hidden; }
.hero__grille { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; padding-block: clamp(3rem, 8vw, 6.5rem); }
.hero__titre { font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -.01em; line-height: 1.1; margin-bottom: 1.4rem; }
.hero__titre em { font-style: normal; color: var(--rouille); display: block; }
.hero__intro { font-size: 1.15rem; max-width: 34em; color: var(--texte); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 1.6rem; }
.hero__adresse { display: flex; align-items: center; gap: .5em; color: var(--texte-doux); font-size: .95rem; margin: 0; }
.hero__adresse .ico { color: var(--rouille); }
.hero__visuel { position: relative; justify-self: center; width: min(100%, 400px); }
.hero__visuel::before {
  content: ""; position: absolute; inset: 6% 2% 0 2%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0%, rgb(255 255 255 / 0) 100%);
}
.hero__visuel img { position: relative; width: 100%; height: auto; }
@media (max-width: 860px) {
  .hero__grille { grid-template-columns: 1fr; gap: 1rem; }
  .hero__visuel { order: -1; width: 180px; justify-self: start; }
}

/* Sections */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--teinte { background: var(--creme); }
.section__entete { max-width: 44rem; margin-bottom: 2.5rem; }
.section__titre { font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.005em; }
.section__intro { color: var(--texte-doux); margin-top: 1rem; }

/* Spécialités */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.spec {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sable-pale);
  border-radius: var(--rayon); padding: 1.9rem; position: relative; overflow: hidden;
}
.spec::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--sable); }
.spec--large { grid-row: span 2; }
.spec--large::before { background: var(--rouille); }
.spec__nom { font-weight: 500; font-size: 1.35rem; margin-bottom: .7rem; }
.spec__desc { color: var(--texte-doux); }
.spec__lien { margin-top: auto; padding-top: 1rem; font: 500 .9rem/1.3 var(--titre); text-decoration: none; display: inline-flex; gap: .4em; }
.spec__lien span { transition: transform .2s; }
.spec__lien:hover span { transform: translateX(3px); }
@media (max-width: 760px) { .specs { grid-template-columns: 1fr; } .spec--large { grid-row: auto; } }

.zones { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .4rem 0 1rem; }
.zone {
  display: inline-block; font: 500 .85rem/1 var(--titre); padding: .6em 1em; border-radius: 999px;
  background: var(--creme); color: var(--ardoise-fonce); text-decoration: none; border: 1px solid var(--sable-pale);
  transition: background .2s, color .2s, border-color .2s;
}
.zone:hover { background: var(--rouille-pale); border-color: #e3c7b9; color: var(--rouille-fonce); }

/* Équipe */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filtre {
  font: 500 .88rem/1 var(--titre); padding: .7em 1.15em; border-radius: 999px; text-decoration: none;
  color: var(--ardoise); border: 1px solid var(--sable); background: #fff;
}
.filtre:hover { border-color: var(--ardoise); color: var(--ardoise-fonce); }
.filtre.est-actif { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }
.filtre-zone { font-size: .95rem; color: var(--texte-doux); margin: 0 0 1rem; }
.filtre-zone a { margin-left: .6rem; font-size: .88rem; }

.equipe { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.carte {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre); transition: transform .25s, box-shadow .25s;
}
.carte:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(51 54 58 / .06), 0 18px 36px -16px rgb(51 54 58 / .28); }
.carte__photo { display: block; text-decoration: none; aspect-ratio: 4 / 3; overflow: hidden; }
.carte__corps { display: flex; flex-direction: column; padding: 1.3rem 1.4rem 1.4rem; flex: 1; }
.carte__spec { font: 500 .72rem/1.3 var(--titre); letter-spacing: .18em; text-transform: uppercase; color: var(--rouille); margin-bottom: .45rem; }
.carte__nom { font-weight: 500; font-size: 1.18rem; }
.carte__nom a { color: inherit; text-decoration: none; }
.carte__nom a:hover { color: var(--rouille); }
.carte__titre { color: var(--texte-doux); margin: .25rem 0 0; font-size: .97rem; }
.carte__zones { font-size: .9rem; color: var(--ardoise); margin: .5rem 0 0; }
.carte__actions { display: flex; gap: .5rem; margin-top: auto; padding-top: 1.2rem; }
.carte__actions .bouton--plein { flex: 1; }
.equipe__vide {
  background: #fff; border: 1px dashed var(--sable); border-radius: var(--rayon);
  padding: 2rem; text-align: center; color: var(--texte-doux); margin-top: 1.5rem;
}

/* Portrait (photo ou initiales) */
.portrait, .fiche__portrait, .mini__portrait { width: 100%; height: 100%; object-fit: cover; }
.portrait--vide, .fiche__portrait--vide, .mini__portrait--vide {
  display: grid; place-items: center; background:
    radial-gradient(circle at 50% 55%, transparent 0 38%, var(--sable) 38.4% 39.2%, transparent 39.6%),
    linear-gradient(160deg, var(--creme), var(--sable-pale));
}
.portrait--vide span, .fiche__portrait--vide span, .mini__portrait--vide span {
  font: 300 clamp(2rem, 5vw, 2.8rem)/1 var(--titre); letter-spacing: .12em; color: var(--rouille); padding-left: .12em;
}

/* Accès */
.acces { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.acces__carte {
  background: var(--creme); border-radius: var(--rayon); padding: 2rem; border-left: 3px solid var(--rouille);
}
.acces__adresse { font-size: 1.15rem; line-height: 1.6; }
.acces__nom { display: block; font: 500 .78rem/1.4 var(--titre); letter-spacing: .22em; text-transform: uppercase; color: var(--ardoise); margin-bottom: .4rem; }
@media (max-width: 760px) { .acces { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Fiche praticien */
.fiche { padding-block: 2rem clamp(3.5rem, 8vw, 6rem); background: linear-gradient(var(--creme) 0 260px, #fff 260px); }
.ariane { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .88rem; color: var(--texte-doux); margin-bottom: 2rem; }
.ariane a { color: var(--texte-doux); }
.ariane [aria-current] { color: var(--ardoise-fonce); }
.fiche__grille { display: grid; grid-template-columns: 340px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.fiche__cote { position: sticky; top: 96px; display: grid; gap: 1.25rem; }
.fiche__portrait { aspect-ratio: 4 / 5; border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.fiche__portrait--vide span { font-size: 4rem; }
.fiche__actions { display: grid; gap: .6rem; }
.fiche__lieu { background: var(--creme); border-radius: var(--rayon); padding: 1.2rem 1.4rem; font-size: .95rem; }
.fiche__lieu p { margin-bottom: .6rem; }
.fiche__lieu a { display: inline-flex; align-items: center; gap: .4em; font-size: .9rem; }
.fiche__etiquette { font: 500 .72rem/1.3 var(--titre); letter-spacing: .18em; text-transform: uppercase; color: var(--texte-doux); }
.fiche__principal { padding-top: .5rem; }
.fiche__nom { font-weight: 300; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.01em; }
.fiche__titre { font: 400 1.15rem/1.4 var(--titre); color: var(--rouille); margin: .6rem 0 1.8rem; }
.fiche__bio { font-size: 1.1rem; max-width: 40em; }
.fiche__sous { font-weight: 500; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ardoise); margin: 2.2rem 0 .9rem; }
.domaines { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .1rem 2rem; }
.domaines li { padding: .65rem 0 .65rem 1.4rem; border-bottom: 1px solid var(--sable-pale); position: relative; }
.domaines li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--rouille); }
.fiche__autres { margin-top: 4rem; border-top: 1px solid var(--sable-pale); }
.mini { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.mini a { display: flex; gap: .9rem; align-items: center; text-decoration: none; color: var(--texte); padding: .6rem; border-radius: 12px; }
.mini a:hover { background: var(--creme); }
.mini__portrait { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; }
.mini__portrait--vide span { font-size: 1rem; letter-spacing: .05em; }
.mini strong { display: block; font-family: var(--titre); font-weight: 500; color: var(--ardoise-fonce); }
.introuvable { max-width: 36rem; }
.introuvable .section__titre { margin-bottom: 1rem; }
@media (max-width: 860px) {
  .fiche__grille { grid-template-columns: 1fr; }
  .fiche__cote { position: static; grid-template-columns: 140px 1fr; align-items: start; }
  .fiche__portrait { grid-row: span 2; }
  .fiche__portrait--vide span { font-size: 2.4rem; }
  .fiche__principal { order: -1; }
}
@media (max-width: 480px) { .fiche__cote { grid-template-columns: 1fr; } .fiche__portrait { width: 160px; } }

/* Pied */
.pied { background: var(--ardoise-fonce); color: #d8d4ce; padding-top: 3.5rem; font-size: .95rem; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { color: var(--sable); }
.pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.pied__logo { width: 220px; height: auto; background: #fff; border-radius: 12px; padding: 14px 18px; }
.pied__titre { font: 500 .75rem/1.4 var(--titre); letter-spacing: .2em; text-transform: uppercase; color: var(--sable); margin-bottom: .9rem; }
.pied__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; border-top: 1px solid rgb(255 255 255 / .12); padding-block: 1.2rem; font-size: .85rem; color: #a9a49d; }
.pied__bas p { margin: 0; }
@media (max-width: 760px) { .pied__grille { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
.fiche__nom { margin-bottom: 1.6rem; }