@charset "UTF-8";
/* Alias prêt à l'emploi : $bleu → $vert1 avec 50/50, angle 135°, fondu 50% */
/* === Ken Burns avec PAN (zoom + translation) === */
/* Conteneur-cadre qui masque le débord, et anime l'image à l'intérieur */
/* Utilitaire : ratio fixe (optionnel) */
/* styles/utils/_base.scss */
/* Typo globale Raleway */
:root {
  --ff-sans: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

html {
  font-family: var(--ff-sans);
}

body {
  font-family: inherit;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset minimal */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Composants utilisés uniquement sur la home */
.hero-section {
  padding: 1rem 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
.hero-section .hero-content {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 912px) {
  .hero-section .hero-content {
    grid-template-columns: 1fr;
  }
}
.hero-section .hero-content .hero-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.7;
}
.hero-section .hero-content .hero-image {
  display: flex;
  justify-self: flex-end;
  /* on définit un keyframe générique ; les valeurs finales seront injectées via animation */
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 8.571rem + 23.81vw, 30rem);
}
@keyframes cpe-kb-zoom-pan {}
.hero-section .hero-content .hero-image > img, .hero-section .hero-content .hero-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  .hero-section .hero-content .hero-image > img, .hero-section .hero-content .hero-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-section .hero-content .hero-image > img, .hero-section .hero-content .hero-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  .hero-section .hero-content .hero-image:hover > img, .hero-section .hero-content .hero-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
.hero-section .hero-content .hero-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  .hero-section .hero-content .hero-image {
    justify-self: center;
    margin-bottom: 1rem;
  }
}
.hero-section .objectif {
  width: 100%;
  text-align: center;
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  font-weight: 700;
  padding-top: 0.5rem;
}

.section-why {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
.section-why .container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.section-why h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  text-align: left;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
.section-why p {
  font-size: 1.1rem;
  line-height: 1.8;
}
.section-why ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}
.section-why ul li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 0.8rem;
}
.section-why ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #5bb887;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .section-why .container {
    width: 100%;
  }
  .section-why ul {
    padding-left: 0;
  }
  .section-why ul li {
    padding-left: 0;
  }
  .section-why ul li::before {
    position: relative;
    display: inline-block;
    margin-right: 0.4rem;
  }
}

.audience-section {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  text-align: justify;
}
.audience-section .audience-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.audience-section .audience-container h2 {
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 2rem;
  font-family: "Raleway", sans-serif;
  text-align: left;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
.audience-section .audience-container .audience-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
}
.audience-section .audience-container .audience-list li {
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-left: 4px solid rgb(0, 71, 30);
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  font-size: 1.1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.audience-section .audience-container .audience-list li:hover {
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
}
@media screen and (max-width: 768px) {
  .audience-section .audience-section {
    text-align: left;
  }
}

/* ============================
   SECTION avec image de fond
   ============================ */
.vignettes-section {
  position: relative;
  isolation: isolate;
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  text-align: center;
  background: url("../images/photo-accueil_vignettes.webp") center/cover no-repeat;
}
.vignettes-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 46, 77, 0.75); /* voile foncé */
  z-index: 0;
  pointer-events: none;
}
.vignettes-section * {
  position: relative;
  z-index: 1;
}
.vignettes-section .vc-title {
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  width: min(1100px, 92vw);
  margin: 0 auto;
  margin-bottom: 1.5rem;
  color: #ffffff;
  font-weight: 700;
}

/* ============================
   CARROUSEL
   ============================ */
