/* polices hébergées localement, voir dossier /fonts — woff2 subsetté latin */
@font-face{
  font-family:'Junicode';
  src:url('fonts/Junicode-Italic.woff2') format('woff2');
  font-weight:400;
font-style:italic;
}
@font-face{
  font-family:'Paysage';
  src:url('fonts/Paysage-Regular.woff2') format('woff2');
  font-weight:400;
font-style:normal;
}
@font-face{
  font-family:'Paysage';
  src:url('fonts/Paysage-Medium.woff2') format('woff2');
  font-weight:500;
font-style:normal;
}
:root{
  --bg:#F6F3EA;
  --ink:#221E19;
  --ink-muted:#585349;
  --brique:#A83E22;
  --vert:#37502E;
  --or:#B8842A;
  --or-text:#8A631F;
  /* variante foncée de --or, seule --or-text passe le contraste AA (4.5:1) en texte sur --bg, --or reste réservé aux fonds */
  --bg-tint:#EFE6D3;
  /* --bg teinté d'or, réservé aux bandeaux plein cadre qui cassent le rythme des sections */
  /* échelle typographique (1rem = 16px, taille par défaut du navigateur) */
  --fs-label:0.875rem;
    /* 14px — labels UI mono : nav, footer, badges */
  --fs-body:1.0625rem;
    /* 17px — corps de texte */
  --fs-subhead:1.1875rem;
 /* 19px — sous-titres de carte */
  --fs-brand:1.5rem;
      /* 24px — wordmark, palier bas des titres fluides */
  --fs-heading:1.75rem;
   /* 28px — titres de section, cta, sceau de type */
  --fs-display:2rem;
      /* 32px — palier haut des titres fluides */
  --fs-logo:3rem;
         /* 48px — wordmark en en-tête, replié à --fs-brand au scroll */
  --fs-ornament:1.75rem;
  /* 28px — fleuron ❧ remplaçant les kickers */
}
*{box-sizing:border-box;
}
body{
  margin:0;
background:var(--bg);
color:var(--ink);
  font-family:'Paysage',sans-serif;
font-weight:400;
line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:53.75rem;
margin:0 auto;
padding:0 2.5rem;
}
a{color:var(--brique);
text-decoration:underline;
text-underline-offset:0.1875rem;
text-decoration-thickness:0.03125rem;
}
a:hover{color:var(--ink);
}

/* ---------- lien d'évitement, visible seulement au focus clavier ---------- */
.skip-link{
  position:absolute;
top:-2.5rem;
left:0.625rem;
z-index:100;
  background:var(--ink);
color:var(--bg);
padding:0.625rem 1rem;
  font-family:'Paysage',sans-serif;
font-size:var(--fs-label);
text-decoration:none;
  transition:top 0.15s ease;
}
.skip-link:focus{top:0.625rem;
}
.serif{font-family:'Junicode',serif;
font-style:italic;
font-weight:400;
}
h1,h2{font-family:'Junicode',serif;
font-style:italic;
font-weight:400;
margin:0;
}
strong{font-weight:600;
color:var(--ink);
}

/* ---------- frise tuiles, motif graphique récurrent ---------- */
.frise{display:flex;
height:0.625rem;
width:100%;
}
.frise span{flex:1;
}
.frise .c1{background:var(--brique);
}
.frise .c2{background:var(--ink);
}
.frise .c3{background:var(--vert);
}
.frise .c4{background:var(--or);
}

/* ---------- header ---------- */
header.top{
  position:sticky;
top:0;
z-index:50;
  background:var(--bg);
padding-top:1.875rem;
  transition:padding-top 0.2s ease,box-shadow 0.2s ease;
}
body.scrolled header.top{padding-top:0.75rem;
box-shadow:0 0.0625rem 0 rgba(34,30,25,0.1);
}
.top-row{
  display:flex;
align-items:center;
justify-content:space-between;
  padding-bottom:1.375rem;
flex-wrap:wrap;
gap:0.875rem;
}
.wordmark{font-size:var(--fs-logo);
transition:font-size 0.2s ease;
}
.wordmark .leaf{display:inline-block;
font-style:normal;
font-size:0.82em;
vertical-align:-0.08em;
margin-right:0.18em;
line-height:1;
}
body.scrolled .wordmark{font-size:var(--fs-brand);
}
.brand-link{text-decoration:none;
color:var(--ink);
}
.badge{
  font-family:'Paysage',sans-serif;
font-size:var(--fs-label);
color:var(--ink-muted);
  display:flex;
align-items:center;
gap:0.5rem;
}
.badge .dot{width:0.3125rem;
height:0.3125rem;
border-radius:50%;
background:var(--vert);
flex-shrink:0;
}
nav{display:flex;
gap:1.75rem;
font-family:'Paysage',sans-serif;
font-size:var(--fs-body);
  color:var(--ink-muted);
padding-bottom:1.375rem;
flex-wrap:wrap;
}
nav a{color:var(--ink-muted);
text-decoration:none;
}
nav a:hover{color:var(--brique);
}

