/* Âtre 1.0.2 — feuille du thème de VE Chauffage. Une seule couleur d'accent (braise), neutres chauds, cadrages francs.
   1.0.1 (audit du 10/10) : bande de briques collée au bas des en-têtes simples (pages, recherche, 404) ;
   vidéo dont le cadre contient un encart « A lire » inséré par l'extension (encart au-dessus, vidéo entière dessous).
   1.0.2 (10/10) : images du hero FIXES (embarquées dans le thème, sans lien ni plaque) : plus d'effet de survol. */

@font-face { font-family: "Hepta Slab"; src: url(../polices/hepta-slab.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url(../polices/funnel-sans.woff2) format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url(../polices/funnel-sans-italique.woff2) format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

:root {
    --atr-brique: #8E3A1C;        /* couleur de marque (logo) : en-tête */
    --atr-brique-nuit: #5C2513;   /* pied */
    --atr-braise: #B4502A;        /* SEULE couleur d'accent : boutons, filets, numéros */
    --atr-braise-texte: #9A3F1C;  /* accent pour le texte courant (contraste ≥ 5:1) */
    --atr-ecru: #F3D9C6;          /* accent clair sur fonds brique */
    --atr-fonte: #2B2421;         /* encre des titres */
    --atr-texte: #3A322E;
    --atr-cendre: #5F5650;
    --atr-trait: #E3D6C6;
    --atr-chaux: #F6F0E7;
    --atr-argile: #EFE4D6;
    --atr-blanc: #FFFFFF;
    --atr-h: 72px;
    --atr-large: 1240px;
    --atr-titres: "Hepta Slab", "Rockwell", "Roboto Slab", Georgia, serif;
    --atr-corps: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
    --atr-briques: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32' viewBox='0 0 48 32'%3E%3Cpath d='M0 .5h48M0 16.5h48M.5 0v16M24.5 16v16' fill='none' stroke='%23DCCBB7' stroke-width='1'/%3E%3C/svg%3E");
    --atr-briques-sombres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32' viewBox='0 0 48 32'%3E%3Cpath d='M0 .5h48M0 16.5h48M.5 0v16M24.5 16v16' fill='none' stroke='%237A3218' stroke-width='1.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--atr-h) + 24px); }
body.atr { margin: 0; background: var(--atr-blanc); color: var(--atr-texte); font: 400 1.0625rem/1.65 var(--atr-corps); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.atr) img { max-width: 100%; height: auto; display: block; border-radius: 0; }
:where(.atr) a { color: inherit; text-decoration: none; }
:where(.atr) :is(h1, h2, h3) { font-family: var(--atr-titres); color: var(--atr-fonte); margin: 0; font-weight: 650; letter-spacing: -.01em; }
:where(.atr) p { margin: 0; }
:where(.atr) :is(button, input) { font: inherit; }
.atr :focus-visible { outline: 2px solid var(--atr-braise); outline-offset: 3px; }
.screen-reader-text, .atr-evitement:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atr-evitement:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--atr-blanc); color: var(--atr-fonte); padding: 10px 14px; }

.atr-conteneur { width: 100%; max-width: calc(var(--atr-large) + 48px); margin: 0 auto; padding: 0 24px; }
.atr-conteneur--texte { max-width: 808px; }
.atr-bloc { padding: clamp(56px, 7vw, 96px) 0; }
.atr-bloc--serre { padding-top: 48px; }
.atr-fond--blanc { background: var(--atr-blanc); }
.atr-fond--chaux { background: var(--atr-chaux); }
.atr-fond--argile { background: var(--atr-argile); }

/* ---------- En-tête collant (couleur de marque) ---------- */
.atr-haut { position: sticky; top: 0; z-index: 50; background: var(--atr-brique); color: var(--atr-blanc); }
.atr-haut__ligne { max-width: calc(var(--atr-large) + 48px); margin: 0 auto; padding: 0 24px; height: var(--atr-h); display: flex; align-items: center; gap: 28px; }
.atr-marque { display: block; flex: none; }
.atr-marque img { width: auto; height: 30px; }
.atr-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.atr .atr-nav a { color: var(--atr-blanc); font-weight: 550; font-size: .95rem; padding: 8px 12px; position: relative; white-space: nowrap; }
.atr .atr-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--atr-ecru); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.atr .atr-nav a:hover::after, .atr .atr-nav a[aria-current]::after { transform: scaleX(1); }
.atr-loupe, .atr-tiroir { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: var(--atr-blanc); cursor: pointer; border-radius: 0; padding: 0; }
.atr-loupe:hover, .atr-loupe[aria-expanded="true"] { background: var(--atr-brique-nuit); border-color: var(--atr-brique-nuit); }
.atr-tiroir { display: none; gap: 5px; align-content: center; }
.atr-tiroir span { display: block; width: 20px; height: 2px; background: currentColor; }
.atr-chercher { background: var(--atr-brique-nuit); padding: 18px 24px; }
.atr-forme { max-width: 760px; margin: 0 auto; display: flex; gap: 0; }
.atr-forme input { flex: 1; min-width: 0; height: 50px; border: 1px solid var(--atr-trait); border-right: 0; padding: 0 16px; background: var(--atr-blanc); color: var(--atr-fonte); border-radius: 0; font-size: 1rem; }
.atr-forme button { height: 50px; padding: 0 22px; border: 0; background: var(--atr-braise); color: var(--atr-blanc); font-weight: 650; cursor: pointer; border-radius: 0; }
.atr-forme button:hover { background: var(--atr-brique); }
.atr-forme--page { margin: 24px 0 0; }