.vignettes-carousel {
  --edge-offset: clamp(2rem, (100vw - 1200px)/2 + 1rem, 12vw);
  --front-fs: $p-size;
  --back-fs: $p-size;
  --cta-fs: $p-size;
  --icon-fs: clamp(1.7rem, 3.57vw, 2.72rem);
  --front-grad-angle: 135deg;
  /* Face avant */
  /* Face arrière */
  /* Flip */
  /* CTA */
  /* ============================
     PALETTES fixes avec classes
     ============================ */
  /* ============================
     BOUTONS — centrés et décalés
     ============================ */
  /* décalage plus marqué */
}
.vignettes-carousel .vc-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  isolation: isolate;
}
.vignettes-carousel .vc-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.vignettes-carousel .vc-track {
  --gap: .6rem;
  --item-w: clamp(180px, 26vw, 260px);
  display: flex;
  gap: var(--gap);
  list-style: none;
  padding: 0;
  margin: 0;
  will-change: transform;
  transform: translateX(0);
}
.vignettes-carousel .vc-item {
  flex: 0 0 var(--item-w);
  perspective: 1000px;
}
.vignettes-carousel .vc-card {
  display: block;
  position: relative;
  min-height: clamp(120px, 18vw, 160px);
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  outline: 0;
  cursor: default;
  border-radius: 0.35em;
  border-bottom-right-radius: 0.9em;
  border-top-left-radius: 0.9em;
}
.vignettes-carousel .vc-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.9rem 1rem;
  text-align: center;
  border: 1px solid rgba(26, 46, 77, 0.08);
  border-radius: 0.35em;
  border-bottom-right-radius: 0.9em;
  border-top-left-radius: 0.9em;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
  overflow: hidden;
}
.vignettes-carousel .vc-front {
  background: var(--front-bg, #fff);
  background-image: linear-gradient(var(--front-grad-angle), color-mix(in oklab, var(--front-bg, #fff) 96%, #fff) 0%, var(--front-bg, #fff) 70%, color-mix(in oklab, var(--front-bg, #fff) 90%, #000) 100%);
  color: var(--front-fg, #031837);
  display: grid;
  gap: 0.45rem;
  place-items: center;
  padding-top: 0.2rem;
}
.vignettes-carousel .vc-label {
  font-weight: var(--front-fw, 700);
  font-size: var(--front-fs);
  line-height: 1.15;
}
.vignettes-carousel .vc-front .vc-icon {
  font-size: var(--icon-fs);
  line-height: 1;
  display: inline-block;
}
.vignettes-carousel .vc-back {
  background: var(--back-bg, #fff);
  color: var(--back-fg, #031837);
  transform: rotateY(180deg);
  gap: 0.25rem;
}
.vignettes-carousel .vc-back, .vignettes-carousel .vc-back * {
  font-size: var(--back-fs);
}
.vignettes-carousel .vc-back p {
  margin: 0 0 0.35rem 0;
  font-weight: 200;
  text-align: center;
}
.vignettes-carousel .vc-card:hover,
.vignettes-carousel .vc-card:focus,
.vignettes-carousel .vc-card:focus-visible {
  transform: rotateY(180deg);
}
.vignettes-carousel .vc-cta {
  display: inline-block;
  font-weight: 600;
  color: #00a250;
  font-size: var(--cta-fs);
  text-decoration: none;
}
.vignettes-carousel .vc-cta:hover {
  color: #031837;
}
.vignettes-carousel .vc-item.vc-a {
  --front-bg: color-mix(in oklab, #2F80ED 22%, #ffffff);
  --front-fg: #031837;
  --front-fw: 600;
  --back-bg: #ffffff;
  --back-fg: #031837;
}
.vignettes-carousel .vc-item.vc-b {
  --front-bg: color-mix(in oklab, #00a250 28%, #ffffff);
  --front-fg: #031837;
  --front-fw: 600;
  --back-bg: #ffffff;
  --back-fg: #031837;
}
.vignettes-carousel .vc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(26, 46, 77, 0.12);
  background: color-mix(in oklab, #ffffff 70%, #fff 30%);
  box-shadow: 0 2px 8px rgba(26, 46, 77, 0.15);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.vignettes-carousel .vc-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.vignettes-carousel .vc-btn:hover {
  transform: translateY(calc(-50% - 1px));
  box-shadow: 0 6px 14px rgba(26, 46, 77, 0.22);
}
.vignettes-carousel .vc-prev {
  left: -3.5rem;
}
.vignettes-carousel .vc-next {
  right: -3.5rem;
}
.vignettes-carousel .vc-ico {
  font-size: 1.6rem;
  line-height: 1;
  color: #00a250;
}
@media (max-width: 640px) {
  .vignettes-carousel { /* en mobile → docké à l’intérieur */ }
  .vignettes-carousel .vc-btn {
    width: 36px;
    height: 36px;
  }
  .vignettes-carousel .vc-ico {
    font-size: 1.4rem;
  }
  .vignettes-carousel .vc-prev {
    left: 0.4rem;
  }
  .vignettes-carousel .vc-next {
    right: 0.4rem;
  }
  .vignettes-carousel {
    --back-fs: clamp(.76rem, 3vw, .88rem);
    --cta-fs: clamp(.76rem, 3vw, .88rem);
  }
}
@media (max-width: 380px) {
  .vignettes-carousel {
    --back-fs: clamp(.72rem, 3.4vw, .84rem);
    --cta-fs: clamp(.72rem, 3.4vw, .84rem);
  }
}

.simulateur-section {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  text-align: justify;
}
.simulateur-section .simulateur-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.simulateur-section .simulateur-container h2 {
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 2rem;
  font-family: "Raleway", sans-serif;
  text-align: left;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
.simulateur-section .simulateur-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  color: #be097f;
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
.simulateur-section .simulateur-container .simulateur-text {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
.simulateur-section .simulateur-container .simulateur-list {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
.simulateur-section .simulateur-container .simulateur-list li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
.simulateur-section .simulateur-container .simulateur-list li::marker {
  color: #00a250;
  font-size: 1.2em;
}
.simulateur-section .simulateur-container .simulateur-list li:hover {
  color: #00a250;
}
.simulateur-section .simulateur-container .cta-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(1rem, 2.4vw, 2rem);
}

.expert-section {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
}
.expert-section h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1rem;
  text-align: left;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
.expert-section .expert-content {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .expert-section .expert-content {
    grid-template-columns: 1fr;
  }
}
.expert-section .expert-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.7;
}
.expert-section .expert-text p {
  margin-bottom: clamp(0.2rem, 1.4vw, 1rem);
}
.expert-section .expert-text .highlight {
  font-weight: bold;
  margin-top: 1.5rem;
}
.expert-section .expert-text .cta-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(1rem, 2.4vw, 2rem);
  margin-bottom: clamp(1rem, 1.4vw, 1rem);
}
@media (max-width: 768px) {
  .expert-section .expert-text {
    align-items: center;
  }
}
.expert-section .expert-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
.expert-section .expert-image > img, .expert-section .expert-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  .expert-section .expert-image > img, .expert-section .expert-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    .expert-section .expert-image > img, .expert-section .expert-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  .expert-section .expert-image:hover > img, .expert-section .expert-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
.expert-section .expert-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.actus-section {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 3vw, 1.2rem) 0 clamp(2rem, 3vw, 3rem);
  text-align: left;
  width: min(1100px, 92vw);
  margin: 0 auto;
  /* Responsive */
}
.actus-section h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  text-align: left;
}
.actus-section .actus-marquee {
  --label-w: clamp(84px, 14vw, 140px);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0;
  padding-left: calc(var(--label-w) + 1rem);
  /* Bandeau type TV info */
  background: linear-gradient(135deg, #031837, #08316e);
  border-radius: 0.4rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* Cartouche "ACTUS" à gauche */
  /* Point "live" à côté du cartouche (pulsant) */
}
.actus-section .actus-marquee:hover .marquee-track {
  animation-play-state: paused;
}
.actus-section .actus-marquee::before {
  content: "NEWS";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: var(--label-w);
  display: grid;
  place-items: center;
  padding: 0.35rem 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #031837;
  background: linear-gradient(180deg, rgb(248.55, 194.8, 158.25), #f6ab78);
  border-radius: 0.35rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 2;
  white-space: nowrap;
}
.actus-section .actus-marquee::after {
  content: "";
  position: absolute;
  left: calc(0.5rem + var(--label-w) + 0.35rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pulse-dot 1.6s ease-out infinite;
  z-index: 2;
}
.actus-section .marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 0.35rem 0;
  width: -moz-fit-content;
  width: fit-content;
  will-change: transform;
  animation: scroll-left 60s linear infinite;
}
.actus-section .actu-item {
  position: relative;
  white-space: nowrap;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding-inline: 0.2rem;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  /* Séparateur type TV entre items */
  /* Dernier lien = CTA "Voir toutes les actus" plus visible */
}
.actus-section .actu-item + .actu-item {
  padding-left: 1.4rem;
}
.actus-section .actu-item + .actu-item::before {
  content: "•";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 900;
  font-size: 0.9rem;
}
.actus-section .actu-item:hover {
  color: #f6ab78;
  text-shadow: 0 0 6px rgba(246, 171, 120, 0.35);
  text-decoration: none;
}
.actus-section .actu-item:last-child {
  color: #5bb887;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.actus-section .actu-item:last-child::after {
  content: " ›";
  font-weight: 900;
}
.actus-section .actu-item:last-child:hover {
  color: #f6ab78;
}
@media (max-width: 1024px) {
  .actus-section .actus-marquee {
    --label-w: clamp(74px, 22vw, 110px);
    padding: 0.5rem 0;
    padding-left: calc(var(--label-w) + 0.8rem);
  }
  .actus-section .marquee-track {
    gap: clamp(0.8rem, 3.2vw, 1.4rem);
    padding: 0.25rem 0;
  }
  .actus-section .actu-item {
    font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  }
  .actus-section .actu-item + .actu-item {
    padding-left: 1rem;
  }
  .actus-section .actu-item + .actu-item::before {
    left: 0.3rem;
  }
}

/* === PATCH BFM++ : plus haut, cartouche décalé, masque anti-défilement === */
.actus-section {
  /* piste + typo un peu plus grandes pour la nouvelle hauteur */
  /* Responsive : on garde l’effet sans sur-gonfler sur mobile */
}
.actus-section .actus-marquee {
  --label-w: clamp(70px, 18vw, 100px);
  --label-shift: 1cm;
  padding: 1.8rem 2rem;
  padding-left: calc(var(--label-w) + var(--label-shift) + 1rem);
  position: relative;
  /* Cartouche ACTUS — rouge de la charte, déplacé vers le centre */
}
.actus-section .actus-marquee::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--label-w) + var(--label-shift) + 0.8rem);
  height: 100%;
  background: linear-gradient(90deg, #031837 0%, rgb(4.5827586207, 36.6620689655, 84.0172413793) 100%);
  z-index: 2;
  pointer-events: none;
}
.actus-section .actus-marquee::before {
  left: 1.5rem;
  width: var(--label-w);
  color: #e63946;
  background: #ffffff;
  border: 2px solid #e63946;
  border-left: 4px solid #e63946;
  border-top: 3px solid #e63946;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  z-index: 3; /* au-dessus du masque */
  padding: 0.7rem 0.2rem; /* un peu plus costaud */
  font-size: clamp(0.85rem, 1.6vw, 1rem);
}
.actus-section .marquee-track {
  position: relative;
  z-index: 1;
  padding: 0.9rem 0;
}
.actus-section .actu-item {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
}
@media (max-width: 1024px) {
  .actus-section .actus-marquee {
    --label-w: clamp(74px, 28vw, 160px);
    --label-shift: clamp(12px, 6vw, 1cm);
    padding: 1.35rem 0;
    padding-left: calc(var(--label-w) + var(--label-shift) + 0.8rem);
  }
  .actus-section .actus-marquee::after {
    width: calc(var(--label-w) + var(--label-shift) + 0.6rem);
  }
  .actus-section .actus-marquee::before {
    padding: 0.45rem 0.7rem;
  }
  .actus-section .marquee-track {
    padding: 0.6rem 0;
  }
  .actus-section .actu-item {
    font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  }
}

/* Rétrécir la boîte "NEWS" uniquement en mobile */
@media (max-width: 1024px) {
  .actus-section .actus-marquee {
    --label-w: 74px;
  }
}
/* Défilement existant conservé */
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Petit effet "live" */
@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    opacity: 0.85;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    opacity: 1;
  }
}
.text-sep.shape-diamond {
  width: 14px;
  height: 14px;
  display: block;
  margin: 1rem auto;
  background: #031837;
  border-radius: 2px;
  transform: rotate(45deg); /* forme losange au départ */
  transform-origin: 50% 50%;
  transition: transform 0.28s ease; /* petite anim à chaque tick */
}

/* si tu avais laissé une animation CSS avant, supprime-la ici */
@media (prefers-reduced-motion: reduce) {
  .text-sep.shape-diamond {
    transition: none;
  }
}
/* ===========================================
   BOUTON UNIQUE — design WHY (reflets + hover)
   =========================================== */
.btn, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* Largeur commune : même min partout, grandit si besoin */
  min-inline-size: min(13rem, 80vw);
  inline-size: -moz-max-content;
  inline-size: max-content;
  max-inline-size: 92vw;
  text-align: center;
  white-space: nowrap; /* libellés identiques → pas de wrap */
  line-height: 0.7;
  font-weight: 700;
  /* Tailles fluides (réf. WHY) */
  font-size: 1.1rem;
  padding: clamp(0.45rem, 1.25vw, 0.7rem) clamp(0.6rem, 1.9vw, 1.2rem);
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-height: clamp(2.2rem, 2.057rem + 0.381vw, 2.4rem);
  /* Rayons */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  /* Fond $vert1 (léger dégradé) */
  background: linear-gradient(180deg, rgb(0, 203.76, 100.6222222222) 0%, #00a250 60%, rgb(0, 145.8, 72) 100%);
  /* Texte $creme (bétonne tous les états lien) */
  /* Reflets WHY (haut + bas) */
  /* États (WHY : léger enfoncé) */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* Icône interne optionnelle */
}
.btn, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn, .btn:link, .btn:visited, .btn:hover, .btn:active, .btn:focus-visible {
  color: #ffffff;
  text-decoration: none;
}
.btn::before, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn::before, .btn::after, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  height: 0.1rem;
  border-radius: 999px;
  pointer-events: none;
}
.btn::before, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn::before {
  top: 0.4rem;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 20%, #fff 80%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.5;
}
.btn::after, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn::after {
  bottom: 0.5rem;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 20%, #fff 80%, rgba(255, 255, 255, 0) 100%);
  filter: blur(1px);
  opacity: 0.05;
}
.btn:hover, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn:hover {
  transform: translateY(3px) scale(0.98);
  box-shadow: none;
}
.btn:active, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn:active {
  transform: translateY(3px) scale(0.98);
}
.btn:focus-visible, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
.btn[disabled], body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons [disabled].btn, .btn.is-disabled, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .is-disabled.btn {
  opacity: 0.55;
  pointer-events: none;
}
.btn .ico, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn .ico {
  color: currentColor;
  fill: currentColor;
  inline-size: 1.2em;
  block-size: 1.2em;
}

/* =========================================================
   Mobile — version plus compacte (≤ 520px)
   ========================================================= */
@media (max-width: 520px) {
  .btn, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons .btn {
    min-inline-size: min(12rem, 92vw);
  }
}
body.page_home {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page_home img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page_home a {
  color: currentColor;
  text-decoration-color: currentColor;
}
body.page_home h1 {
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, -0.214rem + 1.905vw, 1.5rem) 0 clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page_home h2 {
  font-family: "Raleway", sans-serif;
  text-align: left;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page_home h3 {
  font-family: "Raleway", sans-serif;
  text-align: center;
  width: min(1100px, 92vw);
  margin: 0 auto;
  font-size: clamp(1.55rem, 1.229rem + 0.857vw, 2rem);
  color: #00a250;
  line-height: clamp(2.2rem, 1.914rem + 0.762vw, 2.6rem);
}
@media (max-width: 768px) {
  body.page_home h3 {
    width: 95%;
  }
}
body.page_home p {
  text-align: justify;
}

/* Scope page */
body.page-actus {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-actus img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-actus a {
  text-decoration: none;
  color: inherit;
}
body.page-actus h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-actus h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-actus p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-actus main .actualites-section {
  padding: 2.5rem 1rem;
  background: #ffffff;
  /* ====== Grille des actus ====== */
  /* Fallback si pas d'image */
  /* Message d’erreur doux */
  /* ====== Responsive (≤ 768px) ====== */
}
body.page-actus main .actualites-section .actu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
body.page-actus main .actualites-section .actu-card {
  background: #fff;
  border-radius: 0.6rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.page-actus main .actualites-section .actu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
body.page-actus main .actualites-section .actu-media {
  background: rgba(91, 184, 135, 0.3);
}
body.page-actus main .actualites-section .actu-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}
body.page-actus main .actualites-section .actu-body {
  padding: 1rem 1rem 1.1rem;
}
body.page-actus main .actualites-section .actu-title {
  margin: 0 0 0.35rem;
  color: #031837;
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  line-height: 1.25;
}
body.page-actus main .actualites-section .actu-meta {
  margin: 0 0 0.6rem;
  color: #4B5563;
  font-size: 1.1rem;
  opacity: 0.9;
}
body.page-actus main .actualites-section .actu-meta .tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.45rem;
  border-radius: 0.4rem;
  background: rgba(243, 111, 33, 0.14);
  color: #F36F21;
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: baseline;
}
body.page-actus main .actualites-section .actu-summary {
  margin: 0;
  color: #031837;
  opacity: 0.9;
  font-size: 1.1rem;
  line-height: 1.45;
}
body.page-actus main .actualites-section .thumb-fallback {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(3, 24, 55, 0.08), rgba(0, 162, 80, 0.1));
}
body.page-actus main .actualites-section .actu-error {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  color: #031837;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 0.6rem;
}
@media (max-width: 768px) {
  body.page-actus main .actualites-section {
    padding: 1.6rem 0.8rem;
  }
  body.page-actus main .actualites-section .actu-list {
    gap: 0.8rem;
  }
}
body.page-actus main .actualites-section .actu-controls {
  display: none !important;
}
body.page-actus main .actualites-section .actu-meta .tag {
  display: none !important;
}

/* Scope page */
body.page-definition {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-definition img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-definition a {
  color: currentColor;
  text-decoration-color: currentColor;
}
body.page-definition h1 {
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-definition h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  text-align: left;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-definition p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-definition main .intro {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-definition main .intro .intro-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-definition main .intro .intro-container {
    grid-template-columns: 1fr;
  }
}
body.page-definition main .intro .intro-container .intro-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  line-height: 1.7;
}
body.page-definition main .intro .intro-container .intro-text .cta-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
body.page-definition main .intro .intro-container .intro-image {
  display: flex;
  justify-self: center;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-definition main .intro .intro-container .intro-image > img, body.page-definition main .intro .intro-container .intro-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-definition main .intro .intro-container .intro-image > img, body.page-definition main .intro .intro-container .intro-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-definition main .intro .intro-container .intro-image > img, body.page-definition main .intro .intro-container .intro-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-definition main .intro .intro-container .intro-image:hover > img, body.page-definition main .intro .intro-container .intro-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-definition main .intro .intro-container .intro-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
body.page-definition main .definition {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-definition main .definition .definition-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-definition main .definition .definition-container .info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 0.8rem;
}
@media (max-width: 1024px) {
  body.page-definition main .definition .definition-container .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  body.page-definition main .definition .definition-container .info-grid {
    grid-template-columns: 1fr;
  }
}
body.page-definition main .definition .definition-container .info-card {
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-top: 2px solid rgb(0, 71, 30);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  border-radius: 0.4rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  padding: clamp(0.1rem, 0.6vw, 0.9rem) clamp(0.2rem, 1.3vw, 0.9rem) clamp(0.2rem, 1.3vw, 0.9rem);
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.page-definition main .definition .definition-container .info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
}
body.page-definition main .definition .definition-container .info-card .ico {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.25rem;
}
body.page-definition main .definition .definition-container .info-card strong {
  display: block;
  color: #031837;
  font-size: 1.1rem;
}
body.page-definition main .definition .definition-container .info-card small {
  color: #00a250;
  font-size: 1.1rem;
}
@media (max-width: 990px) {
  body.page-definition main .definition .definition-container .info-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.page-definition main .definition .definition-container .flip-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.page-definition main .definition .definition-container .tiles {
    grid-template-columns: 1fr 1fr;
  }
  body.page-definition main .definition .definition-container .goals {
    grid-template-columns: 1fr 1fr;
  }
  body.page-definition main .definition .definition-container .row {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 560px) {
  body.page-definition main .definition .definition-container .info-grid, body.page-definition main .definition .definition-container .flip-grid, body.page-definition main .definition .definition-container .tiles, body.page-definition main .definition .definition-container .goals {
    grid-template-columns: 1fr;
  }
  body.page-definition main .definition .definition-container .btn {
    width: 100%;
  }
}
body.page-definition main .cadre {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-definition main .cadre .cadre-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-definition main .cadre .cadre-container blockquote {
  font-style: italic;
}
body.page-definition main .cadre .cadre-container .cadre-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  margin: clamp(1.02rem, 2.04vw, 1.7rem) 0 clamp(1.02rem, 2.04vw, 1.7rem);
}
body.page-definition main .cadre .cadre-container .cadre-list li {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.164), rgba(246, 171, 120, 0.062));
  border-left: 4px solid #96420a;
  border-top: 1px solid rgba(150, 66, 10, 0.6588235294);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.4rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-definition main .cadre .cadre-container .cadre-list li:hover {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.24), rgba(246, 171, 120, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
body.page-definition main .cadre .cadre-container .cta-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(2rem, 4vw, 5rem) 0rem clamp(1rem, 1.4vw, 1rem);
}
body.page-definition main .principe {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  color: #031837;
  text-align: justify;
}
body.page-definition main .principe .principe-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
  /* ====== Mise en page texte | carte (60 / 40) ====== */
  /* ====== Bloc texte ====== */
  /* Titre + rond numéroté */
  /* Liste interne (puces) */
  /* ====== Carte (flip) – hauteur FIXE ====== */
  /* ====== Responsive ====== */
}
body.page-definition main .principe .principe-container .principe-list {
  counter-reset: principe;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}
body.page-definition main .principe .principe-container .principe-list > li.principe-item {
  counter-increment: principe;
  display: grid;
  grid-template-columns: 5fr 2fr;
  grid-template-areas: "texte carte";
  align-items: start;
  -moz-column-gap: clamp(1rem, 2.5vw, 2rem);
       column-gap: clamp(1rem, 2.5vw, 2rem);
  row-gap: 0;
  margin: 0;
  padding-bottom: clamp(1.6rem, 1.468rem + 0.814vw, 2.2rem);
}
body.page-definition main .principe .principe-container .principe-list > li.principe-item:nth-child(2n) {
  grid-template-columns: 2fr 5fr;
  grid-template-areas: "carte texte";
}
body.page-definition main .principe .principe-container .principe-item__texte {
  grid-area: texte;
  min-width: 0;
}
body.page-definition main .principe .principe-container .principe-list > li.principe-item > .principe-item__texte > h4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: #031837;
}
body.page-definition main .principe .principe-container .principe-list > li.principe-item > .principe-item__texte > h4:hover {
  color: #be097f;
}
body.page-definition main .principe .principe-container .principe-list > li.principe-item > .principe-item__texte > h4::before {
  content: counter(principe);
  flex: 0 0 auto;
  aspect-ratio: 1/1;
  width: 2.2rem;
  min-width: 2.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #be097f;
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
}
body.page-definition main .principe .principe-container .principe-list > li.principe-item > .principe-item__texte > ul {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: disc inside;
  text-align: left;
}
body.page-definition main .principe .principe-container .principe-list > li.principe-item > .principe-item__texte > ul li {
  margin: 0.35rem 0;
  font-size: clamp(1.02rem, 1.6vw, 1.12rem);
  line-height: 1.6;
}
body.page-definition main .principe .principe-container .principe-list > li.principe-item > .principe-item__texte > ul li:hover {
  color: #00a250;
}
body.page-definition main .principe .principe-container .flip-grid {
  grid-area: carte;
  display: grid;
  grid-template-columns: 1fr;
  align-self: start; /* reste en haut, n’étire pas */
  justify-content: center;
  align-items: start;
  gap: 0.9rem;
  margin-top: 0.2rem;
}
body.page-definition main .principe .principe-container .flip-card {
  perspective: 1000px;
  display: grid;
  /* pas de height:100% ici */
}
body.page-definition main .principe .principe-container .flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
  /* pas de height:100% ici non plus */
}
body.page-definition main .principe .principe-container .flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}
body.page-definition main .principe .principe-container .flip-face {
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  border-radius: 0.4rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  font-size: 1.1rem;
  /* ⬇️ hauteur fixée, responsive via clamp */
  height: clamp(6rem, 3vw, 8rem);
  padding: clamp(1rem, 2vw, 1.4rem);
  display: grid;
  place-items: center;
  text-align: center;
  backface-visibility: hidden;
  font-weight: bold;
}
body.page-definition main .principe .principe-container .flip-face.back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
  font-weight: 200;
}
@media (max-width: 700px) {
  body.page-definition main .principe .principe-container .principe-list > li.principe-item,
  body.page-definition main .principe .principe-container .principe-list > li.principe-item:nth-child(2n) {
    grid-template-columns: 1fr;
    grid-template-areas: "texte" "carte";
    row-gap: clamp(0.6rem, 2vw, 1rem);
    -moz-column-gap: 0;
         column-gap: 0;
  }
  body.page-definition main .principe .principe-container .principe-list > li.principe-item > .principe-item__texte > h4 {
    flex-direction: column;
    gap: 0.45rem;
    text-align: start;
  }
}
body.page-definition main .domaines {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: center;
}
body.page-definition main .domaines .domaines-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-definition main .domaines .domaines-container p {
  text-align: start;
}
body.page-definition main .domaines .domaines-grid {
  list-style: none;
  margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 400px));
  justify-content: center;
  justify-items: center;
  gap: clamp(0.6rem, 0.292rem + 1.898vw, 2rem);
}
body.page-definition main .domaines .domaine .card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: clip;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: #000;
}
body.page-definition main .domaines .domaine .card img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body.page-definition main .domaines .domaine .card .band {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: rgba(3, 24, 55, 0.86);
  color: #ffffff;
  box-shadow: 0 -10px 18px rgba(0, 0, 0, 0.22) inset;
}
body.page-definition main .domaines .domaine .card .band .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
body.page-definition main .domaines .domaine .card .band .txt em {
  font-style: normal;
  font-weight: 700;
  color: #ffffff;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
}
body.page-definition main .domaines .domaine .card .band .txt small {
  font-size: clamp(0.85rem, 1.4vw, 0.95rem);
  color: rgb(239.7, 239.7, 239.7);
  opacity: 0.95;
  margin-top: 0.1rem;
}
@media (hover: hover) and (pointer: fine) {
  body.page-definition main .domaines .domaine .card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  body.page-definition main .domaines .domaine .card:hover {
    transform: translateY(-12px);
    box-shadow: 14px 14px 25px rgba(1, 16, 39, 0.6156862745);
  }
}
@media (max-width: 992px) {
  body.page-definition main .domaines .domaines-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.6rem, 2.4vw, 1.2rem);
  }
  body.page-definition main .domaines .domaine .card {
    aspect-ratio: 16/10;
  }
}
@media (max-width: 640px) {
  body.page-definition main .domaines .domaines-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}
