/* ==========================================
   VARIABLES PERSONNALISÉES
   ========================================== */

:root {
  /* Breakpoints - Pour documentation uniquement */
  /* Note: Les variables CSS ne fonctionnent pas dans @media queries */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1440px;

  /* Delay Animations*/
  --delay-animation-fast: 0.3s;
  --delay-animation-medium: 0.6s;
  --delay-animation-slow: 0.9s;

  /* Background Colors */
  --color-bgcard-primary: #ffffff;
  --color-bgcard-secondary: #f2f4f7;
  --color-bgcard-tertiary: #d6dce5;
}

body:not(.appear),
html:not(.adobe-ue-edit) header:not(.one-header),
html:not(.adobe-ue-edit) footer:not(.one-footer) {
  display: none;
}

/* ==========================================
   STYLES GÉNÉRAUX
   ========================================== */
/* Typography */
.text-balance {
  text-wrap: balance;
}

/* Headings */
.heading-1 {
  font-size: 24px;
  line-height: 120%;
  font-weight: bold;

  @media (min-width: 768px) {
    font-size: 40px;
  }

  @media (min-width: 1024px) {
    font-size: 50px;
  }
}
.heading-2 {
  font-size: 22px;
  line-height: 120%;
  font-weight: bold;

  @media (min-width: 768px) {
    font-size: 35px;
  }

  @media (min-width: 1024px) {
    font-size: 40px;
  }
}
.heading-3 {
  font-size: 20px;
  line-height: 120%;
  font-weight: bold;

  @media (min-width: 768px) {
    font-size: 28px;
  }

  @media (min-width: 1024px) {
    font-size: 32px;
  }
}
.heading-4 {
  font-size: 18px;
  line-height: 120%;
  font-weight: 800;

  @media (min-width: 768px) {
    font-size: 20px;
  }

  @media (min-width: 1024px) {
    font-size: 22px;
  }
}
.heading-5 {
  font-size: 16px;
  line-height: 120%;
  font-weight: 800;
}

/* ==========================================
   HOVER EFFECTS
   ========================================== */
.hover-padding {
  transition: padding-left var(--delay-animation-fast) ease;

  a:hover & {
    padding-left: 4px;
  }
}

.hover-opacity {
  transition: opacity var(--delay-animation-fast) ease;

  a:hover & {
    opacity: 0.8;
  }
}

/* ==========================================
   Grille et espacement
   ========================================== */
.grid {
  display: grid;
}

/* Colonnes 1 à 8 */
[class*='grid-'] {
  display: grid;
  gap: 16px;
}

.no-gap {
  gap: 0;
}

.grid-1 {
  grid-template-columns: repeat(1, 1fr);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}
