:root{--primary: #A63D2F;--primary-hover: #8C3227;--secondary: #24303A;--on-primary: #FFFFFF;--surface: #FFFFFF;--ink:#24303A;--blue:#A63D2F;--cyan:#FBEEEB;--paper:#F6F6F3;--mist:#EDEDE8;--line:#D8D8D0;--muted:#5E6E7A;--dark:#24303A;--serif:Literata,Georgia,serif;--sans:'IBM Plex Sans',Arial,sans-serif;--mono:'IBM Plex Sans',Arial,sans-serif;--fill:#EDEDE8;--border:#D8D8D0;--text:#24303A;--text-secondary:#4A5A66;--text-muted:#5E6E7A;--text-strong:#101A21;--text-faint:#C6CCD0;--font-heading:Literata,Georgia,serif;--font-body:'IBM Plex Sans',Arial,sans-serif;--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 var(--sans)}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);letter-spacing:-.045em;line-height:1.1}h1{font-size:clamp(2.7rem,6vw,5.8rem);font-weight:800}h2{font-size:clamp(2.1rem,4vw,3.7rem);font-weight:800}h3{font-size:1.2rem;font-weight:800}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px}.site-header{padding:20px 5%;background:var(--paper);position:relative;z-index:2}.nav-wrap{margin:auto;max-width:1320px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:1.1;font-weight:600}.brand b{font-weight:800}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--blue);color:#fff}.brand-mark svg{width:20px}nav{display:none;gap:28px;font-weight:700;font-size:13px}nav a:hover,.text-link:hover,.reading-grid a:hover{color:var(--blue)}.nav-cta{font-weight:800;font-size:12px;display:flex;gap:7px;align-items:center}.nav-cta svg{width:15px}.hero{max-width:1320px;margin:auto;min-height:590px;padding:56px 5% 76px;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:22px}.eyebrow span{display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:8px}.hero h1{margin-bottom:24px}.hero h1 em,.article-hero em{color:var(--blue);font-style:normal}.lede{max-width:570px;font-size:18px;line-height:1.65;color:var(--muted)}.hero-actions{display:flex;gap:25px;align-items:center;margin-top:34px}.button{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:9px;padding:14px 19px;font:800 13px var(--sans);transition:.2s transform,.2s background}.button:hover{transform:translateY(-2px)}.button svg{width:17px}.button-primary{background:var(--blue);color:#fff}.button-primary:hover{background:#8C3227}.button-dark{background:var(--dark);color:#fff;width:100%;margin-top:20px}.text-link{font-weight:800;font-size:13px;display:flex;align-items:center;gap:7px}.text-link svg,.reading-grid a svg{width:15px}.hero-panel{background:var(--dark);color:#fff;border-radius:var(--radius);padding:25px;box-shadow:16px 16px 0 var(--cyan)}.panel-top{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);display:flex;justify-content:space-between;padding-bottom:25px;border-bottom:1px solid #3A4A57}.panel-top svg{width:18px}.claim{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid #3A4A57}.claim p{margin:0;font-weight:700;line-height:1.45}.claim-num{font:500 11px var(--mono);color:var(--cyan)}.claim-last{border:0}.panel-tag{margin-top:5px;border-radius:8px;padding:11px;background:#33404C;color:#F7DED8;font-size:11px;font-weight:700;display:flex;gap:8px;align-items:center}.panel-tag svg{width:15px}.proof-bar{background:var(--blue);color:#fff;padding:25px 5%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.proof-bar div{border-right:1px solid #C97A6C;padding-right:10px}.proof-bar strong{display:block;font-size:22px}.proof-bar span,.proof-bar p{font-size:10px;line-height:1.25;margin:0}.proof-bar p{grid-column:1/-1;color:#F7DED8;font-weight:700}.tools-section{max-width:1320px;margin:0 auto;padding:110px 5%}.section-heading{display:grid;grid-template-columns:1fr;gap:10px;align-items:end;margin-bottom:40px}.section-heading .eyebrow{grid-column:1/-1}.section-heading h2{margin-bottom:0}.section-heading>p:last-child{color:var(--muted);max-width:395px}.tool-stack{display:grid;grid-template-columns:1fr;gap:20px}.tool-card{border-radius:var(--radius);padding:27px;display:flex;flex-direction:column;min-height:440px}.tool-blue{background:var(--blue);color:#fff}.tool-light{background:#FBEEEB}.tool-title{position:relative}.tool-title>svg{position:absolute;right:0;top:0;width:28px}.tool-index{font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;opacity:.8}.tool-card h3{font-size:1.75rem;margin:30px 0 8px}.tool-card p{font-size:13px;line-height:1.55;max-width:370px;margin-bottom:26px}.tool-card form{margin-top:auto}.tool-card label{display:block;font-size:11px;font-weight:800;margin-bottom:8px}.input-row{display:flex;border-bottom:1px solid #E8C9C2}.input-row input,.tax-form input{border:0;background:transparent;outline:0;padding:10px 0;color:inherit;font:600 14px var(--sans);width:100%}.input-row input::placeholder,.tax-form input::placeholder{color:inherit;opacity:.6}.input-row button{background:transparent;border:0;color:inherit;cursor:pointer}.input-row svg{width:19px}.tool-foot{font:500 10px/1.4 var(--mono);margin-top:25px;opacity:.78}.tool-foot span{margin:0 5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.tax-form input{border-bottom:1px solid #E8C9C2;padding-bottom:8px}.result-box{margin-top:20px;padding:14px 16px;border:1px solid var(--line);display:flex;gap:11px;align-items:flex-start;border-radius:10px;background:#fff;color:var(--muted);font-size:12px}.result-box svg{width:17px;min-width:17px;color:var(--blue)}.result-box p{margin:0}.reading-section{max-width:1320px;margin:auto;padding:25px 5% 110px;display:grid;grid-template-columns:1fr;gap:40px}.reading-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.reading-grid article{background:#fff;border:1px solid #D8D8D0;padding:22px;border-radius:12px;transition:.2s transform,.2s box-shadow}.reading-grid article:hover{transform:translateY(-4px);box-shadow:0 11px 30px #1235}.reading-grid span{display:grid;place-items:center;width:37px;height:37px;border-radius:9px;background:var(--mist);color:var(--blue);margin-bottom:25px}.reading-grid span svg{width:19px}.reading-grid h3{font-size:15px;margin-bottom:10px}.reading-grid p{font-size:12px;line-height:1.55;color:var(--muted);min-height:76px}.reading-grid a{font-size:11px;font-weight:800;color:var(--blue);display:flex;gap:5px;align-items:center}.rules{background:var(--dark);color:#fff;padding:80px 5%}.rules-head,.rules-list{max-width:1320px;margin:auto}.rules-head p:last-child{color:#C6CCD0;max-width:410px}.rules-list{margin-top:48px;display:grid;grid-template-columns:1fr;gap:0}.rules-list>div{padding:22px 0;border-top:1px solid #3A4A57}.rules-list b{font:500 11px var(--mono);color:var(--cyan)}.rules-list h3{font-size:17px;margin:10px 0}.rules-list p{font-size:12px;color:#C6CCD0;margin:0}.cta-banner{max-width:1180px;margin:80px auto;padding:42px 5%;background:var(--cyan);border-radius:var(--radius);display:flex;flex-direction:column;align-items:flex-start;gap:20px}.cta-banner h2{font-size:clamp(1.8rem,4vw,3.2rem);margin:0}.cta-banner .eyebrow{color:var(--dark);margin-bottom:16px}.site-footer{background:#EDEDE8;padding:56px 5% 22px}.footer-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid p:not(.eyebrow){font-size:12px;color:#4A5A66;max-width:250px;margin-top:17px}.footer-grid .eyebrow{margin-bottom:12px;color:#4A5A66}.footer-grid a:not(.brand){display:block;font-size:12px;font-weight:700;margin:8px 0}.footer-grid a svg{vertical-align:middle;width:12px}.footer-bottom{max-width:1320px;margin:45px auto 0;padding-top:17px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;color:#4A5A66;font:10px var(--mono)}.article-page{max-width:1120px;margin:auto;padding:65px 5% 100px}.article-hero{max-width:850px;padding-bottom:60px}.article-hero h1{font-size:clamp(2.6rem,5vw,4.6rem);margin-bottom:22px}.article-hero>p:last-child{font-size:17px;color:var(--muted);max-width:670px}.compact{padding-bottom:30px}.article-layout{display:grid;grid-template-columns:1fr;gap:38px}.article-nav{font-size:12px;border-left:2px solid var(--cyan);padding-left:15px}.article-nav p{font:800 11px var(--mono);color:var(--blue);text-transform:uppercase}.article-nav a{display:block;margin:8px 0;font-weight:700;color:var(--muted)}.article-content{max-width:680px}.article-content section{padding:32px 0;border-top:1px solid var(--line)}.section-number{font:500 11px var(--mono);color:var(--blue)}.article-content h2,.legal-content h2{font-size:1.8rem}.article-content p,.legal-content p{color:var(--muted)}.source-note{padding:22px!important;background:var(--mist);border:0!important;border-radius:12px;display:flex;gap:15px}.source-note svg{color:var(--blue)}.source-note h3{margin-bottom:7px}.source-note p{margin-bottom:0;font-size:12px}.legal-content{max-width:760px}.legal-content h2{margin:44px 0 10px}.legal-content a{color:var(--blue);font-weight:800}.not-found{min-height:62vh;max-width:900px;margin:auto;padding:110px 5%}.not-found h1{margin-bottom:18px}.not-found>p:not(.eyebrow){color:var(--muted);font-size:17px;margin-bottom:30px}.reveal-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.reveal-on-scroll.revealed{opacity:1;transform:none}@media(min-width:768px){.site-header{padding-top:26px}.nav-wrap{padding:0 2%}nav{display:flex}.hero{grid-template-columns:1.2fr .72fr;padding-top:90px}.proof-bar{grid-template-columns:repeat(3,1fr) 1.6fr;padding-left:7%;padding-right:7%;align-items:center}.proof-bar p{grid-column:auto;font-size:12px}.tools-section{padding-top:135px}.section-heading{grid-template-columns:1fr 1fr}.tool-stack{grid-template-columns:1fr 1fr}.reading-section{grid-template-columns:.7fr 1.6fr;gap:65px}.reading-grid{gap:16px}.rules{padding:110px 5%}.rules-head{display:grid;grid-template-columns:1fr 1fr;gap:30px}.rules-head .eyebrow{grid-column:1/-1;margin-bottom:0}.rules-head h2{margin:0}.rules-head p:last-child{align-self:end;margin:0}.rules-list{grid-template-columns:repeat(3,1fr);gap:32px}.rules-list>div{padding-top:25px}.cta-banner{padding:55px;flex-direction:row;justify-content:space-between;align-items:center}.footer-grid{grid-template-columns:1fr 1fr}.article-layout{grid-template-columns:180px 1fr}.article-nav{align-self:start;position:sticky;top:25px}}@media(min-width:1100px){.hero{padding-left:7%;padding-right:7%}.tools-section,.reading-section{padding-left:7%;padding-right:7%}.tool-card{padding:34px}.reading-grid article{padding:27px}.rules{padding-left:7%;padding-right:7%}.site-footer{padding-left:7%;padding-right:7%}}
/* ==== Outils du Carnet de Residence [05-tools] ==== */
.breadcrumb{max-width:1120px;margin:0 auto;padding:18px 5% 0;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{font-weight:700}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb span{margin:0 6px}
.breadcrumb [aria-current]{color:var(--ink)}
.article-hero .essentiel{max-width:670px;margin:22px 0 0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.6}
.article-hero .essentiel li{margin-bottom:7px}
.article-hero .perimetre{max-width:670px;margin-top:20px;padding:14px 16px;border-left:3px solid var(--primary);background:var(--mist);font-size:13px;color:var(--ink)}
.outil-form{margin:6px 0 24px;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.outil-form label{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.outil-form .input-row{border-bottom:1px solid var(--line);margin-bottom:16px;align-items:center}
.outil-form .input-row input{font:600 15px var(--sans);color:var(--ink)}
.outil-form .input-row button{font:800 12px var(--sans);color:var(--primary);padding:0 4px;white-space:nowrap}
.outil-form .form-grid{gap:18px;margin-bottom:18px}
.outil-form .form-grid input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;outline:0;padding:9px 0;font:600 15px var(--sans);color:var(--ink)}
.outil-form .form-grid input:focus,.outil-form .input-row input:focus{border-color:var(--primary)}
.outil-form .button-dark{width:auto;margin-top:4px}
.outil-form .form-note{margin:14px 0 0;font:500 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.outil-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.outil-table caption{caption-side:top;text-align:left;padding:14px 16px;font:500 10px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.outil-table th,.outil-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.outil-table thead th{font:800 11px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.outil-table tbody th{font-weight:700;color:var(--muted);white-space:nowrap}
.outil-table tbody tr:last-child th,.outil-table tbody tr:last-child td{border-bottom:0}
.outil-table strong{color:var(--primary)}
.faq-list{margin-top:8px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;padding:16px 0;font-weight:800;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--primary);font-weight:800}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list summary:hover{color:var(--primary)}
.faq-list details p{margin:0 0 18px;font-size:13px;color:var(--muted)}
.faq-list details a{color:var(--primary);font-weight:700}
.pilier-remonte{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pilier-remonte a{color:var(--primary);font-weight:800}
.article-content .source-note a{color:var(--primary);font-weight:700}
@media(min-width:768px){.breadcrumb{padding-top:26px}.outil-form{padding:28px}}

/* ===== 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}
}

/* ===== FOOTER 5 COLONNES [05b] ===== */
@media(min-width:1100px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr}.footer-grid>div:first-child{grid-column:auto}}

/* ===== BLOC LARGEUR UNIFIÉE — toutes les pages à la largeur de la home ===== */
/*
 * Posé par 06a2-largeur-contenu. Les sélecteurs ci-dessous ont été RELEVÉS
 * dans les feuilles réellement chargées par le front, pas devinés : c'est la
 * correction du défaut d'origine, où une liste de classes supposées rendait
 * le bloc inerte sans que rien ne le signale.
 *
 * Largeur de référence relevée sur `.container` : la largeur de `.container`.
 *
 * `!important` est délibéré. Une contrainte peut être déclarée dans une
 * feuille chargée APRÈS celle-ci, ou plus bas dans ce même fichier par un
 * bloc appendu ultérieurement : à spécificité égale elle gagnerait, et le
 * bloc serait posé, validé, et sans effet.
 *
 * Les contrôles de formulaire, les images et les cartes sont épargnés.
 *
 * Ce qui suit la borne « relevé automatique : fin » est CONSERVÉ au rejeu :
 * c'est là que vivent les règles tranchées à la main. N'écris rien au-dessus.
 */

/* --- relevé automatique : début --- */
.nav-wrap{max-width:none!important}   /* styles.css : 1320px */
.hero{max-width:none!important}   /* styles.css : 1320px */
.lede{max-width:none!important}   /* styles.css : 570px */
.tools-section{max-width:none!important}   /* styles.css : 1320px */
.section-heading>p:last-child{max-width:none!important}   /* styles.css : 395px */
.reading-section{max-width:none!important}   /* styles.css : 1320px */
.rules-head p:last-child{max-width:none!important}   /* styles.css : 410px */
.cta-banner{max-width:none!important}   /* styles.css : 1180px */
.footer-grid{max-width:none!important}   /* styles.css : 1320px */
.footer-grid p:not(.eyebrow){max-width:none!important}   /* styles.css : 250px */
.footer-bottom{max-width:none!important}   /* styles.css : 1320px */
.article-page{max-width:none!important}   /* styles.css : 1120px */
.article-hero{max-width:none!important}   /* styles.css : 850px */
.article-hero>p:last-child{max-width:none!important}   /* styles.css : 670px */
.article-content{max-width:none!important}   /* styles.css : 680px */
.legal-content{max-width:none!important}   /* styles.css : 760px */
.not-found{max-width:none!important}   /* styles.css : 900px */
.breadcrumb{max-width:none!important}   /* styles.css : 1120px */
.article-hero .essentiel{max-width:none!important}   /* styles.css : 670px */
.article-hero .perimetre{max-width:none!important}   /* styles.css : 670px */
.source-list{max-width:none!important}   /* styles.css : 820px */

/* Grilles à deux colonnes relevées, NON collapsées d'office : une grille de
   cartes se collapserait à tort. À trancher au brief 06a2, puis à écrire
   SOUS la borne de fin ci-dessous. */
/*   .reading-grid { grid-template-columns: 1fr 1fr }  (styles.css) */
/*   .footer-grid { grid-template-columns: 1fr 1fr }  (styles.css) */
/*   .hero { grid-template-columns: 1.2fr .72fr }  (styles.css) */
/*   .tool-stack { grid-template-columns: 1fr 1fr }  (styles.css) */
/*   .reading-section { grid-template-columns: .7fr 1.6fr }  (styles.css) */
/* --- relevé automatique : fin --- */

/* Règles tranchées à la main, conservées au rejeu de 06a2. */
/* Règles tranchées à la main, conservées au rejeu de 06a2. Tranché le 11/09/2026.
 *
 * Les règles du gabarit générique qui vivaient ici ciblaient `.content-narrow`,
 * absent du markup de ce front : posées, validées, et sans aucun effet. Elles sont
 * remplacées par les sélecteurs réellement présents.
 *
 * Largeur de référence = celle de la home : aucun plafond, et la même gouttière
 * latérale (5 %, 7 % au-delà de 1100 px). Les deux déclarations `min(…,1140px)`
 * du gabarit plafonnaient les pages de contenu près de 500 px sous la home sur un
 * grand écran — exactement l'écart que cette étape existe pour supprimer.
 */
.article-layout{width:auto;margin-inline:0}
@media(min-width:1100px){.article-page{padding-left:7%;padding-right:7%}}

/* Grilles à deux colonnes tranchées.
 *
 * TEXTE — intitulé à gauche, corps à droite : `.section-heading` et `.rules-head`.
 * Leur cellule de droite est un paragraphe de corps dont le plafond de largeur
 * vient d'être neutralisé au-dessus ; laissée en deux colonnes, la grille reprend
 * la moitié de largeur que le plafond retirait. Elles passent en une colonne.
 * La déclaration est inconditionnelle sans risque : la base mobile de ces deux
 * grilles est déjà à une colonne, les deux colonnes n'existent qu'à partir de
 * 768 px. Rien n'est donc écrasé sur mobile.
 *
 * CARTES — laissées telles quelles : `.reading-grid` et `.tool-stack` (grilles de
 * cartes), `.hero` (copie + panneau latéral, deux blocs distincts), `.footer-grid`
 * (colonnes de liens), `.reading-section` (colonne d'intitulé + grille de cartes,
 * dont le collapse n'élargirait aucun corps de texte).
 */
.section-heading{grid-template-columns:1fr!important;gap:14px!important}
.rules-head{grid-template-columns:1fr!important;gap:14px!important}

/* Garde-fou : les contrôles de formulaire des outils restent plafonnés. Un champ
 * étiré sur 1600 px n'est pas une préférence de style, c'est une régression d'usage.
 */
.outil-form input,.outil-form select,.outil-form textarea{max-width:520px}
.outil-form .input-row{max-width:560px}

/* Debordement horizontal sur mobile — defaut du builder, mesure au navigateur a
 * 390 px sur TOUTES les pages de contenu, /methodologie comprise (donc anterieur
 * a cette etape). Le `<style>` inline du header pose
 * `content-visibility:auto;contain-intrinsic-size:auto 680px` : la forme a deux
 * valeurs `auto <longueur>` s appliquant aux DEUX axes, chaque section hors ecran
 * declare une largeur intrinseque de 680 px. `.article-content` etant un item de
 * grille dans une piste `1fr` (donc `minmax(auto,1fr)`), ce min-content de 680 px
 * devient le plancher de la piste et la page deborde de 353 px.
 * La hauteur intrinseque est conservee — c est elle qui evite le saut de scroll ;
 * seule la largeur est rendue a la mise en page normale. Le `<style>` inline etant
 * apres le `<link>`, il gagne a specificite egale : `!important` est necessaire.
 */
.article-content section,.legal-content,.reading-section,.rules,.content-band,.faq-section,.cta-banner{contain-intrinsic-width:none!important}

/* ===== ANCRE DE RESULTAT DES OUTILS [05c] ===== */
#resultat{scroll-margin-top:28px}
html:has(#resultat[autofocus]){scroll-behavior:auto}

/* ===== 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:var(--radius-round, 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)}

/* ===== PREMIER ECRAN SUR ECRAN BAS [06a4] ===== */
/* Le h1 du premier ecran occupe plusieurs lignes des que la colonne se resserre.
 * Sur un ecran bas (1366x768 typiquement), les boutons du hero passaient 10 px
 * sous la ligne de flottaison — mesure au navigateur, invisible sur un ecran
 * haut. La regle ne s applique qu a cette hauteur : les ecrans hauts gardent
 * le rythme d origine. */
@media(min-width:768px) and (max-height:820px){.hero{padding-top:52px;padding-bottom:52px;min-height:0}}