/* Outrenoir, site web.
   Jetons repris de la charte graphique v1.0 (outrenoir-charte/kit/tokens.css). Système strictement achromatique. */
@font-face{font-family:"IBM Plex Mono";src:url(polices/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(polices/plex-mono-500.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(polices/plex-mono-400i.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(polices/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --color-ink:#000;--color-paper:#fff;--color-graphite:#595959;--color-studio:#d4d4d4;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-display:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --text-caption:12px;--text-body:14px;--text-title:48px;
  --hairline:1px solid var(--color-ink);
  --radius-buttons:4px;--radius-pill:14.4px;
  --gutter:20px;--section-gap:32px;
  color-scheme:light;
}
/* Mode sombre : simple inversion encre / papier (le graphite s'éclaircit pour rester lisible) */
:root[data-theme="dark"]{--color-ink:#fff;--color-paper:#000;--color-graphite:#a6a6a6;--color-studio:#262626;color-scheme:dark}
@media (max-width:700px){:root{--gutter:16px;--text-title:34px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-mono);font-size:var(--text-body);line-height:1.3;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0 0 10px;max-width:68ch}
b,strong{font-weight:500}
:focus-visible{outline:1px solid var(--color-ink);outline-offset:2px}
::selection{background:var(--color-ink);color:var(--color-paper)}

/* ---------------------------------------------------------------- bandeau de travail */
.travail{display:flex;justify-content:space-between;gap:16px;padding:0 var(--gutter);font-size:var(--text-caption);line-height:2.5;color:var(--color-graphite);border-bottom:var(--hairline)}
.travail span:last-child{text-align:right}
@media (max-width:700px){.travail{line-height:1.5;padding-top:5px;padding-bottom:5px}.travail span:last-child{display:none}}

/* ---------------------------------------------------------------- navigation */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:flex-start;gap:28px;padding:14px var(--gutter) 12px;background:var(--color-paper);border-bottom:var(--hairline);line-height:1.15}
.nav .marque{font-weight:500;margin-right:20px;padding:2px 0}
.nav .item{padding:2px 10px;margin:-2px 0;border:1px solid transparent;border-radius:var(--radius-pill)}
.nav .item small{display:block;font-size:var(--text-caption);color:var(--color-graphite)}
.nav .item:hover,.nav .item[aria-current="page"]{border-color:var(--color-ink)}
.nav .droite{margin-left:auto;display:flex;gap:16px;align-items:flex-start}
.nav .langue b{font-weight:400}
.nav .langue a{color:var(--color-graphite)}
.nav .langue a:hover{color:var(--color-ink);text-decoration:underline;text-underline-offset:3px}
.nav .langue{padding:2px 0}
.bouton-theme{font:inherit;color:inherit;background:none;border:1px solid var(--color-ink);border-radius:var(--radius-pill);padding:1px 10px;cursor:pointer}
.bouton-theme:hover{background:var(--color-ink);color:var(--color-paper)}
@media (max-width:700px){
  .nav{gap:10px;flex-wrap:wrap}
  .nav .marque{width:100%;margin:0;display:flex;justify-content:space-between}
  .nav .item{padding:2px 8px}
  .nav .item small{display:none}
  .nav .droite{gap:8px;position:absolute;top:12px;right:var(--gutter)}
}

/* ---------------------------------------------------------------- logotype et titres */
.mot{font-family:var(--font-display);font-weight:900;letter-spacing:-.045em;line-height:.86;white-space:nowrap;margin:0}
.enseigne{font-size:clamp(56px,21.2vw,330px);padding:.06em var(--gutter) .02em calc(var(--gutter) - .04em)}
.titre-page{font-size:clamp(52px,15vw,220px);padding:24px var(--gutter) .16em calc(var(--gutter) - .04em);overflow-wrap:anywhere;white-space:normal}
.titre-page .filet{display:inline-block;width:.42em;border-top:.08em solid currentColor;vertical-align:.28em;margin:0 .12em}
h1,h2,h3{font-family:var(--font-display);margin:0}
h2{font-size:var(--text-title);font-weight:850;line-height:1;letter-spacing:-.025em;margin-bottom:20px}
h3{font-size:17px;font-weight:750;line-height:1.15;letter-spacing:-.005em;margin:0 0 8px}
.surtitre{display:block;font-family:var(--font-mono);font-size:var(--text-body);font-weight:400;margin-bottom:14px}
.surtitre::before{content:"";display:inline-block;width:20px;border-top:var(--hairline);vertical-align:.3em;margin-right:8px}
.chapo{font-family:var(--font-display);font-size:clamp(19px,2vw,24px);line-height:1.2;font-weight:600;letter-spacing:-.01em;max-width:34ch}
.petit,.legende{font-size:var(--text-caption);color:var(--color-graphite)}
.legende{margin-top:6px}

/* ligne de trois mentions sous l'enseigne */
.ligne{display:flex;justify-content:space-between;gap:16px;padding:10px var(--gutter) 14px}
.ligne>*:nth-child(2){text-align:center}.ligne>*:last-child{text-align:right}
.ligne a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){.ligne{flex-wrap:wrap}.ligne>*:nth-child(2){display:none}}

/* ---------------------------------------------------------------- sections */
.section{padding:var(--section-gap) var(--gutter) calc(var(--section-gap) + 16px);border-top:var(--hairline)}
.section.serree{padding-bottom:var(--section-gap)}
.colonnes{display:grid;grid-template-columns:1fr 2fr;gap:28px 40px}
.colonnes.moitie{grid-template-columns:1fr 1fr}
@media (max-width:900px){.colonnes,.colonnes.moitie{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- grille de cartes bord à bord */
.catalogue{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--hairline);border-left:var(--hairline)}
.catalogue.pleine{border-left:0}
.catalogue.c3{grid-template-columns:repeat(3,1fr)}
.catalogue.c2{grid-template-columns:repeat(2,1fr)}
.catalogue>*{position:relative;border-right:var(--hairline);border-bottom:var(--hairline);overflow:hidden;background:var(--color-studio)}
.catalogue.pleine>*:last-child{border-right:0}
.catalogue .carre{aspect-ratio:1/1}
.catalogue .portrait{aspect-ratio:3/4}
.catalogue img{width:100%;height:100%;object-fit:cover}
.etiquette{position:absolute;z-index:2;top:5px;left:6px;font-size:var(--text-caption);line-height:1.35;background:var(--color-paper);color:var(--color-ink);padding:0 5px;max-width:calc(100% - 12px)}
.catalogue a:hover .etiquette,.catalogue a:focus-visible .etiquette{background:var(--color-ink);color:var(--color-paper)}
.carte-texte{background:var(--color-paper)!important;padding:40px 14px 16px}
.carte-texte .num{font-family:var(--font-display);font-weight:850;font-size:40px;line-height:.9;letter-spacing:-.03em;display:block;margin-bottom:14px}
.carte-texte p{font-size:var(--text-body)}
.objet img{object-fit:contain;mix-blend-mode:multiply;padding:12%}
:root[data-theme="dark"] .objet img{mix-blend-mode:normal}
.vide .tag{white-space:normal}
.vide{display:flex;align-items:flex-end;padding:10px;color:var(--color-graphite);font-size:var(--text-caption)}
@media (max-width:900px){.catalogue,.catalogue.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.catalogue.c3.une-colonne,.catalogue.une-colonne{grid-template-columns:1fr}}

/* survol : la lumière s'allume (photo de relevé -> photomontage nocturne) */
.allumage img{position:absolute;inset:0}
.allumage .nuit{opacity:0;transition:opacity .6s ease}
.allumage:hover .nuit,.allumage:focus-visible .nuit,.allumage.allume .nuit{opacity:1}
.allumage .info{position:absolute;z-index:2;left:0;right:0;bottom:0;background:var(--color-ink);color:var(--color-paper);padding:6px;font-size:var(--text-caption);transform:translateY(100%);transition:transform .25s ease}
.allumage:hover .info,.allumage:focus-visible .info{transform:none}
@media (prefers-reduced-motion:reduce){.allumage .nuit,.allumage .info{transition:none}}

/* ---------------------------------------------------------------- index en liste (tableau catalogue) */
table{border-collapse:collapse;width:100%}
th{font-weight:400;text-align:left;border-bottom:var(--hairline);padding:8px 8px 6px 0;font-size:var(--text-caption);color:var(--color-graphite);text-transform:uppercase;letter-spacing:.02em}
td{border-bottom:var(--hairline);padding:8px 8px 8px 0;vertical-align:top}
td.n,th.n{text-align:right;white-space:nowrap}
tbody tr.lien{cursor:pointer}
tbody tr.lien:hover td{background:var(--color-ink);color:var(--color-paper)}
tbody tr.lien:hover .tag{border-color:var(--color-paper)}
@media (max-width:700px){.masque-mobile{display:none}}

/* ---------------------------------------------------------------- fiche et chiffres */
.fiche{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--hairline);border-left:var(--hairline);margin:0}
.fiche>div{border-right:var(--hairline);border-bottom:var(--hairline);padding:8px 10px 12px}
.fiche dt{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:.02em;color:var(--color-graphite);margin-bottom:4px}
.fiche dd{margin:0}
@media (max-width:900px){.fiche{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fiche{grid-template-columns:1fr}}
.chiffres{display:grid;grid-template-columns:repeat(6,1fr);border-top:var(--hairline);border-left:var(--hairline)}
.chiffres>div{border-right:var(--hairline);border-bottom:var(--hairline);padding:8px 10px 12px}
.chiffre{display:block;font-family:var(--font-display);font-weight:850;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.03em;margin:10px 0 6px;white-space:nowrap}
@media (max-width:1100px){.chiffres{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.chiffres{grid-template-columns:1fr 1fr}}
.chiffres.c4{grid-template-columns:repeat(4,1fr)}
.chiffres.c4 .petit{display:block;max-width:26ch}
@media (max-width:900px){.chiffres.c4{grid-template-columns:1fr 1fr}}
.chiffres.c3{grid-template-columns:repeat(3,1fr)}
.chiffres.c3 .petit{display:block;max-width:30ch}
@media (max-width:560px){.chiffres.c3{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- composants */
.tag{display:inline-block;font-size:var(--text-caption);line-height:1.4;border:var(--hairline);border-radius:var(--radius-pill);padding:0 8px;white-space:nowrap;vertical-align:.1em}
.a-completer{border-style:dashed;color:var(--color-graphite)}
.bouton{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:var(--text-body);border:var(--hairline);border-radius:var(--radius-buttons);padding:9px 16px;background:none;color:var(--color-ink);cursor:pointer}
.bouton:hover,.bouton:focus-visible{background:var(--color-ink);color:var(--color-paper)}
.bouton[aria-disabled="true"]{color:var(--color-graphite);border-style:dashed;cursor:not-allowed}
.bouton[aria-disabled="true"]:hover{background:none;color:var(--color-graphite)}
.pilules{display:flex;flex-wrap:wrap;gap:6px}
.pilule{font:inherit;color:inherit;background:none;border:1px solid transparent;border-radius:var(--radius-pill);padding:1px 10px;cursor:pointer}
.pilule:hover{border-color:var(--color-ink)}
.pilule[aria-pressed="true"]{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-paper)}
.encart{border:var(--hairline);padding:16px 18px}
.encart.inverse{background:var(--color-ink);color:var(--color-paper)}
.encart.inverse .bouton{color:var(--color-paper);border-color:var(--color-paper)}
.encart.inverse .bouton:hover{background:var(--color-paper);color:var(--color-ink)}
ul.liste{margin:0 0 10px;padding-left:18px}ul.liste li{margin-bottom:5px}
.barre-outils{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:12px var(--gutter);border-top:var(--hairline)}

/* ---------------------------------------------------------------- comparateur jour / nuit */
.comparateur{position:relative;overflow:hidden;background:var(--color-studio);border:var(--hairline);user-select:none;touch-action:pan-y;max-height:82vh;aspect-ratio:3/4;margin-inline:auto}
.comparateur img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparateur .jour{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.comparateur .poignee{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:0;border-left:1px solid #fff;pointer-events:none}
.comparateur .poignee::after{content:"↔";position:absolute;top:50%;left:-16px;width:32px;height:32px;display:grid;place-items:center;background:#000;color:#fff;border:1px solid #fff;border-radius:50%;transform:translateY(-50%);font-size:14px}
.comparateur input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.comparateur .etiquette.droite{left:auto;right:6px}

/* ---------------------------------------------------------------- formulaire */
.formulaire{display:grid;grid-template-columns:1fr 1fr;border-top:var(--hairline);border-left:var(--hairline)}
.formulaire label{display:block;border-right:var(--hairline);border-bottom:var(--hairline);padding:8px 10px}
.formulaire label.large{grid-column:1/-1}
.formulaire span{display:block;font-size:var(--text-caption);color:var(--color-graphite);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.formulaire input,.formulaire textarea,.formulaire select{width:100%;font:inherit;color:inherit;background:none;border:0;padding:2px 0;resize:vertical;border-radius:0}
.formulaire input:focus,.formulaire textarea:focus{outline:none}
.formulaire label:focus-within{background:var(--color-studio)}
.formulaire .envoi{grid-column:1/-1;border-right:var(--hairline);border-bottom:var(--hairline);padding:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media (max-width:600px){.formulaire{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- pied de page : version inversée */
.pied{background:#000;color:#fff;margin-top:0}
.pied .colonnes4{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #fff}
.pied .colonnes4>div{padding:14px var(--gutter) 18px;border-right:1px solid #fff}
.pied .colonnes4>div:last-child{border-right:0}
.pied .petit{color:#a6a6a6}
.pied a:hover{text-decoration:underline;text-underline-offset:3px}
.pied .mot{font-size:clamp(56px,21.2vw,330px);padding:.12em var(--gutter) .04em calc(var(--gutter) - .04em)}
.pied .mentions{display:flex;justify-content:space-between;gap:16px;padding:0 var(--gutter);border-top:1px solid #fff;font-family:var(--font-display);font-weight:600;font-size:var(--text-caption);line-height:2.5}
:root[data-theme="dark"] .pied{border-top:1px solid #fff}
@media (max-width:900px){.pied .colonnes4{grid-template-columns:1fr 1fr}.pied .colonnes4>div:nth-child(2){border-right:0}.pied .colonnes4>div:nth-child(-n+2){border-bottom:1px solid #fff}}
@media (max-width:480px){.pied .colonnes4{grid-template-columns:1fr}.pied .colonnes4>div{border-right:0;border-bottom:1px solid #fff}.pied .mentions span:nth-child(2){display:none}}
/* fiches projets du portfolio */
.titre-page.titre-projet{font-size:clamp(40px,8.5vw,132px);overflow-wrap:break-word;hyphens:auto;line-height:.9}
.galerie{border-top:var(--hairline);border-left:var(--hairline)}
.galerie .rangee{display:grid;grid-template-columns:1fr}
.galerie figure{position:relative;margin:0;border-right:var(--hairline);border-bottom:var(--hairline);background:var(--color-studio);display:flex;min-width:0}
.galerie img{display:block;width:100%;height:auto}
.galerie .rangee:only-child figure:only-child img{max-height:82vh;object-fit:contain}
.galerie .rangee:has(figure+figure) a[data-visionneuse]{height:100%}
.galerie .rangee:has(figure+figure) img{height:100%;object-fit:cover}
.suite{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:700px){.galerie .rangee{grid-template-columns:1fr!important}}

/* ---------------------------------------------------------------- visionneuse des photos */
.visionneuse{position:fixed;inset:0;z-index:50;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;padding:52px 64px 24px;cursor:zoom-out}
.visionneuse[hidden]{display:none}
.visionneuse img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.visionneuse .v-barre{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px var(--gutter);font-size:var(--text-caption);border-bottom:1px solid #fff}
.visionneuse button{font:inherit;color:#fff;background:#000;border:1px solid #fff;border-radius:var(--radius-pill);padding:1px 10px;cursor:pointer}
.visionneuse button:hover,.visionneuse button:focus-visible{background:#fff;color:#000}
.visionneuse .v-prec,.visionneuse .v-suiv{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border-radius:50%}
.visionneuse .v-prec{left:14px}.visionneuse .v-suiv{right:14px}
.visionneuse :focus-visible{outline-color:#fff}
html.visionneuse-ouverte{overflow:hidden}
.galerie a[data-visionneuse]{cursor:zoom-in;display:block;width:100%}
@media (max-width:700px){.visionneuse{padding:52px 0 60px}.visionneuse .v-prec,.visionneuse .v-suiv{top:auto;bottom:12px;transform:none}}

/* ---------------------------------------------------------------- atelier : équipe en index typographique */
ol.equipe{list-style:none;margin:0;padding:0;border-top:var(--hairline)}
ol.equipe a{display:grid;grid-template-columns:4ch 1fr minmax(0,24ch) auto;align-items:baseline;gap:12px;padding:10px 0 12px;border-bottom:var(--hairline)}
ol.equipe .num{font-size:var(--text-caption);color:var(--color-graphite)}
ol.equipe .nom{font-family:var(--font-display);font-weight:900;letter-spacing:-.04em;line-height:.95;font-size:clamp(34px,7.4vw,112px)}
ol.equipe .action{font-size:var(--text-caption);border:var(--hairline);border-radius:var(--radius-pill);padding:0 8px;white-space:nowrap}
ol.equipe a:hover,ol.equipe a:focus-visible{background:var(--color-ink);color:var(--color-paper)}
ol.equipe a:hover .num,ol.equipe a:focus-visible .num{color:var(--color-paper)}
ol.equipe a:hover .action,ol.equipe a:focus-visible .action{border-color:var(--color-paper)}
ol.equipe .role{font-size:var(--text-body)}
@media (max-width:900px){ol.equipe a{grid-template-columns:4ch 1fr auto}ol.equipe .role{grid-column:2;grid-row:2}}
@media (max-width:600px){ol.equipe a{grid-template-columns:1fr auto;row-gap:6px}ol.equipe .num{grid-column:1/-1}ol.equipe .role{grid-column:1;grid-row:3}}
dl.cartel{margin:20px 0 0;border-top:var(--hairline)}
dl.cartel>div{display:grid;grid-template-columns:16ch 1fr;gap:12px;padding:8px 0 10px;border-bottom:var(--hairline)}
@media (max-width:480px){dl.cartel>div{grid-template-columns:1fr;gap:2px}}
dl.cartel dt{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:.02em;color:var(--color-graphite);padding-top:2px;overflow-wrap:anywhere}
dl.cartel dd{margin:0}
.boutons{display:flex;flex-wrap:wrap;gap:8px}
[data-projet][hidden]{display:none}
/* page Logos : aperçus sur fond fixe (indépendant du thème) et boutons de téléchargement par fichier */
.logos-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));border-top:var(--hairline);border-left:var(--hairline)}
.logo-carte{border-right:var(--hairline);border-bottom:var(--hairline);padding-bottom:14px;background:var(--color-paper)}
.logo-carte h3{font-size:var(--text-body);font-family:var(--font-mono);font-weight:400;margin:12px 12px 10px}
.logo-apercu{height:170px;display:flex;align-items:center;justify-content:center;padding:20px;border-bottom:var(--hairline);background:#ececec}
.logo-apercu.fond-noir{background:#262626}
.logo-apercu.damier{background:repeating-conic-gradient(#e2e2e2 0 25%,#fff 0 50%) 0 0/16px 16px}
.logo-apercu img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.logo-fichiers{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px}
.logo-fichiers a{border:var(--hairline);padding:5px 8px;line-height:1.2;color:var(--color-ink)}
.logo-fichiers a:hover,.logo-fichiers a:focus-visible{background:var(--color-ink);color:var(--color-paper)}
.logo-fichiers small{display:block;font-size:var(--text-caption);opacity:.7}
.texte-expo h2{font-size:clamp(22px,2.4vw,32px);overflow-wrap:anywhere}
.texte-expo .intertitre{margin-top:1.6em}
dl.cartel+p{margin-top:14px}