/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: EcloLINK
 Author URI: https://eclolink.com
 Template: Divi
 Version: 1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: false;
}

:root {
  /* SPACING */
  --spacing-componant-xs: 0.5rem;
  --spacing-componant-s: 0.75rem;
  --spacing-componant-m: 1rem;
  --spacing-componant-l: 1.5rem;
  --spacing-componant-xl: 2.25rem;
  --spacing-componant-xxl: 3.25rem;

  --spacing-layout-s: 4.25rem;
  --spacing-layout-m: 8.5rem;

  /* RADIUS */
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 1rem;
  --radius-xl: 1.5rem;

  /* FONT-SIZE */

  --font-size-small: 0.75rem;
  --font-size-p: 1rem;
  --font-size-h2: clamp(2rem, 2.5vw + 1rem, 4.20875rem);
  --font-size-h3: clamp(1.75rem, 2.5vw + 0.75rem, 3.1575rem);
  --font-size-h4: clamp(1.5rem, 2vw + 0.5rem, 2.36875rem);
  --font-size-h5: clamp(1.25rem, 1.5vw + 0.5rem, 1.77688rem);
  --font-size-h6: clamp(1.125rem, 1.5vw + 0.5rem, 1.33313rem);

  /* COLORS */
  --color-neutral-50: #fbfbff;
  --color-neutral-100: #f6f6fa;
  --color-neutral-200: #f1f1f5;
  --color-neutral-400: #c5c5c9;
  --color-neutral-500: #a7a7ab;
  --color-neutral-700: #69696c;
  --color-neutral-900: #28282b;

  --color-white-200: #f1f1f5;

  --color-primary-blue-50: #e1f6fd;
  --color-primary-blue-100: #b4e6fb;
  --color-primary-blue-200: #82d6f8;
  --color-primary-blue-300: #52c6f4;
  --color-primary-blue-600: #009fe3;
  --color-primary-blue-900: #005b9a;

  --color-secondary-red-50: #fbe2e4;
  --color-secondary-red-900: #78072b;

  --color-analog-300: #00e3b6;

  --clr-border-anim-1: #fbfbff;
  --clr-border-anim-2: #00e3b6;
  --gcid-yy691p2bfo: #efc12b;
}

img {
  user-drag: none;
  -webkit-user-drag: none;
}
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-white-200) !important;
}

:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

.section-flex {
  display: flex;
}
.section-flex-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ligne-hrzntl-align.center {
  justify-content: center;
}
.ligne-hrzntl-align,
.ligne-hrzntl-align-special .et_pb_row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ligne-vrtcl-align {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ligne-flex {
  display: flex;
}

.gap-20 {
  gap: 20px;
}
.gap-40 {
  gap: 40px;
}
.full-height-img,
.full-height-img .et_pb_image_wrap,
.full-height-img .et_pb_image_wrap img,
.full-height-module,
.full-height-module .et_pb_code_inner {
  height: 100%;
}
.full-height-img .et_pb_image_wrap img {
  object-fit: cover;
}

.text-center {
  text-align: center;
}

@media screen and (max-width: 980px) {
  .ligne-hrzntl-align,
  .ligne-flex {
    display: flex;
    flex-direction: column;
  }
  .gap-20 {
    gap: 10px;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  padding-bottom: 0;
}

.h1 {
  font-size: clamp(2.8125rem, 5vw + 1rem, 5.625rem);
}

.h2 {
  font-size: clamp(2.375rem, 4vw + 1rem, 4.25rem);
}

.h3 {
  font-size: clamp(2rem, 3vw + 1rem, 3.1875rem);
}

.h4 {
  font-size: clamp(1.625rem, 2.5vw + 0.5rem, 2.375rem);
}

.h5 {
  font-size: clamp(1.375rem, 2vw + 0.5rem, 1.75rem);
}

.h6 {
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.3125rem);
}

h3,
h4,
h5,
h6 {
  line-height: 1.3em !important;
}

.color-red {
  color: var(--gcid-secondary-color);
  font-weight: bold;
}
.color-blue {
  color: var(--gcid-primary-color);
  font-weight: bold;
}

.border-animated {
  overflow: visible !important;
  margin: 2px !important;
}

.border-animated::after,
.border-animated::before {
  content: ' ';
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-border-anim-1),
    var(--clr-border-anim-2),
    var(--clr-border-anim-1)
  );
  animation: rotate 5.5s linear infinite;
  border-radius: 10px;
}

