:root{
  --noir:#000000; --beige:#C4A07A; --brun:#403833; --ivoire:#F7F3EE; --pierre:#E9E1D7;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:Manrope, "Helvetica Neue", Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--ivoire);color:var(--brun);font-family:var(--sans);font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--beige);outline-offset:4px}

/* En-tête */
.top{display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,48px);position:absolute;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:5;mix-blend-mode:difference;color:#fff}
.top .mark{font-family:var(--serif);font-size:22px;letter-spacing:.32em;text-decoration:none}
.top nav a{font-size:14px;text-decoration:none;margin-left:24px;opacity:.85}
.top nav a:hover{opacity:1;text-decoration:underline}

/* Les deux portes */
.doors{display:flex;min-height:100svh;position:relative}
.door{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5vw,72px);text-decoration:none;overflow:hidden;transition:flex-grow .6s cubic-bezier(.2,.7,.2,1)}
.door:hover,.door:focus-visible{flex-grow:1.35}
.door-her{background:var(--ivoire);color:var(--brun)}
.door-more{background:var(--noir);color:var(--ivoire)}
.door-more .photo{position:absolute;inset:0;background:url(../img/porte-more.jpg) center 20%/cover no-repeat;opacity:.55;filter:grayscale(.2);transition:opacity .6s,transform 1.2s}
.door-more:hover .photo{opacity:.7;transform:scale(1.03)}
.door-more::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000 10%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.5))}
.door > *{position:relative;z-index:2}
.door .role{font-size:15px;margin:0 0 10px;color:var(--beige)}
.door-her .role{color:#8C6F52}
.door h2{margin:0;font-family:var(--serif);font-weight:500;line-height:.9;font-size:clamp(56px,9vw,132px);letter-spacing:-.01em}
.door-her h2{font-style:italic}
.door-more h2{letter-spacing:.04em;font-weight:600}
.door p.desc{max-width:34ch;margin:18px 0 26px;font-size:16px;opacity:.88}
.door .go{display:inline-block;align-self:flex-start;font-weight:600;font-size:15px;padding:13px 22px;border:1px solid currentColor}
.door-her .go{border-color:var(--brun)}
.door-more .go{background:var(--beige);color:var(--noir);border-color:var(--beige)}
.door:hover .go{transform:translateY(-2px)}
.go{transition:transform .3s}

/* Le mot BECOMING qui coupe la porte en deux */
.seam{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);z-index:4;pointer-events:none;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.2vw,48px);letter-spacing:.55em;color:#fff;mix-blend-mode:difference;white-space:nowrap}

