/* =========================================================================
   Proposition B : « La galerie ».
   Grammaire reprise des references citees par le client, Alki et Ondarreta :
   la photographie occupe toute la largeur, la typographie se retire en graisse
   moyenne, les filets disparaissent presque, et c'est le vide qui separe les
   blocs. Meme identite que la proposition A, composition opposee.
   Ce fichier ne redefinit aucun jeton de base.css.
   ========================================================================= */

/* --- Premier ecran : la parole a gauche, la photographie a droite --------
   Le client a pose l'absence de fond sombre comme premiere consigne. Le titre
   ne se pose donc plus sur la photographie derriere un voile noir : il occupe
   sa propre colonne creme, et la photographie prend l'autre jusqu'au bord de
   l'ecran. Aucun voile nulle part sur cette proposition.                     */

.heros {
  display: grid;
  /* Trois colonnes et non deux. La premiere est la marge du rail : celle que
     .enveloppe laisse a gauche des que la fenetre depasse --largeur-max.

     Sans elle, le titre d'accueil se posait a 61 px pendant que le logotype,
     le pied de page et les sept autres pages se posaient a 274. Mesure le
     20 septembre 2026 sur une fenetre de 1920 px : 211 px d'ecart, visibles
     parce que le logotype est juste au-dessus du titre.

     Elle vaut zero tant que la fenetre est plus etroite que le rail : rien ne
     bouge en dessous de 1500 px, ou tout etait deja aligne.

     Le pourcentage est resolu ici sur la largeur de la page, et non en vw :
     vw compte la barre de defilement, ce qui aurait repose le titre quelques
     pixels a droite du logotype au lieu de dessous. */
  grid-template-columns:
    max(0px, (100% - var(--largeur-max)) / 2)
    minmax(0, 46fr)
    minmax(0, 54fr);
  align-items: stretch;
  min-height: calc(100dvh - var(--entete-h));
  background: var(--papier-2);
  /* Repere de la signature, posee dans l'angle inferieur droit. */
  position: relative;
}

.heros__dire {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--pas-3);
  padding: var(--pas-6) clamp(2rem, 5vw, 5rem) var(--pas-6) var(--gouttiere);
}

/* L'alignement optique du titre d'accueil.

   Une boite de texte ne commence pas ou commence son dessin : chaque lettre
   porte une approche a sa gauche. Posee sur la gouttiere, la boite du titre
   laisse donc son encre a trois pixels du bord, pendant que le sceau du
   logotype, le texte courant et les boutons s'y posent franchement. A ce
   corps-la, l'ecart se voit.

   La valeur est mesuree sur la fonte, pas estimee : Familjen Grotesk en
   graisse 500 donne au U une approche de 5 px pour 100 px de corps, soit
   0,05 em. En em et non en pixels, la correction suit les six paliers de
   taille du titre sans etre refaite.

   Elle vaut pour cette lettre et pour elle seule. Mesurees de la meme facon :
   S et O 0,02 em, M et L 0,06 em, A et V rien du tout. Une regle posee sur
   tous les titres en deporterait donc autant qu'elle en redresse. Si le
   premier mot du titre change, remesurer. */
