/* ==========================================================================
   RIA REFUGE COLLECTION — Canada
   Charte fidèle à la maquette validée par Ghita (palette + Fraunces/Public Sans)
   ========================================================================== */

@font-face{font-family:'Fraunces';src:url(fonts/fraunces-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(fonts/fraunces-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(fonts/fraunces-italic-400.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Public Sans';src:url(fonts/publicsans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url(fonts/publicsans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url(fonts/publicsans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --olive:#2F3B2E; --olive-txt:#E6DFD3; --creme:#F7F4EE; --creme-2:#F0EFE9;
  --beige:#E6DFD3; --beige-2:#D8DDD5; --brun:#8B4A2B; --brun-fonce:#5C3722;
  --dore:#B08D57; --encre:#1E1C19; --noir:#151513; --gris:#4A4640; --gris-clair:#9C978E;
  --ligne:rgba(30,28,25,.12); --ligne-clair:rgba(230,223,211,.22);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',system-ui,-apple-system,sans-serif;
  --wrap:1240px; --wrap-txt:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.sr{position:absolute;left:-9999px}

.env{max-width:var(--wrap);margin:0 auto;padding:0 48px}
.env-txt{max-width:var(--wrap-txt);margin:0 auto;padding:0 48px}
.sec{padding:clamp(4rem,8vw,7rem) 0}
.sec-s{padding:clamp(3rem,6vw,5rem) 0}

.bg-olive{background:var(--olive);color:var(--olive-txt)}
.bg-olive h1,.bg-olive h2,.bg-olive h3{color:var(--creme)}
.bg-creme{background:var(--creme)}
.bg-beige{background:var(--beige)}
.bg-noir{background:var(--noir);color:var(--olive-txt)}
.bg-noir h2{color:var(--creme)}

.eyebrow{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brun);margin:0 0 16px}
.bg-olive .eyebrow,.bg-noir .eyebrow{color:var(--dore)}

h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h3{font-size:1.3rem}
.lead{font-size:1.12rem;color:var(--gris)}
.bg-olive .lead{color:var(--olive-txt)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:2px;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.25s;border:1px solid transparent}
.btn-creme{background:var(--beige);color:var(--encre)}
.btn-creme:hover{background:#fff;transform:translateY(-2px)}
.btn-brun{background:var(--brun-fonce);color:var(--creme)}
.btn-brun:hover{background:var(--brun);transform:translateY(-2px)}
.btn-ligne{border-color:var(--ligne);color:var(--encre)}
.btn-ligne:hover{background:var(--encre);color:var(--creme)}
.lien-fleche{font-weight:600;font-size:14px;letter-spacing:.03em;border-bottom:1.5px solid var(--brun);padding-bottom:2px;color:var(--encre);transition:.2s}
.lien-fleche:hover{color:var(--brun)}
.bg-olive .lien-fleche,.bg-noir .lien-fleche{color:var(--creme);border-color:var(--dore)}

.nav{position:sticky;top:0;z-index:60;background:var(--olive)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:20px 48px;display:flex;align-items:center;justify-content:space-between}
.marque{font-family:var(--serif);font-size:20px;letter-spacing:.06em;font-weight:600;color:var(--creme)}
.liens{display:flex;gap:34px;align-items:center;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--olive-txt)}
.liens a{color:var(--olive-txt);transition:.2s;padding:2px 0}
.liens a:hover{color:#fff}
.liens .pont{color:var(--dore);border:1px solid rgba(176,141,87,.5);padding:5px 12px;letter-spacing:.06em}
.liens .pont:hover{background:rgba(176,141,87,.15);color:var(--dore)}
.liens .en{border:1px solid var(--ligne-clair);padding:4px 11px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:var(--olive-txt);transition:.3s}

.hero{position:relative;height:92vh;min-height:620px;max-height:900px;overflow:hidden}
.hero .fond,.hero .fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,59,46,.25)0%,rgba(21,21,19,.5)55%,rgba(21,21,19,.9)100%);z-index:1}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 48px 72px}
.hero-c{max-width:var(--wrap-txt);margin:0 auto;width:100%}
.hero .eyebrow{color:var(--dore);margin-bottom:18px}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.05;color:var(--creme);font-weight:500;max-width:20ch;margin:0 0 18px}
.hero-sur{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--olive-txt);max-width:52ch;margin:0 0 22px;font-style:italic;font-family:var(--serif)}
.hero-lead{font-size:1.15rem;color:var(--olive-txt);max-width:48ch;margin:0 0 32px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}

