/* Pages individuelles (Approach, Services, About, Contact) + le rideau de transition entre pages. Jetons et composants de base dans site.css. */

/* le rideau : ivoire, monte du bas quand on quitte une page, continue de monter et découvre la suivante. Couvre au chargement des sous-pages
   (et de l'accueil seulement quand on y arrive par un lien : html.arriving, posé par un script en tête avant la première peinture). */
#curtain{position:fixed;inset:0;z-index:90;background:var(--ivory);color:var(--ink);clip-path:inset(0 0 100% 0);pointer-events:none;overflow:hidden}
body.page #curtain,html.arriving #curtain{clip-path:inset(0)}
.curtain-word{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(72px,14vw,240px);letter-spacing:-.02em;line-height:1;white-space:nowrap;will-change:transform,opacity}
.curtain-line{position:absolute;left:var(--gutter);bottom:9vh;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
html.arriving #loader{display:none}

/* haut de page d'une sous-page : le monde derrière, la statue à droite, le texte en bas à gauche (jamais devant le marbre) */
.p-hero{height:100vh;background:transparent;overflow:hidden}
.p-hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:11vh;max-width:780px}
.p-hero .h-giant{font-size:clamp(40px,6.6vw,112px)}
.p-hero .kicker,.p-hero .lead{opacity:0}
.p-hero .scroll-hint{position:absolute;right:var(--gutter);bottom:11vh;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:0}

/* corps : ivoire, encre, colonne de lecture */
.p-body{position:relative;z-index:2;background:var(--ivory);color:var(--ink);padding:14vh var(--gutter) 12vh}
.p-body+.p-body{padding-top:0}
.p-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw;align-items:start}
.p-grid>.sticky{position:sticky;top:14vh}
.p-body .h-big{font-size:clamp(28px,3.6vw,58px);font-weight:300}
.prose-big{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(22px,2.2vw,34px);line-height:1.3;letter-spacing:-.01em;max-width:900px}
.prose-big+.prose-big{margin-top:3vh}
.prose{font-size:clamp(16px,1.15vw,19px);line-height:1.65;color:var(--ink);max-width:620px}
.prose p+p{margin-top:2.2vh}
.muted{color:var(--muted)}
.rule{border:0;border-top:1px solid var(--line);margin:9vh 0}
.p-body .kicker{margin-bottom:3vh}
.p-body .btn-dark{margin-top:5vh}
.p-body .link{color:var(--ink)}

/* Approach : les six étapes, l'une sous l'autre, chacune avec son numéro en bronze */
.stepsx{counter-reset:s}
.stepsx li{display:grid;grid-template-columns:clamp(64px,8vw,120px) 1fr;gap:2vw;align-items:baseline;padding:5vh 0;border-top:1px solid var(--line)}
.stepsx li:last-child{border-bottom:1px solid var(--line)}
.stepsx .n{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(34px,4.2vw,68px);color:var(--bronze);line-height:1;transition:transform .6s var(--ease)}
.stepsx h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(24px,2.8vw,44px);line-height:1.05;letter-spacing:-.015em;transition:transform .6s var(--ease)}
.stepsx p{margin-top:1.4vh;color:var(--muted);max-width:520px;font-size:15.5px}
.stepsx li:hover .n{transform:translateX(.4vw)}.stepsx li:hover h3{transform:translateX(.6vw)}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;margin-top:6vh}
.who li{border-top:1px solid var(--line);padding-top:3vh}
.who .n{font-family:'Fraunces',serif;color:var(--bronze);font-size:18px}
.who h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(22px,2.2vw,34px);line-height:1.08;margin:1.6vh 0}
.who p{color:var(--muted);font-size:15px}
.who .link{margin-top:2vh}

/* Services : index collant à gauche, six articles à droite */
.svc-index li a{display:grid;grid-template-columns:36px 1fr;align-items:baseline;padding:1.6vh 0;border-top:1px solid var(--line);text-decoration:none;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(17px,1.3vw,21px);line-height:1.2;color:var(--muted);transition:color .4s,padding-left .4s var(--ease)}
.svc-index li a .n{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.2em;color:var(--bronze)}
.svc-index li a:hover,.svc-index li a.on{color:var(--ink);padding-left:.4vw}
.service{padding:7vh 0 8vh;border-top:1px solid var(--line)}
.service:first-child{border-top:0;padding-top:0}
.service .n{font-family:'Fraunces',serif;color:var(--bronze);font-size:18px;display:block;margin-bottom:1.6vh}
.service h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(30px,4vw,62px);line-height:1.02;letter-spacing:-.02em;margin-bottom:3vh}
.service .prose{max-width:640px}
.service ul{margin-top:3.4vh;max-width:640px}
.service ul li{position:relative;padding:1.4vh 0 1.4vh 28px;border-top:1px solid var(--line);font-size:15.5px}
.service ul li::before{content:"";position:absolute;left:0;top:calc(1.4vh + .7em);width:14px;height:1px;background:var(--bronze);transition:width .4s var(--ease)}
.service ul li:hover::before{width:20px}
.service .note{margin-top:2.6vh;font-size:14px;color:var(--muted);max-width:640px}

