/* =============================================================================
   NABSEED · accueil. Complément à tokens.css et composants.css.
   Ne contient que ce que la page d'accueil ajoute : le carrousel, le fil lumineux,
   le sélecteur de langue, la barre d'avancement, la photo fine, les axes.
   Aucune couleur littérale : tout vient des jetons.
   ============================================================================= */

/* ------------------------------------------------- barre d'avancement, en-tête */
.avance{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
}
.entete{position:sticky;top:0}

/* ------------------------------------------------------ sélecteur de langue */
/* Une seule langue affichée. Le reste s'ouvre au clic : un menu qui montre tout
   en permanence est un menu qui n'a pas choisi. */
.langue{position:relative}
/* LE BOUTON DE REGISTRE prend exactement la voix du selecteur de langue : meme fonte,
   meme taille, meme interlettrage. Ce sont deux commandes de meme nature, elles ne
   doivent pas se distinguer l une de l autre. Il annonce la DESTINATION et non l etat :
   en sombre il propose « clair ». Un bouton dit ce qu il fait, pas ou l on se trouve. */
.registre{
  background:none;border:0;cursor:pointer;color:var(--fg2);padding:8px 10px;
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;line-height:1;
}
.registre:hover{color:var(--acc)}
.registre:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:760px){ .registre{min-height:44px} }

.langue button{
  background:none;border:0;cursor:pointer;color:var(--fg2);padding:8px 4px;
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  display:inline-flex;align-items:center;gap:7px;
  transition:color var(--d-court) var(--ease);
}
.langue button:hover{color:var(--fg)}
.langue button::after{
  content:"";width:5px;height:5px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform var(--d-court) var(--ease);
}
.langue button[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px)}
.langue ul{
  position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px 0;list-style:none;
  background:var(--bg);border:1px solid var(--filet-net);min-width:78px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--d-court) var(--ease),transform var(--d-court) var(--ease),visibility var(--d-court);
}
.langue[data-ouvert="true"] ul{opacity:1;visibility:visible;transform:none}
.langue li a{
  display:block;padding:7px 14px;font-family:var(--mono);font-size:var(--t9);
  letter-spacing:var(--ls-caps);color:var(--fg2);
  transition:color var(--d-court) var(--ease),background var(--d-court) var(--ease);
}
.langue li a:hover,.langue li a[aria-current]{color:var(--fg);background:var(--bg2)}

/* ---------------------------------------------------------------- carrousel */
.carrousel{position:relative;overflow:hidden;background:var(--bg)}
.piste{display:flex;transition:transform var(--d-lent) var(--ease);will-change:transform}
@media (prefers-reduced-motion:reduce){.piste{transition:none}}
.slide{
  flex:0 0 100%;min-height:88vh;min-height:88dvh;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sec) var(--pad) clamp(64px,10vh,110px);
}
.slide .fond{position:absolute;inset:0;overflow:hidden}
.slide .fond img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 7s linear}
.slide[data-actif="true"] .fond img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.slide .fond img{transform:none;transition:none}}
.slide .voile-img{
  position:absolute;inset:0;
  /* Le voile se regle sur l image la plus claire du jeu, pas sur la plus sombre.
     Sous 0,55 en bas, le titre en creme se noie dans le claustra. */
  background:linear-gradient(180deg,
    rgba(var(--s-bg-rgb),.58) 0%,
    rgba(var(--s-bg-rgb),.30) 30%,
    rgba(var(--s-bg-rgb),.62) 58%,
    rgba(var(--s-bg-rgb),.92) 100%);
}
.slide .dedans{position:relative;z-index:2;color:var(--s-fg);max-width:min(34ch,86%)}
@media(max-width:600px){.slide .dedans{max-width:100%}}
.slide .sur{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps-w);
  text-transform:uppercase;color:var(--s-fg2);margin:0 0 16px;
  opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s;
}
.slide h1,.slide h2{
  font-size:clamp(30px,4.6vw,58px);font-weight:300;line-height:1.02;letter-spacing:var(--ls-tight);
  margin:0 0 18px;color:var(--s-fg);
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .18s,transform .9s var(--ease) .18s;
}
.slide h1 em,.slide h2 em{font-style:normal;color:var(--s-acc);display:block}
.slide p{
  max-width:44ch;margin:0;color:var(--s-fg2);font-size:var(--t4);line-height:1.55;
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .3s,transform .9s var(--ease) .3s;
}
.slide[data-actif="true"] .sur,
.slide[data-actif="true"] h1,
.slide[data-actif="true"] h2,
.slide[data-actif="true"] p{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .slide .sur,.slide h1,.slide h2,.slide p{opacity:1;transform:none;transition:none}
}
/* Flèches discrètes, sans cadre. Un cadre serait une injonction. */
.fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:none;border:0;cursor:pointer;padding:18px;color:var(--s-fg);
  opacity:.5;transition:opacity var(--d-court) var(--ease);
}
.fleche:hover{opacity:1}
.fleche.g{left:max(6px,calc(var(--pad) - 30px))}
.fleche.d{right:max(6px,calc(var(--pad) - 30px))}
.fleche i{display:block;width:9px;height:9px;border-top:1px solid currentColor;
  border-right:1px solid currentColor}