/* ---------- Éléments communs ---------- */
.atr-tete { margin-bottom: clamp(28px, 3.5vw, 44px); }
.atr-tete--ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--atr-fonte); }
.atr-tete__sur, .atr-surtitre { display: flex; align-items: center; gap: 10px; font: 650 .78rem/1.2 var(--atr-corps); letter-spacing: .16em; text-transform: uppercase; color: var(--atr-braise-texte); margin: 0 0 12px; }
.atr-tete__sur::before { content: ""; flex: none; width: 14px; height: 12px; background: repeating-linear-gradient(90deg, var(--atr-braise) 0 2px, transparent 2px 5px); }
.atr-tete__sur:has(svg)::before { display: none; }
.atr-flamme { flex: none; color: var(--atr-braise); }
.atr .atr-titre { font-size: clamp(1.9rem, 3.1vw, 2.75rem); line-height: 1.08; font-weight: 650; }
.atr .atr-titre em, .atr .atr-ouverture__titre em { font-style: normal; font-weight: 380; color: var(--atr-braise-texte); }
.atr .atr-titre--moyen { font-size: clamp(1.5rem, 2.2vw, 1.95rem); }
.atr .atr-lien { display: inline-flex; align-items: center; gap: 8px; color: var(--atr-braise-texte); font: 650 .82rem/1.3 var(--atr-corps); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.atr .atr-lien::after { content: "→"; transition: transform .2s; }
.atr .atr-lien:hover::after { transform: translateX(4px); }
.atr .atr-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; background: var(--atr-braise); border: 1px solid var(--atr-braise); color: var(--atr-blanc); font: 650 .98rem/1 var(--atr-corps); border-radius: 0; white-space: nowrap; transition: background .2s, border-color .2s; }
.atr .atr-bouton:hover { background: var(--atr-brique); border-color: var(--atr-brique); }
.atr .atr-bouton--trait { background: transparent; border-color: var(--atr-fonte); color: var(--atr-fonte); }
.atr .atr-bouton--trait:hover { background: var(--atr-fonte); border-color: var(--atr-fonte); color: var(--atr-blanc); }
.atr-etiquette { font: 600 .74rem/1.2 var(--atr-corps); letter-spacing: .14em; text-transform: uppercase; color: var(--atr-cendre); margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; }
.atr-ariane { font-size: .86rem; color: var(--atr-cendre); margin-bottom: 18px; }
.atr .atr-ariane a { color: var(--atr-cendre); text-decoration: underline; text-decoration-color: var(--atr-trait); text-underline-offset: 3px; }
.atr .atr-ariane a:hover { color: var(--atr-braise-texte); }
.atr-vide { font-size: 1.1rem; margin-bottom: 20px; }

/* ---------- Cartes ---------- */
.atr-grille { display: grid; gap: 40px 28px; }
.atr-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.atr-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.atr-grille--serree { gap: 32px 24px; }
.atr-carte { display: flex; flex-direction: column; min-width: 0; }
.atr-carte__vue { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--atr-argile); }
.atr .atr-carte__vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.atr-carte:hover .atr-carte__vue img { transform: scale(1.035); }
.atr-carte__texte { padding-top: 16px; }
.atr-carte__num { font: 700 .95rem/1 var(--atr-titres); color: var(--atr-fonte); letter-spacing: 0; }
.atr .atr-carte__titre { font-size: 1.13rem; line-height: 1.28; font-weight: 600; }
.atr .atr-carte__titre a { background: linear-gradient(var(--atr-braise), var(--atr-braise)) 0 100% / 0 2px no-repeat; transition: background-size .3s; }
.atr .atr-carte:hover .atr-carte__titre a, .atr .atr-carte__titre a:focus-visible { background-size: 100% 2px; }
.atr-carte__chapo { margin-top: 10px; color: var(--atr-cendre); font-size: .97rem; line-height: 1.55; }
.atr-carte__date { margin-top: 8px; color: var(--atr-cendre); font-size: .85rem; }
.atr-carte--compacte .atr-carte__vue { aspect-ratio: 16 / 10; }
.atr .atr-carte--compacte .atr-carte__titre { font-size: 1.02rem; }
.atr-carte--texte { border-top: 2px solid var(--atr-fonte); }

