:root{--accent:#b32d23;--doux:#6b5a50;--doux-encre:#cdbfae;--encre:#1f1714;--fond:#f4ecdc;--plaque:#f4ecdc;--police-texte:Charter,"Bitstream Charter","Sitka Text",Cambria,serif;--police-titre:Didot,"Bodoni MT","Noto Serif Display","URW Palladio L",P052,Sylfaen,serif;--sur-accent:#ffffff;--sur-encre:#f6eee0;--sur-ton:#241a16;--texte:#241a16;--ton-clair:#efc8b6;--ton-soutenu:#dc9a89;--vif:#f08a6c;}
/* Arlequin (t2b057) : le costume d'Arlequin étalé sur la page. Un treillis de losanges à deux tons cousus d'un galon d'encre :
   rangées longues au ton clair, courtes au ton soutenu, décalées d'un demi-losange et emboîtées pointe contre pointe autour du
   grand losange de la une (troisième ton : l'accent) ; le nom du site logé dans l'écoinçon, contre la pente. Chaque pièce est
   peinte deux fois (l'encre, puis son ton rogné d'un pixel) : d'où le galon entre les pièces. Téléphone : deux colonnes de
   losanges 4:5 sous une une étirée en hexagone. Variables : --fond --texte --doux --accent --sur-accent --encre --sur-encre
   --doux-encre --ton-clair --ton-soutenu --sur-ton --vif --plaque (palette), --police-titre --police-texte (typo). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{--losange:polygon(50% 0,100% 50%,50% 100%,0 50%);--anneau:polygon(evenodd,50% 6px,calc(100% - 6px) 50%,50% calc(100% - 6px),6px 50%,50% 6px,50% 10px,10px 50%,50% calc(100% - 10px),calc(100% - 10px) 50%,50% 10px);--frise:linear-gradient(to top right,transparent calc(50% - 1px),var(--encre) 0 calc(50% + 1px),transparent 0),linear-gradient(to bottom right,transparent calc(50% - 1px),var(--encre) 0 calc(50% + 1px),transparent 0),conic-gradient(var(--ton-soutenu) 45deg,var(--ton-clair) 0 135deg,var(--ton-soutenu) 0 225deg,var(--ton-clair) 0 315deg,var(--ton-soutenu) 0),var(--ton-clair)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--fond);color:var(--texte);font-family:var(--police-texte);line-height:1.6;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2{font-family:var(--police-titre);line-height:1.15}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.evitement{position:absolute;top:.75rem;left:.75rem;z-index:20;padding:.75rem 1.25rem;background:var(--fond);color:var(--accent);font-weight:700;transform:translateY(-250%)}
.evitement:focus{transform:none}

/* En-tête : bandeau d'encre, marque sur une plaque en losange, menu en petites capitales ; frise du treillis dessous */
.bandeau{background:var(--encre);color:var(--sur-encre)}
.bandeau::after{content:"";display:block;height:1.25rem;background:var(--frise);background-size:1.25rem 1.25rem}
.bandeau :focus-visible,.pied :focus-visible{outline-color:var(--vif)}
.bandeau-int{width:min(100% - 2rem,84rem);margin:0 auto;padding:.875rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2.5rem}
.marque{display:flex;align-items:center;gap:1rem;min-width:0;min-height:2.75rem;color:inherit;font-family:var(--police-titre);font-style:italic;font-size:clamp(1.625rem,1.2rem + 1.5vw,2.375rem);line-height:1.05;text-decoration:none}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:1px}
.marque-plaque{flex:none;display:grid;place-items:center;width:4.25rem;height:4.25rem;background:var(--plaque);clip-path:var(--losange)}
.marque-img{display:block;width:2.125rem;height:2.125rem}
.marque-nom,.titre-site,.pied-nom{-webkit-hyphens:auto;hyphens:auto}
.marque-nom{min-width:0;overflow-wrap:anywhere}
.menu{margin-left:auto}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:0 1.75rem}
.menu a{position:relative;display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 .25rem;color:var(--sur-encre);font-variant-caps:all-small-caps;font-size:1.0625rem;font-weight:600;letter-spacing:.16em;line-height:1.2;text-align:center;text-decoration:none}
.menu a:hover{text-decoration:underline}
.menu a[aria-current]::after{content:"";position:absolute;left:50%;bottom:-.125rem;width:.5rem;height:.5rem;margin-left:-.25rem;background:var(--vif);transform:rotate(45deg)}

