/*==========================================================================
  MODERNIZE.CSS
  Visual refresh layer: self-hosted "Outfit" webfont, Bootstrap Icons (SVG),
  and a look-and-feel polish pass (rounded corners, shadows, spacing).
  Loaded last, after custom.css, so it can safely override the legacy
  Bootstrap 2 / hand-written rules without touching them directly.
  Keeps the existing layout structure and brand blue (#4197EE) untouched.
==========================================================================*/

/* ---------- 1. Typography: self-hosted Outfit (variable font, wght 300-800) ---------- */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit/outfit-variable.woff2') format('woff2-variations'),
       url('../fonts/outfit/outfit-variable.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

body, p, h1, h2, h3, h4, h5, h6, a, button, input, textarea, select,
.btn, .moduletable, table, label {
  font-family: 'Outfit', 'cantarell', Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

body {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#nav ul.menu > li > a, #nav ul.maximenuck > li > a {
  font-weight: 500;
  letter-spacing: 0.01em;
}


/* ---------- 2. Buttons & form controls ---------- */

.button, button, button.btn, input.btn, .btn,
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="tel"], input[type="number"],
textarea, select, .form-control, .inputbox {
  border-radius: 8px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.1s ease;
}

.button, button, button.btn, input.btn, .btn {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.button:hover, button:hover, button.btn:hover, input.btn:hover, .btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.button:active, button:active, button.btn:active, input.btn:active, .btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus,
input[type="password"]:focus, textarea:focus, select:focus,
.form-control:focus, .inputbox:focus {
  border-color: #4197EE !important;
  box-shadow: 0 0 0 3px rgba(65, 151, 238, 0.15) !important;
  outline: none;
}


/* ---------- 3. Module cards ---------- */

.moduletable {
  border-radius: 10px;
  overflow: hidden;
}

.moduletablecontactaet, .moduletablecontactcs, .moduletablecontactsst,
.moduletablecontactrp, .moduletablecontactsj,
.moduletabletablette {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
}

#centertopmodule .moduletable, #blocks2 .moduletable {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#centertopmodule .moduletable:hover, #blocks2 .moduletable:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}


/* ---------- 4. Navigation polish ---------- */

#nav > div.inner {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#nav ul.menu > li > a, #nav ul.menu > li > span.separator,
#nav ul.maximenuck > li > a, #nav ul.maximenuck > li > span.separator {
  transition: background-color 0.15s ease;
}


/* ---------- 5. Search box: SVG search icon ---------- */

form.form-inline[role="search"] {
  position: relative;
  display: inline-block;
}

form.form-inline[role="search"] input.search-query {
  padding-left: 30px !important;
  border-radius: 999px !important;
}

form.form-inline[role="search"]::before {
  font-family: "bootstrap-icons" !important;
  content: "\f52a"; /* bi-search */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #999;
  pointer-events: none;
  z-index: 2;
}


/* ---------- 6. Breadcrumb: full redesign ---------- */

.mod-breadcrumbs__wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  flex: 1 1 auto;
}

.mod-breadcrumbs.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  flex: 1 1 auto;
  padding: 0 !important;
  margin: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
}

.mod-breadcrumbs__here {
  opacity: 0.7;
  font-weight: 400;
  margin-right: 2px;
}

.mod-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

/* Bootstrap 5 draws its own "/" divider via ::before on + siblings; replace it
   with a subtle chevron icon instead of overriding the whole selector. */
.mod-breadcrumbs__item.breadcrumb-item + .mod-breadcrumbs__item.breadcrumb-item::before {
  font-family: "bootstrap-icons" !important;
  content: "\f285" !important; /* bi-chevron-right */
  padding: 0 !important;
  margin: 0 8px;
  font-size: 10px;
  opacity: 0.55;
  color: #fff;
}

