:root{
  --ink:#630D13; --c1:#A79277; --c2:#D1BB9E; --c3:#EAD8C0; --c4:#FDF4E6; --white:#FFFDF9;
  --sable:#F3E4CE; --brun:#7A4A2E; --brunfonce:#221B14;
  --gold:#C9A24B;
  --ff-s:'Cormorant Garamond',Georgia,serif; --ff-b:'Jost',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
.ecran{height:100vh;display:flex;flex-direction:column;overflow:hidden}
body{font-family:var(--ff-b);background:var(--c4);color:var(--ink)}

/* ── Titre ── */
.head{flex:0 0 auto;text-align:center;padding:1.1rem 1.5rem .9rem}
.head h1{font-family:var(--ff-s);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.1}
.head .orn{width:52px;height:1px;background:var(--gold);margin:.6rem auto 0}

/* ── Mosaïque : 3 colonnes, aucun espace ── */
.cols{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,1fr)}
.col{display:grid;grid-template-rows:auto repeat(4,1fr);min-width:0;min-height:0;background:var(--sable)}
.col-head{background:var(--sable);color:var(--ink);text-align:center;
  font-family:var(--ff-s);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.2;
  letter-spacing:.03em;padding:.85rem .6rem;border-right:1px solid rgba(99,13,19,.14);
  border-bottom:1px solid rgba(122,74,46,.3)}
.col:last-child .col-head{border-right:0}

.tile{position:relative;min-height:0;overflow:hidden;display:block;
  text-decoration:none;color:var(--white);background:var(--ink);
  box-shadow:inset -1px -1px 0 rgba(253,244,230,.34);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
/* repère doré sur le bord gauche du rectangle survolé */
.tile .edge{position:absolute;left:0;top:0;bottom:0;width:3px;z-index:3;background:var(--gold);
  transform:scaleY(0);transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.tile:hover .edge{transform:scaleY(1)}
.tile{transform-origin:left center}
.tile:hover,.tile:focus-visible{transform:scale(1.09);z-index:5;
  box-shadow:0 18px 54px rgba(40,8,6,.6)}
/* dernière colonne : on part de la droite pour ne pas sortir de l'écran */
.col:last-child .tile{transform-origin:right center}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

.tile-media{position:absolute;inset:-1px;background-size:cover;background-position:center;
  transform:scale(1.28);filter:brightness(1.12) saturate(1.04);
  transition:transform .55s cubic-bezier(.22,1,.36,1),filter .45s ease}
/* au survol d'un rectangle, les autres s'assombrissent : on voit tout de suite lequel est actif */
.cols:hover .tile-media{filter:brightness(.82) saturate(.92)}
.tile:hover .tile-media{transform:scale(1);filter:brightness(1.16) saturate(1.08)}
/* le voile est porté par la photo : il se déplace et grandit avec elle */
.tile-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(30,16,10,.6) 0%,rgba(30,16,10,.2) 46%,rgba(30,16,10,0) 78%);
  transition:background .45s}
.tile:hover .tile-media::after{background:linear-gradient(to right,rgba(30,16,10,.54) 0%,rgba(30,16,10,.16) 50%,rgba(30,16,10,0) 80%)}

.tile-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;padding:0 0 1.1rem 1.1rem}
/* cartouche bordeaux : apparaît au survol pour que le titre reste lisible
   même sur une photo à fond clair */
.plaque{position:relative;display:inline-block;padding:.55rem .85rem}
.plaque::before{content:"";position:absolute;inset:0;border-radius:3px;
  background:rgba(99,13,19,.94);box-shadow:0 6px 22px rgba(30,8,4,.35);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tile:hover .plaque::before{transform:scaleX(1)}
.plaque h3,.plaque .line{position:relative;z-index:1}
.tile h3{font-family:var(--ff-s);font-weight:500;font-size:clamp(1rem,1.35vw,1.35rem);line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.75)}
.tile .line{width:0;height:1px;background:var(--gold);margin:.34rem 0 0;
  transition:width .45s cubic-bezier(.22,1,.36,1)}
.tile:hover .line{width:30px}

