@font-face {
  font-family: Butler;
  src: url('../fonts/Butler_Black.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: white;
  --color: white;
  --saddle-brown: #633f00;
  --deep-pink-2: #ffcd20;
  --dark-slate-blue: #004271;
  --vert: #eb3290;
  --tomato: #fc4b46;
  --indigo: #6175b8;
  --orange: #ffae00;
  --light-slate-grey: #537894;
  --bleu-clair: #b877e0;
  --gold: #1c5aa8;
  --rosefoncé: #ffa5a2;
  --bleu: #721b9d;
  --goldenrod: #bf9a18;
  --steel-blue: #2181bf;
  --deep-sky-blue: #55809c;
  --lemon-chiffon: #d6f1d1;
  --slate-violet: #e8ebfd;
  --lavender: #fdf5f5;
  --pink2: #fecfcd;
  --light-sky-blue: #80c6f3;
  --alice-blue: #d1edff;
  --roseclair: #fff0bd;
  --vertclair: #ffe2f1;
  --saddle-brown-2: #000000cf;
  --royal-blue: #516ef0;
  --violet-t: #eb3290cc;
  --orange-4: #9b7fc7c4;
  --gold-2: #fac608;
  --dark-orchid: #a840d9;
  --cornflower-blue: #a840d999;
  --pink-2: #ffc9d2;
  --coral-clair: #e0ccf1;
  --light-coral: #721b9d;
  --old-lace: #fff8e9;
  --gold-3: #fac608b8;
  --thistle: #eed9f7;
  --cornsilk: #faf2d6;
  --maroon: #640a0678;
  --dark-goldenrod: #ad8600ab;
  --navajo-white: #ffeec9;
  --orange-2: #f9af4e;
  --light-coral-2: #ff4d6e;
  --orange-3: #ffae00ba;
  --deep-pink: #eb3a94a8;
  --cornsilk-2: #fff8e2;
  --moccasin: #ffecc4;
  --vert-t: #32b05ecf;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Roboto, sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}

p {
  margin-bottom: 0;
}

.body {
  color: #004271;
  white-space: normal;
  background-color: #cacaca;
  padding-left: 49px;
  padding-right: 35px;
  font-family: Roboto, sans-serif;
  line-height: 22px;
}

.div-block {
  color: #0000;
  width: 100vw;
  height: auto;
}

.h1 {
  color: var(--white);
  text-align: left;
  text-transform: none;
  max-width: 600px;
  margin-top: 5px;
  margin-bottom: 20px;
  margin-right: -33px;
  font-family: Fraunces, sans-serif;
  font-size: 41px;
  font-weight: 400;
  line-height: 61px;
}

.h2 {
  color: #fff;
  text-transform: none;
  flex: none;
  max-width: 660px;
  margin: 0 auto 20px 0;
  font-family: Fraunces, sans-serif;
  font-size: 40px;
  font-weight: 900;
  line-height: 48px;
  overflow: hidden;
}

.h2.bleu {
  color: var(--white);
  -webkit-text-stroke-color: #fff;
}

.h3 {
  color: var(--deep-pink-2);
  text-transform: none;
  margin: 0;
  font-family: Fraunces, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 32px;
}

.h4 {
  color: var(--dark-slate-blue);
  text-transform: none;
  margin: 20px 0 15px;
  font-family: Lobster, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 30px;
}

.h5 {
  color: var(--dark-slate-blue);
  font-family: Roboto, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.h6 {
  color: var(--vert);
  -webkit-text-stroke-color: var(--deep-pink-2);
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}

.h6.centered {
  color: var(--tomato);
  text-align: center;
  margin-bottom: 15px;
}

.h6.white {
  color: #fff;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.h-drop-menu-alternance {
  color: var(--indigo);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  line-height: 18px;
}

.h-drop-menu-pdc {
  color: var(--orange);
  text-align: center;
  font-weight: 700;
  line-height: 18px;
}

.h-drop-menu-poec {
  color: #ffa5a2;
  text-align: center;
  font-weight: 700;
  line-height: 18px;
}

.desc-drop-menu {
  color: var(--dark-slate-blue);
  white-space: normal;
  margin-top: 0;
  margin-left: 0;
  margin-right: 19px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
}

.desc-chiffre-cl-1 {
  color: var(--light-slate-grey);
  white-space: normal;
  margin-left: 5px;
  margin-right: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.desc-chiffre-cl-3 {
  color: var(--dark-slate-blue);
  text-align: center;
  white-space: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

.desc-chiffre-cl-2 {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px #000000ab;
  white-space: normal;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
}

.desc-chiffre-cl-4 {
  color: #fff;
  text-align: left;
  white-space: normal;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.desc-ratio-1 {
  color: #fff;
  text-align: center;
  white-space: normal;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.desc-ratio-3 {
  color: var(--dark-slate-blue);
  text-align: center;
  white-space: normal;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

.t-ti-re {
  color: var(--dark-slate-blue);
  text-align: center;
  letter-spacing: 4px;
  text-transform: uppercase;
  column-count: 1;
  white-space: normal;
  margin-top: 23px;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.div-block-2 {
  color: #fff;
  background-color: #fff;
  width: 10ch;
  height: 1px;
}

.teti-re {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.subtitle {
  color: var(--bleu-clair);
  text-transform: uppercase;
  margin-top: 46px;
  margin-bottom: 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
}

.soustire-h4 {
  color: var(--dark-slate-blue);
  text-transform: uppercase;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 26px;
}

.soustitre-6-texte-edito-v2 {
  color: var(--dark-slate-blue);
  text-align: left;
  text-transform: none;
  flex-direction: row;
  width: 100%;
  margin-top: 20px;
  margin-bottom: auto;
  margin-left: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  display: block;
}

.soustitre-6-texte-edito-v2.firstedito {
  margin-top: 30px;
}

.soustitre-6-texte-edito-v2.puceedito {
  margin-top: 0;
  padding-left: 31px;
}

.soustitre-6-texte-edito-v2.espace20 {
  margin-top: 40px;
}

.soustitre-6-texte-edito-v2.legence {
  text-align: right;
  font-size: 15px;
}

.chiffre-cl-1 {
  color: var(--gold);
  text-align: right;
  text-transform: uppercase;
  margin-left: 0;
  margin-right: 5px;
  font-family: Fraunces, sans-serif;
  font-size: 45px;
  font-weight: 700;
  line-height: 46px;
}

.chiffre-cl-2 {
  pointer-events: auto;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 20px #00000073;
  font-family: Fraunces, sans-serif;
  font-size: 40px;
  font-weight: 900;
  line-height: 40px;
}

.chiffre-cl {
  color: var(--deep-pink-2);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-bottom: 0;
  font-family: Fraunces, sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 30px;
}

.chiffre-cle-4 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.chiffre-drop-menu {
  direction: ltr;
  color: var(--indigo);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  object-fit: fill;
  margin-left: auto;
  margin-right: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 16px;
  overflow: visible;
}

.chiffre-drop-menu.pdc-drop-chiffre {
  color: var(--orange);
}

.chiffre-drop-menu.poec-drop-chiffre {
  color: var(--rosefoncé);
  -webkit-text-stroke-color: var(--indigo);
}

.l-gende {
  color: var(--dark-slate-blue);
  text-transform: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.fonction {
  color: var(--dark-slate-blue);
  text-align: left;
  text-transform: none;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.chapo-edito {
  color: var(--dark-slate-blue);
  text-transform: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.chapo-section {
  color: #fff;
  text-transform: none;
  margin-bottom: 0;
  padding-right: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  overflow: hidden;
}

.chapo-section.bleu {
  color: var(--white);
}

.bullet {
  color: var(--dark-slate-blue);
  text-transform: none;
  flex: 0 auto;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.paragraphe-edito {
  color: var(--dark-slate-blue);
  text-transform: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.paragraphe-standard {
  color: var(--dark-slate-blue);
  text-transform: none;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.paragraphe-standard.spp {
  margin-top: 19px;
  margin-bottom: 10px;
  padding-bottom: 0;
}

.paragraphe-standard.footer {
  color: #fff;
  text-align: center;
  margin-bottom: -5px;
}

.paragraphe-standard.accroche-footer {
  color: var(--dark-slate-blue);
  text-align: center;
  text-transform: uppercase;
  margin-top: 12px;
}

.quote {
  color: var(--bleu);
  text-align: center;
  text-transform: none;
  object-fit: fill;
  background-color: #fff;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 15px 40px;
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  line-height: 30px;
  display: flex;
  overflow: visible;
}

.note-de-bas-de-page {
  color: var(--dark-slate-blue);
  text-transform: none;
  font-size: 8px;
  font-style: italic;
  font-weight: 400;
  line-height: 10px;
}

.note-de-bas-de-page.module-chiffre {
  text-align: center;
  background-color: #0000;
  width: 75%;
  margin: 5px auto 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 10px;
  line-height: 11px;
  display: block;
}

.span-italic {
  color: #fff;
  font-style: italic;
  line-height: 18px;
}

.span-desc-chiffre-cl-black {
  color: var(--goldenrod);
  font-size: 16px;
  font-weight: 900;
  line-height: 17px;
}

.span-drop-title-regular {
  line-height: 18px;
}

.span-bold-desc-ratio-3 {
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
}

.text-span {
  color: var(--steel-blue);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
}

.ratio-1 {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.ratio-rouge {
  color: var(--deep-sky-blue);
  text-align: center;
  text-transform: uppercase;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.bouton-primaire {
  background-color: var(--lemon-chiffon);
  color: var(--indigo);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 10px;
  flex: 0 auto;
  margin: 0 20px 0 auto;
  padding: 10px;
  font-size: 12px;
  line-height: 1.2;
  transition: transform .225s cubic-bezier(.175, .885, .32, 1.275);
  display: inline-block;
}

.bouton-primaire:hover {
  transform: translate(0, -2px);
  box-shadow: 3px 3px 20px -5px #00000080;
}

.bouton-primaire.none {
  background-color: var(--white);
  color: var(--dark-slate-blue);
}

.conjonction-or {
  color: var(--vert);
  text-align: center;
  object-fit: fill;
  background-color: #fff;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  overflow: visible;
}

.div-block-conjonction {
  background-color: #fff;
  border-radius: 20px;
  max-width: 30px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2px;
  padding-bottom: 2px;
  display: block;
}

.quote-in {
  position: relative;
  top: 28px;
  left: 6px;
}

.div-block-chiffre-cle-1 {
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-between;
  width: 267px;
  height: 218px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  transition: transform .1s;
  display: flex;
  overflow: visible;
}

.div-block-chiffre-cle-1:hover {
  transform: scale(1.1);
}

.image-2 {
  max-height: NaN% ;
  object-fit: fill;
  margin-top: -21px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  overflow: visible;
}

.div-block-4 {
  max-width: 267px;
  max-height: 151px;
  overflow: hidden;
}

.div-block-5 {
  flex-direction: row-reverse;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
}

.drop-menu-ca {
  /* Was 60 — cleared the immediate next section fine, but not high
     enough against every possible sibling sitewide (e.g. this section's
     own Gouvernance figures/illustration, which the panel needs to sit
     above too). Raised to the same "always on top of the page" tier as
     the panel itself (.dropdown-list.college/-salarie, z-index:8500) —
     the toggle+panel now escapes as one unit regardless of what's
     nearby. Still 1 above .drop-menu-salarie (60 vs 50 originally) so
     this button (Collège employeurs) is never covered by the Collège
     salariés panel opening over it — confirmed happening at a tie,
     broken by DOM order otherwise. */
  z-index: 9000;
  cursor: auto;
  border-radius: 20px;
  width: auto;
  max-width: none;
  margin: 30px auto 20px;
  display: block;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 14px #0000002e;
}

.desc-drop-ca {
  color: var(--dark-slate-blue);
  flex: 1;
  margin-left: auto;
  margin-right: auto;
}

.dropdown-toggle {
  z-index: 30;
  cursor: pointer;
  background-color: #fff;
  border-radius: 100px;
  justify-content: flex-start;
  align-items: center;
  max-height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.dropdown-toggle.w--open {
  /* Was 10 — LOWER than the closed state's own 30, and nowhere near the
     open panel's 8500/8999/9000. The panel's negative margin-top pulls
     it up 28px to flow visually from the button, and with the panel's
     z-index so far above the button's, that overlap band rendered the
     panel ON TOP of its own toggle instead of the button staying
     visible above it. Raised past every z-index in this component. */
  z-index: 9001;
  border-radius: 50px;
  position: relative;
}

.icon {
  border: 1px none var(--dark-slate-blue);
  transform: translate(0);
}

.dropdown-list {
  z-index: 8500;
  margin-top: 4px;
  display: none;
}

.dropdown-list.w--open {
  z-index: 0;
  background-color: var(--slate-violet);
  object-fit: fill;
  border-radius: 0 0 20px 20px;
  margin-top: -28px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 36px;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: 0 0 10px #00000021;
}

.dropdown-list.college {
  /* Was z-index:auto, overriding the shared .dropdown-list base rule's
     z-index:8500 (itself already overridden to 0 by .dropdown-list.w--
     open above) — an absolutely-positioned panel with no z-index of its
     own just stacks in normal paint order, so it rendered BEHIND the
     Gouvernance figures/illustration that come after it in the DOM.
     Restored to a high value so the open panel always sits on top. */
  z-index: 8500;
  display: none;
  position: absolute;
}

.dropdown-list.college.w--open {
  background-color: #fff;
  border-top-right-radius: 20px;
  width: 480px;
  padding-bottom: 15px;
  display: flex;
}

.dropdown-list.college-salarie {
  /* Same fix as .dropdown-list.college above. */
  z-index: 8500;
  width: 480px;
  display: none;
  position: absolute;
}

.dropdown-list.college-salarie.w--open {
  z-index: 8500;
  background-color: #fff;
  border-top-right-radius: 20px;
  width: 480px;
  padding-bottom: 15px;
  display: flex;
}

.ca_drop_categorie {
  color: var(--deep-pink-2);
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.titulaires {
  margin-bottom: 8px;
}

.collection-item {
  margin-bottom: 5px;
}

.collection-item-2 {
  margin-bottom: 8px;
}

.ca-spp {
  background-color: #fff;
  border-radius: 10px;
  width: 362px;
  padding: 20px 20px 0;
}

.div-block-7 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
}

.header-chiffre {
  object-fit: fill;
  background-image: linear-gradient(#fc4b46b3, #fc4b46b3), url('../images/EQUIPE.png');
  background-position: 0 0, 50% 13%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  justify-content: space-between;
  align-items: stretch;
  max-width: 998px;
  height: 130px;
  margin: 10px auto 30px;
  display: flex;
}

.grid-2 {
  grid-column-gap: 20px;
  opacity: 1;
  -webkit-text-fill-color: inherit;
  background-color: #0000;
  background-clip: border-box;
  border-radius: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr auto 1fr;
  grid-auto-flow: column;
  align-content: center;
  place-items: center;
  width: 100%;
  max-width: 1038px;
  min-height: 130px;
  padding: 10px;
}

.grid-2.vert {
  grid-column-gap: 20px;
}

.div-block-8 {
  background-color: #fff;
  border-radius: 20px;
  width: 2px;
  height: 30px;
  margin-left: 0;
  margin-right: 0;
}

.div-block-10 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.image-3 {
  margin-right: 5px;
}

.line-grey {
  background-color: var(--lavender);
  border-radius: 20px;
  width: 50px;
  height: 2px;
  margin: 10px auto;
}

.module-chiffre {
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
}

.module-chiffre.couleur {
  background-color: var(--pink2);
  border-radius: 10px;
}

.div-block-12 {
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.image-4 {
  order: 0;
  align-self: center;
  margin: 0 5px 0 auto;
}

.span-bold-chiffre {
  font-weight: 700;
}

.dropdown-toggle-repartition {
  background-color: var(--lavender);
  object-fit: fill;
  border-radius: 80px;
  flex-wrap: nowrap;
  order: 1;
  place-content: center space-around;
  align-self: auto;
  align-items: center;
  max-height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: static;
}

.dropdown-toggle-repartition.w--open {
  z-index: 1;
  border-radius: 80px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  position: relative;
}

.div-block-13 {
  justify-content: space-between;
  margin-bottom: 10px;
  padding-left: 0;
  display: flex;
}

.ville {
  clear: none;
  object-fit: fill;
  flex-direction: column;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  width: 250px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  left: -496px;
  overflow: visible;
}

.ville.tooltip-open {
  z-index: 1000;
  flex: 0 auto;
  justify-content: flex-end;
  align-self: auto;
  height: 161px;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: absolute;
  inset: auto auto 0%;
}

.ville.lille {
  z-index: 1;
  top: -257px;
  left: -378px;
  position: absolute;
  inset: 33px 0% 0% 3%;
}

.ville.dijon {
  position: relative;
  inset: -451px 0% 0% 5%;
}

.ville.caen {
  z-index: 1;
  width: 100px;
  position: absolute;
  inset: 118px 0% 0% -36%;
}

.ville.bordeaux {
  z-index: auto;
  position: absolute;
  inset: 418px 0% 0% -40%;
}

.ville.paris {
  z-index: 1;
  position: absolute;
  inset: 159px 0% 0%;
}

.ville.nancy {
  z-index: 1;
  display: flex;
  position: absolute;
  inset: 147px 0% 0% 56%;
}

.ville.tours {
  z-index: 1;
  display: flex;
  position: absolute;
  inset: 258px 0% 0% -9%;
}

.ville.nantes {
  z-index: auto;
  position: absolute;
  inset: 267px 0% 0% -52%;
}

.ville.toulouse {
  width: 100px;
  position: absolute;
  inset: 540px 0% 0% -7%;
}

.ville.ajaccio {
  z-index: auto;
  width: 100px;
  position: absolute;
  inset: 553px 0% 0% 75%;
}

.ville.aix {
  z-index: 1;
  width: 140px;
  position: absolute;
  inset: 501px 0% 0% 38%;
}

.ville.rennes {
  z-index: 1;
  position: absolute;
  inset: 184px 0% 0% -55%;
}

.ville.la-reunion {
  width: 100px;
  position: absolute;
  inset: 43px 0% 0% 25%;
}

.ville.guyanne {
  width: 100px;
  position: absolute;
  inset: 43px 0% 0% -23%;
}

.ville.martinique {
  width: 100px;
  position: absolute;
  inset: 43px 0% 0% -72%;
}

.ville.lyon {
  z-index: 1;
  position: absolute;
  inset: 359px 0% 0% 32%;
}

.ville.guadeloupe {
  width: 100px;
  position: absolute;
  inset: 43px 0% 0% 72%;
}

.ville.dijon {
  z-index: 1;
  z-index: auto;
  inset: 246px 0% 0% 22%;
  width: 100px;
  position: absolute;
  inset: 263px 0% 0% 29%;
}

.ville.paris {
  z-index: auto;
  width: 100px;
  position: absolute;
  inset: 169px 0% 0% 2%;
}

.ville.tours {
  z-index: auto;
  width: 100px;
  position: absolute;
  inset: 243px 0% 0% -17%;
}

.div-block-15 {
  background-color: var(--dark-slate-blue);
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  display: block;
  box-shadow: 0 0 10px -3px #00000080;
}

.nom-ville {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 30px #000;
  white-space: normal;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  display: flex;
}

.nom-ville.tooltip-trigger {
  z-index: 1;
  cursor: pointer;
  justify-content: flex-end;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.region {
  color: #fff;
  text-align: left;
  text-transform: none;
  text-shadow: 0 0 30px #000;
  white-space: normal;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.adresse {
  color: var(--light-sky-blue);
  text-align: left;
  text-transform: none;
  text-shadow: 0 0 30px #000;
  white-space: normal;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 14px;
  display: flex;
}

.div-block-17 {
  margin-bottom: 10px;
  display: flex;
}

.cat_telephone {
  color: var(--light-sky-blue);
  text-align: left;
  text-transform: none;
  text-shadow: 0 0 30px #000;
  white-space: normal;
  margin-left: 0;
  margin-right: 5px;
  font-size: 13px;
  font-weight: 400;
  line-height: 14px;
  display: block;
}

.telephone {
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 0 30px #000;
  white-space: normal;
  margin-left: 0;
  margin-right: auto;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.email {
  color: #fff;
  text-align: left;
  text-transform: none;
  text-shadow: 0 0 30px #000;
  white-space: normal;
  font-size: 13px;
  font-weight: 400;
  line-height: 14px;
  text-decoration: none;
}

.email:hover {
  color: var(--light-sky-blue);
}

.div-block-18 {
  background-color: var(--dark-slate-blue);
  width: 10px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -5px;
  transform: rotate(45deg);
}

.body-2 {
  background-color: #fff;
  font-family: Roboto, sans-serif;
}

.nav-menu {
  color: var(--dark-slate-blue);
  text-align: center;
  white-space: normal;
  flex: 0 auto;
  align-self: center;
  width: 121px;
  margin: auto 0;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: visible;
}

.nav-menu:hover {
  /* font-weight:900 used to jump the glyphs to a wider bold face, which
     changes this item's natural (width:auto) size and shoves every other
     nav item + separator sideways — a visible "shake" across the whole
     bar on every hover. A layered text-shadow fakes the extra weight by
     painting the glyph outline slightly thicker instead, which is purely
     visual and never touches layout, so nothing shifts. */
  color: var(--dark-slate-blue);
  text-shadow: 0.4px 0 currentColor, -0.4px 0 currentColor, 0 0.4px currentColor, 0 -0.4px currentColor;
}

.nav-menu.w--current {
  color: var(--orange);
  width: 121px;
  font-weight: 700;
}

.nav-menu.gouv {
  /* margin was 5px each side, on top of .nav-menu-3's own now-uniform gap
     — zeroed out so this item spaces the same as its neighbors. */
  flex: 0 auto;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.nav-menu.gouv.w--current {
  color: var(--bleu);
}

.nav-menu.gouv.none {
  display: none;
}

.nav-menu.nav-edito {
  width: 60px;
}

.nav-menu.nav-edito.w--current {
  color: var(--bleu);
}

.hero-header {
  z-index: 7970;
  background-image: url('../images/FOND-hero-bleu-v2.svg');
  background-position: 50% 100%;
  background-repeat: repeat-y;
  background-size: cover;
  background-attachment: scroll;
  align-items: center;
  height: 580px;
  margin-top: -92px;
  padding-top: 40px;
  padding-bottom: 0;
  display: block;
  position: relative;
  top: 40px;
}

.flex-container {
  flex-direction: row;
  flex: 1;
  align-items: center;
  max-width: 1038px;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 119px;
  display: flex;
}

.hero-image-mask {
  mix-blend-mode: normal;
  background-image: url('../images/juicy-girl-and-boy-searching-for-the-right-files.gif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
  order: -1;
  justify-content: center;
  align-items: center;
  width: 480px;
  max-width: 800px;
  height: 370px;
  max-height: 800px;
  margin-top: 0;
  margin-left: 0;
  display: flex;
}

.brand-2 {
  z-index: 1;
  background-color: var(--dark-slate-blue);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 210px;
  min-width: 210px;
  height: 127px;
  min-height: 62px;
  margin-left: 0;
  margin-right: auto;
  display: block;
  top: -8px;
  left: 24px;
  box-shadow: 0 0 20px #0006;
}

.brand-2.w--current {
  width: 210px;
}

.image-6 {
  max-width: 90%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.container-4 {
  /* was "flex-start space-between": pushed the nav links all the way to
     the far right of this up-to-1280px-wide bar, leaving a big empty gap
     next to the logo. flex-start packs both the logo and the nav links
     to the left instead, closer together. */
  flex-wrap: nowrap;
  place-content: flex-start;
  align-items: center;
  max-width: 1280px;
  height: 62px;
  max-height: 62px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.navbar-2 {
  z-index: 89999;
  background-color: #ffffffd9;
  justify-content: flex-end;
  align-items: center;
  width: 100vw;
  max-height: 62px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: block;
  position: fixed;
  inset: 40px 0% auto;
  transform: translate(0);
}

.nav-menu-3 {
  /* Sits shortly after the logo now (margin-left:auto used to push it all
     the way to the navbar's right edge). The gap gives the buttons
     themselves room to breathe, uniformly, instead of each relying on its
     own small/inconsistent margin. */
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-left: 48px;
  margin-right: 0;
  display: flex;
  position: static;
}

.section-2 {
  z-index: 8998;
  /* Was var(--bleu) (#721b9d, violet) — that shared variable is still
     genuinely violet elsewhere (PDC/POEC's own identity), so this top
     strip gets its own explicit cyan-blue instead of a var change, kept
     in the same cyan-shifted family as the rest of the Edito/Hero swap. */
  background-color: #1cbbd0;
  background-image: linear-gradient(32deg, #1cbbd0, #1cbbd0);
  height: 40px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0;
  padding-left: 279px;
  padding-right: 24px;
  position: fixed;
  inset: 0% 0% auto;
}

.container-5 {
  background-color: #0000;
  max-width: 1000px;
  height: 40px;
  max-height: 31px;
  display: flex;
}

.div-block-23 {
  justify-content: space-between;
  width: 156px;
  height: 40px;
  display: flex;
}

.div-block-24 {
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  margin: auto;
  display: flex;
}

.div-block-25 {
  align-items: center;
  height: 31px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 10px;
  display: flex;
}

.link {
  color: #fdfdfd;
  text-align: center;
  text-transform: uppercase;
  align-self: center;
  margin: auto;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.link.footer {
  margin-top: 10px;
}

/* www.lopcommerce.com renders as-is (lowercase, matching the actual URL)
   at both footer instances — .link's own base text-transform:uppercase
   was shouting it. Targeted by href rather than the .link class itself,
   since .link.top ("Des équipes à votre écoute") shares that class and
   should stay uppercase. */
a[href="https://www.lopcommerce.com"] {
  text-transform: lowercase;
}

.link.footer:hover {
  color: var(--dark-slate-blue);
}

.link.top {
  /* Was --bleu-clair (#b877e0, a light purple despite the name) — low
     contrast against the purple hero background showing through behind
     this fixed top bar. White reads clearly there. */
  color: #fff;
}

.container-6 {
  flex-direction: column;
  align-items: center;
  max-width: 1038px;
  margin: auto;
  display: block;
}

.edito-allais {
  flex-direction: column;
  align-items: center;
  width: 262px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.nom-edito {
  color: var(--dark-slate-blue);
  text-align: center;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 14px;
}

.fonction-edito {
  color: var(--light-slate-grey);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.div-block-30 {
  flex-direction: row;
  width: 460px;
  margin: auto;
  display: flex;
}

.spacer {
  background-color: #fff;
  border-radius: 20px;
  width: 140px;
  height: 2px;
  margin: 23px auto auto;
}

.div-block-32 {
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.image-13 {
  cursor: pointer;
  object-fit: contain;
  max-width: none;
  margin: auto;
  display: block;
}

.div-block-edito-wrapper {
  background-color: var(--bleu-clair);
  background-image: url('../images/TILE-EDITO.svg');
  background-position: 50% 0;
  background-size: contain;
  width: 95vw;
  margin: 130px auto auto;
  padding-top: 121px;
  padding-bottom: 100px;
  position: relative;
}

.edito {
  margin-top: -209px;
  margin-bottom: auto;
  position: relative;
}

.div-block-34 {
  margin-bottom: 40px;
}

.soustitre-6-texte-edito-v1 {
  color: var(--dark-slate-blue);
  text-transform: none;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 16px;
  line-height: 26px;
}

.container-8 {
  justify-content: center;
  max-width: 90vw;
  height: auto;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: auto;
}

.div-block-38 {
  flex-direction: column;
  align-self: auto;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.container-9 {
  flex-direction: column;
  align-items: center;
  max-width: 652px;
  display: none;
}

.l-opcommerce-en-bref {
  z-index: auto;
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  margin: auto;
  position: relative;
  top: auto;
  overflow: visible;
}

.div-block-39 {
  flex: 1;
  width: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 19px;
  overflow: hidden;
}

.icono-en-bref {
  mix-blend-mode: normal;
  width: 300px;
  height: 94%;
  margin-top: auto;
  margin-bottom: auto;
  overflow: hidden;
}

.div-block-42 {
  z-index: 0;
  background-color: var(--lemon-chiffon);
  max-width: 95vw;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 100px;
  position: static;
  top: auto;
}

.container-11 {
  flex-flow: row;
  align-content: flex-end;
  align-items: flex-start;
  max-width: 845px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.div-block-43 {
  object-fit: contain;
  flex-wrap: nowrap;
  order: 0;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  width: 363px;
  margin: auto;
  display: flex;
}

.image-14 {
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  margin: auto 10px auto 0;
}

.div-block-46 {
  flex-direction: column;
  width: 363px;
  display: flex;
}

.div-block-47 {
  flex-direction: column;
  width: 363px;
  margin-left: 60px;
  display: flex;
}

.bref-chiffres {
  object-fit: fill;
  object-position: 50% 1%;
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  width: 245px;
  margin: auto 10px;
  display: block;
  overflow: visible;
  box-shadow: 0 4px 30px #0000001a;
}

.div-block-49 {
  background-image: url('../images/close-up.png');
  background-position: 0 0;
  background-size: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 151px;
  margin-left: auto;
  margin-right: auto;
}

.implantation-chiffres {
  align-items: center;
  height: 82px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 10px;
  display: flex;
}

.container-12 {
  justify-content: space-around;
  align-items: center;
  max-width: 1038px;
  margin: auto auto 40px;
  display: flex;
}

.implantation {
  background-image: url('../images/4739136.jpg');
  background-position: 0 0;
  background-size: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 151px;
  margin-left: auto;
  margin-right: auto;
}

.observatoire {
  background-image: url('../images/front-view-man-looking-through-binoculars.png');
  background-position: 50% 20%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 151px;
  margin-left: auto;
  margin-right: auto;
}

.container-13 {
  max-width: 845px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.div-block-50 {
  background-color: #fff;
  border-radius: 100px;
  height: 80px;
  margin-bottom: 10px;
  display: flex;
}

.div-block-51 {
  width: 266px;
  max-width: 266px;
  margin-right: 20px;
}

.div-block-52 {
  max-width: 552px;
}

.la-gouvernanceet-les-chiffres-cl-s {
  z-index: auto;
  max-width: 100vw;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
}

.container-14 {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  max-width: 1038px;
  height: 100%;
  margin: auto;
  padding-top: 87px;
  display: flex;
  position: static;
  top: 102px;
  overflow: visible;
}

.header-gouvernance-1280 {
  z-index: 5;
  height: auto;
  margin-top: -60px;
  margin-bottom: -38px;
  position: relative;
  inset: auto 0%;
  overflow: visible;
}
.header-gouvernance-1280 .banner-fill {
  /* 2 colors only: main color -> leaf color. Leaves are on the RIGHT here
     (#009386), so the leaf color sits at the right edge to match. Main color's stop moved from 0% to 35% (more main, less leaf, still one smooth blend from 35-100%, solid main from 0-35%). */
  background: linear-gradient(90deg, #32b05e 35%, #009386 100%);
}
.header-gouvernance-1280 .container-14 {
  padding-top: 0;
}
.header-gouvernance-1280 .div-block-39 {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.div-block-55 {
  /* Not z-index:0 anymore, and not a higher value either — either would lift
     this ENTIRE block (photos, names, everything) above the next section.
     Left at auto so it stops creating its own stacking context; only the
     dropdown wrapper inside it (.drop-menu-ca / .drop-menu-salarie, see
     below) gets an elevated z-index, so just the toggle+panel escape above
     the next section — not the rest of this block's static content. */
  z-index: auto;
  background-color: var(--roseclair);
  max-width: 95vw;
  margin: auto;
  padding: 70px 20px 100px;
  position: relative;
}

.div-block-57 {
  display: flex;
}

.div-block-58 {
  background-color: var(--deep-pink-2);
  width: 2px;
  margin-right: 10px;
}

.div-block-59 {
  z-index: auto;
  background-color: #fff;
  border-radius: 10px;
  width: 362px;
  margin-left: auto;
  margin-right: 20px;
  padding: 20px;
  position: relative;
}

.div-block-60 {
  z-index: 4;
  max-width: 1038px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: static;
}

.div-block-61 {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.paragraphe-observatoire {
  color: var(--dark-slate-blue);
  text-transform: none;
  margin-bottom: 20px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.div-block-63 {
  width: 230px;
  max-width: 230px;
  margin-right: 20px;
  flex: none;
}

.div-block-63.col-reconversion {
  width: 150px;
  max-width: 150px;
}

.div-block-64 {
  width: 228px;
  max-width: 228px;
  flex: none;
}

.div-block-65 {
  margin-bottom: 10px;
}

.div-block-66 {
  background-color: #fff;
  border-radius: 10px;
  max-width: 1038px;
  margin: 20px auto;
  padding: 20px;
}

.grid-3-diagnostic {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 20px;
  margin-bottom: 4px;
}

.grid-4-framing-image {
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "left-top image right-top" "left-bottom image right-bottom";
  column-gap: 20px;
  row-gap: 16px;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 4px;
}

.stat-left-top {
  grid-area: left-top;
}

.stat-left-bottom {
  grid-area: left-bottom;
}

.stat-right-top {
  grid-area: right-top;
}

.stat-right-bottom {
  grid-area: right-bottom;
}

.stat-image {
  grid-area: image;
  align-self: center;
  justify-self: center;
  width: 280px;
  max-width: 100%;
  height: auto;
}

.module-chiffre-b-r {
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.stat-left-top.module-chiffre-b-r,
.stat-left-bottom.module-chiffre-b-r {
  padding: 22px 20px;
}

.module-chiffre-b-r.fdphoto {
  background-image: url('../images/colors-entrepreneurship-and-fast-growing-startup-business.png');
  background-position: 31%;
  background-repeat: repeat;
  background-size: 300px;
}

.module-chiffre-r-r {
  background-color: var(--roseclair);
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.stat-right-top.module-chiffre-r-r,
.stat-right-bottom.module-chiffre-r-r {
  padding: 22px 20px;
}

.line-white {
  background-color: #fff;
  border-radius: 20px;
  width: 50px;
  height: 2px;
  margin: 10px auto;
}

.les-diagnostics-accompagnements {
  z-index: auto;
  background-color: #0000;
  min-height: 670px;
  margin-top: 0;
  margin-bottom: auto;
  position: relative;
  top: auto;
}

.div-block-67 {
  flex: 1;
  width: auto;
  max-width: 649px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
  padding-top: 115px;
  overflow: hidden;
}

.header-diag-1280-ok {
  z-index: 0;
  height: auto;
  margin-top: -60px;
  margin-bottom: -27px;
  line-height: 20px;
  display: block;
  position: relative;
  top: auto;
  overflow: visible;
}
.header-diag-1280-ok .banner-fill {
  /* 2 colors only: main color -> leaf color. Leaves are on the LEFT here
     (#079295), so the leaf color sits at the left edge to match. Main color's stop moved from 100% to 65% (more main, less leaf, still one smooth blend from 0-65%, solid main from 65-100%). */
  background: linear-gradient(90deg, #079295 0%, #ffcd20 65%);
}
.header-diag-1280-ok .div-block-67 {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.div-block-69 {
  mix-blend-mode: normal;
  background-image: url('../images/colors-teamwork-of-company-employees.png');
  background-position: 50%;
  background-size: cover;
  width: 270px;
  max-width: 400px;
  height: 270px;
  max-height: 400px;
  margin-top: auto;
  margin-bottom: auto;
  overflow: hidden;
}

.div-block-70 {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  max-width: 1038px;
  height: 100%;
  margin: auto;
  display: flex;
  position: static;
  top: auto;
  overflow: hidden;
}

.div-block-diagnostic-wrapper {
  background-color: var(--vertclair);
  max-width: 95vw;
  margin: auto;
  padding-top: 70px;
  padding-bottom: 100px;
  position: static;
  top: auto;
}

.div-block-dignostic-content {
  background-color: #fff;
  border-radius: 10px;
  max-width: 1038px;
  margin: auto;
  padding: 20px;
}

.div-block-dignostic-content.nocornerb {
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.div-block-dignostic-content.nocornerh {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.div-block-dignostic-content.nocorner {
  border-top: 2px solid var(--vert);
  border-bottom: 2px solid var(--vert);
  border-radius: 0;
}
/* Guyane and La Réunion are the only two adjacent DROM blocks that both use
   .nocorner (top+bottom border each) — stacked back to back, Guyane's own
   bottom border and Réunion's own top border double up into one thick 4px
   line instead of the single 2px line every other DROM boundary has. Drop
   just Réunion's top border; Guyane's bottom border alone still separates
   them. */
.div-block-dignostic-content.nocorner:has(#diag-drom-reunion) {
  border-top: none;
}

.div-block-71 {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/ZIGZAG.png');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
}

.div-block-72 {
  width: 20px;
}

.div-block-74 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.desc-detail-chiffre {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 20px var(--saddle-brown-2);
  white-space: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

.module-chiffre-b-j {
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.module-chiffre-j-j {
  background-color: var(--vertclair);
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.chiffre-cl-or {
  color: var(--vert);
  text-align: center;
  -webkit-text-stroke-color: var(--deep-pink-2);
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-bottom: 0;
  font-family: Fraunces, sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 30px;
}

.div-block-90 {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/ZIGZAG.png');
  background-position: 0 0, 50% 40%;
  background-repeat: repeat, repeat;
  background-size: auto, 200%;
  border-radius: 10px;
  max-width: 493px;
  display: flex;
}

.header-chiffre-gouvernance {
  background-image: linear-gradient(#2cadffa8, #2cadffa8), url('../images/diverse.png');
  background-position: 0 0, 50% 40%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  margin-bottom: 9px;
  padding-top: 110px;
  display: flex;
}

.header-chiffre-diagnostic-2-col {
  max-width: 1038px;
  max-height: 100%;
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
}

.span-bold-or {
  color: var(--vert);
  font-weight: 900;
}

.ligne-or {
  background-color: var(--vert);
  height: 2px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.link-block-2 {
  z-index: 100000000;
  position: fixed;
  bottom: 1vh;
  right: 1vw;
}

.link-block-2.w--current {
  z-index: 1000000;
}

.grid-2-diagnostic {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  margin-bottom: 4px;
}

.alternance {
  z-index: 2;
  background-color: #0000;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 0;
  position: relative;
  top: auto;
}

.header-alternance-1280 {
  z-index: 0;
  height: auto;
  margin: -60px auto -50px;
  display: block;
  position: relative;
  top: auto;
  overflow: visible;
}
.header-alternance-1280 .banner-fill {
  /* 2 colors only: main color -> leaf color (was 2 slightly different
     pinks in the plateau, simplified to one). Leaves are on the LEFT here
     (#079295), so the leaf color sits at the left edge to match. Main color's stop moved from 100% to 65% (more main, less leaf, still one smooth blend from 0-65%, solid main from 65-100%). */
  background: linear-gradient(90deg, #079295 0%, #ce559a 65%);
}
.header-alternance-1280 .div-block-67 {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.div-block-header-content {
  justify-content: space-between;
  align-items: center;
  width: 1038px;
  max-width: 1038px;
  height: 100%;
  margin: auto;
  display: flex;
  position: static;
  top: auto;
  overflow: visible;
}

.div-block-alternance-wrapper {
  background-color: var(--slate-violet);
  max-width: 95vw;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 100px;
}

.div-block-alternance-content {
  background-color: #fff;
  border-radius: 0 10px 10px;
  max-width: 1038px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  display: block;
}

.header-chiffre-apprentissage {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/ZIGZAG.png');
  background-position: 0 0, 50% 37%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.royal-blue {
  color: var(--indigo);
  -webkit-text-stroke-color: var(--orange);
  font-family: Fraunces, sans-serif;
}

.grid-2-alternance {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  margin-bottom: 4px;
}

.module-chiffre-b-rb {
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.module-chiffre-rb-rb {
  background-color: var(--slate-violet);
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.chiffre-cl-royal-blue {
  color: var(--indigo);
  text-align: center;
  -webkit-text-stroke-color: var(--orange);
  text-transform: none;
  margin-bottom: 5px;
  padding-bottom: 0;
  font-family: Fraunces, sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 30px;
}

.ligne-royal-blue {
  background-color: var(--indigo);
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.grid-4-alternance {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 20px;
  margin-bottom: auto;
  padding-bottom: 10px;
}

.dropdown-repartition {
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.div-block-91 {
  z-index: 3200;
  justify-content: space-between;
  display: flex;
  position: static;
}

.dropdown-toggle-2 {
  z-index: 3000;
  background-color: var(--slate-violet);
  border-radius: 80px;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 85px;
  padding: 15px;
  display: flex;
}

.dropdown-toggle-2.pdc-drop {
  z-index: 3000;
  background-color: var(--roseclair);
  width: 325px;
  margin-left: auto;
  margin-right: auto;
}

.dropdown-toggle-2.pdc-drop.terco {
  background-color: var(--roseclair);
}

.dropdown-toggle-2.poec-drop {
  background-color: var(--lavender);
  width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.dropdown-toggle-2.poec-drop.duo {
  z-index: 4;
}

.icon-3 {
  flex: 0 auto;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto auto 15px;
}

.dropdown {
  z-index: 307;
  flex: 0 auto;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.dropdown.entreprise.z800 {
  z-index: 3000;
}

.dropdown.z700 {
  z-index: 307;
}

.text-block-2 {
  color: var(--dark-slate-blue);
  text-align: center;
  padding-bottom: 10px;
}

.dropdown-list-2 {
  top: 89px;
}

.dropdown-list-2.w--open {
  z-index: auto;
  background-color: var(--slate-violet);
  border-bottom-right-radius: 42px;
  border-bottom-left-radius: 42px;
  padding: 22px 10px 6px;
  top: 51px;
  overflow: hidden;
  box-shadow: 0 4px 10px #0000001a;
}

.dropdown-list-2.pdc-list.w--open {
  z-index: 10;
  background-color: var(--roseclair);
  padding-top: 26px;
}

.dropdown-list-2.poec-list {
  z-index: 1;
}

.dropdown-list-2.poec-list.w--open {
  z-index: 10;
  background-color: var(--lavender);
  padding-top: 26px;
}

.div-block-data-drop-menu {
  justify-content: space-between;
  align-items: center;
  width: 96%;
  margin: 15px auto 17px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.header-chiffre-ctt-pro {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/ZIGZAG.png');
  background-position: 0 0, 0 26%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-fonction-tutorale {
  justify-content: space-between;
  align-items: stretch;
  max-width: 1038px;
  margin: 0 auto 20px;
  display: flex;
}

.div-block-71-copy {
  background-image: linear-gradient(#516ef0cc, #516ef0cc), url('../images/DIAGNOSTIC-EUROS-ENGAGES.png');
  background-position: 0 0, 50% 60%;
  background-size: auto, cover;
  border-radius: 10px;
  max-width: 493px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.div-block-95 {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-zigzag.png');
  background-position: 0 0, 50% 19%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex: 1;
  max-width: 100%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.div-block-96 {
  background-image: linear-gradient(to bottom, var(--violet-t), var(--violet-t)), url('../images/mature-professional-meeting-with-young-customer-co-working-holding-documents-talking-laughing.jpg');
  background-position: 0 0, 50% 28%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex: 1;
  height: auto;
  margin: 15px auto auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.le-plan-de-d-veloppement-des-comp-tences {
  z-index: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  top: auto;
}

.header-pdc-1280 {
  z-index: 3000;
  object-fit: contain;
  max-width: 102vw;
  height: auto;
  margin: -60px auto 0 0;
  padding-left: 0;
  line-height: 20px;
  display: block;
  position: relative;
  top: auto;
  overflow: visible;
}
.header-pdc-1280 .banner-fill {
  /* 2 colors only: main color -> leaf color. Leaves are on the RIGHT here
     (#009386), so the leaf color sits at the right edge to match. Main color's stop moved from 0% to 35% (more main, less leaf, still one smooth blend from 35-100%, solid main from 0-35%). */
  background: linear-gradient(90deg, #9b7fc7 35%, #009386 100%);
}
.header-pdc-1280 .div-block-67 {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.div-block-97 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1038px;
  height: 100%;
  margin: auto;
  display: flex;
  overflow: visible;
}

.icono-pdc {
  -webkit-text-fill-color: inherit;
  mix-blend-mode: normal;
  object-fit: fill;
  background-image: url('../images/colors-artificial-intelligence-and-cloud-computing.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-clip: border-box;
  width: 320px;
  max-width: 400px;
  height: 260px;
  max-height: 400px;
  margin-top: 10px;
  margin-bottom: auto;
  overflow: hidden;
}

.div-block-pdc-wrapper {
  z-index: auto;
  background-color: var(--roseclair);
  max-width: 95vw;
  margin: -39px auto auto;
  padding-top: 40px;
  padding-bottom: 100px;
  position: relative;
}

.div-block-pdc-content {
  z-index: 4000;
  background-color: #fff;
  border-radius: 0 10px 10px;
  max-width: 1038px;
  margin: 0 auto auto;
  padding: 20px 20px 40px;
  position: relative;
}

.header-chiffre-pdc {
  background-image: linear-gradient(to bottom, #9b7fc7e6, #9b7fc7e6), url('../images/ZIGZAG.png');
  background-position: 0 0, 50% 38%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.chiffre-cl-bleu-ciel {
  color: var(--orange);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-bottom: 0;
  font-family: Fraunces, sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 30px;
}

.module-chiffre-bc-bc {
  background-color: var(--roseclair);
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.ligne-bleu-ciel {
  background-color: var(--gold-2);
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.ligne-bleu-ciel.corail {
  background-color: var(--dark-orchid);
}

.module-chiffre-b-bc {
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.span-bold-bleu-ciel {
  color: var(--orange);
  font-weight: 900;
}

.poec {
  z-index: auto;
  margin-top: 0;
  margin-bottom: auto;
  padding-bottom: 0;
  position: relative;
}

.header-poec-1280 {
  z-index: 3000;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  margin-top: -60px;
  margin-bottom: -60px;
  margin-right: auto;
  display: block;
  position: relative;
  top: auto;
  overflow: visible;
}
.header-poec-1280 .banner-fill {
  /* 2 colors only: main color -> leaf color. Leaves are on the RIGHT here
     (#009386), so the leaf color sits at the right edge to match. Main color's stop moved from 0% to 35% (more main, less leaf, still one smooth blend from 35-100%, solid main from 0-35%). */
  background: linear-gradient(90deg, #a840d9 35%, #009386 100%);
}
.header-poec-1280 .div-block-67 {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.container-18 {
  justify-content: space-around;
  align-items: center;
  max-width: 1038px;
  height: 100%;
  margin: auto;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  overflow: visible;
}

.div-block-100 {
  width: 647px;
  margin: auto auto auto 0;
  overflow: hidden;
}

.icono-poec {
  mix-blend-mode: normal;
  background-image: url('../images/colors-business-planning-and-time-management.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 340px;
  height: 300px;
  margin-top: -3px;
  margin-bottom: 1px;
  padding-bottom: 1px;
  overflow: hidden;
}

.div-block-102 {
  z-index: auto;
  background-color: var(--lavender);
  width: 95vw;
  margin: auto;
  padding-top: 74px;
  padding-bottom: 100px;
  position: relative;
  top: auto;
}

.div-block-poec-content {
  z-index: 300;
  background-color: #fff;
  border-radius: 10px;
  max-width: 1038px;
  margin: 0 auto;
  padding: 20px;
  position: static;
}

.header-chiffre-poec {
  background-image: linear-gradient(to bottom, var(--cornflower-blue), var(--cornflower-blue)), url('../images/group-people-working-out-business-plan-office.jpg');
  background-position: 0 0, 50% 21%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.module-chiffre-b-v {
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.chiffre-cl-violet {
  color: #ffa5a2;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-bottom: 0;
  font-family: Fraunces, sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 30px;
}

.module-chiffre-v-v {
  background-color: var(--lavender);
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.ligne-violet {
  background-color: var(--slate-violet);
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.violet {
  color: #ffa5a2;
}

.experimentation {
  z-index: auto;
  margin-top: -51px;
  margin-bottom: auto;
  padding-top: 25px;
  position: relative;
  top: auto;
  overflow: visible;
}

.div-block-expe-wrapper {
  background-color: #fff;
  margin-top: -35px;
  margin-bottom: auto;
  padding-top: 40px;
  padding-bottom: 0;
  position: static;
  top: auto;
}

.div-block-102-copy {
  background-color: var(--coral-clair);
  width: 95vw;
  margin: 0 auto auto;
  padding-top: 76px;
  padding-bottom: 140px;
  position: static;
  top: -401px;
}

.div-block-expe-content {
  background-color: #fff;
  border-radius: 10px;
  max-width: 1038px;
  margin: 20px auto auto;
  padding: 20px;
}

.div-block-expe-content.nocornerb {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: 0;
}

.icono-experimentation {
  mix-blend-mode: normal;
  background-image: url('../images/colors-employee-giving-a-business-presentation.png');
  background-position: 40%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 300px;
  height: 300px;
  margin: auto 0 auto auto;
  overflow: hidden;
}

.module-chiffre-marron-marron {
  background-color: var(--coral-clair);
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.chiffre-cl-marron {
  color: var(--light-coral);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-bottom: 0;
  font-family: Butler, sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 30px;
}

.module-chiffre-b-marron {
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.module-chiffre-b-marron.coloralternance {
  background-color: #fff;
}

.marron {
  color: var(--goldenrod);
}

.equipe-mobile {
  z-index: 7000;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 0;
  display: none;
  position: relative;
}

.container-19 {
  justify-content: space-around;
  align-items: center;
  max-width: 1038px;
  height: 9%;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: static;
  top: 40px;
}
/* The leaves are now direct children of .equipe-1280 itself (see z-index
   fix on that rule above), same as every other banner — same default
   top:8%/left:6% positioning, no per-section override needed here anymore.

   Unlike the other 6 banners, this section has no separate .banner-fill
   overlay to hide the leaves behind — its background is painted directly on
   .equipe-1280 itself, which is the leaf's own parent, and an element can
   never paint behind its own parent's background (z-index only orders
   SIBLINGS). So .equipe-leaf-cover stands in for that missing layer: a
   sibling of the leaves, sized to the title/text zone, painted at
   z-index:-1 — behind the real title/image (normal flow, no z-index) but
   in FRONT of the leaves (z-index:-2, one step further back). Its
   background-color approximates the section's own gradient at that spot so
   it reads as part of the backdrop rather than a visible patch. */
.equipe-1280 .section-leaf {
  z-index: -2;
}
.equipe-leaf-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  z-index: -1;
  background-color: #079295;
  /* Same dome as .equipe-1280 itself: this cover is a flat rectangle sitting
     right where the section's own rounded top corners are, so without this
     it paints over (squares off) the dome entirely. */
  border-radius: 100% 100% 0 0 / 40px 40px 0 0;
  pointer-events: none;
}

.div-block-103 {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 637px;
  max-width: 637px;
  margin-left: 0;
  margin-right: 0;
  display: flex;
}

.div-block-104 {
  z-index: 0;
  background-image: url('../images/2024.svg');
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 655px;
  margin: auto;
  display: flex;
  position: relative;
  top: 30px;
}

.image-17 {
  z-index: -1;
  width: 630px;
  max-width: 630%;
  height: 630px;
  max-height: 630px;
  margin: auto;
  display: block;
  position: absolute;
}

.div-block-106 {
  background-image: url('../images/Guadeloupe.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 130px;
  height: 130px;
  margin-left: auto;
  margin-right: auto;
}

.div-block-107 {
  background-image: url('../images/Martinique.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 130px;
  height: 130px;
  margin-left: auto;
  margin-right: auto;
}

.div-block-108 {
  background-image: url('../images/Guyane.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 130px;
  height: 130px;
  margin-left: auto;
  margin-right: auto;
}

.div-block-109 {
  /* Renamed from "La-Réunion.svg" (with accent) - the CSS reference and
     the file on disk were normalized to different Unicode forms for the
     e-acute (NFD vs NFC): byte-identical to look at, and macOS's filesystem
     silently treats them as the same file, but a case/byte-sensitive
     production server doesn't - hence the image working locally but
     404ing once deployed. Plain-ASCII name sidesteps the whole issue. */
  background-image: url('../images/La-Reunion.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 130px;
  height: 130px;
  margin-left: auto;
  margin-right: auto;
}

.div-block-110 {
  flex-direction: column;
  max-width: 1038px;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 70px;
  display: flex;
}

.span-footer {
  color: #fff;
  line-height: 15px;
}

.span-accroche-footer {
  color: var(--dark-slate-blue);
  font-weight: 900;
  line-height: 15px;
}

.dom {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin: 39px auto auto;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  position: relative;
}

.div-block-114 {
  background-image: url('../images/ARCHE.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -45px;
}

.div-block-110-copy {
  flex-direction: column;
  max-width: 1038px;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 20px;
  display: flex;
}

.icono-equipe {
  mix-blend-mode: normal;
  background-image: url('../images/equipe2.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 400px;
  height: 370px;
  margin-top: 14px;
  margin-left: auto;
  margin-right: 0;
  overflow: hidden;
}

.drop-menu-salarie {
  /* Same reasoning as .drop-menu-ca above — raised to the page-top tier,
     kept 1 below it (8999 vs 9000) so it never wins a tie against the
     Collège employeurs button. */
  z-index: 8999;
  cursor: pointer;
  border-radius: 20px;
  width: auto;
  max-width: none;
  margin: 30px auto 20px;
  display: block;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 14px #0000002e;
}

.div-block-115 {
  margin-top: auto;
  margin-bottom: 5px;
}

.div-block-116 {
  z-index: 2;
  margin-left: 0;
  margin-right: 20px;
  position: static;
  top: 170px;
}

.div-block-116-copy {
  z-index: 2;
  margin-left: auto;
  margin-right: 0;
  padding-right: 9px;
  position: static;
  top: 170px;
}

.container-18-copy {
  justify-content: space-around;
  align-items: center;
  max-width: 1038px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 26px;
  padding-bottom: 43px;
  display: block;
  overflow: hidden;
}

.div-block-117 {
  flex: 0 auto;
  display: block;
}

.div-block-118 {
  justify-content: flex-start;
  align-items: center;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.image-18 {
  margin: auto;
  padding: 10px;
  display: block;
}

.div-block-121 {
  text-align: center;
  margin: auto;
}

.div-block-39-copy {
  flex: 1;
  width: 647px;
  margin-top: 14px;
  overflow: hidden;
}

.icono-gouernance {
  -webkit-text-fill-color: inherit;
  mix-blend-mode: normal;
  background-image: url('../images/colors-cryptocurrency-market-and-exchange-on-phone-screen.png');
  background-position: 0 0;
  background-size: cover;
  background-clip: border-box;
  width: 300px;
  height: 240px;
  margin-top: 8px;
  margin-bottom: auto;
  overflow: visible;
}

.header-bref-1280 {
  z-index: 1;
  height: auto;
  margin: -60px auto -25px -17px;
  display: block;
  position: relative;
  top: auto;
  bottom: auto;
  overflow: visible;
}
.header-bref-1280 .banner-fill {
  /* Every section's .banner-fill pairs its own main color with #079295 —
     the SAME teal every section's floating .section-leaf SVGs are filled
     with (see the 5 <div class="section-leaf"> siblings right above this
     element in the markup) — at whichever edge the leaves sit, so the
     gradient's edge and the leaves painted over it read as one continuous
     color instead of a seam. First pass of the En Bref/Edito-Hero swap
     replaced BOTH stops with violet, which broke that match (teal leaves
     over a violet edge) and, since violet-on-violet barely shows a
     transition, made the banner read as flat instead of as a gradient —
     the two things this restores. Leaves are on the LEFT here, main
     color (now violet, was blue) stays at the 65% stop. */
  background: linear-gradient(90deg, #079295 0%, #74009b 65%);
}
.header-bref-1280 .container-14 {
  padding-top: 0;
}
.header-bref-1280 .div-block-39 {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.div-block-39-copy {
  flex: 1;
  width: 647px;
  margin-top: auto;
  margin-bottom: auto;
  overflow: hidden;
}

.icono-alternance {
  /* Was a generic stock illustration (colors-students-at-graduation-
     ceremony.png) that doesn't match desktop's own alternance.png —
     swapped to the same image used at every other breakpoint. */
  mix-blend-mode: normal;
  background-image: url('../images/alternance.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 390px;
  max-width: 390px;
  height: 310px;
  max-height: none;
  margin-top: -17px;
  margin-bottom: auto;
  overflow: hidden;
}

.container-18-copy {
  justify-content: space-around;
  align-items: center;
  max-width: 1038px;
  margin: auto;
  padding-top: 17px;
  padding-bottom: 0;
  display: flex;
  overflow: hidden;
}

.container-18-copy-copy {
  justify-content: space-around;
  align-items: center;
  max-width: 1038px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 26px;
  padding-bottom: 43px;
  display: flex;
  overflow: hidden;
}

.div-block-100-copy {
  width: 647px;
  margin: auto auto auto 0;
  overflow: hidden;
}

/* .quote-wrapper (the plain <div> around .quote-in, the quote text, and
   .quote-out) is the positioning anchor for the closing quote mark
   below — see .quote-out itself for why. */
.quote-wrapper {
  position: relative;
}

.quote-out {
  /* Was position:relative; top:-27px; left:691px — a fixed pixel offset
     from this image's own natural spot (right after the quote box, at
     the wrapper's left edge), tuned to land near the box's bottom-right
     corner ONLY at the exact desktop width it was measured at. Every
     narrower breakpoint needed its own separately-tuned left value
     (691px → 475px → 237px), and none of them could account for the
     quote text itself reflowing to a different number of lines at
     in-between widths — hence landing on top of the text sometimes.
     Anchored to the wrapper's own bottom-right corner instead (with
     .quote-wrapper as the positioned ancestor): right/bottom stay
     correct at any width, with no per-breakpoint tuning at all. */
  position: absolute;
  right: 30px;
  bottom: 6px;
  top: auto;
  left: auto;
}

.link-block-4 {
  margin-top: auto;
  margin-bottom: auto;
}

.image-20 {
  margin-right: 16px;
}

.header-bref-mobile {
  z-index: 8490;
  background-image: url('../images/FOND-orange.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 350px;
  margin-top: -48px;
  margin-bottom: auto;
  display: none;
  position: sticky;
  top: 102px;
  bottom: auto;
  overflow: hidden;
}

.header-gouvernance-mobile {
  z-index: 8500;
  background-image: url('../images/FOND-SECTION-GOUVERNANCE.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 350px;
  margin-top: auto;
  margin-bottom: auto;
  display: none;
  position: sticky;
  top: 102px;
  bottom: auto;
  overflow: hidden;
}

.header-diag-mobile {
  z-index: 8500;
  background-image: url('../images/FOND-SECTION-PDC.svg');
  background-position: 50%;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 670px;
  margin-top: auto;
  margin-bottom: auto;
  display: none;
  position: sticky;
  top: 102px;
  overflow: hidden;
}

.header-alternance-mobile {
  z-index: 7000;
  background-image: url('../images/FOND-SECTION-POEC.svg');
  background-position: 50% 40%;
  background-repeat: no-repeat;
  background-size: 100vw;
  justify-content: center;
  align-items: center;
  height: 350px;
  margin: auto;
  display: none;
  position: sticky;
  top: 102px;
  overflow: hidden;
}

.header-pdc-mobile {
  z-index: 7000;
  background-image: url('../images/FOND-SECTION-DIGNOSTIC.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100vw;
  justify-content: space-between;
  align-items: center;
  max-width: 100vw;
  height: 350px;
  margin: auto;
  display: none;
  position: sticky;
  top: 102px;
  overflow: hidden;
}

.header-poec-mobile {
  z-index: 7000;
  background-image: url('../images/FOND-SECTION-ALTERNANCE.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  max-width: 100vw;
  height: 370px;
  margin: auto;
  display: none;
  position: sticky;
  top: 102px;
  overflow: hidden;
}

.header-experimentation-mobile {
  z-index: 7000;
  background-image: url('../images/EXPERIMENTATION.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 420px;
  margin: auto;
  display: none;
  position: sticky;
  top: 102px;
  overflow: hidden;
}

.tooltip-open {
  z-index: 110;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 180px;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: absolute;
}

.div-block-100-copy {
  flex: 1;
  width: auto;
  margin-top: 42px;
  overflow: hidden;
}

.div-block-18-copy {
  background-color: var(--dark-slate-blue);
  background-color: var(--dark-slate-blue);
  width: 10px;
  height: 10px;
  position: relative;
  top: -5px;
  transform: rotate(45deg);
}

.div-block-arrow-top-tooltip {
  background-color: var(--dark-slate-blue);
  width: 10px;
  height: 10px;
  position: relative;
  top: -5px;
  transform: rotate(45deg);
}

.div-block-129 {
  display: none;
}

.equipe-1280 {
  /* was z-index:auto — same bug as the other 6 banners had: without an
     explicit value, position:relative alone doesn't open a local stacking
     context, so the leaf's negative z-index escapes to the page root. Now
     that the leaves are direct children of this section (matching every
     other banner) instead of the narrower .container-19, this needs to be
     the one containing the leaf's stacking, same as the others. */
  z-index: 0;
  /* Cyan-blue to green, pure CSS so the same domed-top treatment as the
     other 6 banners can be applied — the dome is on this rule directly
     (not a .banner-fill child) since this section's gradient spans its
     full height (map + address block included), not just a banner strip.
     #079295 matches the same cyan-teal used as every other banner's own
     edge color, for consistency across the page.
     Vertical (not diagonal): .equipe-leaf-cover sits as a flat #079295
     rectangle over the top 300px to hide the leaves at rest (see below) —
     a diagonal gradient's color band isn't uniform at a given depth across
     the full width, so it would visibly seam against that flat patch. A
     top-to-bottom gradient with a flat 0%-350px cyan plateau (comfortably
     past the cover's 300px) keeps that whole zone a single solid color,
     matching the cover exactly with no seam. */
  background-image: linear-gradient(180deg, #079295 0%, #079295 350px, #80d43b 100%);
  margin-top: -60px;
  margin-bottom: auto;
  padding-top: 0;
  border-radius: 100% 100% 0 0 / 40px 40px 0 0;
  display: block;
  position: relative;
}

.ville-mobile {
  clear: none;
  object-fit: fill;
  flex-direction: column;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  width: 250px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  left: -496px;
  overflow: visible;
}

.ville-mobile.lille {
  top: -257px;
  left: -378px;
  position: absolute;
  inset: 361px 0% 0% 3%;
}

.ville-mobile.caen {
  position: absolute;
  inset: 459px 0% 0% -32%;
}

.ville-mobile.bordeaux {
  position: absolute;
  inset: 689px 0% 0% -29%;
}

.ville-mobile.paris {
  position: absolute;
  inset: 479px 0% 0%;
}

.ville-mobile.nancy {
  position: absolute;
  inset: 474px 0% 0% 40%;
}

.ville-mobile.tours {
  position: absolute;
  inset: 575px 0% 0% -9%;
}

.ville-mobile.nantes {
  position: absolute;
  inset: 571px 0% 0% -36%;
}

.ville-mobile.toulouse {
  position: absolute;
  inset: 875px 0% 0% -1%;
}

.ville-mobile.ajaccio {
  position: absolute;
  inset: 881px 0% 0% 52%;
}

.ville-mobile.aix {
  position: absolute;
  inset: 828px 0% 0% 34%;
}

.ville-mobile.rennes {
  z-index: 1;
  position: absolute;
  inset: 524px 0% 0% -36%;
}

.ville-mobile.la-reunion {
  position: relative;
  inset: 152px 0% 0% 12%;
}

.ville-mobile.guyanne {
  position: relative;
  inset: 113px 0% 0% -13%;
}

.ville-mobile.guadeloupe {
  position: relative;
  inset: 71px 0% 0% 36%;
}

.ville-mobile.martinique {
  position: relative;
  inset: 193px 0% 0% -37%;
}

.ville-mobile.lyon {
  position: absolute;
  inset: 664px 0% 0% 24%;
}

.ville-mobile.dijon {
  position: absolute;
  inset: 689px 0% 0% -29%;
}

.container-18-copy-copy {
  justify-content: space-around;
  align-items: center;
  max-width: 1038px;
  margin: auto;
  padding-top: 76px;
  padding-bottom: 0;
  display: flex;
  overflow: hidden;
}

.ancre-bref {
  z-index: -1;
  height: 110%;
  position: absolute;
  inset: -102px 0% auto;
}

.ancre-gouvernance {
  z-index: -1;
  height: 100%;
  position: absolute;
  inset: -102px 0% auto;
}

.ancre-equipe-1280 {
  z-index: -70;
  height: 100%;
  position: absolute;
  inset: -102px 0% auto;
}

.ancre-alternance {
  /* -134px was a stale tuning from before the banner restructuring —
     landed 32px too low. -102px (same as .ancre-bref/.ancre-gouvernance,
     matching the fixed top bar's exact height) lands correctly. */
  z-index: -1;
  height: 106%;
  position: absolute;
  inset: -102px 0% auto;
}

.ancre-pdc {
  /* -90px landed 12px too high. -102px is correct (same fix as the
     others above). */
  z-index: -1;
  height: 100%;
  position: absolute;
  inset: -102px 0% auto;
}

.ancre-poec {
  /* -105px landed ~3px too high. -102px is correct. */
  z-index: -1;
  height: 101%;
  margin-top: 0;
  position: absolute;
  inset: -102px 0% auto;
}

.ancre-experimentation {
  z-index: -1;
  height: 110%;
  margin-top: 100px;
  position: absolute;
  inset: -290px 0% auto;
}

.ancre-diagnostic {
  /* margin-top:311px + inset-top:-368px landed 45px too high — a
     compounded, hard-to-reason-about stale offset. Dropped the
     margin-top hack; -102px (like every other anchor) still landed 20px
     too high here, so this section's positioned ancestor chain must
     differ slightly from the others' — -122px measured correct
     empirically via actual hash-navigation tests. */
  z-index: auto;
  height: 110%;
  display: block;
  position: absolute;
  inset: -122px 0% auto;
}

.div-block-137 {
  /* Now repeated between every nav item (not just after Edito) — the
     horizontal 5px margin is dropped since .nav-menu-3's own flex `gap`
     already spaces every item (including these separators) uniformly. */
  background-color: var(--dark-slate-blue);
  width: 1px;
  height: 20px;
  margin: auto 0;
  flex: none;
}

.ancre-equipe-mobile {
  z-index: -1;
  height: 100%;
  position: absolute;
  inset: -102px 0% auto;
}

.div-block-138, .image-27 {
  margin-right: 10px;
}

.grid-3-poec, .grid-3-pdc, .grid-3-alternance {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 20px;
  margin-bottom: 4px;
}

.header-experiementation-1280 {
  z-index: auto;
  background-image: url('../images/FOND-jaunevert.svg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  align-items: center;
  height: 400px;
  margin-top: -136px;
  margin-bottom: -90px;
  display: flex;
  position: relative;
}

.div-block-139 {
  flex-direction: row;
  justify-content: flex-end;
  width: 1038px;
  max-width: 1038px;
  margin: 20px auto auto;
  display: flex;
}

.div-block-140 {
  z-index: auto;
  width: 260px;
  margin-left: 0;
  margin-right: auto;
  padding-right: 20px;
  position: relative;
}

.div-block-141 {
  width: 180px;
  margin-left: auto;
  margin-right: auto;
}

.grid-4-alternance-2 {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 20px;
  margin-bottom: auto;
  padding-bottom: 10px;
  display: none;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.bold-text-9, .bold-text-21 {
  font-weight: 400;
}

.grid-3-zoom {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 20px;
  margin-bottom: 4px;
}

.bold-text-22 {
  font-family: Fraunces, sans-serif;
}

.bold-text-23 {
  color: var(--slate-violet);
}

.div-block-71-copy {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/ZIGZAG.png');
  background-position: 0 0, 50% 28%;
  background-size: auto, 200%;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
  overflow: visible;
}

.div-block-71-copy .grid-2 {
  grid-column-gap: 10px;
  padding-left: 0;
  padding-right: 0;
}

.header-chiffre-expe-edflex-copy {
  background-image: linear-gradient(#ffd9d7f3, #ffd9d7f3), url('../images/ZIGZAG.png');
  background-position: 0 0, 50% 69%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.puce-edito {
  padding-left: 0;
  position: relative;
}

.dropdown-toggle-3 {
  background-color: var(--old-lace);
  border-radius: 80px;
  justify-content: center;
  align-items: center;
  width: 325px;
  height: 85px;
  padding: 15px;
  display: flex;
}

.div-block-15-martinique {
  background-color: var(--dark-slate-blue);
  border-radius: 20px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  display: block;
  box-shadow: 0 0 10px -3px #00000080;
}

.bold-text-24, .bold-text-25 {
  font-family: Fraunces, sans-serif;
}

.bold-text-26 {
  color: var(--deep-pink-2);
  font-family: Fraunces, sans-serif;
}

.bold-text-27 {
  color: var(--deep-sky-blue);
}

.bold-text-28, .bold-text-29 {
  font-family: Fraunces, sans-serif;
}

.bold-text-31 {
  color: var(--indigo);
  font-family: Fraunces, sans-serif;
}

.bold-text-32 {
  font-family: Fraunces, sans-serif;
}

.bold-text-33 {
  color: var(--bleu);
}

.bold-text-34 {
  font-family: Fraunces, sans-serif;
}

.bold-text-35 {
  font-family: Fraunces, sans-serif;
  font-weight: 700;
}

.bold-text-36 {
  font-family: Fraunces, sans-serif;
}

.bold-text-37 {
  color: var(--light-coral);
}

.div-block-144 {
  outline-offset: 0px;
  outline: 3px #333;
}

.bold-text-40 {
  text-shadow: 0 0 20px var(--saddle-brown-2);
  mix-blend-mode: normal;
}

.bold-text-41 {
}

.bold-text-42 {
  -webkit-text-stroke-color: #ff7e95;
  font-family: Butler, sans-serif;
}

.bold-text-43 {
  font-family: Fraunces, sans-serif;
}

.bold-text-44 {
  color: var(--vert);
  font-family: Fraunces, sans-serif;
}

.bold-text-45 {
  font-family: Butler, sans-serif;
}

.bold-text-47, .bold-text-48 {
  font-family: Fraunces, sans-serif;
}

.bold-text-49 {
  text-shadow: 0 0 16px var(--saddle-brown-2);
}

.link-block-6 {
  background-color: #d50202;
}

.bold-text-50 {
  display: block;
}

.bold-text-51 {
  font-style: normal;
  text-decoration: none;
}

.div-block-145 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.div-block-146 {
  padding-top: 10px;
}

.text-block-3 {
  z-index: 1;
  color: var(--bleu-clair);
  margin-top: -454px;
  padding-left: 48px;
  font-family: Fraunces, sans-serif;
  /* Was 170px/260px line-height. Shrinking the header image (below) freed
     up room, but also raised the whole centered image+numeral group high
     enough that "2025" reached up through the nav bar (89999) and its
     85%-opaque white background — the numeral bleeding through read as
     "spilling into the menu". A smaller numeral needs less of that push
     upward to read clearly, easing the clash. */
  font-size: 145px;
  font-weight: 700;
  line-height: 225px;
  position: relative;
}

.image-28 {
  z-index: 20;
  /* Was full-size (538px, straight off the <img>'s own sizes attribute) —
     shrinking it doesn't just make the illustration smaller, it also
     shrinks how much of the "2025" numeral behind it the image's own
     height ends up swallowing (image height and its resulting vertical
     footprint scale down together), so more of the numeral shows above
     it. Client-requested: "réduit la taille de l'image du header pour
     que le 2025 soit plus lisible". Tablet (768-991px) already runs its
     own smaller 340px version for the same reason. */
  width: 400px;
  max-width: 400px;
  /* Was -67px. That shrink (538->400px) raised the centered image+numeral
     group enough for "2025" to poke up into the fixed nav bar above it —
     pushing the group back down clears the nav again without giving back
     the image-size win. */
  margin-top: 85px;
  position: relative;
}

.image-29 {
  max-width: 100%;
  margin: 0;
}

.bold-text-52 {
  color: var(--vert);
}

.image-30 {
  margin: 0;
}

.bold-text-53 {
  color: var(--deep-pink-2);
}

.image-31 {
  margin: 0;
  padding-left: 0;
}

.text-span-2 {
  color: var(--indigo);
}

.div-block-147 {
  display: flex;
}

.dropdown-toggle-2-copy {
  background-color: var(--slate-violet);
  border-radius: 80px;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 85px;
  padding: 15px;
  display: flex;
}

.dropdown-list-2-copy {
  top: 89px;
}

.dropdown-list-2-copy.w--open {
  z-index: -1;
  background-color: var(--slate-violet);
  border-bottom-right-radius: 42px;
  border-bottom-left-radius: 42px;
  padding: 22px 10px 6px;
  top: 51px;
  overflow: hidden;
  box-shadow: 0 4px 10px #0000001a;
}

.dropdown-list-2-copy.pdc-list.w--open {
  background-color: var(--lemon-chiffon);
  padding-top: 26px;
}

.dropdown-list-2-copy.poec-list {
  z-index: 1;
}

.dropdown-list-2-copy.poec-list.w--open {
  z-index: 10;
  background-color: var(--lavender);
  padding-top: 26px;
}

.grid-3 {
  grid-template-columns: 1fr 1fr;
}

.grid-2-zoom {
  grid-template-rows: auto;
  margin-top: 20px;
}

.div-zoom {
  background-color: var(--vert);
  background-image: none;
  background-position: 0 0;
  border-radius: 0;
  flex-direction: column;
  flex: 1;
  max-width: 1038px;
  height: 80px;
  margin: auto;
  display: flex;
}

.div-zoom.violet {
  background-color: var(--indigo);
}

.div-zoom.jaune {
  background-color: var(--orange-4);
  border-top: 6px #000;
}

.div-zoom.rose {
  background-color: var(--light-coral);
}

.div-zoom.lavande {
  background-color: var(--royal-blue);
}

.titre-zoom {
  text-align: center;
  margin: auto;
}

.h6-copy {
  color: var(--vert);
  -webkit-text-stroke-color: var(--deep-pink-2);
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}

.h6-copy.centered {
  color: var(--tomato);
  text-align: center;
  margin-bottom: 15px;
}

.h6-copy.white {
  color: var(--white);
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: Butler, sans-serif;
  font-size: 30px;
}

.nom-dom {
  color: #fff;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  padding: 40px 20px 40px 0;
  font-family: Butler, sans-serif;
  font-size: 30px;
  display: flex;
  overflow: visible;
}

.text-block-4 {
  color: var(--vert);
  font-family: Fraunces, sans-serif;
  font-weight: 700;
  line-height: 32px;
}

.cartedrom {
  border-radius: 10px;
  max-width: 493px;
  display: flex;
}

.grid-2-copy {
  grid-column-gap: 20px;
  opacity: 1;
  -webkit-text-fill-color: inherit;
  background-color: #0000;
  background-clip: border-box;
  border-radius: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  align-content: center;
  justify-content: center;
  place-items: center;
  width: 100%;
  max-width: 1038px;
  min-height: 130px;
  padding: 10px;
}

.grid-2-copy.vert {
  grid-column-gap: 20px;
}

.div-block-alternance-content-drom {
  border-style: none none solid;
  border-width: 2px;
  border-color: var(--indigo);
  background-color: #fff;
  border-radius: 0;
  max-width: 1038px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

.div-block-alternance-content-drom.cornerbas {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  display: block;
}

.div-block-alternance-content-dro {
  background-color: #fff;
  border-radius: 10px;
  max-width: 1038px;
  margin: 40px auto 0;
  padding: 20px 20px 40px;
}

.grid-4-alternance-copy {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 20px;
  margin-bottom: 4px;
}

.div-block-alternance-content-copy {
  background-color: #fff;
  border-radius: 10px;
  max-width: 1038px;
  margin: 40px auto 0;
  padding: 20px 20px 40px;
}

.grid-3-alternance-copy-copy {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 20px;
  margin-bottom: 4px;
}

.div-block-952 {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-zigzag.png');
  background-position: 0 0, 50% 19%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex: 1;
  max-width: 100%;
  margin: 20px auto auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.div-block-pdc-content-drom {
  border: 2px solid var(--orange-4);
  background-color: #fff;
  border-radius: 0;
  max-width: 1038px;
  margin: 0 auto auto;
  padding: 20px 20px 40px;
  position: relative;
}

.div-block-pdc1-content-drom-copy {
  border-style: none none solid;
  border-width: 2px;
  border-color: var(--orange-4);
  background-color: #fff;
  border-radius: 0;
  max-width: 1038px;
  margin: 0 auto auto;
  padding: 20px 20px 40px;
  position: relative;
}

.div-block-pdc1-content-drom-copy.cornerb {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.jaune {
  color: var(--orange-4);
  -webkit-text-stroke-color: var(--orange);
  font-family: Butler, sans-serif;
}

.div-block-expe-content-drom {
  border-style: none none solid;
  border-width: 2px;
  border-color: #ffb7b5;
  background-color: #fff;
  border-radius: 10px;
  max-width: 1038px;
  margin: 0 auto 24px;
  padding: 20px;
}

.rose {
  color: var(--light-coral);
}

.grid-4-alternance-copy {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 20px;
  margin-bottom: auto;
  padding-bottom: 10px;
}

.grid-2-poec-copy {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  margin-bottom: 4px;
}

.div-block-poec-content-drom {
  z-index: 300;
  border-style: none none solid;
  border-width: 2px;
  border-color: var(--royal-blue) var(--royal-blue) var(--pink2);
  background-color: #fff;
  border-radius: 0;
  max-width: 1038px;
  margin: 0 auto;
  padding: 20px;
  position: static;
}

.lavande {
  color: var(--royal-blue);
}

.lavande.rose {
  color: var(--rosefoncé);
}

.tabs-content {
  z-index: 5000;
  max-width: 1038px;
  overflow: visible;
}

.tabs {
  max-width: 1038px;
  margin-top: 39px;
  margin-left: auto;
  margin-right: auto;
}

.tab {
  background-color: var(--indigo);
  color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-weight: 700;
}

.tab.w--current {
  background-color: var(--white);
  color: var(--dark-slate-blue);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.tab.tabjaune {
  background-color: var(--gold-3);
}

.text-block-5, .text-block-6 {
  color: var(--dark-slate-blue);
}

.div-block-15-copy {
  background-color: var(--dark-slate-blue);
  border-radius: 20px;
  width: 270px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  display: block;
  box-shadow: 0 0 10px -3px #00000080;
}

.tabs-2 {
  z-index: 5000;
  max-width: 1038px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.tab-pane-tab-1 {
  margin-left: auto;
  margin-right: auto;
}

.tabs-content-2 {
  max-width: 1038px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

.tabs-3 {
  max-width: 1038px;
  margin-left: auto;
  margin-right: auto;
}

.tabs-4 {
  max-width: 1038px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}

.tabs-4.zindex800 {
  z-index: auto;
}

.tab-6 {
  background-color: var(--pink2);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-weight: 700;
}

.tab-6.w--current {
  background-color: var(--white);
}

.tab-6.tabjaune {
  background-color: var(--gold-3);
}

.tab-5 {
  background-color: var(--dark-orchid);
  color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-weight: 700;
}

.tab-5.w--current {
  background-color: var(--white);
  color: var(--dark-slate-blue);
}

.tab-5.tabjaune {
  background-color: var(--gold-3);
}

.tab-4 {
  background-color: var(--orange-4);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-weight: 700;
}

.tab-4.w--current {
  background-color: var(--white);
}

.tab-4.tabjaune {
  background-color: var(--gold-3);
}

.tabs-menu {
  max-width: 1038px;
  margin-left: auto;
  margin-right: auto;
}

.tab-link-tab-1 {
  background-color: var(--vert);
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab-link-tab-1.w--current {
  color: var(--dark-slate-blue);
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.text-block-7, .text-block-8 {
  font-weight: 700;
}

.tab-link-tab-2 {
  background-color: var(--vert);
  color: var(--white);
  border-radius: 10px 10px 0 0;
}

.tab-link-tab-2.w--current {
  background-color: var(--white);
  color: var(--dark-slate-blue);
}

.text-block-9, .text-block-10 {
  color: var(--dark-slate-blue);
}

.bold-text-55 {
  font-family: Fraunces, sans-serif;
  position: static;
}

.bold-text-56, .bold-text-57, .bold-text-58 {
  font-family: Fraunces, sans-serif;
}

.image-32 {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.image-34 {
  margin: 0;
}

.header-chiffre-poec-nat {
  background-image: linear-gradient(to bottom, #a840d9cc, #a840d9cc), url('../images/ZIGZAG.png');
  background-position: 0 0, 50% 21%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.tabs-menu-2 {
  z-index: 0;
}

.tabs-content-3 {
  overflow: visible;
}

.tabs-content-4 {
  z-index: 2000;
  overflow: visible;
}

.tabs-content-5 {
  z-index: 1000;
  overflow: visible;
}

.tabs-content-6 {
  z-index: 4000;
  overflow: visible;
}

.image-35 {
  margin-right: 10px;
}

.div-block-90-a {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-vagues.png');
  background-position: 0 0, 50% 40%;
  background-size: auto, 200%;
  border-radius: 10px;
  max-width: 493px;
  display: flex;
}

.div-block-71-a {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-vagues.png');
  background-position: 0 0, 50% 28%;
  background-size: auto, 200%;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
  overflow: visible;
}

.div-block-90-b {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-zigzag.png');
  background-position: 0 0, 50% 40%;
  background-size: auto, 200%;
  border-radius: 10px;
  max-width: 493px;
  display: flex;
}

.div-block-71-b {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-vagues.png');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
}

.div-block-71-bb {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-zigzag.png');
  background-position: 0 0, 50% 28%;
  background-size: auto, 200%;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
  overflow: visible;
}

.div-block-71-bbb {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-zigzag.png');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
}

.div-block-90-c {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-cercles.png');
  background-position: 0 0, 50% 40%;
  background-size: auto, 200%;
  border-radius: 10px;
  max-width: 493px;
  display: flex;
}

.div-block-71-cc {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-cercles.png');
  background-position: 0 0, 50% 28%;
  background-size: auto, 200%;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
  overflow: visible;
}

.div-block-71-ccc {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-cercles.png');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
}

.div-block-90-d {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-hexagones.png');
  background-position: 0 0, 50% 40%;
  background-size: auto, 200%;
  border-radius: 10px;
  max-width: 493px;
  display: flex;
}

.div-block-71-dd {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-hexagones.png');
  background-position: 0 0, 50% 28%;
  background-size: auto, 200%;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
  overflow: visible;
}

.div-block-71-ddd {
  background-image: linear-gradient(#ffcd20e6, #ffcd20e6), url('../images/texture-hexagones.png');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  margin: auto;
  display: flex;
}

.div-block-71-ddd .w-layout-grid {
  grid-template-columns: auto auto;
  grid-auto-flow: row;
  justify-content: center;
  column-gap: 60px;
}

.header-chiffre-apprentissage-acopy {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-vagues.png');
  background-position: 0 0, 50% 37%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-apprentissage-b {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-zigzag.png');
  background-position: 0 0, 50% 37%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-apprentissage-c {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-cercles.png');
  background-position: 0 0, 50% 37%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-apprentissage-d {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-hexagones.png');
  background-position: 0 0, 50% 37%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.div-block-95-c {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-cercles.png');
  background-position: 0 0, 50% 19%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex: 1;
  max-width: 100%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.div-block-952-c {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-cercles.png');
  background-position: 0 0, 50% 19%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex: 1;
  max-width: 100%;
  margin: 20px auto auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.div-block-95-d {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-hexagones.png');
  background-position: 0 0, 50% 19%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex: 1;
  max-width: 100%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.div-block-952-d {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/texture-hexagones.png');
  background-position: 0 0, 50% 19%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex: 1;
  max-width: 100%;
  margin: 20px auto auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-chiffre-pdc-a {
  background-image: linear-gradient(to bottom, #9b7fc7e6, #9b7fc7e6), url('../images/texture-vagues.png');
  background-position: 0 0, 50% 38%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-pdc-b {
  background-image: linear-gradient(to bottom, #9b7fc7e6, #9b7fc7e6), url('../images/texture-zigzag.png');
  background-position: 0 0, 50% 38%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-pdc-c {
  background-image: linear-gradient(to bottom, #9b7fc7e6, #9b7fc7e6), url('../images/texture-cercles.png');
  background-position: 0 0, 50% 38%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-pdc-d {
  background-image: linear-gradient(to bottom, #9b7fc7e6, #9b7fc7e6), url('../images/texture-hexagones.png');
  background-position: 0 0, 50% 38%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-expe-edflex-a {
  background-image: linear-gradient(#ffd9d7f3, #ffd9d7f3), url('../images/texture-vagues.png');
  background-position: 0 0, 50% 69%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-expe-edflex-b {
  background-image: linear-gradient(#ffd9d7f3, #ffd9d7f3), url('../images/texture-zigzag.png');
  background-position: 0 0, 50% 69%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-expe-edflex-c {
  background-image: linear-gradient(#ffd9d7f3, #ffd9d7f3), url('../images/texture-cercles.png');
  background-position: 0 0, 50% 69%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-expe-edflex-d {
  background-image: linear-gradient(#ffd9d7f3, #ffd9d7f3), url('../images/texture-hexagones.png');
  background-position: 0 0, 50% 69%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-poec-a {
  background-image: linear-gradient(to bottom, #a840d9cc, #a840d9cc), url('../images/texture-vagues.png');
  background-position: 0 0, 50% 21%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-poec-b {
  background-image: linear-gradient(to bottom, #a840d9cc, #a840d9cc), url('../images/texture-zigzag.png');
  background-position: 0 0, 50% 21%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.header-chiffre-poec-copy {
  background-image: linear-gradient(to bottom, #a840d9cc, #a840d9cc), url('../images/texture-cercles.png');
  background-position: 0 0, 50% 21%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1038px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.div-block-95-a {
  background-image: linear-gradient(to bottom, #eb3290e6, #eb3290e6), url('../images/ZIGZAG.png');
  background-position: 0 0, 50% 19%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border-radius: 10px;
  flex: 1;
  max-width: 100%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.tabs-menu-6 {
  z-index: 300;
}

.dropdown-toggle-2-copy {
  z-index: 3000;
  background-color: var(--slate-violet);
  border-radius: 80px;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 85px;
  padding: 15px;
  display: flex;
}

.dropdown-toggle-2-copy.pdc-drop {
  background-color: var(--roseclair);
  width: 325px;
  margin-left: auto;
  margin-right: auto;
}

.dropdown-toggle-2-copy.pdc-drop.terco {
  background-color: var(--roseclair);
}

.dropdown-toggle-2-copy.poec-drop {
  background-color: var(--lavender);
  width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.dropdown-toggle-2-copy.poec-drop.duo {
  z-index: 2;
}

.bold-text-59 {
  font-weight: 400;
}

.bold-text-60, .bold-text-61, .bold-text-62 {
  font-size: 20px;
}

@media screen and (min-width: 1440px) {
  .h2 {
    margin-top: 0;
  }

  .subtitle {
    color: var(--bleu-clair);
    -webkit-text-stroke-color: var(--dark-slate-blue);
  }

  .bouton-primaire.none {
    background-color: var(--white);
  }

  .conjonction-or {
    -webkit-text-stroke-color: var(--deep-pink-2);
  }

  .quote-in {
    filter: blur();
    mix-blend-mode: normal;
  }

  .dropdown-list.college-salarie.w--open {
    border-top-right-radius: 20px;
  }

  .nav-menu.gouv.w--current, .nav-menu.nav-edito.w--current {
    color: var(--bleu);
  }

  .flex-container {
    justify-content: space-between;
    max-width: 1230px;
  }

  .hero-image-mask {
    mix-blend-mode: normal;
    order: -1;
  }

  .link:hover {
    color: var(--dark-slate-blue);
  }

  .link.top {
    color: var(--alice-blue);
  }

  .link.top:hover {
    color: #fff;
    font-weight: 500;
  }

  .div-block-edito-wrapper {
    color: var(--bleu);
  }

  .icono-en-bref {
    mix-blend-mode: normal;
    background-image: url('../images/colors-business-person-developing-strategy-and-planning.png');
  }

  .header-gouvernance-1280 {
    background-position: 50% 0;
  }

  .div-block-67 {
    margin-top: 0;
    padding-top: 1px;
  }

  .div-block-67.espace {
    margin-top: 0;
  }

  .header-diag-1280-ok {
    height: auto;
  }

  .div-block-69 {
    mix-blend-mode: normal;
    background-image: url('../images/colors-teamwork-of-company-employees.png');
  }

  .header-alternance-1280 {
    height: auto;
  }

  .dropdown-toggle-2.pdc-drop.w--open {
    z-index: 10;
  }

  .dropdown-toggle-2.pdc-drop.terco.w--open {
    z-index: 20;
  }

  .dropdown-list-2.pdc-list.w--open {
    z-index: 1;
  }

  .header-pdc-1280 {
    height: auto;
  }

  .icono-pdc {
    mix-blend-mode: normal;
    background-image: url('../images/colors-artificial-intelligence-and-cloud-computing.png');
    width: 350px;
    height: 400px;
    margin-top: -90px;
  }

  .header-pdc-1280 .div-block-67 {
    padding-top: 0;
  }

  .header-poec-1280 {
    height: auto;
  }

  .header-poec-1280 .div-block-67 {
    padding-top: 0;
  }

  .icono-poec {
    mix-blend-mode: normal;
    background-image: url('../images/colors-business-planning-and-time-management.png');
    width: 370px;
  }

  .icono-experimentation {
    mix-blend-mode: normal;
    background-image: url('../images/colors-employee-giving-a-business-presentation.png');
    width: 340px;
  }

  .icono-equipe {
    mix-blend-mode: normal;
    background-image: url('../images/equipe2.png');
  }

  .icono-gouernance {
    mix-blend-mode: normal;
    background-image: url('../images/colors-cryptocurrency-market-and-exchange-on-phone-screen.png');
  }

  .header-bref-1280 {
    z-index: 90;
    background-position: 50% 0;
  }

  .icono-alternance {
    /* Same stray-image bug as the ≤479px rule: this ≥1440px override was
       still on the old stock photo instead of alternance.png. */
    mix-blend-mode: normal;
    background-image: url('../images/alternance.png');
    width: 380px;
    max-width: 370px;
  }

  .div-block-100-copy {
    margin-top: 21px;
    padding-top: 0;
    position: relative;
  }

  .equipe-1280 {
    background-position: 50% 0;
    background-size: cover;
  }

  .header-experiementation-1280 {
    height: 400px;
    margin-top: -172px;
  }

  .text-block-3 {
    z-index: 10;
    color: var(--bleu-clair);
    margin-top: -378px;
    font-family: Lobster, sans-serif;
    font-size: 230px;
    line-height: 210px;
    position: relative;
  }

  .image-28 {
    z-index: 400;
    position: relative;
  }

}

@media screen and (max-width: 991px) {
  .grid-4-framing-image {
    grid-template-columns: 1fr;
    grid-template-areas: "left-top" "right-top" "image" "left-bottom" "right-bottom";
  }

  .stat-image {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .div-block-57 {
    flex-direction: column;
  }

  .div-block-58 {
    width: 100%;
    height: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .div-block-63,
  .div-block-63.col-reconversion,
  .div-block-64 {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .h1 {
    margin-right: 23px;
    font-size: 32px;
    line-height: 40px;
  }

  .h5 {
    padding-left: 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .subtitle {
    margin-top: 27px;
    font-size: 20px;
  }

  .bullet {
    font-size: 13px;
  }

  .bouton-primaire.none {
    width: 120px;
  }

  .dropdown-list.w--open {
    background-color: var(--slate-violet);
  }

  .nav-menu {
    margin-top: 17px;
    margin-bottom: 17px;
    display: block;
  }

  .hero-header {
    height: 530px;
  }

  .hero-image-mask {
    flex: 0 auto;
    width: 340px;
    height: 320px;
  }

  .brand-2 {
    width: 175px;
    min-width: auto;
    max-width: 175px;
    margin-top: -32px;
    padding-left: 9px;
    padding-right: 9px;
    position: absolute;
    inset: -48% auto auto 3%;
  }

  .brand-2.w--current {
    margin-top: -25px;
  }

  .container-4 {
    flex-direction: column;
    justify-content: flex-start;
  }

  .nav-menu-3 {
    background-color: #fffc;
    flex-direction: row;
    align-items: center;
    width: 768vw;
    max-width: 768px;
    max-height: none;
    margin-left: 0;
    margin-right: -60px;
    display: block;
    position: absolute;
    inset: 99% 0% auto;
    overflow: visible;
  }

  .div-block-23 {
    position: absolute;
    inset: 0% auto 0% 28%;
  }

  .menu-button {
    height: 62px;
    max-height: 62px;
    margin-left: auto;
    margin-right: 0;
    display: block;
    top: auto;
  }

  .menu-button.w--open {
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .menu-burger {
    margin-left: auto;
    margin-right: auto;
    padding-top: 4px;
    padding-bottom: 2px;
  }

  .icono-en-bref {
    width: 220px;
    margin-left: -70px;
  }

  .container-11 {
    flex-flow: row;
    justify-content: center;
    align-items: flex-start;
    padding-left: 40px;
    padding-right: 10px;
  }

  .div-block-46 {
    align-items: flex-start;
  }

  .div-block-47 {
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 0;
  }

  .implantation-chiffres {
    height: auto;
  }

  .implantation-chiffres.height {
    height: 148px;
  }

  .container-14 {
    padding-left: 49px;
  }

  .div-block-67 {
    padding-top: 89px;
    padding-left: 49px;
  }

  .div-block-67.espace {
    padding-top: 0;
  }

  .header-diag-1280-ok {
    height: auto;
  }

  .div-block-70 {
    height: 100%;
    padding-left: 48px;
  }

  .header-alternance-1280 {
    height: auto;
  }

  .div-block-header-content {
    height: 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .header-alternance-1280 .div-block-67 {
    width: auto;
    max-width: 55%;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0;
  }

  .header-alternance-1280 .image-32 {
    width: 40%;
    max-width: 40%;
    height: auto;
    flex: 0 0 auto;
  }

  .div-block-91 {
    grid-column-gap: 19px;
    grid-row-gap: 19px;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .dropdown-toggle-2 {
    z-index: 1;
    clear: none;
    flex-flow: column;
    width: 190px;
    height: 81px;
    position: relative;
  }

  .dropdown-toggle-2.pdc-drop {
    flex-flow: row;
    width: 230px;
    height: 70px;
  }

  .dropdown-toggle-2.pdc-drop.terco {
    width: 210px;
  }

  .dropdown-toggle-2.poec-drop {
    width: 340px;
  }

  .dropdown-toggle-2.poec-drop.duo {
    width: 330px;
  }

  .dropdown.entreprise.zpo, .dropdown.entreprise.zpos, .dropdown.age.zpos {
    z-index: 400;
  }

  .dropdown.contrat.zpo {
    z-index: 400;
    position: relative;
    inset: 0% auto 0% 0%;
  }

  .dropdown.niveau {
    flex: 0 auto;
  }

  .text-block-2 {
    z-index: 0;
    width: auto;
    position: relative;
  }

  .dropdown-list-2.w--open {
    z-index: 0;
    position: absolute;
  }

  .div-block-103 {
    padding-left: 49px;
  }

  .div-block-117 {
    margin-left: 12px;
  }


  .div-block-100-copy {
    padding-left: 49px;
  }

  .header-experiementation-1280 {
    height: 510px;
  }

  .div-block-139 {
    width: 100%;
    display: flex;
  }

  .text-block-3 {
    margin-top: -357px;
    font-size: 109px;
  }

  .image-28 {
    margin-top: -56px;
  }

  .div-block-147 {
    z-index: 0;
    grid-column-gap: 19px;
    grid-row-gap: 19px;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .dropdown-toggle-2-copy.zpositif {
    z-index: 7;
  }

  .dropdown-list-2-copy.w--open {
    position: absolute;
    overflow: visible;
  }

  .dropdown-toggle-2-copy {
    z-index: 1;
    clear: none;
    flex-flow: column;
    width: 190px;
    height: 81px;
    position: relative;
  }

  .dropdown-toggle-2-copy.pdc-drop {
    flex-flow: row;
    width: 230px;
    height: 70px;
  }

  .dropdown-toggle-2-copy.pdc-drop.terco {
    width: 210px;
  }

  .dropdown-toggle-2-copy.poec-drop {
    width: 340px;
  }

  .dropdown-toggle-2-copy.poec-drop.duo {
    width: 330px;
  }
}

@media screen and (max-width: 767px) {
  .hero-header {
    padding: 40px 20px;
  }

  .flex-container {
    flex-direction: column;
  }

  .hero-image-mask {
    order: -1;
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .h1 {
    margin-left: auto;
    margin-right: auto;
    font-size: 25px;
    line-height: 29px;
  }

  .h2 {
    color: var(--white);
    margin-top: 7px;
    margin-left: 0;
    margin-right: auto;
    font-size: 32px;
    line-height: 38px;
  }

  .h2.bleu {
    color: var(--color);
    -webkit-text-stroke-color: var(--saddle-brown);
  }

  .h3 {
    font-size: 18px;
    line-height: 20px;
  }

  .h4 {
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 23px;
  }

  .h5 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .h6 {
    text-align: left;
  }

  .h6.white {
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 18px;
    line-height: 18px;
  }

  .desc-chiffre-cl-2 {
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .teti-re {
    margin-bottom: 20px;
  }

  .subtitle {
    margin-top: 69px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
  }

  .soustitre-6-texte-edito-v2 {
    max-width: 90vw;
    margin-top: 10px;
    font-size: 12px;
    line-height: 16px;
  }

  .soustitre-6-texte-edito-v2.puceedito {
    padding-left: 10px;
  }

  .chiffre-cl-2 {
    width: 100%;
    margin: auto;
    font-size: 39px;
  }

  .fonction {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .chapo-section {
    color: var(--white);
    max-width: 90vw;
    margin-top: 0;
    padding-right: 0;
    font-size: 14px;
    line-height: 22px;
  }

  .chapo-section.bleu {
    color: var(--color);
  }

  .paragraphe-standard.footer {
    flex: 1;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .quote {
    font-size: 17px;
    line-height: 22px;
  }

  .bouton-primaire {
    text-align: center;
    width: 113px;
  }

  .bouton-primaire.none {
    flex: 1;
    align-self: auto;
    margin-bottom: 20px;
    margin-right: auto;
    position: static;
  }

  .conjonction-or {
    color: var(--vert);
  }

  .quote-in {
    margin-left: auto;
    margin-right: auto;
  }

  .dropdown-list.college.w--open {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .dropdown-list.college-salarie.w--open {
    flex-direction: column;
    width: 100%;
  }

  .ca_drop_categorie {
    color: var(--deep-pink-2);
  }

  .grid-2 {
    grid-row-gap: 40px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .div-block-8 {
    width: 30px;
    height: 2px;
  }

  .div-block-10 {
    display: flex;
  }

  .ville.tooltip-open {
    display: none;
  }

  .ville.tooltip-open.reunion {
    width: 210px;
    height: auto;
    margin-left: auto;
    display: none;
    position: absolute;
    top: -95px;
    left: 0;
  }

  .ville.tooltip-open.martinique-bloc {
    width: 200px;
    display: none;
    left: 57px;
  }

  .ville.tooltip-open.corse {
    width: 189px;
    display: none;
    top: -50px;
    left: -124px;
  }

  .ville.tooltip-open.nord {
    display: none;
    top: -6px;
  }

  .ville.lille {
    position: absolute;
    top: -11px;
    left: -1%;
  }

  .ville.caen {
    width: 60px;
    position: absolute;
    top: 30px;
    left: -52%;
  }

  .ville.bordeaux {
    width: 90px;
    position: absolute;
    top: 154px;
    left: -48%;
  }

  .ville.paris {
    position: absolute;
    top: 46px;
  }

  .ville.nancy {
    width: 62px;
    position: absolute;
    top: 48px;
    left: 69%;
  }

  .ville.tours {
    position: absolute;
    top: 86px;
    left: -14%;
  }

  .ville.nantes {
    width: 80px;
    position: absolute;
    top: 107px;
    left: -58%;
  }

  .ville.toulouse {
    position: absolute;
    top: 231px;
  }

  .ville.ajaccio {
    width: 70px;
    position: absolute;
    top: 260px;
    left: 78%;
  }

  .ville.aix {
    width: 90px;
    position: absolute;
    top: 205px;
    left: 47%;
  }

  .ville.rennes {
    width: 80px;
    position: absolute;
    top: 62px;
    left: -61%;
  }

  .ville.la-reunion {
    top: 560px;
    bottom: -12%;
    left: -4%;
  }

  .ville.guyanne {
    top: 325px;
    left: -3%;
  }

  .ville.guadeloupe {
    z-index: 1;
    top: 598px;
    left: -4%;
  }

  .ville.martinique {
    z-index: 1;
    top: 155px;
    left: 3%;
  }

  .ville.lyon {
    width: 50px;
    position: absolute;
    top: 138px;
    left: 38%;
  }

  .ville.guadeloupe {
    top: 560px;
    bottom: -12%;
    left: -4%;
  }

  .ville.dijon, .ville.paris, .ville.tours {
    width: 50px;
    position: absolute;
    top: 138px;
    left: 38%;
  }

  .nom-ville {
    font-size: 12px;
    line-height: 12px;
  }

  .nom-ville.tooltip-trigger.arrow-top {
    z-index: 110;
  }

  .adresse, .div-block-18 {
    display: block;
  }

  .div-block-18.none {
    display: none;
  }

  .nav-menu {
    color: #fff;
    width: 100%;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
    font-weight: 400;
  }

  .nav-menu:hover {
    color: #fff;
    font-weight: 400;
  }

  .nav-menu:active {
    color: var(--light-sky-blue);
    font-weight: 500;
  }

  .nav-menu.w--current {
    color: var(--bleu);
  }

  .nav-menu.gouv {
    width: 100%;
  }

  .nav-menu.gouv:hover {
    color: #fff;
    font-weight: 400;
  }

  .nav-menu.gouv:active {
    color: var(--light-sky-blue);
    font-weight: 500;
  }

  .nav-menu.gouv.none {
    display: block;
  }

  .nav-menu.nav-edito {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .nav-menu.nav-edito:hover {
    color: #fff;
    font-weight: 400;
  }

  .nav-menu.nav-edito:active {
    color: var(--light-sky-blue);
    font-weight: 500;
  }

  .hero-header {
    background-position: 50% 100%;
    background-size: cover;
    width: 100vw;
    /* Was 634px — tight enough that even at 375px (where this was
       always tuned) the title block's own natural height still spilled
       ~32px past it; the .image-28 width cap above coincidentally makes
       375px's overflow marginally worse (340px is a hair wider than the
       ~331px it rendered at natively). A bit of headroom clears every
       width in this range instead of relying on a knife's-edge fit. */
    height: 674px;
    padding-bottom: 0;
  }

  .flex-container {
    max-width: 95vw;
  }

  .hero-image-mask {
    background-size: contain;
    width: 310px;
    height: 270px;
    margin-top: -47px;
  }

  .brand-2 {
    height: 80px;
    max-height: 70px;
    margin-top: auto;
    margin-bottom: auto;
    top: auto;
  }

  .brand-2.w--current {
    margin-top: 0;
  }

  .image-6 {
    max-width: 90%;
    height: 100%;
  }

  .navbar-2 {
    width: 100vw;
    padding-left: 0;
    padding-right: 0;
    top: 0;
  }

  .nav-menu-3 {
    background-color: #004271e6;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 31px;
    position: relative;
    top: 60px;
  }

  .section-2 {
    width: 100vw;
    display: none;
  }

  .div-block-23 {
    flex: 0 auto;
    order: 1;
    display: none;
    overflow: visible;
  }

  .div-block-24 {
    position: absolute;
    inset: 0% 0% 0% auto;
  }

  .link {
    padding-top: 13px;
    display: block;
    position: static;
    inset: 0% 0% 0% auto;
  }

  .link:hover {
    color: var(--alice-blue);
  }

  .menu-button {
    flex: 1;
    justify-content: center;
    align-items: center;
    max-width: 62px;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
  }

  .menu-button.w--open {
    background-color: var(--dark-slate-blue);
    width: 62px;
    margin-left: auto;
    margin-right: auto;
  }

  .menu-burger {
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: static;
  }

  .container-6 {
    flex-direction: column;
    justify-content: center;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .edito-allais {
    text-align: center;
    flex-direction: column;
    max-width: 45vw;
    margin: auto;
    display: block;
  }

  .nom-edito {
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-30 {
    justify-content: center;
    align-items: flex-start;
    max-width: 90vw;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .spacer {
    display: none;
  }

  .div-block-edito-wrapper {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 256px;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .soustitre-6-texte-edito-v1 {
    font-size: 12px;
    line-height: 18px;
  }

  .container-8 {
    flex-direction: column;
  }

  .div-block-38 {
    width: 85vw;
    max-width: 90vw;
    margin-top: -13px;
    margin-left: auto;
    margin-right: auto;
  }

  .l-opcommerce-en-bref {
    margin-top: auto;
    position: relative;
  }

  .div-block-39 {
    flex: 0 auto;
    width: 95vw;
    max-width: 90vw;
    margin: auto;
  }

  .icono-en-bref {
    background-image: url('../images/yogi.png');
    background-position: 0 0;
    background-size: cover;
    flex: 0 auto;
    order: -1;
    width: 70vw;
    max-width: 90vw;
    height: 70vw;
    max-height: 90vw;
    margin-left: auto;
    margin-right: auto;
    position: static;
  }

  /* max-width:100% (was 95vw, inherited from the base rule) + explicit
     side padding, same fix as tablet: full-width colored background,
     content still kept off the screen edge. */
  .div-block-42 {
    max-width: 100%;
    margin-top: auto;
    padding-top: 40px;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .container-11 {
    flex-direction: column;
    margin-top: -34px;
    padding-left: 10px;
  }

  .div-block-43 {
    justify-content: flex-start;
    align-items: center;
    max-width: 90vw;
  }

  .div-block-46, .div-block-47 {
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .bref-chiffres {
    width: 90vw;
    margin-bottom: 20px;
  }

  .implantation-chiffres.implentationmobile {
    height: 100px;
    padding-top: 12px;
    padding-bottom: 11px;
  }

  .implantation-chiffres.height {
    height: auto;
  }

  .container-12 {
    flex-direction: column;
    max-width: 1038%;
    position: static;
  }

  .container-13 {
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .div-block-50 {
    width: auto;
    max-width: 90vw;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-51 {
    flex: 1;
    width: 100%;
    max-width: none;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
  }

  .div-block-52 {
    max-width: 100%;
  }

  .la-gouvernanceet-les-chiffres-cl-s {
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
  }

  .container-14 {
    flex-direction: column;
    max-width: 90vw;
    margin-top: -18px;
    padding-top: 0;
    padding-left: 0;
  }

  .header-gouvernance-1280 {
    width: 100vw;
    height: 470px;
    padding-top: 35px;
    display: none;
    position: relative;
    top: auto;
  }

  .div-block-55 {
    max-width: 100%;
    margin-top: auto;
    padding: 40px 20px 5px;
  }

  .div-block-57 {
    flex-direction: column;
  }

  .div-block-58 {
    width: 100%;
    height: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .div-block-59 {
    flex: 0 auto;
    align-self: auto;
    width: 90vw;
    max-height: 90vw;
    margin-bottom: 20px;
    margin-right: auto;
    position: static;
  }

  .div-block-60 {
    flex-direction: column;
    max-width: 90vw;
    margin-left: auto;
    overflow: visible;
  }

  .div-block-66 {
    max-width: 90vw;
  }

  .grid-3-diagnostic {
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 1fr;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .grid-4-framing-image {
    grid-template-columns: 1fr;
    grid-template-areas: "left-top" "right-top" "image" "left-bottom" "right-bottom";
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .stat-image {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .module-chiffre-b-r {
    width: 100%;
  }

  .module-chiffre-b-r.fdphoto {
    height: 150px;
  }

  .module-chiffre-r-r {
    width: 100%;
  }

  .les-diagnostics-accompagnements {
    margin-top: 0;
    margin-bottom: auto;
    position: relative;
    top: auto;
  }

  .div-block-67 {
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    padding-left: 0;
  }

  .header-diag-1280-ok {
    background-repeat: no-repeat;
    background-size: auto 105vh;
    flex-direction: column;
    justify-content: flex-start;
    height: 900px;
    margin-top: -85px;
    padding-top: 0;
    display: none;
    position: relative;
    top: auto;
    overflow: visible;
  }

  .div-block-69 {
    background-image: url('../images/search.png');
    background-repeat: no-repeat;
    background-size: contain;
    order: -1;
    width: 70vw;
    max-width: none;
    height: 70vw;
    max-height: none;
    overflow: visible;
  }

  .div-block-70 {
    flex-direction: column;
    justify-content: flex-start;
    max-width: 90vw;
    max-height: none;
    margin-top: auto;
    padding-left: 0;
    position: static;
    top: auto;
    overflow: visible;
  }

  .div-block-diagnostic-wrapper {
    max-width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 12px;
    padding-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .div-block-dignostic-content {
    max-width: 90vw;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-dignostic-content.nocornerb {
    border-top: 1px solid var(--vert);
    border-top-right-radius: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .div-block-71 {
    flex-direction: column;
    width: 100%;
    max-width: none;
    display: block;
  }

  .div-block-72 {
    width: 70vw;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .module-chiffre-b-j, .module-chiffre-j-j {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .chiffre-cl-or {
    line-height: 30px;
  }

  .div-block-90 {
    flex-direction: column;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .header-chiffre-gouvernance {
    border-radius: 10px;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .header-chiffre-diagnostic-2-col {
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    height: auto;
    max-height: none;
    display: block;
  }

  .ligne-or {
    width: 100%;
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
  }

  .link-block-2 {
    z-index: 3000;
    bottom: 2vh;
    right: 2vw;
  }

  .grid-2-diagnostic {
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
  }

  .alternance {
    margin-top: auto;
    position: relative;
    top: auto;
  }

  .header-alternance-1280 {
    background-position: 50% 0;
    background-size: cover;
    flex-direction: column;
    height: 50vh;
    display: none;
    position: relative;
    top: auto;
  }

  .div-block-header-content {
    flex-direction: column;
    order: 1;
    width: 100%;
    max-width: 90vw;
    height: auto;
    margin-top: auto;
    padding-top: 0;
    display: flex;
    position: static;
  }

  .div-block-alternance-wrapper {
    max-width: 100%;
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .div-block-alternance-content {
    border-top: 1px solid var(--royal-blue);
    border-top-right-radius: 0;
    flex-direction: column;
    align-items: center;
    width: 90vw;
    max-width: none;
    margin-top: 0;
    padding-top: 18px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
  }

  .header-chiffre-apprentissage {
    max-width: 100%;
    height: auto;
    padding: 10px 20px;
    display: block;
  }

  .royal-blue {
    max-width: 90vw;
    font-family: Butler, sans-serif;
  }

  .grid-2-alternance {
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .module-chiffre-b-rb {
    width: 100%;
  }

  .module-chiffre-rb-rb {
    align-items: stretch;
    width: 100%;
  }

  .ligne-royal-blue {
    width: 85vw;
    /* The line itself already separates the two stat groups — the 20px
       margin on both sides doubled up with the neighboring grids' own
       20px margins, leaving ~65px of dead space around a divider whose
       whole job is to BE the separation. Tightened so the line still
       reads as a divider without the redundant gap. */
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .grid-4-alternance {
    grid-template-rows: 1fr auto auto auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .div-block-91 {
    z-index: 50;
    flex-direction: column;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    place-items: center;
    width: 100%;
    display: block;
    position: relative;
  }

  .dropdown-toggle-2 {
    width: 100%;
    max-width: none;
    height: 85px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .dropdown-toggle-2.pdc-drop {
    z-index: 0;
    width: 100%;
    max-width: none;
  }

  .dropdown-toggle-2.pdc-drop.w--open {
    z-index: 1;
  }

  .dropdown-toggle-2.pdc-drop.z1 {
    z-index: 4;
  }

  .dropdown-toggle-2.pdc-drop.z1.w--open {
    z-index: 20;
  }

  .dropdown-toggle-2.pdc-drop.terco, .dropdown-toggle-2.poec-drop {
    width: 100%;
  }

  .dropdown-toggle-2.poec-drop.w--open {
    z-index: 2;
  }

  .dropdown-toggle-2.poec-drop.duo {
    z-index: 0;
    width: 100%;
  }

  .icon-3 {
    z-index: 0;
  }

  .dropdown {
    z-index: auto;
    flex: 1;
    order: -1;
    align-self: center;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .dropdown.entreprise {
    z-index: 7;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .dropdown.entreprise.z800 {
    z-index: 800;
  }

  .dropdown.entreprise.z700 {
    z-index: 700;
  }

  .dropdown.age {
    z-index: 6;
    width: 100%;
    max-width: none;
  }

  .dropdown.age.z700 {
    z-index: 700;
  }

  .dropdown.age._7600 {
    z-index: 600;
  }

  .dropdown.contrat {
    z-index: 4;
    width: 100%;
    max-width: none;
  }

  .dropdown.contrat.z600 {
    z-index: 600;
  }

  .dropdown.niveau {
    z-index: 3;
    width: 100%;
    max-width: none;
  }

  .dropdown.niveau.z500 {
    z-index: 500;
  }

  .dropdown.certification {
    z-index: 1;
    width: 100%;
    max-width: none;
  }

  .dropdown.certification.z400 {
    z-index: 400;
  }

  .dropdown.categorie {
    z-index: 5;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .dropdown.z800 {
    z-index: 0;
  }

  .dropdown.z700 {
    z-index: 800;
  }

  .dropdown-list-2 {
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
  }

  .dropdown-list-2.w--open {
    z-index: -1;
    position: absolute;
  }

  .dropdown-list-2.pdc-list {
    z-index: 4;
    width: 100%;
    max-width: none;
    margin: auto;
  }

  .dropdown-list-2.pdc-list.w--open {
    z-index: auto;
    position: absolute;
  }

  .dropdown-list-2.poec-list {
    z-index: auto;
    width: 100%;
  }

  .header-chiffre-ctt-pro {
    max-width: 100%;
    height: auto;
    padding: 10px 20px;
    display: block;
  }

  .header-chiffre-fonction-tutorale {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    height: auto;
    margin: auto;
    display: block;
  }

  .div-block-95 {
    flex: 1;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    margin-right: auto;
  }

  .div-block-96 {
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .le-plan-de-d-veloppement-des-comp-tences {
    z-index: 300;
    padding-top: 0;
    position: relative;
    top: auto;
  }

  .header-pdc-1280 {
    height: 290px;
    display: none;
  }

  .div-block-97 {
    z-index: 1;
    flex-direction: column;
    max-width: none;
    height: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    display: block;
    position: static;
  }

  .icono-pdc {
    float: none;
    background-image: url('../images/fuse.png');
    background-size: cover;
    order: -1;
    width: 70vw;
    max-width: 70vw;
    height: 70vw;
    max-height: 70vw;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-pdc-wrapper {
    z-index: 5;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 10px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    position: static;
  }

  .div-block-pdc-content {
    z-index: 10;
    border-top: 1px solid var(--orange);
    border-top-right-radius: 0;
    flex-direction: column;
    flex: 1;
    align-items: center;
    width: 90vw;
    max-width: 90vw;
    margin-top: 0;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    display: block;
    position: relative;
  }

  .header-chiffre-pdc {
    flex: 1;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    display: block;
  }

  .module-chiffre-bc-bc {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .ligne-bleu-ciel {
    background-color: var(--orange);
    width: 100%;
  }

  .module-chiffre-b-bc {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .poec {
    z-index: 6;
    margin: auto;
    position: relative;
    top: auto;
  }

  .header-poec-1280 {
    display: none;
  }

  .container-18 {
    flex-direction: column;
    max-width: 90vw;
    margin-top: 20px;
    padding-top: 0;
  }

  .div-block-100 {
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .icono-poec {
    background-image: url('../images/equipe4.png');
    /* Was cover — the box's aspect ratio (~1.13, 100%×80vw) is narrower
       than equipe4.png's own (1.32), so cover scaled the image up to
       fill the box and cropped a slice off each side just to do it —
       exactly the "image is cut off" the client flagged, separate from
       the earlier box-overflow bug. contain shows the whole illustration
       instead, letterboxed against the section's own purple background
       — same fix already used on .icono-gouernance for this same
       problem. */
    background-size: contain;
    background-repeat: no-repeat;
    order: -1;
    width: 100vw;
    /* Was 93vw — relative to the VIEWPORT, not to this flex item's own
       parent (narrower, its own side padding), so the box was routinely
       wider than the parent and had no room left to be centered: it sat
       flush against the parent's left edge and bled off the right side
       instead — reads as "the image is too wide". Same bug/fix as
       .icono-alternance earlier. 100% is relative to the parent, so the
       box can never exceed it. */
    max-width: 100%;
    height: 80vw;
    max-height: 80vw;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  .div-block-102 {
    z-index: 5;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 14px;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
    position: static;
  }

  .div-block-poec-content {
    z-index: 5;
    /* POEC has no national/DROM tabs, unlike the other sections that
       share this class-naming pattern — this border-top was a leftover
       copy with no divider to justify it, floating above the first
       rounded box. Removed along with the corner-flattening it forced. */
    max-width: 90vw;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 5px;
    position: static;
  }

  .header-chiffre-poec {
    max-width: 100%;
    height: auto;
    padding: 15px;
    display: block;
  }

  .module-chiffre-b-v, .module-chiffre-v-v {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .ligne-violet {
    background-color: var(--pink-2);
    width: 100%;
  }

  .experimentation {
    z-index: 5;
    margin-top: auto;
    padding-top: 0;
    position: relative;
    top: auto;
  }

  .div-block-expe-wrapper {
    margin-top: -45px;
  }

  .div-block-102-copy {
    padding-top: 20px;
    padding-bottom: 25px;
  }

  .div-block-expe-content {
    max-width: 90vw;
  }

  .div-block-expe-content.nocornerb {
    border-top: 1px solid var(--light-coral);
    border-top-right-radius: 0;
  }

  .icono-experimentation {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-image: url('../images/ETUDE.png');
    background-position: 50%;
    background-size: cover;
    order: -1;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 80vw;
    height: 70vw;
    margin: auto;
    display: flex;
  }

  .module-chiffre-marron-marron {
    width: 100%;
  }

  .module-chiffre-marron-marron.coloralternance {
    background-color: var(--white);
  }

  .module-chiffre-b-marron {
    width: 100%;
  }

  .module-chiffre-b-marron.coloralternance {
    background-color: var(--coral-clair);
  }

  .equipe-mobile {
    z-index: 4;
    /* Was its own diagonal gradient (light blue -> #59c295 -> a near-black
       olive #223c0e) — a different recipe from every other breakpoint,
       muddy at the bottom. Reuse the same cyan-to-Caribbean-green gradient
       as .equipe-1280 (desktop/tablet) so the section matches everywhere. */
    background-image: linear-gradient(180deg, #079295 0%, #079295 350px, #80d43b 100%);
    margin-top: auto;
    display: block;
    position: relative;
    top: auto;
  }

  .container-19 {
    flex-direction: column;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 20px;
  }

  .div-block-103 {
    width: 90vw;
    padding-left: 0;
  }

  .div-block-104 {
    z-index: 1;
    background-size: contain;
    width: 310px;
    max-width: 310px;
    height: 320px;
    max-height: 360px;
    position: relative;
  }

  .image-17 {
    width: 310px;
    min-width: 270px;
    max-width: 310px;
    height: 360px;
    min-height: 360px;
    max-height: 360px;
  }

  .div-block-106 {
    margin-bottom: 50px;
  }

  .div-block-107, .div-block-108 {
    margin-top: auto;
    margin-bottom: auto;
  }

  .div-block-109 {
    margin-bottom: 50px;
  }

  .div-block-110 {
    margin-top: auto;
    margin-bottom: 18px;
    padding-bottom: 20px;
  }

  .span-footer:hover {
    color: var(--light-sky-blue);
  }

  .dom {
    z-index: auto;
    flex-direction: column;
    margin-top: 41px;
    margin-bottom: auto;
    padding-top: 0;
    display: block;
    position: relative;
  }

  .div-block-114 {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 100vw;
    margin-top: -12px;
  }

  .icono-equipe {
    background-image: url('../images/ecoute.png');
    order: -1;
    /* Was 100vw — same overflow bug as .icono-poec/.icono-alternance:
       relative to the viewport rather than to this flex item's own
       (narrower, padded) parent, so it bled a constant ~15px past the
       parent's right edge instead of being centered by its own auto
       margins. 100% fixes it the same way. */
    width: 100%;
    height: 70vw;
    margin: -15px auto 21px;
    padding-bottom: 0;
  }

  .drop-menu-salarie {
    height: auto;
  }

  .div-block-116 {
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-116-copy {
    flex: none;
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
  }

  .container-18-copy {
    flex-direction: column;
    max-width: 90vw;
    margin-top: auto;
    padding-top: 0;
    display: flex;
  }

  /* Was 40px — not enough to clear the illustration above it (.image-28),
     whose own bottom edge sat ~85px into this block, so "RAPPORT
     D'ACTIVITÉ 2025" rendered on top of the illustration's legs/shoes.
     108px clears it while still keeping the whole block inside
     .hero-header's own fixed height (no overflow into the Edito section
     below). */
  .div-block-117 {
    margin-top: 108px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-118 {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .image-18 {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-120 {
    width: 100%;
    margin: auto;
  }

  .icono-gouernance {
    /* Was background-size:cover — homme2.png (1536×1024, aspect 1.5) is
       noticeably wider-proportioned than this box (85vw×70vw, aspect
       ~1.21), so cover scaled it up to fill the box and cropped ~146px
       off each side of the source image just to do it — cutting the
       chart/pie-chart icons off flush against the right edge with no
       breathing room, while the presenter on the left dominated the
       frame. contain shows the whole illustration, letterboxed evenly
       top/bottom against the section's own background instead. */
    background-image: url('../images/homme2.png');
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    order: -1;
    width: 85vw;
    height: 70vw;
  }

  .header-bref-1280 {
    background-position: 50% 0;
    background-size: auto 560px;
    width: 100vw;
    height: 500px;
    padding-top: 26px;
    display: none;
    position: relative;
    top: auto;
  }

  .div-block-39-copy {
    flex: 0 auto;
    width: 100%;
    max-width: none;
    margin: auto;
  }

  .icono-alternance {
    /* This ≤479px override was still pointing at etdue.png — a different
       stock illustration (two people at a computer) than the one desktop
       actually uses (images/alternance.png, the handshake/certificate
       graphic, per .header-alternance-1280's <img>). The base-rule swap
       to alternance.png doesn't reach mobile because this more specific
       rule wins here — fixed to match every other breakpoint. */
    background-image: url('../images/alternance.png');
    background-size: contain;
    order: -1;
    width: 120vw;
    /* max-width was 93vw — relative to the VIEWPORT, not to this flex
       item's own parent, which is narrower than the viewport (its own
       side padding). 93vw was routinely wider than the parent, so the
       flex auto-margins below had no free space left to center with and
       collapsed to 0: the box sat flush against the parent's left edge
       and bled off past its right edge instead of being centered —
       worse the wider the screen (up to ~43px overflow at 767px).
       100% is relative to the parent instead, so the box can never
       exceed it and margin:auto has room to actually center it. */
    max-width: 100%;
    height: 100vw;
    max-height: 80vw;
    margin-left: auto;
    margin-right: auto;
    position: static;
    overflow: visible;
  }


  .header-bref-mobile {
    /* Was linear-gradient(313deg, #123a6d, #1c5aa8) (navy -> blue) — this
       mobile-only override duplicates its own gradient instead of using
       .banner-fill's (already swapped to violet above), so it needs the
       same En Bref/Edito-Hero color swap applied here by hand. */
    background-image: linear-gradient(313deg, #4c0066, #9d1cc8);
    flex-direction: column;
    align-items: flex-start;
    width: 100vw;
    height: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    position: relative;
    top: auto;
  }

  .header-gouvernance-mobile {
    z-index: auto;
    background-image: linear-gradient(313deg, #20723d, #32b05e);
    width: 100vw;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
    position: relative;
    top: auto;
  }

  .header-diag-mobile {
    z-index: auto;
    background-image: linear-gradient(293deg, #a58514, #ffcd20);
    flex-direction: column;
    justify-content: flex-start;
    width: 100vw;
    height: auto;
    margin-top: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
    position: relative;
    top: auto;
    overflow: visible;
  }

  .header-alternance-mobile {
    z-index: auto;
    background-image: linear-gradient(318deg, #98205d, #eb3290);
    flex-direction: column;
    width: 100vw;
    height: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    position: relative;
    top: auto;
  }

  .header-pdc-mobile {
    z-index: 5;
    background-image: linear-gradient(338deg, #645281, #9b7fc7);
    flex-direction: column;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    position: relative;
    top: auto;
  }

  .header-poec-mobile {
    z-index: auto;
    background-image: linear-gradient(126deg, #6d298d, #a840d9);
    max-width: 100vw;
    height: auto;
    display: flex;
    position: relative;
    inset: auto 0%;
    overflow: hidden;
  }

  .header-experimentation-mobile {
    z-index: 1;
    background-image: linear-gradient(347deg, #a56b69, #ffb7b5);
    height: auto;
    margin-bottom: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
    position: relative;
    top: auto;
  }

  .tooltip-open {
    z-index: 110;
    clear: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    display: none;
    position: absolute;
    inset: 45% auto auto 0%;
  }

  .tooltip-open.guadeloupe {
    margin-top: -136px;
    margin-left: -9px;
    display: none;
  }

  .tooltip-open.bordeau {
    display: none;
    top: -41%;
  }

  .tooltip-open.occitanie {
    display: none;
    top: -55%;
  }

  .tooltip-open.paca {
    display: none;
    top: -127%;
    left: -51%;
  }

  .tooltip-open.ara {
    display: none;
    top: -86%;
    left: -264%;
  }

  .tooltip-open.bourgogne {
    display: none;
    top: -89%;
    left: -90%;
  }

  .tooltip-open.est {
    display: none;
    top: -85%;
    left: -234%;
  }

  .div-block-100-copy {
    width: 90vw;
  }

  .div-block-18-copy {
    top: auto;
    bottom: -5px;
    left: 10px;
  }

  .div-block-arrow-top-tooltip {
    top: auto;
    bottom: -5px;
    left: 63px;
  }

  .link-block-5 {
    width: 32px;
    height: 32px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .div-block-129 {
    justify-content: center;
    width: 90vw;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: static;
    inset: auto 0% -754%;
  }

  .image-23 {
    width: 32px;
    height: 32px;
  }

  .image-24, .image-25, .image-26 {
    width: 32px;
  }

  .equipe-1280 {
    z-index: auto;
    background-image: linear-gradient(228deg, var(--bleu), #223c0e);
    display: none;
    position: static;
  }

  .ville-mobile.lille {
    width: 100px;
    position: absolute;
    top: -1px;
    left: 5%;
  }

  .ville-mobile.caen {
    width: 60px;
    position: absolute;
    top: 41px;
    left: -38%;
  }

  .ville-mobile.bordeaux {
    width: 90px;
    position: absolute;
    top: 187px;
    left: -48%;
  }

  .ville-mobile.paris {
    width: 100px;
    position: absolute;
    top: 64px;
  }

  .ville-mobile.nancy {
    width: 62px;
    position: absolute;
    top: 49px;
    left: 63%;
  }

  .ville-mobile.tours {
    width: 100px;
    position: absolute;
    top: 103px;
    left: -17%;
  }

  .ville-mobile.nantes {
    width: 80px;
    position: absolute;
    top: 117px;
    left: -63%;
  }

  .ville-mobile.toulouse {
    width: 100px;
    position: absolute;
    top: 251px;
    left: -7%;
  }

  .ville-mobile.ajaccio {
    z-index: 5;
    width: 70px;
    position: absolute;
    inset: auto 0% 0% 244px;
  }

  .ville-mobile.aix {
    width: 90px;
    position: absolute;
    top: 225px;
    left: 47%;
  }

  .ville-mobile.rennes {
    width: 80px;
    position: absolute;
    top: 74px;
    left: -61%;
  }

  .ville-mobile.la-reunion {
    width: 90px;
    display: block;
    position: absolute;
    top: 27px;
    bottom: -12%;
    left: -51%;
  }

  .ville-mobile.guyanne {
    width: 80px;
    position: absolute;
    top: 45px;
    left: 40%;
  }

  .ville-mobile.guadeloupe {
    z-index: 1;
    width: 170px;
    position: absolute;
    top: 27px;
    left: 41%;
  }

  .ville-mobile.martinique {
    z-index: 1;
    position: absolute;
    top: 46px;
    left: -44%;
  }

  .ville-mobile.lyon {
    width: 50px;
    position: absolute;
    top: 174px;
    left: 38%;
  }

  .ville-mobile.dijon {
    width: 90px;
    position: absolute;
    top: 120px;
    left: 31%;
  }

  .div-block-130, .div-block-130-copy {
    align-items: center;
    margin-top: 65px;
    display: flex;
    position: relative;
  }

  .container-18-copy-copy {
    flex-direction: column;
    max-width: 90vw;
    margin-top: auto;
    padding-top: 0;
    display: block;
  }

  .ancre-bref {
    top: -60px;
  }

  .ancre-gouvernance {
    height: 101%;
    top: -60px;
  }

  .ancre-equipe-1280, .ancre-alternance {
    top: -60px;
  }

  .ancre-pdc {
    height: 103%;
    top: -60px;
  }

  .ancre-poec {
    height: 100%;
    display: block;
    position: absolute;
    top: -60px;
  }

  .ancre-experimentation {
    height: 104%;
    top: -60px;
  }

  .ancre-diagnostic {
    height: 101%;
    top: -60px;
  }

  .div-block-136 {
    width: auto;
  }

  .div-block-137 {
    display: none;
  }

  .ancre-equipe-mobile {
    top: -60px;
  }

  .div-block-138 {
    border: 1px #fff;
    border-radius: 100px;
    margin: auto auto 10px;
  }

  .image-27 {
    margin: auto;
  }

  .grid-3-poec, .grid-3-pdc {
    flex: 1;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .grid-3-alternance {
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .header-experiementation-1280 {
    background-size: auto 100%;
    flex-direction: column;
    padding-top: 15px;
    padding-bottom: 15px;
    display: none;
  }

  .div-block-139 {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-top: -15px;
    margin-bottom: auto;
  }

  .div-block-140, .div-block-141 {
    width: 70vw;
  }

  .grid-4-alternance-2 {
    grid-template-rows: 1fr auto auto auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .grid-3-zoom {
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 1fr;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-71-copy {
    flex-direction: column;
    width: 100%;
    max-width: none;
    display: block;
  }

  .header-chiffre-expe-edflex-copy {
    max-width: 100%;
    height: auto;
    padding: 15px;
    display: block;
  }

  .dropdown-toggle-3 {
    width: 100%;
    max-width: none;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .div-block-15-martinique {
    display: block;
  }

  .text-block-3 {
    text-align: center;
    margin-top: -278px;
    padding-bottom: 53px;
    padding-left: 0;
    font-size: 100px;
    line-height: 100px;
    position: relative;
  }

  .image-28 {
    /* No width was ever set here — the <img> tag's own responsive
       sizes="(max-width: 767px) 100vw, 538px" took over instead, so the
       illustration scaled up to nearly full viewport width as this
       breakpoint stretched from ~479px up to 767px (mobile now runs the
       whole way, see the max-width:767px conversion elsewhere). At
       375px that's a mild, easy-to-miss ~34px overflow past
       .hero-header's fixed 634px height; by 600-767px it's ~530px wide
       and the overflow becomes large enough to visibly spill the title
       and PDF button onto the Edito section below. Capped to the same
       340px tablet already uses, so image size — and the margin-top:
       108px/height:634px tuned around it — stays consistent everywhere
       in this range instead of only working near the narrow end. */
    width: 340px;
    max-width: 340px;
    /* Was -6px. The fixed nav bar (0-62px, z-index 89999) and the
       illustration sitting right below the "2025" numeral (z-index 20 vs
       the numeral's 1) box the numeral into a visible band exactly
       imgTop-62px tall no matter how the numeral's OWN margin is tuned —
       at -6px that band was only ~39px, cropping off most of each digit.
       Nudging the image down 25px more grows that band to ~64px, enough
       for "2025" to actually read as a number instead of a sliver of
       rounded tops peeking out. Checked against .hero-header's fixed
       674px height — still ~36px of slack, comfortably short of the
       overflow this exact area was fixed for earlier. */
    margin-top: 19px;
  }

  .text-span-2, .text-span-3 {
    color: var(--indigo);
    font-size: 16px;
  }

  .div-block-147 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
  }

  .bold-text-54 {
    line-height: 30px;
  }

  .dropdown-toggle-2-copy {
    width: 100%;
    max-width: none;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .dropdown-toggle-2-copy.poec-drop {
    width: 100%;
  }

  .dropdown-list-2-copy {
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
  }

  .dropdown-list-2-copy.w--open {
    z-index: -1;
    position: absolute;
  }

  .dropdown-list-2-copy.pdc-list {
    z-index: 4;
    width: 100%;
    max-width: none;
    margin: auto;
  }

  .dropdown-list-2-copy.pdc-list.w--open {
    z-index: auto;
    position: absolute;
  }

  .dropdown-list-2-copy.poec-list {
    z-index: auto;
    width: 100%;
  }

  .dropdown-list-2-copy.poec-list.w--open {
    z-index: 1;
  }

  .grid-2-zoom {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .div-zoom {
    flex-direction: column;
    width: 100%;
    max-width: none;
    display: block;
  }

  .h6-copy {
    text-align: left;
  }

  .h6-copy.white {
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 18px;
    line-height: 18px;
  }

  .nom-dom {
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding-top: 0;
    padding-bottom: 0;
    display: block;
  }

  .text-block-4 {
    text-align: center;
  }

  .cartedrom {
    flex-direction: column;
    max-width: 30%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .grid-2-copy {
    grid-row-gap: 40px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .div-block-alternance-content-drom, .div-block-alternance-content-dro {
    flex-direction: column;
    align-items: center;
    width: 90vw;
    max-width: none;
    /* The border-top added above is meant to be the only separator from
       .drom-jump-nav — this margin+padding combo left ~25px of dead air
       between that line and the map illustration below it. Tightened to
       match the .ligne-royal-blue treatment elsewhere. */
    margin-top: 0;
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
  }

  .div-block-alternance-content-copy {
    flex-direction: column;
    align-items: center;
    width: 90vw;
    max-width: none;
    margin-top: 5px;
    padding-top: 18px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
  }

  .grid-3-alternance-copy-copy {
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .div-block-952 {
    flex: 1;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    margin-right: auto;
  }

  .div-block-pdc-content-drom, .div-block-pdc1-content-drom-copy {
    z-index: 10;
    flex-direction: column;
    flex: 1;
    align-items: center;
    width: 90vw;
    max-width: 90vw;
    margin-top: 2px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    display: block;
    position: relative;
  }

  .jaune {
    max-width: 90vw;
    font-family: Butler, sans-serif;
  }

  .div-block-expe-content-drom {
    max-width: 90vw;
  }

  .grid-4-alternance-copy {
    grid-template-rows: 1fr auto auto auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .grid-2-poec-copy {
    flex: 1;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-poec-content-drom {
    z-index: 5;
    max-width: 90vw;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 5px;
    position: static;
  }

  .tabs-4 {
    z-index: 300;
  }

  .tabs-4.zindex800 {
    z-index: 800;
  }

  .tabs-4.zinbdex600 {
    z-index: 600;
  }

  .tab-6 {
    border-bottom: 1px #000;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .tab-6.w--current {
    border: 1px #000;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .tabs-menu {
    max-width: 90vw;
  }

  .header-chiffre-poec-nat {
    max-width: 100%;
    height: auto;
    padding: 15px;
    display: block;
  }

  .tabs-menu-2 {
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-90-a {
    flex-direction: column;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-71-a {
    flex-direction: column;
    width: 100%;
    max-width: none;
    display: block;
  }

  .div-block-90-b {
    flex-direction: column;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-71-b, .div-block-71-bb, .div-block-71-bbb {
    flex-direction: column;
    width: 100%;
    max-width: none;
    display: block;
  }

  .div-block-90-c {
    flex-direction: column;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-71-cc, .div-block-71-ccc {
    flex-direction: column;
    width: 100%;
    max-width: none;
    display: block;
  }

  .div-block-90-d {
    flex-direction: column;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .div-block-71-dd, .div-block-71-ddd {
    flex-direction: column;
    width: 100%;
    max-width: none;
    display: block;
  }

  .header-chiffre-apprentissage-acopy, .header-chiffre-apprentissage-b, .header-chiffre-apprentissage-c, .header-chiffre-apprentissage-d {
    max-width: 100%;
    height: auto;
    padding: 10px 20px;
    display: block;
  }

  .div-block-95-c, .div-block-952-c, .div-block-95-d, .div-block-952-d {
    flex: 1;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    margin-right: auto;
  }

  .header-chiffre-pdc-a, .header-chiffre-pdc-b, .header-chiffre-pdc-c, .header-chiffre-pdc-d {
    flex: 1;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    display: block;
  }

  .header-chiffre-expe-edflex-a, .header-chiffre-expe-edflex-b, .header-chiffre-expe-edflex-c, .header-chiffre-expe-edflex-d, .header-chiffre-poec-a, .header-chiffre-poec-b, .header-chiffre-poec-copy {
    max-width: 100%;
    height: auto;
    padding: 15px;
    display: block;
  }

  .div-block-95-a {
    flex: 1;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    margin-right: auto;
  }

  .tabs-menu-3, .tabs-menu-4, .tabs-menu-5, .tabs-menu-6 {
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  /* "CHIFFRES NATIONAUX" / "ZOOM SUR LES DROM" toggle, repeated across
     Diagnostics (.tabs-menu), Gouvernance (.tabs-menu-2 / -5) and
     Alternance/PDC (.tabs-menu-6 / -4) — each was plain block flow
     (Webflow's own .w-tab-menu default), so the two <a> tabs stacked
     into two full-width rows instead of sitting side by side like every
     other breakpoint. Flexed into one row; the direct-child selector
     keeps this scoped to just these 6 toggle bars, not every element
     sharing the reused .tab/.tab-4 classes elsewhere on the page. */
  .tabs-menu,
  .tabs-menu-2,
  .tabs-menu-3,
  .tabs-menu-4,
  .tabs-menu-5,
  .tabs-menu-6 {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .tabs-menu > a,
  .tabs-menu-2 > a,
  .tabs-menu-3 > a,
  .tabs-menu-4 > a,
  .tabs-menu-5 > a,
  .tabs-menu-6 > a {
    flex: 1;
    width: auto;
    text-align: center;
  }
  .tabs-menu > a *,
  .tabs-menu-2 > a *,
  .tabs-menu-3 > a *,
  .tabs-menu-4 > a *,
  .tabs-menu-5 > a *,
  .tabs-menu-6 > a * {
    text-align: center;
  }
  .dropdown-toggle-2-copy {
    width: 100%;
    max-width: none;
    height: 85px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .dropdown-toggle-2-copy.pdc-drop {
    z-index: 0;
    width: 100%;
    max-width: none;
  }

  .dropdown-toggle-2-copy.pdc-drop.w--open {
    z-index: 1;
  }

  .dropdown-toggle-2-copy.pdc-drop.z1 {
    z-index: 4;
  }

  .dropdown-toggle-2-copy.pdc-drop.z1.w--open {
    z-index: 20;
  }

  .dropdown-toggle-2-copy.pdc-drop.terco, .dropdown-toggle-2-copy.poec-drop {
    width: 100%;
  }

  .dropdown-toggle-2-copy.poec-drop.w--open {
    z-index: 2;
  }

  .dropdown-toggle-2-copy.poec-drop.duo {
    z-index: 0;
    width: 100%;
  }

  .bold-text-60, .bold-text-61, .bold-text-62 {
    font-size: 18px;
  }
}

#w-node-_5ef008be-c005-03eb-8e14-86a9b0b21f64-73bd8775, #w-node-_5ef008be-c005-03eb-8e14-86a9b0b21f56-73bd8775 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-aa2b4c30-b838-2033-1204-33f8f5ebf97e-73bd8775, #w-node-_50365a83-0007-23e2-2af8-50d3bdafe9fe-73bd8775, #w-node-_04f4604c-0d68-cb13-ae96-9d744948d674-73bd8775, #w-node-_052b8834-01ba-3308-0f9c-220ecf898f24-73bd8775, #w-node-_640f4634-b8a1-a265-72b3-446c99938201-73bd8775, #w-node-_69b23d0d-3433-42ec-6199-ec55a77d9a24-73bd8775, #w-node-_8b37ad6b-077d-b926-c851-524898fbdb4a-73bd8775, #w-node-_69a6a1c7-db7b-4f60-d3af-0a5424371df3-73bd8775, #w-node-_69a6a1c7-db7b-4f60-d3af-0a5424371e06-73bd8775, #w-node-_275d41ad-c36c-23de-1225-296429819a26-73bd8775, #w-node-_275d41ad-c36c-23de-1225-296429819a39-73bd8775, #w-node-e669cc9b-f5c4-48fc-2a2a-277049af6642-73bd8775, #w-node-e669cc9b-f5c4-48fc-2a2a-277049af6655-73bd8775, #w-node-bcc8d48e-ab67-bb5c-7ee6-36395b94bf0b-73bd8775, #w-node-bcc8d48e-ab67-bb5c-7ee6-36395b94bf1e-73bd8775, #w-node-_37de6e14-2c02-b702-22f5-54e0e6a2b056-73bd8775, #w-node-d2567779-620d-e6a7-e408-e3c991ac1e6a-73bd8775, #w-node-_26c68b21-4b9e-c225-1b55-c37a257396b8-73bd8775, #w-node-_83aed8ee-8c26-f1a3-4c3d-759225103ab5-73bd8775, #w-node-_0b3b558e-b3f6-4c3f-6050-4d48749a6d8c-73bd8775 {
  align-self: center;
}

#w-node-fc414405-9c7e-0528-a948-f9092d537acc-73bd8775, #w-node-_13cd67a4-9c94-1918-4f7c-8dd336ae2f1f-73bd8775 {
  grid-area: 1 / 3 / 2 / 4;
}

#w-node-d6fb58d7-3757-46c6-d60e-01d546a38710-73bd8775 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-c08a778e-69e5-2528-d619-8dff43332754-73bd8775, #w-node-c08a778e-69e5-2528-d619-8dff4333276e-73bd8775 {
  grid-area: 1 / 3 / 2 / 4;
}

#w-node-_8407d94e-481c-c544-f5df-9ce86ef083f4-73bd8775 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_12ff779b-d0c9-6e86-fc29-f6d490c45103-73bd8775, #w-node-_12ff779b-d0c9-6e86-fc29-f6d490c4511d-73bd8775 {
  grid-area: 1 / 3 / 2 / 4;
}

#w-node-_12ff779b-d0c9-6e86-fc29-f6d490c4512d-73bd8775 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_4f9e32ec-2277-aa36-24a7-a315a7db4c48-73bd8775, #w-node-_4f9e32ec-2277-aa36-24a7-a315a7db4c62-73bd8775 {
  grid-area: 1 / 3 / 2 / 4;
}

#w-node-_4f9e32ec-2277-aa36-24a7-a315a7db4c72-73bd8775 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-a65158ab-d936-1313-4c90-8f7802e2903c-73bd8775, #w-node-a65158ab-d936-1313-4c90-8f7802e29056-73bd8775 {
  grid-area: 1 / 3 / 2 / 4;
}

#w-node-a65158ab-d936-1313-4c90-8f7802e29066-73bd8775 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-af1d4294-ca66-e6c1-b0d9-ce31ed30efc4-73bd8778 {
  grid-area: 1 / 3 / 2 / 4;
}

@media screen and (max-width: 767px) {
  #w-node-fc414405-9c7e-0528-a948-f9092d537acc-73bd8775, #w-node-_13cd67a4-9c94-1918-4f7c-8dd336ae2f1f-73bd8775, #w-node-d6fb58d7-3757-46c6-d60e-01d546a38710-73bd8775, #w-node-c08a778e-69e5-2528-d619-8dff43332754-73bd8775, #w-node-c08a778e-69e5-2528-d619-8dff4333276e-73bd8775, #w-node-_8407d94e-481c-c544-f5df-9ce86ef083f4-73bd8775, #w-node-_12ff779b-d0c9-6e86-fc29-f6d490c45103-73bd8775, #w-node-_12ff779b-d0c9-6e86-fc29-f6d490c4511d-73bd8775, #w-node-_12ff779b-d0c9-6e86-fc29-f6d490c4512d-73bd8775, #w-node-_4f9e32ec-2277-aa36-24a7-a315a7db4c48-73bd8775, #w-node-_4f9e32ec-2277-aa36-24a7-a315a7db4c62-73bd8775, #w-node-_4f9e32ec-2277-aa36-24a7-a315a7db4c72-73bd8775, #w-node-a65158ab-d936-1313-4c90-8f7802e2903c-73bd8775, #w-node-a65158ab-d936-1313-4c90-8f7802e29056-73bd8775, #w-node-a65158ab-d936-1313-4c90-8f7802e29066-73bd8775 {
    grid-area: 3 / 1 / 4 / 2;
  }
}


@font-face {
  font-family: 'Butler';
  src: url('../fonts/Butler_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- 2025 section color reorder v2 (full rewrite) --- */

/* Alternance -> pink (unchanged from v1) */
#Alternance .royal-blue,
#Alternance .chiffre-cl-royal-blue,
#Alternance .bold-text-31,
#Alternance .bold-text-47,
#Alternance .h-drop-menu-alternance,
#Alternance .text-span-2,
#Alternance .text-span-3,
#Alternance .chiffre-drop-menu,
#Alternance .div-block-alternance-content-drom,
#Alternance .h6 {
  color: #c7136f;
}
#Alternance .ligne-royal-blue {
  background-color: #eb3290;
}
#Alternance .tab:not(.w--current) {
  background-color: #de167c;
}
#Alternance .div-block-alternance-content-drom {
  border-color: #eb3290;
}
/* Base rule only draws a bottom border (border-style: none none solid) —
   the "Chiffres nationaux" pane gets a top line via .div-block-alternance-
   content's own border-top, but "Zoom sur les DROM" had none. Add a
   matching top border so both panes get the same line treatment. */
#Alternance .div-block-alternance-content-drom {
  border-top-style: solid;
}
/* .div-block-alternance-content (national tab, not -drom) has its own
   mobile-only border-top (≤479px) that this color-reorder pass missed —
   left at var(--royal-blue), a generic blue that doesn't belong on an
   otherwise all-pink section. */
#Alternance .div-block-alternance-content {
  border-top-color: #eb3290;
}
#Alternance .div-block-alternance-wrapper,
#Alternance .module-chiffre-rb-rb,
#Alternance .dropdown-toggle-2 {
  background-color: #ffe2f1;
}

/* Diagnostics -> or (gold): large display text can use a brighter gold (WCAG large-text threshold), small text needs the darker shade to stay readable */
#Diagnostics .chiffre-cl-or,
#Diagnostics .bold-text-44,
#Diagnostics .h6,
#Diagnostics .h6-copy,
#Diagnostics .text-block-4 {
  color: #b18900;
}
#Diagnostics .conjonction-or,
#Diagnostics .span-bold-or,
#Diagnostics .bold-text-52 {
  color: #8b6c00;
}
#Diagnostics .ligne-or {
  background-color: #ffcd20;
}
#Diagnostics .tab-link-tab-1:not(.w--current),
#Diagnostics .tab-link-tab-2:not(.w--current) {
  background-color: #ffcd20;
  color: #004271;
}
#Diagnostics .drom-jump-pill {
  color: #004271;
}
#Diagnostics .div-block-diagnostic-wrapper,
#Diagnostics .module-chiffre-j-j {
  background-color: #fff8de;
}
/* Diagnostics: white text on the photo/textured boxes traded for dark navy + no shadow, for legibility */
#Diagnostics .chiffre-cl-2,
#Diagnostics .desc-chiffre-cl-2,
#Diagnostics .desc-detail-chiffre,
#Diagnostics .ratio-1,
#Diagnostics .span-italic {
  color: #004271;
  text-shadow: none;
}
#Diagnostics .h6.white {
  color: #004271 !important;
}
#Diagnostics .div-block-dignostic-content.nocorner {
  border-top-color: #ffcd20;
  border-bottom-color: #ffcd20;
}
/* .nocornerb (mobile-only, ≤479px) is a different modifier than .nocorner
   above and was missed by this same fix — its own border-top was left at
   var(--vert) (#eb3290, pink), which doesn't belong on Diagnostics' all-
   yellow section. */
#Diagnostics .div-block-dignostic-content.nocornerb {
  border-top-color: #ffcd20;
}

/* Gouvernance -> vert (green, En bref 2024's old green) */
#gouvernance .ca_drop_categorie,
#gouvernance .bold-text-53,
#gouvernance .h3,
#gouvernance .chiffre-cl,
#gouvernance .bold-text-26,
#gouvernance .h6-copy,
#gouvernance .conjonction-or {
  color: #21743e;
}
#gouvernance .div-block-58 {
  background-color: #32b05e;
}
#gouvernance .div-block-55,
#gouvernance .module-chiffre-r-r {
  background-color: #d6f1d1;
}
#gouvernance .stat-left-bottom.module-chiffre-b-r {
  background-color: #d6f1d1;
}
#gouvernance .stat-right-bottom.module-chiffre-r-r {
  background-color: #fff;
}

/* FNE-Formation -> saumon (salmon) */
#Experimentation .chiffre-cl-marron,
#Experimentation .bold-text-37,
#Experimentation .div-block-expe-content-drom,
#Experimentation .rose,
#Experimentation .h6,
#Experimentation .span-bold-or,
#Experimentation .chiffre-cl-royal-blue,
#Experimentation .text-block-4,
#Experimentation .jaune {
  color: #c23b30;
}
#Experimentation .div-zoom.rose,
#Experimentation .ligne-bleu-ciel {
  background-color: #ffb7b5;
}
#Experimentation .tab-5:not(.w--current) {
  background-color: #c23b30;
}
#Experimentation .div-block-102-copy,
#Experimentation .module-chiffre-marron-marron {
  background-color: #ffe7e6;
}
#Experimentation .module-chiffre-b-marron {
  background-color: #fff;
}

/* POEC -> violet (distinct shade from Edito/Gouvernance) */
#POEC .chiffre-cl-violet,
#POEC .bold-text-48,
#POEC .chiffre-drop-menu.poec-drop-chiffre,
#POEC .violet,
#POEC .h-drop-menu-poec,
#POEC .lavande,
#POEC .text-block-4,
#POEC .jaune {
  color: #9829cd;
}
#POEC .div-zoom.violet {
  background-color: #a840d9;
}
#POEC .tab-6:not(.w--current),
#POEC .ligne-violet {
  background-color: #a840d9;
}
#POEC .tab-6:not(.w--current) {
  color: #fff;
}
#POEC .tab-6:not(.w--current) .text-block-9,
#POEC .tab-6:not(.w--current) .text-block-10 {
  color: #fff;
}
#POEC .div-block-102,
#POEC .module-chiffre-v-v {
  background-color: #f0dcf9;
}
#POEC .div-block-poec-content-drom {
  border-color: #a840d9;
}

/* PDC -> lavande (new, was the unchanged pivot before) */
#PDC .chiffre-cl-bleu-ciel,
#PDC .chiffre-drop-menu.pdc-drop-chiffre,
#PDC .h-drop-menu-pdc {
  color: #7751b3;
}
#PDC .ligne-bleu-ciel {
  background-color: #9b7fc7;
}
#PDC .tab-4:not(.w--current) {
  background-color: #8563bb;
  color: #fff;
}
#PDC .tab-4:not(.w--current) .text-block-5,
#PDC .tab-4:not(.w--current) .text-block-6 {
  color: #fff;
}
#PDC .div-block-pdc-wrapper,
#PDC .module-chiffre-bc-bc,
#PDC .dropdown-toggle-2 {
  background-color: #ece3f7;
}
/* .div-block-pdc-content has its own mobile-only border-top (≤479px)
   that this color-reorder pass never touched — left at var(--orange),
   which doesn't belong on PDC's all-purple section. */
#PDC .div-block-pdc-content {
  border-top-color: #9b7fc7;
}

/* En bref <-> Edito/Hero swap (client request): the home page reads as
   violet (Hero + Edito) then blue (En Bref) — inverted so the page opens
   on the bright light blue and En Bref inherits the old violet instead. */
#En-bref .div-block-42 {
  background-color: #f5edfb;
}

/* Edito / Hero -> bleu clair (was violet, was itself Gouvernance's old
   dark violet before that — see En Bref's block above for where the
   violet went). Round 2: client asked for more luminous/light/cyan —
   every hex below is the SAME violet-family anchors from the hero SVG
   (see FOND-hero-bleu-v2.svg's own generation), hue-shifted toward cyan
   (~192°, was ~205°) and lightened, so the whole Edito/Hero palette
   moves together as one coherent family. */
#Edito .quote {
  color: #007c9b;
}
#Top .text-block-3,
#Top .subtitle {
  color: #eafcff;
}
#Edito .div-block-edito-wrapper {
  background-color: #d3f6ff;
}

/* Protect Equipe's own fixed gradient from the --bleu var change above (479px breakpoint only, matching the original rule's scope) */
@media screen and (max-width: 767px) {
  .equipe-1280 {
    background-image: linear-gradient(228deg, #449786, #223c0e) !important;
  }
}

/* Top bar (#section-2) now matches the hero header's own violet (var(--bleu))
   instead of teal — reverts the earlier override so it uses the base
   .section-2 rule's background-color/background-image and .link's base
   near-white text color again. */

/* Nav "current section" indicator, desktop/tablet (white nav bar): a
   light cyan here reads as near-invisible (contrast ~1.5:1) — needs a
   solidly saturated cyan-blue instead. The pale variant this used to be
   (light violet #ca9ae1, now light cyan #9cdce5) is still exactly right
   against the mobile drawer's dark navy background, so it's scoped to
   that breakpoint below instead of applying everywhere. */
.nav-menu.gouv.w--current,
.nav-menu.nav-edito.w--current,
.nav-menu.w--current {
  color: #007c9b;
}

/* Legibility + coherence fixes round 3 */

/* PDC: remaining stray colors (orange/red/pink/blue-indigo) -> lavande */
#PDC .span-bold-bleu-ciel,
#PDC .h6,
#PDC .text-block-4,
#PDC .chiffre-drop-menu {
  color: #7751b3;
}

/* POEC: h6 stray red -> violet */
#POEC .h6 {
  color: #9829cd;
}

/* FNE-Formation: fix low-contrast salmon-on-salmon combos */
#Experimentation .chiffre-cl-marron,
#Experimentation .bold-text-36,
#Experimentation .bold-text-34,
#Experimentation .bold-text-35,
#Experimentation .bold-text-37,
#Experimentation .chiffre-cl-royal-blue,
#Experimentation .span-bold-or {
  color: #c23b30;
}
#Experimentation .header-chiffre-expe-edflex-copy .chiffre-cl-2,
#Experimentation .header-chiffre-expe-edflex-a .chiffre-cl-2,
#Experimentation .header-chiffre-expe-edflex-b .chiffre-cl-2,
#Experimentation .header-chiffre-expe-edflex-c .chiffre-cl-2,
#Experimentation .header-chiffre-expe-edflex-d .chiffre-cl-2 {
  color: #9d3027;
}

/* FNE-Formation: remaining light-salmon text needs the dark coral too */
#Experimentation .h6,
#Experimentation .text-block-4,
#Experimentation .jaune,
#Experimentation .rose,
#Experimentation .div-block-expe-content-drom {
  color: #c23b30;
}

/* POEC: dropdown toggle pill was still using the generic pale lavender, not POEC's violet tint */
#POEC .dropdown-toggle-2,
#POEC .dropdown-toggle-2-copy {
  background-color: #f0dcf9;
}
/* The "Selon l'âge" / "Selon la catégorie" buttons must stay above their own
   panel (the panel's top:51px tucks it slightly under the button by design) */
#POEC .dropdown-toggle-2,
#POEC .dropdown-toggle-2-copy {
  position: relative;
  z-index: 999;
}

/* Opened dropdown panels (Selon la taille/l'age/etc.) still used Webflow's generic grey #dddddd background - now tinted per section */
#Alternance .dropdown-list-2,
#Alternance .dropdown-list-2-copy {
  background-color: #ffe2f1;
}
#PDC .dropdown-list-2,
#PDC .dropdown-list-2-copy {
  background-color: #ece3f7;
}
#POEC .dropdown-list-2,
#POEC .dropdown-list-2-copy {
  background-color: #f0dcf9;
}

/* Gouvernance: Collège employeurs / Collège salariés dropdown panels also used the generic grey */
#gouvernance .dropdown-list.college,
#gouvernance .dropdown-list.college-salarie {
  background-color: #fff;
}

/* Mobile-only forced line break inside "CHIFFRES NATIONAUX" tab labels —
   hidden by default (desktop/tablet keep it on one line). Placed before
   the ≤479px override below (same specificity — later wins the cascade,
   same pitfall as .drom-jump-nav above), which shows it so the label
   matches "ZOOM SUR LES DROM" wrapping to two lines there. */
.tab-label-break-mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .tab-label-break-mobile {
    display: inline;
  }
}

/* "Répartition des bénéficiaires" now shows which region/national scope it belongs to */
.repartition-context {
  font-size: 0.6em;
  font-weight: 400;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: normal;
}

/* Scroll progress bar - follows the page's own section color journey */
#ra-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 10000;
  background: linear-gradient(to right,
    #721b9d 0%, #721b9d 25.4%,
    #1c5aa8 25.4%, #1c5aa8 39.7%,
    #32b05e 39.7%, #32b05e 48.5%,
    #eb3290 48.5%, #eb3290 67.4%,
    #9b7fc7 67.4%, #9b7fc7 73.2%,
    #ffcd20 73.2%, #ffcd20 89.1%,
    #a840d9 89.1%, #a840d9 93.5%,
    #80d43b 93.5%, #80d43b 100%
  );
  pointer-events: none;
}
#ra-progress-fill {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #f4f2f7;
  transition: width 80ms linear;
}

/* DROM quick-jump pills - top of each "ZOOM SUR LES DROM" panel */
.drom-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  /* no width/max-width of its own before — it just filled whatever its
     parent gave it, which varies per section (Diagnostics' ancestor chain
     let it stretch to ~95vw, full screen width, while PDC/Alternance's
     didn't). Pin it to the same content column everywhere instead of
     depending on ancestor width. */
  max-width: 1038px;
  margin: 0 auto 2px;
  padding: 16px 20px;
  background-color: #fff;
  border-radius: 0 14px 0 0;
}
/* On mobile this top-right radius reads as an orphaned rounded notch
   against the section's own background — the active tab above it keeps
   its own full rounding (that one is correct as-is), just this bar's
   corner is squared off. Placed after the base rule (same specificity)
   so it actually wins the cascade, rather than the earlier attempt
   inside the ≤479px block above, which this later unscoped rule was
   silently overriding. */
@media screen and (max-width: 767px) {
  .drom-jump-nav {
    border-radius: 0;
  }
}
.drom-scroll-anchor {
  display: block;
  position: relative;
  top: -150px;
  visibility: hidden;
  height: 0;
  pointer-events: none;
}
.drom-jump-pill {
  display: inline-block;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  opacity: 0.85;
  transition: opacity 120ms ease, transform 120ms ease;
}
.drom-jump-pill:hover {
  opacity: 1;
  transform: translateY(-1px);
}


/* The ".white" modifier must always win: headings sitting on a saturated section-color
   box (e.g. "formation des tuteurs") need to stay white for legibility, regardless of
   which section-color override targets the bare .h6 class. */
.h6.white {
  color: #fff !important;
}

/* Section banner leaves: reuse the leaf accent baked into each FOND-*.svg banner.
   All 5 instances of one section share the SAME origin point and the SAME side —
   left for odd sections, right (.leaf-right, on the whole group) for even ones —
   so the effect reads as "one printed leaf coming alive", never crossing the
   banner's own centered title/illustration.

   Layering: the leaves are direct children of the outer .header-X element,
   painted BEFORE its .banner-fill sibling in DOM order — but since they are
   position:absolute with a NEGATIVE z-index, they paint at the "behind normal
   flow content" stacking step, while .banner-fill is a plain non-positioned
   block that paints in front of them. Concretely: whenever a leaf overlaps
   .banner-fill's box, the banner's own opaque gradient completely covers it —
   the leaf is only visible in the parts of its flight that carry it OUTSIDE
   that box (e.g. above its domed top edge). That's what makes it read as
   "the leaf emerges from underneath/behind the banner" instead of floating on
   top of a differently-coloured banner. Only the flight (--dx/--dy/--rot),
   timing (--dur/--delay) and --leaf-scale (size) vary per instance, giving a
   staggered, randomised-looking burst from a single source. */
.section-leaf {
  position: absolute;
  top: 8%;
  left: 6%;
  width: calc(34px * var(--leaf-scale, 1));
  height: calc(48px * var(--leaf-scale, 1));
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation-name: leaf-fly;
  animation-duration: var(--dur, 6s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.section-leaf.leaf-right {
  left: auto;
  right: 6%;
}
.section-leaf svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes leaf-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: .5;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 20px), var(--dy, -180px)) rotate(var(--rot, 15deg));
  }
}

/* The banner's own visible surface: a plain block sitting in front of the
   negative-z leaves (see above). Height comes purely from its content (the
   title + paragraph "text zone") plus 40px of breathing room above and below —
   no more fixed banner heights inherited from the old artwork. Each section
   only needs to set its own `background` on top of this shared shape. */
.banner-fill {
  border-radius: 100% 100% 0 0 / 40px 40px 0 0;
  padding-top: 40px;
  padding-bottom: 40px;
  overflow: visible;
}

/* Height independent of the image, image+text still centered as one group:
   the image is absolutely positioned WITHIN its own immediate wrapper
   (container-14 / div-block-70 / div-block-header-content / container-18) —
   not relative to the far-wider outer header, which is what made every
   earlier attempt need fragile hand-calculated offsets. Anchoring both image
   and text to the SAME local parent means no cross-element math at all:
   - width:fit-content on the wrapper makes IT size to its real content
     (padding-left reserved for the image + the text's own natural width),
   - margin:auto (already set) then centers that actual-sized box on the
     page, correctly, for any image width or text length, at any viewport.
   The image no longer contributes to the wrapper's height since absolutely
   positioned children never do — only the text does. banner-fill's
   overflow was switched to visible so the image can overflow upward
   uncropped; nothing was actually relying on that clipping (it existed for
   the old artwork, not this plain-gradient dome). */
.header-bref-1280 .container-14,
.header-gouvernance-1280 .container-14,
.header-alternance-1280 .div-block-header-content,
.header-pdc-1280 .div-block-70,
.header-diag-1280-ok .div-block-70,
.header-poec-1280 .container-18 {
  position: relative;
  width: fit-content;
}
/* container-14's base rule carries a dormant "top: 102px" (harmless while it
   was position:static) that activates now that it's position:relative here —
   zero it so it doesn't get pushed down. */
.header-bref-1280 .container-14,
.header-gouvernance-1280 .container-14 {
  top: 0;
}
.header-bref-1280 .container-14 {
  padding-left: 327px;
}
.header-gouvernance-1280 .container-14 {
  padding-left: 450px;
}
.header-alternance-1280 .div-block-header-content {
  padding-left: 458px;
}
.header-pdc-1280 .div-block-70 {
  padding-left: 359px;
}
.header-diag-1280-ok .div-block-70 {
  padding-left: 291px;
}
.header-poec-1280 .container-18 {
  padding-left: 350px;
}
.header-bref-1280 .container-14 > img,
.header-gouvernance-1280 .container-14 > img,
.header-alternance-1280 .div-block-header-content > img,
.header-pdc-1280 .div-block-70 > img,
.header-diag-1280-ok .div-block-70 > img,
.header-poec-1280 .container-18 > img {
  position: absolute;
  left: 0;
  /* container's own bottom sits 40px above banner-fill's true bottom edge
     (banner-fill's padding-bottom) — offset by that same amount so the image
     aligns with the actual bottom of the banner, not just its wrapper. */
  bottom: -40px;
  margin: 0;
}
/* div-block-70's base rule clips overflow (leftover from the old artwork) —
   override it here so the image can overflow upward as intended. */
.header-pdc-1280 .div-block-70,
.header-diag-1280-ok .div-block-70 {
  overflow: visible;
}

/* Tablet (≤991px): the desktop banner layout above reserves room for the
   image via a fixed padding-left on a width:fit-content wrapper (327px,
   450px, 458px, 359px, 291px, 350px — all calibrated for ≥1280px). At
   tablet widths that padding alone can exceed the viewport, forcing
   fit-content wider than the screen and overlapping the image with the
   text. Below 991px these 6 banners switch to a simple stacked layout
   instead: image on top (full width, capped), text below (full width) —
   there just isn't enough horizontal room for image+text side by side.
   Bounded to 768-991px (tablet only) — was max-width:991px alone, which,
   being unbounded on the low end, also reached every phone width. Mobile
   itself now runs all the way up to 767px (its own ≤767px rules, see
   below), so this tablet block hands off directly to mobile with no gap
   in between — an earlier attempt widened THIS block down to 480px
   instead, but tablet's multi-column layouts (fixed image widths, 2-up
   grids) don't degrade gracefully that far down; simplest and most
   robust was to just let mobile's already-proven single-column styles
   own that whole range instead. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Each header's own base rule carries a desktop-tuned margin used to
     overlap the previous section by exactly 60px (margin-top:-60px, kept
     here) plus assorted left/right values calibrated for ≥1280px —
     .header-bref-1280's -17px left margin in particular, harmless on a
     wide desktop canvas, bleeds the banner 17px off-screen on the left
     at tablet widths and leaves a matching gap short of the right edge.
     .header-pdc-1280's max-width:102vw has the same effect. Reset to a
     clean, symmetric, true edge-to-edge full width here — vertical
     overlap margins are untouched. */
  .header-bref-1280,
  .header-gouvernance-1280,
  .header-alternance-1280,
  .header-pdc-1280,
  .header-diag-1280-ok,
  .header-poec-1280 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .header-bref-1280 .container-14,
  .header-gouvernance-1280 .container-14,
  .header-alternance-1280 .div-block-header-content,
  .header-pdc-1280 .div-block-70,
  .header-diag-1280-ok .div-block-70,
  .header-poec-1280 .container-18 {
    width: 100%;
    max-width: 100%;
    /* This padding is the ONLY source of the side margin now (see the
       text-block rule right below, which zeroes its own padding-left).
       77px matches what "Les formations en alternance" happened to
       render at before this fix: alternance/pdc/diag/poec's text block
       (.div-block-67) carried a stray, unscoped padding-left:49px left
       over from an older tablet rule (~line 5588) on top of this
       wrapper's own padding — nobody had zeroed it out — while bref/
       gouvernance's text block (.div-block-39) never had that rule, so
       they only got this wrapper's padding alone. Same visible text
       start, two different reasons, hence the mismatch. Standardized
       on one clean source: this 77px here, explicitly zeroed on every
       text block below. */
    padding-left: 77px;
    padding-right: 77px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header-bref-1280 .container-14 > img,
  .header-gouvernance-1280 .container-14 > img,
  .header-alternance-1280 .div-block-header-content > img,
  .header-pdc-1280 .div-block-70 > img,
  .header-diag-1280-ok .div-block-70 > img,
  .header-poec-1280 .container-18 > img {
    position: static;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: 360px;
    height: auto;
    margin: 0 0 16px;
  }
  .header-bref-1280 .div-block-39,
  .header-gouvernance-1280 .div-block-39,
  .header-alternance-1280 .div-block-67,
  .header-pdc-1280 .div-block-67,
  .header-diag-1280-ok .div-block-67,
  .header-poec-1280 .div-block-67 {
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }

  /* Desktop-only forced line breaks in banner titles (bref, gouvernance,
     pdc, poec) — at tablet widths they landed the break in an awkward
     spot ("L'Opcommerce" alone on one line, a very short "en bref" on
     the next) instead of wrapping naturally like alternance/diagnostics
     already do. Hidden here so the title just wraps on its own. */
  .banner-title-break {
    display: none;
  }

  /* The vertical-bar separators between desktop nav items are flex-gap
     siblings there — fine in a single horizontal row. Below 991px the
     nav collapses into .nav-menu-3's own stacked dropdown-list layout
     (display:block, each .nav-menu its own full-width row), where these
     separators become their own disruptive blank block row between every
     link instead of a thin inline divider. Not needed in a vertical
     list — hidden here. */
  .div-block-137 {
    display: none;
  }

  /* Edito kept its desktop 60px width in the collapsed dropdown, so it
     sat pinned to the left edge instead of centered full-width like
     every other stacked link. */
  .nav-menu.nav-edito {
    width: 100%;
  }

  /* Tablet menu: a right-side panel, matching the mobile (≤479px) menu's
     own dark-slate-blue in spirit — but solid, not mobile's translucent
     #004271e6, since a translucent PARTIAL-width panel would show a hard
     seam between page-showing-through on one side and opaque white
     panel-background on the other; solid reads cleaner for a drawer.
     Fixed/right-anchored rather than mobile's full-screen relative+100vh
     takeover: tablet has the width to spare, so a drawer keeps some of
     the page in view instead of a full takeover, and — since each item
     gets the panel's own comfortable width rather than being squeezed
     into a full-bleed row — there's no need to fight forced line-breaks
     the way a full-width bar would require. Overrides the pre-existing
     ≤991px rule's `position:absolute; inset:99% 0% auto` (a dropdown
     anchored under the navbar) with an explicit top/right/bottom/left,
     since individual longhand sides here fully replace that shorthand. */
  .nav-menu-3 {
    background-color: var(--dark-slate-blue);
    width: 340px;
    max-width: 85vw;
    height: 100vh;
    max-height: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    margin: 0;
    padding: 110px 28px 28px;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
  }
  .nav-menu-3 .nav-menu {
    color: #fff;
  }
}

/* Tablet ONLY (768-991px) — bounded on both ends, unlike the max-width:991px
   block above, which (being unbounded on the low end) also reaches phones.
   Each section's colored content block (Conseil d'administration,
   Diagnostics/Alternance/PDC stat wrappers, etc.) caps out at
   max-width:95vw at every width — a deliberate small side-gutter on
   desktop, but on tablet it reads as an odd, non-full stretch. 100% here,
   scoped so mobile (≤767px, with its own 479px overrides further down)
   keeps its existing 95vw.
   Going to 100% removes the ~2.5vw implicit side gutter that 95vw +
   margin:auto used to create — none of these 5 had their own
   padding-left/right (div-block-55 had 20px, the other 4 had none at
   all), so their white content cards were left sitting flush against
   the screen edge. Explicit 24px padding on all 5 replaces that lost
   gutter — a single, consistent value instead of each wrapper relying
   on a side-effect of its own max-width. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .div-block-42,
  .div-block-55,
  .div-block-diagnostic-wrapper,
  .div-block-alternance-wrapper,
  .div-block-pdc-wrapper {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Same 95vw-derived gutter issue as the 5 above, but POEC's colored
     section wrapper uses `width: 95vw` directly instead of
     `max-width: 95vw` — same fix either way. */
  .div-block-102 {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Gouvernance's 4 key figures + image (grid-4-framing-image) — the
     pre-existing ≤991px rule (untouched, still governs mobile below
     768px) stacks all 5 items in one column. On tablet there's room for
     pairs: the two top figures side by side, the image on its own row,
     the two bottom figures side by side. */
  .grid-4-framing-image {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left-top right-top" "image image" "left-bottom right-bottom";
  }
  .stat-image {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  /* Diagnostics (national "Chiffres nationaux" tab + all 4 DROM tabs):
     each region repeats the same pair of boxes side by side — a "diag
     count + Soit" box (.div-block-90 / -a/-b/-c/-d) and a "big euro
     figure + Dont" box (.div-block-71-copy / -a/-bb/-cc/-dd — note:
     NOT bare .div-block-71, which is a same-named but unrelated
     wrapper used only for the national "Typologie des entreprises"
     grid; it was mistakenly included here at first, which both
     narrowed that Typologie box to 50% width and force-stacked its
     4 figures into a single column instead of a row — reverted). The
     first box's own flex-grow:0 lets it claim whatever width its
     content naturally wants, leaving the second box with only the
     leftover space — for the euro box that leftover was too narrow for
     its own number to fit key figures like "4 557 000" on one line.
     Rebalancing both to an even 50/50 split gives the euro box enough
     room on its own. */
  .div-block-90,
  .div-block-90-a,
  .div-block-90-b,
  .div-block-90-c,
  .div-block-90-d,
  .div-block-71-copy,
  .div-block-71-a,
  .div-block-71-bb,
  .div-block-71-cc,
  .div-block-71-dd {
    flex: 1 1 0%;
    max-width: 50%;
  }

  /* Even at 50%, the euro box's own internal grid (big figure | "Dont"
     pill | co-financed figure, 3 columns) still splits that width three
     ways — not enough for the big figure alone. Collapsing to a single
     column lets it use the box's full width; order is unaffected since
     items were already flowing figure → pill → figure. */
  .div-block-71-copy .grid-2,
  .div-block-71-a .grid-2,
  .div-block-71-bb .grid-2,
  .div-block-71-cc .grid-2,
  .div-block-71-dd .grid-2 {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  /* Each co-financed figure node above still carries an explicit
     grid-area pinning it to column 3 of the old 3-column layout — with
     only 1 column left that forces a phantom empty 3rd column back into
     existence. Re-pinning to row 3 of the new single-column flow fixes
     it (same technique the mobile ≤479px version of this shared rule
     uses). That mobile rule's selector list has 15 IDs total, but 10 of
     them belong to a DIFFERENT grid (the "Typologie des entreprises"
     percentages) that isn't collapsed to 1 column here at tablet —
     copying the full list reordered that grid's items. Only the 5 IDs
     that are actually the euro-figure box's second item, one per
     region, belong here. */
  #w-node-_13cd67a4-9c94-1918-4f7c-8dd336ae2f1f-73bd8775,
  #w-node-c08a778e-69e5-2528-d619-8dff4333276e-73bd8775,
  #w-node-_12ff779b-d0c9-6e86-fc29-f6d490c4511d-73bd8775,
  #w-node-_4f9e32ec-2277-aa36-24a7-a315a7db4c62-73bd8775,
  #w-node-a65158ab-d936-1313-4c90-8f7802e29056-73bd8775 {
    grid-area: 3 / 1 / 4 / 2;
  }

  /* Équipe's title+text (.div-block-103) never got the same tablet
     treatment as the other 6 banners: .container-19 stays row/side-by-
     side (image 344px + text max-width:637px = 981px, wider than the
     768-991px viewport itself), squeezed with zero top or right
     breathing room — the title sits flush against the section's very
     top edge (margin-top/padding-top:0) and the paragraph's longer
     lines run flush to the page's right edge (0 right padding). Same
     fix as the other banners: stack image above text. Mobile (≤767px)
     already does exactly this via its own rule further down
     (flex-direction:column; padding-top:20px) — mirrored here with the
     40px top margin asked for. */
  .container-19 {
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-top: 40px;
  }
  /* 77px to match the same side-padding used on the other 6 banners'
     title/text block (.div-block-39 / .div-block-67) — was 24px, so
     Équipe's title started noticeably further left than every other
     section's. */
  .div-block-103 {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
    padding-left: 77px;
    padding-right: 77px;
  }

  /* Closing white arch (div-block-114, background-image: ARCHE.svg) at
     the very bottom of Équipe — its base background-position:0 0 (left
     edge) is fine at both desktop (image fills edge-to-edge, nothing to
     center) and mobile (a dedicated ≤479px rule pins background-size to
     100vw, matching viewport width closely enough). At tablet neither
     applies: background-size:cover scales the arch to fill the section
     width, cropping it — anchored left, so the crop comes off the right
     side and the arch reads as shifted off-center. Centering the
     position fixes it without touching desktop or mobile's own rules. */
  .div-block-114 {
    background-position: 50% 0;
  }

  /* Hero "2025" giant background numeral (.text-block-3) sits behind the
     illustration (.image-28, higher z-index) by design — desktop shows
     just the top of each digit peeking out above the artwork. The
     pre-existing tablet rule only nudged the image up 11px less than
     desktop (-56px vs -67px) — nowhere near enough once the illustration
     is scaled down to tablet width along with everything shrinking
     together; the image ended up covering more than half of each digit.
     Two-part fix: the illustration has no explicit flex-basis, so as a
     flex-row sibling of the title column it kept growing with the
     viewport (343px wide at 768px, up to 447px at 991px) — the bigger
     it got, the more of the fixed-size (109px) numeral it swallowed,
     margin-top alone couldn't keep up without the image overflowing
     past .hero-header's own bottom edge into the Edito section below.
     Capping its width keeps it a constant, small size across the whole
     768-991 range, so one margin-top value works throughout. */
  .image-28 {
    width: 340px;
    max-width: 340px;
    margin-top: 30px;
  }
}

/* True tablet only (768-991px): .grid-4-alternance / -copy (the 4
   percentage stats, reused across every section's national AND DROM
   panes) never had a tablet rule at all — its only non-desktop rule
   was the ≤767px single-column one below, so at 768-991px it was still
   the base 4-equal-column desktop grid, far too tight for a sentence-
   length stat. Here there's enough room for 2, matching the
   Gouvernance key-figures grid's own 2-up treatment at this width. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .grid-4-alternance,
  .grid-4-alternance-copy {
    grid-template-columns: 1fr 1fr;
  }
}

/* Scroll-reveal: banner titles, editorial/council cards and every stat
   figure fade in with a small upward shift as they enter the viewport —
   the page reads as building itself while you scroll, instead of every
   block just being there. See js/reveal.js for the actual trigger logic.

   Progressive-enhancement gate: the base .reveal-target rule below only
   takes effect once JS adds `reveal-ready` to <html>, so content stays
   fully visible if the script fails to load or run — nothing is ever
   opacity:0 by default. Also fully opted out under prefers-reduced-
   motion, so it never overrides a visitor's own OS-level preference. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.reveal-ready .reveal-target {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--reveal-i, 0) * 180ms);
  }
  html.reveal-ready .reveal-target.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  /* Drop the transform once the reveal transition has actually finished
     (see reveal.js's transitionend listener) — translateY(0) is still a
     transform, and ANY transform other than none opens its own stacking
     context, which was trapping z-index'd descendants (the Gouvernance
     "Collège employeurs/salariés" dropdown panels) below later siblings
     instead of letting them float above the whole page as intended. */
  html.reveal-ready .reveal-target.reveal-settled {
    transform: none;
  }
}

/* Hero: tighter title leading (was 61px @ 41px, ~1.49), lighter "Rapport d'activité" subtitle, same size */
.h1 {
  line-height: 1.2;
}
#Top .subtitle {
  font-weight: 300;
}

/* Edito pull-quote: both quote marks anchored to the white box's corners
   (symmetric offsets, no per-breakpoint tuning) and the text gets even
   padding so it never runs under a mark. */
.quote-wrapper .quote {
  padding: 34px 48px 34px;
  box-sizing: border-box;
}
.quote-wrapper .quote-in,
.quote-wrapper .quote-out {
  position: absolute;
  width: 26px;
  height: auto;
  margin: 0;
}
.quote-wrapper .quote-in {
  top: 14px;
  left: 14px;
  right: auto;
  bottom: auto;
}
.quote-wrapper .quote-out {
  right: 14px;
  bottom: 14px;
  top: auto;
  left: auto;
}
@media screen and (max-width: 479px) {
  .quote-wrapper .quote {
    padding: 30px 32px;
  }
  .quote-wrapper .quote-in,
  .quote-wrapper .quote-out {
    width: 20px;
  }
  .quote-wrapper .quote-in { top: 10px; left: 10px; }
  .quote-wrapper .quote-out { right: 10px; bottom: 10px; }
}

/* Edito pull-quote: breathing room above/below the white box */
.quote-wrapper {
  margin-top: 36px;
  margin-bottom: 36px;
}
@media screen and (max-width: 479px) {
  .quote-wrapper {
    margin-top: 28px;
    margin-bottom: 28px;
  }
}

/* "L'Opcommerce en bref" title on a single line (desktop banner only; mobile keeps two lines) */
.header-bref-1280 .h2 {
  white-space: nowrap;
}

/* Desktop section banners: same height everywhere, set by the tallest one
   (Plan de développement des compétences, 378px at 1280). */
@media screen and (min-width: 992px) {
  .header-bref-1280 .banner-fill,
  .header-gouvernance-1280 .banner-fill,
  .header-alternance-1280 .banner-fill,
  .header-pdc-1280 .banner-fill,
  .header-diag-1280-ok .banner-fill,
  .header-poec-1280 .banner-fill {
    box-sizing: border-box;
    min-height: 378px;
  }
}

/* Desktop banners: title + intro block centered vertically in the (now equal-height) banner */
@media screen and (min-width: 992px) {
  .header-bref-1280 .banner-fill,
  .header-gouvernance-1280 .banner-fill,
  .header-alternance-1280 .banner-fill,
  .header-pdc-1280 .banner-fill,
  .header-diag-1280-ok .banner-fill,
  .header-poec-1280 .banner-fill {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .header-bref-1280 .banner-fill > .w-container,
  .header-gouvernance-1280 .banner-fill > .w-container,
  .header-alternance-1280 .banner-fill > .w-container,
  .header-pdc-1280 .banner-fill > .w-container,
  .header-diag-1280-ok .banner-fill > .w-container,
  .header-poec-1280 .banner-fill > .w-container {
    width: 100%;
  }
}

/* POEC mobile banner now carries the intro paragraph: give it the same vertical padding as PDC's */
@media screen and (max-width: 991px) {
  .header-poec-mobile {
    padding-bottom: 20px;
  }
}

/* Dropdown arrows: turn 180° when a panel opens, back when it closes.
   !important because the exported markup carries inline transform styles. */
.w-dropdown-toggle > .w-icon-dropdown-toggle {
  transform: rotate(0deg) !important;
  transition: transform 0.25s ease;
}
.w-dropdown-toggle.w--open > .w-icon-dropdown-toggle {
  transform: rotate(180deg) !important;
}
@media (prefers-reduced-motion: reduce) {
  .w-dropdown-toggle > .w-icon-dropdown-toggle {
    transition: none;
  }
}

/* Desktop banners: illustration vertically centered on the banner (the text block is centered too,
   and both share the same centered flex container). */
@media screen and (min-width: 992px) {
  .header-bref-1280 .banner-fill img,
  .header-gouvernance-1280 .banner-fill img,
  .header-alternance-1280 .banner-fill img,
  .header-pdc-1280 .banner-fill img,
  .header-diag-1280-ok .banner-fill img,
  .header-poec-1280 .banner-fill img {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

/* ---- Gouvernance: Collège employeurs / salariés volets on white (pills + panels) ---- */
#gouvernance .dropdown-list.college,
#gouvernance .dropdown-list.college-salarie,
#gouvernance .dropdown-list.college.w--open,
#gouvernance .dropdown-list.college-salarie.w--open {
  background-color: #fff;
}

/* ---- Volets: micro-animation on open / close (all dropdown panels) ---- */
@keyframes dd-panel-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dd-panel-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.99); }
}
@keyframes dd-item-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.w-dropdown-list.w--open {
  transform-origin: top center;
  animation: dd-panel-in 0.26s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.w-dropdown-list.w--open.is-closing {
  animation: dd-panel-out 0.18s ease-in both;
  pointer-events: none;
}
/* Content follows the panel a beat later so it feels like it unfolds */
.w-dropdown-list.w--open:not(.is-closing) > * {
  animation: dd-item-in 0.3s ease-out 0.06s both;
}
.w-dropdown-toggle {
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .w-dropdown-list.w--open,
  .w-dropdown-list.w--open > * {
    animation: none !important;
  }
}

/* PDC DROM: region titles ("Le Plan de développement des compétences en …") use the same violet as the tabs */
#PDC .jaune {
  color: #8563bb;
}

/* ---- Filets ----
   Two levels, each one thickness site-wide:
   1) figure separators INSIDE a dispositif (.ligne-*): 1px hairline, slightly softened
      (Diagnostics used 2px, the other sections 1px);
   2) DROM separators (borders of the *-content-drom blocks): 2px, unchanged and already
      identical for Diagnostics, Alternance, PDC, Expérimentation and POEC. */
.ligne-or,
.ligne-royal-blue,
.ligne-bleu-ciel,
.ligne-violet {
  height: 1px;
  opacity: 0.6;
}

/* Alternance DROM blocks drew a 2px top AND a 2px bottom border on every block, so two stacked
   blocks got a 4px separator (Diagnostics and PDC already show a single 2px one). Only the first
   block keeps its top line; the others rely on the previous block's bottom line. */
#Alternance .div-block-alternance-content-drom ~ .div-block-alternance-content-drom {
  border-top-width: 0;
}

/* ======================================================================
   Spacing pass (desktop ≥992px) — one rhythm across every section
   - banner → first content: 48px visible gap everywhere (was 14–43px)
   - content panes: same padding in every dispositif (Diagnostics/POEC had no bottom room)
   - Gouvernance cards + stat modules: more inner air
   Backup of the site before this pass: RA2025/site_backup_20260924-1652
   ====================================================================== */
@media screen and (min-width: 992px) {
  /* 1. Section wrappers: top padding tuned so the first block sits 48px under the banner */
  .div-block-42 { padding-top: 73px; }
  .div-block-55 { padding-top: 86px; padding-bottom: 100px; }
  .div-block-alternance-wrapper { padding-top: 58px; }
  .div-block-pdc-wrapper { padding-top: 48px; }
  .div-block-diagnostic-wrapper { padding-top: 75px; }
  .div-block-102 { padding-top: 108px; }

  /* 2. Content panes (tab bodies) */
  .div-block-alternance-content,
  .div-block-alternance-content-drom,
  .div-block-pdc-content,
  .div-block-pdc1-content-drom-copy,
  .div-block-dignostic-content,
  .div-block-poec-content {
    padding: 28px 28px 44px;
  }

  /* 3. Gouvernance cards */
  .div-block-59,
  .div-block-61,
  .div-block-66 {
    padding: 28px;
  }
  .div-block-59 { margin-right: 24px; flex: 0 0 294px; width: 294px; }
  .div-block-61 { flex: 1 1 0; width: auto; min-width: 0; }
  .div-block-66 { margin-top: 24px; margin-bottom: 0; }

  /* 4. Stat modules (figure tiles) */
  .w-tab-pane [class*="module-chiffre-"],
  .div-block-poec-content [class*="module-chiffre-"] {
    padding: 14px 14px;
  }
}

/* ======================================================================
   992–1100px: fixed-width blocks were wider than the viewport and pushed the
   page ~60px sideways. Let each one shrink / wrap instead of overflowing.
   ====================================================================== */
@media screen and (min-width: 992px) and (max-width: 1100px) {
  /* hero title */
  .h1 { margin-right: 0; max-width: 100%; }

  /* edito: signature/photos row */
  .div-block-139 { max-width: 100%; margin-right: 0; }

  /* Sections paritaires: three fixed columns -> flexible columns */
  .div-block-57 > .div-block-63,
  .div-block-57 > .div-block-64 { flex: 1 1 0; min-width: 0; }
  .div-block-57 p { max-width: 100%; }

  /* Alternance / PDC / POEC region dropdown rows */
  .div-block-91 > .dropdown,
  .div-block-147 > .dropdown {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
}

/* ======================================================================
   Menu: hamburger / side drawer up to 1269px (was 991px).
   Below 1270px the longest label (POEC) needs 4 lines in the horizontal nav; from 1270px
   it fits on 3 (measured), so that is where the desktop menu takes over again.
   Rules below replay the existing ≤991px navbar rules for 992–1269px.
   ====================================================================== */
@media screen and (min-width: 992px) and (max-width: 1269px) {
  .w-nav[data-collapse='medium'] .w-nav-menu { display: none; }
  .w-nav[data-collapse='medium'] .w-nav-button { display: block; }

  .nav-menu {
    margin-top: 17px;
    margin-bottom: 17px;
    display: block;
  }

  .brand-2 {
    width: 175px;
    min-width: auto;
    max-width: 175px;
    margin-top: -32px;
    padding-left: 9px;
    padding-right: 9px;
    position: absolute;
    inset: -48% auto auto 3%;
  }

  .brand-2.w--current {
    margin-top: -25px;
  }

  .container-4 {
    flex-direction: column;
    justify-content: flex-start;
  }

  .nav-menu-3 {
    background-color: #fffc;
    flex-direction: row;
    align-items: center;
    width: 768vw;
    max-width: 768px;
    max-height: none;
    margin-left: 0;
    margin-right: -60px;
    display: block;
    position: absolute;
    inset: 99% 0% auto;
    overflow: visible;
  }

  .div-block-23 {
    position: absolute;
    inset: 0% auto 0% 28%;
  }

  .menu-button {
    height: 62px;
    max-height: 62px;
    margin-left: auto;
    margin-right: 0;
    display: block;
    top: auto;
  }

  .menu-button.w--open {
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .menu-burger {
    margin-left: auto;
    margin-right: auto;
    padding-top: 4px;
    padding-bottom: 2px;
  }

  .div-block-137 {
    display: none;
  }

  .nav-menu.nav-edito {
    width: 100%;
  }

  .nav-menu-3 {
    background-color: var(--dark-slate-blue);
    width: 340px;
    max-width: 85vw;
    height: 100vh;
    max-height: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    margin: 0;
    padding: 110px 28px 28px;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
  }

  .nav-menu-3 .nav-menu {
    color: #fff;
  }
}

/* Hero (desktop): illustration lifted so the figures no longer touch the bottom curve,
   and the title block (subtitle + title + PDF button) centered vertically in the visible band
   (navbar bottom → curve). */
@media screen and (min-width: 992px) {
  /* the illustration container is vertically centered by the flex row, so a margin change on
     the image cancels out — shift the whole container instead (layout untouched) */
  .hero-header .flex-container > .w-layout-blockcontainer { position: relative; top: -49px; }
  .div-block-117 { margin-top: 42px; }
}

/* Edito pull-quote: closing quote mark turned 180° (same SVG as the opening one) */
.quote-wrapper .quote-out {
  transform: rotate(180deg);
}