/* ============================================================
   UNERTH — main.css
   Composants, mises en page et responsive.
   Reprend fidèlement la maquette statique (arches, éditorial).
   ============================================================ */

.u-shell{ overflow-x:clip; }

/* ---------- Primitives ---------- */
.u-px{ padding-left:var(--u-pad); padding-right:var(--u-pad); }
.u-section{ padding:clamp(56px,7vh,96px) var(--u-pad); max-width:var(--u-max); margin:0 auto; }
.u-section-sand{ background:var(--u-sand); padding:clamp(56px,7vh,96px) var(--u-pad); }
.u-body{ font-size:16.5px; line-height:1.75; margin:0; }
.u-body-block p{ font-size:16.5px; line-height:1.8; margin:0 0 22px; }
.u-body-block p:last-child{ margin-bottom:0; }
.u-muted{ color:var(--u-sage); }
.u-script{ font-family:var(--u-script); color:var(--u-terra); font-weight:400; }

.u-display{ margin:0; font-weight:300; font-size:clamp(42px,5.6vw,72px); letter-spacing:-0.02em; color:var(--u-olive); }
.u-display-2{ margin:0; font-weight:300; font-size:clamp(34px,5.4vw,76px); line-height:1.04; letter-spacing:-0.02em; color:var(--u-olive); }
.u-display-3{ margin:0 0 clamp(40px,5vw,70px); font-weight:300; font-size:clamp(28px,4.2vw,56px); line-height:1.08; letter-spacing:-0.02em; color:var(--u-olive); }
.u-lead{ font-size:clamp(22px,2.7vw,34px); line-height:1.45; font-weight:300; letter-spacing:-0.01em; max-width:18ch; margin:0 0 48px; }
.u-lead-sm{ font-size:clamp(19px,2.2vw,26px); line-height:1.55; font-weight:300; letter-spacing:-0.005em; margin:0 0 30px; }
.u-kicker{ font-family:var(--u-mono); font-size:clamp(11px,1.2vw,15px); letter-spacing:0.34em; text-transform:uppercase; color:var(--u-sage); margin:0 0 24px; }

.u-eyebrow{ display:flex; gap:18px; align-items:baseline; margin-bottom:24px; }
.u-num{ font-family:var(--u-mono); font-size:22px; letter-spacing:0.2em; color:var(--u-terra); }
.u-eyebrow-label{ font-family:var(--u-mono); font-size:15px; letter-spacing:0.32em; text-transform:uppercase; color:var(--u-sage); }

/* Lien souligné animé */
.u-ulink{ position:relative; display:inline-block; font-family:var(--u-mono); padding-bottom:6px; color:var(--u-olive); cursor:pointer; border-bottom:1px solid rgba(133,130,119,0.38); font-size:13px; letter-spacing:0.18em; text-transform:uppercase; }
.u-ulink::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--u-terra); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.u-ulink:hover::after{ transform:scaleX(1); }

/* Images & arches */
.u-img{ width:100%; height:100%; object-fit:cover; display:block; }
.u-imgfill{ position:absolute; inset:0; width:100%; height:100%; }
.u-imgfill .u-img{ position:absolute; inset:0; }
.u-hero-placeholder{ width:100%; height:100%; background:var(--u-sand); }
.u-arch{ position:relative; overflow:hidden; border-radius:50% 50% 3px 3px / 30% 30% 3px 3px; aspect-ratio:4/5; background:var(--u-sand); }
.u-arch .u-img{ position:absolute; inset:0; }
.u-arch-soft{ border-radius:50% 50% 3px 3px / 22% 22% 3px 3px; aspect-ratio:5/6; }
.u-arch-media{ }

/* Grille éditoriale à deux colonnes */
.u-split-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(40px,6vw,90px); align-items:center; }
.u-align-start{ align-items:start; }

/* ---------- HEADER / NAV ---------- */
.u-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:20px var(--u-pad); background:rgba(255,250,245,0.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--u-sand); }
.u-logo img{ height:60px; width:auto; display:block; }
.u-logo .custom-logo{ height:60px; width:auto; }
.u-nav-desktop .u-menu,
.u-menu{ list-style:none; margin:0; padding:0; display:flex; gap:34px; align-items:center; }
.u-nav-desktop a{ font-family:var(--u-sans); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--u-sage); transition:color .25s ease; }
.u-nav-desktop .current-menu-item a,
.u-nav-desktop a:hover{ color:var(--u-olive); }