.mod-breadcrumbs__item a.pathway {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.mod-breadcrumbs__item a.pathway:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

.mod-breadcrumbs__item a.pathway[href="/"]::before {
  font-family: "bootstrap-icons" !important;
  content: "\f425"; /* bi-house */
  margin-right: 4px;
  font-size: 12px;
  vertical-align: -1px;
}

.mod-breadcrumbs__item.active span {
  color: #fff;
  font-weight: 600;
}


/* ---------- 7. Accordion menu: smoother modern transitions ---------- */

.accordeonck .toggler_icon {
  transition: transform 0.15s ease;
}

/* Each accordion sidebar menu (mod_accordeonck) gets its own solid, fairly
   saturated background color set per-instance (mod_accordeonck_css.php
   ?cssid=... inline background). Against that, the module's default
   1px #ddd divider between items is nearly invisible. A first pass using a
   thin translucent white line was still judged too subtle, so this uses a
   bold, near-opaque line plus extra vertical padding for real breathing
   room around it - reads clearly on every color variant, at every nesting
   level, dropped on the last item of each list/sublist so it doesn't
   double up with the container's rounded bottom corner. */
.accordeonck li {
  border-top: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.85) !important;
}

.accordeonck li:last-child {
  border-bottom: none !important;
}

.accordeonck a.accordeonck, .accordeonck span.separator.accordeonck {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* ---------- 8. Images & partner logos: soften hard edges ---------- */

#blocks1mod1 img, #blocks1mod3 img {
  transition: opacity 0.15s ease, transform 0.15s ease;
}


/* ---------- 9. Outer page wrapper: remove Bootstrap 5's gutter padding ---------- */

#wrapper > .inner.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ---------- 10. #blocks1 utility bar (breadcrumb / accessibility / search) ---------- */

#blocks1 {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 0;
}

/* The old layout floats the 3 modules at a fixed 33/33/33 width
   (template.css: "#blocks1 .n3 > .flexiblemodule { width: 33.33% }"),
   which doesn't match their actual content widths - the search box has
   nowhere to fit and wraps onto its own line under the breadcrumb.
   Turn the row itself into a real flex container so all three sit on one
   line, each sized to its content, with the breadcrumb absorbing the
   leftover space. */
#blocks1 > .inner {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 4px;
}

#blocks1 .flexiblemodule {
  display: flex;
  align-items: center;
  float: none !important;
  width: auto !important;
  padding: 10px 16px;
}

#blocks1 #blocks1mod1 {
  flex: 1 1 auto;
  min-width: 0;
}

#blocks1 #blocks1mod2 {
  flex: 0 0 auto;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

#blocks1 #blocks1mod3 {
  flex: 0 0 auto;
}

#blocks1 #blocks1mod1 .inner,
#blocks1 #blocks1mod2 .inner,
#blocks1 #blocks1mod3 .inner {
  width: 100%;
  display: flex;
  align-items: center;
}

#blocks1 #blocks1mod2 .jfontsize {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 0 !important;
  white-space: nowrap;
}

#blocks1 #blocks1mod3 .search {
  display: flex;
  align-items: center;
}

#blocks1 #blocks1mod3 form.form-inline {
  display: flex;
  align-items: center;
}

#blocks1 #blocks1mod3 input.search-query {
  width: 200px;
}

.breadcrumb a, .breadcrumb .active span,
.mod-breadcrumbs a, .mod-breadcrumbs__here, .mod-breadcrumbs__item {
  transition: opacity 0.15s ease;
}

.breadcrumb a:hover, .mod-breadcrumbs a:hover {
  opacity: 0.75;
}

.jfontsize-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 6px !important;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.jfontsize-button:hover {
  border-radius: 6px !important;
  transform: translateY(-1px);
}

#blocks1 .search-query {
  background-color: rgba(255, 255, 255, 0.92);
}


/* ---------- 11. Main nav ---------- */

#nav {
  position: relative;
}

#nav ul.menu > li > a, #nav ul.maximenuck > li > a,
#nav ul.menu > li > span.separator, #nav ul.maximenuck > li > span.separator {
  position: relative;
  padding-top: 14px;
  padding-bottom: 14px;
  /* template.css sets 10px left+right here; with the site-wide +20% zoom
     (section 18) the 8 top-level items no longer fit on one row at that
     padding, wrapping the last item ("Signalement") onto its own line.
     Trim it slightly to reclaim just enough width. */
  padding-left: 4px !important;
  padding-right: 4px !important;
  border-left: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
  margin-right: 0 !important;
}

