/* Les modules repris du site d'origine.
   ========================================================================
   Le triptyque des trois plans, les cinq objets qui tournent, le panorama des
   investissements et le globe des horloges. Leur balisage et leurs regles sont
   PRELEVES tels quels sur la version d'une seule page, et non reecrits : c'est
   cette interface-la qui est demandee, au pixel pres.

   Ils sont dans une feuille a part plutot que fondus dans `styles.css`. Deux
   raisons. La premiere, on voit d'un coup d'oeil ce qui est repris et ce qui
   est propre au multi-pages. La seconde, chaque page ne charge que ce dont elle
   a besoin, et une page sans module ne paie rien. */

/* Les jetons dont les modules repris ont besoin.
   ------------------------------------------------------------------------
   Ils viennent de la charte du site d'origine. Ceux qui existent des deux
   cotes ne sont PAS redeclares : les modules prennent alors les valeurs du
   site actuel, et c'est exactement ce qu'on veut d'un melange. Le bronze est
   remplace par l'accent de la page en cours, donc chaque branche colore ses
   modules avec sa propre couleur. */
:root {
  --panel: var(--surface);
  --ink-2: var(--muted);
  --ink-3: #7a766f;
  --bronze: var(--page-accent, var(--accent));
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(6rem, 14vw, 11rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Vocabulaire commun */

.kicker{
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Activités */

.triptych{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.panel{
  position: relative;
  overflow: hidden;
  height: clamp(28rem, 78vh, 52rem);
  background: var(--panel);
}

.panel img, .panel-film{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transform: scale(1.001);
  transition: opacity 1s var(--ease), transform 1.8s var(--ease);
}

.panel:hover img, .panel:hover .panel-film{
  opacity: 0.95;
  transform: scale(1.035);
}

.panel-title{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 12%;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 28px rgba(0, 0, 0, 0.7);
  transition: letter-spacing 1.2s var(--ease), text-indent 1.2s var(--ease);
}

.panel:hover .panel-title{
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

/* Les cinq services : de petits objets réels détourés, dans une bande
   soudée au bas de la photographie plutôt qu'une grille de cartes détachée */

.poles{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.pole{
  position: relative;
  padding: clamp(1.5rem, 2.2vw, 2.25rem) clamp(1rem, 1.6vw, 1.75rem) clamp(1.5rem, 2.2vw, 2rem);
}

.pole + .pole{
  border-left: 1px solid var(--line);
}

.pole-stage{
  --h: clamp(3rem, 4.4vw, 4rem);
  /* largeur réelle de l'objet, déduite de son rapport posé dans index.html :
     elle sert à caler le point de fuite exactement sur lui */
  --w: min(100%, calc(var(--obj, 2) * var(--h)));
  position: relative;
  height: var(--h);
  margin: 0 0 clamp(1rem, 1.6vw, 1.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  perspective: 620px;
  /* sans ça le point de fuite tombe au milieu de la case alors que les objets
     sont calés à gauche et n'ont pas la même largeur : chacun pencherait
     différemment, et la bande perdrait son unité */
  perspective-origin: calc(var(--w) / 2) 45%;
}

/* l'image seule : sans script, en mouvement réduit, et sur petit écran */

.pole-stage img{
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Le volume feuilleté, monté par script.js. Un détourage est une surface plate :
   de tranche il disparaît complètement. On empile donc la même image sur
   quelques degrés d'écart, si bien qu'au moment où un feuillet passe de profil
   ses voisins sont encore assez de face pour que l'objet garde une largeur. */

.pole-solid{
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--w);
  height: 100%;
  transform-style: preserve-3d;
}

.pole-stage .pole-solid img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: rotateY(var(--a));
}

/* seules les deux faces extérieures gardent la pleine lumière ; les feuillets
   intérieurs, assombris, se lisent comme l'épaisseur de l'objet */

.pole-stage .pole-solid img:not(:first-child):not(:last-child){
  filter: brightness(0.4);
}

.pole-index{
  margin: 0;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: rgba(214, 226, 240, 0.9);
}

.pole-title{
  margin: 0.5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
}

.pole-note{
  margin: 0.55rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-2);
}

.world{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter) var(--section);
}

.clocks{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
}

.clock{
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 1.5rem 0 0;
  appearance: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.5s var(--ease);
}

.clock:hover, .clock.is-active{
  border-top-color: var(--bronze);
}

.clock-face{
  width: clamp(5.5rem, 9vw, 7.5rem);
  height: auto;
  margin-bottom: 0.9rem;
}

.clock:hover .dial, .clock.is-active .dial{
  stroke: rgba(233, 229, 221, 0.5);
}

.clock-city{
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.5s var(--ease);
}

.clock:hover .clock-city, .clock.is-active .clock-city{
  color: var(--ink);
}

.clock-time{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.clock-offset{
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.world-hint{
  margin-top: 2.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.globe-wrap{
  position: relative;
  width: 100%;
  max-width: 38rem;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.globe{
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
.poles .pole-solid{
    animation: pole-turn 11s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-play-state: paused;
  }
.poles.is-turning .pole-solid{
    animation-play-state: running;
  }
}

@media (max-width: 1023px) {
.poles{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.pole:nth-child(n + 4){
    border-top: 1px solid var(--line);
  }
.pole:nth-child(4){
    border-left: 0;
  }
.world{
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }
.globe-wrap{
    order: -1;
    max-width: 32rem;
  }
}

@media (max-width: 767px) {
.triptych{
    grid-template-columns: 1fr;
  }
.panel{
    height: 62vh;
  }
.poles{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.pole:nth-child(odd){
    border-left: 0;
  }
.pole:last-child{
    grid-column: 1 / -1;
  }
.clocks{
    column-gap: 1.25rem;
  }
.clock-face{
    width: 5rem;
  }
.globe-wrap{
    max-width: 100%;
  }
}

/* Le volume réel, monté par poles3d.js. Le maillage vient de la photographie
   de l'objet lui-même, donc il tourne vraiment sur trois cent soixante degrés,
   ce qu'un détourage plat ne peut pas faire. La toile occupe toute la case :
   l'objet est cadré sur sa sphère englobante, sa taille apparente ne bouge donc
   pas pendant le tour, même quand le jet passe de face. */

.pole-toile{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* une fois le volume prêt, l'image plate s'efface ; elle reste dans le document
   comme repli si le maillage ne charge pas */

.pole-stage.a-volume > img{
  opacity: 0;
  transition: opacity 0.6s var(--ease, ease);
}

/* Le retour à l'image de repos passe par un fondu. Sans lui, le plan sautait
   d'un coup à son point de départ et la coupe se voyait beaucoup : c'est le
   même défaut que celui reproché aux boucles. Le panneau étant sombre, le plan
   traverse simplement le noir avant de revenir. */

.panel-film.revient{
  opacity: 0;
  transition: opacity 0.85s var(--ease);
}

/* Le globe au dessus, les villes en une seule ligne dessous.
   ------------------------------------------------------------------------
   La disposition héritée mettait les horloges à gauche et la sphère à droite.
   C'était juste dans un chapitre où le globe n'était qu'une illustration ; ici
   il EST le sujet, et deux colonnes le réduisaient à la moitié de la largeur
   pendant que la colonne des villes débordait de l'écran par le haut et par le
   bas, mesuré à mille quatre cents pixels de haut pour une fenêtre de neuf
   cents.

   Empilé, tout rentre et la hiérarchie se lit : la planète d'abord, les heures
   qu'elle porte ensuite. */

.world{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  padding: 0;
  row-gap: clamp(1.5rem, 3.5vh, 3rem);
  justify-items: stretch;
  align-content: center;
}

/* La sphère prend toute la place que la hauteur lui laisse, et elle est
   centrée sur l'axe de l'écran. C'est la hauteur qui la borne et non la
   largeur : les villes lui laissent un peu moins des deux tiers, la marge
   basse fait le reste. `margin-inline: auto` la recentre malgré
   `justify-items: stretch`, qui est là pour la rangée de villes. */

.globe-wrap{
  width: 100%;
  max-width: min(66vh, 46rem);
  margin-inline: auto;
}

/* Les villes sur une seule ligne. Autant de colonnes que de villes, donc la
   rangée reste une rangée quel que soit le nombre : ajouter une sixième ville
   ne demandera rien d'autre que de l'écrire dans le balisage. */

.clocks{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

/* À l'horizontale, chaque horloge est une colonne étroite : le cadran passe au
   dessus du nom au lieu d'être à côté, et tout est centré sur son axe. */

.clock{
  justify-items: center;
  padding-top: clamp(0.75rem, 1.6vh, 1.25rem);
  text-align: center;
}

.clock-face{
  width: clamp(2.25rem, 5.5vh, 3.5rem);
  height: auto;
}

@media (max-width: 900px) {
.globe-wrap{
    max-width: min(44vh, 24rem);
  }
.clocks{
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.clock:last-child{
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Les trois mots des panneaux d'activités
   ============================================================ */

/* Deux valeurs de .panel-title deviennent des variables. Les valeurs calculées
   restent identiques à l'existant : rien ne bouge à l'écran, et la ligne
   ajoutée dessous ne recopie aucun nombre. */

.panel-title{
  --coiffe: 12%;
  --mot: clamp(1.05rem, 1.5vw, 1.4rem);
  padding-top: var(--coiffe);
  font-size: var(--mot);
}

/* La ligne est sortie du flux et reconstruit la boîte du titre à l'identique,
   ce qui la centre exactement sur le mot, avant de descendre dessous.
   Passer le titre en colonne aurait recentré la colonne entière et fait
   remonter le mot principal de la moitié de la ligne ajoutée : le mot ne doit
   pas bouger d'un pixel.
   Le raccourci top: calc(50% + 12%) serait faux pour une raison moins visible :
   un padding en pourcentage se résout sur la largeur du bloc conteneur, un top
   en pourcentage sur sa hauteur. Les deux pour cent ne parlent pas de la même
   chose, et l'écart grandirait avec le format de l'écran. */

.panel-mot{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--coiffe);
  padding-inline: 1.25rem;
  /* demi-interligne du mot, plus l'air, plus sa propre demi-ligne */
  transform: translateY(calc(var(--mot) * 0.95 + 1.15rem));
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.2;
  /* redéclarés, sans quoi la ligne hérite du 0.42em du titre et suit son
     écartement jusqu'à 0.5em au survol. text-indent doit rester égal à
     letter-spacing : il compense l'espace que la dernière lettre traîne
     derrière elle, sans quoi un bloc centré penche vers la gauche. */
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ink-2);
  opacity: 0.72;
  transition: opacity 1.2s var(--ease);
}

.panel:hover .panel-mot{ opacity: 1; }

/* ============================================================
   Le panorama
   ============================================================ */

/* Trois vues du même domaine, mises bout à bout derrière une fenêtre plus
   étroite qu'elles. On tire dessus et le regard se déplace le long de la
   propriété. C'est le premier objet du site que le visiteur prend en main :
   partout ailleurs il ne peut que descendre. */

.pano{
  padding: var(--section) 0 0;
}

.pano-tete{
  padding: 0 var(--gutter) clamp(1.75rem, 4vw, 2.75rem);
}

.pano-ligne{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  color: var(--ink);
  max-width: 24ch;
}

/* La fenêtre est volontairement beaucoup plus étroite que la photographie.
   C'est tout le dispositif : à cette hauteur, l'image mesure près du double de
   la largeur du cadre, donc on n'en voit jamais qu'une part et le reste se
   gagne en tirant. Une fenêtre aussi large que l'image ne demanderait rien. */

.pano-cadre{
  position: relative;
  overflow: hidden;
  width: min(38vw, 30rem);
  margin: 0 auto;
  height: clamp(22rem, 68vh, 40rem);
  cursor: grab;
  /* le doigt doit pouvoir continuer à descendre la page : on ne lui prend que
     l'axe horizontal, celui que le panorama utilise réellement */
  touch-action: pan-y;
}

.pano-tenu .pano-cadre{
  cursor: grabbing;
}

.pano-bande{
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

/* `max-width: none` est indispensable : la règle générale du site plafonne
   toute image à la largeur de son parent, ce qui écraserait la bande à la
   largeur de la fenêtre et supprimerait précisément la course qu'on veut. */

.pano-bande img{
  flex: none;
  height: 100%;
  width: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* La couture entre deux vues. Un trait sombre d'un pixel suffit à dire qu'on
   change de point de vue et non de morceau d'une même photographie. */

.pano-bande img + img{
  border-left: 1px solid rgba(11, 11, 12, 0.55);
}

/* Les bords s'estompent : la bande n'a pas de fin visible, donc rien ne dit
   au regard qu'il est arrivé au bout d'une image posée dans une boîte. */

.pano-cadre::before, .pano-cadre::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1rem, 2.5vw, 2.25rem);
  pointer-events: none;
  z-index: 2;
}

.pano-cadre::before{
  left: 0;
  background: linear-gradient(90deg, var(--bg), rgba(11, 11, 12, 0));
}

.pano-cadre::after{
  right: 0;
  background: linear-gradient(270deg, var(--bg), rgba(11, 11, 12, 0));
}

@media (max-width: 767px) {
.pano-cadre{
    width: 78vw;
    height: 58vh;
  }
.pano-aide{
    font-size: 0.5625rem;
    letter-spacing: 0.24em;
  }
}

/* Trois colonnes, et les deux extremes ont la meme part : c'est la seule facon
   d'avoir la fenetre exactement au milieu de l'ecran. Avec une colonne de texte
   en `1fr` et un dessin en `auto`, la fenetre etait poussee de quatre cents
   pixels vers la droite, ce qui se voyait immediatement.

   La colonne du milieu est en `auto` : elle prend la largeur de la fenetre, ni
   plus ni moins, et les deux `1fr` se partagent le reste a egalite. */

/* La composition est bornée. Sans plafond, sur un écran très large les trois
   colonnes s'écartaient jusqu'aux bords et le bloc cessait d'être une
   composition pour devenir trois objets posés loin les uns des autres. Le
   plafond les tient ensemble, et l'ensemble reste centré dans la page. */

.pano-grille{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(2rem, 5vw, 7rem);
  max-width: 118rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.pano-texte{
  justify-self: center;
}

.pano-cadre{
  width: min(38vw, 37rem);
  margin: 0;
}

/* Les villes. Grandes, sans filet, sans puce, chacune dans sa teinte. Une liste
   de villes soulignées de traits ressemblait à un index ; posées en grand et
   sans ornement, elles se lisent comme une adresse. */

.villes{
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.ville{
  overflow: hidden;
}

.ville-nom{
  display: block;
  font-family: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 5.8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--teinte, var(--pierre));
}

/* La ville. Dix-huit volumes répartis sur quatre profondeurs, chacune dans sa
   teinte : la mer au fond, l'ardoise, la pierre d'ombre, la pierre devant. Le
   sable ne sert qu'aux étages et aux terrasses, là où la lumière rase.

   Aucun bâtiment d'arrière-plan ne pose le pied au sol : il émerge exactement
   à la hauteur du toit qui le masque. L'occlusion est donc dessinée dans la
   géométrie et non simulée par une superposition, ce qui est la seule façon
   pour un dessin au trait de tenir quand on l'agrandit.

   Le dessin porte ses propres règles de couleur et d'épaisseur dans une
   balise `style` interne, avec les variables du site et leur valeur de repli.
   On ne lui impose donc rien d'ici : une règle globale sur ses chemins
   écraserait les quatre teintes de plan, c'est à dire toute la profondeur. */

.skyline{
  width: clamp(10rem, 21vw, 25rem);
  height: auto;
  justify-self: center;
}

/* ---------- l'invitation ---------- */

/* Plus de plaque ni de cadre : une plaque posée sur une photographie est
   toujours une étiquette collée dessus. Il reste deux chevrons bronze, le mot
   entre eux, et un dégradé sombre très large qui monte du bas de l'image pour
   garantir la lisibilité sans qu'on voie de boîte. */

.pano-aide{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 4rem 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0), rgba(11, 11, 12, 0.72));
  font-size: 0.5625rem;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(233, 229, 221, 0.86);
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}

.pano-touche .pano-aide{
  opacity: 0;
}

.pano-aide::before{ content: "\2039"; }

.pano-aide::after{ content: "\203A"; }

/* Les deux chevrons respirent lentement vers l'extérieur : c'est le seul
   mouvement, et il suffit à dire l'axe du geste. */

.pano-aide::before, .pano-aide::after{
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--bronze);
  animation: pano-souffle 2.8s var(--ease) infinite;
}

.pano-aide::after{ animation-delay: 0.12s; }

.pano-aide::after{
  animation-name: pano-souffle-droite;
}

@media (prefers-reduced-motion: reduce) {
.pano-aide::before, .pano-aide::after{ animation: none; opacity: 0.8; }
}

@media (max-width: 1023px) {
.pano-grille{
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: clamp(2rem, 5vw, 3.5rem);
  }
.pano-cadre{
    grid-column: 1 / -1;
    grid-row: 2;
    width: min(72vw, 24rem);
    justify-self: center;
  }
}

@media (max-width: 767px) {
.pano-grille{
    column-gap: 1.25rem;
  }
.ville-nom{ font-size: clamp(1.75rem, 9.5vw, 2.75rem); }
.skyline{ width: 4.5rem; align-self: end; }
}

/* ============================================================
   L'éclat des villes
   ============================================================ */

/* Le nom ne se coupe jamais. La découpe en caractères fait de chaque lettre une
   boîte autonome, et le navigateur a donc le droit de passer à la ligne entre
   deux lettres : le « h » de Marrakech tombait tout seul sur la ligne suivante.
   Un nom propre ne se césure pas, encore moins entre deux lettres. */

.ville-nom{
  position: relative;
  white-space: nowrap;
}

/* Plus aucun masque CSS. Le fondu est cuit dans le fichier image lui-même :
   ses trente-quatre premiers pour cent partent de rgb(177, 176, 172), la
   couleur exacte du fond de la page, et rejoignent la photographie par une
   courbe en S. Ses dix derniers pour cent rejoignent le béton de la section.

   Pourquoi avoir abandonné le masque. Un masque en dégradé dépend du
   compositage du navigateur, et ce compositage s'est révélé non fiable ici :
   deux masques combinés n'étaient pas honorés, et même seul le raccord haut
   restait visible à la jonction avec la voûte, alors qu'il était parfait plus
   bas. Un fondu cuit dans le fichier ne dépend de rien : la première ligne de
   l'image EST la couleur de la page, mesurée et vérifiée à la sortie de
   l'encodeur. Ce qui ne peut pas varier ne peut pas se voir.

   Le coût est de 188 ko au lieu de 175, et la version de 1200 pixels fait 63
   ko. C'est le prix d'un raccord qui tient partout. */

/* Les cinq services, sur le béton. Les filets et les textes passent en encre
   sombre : le contraste s'inverse avec le fond, sinon rien ne se lit. */

.concierge .pole{ border-color: rgba(28, 27, 25, 0.16); }

.concierge .pole-index{ color: rgba(28, 27, 25, 0.5); }

.concierge .pole-title{ color: var(--encre-claire); }

.concierge .pole-note{ color: var(--encre-claire-2); }

/* Les cinq objets avaient reçu un relevé des basses lumières pour tenir sur le
   fond noir du site : sans lui, une berline noire sur du noir perdait la moitié
   de sa surface, ce qui avait été mesuré à quarante-six pour cent de pixels
   lisibles. Sur le béton clair de ce chapitre, ce relevé joue contre eux et les
   délave. On le compense ici, et seulement ici, plutôt que de retoucher les
   fichiers : le traitement d'origine reste juste partout ailleurs. */

.concierge .pole-stage img{
  filter: brightness(0.66) contrast(1.22) saturate(0.9);
}

/* ============================================================
   La bande des cinq services, sur le tarmac
   ============================================================ */

/* Même traitement que la photographie : plus de cadre, plus de filets, plus de
   colonnes. La grille à cinq colonnes séparées par des traits verticaux faisait
   un tableau, et un tableau n'a rien à faire sous une photographie dont on
   vient d'effacer les bords pour qu'elle appartienne à la page.

   Ce qui reste : le béton du tarmac, qui continue depuis la photographie, et
   cinq objets posés dessus. La continuité du sol fait tout le travail que les
   filets prétendaient faire. */

/* La bande ne porte plus aucun dégradé, et c'est tout le correctif.

   Elle en portait un, du béton vers le ciel sur soixante-huit pour cent de sa
   hauteur, soit deux cent soixante-douze pixels. Il était mathématiquement
   juste, la couture au bas de la photographie mesurait zéro, et il se voyait
   quand même : un passage de deux cent soixante-douze pixels ne se lit pas
   comme une couture, il se lit comme un fondu, et les cinq objets flottaient
   au milieu. Une incrustation ne se juge pas à la jonction, elle se juge à
   l'absence de zone de transition.

   Le passage est donc rentré dans la photographie, là où il est du sujet et
   non du fond : les vingt-quatre derniers pour cent de l'image se dissolvent
   dans la couleur de la page, en courbe en S, exactement comme les trente-deux
   premiers le font déjà avec le ciel. La dernière ligne du fichier EST la
   couleur de la page. Il n'y a donc plus rien à raccorder en dessous : le sol
   des cinq objets est uni.

   La lisibilité y gagne au passage. Le texte se lisait sur un fond variable
   entre 107 et 177 selon sa position ; il se lit maintenant sur 177 partout,
   et le rapport de contraste ne dépend plus de la hauteur de la bande. */

.concierge .poles{
  border-bottom: 0;
  column-gap: clamp(1rem, 2vw, 2.5rem);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  background: none;
}

.concierge .pole{
  padding: 0;
}

.concierge .pole + .pole{
  border-left: 0;
}

/* Les objets doublent de taille. À trois rem ils étaient des pictogrammes
   posés dans des cases ; à six, ce sont des véhicules garés sur un tarmac.
   C'est la même différence qu'entre une légende et une scène.

   Ils gardent leur ombre portée au sol : c'est elle qui les pose réellement
   sur le béton au lieu de les laisser flotter au dessus. */

.concierge .pole-stage{
  --h: clamp(4.5rem, 8vw, 7rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Une ombre unique, large et très douce, exactement sous l'objet. Sur le béton
   clair elle est indispensable : sans elle, un véhicule détouré sur un fond
   uni est une découpe collée, et cela se voit immédiatement. */

.concierge .pole-stage::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  width: var(--w, 70%);
  height: 0.9rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(28, 27, 25, 0.26), rgba(28, 27, 25, 0) 72%);
  pointer-events: none;
}

/* Le filet de séparation ne traverse plus toute la largeur : il commence sous
   le texte et s'arrête avec lui. Un filet qui traverse fait une ligne de
   tableau, un filet qui commence sous le texte fait une entrée d'index. */

.concierge .pole-index{
  padding-top: 0.9rem;
  border-top: 1px solid rgba(28, 27, 25, 0.18);
}

@media (max-width: 767px) {
.concierge .pole-stage{
    --h: 5.5rem;
  }
}

/* ============================================================
   La scène de la conciergerie
   ============================================================ */

/* Le bloc des investissements se fige quand on l'atteint : la descente s'arrête
   dessus, et ce qui continue de monter est la voûte, qui vient le recouvrir.
   C'est le dispositif le plus fort du site de référence, et il ne coûte pas une
   ligne de script : `position: sticky` le fait sur le fil du compositeur, donc
   sans à-coup et sans dépendre d'une bibliothèque.

   Il lui faut deux choses, et deux seulement. Une hauteur d'écran, sinon le
   collant s'accroche par le bas et le bloc glisse avant de se figer. Un fond
   opaque, sinon les sections déjà passées se verraient au travers pendant qu'il
   tient l'écran. */

.pano{
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--bg);
}

/* ============================================================
   Raccords entre les modules repris et le site qui les accueille
   ============================================================ */

/* Le globe est dessine en ivoire sur transparent : il disparait purement et
   simplement sur un fond clair, et le chapitre Presence est justement un aplat
   de la couleur de la page. Plutot que de le redessiner, on lui donne sa propre
   plaque sombre a l'interieur du bloc clair. C'est la solution que le site
   d'origine avait deja retenue dans son chapitre de jour : un planisphere de
   nuit pose sur une table de jour, ce qui est exactement ce que fait une
   conciergerie qui suit cinq fuseaux. */
.world-section .world {
  margin-top: clamp(40px, 6vw, 80px);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
  background: var(--bg);
  color: var(--ink);
  border-radius: 2px;
}

/* Les cinq objets ne forment plus une bande a part : ils ont pris la place des
   images fixes dans la grille des services. La grille garde donc sa structure,
   ses numeros et ses textes, et ce sont ses visuels qui prennent du volume.
   Deux rangees qui disent la meme chose, l'une avec des images plates et
   l'autre avec des objets qui tournent, n'auraient servi qu'a montrer qu'on
   avait colle deux sites l'un sur l'autre. */
.object-grid.poles {
  border-bottom: 0;
}

.object-grid.poles .pole-stage {
  --h: clamp(56px, 7vw, 96px);
  margin-bottom: clamp(18px, 2vw, 28px);
}

/* L'image d'origine de la grille est remplacee par la scene : on annule le
   dimensionnement que la grille lui imposait, sinon les feuillets empiles
   heritent d'une hauteur fixe et le volume s'aplatit. */
.object-grid.poles article > .pole-stage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Le panorama arrive dans une page qui n'a pas son chapitre collant. On lui
   rend une hauteur d'ecran et un fond, sinon il se serre sur la hauteur de son
   texte et la fenetre qu'on tire n'a plus de place pour s'ouvrir. */
.pano {
  position: relative;
  min-height: 100svh;
  background: var(--bg);
}