/* MODÈLE « ARCHITECTURE » — portfolio d'agence. Architecture : en-tête minimale superposée, hero photographique plein cadre, manifeste, INDEX de projets
   en lignes (la vignette apparaît au survol), étude de cas en grandes images, trois principes, contact typographique. Voix native : grotesque serrée. */
html[data-modele="architecture"] { --n-titre: "Instrument Sans", system-ui, sans-serif; --n-poids: 600; --n-suivi: -0.05em; }

.tete { position: fixed; z-index: 30; inset: 0 0 auto 0; mix-blend-mode: normal; color: #fff; }
.tete__int { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px var(--gut); }
.marque { font: 700 0.95rem/1 var(--f-texte); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.nav { display: flex; gap: clamp(16px, 3vw, 40px); font: 500 0.86rem/1 var(--f-texte); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.nav sup { font-size: 0.6em; margin-left: 2px; }
.burger { display: none; }
/* après la photo, l'en-tête prend le fond du site : un texte blanc sur une section claire serait invisible */
html.passe .tete { background: var(--c-fond); color: var(--c-texte); box-shadow: 0 1px 0 color-mix(in srgb, var(--c-texte) 14%, var(--c-fond)); }
html.passe .tete .marque, html.passe .tete .nav { text-shadow: none; }
.tete { transition: background 0.35s, color 0.35s; }

.hero { position: relative; min-height: max(560px, 100svh); display: grid; align-items: end; overflow: hidden; }
.hero__photo { position: absolute; inset: 0; background: var(--c-nuit); }
.hero__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, transparent 26%, transparent 46%, rgba(0, 0, 0, 0.66) 100%); }
.hero__int { position: relative; z-index: 2; display: grid; gap: 18px; padding: 120px 0 clamp(32px, 5vw, 64px); }
.hero__meta { color: #fff; opacity: 0.9; }
.hero .titre { font-size: calc(clamp(3.6rem, 12vw, 11rem) * var(--echelle-titre)); line-height: 0.88; color: #fff; }
.hero__legende { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.4); font-size: 0.92rem; color: #fff; }
.hero__legende span { opacity: 0.85; }
.hero__legende .btn--lien { margin-left: auto; color: #fff; }

.manifeste { padding: clamp(72px, 11vw, 180px) 0; }
.manifeste__int { display: grid; gap: clamp(28px, 4vw, 56px); }
.manifeste .titre { max-width: 22ch; font-size: calc(clamp(1.9rem, 4.4vw, 4rem) * var(--echelle-titre)); line-height: 1.04; }
.manifeste .titre .it { color: var(--signe); }
.faits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; padding-top: 28px; border-top: 1px solid var(--faint); }
.faits dt { font: var(--w-titre) clamp(2rem, 4vw, 3.4rem)/1 var(--f-titre); letter-spacing: var(--ls-titre); font-variant-numeric: lining-nums; }
.faits dd { margin-top: 6px; font-size: 0.84rem; color: var(--soft); }

.index { padding: 0 0 clamp(72px, 10vw, 160px); }
.index__tete { display: flex; justify-content: space-between; padding: 0 0 18px; border-bottom: 1.5px solid var(--fg); }
.liste li { border-bottom: 1px solid var(--faint); }
.liste a { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 16px; align-items: baseline; padding: clamp(18px, 2.4vw, 30px) 0; text-decoration: none; transition: padding 0.5s cubic-bezier(0.22, 0.7, 0.25, 1), color 0.3s; }
.liste__n { font: 500 0.82rem/1 var(--f-texte); color: var(--soft); font-variant-numeric: tabular-nums; }
.liste__titre { font: var(--w-titre) clamp(1.5rem, 3.6vw, 3.2rem)/1.04 var(--f-titre); letter-spacing: var(--ls-titre); }
.liste__type, .liste__lieu, .liste__an { grid-column: 2 / 4; font-size: 0.84rem; color: var(--soft); }
.liste__an { font-variant-numeric: tabular-nums; }
.liste__vignette { display: none; }
.liste a:hover { padding-left: 14px; color: var(--signe); }

.etude { padding: clamp(72px, 10vw, 160px) 0; }
.etude__tete { display: grid; gap: 18px; margin-bottom: clamp(32px, 5vw, 64px); }
.etude .titre { font-size: calc(clamp(3rem, 9vw, 8rem) * var(--echelle-titre)); line-height: 0.9; }
.etude .titre .it { color: var(--signe); }
.fiche { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; padding-top: 22px; border-top: 1.5px solid var(--fg); }
.fiche dt { font: 600 0.68rem/1.3 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.fiche dd { margin-top: 4px; font-size: 0.98rem; }
.etude__large { aspect-ratio: 3 / 2; }
.etude__texte { display: grid; gap: clamp(22px, 3vw, 40px); padding: clamp(36px, 6vw, 88px) 0; }
.etude__intro { max-width: 22ch; font-size: calc(clamp(1.5rem, 2.8vw, 2.5rem) * var(--echelle-titre)); line-height: 1.1; }
.etude__colonnes { display: grid; gap: 18px; max-width: 62rem; line-height: 1.7; color: var(--soft); font-size: 1.02rem; }
.etude__duo { display: grid; gap: clamp(12px, 2vw, 24px); }
.etude__duo .ph { aspect-ratio: 4 / 5; }

.approche { padding: clamp(64px, 9vw, 140px) 0; }
.approche__liste { display: grid; gap: 40px; margin-top: clamp(32px, 5vw, 64px); }
.approche__liste li { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--fg) 40%, var(--bg)); }
.approche__n { font-size: calc(clamp(3rem, 7vw, 6rem) * var(--echelle-titre)); line-height: 0.9; color: var(--signe); font-variant-numeric: lining-nums; }
.approche h3 { font: var(--w-titre) 1.5rem/1.1 var(--f-titre); letter-spacing: var(--ls-titre); }
.approche p { max-width: 30ch; line-height: 1.6; color: var(--soft); }

.contact { padding: clamp(80px, 12vw, 200px) 0 clamp(48px, 6vw, 90px); }
.contact__int { display: grid; gap: clamp(20px, 3vw, 40px); }
.contact .titre { font-size: calc(clamp(3.4rem, 11vw, 10rem) * var(--echelle-titre)); line-height: 0.9; }
.contact .titre a { text-decoration: none; transition: color 0.3s; }
.contact .titre a:hover { color: var(--pop); }
.contact__cols { display: grid; gap: 24px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--fg) 30%, var(--bg)); font-size: 0.95rem; line-height: 1.7; color: var(--soft); }
.contact__cols b { color: var(--fg); font-weight: 600; }
.pied { padding: 0 0 36px; font-size: 0.78rem; color: var(--soft); }

