/* ==========================================================================
   RTJ RH — Feuille de styles
   Sommaire :
   1. Variables & base
   2. Layout & utilitaires
   3. Navigation (header)
   4. Boutons
   5. Hero
   6. Constat / Flip cards
   7. Alliance (bande sombre)
   8. Manifeste (bande terracotta)
   9. Offres
   10. Bio / À propos
   11. FAQ
   12. CTA final (orbites)
   13. Footer
   ========================================================================== */

/* 1. Variables & base ----------------------------------------------------- */
:root{
  --brun:#3A2A22;
  --terracotta:#C4714A;
  --terracotta-dark:#A85A38;
  --creme:#F2EDE4;
  --beige:#E8DDD0;
  --blanc:#FFFDF9;
  --font-display:'Fraunces', serif;
  --font-body:'Public Sans', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); color:var(--brun); background:var(--creme); line-height:1.6; font-size:16px;}
h1,h2,h3{font-family:var(--font-display); font-weight:500; line-height:1.15; color:var(--brun);}
a{color:inherit;}
img{max-width:100%; display:block;}

/* 2. Layout & utilitaires ------------------------------------------------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.eyebrow{font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--terracotta-dark); font-weight:600;}
section{padding:96px 0;}
@media(max-width:720px){section{padding:64px 0;}}

/* 3. Navigation (header) -------------------------------------------------- */
header{position:sticky; top:0; z-index:50; background:rgba(242,237,228,0.92); backdrop-filter:blur(6px); border-bottom:0.5px solid rgba(58,42,34,0.12);}
nav{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1080px; margin:0 auto;}
.logo{font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:0.02em; display:flex; align-items:center; gap:9px;}
.logo svg{height:30px; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:32px; font-size:14px;}
.nav-links a{text-decoration:none; color:var(--brun); opacity:0.8;}
.nav-links a:hover{opacity:1;}
@media(max-width:640px){.nav-links a:not(.btn){display:none;}}

/* 4. Boutons -------------------------------------------------------------- */
.btn{display:inline-block; padding:12px 24px; border-radius:6px; font-size:14px; font-weight:600; text-decoration:none; text-align:center; border:1.5px solid var(--brun); transition:transform .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--terracotta); color:var(--blanc); border-color:var(--terracotta);}
.btn-ghost{background:transparent; color:var(--brun);}
.btn-ghost-light{background:transparent; color:var(--creme); border-color:rgba(242,237,228,0.5);}

/* 5. Hero ----------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; padding-top:72px; padding-bottom:64px;}
/* Forme décorative festonnée en fond, ancrée à droite */
.hero::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/hero-shape.svg") no-repeat right center; background-size:auto 118%;}
.hero .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start;}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero::before{background-size:auto 44%; background-position:right top;}
}
@media(max-width:560px){
  .hero::before{background-size:auto 32%; background-position:right top;}
}
.hero h1{font-size:clamp(32px,5.4vw,58px); margin:14px 0 16px; overflow-wrap:break-word;}
.hero .sub{font-size:19px; font-weight:500; color:var(--terracotta-dark); margin-bottom:18px;}
.hero .intro{font-size:17px; max-width:52ch; opacity:0.9; margin-bottom:24px;}
.tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;}
.tag{font-size:13px; padding:6px 14px; border-radius:999px; background:var(--beige); color:var(--brun);}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.stats-col{background:var(--blanc); border-radius:16px; padding:28px; border:0.5px solid rgba(58,42,34,0.1);}
.stat{padding:16px 0; border-bottom:0.5px solid rgba(58,42,34,0.12);}
.stat:last-child{border-bottom:none;}
.stat .num{font-family:var(--font-display); font-size:30px; color:var(--terracotta-dark); font-weight:600;}
.stat .label{font-size:13px; opacity:0.75; margin-top:2px;}
.quote-lateral{font-family:var(--font-display); font-style:italic; font-size:16px; margin-top:28px; padding-left:16px; border-left:2px solid var(--terracotta); opacity:0.85;}

/* 6. Constat / Flip cards ------------------------------------------------- */
.band-beige{background:var(--beige);}
.section-title{font-size:clamp(26px,3.6vw,36px); max-width:16ch; margin-bottom:44px;}
.group-label{font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:var(--terracotta-dark); font-weight:600; margin:36px 0 16px;}
.group-label:first-of-type{margin-top:0;}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;}
.flip-card{perspective:1200px; height:230px; cursor:pointer;}
.flip-inner{position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d;}
.flip-card.flipped .flip-inner{transform:rotateY(180deg);}
.flip-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; padding:22px; display:flex; flex-direction:column;}
.flip-front{background:var(--blanc); border:0.5px solid rgba(58,42,34,0.12);}
.flip-back{background:var(--brun); color:var(--creme); transform:rotateY(180deg);}
.flip-face h3{font-size:17px; margin-bottom:10px;}
.flip-back h3{color:var(--creme);}
.flip-face p{font-size:14px; opacity:0.9; flex:1;}
.flip-hint{font-size:12px; opacity:0.55; margin-top:auto;}

/* 7. Alliance (bande sombre) ---------------------------------------------- */
.band-dark{background:var(--brun); color:var(--creme);}
.band-dark h2{color:var(--creme);}
.band-dark .eyebrow{color:var(--terracotta);}
.alliance-quote{font-family:var(--font-display); font-style:italic; font-size:clamp(22px,3vw,30px); max-width:22ch; margin:18px 0 28px;}
.alliance-text{max-width:60ch; opacity:0.85; margin-bottom:48px;}
.quad-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:640px){.quad-grid{grid-template-columns:1fr;}}
.quad{border:0.5px solid rgba(242,237,228,0.25); border-radius:14px; padding:24px;}
.quad .qnum{font-family:var(--font-display); color:var(--terracotta); font-size:14px; margin-bottom:10px;}
.quad h3{color:var(--creme); font-size:17px; margin-bottom:8px;}
.quad p{font-size:14px; opacity:0.8;}

