:root{--accent:#1a7f37;--bulle:#ffffff;--case:#d8efdc;--eclat:#ffe17a;--encre:#0f1f15;--fond:#ecf7ee;--onoma:#ffd54f;--papier:#ffffff;--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;--recitatif:#ffe17a;--sur-accent:#ffffff;--tete-trame:#c5e5cb;--trame:#a3d6b0;--trame-2:#f3c38f;--trame-fond:#f2fbf3;--trame-fond-2:#fff6ea;}
/* Phylactère (t2b022) : l'illustré de BD. Accueil en planche : cases cernées d'encre sur une feuille blanche ; ordinateur,
   6 colonnes en cycle de 9 cases (3+3, 2+2+2, 4+2, 2+4, nth-child, dense) ; téléphone, cases empilées, bulle en alternance.
   Récitatif jaune, dessin (capture, ou trame et initiale en onomatopée), bulle, date en coin. Variables : palette (--fond
   --accent --sur-accent --encre --papier --case --bulle --recitatif --trame --trame-fond --trame-2 --trame-fond-2 --onoma
   --eclat --tete-trame) et typo (--police-titre --police-texte). 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;background:var(--fond);color:var(--encre);font-family:var(--police-texte);font-size:1rem;line-height:1.6;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--encre);text-decoration-thickness:2px;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
h1,h2,h3{font-family:var(--police-titre)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Lien d'évitement */
.evitement{position:absolute;top:.75rem;left:.75rem;z-index:50;padding:.7rem 1.2rem;background:var(--recitatif);color:var(--encre);border:3px solid var(--encre);box-shadow:4px 4px 0 var(--encre);font-weight:800;text-decoration:none;transform:translateY(-14rem)}
.evitement:focus{transform:none}

/* Explosion étoilée (marque, page courante, à la une) : un aplat clair cerné d'encre, le trait plus gras en bas à droite */
.eclat::before,.eclat::after,.pagination-pages [aria-current]::before,.pagination-pages [aria-current]::after,.case-une::before,.case-une::after{content:"";position:absolute;z-index:-1;clip-path:polygon(54% 0,62% 18%,75% 14%,74% 30%,94% 29%,85% 44%,96% 54%,78% 60%,91% 79%,72% 77%,68% 89%,56% 82%,46% 98%,39% 81%,23% 89%,27% 69%,5% 71%,15% 56%,5% 46%,21% 39%,10% 22%,28% 24%,31% 10%,44% 18%)}
.eclat::before,.pagination-pages [aria-current]::before,.case-une::before{inset:0;background:var(--encre);transform:translate(2px,2px)}
.eclat::after,.pagination-pages [aria-current]::after,.case-une::after{inset:.45rem;background:var(--eclat)}

/* Queues des bulles : un triangle d'encre et, dedans, un triangle de la couleur de la bulle qui ouvre le trait.
   Vers le haut (bulles des cases, date de l'article) ; vers le bas (menu, pagination, contact, 404). */
.case-bulle::before,.case-bulle::after,.ouverture-date::before,.ouverture-date::after{content:"";position:absolute;left:1.6rem;clip-path:polygon(0 0,100% 100%,30% 100%)}
.case-bulle::before,.ouverture-date::before{bottom:100%;width:30px;height:26px;background:var(--encre)}
.case-bulle::after,.ouverture-date::after{bottom:calc(100% - 1px);margin-left:6.5px;width:20.1px;height:17.4px;background:var(--bulle)}
.menu a::before,.menu a::after,.pagination-pages a::before,.pagination-pages a::after,.bulle-vide::before,.bulle-vide::after,.page-contact .texte > p:first-child::before,.page-contact .texte > p:first-child::after{content:"";position:absolute;left:1.1rem;clip-path:polygon(0 100%,30% 0,100% 0)}
.menu a::before,.pagination-pages a::before,.bulle-vide::before,.page-contact .texte > p:first-child::before{top:100%;width:22px;height:18px;background:var(--encre)}
.menu a::after,.pagination-pages a::after,.bulle-vide::after,.page-contact .texte > p:first-child::after{top:calc(100% - 1px);margin-left:6.6px;width:11.9px;height:9.7px;background:var(--bulle)}

/* En-tête : cartouche de titre incliné (aplat d'accent, bord d'encre, ombre dure), marque dans une explosion, menu en bulles */
.tete{background:radial-gradient(circle,var(--tete-trame) 2px,transparent 2.6px) 0 0/12px 12px,var(--fond);border-bottom:4px solid var(--encre)}
.tete-interieur{width:min(100% - 3rem,78rem);margin:0 auto;padding:1.75rem 0 1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem}
.cartouche{margin:0;min-width:0;max-width:calc(100% - .5rem);font-size:1rem;font-weight:400;line-height:1;transform:rotate(-2deg)}
.marque{display:flex;align-items:center;min-width:0;color:var(--sur-accent);text-decoration:none}
.marque:focus-visible{outline-offset:7px}
.eclat{position:relative;z-index:1;isolation:isolate;flex:none;display:grid;place-items:center;width:5.25rem;height:5.25rem;margin-right:-1.75rem;transform:rotate(10deg)}
.marque-image{display:block;width:2.75rem;height:2.75rem;transform:rotate(-10deg)}
.marque-nom{min-width:0;padding:.55rem 1.4rem .55rem 2.4rem;background:var(--accent);border:4px solid var(--encre);box-shadow:6px 6px 0 var(--encre);font-family:var(--police-titre);font-size:2.125rem;font-weight:900;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
.menu ul{list-style:none;margin:0;padding:0 0 .8rem;display:flex;flex-wrap:wrap;gap:.75rem 1rem}
.menu a{position:relative;display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.3rem 1.15rem;background:var(--bulle);border:3px solid var(--encre);border-radius:1.5rem;font-weight:700;line-height:1.15;text-align:center;text-decoration:none}
.menu a:hover{text-decoration:underline}
.menu a[aria-current="page"],.menu a[aria-current="page"]::after{background:var(--recitatif)}

/* Planche : feuille blanche, ombre dure à l'accent ; récitatif d'en-tête collé de travers */
.principal{flex:1 0 auto;width:min(100% - 3rem,78rem);margin:0 auto;padding-top:3rem}
.planche{padding:.9rem;background:var(--papier);border:3px solid var(--encre);box-shadow:10px 10px 0 var(--accent)}
.planche-titre{width:fit-content;max-width:100%;margin:-2.2rem 0 .9rem -.4rem;padding:.35rem .9rem .3rem;background:var(--recitatif);border:3px solid var(--encre);font-family:var(--police-titre);font-size:.875rem;font-weight:800;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-1.5deg)}
.planche-folio{margin-left:.3rem;padding:0 .4rem;background:var(--encre);color:var(--recitatif)}
.vide{margin:0;padding:1.5rem;border:4px solid var(--encre);background:var(--case);font-weight:700}

/* Cases (la case entière mène à l'article : lien étendu du titre) ; --haut : hauteur du dessin, selon la largeur de la case */
.cases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:.9rem}
.case{position:relative;container-type:inline-size;grid-column:span 6;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"dessin" "bulle" "date";background:var(--case);border:4px solid var(--encre)}
.case-titre{grid-area:dessin;align-self:start;justify-self:start;z-index:3;max-width:calc(100% - 1.5rem);margin:0;padding:.4rem .65rem .45rem;background:var(--recitatif);border:solid var(--encre);border-width:0 3px 3px 0;font-size:.9375rem;font-weight:800;line-height:1.2;letter-spacing:.025em;text-transform:uppercase}
.case-lien{color:var(--encre);text-decoration:none}
.case-lien::after{content:"";position:absolute;inset:-4px;z-index:1}
.case:hover .case-lien{text-decoration:underline}
.case-lien:focus-visible{outline:0}
.case-lien:focus-visible::after{outline:4px solid var(--accent);outline-offset:3px}
.case-dessin{grid-area:dessin;position:relative;display:grid;overflow:hidden;background:var(--trame-fond)}
.case-dessin::before{content:"";grid-area:1/1;padding-top:var(--haut,56%)}
.case-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:var(--trame-fond)}
.case-onoma{grid-area:1/1;place-self:center;position:relative;z-index:1;margin-top:1.5rem;padding:0 .12em;font-family:var(--police-titre);font-size:clamp(4.5rem,32cqi,11rem);font-style:italic;font-weight:900;line-height:1;color:var(--onoma);-webkit-text-stroke:5px var(--encre);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--encre);transform:rotate(-8deg)}

