:root{--accent:#1f58b8;--accent-fonce:#16438e;--c1:#f0604d;--c2:#ffc933;--c3:#3dbb7b;--c4:#7356e8;--doux:#4a5b76;--encre:#14233d;--f1:#b23a2b;--f2:#cf9300;--f3:#21804f;--f4:#4f35b5;--focus:#14233d;--fond:#eef6fc;--l1:#14233d;--l2:#14233d;--l3:#14233d;--l4:#ffffff;--ombre:#14233d;--pastille:#e3f0fb;--pied:#14233d;--pied-doux:#b8c7dd;--pied-texte:#eef6fc;--police-texte:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",source-sans-pro,sans-serif;--police-titre:"Iowan Old Style","Palatino Linotype","URW Palladio L",P052,serif;--sur-accent:#ffffff;--sur-pastille:#14233d;--surface:#ffffff;--texte:#14233d;}
/* Ribambelle (t2b137) : blog famille et enfants, gai et bien rangé. Des cubes d'alphabet portent l'initiale de chaque article ;
   les cartes à gros contour ondulent en ribambelle (décalage vertical par colonne : 0, 1,5, 3 puis 1,5 rem sur ordinateur ;
   sur téléphone, deux colonnes, celle de droite plus bas) et quatre couleurs de crayon tournent d'une carte à l'autre, en
   diagonale. La première carte de chaque page est le coffre à jouets : couvercle, fermoir et gros cube qui dépasse.
   Variables des options : --fond --surface --texte --doux --accent --accent-fonce --sur-accent --encre --ombre --focus,
   --c1 à --c4 (crayons), --f1 à --f4 (faces des cubes), --l1 à --l4 (lettres sur les cubes), --pied --pied-texte --pied-doux
   --pastille --sur-pastille (palette) ; --police-titre --police-texte (typo). Polices système, aucune ressource externe. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{--c:var(--c1);--f:var(--f1);--l:var(--l1);margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--fond);color:var(--texte);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(--accent);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3{font-family:var(--police-titre);font-weight:800;line-height:1.15}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Boîte de crayons : chaque élément prend un crayon (--c), la face sombre de son cube (--f) et la couleur de sa lettre (--l).
   Les cartes tournent en diagonale sur 16 : jamais deux fois la même couleur côte à côte, en 2 comme en 4 colonnes. */
.menu li:nth-child(3n+2),.pagination-cubes li:nth-child(4n+2),.corps h2:nth-of-type(4n+2),.carte:is(:nth-child(16n+2),:nth-child(16n+5),:nth-child(16n+12),:nth-child(16n+15)){--c:var(--c2);--f:var(--f2);--l:var(--l2)}
.menu li:nth-child(3n),.pagination-cubes li:nth-child(4n+3),.corps h2:nth-of-type(4n+3),.carte:is(:nth-child(16n+3),:nth-child(16n+6),:nth-child(16n+9),:nth-child(16n)){--c:var(--c3);--f:var(--f3);--l:var(--l3)}
.pagination-cubes li:nth-child(4n),.corps h2:nth-of-type(4n),.carte:is(:nth-child(16n+4),:nth-child(16n+7),:nth-child(16n+10),:nth-child(16n+13)){--c:var(--c4);--f:var(--f4);--l:var(--l4)}

/* Cube d'alphabet : face au crayon, faces droite et basse plus foncées, contour d'encre, liseré clair */
.cube{flex:none;display:inline-grid;place-items:center;width:2em;height:2em;border:0 solid var(--f);border-width:0 .16em .16em 0;border-radius:.32em;background:var(--c);color:var(--l);box-shadow:0 0 0 2px var(--encre),inset 0 0 0 .1em rgb(255 255 255 / 30%);font-family:var(--police-titre);font-weight:800;line-height:1;text-decoration:none;rotate:-6deg}

/* Lien d'évitement */
.evitement{position:absolute;top:.75rem;left:.75rem;z-index:20;padding:.75rem 1.25rem;border:2.5px solid var(--encre);border-radius:999px;background:var(--surface);color:var(--texte);font-weight:800;transform:translateY(-10rem)}
.evitement:focus{transform:none}

/* En-tête : rayures pastel, marque sur un cube incliné, menu en pastilles à carré de couleur */
.entete::before{content:"";display:block;height:.6rem;background:repeating-linear-gradient(-60deg,var(--c1) 0 .75rem,var(--c2) 0 1.5rem,var(--c3) 0 2.25rem,var(--c4) 0 3rem);background:repeating-linear-gradient(-60deg,color-mix(in srgb,var(--c1) 55%,var(--pastille)) 0 .75rem,color-mix(in srgb,var(--c2) 55%,var(--pastille)) 0 1.5rem,color-mix(in srgb,var(--c3) 55%,var(--pastille)) 0 2.25rem,color-mix(in srgb,var(--c4) 55%,var(--pastille)) 0 3rem)}
.entete-interieur,.principal,.pied-interieur{width:min(100% - 2rem,80rem);margin-inline:auto}
.entete-interieur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1rem 0 1.125rem}
.marque{display:inline-flex;align-items:center;gap:.875rem;min-width:0;min-height:2.75rem;color:var(--texte);font-family:var(--police-titre);font-size:1.25rem;font-weight:800;line-height:1.15;text-decoration:none}
.marque-cube{--c:var(--surface);--f:var(--accent);font-size:1.375rem;rotate:-8deg}
.marque-image{display:block;width:1.875rem;height:1.875rem}
.marque-nom{min-width:0;overflow-wrap:anywhere}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
.menu{flex:1 1 100%}
.menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem}
.menu a{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.25rem .5rem;border:2.5px solid var(--encre);border-radius:999px;background:var(--surface);color:var(--texte);font-size:.9375rem;font-weight:700;line-height:1.15;text-align:center;text-decoration:none;box-shadow:3px 3px 0 var(--ombre)}
.menu a::before{content:"";position:absolute;top:-.45rem;left:.625rem;width:.75rem;height:.75rem;border-radius:.2rem;background:var(--c);box-shadow:0 0 0 2px var(--encre);rotate:-10deg}
.menu a:hover{text-decoration:underline}
.menu a[aria-current="page"]{background:var(--accent);color:var(--sur-accent)}
.menu a[aria-current="page"]::before{background:var(--sur-accent)}