.u-nav-burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; color:var(--u-olive); margin-right:-8px; }
.u-nav-cb{ display:none; }
.u-nav-backdrop{ position:fixed; inset:0; background:rgba(78,78,60,0.38); opacity:0; visibility:hidden; transition:opacity .55s ease; z-index:70; }
.u-nav-drawer{ position:fixed; top:0; right:0; height:100%; width:min(330px,84vw); background:var(--u-cream); transform:translateX(100%); transition:transform .6s cubic-bezier(.22,1,.36,1); z-index:80; display:flex; flex-direction:column; padding:22px; }
.u-nav-close{ align-self:flex-end; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--u-olive); }
.u-nav-drawer-links .u-menu{ flex-direction:column; margin-top:18px; gap:0; align-items:stretch; }
.u-nav-drawer-links a{ display:block; padding:16px 10px; font-family:var(--u-sans); font-size:14px; letter-spacing:0.14em; text-transform:uppercase; color:var(--u-olive); border-bottom:1px solid var(--u-sand); transition:color .25s ease; }
.u-nav-drawer-links a:hover{ color:var(--u-terra); }
.u-nav-cb:checked ~ .u-nav-backdrop{ opacity:1; visibility:visible; }
/* L'ombre n'est appliquée qu'au tiroir ouvert : fermé, il est hors écran à droite
   et son ombre portée (décalée vers la gauche) créait une bande sur le bord droit. */
.u-nav-cb:checked ~ .u-nav-drawer{ transform:translateX(0); box-shadow:-24px 0 60px rgba(78,78,60,0.16); }

/* ---------- FOOTER ---------- */
.u-footer{ background:var(--u-olive); color:var(--u-sand); padding:clamp(56px,7vw,84px) var(--u-pad) 40px; }
.u-footer-grid{ max-width:var(--u-max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:44px; }
.u-footer-logo{ height:88px; width:auto; }
.u-footer-col{ font-size:14px; line-height:1.9; }
.u-footer-label{ margin:0 0 8px; font-family:var(--u-mono); font-size:13px; letter-spacing:0.24em; text-transform:uppercase; color:var(--u-sage); }
.u-footer-col a,.u-footer-col span{ display:block; }
.u-footer-address{ max-width:24ch; }
.u-footer-bottom{ max-width:var(--u-max); margin:48px auto 0; padding-top:24px; border-top:1px solid rgba(236,230,218,0.18); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--u-mono); font-size:10px; letter-spacing:0.14em; color:var(--u-sage); }

/* ---------- HOME ---------- */
.u-hero{ position:relative; height:calc(88vh + 101px); min-height:660px; width:100%; margin-top:calc(-1 * (100px + 1px)); }
.u-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.u-hero-overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(78,78,60,0.46) 0%,rgba(78,78,60,0.08) 42%,rgba(78,78,60,0.12) 100%); pointer-events:none; }
.u-hero-caption{ position:absolute; left:0; right:0; bottom:0; padding:0 var(--u-pad) 56px; pointer-events:none; }
.u-hero-caption p{ font-size:16px; letter-spacing:0.01em; color:var(--u-sand); margin:0; }

.u-statement{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; max-width:1100px; }
.u-statement-body{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; max-width:860px; }
.u-statement-body p{ margin:0; font-size:16.5px; line-height:1.75; }

.u-featured{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.u-featured-inner{ max-width:1560px; margin:0 auto; width:100%; }
.u-featured-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:clamp(28px,3.5vw,48px); }