@keyframes rotate {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

.overflow-image {
  position: absolute;
  bottom: -65px;
  right: -65px;
  width: calc(100% + 65px + 4.5%) !important;
}

@media screen and (max-width: 980px) {
  .overflow-image {
    position: static;
    width: 100% !important;
    bottom: auto;
    right: auto;
  }
}

/*header home*/
.tilted-txt {
  display: inline-flex;
  transform: rotate(-2deg);
  color: white;
  margin-right: 20px;
}
.tilted-txt:before {
  content: '';
  position: absolute;
  top: 0;
  left: -2%;
  z-index: -1;
  width: 104%;
  height: 1em;
  background: #009fe3;
  border-radius: 4px;
}

.page-txt {
  position: relative;
  display: inline-block;
  color: #fbfbff;
  font-weight: 900;
}

.page-txt:before {
  content: '';
  position: absolute;
  top: 0;
  left: -2%;
  z-index: -1;
  width: 104%;
  height: 1em;
  background: #009fe3;
  border-radius: 4px;
}

/*bloc actualités*/
.cat-actus {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cat-actus a {
  border: 1px solid;
  padding: 5px 10px;
  border-radius: 20px;
  color: #28282b;
  transition: background-color 0.3s ease;
}

.cat-actus > a:nth-of-type(2n) {
  border-color: var(--gcid-primary-color);

  &:hover {
    background-color: var(--gcid-primary-color);
  }
}
.cat-actus > a:nth-of-type(2n + 1) {
  border-color: var(--gcid-yy691p2bfo);

  &:hover {
    background-color: var(--gcid-yy691p2bfo);
  }
}

/*bloc evenements*/

.event-trigger {
  border: 2px solid #78072b;
  border-radius: 4px;
  padding: 10px 20px;
  font-weight: bold;
  color: #78072b;
  font-size: 16px;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.event-trigger:hover {
  background: #78072b;
  color: #fbe2e4;
}

.event-trigger.active {
  background: #78072b;
  color: #fbe2e4;
}
.event-trigger.active:hover {
  background: transparent;
  color: #78072b;
}

.event-trigger.right {
  float: right;
}

.tag-event {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag-event a {
  padding: 5px 15px;
  border-radius: 20px;
  color: #28282b;
  font-weight: bold;
  transition: background-color 0.3s ease;
  pointer-events: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.tag-event > a:nth-of-type(2n) {
  background-color: var(--gcid-primary-color);
  border: 1px solid var(--gcid-primary-color);

  &:hover {
    background-color: transparent;
  }
}
.tag-event > a:nth-of-type(2n + 1) {
  background-color: var(--gcid-yy691p2bfo);
  border: 1px solid var(--gcid-yy691p2bfo);

  &:hover {
    background-color: transparent;
  }
}

.cat-actus-page .et_pb_text_inner p {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.cat-actus-page .et_pb_text_inner p a {
  padding: 5px 15px;
  border-radius: 20px;
  color: #28282b;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cat-actus-page.actu-disabled .et_pb_text_inner p a {
  pointer-events: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.cat-actus-page .et_pb_text_inner p > a:nth-of-type(2n) {
  background-color: var(--gcid-primary-color);
  border: 1px solid var(--gcid-primary-color);

  &:hover {
    background-color: transparent;
  }
}
.cat-actus-page .et_pb_text_inner p > a:nth-of-type(2n + 1) {
  background-color: var(--gcid-yy691p2bfo);
  border: 1px solid var(--gcid-yy691p2bfo);

  &:hover {
    background-color: transparent;
  }
}

.event-content {
  display: none;
  visibility: hidden;
}
.event-content.active {
  display: flex;
  visibility: visible;
}

.event-content div.event:last-of-type {
  border: none;
}

.grades-form {
  form {
    display: flex;
    padding: var(--spacing-componant-xxl);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-componant-xxl);
    border-radius: var(--radius-l);
    background: var(--color-neutral-50);

    fieldset {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-componant-xl);
      align-self: stretch;

      legend {
        color: var(--color-primary-blue-900);
        leading-trim: both;
        text-edge: cap;
        font-family: Catamaran;
        font-size: var(--font-size-h6);
        font-style: normal;
        font-weight: 700;
        line-height: 1rem;
        display: flex;
        align-items: flex-end;
        width: 100%;

        &::after {
          content: '';
          flex: 1;
          height: 2px;
          background: linear-gradient(
            90deg,
            var(--color-primary-blue-900),
            var(--color-primary-teal-500, #00a3b4)
          );
          margin-left: 1rem;
        }
      }

      .field-group {
        margin-top: var(--spacing-componant-xl);
        display: flex;
        align-items: stretch;
        align-content: flex-start;
        gap: var(--spacing-componant-m) var(--spacing-componant-l);
        align-self: stretch;
        flex-wrap: wrap;

        p {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;

          &.large {
            width: 31.25rem;
          }

          &.medium {
            width: 21.875rem;
          }

          &.extra-large {
            width: 43.75rem;
          }

          &.small {
            width: 18.75rem;
          }

          label {
            color: var(--color-neutral-900);
            font-family: Quicksand;
            font-size: var(--font-size-p);
            font-style: normal;
            font-weight: 500;
            line-height: 1.25rem;

            .optional {
              color: var(--color-neutral-700);
              font-family: Quicksand;
              font-size: var(--font-size-small);
              font-style: normal;
              font-weight: 500;
              line-height: 1.25rem;
            }
          }

          .field-description {
            color: var(--color-neutral-700);
            font-family: Quicksand;
            font-size: var(--font-size-small);
            font-style: normal;
            font-weight: 400;
            line-height: 1.25rem;
            min-height: 2.5rem;
          }

          .wpcf7-form-control-wrap {
            width: 100%;

            /* ================================
               INPUT TEXT, EMAIL, TEL, URL
            ================================ */
            input[type='text'],
            input[type='email'],
            input[type='tel'],
            input[type='url'],
            input[type='number'] {
              width: 100%;
              padding: 0.5rem 0.75rem;
              border-radius: 0.25rem;
              border: 1px solid var(--color-neutral-400);
              background: var(--color-neutral-50);
              color: var(--color-neutral-900);
              caret-color: var(--color-primary-blue-600);
              font-family: Quicksand;
              font-size: var(--font-size-p);
              font-weight: 600;
              line-height: 1.5rem;
              transition: border-color 0.2s ease, box-shadow 0.2s ease;

              &::placeholder {
                color: var(--color-neutral-500);
                font-weight: 400;
              }

              &:hover {
                border-color: var(--color-neutral-500);
              }

              &:focus {
                outline: none;
                border-color: var(--color-primary-blue-600);
                box-shadow: 0 0 0 3px rgba(0, 90, 124, 0.15);
              }

              &:focus-visible {
                outline: 2px solid var(--color-primary-blue-600);
                outline-offset: 2px;
              }
            }

            /* ================================
               INPUT DATE
            ================================ */
            input[type='date'] {
              width: 100%;
              padding: 0.5rem 0.75rem;
              border-radius: 0.25rem;
              border: 1px solid var(--color-neutral-400);
              background: var(--color-neutral-50);
              color: var(--color-neutral-900);
              font-family: Quicksand;
              font-size: var(--font-size-p);
              font-weight: 600;
              line-height: 1.5rem;
              cursor: pointer;
              transition: border-color 0.2s ease, box-shadow 0.2s ease;

              &:hover {
                border-color: var(--color-neutral-500);
              }

              &:focus {
                outline: none;
                border-color: var(--color-primary-blue-600);
                box-shadow: 0 0 0 3px rgba(0, 90, 124, 0.15);
              }

              &:focus-visible {
                outline: 2px solid var(--color-primary-blue-600);
                outline-offset: 2px;
              }

              &::-webkit-calendar-picker-indicator {
                cursor: pointer;
                opacity: 0.6;
                transition: opacity 0.2s ease;

                &:hover {
                  opacity: 1;
                }
              }
            }

            /* ================================
               SELECT
            ================================ */
            select {
              width: 100%;
              padding: 0.5rem 2.5rem 0.5rem 0.75rem;
              border-radius: 0.25rem;
              border: 1px solid var(--color-neutral-400);
              background-color: var(--color-neutral-50);
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
              background-repeat: no-repeat;
              background-position: right 0.75rem center;
              background-size: 1rem;
              color: var(--color-neutral-900);
              font-family: Quicksand;
              font-size: var(--font-size-p);
              font-weight: 600;
              line-height: 1.5rem;
              cursor: pointer;
              appearance: none;
              transition: border-color 0.2s ease, box-shadow 0.2s ease;

              &:invalid,
              &.placeholder-selected {
                color: var(--color-neutral-500);
                font-weight: 400;
              }

              option {
                color: var(--color-neutral-900);
                font-weight: 600;

                &:first-child {
                  color: var(--color-neutral-500);
                  font-weight: 400;
                }

                &:disabled {
                  color: var(--color-neutral-400);
                }
              }

              &:hover {
                border-color: var(--color-neutral-500);
              }

              &:focus {
                outline: none;
                border-color: var(--color-primary-blue-600);
                box-shadow: 0 0 0 3px rgba(0, 90, 124, 0.15);
              }

              &:focus-visible {
                outline: 2px solid var(--color-primary-blue-600);
                outline-offset: 2px;
              }
            }

            /* ================================
               TEXTAREA
            ================================ */
            textarea {
              width: 100%;
              min-height: 8rem;
              padding: 0.75rem;
              border-radius: 0.25rem;
              border: 1px solid var(--color-neutral-400);
              background: var(--color-neutral-50);
              color: var(--color-neutral-900);
              caret-color: var(--color-primary-blue-600);
              font-family: Quicksand;
              font-size: var(--font-size-p);
              font-weight: 600;
              line-height: 1.5rem;
              resize: vertical;
              transition: border-color 0.2s ease, box-shadow 0.2s ease;

              &::placeholder {
                color: var(--color-neutral-500);
                font-weight: 400;
              }

              &:hover {
                border-color: var(--color-neutral-500);
              }

              &:focus {
                outline: none;
                border-color: var(--color-primary-blue-600);
                box-shadow: 0 0 0 3px rgba(0, 90, 124, 0.15);
              }

              &:focus-visible {
                outline: 2px solid var(--color-primary-blue-600);
                outline-offset: 2px;
              }
            }

            /* ================================
               INPUT FILE - Masqué par défaut
            ================================ */
            input[type='file'] {
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              cursor: pointer;
            }

            /* ================================
               ÉTATS D'ERREUR PAR CHAMP (RGAA)
            ================================ */
            &.has-error {
              input,
              select,
              textarea,
              .file-input-wrapper {
                border-color: var(--color-error, #d32f2f) !important;
                background-color: rgba(211, 47, 47, 0.03);

                &:focus {
                  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15) !important;
                }
              }
            }

            /* Message d'erreur inline */
            .wpcf7-not-valid-tip {
              display: flex;
              align-items: flex-start;
              gap: 0.5rem;
              margin-top: 0.5rem;
              padding: 0.5rem 0.75rem;
              background: rgba(211, 47, 47, 0.08);
              border-left: 3px solid var(--color-error, #d32f2f);
              border-radius: 0 0.25rem 0.25rem 0;
              color: var(--color-error, #d32f2f);
              font-family: Quicksand;
              font-size: var(--font-size-small);
              font-weight: 500;
              line-height: 1.25rem;
              animation: errorSlideIn 0.3s ease-out;

              /* Icône d'erreur */
              &::before {
                content: '';
                flex-shrink: 0;
                width: 1rem;
                height: 1rem;
                margin-top: 0.125rem;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d32f2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
                background-size: contain;
                background-repeat: no-repeat;
              }
            }

            /* État valide */
            &.has-success {
              input,
              select,
              textarea,
              .file-input-wrapper {
                border-color: var(--color-success, #2e7d32) !important;
                background-color: rgba(46, 125, 50, 0.03);
              }

              /* Icône de succès dans l'input */
              &::after {
                content: '';
                position: absolute;
                right: 0.75rem;
                top: 50%;
                transform: translateY(-50%);
                width: 1.25rem;
                height: 1.25rem;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
                background-size: contain;
                background-repeat: no-repeat;
                pointer-events: none;
              }
            }
          }
        }
      }
    }

    /* ================================
       BOUTON SUBMIT
    ================================ */
    .btn-submit,
    input[type='submit'] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: var(--spacing-componant-m) var(--spacing-componant-xl);
      border: 2px solid var(--color-primary-blue-300);
      border-radius: var(--radius-s);
      background: var(--color-primary-blue-300);
      color: var(--color-primary-blue-900);
      font-family: Quicksand;
      font-size: var(--font-size-p);
      font-weight: 700;
      line-height: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: var(--color-neutral-50);
      }

      &:active {
        background: var(--color-neutral-50);
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: 2px solid var(--color-primary-blue-900);
        outline-offset: 2px;
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      /* État loading */
      &.is-loading {
        position: relative;
        pointer-events: none;

        /* Garder le texte visible mais ajouter le spinner à côté */
        &::after {
          content: '';
          display: inline-block;
          width: 1rem;
          height: 1rem;
          margin-left: 0.5rem;
          border: 2px solid var(--color-primary-blue-900);
          border-top-color: transparent;
          border-radius: 50%;
          animation: spinner 0.8s linear infinite;
          vertical-align: middle;
        }
      }
    }

    /* ================================
       MESSAGE GLOBAL CF7 - Masqué (remplacé par toast)
    ================================ */
    .wpcf7-response-output {
      display: none !important;
    }

    /* ================================
       RESPONSIVE
    ================================ */
    @media (max-width: 1200px) {
      .field-group p {
        &.extra-large {
          width: 100% !important;
        }
      }
    }

    @media (max-width: 992px) {
      padding: var(--spacing-componant-xl);

      .field-group {
        gap: var(--spacing-componant-m) !important;

        p {
          &.large,
          &.medium {
            width: calc(50% - var(--spacing-componant-m) / 2) !important;
          }

          &.extra-large,
          &.small {
            width: 100% !important;
          }
        }
      }
    }

    @media (max-width: 768px) {
      padding: var(--spacing-componant-l);

      fieldset legend {
        font-size: calc(var(--font-size-h6) * 0.9);
      }

      .field-group {
        flex-direction: column;

        p {
          &.large,
          &.medium,
          &.extra-large,
          &.small {
            width: 100% !important;
          }

          .field-description {
            min-height: auto;
          }
        }
      }

      .btn-submit,
      input[type='submit'] {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      padding: var(--spacing-componant-m);
      gap: var(--spacing-componant-l);

      fieldset {
        gap: var(--spacing-componant-m);

        legend {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;

          &::after {
            width: 100%;
            margin-left: 0;
          }
        }
      }
    }

    /* ================================
       ACCESSIBILITÉ - MOTION REDUCED
    ================================ */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        transition: none !important;
        animation: none !important;
      }
    }

    /* ================================
       ACCESSIBILITÉ - HIGH CONTRAST
    ================================ */
    @media (prefers-contrast: high) {
      input,
      select,
      textarea {
        border-width: 2px;
      }

      .btn-submit,
      input[type='submit'] {
        border: 2px solid white;
      }

      .wpcf7-not-valid-tip {
        border-left-width: 4px;
      }
    }

    /* ================================
       ACCESSIBILITÉ - FOCUS VISIBLE
    ================================ */
    *:focus:not(:focus-visible) {
      outline: none;
    }
  }
}

/* ================================
   INPUT FILE CUSTOM
================================ */
.file-input-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 0.25rem;
  border: 1px solid var(--color-neutral-400);
  background: var(--color-neutral-50);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    border-color: var(--color-neutral-500);
  }

  &:focus-within {
    border-color: var(--color-primary-blue-600);
    box-shadow: 0 0 0 3px rgba(0, 90, 124, 0.15);
  }

  .file-input-text {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--color-neutral-500);
    font-family: Quicksand;
    font-size: var(--font-size-p);
    font-weight: 400;
    line-height: 1.5rem;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &.has-file {
      color: var(--color-neutral-900);
      font-weight: 600;
    }
  }

  .file-input-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-neutral-200);
    border-left: 1px solid var(--color-neutral-400);
    color: var(--color-neutral-900);
    font-family: Quicksand;
    font-size: var(--font-size-p);
    font-weight: 500;
    line-height: 1.5rem;
    pointer-events: none;
    transition: background-color 0.2s ease;

    &::after {
      content: '';
      display: block;
      width: 1rem;
      height: 1rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  &:hover .file-input-button {
    background: var(--color-neutral-300);
  }

  input[type='file'] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
}

/* ================================
   TOAST CONTAINER
================================ */
.toast-container {
  position: fixed;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 400px;
  pointer-events: none;

  @media (max-width: 480px) {
    top: 50%;
    right: 1rem;
    left: 1rem;
    max-width: none;
  }
}

/* ================================
   TOAST ITEM
================================ */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-neutral-50);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  animation: toastSlideIn 0.4s ease-out;
  transform-origin: top right;

  /* Barre de progression */
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.3;
    animation: toastProgress 5s linear forwards;
  }

  /* Icône */
  .toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.125rem;
  }

  /* Contenu */
  .toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    .toast-title {
      font-family: Quicksand;
      font-size: var(--font-size-p);
      font-weight: 700;
      line-height: 1.5rem;
      color: var(--color-neutral-900);
    }

    .toast-message {
      font-family: Quicksand;
      font-size: var(--font-size-small);
      font-weight: 400;
      line-height: 1.25rem;
      color: var(--color-neutral-700);
    }

    .toast-errors {
      margin-top: 0.5rem;
      padding-left: 1rem;
      font-family: Quicksand;
      font-size: var(--font-size-small);
      font-weight: 400;
      line-height: 1.5rem;
      color: var(--color-neutral-700);
      list-style: disc;

      li {
        margin-bottom: 0.25rem;

        a {
          color: var(--color-primary-blue-600);
          text-decoration: underline;
          cursor: pointer;

          &:hover {
            color: var(--color-primary-blue-900);
          }

          &:focus {
            outline: 2px solid var(--color-primary-blue-600);
            outline-offset: 2px;
          }
        }
      }
    }
  }

  /* Bouton fermer */
  .toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: -0.25rem -0.25rem -0.25rem 0;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    color: var(--color-neutral-500);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
      background: rgba(0, 0, 0, 0.05);
      color: var(--color-neutral-900);
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary-blue-600);
      outline-offset: 2px;
    }

    svg {
      width: 1rem;
      height: 1rem;
    }
  }

  /* ================================
     VARIANTES DE TOAST
  ================================ */

  /* Erreur */
  &.toast-error {
    border-left: 4px solid var(--color-error, #d32f2f);
    color: var(--color-error, #d32f2f);

    .toast-icon {
      color: var(--color-error, #d32f2f);
    }
  }

  /* Succès */
  &.toast-success {
    border-left: 4px solid var(--color-success, #2e7d32);
    color: var(--color-success, #2e7d32);

    .toast-icon {
      color: var(--color-success, #2e7d32);
    }
  }

  /* Warning */
  &.toast-warning {
    border-left: 4px solid var(--color-warning, #ed6c02);
    color: var(--color-warning, #ed6c02);

    .toast-icon {
      color: var(--color-warning, #ed6c02);
    }
  }

  /* Info */
  &.toast-info {
    border-left: 4px solid var(--color-primary-blue-600);
    color: var(--color-primary-blue-600);

    .toast-icon {
      color: var(--color-primary-blue-600);
    }
  }

  /* Animation de sortie */
  &.toast-exit {
    animation: toastSlideOut 0.3s ease-in forwards;
  }
}

/* ================================
   ANIMATIONS
================================ */
@keyframes errorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(50px);
  }
}

@keyframes toastProgress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ================================
   CLASSE UTILITAIRE SR-ONLY (RGAA)
================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================
   FORMULAIRE DE CONTACT (simplifié)
================================ */
.contact-form {
  form {
    display: flex;
    padding: var(--spacing-componant-xxl);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-componant-xxl);
    border-radius: var(--radius-l);
    background: var(--color-neutral-50);

    fieldset {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-componant-xl);
      align-self: stretch;

      legend {
        color: var(--color-primary-blue-900);
        font-family: Catamaran;
        font-size: var(--font-size-h6);
        font-weight: 700;
        line-height: 1rem;
        display: flex;
        align-items: flex-end;
        width: 100%;

        &::after {
          content: '';
          flex: 1;
          height: 2px;
          background: linear-gradient(
            90deg,
            var(--color-primary-blue-900),
            var(--color-primary-teal-500, #00a3b4)
          );
          margin-left: 1rem;
        }
      }

      .field-group {
        margin-top: var(--spacing-componant-l);
        display: flex;
        align-items: stretch;
        align-content: flex-start;
        gap: var(--spacing-componant-m) var(--spacing-componant-l);
        align-self: stretch;
        flex-wrap: wrap;

        p {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;

          /* Tailles sans description = pas de min-height */
          &.medium {
            width: calc(50% - var(--spacing-componant-l) / 2);
          }

          &.full {
            width: 100%;
          }

          label {
            color: var(--color-neutral-900);
            font-family: Quicksand;
            font-size: var(--font-size-p);
            font-weight: 500;
            line-height: 1.25rem;
          }

          .wpcf7-form-control-wrap {
            width: 100%;

            input[type='text'],
            input[type='email'],
            input[type='tel'] {
              width: 100%;
              padding: 0.5rem 0.75rem;
              border-radius: 0.25rem;
              border: 1px solid var(--color-neutral-400);
              background: var(--color-neutral-50);
              color: var(--color-neutral-900);
              caret-color: var(--color-primary-blue-600);
              font-family: Quicksand;
              font-size: var(--font-size-p);
              font-weight: 600;
              line-height: 1.5rem;
              transition: border-color 0.2s ease, box-shadow 0.2s ease;

              &::placeholder {
                color: var(--color-neutral-500);
                font-weight: 400;
              }

              &:hover {
                border-color: var(--color-neutral-500);
              }

              &:focus {
                outline: none;
                border-color: var(--color-primary-blue-600);
                box-shadow: 0 0 0 3px rgba(0, 90, 124, 0.15);
              }

              &:focus-visible {
                outline: 2px solid var(--color-primary-blue-600);
                outline-offset: 2px;
              }
            }

            textarea {
              width: 100%;
              min-height: 6rem;
              padding: 0.75rem;
              border-radius: 0.25rem;
              border: 1px solid var(--color-neutral-400);
              background: var(--color-neutral-50);
              color: var(--color-neutral-900);
              caret-color: var(--color-primary-blue-600);
              font-family: Quicksand;
              font-size: var(--font-size-p);
              font-weight: 600;
              line-height: 1.5rem;
              resize: vertical;
              transition: border-color 0.2s ease, box-shadow 0.2s ease;

              &::placeholder {
                color: var(--color-neutral-500);
                font-weight: 400;
              }

              &:hover {
                border-color: var(--color-neutral-500);
              }

              &:focus {
                outline: none;
                border-color: var(--color-primary-blue-600);
                box-shadow: 0 0 0 3px rgba(0, 90, 124, 0.15);
              }

              &:focus-visible {
                outline: 2px solid var(--color-primary-blue-600);
                outline-offset: 2px;
              }
            }

            /* États d'erreur */
            &.has-error {
              input,
              textarea {
                border-color: var(--color-error, #d32f2f) !important;
                background-color: rgba(211, 47, 47, 0.03);

                &:focus {
                  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15) !important;
                }
              }
            }

            .wpcf7-not-valid-tip {
              display: flex;
              align-items: flex-start;
              gap: 0.5rem;
              margin-top: 0.5rem;
              padding: 0.5rem 0.75rem;
              background: rgba(211, 47, 47, 0.08);
              border-left: 3px solid var(--color-error, #d32f2f);
              border-radius: 0 0.25rem 0.25rem 0;
              color: var(--color-error, #d32f2f);
              font-family: Quicksand;
              font-size: var(--font-size-small);
              font-weight: 500;
              line-height: 1.25rem;
              animation: errorSlideIn 0.3s ease-out;

              &::before {
                content: '';
                flex-shrink: 0;
                width: 1rem;
                height: 1rem;
                margin-top: 0.125rem;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d32f2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
                background-size: contain;
                background-repeat: no-repeat;
              }
            }

            /* État succès */
            &.has-success {
              input,
              textarea {
                border-color: var(--color-success, #2e7d32) !important;
                background-color: rgba(46, 125, 50, 0.03);
              }
            }
          }
        }
      }
    }

    /* Bouton submit */
    .btn-submit,
    input[type='submit'] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: var(--spacing-componant-m) var(--spacing-componant-xl);
      border: 2px solid var(--color-primary-blue-300);
      border-radius: var(--radius-s);
      background: var(--color-primary-blue-300);
      color: var(--color-primary-blue-900);
      font-family: Quicksand;
      font-size: var(--font-size-p);
      font-weight: 700;
      line-height: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: var(--color-neutral-50);
      }

      &:focus-visible {
        outline: 2px solid var(--color-primary-blue-900);
        outline-offset: 2px;
      }

      &.is-loading {
        pointer-events: none;
        opacity: 0.8;

        &::after {
          content: '';
          display: inline-block;
          width: 1rem;
          height: 1rem;
          margin-left: 0.5rem;
          border: 2px solid currentColor;
          border-top-color: transparent;
          border-radius: 50%;
          animation: spinner 0.8s linear infinite;
        }
      }
    }

    /* Message global masqué */
    .wpcf7-response-output {
      display: none !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
      padding: var(--spacing-componant-l);

      .field-group {
        flex-direction: column;

        p {
          &.medium,
          &.full {
            width: 100% !important;
          }
        }
      }

      .btn-submit,
      input[type='submit'] {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      padding: var(--spacing-componant-m);

      fieldset legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;

        &::after {
          width: 100%;
          margin-left: 0;
        }
      }
    }
  }
}

/* ================================
   FORMULAIRE DE CONTACT - Surcharges
================================ */
.contact-form {
  .field-group p {
    /* Pas de min-height pour les descriptions car il n'y en a pas */
    .field-description {
      display: none;
    }
  }
}