.heros__titre {
  font-family: var(--f-titre);
  font-size: clamp(2.35rem, 4.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin-left: -0.05em;
  max-width: 15ch;
  text-wrap: balance;
}

.heros__intro {
  font-size: var(--t-grand);
  line-height: 1.42;
  max-width: 34ch;
  color: var(--encre-2);
}

.heros__media {
  grid-column: 3;
  position: relative;
  overflow: hidden;
}

/* La photographie est sortie du flux. Laissee dedans, c'est sa hauteur
   naturelle qui fixait celle de la rangee : un cliche en hauteur poussait le
   premier ecran bien au-dela de la fenetre, et il fallait defiler pour en voir
   le bas. Hors du flux, la rangee tient a la colonne de texte et a la hauteur
   de fenetre demandee plus haut, et l'image se recadre dedans. */
.heros__media picture {
  position: absolute;
  inset: 0;
  display: block;
}

.heros__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le defile du premier ecran.

   Rien a empiler : la regle ci-dessus pose deja chaque <picture> dans le meme
   cadre absolu. Une photographie qui arrive se pose donc sur la precedente, et
   il suffit de la faire paraitre.

   Elle parait par-dessus et non a la place : le script lui donne un etage
   superieur, la precedente reste opaque dessous. Un fondu croise ou les deux
   s'effacent ensemble laisserait voir le creme du fond au milieu du passage.

   La duree ne vient pas des deux valeurs de la charte. 180 ms est le temps
   d'un changement d'etat, 480 ms celui d'une entree ; le passage d'une
   photographie a l'autre n'est ni l'un ni l'autre. C'est un mouvement
   d'ambiance, que personne n'a demande et qui ne doit rien interrompre : a
   480 ms il se remarque comme un a-coup. */
.heros__media {
  --diapo-fondu: 900ms;
  /* Le defile empile ses photographies par z-index croissant. Sans contexte
     d'empilement ici, ces etages se comparent a ceux du premier ecran entier,
     ou la signature occupe le niveau 1 : des la deuxieme photographie, celle-ci
     passait devant « Limitless creativity. » et la faisait disparaitre. La
     pile est donc enfermee dans ce cadre, ou elle n'a affaire qu'a elle-meme. */
  isolation: isolate;
}

.heros__media picture {
  transition: opacity var(--diapo-fondu) var(--sortie);
}

/* L'etat de depart d'une photographie qui arrive. Le script le retire dans la
   foulee, ce qui declenche le fondu. Aucune photographie ne le porte au
   chargement : sans script, la premiere reste simplement visible. */
.heros__media picture[data-entre] {
  opacity: 0;
}

/* Mouvement reduit : le script ne demarre pas, et cette transition n'a donc
   personne a servir. La regle est tout de meme neutralisee, pour qu'un futur
   changement d'attribut ne rende pas le mouvement par la bande. */
@media (prefers-reduced-motion: reduce) {
  .heros__media picture {
    transition: none;
  }
}

/* Sur une colonne, la photographie du premier ecran tombait juste au-dessus de
   celle du premier chapitre : deux images bord a bord, sans rien pour dire ou
   l'une finit. Elle disparait donc, et le premier ecran se reduit a ce qu'il a
   a dire, la phrase et les deux boutons, sur son fond creme. La photographie du
   premier chapitre arrive juste apres, pleine largeur : le passage du creme a
   l'image marque la coupure a lui seul. */
@media (max-width: 899px) {
  .heros {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .heros__dire {
    /* La grille repasse a une seule colonne ci-dessus, mais la demande de
       colonne 2 posee pour le rail des grands ecrans survit a la media query :
       le navigateur cree alors une deuxieme colonne implicite et y envoie tout
       le texte, hors de l'ecran. On la relache ici. */
    grid-column: auto;
    padding: var(--pas-5) var(--gouttiere);
  }

  .heros__media {
    display: none;
  }
}

/* --- Chapitres metiers ---------------------------------------------------
   Photographie pleine largeur, intitule pose en dessous sur le fond du site.
   Rien n'est ecrit par-dessus l'image : la lisibilite ne depend donc plus de
   la photographie qu'on y mettra demain. Les fonds alternent blanc et creme
   pour que la suite se lise comme une sequence.                             */

.chapitre {
  background: var(--papier);
}

/* Les trois photographies sont assombries au repos et reprennent leur pleine
   lumiere sous le pointeur : le chapitre vise est le seul vivant des trois.
   Deux raisons a ce sens-la plutot qu'a l'inverse. Le survol se voit enfin,
   la ou un voile de creme pose sur une image claire ne deplacait presque rien.
   Et au repos, trois bandes sourdes laissent la parole au texte, qui est ce
   qui doit se lire en premier sur cette page. */
.chapitre__lien {
  display: block;
  text-decoration: none;
  transition: background-color 380ms var(--sortie);
}

.chapitre__lien:hover,
.chapitre__lien:focus-visible {
  background: var(--papier-2);
}

.chapitre--1 .chapitre__lien:hover,
.chapitre--1 .chapitre__lien:focus-visible {
  background: var(--papier-3);
}

.chapitre__lien picture {
  display: block;
  position: relative;
  overflow: hidden;
}

/* L'assombrissement se porte sur le voile et non sur l'image : un filtre pose
   sur la photographie ferait de chaque bande une couche a composer a part,
   alors qu'un aplat d'encre en fondu multiplie se peint en une passe.

   Deux voiles depuis le 30 octobre 2026, et non plus un seul. L'encre a elle
   seule calmait la bande sans la distinguer : a trente pour cent comme a
   quarante-cinq, un tapis rouge et une carrosserie jaune tiraient toujours
   l'oeil autant que les photographies en pleine couleur du reste de la page.
   Le second voile retire la moitie de la saturation : les trois bandes
   deviennent une famille, et la page cesse de paraitre chargee. Le fondu
   « saturation » plutot qu'un filtre, pour la meme raison qu'au-dessus. */
.chapitre__lien picture::after,
.chapitre__lien picture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--encre);
  transition: opacity 380ms var(--sortie);
  pointer-events: none;
}

