:root{--accent:#e2a35a;--brique:#6e3a2c;--brique-fonce:#572d23;--ciel:#0b111b;--doux:#b3aa9e;--encre-1:#f6e7da;--encre-2:#f6e7da;--encre-3:#f6e7da;--enduit:#1b222d;--etoile:#f1e6c8;--facade:#222a35;--faitage:#e2a35a;--faitiere:#8c4a33;--filet:#c9b9a6;--fond:#131922;--horizon:#1a2333;--joint:#3a3431;--police-texte:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",source-sans-pro,sans-serif;--police-titre:Inter,Roboto,"Helvetica Neue","Arial Nova","Nimbus Sans",Arial,sans-serif;--sur-accent:#1a1208;--sur-ciel:#ece5da;--sur-facade:#e3dccf;--sur-faitage:#1a1208;--texte:#ece5da;--tuile-1:#5b3127;--tuile-2:#3f2723;--tuile-3:#7a4530;--volige:#05080c;--zinc:#8a95a1;--zinc-clair:#c3cbd3;--zinc-fonce:#56606b;}
/* Tuiles (t2b146) : la page est un toit. Écailles à bas arrondi en rangées qui se recouvrent et se décalent d'une
   demi-tuile, faîtage pour la une, ciel et cheminée de briques en tête, chéneau de zinc et façade enduite en pied. */

html{--grain:radial-gradient(circle at 30% 30%,rgba(255,255,255,.1) 0 .5px,transparent 1px) 0 0/5px 5px,radial-gradient(circle at 60% 70%,rgba(0,0,0,.1) 0 .5px,transparent 1px) 0 0/7px 7px;--galbe:linear-gradient(90deg,rgba(0,0,0,.13),rgba(0,0,0,0) 24%,rgba(255,255,255,.08) 50%,rgba(0,0,0,0) 76%,rgba(0,0,0,.13));-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--fond);color:var(--texte);font-family:var(--police-texte);font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;font-family:var(--police-titre);line-height:1.15}
p{margin:0}
a{color:var(--accent);text-underline-offset:.16em}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:1rem;top:-30rem;z-index:100;padding:.75rem 1.25rem;background:var(--texte);color:var(--fond);font-weight:700}
.evitement:focus{top:1rem}

/* En-tête : le ciel, l'œil-de-bœuf, la cheminée */
.ciel{position:relative;background:radial-gradient(1.5px 1.5px at 8% 9%,var(--etoile),transparent) 0 0/19rem 100%,radial-gradient(1px 1px at 37% 15%,var(--etoile),transparent) 0 0/19rem 100%,radial-gradient(1.5px 1.5px at 64% 5%,var(--etoile),transparent) 0 0/19rem 100%,radial-gradient(1px 1px at 87% 12%,var(--etoile),transparent) 0 0/19rem 100%,linear-gradient(var(--ciel),var(--horizon));color:var(--sur-ciel);border-bottom:.3125rem solid var(--zinc)}
.ciel-interieur{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;width:min(100% - 2rem,80rem);margin:0 auto;padding:.875rem 0 .75rem}
.enseigne{flex:1 1 100%;min-width:0}
.marque{display:inline-flex;align-items:center;gap:.875rem;min-height:2.75rem;color:inherit;text-decoration:none}
.oeil{flex:none;display:block;width:3.25rem;height:3.25rem;padding:.3125rem;border-radius:50%;background:conic-gradient(from 210deg,var(--zinc-clair),var(--zinc) 30%,var(--zinc-fonce) 50%,var(--zinc) 70%,var(--zinc-clair));box-shadow:0 .125rem .3125rem rgba(0,0,0,.3)}
.oeil-verre{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--accent)}
.oeil-verre img{display:block;width:100%;height:100%}
.oeil-verre::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 .1875rem .375rem rgba(0,0,0,.5),inset 0 -.125rem .25rem rgba(255,255,255,.22)}
.marque-nom{font-family:var(--police-titre);font-weight:700;font-size:.9375rem;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;overflow-wrap:anywhere}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:2px}
.menu{flex:1 1 100%;padding-right:3.25rem}
.menu ul{display:flex;gap:.25rem;margin:0;padding:0;list-style:none}
.menu li{flex:1 1 auto;min-width:0;--ton:var(--tuile-1);--encre:var(--encre-1)}
.menu li:nth-child(3n+2){--ton:var(--tuile-2);--encre:var(--encre-2)}
.menu li:nth-child(3n){--ton:var(--tuile-3);--encre:var(--encre-3)}
.menu a{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.25rem .375rem .625rem;border-radius:0 0 50% 50%/0 0 .875rem .875rem;background:var(--grain),var(--galbe),var(--ton);color:var(--encre);font-size:.875rem;font-weight:700;line-height:1.15;text-align:center;text-decoration:none;box-shadow:0 .1875rem .25rem -.0625rem rgba(0,0,0,.3)}
.menu a[aria-current]{--ton:var(--accent);--encre:var(--sur-accent);position:relative;top:.3125rem;box-shadow:inset 0 0 0 2px var(--sur-accent),0 .1875rem .25rem -.0625rem rgba(0,0,0,.3)}
.menu a:hover{text-decoration:underline}
.menu a:focus-visible{outline-color:var(--sur-ciel)}
.cheminee{position:absolute;right:.25rem;bottom:0;width:2.25rem;height:3.5rem;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 65%,rgba(0,0,0,.28)),repeating-linear-gradient(var(--joint) 0 2px,transparent 2px .5625rem),repeating-linear-gradient(90deg,transparent 0 .6875rem,var(--joint) .6875rem .75rem),conic-gradient(var(--brique) 25%,var(--brique-fonce) 0 50%,var(--brique) 0 75%,var(--brique-fonce) 0) 0 0/1.5rem 1.125rem}
.cheminee::before{content:"";position:absolute;left:-.3125rem;right:-.3125rem;top:-.5rem;height:.5rem;border-radius:.125rem .125rem 0 0;background:linear-gradient(var(--zinc-clair),var(--zinc-fonce));box-shadow:0 .125rem .1875rem rgba(0,0,0,.35)}

