/* =====================================================
   Laëtitia Cardinale — système de design de la refonte
   Charte 2026 : reprise du nouveau logo (arbre trait &
   feuilles filaires) et du dégradé chaud de la carte de
   visite. Palette entièrement chaleureuse — cuivre, or,
   ambre, bruns et crèmes. Playfair Display + Montserrat.
   ===================================================== */
:root{
  /* fonds & encre */
  --fond:#FDFAF4;          /* ivoire chaud */
  --creme:#F2EADD;         /* crème de la carte (échantillonnée) */
  --beige:#EBD9BE;         /* beige de la carte */
  --sable:#E6CDAE;         /* sable de la carte (échantillonné) */
  --encre:#3B2A18;         /* brun très foncé — texte */

  /* famille chaude reprise du logo */
  --brun:#5A3612;          /* brun profond (tronc, feuilles sombres) */
  --brun-doux:#8A5522;     /* brun moyen */
  --cuivre:#B5701F;        /* cuivre */
  --orange:#E08A2A;        /* orange vif — accent */
  --ambre:#D89B2E;         /* ambre */
  --dore:#DFA945;          /* doré */
  --dore-clair:#E8C06A;    /* doré clair */

  /* rôles (ex-turquoise, retournés au chaud) */
  --accent:#C9832A;        /* accent clair (cuivre-or) */
  --accent-fort:#7A4416;   /* accent profond — boutons, liens */
  --accent-pale:#F3E7D0;   /* bande crème */

  /* dégradé signature de la carte de visite — trois zones lisibles
     (sable | crème | blanc), fidèle à la carte, réservé à l'accueil */
  --degrade-carte:linear-gradient(107deg,
    #E6CDAE 0%, #E6CDAE 20%,
    #F2EADD 40%, #F2EADD 52%,
    #FFFFFF 76%, #FFFFFF 100%);

  --serif:'Playfair Display',Georgia,serif;
  --sans:'Montserrat',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--fond);
  color:var(--encre);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.79;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-fort)}

/* ---------- bandeau démo ---------- */

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(253,250,244,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(90,54,18,.10);
}
.header-in{
  max-width:1160px;margin:0 auto;padding:11px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* marque : arbre + nom, verrouillage typographique */
.marque{display:flex;align-items:center;gap:13px;text-decoration:none}
.marque img{height:54px;width:auto}
.marque-txt{display:flex;flex-direction:column;line-height:1.04}
.marque-txt strong{
  font-family:var(--serif);font-weight:500;font-size:20px;
  color:var(--encre);letter-spacing:.005em;
}
.marque-txt small{
  font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cuivre);margin-top:4px;
}
nav{display:flex;gap:26px;flex-wrap:wrap}
nav a{
  font-size:12.5px;font-weight:500;letter-spacing:.06em;
  color:var(--encre);text-decoration:none;
  padding-bottom:3px;position:relative;white-space:nowrap;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--ambre);transition:width .3s ease;
}
nav a:hover::after,nav a:focus-visible::after,nav a.actif::after{width:100%}
nav a.actif{font-weight:600}
nav a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.burger{display:none}

/* ---------- utilitaires ---------- */
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cuivre);margin-bottom:16px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--ambre)}
.eyebrow.centre{justify-content:center}
.eyebrow.centre::after{content:"";width:26px;height:1px;background:var(--ambre)}
.sep{
  display:flex;align-items:center;justify-content:center;gap:16px;
  max-width:440px;margin:0 auto;padding:0 24px;
}
.sep::before,.sep::after{
  content:"";flex:1;height:1px;background:rgba(90,54,18,.18);
}
.sep svg{width:22px;height:auto;flex:none}
.reveal{opacity:0;translate:0 28px;transition:opacity .8s ease,translate .8s ease}
.reveal.vue{opacity:1;translate:0 0}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:14px;
  padding:16px 36px;border-radius:3px;letter-spacing:.04em;
  transition:translate .3s ease,box-shadow .3s ease;
}
.btn:hover{translate:0 -3px}
.btn-plein{
  background:var(--accent-fort);color:var(--fond);
  box-shadow:0 16px 34px -14px rgba(122,68,23,.6);
}
.btn-ligne{
  border:1.5px solid var(--accent-fort);color:var(--accent-fort);
  background:rgba(253,250,244,.6);
}
.lien-ambre{
  font-weight:600;text-decoration:none;color:var(--accent-fort);
  border-bottom:2px solid var(--ambre);padding-bottom:2px;
}

