:root{--accent:#2f4e6b;--accent-cote:#1c3247;--accent-haut:#86a3be;--c1-cote:#2f4e6b;--c1-haut:#94b0ca;--c2-cote:#c89914;--c2-haut:#f5d469;--c3-cote:#89939b;--c3-haut:#d5dade;--c4-cote:#c25b27;--c4-haut:#f2a477;--dalle-cote:#b4bec7;--dalle-haut:#ffffff;--doux:#4b5967;--filet:#c3cad1;--fond:#eceeef;--ombre:#aeb7bf;--police-texte:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",source-sans-pro,sans-serif;--police-titre:Avenir,Montserrat,Corbel,"URW Gothic",source-sans-pro,sans-serif;--relief:#ffffff;--socle:#273644;--socle-cote:#18222c;--socle-doux:#c0ccd6;--socle-haut:#4b6073;--socle-pres:#36495a;--socle-texte:#f4f7f9;--sur-accent:#ffffff;--surface:#fbfcfc;--teinte:#dde7f0;--texte:#1b2632;--trame:#dde1e4;}
/* Isométrie (t2b140) : blog de maison et de chantier en blocs vus en perspective. Chaque article est un bloc : face avant
   claire pour le texte, dessus et côté en deux teintes (lumière venue de gauche), ombre portée au sol ; les blocs s'empilent
   en rangées décalées d'une demi-colonne sur un papier de dessin isométrique (lignes à 30°, 90° et 150°). Un bloc est un
   élément dont le ::before dessine les trois faces (conic-gradient découpé par clip-path) : --d est la profondeur des faces,
   --haut, --face et --cote leurs couleurs. Variables des options : --fond --trame --surface --texte --doux --filet --accent
   --accent-haut --accent-cote --teinte --sur-accent --dalle-haut --dalle-cote --c1-haut à --c4-cote --ombre --relief --socle
   --socle-haut --socle-pres --socle-cote --socle-texte --socle-doux (palette), --police-titre --police-texte (typo).
   Polices système seulement, aucune ressource externe. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--texte);font-family:var(--police-texte);font-size:1rem;line-height:1.6;overflow-wrap:break-word;background-color:var(--fond);background-image:linear-gradient(to top right,transparent calc(50% - .7px),var(--trame) 0 calc(50% + .7px),transparent 0),linear-gradient(to bottom right,transparent calc(50% - .7px),var(--trame) 0 calc(50% + .7px),transparent 0),linear-gradient(90deg,var(--trame) 1px,transparent 0);background-size:52px 30px,52px 30px,26px 30px}
main{flex:1 0 auto}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--police-titre);line-height:1.2;margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.evitement{position:absolute;left:1rem;top:-12rem;z-index:30;padding:.75rem 1rem;background:var(--surface);color:var(--accent);font-weight:700;border:2px solid var(--accent)}
.evitement:focus{top:1rem}
.entete,.principal,.pied{width:min(100% - 2rem,78rem);margin-inline:auto}

/* Bloc : trois faces dessinées sous le contenu (arête dessus-côté adoucie), cadre fin de la face avant */
.dalle,.caisse,.pave,.poutre,.panneau,.socle,.marque-cube,.caisse-vue .caisse-rang{position:relative;isolation:isolate}
.dalle::before,.caisse::before,.pave::before,.poutre::before,.panneau::before,.socle::before,.marque-cube::before,.caisse-vue .caisse-rang::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(0 var(--d),var(--d) 0,100% 0,100% calc(100% - var(--d)),calc(100% - var(--d)) 100%,0 100%);background:conic-gradient(from 45deg at calc(100% - var(--d)) var(--d),var(--cote) 0 135deg,var(--face) 0 225deg,var(--haut) 0 358deg,var(--cote))}
.dalle::after,.caisse::after,.poutre::after,.panneau::after,.tas span::after{content:"";position:absolute;left:0;bottom:0;width:calc(100% - var(--d));height:calc(100% - var(--d));border:1px solid var(--filet);pointer-events:none}
.tas span,.enseigne-mention::before,.texte h2::before{clip-path:polygon(0 var(--d),var(--d) 0,100% 0,100% calc(100% - var(--d)),calc(100% - var(--d)) 100%,0 100%);background:conic-gradient(from 45deg at calc(100% - var(--d)) var(--d),var(--cote) 0 135deg,var(--face) 0 225deg,var(--haut) 0 358deg,var(--cote))}