/* Contenu */
.principal{flex:1 0 auto}
.principal-lecture{width:min(100% - 2rem,42rem)}

/* Accueil : le nom du site en grand, souligné du trait à quatre couleurs */
.titraille{margin:1.75rem 0 0}
.titraille-nom{margin:0;font-size:clamp(1.75rem,.75rem + 5vw,4.25rem);line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.titraille-nom::after,.lecture-titre::after,.erreur-titre::after{content:"";display:block;width:9rem;max-width:50%;height:.55rem;margin-top:.875rem;border-radius:99px;background:linear-gradient(90deg,var(--c1) 0 25%,var(--c2) 0 50%,var(--c3) 0 75%,var(--c4) 0)}
.titraille-sous{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.125rem 0 0}
.bulle{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 .3em;min-height:2.25rem;padding:.25rem .875rem;border:2px solid var(--encre);border-radius:999px;background:var(--surface);color:var(--texte);font-size:.9375rem;font-weight:700;line-height:1.3}
.bulle-une{background:var(--accent);color:var(--sur-accent)}
.vide{margin:2rem 0 0}

/* Coffre à jouets : la première carte de chaque page (premiere), couvercle plus foncé, fermoir, gros cube qui dépasse */
.coffre{position:relative;container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);margin:3rem 0 0;background:var(--surface);border:2.5px solid var(--encre);border-radius:1.5rem;box-shadow:5px 5px 0 var(--ombre)}
.coffre-couvercle{position:relative;height:1.5rem;border-bottom:2.5px solid var(--encre);border-radius:1.35rem 1.35rem 0 0;background:var(--accent);box-shadow:inset 0 .3rem 0 rgb(255 255 255 / 22%)}
.coffre-couvercle::after{content:"";position:absolute;left:50%;bottom:-.8rem;z-index:1;width:2.5rem;height:1.25rem;margin-left:-1.25rem;border:2.5px solid var(--encre);border-radius:.45rem;background:var(--surface)}
.coffre-cube{position:absolute;top:-1.4rem;right:1.25rem;z-index:3;font-size:1.75rem;rotate:8deg}
.coffre-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 0}
.coffre-champ{position:relative;display:grid;place-items:center;min-height:12rem;overflow:hidden;background:var(--fond);background:radial-gradient(circle,color-mix(in srgb,var(--fond) 70%,transparent) 0 .2rem,transparent .25rem) 0 0/1.5rem 1.5rem,color-mix(in srgb,var(--c2) 24%,var(--surface))}
.coffre-champ::before,.coffre-champ::after{content:"";position:absolute;bottom:1.25rem;left:calc(50% - 6.75rem);width:2.75rem;height:2.75rem;border:solid var(--f3);border-width:0 .3rem .3rem 0;border-radius:.5rem;background:var(--c3);box-shadow:0 0 0 2px var(--encre);rotate:-12deg}
.coffre-champ::after{left:auto;right:calc(50% - 6.75rem);border-color:var(--f4);background:var(--c4);rotate:10deg}
.coffre-gros-cube{--c:var(--c1);--f:var(--f1);--l:var(--l1);position:relative;z-index:1;font-size:3.25rem}
.coffre-texte{display:flex;flex-direction:column;align-items:flex-start;gap:.875rem;padding:1.25rem 1.25rem 1.5rem}
.coffre-etiquettes{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.coffre-titre{margin:0;font-size:clamp(1.375rem,7.5cqi,2rem);line-height:1.12;overflow-wrap:anywhere}
.coffre-lien,.carte-lien{color:var(--texte);text-decoration:none}
.coffre-lien::after,.carte-lien::after{content:"";position:absolute;inset:-2.5px;z-index:4;border-radius:1.5rem}
.coffre:hover .coffre-lien,.carte:hover .carte-lien{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--accent)}
.coffre-lien:focus-visible,.carte-lien:focus-visible{outline:0}
.coffre-lien:focus-visible::after,.carte-lien:focus-visible::after{outline:3px solid var(--focus);outline-offset:4px}
.coffre-extrait{margin:0;font-size:1.0625rem}
.coffre-suite{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:.25rem 1.125rem;border:2.5px solid var(--encre);border-radius:999px;background:var(--accent);color:var(--sur-accent);font-weight:800;box-shadow:3px 3px 0 var(--ombre)}
.coffre-suite::after{content:"\2192"}
.carte-rang,.coffre-rang{position:absolute;top:.375rem;right:.375rem;display:grid;place-items:center;min-width:1.75rem;height:1.75rem;padding:0 .375rem;border:2px solid var(--encre);border-radius:999px;background:var(--surface);color:var(--texte);font-size:.75rem;font-weight:800;line-height:1}
.coffre-rang{top:1rem;right:auto;left:1rem;min-width:2.25rem;height:2.25rem;font-size:.9375rem}

