:root{--accent:#1f3f8f;--bord:#d6deeb;--bureau:#1b2130;--cliche:#ffffff;--doux:#4b5772;--doux-bureau:#a9b3c7;--encart:#e7edf6;--filet:#c8d2e3;--fond:#f2f5fa;--marge:#a9b9de;--metal:#8b93a0;--metal-clair:#dde2ea;--police-mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;--police-texte:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;--police-titre:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;--sur-bureau:#e4e9f3;--texte:#1a2645;}
/* Lettre confidentielle (t2b030) : la lettre qu'on se passe sous le manteau. Une seule feuille dactylographiée posée sur un
   bureau sombre, retenue par un trombone au coin supérieur gauche. En-tête de lettre (marque, nom en capitales espacées, domaine
   comme une adresse, menu en petites capitales ; « Page » et numéro en haut à droite de l'accueil). Chaque article est un
   paragraphe numéroté : rang suspendu dans la marge gauche, titre court en gras petites capitales, extrait, date en italique ;
   vignette épinglée dans la marge droite. Mise en avant (premiere) encadrée sous un tampon tourné. Pied sur le bureau.
   Inspiration d015 : ligne de marge, double soulignement d'accent, dates en italique.
   Variables des options : --fond, --encart, --texte, --doux, --accent, --filet, --marge, --bord, --bureau, --sur-bureau,
   --doux-bureau, --metal, --metal-clair, --cliche (palette) ; --police-titre, --police-texte, --police-mono (typo).
   CSS seule : polices système, aucune ressource externe, aucune animation. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background-color:var(--bureau);color:var(--texte);font-family:var(--police-texte);font-size:1rem;line-height:1.65}
body{background-image:radial-gradient(ellipse 70% 100% at 50% 0,color-mix(in srgb,var(--bureau),#ffffff 8%),transparent);background-size:100% 44rem;background-repeat:no-repeat}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,p,ol,ul{margin:0}
h1,h2,h3{font-family:var(--police-titre);font-weight:700;line-height:1.25}
.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}

/* Lien d'évitement : hors de l'écran, visible au clavier */
.evitement{position:absolute;top:-30rem;left:.75rem;z-index:9;padding:.75rem 1rem;background:var(--fond);color:var(--texte);font-weight:700;outline:2px solid var(--accent);outline-offset:-6px}
.evitement:focus{top:.75rem}

/* La feuille : papier sur le bureau, ombre portée, ligne de marge (d015) */
.feuille{position:relative;width:calc(100% - 1rem);max-width:50rem;margin:1.75rem auto 0;padding:2.5rem 1rem 1.75rem 2.5rem;background-color:var(--fond);background-image:linear-gradient(var(--marge),var(--marge));background-size:1px 100%;background-position:2.05rem 0;background-repeat:no-repeat;box-shadow:0 0 0 1px var(--bord),0 2px 4px rgba(0,0,0,.3),0 22px 44px -18px rgba(0,0,0,.8)}

/* Trombone du coin supérieur gauche : la boucle de derrière ne se voit qu'au-dessus du bord, la boucle de devant est sur la feuille */
.feuille::before,.feuille::after{content:"";position:absolute;font-size:.85rem;border:2px solid var(--metal)}
.feuille::before{top:-1.5em;left:1.1em;width:1em;height:1.5em;border-bottom:0;border-radius:.5em .5em 0 0}
.feuille::after{top:-1.05em;left:1.32em;width:.56em;height:2.9em;border-radius:.28em;box-shadow:1px 1px 0 rgba(0,0,0,.12)}

/* En-tête de lettre */
.tete{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:.55rem;border-bottom:1px solid var(--texte)}
.tete-folio{position:absolute;top:.75rem;right:1rem;font-family:var(--police-mono);font-size:.875rem;line-height:1.3;color:var(--doux);font-variant-caps:all-small-caps;letter-spacing:.14em}
.tete-numero{font-weight:700;color:var(--texte)}
.tete-nom{font-family:var(--police-titre);font-size:clamp(.9375rem,.55rem + 1.8vw,1.0625rem);font-weight:700;line-height:1.25;text-transform:uppercase;letter-spacing:.08em}
.marque{display:inline-flex;align-items:center;gap:.65rem;min-height:2.75rem;max-width:100%;color:var(--texte);text-decoration:none}
.marque:hover{color:var(--texte)}
.marque:hover .marque-nom{text-decoration:underline;text-decoration-thickness:2px}
.marque-image{flex:none;width:2.25rem;height:2.25rem}
.marque-nom{min-width:0;overflow-wrap:anywhere}
.tete-adresse{padding-left:2.9rem;font-family:var(--police-mono);font-size:.8125rem;line-height:1.4;color:var(--doux);overflow-wrap:anywhere}
.tete:not(:has(.marque-image)) .tete-adresse{padding-left:0}
.menu{margin-top:.4rem}
.menu ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;margin-left:-.3rem}
.menu a{display:flex;align-items:center;min-height:2.75rem;padding:0 .3rem;font-family:var(--police-titre);font-size:1rem;line-height:1.2;font-variant-caps:all-small-caps;letter-spacing:.06em;text-decoration:none}
.menu a:hover{text-decoration:underline}
.menu a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px}

