:root{
  --sans:-apple-system,"system-ui","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  --paper:#fff;--ink:#212121;--heading:#262626;--muted:#6b6b6b;--line:#e5e5e5;--soft:#f6f6f7;
  --panel:#f7f9fa;--panel-line:#e5eaed;             --accent:#b9520e;--orange:#ce6318;--blue:#2a5c8e;--navy:#163040;
  --bouton-filet:#d4d4d8;--bouton-survol:#f4f4f5;
  --g:24px;--large:min(1200px,calc(100% - 2*var(--g)));--text:min(704px,calc(100% - 2*var(--g)));--barre:64px;
  color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barre) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:16.96px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#b5b5b5;text-underline-offset:3px}
a:hover{color:var(--accent);text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
img{max-width:100%}
p{margin:0 0 1em}
.trame{display:block;image-rendering:auto;background:var(--panel)}
.encre{display:block;image-rendering:auto}
.kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.small-label{font-size:11.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.meta-label{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.legende{font-size:13px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.legende .oeuvre{color:var(--heading)}
.rubrique{font:600 36px/1.25 var(--sans);letter-spacing:-.018em;color:var(--heading);margin:0 0 30px;padding-bottom:16px;border-bottom:1px solid var(--line);text-wrap:balance}
.standfirst{font:300 19.2px/1.55 var(--sans);color:var(--heading);margin:0}
.suite{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.suite:hover{text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--bouton-filet);border-radius:6px;
  background:var(--paper);color:var(--heading);font:500 14px/1.4 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
.bouton:hover{background:var(--bouton-survol);border-color:#b4b4bb;color:var(--heading)}
.bouton-sombre{background:var(--heading);border-color:var(--heading);color:#fff}
.bouton-sombre:hover{background:#000;border-color:#000;color:#fff}
.bouton-petit{min-height:32px;padding:5px 12px;font-size:13px}
.puce{display:inline-flex;align-items:center;min-height:26px;padding:2px 11px;border:1px solid #f0c3a2;border-radius:999px;background:#fff8f2;color:var(--accent);font-size:12.5px;font-weight:600;line-height:1.45;white-space:nowrap}
.puce-grise{border-color:var(--line);background:var(--paper);color:var(--muted)}

.barre{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;height:var(--barre);padding:0 var(--g);background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.barre-inner{width:var(--large);height:100%;margin:0 auto;display:flex;align-items:center;gap:26px}
.marque{display:inline-flex;align-items:center;gap:9px;color:var(--heading);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.marque:hover{color:var(--accent)}
.marque svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none}
.marque .leger{font-weight:400;color:var(--muted)}
.liens{display:flex;gap:26px;margin:0 0 0 auto;padding:0;list-style:none;font-size:13px}
.liens a{color:var(--muted);text-decoration:none}
.liens a:hover{color:var(--accent)}

.scene{position:relative;display:grid;place-items:center;min-height:min(calc(100vh - var(--barre)),900px);padding:56px var(--g) 64px;
  background:var(--paper) url(images/fond-scene.png?v=50ffc762) center/cover no-repeat}
.carte{width:min(1080px,100%);display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);gap:clamp(24px,4vw,56px);padding:10px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 60px rgba(22,48,64,.16),0 2px 6px rgba(22,48,64,.06)}
.carte-image{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:50% 30%;border-radius:8px;border:1px solid var(--panel-line);aspect-ratio:3/4}
.carte-texte{display:flex;flex-direction:column;min-width:0;padding:30px 38px 26px 0}
.sur-titre{font:300 clamp(22px,2.2vw,28px)/1.2 var(--sans);color:var(--heading);margin:auto 0 6px;padding-top:36px}
h1{font:700 clamp(38px,4.2vw,50px)/1.1 var(--sans);letter-spacing:-.022em;color:var(--heading);margin:0 0 28px;text-wrap:balance}
h1 .leger{display:block;font-weight:300;letter-spacing:-.012em}
.champs{display:grid;gap:10px;max-width:540px}
.champ{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:50px;padding:0 16px;border:1px solid var(--bouton-filet);border-radius:6px;
  background:var(--paper);color:var(--heading);text-decoration:none;font-size:15px;font-weight:500;transition:background-color .15s,border-color .15s}
.champ .quoi{color:var(--muted);font-weight:400}
.champ .fleche{color:var(--accent)}
.champ:hover{background:var(--bouton-survol);border-color:#b4b4bb;color:var(--heading)}
.invite{margin:16px 0 0 1px;color:var(--muted);font-size:14.5px}
.invite .suite{margin-left:8px}
.signature{display:flex;align-items:center;gap:20px;margin-top:auto;padding-top:26px;border-top:1px solid var(--line);margin-top:40px}
.signature .nom{display:inline-flex;align-items:center;gap:10px;font:600 30px/1 var(--sans);letter-spacing:-.015em;color:var(--heading)}
.signature .nom svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.6;fill:none}
.signature .filet-v{width:1px;align-self:stretch;background:var(--line)}
.signature .devise{font-size:14.5px;line-height:1.4;color:var(--muted)}
.scene .legende{position:absolute;right:var(--g);bottom:16px;margin:0;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.75)}
@media(prefers-reduced-motion:no-preference){
  .carte-image{animation:apparait 1.2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes apparait{from{opacity:0;clip-path:inset(0 0 100% 0 round 8px)}to{opacity:1;clip-path:inset(0 0 0 0 round 8px)}}}

.manifeste{width:var(--text);margin:0 auto;padding:96px 0 0}
.manifeste p{max-width:38em}
.manifeste .actions{margin-top:22px}

.chapitre{width:var(--large);margin:110px auto 0}
.chapitre-panneau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);min-height:520px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--orange);border-radius:8px;overflow:hidden}
.chapitre-texte{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,4vw,56px)}
.chapitre .small-label{margin:18px 0 10px}
.chapitre h2{font:600 clamp(32px,3.6vw,44px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--heading);margin:0 0 10px;text-wrap:balance}
.chapitre .sous{font:300 19.2px/1.55 var(--sans);color:var(--heading);margin:0 0 30px;max-width:26em}
.chapitre-image{position:relative;min-height:360px;background:var(--panel);border-left:1px solid var(--panel-line)}
.chapitre-image .trame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.chapitre .legende{text-align:right}

.niveaux{width:var(--large);margin:0 auto;padding:110px 0 0}
.grille-niveaux{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.carte-niveau{border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.carte-niveau>a,.carte-niveau>div{display:flex;flex-direction:column;height:100%;padding:10px 18px 22px 10px;text-decoration:none;color:inherit}
.carte-niveau .trame{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--panel-line)}
.carte-niveau h3{font:700 22px/1.25 var(--sans);letter-spacing:-.01em;color:var(--heading);margin:20px 0 4px 8px}
.carte-niveau .compte{font-size:13.5px;color:var(--muted);margin:0 0 0 8px}
.carte-niveau .texte{font-size:15px;line-height:1.5;color:var(--muted);margin:12px 0 0 8px}
.carte-niveau .suite{margin:16px 0 0 8px}
.carte-niveau>a:hover h3{color:var(--accent)}
.carte-niveau.a-venir .trame{opacity:.5}
.carte-niveau.a-venir h3{color:var(--muted);font-weight:500}

.verset{width:var(--large);margin:110px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:40px clamp(40px,6vw,88px);align-items:center}
.verset blockquote{margin:0}
.verset blockquote p{font:300 clamp(26px,3vw,40px)/1.3 var(--sans);letter-spacing:-.01em;color:var(--heading);margin:0 0 20px;text-wrap:balance}
.verset cite{font-style:normal}
.verset-image{background:var(--panel);border:1px solid var(--panel-line);border-radius:8px;overflow:hidden;aspect-ratio:5/6}
.verset-image .trame{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.verset figure{margin:0}

.methode{width:var(--large);margin:110px auto 0;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px clamp(40px,7vw,96px);align-items:start}
.methode figure{margin:0;position:sticky;top:calc(var(--barre) + 24px)}
.panneau{background:var(--panel);border:1px solid var(--panel-line);border-radius:8px;overflow:hidden;line-height:0}
.panneau .encre{width:100%;height:auto}
.etapes{list-style:none;margin:0;padding:0}
.etapes li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 14px;padding:22px 0;border-bottom:1px solid var(--line)}
.etapes .num{font-size:12px;line-height:2.3;color:var(--muted);font-variant-numeric:tabular-nums}
.etapes h3{font:700 20px/1.4 var(--sans);letter-spacing:-.01em;color:var(--heading);margin:0 0 6px}
.etapes p{grid-column:2;margin:0;font-size:16px}

.suite-annee{width:var(--large);margin:110px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:36px;
  padding:clamp(32px,5vw,64px);border-radius:8px;background:var(--panel);border:1px solid var(--panel-line);overflow:hidden}
.suite-annee h2{font:600 clamp(26px,3vw,36px)/1.2 var(--sans);letter-spacing:-.018em;color:var(--heading);margin:0 0 14px;text-wrap:balance}
.suite-annee p{max-width:28em;margin:0 0 28px}
.cercles{display:flex;align-items:center;justify-content:flex-end}
.cercles .trame{height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;border:1px solid var(--line);flex:none;background:var(--paper)}
.cercles .c1{width:clamp(110px,13vw,180px)}
.cercles .c2{width:clamp(140px,17vw,230px);margin-left:-34px}
.cercles .c3{width:clamp(170px,21vw,280px);margin-left:-40px;margin-right:calc(-1*clamp(32px,5vw,64px) - 40px)}

.pied{position:relative;margin-top:120px;padding:40px var(--g) 0;border-top:1px solid var(--line);font-size:14.5px}
.pied-haut{width:var(--large);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px 64px}
.pied .marque{font-size:20px;gap:11px}
.pied .marque svg{width:28px;height:28px}
.pied .devise{color:var(--muted);margin:14px 0 0;line-height:1.5}
.colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.colonnes h2{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:6px 0 16px}
.colonnes ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.colonnes a{text-decoration:none;color:var(--heading)}
.colonnes a:hover{color:var(--accent);text-decoration:underline}
.colonnes .inactif{color:var(--muted)}
.pied-bas{width:var(--large);margin:44px auto 0;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:12.8px;color:var(--muted)}
.panorama{margin:-20px calc(-1*var(--g)) 0;line-height:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%);mask-image:linear-gradient(180deg,transparent 0,#000 42%)}
.panorama img{display:block;width:100%;height:clamp(240px,36vw,540px);object-fit:cover;object-position:50% 72%}

.niveau-hero{width:var(--large);margin:0 auto;padding:52px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px clamp(40px,7vw,96px);align-items:center}
.fil{font-size:13px;color:var(--muted);margin:0 0 36px}
.fil a{text-decoration:none}.fil a:hover{text-decoration:underline}
.fil span{color:var(--heading)}
.niveau-hero h1{margin-bottom:20px}
.niveau-hero .standfirst{max-width:32em}
.niveau-hero figure{margin:0}
.chapitres-colonne{width:var(--large);margin:0 auto}
.chapitres-colonne>*{max-width:800px}
.chapitres-colonne .liste{border-top:0}
.liste{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.liste li{display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.liste .code{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}
.liste .titre{font-weight:600;color:var(--heading)}
.liste .titre a{text-decoration:none}.liste .titre a:hover{color:var(--accent);text-decoration:underline}
.liste .sous{display:block;font-size:14.5px;color:var(--muted);font-weight:400;line-height:1.5}
.liste .etat{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.liste .etat a{color:var(--accent);text-decoration:none;margin-left:10px}.liste .etat a:hover{text-decoration:underline}
.liste li.a-venir .titre,.liste li.a-venir .code{color:var(--muted);font-weight:500}
.liste li.a-venir .sous{color:#9a9a9f}

@media(min-width:1000px){:root{--text:min(800px,calc(100% - 2*var(--g)))}body{font-size:18px}.legende{font-size:14px}.liste .sous{font-size:15px}}
@media(max-width:1099px){.rubrique{font-size:24px;margin-bottom:24px;padding-bottom:12px}}
@media(max-width:1000px){.grille-niveaux{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .carte,.chapitre-panneau,.verset,.methode,.suite-annee,.pied-haut,.niveau-hero{grid-template-columns:minmax(0,1fr)}
  .carte-image{min-height:0;aspect-ratio:4/5;max-height:440px}
  .carte-texte{padding:8px 12px 14px}
  .sur-titre{padding-top:22px}
  .signature{margin-top:30px;padding-top:20px}
  .scene{padding-bottom:52px}
  .scene .legende{position:static;margin:20px auto 0;text-align:center;max-width:36em}
  .chapitre-image{order:-1;height:min(100vw,480px);border-left:0;border-bottom:1px solid var(--panel-line)}
  .verset figure{order:-1}
  .verset-image{aspect-ratio:4/3;max-height:480px}
  .methode figure{position:static;max-width:440px}
  .cercles{justify-content:flex-start}
  .cercles .c3{margin-right:0}
  .niveau-hero{padding-top:36px}
  .niveau-hero figure{max-width:420px}}
@media(max-width:767px){
  body{font-size:15px;line-height:1.6}
  h1{font-size:34px}.standfirst,.chapitre .sous{font-size:16.8px}
  .liste li{grid-template-columns:3.4em minmax(0,1fr);row-gap:2px}.liste .etat{grid-column:2}
  .liens{display:none}
  .barre-inner .bouton{margin-left:auto}}
@media(max-width:560px){
  :root{--g:16px}
  .barre-inner{gap:12px}
  .marque .leger{display:none}
  .carte{padding:8px}
  .grille-niveaux{grid-template-columns:minmax(0,1fr)}
  .carte-niveau .trame{max-width:280px}
  .signature{gap:14px}.signature .nom{font-size:26px}
  .colonnes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .manifeste{padding-top:64px}
  .chapitre,.niveaux,.verset,.methode,.suite-annee{margin-top:72px}.niveaux{padding-top:72px}
  .pied{margin-top:80px}}