/* =====================================================================
   PAGES SECONDAIRES · The Essential Lifestyle

   L'accueil est un film : tout son style vit dans son propre fichier, et
   rien n'y est réutilisable tel quel. Les pages de contenu partagent en
   revanche une seule feuille, servie et mise en cache une fois pour
   toutes les huit.

   Les valeurs ne sont pas reprises de `brand/BRAND_GUIDELINES.md` mais de
   `index.html`, qui en est l'application : le noir y est `#0C0C0C` et non
   `#0B0A09`. Un visiteur qui passe de l'accueil à une page d'univers ne
   doit pas traverser deux noirs différents. L'écart est signalé, il n'est
   pas inventé ici.
   ===================================================================== */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('/assets/fonts/Archivo-VF.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/BodoniModa-VF.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url('/assets/fonts/BodoniModa-Italic-VF.woff2') format('woff2')}

:root{
  --color-noir:#0C0C0C;
  --color-ivoire:#F4F1EC;
  --color-greige:#B8AC98;
  --color-noir-light:#1A1A1A;
  --color-gris-texte:#9E9E9E;
  --color-greige-light:#D4CBBD;
  --color-greige-dark:#9A8E7E;
  --color-ivoire-warm:#EDE8E0;
  --color-border-subtle:rgba(184,172,152,.2);

  --transition-fast:.2s ease;
  --transition-base:.3s ease;
  --ease-sortie:cubic-bezier(.23,1,.32,1);
  --ease-entree:cubic-bezier(.22,1,.36,1);

  --container:1200px;
  --pad:clamp(1.5rem,5vw,4rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  background:var(--color-noir);
  color:var(--color-ivoire);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-stretch:100%;
  font-weight:400;line-height:1.7;
  overflow-x:hidden;
}
::selection{background:var(--color-greige);color:var(--color-noir)}
a{color:var(--color-greige);text-decoration:none;transition:color var(--transition-fast)}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--color-ivoire)}}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--color-greige);outline-offset:3px}

/* La lueur de l'accueil, à l'identique : c'est elle qui empêche le noir de
   se lire comme un aplat de matériel informatique. */
.lueur{
  position:fixed;inset:-12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 42% at 16% 14%, color-mix(in srgb, var(--color-greige) 7%, transparent), transparent 68%),
    radial-gradient(52% 38% at 88% 82%, color-mix(in srgb, var(--color-greige) 4.5%, transparent), transparent 66%);
  will-change:transform;
  animation:derive 46s ease-in-out infinite alternate;
}
.lueur__grain{
  position:absolute;inset:0;opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes derive{from{transform:translate3d(0,0,0)}to{transform:translate3d(2.4%,-1.8%,0)}}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2.5vw,1.6rem) var(--pad);
  border-bottom:1px solid transparent;
  transition:background var(--transition-base),border-color var(--transition-base),backdrop-filter var(--transition-base);
}
.nav.scrolled{
  background:rgba(12,12,12,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border-subtle);
}
.brand{display:flex;align-items:center;gap:.85rem;flex:none}
.brand__mark{width:22px;height:22px;flex:none}
.brand__mark svg{width:100%;height:100%;display:block}
.brand__word{
  font-family:'Archivo',sans-serif;font-stretch:62%;
  font-size:.72rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--color-ivoire);white-space:nowrap;
}
.nav__links{display:flex;gap:clamp(1.2rem,2.6vw,2.4rem);align-items:center}
.nav__links a{
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.72rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:var(--color-greige);white-space:nowrap;
}
.nav__links a[aria-current="page"]{color:var(--color-ivoire)}
.nav__lang{
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-greige-dark);
  padding-left:clamp(1rem,2vw,1.6rem);
  border-left:1px solid var(--color-border-subtle);
}
@media (max-width:900px){
  .nav__links{gap:1rem}
  .nav__links a{font-size:.66rem;letter-spacing:.16em}
  .nav__mid{display:none}
}
/* Ces pages n'ont pas de menu déroulant : à trois entrées, elles n'en ont
   pas besoin. C'est le logotype qui cède la place, pas la navigation ;
   l'emblème continue de ramener à l'accueil. */
@media (max-width:700px){
  .brand__word{display:none}
  .nav__links{gap:.9rem}
  .nav__links a{font-size:.62rem;letter-spacing:.12em}
  .nav__lang{padding-left:.9rem}
}

/* ---------- Ouverture de page ----------
   Le texte s'assoit sur la marge, l'image tient le haut du cadre. L'axe
   central est réservé à l'accueil : ici il n'a rien à signifier. */