/* ---------- 1. Ouverture : texte large + planche de trois images ---------- */
.atr-ouverture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(36px, 4.5vw, 76px); align-items: center; padding: clamp(28px, 4vh, 48px) max(24px, calc((100% - var(--atr-large)) / 2)); height: clamp(540px, calc(100vh - var(--atr-h) - 92px), 760px); }
.atr-ouverture__texte { max-width: 660px; }
.atr .atr-ouverture__titre { font-size: clamp(2.5rem, 3.9vw, 3.75rem); line-height: 1.03; font-weight: 720; letter-spacing: -.02em; margin: 6px 0 22px; }
.atr-ouverture__chapo { font-size: clamp(1.06rem, 1.25vw, 1.2rem); line-height: 1.6; color: var(--atr-texte); max-width: 50ch; }
.atr-ouverture__boutons { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 30px; }
.atr-ouverture__planche { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; padding: 0 22px 22px 0; }
.atr-ouverture__appareil { position: absolute; right: 0; bottom: 0; width: 64%; height: 72%; background: var(--atr-argile) var(--atr-briques); }
.atr-ouverture__vue { position: relative; z-index: 1; display: block; overflow: hidden; min-height: 0; background: var(--atr-argile); }
.atr .atr-ouverture__vue img { width: 100%; height: 100%; object-fit: cover; }
.atr-ouverture__vue--1 { grid-row: 1 / 3; }
.atr .atr-ouverture__vue--1 img { object-position: 57% 50%; } /* cadrage étroit : la flamme et son verre au centre */
.atr-ouverture__vue--1::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .75); pointer-events: none; }
.atr-ouverture__vue--2 { margin-top: 28px; }

/* ---------- 2. Rubriques ---------- */
.atr-rubriques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.atr-rubrique { display: flex; flex-direction: column; border: 1px solid var(--atr-trait); background: var(--atr-blanc); transition: border-color .2s; }
.atr-rubrique:hover { border-color: var(--atr-fonte); }
.atr-rubrique__vue { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.atr .atr-rubrique__vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.atr-rubrique:hover .atr-rubrique__vue img { transform: scale(1.04); }
.atr-rubrique__n { margin: 18px 20px 0; font: 700 .9rem/1 var(--atr-titres); color: var(--atr-braise-texte); }
.atr-rubrique__nom { margin: 8px 20px 0; font: 650 1.4rem/1.15 var(--atr-titres); color: var(--atr-fonte); }
.atr-rubrique__intro { margin: 10px 20px 0; font-size: .94rem; line-height: 1.5; color: var(--atr-cendre); flex: 1; }
.atr-rubrique__nb { margin: 18px 20px 20px; align-self: flex-start; font: 650 .76rem/1 var(--atr-corps); letter-spacing: .14em; text-transform: uppercase; color: var(--atr-fonte); padding-bottom: 6px; border-bottom: 2px solid var(--atr-braise); }

/* ---------- 3. Au coin du feu ---------- */
.atr-chauffe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.atr-chauffe__une { background: var(--atr-blanc); }
.atr-chauffe__vue { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.atr .atr-chauffe__vue img { width: 100%; height: 100%; object-fit: cover; }
.atr-chauffe__texte { padding: 26px 28px 30px; border-top: 4px solid var(--atr-braise); }
.atr .atr-chauffe__titre { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.18; margin-bottom: 12px; }
.atr .atr-chauffe__titre a:hover { color: var(--atr-braise-texte); }
.atr-chauffe__texte p { color: var(--atr-cendre); }
.atr-registre { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.atr-registre li { border-top: 1px solid rgba(43, 36, 33, .2); }
.atr-registre li:last-child { border-bottom: 1px solid rgba(43, 36, 33, .2); }
.atr-registre a { display: grid; grid-template-columns: 38px 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; }
.atr-registre__n { font: 700 1.2rem/1 var(--atr-titres); color: var(--atr-braise-texte); }
.atr-registre__vue { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--atr-chaux); }
.atr .atr-registre__vue img { width: 100%; height: 100%; object-fit: cover; }
.atr-registre__titre { font: 600 1.02rem/1.35 var(--atr-titres); color: var(--atr-fonte); }
.atr-registre a:hover .atr-registre__titre { color: var(--atr-braise-texte); }

/* ---------- 4. À la une ---------- */
.atr-une { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-bottom: 56px; }
.atr-une__vue { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.atr .atr-une__vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.atr-une:hover .atr-une__vue img { transform: scale(1.03); }
.atr .atr-une__titre { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.12; margin: 4px 0 16px; }
.atr .atr-une__titre a:hover { color: var(--atr-braise-texte); }
.atr-une__chapo { color: var(--atr-cendre); margin-bottom: 22px; }

/* ---------- 5. Le plan de la maison (murs = filets de fonte) ---------- */
.atr-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 6px; padding: 6px; background: var(--atr-fonte); }
.atr-plan--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 205px); grid-template-areas: "a a b b" "a a c d" "e f c d"; }
.atr-plan--6 .atr-piece--1 { grid-area: a; } .atr-plan--6 .atr-piece--2 { grid-area: b; } .atr-plan--6 .atr-piece--3 { grid-area: c; }
.atr-plan--6 .atr-piece--4 { grid-area: d; } .atr-plan--6 .atr-piece--5 { grid-area: e; } .atr-plan--6 .atr-piece--6 { grid-area: f; }
.atr-piece { position: relative; display: block; overflow: hidden; background: var(--atr-argile); min-height: 0; }
.atr .atr-piece img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.atr-piece:hover img { transform: scale(1.04); }
.atr-piece__legende { position: absolute; left: 0; bottom: 0; display: flex; gap: 10px; align-items: baseline; background: var(--atr-blanc); padding: 10px 14px; }
.atr-piece__nom { font: 650 1.08rem/1.1 var(--atr-titres); color: var(--atr-fonte); }
.atr-piece__nb { font-size: .82rem; color: var(--atr-cendre); white-space: nowrap; }
.atr-piece:hover .atr-piece__nom { color: var(--atr-braise-texte); }

