/* ---------- brochure imprimable (web2print) ----------
   chargée uniquement à l'impression (media="print"), sans dépendance :
   la page web devient une brochure A4 de 4 pages, soit un A3 plié en deux.
   1. couverture · 2. l'offre · 3. les exigences et l'expérience · 4. les valeurs et le contact */
@page{
  size:A4;
  margin:16mm 18mm 20mm;
  @bottom-left{
    content:"vinoctet, un site pour raconter votre domaine";
    font-family:'Paysage',sans-serif;
    font-size:7.5pt;
    color:#585349;
  }
  @bottom-right{
    content:counter(page) " / " counter(pages);
    font-family:'Paysage',sans-serif;
    font-size:7.5pt;
    color:#585349;
  }
}
/* la couverture n'a ni folio ni titre courant */
@page :first{
  @bottom-left{content:none;
  }
  @bottom-right{content:none;
  }
}

:root{
  /* frise tuiles en un seul dégradé, pour l'ouverture de chaque page */
  --frise:linear-gradient(to right,var(--brique) 0 25%,var(--ink) 25% 50%,var(--vert) 50% 75%,var(--or) 75% 100%);
}
/* 1rem = 12.5px : le corps de texte (--fs-body) tombe à 10pt sur le papier */
html{font-size:12.5px;
}
body{background:none;
line-height:1.45;
}
.wrap{max-width:none;
padding:0;
}
/* les aplats de couleur font partie du dessin, on demande au navigateur de les imprimer */
.frise,.seal,.badge .dot,.experience,.hero::after,.edito::before,.values::before{
  -webkit-print-color-adjust:exact;
print-color-adjust:exact;
}

/* ---------- ce qui n'a pas de sens sur le papier ---------- */
.skip-link,nav,.foot-grid,main > .frise,.refs,.demo-shots{display:none;
}
a{color:var(--ink);
text-decoration:none;
}
/* l'adresse d'un lien externe s'écrit en toutes lettres */
main a[href^="https://"]::after{content:" (" attr(href) ")";
color:var(--ink-muted);
}
h2,h3{break-after:avoid;
}
p{orphans:3;
widows:3;
}
.metier,.figures li,.value-flow p,.conviction,.theme-flex,.cta{break-inside:avoid;
}

/* ---------- page 1, couverture ---------- */
body header.top,body.scrolled header.top{
  position:static;
padding-top:0;
background:none;
box-shadow:none;
transition:none;
}
.top-row{align-items:flex-end;
padding-bottom:7mm;
}
body .wordmark,body.scrolled .wordmark{font-size:6rem;
line-height:1;
transition:none;
}
.badge{padding-bottom:2mm;
}
header.top::after{content:"";
display:block;
height:3mm;
background:var(--frise);
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
.hero{
  height:205mm;
padding:0;
display:flex;
flex-direction:column;
justify-content:center;
  position:relative;
}
.hero h1{font-size:2.75rem;
line-height:1.4;
max-width:150mm;
}
/* pied de couverture : adresse du site posée sur une frise */
.hero::before{content:"vinoctet.fr";
position:absolute;
left:0;
bottom:7mm;
  font-family:'Junicode',serif;
font-style:italic;
font-size:var(--fs-heading);
}
.hero::after{content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3mm;
background:var(--frise);
}

/* ---------- ouverture des pages intérieures : saut de page + frise ---------- */
.edito,.experience,.values{break-before:page;
}
.edito::before,.values::before{
  content:"";
display:block;
height:3mm;
margin-bottom:9mm;
background:var(--frise);
}

/* ---------- page 2, l'offre ---------- */
.edito{padding:0 0 7mm;
}
.edito p{max-width:140mm;
}
.metiers{grid-template-columns:1fr 1fr;
padding:5mm 0 0;
background:none;
border:0;
gap:0;
  border-top:0.2mm solid var(--ink);
margin-top:4mm;
}
.metier{padding:5mm 6mm 5mm 0;
background:none;
border-bottom:0.2mm solid rgba(34,30,25,0.25);
}
.metier svg{margin-bottom:3mm;
}
.metier p{max-width:70mm;
}
.theme{padding:9mm 0 0;
background:none;
}
.theme p{max-width:140mm;
}
.theme-flex{margin-top:5mm;
gap:14mm;
flex-wrap:nowrap;
}
.theme-flex svg{height:34mm;
width:auto;
}
/* la vrille est dessinée d'emblée, sans attendre le défilement */
.vine-draw{stroke-dashoffset:0;
transition:none;
}
.seal{width:5rem;
height:5rem;
transition:none;
}

/* comment ça se passe, à la suite de la personnalisation */
.process{padding-top:10mm;
}
.steps{gap:6mm 10mm;
margin-top:4mm;
}
.steps li{break-inside:avoid;
}
.section-note{max-width:140mm;
}

/* ---------- page 3, l'expérience ---------- */
/* l'expérience devient un encart teinté */
.experience{padding:11mm 10mm 10mm;
}
.experience p{max-width:130mm;
}
.figures{grid-template-columns:repeat(4,1fr);
gap:6mm;
margin-top:8mm;
padding-top:7mm;
border-top:0.2mm solid var(--ink);
}
.figures .num{font-size:4rem;
}
.experience .figures-link{margin-top:7mm;
}

/* ---------- page 4, qui est derrière et contact ---------- */
.values{display:block;
padding:0 0 4mm;
}
.values .stitle{padding-bottom:4mm;
}
.value-flow{margin-top:0;
columns:3;
column-gap:10mm;
}
.value-flow p{max-width:none;
margin-bottom:4.5mm;
}
/* la présentation de l'atelier court sur les deux colonnes */
.value-flow p.about{column-span:all;
max-width:140mm;
margin-bottom:6mm;
}
.cta{margin-top:30mm;
padding:10mm 0 0;
border-top:0.2mm solid var(--ink);
}
.cta svg{margin-top:0 !important;
margin-bottom:3mm;
}
.cta h2{max-width:none;
margin-bottom:3mm;
}
/* le bouton de contact laisse place à l'adresse en clair, écrite par script.js dans data-mail-print */
.cta a{display:none;
}
.cta a[data-mail-print]{display:block;
margin:0;
padding:0;
border:0;
font-size:0;
}
.cta a[data-mail-print]::after{content:attr(data-mail-print);
font-family:'Junicode',serif;
font-style:italic;
font-size:var(--fs-heading);
color:var(--brique);
}
footer{padding-top:8mm;
break-inside:avoid;
}
footer .frise{height:3mm;
}
.foot-bottom{padding:3mm 0 0;
font-size:8pt;
}