.elementor-7 .elementor-element.elementor-element-6249858d{--display:flex;}.elementor-7 .elementor-element.elementor-element-7caa895b{--display:flex;}.elementor-7 .elementor-element.elementor-element-3a597182{--display:flex;}.elementor-7 .elementor-element.elementor-element-283df528{--display:flex;}.elementor-7 .elementor-element.elementor-element-2094f2ce{--display:flex;}.elementor-7 .elementor-element.elementor-element-5052d558{--display:flex;}.elementor-7 .elementor-element.elementor-element-43968e2c{--display:flex;}.elementor-7 .elementor-element.elementor-element-3124f938{--n-accordion-title-font-size:1.5rem;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-title-normal-color:#242E5F;--n-accordion-title-hover-color:#A8480A;--n-accordion-icon-size:12px;}.elementor-7 .elementor-element.elementor-element-3124f938 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:solid;border-width:0px 0px 1px 0px;border-color:rgba(36, 46, 95, 0.18);}.elementor-7 .elementor-element.elementor-element-3124f938 {--n-accordion-padding:22px 0px 22px 0px;}:where( .elementor-7 .elementor-element.elementor-element-3124f938 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Clash Display", Sans-serif;font-weight:400;line-height:1.24em;}:where( .elementor-7 .elementor-element.elementor-element-3124f938 > .e-n-accordion > .e-n-accordion-item ) > .e-con{border-style:none;}body.elementor-page-7:not(.elementor-motion-effects-element-type-background), body.elementor-page-7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF7F2;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-7 .elementor-element.elementor-element-3124f938{--n-accordion-title-font-size:1.12rem;}}/* Start custom CSS *//* ==========================================================================
   Ce que l'editeur Elementor ne sait pas exprimer : pseudo-elements,
   selecteurs descendants, et les composants pilotes en JS.
   ========================================================================== */

/* --- Le bloc orange decale derriere les boutons --- */
.btn { position: relative; text-decoration: none; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: translate(7px, 7px);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.btn:hover, .btn:focus-visible { transform: translate(3px, 3px); }
.btn:hover::after, .btn:focus-visible::after { transform: translate(0, 0); }
.btn:active { transform: translate(7px, 7px); }
.btn-ghost::after { display: none; }
.btn-ghost:hover { transform: none; }
.btn .arrow { transition: transform .22s ease; display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

/* --- Le filet court devant chaque surtitre --- */
.eyebrow::before {
  content: ''; width: clamp(18px, 2.6vw, 38px); height: 2px;
  background: var(--accent); flex: none;
}

/* --- Le numero d'essai : « ESSAI » en exposant --- */
.essai-mot { font-size: .24em; letter-spacing: .2em; opacity: .9; vertical-align: super; }

/* --- Le mot souligne a main levee (le SVG est injecte par le code custom) --- */
.mark { position: relative; display: inline-block; }

.mark svg {
  position: absolute; left: -2%; bottom: -.24em; width: 104%; height: .36em;
  overflow: visible; pointer-events: none;
}

.mark path { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }

.hero-h1 em.mark {
    font-style: normal;
    color: var(--accent-deep);
}

/* --- Puces a tiret orange dans les cartes « Pour qui » --- */
.card-li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 2px; background: var(--accent);
}
/* Deux colonnes des que la carte est assez large (requete de conteneur) */
.card { container-type: inline-size; }
@container (min-width: 520px) {
  .card-list { display: block; columns: 2; column-gap: 1.6rem; }
  .card-li { break-inside: avoid; margin-bottom: .5rem; }
}

/* --- La bascule (reframe) : le trait de biffure et l'empilement --- */
.reframe-from { position: relative; }
.reframe-strike {
  position: absolute; left: -1.5%; top: 46%; width: 103%; height: .5em;
  overflow: visible; pointer-events: none;
}
.reframe-strike path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
/* Sans JS, seule la premiere paire s'affiche : etat statique parfaitement lisible */
.reframe-pair + .reframe-pair { opacity: 0; visibility: hidden; }
.reframe-label .sep { color: var(--accent); font-size: 1.35em; line-height: 1; }
.reframe-label em { font-style: normal; color: var(--accent-deep); }
@media (max-width: 879px) {
  .reframe-to::before {
    content: ''; display: block; width: 26px; height: 2px;
    background: var(--accent); margin-bottom: clamp(.7rem, 1.4vw, 1rem);
  }
}
/* Le bouton pause, injecte par le code custom (WCAG 2.2.2) */
.reframe-toggle {
  position: absolute; right: 0; top: clamp(1.6rem, 3vw, 2.4rem);
  display: none; align-items: center; gap: .55rem; min-height: 44px;
  padding: .4rem .9rem .4rem .6rem; cursor: pointer; background: transparent;
  border: 1px solid var(--rule); color: var(--ink-soft);
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; font-family: var(--e-text, inherit);
  transition: color .2s ease, border-color .2s ease;
}
.reframe-toggle[data-ready='true'] { display: inline-flex; }
.reframe-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }
.reframe-toggle .icon {
  width: 14px; height: 14px; flex: none;
  border-left: 4px solid var(--accent); border-right: 4px solid var(--accent);
}
.reframe-toggle[aria-pressed='true'] .icon {
  border: 0; width: 0; height: 0; border-left: 12px solid var(--accent);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@media (max-width: 879px) { .reframe-toggle { position: static; margin-top: 1.4rem; } }

/* --- Le schema defi / menace --- */
.balance { background: var(--paper); border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.4rem); }
.balance .eyebrow { display: flex; align-items: center; gap: .7rem; font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 1.1rem; }
.balance__switch { display: flex; gap: .4rem; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
.balance__switch button {
  flex: 1; min-height: 46px; padding: .7rem .9rem; cursor: pointer;
  background: var(--paper-3); border: 1px solid transparent; color: var(--ink-mid);
  font: inherit; font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.balance__switch button[aria-pressed='true'] { background: var(--ink); color: var(--on-ink); }
.bar { margin-bottom: 1.3rem; }
.bar__label { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; font-size: var(--fs-small); font-weight: 500; margin: 0 0 .55rem; }
.bar__label i { font-style: normal; font-size: var(--fs-eyebrow); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); }
.bar__track { height: 16px; background: var(--paper-3); position: relative; overflow: hidden; }
.bar__fill { position: absolute; inset: 0; transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.bar__fill--res { background: var(--accent); }
.bar__fill--exi { background: var(--ink-2); }
.balance__out { margin-top: clamp(1.4rem, 2.6vw, 2rem); padding-top: clamp(1.2rem, 2.2vw, 1.7rem);
  border-top: 1px solid var(--rule); }
.balance__out strong { display: block; font-family: var(--e-title, inherit); font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.02em; line-height: 1; margin-bottom: .6rem; }
.balance__out p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }

/* --- Divers --- */
.stars { color: var(--accent-deep); letter-spacing: .12em; }
.nowrap { white-space: nowrap; }
.infos-box a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* Le debord volontaire du bloc marine, a partir du desktop */
@media (min-width: 900px) {
  .breakout { width: calc(100% + clamp(0px, 4vw, 90px)); }
}/* End custom CSS */