/* ---------- 6. Au mètre carré près (règle graduée) ---------- */
.atr-metre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 0; }
.atr-metre__pas { position: relative; padding: 26px 22px 0 0; border-top: 2px solid var(--atr-fonte); display: flex; flex-direction: column; min-width: 0; }
.atr-metre__pas::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--atr-fonte) 0 1px, transparent 1px 12px); }
.atr-metre__pas::after { content: ""; position: absolute; left: 0; top: -2px; width: 3px; height: 20px; background: var(--atr-braise); }
.atr-metre__cote { font: 720 1.9rem/1 var(--atr-titres); color: var(--atr-fonte); margin-bottom: 14px; }
.atr-metre__vue { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 12px; }
.atr .atr-metre__vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.atr-metre__pas:hover .atr-metre__vue img { transform: scale(1.04); }
.atr .atr-metre__titre { font: 600 1rem/1.35 var(--atr-titres); color: var(--atr-fonte); }
.atr .atr-metre__titre:hover { color: var(--atr-braise-texte); }

/* ---------- 7. Déco : mosaïque ---------- */
.atr-mosaique { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.atr-carte--grande { grid-column: span 2; grid-row: span 2; }
.atr-carte--grande .atr-carte__vue { aspect-ratio: auto; flex: 1 1 auto; min-height: 320px; }
.atr .atr-carte--grande .atr-carte__titre { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; }

/* ---------- 8. Le jardin, en quatre gestes ---------- */
.atr-gestes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.atr-gestes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.atr-gestes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atr-geste__vue { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.atr .atr-geste__vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.atr-geste:hover .atr-geste__vue img { transform: scale(1.04); }
.atr .atr-geste__nom { font-size: 1.35rem; margin: 18px 0 6px; padding-top: 14px; border-top: 3px solid var(--atr-braise); }
.atr-geste__liste { list-style: none; margin: 0; padding: 0; }
.atr-geste__liste li { border-bottom: 1px solid var(--atr-trait); }
.atr .atr-geste__liste a { display: block; padding: 10px 0; font-size: .95rem; line-height: 1.4; color: var(--atr-texte); }
.atr .atr-geste__liste a:hover { color: var(--atr-braise-texte); }

/* ---------- 10. Le site ---------- */
.atr-site { text-align: center; }
.atr .atr-site__titre { justify-content: center; font-family: var(--atr-corps); }
.atr-site__phrase { font: 500 clamp(1.3rem, 2vw, 1.7rem)/1.35 var(--atr-titres); color: var(--atr-fonte); max-width: 34em; margin: 0 auto; }
.atr-site__phrase em { font-style: normal; color: var(--atr-braise-texte); font-weight: 400; }
.atr-releves { list-style: none; margin: 44px auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 980px; }
.atr-releves li { padding: 6px 12px; color: var(--atr-cendre); font-size: .92rem; }
.atr-releves li + li { border-left: 1px solid var(--atr-trait); }
.atr-releves strong { display: block; font: 720 2.7rem/1.05 var(--atr-titres); color: var(--atr-fonte); margin-bottom: 6px; }

/* ---------- 11. Texte de fond + questions ---------- */
.atr-guide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.atr-panneau { background: var(--atr-blanc); padding: clamp(24px, 3vw, 40px); border: 1px solid var(--atr-trait); }
.atr-panneau p { margin-top: 14px; color: var(--atr-texte); }
.atr-faq .atr-titre { margin-bottom: 14px; }
.atr-faq details { border-bottom: 1px solid rgba(43, 36, 33, .2); }
.atr-faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative; font: 600 1.06rem/1.35 var(--atr-titres); color: var(--atr-fonte); }
.atr-faq summary::-webkit-details-marker { display: none; }
.atr-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 1.5rem/1 var(--atr-corps); color: var(--atr-braise); }
.atr-faq details[open] summary::after { content: "−"; }
.atr-faq details p { padding: 0 0 18px; color: var(--atr-texte); }