#nav ul.menu > li:last-child > a, #nav ul.maximenuck > li:last-child > a,
#nav ul.menu > li:last-child > span.separator, #nav ul.maximenuck > li:last-child > span.separator {
  border-right: none !important;
}

#nav ul.menu > li > a::after, #nav ul.maximenuck > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #4197EE;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

#nav ul.menu > li:hover > a::after, #nav ul.maximenuck > li:hover > a::after,
#nav ul.menu > li.active > a::after, #nav ul.maximenuck > li.active > a::after {
  transform: scaleX(1);
}

/* This menu positions level-3+ flyouts as absolutely-positioned descendants
   of the level-2 <ul> (template.css: "margin-left: 228px" pushes them out
   to the right, entirely outside the level-2 box). overflow:hidden on ANY
   ancestor - including the level-2 <ul> itself, not just something matching
   at deeper depth - clips that content invisible, since it renders outside
   its parent's box regardless of how deeply nested it is in the DOM.
   No overflow:hidden anywhere in this chain; border-radius/shadow alone
   don't clip, so every level still gets rounded corners + shadow safely. */
#nav ul.menu li ul, #nav ul.maximenuck li ul {
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Flyout dropdown items (template.css: "#nav ul.menu li li a") are stacked
   block-level links with no border/margin between them, so consecutive
   entries visually merge into one solid block. Add a thin divider between
   each item, at every nesting depth, dropped on the last item in each
   submenu so it doesn't clash with the rounded bottom corner above. */
#nav ul.menu li li a, #nav ul.maximenuck li li a,
#nav ul.menu li li span.separator, #nav ul.maximenuck li li span.separator {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#nav ul.menu li li:last-child > a, #nav ul.maximenuck li li:last-child > a,
#nav ul.menu li li:last-child > span.separator, #nav ul.maximenuck li li:last-child > span.separator {
  border-bottom: none;
}


/* ---------- 12. Footer ---------- */

#footer {
  margin-top: 24px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}

#footer a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

#footer a:hover {
  border-color: rgba(255, 255, 255, 0.9);
  opacity: 0.9;
}

#footer .mod-login {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  width: 280px;
}

#footer .mod-login__options a {
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* The site-wide ".btn { background:#4197EE }" rule (custom.css) flattens
   every Bootstrap button to the same brand blue, so "Sign in with a passkey"
   and "Connexion" rendered as one indistinguishable blob with no gap between
   them. Give them separation and distinct primary/secondary treatment. */
#footer .mod-login .form-group {
  margin-bottom: 10px;
}

#footer .mod-login .form-group:last-of-type {
  margin-bottom: 8px;
}

#footer .mod-login button[type="submit"].btn-primary {
  background: #fff !important;
  color: #4197EE !important;
  font-weight: 700;
}

#footer .mod-login button[type="submit"].btn-primary:hover {
  background: #eef5ff !important;
}

#footer .mod-login .plg_system_webauthn_login_button.btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
  box-shadow: none;
}

#footer .mod-login .plg_system_webauthn_login_button.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

#footer .mod-login .input-group-text,
#footer .mod-login .input-password-toggle {
  background: rgba(255, 255, 255, 0.9);
}


/* ---------- 13. iCagenda mini-calendar: full redesign ----------
   The "AGENDA" title is white text with NO background of its own (the
   generic ".moduletable p:first-child" brand-blue header rule doesn't reach
   it, since it's nested a couple of divs deep, not a direct first child) -
   so it was rendering as near-invisible white-on-page-gray. Give it an
   explicit header bar, and rework the nav row / grid to look intentional. */

/* White card + drop shadow, matching the treatment ".ic-event-div" already
   has elsewhere (custom.css: white bg, rounded corners, soft shadow). */
