/* Toiture Tradition Bordelaise — design signature */
:root{
  --rouge-tuile:#B7472A;
  --tuile-clair:#D4825C;
  --brique:#6B2D1B;
  --bois:#E6D2B5;
  --beige:#F5EDE0;
  --creme:#FAF7F2;
  --noir:#1A1612;
  --or:#C8923D;
  --gris:#6B6661;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--noir);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.font-serif{font-family:'Fraunces',Georgia,serif}
.font-display{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;font-variation-settings:"SOFT" 60,"opsz" 100;letter-spacing:-0.02em}

/* Grain texture overlay */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.3 0 0 0 0 0.16 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.55;mix-blend-mode:multiply;
}

/* Numéros de section signature */
.section-number{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(5rem,12vw,9rem);
  line-height:.85;
  font-weight:300;
  color:transparent;
  -webkit-text-stroke:1px var(--rouge-tuile);
  letter-spacing:-.04em;
  font-feature-settings:"lnum","tnum";
}

/* Bouton signature */
.btn-tuile{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--rouge-tuile);color:#fff;
  padding:1rem 1.7rem;border-radius:2px;
  font-weight:600;font-size:.95rem;letter-spacing:.04em;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s,box-shadow .3s;
  box-shadow:0 4px 18px -6px rgba(183,71,42,.5);
  text-transform:uppercase;
}
.btn-tuile:hover{background:var(--brique);transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(183,71,42,.6)}
.btn-tuile.urgent{background:var(--noir);box-shadow:0 4px 18px -6px rgba(0,0,0,.5)}
.btn-tuile.urgent::before{
  content:"";position:absolute;left:-3px;top:0;bottom:0;width:6px;background:var(--rouge-tuile);
  animation:pulse-bar 1.6s ease-in-out infinite;
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;
  border:1.5px solid var(--noir);color:var(--noir);background:transparent;
  font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;border-radius:2px;
  transition:all .25s;
}
.btn-ghost:hover{background:var(--noir);color:var(--creme)}

@keyframes pulse-bar{0%,100%{background:var(--rouge-tuile)}50%{background:var(--or)}}

/* Hero diagonal */
.hero-diagonal{
  position:absolute;inset:0;
  background:linear-gradient(115deg,var(--noir) 0%,var(--noir) 38%,transparent 38.05%);
  z-index:1;pointer-events:none;
}
.hero-diagonal::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(183,71,42,.96) 38.1%,rgba(183,71,42,.92) 41%,transparent 41.1%);
}

/* Tile pattern background */
.tile-pattern{
  background-image:
    radial-gradient(circle at 18px 18px, transparent 14px, rgba(183,71,42,.06) 14.5px, rgba(183,71,42,.06) 16px, transparent 16.5px);
  background-size:36px 36px;
}

/* Card service */
.card-svc{
  position:relative;background:#fff;border-radius:4px;overflow:hidden;
  border:1px solid rgba(26,22,18,.08);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.card-svc:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 60px -25px rgba(107,45,27,.35)}
.card-svc .badge{
  position:absolute;top:1rem;left:1rem;background:var(--noir);color:var(--creme);
  font-family:'Fraunces',serif;font-size:.85rem;padding:.3rem .65rem;letter-spacing:.05em;z-index:2;
}

/* Header */
.nav-link{position:relative;color:var(--noir);font-weight:500;font-size:.92rem;letter-spacing:.02em;padding:.4rem 0;transition:color .25s}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rouge-tuile);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--rouge-tuile)}

