/* ClickRegul, palette prélevée dans le logo */
:root{
  --bleu:#0A63A8; --bleu-clair:#E2EEF8;
  --vert:#0A6B32; --vert-clair:#E0F0E4;
  --ambre:#96690A; --ambre-clair:#FAF0D8;
  --rouge:#B03318; --rouge-clair:#FAEAE4;
  --encre:#131a26; --encre-2:#4A5468; --encre-3:#7E889B;
  --trait:#DCE2EE; --fond:#F4F7FB; --carte:#fff;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--sans);
     font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
.bandeau{background:var(--bleu);color:#fff;padding:12px 18px;display:flex;
         align-items:center;justify-content:space-between}
.bandeau b{font-size:18px}
.filet{height:3px;background:linear-gradient(90deg,#0078C0,#0090D8 14%,#009030 32%,
       #A8C018 45%,#F0D800 58%,#F0A800 72%,#D84818 86%,#C01818)}
.mention{background:var(--ambre-clair);color:var(--ambre);font-size:13px;padding:9px 18px;
         border-bottom:1px solid var(--trait)}
main{max-width:640px;margin:0 auto;padding:22px 18px 64px}
h1{font-size:26px;line-height:1.25;margin:.4em 0 .5em}
h2{font-size:20px;margin:1.4em 0 .5em}
p{margin:0 0 1em;color:var(--encre-2)}
.btn{display:block;width:100%;padding:15px;border:0;border-radius:9px;background:var(--vert);
     color:#fff;font:600 17px var(--sans);cursor:pointer;text-align:center;text-decoration:none}
.btn.bleu{background:var(--bleu)}
.btn.neutre{background:transparent;color:var(--encre-2);border:1px solid var(--trait);font-weight:500}
.btn:focus-visible{outline:3px solid var(--encre);outline-offset:2px}
.opt{display:block;width:100%;text-align:left;background:var(--carte);border:1px solid var(--trait);
     border-radius:10px;padding:15px 17px;margin-bottom:9px;font:400 16px var(--sans);
     color:var(--encre);cursor:pointer}
.opt:hover,.opt:focus-visible{border-color:var(--bleu);background:var(--bleu-clair);outline:none}
.opt small{display:block;color:var(--encre-3);font-size:14px;margin-top:3px}
.jauge{display:flex;gap:5px;margin-bottom:18px}
.jauge i{height:4px;flex:1;border-radius:2px;background:var(--trait)}
.jauge i.on{background:var(--bleu)}
.bloc{background:var(--carte);border:1px solid var(--trait);border-radius:11px;padding:17px;margin-bottom:16px}
.bloc.ok{background:var(--vert-clair);border-color:var(--vert)}
.ligne{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--trait);font-size:15.5px}
.ligne .p{flex:0 0 20px;height:20px;border-radius:50%;color:#fff;font:700 12px/20px var(--sans);text-align:center}
.p.v{background:var(--vert)} .p.a{background:var(--ambre)} .p.r{background:var(--rouge)}
.ligne small{display:block;color:var(--encre-3);font-size:13.5px}
.prix{font:500 30px var(--sans);color:var(--bleu)}
label.case{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--encre-2);margin-bottom:12px}
footer{border-top:1px solid var(--trait);margin-top:40px;padding:20px 18px;font-size:13.5px;color:var(--encre-3)}
footer a{color:var(--encre-2)}
@media(prefers-color-scheme:dark){
  :root{--fond:#0F1219;--carte:#161A23;--encre:#E6EBF4;--encre-2:#A8B2C4;--encre-3:#78849A;
        --trait:#252E3D;--bleu:#6BB4EC;--bleu-clair:#122334;--vert:#55C47F;--vert-clair:#0F2417;
        --ambre:#E3B547;--ambre-clair:#27200D;--rouge:#F0907A;--rouge-clair:#2B1714}
  .bandeau,.btn{color:#0F1219}
}

/* Pages légales */
.chapo{font-size:15.5px;color:var(--encre-3);border-left:3px solid var(--bleu);
       padding-left:13px;margin-bottom:26px}
main h3{font-size:16px;margin:1.5em 0 .35em;color:var(--encre)}
main ul{margin:0 0 1em;padding-left:22px;color:var(--encre-2)}
main li{margin-bottom:.45em}
main hr{border:0;border-top:1px solid var(--trait);margin:28px 0}
.note{background:var(--ambre-clair);color:var(--ambre);font-size:14px;
      padding:11px 13px;border-radius:8px}

/* ------------------------------------------------------------------
   Fond de page : un bureau administratif, et le contenu posé dessus
   comme une feuille. Quadrillage de registre, hexagones du logo en
   trame, et quatre lavis de couleur prélevés dans le lion.
   Tout est en SVG intégré : aucune image à télécharger.
   ------------------------------------------------------------------ */
body{position:relative;isolation:isolate}

body::before,
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}

/* couche 1 : les lavis de couleur */
body::before{
  background:
    radial-gradient(58rem 42rem at 8% -6%,   rgba(10,99,168,.16), transparent 62%),
    radial-gradient(48rem 38rem at 104% 12%, rgba(0,144,48,.13),  transparent 60%),
    radial-gradient(44rem 34rem at -8% 88%,  rgba(240,168,0,.12), transparent 58%),
    radial-gradient(52rem 40rem at 96% 102%, rgba(216,72,24,.11), transparent 60%);
}

/* couche 2 : le quadrillage et les hexagones */
body::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22162%22 height=%22187%22 viewBox=%220 0 162 187%22%3E %3Cg stroke=%22%230A63A8%22 stroke-width=%22.5%22 fill=%22none%22%3E %3Cpath d=%22M0 0H162M0 23.4H162M0 46.8H162M0 70.1H162M0 93.5H162M0 116.9H162M0 140.3H162M0 163.6H162%22/%3E %3Cpath d=%22M0 0V187M23.1 0V187M46.3 0V187M69.4 0V187M92.6 0V187M115.7 0V187M138.9 0V187%22/%3E %3C/g%3E %3Cg stroke=%22%230A63A8%22 stroke-width=%221.15%22 fill=%22none%22 stroke-linejoin=%22round%22%3E %3Cpolygon points=%220.00,-54.00 46.77,-27.00 46.77,27.00 0.00,54.00 -46.77,27.00 -46.77,-27.00%22/%3E%3Cpolygon points=%22162.00,-54.00 208.77,-27.00 208.77,27.00 162.00,54.00 115.23,27.00 115.23,-27.00%22/%3E%3Cpolygon points=%220.00,133.00 46.77,160.00 46.77,214.00 0.00,241.00 -46.77,214.00 -46.77,160.00%22/%3E %3Cpolygon points=%22162.00,133.00 208.77,160.00 208.77,214.00 162.00,241.00 115.23,214.00 115.23,160.00%22/%3E%3Cpolygon points=%2281.00,39.50 127.77,66.50 127.77,120.50 81.00,147.50 34.23,120.50 34.23,66.50%22/%3E %3C/g%3E %3C/svg%3E");
  background-size:243px 280px;
  opacity:.13;
}

/* la feuille */
main{
  position:relative;
  background:var(--carte);
  border:1px solid var(--trait);
  border-radius:16px;
  margin:20px auto 62px;
  padding:28px 24px 44px;
  box-shadow:0 1px 1px rgba(19,26,38,.04),
             0 4px 10px -4px rgba(19,26,38,.07),
             0 22px 48px -22px rgba(19,26,38,.22);
  overflow:hidden;
}

/* le filigrane, posé en bas à droite de la feuille comme un tampon */
main::after{
  content:"";position:absolute;right:-64px;bottom:-72px;
  width:300px;height:300px;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22 viewBox=%220 0 300 300%22%3E %3Cg fill=%22none%22 stroke=%22%230A63A8%22%3E %3Cpolygon points=%22150.00,32.00 252.19,91.00 252.19,209.00 150.00,268.00 47.81,209.00 47.81,91.00%22 stroke-width=%222.4%22/%3E %3Cpolygon points=%22150.00,54.00 233.14,102.00 233.14,198.00 150.00,246.00 66.86,198.00 66.86,102.00%22 stroke-width=%22.9%22/%3E %3Cpath d=%22M150 62V238M74 106l152 88M226 106L74 194%22 stroke-width=%22.7%22/%3E %3C/g%3E %3Ctext x=%22150%22 y=%22163%22 font-family=%22Helvetica,Arial,sans-serif%22 font-size=%2246%22 font-weight=%22700%22 letter-spacing=%222%22 text-anchor=%22middle%22 fill=%22%230A63A8%22%3ECR%3C/text%3E %3C/svg%3E");
  background-size:300px 300px;background-repeat:no-repeat;
  opacity:.055;transform:rotate(-12deg);
}
main > *{position:relative;z-index:1}

/* le liseré du logo, repris en tête de feuille */
main::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#0078C0,#0090D8 14%,#009030 32%,
             #A8C018 45%,#F0D800 58%,#F0A800 72%,#D84818 86%,#C01818);
  opacity:.9;
}

footer{border-top:0;margin-top:0;padding:4px 24px 34px}

@media (max-width:560px){
  main{margin:12px 10px 44px;padding:22px 17px 36px;border-radius:13px}
  footer{padding:4px 18px 30px}
}

@media (prefers-color-scheme:dark){
  body::before{
    background:
      radial-gradient(58rem 42rem at 8% -6%,   rgba(107,180,236,.13), transparent 62%),
      radial-gradient(48rem 38rem at 104% 12%, rgba(85,196,127,.10), transparent 60%),
      radial-gradient(44rem 34rem at -8% 88%,  rgba(227,181,71,.09), transparent 58%),
      radial-gradient(52rem 40rem at 96% 102%, rgba(240,144,122,.09),transparent 60%);
  }
  body::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22162%22 height=%22187%22 viewBox=%220 0 162 187%22%3E %3Cg stroke=%22%237FA8CC%22 stroke-width=%22.5%22 fill=%22none%22%3E %3Cpath d=%22M0 0H162M0 23.4H162M0 46.8H162M0 70.1H162M0 93.5H162M0 116.9H162M0 140.3H162M0 163.6H162%22/%3E %3Cpath d=%22M0 0V187M23.1 0V187M46.3 0V187M69.4 0V187M92.6 0V187M115.7 0V187M138.9 0V187%22/%3E %3C/g%3E %3Cg stroke=%22%237FA8CC%22 stroke-width=%221.15%22 fill=%22none%22 stroke-linejoin=%22round%22%3E %3Cpolygon points=%220.00,-54.00 46.77,-27.00 46.77,27.00 0.00,54.00 -46.77,27.00 -46.77,-27.00%22/%3E%3Cpolygon points=%22162.00,-54.00 208.77,-27.00 208.77,27.00 162.00,54.00 115.23,27.00 115.23,-27.00%22/%3E%3Cpolygon points=%220.00,133.00 46.77,160.00 46.77,214.00 0.00,241.00 -46.77,214.00 -46.77,160.00%22/%3E %3Cpolygon points=%22162.00,133.00 208.77,160.00 208.77,214.00 162.00,241.00 115.23,214.00 115.23,160.00%22/%3E%3Cpolygon points=%2281.00,39.50 127.77,66.50 127.77,120.50 81.00,147.50 34.23,120.50 34.23,66.50%22/%3E %3C/g%3E %3C/svg%3E");
    opacity:.11;
  }
  main{
    box-shadow:0 1px 1px rgba(0,0,0,.3),
               0 4px 12px -4px rgba(0,0,0,.4),
               0 26px 54px -24px rgba(0,0,0,.6);
  }
  main::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22 viewBox=%220 0 300 300%22%3E %3Cg fill=%22none%22 stroke=%22%239FC4E4%22%3E %3Cpolygon points=%22150.00,32.00 252.19,91.00 252.19,209.00 150.00,268.00 47.81,209.00 47.81,91.00%22 stroke-width=%222.4%22/%3E %3Cpolygon points=%22150.00,54.00 233.14,102.00 233.14,198.00 150.00,246.00 66.86,198.00 66.86,102.00%22 stroke-width=%22.9%22/%3E %3Cpath d=%22M150 62V238M74 106l152 88M226 106L74 194%22 stroke-width=%22.7%22/%3E %3C/g%3E %3Ctext x=%22150%22 y=%22163%22 font-family=%22Helvetica,Arial,sans-serif%22 font-size=%2246%22 font-weight=%22700%22 letter-spacing=%222%22 text-anchor=%22middle%22 fill=%22%239FC4E4%22%3ECR%3C/text%3E %3C/svg%3E");opacity:.07}
}

/* à l'impression, on ne veut que le texte */
@media print{
  body::before,body::after,main::after,main::before{display:none}
  main{box-shadow:none;border:0;padding:0}
}

/* pas d'animation ici, mais on respecte le réglage pour les futurs ajouts */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* option annoncée mais pas encore ouverte : grisée sans transparence,
   pour que le filigrane de la feuille ne transparaisse pas au travers */
.opt-bientot{cursor:default;color:var(--encre-3);background:var(--surface-2,#EEF0F5)}
.opt-bientot small{color:var(--encre-3)}
@media (prefers-color-scheme:dark){ .opt-bientot{background:#1D222D} }

/* barre supérieure : marque cliquable et accès au journal */
.bandeau .marque{color:inherit;text-decoration:none}
.bandeau .nav{display:flex;align-items:center;gap:14px;font-size:12.5px}
.bandeau .nav a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:1px;font-size:13.5px}
.bandeau .nav a:hover{border-bottom-color:currentColor}
.bandeau .nav span{opacity:.85}
@media (prefers-color-scheme:dark){
  .bandeau .nav a{border-bottom-color:rgba(15,18,25,.45)}
}

/* ---------------- Le journal ---------------- */
.billet{padding:18px 0;border-bottom:1px solid var(--trait)}
.billet:last-of-type{border-bottom:0}
.billet h2{margin:0 0 4px;font-size:19px;line-height:1.3}
.billet h2 a{color:var(--encre);text-decoration:none}
.billet h2 a:hover{color:var(--bleu)}
.billet p{margin:0 0 6px}
.meta{font-size:13.5px;color:var(--encre-3);margin:0 0 8px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 22px}
.tags a{font-size:13px;padding:4px 11px;border-radius:999px;text-decoration:none;
  border:1px solid var(--trait);color:var(--encre-2);background:var(--carte)}
.tags a:hover{border-color:var(--bleu);color:var(--bleu)}
.tags a.actif{background:var(--bleu);border-color:var(--bleu);color:#fff}
@media (prefers-color-scheme:dark){ .tags a.actif{color:#0F1219} }

.article h1{font-size:27px;margin-bottom:6px}
.article h2{font-size:20px;margin:1.7em 0 .4em}
.article h3{font-size:17px;margin:1.4em 0 .3em}
.article p{font-size:16.5px}
.article ul,.article ol{font-size:16.5px;color:var(--encre-2);padding-left:22px;margin:0 0 1em}
.article li{margin-bottom:.45em}
.article blockquote{margin:1.2em 0;padding:2px 0 2px 15px;border-left:3px solid var(--bleu);
  background:var(--bleu-clair);border-radius:0 8px 8px 0}
.article blockquote p{margin:.6em 13px .6em 0;font-size:16px}
.article pre{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;background:var(--surface-2,#EEF0F5);
  border:1px solid var(--trait);border-radius:9px;padding:13px 15px;overflow-x:auto}
.article code{font-family:ui-monospace,Menlo,monospace;font-size:14px;background:var(--surface-2,#EEF0F5);
  padding:1px 5px;border-radius:4px}
.article pre code{background:none;padding:0}
.article hr{border:0;border-top:1px solid var(--trait);margin:26px 0}
@media (prefers-color-scheme:dark){
  .article pre,.article code{background:#1D222D}
}

/* illustration d'article */
.illu{margin:0 0 20px}
.illu img{display:block;width:100%;height:auto;border:1px solid var(--trait);border-radius:11px;
  background:var(--surface-2,#EEF0F5)}
.illu figcaption{font-size:13.5px;color:var(--encre-3);margin-top:8px;line-height:1.55}
.billet .vignette{display:block;margin:0 0 12px}
.billet .vignette img{display:block;width:100%;height:auto;border:1px solid var(--trait);
  border-radius:10px;background:var(--surface-2,#EEF0F5)}
@media (min-width:620px){
  .billet.avec-illu{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:start}
  .billet.avec-illu .vignette{margin:0}
  .billet.avec-illu h2{grid-column:2}
  .billet.avec-illu .meta,.billet.avec-illu p{grid-column:2}
  .billet.avec-illu .vignette{grid-row:1 / span 3}
}