/* Sections communes */
.sec-head{max-width:640px;margin:0 0 clamp(40px,6vw,70px)}
.sec-head h3{margin:0 0 14px;font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.4vw,72px);line-height:1}
.sec-head p{margin:0;font-size:18px;max-width:50ch}
.inner{max-width:1120px;margin:0 auto}
.btn{display:inline-block;font-weight:600;font-size:15px;padding:13px 22px;text-decoration:none;border:1px solid transparent;transition:transform .3s}
.btn:hover{transform:translateY(-2px)}
.btn-her{border-color:var(--brun);color:var(--brun)}
.btn-more{background:var(--beige);color:var(--noir)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 1. Devenir grandir rayonner */
.verbs{background:var(--pierre);padding:clamp(80px,11vw,150px) clamp(20px,6vw,80px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--beige)}
.steps li{padding-right:clamp(16px,3vw,40px)}
.steps .n{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--pierre);border:1px solid var(--beige);font-family:var(--serif);font-size:24px;color:#8C6F52}
.steps h4{margin:22px 0 8px;font-family:var(--serif);font-weight:600;font-size:clamp(30px,3vw,40px);line-height:1}
.steps p{margin:0;max-width:30ch}

/* 2. Deux maisons */
.houses{background:var(--ivoire);padding:clamp(80px,11vw,150px) clamp(20px,6vw,80px)}
.house-grid{display:grid;grid-template-columns:1fr 1fr}
.house{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column}
.house-her{background:var(--ivoire);border:1px solid rgba(64,56,51,.2)}
.house-more{background:var(--noir);color:var(--ivoire)}
.house h4{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(34px,3.6vw,48px);line-height:1}
.house-her h4{font-style:italic}
.house-more h4{letter-spacing:.03em;font-weight:600}
.house .verb{margin:6px 0 28px;color:#8C6F52;font-size:17px}
.house-more .verb{color:var(--beige)}
.house dl{margin:0 0 34px;flex:1}
.house dt{font-size:14px;opacity:.65;margin-top:18px}
.house dd{margin:4px 0 0;font-size:17px;max-width:40ch}
.house .btn{align-self:flex-start}

/* 3. Le pont */
.bridge{background:var(--noir);color:var(--ivoire);padding:clamp(80px,11vw,140px) clamp(20px,6vw,80px);text-align:center}
.bridge h3{margin:0 0 50px;font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.4vw,72px);line-height:1}
.bridge-row{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:20px;max-width:900px;margin:0 auto 50px}
.bridge .side{margin:0 0 10px;font-size:14px;color:var(--beige)}
.bridge .big{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,32px);line-height:1.2}
.bridge .arrow{height:1px;background:var(--beige);position:relative}
.bridge .arrow::after{content:"";position:absolute;right:0;top:-5px;border:5px solid transparent;border-left:8px solid var(--beige);border-right:0}

/* 5. Rejoindre */
.join{background:var(--pierre);padding:clamp(70px,9vw,120px) clamp(20px,6vw,80px);text-align:center}
.join h3{margin:0 0 10px;font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,60px)}
.join p{margin:0 auto 30px;max-width:46ch}
.join-form{display:flex;max-width:480px;margin:0 auto}
.join input{flex:1;min-width:0;padding:14px 16px;font:inherit;font-size:16px;border:1px solid var(--brun);border-right:0;background:var(--ivoire);color:var(--brun)}
.join button{padding:14px 22px;font:inherit;font-weight:600;font-size:15px;background:var(--brun);color:var(--ivoire);border:0;cursor:pointer}

/* Histoire */
.story{background:var(--brun);color:var(--ivoire);padding:clamp(70px,10vw,140px) clamp(20px,6vw,80px)}
.story .inner{max-width:760px;text-align:center}
.story blockquote{margin:0 0 26px;font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.6vw,46px);line-height:1.2}
.story p{margin:0 auto 28px;max-width:56ch;opacity:.85}
.story a{color:var(--beige);font-weight:600}

/* Pied */
footer{background:var(--noir);color:var(--pierre);padding:46px clamp(20px,6vw,80px);font-size:14px}
footer .inner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center}
footer .mark{font-family:var(--serif);font-size:20px;letter-spacing:.32em;color:var(--ivoire)}
footer nav a{text-decoration:none;margin-right:22px;opacity:.75}
footer nav a:hover{opacity:1}

@media (max-width:760px){
  .doors{flex-direction:column}
  .door{min-height:62svh}
  .door:hover{flex-grow:1}
  .seam{display:none}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps li{display:grid;grid-template-columns:54px 1fr;column-gap:18px}
  .steps .n{grid-row:span 2}
  .steps h4{margin-top:10px}
  .house-grid{grid-template-columns:1fr}
  .bridge-row{grid-template-columns:1fr}
  .bridge .arrow{width:1px;height:40px;margin:0 auto}
  .bridge .arrow::after{right:-5px;top:auto;bottom:0;border:5px solid transparent;border-top:8px solid var(--beige);border-bottom:0}
  .top nav{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.admin-bar .top{top:32px}
@media screen and (max-width:782px){.admin-bar .top{top:46px}}
/* Pages simples, boutique, Her */
.page-simple{max-width:860px;margin:0 auto;padding:140px clamp(20px,6vw,80px) 110px;min-height:60vh}
.page-simple h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5vw,64px);line-height:1;margin:0 0 30px}
.page-simple a{color:var(--brun)}
.woocommerce-page .page-simple{max-width:1120px}
.woocommerce a.button,.woocommerce button.button{background:var(--brun)!important;color:var(--ivoire)!important;border-radius:0!important}

