/* =====================================================================
   BtoB.email : « La note statistique »
   Feuille unique du site. Page blanche, encadrés gris, filets fins, une
   teinte de données (sarcelle, 5 classes) et un surligneur jaune pour le
   fichier consulté. Chiffres et titres en Barlow Semi Condensed, texte en
   Source Sans 3. Figures numérotées avec Lecture et Source.
   ===================================================================== */

/* ---------- Polices (auto-hébergées, latin, OFL) ---------- */
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3/source-sans-3-latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3/source-sans-3-italic-latin.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/barlow-semi-condensed/barlow-semi-condensed-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/barlow-semi-condensed/barlow-semi-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/barlow-semi-condensed/barlow-semi-condensed-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Replis métriquement ajustés : la page ne saute pas quand les polices arrivent */
@font-face { font-family: "Source Sans Repli"; src: local("Arial"), local("Helvetica"); size-adjust: 93%; ascent-override: 106%; descent-override: 31%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Repli"; src: local("Arial Narrow"), local("Arial"); size-adjust: 86%; ascent-override: 113%; descent-override: 26%; line-gap-override: 0%; }

/* ---------- Jetons ---------- */
:root {
    --fond: #FFFFFF;
    --gris: #F2F4F5;
    --gris-2: #E7EAED;
    --filet: #D5DAE0;
    --filet-fort: #A9B2BD;
    --encre: #14181F;
    --encre-2: #4C5563;
    --encre-3: #646D79;
    --d1: #E3F0EE;
    --d2: #B3D8D2;
    --d3: #73B7AE;
    --d4: #2F8F86;
    --d5: #0B5E57;
    --action: #0B5E57;
    --action-fort: #084842;
    --surligneur: #F5C842;
    --surligneur-pale: #FBEDB8;
    --alerte: #B42318;
    --alerte-pale: #FDECEA;
    --titre: "Barlow Semi Condensed", "Barlow Repli", "Arial Narrow", Arial, sans-serif;
    --texte: "Source Sans 3", "Source Sans Repli", "Segoe UI", Arial, sans-serif;
    --largeur: 1440px;
    --gouttiere: max(20px, env(safe-area-inset-left, 0px));
    --rayon: 4px;
    --ombre: 0 14px 34px -16px rgba(20, 24, 31, .28);
    --et-h: 68px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--et-h) + 16px); }
body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 17px;
    line-height: 1.55;
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--surligneur-pale); color: var(--encre); }
img, svg, video { max-width: 100%; height: auto; }
img { border: 0; }
a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--action-fort); text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--titre); font-weight: 700; color: var(--encre); margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); line-height: 1.04; }
h2 { font-size: clamp(1.55rem, 1.25rem + 1vw, 1.95rem); line-height: 1.12; }
h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 600; }
h4, h5, h6 { font-size: 1.1rem; line-height: 1.25; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .25em; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 32px 0; }
b, strong { font-weight: 650; }
small { font-size: .875em; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
* { scrollbar-width: thin; scrollbar-color: var(--filet-fort) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--filet-fort); border-radius: 10px; border: 2px solid var(--fond); }
.sr-only, .et-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: var(--rayon); font-weight: 600; text-decoration: none; }
.lien-evitement:focus { top: 12px; color: #fff; }
.num, .tab td.num, .tab th.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Mise en page ---------- */
.page { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-left: var(--gouttiere); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.bloc { padding-block: 56px; }
.bloc + .bloc { border-top: 1px solid var(--filet); }
.bloc--gris { background: var(--gris); }
.bloc--gris + .bloc, .bloc + .bloc--gris { border-top: 0; }
.bloc--serre { padding-block: 36px; }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 28px; }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-7 { grid-column: span 7; } .c-6 { grid-column: span 6; } .c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; } .c-3 { grid-column: span 3; }
.colonnes-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.colonnes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.texte { max-width: 70ch; }
.texte p, .texte li { color: var(--encre); }
.tete-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 24px; margin-bottom: 22px; }
.tete-section > * { grid-column: 1; }
.tete-section > .lien-fleche { grid-column: 2; grid-row: 1; justify-self: end; }
.tete-section h2 { margin: 0; }
.tete-section p { margin: 0; color: var(--encre-2); max-width: 64ch; grid-column: 1 / -1; }
@media (max-width: 700px) { .tete-section > .lien-fleche { grid-column: 1; grid-row: auto; justify-self: start; } }
.lien-fleche { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lien-fleche svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease-out; }
.lien-fleche:hover svg { transform: translateX(3px); }

