html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-slider-right:before {
  content: "";
}

.w-icon-slider-left:before {
  content: "";
}

.w-icon-nav-menu:before {
  content: "";
}

.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
  content: "";
}

.w-icon-file-upload-remove:before {
  content: "";
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-block {
  display: block;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-hidden {
  display: none;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

.w-code-block {
  margin: unset;
}

pre.w-code-block code {
  all: inherit;
}

pre.w-code-block code > span {
  display: block !important;
}

.w-optimization {
  display: contents;
}

.w-webflow-badge, .w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  width: auto !important;
  height: auto !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.w-embed:before, .w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe, .w-video object, .w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before, .w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload {
  margin-bottom: 10px;
  display: block;
}

.w-file-upload-input {
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}

.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: #333;
  display: inline-block;
}

.w-file-upload-error {
  margin-top: 10px;
  display: block;
}

.w-file-upload-default.w-hidden, .w-file-upload-uploading.w-hidden, .w-file-upload-error.w-hidden, .w-file-upload-success.w-hidden {
  display: none;
}

.w-file-upload-uploading-btn {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}

.w-file-upload-file {
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}

.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

.w-file-remove-link {
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}

.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}

.w-file-upload-error-msg {
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}

.w-file-upload-info {
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}

.w-file-upload-label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}

.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-row:after {
  clear: both;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-1 {
  width: 8.33333%;
}

.w-col-2 {
  width: 16.6667%;
}

.w-col-3 {
  width: 25%;
}

.w-col-4 {
  width: 33.3333%;
}

.w-col-5 {
  width: 41.6667%;
}

.w-col-6 {
  width: 50%;
}

.w-col-7 {
  width: 58.3333%;
}

.w-col-8 {
  width: 66.6667%;
}

.w-col-9 {
  width: 75%;
}

.w-col-10 {
  width: 83.3333%;
}

.w-col-11 {
  width: 91.6667%;
}

.w-col-12 {
  width: 100%;
}

.w-hidden-main {
  display: none !important;
}

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

  .w-hidden-main {
    display: inherit !important;
  }

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main, .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  .w-hidden-main, .w-hidden-medium, .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before, .w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before, .w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 100%;
}

.w-slider-nav.w-num > div {
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: inherit;
  padding: .2em .5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^="w-icon-"], .w-slider-arrow-right [class^="w-icon-"], .w-slider-arrow-left [class*=" w-icon-"], .w-slider-arrow-right [class*=" w-icon-"] {
  position: absolute;
}

.w-slider-arrow-left:focus, .w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-icon-slider-left, .w-icon-slider-right {
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-dropdown-link {
  color: #222;
  padding: 10px 20px;
  display: block;
}

.w-dropdown-link.w--current {
  color: #0082f3;
}

.w-dropdown-link:focus {
  outline: 0;
}

.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}

.w-lightbox-backdrop, .w-lightbox-container {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.w-lightbox-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-view {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.w-lightbox-view:before {
  content: "";
  height: 100vh;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}

.w-lightbox-frame, .w-lightbox-view:before {
  vertical-align: middle;
  display: inline-block;
}

.w-lightbox-figure {
  margin: 0;
  position: relative;
}

.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}

.w-lightbox-img {
  width: auto;
  max-width: none;
  height: auto;
}

.w-lightbox-image {
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}

.w-lightbox-caption {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-lightbox-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.w-lightbox-control {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}

.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}

.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}

.w-lightbox-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}

.w-lightbox-strip {
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}

.w-lightbox-item {
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}

.w-lightbox-active {
  opacity: .3;
}

.w-lightbox-thumbnail {
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}