/* ---------- hero accueil ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:110px 24px 130px;
  text-align:center;
  background:var(--fond);
}
.hero-in{max-width:780px;margin:0 auto;position:relative;z-index:2}
.hero .identite{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cuivre);margin-bottom:30px;
  display:inline-flex;align-items:center;gap:14px;
}
.hero .identite::before,.hero .identite::after{
  content:"";width:34px;height:1px;background:var(--ambre);
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(29px,4.4vw,48px);line-height:1.35;
  margin-bottom:30px;
}
.hero p{
  font-size:16.5px;line-height:1.85;max-width:620px;margin:0 auto 16px;
  color:rgba(59,42,24,.86);
}
.hero .premier-pas{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(21px,2.7vw,28px);
  color:var(--accent-fort);margin:40px auto 18px;
}

/* ---------- feuilles animées ----------
   Chaque feuille porte son propre délai (--d) : la chute dure 2.4s
   et la respiration démarre exactement à l'atterrissage
   (calc(var(--d) + 2.4s)), sans à-coup. Les durées de respiration
   (--dur) varient d'une feuille à l'autre pour désynchroniser. */
.feuille{position:absolute;opacity:0;pointer-events:none;z-index:1;--d:0s;--dur:7s}
.feuille svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(90,54,18,.12))}
body.chargee .feuille{animation:se-poser 2.4s cubic-bezier(.3,.6,.28,.99) var(--d) both}
body.chargee .feuille svg{animation:respire var(--dur) ease-in-out calc(var(--d) + 2.4s) infinite}
.f1{width:54px;top:9%;left:6%;rotate:-28deg;--d:.1s;--dur:6.4s}
.f2{width:40px;top:30%;left:12%;rotate:42deg;--d:.55s;--dur:7.6s}
.f3{width:46px;top:13%;right:8%;rotate:24deg;--d:.3s;--dur:7s}
.f4{width:32px;top:38%;right:14%;rotate:-48deg;--d:.8s;--dur:6.8s}
.f5{width:36px;bottom:16%;left:20%;rotate:70deg;--d:1s;--dur:8.2s}
.f6{width:44px;bottom:10%;right:22%;rotate:-12deg;--d:1.2s;--dur:7.3s}
@keyframes se-poser{
  0%{opacity:0;translate:-18px -64px}
  45%{opacity:.9;translate:8px -22px}
  75%{translate:-3px -6px}
  100%{opacity:.92;translate:0 0}
}
@keyframes respire{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-9px) rotate(4deg)}
}

/* =====================================================
   Intro d'accueil — les feuilles dispersées se
   rassemblent pour reconstruire l'arbre du logo.
   Métaphore : recoller les morceaux, petit à petit.
   ===================================================== */
html.intro-actif,html.intro-actif body{overflow:hidden}
#intro{
  position:fixed;inset:0;z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(22px,4vw,40px);
  background:var(--fond);
  transition:opacity 1s ease;
}
#intro.parti{opacity:0;pointer-events:none}
.intro-stage{
  position:relative;
  width:min(66vw,300px);aspect-ratio:1000/1283;
}
.intro-logo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:0;scale:.96;
  transition:opacity 1s ease,scale 1.2s cubic-bezier(.2,.7,.25,1);
  filter:drop-shadow(0 22px 40px rgba(90,54,18,.18));
}
.intro-stage.assemble .intro-logo{opacity:1;scale:1}
.intro-piece{
  position:absolute;height:auto;
  will-change:transform,opacity;opacity:0;pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(90,54,18,.10));
}
.intro-mot{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(16px,2.6vw,23px);color:var(--accent-fort);
  text-align:center;max-width:min(80vw,420px);line-height:1.5;
  opacity:0;translate:0 10px;
  transition:opacity 1.1s ease,translate 1.1s ease;
}
#intro.montre-mot .intro-mot{opacity:1;translate:0 0}
.intro-passer{
  position:absolute;bottom:26px;right:28px;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(59,42,24,.45);opacity:0;transition:opacity .8s ease,color .3s ease;
}
.intro-passer:hover,.intro-passer:focus-visible{color:var(--accent-fort)}
.intro-passer:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
#intro.montre-passer .intro-passer{opacity:1}

