:root{--accent:#0b6874;--bordure:#d3e3e4;--doux:#4b6064;--fond:#f2f7f7;--ligne:#9cc5ca;--pied:#e2eeef;--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;--surface:#ffffff;--teinte:#e8f3f4;--texte:#14262a;}
/* Chronique (t2b05) : le blog en frise chronologique. Une ligne continue, un point et une date par article, puis sa carte.
   Variables des options (manifest.json) : palette --fond --surface --teinte --pied --texte --doux --accent --sur-accent
   --bordure --ligne ; typo --police-titre --police-texte. Polices système seulement, aucune ressource externe.
   Mise en page : téléphone d'abord, puis tablette (36em) et ordinateur (62em, dates dans la marge de gauche). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--fond);color:var(--texte);font-family:var(--police-texte);font-size:1.0625rem;line-height:1.65;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(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--police-titre);color:var(--texte);font-weight:700;line-height:1.2;overflow-wrap:anywhere;text-wrap:balance}
.invisible{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}

/* Lien d'évitement : hors de l'écran, visible au focus */
.aller-au-contenu{position:absolute;top:.75rem;left:.75rem;z-index:10;padding:.7rem 1.1rem;border-radius:.3rem;background:var(--accent);color:var(--sur-accent);font-weight:700;transform:translateY(-12rem)}
.aller-au-contenu:focus{transform:none;outline-color:var(--texte)}

/* En-tête : liseré d'accent, bandeau clair, marque à gauche, menu à droite */
.entete{background:var(--surface);border-top:6px solid var(--accent);border-bottom:1px solid var(--bordure)}
.entete-interieur{max-width:66rem;margin:0 auto;padding:.75rem 1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem}
.marque{display:inline-flex;align-items:center;gap:.7rem;min-width:0;min-height:2.75rem;color:var(--texte);font-family:var(--police-titre);font-size:1.25rem;font-weight:700;line-height:1.2;text-decoration:none}
.marque-image{flex:none;display:block;width:2.5rem;height:2.5rem}
.marque-nom{min-width:0;overflow-wrap:anywhere}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.menu-liste{list-style:none;margin:0 -.8rem;padding:0;display:flex;flex-wrap:wrap}
.menu a{display:flex;align-items:center;min-height:2.75rem;padding:0 .8rem;border-radius:.3rem;color:var(--texte);font-weight:600;text-decoration:none}
.menu a:hover{color:var(--accent);text-decoration:underline}
.menu a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}
.menu a:focus-visible{outline-offset:-3px}

/* Contenu */
.principal{display:block;flex:1 0 auto;width:100%;max-width:66rem;margin:0 auto;padding:2rem 1rem 3.5rem}