/* ---------- hero ---------- */
.hero{padding-top:2.75rem;
padding-bottom:0.5rem;
}
.hero h1{
  font-family:'Paysage',sans-serif;
font-weight:400;
font-style:normal;
  font-size:clamp(var(--fs-brand),3.2vw,var(--fs-display));
line-height:1.55;
max-width:38.75rem;
color:var(--ink-muted);
}
.hero h1 strong{font-family:'Paysage',sans-serif;
font-weight:700;
color:var(--ink);
}

/* ---------- édito ---------- */
.edito{padding-top:2.375rem;
padding-bottom:4.75rem;
}
.edito .anchor{
  font-family:'Paysage',sans-serif;
font-size:var(--fs-label);
color:var(--or-text);
  display:block;
margin-bottom:1.25rem;
}
.edito p{font-size:var(--fs-body);
color:var(--ink-muted);
max-width:37.5rem;
margin:0 0 1.125rem;
}
.edito .page-title{font-size:clamp(var(--fs-brand),3.2vw,var(--fs-display));
max-width:38.75rem;
margin-bottom:0.5rem;
}

/* ---------- pages légales ---------- */
.legal{padding-bottom:3.125rem;
}
.legal.legal-last{padding-bottom:5.625rem;
}
.legal p{font-size:var(--fs-body);
color:var(--ink-muted);
max-width:40rem;
margin:0 0 1rem;
}
.legal ul{margin:0 0 1.25rem;
padding-left:1.25rem;
max-width:40rem;
}
.legal li{font-size:var(--fs-body);
color:var(--ink-muted);
margin-bottom:0.5rem;
}
.legal li strong{color:var(--ink);
}

/* ---------- section titles ---------- */
.stitle{padding:0 0 0.625rem;
}
.stitle .ornament{
  font-family:'Junicode',serif;
font-size:var(--fs-ornament);
color:var(--or-text);
  display:block;
}
.stitle h2{font-size:var(--fs-heading);
line-height:1.3;
max-width:33.75rem;
}

/* ---------- services, icônes illustrées ---------- */
.metiers{padding:2.125rem 0 5.625rem;
display:grid;
grid-template-columns:1fr 1fr;
gap:0.0625rem;
  background:rgba(34,30,25,0.1);
border:0.03125rem solid rgba(34,30,25,0.1);
}
.metier{background:var(--bg);
padding:2rem 1.875rem;
}
.metier svg{margin-bottom:1.125rem;
}
.metier h3{font-size:var(--fs-subhead);
font-weight:400;
margin:0 0 0.5rem;
}
.metier p{font-size:var(--fs-body);
color:var(--ink-muted);
margin:0;
max-width:17.5rem;
}

/* ---------- personnalisation ---------- */
.theme{padding-top:3.75rem;
padding-bottom:5.625rem;
background:var(--bg-tint);
}
.theme p{font-size:var(--fs-body);
color:var(--ink-muted);
max-width:35rem;
margin:0 0 1.125rem;
}
.theme-flex{display:flex;
gap:3.5rem;
flex-wrap:wrap;
align-items:center;
margin-top:1.875rem;
}
.type-sample{font-size:var(--fs-heading);
}
.seals{display:flex;
gap:1.125rem;
flex-wrap:wrap;
padding-top:1.625rem;
}
.seal{
  width:4.5rem;
height:4.5rem;
border-radius:50%;
display:flex;
align-items:center;
  justify-content:center;
flex-direction:column;
flex-shrink:0;
}
.seal span{font-family:'Paysage',sans-serif;
font-size:var(--fs-label);
color:var(--bg);
letter-spacing:0.02em;
}
.seal.or span{color:var(--ink);
}

/* ---------- stats, icônes + gros mots ---------- */
.stats-sec{padding-top:4.375rem;
padding-bottom:5.625rem;
}
.stats-note{font-size:var(--fs-body);
color:var(--ink-muted);
max-width:35rem;
margin:1rem 0 2.25rem;
}
.stats{display:flex;
gap:2.5rem;
flex-wrap:wrap;
align-items:flex-start;
}
.stat-featured{flex:1 1 16rem;
max-width:20rem;
}
.stat-featured svg{margin-bottom:1rem;
}
.stat-featured .big{font-size:var(--fs-display);
display:block;
margin-bottom:0.625rem;
}
.stat-featured .lbl{font-family:'Paysage',sans-serif;
font-size:var(--fs-label);
color:var(--ink-muted);
}
.stat-list{flex:1 1 16rem;
display:flex;
flex-direction:column;
gap:1.5rem;
padding-top:0.5rem;
}
.stat-row{display:flex;
flex-direction:column;
gap:0.375rem;
}
.stat-row-head{display:flex;
align-items:center;
gap:0.625rem;
}
.stat-row-head svg{flex-shrink:0;
}
.stat-row .row-word{font-size:var(--fs-subhead);
}
.stat-row .lbl{font-family:'Paysage',sans-serif;
font-size:var(--fs-label);
color:var(--ink-muted);
padding-left:1.875rem;
}