/* La ribambelle : deux colonnes sur téléphone, celle de droite plus bas, cubes inclinés tour à tour */
.ribambelle{list-style:none;margin:2.75rem 0 0;padding:0 0 2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem .75rem}
.ribambelle:not(:has(li)){display:none}
.carte{position:relative;container-type:inline-size;display:flex;flex-direction:column;background:var(--surface);border:2.5px solid var(--encre);border-radius:1rem;box-shadow:3px 3px 0 var(--ombre)}
.carte:nth-child(even){translate:0 2rem}
.carte::before{content:"";position:absolute;top:calc(50% - .3125rem);right:calc(100% + 2.5px);display:none;width:.75rem;height:.625rem;border-block:2px solid var(--encre);background:var(--c)}
.carte:nth-child(even)::before{display:block}
.carte-visuel{position:relative;display:grid;place-items:center;border-bottom:.3125rem solid var(--c);border-radius:.85rem .85rem 0 0}
.carte-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 0;border-radius:inherit}
.carte-cube{position:absolute;top:-.625rem;left:-.5rem;z-index:1;font-size:1.125rem}
.carte:nth-child(even) .cube{rotate:6deg}
.carte-nue .carte-visuel{aspect-ratio:16/9;background:var(--fond);background:radial-gradient(circle,color-mix(in srgb,var(--fond) 70%,transparent) 0 .15rem,transparent .19rem) 0 0/1.125rem 1.125rem,color-mix(in srgb,var(--c) 24%,var(--surface))}
.carte-nue .carte-cube{position:static;font-size:clamp(1.25rem,16.5cqi,3rem)}
.carte-titre{margin:.75rem .5rem .25rem;font-size:clamp(.875rem,4vw,1rem);font-size:clamp(.8125rem,8.5cqi,1.1875rem);letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.carte-lien::after{border-radius:1rem}
.carte-date{margin:0 .5rem;color:var(--doux);font-size:.75rem;font-weight:700}
.carte-date:last-child{margin-bottom:.875rem}
.carte-extrait{margin:.375rem .5rem .875rem;font-size:.8125rem;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* Titre et marges proportionnels à la carte (cqi) : un domaine se coupe au même nombre de lettres en 2, 3 ou 4 colonnes */
.carte-titre,.carte-date,.carte-extrait{margin-inline:clamp(.5rem,5.5cqi,1.125rem)}

/* Pagination : des cubes numérotés */
.pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"cubes cubes" "prec suiv";gap:1.25rem .75rem;margin:3rem 0 0}
.pagination-cubes{grid-area:cubes;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.875rem .75rem}
.pagination-cubes .cube{font-size:1.375rem}
.pagination-cubes li:nth-child(even) .cube{rotate:5deg}
.pagination-cubes a.cube:hover{text-decoration:underline;text-decoration-thickness:2px}
.pagination-cubes [aria-current]{--c:var(--texte);--f:var(--accent);--l:var(--fond);rotate:none;scale:1.12}
.pagination-sens{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:2.75rem;padding:.375rem 1rem;border:2.5px solid var(--encre);border-radius:999px;background:var(--surface);color:var(--texte);font-weight:800;line-height:1.2;text-align:center;text-decoration:none;box-shadow:3px 3px 0 var(--ombre)}
.pagination-sens:hover{text-decoration:underline}
.pagination-precedente{grid-area:prec;justify-self:start}
.pagination-suivante{grid-area:suiv;justify-self:end}
.pagination-precedente::before{content:"\2190"}
.pagination-suivante::after{content:"\2192"}

/* Article et pages : une colonne de 42 rem, titre souligné du trait à quatre couleurs, date dans une bulle */
.lecture-entete{margin:2.25rem 0 2rem}
.lecture-titre{margin:0;font-size:clamp(1.375rem,1rem + 2vw,2.75rem);line-height:1.32;overflow-wrap:anywhere}
.lecture-suite{color:var(--doux);font-weight:600}
.lecture-titre::first-letter{margin-right:.08em;padding:0 .15em;border:solid var(--f1);border-width:0 .08em .08em 0;border-radius:.16em;background:var(--c1);color:var(--l1);box-shadow:0 0 0 2px var(--encre),inset 0 0 0 .05em rgb(255 255 255 / 30%);text-transform:uppercase}
.lecture-date{margin:1.25rem 0 0}
.lecture-date .bulle{position:relative}
.lecture-date .bulle::after{content:"";position:absolute;left:1.25rem;bottom:-.47rem;width:.8rem;height:.8rem;border:solid var(--encre);border-width:0 2px 2px 0;background:inherit;rotate:45deg}
.corps{font-size:1.125rem;line-height:1.8}
.corps > :first-child{margin-top:0}
.corps p,.corps ul,.corps ol{margin:0 0 1.2em}
.corps a{overflow-wrap:anywhere}
.corps h2{display:flex;align-items:center;gap:.875rem;margin:2.25rem 0 .75rem;font-size:1.375rem;line-height:1.25}
.corps h2::before{content:"";flex:none;width:1.125rem;height:1.125rem;border:solid var(--f);border-width:0 .2rem .2rem 0;border-radius:.25rem;background:var(--c);box-shadow:0 0 0 2px var(--encre);rotate:-8deg}
.corps img{display:block;width:100%;height:auto;margin:2.25rem 0;border:2.5px solid var(--encre);border-radius:1.25rem;box-shadow:6px 6px 0 var(--ombre)}
.vue-article .corps p:has(> a){position:relative;padding:.875rem 1.125rem .875rem 2.875rem;border:2.5px solid var(--encre);border-radius:1rem;background:var(--surface);box-shadow:4px 4px 0 var(--ombre);font-size:1rem;line-height:1.55}
.vue-article .corps p:has(> a)::before{content:"";position:absolute;top:1.125rem;left:1.125rem;width:.875rem;height:.875rem;border-radius:.2rem;background:var(--c3);box-shadow:0 0 0 2px var(--encre);rotate:-8deg}
.vue-article .corps > p:first-child:has(> a)::before{background:var(--c1)}
.vue-article .corps p:has(> a) a{padding-block:.8rem}
.retour{margin:2.75rem 0 0;text-align:center}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3.25rem;padding:.5rem 1.75rem;border:2.5px solid var(--encre);border-radius:999px;background:var(--accent);color:var(--sur-accent);font-size:1.125rem;font-weight:800;line-height:1.2;text-decoration:none;box-shadow:4px 4px 0 var(--ombre)}
.bouton::before{content:"\2190"}
.bouton:hover{background:var(--accent-fonce);text-decoration:underline}

