:root{--primary: #5F6E49;--primary-hover: #4E5A3B;--on-primary: #FFFFFF;--secondary: #2B3126;--secondary-hover: #3A4234;--bg: #F6F3EA;--surface: #FFFDF7;--text: #2B3126;--text-secondary: #4E5546;--text-strong: #1A1F16;--text-muted: #666E5E;--text-faint: #A8AE9E;--fill: #EDE8DA;--border: #D9D2BE;--white-pure: #FFFFFF;--callout-bg: #F0E7D2;--callout-text: #5B4A22;--callout-border: #D8C79C;--ink:var(--text);--green:var(--primary);--green-dark:var(--primary-hover);--lime:#CBD3B8;--paper:var(--bg);--white:var(--surface);--line:var(--border);--muted:var(--text-muted);--font-heading:'Lora',Georgia,serif;--font-body:'Source Sans 3',system-ui,sans-serif;--serif:var(--font-body);--mono:var(--font-body);--shadow:0 16px 35px rgba(43,49,38,.08)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--serif)}a{color:inherit}.shell{width:min(1160px,calc(100% - 40px));margin:auto}.site-header{background:rgba(255,253,247,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}.nav-wrap{display:flex;align-items:center;min-height:78px;gap:28px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:12px/1.02 var(--mono);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}.brand strong{font-size:17px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50% 50% 50% 4px;background:var(--green);color:#fff;font:700 21px var(--serif);transform:rotate(-18deg)}.main-nav{display:flex;gap:21px;margin-left:auto}.main-nav a{font-size:15px;text-decoration:none;border-bottom:2px solid transparent;padding:26px 0 23px}.main-nav a:hover,.main-nav .active{border-color:var(--green);color:var(--green)}.nav-cta,.button{display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff;text-decoration:none;padding:11px 14px;font:13px var(--mono);border:0;cursor:pointer;transition:.2s}.nav-cta:hover,.button:hover{background:var(--green-dark);transform:translateY(-2px)}svg{width:15px;height:15px}.hero{padding:76px 0 48px;overflow:hidden}.eyebrow,.kicker,.footer-label{font:12px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--green)}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end}.hero h1{font-size:clamp(46px,6vw,78px);line-height:.95;margin:16px 0 22px;letter-spacing:-.045em;max-width:800px}.hero h1 em{font-style:normal;color:var(--green)}.lede{font-size:21px;line-height:1.45;max-width:690px;color:#4E5546}.hero-action{display:flex;gap:14px;align-items:center;margin-top:30px}.text-link{font:14px var(--mono);color:var(--green);text-underline-offset:5px}.botanical-card{position:relative;min-height:340px;background:var(--lime);border-radius:54% 46% 42% 58%/52% 37% 63% 48%;overflow:hidden}.botanical-card:before{content:'✾';position:absolute;inset:12px auto auto 23px;color:var(--green);font-size:260px;line-height:1;opacity:.85}.botanical-card:after{content:'Preparare, leggere, verificare.';position:absolute;bottom:27px;right:30px;max-width:125px;font:13px/1.4 var(--mono);color:var(--green)}.trust-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0}.trust-bar .shell{display:flex;gap:22px;align-items:center;justify-content:space-between;font:12px var(--mono);color:var(--muted)}.dot{width:7px;height:7px;background:var(--green);border-radius:50%;display:inline-block;margin-right:6px}.section{padding:88px 0}.section-tint{background:#EDE8DA}.section-head{max-width:710px;margin-bottom:38px}.section h2{font-size:clamp(33px,4vw,52px);line-height:1.05;letter-spacing:-.035em;margin:10px 0}.section-head p{font-size:19px;color:var(--muted);margin:0}.registry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.registry{background:var(--white);padding:28px;border:1px solid var(--line);min-height:340px;display:flex;flex-direction:column;transition:.25s}.registry:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.registry-num{font:13px var(--mono);color:var(--green)}.registry h3{font-size:29px;line-height:1.1;margin:48px 0 15px}.registry p{color:var(--muted);margin:0 0 20px}.registry a{color:var(--green);font:13px var(--mono);margin-top:auto}.counter{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);background:var(--white)}.counter-copy{padding:43px}.counter h2{font-size:41px;line-height:1.05;margin:10px 0 18px}.counter-panel{background:var(--green);color:white;padding:35px}.counter-panel label{display:block;font:12px var(--mono);letter-spacing:.07em;text-transform:uppercase;margin:10px 0 7px}.counter-panel select,.counter-panel input{width:100%;padding:12px;border:1px solid #9BA986;background:#FFFDF7;color:var(--ink);font:16px var(--serif)}.result{border-top:1px solid rgba(255,255,255,.35);margin-top:25px;padding-top:16px;font-size:18px}.result strong{display:block;font-size:28px}.note{font-size:13px;line-height:1.4;color:#E7EBDD}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:steps}.step{border-top:2px solid var(--green);padding-top:17px}.step:before{counter-increment:steps;content:'0' counter(steps);font:13px var(--mono);color:var(--green)}.step h3{font-size:24px;margin:8px 0}.step p{color:var(--muted);margin:0}.info-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-item{padding:22px 0;border-top:1px solid var(--line)}.info-item h3{font-size:21px;margin:10px 0}.info-item p{margin:0;color:var(--muted)}.page-hero{padding:70px 0 42px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(45px,6vw,68px);line-height:1;margin:13px 0;letter-spacing:-.045em}.page-hero p{font-size:20px;max-width:750px;color:var(--muted)}.table-wrap{overflow:auto;background:var(--white);border:1px solid var(--line)}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:15px;border-bottom:1px solid var(--line)}th{font:12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--green);background:#EDE8DA}td{vertical-align:top}.latin{font-style:italic}.badge{font:11px var(--mono);color:var(--green);border:1px solid var(--lime);padding:4px 7px;white-space:nowrap}.callout{border-left:4px solid var(--callout-border);background:var(--callout-bg);color:var(--callout-text);padding:23px 25px;margin:26px 0}.faq details{padding:18px 0;border-top:1px solid var(--line)}.faq summary{cursor:pointer;font-size:20px;font-weight:600}.faq p{color:var(--muted);max-width:800px}.source-list{padding-left:20px}.source-list li{margin:11px 0}.source-list a{color:var(--green)}.site-footer{background:var(--ink);color:#EDEAE0;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:45px}.brand-footer{color:#fff}.site-footer p{color:#B9BEAE;max-width:360px}.site-footer a:not(.brand){display:block;color:#DBDCD0;margin:8px 0;text-decoration:none;font-size:15px}.site-footer a:hover{text-decoration:underline}.footer-label{color:var(--lime);margin-top:0}.footer-bottom{border-top:1px solid #4A5243;margin-top:35px;padding-top:18px;display:flex;justify-content:space-between;color:#B9BEAE;font:11px var(--mono)}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;z-index:20;background:white;padding:10px}.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:850px){.nav-cta{display:none}.hero-grid{grid-template-columns:1fr;gap:28px}.botanical-card{min-height:220px;max-width:480px}.registry-grid,.info-list{grid-template-columns:1fr}.counter{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.main-nav{gap:13px}.main-nav a{font-size:13px}}@media(max-width:580px){.shell{width:min(100% - 28px,1160px)}.nav-wrap{min-height:65px}.main-nav{overflow:auto;margin-left:auto}.main-nav a{white-space:nowrap;padding:20px 0 17px}.main-nav a:last-child{display:none}.hero,.section{padding:56px 0}.hero h1{font-size:47px}.hero-action{align-items:flex-start;flex-direction:column}.trust-bar .shell{display:block;line-height:2}.steps,.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:7px 0}.page-hero{padding:52px 0 32px}}
/* [05-tools] strumenti : fil d'ariane, filtres de tableau, note d'etat. Bloc ajoute en fin de feuille, tokens de la DA uniquement. */
.breadcrumb{margin:0 0 14px}.breadcrumb p{margin:0;font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.breadcrumb a{color:var(--green);text-decoration:none;text-underline-offset:4px}.breadcrumb a:hover{text-decoration:underline}.breadcrumb [aria-current]{color:var(--ink)}.table-filtri{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;background:var(--white);border:1px solid var(--line);padding:20px;margin-bottom:22px}.table-filtri label{display:block;font:12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--green);margin-bottom:6px}.table-filtri input,.table-filtri select{padding:11px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:16px var(--serif);min-width:180px}.table-filtri input:disabled,.table-filtri select:disabled,.counter-panel input:disabled,.counter-panel select:disabled,.button:disabled{opacity:.55;cursor:not-allowed}.note-motivo{font-size:13px;color:var(--muted);margin-bottom:0}.counter-panel .result+.result{margin-top:14px}@media(max-width:580px){.table-filtri input,.table-filtri select{min-width:100%}}

/* ===== 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 5 colonnes (Marque + Naviga + Dossier + Strumenti + Informazioni) : la marque prend la ligne entiere des le repli, les 4 autres tombent en 2+2 sans orpheline. Le sous-menu de nav ne se deplie pas sous 850px : la .main-nav du front est une barre horizontale scrollable, pas un drawer — le lien Strumenti mene a l'index complet. */
@media(max-width:850px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.main-nav .sub-nav{display:none}.main-nav .has-sub>a::after{display:none}}
@media(max-width:580px){.footer-grid{grid-template-columns:1fr}}

/* ===== 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 --- */
.hero h1{max-width:none!important}   /* styles.css : 800px */
.lede{max-width:none!important}   /* styles.css : 690px */
.section-head{max-width:none!important}   /* styles.css : 710px */
.page-hero p{max-width:none!important}   /* styles.css : 750px */
.faq p{max-width:none!important}   /* styles.css : 800px */
.site-footer p{max-width:none!important}   /* styles.css : 360px */
.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. */
/*   .hero-grid { grid-template-columns: 1.2fr .8fr }  (styles.css) */
/*   .counter { grid-template-columns: .9fr 1.1fr }  (styles.css) */
/*   .footer-grid { grid-template-columns: 1fr 1fr }  (styles.css) */
/* --- relevé automatique : fin --- */

/* Règles tranchées à la main, conservées au rejeu de 06a2. */
/* --- [06a2] grilles tranchees a la main ---
 *
 * Les trois grilles a deux colonnes relevees ont ete examinees une par une.
 * AUCUNE n'est une grille de texte « intitule a gauche, corps a droite » :
 * aucune n'est donc collapsee, et c'est un resultat, pas un oubli.
 *
 *   .hero-grid (1.2fr .8fr) — COLLAPSEE depuis le passage de l'image du hero en
 *     banniere de section : la grille n'a plus qu'un enfant, la colonne de droite
 *     n'existe plus. Une seule colonne, sans toucher au gap, pour ne pas
 *     neutraliser la media query <=850px qui le ramene a 28px.
 *
 *   .counter (.9fr 1.1fr) — bloc des strumenti : explication a gauche, panneau
 *     de formulaire a droite. Grille de CONTROLES : la collapser etirerait les
 *     champs de saisie sur toute la largeur, ce que le garde-fou du brief
 *     interdit explicitement. Passe deja en une colonne sous 850px.
 *
 *   .footer-grid (1fr 1fr) — declaration issue de la media query <=850px du
 *     pied de page, pas du contenu. Un pied de page n'est pas un corps de
 *     texte, et surcharger ce selecteur sans condition NEUTRALISERAIT la
 *     media query : le pied repasserait a cinq colonnes sur telephone.
 *
 * La largeur du corps est deja uniforme par construction : toutes les pages du
 * front, home comprise, posent leur contenu dans .shell (width min(1160px,
 * 100% - 40px)). Les max-width internes neutralises au-dessus etaient les
 * seules contraintes qui differenciaient une page de contenu de la home.
 */

/* 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)}
#resultat{scroll-margin-top:96px;outline:none}

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

/* ===== [hero] banniere pleine section =====
 *
 * L'image du hero occupait une colonne de 0.8fr dans une carte a bord organique.
 * Elle couvre desormais toute la section, le texte passant par-dessus.
 *
 * Le voile est un degrade HORIZONTAL, pas un aplat : le texte repose sur du
 * papier opaque jusqu'a 55 % de la largeur — donc au meme contraste que sur le
 * fond du site, 12,06:1, mesure et non suppose — et l'image reste lisible a
 * droite. Un voile uniforme assez opaque pour tenir le contraste effacerait
 * l'image, ce qui reviendrait a ne pas la poser.
 *
 * Sous 850 px le texte prend toute la largeur : la banniere repasse alors en
 * bande sous le hero, sans voile. Aucun texte ne se retrouve sur l'image, donc
 * aucun contraste a arbitrer sur un fond qu'on ne maitrise pas.
 */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(380px,46vh,520px)}