/* ---------- valeurs, mise en page asymétrique ---------- */
.values{padding-bottom:4.375rem;
}
.value-flow{margin-top:1.75rem;
}
@media (min-width:44rem){
  .values{display:grid;
  grid-template-columns:1fr 1.7fr;
  gap:0 2.5rem;
  align-items:start;
  }
  .values .stitle{padding:0;
  }
  .values .stitle h2{max-width:none;
  }
  .value-flow{margin-top:0;
  }
}
.value-flow p{font-size:var(--fs-body);
color:var(--ink-muted);
max-width:40rem;
margin:0 0 1.375rem;
}
.value-flow strong{font-family:'Junicode',serif;
font-style:italic;
font-weight:400;
font-size:1.05em;
color:var(--ink);
}
.value-flow strong.brique{color:var(--brique);
}
.value-flow strong.vert{color:var(--vert);
}
.value-flow strong.or{color:var(--or-text);
}

/* ---------- cta, illustré ---------- */
.cta{padding-top:1.875rem;
padding-bottom:2.5rem;
text-align:center;
}
.cta svg{margin-bottom:1.375rem;
}
.cta h2{font-size:var(--fs-heading);
max-width:27.5rem;
margin:0 auto 1.125rem;
}
.cta a{
  font-family:'Paysage',sans-serif;
font-size:var(--fs-body);
  display:inline-block;
padding:1rem 2.25rem;
margin-top:0.375rem;
  border:0.0625rem solid var(--brique);
border-radius:0.125rem;
  text-decoration:none;
transition:background 0.15s ease,color 0.15s ease;
}
.cta a:hover{background:var(--brique);
color:var(--bg);
}

/* ---------- footer ---------- */
footer{padding-top:0;
}
.foot-grid{display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.875rem;
padding-top:2.5rem;
padding-bottom:2.125rem;
}
.foot-col h3{
  font-family:'Paysage',sans-serif;
font-size:var(--fs-label);
color:var(--ink-muted);
  text-transform:uppercase;
letter-spacing:0.05em;
margin:0 0 0.875rem;
font-weight:500;
}
.foot-col a{display:block;
font-size:var(--fs-label);
color:var(--ink-muted);
text-decoration:none;
margin-bottom:0.5625rem;
}
.foot-col a:hover{color:var(--brique);
}
.foot-bottom{
  display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:0.625rem;
  padding-top:1.25rem;
padding-bottom:2.125rem;
font-family:'Paysage',sans-serif;
font-size:var(--fs-label);
color:var(--ink-muted);
}
@media (max-width:42.5rem){
  .foot-grid{grid-template-columns:1fr 1fr;
}
  .stats{flex-direction:column;
gap:1.625rem;
}
  .metiers{grid-template-columns:1fr;
}
  nav{gap:0.625rem 1.75rem;
}
  header.top{padding-top:1.25rem;
}
  .hero{padding-top:1.625rem;
}
  .edito{padding-top:1.375rem;
padding-bottom:2.5rem;
}
  .metiers{padding-bottom:3.125rem;
}
  .theme{padding-top:2.125rem;
padding-bottom:3.125rem;
}
  .stats-sec{padding-top:2.5rem;
padding-bottom:3.125rem;
}
  .values{padding-bottom:2.75rem;
}
  .cta{padding-top:1.125rem;
padding-bottom:1.625rem;
}
  .legal{padding-bottom:2rem;
}
  .legal.legal-last{padding-bottom:3.125rem;
}
  .foot-grid{padding-top:1.75rem;
padding-bottom:1.5rem;
}
  .foot-bottom{padding-top:0.875rem;
padding-bottom:1.5rem;
}
}

/* ---------- vrille : le trait se dessine à l'entrée dans le viewport ----------
   déclenché par IntersectionObserver (script.js), qui ajoute .in-view une
   seule fois ; animation-timeline:view() s'est montré peu fiable ici (plage
   restée bloquée en cours de route même avec l'élément entièrement visible) */
.vine-draw{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 1s ease-out;
}
.vine-draw-curl{transition-delay:0.15s;
}
.in-view .vine-draw{stroke-dashoffset:0;
}
@media (prefers-reduced-motion:reduce){
  .vine-draw{transition:none;
  stroke-dashoffset:0;
  }
}

/* ---------- sceaux de couleur : micro-interaction au survol ---------- */
.seal{transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.seal:hover{transform:scale(1.06);
box-shadow:0 0.25rem 0.75rem rgba(34,30,25,0.25);
}
@media (prefers-reduced-motion:reduce){
  .seal{transition:none;
  }
  .seal:hover{transform:none;
  }
}