@font-face{font-family:"Geist";src:url("geist.woff2") format("woff2");font-weight:100 900}
:root{--nuit:#101D35;--cobalt:#335CF5;--menthe:#1AB89C;--menthe-f:#0F7D69;--creme:#FBF7F1;--gris:#5B6478;--trait:#D9D2C5;--papier:#FFFDF9}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#EFE9DF;color:var(--nuit);font:16px/1.55 "Geist",-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact;print-color-adjust:exact}
sup{font-size:.68em;line-height:0}
[hidden]{display:none!important}

.outils{position:sticky;top:0;z-index:3;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:1080px;margin:0 auto;padding:12px 16px;background:color-mix(in srgb,#EFE9DF 88%,transparent);backdrop-filter:blur(8px)}
.outils .essai{font-size:13px;color:var(--gris);margin-right:auto}
.outils button,.outils .bouton{font:inherit;font-size:14px;font-weight:500;border:1px solid var(--trait);background:var(--papier);color:var(--nuit);border-radius:999px;padding:6px 13px;cursor:pointer;text-decoration:none}
.outils button span{color:var(--gris);margin-left:3px}
.outils button[aria-pressed=true],.outils .imprimer{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.outils button[aria-pressed=true] span{color:#AFC0FF}

.journal{max-width:1080px;margin:0 auto 64px;background:var(--papier);padding:36px 56px 56px;box-shadow:0 1px 0 var(--trait),0 24px 60px -36px rgba(16,29,53,.45)}

/* Titre */
.titre .haut{display:flex;justify-content:space-between;align-items:baseline;border-top:4px solid var(--nuit);padding-top:8px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.titre h1{font-size:clamp(64px,15vw,164px);line-height:.84;letter-spacing:-.06em;font-weight:850;margin:18px 0 18px -6px}
.titre h1 span{color:var(--menthe)}
.titre .ligne{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;border-top:1px solid var(--nuit);border-bottom:1px solid var(--nuit);padding:8px 0;margin:0;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.titre .ligne sup{text-transform:none}
.legende-journal{font-size:13px;color:var(--gris);margin:10px 0 0;max-width:92ch}
.legende-journal i{font-style:normal;color:var(--cobalt);font-weight:600}
.legende-journal b{color:var(--menthe-f);font-weight:600}

/* Article : principal + marge, et un visuel pleine largeur au-dessus */
.fait{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-areas:"large large" "tete tete" "principal marge";column-gap:40px;padding:34px 0 38px;border-top:1px solid var(--nuit)}
.fait>.photo.pleine{grid-area:large}
.fait>.tete{grid-area:tete}
.fait>.principal{grid-area:principal;min-width:0}
.fait>.marge{grid-area:marge}
.sur{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cobalt);margin:0 0 10px}
.fait h2{font-size:clamp(28px,4vw,40px);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin:0 0 18px;text-wrap:balance;max-width:22ch}
.chapo{font-size:19px;line-height:1.48;font-weight:550;margin:0 0 14px;text-wrap:pretty}
.corps{columns:2;column-gap:28px;column-rule:1px solid var(--trait)}
.corps p{margin:0 0 10px;hyphens:auto;break-inside:avoid-column}

/* La une */
.fait.une{border-top:0;padding-top:22px;grid-template-areas:"large large" "principal marge"}
.une .photo.pleine{margin-bottom:0}
.une .tete{position:relative;z-index:1;margin:-118px 0 0;background:var(--papier);padding:22px 30px 0 0}
.une .photo.pleine figcaption{margin-left:auto;max-width:23%;text-align:right}
.une .photo.pleine figcaption::before{display:none}
.photo.pleine .cadre{aspect-ratio:auto!important;height:min(620px,58vw)}
.une .photo.pleine .cadre{height:min(500px,46vw)}
.une .sur{color:var(--menthe-f)}
.une h2{font-size:clamp(34px,5vw,54px);line-height:.98;letter-spacing:-.045em;max-width:18ch;margin-bottom:22px}
.une .chapo{font-size:21px}
.une .chapo::first-letter{float:left;font-size:4.3em;line-height:.8;font-weight:850;margin:.06em .08em 0 0;color:var(--nuit);letter-spacing:-.04em}

/* Photos */
.photo{margin:0 0 20px}
.photo .cadre{position:relative;width:100%;overflow:hidden;background:var(--nuit)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo .credit{position:absolute;right:6px;bottom:8px;margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9.5px;letter-spacing:.03em;color:rgba(251,247,241,.82)}
.photo figcaption{font-size:13px;color:var(--gris);margin:8px 0 0;max-width:80ch}
.photo figcaption::before{content:"";display:inline-block;width:18px;height:2px;background:var(--cobalt);vertical-align:middle;margin-right:8px}
.photo.annotee img{object-position:top}
.annotations{position:absolute;inset:0;width:100%;height:100%;font-family:"Geist",sans-serif}
.an-cercle{fill:none;stroke:var(--menthe);stroke-width:5}
.an-trait{stroke:var(--menthe);stroke-width:2.5}
.an-titre{fill:var(--menthe);font-size:30px;font-weight:800;letter-spacing:-.01em;paint-order:stroke;stroke:var(--nuit);stroke-width:6px}
.an-lieu{fill:var(--creme);font-size:20px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.92;paint-order:stroke;stroke:rgba(16,29,53,.55);stroke-width:4px}

/* Photo + chiffre clé (budget) */
.fait.photo>.principal>.photo{display:grid;grid-template-columns:minmax(0,1fr) 230px;column-gap:0}
.fait.photo>.principal>.photo .cadre{grid-column:1}
.fait.photo>.principal>.photo figcaption{grid-column:1/-1}
.chiffre-cle{grid-column:2;grid-row:1;background:var(--nuit);color:var(--creme);padding:22px 20px;display:flex;flex-direction:column;justify-content:flex-end}
.chiffre-cle .valeur{font-size:50px;line-height:.95;font-weight:850;letter-spacing:-.045em;color:var(--menthe);margin:0 0 12px}
.chiffre-cle p{margin:0;font-size:14px;line-height:1.4}

/* Pièce d'un euro (coût de la vie) */
.avec-cote{display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:30px;align-items:start}
.cote-tete{display:contents}
.avec-cote .piece{grid-column:1;grid-row:1/span 2}
.avec-cote .chapo{grid-column:2;grid-row:1}
.avec-cote>.corps{grid-column:2;grid-row:2}
.avec-cote .corps{columns:1}
.piece{margin:4px 0 0}
.piece svg{width:100%;height:auto;display:block}
.p-bord{fill:none;stroke:var(--nuit);stroke-width:3}
.p-fond{fill:var(--cobalt)}
.p-part{fill:var(--menthe)}
.p-euro{fill:var(--creme);font:850 46px "Geist",sans-serif;letter-spacing:-.04em}
.p-label{fill:var(--nuit);font:800 17px "Geist",sans-serif}
.piece figcaption{font-size:13px;line-height:1.45;color:var(--gris);margin:10px 0 0}

/* Graphique */
.graphique{margin:18px 0 6px;padding:16px 0 0;border-top:3px solid var(--nuit)}
.g-titre{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.graphique svg{width:100%;height:auto;display:block;font:14px "Geist",sans-serif;font-variant-numeric:tabular-nums}
.graphique rect.pos{fill:var(--nuit)} .graphique rect.vu{fill:var(--menthe)} .graphique rect.neg{fill:var(--cobalt)}
.graphique text.nom{fill:var(--nuit)} .graphique text.vu{font-weight:700;fill:var(--menthe-f)}
.graphique text.val{font-weight:700;fill:var(--nuit)} .graphique text.val.neg{fill:var(--cobalt)}
.graphique .axe{stroke:var(--nuit);stroke-width:1.2}
.g-note{font-size:12px;color:var(--gris);margin:8px 0 0}

/* À écrire, attention */
.copie{margin:22px 0 14px;padding:16px 0 16px 22px;border-left:5px solid var(--menthe);background:linear-gradient(90deg,#EAF8F4,rgba(234,248,244,0))}
.copie p{margin:0;font-size:20px;line-height:1.38;font-weight:650;letter-spacing:-.012em;text-wrap:pretty}
.copie .etiquette{color:var(--menthe-f);margin-bottom:8px}
.etiquette{font-size:11px!important;font-weight:800!important;letter-spacing:.1em;text-transform:uppercase;line-height:1.3!important}
.piege{font-size:14.5px;color:#2C3850;margin:0;max-width:78ch}
.piege b{color:var(--nuit)}

/* Marge */
.marge{border-left:2px solid var(--cobalt);padding:2px 0 0 15px;color:var(--cobalt);font-size:13px;line-height:1.42;align-self:start}
.marge .etiquette{margin:16px 0 6px}
.marge .etiquette:first-child{margin-top:0}
.marge ul{list-style:none;margin:0;padding:0}
.marge li{margin:0 0 7px}
.marge .sujets li{color:var(--nuit)}
.marge .sujets span{display:block;color:var(--cobalt);font-size:12px}
.marge .preuves{font-size:12px;margin:14px 0 0;color:var(--gris)}
.relire{font-size:12.5px;color:#6B4E00;background:#FFF1C9;padding:8px 10px;margin:12px 0 0}

/* Sommaire de une */
.sommaire{padding:14px 0 16px;border-bottom:1px solid var(--nuit)}
.sommaire ol{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.sommaire li{border-left:1px solid var(--trait);padding:0 16px}
.sommaire li:first-child{border-left:0;padding-left:0}
.sommaire a{color:inherit;text-decoration:none;display:block}
.sommaire .num{display:block;font-size:30px;font-weight:850;letter-spacing:-.05em;line-height:1;color:var(--menthe)}
.sommaire .rub{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);margin:8px 0 4px}
.sommaire .tit{display:block;font-size:14px;font-weight:700;line-height:1.25;letter-spacing:-.01em}

/* Ouverture de rubrique */
.rubrique{display:flex;justify-content:space-between;align-items:flex-end;margin:46px 0 0;padding:20px 24px 16px;background:var(--nuit);color:var(--creme)}
.rubrique .nom{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.rubrique .sigle{font-size:64px;line-height:.8;font-weight:850;letter-spacing:-.06em;color:var(--menthe)}
.rubrique+.fait{border-top:0}

/* Notes */
.notes{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;margin-top:30px;border-top:4px solid var(--nuit);padding-top:12px;font-size:12px;color:var(--gris)}
.notes h3{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--nuit);margin:0 0 8px}
.notes ol,.notes ul{list-style:none;margin:0 0 10px;padding:0}
.notes li{margin:0 0 6px}
.notes .url{word-break:break-all}
.notes p{margin:0}

@media (max-width:760px){
  .journal{padding:22px 16px 32px;box-shadow:none}
  .fait,.fait.une{grid-template-columns:1fr;grid-template-areas:"large" "tete" "principal" "marge"}
  .fait.une .tete{margin-top:0;max-width:none;padding:14px 0 0}
  .une .photo.pleine figcaption{max-width:none;text-align:left;margin-left:0}
  .avec-cote .piece,.avec-cote .chapo,.avec-cote>.corps{grid-column:1;grid-row:auto}
  .marge{margin-top:18px}
  .corps{columns:1}
  .avec-cote{grid-template-columns:1fr}
  .piece{max-width:220px;margin-bottom:18px}
  .fait.photo>.principal>.photo{grid-template-columns:1fr}
  .chiffre-cle{grid-column:1;grid-row:auto}
  .sommaire ol{grid-template-columns:1fr 1fr;row-gap:18px}
  .sommaire li:nth-child(3){border-left:0;padding-left:0}
  .notes{grid-template-columns:1fr}
  .rubrique .sigle{font-size:44px}
  .an-titre{font-size:36px} .an-lieu{font-size:24px;letter-spacing:.08em}
  .outils .essai{flex-basis:100%}
}

@page{size:A4;margin:13mm 13mm 15mm}
@media print{
  body{background:#fff;font-size:9.6pt;line-height:1.45}
  .outils{display:none}
  .journal{max-width:none;margin:0;padding:0;box-shadow:none;background:#fff}
  .titre h1{font-size:92pt;margin:8pt 0 10pt -3pt}
  .legende-journal{font-size:8.5pt}
  /* À l'impression, la marge flotte à droite : Chrome découpe mal les grilles. */
  .fait,.fait.une{display:block;padding:14pt 0 16pt;clear:both}
  .fait>.marge{float:right;width:44mm;margin:0 0 6pt 7mm;font-size:8pt}
  .fait>.principal{margin-right:51mm}
  .fait>.tete{margin-right:51mm}
  .fait>.photo.pleine{margin-bottom:12pt}
  .une .tete{margin:-60pt 0 0;padding:12pt 16pt 0 0;max-width:66%!important}
  .photo.pleine .cadre{height:96mm}
  .une .photo.pleine .cadre{height:74mm}
  .une .tete{background:#fff}
  .une .chapo{break-inside:avoid}
  .une h2{font-size:34pt}
  .fait h2{font-size:22pt}
  .chapo{font-size:11pt} .une .chapo{font-size:12pt}
  .copie p{font-size:11.5pt}
  .piege{font-size:9pt}
  .sommaire .num{font-size:17pt} .sommaire .tit{font-size:8.6pt} .sommaire .rub{font-size:6.6pt}
  .sommaire{padding:7pt 0 9pt}
  .rubrique{break-after:avoid;margin-top:18pt}
  .rubrique .sigle{font-size:40pt}
  .chiffre-cle .valeur{font-size:23pt}
  .chiffre-cle{padding:10pt 9pt}
  .chiffre-cle p{font-size:8.5pt}
  .avec-cote{display:block}
  .cote-tete{display:flow-root;break-inside:avoid}
  .avec-cote .piece{float:left;width:42mm;margin:0 6mm 4pt 0}
  .avec-cote::after{content:"";display:block;clear:left}
  .tete{break-after:avoid}
  .fait.photo>.principal>.photo{display:flex;flex-wrap:wrap}
  .fait.photo>.principal>.photo .cadre{flex:1 1 0;min-width:0}
  .fait.photo>.principal>.photo .chiffre-cle{flex:0 0 42mm}
  .fait.photo>.principal>.photo figcaption{flex:1 0 100%}
  .tete,.copie,.photo,.piece,.graphique,.piege,.sommaire,.chiffre-cle{break-inside:avoid}
  .marge .etiquette{break-after:avoid}
  .marge li{break-inside:avoid}
  .an-titre{font-size:32px}
  .notes{clear:both;font-size:7.5pt;break-inside:avoid}
  a{color:inherit;text-decoration:none}
}
.outils .retour{color:inherit;text-decoration:none;font-weight:700;margin-right:auto}.mention-photos{max-width:760px;margin:0 auto 48px;padding:0 20px;font-size:13px;color:#676e80}h1.point-menthe::after{content:'.';color:var(--menthe,#1ab89c)}