.hero-banner{position:absolute;inset:0;margin:0;z-index:0}
.hero-banner picture{display:block;width:100%;height:100%}
.hero-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(97deg,#F6F3EA 0%,#F6F3EA 55%,rgba(246,243,234,.72) 78%,rgba(246,243,234,.34) 100%)}
.hero-banner::after{background:linear-gradient(97deg,var(--bg) 0%,var(--bg) 55%,color-mix(in srgb,var(--bg) 72%,transparent) 78%,color-mix(in srgb,var(--bg) 34%,transparent) 100%)}
.hero-banner figcaption{position:absolute;right:20px;bottom:16px;z-index:2;max-width:264px;padding:7px 11px;background:var(--surface);border:1px solid var(--line);font:12px/1.4 var(--mono);color:var(--text)}
.hero .shell{position:relative;z-index:1;width:min(1160px,calc(100% - 40px))}
.hero-grid{grid-template-columns:1fr}
.hero-grid>div{max-width:640px}
@media(max-width:850px){
.hero{display:block;min-height:0}
.hero-banner{position:static;height:230px;margin-top:26px}
.hero-banner::after{display:none}
.hero-banner figcaption{position:static;max-width:none;margin-top:10px;border:0;padding:0;background:transparent}
.hero-grid>div{max-width:none}
}

/* ===== [07c-images] LOCKUP DE MARQUE — logo détouré à la place du monogramme ===== */
.brand img{height:34px;width:auto;display:block;flex:0 0 auto}
@media(max-width:580px){.brand img{height:29px}}

/* ===== [07c-images] BANNIÈRE DES PAGES PILIER + ILLUSTRATIONS DE SECTION ===== */
/* Même langage visuel que le hero de la home : image en fond, dégradé de lisibilité. */
.page-hero.has-banner{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(330px,38vh,440px)}
.page-hero.has-banner>.shell{position:relative;z-index:1}
.section-figure{margin:0 0 32px;border:1px solid var(--line);background:var(--white)}
.section-figure img{display:block;width:100%;height:auto}
@media(max-width:580px){.page-hero.has-banner{min-height:260px}.section-figure{margin-bottom:24px}}