/* ==========================================================================
   L'Aide de Paola — styles.css
   Palette : Bleu sapin / Porcelaine / Brume / Miel doré
   Typo    : Fraunces (titres) + Figtree (texte) — auto-hébergées
   ========================================================================== */

/* ---------- Polices ---------- */
@font-face{font-family:'Fraunces';src:url('/media/fonts/fraunces-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/media/fonts/fraunces-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/media/fonts/fraunces-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/media/fonts/figtree-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/media/fonts/figtree-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/media/fonts/figtree-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Design tokens ---------- */
:root{
  --sapin:#4C5843;          /* bleu sapin profond — confiance, lacs & montagnes */
  --sapin-2:#5B6950;        /* variante plus claire */
  --encre:#363C2F;          /* texte principal */
  --gris:#6C7161;           /* texte secondaire */
  --porcelaine:#FBF9F4;     /* fond principal */
  --brume:#F3EFE6;          /* sections alternées */
  --miel:#B06B4A;           /* accent doré — chaleur, luxe discret */
  --miel-clair:#D9A88C;
  --blanc:#FFFFFF;
  --ligne:#E6E0D3;

  --f-titre:'Fraunces',Georgia,serif;
  --f-texte:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;

  --w:1140px;
  --r:14px;
  --ombre:0 10px 40px rgba(22,50,59,.08);
  --transition:.25s cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--f-texte);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--encre);
  background:var(--porcelaine);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--sapin);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--miel)}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:600;line-height:1.18;color:var(--sapin);margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.1em}