/* Avis card */
.avis-card{background:#fff;border-radius:4px;padding:2rem;border-left:3px solid var(--rouge-tuile);box-shadow:0 4px 22px -10px rgba(26,22,18,.12)}

/* Stat */
.stat-num{font-family:'Fraunces',serif;font-size:clamp(3rem,5vw,4.2rem);font-weight:600;color:var(--rouge-tuile);line-height:1;letter-spacing:-.03em}

/* RGPD */
.rgpd-banner{
  position:fixed;bottom:1rem;left:1rem;right:1rem;max-width:580px;margin-left:auto;
  background:var(--noir);color:var(--creme);padding:1.4rem 1.5rem;border-radius:6px;
  box-shadow:0 25px 60px -15px rgba(0,0,0,.45);z-index:9999;
  border-left:4px solid var(--rouge-tuile);
  transform:translateY(120%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;
}
.rgpd-banner.show{transform:translateY(0);opacity:1}
.rgpd-banner h3{font-family:'Fraunces',serif;font-size:1.1rem;margin:0 0 .5rem 0;color:#fff}
.rgpd-banner p{font-size:.85rem;line-height:1.5;color:rgba(250,247,242,.85);margin-bottom:1rem}
.rgpd-banner .btn-row{display:flex;flex-wrap:wrap;gap:.5rem}
.rgpd-banner button{font-size:.8rem;padding:.55rem .85rem;border-radius:3px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:none;transition:all .2s}
.rgpd-accept{background:var(--rouge-tuile);color:#fff}
.rgpd-accept:hover{background:#d3573a}
.rgpd-refuse{background:transparent;color:var(--creme);border:1px solid rgba(250,247,242,.4) !important}
.rgpd-refuse:hover{background:rgba(255,255,255,.08)}
.rgpd-perso{background:transparent;color:var(--or);border:1px solid var(--or) !important}
.rgpd-perso:hover{background:var(--or);color:var(--noir)}

/* RGPD Modal */
.rgpd-modal{
  position:fixed;inset:0;background:rgba(26,22,18,.7);z-index:10000;display:none;
  align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px);
}
.rgpd-modal.show{display:flex}
.rgpd-modal-content{
  background:var(--creme);max-width:560px;width:100%;border-radius:6px;
  padding:2rem;max-height:88vh;overflow-y:auto;
}
.rgpd-modal h2{font-family:'Fraunces',serif;font-size:1.6rem;margin:0 0 .8rem 0;color:var(--noir)}
.rgpd-cat{padding:1rem;background:#fff;border-radius:4px;margin-bottom:.7rem;border:1px solid rgba(26,22,18,.08)}
.rgpd-cat-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.rgpd-cat h4{font-family:'Fraunces',serif;font-size:1.05rem;margin:0;color:var(--noir)}
.rgpd-cat p{font-size:.83rem;color:var(--gris);margin:.4rem 0 0 0;line-height:1.5}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#cbc6bf;transition:.25s;border-radius:24px}
.slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;transition:.25s;border-radius:50%}
input:checked + .slider{background:var(--rouge-tuile)}
input:checked + .slider::before{transform:translateX(20px)}
input:disabled + .slider{background:#5d5651;cursor:not-allowed}

/* Form */
.form-input,.form-textarea{
  width:100%;padding:.9rem 1rem;border:1.5px solid rgba(26,22,18,.18);
  background:#fff;border-radius:3px;font-family:inherit;font-size:.95rem;color:var(--noir);
  transition:border-color .2s,box-shadow .2s;
}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--rouge-tuile);box-shadow:0 0 0 3px rgba(183,71,42,.12)}
.form-label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--noir);display:block;margin-bottom:.4rem}

/* Footer */
.footer{background:var(--noir);color:rgba(250,247,242,.78)}
.footer a{color:rgba(250,247,242,.78);transition:color .2s}
.footer a:hover{color:var(--tuile-clair)}
.footer h4{font-family:'Fraunces',serif;color:#fff;font-size:1.05rem;margin-bottom:1rem;letter-spacing:-.01em}

/* FAQ */
.faq-item{border-bottom:1px solid rgba(26,22,18,.12);padding:1.25rem 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;font-family:'Fraunces',serif;font-size:1.15rem;font-weight:500;color:var(--noir);background:none;border:none;cursor:pointer;padding:0}
.faq-q .icon{transition:transform .3s;flex-shrink:0;margin-left:1rem;color:var(--rouge-tuile);font-size:1.4rem}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s;color:var(--gris);line-height:1.7;font-size:.95rem}
.faq-item.open .faq-a{max-height:500px;padding-top:1rem}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.btn-tuile.urgent::before{animation:none}}

/* Marker indicator */
.marker{display:inline-block;width:42px;height:1.5px;background:var(--rouge-tuile);vertical-align:middle;margin-right:.85rem}
.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rouge-tuile);font-weight:600}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;background:var(--noir);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{color:#fff;font-family:'Fraunces',serif;font-size:1.8rem;letter-spacing:-.01em}
.mobile-menu a:hover{color:var(--tuile-clair)}

/* Trust strip */
.trust-strip{background:var(--noir);color:var(--creme);padding:.75rem 0;font-size:.85rem;letter-spacing:.04em}
.trust-strip .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#27c281;margin-right:.5rem;animation:dot 1.6s ease-in-out infinite}
@keyframes dot{0%,100%{opacity:1}50%{opacity:.4}}

/* Hero asymetric photo frame */
.photo-frame{position:relative}
.photo-frame::before{content:"";position:absolute;inset:0;border:2px solid var(--rouge-tuile);transform:translate(18px,18px);z-index:-1;pointer-events:none}

/* Avant-après slider */
.ba-wrap{position:relative;overflow:hidden;border-radius:4px}
.ba-wrap img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--rouge-tuile);transform:translateX(-50%)}
.ba-handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--rouge-tuile);color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 6px 20px -6px rgba(0,0,0,.4)}

@media (max-width:640px){
  .hero-diagonal{display:none}
  .rgpd-banner{left:.6rem;right:.6rem;bottom:.6rem;padding:1.1rem}
}