@media (hover: none), (pointer: coarse), (max-width: 992px) {
  body.page-definition main .domaines .domaine .card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  body.page-definition main .domaines .domaine .card:active,
  body.page-definition main .domaines .domaine .card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 6px 6px 10px rgba(1, 16, 39, 0.6156862745);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-definition main .domaines .domaine .card {
    transition: none !important;
  }
}
body.page-definition main .domaines .domaines-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  margin-bottom: clamp(1.02rem, 2.04vw, 1.7rem);
}
body.page-definition main .domaines .domaines-list > h4 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: #031837;
}
body.page-definition main .domaines .domaines-list > ul {
  margin: 0.35rem auto 0;
  padding: 0;
  max-width: 75ch;
  text-align: center;
  list-style: disc inside;
}
body.page-definition main .domaines .domaines-list > ul li {
  margin: 0.35rem 0;
  font-size: clamp(1.02rem, 1.6vw, 1.12rem);
  line-height: 1.6;
}
body.page-definition main .domaines .domaines-list > ul li:hover {
  color: #00a250;
}
@media (max-width: 990px) {
  body.page-definition main .domaines .domaines-list > ul {
    max-width: 68ch;
    text-align: start;
  }
  body.page-definition main .domaines .domaines-list > h4 {
    text-align: start;
  }
}
body.page-definition main .objectifs {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-definition main .objectifs .objectifs-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-definition main .objectifs .objectifs-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
body.page-definition main .objectifs .objectifs-container h4:hover {
  color: #be097f;
}
body.page-definition main .objectifs .objectifs-container .goals {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-definition main .objectifs .objectifs-container .goals li {
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-left: 4px solid rgb(0, 71, 30);
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-definition main .objectifs .objectifs-container .goals li:hover {
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-definition main .objectifs .objectifs-container .goals {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-definition main .objectifs .objectifs-container .goals > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-definition main .comparatif {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: center;
}
body.page-definition main .comparatif h2 {
  width: min(1100px, 92vw);
  margin: 0 auto clamp(1rem, 0.78rem + 1.356vw, 2rem);
}
body.page-definition main .comparatif .comparatif-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-definition main .comparatif .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-definition main .comparatif .colonne:not(:first-child) {
  border-inline-start: 1px solid rgba(3, 24, 55, 0.12);
}
body.page-definition main .comparatif .h4-colonne {
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
}
body.page-definition main .comparatif #col-cpe .h4-colonne {
  border-bottom-color: rgb(56.7, 153.9, 47.7);
}
body.page-definition main .comparatif .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-definition main .comparatif .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
}
body.page-definition main .comparatif .col-list li:last-child {
  border-bottom: 0;
}
body.page-definition main .comparatif #col-cpe {
  background: rgba(63, 171, 53, 0.04);
  border-inline-start: 2px solid rgb(56.7, 153.9, 47.7);
  border-inline-end: 2px solid rgb(56.7, 153.9, 47.7);
}
body.page-definition main .comparatif #col-cpe .col-list li {
  background: rgba(63, 171, 53, 0.05);
  font-weight: 600;
  border-bottom-color: rgb(59.85, 162.45, 50.35);
}
body.page-definition main .comparatif #col-classic .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.85, 22.8, 52.25);
}
@media (hover: hover) and (pointer: fine) {
  body.page-definition main .comparatif .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-definition main .comparatif #col-cpe .col-list li:hover {
    background: rgba(63, 171, 53, 0.1);
  }
}
@media (max-width: 900px) {
  body.page-definition main .comparatif .h4-colonne {
    display: none;
  }
  body.page-definition main .comparatif .comparatif-container {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-definition main .comparatif .comparatif-container .colonne,
  body.page-definition main .comparatif .comparatif-container .colonne > .col-list {
    display: contents;
  }
  body.page-definition main .comparatif .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-left: 4px solid rgb(0, 71, 30);
    background: #ffffff;
    padding: 0.8rem 1rem;
  }
  body.page-definition main .comparatif #objectif .col-list li::before {
    content: "Objectif : ";
    font-weight: 700;
    color: #031837;
  }
  body.page-definition main .comparatif #col-cpe .col-list li::before {
    content: "CPE : ";
    font-weight: 700;
    color: rgb(50.4, 136.8, 42.4);
  }
  body.page-definition main .comparatif #col-classic .col-list li::before {
    content: "Contrat classique : ";
    font-weight: 700;
    color: rgb(2.7, 21.6, 49.5);
  }
  body.page-definition main .comparatif #objectif .col-list li {
    border-radius: 0.6rem 0.6rem 0 0;
    border-bottom: 0;
    background: #ffffff;
  }
  body.page-definition main .comparatif #col-cpe .col-list li {
    border-top: 2px solid rgb(56.7, 153.9, 47.7);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
    background: rgba(63, 171, 53, 0.06);
    font-weight: 600;
  }
  body.page-definition main .comparatif #col-classic .col-list li {
    border-radius: 0 0 0.6rem 0.6rem;
    border-top: 1px solid rgba(3, 24, 55, 0.3);
    margin-bottom: 0.8rem;
    background: rgba(190, 9, 127, 0.1);
    color: rgb(2.85, 22.8, 52.25);
  }
  body.page-definition main .comparatif #objectif .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-definition main .comparatif #col-cpe .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-definition main .comparatif #col-classic .col-list li:nth-child(1) {
    order: 3;
  }
  body.page-definition main .comparatif #objectif .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-definition main .comparatif #col-cpe .col-list li:nth-child(2) {
    order: 5;
  }
  body.page-definition main .comparatif #col-classic .col-list li:nth-child(2) {
    order: 6;
  }
  body.page-definition main .comparatif #objectif .col-list li:nth-child(3) {
    order: 7;
  }
  body.page-definition main .comparatif #col-cpe .col-list li:nth-child(3) {
    order: 8;
  }
  body.page-definition main .comparatif #col-classic .col-list li:nth-child(3) {
    order: 9;
  }
  body.page-definition main .comparatif #objectif .col-list li:nth-child(4) {
    order: 10;
  }
  body.page-definition main .comparatif #col-cpe .col-list li:nth-child(4) {
    order: 11;
  }
  body.page-definition main .comparatif #col-classic .col-list li:nth-child(4) {
    order: 12;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-definition main .comparatif .col-list li {
    transition: none !important;
  }
}
body.page-definition main .expert-section {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-definition main .expert-section .expert-content .expert-text .h3-resume {
  color: #00a250;
}
@media (max-width: 768px) {
  body.page-definition main .expert-section .expert-content .expert-text {
    align-items: center;
  }
}

/* Scope page */
body.page-fonctionnement {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-fonctionnement img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-fonctionnement a {
  text-decoration: none;
  color: inherit;
}
body.page-fonctionnement h1 {
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-fonctionnement h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-fonctionnement p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  text-align: justify;
}
body.page-fonctionnement main .intro {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-fonctionnement main .intro .intro-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-fonctionnement main .intro .intro-container {
    grid-template-columns: 1fr;
  }
}
body.page-fonctionnement main .intro .intro-container .intro-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.7;
}
body.page-fonctionnement main .intro .intro-container .intro-text .cta-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(1rem, 2.4vw, 2rem);
}
@media (max-width: 768px) {
  body.page-fonctionnement main .intro .intro-container .intro-text {
    align-items: center;
  }
}
body.page-fonctionnement main .intro .intro-container .intro-image {
  display: flex;
  justify-self: center;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-fonctionnement main .intro .intro-container .intro-image > img, body.page-fonctionnement main .intro .intro-container .intro-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-fonctionnement main .intro .intro-container .intro-image > img, body.page-fonctionnement main .intro .intro-container .intro-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-fonctionnement main .intro .intro-container .intro-image > img, body.page-fonctionnement main .intro .intro-container .intro-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-fonctionnement main .intro .intro-container .intro-image:hover > img, body.page-fonctionnement main .intro .intro-container .intro-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-fonctionnement main .intro .intro-container .intro-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
body.page-fonctionnement main .etapes {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-fonctionnement main .etapes .etapes-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-fonctionnement main .etapes .etapes-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  color: #be097f;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list {
  counter-reset: principe;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list > li {
  margin: 0;
  padding-bottom: 2rem;
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
@media (min-width: 768px) {
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li:nth-child(odd) {
    grid-template-columns: 2fr 1fr;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li:nth-child(odd) .etape-text {
    grid-column: 1;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li:nth-child(odd) .etape-media {
    grid-column: 2;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li:nth-child(even) {
    grid-template-columns: 1fr 2fr;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li:nth-child(even) .etape-media {
    grid-column: 1;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li:nth-child(even) .etape-text {
    grid-column: 2;
  }
}
body.page-fonctionnement main .etapes .etapes-container .etape-text {
  text-align: left;
}
body.page-fonctionnement main .etapes .etapes-container .etape-media {
  display: flex;
  justify-self: center;
  width: clamp(12rem, 8.898rem + 6.78vw, 15rem);
  aspect-ratio: 2/3;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body.page-fonctionnement main .etapes .etapes-container .etape-media img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > h5 {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > h5:hover {
  color: #be097f;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > p {
  font-size: 1.1rem;
}
body.page-fonctionnement main .etapes .etapes-container li:last-child {
  padding-bottom: 0;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: #031837;
  text-align: center;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > h5::before {
  content: counter(principe);
  counter-increment: principe;
  flex: 0 0 auto;
  aspect-ratio: 1/1;
  width: 2.2rem;
  min-width: 2.2rem;
  height: auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5bb887;
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  margin-right: 1rem;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > ul {
  margin: 0.35rem auto 0.6rem;
  padding: 0;
  list-style: disc inside;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > ul li {
  margin: 0.35rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
}
body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > ul li:hover {
  color: #00a250;
}
@media (max-width: 768px) {
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li {
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: center;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li .etape-text {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list > li .etape-media {
    justify-self: center;
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > h5 {
    flex-direction: column;
    gap: 0.45rem;
    justify-content: flex-start;
    text-align: center;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > h5::before {
    width: clamp(1.8rem, 6vw, 2rem);
    min-width: clamp(1.8rem, 6vw, 2rem);
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
    margin-right: 0;
  }
  body.page-fonctionnement main .etapes .etapes-container .etapes-list .etape-text > ul {
    margin-left: 0;
  }
}
body.page-fonctionnement main .ipmvp {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-fonctionnement main .ipmvp .ipmvp-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-fonctionnement main .ipmvp .ipmvp-container {
    grid-template-columns: 1fr;
  }
}
body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.7;
}
body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-text .ipmvp-p {
  margin-bottom: 0;
}
body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-text .ipmvp-ul {
  margin-left: clamp(0rem, -0.441rem + 2.712vw, 2rem);
}
body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-text .ipmvp-ul > li {
  margin: 0.35rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
}
body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-text .ipmvp-ul > li:hover {
  color: #00a250;
}
body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-text .cta-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(1rem, 2.4vw, 2rem);
  margin-bottom: clamp(1rem, 1.4vw, 1rem);
}
@media (max-width: 768px) {
  body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-text {
    align-items: center;
  }
}
body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-image {
  display: flex;
  justify-self: center;
}
body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-image img {
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
  border-radius: 0.4rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: block;
  margin: 0 auto;
}
@media (max-width: 400px) {
  body.page-fonctionnement main .ipmvp .ipmvp-container .ipmvp-image img {
    width: 100%;
  }
}
body.page-fonctionnement main .roles {
  padding: clamp(1rem, 5vw, 3rem) 1rem clamp(2rem, 5vw, 4rem);
  color: #031837;
  text-align: justify;
  /* === Vignettes CENTRÉES comme ta version d'origine (flex) === */
  /* === Flip sans JS : hover + focus/tap (mobile) === */
  /* Overlay grid => hauteur AUTO = max(face, verso) */
}
body.page-fonctionnement main .roles .roles-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-fonctionnement main .roles .roles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centre chaque rangée */
  gap: clamp(0.8rem, -0.057rem + 2.286vw, 2rem);
  margin-top: 0.8rem;
}
body.page-fonctionnement main .roles .role-card {
  flex: 0 1 clamp(280px, 30vw, 340px);
  max-inline-size: 340px;
  width: 100%;
}
body.page-fonctionnement main .roles .flip-card {
  perspective: 1000px;
  display: block;
  outline: none;
}
body.page-fonctionnement main .roles .flip-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}
body.page-fonctionnement main .roles .flip-card:hover .flip-inner,
body.page-fonctionnement main .roles .flip-card:focus-within .flip-inner {
  transform: rotateY(180deg);
}
body.page-fonctionnement main .roles .flip-face {
  grid-area: 1/1;
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  border-radius: 0.4rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  /* IMPORTANT pour éviter l’écrasement */
  height: auto; /* override de toute hauteur fixe résiduelle */
  min-height: clamp(7.5rem, 6.429rem + 2.857vw, 9rem);
  padding: clamp(1rem, 2vw, 1.4rem);
  display: grid;
  place-items: center;
  text-align: center;
  backface-visibility: hidden;
  backface-visibility: hidden;
}
body.page-fonctionnement main .roles .flip-face.back {
  transform: rotateY(180deg);
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
}
body.page-fonctionnement main .roles .role-icon {
  inline-size: clamp(44px, 6.8vw, 60px);
  aspect-ratio: 1/1;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 0.35rem;
  filter: invert(17%) sepia(100%) saturate(3540%) hue-rotate(308deg) brightness(86%) contrast(110%);
}
body.page-fonctionnement main .roles h3 {
  color: #00a250;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0;
}
body.page-fonctionnement main .roles p {
  color: #031837;
  font-size: 1.1rem;
  line-height: 1.45;
  margin: 0;
  font-weight: 100;
  text-align: center;
}
@media (max-width: 600px) {
  body.page-fonctionnement main .roles { /* 1 par ligne, centrée */ }
  body.page-fonctionnement main .roles .role-card {
    flex-basis: 100%;
    max-inline-size: none;
  }
}
body.page-fonctionnement main .pourquoi {
  padding: clamp(1rem, 0.559rem + 2.712vw, 3rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-fonctionnement main .pourquoi .pourquoi-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-fonctionnement main .pourquoi .pourquoi-container .pourquoi-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  margin: clamp(1.02rem, 2.04vw, 1.7rem) 0;
}
body.page-fonctionnement main .pourquoi .pourquoi-container .pourquoi-list li {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.164), rgba(246, 171, 120, 0.062));
  border-left: 4px solid #96420a;
  border-top: 1px solid rgba(150, 66, 10, 0.6588235294);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-fonctionnement main .pourquoi .pourquoi-container .pourquoi-list li:hover {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.24), rgba(246, 171, 120, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-fonctionnement main .pourquoi .pourquoi-container .page-fonctionnement .pourquoi {
    text-align: left;
  }
  body.page-fonctionnement main .pourquoi .pourquoi-container .page-fonctionnement .pourquoi .pourquoi-container {
    columns: initial !important;
    -webkit-columns: initial !important;
    -moz-columns: initial !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
  }
  body.page-fonctionnement main .pourquoi .pourquoi-container .page-fonctionnement .pourquoi .pourquoi-container .pourquoi-list {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-fonctionnement main .pourquoi .pourquoi-container .page-fonctionnement .pourquoi .pourquoi-container .pourquoi-list > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-fonctionnement main .pourquoi .action {
  width: 100%;
  display: block;
  padding-top: clamp(0.8rem, 2vw, 1.2rem);
  text-align: center;
  color: #031837;
  box-sizing: border-box;
}
body.page-fonctionnement main .pourquoi .action .cta-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
body.page-fonctionnement main .pourquoi .action .cta-inner h3 {
  color: #be097f;
  font-size: clamp(1.55rem, 1.229rem + 0.857vw, 2rem);
}
body.page-fonctionnement main .pourquoi .action .cta-inner h5 {
  font-size: 1.2rem;
}
body.page-fonctionnement main .pourquoi .action .cta-inner .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 0;
}
@media (max-width: 720px) {
  body.page-fonctionnement main .pourquoi .action .action .cta-inner > .btn,
  body.page-fonctionnement main .pourquoi .action .action .cta-inner > * > .btn,
  body.page-fonctionnement main .pourquoi .action .action .cta-inner > * > * > .btn {
    display: block;
    box-sizing: border-box;
    flex: 1 1 100%;
    width: 100%;
    max-inline-size: 92vw;
    min-inline-size: 12rem;
    margin: 0 auto;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    line-height: 1.2;
    min-height: 44px;
    text-align: center;
    padding-inline: clamp(14px, 3.5vw, 18px);
  }
  body.page-fonctionnement main .pourquoi .action .action .cta-inner > *:has(> .btn) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: nowrap !important;
    width: 100%;
  }
  body.page-fonctionnement main .pourquoi .action .action .cta-inner > .btn + .btn,
  body.page-fonctionnement main .pourquoi .action .action .cta-inner > * > .btn + .btn,
  body.page-fonctionnement main .pourquoi .action .action .cta-inner > * > * > .btn + .btn {
    margin-top: 0.8rem;
  }
}
body.page-fonctionnement main .exemple {
  padding: clamp(1rem, 0.559rem + 2.712vw, 3rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-fonctionnement main .exemple .exemple-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-fonctionnement main .exemple .exemple-container {
    grid-template-columns: 1fr;
  }
}
body.page-fonctionnement main .exemple .exemple-container .exemple-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-fonctionnement main .exemple .exemple-container .exemple-text .exemple-p {
  margin-bottom: 1rem;
}
body.page-fonctionnement main .exemple .exemple-container .exemple-text .exemple-ul {
  margin-left: clamp(0.5rem, 0.169rem + 2.034vw, 2rem);
}
body.page-fonctionnement main .exemple .exemple-container .exemple-text .exemple-ul li {
  margin-bottom: clamp(0.5rem, 0.39rem + 0.678vw, 1rem);
}
body.page-fonctionnement main .exemple .exemple-container .exemple-text .exemple-ul li:hover {
  color: #00a250;
}
body.page-fonctionnement main .exemple .exemple-container .exemple-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-fonctionnement main .exemple .exemple-container .exemple-image > img, body.page-fonctionnement main .exemple .exemple-container .exemple-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-fonctionnement main .exemple .exemple-container .exemple-image > img, body.page-fonctionnement main .exemple .exemple-container .exemple-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-fonctionnement main .exemple .exemple-container .exemple-image > img, body.page-fonctionnement main .exemple .exemple-container .exemple-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-fonctionnement main .exemple .exemple-container .exemple-image:hover > img, body.page-fonctionnement main .exemple .exemple-container .exemple-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-fonctionnement main .exemple .exemple-container .exemple-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-fonctionnement main .exemple .exemple-container .exemple-image {
    justify-self: center;
    margin-bottom: 1rem;
  }
}

/* Scope page */
body.page-typologies {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-typologies img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-typologies a {
  text-decoration: none;
  color: inherit;
}
body.page-typologies h1 {
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-typologies h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-typologies p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-typologies main .intro {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-typologies main .intro .intro-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-typologies main .intro .intro-container {
    grid-template-columns: 1fr;
  }
}
body.page-typologies main .intro .intro-container .intro-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-typologies main .intro .intro-container .intro-ul {
  margin-left: clamp(0.5rem, 0.169rem + 2.034vw, 2rem);
}
body.page-typologies main .intro .intro-container .intro-ul li {
  margin-bottom: clamp(0rem, -0.357rem + 0.952vw, 0.5rem);
}
body.page-typologies main .intro .intro-container .intro-ul li:hover {
  color: #00a250;
}
body.page-typologies main .intro .intro-container .intro-image {
  display: flex;
  justify-self: flex-end;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 8.571rem + 23.81vw, 30rem);
}
body.page-typologies main .intro .intro-container .intro-image > img, body.page-typologies main .intro .intro-container .intro-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-typologies main .intro .intro-container .intro-image > img, body.page-typologies main .intro .intro-container .intro-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-typologies main .intro .intro-container .intro-image > img, body.page-typologies main .intro .intro-container .intro-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-typologies main .intro .intro-container .intro-image:hover > img, body.page-typologies main .intro .intro-container .intro-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-typologies main .intro .intro-container .intro-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-typologies main .intro .intro-container .intro-image {
    justify-self: center;
    margin-bottom: 1rem;
  }
}
body.page-typologies main .intro .intro-container .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 1rem;
}
body.page-typologies main .etapes {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  color: #031837;
  text-align: justify;
}
body.page-typologies main .etapes .etapes-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-typologies main .etapes .etapes-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  color: #be097f;
}
body.page-typologies main .etapes .etapes-container .etapes-list {
  counter-reset: principe;
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
body.page-typologies main .etapes .etapes-container .etapes-list > .etape {
  margin: 0;
  padding-bottom: 1.2rem;
  display: grid;
  gap: clamp(0.75rem, -0.2rem + 3vw, 2rem);
  align-items: start;
  grid-auto-rows: auto;
  grid-template-columns: 1fr;
}
body.page-typologies main .etapes .etapes-container .etapes-list > .etape:last-child {
  padding-bottom: 0;
}
body.page-typologies main .etapes .etapes-container .etape-text {
  text-align: left;
}
body.page-typologies main .etapes .etapes-container .etape-media {
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
  aspect-ratio: 2/3;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body.page-typologies main .etapes .etapes-container .etape-media img {
  width: clamp(17.5rem, 8.571rem + 23.81vw, 30rem);
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body.page-typologies main .etapes .etapes-container .etape-text > h5 {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
body.page-typologies main .etapes .etapes-container .etape-text > h5::before {
  content: counter(principe);
  counter-increment: principe;
  flex: 0 0 auto;
  aspect-ratio: 1/1;
  width: 2.2rem;
  min-width: 2.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5bb887;
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  margin-right: 1rem;
}
body.page-typologies main .etapes .etapes-container .etape-text > h5:hover {
  color: #be097f;
}
body.page-typologies main .etapes .etapes-container .bloc-flow {
  -moz-column-count: 1;
       column-count: 1;
  -moz-column-gap: clamp(0.8rem, 2vw, 1.2rem);
       column-gap: clamp(0.8rem, 2vw, 1.2rem);
}
body.page-typologies main .etapes .etapes-container .bloc-flow .bloc {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(0.6rem, 1.5vw, 1rem);
}
body.page-typologies main .etapes .etapes-container .bloc-flow .bloc p {
  margin: 0 0 0.3rem clamp(1rem, 0.286rem + 1.905vw, 2rem);
  font-size: 1.1rem;
}
body.page-typologies main .etapes .etapes-container .bloc-flow .bloc ul {
  margin-left: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  padding: 0;
  list-style: disc inside;
}
body.page-typologies main .etapes .etapes-container .bloc-flow .bloc ul li {
  margin: 0.2rem 0;
  font-size: 1.1rem;
  line-height: 1.55;
}
body.page-typologies main .etapes .etapes-container .bloc-flow .bloc ul li:hover {
  color: #00a250;
}
body.page-typologies main .etapes .etapes-container .bloc-flow .bloc:last-child {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  body.page-typologies main .etapes .etapes-container .etapes-list > .etape {
    grid-template-columns: 1fr 1fr 0.9fr;
  }
  body.page-typologies main .etapes .etapes-container .etape-text {
    grid-column: 1/span 2;
  }
  body.page-typologies main .etapes .etapes-container .etape-media {
    grid-column: 3;
    grid-row: 1/span 2;
    justify-self: center;
  }
  body.page-typologies main .etapes .etapes-container .etapes-list > .etape:nth-child(even) {
    grid-template-columns: 0.9fr 1fr 1fr;
  }
  body.page-typologies main .etapes .etapes-container .etapes-list > .etape:nth-child(even) .etape-media {
    grid-column: 1;
    grid-row: 1/span 2;
    justify-self: center;
  }
  body.page-typologies main .etapes .etapes-container .etapes-list > .etape:nth-child(even) .etape-text {
    grid-column: 2/span 2;
  }
  body.page-typologies main .etapes .etapes-container .bloc-flow {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  body.page-typologies main .etapes .etapes-container .etapes-list > .etape {
    grid-template-columns: 1fr;
  }
  body.page-typologies main .etapes .etapes-container .etape-text {
    grid-column: 1;
    grid-row: 1;
  }
  body.page-typologies main .etapes .etapes-container .etape-media {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }
  body.page-typologies main .etapes .etapes-container .bloc-flow {
    -moz-column-count: 2;
         column-count: 2;
  }
}
@media (max-width: 768px) {
  body.page-typologies main .etapes .etapes-container .etapes-list > .etape {
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: center;
    gap: clamp(0.6rem, 2.5vw, 1rem);
    padding-bottom: 1rem;
  }
  body.page-typologies main .etapes .etapes-container .etapes-list > .etape:last-child {
    padding-bottom: 0;
  }
  body.page-typologies main .etapes .etapes-container .etape-text {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }
  body.page-typologies main .etapes .etapes-container .etape-media {
    justify-self: center;
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }
  body.page-typologies main .etapes .etapes-container .etape-text > h5 {
    flex-direction: column;
    gap: 0.4rem;
    justify-content: flex-start;
    text-align: center;
  }
  body.page-typologies main .etapes .etapes-container .etape-text > h5::before {
    width: clamp(1.8rem, 6vw, 2rem);
    min-width: clamp(1.8rem, 6vw, 2rem);
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
    margin-right: 0;
  }
  body.page-typologies main .etapes .etapes-container .bloc-flow {
    -moz-column-count: 1;
         column-count: 1;
  }
}
body.page-typologies main .specificites {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
  /* === Flip sans JS : hover + focus/tap (mobile) === */
  /* Overlay grid => hauteur AUTO = max(face, verso) */
}
body.page-typologies main .specificites .specificites-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-typologies main .specificites .roles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centre chaque rangée */
  gap: clamp(0.8rem, -0.057rem + 2.286vw, 2rem);
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem);
}
body.page-typologies main .specificites .role-card {
  flex: 0 1 clamp(280px, 30vw, 340px);
  max-inline-size: 340px;
  width: 100%;
}
body.page-typologies main .specificites .flip-card {
  perspective: 1000px;
  display: block;
  outline: none;
}
body.page-typologies main .specificites .flip-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}
body.page-typologies main .specificites .flip-card:hover .flip-inner,
body.page-typologies main .specificites .flip-card:focus-within .flip-inner {
  transform: rotateY(180deg);
}
body.page-typologies main .specificites .flip-face {
  grid-area: 1/1;
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.164), rgba(246, 171, 120, 0.062));
  border-top: 1px solid rgba(150, 66, 10, 0.6588235294);
  border-left: 4px solid #96420a;
  border-radius: 0.4rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  /* IMPORTANT pour éviter l’écrasement */
  height: auto; /* override de toute hauteur fixe résiduelle */
  min-height: clamp(5rem, 2.857rem + 5.714vw, 8rem);
  padding: 0.2rem;
  display: grid;
  place-items: center;
  text-align: center;
  backface-visibility: hidden;
  backface-visibility: hidden;
}
body.page-typologies main .specificites .flip-face.back {
  transform: rotateY(180deg);
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.24), rgba(246, 171, 120, 0.295));
}
body.page-typologies main .specificites h3 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  line-height: 1.2;
  margin: 0;
}
body.page-typologies main .specificites h4 {
  font-size: 1.1rem;
  line-height: 1.2;
  margin-top: 0.5rem;
  color: #00a250;
}
body.page-typologies main .specificites p {
  margin-bottom: 0;
  text-align: center;
}
body.page-typologies main .specificites .p-specificites {
  text-align: left;
}
@media (max-width: 600px) {
  body.page-typologies main .specificites { /* 1 par ligne, centrée */ }
  body.page-typologies main .specificites .role-card {
    flex-basis: 100%;
    max-inline-size: none;
  }
}
body.page-typologies main .choix-typologie {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
  /* Responsive ≤900px : mini-tableaux par ligne */
}
body.page-typologies main .choix-typologie h2 {
  width: min(1100px, 92vw);
  margin: 0 auto clamp(1rem, 0.78rem + 1.356vw, 2rem);
}
body.page-typologies main .choix-typologie .choix-typologie-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  /* Fonds / couleurs par colonne */
  /* Bordures latérales (desktop) — TOUT EN BORDURE DROITE, sauf la dernière colonne */
  /* #tiers : pas de bordure droite ajoutée (le conteneur fournit le bord droit externe) */
}
body.page-typologies main .choix-typologie .choix-typologie-container .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-typologies main .choix-typologie .choix-typologie-container .h4-colonne {
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-typologies main .choix-typologie .choix-typologie-container .colonne:not(:first-child) {
  border-inline-start: 0;
}
body.page-typologies main .choix-typologie .choix-typologie-container .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-typologies main .choix-typologie .choix-typologie-container .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-typologies main .choix-typologie .choix-typologie-container .col-list li:last-child {
  border-bottom: 0;
}
body.page-typologies main .choix-typologie .choix-typologie-container #services .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.85, 22.8, 52.25);
}
body.page-typologies main .choix-typologie .choix-typologie-container #travaux .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
}
body.page-typologies main .choix-typologie .choix-typologie-container #tiers .col-list li {
  background: rgba(3, 24, 55, 0.1);
  color: rgb(2.7, 21.6, 49.5);
}
body.page-typologies main .choix-typologie .choix-typologie-container #critere .h4-colonne,
body.page-typologies main .choix-typologie .choix-typologie-container #services .h4-colonne,
body.page-typologies main .choix-typologie .choix-typologie-container #travaux .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-typologies main .choix-typologie .choix-typologie-container #critere .col-list li,
body.page-typologies main .choix-typologie .choix-typologie-container #services .col-list li,
body.page-typologies main .choix-typologie .choix-typologie-container #travaux .col-list li {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
@media (hover: hover) and (pointer: fine) {
  body.page-typologies main .choix-typologie .choix-typologie-container .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-typologies main .choix-typologie .choix-typologie-container #services .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
  body.page-typologies main .choix-typologie .choix-typologie-container #travaux .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-typologies main .choix-typologie .choix-typologie-container #tiers .col-list li:hover {
    background: rgba(3, 24, 55, 0.15);
  }
}
@media (max-width: 1060px) {
  body.page-typologies main .choix-typologie {
    /* Libellés */
    /* Fonds (mobile) */
    /* Latérales UNIFORMES (mobile)
    - gauche du mini-tableau : border-left sur Critère
    - séparateurs internes : border-right sur Critère/Services/Travaux
    - droite du mini-tableau : border-right sur Tiers
    */
    /* Un seul cadre par mini-tableau */
    /* Ordonnancement (6 lignes) */
  }
  body.page-typologies main .choix-typologie .h4-colonne {
    display: none;
  }
  body.page-typologies main .choix-typologie .choix-typologie-container {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-typologies main .choix-typologie .choix-typologie-container .colonne,
  body.page-typologies main .choix-typologie .choix-typologie-container .colonne > .col-list {
    display: contents;
  }
  body.page-typologies main .choix-typologie .choix-typologie-container .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-typologies main .choix-typologie #critere .col-list li::before {
    content: "Critère : ";
    font-weight: 700;
    color: #031837;
  }
  body.page-typologies main .choix-typologie #services .col-list li::before {
    content: "Services : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-typologies main .choix-typologie #travaux .col-list li::before {
    content: "Travaux : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-typologies main .choix-typologie #tiers .col-list li::before {
    content: "Tiers : ";
    font-weight: 700;
    color: rgb(2.7, 21.6, 49.5);
  }
  body.page-typologies main .choix-typologie #services .col-list li {
    background: rgba(190, 9, 127, 0.1);
  }
  body.page-typologies main .choix-typologie #travaux .col-list li {
    background: rgba(91, 184, 135, 0.1);
  }
  body.page-typologies main .choix-typologie #tiers .col-list li {
    background: rgba(3, 24, 55, 0.1);
  }
  body.page-typologies main .choix-typologie #critere .col-list li {
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-typologies main .choix-typologie #services .col-list li {
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-typologies main .choix-typologie #travaux .col-list li {
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-typologies main .choix-typologie #tiers .col-list li {
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-typologies main .choix-typologie #critere .col-list li {
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
  }
  body.page-typologies main .choix-typologie #services .col-list li {
    border-top: 1px solid rgba(3, 24, 55, 0.3);
  }
  body.page-typologies main .choix-typologie #travaux .col-list li {
    border-top: 1px solid rgba(3, 24, 55, 0.3);
  }
  body.page-typologies main .choix-typologie #tiers .col-list li {
    border-top: 1px solid rgba(3, 24, 55, 0.3);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-typologies main .choix-typologie #critere .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-typologies main .choix-typologie #services .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-typologies main .choix-typologie #travaux .col-list li:nth-child(1) {
    order: 3;
  }
  body.page-typologies main .choix-typologie #tiers .col-list li:nth-child(1) {
    order: 4;
  }
  body.page-typologies main .choix-typologie #critere .col-list li:nth-child(2) {
    order: 5;
  }
  body.page-typologies main .choix-typologie #services .col-list li:nth-child(2) {
    order: 6;
  }
  body.page-typologies main .choix-typologie #travaux .col-list li:nth-child(2) {
    order: 7;
  }
  body.page-typologies main .choix-typologie #tiers .col-list li:nth-child(2) {
    order: 8;
  }
  body.page-typologies main .choix-typologie #critere .col-list li:nth-child(3) {
    order: 9;
  }
  body.page-typologies main .choix-typologie #services .col-list li:nth-child(3) {
    order: 10;
  }
  body.page-typologies main .choix-typologie #travaux .col-list li:nth-child(3) {
    order: 11;
  }
  body.page-typologies main .choix-typologie #tiers .col-list li:nth-child(3) {
    order: 12;
  }
  body.page-typologies main .choix-typologie #critere .col-list li:nth-child(4) {
    order: 13;
  }
  body.page-typologies main .choix-typologie #services .col-list li:nth-child(4) {
    order: 14;
  }
  body.page-typologies main .choix-typologie #travaux .col-list li:nth-child(4) {
    order: 15;
  }
  body.page-typologies main .choix-typologie #tiers .col-list li:nth-child(4) {
    order: 16;
  }
  body.page-typologies main .choix-typologie #critere .col-list li:nth-child(5) {
    order: 17;
  }
  body.page-typologies main .choix-typologie #services .col-list li:nth-child(5) {
    order: 18;
  }
  body.page-typologies main .choix-typologie #travaux .col-list li:nth-child(5) {
    order: 19;
  }
  body.page-typologies main .choix-typologie #tiers .col-list li:nth-child(5) {
    order: 20;
  }
  body.page-typologies main .choix-typologie #critere .col-list li:nth-child(6) {
    order: 21;
  }
  body.page-typologies main .choix-typologie #services .col-list li:nth-child(6) {
    order: 22;
  }
  body.page-typologies main .choix-typologie #travaux .col-list li:nth-child(6) {
    order: 23;
  }
  body.page-typologies main .choix-typologie #tiers .col-list li:nth-child(6) {
    order: 24;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-typologies main .choix-typologie .col-list li {
    transition: none !important;
  }
}
body.page-typologies main .conseil {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-typologies main .conseil .conseil-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-typologies main .conseil .conseil-container {
    grid-template-columns: 1fr;
  }
}
body.page-typologies main .conseil .conseil-container .conseil-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1rem 0;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-typologies main .conseil .conseil-container .conseil-text .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 0;
}
body.page-typologies main .conseil .conseil-container .conseil-image {
  display: flex;
  justify-self: flex-end;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 8.571rem + 23.81vw, 30rem);
}
body.page-typologies main .conseil .conseil-container .conseil-image > img, body.page-typologies main .conseil .conseil-container .conseil-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-typologies main .conseil .conseil-container .conseil-image > img, body.page-typologies main .conseil .conseil-container .conseil-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-typologies main .conseil .conseil-container .conseil-image > img, body.page-typologies main .conseil .conseil-container .conseil-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-typologies main .conseil .conseil-container .conseil-image:hover > img, body.page-typologies main .conseil .conseil-container .conseil-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-typologies main .conseil .conseil-container .conseil-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-typologies main .conseil .conseil-container .conseil-image {
    justify-self: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
}