/* Accueil : titre, puis la frise */
.chronique-tete{margin:0 0 1.75rem}
.chronique-surtitre{margin:0 0 .35rem;color:var(--accent);font-size:.8125rem;font-weight:700;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.chronique-titre{margin:0;font-size:clamp(1.5rem,.9rem + 3.6vw,3rem);line-height:1.1;letter-spacing:-.01em}
.chronique-vide{margin:0;color:var(--doux)}
.frise{list-style:none;margin:0;padding:0}
.frise-element{position:relative;padding:0 0 1.75rem 1.875rem}
/* La ligne : un segment par article, du haut au bas de son élément ; elle part du premier point et s'arrête au dernier (ou
   continue jusqu'à la pagination quand il y en a une) */
.frise-element::after{content:"";position:absolute;top:0;bottom:0;left:.4375rem;width:2px;margin-left:-1px;background:var(--ligne)}
.frise-element:first-child::after{top:.7rem}
.frise:last-child>.frise-element:last-child::after{bottom:auto;height:.7rem}
.frise:last-child>.frise-element:only-child::after{display:none}
/* Le point de chaque article, détaché de la ligne par un anneau du fond */
.frise-element::before{content:"";position:absolute;z-index:1;top:.27rem;left:.4375rem;width:.875rem;height:.875rem;margin-left:-.4375rem;border:3px solid var(--accent);border-radius:50%;background:var(--fond);box-shadow:0 0 0 4px var(--fond)}
.frise-une::before,.frise-element:hover::before,.frise-element:focus-within::before{background:var(--accent)}
.entree-date{margin:0 0 .55rem;color:var(--accent);font-size:.9375rem;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums}

/* Carte : toute la carte mène à l'article (lien du titre étendu) */
.carte{position:relative;background:var(--surface);border:1px solid var(--bordure);border-radius:.5rem;box-shadow:0 1px 2px rgba(20,20,30,.05)}
.carte:hover{border-color:var(--accent)}
.carte-vignette img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;background:var(--teinte);border-bottom:1px solid var(--bordure);border-radius:calc(.5rem - 1px) calc(.5rem - 1px) 0 0}
.carte-texte{padding:.9rem 1.1rem 1.1rem}
.carte-titre{margin:0;font-size:1.25rem;line-height:1.25}
.carte-titre a{color:var(--texte);text-decoration:none}
.carte-titre a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:.5rem}
.carte:hover .carte-titre a{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px}
.carte-titre a:focus-visible{outline:none}
.carte-titre a:focus-visible::after{outline:3px solid var(--accent);outline-offset:3px}
.carte-extrait{margin:.45rem 0 0;color:var(--doux);font-size:1rem;line-height:1.6}
/* Première entrée de la page (premiere) : plus grande */
.frise-une .carte{background:var(--teinte);border-color:var(--ligne)}
.frise-une .carte:hover{border-color:var(--accent)}
.frise-une .carte-titre{font-size:1.5rem;line-height:1.2}
.frise-une .carte-extrait{margin-top:.6rem;color:var(--texte);font-size:1.0625rem}

/* Pagination : au bout de la ligne */
.pagination{position:relative;margin:0;padding:0 0 0 1.875rem}
.pagination::after{content:"";position:absolute;top:0;left:.4375rem;width:2px;height:1.375rem;margin-left:-1px;background:var(--ligne)}
.pagination::before{content:"";position:absolute;z-index:1;top:.9375rem;left:.4375rem;width:.875rem;height:.875rem;margin-left:-.4375rem;border-radius:50%;background:var(--ligne);box-shadow:0 0 0 4px var(--fond)}
.pagination-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
/* Numéros sur la première ligne, page précédente et page suivante sur la suivante */
.pagination-liste::before{content:"";order:1;flex:0 0 100%;height:0;margin-top:-.5rem}
.pagination-numero a,.pagination-courante,.pagination-sens a{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:.3rem .75rem;border:1px solid var(--bordure);border-radius:.35rem;background:var(--surface);color:var(--texte);font-weight:600;line-height:1.2;text-decoration:none;font-variant-numeric:tabular-nums}
.pagination-numero a:hover,.pagination-sens a:hover{border-color:var(--accent);color:var(--accent);text-decoration:underline}
.pagination-courante{background:var(--accent);border-color:var(--accent);color:var(--sur-accent);font-weight:700}
.pagination-sens{order:2;flex:1 1 auto}
.pagination-sens a{gap:.6rem;color:var(--accent);white-space:nowrap}
/* Chevrons dessinés (aucun texte) */
.pagination-sens a::before,.pagination-sens a::after{content:"";flex:none;width:.45rem;height:.45rem;border:solid currentColor;transform:rotate(45deg)}
.pagination-sens a[rel="prev"]::before{border-width:0 0 2px 2px;margin-left:.15rem}
.pagination-sens a[rel="next"]::after{border-width:2px 2px 0 0;margin-right:.15rem}
.pagination-sens a[rel="prev"]::after,.pagination-sens a[rel="next"]::before{display:none}