/* About : le texte de la maison, puis l'équipe (styles .team/.people de site.css) */
.about-intro{max-width:1040px}
.commit{margin-top:8vh}

/* Contact : bureau à gauche, formulaire à droite */
.office dl{display:grid;grid-template-columns:auto 1fr;gap:1.2vh 2.4vw;font-size:15.5px}
.office dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);padding-top:.3em}
.office dd{margin:0}
.office a{text-decoration:none;border-bottom:1px solid transparent;transition:color .35s,border-color .35s}
.office a:hover{color:var(--bronze);border-color:var(--bronze)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:3.4vh 2.4vw}
.field{position:relative;display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
.field label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);margin-bottom:1vh;transition:color .3s}
.field input,.field select,.field textarea{appearance:none;-webkit-appearance:none;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0 12px;outline:0;transition:border-color .4s var(--ease)}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A08A5F' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center;padding-right:24px;cursor:pointer}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.field.full.consent::after{display:none}
.field:focus-within::after{transform:scaleX(1)}
.field:focus-within label{color:var(--ink)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:#9A4A3A}
.field .err{display:none;font-size:12.5px;color:#9A4A3A;margin-top:.8vh}
.field.invalid .err{display:block}
.consent{flex-direction:row;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--muted);line-height:1.5}
.consent input{width:16px;height:16px;margin-top:3px;flex:none;border:1px solid var(--ink);padding:0;cursor:pointer;display:grid;place-content:center}
.consent input:checked{background:var(--ink)}
.consent input:checked::before{content:"";width:8px;height:8px;background:var(--ivory)}
.consent.invalid input{border-color:#9A4A3A}
.form .actions{grid-column:1/-1;display:flex;align-items:center;gap:2vw;flex-wrap:wrap;margin-top:1vh}
.form .actions .btn-dark{margin-top:0}
.form-msg{grid-column:1/-1;display:none;font-size:15px;line-height:1.6;padding:2.4vh 0 0;border-top:1px solid var(--line)}
.form-msg.show{display:block}
.form-msg.error{color:#9A4A3A}
.form.sent .field,.form.sent .actions{display:none}
.form-note{font-size:12.5px;color:var(--muted);margin-top:4vh;line-height:1.6;max-width:640px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* appel de fin d'une sous-page : encre, centré */
.p-cta{position:relative;z-index:2;background:var(--ink);color:var(--ivory);padding:18vh var(--gutter);text-align:center}
.p-cta .h-giant{font-size:clamp(34px,5.6vw,92px)}
.p-cta .ctas{justify-content:center}
.p-cta .contact-line{opacity:.72}
.p-cta .contact-line a:hover{color:var(--bronze)}

/* révélations au défilement (sub.js) */
[data-reveal]{opacity:0;transform:translateY(28px)}
.reduced [data-reveal]{opacity:1;transform:none}
.reduced .p-hero .kicker,.reduced .p-hero .lead,.reduced .p-hero .scroll-hint{opacity:1}
.reduced #curtain{clip-path:inset(0 0 100% 0)!important}

@media (max-width:900px){
  /* portrait : la statue occupe tout le cadre, le titre en bas passait devant le marbre (blanc sur blanc) ; un voile sombre sous le texte, le visage reste libre en haut */
  .p-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58vh;background:linear-gradient(to top,rgba(4,4,4,.94) 34%,rgba(4,4,4,0));pointer-events:none}
  .p-hero-copy{z-index:1}
  .p-grid{grid-template-columns:1fr;gap:5vh}.p-grid>.sticky{position:static}
  .who{grid-template-columns:1fr;gap:1vh}
  .svc-index{display:none}
  .form{grid-template-columns:1fr}
  .p-body{padding:11vh var(--gutter) 10vh}
  .p-hero .scroll-hint{display:none}
}