/* fonds provisoires en attendant les photos */
.ph1{background:radial-gradient(120% 110% at 25% 20%,#6B1A14 0%,#3A0906 100%)}
.ph2{background:radial-gradient(120% 110% at 70% 30%,#7A2A1C 0%,#38100A 100%)}
.ph3{background:radial-gradient(120% 110% at 40% 70%,#5E2418 0%,#2E0A07 100%)}
.ph4{background:radial-gradient(120% 110% at 60% 40%,#8A4A22 0%,#3B1408 100%)}
.ph5{background:radial-gradient(120% 110% at 20% 60%,#6A3418 0%,#330E07 100%)}

/* ── En-tête : réseaux · menu · langues ── */
.topnav{flex:0 0 auto;position:relative;z-index:120;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:.55rem 1.5rem;background:var(--ink);border-bottom:1px solid rgba(253,244,230,.12);
  box-shadow:0 3px 18px rgba(99,13,19,.3)}

.socials{display:flex;align-items:center;gap:.15rem}
.socials a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  color:rgba(253,244,230,.62);transition:color .2s,background .2s}
.socials a:hover{color:var(--gold);background:rgba(253,244,230,.08)}
.socials svg{width:16px;height:16px;fill:currentColor;display:block}

.menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.menu a{position:relative;padding:.55rem 1.15rem;text-decoration:none;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(253,244,230,.78);
  transition:color .2s}
.menu a:hover{color:var(--c4)}
.menu a::after{content:"";position:absolute;left:1.15rem;right:1.15rem;bottom:.28rem;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.menu a:hover::after{transform:scaleX(1)}
.menu a.actif{color:var(--gold)}

.langs{display:flex;align-items:center;gap:.45rem}
.langs button{background:none;border:0;cursor:pointer;font-family:var(--ff-b);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(253,244,230,.55);padding:.25rem .15rem;transition:color .2s}
.langs button:hover{color:var(--c4)}
.langs button.on{color:var(--gold)}
.langs i{font-style:normal;font-size:.58rem;color:rgba(253,244,230,.28)}

@media(max-width:900px){
  .topnav{grid-template-columns:auto auto;gap:.5rem;padding:.5rem .8rem}
  .menu{order:3;grid-column:1/-1;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}
  .menu a{padding:.4rem .7rem;font-size:.54rem;white-space:nowrap}
  .menu a::after{left:.7rem;right:.7rem}
  .langs{justify-self:end}
}

/* ── Pied de page (sous la ligne de flottaison) ── */
.pied-site{background:var(--ink);color:rgba(253,244,230,.75);padding:3rem 2rem 1.6rem}
.pied-in{max-width:1400px;margin:0 auto;display:grid;gap:2rem;
  grid-template-columns:150px 1.25fr 1fr 1fr 170px;align-items:center}
.pied-site h4{font-family:var(--ff-b);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem}
.pied-site .nom{font-family:var(--ff-s);font-size:1.7rem;line-height:1.15;color:var(--c4)}
.pied-site .nom span{display:block;font-family:var(--ff-b);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(253,244,230,.6);margin-top:.5rem}
.pied-site p,.pied-site li{font-size:.76rem;line-height:1.9;color:rgba(253,244,230,.72)}
.pied-site ul{list-style:none}
.pied-site a{color:rgba(253,244,230,.72);text-decoration:none;transition:color .2s}
.pied-site a:hover{color:var(--gold)}
.pied-site .zones{font-size:.76rem;line-height:1.9}
.pied-site .zones b{font-weight:400;color:var(--c4)}

.pied-logo{display:flex;align-items:center;justify-content:flex-start}
.pied-logo img{display:block;width:92px;height:92px;object-fit:contain}
.pied-credit{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;text-align:right}
.pied-credit .lbl{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(253,244,230,.45)}
.pied-credit a{display:inline-flex;align-items:center;gap:.55rem;padding:.2rem 0}
.pied-credit img{height:58px;width:150px;object-fit:contain;display:block;opacity:.9;transition:opacity .25s}
.pied-credit a:hover img{opacity:1}
.pied-credit .mot{font-family:var(--ff-s);font-size:1.02rem;color:var(--c4);line-height:1}

.pied-bas{max-width:1240px;margin:2.4rem auto 0;padding-top:1.2rem;
  border-top:1px solid rgba(253,244,230,.14);display:flex;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(253,244,230,.45)}

@media(max-width:900px){
  .pied-site{padding:2.2rem 1.2rem 1.2rem}
  .pied-in{grid-template-columns:1fr;gap:1.6rem}
  .pied-logo{justify-content:flex-start}
  .pied-logo img{width:78px;height:78px}
  .pied-credit{align-items:flex-start;text-align:left}
  .pied-bas{flex-direction:column;gap:.4rem}
}

/* ── Écran de chargement ── */
#loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(81,13,10,.58);backdrop-filter:blur(34px) saturate(.8);-webkit-backdrop-filter:blur(34px) saturate(.8);
  transition:opacity .6s ease,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader .wrap{display:flex;flex-direction:column;align-items:center}
#loader .jfb{display:block;width:clamp(150px,20vw,260px);height:auto;filter:drop-shadow(0 8px 28px rgba(40,8,6,.55));animation:loaderLogoIn .75s cubic-bezier(.2,.7,.2,1) both}
#loader .bar{width:0;height:1px;background:var(--gold);margin-top:1.1rem;
  animation:barIn .6s ease .65s forwards,barPulse 1.7s ease-in-out 1.25s infinite}
@keyframes loaderLogoIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes barIn{to{width:104px}}
@keyframes barPulse{0%,100%{opacity:.3}50%{opacity:1}}
/* ── Fiche détaillée (pop-up) ── */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:1vh 1.2vw;background:rgba(45,20,12,.6);backdrop-filter:blur(8px)}
.modal.open{display:flex}
.modal-card{position:relative;width:min(1600px,100%);max-height:98vh;overflow:hidden;
  background:var(--c4);border-radius:4px;box-shadow:0 40px 100px rgba(45,20,12,.42);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  animation:pop .35s cubic-bezier(.22,1,.36,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:1rem;right:1.1rem;z-index:3;width:40px;height:40px;border:0;
  border-radius:50%;cursor:pointer;background:rgba(253,244,230,.92);color:var(--ink);
  font-size:1.1rem;line-height:1;transition:background .2s}
.modal-close:hover{background:#fff}

.modal-retour{position:absolute;top:1.2rem;left:1.3rem;z-index:4;display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border:1px solid rgba(253,244,230,.32);border-radius:40px;cursor:pointer;
  font-family:var(--ff-b);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c4);background:rgba(20,8,4,.4);backdrop-filter:blur(6px);
  transition:background .25s,color .25s,border-color .25s}
.modal-retour:hover{background:var(--c4);color:var(--ink);border-color:transparent}
.modal-retour .fl{font-size:.9rem;line-height:1;transition:transform .25s}
.modal-retour:hover .fl{transform:translateX(-3px)}

.fiche h4{font-family:var(--ff-s);font-weight:500;font-size:1.45rem;line-height:1.2;color:var(--ink);
  margin:1.6rem 0 .5rem}
.fiche h4:first-child{margin-top:0}
.fiche h4::after{content:"";display:block;width:30px;height:1px;background:var(--gold);margin-top:.55rem}
.fiche p{font-size:.84rem;line-height:1.75;color:rgba(99,13,19,.82);margin-bottom:.5rem}
.fiche p b{font-weight:400;color:var(--brun)}
.fiche p.cond{font-size:.74rem;letter-spacing:.02em;color:var(--brun)}
.autres{display:flex;gap:.6rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid rgba(99,13,19,.14)}
.autres button{flex:1;cursor:pointer;background:var(--ink);color:var(--c4);
  border:1px solid var(--ink);border-radius:3px;padding:.95rem .6rem;
  font-family:var(--ff-b);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  transition:background .2s,color .2s}
.autres button:hover{background:transparent;color:var(--ink)}
.modal-photo{position:relative;min-height:500px;background:var(--ink);background-size:cover;background-position:center}
.modal-photo .cap{position:absolute;left:0;right:0;bottom:0;padding:2rem 2.2rem;color:var(--white);
  background:linear-gradient(to top,rgba(30,16,10,.9),rgba(30,16,10,0))}
.modal-photo h2{font-family:var(--ff-s);font-weight:500;font-size:2.9rem;line-height:1.1}
.modal-photo .fam{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem}

.modal-body{padding:2.6rem 2.8rem 2.6rem;overflow-y:auto;max-height:98vh}
.modal-body .intro{font-family:var(--ff-s);font-size:1.18rem;line-height:1.65;color:rgba(99,13,19,.85)}
.modal-body h3{font-family:var(--ff-b);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brun);margin:1.7rem 0 .8rem}
.modal-body h3::after{content:"";display:block;width:26px;height:1px;background:var(--brun);margin-top:.5rem}


@media(max-width:820px){
  .modal{padding:0}
  .modal-card{grid-template-columns:1fr;max-height:100vh;border-radius:0}
  .modal-photo{min-height:180px}
  .modal-photo h2{font-size:1.4rem}
  .modal-body{max-height:none;padding:1.6rem 1.2rem}
  .f-row{grid-template-columns:1fr}
}

@media(max-width:760px){
  .head{padding:.8rem 1rem .6rem}
  .col-head{font-size:1rem;padding:.7rem .4rem}
  .tile-body{padding:0 0 .8rem .8rem}
}
@media(prefers-reduced-motion:reduce){
  #loader .jfb{animation:none;opacity:1}
  #loader .bar{width:104px;animation:none;opacity:.7}
}

.expert-page{background:var(--c4);min-height:calc(100vh - 60px);padding:clamp(2rem,5vw,5rem) 1.25rem 4rem}
.expert-wrap{max-width:1120px;margin:0 auto}
.breadcrumbs{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.8rem;color:rgba(99,13,19,.65)}
.breadcrumbs a{color:inherit;text-decoration:none}.breadcrumbs a:hover{color:var(--gold)}
.expert-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:3rem;align-items:center}
.expert-copy h1{font-family:var(--ff-s);font-size:clamp(2.2rem,5vw,4.5rem);font-weight:500;line-height:1.03;color:var(--ink);margin-bottom:1rem}
.expert-copy .lead{font-family:var(--ff-s);font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.45;color:var(--brunfonce);max-width:42rem}
.expert-copy .orn{width:54px;height:1px;background:var(--gold);margin:1.2rem 0 1.4rem}
.expert-photo{min-height:330px;border-radius:4px;background:var(--sable) center/cover no-repeat;box-shadow:0 18px 50px rgba(40,8,6,.18)}
.expert-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;margin-top:3.5rem}
.expert-body article{font-size:.92rem;line-height:1.85;color:#3b3029}
.expert-body h2{font-family:var(--ff-s);font-size:2rem;font-weight:500;color:var(--ink);margin:0 0 .8rem}
.expert-body h3{font-family:var(--ff-s);font-size:1.45rem;color:var(--ink);margin:2rem 0 .45rem}
.expert-body p{margin:0 0 1rem}.expert-aside{background:#fffaf2;border:1px solid rgba(99,13,19,.12);padding:1.4rem;align-self:start}
.expert-aside h2{font-size:1.45rem}.expert-aside ul{list-style:none}.expert-aside li{border-top:1px solid rgba(99,13,19,.12)}.expert-aside li:first-child{border-top:0}.expert-aside a{display:block;padding:.65rem 0;color:var(--ink);text-decoration:none;font-size:.75rem}.expert-aside a:hover{color:var(--gold)}
.expert-cta{margin-top:3rem;padding:1.7rem 2rem;background:var(--ink);color:var(--c4);display:flex;justify-content:space-between;gap:1.5rem;align-items:center}.expert-cta h2{color:var(--c4);font-size:1.8rem;margin:0}.expert-cta p{margin:.35rem 0 0;color:rgba(253,244,230,.78);font-size:.8rem}.expert-cta a{flex:0 0 auto;border:1px solid rgba(201,162,75,.65);padding:.8rem 1.1rem;color:var(--c4);text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem}.expert-cta a:hover{background:var(--gold);color:var(--ink)}
@media(max-width:800px){.expert-hero,.expert-body{grid-template-columns:1fr}.expert-photo{min-height:240px;order:-1}.expert-cta{flex-direction:column;align-items:flex-start}}

/* ── En-tête global ajouté aux pages SEO ── */
.topnav{position:relative;z-index:120;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.55rem 1.5rem;background:var(--ink);border-bottom:1px solid rgba(253,244,230,.12);box-shadow:0 3px 18px rgba(99,13,19,.3)}
.socials{display:flex;align-items:center;gap:.15rem}.socials a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:rgba(253,244,230,.62);transition:color .2s,background .2s}.socials a:hover{color:var(--gold);background:rgba(253,244,230,.08)}.socials svg{width:16px;height:16px;fill:currentColor;display:block}
.menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.menu>a,.menu>.nav-dropdown>.nav-trigger{position:relative;padding:.55rem 1.15rem;text-decoration:none;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(253,244,230,.78);transition:color .2s}.menu>a:hover,.menu>.nav-dropdown>.nav-trigger:hover{color:var(--c4)}.menu>a::after,.menu>.nav-dropdown>.nav-trigger::after{content:"";position:absolute;left:1.15rem;right:1.15rem;bottom:.28rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}.menu>a:hover::after,.menu>.nav-dropdown>.nav-trigger:hover::after{transform:scaleX(1)}
.langs{display:flex;align-items:center;gap:.45rem}.langs button{background:none;border:0;cursor:pointer;font-family:var(--ff-b);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(253,244,230,.55);padding:.25rem .15rem;transition:color .2s}.langs button:hover{color:var(--c4)}.langs button.on{color:var(--gold)}.langs i{font-style:normal;font-size:.58rem;color:rgba(253,244,230,.28)}
.ecran{height:auto;min-height:0;overflow:visible}
@media(max-width:900px){.topnav{grid-template-columns:auto auto;gap:.5rem;padding:.5rem .8rem}.menu{order:3;grid-column:1/-1;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}.menu>a,.menu>.nav-dropdown>.nav-trigger{padding:.4rem .7rem;font-size:.54rem;white-space:nowrap}.menu>a::after,.menu>.nav-dropdown>.nav-trigger::after{left:.7rem;right:.7rem}.langs{justify-self:end}}

.expert-aside,.expert-aside-list{height:auto!important;overflow:visible!important}.expert-aside a{padding:.3rem 0!important;font-size:.7rem!important;line-height:1.2!important}
.expert-body article a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(201,162,75,.7);text-underline-offset:3px;transition:color .2s}.expert-body article a:hover{color:var(--gold)}