@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spectral:wght@500;600;700&display=swap');
:root{
--primary: #8A6B3A;
--primary-hover: #6F552E;
--on-primary: #FFFFFF;
--secondary: #1F2328;
--secondary-hover: #2C3239;
--bg: #F4F1EA;
--surface: #FFFAF3;
--text: #1F2328;
--text-secondary: #4A5058;
--text-strong: #0E1114;
--text-muted: #6D6057;
--text-faint: #A79C92;
--fill: #EBE6DC;
--border: #D8D1C4;
--white: #FFFFFF;
--callout-bg: #F6EEDF;
--callout-text: #5A4520;
--callout-border: #DCC79B;
/* Alias historiques du builder, repointes sur la palette cible : le markup
   existant continue de les consommer sans etre reecrit. */
--paper:var(--bg);--ink:var(--text);--brass:var(--primary);--wash:var(--fill);
--line:var(--border);--muted:var(--text-muted);
--serif:Spectral,Georgia,serif;--sans:'IBM Plex Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans)}a{color:inherit;text-decoration-color:var(--brass);text-underline-offset:3px}a:hover{color:var(--primary-hover)}a:focus-visible{outline:3px solid var(--brass);outline-offset:3px}.skip{position:absolute;left:-999px;top:0}.skip:focus{left:1rem;z-index:10;background:var(--paper);padding:.6rem}.shell{max-width:1280px;margin:auto;padding:0 32px}.masthead{border-bottom:1px solid var(--ink);padding:19px 0 14px}.topline{display:flex;gap:18px;justify-content:space-between;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase}.brand-row{display:flex;align-items:end;justify-content:space-between;gap:30px}.brand{font:600 clamp(2.1rem,5vw,4.4rem)/.92 var(--serif);text-decoration:none;letter-spacing:-.045em}.brand em{color:var(--brass);font-style:normal}.nav{display:flex;gap:17px;flex-wrap:wrap;justify-content:flex-end;font-size:.86rem;font-weight:600}.nav a{text-decoration:none}.nav a[aria-current=page]{border-bottom:2px solid var(--brass)}.kicker,.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-hover)}.hero{padding:50px 0 32px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);gap:50px;border-bottom:1px solid var(--ink)}h1,h2,h3{font-family:var(--serif);line-height:1.05;letter-spacing:-.025em}h1{font-size:clamp(3.1rem,6.2vw,6.4rem);margin:.1em 0 .25em;max-width:850px}h2{font-size:clamp(2rem,3.5vw,3.3rem);margin:0 0 .5em}h3{font-size:1.55rem;margin:.1em 0 .3em}.lede{font-size:1.28rem;max-width:42rem;margin:0}.hero-aside{border-left:1px solid var(--ink);padding-left:25px;align-self:end}.hero-aside p{margin:.3rem 0 1.3rem}.issue{font-variant-numeric:tabular-nums;font-size:.85rem}.tech{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--ink);margin:32px 0 76px}.tech div{padding:14px;border-right:1px solid var(--line);min-height:76px}.tech div:last-child{border-right:0}.tech b{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.tech span{font-size:.88rem;font-variant-numeric:tabular-nums}.notice{border-left:5px solid var(--brass);padding:17px 20px;background:var(--fill);max-width:900px;margin:0 0 80px}.home-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:45px;margin-bottom:90px}.feature{border-top:4px solid var(--ink);padding-top:18px}.diagram{display:block;width:100%;height:auto;background:var(--wash);border:1px solid var(--line)}.caption{font-size:.78rem;color:var(--muted);margin:.5rem 0 1.2rem}.story-list{border-top:1px solid var(--ink)}.story-list article{border-bottom:1px solid var(--line);padding:20px 0}.story-list h3{font-size:1.6rem}.story-list p{margin:.3rem 0}.section{padding:0 0 80px}.reading{max-width:740px}.reading p,.reading li{max-width:72ch}.reading h2{margin-top:1.5em}.reading h3{margin-top:1.5em}.reading ul,.reading ol{padding-left:1.3rem}.page-head{padding:52px 0 18px;border-bottom:1px solid var(--ink);margin-bottom:28px}.page-head h1{font-size:clamp(3rem,5.5vw,5.5rem);max-width:950px}.breadcrumbs,.breadcrumb{font-size:.84rem;margin:18px 0;color:var(--muted)}.content-layout{display:grid;grid-template-columns:minmax(0,740px) 220px;gap:60px}.rail{border-left:1px solid var(--line);padding-left:20px;font-size:.9rem}.rail h2{font-size:1.25rem}.rail a{display:block;margin:0 0 1em}.table-wrap{overflow:auto;margin:28px 0}.data-table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}.data-table th{text-align:left;border-bottom:2px solid var(--ink);padding:10px 8px}.data-table td{vertical-align:top;border-bottom:1px solid var(--line);padding:11px 8px}.callout{margin:31px 0;padding:19px 22px;border:1px solid var(--callout-border);background:var(--callout-bg);color:var(--callout-text)}.faq details{border-top:1px solid var(--line);padding:15px 0}.faq summary{font-weight:700;cursor:pointer}.contact-box{background:var(--ink);color:var(--paper);padding:30px;margin:30px 0}.contact-box a{color:var(--white)}.footer{border-top:3px solid var(--ink);padding:26px 0 40px;margin-top:60px;font-size:.86rem}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:24px}.footer h2{font-size:1rem;font-family:var(--sans);letter-spacing:.08em;text-transform:uppercase}.footer a{display:block;margin:.35rem 0}.fine{color:var(--muted);font-size:.78rem}.label{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700}@media(max-width:760px){.shell{padding:0 18px}.topline{display:none}.masthead{padding-top:16px}.brand-row{align-items:start;flex-direction:column;gap:13px}.nav{justify-content:flex-start;gap:12px}.hero,.home-grid,.content-layout{grid-template-columns:1fr;gap:28px}.hero{padding-top:34px}.hero-aside{border-left:0;border-top:1px solid var(--ink);padding:18px 0 0}.tech{grid-template-columns:1fr 1fr;margin-bottom:42px}.tech div{border-bottom:1px solid var(--line)}.tech div:nth-child(2n){border-right:0}.tech div:last-child{grid-column:span 2}.notice{margin-bottom:50px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>:first-child{grid-column:span 2}.rail{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}}

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

/* ===== BLOC LARGEUR UNIFIÉE — toutes les pages à la largeur de la home ===== */
/*
 * Posé par 05c-outils-opti, une fois les pages d'outils en place.
 *
 * Le builder du front réserve `.container` (largeur de la home) aux pages
 * d'accueil et de service, et applique une colonne étroite aux pages de contenu
 * via `.guide-narrow` / `.article-narrow` / `.content-narrow` selon le builder.
 * Résultat : outils, piliers et pages éditoriales sont plus étroits que la home,
 * ce qui se voit immédiatement en passant de l'une à l'autre — et prive les
 * tableaux et les simulateurs de la largeur dont ils ont besoin.
 *
 * `!important` est ici délibéré, pas une facilité. Ce bloc est appendu à
 * `styles.css`, mais la contrainte de largeur est souvent déclarée dans une
 * feuille chargée APRÈS (`article.css` sur le builder Otomatic). À spécificité
 * égale, la dernière feuille gagne : sans `!important`, le bloc serait posé,
 * validé, et pourtant sans effet — un échec indiscernable d'un succès.
 *
 * Les CONTRÔLES de formulaire, eux, restent plafonnés : un `select` ou un
 * `input` étiré sur toute la largeur de la page n'est pas une préférence de
 * style, c'est une régression d'usage.
 */
.guide-narrow,
.article-narrow,
.content-narrow{max-width:none!important}

.guide-narrow select,.guide-narrow input[type=number],.guide-narrow input[type=text],
.article-narrow select,.article-narrow input[type=number],.article-narrow input[type=text],
.content-narrow select,.content-narrow input[type=number],.content-narrow input[type=text]{max-width:520px}

/*
 * Conteneurs posés par l'orchestrateur lui-même (pages légales, plan du site)
 * et par les blocs d'enrichissement des builders : `.wrap`, `.article-layout`,
 * `.narrow-content`. Sur les fronts qui ne les stylent pas — le cas de tout
 * builder non melodine — ces pages s'affichaient bord à bord, sans gouttière,
 * donc PLUS larges que la home : l'inverse exact du défaut corrigé au-dessus,
 * et invisible tant qu'on ne regarde que les pages d'outils.
 *
 * Les règles ci-dessous ne mordent que si la feuille du front ne définit pas
 * déjà ces classes, puisqu'elles sont posées en fin de feuille sans `!important`
 * et à spécificité minimale.
 */
.wrap,
.narrow-content,
.article-layout{width:min(1140px,calc(100% - 40px));margin-inline:auto}
.article-body{max-width:72ch}

@media(max-width:650px){
.wrap,
.narrow-content,
.article-layout{width:min(100% - 28px,1140px)}
}