.ouverture{
  position:relative;z-index:1;
  padding:clamp(9rem,20vh,14rem) var(--pad) clamp(4rem,10vh,7rem);
}
.ouverture__inner{
  width:100%;max-width:var(--container);margin:0 auto;
  display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:end;
}
@media (min-width:900px){
  .ouverture__inner{grid-template-columns:1fr minmax(300px,.62fr)}
}
.rang{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:clamp(1.6rem,4vh,2.4rem);
}
.rang__num{
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.72rem;font-weight:400;letter-spacing:.24em;
  font-variant-numeric:tabular-nums;
  color:rgba(244,241,236,.38);
}
.rang__filet{height:1px;width:clamp(40px,8vw,88px);background:var(--color-greige);opacity:.5;flex:none}
.rang__label{
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--color-greige);
}
.titre-page{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--color-ivoire);
}
.titre-page em{font-style:italic;color:var(--color-greige-light)}
.intention{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-style:italic;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;
  color:var(--color-greige);
  margin-top:clamp(1.4rem,3.5vh,2.25rem);
  max-width:40ch;
}
.ouverture__image{position:relative;overflow:hidden}
.ouverture__image img{width:100%;height:auto;aspect-ratio:1024/1536;object-fit:cover}
/* Dégradé montant, jamais de caisson opaque. */
.ouverture__image::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,12,12,.72) 0%,rgba(12,12,12,0) 34%);
  pointer-events:none;
}

/* ---------- Sections ---------- */
.section{position:relative;z-index:1;padding:clamp(4rem,10vh,8rem) var(--pad)}
.section__inner{width:100%;max-width:var(--container);margin:0 auto}
.section--filet{border-top:1px solid var(--color-border-subtle)}
.eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(2rem,5vh,3rem)}
.eyebrow__rule{height:1px;width:clamp(40px,8vw,88px);background:var(--color-greige);opacity:.5;flex:none}
.eyebrow__label{
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--color-greige);
}
.titre-section{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.8rem,4vw,2.9rem);
  line-height:1.08;letter-spacing:-.018em;text-wrap:balance;
  color:var(--color-ivoire);
}
.titre-section em{font-style:italic;color:var(--color-greige-light)}

/* Texte courant : Bodoni, opsz figé à 14, graisse 500, mesure à 64 caractères. */
.texte-courant{
  font-family:'Bodoni Moda',Georgia,serif;
  font-variation-settings:'opsz' 14;
  font-weight:500;line-height:1.62;letter-spacing:0;
  font-size:clamp(1.03rem,1.19vw,1.1rem);
  color:var(--color-ivoire-warm);
  max-width:64ch;
  text-wrap:pretty;
}
.texte-courant p + p{margin-top:1.15rem}
.texte-courant em{font-style:italic;color:var(--color-ivoire)}

.duo{display:grid;gap:clamp(2rem,5vw,4rem)}
/* La ligne d'attaque d'un bloc en duo, sur le modèle de celle de clôture :
   Bodoni italique, greige, elle annonce ce que le texte courant détaille. */
.duo__lead{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.5;
  color:var(--color-greige);
  margin-bottom:clamp(1.2rem,3vh,1.7rem);
  max-width:42ch;text-wrap:balance;
}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}

/* ---------- Ce que nous coordonnons ---------- */
.prestations{list-style:none;display:grid;gap:0;margin-top:clamp(1rem,2vh,1.5rem)}
.prestations li{
  border-top:1px solid var(--color-border-subtle);
  padding:clamp(1.1rem,2.4vh,1.5rem) 0;
  display:grid;gap:.35rem;
}
.prestations li:last-child{border-bottom:1px solid var(--color-border-subtle)}
/* En pleine largeur, le nom et sa note se rangent en deux colonnes : la
   moitié droite restait vide pendant que la note tombait en veuve sur un
   seul mot. Le filet, lui, continue de traverser toute la mesure. */
@media (min-width:900px){
  .prestations li{
    grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    gap:clamp(1.5rem,4vw,3.5rem);align-items:baseline;
  }
}
.prestations__nom{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.25;letter-spacing:-.005em;
  color:var(--color-ivoire);
}
.prestations__note{
  font-family:'Bodoni Moda',Georgia,serif;font-variation-settings:'opsz' 14;font-weight:500;
  font-size:.98rem;line-height:1.55;
  color:rgba(244,241,236,.62);max-width:56ch;
  text-wrap:pretty;
}