/* ---------- en-tête des pages intérieures ---------- */
.entete-page{
  position:relative;overflow:hidden;text-align:center;
  padding:84px 24px 78px;
  background:var(--fond);
  border-bottom:1px solid rgba(90,54,18,.07);
}
.entete-page h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.6vw,52px);line-height:1.25;
}
.entete-page .sous-titre{
  max-width:620px;margin:20px auto 0;font-size:16px;color:rgba(59,42,24,.84);
}
.entete-page .fp{width:42px;top:24%;left:9%;rotate:-24deg}
.entete-page .fp2{width:34px;bottom:22%;right:9%;rotate:36deg}

/* ---------- sections génériques ---------- */
.section{padding:90px 24px}
.section-in{max-width:1120px;margin:0 auto}
.section h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3vw,36px);line-height:1.4;margin-bottom:20px;
}
.section .prose{max-width:680px;font-size:15.5px;color:rgba(59,42,24,.86)}
.section .prose p{margin-bottom:16px}
.bande{background:var(--creme)}

/* média + texte côte à côte */
.duo{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center;
}
.duo.inverse{grid-template-columns:1.1fr 1fr}
.duo figure{position:relative;margin-right:14px}
.duo figure img{
  border-radius:8px;width:100%;
  box-shadow:0 30px 70px -30px rgba(59,42,24,.4);
}
.duo figure.cadre::after{
  content:"";position:absolute;top:20px;left:20px;right:-14px;bottom:-14px;
  border:1.5px solid var(--dore);border-radius:8px;z-index:-1;
}
.duo .texte p{margin-bottom:14px;font-size:15.5px;color:rgba(59,42,24,.86)}

/* ---------- frise du parcours ---------- */
.frise{max-width:760px;margin:0 auto;position:relative;padding-left:40px}
.frise::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--dore-clair),var(--cuivre));
  border-radius:2px;
}
.etape{position:relative;padding:0 0 46px 26px}
.etape:last-child{padding-bottom:0}
.etape::before{
  content:"";position:absolute;left:-36px;top:9px;width:16px;height:16px;
  border-radius:50%;background:var(--fond);
  border:3px solid var(--ambre);
}
.etape:nth-child(2)::before{border-color:var(--orange)}
.etape:nth-child(3)::before{border-color:var(--cuivre)}
.etape .annees{
  font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--cuivre);
}
.etape:nth-child(2) .annees{color:var(--orange)}
.etape:nth-child(3) .annees{color:var(--accent-fort)}
.etape h3{
  font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.2vw,24px);
  margin:6px 0 6px;line-height:1.4;
}
.etape p{font-size:14.5px;color:rgba(59,42,24,.82)}

/* ---------- médiations (accueil + pratique) ---------- */
.med{
  display:grid;grid-template-columns:64px 1fr;gap:26px;
  padding:38px 0;
  border-top:1px solid rgba(90,54,18,.14);
}
.med:last-of-type{border-bottom:1px solid rgba(90,54,18,.14)}
.med .pictofeuille{width:36px;margin-top:6px;justify-self:center}
.med h3{
  font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,25px);
  margin-bottom:8px;
}
.med p{font-size:14.5px;line-height:1.8;color:rgba(59,42,24,.84);max-width:640px}

