/*
Theme Name: Loryne Web
Theme URI: https://loryneweb.fr
Author: Loryne Web
Author URI: https://loryneweb.fr
Description: Thème sur mesure pour Loryne Web — création de sites, référencement naturel et accompagnement digital. Basé sur la maquette validée par la cliente.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: loryne-web
*/

:root{
  --bg:#FAF8F4;
  --bg-2:#F1EBE1;
  --ink:#18140F;
  --accent:#106B5A;
  --accent-2:#B8912E;
  --line:#E8E0D2;
  --muted:#78706263;
  --muted-solid:#807668;
  --white:#FFFFFF;
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
  --radius:20px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
::selection{background:var(--accent); color:#fff;}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 60px;}
@media(max-width:760px){ .wrap{padding:0 22px;} }

h1,h2,h3{font-family:var(--serif); color:var(--ink); font-weight:650; line-height:1.05; letter-spacing:-0.02em;}
h1{font-size:68px;}
h2{font-size:40px;}
h3{font-size:22px; font-weight:600;}
p{max-width:600px;}
.lead{font-size:19.5px; color:#3A342C;}
.muted{color:var(--muted-solid);}
.eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:0.12em; font-size:12.5px;
  color:var(--accent); font-weight:700; margin-bottom:18px; display:inline-block;
}

/* ---------- NAV ---------- */
.topbar{position:sticky; top:0; z-index:60; padding:22px 0; pointer-events:none;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; pointer-events:none;}
.logo{font-family:var(--serif); font-size:21px; font-weight:650; pointer-events:auto;}
.pill-nav{
  display:flex; gap:4px; background:rgba(255,255,255,.72); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:100px; padding:6px; pointer-events:auto;
  box-shadow:0 8px 30px rgba(24,20,15,.05);
}
.pill-nav a{
  font-size:14px; font-weight:500; padding:9px 18px; border-radius:100px; color:#54493B;
  transition:all .25s cubic-bezier(.4,0,.2,1); cursor:pointer;
}
.pill-nav a:hover{color:var(--ink);}
.pill-nav a.active{background:var(--ink); color:var(--white);}
.topbar .btn-primary{pointer-events:auto;}
@media(max-width:900px){ .pill-nav{display:none;} }

.mbar{display:none; position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:1px solid var(--line); padding:16px 22px; align-items:center; justify-content:space-between;}
.mbar select{font-family:var(--sans); font-size:13px; background:var(--bg-2); border:1px solid var(--line); border-radius:100px; padding:9px 16px; color:var(--ink);}
@media(max-width:900px){ .mbar{display:flex;} .topbar{display:none;} }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:100px; cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1); border:none;
}
.btn-primary{background:var(--ink); color:var(--white);}
.btn-primary:hover{background:var(--accent); transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,107,90,.28);}
.btn-ghost{background:transparent; border:1.5px solid var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--ink);
  cursor:pointer; transition:gap .2s ease, color .2s ease;
}
.link-arrow::after{content:'→'; transition:transform .2s ease;}
.link-arrow:hover{color:var(--accent); gap:12px;}
.cta-row{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:36px;}

