:root{--primary: #B04E22;--primary-hover: #8F3D19;--on-primary: #FFFFFF;--secondary: #22312C;--secondary-hover: #2E4139;--bg: #F3F0E9;--surface: #FFFFFF;--text: #22312C;--text-secondary: #3E514A;--text-strong: #141F1B;--text-muted: #566761;--text-faint: #D6D1C5;--fill: #E8E3D7;--border: #D5CFC1;--white: #FFFFFF;--callout-bg: #F6E7D6;--callout-text: #6E3212;--callout-border: #B04E22;--font-heading:'Archivo',system-ui,sans-serif;--font-body:'Source Serif 4',Georgia,serif;--ink:var(--secondary);--deep:var(--primary);--sea:var(--fill);--sand:var(--bg);--ochre:var(--callout-bg);--muted:var(--text-muted);--line:var(--border);--mono:var(--font-heading);--sans:var(--font-body);--serif:var(--font-heading);--wrap:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--sans);line-height:1.55}.site-header{background:rgba(243,240,233,.95);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(34,49,44,.09);backdrop-filter:blur(10px)}.nav-wrap{height:82px;max-width:var(--wrap);margin:auto;padding:0 26px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:bold 17px/14px var(--font-heading);text-decoration:none;letter-spacing:-.5px}.brand em{font-family:var(--serif);font-weight:600}.brand-mark{height:35px;width:35px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:#fff}.brand-mark svg{width:18px}.main-nav{display:flex;align-items:center;gap:28px}.main-nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}.main-nav a:hover,.main-nav .active{color:var(--deep)}.main-nav .nav-cta{background:var(--deep);color:#fff;padding:10px 15px;border-radius:4px;display:flex;gap:7px;align-items:center}.nav-cta svg{width:15px}.nav-toggle{display:none;border:0;background:transparent;color:var(--deep)}.eyebrow,.tag{font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--deep)}.hero{max-width:var(--wrap);margin:auto;padding:64px 26px 78px;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}.hero h1{font:600 clamp(43px,5vw,72px)/.99 var(--serif);letter-spacing:-.055em;margin:17px 0 21px}.hero h1 i{font-style:italic;color:var(--deep)}.hero-copy{font-size:18px;max-width:540px;color:var(--text-secondary)}.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 17px;border:1px solid var(--deep);border-radius:3px;font-size:14px;font-weight:700;text-decoration:none;color:var(--deep);transition:.2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--deep);color:#fff}.btn svg{width:17px}.hero-photo{position:relative}.hero-photo img{width:100%;height:470px;object-fit:cover;border-radius:3px;display:block;filter:saturate(.82)}.data-stamp{position:absolute;bottom:-23px;left:-25px;background:var(--callout-bg);color:var(--callout-text);padding:17px 20px;min-width:170px}.data-stamp b{font:600 28px/1 var(--serif);display:block}.data-stamp span{font:500 10px var(--mono);text-transform:uppercase}.trustbar{background:var(--deep);color:#fff}.trustbar-inner{max-width:var(--wrap);margin:auto;padding:22px 26px;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:20px}.trustbar p{margin:0;font-size:14px}.metric{border-left:1px solid rgba(255,255,255,.3);padding-left:18px}.metric strong{display:block;font:600 25px/1 var(--serif);color:var(--on-primary)}.metric span{font-size:11px;opacity:.8}.section{max-width:var(--wrap);margin:auto;padding:94px 26px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:34px}.section h2{font:600 clamp(32px,4vw,49px)/1.08 var(--serif);letter-spacing:-.04em;margin:9px 0 0}.section-intro{max-width:440px;color:var(--muted);margin:0}.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.area-card{background:#fff;border:1px solid var(--line);padding:24px;min-height:277px;display:flex;flex-direction:column;transition:.25s}.area-card:hover{border-color:var(--deep);transform:translateY(-4px);box-shadow:0 12px 30px rgba(176,78,34,.09)}.card-top{display:flex;justify-content:space-between;align-items:center}.badge{font:500 10px var(--mono);padding:5px 8px;background:var(--sea);color:var(--deep)}.area-card h3{font:600 26px/1.1 var(--serif);margin:20px 0 9px}.area-card p{font-size:13px;color:var(--muted);margin:0}.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}.facts span{font:500 10px var(--mono);background:var(--sand);padding:6px;color:var(--text-muted)}.card-arrow{margin-left:auto;color:var(--deep);width:18px}.split{background:var(--sea)}.split-inner{max-width:var(--wrap);margin:auto;padding:92px 26px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}.sticky-title{position:sticky;top:115px}.rule-list{border-top:1px solid rgba(176,78,34,.25)}.rule{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(176,78,34,.25)}.rule-number{font:500 11px var(--mono);color:var(--deep)}.rule h3{font:600 20px var(--serif);margin:0}.rule p{margin:4px 0 0;font-size:13px;color:var(--muted)}.rule svg{color:var(--deep);width:18px}.feature{max-width:var(--wrap);margin:0 auto 94px;padding:0 26px}.feature-panel{background:var(--ink);color:white;display:grid;grid-template-columns:1.05fr .95fr;min-height:410px}.feature-copy{padding:53px}.feature-copy h2{font:600 42px/1.04 var(--serif);letter-spacing:-.04em;margin:13px 0}.feature-copy p{color:var(--text-faint);max-width:470px}.feature-copy .eyebrow{color:var(--callout-bg)}.feature-img{height:100%;width:100%;object-fit:cover;filter:saturate(.65)}.page-hero{max-width:var(--wrap);padding:76px 26px 44px;margin:auto}.page-hero h1{font:600 clamp(42px,5vw,66px)/1 var(--serif);letter-spacing:-.05em;margin:14px 0}.page-hero p{font-size:18px;max-width:700px;color:var(--muted)}.notice{max-width:var(--wrap);margin:0 auto;padding:0 26px}.notice-inner{background:var(--callout-bg);padding:15px 18px;display:flex;gap:11px;font-size:13px}.notice svg{color:var(--callout-text);min-width:18px}.listing{max-width:var(--wrap);margin:auto;padding:48px 26px 94px;display:grid;grid-template-columns:240px 1fr;gap:35px}.filter{border-top:2px solid var(--deep);padding-top:14px}.filter h2{font:600 22px var(--serif);margin:0 0 15px}.filter label{display:block;margin:11px 0;font-size:13px}.filter input{accent-color:var(--deep)}.listing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.wide-card{background:#fff;border:1px solid var(--line);padding:24px}.wide-card h2{font:600 26px var(--serif);margin:13px 0 8px}.wide-card p{font-size:13px;color:var(--muted)}.wide-card footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;margin-top:20px;font:500 10px var(--mono);color:var(--deep)}.prose{max-width:820px;margin:auto;padding:45px 26px 90px}.prose h2{font:600 34px/1.1 var(--serif);margin:42px 0 14px}.prose p,.prose li{color:var(--text-secondary)}.prose li{margin:7px 0}.storage-grid{max-width:var(--wrap);margin:auto;padding:42px 26px 94px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.storage-card{border-top:3px solid var(--callout-border);padding:22px;background:#fff}.storage-card h2{font:600 27px var(--serif);margin:10px 0}.storage-card p{font-size:14px;color:var(--muted)}.checklist{list-style:none;padding:0}.checklist li{padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.checklist li:before{content:'✓';color:var(--deep);font-weight:bold;margin-right:9px}.site-footer{background:var(--ink);color:var(--bg);padding:52px max(26px,calc((100vw - var(--wrap))/2)) 25px}.footer-top{display:grid;grid-template-columns:1.1fr 1.2fr 1fr;gap:35px;align-items:start}.light-brand{color:#fff}.site-footer p{color:var(--text-faint);font-size:14px;margin:0}.footer-links{display:grid;gap:9px}.footer-links a{color:#fff;text-decoration:none;font-size:14px}.footer-bottom{margin-top:42px;padding-top:19px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:15px;color:var(--text-faint);font:10px var(--mono)}.reveal-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}.reveal-on-scroll.revealed{opacity:1;transform:none}@media(max-width:760px){.nav-wrap{height:70px;padding:0 18px}.nav-toggle{display:block}.main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--sand);padding:20px;box-shadow:0 10px 20px #22312C20;flex-direction:column;align-items:stretch;gap:18px}.main-nav.open{display:flex}.hero,.split-inner,.feature-panel{grid-template-columns:1fr}.hero{padding:48px 20px 68px;gap:34px}.hero h1{font-size:46px}.hero-photo img{height:310px}.data-stamp{left:12px}.trustbar-inner{grid-template-columns:1fr 1fr;padding:22px 20px}.trustbar-inner p{grid-column:span 2}.metric{padding-left:10px}.section{padding:65px 20px}.section-head{display:block}.section-intro{margin-top:16px}.area-grid,.storage-grid{grid-template-columns:1fr}.split-inner{padding:65px 20px;gap:38px}.feature{padding:0 20px;margin-bottom:65px}.feature-copy{padding:35px 26px}.feature-img{height:265px}.listing{padding:38px 20px 65px;grid-template-columns:1fr;gap:25px}.listing-grid{grid-template-columns:1fr}.page-hero{padding:55px 20px 28px}.notice{padding:0 20px}.footer-top{grid-template-columns:1fr;gap:22px}.footer-bottom{display:block}.footer-bottom span{display:block;margin:7px 0}.rule{grid-template-columns:45px 1fr}.rule svg{display:none}}
/* 01c — footer standard 4 colonne (marca / navigazione / dossier / info e note legali) */
.footer-top{grid-template-columns:1.4fr 1fr 1fr 1.1fr}
.footer-col .brand{margin-bottom:14px}
.footer-col-title{color:#fff;font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;margin:0 0 13px}
@media(max-width:760px){.footer-top{grid-template-columns:1fr;gap:22px}}

/* 05-tools — formulaires d'outils, checklist et impression */
.filter label{display:block;margin:11px 0 4px;font-size:13px;color:var(--text-secondary)}
.filter input[type=number],.filter select{width:100%;padding:9px 10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;border-radius:3px}
.filter input[type=number]:focus,.filter select:focus{outline:2px solid var(--primary);outline-offset:1px}
.filter label input[type=checkbox]{width:auto;margin-right:7px;accent-color:var(--primary)}
.filter button.btn{width:100%;justify-content:center;cursor:pointer;font-family:inherit}
.filter .btn{margin-top:4px}
.filter p{margin:14px 0 0}
.checkform{list-style:none;padding:0;margin:0}
.checkform li{border-bottom:1px solid var(--border)}
.checkform label{display:flex;gap:11px;align-items:flex-start;padding:11px 2px;font-size:14px;cursor:pointer}
.checkform input[type=checkbox]{margin-top:3px;min-width:16px;height:16px;accent-color:var(--primary)}
.checkform input[type=checkbox]:checked+span{color:var(--text-muted);text-decoration:line-through}
.listing>div>.wide-card+.wide-card,.listing>div>.wide-card+.prose{margin-top:17px}
.listing .prose{max-width:none;padding:26px 0 0}
@media print{
  .site-header,.site-footer,.blog-categories,.notice,.filter,.no-print,.page-hero p{display:none}
  .listing{display:block;padding:0}
  .wide-card{border:0;padding:0 0 18px;break-inside:avoid}
  .checkform label{cursor:auto}
  body{background:#fff}
}

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

/* 05b — footer a cinq colonnes et sous-menu aligne sur le breakpoint REEL du front.
   Le bloc sous-menu bascule en liste depliee a 850px alors que la nav du front
   ne passe en drawer qu'a 760px : entre les deux, le sous-menu se depliait dans
   la barre horizontale. On retablit la forme deroulante sur cet intervalle. */
.footer-top{grid-template-columns:1.4fr repeat(4,1fr);gap:26px}
@media(min-width:761px) and (max-width:850px){
.nav-item{display:inline-flex}
.has-sub::after{content:"";display:block}
.sub-nav{position:absolute;top:calc(100% + 18px);left:-16px;min-width:296px;margin:0;padding:8px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 34px rgba(34,49,44,.14);gap:1px;display:none}
.has-sub:hover>.sub-nav,.has-sub:focus-within>.sub-nav{display:flex}
.sub-nav a{white-space:nowrap;padding:9px 12px;border-left:2px solid transparent}
.sub-nav a small{display:block}
}
@media(max-width:760px){.footer-top{grid-template-columns:1fr;gap:22px}}

/* ===== 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 : var(--wrap) */
.hero{max-width:none!important}   /* styles.css : var(--wrap) */
.hero-copy{max-width:none!important}   /* styles.css : 600px!important */
.trustbar-inner{max-width:none!important}   /* styles.css : var(--wrap) */
.section{max-width:none!important}   /* styles.css : var(--wrap) */
.section-intro{max-width:none!important}   /* styles.css : 440px */
.split-inner{max-width:none!important}   /* styles.css : var(--wrap) */
.feature{max-width:none!important}   /* styles.css : var(--wrap) */
.feature-copy p{max-width:none!important}   /* styles.css : 470px */
.page-hero{max-width:none!important}   /* styles.css : var(--wrap) */
.page-hero p{max-width:none!important}   /* styles.css : 700px */
.notice{max-width:none!important}   /* styles.css : var(--wrap) */
.listing{max-width:none!important}   /* styles.css : var(--wrap) */
.prose{max-width:none!important}   /* styles.css : 820px */
.storage-grid{max-width:none!important}   /* styles.css : var(--wrap) */
.source-list{max-width:none!important}   /* styles.css : 820px */
.hero>div:first-child{max-width:none!important}   /* styles.css : 640px */

/* 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. */
/*   .hero { grid-template-columns: 1.05fr .95fr }  (styles.css) */
/*   .split-inner { grid-template-columns: .9fr 1.1fr }  (styles.css) */
/*   .feature-panel { grid-template-columns: 1.05fr .95fr }  (styles.css) */
/*   .trustbar-inner { grid-template-columns: 1fr 1fr }  (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. */
/* Règles tranchées à la main, conservées au rejeu de 06a2. */
/* Règles tranchées à la main, conservées au rejeu de 06a2. */
/* Règles tranchées à la main, conservées au rejeu de 06a2. */
/* Règles tranchées à la main, conservées au rejeu de 06a2. */
/* Règles tranchées à la main, conservées au rejeu de 06a2. */
.content-narrow{max-width:none!important}
.content-narrow select,.content-narrow input[type=number],.content-narrow input[type=text]{max-width:520px}
.article-layout{width:min(1140px,calc(100% - 40px));margin-inline:auto}
.article-body{max-width:72ch}
.article-layout{width:min(100% - 28px,1140px)}
.breadcrumb{max-width:var(--wrap);margin:0 auto;padding:18px 26px 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;font:500 11px var(--mono,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#566761)}
.breadcrumb li+li:before{content:"›";margin-right:7px;color:var(--text-muted,#566761)}
.breadcrumb a{color:var(--primary,#B04E22);text-decoration:none}
.breadcrumb a:hover,.breadcrumb a:focus{text-decoration:underline}
.breadcrumb [aria-current]{color:var(--text-secondary,#3E514A)}
#resultat{scroll-margin-top:96px;height:0;overflow:hidden}
html:has(#resultat[autofocus]){scroll-behavior:auto}
.faq details{border-bottom:1px solid var(--border,#D5CFC1);padding:2px 0}
.faq summary{cursor:pointer;padding:15px 2px;font-family:var(--font-heading,sans-serif);font-weight:600;font-size:16px;color:var(--text-strong,#141F1B);list-style:none;display:flex;gap:11px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--primary,#B04E22);font-weight:700;line-height:1.2}
.faq details[open] summary:before{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--primary,#B04E22);outline-offset:2px}
.faq .faq-body{padding:0 2px 15px 27px}
.faq .faq-body p{margin:0;color:var(--text-secondary,#3E514A)}
.breadcrumb{padding:14px 20px 0}
#resultat{scroll-margin-top:84px}
.faq summary{padding:13px 2px;font-size:15px}
.faq .faq-body{padding-left:27px}

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

/* --- 06a2, part tranchée à la main -------------------------------------- */
/*
 * Largeur de référence. Le relevé automatique cherche `.container` ; ce front
 * n'en a pas et nomme son conteneur `--wrap` (1180px). Faute de le trouver, il a
 * neutralisé TOUTES les contraintes, y compris celles des conteneurs externes :
 * la home comme les pages de contenu s'étiraient alors sur toute la largeur de
 * l'écran. Mesuré à 1600px de viewport : ~1548px de texte par ligne.
 *
 * On rétablit donc `--wrap` sur les conteneurs EXTERNES — home et pages de
 * contenu à la même largeur, ce que l'étape vise —, et on laisse neutralisées
 * les contraintes INTERNES plus étroites (.prose 820px, .hero-copy 540px,
 * .section-intro 440px, .page-hero p 700px, .feature-copy p 470px), qui sont
 * exactement ce qui faisait qu'une page de contenu était plus étroite que la home.
 */
.nav-wrap,.trustbar-inner,.section,.split-inner,.feature,.page-hero,.notice,.listing,.storage-grid,.prose{max-width:var(--wrap)!important;margin-inline:auto}
/* `.hero` est volontairement HORS de cette liste : sa banniere occupe toute
   la largeur de la fenetre, et c'est le `max-width:none` du releve automatique
   qui le lui permet. Son contenu reste aligne sur la colonne de lecture, voir
   le bloc du hero plus bas. */
/* .prose occupe la largeur de son conteneur, qui la borne déjà. */
.section>.prose,.listing .prose{max-width:none!important}

/*
 * Grilles à deux colonnes relevées — arbitrage, une par une.
 *
 * .split-inner        grille de TEXTE : `.sticky-title` (intitulé) à gauche,
 *                     `.rule-list` (le corps) à droite. Elle bride la largeur du
 *                     contenu → une seule colonne.
 * .hero               grille de MÉDIA : texte + photo. Conservée.
 * .feature-panel      grille de MÉDIA : texte + image pleine hauteur. Conservée.
 * .trustbar-inner     grille de CARTES : une phrase + trois métriques. Conservée.
 *                     Sa déclaration `1fr 1fr` relevée vient d'une media query
 *                     mobile : la collapser ici l'écraserait sous 760px.
 */
.split-inner{grid-template-columns:1fr!important;gap:38px!important}

/* --- Hero de la home : l'image en fond de TOUTE la section --------------- */
/*
 * L'image occupe l'intégralité de la section du hero, texte par-dessus, au lieu
 * d'etre confinee dans une colonne ou posee sous le H1.
 *
 * Le voile est un degrade horizontal : sabbia a 92 % sur la zone du texte, puis
 * il s'allege jusqu'a 45 % a droite pour laisser respirer la photo. 92 % est le
 * minimum mesure, pas un reglage a l'oeil : photo entierement noire au pire cas,
 * le fond effectif tombe a #DBD8D2, ce qui donne 9,56:1 pour le texte courant et
 * 5,95:1 pour le chapo.
 *
 * L'eyebrow et le bouton fantome passent au terracotta fonce du token callout.
 * Le terracotta primaire (#B04E22) tient 4,66:1 sur le fond normal mais tombe a
 * 3,7-4,2:1 sur le voile, sous le seuil AA de 4,5:1 pour du petit texte. Le
 * callout (#6E3212) donne 6,94:1 dans les memes conditions, dans la meme famille
 * de teinte.
 *
 * Aucune modification de index.php : le markup existant suffit.
 */
.hero{position:relative;isolation:isolate;grid-template-columns:1fr!important;align-items:center;gap:0!important;min-height:clamp(430px,40vw,600px);max-width:none!important;width:100%;margin-inline:0;padding-block:clamp(56px,6vw,92px);padding-inline:max(26px,calc((100% - var(--wrap))/2))}
.hero>div:first-child{position:relative;z-index:2;max-width:640px}
.hero-copy{max-width:600px!important}

/* La photo passe en fond de section. Retiree du flux de la grille, elle ne
   compte plus comme deuxieme colonne. */
.hero-photo{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;border-radius:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.hero-photo:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(243,240,233,.94) 0%,
    rgba(243,240,233,.92) 48%,
    rgba(243,240,233,.72) 74%,
    rgba(243,240,233,.45) 100%)}

/* Lisibilite mesuree sur le voile, pas supposee. */
.hero .eyebrow{color:var(--callout-text)}
.hero .btn:not(.primary){color:var(--callout-text);border-color:var(--callout-text)}

/* Le tampon se pose du cote le moins voile, ou il ne croise pas le texte. */
.data-stamp{left:auto;right:max(24px,calc((100% - var(--wrap))/2));bottom:24px;z-index:2}

@media(max-width:760px){
/* Le texte occupe toute la largeur : le voile devient uniforme, sinon le bas de
   la colonne passerait sur la partie claire du degrade. */
.hero{padding-block:44px 52px;padding-inline:20px;min-height:0;gap:0!important}
.hero-photo:after{background:rgba(243,240,233,.93)}
.hero>div:first-child{max-width:none}
.data-stamp{position:static;margin-top:26px;display:inline-block;padding:13px 15px;min-width:0}
.data-stamp b{font-size:21px}
}
/* --- Fiches du censimento : note datee, divergence, sources --------------- */
.scheda-nota{font-size:13px;line-height:1.5;color:var(--text-secondary,#3E514A);margin:12px 0 0}
.scheda-divergenza{font-size:13px;line-height:1.5;margin:12px 0 0;padding:11px 13px;background:var(--callout-bg,#F6E7D6);color:var(--callout-text,#6E3212);border-left:3px solid var(--callout-border,#B04E22)}
.wide-card details{margin-top:13px;border-top:1px solid var(--border,#D5CFC1)}
.wide-card summary{cursor:pointer;padding:11px 0 0;font:500 11px var(--mono,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--primary,#B04E22)}
.wide-card details ul{margin:9px 0 11px;padding-left:18px}
.wide-card details li{font-size:12px;line-height:1.5;color:var(--text-muted,#566761);margin:6px 0}
.prose blockquote{margin:18px 0;padding:16px 18px;background:var(--fill,#E8E3D7);border-left:3px solid var(--primary,#B04E22)}
.prose blockquote p{margin:0}

/* --- Titre de section : plus de comportement collant ------------------- */
/*
 * `.sticky-title` supposait une grille a deux colonnes, ou l'intitule restait
 * en vis-a-vis de la liste qui defilait. 06a2 a collapse `.split-inner` en une
 * seule colonne : l'intitule n'a plus de vis-a-vis, il reste epingle pendant
 * que le contenu passe dessous. Le collant est retire, pas neutralise a moitie.
 */
.sticky-title{position:static;top:auto;margin-bottom:6px}

/* --- Couleur des liens du site ----------------------------------------- */
/*
 * Le front n'avait AUCUNE regle globale sur `a` : chaque composant posait la
 * sienne (nav, footer, boutons, fil d'ariane) et tout le reste — les liens du
 * corps de texte, ceux des fiches, ceux des listes — sortait en bleu navigateur.
 *
 * La regle globale est volontairement de faible specificite (0-0-1) : les
 * composants qui posent deja leur couleur continuent de gagner, elle ne
 * rattrape que ce qui n'etait style nulle part.
 *
 * Contrastes mesures sur le terracotta primaire #B04E22 :
 *   fond de page #F3F0E9  4,66:1   carte blanche  5,30:1   → AA tenu
 *   fond .split #E8E3D7   4,14:1   callout #F6E7D6 4,37:1  → SOUS le seuil
 * Sur ces deux fonds les liens passent au cran fonce du meme terracotta
 * (#6E3212, le token callout), qui tient 7,71:1 et 8,14:1.
 */
a{color:var(--primary,#B04E22)}
a:hover,a:focus-visible{color:var(--primary-hover,#8F3D19)}
a:focus-visible{outline:2px solid var(--primary,#B04E22);outline-offset:2px}
/* Dans le corps de texte la couleur seule ne suffit pas a distinguer un lien. */
.prose a,.opening a,.scope a,.method-note a,.faq-body a,.author-card a,.update-log a,.scheda-nota a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:from-font}
.prose a:hover,.opening a:hover,.scope a:hover,.faq-body a:hover{text-decoration-thickness:2px}
/* Un bouton reste un bouton, meme dans un bloc de prose. */
.prose a.btn,.opening a.btn,.faq-body a.btn{text-decoration:none}
/* Les deux fonds ou le terracotta primaire tombe sous 4,5:1. */
.split a,.notice-inner a,.scheda-divergenza a{color:var(--callout-text,#6E3212)}
.split .btn{color:var(--callout-text,#6E3212);border-color:var(--callout-text,#6E3212)}
/* Surfaces sombres : le terracotta n'y est pas lisible. */
.site-footer a{color:var(--bg,#F3F0E9)}
.footer-links a{color:#fff}
.feature-copy a:not(.btn){color:var(--callout-bg,#F6E7D6)}
/* Les liens que la home pose dans une rangee de pastilles en reprennent la forme. */
.facts a{font:500 10px var(--mono,monospace);text-transform:uppercase;letter-spacing:.06em;background:var(--fill,#E8E3D7);color:var(--callout-text,#6E3212);padding:6px 8px;text-decoration:none}
.facts a:hover{background:var(--callout-bg,#F6E7D6)}

/* Le bloc perimetre de l enveloppe (pose par 06a) colorait ses liens en vert
   fonce : sur la meme page, un lien de prose etait terracotta et un lien de
   perimetre vert. Aligne sur la couleur du site, 4,66:1 sur le fond de page. */
.scope a{color:var(--primary,#B04E22)}
.scope a:hover{color:var(--primary-hover,#8F3D19)}

/* ==========================================================================
   [07c] Images du site — posées le 15/09/2026.
   Le parti pris de la charte est l'illustration à plat et le schéma : les
   conteneurs livrés étaient dimensionnés pour des PHOTOGRAPHIES (hauteur fixe
   + object-fit:cover), ce qui rognait un tracé et lui faisait perdre son sens.
   Ces règles sont en fin de feuille : à spécificité égale, elles gagnent.
   ========================================================================== */

/* Lockup de marque — le wordmark remplace la pastille + le texte. */
.brand-logo{display:block;height:34px;width:auto}
.site-footer .brand-logo{height:34px}
@media(max-width:760px){.brand-logo{height:28px}}

/* Hero d'accueil : le gabarit en a fait une banniere pleine largeur
   (.hero-photo en absolute/inset:0 + voile). L'illustration y est un fond
   d'ambiance sans annotation : le cover du gabarit est le bon choix, on ne
   touche qu'a la desaturation, qui eteignait la palette de la charte. */
.hero-photo img{filter:none}

/* Panneau « Rimessaggio » : le fond sabbia du dessin prolonge la lettre-boîte. */
.feature-img{height:auto;align-self:center;object-fit:contain;filter:none;background:var(--bg)}

/* Figures éditoriales des pages dossier. */
.page-figure,.pilier-figure{margin:0 0 30px;padding:0}
.pilier-figure{margin:22px 0 26px}
.page-figure img,.pilier-figure img{display:block;width:100%;height:auto;background:var(--bg)}
.page-figure{max-width:var(--wrap);margin-inline:auto;padding:0 26px}
@media(max-width:760px){.page-figure{padding:0 20px}}

/* Portrait de l'auteur — illustration assumée, jamais une photographie. */
.author-portrait{float:right;margin:4px 0 14px 24px;width:150px}
.author-portrait img{display:block;width:150px;height:150px;border-radius:50%;object-fit:cover;background:var(--fill)}
@media(max-width:640px){.author-portrait{float:none;margin:0 0 18px}}