/* Feuille de style neuve, DA moutons et oliviers. Albert Sans hébergée, aucun appel à Google. */
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 600;font-display:block;src:url(/polices/albert-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 600;font-display:block;src:url(/polices/albert-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --fond:#FFFFFF;
  --texte:#18201B;
  --etiquette:#F2F3F0;
  --trait:#DCDED8;
  --gris:#5B6159;
  --gris-fort:#3A413C;
  --gris-logo:#666D64;
  --marge:clamp(16px,3vw,40px);
  --ecart-etiq:clamp(24px,3vw,48px);   /* espace sous toute étiquette (Introduction, Réalisations, Blog…) */
  --pad-bloc:clamp(64px,9vw,140px);    /* hauteur d'air au-dessus et au-dessous de chaque section */
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Albert Sans',system-ui,sans-serif;font-weight:400;background:var(--fond);color:var(--texte);line-height:1.4}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--texte);outline-offset:3px}
.sur-image a:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 2px var(--texte)}
.sauter{position:absolute;left:-9999px}
.sauter:focus{left:var(--marge);top:8px;z-index:10;background:#fff;padding:10px 14px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Logo : le mot et son .com */
.logo{display:inline-block;font-weight:400;letter-spacing:-.045em;line-height:1.2;white-space:nowrap;color:var(--texte)}
.logo i{font-style:normal;color:var(--gris-logo)}

/* Étiquettes */
.etiquette{background:var(--etiquette);color:var(--texte);display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:2px;font-size:16px;line-height:1.25}
.etiq{display:inline-block;background:var(--etiquette);color:var(--texte);padding:10px 14px;font-size:14px;line-height:1.2;border-radius:2px;margin-bottom:var(--ecart-etiq)}

/* Haut de page : posé sur l'image (accueil) ou sur le blanc (pages intérieures) */
.haut{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.haut nav{display:flex;gap:22px}
.haut nav a{display:inline-flex;align-items:center;min-height:44px}
.haut nav a:hover,.haut nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.sur-image .haut{position:absolute;top:var(--marge);left:var(--marge);right:var(--marge);z-index:2}
.entete-page{padding:var(--marge) var(--marge) 0}

/* Accueil : plein écran */
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:460px;background:var(--texte);overflow:hidden}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero img{object-fit:cover;object-position:56% 100%}
.bas{position:absolute;left:var(--marge);right:var(--marge);bottom:calc(var(--marge) + 4px);z-index:2;color:#fff}

/* Titres */
h1{font-weight:400;font-size:clamp(38px,5.6vw,88px);line-height:1.03;letter-spacing:-.018em;max-width:16ch;text-wrap:balance}
h2{font-weight:400;font-size:clamp(30px,4vw,60px);line-height:1.08;letter-spacing:-.015em;max-width:18ch;text-wrap:balance}
h3{font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.005em}
.texte{font-size:clamp(18px,1.5vw,22px);line-height:1.55;max-width:46ch;text-wrap:pretty}
.discret{color:var(--gris)}
.intro-ligne{margin-top:20px;max-width:50ch}

/* Boutons */
.action{display:inline-flex;align-items:center;min-height:48px;margin-top:clamp(18px,2.2vw,30px);background:#fff;color:var(--texte);padding:0 26px;font-size:18px;border-radius:2px;border:0;font-family:inherit;cursor:pointer}
.action:hover{background:var(--etiquette)}
.action.fonce{background:var(--texte);color:#fff}
.action.fonce:hover{background:#2C3730}
.lien{text-decoration:underline;text-underline-offset:4px}

/* Sections */
.bloc{position:relative;padding:var(--pad-bloc) var(--marge);border-top:1px solid var(--trait)}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.intro h2{max-width:20ch}

/* Réalisations */
.projets{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(32px,4vw,64px)}
.projet .vide,.vide{aspect-ratio:4/3;background:var(--etiquette);border:1px solid var(--trait);display:flex;align-items:flex-end;padding:14px;font-size:14px;color:var(--gris)}

/* Respiration : image plein écran */
.respire{height:100vh;height:100svh;min-height:420px;padding:0;overflow:hidden;background:var(--texte)}
.respire img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 18%;transform:scale(1.18)}

/* Offres, étapes, paiement */
.offres,.etapes,.paiement{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(32px,4vw,64px)}
.offre,.etape{border-top:1px solid var(--trait);padding-top:20px}
.offre .num,.etape .num{font-size:14px;color:var(--gris);margin-bottom:28px}
.offre .prix{margin-top:10px;font-size:clamp(34px,3.4vw,52px);letter-spacing:-.02em;line-height:1.05}
.offre .prix span{font-size:16px;letter-spacing:0;color:var(--gris);margin-left:6px}
.offre ul{list-style:none;padding:0;margin-top:22px}
.offre li{padding:11px 0;border-top:1px solid var(--trait);font-size:17px;line-height:1.4;color:var(--gris-fort)}
.offre .note{margin-top:14px;font-size:16px}
.offres-pied{margin-top:clamp(28px,3vw,44px);font-size:16px;color:var(--gris);max-width:70ch;text-wrap:pretty}
.etape p{margin-top:12px;font-size:18px;line-height:1.5;color:var(--gris-fort);max-width:34ch;text-wrap:pretty}
.paiement{margin-top:clamp(32px,4vw,56px)}
.paiement div{background:var(--etiquette);padding:18px 20px;font-size:16px;line-height:1.4}
.paiement b{display:block;font-weight:500;font-size:18px;margin-bottom:4px}

/* À propos, avis */
.apropos{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:start}
.apropos .texte{margin-top:24px}
.avis{display:grid;grid-template-columns:5fr 7fr;gap:clamp(16px,2.4vw,32px);margin-top:clamp(32px,4vw,64px)}
.avis .carte{border:1px solid var(--trait);padding:clamp(22px,2.4vw,36px)}
.avis .carte:first-child{grid-row:span 2}
.avis .note{font-size:clamp(56px,6vw,96px);letter-spacing:-.03em;line-height:1}
.avis .note-lib{margin-top:12px;font-size:17px;color:var(--gris)}
.avis blockquote{font-size:clamp(20px,1.9vw,28px);line-height:1.35;letter-spacing:-.005em;text-wrap:pretty}
.avis cite{display:block;margin-top:20px;font-style:normal;font-size:15px;color:var(--gris)}

/* Contact et formulaire */
.contact-bloc{text-align:center;padding-top:clamp(88px,12vw,180px);padding-bottom:clamp(88px,12vw,180px)}
.contact-bloc h2{margin:0 auto;max-width:20ch}
.contact-bloc .coord{margin-top:clamp(24px,3vw,40px);font-size:clamp(20px,2vw,28px);line-height:1.5}
.contact-bloc .coord a{display:inline-block;padding:9px 0}
.contact-bloc .coord a:hover{text-decoration:underline;text-underline-offset:5px}
.contact-bloc .petit{margin:18px auto 0;max-width:52ch;font-size:17px;color:var(--gris);text-wrap:balance}
.contact-bloc .action{background:var(--texte);color:#fff;margin-top:clamp(24px,3vw,36px)}
.contact-bloc .action:hover{background:#2C3730}
.formulaire{display:grid;gap:18px;max-width:560px;text-align:left;margin:clamp(24px,3vw,40px) auto 0}
.champ{display:grid;gap:6px}
.champ label{font-size:14px;color:var(--gris)}
.champ input,.champ textarea{font:inherit;font-size:17px;color:var(--texte);background:#fff;border:1px solid var(--trait);border-radius:2px;padding:12px 14px;min-height:48px;width:100%}
.champ textarea{min-height:140px;resize:vertical}
.champ input:hover,.champ textarea:hover{border-color:var(--gris)}
.piege{position:absolute;left:-9999px}
.form-note{font-size:15px;color:var(--gris)}
.form-ok{background:var(--etiquette);padding:18px 20px;font-size:17px}

/* Pages intérieures : texte courant et article */
.formulaire .action{justify-self:start}
.chapo{margin-top:20px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--gris-fort);max-width:56ch;text-wrap:pretty}

/* Pied de page */
.pied{border-top:1px solid var(--trait);padding:40px var(--marge) 48px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;font-size:16px;line-height:1.6;color:var(--gris-fort)}
.pied a{display:inline-flex;align-items:center;min-height:44px}
.pied a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:800px){
  .intro,.apropos,.projets,.avis,.offres,.etapes,.paiement{grid-template-columns:1fr}
  .avis .carte:first-child{grid-row:auto}
  .pied{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  
  .etiquette{font-size:15px;padding:0 14px}
  .hero img{object-position:70% 100%}
  .action{font-size:17px;padding:0 22px;min-height:46px}
  .pied{grid-template-columns:1fr}
}
.champ select{font:inherit;font-size:17px;color:var(--texte);background:#fff;border:1px solid var(--trait);border-radius:2px;padding:0 14px;min-height:48px;width:100%}
.champ label span{color:var(--gris)}
.offre .choisir{display:inline-flex;align-items:center;min-height:44px;margin-top:14px}
.projet .lien{display:inline-flex;align-items:center;min-height:44px;margin-top:6px}
#form-status{font-size:15px;color:#9B1C1C}
/* Sur l'image : logo et menu sans étiquette, en blanc ; seuls les boutons gardent le fond blanc */
.sur-image .haut .etiquette{background:transparent;color:#fff;padding:0;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.sur-image .haut nav.etiquette{gap:26px}
.sur-image .haut .logo{color:#fff}
.sur-image .haut .logo i{color:rgba(255,255,255,.72)}
.apropos h2{max-width:none}
.hero h1{max-width:none}
@media (max-width:640px){.hero h1 br.d{display:none}}

/* ===== Pages intérieures ===== */
:root{--rouge:#18201B;--encre:#18201B;--filet:#DCDED8;--gris-compat:#5B6159;--police:'Albert Sans',system-ui,sans-serif;--bg:#fff;--surface:#F2F3F0;--line:#DCDED8;--text:#18201B;--muted:#5B6159;--display:var(--police);--reading:var(--police)}
[hidden]{display:none !important}
.nw{white-space:nowrap}
.bouton,.button{display:inline-flex;align-items:center;min-height:48px;background:var(--texte);color:#fff;padding:0 26px;font:400 18px/1.2 'Albert Sans',system-ui,sans-serif;border-radius:2px;border:0;cursor:pointer}
.bouton:hover,.button:hover{background:#2C3730;color:#fff}
form .bouton,form .button{margin-top:22px}
.page-tete{padding:clamp(40px,6vw,96px) var(--marge) clamp(8px,2vw,24px)}
.page-tete .fil{font-size:15px;color:var(--gris);margin-bottom:22px}
.page-tete .fil a{text-decoration:underline;text-underline-offset:4px}
.page-tete h1{font-size:clamp(34px,4.6vw,72px);max-width:20ch}
.page-tete .chapo{margin-top:20px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--gris-fort);max-width:44em;text-wrap:pretty}
.page-tete .meta{margin-top:18px;font-size:15px;color:var(--gris)}
.page-tete .action,.page-tete .bouton{margin-top:28px}
.texte-page{padding:clamp(32px,5vw,72px) var(--marge) clamp(64px,9vw,120px)}
.article-body{max-width:760px;color:var(--gris-fort)}
.article-body section+section:not(.chap){margin-top:56px;padding-top:48px;border-top:1px solid var(--trait)}
.article-body h2{font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.01em;margin-bottom:20px;max-width:none;color:var(--texte)}
.article-body h3{font-weight:500;font-size:22px;margin:28px 0 10px;color:var(--texte)}
.article-body>*+h2{margin-top:64px}
.article-body>*+h3{margin-top:40px}
.article-body p,.article-body li{font-size:19px;line-height:1.65}
.article-body p+p,.article-body p+ul,.article-body ul+p,.article-body ol+p{margin-top:16px}
.article-body ul,.article-body ol{margin:16px 0 0 1.2em}
.article-body li+li{margin-top:8px}
.article-body a:not(.bouton):not(.button):not(.action){text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gris)}
.article-body strong,.article-body b{font-weight:500;color:var(--texte)}
.article-body table{border-collapse:collapse;width:100%;margin-top:20px;font-size:17px}
.article-body th,.article-body td{text-align:left;padding:10px 12px;border-top:1px solid var(--trait)}
.legal-facts{margin-top:24px;border-top:1px solid var(--trait)}
.legal-facts div{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:14px 0;border-bottom:1px solid var(--trait);font-size:18px}
.legal-facts dt{font-weight:500;color:var(--texte)}
.article-cta{margin-top:72px;padding-top:48px;border-top:1px solid var(--trait)}
.article-cta h2{margin-bottom:24px}
.article-body .tarif-liste li{flex-wrap:wrap;column-gap:24px}
.article-body .etapes-liste li+li{margin-top:12px}
.article-body .tarif-liste b{white-space:normal}
.journal{border-top:1px solid var(--trait)}
.journal-row{display:grid;grid-template-columns:220px minmax(0,1fr) auto;column-gap:40px;align-items:baseline;padding:36px 0;border-bottom:1px solid var(--trait)}
.journal-row>span:first-child{grid-column:1;grid-row:1;font-size:14px;color:var(--gris)}
.journal-row h2{grid-column:2;grid-row:1;font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.12;max-width:none}
.journal-row p{grid-column:2;grid-row:2;margin-top:12px;font-size:18px;line-height:1.55;color:var(--gris-fort);max-width:40em}
.journal-read{grid-column:3;grid-row:1;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.journal-row:hover h2{text-decoration:underline;text-underline-offset:5px}
.article-grille{display:grid;grid-template-columns:minmax(0,760px) 300px;justify-content:space-between;column-gap:96px;max-width:1160px;margin:0 auto}
.entete-article{max-width:calc(1160px + 2 * var(--marge));margin:0 auto}
.aside-article{position:sticky;top:40px;align-self:start;padding-top:6px}
.progression{height:2px;background:var(--trait);margin-bottom:28px}
.progression span{display:block;height:100%;width:0;background:var(--texte)}
.aside-titre{font-size:14px;color:var(--gris);margin-bottom:12px}
.sommaire{display:flex;flex-direction:column;margin-bottom:40px}
.sommaire a{padding:9px 0 9px 16px;border-left:2px solid var(--trait);color:var(--gris);font-size:15px;line-height:1.35}
.sommaire a:hover{color:var(--texte)}
.sommaire a[aria-current]{border-left-color:var(--texte);color:var(--texte);font-weight:500}
.autres{display:flex;flex-direction:column;border-top:1px solid var(--texte)}
.autres a{padding:14px 0;border-bottom:1px solid var(--trait);font-size:16px;line-height:1.3}
.autres a:hover{text-decoration:underline;text-underline-offset:4px}
.article-body h2[id]{scroll-margin-top:32px}
.field{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.field label{font-size:15px;color:var(--gris)}
.field label span{opacity:1}
.field input,.field select,.field textarea{font:400 17px/1.4 'Albert Sans',system-ui,sans-serif;color:var(--texte);background:#fff;border:1px solid var(--trait);border-radius:2px;padding:13px 14px;width:100%;min-height:48px}
.field textarea{resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-trap{position:absolute;left:-9999px}
.case,.check{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;margin:18px 0 0;font-size:16px;line-height:1.5}
.case input,.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--texte)}
.form-note{margin-top:18px;font-size:15px;line-height:1.5;color:var(--gris)}
.form-note a{text-decoration:underline;text-underline-offset:3px}
#form-status,#apporteur-status{margin-top:16px;font-size:16px}
.form-success,#apporteur-success{padding:24px;background:var(--etiquette);font-size:18px;line-height:1.5}
.perdu{min-height:40vh}
@media (max-width:1100px){.article-grille{grid-template-columns:minmax(0,1fr)}.aside-article{position:static;margin-top:64px}.bloc-sommaire{display:none}}
@media (max-width:800px){.legal-facts div{grid-template-columns:minmax(0,1fr);gap:4px}.journal-row{grid-template-columns:minmax(0,1fr);gap:12px;padding:28px 0}.journal-row>*,.journal-row>span:first-child{grid-column:1 !important;grid-row:auto !important}.journal-read{justify-self:start}.form-row{grid-template-columns:minmax(0,1fr)}.article-body p,.article-body li{font-size:18px}}
.article-cta h2{font-size:clamp(24px,2.4vw,34px);max-width:none}
.article-cta p{margin-bottom:24px}
.section{padding:var(--pad-bloc) var(--marge);border-top:1px solid var(--trait)}
main>.section:first-child{border-top:0}
.tete{margin-bottom:clamp(32px,4vw,56px)}
.tete h2{font-weight:400;font-size:clamp(28px,3.4vw,52px);line-height:1.08;max-width:22ch}
.tete p{margin-top:20px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--gris);max-width:40em;text-wrap:pretty}
.article-body .tarif-liste{margin-left:0;padding:0}
/* ===== Blog et articles : même langage que l'accueil ===== */
.page-tete .fil{display:inline-block;background:var(--etiquette);color:var(--texte);padding:10px 14px;font-size:14px;line-height:1.2;border-radius:2px;margin-bottom:var(--ecart-etiq)}
.page-tete .fil a{text-decoration:none}
.page-tete .fil a:hover{text-decoration:underline;text-underline-offset:3px}
.page-tete h1{font-size:clamp(36px,5vw,80px);line-height:1.04}
.page-tete .meta{display:inline-block;margin-top:22px;background:var(--etiquette);padding:8px 12px;border-radius:2px;color:var(--gris-fort)}
.journal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);border:0}
.journal-row{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:clamp(24px,2.6vw,40px);background:var(--etiquette);border:0;min-height:clamp(300px,26vw,400px)}
.journal-row>span:first-child{display:inline-block;background:#fff;color:var(--texte);padding:8px 12px;border-radius:2px;font-size:14px;line-height:1.2}
.journal-row h2{margin-top:clamp(28px,4vw,64px);font-size:clamp(26px,2.6vw,38px);line-height:1.1;max-width:20ch}
.journal-row p{margin-top:14px;font-size:17px;max-width:38em}
.journal-read{margin-top:auto;padding-top:28px}
.article-body{counter-reset:s}
.article-body>section>h2::before,.article-body>h2::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font-size:14px;letter-spacing:0;color:var(--gris);margin-bottom:14px}
.article-cta{background:var(--texte);color:#fff;padding:clamp(28px,4vw,56px);border:0;margin-top:72px}
.article-cta h2{color:#fff;max-width:18ch}
.article-cta p{color:rgba(255,255,255,.82);font-size:19px}
.article-cta .button{background:#fff;color:var(--texte)}
.article-cta .button:hover{background:var(--etiquette)}
.aside-article{background:var(--etiquette);padding:24px;border-radius:2px;top:32px}
.aside-article .progression{background:var(--trait)}
.autres{border-top-color:var(--trait)}
@media (max-width:800px){.journal{grid-template-columns:minmax(0,1fr)}.journal-row{min-height:0}.aside-article{padding:20px}}
/* ===== Rythme : une ambiance par bloc ===== */
.page-tete.entete-article{max-width:none;margin:0}
.article-page{padding:0 0 clamp(48px,7vw,96px)}
.progression{position:fixed;top:0;left:0;right:0;height:3px;margin:0;background:transparent;z-index:20}
.progression span{background:var(--texte)}
.puces{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:0;padding:clamp(24px,3vw,40px) var(--marge) 0}
.puces a{border:0;padding:10px 14px;background:var(--etiquette);border-radius:2px;font-size:14px;line-height:1.2;color:var(--texte)}
.puces a:hover{background:var(--trait)}
.puces a[aria-current]{background:var(--texte);color:#fff;border:0;font-weight:400}
.article-page .article-body{max-width:none;color:var(--gris-fort)}
.intro-art{padding:clamp(32px,5vw,72px) var(--marge) clamp(32px,5vw,72px)}
.intro-art p{font-size:clamp(21px,2vw,28px);line-height:1.42;color:var(--texte);max-width:44em;text-wrap:pretty}
.intro-art p+p{margin-top:18px}
.chap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,96px);padding:clamp(48px,7vw,104px) var(--marge);border-top:1px solid var(--trait);margin:0}
.chap:nth-of-type(even){background:var(--etiquette);border-top-color:transparent}
.chap>h2{position:sticky;top:32px;align-self:start;margin:0;font-size:clamp(28px,3.4vw,52px);line-height:1.06;max-width:14ch}
.chap>h2::before{display:block;font-size:14px;letter-spacing:0;color:var(--gris);margin-bottom:18px}
.chap-corps{max-width:62ch}
.chap-corps>p:first-child{font-size:clamp(20px,1.8vw,24px);line-height:1.45;color:var(--texte)}
.chap-corps>*+*{margin-top:16px}
.article-page .article-cta{margin:0;padding:clamp(56px,8vw,120px) var(--marge);background:var(--texte);color:#fff}
.article-page .article-cta h2{font-size:clamp(32px,4vw,60px);max-width:16ch;margin-bottom:20px}
.article-page .article-cta p{font-size:clamp(18px,1.6vw,22px);color:rgba(255,255,255,.85)}
.article-page .article-cta .button{margin-top:28px}
.a-lire{padding:clamp(48px,7vw,104px) var(--marge)}
.a-lire .aside-titre{margin-bottom:20px}
.a-lire .autres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);border:0}
.a-lire .autres a{display:flex;align-items:flex-end;min-height:160px;padding:clamp(22px,2.4vw,32px);background:var(--etiquette);border:0;font-size:clamp(18px,1.6vw,22px);line-height:1.25}
.a-lire .autres a:hover{background:var(--trait);text-decoration:none}
.journal-row:first-child{grid-column:1/-1;background:var(--texte);color:#fff;min-height:clamp(380px,34vw,520px)}
.journal-row:first-child h2{font-size:clamp(32px,4vw,60px);max-width:20ch;color:#fff}
.journal-row:first-child p{color:rgba(255,255,255,.88)}
.journal-row:first-child .journal-read{color:#fff}
@media (max-width:800px){.chap{grid-template-columns:minmax(0,1fr)}.chap>h2{position:static;max-width:none}.a-lire .autres{grid-template-columns:minmax(0,1fr)}}
.journal{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.journal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){.journal{grid-template-columns:minmax(0,1fr)}}
.page-tete{padding-bottom:clamp(40px,6vw,88px)}
.page-tete.entete-article{padding-bottom:clamp(16px,2vw,32px)}
/* Menu des pages intérieures : même version que l'accueil, en foncé, mêmes placements */
.entete-page .haut-etiq,.entete-page .etiquette{background:transparent;padding:0}
.entete-page nav.etiquette{gap:26px}
/* Une du blog : image Soul Cinema propre à l'article sur les vignerons, lumière chaude */
.journal-row[href$="site-internet-vigneron-vente-directe"]{background:linear-gradient(90deg,rgba(24,32,27,.72),rgba(24,32,27,.18) 65%),url(/assets/neuf/vigneron-1920.webp) 50% 18%/cover}
.respire img{object-position:50% 80%;transform:none}
.hero img{object-position:50% 100%}
.portrait{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--etiquette)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
/* Introduction : titre à gauche, texte à droite calé sur la dernière ligne du titre */
.intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,5vw,80px);align-items:end}
.intro .etiq{grid-column:1/-1;justify-self:start}
.intro h2{grid-column:1;max-width:18ch;margin:0}
.intro .intro-ligne{grid-column:2;margin:0 0 .35em;max-width:34ch}
@media (max-width:800px){.intro{display:block}.intro .intro-ligne{margin-top:20px}}
.intro{row-gap:0}
.vignette{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--etiquette)}
.vignette img{width:100%;height:100%;object-fit:cover}

/* Cartes de réalisations : image entière cliquable, texte blanc posé sur un frost en bas, comme le hero */
.projets{gap:clamp(12px,1.6vw,24px)}
.projet{position:relative;display:block;color:#fff;overflow:hidden;background:var(--texte)}
.projet .vignette{aspect-ratio:4/3}
.projet .frost{position:absolute;left:0;right:0;bottom:0;height:68%;pointer-events:none;
  background:linear-gradient(to top,rgba(24,32,27,.86) 0%,rgba(24,32,27,.6) 42%,rgba(24,32,27,0) 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to top,#000 38%,transparent 100%);mask-image:linear-gradient(to top,#000 38%,transparent 100%)}
.projet-txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2vw,30px)}
.projet h3{font-size:clamp(24px,2.4vw,36px);line-height:1.1;margin:0;color:#fff}
.projet .type{margin-top:6px;font-size:14px;color:rgba(255,255,255,.78)}
.projet .desc{margin-top:10px;font-size:17px;line-height:1.45;color:rgba(255,255,255,.92);max-width:44ch;text-wrap:pretty}
.projet-lien{display:inline-block;margin-top:14px;font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.6)}
.projet:hover .projet-lien{text-decoration-color:#fff}
.projet:focus-visible{outline:2px solid var(--texte);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.projet .vignette img{transition:transform .5s ease}.projet:hover .vignette img{transform:scale(1.025)}}
@media (max-width:640px){.projet .vignette{aspect-ratio:4/5}}
/* Frost des cartes : flou givré et grain cuits dans les images (recette du hero, frost-carte.sh). Reste un voile très léger pour la lisibilité du texte blanc. */
.projet .frost{height:62%;background:linear-gradient(to top,rgba(24,32,27,.52) 0%,rgba(24,32,27,.30) 45%,rgba(24,32,27,0) 100%);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}

/* Menu sur téléphone : bouton « Menu » qui ouvre un panneau plein écran avec tous les liens */
.burger{display:none}
@media (max-width:720px){
  .burger{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:transparent;border:1px solid currentColor;border-radius:2px;font:inherit;font-size:16px;color:var(--texte);cursor:pointer;position:relative;z-index:60}
  .sur-image .haut .burger{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
  .haut.menu-ouvert .burger{color:var(--texte);text-shadow:none}
  .haut nav,.sur-image .haut nav.etiquette,.entete-page nav.etiquette{display:none;position:fixed;inset:0;z-index:50;background:#fff;color:var(--texte);text-shadow:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:calc(var(--marge) + 56px) var(--marge) var(--marge)}
  .haut.menu-ouvert nav,.sur-image .haut.menu-ouvert nav.etiquette,.entete-page.menu-ouvert nav.etiquette{display:flex}
  .haut nav a{font-size:clamp(30px,9vw,44px);line-height:1.1;letter-spacing:-.015em;min-height:60px;color:var(--texte)}
  .haut nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
  .haut nav a.contact{display:inline-flex}
  .haut.menu-ouvert,.sur-image .haut.menu-ouvert{z-index:100}
  .haut > a.etiquette{position:relative;z-index:60}
  .haut.menu-ouvert > a.etiquette,.sur-image .haut.menu-ouvert > a.etiquette{color:var(--texte);text-shadow:none}
  .haut.menu-ouvert > a.etiquette .logo,.sur-image .haut.menu-ouvert > a.etiquette .logo{color:var(--texte)}
  .haut.menu-ouvert > a.etiquette .logo i,.sur-image .haut.menu-ouvert > a.etiquette .logo i{color:var(--gris-logo)}
}

@media (max-width:640px){.hero img{object-position:50% 100%}}

/* Vektor Bike en tête des réalisations : carte pleine largeur */
.projet-large{grid-column:1/-1}
.projet-large .vignette{aspect-ratio:21/9}
.projet-large .vignette img{object-position:66% 55%}
@media (max-width:640px){.projet-large .vignette{aspect-ratio:4/5}}

/* Carte vigneron du blog lisible (03/11/2026). Mesuré sur la zone la plus claire sous chaque ligne, 4,5 contre 1 au moins (contraste.mjs).
   Cause du défaut : la règle de la carte vigneron n'avait de texte blanc que tant qu'elle était la première carte (:first-child) ; un nouvel article l'a rétrogradée,
   son texte est repassé en sombre sur la photo. La règle est maintenant propre à la carte, sans dépendre de sa place. */
.journal-row[href$="site-internet-vigneron-vente-directe"]{color:#fff;background:linear-gradient(180deg,rgba(24,32,27,.5) 0%,rgba(24,32,27,.6) 50%,rgba(24,32,27,.8) 100%),url(/assets/neuf/vigneron-1920.webp) 50% 18%/cover}
.journal-row[href$="site-internet-vigneron-vente-directe"] h2,.journal-row[href$="site-internet-vigneron-vente-directe"] .journal-read{color:#fff}
.journal-row[href$="site-internet-vigneron-vente-directe"] p{color:rgba(255,255,255,.94)}

/* Section de preuves (mission 7) : n'apparaît que si un client a donné son accord écrit */
.preuves{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(32px,4vw,64px)}
.preuves .carte{border:1px solid var(--trait);padding:clamp(22px,2.4vw,36px)}
.preuves img{display:block;width:100%;height:auto;margin-bottom:20px;border-radius:2px}
.preuves h3{font-size:clamp(22px,2vw,30px);font-weight:400;letter-spacing:-.01em}
.preuves blockquote{margin-top:18px;font-size:clamp(18px,1.6vw,22px);line-height:1.4;text-wrap:pretty}
.preuves cite{display:block;margin-top:14px;font-style:normal;font-size:15px;color:var(--gris)}

/* Avis : étoiles, mots clés en gras, auteur avec photo, appel à l'action */
.avis-sous{margin-top:22px;margin-bottom:0;font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:46ch}
.etoiles{display:inline-flex;gap:3px;color:var(--texte);margin-bottom:18px}
.avis .carte:first-child .etoiles{margin:18px 0 0}
.avis blockquote strong{font-weight:500}
.avis cite.auteur{display:flex;align-items:center;gap:14px;margin-top:22px;line-height:1.35}
.avis cite.auteur b{font-weight:500;color:var(--texte)}
.avis cite.auteur img,.avis cite.auteur .rond{width:52px;height:52px;border-radius:50%;flex:none;object-fit:cover}
.avis cite.auteur .rond{display:inline-flex;align-items:center;justify-content:center;background:var(--etiquette);color:var(--texte);font-size:16px}
.avis-cta{margin-top:clamp(28px,3vw,44px)}
.avis-cta .action{margin-top:0}