/* ---------- PHOTO PLACEHOLDER / IMAGE ---------- */
.photo{
  position:relative; border-radius:28px; overflow:hidden;
  background:
    radial-gradient(120% 130% at 15% 10%, #BFE0D3 0%, transparent 55%),
    radial-gradient(110% 130% at 90% 90%, #EAD9AE 0%, transparent 60%),
    linear-gradient(160deg,#F1EBE1 0%, #E7DDCC 100%);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.photo:hover{transform:translateY(-4px);}
.photo img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.photo .mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:120px; font-weight:650; color:rgba(24,20,15,.06);
}
.photo .tag{
  position:absolute; left:22px; bottom:20px; font-size:12px; font-weight:600; letter-spacing:.04em;
  color:rgba(24,20,15,.45); background:rgba(255,255,255,.6); backdrop-filter:blur(6px);
  padding:6px 12px; border-radius:100px; z-index:2;
}

section{padding:120px 0;}
@media(max-width:900px){ section{padding:66px 0;} }
@media(max-width:760px){ h1{font-size:38px;} h2{font-size:28px;} }

/* ---------- HERO ---------- */
.hero{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; padding-top:60px; padding-bottom:110px;}
.hero .photo{height:460px;}
@media(max-width:900px){ .hero{grid-template-columns:1fr; gap:36px; padding-top:20px;} .hero .photo{height:280px; order:-1;} }

.split{display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center;}
.split.reverse{grid-template-columns:1.05fr 0.95fr;}
.split.reverse .col-img{order:2;}
.split .photo{height:380px;}
@media(max-width:900px){ .split, .split.reverse{grid-template-columns:1fr; gap:30px;} .split.reverse .col-img{order:0;} }

.bg-alt{background:var(--bg-2); border-radius:40px; margin:0 20px;}
@media(max-width:760px){ .bg-alt{border-radius:24px; margin:0 12px;} }

/* ---------- STEPS ---------- */
.steps{margin-top:56px; display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--line); border-radius:24px; overflow:hidden;}
.step{
  background:var(--bg); padding:34px 26px; opacity:0; transform:translateY(14px); transition:all .5s cubic-bezier(.4,0,.2,1);
}
.step.in{opacity:1; transform:none;}
.step .num{font-family:var(--serif); font-size:26px; color:var(--accent); font-weight:650; margin-bottom:16px; display:block;}
.step h3{font-size:17px; margin-bottom:8px;}
.step p{font-size:14px; color:var(--muted-solid); max-width:none;}
@media(max-width:900px){ .steps{grid-template-columns:1fr; gap:1px;} }

/* ---------- OFFERS ---------- */
.offers{margin-top:56px; display:flex; flex-direction:column; gap:26px;}
.offer{
  display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:32px; padding:52px;
  transition:box-shadow .3s ease, transform .3s ease;
}
.offer:hover{box-shadow:0 20px 50px rgba(24,20,15,.06); transform:translateY(-3px);}
.offer .idx{font-weight:700; color:var(--accent); font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; display:block;}
.offer .photo{height:260px;}
@media(max-width:900px){ .offer{grid-template-columns:1fr; gap:24px; padding:30px;} .offer .col-img{order:-1;} }

/* ---------- CARDS ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px;}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:22px; padding:32px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(24,20,15,.06); border-color:transparent;}
.card .idx{font-weight:700; color:var(--accent); font-size:13px; display:block; margin-bottom:14px;}
.card h3{font-size:18.5px; margin-bottom:8px;}
.card p{font-size:14.5px; color:var(--muted-solid);}
@media(max-width:900px){ .cards{grid-template-columns:1fr;} }

/* ---------- FAQ ---------- */
.faq-item{background:var(--white); border:1px solid var(--line); border-radius:18px; margin-bottom:12px; overflow:hidden;}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 26px; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--sans); font-size:16.5px; font-weight:600; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:20px; color:var(--accent); transition:transform .25s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--muted-solid); font-size:15px; padding:0 26px 24px; max-width:560px;}

/* ---------- INCLUDED LIST ---------- */
.incl{margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;}
.incl li{
  list-style:none; padding:18px 20px; border-radius:16px; background:var(--white); border:1px solid var(--line);
  font-size:15px; display:flex; gap:12px; align-items:center;
}
.incl li span.n{color:var(--accent); font-weight:700; font-size:13px;}
@media(max-width:900px){ .incl{grid-template-columns:1fr;} }

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 0.85fr; gap:60px; align-items:flex-start;}
form{display:flex; flex-direction:column; gap:18px; margin-top:22px;}
label{font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; display:block;}
input,select,textarea{
  width:100%; font-family:var(--sans); font-size:15.5px; padding:14px 16px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--white); color:var(--ink);
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent);}
textarea{min-height:110px; resize:vertical;}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