.default.iccalendar {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 1px 1px 2px 1px #aaa;
  overflow: hidden;
  /* iCagenda's own CSS sets "margin: auto !important" on this class, which
     beats a plain margin-top/bottom declaration regardless of cascade order. */
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.icagenda_header {
  background: #4197EE !important;
  padding: 10px 12px !important;
  letter-spacing: 0.04em;
  border-radius: 10px 10px 0 0;
}

.icagenda_header p, .icagenda_header span {
  color: #fff !important;
  font-size: 13px !important;
}

.icnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px !important;
  background: #f4f7fc;
  border-bottom: 1px solid #e3e9f3;
}

.icnav .titleic {
  font-weight: 600;
  font-size: 14px;
  color: #1c3a5e;
}

.icnav a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #4197EE;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.icnav a:hover {
  background-color: rgba(65, 151, 238, 0.15);
  transform: translateY(-1px);
}

.iccalendar table {
  border-spacing: 3px !important;
  border-collapse: separate !important;
  table-layout: fixed !important;
  width: 100% !important;
}

.iccalendar table thead th {
  text-transform: uppercase;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  color: #8a97a8;
  padding-bottom: 6px !important;
  text-align: center;
}

.iccalendar table td div {
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  border-radius: 6px !important;
}

.iccalendar table td .no-event:hover {
  background-color: rgba(65, 151, 238, 0.12);
  transform: translateY(-1px);
}

.iccalendar table td div.style_Today {
  background: #4197EE !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(65, 151, 238, 0.45) !important;
  text-shadow: none !important;
}

.iccalendar table td .icevent a {
  border-radius: 6px;
  font-weight: 600;
}

.iccalendar table td .icevent a:hover,
.iccalendar table td .icevent a:focus {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}


/* ---------- 14. Contact-form "ENVOYER" submit buttons ----------
   These are hand-styled inline (id="bleu", inline background-color per
   category: CDG/CS/AET/SST/RP each use their own theme color) inside
   DB-stored custom-HTML modules. Only override layout/interaction here,
   never background-color, so each category keeps its own accent color. */

input#bleu {
  padding: 8px 22px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

input#bleu:hover {
  filter: brightness(0.92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

input#bleu:active {
  filter: brightness(0.85);
  transform: translateY(0);
}


/* ---------- 15. Contact icons (mail/tel/location): now SVG, size + align ----------
   These live inside a generic ".mod-custom" wrapper (not the category-specific
   ".moduletablecontactXX" classes the selector below was guessing at, which
   never actually matched anything) - target by the icon path instead, so
   sizing is reliable regardless of which module/category renders them. */

img[src*="/images/icone_contact/"] {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle;
  transition: transform 0.15s ease;
}


/* ---------- 16. Fix badly-resized images site-wide ----------
   mobile.css only sets img{height:auto!important} inside the 3 narrower
   breakpoints (525-758 / 759-950 / 951-1024px); the true desktop tier
   (min-width:1025px) never got it, so any <img> with a fixed inline
   width+height (common in article/module content pasted from CKEditor)
   gets its width squeezed responsively but keeps its old fixed height,
   stretching/distorting it. Apply it unconditionally, at every width. */

img {
  max-width: 100%;
  height: auto !important;
}


/* ---------- 17. Bootstrap 5 .input-group: fix height/corner/wrap issues ----------
   A legacy rule in template.css ("input.inputbox, .login input, ...
   input[type=password] ... { padding: 4px; width: 11vw; }") matches
   .form-control by its type attribute and overrides Bootstrap 5's own
   padding/width, making the text input shorter (28px) than its sibling
   .input-group-text / button (37px), and (see below) wide enough on large
   viewports to push the suffix onto a second line. Our own global
   "input[type=text]{border-radius:8px}" rule (above, section 2) also rounds
   all 4 corners of that input even when it's the first half of a group,
   breaking the seamless joined look. Fix all of this inside any
   .input-group. */