.w-lightbox-thumbnail .w-lightbox-tall {
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.w-lightbox-thumbnail .w-lightbox-wide {
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}

.w-lightbox-spinner {
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.w-lightbox-spinner:after {
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.w-lightbox-hide {
  display: none;
}

.w-lightbox-noscroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }

  .w-lightbox-view, .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

  .w-lightbox-left, .w-lightbox-right {
    opacity: .5;
    display: block;
  }

  .w-lightbox-close {
    opacity: .8;
  }

  .w-lightbox-control:hover {
    opacity: 1;
  }
}

.w-lightbox-inactive, .w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before, .w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol, .w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after, .w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: .6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image, .w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div, .w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption, .w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe, .w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div, .w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before, .w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

.w--tab-active {
  display: block;
}

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible {
  display: none !important;
}

.wf-layout-layout {
  display: grid;
}

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

@font-face {
  font-family: Mosvita;
  src: url("/fonts/Mosvita-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mosvita;
  src: url("/fonts/Mosvita-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mosvita;
  src: url("/fonts/Mosvita-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --_variables---white: #fcfcfc;
  --_variables---mosvita: Mosvita, Arial, sans-serif;
  --_variables---margin-160: 160px;
  --_variables---margin-64: 64px;
  --_variables---margin-88: 88px;
  --_variables---cal-sans: "Cal Sans", sans-serif;
  --_variables---titre-60: 60px;
  --_variables---line-height-105: 105%;
  --_variables---paragraphe-18: 18px;
  --_variables---line-height-125: 125%;
  --_variables---paragraphe-14: 14px;
  --_variables---titre-18-cta: 18px;
  --_variables---medium-blue: #124aea;
  --_variables---orange: #fc574a;
  --_variables---blue: #336cfe;
  --_variables---margin-32: 32px;
  --_variables---dark-blue: #062f91;
  --_variables---titre-30: 30px;
  --_variables---margin-200: 200px;
  --_variables---margin-48: 48px;
  --_variables---paragraphe-16: 16px;
  --_variables---pastel: #e3edff;
  --_variables---titre-25: 25px;
  --_variables---titre-50: 50px;
  --_variables---margin-144: 144px;
  --_variables---titre-20: 20px;
  --_variables---paragraphe-12: 12px;
  --_variables---titre-40: 40px;
  --_variables---gris: #f1f2f7;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

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

.body {
  background-color: var(--_variables---white);
  font-family: var(--_variables---mosvita);
  background-image: url("/images/BG-BODY-ATD30.svg");
  background-position: 50% 0;
  background-repeat: repeat-y;
  background-size: 1200px;
}

.header {
  justify-content: center;
  align-items: center;
  margin-top: 128px;
  display: flex;
}

.main-containeur {
  width: 1440px;
  max-width: calc(100% - 80px);
  margin-left: auto;
  margin-right: auto;
}

.header-containeur {
  width: 100%;
  min-height: 672px;
  padding: var(--_variables---margin-160) var(--_variables---margin-64) var(--_variables---margin-88);
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-image: linear-gradient(0deg, #062f91, #062f911a);
  border-radius: 64px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: hidden;
}

.header-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  margin-top: 0;
  margin-bottom: -8px;
  font-weight: 400;
}

.header-title.urgence {
  max-width: 816px;
}

.header-p {
  max-width: 539px;
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
}

.header-avis {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: fit-content;
  min-width: fit-content;
  display: flex;
}

.header-avis-img {
  object-fit: contain;
  object-position: 0% 50%;
  width: fit-content;
  max-width: fit-content;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  display: block;
}

.header-avis-right {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  max-height: 32px;
  display: flex;
}

.header-avis-right-p {
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-14);
  line-height: 100%;
}

.header-avis-right-img {
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  height: 12px;
  min-height: 12px;
  max-height: 12px;
}

.header-double-cta {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  display: flex;
}

.cta {
  font-family: var(--_variables---cal-sans);
  font-size: var(--_variables---titre-18-cta);
  text-align: center;
  border-radius: 1500px;
  padding: 16px 32px;
  font-weight: 400;
  line-height: 100%;
  transition: all .3s cubic-bezier(.455, .03, .515, .955);
}

.cta.white {
  border: 1px solid var(--_variables---white);
  background-color: var(--_variables---white);
  color: var(--_variables---medium-blue);
}

.cta.white:hover {
  color: var(--_variables---orange);
}

.cta.border-white {
  border: 1px solid var(--_variables---white);
  background-color: #0000;
}

.cta.border-white:hover {
  background-color: var(--_variables---white);
  color: var(--_variables---orange);
}

.cta.blue {
  background-color: var(--_variables---blue);
  color: var(--_variables---white);
}

.cta.blue:hover {
  background-color: var(--_variables---medium-blue);
}

.cta.border-blue {
  border: 1px solid var(--_variables---medium-blue);
  color: var(--_variables---medium-blue);
  background-color: #0000;
}

.cta.border-blue:hover {
  border-color: var(--_variables---orange);
  color: var(--_variables---orange);
}

.cta.orange {
  background-color: var(--_variables---orange);
}

.cta.orange:hover {
  background-color: #df4c40;
}

.header-checklist {
  grid-column-gap: 24px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  max-width: 712px;
  display: flex;
}

.header-checklist-div {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.header-checklist-div-p {
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-18);
  line-height: 100%;
}

.header-checklist-div-i {
  border-radius: 1500px;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
}

.section-confiance {
  margin-top: var(--_variables---margin-64);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.section-confiance-title {
  margin-top: 0;
  margin-bottom: var(--_variables---margin-32);
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-30);
  line-height: var(--_variables---line-height-105);
  font-weight: 400;
}

.span-blue {
  color: var(--_variables---medium-blue);
}

.confiance-div-logos {
  width: 100%;
}

.section-services {
  padding-top: var(--_variables---margin-200);
  padding-bottom: var(--_variables---margin-200);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.services-div-title {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 432px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.services-div-title-h2 {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---medium-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  display: flex;
}

.services-checklist {
  grid-column-gap: 24px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.services-checklist-div-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: 100%;
}

.services-blocs {
  margin-top: var(--_variables---margin-48);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.services-blocs-div {
  border-radius: 32px;
  justify-content: flex-start;
  align-items: flex-end;
  width: calc(33.33% - 10.67px);
  min-width: calc(33.33% - 10.67px);
  max-width: calc(33.33% - 10.67px);
  min-height: 400px;
  padding: 32px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.services-blocs-div.large {
  width: calc(66.66% - 5.34px);
  min-width: calc(66.66% - 5.34px);
  max-width: calc(66.66% - 5.34px);
}

.services-blocs-div-texte {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  z-index: 5;
  flex-flow: column;
  width: 100%;
  max-width: 264px;
  display: flex;
}

.services-blocs-div-texte.large {
  max-width: 325px;
}

.services-blocs-div-texte-h3 {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-30);
  line-height: var(--_variables---line-height-105);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.services-blocs-div-texte-p {
  font-family: var(--_variables---mosvita);
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-16);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
}

.section-propos {
  padding-bottom: var(--_variables---margin-200);
}

.propos-main-div {
  grid-column-gap: var(--_variables---margin-64);
  grid-row-gap: var(--_variables---margin-64);
  justify-content: center;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.image {
  border-radius: 32px;
  height: 100%;
}

/* La photo de la section « A propos » etait posee en background-image, donc invisible pour
   l'editeur : le pont ne reconnait un champ image que sur une balise <img>. Le client
   pouvait changer tout le texte de la section et pas sa photo. Le fond cede la place a une
   vraie <img> qui remplit la boite, meme cadrage (cover, centre) et memes coins arrondis.
   La div garde sa largeur ; sa hauteur vient toujours du flex parent (stretch). */
.propos-div-img {
  border-radius: 32px;
  width: 50%;
  max-width: 608px;
}

/* Pas d'overflow:hidden sur cette boite. Il y en avait un, par prudence, quand la photo est
   passee du fond CSS a une <img> -- mais l'image porte deja son propre arrondi et son propre
   cadrage, donc il ne servait a rien de plus. En revanche il rognait le contour d'edition :
   l'editeur dessine un pointille a 3 px du bord de la zone modifiable, et ces 3 px tombaient
   hors de la boite. D'ou un contour interrompu en bas, la ou l'arrondi rentre le plus. */

.propos-div-img-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50%;
  border-radius: 32px;
}

.propos-div-right {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 50%;
  max-width: 504px;
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
}

.propos-div-right-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.propos-div-right-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
  font-weight: 400;
}

.propos-div-icons {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.propos-div-icons-div {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--_variables---pastel);
  border-radius: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(50% - 8px);
  min-width: calc(50% - 8px);
  max-width: calc(50% - 8px);
  padding: 24px 32px;
  display: flex;
}

.propos-div-icons-div-i {
  border-radius: 150px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.propos-div-icons-div-p {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---medium-blue);
  font-size: var(--_variables---titre-25);
  font-weight: 400;
  line-height: 100%;
}

.section-reassurance {
  padding-top: var(--_variables---margin-88);
  padding-bottom: var(--_variables---margin-88);
  background-image: linear-gradient(45deg, var(--_variables---dark-blue), var(--_variables---medium-blue));
  position: relative;
}

.reassurances-main-div {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  z-index: 2;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.reassurances-div {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  display: flex;
}

.reassurances-div-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-30);
  line-height: var(--_variables---line-height-105);
}

.reassurances-div-i {
  border-radius: 1500px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.section-equipe {
  padding-top: var(--_variables---margin-200);
}

.equipe-div-title {
  max-width: 416px;
  margin-bottom: var(--_variables---margin-48);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.equipe-div-title-h2 {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.equipe-div-title-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
}

.equipe-main-div {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  display: flex;
}

.equipe-main-div-card {
  width: calc(20% - 12.8px);
  min-width: calc(20% - 12.8px);
  max-width: calc(20% - 12.8px);
}

.equipe-main-div-card-img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 32px;
  width: 100%;
}

.equipe-main-div-card-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-25);
  line-height: var(--_variables---line-height-105);
  margin-top: 16px;
  margin-bottom: 8px;
}

.text-block {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-16);
  line-height: var(--_variables---line-height-105);
}

.equipe-recrutement {
  margin-top: var(--_variables---margin-32);
  padding-top: var(--_variables---margin-88);
  padding-bottom: var(--_variables---margin-88);
  background-image: linear-gradient(45deg, var(--_variables---dark-blue), var(--_variables---medium-blue));
  border-radius: 32px;
  position: relative;
  overflow: hidden;
}

.equipe-recrutement-div {
  width: 608px;
  max-width: 85%;
  color: var(--_variables---white);
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.equipe-recrutement-div-title {
  font-family: var(--_variables---cal-sans);
  font-size: var(--_variables---titre-50);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.equipe-recrutement-div-p {
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  text-align: center;
  margin-top: 16px;
  margin-bottom: 24px;
}

.section-temoignages {
  padding-top: var(--_variables---margin-200);
  padding-bottom: var(--_variables---margin-200);
}

.temoignages-title {
  margin-bottom: var(--_variables---margin-48);
}

.temoignages-title-h2 {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.section-intervention {
  padding-bottom: var(--_variables---margin-200);
}

.intervention-main-div {
  grid-column-gap: var(--_variables---margin-64);
  grid-row-gap: var(--_variables---margin-64);
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.intervention-main-div-left {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 50%;
  max-width: 511px;
  display: flex;
}

.intervention-main-div-right {
  aspect-ratio: 1;
  background-color: var(--_variables---pastel);
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  width: 50%;
  max-width: 608px;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.intervention-main-div-left-title {
  max-width: 425px;
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.intervention-main-div-left-tags {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.intervention-main-div-left-tags.blocs {
  margin-top: 8px;
  margin-bottom: 8px;
}

.intervention-main-div-left-tag {
  border: 1px solid var(--_variables---medium-blue);
  background-color: var(--_variables---white);
  color: var(--_variables---medium-blue);
  font-size: var(--_variables---paragraphe-16);
  border-radius: 150px;
  padding: 8px 16px;
  font-weight: 700;
  line-height: 100%;
}

.intervention-main-div-right-img {
  object-fit: contain;
  width: 100%;
  max-width: 432px;
  display: none;
}

.section-realisations {
  padding-bottom: var(--_variables---margin-200);
}

.realisations-title {
  max-width: 608px;
  margin-right: auto;
  margin-bottom: var(--_variables---margin-48);
  margin-left: auto;
}

.realisations-title.particuliers {
  max-width: 818px;
}

.realisations-title-h3 {
  max-width: 608px;
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.realisations-title-h3.particuliers {
  max-width: 818px;
}

.realisations-title-p {
  font-family: var(--_variables---mosvita);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  text-align: center;
  margin-top: 24px;
  margin-bottom: 0;
}

.realisations-title-p.particuliers {
  max-width: 608px;
  margin-left: auto;
  margin-right: auto;
}

.section-faq {
  padding-bottom: var(--_variables---margin-200);
}

.faq-div-title {
  max-width: 400px;
  margin-right: auto;
  margin-bottom: var(--_variables---margin-48);
  margin-left: auto;
}

.faq-div-title-h3 {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.faq-accordeon {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  max-width: 608px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.faq-main-question {
  background-color: var(--_variables---pastel);
  cursor: pointer;
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
}

.faq-main-question-top {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.faq-main-question-bottom {
  max-height: fit-content;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}

.faq-main-question-top-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-25);
  line-height: var(--_variables---line-height-105);
  font-weight: 400;
}

.faq-main-question-top-i-open {
  object-fit: contain;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
}

.faq-main-question-top-i-close {
  object-fit: contain;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  display: none;
}

.faq-main-question-bottom-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
  padding-top: 24px;
}

.footer-reassurance {
  margin-bottom: var(--_variables---margin-88);
  padding-top: var(--_variables---margin-88);
  padding-bottom: var(--_variables---margin-88);
  background-image: linear-gradient(45deg, var(--_variables---dark-blue), var(--_variables---medium-blue));
  border-radius: 64px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.footer-reassurance-title {
  width: 815px;
  max-width: 90%;
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-50);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  margin: 0 auto;
  font-weight: 400;
}

.footer-reassurance-p {
  width: 608px;
  max-width: 90%;
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  text-align: center;
  margin: 16px auto 24px;
}

.main-contact-form {
  max-width: 1024px;
  margin-right: auto;
  margin-bottom: var(--_variables---margin-144);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: auto;
  display: flex;
}

.main-contact-form-left {
  grid-column-gap: var(--_variables---margin-48);
  grid-row-gap: var(--_variables---margin-48);
  flex-flow: column;
  width: 296px;
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  position: sticky;
  top: 80px;
}

.main-contact-form-right {
  padding-top: var(--_variables---margin-64);
  padding-right: var(--_variables---margin-64);
  padding-bottom: var(--_variables---margin-64);
  padding-left: var(--_variables---margin-64);
  background-image: linear-gradient(45deg, var(--_variables---dark-blue), var(--_variables---medium-blue));
  border-radius: 64px;
  width: calc(100% - 312px);
  position: relative;
  overflow: hidden;
}

.main-contact-form-left-bloc-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-25);
  line-height: var(--_variables---line-height-105);
  margin-bottom: 16px;
}

.main-contact-form-left-bloc-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-16);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
}

.main-contact-form-left-bloc-ligne {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.main-contact-form-left-bloc-ligne-i {
  border-radius: 150px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.main-contact-form-left-bloc-ligne-textes {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.main-contact-form-left-bloc-ligne-textes-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-14);
  margin-bottom: 0;
  line-height: 100%;
}

.main-contact-form-left-bloc-ligne-textes-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-20);
  line-height: var(--_variables---line-height-105);
  font-weight: 400;
}

.main-contact-form-left-bloc-ligne-espace {
  height: 16px;
}

.footer-main {
  margin-top: var(--_variables---margin-88);
  padding-top: var(--_variables---margin-88);
  padding-bottom: var(--_variables---margin-88);
  background-color: var(--_variables---dark-blue);
  position: relative;
}

.contact-form-main {
  z-index: 2;
  margin-bottom: 0;
  position: relative;
}

.contact-form-main-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: wrap;
  margin-bottom: 24px;
  display: flex;
}

.contact-form-main-wrapper-field {
  min-height: 48px;
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  border-radius: 16px;
  margin-bottom: 0;
  padding: 16px 24px;
}

.contact-form-main-wrapper-field::placeholder {
  color: var(--_variables---dark-blue);
}

.contact-form-main-wrapper-field.demi {
  width: calc(50% - 12px);
}

.contact-form-main-wrapper-select {
  min-height: 48px;
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  border-radius: 16px;
  margin-bottom: 0;
  padding: 0 24px;
}

.contact-form-main-wrapper-textarea {
  min-height: 152px;
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  resize: vertical;
  border-radius: 16px;
  margin-bottom: 0;
  padding: 16px 24px;
}

.contact-form-main-wrapper-textarea::placeholder {
  color: var(--_variables---dark-blue);
}

.contact-form-radio-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  display: flex;
}

/* Pieces jointes photo du formulaire.
   Le libelle et l'aide etaient en dark-blue sur le panneau bleu du formulaire : invisibles.
   Le champ paraissait donc absent, et il ne restait a l'ecran que le bouton par defaut du
   navigateur, en anglais ("Choose Files / No file chosen") sur un site francais.
   On passe le texte en blanc et on remplace le controle natif par un bouton francais. */
/* Le bloc est une BOITE BLANCHE, comme les autres champs du formulaire (meme rayon de
   16 px, meme retrait de 16/24 px, meme couleur de texte dark-blue). Premiere version
   posee a plat sur le panneau bleu : elle ne se lisait pas comme un champ, et le texte
   blanc a 70 % d'opacite passait pour du gris delave. */
.contact-form-photos {
  width: 100%;
}

.contact-form-photos-box {
  background-color: var(--_variables---white);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.contact-form-photos-label {
  display: block;
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
}

/* L'input reste dans le DOM et dans l'ordre de tabulation (le clavier et les lecteurs
   d'ecran doivent l'atteindre) : on le masque a l'oeil seulement, jamais en display:none
   qui le retirerait du formulaire. Le <label for> qui suit fait office de bouton. */
.contact-form-photos-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Ligne bouton + compteur, dans la boite blanche. */
.contact-form-photos-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Le bouton est bleu sur la boite blanche (l'inverse de la 1re version, qui etait
   blanche sur le panneau bleu).
   Le bleu est le medium-blue et non le blue : blanc sur #336cfe ne donne que 4,08:1,
   sous le minimum WCAG de 4,5:1 (releve par PageSpeed le 2026-09-01). Blanc sur
   #124aea donne 6,4:1. C'etait deja la couleur de survol, l'ecart ne se voit pas. */
.contact-form-photos-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background-color: var(--_variables---medium-blue);
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-14);
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 100px;
  transition: opacity .2s ease;
}

.contact-form-photos-btn:hover { opacity: .88; }

/* Contour visible quand on arrive au clavier : le bouton est un <label>, il n'a pas
   d'anneau de focus natif, c'est l'input masque qui recoit le focus. */
.contact-form-photos-input:focus-visible + .contact-form-photos-row .contact-form-photos-btn,
.contact-form-photos-input:focus-visible ~ .contact-form-photos-row .contact-form-photos-btn {
  outline: 2px solid var(--_variables---dark-blue);
  outline-offset: 3px;
}

.contact-form-photos-count {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-14);
}

/* 0,75 et non 0,65 : a 0,65 le texte tombe a 4,30:1 sur la boite blanche, juste sous
   le minimum de 4,5:1. A 0,75 il est a 5,7:1 et reste visuellement en retrait. */
.contact-form-photos-hint {
  color: var(--_variables---dark-blue);
  opacity: 0.75;
  font-size: var(--_variables---paragraphe-14);
  margin: 0;
}

.contact-form-radio-wrapper-div {
  background-color: var(--_variables---white);
  cursor: pointer;
  border-radius: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(33.33% - 10.67px);
  margin-bottom: 0;
  padding: 16px;
  display: flex;
}

.contact-form-radio-wrapper-div-radio {
  accent-color: #062f91;
  border-color: #062f91;
  outline-color: #062f91;
  margin-top: 0;
  margin-bottom: 24px;
  margin-left: 0;
}

.contact-form-radio-wrapper-div-radio-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-18-cta);
  line-height: var(--_variables---line-height-105);
  cursor: pointer;
  margin-bottom: 0;
  font-weight: 400;
}

.contact-form-radio-wrapper-div-radio-subtitle {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-12);
  line-height: var(--_variables---line-height-105);
  cursor: pointer;
  margin-bottom: 4px;
  font-weight: 400;
}

.header-icons {
  grid-column-gap: var(--_variables---margin-48);
  grid-row-gap: var(--_variables---margin-48);
  flex-flow: column;
  display: flex;
  position: absolute;
  top: auto;
  left: auto;
  right: 0;
  transform: translateX(-50%);
}