.chapitre__lien picture::after {
  mix-blend-mode: multiply;
  opacity: 0.45;
}

.chapitre__lien picture::before {
  mix-blend-mode: saturation;
  opacity: 0.5;
}

/* Au survol les deux voiles partent ensemble : la bande visee retrouve sa
   pleine couleur, les deux autres restent sourdes. */
.chapitre__lien:hover picture::after,
.chapitre__lien:focus-visible picture::after,
.chapitre__lien:hover picture::before,
.chapitre__lien:focus-visible picture::before {
  opacity: 0;
}

/* Mouvement reduit : le changement de couleur reste, il porte l'information
   du survol, mais il devient immediat. */
@media (prefers-reduced-motion: reduce) {
  .chapitre__lien picture::after,
  .chapitre__lien picture::before {
    transition: none;
  }
}

.chapitre__lien img {
  width: 100%;
  height: clamp(16rem, 46vh, 28rem);
  object-fit: cover;
  transition: transform 900ms var(--sortie);
}

.chapitre--1 .chapitre__lien img {
  height: clamp(20rem, 58vh, 34rem);
}

.chapitre--1 {
  background: var(--papier-2);
}

.chapitre__dire {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pas-1) var(--pas-4);
  padding-block: var(--pas-3) var(--pas-4);
}

.chapitre__titre {
  font-family: var(--f-titre);
  font-size: clamp(1.7rem, 3.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--encre);
}

.chapitre__aller {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  border: 1px solid var(--encre);
  background: transparent;
  color: var(--encre);
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--duree-courte) var(--sortie),
    color var(--duree-courte) var(--sortie);
}

.chapitre__lien:hover .chapitre__aller {
  background: var(--encre);
  color: var(--papier);
}

.chapitre__lien:hover .chapitre__aller .icone {
  transform: translateX(3px);
}

.chapitre__aller .icone {
  transition: transform var(--duree-courte) var(--sortie);
}

.chapitre__lien:hover img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .chapitre__lien img {
    transition: none;
  }

  .chapitre__lien:hover img {
    transform: none;
  }
}

/* --- Blocs ---------------------------------------------------------------
   Le rembourrage des blocs porte seul la separation : aucune marge propre ne
   s'y ajoute, sans quoi les intervalles se cumulent.                        */

.bloc {
  padding-block: var(--pas-7);
}

.bloc--sable {
  background: var(--papier-2);
}

.bloc__tete {
  max-width: 34ch;
  margin-inline: 0 auto;
  margin-bottom: var(--pas-5);
}

.bloc__tete p {
  margin-top: var(--pas-2);
  color: var(--encre-2);
}

/* --- Grille de vignettes ------------------------------------------------
   Image en haut, intitule dessous, rien par-dessus la photographie.        */

.vignettes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pas-5) var(--gouttiere);
}


.vignettes figure {
  margin: 0;
}

.vignettes img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: opacity var(--duree) var(--sortie);
}

a.vignette {
  display: block;
  text-decoration: none;
}

a.vignette:hover img {
  opacity: 0.86;
}

.vignettes figcaption {
  padding-top: var(--pas-2);
}

.vignette__titre,
.vignette__texte {
  display: block;
}

.vignette__titre {
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.018em;
}

