@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-normal-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-normal-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-normal-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-serif-4-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Carnet de chantier : une colonne de lecture, les dates en marge comme
   dans un registre ; boldness reservee au panneau de chantier d'accueil. */
:root{
  --fond:#ffffff;         /* fond blanc : laisse respirer le logo */
  --dalle:#f2f5fa;        /* surfaces, teinte du bleu du logo */
  --encre:#151d2e;        /* marine, comme le texte du logo */
  --gris:#556075;
  --trait:#d5dce7;
  --bleu:#1c4c99;         /* bleu du toit du logo : liens, etapes */
  --bleu-pale:#dfe7f5;
  --signal:#b8461a;       /* reserve aux problemes */
  --signal-pale:#f8e6dc;
  --panneau:#ffffff;
  --logo-fond:transparent;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --mesure:68ch;
  --large:1120px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fond:#0e1320;--dalle:#161d2c;--encre:#e4e9f2;--gris:#9ba6b9;--trait:#273148;
    --bleu:#8fb0ee;--bleu-pale:#1e2b45;--signal:#f08c5a;--signal-pale:#3a2419;--panneau:#182034;--logo-fond:#ffffff;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fond:#0e1320;--dalle:#161d2c;--encre:#e4e9f2;--gris:#9ba6b9;--trait:#273148;
  --bleu:#8fb0ee;--bleu-pale:#1e2b45;--signal:#f08c5a;--signal-pale:#3a2419;--panneau:#182034;--logo-fond:#ffffff;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 1.0625rem/1.65 var(--text);
  padding-inline:16px}
img{max-width:100%;height:auto}
a{color:var(--bleu);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:.005em;
  text-wrap:balance;margin:0}
.skip{position:absolute;left:-999px;top:0;background:var(--encre);color:var(--fond);padding:.5rem 1rem;z-index:10}
.skip:focus{left:16px}
.label{font:600 .78rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cadre{max-width:var(--large);margin-inline:auto}

/* ---- En-tete ---------------------------------------------------------- */
.entete{border-bottom:1px solid var(--trait);margin-inline:-16px;padding-inline:16px;background:var(--fond)}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.6rem}
.marque{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--encre);line-height:1.1}
.marque img{width:84px;height:auto;display:block;background:var(--logo-fond);border-radius:6px;padding:2px}
.marque span{display:grid;gap:.2rem}
.marque .label{font-size:.72rem}
.marque strong{font:700 1.2rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:480px){.marque img{width:64px}.marque strong{font-size:1rem}}
.nav{display:flex;flex-wrap:wrap;gap:.15rem 1.1rem}
.nav a{font:600 1rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--gris);
  text-decoration:none;padding-block:.45rem;border-bottom:2px solid transparent}
.nav a:hover{color:var(--encre)}
.nav a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--bleu)}
.nav a.nav-pb[aria-current="page"]{border-bottom-color:var(--signal)}
.nav-toggle{display:none;font:600 .95rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  background:none;color:var(--encre);border:1px solid var(--trait);padding:.55rem .8rem;border-radius:2px;cursor:pointer}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--dalle);
    border-bottom:1px solid var(--trait);padding:.6rem 16px 1rem;flex-direction:column;z-index:5}
  .nav.ouvert{display:flex}
  .entete .cadre{position:relative}
}

/* ---- Accueil : panneau de chantier ------------------------------------ */
.ouverture{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);
  align-items:center;padding-block:clamp(2rem,6vw,4.5rem) 2rem}
@media (max-width:820px){.ouverture{grid-template-columns:minmax(0,1fr)}}
.ouverture h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:700;text-transform:uppercase;letter-spacing:-.005em}
.ouverture h1 em{font-style:normal;color:var(--bleu)}
.ouverture .chapo{max-width:46ch;color:var(--gris);font-size:1.12rem;margin:1.2rem 0 0}
.panneau{background:var(--panneau);border:3px solid var(--encre);padding:1.1rem 1.25rem 1rem;
  box-shadow:8px 8px 0 var(--trait);max-width:30rem;width:100%;justify-self:end}
@media (max-width:820px){.panneau{justify-self:start}}
.panneau-titre{font:700 1.5rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em;
  border-bottom:3px solid var(--encre);padding-bottom:.6rem;margin-bottom:.4rem}
.panneau dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:1rem}
.panneau dt{font:600 .82rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
  padding-block:.55rem;border-bottom:1px solid var(--trait)}