/* Pages de service */
.page-plan_du_site .corps{font-size:1rem;line-height:1.5}
.page-plan_du_site .corps ul{list-style:none;padding:0}
.page-plan_du_site .corps > ul:first-child,.page-plan_du_site nav ul{display:flex;flex-wrap:wrap;gap:.75rem}
.page-plan_du_site .corps > ul:first-child a,.page-plan_du_site nav :is(a,b){display:inline-flex;align-items:center;min-height:2.75rem;padding:.25rem 1.125rem;border:2.5px solid var(--encre);border-radius:999px;background:var(--surface);font-weight:700;text-decoration:none;box-shadow:3px 3px 0 var(--ombre)}
.page-plan_du_site nav b{background:var(--accent);color:var(--sur-accent)}
.page-plan_du_site .corps > h2 + ul li{break-inside:avoid}
.page-plan_du_site .corps > h2 + ul a{display:flex;align-items:center;min-height:2.75rem}
/* Contact : la grande carte est tracée par des ombres, hors de la colonne, et le cadre du formulaire en prend toute la largeur */
.page-contact .corps{overflow:hidden;border-radius:1.5rem;background:var(--surface);box-shadow:0 0 0 2.5px var(--encre),6px 6px 0 2.5px var(--ombre)}
.page-contact .corps p{margin:0;padding:1.125rem 1rem 1rem}
.page-contact iframe{box-shadow:0 -2.5px 0 var(--encre)}
.erreur{display:flex;flex-direction:column;align-items:center;padding:3rem 0 0;text-align:center}
.erreur-cube{--c:var(--c2);--f:var(--f2);margin-bottom:2.5rem;font-size:3.25rem;rotate:197deg}
.erreur-titre{margin:0;font-size:clamp(2rem,1.5rem + 2vw,3rem);overflow-wrap:anywhere}
.erreur-titre::after{margin-inline:auto}
.erreur-texte{margin:1.5rem 0 0;color:var(--doux);font-size:1.125rem}