/* ---------- Pied (couleur de marque) ---------- */
.atr-pied { background: var(--atr-brique-nuit); color: rgba(255, 255, 255, .86); font-size: .95rem; }
.atr-pied__briques { height: 18px; background: var(--atr-brique) var(--atr-briques-sombres); }
.atr-pied__grille { max-width: calc(var(--atr-large) + 48px); margin: 0 auto; padding: 56px 24px 36px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.atr-marque--pied img { height: 32px; width: auto; margin-bottom: 18px; }
.atr-pied__marque p { max-width: 34ch; line-height: 1.6; }
.atr .atr-pied__titre { font: 650 .76rem/1.2 var(--atr-corps); letter-spacing: .16em; text-transform: uppercase; color: var(--atr-ecru); margin: 0 0 14px; }
.atr-pied ul { list-style: none; margin: 0; padding: 0; }
.atr-pied li { margin: 0 0 9px; }
.atr .atr-pied a { color: rgba(255, 255, 255, .9); }
.atr .atr-pied a:hover { color: var(--atr-blanc); text-decoration: underline; text-underline-offset: 3px; }
.atr-pied__bas { max-width: var(--atr-large); width: calc(100% - 48px); margin: 0 auto; padding: 18px 0 26px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .85rem; color: rgba(255, 255, 255, .7); }

/* ---------- Rubrique, recherche, pages ---------- */
.atr-rubrique-tete { padding: 36px 0 0; }
.atr-rubrique-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; padding-bottom: 28px; }
.atr-rubrique-tete__n { font: 700 1rem/1 var(--atr-titres); color: var(--atr-braise-texte); margin-bottom: 10px; }
.atr .atr-rubrique-tete__titre { font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1; font-weight: 720; letter-spacing: -.02em; }
.atr .atr-rubrique-tete__titre--moyen { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; }
.atr-rubrique-tete__page { font-weight: 380; color: var(--atr-cendre); font-size: .45em; letter-spacing: 0; }
.atr-rubrique-tete__intro { font-size: 1.12rem; line-height: 1.6; max-width: 52ch; }
.atr-rubrique-tete__nb { margin-top: 12px; font: 650 .78rem/1 var(--atr-corps); letter-spacing: .14em; text-transform: uppercase; color: var(--atr-cendre); }
.atr-rubrique-tete--simple { padding-bottom: 0; }
.atr-rubrique-tete--simple::after { margin-top: 36px; }
.atr-rubrique-tete--simple .atr-rubrique-tete__intro { margin-top: 16px; }
.atr-onglets { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 28px; }
.atr .atr-onglets a { padding: 9px 16px; border: 1px solid var(--atr-trait); background: var(--atr-blanc); color: var(--atr-fonte); font-size: .92rem; font-weight: 550; }
.atr .atr-onglets a:hover { border-color: var(--atr-fonte); }
.atr .atr-onglets a[aria-current] { background: var(--atr-fonte); border-color: var(--atr-fonte); color: var(--atr-blanc); }
.atr-rubrique-tete::after { content: ""; display: block; height: 14px; background: var(--atr-argile) var(--atr-briques); }
.atr-perdu { padding-bottom: 0; }
.atr-perdu::after { margin-top: 72px; }
.atr-perdu .atr-onglets { margin-top: 24px; padding-bottom: 0; }

/* Étal de rubrique : 12 articles = 4 rangées pleines de 4 cases (une vedette 2×2, une large 2×1, dix cartes) */
.atr-etal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.atr-carte--vedette { grid-column: span 2; grid-row: span 2; }
.atr-carte--vedette .atr-carte__vue { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
.atr .atr-carte--vedette .atr-carte__titre { font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.14; }
.atr-carte--large { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; background: var(--atr-chaux); }
.atr-carte--large .atr-carte__vue { aspect-ratio: auto; min-height: 220px; }
.atr-carte--large .atr-carte__texte { padding: 22px 22px 22px 0; }
.atr .atr-carte--large .atr-carte__titre { font-size: 1.3rem; }
.atr-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 56px; }
.atr .atr-pagination .page-numbers { min-width: 46px; height: 46px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--atr-trait); color: var(--atr-fonte); font-weight: 600; }
.atr .atr-pagination a.page-numbers:hover { border-color: var(--atr-fonte); }
.atr .atr-pagination .current { background: var(--atr-fonte); border-color: var(--atr-fonte); color: var(--atr-blanc); }
.atr .atr-pagination .dots { border: 0; }

