/* Palette : modifier ces variables pour changer les couleurs du site. */
:root{
  --paper:#faf6f0;
  --ink:#59323c;
  --wine:#8c353b;
  --orange:#d95b34;
  --green:#298f70;
  --body:#493f3c;
  --muted:#6b5c58;
  --line:#dfd2c8;
  --soft:#f0e7dc;
  --white:#fffdf9;
  --max:1200px;
  --radius:3px
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font:1rem/1.75 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
img{
  display:block;
  max-width:100%;
  height:auto
}
a{
  color:var(--wine);
  text-underline-offset:.25em
}
a:hover{
  text-decoration-thickness:2px
}
button{
  font:inherit
}
a,button,summary{
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:5px
}
::selection{
  background:#ead0bd;
  color:var(--ink)
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2,h3{
  color:var(--ink)
}
h1,h2,.serif{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.04em
}
h1{
  font-size:clamp(2.7rem,5.9vw,5.6rem);
  margin-bottom:1.6rem
}
h2{
  font-size:clamp(2.15rem,4vw,3.5rem);
  margin-bottom:1.4rem
}
h3{
  font-size:1.1rem;
  line-height:1.4
}
p{
  margin-bottom:1.3rem
}
ul{
  padding-left:1.25rem
}
li+li{
  margin-top:.4rem
}
.wrap{
  width:min(calc(100% - 96px),var(--max));
  margin-inline:auto
}
.skip{
  position:fixed;
  left:1rem;
  top:-100px;
  background:var(--white);
  padding:.8rem;
  z-index:10
}
.skip:focus{
  top:1rem
}
.site-header{
  border-top:5px solid var(--wine);
  border-bottom:1px solid var(--line)
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:104px
}
.brand{
  text-decoration:none;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:13px
}
.brand-logo{
  position:relative;
  display:block;
  width:136px;
  aspect-ratio:2.65;
  overflow:hidden;
  flex-shrink:0
}
/* Recadrage d’affichage : le fichier logo original reste intact. */
.brand-image{
  position:absolute;
  width:100%;
  max-width:none;
  height:auto;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(1.62)
}
.brand-name{
  font:600 1.15rem/1.2 Georgia,serif;
  letter-spacing:.01em
}
.nav-list{
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
  padding:0;
  margin:0
}
.nav-list li{
  margin:0
}
.nav-list a{
  display:inline-block;
  text-decoration:none;
  font-size:.9rem;
  padding:.4rem 0;
  border-bottom:2px solid transparent
}
.nav-list a[aria-current=page]{
  border-color:var(--wine)
}
.nav-list .nav-contact{
  border:1px solid var(--wine);
  padding:.55rem 1.05rem
}
.nav-list .nav-contact:hover{
  background:var(--wine);
  color:white
}
.menu-toggle{
  display:none;
  border:1px solid var(--line);
  color:var(--ink);
  background:transparent;
  padding:.45rem .8rem
}
.eyebrow{
  font-size:.7rem;
  letter-spacing:.18em;
  font-weight:650;
  text-transform:uppercase;
  color:var(--wine);
  margin-bottom:1.4rem;
  display:flex;
  align-items:center;
  gap:.7rem
}
.eyebrow:before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor
}
.hero{
  padding-block:64px 72px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8%;
  align-items:center
}
.hero-copy{
  padding-block:1rem
}
.hero-copy .intro{
  max-width:490px;
  font-size:1.05rem
}
.hero h1 em{
  font-weight:400;
  color:var(--wine)
}
.hero-image{
  position:relative;
  padding:0 0 20px 20px
}
.hero-image:before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:24px;
  top:24px;
  background:var(--soft);
  z-index:-1
}
.hero-image img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 40%
}
.photo-caption{
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  position:absolute;
  bottom:-12px;
  right:0;
  color:var(--muted)
}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin:2rem 0 1.5rem
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1.3rem;
  padding:.8rem 1.15rem;
  text-decoration:none;
  border:1px solid var(--wine);
  font-weight:550;
  font-size:.86rem;
  line-height:1.5;
  min-height:48px
}
.button.primary{
  background:var(--wine);
  color:white
}
.button:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:white
}
.button.text{
  border-color:transparent;
  padding-left:.4rem;
  padding-right:.4rem
}
.button.text:hover{
  background:transparent;
  color:var(--ink);
  text-decoration:underline
}
.arrow{
  font-size:1.2em;
  font-weight:400
}
.hero-note{
  font-size:.77rem;
  color:var(--muted);
  margin:0
}
.ribbon{
  border-block:1px solid var(--line);
  padding:1rem 0
}
.ribbon-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:.74rem;
  letter-spacing:.07em
}
.ribbon-inner span{
  display:flex;
  align-items:center;
  gap:.7rem
}
.ribbon-inner span:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange)
}
.section{
  padding-block:88px
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:3rem;
  margin-bottom:2.7rem
}
.section-head h2{
  margin-bottom:0
}
.section-head>p{
  max-width:350px;
  font-size:.94rem;
  margin-bottom:0
}
.services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line)
}
.service{
  padding:2rem 1.5rem 1rem 0;
  border-bottom:1px solid var(--line);
  margin-right:1.5rem
}
.service:last-child{
  margin-right:0
}
.number{
  display:block;
  font-size:.7rem;
  color:var(--wine);
  margin-bottom:2.1rem
}
.service h3{
  font:400 1.6rem Georgia,serif
}
.service p{
  font-size:.9rem
}
.service a{
  font-size:.8rem;
  font-weight:600
}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  align-items:center
}
.split>div>p:last-child{
  margin-bottom:0
}
.feature-photo{
  width:100%;
  aspect-ratio:5/6;
  object-fit:cover
}
.tinted{
  background:var(--soft)
}
.pullquote{
  border-left:2px solid var(--orange);
  padding-left:1.5rem;
  font:400 1.7rem/1.45 Georgia,serif;
  color:var(--ink);
  margin:2rem 0
}
.contact-band{
  padding-block:60px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem
}
.contact-band h2{
  font-size:clamp(2rem,3.5vw,3rem);
  margin-bottom:.8rem
}
.contact-band p{
  margin:0
}
.site-footer{
  background:var(--ink);
  color:var(--paper);
  padding:46px 0 24px
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:3rem;
  padding-bottom:32px
}
.footer-title{
  font:400 1.8rem Georgia,serif;
  color:var(--paper);
  margin-bottom:.7rem
}
.site-footer p,.site-footer a{
  font-size:.82rem
}
.site-footer a{
  color:var(--paper)
}
.footer-links{
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:.55rem
}
.footer-bottom{
  border-top:1px solid #86646b;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.7rem
}
.footer-bottom a{
  font-size:.7rem
}
.page-head{
  padding-block:60px 40px;
  max-width:900px
}
.page-head h1{
  font-size:clamp(2.8rem,5.8vw,5rem)
}
.page-head .lead{
  font-size:1.15rem;
  max-width:730px
}
.breadcrumb{
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:32px
}
.anchor-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.8rem;
  padding-block:18px;
  border-block:1px solid var(--line);
  font-size:.82rem
}
.work-intro{
  padding-top:55px
}
.work-intro .feature-photo{
  aspect-ratio:5/4;
  object-position:center 62%
}
.details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 3rem;
  margin-top:2rem
}
.detail{
  border-top:1px solid var(--line);
  padding-top:1.3rem;
  margin-top:1rem
}
.detail p{
  font-size:.93rem
}
.notice{
  padding:1.3rem 1.5rem;
  background:var(--soft);
  border-left:3px solid var(--green);
  margin-top:2rem
}
.notice p{
  margin:0
}
.work-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-top:2.5rem
}
.work-pair img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}
.work-pair figure{
  margin:0
}
.steps{
  counter-reset:step;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  list-style:none;
  padding:0;
  gap:1.5rem;
  margin:2.5rem 0 0
}
.steps li{
  margin:0;
  border-top:1px solid var(--line);
  padding-top:1rem
}
.steps li:before{
  counter-increment:step;
  content:"0" counter(step);
  display:block;
  color:var(--wine);
  font-size:.75rem;
  margin-bottom:1rem
}
.steps strong{
  display:block;
  color:var(--ink);
  font-size:.92rem
}
.steps p{
  font-size:.84rem;
  margin:.5rem 0
}
.course-hero{
  align-items:start
}
.course-hero .hero-image img{
  aspect-ratio:3/4;
  object-position:center
}
.facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-block:1px solid var(--line);
  margin:1.8rem 0
}
.facts>div{
  padding:1rem 1rem 1rem 0
}
.facts dt{
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted)
}
.facts dd{
  margin:.3rem 0 0;
  font-size:.9rem;
  font-weight:600;
  color:var(--ink)
}
.learning-list{
  list-style:none;
  padding:0;
  margin:0
}
.learning-list li{
  display:grid;
  grid-template-columns:35px 1fr;
  gap:1rem;
  border-top:1px solid var(--line);
  padding-block:1.1rem;
  margin:0
}
.learning-list span{
  color:var(--wine);
  font-size:.8rem
}
.learning-list p{
  margin:0;
  font-size:.94rem
}
.learning-list strong{
  color:var(--ink)
}
.schedule{
  margin:0
}
.schedule>div{
  padding:1rem 0;
  border-bottom:1px solid var(--line)
}
.schedule dt{
  color:var(--ink);
  font-weight:600
}
.schedule dd{
  margin:.4rem 0 0
}
.contact-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8%;
  padding-bottom:60px
}
.contact-link{
  display:block;
  text-decoration:none;
  border-top:1px solid var(--line);
  padding:1.5rem 0;
  overflow-wrap:anywhere
}
.contact-link .label{
  display:block;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted)
}
.contact-link .value{
  font:400 clamp(1.3rem,2.3vw,2rem)/1.4 Georgia,serif
}
.contact-link:hover .value{
  text-decoration:underline
}
.contact-aside{
  background:var(--soft);
  padding:2rem
}
.contact-aside h2{
  font-size:2rem
}
.social-links{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  margin-top:1.5rem
}
.legal{
  border-top:1px solid var(--line);
  padding-block:45px;
  max-width:850px
}
.legal h2{
  font-size:2rem
}
.legal h3{
  margin-top:1.8rem
}
.legal p,.legal li{
  font-size:.88rem
}
.draft-note{
  border-left:3px solid var(--orange);
  padding:1rem 1.2rem;
  background:var(--soft)
}
.narrow{
  max-width:760px
}
.mt{
  margin-top:2rem
}
@media(min-width:1500px){
  .hero{
    padding-block:85px
  }
}
@media(max-width:1000px){
  .wrap{
    width:calc(100% - 56px)
  }
  .hero{
    gap:5%
  }
  h1{
    font-size:clamp(2.8rem,6vw,4.7rem)
  }
  .nav-list{
    gap:1.25rem
  }
  .brand-logo{
    width:104px
  }
  .brand-name{
    font-size:1rem
  }
  .services{
    grid-template-columns:repeat(2,1fr)
  }
  .service{
    padding-bottom:1.6rem
  }
  .service:nth-child(2){
    margin-right:0
  }
  .section{
    padding-block:64px
  }
  .steps{
    grid-template-columns:repeat(3,1fr)
  }
  .ribbon-inner{
    flex-wrap:wrap;
    justify-content:center;
    gap:.6rem 2rem
  }
  .actions{
    gap:.5rem
  }
  .button{
    gap:.8rem;
    padding:.75rem .9rem
  }
}
@media(max-width:720px){
  .wrap{
    width:calc(100% - 40px)
  }
  .header-inner{
    min-height:90px;
    flex-wrap:wrap;
    gap:0;
    padding-block:12px
  }
  .brand-logo{
    width:96px
  }
  .brand-name{
    font-size:.95rem
  }
  .site-nav{
    width:100%;
    padding-top:1rem
  }
  .nav-list{
    justify-content:space-between;
    gap:.5rem;
    flex-wrap:wrap
  }
  .nav-list a{
    font-size:.82rem
  }
  .js .menu-toggle{
    display:block
  }
  .js .site-nav:not(.is-open){
    display:none
  }
  .js .nav-list{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .js .nav-list a{
    display:block;
    padding:.75rem .5rem
  }
  .js .nav-list .nav-contact{
    margin-top:.5rem;
    padding:.75rem
  }
  .hero{
    grid-template-columns:1fr;
    padding-block:35px 50px;
    gap:2rem
  }
  .hero-copy{
    padding:0
  }
  h1{
    font-size:clamp(2.8rem,11vw,4.8rem)
  }
  .hero-copy .intro{
    font-size:1rem
  }
  .eyebrow{
    font-size:.64rem;
    margin-bottom:1.2rem
  }
  .hero-image{
    max-width:500px;
    width:100%;
    justify-self:center;
    padding-left:14px;
    padding-bottom:14px
  }
  .hero-image img{
    aspect-ratio:5/4;
    object-position:50% 36%
  }
  .photo-caption{
    bottom:-16px;
    font-size:.58rem
  }
  .hero-note{
    font-size:.72rem
  }
  .actions{
    margin-top:1.5rem
  }
  .ribbon-inner{
    justify-content:start;
    font-size:.68rem
  }
  .section{
    padding-block:50px
  }
  .section-head{
    display:block;
    margin-bottom:1.7rem
  }
  .section-head>p{
    margin-top:1.5rem;
    max-width:none
  }
  .services{
    gap:0 1rem
  }
  .service{
    margin:0;
    padding:1.3rem .3rem 1.5rem 0
  }
  .number{
    margin-bottom:1rem
  }
  .service h3{
    font-size:1.35rem
  }
  .service p{
    font-size:.85rem
  }
  .split{
    grid-template-columns:1fr;
    gap:2rem
  }
  .feature-photo{
    max-height:470px;
    aspect-ratio:5/4
  }
  .split .feature-photo{
    order:2
  }
  .contact-band{
    display:block;
    padding-block:40px
  }
  .contact-band .button{
    margin-top:1.5rem
  }
  .footer-top{
    grid-template-columns:1fr;
    gap:1.6rem
  }
  .footer-bottom{
    flex-direction:column;
    gap:.7rem
  }
  .footer-links{
    gap:.45rem
  }
  .page-head{
    padding-block:35px 25px
  }
  .page-head h1{
    font-size:clamp(2.7rem,10.5vw,4rem)
  }
  .page-head .lead{
    font-size:1rem
  }
  .breadcrumb{
    margin-bottom:25px
  }
  .anchor-nav{
    gap:.6rem 1.3rem
  }
  .details-grid{
    grid-template-columns:1fr;
    gap:0
  }
  .work-pair{
    gap:1rem
  }
  .work-pair img{
    aspect-ratio:3/4
  }
  .steps{
    grid-template-columns:1fr;
    gap:1rem
  }
  .steps li{
    display:grid;
    grid-template-columns:35px 1fr;
    column-gap:1rem
  }
  .steps li:before{
    grid-row:span 2
  }
  .steps p{
    grid-column:2;
    margin-top:.3rem
  }
  .course-hero .hero-image img{
    aspect-ratio:4/5;
    object-position:center 40%
  }
  .contact-layout{
    grid-template-columns:1fr;
    gap:2rem;
    padding-bottom:40px
  }
  .contact-aside{
    padding:1.5rem
  }
  .contact-link .value{
    font-size:clamp(1.2rem,5.8vw,1.8rem)
  }
  .legal{
    padding-block:30px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

/* Montrer la spatule dans la partie haute de la photo, à toutes les tailles. */
.work-pair .photo-top{
  object-position:center top;
}

/* Aperçu cartographique local : le lien ouvre Google Maps, sans intégration tierce. */
.contact-map{padding-bottom:60px}
.contact-map h2{font-size:clamp(2rem,3.5vw,3rem)}
.map-card{margin:1.5rem 0 0;border:1px solid var(--line);background:var(--white)}
.map-preview{display:block;text-decoration:none}
.map-preview img{width:100%;height:auto;max-height:400px;object-fit:cover}
.map-action{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;font-size:.9rem;font-weight:600;border-top:1px solid var(--line)}
.map-preview:hover .map-action{background:var(--wine);color:white}
.map-card figcaption{padding:.7rem 1.25rem;font-size:.72rem;color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:720px){.contact-map{padding-bottom:40px}.map-action{font-size:.82rem;padding:1rem}.map-card figcaption{padding:.7rem 1rem}}