/* Article */
.lecture-tete{display:flex;flex-direction:column;margin:0 0 2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--bordure)}
.lecture-date{order:-1;margin:0 0 .8rem;color:var(--doux);font-size:.9375rem;line-height:1.5}
.lecture-date time{color:var(--accent);font-weight:700}
.lecture-date::before{content:"";display:inline-block;width:.75rem;height:.75rem;margin-right:.55rem;border-radius:50%;background:var(--accent);vertical-align:-.0625rem}
.lecture-titre{margin:0;font-size:clamp(1.5rem,1rem + 2.6vw,2.6rem);line-height:1.15;letter-spacing:-.01em}
.texte{font-size:1.0625rem;line-height:1.75}
.texte>:first-child{margin-top:0}
.texte p,.texte ul,.texte ol{margin:0 0 1.15em}
.texte h2{margin:2em 0 .6em;font-size:1.45rem}
.texte h3{margin:1.6em 0 .5em;font-size:1.2rem}
.texte a{overflow-wrap:anywhere}
.texte ul,.texte ol{padding-left:1.3em}
.texte li{margin:.3em 0}
.texte li::marker{color:var(--accent)}
.texte img{display:block;width:100%;height:auto;margin:1.75rem 0;background:var(--surface);border:1px solid var(--bordure);border-radius:.4rem}
.retour{margin:2rem 0 0;font-weight:600}
.lecture{display:flow-root}

/* Pages de service et 404 */
.feuille-titre{margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--bordure);font-size:clamp(1.5rem,1rem + 2.6vw,2.6rem);line-height:1.15;letter-spacing:-.01em}
.feuille-contact iframe{margin:1.5rem 0;background:var(--surface);border-radius:.5rem;box-shadow:0 0 0 1px var(--bordure)}
.feuille-plan_du_site .texte ul{list-style:none;padding:0}
.feuille-plan_du_site .texte li{margin:0;border-bottom:1px solid var(--bordure);break-inside:avoid}
.feuille-plan_du_site .texte li>a{display:block;padding:.4rem 0}
.feuille-plan_du_site .texte nav ul{display:flex;flex-wrap:wrap;gap:.5rem}
.feuille-plan_du_site .texte nav li{border:0}
.feuille-plan_du_site .texte nav a,.feuille-plan_du_site .texte nav b{display:flex;align-items:center;min-height:2.75rem;padding:.3rem .8rem;border:1px solid var(--bordure);border-radius:.35rem;background:var(--surface)}
.feuille-plan_du_site .texte nav b{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.erreur-texte{margin:0;font-size:1.125rem}
.feuille-erreur .retour a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1.25rem;border-radius:.35rem;background:var(--accent);color:var(--sur-accent);text-decoration:none}
.feuille-erreur .retour a:hover{text-decoration:underline}

/* Pied : fond plus soutenu, liens en ligne */
.pied{background:var(--pied);border-top:1px solid var(--bordure)}
.pied-interieur{max-width:66rem;margin:0 auto;padding:1.75rem 1rem 2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem}
.pied-nom{display:flex;align-items:center;gap:.6rem;min-width:0;margin:0;font-family:var(--police-titre);font-size:1.125rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pied-marque{flex:none;display:block;width:1.75rem;height:1.75rem}
.pied-liens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.5rem}
.pied-liens a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--texte);text-decoration-color:var(--doux)}
.pied-liens a:hover{color:var(--accent);text-decoration-color:currentColor}

/* Tablette : cartes horizontales, la première avec sa grande image au-dessus */
@media (min-width:36em){
.entete-interieur{padding:.9rem 1.5rem}
.marque{font-size:1.35rem}
.principal{padding:2.75rem 1.5rem 4.5rem}
.chronique-tete{margin-bottom:2.25rem}
.principal-lecture>*,.feuille{max-width:44rem}
.frise-element{padding:0 0 2rem 2.5rem}
.frise-element::after,.frise-element::before,.pagination::after,.pagination::before{left:.625rem}
.pagination{padding-left:2.5rem}
.carte{display:flex;align-items:flex-start;gap:1.25rem;padding:1.15rem}
.carte-vignette{flex:0 0 12rem}
.carte-vignette img{border:1px solid var(--bordure);border-radius:.3rem}
.carte-texte{flex:1 1 0;min-width:0;padding:0}
.frise-une .carte{flex-direction:column;align-items:stretch;gap:0;padding:0}
.frise-une .carte-vignette{flex:none}
.frise-une .carte-vignette img{border:0;border-bottom:1px solid var(--bordure);border-radius:calc(.5rem - 1px) calc(.5rem - 1px) 0 0}
.frise-une .carte-texte{padding:1.35rem 1.5rem 1.5rem}
.frise-une .carte-titre{font-size:1.85rem}
.pagination-sens{flex:none}
.pied-interieur{padding:2rem 1.5rem}
}