/* Corps de la lettre : objet souligné, paragraphe suspendu « § » dans la marge */
.lettre{padding-top:1.6rem}
.objet{position:relative;margin-bottom:1.5rem;font-family:var(--police-texte);font-size:1rem;font-weight:700;line-height:1.45;text-transform:uppercase;letter-spacing:.08em;text-decoration:underline double var(--accent);text-underline-offset:.32em}
.objet::before{content:"\00A7";position:absolute;top:0;right:calc(100% + .5rem);font-family:var(--police-mono);font-weight:400;color:var(--accent)}
.vide{color:var(--doux);font-style:italic}

/* Paragraphes numérotés */
.paras{list-style:none;padding:0}
.para{position:relative;display:flow-root;font-size:.9375rem;line-height:1.65}
.para+.para{margin-top:2.5rem}
.para+.para::before{content:"\00B7\00B7\00B7";position:absolute;top:-1.9rem;left:0;right:0;padding-left:.9em;font-family:var(--police-mono);line-height:1.2rem;letter-spacing:.9em;text-align:center;color:var(--doux)}
.para-une+.para{margin-top:2.25rem}
.para-une+.para::before{content:none}
.para-rang{position:absolute;top:0;right:calc(100% + .55rem);font-family:var(--police-mono);font-size:.75rem;line-height:1.547rem;color:var(--doux)}
.para-rang::after{content:"."}
.para-titre{display:inline;font-size:1.125em;line-height:1;letter-spacing:.05em;font-variant-caps:all-small-caps}
.para-titre a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.para-titre a::after{content:"";position:absolute;z-index:1;inset:0}
.para-titre a:hover{text-decoration-thickness:2px}
.para-titre a:focus-visible{outline:0}
.para-titre a:focus-visible::after{outline:2px solid var(--accent);outline-offset:.3rem}
.para-extrait{display:inline}
.para-extrait::before{content:"\2014\00A0"}
.para-date{display:inline;white-space:nowrap;font-style:italic;color:var(--doux)}
.para-date::before{content:"("}
.para-date::after{content:")"}

/* Vignette épinglée par un petit trombone (téléphone : à droite du paragraphe, 30 %) */
.vignette{position:relative;float:right;width:30%;margin:.35rem 0 .4rem .85rem;padding:.2rem;background:var(--cliche);box-shadow:0 1px 3px rgba(0,0,0,.35);transform:rotate(1.5deg)}
.para:nth-child(even) .vignette{transform:rotate(-1.2deg)}
.vignette img,.une-photo img{display:block;width:100%;height:auto}
.vignette::before,.vignette::after{content:"";position:absolute;font-size:.7rem;border:1.5px solid var(--metal)}
.vignette::before{top:-1.5em;left:1.3em;width:1em;height:1.5em;border-bottom:0;border-radius:.5em .5em 0 0}
.vignette::after{top:-1.05em;left:1.52em;width:.56em;height:2.9em;border-radius:.28em}

