/* ==========================================================================
   Pages d'information : aide, guides (néophytes, remblais), textes juridiques, pages d'erreur
   (+ formulaire de signalement, qui charge aussi cette feuille).
   Mise en page « Chantier » : bandeau de titre dans la zone .heros du thème, bord à motif, colonne de lecture
   (~65 caractères) et sommaire collant sur bureau. Uniquement des jetons (docs/DESIGN.md) : aucune couleur,
   aucune police en dur, aucun [data-theme].
   ========================================================================== */

/* ---------- Bandeau de titre ---------- */
.pg-tete { position: relative; isolation: isolate; overflow: hidden; }
.pg-tete-motif { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Le motif du thème (trame, courbes, coupe de sol) ne passe jamais derrière le texte : sans illustration, il n'occupe
   que la droite du bandeau sur grand écran (et disparaît en dessous de 1100 px) ; avec une illustration, il s'efface
   de son côté (pas deux coupes de terrain superposées). */
.pg-tete:not(.pg-tete-illustree) .pg-tete-motif {
    -webkit-mask-image: linear-gradient(90deg, transparent 60%, rgba(0, 0, 0, 1) 85%); mask-image: linear-gradient(90deg, transparent 60%, rgba(0, 0, 0, 1) 85%);
}
@media (max-width: 1099px) { .pg-tete:not(.pg-tete-illustree) .pg-tete-motif { display: none; } }
.pg-tete-illustree .pg-tete-motif, .erreur-motif {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 30%, transparent 58%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 30%, transparent 58%);
}
@media (max-width: 899px) {
    .erreur-motif {
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 25%, transparent 55%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 25%, transparent 55%);
    }
    /* Sur mobile, le motif passait derrière le surtitre et le titre (3:1 en strates) : l'illustration placée sous
       le texte suffit. */
    .pg-tete-illustree .pg-tete-motif { display: none; }
}
.pg-tete-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); align-items: end; padding-top: var(--e-8); padding-bottom: var(--e-8); }
.pg-tete-texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); min-width: 0; max-width: 42rem; }
.pg-titre { font-size: clamp(34px, 4.4vw, 58px); max-width: 22ch; color: var(--encre); }
.pg-chapeau { max-width: 36em; font-size: 19px; line-height: 1.5; color: var(--encre-2); }
.pg-chapeau strong { color: var(--encre); font-weight: var(--gras); }
.pg-tete .bandeau-projet { max-width: 40rem; }
.pg-tete-illu { align-self: end; min-width: 0; }
.pg-tete-illu .illu-terrain { margin-bottom: calc(-1 * var(--e-8)); -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, transparent); mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, transparent); }
@media (min-width: 900px) {
    .pg-tete-illustree .pg-tete-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--e-8); }
}
@media (max-width: 899px) {
    .pg-tete-illu { max-width: 460px; }
}
@media (max-width: 759px) {
    .pg-tete-in { padding-top: var(--e-7); padding-bottom: var(--e-7); gap: var(--e-5); }
    .pg-titre { font-size: clamp(30px, 8.6vw, 38px); }
    .pg-chapeau { font-size: 17px; }
    .pg-tete-illu .illu-terrain { margin-bottom: calc(-1 * var(--e-7)); }
}

/* Fil d'Ariane (guides) */
.pg-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--encre-2); }
.pg-fil li + li::before { content: "›"; margin-right: var(--e-2); color: var(--encre-2); }
.pg-fil a { display: inline-flex; align-items: center; min-height: var(--cible); font-weight: var(--gras); color: var(--encre); }
.pg-fil a:hover { color: var(--action-texte); }