.form-msg{padding:14px 18px; border-radius:14px; font-size:14.5px; margin-top:18px; display:none;}
.form-msg.success{display:block; background:#E4F2ED; color:var(--accent); border:1px solid #BFE0D3;}
.form-msg.error{display:block; background:#F7E7E1; color:#A8452A; border:1px solid #EAC3B4;}

.divider-quote{max-width:780px; margin:0 auto; text-align:center; padding:130px 0;}
.divider-quote p{font-family:var(--serif); font-weight:560; font-size:30px; color:var(--ink); line-height:1.35; max-width:none;}
@media(max-width:760px){ .divider-quote{padding:70px 0;} .divider-quote p{font-size:22px;} }

footer.site-footer{padding:50px 0 40px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .flinks{display:flex; gap:26px; font-size:14px; font-weight:500;}
footer .flinks a:hover{color:var(--accent);}
footer p{font-size:13px; color:var(--muted-solid);}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{position:fixed; top:0; left:0; height:2.5px; background:var(--accent); z-index:100; width:0%; transition:width .1s linear;}

/* ---------- CURSOR GLOW ---------- */
.cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(16,107,90,.10) 0%, transparent 70%);
  transform:translate(-50%,-50%); transition:opacity .3s ease; opacity:0;
}
@media(max-width:900px){ .cursor-glow{display:none;} }

/* ---------- ANIMATED MESH BG ---------- */
.mesh{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; border-radius:0 0 60px 60px;}
.mesh span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  animation:float 16s ease-in-out infinite;
}
.mesh span:nth-child(1){width:420px; height:420px; background:#BFE0D3; top:-120px; left:-60px; animation-duration:18s;}
.mesh span:nth-child(2){width:340px; height:340px; background:#EAD9AE; top:60px; right:-80px; animation-duration:22s; animation-delay:-4s;}
.mesh span:nth-child(3){width:260px; height:260px; background:#8FC4B0; bottom:-100px; left:30%; animation-duration:20s; animation-delay:-8s;}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-24px) scale(1.08);}
  66%{transform:translate(-24px,20px) scale(0.95);}
}
.hero-stage{position:relative; z-index:1;}

/* ---------- MARQUEE ---------- */
.marquee-wrap{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:22px 0; margin-top:10px;}
.marquee{display:flex; width:max-content; animation:scrollmq 26s linear infinite; gap:56px;}
.marquee span{
  font-family:var(--serif); font-size:22px; font-weight:560; color:var(--ink); opacity:.32; white-space:nowrap;
  display:flex; align-items:center; gap:56px;
}
.marquee span em{font-style:normal; color:var(--accent); opacity:1;}
@keyframes scrollmq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- TILT ---------- */
.tilt{transform-style:preserve-3d; will-change:transform;}

/* ---------- MAGNETIC BUTTON ---------- */
.magnetic{position:relative; will-change:transform;}

/* ---------- CLARITY BEFORE/AFTER SLIDER ---------- */
.clarity-demo{
  margin-top:70px; border-radius:28px; overflow:hidden; border:1px solid var(--line); background:var(--white);
  box-shadow:0 20px 50px rgba(24,20,15,.05);
}
.clarity-head{display:flex; justify-content:space-between; align-items:center; padding:22px 30px; border-bottom:1px solid var(--line);}
.clarity-head span{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;}
.clarity-head .before-lbl{color:#B08A6E;}
.clarity-head .after-lbl{color:var(--accent);}
.clarity-stage{position:relative; height:340px; background:var(--bg-2); overflow:hidden;}
.clarity-panel{position:absolute; inset:0; padding:30px 34px; display:flex; flex-direction:column; gap:10px;}
.clarity-before{background:repeating-linear-gradient(135deg,#EFE6D6,#EFE6D6 8px,#E7DBC5 8px,#E7DBC5 16px);}
.clarity-before .blk{background:rgba(255,255,255,.55); border-radius:4px;}
.clarity-before .blk.b1{width:38%; height:22px;}
.clarity-before .blk.b2{width:70%; height:12px; margin-top:14px;}
.clarity-before .blk.b3{width:55%; height:12px;}
.clarity-before .blk.b4{width:80%; height:12px;}
.clarity-before .row{display:flex; gap:10px; margin-top:16px;}
.clarity-before .chip{width:70px; height:44px; border-radius:6px; background:rgba(255,255,255,.4); transform:rotate(-2deg);}
.clarity-after{background:var(--white); clip-path:inset(0 50% 0 0); transition:clip-path .1s linear;}
.clarity-after .eyebrow{margin-bottom:6px;}
.clarity-after h4{font-family:var(--serif); font-size:22px; font-weight:650; margin-bottom:10px;}
.clarity-after .ln{height:10px; border-radius:4px; background:var(--line);}
.clarity-after .ln.w1{width:85%;}
.clarity-after .ln.w2{width:60%; margin-top:8px;}
.clarity-after .cta-mini{margin-top:18px; display:inline-flex; width:fit-content; padding:9px 18px; border-radius:100px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:600;}
.clarity-handle{
  position:absolute; top:0; bottom:0; left:50%; width:0; z-index:5; cursor:ew-resize;
}
.clarity-handle::before{content:''; position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--accent);}
.clarity-handle::after{
  content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px;
  border-radius:50%; background:var(--white); color:var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:15px; box-shadow:0 6px 18px rgba(24,20,15,.15);
}
.clarity-caption{padding:20px 30px; font-size:14.5px; color:var(--muted-solid);}
@media(max-width:760px){ .clarity-stage{height:400px;} .clarity-head span{font-size:11px;} }

/* ---------- DARK EXPERTISE SECTION ---------- */
.dark-section{
  background:#171510; color:#EFE9DC; border-radius:40px; margin:0 20px; position:relative; overflow:hidden;
}
.dark-section::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(239,233,220,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(239,233,220,.05) 1px, transparent 1px);
  background-size:44px 44px;
}
.dark-section .wrap{position:relative; z-index:1;}
.dark-section .eyebrow{color:#3FA98A;}
.dark-section h2{color:#F7F3E9;}
.dark-section .muted{color:#B4AB98;}
.expertise-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:52px; background:rgba(239,233,220,.12); border-radius:24px; overflow:hidden;}
.expertise-item{background:#171510; padding:36px 34px;}
.expertise-item .tag-num{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#B8912E; display:block; margin-bottom:14px;}
.expertise-item h3{color:#F7F3E9; font-size:19px; margin-bottom:10px;}
.expertise-item p{color:#AFA694; font-size:14.5px; max-width:none;}
@media(max-width:760px){ .expertise-grid{grid-template-columns:1fr;} .dark-section{border-radius:24px; margin:0 12px;} }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* Accessibilité : focus clavier visible */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}