/* Mise en avant : encadré, tampon tourné ; avec image, la grande capture agrafée ; sans image, double filet d'accent */
.para-une{padding:1rem;border:1px solid var(--texte);background:var(--encart);font-size:1rem}
.para-une:not(.para-img){border:6px double var(--accent)}
.para-une .para-rang{top:calc(1rem + 1px);font-size:.8125rem;line-height:1.72rem}
.para-une:not(.para-img) .para-rang{top:calc(1rem + 6px)}
.para-une .para-titre{display:block;font-size:1.375rem;line-height:1.25}
.para-une .para-extrait{display:block;margin-top:.55rem;font-size:1.0625rem;line-height:1.6}
.para-une .para-extrait::before{content:none}
.para-une:not(.para-img) .para-extrait{font-size:clamp(1.0625rem,.9rem + .9vw,1.1875rem)}
.une-photo{position:relative;display:block;margin:.3rem 0 1.75rem;padding:.35rem;background:var(--cliche);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.une-photo::before{content:"";position:absolute;top:.35rem;left:-.55rem;width:2.4rem;height:.3rem;border-radius:1px;background:linear-gradient(var(--metal-clair),var(--metal));box-shadow:0 1px 1px rgba(0,0,0,.4);transform:rotate(-38deg)}
.tampon{display:inline-block;padding:.3rem .6rem .35rem;border:5px double var(--accent);border-radius:.3rem;background:var(--encart);color:var(--accent);font-family:var(--police-mono);font-size:.75rem;font-weight:700;line-height:1.3;text-align:center;letter-spacing:.05em;transform:rotate(-6deg)}
.tampon-titre{display:block;font-size:1.0625rem;letter-spacing:.14em;text-transform:uppercase}
.tampon time{display:block;font-size:.9375rem;letter-spacing:.08em}
.tampon-titre+time{font-size:.75rem;letter-spacing:.05em}
p.tampon{float:right;margin:-.15rem -.15rem .6rem .9rem}
.une-photo .tampon{position:absolute;right:-.5rem;bottom:-1.05rem}

/* Pagination en bas de feuille : numéros, puis page précédente et suivante en petites capitales */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 1.5rem;margin-top:2.75rem;padding-top:1rem;border-top:1px solid var(--filet)}
.pagination-pages{order:-1;flex:1 0 100%;list-style:none;padding:0 max(0px,calc(50% - 7rem));display:flex;flex-wrap:wrap;justify-content:center}
.pagination-pages a,.pagination-courante{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;font-family:var(--police-mono);font-size:.9375rem;text-decoration:none}
.pagination-pages a:hover{text-decoration:underline}
.pagination-courante{min-width:2.4rem;min-height:2.4rem;margin:.175rem .1rem;border:3px double var(--accent);color:var(--accent);font-weight:700;transform:rotate(-6deg)}
.pagination-sens{position:relative;display:flex;align-items:center;min-height:2.75rem;padding:0 .25rem;font-family:var(--police-titre);font-size:1.0625rem;font-variant-caps:all-small-caps;letter-spacing:.09em;text-decoration:underline}
.pagination-precedente{padding-left:1.5rem}
.pagination-suivante{padding-right:1.5rem}
.pagination-precedente::before{content:"\2190";position:absolute;left:.25rem}
.pagination-suivante::after{content:"\2192";position:absolute;right:.25rem}
.pagination-sens::before,.pagination-sens::after,.retour a::before{font-family:var(--police-mono);font-size:1.15em;line-height:1}