/* ---------- Corps : colonne de lecture + sommaire ---------- */
.pg-corps { padding-top: var(--e-8); padding-bottom: var(--e-9); }
.page-texte { display: flex; flex-direction: column; gap: var(--e-8); min-width: 0; max-width: 760px; }
:where(.page-texte section) { display: flex; flex-direction: column; gap: var(--e-4); scroll-margin-top: calc(var(--h-entete) + var(--e-5)); }
.page-texte [id] { scroll-margin-top: calc(var(--h-entete) + var(--e-5)); }
.page-texte h2 { font-size: var(--t-h2); }
.page-texte h3 { font-size: 19px; }
.page-texte p, .page-texte li { max-width: 66ch; }
.page-texte ul, .page-texte ol { display: flex; flex-direction: column; gap: var(--e-2); padding-left: 1.3em; }
.page-texte li::marker { color: var(--encre-2); }
.page-texte ol > li::marker { font-family: var(--police-donnees); font-weight: var(--donnees-graisse); font-size: .92em; }
.page-texte a:not(.btn):not(.carte-lien):not(.lien-action) { font-weight: var(--gras); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.page-texte a:not(.btn):not(.carte-lien):not(.lien-action):hover { color: var(--action-texte); }
.page-texte .liste-aeree { gap: var(--e-3); }
.sans-coupure { white-space: nowrap; }
.avertissement { padding-top: var(--e-4); border-top: 1px solid var(--trait); }

@media (min-width: 1100px) {
    .pg-corps-avec-sommaire { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: var(--e-9); align-items: start; }
    .pg-sommaire-mobile { display: none; }
}
@media (max-width: 1099px) {
    .pg-sommaire-bureau { display: none; }
}
@media (max-width: 759px) {
    .pg-corps { padding-top: var(--e-6); padding-bottom: var(--e-8); }
    .page-texte { gap: var(--e-7); }
}

/* Sommaire (même liste, deux présentations) */
.pg-sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: sommaire; }
.pg-sommaire li { counter-increment: sommaire; }
.pg-sommaire a { display: flex; align-items: center; gap: var(--e-3); min-height: var(--cible); font-weight: var(--gras); font-size: 15px; line-height: 1.25; color: var(--encre-2); text-decoration: none; }
.pg-sommaire a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.pg-sommaire-numerote a::before { content: counter(sommaire, decimal-leading-zero); flex: none; min-width: 2ch; font: var(--donnees-graisse) 13px/1 var(--police-donnees); color: var(--encre-2); }

.pg-sommaire-bureau { position: sticky; top: calc(var(--h-entete) + var(--e-6)); max-height: calc(100vh - var(--h-entete) - var(--e-8)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pg-sommaire-titre { margin-bottom: var(--e-2); font: var(--donnees-graisse) 12.5px/1.2 var(--police-donnees); letter-spacing: .04em; text-transform: var(--libelle-casse); color: var(--encre-2); }
.pg-sommaire-bureau ol { border-left: 2px solid var(--trait); }
.pg-sommaire-bureau a { margin-left: -2px; padding: 6px 12px 6px 16px; border-left: 2px solid transparent; }
.pg-sommaire-bureau a[aria-current="true"] { border-left-color: var(--action); color: var(--encre); font-weight: var(--tres-gras); }

.pg-sommaire-mobile { margin-bottom: var(--e-6); border: 1px solid var(--trait); border-radius: var(--r-bloc); background: var(--surface); }
.pg-sommaire-mobile > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--cible-l); padding: 0 var(--e-4); list-style: none; cursor: pointer; font-weight: var(--tres-gras); }
.pg-sommaire-mobile > summary::-webkit-details-marker { display: none; }
.pg-sommaire-mobile > summary::after { content: ""; width: 9px; height: 9px; margin: 0 4px 4px 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.pg-sommaire-mobile[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.pg-sommaire-mobile > summary:focus-visible { outline-offset: -3px; border-radius: var(--r-bloc); }
.pg-sommaire-mobile nav { padding: 0 var(--e-4) var(--e-2); }
.pg-sommaire-mobile li { border-top: 1px solid var(--trait); }
.pg-sommaire-mobile a { color: var(--encre); }

/* ---------- Illustrations ---------- */
/* Coupe de terrain (pages/_illustration_terrain.html.twig) */
.illu-terrain { display: block; width: 100%; height: auto; overflow: visible; }
.it-herbe { fill: var(--sol-mousse); }
.it-sol-a { fill: var(--sol-a); }
.it-sol-b { fill: var(--sol-b); }
.it-sol-c { fill: var(--sol-c); }
.it-grain { fill: var(--sol-a); opacity: .35; }
.it-tas { fill: var(--offre); }
.it-fosse { fill: var(--fond); }
.it-fosse-bord { fill: none; stroke: var(--recherche-texte); stroke-width: 3; stroke-dasharray: 8 6; }
.it-fosse-texte { font: 800 34px/1 var(--police-donnees); fill: var(--recherche-texte); letter-spacing: -.02em; }
.it-cote path { fill: none; stroke: var(--encre-2); stroke-width: 2; }
.it-cote-texte { font: 700 15px/1 var(--police-donnees); fill: var(--action-texte); }
.it-poteau { fill: var(--encre); }
.it-balise-1 { fill: var(--action); }
.it-balise-2 { fill: var(--encre); }
.it-barriere-bord { fill: none; stroke: var(--encre); stroke-width: 2; }
.it-panneau { fill: var(--action); stroke: var(--encre); stroke-width: 3; stroke-linejoin: round; }
.it-panneau-signe { fill: var(--encre); }

/* Planches des néophytes (pages/_neophyte_*.html.twig) : trait d'encre, feuillage mousse, couleurs utiles à la reconnaissance */
.planche { display: block; width: 100%; height: auto; }
.planche * { stroke-linecap: round; stroke-linejoin: round; }
.pl-sol { fill: none; stroke: var(--sol-c); stroke-width: 3; }
.pl-tige { fill: none; stroke: var(--sol-mousse); }
.pl-tige-rouge { fill: none; stroke: var(--sol-b); }
.pl-feuille { fill: var(--sol-mousse); stroke: var(--encre); stroke-width: 1; }
.pl-nervure path, .pl-rameau, .pl-rameau path { fill: none; stroke: var(--encre); stroke-width: 1.2; opacity: .7; }
.pl-fleur-claire { fill: var(--surface); stroke: var(--encre); stroke-width: 1; }
.pl-fleur-jaune { fill: var(--attention); stroke: var(--encre); stroke-width: .8; }
.pl-fleur-rose { fill: var(--danger); stroke: var(--encre); stroke-width: 1; }
.pl-epi { fill: var(--surface); stroke: var(--sol-mousse); stroke-width: 1.5; }
.pl-fruit { fill: var(--sol-c); stroke: var(--encre); stroke-width: 1; }
.pl-tache { fill: var(--danger); }

/* ---------- Aide ---------- */
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--e-3); }
.guide { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4) var(--e-5); }
.guide-icone { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-moyen); background: var(--action-voile); color: var(--action-texte); }
.guide-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.guide-texte strong { font-family: var(--police-titre); font-weight: var(--titre-graisse); font-stretch: var(--bouton-largeur); font-variation-settings: var(--titre-variation); font-size: 17.5px; line-height: 1.2; }
.guide-texte .texte-doux { font-size: 15px; line-height: 1.4; }
.guide-fleche { flex: none; color: var(--encre); transition: transform .15s; }
.guide:hover .guide-fleche { transform: translateX(3px); }