.grid-7 {
  grid-template-columns: repeat(7, 1fr);
}
.grid-8 {
  grid-template-columns: repeat(8, 1fr);
}
.grid-9 {
  grid-template-columns: repeat(9, 1fr);
}
.grid-10 {
  grid-template-columns: repeat(10, 1fr);
}
.grid-11 {
  grid-template-columns: repeat(11, 1fr);
}
.grid-12 {
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 480px) {
  .sm\:grid-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .sm\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sm\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .sm\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .sm\:grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .sm\:grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .sm\:grid-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .sm\:grid-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .sm\:grid-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .sm\:grid-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .sm\:grid-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .sm\:grid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 768px) {
  .md\:grid-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .md\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .md\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .md\:grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .md\:grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .md\:grid-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .md\:grid-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .md\:grid-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .md\:grid-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .md\:grid-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .md\:grid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1024px) {
  .lg\:grid-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .lg\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .lg\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .lg\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .lg\:grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .lg\:grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .lg\:grid-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .lg\:grid-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .lg\:grid-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .lg\:grid-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .lg\:grid-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .lg\:grid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1280px) {
  .xl\:grid-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .xl\:grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .xl\:grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .xl\:grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .xl\:grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .xl\:grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .xl\:grid-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .xl\:grid-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .xl\:grid-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .xl\:grid-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .xl\:grid-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .xl\:grid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

.col-1 {
  grid-column: span 1;
}
.col-2 {
  grid-column: span 2;
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}
.col-7 {
  grid-column: span 7;
}
.col-8 {
  grid-column: span 8;
}
.col-9 {
  grid-column: span 9;
}
.col-10 {
  grid-column: span 10;
}
.col-11 {
  grid-column: span 11;
}
.col-12 {
  grid-column: span 12;
}

@media (min-width: 480px) {
  .sm\:col-1 {
    grid-column: span 1;
  }
  .sm\:col-2 {
    grid-column: span 2;
  }
  .sm\:col-3 {
    grid-column: span 3;
  }
  .sm\:col-4 {
    grid-column: span 4;
  }
  .sm\:col-5 {
    grid-column: span 5;
  }
  .sm\:col-6 {
    grid-column: span 6;
  }
  .sm\:col-7 {
    grid-column: span 7;
  }
  .sm\:col-8 {
    grid-column: span 8;
  }
  .sm\:col-9 {
    grid-column: span 9;
  }
  .sm\:col-10 {
    grid-column: span 10;
  }
  .sm\:col-11 {
    grid-column: span 11;
  }
  .sm\:col-12 {
    grid-column: span 12;
  }
}

@media (min-width: 768px) {
  .md\:col-1 {
    grid-column: span 1;
  }
  .md\:col-2 {
    grid-column: span 2;
  }
  .md\:col-3 {
    grid-column: span 3;
  }
  .md\:col-4 {
    grid-column: span 4;
  }
  .md\:col-5 {
    grid-column: span 5;
  }
  .md\:col-6 {
    grid-column: span 6;
  }
  .md\:col-7 {
    grid-column: span 7;
  }
  .md\:col-8 {
    grid-column: span 8;
  }
  .md\:col-9 {
    grid-column: span 9;
  }
  .md\:col-10 {
    grid-column: span 10;
  }
  .md\:col-11 {
    grid-column: span 11;
  }
  .md\:col-12 {
    grid-column: span 12;
  }
}

@media (min-width: 1024px) {
  .lg\:col-1 {
    grid-column: span 1;
  }
  .lg\:col-2 {
    grid-column: span 2;
  }
  .lg\:col-3 {
    grid-column: span 3;
  }
  .lg\:col-4 {
    grid-column: span 4;
  }
  .lg\:col-5 {
    grid-column: span 5;
  }
  .lg\:col-6 {
    grid-column: span 6;
  }
  .lg\:col-7 {
    grid-column: span 7;
  }
  .lg\:col-8 {
    grid-column: span 8;
  }
  .lg\:col-9 {
    grid-column: span 9;
  }
  .lg\:col-10 {
    grid-column: span 10;
  }
  .lg\:col-11 {
    grid-column: span 11;
  }
  .lg\:col-12 {
    grid-column: span 12;
  }
}

@media (min-width: 1280px) {
  .xl\:col-1 {
    grid-column: span 1;
  }
  .xl\:col-2 {
    grid-column: span 2;
  }
  .xl\:col-3 {
    grid-column: span 3;
  }
  .xl\:col-4 {
    grid-column: span 4;
  }
  .xl\:col-5 {
    grid-column: span 5;
  }
  .xl\:col-6 {
    grid-column: span 6;
  }
  .xl\:col-7 {
    grid-column: span 7;
  }
  .xl\:col-8 {
    grid-column: span 8;
  }
  .xl\:col-9 {
    grid-column: span 9;
  }
  .xl\:col-10 {
    grid-column: span 10;
  }
  .xl\:col-11 {
    grid-column: span 11;
  }
  .xl\:col-12 {
    grid-column: span 12;
  }
}

.col-1 {
  grid-column: span 1;
}
.col-2 {
  grid-column: span 2;
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}
.col-7 {
  grid-column: span 7;
}
.col-8 {
  grid-column: span 8;
}
.col-9 {
  grid-column: span 9;
}
.col-10 {
  grid-column: span 10;
}
.col-11 {
  grid-column: span 11;
}
.col-12 {
  grid-column: span 12;
}

@media (min-width: 480px) {
  .sm\:col-1 {
    grid-column: span 1;
  }
  .sm\:col-2 {
    grid-column: span 2;
  }
  .sm\:col-3 {
    grid-column: span 3;
  }
  .sm\:col-4 {
    grid-column: span 4;
  }
  .sm\:col-5 {
    grid-column: span 5;
  }
  .sm\:col-6 {
    grid-column: span 6;
  }
  .sm\:col-7 {
    grid-column: span 7;
  }
  .sm\:col-8 {
    grid-column: span 8;
  }
  .sm\:col-9 {
    grid-column: span 9;
  }
  .sm\:col-10 {
    grid-column: span 10;
  }
  .sm\:col-11 {
    grid-column: span 11;
  }
  .sm\:col-12 {
    grid-column: span 12;
  }
}

@media (min-width: 768px) {
  .md\:col-1 {
    grid-column: span 1;
  }
  .md\:col-2 {
    grid-column: span 2;
  }
  .md\:col-3 {
    grid-column: span 3;
  }
  .md\:col-4 {
    grid-column: span 4;
  }
  .md\:col-5 {
    grid-column: span 5;
  }
  .md\:col-6 {
    grid-column: span 6;
  }
  .md\:col-7 {
    grid-column: span 7;
  }
  .md\:col-8 {
    grid-column: span 8;
  }
  .md\:col-9 {
    grid-column: span 9;
  }
  .md\:col-10 {
    grid-column: span 10;
  }
  .md\:col-11 {
    grid-column: span 11;
  }
  .md\:col-12 {
    grid-column: span 12;
  }
}

@media (min-width: 1024px) {
  .lg\:col-1 {
    grid-column: span 1;
  }
  .lg\:col-2 {
    grid-column: span 2;
  }
  .lg\:col-3 {
    grid-column: span 3;
  }
  .lg\:col-4 {
    grid-column: span 4;
  }
  .lg\:col-5 {
    grid-column: span 5;
  }
  .lg\:col-6 {
    grid-column: span 6;
  }
  .lg\:col-7 {
    grid-column: span 7;
  }
  .lg\:col-8 {
    grid-column: span 8;
  }
  .lg\:col-9 {
    grid-column: span 9;
  }
  .lg\:col-10 {
    grid-column: span 10;
  }
  .lg\:col-11 {
    grid-column: span 11;
  }
  .lg\:col-12 {
    grid-column: span 12;
  }
}

@media (min-width: 1280px) {
  .xl\:col-1 {
    grid-column: span 1;
  }
  .xl\:col-2 {
    grid-column: span 2;
  }
  .xl\:col-3 {
    grid-column: span 3;
  }
  .xl\:col-4 {
    grid-column: span 4;
  }
  .xl\:col-5 {
    grid-column: span 5;
  }
  .xl\:col-6 {
    grid-column: span 6;
  }
  .xl\:col-7 {
    grid-column: span 7;
  }
  .xl\:col-8 {
    grid-column: span 8;
  }
  .xl\:col-9 {
    grid-column: span 9;
  }
  .xl\:col-10 {
    grid-column: span 10;
  }
  .xl\:col-11 {
    grid-column: span 11;
  }
  .xl\:col-12 {
    grid-column: span 12;
  }
}

.align-content-start {
  align-content: start;
}
.align-content-center {
  align-content: center;
}
.align-content-end {
  align-content: end;
}

.img-cover {
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
  }
}

.img-contain {
  & img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
  }
}

/* Réserve l'espace du footer avant son chargement lazy pour éviter le CLS */
footer {
  min-height: 815px;
  padding-bottom: 80px;
}

@media (width >= 900px) {
  footer {
    min-height: 350px;
  }
}

/* Marque une erreur de contrib */
.editError {
  position: relative;
  border: 3px solid #ee0027;
}
.editError::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 25px solid #ee0027;
  border-right: 25px solid transparent;
  z-index: 3;
  pointer-events: none;
}