/* Scope page */
body.page-avantages {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-avantages img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-avantages a {
  text-decoration: none;
  color: inherit;
}
body.page-avantages h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-avantages h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-avantages p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-avantages main .avantages {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-avantages main .avantages .avantages-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-avantages main .avantages .avantages-container h5 {
  font-size: 1.2rem;
}
body.page-avantages main .avantages .avantages-container .avantages-list {
  counter-reset: avantage;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}
body.page-avantages main .avantages .avantages-container .avantages-list > li {
  margin: 0;
  padding-bottom: 2rem;
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
@media (min-width: 768px) {
  body.page-avantages main .avantages .avantages-container .avantages-list > li:nth-child(odd) {
    grid-template-columns: 2fr 1fr;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list > li:nth-child(odd) .avantage-text {
    grid-column: 1;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list > li:nth-child(odd) .avantage-media {
    grid-column: 2;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list > li:nth-child(even) {
    grid-template-columns: 1fr 2fr;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list > li:nth-child(even) .avantage-media {
    grid-column: 1;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list > li:nth-child(even) .avantage-text {
    grid-column: 2;
  }
}
body.page-avantages main .avantages .avantages-container .avantage-text {
  text-align: left;
}
body.page-avantages main .avantages .avantages-container .avantage-media {
  display: flex;
  justify-self: center;
  width: clamp(12rem, 8.898rem + 6.78vw, 15rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body.page-avantages main .avantages .avantages-container .avantage-media img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > h5 {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > h5:hover {
  color: #be097f;
}
body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > p {
  font-size: 1.1rem;
}
body.page-avantages main .avantages .avantages-container li:last-child {
  padding-bottom: 0;
}
body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: #031837;
  text-align: center;
}
body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > h5::before {
  content: counter(avantage);
  counter-increment: avantage;
  flex: 0 0 auto;
  aspect-ratio: 1/1;
  width: 2.2rem;
  min-width: 2.2rem;
  height: auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5bb887;
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  margin-right: 1rem;
}
body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > ul {
  margin: 0.35rem auto 0.6rem;
  padding: 0;
  list-style: disc inside;
}
body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > ul li {
  margin: 0.35rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
}
body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > ul li:hover {
  color: #00a250;
}
@media (max-width: 768px) {
  body.page-avantages main .avantages .avantages-container .avantages-list > li {
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: center;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list > li .avantage-text {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list > li .avantage-media {
    justify-self: center;
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > h5 {
    flex-direction: column;
    gap: 0.45rem;
    justify-content: flex-start;
    text-align: center;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > h5::before {
    width: clamp(1.8rem, 6vw, 2rem);
    min-width: clamp(1.8rem, 6vw, 2rem);
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
    margin-right: 0;
  }
  body.page-avantages main .avantages .avantages-container .avantages-list .avantage-text > ul {
    margin-left: 0;
  }
}
body.page-avantages main .balance {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-avantages main .balance h2 {
  width: min(1100px, 92vw);
  margin: 0 auto clamp(1rem, 0.78rem + 1.356vw, 2rem);
}
body.page-avantages main .balance .balance-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-avantages main .balance .balance-container .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-avantages main .balance .balance-container .h4-colonne {
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-avantages main .balance .balance-container #avantages .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-avantages main .balance .balance-container .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-avantages main .balance .balance-container .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-avantages main .balance .balance-container .col-list li:last-child {
  border-bottom: 0;
}
body.page-avantages main .balance .balance-container #avantages .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-avantages main .balance .balance-container #limites .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
}
@media (hover: hover) and (pointer: fine) {
  body.page-avantages main .balance .balance-container .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-avantages main .balance .balance-container #avantages .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-avantages main .balance .balance-container #limites .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
}
@media (max-width: 1060px) {
  body.page-avantages main .balance .h4-colonne {
    display: none;
  }
  body.page-avantages main .balance .balance-container {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-avantages main .balance .balance-container .colonne,
  body.page-avantages main .balance .balance-container .colonne > .col-list {
    display: contents;
  }
  body.page-avantages main .balance .balance-container .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-avantages main .balance #avantages .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-avantages main .balance #limites .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-avantages main .balance #avantages .col-list li::before {
    content: "Avantages : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-avantages main .balance #limites .col-list li::before {
    content: "Limites : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-avantages main .balance #avantages .col-list li {
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
  }
  body.page-avantages main .balance #limites .col-list li {
    border-top: 1px solid rgba(3, 24, 55, 0.3);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-avantages main .balance #avantages .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-avantages main .balance #limites .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-avantages main .balance #avantages .col-list li:nth-child(2) {
    order: 3;
  }
  body.page-avantages main .balance #limites .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-avantages main .balance #avantages .col-list li:nth-child(3) {
    order: 5;
  }
  body.page-avantages main .balance #limites .col-list li:nth-child(3) {
    order: 6;
  }
  body.page-avantages main .balance #avantages .col-list li:nth-child(4) {
    order: 7;
  }
  body.page-avantages main .balance #limites .col-list li:nth-child(4) {
    order: 8;
  }
  body.page-avantages main .balance #avantages .col-list li:nth-child(5) {
    order: 9;
  }
  body.page-avantages main .balance #limites .col-list li:nth-child(5) {
    order: 10;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-avantages main .balance .col-list li {
    transition: none !important;
  }
}
body.page-avantages main .conclusion {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-avantages main .conclusion .conclusion-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-avantages main .conclusion .conclusion-container {
    grid-template-columns: 1fr;
  }
}
body.page-avantages main .conclusion .conclusion-container .conclusion-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-avantages main .conclusion .conclusion-container .conclusion-text .conclusion-p {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-avantages main .conclusion .conclusion-container .conclusion-text .conclusion-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-avantages main .conclusion .conclusion-container .conclusion-text .conclusion-ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-avantages main .conclusion .conclusion-container .conclusion-text .conclusion-ul li:hover {
  color: #00a250;
}
body.page-avantages main .conclusion .conclusion-container .conclusion-text .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 0;
}
body.page-avantages main .conclusion .conclusion-container .conclusion-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-avantages main .conclusion .conclusion-container .conclusion-image > img, body.page-avantages main .conclusion .conclusion-container .conclusion-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-avantages main .conclusion .conclusion-container .conclusion-image > img, body.page-avantages main .conclusion .conclusion-container .conclusion-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-avantages main .conclusion .conclusion-container .conclusion-image > img, body.page-avantages main .conclusion .conclusion-container .conclusion-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-avantages main .conclusion .conclusion-container .conclusion-image:hover > img, body.page-avantages main .conclusion .conclusion-container .conclusion-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-avantages main .conclusion .conclusion-container .conclusion-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-avantages main .conclusion .conclusion-container .conclusion-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Scope page */
body.page-reglementation {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-reglementation img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-reglementation a {
  text-decoration: none;
  color: inherit;
}
body.page-reglementation h1 {
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-reglementation h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-reglementation p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
}
body.page-reglementation main .reglementation {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-reglementation main .reglementation .reglementation-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-reglementation main .reglementation .reglementation-container {
    grid-template-columns: 1fr;
  }
}
body.page-reglementation main .reglementation .reglementation-container .reglementation-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-reglementation main .reglementation .reglementation-container .reglementation-text .reglementation-p {
  max-width: 600px;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-reglementation main .reglementation .reglementation-container .reglementation-text .reglementation-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-reglementation main .reglementation .reglementation-container .reglementation-text .reglementation-ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-reglementation main .reglementation .reglementation-container .reglementation-text .reglementation-ul li:hover {
  color: #00a250;
}
body.page-reglementation main .reglementation .reglementation-container .reglementation-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-reglementation main .reglementation .reglementation-container .reglementation-image > img, body.page-reglementation main .reglementation .reglementation-container .reglementation-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-reglementation main .reglementation .reglementation-container .reglementation-image > img, body.page-reglementation main .reglementation .reglementation-container .reglementation-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-reglementation main .reglementation .reglementation-container .reglementation-image > img, body.page-reglementation main .reglementation .reglementation-container .reglementation-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-reglementation main .reglementation .reglementation-container .reglementation-image:hover > img, body.page-reglementation main .reglementation .reglementation-container .reglementation-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-reglementation main .reglementation .reglementation-container .reglementation-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-reglementation main .reglementation .reglementation-container .reglementation-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
body.page-reglementation main .cadre {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-reglementation main .cadre .cadre-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-reglementation main .cadre .cadre-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
body.page-reglementation main .cadre .cadre-container h4:hover {
  color: #be097f;
}
body.page-reglementation main .cadre .cadre-container .cadre-p {
  margin-top: 1rem;
}
body.page-reglementation main .cadre .cadre-container .cadre-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-reglementation main .cadre .cadre-container .cadre-list li {
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-left: 4px solid rgb(0, 71, 30);
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-reglementation main .cadre .cadre-container .cadre-list li:hover {
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-reglementation main .cadre .cadre-container .cadre .cadre-container .cadre-list {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-reglementation main .cadre .cadre-container .cadre .cadre-container .cadre-list > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-reglementation main .cadre .cadre-container .balance-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-reglementation main .cadre .cadre-container .balance-container .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-reglementation main .cadre .cadre-container .balance-container .h4-colonne {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-reglementation main .cadre .cadre-container .balance-container #contrat .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-reglementation main .cadre .cadre-container .balance-container .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-reglementation main .cadre .cadre-container .balance-container .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-reglementation main .cadre .cadre-container .balance-container .col-list li:last-child {
  border-bottom: 0;
}
body.page-reglementation main .cadre .cadre-container .balance-container #contrat .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-reglementation main .cadre .cadre-container .balance-container #description .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
}
@media (hover: hover) and (pointer: fine) {
  body.page-reglementation main .cadre .cadre-container .balance-container .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-reglementation main .cadre .cadre-container .balance-container #contrat .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-reglementation main .cadre .cadre-container .balance-container #description .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
}
@media (max-width: 1060px) {
  body.page-reglementation main .cadre .cadre-container .h4-colonne {
    display: none;
  }
  body.page-reglementation main .cadre .cadre-container .balance-container {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-reglementation main .cadre .cadre-container .balance-container .colonne,
  body.page-reglementation main .cadre .cadre-container .balance-container .colonne > .col-list {
    display: contents;
  }
  body.page-reglementation main .cadre .cadre-container .balance-container .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-reglementation main .cadre .cadre-container #contrat .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-reglementation main .cadre .cadre-container #description .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-reglementation main .cadre .cadre-container #contrat .col-list li::before {
    content: "Type de contrat : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-reglementation main .cadre .cadre-container #description .col-list li::before {
    content: "Description : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-reglementation main .cadre .cadre-container #contrat .col-list li {
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
  }
  body.page-reglementation main .cadre .cadre-container #description .col-list li {
    border-top: 1px solid rgba(3, 24, 55, 0.3);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-reglementation main .cadre .cadre-container #contrat .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-reglementation main .cadre .cadre-container #description .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-reglementation main .cadre .cadre-container #contrat .col-list li:nth-child(2) {
    order: 3;
  }
  body.page-reglementation main .cadre .cadre-container #description .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-reglementation main .cadre .cadre-container #contrat .col-list li:nth-child(3) {
    order: 5;
  }
  body.page-reglementation main .cadre .cadre-container #description .col-list li:nth-child(3) {
    order: 6;
  }
  body.page-reglementation main .cadre .cadre-container #contrat .col-list li:nth-child(4) {
    order: 7;
  }
  body.page-reglementation main .cadre .cadre-container #description .col-list li:nth-child(4) {
    order: 8;
  }
  body.page-reglementation main .cadre .cadre-container #contrat .col-list li:nth-child(5) {
    order: 9;
  }
  body.page-reglementation main .cadre .cadre-container #description .col-list li:nth-child(5) {
    order: 10;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-reglementation main .cadre .cadre-container .col-list li {
    transition: none !important;
  }
}
body.page-reglementation main .cadre .cadre-container .balance-container #secteur .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-reglementation main .cadre .cadre-container .balance-container .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-reglementation main .cadre .cadre-container .balance-container .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-reglementation main .cadre .cadre-container .balance-container .col-list li:last-child {
  border-bottom: 0;
}
body.page-reglementation main .cadre .cadre-container .balance-container #secteur .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-reglementation main .cadre .cadre-container .balance-container #obligations .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
}
@media (hover: hover) and (pointer: fine) {
  body.page-reglementation main .cadre .cadre-container .balance-container #secteur .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-reglementation main .cadre .cadre-container .balance-container #obligations .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
}
@media (max-width: 1060px) {
  body.page-reglementation main .cadre .cadre-container #secteur .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-reglementation main .cadre .cadre-container #obligations .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-reglementation main .cadre .cadre-container #secteur .col-list li::before {
    content: "Secteur : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-reglementation main .cadre .cadre-container #obligations .col-list li::before {
    content: "Obligations réglementaires associées : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-reglementation main .cadre .cadre-container #secteur .col-list li {
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
  }
  body.page-reglementation main .cadre .cadre-container #obligations .col-list li {
    border-top: 1px solid rgba(3, 24, 55, 0.3);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-reglementation main .cadre .cadre-container #secteur .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-reglementation main .cadre .cadre-container #obligations .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-reglementation main .cadre .cadre-container #secteur .col-list li:nth-child(2) {
    order: 3;
  }
  body.page-reglementation main .cadre .cadre-container #obligations .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-reglementation main .cadre .cadre-container #secteur .col-list li:nth-child(3) {
    order: 5;
  }
  body.page-reglementation main .cadre .cadre-container #obligations .col-list li:nth-child(3) {
    order: 6;
  }
  body.page-reglementation main .cadre .cadre-container #secteur .col-list li:nth-child(4) {
    order: 7;
  }
  body.page-reglementation main .cadre .cadre-container #obligations .col-list li:nth-child(4) {
    order: 8;
  }
  body.page-reglementation main .cadre .cadre-container #secteur .col-list li:nth-child(5) {
    order: 9;
  }
  body.page-reglementation main .cadre .cadre-container #obligations .col-list li:nth-child(5) {
    order: 10;
  }
}

