/* Le Grain du Mur — feuille de style (charte v1, 12/10/2026) */

@font-face { font-family:"Newsreader"; src:url("../fonts/newsreader-latin.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("../fonts/newsreader-italic-latin.woff2") format("woff2"); font-weight:200 800; font-style:italic; font-display:swap; }
@font-face { font-family:"Work Sans"; src:url("../fonts/worksans-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --paper:#FFFDF9; --chalk:#F1EADF; --ink:#2E2D2B; --text:#1C1B19; --muted:#5E5A52; --line:#E6DDCF;
  --vert:#4F7F52; --vert-ink:#3F6B43; --framboise:#D63A6B;
  --f-title:"Newsreader", Georgia, serif; --f-text:"Newsreader", Georgia, serif; --f-ui:"Work Sans", system-ui, sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#FFFFFF; color:var(--text); font-family:var(--f-text); font-size:1.1875rem; line-height:1.62; }
img { max-width:100%; height:auto; }
a { color:var(--vert-ink); text-decoration-thickness:1px; text-underline-offset:3px; }
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
.caps { font-family:var(--f-ui); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:500; }
.center { text-align:center; }
.empty { font-family:var(--f-ui); color:var(--muted); padding:40px 0; text-align:center; }

/* En-tête */
.site-head { border-bottom:1px solid var(--line); text-align:center; padding:36px 0 0; background:var(--chalk); }
.site-head .logo { display:inline-block; }
.site-head .logo img { width:min(420px, 86vw); display:block; }
.tagline { font-family:var(--f-title); font-style:italic; font-size:1.18rem; line-height:1.3; color:var(--text); margin:12px 0 0; }
.head-in { position:relative; }
.head-btn { display:none; }
/* Recherche : une loupe en haut à droite (ordinateur et mobile) */
.search-btn { display:inline-flex; align-items:center; justify-content:center; position:absolute; top:0; right:16px; width:44px; height:44px; color:var(--text); }
.search-btn:hover { color:var(--vert-ink); }
.nav .nav-search { display:none; }
.nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; padding:24px 0 16px; }
/* Le menu est un popover (liste plein écran sur mobile) : sur ordinateur, sa présentation par défaut est neutralisée */
.nav[popover] { position:static; inset:auto; width:auto; height:auto; margin:0; border:0; background:none; color:inherit; overflow:visible; }
.menu-top, .menu-search { display:none; }
.nav a { color:var(--text); text-decoration:none; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--vert-ink); }
.nav a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--vert); text-underline-offset:6px; }