/* FAQ (details/summary natifs) */
.faq { gap: var(--e-3); }
.faq > h2 { margin-bottom: var(--e-2); }
.faq-item { border: 1px solid var(--trait); border-radius: var(--r-bloc); background: var(--surface); }
.faq-item[open] { border-color: var(--trait-fort); }
.faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 60px; padding: var(--e-3) var(--e-4) var(--e-3) var(--e-5);
    list-style: none; cursor: pointer; border-radius: var(--r-bloc);
    font-family: var(--police-titre); font-weight: var(--titre-graisse); font-stretch: var(--bouton-largeur); font-variation-settings: var(--titre-variation);
    font-size: 18px; line-height: 1.25; letter-spacing: -.01em;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: ""; flex: none; width: 32px; height: 32px; border-radius: var(--r-petit); background-color: var(--fond-2);
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 14px 2px, 2px 14px; background-position: center; background-repeat: no-repeat; transition: background-size .15s;
}
.faq-item[open] > summary::after { background-size: 14px 2px, 2px 0; }
.faq-item > summary:hover::after { background-color: var(--trait); }
.faq-item > summary:focus-visible { outline-offset: -3px; }
.faq-reponse { display: flex; flex-direction: column; gap: var(--e-3); margin: 0 var(--e-5); padding: var(--e-4) 0 var(--e-5); border-top: 1px dashed var(--trait-fort); }
.installer { margin-top: var(--e-1); }
.installer .bloc { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); }
.installer h3 { font-size: 17px; }
@media (max-width: 759px) {
    .faq-item > summary { padding-left: var(--e-4); font-size: 17px; }
    .faq-reponse { margin: 0 var(--e-4); padding-bottom: var(--e-4); }
}

/* ---------- Guide néophytes ---------- */
.regle-ode { position: relative; gap: var(--e-4); padding: var(--e-7) var(--e-6) var(--e-6); border-radius: var(--r-bloc); overflow: hidden; }
.regle-ode-bord { position: absolute; left: 0; right: 0; top: 0; }
.regle-ode h2 { font-size: clamp(22px, 2.4vw, 28px); }
.regle-ode a { color: var(--encre); }
.regle-ode a:hover { color: var(--action-texte); }
.regle-ode blockquote { margin: 0; padding: var(--e-3) var(--e-4); border-left: 4px solid var(--action-texte); background: var(--fond-2); border-radius: 0 var(--r-moyen) var(--r-moyen) 0; }
.regle-ode blockquote p { font-size: 17px; line-height: 1.5; font-style: italic; }
.regle-ode blockquote footer { margin-top: var(--e-2); font: var(--donnees-graisse) 13px/1.5 var(--police-donnees); color: var(--encre-2); }
.regle-ode > p { color: var(--encre-2); }
.regle-ode > p strong { color: var(--encre); }