/* Article : date en haut à droite, objet souligné, références en petit, capture agrafée */
.billet-date{margin-bottom:.9rem;text-align:right;font-style:italic;color:var(--doux)}
.objet-titre{margin-bottom:1.6rem;font-family:var(--police-titre);font-size:clamp(1.3rem,1.05rem + 1.3vw,1.85rem);line-height:1.3;letter-spacing:0;text-transform:none;text-decoration:none}
.objet-titre::before{top:.15em;font-size:1rem}
.objet-debut{text-decoration:underline double var(--accent);text-decoration-thickness:1px;text-underline-offset:.25em;overflow-wrap:anywhere}
.objet-suite{font-weight:400;color:var(--doux)}
.texte{overflow-wrap:break-word}
.texte p,.texte ul,.texte ol{margin:0 0 1em}
.texte ul,.texte ol{padding-left:1.4rem}
.texte a{color:var(--accent);text-decoration:underline;overflow-wrap:anywhere}
.texte a:hover{text-decoration-thickness:2px}
.texte h2{margin:2rem 0 .7rem;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.28em}
.texte h3{margin:1.5rem 0 .5rem;font-size:1rem}
.texte img{display:block;margin:1.6rem 0 1.9rem;padding:.7rem .6rem 1rem;background:linear-gradient(90deg,var(--metal) 0 .25rem,var(--metal-clair) .25rem calc(100% - .25rem),var(--metal) calc(100% - .25rem)) 50% .16rem/3.2rem .32rem no-repeat,linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)) 50% .48rem/3.2rem 1px no-repeat,var(--cliche);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.corps{line-height:1.7}
.corps>p:has(>a){margin-bottom:.3rem;font-family:var(--police-mono);font-size:.8125rem;line-height:1.55;color:var(--doux)}
.corps>p:has(>a)+p:not(:has(a)){margin-top:1.4rem}
.retour{margin-top:2.25rem;padding-top:.6rem;border-top:1px solid var(--filet)}
.retour a{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding-left:1.35rem;font-family:var(--police-titre);font-size:1.0625rem;font-variant-caps:all-small-caps;letter-spacing:.09em;color:var(--accent)}
.retour a::before{content:"\2190";position:absolute;left:0}

/* Pages de service */
.page-contact iframe{margin:1.9rem 0 1.25rem;box-shadow:0 -1rem 0 -.94rem var(--texte),0 1rem 0 -.94rem var(--texte)}
.page-plan_du_site .texte ul{list-style:none;padding:0}
.page-plan_du_site .texte>ul:first-child{display:flex;flex-wrap:wrap;gap:0 1.5rem;margin-bottom:.5rem}
.page-plan_du_site .texte>ul:first-child a{display:flex;align-items:center;min-height:2.75rem}
.page-plan_du_site .texte>h2+ul{counter-reset:plan}
.page-plan_du_site .texte>h2+ul>li{position:relative;margin:0;padding-left:2.6rem;counter-increment:plan;break-inside:avoid}
.page-plan_du_site .texte>h2+ul>li::before{content:counter(plan) ".";position:absolute;top:.55rem;left:0;width:2.1rem;text-align:right;font-family:var(--police-mono);font-size:.8125rem;line-height:1.65rem;color:var(--doux)}
.page-plan_du_site .texte>h2+ul a{display:block;padding:.55rem 0}
.texte nav{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--filet);text-align:center}
.texte nav h2{margin:0 0 .25rem;text-decoration:none;color:var(--doux)}
.texte nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1rem}
.texte nav a,.texte nav b{display:flex;align-items:center;min-height:2.75rem}
.texte nav b{color:var(--accent)}