em{font-family:var(--f-titre);font-style:italic;color:var(--miel);font-size:1.05em}
strong{font-weight:600;color:var(--sapin)}
ul{padding-left:1.2rem}
li{margin-bottom:.45em}
.conteneur{max-width:var(--w);margin:0 auto;padding:0 24px}
.section{padding:clamp(34px,4.5vw,56px) 0}
.section--brume{background:var(--brume)}
.section--sapin{background:var(--sapin);color:#EFEAE0}
.section--sapin h2,.section--sapin h3{color:var(--blanc)}
.section--sapin p{color:#DDDFD0}

/* Lien d'évitement (accessibilité) */
.skip{position:absolute;left:-9999px;top:0;background:var(--sapin);color:#fff;padding:10px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--miel);outline-offset:3px;border-radius:4px}

/* ---------- Signature : le fil d'or ---------- */
.fil{display:block;width:76px;height:12px;margin:0 0 12px;color:var(--miel)}
.centre .fil{margin-left:auto;margin-right:auto}
.sur-titre{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--miel);margin-bottom:14px;
}
.section--sapin .sur-titre{color:var(--miel-clair)}
.centre{text-align:center}
.intro-max{max-width:680px}
.centre .intro-max{margin-left:auto;margin-right:auto}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-texte);font-weight:600;font-size:1rem;
  padding:14px 28px;border-radius:999px;text-decoration:none;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition),color var(--transition);
  border:1.5px solid transparent;cursor:pointer;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--or{background:var(--miel);color:#fff;box-shadow:0 6px 20px rgba(185,146,76,.35)}
.btn--or:hover{background:#9A5A3C;color:#fff;transform:translateY(-2px)}
.btn--contour{border-color:var(--sapin);color:var(--sapin);background:transparent}
.btn--contour:hover{background:var(--sapin);color:#fff}
.section--sapin .btn--contour{border-color:#fff;color:#fff}
.section--sapin .btn--contour:hover{background:#fff;color:var(--sapin)}
.btn{white-space:nowrap}
.groupe-btn{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.centre .groupe-btn{justify-content:center}

html{overflow-x:clip}

/* ---------- Header ---------- */
.entete{
  position:sticky;top:0;z-index:100;
  background:rgba(251,249,244,.92);
  border-bottom:1px solid transparent;transition:border-color var(--transition),box-shadow var(--transition);
}
@supports (backdrop-filter:blur(10px)){
  .entete{background:rgba(251,249,244,.75)}
  .entete::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(10px)}
}
.entete.est-scrolle{border-color:var(--ligne);box-shadow:0 4px 24px rgba(22,50,59,.06)}
.entete__barre{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;line-height:1.1}
.logo__txt{display:flex;flex-direction:column}
.logo__embleme{width:46px;height:auto;flex:none}
.logo__nom{font-family:var(--f-titre);font-weight:600;font-size:1.35rem;color:var(--sapin)}
.logo__nom span{color:var(--miel);font-style:italic}
.logo__base{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-top:3px}
.nav{display:flex;align-items:center;gap:6px}
.nav__tete,.nav__cta,.voile-nav{display:none}
.nav a{
  white-space:nowrap;font-weight:500;font-size:.94rem;color:var(--encre);text-decoration:none;
  padding:8px 11px;border-radius:8px;transition:color var(--transition),background var(--transition);
}
.nav a:hover{color:var(--sapin);background:var(--brume)}
.nav a[aria-current="page"]{color:var(--miel);font-weight:600}
.entete .btn{padding:11px 22px;font-size:.95rem}

/* Burger */
.burger{
  display:none;background:none;border:none;cursor:pointer;padding:10px;
  width:48px;height:48px;border-radius:10px;
}
.burger span{display:block;width:24px;height:2px;background:var(--sapin);margin:5px auto;transition:transform var(--transition),opacity var(--transition)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero__villes{
  display:flex;align-items:center;gap:8px;margin:2px 0 18px;
  color:var(--gris);font-weight:500;letter-spacing:.04em;
}
.hero__villes svg{width:17px;height:17px;color:var(--miel);flex:none}
.hero{padding:clamp(32px,4.5vw,58px) 0 clamp(32px,4.5vw,54px);overflow:hidden}
.hero__grille{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero p.grand{font-size:1.18rem;color:var(--gris);max-width:34em}
.hero__visuel{position:relative}
.hero__carte{
  background:var(--sapin);border-radius:calc(var(--r) + 8px);
  padding:14px;box-shadow:var(--ombre);
}
.hero__carte svg{border-radius:var(--r)}
.hero__badge{
  position:absolute;left:-14px;bottom:26px;
  background:#fff;border:1px solid var(--ligne);border-radius:12px;
  padding:12px 18px;box-shadow:var(--ombre);
  display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:500;
}
.hero__badge svg{width:26px;height:26px;color:var(--miel);flex:none}

/* Bandeau de confiance */
.confiance{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);background:#fff}
.confiance__liste{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding:22px 0;margin:0;list-style:none;
}
.confiance__liste li{display:flex;align-items:center;gap:12px;justify-content:center;font-size:.95rem;font-weight:500;margin:0}
.confiance__liste svg{width:22px;height:22px;color:var(--miel);flex:none}

/* ---------- Cartes services ---------- */
.grille-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.carte{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--r);
  padding:34px 30px;text-decoration:none;color:var(--encre);
  display:flex;flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
a.carte:hover{transform:translateY(-5px);box-shadow:var(--ombre);border-color:var(--miel-clair);color:var(--encre)}
.carte__icone{
  width:54px;height:54px;border-radius:14px;background:var(--brume);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--sapin);
  transition:background var(--transition),color var(--transition);
}
a.carte:hover .carte__icone{background:var(--sapin);color:var(--miel-clair)}
.carte__icone svg{width:26px;height:26px}
.carte h3{margin-bottom:.4em}
.carte p{font-size:.97rem;color:var(--gris);margin-bottom:1em}
.carte__lien{margin-top:auto;font-weight:600;font-size:.93rem;color:var(--miel);display:inline-flex;align-items:center;gap:7px}
.carte__lien svg{width:15px;height:15px;transition:transform var(--transition)}
a.carte:hover .carte__lien svg{transform:translateX(4px)}

/* ---------- Étapes ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;counter-reset:etape}
.etape{position:relative;background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:38px 30px 30px}
.etape::before{
  counter-increment:etape;content:counter(etape,decimal-leading-zero);
  position:absolute;top:-16px;left:26px;
  font-family:var(--f-titre);font-style:italic;font-size:1.05rem;color:var(--miel);
  background:var(--porcelaine);padding:2px 12px;border:1px solid var(--miel-clair);border-radius:999px;
}
.section--brume .etape::before{background:var(--brume)}
.etape p{font-size:.97rem;color:var(--gris);margin:0}

/* ---------- Deux colonnes ---------- */
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.deux-col--inverse .deux-col__media{order:2}
.deux-col__media{border-radius:calc(var(--r) + 6px);overflow:hidden;box-shadow:var(--ombre)}

/* ---------- Liste coche ---------- */
.liste-coche{list-style:none;padding:0;margin:0 0 1.2em}
.liste-coche li{position:relative;padding-left:34px;margin-bottom:12px}
.liste-coche li::before{
  content:'';position:absolute;left:0;top:5px;width:20px;height:20px;
  border-radius:50%;background:var(--miel);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.section--sapin .liste-coche li::before{background:var(--miel-clair)}

/* ---------- Citation / valeurs ---------- */
.citation{
  font-family:var(--f-titre);font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.45;color:var(--sapin);
  max-width:820px;margin:0 auto;text-align:center;
}
.citation footer{font-family:var(--f-texte);font-style:normal;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;color:var(--miel);margin-top:22px}

/* ---------- Zones ---------- */
.zones{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.zone{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--r);
  padding:26px 24px;text-decoration:none;color:var(--encre);text-align:center;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.zone:hover{transform:translateY(-4px);box-shadow:var(--ombre);border-color:var(--miel-clair);color:var(--encre)}
.zone svg{width:26px;height:26px;color:var(--miel);margin:0 auto 12px}
.zone h3{font-size:1.15rem;margin-bottom:.2em}
.zone p{font-size:.85rem;color:var(--gris);margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:40px auto 0}
.faq details{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.faq summary{
  cursor:pointer;padding:20px 54px 20px 26px;font-weight:600;color:var(--sapin);
  list-style:none;position:relative;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-family:var(--f-titre);font-size:1.5rem;color:var(--miel);transition:transform var(--transition);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details > div{padding:0 26px 22px;color:var(--gris);font-size:.99rem}

/* ---------- CTA final ---------- */
.cta-final{text-align:center}
.cta-final .citation{margin-bottom:8px}

/* ---------- Footer ---------- */
.pied{background:var(--sapin);color:#C9CDB7;font-size:.95rem;border-top:1px solid rgba(255,255,255,.22)}
.pied a{color:#E3DCCC;text-decoration:none}
.pied a:hover{color:var(--miel-clair);text-decoration:underline}
.pied__haut{
  display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:44px;
  padding:64px 0 48px;border-bottom:1px solid rgba(255,255,255,.12);
}
.pied h3{color:#fff;font-family:var(--f-texte);font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:10px}
.pied__logo .logo__nom{color:#fff;font-size:1.5rem}
.pied__logo .logo__base{color:#ACB29B}
.pied__logo p{margin-top:16px;max-width:30em;color:#C9CDB7}
.pied__bas{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding:24px 0;font-size:.85rem;color:#99A187;
}
.pied__bas ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;padding:0;margin:0}
.pied__bas li{margin:0}

/* ---------- Pages intérieures ---------- */
.bandeau-page{position:relative;overflow:hidden;background:var(--sapin);color:#fff;padding:clamp(16px,2.2vw,26px) 0 calc(clamp(16px,2.2vw,26px) + 50px)}
.bandeau-page--illu{padding:clamp(22px,3vw,34px) 0 calc(clamp(22px,3vw,34px) + 50px)}
.bandeau-page__illu{position:absolute;top:50%;right:clamp(-40px,-2vw,0px);transform:translateY(-50%);height:150%;width:auto;pointer-events:none;user-select:none}
.bandeau-page__voile{position:absolute;inset:0;background:linear-gradient(90deg,var(--sapin) 0%,var(--sapin) 40%,rgba(76,88,67,.66) 72%,rgba(76,88,67,.24) 100%)}
.bandeau-page .conteneur{position:relative;z-index:1}
@media (max-width:1020px){.bandeau-page__voile{background:linear-gradient(90deg,var(--sapin) 0%,rgba(76,88,67,.86) 55%,rgba(76,88,67,.55) 100%)}}
.bandeau-page h1{color:#fff;font-size:clamp(1.58rem,3.9vw,2.55rem);margin-bottom:.3em}
.bandeau-page p{color:#DDDFD0;font-size:1.12rem;max-width:38em;margin-bottom:0}
.fil-ariane{font-size:.85rem;margin-bottom:12px;color:#ACB29B}
.fil-ariane a{color:#DDDFD0;text-decoration:none}
.fil-ariane a:hover{color:var(--miel-clair)}
.fil-ariane span{margin:0 8px;color:#7E886C}
.contenu-page{max-width:760px}
.contenu-page h2{margin-top:1.6em}
.contenu-page h2:first-child{margin-top:0}

/* Encadré */
.encadre{
  background:var(--brume);border-left:3px solid var(--miel);border-radius:0 var(--r) var(--r) 0;
  padding:24px 28px;margin:1.6em 0;
}
.encadre p:last-child{margin-bottom:0}
.note{font-size:.85rem;color:var(--gris)}

/* Coordonnées contact */
.coordonnees{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.coordonnee{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--r);
  padding:34px;text-align:center;
}
.coordonnee svg{width:32px;height:32px;color:var(--miel);margin:0 auto 16px}
.coordonnee h3{margin-bottom:.3em}
.coordonnee p{color:var(--gris);font-size:.95rem}
.coordonnee .btn{margin-top:8px}

/* ---------- Animations d'apparition ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .grille-cartes{grid-template-columns:repeat(2,1fr)}
  .zones{grid-template-columns:repeat(2,1fr)}
  .pied__haut{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:1020px){
  .hero__grille{grid-template-columns:1fr;gap:40px}
  .hero p.grand{max-width:none}
  .deux-col{grid-template-columns:1fr;gap:36px}
  .deux-col--inverse .deux-col__media{order:0}
  .etapes{grid-template-columns:1fr;gap:30px}
  .confiance__liste{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .confiance__liste li{justify-content:flex-start}
  /* Navigation mobile : panneau qui glisse depuis la droite, par-dessus le site */
  .burger{display:block}
  .btn{padding:10px 18px;font-size:.82rem;gap:7px}
  .btn svg{width:15px;height:15px}
  .entete .btn{padding:10px 18px;font-size:.82rem}
  .entete__cta{margin-left:auto}
  .entete__barre{gap:10px}
  .nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(80vw,360px);
    background:var(--porcelaine);
    flex-direction:column;align-items:stretch;gap:0;padding:16px 22px 30px;
    transform:translateX(105%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:-18px 0 48px rgba(54,60,47,.22);
    overflow-y:auto;z-index:120;
  }
  .nav.ouvert{transform:none}
  .nav a{padding:15px 6px;font-size:1.08rem;border-bottom:1px solid var(--ligne);border-radius:0}
  .nav__tete{
    display:flex;align-items:center;justify-content:space-between;
    padding:4px 0 14px;border-bottom:1px solid var(--ligne);margin-bottom:4px;
  }
  .nav__tete .logo__nom{font-size:1.2rem}
  .nav__fermer{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:0;border-radius:10px;
    background:var(--brume);color:var(--sapin);cursor:pointer;
  }
  .nav__cta{display:inline-flex;justify-content:center;margin-top:20px;border-bottom:none;border-radius:999px}
  .voile-nav{
    display:block;position:fixed;top:0;right:0;bottom:0;left:0;
    background:rgba(54,60,47,.45);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
    z-index:110;
  }
  body.menu-ouvert .voile-nav{opacity:1;visibility:visible}
}
@media (max-width:560px){
  .grille-cartes{grid-template-columns:1fr}
  .zones{grid-template-columns:1fr}
  .coordonnees{grid-template-columns:1fr}
  .pied__haut{grid-template-columns:1fr}
  .hero__badge{left:10px;bottom:14px;padding:10px 14px;font-size:.82rem}
  .conteneur{padding:0 20px}
}

/* ---------- Impression ---------- */
@media print{
  .entete,.pied,.groupe-btn{display:none}
  body{background:#fff;color:#000}
}

/* Variante 2 colonnes (page À propos) */
@media (min-width:561px){.grille-cartes--2{grid-template-columns:repeat(2,1fr)}}

/* Emblème du pied de page */
.pied__embleme{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:var(--porcelaine);margin-bottom:18px}
.pied__embleme img{width:52px;height:auto}
@media (max-width:560px){
  .logo__embleme{width:34px}
  .logo__base{display:none}
  .logo{gap:9px}
  .logo__nom{font-size:1.08rem}
  .entete__barre{min-height:64px;gap:8px}
}

/* Largeurs intermédiaires : header compact pour garder le menu sur une ligne */
@media (max-width:1140px) and (min-width:1021px){
  .logo__base{display:none}
  .entete__barre{gap:12px}
  .nav a{padding:8px 8px;font-size:.92rem}
  .entete .btn{padding:10px 16px}
}

/* Très petits écrans : le header reste sur une ligne */
@media (max-width:380px){
  .logo__embleme{width:30px}
  .logo__nom{font-size:1rem}
  .entete__cta svg{display:none}
  .conteneur{padding:0 14px}
}