/* ===================================================================
   PAGE PROJET · la mise en page commune des neuf pages.

   Une page vit dans son univers dès la première image (html[data-univers]
   posé dans le HTML, pas par JS). Elle reprend la phrase en tête, en
   plus petit, puis parle dans la fonte du produit (--u-display) : titres
   de sections et h1. Le corps reste en Switzer, la voix de la maison.
   Le spécimen du hero est le même objet que sur la liste des phrases :
   il porte le nom de transition « specimen », la phrase « phrase ».
   =================================================================== */

/* la barre du haut : retour, repère, feuilletage, lien vers le produit.
   Elle colle au bord, s'efface quand on descend lire, revient dès qu'on
   remonte d'un cran (projet.js pose est-cachee / est-decollee), et porte
   son propre nom de transition : elle traverse le morphe sans renaître. */
.barre{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:1rem max(var(--marge),calc(50% - var(--large)/2 + var(--marge)));
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  view-transition-name:barre;
  transition:transform .38s cubic-bezier(.22,1,.36,1),background-color .3s ease,padding .3s ease;
}
.barre.est-decollee{
  padding-top:.65rem;padding-bottom:.65rem;
  background:color-mix(in srgb,var(--noir) 84%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.barre.est-cachee{transform:translateY(-101%)}
/* le fil de lecture : un filet ambré d'un pixel au ras du haut de l'écran,
   posé par projet.js hors de la barre pour rester visible quand elle se replie */
.fil-lecture{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:30;pointer-events:none;
  background:var(--ambre);transform:scaleX(var(--lu,0));transform-origin:0 50%;
}
/* Trois gestes muets, pas un mot : la porte a gauche (sortir), la paire de
   fleches au centre (feuilleter), l'envol a droite (voir le produit vivre).
   Les icones sont des SVG inline en currentColor, traits 1.5, la langue
   filaire des schemas de la maison. */
.barre a{color:var(--blanc);text-decoration:none;transition:color .25s ease}
.barre a:hover,.barre a:focus-visible{color:var(--ambre)}
.barre .ic{display:block;width:22px;height:22px}

/* la porte : le battant pivote vers l'interieur, la lumiere ambre de la
   liste des phrases apparait dans l'embrasure */
.barre .retour{position:relative;padding:.35rem}
.barre .retour .lumiere{fill:var(--ambre);stroke:none;opacity:0;transition:opacity .4s ease}
.barre .retour .battant{transform-origin:6.25px 12px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.barre .retour:hover .battant,.barre .retour:focus-visible .battant{transform:scaleX(.24)}
.barre .retour:hover .lumiere,.barre .retour:focus-visible .lumiere{opacity:.85}

/* les deux fleches, centrees dans la barre : des boutons carres filaires.
   Le survol les colore, le clic les enfonce, la fleche sort du cadre et
   revient de l'autre bord ; projet.js les aimante au curseur. */
.barre .feuillette{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:.6rem;
}
.barre .feuille{
  position:relative;border-radius:4px;
  display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border:1px solid color-mix(in srgb,var(--gris) 40%,transparent);color:var(--gris);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,color .3s ease,background-color .3s ease;
}
.barre .feuille:hover,.barre .feuille:focus-visible{
  border-color:var(--ambre);color:var(--ambre);
  background:color-mix(in srgb,var(--ambre) 8%,transparent);
}
.barre .feuille .coeur{display:grid;place-items:center;overflow:hidden;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.barre .feuille:active .coeur{transform:scale(.82)}
.barre .feuille:hover .ic{animation:fl-passe .45s cubic-bezier(.22,1,.36,1)}
.barre .feuille.suivant:hover .ic{animation-name:fl-passe-droite}
@keyframes fl-passe{
  0%{transform:none}49%{transform:translateX(-160%);opacity:0}
  50%{transform:translateX(160%);opacity:0}100%{transform:none}
}
@keyframes fl-passe-droite{
  0%{transform:none}49%{transform:translateX(160%);opacity:0}
  50%{transform:translateX(-160%);opacity:0}100%{transform:none}
}

/* l'envol : la fleche quitte le cadre par le coin ouvert et revient
   du coin oppose, le cadre ne bouge pas */
.barre .produit{position:relative;margin-left:auto;color:var(--ambre);padding:.35rem}
.barre .produit:hover .envol,.barre .produit:focus-visible .envol{animation:envol .5s cubic-bezier(.22,1,.36,1)}
@keyframes envol{
  0%{transform:none}49%{transform:translate(11px,-11px);opacity:0}
  50%{transform:translate(-11px,11px);opacity:0}100%{transform:none}
}
/* Les infobulles : au survol un peu long (delai .45s), une petite carte
   filaire sous le bouton nomme la destination et dit ce qui va se passer.
   Le filet ambre se tire en tete ; comme le survol d'une fleche pose deja
   data-univers-survol, les tokens ambre prennent la couleur de l'univers
   vise et la carte s'identifie toute seule. Alignees pour ne jamais sortir
   de l'ecran : a gauche sous la porte, centrees sous les fleches, a droite
   sous l'envol. Decoratives : l'aria-label des liens dit deja tout. */
.barre .infobulle{
  position:absolute;top:calc(100% + .7rem);left:50%;border-radius:4px;
  display:block;width:max-content;max-width:min(17rem,78vw);
  padding:.55rem .85rem .6rem;
  border:1px solid color-mix(in srgb,var(--blanc) 14%,transparent);
  background:color-mix(in srgb,var(--noir) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:.6rem;letter-spacing:.14em;line-height:1.5;color:var(--gris);
  text-transform:uppercase;text-align:left;white-space:normal;
  opacity:0;pointer-events:none;transform:translate(-50%,-6px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.barre .infobulle b{
  display:block;margin-bottom:.15rem;
  font-family:var(--display);font-weight:500;font-size:.74rem;
  letter-spacing:.06em;color:var(--blanc);
}
.barre .infobulle i{font-style:normal;display:block}
/* Le filet est devenu un compte a rebours : la ligne ambre parcourt tout
   le contour de la carte. La geometrie et la longueur du trait vivent
   dans projet.js (chemin arrondi au pixel, getTotalLength en dasharray et
   dashoffset inline : Safari normalise mal pathLength et tracait mal un
   rect pose en CSS). Ici seulement le trait et l'animation vers offset 0.
   Un tour complet arme la carte (est-armee : elle s'eclaircit et zoome
   d'un souffle) et projet.js compte le clic une demi-seconde apres.
   Ni tactile ni mouvement reduit : projet.js n'injecte alors rien.
   Le trace couvre la carte BORDURE COMPRISE (inset:-1px, et l'infobulle
   ne doit plus porter overflow:hidden) : cale sur le padding-box, les
   bords droit et bas du chemin tombaient hors du SVG et Safari rognait
   le tour apres la premiere horizontale. */
.barre .infobulle .trace{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none}
.barre .infobulle .trace path{
  fill:none;stroke:var(--ambre);stroke-width:1.5;stroke-linecap:square;
}
.barre a:hover .infobulle .trace path,.barre a:focus-visible .infobulle .trace path{
  animation:trace-tour 1.8s linear .6s forwards;
}
@keyframes trace-tour{to{stroke-dashoffset:0}}
.barre .infobulle.est-armee{
  border-color:var(--ambre);filter:brightness(1.35);
}
.barre a:hover>.infobulle,.barre a:focus-visible>.infobulle{
  opacity:1;transform:translate(-50%,0);transition-delay:.45s;
}
.barre a:hover>.infobulle.est-armee{transform:translate(-50%,0) scale(1.045)}
.barre .retour .infobulle{left:0;transform:translate(0,-6px)}
.barre .retour:hover .infobulle,.barre .retour:focus-visible .infobulle{transform:translate(0,0)}
.barre .produit .infobulle{left:auto;right:0;transform:translate(0,-6px)}
.barre .produit:hover .infobulle,.barre .produit:focus-visible .infobulle{transform:translate(0,0)}
.barre .retour:hover .infobulle.est-armee,.barre .produit:hover .infobulle.est-armee{transform:translate(0,0) scale(1.045)}

@media (prefers-reduced-motion: reduce){
  .barre,.barre a,.barre .feuille,.barre .feuille .coeur,.barre .retour .battant,.barre .infobulle{transition-duration:.001ms}
  .barre .feuille .ic,.barre .produit .envol{animation:none!important}
  .barre .retour:hover .battant{transform:none}
}

.page{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}

/* LE HERO · la phrase, le titre dans la voix du produit, le spécimen */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding:clamp(2.5rem,7vh,5.5rem) 0 clamp(2.5rem,6vh,4rem);
}
@media (min-width:64rem){
  .hero{grid-template-columns:minmax(0,1fr) clamp(22rem,38vw,34rem)}
}
.hero-tete{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin:0 0 1.4rem;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);
}
.hero-tete .n{font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--ambre);letter-spacing:.04em}
.hero-tete .etat{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.12em}
.hero-tete .etat::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ambre);box-shadow:0 0 0 4px color-mix(in srgb,var(--ambre) 16%,transparent)}
.hero-tete .etat.est-chantier::before{background:var(--gris);box-shadow:0 0 0 4px color-mix(in srgb,var(--gris) 14%,transparent)}

.hero-phrase{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(1.25rem,1rem + 1.4vw,2.05rem);line-height:1.15;letter-spacing:-.015em;
  text-wrap:pretty;max-width:28ch;color:var(--blanc);
  view-transition-name:phrase;
}
.hero-phrase .guill{color:var(--ambre);font-weight:400}
.hero-source{margin:.9rem 0 0;font-size:.875rem;color:var(--gris);font-style:italic}

.hero-titre{
  margin:clamp(1.6rem,4vh,2.6rem) 0 0;
  font-family:var(--u-display);font-weight:var(--u-poids,600);letter-spacing:var(--u-espace,-.02em);
  font-size:clamp(2.1rem,1.4rem + 3.2vw,4.2rem);line-height:1.02;text-wrap:balance;max-width:16ch;
  color:var(--blanc);
}
.hero-titre em{font-style:normal;color:var(--ambre)}
.hero-chapo{
  margin:1.4rem 0 0;max-width:54ch;color:var(--gris);
  font-size:clamp(1rem,.95rem + .3vw,1.1875rem);line-height:1.62;
}
.hero-chapo b{color:var(--blanc);font-weight:500}
.cta-rang{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin:1.8rem 0 0}
.cta-rang .lien{font-size:.9375rem}

.hero-specimen{margin:0;position:relative;view-transition-name:specimen}
.hero-specimen > figcaption{margin:.9rem 0 0;font-size:.8125rem;color:var(--gris);font-style:italic}

/* LE RÉCIT · sections à filet, titres dans la voix du produit */
.recit{padding:clamp(2.2rem,5vh,3.6rem) 0;border-top:1px solid var(--ligne)}
.recit h2{
  margin:0 0 1.2rem;max-width:26ch;
  font-family:var(--u-display);font-weight:var(--u-poids,600);letter-spacing:var(--u-espace,-.02em);
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.4rem);line-height:1.08;text-wrap:balance;color:var(--blanc);
}
.recit h3{margin:2.2rem 0 .7rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ambre);font-weight:600}
.recit p{margin:0 0 1rem;max-width:66ch;color:var(--blanc)}
.recit p.doux,.recit li.doux{color:var(--gris)}
.recit ul,.recit ol{margin:0 0 1rem;padding-left:1.1rem;max-width:66ch;color:var(--gris)}
.recit li{margin-bottom:.5rem}
.recit li b{color:var(--blanc);font-weight:500}
.resultat{border-left:2px solid var(--ambre);padding:.15rem 0 .15rem 1.1rem;font-size:1.0625rem;max-width:60ch}
.statut{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}