.u-home-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,40px); }
.u-card{ display:block; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.u-card:hover{ transform:translateY(-7px); }
.u-card-cap{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; font-family:var(--u-mono); font-size:14px; letter-spacing:0.05em; color:var(--u-olive); }

.u-philosophy{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.u-philosophy .u-arch-soft{ max-width:480px; justify-self:center; width:100%; }

.u-cta{ text-align:center; padding:clamp(90px,13vw,170px) var(--u-pad); }
.u-cta-title{ margin:0 0 44px; font-weight:300; font-size:clamp(38px,6.5vw,84px); line-height:1.05; color:var(--u-olive); letter-spacing:-0.02em; }
.u-cta-title .u-script{ font-size:1.18em; }

/* ---------- ARCHIVE PROJETS ---------- */
.u-archive-head{ padding-top:clamp(70px,9vw,120px); }
.u-archive-head-row{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.u-archive-intro{ margin:0 0 8px; max-width:42ch; font-size:16px; line-height:1.7; color:var(--u-olive); }
.u-archive-grid{ gap:clamp(24px,3vw,44px); }
.u-empty{ text-align:center; color:var(--u-sage); }

/* ---------- FICHE PROJET ---------- */
.u-pj-hero{ position:sticky; top:0; height:100vh; z-index:0; overflow:hidden; margin-top:calc(-1 * (100px + 1px)); background:var(--u-sand); }
.u-pj-hero-media{ position:relative; width:100%; height:100vh; min-height:560px; }
.u-pj-hero-media .u-img{ width:100%; height:100%; object-fit:cover; }
.u-pj-back{ position:absolute; top:calc(100px + 20px); left:clamp(20px,3vw,40px); z-index:5; font-family:var(--u-mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--u-cream); background:rgba(78,78,60,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:10px 16px; border-radius:2px; }
.u-pj-content{ position:relative; z-index:1; background:var(--u-cream); }

.u-pj-intro{ max-width:1080px; margin:0 auto; padding:clamp(66px,9vw,132px) var(--u-pad) clamp(50px,7vw,90px); text-align:center; }
.u-pj-title{ margin:0; font-weight:300; font-size:clamp(46px,8vw,104px); line-height:0.98; color:var(--u-olive); letter-spacing:-0.03em; }
.u-pj-meta{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(32px,5vw,76px); margin:clamp(30px,3.6vw,46px) 0 clamp(42px,5vw,66px); }
.u-meta-label{ margin:0 0 8px; font-family:var(--u-mono); font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--u-sage); }
.u-meta-val{ margin:0; font-size:17px; color:var(--u-olive); }
.u-pj-lead{ max-width:60ch; margin:0 auto; font-size:clamp(18px,1.7vw,22px); line-height:1.65; font-weight:300; color:var(--u-olive); letter-spacing:-0.01em; }

.u-pj-feature{ padding:clamp(8px,1vw,16px) clamp(10px,1.4vw,22px); }
.u-imgband{ position:relative; width:100%; height:clamp(360px,62vh,720px); background:var(--u-sand); overflow:hidden; }
.u-imgband .u-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.u-pj-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:clamp(8px,1.2vw,18px); padding:clamp(4px,0.6vw,10px) clamp(10px,1.4vw,22px); }
.u-pj-two-narrow{ max-width:980px; margin:0 auto; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); padding:clamp(4px,0.6vw,10px) var(--u-pad); }
.u-ratio{ position:relative; background:var(--u-sand); overflow:hidden; }
.u-ratio .u-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.u-ratio-34{ aspect-ratio:3/4; }
.u-ratio-43{ aspect-ratio:4/3; }
.u-ratio-45{ aspect-ratio:4/5; }
.u-ratio-57{ aspect-ratio:5/7; }

.u-pj-split{ max-width:var(--u-max); margin:0 auto; padding:clamp(48px,6vh,90px) var(--u-pad); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(40px,6vw,88px); align-items:center; min-height:100vh; }
.u-pj-split .u-arch{ border-radius:50% 50% 3px 3px / 20% 20% 3px 3px; }
.u-pj-body{ font-size:clamp(18px,1.7vw,22px); line-height:1.65; color:var(--u-olive); margin:0; }
.u-pj-body p{ margin:0 0 22px; }
.u-pj-body p:last-child{ margin-bottom:0; }

.u-pj-plate{ max-width:var(--u-max); margin:0 auto; padding:clamp(40px,6vw,80px) var(--u-pad) clamp(30px,4vw,50px); display:flex; justify-content:center; }
.u-pj-plate .u-ratio{ width:min(760px,100%); }

.u-pj-credits{ max-width:var(--u-max); margin:0 auto; padding:clamp(20px,2.5vw,34px) var(--u-pad) clamp(56px,7vw,90px); }
.u-credits-row{ display:flex; flex-wrap:wrap; gap:40px; padding-top:26px; border-top:1px solid var(--u-sand); font-family:var(--u-mono); font-size:12px; color:var(--u-olive); }
.u-credit-label{ color:var(--u-sage); letter-spacing:0.1em; }

.u-pj-nav{ border-top:1px solid var(--u-sand); background:var(--u-sand); }
.u-pj-nav-inner{ max-width:var(--u-max); margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:clamp(30px,4vw,48px) var(--u-pad); flex-wrap:wrap; gap:20px; }
.u-pj-nav-link{ display:flex; flex-direction:column; gap:6px; }
.u-pj-nav-link.u-right{ text-align:right; }
.u-pj-nav-eyebrow{ font-family:var(--u-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--u-sage); }
.u-pj-nav-name{ font-size:clamp(20px,2.4vw,30px); font-weight:300; color:var(--u-olive); }
.u-pj-index{ font-family:var(--u-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--u-olive); border:1px solid var(--u-sage); border-radius:2px; padding:12px 22px; }

/* ---------- ABOUT ---------- */
.u-about-head{ padding-top:clamp(70px,9vw,120px); padding-bottom:clamp(50px,6vw,80px); }
.u-about-head .u-display-2{ white-space:nowrap; }
.u-founders-figure{ margin:0; justify-self:center; width:100%; max-width:430px; }
.u-founders-cap{ margin-top:16px; font-family:var(--u-mono); font-size:12px; letter-spacing:0.06em; color:var(--u-olive); text-align:center; }
.u-about-quote{ max-width:1000px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.u-about-quote blockquote{ margin:0 auto; max-width:900px; text-align:center; }
.u-about-quote p{ font-size:clamp(24px,3vw,38px); line-height:1.42; font-weight:300; font-style:italic; color:var(--u-olive); margin:0; letter-spacing:-0.01em; }
.u-quote-mark{ font-family:var(--u-script); font-size:clamp(120px,16vw,210px); color:var(--u-terra); display:block; line-height:0.55; margin-bottom:4px; }
.u-quote-close{ line-height:0.3; margin-top:28px; margin-bottom:0; }
.u-vision-mission{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; max-width:1100px; }
.u-vision-mission .u-split-grid{ gap:clamp(48px,7vw,96px); align-items:start; }

.u-process{ padding:clamp(80px,11vw,150px) var(--u-pad); }
.u-process-inner{ max-width:1180px; margin:0 auto; }
.u-process-body{ max-width:60ch; margin-bottom:clamp(40px,5vw,64px); }
.u-process-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:clamp(30px,3.5vw,52px); }
.u-step-num{ font-family:var(--u-mono); font-size:18px; letter-spacing:0.16em; color:var(--u-sage); }
.u-step-title{ margin:14px 0 0; font-weight:400; font-size:26px; color:var(--u-olive); letter-spacing:-0.01em; }
.u-step-rule{ display:block; width:100%; height:1px; background:var(--u-terra); margin:16px 0 0; }
.u-step-text{ margin:16px 0 0; font-size:15.5px; line-height:1.75; color:var(--u-olive); }

/* ---------- CONTACT ---------- */
.u-contact-head{ padding-top:clamp(70px,9vw,120px); padding-bottom:clamp(30px,5vw,50px); }
.u-contact-body{ padding-bottom:clamp(80px,11vw,140px); }
.u-contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(48px,7vw,100px); align-items:start; }
.u-contact-details{ display:flex; flex-direction:column; gap:34px; order:2; }
.u-contact-label{ font-family:var(--u-mono); font-size:15px; letter-spacing:0.24em; text-transform:uppercase; color:var(--u-sage); margin:0 0 12px; }
.u-contact-val{ margin:0; font-size:17px; line-height:1.9; color:var(--u-olive); }
.u-contact-address{ line-height:1.7; max-width:26ch; }
.u-contact-line{ font-size:17px; color:var(--u-olive); border-bottom:1px solid var(--u-terra); padding-bottom:3px; }

