.content-split{max-width:1250px;margin:0 auto;padding:88px 5vw;display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;border-top:1px solid var(--line)}.content-split h2{margin:0}.content-split>div:last-child{font-size:1.05rem;line-height:1.7;max-width:660px}.inline-link{color:var(--green);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.home-content{padding-top:0}.budget-steps{padding:90px 0;border-top:1px solid var(--line)}.budget-steps h2{max-width:650px;margin-bottom:38px}.steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.steps-grid article{background:#fff;padding:24px 20px;min-height:245px}.steps-grid span{color:var(--orange);font-size:.75rem;font-weight:700;letter-spacing:.1em}.steps-grid h3{font-size:1.65rem;margin:34px 0 12px}.steps-grid p{font-size:.88rem;color:var(--muted)}.comparison-table{padding:85px 0;border-top:1px solid var(--line)}.comparison-table h2{margin-bottom:35px}.table-wrap{overflow-x:auto;background:#fff}.comparison-table table{border-collapse:collapse;width:100%;min-width:680px;text-align:left}.comparison-table th,.comparison-table td{padding:19px 22px;border-bottom:1px solid var(--line);vertical-align:top}.comparison-table th{background:var(--mint);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.comparison-table td:first-child{font:600 1.22rem var(--serif)}.destination-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:85px 0;border-top:1px solid var(--line)}.destination-grid article{padding:28px;background:#fff}.destination-grid h2{font-size:2.35rem;margin-bottom:18px}.destination-grid p:not(.tag){color:var(--muted)}.section-intro{max-width:650px;font-size:1.05rem}.faq-section{padding:85px 0;border-top:1px solid var(--line)}.faq-section h2{margin-bottom:35px}.faq-section details{border-top:1px solid var(--line);padding:20px 0}.faq-section details:last-child{border-bottom:1px solid var(--line)}.faq-section summary{cursor:pointer;font:600 1.35rem/1.2 var(--serif);list-style:none;padding-right:35px;position:relative}.faq-section summary::-webkit-details-marker{display:none}.faq-section summary:after{content:'+';position:absolute;right:4px;top:-4px;color:var(--green);font:400 1.7rem var(--sans)}.faq-section details[open] summary:after{content:'–'}.faq-section details p{max-width:750px;color:var(--muted);margin:17px 0 0}@media(max-width:800px){.content-split{grid-template-columns:1fr;gap:25px;padding:65px 5vw}.steps-grid,.destination-grid{grid-template-columns:1fr}.budget-steps,.comparison-table,.faq-section{padding:65px 0}.steps-grid article{min-height:0}.destination-grid{padding:65px 0}.comparison-table th,.comparison-table td{padding:15px}.faq-section summary{font-size:1.2rem}}
/* outils-05 */
.breadcrumb{font-size:.78rem;color:var(--muted);padding:18px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--green);font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.calc-form label{display:block;margin:0 0 14px;font-size:.85rem;font-weight:600}
.calc-form input,.calc-form select{display:block;width:100%;max-width:340px;margin-top:6px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font:inherit;font-weight:400;color:var(--ink)}
.calc-form button{margin-top:8px}

html:has(#resultat[autofocus]){scroll-behavior:auto}

/* ===== CORRECTIFS PAGES OUTILS ===== */
/*
 * Le panneau de résultat est un aplat vert (--green) : tout ce qui s'y affiche doit
 * être calibré sur CE fond, pas sur le fond papier du reste de la page. Trois règles
 * du front supposaient l'inverse.
 */

/* 1. L'ancre de résultat était un TROISIÈME enfant de .calculator, qui est une grille
 *    à deux colonnes : le panneau de résultat basculait sur une seconde ligne, en
 *    demi-largeur. Elle vit désormais dans .calc-result, sans hauteur ni marge, donc
 *    hors de la grille. Cette règle la neutralise visuellement où qu'elle soit. */
#resultat{display:block;height:0;margin:0;padding:0;scroll-margin-top:110px;outline:none}

/* 2. Le chiffre de résultat est dimensionné pour une valeur courte (« 1 565 € ») :
 *    jusqu'à 7rem. Cinq des six outils rendent une PHRASE à cet emplacement, qui
 *    débordait. Le modificateur .result-lede leur donne une échelle de titre. */
.calc-result.result-lede strong{font:600 clamp(1.7rem,3vw,2.7rem)/1.15 var(--serif);display:block}

/* 3. Légende de tableau : var(--muted) donnait 2,17:1 sur l'aplat vert. --fill : 7,95:1. */
.calc-result caption{color:var(--fill)}

/* 4. .inline-link est coloré en var(--green) — sur l'aplat vert, 1:1, strictement
 *    invisible. Sur ce fond, le lien passe en blanc. */
.calc-result .inline-link{color:#FFFFFF;text-decoration-color:rgba(255,255,255,.6)}
.calc-result .inline-link:hover{text-decoration-color:#FFFFFF}

/* 5. Les tableaux de résultat peuvent dépasser la colonne sur petit écran : ils
 *    défilent dans leur propre conteneur plutôt que d'élargir la page. */
.calc-result .table-wrap{overflow-x:auto}

/* ===== TABLEAUX — fond du panneau de résultat + structure hors comparatif ===== */
/*
 * Deux défauts distincts, qui se ressemblaient à l'écran.
 */

/* 1. TEXTE BLANC SUR FOND BLANC.
 *    .table-wrap du builder porte `background:#fff`. Placé dans .calc-result, qui
 *    est un aplat vert avec `color:#fff`, le tableau devenait strictement illisible.
 *    Sur ce panneau le conteneur n'a pas à peindre quoi que ce soit. */
.calc-result .table-wrap{background:transparent}

/* 2. TABLEAUX SANS STRUCTURE.
 *    Le front ne style les tableaux que sous .comparison-table. Tout tableau posé
 *    ailleurs — le calendrier, les tableaux des pages pilier — sortait en HTML nu :
 *    pas de bordures, pas d'en-tête, pas d'alignement. On donne à .table-wrap le
 *    même traitement, à une échelle adaptée à des tableaux de données. */
.table-wrap table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}
.table-wrap caption{caption-side:bottom;padding-top:14px;font-size:.78rem;line-height:1.5;color:var(--muted);text-align:left}
.table-wrap th,
.table-wrap td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap thead th{background:var(--mint);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--line)}
.table-wrap tbody th{font-weight:700;white-space:nowrap}
.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td{border-bottom:0}

/* Le panneau de résultat garde sa propre échelle : dense, et sur fond sombre. */
.calc-result .table-wrap th,
.calc-result .table-wrap td{padding:8px 10px;font-size:.85rem;border-bottom-color:rgba(255,255,255,.25)}
.calc-result .table-wrap thead th{background:rgba(255,255,255,.10);color:#FFFFFF}
.calc-result .table-wrap caption{color:var(--fill)}

/* 3. CALENDRIER — un mois fait 28 à 31 lignes. À l'échelle par défaut le tableau
 *    devient une page entière et cesse d'être lisible d'un coup d'œil. Variante
 *    dense, et le niveau d'affluence porte une couleur : c'est ce qu'on vient
 *    chercher, il doit se repérer sans lire. */
.table-dense th,
.table-dense td{padding:6px 12px;font-size:.85rem}
.table-dense tbody th{width:5.5rem;font-variant-numeric:tabular-nums;text-transform:capitalize}
.table-dense .niveau{font-weight:700;white-space:nowrap}
.table-dense .niveau::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle;background:currentColor}
.table-dense .niveau-forte{color:#9C4520}
.table-dense .niveau-soutenue{color:#8C5A1E}
.table-dense .niveau-moderee{color:#4A5751}
.table-dense .niveau-creuse{color:#2E4A3D}
.table-dense .motifs{color:var(--muted);font-size:.8rem}
.table-dense tbody tr:nth-child(even){background:rgba(46,74,61,.035)}

/* ===== LARGEUR — fin du double padding de .content-split ===== */
/*
 * Le vrai écart avec la home était là, et il est antérieur à ce déploiement : il
 * touche aussi sejours.php, methode.php et occitanie.php, livrés par le builder.
 *
 * .simple-page pose déjà `padding:0 5vw`. .content-split repose `padding:… 5vw`
 * par-dessus, alors qu'il est imbriqué dedans. Le contenu est donc padé DEUX FOIS :
 * sur un viewport de 1600px, 930px de contenu au lieu des 1090px des sections de la
 * home — 160px de moins, soit exactement deux fois 5vw.
 *
 * La section a été dessinée pour vivre directement dans <main>, comme .intro ou
 * .editorial-section sur la home. Nestée, son padding fait doublon : on le retire,
 * le parent le fournit déjà. Le padding vertical, lui, reste.
 *
 * Cette règle vit dans content.min.css et non dans styles.min.css : c'est ici que
 * .content-split est déclaré, et cette feuille est chargée APRÈS l'autre. Écrite
 * ailleurs, elle aurait perdu la cascade — posée, vérifiable, et sans effet.
 */
.simple-page .content-split{padding-left:0;padding-right:0}

/* La home ne borne pas ses titres de section (.section-head h2 n'a pas de max-width).
 * Les pages internes le faisaient : même traitement, pour la même raison. */
.budget-steps h2{max-width:none}

/* ===== IMAGES DE PAGE ===== */
/* Le logo remplace le glyphe du builder dans .brand et .footer-brand : la hauteur
   est pilotée par le chrome, la largeur suit le ratio du wordmark. */
/* Hero de pilier : pleine largeur du conteneur, cadrage 16/9 stable pour
   éviter le décalage de mise en page au chargement. */
.pillar-hero{margin:0;overflow:hidden}
.pillar-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.page-figure{margin:0 0 8px}
.page-figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}