/* ===== Mon histoire ===== */
.histoire{--taupe:#9A8370;--champagne:#B08D57;--doux:#5C534C;background:var(--ivoire);color:#242321}
.histoire h1,.histoire h2{font-family:var(--serif);font-weight:300;color:#242321;margin:0}
.histoire img{display:block;width:100%;height:100%;object-fit:cover}
.h-ouverture{text-align:center;padding:150px clamp(22px,6vw,80px) 70px;max-width:980px;margin:0 auto}
.h-mono{display:inline-block;width:76px;margin:0 auto 40px}
.h-sur{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin:0 0 22px}
.h-ouverture h1{font-size:clamp(36px,5.4vw,80px);line-height:1.04;font-style:italic}
.h-signe{margin:30px 0 0;color:var(--doux)}
.h-photo{margin:0 auto;padding:0 clamp(16px,4vw,56px);max-width:1440px}
.h-photo img{aspect-ratio:21/9;height:auto}
.h-recit{max-width:720px;margin:0 auto;padding:clamp(80px,10vw,140px) clamp(22px,6vw,40px)}
.h-recit section{margin-bottom:clamp(54px,7vw,84px)}
.h-etape{font-size:13px;letter-spacing:.24em;color:var(--champagne);margin:0 0 12px}
.h-recit h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;margin-bottom:18px}
.h-recit p{font-size:17px;line-height:1.8;color:var(--doux);margin:0 0 16px}
.h-recit blockquote{margin:0 0 clamp(54px,7vw,84px);padding:34px 0;border-top:1px solid #E5DCCF;border-bottom:1px solid #E5DCCF;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26px,3.2vw,38px);line-height:1.25;text-align:center}
.h-merci{margin-top:30px!important;font-family:var(--serif);font-size:22px!important;color:#242321!important}
.h-portes{display:grid;grid-template-columns:1fr 1fr}
.h-porte{display:flex;flex-direction:column;gap:8px;padding:clamp(44px,7vw,90px) clamp(22px,5vw,64px);text-decoration:none;transition:filter .3s}
.h-porte:hover{filter:brightness(.96)}
.h-porte span{font-size:14px;letter-spacing:.12em}
.h-porte strong{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,52px);line-height:1}
.h-porte-her{background:#EFE9E1;color:#242321}
.h-porte-her span{color:var(--taupe)}
.h-porte-more{background:#000;color:var(--ivoire)}
.h-porte-more span{color:var(--beige)}
.page-template-templates-page-histoire .top,body:has(.histoire) .top{mix-blend-mode:normal;color:#242321}
@media (max-width:760px){
  .h-ouverture{padding-top:120px}
  .h-photo img{aspect-ratio:4/3}
  .h-portes{grid-template-columns:1fr}
}

/* ===== Responsive : menu visible sur téléphone ===== */
html,body{overflow-x:hidden;overflow-x:clip}
@media (max-width:760px){
  .top{flex-wrap:wrap;row-gap:10px;padding:16px 20px}
  .top .mark{font-size:18px;letter-spacing:.28em}
  .top nav{display:flex!important;width:100%;gap:18px;overflow-x:auto;white-space:nowrap;padding-bottom:2px}
  .top nav a{margin-left:0;font-size:13px;opacity:1}
  .e-hero,.h-ouverture{padding-top:140px}
  .join .btn{font-size:14px;word-break:break-all}
}
@media (max-width:380px){
  .top nav{gap:14px}
  .top nav a{font-size:12px}
}