/* Habillage Portfolio : mêmes contenus, cadrages et interactions.
   Le serveur et l’aperçu utilisent cette même feuille. */
.portfolio{
 --papier:#faf9f6;--papier-2:#f0efea;--brume:#dfdfd6;--encre:#262923;
 --f-display:'Libre Franklin',Arial,sans-serif;
 --pf-trait:#d9d9d0;--pf-secondaire:#62675d;--pf-fonce:#262d25;
 color:var(--encre);background:var(--papier);font-size:16px;line-height:1.75;padding-bottom:0;
}
.portfolio *{min-width:0}
.portfolio [hidden]{display:none!important}
.portfolio a,.portfolio button{-webkit-tap-highlight-color:transparent}
.portfolio h1,.portfolio h2,.portfolio h3{font-family:var(--f-display);font-weight:400;overflow-wrap:anywhere;text-wrap:balance;letter-spacing:-.055em}
.portfolio p,.portfolio li{overflow-wrap:anywhere}
.portfolio .wrap{width:100%;max-width:1400px;padding:0 24px}
.portfolio section{padding:64px 0;scroll-margin-top:90px}
.portfolio header.site{background:#faf9f6f5;backdrop-filter:blur(12px);border-color:var(--pf-trait)}
.portfolio .nav{max-width:1480px;padding:16px 24px;gap:20px}
.portfolio .logo{color:var(--encre);font-family:var(--f-display);font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.7px;white-space:normal;overflow:visible;gap:10px}
.portfolio .logo span{color:inherit}
.portfolio .logo-img{height:42px;max-width:120px;object-fit:contain}
.portfolio .nav-actions{margin-left:auto;flex-shrink:0}
.portfolio .nav-tel{display:none;background:transparent;color:var(--encre)!important;border:1px solid var(--pf-trait);border-radius:0;box-shadow:none;font-size:13px;padding:11px 16px}
.portfolio .burger{display:grid;place-items:center;width:44px;height:44px;border:0;color:var(--encre)}
.portfolio .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--pf-trait);padding:8px 24px 20px;max-height:calc(100dvh - 170px);overflow:auto;flex-direction:column;align-items:stretch;gap:0}
.portfolio .nav-links.open{display:flex}
.portfolio .nav-links li+li{border-top:1px solid var(--pf-trait)}
.portfolio .nav-links a{display:block;font-size:14px;line-height:1.4;padding:14px 0}
.portfolio .btn{min-height:48px;padding:13px 20px;border-radius:0;box-shadow:none;font-size:13px;line-height:1.6;font-weight:500;text-align:center;letter-spacing:0}
.portfolio .btn:hover{transform:none;box-shadow:none;filter:brightness(.94)}
.portfolio .btn-miel{background:var(--bouton);color:var(--bouton-texte);border:1px solid var(--bouton)}
.portfolio .btn-ligne{background:transparent;color:var(--encre);border:1px solid #9faaa0}
.portfolio .hero,.portfolio .hero.avec-photo{background:var(--papier);padding:30px 0 38px;overflow:visible}
.portfolio .hero-grid,.portfolio .hero.avec-photo .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.portfolio .hero-grid>div:first-child{display:contents}
.portfolio .eyebrow{font:500 10px/1.7 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-secondaire);margin:0 0 17px}
.portfolio .hero .eyebrow{grid-row:1;color:var(--pf-secondaire);max-width:44ch}
.portfolio .hero h1{grid-row:2;margin:0 0 27px;font-size:clamp(36px,9vw,48px);line-height:1.13;color:var(--encre);font-weight:400;max-width:14ch}
.portfolio .hero h1 strong{font-weight:400;color:var(--vert)}
.portfolio .hero-visuel,.portfolio .hero.avec-photo .hero-visuel{grid-row:3;order:initial;padding:0;margin:0 0 25px;align-self:center}
.portfolio .cadre-photo{max-width:none;margin:0}
.portfolio .cadre-photo::before,.portfolio .cadre-photo::after{content:none}
.portfolio .cadre-photo>.photo-fenetre{aspect-ratio:1/1;border-radius:0;box-shadow:none}
.portfolio .cadre-photo img{border-radius:0;box-shadow:none}
.portfolio .hero:not(.avec-photo) .hero-visuel{display:none}
.portfolio .hero p.sous{grid-row:4;font-size:15px;line-height:1.9;margin:0 0 23px;color:var(--pf-secondaire);max-width:47ch}
.portfolio .hero-cta{grid-row:5;display:flex;flex-wrap:wrap;gap:12px;margin:0}
.portfolio .hero-cta .btn{flex:1 1 auto}
.portfolio .hero-cta .btn-ligne{color:var(--encre);border:1px solid #a7aea3}
.portfolio .note-google{grid-row:6;justify-self:start;margin:24px 0 0;background:#fff;color:#303b2d;border:1px solid var(--pf-trait);border-radius:3px;font-size:12px;line-height:1.6;padding:10px 13px}
.portfolio .note-google .etoiles{color:#88660e}
.portfolio .bandeau-sap{background:#edeee6;border:0;border-top:1px solid var(--pf-trait);border-bottom:1px solid var(--pf-trait);color:#505947;padding:19px 0}
.portfolio .bandeau-sap .wrap{display:flex;align-items:flex-start;gap:20px;font-size:12px;line-height:1.75}
.portfolio .bandeau-sap strong{color:inherit}
.portfolio .badge-ci{background:transparent;border:0;color:#414e38;border-radius:0;font:400 29px/1.25 var(--f-display);padding:0;flex-shrink:0;letter-spacing:-1.5px}
.portfolio .titre-section{font-size:clamp(30px,7.5vw,42px);font-weight:400;line-height:1.2;color:var(--encre);margin:0 0 22px;max-width:900px}
.portfolio .intro-section{max-width:660px;font-size:15px;line-height:1.85;color:var(--pf-secondaire);margin:0 0 34px}
.portfolio .services-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;counter-reset:service}
.portfolio .service{background:transparent;border:0;border-top:1px solid var(--pf-trait);border-radius:0;padding:24px 0 27px;box-shadow:none;counter-increment:service;position:relative}
.portfolio .service:not(.service-annuel)::before{content:counter(service,decimal-leading-zero);font:400 11px/1.5 var(--f-display);color:#767d6e;display:block;margin-bottom:12px;letter-spacing:.05em}
.portfolio .service h3{font-size:23px;line-height:1.35;font-weight:400;letter-spacing:-.8px;color:var(--encre);margin:0 0 13px}
.portfolio .service p{color:var(--pf-secondaire);font-size:14px;line-height:1.85}
.portfolio .service-annuel{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:26px;margin-top:12px;background:var(--papier-2);border:0}
.portfolio .service-annuel .btn{flex-shrink:0}
.portfolio .realisations{background:#eaece3;border-top:1px solid var(--pf-trait);border-bottom:1px solid var(--pf-trait)}
.portfolio .ba{border-radius:0;box-shadow:none;aspect-ratio:16/10}
.portfolio .ba-badge{background:#f9f9f3;color:var(--encre);border-radius:0;padding:7px 11px;font-size:10px;font-weight:500;letter-spacing:.1em}
.portfolio .ba-navigation{justify-content:flex-end;gap:20px;margin-top:14px}
.portfolio .ba-navigation button,.portfolio .avis-navigation button,.portfolio .articles-navigation button{min-width:44px;min-height:44px;background:transparent;border:1px solid #9ca794;border-radius:50%;color:var(--encre);box-shadow:none}
.portfolio .ba-compteur{font-size:11px;font-weight:500}
.portfolio .realis-recentes{gap:34px;margin-top:42px;margin-bottom:32px}
.portfolio .realis-recente{border:0;border-radius:0;background:transparent;box-shadow:none}
.portfolio .realis-recente img{border-radius:0;aspect-ratio:4/3}
.portfolio .realis-recente .realis-recentes-texte{padding:19px 0 0}
.portfolio .realis-recente h3{font:400 25px/1.25 var(--f-display);letter-spacing:-1px;margin-bottom:10px;color:var(--encre)}
.portfolio .realis-recente p{font-size:13px;line-height:1.8;color:var(--pf-secondaire)}
.portfolio .realis-recente span{font-weight:500;font-size:12px;border-bottom:1px solid #9ca794;padding-bottom:6px;display:inline-block;color:var(--encre)}
.portfolio .realis-plus{margin-top:28px}
.portfolio .galerie{gap:16px}.portfolio .galerie img{border-radius:0;box-shadow:none}
.portfolio .ci{background:var(--papier);border-bottom:1px solid var(--pf-trait)}
.portfolio .ci .eyebrow{color:var(--pf-secondaire)!important}
.portfolio .ci .titre-section{margin-left:auto;margin-right:auto}
.portfolio .ci .intro-section{margin-left:auto;margin-right:auto}
.portfolio .ci-grid{grid-template-columns:minmax(0,1fr);gap:30px}
.portfolio .ci-points{padding:0;margin:0;gap:0}
.portfolio .ci-points li{gap:18px;line-height:1.9;font-size:14px;color:var(--pf-secondaire)}
.portfolio .ci-points li{padding:18px 0;border-top:1px solid var(--pf-trait)}
.portfolio .ci-points li:last-child{padding-bottom:0}
.portfolio .ci-points .puce{background:transparent;border:1px solid var(--pf-trait);border-radius:50%;color:var(--encre);font-weight:400;flex-shrink:0}
.portfolio .calc{border-radius:0;background:var(--pf-fonce);color:#faf9f5;border:0;padding:28px 22px;box-shadow:none}
.portfolio .calc h3{font-size:26px;color:#faf9f5;font-weight:400;letter-spacing:-1px}
.portfolio .calc .calc-note,.portfolio .calc label,.portfolio .calc .calc-cta p{color:#d4d9cc}
.portfolio .calc input[type=range]{min-height:44px;accent-color:#c8d2b7}
.portfolio .calc-montants{gap:12px;align-items:center}
.portfolio .calc .bloc,.portfolio .calc .bloc.final{border-radius:0;background:#394332;padding:16px 7px;color:#faf9f5}
.portfolio .calc .bloc.final{background:#dae0cb;color:#25331f}
.portfolio .calc .bloc .label{font-size:10px;color:#e1e6d6}.portfolio .calc .bloc.final .label{color:#35452b}
.portfolio .calc .valeur,.portfolio .calc .bloc.final .valeur{font:400 32px/1.3 var(--f-display);letter-spacing:-1px;color:inherit}
.portfolio .calc-cta .btn{width:100%}
.portfolio .calc-cta-tel a{color:#faf9f5;border-color:#a0af97}
.portfolio .calc-cta-tel a:hover{background:#dae0cb;color:#25331f}
.portfolio .zone-flex{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.portfolio .zone-texte{width:100%;min-width:0}
.portfolio .carte-zone{width:100%;min-width:0;min-height:260px;height:280px}
.portfolio .zone-flex>.photo-reelle{min-width:0!important}
.portfolio .zone-flex .photo-slot{display:none}
.portfolio .photo-reelle,.portfolio .carte-zone{border-radius:0;box-shadow:none}
.portfolio .communes{gap:8px;margin-top:26px}
.portfolio .communes li{background:transparent;border:1px solid var(--pf-trait);border-radius:0;padding:8px 12px;font-size:12px;color:var(--pf-secondaire)}
.portfolio .communes .principale{background:#e9eddf;color:var(--encre);font-weight:500}
.portfolio .avis{background:var(--papier-2);border-top:1px solid var(--pf-trait);border-bottom:1px solid var(--pf-trait)}
.portfolio .avis-grid{grid-auto-columns:100%;gap:30px;padding:0 0 15px}
.portfolio .avis-card{background:transparent;border:0;border-top:1px solid #bdc4b5;border-radius:0;box-shadow:none;padding:24px 0 8px}
.portfolio .avis-card blockquote{font:400 22px/1.65 Georgia,serif;color:#333c2d;margin:20px 0 24px}
.portfolio .avis-card cite{font-size:12px;font-weight:500;color:var(--pf-secondaire)}
.portfolio .avis-card .etoiles{color:#896810;letter-spacing:3px;font-size:12px}
.portfolio .avis-navigation{justify-content:flex-end;margin-top:12px}
.portfolio .reseau{background:var(--papier)}
.portfolio .reseau-carte{background:transparent;border:0;border-radius:0;box-shadow:none;grid-template-columns:minmax(0,1fr);gap:34px;padding:0;max-width:none}
.portfolio .reseau-carte h2{color:var(--encre);font-size:34px;font-weight:400;line-height:1.22;letter-spacing:-1.8px;margin-bottom:24px}
.portfolio .reseau-carte p{font-size:15px;line-height:1.9;color:var(--pf-secondaire)}
.portfolio .reseau-signature{margin-top:26px;border-top:1px solid var(--pf-trait);padding-top:22px;font-size:12px!important}
.portfolio .photo-reseau{border-radius:0;aspect-ratio:16/10}
.portfolio .reseau-points{margin-top:24px}.portfolio .reseau-points li{font-size:13px;line-height:1.8;gap:12px;color:var(--pf-secondaire)}
.portfolio .reseau-points .coche{background:transparent;border:1px solid #bdc8b4;color:#3c5632;flex-shrink:0}
.portfolio #devis{border-top:1px solid var(--pf-trait)}
.portfolio .contact-grid{grid-template-columns:minmax(0,1fr);gap:24px}
.portfolio .carte-contact{background:var(--pf-fonce);border-radius:0;min-height:350px;box-shadow:none}
.portfolio .carte-contact:not(:has(.photo-portrait)){min-height:0}
.portfolio .carte-contact .dedans{padding:28px 24px}
.portfolio .carte-contact .ligne a{font-size:17px}
.portfolio form.devis{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;gap:24px}
.portfolio form.devis label{font-size:12px;font-weight:500;color:var(--encre)}
.portfolio form.devis input,.portfolio form.devis select,.portfolio form.devis textarea{min-width:0;width:100%;border:1px solid #cfd4c8;border-radius:0;background:#fffefb;font-size:16px;min-height:48px}
.portfolio form.devis .deux-col{grid-template-columns:minmax(0,1fr)}
.portfolio form.devis .btn{min-height:50px}
.portfolio .articles-accueil{background:#eeeee6;border-top:1px solid var(--pf-trait)}
.portfolio .articles-entete{gap:26px}.portfolio .articles-tous{font-size:12px;color:var(--encre);font-weight:500}
.portfolio .articles-cartes{gap:28px}
.portfolio .article-carte{border:0;border-radius:0;background:transparent}
.portfolio .article-carte-texte{padding:20px 0 4px;gap:12px}
.portfolio .article-carte h2,.portfolio .article-carte h3{font-family:var(--f-display);font-size:23px;font-weight:400;letter-spacing:-.75px;color:var(--encre)}
.portfolio .article-theme{font-size:10px;font-weight:500;color:#5d6a50;letter-spacing:.09em}
.portfolio .article-lire{color:var(--encre);font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:5px}
.portfolio .faq-liste{max-width:none;gap:0}
.portfolio .faq-liste details{border:0;border-top:1px solid var(--pf-trait);border-radius:0;background:transparent}
.portfolio .faq-liste summary{padding:22px 0;font-family:var(--f-display);font-size:15px;line-height:1.6;font-weight:500;color:var(--encre)}
.portfolio .faq-liste summary::after{color:var(--encre)}
.portfolio .faq-liste details p{padding:0 0 25px;font-size:14px;line-height:1.9;color:var(--pf-secondaire)}
.portfolio footer.site{background:#e9ece2;color:var(--pf-secondaire);border-top:1px solid var(--pf-trait);padding:34px 0 106px;font-size:12px}
.portfolio footer.site .wrap{gap:18px}.portfolio .footer-reseau{font-size:11px}.portfolio .footer-facto{font-size:12px}
.portfolio footer.site a,.portfolio footer.site button{color:inherit}
.portfolio .ml-boite{border-radius:0;padding:28px 22px;background:var(--papier)}
.portfolio .appel-flottant,.portfolio .article-devis-mobile{display:none}
.portfolio .mobile-contact{position:fixed;z-index:90;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:10px 16px max(10px,env(safe-area-inset-bottom));background:#faf9f6f5;border-top:1px solid var(--pf-trait);backdrop-filter:blur(12px)}
.portfolio .mobile-contact a{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:500;text-decoration:none;border:1px solid #b4beaa;border-radius:0;color:var(--encre)}
.portfolio .mobile-contact a:last-child{background:var(--pf-fonce);color:#fff;border-color:var(--pf-fonce)}
.portfolio .mobile-contact svg{width:15px;height:15px;flex-shrink:0}
.portfolio .bandeau-mesure{z-index:2147483000;bottom:10px}
.portfolio .ch-page{padding:42px 0 76px}
.portfolio .ch-carte{border:1px solid var(--pf-trait);border-radius:0;background:#fffefa;box-shadow:none}
.portfolio .ch-corps{padding:22px}
.portfolio .ch-f{border:1px solid var(--pf-trait);border-radius:0;min-height:44px;font-size:12px}
.portfolio .ch-f.actif{background:var(--pf-fonce);color:#fff;border-color:var(--pf-fonce)}
.portfolio .ch-photos img{border-radius:0}
.portfolio .ch-cta{border:0;border-radius:0;background:#e8ecdf}
.portfolio .articles-contenu{padding-top:40px}
.portfolio .articles-titre .titre-section{font-size:clamp(34px,5vw,58px);font-weight:400}
.portfolio .article-retour{font-size:12px}
.portfolio .lecture{max-width:800px}.portfolio .lecture h1{font-weight:400;letter-spacing:-1.7px}
.portfolio .lecture .couverture,.portfolio .photo-article img{border-radius:0}
.portfolio .lecture .prose{font-size:17px;line-height:1.95}
.portfolio .lecture .prose h2{font-weight:400;font-size:29px;letter-spacing:-1px}
.portfolio .suite,.portfolio .articles-contenu .bouton{border-radius:0;box-shadow:none}
@media(min-width:650px){
 .portfolio .wrap{padding:0 40px}
 .portfolio section{padding:82px 0}
 .portfolio .hero-grid,.portfolio .hero.avec-photo .hero-grid{max-width:800px}
 .portfolio .hero h1{font-size:58px;max-width:16ch}
 .portfolio .hero p.sous{max-width:55ch;font-size:16px}
 .portfolio .hero-cta .btn{flex:0 1 auto}
 .portfolio .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:54px}
 .portfolio .avis-grid{grid-auto-columns:calc((100% - 30px)/2)}
 .portfolio form.devis .deux-col{grid-template-columns:1fr 1fr}
}
@media(min-width:1000px){
 .portfolio{padding-bottom:0}
 .portfolio .wrap{padding:0 64px}
 .portfolio section{padding:108px 0}
 .portfolio .hero,.portfolio .hero.avec-photo{padding:56px 0 64px}
 .portfolio .hero-grid,.portfolio .hero.avec-photo .hero-grid{grid-template-columns:1fr 1.02fr;gap:54px;max-width:1400px;align-items:center}
 .portfolio .hero-grid>div:first-child{display:block}
 .portfolio .hero h1{font-size:clamp(46px,4.35vw,70px);line-height:1.1;max-width:14ch;letter-spacing:-.065em;margin-bottom:30px}
 .portfolio .hero .eyebrow{margin-bottom:24px;max-width:none}
 .portfolio .hero p.sous{font-size:15px;margin-bottom:28px;max-width:46ch}
 .portfolio .hero-visuel,.portfolio .hero.avec-photo .hero-visuel{grid-row:auto;margin:0}
 .portfolio .hero:not(.avec-photo) .hero-grid{grid-template-columns:1fr;max-width:1400px}
 .portfolio .hero:not(.avec-photo) .hero-grid>div:first-child{max-width:900px}
 .portfolio .hero:not(.avec-photo) h1{max-width:20ch;font-size:70px}
 .portfolio .hero:not(.avec-photo) p.sous{max-width:62ch}
 .portfolio .titre-section{font-size:46px;max-width:920px}
 .portfolio .intro-section{font-size:16px;margin-bottom:44px}
 .portfolio .bandeau-sap .wrap{align-items:center;gap:36px;font-size:13px}
 .portfolio .service{padding:28px 0 32px 38px}
 .portfolio .service:not(.service-annuel)::before{position:absolute;left:0;top:33px}
 .portfolio .service h3{font-size:25px}
 .portfolio .service-annuel{padding:34px;flex-direction:row;align-items:center;gap:44px;margin-top:16px}
 .portfolio .realis-recentes{gap:44px;margin-top:56px}
 .portfolio .realis-recente h3{font-size:29px}
 .portfolio .realis-recente p{font-size:14px}
 /* Le texte et les étapes forment une seule colonne face au simulateur. */
 .portfolio .ci{padding:80px 0}
 .portfolio .ci>.wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:64px;grid-template-rows:auto auto auto 1fr;align-items:start}
 .portfolio .ci>.wrap>.eyebrow{grid-column:1;text-align:left}
 .portfolio .ci .titre-section{grid-column:1;text-align:left;margin:0 0 22px}
 .portfolio .ci .intro-section{grid-column:1;text-align:left;margin:0 0 28px}
 .portfolio .ci-grid{display:contents}
 .portfolio .ci-points{grid-column:1}
 .portfolio .ci .calc{grid-column:2;grid-row:1/5;align-self:center}
 .portfolio .calc{padding:34px}
 .portfolio .calc .valeur,.portfolio .calc .bloc.final .valeur{font-size:38px}
 .portfolio .zone-flex{gap:64px}
 .portfolio .zone-flex:has(>.carte-zone,>.photo-reelle){grid-template-columns:repeat(2,minmax(0,1fr))}
 .portfolio .carte-zone{height:100%;min-height:340px;align-self:stretch}
 .portfolio .avis-card blockquote{font-size:27px}
 .portfolio .reseau-carte{grid-template-columns:1fr 1fr;gap:78px;align-items:center}
 .portfolio .reseau-carte h2{font-size:45px}
 .portfolio .contact-grid{grid-template-columns:.85fr 1.15fr;gap:72px;align-items:stretch}
 .portfolio .carte-contact{min-height:480px}
 .portfolio .mobile-contact{display:none}
 .portfolio .nav-tel{display:block}
 .portfolio footer.site{padding:42px 0}
}
@media(min-width:1280px){
 .portfolio .nav{padding:24px 64px;gap:22px}
 .portfolio .nav-actions{margin-left:0}
 .portfolio .nav-links{display:flex;position:static;flex-direction:row;gap:22px;align-items:center;border:0;background:transparent;padding:0;max-height:none;overflow:visible}
 .portfolio .nav-links li+li{border:0}.portfolio .nav-links a{font-size:12px;padding:10px 0;white-space:nowrap}
 .portfolio .burger{display:none}
}
@media(prefers-reduced-motion:reduce){.portfolio *{transition:none!important;scroll-behavior:auto!important}}

/* Dans l’éditeur, les largeurs suivent l’aperçu, pas la fenêtre entière. */
#site.portfolio .mobile-contact{position:sticky;bottom:0}
#site.portfolio .nav{position:relative}
#site.portfolio .hero h1{font-size:clamp(36px,9cqw,48px)}
#site.portfolio .titre-section{font-size:clamp(30px,7.5cqw,42px)}
@media(min-width:650px){#site.portfolio .hero h1{font-size:58px}}
@media(min-width:1000px){
 #site.portfolio .hero h1{font-size:clamp(46px,4.35cqw,70px)}
 #site.portfolio .hero:not(.avec-photo) h1{font-size:70px}
 #site.portfolio .titre-section{font-size:46px}
}