@media (max-width: 899px) {
  .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; gap: 0; padding: 6px var(--gut) 18px; background: var(--c-nuit); }
  .nav[data-ouvert="true"] { display: flex; }
  .nav a { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 1.1rem; }
  .burger { display: grid; gap: 6px; width: 38px; height: 38px; padding: 0 8px; align-content: center; }
  .burger i { display: block; height: 1.5px; background: #fff; }
  .hero__legende .btn--lien { margin-left: 0; }
}
@media (min-width: 900px) {
  .faits { grid-template-columns: repeat(4, 1fr); }
  .manifeste__int { grid-template-columns: 200px 1fr; }
  .manifeste__int .faits { grid-column: 1 / -1; }
  .liste a { grid-template-columns: 60px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 70px; }
  .liste__type, .liste__lieu, .liste__an { grid-column: auto; }
  .liste__an { text-align: right; }
  .liste__vignette { position: absolute; z-index: 3; right: 14%; top: 50%; display: block; width: 230px; aspect-ratio: 3 / 2; border-radius: 6px; opacity: 0; transform: translateY(-46%) rotate(-1.5deg) scale(0.94); pointer-events: none; transition: opacity 0.4s, transform 0.5s cubic-bezier(0.22, 0.7, 0.25, 1); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
  .liste a:hover .liste__vignette { opacity: 1; transform: translateY(-50%) rotate(-1.5deg) scale(1); }
  .etude__tete { grid-template-columns: 1fr 1fr; align-items: end; }
  .etude__tete .etiquette { grid-column: 1 / -1; }
  .etude__texte { grid-template-columns: 1fr 1fr; align-items: start; gap: 6vw; }
  .etude__colonnes { grid-template-columns: 1fr; }
  .etude__duo { grid-template-columns: 1fr 1fr; }
  .etude__duo figure:nth-child(2) { margin-top: 14%; }
  .approche__liste { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); }
  .contact__cols { grid-template-columns: repeat(3, 1fr); }
}