.principal{flex:1 0 auto;width:100%;padding-top:2.25rem}

/* Accueil : la scène (conteneur des mesures du treillis), le h1 et la rubrique dans les écoinçons de la une */
.scene{position:relative;container-type:inline-size;width:calc(100% - 1rem);max-width:84rem;margin:0 auto}
.ecoincon{margin:0;text-align:center}
.titre-site{margin:0 .5rem;font-style:italic;font-weight:400;font-size:clamp(1.875rem,8.5vw,2.5rem);line-height:1.1;overflow-wrap:anywhere}
.ecoincon-d{margin:.375rem .5rem 1.5rem;color:var(--doux);font-variant-caps:all-small-caps;font-size:1.0625rem;font-weight:600;letter-spacing:.18em}
.sep::before{content:"·";margin-right:.5em}
.vide{margin:2rem auto;max-width:42rem;text-align:center}

/* Le treillis : grille de demi-losanges ; chaque pièce occupe une rangée de la grille et déborde sur la suivante (emboîtement) */
.treillis{--cols:4;--w:50cqi;--h:62.5cqi;--demi:31.25cqi;--gx:1.6px;--gy:2px;list-style:none;margin:0;padding:0 0 var(--demi);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:var(--demi)}
.piece{--ton:var(--ton-clair);position:relative;grid-column:span 2;align-self:start;height:var(--h);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--encre);clip-path:var(--losange);color:var(--sur-ton);text-align:center}
.piece::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ton);clip-path:polygon(50% var(--gy),calc(100% - var(--gx)) 50%,50% calc(100% - var(--gy)),var(--gx) 50%);transition:background-color .2s}
.treillis .piece:hover,.treillis .piece:focus-within{--ton:var(--accent);color:var(--sur-accent)}
.treillis .une{--ton:var(--accent);color:var(--sur-accent)}
.treillis .une:hover,.treillis .une:focus-within{--ton:var(--texte);color:var(--fond)}
.piece-titre{margin:0;max-width:100%;font-style:italic;font-size:.8125rem;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.piece-lien{color:inherit;text-decoration:none}
.piece-lien::after{content:"";position:absolute;inset:0;z-index:2}
.piece-lien:focus-visible{outline:0}
.piece-lien:focus-visible::after{background:currentColor;clip-path:var(--anneau)}
.une .piece-lien:focus-visible::after{background:none}
.une .piece-titre:has(:focus-visible){outline:2px solid currentColor;outline-offset:4px}
.piece-rang{position:absolute;top:11%;left:0;right:0;margin:0;font-size:1rem;font-weight:700;line-height:1.1}
.une .piece-rang{display:flex;flex-direction:column-reverse;align-items:center;gap:.3rem}
.piece-une{display:block;font-variant-caps:all-small-caps;font-size:1.0625rem;font-weight:600;letter-spacing:.16em}
.piece-img,.piece-extrait{display:none}
.piece-img{order:-1;width:calc(var(--w) * .48);height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;margin:0 0 .5rem;background:var(--fond);box-shadow:0 0 0 1px var(--encre)}
.piece-extrait{margin:.375rem 0 0;font-size:.8125rem;line-height:1.35;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.piece-date{margin:.375rem 0 0;font-size:.6875rem;line-height:1.25;font-variant-caps:small-caps;letter-spacing:.05em}

/* Pagination : petite frise du costume, losanges alternativement hauts et bas, emboîtés en zigzag ; au-delà de --n pages,
   les rangées (en nombre pair, alignées à gauche) s'emboîtent en treillis. Le lien couvre tout le losange, galon compris */
.pagination{width:calc(100% - 1rem);max-width:84rem;margin:3rem auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2rem}
.pag-frise{--p:3.5rem;--n:10;list-style:none;margin:0;padding:0 0 calc(var(--p) / 2) calc(var(--p) / 2);display:flex;flex-wrap:wrap;max-width:calc((var(--n) + 1) * var(--p) / 2 + 1px)}
.pag-frise li{--ton:var(--ton-clair);position:relative;width:var(--p);height:var(--p);margin-left:calc(var(--p) / -2);background:var(--encre);clip-path:var(--losange)}
.pag-frise li:nth-child(even){--ton:var(--ton-soutenu);margin-top:calc(var(--p) / 2);margin-bottom:calc(var(--p) / -2)}
.pag-num{position:absolute;inset:0;z-index:0;display:grid;place-items:center;clip-path:var(--losange);color:var(--sur-ton);font-weight:700;text-decoration:none}
.pag-num::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ton);clip-path:polygon(50% 1.8px,calc(100% - 1.8px) 50%,50% calc(100% - 1.8px),1.8px 50%)}
a.pag-num:hover{text-decoration:underline}
span.pag-num{--ton:var(--accent);color:var(--sur-accent)}
a.pag-num:focus-visible{outline:0}
a.pag-num:focus-visible::after{content:"";position:absolute;inset:0;background:currentColor;clip-path:var(--anneau)}
.pag-sens{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;font-variant-caps:all-small-caps;font-size:1.0625rem;font-weight:600;letter-spacing:.16em;text-decoration:none}
.pag-sens:hover{text-decoration:underline}
.pag-prec::before,.pag-suiv::after{content:"";width:.5rem;height:.5rem;background:currentColor;transform:rotate(45deg)}