/* En-tête : dalle claire, marque en cube, menu en pavés */
.entete{margin-top:1rem}
.dalle{--d:.5rem;--haut:var(--dalle-haut);--face:var(--surface);--cote:var(--dalle-cote);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding:calc(var(--d) + .7rem) calc(var(--d) + .75rem) .75rem .75rem;filter:drop-shadow(.2rem .3rem .25rem var(--ombre))}
.marque{display:flex;align-items:center;gap:.7rem;min-width:0;color:var(--texte);text-decoration:none;font-family:var(--police-titre);font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1.15}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:2px}
.marque-cube{--d:.55rem;--haut:var(--accent-haut);--face:var(--teinte);--cote:var(--accent-cote);flex:none;display:grid;place-items:center;width:calc(2.75rem + var(--d));height:calc(2.75rem + var(--d));padding:var(--d) var(--d) 0 0}
.marque-image{display:block;width:2.25rem;height:2.25rem}
.marque-initiale{font-size:1.4rem;color:var(--accent)}
.marque-nom{font-size:1rem;min-width:0;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:8 4 4}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}

/* Pavés en relief : menu, pagination, retour */
.pave{--d:.4rem;--haut:var(--accent-haut);--face:var(--teinte);--cote:var(--accent-cote);display:inline-flex;align-items:center;justify-content:center;min-width:calc(2.75rem + var(--d));min-height:calc(2.75rem + var(--d));padding:calc(var(--d) + .4rem) calc(var(--d) + .85rem) .4rem .85rem;color:var(--texte);font-family:var(--police-titre);font-size:.8rem;font-weight:700;letter-spacing:.07em;line-height:1.2;text-align:center;text-transform:uppercase;text-decoration:none}
.pave:hover{text-decoration:underline;text-underline-offset:.2em}
.menu [aria-current]{padding:.4rem .85rem calc(var(--d) + .4rem) calc(var(--d) + .85rem);color:var(--sur-accent)}
.menu [aria-current]::before{clip-path:inset(0 0 var(--d) var(--d));background:var(--accent)}