.signature{background:var(--noir);text-align:center}
.signature .env-txt{max-width:820px;padding-top:clamp(4rem,7vw,6.5rem);padding-bottom:clamp(4rem,7vw,6.5rem)}
.sig-mark{margin:0 auto 30px;display:block}
.sig-fr{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.5;font-weight:400;color:var(--creme);margin:0}
.sig-en{font-size:15px;font-style:italic;line-height:1.6;color:var(--gris-clair);margin:26px 0 0}

.intro{text-align:center}
.intro .env-txt{max-width:760px}
.intro h2{margin-bottom:1.1rem}
.intro p{color:var(--gris)}

.mix{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.mix.inv .mix-txt{order:2}
.mix-img{position:relative;border-radius:2px;overflow:hidden}
.mix-img img{width:100%;height:clamp(340px,42vw,520px);object-fit:cover}
.mix-txt h2{margin-bottom:1.1rem}
.mix-txt .lead{margin-bottom:1.4rem}

.pain-list{list-style:none;margin:1.5rem 0 0;padding:0}
.pain-list li{padding:.9rem 0 .9rem 1.8rem;border-bottom:1px solid var(--ligne-clair);position:relative;color:var(--olive-txt)}
.pain-list li::before{content:"";position:absolute;left:0;top:1.35rem;width:10px;height:1px;background:var(--dore)}
.pain-list li:last-child{border-bottom:0}

.benef{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.8rem)}
.benef .ico-b{color:var(--brun);margin-bottom:14px;display:block}
.benef .ico-b svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5}
.benef h3{font-size:1.22rem;font-weight:600;margin-bottom:.5rem}
.benef p{font-size:.98rem;margin:0;color:var(--gris)}

.srv-tete{text-align:center;max-width:640px;margin:0 auto clamp(2.5rem,5vw,3.5rem)}
.srv-tete p{color:var(--gris)}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
.grille>div{background:var(--creme);padding:32px 26px}
.grille .ico{color:var(--brun);display:block;margin-bottom:14px}
.grille .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5}
.grille h3{font-size:1.05rem;font-weight:600;margin-bottom:.5rem}
.grille p{font-size:.9rem;margin:0;color:var(--gris)}
.grille .fin{display:flex;align-items:center;justify-content:center;background:var(--creme-2)}
.grille .fin svg{width:44px;height:44px;stroke:var(--dore);fill:none;stroke-width:1.4}

.why-list{list-style:none;margin:1.4rem 0;padding:0}
.why-list li{padding:.7rem 0 .7rem 1.8rem;position:relative;color:var(--olive-txt)}
.why-list li::before{content:"";position:absolute;left:0;top:1.15rem;width:10px;height:1px;background:var(--dore)}
.why-res{margin-top:1.4rem;font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--creme)}

.location{position:relative;overflow:hidden;text-align:center;color:var(--creme)}
.location .fond,.location .fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.location::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,21,19,.55),rgba(21,21,19,.72));z-index:1}
.location .env-txt{position:relative;z-index:2;padding-top:clamp(5rem,9vw,8rem);padding-bottom:clamp(5rem,9vw,8rem);max-width:720px}
.location .eyebrow{color:var(--dore)}
.location h2{color:var(--creme);margin-bottom:1rem}
.location p{color:var(--olive-txt);margin:0}

.gal-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem;flex-wrap:wrap}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.gal-card{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:4/3;background:var(--beige)}
.gal-card img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gal-card:hover img{transform:scale(1.04)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(21,21,19,.8));color:var(--creme)}
.gal-cap b{font-family:var(--serif);font-size:1.1rem;font-weight:500;display:block}
.gal-cap span{font-size:.85rem;color:var(--olive-txt)}

.trust{text-align:center}
.trust .env-txt{max-width:760px}
.trust-q{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);font-style:italic;line-height:1.5;color:var(--encre);margin:0 0 1rem}
.trust-c{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--brun);font-weight:600}
.trust-p{margin-top:2rem;color:var(--gris);font-size:1rem}