/* 8. Manifeste (bande terracotta) ----------------------------------------- */
.band-terracotta{background:var(--terracotta); color:var(--blanc);}
.manifesto-quote{font-family:var(--font-display); font-style:italic; font-size:clamp(24px,3.6vw,36px); max-width:20ch; margin-bottom:28px; line-height:1.25;}
.manifesto-text{max-width:60ch; opacity:0.95; margin-bottom:20px;}
.manifesto-sign{font-family:var(--font-display); font-style:italic; font-size:20px; margin-top:24px;}

/* 9. Offres --------------------------------------------------------------- */
.offer-band{border-radius:16px; padding:28px; margin-bottom:16px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:var(--blanc); border:0.5px solid rgba(58,42,34,0.12);}
.offer-band.signature{border:2px solid var(--terracotta); background:var(--blanc); position:relative; padding-top:40px;}
.signature-badge{position:absolute; top:-13px; left:28px; background:var(--terracotta); color:var(--blanc); font-size:12px; font-weight:600; padding:5px 14px; border-radius:999px;}
.offer-icon{width:44px; height:44px; border-radius:50%; background:var(--beige); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-display); font-size:18px; color:var(--terracotta-dark);}
.offer-body{flex:1; min-width:240px;}
.offer-title-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.offer-name{font-family:var(--font-display); font-size:19px; font-weight:600;}
.offer-sub{font-size:13px; opacity:0.65;}
.offer-badge{display:inline-block; font-size:12px; padding:4px 12px; border-radius:6px; background:var(--beige); color:var(--brun); margin:10px 0;}
.offer-desc{font-size:14px; opacity:0.85; max-width:58ch;}
.offer-checks{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px;}
.offer-checks span{font-size:13px; display:flex; align-items:center; gap:6px;}
.offer-checks span::before{content:'✦'; color:var(--terracotta);}

/* 10. Bio / À propos ------------------------------------------------------ */
.bio-grid{display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start;}
@media(max-width:640px){.bio-grid{grid-template-columns:1fr; justify-items:center; text-align:center;}}
.bio-photo{width:280px; height:280px; border-radius:50%; overflow:hidden; background:#E99578; border:0.5px solid rgba(58,42,34,0.15);}
.bio-photo img{width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.22);}
.bio-text p{margin-bottom:16px; max-width:60ch;}
.bio-sign{font-family:var(--font-display); font-style:italic; margin-top:20px; font-size:15px; opacity:0.85;}

/* 11. FAQ ----------------------------------------------------------------- */
details{border-bottom:0.5px solid rgba(58,42,34,0.15); padding:20px 0;}
summary{cursor:pointer; font-family:var(--font-display); font-size:17px; list-style:none; display:flex; justify-content:space-between; align-items:center;}
summary::-webkit-details-marker{display:none;}
summary::after{content:'+'; font-size:22px; color:var(--terracotta);}
details[open] summary::after{content:'–';}
details p{margin-top:14px; font-size:15px; opacity:0.85; max-width:64ch;}

/* 12. CTA final (orbites) ------------------------------------------------- */
.cta-orbit{position:relative; background:var(--brun); color:var(--creme); overflow:hidden; padding:130px 0;}
.cta-orbit .rings{position:absolute; inset:0; pointer-events:none; z-index:1;}
.cta-orbit .ring{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid rgba(196,113,74,0.32); border-radius:50%;}
.cta-orbit .ring.r1{width:min(560px,88vw); height:min(560px,88vw);}
.cta-orbit .ring.r2{width:min(780px,124vw); height:min(780px,124vw);}
.cta-orbit .ring.r3{width:min(1000px,164vw); height:min(1000px,164vw);}
.cta-orbit .ring.r4{width:min(1240px,204vw); height:min(1240px,204vw);}
.cta-orbit .dot{position:absolute; border-radius:50%; background:var(--blanc);}
.cta-orbit .inner{position:relative; z-index:2; text-align:center; max-width:560px; margin:0 auto; padding:0 24px;}
.cta-orbit .mono{width:64px; margin:0 auto 26px;}
.cta-orbit .mono svg{width:100%; height:auto; display:block;}
.cta-orbit h2{color:var(--creme); font-size:clamp(30px,4.4vw,46px); margin-bottom:20px;}
.cta-orbit .lead{font-size:16px; opacity:0.8; max-width:42ch; margin:0 auto 34px; line-height:1.6;}
.pill{display:inline-flex; align-items:center; gap:10px; background:var(--creme); color:var(--brun); padding:15px 30px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; transition:transform .15s ease;}
.pill:hover{transform:translateY(-1px);}
.pill svg{width:15px; height:15px; flex-shrink:0;}
@media(max-width:640px){.cta-orbit{padding:96px 0;} .cta-orbit .dot{transform:scale(0.7);}}

/* 13. Footer -------------------------------------------------------------- */
footer{background:var(--brun); color:var(--creme); padding:56px 0 32px;}
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr;}}
footer h4{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.6; margin-bottom:12px;}
footer a{text-decoration:none; opacity:0.85; display:block; margin-bottom:8px; font-size:14px;}
.footer-bottom{border-top:0.5px solid rgba(242,237,228,0.2); padding-top:20px; font-size:13px; opacity:0.6; text-align:center;}