.header-icons-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-14);
  line-height: var(--_variables---line-height-125);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.header-icons-wrap-i {
  border-radius: 150px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.header-icons-wrap-i.orange {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.temoignages-wrapper {
  padding-bottom: 32px;
  position: relative;
}

.temoignages-slider {
  background-color: #0000;
  position: static;
}

.temoignages-slider-mask {
  width: 100%;
}

.temoignages-slider-left-arrow, .temoignages-slider-right-arrow {
  display: none;
}

.temoignages-slider-slide {
  background-color: var(--_variables---pastel);
  border-radius: 32px;
  width: calc(33.33% - 10.67px);
  margin-right: 16px;
  padding: 32px;
}

.temoignages-slider-slide-wrap {
  grid-column-gap: var(--_variables---margin-48);
  grid-row-gap: var(--_variables---margin-48);
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.temoignages-slider-slide-wrap-top {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.temoignages-slider-slide-wrap-bottom {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.temoignages-slider-slide-wrap-top-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
}

.temoignages-slider-slide-wrap-top-i {
  object-fit: contain;
  object-position: 0% 50%;
  width: 100%;
  min-width: 100%;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
}

.temoignages-slider-slide-wrap-bottom-img {
  object-fit: cover;
  border-radius: 150px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.temoignages-slider-slide-wrap-bottom-text {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  max-height: 40px;
  display: flex;
}

.temoignages-slider-slide-wrap-bottom-text-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-14);
  line-height: var(--_variables---line-height-105);
}

.temoignages-slider-slide-wrap-bottom-text-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-20);
  line-height: var(--_variables---line-height-105);
  font-weight: 400;
}

.footer-main-wrapper {
  grid-column-gap: var(--_variables---margin-48);
  grid-row-gap: var(--_variables---margin-48);
  z-index: 2;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.footer-main-left {
  grid-column-gap: var(--_variables---margin-48);
  grid-row-gap: var(--_variables---margin-48);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: fit-content;
  max-width: calc(50% - 24px);
  display: flex;
}

.footer-main-right {
  grid-column-gap: var(--_variables---margin-48);
  grid-row-gap: var(--_variables---margin-48);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: fit-content;
  max-width: calc(50% - 24px);
  display: flex;
}

.footer-main-logo-a {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.footer-main-logo-img {
  object-fit: contain;
  object-position: 0% 50%;
  width: 100%;
  min-width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.footer-main-group {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.footer-main-group.right {
  text-align: right;
}

.footer-main-group-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-25);
  line-height: var(--_variables---line-height-105);
  font-weight: 400;
}

.footer-main-group-p {
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-16);
  line-height: var(--_variables---line-height-125);
  text-decoration: none;
}

.footer-logos-certifs {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.footer-logos-certifs-img {
  object-fit: contain;
  object-position: 50% 50%;
  width: fit-content;
  max-width: 112px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.footer-logos-certifs-img.dea {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
}

.footer-logos-certifs-img.bft {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
}

.footer-credit {
  z-index: 2;
  width: 100%;
  margin-top: var(--_variables---margin-32);
  padding-top: 16px;
  border-top: 1px solid rgba(252, 252, 252, .12);
  color: rgba(252, 252, 252, .45);
  font-size: var(--_variables---paragraphe-12);
  line-height: var(--_variables---line-height-125);
  text-align: center;
  position: relative;
}

.footer-credit-a {
  color: rgba(252, 252, 252, .6);
  text-decoration: none;
}

.footer-credit-a:hover {
  color: rgba(252, 252, 252, .8);
  text-decoration: underline;
}

/* L'image d'un bloc de service etait en z-index:-1, donc DERRIERE sa carte : aucun clic ne
   pouvait l'atteindre, et le client ne pouvait pas la remplacer depuis son espace alors
   que le champ existait deja. Elle passe a 0, ce qui la laisse sous le texte (z-index 5)
   et sous le voile (z-index 1) : le rendu ne bouge pas, mais le clic arrive jusqu'a elle. */
.services-blocs-div-img {
  z-index: 0;
  object-fit: cover;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Celle-ci garde -1 : elle doit rester derriere le fond degrade de son conteneur, sinon
   elle le masque. Elle se modifie depuis l'onglet Contenus du portail. */
.header-containeur-bg {
  z-index: -1;
  object-fit: cover;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.header-containeur-bg.propos {
  object-position: 50% 70%;
}

.header-containeur-bg.urgence {
  object-position: 50% 60%;
}

.section-introduction {
  padding-top: var(--_variables---margin-200);
  padding-bottom: var(--_variables---margin-200);
}

.section-introduction.collectivites {
  padding-bottom: 0;
}

.introduction-main-div {
  grid-column-gap: var(--_variables---margin-64);
  grid-row-gap: var(--_variables---margin-64);
  justify-content: center;
  display: flex;
}

.introduction-main-div-left {
  border-radius: 32px;
  width: calc(50% - 32px);
  max-width: 608px;
  position: relative;
  overflow: hidden;
}

.introduction-main-div-right {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  width: calc(50% - 32px);
  max-width: 504px;
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
}

.image-2 {
  width: 100%;
  min-width: 100%;
  height: 100%;
  max-height: 100%;
}

.introduction-main-div-right-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-40);
  line-height: var(--_variables---line-height-105);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.introduction-main-div-right-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
}

.introduction-main-div-right-lines {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}

.introduction-main-div-right-line {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--_variables---pastel);
  border-radius: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px 32px;
  display: flex;
}

.introduction-main-div-right-line-img {
  border-radius: 150px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.introduction-main-div-right-line-text {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  width: calc(100% - 72px);
  display: flex;
}

.introduction-main-div-right-line-text-tite {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---medium-blue);
  font-size: var(--_variables---titre-30);
  line-height: var(--_variables---line-height-105);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.introduction-main-div-right-line-text-p {
  color: var(--_variables---medium-blue);
  font-size: var(--_variables---paragraphe-16);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
}

.introduction-main-div-left-img {
  object-fit: cover;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.section-process {
  padding-bottom: var(--_variables---margin-200);
}

.section-process.collectivites {
  padding-top: var(--_variables---margin-200);
}

.process-title-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 816px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.process-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.process-p {
  max-width: 608px;
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---line-height-125);
  line-height: var(--_variables---line-height-125);
  text-align: center;
  margin-bottom: 0;
}

.process-colums {
  max-width: 816px;
  margin-top: var(--_variables---margin-48);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.process-colum {
  background-color: var(--_variables---pastel);
  color: var(--_variables---dark-blue);
  border-radius: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(50% - 8px);
  padding: 48px 32px;
  display: flex;
  position: relative;
}

.process-colum.blue {
  background-color: #e3edff;
  background-image: linear-gradient(45deg, var(--_variables---dark-blue), var(--_variables---medium-blue));
  color: var(--_variables---white);
  overflow: hidden;
}

.process-colum-title-wrapper {
  z-index: 2;
  width: 100%;
  position: relative;
}

.process-colum-title-wrapper-title {
  font-family: var(--_variables---cal-sans);
  font-size: var(--_variables---titre-40);
  line-height: var(--_variables---line-height-105);
  margin-bottom: 8px;
}

.process-colum-title-wrapper-p {
  margin-bottom: 0;
}

.process-colum-lines {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  margin-top: 32px;
  display: flex;
}

.process-colum-line {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.process-colum-line-number {
  background-color: var(--_variables---dark-blue);
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-18-cta);
  border-radius: 150px;
  justify-content: center;
  align-items: center;
  line-height: 100%;
  display: flex;
}

.process-colum-line-number.blue {
  background-color: var(--_variables---white);
  color: var(--_variables---dark-blue);
}

.process-colum-line-text {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  width: calc(100% - 56px);
  display: flex;
}

.process-colum-line-text-title {
  font-family: var(--_variables---cal-sans);
  font-size: var(--_variables---titre-18-cta);
  line-height: var(--_variables---line-height-105);
}

.process-colum-line-text-p {
  font-size: var(--_variables---paragraphe-14);
  line-height: var(--_variables---line-height-105);
  margin-bottom: 0;
}

.logos-slider-main {
  background-color: #0000;
  height: auto;
}

.logos-slider-mask {
  height: auto;
}

.logos-slider-arrow-left, .logos-slider-arrow-right, .logos-slider-nav {
  display: none;
}

.logos-slider-slide {
  text-align: center;
  vertical-align: middle;
  width: calc(20% - 25.6px);
  margin-right: 32px;
}

.logos-slider-slide-img {
  object-fit: contain;
  width: 100%;
  max-width: 112px;
  max-height: 64px;
  margin-left: auto;
  margin-right: auto;
}

.realisations-list {
  grid-column-gap: 16px;
  grid-row-gap: 24px;
  flex-flow: wrap;
  display: flex;
}

.realisations-list-item {
  width: calc(25% - 12px);
  padding-left: 0;
  padding-right: 0;
}

/* Le cadre (.cms-frame de RealisationsSection.astro) reprend la boite de la photo aux
   trois paliers, plutot que de la recopier : taille, arrondi et marge du bas. Sans ca la
   marge se retrouvait ENFERMEE dans le cadre (mesure : cadre de 200 px pour une photo de
   184 px), et une photo zoomee aurait deborde dans cette bande sous elle. */
.realisations-list-item-img,
.cms-frame:has(> .realisations-list-item-img) {
  object-fit: cover;
  border-radius: 24px;
  width: 100%;
  min-width: 100%;
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  margin-bottom: 24px;
}

.realisations-list-item-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-25);
  line-height: var(--_variables---line-height-105);
  margin-top: 16px;
  margin-bottom: 12px;
  font-weight: 400;
}

.realisations-list-item-tags {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  display: flex;
}

.realisations-list-item-tag {
  background-color: var(--_variables---medium-blue);
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-14);
  line-height: var(--_variables---line-height-105);
  border-radius: 150px;
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  padding: 10px 16px;
  font-weight: 700;
}

.realisations-list-item-lieu {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.realisations-list-item-lieu-i {
  object-fit: contain;
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
}

.realisations-list-item-lieu-p {
  color: var(--_variables---medium-blue);
  font-size: var(--_variables---paragraphe-16);
  line-height: var(--_variables---line-height-105);
  font-weight: 700;
}

.text-block-2 {
  line-height: 100%;
}

.bg-grain-wrapper {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.navbar {
  z-index: 9999;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  position: fixed;
  top: -144px;
  left: 0;
}

.navbar-wrapper {
  background-color: var(--_variables---white);
  border: 1px solid #f1f2f7;
  border-radius: 150px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px 12px 32px;
  display: flex;
}

.footer-reassurance-wrapper {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.navbar-logo-img {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
}

.navbar-navbar {
  background-color: #0000;
}

.navbar-nav {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.navbar-nav-a {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-14);
  padding: 0;
  line-height: 100%;
}

.navbar-nav-a:hover {
  color: var(--_variables---medium-blue);
}

.navbar-nav-a.w--current {
  color: var(--_variables---orange);
  font-weight: 700;
}

.navbar-nav-a.w--current:hover {
  color: var(--_variables---blue);
}

.navbar-cta {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
}

.navbar-i-phone-div {
  background-color: var(--_variables---blue);
  aspect-ratio: 1;
  border-radius: 150px;
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.455, .03, .515, .955);
  display: flex;
}

.navbar-i-phone-div:hover {
  background-color: var(--_variables---medium-blue);
}

.navbar-i-phone {
  object-fit: contain;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
}

.section-contrats {
  padding-bottom: var(--_variables---margin-200);
}

.realisations-title-div-cta {
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  display: flex;
}

.contrats-table-wrapper {
  max-width: 816px;
  margin-left: auto;
  margin-right: auto;
}

.section-partenaires {
  margin-bottom: var(--_variables---margin-200);
}

.partenaires-title {
  max-width: 360px;
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  margin: 0 auto;
  font-weight: 400;
}

.partenaires-div-logos {
  margin-top: var(--_variables---margin-48);
  grid-column-gap: var(--_variables---margin-64);
  grid-row-gap: var(--_variables---margin-64);
  justify-content: center;
  align-items: center;
  display: flex;
}

.partenaires-div-img {
  filter: saturate(0%);
  object-fit: contain;
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  height: 80px;
  min-height: 80px;
  max-height: 80px;
}

.partenaires-div-img._48 {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.partenaires-div-img._72 {
  height: 72px;
  min-height: 72px;
  max-height: 72px;
}

.partenaires-div-img._64 {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
}

.section-contact {
  padding-top: var(--_variables---margin-200);
}

.contact-div-title {
  max-width: 608px;
  margin-right: auto;
  margin-bottom: var(--_variables---margin-48);
  margin-left: auto;
}

.contact-div-title-h1 {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.contact-div-title-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  text-align: center;
  margin-top: 24px;
  margin-bottom: 0;
}

.success-p {
  flex-flow: column;
  display: flex;
}

.form-sucess {
  font-family: var(--_variables---mosvita);
  color: var(--_variables---white);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  background-color: #0000;
  padding: 0;
  font-weight: 400;
}

.form-sucess-pspan {
  font-family: var(--_variables---cal-sans);
  font-size: var(--_variables---titre-30);
  line-height: var(--_variables---line-height-105);
  margin-bottom: -8px;
  font-weight: 400;
}

.section-blocs {
  padding-top: var(--_variables---margin-200);
  padding-bottom: var(--_variables---margin-200);
  grid-column-gap: var(--_variables---margin-64);
  grid-row-gap: var(--_variables---margin-64);
  flex-flow: column;
  display: flex;
}

.section-blocs-wrapper {
  grid-column-gap: var(--_variables---margin-64);
  grid-row-gap: var(--_variables---margin-64);
  justify-content: center;
  align-items: center;
  display: flex;
}

.section-blocs-wrapper.pro {
  flex-flow: row-reverse;
}

/* Le cadre ajoute le 2026-08-31 (urgence.body.html) partage les regles de boite de
   la photo, ici et dans les trois media queries plus bas, plutot que de les recopier :
   une seule source pour les quatre points de rupture. La photo, elle, remplit son
   cadre (regle unique en fin de feuille). */
.section-blocs-wrapper-img,
.cms-frame:has(> .section-blocs-wrapper-img) {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 32px;
  width: 50%;
  max-width: 608px;
}

.section-blocs-wrapper-text {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  max-width: 504px;
  display: flex;
}

.section-blocs-wrapper-text-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.section-blocs-wrapper-text-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-18);
  line-height: var(--_variables---line-height-125);
  margin-bottom: 0;
}

.partenaires-logos-div {
  flex-flow: column;
  width: 100%;
  display: flex;
}

.partenaires-logos-div-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---titre-18-cta);
  line-height: var(--_variables---line-height-105);
  margin-bottom: 16px;
  font-weight: 400;
}

.partenaires-logos-div-img {
  object-fit: contain;
  object-position: 0% 50%;
  width: 100%;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
}

.contrats-table-wrapper-p {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-12);
  line-height: var(--_variables---line-height-105);
  text-align: left;
  margin-top: 16px;
  margin-bottom: 0;
}