/* Visuels de matière (en attendant les photos) */
.tex { position:relative; overflow:hidden; background:var(--c, #E9E5DD) center / cover no-repeat; }
/* Rendus de matière maison (outils/visuels/matieres.py), en attendant les photos */
.t-chaux { --c:#ECE8E0; background-image:url("/visuels/matieres/chaux.webp?v=1"); }
.t-badigeons { --c:#E6DED0; background-image:url("/visuels/matieres/badigeons.webp?v=1"); }
.t-tadelakt { --c:#CDB79D; background-image:url("/visuels/matieres/tadelakt.webp?v=1"); }
.t-terre-argile { --c:#D6B9A6; background-image:url("/visuels/matieres/terre-argile.webp?v=1"); }
.t-beton-cire-microciment { --c:#AEACA7; background-image:url("/visuels/matieres/beton-cire-microciment.webp?v=1"); }
.t-stucs { --c:#DCD7CF; background-image:url("/visuels/matieres/stucs.webp?v=1"); }
.t-decoration-design { --c:#C8CCBC; background-image:url("/visuels/matieres/decoration-design.webp?v=1"); }
.t-pathologies { --c:#BFB8AA; background-image:url("/visuels/matieres/pathologies.webp?v=1"); }
.t-prix-devis { --c:#E2DBCF; background-image:url("/visuels/matieres/prix-devis.webp?v=1"); }
.tex.has-img { background-image:none; }

/* Titres et textes courts */
.kicker { display:block; color:var(--vert-ink); margin-bottom:10px; }
.h-xl { font-family:var(--f-title); font-weight:400; font-size:clamp(1.9rem, 3.6vw, 2.75rem); line-height:1.12; margin:0 0 12px; }
.h-xl a { color:inherit; text-decoration:none; }
.h-l { font-family:var(--f-title); font-weight:400; font-size:1.45rem; line-height:1.2; margin:8px 0 6px; }
.h-m { font-family:var(--f-title); font-weight:400; font-size:1.18rem; line-height:1.25; margin:8px 0 4px; }
.dek { color:var(--muted); margin:0 0 12px; }
.by { font-family:var(--f-ui); font-size:.8rem; color:var(--muted); }

/* Accueil */
.home-hero { display:grid; grid-template-columns:1.35fr 1fr; gap:32px; padding:36px 0 30px; border-bottom:1px solid var(--line); align-items:center; }
.home-hero .tex { aspect-ratio:4/3; }
.secondary { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:28px 0; border-bottom:1px solid var(--line); }
.alaune { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.alaune .card .tex { aspect-ratio:3/2; }
.alaune .card h3 { font-size:1.45rem; line-height:1.2; }
.card a { color:inherit; text-decoration:none; display:block; }
.card a:hover h3 { color:var(--vert-ink); }
.card .tex { aspect-ratio:4/5; }
.card-l a { display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:start; }
.card-l .tex { aspect-ratio:1/1; }
.card-m .card-body { padding-top:10px; }
.list-cards .card .tex { aspect-ratio:3/2; }
.sec-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:36px 0 16px; padding-top:14px; border-top:2px solid var(--ink); }
.sec-title h2 { font-family:var(--f-title); font-weight:400; font-size:1.7rem; margin:0; }
.grid4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.tile { display:block; text-decoration:none; color:var(--ink); }
.tile .tex { aspect-ratio:3/2; display:flex; align-items:flex-end; }
.tile .tex span { position:relative; margin:12px; background:var(--paper); padding:6px 10px; font-family:var(--f-title); font-size:1.15rem; }
.list-plain { list-style:none; margin:0; padding:0; }
.list-plain li { padding:12px 0; border-bottom:1px solid var(--line); }
.list-plain li a { color:var(--ink); text-decoration:none; font-family:var(--f-title); font-size:1.15rem; }
.list-plain li a:hover { color:var(--vert-ink); }
.narrow { max-width:680px; margin:0 auto 30px; }

/* Article */
.crumbs { font-family:var(--f-ui); font-size:.78rem; color:var(--muted); padding:18px 0 0; text-align:center; }
.crumbs a { color:var(--muted); text-decoration:none; }
.art-head { max-width:780px; margin:0 auto; text-align:center; padding:26px 0 24px; }
.art-head h1 { font-family:var(--f-title); font-weight:400; font-size:clamp(2rem, 4.4vw, 3rem); line-height:1.1; margin:0 0 16px; letter-spacing:-.01em; }
.art-head .dek { font-size:1.2rem; line-height:1.5; }
.art-head .by { margin-top:14px; }
.sponsored-flag { display:inline-block; color:var(--ink); border:1px solid var(--ink); padding:4px 10px; margin:0 0 16px; }
.hero { max-width:1100px; margin:0 auto; }
.hero .tex { aspect-ratio:16/8; }
.art-body { display:grid; grid-template-columns:minmax(0, 680px) 300px; gap:56px; justify-content:center; padding:30px 0 50px; }
.art-body.single { grid-template-columns:minmax(0, 680px); }
.notice { font-family:var(--f-ui); font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; margin:0 0 26px; line-height:1.5; }
.toc { font-family:var(--f-ui); font-size:.9rem; margin:0 0 30px; }
.toc summary { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px; padding:6px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; list-style:none; }
.toc summary::-webkit-details-marker { display:none; }
.toc summary span { flex:1; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; font-size:.85rem; }
.toc summary::after { content:"+"; font-size:1.3rem; font-weight:300; line-height:1; color:var(--vert-ink); }
.toc details[open] summary::after { content:"−"; }
.toc ol { margin:10px 0 0; padding-left:22px; columns:2; column-gap:28px; }
.prose .toc li { margin:0; text-align:left; hyphens:manual; -webkit-hyphens:manual; }
.toc a { display:block; padding:5px 0; color:var(--text); }

/* Texte courant justifié, avec césure (toutes tailles d'écran) */
.prose p, .prose li, .prose aside.photo-note, .dek, .foot p, .form-ok { text-align:justify; hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:6 3 3; text-wrap:pretty; }
.art-head .dek, .prose blockquote.quote p { text-align:center; hyphens:manual; -webkit-hyphens:manual; }
.prose ul.chips li, .prose .palette-n { text-align:left; hyphens:manual; -webkit-hyphens:manual; }

.prose h2 { font-family:var(--f-title); font-weight:400; font-size:1.75rem; line-height:1.2; margin:42px 0 12px; scroll-margin-top:20px; }
.prose h3 { font-family:var(--f-ui); font-weight:600; font-size:1rem; margin:26px 0 6px; }
.prose p { margin:0 0 18px; }
.prose ul, .prose ol { margin:0 0 18px; padding-left:22px; }
.prose li { margin:4px 0; }
.prose aside.essentiel { background:var(--chalk); padding:20px 22px; margin:0 0 28px; border-left:3px solid var(--vert); }
.prose aside.essentiel .caps { color:var(--vert-ink); display:block; margin-bottom:8px; }
.prose aside.essentiel p:last-child, .prose aside.essentiel ul:last-child { margin-bottom:0; }
.prose aside.photo-note { font-family:var(--f-ui); font-size:.84rem; line-height:1.5; color:var(--muted); margin:0 0 22px; padding:0 0 0 12px; border-left:2px solid var(--line); }
.prose aside.photo-note .caps { display:inline; margin-right:8px; color:var(--ink); }
.prose aside.photo-note p { display:inline; margin:0; }
.prose aside.vigil { border:1px solid var(--line); border-left:3px solid var(--framboise); padding:16px 18px; margin:26px 0; font-size:.95em; }
.prose aside.vigil .caps { display:block; margin-bottom:6px; }
.prose aside.vigil p:last-child { margin-bottom:0; }
.prose blockquote.quote { font-family:var(--f-title); font-style:italic; font-size:1.55rem; line-height:1.3; text-align:center; padding:22px 10px; margin:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.prose blockquote.quote p { margin:0; }
.prose blockquote.quote small { display:block; font-family:var(--f-ui); font-style:normal; font-size:.75rem; color:var(--muted); margin-top:10px; letter-spacing:.06em; text-transform:uppercase; }
.prose table.cmp { width:100%; border-collapse:collapse; font-family:var(--f-ui); font-size:.88rem; margin:12px 0 18px; }
.prose table.cmp th { text-align:left; font-weight:600; border-bottom:2px solid var(--ink); padding:8px 8px 8px 0; }
.prose table.cmp td { border-bottom:1px solid var(--line); padding:9px 8px 9px 0; vertical-align:top; }
.prose table.cmp th, .prose table.cmp td { hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:8 4 4; overflow-wrap:break-word; }

.review { display:flex; gap:12px; align-items:center; background:var(--chalk); padding:14px 16px; margin:30px 0 0; font-family:var(--f-ui); font-size:.85rem; }
.mark-mini { display:inline-flex; gap:3px; flex:0 0 auto; padding:3px; border:1px solid var(--ink); }
.mark-mini i { display:block; width:18px; height:18px; }
.mark-mini i:first-child { background:var(--framboise); border-radius:50%; }
.mark-mini i:last-child { background:var(--vert); border-radius:100% 0 0 0; }

.aside .box { margin-bottom:34px; }
.aside .box > .caps { display:block; border-top:2px solid var(--ink); padding-top:10px; margin-bottom:10px; }
.aside .mini { display:grid; grid-template-columns:72px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.aside .mini .tex { aspect-ratio:1/1; }
.aside .mini span { font-family:var(--f-title); font-size:1.02rem; line-height:1.25; }
.aside .more { display:inline-block; margin-top:4px; padding:8px 0; font-family:var(--f-ui); font-size:.8rem; color:var(--vert-ink); text-decoration:none; }
.aside .more:hover { text-decoration:underline; }
.side-list { list-style:none; margin:0; padding:0; }
.side-list li { border-bottom:1px solid var(--line); }
.side-list a { display:block; padding:9px 0; color:var(--ink); text-decoration:none; font-family:var(--f-title); font-size:1rem; line-height:1.3; }
.side-list a:hover { color:var(--vert-ink); }
.side-list small { display:block; color:var(--vert-ink); font-size:.75rem; margin-bottom:2px; }
.aside .search-form { flex-direction:column; margin:0; max-width:none; }
.aside .search-form .btn { align-self:flex-start; }
.toc-side { position:sticky; top:20px; margin-bottom:0; }
.toc-side .progress { height:2px; background:var(--line); margin:0 0 10px; }
.toc-side .progress i { display:block; height:100%; width:0; background:var(--vert); transition:width .15s linear; }
.toc-side ol { list-style:none; margin:0; padding:0; }
.toc-side li a { display:block; padding:6px 0 6px 12px; border-left:2px solid var(--line); color:var(--muted); text-decoration:none; font-family:var(--f-ui); font-size:.84rem; line-height:1.35; }
.toc-side li a:hover { color:var(--ink); }
.toc-side li a.on { border-left-color:var(--vert); color:var(--ink); font-weight:500; }
@media (min-width:901px) { .art-body .prose > .toc { display:none; } }
.demo-note { font-family:var(--f-ui); font-size:.75rem; color:var(--muted); text-align:center; padding:10px; background:var(--chalk); }

.btn { display:inline-block; font-family:var(--f-ui); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border:1px solid var(--ink); border-radius:999px; padding:9px 18px; text-decoration:none; }
.btn:hover { background:var(--ink); color:var(--paper); }

/* Pied de page */
.foot { border-top:1px solid var(--line); margin-top:30px; padding:34px 0 40px; background:var(--chalk); }
.foot .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; }
.foot-logo { width:260px; display:block; margin-bottom:6px; }
.foot .caps { display:block; margin-bottom:8px; }
.foot a { color:var(--text); text-decoration:none; font-family:var(--f-ui); font-size:.88rem; display:block; padding:3px 0; }
.foot p { font-family:var(--f-ui); font-size:.85rem; color:var(--muted); }

/* Page d'attente */
body.prelaunch { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; text-align:center; }
body.prelaunch main { max-width:640px; width:100%; }
.logo-big { width:min(520px, 100%); display:block; margin:0 auto 22px; }
.accroche { font-size:1.25rem; font-style:italic; margin:0 0 28px; }
.prelaunch .info { color:var(--vert-ink); margin:0; }

/* Installation */
.install-form { display:flex; flex-direction:column; gap:10px; max-width:420px; margin:20px auto 0; text-align:left; font-family:var(--f-ui); font-size:.9rem; }
.install-form input { font:inherit; font-size:1rem; padding:10px 12px; border:1px solid var(--muted); border-radius:4px; background:#fff; color:var(--ink); }
.install-form .btn { align-self:flex-start; background:var(--paper); cursor:pointer; }
.install-error { font-family:var(--f-ui); font-size:.9rem; color:#9B2A4D; border-left:3px solid var(--framboise); padding:8px 12px; background:#fff; text-align:left; }

/* Aperçu d'un article (administration) */
.preview-bar { background:var(--ink); color:#fff; font-family:var(--f-ui); font-size:.82rem; text-align:center; padding:8px 16px; }
.preview-bar a { color:#fff; }
.lien-attente { border-bottom:1px dotted var(--framboise); cursor:help; }

/* Administration */
body.adm { font-family:var(--f-ui); font-size:.95rem; line-height:1.5; }
.adm-head { border-bottom:1px solid var(--line); background:var(--paper); }
.adm-head-in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; padding-top:14px; padding-bottom:14px; }
.adm-head img { display:block; width:230px; }
.adm-nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; }
.adm-nav a { color:var(--ink); text-decoration:none; }
.adm-nav form { margin:0; }
.adm-nav button { font:inherit; letter-spacing:inherit; text-transform:inherit; background:none; border:0; padding:0; color:var(--muted); cursor:pointer; }
.adm-main { padding-top:24px; padding-bottom:60px; }
.adm-title { font-family:var(--f-title); font-weight:400; font-size:2rem; line-height:1.15; margin:0 0 18px; }
.adm-sub { font-family:var(--f-ui); font-size:.95rem; font-weight:600; margin:28px 0 10px; }
.adm-flash { padding:10px 14px; border-left:3px solid var(--vert); background:#fff; margin:0 0 18px; }
.adm-flash.erreur { border-left-color:var(--framboise); }
.adm-stats { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; }
.adm-stat { display:block; background:#fff; border:1px solid var(--line); padding:14px; text-decoration:none; color:var(--ink); }
.adm-stat b { display:block; font-family:var(--f-title); font-weight:400; font-size:2rem; line-height:1; }
.adm-stat span { font-size:.8rem; color:var(--muted); }
.adm-stat.hot { border-color:var(--framboise); }
.adm-list { list-style:none; padding:0; margin:0; }
.adm-list li { padding:8px 0; border-bottom:1px solid var(--line); }
.adm-filters { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 16px; font-size:.85rem; }
.adm-filters a { color:var(--muted); text-decoration:none; }
.adm-filters a[aria-current="page"] { color:var(--ink); font-weight:600; }
.adm-table { width:100%; border-collapse:collapse; background:#fff; }
.adm-table th { text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); border-bottom:2px solid var(--ink); padding:8px 10px; }
.adm-table td { border-bottom:1px solid var(--line); padding:9px 10px; vertical-align:top; }
.adm-table a { color:var(--ink); }
.adm-tag { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); padding:1px 5px; margin-left:4px; }
.adm-status { display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:2px; background:var(--chalk); white-space:nowrap; }
.adm-status.s-a_valider { background:var(--framboise); color:#fff; }
.adm-status.s-valide { background:#E4EDE3; color:var(--vert-ink); }
.adm-status.s-programme { background:#fff; border:1px solid var(--vert); color:var(--vert-ink); }
.adm-status.s-publie { background:var(--vert); color:#fff; }
.adm-edit-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:12px; }
.adm-edit-head .adm-title { margin:0; flex:1 1 100%; }
.adm-grid { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:32px; align-items:start; }
.adm-form { display:flex; flex-direction:column; gap:14px; }
.adm-form label { display:flex; flex-direction:column; gap:4px; font-weight:500; }
.adm-form label.chk { flex-direction:row; align-items:center; gap:8px; font-weight:400; }
.adm-form input:not([type="checkbox"]), .adm-form select, .adm-form textarea, .adm-actions input { font:inherit; padding:8px 10px; border:1px solid var(--muted); border-radius:4px; background:#fff; color:var(--ink); }
.adm-form textarea.mono { font-family:ui-monospace, Menlo, monospace; font-size:.85rem; line-height:1.55; }
.adm-form fieldset { border:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:10px; background:#fff; }
.adm-form legend { font-weight:600; padding:0 6px; }
.adm-side { position:sticky; top:16px; background:#fff; border:1px solid var(--line); padding:4px 16px 16px; }
.adm-check { margin:0; padding-left:18px; color:#9B2A4D; font-size:.88rem; }
.adm-check li { margin:4px 0; }
.adm-ok { color:var(--vert-ink); }
.serp { background:#fff; border:1px solid var(--line); margin:12px -8px 0; padding:2px 12px 10px; font-family:Arial, sans-serif; }
.serp-url { font-size:.78rem; color:#4d5156; margin:0 0 2px; }
.serp-title { font-size:1.1rem; line-height:1.3; color:#1a0dab; margin:0 0 4px; }
.serp-desc { font-size:.84rem; line-height:1.45; color:#4d5156; margin:0 0 6px; }
.adm-notes { background:#FBEFF3; border-left:3px solid var(--framboise); margin:12px -16px 0; padding:2px 16px 10px; }
.adm-notes ul { margin:0; padding-left:18px; font-size:.88rem; }
.adm-notes li { margin:5px 0; }
.adm-actions { display:flex; flex-direction:column; gap:8px; }
.adm-actions label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; }
.btn { background:transparent; cursor:pointer; }
.btn[disabled] { opacity:.4; cursor:not-allowed; }
.btn-ink { background:var(--ink); color:var(--paper); }
.btn-quiet { border-color:var(--line); color:var(--muted); }

/* Images : photo à la place de la texture, figures dans le texte */
.tex.has-img > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero figcaption, .prose figcaption { font-family:var(--f-ui); font-size:.75rem; color:var(--muted); margin-top:8px; }
.hero figcaption { max-width:1100px; text-align:right; }
.prose figure { margin:28px 0; }
.prose figure img { display:block; width:100%; height:auto; }
/* Photos verticales : hauteur limitée, centrées, pour ne pas occuper plusieurs écrans */
.prose figure img { max-height:min(640px, 80vh); object-fit:contain; }
.prose img { height:auto; }

/* Schémas maison et planches de couleurs */
.prose figure.visuel { margin:30px 0; background:#fff; border:1px solid var(--line); padding:14px 16px 10px; }
.prose figure.visuel svg { display:block; width:100%; height:auto; }
.visuel-zoom, .prose .visuel-hint { display:none; }
.prose aside.palette { margin:30px 0; border-top:2px solid var(--ink); padding-top:10px; }
.prose aside.palette .caps { display:block; color:var(--vert-ink); }
.prose .palette-t { font-family:var(--f-title); font-size:1.35rem; line-height:1.25; margin:4px 0 14px; }
.prose ul.chips { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:16px 14px; }
.prose ul.chips li { margin:0; font-family:var(--f-ui); font-size:.78rem; line-height:1.35; }
.prose ul.chips svg { display:block; width:100%; height:auto; aspect-ratio:1 / 1; margin-bottom:7px; outline:1px solid rgba(0,0,0,.06); outline-offset:-1px; }
.prose ul.chips b { display:block; font-weight:600; }
.prose ul.chips span { color:var(--muted); }
.prose .palette-n { font-family:var(--f-ui); font-size:.75rem; color:var(--muted); margin:12px 0 0; }

/* Recherche */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.search-form { display:flex; gap:8px; max-width:560px; margin:18px auto 10px; }
.search-form input { flex:1; min-width:0; font:inherit; font-family:var(--f-ui); font-size:1rem; padding:9px 14px; border:1px solid var(--muted); border-radius:999px; background:#fff; color:var(--ink); }

/* Formulaire de contact */
.form { display:flex; flex-direction:column; gap:14px; font-family:var(--f-ui); font-size:.95rem; margin-top:10px; }
.form label { display:block; font-weight:500; }
.form input, .form select, .form textarea { display:block; width:100%; margin-top:5px; font:inherit; font-weight:400; padding:10px 12px; border:1px solid var(--muted); border-radius:4px; background:#fff; color:var(--ink); }
.form .btn { align-self:flex-start; }
.form .by a { color:var(--muted); }
.form-ok { font-family:var(--f-ui); background:var(--chalk); border-left:3px solid var(--vert); padding:14px 16px; }
.hp { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Administration : images, liens, messages, tableau de bord */
.adm-badge { display:inline-block; background:var(--framboise); color:#fff; border-radius:999px; padding:0 7px; font-size:.7rem; letter-spacing:0; }
.adm-upload { background:#fff; border:1px solid var(--line); padding:4px 16px 16px; max-width:760px; }
.adm-media { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.adm-media a { display:block; background:#fff; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.8rem; }
.adm-media img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.adm-media span { display:block; padding:6px 8px; }
.adm-media div { background:#fff; border:1px solid var(--line); font-size:.8rem; }
.adm-media div img { display:block; width:100%; aspect-ratio:auto; object-fit:contain; background:#fff; }
.adm-media div .adm-code { border:0; border-top:1px solid var(--line); }
.adm-cover { display:block; max-width:100%; height:auto; border:1px solid var(--line); }
.adm-form .adm-cover { max-width:320px; }
.adm-code { width:100%; font-family:ui-monospace, Menlo, monospace; font-size:.8rem; padding:8px; border:1px solid var(--line); }
.adm-table tr.off td { color:var(--muted); }
.adm-table tr.unread td { font-weight:600; }
.adm-msg { background:#fff; border:1px solid var(--line); padding:16px 18px; white-space:normal; line-height:1.6; }
.adm-cols { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:10px; }
.adm-hot { color:#9B2A4D; font-weight:600; }
code { font-family:ui-monospace, Menlo, monospace; font-size:.85em; }

/* Mobile */
@media (max-width:900px) {
  /* Texte : un peu plus petit pour des lignes justifiées plus régulières, plus dense et plus noir */
  body { font-size:1.125rem; }
  .prose > p, .prose > ul > li, .prose > ol > li, .prose aside.essentiel, .prose aside.vigil, .dek { font-weight:440; font-variation-settings:"opsz" 16; }

  /* En-tête compact : menu à gauche, logo au centre, recherche à droite */
  .site-head { padding:14px 0 12px; }
  .head-in { display:grid; grid-template-columns:44px minmax(0, 1fr) 44px; align-items:center; gap:0 8px; }
  .head-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; background:none; color:var(--text); text-decoration:none; cursor:pointer; }
  .search-btn { position:static; }
  .site-head .logo { justify-self:center; }
  .site-head .logo img { width:min(250px, 100%); }
  .tagline { grid-column:1 / -1; font-size:1.06rem; margin:6px 0 0; }
  .burger { display:flex; flex-direction:column; gap:5px; width:22px; }
  .burger i { display:block; height:2px; background:currentColor; }
  .nav[popover]:not(:popover-open) { display:none; }
  .nav[popover]:popover-open { display:block; position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0 20px 40px; background:#fff; color:var(--text); overflow-y:auto; text-align:left; text-transform:none; letter-spacing:0; font-size:1rem; font-weight:400; }
  .nav:popover-open .menu-top { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1; height:60px; margin-bottom:6px; background:#fff; border-bottom:2px solid var(--ink); font-family:var(--f-ui); font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--vert-ink); }
  .menu-top .head-btn { margin-right:-10px; font-family:var(--f-ui); font-size:2.2rem; font-weight:300; line-height:1; }
  .nav:popover-open a { display:block; padding:13px 0; border-bottom:1px solid var(--line); font-family:var(--f-title); font-size:1.38rem; line-height:1.25; }
  .nav:popover-open a[aria-current="page"] { text-decoration:none; padding-left:12px; box-shadow:inset 3px 0 var(--vert); }
  .nav:popover-open .nav-sub { padding:16px 0; font-family:var(--f-ui); font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
  .nav:popover-open .nav-search { display:none; }
  .nav:popover-open .menu-search { display:block; margin-top:8px; }
  .nav:popover-open .search-form { flex-direction:column; margin:0; max-width:none; }
  .nav:popover-open .search-form .btn { align-self:flex-start; }
  html:has(.nav:popover-open) { overflow:hidden; }

  .home-hero, .secondary, .alaune { grid-template-columns:1fr; }
  .grid4 { grid-template-columns:repeat(2, 1fr); }
  .grid3 { grid-template-columns:repeat(2, 1fr); }
  .art-body { grid-template-columns:minmax(0, 1fr); gap:20px; }
  .toc-side { display:none; }
  .foot .cols { grid-template-columns:1fr; }
  .adm-grid { grid-template-columns:1fr; }
  .adm-side { position:static; }
  .adm-stats { grid-template-columns:repeat(3, 1fr); }
  .adm-cols { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  /* Schémas : pleine largeur, et agrandissement à la demande (textes lisibles, à parcourir du doigt) */
  .prose figure.visuel { margin:28px -16px; border-left:0; border-right:0; padding:12px 8px 10px; }
  .prose figure.visuel svg { cursor:zoom-in; }
  .visuel-zoom { display:block; margin:10px auto 2px; min-height:40px; padding:8px 16px; background:#fff; border:1px solid var(--line); border-radius:999px; color:var(--text); cursor:pointer; }
  .prose figure.visuel.is-zoomed .visuel-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .prose figure.visuel.is-zoomed .visuel-scroll svg { width:620px; max-width:none; cursor:auto; }
  .prose figure.visuel figcaption { padding:0 8px; }
  .prose .visuel-hint { margin:8px 0 0; text-align:center; font-family:var(--f-ui); font-size:.78rem; color:var(--muted); }
  .prose .is-zoomed .visuel-hint { display:block; }
  /* Encadrés : marges intérieures réduites pour garder des lignes justifiées régulières */
  .prose aside.essentiel { padding:16px 16px 16px 14px; }
  .prose aside.essentiel ul { padding-left:18px; }
  .prose aside.vigil { padding:14px 14px; }
  /* Tableaux : un peu plus petits, pour que plusieurs colonnes tiennent à l'écran */
  .prose table.cmp { font-size:.82rem; }
  .prose table.cmp th, .prose table.cmp td { padding-right:6px; }
}
@media (max-width:560px) {
  .card-l a { grid-template-columns:110px 1fr; }
  .grid3 { grid-template-columns:1fr; }
  .toc ol { columns:1; }
  .nav { gap:4px 14px; }
  .search-form { flex-direction:column; }
  .search-form .btn { align-self:center; }
}

/* Navigateurs sans popover : les rubriques restent affichées en ligne sous le logo */
@supports not selector(:popover-open) { .menu-btn { visibility:hidden; } }

/* Ordinateur : la colonne du site est encadrée de deux filets très fins ; l'en-tête et le pied de page,
   en pleine largeur sur fond sable, les recouvrent */
@media (min-width:1240px) {
  body:not(.adm):not(.prelaunch) { background:#FFFFFF; }
  body:not(.adm):not(.prelaunch)::before { content:""; position:fixed; top:0; bottom:0; left:50%; width:1180px; transform:translateX(-50%); border-left:1px solid #E2D7C5; border-right:1px solid #E2D7C5; pointer-events:none; z-index:-1; }
}

/* Bouton « haut de page », affiché après un écran de défilement (site.js) */
.to-top { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:20; width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:3px; background:rgba(79, 127, 82, .78); color:#fff; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s, background-color .2s; }
.to-top.on { opacity:1; visibility:visible; transform:none; }
.to-top:hover, .to-top:focus-visible { background:var(--vert-ink); }
.to-top[hidden] { display:none; }
@media (min-width:1240px) { .to-top { right:24px; bottom:24px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition:none; } }

/* Outil « Couleurs & palettes » */
.cp { margin:10px 0 34px; }
.cp-tool { display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:40px; align-items:start; }
.cp-ctrl { position:sticky; top:16px; display:flex; flex-direction:column; gap:14px; font-family:var(--f-ui); font-size:.9rem; }
.cp-step { color:var(--vert-ink); margin:4px 0 0; }
.cp-spectre { position:relative; height:210px; border:1px solid var(--line); touch-action:none; }
.cp-spectre canvas { display:block; width:100%; height:100%; cursor:crosshair; }
.cp-spectre canvas:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.cp-marker { position:absolute; width:24px; height:24px; margin:-12px 0 0 -12px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25); pointer-events:none; }
.cp-int { display:flex; flex-direction:column; gap:4px; font-weight:500; }
.cp-int span { font-weight:400; color:var(--muted); font-size:.8rem; }
.cp-int input { width:100%; accent-color:var(--vert); }
.cp-hex-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; }
.cp-hex-form label { font-weight:500; }
.cp-hex-form input { flex:1; min-width:110px; font:inherit; font-family:ui-monospace, Menlo, monospace; padding:8px 10px; border:1px solid var(--muted); border-radius:4px; background:#fff; color:var(--text); text-transform:uppercase; }
.cp-hex-form .btn { padding:8px 16px; }
.cp-natif-l { display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:500; }
.cp-natif-l input { width:48px; height:34px; padding:0; border:1px solid var(--line); background:none; cursor:pointer; }
.cp-lib { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8, 1fr); gap:8px; }
.cp-lib button { display:block; width:100%; aspect-ratio:1; padding:0; border:0; border-radius:50%; overflow:hidden; cursor:pointer; background:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.cp-lib svg { display:block; width:100%; height:100%; }
.cp-lib button:hover, .cp-lib button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.cp-out { min-height:320px; }
.cp-base { display:flex; gap:18px; align-items:center; padding-bottom:16px; border-bottom:2px solid var(--ink); }
.cp-sw { display:block; }
.cp-big { width:112px; height:112px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.cp-nom { font-family:var(--f-title); font-size:1.75rem; line-height:1.15; margin:0; }
.cp-base .cp-code { font-family:ui-monospace, Menlo, monospace; color:var(--muted); margin:2px 0 10px; }
.cp-share { font-size:.7rem; padding:7px 14px; }
.cp-share.copie { background:var(--vert); border-color:var(--vert); color:#fff; }
.cp-proche { font-family:var(--f-ui); font-size:.92rem; margin:14px 0 0; }
.cp-alerte { font-family:var(--f-ui); font-size:.88rem; border-left:3px solid var(--framboise); padding:8px 12px; background:#fff; margin:12px 0 0; }
.cp-pal { margin-top:26px; }
.cp-pal h3, .cp-rep h3 { font-family:var(--f-title); font-weight:400; font-size:1.3rem; margin:0 0 2px; }
.cp-pal-d { font-family:var(--f-ui); font-size:.85rem; color:var(--muted); margin:0 0 10px; }
.cp-chips { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.cp-chip { display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; font-family:var(--f-ui); color:var(--text); }
.cp-chip .cp-sw { aspect-ratio:1; width:100%; margin-bottom:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); transition:transform .15s; }
.cp-chip:hover .cp-sw, .cp-chip:focus-visible .cp-sw { transform:translateY(-2px); }
.cp-chip:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.cp-chip b { display:block; font-size:.78rem; font-weight:600; line-height:1.25; }
.cp-chip .cp-code { display:block; font-family:ui-monospace, Menlo, monospace; font-size:.72rem; color:var(--muted); }
.cp-chip.copie .cp-code::after { content:" · copié"; color:var(--vert-ink); font-family:var(--f-ui); }
.cp-rep { margin-top:28px; }
.cp-bar { display:flex; height:56px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.cp-bar span { position:relative; display:block; }
.cp-bar em { position:absolute; left:8px; bottom:6px; font-style:normal; font-family:var(--f-ui); font-size:.72rem; color:var(--text); background:rgba(255,255,255,.8); padding:1px 5px; }
.cp-note, .prose .cp-note { font-family:var(--f-ui); font-size:.82rem; color:var(--muted); margin:22px 0 0; text-align:left; hyphens:manual; -webkit-hyphens:manual; }
.cp-fam { margin:22px 0 10px; color:var(--vert-ink); }
.cp-grid, .prose .cp-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px 14px; }
.prose .cp-grid li { margin:0; text-align:left; }
.cp-grid a { display:block; text-decoration:none; color:var(--text); font-family:var(--f-ui); }
.cp-grid svg { display:block; width:100%; height:auto; margin-bottom:6px; outline:1px solid rgba(0,0,0,.06); outline-offset:-1px; }
.cp-grid b { display:block; font-family:var(--f-title); font-weight:400; font-size:1.05rem; line-height:1.25; }
.cp-grid span { font-family:ui-monospace, Menlo, monospace; font-size:.75rem; color:var(--muted); }
.cp-grid a:hover b { color:var(--vert-ink); }
.prose .cp-grid-s { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.cp-hero { max-width:1100px; margin:0 auto; }
.cp-hero svg { display:block; width:100%; height:180px; }
.cp-hero figcaption { font-family:var(--f-ui); font-size:.8rem; color:var(--muted); margin-top:8px; text-align:right; }
.prose .cp-cta { text-align:left; margin:28px 0 8px; }
.nav .nav-gloss-d { display:none; }
@media (max-width:900px) {
  .cp-tool { grid-template-columns:minmax(0, 1fr); gap:28px; }
  .cp-ctrl { position:static; }
  .cp-hero svg { height:120px; }
}
@media (max-width:560px) {
  .cp-chips { gap:6px; }
  .cp-chip b { font-size:.68rem; }
  .cp-chip .cp-code { font-size:.62rem; }
  .cp-big { width:84px; height:84px; }
  .cp-nom { font-size:1.4rem; }
  .prose .cp-grid-s, .cp-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Accueil : bloc « Couleurs & palettes » */
.home-cp { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:32px; align-items:center; margin:36px 0 0; padding:24px; background:var(--chalk); }
.home-cp .h-l a { color:inherit; text-decoration:none; }
.home-cp .dek { margin-bottom:16px; }
.home-cp-sw { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8, 1fr); gap:8px; }
.home-cp-sw a { display:block; aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); transition:transform .15s; }
.home-cp-sw a:hover, .home-cp-sw a:focus-visible { transform:scale(1.08); }
.home-cp-sw svg { display:block; width:100%; height:100%; }
@media (max-width:900px) { .home-cp { grid-template-columns:minmax(0, 1fr); gap:20px; padding:20px 16px; } }

/* Colonne des articles : encart « Couleurs & palettes » */
.side-cp-in { display:block; text-decoration:none; color:var(--text); }
.side-cp-sw { display:flex; gap:0; margin:4px 0 10px; }
.side-cp-sw svg { display:block; flex:1; height:44px; }
.side-cp-t { display:block; font-family:var(--f-title); font-size:1.02rem; line-height:1.35; }
.side-cp-in:hover .side-cp-t { color:var(--vert-ink); }
.home-cp { margin:30px 0 4px; }

/* Repères RAL */
.cp-ralb { font-family:var(--f-ui); font-size:.85rem; margin:0 0 10px; }
.cp-chip .cp-ral { display:block; font-family:var(--f-ui); font-size:.68rem; color:var(--vert-ink); }
.prose .cp-ral { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin:6px 0 14px; }
.prose .cp-ral figure { margin:0; }
.prose .cp-ral svg { display:block; width:100%; height:auto; outline:1px solid rgba(0,0,0,.06); outline-offset:-1px; }
.prose .cp-ral figcaption { font-family:var(--f-ui); font-size:.8rem; color:var(--text); margin-top:6px; }
@media (max-width:560px) { .cp-chip .cp-ral { font-size:.6rem; } }

/* Accueil : « Par matière », une photo et un encadré de texte par rubrique */
.mats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.mat { display:flex; flex-direction:column; background:var(--mat-bg, var(--chalk)); color:var(--text); text-decoration:none; border:1px solid rgba(46, 45, 43, .07); transition:box-shadow .2s, transform .2s; }
.mat-ph { display:block; aspect-ratio:3/2; overflow:hidden; }
.mat-ph img { display:block; width:100%; height:100%; object-fit:cover; }
.mat-body { display:flex; flex-direction:column; flex:1; padding:14px 18px 16px; }
.mat-n { color:var(--mat-ink, var(--vert-ink)); }
.mat-t { font-family:var(--f-title); font-weight:400; font-size:1.5rem; line-height:1.15; margin:6px 0; }
.mat-m { color:var(--muted); font-size:.68rem; letter-spacing:.1em; }
.mat-l { font-family:var(--f-title); font-style:italic; font-size:1.02rem; line-height:1.38; margin:10px 0 16px; }
.mat-f { margin-top:auto; display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; border-top:1px solid rgba(46, 45, 43, .16); color:var(--mat-ink, var(--vert-ink)); }
.mat:hover { box-shadow:0 8px 22px rgba(46, 45, 43, .09); transform:translateY(-2px); }
.mat:hover .mat-t { color:var(--vert-ink); }
.mat:focus-visible { outline:2px solid var(--vert); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .mat { transition:none; } .mat:hover { transform:none; } }
.mat-chaux { --mat-bg:#F4F0E8; --mat-ink:#6E6352; }
.mat-badigeons { --mat-bg:#F7EEE1; --mat-ink:#87592A; }
.mat-tadelakt { --mat-bg:#F6E9E1; --mat-ink:#8E4B30; }
.mat-terre-argile { --mat-bg:#F2E7DB; --mat-ink:#7A4E30; }
.mat-beton-cire-microciment { --mat-bg:#EEEDEA; --mat-ink:#5B5954; }
.mat-stucs { --mat-bg:#F0F2EE; --mat-ink:#5C6763; }
.mat-decoration-design { --mat-bg:#EBF0E7; --mat-ink:#3F6B43; }
.mat-pathologies { --mat-bg:#EAEFF2; --mat-ink:#4A6170; }
.mat-prix-devis { --mat-bg:#F4EFDF; --mat-ink:#6F5E26; }
@media (max-width:900px) { .mats { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; } }
@media (max-width:560px) { .mats { grid-template-columns:1fr; } .mat-t { font-size:1.4rem; } }