/* ---------- Les questions ---------- */
/* Même charpente que les prestations : le libellé à gauche, le texte à
   droite, un filet entre chaque. La différence tient à ce qu'une réponse
   est du texte suivi et non une note : elle prend un peu plus de mesure,
   un interligne de lecture, et l'espacement vertical s'ouvre d'un cran
   pour que deux réponses longues ne se touchent pas. */
.questions{list-style:none;display:grid;gap:0;margin-top:clamp(1rem,2vh,1.5rem)}
.questions li{
  border-top:1px solid var(--color-border-subtle);
  padding:clamp(1.3rem,2.8vh,1.8rem) 0;
  display:grid;gap:.5rem;
}
.questions li:last-child{border-bottom:1px solid var(--color-border-subtle)}
@media (min-width:900px){
  .questions li{
    grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    gap:clamp(1.5rem,4vw,3.5rem);align-items:baseline;
  }
}
.questions__q{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.25;letter-spacing:-.005em;
  color:var(--color-ivoire);text-wrap:pretty;
}
.questions__r{
  font-family:'Bodoni Moda',Georgia,serif;font-variation-settings:'opsz' 14;font-weight:500;
  font-size:1rem;line-height:1.6;
  color:rgba(244,241,236,.62);max-width:62ch;
  text-wrap:pretty;
}

/* ---------- Les autres univers ---------- */
/* Les filets de la grille sont le fond qui transparaît dans les gouttières.
   Une case vide laissait donc voir un aplat clair : sur une page d'univers
   la liste en compte cinq, pas six. La dernière carte occupe la place qui
   reste, ce qui referme la grille quel que soit le nombre. */
.autres{list-style:none;display:grid;gap:1px;background:var(--color-border-subtle);border:1px solid var(--color-border-subtle)}
@media (min-width:640px) and (max-width:1023px){
  .autres{grid-template-columns:1fr 1fr}
  .autres li:last-child:nth-child(odd){grid-column:span 2}
}
@media (min-width:1024px){
  .autres{grid-template-columns:repeat(3,1fr)}
  .autres li:last-child:nth-child(3n+1){grid-column:span 3}
  .autres li:last-child:nth-child(3n+2){grid-column:span 2}
}
.autres a{
  display:block;height:100%;
  background:var(--color-noir);
  padding:clamp(1.4rem,3vw,2rem);
  transition:background var(--transition-base);
}
@media (hover:hover) and (pointer:fine){.autres a:hover{background:var(--color-noir-light)}}
.autres__num{
  display:block;
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.68rem;letter-spacing:.24em;font-variant-numeric:tabular-nums;
  color:rgba(244,241,236,.38);margin-bottom:.8rem;
}
.autres__nom{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.2;letter-spacing:-.008em;
  color:var(--color-ivoire);
}
.autres__note{
  font-family:'Bodoni Moda',Georgia,serif;font-variation-settings:'opsz' 14;font-weight:500;
  font-size:.95rem;line-height:1.5;color:rgba(244,241,236,.62);margin-top:.5rem;
}

/* ---------- Bouton ---------- */
.btn{
  position:relative;display:inline-block;overflow:hidden;
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.82rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding:.95rem 2.4rem;
  border:1px solid var(--color-greige);
  background:transparent;color:var(--color-ivoire);
  cursor:pointer;
  transition:color var(--transition-base);
}
.btn__fill{
  position:absolute;inset:0;z-index:-1;
  background:var(--color-greige);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .42s var(--ease-sortie);
}
.btn:active .btn__fill{transform:scaleY(1)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--color-noir)}
  .btn:hover .btn__fill{transform:scaleY(1)}
}

/* ---------- Clôture ---------- */
.cloture{text-align:left}
.cloture__titre{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;
  color:var(--color-ivoire);max-width:24ch;
}
.cloture__titre em{font-style:italic;color:var(--color-greige-light)}
.cloture__lead{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-style:italic;
  font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.5;
  color:var(--color-greige);margin-top:1.6rem;max-width:38ch;
}
.cloture__actions{margin-top:clamp(2.2rem,5vh,3.2rem)}
.cloture__coords{
  margin-top:clamp(2.5rem,6vh,4rem);
  display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.5rem);
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-gris-texte);
}

