/* ==========================================================================
   06-REFONTE — passe du 24-09-2026, complétée le 26-09-2026
   Chargée en dernier : elle a le dernier mot sans réécrire les feuilles
   précédentes (sauvegarde complète : « JASMIN WEB - BACKUP 2026-09-24 »).
   1. Ouverture photographique  2. Étiquettes lisibles  3. Grille régulière
   4. Hiérarchie  5. Rythme  6. (la démarche — retirée le 29-09-2026)
   7. Formulaire d'accueil
   8. L'accueil — plus grand, plus serré, sans trou (26-09-2026)
   9. À propos — le chapeau étalé (29-09-2026)

   PASSE DU 26-09-2026 — LA PRÉSENCE ET LE GESTE. Elle ne change aucune
   structure ; elle touche trois des sept sections ci-dessus, et déteint sur
   deux autres feuilles :
     · 1 et 2 — le voile de l'ouverture remonte, le titre reçoit deux ombres et
       les étiquettes de 11 px passent à 0,88 de blanc : c'est là que le texte
       se lit sur la photographie ;
     · 3 — les parcelles du plan ont maintenant exactement la même taille (la
       première portait le double, `tc--lead`) — elles sont quinze depuis le
       29-09-2026, l'ajout de Bota Bota ;
     · les actions n'ont plus de boîte : voir 02-layout, « ACTIONS », et
       « Le lien de l'en-tête » ; le bandeau de contact, dans 03-components ;
       les couleurs de rôle, dans 00-tokens. (Les filtres de territoire, qui
       vivaient là aussi, ont été retirés le 26-09-2026 : voir §31.)
   ========================================================================== */

/* ============================================ 1. OUVERTURE PHOTOGRAPHIQUE */
.entry {
  min-height: min(92svh, 60rem);
  align-content: end;
  padding-bottom: 0;
}

.entry__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: hidden;
}

/* L'affiche et le film occupent le même cadre, l'un sous l'autre : le film
   (29-09-2026) est posé après l'affiche et la recouvre dès qu'il joue. Les
   deux sont en `position: absolute` dans le cadre — sans cela la seconde
   balise prendrait sa place dans le flux, et le cadre ferait deux fois la
   hauteur de l'écran. Même cadrage pour les deux (`object-position`), puisque
   l'affiche EST la première image du film : le passage de l'une à l'autre ne
   bouge pas d'un pixel. */
.entry__bg img,
.entry__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Le film n'est jamais visible avant de jouer : c'est l'événement « playing »
   qui le découvre, en posant la classe `is-playing` (experience.js,
   `initHeroFilm`). **Sans fondu**, et c'est voulu : le film commence sur sa
   première image, et l'affiche posée dessous EST cette première image — la
   coupure ne se voit donc pas, alors qu'un fondu, lui, superposerait pendant
   une seconde deux images presque identiques mais pas tout à fait (l'affiche
   est un JPEG, et le film a déjà avancé de quelques images) : c'est ce
   « double » que la maison a vu le 29-09-2026, et c'est pourquoi la
   transition d'opacité a été retirée. */
.entry__video {
  opacity: 0;
}

.entry__video.is-playing { opacity: 1; }

/* Sous mouvement réduit, le film n'est même pas téléchargé : le script ne lui
   donne jamais de source. Cette règle est une ceinture de plus, pour un
   navigateur où la préférence changerait en cours de page. */
@media (prefers-reduced-motion: reduce) {
  .entry__video { display: none; }
}

/* Voile : sombre en haut et en bas — c'est là que vivent les étiquettes, la
   ligne d'ouverture et les gestes —, plus léger au milieu pour ne pas manger le
   jardin. SIXIÈME PASSE, 26-09-2026 : les trois arrêts foncés remontent
   (0,62 / 0,22 / 0,46 / 0,94). Ce n'est pas le contraste qui manquait aux deux
   lignes de capitales, c'est le fond : elles se lisent sur la photographie. */
.entry__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.22) 32%, rgba(0, 0, 0, 0.46) 58%, rgba(0, 0, 0, 0.94) 100%);
}

.entry__title {
  color: var(--c-blanc);
  /* Le titre se lit sur la photographie : deux ombres, une serrée pour le
     contour, une large pour le fond (26-09-2026). */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 8px 44px rgba(0, 0, 0, 0.5);
}