.fleche.g i{transform:rotate(-135deg)}
.fleche.d i{transform:rotate(45deg)}
@media(max-width:760px){.fleche{display:none}}   /* au doigt sur mobile */
.puces{
  position:absolute;left:var(--pad);bottom:clamp(26px,4vh,42px);z-index:3;
  display:flex;gap:10px;
}
.puces button{
  width:26px;height:1px;background:var(--s-fg);opacity:.32;border:0;padding:0;cursor:pointer;
  transition:opacity var(--d-court) var(--ease);
}
.puces button[aria-current="true"]{opacity:1}

/* ------------------------------------------------------- le fil lumineux */
/* Un trait très fin, ambré, qui se déroule au défilement et se replie quand on
   remonte. Ce n'est pas un doré brillant : c'est une lumière, posée sur un trait
   d'un demi-pixel, avec une lueur douce et aucun aplat. */
.fil{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible;
}
.fil path{
  fill:none;stroke:var(--acc);stroke-width:.9;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(198,129,50,.55)) drop-shadow(0 0 9px rgba(198,129,50,.22));
}
.heritage{position:relative;overflow:hidden}
/* Le fil doit rester HORS de cette regle. Elle existe pour passer le contenu au dessus
   de lui ; appliquee au fil lui meme, elle le sortait du positionnement absolu et le
   rendait au flux. Un SVG en flux, avec viewBox 0 0 100 1000 et preserveAspectRatio:none,
   reclame dix fois sa largeur en hauteur : 14120 px, et la section montait a 17008 px.
   Meme specificite que .fil, declaree apres, donc elle gagnait. La page etait disloquee.
   La seconde regle verrouille le fil avec une specificite superieure : plus rien ne peut
   le remettre dans le flux par accident. */
.heritage>*:not(.fil){position:relative;z-index:1}
.heritage>.fil{position:absolute;inset:0;width:100%;height:100%;z-index:0}
@media (prefers-reduced-motion:reduce){.fil{display:none}}

/* --------------------------------------------------- alternance texte image */
.duo-alt{
  display:grid;gap:var(--gap);padding-inline:var(--pad);
  align-items:center;margin-bottom:clamp(40px,8vh,110px);
}
@media(min-width:900px){
  .duo-alt{grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
  .duo-alt.inv .texte{order:2}
  .duo-alt.inv .image{order:1}
}
.duo-alt .image img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo-alt .sur{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps-w);
  text-transform:uppercase;color:var(--acc);margin:0 0 14px;
}
.duo-alt h3{font-size:var(--t2);font-weight:300;line-height:1.1;
  letter-spacing:var(--ls-soft);margin:0 0 16px;max-width:15ch}
.duo-alt p{margin:0;color:var(--fg2);font-size:var(--t5);line-height:1.66;max-width:44ch}
.duo-alt .note{
  margin-top:18px;font-family:var(--mono);font-size:var(--t9);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg2);
}

/* ------------------------------------------------------ photo fine horizontale */
.bande{margin-block:clamp(30px,6vh,70px)}
.bande img{width:100%;height:clamp(170px,30vh,320px);object-fit:cover}

/* --------------------------------------------------------------- les axes */
.axes{
  display:grid;gap:0;padding-inline:var(--pad);
  border-top:1px solid var(--filet-net);
}
@media(min-width:760px){.axes{grid-template-columns:repeat(4,1fr)}}
.axe{padding:24px 0;border-bottom:1px solid var(--filet-faible)}
@media(min-width:760px){
  .axe{padding:28px clamp(14px,2vw,26px);border-bottom:0;
       border-right:1px solid var(--filet-faible)}
  .axe:first-child{padding-left:0}
  .axe:last-child{border-right:0;padding-right:0}
}
.axe b{display:block;font-family:var(--mono);font-weight:400;font-size:var(--t9);
  letter-spacing:var(--ls-caps-w);text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.axe span{display:block;font-size:var(--t5);color:var(--fg2);line-height:1.55}

/* ------------------------------------------------------------- les gammes */
.gammes{display:grid;gap:var(--gap);padding-inline:var(--pad)}
@media(min-width:760px){.gammes{grid-template-columns:repeat(3,1fr)}}
.gamme{display:flex;flex-direction:column}
.gamme .vue{overflow:hidden;margin-bottom:18px}
.gamme .vue img{width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform var(--d-lent) var(--ease)}
.gamme:hover .vue img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.gamme .vue img{transition:none}
  .gamme:hover .vue img{transform:none}}