/* deux colonnes quand la largeur le permet : texte à gauche, objet à droite */
.colonnes{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (min-width:56rem){.colonnes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.colonnes > *{min-width:0}

/* un objet du produit posé au milieu du récit (spécimen secondaire) */
.objet{margin:1.6rem 0 0;max-width:34rem}
.objet > figcaption{margin:.8rem 0 1.4rem;font-size:.8125rem;color:var(--gris);font-style:italic}

/* les trois temps / les quatre étapes : une frise en boîtes.
   La spécificité doit battre `.recit ul, .recit ol` (largeur de lecture) :
   une frise occupe toute la page, pas la colonne de texte. */
.frise,.recit ul.frise,.recit ol.frise{display:grid;gap:1rem;margin:1.6rem 0 0;list-style:none;padding:0;max-width:none;color:inherit}
@media (min-width:56rem){.frise{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.frise li{border:1px solid var(--ligne);border-radius:6px;padding:1.1rem 1.2rem;background:color-mix(in srgb,var(--ambre) 3%,transparent)}
.frise .num{display:block;font-family:var(--display);font-weight:500;color:var(--ambre);font-size:.9rem;letter-spacing:.04em;margin-bottom:.6rem}
.frise b{display:block;font-weight:600;color:var(--blanc);margin-bottom:.35rem}
.frise p{margin:0;font-size:.9375rem;color:var(--gris)}

/* LE PIED · statut, puis les deux voisins, chacun dans sa lumière au survol */
.page-pied{border-top:1px solid var(--ligne);padding:2.2rem 0 4rem}
.page-pied .statut{display:block;margin-bottom:1.6rem}
.voisins{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:48rem){.voisins{grid-template-columns:1fr 1fr}}
/* Les cartes voisines parlent la langue de la barre : coins doux (4px,
   le degre d'arrondi de l'accueil, decision du 1er septembre), fleche
   dans un petit carre filaire qui sort du cadre et revient de l'autre bord
   (memes keyframes fl-passe), phrase qui glisse dans le sens du voyage,
   et le meme tour de contour qui vaut clic que les infobulles (chemin
   injecte par projet.js, memes regles : bordure comprise, pas
   d'overflow:hidden sur la carte). data-univers-survol posant deja
   l'univers vise, l'ambre de la carte prend sa couleur tout seul. */
.voisin{
  position:relative;display:block;text-decoration:none;color:var(--blanc);
  border:1px solid var(--ligne);border-radius:4px;padding:1.2rem 1.3rem;
  transition:border-color .3s ease,background-color var(--fondu),color var(--fondu),filter .3s ease,transform .3s ease;
}
.voisin:hover,.voisin:focus-visible{
  border-color:var(--ambre);
  background:color-mix(in srgb,var(--ambre) 5%,transparent);
}
.voisin .trace{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none}
.voisin .trace path{fill:none;stroke:var(--ambre);stroke-width:1.5;stroke-linecap:square}
.voisin:hover .trace path,.voisin:focus-visible .trace path{animation:trace-tour 1.8s linear .6s forwards}
.voisin.est-armee{border-color:var(--ambre);filter:brightness(1.25);transform:scale(1.015)}
.voisin small{
  display:flex;align-items:center;gap:.65rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
.voisin.suivant small{justify-content:flex-end}
.voisin .voisin-phrase{
  display:block;margin-top:.6rem;font-family:var(--display);font-weight:500;
  font-size:1.05rem;line-height:1.25;letter-spacing:-.01em;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.voisin:hover .voisin-phrase{transform:translateX(-4px)}
.voisin.suivant:hover .voisin-phrase{transform:translateX(4px)}
.voisin .voisin-phrase .guill{color:var(--ambre);font-weight:400}
.voisin.suivant{text-align:right}
.voisin .fl{
  display:inline-grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--gris) 40%,transparent);color:var(--ambre);
  overflow:hidden;transition:border-color .3s ease,background-color .3s ease;
}
.voisin .fl .ic{display:block;width:15px;height:15px}
.voisin:hover .fl,.voisin:focus-visible .fl{
  border-color:var(--ambre);
  background:color-mix(in srgb,var(--ambre) 8%,transparent);
}
.voisin:hover .fl .ic,.voisin:focus-visible .fl .ic{animation:fl-passe .45s cubic-bezier(.22,1,.36,1)}
.voisin.suivant:hover .fl .ic,.voisin.suivant:focus-visible .fl .ic{animation-name:fl-passe-droite}
@media (prefers-reduced-motion: reduce){
  .voisin:hover .voisin-phrase,.voisin.suivant:hover .voisin-phrase{transform:none}
  .voisin .fl .ic{animation:none!important}
}

/* LE RÉCIT REPLIÉ · sur tactile, chaque sous-partie (h3) ne montre que
   son titre, le corps s'ouvre au doigt (mécanique dans projet.js : le h3
   devient un bouton, ses frères suivants glissent dans un pli). Sans JS,
   rien n'est replié. Les frontières entre sections deviennent de l'espace
   vide, comme sur la liste des phrases (décision du 2 septembre). */
@media (hover: none) and (max-width:63.99rem){
  .recit{border-top:0;padding:clamp(2.6rem,7svh,4.2rem) 0}
  .page-pied{border-top:0;padding-top:1rem}
}
/* le titre-bouton : toute la ligne se touche, le petit carré filaire à
   droite parle la langue des feuilles de la barre ; le trait vertical du +
   s'efface quand c'est ouvert, il reste un moins */
.recit h3 .pli-titre{
  appearance:none;background:none;border:0;margin:0;padding:.2rem 0;
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  text-align:left;cursor:pointer;min-height:44px;
}
.pli-titre .carre{
  flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--gris) 40%,transparent);color:var(--ambre);
}
.pli-titre .carre .ic{display:block;width:15px;height:15px}
.pli-titre .carre .ic path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.pli-titre .carre .barre-v{transform-origin:center;transition:transform .3s ease}
.pli-titre[aria-expanded="true"] .carre .barre-v{transform:scaleY(0)}
/* le pli : une rangée de grille qui va de 0fr à 1fr, la seule façon
   d'animer une hauteur auto sans la mesurer */
.pli{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.pli>div{overflow:hidden;min-width:0}
.pli.est-ouvert{grid-template-rows:1fr}
@media (prefers-reduced-motion: reduce){
  .pli{transition-duration:.001ms}
  .pli-titre .carre .barre-v{transition-duration:.001ms}
}

/* petits écrans */
@media (max-width:47.99rem){
  .barre{gap:.8rem}
  .hero-tete .etat{flex-basis:100%}
  .hero-phrase{max-width:none}
  .jauges{gap:0 2rem}
  .jauge{flex:1 1 8rem}
}