:root{--accent:#d0021b;--bande:#111111;--doux:#4d4d4d;--encre:#111111;--folio:#fff4a3;--fond:#ffffff;--grille:#111111;--police-texte:Inter,Roboto,"Helvetica Neue","Arial Nova","Nimbus Sans",Arial,sans-serif;--police-titre:Inter,Roboto,"Helvetica Neue","Arial Nova","Nimbus Sans",Arial,sans-serif;--sur-accent:#ffffff;--sur-bande:#ffffff;--sur-encre:#ffffff;--surface:#ffffff;--texte:#111111;--vif:#ff5c68;}
/* Tabloïd (t2b009) : le quotidien populaire à sensation. Pavé d'accent du titre de journal (marque sur pastille blanche, nom en
   capitales grasses italiques) et bande noire du menu ; titres en réserve blanche sur bandes noires (box-decoration-break) ;
   mise en avant pleine largeur ; grille serrée de cartes sur fond noir (gap de 3 px : filets épais) ; brèves sans image barrées
   de noir, une sur trois sur fond d'accent. Téléphone : pavé pleine largeur, menu en trois cases noires, cartes à fond perdu
   séparées par des filets de 6 px.
   Variables des options : --fond, --surface, --texte, --doux, --accent, --sur-accent, --vif (accent lisible sur l'encre),
   --encre, --sur-encre, --grille, --folio, --bande et --sur-bande (titres en réserve, filets et cadre posés sur la page :
   clairs pour l'édition de nuit) (palette) ; --police-titre, --police-texte (typo). CSS seule, sans animation. Bandes en
   réserve rognées à la hauteur des capitales (text-box), pour qu'elles tombent juste dans chaque typo. Titres prêts à couper
   du cœur (coupure devant le point du domaine) ; leur taille suit la largeur de la carte (unités cqi) : un domaine d'environ
   21 signes avant son point tient sur une ligne. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{--anneau:var(--texte);display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--fond);color:var(--texte);font-family:var(--police-texte);font-size:1rem;line-height:1.55}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.16em}
:focus-visible{outline:3px solid var(--anneau);outline-offset:2px}
h1,h2,h3,p{margin:0}
.masque{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.journal,.menu a,.folio,.carte-titre,.carte-date,.pagination,.reserve,.article-date,.bouton-noir,.texte h2,.texte nav,.vide,.pied{font-family:var(--police-titre)}

/* Lien d'évitement : hors de l'écran, visible au focus */
.evitement{--anneau:var(--encre);position:absolute;top:-30rem;left:1rem;z-index:30;padding:.85rem 1.2rem;background:var(--folio);color:var(--encre);font-family:var(--police-titre);font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.evitement:focus{top:1rem}
.evitement:focus-visible{outline-offset:-6px}

/* En-tête : pavé d'accent (le titre du journal) et bande noire (menu ; folio de l'accueil) */
.entete{--anneau:var(--folio);background:var(--encre);color:var(--sur-encre)}
.entete-interieur{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"pave" "menu"}
.pave{--anneau:var(--sur-accent);grid-area:pave;display:flex;align-items:center;min-width:0;padding:.9rem 1rem 1rem;background:var(--accent);color:var(--sur-accent)}
.journal{min-width:0;font-size:clamp(1.3rem,7vw,2.4rem);font-style:italic;font-weight:900;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.marque{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;color:inherit;text-decoration:none}
.pastille{flex:none;display:block;width:2.75rem;height:2.75rem;padding:.28rem;background:#fff;box-shadow:4px 4px 0 var(--encre)}
.marque-image{display:block;width:100%;height:100%}
.marque-nom{max-width:100%;padding-right:.08em;overflow-wrap:anywhere}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:3px}
.folio{grid-area:pave;z-index:1;align-self:start;justify-self:end;margin:1rem 1rem 0 0}
.folio-etiquette{display:flex;align-items:baseline;gap:.4em;padding:.35rem .55rem;background:var(--encre);color:var(--folio);font-size:.75rem;font-weight:800;line-height:1;letter-spacing:.12em;text-transform:uppercase}
.folio-numero{font-size:1.3em;font-weight:900;letter-spacing:0}
.bande{display:contents}
.menu{grid-area:menu;min-width:0}
.menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.menu li{display:flex;min-width:0}
.menu li+li{border-left:2px solid #4a4a4a}
.menu a{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:3rem;padding:.3rem .35rem;font-size:.8rem;font-weight:800;line-height:1.1;letter-spacing:.05em;text-align:center;text-transform:uppercase;text-decoration:none;overflow-wrap:anywhere}
.menu a:hover{text-decoration:underline;text-decoration-thickness:2px}
.menu a[aria-current="page"]{color:var(--folio);box-shadow:inset 0 -6px 0 var(--vif)}
.menu a:focus-visible{outline-offset:-5px}

/* Contenu */
.principal{flex:1 0 auto;width:100%;max-width:88rem;margin:0 auto;padding:1.75rem 1rem 3rem}
.principal-accueil{padding-top:0}
.vide{padding:3rem 0;font-size:1.25rem;font-weight:800;text-align:center;text-transform:uppercase}

/* Cartes : grille serrée sur fond noir, chaque carte coiffée d'une bande de titre en réserve */
.cartes{list-style:none;margin:0 -1rem;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;background:var(--grille);border-bottom:6px solid var(--grille)}
.carte{container:carte/inline-size;display:flex;min-width:0;background:var(--surface)}
.carte-article{position:relative;flex:1;display:flex;flex-direction:column;min-width:0}
.carte-titre{padding:.65rem 1rem .7rem;background:var(--encre);color:var(--sur-encre);font-size:clamp(1rem,5.5cqi,1.2rem);font-weight:900;line-height:1.12;text-transform:uppercase;overflow-wrap:anywhere}
.carte-lien{text-decoration:none}
.carte-lien::after{content:"";position:absolute;inset:0;z-index:3}
.carte-lien:focus-visible{outline:0}
.carte-lien:focus-visible::after{outline:3px solid var(--texte);outline-offset:-3px;box-shadow:inset 0 0 0 7px var(--surface)}
.carte-article:hover .carte-lien{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.carte-image{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;object-position:top}
.carte-pied{flex:1;display:flex;flex-direction:column;gap:.6rem;padding:.85rem 1rem 1.05rem}
.carte-extrait{font-size:.975rem;line-height:1.45;overflow-wrap:break-word}
.carte-date{margin-top:auto;color:var(--accent);font-size:.8rem;font-weight:800;line-height:1.3;letter-spacing:.07em;text-transform:uppercase}

/* Brèves sans image : pavé de titre barré de noir à gauche, une sur trois sur fond d'accent */
.carte-sans-image:not(.carte-une) .carte-article{border-left:12px solid var(--encre)}
.carte-sans-image:not(.carte-une) .carte-titre{padding:1rem 1rem .1rem;background:none;color:inherit;font-size:clamp(1rem,5.4cqi,1.6rem);font-style:italic;line-height:1.05;letter-spacing:-.01em}
.carte-sans-image:not(.carte-une) .carte-pied{padding-top:.65rem}
.carte-sans-image:not(.carte-une) .carte-extrait{font-weight:700}
.carte-sans-image:not(.carte-une):nth-child(3n+1){background:var(--accent);color:var(--sur-accent)}
.carte-sans-image:not(.carte-une):nth-child(3n+1) .carte-date{color:inherit}

/* Mise en avant : titre géant en réserve sur la capture, extrait sur un aplat d'accent ; sans image, grand pavé noir */
.carte-une{container:une/inline-size;background:var(--encre);color:var(--sur-encre)}
.carte-une .carte-titre{z-index:2;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/9;padding:1rem;background:none;font-size:clamp(1.25rem,6.2cqi,3rem);font-style:italic;line-height:1.32;letter-spacing:-.01em}
.carte-une .carte-titre-texte,.reserve span{padding:.2em .22em .18em;background:var(--encre);color:var(--sur-encre);text-box:trim-both cap alphabetic;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.carte-une .carte-image{position:absolute;top:0;left:0;aspect-ratio:16/9}
.carte-une .carte-pied{z-index:1;padding:1rem 1rem 1.2rem;background:var(--accent);color:var(--sur-accent)}
.carte-une .carte-extrait{font-size:1.05rem;font-weight:600}
.carte-une .carte-date{order:-1;margin-top:0;color:inherit}
.carte-flash{display:inline-block;margin-right:.5rem;padding:.2rem .45rem;background:var(--folio);color:var(--encre);transform:rotate(-2deg)}
.carte-une.carte-sans-image .carte-titre{aspect-ratio:auto;padding:1.75rem 1rem .4rem;color:var(--vif);line-height:1}
.carte-une.carte-sans-image .carte-titre-texte{padding:0;background:none;color:inherit}
.carte-une.carte-sans-image .carte-pied{padding:.6rem 1rem 1.6rem;background:none;color:var(--sur-encre)}
.carte-une.carte-sans-image .carte-extrait{font-size:1.15rem}
.carte-une.carte-sans-image .carte-date{color:var(--folio)}

/* Pagination : gros carrés noirs, page courante d'accent, page suivante dans une flèche */
.pagination{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:1rem .5rem;margin-top:2.5rem}
.pagination-pages{grid-column:1/-1;grid-row:2;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.pagination-numero{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;background:var(--encre);color:var(--sur-encre);font-size:1.3rem;font-weight:900;text-decoration:none}
a.pagination-numero:hover{background:var(--accent);color:var(--sur-accent)}
.pagination-numero[aria-current]{background:var(--accent);color:var(--sur-accent);box-shadow:inset 0 0 0 3px var(--encre)}
.pagination-sens{position:relative;z-index:0;grid-row:1;display:inline-flex;align-items:center;min-height:3rem;padding:.4rem 2.2rem .4rem 1.1rem;color:var(--sur-accent);font-size:.95rem;font-weight:900;line-height:1.1;letter-spacing:.03em;text-transform:uppercase;text-decoration:none}
.pagination-sens::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);clip-path:polygon(0 0,calc(100% - 1.2rem) 0,100% 50%,calc(100% - 1.2rem) 100%,0 100%)}
.pagination-sens:hover{text-decoration:underline;text-decoration-thickness:2px}
.pagination-precedente{grid-column:1;justify-self:start;padding:.4rem 1.1rem .4rem 2.2rem;color:var(--sur-encre)}
.pagination-precedente::before{background:var(--encre);clip-path:polygon(1.2rem 0,100% 0,100% 100%,1.2rem 100%,0 50%)}
.pagination-suivante{grid-column:2;justify-self:end}
.pagination-pages:first-child+.pagination-suivante,.pagination-precedente:nth-last-child(2){grid-column:1/-1}

/* Article et pages : titre en réserve ligne par ligne, date d'accent, colonne de 40rem */
.principal-article,.principal-page,.principal-404{max-width:63rem}
.article-entete,.page-entete{margin:0 0 2rem}
.reserve{font-size:clamp(1.1rem,5.6vw,2.8rem);font-style:italic;font-weight:900;line-height:1.38;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:anywhere}
.article-entete .reserve span,.page-entete .reserve span{background:var(--bande);color:var(--sur-bande)}
.page-entete .reserve{font-size:clamp(1.6rem,8vw,2.8rem)}
.article-date{margin-top:1rem;color:var(--accent);font-size:.9rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.texte{overflow-wrap:break-word}
.texte p,.texte ul,.texte ol{margin:0 0 1.1em}
.texte a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;overflow-wrap:anywhere}
.texte a:hover{text-decoration-thickness:4px}
.corps{max-width:40rem;margin:0 auto;font-size:1.0625rem;line-height:1.7}
.corps>p:has(>a){padding-left:.75rem;border-left:4px solid var(--accent);color:var(--doux);font-size:.9rem;font-weight:700;line-height:1.5}
.corps>p:has(>a) a{color:var(--texte)}
.corps>p:not(:has(a)):not(p:not(:has(a))~p){font-size:1.25rem;font-weight:800;line-height:1.5}
.corps img{display:block;width:100%;margin:2rem 0;border:5px solid var(--encre)}
.retour{max-width:40rem;margin:2.5rem auto 0}
.bouton-noir{--anneau:var(--texte);display:inline-flex;align-items:center;min-height:3rem;padding:.5rem 1.2rem;background:var(--encre);color:var(--sur-encre);font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.bouton-noir:hover{background:var(--accent);color:var(--sur-accent)}

/* Pages de service : intertitres d'accent sous un filet épais ; plan du site en colonnes à puces carrées (liens de 44 px
   sur téléphone) */
.principal-page .texte{max-width:46rem;font-size:1.0625rem;line-height:1.65}
.texte h2{margin:2.25rem 0 .8rem;padding-top:.55rem;border-top:5px solid var(--bande);color:var(--accent);font-size:1.3rem;font-weight:900;line-height:1.2;letter-spacing:.03em;text-transform:uppercase}
.texte>h2:first-child{margin-top:0}
.page-contact .texte{padding-inline:8px}
.page-contact iframe{margin:1.75rem 0 .5rem;background:var(--surface);box-shadow:0 0 0 8px var(--bande)}
.principal.page-plan_du_site{max-width:88rem}
.page-plan_du_site .texte{max-width:none}
.page-plan_du_site .texte>ul{list-style:square;padding-left:1.25rem}
.page-plan_du_site .texte>ul:first-child{display:flex;flex-wrap:wrap;column-gap:2.75rem}
.page-plan_du_site .texte>h2+ul{columns:4 15rem;column-gap:2.5rem}
.page-plan_du_site .texte>ul li{margin:0;break-inside:avoid}
.page-plan_du_site .texte>ul li::marker{color:var(--accent)}
.page-plan_du_site .texte>ul a{display:block;padding:.65rem 0;line-height:1.4}
.texte nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.texte nav a,.texte nav b{display:flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;padding:0 .9rem;background:var(--encre);color:var(--sur-encre);font-weight:900;text-decoration:none}
.texte nav b{background:var(--accent);color:var(--sur-accent)}

/* Page introuvable : titre géant en réserve sur fond d'accent */
.alerte{--anneau:var(--sur-accent);margin-right:8px;padding:2.5rem 1.25rem 2.75rem;background:var(--accent);color:var(--sur-accent);box-shadow:8px 8px 0 var(--encre)}
.reserve-geante{font-size:clamp(1.6rem,8vw,6.5rem);line-height:1.38}
.alerte-texte{max-width:34rem;margin-top:1.5rem;font-size:1.2rem;font-weight:700}
.alerte-retour{margin-top:1.75rem}
.alerte .bouton-noir{--anneau:var(--sur-accent)}

/* Pied : bande noire à filet supérieur d'accent épais */
.pied{--anneau:var(--folio);background:var(--encre);color:var(--sur-encre);border-top:12px solid var(--accent)}
.pied-interieur{max-width:88rem;margin:0 auto;padding:2rem 1rem 2.25rem;display:grid;gap:1rem}
.pied-nom{color:var(--vif);font-size:clamp(1.25rem,6.4vw,2.6rem);font-style:italic;font-weight:900;line-height:1;letter-spacing:-.015em;text-transform:uppercase;overflow-wrap:anywhere}
.pied-liens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
.pied-liens a{display:flex;align-items:center;min-height:2.75rem;font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.pied-liens a:hover{text-decoration:underline;text-decoration-thickness:2px}
.pied-domaine{font-size:.8rem;letter-spacing:.05em}

/* Carte large (dernière carte d'une rangée incomplète) : capture à gauche, texte à droite */
@container carte (min-width:34rem){
  .carte:not(.carte-sans-image) .carte-article{display:grid;grid-template-columns:min(41.67%,21rem) minmax(0,1fr);grid-template-rows:auto 1fr}
  .carte:not(.carte-sans-image) .carte-titre{grid-column:1/-1}
  .carte:not(.carte-sans-image) .carte-image{height:100%}
  .carte-pied{padding:1.1rem 1.4rem 1.3rem}
  .carte-extrait{max-width:46rem;font-size:1.05rem}
  .carte-sans-image:not(.carte-une) .carte-titre{font-size:2rem}
}

/* Tablette et ordinateur */
@media (min-width:40rem){
  .pave{padding:1.1rem 1.5rem 1.2rem}
  .entete-accueil .pave{padding-right:8rem}
  .journal{font-size:clamp(1.6rem,4.6vw,2.6rem)}
  .marque{flex-direction:row;align-items:center;gap:.9rem}
  .pastille{width:3.25rem;height:3.25rem}
  .folio{align-self:center;margin:0 1.5rem 0 0}
  .principal{padding:2rem 1.5rem 3.5rem}
  .principal-accueil{padding-top:2rem}
  .cartes{margin:0;gap:3px;border:3px solid var(--grille);grid-template-columns:repeat(2,minmax(0,1fr))}
  .carte-une{grid-column:1/-1}
  .carte:nth-child(2n):last-child{grid-column:1/-1}
  .pagination-sens{white-space:nowrap}
  .carte-une .carte-article{justify-content:flex-end;min-height:min(60vh,33.75rem,calc((100vw - 3rem) * .5625));padding:2rem 2rem 2.25rem}
  .carte-une .carte-image{inset:0;height:100%;aspect-ratio:auto}
  .carte-une .carte-titre{flex:none;aspect-ratio:auto;padding:0;font-size:clamp(2rem,4.8cqi,4.8rem);line-height:1.3}
  .carte-une .carte-pied{flex:none;max-width:40rem;margin-top:1.1rem;padding:1rem 1.25rem 1.1rem}
  .carte-une .carte-extrait{font-size:1.15rem}
  .carte-une.carte-sans-image .carte-article{min-height:0;padding:3rem 2.5rem 2.5rem}
  .carte-une.carte-sans-image .carte-titre{padding:0;font-size:clamp(2.4rem,5.6cqi,6rem)}
  .carte-une.carte-sans-image .carte-pied{max-width:52rem;margin-top:1.4rem;padding:0}
  .pied-interieur{padding:2.25rem 1.5rem 2.5rem}
  .pied-liens{display:flex;flex-wrap:wrap;column-gap:2rem}
  .alerte{margin-right:0;padding:3.5rem 3rem 3.75rem}
}
@media (min-width:56rem){
  .cartes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .carte:nth-child(2n):last-child{grid-column:auto}
  .carte:nth-child(3n+2):last-child{grid-column:1/-1}
  .carte:nth-child(3n):last-child{grid-column:2/-1}
}
@media (min-width:60rem){
  /* Pavé et bande côte à côte ; la bande passe dessous seulement si le plus long mot du nom ne tient pas à côté d'elle */
  .entete-interieur{display:flex;flex-wrap:wrap;max-width:88rem;margin:0 auto;padding:0 1.5rem}
  .pave{flex:1000 1 auto;width:min-content;max-width:max-content}
  .pave,.entete-accueil .pave{padding:1.35rem 2rem 1.4rem 1.35rem}
  .journal{font-size:clamp(1.6rem,2.6vw,2.75rem)}
  .marque-nom{overflow-wrap:break-word}
  .pastille{width:3.6rem;height:3.6rem;padding:.35rem;box-shadow:5px 5px 0 var(--encre)}
  .marque{gap:1.1rem}
  .bande{display:flex;flex:1 0 auto}
  .menu{display:flex;flex:1 0 auto;padding-left:.75rem}
  .menu ul{display:flex}
  .menu li+li{border-left:0}
  .menu a{padding:0 1rem;font-size:.9rem}
  .folio{flex:none;margin:0;padding-left:1rem}
  .folio-etiquette{padding:0;background:none;font-size:.85rem}
  .folio-numero{font-size:2.2em}
  .pied-interieur{display:flex;flex-wrap:wrap;align-items:center;column-gap:3rem;row-gap:.6rem}
  .pied-nom{flex:1 0 auto;max-width:100%}
  .pied-liens{flex:0 1 auto}
  .pied-domaine{flex-basis:100%}
  .page-plan_du_site .texte>ul a{padding:.5rem 0}
}
@media (min-width:63rem){
  .corps img{width:50rem;max-width:none;margin-left:-10rem}
}
@media (min-width:64rem){
  .pagination{grid-template-columns:1fr auto 1fr;gap:1rem}
  .pagination-pages{grid-column:2;grid-row:1}
  .pagination-suivante,.pagination-pages:first-child+.pagination-suivante{grid-column:3}
  .pagination-precedente:nth-last-child(2){grid-column:1}
}
@media (min-width:75rem){
  .cartes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .carte:nth-child(3n+2):last-child,.carte:nth-child(3n):last-child{grid-column:auto}
  .carte:nth-child(4n+2):last-child{grid-column:1/-1}
  .carte:nth-child(4n+3):last-child{grid-column:2/-1}
  .carte:nth-child(4n):last-child{grid-column:3/-1}
}