.gamme .k{font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps-w);
  text-transform:uppercase;color:var(--acc);margin-bottom:9px}
.gamme h3{margin:0 0 6px;font-weight:400;font-size:var(--t3);letter-spacing:var(--ls-soft)}
.gamme .dispo{font-family:var(--mono);font-size:var(--t9);color:var(--fg2);
  letter-spacing:.06em;margin-bottom:10px}
.gamme p{margin:0;color:var(--fg2);font-size:var(--t7);line-height:1.62}

/* --------------------------------------------------------------- la preuve */
.preuves{display:grid;gap:var(--gap);padding-inline:var(--pad);margin-top:clamp(26px,5vh,54px)}
@media(min-width:760px){.preuves{grid-template-columns:repeat(3,1fr)}}
.preuve{border-top:1px solid var(--filet-net);padding-top:18px}
.preuve b{display:block;font-weight:400;font-size:var(--t5);margin-bottom:8px}
.preuve p{margin:0 0 12px;color:var(--fg2);font-size:var(--t7);line-height:1.6}
.preuve .etat{font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--fg2)}

/* =============================================================================
   LE BAS DE PAGE, repris le 18.09.2026.

   Mesure avant travaux : le carrousel porte trois images sur 719 px ; les trois
   dernieres sections, 1343 px ensemble, n en portent aucune. Le soin s arretait au
   premier ecran.
   ============================================================================= */

/* ------------------------------------------------- le bandeau photographique */
/* MUET, et c est voulu. Une image sans titre entre deux blocs de lecture donne la
   respiration qu aucun interlignage ne donne, et elle n invente aucun contenu. */
.bandeau{
  position:relative;overflow:hidden;background:var(--bg2,#e6dcc8);
  height:clamp(240px,52vh,560px);
}
.bandeau img{width:100%;height:100%;object-fit:cover;display:block}
/* un voile tres leger, pour que le bandeau ne crie pas plus fort que les sections */
.bandeau::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(36,27,22,.10),rgba(36,27,22,0) 26%,rgba(36,27,22,.14));
}

/* ------------------------------------------------------------ les axes */
/* Quatre colonnes de 28 px de haut ne font pas une section, elles font une ligne.
   On leur donne un numero, de la hauteur, et un filet qui les tient. */
.axes{border-top:1px solid var(--filet-net)}
.axe{position:relative;counter-increment:axe}
.axe::before{
  content:"0" counter(axe);
  display:block;font-family:var(--mono);font-size:var(--t8);
  letter-spacing:var(--ls-caps-w);color:var(--acc);margin-bottom:16px;
}
/* Sur le jeu sombre, un gris a 55 pour cent d opacite disparait : mesure au contraste,
   il tombait sous 2 pour 1. Le numero prend donc l accent, qui passe a 5,3 sur ce fond. */
.reg-b .axe::before{color:var(--acc)}

/* un filet vertical par axe, qui tient la colonne du haut en bas au lieu de la laisser
   flotter. C est ce qui manquait le plus : quatre textes alignes ne font pas quatre
   colonnes tant que rien ne les separe sur toute leur hauteur. */
@media (min-width:900px){
  .axe{border-right:1px solid var(--filet-faible)}
  .axe:last-child{border-right:0}
  .axe b{color:var(--fg);letter-spacing:var(--ls-caps-w)}
}
.axes{counter-reset:axe}
@media (min-width:900px){
  .axe{padding-block:clamp(34px,5vh,64px)}
  .axe b{font-size:var(--t9);margin-bottom:14px}
  .axe span{font-size:var(--t4);line-height:1.45;max-width:24ch}
}

/* --------------------------------------------------------- les preuves */
/* L etat flottait sous le texte. Il descend en pied de carte, aligne sur un filet :
   c est un registre, pas un paragraphe. Trois cartes de hauteurs differentes qui
   alignent leur derniere ligne se lisent d un coup d oeil. */
@media (min-width:900px){
  .preuve{display:flex;flex-direction:column;min-height:clamp(200px,26vh,280px)}
  .preuve b{font-size:var(--t3);line-height:1.15;margin-bottom:14px}
  .preuve p{flex:1 1 auto}
  .preuve .etat{
    margin-top:18px;padding-top:14px;
    border-top:1px solid var(--filet-faible);color:var(--acc);
  }
}