/* ---------- Titres de page ---------- */
.fil { font-size: 14px; color: var(--encre-3); margin: 0 0 18px; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.fil li { margin: 0; }
.fil li:not(:last-child)::after { content: "/"; margin: 0 9px; color: var(--filet-fort); }
.fil a { color: var(--encre-2); text-decoration: none; }
.fil a:hover { color: var(--action); text-decoration: underline; }
.fil [aria-current] { color: var(--encre-2); }
.titre-page { margin: 0 0 14px; max-width: 22ch; }
.titre-page--large { max-width: 26ch; font-size: clamp(2.1rem, 1.35rem + 1.9vw, 3.05rem); line-height: 1.06; }
.chapo { font-size: 1.2rem; line-height: 1.5; color: var(--encre-2); max-width: 54ch; margin: 0 0 24px; }
.chapo b { color: var(--encre); }

/* ---------- Boutons ---------- */
.btn, a.btn, button.btn, input.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 22px; border-radius: var(--rayon); border: 1px solid var(--action);
    background: var(--action); color: #fff; font-family: var(--texte); font-size: 16.5px; font-weight: 650; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
.btn:hover { background: var(--action-fort); border-color: var(--action-fort); color: #fff; }
.btn:active { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .18); }
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--clair, a.btn--clair, button.btn--clair, input.btn--clair { background: #fff; color: var(--encre); border-color: var(--filet-fort); }
.btn--clair:hover { background: var(--gris); color: var(--encre); border-color: var(--encre-3); }
.btn--plein { width: 100%; }
.btn--grand { min-height: 56px; font-size: 18px; padding: 14px 26px; }
.btn--petit { min-height: 38px; padding: 7px 14px; font-size: 15px; }
.btn[disabled], .btn.desactive { background: var(--gris-2); border-color: var(--gris-2); color: var(--encre-3); cursor: not-allowed; }

/* ---------- Champs ---------- */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], select, textarea, .form-control {
    width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--filet-fort); border-radius: var(--rayon);
    background: #fff; color: var(--encre); font-size: 16.5px; line-height: 1.35; box-shadow: none; appearance: none; -webkit-appearance: none;
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
textarea { min-height: 140px; resize: vertical; }
select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%234C5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
input::placeholder, textarea::placeholder { color: #737C88; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--encre-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(11, 94, 87, .22); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--action); vertical-align: -4px; margin: 0 8px 0 0; }
label, .form-label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--encre); }
.champ { margin-bottom: 18px; }
.champ-aide { font-size: 14px; color: var(--encre-3); margin: 6px 0 0; }
.erreur, .champ-erreur { color: var(--alerte); font-size: 15px; font-weight: 600; }

/* Recherche */
.recherche { display: flex; gap: 0; max-width: 560px; border: 1px solid var(--encre-3); border-radius: var(--rayon); background: #fff; transition: box-shadow .15s ease-out, border-color .15s ease-out; }
.recherche:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px rgba(11, 94, 87, .22); }
.recherche input { border: 0; min-height: 54px; font-size: 17.5px; padding-left: 16px; background: transparent; box-shadow: none !important; }
.recherche button { flex: none; margin: 5px; min-height: 44px; border-radius: 3px; }