/* Article et pages : une colonne coiffée d'une frise du treillis */
.colonne{width:calc(100% - 2rem);max-width:42rem;margin-left:auto;margin-right:auto}
.feuille::before{content:"";display:block;height:6rem;margin-bottom:2.25rem;background:var(--frise);background-size:6rem 6rem;background-repeat:round;box-shadow:0 0 0 2px var(--encre)}
.feuille-titre{margin:0;font-style:italic;font-weight:400;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.25rem);overflow-wrap:break-word}
.feuille-suite{color:var(--doux)}
.feuille-date{margin:1rem 0 0;color:var(--doux);font-variant-caps:all-small-caps;font-size:1.0625rem;letter-spacing:.12em}
.feuille-date::before,.texte h2::before,.retour a::before{content:"";flex:none;width:.5rem;height:.5rem;background:var(--accent);transform:rotate(45deg)}
.feuille-date::before{display:inline-block;margin:0 .75rem .125rem .125rem;vertical-align:middle}
.texte{margin-top:2rem;font-size:1.0625rem;line-height:1.7}
.texte>:first-child{margin-top:0}
.texte p,.texte ul{margin:0 0 1.1em}
.texte a{overflow-wrap:anywhere}
.texte img{display:block;width:100%;height:auto;margin:2rem 0;box-shadow:0 0 0 2px var(--encre)}
.texte h2{display:flex;align-items:center;gap:.75rem;margin:2.25rem 0 .75rem;font-style:italic;font-weight:400;font-size:1.5rem}
.corps p:has(>a:only-child){color:var(--doux);font-variant-caps:all-small-caps;letter-spacing:.08em}
.corps p:has(>a:only-child) a{font-variant-caps:normal;letter-spacing:0}
.retour{margin-top:2.5rem}
.retour a{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;font-variant-caps:all-small-caps;font-size:1.0625rem;font-weight:600;letter-spacing:.14em;text-decoration:none}
.retour a:hover{text-decoration:underline}
.page-contact iframe{margin-top:1.5rem;box-shadow:0 0 0 2px var(--encre)}
.page-plan_du_site .texte>ul{list-style:none;padding:0;columns:2 15rem;column-gap:2.5rem}
.page-plan_du_site .texte>ul li{break-inside:avoid}
.page-plan_du_site .texte>ul a{display:flex;align-items:center;min-height:2.75rem;padding:.25rem 0;line-height:1.3}
.page-plan_du_site nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 1.25rem}
.page-plan_du_site nav a,.page-plan_du_site nav b{display:grid;place-items:center;min-width:2.75rem;min-height:2.75rem}

/* Page introuvable : un seul grand losange au ton soutenu, cerné de son galon */
.egare{position:relative;z-index:0;container-type:inline-size;width:min(100%,30rem);aspect-ratio:3/4;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--encre);clip-path:var(--losange);color:var(--sur-ton)}
.egare::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ton-soutenu);clip-path:polygon(50% 3px,calc(100% - 3px) 50%,50% calc(100% - 3px),3px 50%)}
.egare>*{max-width:60cqi}
.egare-titre{margin:0;font-style:italic;font-weight:400;font-size:clamp(1.5rem,7cqi,2rem)}
.egare-texte{margin:.75rem 0 0;font-size:.9375rem;line-height:1.45}
.egare-retour{margin:.5rem 0 0}
.egare-retour a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--sur-ton);font-weight:700}
.egare :focus-visible{outline-color:var(--sur-ton)}