/* Scope page */
body.page-etapes {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-etapes img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-etapes a {
  text-decoration: none;
  color: inherit;
}
body.page-etapes h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-etapes h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-etapes p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
}
body.page-etapes main .etapes-intro {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-etapes main .etapes-intro .etapes-intro-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-etapes main .etapes-intro .etapes-intro-container {
    grid-template-columns: 1fr;
  }
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-text .etapes-intro-p {
  max-width: 600px;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-text .etapes-intro-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-text .etapes-intro-ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-text .etapes-intro-ul li:hover {
  color: #00a250;
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-text .cta-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(1rem, 2.4vw, 2rem);
}
@media (max-width: 768px) {
  body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-text {
    align-items: center;
  }
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image > img, body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image > img, body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image > img, body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image:hover > img, body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-etapes main .etapes-intro .etapes-intro-container .etapes-intro-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
body.page-etapes main .etapes-cadre {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-etapes main .etapes-cadre .etapes-cadre-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-etapes main .etapes-cadre .etapes-cadre-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
body.page-etapes main .etapes-cadre .etapes-cadre-container h4:hover {
  color: #be097f;
}
body.page-etapes main .etapes-cadre .etapes-cadre-container .etapes-cadre-p {
  margin-top: 1rem;
}
body.page-etapes main .etapes-cadre .etapes-cadre-container .etapes-cadre-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-etapes main .etapes-cadre .etapes-cadre-container .etapes-cadre-list li {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.164), rgba(246, 171, 120, 0.062));
  border-left: 4px solid rgb(0, 71, 30);
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-etapes main .etapes-cadre .etapes-cadre-container .etapes-cadre-list li:hover {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.24), rgba(246, 171, 120, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-etapes main .etapes-cadre .etapes-cadre-container .etapes-cadre .etapes-cadre-container .etapes-cadre-list {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-etapes main .etapes-cadre .etapes-cadre-container .etapes-cadre .etapes-cadre-container .etapes-cadre-list > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-etapes main .etapes-duree {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-etapes main .etapes-duree .etapes-duree-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-p {
  margin-top: 1rem;
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .h4-colonne {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau #Phase .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .col-list li:last-child {
  border-bottom: 0;
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau #Phase .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau #Durée .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
}
@media (hover: hover) and (pointer: fine) {
  body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau #Phase .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau #Durée .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
}
@media (max-width: 1060px) {
  body.page-etapes main .etapes-duree .etapes-duree-container .h4-colonne {
    display: none;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .colonne,
  body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .colonne > .col-list {
    display: contents;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container .etapes-duree-tableau .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Phase .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Durée .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Phase .col-list li::before {
    content: "Phase : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Durée .col-list li::before {
    content: "Durée : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Phase .col-list li {
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Durée .col-list li {
    border-top: 1px solid rgba(3, 24, 55, 0.3);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Phase .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Durée .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Phase .col-list li:nth-child(2) {
    order: 3;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Durée .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Phase .col-list li:nth-child(3) {
    order: 5;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Durée .col-list li:nth-child(3) {
    order: 6;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Phase .col-list li:nth-child(4) {
    order: 7;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Durée .col-list li:nth-child(4) {
    order: 8;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Phase .col-list li:nth-child(5) {
    order: 9;
  }
  body.page-etapes main .etapes-duree .etapes-duree-container #Durée .col-list li:nth-child(5) {
    order: 10;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-etapes main .etapes-duree .etapes-duree-container .col-list li {
    transition: none !important;
  }
}
body.page-etapes main .etapes-mesure {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-p {
  margin-top: 1rem;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.3fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .h4-colonne {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau #Option .h4-colonne,
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau #Description .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .col-list li:last-child {
  border-bottom: 0;
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau #Option .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau #Description .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau #Usage .col-list li {
  background: rgba(3, 24, 55, 0.12);
  color: rgb(2.76, 22.08, 50.6);
}
@media (hover: hover) and (pointer: fine) {
  body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau #Option .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau #Description .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau #Usage .col-list li:hover {
    background: rgba(3, 24, 55, 0.18);
  }
}
@media (max-width: 1060px) {
  body.page-etapes main .etapes-mesure .etapes-mesure-container .h4-colonne {
    display: none;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .colonne,
  body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .colonne > .col-list {
    display: contents;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container .etapes-mesure-tableau .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Option .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Description .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Usage .col-list li {
    background: rgba(3, 24, 55, 0.12);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Option .col-list li::before {
    content: "Option IPMVP : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Description .col-list li::before {
    content: "Description : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Usage .col-list li::before {
    content: "Usage conseillé : ";
    font-weight: 700;
    color: rgb(2.7, 21.6, 49.5);
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Option .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Description .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Usage .col-list li:nth-child(1) {
    order: 3;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Option .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Description .col-list li:nth-child(2) {
    order: 5;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Usage .col-list li:nth-child(2) {
    order: 6;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Option .col-list li:nth-child(3) {
    order: 7;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Description .col-list li:nth-child(3) {
    order: 8;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Usage .col-list li:nth-child(3) {
    order: 9;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Option .col-list li:nth-child(4) {
    order: 10;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Description .col-list li:nth-child(4) {
    order: 11;
  }
  body.page-etapes main .etapes-mesure .etapes-mesure-container #Usage .col-list li:nth-child(4) {
    order: 12;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-etapes main .etapes-mesure .etapes-mesure-container .col-list li {
    transition: none !important;
  }
}
body.page-etapes main .etapes-controle {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-etapes main .etapes-controle .etapes-controle-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .h4-colonne {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau #Acteur .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .col-list li:last-child {
  border-bottom: 0;
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau #Acteur .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau #Role .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
}
@media (hover: hover) and (pointer: fine) {
  body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau #Acteur .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau #Role .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
}
@media (max-width: 1060px) {
  body.page-etapes main .etapes-controle .etapes-controle-container .h4-colonne {
    display: none;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .colonne,
  body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .colonne > .col-list {
    display: contents;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container .etapes-controle-tableau .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Acteur .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Role .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Acteur .col-list li::before {
    content: "Acteur : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Role .col-list li::before {
    content: "Rôle pendant le CPE : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Acteur .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Role .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Acteur .col-list li:nth-child(2) {
    order: 3;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Role .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Acteur .col-list li:nth-child(3) {
    order: 5;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Role .col-list li:nth-child(3) {
    order: 6;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Acteur .col-list li:nth-child(4) {
    order: 7;
  }
  body.page-etapes main .etapes-controle .etapes-controle-container #Role .col-list li:nth-child(4) {
    order: 8;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-etapes main .etapes-controle .etapes-controle-container .col-list li {
    transition: none !important;
  }
}
body.page-etapes main .etapes-conclusion {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-etapes main .etapes-conclusion .etapes-conclusion-container {
    grid-template-columns: 1fr;
  }
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-text .etapes-conclusion-p {
  max-width: 600px;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-text .etapes-conclusion-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-text .etapes-conclusion-ul li {
  font-style: italic;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-text .etapes-conclusion-ul li:hover {
  color: #00a250;
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-text .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 0;
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image > img, body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image > img, body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image > img, body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image:hover > img, body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-etapes main .etapes-conclusion .etapes-conclusion-container .etapes-conclusion-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Scope page */
body.page-chiffres {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-chiffres img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-chiffres a {
  text-decoration: none;
  color: inherit;
}
body.page-chiffres h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-chiffres h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-chiffres h3 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.55rem, 1.229rem + 0.857vw, 2rem);
  color: #be097f;
  line-height: clamp(2.2rem, 5vw, 3rem);
  margin-bottom: 1rem;
}
body.page-chiffres p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
}
body.page-chiffres main .chiffres-intro {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-chiffres main .chiffres-intro .chiffres-intro-container {
    grid-template-columns: 1fr;
  }
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-text .chiffres-intro-p {
  max-width: 600px;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-text .chiffres-intro-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-text .chiffres-intro-ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-text .chiffres-intro-ul li:hover {
  color: #00a250;
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image > img, body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image > img, body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image > img, body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image:hover > img, body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-chiffres main .chiffres-intro .chiffres-intro-container .chiffres-intro-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
body.page-chiffres main .chiffres-typologie {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .h4-colonne {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau #secteur .h4-colonne,
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau #exemple .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .col-list li:last-child {
  border-bottom: 0;
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau #secteur .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau #exemple .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau #specificites .col-list li {
  background: rgba(3, 24, 55, 0.12);
  color: rgb(2.76, 22.08, 50.6);
}
@media (hover: hover) and (pointer: fine) {
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau #secteur .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau #exemple .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau #specificites .col-list li:hover {
    background: rgba(3, 24, 55, 0.18);
  }
}
@media (max-width: 1060px) {
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .h4-colonne {
    display: none;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .colonne,
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .colonne > .col-list {
    display: contents;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .chiffres-typologie-tableau .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #secteur .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #exemple .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #specificites .col-list li {
    background: rgba(3, 24, 55, 0.12);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #secteur .col-list li::before {
    content: "Secteur : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #exemple .col-list li::before {
    content: "Exemple de bâtiment : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #specificites .col-list li::before {
    content: "Spécificités CPE : ";
    font-weight: 700;
    color: rgb(2.4, 19.2, 44);
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #secteur .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #exemple .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #specificites .col-list li:nth-child(1) {
    order: 3;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #secteur .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #exemple .col-list li:nth-child(2) {
    order: 5;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #specificites .col-list li:nth-child(2) {
    order: 6;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #secteur .col-list li:nth-child(3) {
    order: 7;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #exemple .col-list li:nth-child(3) {
    order: 8;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #specificites .col-list li:nth-child(3) {
    order: 9;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #secteur .col-list li:nth-child(4) {
    order: 10;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #exemple .col-list li:nth-child(4) {
    order: 11;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #specificites .col-list li:nth-child(4) {
    order: 12;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #secteur .col-list li:nth-child(5) {
    order: 13;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #exemple .col-list li:nth-child(5) {
    order: 14;
  }
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container #specificites .col-list li:nth-child(5) {
    order: 15;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-chiffres main .chiffres-typologie .chiffres-typologie-container .col-list li {
    transition: none !important;
  }
}
body.page-chiffres main .chiffres-retour {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-chiffres main .chiffres-retour .chiffres-retour-container {
    grid-template-columns: 1fr;
  }
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
  /* Sous-listes (ul à l’intérieur d’un li) */
  /* Couleur des puces des sous-listes */
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text .chiffres-retour-p {
  max-width: 600px;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text .chiffres-retour-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text .chiffres-retour-ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text .chiffres-retour-ul li:hover {
  color: #00a250;
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text .chiffres-retour-ul ul {
  margin: 0.4rem 0 0.6rem clamp(1rem, 0.45rem + 1.4vw, 1.6rem);
  list-style: disc;
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text .chiffres-retour-ul ul li {
  margin: 0.25rem 0;
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text .chiffres-retour-ul ul li::marker {
  color: #00a250;
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-text .chiffres-retour-ul ul li:hover {
  color: inherit;
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 12.143rem + 14.286vw, 25rem);
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image > img, body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image > img, body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image > img, body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image:hover > img, body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-chiffres main .chiffres-retour .chiffres-retour-container .chiffres-retour-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
body.page-chiffres main .chiffres-comment {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel {
  position: relative;
  width: min(90%, 92vw);
  margin: 0 auto;
  background: transparent;
  color: #031837;
  text-align: center;
  margin-top: clamp(1rem, -0.071rem + 2.857vw, 2.5rem);
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-secteurs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(0.6rem, 0.3rem + 0.8vw, 1rem);
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-secteur {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(3, 24, 55, 0.25);
  background: transparent;
  color: #031837;
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-secteur.is-active,
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-secteur[aria-selected=true] {
  border-color: rgb(56.7, 153.9, 47.7);
  box-shadow: inset 0 0 0 1px rgb(56.7, 153.9, 47.7);
  color: rgb(2.7, 21.6, 49.5);
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  align-items: start;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-slide {
  display: none;
  width: 80%;
  margin-inline: auto;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-slide.is-active {
  display: block;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-quote {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  line-height: 1.5;
  margin: 0 0 0.6rem 0;
  font-weight: 600;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-meta {
  font-size: 1.1rem;
  color: rgb(2.7, 21.6, 49.5);
  margin: 0;
  text-align: center;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 0;
  color: rgb(180.5, 8.55, 120.65);
  padding: 0.25rem;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-nav.prev {
  left: -2.2rem;
}
body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-nav.next {
  right: -2.2rem;
}
@media (hover: hover) and (pointer: fine) {
  body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-nav:hover {
    color: #3fab35;
  }
}
@media (max-width: 640px) {
  body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-nav.prev {
    left: -2.25rem;
  }
  body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-nav.next {
    right: -2.25rem;
  }
  body.page-chiffres main .chiffres-comment .chiffres-comment-container .temo-carousel .temo-slide {
    width: 100%;
  }
}
body.page-chiffres main .chiffres-facteurs {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .h4-colonne {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau #facteur .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .col-list li:last-child {
  border-bottom: 0;
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau #facteur .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau #risques .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
}
@media (hover: hover) and (pointer: fine) {
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau #facteur .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau #risques .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
}
@media (max-width: 1060px) {
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .h4-colonne {
    display: none;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .colonne,
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .colonne > .col-list {
    display: contents;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .chiffres-facteurs-tableau .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #facteur .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #risques .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #facteur .col-list li::before {
    content: "Facteur clé : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #risques .col-list li::before {
    content: "Risque à éviter : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #facteur .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #risques .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #facteur .col-list li:nth-child(2) {
    order: 3;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #risques .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #facteur .col-list li:nth-child(3) {
    order: 5;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #risques .col-list li:nth-child(3) {
    order: 6;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #facteur .col-list li:nth-child(4) {
    order: 7;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #risques .col-list li:nth-child(4) {
    order: 8;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #facteur .col-list li:nth-child(5) {
    order: 9;
  }
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container #risques .col-list li:nth-child(5) {
    order: 10;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-chiffres main .chiffres-facteurs .chiffres-facteurs-container .col-list li {
    transition: none !important;
  }
}
body.page-chiffres main .chiffres-conclusion {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  text-align: justify;
}
body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container {
    grid-template-columns: 1fr;
  }
}
body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1rem 0;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-text .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 0;
}
body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image {
  display: flex;
  justify-self: flex-end;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image > img, body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image > img, body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image > img, body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image:hover > img, body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-chiffres main .chiffres-conclusion .chiffres-conclusion-container .chiffres-conclusion-image {
    justify-self: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
}

/* Scope page */
body.page-financement {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-financement img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-financement a {
  text-decoration: none;
  color: inherit;
}
body.page-financement h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-financement h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-financement p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-financement main .financement-intro {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-financement main .financement-intro .financement-intro-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-financement main .financement-intro .financement-intro-container {
    grid-template-columns: 1fr;
  }
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-text .financement-intro-p {
  max-width: 600px;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-text .financement-intro-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-text .financement-intro-ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-text .financement-intro-ul li:hover {
  color: #00a250;
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-text .cta-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(1rem, 2.4vw, 2rem);
}
@media (max-width: 768px) {
  body.page-financement main .financement-intro .financement-intro-container .financement-intro-text {
    align-items: center;
  }
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-image > img, body.page-financement main .financement-intro .financement-intro-container .financement-intro-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-financement main .financement-intro .financement-intro-container .financement-intro-image > img, body.page-financement main .financement-intro .financement-intro-container .financement-intro-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-financement main .financement-intro .financement-intro-container .financement-intro-image > img, body.page-financement main .financement-intro .financement-intro-container .financement-intro-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-financement main .financement-intro .financement-intro-container .financement-intro-image:hover > img, body.page-financement main .financement-intro .financement-intro-container .financement-intro-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-financement main .financement-intro .financement-intro-container .financement-intro-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-financement main .financement-intro .financement-intro-container .financement-intro-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
body.page-financement main .financement-aides {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-financement main .financement-aides .financement-aides-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-financement main .financement-aides .financement-aides-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
body.page-financement main .financement-aides .financement-aides-container h4:hover {
  color: #be097f;
}
body.page-financement main .financement-aides .financement-aides-container .financement-aides-p {
  margin-top: 1rem;
}
body.page-financement main .financement-aides .financement-aides-container .financement-aides-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-financement main .financement-aides .financement-aides-container .financement-aides-list li {
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-left: 4px solid rgb(0, 71, 30);
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-financement main .financement-aides .financement-aides-container .financement-aides-list li:hover {
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-financement main .financement-aides .financement-aides-container .financement-aides .financement-aides-container .financement-aides-list {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-financement main .financement-aides .financement-aides-container .financement-aides .financement-aides-container .financement-aides-list > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-financement main .financement-tiers {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-financement main .financement-tiers .financement-tiers-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-financement main .financement-tiers .financement-tiers-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
body.page-financement main .financement-tiers .financement-tiers-container h4:hover {
  color: #be097f;
}
body.page-financement main .financement-tiers .financement-tiers-container .financement-tiers-p {
  margin-top: 1rem;
}
body.page-financement main .financement-tiers .financement-tiers-container .financement-tiers-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-financement main .financement-tiers .financement-tiers-container .financement-tiers-list li {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.164), rgba(246, 171, 120, 0.062));
  border-left: 4px solid #96420a;
  border-top: 1px solid rgba(150, 66, 10, 0.6588235294);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-financement main .financement-tiers .financement-tiers-container .financement-tiers-list li:hover {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.24), rgba(246, 171, 120, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-financement main .financement-tiers .financement-tiers-container .financement-tiers .financement-tiers-container .financement-tiers-list {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-financement main .financement-tiers .financement-tiers-container .financement-tiers .financement-tiers-container .financement-tiers-list > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-financement main .financement-monter {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-financement main .financement-monter .financement-monter-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-financement main .financement-monter .financement-monter-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
body.page-financement main .financement-monter .financement-monter-container h4:hover {
  color: #be097f;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-p {
  margin-top: 1rem;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-bonne {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-bonne li {
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-left: 4px solid rgb(0, 71, 30);
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-bonne li:hover {
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-vigilance {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-vigilance li {
  background: linear-gradient(165deg, rgba(190, 9, 127, 0.164), rgba(190, 9, 127, 0.062));
  border-left: 4px solid rgb(124, 0, 114);
  border-top: 1px solid rgba(124, 0, 114, 0.63);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-vigilance li:hover {
  background: linear-gradient(165deg, rgba(190, 9, 127, 0.24), rgba(190, 9, 127, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-financement main .financement-monter .financement-monter-container .financement-monter .financement-monter-container .financement-monter-bonne {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter .financement-monter-container .financement-monter-vigilance {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter .financement-monter-container .financement-monter-bonne > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter .financement-monter-container .financement-monter-vigilance > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau {
  width: min(1100px, 92vw);
  margin: 0 auto;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .h4-colonne {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau #source .h4-colonne,
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau #montant .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .col-list li:last-child {
  border-bottom: 0;
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau #source .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau #montant .col-list li {
  background: rgba(246, 171, 120, 0.1);
  color: rgb(2.7, 21.6, 49.5);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau #pourcentage .col-list li {
  background: rgba(3, 24, 55, 0.12);
  color: rgb(2.76, 22.08, 50.6);
}
@media (hover: hover) and (pointer: fine) {
  body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau #source .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau #montant .col-list li:hover {
    background: rgba(246, 171, 120, 0.15);
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau #pourcentage .col-list li:hover {
    background: rgba(3, 24, 55, 0.18);
  }
}
@media (max-width: 1060px) {
  body.page-financement main .financement-monter .financement-monter-container .h4-colonne {
    display: none;
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .colonne,
  body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .colonne > .col-list {
    display: contents;
  }
  body.page-financement main .financement-monter .financement-monter-container .financement-monter-tableau .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-financement main .financement-monter .financement-monter-container #source .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-financement main .financement-monter .financement-monter-container #montant .col-list li {
    background: rgba(246, 171, 120, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-financement main .financement-monter .financement-monter-container #pourcentage .col-list li {
    background: rgba(3, 24, 55, 0.12);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-financement main .financement-monter .financement-monter-container #source .col-list li::before {
    content: "Source de financement : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-financement main .financement-monter .financement-monter-container #montant .col-list li::before {
    content: "Montant : ";
    font-weight: 700;
    color: rgb(243.7125, 149.65, 85.6875);
  }
  body.page-financement main .financement-monter .financement-monter-container #pourcentage .col-list li::before {
    content: "Pourcentage : ";
    font-weight: 700;
    color: rgb(2.4, 19.2, 44);
  }
  body.page-financement main .financement-monter .financement-monter-container #source .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-financement main .financement-monter .financement-monter-container #montant .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-financement main .financement-monter .financement-monter-container #pourcentage .col-list li:nth-child(1) {
    order: 3;
  }
  body.page-financement main .financement-monter .financement-monter-container #source .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-financement main .financement-monter .financement-monter-container #montant .col-list li:nth-child(2) {
    order: 5;
  }
  body.page-financement main .financement-monter .financement-monter-container #pourcentage .col-list li:nth-child(2) {
    order: 6;
  }
  body.page-financement main .financement-monter .financement-monter-container #source .col-list li:nth-child(3) {
    order: 7;
  }
  body.page-financement main .financement-monter .financement-monter-container #montant .col-list li:nth-child(3) {
    order: 8;
  }
  body.page-financement main .financement-monter .financement-monter-container #pourcentage .col-list li:nth-child(3) {
    order: 9;
  }
  body.page-financement main .financement-monter .financement-monter-container #source .col-list li:nth-child(4) {
    order: 10;
  }
  body.page-financement main .financement-monter .financement-monter-container #montant .col-list li:nth-child(4) {
    order: 11;
  }
  body.page-financement main .financement-monter .financement-monter-container #pourcentage .col-list li:nth-child(4) {
    order: 12;
  }
  body.page-financement main .financement-monter .financement-monter-container #source .col-list li:nth-child(5) {
    order: 13;
  }
  body.page-financement main .financement-monter .financement-monter-container #montant .col-list li:nth-child(5) {
    order: 14;
  }
  body.page-financement main .financement-monter .financement-monter-container #pourcentage .col-list li:nth-child(5) {
    order: 15;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-financement main .financement-monter .financement-monter-container .col-list li {
    transition: none !important;
  }
}
body.page-financement main .financement-conclusion {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-financement main .financement-conclusion .financement-conclusion-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-financement main .financement-conclusion .financement-conclusion-container {
    grid-template-columns: 1fr;
  }
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-text .financement-conclusion-p {
  max-width: 600px;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-text .financement-conclusion-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-text .financement-conclusion-ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-text .financement-conclusion-ul li:hover {
  color: #00a250;
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-text .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 0;
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image > img, body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image > img, body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image > img, body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image:hover > img, body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-financement main .financement-conclusion .financement-conclusion-container .financement-conclusion-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Scope page */
body.page-recommandations {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-recommandations img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-recommandations a {
  text-decoration: none;
  color: inherit;
}
body.page-recommandations h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-recommandations h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-recommandations p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-recommandations main .recommandations {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-recommandations main .recommandations .recommandations-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-recommandations main .recommandations .recommandations-container h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
body.page-recommandations main .recommandations .recommandations-container h4:hover {
  color: #be097f;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-p {
  margin-top: 1rem;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-vert {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-vert li {
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-left: 4px solid rgb(0, 71, 30);
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-vert li:hover {
  background: linear-gradient(165deg, rgba(46, 204, 113, 0.24), rgba(135, 211, 167, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-recommandations main .recommandations .recommandations-container .recommandations-vert {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-vert > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-saumon {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-saumon li {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.164), rgba(246, 171, 120, 0.062));
  border-left: 4px solid #96420a;
  border-top: 1px solid rgba(150, 66, 10, 0.6588235294);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-saumon li:hover {
  background: linear-gradient(165deg, rgba(246, 171, 120, 0.24), rgba(246, 171, 120, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-recommandations main .recommandations .recommandations-container .recommandations-saumon {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-saumon > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-violet {
  list-style: none;
  padding: 0;
  max-width: 900px;
  text-align: left;
  padding: 1rem 0;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-violet li {
  background: linear-gradient(165deg, rgba(190, 9, 127, 0.164), rgba(190, 9, 127, 0.062));
  border-left: 4px solid rgb(124, 0, 114);
  border-top: 1px solid rgba(124, 0, 114, 0.63);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-left: clamp(0.2rem, -1.443rem + 4.381vw, 2.5rem);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  gap: 0.5rem;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-violet li:hover {
  background: linear-gradient(165deg, rgba(190, 9, 127, 0.24), rgba(190, 9, 127, 0.295));
  transform: translateX(5px);
  box-shadow: 0 14px 30px rgba(26, 46, 77, 0.178);
}
@media (max-width: 768px) {
  body.page-recommandations main .recommandations .recommandations-container .recommandations-violet {
    display: block !important;
    columns: auto !important;
    -webkit-columns: auto !important;
    -moz-columns: auto !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    -moz-column-width: auto !important;
         column-width: auto !important;
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-violet > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.6;
  }
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau {
  width: min(1100px, 92vw);
  margin: 0 auto;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 2px solid rgba(0, 71, 30, 0.63);
  border-left: 4px solid rgb(0, 71, 30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .colonne {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .h4-colonne {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(246, 171, 120, 0.6);
  color: #031837;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid rgba(3, 24, 55, 0.6);
  text-align: center;
  border-left: 0;
  border-right: 0;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau #action .h4-colonne,
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau #roi .h4-colonne {
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .col-list li {
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(3, 24, 55, 0.3);
  background: #ffffff;
  border-left: 0;
  border-right: 0;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .col-list li:last-child {
  border-bottom: 0;
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau #action .col-list li {
  background: rgba(91, 184, 135, 0.1);
  color: rgb(2.85, 22.8, 52.25);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau #roi .col-list li {
  background: rgba(190, 9, 127, 0.1);
  color: rgb(2.7, 21.6, 49.5);
  border-right: 1px solid rgba(3, 24, 55, 0.5);
}
body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau #gain .col-list li {
  background: rgba(3, 24, 55, 0.12);
  color: rgb(2.76, 22.08, 50.6);
}
@media (hover: hover) and (pointer: fine) {
  body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .col-list li:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau #action .col-list li:hover {
    background: rgba(91, 184, 135, 0.15);
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau #roi .col-list li:hover {
    background: rgba(190, 9, 127, 0.15);
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau #gain .col-list li:hover {
    background: rgba(3, 24, 55, 0.18);
  }
}
@media (max-width: 1060px) {
  body.page-recommandations main .recommandations .recommandations-container .h4-colonne {
    display: none;
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .colonne,
  body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .colonne > .col-list {
    display: contents;
  }
  body.page-recommandations main .recommandations .recommandations-container .recommandations-tableau .col-list li {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #ffffff;
    border-bottom: 0;
    border-left: 4px solid rgb(0, 71, 30);
    border-right: 0;
  }
  body.page-recommandations main .recommandations .recommandations-container #action .col-list li {
    background: rgba(91, 184, 135, 0.1);
    border-top: 2px solid rgba(0, 71, 30, 0.63);
    border-radius: 0.6rem 0.6rem 0 0;
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-recommandations main .recommandations .recommandations-container #roi .col-list li {
    background: rgba(190, 9, 127, 0.1);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
  }
  body.page-recommandations main .recommandations .recommandations-container #gain .col-list li {
    background: rgba(3, 24, 55, 0.12);
    border-right: 1px solid rgba(3, 24, 55, 0.5);
    border-bottom: 2px solid rgb(56.7, 153.9, 47.7);
    border-radius: 0 0 0.6rem 0.6rem;
    margin-bottom: 0.8rem;
  }
  body.page-recommandations main .recommandations .recommandations-container #action .col-list li::before {
    content: "Action : ";
    font-weight: 700;
    color: rgb(74.7765957447, 172.7234042553, 121.1170212766);
  }
  body.page-recommandations main .recommandations .recommandations-container #roi .col-list li::before {
    content: "ROI moyen : ";
    font-weight: 700;
    color: rgb(171, 8.1, 114.3);
  }
  body.page-recommandations main .recommandations .recommandations-container #gain .col-list li::before {
    content: "Gain énergétique : ";
    font-weight: 700;
    color: rgb(2.4, 19.2, 44);
  }
  body.page-recommandations main .recommandations .recommandations-container #action .col-list li:nth-child(1) {
    order: 1;
  }
  body.page-recommandations main .recommandations .recommandations-container #roi .col-list li:nth-child(1) {
    order: 2;
  }
  body.page-recommandations main .recommandations .recommandations-container #gain .col-list li:nth-child(1) {
    order: 3;
  }
  body.page-recommandations main .recommandations .recommandations-container #action .col-list li:nth-child(2) {
    order: 4;
  }
  body.page-recommandations main .recommandations .recommandations-container #roi .col-list li:nth-child(2) {
    order: 5;
  }
  body.page-recommandations main .recommandations .recommandations-container #gain .col-list li:nth-child(2) {
    order: 6;
  }
  body.page-recommandations main .recommandations .recommandations-container #action .col-list li:nth-child(3) {
    order: 7;
  }
  body.page-recommandations main .recommandations .recommandations-container #roi .col-list li:nth-child(3) {
    order: 8;
  }
  body.page-recommandations main .recommandations .recommandations-container #gain .col-list li:nth-child(3) {
    order: 9;
  }
  body.page-recommandations main .recommandations .recommandations-container #action .col-list li:nth-child(4) {
    order: 10;
  }
  body.page-recommandations main .recommandations .recommandations-container #roi .col-list li:nth-child(4) {
    order: 11;
  }
  body.page-recommandations main .recommandations .recommandations-container #gain .col-list li:nth-child(4) {
    order: 12;
  }
  body.page-recommandations main .recommandations .recommandations-container #action .col-list li:nth-child(5) {
    order: 13;
  }
  body.page-recommandations main .recommandations .recommandations-container #roi .col-list li:nth-child(5) {
    order: 14;
  }
  body.page-recommandations main .recommandations .recommandations-container #gain .col-list li:nth-child(5) {
    order: 15;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-recommandations main .recommandations .recommandations-container .col-list li {
    transition: none !important;
  }
}
body.page-recommandations main .recommandations-conclusion {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container {
    grid-template-columns: 1fr;
  }
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-text .recommandations-conclusion-p {
  max-width: 600px;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  margin-top: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-text .recommandations-conclusion-ul {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-text .recommandations-conclusion-ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-text .recommandations-conclusion-ul li:hover {
  color: #00a250;
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-text .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 0;
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image > img, body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image > img, body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image > img, body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image:hover > img, body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 933px) {
  body.page-recommandations main .recommandations-conclusion .recommandations-conclusion-container .recommandations-conclusion-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Scope page */
body.page-glossaire {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  /* utilitaire accessibilité pour titres masqués visuellement */
}
body.page-glossaire img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-glossaire a {
  text-decoration: none;
  color: inherit;
}
body.page-glossaire .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.page-glossaire h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-glossaire h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-top: 1rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-glossaire h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
}
body.page-glossaire h4:hover {
  color: #be097f;
}
body.page-glossaire p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-glossaire main .glossaire {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-glossaire main .glossaire .glossaire-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  /* bloc d’introduction (texte libre si besoin) */
  /* INDEX ALPHABÉTIQUE – en introduction, items côte à côte */
  /* CONTENU DU GLOSSAIRE */
}
@media (max-width: 768px) {
  body.page-glossaire main .glossaire .glossaire-container {
    grid-template-columns: 1fr;
  }
}
body.page-glossaire main .glossaire .glossaire-container .intro-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-index {
  grid-column: 1/-1; /* l’index s’étire sur toute la largeur en tête */
  margin: 0 0 clamp(0.8rem, 0.3rem + 1vw, 1.2rem);
  /* état actif optionnel si tu veux marquer la lettre courante */
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-index li {
  margin: 0;
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-index a {
  display: inline-block;
  min-width: 2.25rem;
  text-align: center;
  padding: 0.35rem 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid #031837;
  background: rgb(247.35, 247.35, 247.35);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-index a:hover,
body.page-glossaire main .glossaire .glossaire-container .glossaire-index a:focus {
  background: rgb(121.384375, 211.0147321429, 113.0852678571);
  outline: none;
  text-decoration: underline;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-index a.is-active {
  background: rgb(90.55, 200.8642857143, 80.3357142857);
  border-color: #3fab35;
  text-decoration: none;
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-text {
  grid-column: 1/-1; /* le contenu prend toute la largeur sous l’index */
  /* confort d’ancrage sous header sticky */
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-text h2[id] {
  scroll-margin-top: clamp(70px, 8vw, 120px);
  /* style de repère visuel par lettre */
  border-top: 2px solid rgb(0, 145.8, 72);
  padding-top: 0.75rem;
  margin-top: clamp(1.2rem, 0.6rem + 1.5vw, 2rem);
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-text h4 {
  margin-top: clamp(0.4rem, 0.2rem + 0.6vw, 0.8rem);
}
body.page-glossaire main .glossaire .glossaire-container .glossaire-text p {
  margin-bottom: clamp(0.6rem, 0.3rem + 0.8vw, 1rem);
}

/* Scope page CGU — épuré, aligné à tes pages (pas de fonds/bordures) */
body.page-cgu {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff; /* fond global du site */
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  /* Sections (sans décor, juste padding + container) */
}
body.page-cgu img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-cgu a {
  text-decoration: none;
  color: inherit;
}
body.page-cgu a:hover {
  color: #00a250;
}
body.page-cgu h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-cgu h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-cgu h4 {
  font-size: clamp(1.3rem, 1.193rem + 0.286vw, 1.45rem);
  margin-top: clamp(1rem, -0.429rem + 3.81vw, 3rem);
}
body.page-cgu h4:hover {
  color: #be097f;
}
body.page-cgu p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-cgu .muted {
  opacity: 0.9;
}
body.page-cgu .cgu {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-cgu .cgu .cgu-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
body.page-cgu .cgu .cgu-container .grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.5rem + 1vw, 1.6rem);
}
@media (max-width: 992px) {
  body.page-cgu .cgu .cgu-container .grid-two {
    grid-template-columns: 1fr;
  }
}

/* Scope page */
body.page-mentions {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-mentions img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-mentions a {
  text-decoration: none;
  color: inherit;
}
body.page-mentions a:hover {
  color: #00a250;
}
body.page-mentions h1 {
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-mentions h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-mentions p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-mentions main {
  /* Sections (sans décor, juste padding + container) */
}
body.page-mentions main .muted {
  opacity: 0.9;
}
body.page-mentions main .mentions {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
}
body.page-mentions main .mentions .mentions-container {
  width: min(1100px, 92vw);
  margin: 0 auto;
  /* listes simples */
  /* grille 2 colonnes responsive (pour RGPD) */
}
body.page-mentions main .mentions .mentions-container .list-bullets {
  padding-left: clamp(1rem, 0.2rem + 2vw, 1.5rem);
  margin: 0.6rem 0 1rem;
}
body.page-mentions main .mentions .mentions-container .list-bullets li {
  margin-bottom: 0.6rem;
}
body.page-mentions main .mentions .mentions-container .grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.5rem + 1vw, 1.6rem);
}
@media (max-width: 992px) {
  body.page-mentions main .mentions .mentions-container .grid-two {
    grid-template-columns: 1fr;
  }
}
body.page-mentions main .mentions .mentions-container .ddd {
  color: rgb(255, 72, 0);
  font-weight: bolder;
  font-family: "Monotype Corsiva";
}

/* Scope page */
body.page-contact {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body.page-contact img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-contact a {
  text-decoration: none;
  color: inherit;
}
body.page-contact h1 {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-contact h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin-bottom: 1.5rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-contact p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
body.page-contact main .expert-section .expert-content .expert-text p {
  font-size: 1.1rem;
  line-height: 2rem;
}
body.page-contact main .expert-section .expert-content .expert-text ul {
  margin-bottom: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  margin-left: clamp(1rem, 0.286rem + 1.905vw, 2rem);
}
body.page-contact main .expert-section .expert-content .expert-text ul li {
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-contact main .expert-section .expert-content .expert-text ul li:hover {
  color: #00a250;
}
body.page-contact main .expert-section .expert-content .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: clamp(1rem, 0.78rem + 1.356vw, 2rem) 0 1rem;
}

/* Scope page */
body.page-article {
  font-family: "Raleway", sans-serif;
  color: #031837;
  background-color: #ffffff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  /* H1 hors container */
}
body.page-article img {
  max-width: 100%;
  height: auto;
  display: block;
}
body.page-article a {
  text-decoration: none;
  color: inherit;
}
body.page-article h1.article-title {
  width: min(1100px, 92vw);
  margin: 0 auto;
  color: #031837;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.414rem + 2.095vw, 3.3rem);
  text-align: center;
  line-height: 1.18;
  padding: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
}
body.page-article main.page-article-main {
  /* Section type "financement-intro" */
}
body.page-article main.page-article-main .article-intro {
  padding: clamp(1rem, 0.286rem + 1.905vw, 2rem) 1rem clamp(2rem, 1.78rem + 1.356vw, 3rem);
  color: #031837;
  /* Variante sans image : 1 colonne */
}
body.page-article main.page-article-main .article-intro .article-intro-container {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 0.286rem + 1.905vw, 2rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.page-article main.page-article-main .article-intro .article-intro-container {
    grid-template-columns: 1fr;
  }
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1.5;
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-meta {
  color: #4B5563;
  font-size: 1.1rem;
  margin-bottom: clamp(0.4rem, 0.12rem + 0.8vw, 0.9rem);
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-content p {
  font-size: 1.1rem;
  text-align: justify;
  line-height: 1.8;
  margin-bottom: clamp(0.5rem, 0.143rem + 0.952vw, 1rem);
  max-width: 700px;
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-content h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 1.314rem + 1.429vw, 2.6rem);
  color: #00a250;
  margin: clamp(1rem, 0.5rem + 1vw, 2rem) 0 1rem;
  line-height: clamp(2.2rem, 5vw, 3rem);
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-content h3 {
  font-family: "Raleway", sans-serif;
  color: #00a250;
  margin: 1.2rem 0 0.8rem;
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-content ul, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-content ol {
  margin-left: clamp(0.5rem, -0.929rem + 3.81vw, 2.5rem);
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-content ul li, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-content ol li {
  margin-bottom: clamp(0.4rem, 0.12rem + 0.8vw, 0.9rem);
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .article-content blockquote {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  background: linear-gradient(165deg, rgba(46, 204, 112, 0.164), rgba(67, 233, 139, 0.062));
  border-left: 4px solid rgb(0, 71, 30);
  border-top: 1px solid rgba(0, 71, 30, 0.63);
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(1rem, 2.4vw, 2rem);
}
@media (max-width: 768px) {
  body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-text {
    align-items: center;
  }
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Pause au survol optionnelle */
  /* Réécriture des frames avec les valeurs passées au mixin (portée locale via nesting) */
  border-radius: 0.4rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: clamp(17.5rem, 14.375rem + 8.333vw, 21.875rem);
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image > img, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: center;
  will-change: transform;
  /* on utilise animation + @property pour animer vers des valeurs custom via variables */
  /* Fallback simple : on “fige” les frames avec une animation dédiée inline via shorthand */
  animation-name: cpe-kb-zoom-pan;
}
@supports (transform: scale(1)) {
  body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image > img, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image > picture > img {
    /* on injecte les valeurs finales via CSS vars et une transition calc */
    --kb-scale-to: 1.05;
    --kb-pan-x: -2%;
    --kb-pan-y: -2%;
    /* on sur-déclare les frames avec les valeurs */
    /* (truc simple : on met une animation-name dédiée pour ne pas multiplier les keyframes) */
    /* on utilise la propriété animation-timeline implicite (fallback simple ci-dessous) */
  }
  @media (prefers-reduced-motion: no-preference) {
    body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image > img, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image > picture > img {
      animation: cpe-kb-zoom-pan 8s ease-in-out infinite alternate;
    }
  }
}
@media (hover: hover) {
  body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image:hover > img, body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image:hover > picture > img {
    animation-play-state: paused;
  }
}
@keyframes cpe-kb-zoom-pan {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-2%, -2%, 0);
  }
}
body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 933px) {
  body.page-article main.page-article-main .article-intro .article-intro-container .article-intro-image {
    justify-self: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
body.page-article main.page-article-main .article-intro.no-image .article-intro-container {
  grid-template-columns: 1fr;
}
body.page-article main.page-article-main .article-intro.no-image .article-intro-image {
  display: none;
}

/* Skip link : totalement caché sauf au focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  padding: 0.5rem 0.75rem;
  background: #000;
  color: #fff;
  z-index: 2000;
  border-radius: 0.25rem;
}

/* Header (desktop/tablette par défaut) */
.site-header {
  z-index: 1100;
  background: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem 0.5rem;
  box-shadow: 4px 4px 5px rgba(3, 24, 55, 0.0549019608);
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 10rem; /* version desktop */
  padding-right: 5rem; /* version desktop */
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 1 auto;
}

.site-header .brand .brand-logo {
  display: inline-block;
  height: clamp(64px, 8vw, 80px);
  aspect-ratio: 833/301;
  background-color: #3fab35;
  -webkit-mask: url("../images/logo_cpe/logo_cpe_blanc.png") no-repeat center/contain;
  mask: url("../images/logo_cpe/logo_cpe_blanc.png") no-repeat center/contain;
  font-size: 0;
  color: transparent;
  line-height: 0;
}

@supports not ((-webkit-mask: url()) or (mask: url())) {
  .site-header .brand .brand-logo {
    width: clamp(120px, 30vw, 270px);
    background: url("../images/logo_cpe/logo_cpe_blanc.png") no-repeat center/contain;
    background-color: transparent;
  }
}
/* Desktop sticky si souhaité */
@media (min-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
  }
}
@media (max-width: 1024px) {
  .site-header {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
/* ===== Mobile uniquement (≤ 767px) ===== */
@media (max-width: 767px) {
  .site-header {
    padding-left: 1rem; /* padding gauche classique */
    padding-right: 1rem;
    gap: 0.6rem;
    /* Empilement: logo au-dessus, puis les 2 boutons */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "btn1" "btn2";
    row-gap: 0.5rem;
    justify-items: center; /* centrage propre */
    align-items: center;
  }
  /* Mapping selon ton HTML: btn — brand — btn */
  .site-header > a.brand {
    grid-area: brand;
  }
  .site-header > a.btn:first-of-type {
    grid-area: btn1;
  }
  .site-header > a.btn:last-of-type {
    grid-area: btn2;
  }
  /* Sécurité anti-débordement */
  .site-header > a.btn {
    max-width: 100%;
  }
}
.side-wrapper {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 60px;
  z-index: 1101;
  box-shadow: 3px 3px 5px #031837;
  border-radius: 0.3rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  background: transparent;
  font-family: inherit;
}

@media (max-width: 1024px) {
  .side-wrapper .mascot-inline {
    top: 6px;
    right: 8px;
  }
}
@media (hover: hover) {
  .side-wrapper:hover .mascot-inline {
    opacity: 0;
    transform: scale(0.96);
  }
}
.side-wrapper .mascot-inline.is-hidden {
  opacity: 0;
  transform: scale(0.96);
}

@supports (selector(:has(*))) {
  .side-wrapper:has(.menu-trigger[aria-expanded=true]) .mascot-inline {
    opacity: 0;
    transform: scale(0.96);
  }
}
.menu-trigger {
  padding: 0.1rem 0;
  width: 60px;
  height: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(26, 46, 77);
  color: #f6ab78;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0.3rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
}
.menu-trigger .menu-icone {
  display: inline-block;
  padding: 0.25rem;
  filter: invert(39%) sepia(71%) saturate(1197%) hue-rotate(118deg) brightness(94%) contrast(101%);
}
.menu-trigger:focus-visible {
  outline: 2px dashed rgba(246, 171, 120, 0.65);
  outline-offset: 3px;
}

.side-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  background: linear-gradient(135deg, #031837, #08316e);
  transition: width 0.1s ease, opacity 0.1s ease;
  opacity: 0;
  pointer-events: none;
  border-radius: 0.3rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  font-family: inherit;
}
.side-menu ul {
  list-style: none;
  padding: 0.5rem 0.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.side-menu ul li a {
  display: block;
  padding: 0.6rem 1rem;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  font-size: 1rem;
  text-decoration: none;
}
.side-menu ul li a:hover {
  color: #f6ab78;
}
.side-menu ul li a:focus-visible {
  outline: 2px dashed rgba(246, 171, 120, 0.65);
  outline-offset: 3px;
  border-radius: 0.35rem;
  text-decoration: none;
}
.side-menu ul li a.is-active {
  text-decoration: none;
  font-weight: 600;
}

.side-wrapper:hover .side-menu,
.side-wrapper.open .side-menu,
.side-wrapper:focus-within .side-menu {
  width: 250px;
  opacity: 1;
  pointer-events: all;
  border-top-right-radius: 0.7rem;
  border-bottom-right-radius: 0.7rem;
}

.side-menu a[href$="index.html"] {
  color: #00a250;
  font-weight: 600;
}

.side-menu a[href$="index.html"]:hover,
.side-menu a[href$="index.html"]:focus {
  color: #00a250;
}

.side-menu a.is-active:not([href$="index.html"]) {
  color: #be097f;
}

.side-menu a.is-active:not([href$="index.html"]):hover,
.side-menu a.is-active:not([href$="index.html"]):focus {
  color: #be097f;
}

@media (max-width: 1024px) {
  /* ▶︎ Mobile : cacher le side-menu partout par défaut */
  body:not(.page_home) .side-wrapper {
    display: none !important;
  }
  /* ✅ AJOUT pour aligner la home sur le même comportement (caché) */
  body.page_home .side-wrapper {
    display: none !important;
  }
  /* ───────────────────────────────────────────────────────────────
     ▼▼▼ MENU FIXE SUR LA PAGE D’ACCUEIL (MOBILE) — DÉSACTIVÉ ▼▼▼
  ------------------------------------------------------------------

  body.page_home .side-wrapper {
    display: block !important;
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    z-index: auto;
    background: transparent;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }

  body.page_home .menu-trigger { display: none; }

  body.page_home .side-menu {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    padding: .75rem 1rem;
    transition: none;
    z-index: auto;
    overflow: hidden;
    background-color: $vert1;
    background-size: cover;
    background-position: center;
  }

  body.page_home .side-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(26,46,77,.82), rgba(26, 46, 77, 0.3));
    z-index: 0;
    pointer-events: none;
  }

  body.page_home .side-menu ul {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .7rem 1rem;
    align-items: center;
    justify-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1100px;
    text-align: center;
  }

  body.page_home .side-menu ul li { width: 100%; position: relative; }

  body.page_home .side-menu ul li a {
    display: inline-block;
    padding: .7rem 1rem;
    width: 100%;
    max-width: 300px;
    border-radius: .25rem;
    border-top-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
    background-color: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    color: $creme;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    min-height: 44px;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  body.page_home .side-menu ul li a[href$="index.html"] { color: $saumon; }

  @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
    body.page_home .side-menu ul li a {
      background-color: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.22);
      -webkit-backdrop-filter: saturate(160%) blur(6px);
      backdrop-filter: saturate(160%) blur(6px);
    }
  }

  body.page_home .side-wrapper:hover .side-menu { width: 100% !important; opacity: 1 !important; }

  .side-menu a.is-active:not([href$="index.html"]) {
    border-color: rgba($bleu-accent,.6);
    box-shadow: 0 0 0 1px rgba($bleu-accent,.35) inset, 0 6px 18px rgba(0,0,0,.2);
  }

  .side-wrapper:hover .side-menu,
  .side-wrapper.open .side-menu,
  .side-wrapper:focus-within .side-menu {
    width: 100% !important;
    opacity: 1;
    pointer-events: all;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  ─────────────────────────────────────────────────────────────── */
}
.site-footer {
  background: linear-gradient(135deg, #031837, #08316e);
  color: #ffffff;
  padding: clamp(14px, 2vw, 24px) clamp(16px, 4vw, 48px);
  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.9);
}

.site-footer .footer-inner {
  /* Logo à gauche, bloc liens prend tout l'espace restant */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 3vw, 48px);
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 auto;
}

.site-footer .brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto; /* ne pas étirer le logo */
}

.site-footer .brand-logo {
  display: inline-block;
  height: clamp(60px, 6.5vw, 80px);
  aspect-ratio: 833/301;
  background: #fff;
  -webkit-mask: url("../images/logo_cpe/logo_cpe_blanc.png") no-repeat center/contain;
  mask: url("../images/logo_cpe/logo_cpe_blanc.png") no-repeat center/contain;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

@supports not ((-webkit-mask: url()) or (mask: url())) {
  .site-footer .brand-logo {
    width: clamp(120px, 30vw, 270px);
    background: url("../images/logo_cpe/logo_cpe_blanc.png") no-repeat center/contain;
  }
}
/* =========================
   Bloc liens "legal" adaptatif
   ========================= */
.site-footer .legal {
  position: static;
  transform: none;
  flex: 1 1 auto; /* occupe tout l'espace restant à droite du logo */
  display: block;
  /* Colonnage fluide : 4 max, puis 3, puis 2 selon la place */
  -moz-column-count: 4;
       column-count: 4; /* borne haute */
  -moz-column-width: clamp(140px, 22vw, 220px);
       column-width: clamp(140px, 22vw, 220px); /* largeur mini d'une colonne */
  -moz-column-gap: clamp(12px, 2vw, 24px);
       column-gap: clamp(12px, 2vw, 24px);
  -moz-column-fill: balance;
       column-fill: balance;
  padding-top: 4px;
}
.site-footer .legal ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .legal a {
  display: block; /* un lien par ligne */
  -moz-column-break-inside: avoid;
       break-inside: avoid-column; /* évite les coupures moches */
  padding: 2px 0;
  color: #ffffff; /* défaut */
  text-decoration: none;
}

.site-footer .legal a:visited {
  color: #ffffff;
}

/* Survol/focus des liens (on exclut Accueil qui est .is-active permanente) */
.site-footer .legal a:hover:not(.is-active),
.site-footer .legal a:focus:not(.is-active) {
  color: #f6ab78;
  outline: none;
}

/* === Accueil : SEUL lien avec .is-active -> toujours vert + gras === */
.site-footer .legal a.is-active,
.site-footer .legal a.is-active:hover,
.site-footer .legal a.is-active:focus,
.site-footer .legal a.is-active:visited {
  color: #5bb887;
  font-weight: 700;
  text-decoration: none;
}

/* === Page active réelle (hors Accueil) : violet + gras, sans soulignement === */
.site-footer .legal a[aria-current=page]:not(.is-active) {
  color: #be097f;
  font-weight: 700;
  text-decoration: none;
}

.site-footer .legal a[aria-current=page]:not(.is-active):hover,
.site-footer .legal a[aria-current=page]:not(.is-active):focus,
.site-footer .legal a[aria-current=page]:not(.is-active):visited {
  color: #be097f; /* reste violet dans tous les états */
}

/* =================
   Responsive
   ================= */
/* Sous 992px : logo au-dessus, liens en dessous (colonnage reste fluide) */
@media (max-width: 992px) {
  .site-footer .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: clamp(12px, 3vw, 20px);
  }
  .site-footer .legal {
    width: 100%;
    margin-top: 0.5rem;
  }
}
/* Très étroit : on garantit au moins 2 colonnes (pas 1) */
@media (max-width: 520px) {
  .site-footer .legal {
    -moz-column-count: 2;
         column-count: 2; /* minimum 2 colonnes */
    -moz-column-width: auto;
         column-width: auto; /* ignore la largeur mini pour permettre 2 */
    -moz-column-gap: 12px;
         column-gap: 12px;
  }
}
/* Sous 992px : logo au-dessus, liens en dessous (colonnage reste fluide) */
@media (max-width: 992px) {
  .site-footer .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: clamp(12px, 3vw, 20px);
  }
  .site-footer .legal {
    width: 100%;
    margin-top: 0.5rem;
    /* === Séparateur entre colonnes (responsive only) === */
    -moz-column-rule: 1px solid rgba(255, 255, 255, 0.25);
         column-rule: 1px solid rgba(255, 255, 255, 0.25);
    /* un peu d’air pour éviter que le trait colle aux liens */
    padding-inline: 4px;
    -moz-column-gap: clamp(12px, 3vw, 24px);
         column-gap: clamp(12px, 3vw, 24px);
  }
}
/* Très étroit : on garantit au moins 2 colonnes (pas 1) */
@media (max-width: 520px) {
  .site-footer .legal {
    -moz-column-count: 2;
         column-count: 2; /* minimum 2 colonnes */
    -moz-column-width: auto;
         column-width: auto; /* ignore la largeur mini pour permettre 2 */
    -moz-column-gap: 14px;
         column-gap: 14px;
    /* Séparateur un poil plus léger en très étroit */
    -moz-column-rule: 1px solid rgba(255, 255, 255, 0.18);
         column-rule: 1px solid rgba(255, 255, 255, 0.18);
  }
}
.next-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  flex-wrap: nowrap;
  margin: 1rem auto clamp(1.5rem, 6vw, 3rem);
  /* Cas 1 bouton : largeur au contenu mais garde un plancher (copié de .cta-buttons) */
  /* ===== Breakpoints identiques ===== */
}
.next-cta .btn {
  position: relative;
  padding: clamp(0.8rem, 1.6vw, 1rem) clamp(1.2rem, 2.6vw, 1.6rem);
  font-size: 1.1875rem;
  line-height: 1;
  border-radius: 4px;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  font-weight: bold;
  text-decoration: none;
  border: none;
  transition: all 0.15s ease-in-out;
  flex: 0 0 15rem;
  inline-size: 15rem;
  text-align: center;
  white-space: nowrap;
}
.next-cta .btn::before, .next-cta .btn::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  height: 0.1rem;
  border-radius: 100%;
}
.next-cta .btn::before {
  top: 0.4rem;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 20%, #ffffff 80%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.5;
}
.next-cta .btn::after {
  bottom: 0.5rem;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 20%, #ffffff 80%, rgba(255, 255, 255, 0) 100%);
  filter: blur(1px);
  opacity: 0.05;
}
.next-cta .btn:hover {
  transform: translateY(3px) scale(0.98);
}
.next-cta .btn.btn-next {
  background-image: linear-gradient(-180deg, rgb(0, 213, 105.1851851852) 0%, #00a250 100%);
  border: 1px solid rgb(34.5, 255, 143.3888888889);
  color: #ffffff;
}
.next-cta .btn.btn-next:hover {
  background-color: rgb(0, 121.2, 59.8518518519);
}
.next-cta > .btn:only-child,
.next-cta > .btn-next:only-child {
  flex: 0 1 auto;
  inline-size: auto;
  min-inline-size: 15rem;
  max-inline-size: 100%;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .next-cta .btn {
    flex-basis: 13rem;
    inline-size: 13rem;
    font-size: 1.0625rem;
  }
  .next-cta > .btn:only-child,
  .next-cta > .btn-next:only-child {
    min-inline-size: 13rem;
  }
}
@media (max-width: 520px) {
  .next-cta .btn {
    flex-basis: 11rem;
    inline-size: 11rem;
    font-size: 1rem;
  }
  .next-cta > .btn:only-child,
  .next-cta > .btn-next:only-child {
    min-inline-size: 11rem;
    max-inline-size: 92vw;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}/*# sourceMappingURL=style.css.map */