/* Sans image : trame de points d'imprimerie (ou traits de vitesse), en trois tons qui tournent */
.case-sans-image .case-dessin::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--trame) 3px,transparent 3.6px) 0 0/13px 13px,radial-gradient(circle,var(--trame) 3px,transparent 3.6px) 6.5px 6.5px/13px 13px;-webkit-mask-image:linear-gradient(155deg,#000 10%,transparent 88%);mask-image:linear-gradient(155deg,#000 10%,transparent 88%)}
.case-sans-image:nth-child(3n+2) .case-dessin,.case-sans-image:nth-child(3n) .case-dessin{background:var(--trame-fond-2)}
.case-sans-image:nth-child(3n+2) .case-dessin::after{background:repeating-conic-gradient(from 3deg at 50% 50%,var(--trame-2) 0 4deg,transparent 4deg 13deg);-webkit-mask-image:radial-gradient(circle,transparent 22%,#000 66%);mask-image:radial-gradient(circle,transparent 22%,#000 66%)}
.case-sans-image:nth-child(3n+2) .case-onoma{color:var(--bulle)}
.case-sans-image:nth-child(3n) .case-dessin::after{background:radial-gradient(circle,var(--trame-2) 3px,transparent 3.6px) 0 0/13px 13px,radial-gradient(circle,var(--trame-2) 3px,transparent 3.6px) 6.5px 6.5px/13px 13px}
.case-sans-image:nth-child(3n) .case-onoma{color:var(--accent)}

/* Bulle de l'extrait (queue à gauche, à droite une case sur deux) et date dans le coin */
.case-bulle{grid-area:bulle;position:relative;z-index:2;margin:-1.5rem .9rem .9rem;padding:.7rem 1rem .75rem;background:var(--bulle);border:3px solid var(--encre);border-radius:1.4rem;font-size:.9375rem;line-height:1.5}
.case:nth-child(even) .case-bulle::before,.case:nth-child(even) .case-bulle::after{left:auto;right:1.6rem;clip-path:polygon(100% 0,0 100%,70% 100%)}
.case:nth-child(even) .case-bulle::after{margin:0 6.5px 0 0}
.case-date{grid-area:date;justify-self:end;margin:0;padding:.3rem .65rem .25rem;background:var(--papier);border:solid var(--encre);border-width:3px 0 0 3px;font-size:.75rem;font-weight:700;line-height:1.3;letter-spacing:.05em;text-transform:uppercase}
.case:nth-child(even) .case-date{justify-self:start;border-width:3px 3px 0 0}

/* Case d'ouverture : grand récitatif ; « à la une » dans une explosion collée à cheval sur le bord haut de la case, pour
   laisser au titre toute sa largeur (un domaine long ne se coupe pas en plein mot) */
.case-ouverture{--haut:56.25%}
.case-ouverture.case-sans-image{--haut:74%}
.case-ouverture .case-titre{max-width:calc(100% - 2.5rem);padding:.55rem 1.1rem .6rem;border-width:0 4px 4px 0;font-size:clamp(1.25rem,4.4cqi,2.25rem);line-height:1.1}
.case-une{grid-area:dessin;align-self:start;justify-self:end;position:relative;z-index:2;isolation:isolate;display:grid;place-items:center;width:6.25rem;height:6.25rem;margin:-3.75rem -.4rem 0 0;padding:1rem 1.5rem;font-family:var(--police-titre);font-size:.8125rem;font-weight:900;line-height:1.05;letter-spacing:.03em;text-align:center;text-transform:uppercase;transform:rotate(12deg);pointer-events:none}
.case-onoma-seule{display:none}

/* Pagination : chiffres dans de petites bulles rondes, la page courante dans une explosion */
.pagination{margin:2.75rem 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.1rem 1.5rem}
.pagination-pages{list-style:none;margin:0;padding:0 0 .6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem .75rem}
.pagination-pages a{position:relative;display:grid;place-items:center;width:2.875rem;height:2.875rem;background:var(--bulle);border:3px solid var(--encre);border-radius:50%;font-family:var(--police-titre);font-weight:800;text-decoration:none}
.pagination-pages a:hover{text-decoration:underline}
.pagination-pages a::before,.pagination-pages a::after{left:.3rem}
.pagination-pages a::before{width:18px;height:14px}
.pagination-pages a::after{margin-left:6.7px;width:7.7px;height:6px}
.pagination-pages [aria-current]{position:relative;isolation:isolate;display:grid;place-items:center;width:4.5rem;height:4.5rem;margin:-.8125rem -.35rem;font-family:var(--police-titre);font-size:1.375rem;font-weight:900}
.pagination-sens,.retour a{display:inline-flex;align-items:center;gap:.6rem;min-height:2.875rem;padding:.45rem 1.25rem;background:var(--accent);color:var(--sur-accent);border:3px solid var(--encre);box-shadow:4px 4px 0 var(--encre);font-family:var(--police-titre);font-weight:800;letter-spacing:.03em;text-decoration:none;text-transform:uppercase}
.pagination-sens:hover,.retour a:hover{text-decoration:underline}
.pagination-precedente::before,.retour a::before,.pagination-suivante::after{content:"";flex:none;width:.5rem;height:.5rem;border:solid currentColor;border-width:0 0 3px 3px;transform:rotate(45deg)}
.pagination-suivante::after{border-width:3px 3px 0 0}

/* Pied : dernière bande de la planche, une case large */
.pied{width:min(100% - 3rem,78rem);margin:3.75rem auto 2.75rem;padding:.9rem;background:var(--papier);border:3px solid var(--encre);box-shadow:10px 10px 0 var(--accent)}
.pied-case{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"nom liens domaine";align-items:center;gap:.5rem 1.5rem;min-height:5.5rem;background:var(--case);border:4px solid var(--encre)}
.pied-nom{grid-area:nom;align-self:start;margin:0;padding:.5rem 1rem;background:var(--recitatif);border:solid var(--encre);border-width:0 3px 3px 0;font-family:var(--police-titre);font-weight:900;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.pied-liens{grid-area:liens;list-style:none;margin:0;padding:.6rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.75rem}
.pied-liens a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700}
.pied-domaine{grid-area:domaine;align-self:end;margin:0;padding:.3rem .7rem .25rem;background:var(--papier);border:solid var(--encre);border-width:3px 0 0 3px;font-size:.8125rem;font-weight:700;letter-spacing:.04em}

/* Article et pages : une planche ; case de titre tramée (h1 en récitatif, date en bulle), puis une grande case blanche */
.principal-lecture{width:min(100% - 3rem,52rem)}
.principal-lecture.page-plan_du_site{width:min(100% - 3rem,78rem)}
.planche-lecture{display:grid;gap:.9rem}
.ouverture{padding:1.75rem 1.75rem 1.6rem;border:4px solid var(--encre);background:radial-gradient(circle,var(--trame) 3px,transparent 3.6px) 0 0/13px 13px,radial-gradient(circle,var(--trame) 3px,transparent 3.6px) 6.5px 6.5px/13px 13px,var(--trame-fond)}
.ouverture-titre{width:fit-content;max-width:100%;margin:0;padding:.6rem 1rem .65rem;background:var(--recitatif);border:3px solid var(--encre);box-shadow:5px 5px 0 var(--encre);font-size:clamp(1.25rem,.85rem + 1.7vw,2.25rem);font-weight:900;line-height:1.12;letter-spacing:.01em;text-transform:uppercase;overflow-wrap:anywhere;transform:rotate(-1deg)}
.ouverture-suite{font-size:max(.75rem,.62em);font-weight:800}
.ouverture-date{position:relative;width:fit-content;margin:1.75rem 0 0 1.5rem;padding:.4rem 1rem;background:var(--bulle);border:3px solid var(--encre);border-radius:1.5rem;font-size:.875rem;font-weight:700}
.case-texte{padding:2rem 2.5rem 2.25rem;background:var(--papier);border:4px solid var(--encre);font-size:1.0625rem;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 h2,.texte h3{width:fit-content;max-width:100%;margin:2rem 0 .8rem;padding:.2rem .65rem;background:var(--recitatif);border:3px solid var(--encre);font-size:1.0625rem;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
.texte a{color:var(--accent);text-decoration-thickness:1px;overflow-wrap:anywhere}
.texte a:hover{text-decoration-thickness:2px}
.texte img{display:block;width:100%;height:auto;margin:1.75rem 0;border:4px solid var(--encre);box-shadow:6px 6px 0 var(--accent)}
.texte ul,.texte ol{padding-left:1.25rem}
.texte li{margin:.3em 0}
.texte li::marker{color:var(--accent)}
.retour{margin:2.25rem 0 0;text-align:center}

/* Plan du site : liens en colonnes dans la case ; contact : la phrase en bulle, le cadre dans une case ; 404 : case vide */
.page-plan_du_site .texte > ul{list-style:none;padding:0;columns:3 16rem;column-gap:2.25rem}
.page-plan_du_site .texte > ul:first-child{columns:auto;display:flex;flex-wrap:wrap;gap:.75rem 1rem}
.page-plan_du_site .texte > ul li{break-inside:avoid;margin:0;padding:.2rem 0}
.page-plan_du_site .texte > ul:first-child a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.3rem 1.1rem;background:var(--bulle);border:3px solid var(--encre);border-radius:1.5rem;color:var(--encre);font-weight:700;text-decoration:none}
.page-plan_du_site .texte nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.page-plan_du_site .texte nav li{margin:0}
.page-plan_du_site .texte nav a,.page-plan_du_site .texte nav b{display:grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding:.2rem .7rem;border:3px solid var(--encre);border-radius:1.5rem}
.page-plan_du_site .texte nav b{background:var(--recitatif)}
.page-contact .case-texte{background:var(--case)}
.page-contact .texte > p:first-child{position:relative;width:fit-content;max-width:100%;margin:0 0 2.6rem;padding:.9rem 1.3rem;background:var(--bulle);border:3px solid var(--encre);border-radius:1.5rem;font-weight:600}
.page-contact iframe{display:block;box-shadow:0 0 0 4px var(--encre),8px 8px 0 4px var(--accent)}
.case-vide{display:grid;place-items:center;min-height:19rem;padding:2rem 1.25rem 3rem;border:4px solid var(--encre);background:repeating-conic-gradient(from 0deg at 50% 50%,var(--trame-fond) 0 4deg,var(--case) 4deg 8deg)}
.bulle-vide{position:relative;max-width:28rem;margin:0;padding:1.2rem 1.5rem;background:var(--bulle);border:3px solid var(--encre);border-radius:2rem;font-family:var(--police-titre);font-size:1.25rem;font-weight:800;line-height:1.35;text-align:center}
.bulle-vide::before,.page-contact .texte > p:first-child::before{left:2.5rem;width:30px;height:26px}
.bulle-vide::after,.page-contact .texte > p:first-child::after{left:2.5rem;margin-left:6.5px;width:20.1px;height:17.4px}

/* Tablette et plus : ouverture empilée (dessin, puis bulle) ; sans image, trame géante sur toute la largeur et titre en
   onomatopée. Jusqu'à 48 rem, les cases restent pleine largeur : deux colonnes y seraient plus étroites qu'un téléphone. */
@media (min-width:40rem){
.case{--haut:42%}
.case-ouverture{--haut:56.25%}
.case-ouverture .case-bulle{font-size:1.0625rem}
.case-ouverture.case-sans-image{--haut:36%}
.case-ouverture.case-sans-image .case-dessin::after{background:repeating-conic-gradient(from 3deg at 50% 50%,var(--trame) 0 4deg,transparent 4deg 12deg),radial-gradient(circle,var(--trame) 5px,transparent 5.6px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(circle,transparent 16%,#000 72%);mask-image:radial-gradient(circle,transparent 16%,#000 72%)}
.case-ouverture.case-sans-image .case-onoma{display:none}
.case-ouverture.case-sans-image .case-titre{align-self:center;justify-self:center;max-width:calc(100% - 2rem);margin-top:1.5rem;padding:1rem .5rem;background:none;border:0;font-size:clamp(1.5rem,5cqi,4.5rem);font-style:italic;font-weight:900;line-height:1;text-align:center;transform:rotate(-4deg)}
.case-ouverture.case-sans-image .case-lien{color:var(--accent);-webkit-text-stroke:2px var(--encre);text-shadow:.05em .05em 0 var(--encre)}
}

/* Grande tablette : cases par deux, une sur neuf en bandeau */
@media (min-width:48rem){
.case{grid-column:span 3;--haut:60%}
.case:nth-child(9n+4),.case:nth-child(9n+2):last-child,.case:nth-child(9n+5):last-child,.case:nth-child(9n+7):last-child,.case:nth-child(9n+9):last-child{grid-column:span 6;--haut:36%}
.case-ouverture{grid-column:span 6;--haut:56.25%}
}

/* Ordinateur : la planche en cycle de neuf cases, 3+3, 2+2+2, 4+2, 2+4 ; la dernière case seule d'une rangée la remplit.
   Ouverture avec image en deux parts : le dessin, et la bulle qui en sort (sans extrait, une onomatopée géante). */
@media (min-width:64rem){
.case,.case:nth-child(9n+4){grid-column:span 2;--haut:62.5%}
.case:nth-child(9n+2),.case:nth-child(9n+3){grid-column:span 3;--haut:50%}
.case:nth-child(9n+7),.case:nth-child(9n+10),.case:nth-child(9n+5):last-child{grid-column:span 4;--haut:42.8%}
.case:nth-child(9n+2):last-child,.case:nth-child(9n+4):last-child,.case:nth-child(9n+7):last-child,.case:nth-child(9n+9):last-child{grid-column:span 6;--haut:30%}
.case-ouverture{grid-column:span 6;--haut:56.25%}
.case-ouverture.case-sans-image{--haut:30%}
.case-ouverture:not(.case-sans-image){grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"dessin bulle" "dessin date";background:repeating-conic-gradient(from 0deg at 0 50%,var(--case) 0 3deg,var(--trame-fond) 3deg 6deg)}
.case-ouverture:not(.case-sans-image) .case-dessin{border-right:4px solid var(--encre)}
.case-ouverture:not(.case-sans-image) .case-titre{font-size:clamp(1.25rem,3.4cqi,2.25rem)}
.case-ouverture:not(.case-sans-image) .case-une{grid-area:bulle}
.case-ouverture:not(.case-sans-image) .case-bulle{align-self:center;margin:2rem 2rem 2rem 2.4rem;padding:1.15rem 1.4rem;font-size:1.1875rem;line-height:1.55}
.case-ouverture:not(.case-sans-image) .case-bulle::before{left:auto;right:100%;bottom:auto;top:1.75rem;width:26px;height:30px;clip-path:polygon(0 0,100% 30%,100% 100%)}
.case-ouverture:not(.case-sans-image) .case-bulle::after{left:auto;right:calc(100% - 1px);bottom:auto;top:1.75rem;margin:6.5px 0 0;width:17.4px;height:20.1px;clip-path:polygon(0 0,100% 30%,100% 100%)}
.case-onoma-seule{display:block;grid-area:bulle;margin:0 0 1.75rem;font-size:clamp(7rem,16cqi,13rem)}
}

/* Téléphone : cartouche incliné en tête, cases empilées pleine largeur sur la feuille, bulles en alternance */
@media (max-width:39.99rem){
.tete-interieur{width:min(100% - 2rem,78rem);padding:1.25rem 0 1.1rem;gap:1rem}
.cartouche,.menu{flex:1 1 100%}
.eclat{width:3.75rem;height:3.75rem;margin-right:-1.25rem}
.eclat::before{transform:translate(1px,1px)}
.eclat::after{inset:.3rem}
.marque-image{width:2rem;height:2rem}
.marque-nom{padding:.45rem .8rem .45rem 1.6rem;box-shadow:5px 5px 0 var(--encre);font-size:clamp(1rem,5.1vw,2.125rem);letter-spacing:.01em}
.menu ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.menu a{padding:.3rem;font-size:.875rem}
.principal,.principal-lecture,.principal-lecture.page-plan_du_site,.pied{width:100%}
.principal{padding-top:2.5rem}
.planche,.pied{padding:.75rem;border-width:3px 0;box-shadow:none}
.planche-titre{margin:-1.95rem 0 .75rem .1rem}
.cases,.planche-lecture{gap:.75rem}
.case-titre{letter-spacing:.02em}
.case-bulle{margin:-1.25rem .75rem .75rem}
.case-ouverture .case-titre{max-width:calc(100% - 1.5rem);padding:.5rem .8rem .55rem;font-size:clamp(1rem,5.2cqi,2.25rem)}
.case-une{width:4.75rem;height:4.75rem;margin:-3.4rem -.2rem 0 0;padding:.75rem 1.1rem;font-size:.6875rem}
.pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .75rem;padding:0 1rem}
.pagination-sens{justify-content:center;padding:.4rem .6rem;font-size:.875rem}
.pagination-suivante{grid-column:2}
.pagination-pages{grid-column:1/-1;grid-row:2}
.ouverture{padding:1.1rem .6rem 1rem}
.ouverture-titre{padding:.5rem .6rem .55rem;font-size:clamp(1rem,4.6vw,1.5rem)}
.vue-page .ouverture-titre,.vue-erreur .ouverture-titre{font-size:clamp(1.25rem,6vw,1.75rem)}
.ouverture-date{margin-left:.75rem}
.case-texte{padding:1.4rem 1.1rem 1.6rem}
.page-contact .case-texte{padding:1.25rem .9rem 1.5rem}
.page-plan_du_site .texte > ul a{display:flex;align-items:center;min-height:2.75rem}
.retour{padding:0 1rem}
.pied{margin:3rem 0 0}
.pied-case{grid-template-columns:minmax(0,1fr);grid-template-areas:"nom" "liens" "domaine"}
.pied-nom{justify-self:start}
.pied-liens{flex-direction:column;padding:.4rem 1rem}
.pied-liens a{display:flex}
.pied-domaine{justify-self:end}
}