/* Accueil : le fronton, puis le toit */
.principal{flex:1 0 auto;width:min(100% - 2rem,80rem);margin:0 auto}
.fronton{padding:1.75rem 0 1.5rem;text-align:center}
.fronton-mention{display:flex;align-items:center;justify-content:center;gap:.625rem;margin-bottom:.5rem;color:var(--doux);font-size:.8125rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.fronton-mention::before,.fronton-mention::after{content:"";flex:none;width:.75rem;height:.9375rem;border-radius:0 0 50% 50%/0 0 .4375rem .4375rem;background:var(--accent)}
.fronton-titre{font-size:clamp(1.75rem,.9rem + 4.4vw,4.25rem);line-height:1.05;letter-spacing:-.015em;overflow-wrap:anywhere}
.vide{padding:3rem 0;text-align:center;color:var(--doux)}
.toit{margin:1.5rem -1rem 0}
.faitage,.billet-faitage{position:relative;background:var(--grain),var(--faitage);color:var(--sur-faitage);box-shadow:0 .5rem .75rem -.25rem rgba(0,0,0,.45)}
.faitage::before,.billet-faitage::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:1.125rem;background:radial-gradient(50% 100% at 50% 100%,color-mix(in srgb,var(--faitiere),#fff 30%),var(--faitiere) 55%,color-mix(in srgb,var(--faitiere),#000 38%) 93%,transparent 97%) 0 0/2.25rem 100% round no-repeat}
.faitage{z-index:40;display:grid;gap:1.125rem;padding:1.25rem 1rem 1.5rem}
.faitage-visuel img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;outline:3px solid var(--filet);outline-offset:-3px}
.faitage-nu .faitage-visuel{display:flex;align-items:center;justify-content:center;justify-self:center;width:min(100%,9rem);aspect-ratio:4/5;padding-bottom:1rem;border-radius:0 0 50% 50%/0 0 2.5rem 2.5rem;background:var(--grain),var(--galbe),var(--tuile-2);box-shadow:0 .375rem .5rem -.25rem rgba(0,0,0,.45)}
.faitage-initiale{font-family:var(--police-titre);font-weight:700;font-size:4.5rem;line-height:1;color:color-mix(in srgb,var(--tuile-2),#000 36%);text-shadow:0 2px 0 color-mix(in srgb,var(--tuile-2),#fff 30%),0 -1px 0 color-mix(in srgb,var(--tuile-2),#000 55%)}
.faitage-texte{min-width:0;container-type:inline-size}
.faitage-mention{margin-bottom:.625rem;font-size:.8125rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.faitage-titre{font-size:1.5rem;font-size:clamp(1.25rem,6.6cqi,2.5rem);line-height:1.1;overflow-wrap:anywhere}
.faitage-titre a{color:inherit;text-decoration:none}
.faitage-titre a::after{content:"";position:absolute;inset:0;z-index:1}
.faitage:hover .faitage-titre a{text-decoration:underline;text-decoration-thickness:2px}
.faitage-date{margin-top:.625rem;font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.faitage-extrait{margin-top:.875rem;line-height:1.6}
.tampon{display:inline-block;min-width:2.25rem;padding:0 .5rem;border:1.5px solid currentColor;border-radius:50%;font-size:.75rem;font-weight:700;line-height:1.5;letter-spacing:.06em;text-align:center;font-variant-numeric:tabular-nums}

/* Les tuiles : téléphone d'abord, deux colonnes alignées qui se recouvrent */
.toiture{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:.75rem 0 0;list-style:none}
.tuile{--ton:var(--tuile-1);--encre:var(--encre-1);--arrondi:0 0 50% 50%/0 0 3rem 3rem;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;container-type:inline-size;margin-top:-3rem;padding:3.5rem .5rem 2.625rem;border-radius:var(--arrondi);background:var(--grain),var(--galbe),var(--ton);color:var(--encre);text-align:center;box-shadow:0 .3125rem .4375rem -.125rem rgba(0,0,0,.4)}
.tuile:nth-child(3n+2){--ton:var(--tuile-2);--encre:var(--encre-2)}
.tuile:nth-child(3n){--ton:var(--tuile-3);--encre:var(--encre-3)}
.tuile-capture{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;outline:3px solid var(--filet);outline-offset:-3px}
.tuile-initiale{font-family:var(--police-titre);font-weight:700;font-size:2.75rem;line-height:1;color:color-mix(in srgb,var(--ton),#000 34%);text-shadow:0 1px 0 color-mix(in srgb,var(--ton),#fff 32%),0 -1px 0 color-mix(in srgb,var(--ton),#000 52%)}
.tuile .tampon{margin:.5rem 0 .375rem}
.tuile-titre{max-width:calc(100% + .75rem);margin:0 -.375rem;font-size:.875rem;font-size:clamp(.84375rem,6.8cqi + .0625rem,1rem);line-height:1.25;overflow-wrap:anywhere}
.tuile-titre a{color:inherit;text-decoration:none}
.tuile-titre a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--arrondi)}
.tuile-titre a:focus-visible{outline:0}
.tuile-titre a:focus-visible::after{outline:3px solid currentColor;outline-offset:-.5rem}
.tuile:hover .tuile-titre a{text-decoration:underline;text-decoration-thickness:2px}
.tuile-date{margin-top:.375rem;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tuile-extrait{max-width:100%;margin-top:.5rem;font-size:.8125rem;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
@media (max-width:39.99rem){
.ecailles{max-width:14.25rem}
.tuile-titre{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.tuile{z-index:15}
.tuile:nth-child(n+3){z-index:14}
.tuile:nth-child(n+5){z-index:13}
.tuile:nth-child(n+7){z-index:12}
.tuile:nth-child(n+9){z-index:11}
.tuile:nth-child(n+11){z-index:10}
.tuile:nth-child(n+13){z-index:9}
.tuile:nth-child(n+15){z-index:8}
.tuile:nth-child(n+17){z-index:7}
.tuile:nth-child(n+19){z-index:6}
.tuile:nth-child(n+21){z-index:5}
.tuile:nth-child(n+23){z-index:4}
.tuile:nth-child(n+25){z-index:3}
.tuile:nth-child(n+27){z-index:2}
.tuile:nth-child(n+29){z-index:1}
}

/* Pagination : petites écailles qui se recouvrent */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.25rem;margin-top:3rem}
.ecailles{display:flex;flex-wrap:wrap;justify-content:center;row-gap:.625rem;margin:0;padding:0 0 0 .25rem;list-style:none}
.ecailles li{margin-left:-.25rem;--ton:var(--tuile-1);--encre:var(--encre-1)}
.ecailles li:nth-child(3n+2){--ton:var(--tuile-2);--encre:var(--encre-2)}
.ecailles li:nth-child(3n){--ton:var(--tuile-3);--encre:var(--encre-3)}
.ecaille{display:flex;justify-content:center;width:3rem;height:3.5rem;padding-top:.625rem;border-radius:0 0 50% 50%/0 0 1.5rem 1.5rem;background:var(--grain),var(--galbe),var(--ton);color:var(--encre);font-weight:700;line-height:1.5;text-decoration:none;box-shadow:-2px 0 0 var(--fond),0 .25rem .375rem -.125rem rgba(0,0,0,.35)}
.ecaille-courante{--ton:var(--accent);--encre:var(--sur-accent);position:relative;top:.375rem;box-shadow:inset 0 0 0 2px var(--sur-accent),-2px 0 0 var(--fond),0 .25rem .375rem -.125rem rgba(0,0,0,.35)}
a.ecaille:hover{text-decoration:underline}
.ecaille:focus-visible{position:relative;z-index:1;outline-color:var(--texte)}
.pagination-sens{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;padding:.5rem 1rem;border:2px solid var(--zinc);border-radius:0 0 1rem 1rem;color:var(--texte);font-size:.9375rem;font-weight:600;text-decoration:none}
.pagination-sens:hover{text-decoration:underline}
.pagination-precedente::before,.pagination-suivante::after{content:"";width:.5rem;height:.5rem;border:solid currentColor;transform:rotate(45deg)}
.pagination-precedente::before{border-width:0 0 2px 2px}
.pagination-suivante::after{border-width:2px 2px 0 0}

/* Pied : le chéneau de zinc, la descente et la façade enduite */
.facade{position:relative;margin-top:4.5rem;padding:2.75rem 0 2rem;background:var(--grain),var(--facade);color:var(--sur-facade);text-align:center}
.facade::before{content:"";position:absolute;left:0;right:0;top:0;height:1.125rem;background:repeating-linear-gradient(90deg,transparent 0 8.75rem,rgba(0,0,0,.35) 8.75rem 9rem),linear-gradient(var(--zinc-clair),var(--zinc) 50%,var(--zinc-fonce));box-shadow:0 .25rem .375rem rgba(0,0,0,.28)}
.facade::after{content:"";position:absolute;right:max(1rem,50% - 39rem);top:1.125rem;width:.875rem;height:3.5rem;border-radius:0 0 .25rem .25rem;background:linear-gradient(90deg,var(--zinc-fonce),var(--zinc-clair) 40%,var(--zinc) 70%,var(--zinc-fonce))}
.facade-interieur{width:min(100% - 2rem,80rem);margin:0 auto;padding:0 2rem}
.facade-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:0 2rem;margin:0;padding:0;list-style:none}
.facade-liens a{display:inline-flex;align-items:center;min-height:2.75rem;color:inherit;font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.facade-liens a:hover{text-decoration:underline}
.facade-domaine{margin-top:1rem;font-size:.8125rem;letter-spacing:.06em}

/* Article et pages : un faîtage plus bas, une colonne d'enduit */
.billet{margin-top:2.5rem}
.billet-faitage{z-index:2;margin:0 -1rem;padding:1.5rem 1rem 1.75rem;text-align:center}
.billet-titre{max-width:56rem;margin:0 auto;font-size:clamp(1.25rem,.125rem + 5.6vw,1.75rem);line-height:1.15;overflow-wrap:anywhere}
.billet-suite{font-size:.62em;font-weight:400;letter-spacing:.02em}
.billet-date{margin-top:.75rem;font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.texte{max-width:44rem;margin:0 -1rem;padding:2rem 1.25rem 2.5rem;background:var(--enduit);line-height:1.7;box-shadow:0 1rem 1.5rem -1.25rem rgba(0,0,0,.35)}
.texte>:first-child{margin-top:0}
.texte p,.texte ul,.texte ol{margin:0 0 1.1em}
.texte>:last-child{margin-bottom:0}
.texte a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;overflow-wrap:anywhere}
.texte a:hover{text-decoration-thickness:2px}
.texte h2{display:flex;align-items:baseline;gap:.625rem;margin:2rem 0 .75rem;font-size:1.375rem}
.texte h2::before{content:"";flex:none;width:.75rem;height:.9375rem;border-radius:0 0 50% 50%/0 0 .4375rem .4375rem;background:var(--accent)}
.corps p:has(>a){padding:.625rem .875rem;border:2px solid var(--zinc);border-left-width:.375rem;background:var(--fond);font-size:.9375rem;line-height:1.5}
.corps img{display:block;width:100%;height:auto;margin:1.75rem 0;border:.375rem solid var(--tuile-1);border-radius:0 0 50% 50%/0 0 2.5rem 2.5rem;box-shadow:0 .5rem .625rem -.375rem rgba(0,0,0,.45)}
.retour{max-width:44rem;margin:1.75rem auto 0;text-align:center}
.retour a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700}
.page-contact .texte>p:first-child::after{content:"";display:block;width:7.5rem;height:1.25rem;margin:1.5rem auto 0;background:radial-gradient(50% 100% at 50% 0,var(--tuile-1) 96%,transparent) 0 0/1.5rem 100% no-repeat,radial-gradient(50% 100% at 50% 0,var(--tuile-2) 96%,transparent) 1.5rem 0/1.5rem 100% no-repeat,radial-gradient(50% 100% at 50% 0,var(--accent) 96%,transparent) 3rem 0/1.5rem 100% no-repeat,radial-gradient(50% 100% at 50% 0,var(--tuile-3) 96%,transparent) 4.5rem 0/1.5rem 100% no-repeat,radial-gradient(50% 100% at 50% 0,var(--tuile-1) 96%,transparent) 6rem 0/1.5rem 100% no-repeat}
.page-contact iframe{display:block;box-shadow:0 0 0 2px var(--zinc)}
.page-plan_du_site .texte{max-width:72rem}
.page-plan_du_site .texte ul{padding:0;list-style:none}
.page-plan_du_site .texte>ul:first-child{display:flex;flex-wrap:wrap;gap:0 2rem}
.page-plan_du_site .texte>h2+ul{columns:3 17rem;column-gap:2.5rem}
.page-plan_du_site .texte li{margin:0;break-inside:avoid}
.page-plan_du_site .texte li a{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.25rem 0;line-height:1.35}
.page-plan_du_site .texte li a::before{content:"";flex:none;width:.5rem;height:.625rem;border-radius:0 0 50% 50%/0 0 .3125rem .3125rem;background:var(--accent)}
.page-plan_du_site .texte nav ul{display:flex;flex-wrap:wrap;gap:0 1.25rem}

/* 404 : une rangée où manque une tuile, la volige paraît */
.trou{max-width:40rem;margin:3rem auto 0;text-align:center}
.trou-rangee{display:flex;justify-content:center;margin-bottom:2rem}
.trou-rangee span{width:2.75rem;height:3.5rem;border-radius:0 0 50% 50%/0 0 1.375rem 1.375rem;background:var(--grain),var(--galbe),var(--tuile-1);box-shadow:0 .25rem .375rem -.125rem rgba(0,0,0,.4)}
.trou-rangee span:nth-child(3n+2){background:var(--grain),var(--galbe),var(--tuile-2)}
.trou-rangee span:nth-child(3n){background:var(--grain),var(--galbe),var(--tuile-3)}
.trou-rangee .trou-manque{border-radius:0;background:repeating-linear-gradient(var(--volige) 0 .5rem,color-mix(in srgb,var(--volige),#000 50%) .5rem .5625rem);box-shadow:inset 0 .375rem .5rem rgba(0,0,0,.6)}
.trou-titre{font-size:clamp(2rem,1.5rem + 2.5vw,3rem)}
.trou-texte{margin-top:.75rem;color:var(--doux)}

/* Tablette et ordinateur : la toiture décalée d'une demi-tuile */
@media (min-width:40rem){
.ciel-interieur{width:min(100% - 3rem,80rem);padding:1.125rem 4rem 1.125rem 0}
.enseigne{flex:0 1 auto}
.oeil{width:3.5rem;height:3.5rem}
.marque-nom{font-size:1.125rem;letter-spacing:.14em}
.menu{flex:0 1 auto;padding-right:0}
.menu ul{flex-wrap:wrap;gap:.25rem 1.75rem}
.menu li{flex:none}
.menu a{padding:.25rem 0;border-bottom:.1875rem solid transparent;border-radius:0;background:none;color:var(--sur-ciel);box-shadow:none;font-size:1.125rem;font-weight:600;font-variant-caps:all-small-caps;letter-spacing:.1em}
.menu a[aria-current]{top:0;border-bottom-color:var(--zinc);box-shadow:none}
.cheminee{right:.5rem;width:2.5rem;height:4.25rem}
.principal{width:min(100% - 3rem,80rem)}
.toit{margin:1.75rem 0 0}
.faitage{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;align-items:center;padding:1.5rem}
.faitage-nu .faitage-visuel{width:100%;aspect-ratio:16/9;padding-bottom:1.5rem;border-radius:0 0 50% 50%/0 0 4rem 4rem}
.faitage-initiale{font-size:clamp(5rem,10vw,8.5rem)}
.toiture{padding-top:1rem}
.tuile{--arrondi:0 0 50% 50%/0 0 4rem 4rem;grid-column:span 2;margin-top:-4rem;padding:4.5rem 1rem 3rem}
.tuile-initiale{font-size:3.25rem}
.tuile-titre{max-width:calc(100% + 1rem);margin:0 -.5rem;line-height:1.2}
.tuile-date{font-size:.75rem}
.tuile-extrait{font-size:.875rem}
.tuile::before,.tuile::after{position:absolute;top:0;bottom:0;width:50%;background:var(--grain),var(--galbe),var(--rive);box-shadow:0 .3125rem .4375rem -.125rem rgba(0,0,0,.4)}
.billet-faitage{margin:0;padding:1.75rem 1.5rem 2rem}
.billet-titre{font-size:clamp(1.75rem,.5rem + 3.2vw,2.5rem)}
.texte{margin:0 auto;padding:2.5rem 2.5rem 3rem}
.trou-rangee span{width:3.5rem;height:4.5rem;border-radius:0 0 50% 50%/0 0 1.75rem 1.75rem}
}
@media (min-width:40rem) and (max-width:74.99rem){
.toiture{grid-template-columns:repeat(6,minmax(0,1fr))}
.tuile:nth-child(5n+4){grid-column:2/span 2}
.tuile:nth-child(5n+1),.tuile:nth-child(5n+5){--ton:var(--tuile-1);--encre:var(--encre-1)}
.tuile:nth-child(5n+2){--ton:var(--tuile-2);--encre:var(--encre-2)}
.tuile:nth-child(5n+3),.tuile:nth-child(5n+4){--ton:var(--tuile-3);--encre:var(--encre-3)}
.tuile:nth-child(5n+4)::before{content:"";right:100%;border-radius:0 0 100% 0/0 0 4rem 0;--rive:var(--tuile-2)}
.tuile:nth-child(5n+5)::after{content:"";left:100%;border-radius:0 0 0 100%/0 0 0 4rem;--rive:var(--tuile-2)}
.tuile{z-index:12}
.tuile:nth-child(n+4){z-index:11}
.tuile:nth-child(n+6){z-index:10}
.tuile:nth-child(n+9){z-index:9}
.tuile:nth-child(n+11){z-index:8}
.tuile:nth-child(n+14){z-index:7}
.tuile:nth-child(n+16){z-index:6}
.tuile:nth-child(n+19){z-index:5}
.tuile:nth-child(n+21){z-index:4}
.tuile:nth-child(n+24){z-index:3}
.tuile:nth-child(n+26){z-index:2}
.tuile:nth-child(n+29){z-index:1}
}
@media (min-width:75rem){
.ciel-interieur,.principal{width:min(100% - 4rem,80rem)}
.faitage{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2.5rem;padding:2rem}
.faitage-extrait{font-size:1.125rem}
.toiture{grid-template-columns:repeat(10,minmax(0,1fr))}
.tuile:nth-child(9n+6){grid-column:2/span 2}
.tuile:nth-child(9n+6)::before{content:"";right:100%;border-radius:0 0 100% 0/0 0 4rem 0;--rive:var(--tuile-2)}
.tuile:nth-child(9n+9)::after{content:"";left:100%;border-radius:0 0 0 100%/0 0 0 4rem;--rive:var(--tuile-1)}
.tuile{z-index:7}
.tuile:nth-child(n+6){z-index:6}
.tuile:nth-child(n+10){z-index:5}
.tuile:nth-child(n+15){z-index:4}
.tuile:nth-child(n+19){z-index:3}
.tuile:nth-child(n+24){z-index:2}
.tuile:nth-child(n+28){z-index:1}
.billet-faitage{padding:2rem 2rem 2.25rem}
}