/* Accueil : enseigne (h1), une, pile de blocs */
.tete{display:grid;gap:1.5rem;margin-top:2rem}
.enseigne{container-type:inline-size;display:flex;flex-direction:column}
.enseigne-titre{font-size:clamp(1.6rem,6vw,3rem);font-size:clamp(1.6rem,8cqi,3.2rem);font-weight:800;line-height:1.04;text-transform:uppercase;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:8 4 4}
.enseigne-mention{display:flex;align-items:center;gap:.6rem;margin:.75rem 0 0;color:var(--doux);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.enseigne-mention::before{--d:.3rem;--haut:var(--c2-haut);--face:var(--surface);--cote:var(--c2-cote);content:"";flex:none;width:1.25rem;height:1.25rem}
.tas{display:none}
.vide{margin:0;color:var(--doux)}
.une,.pile{list-style:none;margin:0;padding:0}
.pile{display:grid;gap:1.25rem;margin-top:1.5rem}
.caisse{--d:.5rem;--p:.9rem;--face:var(--surface);--haut:var(--c1-haut);--cote:var(--c1-cote);display:flex;flex-direction:column;padding:calc(var(--d) + var(--p)) calc(var(--d) + var(--p)) var(--p) var(--p);filter:drop-shadow(.25rem .35rem .3rem var(--ombre));transition:transform .2s ease}
.caisse:hover{transform:translateY(-.2rem)}
.pile>li:nth-child(4n+2){--haut:var(--c2-haut);--cote:var(--c2-cote)}
.pile>li:nth-child(4n+3){--haut:var(--c3-haut);--cote:var(--c3-cote)}
.pile>li:nth-child(4n){--haut:var(--c4-haut);--cote:var(--c4-cote)}
.caisse.caisse-une{--d:1rem;--p:1rem;--haut:var(--accent-haut);--cote:var(--accent-cote)}
.caisse-vue{position:relative;margin:calc(-1 * var(--p)) calc(-1 * var(--p)) var(--p);border-bottom:1px solid var(--filet)}
.caisse-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--fond)}
.caisse-vue .caisse-rang{--d:.4rem;--face:var(--surface);position:absolute;left:.6rem;bottom:.6rem;min-width:calc(2.3rem + var(--d));padding:calc(var(--d) + .2rem) calc(var(--d) + .4rem) .2rem .4rem;color:var(--texte);font-family:var(--police-titre);font-size:.95rem;font-weight:800;line-height:1.5;text-align:center}
.caisse-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}
.caisse-initiale{font-family:var(--police-titre);font-size:4.25rem;font-weight:900;line-height:.92;color:var(--fond);text-shadow:-1px -1px 0 var(--ombre),1px 1px 0 var(--relief)}
.caisse-tete .caisse-rang{font-family:var(--police-titre);font-size:2.2rem;font-weight:800;line-height:1;color:var(--accent)}
.caisse-mention{align-self:flex-start;margin:0 0 .7rem;padding:.2rem .55rem;background:var(--accent);color:var(--sur-accent);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:1px -1px 0 var(--accent-cote),2px -2px 0 var(--accent-cote),3px -3px 0 var(--accent-cote)}
.caisse-titre{margin:0 0 .35rem;font-size:1.05rem;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.caisse-titre a{color:var(--texte);text-decoration:none}
.caisse-titre a::after{content:"";position:absolute;inset:0;z-index:1}
.caisse-titre a:hover{text-decoration:underline}
.caisse-date{margin:0 0 .45rem;color:var(--doux);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.caisse-extrait{margin:0;font-size:.9rem;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.caisse-une .caisse-titre{font-size:clamp(1.3rem,2.3vw,1.85rem);letter-spacing:0;line-height:1.15}
.caisse-une .caisse-extrait{font-size:1rem;-webkit-line-clamp:4}
.caisse-une .caisse-initiale{font-size:6rem}

/* Pagination : petits cubes numérotés */
.pagination{margin-top:2.75rem}
.pagination ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.pave-num{font-size:1rem;font-weight:800;letter-spacing:0}
.pagination [aria-current]{--face:var(--accent);color:var(--sur-accent)}

/* Pied : le socle, dalle sombre, liens posés dessus, domaine sur la tranche */
.pied{margin-top:4rem;padding-bottom:1.75rem}
.socle{--d:.75rem;--haut:var(--socle-haut);--face:var(--socle);--cote:var(--socle-cote);padding:calc(var(--d) + 1rem) calc(var(--d) + 1.25rem) 1rem 1.25rem;filter:drop-shadow(.3rem .45rem .45rem var(--ombre))}
.socle-liens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 2rem}
.socle-liens a{display:flex;align-items:center;min-height:2.75rem;color:var(--socle-texte);font-family:var(--police-titre);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.socle-liens a:hover{text-decoration:underline}
.socle-tranche{margin:.75rem 0 0;color:var(--socle-doux);font-size:.75rem;letter-spacing:.14em}
.pied :focus-visible{outline-color:var(--socle-texte)}

/* Article et pages : poutre de titre, panneau de lecture */
.ouvrage{margin-top:2rem}
.poutre{--d:.5rem;--haut:var(--accent-haut);--face:var(--surface);--cote:var(--accent-cote);padding:calc(var(--d) + .9rem) calc(var(--d) + .85rem) .9rem .85rem;filter:drop-shadow(.25rem .35rem .3rem var(--ombre))}
.poutre-titre{font-size:clamp(1.1rem,5.2vw,2.5rem);font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.poutre-suite{color:var(--doux);font-weight:600;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:8 4 4}
.poutre-date{margin:.6rem 0 0;color:var(--doux);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.panneau{--d:.5rem;--haut:var(--dalle-haut);--face:var(--surface);--cote:var(--dalle-cote);max-width:44rem;margin:2rem auto 0;padding:calc(var(--d) + 1.25rem) calc(var(--d) + 1.1rem) 1.25rem 1.1rem;line-height:1.7;filter:drop-shadow(.2rem .3rem .3rem var(--ombre))}
.texte>:first-child{margin-top:0}
.texte>:last-child{margin-bottom:0}
.texte p,.texte ul,.texte ol{margin:0 0 1.1em}
.texte a{overflow-wrap:anywhere}
.texte h2{display:flex;align-items:center;gap:.65rem;margin:1.8em 0 .6em;font-size:1.3rem}
.texte h2::before{--d:.3rem;--haut:var(--accent-haut);--face:var(--accent);--cote:var(--accent-cote);content:"";flex:none;width:1.15rem;height:1.15rem}
.texte h3{margin:1.5em 0 .5em;font-size:1.1rem}
.texte img{--d:.5rem;display:block;width:100%;margin:1.75rem 0;padding:var(--d) var(--d) 0 0;background:conic-gradient(from 45deg at calc(100% - var(--d)) var(--d),var(--accent-cote) 0 135deg,transparent 0 225deg,var(--accent-haut) 0 358deg,var(--accent-cote));clip-path:polygon(0 var(--d),var(--d) 0,100% 0,100% calc(100% - var(--d)),calc(100% - var(--d)) 100%,0 100%)}
.texte iframe{display:block}
.vue-article .texte p:has(>a:only-child){--d:.3rem;--haut:var(--accent-haut);--face:var(--fond);--cote:var(--accent-cote);position:relative;isolation:isolate;padding:calc(var(--d) + .5rem) calc(var(--d) + .8rem) .5rem .8rem;font-size:.92rem;line-height:1.5}
.vue-article .texte p:has(>a:only-child)::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(0 var(--d),var(--d) 0,100% 0,100% calc(100% - var(--d)),calc(100% - var(--d)) 100%,0 100%);background:conic-gradient(from 45deg at calc(100% - var(--d)) var(--d),var(--cote) 0 135deg,var(--face) 0 225deg,var(--haut) 0)}
.page-contact .panneau{--haut:var(--accent-haut);--cote:var(--accent-cote)}
.page-plan_du_site .panneau{max-width:none}
.page-plan_du_site .texte>ul{list-style:none;padding:0;columns:17rem 3;column-gap:2.5rem}
.page-plan_du_site .texte>ul li{break-inside:avoid;position:relative;padding-left:1.1rem}
.page-plan_du_site .texte>ul li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;background:var(--accent);box-shadow:1px -1px 0 var(--accent-cote),2px -2px 0 var(--accent-cote)}
.page-plan_du_site .texte>ul a{display:inline-block;padding:.3rem 0}
.texte nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.texte nav a,.texte nav b{display:inline-block;padding:.6rem 0}
.retour{max-width:44rem;margin:2rem auto 0;text-align:center}

/* 404 : la place d'un cube absent, arêtes en pointillés */
.principal-404{text-align:center}
.absent{--s:7rem;--p:3rem;position:relative;width:calc(var(--s) + var(--p));height:calc(var(--s) + var(--p));margin:3rem auto 2rem}
.absent::before,.absent::after{content:"";position:absolute;width:var(--s);height:var(--s);border:2px dashed var(--doux)}
.absent::before{left:0;bottom:0}
.absent::after{right:0;top:0}
.absent span::before,.absent span::after{content:"";position:absolute;width:4.243rem;border-top:2px dashed var(--doux);transform:rotate(-45deg);transform-origin:0 0}
.absent span:first-child::before{left:0;top:var(--p)}
.absent span:first-child::after{left:var(--s);top:var(--p)}
.absent span+span::before{left:var(--s);top:calc(var(--s) + var(--p))}
.absent span+span::after{left:0;top:calc(var(--s) + var(--p))}
.absent-titre{font-size:clamp(1.7rem,5vw,2.6rem);font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.absent-texte{max-width:34rem;margin:.75rem auto 0;color:var(--doux)}

/* Téléphone : menu en trois pavés pleine largeur */
@media (max-width:39.99rem){
  .menu{width:100%}
  .menu ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .menu .pave{width:100%;height:100%;padding-inline:.4rem calc(var(--d) + .4rem);font-size:.75rem;letter-spacing:.03em}
  .menu [aria-current]{padding-inline:calc(var(--d) + .4rem) .4rem}
  .page-plan_du_site .texte>ul a{padding:.55rem 0}
}

@media (min-width:40rem){
  .entete,.principal,.pied{width:min(100% - 3rem,78rem)}
  .dalle{--d:1.25rem;padding:calc(var(--d) + .9rem) calc(var(--d) + 1.1rem) .9rem 1.1rem}
  .marque-nom{font-size:1.2rem}
  .caisse{--d:1rem;--p:1rem}
  .caisse.caisse-une{--d:1.5rem;--p:1.25rem}
  .poutre{--d:1.25rem;padding:calc(var(--d) + 1.5rem) calc(var(--d) + 1.75rem) 1.5rem 1.75rem}
  .panneau{--d:.75rem;padding:calc(var(--d) + 2rem) calc(var(--d) + 2.25rem) 2rem 2.25rem}
  .page-contact .panneau{--d:1.25rem}
  .socle{--d:1rem}
}

/* Tablette : pile de 5 demi-colonnes, deux blocs par rangée, une rangée sur deux décalée d'une demi-colonne */
@media (min-width:48rem){
  .pile{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
  .pile>li{grid-column-end:span 2}
  .pile>li:nth-child(4n+3){grid-column-start:2}
  .pile .caisse{--p:.8rem}
  .pile .caisse-titre{font-size:.95rem;letter-spacing:-.01em}
}

/* Ordinateur : la une (2 x 2) à gauche, l'enseigne à droite ; pile de 7 demi-colonnes, trois blocs par rangée */
@media (min-width:64rem){
  .tete{grid-template-columns:repeat(7,minmax(0,1fr));gap:1rem;align-items:end}
  .une,.vide{grid-column:1/span 4;grid-row:1}
  .enseigne{grid-column:5/-1;grid-row:1;align-self:stretch;padding:.5rem 0 0 1.5rem}
  .tas{--s:3.9rem;--p:1.5rem;display:block;position:relative;align-self:flex-end;width:calc(3 * var(--s) + var(--p));height:calc(3 * var(--s) + var(--p));margin-top:auto;padding-top:2rem;box-sizing:content-box;filter:drop-shadow(.25rem .35rem .3rem var(--ombre))}
  .tas span{--d:var(--p);--face:var(--surface);position:absolute;width:calc(var(--s) + var(--p));height:calc(var(--s) + var(--p))}
  .tas span:nth-child(1){left:0;bottom:0;--haut:var(--c1-haut);--cote:var(--c1-cote)}
  .tas span:nth-child(2){left:var(--s);bottom:0;--haut:var(--c2-haut);--cote:var(--c2-cote)}
  .tas span:nth-child(3){left:calc(2 * var(--s));bottom:0;--haut:var(--c3-haut);--cote:var(--c3-cote)}
  .tas span:nth-child(4){left:calc(var(--s) / 2);bottom:var(--s);--haut:var(--c4-haut);--cote:var(--c4-cote)}
  .tas span:nth-child(5){left:calc(1.5 * var(--s));bottom:var(--s);--haut:var(--c1-haut);--cote:var(--c1-cote)}
  .tas span:nth-child(6){left:var(--s);bottom:calc(2 * var(--s));--haut:var(--accent-haut);--cote:var(--accent-cote)}
  .caisse{--d:1.25rem}
  .caisse.caisse-une{--d:2.5rem;--p:1.4rem}
  .pile{grid-template-columns:repeat(7,minmax(0,1fr));margin-top:2rem}
  .pile>li:nth-child(4n+3){grid-column-start:auto}
  .pile>li:nth-child(6n+4){grid-column-start:2}
  .socle{--d:4.5rem;padding:0}
  .socle::before{background:conic-gradient(from 45deg at calc(100% - var(--d)) var(--d),var(--cote) 0 135deg,var(--face) 0 225deg,transparent 0)}
  .socle-liens{position:relative;align-items:center;justify-content:space-evenly;flex-wrap:nowrap;gap:1rem;height:var(--d);margin-right:var(--d);padding:0 .5rem 0 calc(var(--d) - .5rem)}
  .socle-liens::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-45deg);transform-origin:0 100%;background:linear-gradient(to top,var(--socle-pres),var(--socle-haut))}
  .socle-tranche{display:flex;align-items:center;height:2.5rem;margin:0 var(--d) 0 0;padding:0 1.5rem}
}

/* Grand écran : pile de 9 demi-colonnes, quatre blocs par rangée */
@media (min-width:81rem){
  .tete{grid-template-columns:repeat(9,minmax(0,1fr))}
  .tas{--s:5rem;--p:1.9rem;margin-right:1.5rem}
  .pile{grid-template-columns:repeat(9,minmax(0,1fr))}
  .pile>li:nth-child(6n+4){grid-column-start:auto}
  .pile>li:nth-child(8n+5){grid-column-start:2}
}

@media (prefers-reduced-motion:reduce){
  .caisse{transition:none}
  .caisse:hover{transform:none}
}