/* ---------- Article ---------- */
.atr-article__tete { padding: 34px 0 0; position: relative; }
.atr-article__tete::after { content: ""; display: block; height: 14px; margin-top: 36px; background: var(--atr-argile) var(--atr-briques); }
.atr-article__tete-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 48px; align-items: end; }
.atr-article__tete-grille .atr-ariane { grid-column: 1 / -1; margin-bottom: 0; }
.atr .atr-article__titre { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.06; font-weight: 700; letter-spacing: -.018em; max-width: 24ch; }
.atr-fiche { display: flex; margin: 0; border: 1px solid var(--atr-fonte); background: var(--atr-blanc); }
.atr-fiche > div { padding: 12px 18px; min-width: 0; }
.atr-fiche > div + div { border-left: 1px solid var(--atr-fonte); }
.atr-fiche dt { font: 650 .68rem/1.2 var(--atr-corps); letter-spacing: .16em; text-transform: uppercase; color: var(--atr-cendre); margin-bottom: 5px; }
.atr-fiche dd { margin: 0; font: 650 .98rem/1.25 var(--atr-titres); color: var(--atr-fonte); white-space: nowrap; }
.atr .atr-fiche dd a:hover { color: var(--atr-braise-texte); }
.atr-article__vue { margin: 30px 0 0; aspect-ratio: 21 / 9; overflow: hidden; background: var(--atr-argile); }
.atr .atr-article__vue img { width: 100%; height: 100%; object-fit: cover; }
.atr-article__grille { display: grid; grid-template-columns: minmax(0, 272px) minmax(0, 760px); justify-content: center; gap: clamp(40px, 5vw, 72px); padding-top: 48px; padding-bottom: 80px; }
.atr-article__grille--seule { grid-template-columns: minmax(0, 760px); }
.atr-article__grille > .atr-texte { grid-column: -2 / -1; grid-row: 1; }
.atr-colonne { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--atr-h) + 24px); align-self: start; }
.atr-colonne__sur { font: 650 .74rem/1.3 var(--atr-corps); letter-spacing: .14em; text-transform: uppercase; color: var(--atr-braise-texte); padding-bottom: 12px; border-bottom: 2px solid var(--atr-fonte); }
.atr-colonne__liste { list-style: none; margin: 0 0 18px; padding: 0; }
.atr-colonne__liste li { border-bottom: 1px solid var(--atr-trait); }
.atr-colonne__liste a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; }
.atr-colonne__vue { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--atr-chaux); }
.atr .atr-colonne__vue img { width: 100%; height: 100%; object-fit: cover; }
.atr-colonne__titre { font: 600 .9rem/1.32 var(--atr-titres); color: var(--atr-fonte); }
.atr-colonne__liste a:hover .atr-colonne__titre { color: var(--atr-braise-texte); }

