/* ===========================================================================
   Ndar Studio — site vitrine (démo Zephyr)

   Parti pris : un studio se juge sur son travail, pas sur son argumentaire.
   La page est conduite par les images, à des échelles différentes, sur une
   grille volontairement irrégulière.

   Ce qui a été écarté, et pourquoi : les sections numérotées (01, 02, 03…),
   la bande de chiffres, les trois cartes égales et le bandeau de citation.
   Ce sont les quatre blocs qui font qu'une page ressemble à un gabarit
   plutôt qu'à un site dessiné pour quelqu'un.

   Autonome : aucune requête externe hors photographies, polices système.
   =========================================================================== */

@layer reset, base, layout, components, utils;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul { list-style: none; padding: 0; }
  a { color: inherit; }
  figure { margin: 0; }
}

@layer base {
  :root {
    --ink: #1a1714;
    --ink-soft: #6a6057;
    --paper: #f4efe7;
    --paper-deep: #e7dfd3;
    --clay: #a5512c;
    --line: rgba(26, 23, 20, 0.16);

    /* Une seule famille sérif pour le titrage, une sans pour le texte :
       l'écart d'échelle fait le contraste, pas l'accumulation de styles. */
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --marge: clamp(1.15rem, 4vw, 3.5rem);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    color-scheme: light;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: clamp(0.98rem, 0.25vw + 0.9rem, 1.05rem);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }
  b { font-weight: 600; }
  a { text-decoration-thickness: 1px; text-underline-offset: 0.25em; }

  :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
  ::selection { background: var(--clay); color: var(--paper); }
}

@layer layout {
  /* Grille de douze colonnes, pleine largeur. Les blocs s'y accrochent à des
     endroits différents : ce décalage empêche la page de ressembler à une
     pile de sections identiques. */
  .travail,
  .intro,
  .metier,
  .matiere,
  .atelier,
  .ecrire {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 clamp(0.75rem, 2vw, 2rem);
    padding-inline: var(--marge);
  }
}