.especes { display: flex; flex-direction: column; gap: var(--e-4); }
.espece {
    display: grid; grid-template-columns: 148px minmax(0, 1fr); grid-template-areas: "illu tete" "illu texte";
    column-gap: var(--e-6); row-gap: var(--e-3); align-items: start; padding: var(--e-5);
}
.espece-illu { grid-area: illu; padding: var(--e-2); border-radius: var(--r-carte); background: var(--fond-2); border: 1px solid var(--trait); }
.espece-tete { grid-area: tete; display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.espece-texte { grid-area: texte; display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.espece-numero { font: var(--donnees-graisse) 13px/1.2 var(--police-donnees); color: var(--encre-2); }
.espece-numero span { color: var(--encre-2); }
.espece-tete h2 { font-size: 22px; }
.espece-latin { font-size: 15px; color: var(--encre-2); }
.espece-traits { font-size: 15.5px; }
.espece-risque { padding: var(--e-3) var(--e-4); border-radius: var(--r-moyen); border-left: 4px solid var(--danger); background: var(--danger-fond); color: var(--danger-texte); font-size: 15.5px; }
.espece-risque strong { color: var(--danger-texte); }
.espece .lien-action { align-self: flex-start; }
@media (max-width: 599px) {
    .espece { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "illu tete" "texte texte"; column-gap: var(--e-4); padding: var(--e-4); }
    .espece-illu { padding: var(--e-1); }
    .espece-tete h2 { font-size: 20px; }
    .espece-latin { font-size: 14px; }
}
.que-faire { gap: var(--e-3); border-left: 4px solid var(--encre); }
.que-faire h2 { display: flex; align-items: center; gap: var(--e-3); font-size: 22px; }
.que-faire h2 .ico { color: var(--action-texte); }
.sources ul { font-size: 15.5px; }

/* ---------- Guide remblais : tableaux ---------- */
.tableau-conteneur { width: 100%; overflow-x: auto; }
.tableau-cantons, .tableau-simple {
    width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface);
    border: 1px solid var(--trait); border-radius: var(--r-bloc); overflow: hidden; font-size: 15px; line-height: 1.45;
}
.tableau-cantons :is(th, td), .tableau-simple :is(th, td) { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
.tableau-cantons tbody tr:last-child > *, .tableau-simple tbody tr:last-child > * { border-bottom: 0; }
.tableau-cantons thead th, .tableau-simple thead th { font: var(--donnees-graisse) 12.5px/1.2 var(--police-donnees); letter-spacing: .02em; text-transform: var(--libelle-casse); color: var(--encre-2); border-bottom: 1.5px solid var(--encre); white-space: nowrap; }
.tableau-cantons tbody th, .tableau-simple tbody th { width: 28%; font-weight: var(--tres-gras); }
.tableau-cantons tbody tr:nth-child(even) > *, .tableau-simple tbody tr:nth-child(even) > * { background: var(--surface-2); }
/* Mobile : une fiche par ligne, les colonnes l'une sous l'autre avec leur libellé */
@media (max-width: 759px) {
    .tableau-cantons, .tableau-cantons :is(tbody, tr, th, td), .tableau-simple, .tableau-simple :is(tbody, tr, th, td) { display: block; width: 100%; }
    .tableau-cantons thead, .tableau-simple thead { display: none; }
    .tableau-cantons, .tableau-simple { border: 0; border-radius: 0; background: none; overflow: visible; }
    .tableau-cantons tr, .tableau-simple tr { margin-bottom: var(--e-3); overflow: hidden; border: 1px solid var(--trait); border-radius: var(--r-bloc); background: var(--surface); }
    .tableau-cantons tbody tr:nth-child(even) > *, .tableau-simple tbody tr:nth-child(even) > * { background: none; }
    .tableau-cantons tbody th, .tableau-simple tbody th { width: 100%; padding: 12px 14px 10px; border-bottom: 1.5px solid var(--encre); font-family: var(--police-titre); font-weight: var(--titre-graisse); font-stretch: var(--bouton-largeur); font-variation-settings: var(--titre-variation); font-size: 16.5px; }
    .tableau-cantons td { border-bottom: 1px solid var(--trait) !important; }
    .tableau-cantons tr > td:last-child, .tableau-simple tr > td:last-child { border-bottom: 0 !important; }
    .tableau-cantons td::before { content: attr(data-canton); display: block; margin-bottom: 4px; font: var(--donnees-graisse) 12.5px/1.2 var(--police-donnees); letter-spacing: .02em; text-transform: var(--libelle-casse); color: var(--encre-2); }
}
.liens-cantons .bloc { padding: var(--e-5); }
.liens-cantons h3 { font-size: 19px; }
.page-texte .liste-liens { padding-left: 1.1em; font-size: 15.5px; }

/* ---------- Textes juridiques ---------- */
.bandeau-projet { align-self: stretch; }
.page-juridique { gap: 0; }
.page-juridique > section { padding: var(--e-7) 0; border-top: 1px solid var(--trait); gap: var(--e-3); }
.page-juridique > section:first-child { padding-top: 0; border-top: 0; }
.page-juridique > section + p { padding-top: var(--e-6); border-top: 1px solid var(--trait); }
.page-juridique h2 { font-size: clamp(21px, 2.2vw, 26px); }
.page-juridique section p, .page-juridique section li { font-size: 16.5px; line-height: 1.62; }
.a-completer { padding: 0 4px; border-radius: var(--r-petit); background: var(--attention-fond); color: var(--attention-texte); font-weight: var(--gras); box-shadow: inset 0 -1px 0 var(--attention); }
.adresse { font-style: normal; line-height: 1.6; padding: var(--e-4) var(--e-5); }
@media (max-width: 759px) {
    .page-juridique > section { padding: var(--e-6) 0; }
    .page-juridique section p, .page-juridique section li { font-size: 16px; }
    .page-juridique .liste-definitions { grid-template-columns: 1fr; gap: 2px; }
    .page-juridique .liste-definitions dd { margin-bottom: var(--e-2); overflow-wrap: anywhere; }
}

/* ---------- Signalement (gabarits du module carte, qui chargent cette feuille) ---------- */
.sg-surtitre { display: inline-flex; align-items: center; gap: 6px; font: var(--donnees-graisse) 13px/1.2 var(--police-donnees); letter-spacing: .02em; color: var(--danger-texte); }
.sg-annonce { display: flex; gap: 14px; align-items: center; }
.sg-motifs { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .sg-motifs { grid-template-columns: 1fr 1fr; } }
.sg-motif { min-height: 76px; }
.sg-motif-titre { font-size: 16.5px; }
.sg-motif-aide { font-size: 14px; font-weight: var(--texte-graisse); color: var(--encre-2); line-height: 1.35; }
.sg-motif-sensible .sg-motif-titre::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--danger); margin-right: 8px; vertical-align: 1px; }
.sg-prudence { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.sg-prudence > svg { flex: 0 0 auto; margin-top: 2px; }
.sg-actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) {
    .sg-actions { flex-direction: row; align-items: center; }
    .sg-actions .btn-grand { width: auto; flex: 1; }
}
.sg-merci { align-items: flex-start; }
.sg-merci-icone { width: 72px; height: 72px; border-radius: var(--r-bloc); background: var(--succes-fond); color: var(--succes-texte); display: flex; align-items: center; justify-content: center; }