.cta-fin{background:var(--noir);text-align:center}
.cta-fin .env-txt{padding-top:clamp(4rem,8vw,6.5rem);padding-bottom:clamp(4rem,8vw,6.5rem);max-width:720px}
.cta-fin h2{color:var(--creme);margin-bottom:1rem}
.cta-fin p{color:var(--olive-txt);margin:0 0 2rem}
.cta-fin .hero-cta{justify-content:center}

.pied{background:var(--encre);color:var(--gris-clair);padding:64px 0 30px}
.pied-h{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(230,223,211,.12)}
.pied .marque{font-size:18px;color:var(--creme);margin-bottom:14px;display:block}
.pied-h p{font-size:14px;max-width:34ch;color:var(--gris-clair)}
.pied h4{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dore);margin:0 0 16px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li a{display:block;padding:5px 0;font-size:14px;color:var(--gris-clair);transition:.2s}
.pied li a:hover{color:var(--brun)}
.pied-bas{display:flex;justify-content:space-between;padding-top:24px;font-size:12.5px;color:var(--gris-clair);flex-wrap:wrap;gap:12px}

@media (max-width:960px){
  .env,.env-txt,.nav-in,.hero-in{padding-left:26px;padding-right:26px}
  .mix,.mix.inv .mix-txt{grid-template-columns:1fr}
  .mix.inv .mix-txt{order:0}
  .grille{grid-template-columns:1fr 1fr}
  .benef{grid-template-columns:1fr;gap:1.6rem}
  .gal-grid{grid-template-columns:1fr 1fr}
  .pied-h{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .liens{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--olive);flex-direction:column;justify-content:center;align-items:flex-start;padding:40px;gap:6px;transform:translateX(100%);transition:.35s;z-index:70}
  .liens.ouvert{transform:none}
  .liens a{font-size:16px;padding:12px 0;width:100%;border-bottom:1px solid var(--ligne-clair)}
  .burger{display:flex;z-index:80}
  .grille,.gal-grid,.pied-h{grid-template-columns:1fr}
  .gal-tete{flex-direction:column;align-items:flex-start}
  .hero{height:auto;min-height:0;padding-top:0}
  .hero-in{position:static;padding:48px 26px 56px;background:var(--olive)}
  .hero::after{display:none}
  .hero .fond{position:relative;height:44vh}
}

/* étapes numérotées (gestion) */
.etapes{display:flex;flex-direction:column}
.etape{display:flex;gap:22px;padding:20px 0;border-bottom:1px solid var(--ligne)}
.etape:last-child{border-bottom:0}
.et-n{font-family:var(--serif);font-size:1.8rem;color:var(--dore);font-weight:600;line-height:1;flex:none}
.etape h3{font-size:1.15rem;font-weight:600;margin-bottom:.35rem}
.etape p{margin:0;color:var(--gris);font-size:.98rem}

/* listes à puces (refuges) */
.plist{list-style:none;margin:0;padding:0}
.plist li{padding:.85rem 0 .85rem 1.6rem;border-bottom:1px solid var(--ligne);position:relative;color:var(--gris);font-size:1rem}
.plist li::before{content:"";position:absolute;left:0;top:1.3rem;width:9px;height:1px;background:var(--brun)}
.plist li:last-child{border-bottom:0}
.plist-clair li{color:var(--olive-txt);border-bottom-color:var(--ligne-clair)}
.plist-clair li::before{background:var(--dore)}