.vignette__texte {
  margin-top: var(--pas-1);
  font-size: var(--t-petit);
  color: var(--encre-2);
  max-width: 40ch;
}

@media (max-width: 899px) {
  .vignettes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .vignettes {
    grid-template-columns: 1fr;
  }
}

/* --- Bande photographique pleine largeur --------------------------------- */

.bande img {
  width: 100%;
  height: clamp(20rem, 66vh, 42rem);
  object-fit: cover;
}

/* Le sujet de la photographie se tient dans son tiers bas : un cadrage centre
   ne montrerait que le mur. */
.bande--bas img {
  object-position: center 78%;
}

/* --- Credit du fabricant sur ses photographies ---------------------------
   Les visuels du catalogue Ondarreta ne sont pas les notres. Le nom du
   fabricant reste donc lisible sur chaque image ou il apparait, discret mais
   jamais absent. Pose sur une etiquette de papier et non en encre nue : ces
   photographies vont du beton blanc au mur de pierre sombre, et un texte pose
   a meme l'image disparait sur la moitie d'entre elles. */

.credite {
  position: relative;
}

.credite::after {
  content: attr(data-credit);
  position: absolute;
  right: var(--pas-2);
  bottom: var(--pas-2);
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-2);
  background: var(--papier);
  padding: 0.3em 0.5em;
  opacity: 0.85;
  pointer-events: none;
}

/* --- Duo texte et image -------------------------------------------------
   Employe au plus deux fois par page : au-dela, l'alternance devient un tic. */

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pas-5) clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.duo__dire {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pas-3);
}

.duo__dire p {
  color: var(--encre-2);
  max-width: 44ch;
}

.duo img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.duo--inverse .duo__media {
  order: -1;
}

@media (max-width: 899px) {
  .duo {
    grid-template-columns: 1fr;
  }

  .duo--inverse .duo__media {
    order: 0;
  }

  .duo img {
    aspect-ratio: 3 / 2;
  }
}

/* --- Liste en deux colonnes --------------------------------------------- */

.paires {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pas-5) clamp(2rem, 6vw, 6rem);
}

.paires__titre {
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.018em;
  margin-bottom: var(--pas-2);
}

.paires p {
  color: var(--encre-2);
}

.paires--serre {
  gap: var(--pas-3) clamp(2rem, 6vw, 6rem);
}

.paires--serre li {
  padding-block: var(--pas-2);
  border-bottom: 1px solid var(--trait);
}

@media (max-width: 767px) {
  .paires,
  .paires--serre {
    grid-template-columns: 1fr;
  }
}

/* --- Conversion ---------------------------------------------------------- */

.appel {
  padding-block: var(--pas-7);
  text-align: center;
}

.appel__dire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pas-3);
  max-width: 44ch;
  margin-inline: auto;
}

.appel__dire p {
  color: var(--encre-2);
}

/* --- Signature du premier ecran ------------------------------------------
   Reprise de l'ancien site, qui portait cette formule sous chacune de ses
   trois versions. Elle se cale dans l'angle inferieur droit du premier ecran,
   ecrite en creme a meme la photographie.

   Reserve mesuree : sous le texte, le fond de l'image va de 0,00 a 0,61 de
   luminance, et le creme y donne 2,2 pour 1 en moyenne, 1,9 sur sa pire
   bande, quand un grand texte gras en demande 3. Le choix est assume, mais
   il tient a cette photographie : en changer demande de refaire la mesure.

   Sous 900 px la photographie ne s'affiche pas et le fond est deja creme :
   la signature y passe a l'encre, faute de quoi elle disparaitrait.        */

.signature {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 0 var(--gouttiere) var(--pas-4) 0;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-align: right;
  color: var(--papier-2);
  max-width: 12ch;
}

@media (max-width: 899px) {
  .signature {
    position: static;
    margin-left: auto;
    padding: 0 var(--gouttiere) var(--pas-5) 0;
    color: var(--encre);
  }
}

/* --- Entete de page interieure ------------------------------------------
   Une colonne etroite calee a gauche laissait les deux tiers de la largeur
   vides et l'entete flottait. Elle occupe maintenant la grille du site : le
   titre sur les sept premieres colonnes, la phrase d'accroche sur les quatre
   dernieres, alignee sur la derniere ligne du titre, et un filet ferme le
   bloc avant la photographie.                                              */

