/* ==========================================================================
   Pages prestations : blocs de section
   Les dispositifs propres a chaque page, tous bati sur les jetons definis
   dans prestation.css, qui doit donc etre charge avant celui-ci.
   ========================================================================== */

/* ==========================================================================
   Les matieres
   Une fiche d'atelier : a gauche la matiere, a droite ce qui l'abime et le
   geste qui repond. La ligne d'or se trace en tete de chaque rangee quand
   elle arrive a l'ecran, une seule fois, et c'est tout le mouvement.
   ========================================================================== */

.mat-l { display: grid; }

.mat {
  position: relative;
  display: grid;
  gap: clamp(14px, 2vh, 22px);
  padding-block: clamp(26px, 3.8vh, 42px);
  border-top: 1px solid var(--filet);
}

.mat-l .mat:last-child { border-bottom: 1px solid var(--filet); }

.mat::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ez);
}

.mat.on::before { transform: scaleX(1); }

.mat-n {
  font-family: var(--font-h);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--blanc);
}

.mat-c { display: grid; gap: clamp(14px, 2vh, 20px); align-content: start; }

.mat-b {
  font-family: var(--font-b);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

.mat-lbl {
  display: block;
  margin-bottom: 7px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.mat-b--geste .mat-lbl { color: var(--or); }

/* ==========================================================================
   Ce que cela change a bord
   ========================================================================== */

.pil-l { display: grid; gap: 0; }

.pil { padding: clamp(24px, 3.4vh, 34px) 0; border-top: 1px solid var(--filet); }
.pil-l .pil:last-child { border-bottom: 1px solid var(--filet); }

.pil-n {
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
}

.pil-p {
  margin-top: 13px;
  font-family: var(--font-b);
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

/* ==========================================================================
   Les ports
   ========================================================================== */

.ports {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(20px, 3vh, 30px);
}

.ports li {
  position: relative;
  padding-left: 18px;
  list-style: none;
  font-family: var(--font-h);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 400;
  color: var(--blanc);
}

.ports li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 9px;
  margin-top: -5px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

@media (min-width: 760px) {
  .mat { grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); }
  .mat-c { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); }
  .pil-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 76px); }
  .pil-l .pil:nth-last-child(-n+2) { border-bottom: 1px solid var(--filet); }
}

@media (prefers-reduced-motion: reduce) {
  .mat::before { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   Plaques au format 16/9
   La galerie impose le panoramique 2,16:1 de ses propres photos. Les visuels
   de yacht et d'aviation sont en 16/9 : les recadrer leur couperait un
   cinquieme de hauteur, soit le pont ou le ciel selon le cliche.
   ========================================================================== */

.vl .plaque--large .plaque-cadre img { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Protocole de confidentialite
   Sur la page aviation, c'est l'argument qui decide : un proprietaire de jet
   achete d'abord du silence. Le bloc est traite comme une clause, sobre et
   dense, sans effet. C'est la retenue qui le rend credible.
   ========================================================================== */

.conf {
  position: relative;
  padding: clamp(32px, 4.6vw, 54px) clamp(24px, 3.4vw, 46px);
  background: var(--noir-profond);
  border: 1px solid var(--filet);
}

.conf::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--or);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s var(--ez);
}

.conf.on::before { transform: scaleY(1); }

.conf-t {
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
}

.conf-l { margin-top: clamp(24px, 3.4vh, 34px); display: grid; gap: clamp(20px, 2.8vh, 28px); }

.conf-i {
  padding-top: clamp(20px, 2.8vh, 26px);
  border-top: 1px solid var(--filet);
}

.conf-n {
  font-family: var(--font-h);
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--blanc);
}

.conf-p {
  margin-top: 11px;
  font-family: var(--font-b);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

@media (min-width: 760px) {
  .conf-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .conf::before { transform: scaleY(1); transition: none; }
}

/* ==========================================================================
   Une sequence
   La rotation d'une location, le deroule d'un audit : ce sont de vraies
   suites ordonnees, ou l'etape 3 depend de l'etape 2. C'est le seul cas ou
   la charte autorise des numeros, parce qu'ils portent une information et
   non une decoration. Le rail vertical se remplit quand la suite arrive a
   l'ecran.
   ========================================================================== */

.rot { position: relative; display: grid; gap: 0; }

.rot::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--filet);
}

.rot::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--or);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.6s var(--ez);
}

.rot.on::after { transform: scaleY(1); }

.rot-e {
  position: relative;
  padding: clamp(18px, 2.6vh, 26px) 0 clamp(18px, 2.6vh, 26px) 46px;
}

.rot-e::before {
  content: '';
  position: absolute;
  left: 6px;
  top: calc(clamp(18px, 2.6vh, 26px) + 5px);
  width: 13px;
  height: 15px;
  background: var(--noir);
  border: 1px solid var(--filet-fort);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background-color .5s var(--ez);
}

.rot.on .rot-e::before { background: var(--or); border-color: var(--or); }
.rot.on .rot-e:nth-child(2)::before { transition-delay: .18s; }
.rot.on .rot-e:nth-child(3)::before { transition-delay: .36s; }
.rot.on .rot-e:nth-child(4)::before { transition-delay: .54s; }
.rot.on .rot-e:nth-child(5)::before { transition-delay: .72s; }

.rot-n {
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--blanc);
}

.rot-p {
  margin-top: 9px;
  max-width: 62ch;
  font-family: var(--font-b);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

/* ==========================================================================
   Le numero d'un poste d'audit
   Sept postes notes sur dix dans le rapport remis au client : le numero est
   la reference du document, pas un ornement.
   ========================================================================== */

.niv-num {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-h);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--or);
}

.niv-note {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-b);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

@media (min-width: 640px) { .vl-niv--sept { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vl-niv--sept { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .rot::after { transform: scaleY(1); transition: none; }
  .rot .rot-e::before { background: var(--or); border-color: var(--or); transition: none; }
}

/* Les villes de ce bloc étaient de simples mots. Chacune ayant désormais sa
   page, elles deviennent des liens — c'est le maillage des prestations vers
   les localités, qui n'existait pas : soixante-quatre liens allaient des
   villes vers les prestations, aucun ne revenait. */
.ports li a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--ez), border-color .35s var(--ez);
}

.ports li a:hover,
.ports li a:focus-visible {
  color: var(--or);
  border-color: var(--or);
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ports li a { transition: none; }
}