.panneau dd{margin:0;font:500 .92rem/1.2 var(--mono);text-align:right;padding-block:.55rem;border-bottom:1px solid var(--trait)}
.panneau dd a{color:inherit}
.panneau dl > :nth-last-child(-n+2){border-bottom:0}
.panneau-note{font-size:.86rem;color:var(--gris);margin:.8rem 0 0;font-style:italic}
.panneau-note a{color:var(--signal)}

/* ---- Frise ------------------------------------------------------------ */
.frise{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding-block:1.4rem 1rem;margin-block:1rem 0}
.frise-tete{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.frise-tete h2{font-size:1.5rem;text-transform:uppercase}
.frise-tete p{margin:0;color:var(--gris);font-size:.92rem}
.frise-defile{overflow-x:auto}
.frise svg{display:block;width:100%;min-width:640px;height:auto}
.frise .ligne{stroke:var(--trait);stroke-width:1}
.frise .graduation{stroke:var(--trait);stroke-dasharray:2 3}
.frise .txt{fill:var(--gris);font:500 12px var(--mono)}
.frise .etape{fill:var(--encre);font:600 14px var(--display);letter-spacing:.06em;text-transform:uppercase}
.frise .point{fill:var(--bleu);stroke:var(--fond);stroke-width:2}
.frise .point.pb{fill:var(--signal)}
.frise a:hover .point,.frise a:focus .point{stroke:var(--encre)}

/* ---- Journal ---------------------------------------------------------- */
.page{display:grid;gap:2.5rem;padding-block:2.5rem 4rem}
.tete-page{max-width:var(--mesure);display:grid;gap:.6rem}
.tete-page h1{font-size:clamp(2.2rem,5vw,3.4rem);text-transform:uppercase}
.tete-page p{margin:0;color:var(--gris)}
.journal{display:grid;gap:2.2rem;max-width:860px}
.mois{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:0 1.5rem}
@media (max-width:640px){.mois{grid-template-columns:minmax(0,1fr)}}
.mois > h2{font:500 .9rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--gris);
  padding-top:1.15rem;position:sticky;top:env(safe-area-inset-top,0px);align-self:start}
@media (max-width:640px){.mois > h2{position:static;padding:0 0 .3rem}}
.entrees{display:grid;border-top:2px solid var(--encre)}
.entree{display:grid;grid-template-columns:3.6rem minmax(0,1fr) auto;gap:0 1.1rem;padding-block:1rem;
  border-bottom:1px solid var(--trait);position:relative}
.entree.pb::before{content:"";position:absolute;left:-.9rem;top:1rem;bottom:1rem;width:3px;background:var(--signal)}
.entree .jour{font:500 .95rem/1.5 var(--mono);color:var(--gris)}
.entree .jour b{display:block;font-weight:500;color:var(--encre);font-size:1.35rem;line-height:1}
.entree h3{font-size:1.45rem;font-weight:600;margin:.1rem 0 .35rem}
.entree h3 a{color:var(--encre);text-decoration:none}
.entree h3 a:hover{color:var(--bleu);text-decoration:underline;text-decoration-thickness:2px}
.entree h3 a::after{content:"";position:absolute;inset:0}
.entree p{margin:0;color:var(--gris);font-size:.98rem;line-height:1.55}
.entree .meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin-top:.5rem;align-items:center}
.entree img{width:7.5rem;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--trait);background:var(--dalle);display:block}
@media (max-width:560px){
  .entree{grid-template-columns:3rem minmax(0,1fr)}
  .entree img{grid-column:2;width:100%;max-width:16rem;margin-top:.7rem}
}
.etiquette{font:600 .76rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .45rem;border:1px solid var(--trait);color:var(--gris);border-radius:2px;position:relative;z-index:1;text-decoration:none}
a.etiquette:hover{color:var(--encre);border-color:var(--gris)}
.etiquette.pb{color:var(--signal);border-color:var(--signal);background:var(--signal-pale)}
.compte{font:500 .8rem/1 var(--mono);color:var(--gris)}