@layer components {

  .sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .skip {
    position: absolute; left: 50%; translate: -50% -150%; z-index: 100;
    background: var(--ink); color: var(--paper); padding: 0.7rem 1.2rem; font-size: 0.85rem;
    transition: translate 0.2s var(--ease);
  }
  .skip:focus-visible { translate: -50% 0.6rem; }

  /* ---------- Barre ---------- */
  .bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.9rem var(--marge);
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(10px);
  }
  .mark {
    font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.01em;
    text-decoration: none; margin-inline-end: auto;
  }
  .mark span { color: var(--ink-soft); font-style: italic; }

  .bar nav { display: none; }
  @media (min-width: 880px) {
    .bar nav { display: flex; gap: 1.75rem; }
    .bar nav a {
      font-size: 0.85rem; text-decoration: none; color: var(--ink-soft);
      transition: color 0.2s var(--ease);
    }
    .bar nav a:hover { color: var(--clay); }
  }

  .tel { display: none; }
  @media (min-width: 880px) {
    .tel {
      display: inline-block;
      font-size: 0.85rem; text-decoration: none; color: var(--ink);
      border-bottom: 1px solid var(--line); padding-bottom: 2px;
    }
    .tel:hover { border-color: var(--clay); color: var(--clay); }
  }

  .burger {
    display: grid; gap: 5px; justify-items: end; align-content: center;
    min-width: 44px; min-height: 44px;
  }
  @media (min-width: 880px) { .burger { display: none; } }
  .burger-bar {
    display: block; width: 22px; height: 1.5px; background: var(--ink);
    transition: translate 0.3s var(--ease), rotate 0.3s var(--ease);
  }
  .burger[aria-expanded="true"] .burger-bar:first-of-type { translate: 0 3.25px; rotate: 45deg; }
  .burger[aria-expanded="true"] .burger-bar:last-of-type { translate: 0 -3.25px; rotate: -45deg; }

  .menu { display: grid; padding: 0.5rem var(--marge) 1.5rem; }
  /* L'attribut `hidden` doit l'emporter sur la classe, sinon le menu reste
     ouvert en permanence, y compris sur grand écran. */
  .menu[hidden] { display: none; }
  @media (min-width: 880px) { .menu { display: none; } }
  .menu a {
    text-decoration: none; padding: 0.85rem 0; font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }

  /* ---------- Ouverture ---------- */
  .ouverture { padding-bottom: clamp(3rem, 8vw, 7rem); }
  .ouverture-img { height: clamp(58svh, 62vw, 82svh); overflow: hidden; position: relative; }
  .ouverture-img img { width: 100%; height: 100%; object-fit: cover; }

  .ouverture-dit {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.4vw + 0.6rem, 4rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    max-width: 18ch;
    /* Le texte mord sur l'image : ce chevauchement donne le ton d'entrée. */
    margin: clamp(-5rem, -6vw, -2.5rem) var(--marge) 0;
    position: relative;
    background: var(--paper);
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 0 0;
  }

  /* ---------- Intro ---------- */
  .intro { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 9vw, 8rem); }
  .intro p { grid-column: 1 / -1; font-size: clamp(1.1rem, 0.9vw + 0.95rem, 1.5rem); line-height: 1.55; }
  .intro-suite { color: var(--ink-soft); margin-top: 1.5rem; }
  @media (min-width: 880px) {
    .intro p { grid-column: 2 / 9; }
    .intro-suite { grid-column: 5 / 11; font-size: 1.02rem; line-height: 1.75; }
  }

  /* ---------- Le travail ---------- */
  .travail { row-gap: clamp(4rem, 11vw, 10rem); padding-bottom: clamp(4rem, 11vw, 10rem); }

  .oeuvre { grid-column: 1 / -1; display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
  .oeuvre .shot { overflow: hidden; position: relative; background: var(--paper-deep); }
  .oeuvre .shot img { width: 100%; height: 100%; object-fit: cover; }

  .legende h2 { font-size: clamp(1.6rem, 1.8vw + 1rem, 2.6rem); margin-bottom: 0.75rem; }
  .legende p { color: var(--ink-soft); max-width: 46ch; }
  .fiche {
    margin-top: 1rem; font-size: 0.78rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink);
  }

  /* Projet 1 : image pleine largeur, légende décalée sous le tiers droit. */
  .pleine .shot { aspect-ratio: 3 / 2; }
  @media (min-width: 880px) {
    .pleine { grid-template-columns: repeat(12, 1fr); }
    .pleine .shot { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
    .pleine .legende { grid-column: 7 / 12; }
  }

  /* Projet 2 : texte dans la marge de gauche, image haute à droite. */
  .decalee .shot { aspect-ratio: 4 / 5; }
  @media (min-width: 880px) {
    .decalee { grid-template-columns: repeat(12, 1fr); align-items: center; }
    .decalee .legende { grid-column: 1 / 5; }
    .decalee .shot { grid-column: 6 / 13; aspect-ratio: 4 / 4.4; }
  }

  /* Projets 3 et 4 : côte à côte, hauteurs différentes et décalage vertical. */
  .paire { grid-column: 1 / -1; display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
  /* `.oeuvre` porte `grid-column: 1 / -1` pour la grille de douze colonnes de
     la section. Dans `.paire`, qui n'en a que deux, cette règle ferait occuper
     toute la largeur à chaque projet : les deux se retrouveraient empilés. */
  .paire > .oeuvre { grid-column: auto; }
  @media (min-width: 880px) {
    .paire { grid-template-columns: 1fr 1fr; align-items: start; }
    .haute { padding-inline-end: clamp(1rem, 4vw, 4rem); }
    /* Le décalage vers le bas casse l'alignement des deux colonnes. */
    .basse { margin-top: clamp(3rem, 9vw, 9rem); padding-inline-start: clamp(1rem, 3vw, 3rem); }
  }
  .haute .shot { aspect-ratio: 3 / 4; }
  .basse .shot { aspect-ratio: 4 / 3; }

  /* ---------- Métier ---------- */
  .metier {
    background: var(--paper-deep);
    padding-block: clamp(3.5rem, 9vw, 7rem);
    row-gap: 2rem;
  }
  .metier-titre { grid-column: 1 / -1; font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); }
  .metier-texte { grid-column: 1 / -1; display: grid; gap: 1.5rem; }
  .metier-texte p { max-width: 62ch; }
  .metier-texte b { font-family: var(--serif); font-weight: 400; font-size: 1.12em; }
  @media (min-width: 880px) {
    .metier-titre { grid-column: 1 / 4; position: sticky; top: 6rem; align-self: start; }
    .metier-texte { grid-column: 5 / 12; gap: 2.25rem; }
  }

  /* ---------- Matière ---------- */
  .matiere { padding-block: clamp(3.5rem, 9vw, 8rem); row-gap: clamp(1rem, 3vw, 2rem); }
  .matiere-mots { grid-column: 1 / -1; margin-bottom: 1rem; }
  .matiere-mots h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); margin-bottom: 1rem; }
  .matiere-mots p { color: var(--ink-soft); max-width: 52ch; }
  .matiere .shot { overflow: hidden; background: var(--paper-deep); position: relative; }
  .matiere .shot img { width: 100%; height: 100%; object-fit: cover; }
  .m1 { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .m2 { grid-column: 1 / 7; aspect-ratio: 3 / 4; }
  .m3 { grid-column: 7 / -1; aspect-ratio: 4 / 3; align-self: end; }
  @media (min-width: 880px) {
    .matiere-mots { grid-column: 1 / 5; align-self: center; margin-bottom: 0; }
    /* Trois tailles franchement différentes : une large, une haute, une petite
       posée plus bas. */
    .m1 { grid-column: 6 / 13; aspect-ratio: 16 / 10; }
    .m2 { grid-column: 1 / 5; aspect-ratio: 3 / 4; margin-top: clamp(2rem, 5vw, 4rem); }
    .m3 { grid-column: 6 / 11; aspect-ratio: 4 / 3; margin-top: clamp(1rem, 3vw, 2.5rem); }
  }

  /* ---------- Atelier ---------- */
  .atelier {
    padding-block: clamp(3rem, 8vw, 7rem);
    row-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
  .atelier .shot {
    grid-column: 1 / -1; aspect-ratio: 4 / 3;
    overflow: hidden; background: var(--paper-deep); position: relative;
  }
  .atelier .shot img { width: 100%; height: 100%; object-fit: cover; }
  .atelier-mots { grid-column: 1 / -1; display: grid; gap: 1.1rem; }
  .atelier-mots h2 { font-size: clamp(1.8rem, 2vw + 1rem, 3rem); }
  .atelier-mots p { color: var(--ink-soft); max-width: 44ch; }
  @media (min-width: 880px) {
    .atelier .shot { grid-column: 1 / 8; aspect-ratio: 3 / 2; }
    .atelier-mots { grid-column: 9 / 13; }
  }

  /* ---------- Écrire ---------- */
  .ecrire {
    background: var(--ink); color: var(--paper);
    padding-block: clamp(3.5rem, 9vw, 7rem);
    row-gap: clamp(2.5rem, 6vw, 4rem);
  }
  .ecrire-mots { grid-column: 1 / -1; }
  .ecrire-mots h2 { font-size: clamp(1.9rem, 2.2vw + 1rem, 3.2rem); margin-bottom: 1.1rem; }
  .ecrire-mots > p { color: rgba(244, 239, 231, 0.7); max-width: 38ch; }
  .ecrire dl { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
  .ecrire dl div { display: grid; gap: 0.15rem; }
  .ecrire dt {
    font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(244, 239, 231, 0.45);
  }
  .ecrire dd { margin: 0; }
  .ecrire dd a { color: var(--paper); }

  .formulaire { grid-column: 1 / -1; display: grid; gap: 1.75rem; }
  @media (min-width: 880px) {
    .ecrire-mots { grid-column: 1 / 5; }
    .formulaire { grid-column: 7 / 13; }
  }

  /* Champs soulignés, pas encadrés : une boîte de plus aurait fait formulaire
     de gabarit. */
  .champ { display: grid; gap: 0.4rem; }
  .champ label {
    font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(244, 239, 231, 0.5);
  }
  .champ input, .champ textarea {
    background: none; border: 0;
    border-bottom: 1px solid rgba(244, 239, 231, 0.28);
    padding: 0.6rem 0; color: var(--paper); min-height: 44px;
    transition: border-color 0.25s var(--ease);
  }
  .champ textarea { resize: vertical; }
  .champ input:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--clay); }
  .champ[data-invalid] input, .champ[data-invalid] textarea { border-bottom-color: #e08b6a; }
  .err { color: #e6a68c; font-size: 0.8rem; }

  .envoyer {
    justify-self: start; min-height: 46px; padding: 0.7rem 2rem;
    background: var(--clay); color: var(--paper); font-size: 0.92rem;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), translate 0.25s var(--ease);
  }
  .envoyer:hover { background: var(--paper); color: var(--ink); translate: 0 -2px; }
  .note { font-size: 0.8rem; color: rgba(244, 239, 231, 0.5); }
  .note[data-state="ok"] { color: #a9d3b4; }

  /* ---------- Pied ---------- */
  .pied { padding: clamp(2.5rem, 6vw, 4rem) var(--marge) 1.5rem; }
  .pied-haut {
    display: grid; gap: 1.5rem;
    padding-bottom: 2rem; border-bottom: 1px solid var(--line);
  }
  @media (min-width: 760px) {
    .pied-haut { grid-template-columns: auto 1fr auto; align-items: start; gap: 3rem; }
  }
  .pied-haut .mark { font-size: 1.25rem; }
  .pied-haut p { color: var(--ink-soft); font-size: 0.9rem; }
  .pied-haut nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
  .pied-haut nav a { font-size: 0.85rem; text-decoration: none; color: var(--ink-soft); }
  .pied-haut nav a:hover { color: var(--clay); }

  .mention {
    margin-top: 1.5rem; font-size: 0.76rem; line-height: 1.6;
    color: var(--ink-soft); max-width: 78ch;
  }
  .mention b { color: var(--ink); }
  .mention a { color: var(--clay); }

  /* Une photo qui ne charge pas ne laisse jamais un cadre vide. */
  .shot[data-failed] {
    background:
      repeating-linear-gradient(135deg, transparent 0 11px,
        color-mix(in srgb, var(--clay) 16%, transparent) 11px 12px),
      var(--paper-deep);
  }
  .shot[data-failed]::after {
    content: "Visuel indisponible";
    position: absolute; inset: 0;
    display: grid; place-items: center; padding: 1rem; text-align: center;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-soft);
  }
}

@layer utils {
  .obs { opacity: 0; translate: 0 18px; transition: opacity 0.7s var(--ease), translate 0.7s var(--ease); }
  .obs.seen { opacity: 1; translate: 0 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .obs { opacity: 1; translate: none; }
  }
}