/* Bootstrap 5's .input-group defaults to flex-wrap:wrap. Combined with the
   legacy rule's "width:11vw" (viewport-relative, not container-relative) on
   .form-control, on wide screens 11vw grows larger than the space actually
   left inside the footer's fixed-width (280px) login panel once the suffix
   icon/button is accounted for, so the suffix wraps onto its own line.
   Force one row, and let the input fill whatever space is actually left
   instead of a fixed viewport-relative width. */
.input-group {
  flex-wrap: nowrap !important;
}

.input-group .form-control {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 8px 0 0 8px !important;
  /* Bootstrap 2's old "select,textarea,input[type=text]{font-size:13px;
     line-height:18px}" (bootstrap.css) undercuts Bootstrap 5's own 16px/24px
     on .input-group-text and .btn, which was the actual source of the
     height mismatch - matching padding alone wasn't enough. */
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

.input-group .input-group-text,
.input-group .btn {
  border-radius: 0 8px 8px 0 !important;
}

.input-group .form-control:not(:last-child) {
  border-right: 0 !important;
}

/* Even with matching font-size/padding, .input-group-text still computes
   ~9px taller than .form-control in this markup (an unresolved interaction
   with the group's own flex stretch), so pin all three to one explicit
   height rather than rely on the sizing math reconciling on its own. */
.input-group .form-control,
.input-group .input-group-text,
.input-group .btn {
  height: 38px !important;
  box-sizing: border-box !important;
}


/* ---------- 18. Site-wide font size +20% ----------
   Text sizing across this site is a mix of fixed px values scattered over
   hundreds of rules (nav 15px, headings 18px, breadcrumb 13px, calendar
   10px, footer 12px, etc.) and a handful of em-based ones - there's no
   single root value that everything inherits from proportionally, so a
   plain "body { font-size: +20% }" would only affect the few em-based
   rules and leave most text untouched. `zoom` scales every element's
   rendered size (text and box model together) by the same factor
   regardless of how its font-size was declared, which is the only
   reliable way to bump *everything* uniformly without rewriting every
   scattered font-size rule individually. */
html {
  /* Applying zoom to body (rather than html) leaves document.documentElement's
     scrollHeight unzoomed while body's own is scaled, so the two disagree -
     in this page that meant ~400px of dead scrollable space below the
     footer. Zooming the root avoids that mismatch entirely. */
  zoom: 1.2;
}


/* ---------- 19. Contact-form ("CONTACT" sidebar boxes) inputs: fix overflow ----------
   Same root cause as the footer login inputs (section 17): the legacy
   "input[type=text],...{width:11vw}" rule (template.css) is relative to the
   *viewport*, not the narrow sidebar column these forms actually live in.
   At the +20% zoom (section 18) 11vw renders wide enough to overflow the
   sidebar and spill into the next column. Size them to their real
   container instead. */
.formcontact {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ---------- 20. COORDONNEES modules: desktop/tablette duplicates overlapping ----------
   Every category (CS/AET/SST/RP) has two COORDONNEES "custom HTML" modules
   assigned to the same menu items: a "colonne gauche" desktop version and a
   "tablette" version meant to replace it on narrower screens. The site-wide
   ".moduletabletablette { display:none }" rule (custom.css, desktop media
   queries) was supposed to hide the tablette one on desktop, but Custom HTML
   modules here render as generic <div class="mod-custom custom"> - the
   moduleclass_sfx ("tablette") never actually lands in the wrapper's class
   list, so that rule never matched anything and both copies have been
   rendering stacked in the same sidebar column on every screen size.
   Target them by their fixed module ID instead, matching the same intent:
   hide the "tablette" copies once there's room for the desktop layout. */
@media screen and (min-width: 1000px) {
  #mod-custom140, #mod-custom249, #mod-custom251, #mod-custom252 {
    display: none !important;
  }
}

/* Symmetric fix: below 1000px the "colonne gauche/droite" desktop copies
   (CS/AET/SST, plus RP's two positions) were equally un-hidden and stacking
   on top of their own "tablette" replacements. */
@media screen and (max-width: 999px) {
  #mod-custom207, #mod-custom204, #mod-custom205, #mod-custom155, #mod-custom223 {
    display: none !important;
  }
}