/* Pied : baisser de rideau, lambrequin de pointes aux deux tons */
.pied{margin-top:4.5rem;background:var(--encre);color:var(--sur-encre)}
.pied::before{content:"";display:block;height:1.25rem;background:conic-gradient(from -45deg at 25% 100%,var(--ton-clair) 90deg,transparent 0),conic-gradient(from -45deg at 75% 100%,var(--ton-soutenu) 90deg,transparent 0);background-size:5rem 1.25rem}
.pied-int{width:min(100% - 2rem,84rem);margin:0 auto;padding:2.5rem 0 3rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:2rem 4rem}
.pied-site{min-width:0}
.pied-nom{color:var(--sur-encre);font-family:var(--police-titre);font-style:italic;font-size:clamp(1.875rem,1.3rem + 2vw,2.75rem);line-height:1.1;text-decoration:none;overflow-wrap:anywhere}
.pied-nom:hover{text-decoration:underline;text-decoration-thickness:1px}
.pied-domaine{margin:.625rem 0 0;color:var(--doux-encre);font-variant-caps:all-small-caps;font-size:1.0625rem;letter-spacing:.18em}
.pied-liens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:0 2.5rem}
.pied-liens a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--sur-encre);font-variant-caps:all-small-caps;font-size:1.0625rem;letter-spacing:.14em;text-decoration:none}
.pied-liens a:hover{text-decoration:underline}

/* Téléphone : en-tête en deux étages, frise de pagination sur sa propre ligne au-dessus des liens de sens, pied sur une colonne */
@media (max-width:39.99rem){
.bandeau-int{flex-direction:column;align-items:stretch;gap:.375rem;padding:.75rem 0 .25rem}
.marque{justify-content:center;gap:.75rem;font-size:clamp(1.25rem,6.6vw,1.875rem)}
.marque-plaque{width:3.5rem;height:3.5rem}
.marque-img{width:1.75rem;height:1.75rem}
.menu{margin-left:0}
.menu ul{gap:0;justify-content:space-between}
.menu li{flex:1 1 auto}
.menu a{font-size:.9375rem;letter-spacing:.06em}
.pagination{row-gap:.5rem}
.pagination::before{content:"";order:-1;flex-basis:100%}
.pag-frise{order:-2;--p:min(4rem,calc((100vw - 1rem) / 5.6))}
.feuille::before{height:4.5rem;background-size:4.5rem 4.5rem}
.pied-liens{grid-template-columns:1fr}
}
/* Petits téléphones : 8 losanges par rangée de la frise, pour leur garder 4 rem (zone cliquable de 44 px au moins) */
@media (max-width:23.24rem){.pag-frise{--n:8;--p:min(4rem,calc((100vw - 1rem) / 4.6))}}

/* Treillis du téléphone : deux colonnes de losanges 4:5, rangées de deux puis d'un seul centré ; une étirée en hexagone */
@media (max-width:47.99rem){
.scene{max-width:30rem}
.treillis{grid-template-rows:auto}
.piece{padding:30% 9% 14%}
.piece:nth-child(3n+4){grid-column:2/span 2;--ton:var(--ton-soutenu)}
.piece-titre{font-size:clamp(.75rem,calc(var(--w) * .07),1.0625rem)}
.piece-date{max-width:calc(var(--w) * .6);font-size:clamp(.6875rem,calc(var(--w) * .056),.8125rem)}
.une{grid-column:1/-1;grid-row:1;height:auto;min-height:125cqi;margin-bottom:-31.25cqi;padding:58cqi 8cqi 40cqi;clip-path:polygon(50% 0,100% 62.5cqi,100% calc(100% - 62.5cqi),50% 100%,0 calc(100% - 62.5cqi),0 62.5cqi)}
.une:not(.avec-image){padding-top:42cqi}
.une::before{clip-path:polygon(50% 2px,calc(100% - 1px) calc(62.5cqi + 1px),calc(100% - 1px) calc(100% - 62.5cqi - 1px),50% calc(100% - 2px),1px calc(100% - 62.5cqi - 1px),1px calc(62.5cqi + 1px))}
.une .piece-rang{top:26cqi}
.une .piece-img{display:block;width:84cqi;margin-bottom:.75rem}
.une .piece-titre{max-width:76cqi;font-size:1.25rem;-webkit-line-clamp:2}
.une:not(.avec-image) .piece-titre{font-size:1.5rem}
.une .piece-extrait{display:-webkit-box;order:1;max-width:60cqi;margin-top:.5rem;font-size:.9375rem;line-height:1.45}
.une .piece-date{max-width:none;font-size:.8125rem}
}
@media (min-width:34rem) and (max-width:47.99rem){
.piece-extrait{display:-webkit-box;max-width:calc(var(--w) * .62)}
}
@media (min-width:40rem){.egare{aspect-ratio:1}}