.u-form-card{ background:var(--u-sand); border-radius:4px; padding:clamp(30px,4vw,52px); order:1; }
.u-form-title{ margin:0 0 30px; font-weight:300; font-size:clamp(22px,2.6vw,32px); color:var(--u-olive); letter-spacing:-0.015em; }
.u-form-fields{ display:flex; flex-direction:column; gap:26px; }
.ufield{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--u-sage); padding:12px 2px; font-family:var(--u-sans); font-size:16px; color:var(--u-olive); outline:none; transition:border-color .3s ease; }
.ufield::placeholder{ color:var(--u-sage); }
.ufield:focus{ border-color:var(--u-olive); }
select.ufield{ appearance:none; cursor:pointer; }
textarea.ufield{ min-height:120px; resize:vertical; }
.u-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.u-form-submit{ margin-top:32px; width:100%; background:var(--u-olive); color:var(--u-cream); font-size:13px; letter-spacing:0.18em; text-transform:uppercase; padding:18px; border:0; border-radius:2px; cursor:pointer; transition:opacity .3s ease; }
.u-form-submit:hover{ opacity:0.9; }
.u-form-submit[disabled]{ opacity:0.5; cursor:default; }
.u-form-feedback{ margin:16px 0 0; font-size:14px; color:#a3432f; min-height:1em; }
.u-form-thanks{ min-height:380px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:18px; }
/* Le bloc part masqué (attribut `hidden` dans page-contact.php) et n'est
   révélé qu'après un envoi réussi. Sans cette règle, le `display:flex`
   ci-dessus l'emporte sur le `display:none` de l'attribut et le message
   de remerciement s'affiche en permanence sous le formulaire. */
.u-form-thanks[hidden]{ display:none; }
.u-thanks-title{ font-size:64px; line-height:0.9; }
.u-form-thanks p{ margin:0; font-size:17px; line-height:1.7; color:var(--u-olive); max-width:34ch; }
.u-form-again{ margin-top:8px; font-family:var(--u-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--u-olive); background:transparent; border:0; border-bottom:1px solid var(--u-sage); padding:6px 2px; cursor:pointer; }

/* ---------- Divers ---------- */
.u-flow .u-post{ padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid var(--u-sand); }
.u-post-title{ font-weight:300; font-size:clamp(24px,3vw,40px); color:var(--u-olive); margin:0 0 14px; }
.u-page-content{ max-width:70ch; }
.u-404{ text-align:center; min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }

/* ---------- Reveal au scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---------- Responsive ---------- */
@media (max-width:900px){
	.u-section,.u-section-sand,.u-header,.u-footer,.u-px{ padding-left:28px; padding-right:28px; }
}
@media (max-width:680px){
	.u-section,.u-section-sand,.u-header,.u-footer,.u-px{ padding-left:20px; padding-right:20px; }
	.u-header{ padding-top:14px; padding-bottom:14px; }
	.u-nav-desktop{ display:none; }
	.u-nav-burger{ display:flex; }
	.u-home-grid{ grid-template-columns:1fr 1fr; }
	/* Index des projets : un seul projet par écran en mobile. */
	.u-archive-grid{ grid-template-columns:1fr; }
	.u-about-head .u-display-2{ white-space:normal; }
	.u-contact-details{ order:2; }
}
@media (max-width:460px){
	/* Accueil « Latest Projects » : 2 projets par rangée même sur petit écran. */
	.u-home-grid{ grid-template-columns:1fr 1fr; gap:14px; }
	.u-home-grid .u-card-cap{ flex-direction:column; gap:2px; font-size:12px; }
	/* ...mais l'index des projets reste sur une colonne (règle répétée ici :
	   à spécificité égale, la déclaration .u-home-grid ci-dessus l'emporterait). */
	.u-archive-grid{ grid-template-columns:1fr; gap:clamp(24px,3vw,44px); }
	.u-archive-grid .u-card-cap{ flex-direction:row; font-size:14px; }
}