/*
Theme Name: Cecilia Mon Approche V01 Test Autonome
Author: OpenAI
Description: Reconstruction WordPress de la page Mon approche, basée sur la maquette fournie.
Version: 1.1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@400;500;600&display=swap');

:root{
  --ink:#191919;
  --forest:#526d43;
  --forest-dark:#405b39;
  --terracotta:#b96f57;
  --terracotta-dark:#a85d48;
  --cream:#fbf8f2;
  --sage:#e8ecdf;
  --sage-2:#dfe5d5;
  --blue:#d8e5ea;
  --peach:#f5ded3;
  --ochre:#f1d8a4;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.page-approche{overflow:hidden}

/* HEADER */
.site-header{
  height:5.5vw;min-height:56px;
  padding:0 6.6vw;
  display:flex;align-items:center;background:#fff;
  border-bottom:1px solid rgba(20,40,50,.05);
}
.brand{display:flex;flex-direction:column;min-width:20.5vw;flex:0 0 auto}
.brand strong{font:500 2.0vw/.95 var(--serif)}
.brand span{font:500 .61vw/1.2 var(--sans);margin-top:.18vw}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:1.8vw;white-space:nowrap;font:500 .66vw/1 var(--sans)}
.nav-cta{background:#536f49;color:#fff;border-radius:999px;padding:.98vw 1.7vw;font-weight:600}

/* HERO */
.approach-hero{
  min-height:33.5vw;
  display:grid;grid-template-columns:52% 48%;
  background:#f5f2eb;
}
.hero-copy{
  padding:3.3vw 3.4vw 2.8vw 6.8vw;
  display:flex;flex-direction:column;justify-content:center;
  background:
    linear-gradient(90deg,rgba(249,247,241,.97),rgba(249,247,241,.92));
}
.eyebrow{color:#ad684f;font:600 .75vw/1 var(--sans);letter-spacing:.17em;margin-bottom:1.15vw}
.hero-copy h1{margin:0;font:500 4.25vw/.95 var(--serif);letter-spacing:-.02em}
.hero-copy p{margin:1.2vw 0 1.5vw;font:400 1.04vw/1.5 var(--sans);max-width:42vw}
.hero-btn{
  width:max-content;display:inline-flex;align-items:center;gap:.9vw;
  background:#607a4f;color:#fff;border-radius:999px;
  padding:1.05vw 2vw;font:600 .75vw/1 var(--sans)
}
.hero-photo{
  background:url("assets/images/hero-approche.jpg") center/cover no-repeat;
  min-height:33.5vw;
}

/* HUMAN APPROACH TERRACOTTA BAND */
.human-band{
  min-height:15.2vw;
  background:#bc775f;color:#fff;
  display:grid;grid-template-columns:1fr 1.35fr .35fr;
  align-items:center;
  padding:1.8vw 6.8vw;
}
.human-left .eyebrow{color:#fff;margin-bottom:.85vw}
.human-left h2{margin:0;font:500 3.2vw/.98 var(--serif)}
.human-middle{padding:0 3.2vw}
.human-middle p{margin:0 0 1.2vw;font:400 .82vw/1.5 var(--sans)}
.white-btn{
  display:inline-flex;gap:.8vw;align-items:center;
  background:#fff;color:#24303a;border-radius:999px;
  padding:.95vw 1.6vw;font:500 .69vw/1 var(--sans)
}
.branch svg{width:7.5vw;height:11vw;stroke:#e2b4a2;fill:none;stroke-width:1.15}

/* 4 STEPS */
.steps-section{padding:1.7vw 6.4vw 1.9vw;background:#fff}
.steps-head{display:flex;justify-content:space-between;align-items:flex-end}
.steps-head h2{margin:0;font:500 3.05vw/.95 var(--serif)}
.steps-head p{margin:0 0 .35vw;font:400 .68vw/1.3 var(--sans)}
.steps-grid{
  margin-top:1.4vw;
  display:grid;grid-template-columns:1fr .23fr 1fr .23fr 1fr .23fr 1fr;
  align-items:center
}
.step{text-align:center;position:relative}
.step-icon{
  width:6.6vw;height:6.6vw;margin:0 auto .65vw;border-radius:50%;
  background:#ecefe6;display:flex;align-items:center;justify-content:center
}
.step-icon svg{width:3.45vw;height:3.45vw;stroke:#1e2e28;fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.step-num{
  position:absolute;left:16%;top:.25vw;width:2.7vw;height:2.7vw;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font:600 1.15vw/1 var(--serif)
}
.s1{background:#8ca176}.s2{background:#bf7961}.s3{background:#c59838}.s4{background:#7b98a1}
.step h3{margin:0 0 .35vw;font:500 1.6vw/1 var(--serif)}
.step p{margin:0;font:400 .68vw/1.45 var(--sans)}
.arrow{display:flex;align-items:center;justify-content:center}
.arrow svg{width:3.0vw;height:2.0vw;stroke:#c37b5a;fill:none;stroke-width:1.3}

/* PILLARS */
.pillars{padding:1.75vw 4.0vw 1.65vw;background:#eef1e6}
.pillars-head{display:flex;justify-content:space-between;align-items:flex-end;padding:0 1.6vw}
.pillars-head h2{margin:0;font:500 3.0vw/.95 var(--serif)}
.pillars-head p{margin:0 0 .3vw;font:400 .65vw/1.3 var(--sans)}
.pillar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.0vw;margin-top:1.3vw}
.pillar-card{background:#fff;overflow:hidden}
.pillar-card img{width:100%;height:10.8vw;object-fit:cover}
.pillar-body{min-height:11.0vw;padding:1.0vw .8vw;text-align:center}
.p1 .pillar-body{background:#dce4ce}.p2 .pillar-body{background:#f2d1c1}.p3 .pillar-body{background:#cfe0e7}.p4 .pillar-body{background:#f5ddd4}.p5 .pillar-body{background:#dce4ce}.p6 .pillar-body{background:#f2d8a5}
.pillar-card h3{margin:0 0 .7vw;font:500 1.55vw/1.0 var(--serif)}
.pillar-card p{margin:0;font:400 .65vw/1.4 var(--sans)}

/* PATH */
.path-section{padding:2.0vw 6.8vw 1.6vw;background:#fff;text-align:center}
.path-section .eyebrow{margin-bottom:.8vw}
.path-section h2{margin:0;font:500 2.9vw/.98 var(--serif)}
.path-section>p{max-width:62vw;margin:1.1vw auto 1.15vw;font:400 .78vw/1.5 var(--sans)}
.path-btn{display:inline-flex;gap:.9vw;align-items:center;background:#607a4f;color:#fff;border-radius:999px;padding:.95vw 1.85vw;font:600 .7vw/1 var(--sans)}
.qual-grid{margin-top:1.6vw;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.qual{display:grid;grid-template-columns:3.6vw 1fr;align-items:center;text-align:left;padding:0 1.7vw;border-right:1px solid #d8b099}
.qual:last-child{border-right:0}
.qual svg{width:2.85vw;height:2.85vw;stroke:#587040;fill:none;stroke-width:1.5}
.qual:nth-child(2) svg,.qual:nth-child(3) svg{stroke:#bd7c45}
.qual p{margin:0;font:400 .7vw/1.35 var(--sans)}

/* FINAL CTA */
.final-cta{
  min-height:18.5vw;
  background:#f0cfc3;
  padding:2.6vw 4vw;
  text-align:center
}
.final-cta .eyebrow{margin:0 0 .7vw;color:#b66c54}
.final-cta h2{margin:0;font:500 2.75vw/.98 var(--serif)}
.final-cta p{margin:.65vw 0 1.25vw;font:400 .75vw/1.4 var(--sans)}
.cta-actions{display:flex;justify-content:center;gap:1.0vw}
.cta-primary,.cta-secondary{border-radius:999px;padding:1.0vw 1.9vw;font:600 .7vw/1 var(--sans)}
.cta-primary{background:#607a4f;color:#fff}
.cta-secondary{border:1px solid #8d6a5e}

@media(max-width:980px){
  .site-header{height:72px;padding:0 24px}.brand{min-width:0}.brand strong{font-size:24px}.brand span{font-size:9px}.site-nav{display:none}
  .approach-hero{grid-template-columns:1fr}.hero-copy{padding:58px 7%}.hero-copy h1{font-size:56px}.eyebrow{font-size:11px}.hero-copy p{font-size:14px;max-width:650px}.hero-btn{font-size:11px;padding:14px 24px}.hero-photo{min-height:420px}
  .human-band{grid-template-columns:1fr;padding:38px 7%}.human-left h2{font-size:44px}.human-middle{padding:20px 0}.human-middle p{font-size:12px}.white-btn{font-size:11px;padding:13px 20px}.branch{display:none}
  .steps-head,.pillars-head{display:block}.steps-head h2,.pillars-head h2{font-size:44px}.steps-head p,.pillars-head p{font-size:11px;margin-top:10px}
  .steps-grid{grid-template-columns:1fr 1fr;gap:24px}.arrow{display:none}.step-icon{width:82px;height:82px}.step-icon svg{width:42px;height:42px}.step-num{left:22%;width:36px;height:36px;font-size:16px}.step h3{font-size:25px}.step p{font-size:11px}
  .pillar-grid{grid-template-columns:1fr 1fr}.pillar-card img{height:210px}.pillar-body{min-height:155px;padding:18px}.pillar-card h3{font-size:25px}.pillar-card p{font-size:11px}
  .path-section{padding:42px 7%}.path-section h2{font-size:42px}.path-section>p{font-size:12px;max-width:700px}.path-btn{font-size:11px;padding:14px 22px}.qual-grid{grid-template-columns:1fr 1fr;gap:24px}.qual{border:0;padding:10px}.qual svg{width:38px;height:38px}.qual p{font-size:11px}
  .final-cta{padding:44px 7%}.final-cta h2{font-size:42px}.final-cta p{font-size:12px}.cta-primary,.cta-secondary{font-size:11px;padding:14px 22px}
}


/* ===== V02 corrections requested by user ===== */

/* Grand titres : famille serif de la maquette, plus proche du rendu validé du site */
.hero-copy h1,
.human-left h2,
.steps-head h2,
.step h3,
.pillars-head h2,
.pillar-card h3,
.path-section h2,
.final-cta h2,
.resources-copy h2,
.footer-brand strong{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.022em;
}

/* Decorative branch removed from the terracotta section */
.human-band{grid-template-columns:1fr 1.35fr;}
.branch{display:none!important}

/* Refined step pictograms */
.step-icon svg{
  width:3.35vw;
  height:3.35vw;
  stroke-width:1.35;
}

/* Ressources gratuites */
.resources-lead{
  min-height:8.3vw;
  background:#faece7;
  display:flex;
  align-items:center;
  padding:1.65vw 6.5vw;
  gap:1.2vw;
}
.resources-icon{
  width:4.15vw;height:4.15vw;border-radius:50%;
  background:#f7ddd3;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.resources-icon svg{
  width:2.35vw;height:2.35vw;
  stroke:#a24c30;fill:none;stroke-width:1.5;
}
.resources-copy h2{
  margin:0;color:#9c442b;
  font-size:2.0vw;line-height:.98;
}
.resources-copy p{
  margin:.35vw 0 0;
  color:#9b5a44;
  font:400 .68vw/1.3 var(--sans);
}
.resources-form{
  margin-left:auto;
  display:flex;align-items:center;gap:.9vw;
  width:34vw;
}
.resources-form input{
  flex:1;height:3.45vw;
  border:0;border-radius:999px;background:#fff;
  padding:0 1.35vw;
  font:400 .67vw/1 var(--sans);
  outline:0;
}
.resources-form button{
  border:0;border-radius:999px;
  background:#174f38;color:#fff;
  height:3.45vw;width:11.2vw;
  font:600 .68vw/1 var(--sans);
}

/* Footer */
.footer{
  background:#174f38;color:#fff;
  padding:3.0vw 6.55vw 1.25vw;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.65fr 1fr 1fr .8fr 1fr;
  gap:3.7vw;
}
.footer-brand strong{
  display:block;
  font-size:1.7vw;
  line-height:1;
}
.footer-sub{
  margin:.4vw 0 1.15vw;
  font:500 .65vw/1.25 var(--sans);
}
.footer-promise{
  margin:0;
  font:400 .72vw/1.48 var(--sans);
}
.footer h3{
  margin:0 0 .9vw;
  font:600 .68vw/1 var(--sans);
}
.footer a{
  display:block;
  margin-bottom:.42vw;
  font:400 .63vw/1.15 var(--sans);
}
.social-icons{
  display:flex;align-items:center;gap:.85vw;
}
.social-icons a{
  margin:0;
  display:flex;align-items:center;justify-content:center;
}
.social-icons svg{
  width:1.4vw;height:1.4vw;
  min-width:18px;min-height:18px;
  stroke:#fff;fill:none;stroke-width:1.8;
}
.social-icons .fill{fill:#fff;stroke:none}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.45);
  margin-top:2.25vw;padding-top:.9vw;
  display:flex;justify-content:space-between;
  font:400 .56vw/1.2 var(--sans);
}

@media(max-width:980px){
  .human-band{grid-template-columns:1fr}
  .resources-lead{padding:24px 6%;min-height:110px;flex-wrap:wrap}
  .resources-icon{width:56px;height:56px}.resources-icon svg{width:30px;height:30px}
  .resources-copy h2{font-size:29px}.resources-copy p{font-size:10px}
  .resources-form{width:min(460px,100%);margin-left:auto}
  .resources-form input,.resources-form button{height:46px;font-size:11px}
  .resources-form button{width:145px}
  .footer{padding:46px 6% 18px}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:34px}
  .footer-brand strong{font-size:25px}
  .footer-sub,.footer-promise,.footer h3,.footer a{font-size:10px}
  .footer-bottom{font-size:9px}
}
@media(max-width:650px){
  .resources-lead{display:grid;grid-template-columns:auto 1fr}
  .resources-form{grid-column:1/-1;margin:8px 0 0;width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;gap:6px}
}

/* ===== V4 Ferrari — démarche sans pictos + maillage éditorial ===== */
.steps-section .step-icon,.steps-section .arrow{display:none!important}
.steps-section .steps-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important
}
.steps-section .step{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
  min-width:0!important;
  padding:30px 26px!important;
  border:1px solid #eaded8;
  border-radius:18px;
  background:#fbf7f1
}
.steps-section .step-num{
  position:static!important;
  display:block!important;
  width:auto!important;height:auto!important;
  min-width:0!important;
  margin:0 0 24px!important;padding:0!important;
  border:0!important;border-radius:0!important;
  background:none!important;
  color:#c77f67!important;
  font-family:var(--sans)!important;
  font-size:42px!important;
  font-weight:600!important;
  line-height:1!important
}
.steps-section .step h3{margin:0 0 12px!important}
.steps-section .step p{margin:0!important}

.app-deepen,.app-journey{padding:78px max(28px,calc((100% - 1180px)/2))}
.app-deepen{background:#fbf7f1}
.app-journey{background:#eef1e6}
.app-deepen-head,.app-journey-head{max-width:820px;margin:0 auto 38px;text-align:center}
.app-deepen-head .eyebrow,.app-journey-head .eyebrow{color:#ad684f!important}
.app-deepen-head h2,.app-journey-head h2{margin:10px 0 16px!important}
.app-deepen-head p,.app-journey-head p{max-width:760px;margin:0 auto!important}
.app-deepen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.app-deepen-card,.app-journey-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid rgba(122,63,50,.10);
  border-radius:18px;
  background:#fff;
  padding:30px;
  box-shadow:0 10px 30px rgba(48,38,34,.05)
}
.app-deepen-card{min-height:255px}
.app-journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.app-journey-card{min-height:280px}
.app-card-kicker{
  margin:0 0 18px;
  color:#9a563f;
  font-family:var(--sans);
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.20em
}
.app-deepen-card h3,.app-journey-card h3{margin:0 0 12px!important}
.app-deepen-card p,.app-journey-card p{margin:0 0 22px!important}
.app-card-link{
  margin-top:auto;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  color:#000;
  text-decoration:none
}
.app-journey-card .app-card-link{
  display:inline-flex;
  align-self:flex-start;
  padding:13px 20px;
  border-radius:999px;
  background:#000;
  color:#fff!important
}
@media(max-width:980px){
  .steps-section .steps-grid{grid-template-columns:1fr 1fr!important}
  .app-deepen,.app-journey{padding:58px 7%}
  .app-deepen-grid{grid-template-columns:1fr 1fr}
  .app-journey-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .steps-section .steps-grid,.app-deepen-grid{grid-template-columns:1fr!important}
  .steps-section .step{padding:26px 22px!important}
  .steps-section .step-num{font-size:34px!important;margin-bottom:18px!important}
  .app-deepen,.app-journey{padding:48px 22px}
  .app-deepen-card,.app-journey-card{min-height:0;padding:24px}
}

/* ===== V3 Mon approche — mobile pictograms and readable text ===== */
@media(max-width:650px){
 .steps-section{padding:42px 22px}.steps-head h2,.pillars-head h2{font-size:38px!important}.steps-head p,.pillars-head p{font-size:14px!important;line-height:1.55}
 .steps-grid{grid-template-columns:1fr!important;gap:20px!important}.step{display:grid;grid-template-columns:78px 1fr;text-align:left;column-gap:18px;align-items:center;padding:18px;border-radius:14px;background:#faf8f3}.step-icon{grid-row:1/3;width:72px!important;height:72px!important;margin:0!important}.step-icon svg{width:40px!important;height:40px!important}.step-num{left:52px!important;top:6px!important;width:30px!important;height:30px!important;font-size:14px!important}.step h3{font-size:25px!important;margin:0 0 6px}.step p{font-size:14px!important;line-height:1.5!important}.step p br{display:none}
 .qual-grid{grid-template-columns:1fr!important}.qual{display:flex;align-items:center;gap:16px;padding:15px!important}.qual svg{width:48px!important;height:48px!important;flex:0 0 auto}.qual p{font-size:14px!important;line-height:1.45}.final-cta p{font-size:15px!important}.cta-actions{flex-direction:column;gap:12px}.cta-primary,.cta-secondary{font-size:13px!important;padding:15px 20px!important}
}

/* ===== V5 Mon approche — retouches visuelles validées ===== */
.steps-section .step{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0 12px!important;
  align-items:center!important;
  text-align:center!important;
  overflow:visible!important
}
.steps-section .step-num{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto 22px!important;
  border-radius:50%!important;
  color:#fff!important;
  font-family:var(--sans)!important;
  line-height:1!important
}
.steps-section .s1{background:#61734f!important}
.steps-section .s2{background:#a45742!important}
.steps-section .s3{background:#8c6822!important}
.steps-section .s4{background:#55737b!important}
.steps-section .step:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-22px;
  top:38px;
  color:#c37b5a;
  font-size:34px;
  line-height:1;
  font-family:Georgia,serif;
  font-weight:400
}

.pillars .pillar-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important}
.pillars .pillar-card{
  aspect-ratio:1/1;
  border-radius:18px!important;
  overflow:hidden;
  box-shadow:none!important
}
.pillars .pillar-card img{display:none!important}
.pillars .pillar-body{
  width:100%;height:100%;
  min-height:0!important;
  padding:20px 14px!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center
}
.pillars .pillar-card h3{margin:0 0 10px!important}
.pillars .pillar-card p{margin:0!important}

.app-deepen-card{
  position:relative!important;
  overflow:hidden!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important
}
.app-deepen-card.has-image{min-height:300px}
.app-deepen-shade{
  display:none;
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(18,18,18,.58),rgba(18,18,18,.84))
}
.app-deepen-card.has-image .app-deepen-shade{display:block}
.app-deepen-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  min-height:100%;
  flex:1
}
.app-deepen-card.has-image .app-deepen-content{justify-content:flex-end}
.app-deepen-card.has-image .app-card-link{margin-top:10px}

@media(max-width:980px){
  .pillars .pillar-grid{grid-template-columns:repeat(3,1fr)!important}
  .steps-section .step:not(:last-child)::after{display:none}
}
@media(max-width:650px){
  .pillars .pillar-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .pillars .pillar-body{padding:16px 12px!important}
  .steps-section .step{display:flex!important;flex-direction:column!important;padding:6px 0 18px!important}
  .steps-section .step-num{position:relative!important;left:auto!important;top:auto!important;margin:0 auto 18px!important}
}

/* Ferrari accessibilité — cibles tactiles des liens éditoriaux */
.hero-btn,.white-btn,.path-btn,.cta-primary,.cta-secondary,.resources-form button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.app-journey .app-card-link,
.app-deepen .app-card-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 0;
}
@media(max-width:820px){
  .app-journey .app-card-link,
  .app-deepen .app-card-link{
    min-height:48px;
  }
  .ct-global-header a,
  .ct-global-header button,
  .ct-mobile-nav a{
    min-width:48px;
    min-height:48px;
  }
}