.tete-page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--pas-3) var(--gouttiere);
  align-items: end;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--pas-4);
}

/* Le filet porte sur la grille, pas sur la boite. Pose sur l'enveloppe, il
   traversait les gouttieres et depassait le titre des deux cotes. */
.tete-page::after {
  content: "";
  grid-column: 1 / -1;
  border-top: 1px solid var(--trait);
  margin-top: var(--pas-2);
}

.tete-page h1 {
  grid-column: 1 / span 7;
  font-size: clamp(2.4rem, 5.4vw, 4.75rem);
  line-height: 1.02;
}

.tete-page p {
  grid-column: 9 / span 4;
  font-size: var(--t-grand);
  line-height: 1.42;
  color: var(--encre-2);
  padding-bottom: 0.35em;
}

@media (max-width: 899px) {
  .tete-page {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tete-page h1,
  .tete-page p {
    grid-column: 1 / -1;
  }

  .tete-page p {
    padding-bottom: 0;
  }
}

/* --- Colonnes de contact ------------------------------------------------ */

.contact-b {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--pas-5) var(--gouttiere);
  padding-bottom: var(--pas-7);
  align-items: start;
}

/* Meme partage que la FAQ et les pages legales : quatre colonnes a gauche,
   huit a droite. Le formulaire tombe ainsi sur la grille du site au lieu de
   flotter entre deux colonnes. */
.contact-b__colonne {
  grid-column: 1 / span 4;
}

.contact-b__principal {
  grid-column: 5 / span 8;
}

.contact-b__bloc + .contact-b__bloc {
  margin-top: var(--pas-4);
}

.contact-b__titre {
  font-size: var(--t-etiquette);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: var(--pas-2);
}

.contact-b a[href^="tel"],
.contact-b a[href^="mailto"],
.contact-b .courriel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  border-bottom: 1px solid var(--trait-fort);
}

.contact-b a[href^="tel"]:hover,
.contact-b a[href^="mailto"]:hover {
  border-bottom-color: var(--encre);
}

@media (max-width: 899px) {
  .contact-b {
    grid-template-columns: 1fr;
  }

  .contact-b__colonne,
  .contact-b__principal {
    grid-column: 1 / -1;
  }
}

/* --- Page d'erreur ------------------------------------------------------- */

.erreur-bloc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--pas-3);
  min-height: calc(100dvh - var(--entete-h) - 14rem);
  padding-block: var(--pas-6);
}

/* --- Accrochage des realisations ----------------------------------------
   Moment signature de cette proposition. La piste avance d'elle-meme et
   s'arrete des que la souris ou le clavier l'atteint, pour qu'on puisse lire
   une legende ou suivre un lien. Meme mecanisme que le bandeau de marques,
   a une autre echelle : deux pistes identiques, la seconde neutralisee pour
   les lecteurs d'ecran.                                                     */

.defile--projets {
  --defile-ecart: var(--gouttiere);
  --defile-duree: 90s;
  --defile-fondu: 5rem;
}

.defile--projets .defile__item {
  width: clamp(17rem, 30vw, 28rem);
}

.defile__lien {
  display: block;
  text-decoration: none;
}

.defile--projets figure {
  margin: 0;
}

.defile__lien:hover img {
  opacity: 0.82;
}

/* La piste s'arrete deja au survol ; l'anneau de focus doit rester visible
   par-dessus le masque de degrade. */
.defile__lien:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

.defile--projets img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: opacity var(--duree) var(--sortie);
}

.defile--projets figcaption {
  padding-top: var(--pas-2);
}

@media (prefers-reduced-motion: reduce) {
  .defile--projets .defile__piste {
    gap: var(--gouttiere);
  }
}

/* --- Appel vers la page des realisations --------------------------------
   Ce lien etait un simple soulignement perdu sous la piste, alors qu'il porte
   le seul parcours interne important de la page. Il devient un bouton, centre
   sous l'accrochage.                                                        */

.accrochage__suite {
  display: flex;
  justify-content: center;
  padding-top: var(--pas-4);
}