:root{--accent:#1d2b44;--couture:#9aa5b8;--doux:#4e5563;--encre:#1c2029;--epingle:#7a1f30;--feuille:#ffffff;--feuille-encre:#1c2029;--fond:#eceef0;--galon:#e3e6eb;--galon-courant:#7a1f30;--lien:#7a1f30;--metre:#f1dc8a;--metre-trait:#524316;--pastille:#ffffff;--piece:#fafbfc;--pied:#161d2b;--pied-doux:#b8bfcb;--pied-texte:#eef0f4;--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;--repere-1:#8ea4c8;--repere-2:#c66f7d;--repere-3:#dcc375;--sur-accent:#ffffff;--sur-galon:#1d2b44;--sur-galon-courant:#ffffff;--trait:#1d2b44;--trame:#c2c7ce;}
/* Patron (t2b098) : le patron de couture étalé sur la table de coupe, papier de patronage semé de petites croix. En-tête en
   pochette (bandeau d'accent, pastille de taille, trois galons de biais) sur un mètre ruban. Accueil : chaque article est une
   pièce découpée (clip-path, cinq profils), contour en tirets, crans en V, numéro de pièce cerclé (rang), droit-fil fléché qui
   porte le titre ; la premiere est la grande pièce du dos (2 x 2, ligne de pliure). Téléphone : droit-fil vertical à gauche.
   Article : notice de montage sur une feuille claire. Pied : la lisière du tissu.
   Palette : --accent --sur-accent --fond --trame --piece --encre --doux --trait --galon --sur-galon --galon-courant
   --sur-galon-courant --couture --pastille --metre --metre-trait --feuille --feuille-encre --lien --pied --pied-texte
   --pied-doux --repere-1 --repere-2 --repere-3 --epingle ; typo : --police-titre --police-texte. */

/* Flèches, crans en V et droit-fil (conic-gradient) ; redéfinis sur la feuille, où le trait prend --lien */
:root,.feuille{
--fleche-g:conic-gradient(from 68deg at 0 50%,var(--trait) 0 44deg,transparent 0);
--fleche-d:conic-gradient(from 248deg at 100% 50%,var(--trait) 0 44deg,transparent 0);
--fleche-h:conic-gradient(from 158deg at 50% 0,var(--trait) 0 44deg,transparent 0);
--fleche-b:conic-gradient(from -22deg at 50% 100%,var(--trait) 0 44deg,transparent 0);
--cran-h:conic-gradient(from -35deg at 50% 100%,var(--trait) 0 70deg,transparent 0);
--cran-b:conic-gradient(from 145deg at 50% 0,var(--trait) 0 70deg,transparent 0);
--cran-g:conic-gradient(from 235deg at 100% 50%,var(--trait) 0 70deg,transparent 0);
--cran-d:conic-gradient(from 55deg at 0 50%,var(--trait) 0 70deg,transparent 0);
--droit-fil:var(--fleche-g) 0 100% / .625rem .5rem,var(--fleche-d) 100% 100% / .625rem .5rem,linear-gradient(var(--trait),var(--trait)) 0 calc(100% - 3.25px) / 100% 1.5px;
--biais:repeating-linear-gradient(45deg,var(--trait) 0 5px,transparent 0 9px);
--biais-g:repeating-linear-gradient(-45deg,var(--trait) 0 5px,transparent 0 9px);
--lisere:var(--biais) 0 0/50% 50% no-repeat,var(--biais-g) 100% 0/50% 50% no-repeat,var(--biais-g) 0 100%/50% 50% no-repeat,var(--biais) 100% 100%/50% 50% no-repeat}
.feuille{--trait:var(--lien)}

*,*::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(--encre);font-family:var(--police-texte);font-size:1rem;line-height:1.6;overflow-wrap:break-word;background-color:var(--fond);background-image:linear-gradient(90deg,var(--fond) calc(50% - 4px),transparent 0 calc(50% + 5px),var(--fond) 0),linear-gradient(transparent 50%,var(--trame) 0 calc(50% + 1px),transparent 0),linear-gradient(var(--fond) calc(50% - 4px),transparent 0 calc(50% + 5px),var(--fond) 0),linear-gradient(90deg,transparent 50%,var(--trame) 0 calc(50% + 1px),transparent 0);background-size:2.5rem 2.5rem}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--trait);outline-offset:2px}
h1,h2,h3{font-family:var(--police-titre);font-weight:700}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.evitement{position:absolute;top:.75rem;left:.75rem;z-index:30;padding:.75rem 1.25rem;background:var(--galon-courant);color:var(--sur-galon-courant);font-weight:700;transform:translateY(-12rem)}
.evitement:focus{transform:none}