/* ---------- Pied de page ---------- */
.footer{
  position:relative;z-index:1;
  border-top:1px solid var(--color-border-subtle);
  padding:clamp(2.5rem,5vh,3.5rem) var(--pad);
}
.footer__inner{
  width:100%;max-width:var(--container);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);justify-content:space-between;
}
.footer__col{display:grid;gap:.55rem;align-content:start}
.footer__titre{
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(244,241,236,.38);margin-bottom:.35rem;
}
.footer__col a{
  font-family:'Archivo',sans-serif;font-stretch:100%;
  font-size:.82rem;letter-spacing:.02em;
  color:rgba(244,241,236,.62);
}
@media (hover:hover) and (pointer:fine){.footer__col a:hover{color:var(--color-ivoire)}}
.footer__bas{
  width:100%;max-width:var(--container);margin:clamp(2.5rem,5vh,3.5rem) auto 0;
  padding-top:clamp(1.5rem,3vh,2rem);
  border-top:1px solid var(--color-border-subtle);
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
}
.footer__brand{
  font-family:'Archivo',sans-serif;font-stretch:62%;
  font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--color-greige-dark);
}
.footer__note{
  font-family:'Archivo',sans-serif;font-stretch:78%;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-gris-texte);
}

/* ---------- Entrées ----------
   Montée de 18 px sous masque, 700 ms, courbe d'entrée de la maison. La
   cascade ne dépasse jamais trois rangs. Le masque n'existe que si le JS
   répond : sans lui, tout est déjà en place. */
.js [data-entree]{opacity:0;transform:translateY(18px)}
.js [data-entree].vu{opacity:1;transform:none;transition:opacity .7s var(--ease-entree),transform .7s var(--ease-entree)}
.js [data-entree][data-retard="1"].vu{transition-delay:.08s}
.js [data-entree][data-retard="2"].vu{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lueur{animation:none}
  .js [data-entree]{opacity:1;transform:none;transition:none}
}

/* ---------- La carte de membre ----------
   Elle remplace la photographie du hero d'adhésion. Dessinée et non
   photographiée : l'emblème est le SVG de la charte, le logotype et le
   numéro sont du texte, au format du métier, 85 x 54 mm. Seule la matière
   vient d'une image, posée sous la gravure. Si elle ne charge pas, les
   dégradés tiennent le métal à eux seuls.

   La gravure est grise et non greige : le laser met l'acier à nu, il ne
   dépose pas de couleur. Le relief se joue sur deux ombres, une sombre sous
   le trait et une claire au-dessus. Jamais d'or, jamais de foil (§ 12 de la
   charte).

   Elle se manipule : deux faces réelles, rotation libre au glissé. Le verso
   est nu, comme celui qu'on fera graver. Détail du geste dans `page.js`. */
