/* ===================================================================
   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, lien vers le produit */
.barre{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  max-width:var(--large);margin:0 auto;padding:1rem var(--marge);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
}
.barre a{color:var(--blanc);text-decoration:none;transition:color .25s ease}
.barre a:hover{color:var(--ambre)}
.barre .retour::before{content:'\2190\00a0\00a0'}
.barre .repere b{color:var(--ambre);font-weight:600}
.barre .produit{margin-left:auto;color:var(--ambre)}
.barre .produit::after{content:'\00a0\2197'}

.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}}
.voisin{
  display:block;text-decoration:none;color:var(--blanc);
  border:1px solid var(--ligne);border-radius:6px;padding:1.2rem 1.3rem;
  transition:border-color .3s ease,background-color var(--fondu),color var(--fondu);
}
.voisin:hover,.voisin:focus-visible{border-color:var(--ambre)}
.voisin small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.voisin .voisin-phrase{display:block;margin-top:.55rem;font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.25;letter-spacing:-.01em}
.voisin .voisin-phrase .guill{color:var(--ambre);font-weight:400}
.voisin.suivant{text-align:right}
.voisin .fl{color:var(--ambre)}

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