/* En-tête : la pochette, puis le mètre ruban (un trait tous les 0,5 rem, un trait long tous les 2,5 rem) */
.pochette{background:var(--accent);color:var(--sur-accent)}
.pochette::after{content:"";display:block;height:1.25rem;border-top:1px solid rgb(0 0 0 / 25%);background:repeating-linear-gradient(90deg,var(--metre-trait) 0 1px,transparent 0 2.5rem) 0 0 / 100% .75rem no-repeat,repeating-linear-gradient(90deg,var(--metre-trait) 0 1px,transparent 0 .5rem) 0 0 / 100% .375rem no-repeat,var(--metre);box-shadow:0 4px 8px -4px rgb(0 0 0 / 35%)}
.pochette-bande{width:min(100% - 3rem,75rem);margin:0 auto;padding:.875rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem}
.pochette :focus-visible{outline-color:var(--sur-accent)}
.marque{display:inline-flex;align-items:center;gap:1rem;min-height:2.75rem;min-width:0;color:inherit;font-family:var(--police-titre);font-size:1.5rem;font-weight:700;line-height:1.15;text-decoration:none}
.marque-pastille{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--pastille);outline:1.5px dashed var(--pastille);outline-offset:3px;box-shadow:0 2px 4px rgb(0 0 0 / 25%)}
.marque-image{display:block;width:2.125rem;height:2.125rem}
.marque-nom{min-width:0;overflow-wrap:anywhere}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.galons ul{list-style:none;margin:0;padding:0 .5rem;display:flex;flex-wrap:wrap;gap:.75rem}
.galons a{--points:repeating-linear-gradient(90deg,var(--couture) 0 .375rem,transparent 0 .625rem);display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.375rem 1.25rem;background:var(--points) 0 .3125rem / 100% 1px no-repeat,var(--points) 0 calc(100% - .3125rem) / 100% 1px no-repeat,var(--galon);color:var(--sur-galon);text-decoration:none;transform:skewX(-10deg);box-shadow:0 2px 0 rgb(0 0 0 / 22%)}
.galons a > span{display:block;transform:skewX(10deg);font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.galons a:hover > span{text-decoration:underline;text-underline-offset:.25em}
.galons a[aria-current="page"]{--couture:var(--metre);background-color:var(--galon-courant);color:var(--sur-galon-courant)}

/* Contenu ; accueil : « Derniers articles » en petites capitales, le nom du site sur un court droit-fil */
.principal{flex:1 0 auto;width:min(100% - 3rem,75rem);margin:0 auto;padding:2.5rem 0 0}
.planche-tete{margin:0 0 2.25rem}
.surtitre{margin:0 0 .375rem;color:var(--trait);font-size:.875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.planche-titre{width:fit-content;max-width:100%;margin:0;padding:0 .25rem 1.125rem 0;font-size:clamp(1.75rem,.25rem + 7.5vw,3.25rem);line-height:1.08;letter-spacing:-.01em;overflow-wrap:anywhere}
.planche-titre,.piece-titre,.notice-tete,.page-plan_du_site .texte h2{background:var(--droit-fil);background-repeat:no-repeat}
.vide{margin:0;padding:2rem;border:2px dashed var(--trait);text-align:center}

/* Les pièces : le liseré est le fond de la pièce, rayé en biais, vu sur 2 px autour du papier (::before au même polygone) ; les
   rayures changent de sens d'un quart à l'autre, jamais parallèles à une coupe : des tirets réguliers sur tous les bords */
.planche{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
.piece{--decoupe:polygon(0 0,100% 0,100% 100%,0 100%);--crans:none;--pli:none;--fil:none;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:14rem;padding:3.75rem 1.5rem 1.75rem;clip-path:var(--decoupe);background:var(--lisere);text-align:center}
.piece::before,.piece-dos::after{content:"";position:absolute;z-index:-1}
.piece::before{inset:2px;clip-path:var(--decoupe);background:var(--crans),var(--pli),var(--fil),var(--piece);background-repeat:no-repeat}
.piece:hover::before{background-color:color-mix(in srgb,var(--piece) 93%,var(--trait))}
.piece-numero{position:absolute;top:.875rem;left:1.5rem;display:grid;place-items:center;min-width:2.25rem;height:2.25rem;padding:0 .3rem;border:1.5px solid var(--trait);border-radius:999px;color:var(--trait);font-family:var(--police-titre);font-size:.875rem;font-weight:700;line-height:1}
.piece-capture{position:relative;display:block;margin:0 0 .875rem}
.piece-capture img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 0;background:var(--fond);box-shadow:0 1px 3px rgb(0 0 0 / 30%)}
.piece-capture::before,.piece-capture::after{content:"";position:absolute;top:-.3125rem;z-index:1;width:.75rem;height:.75rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgb(255 255 255 / 75%) 0 .09rem,transparent .2rem),var(--epingle);box-shadow:1px 2px 2px rgb(0 0 0 / 40%)}
.piece-capture::before{left:.5rem}
.piece-capture::after{right:.5rem}
.piece-une{display:flex;align-items:center;justify-content:center;gap:.625rem;margin:0 0 .5rem;color:var(--trait);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.piece-une::before,.piece-une::after{content:"";width:1.75rem;border-top:1.5px solid}
.piece-titre{margin:0 -.375rem .625rem;padding:0 .125rem .75rem;font-size:.875rem;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:balance}
.piece-lien{color:var(--trait);text-decoration:none}
.piece-lien::after{content:"";position:absolute;inset:0;z-index:2}
.piece:hover .piece-lien{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.piece-lien:focus-visible{outline:0}
.piece-lien:focus-visible::after{outline:3px solid var(--trait);outline-offset:-.75rem}
.piece-date{margin:0 0 .375rem;color:var(--doux);font-size:.8125rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase}
.piece-extrait{margin:0;font-size:.9375rem;font-style:italic;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.piece-image .piece-extrait{-webkit-line-clamp:2}

/* Cinq profils (rognures de 14 % de la largeur au plus) et leurs deux crans : devant à épaule tombante, trapèze de jupe, manche
   à tête bombée, poche à coins coupés, patte de boutonnage */
.piece:nth-child(5n+1){--decoupe:polygon(0 1.5rem,1.5rem 0,60% 0,100% 1.75rem,100% 100%,0 100%);--crans:var(--cran-g) 0 72% / .625rem .875rem,var(--cran-b) 30% 100% / .875rem .625rem}
.piece:nth-child(5n+2){--decoupe:polygon(1.125rem 0,calc(100% - 1.125rem) 0,100% 100%,0 100%);--crans:var(--cran-h) 50% 0 / .875rem .625rem,var(--cran-b) 72% 100% / .875rem .625rem}
.piece:nth-child(5n+3){--decoupe:polygon(0 2.25rem,9% .75rem,28% 0,72% 0,91% .75rem,100% 2.25rem,calc(100% - 1rem) 100%,1rem 100%);--crans:var(--cran-h) 50% 0 / .875rem .625rem,var(--cran-b) 50% 100% / .875rem .625rem}
.piece:nth-child(5n+4){--decoupe:polygon(0 0,100% 0,100% calc(100% - 2.25rem),88% 100%,12% 100%,0 calc(100% - 2.25rem));--crans:var(--cran-g) 0 70% / .625rem .875rem,var(--cran-d) 100% 70% / .625rem .875rem}
.piece:nth-child(5n){--decoupe:polygon(0 0,100% 0,100% calc(100% - 1.75rem),50% 100%,0 calc(100% - 1.75rem));--crans:var(--cran-h) 26% 0 / .875rem .625rem,var(--cran-d) 100% 74% / .625rem .875rem}

/* La grande pièce du dos (premiere) : encolure, épaule, emmanchure, ligne de pliure en trait mixte sur le bord gauche */
.piece.piece-dos{--decoupe:polygon(0 2.25rem,20% 0,86% 2.25rem,100% 5.25rem,100% 100%,0 100%);--crans:var(--cran-b) 62% 100% / .875rem .625rem,var(--cran-d) 100% 58% / .625rem .875rem;--pli:repeating-linear-gradient(var(--trait) 0 1rem,transparent 0 1.375rem,var(--trait) 0 1.5625rem,transparent 0 1.9375rem) .625rem 0 / 1.5px 100%;padding:6rem 2.25rem 2.5rem}
.piece-dos .piece-numero{top:2.5rem;left:2.25rem;min-width:2.75rem;height:2.75rem;font-size:1rem}
.piece-dos .piece-capture{margin-bottom:1.5rem}
.piece-dos .piece-titre{margin-bottom:.875rem;padding-bottom:1.125rem;font-size:2.2rem;line-height:1.15;letter-spacing:.04em;background-size:1rem .75rem,1rem .75rem,100% 2px;background-position:0 100%,100% 100%,0 calc(100% - 5px)}
.piece-dos .piece-date{font-size:.9375rem}
.piece-dos .piece-extrait{font-size:1.125rem;-webkit-line-clamp:4}

/* Pagination et retour : petites pièces carrées à coin coupé, cernées de tirets ; la courante remplie d'accent */
.pagination{margin:3rem 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem}
.pagination-pages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem}
.patte{--decoupe:polygon(0 0,calc(100% - .75rem) 0,100% .75rem,100% 100%,0 100%);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:.375rem .875rem;color:var(--trait);font-family:var(--police-titre);font-weight:700;line-height:1.2;text-decoration:none}
.patte::before,.patte::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--decoupe);background:repeating-linear-gradient(-45deg,var(--trait) 0 4px,transparent 0 7px)}
.patte::after{inset:2px;background:var(--piece)}
a.patte:hover{text-decoration:underline;text-underline-offset:.2em}
.patte-courante{color:var(--sur-accent)}
.patte-courante::after{background:var(--accent)}
.patte-sens{padding:.375rem 1.25rem;font-size:.9375rem;letter-spacing:.04em}
.retour{margin:2.5rem 0 0;text-align:center}

/* Article et pages : la notice de montage, tête sur le papier de patronage, corps sur une feuille claire de 42 rem */
.principal-notice{width:min(100% - 3rem,48rem)}
.notice-tete{margin:0 0 2rem;padding:0 0 1.5rem}
.notice-date{margin:0 0 .625rem;color:var(--doux);font-size:.875rem;letter-spacing:.12em;text-transform:uppercase}
.notice-titre{margin:0;font-size:clamp(1.625rem,1.125rem + 2.2vw,2.875rem);line-height:1.12;overflow-wrap:anywhere}
.notice-suite{font-weight:400;color:var(--doux)}
.feuille{padding:2.75rem 3rem 3rem;background:var(--feuille);color:var(--feuille-encre);box-shadow:0 1px 2px rgb(0 0 0 / 10%),0 14px 30px -18px rgb(0 0 0 / 45%)}
.texte{font-size:1.125rem;line-height:1.7}
.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{color:var(--lien);overflow-wrap:anywhere}
.texte h2{margin:2.25rem 0 .75rem;font-size:1.375rem;line-height:1.25}
.texte h2::before{content:"";display:inline-block;width:.875rem;height:.625rem;margin-right:.625rem;background:var(--lien);clip-path:polygon(0 0,100% 0,50% 100%);vertical-align:.12em}
.texte ul{padding-left:1.25rem}
.texte li{margin:.3em 0}
.texte li::marker{color:var(--lien)}
/* « Site web » et « Source » : une petite pièce à contour en tirets ; la capture épinglée aux deux coins du haut */
.corps > p:first-child,.corps > p:first-child + p{margin:0;padding:.375rem 1.125rem;border:2px dashed var(--lien);border-block:0;font-size:1rem;line-height:1.55;overflow-wrap:anywhere}
.corps > p:first-child{padding-top:1rem;border-top:2px dashed var(--lien);background:var(--cran-h) 1.5rem 0 / .875rem .625rem no-repeat}
.corps > p:first-child + p{margin-bottom:1.875rem;padding-bottom:.875rem;border-bottom:2px dashed var(--lien)}
.texte img{display:block;width:100%;height:auto;margin:2.25rem 0;padding:1.25rem .5rem .5rem;background:radial-gradient(circle at 1.25rem .625rem,var(--epingle) 0 .375rem,transparent .41rem),radial-gradient(circle at calc(100% - 1.25rem) .625rem,var(--epingle) 0 .375rem,transparent .41rem),radial-gradient(circle at 1.375rem .75rem,rgb(0 0 0 / 30%) 0 .375rem,transparent .5rem),radial-gradient(circle at calc(100% - 1.125rem) .75rem,rgb(0 0 0 / 30%) 0 .375rem,transparent .5rem),#fff;box-shadow:0 1px 3px rgb(0 0 0 / 25%)}

/* Pages de service : plan du site en trois colonnes, contact sur une feuille blanche bordée d'un trait de coupe */
.principal-notice.page-plan_du_site{width:min(100% - 3rem,75rem)}
.page-plan_du_site .texte{font-size:1rem}
.page-plan_du_site .texte h2{padding-bottom:.875rem}
.page-plan_du_site .texte ul{list-style:none;padding:0;columns:3 15rem;column-gap:2.5rem}
.page-plan_du_site .texte > ul:first-child{columns:auto;display:flex;flex-wrap:wrap;gap:0 2rem}
.page-plan_du_site .texte li{break-inside:avoid;margin:0;padding:.25rem 0}
.page-plan_du_site nav ul{columns:auto;display:flex;flex-wrap:wrap;gap:.5rem}
.page-plan_du_site nav li{padding:0}
.page-plan_du_site nav a,.page-plan_du_site nav b{display:flex;align-items:center;min-height:2.75rem;padding:.5rem 1rem;border:2px dashed var(--lien)}
.page-plan_du_site nav b{background:var(--lien);color:var(--feuille)}
.page-contact iframe{margin:2rem 0 .75rem;background:#fff;box-shadow:0 0 0 .75rem #fff;outline:2px dashed var(--lien);outline-offset:.875rem}

/* 404 : le contour vide d'une pièce */
.principal-erreur{width:min(100% - 3rem,40rem)}
.piece-vide{position:relative;isolation:isolate;margin:1.5rem 0 0;padding:4.5rem 3rem 4rem;text-align:center}
.piece-vide::before,.piece-vide::after{content:"";position:absolute;inset:0;z-index:-1}
/* le liseré seul : un anneau (contour extérieur, puis intérieur à 2 px, règle evenodd) ; le papier semé de croix reste visible dedans */
.piece-vide::before{clip-path:polygon(evenodd,0 2rem,2rem 0,calc(100% - 3rem) 0,100% 2.5rem,100% 100%,0 100%,0 2rem,2px calc(2rem + 1px),calc(2rem + 1px) 2px,calc(100% - 3rem - 1px) 2px,calc(100% - 2px) calc(2.5rem + 1px),calc(100% - 2px) calc(100% - 2px),2px calc(100% - 2px),2px calc(2rem + 1px));background:var(--lisere)}
.piece-vide::after{inset:2px;background:var(--cran-h) 50% 0 / .875rem .625rem,var(--cran-g) 0 62% / .625rem .875rem;background-repeat:no-repeat}
.vide-titre{margin:0 0 1rem;font-size:clamp(1.875rem,1.4rem + 2vw,2.75rem);line-height:1.15}
.vide-texte{margin:0;font-size:1.125rem}

/* Pied : la lisière du tissu et ses repères d'impression aux teintes de la palette */
.lisiere{margin-top:4.5rem;background:var(--pied);color:var(--pied-texte)}
.lisiere::before{content:"";display:block;height:1.75rem;border-bottom:1px dashed var(--pied-doux);background:radial-gradient(circle,var(--repere-1) 0 .25rem,transparent .28rem) 0 50% / 6rem 100%,radial-gradient(circle,var(--repere-2) 0 .25rem,transparent .28rem) 1.5rem 50% / 6rem 100%,radial-gradient(circle,var(--repere-3) 0 .25rem,transparent .28rem) 3rem 50% / 6rem 100%,radial-gradient(circle,var(--pied-texte) 0 .25rem,transparent .28rem) 4.5rem 50% / 6rem 100%;background-repeat:repeat-x}
.lisiere-interieur{width:min(100% - 3rem,75rem);margin:0 auto;padding:1.75rem 0 2.5rem;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3rem;align-items:start}
.lisiere :focus-visible{outline-color:var(--pied-texte)}
.lisiere-nom{margin:0;font-family:var(--police-titre);font-size:1.5rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.lisiere-domaine{margin:.375rem 0 0;color:var(--pied-doux);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase}
.lisiere-liens{grid-column:2;grid-row:1 / span 2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);column-gap:2.5rem}
.lisiere-liens a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--pied-texte);text-underline-offset:.22em}

/* Tablette et plus : deux colonnes, la grande pièce du dos sur toute la largeur ; sans capture, une pince en tirets dans le
   bas de la pièce. Tablette seule : capture à gauche, texte à droite */
@media (min-width:40rem){
.planche{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.piece.piece-dos{grid-column:1 / -1}
.piece-dos:not(.piece-image){padding-bottom:7rem}
.piece-dos:not(.piece-image)::after{bottom:2px;left:22%;width:2.75rem;height:5.5rem;clip-path:polygon(0 100%,50% 0,100% 100%,calc(100% - 2px) 100%,50% 8px,2px 100%);background:repeating-linear-gradient(var(--trait) 0 5px,transparent 0 9px)}
}
@media (min-width:40rem) and (max-width:63.99rem){
.piece-titre{font-size:clamp(.875rem,.25rem + 1.5vw,1rem)}
.piece-dos.piece-image{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:2rem;text-align:left}
.piece-dos.piece-image .piece-capture{grid-column:1;grid-row:1 / -1;align-self:center;margin:0}
.piece-dos.piece-image > :is(p,h2){grid-column:2}
.piece-dos.piece-image .piece-une{grid-row:2;justify-content:flex-start}
.piece-dos.piece-image .piece-titre{grid-row:3;font-size:1.75rem;letter-spacing:.04em}
.piece-dos.piece-image .piece-date{grid-row:4}
.piece-dos.piece-image .piece-extrait{grid-row:5}
}

/* Ordinateur : trois puis quatre colonnes, la grande pièce du dos sur deux colonnes et deux rangées */
@media (min-width:64rem){
.planche{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.piece.piece-dos{grid-column:span 2;grid-row:span 2}
}
@media (min-width:80rem){
.planche{grid-template-columns:repeat(4,minmax(0,1fr))}
.piece:nth-child(4n+6):last-child{grid-column:span 2}
.piece:nth-child(4n+6):last-child .piece-capture{align-self:center;width:14.25rem}
.piece-titre{font-size:.8125rem;letter-spacing:.05em}
}

/* Téléphone : une colonne de pièces aux profils simplifiés (un ou deux coins coupés, un cran) ; le droit-fil descend le long du
   bord gauche, du numéro de pièce au bas de la pièce, flèche en haut et en bas ; titre, capture, date et extrait à sa droite */
@media (max-width:39.99rem){
.pochette-bande,.principal,.lisiere-interieur{width:min(100% - 2rem,75rem)}
.pochette-bande{padding:.75rem 0 .875rem}
.pochette::after{height:.875rem;background-size:100% .5rem,100% .25rem}
.marque{gap:.75rem;font-size:1.25rem}
.marque-pastille{width:2.75rem;height:2.75rem}
.marque-image{width:1.75rem;height:1.75rem}
.galons{flex:1 1 100%}
.galons ul{flex-wrap:nowrap;gap:.625rem;padding:0 .25rem}
.galons li{flex:1 1 auto}
.galons a{padding:.25rem .375rem;text-align:center}
.galons a > span{font-size:.75rem;letter-spacing:.06em}
.principal{padding-top:1.75rem}
.planche-tete{margin-bottom:1.5rem}
.piece{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:.75rem;align-content:start;min-height:0;padding:1rem 1rem 1.25rem;text-align:left}
.piece:not(.piece-dos) > *{grid-column:2}
.piece:not(.piece-dos){--fil:var(--fleche-h) 1.75rem 3.5rem / .5rem .625rem,var(--fleche-b) left 1.75rem bottom 1rem / .5rem .625rem,linear-gradient(var(--trait),var(--trait)) 1.953rem 3.5rem / 1.5px calc(100% - 4.5rem)}
.piece:not(.piece-dos) .piece-numero{position:static;grid-column:1;grid-row:1;align-self:start}
.piece:not(.piece-dos) .piece-titre{grid-row:1;align-self:center;margin:0;padding:0;background:none;font-size:clamp(.9375rem,.125rem + 4.1vw,1.0625rem);letter-spacing:.03em}
.piece:not(.piece-dos) .piece-capture{margin:.875rem 0 .25rem}
.piece:not(.piece-dos) .piece-date{margin:.5rem 0 .25rem}
.piece:nth-child(5n+1){--decoupe:polygon(0 1.25rem,1.25rem 0,100% 0,100% 100%,0 100%);--crans:var(--cran-d) 100% 60% / .625rem .875rem}
.piece:nth-child(5n+2){--decoupe:polygon(0 0,calc(100% - 1.5rem) 0,100% 1.5rem,100% 100%,0 100%);--crans:var(--cran-b) 60% 100% / .875rem .625rem}
.piece:nth-child(5n+3){--decoupe:polygon(0 0,100% 0,100% calc(100% - 1.5rem),calc(100% - 1.5rem) 100%,0 100%);--crans:var(--cran-h) 64% 0 / .875rem .625rem}
.piece:nth-child(5n+4){--decoupe:polygon(0 1.25rem,1.25rem 0,100% 0,100% calc(100% - 1.5rem),calc(100% - 1.5rem) 100%,0 100%);--crans:var(--cran-d) 100% 45% / .625rem .875rem}
.piece:nth-child(5n){--decoupe:polygon(0 0,calc(100% - 1.25rem) 0,100% 1.25rem,100% 100%,1.25rem 100%,0 calc(100% - 1.25rem));--crans:var(--cran-h) 70% 0 / .875rem .625rem}
.piece.piece-dos{display:flex;padding:3.75rem 1.25rem 1.75rem;text-align:center;--decoupe:polygon(0 1.25rem,1.25rem 0,62% 0,100% 1.5rem,100% 100%,0 100%);--crans:var(--cran-b) 64% 100% / .875rem .625rem}
.piece-dos .piece-numero{top:.875rem;left:1.25rem;min-width:2.25rem;height:2.25rem;font-size:.875rem}
.piece-dos .piece-capture{margin-bottom:1.125rem}
.piece-dos .piece-titre{font-size:clamp(1.25rem,.5rem + 4vw,1.5rem);letter-spacing:.06em}
.piece-dos .piece-extrait{font-size:1rem;-webkit-line-clamp:4}
.pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"prec suiv" "pages pages"}
.patte-precedente{grid-area:prec}
.patte-suivante{grid-area:suiv}
.pagination-pages{grid-area:pages}
.principal-notice,.principal-notice.page-plan_du_site,.principal-erreur{width:min(100% - 2rem,48rem)}
.feuille{padding:1.5rem 1.25rem 2rem}
.texte{font-size:1.0625rem}
.page-plan_du_site .texte li{padding:0}
.page-plan_du_site .texte li a{display:flex;align-items:center;min-height:2.75rem}
.piece-vide{padding:4rem 1.5rem 3rem}
.lisiere-interieur{grid-template-columns:minmax(0,1fr);padding:1.5rem 0 2rem}
.lisiere-liens{grid-column:1;grid-row:auto;margin-top:1rem;grid-template-columns:minmax(0,1fr)}
.lisiere-liens li + li{border-top:1px solid rgb(255 255 255 / 14%)}
.lisiere-liens a{display:flex;min-height:3rem}
}