:root{--green:#2E4A3D;--ink:#14201A;--mint:#DCE5DF;--cream:#F5F2EB;--sand:#EDE8DE;--orange:#C2683F;--muted:#6E7A73;--line:#DDD6C7;--serif:'Fraunces',Georgia,serif;--sans:'Inter',Arial,sans-serif;--primary: #2E4A3D;--primary-hover: #243B31;--on-primary: #FFFFFF;--secondary: #C2683F;--secondary-hover: #A85630;--bg: #F5F2EB;--surface: #FFFFFF;--fill: #EDE8DE;--border: #DDD6C7;--text: #1F2B24;--text-secondary: #4A5751;--text-strong: #14201A;--text-muted: #6E7A73;--text-faint: #C9C4B8;--white: #FFFFFF;--font-heading: 'Fraunces',Georgia,serif;--font-body: 'Inter',Arial,sans-serif;--font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--callout-bg: #FBF0E8;--callout-text: #8A4426;--callout-border: #E5C4AC}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.55 var(--sans)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;object-fit:cover}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);line-height:.98;letter-spacing:-.04em}h1{font-size:clamp(3.5rem,7.6vw,7.5rem);font-weight:600}h2{font-size:clamp(2.6rem,5vw,4.7rem);font-weight:600}h3{font-size:1.9rem;font-weight:600;line-height:1.03}.site-header{background:var(--cream);padding:0 5vw}.topline{height:37px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:.71rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.topline p{margin:0}.topline a{display:flex;gap:5px;align-items:center}.topline svg{width:13px}.nav-wrap{height:87px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:10px;font:600 1.15rem/.76 var(--serif);letter-spacing:-.04em}.brand em{font-style:italic;color:var(--green)}.brand-mark{width:35px;height:35px;border-radius:50%;background:var(--green);color:white;display:grid;place-items:center}.brand-mark svg{width:19px}.main-nav{display:flex;align-items:center;justify-content:center;gap:26px;margin-left:auto;font-size:.88rem;font-weight:600}.main-nav a:hover,.text-link:hover{color:var(--green)}.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--green);color:#fff;border:0;padding:14px 19px;border-radius:2px;font:700 .8rem var(--sans)}.nav-cta{font-size:.75rem;padding:11px 14px}.nav-cta svg,.button svg{width:16px}.menu-toggle{display:none;background:none;border:0;color:var(--ink)}main{overflow:hidden}.hero{min-height:650px;background:#DCE5DF;display:grid;grid-template-columns:1.02fr .98fr}.hero-copy{padding:80px 7vw 60px max(5vw,calc((100vw - 1250px)/2));align-self:center}.eyebrow,.tag{font-size:.68rem;font-weight:700;letter-spacing:.13em;color:var(--green);margin-bottom:17px}.hero h1{margin-bottom:25px}.hero h1 em,.occ-copy h2 em,.page-hero h1 em{font-weight:500;color:var(--green)}.lead{max-width:515px;font-size:1.12rem;line-height:1.65}.hero-actions{display:flex;gap:25px;align-items:center;margin:30px 0}.text-link,.card-link{font-weight:700;font-size:.86rem;display:inline-flex;align-items:center;gap:8px}.text-link svg,.card-link svg{width:16px}.trust-row{display:flex;gap:23px;font-size:.76rem;font-weight:700;margin-top:42px}.trust-row span{display:flex;align-items:center;gap:6px}.trust-row svg{width:16px;color:var(--green)}.hero-image{margin:0;position:relative;min-height:650px}.hero-image img{height:100%;width:100%}.hero-image figcaption{position:absolute;bottom:16px;right:20px;color:#fff;font-size:.7rem;text-shadow:0 1px 6px #111}.intro,.editorial-section,.occitanie-block,.newsletter{max-width:1250px;margin:auto;padding:115px 5vw}.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:80px}.intro h2{margin:0}.intro-text{font-size:1.1rem;max-width:500px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.section-head h2{font-size:3.5rem;margin:0}.article-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.feature-card,.list-card{background:#fff}.feature-card img{width:100%;height:330px}.card-body,.list-card{padding:25px}.card-body h3{font-size:2.25rem;margin-bottom:15px}.card-body p:not(.tag),.list-card p:not(.tag){color:var(--muted);font-size:.9rem}.card-link{margin-top:11px;color:var(--green)}.list-card{padding:35px}.list-card h3{font-size:2rem;margin:0 0 14px}.list-card hr{border:0;border-top:1px solid var(--line);margin:33px 0}.budget-banner{max-width:1250px;margin:10px auto 110px;padding:68px 7vw;background:var(--green);color:#fff;display:flex;justify-content:space-between;align-items:center}.budget-banner .eyebrow{color:var(--mint)}.budget-banner p:not(.eyebrow){max-width:420px}.button-light{background:#fff;color:var(--green);margin-top:10px}.budget-graphic{position:relative;width:290px;height:290px;border:1px solid #ffffff66;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.budget-graphic:before{content:'';position:absolute;inset:15px;border:1px dashed #ffffff66;border-radius:50%}.budget-graphic span,.budget-graphic small,.budget-graphic strong{z-index:1}.budget-graphic span,.budget-graphic small{font-size:.73rem}.budget-graphic strong{font:600 5rem var(--serif);line-height:1}.budget-graphic svg{position:absolute;right:8px;top:16px;width:28px}.occitanie-block{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;padding-top:0}.occ-image{height:600px}.occ-image img{height:100%;width:100%}.occ-copy p:not(.eyebrow){font-size:1.07rem;max-width:450px}.place-links{margin-top:34px;border-top:1px solid var(--line)}.place-links a{display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);font:600 1.25rem var(--serif)}.place-links span{color:var(--orange);font:700 .7rem var(--sans)}.place-links svg{margin-left:auto;width:17px}.newsletter{background:var(--sand);max-width:none;padding-left:max(5vw,calc((100vw - 1250px)/2));padding-right:max(5vw,calc((100vw - 1250px)/2));display:flex;justify-content:space-between;align-items:center;gap:50px}.newsletter h2{font-size:3.4rem;margin:0}.newsletter form{width:420px}.newsletter label{font-size:.78rem;font-weight:700}.email-row{display:flex;border-bottom:1px solid var(--ink);margin:8px 0}.email-row input{background:transparent;border:0;outline:0;padding:11px 0;font:1rem var(--sans);width:100%}.email-row button{border:0;background:none;color:var(--green)}.newsletter form p{font-size:.73rem;color:var(--muted);margin:0}.simple-page{max-width:1250px;margin:auto;padding:0 5vw 110px}.page-hero{padding:105px 0 75px;max-width:850px}.page-hero h1{margin-bottom:25px}.page-hero>p:last-child{font-size:1.18rem;line-height:1.65;max-width:650px}.guide-grid,.region-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:55px;align-items:start;padding:65px 0;border-top:1px solid var(--line)}.guide-grid article h2,.region-grid h2{font-size:3.2rem}.guide-grid article>p{font-size:1.08rem;max-width:700px}.guide-grid ul{padding-left:18px}.guide-grid li{margin:10px 0}.guide-grid aside{background:var(--mint);padding:35px}.guide-grid aside svg{color:var(--green)}.guide-grid aside h3{margin:18px 0 13px}.checklist{padding:90px 0}.checklist h2{margin-bottom:35px}.checklist>div{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.checklist p{border-top:1px solid var(--ink);padding-top:15px}.checklist b{display:block;color:var(--orange);font-size:.75rem;letter-spacing:.1em;margin-bottom:10px}.region-grid img{width:100%;height:420px}.region-grid p{font-size:1.04rem}.source-strip{margin:50px 0;background:var(--ink);color:#fff;padding:48px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}.source-strip>.svg{color:var(--mint)}.source-strip>svg{color:var(--mint);width:38px;height:38px}.source-strip .eyebrow{color:var(--mint)}.source-strip h2{font-size:2.3rem;margin-bottom:12px}.source-strip p:not(.eyebrow){margin:0;color:#C9C4B8}.source-strip .text-link{color:var(--mint);white-space:nowrap}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:40px 0 100px}.method-grid article{background:#fff;padding:34px;min-height:270px}.method-grid span{color:var(--orange);font-weight:700}.method-grid h2{font-size:2.3rem;margin:45px 0 15px}.sources-section{padding:75px 0;border-top:1px solid var(--line)}.sources-section h2{margin-bottom:35px}.sources-list{max-width:850px}.sources-list a{display:flex;align-items:center;gap:17px;padding:18px 0;border-top:1px solid var(--line)}.sources-list a>svg:first-child{color:var(--green)}.sources-list span{display:flex;flex-direction:column}.sources-list small{color:var(--muted)}.sources-list a>svg:last-child{margin-left:auto;width:17px}.contact-card{margin-top:80px;background:var(--mint);padding:65px}.contact-card h2{font-size:3.4rem}.calculator{display:grid;grid-template-columns:1fr 1fr;background:#fff;max-width:1000px}.calc-form{padding:45px}.calc-form h2{font-size:2.8rem}.calc-form label{display:block;font-size:.78rem;font-weight:700;margin:14px 0}.calc-form input{display:block;width:100%;border:0;border-bottom:1px solid var(--line);padding:8px 0;font:1.05rem var(--sans);color:var(--ink);outline-color:var(--green)}.calc-result{background:var(--green);color:#fff;padding:55px;display:flex;flex-direction:column;justify-content:center}.calc-result .eyebrow{color:var(--mint)}.calc-result strong{font:600 clamp(4rem,8vw,7rem)/1 var(--serif)}.calc-result>p:not(.eyebrow){color:var(--mint);margin-top:14px}.result-note{border-top:1px solid #ffffff55;padding-top:18px;margin-top:25px;font-size:.8rem;display:flex;gap:8px}.result-note svg{width:17px;flex:none}.not-found{max-width:1250px;margin:auto;padding:130px 5vw}.not-found p:not(.eyebrow){font-size:1.1rem}.site-footer{background:var(--ink);color:#EDE8DE;padding:65px max(5vw,calc((100vw - 1250px)/2)) 22px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:55px}.footer-brand .brand-mark{background:var(--mint);color:var(--green)}.footer-grid>div:first-child p{margin:20px 0 0;max-width:270px;color:#C9C4B8;font-size:.88rem}.footer-grid h3{font:700 .75rem var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}.footer-grid a:not(.brand){display:block;font-size:.85rem;color:#C9C4B8;margin:9px 0}.footer-note{border-left:1px solid #4A5751;padding-left:20px;display:flex;gap:10px}.footer-note svg{color:var(--mint);width:18px}.footer-note p{font:500 1.35rem/1.1 var(--serif)}.footer-bottom{border-top:1px solid #4A5751;padding-top:18px;color:#C9C4B8;font-size:.72rem;display:flex;justify-content:space-between}.reveal-on-scroll{opacity:0;transform:translateY(20px);transition:.7s}.reveal-on-scroll.revealed{opacity:1;transform:none}@media(max-width:800px){.topline p{display:none}.topline{justify-content:flex-end}.nav-wrap{height:70px}.menu-toggle{display:block;margin-left:auto}.main-nav{display:none;position:absolute;top:107px;left:0;right:0;background:var(--cream);padding:20px 5vw;z-index:2;box-shadow:0 7px 12px #14201A15}.main-nav.open{display:grid;gap:15px}.nav-cta{display:none}.hero,.intro,.article-grid,.occitanie-block,.guide-grid,.region-grid,.calculator{grid-template-columns:1fr;gap:35px}.hero-copy{padding:67px 7vw 55px}.hero-image{min-height:310px}.hero-image img{height:310px}.intro,.editorial-section,.newsletter{padding-top:75px;padding-bottom:75px}.section-head{align-items:start;gap:20px;flex-direction:column}.section-head h2{font-size:2.8rem}.feature-card img{height:240px}.budget-banner{margin:0;padding:60px 7vw;display:block}.budget-graphic{margin:45px auto 0;width:230px;height:230px}.occ-image{height:390px}.newsletter{display:block}.newsletter h2{font-size:2.9rem;margin-bottom:35px}.newsletter form{width:auto}.page-hero{padding:75px 0 55px}.guide-grid,.region-grid{padding:45px 0}.checklist>div,.method-grid{grid-template-columns:1fr}.checklist{padding:65px 0}.source-strip{grid-template-columns:1fr;padding:34px}.source-strip .text-link{white-space:normal}.method-grid{padding-bottom:65px}.contact-card{padding:40px 28px}.calc-form,.calc-result{padding:35px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-note{display:none}}@media(max-width:450px){h1{font-size:3.35rem}.trust-row{gap:12px;flex-wrap:wrap}.hero-actions{gap:17px}.button{padding:13px}.footer-grid{gap:28px}.card-body h3{font-size:1.85rem}.page-hero h1{font-size:3.2rem}} /* ===== BLOC SOUS-MENU OUTILS — sans JavaScript (hover + focus-within) ===== */ .nav-item{position:relative;display:inline-flex;align-items:center} .has-sub>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)} .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px} .sub-nav{position:absolute;top:calc(100% + 18px);left:-16px;z-index:30;min-width:296px;flex-direction:column;gap:1px;padding:8px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 34px rgba(31,58,77,.14);display:none} .has-sub:hover>.sub-nav,.has-sub:focus-within>.sub-nav{display:flex} .sub-nav a{display:block;padding:9px 12px;font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap;border-left:2px solid transparent} .sub-nav a small{display:block;margin-top:2px;font-family:var(--font-body);font-size:11px;font-weight:400;color:var(--text-muted)} .sub-nav a:hover,.sub-nav a:focus{background:var(--fill);color:var(--primary);border-left-color:var(--primary)} .sub-nav a:hover small,.sub-nav a:focus small{color:var(--text-secondary)} .sub-nav-all{margin-top:5px;border-top:1px solid var(--line);padding-top:11px!important;color:var(--primary)} @media(max-width:850px){ .nav-item{display:block} .has-sub::after{display:none} .has-sub>a::after{transform:rotate(45deg) translateY(-2px)} .sub-nav{position:static;display:flex;min-width:0;margin:9px 0 4px 2px;padding:2px 0 2px 14px;border:0;border-left:2px solid var(--line);box-shadow:none;background:transparent;gap:0} .sub-nav a{white-space:normal;padding:7px 0;font-size:13px;border-left:0} .sub-nav a small{display:none} .sub-nav a:hover,.sub-nav a:focus{background:transparent} .sub-nav-all{padding-top:8px!important} } /* ===== ENVELOPPE + OUVERTURE NORMÉE (couches 1 et 2 du gabarit) ===== */ .author-card{display:flex;gap:18px;align-items:flex-start;margin:0 0 22px;padding:20px 22px;background:var(--fill);border-left:3px solid var(--primary)} .author-card .author-avatar{flex:0 0 auto;line-height:0} .author-card .author-img{object-fit:cover} .author-footer .author-card .author-img{width:88px;height:88px;object-fit:cover;border-radius:50%} .author-footer .author-card .author-monogram{width:88px;height:88px;font-size:30px} .author-name{margin:0;font-family:var(--font-heading);font-size:16px;font-weight:700;line-height:1.3} .author-name a{color:var(--text-strong)} .author-name a:hover{color:var(--primary)} .author-job{display:block;margin-top:3px;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-muted)} .author-legit{margin:11px 0 0;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--text-strong)} .author-bio{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-secondary)} .author-links{margin:10px 0 0;font-size:13px} .author-links a{color:var(--primary);font-weight:700;border-bottom:1px solid currentColor} .page-dates{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 22px;font-size:12px;color:var(--text-muted)} .page-dates time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-secondary)} .method-note{margin:0 0 26px;padding:17px 19px;background:var(--callout-bg);border:1px solid var(--callout-border);border-left:3px solid var(--primary)} .method-note-title{margin:0 0 6px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--callout-text)} .method-note p:last-child{margin:0;font-size:14px;line-height:1.6;color:var(--callout-text)} .opening{margin:0 0 34px} .opening .answer{margin:0;padding:22px 24px;background:var(--secondary);color:var(--white);font-family:var(--font-heading);font-size:clamp(17px,1.9vw,20px);line-height:1.45;letter-spacing:-.2px} .essentials{margin:0;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-top:0} .essentials-title{margin:0 0 10px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)} .essentials ul{margin:0;padding:0;list-style:none} .essentials li{position:relative;padding:7px 0 7px 22px;font-size:15px;line-height:1.5;color:var(--text)} .essentials li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:2px;background:var(--primary)} .scope{margin:0;padding:14px 24px;background:var(--fill);border:1px solid var(--border);border-top:0;font-size:13.5px;line-height:1.55;color:var(--text-secondary)} .scope span{font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-muted);margin-right:6px} .scope a{color:var(--secondary);font-weight:700;border-bottom:1px solid currentColor} .scope a:hover{color:var(--primary)} .update-log{margin:0;padding:20px 22px;border-top:2px solid var(--secondary);background:var(--fill)} .update-log-title{margin:0 0 9px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)} .update-log ul{margin:0;padding:0;list-style:none} .update-log li{padding:6px 0;font-size:13.5px;line-height:1.5;color:var(--text-secondary);border-bottom:1px solid var(--border)} .update-log li:last-child{border-bottom:0} .update-log time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-strong)} @media(max-width:640px){.author-card{padding:16px}.opening .answer{padding:18px}.essentials,.scope{padding:16px 18px}} /* Signature de tête — identité et dates sur une seule ligne. Le parcours de l'auteur n'est pas ici : il se lit en pied, via .author-footer. */ .author-byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--border,#D3CEC1);font-size:13px;color:var(--text-secondary,#4A554D)} .byline-author a{color:var(--secondary,#3A4A3F);font-weight:700;border-bottom:1px solid currentColor} .byline-author a:hover{color:var(--primary,#A65E2E)} .author-byline .page-dates{margin:0;gap:6px 18px} /* Pied d'article — la carte auteur complète, détachée du corps du texte. */ .author-footer{margin:38px 0 22px;border-top:2px solid var(--secondary,#3A4A3F)} .author-footer .author-card{margin:0} /* Signature dans le hero d'article (blog) : le hero est un aplat sombre, la signature doit y passer en blanc. Sans cette règle, elle hérite des couleurs pensées pour un fond clair et devient illisible (contraste ~1,1:1). */ .guide-hero .author-byline, .guide-hero .author-byline .page-dates, .guide-hero .byline-author a, .guide-hero .page-dates time{color:#FFFFFF} .guide-hero .author-byline{border-bottom-color:rgba(255,255,255,.28)} /* ===== SOURCES — liens sortants cités près de l'affirmation ===== */ .source-note a[rel~="nofollow"]{color:var(--secondary);font-weight:600;border-bottom:1px solid var(--text-faint)} .source-note a[rel~="nofollow"]:hover{color:var(--primary);border-bottom-color:var(--primary)} .tool-table a[rel~="nofollow"]{font-weight:600;text-decoration:none;border-bottom:1px solid var(--text-faint)} .tool-table a[rel~="nofollow"]:hover{color:var(--primary);border-bottom-color:var(--primary)} .source-list{list-style:none;margin:0;padding:0;max-width:820px} .source-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px} .source-list li:last-child{border-bottom:0} .source-list span{display:block;margin-top:2px;font-size:11px;color:var(--text-muted)} /* 06a-contraste */ /* Le bloc enveloppe colore le lien de signature en var(--secondary) en supposant un neutre foncé (fallback #3A4A3F). Ici --secondary est la terre cuite d'accent : 3,51:1 sur le fond papier, sous le seuil de 4,5:1. Le vert primaire donne 8,6:1. */ .byline-author a{color:var(--primary)} .byline-author a:hover{color:var(--secondary)} /* ===== BLOC LARGEUR UNIFIÉE — toutes les pages à la largeur de la home ===== */ /* * Référence = les sections de contenu de la home : * .intro,.editorial-section,.occitanie-block,.newsletter{max-width:1250px;margin:auto;padding:115px 5vw} * Tout conteneur de page s'aligne sur ces 1250px et sur ce padding latéral de 5vw. * * Trois causes distinctes se cumulaient ici, et elles n'ont pas le même remède. * Le gabarit générique du parc (06-largeur-pages.css) ne pouvait en traiter aucune : * il cible .guide-narrow / .article-narrow / .content-narrow, des classes d'autres * builders, absentes de ce front. */ /* 1. Conteneurs employés par le markup mais JAMAIS déclarés par la feuille : * .container (plan du site) et .wrap (pages légales). Sans règle, ces pages * s'affichent pleine largeur, collées aux bords du viewport. Le markup étant * correct, aucun diff de HTML ne pouvait le montrer. */ .container, .wrap{max-width:1250px;margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw} /* 2. Blocs internes plus étroits que la home. Le conteneur .simple-page fait déjà * 1250px : c'est à l'intérieur que les pages se rétrécissaient (hero à 850, * simulateurs à 1000, listes de sources à 850 et 820). */ .page-hero, .calculator, .sources-list, .source-list{max-width:none} .guide-grid article>p{max-width:none} /* 3. .psm-wrap est déclaré dans un