/* médiations détaillées (page pratique) */
.mediation-fiche{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;
  padding:74px 0;
}
.mediation-fiche:not(:first-child){border-top:1px solid rgba(90,54,18,.13)}
.mediation-fiche.inverse .media{order:2}
.mediation-fiche .media img{
  border-radius:8px;width:100%;aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 26px 60px -28px rgba(59,42,24,.38);
}
.mediation-fiche h3{
  font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.6vw,30px);
  margin-bottom:14px;display:flex;align-items:center;gap:16px;
}
.mediation-fiche h3 svg{width:24px;flex:none}
.mediation-fiche p{font-size:15px;line-height:1.85;color:rgba(59,42,24,.86);margin-bottom:12px}

/* ---------- cartes (portes, ateliers) ---------- */
.cartes{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.carte{
  background:var(--fond);
  border-radius:8px;padding:38px 32px 32px;
  color:var(--encre);text-decoration:none;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 10px 34px -18px rgba(122,68,23,.3);
  border-top:3px solid transparent;
  transition:translate .35s ease,box-shadow .35s ease,border-color .35s ease;
}
a.carte:hover,a.carte:focus-visible{
  translate:0 -6px;
  box-shadow:0 26px 50px -22px rgba(122,68,23,.45);
  border-top-color:var(--ambre);
}
a.carte:focus-visible{outline:2px solid var(--accent-fort);outline-offset:3px}
.carte .pictofeuille{width:30px;margin-bottom:4px}
.carte h3{font-family:var(--serif);font-weight:500;font-size:21.5px}
.carte p{font-size:14px;line-height:1.75;flex:1;color:rgba(59,42,24,.82)}
.carte .appel{
  font-size:13px;font-weight:600;color:var(--accent-fort);
  border-bottom:2px solid var(--ambre);align-self:flex-start;padding-bottom:2px;
}
.carte .infos{
  margin-top:8px;padding-top:14px;border-top:1px dashed rgba(90,54,18,.22);
  font-size:13px;line-height:1.9;color:rgba(59,42,24,.8);flex:none;
}
.carte .infos strong{color:var(--accent-fort);font-weight:600}
.carte .prix{
  font-family:var(--serif);font-size:26px;color:var(--encre);
}
.carte .prix small{font-family:var(--sans);font-size:12px;color:rgba(59,42,24,.6)}

/* ---------- FAQ tarifs ---------- */
.faq{max-width:760px;margin:0 auto}
.faq-item{
  padding:36px 0;border-top:1px solid rgba(90,54,18,.14);
}
.faq-item:last-child{border-bottom:1px solid rgba(90,54,18,.14)}
.faq-item h3{
  font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.3vw,25px);
  margin-bottom:12px;display:flex;gap:16px;align-items:baseline;
}
.faq-item h3 svg{width:16px;flex:none;translate:0 2px}
.faq-item p{font-size:15px;color:rgba(59,42,24,.85);margin-bottom:8px}
.tarif-chiffres{
  display:flex;gap:26px;flex-wrap:wrap;margin:18px 0 6px;
}
.tarif-chiffres .bloc{
  background:var(--accent-pale);border-radius:8px;padding:22px 30px;
  text-align:center;min-width:180px;
}
.tarif-chiffres .bloc .montant{
  font-family:var(--serif);font-size:38px;color:var(--accent-fort);line-height:1.2;
}
.tarif-chiffres .bloc .qui{font-size:13px;font-weight:600;letter-spacing:.06em}

/* ---------- citation ---------- */
.citation{
  background:
    radial-gradient(60% 90% at 82% 100%, rgba(224,138,42,.18), transparent 70%),
    var(--encre);
  color:var(--fond);
  padding:120px 24px;text-align:center;position:relative;overflow:hidden;
}
.citation .arbre-fond{
  position:absolute;right:-40px;bottom:-70px;width:min(320px,42vw);opacity:.12;
  pointer-events:none;
}
blockquote{max-width:740px;margin:0 auto;position:relative;z-index:2}
blockquote .ligne{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(25px,3.5vw,38px);line-height:1.5;
  opacity:0;translate:0 20px;transition:opacity 1s ease,translate 1s ease;
}
blockquote .ligne.vue{opacity:1;translate:0 0}
blockquote .ligne:nth-child(2).vue{transition-delay:.5s}
blockquote footer{
  margin-top:34px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--dore-clair);
  opacity:0;transition:opacity 1s ease 1.1s;
}
blockquote footer.vue{opacity:1}

