/* robin-belloncle.fr, feuille commune. Version : voir VERSION.md et le pied de page. */
:root{
  --papier:#f3f1ec;--nuit:#0a1626;--bleu:#1b3556;--acier:#485966;--ecume:#dfe5ea;--brume:#a9bacb;--orange:#fe6910;--orange-sombre:#a8380a;--trait:#c9d1d8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--nuit);font-family:'Barlow',system-ui,sans-serif;font-size:18px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
a:hover{text-decoration-color:var(--orange)}
a:focus-visible,button:focus-visible,svg:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
img{max-width:100%}
.cond{font-family:'Barlow Condensed',sans-serif}
.serif{font-family:'Instrument Serif',serif;font-style:italic}
.marge{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px;position:relative}
@media (max-width:480px){.marge{padding-left:16px;padding-right:16px}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* En-tête et pied communs */
.entete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;padding-top:28px;padding-bottom:28px}
.entete .nom{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;text-decoration:none}
.entete nav{display:flex;flex-wrap:wrap;gap:4px 28px;font-weight:500}
.entete nav a{padding:10px 0;text-decoration:none}
.entete nav a[aria-current]{border-bottom:2px solid var(--orange)}
.pied{position:relative;background:var(--nuit);color:var(--papier);padding:100px 0 40px}
.pied .liens-pied{display:flex;flex-wrap:wrap;gap:8px 32px;font-size:19px;font-weight:600}
.pied .liens-pied a{padding:10px 0}
.pied .version{margin:48px 0 0;font-size:14px;color:var(--brume)}

/* Liens, textures, images */
.lien{display:inline-flex;align-items:center;min-height:44px;font-weight:600;border-bottom:2px solid var(--orange);text-decoration:none}
.lien.second{border-bottom-color:var(--acier)}
.liens{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0 0}
.texture{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.duotone{background:var(--bleu);position:relative;overflow:hidden}
.duotone img{display:block;width:100%;height:100%;object-fit:cover;filter:url(#duo)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:0.22;mix-blend-mode:soft-light;width:100%;height:100%}
.etiq{position:absolute;font-weight:600;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;padding:4px 8px}
.legende{margin:10px 0 0;font-size:13px;color:var(--brume);font-weight:600;letter-spacing:0.1em;text-transform:uppercase}
.surtitre{margin:0 0 12px;font-weight:600;font-size:14px;letter-spacing:0.12em;text-transform:uppercase;color:var(--acier)}
.surtitre a{text-decoration:none;color:inherit}

/* Bandes obliques et chapitres de l'accueil */
.bande{position:relative;clip-path:polygon(0 0,100% 5vw,100% 100%,0 calc(100% - 5vw))}
.bande.inverse{clip-path:polygon(0 5vw,100% 0,100% calc(100% - 5vw),0 100%)}
.chapitre{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:start}
.visuel{grid-column:1/8;position:relative;z-index:1}
.visuel.droite{grid-column:6/13}
.panneau{grid-column:7/13;position:relative;z-index:2;margin-top:140px;padding:32px 36px;overflow:hidden}
.panneau.droite{grid-column:1/7;margin-top:160px}
.panneau.sombre{background:var(--bleu);color:var(--papier);box-shadow:6px 6px 0 var(--orange)}
.panneau.clair{background:var(--papier);color:var(--nuit);box-shadow:6px 6px 0 var(--orange)}
.panneau > *{position:relative}
.panneau > .texture{position:absolute}
.chapitre h2,.titre{margin:0 0 12px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(44px,5.2vw,76px);line-height:0.92}
.chapitre h2 a{text-decoration:none}
.chapitre h2 a:hover{text-decoration:underline;text-decoration-color:var(--orange)}
.plan line,.plan path,.plan rect,.plan circle{vector-effect:non-scaling-stroke}
.plan text{font-family:'Barlow',sans-serif;font-weight:600;font-size:11px;letter-spacing:0.1em;text-transform:uppercase}
.fil{position:absolute;left:calc(max(0px, 50% - 640px) + 31px);top:0;bottom:0;width:3px;background:var(--orange);z-index:4;pointer-events:none}
.puce{position:absolute;left:-3px;top:4px;width:44px;height:44px;margin-left:-19px;background:var(--orange);color:var(--nuit);border:3px solid var(--papier);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;z-index:5}
.carte{position:absolute;box-shadow:5px 5px 0 var(--nuit);overflow:hidden}
.cadre{position:relative;background:var(--nuit);padding:16px;box-shadow:5px 5px 0 var(--nuit)}
.cadre.orange{box-shadow:5px 5px 0 var(--orange)}
.cadre img{display:block;width:100%;height:auto}
.frise > div{display:flex;flex-wrap:wrap;gap:4px 24px;padding:18px 0;border-top:1px solid var(--trait)}
.frise .quand{flex:0 0 110px;font-weight:600;color:var(--acier)}
.frise .quoi{flex:1 1 240px}
.frise .quoi p{margin:4px 0 0;color:var(--acier);font-size:16px}

/* Pages projet */
.hero-projet h1{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(56px,8vw,112px);line-height:0.92}
.hero-projet .accroche{margin:20px 0 0;font-size:21px;max-width:760px}
h2.cond{margin:0 0 16px;font-weight:700;font-size:clamp(32px,3.6vw,44px);line-height:1}
.deux-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:48px 64px}
.brique{border-top:2px solid var(--brume);padding-top:16px}
.brique h3{margin:0 0 8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;line-height:1}
.brique p{margin:0}
.brique .stack{margin-top:10px;color:var(--brume);font-size:15px}
.section-sombre{position:relative;background:var(--nuit);color:var(--papier)}
.section-bleue{position:relative;background:var(--bleu);color:var(--papier)}
.section-ecume{position:relative;background:var(--ecume)}
.section-sombre a,.section-bleue a{color:var(--papier)}
.section-sombre .brique .stack,.section-bleue .brique .stack{color:var(--brume)}
table.donnees{border-collapse:collapse;width:100%;max-width:560px;font-size:16px}
table.donnees th{text-align:left;font-weight:600;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--acier);padding:0 16px 8px 0;border-bottom:2px solid var(--nuit)}
table.donnees td{padding:10px 16px 10px 0;border-bottom:1px solid var(--trait);vertical-align:top}
table.donnees td.n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;white-space:nowrap}
.section-sombre table.donnees th,.section-bleue table.donnees th{color:var(--brume);border-bottom-color:var(--papier)}
.section-sombre table.donnees td,.section-bleue table.donnees td{border-bottom-color:var(--acier)}
.chiffre .intitule{font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--acier)}
.chiffre .valeur{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:28px}
.bouton{font:inherit;font-weight:600;min-height:44px;padding:8px 16px;border:2px solid var(--nuit);background:var(--papier);color:var(--nuit);cursor:pointer}
.bouton.on,.bouton[aria-pressed="true"]{background:var(--nuit);color:var(--papier)}
.section-sombre .bouton,.section-bleue .bouton{border-color:var(--papier);background:transparent;color:var(--papier)}
.section-sombre .bouton.on,.section-bleue .bouton.on,.section-sombre .bouton[aria-pressed="true"],.section-bleue .bouton[aria-pressed="true"]{background:var(--papier);color:var(--nuit)}
figcaption{margin-top:12px;font-size:16px;color:var(--acier)}
.section-sombre figcaption,.section-bleue figcaption{color:var(--brume)}

@media (max-width:900px){
  .chapitre{display:block}
  .panneau,.panneau.droite{margin:-32px 16px 0}
  .fil{display:none}
  .puce{position:static;margin:0 0 12px;display:inline-flex}
  .carte{position:static;transform:none !important;width:auto !important;margin-top:-28px}
  .carte:first-child{margin-top:0}
  .bande,.bande.inverse{clip-path:polygon(0 0,100% 3vw,100% 100%,0 calc(100% - 3vw))}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}