/* ---- Article ---------------------------------------------------------- */
.article{display:grid;gap:2rem;padding-block:2.5rem 4rem}
.article-tete{display:grid;gap:.9rem;max-width:var(--mesure);padding-bottom:1.6rem;border-bottom:2px solid var(--encre)}
.fil{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.fil a{text-decoration:none}
.date-registre{font:500 .95rem/1 var(--mono);color:var(--gris)}
.article-tete h1{font-size:clamp(2.2rem,5.4vw,3.6rem);text-transform:uppercase}
.article-tete .meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.prose{max-width:860px;font-size:1.12rem;line-height:1.72}
.prose > :not(.planche){max-width:var(--mesure)}
.prose > *{margin-block:0 1.05em}
.prose p{margin-block:0 1.05em}
.prose img.photo{display:block;border:1px solid var(--trait);background:var(--dalle);cursor:zoom-in}
.prose img.vignette{float:right;width:72px;height:72px;object-fit:contain;margin:.3rem 0 .6rem 1.2rem;
  padding:.35rem;background:var(--panneau);border:1px solid var(--trait)}
.prose::after{content:"";display:table;clear:both}
.prose h2{font-size:1.6rem;text-transform:uppercase;margin-top:1.6em}
.prose h3{font-size:1.3rem;margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3rem}
.prose a{overflow-wrap:anywhere}
.prose hr{border:0;border-top:1px solid var(--trait);margin-block:2rem}
.planche{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.8rem;
  margin-block:1.5rem;clear:both}
.planche .case{min-width:0;font-size:1rem;line-height:1.55}
.planche .case > :last-child{margin-bottom:0}
.planche .case p{margin:0 0 .6em}
.planche .case img.photo{width:100%;aspect-ratio:16/9;object-fit:cover}
.legende{font:500 .85rem/1.4 var(--mono);color:var(--gris)}

.commentaires{max-width:var(--mesure);display:grid;gap:1rem}
.commentaires h2{font-size:1.5rem;text-transform:uppercase}
.commentaires ol{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--trait)}
.commentaires li{padding-block:1rem;border-bottom:1px solid var(--trait);display:grid;gap:.3rem}
.commentaires .qui{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.commentaires .qui strong{font:600 1.1rem/1 var(--display);letter-spacing:.02em}
.commentaires p{margin:0;overflow-wrap:anywhere}
.commentaires .ferme{color:var(--gris);font-size:.92rem;font-style:italic;margin:0}

.suite{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:var(--mesure)}
@media (max-width:560px){.suite{grid-template-columns:1fr}}
.suite a{display:grid;gap:.35rem;padding:1rem 1.1rem;border:1px solid var(--trait);background:var(--dalle);
  text-decoration:none;color:var(--encre);border-radius:2px}
.suite a:hover{border-color:var(--bleu)}
.suite .apres{text-align:right}
.suite span:last-child{font:600 1.15rem/1.15 var(--display)}

/* ---- Recherche, pages simples ---------------------------------------- */
.champ{display:grid;gap:.4rem;max-width:var(--mesure)}
.champ input{font:400 1.1rem var(--text);padding:.8rem 1rem;border:2px solid var(--encre);background:var(--panneau);
  color:var(--encre);border-radius:2px;width:100%}
#result-count{min-height:1.4em}
.resultats{display:grid;max-width:var(--mesure);border-top:2px solid var(--encre)}
.resultat{padding-block:1rem;border-bottom:1px solid var(--trait);display:grid;gap:.3rem}
.resultat h3{font-size:1.35rem;font-weight:600}
.resultat p{margin:0;color:var(--gris);font-size:.98rem}
.resultat mark{background:var(--bleu-pale);color:var(--encre);padding:0 .1em}
.vide{color:var(--gris);padding-block:1rem;margin:0}
table.registre{border-collapse:collapse;width:100%;max-width:28rem;font-size:1rem}
.registre th,.registre td{text-align:left;padding:.5rem .2rem;border-bottom:1px solid var(--trait)}
.registre td.n,.registre th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.registre tfoot th{border-top:2px solid var(--encre);border-bottom:0}
.introuvable{display:grid;gap:1rem;padding-block:4rem;max-width:var(--mesure)}
.introuvable .code{font:500 1rem var(--mono);color:var(--gris)}

/* ---- Pied de page ----------------------------------------------------- */
.pied{border-top:2px solid var(--encre);margin-inline:-16px;padding-inline:16px}
.pied .cadre{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding-block:1.6rem 2.2rem;
  color:var(--gris);font-size:.92rem}
.pied p{margin:0;max-width:52ch}
.pied nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.pied a{color:var(--gris)}
.pied a:hover{color:var(--encre)}

/* ---- Visionneuse ------------------------------------------------------ */
.visionneuse{position:fixed;inset:0;background:rgba(10,13,14,.92);display:none;align-items:center;justify-content:center;
  padding:2rem 16px;z-index:50}
.visionneuse.on{display:flex}
.visionneuse img{max-height:100%;max-width:100%;object-fit:contain}
.visionneuse button{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px;background:none;border:1px solid #fff;
  color:#fff;font:600 .9rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:.55rem .8rem;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}