/* Suggestions de recherche (js/suggestions.js) */
.ac-hote { position: relative; }
.ac-liste { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 50; list-style: none; margin: 0; padding: 6px 0; background: #fff; border: 1px solid var(--encre-3); border-radius: var(--rayon); box-shadow: var(--ombre); max-height: 360px; overflow-y: auto; }
.ac-liste[hidden] { display: none; }
.ac-liste li { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 14px; cursor: pointer; font-size: 16px; }
.ac-liste li[aria-selected="true"], .ac-liste li:hover { background: var(--gris); }
.ac-liste li small, .ac-liste li em { color: var(--encre-3); font-size: 13.5px; font-style: normal; white-space: nowrap; }
.ac-liste mark { background: var(--surligneur-pale); color: inherit; padding: 0 1px; }
.ac-liste .ac-vide { color: var(--encre-2); cursor: default; }
.ac-statut { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- En-tête (controles/entete.ascx) ---------- */
.et { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--filet); transition: box-shadow .2s ease-out; }
@supports (backdrop-filter: blur(6px)) { .et { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(10px); } }
/* Menu mobile ouvert : sans flou, car backdrop-filter fait de l'en-tête le repère du panneau fixe (qui serait sinon réduit à sa hauteur) */
body.et-ouvert .et { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
.et.et-ombre { box-shadow: 0 8px 24px -18px rgba(20, 24, 31, .45); }
.et-int { max-width: var(--largeur); margin: 0 auto; height: var(--et-h); padding: 0 var(--gouttiere); display: flex; align-items: center; gap: 22px; }
.et-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); flex: none; }
.et-logo:hover { color: var(--encre); }
.logo-marque { width: 26px; height: 26px; flex: none; }
.logo-mot { font-family: var(--titre); font-weight: 700; font-size: 25px; letter-spacing: -.01em; line-height: 1; }
.logo-mot span { color: var(--action); }
.et-nav { flex: 1; min-width: 0; }
.et-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.et-item { position: relative; margin: 0; }
.et-lien { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 11px; border: 0; background: none; border-radius: var(--rayon); color: var(--encre); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.et-lien svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease-out; }
.et-lien:hover, .et-item.et-ouvert > .et-lien { background: var(--gris); color: var(--encre); }
.et-item.et-ouvert > .et-lien svg { transform: rotate(180deg); }
.et-lien.et-actif { box-shadow: inset 0 -3px 0 var(--action); border-radius: 0; }
.et-mega { position: absolute; left: 0; top: calc(100% + 10px); width: max-content; max-width: min(980px, calc(100vw - 40px)); background: #fff; border: 1px solid var(--filet); border-radius: 6px; box-shadow: var(--ombre); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease-out, transform .14s ease-out, visibility 0s .14s; }
.et-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.et-item.et-ouvert > .et-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .et-item.et-a-sous:hover > .et-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.et-mega-int { display: grid; gap: 0; padding: 0; }
.et-mega-4 { grid-template-columns: repeat(4, minmax(190px, 230px)); }
.et-mega-3 { grid-template-columns: repeat(3, minmax(190px, 240px)); }
.et-mega-2 { grid-template-columns: repeat(2, minmax(220px, 300px)); }
.et-col { padding: 22px 22px 20px; border-left: 1px solid var(--filet); }
.et-col:first-child { border-left: 0; }
.et-col h3 { font-family: var(--titre); font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.et-col p { font-size: 15px; color: var(--encre-2); margin: 0 0 12px; line-height: 1.45; }
.et-h3-suite { margin-top: 18px !important; }
.et-col-mesure { background: var(--gris); }
.et-liste, .et-regions { list-style: none; margin: 0 0 10px; padding: 0; }
.et-liste li, .et-regions li { margin: 0; }
.et-liste a, .et-regions a { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--encre); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--gris-2); }
.et-liste a:hover, .et-regions a:hover { color: var(--action); }
.et-liste small { color: var(--encre-3); font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-regions { columns: 1; }
.et-regions i { display: none; }
.et-cta, .et-plus { display: inline-block; font-weight: 600; font-size: 15px; text-decoration: none; margin-top: 4px; }
.et-cta { color: #fff; background: var(--action); padding: 8px 12px; border-radius: var(--rayon); }
.et-cta:hover { background: var(--action-fort); color: #fff; }
.et-cta-plein { background: var(--action); }
.et-plus::after { content: " →"; }
.et-recherche { position: relative; display: flex; align-items: center; width: 250px; flex: none; }
.et-recherche input { min-height: 40px; height: 40px; padding: 8px 40px 8px 12px; font-size: 15px; background: var(--gris); border-color: transparent; }
.et-recherche input:hover { border-color: var(--filet-fort); }
.et-recherche button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; background: none; border-radius: 3px; cursor: pointer; display: grid; place-items: center; color: var(--encre-2); }
.et-recherche button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.et-recherche button:hover { background: var(--gris-2); color: var(--encre); }
.et-contact { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--filet-fort); border-radius: var(--rayon); color: var(--encre); font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap; }
.et-contact:hover { background: var(--gris); color: var(--encre); }
.et-burger { display: none; flex: none; width: 48px; height: 48px; border: 1px solid var(--filet-fort); border-radius: var(--rayon); background: #fff; cursor: pointer; padding: 0; position: relative; }
.et-burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--encre); transition: transform .18s ease-out, opacity .18s ease-out; }
.et-burger span:nth-child(1) { top: 16px; } .et-burger span:nth-child(2) { top: 22px; } .et-burger span:nth-child(3) { top: 28px; }
.et-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.et-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.et-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.et-panneau { position: fixed; inset: var(--et-h) 0 0 0; background: #fff; overflow-y: auto; border-top: 1px solid var(--filet); z-index: 999; }
.et-panneau[hidden] { display: none; }
.et-panneau-int { padding: 16px var(--gouttiere) 40px; display: flex; flex-direction: column; gap: 4px; }
.et-recherche-mobile { width: 100%; margin-bottom: 10px; }
.et-recherche-mobile input { height: 48px; min-height: 48px; font-size: 16.5px; }
.et-recherche-mobile button { top: 8px; }
.et-acc { border-bottom: 1px solid var(--filet); }
.et-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; font-family: var(--titre); font-size: 20px; font-weight: 700; cursor: pointer; }
.et-acc summary::-webkit-details-marker { display: none; }
.et-acc summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s ease-out; }
.et-acc[open] summary svg { transform: rotate(180deg); }
.et-acc-corps { padding: 0 2px 16px; }
.et-acc-corps h4 { font-family: var(--texte); font-size: 13.5px; font-weight: 700; color: var(--encre-3); margin: 14px 0 4px; }
.et-acc-lien { display: block; padding: 10px 2px; color: var(--encre); font-weight: 600; text-decoration: none; }
.et-acc-lien small { color: var(--encre-3); font-weight: 400; margin-left: 6px; }
.et-acc-seul { font-family: var(--titre); font-size: 20px; font-weight: 700; border-bottom: 1px solid var(--filet); padding: 14px 2px; }
.et-contact-mobile { margin-top: 14px; justify-content: center; height: 48px; }
.et-pays { margin-top: 12px; color: var(--encre-2); font-size: 15px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--gris); border-top: 1px solid var(--filet); margin-top: 0; font-size: 15px; color: var(--encre-2); }
.pied-int { max-width: var(--largeur); margin: 0 auto; padding: 48px var(--gouttiere) 28px; }
.pied-haut { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.pied-marque p { margin: 12px 0 0; max-width: 32ch; line-height: 1.5; }
.pied-titre { font-family: var(--titre); font-weight: 700; font-size: 16px; color: var(--encre); margin: 0 0 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: 0; }
.pied a, .pied .foot-lien { display: inline-block; padding: 5px 0; color: var(--encre-2); text-decoration: none; font-size: 15px; background: none; border: 0; cursor: pointer; text-align: left; }
.pied a:hover, .pied .foot-lien:hover { color: var(--action); text-decoration: underline; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--encre-3); }
.pied-editeur li { padding: 2px 0; line-height: 1.45; }
.pied-editeur strong { color: var(--encre); font-weight: 600; }

