/* Concept « Le trait » : la ligne du logo traverse la page */

/* Rideau d'ouverture : le logo se trace, le filet or se pose, le rideau se lève */
.rideau {
  position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 1.75rem;
  background: var(--nuit); color: var(--texte);
  animation: rideau-leve 1.1s var(--sortie) 2.5s forwards;
}
.rideau__marque { width: min(52vw, 22rem); overflow: visible; }
.rideau__maison { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rideau-trace 1.6s cubic-bezier(.65, 0, .35, 1) .2s forwards, rideau-remplit .7s var(--sortie) 1.45s forwards; }
.rideau__filet { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: rideau-filet .9s var(--sortie) 1.55s forwards; }
.rideau__devise { font-size: .6875rem; letter-spacing: .38em; text-transform: uppercase; color: var(--texte-doux); opacity: 0; animation: entree 1s var(--sortie) 1.9s forwards; }
@keyframes rideau-trace { to { stroke-dashoffset: 0; } }
@keyframes rideau-remplit { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes rideau-filet { to { transform: scaleX(1); } }
@keyframes rideau-leve { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.rideau.est-fini, .sans-rideau .rideau { display: none; }
.heros--trait .entree { animation-delay: calc(var(--i, 0) * 110ms + 2.75s); }
.sans-rideau .heros--trait .entree { animation-delay: calc(var(--i, 0) * 110ms + 150ms); }

/* Le trait */
.parcours { position: relative; }
.trait { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.trait path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trait__cordeau { stroke: rgba(8, 120, 136, .45); stroke-width: 1; stroke-dasharray: 2 7; }
.trait__ligne { stroke: var(--accent); stroke-width: 2; }

/* Héros */
.heros--trait { display: grid; align-items: center; }
.heros__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* « transformation, » est le mot le plus long : ~8,3 em, la taille suit la largeur de colonne */
.heros--trait h1 { font-size: clamp(2.2rem, 10vw, 4.6rem); max-width: none; }
@media (min-width: 64rem) { .heros--trait h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); } }

/* Diptyques avant / après, séparés par la fente où passe le trait */
.diptyque { --fente: clamp(2rem, 4vw, 3.5rem); position: relative; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--fente); }
.diptyque__volet { position: relative; }
.diptyque__volet img { width: 100%; aspect-ratio: 608 / 864; object-fit: cover; border-radius: var(--rayon); background: var(--anthracite); }
.diptyque__volet .capitales { display: block; margin-top: .9rem; color: var(--texte-doux); }
.diptyque__volet--apres .capitales { display: flex; align-items: center; gap: .6rem; color: var(--texte); }
.diptyque__volet--apres .capitales::before { content: ""; width: 1rem; height: 2px; background: var(--accent); }
.diptyque__volet:first-child img { filter: saturate(.75) brightness(.92); }
.diptyque figcaption { grid-column: 1; margin-top: 1.25rem; font-size: .875rem; line-height: 1.5; color: var(--acier); }
.diptyque--heros { max-width: 40rem; justify-self: end; width: 100%; }
.diptyque--heros .diptyque__volet--apres { transform: translateY(3.5rem); }
.diptyque--heros figcaption { margin-top: 1.25rem; max-width: 18rem; }
.js .diptyque__volet--apres img { clip-path: inset(0 0 var(--cache, 0%) 0); }

/* Projets */
.avant-apres { padding-block: clamp(6rem, 12vw, 10rem) 0; }
.projet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(4rem, 9vw, 8rem); }
.projet--inverse .projet__texte { order: 2; }
.projet__texte h3 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.25rem); font-weight: 200; letter-spacing: -.03em; line-height: 1.05; }
.projet__texte p { margin-top: 1.25rem; max-width: 40ch; color: var(--texte-doux); }

/* Métiers en rangs */
.metiers-liste { padding-block: clamp(5rem, 10vw, 8rem); }
.rangs { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--trait); }
.rang { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem 3rem; align-items: baseline; padding-block: clamp(1.25rem, 2.4vw, 2rem); border-bottom: 1px solid var(--trait); }
.rang::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--reflet); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--sortie); }
.rang h3 { font-size: clamp(1.6rem, 1rem + 2vw, 2.75rem); font-weight: 200; letter-spacing: -.02em; transition: transform .7s var(--sortie), color .4s; }
.rang p { color: var(--texte-doux); font-size: .9375rem; }

@media (max-width: 56rem) {
  .heros__grille { grid-template-columns: 1fr; }
  .diptyque--heros { justify-self: stretch; max-width: none; }
  .diptyque--heros .diptyque__volet--apres { transform: translateY(2rem); }
  .diptyque--heros figcaption { margin-top: 1rem; }
  .projet { grid-template-columns: 1fr; gap: 3rem; }
  .projet--inverse .projet__texte { order: 0; }
  .rang { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rideau { display: none; }
  .heros--trait .entree { animation-delay: 0s; }
}

@media (hover: hover) {
  .rang:hover::after { transform: scaleX(1); }
  .rang:hover h3 { transform: translateX(.75rem); color: var(--accent); }
}