/* Pied : bord très arrondi, fond d'encre, frise de petits cubes, liens en pastilles claires */
.pied{margin-top:5rem;border-radius:2rem 2rem 0 0;background:var(--pied);color:var(--pied-texte)}
.pied::before{content:"";display:block;width:calc(100% - 4rem);width:round(down,min(100% - 4rem,80rem),1.5rem);max-width:80rem;height:calc(.875rem + 3px);margin:1.5rem auto 0;background:repeating-linear-gradient(90deg,var(--c1) 0 .875rem,transparent 0 1.5rem,var(--c2) 0 2.375rem,transparent 0 3rem,var(--c3) 0 3.875rem,transparent 0 4.5rem,var(--c4) 0 5.375rem,transparent 0 6rem) 0 0/100% .875rem no-repeat,repeating-linear-gradient(90deg,var(--f1) 0 .875rem,transparent 0 1.5rem,var(--f2) 0 2.375rem,transparent 0 3rem,var(--f3) 0 3.875rem,transparent 0 4.5rem,var(--f4) 0 5.375rem,transparent 0 6rem) 3px 3px/100% .875rem no-repeat}
.pied-interieur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem;padding:1.5rem 0 2.5rem}
.pied .marque{color:var(--pied-texte)}
.pied-domaine{margin:.5rem 0 0;color:var(--pied-doux);font-size:.9375rem}
.pied-liens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.625rem}
.pied-liens a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.25rem 1.125rem;border-radius:999px;background:var(--pastille);color:var(--sur-pastille);font-size:.9375rem;font-weight:700;text-decoration:none}
.pied-liens a:hover{text-decoration:underline}
.pied :focus-visible{outline-color:var(--pied-texte)}