/* ---------- appel final / contact ---------- */
.appel-final{
  background:var(--creme);
  padding:100px 24px;text-align:center;position:relative;overflow:hidden;
}
.appel-final h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.2vw,38px);margin-bottom:14px;
}
.appel-final>div{position:relative;z-index:2}
.appel-final p{max-width:520px;margin:0 auto 36px;font-size:15.5px;color:rgba(59,42,24,.86)}
.boutons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.appel-final .tel{margin-top:30px;font-size:15px}
.appel-final .tel a{font-weight:600;text-decoration:none;color:var(--encre);border-bottom:2px solid var(--ambre)}

/* ---------- page contact ---------- */
.canaux{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.acces{font-size:15px;color:rgba(59,42,24,.86)}
.acces p{margin-bottom:14px}
.infolettre{
  max-width:640px;margin:0 auto;text-align:center;
}
.champs{display:grid;gap:14px;margin-top:30px;text-align:left}
.champs label{font-size:12.5px;font-weight:600;letter-spacing:.06em}
.champs input,.champs textarea{
  width:100%;padding:13px 16px;border:1px solid rgba(90,54,18,.24);
  border-radius:4px;background:var(--fond);
  font-family:var(--sans);font-size:14px;color:var(--encre);
}
.champs input:focus,.champs textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent;
}
.champs .btn{justify-self:center;margin-top:8px;border:none;cursor:pointer;font-family:var(--sans)}

/* ---------- footer ---------- */
footer.pied{
  background:var(--encre);color:rgba(253,250,244,.82);
  padding:60px 24px 40px;font-size:13.5px;
}
.pied-in{
  max-width:1120px;margin:0 auto;
  display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:center;
}
.pied-in img{height:88px;width:auto;filter:brightness(0) invert(1);opacity:.82}
.pied-in address{font-style:normal;line-height:2.1;text-align:right}
.pied-in a{color:var(--dore-clair);text-decoration:none}
.mention{max-width:1120px;margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(253,250,244,.14);font-size:12px;color:rgba(253,250,244,.5)}
.mention a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(253,250,244,.3)}
.mention a:hover{color:rgba(253,250,244,.85)}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .section{padding:66px 22px}
  .duo,.duo.inverse{grid-template-columns:1fr;gap:48px}
  .duo figure{max-width:520px}
  .mediation-fiche{grid-template-columns:1fr;gap:36px;padding:56px 0}
  .mediation-fiche.inverse .media{order:0}
  .cartes,.canaux{grid-template-columns:1fr;max-width:520px}
  .med{grid-template-columns:44px 1fr;gap:18px}
  .med .pictofeuille{width:28px}
  .frise{padding-left:34px}
  .pied-in{flex-direction:column;align-items:flex-start}
  .pied-in address{text-align:left}
  nav{display:none}
  .burger{
    display:block;background:none;border:1px solid rgba(90,54,18,.22);border-radius:3px;
    cursor:pointer;flex:none;
    font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;
    color:var(--encre);padding:9px 14px;
  }
  header.site.ouvert nav{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--fond);border-bottom:1px solid rgba(90,54,18,.1);
    padding:10px 24px 18px;box-shadow:0 18px 30px -18px rgba(59,42,24,.25);
  }
  header.site.ouvert nav a{padding:12px 0}
  .marque img{height:46px}
  .marque-txt strong{font-size:17px}
  .f2,.f4,.f5{display:none}
  .f1{width:40px;left:4%}
  .f3{width:36px;right:5%}
  .f6{width:34px;right:8%}
  .hero{padding:80px 22px 96px}
  .entete-page{padding:62px 22px 56px}
}

/* ---------- reduced motion : site calme ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .feuille,body.chargee .feuille{animation:none;opacity:.92;translate:0 0}
  body.chargee .feuille svg{animation:none}
  .reveal,blockquote .ligne,blockquote footer{opacity:1;translate:0 0;transition:none}
  .carte,.btn{transition:none}
  .intro-piece{display:none}
}