/* L'Art du Bricolage : le mur d'atelier. Isorel perforé, gravures au pointillé, notice technique. */

@font-face { font-family: "Young Serif"; src: url("polices/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("polices/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("polices/public-sans-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("polices/geist-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
    --adb-isorel: #9A7652;
    --adb-isorel-fonce: #6B4F35;
    --adb-trou: #2C1F14;
    --adb-notice: #ECE9E3;
    --adb-encre: #1B1815;
    --adb-encre-douce: #4A4138;           /* texte secondaire, teinté de l'encre */
    --adb-craie: #F4F1EA;                 /* la peinture des silhouettes */
    --adb-filet: rgba(27, 24, 21, .22);
    --adb-fais: #2F7A4B;
    --adb-verifie: #C98A0E;
    --adb-pro: #C8372D;
    --adb-vert: #22402F;                  /* le vert de la servante d'atelier, second accent */
    --adb-vert-tole: #2B5040;
    --adb-vert-filet: rgba(244, 241, 234, .16);
    --adb-serif: "Young Serif", Georgia, serif;
    --adb-texte: "Public Sans", "Segoe UI", Arial, sans-serif;
    --adb-mono: "Geist Mono", ui-monospace, Consolas, monospace;
    --adb-marge: clamp(16px, 4vw, 56px);
    --adb-ombre-outil: drop-shadow(0 14px 10px rgba(44, 31, 20, .38)) drop-shadow(0 2px 2px rgba(44, 31, 20, .3));
    --adb-isorel-trous: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='3.6' fill='%232C1F14'/%3E%3Cpath d='M12.6 17.2a3.6 3.6 0 0 0 6.8 0' fill='none' stroke='%23B48E68' stroke-width='1'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--adb-isorel) var(--adb-notice); }
body {
    margin: 0; overflow-x: clip; background: var(--adb-notice); color: var(--adb-encre);
    font: 400 17px/1.62 var(--adb-texte); caret-color: var(--adb-isorel);
    font-kerning: normal; text-rendering: optimizeLegibility;
}
::selection { background: var(--adb-isorel); color: var(--adb-craie); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--adb-encre); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.adb-sauter { position: absolute; left: 8px; top: -60px; background: var(--adb-encre); color: var(--adb-craie); padding: 10px 14px; z-index: 50; }
.adb-sauter:focus { top: 8px; }

/* --- Enseigne (vert d'atelier) et casiers (isorel foncé, un onglet par rubrique) --- */

.adb-enseigne { position: relative; z-index: 5; background: var(--adb-vert); color: var(--adb-craie); }
.adb-enseigne-haut { display: flex; align-items: center; gap: 24px; padding: 16px var(--adb-marge); }
.adb-marque { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; font: inherit; }
.adb-marque a { display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--adb-craie); }
.adb-marque-texte { display: flex; flex-direction: column; gap: 6px; }
.adb-marque-logo { width: 56px; height: 56px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(244, 241, 234, .18), 0 6px 12px rgba(0, 0, 0, .25); transform: rotate(-4deg); transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.adb-marque a:hover .adb-marque-logo { transform: rotate(3deg); }
.adb-nom { font: 400 clamp(26px, 2.6vw, 36px)/1 var(--adb-serif); letter-spacing: -.012em; }
.adb-signature { font: 500 12px/1.3 var(--adb-mono); color: #B4C4B9; }
.adb-ouvrir-recherche, .adb-ouvrir-casiers {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 6px;
    background: none; border: 0; color: var(--adb-craie); cursor: pointer;
    font: 500 12px/1 var(--adb-mono); text-transform: uppercase; letter-spacing: .06em; transition: color .2s ease-out;
}
.adb-ouvrir-recherche:hover, .adb-ouvrir-casiers:hover, .adb-ouvrir-recherche[aria-expanded="true"], .adb-ouvrir-casiers[aria-expanded="true"] { color: #D9B78F; }
.adb-ouvrir-casiers { display: none; margin-left: 0; }
.adb-ouvrir-recherche { display: none; }
.adb-chercher-enseigne { margin-left: auto; display: flex; align-items: stretch; width: min(420px, 34vw); }
.adb-chercher-enseigne input {
    flex: 1; min-width: 0; font: 400 15px/1.3 var(--adb-texte); padding: 11px 14px; border: 0; border-radius: 3px 0 0 3px;
    background: rgba(244, 241, 234, .1); color: var(--adb-craie); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .25);
    transition: background-color .2s ease-out, box-shadow .2s ease-out;
}
.adb-chercher-enseigne input::placeholder { color: #A9BBAF; }
.adb-chercher-enseigne input:focus { outline: none; background: var(--adb-craie); color: var(--adb-encre); box-shadow: inset 0 0 0 2px #D9B78F; }
.adb-chercher-enseigne input:focus::placeholder { color: var(--adb-encre-douce); }
.adb-chercher-enseigne button { display: grid; place-items: center; width: 48px; border: 0; border-radius: 0 3px 3px 0; background: var(--adb-isorel); color: var(--adb-craie); cursor: pointer; }
.adb-chercher-enseigne button:hover { background: #B08862; }
.adb-chercher-enseigne .adb-picto { width: 22px; height: 22px; }
.adb-picto { width: 26px; height: 26px; flex: none; }
.adb-hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.adb-enseigne :focus-visible { outline-color: var(--adb-craie); }

.adb-boite-recherche { display: none; padding: 0 var(--adb-marge) 18px; }
.adb-boite-recherche.adb-ouvert { display: block; }
.adb-enseigne .adb-chercher label { color: #B4C4B9; }

.adb-chercher label { display: block; font: 500 12px/1.4 var(--adb-mono); margin-bottom: 6px; color: var(--adb-encre-douce); }
.adb-chercher-ligne { display: flex; max-width: 620px; }
.adb-chercher input { flex: 1; min-width: 0; font: 400 17px/1.3 var(--adb-texte); padding: 12px 14px; border: 1px solid var(--adb-encre); border-right: 0; background: var(--adb-craie); color: var(--adb-encre); border-radius: 0; }
.adb-chercher button { font: 500 13px/1 var(--adb-mono); padding: 0 18px; border: 1px solid var(--adb-encre); background: var(--adb-encre); color: var(--adb-craie); cursor: pointer; }

.adb-casiers { background: var(--adb-isorel-fonce); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .3); }
.adb-casiers ul { list-style: none; margin: 0; padding: 0 var(--adb-marge); display: grid; grid-template-columns: repeat(9, 1fr); }
.adb-casiers li + li { box-shadow: -1px 0 0 rgba(0, 0, 0, .28), -2px 0 0 rgba(255, 255, 255, .07); }
.adb-casiers a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 74px; padding: 10px 4px 9px;
    font: 650 12.5px/1.15 var(--adb-texte); text-transform: uppercase; letter-spacing: .05em; text-align: center; text-decoration: none; color: var(--adb-craie);
    transition: background-color .2s ease-out, color .2s ease-out;
}
.adb-casier-outil { width: 34px; height: 26px; background: currentColor; -webkit-mask: var(--adb-masque) center / contain no-repeat; mask: var(--adb-masque) center / contain no-repeat; opacity: .9; }
.adb-casiers a:hover { background: var(--adb-isorel); }
.adb-casiers a[aria-current="page"] { background: var(--adb-notice); color: var(--adb-encre); }   /* l'onglet ouvert sur la page */
.adb-plan-rayon .adb-casiers a[aria-current="page"], .adb-plan-egare .adb-casiers a[aria-current="page"] { background: var(--adb-isorel); color: var(--adb-craie); }

/* --- Outils accrochés : silhouette peinte + gravure ---------------------- */

.adb-outil { position: relative; display: block; }
.adb-outil-silhouette {
    position: absolute; inset: 0; background: var(--adb-craie);
    -webkit-mask: var(--adb-masque) center / contain no-repeat; mask: var(--adb-masque) center / contain no-repeat;
}
.adb-outil-gravure {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    filter: var(--adb-ombre-outil); transform-origin: 50% 3%;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
/* le crochet de fil d'acier au-dessus de chaque outil */
.adb-outil-crochet::before, .adb-outil-vedette::before, .adb-outil-rayon::before, .adb-outil-fiche::before {
    content: ""; position: absolute; left: 50%; top: -20px; width: 18px; height: 26px; margin-left: -9px; z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'%3E%3Ccircle cx='9' cy='4' r='3.4' fill='%232C1F14'/%3E%3Cpath d='M9 4v12c0 4 6 4 6 0' fill='none' stroke='%23D8D1C4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- L'établi (accueil) -------------------------------------------------- */

.adb-etabli {
    display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px;
    padding: clamp(28px, 5vw, 64px) 0 clamp(170px, 17vw, 250px) var(--adb-marge);
}
.adb-etabli > * { grid-row: 1; }
.adb-etabli-photo { grid-column: 7 / -1; margin: 0; z-index: 0; align-self: start; }
.adb-etabli-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }   /* l'établi : un carré, seul de son rôle */
.adb-tuto-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.adb-etabli-texte { grid-column: 1 / 9; z-index: 2; align-self: center; padding-top: 0; padding-right: var(--adb-marge); }
.adb-etabli-sur { margin: 0 0 18px; font: 500 13px/1.4 var(--adb-mono); color: var(--adb-encre-douce); }
.adb-etabli-titre { margin: 0; font: 400 clamp(36px, 4.3vw, 68px)/1.02 var(--adb-serif); letter-spacing: -.025em; }
.adb-etabli-titre a { display: grid; text-decoration: none; }
.adb-etabli-titre a > span { grid-area: 1 / 1; }
/* deux couches identiques : le fond de papier par ligne derrière, les lettres devant, pour ne pas couper les jambages */
.adb-etabli-titre-fond { color: transparent; }
.adb-etabli-titre-fond > span { background: var(--adb-notice); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: .02em .14em .06em 0; }
.adb-etabli-titre-mots { position: relative; }
.adb-etabli-titre a:hover .adb-etabli-titre-mots > span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.adb-etabli-chapo { max-width: 34em; margin: 26px 0 30px; font-size: 19px; color: var(--adb-encre-douce); background: var(--adb-notice); padding-right: 12px; }

/* La fiche chantier : trois cotes à picto, puis le coup de tampon du verdict */
.adb-etiquette { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.adb-etiquette dl { display: flex; flex-wrap: wrap; margin: 0; }
.adb-cote { display: grid; grid-template-columns: 32px auto; column-gap: 11px; align-items: center; padding-right: 24px; margin-right: 24px; border-right: 1px dashed rgba(27, 24, 21, .35); }
.adb-cote:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.adb-cote .adb-picto { grid-row: span 2; width: 32px; height: 32px; color: var(--adb-vert); }
.adb-cote dt { font: 500 10.5px/1.3 var(--adb-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--adb-encre-douce); }
.adb-cote dd { margin: 2px 0 0; font: 500 16px/1.2 var(--adb-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adb-tampon {
    margin: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 15px 8px;
    border: 2.5px solid currentColor; outline: 1px solid currentColor; outline-offset: 3px; border-radius: 3px;
    font: 500 15px/1.1 var(--adb-mono); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-4deg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.9 1.32'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23e)'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.9 1.32'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23e)'/%3E%3C/svg%3E");
}
.adb-tampon-sur { font-size: 9.5px; letter-spacing: .16em; }
.adb-tampon-fais { color: var(--adb-fais); }
.adb-tampon-verifie { color: #B07806; }
.adb-tampon-pro { color: var(--adb-pro); }

.adb-pastille { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1.2 var(--adb-mono); white-space: nowrap; }
.adb-pastille::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.adb-pastille-fais { color: var(--adb-fais); }
.adb-pastille-verifie { color: var(--adb-verifie); }
.adb-pastille-pro { color: var(--adb-pro); }

/* --- Le chant : la tranche vissée de l'isorel ----------------------------- */

.adb-chant {
    height: 22px; position: relative; z-index: 1;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='22'%3E%3Ccircle cx='90' cy='11' r='5' fill='%23D9D1C2'/%3E%3Ccircle cx='90' cy='11' r='5' fill='none' stroke='%237A6650' stroke-width='1'/%3E%3Cpath d='M86.6 11h6.8' stroke='%235C4A37' stroke-width='1.6'/%3E%3C/svg%3E") center / 180px 22px repeat-x,
        linear-gradient(var(--adb-isorel-fonce), var(--adb-isorel-fonce));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .25);
}

/* --- Le panneau perforé --------------------------------------------------- */

.adb-panneau { position: relative; background: var(--adb-isorel) var(--adb-isorel-trous) 0 0 / 32px 32px; color: var(--adb-craie); }
.adb-panneau::after {        /* le grain de l'isorel, seule texture du site */
    content: ""; position: absolute; inset: 22px 0; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.08' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.adb-panneau-dedans { position: relative; z-index: 1; padding: clamp(56px, 7vw, 96px) var(--adb-marge) clamp(64px, 8vw, 110px); }
.adb-panneau-titre {
    margin: 0 0 clamp(48px, 6vw, 80px); max-width: 15em; font: 400 clamp(32px, 4vw, 58px)/1.02 var(--adb-serif); letter-spacing: -.02em;
    color: var(--adb-craie); text-shadow: 0 1px 0 rgba(44, 31, 20, .35);
}
.adb-panneau-crochets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 64px 28px; align-items: end; }
.adb-crochet a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--adb-craie); }
.adb-outil-crochet { height: clamp(150px, 17vw, 240px); }
.adb-crochet a:hover .adb-outil-gravure, .adb-crochet a:focus-visible .adb-outil-gravure { transform: rotate(7deg) translateY(-6px); }
.adb-crochet-nom { margin-top: 22px; font: 650 15px/1.2 var(--adb-texte); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.adb-crochet-compte { margin-top: 4px; font: 500 12px/1.2 var(--adb-mono); opacity: .85; }
.adb-crochet a:focus-visible { outline-color: var(--adb-craie); }
/* l'outil décroché : il est sur l'établi, il ne reste que sa silhouette */
.adb-crochet-vide .adb-outil-gravure { visibility: hidden; }

.adb-panneau-niveau {   /* posé de travers sur le chant, il déborde sur les rubriques */
    position: absolute; z-index: 4; left: calc(var(--adb-marge) + 2vw); bottom: -64px; width: clamp(260px, 30vw, 440px); height: auto;
    transform: rotate(-3deg); filter: var(--adb-ombre-outil);
}
.adb-panneau-vedette { position: absolute; z-index: 4; left: 64vw; top: clamp(-210px, -15vw, -130px); }
.adb-outil-vedette { height: clamp(260px, 30vw, 430px); }
.adb-outil-vedette .adb-outil-silhouette { display: none; }

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .adb-outil-vedette .adb-outil-gravure {
            animation: adb-balancier linear both; animation-timeline: view(); animation-range: entry 0% exit 40%;
        }
        @keyframes adb-balancier {
            from { transform: rotate(9deg); }
            55%  { transform: rotate(-4deg); }
            to   { transform: rotate(1deg); }
        }
    }
}

/* --- La servante d'atelier : une façade de tiroir par rubrique (accueil) -------- */

.adb-servante {
    position: relative; background: var(--adb-vert); color: var(--adb-craie);
    border-top: 16px solid #183024; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    padding: clamp(96px, 10vw, 140px) var(--adb-marge) clamp(64px, 8vw, 110px);
}
.adb-servante-dedans { max-width: 1320px; margin: 0 auto; }
.adb-servante-titre { margin: 0 0 clamp(30px, 4vw, 48px); font: 400 clamp(30px, 3.4vw, 48px)/1.05 var(--adb-serif); letter-spacing: -.02em; }
.adb-tiroirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.adb-tiroir {
    display: flex; flex-direction: column; padding: 18px 20px 14px; border-radius: 4px;
    background: linear-gradient(var(--adb-vert-tole), #264837);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 2px 0 #142A1F, 0 10px 18px rgba(0, 0, 0, .22);
}
.adb-tiroir-etiquette {   /* le porte-étiquette en tôle, la carte glissée dedans */
    display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; text-decoration: none;
    background: var(--adb-craie); color: var(--adb-encre); padding: 8px 14px 8px 10px;
    border: 3px solid #BDB6A8; border-top-color: #D8D2C6; border-bottom-color: #8F897D;
    transition: background-color .2s ease-out;
}
.adb-tiroir-etiquette:hover { background: #FFFDF8; }
.adb-tiroir-etiquette img { grid-row: span 2; width: 38px; height: 48px; object-fit: contain; }
.adb-tiroir-nom { margin: 0; font: 400 21px/1.1 var(--adb-serif); letter-spacing: -.01em; }
.adb-tiroir-compte { font: 500 11px/1.3 var(--adb-mono); color: var(--adb-encre-douce); }
.adb-tiroir-poignee {
    display: block; width: 44%; height: 11px; margin: 14px auto 12px; border-radius: 0 0 9px 9px;
    background: linear-gradient(#E1DBCF, #9E978B); box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}
.adb-tiroir-contenu { list-style: none; margin: 0; padding: 0; }
.adb-tiroir-contenu li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--adb-vert-filet); }
.adb-tiroir-contenu a { font: 400 16.5px/1.28 var(--adb-serif); text-decoration: none; }
.adb-tiroir-contenu a:hover { text-decoration: underline; }
.adb-tiroir .adb-pastille { font-size: 0; }
.adb-tiroir .adb-pastille::before { width: 11px; height: 11px; box-shadow: 0 0 0 2px rgba(244, 241, 234, .55); }
.adb-tiroir .adb-pastille-fais { color: #5DBB7E; }
.adb-tiroir .adb-pastille-verifie { color: #E9B23A; }
.adb-tiroir .adb-pastille-pro { color: #EE6A5D; }
.adb-tiroir-vide { margin: 0; padding-top: 9px; border-top: 1px solid var(--adb-vert-filet); font: 500 12px/1.4 var(--adb-mono); opacity: .75; }
.adb-servante :focus-visible { outline-color: var(--adb-craie); }
.adb-tiroir-tout { margin-top: auto; padding-top: 12px; align-self: flex-end; font: 500 12px/1.3 var(--adb-mono); color: #D9B78F; }
.adb-tiroir-tout::after { content: " →"; }

/* --- Une ligne de tuto ------------------------------------------------------ */

.adb-ligne { display: grid; grid-template-columns: 1fr; gap: 14px; }
.adb-ligne-nue { padding: 14px 0; border-bottom: 1px solid var(--adb-filet); }
.adb-ligne-photo { display: block; overflow: hidden; }
.adb-ligne-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.adb-ligne:hover .adb-ligne-photo img { transform: scale(1.045); }
.adb-ligne-rubrique { font: 500 12px/1.3 var(--adb-mono); color: var(--adb-encre-douce); text-decoration: none; }
.adb-ligne-titre { margin: 4px 0 8px; font: 400 21px/1.2 var(--adb-serif); letter-spacing: -.01em; }
.adb-ligne-titre a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s ease-out; }
.adb-ligne:hover .adb-ligne-titre a { background-size: 100% 1px; }
.adb-ligne-pied { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.adb-cotes { font: 500 12px/1.3 var(--adb-mono); font-variant-numeric: tabular-nums; color: var(--adb-encre-douce); }
.adb-cotes i { font-style: normal; margin: 0 .5em; }

/* Les photos ont toutes le même étalonnage, chaud */
.adb-etabli-photo img, .adb-tuto-photo img, .adb-ligne-photo img { filter: grayscale(.45) sepia(.42) saturate(1.2) contrast(1.07) brightness(.97); }

/* --- Le tuto -------------------------------------------------------------------- */

.adb-tuto-tete { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; padding: clamp(28px, 5vw, 60px) 0 clamp(36px, 5vw, 64px) var(--adb-marge); }
.adb-tuto-tete > * { grid-row: 1; }
.adb-tuto-tete-texte { grid-column: 1 / 7; z-index: 2; padding-top: clamp(0px, 3vw, 46px); padding-right: var(--adb-marge); }
.adb-tuto-photo { grid-column: 7 / -1; margin: 0; }
.adb-tuto-rubrique { font: 500 13px/1.4 var(--adb-mono); color: var(--adb-encre-douce); }
.adb-tuto-titre { margin: 14px 0 0; font: 400 clamp(36px, 4.6vw, 74px)/1 var(--adb-serif); letter-spacing: -.022em; }
.adb-tuto-chapo { margin: 24px 0 0; font-size: 19px; color: var(--adb-encre-douce); max-width: 32em; }
.adb-tuto-signe { margin: 22px 0 0; font: 500 12px/1.5 var(--adb-mono); color: var(--adb-encre-douce); }

.adb-tuto-panneau { position: relative; background: var(--adb-isorel) var(--adb-isorel-trous) 0 0 / 32px 32px; margin-bottom: clamp(48px, 6vw, 80px); }
.adb-tuto-panneau-dedans { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: center; gap: clamp(28px, 6vw, 90px); padding: 46px var(--adb-marge) 0; }
.adb-fiche-chantier {
    position: relative; background: var(--adb-craie); color: var(--adb-encre); padding: 34px 26px 26px; margin-bottom: 46px;
    box-shadow: 0 2px 3px rgba(44, 31, 20, .25), 0 14px 26px rgba(44, 31, 20, .3); max-width: 100%;
}
.adb-fiche-chantier::before { /* le trou de l'étiquette, pendue à un crochet */
    content: ""; position: absolute; top: 11px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
    background: var(--adb-isorel); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
}
.adb-fiche-chantier-titre { margin: 0 0 14px; font: 400 24px/1.1 var(--adb-serif); }
.adb-fiche-chantier .adb-etiquette { background: transparent; }
.adb-outil-fiche { height: clamp(180px, 22vw, 300px); margin-bottom: -70px; z-index: 3; }
.adb-outil-fiche .adb-outil-silhouette { display: none; }

/* --- Le corps d'un tuto et ses blocs --------------------------------------------- */

.adb-corps { max-width: 720px; margin: 0 auto; padding: 0 var(--adb-marge) clamp(56px, 7vw, 96px); box-sizing: content-box; }
.adb-corps > * { margin-top: 0; margin-bottom: 1.15em; }
.adb-corps h2 { position: relative; font: 400 clamp(28px, 3vw, 36px)/1.1 var(--adb-serif); letter-spacing: -.015em; margin: 2.3em 0 .6em; padding-top: 1.15em; }
/* le séparateur des sections : un filet coupé par la clé à molette du logo, posée à plat */
.adb-corps h2::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; margin-top: 11px;
    background: linear-gradient(var(--adb-filet), var(--adb-filet)) left / calc(50% - 36px) 100% no-repeat,
                linear-gradient(var(--adb-filet), var(--adb-filet)) right / calc(50% - 36px) 100% no-repeat;
}
.adb-corps h2::after {
    content: ""; position: absolute; top: -10px; left: 50%; width: 13px; height: 44px; margin-left: -6.5px; transform: rotate(90deg);
    background: var(--adb-isorel); -webkit-mask: url("outils/plomberie-silhouette.png") center / contain no-repeat; mask: url("outils/plomberie-silhouette.png") center / contain no-repeat;
}
.adb-corps h3 { font: 700 20px/1.3 var(--adb-texte); margin: 1.7em 0 .5em; }
.adb-corps strong { font-weight: 700; }
.adb-corps ul:not([class*="adb-"]) > li, .adb-essentiel li, .adb-cas li { list-style: none; position: relative; }
.adb-corps ul.wp-block-list { padding-left: 1.6em; }
.adb-corps ul.wp-block-list > li::before {     /* la puce : un trou de panneau */
    content: ""; position: absolute; left: -1.35em; top: .55em; width: 8px; height: 8px; border-radius: 50%;
    border: 2px solid var(--adb-isorel-fonce);
}
.adb-corps li + li { margin-top: .35em; }

.adb-essentiel, .adb-attention, .adb-erreur, .adb-materiel, .adb-cas { position: relative; margin: 2.2em 0; }
.adb-essentiel::before, .adb-attention::before, .adb-erreur::before, .adb-indispensable::before, .adb-facultatif::before, .adb-seul::before, .adb-appel::before {
    display: block; font: 500 12px/1 var(--adb-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
}
.adb-attention > :last-child, .adb-erreur > :last-child, .adb-essentiel > :last-child { margin-bottom: .6em; }

/* L'essentiel : une note punaisée */
.adb-essentiel {
    background: var(--adb-craie); padding: 30px 28px 12px; transform: rotate(-.5deg);
    box-shadow: 0 1px 2px rgba(44, 31, 20, .18), 0 12px 24px rgba(44, 31, 20, .14);
}
.adb-essentiel::before { content: "L’essentiel"; color: var(--adb-vert); }
.adb-essentiel::after {
    content: ""; position: absolute; top: -12px; left: 50%; width: 26px; height: 30px; margin-left: -13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M13 16v13' stroke='%238A8378' stroke-width='1.6' stroke-linecap='round'/%3E%3Cellipse cx='13' cy='17' rx='7' ry='2.4' fill='%2318301F' opacity='.35'/%3E%3Ccircle cx='13' cy='10' r='8.5' fill='%2322402F'/%3E%3Ccircle cx='10.5' cy='7.5' r='2.6' fill='%23fff' opacity='.35'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Où s'arrêter : un panneau de danger */
.adb-attention { background: #F5E3DE; border: 3px solid var(--adb-pro); padding: 20px 24px 10px 88px; }
.adb-attention::before { content: "Où s’arrêter"; color: var(--adb-pro); }
.adb-attention::after {
    content: ""; position: absolute; left: 22px; top: 20px; width: 46px; height: 42px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 42'%3E%3Cpath d='M23 3 43 39H3Z' fill='%23fff' stroke='%23C8372D' stroke-width='4.5' stroke-linejoin='round'/%3E%3Cpath d='M23 15v12' stroke='%231B1815' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='23' cy='33' r='2.4' fill='%231B1815'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* L'erreur classique : notée sur une feuille de papier millimétré */
.adb-erreur {
    padding: 22px 24px 10px 88px; border: 1px solid rgba(34, 64, 47, .32);
    background: #EFF1EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M10 0V50M20 0V50M30 0V50M40 0V50M0 10H50M0 20H50M0 30H50M0 40H50' stroke='%2322402F' stroke-opacity='.08'/%3E%3Cpath d='M0 0H50M0 0V50' stroke='%2322402F' stroke-opacity='.2'/%3E%3C/svg%3E") 0 0 / 50px 50px;
}
.adb-erreur::before { content: "L’erreur classique"; color: var(--adb-vert); }
.adb-erreur::after {   /* le pansement */
    content: ""; position: absolute; left: 20px; top: 18px; width: 48px; height: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(-38 24 24)' stroke='%231B1815' stroke-width='2'%3E%3Crect x='3' y='15' width='42' height='18' rx='9' fill='%23E2BE98'/%3E%3Crect x='17' y='15' width='14' height='18' fill='%23F4F1EA'/%3E%3C/g%3E%3Cg fill='%231B1815' transform='rotate(-38 24 24)'%3E%3Ccircle cx='9' cy='21' r='1.2'/%3E%3Ccircle cx='9' cy='27' r='1.2'/%3E%3Ccircle cx='13' cy='24' r='1.2'/%3E%3Ccircle cx='39' cy='21' r='1.2'/%3E%3Ccircle cx='39' cy='27' r='1.2'/%3E%3Ccircle cx='35' cy='24' r='1.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le matériel : une liste de courses sur porte-bloc */
.adb-materiel { background: var(--adb-craie); border-top: 30px solid var(--adb-vert); box-shadow: 0 1px 2px rgba(44, 31, 20, .18), 0 12px 24px rgba(44, 31, 20, .12); }
.adb-materiel::after {   /* la pince du porte-bloc */
    content: ""; position: absolute; top: -40px; left: 50%; width: 110px; height: 34px; margin-left: -55px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 34'%3E%3Crect x='6' y='10' width='98' height='20' rx='4' fill='%23C9C2B5' stroke='%237F786C' stroke-width='1.5'/%3E%3Crect x='38' y='3' width='34' height='12' rx='6' fill='none' stroke='%237F786C' stroke-width='3'/%3E%3Cpath d='M12 16h86' stroke='%23fff' stroke-opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.adb-materiel > .wp-block-group__inner-container, .adb-cas > .wp-block-group__inner-container { display: grid; grid-template-columns: 3fr 2fr; }
.adb-indispensable, .adb-facultatif, .adb-seul, .adb-appel { padding: 18px 22px 6px; }
.adb-facultatif { border-left: 1px dashed rgba(27, 24, 21, .3); color: var(--adb-encre-douce); }
.adb-indispensable::before { content: "Indispensable"; color: var(--adb-vert); }
.adb-facultatif::before { content: "Facultatif"; }
.adb-materiel ul.wp-block-list { padding-left: 1.7em; }
.adb-materiel ul.wp-block-list > li::before { border-radius: 0; width: 11px; height: 11px; top: .42em; border-width: 1.5px; border-color: var(--adb-encre); } /* une case à cocher : la liste de courses */

ol.adb-etapes { counter-reset: adb-etape; list-style: none; padding: 0; margin: 1.6em 0 2em; }
ol.adb-etapes > li { counter-increment: adb-etape; position: relative; padding: 16px 0 16px 64px; border-top: 1px solid var(--adb-filet); margin: 0; }
ol.adb-etapes > li:last-child { border-bottom: 1px solid var(--adb-filet); }
ol.adb-etapes > li::before { content: counter(adb-etape); position: absolute; left: 0; top: 8px; font: 400 40px/1 var(--adb-serif); color: var(--adb-isorel); font-variant-numeric: tabular-nums; }
ol.adb-etapes > li strong { display: block; font-size: 18px; margin-bottom: 2px; }

.adb-rail { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--adb-encre); }
.adb-corps figure.wp-block-table { margin: 2em 0; }
.adb-corps table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.adb-corps th { font: 500 11px/1.3 var(--adb-mono); text-transform: uppercase; letter-spacing: .07em; text-align: left; background: var(--adb-encre); color: var(--adb-craie); padding: 10px 14px; }
.adb-corps td { padding: 11px 14px; border-top: 1px solid var(--adb-filet); }
.adb-corps tr:has(mark.adb-retenu) td { background: var(--adb-craie); font-weight: 650; }
.adb-corps tr:has(mark.adb-retenu) td:first-child { box-shadow: inset 5px 0 0 var(--adb-isorel); }
mark.adb-retenu { background: none; color: inherit; }
.adb-corps figcaption { font: 500 12px/1.5 var(--adb-mono); color: var(--adb-encre-douce); margin-top: 8px; }

.adb-corps blockquote { margin: 2em 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--adb-isorel); }
.adb-corps blockquote p { font: 400 23px/1.35 var(--adb-serif); margin: 0; }

.adb-cas { border: 1px solid var(--adb-encre); }
.adb-cas > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr; }
/* le verdict de Thierry sort de la colonne : une scène de panneau, deux étiquettes accrochées */
.adb-corps .adb-cas {
    width: 100vw; margin: 1.4em 0 2em calc(50% - 50vw); border: 0; border-block: 22px solid var(--adb-isorel-fonce);
    background: var(--adb-isorel) var(--adb-isorel-trous) 0 0 / 32px 32px; padding: clamp(36px, 5vw, 64px) var(--adb-marge);
}
.adb-corps .adb-cas > .wp-block-group__inner-container { max-width: 900px; margin: 0 auto; gap: 26px; }
.adb-corps .adb-seul, .adb-corps .adb-appel { background: var(--adb-craie); border: 0; box-shadow: 0 2px 3px rgba(44, 31, 20, .25), 0 14px 26px rgba(44, 31, 20, .3); padding: 24px 26px 10px; }
.adb-appel { border-left: 1px solid var(--adb-encre); }
.adb-seul::before { content: "Je le fais si"; color: var(--adb-fais); }
.adb-appel::before { content: "J’appelle un pro si"; color: var(--adb-pro); }
.adb-seul ul.wp-block-list > li::before { border-color: var(--adb-fais); }
.adb-appel ul.wp-block-list > li::before { border-color: var(--adb-pro); }

.adb-corps details { border-top: 1px solid var(--adb-filet); padding: 4px 0; margin: 0; }
.adb-corps details:last-of-type { border-bottom: 1px solid var(--adb-filet); margin-bottom: 1.2em; }
.adb-corps summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 10px 0; }
.adb-corps summary::-webkit-details-marker { display: none; }
.adb-corps summary::after { content: "+"; font: 500 20px/1 var(--adb-mono); transition: transform .2s ease-out; }
.adb-corps details[open] summary::after { transform: rotate(45deg); }
.adb-question { margin: 0 !important; font: 700 20px/1.3 var(--adb-texte) !important; }

.adb-corps .adb-schema { margin: 2.2em 0; background: var(--adb-craie); border: 1px solid var(--adb-filet); padding: 18px; }

/* --- Dans le même tiroir --------------------------------------------------------- */

.adb-voisins { border-top: 1px solid var(--adb-encre); padding: clamp(40px, 5vw, 64px) var(--adb-marge) clamp(56px, 7vw, 96px); max-width: 1440px; margin: 0 auto; }
.adb-voisins h2 { margin: 0 0 28px; font: 400 clamp(28px, 3vw, 40px)/1.05 var(--adb-serif); }
.adb-voisins-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* --- Rayon (rubrique, recherche) ------------------------------------------------- */

.adb-rayon-tete { position: relative; background: var(--adb-isorel) var(--adb-isorel-trous) 0 0 / 32px 32px; color: var(--adb-craie); }
.adb-rayon-tete-dedans { position: relative; z-index: 1; padding: clamp(44px, 6vw, 90px) var(--adb-marge) clamp(52px, 6vw, 96px); max-width: 860px; }
.adb-rayon-titre { margin: 0; font: 400 clamp(46px, 8vw, 124px)/.95 var(--adb-serif); letter-spacing: -.03em; text-shadow: 0 2px 0 rgba(44, 31, 20, .3); }
.adb-rayon-intro { font-size: 19px; max-width: 34em; margin-top: 18px; }
.adb-rayon-intro p { margin: 0; }
.adb-rayon-compte { margin: 22px 0 0; font: 500 13px/1.4 var(--adb-mono); }
.adb-rayon-tete .adb-chercher { margin-top: 24px; }
.adb-rayon-tete .adb-chercher label { color: var(--adb-craie); }
.adb-outil-rayon { position: absolute; z-index: 3; right: clamp(24px, 10vw, 200px); bottom: -90px; height: clamp(230px, 30vw, 420px); }
.adb-outil-rayon .adb-outil-silhouette { display: none; }
.adb-rayon-tete > .adb-chant { position: relative; }

.adb-rayon-liste { max-width: 1120px; margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--adb-marge) 24px; }
.adb-rayon-liste .adb-ligne { grid-template-columns: minmax(150px, 280px) 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--adb-filet); align-items: center; }
.adb-rayon-liste .adb-ligne-titre { font-size: clamp(22px, 2.2vw, 28px); }
.adb-rayon-vide { font-size: 19px; }

.adb-pages { max-width: 1120px; margin: 0 auto; padding: 10px var(--adb-marge) 80px; }
.adb-pages ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
.adb-pages li a, .adb-pages li span { display: block; min-width: 44px; padding: 12px 14px; border: 1px solid var(--adb-encre); margin-left: -1px; font: 500 14px/1 var(--adb-mono); text-align: center; text-decoration: none; }
.adb-pages .current { background: var(--adb-encre); color: var(--adb-craie); }

/* --- Pages et 404 ----------------------------------------------------------------- */

.adb-feuille { padding-top: clamp(40px, 6vw, 80px); }
.adb-feuille-titre { max-width: 720px; margin: 0 auto 30px; padding: 0 var(--adb-marge); box-sizing: content-box; font: 400 clamp(38px, 5vw, 64px)/1 var(--adb-serif); letter-spacing: -.02em; }

.adb-egare { background: var(--adb-isorel) var(--adb-isorel-trous) 0 0 / 32px 32px; color: var(--adb-craie); }
.adb-egare-dedans { display: flex; gap: clamp(30px, 6vw, 90px); align-items: center; padding: 70px var(--adb-marge); max-width: 1100px; margin: 0 auto; }
.adb-outil-absent { height: 320px; flex: none; }
.adb-egare h1 { font: 400 clamp(36px, 5vw, 64px)/1 var(--adb-serif); margin: 0 0 16px; }
.adb-egare .adb-chercher label { color: var(--adb-craie); }

/* --- Socle (pied) : le râtelier de silhouettes, puis le mot de Thierry ---------- */

.adb-socle { background: var(--adb-encre); color: var(--adb-craie); padding-bottom: 26px; }
.adb-socle-rail {
    list-style: none; margin: 0; padding: 34px var(--adb-marge) 24px; display: flex; justify-content: center; align-items: flex-end;
    gap: clamp(16px, 4vw, 54px); border-bottom: 1px solid rgba(244, 241, 234, .12);
}
.adb-socle-rail li { height: 62px; background: var(--adb-isorel); -webkit-mask: var(--adb-masque) center / contain no-repeat; mask: var(--adb-masque) center / contain no-repeat; }
.adb-socle-colonnes { display: grid; grid-template-columns: 5fr 4fr 2fr; gap: 48px; padding: 42px var(--adb-marge) 34px; max-width: 1320px; margin: 0 auto; }
.adb-socle-site { margin: 0 0 14px; font: 400 28px/1 var(--adb-serif); letter-spacing: -.01em; }
.adb-socle-mot p:not([class]) { margin: 0; max-width: 34em; color: #D8D1C4; }
.adb-socle-signe { margin: 12px 0 0; font: 400 20px/1 var(--adb-serif); color: #C7A47E; }
.adb-socle-titre { margin: 4px 0 12px; font: 500 12px/1 var(--adb-mono); text-transform: uppercase; letter-spacing: .08em; color: #BFB4A3; }
.adb-socle ul { list-style: none; margin: 0; padding: 0; }
.adb-socle-rubriques ul { columns: 2; column-gap: 26px; }
.adb-socle li { margin: 0 0 7px; break-inside: avoid; }
.adb-socle a { text-decoration: none; }
.adb-socle a:hover { text-decoration: underline; }
.adb-socle :focus-visible { outline-color: var(--adb-craie); }
.adb-socle-bas { max-width: 1320px; margin: 0 auto; padding: 18px var(--adb-marge) 0; border-top: 1px solid rgba(244, 241, 234, .12); font: 500 12px/1.6 var(--adb-mono); color: #A99F90; }

/* --- Tablette ------------------------------------------------------------------- */

@media (max-width: 980px) {
    .adb-casiers a { font-size: 11px; letter-spacing: .02em; }
    .adb-signature { display: none; }
    .adb-chercher-enseigne { width: 280px; }
    .adb-panneau-crochets { grid-template-columns: repeat(3, 1fr); gap: 54px 20px; }
    .adb-tiroirs { grid-template-columns: 1fr 1fr; }
    .adb-voisins-liste { grid-template-columns: 1fr 1fr; }
    .adb-socle-colonnes { grid-template-columns: 1fr 1fr; }
    .adb-socle-mot { grid-column: 1 / -1; }
}

/* --- Téléphone ------------------------------------------------------------------- */

@media (max-width: 680px) {
    body { font-size: 17px; }
    .adb-enseigne-haut { flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 14px; }
    .adb-enseigne-haut { gap: 2px; padding-block: 10px; }
    .adb-marque { flex: 1 1 auto; min-width: 0; }
    .adb-marque a { gap: 10px; }
    .adb-marque-logo { width: 40px; height: 40px; }
    .adb-nom { font-size: 22px; }
    .adb-chercher-enseigne { display: none; }
    .adb-ouvrir-recherche { display: inline-flex; margin-left: auto; }
    .adb-ouvrir-casiers { display: inline-flex; }
    .adb-ouvrir-casiers span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .adb-js .adb-casiers { display: none; }
    .adb-js .adb-casiers.adb-ouvert { display: block; }
    .adb-casiers ul { grid-template-columns: repeat(3, 1fr); padding: 0; }
    .adb-casiers li + li { box-shadow: none; }
    .adb-casiers li { box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .28); }
    .adb-casiers a { min-height: 76px; }

    .adb-etabli { display: block; padding-right: 0; }
    .adb-tuto-tete { display: flex; flex-direction: column; padding-right: 0; }
    .adb-tuto-photo { order: -1; }
    .adb-etabli-photo img { aspect-ratio: 3 / 2; }
    .adb-etabli-sur { display: inline-block; background: var(--adb-notice); padding: 6px 10px 2px 0; margin-bottom: 10px; }
    .adb-fiche-chantier { padding: 30px 18px 20px; }
    .adb-etabli-photo, .adb-tuto-photo { margin: 0 0 0 calc(var(--adb-marge) * -1); }
    .adb-etabli-texte, .adb-tuto-tete-texte { margin-top: -54px; position: relative; padding-right: var(--adb-marge); }
    .adb-etabli-titre { font-size: clamp(36px, 10.5vw, 48px); }
    .adb-etabli-chapo, .adb-tuto-chapo { font-size: 17px; }
    .adb-etiquette dl { gap: 14px 0; }
    .adb-cote { padding-right: 16px; margin-right: 16px; }
    .adb-cote .adb-picto { width: 26px; height: 26px; }
    .adb-cote dd { font-size: 15px; }
    .adb-etabli { padding-bottom: 210px; }

    .adb-panneau-vedette { left: auto; right: 18px; top: -180px; }
    .adb-outil-vedette { height: 220px; }
    .adb-panneau-crochets { grid-template-columns: repeat(3, 1fr); gap: 40px 10px; }
    .adb-outil-crochet { height: 112px; }
    .adb-crochet-nom { font-size: 12px; margin-top: 16px; }

    .adb-tiroirs { grid-template-columns: 1fr; }
    .adb-attention, .adb-erreur { padding-left: 70px; }
    .adb-attention::after, .adb-erreur::after { left: 16px; width: 38px; height: 36px; }
    .adb-tuto-panneau-dedans { flex-direction: column; align-items: stretch; }
    .adb-outil-fiche { display: none; }
    .adb-materiel > .wp-block-group__inner-container, .adb-cas > .wp-block-group__inner-container { grid-template-columns: 1fr; }
    .adb-facultatif { border-left: 0; border-top: 1px dashed rgba(27, 24, 21, .3); }
    ol.adb-etapes > li { padding-left: 48px; }
    ol.adb-etapes > li::before { font-size: 32px; }

    .adb-rayon-tete-dedans { padding-right: 38%; }
    .adb-outil-rayon { right: 16px; bottom: -60px; height: 200px; }
    .adb-rayon-liste .adb-ligne { grid-template-columns: 112px 1fr; gap: 16px; padding: 18px 0; align-items: start; }
    .adb-rayon-liste .adb-ligne-titre { font-size: 19px; }
    .adb-voisins-liste { grid-template-columns: 1fr; }
    .adb-egare-dedans { flex-direction: column; align-items: flex-start; }
    .adb-outil-absent { height: 200px; }
    .adb-socle-colonnes { grid-template-columns: 1fr; }
    .adb-socle-rail { gap: 12px; flex-wrap: wrap; }
    .adb-socle-rail li { height: 40px; }
    .adb-panneau-niveau { width: 210px; bottom: -48px; }
    .adb-corps .adb-cas > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

/* --- Formulaire de contact (WPForms) aux couleurs de l'atelier ------------------ */

.adb-corps .wpforms-container {
    --wpforms-field-background-color: #F4F1EA; --wpforms-field-border-color: rgba(27, 24, 21, .55); --wpforms-field-border-radius: 2px;
    --wpforms-field-text-color: #1B1815; --wpforms-label-color: #1B1815; --wpforms-label-sublabel-color: #4A4138;
    --wpforms-button-background-color: #22402F; --wpforms-button-text-color: #F4F1EA; --wpforms-button-border-radius: 3px;
    --wpforms-page-break-color: #22402F;
    margin: 2em 0;
}
.adb-corps .wpforms-container .wpforms-field-label { font: 650 15px/1.3 var(--adb-texte); }
.adb-corps .wpforms-container input, .adb-corps .wpforms-container select, .adb-corps .wpforms-container textarea { font-family: var(--adb-texte) !important; font-size: 16px !important; }
.adb-corps .wpforms-container input:focus, .adb-corps .wpforms-container select:focus, .adb-corps .wpforms-container textarea:focus { border-color: #22402F !important; box-shadow: 0 0 0 2px rgba(34, 64, 47, .25) !important; }
.adb-corps .wpforms-container button[type="submit"] {
    background: var(--adb-vert) !important; color: var(--adb-craie) !important; border: 0 !important; border-radius: 3px !important;
    font: 600 15px/1 var(--adb-texte) !important; padding: 15px 24px !important; height: auto !important; box-shadow: 0 3px 0 #142A1F !important;
}
.adb-corps .wpforms-container button[type="submit"]:hover { background: #2D5440 !important; }
.adb-corps .wpforms-container .wpforms-required-label { color: var(--adb-pro); }

/* --- Étapes et matériel à cocher -------------------------------------------------- */

.adb-cochable { cursor: pointer; transition: opacity .2s ease-out; -webkit-tap-highlight-color: transparent; }
.adb-cochable:focus-visible { outline-offset: 4px; }
.adb-cochable.adb-fait { opacity: .55; }
.adb-cochable.adb-fait strong { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--adb-vert); }
ol.adb-etapes > li.adb-fait::before { color: var(--adb-vert); }   /* le numéro reste, la case à droite porte la coche */
.adb-materiel ul.wp-block-list > li.adb-fait::before {
    background: var(--adb-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' fill='none' stroke='%23F4F1EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
    border-color: var(--adb-vert);
}
.adb-coche-aide { margin: -.4em 0 1.6em; font: 500 12px/1.5 var(--adb-mono); color: var(--adb-encre-douce); }
.adb-coche-aide button { font: inherit; color: var(--adb-vert); background: none; border: 0; padding: 0 0 0 6px; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* --- La boîte à outils de Thierry -------------------------------------------------- */

.adb-cta-boite {
    margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 3px;
    background: var(--adb-isorel); color: var(--adb-craie); text-decoration: none; font: 600 14px/1 var(--adb-texte);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 0 #4F3A27; transition: background-color .2s ease-out;
}
.adb-cta-boite:hover, .adb-cta-boite[aria-current="page"] { background: #B08862; }
.adb-cta-boite .adb-picto { width: 24px; height: 24px; }
.adb-cta-boite + .adb-chercher-enseigne { margin-left: 0; }

.adb-boite-scene { background: var(--adb-notice); padding: clamp(56px, 7vw, 100px) var(--adb-marge); }
.adb-boite-scene-dedans { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.adb-boite-scene-image { width: 112%; max-width: none; margin-left: -6%; filter: drop-shadow(0 18px 18px rgba(44, 31, 20, .2)); }
.adb-boite-scene-texte h2 { margin: 0 0 14px; font: 400 clamp(32px, 3.6vw, 52px)/1.02 var(--adb-serif); letter-spacing: -.02em; }
.adb-boite-scene-texte > p { margin: 0 0 22px; font-size: 18px; color: var(--adb-encre-douce); max-width: 30em; }
.adb-boite-scene-phares { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adb-boite-scene-phares li { display: flex; align-items: center; gap: 10px; background: var(--adb-craie); padding: 8px 12px 8px 8px; font: 400 15px/1.2 var(--adb-serif); box-shadow: 0 1px 2px rgba(44, 31, 20, .15); }
.adb-boite-scene-phares img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.adb-bouton-boite, .adb-bouton-amazon {
    display: inline-block; padding: 14px 22px; border-radius: 3px; background: var(--adb-vert); color: var(--adb-craie); text-decoration: none;
    font: 600 15px/1 var(--adb-texte); box-shadow: 0 3px 0 #142A1F; transition: background-color .2s ease-out;
}
.adb-bouton-boite:hover, .adb-bouton-amazon:hover { background: #2D5440; }

.adb-boite-tete { max-width: 1320px; margin: 0 auto; padding: clamp(36px, 5vw, 70px) var(--adb-marge) clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.adb-boite-titre { margin: 0 0 18px; font: 400 clamp(40px, 5vw, 76px)/1 var(--adb-serif); letter-spacing: -.025em; }
.adb-boite-intro p { margin: 0 0 1em; font-size: 18px; }
.adb-boite-mention { margin: 0; font: 500 12px/1.5 var(--adb-mono); color: var(--adb-encre-douce); max-width: 46em; }
.adb-boite-tete-image { width: 100%; filter: drop-shadow(0 18px 18px rgba(44, 31, 20, .2)); }

.adb-boite-filtres { max-width: 1320px; margin: 0 auto; padding: 0 var(--adb-marge) 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.adb-boite-filtres button {
    font: 600 13px/1 var(--adb-texte); padding: 10px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(27, 24, 21, .35); background: transparent; color: var(--adb-encre);
}
.adb-boite-filtres button[aria-pressed="true"] { background: var(--adb-vert); border-color: var(--adb-vert); color: var(--adb-craie); }

.adb-boite-rayonnage { max-width: 1320px; margin: 0 auto; padding: 0 var(--adb-marge) clamp(64px, 8vw, 110px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.adb-outil-fiche-boite { display: flex; flex-direction: column; background: var(--adb-craie); padding: 18px 20px 20px; box-shadow: 0 1px 2px rgba(44, 31, 20, .15), 0 10px 22px rgba(44, 31, 20, .1); }
.adb-outil-fiche-boite[hidden] { display: none; }
.adb-outil-fiche-image { position: relative; background: #fff; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 16px; }
.adb-outil-fiche-image img { position: absolute; inset: 7% 11%; width: 78%; height: 86%; object-fit: contain; }
.adb-tampon-outil { position: absolute; right: 10px; top: 12px; color: var(--adb-vert); font-size: 12px; padding: 5px 10px 6px; background: rgba(255, 255, 255, .7); }
.adb-outil-fiche-nom { margin: 0; font: 400 22px/1.15 var(--adb-serif); }
.adb-outil-fiche-famille { margin: 6px 0 0; font: 500 11px/1.3 var(--adb-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--adb-encre-douce); }
.adb-outil-fiche-avis { margin-top: 12px; font-size: 15.5px; }
.adb-outil-fiche-avis p { margin: 0 0 .7em; }
.adb-outil-fiche-pourqui { margin: 0 0 16px; font-size: 14.5px; color: var(--adb-encre-douce); }
.adb-outil-fiche-actions { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.adb-outil-fiche-tuto { font: 500 13px/1.3 var(--adb-mono); color: var(--adb-vert); }

@media (max-width: 980px) {
    .adb-boite-rayonnage { grid-template-columns: 1fr 1fr; }
    .adb-cta-boite span { display: none; }
}
@media (max-width: 680px) {
    .adb-cta-boite { padding: 8px; margin-left: auto; }
    .adb-boite-scene-dedans, .adb-boite-tete { grid-template-columns: 1fr; }
    .adb-boite-scene-image { width: 100%; margin: 0; }
    .adb-boite-tete-image { order: -1; }
    .adb-boite-rayonnage { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .adb-enseigne-haut { flex-wrap: nowrap; gap: 0; }
    .adb-marque-logo { width: 36px; height: 36px; }
    .adb-marque a { gap: 9px; }
    .adb-nom { font-size: 19px; white-space: nowrap; }
    .adb-cta-boite { margin: 0 4px 0 auto; }
    .adb-cta-boite + .adb-chercher-enseigne + .adb-ouvrir-recherche { margin-left: 0; }
}

/* les étapes se signalent comme cochables : une case ronde à droite, une consigne au-dessus */
ol.adb-etapes > li.adb-cochable { padding-right: 48px; }
ol.adb-etapes > li.adb-cochable::after {
    content: ""; position: absolute; right: 4px; top: 18px; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid rgba(34, 64, 47, .45); transition: background-color .2s ease-out, border-color .2s ease-out;
}
ol.adb-etapes > li.adb-cochable:hover::after { border-color: var(--adb-vert); background: rgba(34, 64, 47, .08); }
ol.adb-etapes > li.adb-cochable.adb-fait::after {
    border-color: var(--adb-vert);
    background: var(--adb-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.7 3.7 7.3-8' fill='none' stroke='%23F4F1EA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.adb-coche-consigne {
    display: flex; align-items: center; gap: 8px; margin: 0 0 -1.2em !important; justify-content: flex-end;
    font: 500 12px/1.4 var(--adb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--adb-vert);
}
.adb-coche-consigne::after {
    content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--adb-vert);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.7 3.7 7.3-8' fill='none' stroke='%2322402F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}