/* Ordinateur : les dates dans la marge, alignées contre la ligne */
@media (min-width:62em){
.chronique-tete,.chronique-vide,.pagination,.lecture-texte,.principal-lecture .retour,.feuille{margin-left:14rem}
.chronique-tete{margin-bottom:2.75rem}
.frise-element{padding:0 0 2.25rem}
.entree{display:grid;grid-template-columns:10.5rem minmax(0,1fr);column-gap:3.5rem;align-items:start}
.entree-date{margin:0;padding-top:1.3rem;font-size:1rem;text-align:right}
.frise-element::after,.frise-element::before{left:12.25rem}
.frise-element::before{top:1.6rem}
.frise-element:first-child::after{top:2.0375rem}
.frise-une:first-child::after{top:2.625rem}
.frise:last-child>.frise-element:last-child::after{height:2.0375rem}
.carte{gap:1.5rem;padding:1.25rem}
.carte-vignette{flex-basis:14rem}
.frise-une .entree-date{padding-top:1.85rem;font-size:1.0625rem}
.frise-une::before{top:2.0625rem;width:1.125rem;height:1.125rem;margin-left:-.5625rem}
.frise-une .carte{flex-direction:row;align-items:flex-start;gap:1.75rem;padding:1.5rem}
.frise-une .carte-vignette{flex:0 0 54%}
.frise-une .carte-vignette img{border:1px solid var(--bordure);border-radius:.3rem}
.frise-une .carte-texte{padding:0}
.frise-une .carte-titre{font-size:2rem}
.pagination{padding-left:0}
.pagination::after,.pagination::before{left:-1.75rem}
.lecture-tete{position:relative;display:grid;grid-template-columns:10.5rem minmax(0,42rem);column-gap:3.5rem;align-items:start;border:0;padding:0;margin-bottom:2.25rem}
.lecture-date{grid-column:1;grid-row:1;display:block;margin:0;padding-top:.45rem;text-align:right}
.lecture-date::before{position:absolute;top:.7rem;left:12.25rem;margin:0 0 0 -.5625rem;width:1.125rem;height:1.125rem;box-shadow:0 0 0 4px var(--fond)}
.lecture-date time{display:block}
.lecture-titre{grid-column:2;grid-row:1}
.lecture-texte,.principal-lecture .retour,.feuille{max-width:42rem}
.lecture{position:relative;max-width:none}
/* La ligne de l'article : du point de sa date au lien de retour */
.lecture::before{content:"";position:absolute;top:1.25rem;bottom:0;left:12.25rem;width:2px;margin-left:-1px;background:var(--ligne)}
.principal-lecture .retour{position:relative;margin-top:0;padding-top:1.5rem}
.principal-lecture .retour::before{content:"";position:absolute;top:0;left:-1.75rem;width:2px;height:2.4rem;margin-left:-1px;background:var(--ligne)}
.principal-lecture .retour::after{content:"";position:absolute;z-index:1;top:1.95rem;left:-1.75rem;width:.875rem;height:.875rem;margin-left:-.4375rem;border-radius:50%;background:var(--ligne);box-shadow:0 0 0 4px var(--fond)}
.feuille-erreur .feuille-titre{position:relative}
.feuille-erreur .feuille-titre::before{content:"";position:absolute;top:.9rem;left:-1.75rem;width:1.125rem;height:1.125rem;margin-left:-.5625rem;border:3px solid var(--accent);border-radius:50%}
.feuille-plan_du_site .feuille{max-width:none}
.feuille-plan_du_site .texte>h2+ul{columns:2;column-gap:2.5rem}
}