.entry__foot { border-top-color: rgba(255, 255, 255, 0.28); }
.entry__meta { color: rgba(255, 255, 255, 0.88); }

/* ================================================ 2. ÉTIQUETTES LISIBLES
   SIXIÈME PASSE, 26-09-2026 : l'étiquette passe de 0,72 à 0,88 de blanc et
   gagne une ombre portée. Elle se lit sur la photographie dans huit sections du
   site ; l'ombre ne se voit pas sur le noir du fond, et là elle décolle la
   lettre de l'image. */
:root {
  --t-label: clamp(0.74rem, 0.71rem + 0.1vw, 0.82rem);
}

.label {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 1px 14px rgba(0, 0, 0, 0.55);
}
.label--accent { color: var(--accent); }
.tc__meta { font-size: var(--t-label); }

/* ============================================ 3. RÉALISATIONS — GRILLE RÉGULIÈRE
   Le plan éparpillé laissait de grands vides noirs et des vignettes trop
   petites. À partir de 900 px : trois colonnes, toutes les réalisations à la
   même taille ; les positions en ligne (--c, --r) sont ignorées. Sous
   900 px, le rail glissant d'origine reste en place.

   La première parcelle (Saint-Bruno) a porté un temps le double de largeur et
   de hauteur (`tc--lead`, 2 × 2). Retiré le 26 septembre 2026 : à la demande
   de la maison, les photographies du plan ont exactement la même taille —
   elles sont quinze depuis l'ajout de Bota Bota, le 29-09-2026. */
@media (min-width: 900px) {
  .terrain {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: clamp(12rem, 17vw, 17rem);
    gap: clamp(0.6rem, 1vw, 1rem);
  }

  .terrain .tc {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Les photographies en pleine couleur : ce sont elles qui vendent. */
.tc__img { filter: none; }

.tc__veil {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.78) 100%);
}

/* Le lieu reste visible sans survol (tactile, clavier, lecture rapide). */
.tc__meta {
  max-height: 3.2rem;
  opacity: 1;
}

/* ============================================ 4. HIÉRARCHIE TYPOGRAPHIQUE
   Cinzel garde la marque : logo, grands titres, étiquettes, boutons. Noms de
   projets et titres secondaires passent en Cormorant, casse normale. */
.tc__name,
.work-card__title,
.index-list__name,
/* `.steps__title` figurait dans ce sélecteur : la section « La démarche » est
   retirée le 29-09-2026, et ce style avec elle (voir README §40). */
