/* ==========================================================
   NOTRE DÉMARCHE — TEST SIMPLE
   Haut conservé + contenu éditorial épuré
   ========================================================== */

.demarche-page{
  --dem-dark:#0f2f33;
  --dem-text:#041f2d;
  --dem-green:#159a83;
  --dem-green-2:#20b191;
  --dem-mint:#62beaf;
  --dem-muted:#60757b;
  width:100%;
  overflow:hidden;
  background:#fff;
  color:var(--dem-text);
  font-family:"Roboto",Arial,sans-serif;
}

.demarche-page *,
.demarche-page *::before,
.demarche-page *::after{
  box-sizing:border-box;
}

.demarche-simple-shell{
  width:min(1120px,90%);
  margin-inline:auto;
}

/* ==========================================================
   HAUT DE PAGE — CONSERVÉ
   ========================================================== */

.demarche-page-top{
  padding:58px 0 52px;
  background:#fff;
}

.demarche-page-top-shell{
  width:min(1450px,92%);
  margin:0 auto;
}

.demarche-page-top-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:52px;
  padding:10px 18px;
  border-radius:45px;
  background:#fff;
  box-shadow:0 6px 20px rgba(4,31,45,.08);
  font-size:.9rem;
  font-weight:600;
}

.demarche-page-top-breadcrumb,
.demarche-page-top-breadcrumb a,
.demarche-page-top-breadcrumb span{
  color:#159a83;
  text-decoration:none;
}

.demarche-page-top-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.demarche-page-top-heading-text>p{
  margin:0 0 18px;
  color:#159a83;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:5px;
  text-transform:uppercase;
}

.demarche-page-top-heading-text h1{
  max-width:900px;
  margin:0;
  color:#041f2d;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;
  line-height:1.05;
}

/* ==========================================================
   INTRO — SIMPLE
   ========================================================== */

.demarche-simple-intro{
  padding:72px 0 48px;
}

