:root{--accent:#0f6b4f;--arete:#34463f;--badge:#0b2219;--cadre:#101b17;--clair:#ffffff;--doux:#3f5a4f;--ecran:#ffffff;--ecran-doux:#4a6358;--ecran-texte:#0b2219;--encre-accent:#0f6b4f;--focus:#0f6b4f;--fond:#e3f1ea;--ilot:#0f1e19;--ilot-texte:#f2fbf6;--lien:#0f6b4f;--ligne:#d5e6dd;--notif:#ffffff;--notif-doux:#3f5a4f;--notif-texte:#0b2219;--nuit:#03211a;--police-texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--police-titre:Avenir,Montserrat,Corbel,"URW Gothic",source-sans-pro,sans-serif;--sur-accent:#ffffff;--sur-badge:#ffffff;--texte:#0b2219;--tuile:#ffffff;}
/* Écrans (t2b079) : un présentoir de téléphones (le rang à la place de l'heure), la une en tablette couchée ; sur téléphone,
   un écran verrouillé où les articles arrivent en notifications. Article et pages : une tablette en portrait. Variables : celles
   des options palette et typo (manifest.json). CSS seule, polices système. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{--anneau:var(--focus);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}
:focus-visible{outline:3px solid var(--anneau);outline-offset:3px}
h1,h2,h3{font-family:var(--police-titre);font-weight:700;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}
.evitement{position:absolute;top:.75rem;left:.75rem;z-index:50;padding:.75rem 1.25rem;border-radius:999px;background:var(--ecran);color:var(--ecran-texte);font-weight:700;box-shadow:0 8px 24px rgb(0 0 0 / 30%);transform:translateY(-10rem)}
.evitement:focus{transform:none}

/* Marque : l'initiale du site dans une icône d'appli (tuile carrée arrondie, qui la détache de tous les fonds) */
.marque{display:inline-flex;align-items:center;gap:.625rem;min-width:0;min-height:2.75rem;color:inherit;font-family:var(--police-titre);font-weight:700;line-height:1.2;text-decoration:none}
.marque-tuile{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.7rem;background:var(--tuile);box-shadow:0 1px 3px rgb(0 0 0 / 30%)}
.marque-image{display:block;width:1.75rem;height:1.75rem}
.marque-nom{min-width:0;overflow-wrap:anywhere}
.marque:hover .marque-nom{text-decoration:underline;text-underline-offset:.2em}

/* Icônes de la barre d'état, dessinées : trois barres de réseau et une pile */
.etat-icones{display:inline-flex;align-items:center;gap:5px}
.etat-icones::before{content:"";width:14px;height:10px;background:linear-gradient(currentColor 0 0) 0 100%/3px 40% no-repeat,linear-gradient(currentColor 0 0) 5px 100%/3px 70% no-repeat,linear-gradient(currentColor 0 0) 10px 100%/3px 100% no-repeat}
.etat-icones::after{content:"";width:19px;height:10px;margin-right:2px;border:1.5px solid currentColor;border-radius:3px;background:linear-gradient(currentColor 0 0) 1px 50%/66% 4px no-repeat;box-shadow:5px 0 0 -3px currentColor}

.principal{flex:1 0 auto}

/* Cartes : communes aux deux mises en scène (la carte entière mène à l'article, lien étendu du titre) */
.carte{position:relative}
.carte-lien{color:inherit;text-decoration:none}
.carte-lien::after{content:"";position:absolute;inset:0;z-index:1}
.carte-lien:focus-visible{outline:0}
.carte-lien:focus-visible::after{outline:3px solid var(--anneau);outline-offset:4px}
.carte:hover .carte-lien{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.carte-titre{font-size:.9375rem;line-height:1.25;letter-spacing:-.01em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.carte-extrait{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.visuel{display:block;object-fit:cover;object-position:50% 0;background:var(--ligne);outline:1px solid rgb(0 0 0 / 9%);outline-offset:-1px}
.icone-lettre{display:grid;place-items:center;font-family:var(--police-titre);font-weight:700;line-height:1}
.vide{margin:0;padding:1.5rem;border-radius:18px;background:var(--ecran);color:var(--ecran-texte);text-align:center}

/* Pagination : touches rondes façon clavier de téléphone */
.pagination-touches{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.touche{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--cadre);color:var(--ilot-texte);font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none;box-shadow:0 0 0 1px var(--arete),0 4px 0 -1px rgb(0 0 0 / 30%)}
a.touche:hover{background:var(--ilot);text-decoration:underline}
.touche-courante{background:var(--accent);color:var(--sur-accent);box-shadow:0 0 0 1px var(--accent)}
.pagination-sens{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.25rem 1.25rem;border-radius:999px;font-weight:700;line-height:1.2;text-decoration:none}
.pagination-sens:hover{text-decoration:underline}
.pagination-precedente::before,.pagination-suivante::after{content:"";flex:none;width:.5rem;height:.5rem;border:solid currentColor;border-width:2px 2px 0 0}
.pagination-precedente::before{transform:rotate(-135deg)}
.pagination-suivante::after{transform:rotate(45deg)}

/* Article et pages : l'écran d'une tablette */
.tablette-ecran{--anneau:var(--focus);background:var(--ecran);color:var(--ecran-texte)}
.article-entete{margin:0 0 1.75rem;border-bottom:1px solid var(--ligne)}
.article-titre{margin:0;font-size:clamp(1.625rem,1.1rem + 1.6vw,2.5rem);letter-spacing:-.02em;line-height:1.12;overflow-wrap:anywhere}
.article-titre-suite{font-weight:400;color:var(--ecran-doux)}
.article-date{margin:.75rem 0 0;color:var(--ecran-doux);font-size:.9375rem}
.texte{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{margin:2rem 0 .75rem;font-size:1.3125rem}
.texte a{color:var(--lien);text-decoration-thickness:1px;text-underline-offset:.18em;overflow-wrap:anywhere}
.texte a:hover{text-decoration-thickness:2px}
.texte img{display:block;width:100%;height:auto;margin:1.75rem 0;border-radius:14px;box-shadow:0 0 0 1px var(--ligne)}
.corps p>a:only-child{display:block;width:fit-content;max-width:100%;min-height:2.75rem;margin-top:.5rem;padding:.625rem 1.125rem;border-radius:1.375rem;box-shadow:inset 0 0 0 1.5px currentColor;font-size:.9375rem;line-height:1.5}
.retour{margin:2.25rem 0 0}
.retour a{display:inline-flex;align-items:center;gap:.625rem;min-height:3rem;padding:0 1.375rem;border-radius:999px;background:var(--accent);color:var(--sur-accent);font-weight:700;text-decoration:none}
.retour a::before{content:"";width:.5rem;height:.5rem;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg)}
.retour a:hover{text-decoration:underline}

/* Plan du site : listes de réglages (groupes arrondis, rangées de 52 px, chevron, séparateurs fins) ; contact : groupes */
.page-plan_du_site .tablette-ecran,.page-contact .tablette-ecran{background:var(--fond)}
.page-plan_du_site .texte h2{margin:1.75rem 0 .375rem 1rem;color:var(--ecran-doux);font-family:var(--police-texte);font-size:.9375rem;font-weight:600;font-variant-caps:all-small-caps;letter-spacing:.06em}
.page-plan_du_site .texte ul{list-style:none;margin:0;padding:0;overflow:hidden;border-radius:14px;background:var(--ecran);box-shadow:0 0 0 1px var(--ligne)}
.page-plan_du_site .texte li{position:relative;margin:0;border-top:1px solid var(--ligne)}
.page-plan_du_site .texte li:first-child{border-top:0}
.page-plan_du_site .texte li>a,.page-plan_du_site .texte li>b{display:flex;align-items:center;min-height:52px;padding:.625rem 2.75rem .625rem 1rem;color:var(--ecran-texte);font-size:1rem;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
.page-plan_du_site .texte li>b{color:var(--lien)}
.page-plan_du_site .texte li>a::after{content:"";position:absolute;top:50%;right:1.25rem;width:.5rem;height:.5rem;margin-top:-.25rem;border:solid var(--ecran-doux);border-width:2px 2px 0 0;transform:rotate(45deg)}
.page-plan_du_site .texte li>a:hover{background:color-mix(in srgb,var(--accent) 9%,var(--ecran));text-decoration:underline}
.page-plan_du_site .texte li>a:focus-visible{outline-offset:-4px}
.page-contact .texte>p{margin:0 0 1.25rem;padding:1rem 1.25rem;border-radius:14px;background:var(--ecran);box-shadow:0 0 0 1px var(--ligne)}
.page-contact iframe{display:block;border-radius:14px;background:var(--ecran);box-shadow:0 0 0 1px var(--ligne),0 16px 32px -24px rgb(0 0 0 / 40%)}

/* 404 : un téléphone éteint, écran noir et reflet en diagonale */
.principal-erreur{display:flex;flex-direction:column;align-items:center;text-align:center}
.eteint{flex:none;width:8.5rem;aspect-ratio:9/19;padding:7px;border-radius:28px;background:var(--cadre);box-shadow:0 0 0 1px var(--arete),0 30px 40px -26px rgb(0 0 0 / 60%)}
.eteint-ecran{display:block;height:100%;border-radius:22px;background:linear-gradient(115deg,transparent 36%,rgb(255 255 255 / 16%) 36.5%,rgb(255 255 255 / 5%) 58%,transparent 58.5%),#000}
.erreur-titre{margin:2rem 0 .5rem;font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);letter-spacing:-.02em;overflow-wrap:anywhere}
.erreur-texte{margin:0;max-width:32rem}

/* Pied : un dock translucide arrondi, nom et domaine au-dessus */
.pied{padding:0 1.5rem 2.5rem;text-align:center}
.pied-nom{margin:0;font-family:var(--police-titre);font-size:1.125rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pied-domaine{margin:.125rem 0 1rem;font-size:.875rem;overflow-wrap:anywhere}
.dock{list-style:none;margin:0 auto;padding:.5rem;border-radius:28px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.dock a{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.25rem 1.125rem;border-radius:999px;font-size:.875rem;font-weight:600;line-height:1.25;text-align:center;text-decoration:none}
.dock a:hover{text-decoration:underline}

/* ===== Ordinateur et tablette : le présentoir ===== */
@media (min-width:48rem){
body{background:radial-gradient(80rem 30rem at 50% -6rem,color-mix(in srgb,var(--accent) 12%,var(--fond)),var(--fond)) no-repeat var(--fond)}

/* En-tête : une île sombre en pilule, posée sur le fond */
.entete{padding:1.25rem 1.5rem 0}
.ilot{--anneau:var(--ilot-texte);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;max-width:44rem;margin:0 auto;padding:.5rem .5rem .5rem .625rem;border-radius:999px;background:var(--ilot);color:var(--ilot-texte);box-shadow:0 0 0 1px var(--arete),0 16px 32px -18px rgb(0 0 0 / 60%)}
.ilot .etat-icones{display:none}
.marque{font-size:1.0625rem}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem}
.menu a{display:flex;align-items:center;min-height:2.75rem;padding:0 1.125rem;border-radius:999px;color:var(--ilot-texte);font-size:.9375rem;font-weight:600;text-decoration:none;white-space:nowrap}
.menu a:hover{background:color-mix(in srgb,var(--ilot-texte) 12%,var(--ilot));text-decoration:underline;text-underline-offset:.25em}
.menu a[aria-current="page"]{background:var(--accent);color:var(--sur-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ilot-texte) 40%,transparent)}

.principal{width:min(100% - 3rem,77.5rem);margin:0 auto}
.principal.principal-etroit{width:min(100% - 3rem,50rem);padding-top:2.5rem}
.verrou{display:flex;flex-direction:column;align-items:center;gap:.875rem;margin:2.75rem 0;text-align:center}
.verrou-date{margin:0;padding:.3125rem .875rem;border-radius:999px;background:var(--ecran);color:var(--ecran-texte);box-shadow:0 0 0 1px var(--ligne);font-size:.8125rem;font-weight:700;line-height:1.4}
.verrou-heure{margin:0;max-width:100%;font-size:clamp(2.25rem,1.3rem + 2.6vw,3.5rem);letter-spacing:-.025em;line-height:1.05;overflow-wrap:anywhere}

/* Le présentoir : des téléphones de même hauteur (9/19) sur --n colonnes, la une en tablette couchée sur deux ; rangée
   incomplète centrée */
.presentoir{--n:3;--g:1.5rem;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1.75rem var(--g)}
.carte{--l:calc((100% - (var(--n) - 1)*var(--g))/var(--n) - .1px);flex:none;width:var(--l);min-width:0;min-height:0;aspect-ratio:9/19;padding:9px;border-radius:34px;background:var(--cadre);box-shadow:0 0 0 1px var(--arete),0 24px 36px -24px rgb(0 0 0 / 60%)}
.carte::before,.carte::after{content:"";position:absolute;z-index:2;left:50%;border-radius:999px;pointer-events:none;transform:translateX(-50%)}
.carte::before{top:14px;width:30%;height:16px;background:var(--cadre)}
.carte::after{bottom:16px;width:36px;height:4px;background:var(--ecran-texte);opacity:.7}
.ecran{display:flex;flex-direction:column;height:100%;overflow:hidden;padding-bottom:30px;border-radius:26px;background:var(--ecran);color:var(--ecran-texte)}
.carte-lien::after{border-radius:34px}
.etat{flex:none;display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 14px 0 20px;font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.visuel{flex:none;width:100%;aspect-ratio:16/9}
.icone,.icone-rang{display:none}
.carte-sans-image .icone{flex:none;display:grid;place-items:center;aspect-ratio:16/9;background:var(--accent)}
.carte-sans-image:nth-child(4n+2) .icone{background:color-mix(in srgb,var(--accent) 70%,var(--nuit))}
.carte-sans-image:nth-child(4n+3) .icone{background:color-mix(in srgb,var(--accent) 68%,var(--ecran))}
.carte-sans-image:nth-child(4n) .icone{background:color-mix(in srgb,var(--accent) 48%,var(--nuit))}
.icone-lettre{width:3.5rem;height:3.5rem;border-radius:1rem;background:var(--clair);color:var(--encre-accent);font-size:1.875rem;box-shadow:0 8px 18px -8px rgb(0 0 0 / 55%)}
.carte-titre{flex:none;margin:.75rem .875rem .25rem;font-size:.875rem}
.carte-date{flex:none;margin:0 .875rem .5rem;color:var(--ecran-doux);font-size:.75rem;line-height:1.4}
.carte-extrait{flex:none;margin:0 .875rem .75rem;font-size:.8125rem;line-height:1.45;-webkit-line-clamp:7}
.carte-suite{flex:none;align-self:flex-start;margin:auto .875rem 0;padding:.375rem .75rem;border-radius:999px;background:var(--accent);color:var(--sur-accent);font-size:.75rem;font-weight:700;line-height:1.2}

/* La une : tablette couchée (4/3), caméra sur le bord long, ombre au sol ; écran scindé comme une appli en paysage */
.carte-une{width:calc(2*var(--l) + var(--g));align-self:center;isolation:isolate;aspect-ratio:4/3;padding:14px;border-radius:26px;background:radial-gradient(circle at 50% 7px,var(--arete) 2.5px,transparent 3px) var(--cadre)}
.carte-une::before{top:auto;bottom:-24px;z-index:-1;width:88%;height:20px;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0 / 32%),transparent)}
.carte-une::after{bottom:19px;width:56px}
.carte-une .ecran{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"etat etat" "titre titre" "visuel date" "visuel extrait" "visuel suite";padding-bottom:28px;border-radius:14px;container-type:inline-size}
.carte-sans-image.carte-une .ecran{grid-template-columns:1fr 1fr}
.carte-une .carte-lien::after{border-radius:26px}
.carte-une .etat{grid-area:etat}
.carte-une .visuel,.carte-une .icone{grid-area:visuel;width:calc(100% - .875rem);height:100%;min-height:0;aspect-ratio:auto;margin:0 0 0 .875rem;border-radius:.75rem;box-shadow:0 0 0 1px var(--ligne)}
.carte-une .icone-lettre{width:5.5rem;height:5.5rem;border-radius:1.5rem;font-size:3.5rem}
.carte-une .carte-titre{grid-area:titre;margin:.125rem .875rem .625rem;font-size:clamp(1.2rem,5.5cqi,1.9rem);line-height:1.15;-webkit-line-clamp:2}
.carte-une .carte-date{grid-area:date;margin:0 .875rem .375rem}
.carte-une .carte-extrait{grid-area:extrait;align-self:start;margin:0 .875rem;-webkit-line-clamp:7}
.carte-une .carte-suite{grid-area:suite;justify-self:start;margin:.625rem .875rem 0}

.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin:3.5rem 0 0}
.pagination-sens{background:var(--ecran);color:var(--lien);box-shadow:inset 0 0 0 1.5px currentColor}

/* Article et pages : tablette en portrait, cadre de 16 px, caméra au centre du bord haut */
.tablette{position:relative;padding:16px;border-radius:32px;background:radial-gradient(circle at 50% 8px,var(--arete) 2.5px,transparent 3px) var(--cadre);box-shadow:0 0 0 1px var(--arete),0 40px 60px -40px rgb(0 0 0 / 60%)}
.tablette-ecran{min-height:32rem;border-radius:18px}
.tablette .etat{height:32px;padding:0 1.5rem}
.tablette-contenu{padding:.5rem clamp(1.5rem,5vw,3.25rem) 3rem}
.article-entete{padding:1.25rem 0 1.5rem}
.principal-erreur{padding-top:3rem}

.pied{margin-top:5rem}
.pied-domaine{color:var(--doux)}
.dock{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.5rem;background:color-mix(in srgb,var(--ecran) 55%,transparent);box-shadow:0 0 0 1px var(--ligne),0 20px 40px -28px rgb(0 0 0 / 50%)}
.dock a{background:var(--ecran);color:var(--ecran-texte);box-shadow:0 1px 3px rgb(0 0 0 / 14%)}
}

@media (min-width:64rem){
.principal{width:min(100% - 4rem,77.5rem)}
.presentoir{--n:4;--g:1.75rem}
.page-plan_du_site .texte ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.page-plan_du_site .texte li:nth-child(2){border-top:0}
.page-plan_du_site .texte li:nth-child(even){border-left:1px solid var(--ligne)}
}

@media (min-width:80rem){
.presentoir{--n:5}
}

/* ===== Téléphone : l'écran verrouillé ===== */
@media (max-width:47.99rem){
body{--anneau:var(--clair);background:var(--nuit);color:var(--clair)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(110% 55% at 100% 100%,color-mix(in srgb,var(--accent) 30%,var(--nuit)),transparent),linear-gradient(165deg,color-mix(in srgb,var(--accent) 50%,var(--nuit)),color-mix(in srgb,var(--accent) 20%,var(--nuit)) 50%,var(--nuit) 85%)}

/* En-tête fondu dans la barre d'état : marque et nom en petit, comme l'opérateur ; menu en trois pilules translucides */
.entete{padding:.25rem .75rem 0}
.ilot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .75rem}
.marque{gap:.5rem;font-size:.9375rem;font-weight:600}
.marque-tuile{width:1.75rem;height:1.75rem;border-radius:.5rem}
.marque-image{width:1.375rem;height:1.375rem}
.menu{grid-column:1 / -1}
.menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.menu a{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.25rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--nuit) 40%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--clair) 26%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--clair);font-size:.875rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none}
.menu a[aria-current="page"]{background:var(--clair);color:var(--nuit)}