.member__name {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.tc__name { font-size: clamp(1.25rem, 1.8vw, 1.9rem); }

/* ================================================== 5. RYTHME DES SECTIONS */
/* LE SEUL PAS DE GRIS DU SITE EST RETIRÉ — 29-09-2026. Le fond des chapitres
   sombres était `--s-2` (#0b0b0b), et c'est lui que la maison voyait autour des
   photographies : la grille de projets de l'accueil pose ses quinze parcelles sur
   ce fond, et ses intervalles de 6 à 13 px faisaient un halo gris entre les
   images. Sur le noir pur de la page (`--s-0` — celui du corps), les
   photographies se détachent, et le chapitre n'est plus qu'un rythme.
   C'est le seul endroit qui portait ce gris : les surfaces voisines (visage de
   parcelle, bandeau d'appel) gardent le leur, elles sont derrière une image. */
section.chapter--dark { background: var(--s-0); }

main > section.chapter + section.chapter {
  border-top: var(--hairline) solid rgba(255, 255, 255, 0.08);
}

/* ============================== 6. LA DÉMARCHE — SECTION RETIRÉE (29-09-2026)
   Quatre étapes numérotées (`.steps`, `.steps__item`, `.steps__n`,
   `.steps__title`, `.steps__text`, et les deux paliers de fenêtre étroite) :
   la section « La démarche » est retirée de l'accueil à la demande de la maison,
   et ces règles partent avec elle — elles ne servaient qu'à elle. La règle
   d'origine (`.steps`, 03-components) est retirée le même jour. Voir README §40. */

/* ================================= 8. L'ACCUEIL — PLUS GRAND, PLUS SERRÉ,
   SANS TROU (26-09-2026)

   La classe `page-accueil` est portée par le <body> d'index.html seulement —
   ni les fiches projet, ni les deux pages à gabarit ne la reçoivent. C'est
   donc ici, et ici seulement, que l'accueil se règle. Trois demandes :

   1. LE TEXTE PLUS GRAND. Les jetons de la coquille typographique sont
      redéfinis sur la page entière : titres, chapeaux, étiquettes et texte
      courant grandissent d'un coup, sans qu'aucune de leurs règles soit
      réécrite. Le titre d'ouverture et la phrase de chapitre — qui portent
      tous deux --t-display-2 — passent de 56 à 62 px sur un 1440, et les
      étiquettes de 11 à 12 px.

   2. LE RYTHME RESSERRÉ. L'écart entre deux sections plafonnait à 6,5 rem
      (104 px de chaque côté, 208 px entre deux blocs) : c'était la première
      chose qu'on voyait sur un grand écran. Il plafonne à 4,5 rem.

   3. LE TROU DU DERNIER RANG. Treize parcelles dans trois colonnes : la
      treizième restait seule sur son rang, avec deux cases noires à sa droite.
      Elle est posée dans la colonne du milieu — le vide devient symétrique et
      se lit comme une composition, non comme un manque.

   Depuis le 26-09-2026, quatorze parcelles : le dernier rang en porte deux,
   et deux parcelles se lisent comme une paire, pas comme un manque. La règle
   ne vise donc plus que la parcelle restée SEULE — celle qui ouvre un rang,
   `:nth-child(3n + 1)`. Appliquée à toutes, elle poserait la quatorzième sur
   la treizième. */
.page-accueil {
  --t-display-1: clamp(2.4rem, 0.9rem + 6vw, 6.6rem);
  --t-display-2: clamp(1.9rem, 1rem + 3.2vw, 4rem);
  --t-display-3: clamp(1.45rem, 1.05rem + 1.6vw, 2.5rem);
  --t-display-4: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --t-lede: clamp(1.15rem, 1.06rem + 0.5vw, 1.55rem);
  --t-body: clamp(1.06rem, 1.02rem + 0.22vw, 1.2rem);
  --t-small: clamp(0.94rem, 0.9rem + 0.14vw, 1.02rem);
  --t-label: clamp(0.8rem, 0.76rem + 0.12vw, 0.92rem);

  --section-y: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem);
  --section-y-sm: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* L'ouverture tenait 92 % de la fenêtre pour un contenu qui en occupait la
   moitié : le titre flottait au milieu de son propre vide. 80 % suffisent à
   en faire un premier écran — et la suite de la page entre plus tôt. */
.page-accueil .entry {
  min-height: min(80svh, 48rem);
}

@media (min-width: 900px) {
  .page-accueil .terrain .tc:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* ============================================ 7. FORMULAIRE D'ACCUEIL */
/* Le bloc d'invitation porte l'ancre `#contact` depuis le 29-09-2026 : c'est là
   que mène le bouton « Demander une rencontre » de l'en-tête, sur toutes les
   pages. `scroll-margin-top` l'écarte de l'en-tête fixe à l'arrivée par le
   lien — le même écart que le bloc de contact de la page À propos
   (`.member__contact`, dans 03-components). Voir README §48. */
.invite__grid {
  align-items: start;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  gap: clamp(2rem, 5vw, 5rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* Le panneau du formulaire descend d'un pas de gris le 29-09-2026 : il tenait
   la surface la plus relevée de l'échelle (--s-3, #161616) et faisait, dans le
   chapitre noir, une plaque plus lumineuse que les photographies qu'elle
   accompagne. Il prend le pas discret de la maison (--s-2, #0b0b0b) — celui des
   rares surfaces qui doivent encore se détacher du fond (00-tokens.css). Le
   filet de 10 % de blanc reste : c'est lui qui dessine le bord, pas le gris.
   Voir README §44. */
.quick-form {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  background: var(--s-2);
  border: var(--hairline) solid rgba(255, 255, 255, 0.1);
}

.quick-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}

/* Une rangée à un seul champ : c'est le cas depuis que « Type de projet » est
   retiré (29-09-2026). Le champ prend toute la largeur plutôt que la moitié —
   sinon la rangée se lit comme un trou, et le filet de saisie s'arrête au
   milieu. Voir README §40. */
.quick-form__field:only-child {
  grid-column: 1 / -1;
}

.quick-form__field {
  display: grid;
  gap: 0.45rem;
}

.quick-form__label {
  font-family: var(--font-brand);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.quick-form__control {
  width: 100%;
  padding: 0.7rem 0;
  font: inherit;
  font-size: var(--t-body);
  color: var(--c-blanc);
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  transition: border-color var(--dur-2) var(--ease);
}

.quick-form__control::placeholder { color: var(--fg-faint); }
.quick-form__control:hover { border-bottom-color: rgba(255, 255, 255, 0.55); }

.quick-form__control:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}

.quick-form__control:focus-visible {
  box-shadow: 0 1px 0 0 var(--accent);
}

select.quick-form__control {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

select.quick-form__control option { color: #000; }

textarea.quick-form__control {
  min-height: 7rem;
  resize: vertical;
}

.quick-form__field.is-invalid .quick-form__control {
  border-bottom-color: #c9775f;
}

.quick-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 0.4rem;
}

.quick-form__status {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-muted);
}

@media (max-width: 900px) {
  .invite__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .quick-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ================================== 9. À PROPOS — LE CHAPEAU ÉTALÉ (29-09-2026)
   Le chapeau d'À propos ne porte plus qu'un enfant depuis le 29-09-2026 : le
   texte de la maison, à la place de la phrase unique du §32. Les deux étiquettes
   « Conception et réalisation / Laurentides · Montréal · Estrie » ont été
   retirées le même jour, et le texte prend donc toute la largeur de la coquille :
   sans cela, il serait resté dans la première des deux colonnes de
   `.page-hero__foot` (la seconde, vide, aurait gardé sa moitié de page).

   Sur bureau, le texte se lit en deux blocs : la définition pleine largeur, puis
   les deux paragraphes longs côte à côte — le chapeau est moins haut et plus
   étalé, et aucun paragraphe n'est coupé. Le plafond de `.prose` (720 px,
   `--shell-text`) est levé pour la même raison : plus étroit que la moitié de la
   coquille, il réduirait l'étalement cherché. Celui de `.lede` (46 ch) est levé
   lui aussi, et à toutes les largeurs : sous 900 px, une définition à 46 ch
   coifferait deux paragraphes pleine largeur, soit deux mesures dans un même
   bloc.

   Une première version du 29-09-2026 coulait le texte en deux colonnes CSS
   (`columns: 2`) : le second paragraphe se coupait en deux au milieu d'une
   phrase (« … qu'il soit vaste / ou restreint … »). Le texte demandait des
   paragraphes entiers ; deux colonnes de grille les donnent, une par paragraphe.

   La classe modificatrice n'est portée que par cette page : `projets.html`
   garde son pied à deux colonnes et son étiquette. */
.page-hero__foot--prose {
  grid-template-columns: minmax(0, 1fr);
}

/* Le plafond de `.lede` (46 ch) tombe à toutes les largeurs : sous 900 px le
   chapeau se lit d'un seul tenant, et une définition à 46 ch coiffant deux
   paragraphes pleine largeur donnerait deux mesures dans le même bloc. */
.page-hero__foot--prose .lede {
  max-width: none;
}

@media (min-width: 900px) {
  .page-hero__foot--prose .prose {
    max-width: none;
  }

  /* Les deux paragraphes longs — 501 et 461 signes — se rangent côte à côte :
     deux colonnes de même largeur les équilibrent au signe près, et chacun
     reste entier. Une mise en colonnes CSS (`columns: 2`) aurait coupé le
     second en deux au milieu d'une phrase. */
  .prose--split .prose__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  /* Les deux paragraphes sont seuls dans leur colonne : la marge basse de
     `.prose p` n'y sépare plus rien, elle ne ferait que creuser le bloc. */
  .prose--split .prose__cols p {
    margin-bottom: 0;
  }
}

/* Le titre du chapeau tient en deux lignes au plus — « L'art vivant : un
   dialogue avec la nature et les saisons », 56 signes. `.page-hero__title`
   plafonne à 26 ch (790 px à 1440 px, la largeur d'une vingtaine de capitales
   de Cinzel), ce qui en demandait quatre. Le plafond est porté à 40 ch pour ce
   seul titre : « Réalisations. » (projets.html, la même classe) tient sur une
   ligne depuis toujours et n'est pas concerné. `text-wrap: balance` répartit
   les deux lignes au lieu de laisser la seconde presque vide.

   Le titre reste solidaire de la fenêtre : sous 768 px la taille descend avec
   la police (`--t-display-2`), et le titre repasse à trois lignes — c'est la
   seule façon de tenir deux lignes sur un téléphone, et elle demanderait un
   corps de 16 px, que la marque ne porte nulle part. */
.page-hero__title--wide {
  max-width: 40ch;
  text-wrap: balance;
}

/* ================================= 10. LE BOUTON DE L'EN-TÊTE (29-09-2026)
   La feuille des marques (05-brand) met tous les petits textes capitales d'une
   seule voix : corps 400, interlettrage de navigation. Le bouton de contact de
   l'en-tête a besoin d'un écart pour se distinguer des deux liens de section
   qui le précèdent — et c'est ici, dans la dernière couche, qu'il peut le
   déclarer : écrit dans 02-layout, son `font-weight` et son interlettrage
   étaient repris par 05-brand, qui passe après lui. La sonde du 29-09-2026 l'a
   montré avant que l'œil ne le voie : `graisse=400`, `interlettre=2.304px`,
   exactement ceux des liens voisins.

   Ce qui reste pour dire « ceci est un geste de contact », sans boîte et sans
   teinte — la palette est au noir et blanc purs : la graisse 600, l'interlettrage
   large des étiquettes, et la flèche du geste (`.site-nav__cta::after`, posée
   dans 02-layout) qui avance de 0,22 em au survol. Voir README §48. */
@media (min-width: 1180px) {
  .site-nav__cta {
    font-weight: 600;
    letter-spacing: var(--tracking-label);
  }
}

/* ============================ 11. UN CRAN DE GRAISSE SUR LE CINZEL (30-09-2026)
   Même demande, même jour, même mesure que le §10 : la maison trouvait la
   version de secours du site — un cran plus grasse — plus lisible que le
   Cinzel d'origine, et demandait « un bon équilibre ». Le cinzel passe donc de
   400 à 500, une seule fois, partout où il porte du texte : les grands titres
   (qui se rapprochent ainsi de la lettre de la plaque, plus contrastée que le
   400), l'étiquette de 11 px, les deux liens de la barre, les boutons, les
   repères de fiche, le pied de page. Aucune autre famille ne bouge : Cormorant
   Garamond garde ses 300 et ses 500 (les noms de projet), Jost passe de 300 à
   400 dans 01-base — c'est le seul autre cran.

   Deux exceptions, volontaires :
   — `.site-nav__cta` reste à 600 (sa graisse est sa seule marque avec la
     flèche, §10), donc il ne figure pas dans la liste ;
   — les italiques de Cormorant (`.craft__quote`, `.page-hero__title em`, les
     noms de projet `.tc__name`, `.work-card__title`, `.index-list__name`, déjà
     à 500) gardent leur graisse : ce sont elles qui donnent à la page son air
     de papier. Les GRANDS TITRES en Cinzel, eux, prennent le cran comme le
     reste — `.entry__title`, `.statement`, `.invite__title` sont dans la liste,
     et ils se rapprochent ainsi de la lettre de la plaque.

   Le crâne des titres est vérifié à la sonde (`tools\probe.ps1`), pas à l'œil :
   `graisse=500` sur `.nav-link`, `.label` et `h1`. Voir README §49.3. */
h1,
h2,
h3,
h4,
.u-display,
.label,
.label__index,
.btn,
.link-quiet,
.crumbs,
.nav-link,
.nav-toggle,
.nav-overlay__link,
.contact-list__k,
.pager__k,
.pager__v,
.footer__col-title,
.member__name,
.member__role,
.member__contact-title,
.page-hero__title,
.proj-hero__title,
.proj-hero__meta,
.work-card__meta,
.media-row__title,
.figure__caption b,
.index-list__meta,
.marquee__item,
.filter,
.work-card__badge,
.lightbox__meta,
.lightbox__close,
.entry__title,
.statement,
.invite__title,
.work-empty {
  font-weight: 500;
}