.ouverture__carte{position:relative;perspective:1400px}
.carte{
  position:relative;display:block;
  aspect-ratio:85/54;
  transform-style:preserve-3d;
  transform:rotateX(3deg) rotateY(-5deg);
  cursor:grab;
  /* Le doigt garde le défilement vertical de la page ; seul l'horizontal
     nous revient. Bloquer les deux axes rendrait la page collante au
     pouce, la carte occupant toute la largeur sur téléphone. */
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.carte--saisie{cursor:grabbing}
/* La couche GPU ne vit que pendant le geste et son inertie. */
.carte--vivante{will-change:transform}
.carte__face{
  position:absolute;inset:0;
  border-radius:clamp(5px,1vw,9px);
  overflow:hidden;
  backface-visibility:hidden;
  background:radial-gradient(130% 150% at 14% 4%,#232120 0%,#181716 36%,#0F0F0E 70%,#0A0A09 100%);
  box-shadow:
    0 0 0 1px rgba(205,203,199,.22),
    0 1px 0 rgba(244,241,236,.09) inset,
    0 34px 70px -24px rgba(0,0,0,.9);
}
/* Un demi-millimètre d'acier, à l'échelle de la carte. */
.carte__face--recto{transform:translateZ(1.2px)}
.carte__face--verso{transform:rotateY(180deg) translateZ(1.2px)}
.carte__matiere{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.92;
}
/* Le brossage du verso n'est pas celui du recto : la même image retournée
   suffit à le dire. Le retournement est vertical et non horizontal, pour
   que la zone claire du métal reste du côté opposé à la gravure. */
.carte__face--verso .carte__matiere{transform:scaleY(-1)}
.carte__lumiere{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 80% at 6% -4%,rgba(244,241,236,.10),transparent 58%),
    linear-gradient(145deg,rgba(244,241,236,.05) 0%,transparent 34%),
    linear-gradient(to bottom right,transparent 52%,rgba(0,0,0,.42) 100%);
}
.carte__filet{
  position:absolute;inset:clamp(6px,1.9%,11px);pointer-events:none;
  border:1px solid rgba(205,203,199,.22);
  border-radius:calc(clamp(5px,1vw,9px) - 2px);
}
.carte__grave{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1rem,5.2%,2.1rem);
}
.carte__embleme{width:clamp(26px,9%,40px);height:auto;display:block}
.carte__embleme path{stroke:rgba(205,203,199,.82);stroke-width:1.1;fill:none}
.carte__pied{display:grid;gap:clamp(.5rem,2.6%,.9rem)}
.carte__mot{
  font-family:'Archivo',sans-serif;font-stretch:62%;font-weight:500;
  font-size:clamp(.54rem,1.42vw,.74rem);
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(205,203,199,.74);
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 1px rgba(244,241,236,.05);
}
.carte__num{
  font-family:'Archivo',sans-serif;font-stretch:78%;font-weight:400;
  font-size:clamp(.5rem,1.24vw,.66rem);
  letter-spacing:.26em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:rgba(205,203,199,.56);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.carte__num sup{font-size:.72em;vertical-align:.42em;letter-spacing:0}
/* Le verso. Il porte le numéro à appeler, gravé lui aussi : une carte de
   conciergerie qui n'indique pas comment nous joindre est un bijou, pas un
   outil. Le numéro est en Bodoni, il est ce qu'on y cherche. */
.carte__mot--verso{color:rgba(205,203,199,.6)}
.carte__tel{
  font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(.95rem,3.1vw,1.5rem);line-height:1;letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;
  color:rgba(205,203,199,.86);
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 1px rgba(244,241,236,.05);
}
.carte__mail{
  font-family:'Archivo',sans-serif;font-stretch:78%;font-weight:400;
  font-size:clamp(.44rem,1.12vw,.6rem);
  letter-spacing:.12em;
  color:rgba(205,203,199,.62);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
/* Le balayage : une fois à l'arrivée. Jamais en boucle, une lumière qui
   repasse sans fin est une vitrine de centre commercial. Il se tait dès que
   la carte est prise en main, le reflet appartient alors au geste. */
.carte__reflet{
  position:absolute;inset:-30% -70%;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 40%,
    rgba(244,241,236,.09) 47%,
    rgba(244,241,236,.14) 50%,
    rgba(244,241,236,.04) 55%,
    transparent 63%);
  opacity:0;
}
.js .ouverture__carte.vu .carte__reflet{animation:balayage 2.1s var(--ease-sortie) .55s 1 both}
.carte--saisie .carte__reflet,.carte--vivante .carte__reflet{animation:none;opacity:0}
@keyframes balayage{
  0%{opacity:0;transform:translateX(-46%)}
  18%{opacity:1}
  82%{opacity:1}
  100%{opacity:0;transform:translateX(46%)}
}

/* ---------- Les douze ----------
   Douze repères, tous identiques : c'est un comptage, pas une jauge de
   remplissage. Aucun trait n'est « pris » et aucun n'est « libre », parce
   que le nombre de membres ne s'affiche pas. */
.douze{
  display:flex;align-items:center;flex-wrap:wrap;gap:clamp(.9rem,2.5vw,1.4rem);
  margin-top:clamp(1.8rem,4.5vh,2.6rem);
}
.douze__rangee{display:flex;align-items:flex-end;gap:10px;flex:none}
.douze__rangee i{
  display:block;width:1px;height:14px;
  background:var(--color-greige);opacity:.55;
  transform-origin:bottom;
}
.douze__label{
  font-family:'Archivo',sans-serif;font-stretch:78%;font-weight:500;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--color-greige);
}
.js .douze__rangee i{opacity:0;transform:scaleY(.35)}
.js .douze.vu .douze__rangee i{
  opacity:.55;transform:none;
  transition:opacity .45s var(--ease-entree),transform .45s var(--ease-entree);
  transition-delay:calc(var(--i) * 45ms + .2s);
}

@media (prefers-reduced-motion:reduce){
  /* La carte reste manipulable : c'est la main de celui qui lit qui la
     tourne, pas nous. Ce qui part, c'est tout ce qui bouge seul, le
     balayage, l'inertie et le rappel au repos, ce dernier étant coupé
     dans `page.js`. */
  .carte__reflet{display:none}
  .js .ouverture__carte.vu .carte__reflet{animation:none}
  .js .douze__rangee i{opacity:.55;transform:none;transition:none}
}