/* Corps de texte (contenu éditorial : aucun lien ni texte modifié, seulement l'habillage) */
.atr-texte { font-size: 1.08rem; line-height: 1.78; color: var(--atr-texte); min-width: 0; overflow-wrap: break-word; }
.atr-texte > * + * { margin-top: 1.1em; }
:where(.atr-texte) p { margin: 0; }
.atr .atr-texte h2 { font-size: clamp(1.55rem, 2.4vw, 1.9rem); line-height: 1.2; margin-top: 2.1em; margin-bottom: .2em; }
.atr .atr-texte h2::before { content: ""; display: block; width: 40px; height: 3px; background: var(--atr-braise); margin-bottom: 16px; }
.atr .atr-texte h3 { font-size: 1.28rem; line-height: 1.3; margin-top: 1.7em; }
.atr .atr-texte h4 { font: 650 1.08rem/1.35 var(--atr-corps); color: var(--atr-fonte); margin-top: 1.5em; }
.atr .atr-texte a { color: var(--atr-braise-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.atr .atr-texte a:hover { text-decoration-thickness: 2px; }
.atr-texte strong { color: var(--atr-fonte); font-weight: 650; }
.atr-texte ul, .atr-texte ol { padding-left: 1.3em; }
.atr-texte li + li { margin-top: .4em; }
.atr-texte ul > li::marker { color: var(--atr-braise); }
.atr-texte ol > li::marker { color: var(--atr-braise-texte); font-weight: 700; }
.atr-texte blockquote { margin: 1.6em 0; padding: 18px 24px; background: var(--atr-chaux); border-left: 3px solid var(--atr-braise); font-style: normal; }
.atr-texte blockquote p { margin: 0; }
.atr-texte img, .atr-texte figure { max-width: 100%; height: auto; border-radius: 0 !important; }
.atr-texte figure { margin: 1.6em 0; }
.atr-texte figcaption { font-size: .88rem; color: var(--atr-cendre); margin-top: 8px; }
.atr-texte table { width: 100%; border-collapse: collapse; font-size: .96rem; display: block; overflow-x: auto; }
.atr-texte th, .atr-texte td { border: 1px solid var(--atr-trait); padding: 10px 12px; text-align: left; vertical-align: top; }
.atr-texte th { background: var(--atr-argile); color: var(--atr-fonte); font-weight: 650; }
.atr-texte tbody tr:nth-child(even) td { background: var(--atr-chaux); }
.atr-texte iframe { max-width: 100%; border: 0; }
.atr .atr-texte div[style*="padding-bottom"][style*="position:relative"], .atr .atr-texte div[style*="padding-bottom"][style*="position: relative"] { border-radius: 0 !important; background: var(--atr-fonte); }
/* L'extension de liens internes insère parfois son encart DANS le cadre 16:9 de la vidéo : l'iframe le recouvrait (lien caché)
   et une bande noire restait. Le cadre redevient un bloc normal, l'encart s'affiche puis la vidéo en 16:9 (aucun lien modifié). */
.atr .atr-texte div[style*="padding-bottom"]:has(> div[style*="clear:both"]):has(> iframe) { height: auto !important; padding-bottom: 0 !important; overflow: visible !important; background: none; }
.atr .atr-texte div[style*="padding-bottom"]:has(> div[style*="clear:both"]) > iframe { position: static !important; display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; background: var(--atr-fonte); }
/* Encadrés d'ouverture écrits en ligne dans les articles (« Pour aller à l'essentiel », « En bref »…) : ramenés à la charte */
.atr .atr-texte div[style*="border-left"] { background: var(--atr-chaux) !important; border: 1px solid var(--atr-trait) !important; border-radius: 0 !important; padding: 22px 26px !important; margin: 0 0 1.6em !important; }
.atr .atr-texte div[style*="border-left"] p:first-child { color: var(--atr-fonte); }
.atr .atr-texte div[style*="border-left"] p { font-size: 1rem !important; line-height: 1.7 !important; }
/* Encarts « À lire » insérés dans le corps par l'extension de liens internes : liens intacts, seulement l'habillage */
.atr .atr-texte a:has(.postTitle) { background: var(--atr-chaux) !important; border: 1px solid var(--atr-trait) !important; text-decoration: none !important; padding: 14px 18px !important; }
.atr .atr-texte a:has(.postTitle) .ctaText { color: var(--atr-braise-texte) !important; font: 650 .76rem/1.6 var(--atr-corps) !important; letter-spacing: .12em; text-transform: uppercase; }
.atr .atr-texte a:has(.postTitle) .postTitle { color: var(--atr-fonte) !important; font: 600 1.02rem/1.45 var(--atr-titres) !important; text-decoration: none !important; }
.atr .atr-texte a:has(.postTitle):hover .postTitle { text-decoration: underline !important; text-decoration-color: var(--atr-braise) !important; }
/* Boîte auteur (Simple Author Box) en fin d'article */
.atr .atr-texte .saboxplugin-wrap { border: 1px solid var(--atr-trait); border-top: 3px solid var(--atr-fonte); background: var(--atr-chaux); margin-top: 2.6em; padding-top: 20px; }
.atr .atr-texte .saboxplugin-wrap .saboxplugin-gravatar img { border-radius: 0 !important; width: 84px; height: 84px; object-fit: cover; }
.atr .atr-texte .saboxplugin-wrap .saboxplugin-authorname { font: 650 1.1rem/1.2 var(--atr-titres); margin-top: 6px; }
.atr .atr-texte .saboxplugin-wrap .saboxplugin-authorname a { color: var(--atr-fonte); text-decoration: none; }
.atr .atr-texte .saboxplugin-wrap .saboxplugin-desc { font-size: .95rem; line-height: 1.6; color: var(--atr-cendre); }
/* Sommaire Easy TOC */
.atr #ez-toc-container { display: block; width: 100%; background: var(--atr-blanc); border: 1px solid var(--atr-fonte); border-radius: 0; box-shadow: none; padding: 18px 22px; margin: 1.6em 0; }
.atr #ez-toc-container .ez-toc-title { font: 650 1.05rem/1.2 var(--atr-titres); color: var(--atr-fonte); }
.atr #ez-toc-container ul { margin: 10px 0 0; padding-left: 1.1em; }
.atr #ez-toc-container a { color: var(--atr-texte); text-decoration: none; }
.atr #ez-toc-container a:hover { color: var(--atr-braise-texte); text-decoration: underline; }
.atr-texte--elementor { font-size: 1rem; }

.atr-suite .atr-grille { gap: 32px 28px; }

/* ---------- Écrans moyens ---------- */
@media (max-width: 1180px) {
    .atr-nav a { padding: 8px 9px; font-size: .92rem; }
    .atr-haut__ligne { gap: 16px; }
    .atr-rubriques, .atr-gestes, .atr-metre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atr-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atr-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atr-releves { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .atr-releves li:nth-child(3) { border-left: 0; }
    .atr-etal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atr-carte--vedette { grid-row: auto; }
    .atr-carte--vedette .atr-carte__vue { aspect-ratio: 16 / 10; min-height: 0; }
}

@media (max-width: 980px) {
    :root { --atr-h: 62px; }
    .atr-marque img { height: 26px; }
    .atr-tiroir { display: grid; }
    .atr-loupe { margin-left: auto; }
    .atr-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--atr-brique-nuit); padding: 8px 24px 18px; margin: 0; }
    .atr-nav.atr-ouvert { display: flex; }
    .atr .atr-nav a { padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
    .atr .atr-nav a::after { left: 0; right: auto; width: 32px; bottom: 8px; }

    /* Ouverture sur mobile : surtitre → H1 → chapô → images → boutons */
    .atr-ouverture { display: flex; flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 30px 24px 44px; }
    .atr-ouverture__texte { display: contents; }
    .atr-ouverture .atr-surtitre { order: 1; }
    .atr-ouverture__titre { order: 2; }
    .atr-ouverture__chapo { order: 3; }
    .atr-ouverture__planche { order: 4; margin-top: 26px; height: auto; padding: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 10px; }
    .atr-ouverture__boutons { order: 5; margin-top: 24px; }
    .atr-ouverture__appareil { display: none; }
    .atr-ouverture__vue--1 { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 11; }
    .atr-ouverture__vue--2, .atr-ouverture__vue--3 { aspect-ratio: 1 / 1; margin-top: 0; }

    .atr-chauffe, .atr-une, .atr-guide { grid-template-columns: minmax(0, 1fr); }
    .atr-plan, .atr-plan--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-template-areas: none; grid-auto-rows: 170px; }
    .atr-plan .atr-piece--1 { grid-column: 1 / -1; grid-area: auto; }
    .atr-plan--6 .atr-piece { grid-area: auto; }
    .atr-plan--6 .atr-piece--1 { grid-column: 1 / -1; }
    .atr-plan .atr-piece:last-child:nth-child(even) { grid-column: 1 / -1; }
    .atr-mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atr-carte--grande { grid-row: auto; }
    .atr-carte--grande .atr-carte__vue { aspect-ratio: 16 / 10; min-height: 0; }
    .atr-rubrique-tete__grille { grid-template-columns: minmax(0, 1fr); }
    .atr-article__tete-grille { grid-template-columns: minmax(0, 1fr); }
    .atr-article__grille, .atr-article__grille--seule { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
    .atr-article__grille > .atr-texte { grid-column: 1; }
    .atr-colonne { grid-column: 1; grid-row: 2; position: static; }
    .atr-grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .atr-conteneur { padding: 0 18px; }
    .atr-haut__ligne { padding: 0 18px; gap: 10px; }
    .atr-ouverture { padding: 26px 18px 40px; }
    .atr .atr-ouverture__titre { font-size: clamp(2.2rem, 10.5vw, 2.8rem); }
    .atr-ouverture__boutons { gap: 8px; }
    .atr .atr-ouverture__boutons .atr-bouton { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: .88rem; min-height: 48px; }
    .atr-rubriques, .atr-gestes, .atr-gestes--3, .atr-gestes--2, .atr-grille--4, .atr-grille--3, .atr-mosaique, .atr-etal, .atr-pied__grille { grid-template-columns: minmax(0, 1fr); }
    .atr-carte--grande, .atr-carte--vedette, .atr-carte--large { grid-column: auto; }
    .atr-carte--large { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .atr-carte--large .atr-carte__texte { padding: 16px 18px 20px; }
    .atr-metre { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; gap: 0; }
    .atr-metre__pas { scroll-snap-align: start; }
    .atr-tete--ligne { flex-direction: column; align-items: flex-start; }
    .atr-registre a { grid-template-columns: 30px 70px minmax(0, 1fr); gap: 12px; }
    .atr-chauffe__texte { padding: 20px; }
    .atr-fiche { flex-wrap: wrap; width: 100%; }
    .atr-fiche > div { flex: 1 1 auto; }
    .atr-article__vue { aspect-ratio: 3 / 2; }
    .atr-releves strong { font-size: 2.2rem; }
    .atr-plan, .atr-plan--6 { grid-auto-rows: 150px; }
    .atr-piece__legende { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .atr *, .atr *::before, .atr *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}