.principal{width:100%;max-width:36rem;margin:0 auto;padding:0 6px}
.verrou{padding:1.5rem 10px 1.75rem;text-align:center}
.verrou-date{margin:0;font-size:.9375rem;font-weight:600}
.verrou-heure{margin:.125rem 0 0;font-size:clamp(1.75rem,8.4vw,3.6rem);font-weight:300;line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}

/* Notifications empilées : icône d'appli (initiale, rang en badge), titre, date à droite, extrait, vignette */
.presentoir{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.carte{border-radius:18px;background:color-mix(in srgb,var(--notif) 88%,transparent);color:var(--notif-texte);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 8px 20px -12px rgb(0 0 0 / 55%)}
.carte-lien::after{border-radius:18px}
.ecran{display:grid;grid-template-columns:2.625rem minmax(0,1fr) auto;grid-template-areas:"icone titre date" "icone extrait vignette";align-items:start;gap:.125rem .875rem;padding:.75rem .875rem .875rem .75rem}
.etat,.carte-suite{display:none}
.icone{grid-area:icone;position:relative;display:grid;place-items:center;width:2.625rem;height:2.625rem;border-radius:.75rem;background:var(--accent);color:var(--sur-accent)}
.icone-lettre{font-size:1.125rem}
.icone-rang{position:absolute;top:-.4375rem;right:-.6875rem;min-width:1.125rem;height:1.125rem;padding:0 .25rem;border-radius:999px;background:var(--badge);color:var(--sur-badge);box-shadow:0 0 0 2px var(--notif);font-size:.625rem;font-weight:700;line-height:1.125rem;text-align:center;font-variant-numeric:tabular-nums}
.carte-titre{grid-area:titre;margin:0;line-height:1.3;-webkit-line-clamp:2}
.carte-date{grid-area:date;margin:.0625rem 0 0;color:var(--notif-doux);font-size:.75rem;line-height:1.3;text-align:right;white-space:nowrap}
.carte-extrait{grid-area:extrait;margin:.125rem 0 0;font-size:.875rem;line-height:1.4;-webkit-line-clamp:2}
.carte-sans-image .carte-extrait{grid-column:2 / -1}
.visuel{grid-area:vignette;justify-self:end;width:3.5rem;height:3.5rem;margin-top:.25rem;border-radius:.625rem}

/* La une devient un widget : grande carte translucide, capture 16/9 (ou bandeau à l'initiale), titre, date, extrait */
.carte-une{margin-bottom:.5rem;border-radius:22px}
.carte-une .carte-lien::after{border-radius:22px}
.carte-une .ecran{display:flex;flex-direction:column;padding:0 0 1rem}
.carte-une .icone{display:none}
.carte-sans-image.carte-une .icone{display:grid;width:100%;height:auto;aspect-ratio:3/1;border-radius:22px 22px 0 0}
.carte-une .icone-lettre{width:4rem;height:4rem;border-radius:1.125rem;background:var(--clair);color:var(--encre-accent);font-size:2.25rem;box-shadow:0 8px 18px -8px rgb(0 0 0 / 55%)}
.carte-une .icone-rang{display:none}
.carte-une .visuel{width:100%;height:auto;aspect-ratio:16/9;margin:0;border-radius:22px 22px 0 0}
.carte-une .carte-titre{margin:.875rem 1rem .25rem;font-size:1.25rem;line-height:1.2;-webkit-line-clamp:3}
.carte-une .carte-date{margin:0 1rem;text-align:left}
.carte-une .carte-extrait{margin:.5rem 1rem 0;font-size:.9375rem;line-height:1.45;-webkit-line-clamp:4}

/* Pagination : deux grandes pilules au-dessus des touches */
.pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"prec suiv" "touches touches";gap:.875rem .5rem;margin:1.75rem 0 0}
.pagination-precedente{grid-area:prec}
.pagination-suivante{grid-area:suiv}
.pagination-touches{grid-area:touches}
.pagination-touches:first-child~.pagination-suivante,.pagination-precedente:nth-last-child(2){grid-column:1 / -1}
.pagination-sens{padding:.25rem .875rem;background:color-mix(in srgb,var(--notif) 88%,transparent);color:var(--notif-texte);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:.9375rem;text-align:center}
.touche{width:2.75rem;height:2.75rem;box-shadow:0 0 0 1px color-mix(in srgb,var(--clair) 28%,transparent)}