/* Tablette et ordinateur : losanges carrés, la une au centre de la première rangée, les écoinçons de part et d'autre ;
   les textes des pièces suivent la taille du losange (--w) */
@media (min-width:48rem){
.scene,.pagination{width:calc(100% - 3rem)}
.treillis{--gx:1.8px;--gy:1.8px}
.piece{padding:25% 18% 26%}
.piece-titre{font-size:clamp(.8125rem,calc(var(--w) * .052),1.125rem);line-height:1.15}
.piece-extrait{display:-webkit-box;font-size:clamp(.75rem,calc(var(--w) * .039),.8125rem)}
.piece-img{display:block}
.avec-image .piece-titre{font-size:clamp(.8125rem,calc(var(--w) * .047),1rem);-webkit-line-clamp:2}
.avec-image .piece-extrait{display:none}
.piece-date{position:absolute;top:76%;left:0;right:0;width:max(5.25rem,calc(var(--w) * .3));margin:0 auto;line-height:1.2}
.une{height:calc(var(--w) * 2);padding:25% 25% 24%}
.une .piece-rang{top:9%;font-size:1.25rem}
.une .piece-img{width:calc(var(--w) * .96);margin-bottom:.75rem}
.une.avec-image .piece-titre{font-size:clamp(1.25rem,3.2cqi,1.5rem)}
.une:not(.avec-image) .piece-titre{font-size:clamp(1.5rem,4.4cqi,2.25rem);-webkit-line-clamp:3}
.une .piece-extrait,.une.avec-image .piece-extrait{display:-webkit-box;margin-top:.625rem;font-size:.9375rem;line-height:1.45;-webkit-line-clamp:2}
.une:not(.avec-image) .piece-extrait{-webkit-line-clamp:6}
.une .piece-date{top:80%;width:calc(var(--w) * .6);font-size:.8125rem}
.ecoincon{position:absolute;top:0;z-index:1;width:50cqi;pointer-events:none}
.titre-site span{pointer-events:auto}
.ecoincon::before{content:"";width:16rem;height:16rem;shape-margin:1rem}
.ecoincon-g{left:0;text-align:right}
.ecoincon-g::before{float:right;shape-outside:polygon(100% 0,100% 100%,0 100%)}
.ecoincon-d{right:0;margin:0;padding-top:.875rem;text-align:left}
.ecoincon-d::before{float:left;shape-outside:polygon(0 0,100% 100%,0 100%)}
.titre-site{margin:0;font-size:clamp(1.5rem,4cqi,3rem)}
.scene-vide .ecoincon{position:static;width:auto;text-align:center}
.scene-vide .ecoincon::before{content:none}
}

@media (min-width:48rem) and (max-width:63.99rem){
.treillis{--cols:6;--w:33.333cqi;--h:33.333cqi;--demi:16.667cqi}
.une{grid-column:2/span 4;grid-row:1/span 3}
.piece:nth-child(2){grid-area:3/1/4/3}
.piece:nth-child(3){grid-area:3/5/4/7}
.piece:nth-child(5n+4){grid-column:2/span 2}
.piece:nth-child(5n+4),.piece:nth-child(5n+5){--ton:var(--ton-soutenu)}
.piece-extrait{-webkit-line-clamp:2}
}

@media (min-width:64rem){
.treillis{--cols:8;--w:25cqi;--h:25cqi;--demi:12.5cqi}
.treillis::before,.treillis::after{content:"";grid-row:1}
.treillis::before{grid-column:1/3}
.treillis::after{grid-column:7/9}
.une{grid-column:3/span 4;grid-row:1/span 3}
.piece:nth-child(2){grid-area:2/1/3/3}
.piece:nth-child(3){grid-area:2/7/3/9}
.piece:nth-child(4){grid-area:3/2/4/4}
.piece:nth-child(5){grid-area:3/6/4/8}
.piece:nth-child(7n+10){grid-column:2/span 2}
.piece:nth-child(7n+4),.piece:nth-child(7n+5),.piece:nth-child(7n+10){--ton:var(--ton-soutenu)}
.pag-frise{--n:16}
}

@media (prefers-reduced-motion:reduce){.piece::before{transition:none}}