/* cmsms stylesheet: rodaia modified: 09/04/26 11:11:57 */
:root {
      --paper: #faf6ef;
      --ink: #2b2420;
      --blue: #1c4483;
      --blue-dark: #123462;
      --red: #a63a2b;
      --red-dark: #7d291f;
      --orange: #a63a2b;
      --white: #fffdf8;
      --line: rgba(43, 36, 32, .16);
      --serif: "Instrument Serif", Georgia, serif;
      --sans: "Figtree", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.45;
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    img { max-width: 100%; }

    .site-shell {
      width: min(1460px, calc(100% - 120px));
      margin: 0 auto;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 38px;
      padding: 24px 0 21px;
      border-bottom: 1px solid var(--line);
    }

    .brand {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 23px;
    }

    .brand img {
      display: block;
      width: 174px;
      height: auto;
    }

    .brand-note {
      max-width: 155px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.25;
      text-transform: uppercase;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 5px clamp(18px, 3vw, 48px);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .nav a {
      position: relative;
      padding: 10px 15px;
      white-space: nowrap;
      border: 1px solid var(--line);
      border-radius: 999px;
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    }

    .nav a:not(.pro):hover,
    .nav a:not(.pro):focus-visible,
    .nav a.active {
      color: var(--blue);
      border-color: var(--blue);
    }

    .nav .pro {
      padding: 10px 16px;
      color: var(--white);
      background: var(--red);
      border-color: var(--red);
    }

    .nav .pro:hover,
    .nav .pro:focus-visible {
      color: var(--white);
      background: var(--red-dark);
      border-color: var(--red-dark);
      transform: translateY(-1px);
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(320px, .74fr) minmax(0, 1.42fr);
      gap: clamp(34px, 6vw, 92px);
      align-items: center;
      padding: 42px 0 54px;
    }

    .hero-copy { max-width: 510px; }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 13px;
      margin: 0 0 23px;
      color: var(--orange);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .eyebrow::after {
      display: block;
      width: 31px;
      height: 2px;
      background: var(--orange);
      content: "";
    }

    h1, h2, p { margin-top: 0; }

    h1 {
      max-width: 570px;
      margin-bottom: 27px;
      font-family: var(--serif);
      font-size: clamp(3.25rem, 4.6vw, 5.25rem);
      font-weight: 400;
      line-height: .96;
      letter-spacing: -.04em;
    }

    h1 .year { color: var(--blue); white-space: nowrap; }

    .hero-intro {
      max-width: 475px;
      margin-bottom: 34px;
      font-size: 17px;
      line-height: 1.55;
    }

    .pro-cta {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      min-width: min(100%, 465px);
      padding: 17px 25px;
      color: var(--white);
      background: var(--red);
      border-radius: 13px;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      transition: background .2s ease, transform .2s ease;
    }

    .pro-cta:hover,
    .pro-cta:focus-visible { background: var(--red-dark); transform: translateY(-2px); }

    .pro-cta-label { display: inline-flex; align-items: center; gap: 16px; }
    .pro-cta svg { flex: 0 0 auto; }

    .slider-wrap { min-width: 0; }

    .slider {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1.55 / 1;
      background: #d7e7f5;
      border-radius: 2px;
    }

    .slides {
      display: flex;
      height: 100%;
      transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    }

    .slide {
      position: relative;
      flex: 0 0 100%;
      min-width: 100%;
      overflow: hidden;
    }

    .slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .slide::after {
      position: absolute;
      inset: auto 0 0;
      height: 28%;
      background: linear-gradient(transparent, rgba(0, 0, 0, .38));
      content: "";
      pointer-events: none;
    }

    .slide-caption {
      position: absolute;
      z-index: 1;
      right: 22px;
      bottom: 17px;
      left: 22px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      color: var(--white);
    }

    .slide-caption strong {
      font-family: var(--serif);
      font-size: clamp(2rem, 3vw, 3.7rem);
      font-weight: 400;
      line-height: .9;
    }

    .slide-caption small {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .slider-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 16px;
    }

    .slider-arrows { display: flex; gap: 8px; }

    .slider-button {
      display: grid;
      width: 40px;
      height: 40px;
      padding: 0;
      place-items: center;
      color: var(--blue);
      background: transparent;
      border: 1px solid var(--blue);
      border-radius: 50%;
      cursor: pointer;
      transition: color .2s ease, background .2s ease;
    }

    .slider-button:hover,
    .slider-button:focus-visible { color: var(--white); background: var(--blue); }

    .dots { display: flex; align-items: center; gap: 7px; }
    .dot {
      width: 7px;
      height: 7px;
      padding: 0;
      background: rgba(28, 68, 131, .28);
      border: 0;
      border-radius: 50%;
      cursor: pointer;
    }
    .dot.is-active { background: var(--blue); transform: scale(1.45); }

    .story {
      display: grid;
      grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
      gap: clamp(38px, 6vw, 90px);
      align-items: center;
      padding: 42px 0 72px;
      border-top: 1px solid var(--line);
    }

    .story-image {
      aspect-ratio: 1.38 / 1;
      overflow: hidden;
      border-radius: 15px;
    }

    .story-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .story-copy {
      position: relative;
      max-width: 760px;
      padding-left: 51px;
    }

    .story-copy::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 9px;
      width: 2px;
      background: var(--orange);
      content: "";
    }

    .story-copy::after {
      position: absolute;
      top: -5px;
      left: 0;
      width: 20px;
      height: 20px;
      border: 2px solid var(--orange);
      border-radius: 50%;
      content: "";
    }

    .story-copy p {
      margin-bottom: 25px;
      font-size: 17px;
      line-height: 1.6;
    }

    .story-copy p:last-child { margin-bottom: 0; }

    .trust {
      display: flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px 22px;
      padding: 23px 0 70px;
      text-align: center;
    }

    .trust-number {
      font-family: var(--serif);
      font-size: clamp(4rem, 7vw, 7rem);
      line-height: .8;
    }

    .trust-label {
      color: var(--orange);
      font-size: clamp(1.6rem, 3vw, 3.2rem);
      font-weight: 600;
      line-height: 1;
      text-transform: uppercase;
    }

    .site-footer {
      padding: 52px 0 28px;
      border-top: 1px solid var(--line);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.1fr .8fr 1.4fr;
      gap: 42px;
      padding-bottom: 42px;
    }

    .footer-brand img { display: block; width: 150px; margin-bottom: 18px; }
    .footer-note { max-width: 230px; margin: 0; font-size: 14px; line-height: 1.4; }
    .footer-title { margin: 0 0 14px; color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .footer-links, .footer-address { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.8; }
    .footer-links a, .footer-address a { border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
    .footer-links a:hover, .footer-address a:hover { color: var(--red); border-color: var(--red); }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      font-size: 12px;
    }
    .footer-bottom p { margin: 0; }

    @media (max-width: 1050px) {
      .site-shell { width: min(100% - 48px, 900px); }
      .topbar { align-items: flex-start; flex-direction: column; gap: 22px; }
      .nav { justify-content: flex-start; }
      .hero { grid-template-columns: 1fr; gap: 42px; }
      .hero-copy { max-width: 680px; }
      .hero-intro { max-width: 580px; }
      .slider { aspect-ratio: 1.5 / 1; }
    }

    @media (max-width: 650px) {
      .site-shell { width: min(100% - 28px, 510px); }
      .brand { gap: 15px; }
      .brand img { width: 138px; }
      .brand-note { max-width: 123px; font-size: 10px; }
      .nav { gap: 3px 15px; font-size: 11px; }
      .nav .pro { padding: 9px 12px; }
      .hero { padding-top: 32px; }
      h1 { font-size: clamp(3.25rem, 15vw, 4.5rem); }
      .hero-intro { font-size: 16px; }
      .pro-cta { min-width: 0; width: 100%; font-size: 14px; }
      .story { grid-template-columns: 1fr; gap: 30px; padding-top: 30px; }
      .story-copy { padding-left: 35px; }
      .story-copy p { font-size: 16px; }
      .slide-caption { right: 15px; bottom: 13px; left: 15px; }
      .slide-caption small { display: none; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; gap: 8px; }
    }

.jaune{
	background-color:#f7f419;
}
.brun{
	background-color:#464800;
}
.violet{
	background-color:#6b15fa;
}
.rose{
	background-color:#f7408d;
}
.vert{
	background-color:#69b408;
}
.vertf{
	background-color:#1b7d2c;
}
.bleu{
	background-color:#0067c6;
}
.bleuf{
	background-color:#0a253f;
}
.orange{
	background-color:#f6ae00;
}
.orangef{
	background-color:#e85420;
}
.siege{
	background-color:#b8d4fe;
}

#commerciaux h2, #commerciaux h3{
	color:#FFF;
}
#commerciaux .jaune h2, #commerciaux .jaune h3{
	color:#000;
}
#commerciaux{
	text-align:center;
}

.jaune,.brun,.violet,.rose,.vert,.vertf,.bleu,.bleuf,.orange,.orangef,.siege{
	border-radius:10px;
	padding:10px;
}
.fond{
background-color:#e8f5ff;
}
.fond2{
background-color:#FFF;
padding-top: 1.42857rem !important;
}
.fond2 p {
    text-align: justify;
}
.legende h2{
font-size:1.2em;
color:#FFF;
}
.legende h3{
font-size:1em;
color:#FFF;
}
.legende .jaune h2, .legende .jaune h3{
color:#333;
}

.legende div{
margin:5px;
}