/* ---------- Pages d'erreur ---------- */
.erreur { position: relative; isolation: isolate; overflow: hidden; }
.erreur-motif { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.erreur-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); align-items: center; min-height: min(600px, calc(100dvh - var(--h-entete) - var(--h-nav-bas))); }
.erreur-contenu { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-5); padding-block: var(--e-9); }
.erreur-code { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0; font: var(--donnees-graisse) 14px/1 var(--police-donnees); color: var(--encre-2); }
.erreur-code b { display: inline-grid; place-items: center; min-width: 52px; height: 30px; padding: 0 8px; border-radius: var(--r-petit); background: var(--encre); color: var(--fond); font-weight: 700; font-size: 15px; }
.erreur-titre { font-size: clamp(36px, 5vw, 64px); max-width: 14ch; }
.erreur-texte { max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--encre-2); }
.erreur-actions { margin-top: var(--e-2); }
.erreur-aide { font-size: 15px; color: var(--encre-2); }
.erreur-aide a { color: var(--encre); font-weight: var(--gras); }
.erreur-aide a:hover { color: var(--action-texte); }
.erreur-illu { align-self: end; }
.erreur-illu .illu-terrain { -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, transparent); mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, transparent); }
@media (max-width: 899px) {
    .erreur-in { grid-template-columns: 1fr; gap: var(--e-6); min-height: 0; }
    .erreur-contenu { padding-block: var(--e-7) 0; }
    .erreur-illu { max-width: 520px; }
}
@media (max-width: 759px) {
    .erreur-titre { font-size: clamp(32px, 9vw, 40px); }
    .erreur-texte { font-size: 17px; }
    .erreur-actions > .btn { flex: 1 1 auto; }
}