/* ============ 00 · Ouverture : le monogramme s'écrit, puis s'ouvre comme un diaphragme sur le héros ============ */
.ouverture-voile,.ouverture-mono{display:none}
.ouverture .ouverture-voile{display:block;position:fixed;inset:0;z-index:60;background:var(--noir)}
.ouverture .ouverture-mono{display:block;position:fixed;left:50%;top:50%;z-index:61;width:min(26vmin,200px);height:auto;transform:translate(-50%,-50%);transform-origin:0 0;overflow:visible}
.ouverture:not(.scene) .entete{opacity:0}
.ouverture .entete .logo img{opacity:0}
.ouverture:not(.scene) .heros__media img,.ouverture:not(.scene) .heros__media video{transform:scale(1.12)}
.ouverture:not(.scene) .heros .ligne{transform:translateY(1.35em)}
.ouverture:not(.scene) .defiler{opacity:0}
.surtitre .ligne{transition-delay:.1s}.heros h1 .masque:nth-child(1) .ligne{transition-delay:.2s}.heros h1 .masque:nth-child(2) .ligne{transition-delay:.3s}
.defiler{transition-delay:.6s}
.heros__media img,.heros__media video{transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.entete{transition:opacity .6s,transform .45s cubic-bezier(.22,1,.36,1),background-color .35s,color .35s,height .35s}

/* ============ 01 · Héros : accroche descendue, sans point final ; rien du ruban dans le premier écran ============ */
.heros{position:relative;min-height:100vh;min-height:100svh;background:var(--noir);color:var(--creme);overflow:hidden;display:flex;flex-direction:column}
.heros__media,.heros__voile{position:absolute;inset:0}
.heros__media img,.heros__media video{width:100%;height:100%;object-fit:cover}
/* voile : sombre en haut pour l'en-tête, fondu au noir en bas pour souder le héros au ruban */
.heros__voile{background:linear-gradient(180deg,rgba(14,13,13,.78) 0%,rgba(14,13,13,.28) 26%,rgba(14,13,13,.3) 58%,rgba(20,19,19,.9) 90%,#141313 100%)}
.heros__bas{position:relative;z-index:2;margin-top:auto;display:flex;align-items:last baseline;justify-content:space-between;gap:24px;padding:0 var(--marge) clamp(72px, 48px + 5vw, 120px)}
.accroche{display:flex;flex-direction:column;gap:clamp(16px,13.77px + .571vw,22px)}
/* masque élargi : laisse passer jambages et accents, cache le texte tant qu'il est 1,35 em plus bas */
.masque{display:block;overflow:visible;clip-path:inset(-.25em -.2em -.25em -.2em)}
.ligne{display:block;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.surtitre{font:600 13px/1.2 var(--texte);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.heros h1{font:700 var(--h1)/.88 var(--titre);font-stretch:75%;letter-spacing:-.01em}
.heros h1 em{font-style:normal;color:var(--rouge)}
.defiler{display:inline-flex;align-items:baseline;gap:12px;font:600 13px/1.2 var(--texte);letter-spacing:.12em;text-transform:uppercase;transition:opacity .8s}
.defiler i{position:relative;display:inline-block;width:1px;height:44px;background:rgba(246,241,236,.35);overflow:hidden;align-self:flex-end}
.defiler i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--creme);animation:goutte 1.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes goutte{to{top:100%}}

/* ============ 02 · Ruban : il commence au bas du héros (sous le pli), soudé à lui par un coin noir ============ */
.ruban{position:relative;z-index:3;line-height:0;pointer-events:none}
.ruban svg{width:100%;height:auto;overflow:visible;display:block}
.ruban text{font-family:var(--titre);font-weight:600;font-stretch:80%;fill:var(--creme);letter-spacing:-.5px}
.ruban__mobile{display:none!important}

/* ============ 03 · À propos : épinglé ; étiquette à 164 px du haut (Two26), paragraphe +20 % ============ */
/* À propos : remonte sous le ruban (le bas du ruban est vide à droite) ; l'épinglage prend la hauteur du texte, pas de l'écran,
   pour que la galerie suive de près. Hauteur de la section posée par le script : hauteur du bloc + 1 200 px de course (700 au mobile) ; la phrase est entièrement noire à 80 % de la course. */
/* la scène remonte sous le ruban (transparent sous la bande) ; la formule place l'étiquette à --sec sous la bande, puis le script
   ajoute --apropos-air pour que l'écart au point le plus proche (souvent le début de la 1re ligne du paragraphe) vaille --sec ;
   l'écart vient de la géométrie du ruban (coefficients mesurés à l'encre à 900, 1000, 1280 et 1440 px ; ruban mobile : 390 et 600 px) */
.apropos{position:relative;height:calc(100vh + 1200px);margin-top:calc(var(--sec) - 100.3px - 14.07vw + var(--apropos-air, 0px))}
.apropos__pin{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;padding:110px var(--marge) 0}
.apropos .etiquette{font-size:21.6px;line-height:21.6px;text-align:center}
.apropos__phrase{max-width:1248px;margin-top:24px;font:600 var(--about)/var(--about-lh) var(--titre);font-stretch:80%;letter-spacing:-1px;text-align:center;color:var(--noir)}
.apropos__phrase .mot{display:inline-block;white-space:nowrap}
.apropos__phrase .car{display:inline-block}

/* ============ 04 · Galerie (padding 160, carrés de 500, écart 4, rayon 12) ============ */
.galerie{padding:var(--sec) 0 0;overflow:hidden;touch-action:pan-y;cursor:grab}
.galerie.tire{cursor:grabbing}
.galerie__piste{display:flex;gap:4px;width:max-content;align-items:center;will-change:transform;user-select:none}
.galerie__piste img{width:var(--gal);height:var(--gal);object-fit:cover;border-radius:12px;flex:none;pointer-events:none;transform-origin:center}

/* ============ 05 · Projets choisis (Two26 : étiquette 18 à gauche, titre centré 100/85, 40 px jusqu'à la grille) ============ */
.projets{padding:var(--sec) var(--marge) 0}
.projets__entete{position:relative;padding:0;margin-bottom:var(--e-3);display:flex;justify-content:center}
.projets__entete .etiquette{position:absolute;left:0;top:0}
.projets__entete .titre-section{text-align:center}
/* Relance : 2 lignes, capitales à interligne 1,04 (les accents de À CÔTÉ respirent) et interlettrage neutre ;
   le bouton prend la place du point final, juste "à côté" des histoires, flèche tournée vers la droite */
.relance{display:flex;justify-content:center;padding:var(--e-4) var(--marge) 0}
.relance__texte{font:600 var(--relance)/var(--relance-lh) var(--titre);font-stretch:80%;letter-spacing:-.01em;color:var(--rouge);text-align:center;text-wrap:balance}
.relance__l2{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.3em .26em}
.relance__texte .ligne{transform:translateY(1.35em);opacity:0;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .5s}
.relance__l2 .ligne{transition-delay:.12s}
.relance.vu .relance__texte .ligne{transform:none;opacity:1}
.relance__bouton{height:calc(var(--relance) * .7);padding:0 calc(var(--relance) * .06) 0 calc(var(--relance) * .3);gap:calc(var(--relance) * .14);font:500 clamp(13px, 11.5px + .4vw, 17px)/1 var(--texte);letter-spacing:0;text-transform:none;opacity:0;transform:translateX(-24px) scale(.6);transition:opacity .5s .55s,transform .7s .55s cubic-bezier(.34,1.56,.64,1)}
.relance__bouton .txt{padding-right:0;white-space:nowrap}
.relance__bouton .rond{width:calc(var(--relance) * .58);height:calc(var(--relance) * .58)}
.relance__bouton .rond .fleche-svg{width:42%;height:42%;transform:rotate(45deg)}
.relance__bouton:hover .rond{transform:translateX(4px)}
.relance.vu .relance__bouton{opacity:1;transform:none}

/* ============ 07 · Qui je suis ============ */
.qui{display:grid;grid-template-columns:453fr 910fr;gap:37px;padding:calc(var(--sec) - var(--svr-bas, 0px)) var(--marge) 0;align-items:start}
.qui__photo{border-radius:16px;overflow:hidden;aspect-ratio:453/613}
.qui__photo img{width:100%;height:100%;object-fit:cover}
.qui__texte{display:flex;flex-direction:column;gap:28px;padding-top:4px}
.qui .etiquette{color:var(--noir)}
.qui blockquote{margin:0;font:600 var(--h-moyen)/1.02 var(--titre);font-stretch:80%;letter-spacing:-.01em;color:var(--noir);max-width:880px}
.qui__bio{font:400 var(--corps)/var(--corps-lh) var(--texte);color:var(--encre);max-width:760px}
.qui__signature{display:flex;flex-direction:column;gap:4px;font:500 18px/1.4 var(--texte)}
.qui__signature span{color:var(--gris)}

/* ============ 08 · Le processus : épinglé, le défilement fait avancer les 12 semaines ;
   chaque barre pousse en noir puis passe au rouge, et son étape (titre, texte, filet) suit exactement sa barre ============ */
.processus{position:relative}
.processus__pin{padding:var(--sec) var(--marge)}
@media (min-width:768px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
  /* --proc-air est posé par le script : l'écart à l'encre vaut --sec au-dessus (après Qui je suis) et en dessous (avant le pied) */
  .processus{height:calc(100vh + 1500px + 2 * var(--proc-air, 64px));padding:var(--proc-air, 64px) 0}
  .processus__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:48px var(--marge)}
}
.processus h2{margin-bottom:0}
.processus__intro{margin-top:16px;max-width:620px;font:500 16px/25.6px var(--texte);color:var(--gris-texte)}
.calendrier{position:relative;height:clamp(220px, 32vh, 309px);margin-top:clamp(28px, 4vh, 63px)}
.calendrier__col{position:absolute;top:0;bottom:0;width:1px;background:var(--repere)}
.calendrier__axe{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font:600 12px/16px var(--texte);letter-spacing:.06em;text-transform:uppercase;color:var(--gris-repere)}
.calendrier__axe span:first-child{padding-left:8px}
.calendrier__axe span:last-child{padding-right:8px}
/* barre = un trait noir qui naît d'un point, s'étire derrière la tête de lecture, se pose avec un rebond,
   puis le rouge l'envahit de gauche à droite quand l'étape est finie */
.barre{position:absolute;height:14.9%;min-height:32px;transform-origin:0 50%;transition:opacity .35s,transform .5s cubic-bezier(.34,1.56,.64,1)}
/* survol : une étape et sa barre se répondent, les autres s'effacent */
.processus.vise .barre:not(.vise){opacity:.25}
.processus.vise .etapes li:not(.vise){opacity:.32}
.barre.vise{transform:translateY(-3px) scale(1.035)}
.etapes li{transition:opacity .35s}
.etapes li.vise h3{color:var(--rouge-fonce)}
.etapes .mot-m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.etapes .mot-i{display:inline-block;transform-origin:0 100%;opacity:0}
.barre__trait{position:absolute;left:0;top:0;height:100%;width:0;background:var(--noir);border-radius:999px;transform-origin:0 50%;overflow:hidden;opacity:0;will-change:width,transform}
.barre__rouge{position:absolute;inset:0;background:var(--rouge-fonce);clip-path:inset(0 100% 0 0)}
.barre__txt{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--creme-clair);font:600 16px/20px var(--texte);white-space:nowrap;opacity:0}
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:clamp(28px, 4vh, 65px) 0 0;list-style:none;padding:0}
.etapes li{position:relative;padding-top:22px}
/* filet de l'étape : piste grise, puis la longueur et la couleur de sa barre (noir, puis rouge à la pose) */
.etapes li::before,.etapes li::after{content:"";position:absolute;left:0;top:0;height:3px;border-radius:3px}
.etapes li::before{right:0;background:var(--repere)}
.etapes li::after{width:calc(var(--f, 0) * 100%);background:color-mix(in srgb, var(--rouge-fonce) calc(var(--k, 0) * 100%), var(--noir))}
/* calendrier : entre comme les cartes de Projets choisis (masque qui s'ouvre, plan incliné qui se redresse) */
.calendrier__carte{perspective:1200px}
.calendrier{transform-origin:50% 0;will-change:transform,clip-path}
/* titres d'étapes : lettres qui rebondissent à l'apparition et sautent au survol */
.etapes h3 .car{display:inline-block;transform-origin:50% 90%}
.etapes h3{cursor:default}
.etapes h3{font:600 var(--etape)/var(--etape-lh) var(--titre);font-stretch:80%;letter-spacing:-.01em;transition:color .3s;transform-origin:0 100%}
.etapes p{margin-top:15px;max-width:232px;font:500 14px/22.4px var(--texte);color:var(--gris-texte)}

@media (max-width:1100px){ .qui{grid-template-columns:1fr 1.4fr} }
@media (max-width:767px){
  .heros__bas{padding:0 var(--marge) 64px}
  .defiler{display:none}
  .heros h1{letter-spacing:-.5px;line-height:.94}
  .ruban__bureau{display:none!important}.ruban__mobile{display:block!important}
  .apropos{height:calc(100vh + 700px);margin-top:calc(var(--sec) - 68.6px - 25.24vw + var(--apropos-air, 0px))}
  .apropos__pin{padding:90px var(--marge) 0}
  .apropos .etiquette{font-size:18px;line-height:18px}
  .apropos__phrase{margin-top:16px;letter-spacing:-.5px}
  .projets__entete{flex-direction:column;align-items:flex-start;gap:var(--e-3)}
  .projets__entete .etiquette{position:static}
  .projets__entete .titre-section{text-align:left}
  .relance__bouton{height:48px;padding:0 4px 0 20px;font-size:15px}
  .relance__bouton .rond{width:40px;height:40px}
  .qui{grid-template-columns:1fr}
  .calendrier{height:236px;margin-top:40px}
  .calendrier__axe{font-size:10px;letter-spacing:.04em}
  .barre{height:40px}.barre__txt{left:10px;font-size:14px}
  .etapes{grid-template-columns:1fr 1fr;gap:32px 20px;margin-top:48px}
  .etapes p{margin-top:10px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .apropos{height:auto!important}.apropos__pin{position:relative;height:auto}
  .relance__texte .ligne,.relance__bouton{transform:none!important;opacity:1!important}
  .barre__trait{width:100%!important;opacity:1!important;transform:none!important;border-radius:3px!important}.barre__rouge{clip-path:none!important}.barre__txt{opacity:1!important}.etapes li{--f:1!important;--k:1!important}.etapes h3 .car,.etapes p,.etapes .mot-i{opacity:1!important;transform:none!important}
  .defiler i::after{display:none}
}
/* téléphone couché : le paragraphe ne tient pas dans 390 px de haut, on n'épingle pas */
@media (max-height:500px){.apropos{height:auto!important}.apropos__pin{position:relative;height:auto;padding-bottom:80px}}