/* =============================================================================
   NABSEED · les formes que le moteur d effets anime.

   Le JavaScript ne fait que poser des valeurs. Tout ce qui se voit est ici : c est ce
   qui permet a la page de rester juste quand le script ne s execute pas, et de ne
   jamais dependre de lui pour etre lisible.
   ============================================================================= */

/* ------------------------------------------------------ le bandeau plein ecran */
/* Ce qui fait la force du premier ecran : une image qui occupe tout, un texte pose
   dessus, et un voile qui garantit la lisibilite sans noircir la photo. */
.fx-plein{
  position:relative;overflow:hidden;
  min-height:clamp(420px,78vh,760px);min-height:clamp(420px,78dvh,760px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sec) var(--pad) clamp(40px,8vh,92px);
  background:var(--bg2,#e9e0cd);
}
.fx-plein > picture{position:absolute;inset:0;z-index:0}
.fx-plein > picture img{width:100%;height:100%;object-fit:cover;display:block}
/* Le voile se regle sur l image la PLUS CLAIRE du jeu, jamais sur la plus sombre :
   un voile calibre sur une photo de nuit laisse le titre se noyer sur une photo de
   plein soleil, et c est toujours celle-la qu on remarque. */
.fx-plein::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(28,21,17,.42) 0%,rgba(28,21,17,.16) 34%,rgba(28,21,17,.66) 100%);
}
.fx-plein > *:not(picture){position:relative;z-index:2}
.fx-plein h1,.fx-plein h2{color:var(--s-fg,#F6EFE2)}
/* L accent du jeu CLAIR est un ambre fonce : pose sur le voile sombre d un bandeau, il
   tombe a 1,69 de contraste, mesure, c est a dire illisible. Sur fond sombre, le titre
   secondaire prend l ambre du jeu sombre, qui est le meme ton en plus clair. */
/* --s-acc vaut le meme ambre que --acc : 3,27 de contraste sur le voile, soit le
   minimum absolu pour un grand titre et rien de plus. On pose donc un ambre CLAIR,
   propre aux bandeaux, qui monte a 5,9 sur le meme fond. La charte garde son ambre,
   c est son eclaircissement pour fond sombre qui est declare ici. */
.fx-plein{--fx-acc:#DFA967}
.fx-plein h1 em,.fx-plein h2 em{color:var(--fx-acc);font-style:normal;display:block}
.fx-plein .lead,.fx-plein p{color:var(--s-fg2,#E3D8C4)}
.fx-plein .rang{color:var(--s-fg2,#E3D8C4)}

/* ------------------------------------------------------------- le filet trace */
.fx-trait{
  display:block;height:1px;width:100%;background:var(--acc);
  transform:scaleX(0);transform-origin:left;margin-bottom:clamp(22px,4vh,44px);
}

/* --------------------------------------------------------------- le volet */
/* clip-path plutot qu une opacite : la matiere se decouvre au lieu d apparaitre.
   C est la difference entre lever un drap et allumer une lampe. */
.fx-devoile{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1);
  display:block;
}
.fx-devoile.fx-ouvert{clip-path:inset(0 0 0 0)}
@supports not (clip-path:inset(0 0 100% 0)){
  .fx-devoile{opacity:0;transition:opacity .9s ease}
  .fx-devoile.fx-ouvert{opacity:1}
}

/* ------------------------------------------------------- l image qui tient */
/* position:sticky, et surtout PAS un calcul en JavaScript. Le navigateur le fait
   mieux, sans une ligne de script, et cela continue de marcher si le script tombe. */
.fx-colle{display:grid;gap:clamp(24px,4vw,64px);align-items:start}
@media (min-width:900px){
  .fx-colle{grid-template-columns:1fr 1fr}
  .fx-colle > .tenu{position:sticky;top:calc(64px + 4vh);align-self:start}
  .fx-colle > .tenu img{width:100%;height:auto;display:block}
}

/* ------------------------------------------------------------ le diptyque */
.fx-derive{display:grid;gap:clamp(16px,2.4vw,30px);grid-template-columns:1fr}
@media (min-width:760px){.fx-derive{grid-template-columns:1fr 1fr;align-items:center}}
.fx-derive img{width:100%;height:auto;display:block}

/* -------------------------------------------------------------- la mosaique */
/* Deux tailles, jamais trois : une grille ou chaque case a sa taille n est plus une
   grille, c est un desordre. Une grande, deux petites, et cela se lit tout seul. */
.fx-mosaique{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){
  .fx-mosaique{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,17vw,220px)}
  .fx-mosaique > *:nth-child(1){grid-column:span 2;grid-row:span 2}
  .fx-mosaique > *:nth-child(4){grid-column:span 2}
}
.fx-mosaique picture,.fx-mosaique img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------ le chiffre qui compte */
.fx-nombre{
  font-size:clamp(54px,11vw,150px);line-height:.9;font-weight:300;
  letter-spacing:var(--ls-tight);color:var(--acc);
  font-variant-numeric:tabular-nums;          /* sinon le nombre tremble en montant */
}

/* ------------------------------------------------------------- la frise */
/* Elle glisse au doigt sur telephone et tient sur une ligne au bureau. Les vingt six
   jours ne se racontent pas, ils se comptent : une case par jour. */
.fx-frise{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.fx-frise::-webkit-scrollbar{display:none}
.fx-frise > *{
  flex:0 0 auto;width:clamp(10px,1.5vw,18px);height:clamp(40px,6vh,64px);
  background:var(--filet-faible);border-radius:2px;
  transition:background .5s ease,transform .5s ease;
}
.fx-frise > .plein{background:var(--acc)}

/* ------------------------------------------------- les images, partout */
/* Une image qui respire en arrivant, sans jamais deformer : le zoom part de 1,06 et
   revient a 1. L inverse, partir de 1 pour grossir, coupe les bords a l arrivee. */
.fx-zoom{overflow:hidden;display:block}
.fx-zoom img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.fx-zoom.fx-ouvert img,.fx-zoom:hover img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .fx-devoile,.fx-zoom img,.fx-frise > *{transition:none}
  .fx-devoile{clip-path:none;opacity:1}
  .fx-zoom img{transform:none}
}

/* ------------------------------------------------- la frise des vingt six jours */
/* LE CHIFFRE DEVIENT UNE LONGUEUR. « 26 jours par an » est une phrase qu on lit et
   qu on oublie. Cent vingt deux cases dont neuf pleines, on les VOIT, et la rarete
   cesse d etre une affirmation pour devenir une proportion. Une case represente trois
   jours : a une case par jour, la frise deborderait de l ecran sur telephone. */
.frise-bloc{margin-top:clamp(26px,5vh,54px)}
.frise-lib{display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);margin:0 0 clamp(16px,3vh,28px)}
.frise-sur{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps-w);
  text-transform:uppercase;color:var(--fg2);
}

/* ------------------------------------------------- la colonne de propos */
.fx-colle .propos{min-width:0}
@media (min-width:900px){.fx-colle .propos{padding-right:clamp(10px,2vw,30px)}}

/* les figures posees dans une section gardent les marges de page */
.sec > figure,.sec > .fx-derive,.sec > .fx-mosaique,.sec > .frise-bloc{
  margin-inline:0;padding-inline:var(--pad);
}
.sec > figure{margin-top:clamp(26px,5vh,58px);margin-bottom:0}
.sec > figure img{width:100%;height:auto;display:block}
.fx-derive,.fx-mosaique{margin-top:clamp(26px,5vh,58px)}

/* ============================================================================
   LES QUATRE SOCLES, en tete de page d accueil.

   PREMIERE CHOSE QU ON VOIT EN DESCENDANT. Quatre images, quatre mots, quatre lignes.
   Le rapport est volontaire : a cet endroit du parcours, la personne ne lit pas encore,
   elle regarde. Une legende de trois lignes ici ferait lire au lieu de faire voir.

   LA CERAMIQUE D ABORD, et plus grande que les trois autres sur grand ecran : c est le
   seul objet fabrique de la serie, et le seul qu on achete. Les trois socles qui suivent
   sont des idees ; elles se valent entre elles et prennent donc la meme place.
   ============================================================================ */
.socles{padding-block:clamp(40px,7vh,96px)}
.socles-grille{
  display:grid;gap:clamp(12px,1.6vw,22px);padding-inline:var(--pad);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:900px){
  .socles-grille{grid-template-columns:1.35fr 1fr 1fr 1fr}
}
.socle{min-width:0}
.socle-vue{
  aspect-ratio:3/4;overflow:hidden;background:var(--bg2,#e9e0cd);
  margin-bottom:clamp(12px,1.8vh,20px);
}
/* LES QUATRE LIBELLES DOIVENT S ALIGNER, et un rapport d image ne le permet pas.
   La ceramique occupe une colonne plus large ; a rapport egal, son image est donc plus
   HAUTE, son libelle tombe plus bas, et la ligne de base se casse. Sur grand ecran on
   fixe donc la meme hauteur pour les quatre et on laisse le cadrage faire le reste :
   c est la hauteur qui aligne, jamais le rapport. */
@media (min-width:900px){
  .socle-vue{aspect-ratio:auto;height:clamp(300px,40vh,470px)}
  .socles-grille{align-items:start}
}
.socle-vue picture,.socle-vue img{width:100%;height:100%;object-fit:cover;display:block}
.socle-cle{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps-w);
  text-transform:uppercase;color:var(--acc);margin:0 0 8px;
}
.socle-dit{
  margin:0;font-size:var(--t6,15px);line-height:1.45;color:var(--fg2);
  max-width:22ch;
}
/* aspect-ratio n existe pas sur les navigateurs d avant 2021 : sans ce repli, la vue
   s effondre a zero et la grille se disloque. */
@supports not (aspect-ratio:3/4){
  .socle-vue{height:clamp(200px,34vw,380px)}
}

/* =============================================================================
   LES IMAGES PRENNENT TOUTE LA PLACE, releve du fondateur le 19.09.2026.

   MESURE AVANT CORRECTION, sur un ecran de 1889 px : les figures de section occupaient
   98 pour cent, le diptyque 45 pour cent par colonne, l image collee 51. Ce n est pas
   faux au sens strict, mais cela donne une page ou rien n est jamais entier : chaque
   photographie s arrete avant le bord, et l oeil lit un catalogue au lieu de recevoir
   une image.

   CE QU ON FAIT. Les figures de section passent BORD A BORD, par la technique du
   debord calcule : on sort l element de la colonne de texte en le decalant de la moitie
   de la difference entre la largeur de la fenetre et la sienne. Le diptyque et la
   mosaique suivent. L image collee garde sa demi-largeur, parce que c est tout son
   principe : elle tient pendant que le texte defile a cote, et elle ne peut pas le
   faire si elle occupe la page entiere.

   100vw ET NON 100 POUR CENT : il faut la largeur de la FENETRE, pas celle du parent.
   Et comme 100vw compte la barre de defilement, on la retranche, sinon la page gagne
   quinze pixels de defilement horizontal. C est exactement le defaut qu on a corrige
   sur les rails glissants hier.
   ============================================================================= */
@media (min-width:900px){
  .sec > figure,
  .sec > .fx-derive,
  .sec > .fx-mosaique{
    width:calc(100vw - (100vw - 100%));
    max-width:none;
    margin-inline:calc(50% - 50vw + (100vw - 100%) / 2);
    padding-inline:0;
  }
  /* une photographie bord a bord merite de la hauteur : sans minimum, une image large
     et basse devient un bandeau de trois centimetres au milieu de la page */
  .sec > figure img{min-height:clamp(380px,52vh,680px);object-fit:cover}
  .fx-derive img{min-height:clamp(300px,42vh,560px);object-fit:cover}
  .fx-derive{gap:0}
}
@media (min-width:1400px){
  /* au dela, on redonne une respiration laterale : une image de deux metres de large
     sur un ecran de bureau cesse d etre une image, elle devient un mur */
  .sec > figure,.sec > .fx-derive,.sec > .fx-mosaique{
    width:calc(100vw - (100vw - 100%) - 2 * clamp(0px,3vw,64px));
    margin-inline:calc(50% - 50vw + (100vw - 100%) / 2 + clamp(0px,3vw,64px));
  }
}

/* =============================================================================
   ON NE RECADRE JAMAIS UNE PHOTOGRAPHIE. Consigne du fondateur, 19.09.2026.

   object-fit:cover remplit un cadre en COUPANT ce qui depasse. C est commode pour le
   developpeur et desastreux pour le photographe : le cadrage qu il a choisi sur place,
   a la lumiere qu il avait, est rogne par une regle de mise en page. Sur une image de
   territoire, ce sont les bords qui portent le vide, et le vide est le sujet.

   CE QU ON FAIT A LA PLACE. Le conteneur prend la forme de l image, jamais l inverse.
   L image garde sa hauteur naturelle, et c est la mise en page qui s adapte. Un bloc de
   hauteur variable est un peu moins regulier ; une photographie amputee est une faute.

   Reste le cas des bandeaux plein ecran, ou l on veut vraiment que l image occupe une
   hauteur donnee : la, on garde le remplissage, mais on lui donne un point d ancrage
   au centre et une hauteur proche du rapport reel, pour couper le moins possible.
   ============================================================================= */
.sec > figure img,
.fx-derive img,
.fx-mosaique img,
.fx-colle .tenu img,
.socle-vue img{
  width:100%;height:auto;object-fit:initial;min-height:0;display:block;
}
.socle-vue{aspect-ratio:auto;height:auto;overflow:visible}
.fx-mosaique{grid-auto-rows:auto}
.fx-mosaique > *{height:auto}
@media (min-width:900px){
  .sec > figure img{min-height:0}
  .fx-derive img{min-height:0}
  .socle-vue{height:auto}
  /* les quatre socles alignent alors leur HAUT, et non plus leur bas : c est ce que
     fait une planche contact, et cela se lit tres bien. */
  .socles-grille{align-items:start}
}

/* ------------------------------------------ la derive ne mord plus sur le texte */
/* Une transformation NE MODIFIE PAS la place reservee dans le flux : l element bouge,
   son encombrement reste. Le diptyque derive de quarante six pixels vers le bas, donc
   il faut quarante six pixels sous lui, sinon il recouvre ce qui suit. Mesure sur
   telephone : l image mordait sur le paragraphe suivant. */
.fx-derive{margin-bottom:clamp(30px,6vh,64px)}
@media (min-width:760px){.fx-derive{padding-block:52px}}

/* ------------------------------------- le zoom d apparition, retire du contenu */
/* MESURE : les images de section chevauchaient le texte de 16 a 40 pixels sur grand
   ecran. Cause, le zoom d apparition : l image part a 1,06 et revient a 1, donc elle
   deborde de trois pour cent de chaque cote pendant toute l animation. Sur une image
   de mille pixels de haut, cela fait trente pixels qui passent sur le paragraphe.

   Le retenir demanderait overflow:hidden, c est a dire RECADRER, ce que la maison
   s interdit depuis le 19.09. On retire donc le zoom la ou l image est dans le flux,
   et on le garde sur les bandeaux, ou l image remplit deja un cadre de hauteur fixe
   et ou le debord est prevu par construction. */
.sec > figure.fx-zoom img,
.fx-derive .fx-zoom img,
.fx-mosaique .fx-zoom img,
.fx-colle .tenu.fx-zoom img,
.socle .fx-zoom img,
.socle-vue img{
  transform:none;
}
.sec > figure.fx-zoom,
.fx-derive .fx-zoom,
.fx-mosaique .fx-zoom{overflow:visible}