/* ---------- Chiffres clés ---------- */
.cc { border-top: 3px solid var(--encre); padding-top: 14px; margin: 0 0 8px; container-type: inline-size; }
@container (max-width: 640px) {
    .cc .cc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
    .cc .cc-item { padding: 12px 18px 14px; }
    .cc .cc-item:nth-child(odd) { border-left: 0; padding-left: 0; }
    .cc .cc-item:nth-child(n+3) { border-top: 1px solid var(--filet); }
}
.cc-titre { font-family: var(--titre); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--encre); margin: 0 0 12px; }
.cc-grille { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; }
.cc-item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 4px 18px 6px; border-left: 1px solid var(--filet); min-width: 0; }
.cc-item:first-child { border-left: 0; padding-left: 0; }
.cc-item dt { font-size: 15px; line-height: 1.35; color: var(--encre-2); }
.cc-item dd { margin: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--encre); }
.cc-item dd small { font-size: .45em; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.cc-item--marque dd span.surligne { box-shadow: inset 0 -.36em 0 var(--surligneur); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; }
.source { font-size: 13.5px; color: var(--encre-3); margin: 10px 0 0; line-height: 1.45; }
.source b { font-weight: 600; color: var(--encre-2); }

/* ---------- Figures ---------- */
.fig { margin: 0; }
.fig-titre { font-family: var(--titre); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 0 0 12px; color: var(--encre); display: block; }
.fig-num { color: var(--action); margin-right: 8px; }
.fig-lecture { font-size: 15px; color: var(--encre-2); margin: 12px 0 0; line-height: 1.5; max-width: 72ch; }
.fig-lecture b { color: var(--encre); font-weight: 650; }
.fig .source { margin-top: 4px; }
.fig + .fig { margin-top: 40px; }
.colonnes-2 > .fig + .fig, .colonnes-3 > .fig + .fig { margin-top: 0; }

/* ---------- Carte choroplèthe ---------- */
.carte { position: relative; }
.carte svg { display: block; width: 100%; height: auto; max-height: 620px; overflow: visible; }
.carte path.dep { fill: var(--gris-2); stroke: #fff; stroke-width: .7; stroke-linejoin: round; transition: opacity .2s ease-out; cursor: default; }
.carte path.dep.c1 { fill: var(--d1); } .carte path.dep.c2 { fill: var(--d2); } .carte path.dep.c3 { fill: var(--d3); } .carte path.dep.c4 { fill: var(--d4); } .carte path.dep.c5 { fill: var(--d5); }
.carte path.dep[data-ok] { cursor: pointer; }
.carte path.dep.vide { fill: #EEF0F2; }
.carte path.dep.hl, .carte path.dep:focus-visible { stroke: var(--encre); stroke-width: 1.8; paint-order: stroke; outline: none; }
.carte path.dep.actif { fill: var(--surligneur); stroke: var(--encre); stroke-width: 1.6; }
.carte .dep-labels text { font-family: var(--titre); font-weight: 600; font-size: 11px; fill: var(--encre); pointer-events: none; text-anchor: middle; dominant-baseline: middle; }
.carte .dep-labels text.sombre { fill: #fff; }
.carte .dep-labels text.cache { display: none; }
.carte .encart-fond { fill: #fff; stroke: var(--filet); stroke-width: 1; }
.carte .encart-titre { font-family: var(--titre); font-size: 13px; font-weight: 700; fill: var(--encre-2); }
/* transition de couleur posée seulement au moment où la carte se colore (js/carte.js), pas pendant le chargement */
.carte.peinte path.dep { transition: fill .5s ease-out, opacity .2s ease-out; transition-delay: calc(var(--k, 0) * 90ms); }
/* cartes sans coloration progressive (régions, choix de la recherche sur mesure) : transition au survol inchangée */
.carte--regions path.dep, .carte--choix path.dep { transition: fill .5s ease-out, opacity .2s ease-out; }
.carte.attente path.dep[data-ok] { fill: var(--gris-2); }
.carte-bulle { position: absolute; z-index: 20; pointer-events: none; min-width: 210px; background: #fff; border: 1px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 10px 12px 9px; font-size: 14px; line-height: 1.35; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .12s ease-out; }
.carte-bulle.on { opacity: 1; }
.carte-bulle b { display: block; font-family: var(--titre); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.carte-bulle dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; margin: 0; }
.carte-bulle dt { color: var(--encre-2); }
.carte-bulle dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.carte-bulle .v { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--filet); color: var(--action); font-weight: 600; }
.legende { margin: 14px 0 0; }
.legende-titre { font-size: 14px; font-weight: 600; color: var(--encre-2); margin: 0 0 6px; }
.legende-classes { list-style: none; margin: 0; padding: 0; display: flex; max-width: 460px; }
.legende-classes li { flex: 1; margin: 0; font-size: 12.5px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.legende-classes li i { display: block; height: 12px; margin-bottom: 5px; border-right: 1px solid #fff; }
.legende-classes li:nth-child(1) i { background: var(--d1); } .legende-classes li:nth-child(2) i { background: var(--d2); } .legende-classes li:nth-child(3) i { background: var(--d3); } .legende-classes li:nth-child(4) i { background: var(--d4); } .legende-classes li:nth-child(5) i { background: var(--d5); }
.legende-classes li.na { flex: 0 0 auto; margin-left: 14px; }
.legende-classes li.na i { background: #EEF0F2; width: 28px; }

/* ---------- Tableaux statistiques ---------- */
.tab-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-cadre--blanc { background: #fff; border-radius: var(--rayon); padding: 6px 14px 2px; }
.tab { width: 100%; border-collapse: collapse; font-size: 16px; }
.tab caption { caption-side: top; text-align: left; padding: 0 0 12px; font-family: var(--titre); font-weight: 700; font-size: 19px; color: var(--encre); }
.tab thead th { text-align: left; font-family: var(--texte); font-size: 14px; font-weight: 650; color: var(--encre-2); padding: 0 12px 10px; border-bottom: 2px solid var(--encre); vertical-align: bottom; white-space: nowrap; }
.tab th.num, .tab td.num { text-align: right; }
.tab tbody td, .tab tbody th { padding: 12px 12px; border-bottom: 1px solid var(--filet); vertical-align: middle; text-align: left; font-weight: 400; }
.tab tbody th { font-weight: 600; }
.tab tbody tr { transition: background-color .12s ease-out; }
.tab tbody tr:hover { background: var(--gris); }
.tab tbody tr.hl { background: var(--surligneur-pale); }
.tab tbody tr[hidden] { display: none; }
.tab tfoot td { padding: 12px; border-top: 2px solid var(--encre); font-weight: 650; }
.tab .code { font-family: var(--titre); font-weight: 700; font-size: 17px; color: var(--encre-2); width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tab .nom a { color: var(--encre); font-weight: 600; text-decoration: none; }
.tab .nom a:hover { color: var(--action); text-decoration: underline; }
.tab .nom small { display: block; color: var(--encre-3); font-size: 14px; font-weight: 400; }
.tab .fort { font-weight: 650; color: var(--encre); }
.tab .prix { font-family: var(--titre); font-weight: 700; font-size: 18px; white-space: nowrap; }
.tab .action { width: 1%; white-space: nowrap; text-align: right; }
.tab .tri { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.tab .tri::after { content: ""; width: 9px; height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3-3 3 3M2 6l3 3 3-3' fill='none' stroke='%23646D79' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.tab [aria-sort="ascending"] .tri::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5l3-3 3 3' fill='none' stroke='%2314181F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tab [aria-sort="descending"] .tri::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%2314181F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tab [aria-sort] .tri { color: var(--encre); }
.tab .tri:hover { color: var(--encre); }
.tab-vide { padding: 28px 12px; color: var(--encre-2); text-align: left; }

/* Mini-barre : part d'entreprises avec email, même échelle partout (0 à 50 %) */
.part { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.barre { position: relative; display: inline-block; width: 88px; height: 8px; background: var(--gris-2); border-radius: 1px; flex: none; }
.barre > i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(min(var(--v, 0) / .5, 1) * 100%); background: var(--d4); border-radius: 1px; }
.barre > s { position: absolute; top: -3px; bottom: -3px; width: 2px; left: calc(min(var(--m, 0) / .5, 1) * 100% - 1px); background: var(--encre); text-decoration: none; }
.part-val { min-width: 3.2em; text-align: right; color: var(--encre); }

/* Filtres au-dessus d'un tableau */
.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 0 0 18px; padding: 16px; background: var(--gris); border-radius: var(--rayon); }
.filtres .champ { margin: 0; flex: 1 1 220px; max-width: 360px; }
.filtres label { font-size: 14px; color: var(--encre-2); margin-bottom: 5px; }
.filtres input, .filtres select { min-height: 44px; }
.filtres-compte { margin: 0 0 0 auto; font-size: 15px; color: var(--encre-2); align-self: center; }

/* Aperçu dépliable dans une ligne de tableau */
.apercu-btn { border: 1px solid var(--filet-fort); background: #fff; border-radius: var(--rayon); padding: 6px 10px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--encre); }
.apercu-btn:hover { background: var(--gris); }
.apercu-btn[aria-expanded="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.tab tr.apercu-ligne td { background: var(--gris); padding: 14px 12px 16px; }
.apercu-mini { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.apercu-mini th { text-align: left; font-weight: 650; color: var(--encre-2); padding: 7px 10px; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.apercu-mini td { padding: 7px 10px; border-bottom: 1px solid var(--gris-2); white-space: nowrap; color: var(--encre-2); }

/* ---------- Encadrés et listes ---------- */
.encadre { background: var(--gris); border-radius: var(--rayon); padding: 22px 24px; }
.encadre > :last-child { margin-bottom: 0; }
.encadre-titre { font-family: var(--titre); font-weight: 700; font-size: 19px; margin: 0 0 10px; }
.note { font-size: 15px; color: var(--encre-2); }
.alerte { background: var(--alerte-pale); color: #7A1A12; border-radius: var(--rayon); padding: 14px 16px; font-weight: 600; }
.coches { list-style: none; padding: 0; margin: 0; }
.coches li { position: relative; padding-left: 28px; margin: 0 0 9px; }
.coches li::before { content: ""; position: absolute; left: 2px; top: .32em; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%230B5E57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.dico { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; margin: 0; border-top: 1px solid var(--encre); }
.dico dt, .dico dd { margin: 0; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--filet); }
.dico dt { font-weight: 650; }
.dico dd { color: var(--encre-2); }

/* Étapes : une vraie séquence */
.etapes { list-style: none; counter-reset: e; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.etapes li { counter-increment: e; margin: 0; padding-top: 14px; border-top: 1px solid var(--encre); }
.etapes li::before { content: counter(e); display: block; font-family: var(--titre); font-weight: 700; font-size: 38px; line-height: 1; color: var(--action); margin-bottom: 10px; }
.etapes h3 { font-size: 20px; margin: 0 0 6px; }
.etapes p { margin: 0; color: var(--encre-2); font-size: 16px; }

.etapes--compact { grid-template-columns: minmax(0, 1fr); gap: 0; }
.etapes--compact li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 12px 0; border-top: 1px solid var(--filet); }
.etapes--compact li:first-child { border-top: 1px solid var(--encre); }
.etapes--compact li::before { grid-row: span 2; font-size: 26px; margin: 0; }
.etapes--compact h3 { font-size: 18px; margin-bottom: 2px; }

/* Questions fréquentes */
.faq { border-top: 1px solid var(--encre); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; position: relative; font-weight: 650; font-size: 17.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' fill='none' stroke='%2314181F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .15s ease-out; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-r { padding: 0 0 18px; color: var(--encre-2); max-width: 72ch; }
.faq .faq-r > :last-child { margin-bottom: 0; }

/* Liste de liens à chiffres (articles, fichiers liés) */
.liste-liens { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.liste-liens li { margin: 0; border-bottom: 1px solid var(--filet); }
.liste-liens a { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 14px 0; color: var(--encre); text-decoration: none; }
.liste-liens a:hover .ll-t { color: var(--action); text-decoration: underline; }
.ll-t { font-weight: 650; font-size: 17px; }
.ll-d { grid-column: 1; font-size: 15px; color: var(--encre-2); }
.ll-n { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-variant-numeric: tabular-nums; color: var(--encre-2); font-size: 15px; white-space: nowrap; }
.ll-n b { display: block; font-family: var(--titre); font-weight: 700; font-size: 20px; color: var(--encre); }

/* ---------- Fiche produit ---------- */
.fiche-entete { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.commande { position: sticky; top: calc(var(--et-h) + 20px); background: #fff; border: 1px solid var(--encre); border-radius: 6px; padding: 22px 22px 20px; box-shadow: var(--ombre); }
/* Intitulé du bon de commande : nom accessible du bloc (aria-labelledby), masqué à l'écran ; le prix ou le nom du fichier ouvre le bloc */
.commande-titre { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.commande-prix { font-family: var(--titre); font-weight: 700; font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.commande-prix small { font-size: 18px; font-weight: 600; margin-left: 4px; color: var(--encre-2); }
.commande-unite { margin: 8px 0 16px; font-size: 15px; color: var(--encre-2); }
.commande .btn { width: 100%; }
.commande .coches { margin-top: 16px; font-size: 15px; }
.commande .coches li { margin-bottom: 6px; }
.commande-carte { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--filet); }
.commande-carte .carte svg { max-height: 190px; }
.rang { margin: 10px 0 0; font-size: 15px; color: var(--encre-2); }
.rang b { font-family: var(--titre); font-size: 19px; color: var(--encre); }
.barre-achat { display: none; }
.usage { display: flex; gap: 12px; align-items: flex-start; background: var(--gris); border-radius: var(--rayon); padding: 14px 16px; margin: 18px 0 0; font-size: 15.5px; max-width: 70ch; }
.usage svg { flex: none; width: 22px; height: 22px; stroke: var(--encre); fill: none; stroke-width: 1.8; margin-top: 1px; }

/* Barres horizontales (figures) */
.barres { list-style: none; margin: 0; padding: 0; }
.barres li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 12px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--gris-2); font-size: 15.5px; }
.barres .b-l { color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres .b-b { height: 14px; background: var(--gris); position: relative; }
.barres .b-b i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 0) * 100%); background: var(--d4); }
.barres li:first-child .b-b i { background: var(--d5); }
.barres .b-n { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; font-weight: 600; }

/* Départements voisins (FrDepartements.LiensRegion) */
.dept-links h2 { margin-bottom: 14px; }
.dept-links ul { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 32px; border-top: 1px solid var(--encre); }
.dept-links li { margin: 0; break-inside: avoid; border-bottom: 1px solid var(--filet); }
.dept-links a { display: block; padding: 10px 0; color: var(--encre); font-weight: 600; text-decoration: none; }
.dept-links a:hover { color: var(--action); text-decoration: underline; }
.masque { color: var(--encre-3); letter-spacing: 1px; }

/* Tableau d'aperçu (fiche produit) */
.apercu { border: 1px solid var(--filet); border-radius: var(--rayon); }
.apercu table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.apercu th { text-align: left; padding: 10px 12px; background: var(--gris); font-weight: 650; color: var(--encre-2); white-space: nowrap; border-bottom: 1px solid var(--filet); }
.apercu td { padding: 9px 12px; border-bottom: 1px solid var(--gris-2); white-space: nowrap; color: var(--encre-2); }
.apercu tr:last-child td { border-bottom: 0; }

/* ---------- États ---------- */
.m-seul { display: none; }
html.occupe body::after { content: ""; position: fixed; top: 0; left: 0; z-index: 3000; width: 35%; height: 3px; background: var(--action); animation: occupe 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
html.occupe .btn, html.occupe .cta-button, html.occupe input[type="submit"] { opacity: .65; pointer-events: none; }
@keyframes occupe { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.pied-editeur { display: flex; flex-wrap: wrap; gap: 0 14px; }
.pied-editeur li + li::before { content: "·"; margin-right: 14px; color: var(--filet-fort); }
.pied-bas p { margin: 0; }

/* ---------- Animation signature : la carte se colore classe par classe ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- Bandeau cookies (js/rgpd-popup.js) ---------- */
.rgpd-banner { font-family: var(--texte); }

/* ---------- Compatibilité : classes des anciens gabarits ---------- */
.main-container { min-height: 50vh; }
.container { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-left: var(--gouttiere); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.row { display: flex; flex-wrap: wrap; margin-left: -16px; margin-right: -16px; }
.row > [class*="col-"] { position: relative; width: 100%; min-width: 0; padding-left: 16px; padding-right: 16px; }
.col-12 { flex: 0 0 100%; max-width: 100%; } .col-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-6 { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } }
@media (min-width: 768px) {
    .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1200px) { .col-xl-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-8 { flex: 0 0 66.666%; max-width: 66.666%; } }
.justify-content-center { justify-content: center; } .align-items-center { align-items: center; }
.text-center, .ccenter, .centerp { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.text-uppercase, .type--uppercase { text-transform: uppercase; letter-spacing: .04em; }
.inline-block { display: inline-block; } .hide { display: none !important; }
.img-fluid, .img-fluid2 { max-width: 100%; height: auto; }
.mb10 { margin-bottom: 10px; } .mb20, .mb20xs { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .mb40 { margin-bottom: 40px; } .mb50 { margin-bottom: 50px; }
.mt20 { margin-top: 20px; } .mt30 { margin-top: 30px; } .mt40 { margin-top: 40px; }
.pt40 { padding-top: 40px; } .pt48i { padding-top: 48px; } .pt60 { padding-top: 60px; } .pb40 { padding-bottom: 40px; } .pb50 { padding-bottom: 50px; } .padtop50 { padding-top: 50px; } .pad20 { padding: 20px; }
section.section35, .section35 { padding-block: 36px; } .section80 { padding-block: 56px; } .section110 { padding-block: 64px; } .unpad--bottom { padding-bottom: 0 !important; }
.bg--secondary, .bgfa, .bg--gris { background: var(--gris); } .bg--blanc { background: #fff; }
.imagebg, .bbleu, .cblue3 { background: var(--gris); color: var(--encre); }
.boxed, .boxed1, .boxed28 { padding: 24px; border-radius: var(--rayon); background: #fff; }
.boxed--border { border: 1px solid var(--filet); }
.boxed--lg { padding: 32px; }
.feature { margin-bottom: 24px; }
.lead { font-size: 1.18rem; line-height: 1.5; color: var(--encre-2); }
.titre1, .h22, .leh3 { font-family: var(--titre); font-weight: 700; }
.h2 { font-size: 1.9rem; } .h3 { font-size: 1.4rem; } .h4 { font-size: 1.2rem; } .h5 { font-size: 1.05rem; }
.tiny, .type--fine-print { font-size: 14px; color: var(--encre-3); }
.fw300, .fw301 { font-weight: 400; } .lebold { font-weight: 650; }
.text-black { color: var(--encre); } .text-white { color: #fff; }
.form-group { margin-bottom: 18px; }
.form-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.form-check label { font-weight: 400; margin: 0; }
.cta-button, a.cta-button, .btn--primary, .dashboard-button, input[type="submit"]:not(.et-recherche button) {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: var(--rayon);
    border: 1px solid var(--action); background: var(--action); color: #fff; font-weight: 650; font-size: 16.5px; text-decoration: none; cursor: pointer; white-space: normal;
}
.cta-button:hover, .btn--primary:hover, .dashboard-button:hover, input[type="submit"]:hover { background: var(--action-fort); border-color: var(--action-fort); color: #fff; }
/* Variantes des boutons d'envoi (input submit) : même spécificité que la règle de compatibilité ci-dessus */
input[type="submit"].btn--clair:not(.et-recherche button) { background: #fff; color: var(--encre); border-color: var(--filet-fort); }
input[type="submit"].btn--clair:not(.et-recherche button):hover { background: var(--gris); color: var(--encre); border-color: var(--encre-3); }
input[type="submit"][disabled]:not(.et-recherche button), input[type="submit"].desactive:not(.et-recherche button) { background: var(--gris-2); border-color: var(--gris-2); color: var(--encre-3); cursor: not-allowed; }
.svg-icons, .svgicons { width: 40px; height: 40px; }
.list--hover { list-style: none; padding: 0; }
.richText img, .article-container img { max-width: 100%; height: auto; border-radius: var(--rayon); }
.new-price { font-family: var(--titre); font-weight: 700; font-size: 1.6rem; color: var(--encre); }
.old-price { display: none !important; }
#pageloader, .scrollToTop { display: none !important; }
@media (max-width: 575.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .hidden-sm { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hidden-md { display: none !important; } }

/* ---------- Adaptation ---------- */
@media (max-width: 1180px) {
    .et-int > .et-recherche { width: 200px; }
    .pied-haut { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 1060px) {
    :root { --et-h: 60px; }
    .et-nav, .et-int > .et-recherche, .et-int > .et-contact { display: none; }
    .et-burger { display: block; margin-left: auto; }
    .fiche-entete { grid-template-columns: minmax(0, 1fr); }
    .commande { position: static; box-shadow: none; }
    .barre-achat { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; align-items: center; justify-content: space-between; gap: 14px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: #fff; border-top: 1px solid var(--encre); transform: translateY(110%); transition: transform .2s ease-out; }
    .barre-achat.on { transform: none; }
    .barre-achat b { font-family: var(--titre); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .barre-achat small { display: block; font-size: 13px; color: var(--encre-2); }
}
@media (max-width: 900px) {
    .grille { grid-template-columns: minmax(0, 1fr); }
    .grille > [class^="c-"], .grille > [class*=" c-"] { grid-column: 1 / -1; }
    .colonnes-2, .colonnes-3 { grid-template-columns: minmax(0, 1fr); }
    .etapes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .bloc { padding-block: 44px; }
    .cc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .cc-item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 700px) {
    body { font-size: 16.5px; }
    .chapo { font-size: 1.1rem; }
    .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dico { grid-template-columns: minmax(0, 1fr); }
    .dico dt { padding-bottom: 0; border-bottom: 0; }
    .barres li { grid-template-columns: minmax(0, 1fr) auto; }
    .barres .b-b { grid-column: 1 / -1; grid-row: 2; }
    /* Tableau en lignes empilées */
    .tab--empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tab--empile, .tab--empile tbody, .tab--empile tr, .tab--empile td, .tab--empile th { display: block; }
    .tab--empile tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
    .tab--empile tbody td, .tab--empile tbody th { border: 0; padding: 0; }
    .tab--empile .code { grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
    .tab--empile .nom { grid-column: 2; }
    .tab--empile .prix { grid-column: 3; grid-row: 1; text-align: right; }
    .tab--empile .m-cache { display: none; }
    .tab--empile td.m-ligne, .tab--empile th.m-ligne { grid-column: 2; grid-row: 2; text-align: left; color: var(--encre-2); font-size: 15px; font-weight: 400; }
    .tab--empile .m-seul { display: inline; }
    .tab--empile .action { grid-column: 3; grid-row: 2; text-align: right; }
    .tab--empile tr.apercu-ligne { display: block; }
    /* Mini-barre « part avec email » : troisième ligne de la présentation empilée */
    .tab--empile td.m-part { grid-column: 2; grid-row: 3; padding-top: 5px; }
    .tab--empile td.m-part .part-val { min-width: 0; text-align: left; }
    .tab--empile td.m-part .part::after { content: "avec email"; color: var(--encre-3); font-size: 14px; margin-left: -4px; }
    /* Tableau empilé sans colonne de code : le nom occupe la première colonne */
    .tab--empile.tab--sans-code tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
    .tab--empile.tab--sans-code .nom,
    .tab--empile.tab--sans-code td.m-ligne,
    .tab--empile.tab--sans-code td.m-part { grid-column: 1; }
    .tab--empile.tab--sans-code .prix { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
    .filtres-compte { margin-left: 0; }
    /* Fil d'Ariane : retour à la ligne entre les mots, jamais coupé en plein mot (y compris l'en-tête d'article de css/lecture.css) */
    .fil ol li:last-child, .lec-tete .fil ol li:last-child { flex: 0 1 auto; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
    .lec-tete nav.fil ol { flex-wrap: wrap; }
}
/* Cibles tactiles de 44 px : liens d'exemples sous la recherche, liens du pied de page */
@media (max-width: 700px), (pointer: coarse) {
    .recherche + .note a, .recherche + script + .note a { display: inline-block; min-height: 44px; line-height: 44px; padding-inline: 6px; margin-inline: -6px; }
    .pied a, .pied .foot-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
}
/* Aperçus de fichier en mobile : une fiche par ligne (nom en gras, puis les autres colonnes avec leur intitulé, posé par js/site.js et js/tableau.js) */
@media (max-width: 600px) {
    .apercu, .tab tr.apercu-ligne .tab-cadre { overflow: visible; }
    .apercu thead, .apercu-mini thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .apercu table, .apercu tbody, .apercu tr, .apercu td,
    .apercu-mini, .apercu-mini tbody, .apercu-mini tr, .apercu-mini td { display: block; }
    .apercu tbody tr, .apercu-mini tbody tr { padding: 10px 12px; border-bottom: 1px solid var(--gris-2); }
    .apercu tbody tr:last-child, .apercu-mini tbody tr:last-child { border-bottom: 0; }
    .apercu tbody td, .apercu-mini tbody td { border: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45; }
    .apercu tbody td:first-child, .apercu-mini tbody td:first-child { color: var(--encre); font-weight: 600; font-size: 15.5px; margin-bottom: 2px; }
    .apercu tbody td + td[data-label], .apercu-mini tbody td + td[data-label] { position: relative; padding-left: 6.4em; }
    .apercu tbody td + td[data-label]::before, .apercu-mini tbody td + td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 1px; width: 6em; color: var(--encre-3); font-size: 13px; }
}
@media (max-width: 480px) {
    .btn, a.btn { white-space: normal; text-align: center; }
    .logo-mot { font-size: 22px; }
    .cc-item dd { font-size: 1.85rem; }
    .commande-prix { font-size: 42px; }
}
/* ---------- Rendu différé hors écran (content-visibility) ----------
   Le navigateur saute le style et la mise en page de ces blocs tant qu'ils sont loin de l'écran (TBT mobile).
   Le confinement de peinture rognerait les contours de focus au bord : overflow-clip-margin les garde visibles,
   d'où la condition sur les deux propriétés. Les figures qui contiennent une carte en sont exclues (la bulle déborde). */
@supports (content-visibility: auto) and (overflow-clip-margin: 8px) {
    .fig:not(:has(.carte)) { content-visibility: auto; contain-intrinsic-size: auto 480px; overflow-clip-margin: 8px; }
    .pied { content-visibility: auto; contain-intrinsic-size: auto 420px; overflow-clip-margin: 8px; }
    @media (max-width: 700px) {
        /* lignes empilées (grilles) des tableaux de fichiers : 95 lignes sur les listings */
        .tab--empile tbody tr:not(.apercu-ligne) { content-visibility: auto; contain-intrinsic-size: auto 100px; overflow-clip-margin: 8px; }
        .pied { contain-intrinsic-size: auto 950px; }
    }
}
@media print {
    .et, .pied, .barre-achat, .rgpd-banner, .filtres { display: none !important; }
    .fig, .tab tbody tr { content-visibility: visible !important; }
    body { font-size: 12pt; }
    a { color: inherit; text-decoration: none; }
}

/* Grand écran : conteneur de 1440 px (--largeur), marges latérales un peu plus larges */
@media (min-width: 1280px) {
    .page, .container, .et-int, .pied-int { padding-left: 32px; padding-right: 32px; }
}