/* Tablette : trois colonnes, celle du milieu plus bas */
@media (min-width:40rem){
.entete-interieur,.principal,.pied-interieur{width:min(100% - 3rem,80rem)}
.principal-lecture{width:min(100% - 3rem,42rem)}
.entete-interieur{padding:1.25rem 0}
.marque{font-size:1.5rem}
.marque-cube{font-size:1.5rem}
.marque-image{width:2.125rem;height:2.125rem}
.menu{flex:none}
.menu ul{display:flex;flex-wrap:wrap;gap:.75rem}
.menu a{justify-content:flex-start;min-height:2.75rem;padding:.375rem 1.125rem .375rem .875rem;font-size:1rem}
.menu a::before{position:static;rotate:none}
.titraille{margin-top:2.5rem}
.ribambelle{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 1.5rem;padding-bottom:1.75rem}
.carte{border-radius:1.25rem;box-shadow:4px 4px 0 var(--ombre)}
.carte:nth-child(n){translate:none}
.carte:nth-child(3n+2){translate:0 1.75rem}
.carte::before{width:1.5rem}
.carte:nth-child(n)::before{display:block}
.carte:nth-child(3n+1)::before{display:none}
.carte-visuel{border-bottom-width:.375rem;border-radius:1.1rem 1.1rem 0 0}
.carte-cube{top:-.9rem;left:-.9rem;font-size:1.5rem}
.carte-titre{margin-block:1rem .375rem}
.carte-lien::after{border-radius:1.25rem}
.carte-date{font-size:.8125rem}
.carte-date:last-child{margin-bottom:1.25rem}
.carte-extrait{margin-block:.5rem 1.25rem;font-size:.9375rem;font-size:clamp(.875rem,6.8cqi,.9375rem);line-height:1.55;-webkit-line-clamp:5}
.carte-rang{top:.625rem;right:.625rem;min-width:2.125rem;height:2.125rem;font-size:.875rem}
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.5rem}
.pagination-sens{padding:.375rem 1.25rem}
.page-plan_du_site .corps > h2 + ul{columns:2 16rem;column-gap:2.5rem}
.page-plan_du_site .corps > h2 + ul a{display:inline;min-height:0}
.page-plan_du_site .corps > h2 + ul li{padding:.25rem 0}
.page-contact .corps p{padding:1.5rem 1.75rem 1.25rem}
.pied{border-radius:3rem 3rem 0 0}
.pied::before{width:calc(100% - 6rem);width:round(down,min(100% - 6rem,80rem),1.5rem);margin-top:1.75rem}
.pied-interieur{padding:1.75rem 0 2.75rem}
}

/* Tablette, trois colonnes : rotation simple sur quatre, jamais deux fois la même couleur côte à côte ni l'une sous l'autre */
@media (min-width:40rem) and (max-width:63.99rem){
.carte:nth-child(4n+1){--c:var(--c1);--f:var(--f1);--l:var(--l1)}
.carte:nth-child(4n+2){--c:var(--c2);--f:var(--f2);--l:var(--l2)}
.carte:nth-child(4n+3){--c:var(--c3);--f:var(--f3);--l:var(--l3)}
.carte:nth-child(4n){--c:var(--c4);--f:var(--f4);--l:var(--l4)}
}

/* Ordinateur : coffre côte à côte (capture à gauche, texte à droite), quatre colonnes qui ondulent (0, 1,5, 3 puis 1,5 rem) */
@media (min-width:64rem){
.coffre{grid-template-columns:minmax(0,11fr) minmax(0,9fr);border-radius:1.75rem;box-shadow:7px 7px 0 var(--ombre)}
.coffre-couvercle{grid-column:1 / -1;height:1.875rem;border-radius:1.6rem 1.6rem 0 0}
.coffre-image,.coffre-champ{height:100%;border-radius:0 0 0 1.6rem}
.coffre-champ{min-height:20rem}
.coffre-champ::before,.coffre-champ::after{bottom:2.5rem;left:calc(50% - 9rem);width:3.5rem;height:3.5rem}
.coffre-champ::after{left:auto;right:calc(50% - 9rem)}
.coffre-gros-cube{font-size:4rem}
.coffre-texte{justify-content:center;border-left:2.5px solid var(--encre);padding:2.25rem 2.5rem 2.5rem}
.coffre-extrait{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.coffre-titre{font-size:clamp(1.5rem,3.4cqi,2.75rem)}
.coffre-cube{top:-2rem;right:2.5rem;font-size:2.375rem}
.coffre-lien::after{border-radius:1.75rem}
.ribambelle{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.75rem 2rem;padding-bottom:3rem}
.carte:nth-child(n){translate:none}
.carte:nth-child(4n+2),.carte:nth-child(4n){translate:0 1.5rem}
.carte:nth-child(4n+3){translate:0 3rem}
.carte::before{width:2rem}
.carte:nth-child(n)::before{display:block}
.carte:nth-child(4n+1)::before{display:none}
}

@media (prefers-reduced-motion:no-preference){
.carte,.coffre,.menu a,.pagination-sens,.bouton,.pagination-cubes a.cube{transition:transform .18s ease,box-shadow .18s ease}
.carte:hover,.coffre:hover{transform:translate(-2px,-2px)}
.menu a:hover,.pagination-sens:hover,.bouton:hover,.pagination-cubes a.cube:hover{transform:translateY(-2px)}
}