/* formulaire contact */
.pot{position:absolute;left:-9999px}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.champ{margin-bottom:1rem}
.champ label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.champ input,.champ select,.champ textarea{width:100%;padding:12px 14px;border:1px solid var(--ligne);border-radius:2px;font-family:var(--sans);font-size:15px;background:#fff;color:var(--encre);transition:.2s}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--brun)}
.champ textarea{min-height:110px;resize:vertical}
.consentement{font-size:12.5px;color:var(--gris-clair);margin:1rem 0}
.consentement a{color:var(--brun);text-decoration:underline}
.reponse{margin-top:1rem;font-size:14px}
.reponse.ok{color:#3d6b3d}.reponse.ko{color:#a5202a}
@media(max-width:680px){.paire{grid-template-columns:1fr}}
.calendly-vide{border:1px dashed var(--ligne);border-radius:2px;padding:48px 24px;text-align:center;color:var(--gris);background:var(--creme-2);min-height:320px;display:flex;align-items:center;justify-content:center}
/* faq */
.faq details{border-bottom:1px solid var(--ligne);padding:4px 0}
.faq summary{cursor:pointer;padding:16px 0;font-family:var(--serif);font-size:1.1rem;color:var(--encre);list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:1.4rem;color:var(--brun);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--gris);padding:0 0 16px;margin:0;font-size:.98rem}

/* forcer les grilles inline en responsive (services/gestion/refuges) */
@media (max-width:960px){
  .grille[style*="repeat(4"],.grille[style*="repeat(3"]{grid-template-columns:1fr 1fr !important}
}
@media (max-width:680px){
  .grille[style*="repeat(4"],.grille[style*="repeat(3"]{grid-template-columns:1fr !important}
}

/* signature horizontale (FR | trait | EN) */
.sig-duo{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:.5rem}
.sig-duo .sig-fr,.sig-duo .sig-en{margin:0;text-align:center}
.sig-duo .sig-en{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.5;color:var(--olive-txt)}
.sig-trait{width:1px;height:100%;min-height:90px;background:rgba(230,223,211,.3);display:block}
.sig-base{margin:clamp(1.8rem,3vw,2.4rem) 0 0;font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-clair)}
@media (max-width:760px){
  .sig-duo{grid-template-columns:1fr;gap:1.8rem}
  .sig-trait{width:58px;height:1px;min-height:0;margin:0 auto}
}

/* ===== Logo RIA dans la marque (nav + footer) ===== */
.marque{display:inline-flex;align-items:center;gap:12px}
.marque img{display:block;flex:none}
.marque span{font-family:var(--serif);font-weight:600;letter-spacing:.06em}
.pied .marque span{font-size:18px;color:var(--creme)}



/* ===== INTERACTIVITÉ AU SURVOL ===== */
.grille>div:not(.fin){transition:background .3s,transform .3s}
.grille>div:not(.fin):hover{background:#fff;transform:translateY(-3px);position:relative;z-index:2;box-shadow:0 16px 40px rgba(30,28,25,.09)}
.grille .ico svg{transition:transform .3s}
.grille>div:hover .ico svg{transform:scale(1.12)}
.benef .carte{transition:transform .3s}
.benef .carte:hover{transform:translateY(-4px)}
.benef .carte:hover .ico-b svg{transform:scale(1.12);transition:transform .3s}
.btn{transition:.25s}
.lien-fleche{transition:.2s}
.gal-card{transition:transform .3s,box-shadow .3s}
.gal-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(30,28,25,.18)}
.mix-img img{transition:transform .6s}
.mix-img:hover img{transform:scale(1.03)}
.srv-logo{margin:0 auto 1rem}

/* ===== Section R-I-A (copie exacte de la structure Maroc) ===== */
.ria{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3.5vw,3rem);border-top:1px solid var(--ligne);padding-top:2.4rem}
.ria>div{border-left:1px solid var(--ligne);padding-left:1.3rem}
.ria h3{font-size:1.55rem;margin-bottom:.3rem}
.ria span{color:var(--brun);font-size:.9rem}
.ria p{font-size:.96rem;margin-top:.65rem;color:var(--gris)}
@media (max-width:760px){.ria{grid-template-columns:1fr;gap:1.5rem}}
.ria-bloc{text-align:center}
.ria-bloc>img{width:52px;height:52px;margin:0 auto 1.5rem;opacity:.75}
.ria-phrase{font-size:clamp(1.02rem,1.92vw,1.68rem);line-height:1.5;max-width:none;margin:0 auto .7rem;font-weight:400;text-wrap:balance}
.ria-phrase em{font-style:normal;font-size:1.5em;color:var(--brun);letter-spacing:-.01em}
.ria-sous{font-family:var(--serif);font-style:italic;color:var(--gris-clair);font-size:1.02rem;margin:0 auto clamp(2rem,4vw,3rem)}
.ria-bloc .ria{text-align:left}
.ria-bloc .ria>div{border-left:0;padding-left:0}
@media (max-width:760px){.ria-phrase{font-size:1.18rem;line-height:1.55;max-width:26ch}.ria-phrase em{font-size:1.38em}}