@font-face {
  font-family: "Mallet Source Sans";
  src: url("/media/templates/site/cassiopeia_extended/fonts/SourceSansPro-Regular-webfont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Mallet Source Sans";
  src: url("/media/templates/site/cassiopeia_extended/fonts/SourceSansPro-Light-webfont.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

body.site {
  --cassiopeia-font-family-body: "Mallet Source Sans", Arial, sans-serif;
  --cassiopeia-font-family-headings: Arial, Helvetica, sans-serif;
  background: #f9fdfe url("/media/templates/site/cassiopeia_extended/images/mallet-bg-top.jpg?v=20261001b") 50% 0 no-repeat fixed;
  color: #526170;
  font-family: var(--cassiopeia-font-family-body);
}

body.site a { color: #117ab5; }
body.site a:hover, body.site a:focus-visible { color: #0b547c; }

.container-header {
  width: 100%;
  max-width: 1120px;
  min-height: 249px;
  margin: 10px auto 0;
  padding: 0;
  background: transparent;
  color: #185b84;
  box-shadow: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
}

.container-header .grid-child { width: auto; max-width: none; padding: 0; margin: 0; }
.container-header .navbar-brand { margin: 0 0 22px; padding: 0; }
.container-header .brand-logo img { width: 157px; height: 143px; object-fit: contain; }
.container-header .container-topbar { position: absolute; top: 23px; right: 0; margin: 0; }
.container-header .container-topbar .connexion {
  background: #145788;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font: 14px Arial, sans-serif;
  padding: 7px 14px;
}

.container-header .container-nav { margin: 0 0 32px; }
.container-header .mod-menu { display: flex; flex-wrap: nowrap; gap: 15px; align-items: center; }
.container-header .mod-menu > li { white-space: nowrap; }
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button { color: #155980; font: 17px Arial, sans-serif; text-decoration: none; }
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible { color: #0a90cf; }

.site-grid, .container-footer .grid-child { max-width: 1120px; margin-inline: auto; }
.site-grid { gap: 18px; }
.itemid-131 .site-grid { column-gap: 0; row-gap: 0; }
.site-grid .container-component { min-width: 0; }
.site-grid .container-top-a,
.site-grid .container-bottom-a { width: 100%; max-width: 1120px; }
.site-grid .article-info { display: none; }


/* Native article layout follows the source content and sidebar columns. */
body:not(.itemid-131) .site-grid {
  width: calc(100% - 40px);
  grid-template-columns: [full-start main-start] minmax(0, 1fr) [main-end full-end];
  grid-template-areas: none;
  gap: 0;
  margin-top: 10px;
}
body:not(.itemid-131) .container-component {
  grid-column: main-start / main-end;
  grid-row: 1;
  padding: 40px 30px 30px;
  color: #8699a9;
  font: 18px / 22px "Mallet Source Sans", Arial, sans-serif;
}
body.has-sidebar-left:not(.itemid-131) .site-grid {
  grid-template-columns: [full-start main-start] minmax(0, calc(25% - 15px)) minmax(0, 1fr) [main-end full-end];
  column-gap: 50px;
}
body.has-sidebar-left:not(.itemid-131) .container-component { grid-column: 2; padding-left: 0; }
.container-sidebar-left { grid-column: 1; grid-row: 1; align-self: start; margin-top: 45px; color: #8699a9; font: 18px / 22px "Mallet Source Sans", Arial, sans-serif; }
body .container-sidebar-left > .sidebar-left.card { margin: 0 0 20px; }
.container-sidebar-left > .style-none { color: #8699a9; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.container-sidebar-left > .style-none > .card-body { padding: 0; }
.container-sidebar-left img { max-width: 100%; height: auto; border: 0; border-radius: 0 25px; }
.container-sidebar-left p { margin: 0 0 15px; }
.container-sidebar-left > .color-color { padding: 30px; border: 0; border-radius: 0; background: #686c72; color: #fff; }
.container-sidebar-left > .color-color > .card-header { margin: 0 0 15px; padding: 0; border: 0; background: transparent; color: #f1f1f1; font: 700 22px / 30px Arial, sans-serif; }
.container-sidebar-left > .color-color > .card-body { padding: 0; }
.container-sidebar-left .mod-menu { display: block; padding: 0; margin: 0; list-style: none; }
.container-sidebar-left .mod-menu li { padding: 0 0 15px; margin: 0; border-bottom: 1px solid #ddeaee; }
.container-sidebar-left .mod-menu li:last-child { padding-bottom: 0; border-bottom: 0; }
.container-sidebar-left .mod-menu a { color: #fff; font: 18px / 22px "Mallet Source Sans", Arial, sans-serif; text-decoration: none; }
.container-sidebar-left .mod-menu a:hover, .container-sidebar-left .mod-menu a:focus-visible { text-decoration: underline; }
body:not(.itemid-131) .container-component > main { width: 100%; }
body:not(.itemid-131) .container-component > #system-message-container:empty + main { margin-top: 0; }
.container-sidebar-left .style-none .mod-custom > p:first-child img { vertical-align: baseline; }
.com-content-article .page-header { margin: 0 0 15px; }
.com-content-article h1 { margin: 0; color: #686c72; font: 100 40px / 50px Arial, Helvetica, sans-serif; }
.com-content-article h2 { margin: 25px 0 15px; color: #686c72; font: 100 30px / 38px Arial, Helvetica, sans-serif; }
.com-content-article h3 { margin: 25px 0 15px; color: #2697d1; font: 100 22px / 30px Arial, Helvetica, sans-serif; }
.com-content-article__body p { margin: 0 0 15px; }
.com-content-article__body > :first-child { margin-top: 0; }
.com-content-article__body > p:empty { display: none; }
.com-content-article__body > ul, .com-content-article__body > ol { margin: 15px 0; padding-left: 26px; }
.com-content-article__body > ul > li, .com-content-article__body > ol > li, .mallet-accordion-content li { padding-bottom: 15px; }
.mallet-accordion details { margin-bottom: 10px; }
.mallet-accordion summary {
  display: block;
  padding: 7px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: linear-gradient(#fafafa, #f5f5f5);
  color: #2697d1;
  cursor: pointer;
  font: 100 22px / 30px Arial, Helvetica, sans-serif;
  list-style: none;
}
.mallet-accordion summary::-webkit-details-marker { display: none; }
.mallet-accordion summary::before { content: "+"; display: inline-block; width: 20px; color: #777; }
.mallet-accordion details[open] > summary::before { content: "−"; }
.mallet-accordion summary:focus-visible { outline: 2px solid #117ab5; outline-offset: 2px; }
.mallet-accordion-content { padding: 10px 7px; }
.mallet-accordion-content img { display: inline; vertical-align: middle; }

.itemid-131 .container-top-a {
  display: grid;
  grid-template-columns: minmax(0, 740px) minmax(0, 360px);
  gap: 20px;
  margin-top: 20px;
  align-items: stretch;
}
.itemid-131 .container-top-a > .card { border: 0; border-radius: 0; background: transparent; box-shadow: none; margin: 0; min-width: 0; }
.itemid-131 .container-top-a > .card .card-body { padding: 0; }
.itemid-131 .container-top-a #mod-custom159 { background: #fff; padding: 30px; min-height: 374px; }
.itemid-131 #mod-custom159 p { margin: 0 0 20px; }
.itemid-131 #mod-custom159 a img { display: block; max-width: 100%; height: auto; }
.itemid-131 #mod-custom159 a:hover img { opacity: .85; }
.itemid-131 #mod-custom159 hr { border-color: #d5e1e5; margin: 14px 0 20px; }
.itemid-131 #mod-custom159 .mallet-phone { display: block; width: 297px; max-width: 100%; margin: auto; }
.itemid-131 .container-component,
.itemid-131 .container-sidebar-right { display: none; }

.mallet-hero { position: relative; width: 100%; aspect-ratio: 740 / 374; overflow: hidden; border-radius: 0 92px 0 92px; }
.mallet-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: mallet-slide 30s infinite; }
.mallet-hero img:nth-child(1) { animation-delay: 0s; }
.mallet-hero img:nth-child(2) { animation-delay: 5s; }
.mallet-hero img:nth-child(3) { animation-delay: 10s; }
.mallet-hero img:nth-child(4) { animation-delay: 15s; }
.mallet-hero img:nth-child(5) { animation-delay: 20s; }
.mallet-hero img:nth-child(6) { animation-delay: 25s; }
@keyframes mallet-slide { 0%, 15% { opacity: 1; } 18%, 97% { opacity: 0; } 100% { opacity: 1; } }

.itemid-131 .container-bottom-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.itemid-131 .container-bottom-a > .card {
  min-height: 525px;
  border: 1px solid #d9e1e5;
  border-radius: 0 25px;
  background: #fff;
  box-shadow: 0 1px 3px #b5c5ca66;
  overflow: hidden;
  margin: 0;
}
.itemid-131 .container-bottom-a .card-header { background: transparent; border: 0; color: #686c72; font: 700 22px Arial, sans-serif; padding: 30px 30px 15px; }
.itemid-131 .container-bottom-a .card-body { padding: 0 30px 30px; color: #1388c6; font-size: 16px; }
.itemid-131 .container-bottom-a > .card > .card-body:first-child { padding-top: 30px; }
.itemid-131 .container-bottom-a #mod-custom115 .btn { display: block; max-width: 250px; margin: 30px auto 0; padding: 0; background: #1775a9; border-radius: 22px; }
.itemid-131 .container-bottom-a #mod-custom115 .btn a { display: block; padding: 5px 15px; color: #fff; font: 22px Arial, sans-serif; text-decoration: none; }
.itemid-131 .container-bottom-a #mod-custom124 p:first-child { margin-top: 0; }
.itemid-131 .container-bottom-a #mod-custom124 strong { color: #686c72; font: 400 22px Arial, sans-serif; }

.container-footer {
  background: linear-gradient(#d5f5fa, #b7f1f3);
  color: #8296a5;
  margin-top: 50px;
  padding: 25px 0 5px;
  font-size: 14px;
  text-align: right;
  position: relative;
}
.container-footer .grid-child { display: block; padding: 0; }
.container-footer .mallet-footer-date { float: left; }
.container-footer .mallet-to-top {
  position: absolute;
  top: -26px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
  border: 1px solid #4ab8d6;
  border-radius: 50%;
  background: #fff;
  color: #1684c0;
  text-decoration: none;
}
.container-footer a { color: #146c9c; }
.container-footer p { margin: 0; }

/* The Expert+ reader stays inside one native article/module and never styles the site shell. */
#eplus-container { position: relative; max-width: 100%; margin: 15px auto 0; color: #8699a9; }
#eplus-container .navbar-general {
  display: flow-root;
  background: linear-gradient(#eee, #ccc);
  box-shadow: 0 0 3px 3px #0003;
  padding: 0;
  margin-bottom: 10px;
}
#eplus-container .navbar-general ul { display: block; float: left; padding: 0; margin: 0; list-style: none; }
#eplus-container .navbar-general li { float: left; display: block; position: relative; margin-right: 10px; padding: 10px; font-size: 21.6px; }
#eplus-container .navbar-general a { font-size: inherit; text-decoration: none; }
#eplus-container .navbar-form { margin: 8px 0 0; }
#eplus-container .navbar-form form { display: block; float: left; margin: 0; }
#eplus-container .searchterm { box-sizing: content-box; width: 100px; padding: 4px 6px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; font: 14px / 20px "Helvetica Neue", Helvetica, Arial, sans-serif; vertical-align: middle; }
#eplus-container .navbar-form button { padding: 4px 12px; border: 1px solid #ccc; border-radius: 4px; font: 14px / 20px "Helvetica Neue", Helvetica, Arial, sans-serif; vertical-align: middle; background: linear-gradient(#fff, #e6e6e6); color: #333; }
#eplus-container .colgauche { float: left; width: 48%; margin-right: 3%; min-width: 0; }
#eplus-container .coldroite { float: left; width: 49%; min-width: 0; }
#eplus-container [ng-view]::after { content: ""; display: block; clear: both; }
#eplus-container h2 { color: #477dab; font: 100 30px / 38px Arial, Helvetica, sans-serif; margin: 20px 0; }
#eplus-container .article-teaser { padding: 8px 0 18px; border-bottom: 1px dotted #aab4ba; }
#eplus-container .article-teaser img { max-width: 160px; height: auto; float: right; margin: 0 0 10px 15px; }
#eplus-container .chiffreutile-fond { border: 1px solid #c2cbd0; box-shadow: 0 0 4px #0002; padding: 20px 30px; }
#eplus-container img, #eplus-container table { max-width: 100%; }
#eplus-container table { display: block; overflow-x: auto; }
/* The vendor checkbox accordion must remain independent of Bootstrap collapse. */
#eplus-container .article-full > img { display: block; float: right; width: 340px; max-width: 100%; max-height: 340px; height: auto; margin: 0 0 10px 10px; }
#eplus-container .article-full h1 { margin: 25px 0 15px; }
#eplus-container .article-full > p { margin: 15px 0; }
#eplus-container .eplus-auteur { display: block; color: #848484; font-size: 15px; margin-bottom: 5px; }
#eplus-container #accordion label.collapse { display: block; height: auto; visibility: visible; overflow: hidden; font-size: 31px; line-height: 20px; margin-bottom: 5px; }
#eplus-container #accordion h2.chapitre { box-sizing: content-box; background: #f0f0f0; color: #2697d1; font: 100 30px / 38px Arial, Helvetica, sans-serif; margin: 5px 0; padding: 5px; border-bottom: 1px solid #e6e6e6; cursor: pointer; }
#eplus-container #accordion label.collapse + input,
#eplus-container #accordion label.collapse + input + div { display: none; }
#eplus-container #accordion label.collapse + input:checked + div { display: block; }
#eplus-container #accordion label.collapse:focus-visible { outline: 2px solid #117ab5; outline-offset: 2px; }
#eplus-container ul.article-links { display: flow-root; list-style: none; padding: 0; margin: 5px 0 0; clear: both; border-top: 1px dashed #848484; }
#eplus-container ul.article-links li { float: right; margin-right: 3px; padding: 3px; font-size: 15px; }
#eplus-container ul.article-links a { color: #848484; }
#eplus-container .module-eplus { padding-left: 24px; }

/* The simulator modules form two rows after the introductory article. */
body:has(#mod-custom123) .container-bottom-a,
body:has(#mod-custom123) .container-bottom-b { grid-column: main-start / main-end; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: calc(100% + 20px); max-width: none; margin-inline: -10px; gap: 0; }
body:has(#mod-custom123) .container-bottom-a { grid-row: 2; }
body:has(#mod-custom123) .container-bottom-b { grid-row: 3; }
body:has(#mod-custom123) .container-bottom-a > .card,
body:has(#mod-custom123) .container-bottom-b > .card { margin: 10px; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
body:has(#mod-custom123) .container-bottom-a .card-body,
body:has(#mod-custom123) .container-bottom-b .card-body { padding: 0; color: #8699a9; font: 18px / 22px "Mallet Source Sans", Arial, sans-serif; }
body:has(#mod-custom123) .mod-custom h3 { margin: 0 0 15px; color: #2697d1; font: 100 22px / 30px Arial, Helvetica, sans-serif; }
body:has(#mod-custom123) .mod-custom ul { margin: 0 0 10px 25px; padding: 0; }
body:has(#mod-custom123) .mod-custom li { padding-bottom: 15px; }
body:has(#mod-custom123) .mod-custom p { margin: 0 0 15px; }
@media (max-width: 767px) {
  body:has(#mod-custom123) .container-bottom-a,
  body:has(#mod-custom123) .container-bottom-b { grid-template-columns: minmax(0, 1fr); }
}

body.itemid-148 .com-content-article video,
body.itemid-149 .com-content-article video { max-width: 100%; height: auto; }
#mod-custom151 a.connexion { display: inline-block; padding: 4px 12px; border: 1px solid #0f6199; border-radius: 12px; background: #0f6199; color: #fffffe; font: 14px / 20px "Mallet Source Sans", Arial, sans-serif; text-decoration: none; }
#mod-custom151 a.connexion:hover, #mod-custom151 a.connexion:focus-visible { background: #0b4e7c; color: #fff; }
.mallet-locations { display: grid; gap: 24px; }
.mallet-location { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px; align-items: start; padding: 24px; background: #fff; border: 1px solid #dce8ed; }
.mallet-location > * { min-width: 0; }
.mallet-location h3 { margin-top: 0; color: #155980; }
.mallet-location p { margin: 0 0 12px; }
.mallet-location iframe { display: block; width: 100%; height: 350px; border: 0; }
.mallet-location:nth-child(2) .mallet-location-details { order: 2; }
.mallet-location:nth-child(2) .mallet-location-map { order: 1; }

@media (max-width: 1199px) {
  .container-header, .site-grid, .container-footer .grid-child { margin-inline: 20px; }
  .container-footer .grid-child { width: auto; }
  .container-header { width: auto; }
  .container-header { min-height: 249px; display: block; }
  .container-header .navbar-brand { position: absolute; top: 55px; left: 0; }
  .container-header .container-nav { position: absolute; right: 0; bottom: 0; left: 0; margin-bottom: 10px; }
  .container-header .mod-menu { justify-content: space-between; gap: 10px; }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button { font-size: 16px; }
  .itemid-131 .container-top-a { grid-template-columns: calc((100% + 20px) * 2 / 3 - 20px) minmax(0, 1fr); } /* UIkit width-2-3 cell minus its 20 px gutter */
  .itemid-131 .container-top-a #mod-custom159 { padding: 20px; min-height: 0; }
}

@media (max-width: 959px) {
  body.has-sidebar-left:not(.itemid-131) .site-grid { grid-template-columns: [full-start main-start] minmax(0, 1fr) [main-end full-end]; column-gap: 0; }
  body.has-sidebar-left:not(.itemid-131) .container-component { grid-column: 1; padding: 30px; }
  body:not(.itemid-131) .container-component { padding: 30px; }
  .container-sidebar-left { grid-column: 1; grid-row: 2; margin-top: 15px; }
  .container-sidebar-left > .card { margin-bottom: 20px; }
}

@media (max-width: 767px) {
  .container-header { min-height: 189px; margin-top: 10px; }
  .container-header .navbar-brand { top: 0; }
  .container-header .brand-logo img { width: 157px; height: 143px; }
  .container-header .container-topbar { top: 15px; right: 0; }
  .container-header .container-topbar .connexion { font-size: 12px; }
  .mallet-nav-toggle { position: fixed; z-index: 1002; top: 85px; right: 20px; display: block; border: 1px solid #117ab5; border-radius: 5px; background: #fff; color: #155980; padding: 8px 12px; font: 700 16px Arial, sans-serif; box-shadow: 0 2px 8px #0002; }
  body.mallet-page-scrolled .mallet-nav-toggle, body.mallet-nav-open .mallet-nav-toggle { top: 16px; }
  body.mallet-nav-open { overflow: hidden; }
  body.mallet-nav-open::before { content: ""; position: fixed; z-index: 1000; inset: 0; background: #1239; }
  body.mallet-nav-open .container-header { z-index: 1001; }
  .container-header .container-nav { display: none; position: fixed; z-index: 1001; inset: 0 0 0 auto; width: min(340px, 100vw); height: 100dvh; margin: 0; padding: 75px 20px 20px; overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: -4px 0 20px #0003; }
  body.mallet-nav-open .container-header .container-nav { display: block; }
  .container-header .mod-menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .container-header .mod-menu > li { white-space: normal; border-bottom: 1px solid #e0edf2; }
  .container-header .mod-menu > li > a, .container-header .mod-menu > li > button { display: inline-flex; min-height: 47px; align-items: center; padding: 8px; }
  .container-header .mod-menu .mod-menu__sub { position: static; width: 100%; border: 0; box-shadow: none; }
  .container-header .mod-menu .mod-menu__sub a { display: block; padding: 10px 15px; color: #155980; white-space: normal; }
}

@media (max-width: 900px) {
  .site-grid > .grid-child { min-width: 0; }
  .mallet-hero { border-radius: 0 50px 0 50px; }
  .container-footer { text-align: center; }
  .container-footer .mallet-footer-date { float: none; display: block; }
  #eplus-container .colgauche, #eplus-container .coldroite { float: none; width: 100%; margin: 0; }
  #eplus-container .chiffreutile-fond { padding: 15px; }
  .mallet-location { grid-template-columns: 1fr; }
  .mallet-location:nth-child(2) .mallet-location-details { order: 1; }
  .mallet-location:nth-child(2) .mallet-location-map { order: 2; }
}

@media (min-width: 768px) {
  .mallet-nav-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mallet-hero img { animation: none; }
  .mallet-hero img:first-child { opacity: 1; }
}

/* 2026-10-06 sweep: footer box and typography, and sidebar menu spacing, measured on the source. */
.container-footer {
  display: block;
  width: min(1120px, calc(100% - 40px));
  margin: 28px auto 0;
  padding: 60px 0 5px;
  background: linear-gradient(transparent 0 22px, #d5f5fa 22px, #b7f1f3);
  color: #8699a9;
  font-size: 16px;
  line-height: 19px;
}
.container-footer .grid-child { width: auto; margin-inline: 15px; }
.container-footer.footer a:not(.btn) { color: #1a6890; text-decoration: none; }
.container-footer .mallet-to-top { top: -4px; }
.container-footer.footer a.mallet-to-top:not(.btn) { color: #1684c0; }
.container-footer .mallet-footer-home { float: left; margin-top: 2px; line-height: 0; }
.container-sidebar-left .mod-menu a { display: block; padding: 5px 0; line-height: 20px; }
.container-sidebar-left .style-none .mod-custom > p:first-child { margin-bottom: 0; }
.container-sidebar-left .mod-menu li:last-child { padding-bottom: 15px; }
@media (max-width: 900px) {
  .container-footer { text-align: right; }
  .container-footer .mallet-footer-date { float: left; display: block; text-align: left; }
  .container-footer .mallet-footer-home { float: left; }
}

/* 2026-10-06 1:1 header: the source menu floats right of the logo and drops to its own row when it does
   not fit: stacked at 768-958 px (18 px text, 5 px gaps) and 960-1198 px (20 px, 10 px gaps), one row from
   1199 px. Header 394 px when stacked (menu row 55 px, 10 px from the bottom), 249 px in one row (menu
   row 33 px from the bottom). Last item one gap in from the right edge. Links #1a6890, current #2697d1,
   9 px padding, no chevrons (their buttons stay keyboard-reachable). */
@media (min-width: 768px) {
  .container-header .mod-menu { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 10px; justify-content: flex-end; } /* Cassiopeia stacks it below 992 px */
  .container-header .mod-menu > li { flex: none; height: 55px; padding: 0; margin: 0; }
  .container-header .mod-menu > li + li { margin-left: 0; } /* Cassiopeia adds 1.55em from 992 px */
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button { display: inline-block; padding: 9px; font: 20px/22px Arial, Helvetica, sans-serif; color: #1a6890; background: none; border: 0; }
  .container-header .mod-menu > li.current > a,
  .container-header .mod-menu > li.active > :is(a, button) { color: #2697d1; }
  .container-header .mod-menu > li .icon-chevron-down { display: none; }
  .container-header .mod-menu > li > a + .mod-menu__toggle-sub { width: 0; padding: 0; overflow: hidden; }
  .container-header .mod-menu > li > a + .mod-menu__toggle-sub:focus-visible { width: auto; padding: 9px 4px; }
  .container-header .container-nav { margin: 0 10px 33px 0; }
}
@media (min-width: 768px) and (max-width: 1198px) {
  .container-header { min-height: 394px; }
  .container-header .navbar-brand { top: 84px; }
  .container-header .container-nav { position: absolute; top: auto; right: 10px; bottom: 10px; left: auto; margin: 0; }
  .container-header .mod-menu { justify-content: flex-end; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .container-header .mod-menu { gap: 5px; }
  .container-header .container-nav { right: 5px; }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button { font-size: 18px; }
}
/* 2026-10-06 1:1 sidebar: below 960 px the source shows its two sidebar modules side by side under the
   content, 20 px apart and stretched to the same height (UIkit grid-match). */
@media (min-width: 768px) and (max-width: 959px) {
  .container-sidebar-left { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
  .container-sidebar-left > .card { margin-bottom: 0; }
}
/* Source article "E-mail" tool: floated right of the title, 18/22 px Source Sans, #2697d1, 14 px icon. */
.mallet-email-tool { float: right; margin: 2px 0 0 10px; font: 18px/22px "Mallet Source Sans", Arial, sans-serif; color: #8699a9; }
.mallet-email-tool a { color: #2697d1; text-decoration: none; }
.mallet-email-tool .icon-envelope { font-size: 14px; vertical-align: 1px; }
/* Source article titles start 10 px lower below 960 px, 15 px lower at 405-767 px, about 10 px lower below 405 px (the source logo scales there, ±4 px). */
@media (max-width: 959px) { body:not(.itemid-131) .container-component, body.has-sidebar-left:not(.itemid-131) .container-component { padding-top: 40px; } }
@media (min-width: 405px) and (max-width: 767px) { body:not(.itemid-131) .container-component, body.has-sidebar-left:not(.itemid-131) .container-component { padding-top: 45px; } }
/* Source wrapper pages: the iframe fills the content column with no inner padding. */
.com-wrapper { padding: 0; margin: 0; }

/* 2026-10-06 1:1: the source home keeps its hero/contact and bottom columns down to 768 px; it stacks only below. */
@media (max-width: 767px) {
  .itemid-131 .container-top-a { display: block; margin-top: 20px; }
  .itemid-131 .container-top-a > .card + .card { margin-top: 20px; }
  .itemid-131 .container-top-a #mod-custom159 { padding: 30px; }
  .itemid-131 .container-bottom-a { grid-template-columns: 1fr; gap: 18px; }
  .itemid-131 .container-bottom-a > .card { min-height: 450px; }
}

/* ===== next pass 2026-10-07: w6 behaviour + header ===== */
/* W6 behaviour: header hover and dropdown look (>= 768 px), hero slideshow buttons. Pairs with w6.js. */

@media (min-width: 768px) {
  /* First-level hover / open / remain: the source paints the link box #61cbdd with white text and a 0 10px 0 10px radius. */
  .container-header .container-nav .mod-menu > li:hover > a,
  .container-header .container-nav .mod-menu > li:hover > .mod-menu__toggle-sub,
  .container-header .container-nav .mod-menu > li.mallet-remain > a,
  .container-header .container-nav .mod-menu > li.mallet-remain > .mod-menu__toggle-sub,
  .container-header .container-nav .mod-menu > li > .mod-menu__toggle-sub[aria-expanded="true"],
  .container-header .container-nav .mod-menu > li:has(> .mod-menu__toggle-sub[aria-expanded="true"]) > a {
    background: #61cbdd;
    color: #fff;
    border-radius: 0 10px 0 10px;
  }
  /* Current item text. */
  .container-header .container-nav .mod-menu > li.active:not(:hover):not(.mallet-remain) > a { color: #2697d1; }

  /* White arrow between the link and the panel. */
  .container-header .container-nav .mod-menu > li.deeper.parent:hover::before,
  .container-header .container-nav .mod-menu > li.deeper.parent.mallet-remain::before,
  .container-header .container-nav .mod-menu > li.deeper.parent:has(> .mod-menu__toggle-sub[aria-expanded="true"])::before {
    content: "";
    position: absolute;
    top: 55px;
    left: 50%;
    z-index: 1002;
    margin-left: -10px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
  }

  /* Panel: a clipping frame (made by w6.js) holds the dark rounded list that slides down inside it. */
  .container-header .mod-menu > li.deeper.parent { position: relative; }
  .mallet-dd { display: none; position: absolute; top: 65px; left: 0; z-index: 1001; width: 320px; overflow: hidden; }
  .mallet-dd:has(> .show-menu) { display: flow-root; }
  .container-header .mallet-dd > .mod-menu__sub {
    position: static; display: block; width: auto; min-width: 0; margin: 0 2px 2px; padding: 20px;
    border: 0; border-radius: 0 10px; background: #686c72; box-shadow: 5px 5px 5px rgba(0, 0, 0, .2); list-style: none;
  }
  .mallet-dd > .show-menu { animation: mallet-dd-in 600ms cubic-bezier(.19, 1, .22, 1) both; }
  .mallet-dd > .mod-menu__sub > li { margin: 0; padding: 0 0 15px; border-top: 1px solid #ddeaee; white-space: normal; }
  .mallet-dd > .mod-menu__sub > li:first-child { border-top: 0; }
  .container-header .mallet-dd > .mod-menu__sub > li > a {
    display: block; overflow: hidden; margin: 0 5px; padding: 7px 0; color: #fff; text-decoration: none;
    font: 400 18px / 21px "Mallet Source Sans", Arial, sans-serif; white-space: normal;
  }
  .container-header .mallet-dd > .mod-menu__sub > li > a:hover,
  .container-header .mallet-dd > .mod-menu__sub > li > a:focus-visible,
  .container-header .mallet-dd > .mod-menu__sub > li.current > a { color: #7cd4e2; text-decoration: none; }
}
@keyframes mallet-dd-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mallet-dd > .show-menu { animation: none; } }
@media (max-width: 767px) { .mallet-dd { display: contents; } }

/* Hero slideshow (script mode): slide transition, prev/next buttons visible only while hovering, hidden on touch-size devices. */
.mallet-hero.mallet-hero-js img { display: none; opacity: 1; animation: none; }
.mallet-hero.mallet-hero-js img.is-current { display: block; }
.mallet-hero-btn {
  display: none; position: absolute; z-index: 5; top: 50%; width: 50px; height: 50px; margin: -25px 0 0; padding: 0; border: 0; cursor: pointer;
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABkCAYAAADE6GNbAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMy8yMi8xMZHgZ8EAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAIDElEQVR4nO1aTUwbSRb+qtUGgy0HMkJ2TFAuqxVE4opyiVACISbYJpuZkVaRQCNy23MOIzjPiEPOCxwiRQEhhOCAI0G0ChrNREIBcYuUeKU9MCIGY7PYNKbxBqtrD7TZ6nZ32/3D36w/6R3c5X79vn71XndXfYRSij8CeKccEULqAdQBqJf9unT+egygAEAEcEQpFR25vp2MEEJqATQC8ALgLLqRAOQAZCil/7EcixUi8t3/BicZcBJHAP5tJUumiBBCXACacJKBs0QOQJpSelzpCRVPB0KIF8At6JCIRqO+9fX1J6lUalQUxQVK6T+1TBTFhVQqNbq+vv4kGo36dC7nBXBLvmZl8VWSEUJIE05qoQQLCwsdd+/e/aGxsbGr0ouyyGQyy+/fv3/V39+/pvcXSmm6rCNKqaEBCAD4s9omJib6BUFYlSSJOmGCIKxOTEz0a10LQKBcnIYZIYQEAJSkf3Nzc6S5uXnQ6WcQIQSJROJ1S0vLTxrDAqU0qXeubo3I00lBIhKJ+HK53EIwGByUJKlsNs2aJEkIBoODuVxuIRKJqG+gT46pciJykSlqYnx8vG16enqytra29SxIsGRqa2tbp6enJ8fHx9tUoTXqNYCSqSW32FssyUgk4puenp50u92t5/VKQwhBPp+PP336dODNmzcCMyQB+F3dmrWIBKFqsYIgLJwnCSYW5PP5uM/n61cN5SilW+wBxdSSn9gKEhsbGyMXQQI46ahut7t1Y2NjRDXklWM9hbpGvmF/jI2NtZ1VYZttAGNjY+p6UcR6OrXkF8Bb7ODe3t5kfX19h9VsdHb24Ndf/2HpXEWQhEAUxbXr168PqIZ+L75oshlRdKn5+fkOj8fTYTUbnZ098PuD6OzscSQrHo+nY35+vkNF5DRmNiN/Yoklk8m/+3y+LivZuHcvBL8/ePp7Z2cLv/zy1rQfFoQQCIKwHAgE/sYcliil/wLkwOXCOSURDod9DQ0NXVayoSYBAH5/EPfuhWxnpaGhoSscDrMPSq5Y9MXgFd8Vw8PD3Van1Orqb5p31O8P4v79XttkhoeHu1Wu61giilbW0tJiuTYODg4Qi83okunqemSLSEtLi7pOFBlRfLt7PJ42Oy1XEARDMt3dfXaKXt2GeZaIYqHA7Xbbfp/a3983JPPgQdgSEbfb3apy52KJlMAOiaJls1lDMj09EdM+9aBJxAkSRctkMoZkHj6MOkJGd13LiL1Z7O3t6Y75/UFHrnXmGaGUorf3sW4AsdjM1chIX9+TkgckS2J3d9eR6xSJHIPpXKIoxjmOa5UkyZbzcPhbQxLpdPnFERYcx0EUxbjq8DHwv6lVYEcODw8/E0JsTadyJFKplGmfhBAcHh5+VrkrsEQUS5Sbm5trHMdZJhGJfGdIYmdnx5JfjuOwubmpXv8SWSJH7Mjo6Og7juNACNEMxgjR6PdlSVgBIQQcx2F0dPSdaugIkInQk0Xj04JYXFwUstnsspWs6L00xmIzSCaTlrPMcRyy2ezy4uKiYiFCjl3RfnPshVdWVl65XC7TF9ze3i55AMZiM9je3rZVcy6XCysrK69U9+c0ZsNP3UQiMcnzfEehUIBZBINBRKN/RSw2g62trfInGIDneRQKhbXm5ubyn7ryAUWtzM3N/VxTU1McN2WJRAKx2AwSiYStTABATU0N5ubmflaROKLMxpBiXUv+2rrJ/vvTp08jTU1Ng/l83uL9tAe32410Ov369u3b6vXgL5TZEKpogW57e3uBENL69evXMwtYCzU1NaCUxm/cuGFugU5GGkwHA4ChoaEBSZLiPM/bmiZmjOd5SJIUHxoaUteFJMeoQAkRerKmqli+X1paEmZnZ38EELfSyax0KADx2dnZH5eWlgRViEmqsSWnuz+itUsVCoV8L1++nOR5vvXo6Ah651oFIQR1dXUoFArxZ8+eDbx9+1ZNQnf3ytJGz8ePH0cCgcBgPp/H8XHF+5WGcLlccLvdSCaTr9vb253b6AEA+UT1XUF7e/tPU1NTjyVJWvN6vcWpYKm1ulwueL1eSJK0NjU19dgKCcCBzdDJycmOO3fu/HDt2rWuQqGAQqEASZKg9xDleR4cx4HnefA8j/39/eUPHz68GhgYsLUZWvE+u7xTFIBOFkOhkO/58+fdN2/e7PB4PG0aqx0AgHw+Hz88PPz85cuXtRcvXrzTqIMiJJwUdk5nXBmfmYK9zIKB/08JR8nJV11Uo+noKsucLhOsTodLh6qCDvgDFPuVb7+X+YFYVdAVUVXQVRV02qgq6M5q4aGqoNMgUlXQOQ1Kqwo6ZxV0LOyo6S5UQceaXTXdhSnoWDilpjt3BR1rTqrpzl1BV7T793t1d3dXV3+zPMXOTUFHKUVX1yPDLeqDgwPLRPQUdMVvdl0FnVk8eBA2JCEIeiuk5WGkoCsSKFHQWdlm6+mJGJLY39837ZMFpVRXQeeYOujhw6ghiWw2a8qfWWgSKc7JShEK9RuSyGQy1qLTgF5cjmREjwRgrJ5zEo4o6PQ0iwDQ2/vYVhvXsoqJmCWzu7trKMB89OgvZ0qCJaL4SBFFMW5WeJZOpw3J9PU9sU1Cfnk8ewVdKpUyJBMOf2ubyLkp6HZ2dgzJRCLfWSZyrgo6AGXJRKPfm/Z57gq6oiWTSV0yVl4az11Bx5qTaroLU9CxsKumu1AFHWt21HRAVUFXVdA5alUFXclAVUFnDVUFnYyqgk6NqoJOG1UFnSVceVGNpqOrLHO6TPgvM7nBiq5PRFcAAAAASUVORK5CYII=") no-repeat;
}
.mallet-hero-next { right: 30px; background-position: 0 0; }
.mallet-hero-prev { left: 30px; background-position: 0 -50px; }
.mallet-hero:hover .mallet-hero-btn, .mallet-hero:focus-within .mallet-hero-btn { display: block; }
@media (max-device-width: 1024px) { .mallet-hero .mallet-hero-btn { display: none; } }

/* Hover colours measured on the source (a:hover #8cc446, #footer a:hover #2697d1, sidebar #61cbdd, Se connecter, to-top sprite frame 2). */
.com-content-article__body a:not(.btn):not(:where(#eplus-container) a) { color: #2697d1; text-decoration: none; }
.com-content-article__body a:not(.btn):not(:where(#eplus-container) a):hover,
.com-content-article__body a:not(.btn):not(:where(#eplus-container) a):focus-visible { color: #8cc446; }
.container-sidebar-left .mod-menu a:hover, .container-sidebar-left .mod-menu a:focus-visible { color: #61cbdd; text-decoration: none; }
.container-footer.footer a:not(.btn):not(.mallet-to-top):hover,
.container-footer.footer a:not(.btn):not(.mallet-to-top):focus-visible { color: #2697d1; }
.container-header .container-topbar .connexion:hover,
.container-header .container-topbar .connexion:focus-visible { background: #84d3e3; border-color: #84d3e3; color: #0f6199; }
.itemid-131 #mod-custom159 a:hover img { opacity: 1; }

/* To-top arrow: the source sprite is a 32 px ring plus a triangle, #2697d1 at 48 % / solid at rest, white on hover, no fill. */
.container-footer .mallet-to-top { background: transparent; border-color: rgba(38, 151, 209, .486); font-size: 0; }
.container-footer.footer a.mallet-to-top:not(.btn) { color: #2697d1; }
.container-footer .mallet-to-top::before { content: ""; position: absolute; top: 11px; left: 50%; margin-left: -6px; border-right: 6px solid transparent; border-bottom: 6px solid currentColor; border-left: 6px solid transparent; }
.container-footer.footer a.mallet-to-top:not(.btn):hover,
.container-footer.footer a.mallet-to-top:not(.btn):focus-visible { color: #fff; border-color: rgba(255, 255, 255, .486); }

/* W6b: header geometry and colours measured on the source. */
@media (min-width: 768px) {
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button { padding: 9px 10px; } /* source link span is 10 px each side: 84.5 px for "Accueil" */
}
/* The source menu fits beside the logo from a 1013 px viewport (header 973 px) and stacks below it. */
@media (min-width: 1013px) and (max-width: 1199px) {
  .container-header { display: flex; min-height: 249px; }
  .container-header .navbar-brand { position: static; margin: 0 0 22px; }
  .container-header .container-nav { position: static; margin: 0 10px 33px 0; }
}
/* "Se connecter": 102 x 30 px button, 25 px from the header top. */
.container-header .container-topbar { top: 25px; }
.container-header .container-topbar .connexion {
  display: inline-block; box-sizing: content-box; padding: 4px 12px; border: 1px solid #0f6199; border-radius: 12px; background: #0f6199;
  color: #fffffe; font: 400 14px / 20px "Mallet Source Sans", Arial, sans-serif; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); transition: background-position .1s linear;
}
.container-header .container-topbar .connexion:hover,
.container-header .container-topbar .connexion:focus-visible { background: #84d3e3; border-color: #84d3e3; color: #0f6199; }
/* "E-mail" tool: the source icon font fails to load there and shows a serif "M"; same colour as the text. */
body.site .mallet-email-tool a { color: #2697d1; }
/* removed at merge: serif "M" glyph (user kept the envelope) */
/* Footer band: the source paints a 1024 x 91 image along the bottom edge (repeat-x, 100% 100%). */
.container-footer { background: url("/media/templates/site/cassiopeia_extended/images/mallet-bg-footer.jpg") repeat-x 100% 100%; }
/* The source centres its 1120 px column from a 1160 px viewport; the earlier rules keep 20 px side margins through 1199. */
@media (min-width: 1160px) and (max-width: 1199px) {
  .container-header { width: 100%; margin-inline: auto; }
}

/* W6c: the source menu also fits beside the logo from 920 to 959 px (header 249 px; 394 px stacked at 919 and 960). */
@media (min-width: 920px) and (max-width: 959px) {
  .container-header { display: flex; min-height: 249px; }
  .container-header .navbar-brand { position: static; margin: 0 0 22px; }
  .container-header .container-nav { position: static; margin: 0 5px 33px 0; }
}

/* ===== next pass 2026-10-07: w1 390-833 ===== */
/* w1: 390-833 px, every route except the home. Source gaps around the sidebar: the sidebar starts 70 px under the article
   body (the last block's own bottom margin is dropped below), and the footer sits 20 px under the last module (28 px less
   than staging). The sidebar-image icon path near the end needs module_icons.png deployed (see its comment). */
@media (max-width: 833px) {
  body.has-sidebar-left:not(.itemid-131) .container-sidebar-left { margin-top: 55px; margin-bottom: -28px; }
  /* Source accordion: an empty paragraph (15 px) above it and 5 px of line box below its last header. */
  body:not(.itemid-131) .mallet-accordion:last-child { display: flow-root; padding-bottom: 5px; }
  body:not(.itemid-131) .mallet-accordion:first-child { padding-top: 15px; }
}
/* Source typography: links #2697d1 without underline, hover/emphasis/code #8cc446 (template: "a:hover, em, code"). */
@media (max-width: 833px) {
  .com-content-article__body a { color: #2697d1; text-decoration: none; }
  .com-content-article__body a:hover, .com-content-article__body em, .com-content-article__body code { color: #8cc446; }
}
/* Source block margins: paragraphs 15 px above and below (not the first one), lists 10 px below and 25 px in, rules 2 px high. */
@media (max-width: 833px) {
  .com-content-article__body p { margin: 15px 0; }
  .com-content-article__body > p:first-child { margin-top: 0; }
  .com-content-article__body > ul, .com-content-article__body > ol { margin: 0 0 10px 25px; padding-left: 0; }
  .com-content-article__body hr { height: 2px; margin: 15px 0; border: 0; border-top: 1px solid #ddeaee; opacity: 1; }
}
/* Source images sit on the text baseline (Cassiopeia centres them). */
@media (max-width: 833px) {
  .com-content-article__body img { vertical-align: baseline; }
}
/* The source accordion headers carry no +/- glyph; the 20 px glyph box made three names wrap one line later than the source. */
@media (max-width: 833px) {
  .mallet-accordion summary::before, .mallet-accordion details[open] > summary::before { content: none; }
}
/* Source template: "@media (max-width: 479px) { body { word-wrap: break-word } }" (it splits "Comptabilité" next to the floated e-mail tool). */
@media (max-width: 479px) {
  body { overflow-wrap: break-word; }
}
/* Source sidebar video (MediaElement player): below 768 px the player is as wide as its module with a 260:200 ratio on black,
   the poster keeps its own size in the top-left corner (the .flv/.mov/.wmv sources do not play). */
@media (max-width: 767px) {
  .container-sidebar-left video { display: block; width: 100%; height: auto; aspect-ratio: 260 / 200; background: #000; object-fit: none; object-position: 0 0; }
}
/* Sidebar custom modules: the source gives a following paragraph 15 px above (staging zeroes the first paragraph's bottom margin). */
@media (max-width: 833px) {
  .container-sidebar-left .style-none .mod-custom > p + p { margin: 15px 0 0; }
}
/* Two-column sidebar (768-959 px): rows are 20 px apart in the source, and a lone last module spans both columns.
   The grid gap already supplies the 20 px, so the cards drop their own bottom margin and the container pulls the footer up by 8 px. */
@media (min-width: 480px) and (max-width: 833px) {
  body.has-sidebar-left:not(.itemid-131) .container-sidebar-left { margin-bottom: -8px; }
  body .container-sidebar-left > .sidebar-left.card { margin-bottom: 0; }
  .container-sidebar-left > .sidebar-left.card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 480px) and (max-width: 833px) {
  .container-sidebar-left video { display: block; background: #000; }
}
/* Sidebar custom-module headings use the article heading style (22/30 Arial, 25 px above, 15 px below). */
@media (max-width: 833px) {
  .container-sidebar-left .style-none .mod-custom h3 { margin: 25px 0 15px; font: 100 22px / 30px Arial, Helvetica, sans-serif; color: #2697d1; }
  .container-sidebar-left .style-none .mod-custom > h3:first-child { margin-top: 0; }
}
/* The source drops the last block's bottom margin; its gap to the sidebar is a fixed 70 px (staging lets the margin leak out of the body). */
@media (max-width: 833px) {
  .com-content-article__body > :last-child { margin-bottom: 0; }
}
/* Bottom module rows (simulators page): source links are lowercase, #2697d1, no underline; bullets #2697d1 in the first row;
   icons have rounded corners; the last block of a module has no bottom margin. */
@media (max-width: 833px) {
  body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) a { color: #2697d1; text-decoration: none; text-transform: lowercase; }
  body:not(.itemid-131) .container-bottom-a ul { color: #2697d1; }
  body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) h3 img { border-radius: 0 25px; }
  body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) .mod-custom > :last-child { margin-bottom: 0; }
}
@media (max-width: 833px) {
  body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) .mod-custom > ul:has(+ p:empty:last-child) { margin-bottom: 0; }
}
@media (max-width: 833px) {
  body:has(#mod-custom123) .mod-custom > ul:last-child { margin-bottom: 0; }
}
@media (max-width: 833px) {
  body:has(#mod-custom123) .mod-custom p { margin: 15px 0; }
  body:has(#mod-custom123) .mod-custom > :first-child { margin-top: 0; }
  body:has(#mod-custom123) .mod-custom > p:last-child { margin-bottom: 0; }
}
/* Pages without a sidebar: the source footer sits 20 px under the last block (staging: 28 px). */
@media (max-width: 833px) {
  body:not(.has-sidebar-left):not(.itemid-131) .site-grid { margin-bottom: -8px; }
  body:has(#mod-custom123) .container-component { margin-bottom: 10px; }
  body:has(#mod-custom123) .container-bottom-b { margin-bottom: -10px; }
}
/* "Votre compta en ligne" sidebar box (white module with a 35 px sprite icon before its title and a 25 px-margin button).
   Needs the source sprite templates/yoo_glass/images/color/blue/module_icons.png published as
   /media/templates/site/cassiopeia_extended/images/module_icons.png (35 px steps, login icon at 0 -160px). */
@media (max-width: 833px) {
  .container-sidebar-left > .style-box { padding: 30px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
  .container-sidebar-left > .style-box > .card-header { height: 30px; overflow: visible; margin: 0 0 15px; padding: 0; border: 0; background: transparent; color: #686c72; font: 700 22px / 30px Arial, Helvetica, sans-serif; }
  .container-sidebar-left > .style-box > .card-body { padding: 0; }
  .container-sidebar-left > .style-box.icon-login > .card-header::before { content: ""; float: left; width: 35px; height: 35px; margin-right: 5px; background: url("/media/templates/site/cassiopeia_extended/images/module_icons.png") 0 -160px no-repeat; }
  .container-sidebar-left > .style-box .mod-custom a.connexion { margin: 25px 0; }
}
/* Video paragraphs: the source player is a block (staging's inline video adds a 5 px line gap below it). */
@media (max-width: 833px) {
  .com-content-article__body p > video { display: block; }
}
/* Two sidebar columns start at 480 px in the source (UIkit width-1-2 grid); staging's own two-column rule starts at 768 px. */
@media (min-width: 480px) and (max-width: 767px) {
  .container-sidebar-left { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
}

/* ===== next pass 2026-10-07: w2 834-1219 ===== */
/* removed at merge: header rows (owned by w6) */
/* w2: two-column pages: the source footer sits 85 px under the article body, or 20 px under the last sidebar
   module when the sidebar is taller; staging was 73 px and 48 px. */
@media (min-width: 960px) and (max-width: 1219px) {
  body.has-sidebar-left:not(.itemid-131) .container-component { padding-bottom: 42px; }
  body.has-sidebar-left:not(.itemid-131) .container-sidebar-left { margin-bottom: -28px; }
}
/* w2: source accordion that opens the body starts 15 px down (empty paragraph margin), one that closes the body leaves 15 px below. */
@media (min-width: 834px) and (max-width: 1219px) {
  .com-content-article__body > .mallet-accordion:first-child { padding-top: 15px; }
  .com-content-article__body > .mallet-accordion:last-child { padding-bottom: 5px; margin-bottom: 15px; }
}
/* shared: accordion marker, all widths */
.mallet-accordion summary::before, .mallet-accordion details[open] > summary::before { content: none; }
/* w2: source paragraphs carry 15 px top and bottom margin; staging only had the bottom one, so a paragraph after a
   div, list or rule sat 15 px too high. Shared cause, seen at 1219 on social. */
@media (min-width: 834px) and (max-width: 1219px) {
  .com-content-article__body > p { margin-top: 15px; }
}
/* w2: source images in article text sit on the baseline (Cassiopeia centres them), 6 px taller line boxes. Shared cause. */
@media (min-width: 834px) and (max-width: 1219px) {
  .com-content-article__body img { vertical-align: baseline; }
}
/* w2: the source e-mail tool floats flush right with no left margin; staging kept a 10 px margin, which left the
   title 2 px short of fitting beside it (conseil-en-gestion-evaluation wrapped at 960-1100 px, +50 px). Shared cause. */
@media (min-width: 834px) and (max-width: 1219px) {
  .mallet-email-tool { margin-left: 0; }
}
/* w2: stacked layout (below 960 px):    gap) and the footer follows 20 px under its last module; a third module spans both columns. */
@media (min-width: 834px) and (max-width: 959px) {
  body.has-sidebar-left:not(.itemid-131) .container-sidebar-left { margin-top: 40px; margin-bottom: -8px; }
  body .container-sidebar-left > .sidebar-left.card { margin-bottom: 0; } /* the grid gap is the 20 px between rows */
  .container-sidebar-left > .sidebar-left:nth-child(3) { grid-column: 1 / -1; }
}
/* w2: custom sidebar modules: paragraphs carry 15 px top margin and none at the bottom, media sits on the top of its line
   box (source mejs container), so the video starts 15 px lower and the module is 6 px less tall. Shared cause. */
@media (min-width: 834px) and (max-width: 1219px) {
  .container-sidebar-left .mod-custom p { margin: 15px 0 0; }
  .container-sidebar-left .mod-custom p:first-child { margin-top: 0; }
  .container-sidebar-left video, .container-sidebar-left img { vertical-align: top; }
}
/* w2: the source MediaElement player is a fixed 550x400 black box with the 16:9 video letterboxed inside; staging
   scaled the video to 307 px high (vos-services-en-ligne, -87 px). Shared cause (seen at 1100). */
@media (min-width: 834px) and (max-width: 1219px) {
  body.itemid-148 .com-content-article video,
  body.itemid-149 .com-content-article video { height: 400px; background: #000; vertical-align: top; }
}
/* w2: source text styles that staging lacks (seen at 834 and 1219): `em` is #8cc446 everywhere (template rule
   `a:hover, em, code`), and custom sidebar modules use the article h3 (22/30 Arial, 25 px above, 15 below).
   Shared causes; the em colour also shows at 1440 (services-specifiques h2, informatique sidebar). */
@media (min-width: 834px) and (max-width: 1219px) {
  .com-content-article em, .container-sidebar-left em { color: #8cc446; }
  .container-sidebar-left .mod-custom h3 { margin: 25px 0 15px; color: #2697d1; font: 100 22px / 30px Arial, Helvetica, sans-serif; }
  .container-sidebar-left .mod-custom h3:first-child { margin-top: 0; }
}
/* removed at merge: access page 834-1219 (replaced by w2-access.css) */

/* ===== next pass 2026-10-07: w3 >=1220 ===== */
/* w3: desktop (1220+) fixes. */
@media (min-width: 1220px) {
  /* Gap between the content/sidebar row and the footer. Source: footer = row bottom + 10 px; the sidebar column sits
     35 px lower, so with a sidebar the footer is 45 px below the content column. The last block of the article body
     carries no bottom margin in the source (its paragraphs only have a top margin), so the gap is set on the column. */
  body:not(.itemid-131) .container-footer { margin-top: 10px; }
  body:not(.itemid-131) .com-content-article__body > :last-child { margin-bottom: 0; }
  body.has-sidebar-left:not(.itemid-131) .container-component { padding-bottom: 75px; }
  body:not(.has-sidebar-left):not(.itemid-131) .container-component { padding-bottom: 40px; }
  body.has-sidebar-left:not(.itemid-131) .container-sidebar-left > .sidebar-left.card:last-child { margin-bottom: 10px; }

  /* Source paragraphs have 15 px above and below (collapsing with neighbours); the first block has none. */
  .com-content-article__body p { margin: 15px 0; }
  .com-content-article__body p img { vertical-align: baseline; }
  .com-content-article__body hr { box-sizing: content-box; height: 1px; margin: 15px 0; padding: 0; border: 0; border-top: 1px solid #ddeaee; background: none; opacity: 1; }

  /* Team accordions: the source has an empty paragraph (15 px margin) above a leading accordion and 5 px of line box
     below a closing one (the last toggler margin then ends inside the body). */
  .com-content-article__body > .mallet-accordion:first-child { padding-top: 15px; }
  .com-content-article__body > .mallet-accordion:last-child { padding-bottom: 5px; }

  /* Headings, links and emphasis inside articles take the source's colours. */
  .com-content-article__body h2 { color: #2697d1; }
  .com-content-article__body em { color: #8cc446; font-style: italic; }
  .com-content-article__body a:not(.btn) { color: #2697d1; text-decoration: none; }
  .com-content-article__body a:not(.btn):hover, .com-content-article__body a:not(.btn):focus-visible { color: #8cc446; }
  .container-sidebar-left .mod-menu li.current > a { color: #61cbdd; text-decoration: none; }
}

@media (min-width: 1220px) {
  /* The source swaps the sidebar <video> for a block player of the same size, so there is no baseline gap under it. */
  .container-sidebar-left video { display: block; }
}

@media (min-width: 1220px) {
  /* The source player is a 550 x 400 box; the native element otherwise shrinks to the poster's 550 x 307 ratio. */
  html body .com-content-article .com-content-article__body video[height="400"] { display: inline-block; height: 400px; vertical-align: top; }
}

@media (min-width: 1220px) {
  /* Simulators page bottom modules: the source lower-cases their list links (section#bottom-a li a, section#bottom-b li a),
     colours links and bullets blue, and has no margin under the last block of a module. */
  body:has(#mod-custom123) .container-bottom-a li, body:has(#mod-custom123) .container-bottom-b li { color: #2697d1; }
  body:has(#mod-custom123) .mod-custom a:not(.btn) { color: #2697d1; text-decoration: none; }
  body:has(#mod-custom123) .mod-custom a:not(.btn):hover { color: #8cc446; }
  body:has(#mod-custom123) .mod-custom li a { text-transform: lowercase; }
  body:has(#mod-custom123) .mod-custom > :last-child { margin-bottom: 0; }
}

/* removed at merge: access cards gap (replaced by w2-access.css) */

@media (min-width: 1220px) {
  /* Sidebar text modules (below the menu): emphasis is green italic and links are plain blue, as in the source. */
  .container-sidebar-left .style-none em { color: #8cc446; font-style: italic; }
  .container-sidebar-left .style-none a:not(.btn) { color: #2697d1; text-decoration: none; }
  .container-sidebar-left .style-none a:not(.btn):hover { color: #8cc446; }
}

@media (min-width: 1220px) {
  .container-sidebar-left .style-none .mod-custom h3 { margin: 0 0 15px; color: #2697d1; font: 100 22px / 30px Arial, Helvetica, sans-serif; }
}

@media (min-width: 1220px) {
  /* Same vertical rhythm as the article body: 25 px above headings, 15 px around paragraphs, none above the first or below the last block. */
  .container-sidebar-left .style-none .mod-custom h3 { margin: 25px 0 15px; }
  .container-sidebar-left .style-none .mod-custom p { margin: 15px 0; }
  .container-sidebar-left .style-none .mod-custom > :first-child { margin-top: 0; }
  .container-sidebar-left .style-none .mod-custom > :last-child { margin-bottom: 0; }
}

/* ===== next pass 2026-10-07: w2b access page >=768 (after w3) ===== */
/* w2b: access page (body.itemid-154) follows the source's three fixed 999 px tables from 768 px up: rows 442/510/442 px
   (taller when the text wraps), columns 439/560 and 599/400 that give way to the text column's and the map's minimum
   widths as the container narrows, text right-aligned in rows 1 and 3, 440x350 map 27 px (rows 1, 3) or 50 px (row 2) below
   the row top. The Google Maps iframes and the "Voir la carte en grand" link stay as accepted deviations. Below 768 px the
   stacked layout stays. */
@media (min-width: 768px) {
  body.itemid-154 .mallet-locations { gap: 0; grid-template-columns: minmax(0, 1fr); }
  body.itemid-154 .mallet-location { width: 999px; max-width: 100%; min-height: 442px; gap: 0; padding: 0; border: 0; background: transparent; align-items: start; grid-template-columns: minmax(min-content, 1fr) minmax(450px, 560px); }
  body.itemid-154 .mallet-location:nth-child(2) { min-height: 510px; grid-template-columns: minmax(450px, 1fr) minmax(min-content, 400px); }
  body.itemid-154 .mallet-location .mallet-location-details { order: 1; padding: 27px 5px 5px; text-align: right; }
  body.itemid-154 .mallet-location .mallet-location-details h3 { margin: 25px 0 15px; text-align: inherit; }
  body.itemid-154 .mallet-location .mallet-location-details p { margin: 0 0 22px; }
  body.itemid-154 .mallet-location .mallet-location-details p:last-child { margin-bottom: 0; }
  body.itemid-154 .mallet-location .mallet-location-map { order: 2; justify-self: end; align-self: center; margin: 0 0 -14px; padding: 0 5px 0 0; } /* 388 px margin box centred in the row, as the source cell (va middle) */
  body.itemid-154 .mallet-location:nth-child(2) .mallet-location-details { order: 2; padding-top: 60px; text-align: left; }
  body.itemid-154 .mallet-location:nth-child(2) .mallet-location-map { order: 1; justify-self: start; margin-bottom: 0; padding: 0 0 8px 5px; }
  body.itemid-154 .mallet-location .mallet-location-map p { margin: 15px 0; }
  body.itemid-154 .mallet-location iframe { width: 440px; max-width: none; }
}
/* w2b: the page ends in a table, so the source footer follows 50 px under the body (an article ending in a paragraph
   leaves 85); staging's component padding left 7 px too much from 834 to 1219 px. */
@media (min-width: 834px) and (max-width: 1219px) {
  body.itemid-154 .container-component { padding-bottom: 23px; }
}

/* ===== next pass 2026-10-07: w5 home ===== */
/* w5: home page. Source geometry for the actions column and its Expert+ login form (#connect-responsive, shown below 736 px only). */
.itemid-131 .container-top-a #mod-custom159 { padding: 30px; }
.itemid-131 #mod-custom159 p { margin: 0 0 21px; }
.itemid-131 #mod-custom159 hr { margin: 15px 0; height: 2px; }
.itemid-131 #mod-custom159 .mallet-phone { margin: 0 auto 15px; }
.itemid-131 #mod-custom159 #connect-responsive { display: none; }
@media (max-width: 735.98px) {
  .itemid-131 #mod-custom159 #connect-responsive { display: block; font-size: 18px; line-height: 18px; color: #86a0a9; }
  #connect-responsive form { margin: 0; }
  #connect-responsive table { width: auto !important; height: auto !important; margin: 0 auto; border-collapse: separate; border-spacing: 0; }
  #connect-responsive td { padding: 5px; }
  .itemid-131 #mod-custom159 #connect-responsive p { margin: 15px 0; }
  #connect-responsive input[type="text"], #connect-responsive input[type="password"] {
    display: inline-block; box-sizing: content-box; height: 20px; padding: 4px 6px; margin: 0 0 10px; width: 91%;
    font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #555; background: #fff;
    border: 1px solid #ccc; border-radius: 4px; vertical-align: middle;
  }
  #connect-responsive img { border-radius: 0 25px; }
  #connect-responsive input[type="image"] { width: auto; vertical-align: middle; }
}

/* bottom row: three equal boxes 360 px wide with a 20 px gutter, source typography and shadow */
.itemid-131 .container-bottom-a { gap: 20px; margin-top: 20px; }
.itemid-131 .container-bottom-a > .card {
  min-height: 0; border: 0; color: #2697d1; font-size: 18px; line-height: 22px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3), inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
}
.itemid-131 .container-bottom-a .card-header { line-height: 30px; }
.itemid-131 .container-bottom-a .card-body { color: inherit; font-size: inherit; }
.itemid-131 .container-bottom-a .card-body p { margin: 0 0 15px; }
.itemid-131 .container-bottom-a #mod-custom115 .btn {
  box-sizing: content-box; display: block; width: 75%; max-width: none; margin: 0 auto; padding: 4px 12px;
  border: 1px solid #ccc; border-radius: 20px; background: #196ba3; font-size: 24px; line-height: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}
.itemid-131 .container-bottom-a #mod-custom115 .btn a { padding: 0; font: 24px "Mallet Source Sans", Arial, sans-serif; line-height: normal; }
.itemid-131 .container-bottom-a #mod-custom124 p { line-height: 22px; }
.itemid-131 .container-bottom-a #mod-custom124 strong { line-height: inherit; font-family: "Mallet Source Sans", Arial, sans-serif; font-weight: 700; }
.itemid-131 .container-bottom-a .feed h3 { margin: 10px 0 15px; color: inherit; font: 100 22px/30px Arial, Helvetica, sans-serif; text-transform: lowercase; }
.itemid-131 .container-bottom-a .newsfeed { margin: 0 0 10px 25px; padding: 0; }
.itemid-131 .container-bottom-a .newsfeed li { padding-bottom: 15px; }
.itemid-131 .container-bottom-a .newsfeed a { color: inherit; text-decoration: none; text-transform: lowercase; }
.itemid-131 .container-bottom-a .feed-item-date { text-transform: lowercase; }
.itemid-131 .container-bottom-a .module-eplus { margin: 0 0 0 25px; padding: 0; }
.itemid-131 .container-bottom-a .module-eplus li { padding: 10px 0; }
.itemid-131 .container-bottom-a .module-eplus a { color: inherit; text-decoration: none; text-transform: lowercase; }
@media (max-width: 767px) {
  .itemid-131 .container-bottom-a { gap: 20px; }
  .itemid-131 .container-bottom-a > .card { min-height: 0; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .itemid-131 .container-bottom-a > .card:nth-child(3) { align-self: start; }
}
/* source: the bottom boxes' 10 px margin plus a 10 px footer offset, not the 28 px the other pages use */
body.itemid-131 footer.footer { margin-top: 20px; }

/* ===== next pass 2026-10-07: w4 RSForm restyle ===== */
/* w4: modern restyle of the RSForm forms (user decision 2026-10-07, the one exception to the 1:1 rule).
   Contact (itemid-153) and the two DSN routes (itemid-143, itemid-183). Colours and font come from user.css:
   brand #1a6890, body text #526170, muted #8699a9, font "Mallet Source Sans". :is() keeps the specificity at
   (1,1,1)+, above the stock RSForm formHorizontal rules. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm {
  --w4-brand: #1a6890;
  --w4-brand-hover: #145375;
  --w4-brand-active: #0f4260;
  --w4-ink: #2f3f4f;
  --w4-muted: #5b6b7a;
  --w4-border: #c5d0da;
  --w4-error: #a0182a;
  font-family: "Mallet Source Sans", Arial, sans-serif;
}

/* Layout: a grid inside the stock row wrappers; two columns from 768 px, one column below. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formContainer,
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formRow {
  float: none;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formSpan12 {
  box-sizing: border-box;
  display: grid;
  float: none;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  margin: 25px 0 !important;
  max-width: 100%;
  padding: 0 !important;
  width: 100%;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .rsform-block {
  box-sizing: border-box;
  clear: none;
  float: none;
  grid-column: 1 / -1;
  height: auto;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  width: auto;
}

@media (min-width: 768px) {
  :is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formSpan12 {
    column-gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .rsform-block:is(
    .rsform-block-nom, .rsform-block-prenom, .rsform-block-tel, .rsform-block-codepostal,
    .rsform-block-societe, .rsform-block-prenom-nom,
    .rsform-block-dernier-jour-arret, .rsform-block-fin-previsionnelle,
    .rsform-block-subrogation, .rsform-block-oui-date,
    .rsform-block-date-fin-contrat, .rsform-block-date-notification-rupture,
    .rsform-block-date-signature, .rsform-block-dernier-jour-fin,
    .rsform-block-caract-arret, .rsform-block-nvelle-date-arret,
    .rsform-block-caract-arret-reprise, .rsform-block-date-reprise) {
    grid-column: auto;
  }
}

/* The note about required fields reads before the button; the button closes the form. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .rsform-block-champs {
  color: var(--w4-muted);
  font-size: 15px;
  line-height: 22px;
  order: 1;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .rsform-block-envoi { order: 2; }

/* Section headings inside the DSN form. */
:is(body.itemid-143, body.itemid-183) #userForm .rsform-type-freetext h4 {
  border-bottom: 1px solid #dbe3ea;
  color: var(--w4-brand);
  font-family: "Mallet Source Sans", Arial, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 28px;
  margin: 12px 0 0;
  padding: 0 0 8px;
}

/* Labels sit above the fields at every width. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formControlLabel {
  box-sizing: border-box;
  color: var(--w4-ink);
  display: block;
  float: none;
  font-family: "Mallet Source Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  margin: 0 0 6px;
  padding: 0;
  text-align: left;
  width: auto;
}

/* Labels that only carry the required marker (checkbox and CAPTCHA rows, empty ones) stay for screen readers only. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(.rsform-block-rgdp, .rsform-block-rgpd, .rsform-block-recaptcha, .rsform-block-envoi) > .formControlLabel {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm strong.formRequired {
  color: var(--w4-muted);
  font-size: 15px;
  font-weight: 400;
  margin-left: 4px;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formControls,
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formBody {
  float: none;
  height: auto;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: auto;
}

/* Fields */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input.rsform-input-box, input.rsform-calendar-box, input.rsform-captcha-box, textarea.rsform-text-box, select.rsform-select-box) {
  appearance: none;
  background: #fff;
  border: 1px solid var(--w4-border);
  border-radius: 5px;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--w4-ink);
  display: block;
  font-family: "Mallet Source Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  max-width: 100%;
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  width: 100%;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input.rsform-input-box, input.rsform-calendar-box, input.rsform-captcha-box, select.rsform-select-box) {
  height: 48px;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm select.rsform-select-box {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a6890' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 40px;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm textarea.rsform-text-box {
  height: 160px;
  min-height: 120px;
  resize: vertical;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input, textarea, select):hover {
  border-color: #8fa2b3;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input, textarea, select):focus,
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input, textarea, select):focus-visible {
  border-color: var(--w4-brand);
  box-shadow: 0 0 0 3px rgba(26, 104, 144, 0.22);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Date fields: the input grows, the calendar button is a square beside it. */
:is(body.itemid-143, body.itemid-183) #userForm .rsform-type-calendar .formBody {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:is(body.itemid-143, body.itemid-183) #userForm .rsform-type-calendar input.rsform-calendar-box {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

:is(body.itemid-143, body.itemid-183) #userForm .rsform-type-calendar .formValidation,
:is(body.itemid-143, body.itemid-183) #userForm .rsform-type-calendar .formDescription { flex: 0 0 100%; }

:is(body.itemid-143, body.itemid-183) #userForm button.rsform-calendar-button {
  background: #fff;
  border: 1px solid var(--w4-border);
  border-radius: 5px;
  color: var(--w4-brand);
  cursor: pointer;
  flex: 0 0 48px;
  font: 700 17px / 24px "Mallet Source Sans", Arial, sans-serif;
  height: 48px;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  width: 48px;
}

:is(body.itemid-143, body.itemid-183) #userForm button.rsform-calendar-button:hover { background: #f0f6fa; border-color: var(--w4-brand); }
:is(body.itemid-143, body.itemid-183) #userForm button.rsform-calendar-button:focus-visible {
  border-color: var(--w4-brand);
  box-shadow: 0 0 0 3px rgba(26, 104, 144, 0.22);
  outline: 2px solid transparent;
}

/* Checkboxes and radios: native controls tinted with the brand, label text beside them. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm fieldset.rsfp-fieldset {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  min-width: 0;
  padding: 0;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm fieldset.rsfp-fieldset > label {
  align-items: flex-start;
  color: var(--w4-ink);
  cursor: pointer;
  display: flex;
  float: none;
  font-size: 17px;
  gap: 10px;
  line-height: 24px;
  margin: 0;
  width: auto;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input.rsform-checkbox, input.rsform-radio) {
  accent-color: var(--w4-brand);
  flex: 0 0 20px;
  height: 20px;
  margin: 2px 0 0;
  width: 20px;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input.rsform-checkbox, input.rsform-radio):focus-visible {
  outline: 2px solid var(--w4-brand);
  outline-offset: 2px;
}

/* Built-in CAPTCHA: code image, answer field and refresh link line up with the fields. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .rsform-block-recaptcha .formBody img {
  background: #fff;
  border: 1px solid var(--w4-border);
  border-radius: 5px;
  display: block;
  height: auto;
  margin: 0 0 8px;
  max-width: 100%;
  padding: 6px 10px;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .rsform-block-recaptcha .formBody br { display: none; }

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm input.rsform-captcha-box {
  display: inline-block;
  max-width: 240px;
  vertical-align: middle;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm a.rsform-captcha-refresh-button {
  color: var(--w4-brand);
  display: inline-block;
  font-size: 16px;
  margin: 8px 0 0 12px;
  vertical-align: middle;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .rsform-block-recaptcha .formValidation { display: block; }

/* Validation: muted red border and message under the field. RSForm adds .rsform-error to the field and swaps .formNoError for .formError. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formValidation:empty,
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formNoError,
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm p.formDescription:empty { display: none; }

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formError {
  color: var(--w4-error);
  display: block;
  font-size: 15px;
  line-height: 20px;
  margin-top: 6px;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input, textarea, select).rsform-error,
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input, textarea, select)[aria-invalid="true"],
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input, textarea, select):user-invalid {
  background-color: #fdf7f8;
  border-color: var(--w4-error);
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(input, textarea, select):is(.rsform-error, [aria-invalid="true"]):focus {
  box-shadow: 0 0 0 3px rgba(160, 24, 42, 0.2);
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm :is(#rsform_error_3, #rsform_error_6, .formRed) {
  color: var(--w4-error);
  font-size: 16px;
  line-height: 22px;
}

/* Submit */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm button.rsform-submit-button {
  background: var(--w4-brand);
  background-image: none;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font: 18px / 24px "Mallet Source Sans", Arial, sans-serif;
  height: auto;
  min-height: 48px;
  padding: 12px 36px;
  text-shadow: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  width: 100%;
}

@media (min-width: 768px) {
  :is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm button.rsform-submit-button { width: auto; }
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm button.rsform-submit-button:hover { background: var(--w4-brand-hover); }
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm button.rsform-submit-button:active { background: var(--w4-brand-active); transform: translateY(1px); }
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm button.rsform-submit-button:focus-visible {
  background: var(--w4-brand-hover);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--w4-brand);
  outline: 2px solid transparent;
}

@media (prefers-reduced-motion: reduce) {
  :is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm * { transition: none !important; }
}

/* Fixes after the first preview: wrapped checkbox text, and the idle validation wrapper must take no space. */
:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm .formValidation:has(> .formNoError) { display: none; }

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm fieldset.rsfp-fieldset > label {
  display: block;
  padding-left: 30px;
  position: relative;
}

:is(body.itemid-153, body.itemid-143, body.itemid-183) #userForm fieldset.rsfp-fieldset > label > :is(input.rsform-checkbox, input.rsform-radio) {
  left: 0;
  margin: 0;
  position: absolute;
  top: 2px;
}

/* ===== next pass 2026-10-08 round 2: w7 (bullets, simulators, credit-cice, article video) ===== */
/* Cassiopeia clips article lists (overflow hidden); from 834 px the list indent is padding so bullets sit inside, but the
   round-1 margin-based indent (<= 833 px) puts the outside bullets beyond the clip. The source list is overflow visible. */
@media (max-width: 833px) {
  .com-content-article ol, .com-content-article ul { overflow: visible; }
}
/* Simulators page bottom rows from 834 px: the round-1 rules only covered <= 833 px, so wide screens kept Cassiopeia's underlined
   uppercase links, default bullet colour, square icons and the extra list/paragraph margins. */
@media (min-width: 834px) {
  body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) a { color: #2697d1; text-decoration: none; text-transform: lowercase; }
  body:not(.itemid-131) .container-bottom-a ul { color: #2697d1; }
  body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) h3 img { border-radius: 0 25px; }
  body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) .mod-custom > :last-child { margin-bottom: 0; }
  body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) .mod-custom > ul:has(+ p:empty:last-child) { margin-bottom: 0; }
  body:has(#mod-custom123) .mod-custom > ul:last-child { margin-bottom: 0; }
  body:has(#mod-custom123) .mod-custom p { margin: 15px 0; }
  body:has(#mod-custom123) .mod-custom > :first-child { margin-top: 0; }
  body:has(#mod-custom123) .mod-custom > p:last-child { margin-bottom: 0; }
}
/* Same page: the source drops the last body block's bottom margin (6 px of the row offset) and sits its footer 20 px under the last row. */
@media (min-width: 834px) {
  body:has(#mod-custom123) .com-content-article__body > :last-child { margin-bottom: 0; }
}
@media (min-width: 834px) {
  body:has(#mod-custom123) .site-grid { margin-bottom: -8px; }
  body:has(#mod-custom123) .container-component { margin-bottom: 10px; }
  body:has(#mod-custom123) .container-bottom-b { margin-bottom: -10px; }
}
/* Only the list links are lowercase in the source; the "Télécharger…" paragraph links keep their capital. */
body:not(.itemid-131) :is(.container-bottom-a, .container-bottom-b) .mod-custom p a { text-transform: none; }
/* /credit-cice.html (wrapper page): the "Retour vers les autres simulateurs" paragraph has 15 px margins in the source (staging: 18 px above, 16 px below),
   and from 834 px to 1219 px its footer sits 8 px lower than the source. */
body.itemid-162 #mod-custom131 { margin: 15px 0 0; }
body.itemid-162 #mod-custom131 p { margin: 0 0 15px; }
@media (min-width: 834px) and (max-width: 1219px) {
  body.itemid-162 .site-grid { margin-bottom: -8px; }
}
/* Article video (vos-services-en-ligne, espace-client-en-ligne). The source MediaElement player is a fixed 550 x 400 black box
   from 768 px (the 834-1219 rule above already covers wider screens) and as wide as the text column with a 16:9 box below 768 px. */
@media (min-width: 768px) and (max-width: 833px) {
  body.itemid-148 .com-content-article video,
  body.itemid-149 .com-content-article video { height: 400px; background: #000; vertical-align: top; }
}
@media (max-width: 767px) {
  body.itemid-148 .com-content-article video,
  body.itemid-149 .com-content-article video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
}

/* ===== next pass 2026-10-08 round 3: w8 (compta box from 834 px, footer bottom margin) ===== */
/* w8: "Votre compta en ligne" box from 834 px: same look as the narrow rules, title height follows its text (wraps beside the icon). */
@media (min-width: 834px) {
  .container-sidebar-left > .style-box { padding: 30px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
  .container-sidebar-left > .style-box > .card-header { overflow: visible; margin: 0 0 15px; padding: 0; border: 0; background: transparent; color: #686c72; font: 700 22px / 30px Arial, Helvetica, sans-serif; }
  .container-sidebar-left > .style-box > .card-body { padding: 0; }
  .container-sidebar-left > .style-box.icon-login > .card-header::before { content: ""; float: left; width: 35px; height: 35px; margin-right: 5px; background: url("/media/templates/site/cassiopeia_extended/images/module_icons.png") 0 -160px no-repeat; }
  .container-sidebar-left > .style-box .mod-custom a.connexion { margin: 25px 0; }
}
/* Single-line title (stacked layout): the 35 px icon float would otherwise make the title 35 px high instead of the source's 30. */
@media (min-width: 834px) and (max-width: 959px) {
  .container-sidebar-left > .style-box > .card-header { height: 30px; }
}
/* w8: the source #footer has margin 10px on all sides, so the page ends 10 px under it. */
.container-footer.footer { margin-bottom: 10px; }