/* Page introuvable : une feuille presque vide, un tampon */
.introuvable{display:flex;flex-direction:column;align-items:center;min-height:55vh;padding:4rem 0 1rem;text-align:center}
.tampon-404{padding:.55rem 1.25rem;border-width:7px;font-size:clamp(1.25rem,1rem + 2.5vw,2.25rem);line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.introuvable-texte{max-width:28rem;margin-top:3rem}
.introuvable .retour{border-top:0}

/* Pied, sur le bureau : liens en clair, nom et domaine en petit corps */
.pied{padding:1.75rem 1rem 2.5rem;text-align:center;color:var(--doux-bureau);font-size:.875rem;line-height:1.5}
.pied-liens{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,auto);justify-content:center}
.pied-liens li{display:flex;align-items:center;justify-content:center}
.pied-liens a{display:flex;align-items:center;min-height:2.75rem;padding:0 .6rem;color:var(--sur-bureau);text-decoration:none}
.pied-liens a:hover{color:var(--sur-bureau);text-decoration:underline}
.pied :focus-visible{outline-color:var(--sur-bureau)}
.pied-signature{margin-top:.5rem;font-family:var(--police-mono);font-size:.8125rem;overflow-wrap:anywhere}
.pied-nom{display:block;color:var(--sur-bureau);font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* Ordinateur et tablette : feuille de 50rem, marge de 5rem pour les rangs, marge droite de 10rem pour les vignettes */
@media (min-width:48rem){
  .feuille{width:calc(100% - 3rem);margin-top:3rem;padding:3.25rem 3rem 3rem 5rem;background-position:4.3rem 0}
  .feuille::before,.feuille::after{font-size:1.2rem}
  .tete{grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;align-items:center}
  .tete-nom{grid-column:1/-1;grid-row:1;font-size:clamp(1.25rem,.55rem + 1.5vw,1.5rem);letter-spacing:.16em}
  .tete-adresse{grid-column:1;grid-row:2;padding-left:3.5rem}
  .marque-image{width:2.75rem;height:2.75rem}
  .menu{grid-column:2;grid-row:2;margin:0 -.45rem -.3rem 0}
  .menu ul{margin-left:0}
  .menu a{padding:0 .45rem;font-size:1.0625rem;letter-spacing:.09em}
  .tete-folio{top:1.15rem;right:3rem}
  .lettre{padding-top:2rem}
  .objet::before{right:calc(100% + .95rem)}
  .paras{margin-right:10rem}
  .para{font-size:1rem}
  .para-rang{right:calc(100% + 1rem);font-size:.8125rem;line-height:1.65rem}
  .para-img .para-titre a::after{right:-10rem}
  .vignette{position:absolute;float:none;top:.2rem;left:calc(100% + 1rem);width:9rem;margin:0;padding:.25rem}
  .para-img{min-height:5.5rem}
  .para-une{margin-right:-10rem;padding:1.4rem 1.5rem}
  .para-une .para-titre a::after{right:0}
  .para-une .para-rang{top:calc(1.4rem + 1px)}
  .para-une:not(.para-img) .para-rang{top:calc(1.4rem + 6px)}
  .une-photo{float:left;width:15rem;margin:.15rem 1.75rem 1.75rem 0}
  .para-une.para-img .para-titre,.para-une.para-img .para-extrait{display:flow-root}
  .pagination-pages{padding:0}
  .pied-liens{display:flex;flex-wrap:wrap}
  .pied-liens li+li::before{content:"\00B7";color:var(--doux-bureau)}
  .pied-nom{display:inline}
  .pied-domaine::before{content:"\2014\00A0"}
  .corps,.principal>.texte{max-width:36rem}
  .page-contact>.texte{max-width:none}
  .page-contact>.texte>p{max-width:36rem}
  .page-plan_du_site>.texte{max-width:none}
  .page-plan_du_site .texte>h2+ul{columns:2;column-gap:2.5rem}
  .page-plan_du_site .texte>h2+ul a{padding:.2rem 0}
  .page-plan_du_site .texte>h2+ul>li::before{top:.2rem}
}
@media (min-width:64rem){
  .une-photo{width:19rem}
}