/* Article et pages : l'appli plein écran, sans cadre */
.principal.principal-etroit{max-width:none;padding:.875rem 0 0}
.tablette-ecran{border-radius:24px}
.tablette .etat{display:none}
.tablette-contenu{padding:.25rem 1.125rem 2.25rem}
.article-entete{padding:1.5rem 0 1.125rem;margin-bottom:1.5rem}
.texte{font-size:1rem}
.principal-erreur{padding:2rem 16px 0}
.eteint{width:7rem;box-shadow:0 0 0 1px color-mix(in srgb,var(--clair) 22%,transparent),0 24px 40px -24px rgb(0 0 0 / 80%)}
.principal-erreur .retour a{background:var(--clair);color:var(--nuit)}

/* Pied : le dock garde ses quatre liens, sur deux rangées de 44 px */
.pied{margin-top:2.5rem;padding:0 6px 1.25rem;color:var(--clair)}
.dock{--anneau:var(--focus);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem;max-width:36rem;background:color-mix(in srgb,var(--notif) 88%,transparent);box-shadow:0 10px 24px -16px rgb(0 0 0 / 60%)}
.dock a{padding:.25rem .5rem;background:color-mix(in srgb,var(--notif-texte) 7%,var(--notif));color:var(--notif-texte)}
}

/* Téléphone étroit : la date passe sous le titre */
@media (max-width:23.99rem){
.ecran{grid-template-areas:"icone titre titre" "icone date date" "icone extrait vignette"}
.carte-date{text-align:left}
}

@media (prefers-reduced-motion:no-preference) and (min-width:48rem){
.carte{transition:transform .25s ease,box-shadow .25s ease}
.carte:hover{transform:translateY(-4px)}
}