.section-chiffres-cl-s {
  margin-top: var(--_variables---margin-64);
  margin-bottom: var(--_variables---margin-200);
  padding-top: var(--_variables---margin-88);
  padding-bottom: var(--_variables---margin-88);
  background-image: linear-gradient(45deg, var(--_variables---dark-blue), var(--_variables---medium-blue));
  position: relative;
}

.chiffres-wrapper {
  grid-column-gap: var(--_variables---margin-48);
  grid-row-gap: var(--_variables---margin-48);
  z-index: 2;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.chiffres-div {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: fit-content;
  max-width: 174px;
  display: flex;
}

.chiffres-div-title {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-60);
  line-height: var(--_variables---line-height-105);
  font-weight: 400;
}

.chiffres-div-p {
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-20);
  line-height: var(--_variables---line-height-105);
  margin-bottom: 0;
  font-weight: 400;
}

.navbar-burger-a {
  display: none;
}

.navbar-menu-burger {
  height: 100vh;
  max-height: 100vh;
  display: none;
}

/* Voile purement decoratif : il couvrait toute la carte et interceptait le clic destine a
   la photo. z-index explicite pour rester au-dessus d'elle (passee de -1 a 0), et
   pointer-events:none pour laisser passer le clic. */
.services-blocs-gradient {
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(#062f911a, #062f91cc);
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.temoignages-slider-slide-wrap-bottom-emptyimg {
  background-color: var(--_variables---blue);
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  font-family: var(--_variables---cal-sans);
  color: var(--_variables---white);
  font-size: var(--_variables---titre-18-cta);
  text-align: center;
  border-radius: 150px;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  line-height: 100%;
  display: flex;
}

.navbar-nav-a-i {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
}

.lottie-animation {
  width: 100%;
  height: 100%;
}

.navbar-nav-a-dropdown {
  color: var(--_variables---dark-blue);
  font-size: var(--_variables---paragraphe-14);
  padding: 0;
  line-height: 100%;
  display: block;
}

.navbar-nav-a-dropdown:hover {
  color: var(--_variables---medium-blue);
}

.navbar-nav-a-dropdown.w--current {
  color: var(--_variables---orange);
  font-weight: 700;
}

.navbar-nav-a-dropdown.w--current:hover {
  color: var(--_variables---blue);
}

.navbar-nav-a-dropdown-toggle {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.navbar-nav-a-dropdown-i {
  width: 8px;
  min-width: 8px;
  max-width: 8px;
  height: 6px;
  min-height: 6px;
  max-height: 6px;
  margin-right: 0;
  position: static;
}

.navbar-nav-a-dropdown-p {
  color: var(--_variables---dark-blue);
}

.navbar-nav-a-dropdown-list {
  background-color: #0000;
  display: none;
}

.navbar-nav-a-dropdown-list.w--open {
  margin-top: 0;
  display: block;
}

.image-3 {
  width: 8px;
  min-width: 8px;
  max-width: 8px;
  height: 6px;
  min-height: 6px;
  max-height: 6px;
  margin-bottom: 2px;
}

.navbar-nav-a-dropdown-list-a {
  color: var(--_variables---dark-blue);
}

.navbar-nav-a-dropdown-list-a:hover {
  color: var(--_variables---medium-blue);
}

.navbar-nav-a-dropdown-list-wrapper {
  background-color: var(--_variables---white);
  border: 1px solid #f1f2f7;
  border-radius: 8px;
  margin-top: 16px;
}

.header-icons-wrap-i-wrapper {
  position: relative;
}

.header-icons-wrap-i-orange {
  opacity: 0;
  position: absolute;
  left: 0;
}

.navbar-nav-a-dropdown-toggle-a {
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  body {
    --_variables---white: #fcfcfc;
    --_variables---mosvita: Mosvita, Arial, sans-serif;
    --_variables---margin-160: 120px;
    --_variables---margin-64: 48px;
    --_variables---margin-88: 64px;
    --_variables---cal-sans: "Cal Sans", sans-serif;
    --_variables---titre-60: 45px;
    --_variables---line-height-105: 105%;
    --_variables---paragraphe-18: 18px;
    --_variables---line-height-125: 125%;
    --_variables---paragraphe-14: 14px;
    --_variables---titre-18-cta: 18px;
    --_variables---medium-blue: #124aea;
    --_variables---orange: #fc574a;
    --_variables---blue: #336cfe;
    --_variables---margin-32: 24px;
    --_variables---dark-blue: #062f91;
    --_variables---titre-30: 27px;
    --_variables---margin-200: 144px;
    --_variables---margin-48: 32px;
    --_variables---paragraphe-16: 16px;
    --_variables---pastel: #e3edff;
    --_variables---titre-25: 23px;
    --_variables---titre-50: 40px;
    --_variables---margin-144: 96px;
    --_variables---titre-20: 19px;
    --_variables---paragraphe-12: 12px;
    --_variables---titre-40: 35px;
    --_variables---gris: #f1f2f7;
  }

  .body {
    background-size: 880px;
  }

  .header {
    margin-top: 120px;
  }

  .main-containeur {
    max-width: calc(100% - 64px);
  }

  .header-containeur {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    border-radius: 48px;
  }

  .header-avis-img {
    display: none;
  }

  .cta {
    padding: 14px 24px;
  }

  .header-checklist, .services-checklist {
    grid-column-gap: 16px;
    grid-row-gap: 12px;
  }

  .services-blocs-div {
    width: calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    min-height: 288px;
    padding: 24px;
  }

  .services-blocs-div.large {
    width: calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    min-height: 288px;
  }

  .services-blocs-div-texte, .services-blocs-div-texte.large {
    max-width: 85%;
  }

  .propos-main-div {
    flex-flow: column;
  }

  .propos-div-img {
    width: 100%;
    max-width: 100%;
    height: 600px;
  }

  .propos-div-right {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .propos-div-icons-div {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .reassurances-main-div {
    grid-column-gap: 48px;
    grid-row-gap: 32px;
    flex-flow: wrap;
    justify-content: center;
  }

  .reassurances-div {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .equipe-main-div-card {
    width: calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }

  .equipe-main-div-card-img {
    border-radius: 24px;
  }

  .equipe-recrutement-div {
    max-width: 69%;
  }

  .intervention-main-div {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .intervention-main-div-left {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .intervention-main-div-right {
    width: 100%;
    padding: 0;
  }

  .intervention-main-div-left-title {
    text-align: center;
  }

  .intervention-main-div-left-tags {
    justify-content: center;
    align-items: center;
  }

  .intervention-main-div-left-tags.blocs {
    justify-content: flex-start;
    align-items: center;
  }

  .realisations-title {
    max-width: 509px;
  }

  .realisations-title-p {
    margin-top: 16px;
  }

  .footer-reassurance {
    border-radius: 48px;
  }

  .main-contact-form {
    flex-flow: column-reverse;
  }

  .main-contact-form-left {
    width: 100%;
    top: inherit;
    flex-flow: wrap;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
  }

  .main-contact-form-right {
    border-radius: 48px;
    width: 100%;
  }

  .contact-form-main-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-bottom: 20px;
  }

  .contact-form-main-wrapper-field.demi {
    width: calc(50% - 10px);
  }

  .contact-form-radio-wrapper {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .header-icons {
    display: none;
  }

  .temoignages-slider-slide {
    width: calc(50% - 6px);
    margin-right: 12px;
  }

  .footer-main-logo-img {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    overflow: scroll;
  }

  .footer-logos-certifs-img {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
  }

  .footer-logos-certifs-img.dea {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
  }

  .footer-logos-certifs-img.bft {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
  }

  .introduction-main-div {
    flex-flow: column;
  }

  .introduction-main-div-left {
    width: 100%;
    max-width: 100%;
    height: 440px;
  }

  .introduction-main-div-right {
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .process-colum {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .logos-slider-slide {
    width: calc(25% - 18px);
    margin-right: 24px;
  }

  .logos-slider-slide-img {
    max-width: 104px;
    max-height: 56px;
  }

  .realisations-list-item {
    width: calc(50% - 8px);
  }

  .realisations-list-item-img,
  .cms-frame:has(> .realisations-list-item-img) {
    height: 192px;
    min-height: 192px;
    max-height: 192px;
    margin-bottom: 16px;
  }

  .navbar-wrapper {
    z-index: 5;
    padding-left: 24px;
    padding-right: 16px;
  }

  .footer-reassurance-wrapper {
    max-width: 90%;
  }

  .navbar-logo-img {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
  }

  .navbar-cta {
    display: none;
  }

  .partenaires-div-logos {
    flex-flow: wrap;
  }

  .partenaires-div-img {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
  }

  .partenaires-div-img._48 {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }

  .partenaires-div-img._72 {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
  }

  .partenaires-div-img._64 {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  .section-contact {
    padding-top: var(--_variables---margin-200);
  }

  .section-blocs-wrapper, .section-blocs-wrapper.pro {
    flex-flow: column;
  }

  .section-blocs-wrapper-img,
  .cms-frame:has(> .section-blocs-wrapper-img) {
    aspect-ratio: auto;
    border-radius: 24px;
    width: 100%;
    max-width: 100%;
    height: 440px;
  }

  .section-blocs-wrapper-text {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    width: 100%;
    max-width: 100%;
  }

  .partenaires-logos-div-title {
    margin-bottom: 12px;
  }

  .chiffres-wrapper {
    flex-flow: wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .navbar-burger-a {
    display: flex;
  }

  .navbar-burger-i-open {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .navbar-menu-burger {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    background-color: var(--_variables---white);
    z-index: 4;
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100vw;
    padding: 88px 48px;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
  }

  .navbar-menu-burger-a {
    font-family: var(--_variables---cal-sans);
    color: var(--_variables---dark-blue);
    font-size: var(--_variables---titre-40);
    line-height: var(--_variables---line-height-105);
    text-align: right;
    font-weight: 400;
    text-decoration: none;
  }

  .navbar-menu-burger-i {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    position: absolute;
    top: 64px;
    right: 48px;
  }
}

@media screen and (max-width: 767px) {
  body {
    --_variables---white: #fcfcfc;
    --_variables---mosvita: Mosvita, Arial, sans-serif;
    --_variables---margin-160: 88px;
    --_variables---margin-64: 32px;
    --_variables---margin-88: 48px;
    --_variables---cal-sans: "Cal Sans", sans-serif;
    --_variables---titre-60: 40px;
    --_variables---line-height-105: 105%;
    --_variables---paragraphe-18: 17px;
    --_variables---line-height-125: 125%;
    --_variables---paragraphe-14: 13px;
    --_variables---titre-18-cta: 17px;
    --_variables---medium-blue: #124aea;
    --_variables---orange: #fc574a;
    --_variables---blue: #336cfe;
    --_variables---margin-32: 16px;
    --_variables---dark-blue: #062f91;
    --_variables---titre-30: 25px;
    --_variables---margin-200: 96px;
    --_variables---margin-48: 24px;
    --_variables---paragraphe-16: 15px;
    --_variables---pastel: #e3edff;
    --_variables---titre-25: 21px;
    --_variables---titre-50: 35px;
    --_variables---margin-144: 72px;
    --_variables---titre-20: 19px;
    --_variables---paragraphe-12: 11px;
    --_variables---titre-40: 30px;
    --_variables---gris: #f1f2f7;
  }

  .body {
    background-size: 800px;
  }

  .header {
    margin-top: 112px;
  }

  .main-containeur {
    max-width: calc(100% - 32px);
  }

  .header-containeur {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    border-radius: 32px;
  }

  .header-double-cta {
    flex-flow: column;
  }

  .cta {
    padding: 12px 20px;
  }

  .services-div-title {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .services-blocs {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .services-blocs-div {
    border-radius: 24px;
    width: calc(50% - 6px);
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-height: 264px;
  }

  .services-blocs-div.large {
    width: calc(50% - 6px);
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-height: 264px;
  }

  .image {
    border-radius: 24px;
  }

  .propos-div-img {
    border-radius: 24px;
    height: 400px;
  }

  .propos-div-right {
    padding-top: 0;
    padding-bottom: 0;
  }

  .propos-div-icons {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .propos-div-icons-div {
    width: calc(50% - 6px);
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
  }

  .propos-div-icons-div-i {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }

  .reassurances-main-div {
    grid-column-gap: 40px;
    grid-row-gap: 32px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .reassurances-div {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .reassurances-div-i {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }

  .equipe-main-div {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .equipe-main-div-card {
    width: calc(50% - 6px);
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
  }

  .equipe-main-div-card-img, .equipe-recrutement {
    border-radius: 24px;
  }

  .equipe-recrutement-div {
    max-width: 73%;
  }

  .equipe-recrutement-div-p {
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .intervention-main-div-left {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .intervention-main-div-right {
    border-radius: 24px;
    padding: 0;
  }

  .footer-reassurance {
    border-radius: 32px;
  }

  .footer-reassurance-p {
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .main-contact-form-right {
    border-radius: 32px;
  }

  .contact-form-main-wrapper-field {
    border-radius: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-form-main-wrapper-select {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-form-main-wrapper-textarea {
    min-height: 128px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-form-radio-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .contact-form-radio-wrapper-div {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .contact-form-radio-wrapper-div-radio {
    margin-bottom: 20px;
  }

  .temoignages-slider-slide {
    border-radius: 24px;
    width: calc(50% - 6px);
    padding: 24px;
  }

  .footer-main-wrapper {
    flex-flow: column;
    align-items: center;
  }

  .footer-main-left, .footer-main-right {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    max-width: 100%;
  }

  .footer-main-logo-img {
    object-position: 50% 50%;
  }

  .footer-main-group.right {
    justify-content: flex-start;
    align-items: center;
  }

  .footer-logos-certifs-img {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
  }

  .footer-logos-certifs-img.dea {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
  }

  .footer-logos-certifs-img.bft {
    height: 37px;
    min-height: 37px;
    max-height: 37px;
  }

  .introduction-main-div-left {
    border-radius: 24px;
    height: 376px;
  }

  .introduction-main-div-right {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .introduction-main-div-right-line {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    padding: 20px 24px;
  }

  .introduction-main-div-right-line-img {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }

  .introduction-main-div-right-line-text {
    width: calc(100% - 56px);
  }

  .process-title-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .process-colums {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .process-colum {
    border-radius: 24px;
    width: calc(50% - 6px);
    padding: 32px 24px;
  }

  .process-colum-lines {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    margin-top: 24px;
  }

  .process-colum-line {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .process-colum-line-number {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
  }

  .process-colum-line-text {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .logos-slider-slide {
    width: calc(33.33% - 10.66px);
    margin-right: 16px;
  }

  .logos-slider-slide-img {
    max-width: 96px;
    max-height: 48px;
  }

  .realisations-list {
    grid-row-gap: 16px;
  }

  /* Deux colonnes sur telephone (2026-08-31), a la place d une seule. Une carte par
     rangee faisait huit rangees a parcourir pour une seule page de la liste. Avec deux
     colonnes, 4 cartes par page font deux rangees pleines, comme sur ordinateur. Le
     script lit le meme seuil de 767 px pour changer le nombre par page. */
  .realisations-list-item {
    width: calc(50% - 8px);
  }

  .realisations-list-item-tag {
    padding: 8px 14px;
  }

  .navbar-wrapper {
    padding: 10px 14px 10px 16px;
  }

  .navbar-logo-img {
    height: 26px;
    min-height: 26px;
    max-height: 26px;
  }

  .realisations-title-div-cta {
    margin-top: 20px;
  }

  .partenaires-div-img {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
  }

  .partenaires-div-img._48 {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
  }

  .partenaires-div-img._72 {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  .partenaires-div-img._64 {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .section-contact {
    padding-top: var(--_variables---margin-200);
  }

  .contact-div-title-p {
    margin-top: 16px;
  }

  .section-blocs-wrapper-img,
  .cms-frame:has(> .section-blocs-wrapper-img) {
    height: 288px;
  }

  .section-blocs-wrapper-text {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .partenaires-logos-div-img {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
  }

  .contrats-table-wrapper-p {
    margin-top: 12px;
  }

  .chiffres-wrapper {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .chiffres-div {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
  }

  .navbar-burger-i-open {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }

  .navbar-menu-burger {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  body {
    --_variables---white: #fcfcfc;
    --_variables---mosvita: Mosvita, Arial, sans-serif;
    --_variables---margin-160: 88px;
    --_variables---margin-64: 32px;
    --_variables---margin-88: 48px;
    --_variables---cal-sans: "Cal Sans", sans-serif;
    --_variables---titre-60: 40px;
    --_variables---line-height-105: 105%;
    --_variables---paragraphe-18: 17px;
    --_variables---line-height-125: 125%;
    --_variables---paragraphe-14: 13px;
    --_variables---titre-18-cta: 17px;
    --_variables---medium-blue: #124aea;
    --_variables---orange: #fc574a;
    --_variables---blue: #336cfe;
    --_variables---margin-32: 16px;
    --_variables---dark-blue: #062f91;
    --_variables---titre-30: 25px;
    --_variables---margin-200: 96px;
    --_variables---margin-48: 24px;
    --_variables---paragraphe-16: 15px;
    --_variables---pastel: #e3edff;
    --_variables---titre-25: 21px;
    --_variables---titre-50: 35px;
    --_variables---margin-144: 72px;
    --_variables---titre-20: 19px;
    --_variables---paragraphe-12: 11px;
    --_variables---titre-40: 30px;
    --_variables---gris: #f1f2f7;
  }

  .body {
    background-size: 800px;
  }

  .header-double-cta {
    flex-flow: column;
  }

  .services-blocs-div, .services-blocs-div.large {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 248px;
  }

  .propos-div-icons {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .propos-div-icons-div {
    width: calc(50% - 4px);
    min-width: calc(50% - 4px);
    padding-left: 20px;
    padding-right: 20px;
  }

  .reassurances-main-div {
    grid-row-gap: 32px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .reassurances-div {
    justify-content: flex-start;
    align-items: center;
  }

  .equipe-main-div {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .equipe-main-div-card {
    width: calc(50% - 4px);
    min-width: calc(50% - 4px);
    max-width: calc(50% - 4px);
  }

  .equipe-recrutement-div {
    max-width: 90%;
  }

  .intervention-main-div-right {
    padding: 0;
  }

  .contact-form-main-wrapper-field.demi {
    width: 100%;
  }

  .contact-form-radio-wrapper {
    flex-flow: column;
  }

  .contact-form-radio-wrapper-div, .temoignages-slider-slide {
    width: 100%;
  }

  .footer-main-logo-img {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
  }

  .footer-logos-certifs {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .footer-logos-certifs-img {
    height: 29px;
    min-height: 29px;
    max-height: 29px;
  }

  .footer-logos-certifs-img.dea {
    height: 26px;
    min-height: 26px;
    max-height: 26px;
  }

  .introduction-main-div-left {
    height: 224px;
  }

  .process-colums {
    flex-flow: column;
  }

  .process-colum {
    width: 100%;
  }

  .logos-slider-slide {
    width: calc(50% - 6px);
    margin-right: 12px;
  }

  .logos-slider-slide-img {
    max-width: 88px;
  }

  .realisations-list {
    grid-row-gap: 16px;
  }

  /* Deux colonnes sur telephone (2026-08-31), a la place d une seule. Une carte par
     rangee faisait huit rangees a parcourir pour une seule page de la liste. Avec deux
     colonnes, 4 cartes par page font deux rangees pleines, comme sur ordinateur. Le
     script lit le meme seuil de 767 px pour changer le nombre par page. */
  .realisations-list-item {
    width: calc(50% - 8px);
  }

  .realisations-list-item-img,
  .cms-frame:has(> .realisations-list-item-img) {
    height: 184px;
    min-height: 184px;
    max-height: 184px;
  }

  .navbar-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .footer-reassurance-wrapper {
    max-width: 95%;
  }

  .navbar-logo-img {
    height: 24px;
    min-height: 24px;
    max-height: 24px;
  }

  .realisations-title-div-cta {
    margin-top: 20px;
  }

  .partenaires-div-img {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
  }

  .partenaires-div-img._72 {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .partenaires-div-img._64 {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
  }

  .section-blocs-wrapper-img,
  .cms-frame:has(> .section-blocs-wrapper-img) {
    height: 208px;
  }

  .partenaires-logos-div-img {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
  }

  .navbar-menu-burger {
    padding-left: 32px;
    padding-right: 32px;
  }

  .navbar-menu-burger-i {
    right: 32px;
  }
}

/* Cal Sans auto-hebergee (remplace le chargement Google Fonts / webfont.js) */
@font-face {
  font-family: 'Cal Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/CalSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cal Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/CalSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Badge "Made in Webflow" injecte par le runtime webflow.js (plan gratuit) :
   sans objet sur l hebergement Mona Hub, on le neutralise. */
.w-webflow-badge { display: none !important; }

/* La barre de navigation ne s'anime plus a l'arrivee sur une page.
   ATTENTION, le mecanisme est INVERSE de celui de zyrclo. Ici le CSS place lui-meme la
   barre hors ecran (.navbar { top: -144px } plus haut dans ce fichier) et c'est
   l'interaction Webflow qui la redescend de 144 px. Neutraliser le seul transform la
   laisserait donc invisible : il faut aussi ramener `top` a 0. C'est precisement ce qui
   s'etait produit sur les deux pages legales, qui n'ont pas d'identifiant de page Webflow
   et ne declenchaient donc aucune animation.
   Motif du retrait : 300 ms d'attente puis 500 ms de mouvement a chaque changement de page,
   soit 800 ms sans navigation, pour une animation vue des dizaines de fois par visite et
   qui ne remplit aucun role. La limite admise pour une animation d'interface est 300 ms.
   Cette regle rend inutiles les correctifs locaux poses le 2026-08-19 dans les en-tetes de
   mentions-legales et politique-confidentialite, qui ont ete retires. Si quelqu'un
   reactive un jour l'animation en supprimant ce bloc, il devra les remettre, sans quoi ces
   deux pages repartiront avec une navigation invisible. */
.navbar { top: 0; transform: none !important; }

/* Indissociable des attributs width= et height= poses sur les 522 <img> des gabarits.
   Ces attributs servent deux choses a la fois : ils donnent au navigateur le rapport de
   forme pour reserver la place AVANT le decodage (c'est le but), mais ils comptent aussi
   comme une largeur et une hauteur en pixels au niveau des indications de presentation.
   Sans cette ligne l'image est figee aux dimensions du fichier et deformee des que sa
   classe n'impose qu'une seule des deux dimensions. `auto` au niveau auteur bat
   l'indication de presentation et rend la main au rapport de forme.
   LES DEUX SONT NECESSAIRES, et `width` autant que `height` : mesure faite, avec le seul
   `height: auto` le blason de la barre de navigation (.navbar-logo-img, qui n'impose que
   la hauteur) passait de 128 px a 486 px de large, la largeur restant collee au 627 px du
   fichier. Le symetrique existe sur les logos du carrousel, qui n'imposent que la largeur.
   La specificite est volontairement la plus faible possible (0,0,1) : toutes les classes
   Webflow qui imposent une vraie dimension (.services-blocs-div-img, .navbar-logo-img,
   .realisations-list-item-img, .logos-slider-slide-img...) continuent de gagner, rien
   n'est redimensionne.
   Retirer cette ligne sans retirer les attributs deformerait les images du site. */
img { width: auto; height: auto; }

/* ==========================================================================
   Revelations au scroll neutralisees (2026-08-25)
   --------------------------------------------------------------------------
   Le moteur d'interactions Webflow posait une opacite nulle sur ces blocs et
   ne les revelait qu'au passage du declencheur de scroll. En descendant vite,
   le declencheur ne suit pas : le texte restait invisible. Rapporte par le
   client, constate sur 45 blocs de la seule page d'accueil.

   Les 21 selecteurs ci-dessous sont EXTRAITS des donnees d'interaction du site
   (target.appliesTo="CLASS" dans webflow.ca48ea99...js), pas devines page par
   page. .navbar-nav-a-dropdown en est volontairement absent : c'est la seule
   cible fonctionnelle, elle doit pouvoir se masquer.

   On force l'opacite, PAS la transformation : le moteur continue de tourner
   (donc le menu et les composants gardent leur comportement exact), il ne peut
   simplement plus rendre un contenu invisible. Si un bloc n'est pas anime, il
   reste decale de 16 px, ce qui ne se voit pas.

   !important est necessaire : le moteur ecrit en style inline.
   ========================================================================== */
.chiffres-div,
.contrats-table-wrapper,
.equipe-main-div-card,
.faq-div-title,
.faq-main-question,
.header,
.header-icons-wrap,
.introduction-main-div-left,
.introduction-main-div-right,
.partenaires-div-img,
.process-colum,
.process-colum-line,
.process-colum-title-wrapper-p,
.process-colum-title-wrapper-title,
.process-title-wrapper,
/* :not(.est-entrante) ajoute le 2026-08-31. Ce filet bloquait l'animation d'entree de la
   pagination des realisations : dans la cascade, un !important d'auteur passe DEVANT les
   animations, donc les keyframes tournaient a vide (mesure au navigateur : animation-name
   correct pendant 340 ms, opacite figee a 1 et transform a none du debut a la fin). La
   carte ne perd ce filet que le temps de son animation, et le composant retire la classe
   sur animationend, avec un delai de secours. */
.realisations-list-item:not(.est-entrante),
.realisations-title,
.reassurances-div,
.section-blocs-wrapper-img,
.section-blocs-wrapper-text,
.services-blocs-div {
  opacity: 1 !important;
  /* Ajoute le 2026-08-25, apres coup : ne forcer que l'opacite laissait le GLISSEMENT
     tourner. Les blocs apparaissaient donc deja visibles puis se decalaient sans raison
     lisible, ce qui donnait l'impression d'un site casse plutot que d'une animation.
     Aucune de ces 21 classes ne s'appuie sur un transform pour sa mise en page (verifie
     regle par regle dans cette feuille), le neutraliser est donc sans effet de bord. */
  transform: none !important;
}

/* ==========================================================================
   Transition de page native (2026-08-25)
   --------------------------------------------------------------------------
   Le site est un clone Webflow : chaque page est un vrai chargement HTML (pas
   de routeur SPA) et webflow.js se reinitialise entierement a chaque arrivee
   (sliders logos/temoignages, menu burger, dropdowns de nav). Une navigation
   cote client (Astro ClientRouter / View Transitions JS) empecherait cette
   reinitialisation de se declencher normalement : on utilise donc l'API CSS
   native @view-transition, qui anime un vrai changement de document sans
   toucher au cycle de chargement. webflow.js tourne exactement comme avant,
   la seule difference est le fondu impose par le navigateur entre l'ancienne
   et la nouvelle page.

   Fondu court et sobre uniquement : pas de glissement, pas de zoom, et aucun
   view-transition-name n'est pose sur un element de la page (seule la racine
   transitionne). Sur un navigateur qui n'implemente pas cette API (Firefox,
   Safari < 18.2 a la date d'ecriture), la regle est simplement ignoree et la
   navigation reste un chargement de page classique : aucune degradation
   visible. */
@view-transition {
  navigation: auto;
}

/* Fond de la racine pose explicitement pour eviter un flash blanc pendant le
   fondu : le navigateur peint le fond de <html> derriere les deux instantanes
   (ancienne page / nouvelle page) le temps de la transition. #fcfcfc est la
   couleur reelle de fond du site (variable --_variables---white, appliquee
   sur .body plus haut dans ce fichier) ; sans cette ligne <html> restait au
   blanc par defaut du navigateur, visible une fraction de seconde a chaque
   navigation. */
html {
  background-color: #fcfcfc;
}

/* Duree et courbe du fondu : 200 ms, ease-out. Le navigateur fournit deja les
   images-cles par defaut (opacite 1 -> 0 sur l'ancienne page, 0 -> 1 sur la
   nouvelle), on ajuste seulement leur duree et leur easing sans les
   redefinir. Meme doctrine que le retrait des revelations au scroll plus
   haut dans ce fichier : une transition d'interface ne doit pas se
   remarquer. 300 ms est deja la limite haute admise pour ce type
   d'animation, on reste en dessous. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: ease-out;
}

/* Reduction de mouvement : la transition est totalement coupee, la
   navigation redevient un changement de page instantane. Le navigateur
   continue de generer les pseudo-elements (@view-transition reste actif),
   on annule uniquement leurs animations. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ==========================================================================
   Realisations collee a la section du dessus, page Pro / Collectivites (2026-08-26)
   --------------------------------------------------------------------------
   Signale par l'operateur. Sur les autres pages, .section-introduction porte
   200 px de padding en haut ET en bas : la section Realisations inseree en
   dessous respire donc naturellement. Sur Pro / Collectivites, la variante
   .collectivites annule ce padding du bas (padding-bottom: 0), parce qu'a
   l'origine elle etait suivie du bandeau de logos .section-confiance, qui doit
   justement rester colle.

   En intercalant Realisations a cet endroit, on a herite de ce zero : la
   section arrivait au contact du texte du dessus. On rend l'espacement a CE
   cas precis via le selecteur d'adjacence, sans toucher a .section-realisations
   en general (les autres pages n'en ont pas besoin et doubleraient la marge).

   Meme variable que le reste du site, donc l'espacement suit les points de
   rupture responsive au lieu d'etre fige a 200 px. */
.section-introduction.collectivites + .section-realisations {
  padding-top: var(--_variables---margin-200);
}

/* ==========================================================================
   Carte d'equipe sans photo (2026-08-26)
   --------------------------------------------------------------------------
   On peut ajouter quelqu'un a l'equipe avant d'avoir sa photo : le client la
   pose ensuite depuis son espace. Sans image, la carte affiche cette case au
   MEME gabarit (la classe .equipe-main-div-card-img est conservee, donc carre
   et coins arrondis), pour que la grille ne se decale pas.

   Volontairement neutre et un peu terne : elle doit se lire comme une place
   qui attend une photo, pas comme un parti pris graphique. On n'utilise PAS
   l'image de gabarit grise de Webflow, que le garde de mise en ligne refuse a
   juste titre (tools/site/check-placeholder-content.mjs). */
/* Avatar par defaut d'un avis sans photo. Le site source y mettait les initiales de
   l'auteur, dans une <div> : jolie, mais le pont d'edition ne traite comme image que les
   balises <img>, donc aucune photo d'avis ne pouvait etre ajoutee depuis l'espace client.
   L'operateur a demande une icone generique. Rond bleu de la charte + silhouette blanche,
   memes dimensions que les vraies photos : la ligne d'avis ne bouge pas. */
/* .mona-empty : meme regle, posee EN PLUS par le pont d'edition (packages/editor-bridge)
   quand un item est ajoute en direct depuis le portail (clone d'un item existant qui, lui,
   avait deja sa photo) ou quand la photo d'un item existant est retiree en direct. Astro ne
   recalcule .avatar-generique/.photo-a-venir qu'au PROCHAIN BUILD ; sans ce doublon la
   photo manquante restait invisible (juste le pixel transparent) le temps de la session
   d'edition. Rendu publie inchange : cette regle ne s'applique jamais en dehors du pont. */
.temoignages-slider-slide-wrap-bottom-img.avatar-generique,
.temoignages-slider-slide-wrap-bottom-img.mona-empty {
  background-color: var(--_variables---blue);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='3.2'/%3E%3Cpath d='M5.8 19a6.4 6.4 0 0 1 12.4 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 62%;
}
/* La case etait un aplat #f1f2f7 sur fond blanc : personne ne la voyait, donc personne ne
   pensait a cliquer dessus pour poser la photo manquante. Elle se lit maintenant comme un
   avatar par defaut -- convention connue, qui dit « place a remplir » sans faire « page
   cassee » : aplat un cran plus soutenu, lisere discret, silhouette au centre. */
.equipe-main-div-card-img.photo-a-venir,
.equipe-main-div-card-img.mona-empty {
  display: block;
  background-color: #e7e9f2;
  box-shadow: inset 0 0 0 1px #d3d7e6;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeb4cb' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='3.4'/%3E%3Cpath d='M5.5 19.2a6.8 6.8 0 0 1 13 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 38%;
}

/* ==========================================================================
   Equipe : trois cartes par ligne sur ordinateur (2026-08-26)
   --------------------------------------------------------------------------
   La grille etait reglee sur cinq cartes par ligne, ce qui tombait juste tant
   que l'equipe en comptait cinq. Avec l'arrivee de Ludivine, la seconde ligne
   n'en portait plus qu'une, seule et decalee a gauche. Trois par ligne donne
   deux lignes pleines pour six personnes.

   La largeur est calculee, pas approchee : 100 % moins les deux gouttieres de
   16 px, divise par trois. Les cartes remplissent donc exactement la ligne.

   Bornee a 768 px et au-dessus, donc ordinateur ET tablette. Premiere version
   posee a 992 px : elle ne changeait rien pour qui regardait depuis un telephone
   ou une fenetre etroite, qui voyaient toujours trois lignes de deux. C'est ce
   que l'operateur a constate.

   Le telephone garde volontairement deux cartes par ligne. Mesure a 390 px de
   large : trois par ligne y donnerait des cartes de 93 px, illisibles avec le
   nom et la fonction dessous ("Assistante administrative et commerciale"). Deux
   lignes n'y valent pas ce prix. A 768 px la carte fait encore 219 px, ca passe. */
@media screen and (min-width: 768px) {
  .equipe-main-div-card {
    width: calc((100% - 32px) / 3);
    min-width: calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
  }
}

/* ==========================================================================
   Etiquettes des cartes Realisations : passage a la ligne (2026-08-26)
   --------------------------------------------------------------------------
   Chaque carte porte deux etiquettes cote a cote (type de client, type
   d'intervention) dans un conteneur en flex sans passage a la ligne. Quand la
   premiere est longue -- "Professionnel / Collectivites" --, les deux debordent
   de la colonne et empietent sur la carte voisine, la seconde se retrouvant
   tronquee.

   Le site source a EXACTEMENT le meme defaut, capture comparative a l'appui :
   la section avait donc ete portee fidelement, defaut compris. L'operateur a
   tranche pour la correction plutot que pour la fidelite.

   flex-wrap seul suffit : la seconde etiquette passe dessous quand la place
   manque, et rien ne bouge quand elle tient. */
.realisations-list-item-tags { flex-wrap: wrap; }

/* ==========================================================================
   Cartes Equipe : l'arrondi appartient au cadre, pas a la photo (2026-08-31)
   --------------------------------------------------------------------------
   L'arrondi etait pose sur l'<img> (32px, 24px sous 991px). Des qu'un client
   enregistre un recadrage avec zoom, le pont pose overflow:hidden sur le
   conteneur .cms-frame qui entoure la photo, et ce conteneur n'a aucun arrondi :
   l'image agrandie est donc decoupee AU CARRE et ses coins arrondis disparaissent.
   Constate sur la fiche de Ludivine, seule photo de la section a porter un
   cadrage (zoom 1.32) ; les cinq autres, sans cadrage, gardaient leurs arrondis.

   On deplace donc l'arrondi sur le cadre, et la photo l'epouse par heritage. La
   forme ne depend plus de la photo ni de son cadrage : changer d'image ou zoomer
   ne peut plus la casser. Le selecteur est plus specifique que les regles
   d'origine, qui restent en place sans effet visible. */
.equipe-main-div-card .cms-frame {
  border-radius: 32px;
  overflow: hidden;
}
.equipe-main-div-card .cms-frame > img {
  border-radius: inherit;
}

@media screen and (max-width: 991px) {
  .equipe-main-div-card .cms-frame {
    border-radius: 24px;
  }
}

/* ==========================================================================
   Pagination des Realisations (2026-08-31)
   --------------------------------------------------------------------------
   La grille ne change pas : elle se decoupe en pages de 8, soit exactement deux
   rangees pleines sur ordinateur et quatre sur tablette. Les cartes des autres
   pages sont masquees par l'attribut hidden, jamais retirees du document.

   La regle ci-dessous n'est pas une precaution de style : sans elle, les classes
   de grille Webflow portees par la carte (.w-col, .w-dyn-item) l'emportent sur
   l'attribut hidden et la carte reste visible. Meme piege que partout ailleurs,
   un display pose par une classe bat toujours hidden.

   Fleches : de vrais boutons, dans les couleurs de la charte, sans rouge (il
   reste reserve au depannage urgent). Etat desactive plutot que masque en bout
   de course, pour que la position dans la serie reste lisible. */
.realisations-list-item[hidden] { display: none !important; }

/* Clearfix Webflow neutralise (2026-08-31)
   --------------------------------------------------------------------------
   .w-row porte un clearfix historique (.w-row:before/:after, content " ",
   display table) prevu pour une grille en float. Or .realisations-list est en
   display:flex : ces deux pseudo-elements deviennent alors de vrais elements
   de la grille. Celui du debut est large de 0 px mais consomme quand meme un
   ecart de 16 px, ce qui decale la premiere rangee et fait tomber sa quatrieme
   carte a la ligne suivante. Resultat mesure sur /contact : 3 cartes, un trou,
   puis 4, puis 1 -- la grille paraissait cassee.

   Le correctif existait deja, mais il etait ecrit dans le <head> de la seule
   page d'accueil : les quatre autres pages qui affichent la meme section ne
   l'ont jamais recu. Il est donc remonte ici, dans la feuille du site, ou il
   couvre toutes les pages presentes et futures. Verification faite page par
   page, .realisations-list est le seul .w-row du site passe en flex. */
.realisations-list::before,
.realisations-list::after { display: none !important; }

.realisations-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 38px;
}

.realisations-pages-fleche {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #e3edff;
  border-radius: 100px;
  background: #fff;
  color: #062f91;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.realisations-pages-fleche svg { width: 20px; height: 20px; display: block; }
.realisations-pages-fleche:hover:not(:disabled) { background: #e3edff; border-color: #062f91; }
.realisations-pages-fleche:focus-visible { outline: 2px solid #062f91; outline-offset: 3px; }
.realisations-pages-fleche:disabled { opacity: .32; cursor: default; }

.realisations-pages-etat {
  min-width: 52px;
  text-align: center;
  font-size: 14px;
  color: #758696;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .realisations-pages-fleche { transition: none; }
}

/* Entree des cartes au changement de page (2026-08-31)
   --------------------------------------------------------------------------
   Le basculement de page etait sec : les huit cartes changeaient d'un coup, sans
   rien qui relie l'ancienne page a la nouvelle.

   Une ANIMATION et non une transition : une transition posee sur un element qui
   vient de passer de display:none a visible ne se declenche jamais, son etat de
   depart n'ayant pas ete rendu. Le decalage de 35 ms par carte est pose en ligne
   par le script, de sorte que la rangee se remplisse de gauche a droite.

   Le mouvement reste court (340 ms, derniere carte terminee avant 600 ms) : c'est
   une pagination, pas une entree de scene, et l'artisan qui parcourt ses chantiers
   ne doit jamais attendre. */
@keyframes realisations-entree {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.realisations-list-item.est-entrante {
  animation: realisations-entree .34s cubic-bezier(.2, .6, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .realisations-list-item.est-entrante { animation: none; }
}

/* ==========================================================================
   Arrondis portes par le cadre et non par la photo (2026-08-31)
   --------------------------------------------------------------------------
   Meme cause que la fiche de Ludivine plus haut. Des qu'une photo est recadree,
   le SDK pose overflow:hidden sur son parent direct (packages/content-sdk/frame.ts,
   regle `*:has(> [data-cms])`) pour couper le zoom. Si l'arrondi vit sur la balise
   <img>, l'image agrandie est decoupee AU CARRE par ce parent et ses coins
   disparaissent. Le defaut est donc DORMANT : il n'apparait que le jour ou le
   client recadre cette photo precise.

   Audit du 2026-08-31 sur les quatre sites en ligne, en comparant l'arrondi
   calcule de chaque image editable a celui de son cadre : 6 classes exposees,
   5 sur ce site et 1 sur Casting Cine Motor. cmc6 et smartconcept sont sains.

   Les deux classes ci-dessous ont deja un cadre dedie qui ne contient que la
   photo : l'arrondi y est simplement deplace, la photo l'epouse par heritage.
   Les quatre autres cas n'avaient pas de cadre du tout et leur parent porte
   aussi du texte : arrondir ce parent aurait arrondi le bloc entier, un cadre
   leur a donc ete ajoute dans le markup (BullesIcones.astro, urgence.body.html).

   Le cadre est cible par ce qu'il CONTIENT plutot que par sa place dans l'arbre :
   la regle reste juste meme si le gabarit change de wrapper autour. Meme forme de
   selecteur que celle generee par le SDK.
   ========================================================================== */
.cms-frame:has(> .temoignages-slider-slide-wrap-bottom-img) {
  border-radius: 150px;
  overflow: hidden;
}
/* L'arrondi et la taille du cadre des realisations viennent des regles partagees plus
   haut, pas d'ici : les recopier aurait fige 24 px alors que la photo suit trois paliers.
   Il ne reste que le decoupage, et la photo qui remplit son cadre. */
.cms-frame:has(> .realisations-list-item-img) {
  overflow: hidden;
}
.cms-frame > .realisations-list-item-img {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  border-radius: inherit;
}
/* Bulles d'icones : le cadre a ete AJOUTE dans BullesIcones.astro, parce que le
   parent direct de l'icone etait la bulle entiere, libelle compris. Aucune taille
   n'est recopiee ici : l'icone verrouille la sienne (width/min/max identiques,
   48 px puis 40 px sous 991 px), le cadre l'epouse donc et suit ses points de
   rupture tout seul. `flex: none` reproduit le comportement effectif de l'icone,
   que ses min-width empechaient deja de retrecir. */
.cms-frame:has(> .reassurances-div-i) {
  border-radius: 1500px;
  display: block;
  flex: none;
  overflow: hidden;
}
.cms-frame:has(> .propos-div-icons-div-i) {
  border-radius: 150px;
  display: block;
  flex: none;
  overflow: hidden;
}

.cms-frame:has(> .temoignages-slider-slide-wrap-bottom-img) > img,
.cms-frame:has(> .realisations-list-item-img) > img,
.cms-frame:has(> .reassurances-div-i) > img,
.cms-frame:has(> .propos-div-icons-div-i) > img {
  border-radius: inherit;
  display: block;
}

/* La photo des blocs de la page Urgence remplit desormais son cadre, qui a repris
   ses regles de boite (voir plus haut, quatre points de rupture). Sans cette regle
   elle demanderait 50 % de son propre cadre. `aspect-ratio: auto` et `max-width:
   none` annulent les contraintes reprises par le cadre, qui les porte deja.
   Specificite volontairement superieure (0,2,0) pour gagner dans les media queries
   sans avoir a s'y repeter. */
.cms-frame > .section-blocs-wrapper-img {
  aspect-ratio: auto;
  border-radius: inherit;
  width: 100%;
  max-width: none;
  height: 100%;
}

/* ==========================================================================
   Cartes de realisations alignees sur telephone (2026-08-31)
   --------------------------------------------------------------------------
   Demande de l'operateur apres le passage en deux colonnes : "faudrait faire en
   sorte que la hauteur des elements soit les memes pour ameliorer la lisibilite".

   Mesure d'abord, parce que le defaut n'etait pas celui qu'on croit : les cartes
   d'une meme rangee ont DEJA la meme hauteur (la liste est en flex, les elements
   s'etirent). Ce qui se lit comme un desordre vient de l'INTERIEUR des cartes :

     bloc d'etiquettes   67 px, ou 80 px quand "Professionnel / Collectivites"
                         passe sur deux lignes dans une carte deux fois plus etroite
     titre               22 px sur une ligne, 44 px sur deux
     lieu                26 px, ou absent

   Trois reperes qui glissent, donc aucune ligne de lecture commune d'une carte a
   l'autre. On reserve la place du cas le plus haut pour les deux premiers, et on
   ancre le dernier en bas.

   `min-height` et pas `height` : un libelle plus long un jour doit pouvoir pousser
   le bloc plutot que d'etre coupe. Et l'ancrage du lieu en bas garde le bas des
   cartes aligne meme dans ce cas, ce qu'une hauteur reservee seule ne ferait pas.
   ========================================================================== */
@media screen and (max-width: 767px) {
  .realisations-list-item {
    display: flex;
    flex-direction: column;
  }

  /* Deux etiquettes empilees, dont une sur deux lignes : le cas le plus haut
     observe sur les onze realisations du site. */
  .realisations-list-item-tags {
    min-height: 80px;
    align-content: flex-start;
  }

  /* Deux lignes de titre. La ligne mesure 22 px a cette largeur. */
  .realisations-list-item-title {
    min-height: 44px;
  }

  /* Colle le lieu au bas de la carte, y compris quand il n'y en a pas : la carte
     garde alors sa hauteur au lieu de remonter son contenu. */
  .realisations-list-item-lieu {
    margin-top: auto;
  }
}

/* ==========================================================================
   Pictogrammes realignes sur leur texte (2026-08-31)
   --------------------------------------------------------------------------
   Signale par l'operateur sur l'epingle de localisation des realisations :
   "pas aligne avec le nom de la ville". Ecart mesure : 5 px, sur telephone
   comme sur ordinateur.

   MECANISME, qui n'a rien d'evident : la ligne est bien en flex align-items:
   center, et le centrage fonctionne. Seulement, un conteneur flex centre la
   boite AVEC SES MARGES. Le <p> de la ville porte le margin-bottom: 10px des
   paragraphes ; c'est donc une boite de 26 px qui est centree, et le texte
   visible, lui, se retrouve 5 px trop haut. Regarder `align-items` ne montre
   rien, il faut comparer les centres reels des deux enfants.

   La marge passe donc au CONTENEUR au lieu d'etre supprimee : l'encombrement
   total ne bouge pas d'un pixel, seule la position du texte dans sa ligne est
   corrigee. Les deux conteneurs n'ont aucune marge propre et leurs parents ne
   centrent pas verticalement, verifie avant : rien ne se decale plus haut.

   Balayage des 9 pages du site : deux lignes touchees, celle-ci et le bouton
   du formulaire de contact, decale de 2,5 px sur toutes les pages.
   ========================================================================== */
.realisations-list-item-lieu-p { margin-bottom: 0; }
.realisations-list-item-lieu { margin-bottom: 10px; }

.contact-form-photos-btn { margin-bottom: 0; }
.contact-form-photos-row { margin-bottom: 5px; }

/* ==========================================================================
   Navigation mobile (2026-08-31)
   --------------------------------------------------------------------------
   Sous 991 px, le couple burger + panneau plein ecran herite de Webflow est
   remplace par une barre d'onglets fixee en bas (Accueil / Appeler / Menu) et
   une feuille qui monte du bas. Markup : src/components/NavMobile.astro.
   Comportement : public/js/atd30-nav-mobile.js.

   991 px et non 767 px : c'est le seuil ou le gabarit masque deja la nav
   d'ordinateur et fait apparaitre le burger. Descendre a 767 px aurait laisse
   la tablette sans aucune navigation entre les deux bornes.

   Ce qui a ete mesure au navigateur sur l'ancien menu, en 390 x 844, et que ce
   bloc corrige : aucun acces au telephone ni au bouton "Depannage urgent"
   (`.navbar-cta` etait masque et le panneau ne portait aucun lien tel:), la
   page qui defilait derriere le panneau ouvert, des cibles de 32 px de haut,
   et "Realisations" absent du menu telephone alors qu'il est dans la nav
   d'ordinateur.
   ========================================================================== */

/* En ordinateur, rien de tout ceci n'existe. */
.atd-nav-onglets,
.atd-nav-feuille,
.atd-nav-voile {
  display: none;
}

@media screen and (max-width: 991px) {
  /* L'ancien menu part, son markup reste dans les gabarits (clone Webflow non
     modifie). `display:none` le retire aussi du cadre d'edition du portail, qui
     ne dessine que ce qui a une boite. Les libelles restent editables : ce sont
     les memes cles CMS que la nav d'ordinateur et que la feuille. */
  .navbar-burger-a,
  .navbar-menu-burger {
    display: none;
  }

  /* Le bouton "Depannage urgent" revient sur telephone : il existait deja dans
     le gabarit mais tout `.navbar-cta` etait masque sous 991 px. Le rond
     telephone, lui, reste masque : appeler est desormais un onglet a demeure,
     et deux boutons d'appel dans la meme pilule se seraient concurrences. */
  .navbar-cta {
    display: flex;
  }
  .navbar-i-phone-div {
    display: none;
  }
  .navbar-cta .cta {
    white-space: nowrap;
    padding: 12px 18px;
    font-size: 15px;
  }

  /* La barre du bas flotte au-dessus du contenu ; seul le pied de page reserve
     la hauteur, pour ne pas poser une bande claire sous son fond. */
  .section-footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* La barre de navigation passe au-dessus du voile, pour garder le bouton
     "Depannage urgent" vif et cliquable feuille ouverte. Sans la teinte
     ci-dessous, ses 16 px de marge laissaient voir la page en clair, en bande,
     au-dessus du voile : la teinte est exactement celle du voile, la pilule
     restant opaque par-dessus. */
  .navbar {
    transition: background-color .24s ease;
  }
  body.atd-nav-ouverte .navbar {
    background-color: #062f918c;
  }

  /* ---------- barre d'onglets ---------- */
  .atd-nav-onglets {
    position: fixed;
    z-index: 9998;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: stretch;
    background-color: var(--_variables---white);
    border: 1px solid var(--_variables---gris);
    border-radius: 26px;
    box-shadow: 0 8px 30px #062f912e;
  }

  .atd-nav-onglet {
    flex: 1;
    min-height: 66px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: #8d97ad;
    font-family: var(--_variables---mosvita);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border-radius: 26px;
  }

  .atd-nav-onglet[aria-current="page"],
  .atd-nav-onglet[aria-expanded="true"] {
    color: var(--_variables---medium-blue);
  }

  /* Appeler est le geste qui rapporte sur ce site : il porte la couleur
     d'urgence, comme le bouton du haut. */
  .atd-nav-onglet--appel {
    color: var(--_variables---orange);
  }

  .atd-nav-onglet-t {
    display: block;
  }

  /* ---------- voile ---------- */
  .atd-nav-voile {
    position: fixed;
    z-index: 9989;
    inset: 0;
    display: block;
    background-color: #062f918c;
    opacity: 0;
    transition: opacity .24s ease;
  }
  .atd-nav-voile.est-visible {
    opacity: 1;
  }

  /* ---------- feuille ---------- */
  .atd-nav-feuille {
    position: fixed;
    z-index: 9990;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-flow: column;
    /* Plafonnee par rapport a la BARRE DE NAVIGATION, pas a la fenetre : en pourcentage,
       sur un ecran court, la feuille montait sous la pilule fixe et son titre comme sa
       croix de fermeture passaient derriere (constate en 375 x 667). 96 px = la hauteur de
       la barre, marges comprises. */
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    padding: 0 20px calc(96px + env(safe-area-inset-bottom, 0px));
    background-color: var(--_variables---white);
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -14px 44px #062f9138;
    transform: translateY(101%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  }
  .atd-nav-feuille.est-visible {
    transform: translateY(0);
  }

  /* Sans cette ligne, le `display:flex` ci-dessus l'emporte sur l'attribut
     `hidden` et la feuille resterait a l'ecran, posee en bas de page. */
  .atd-nav-feuille[hidden],
  .atd-nav-voile[hidden] {
    display: none;
  }

  .atd-nav-poignee {
    flex: 0 0 auto;
    width: 44px;
    height: 5px;
    margin: 12px auto 4px;
    border-radius: 99px;
    background-color: #d6dbe8;
  }

  .atd-nav-entete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 14px;
  }

  .atd-nav-titre {
    flex: 1;
    margin: 0;
    font-family: var(--_variables---cal-sans);
    font-size: var(--_variables---titre-20);
    line-height: var(--_variables---line-height-105);
    color: var(--_variables---dark-blue);
  }

  .atd-nav-fermer {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 50%;
    background-color: var(--_variables---gris);
    color: var(--_variables---dark-blue);
    cursor: pointer;
  }

  /* ---------- destinations ---------- */
  .atd-nav-tuiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* 100 px et non 106 depuis l'ajout de la ligne Contact : mesure au navigateur, la feuille
     depassait alors sa hauteur maximale et le numero de telephone repassait sous la barre
     d'onglets. */
  .atd-nav-tuile {
    min-height: 100px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 16px;
    border-radius: 22px;
    background-color: var(--_variables---gris);
    color: var(--_variables---dark-blue);
    text-decoration: none;
  }

  .atd-nav-tuile-i {
    color: var(--_variables---medium-blue);
  }

  .atd-nav-tuile-t {
    font-family: var(--_variables---cal-sans);
    font-size: 17px;
    line-height: 1.15;
  }

  /* ---------- urgence ---------- */
  .atd-nav-urgence {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 24px;
    background-color: var(--_variables---orange);
    color: var(--_variables---white);
    text-decoration: none;
  }

  .atd-nav-urgence-i {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #ffffff33;
  }

  .atd-nav-urgence-t {
    flex: 1;
  }

  .atd-nav-urgence-t b {
    display: block;
    font-family: var(--_variables---cal-sans);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.1;
  }

  .atd-nav-urgence-t small {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    opacity: .92;
  }

  .atd-nav-urgence-c {
    flex: 0 0 auto;
    opacity: .85;
  }

  .atd-nav-tel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 56px;
    margin-top: 14px;
    font-family: var(--_variables---cal-sans);
    font-size: 19px;
    color: var(--_variables---dark-blue);
    text-decoration: none;
  }
}

/* Ecrans courts (iPhone SE et assimiles, 667 px de haut) : mesure au navigateur, le
   contenu de la feuille depassait de 80 px et le numero de telephone se retrouvait
   derriere la barre d'onglets tant qu'on n'avait pas fait defiler la feuille elle-meme,
   ce que rien n'indiquait. On resserre plutot que de compter sur ce defilement. */
@media screen and (max-width: 991px) and (max-height: 740px) {
  /* Resserre a nouveau depuis l'ajout de la ligne Contact : mesure sur 375 x 667, le numero
     de telephone repassait sous la barre d'onglets (650 contre 587) et la feuille redevenait
     defilante. Tous les leviers sont pris ensemble parce qu'aucun ne suffisait seul. */
  .atd-nav-feuille {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .atd-nav-entete {
    padding: 4px 0 10px;
  }
  .atd-nav-tuiles {
    gap: 10px;
  }
  /* Les tuiles gardent leur forme en colonne, comme sur grand ecran : depuis que Contact
     est passe dans la barre d'onglets, la feuille a recupere assez de hauteur pour que
     tout tienne au-dessus de la barre sans changer de patron. */
  .atd-nav-tuile {
    min-height: 74px;
    padding: 11px 14px;
  }
  .atd-nav-urgence {
    margin-top: 12px;
    padding: 14px 18px;
  }
  .atd-nav-tel {
    min-height: 48px;
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atd-nav-feuille,
  .atd-nav-voile {
    transition: none;
  }
}

/* ==========================================================================
   Consentement Google Analytics (2026-08-31)
   --------------------------------------------------------------------------
   Markup : src/components/BandeauCookies.astro. Logique : public/js/atd30-consentement.js.

   Parti pris : bandeau ancre en bas, JAMAIS une fenetre modale et JAMAIS de voile. La
   page reste lisible et utilisable pendant le choix, ce qui est la forme la moins
   intrusive possible sans sortir du cadre legal.

   Ce que le cadre legal interdit d'alleger, et qui est donc tenu ici : les deux boutons
   ont la MEME taille, la meme forme, la meme typo et la meme place. Refuser demande
   exactement un clic, comme accepter. C'est precisement le point qui a values a Google et
   Facebook 150 et 60 millions d'euros d'amende CNIL en janvier 2022.

   Sur telephone, le bandeau se pose AU-DESSUS de la barre d'onglets (voir le bloc
   "Navigation mobile"), sans quoi il l'aurait recouverte et aurait coupe l'acces au menu
   et au bouton d'appel pendant tout le temps du choix.
   ========================================================================== */

.atd-cc {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: 20px;
  width: min(880px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  display: block;
  padding: 20px 24px;
  background-color: var(--_variables---white);
  border: 1px solid var(--_variables---gris);
  border-radius: 24px;
  box-shadow: 0 14px 44px #062f9124;
  transition: transform .26s cubic-bezier(.32, .72, 0, 1), opacity .22s ease;
}

.atd-cc.est-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Sans cette ligne, le `display:block` ci-dessus l'emporte sur l'attribut `hidden` et le
   bandeau resterait a l'ecran avant toute decision du script. */
.atd-cc[hidden] {
  display: none;
}

.atd-cc-in {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.atd-cc-txt {
  flex: 1 1 340px;
  min-width: 260px;
}

.atd-cc-titre {
  margin: 0 0 4px;
  font-family: var(--_variables---cal-sans);
  font-size: var(--_variables---titre-20);
  line-height: var(--_variables---line-height-105);
  color: var(--_variables---dark-blue);
}

.atd-cc-p {
  margin: 0;
  font-family: var(--_variables---mosvita);
  font-size: 13.5px;
  line-height: 1.5;
  color: #5a6580;
}

.atd-cc-p a {
  color: var(--_variables---medium-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.atd-cc-btns {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

/* Meme largeur minimale, meme hauteur, meme graisse pour les deux : l'ecart de couleur
   reste dans la charte et ne cree pas de hierarchie entre accepter et refuser. */
.atd-cc-btn {
  min-width: 132px;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: 1500px;
  font-family: var(--_variables---cal-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  cursor: pointer;
  transition: all .3s cubic-bezier(.455, .03, .515, .955);
}

.atd-cc-refuser {
  border: 1px solid var(--_variables---medium-blue);
  background-color: #0000;
  color: var(--_variables---medium-blue);
}

.atd-cc-refuser:hover {
  background-color: var(--_variables---pastel);
}

/* Meme raison que le bouton d'ajout de photos : blanc sur le blue ne fait que 4,08:1.
   Le fond passe au medium-blue (6,4:1) et le survol descend d'un cran au dark-blue,
   sinon survol et etat normal seraient identiques. */
.atd-cc-accepter {
  border: 1px solid var(--_variables---medium-blue);
  background-color: var(--_variables---medium-blue);
  color: var(--_variables---white);
}

.atd-cc-accepter:hover {
  background-color: var(--_variables---dark-blue);
  border-color: var(--_variables---dark-blue);
}

@media screen and (max-width: 991px) {
  /* Ancre au-dessus de la barre d'onglets (66 px de haut, 12 px de fond, plus la zone
     sure du telephone), sinon le bandeau recouvrait le menu et le bouton d'appel. */
  .atd-cc {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    transform: translateY(14px);
    padding: 18px 20px;
    border-radius: 22px;
  }
  .atd-cc.est-visible {
    transform: translateY(0);
  }
  .atd-cc-in {
    gap: 16px;
  }
  .atd-cc-btns {
    width: 100%;
  }
  /* Les deux boutons occupent exactement la meme largeur : c'est la forme la plus lisible
     de l'equivalence exigee entre accepter et refuser. */
  .atd-cc-btn {
    flex: 1;
    min-width: 0;
    padding: 14px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atd-cc {
    transition: none;
  }
}

/* ==========================================================================
   Contact dans la feuille de navigation, et glissement des realisations
   (2026-08-31, second lot)
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* Quatre onglets depuis l'ajout de Contact (Accueil / Contact / Appeler / Menu) : le
     libelle doit tenir sur une ligne meme a 375 px, ou chaque onglet ne fait plus que
     87 px de large. */
  .atd-nav-onglet {
    padding: 8px 2px;
  }

  .atd-nav-onglet-t {
    white-space: nowrap;
  }
}

/* Glissement horizontal sur la grille des realisations.
   `pan-y` rend le defilement vertical au navigateur et nous reserve l'horizontal : sans
   cela, soit la page ne defile plus au-dessus de la grille, soit le geste est vole par le
   defilement. `pinch-zoom` est conserve, le retirer aurait coute le zoom a deux doigts sur
   les photos de chantier. Sans effet a la souris. Voir le geste dans RealisationsSection. */
.realisations-list {
  touch-action: pan-y pinch-zoom;
}

/* ==========================================================================
   Apercu des photos jointes au formulaire (2026-09-01)
   --------------------------------------------------------------------------
   Le bouton natif etant masque au profit d'un libelle francais, le visiteur n'avait pour
   tout retour qu'un compteur : "3 photos selectionnees". Il ne voyait pas lesquelles et ne
   pouvait pas en retirer une seule ; se tromper obligeait a tout reprendre. Sur telephone,
   ou l'on pioche dans une pellicule de milliers d'images, c'est precisement la ou l'on se
   trompe.

   Comportement : public/js/atd30-form.js. Deux details qui expliquent ce CSS :
   un HEIC d'iPhone ne se decode pas hors Safari, d'ou la pastille de repli portant
   l'extension ; et le bouton de retrait n'existe que si le navigateur sait reconstruire
   une liste de fichiers.
   ========================================================================== */

.cfp-vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.cfp-vignettes[hidden] {
  display: none;
}

.cfp-vignette {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  /* Mesure avant de choisir : le bloc photos est pose sur BLANC (#fcfcfc) sur les cinq
     pages qui le portent, et non sur le bleu de la charte comme je l'avais suppose. Une
     vignette en blanc translucide y etait litteralement invisible, texte compris. */
  background-color: var(--_variables---gris);
  border: 1px solid #e2e7f2;
  animation: cfp-entree .22s ease-out both;
}

.cfp-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Repli quand le navigateur ne sait pas decoder le fichier (HEIC hors Safari). La photo
   est bien jointe, seule son apercu manque : on le dit avec l'extension plutot que de
   laisser une case cassee. */
.cfp-vignette-repli {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--_variables---mosvita);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--_variables---dark-blue);
  background-color: var(--_variables---pastel);
}

.cfp-vignette-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #062f91cc;
  color: var(--_variables---white);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.cfp-vignette-x:hover {
  background-color: var(--_variables---orange);
  transform: scale(1.08);
}

.cfp-vignette-x:focus-visible {
  outline: 2px solid var(--_variables---white);
  outline-offset: 1px;
}

/* Sur telephone, la cible passe a 30 px : 24 px se rate au doigt, et rater ce bouton-la
   veut dire supprimer la mauvaise photo. */
@media screen and (max-width: 767px) {
  .cfp-vignette {
    width: 78px;
    height: 78px;
  }
  .cfp-vignette-x {
    width: 30px;
    height: 30px;
    top: 3px;
    right: 3px;
  }
}

@keyframes cfp-entree {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cfp-vignette {
    animation: none;
  }
  .cfp-vignette-x {
    transition: none;
  }
}

/* Le message de confirmation recoit le focus par script pour qu'un lecteur d'ecran
   l'annonce (voir afficherConfirmation dans atd30-form.js). Il porte donc tabindex="-1",
   ce qui le rend focalisable mais JAMAIS atteignable a la tabulation : l'anneau de focus
   n'y apprend rien a personne et encadrait le message d'un liseré blanc. On le retire ici
   seulement, sans toucher aux vrais elements interactifs, qui gardent le leur. */
.w-form-done:focus {
  outline: none;
}