.demarche-simple-intro .demarche-simple-shell{
  max-width:850px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.demarche-simple-kicker,
.demarche-simple-label{
  margin:0 0 14px;
  color:var(--dem-green);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.demarche-simple-intro h2{
  margin:0;
  color:var(--dem-text);
  font-size:clamp(2.5rem,4.5vw,4.25rem);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.04em;
}

.demarche-simple-lead{
  max-width:720px;
  margin:22px auto 0;
  color:var(--dem-muted);
  font-size:1rem;
  line-height:1.72;
}

/* ==========================================================
   3 SUJETS — PAS DE CARTES
   ========================================================== */

.demarche-simple-list{
  padding:0 0 100px;
}

.demarche-simple-item{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:clamp(30px,6vw,90px);
  padding:58px 0;
  border-top:1px solid rgba(4,31,45,.12);
}

.demarche-simple-item:last-child{
  border-bottom:1px solid rgba(4,31,45,.12);
}

.demarche-simple-number{
  color:rgba(21,154,131,.22);
  font-size:clamp(4.6rem,8vw,7.2rem);
  font-weight:800;
  line-height:.8;
  letter-spacing:-.06em;
}

.demarche-simple-text{
  max-width:760px;
}

.demarche-simple-text h3{
  margin:0;
  color:var(--dem-text);
  font-size:clamp(2rem,3.3vw,3.15rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.035em;
}

.demarche-simple-text>p:last-child{
  max-width:680px;
  margin:18px 0 0;
  color:var(--dem-muted);
  font-size:.98rem;
  line-height:1.72;
}

/* ==========================================================
   TABLETTE
   ========================================================== */

@media(max-width:900px){
  .demarche-simple-intro .demarche-simple-shell{
    text-align:left;
  }

  .demarche-simple-lead{
    margin-left:0;
  }

  .demarche-simple-item{
    grid-template-columns:100px minmax(0,1fr);
    gap:32px;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){
  .demarche-page-top{
    padding:36px 0 42px;
  }

  .demarche-page-top-shell{
    width:calc(100% - 36px);
  }

  .demarche-page-top-breadcrumb{
    margin-bottom:38px;
    padding:9px 16px;
  }

  .demarche-simple-shell{
    width:calc(100% - 36px);
  }

  .demarche-simple-intro{
    padding:54px 0 38px;
  }

  .demarche-simple-photo{
    padding:8px 0 58px;
  }

  .demarche-simple-photo img,
  .demarche-simple-photo-placeholder{
    height:260px;
    border-radius:17px;
  }

  .demarche-simple-list{
    padding-bottom:70px;
  }

  .demarche-simple-item{
    display:block;
    padding:42px 0;
  }

  .demarche-simple-number{
    margin-bottom:25px;
    font-size:4.4rem;
  }

  .demarche-simple-text h3{
    font-size:clamp(2rem,9vw,2.6rem);
  }
}


/* ==========================================================
   IMAGE PANORAMIQUE — EXPANSION EN 3 TEMPS AU SCROLL
   0 : largeur container
   1 : largeur élargie
   2 : pleine largeur écran
   ========================================================== */

.demarche-photo-scroll{
  position:relative;
  height:145vh;
  background:#fff;
}

.demarche-photo-sticky{
  position:sticky;
  top:0;
  height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.demarche-photo-frame{
  width:min(1120px,90vw);
  height:clamp(300px,36vw,500px);

  border-radius:22px;
  overflow:hidden;

  will-change:width,height,border-radius;
  transition:border-radius .12s linear;
}

.demarche-photo-frame img,
.demarche-photo-placeholder{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.demarche-photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(135deg,rgba(98,190,175,.48),rgba(15,47,51,.88));

  color:rgba(255,255,255,.78);
}

.demarche-photo-placeholder span{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.18em;
}

@media(max-width:900px){
  .demarche-photo-scroll{
    height:125vh;
  }

  .demarche-photo-frame{
    width:calc(100% - 56px);
    height:clamp(280px,48vw,430px);
  }
}

@media(max-width:700px){
  .demarche-photo-scroll{
    height:125vh;
  }

  .demarche-photo-frame{
    width:calc(100% - 36px);
    height:260px;
    border-radius:17px;
  }
}

@media(prefers-reduced-motion:reduce){
  .demarche-photo-scroll{
    height:auto;
    padding:8px 0 58px;
  }

  .demarche-photo-sticky{
    position:relative;
    height:auto;
  }

  .demarche-photo-frame{
    width:min(1120px,90vw) !important;
    border-radius:22px !important;
  }
}


/* ==========================================================
   V3 — POINT 01 : TRAITEMENT ÉDITORIAL
   ========================================================== */
.demarche-editorial-quality{
  padding:68px 0 74px;
  border-top:1px solid rgba(4,31,45,.12);
}

.demarche-editorial-quality__inner{
  max-width:900px;
}

.demarche-editorial-quality__label{
  margin:0 0 17px;
  color:#159a83;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.demarche-editorial-quality h3{
  max-width:780px;
  margin:0;
  color:#041f2d;
  font-size:clamp(2.35rem,4vw,3.8rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.04em;
}

.demarche-editorial-quality__copy{
  max-width:760px;
  margin-top:30px;
}

.demarche-editorial-quality__copy p{
  margin:0 0 18px;
  color:#60757b;
  font-size:.98rem;
  line-height:1.75;
}

.demarche-editorial-quality__copy p:last-child{
  margin-bottom:0;
}

@media(max-width:700px){
  .demarche-editorial-quality{
    padding:48px 0 52px;
  }

  .demarche-editorial-quality h3{
    font-size:clamp(2.1rem,10vw,2.8rem);
  }

  .demarche-editorial-quality__copy{
    margin-top:24px;
  }

  .demarche-editorial-quality__copy p{
    font-size:.95rem;
    line-height:1.7;
  }
}


/* ==========================================================
   V4 — POINT 01 : MOINS D'ESPACE + AUCUN TRAIT
   ========================================================== */
.demarche-editorial-quality{
  padding:30px 0 42px;
  border-top:0;
}

.demarche-editorial-quality__copy{
  margin-top:22px;
}

@media(max-width:700px){
  .demarche-editorial-quality{
    padding:24px 0 36px;
  }

  .demarche-editorial-quality__copy{
    margin-top:19px;
  }
}


/* ==========================================================
   V5 — MÊME EFFET PHOTO, SORTIE PLUS RAPIDE
   Réduit la "piste" sticky responsable du grand blanc.
   ========================================================== */
.demarche-photo-scroll{
  height:118vh;
}

@media(max-width:900px){
  .demarche-photo-scroll{
    height:116vh;
  }
}

@media(max-width:700px){
  .demarche-photo-scroll{
    height:114vh;
  }
}


/* ==========================================================
   V6 — SORTIE STICKY QUASI IMMÉDIATE APRÈS LE PLEIN ÉCRAN
   ========================================================== */
.demarche-photo-scroll{
  height:108vh;
}

@media(max-width:900px){
  .demarche-photo-scroll{
    height:106vh;
  }
}

@media(max-width:700px){
  .demarche-photo-scroll{
    height:104vh;
  }
}


/* ==========================================================
   V7 — ESPACES HAUT / BAS ENCORE RÉDUITS
   ========================================================== */

/* Moins d'espace entre l'introduction et l'arrivée de la photo */
.demarche-simple-intro{
  padding-bottom:22px;
}

/* Piste d'animation encore plus courte */
.demarche-photo-scroll{
  height:102vh;
}

/* Le contenu suivant arrive presque immédiatement */
.demarche-simple-list{
  margin-top:-5vh;
}

.demarche-editorial-quality{
  padding-top:18px;
  padding-bottom:34px;
}

@media(max-width:900px){
  .demarche-simple-intro{
    padding-bottom:18px;
  }

  .demarche-photo-scroll{
    height:101vh;
  }

  .demarche-simple-list{
    margin-top:-4vh;
  }
}

@media(max-width:700px){
  .demarche-simple-intro{
    padding-bottom:14px;
  }

  .demarche-photo-scroll{
    height:100vh;
  }

  .demarche-simple-list{
    margin-top:-3vh;
  }

  .demarche-editorial-quality{
    padding-top:14px;
    padding-bottom:30px;
  }
}


/* ==========================================================
   V8 — CORRECTION DE LA VRAIE SOURCE DU BLANC
   Le wrapper sticky n'occupe plus 100vh.
   ========================================================== */

.demarche-photo-scroll{
  height:78vh;
  min-height:620px;
  margin:0;
  padding:0;
}

.demarche-photo-sticky{
  position:sticky;
  top:12vh;

  height:clamp(360px,52vh,540px);
  min-height:0;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0;
  padding:0;
  overflow:hidden;
}

.demarche-simple-intro{
  padding-bottom:6px;
}

.demarche-simple-list{
  margin-top:0;
}

.demarche-editorial-quality{
  padding-top:12px;
}

@media(max-width:900px){
  .demarche-photo-scroll{
    height:72vh;
    min-height:540px;
  }

  .demarche-photo-sticky{
    top:10vh;
    height:clamp(330px,50vh,470px);
  }
}

@media(max-width:700px){
  .demarche-photo-scroll{
    height:64vh;
    min-height:460px;
  }

  .demarche-photo-sticky{
    top:9vh;
    height:330px;
  }

  .demarche-simple-intro{
    padding-bottom:4px;
  }

  .demarche-editorial-quality{
    padding-top:8px;
  }
}


/* ==========================================================
   V9 — RÉDUCTION VISUELLE DU BLANC APRÈS LA PHOTO
   On garde la piste de scroll nécessaire à l'animation,
   mais le contenu suivant remonte visuellement dessus.
   ========================================================== */

.demarche-simple-list{
  position:relative;
  z-index:2;
  margin-top:-18vh;
  background:#fff;
}

.demarche-editorial-quality{
  padding-top:18px;
}

@media(max-width:900px){
  .demarche-simple-list{
    margin-top:-13vh;
  }
}

@media(max-width:700px){
  .demarche-simple-list{
    margin-top:-8vh;
  }
}


/* ==========================================================
   V10 — RESPIRATION AVANT LA PHOTO
   L'espace sous la photo reste inchangé.
   ========================================================== */
.demarche-photo-scroll{
  margin-top:42px;
}

@media(max-width:900px){
  .demarche-photo-scroll{
    margin-top:36px;
  }
}

@media(max-width:700px){
  .demarche-photo-scroll{
    margin-top:28px;
  }
}


/* ==========================================================
   V11 — 01 + QUALITÉ SUR LA MÊME LIGNE
   + aucun trait sous le premier point
   ========================================================== */

.demarche-editorial-quality__label{
  display:flex;
  align-items:center;
  gap:10px;
}

.demarche-editorial-quality__number{
  color:#159a83;
  font-weight:800;
}

.demarche-editorial-quality{
  border-bottom:0;
}

/* Le point 02 ne recrée pas de trait juste sous le point 01 */
.demarche-editorial-quality + .demarche-simple-item{
  border-top:0;
}


/* V12 — 02 ISO 9001 */
.demarche-iso{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(55px,7vw,105px);padding:64px 0 76px;border:0}
.demarche-iso__visual{display:flex;align-items:center;justify-content:center;min-width:0}
.demarche-iso__visual img{display:block;width:100%;max-width:520px;height:auto;object-fit:contain}
.demarche-iso__content{min-width:0;max-width:650px}
.demarche-iso__label{display:flex;align-items:center;gap:14px;margin:0 0 17px;color:#159a83;font-size:.76rem;font-weight:800;line-height:1.2;letter-spacing:.13em;text-transform:uppercase}
.demarche-iso h3{margin:0;color:#041f2d;font-size:clamp(2.35rem,3.7vw,3.8rem);font-weight:800;line-height:1.04;letter-spacing:-.04em}
.demarche-iso__copy{max-width:620px;margin-top:30px}
.demarche-iso__copy p{margin:0 0 18px;color:#60757b;font-size:.98rem;line-height:1.75}
.demarche-iso__copy p:last-child{margin-bottom:0}
.demarche-iso+.demarche-simple-item{border-top:0}
@media(max-width:900px){.demarche-iso{gap:38px;padding:54px 0 64px}.demarche-iso__visual img{max-width:390px}}
@media(max-width:700px){.demarche-iso{display:flex;flex-direction:column;align-items:stretch;gap:36px;padding:46px 0 54px}.demarche-iso__visual img{width:min(100%,390px);margin-inline:auto}.demarche-iso__content{max-width:none}.demarche-iso h3{font-size:clamp(2.1rem,10vw,2.8rem)}.demarche-iso__copy{margin-top:24px}.demarche-iso__copy p{font-size:.95rem;line-height:1.7}}


/* ==========================================================
   V13 — POINT 03 : TEXTE GAUCHE / PHOTO DROITE
   ========================================================== */

.demarche-responsable{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:clamp(55px,7vw,105px);
  padding:64px 0 76px;
  border:0;
}

.demarche-responsable__content{
  min-width:0;
  max-width:650px;
}

.demarche-responsable__label{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 17px;
  color:#159a83;
  font-size:.76rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.demarche-responsable h3{
  margin:0;
  color:#041f2d;
  font-size:clamp(2.35rem,3.7vw,3.8rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.04em;
}

.demarche-responsable__copy{
  max-width:620px;
  margin-top:30px;
}

.demarche-responsable__copy p{
  margin:0 0 18px;
  color:#60757b;
  font-size:.98rem;
  line-height:1.75;
}

.demarche-responsable__copy p:last-child{
  margin-bottom:0;
}

.demarche-responsable__visual{
  min-width:0;
}

.demarche-responsable__placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:6px;
  background:linear-gradient(135deg,rgba(98,190,175,.35),rgba(15,47,51,.82));
  color:rgba(255,255,255,.82);
}

.demarche-responsable__placeholder span{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.18em;
}

@media(max-width:900px){
  .demarche-responsable{
    gap:38px;
    padding:54px 0 64px;
  }
}

@media(max-width:700px){
  .demarche-responsable{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:36px;
    padding:46px 0 54px;
  }

  .demarche-responsable__content{
    max-width:none;
  }

  .demarche-responsable h3{
    font-size:clamp(2.1rem,10vw,2.8rem);
  }

  .demarche-responsable__copy{
    margin-top:24px;
  }

  .demarche-responsable__copy p{
    font-size:.95rem;
    line-height:1.7;
  }

  .demarche-responsable__visual{
    width:100%;
  }

  .demarche-responsable__placeholder{
    aspect-ratio:4 / 3;
  }
}

/* V14 — espacements uniformes entre 01 / 02 / 03 */
.demarche-editorial-quality{padding-bottom:50px}
.demarche-iso{padding-top:50px;padding-bottom:50px}
.demarche-responsable{padding-top:50px;padding-bottom:76px}

@media(max-width:900px){
  .demarche-editorial-quality{padding-bottom:42px}
  .demarche-iso{padding-top:42px;padding-bottom:42px}
  .demarche-responsable{padding-top:42px;padding-bottom:64px}
}
@media(max-width:700px){
  .demarche-editorial-quality{padding-bottom:34px}
  .demarche-iso{padding-top:34px;padding-bottom:34px}
  .demarche-responsable{padding-top:34px;padding-bottom:54px}
}


/* V15 — PHOTO LIVRAISON DU BLOC 03 */
.demarche-responsable__visual{
  min-width:0;
  overflow:hidden;
  border-radius:6px;
}

.demarche-responsable__img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

@media(max-width:700px){
  .demarche-responsable__img{
    aspect-ratio:4 / 3;
  }
}


/* POINT 04 — AVANCER ENSEMBLE */
.demarche-collectif{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(70px,8vw,130px);align-items:start;padding:78px 0 86px;}
.demarche-collectif__label{display:flex;align-items:center;gap:14px;margin:0 0 22px;color:#159a83;font-size:.76rem;font-weight:800;line-height:1.2;letter-spacing:.13em;text-transform:uppercase;}
.demarche-collectif h3{max-width:560px;margin:0;color:#041f2d;font-size:clamp(2.7rem,4.8vw,4.6rem);font-weight:800;line-height:1.02;letter-spacing:-.045em;}
.demarche-collectif__line{display:block;width:170px;height:7px;margin-top:34px;border-radius:999px;background:#041f2d;}
.demarche-collectif__right{max-width:720px;padding-top:42px;}
.demarche-collectif__right p{margin:0 0 24px;color:#334c55;font-size:1.08rem;line-height:1.8;}
.demarche-collectif__right p:last-child{margin-bottom:0;}
.demarche-collectif__right strong{color:#041f2d;font-weight:700;}
@media(max-width:900px){.demarche-collectif{gap:48px;padding:64px 0 72px}.demarche-collectif__right{padding-top:30px}}
@media(max-width:700px){.demarche-collectif{display:block;padding:52px 0 58px}.demarche-collectif h3{font-size:clamp(2.35rem,11vw,3.2rem)}.demarche-collectif__line{width:120px;height:5px;margin-top:26px}.demarche-collectif__right{max-width:none;padding-top:38px}.demarche-collectif__right p{font-size:1rem;line-height:1.72}}


/* ==========================================================
   POINT 04 — ANIMATION DU TRAIT À L'APPARITION
   ========================================================== */
.demarche-collectif__line{
  transform:scaleX(.12);
  transform-origin:left center;
  transition:transform 2s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.demarche-collectif.is-visible .demarche-collectif__line{
  transform:scaleX(1);
}

@media(prefers-reduced-motion:reduce){
  .demarche-collectif__line{
    transform:none;
    transition:none;
  }
}

/* ==========================================================
   POINT 03 — APPARITIONS AU SCROLL + ZOOM PHOTO
   Étape 1 : label + titre montent depuis le bas et apparaissent
   Étape 2 : texte monte à son tour + léger zoom de la photo
   ========================================================== */

.demarche-responsable__label,
.demarche-responsable h3,
.demarche-responsable__copy{
  opacity:0;
  transform:translateY(34px);
  will-change:transform,opacity;
}

.demarche-responsable__label{
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(.22,1,.36,1);
}

.demarche-responsable h3{
  transition:
    opacity 1.15s ease .10s,
    transform 1.15s cubic-bezier(.22,1,.36,1) .10s;
}

.demarche-responsable__copy{
  transition:
    opacity 1.15s ease,
    transform 1.15s cubic-bezier(.22,1,.36,1);
}

.demarche-responsable.is-heading-visible .demarche-responsable__label,
.demarche-responsable.is-heading-visible h3,
.demarche-responsable.is-details-visible .demarche-responsable__copy{
  opacity:1;
  transform:translateY(0);
}

/* Le cadre reste parfaitement fixe : seul le contenu de l'image zoome. */
.demarche-responsable__img{
  transform:scale(1);
  transform-origin:center center;
  transition:transform 1.8s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.demarche-responsable.is-photo-visible .demarche-responsable__img{
  transform:scale(1.07);
}

@media(prefers-reduced-motion:reduce){
  .demarche-responsable__label,
  .demarche-responsable h3,
  .demarche-responsable__copy{
    opacity:1;
    transform:none;
    transition:none;
  }

  .demarche-responsable__img{
    transform:none;
    transition:none;
  }
}

/* ==========================================================
   MOBILE — RESPIRATION SOUS LE HEADER
   ========================================================== */
@media (max-width: 700px) {
  .demarche-page-top {
    padding-top: 70px;
  }
}