/* Page contact — styles isolés (.contact-page) */
.contact-page {
  --contact-green:       var(--color-primary);
  --contact-green-hover: var(--color-primary-hover);
  --contact-green-dark:  var(--color-primary-dark);
  --contact-blue:        var(--color-secondary);
  --contact-blue-light:  var(--color-secondary-mid);
  --contact-blue-pale:   var(--color-secondary-pale);
  --contact-text-dark:   var(--color-text-dark);
  --contact-text-mid:    var(--color-text-mid);
  --contact-text-light:  var(--color-text-light);
  --contact-white:       var(--color-white);
  --contact-bg-light:    var(--color-bg-light);
  --contact-grad:        var(--color-grad-brand);
  --contact-border:      var(--color-border-alt);
  --contact-error:       var(--color-error);
  --contact-success:     #388e3c;   /* valeur spécifique à cette page */
}

.contact-page * { box-sizing: border-box; }

.contact-page .contact-container {
  max-width: 1088px;
  margin: 0 auto;
  padding: 0 15px;
}

.contact-page .contact-hero {
  margin-top: calc(120px + 1rem);
  background-color: #f0f8ff;
  background-image:
    radial-gradient(ellipse at 85% 20%, #e6f7ce 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, #cae3f4 0%, transparent 50%);
  padding: 4.5rem 15px 3.5rem;
  position: relative;
  overflow: hidden;
}

.contact-page .contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1349' height='544' viewBox='0 0 1349 544' fill='none'%3E%3Cpath fill-rule='evenodd' d='M1316.58 462.614C1323.54 486.715 1308.74 500.561 1283.68 493.384L1185.41 465.237C1160.35 458.06 1154.66 438.341 1172.75 421.417L1243.71 355.046C1261.81 338.12 1282.31 343.993 1289.27 368.096L1316.58 462.614Z' fill='%239ADF3E' stroke='%2399DF2B' stroke-width='10'/%3E%3Cpath fill-rule='evenodd' d='M345.797 54.974C345.462 64.969 338.14 68.389 329.528 62.576L295.755 39.777C287.142 33.964 287.417 25.786 296.365 21.605L331.455 5.207C340.404 1.025 347.45 5.782 347.113 15.777L345.797 54.974Z' fill='%239ADF3E' stroke='%239ADF3E' stroke-width='6'/%3E%3Cpath fill-rule='evenodd' d='M13.444 376.073C6.487 368.93 9.077 361.318 19.198 359.157L58.892 350.685C69.014 348.524 74.706 354.368 71.54 363.672L59.128 400.159C55.963 409.464 47.681 411.232 40.725 404.087L13.444 376.073Z' stroke='%2382BFE9' stroke-width='5'/%3E%3Cpath fill-rule='evenodd' d='M1123.51 164.542C1110.3 160.862 1108.12 150.02 1118.65 140.45L1159.96 102.917C1170.49 93.346 1181.29 96.357 1183.97 109.608L1194.44 161.573C1197.11 174.825 1188.5 182.655 1175.29 178.974L1123.51 164.542Z' stroke='%2382BFE9' stroke-width='5'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0.45;
}

.contact-page .contact-hero .contact-container { position: relative; z-index: 1; text-align: center; }

.contact-page .contact-hero h1 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--contact-text-dark);
  margin-bottom: 1rem;
}

.contact-page .contact-hero-sub {
  font-size: 1.05rem;
  color: var(--contact-text-mid);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

.contact-page .section-info {
  padding: 4rem 15px 0;
  background: var(--contact-white);
}

.contact-page .info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.contact-page .info-card {
  background: var(--contact-bg-light);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: box-shadow 0.2s;
}

.contact-page .info-card:hover {
  box-shadow: 0 6px 24px rgba(43, 141, 219, 0.1);
}

.contact-page .info-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--contact-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.contact-page .info-card-icon i { color: var(--contact-blue-light); font-size: 1.2rem; }

.contact-page .info-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--contact-text-dark);
  margin-bottom: 0.5rem;
}

.contact-page .info-card p {
  font-size: 0.9rem;
  color: var(--contact-text-mid);
  line-height: 1.6;
}

.contact-page .info-card a { color: var(--contact-blue); font-weight: 600; }
.contact-page .info-card a:hover { text-decoration: underline; }

.contact-page .info-card .badge {
  display: inline-block;
  background: var(--contact-blue-pale);
  color: var(--contact-blue);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 0.5rem;
}

.contact-page .section-contact {
  padding: 0 15px 5rem;
  background: var(--contact-white);
}

.contact-page .contact-layout {
  display: flex;
  gap: 3.5rem;
  align-items: flex-start;
}

.contact-page .contact-form-wrap { flex: 1; }

.contact-page .form-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--contact-text-dark);
  margin-bottom: 0.5rem;
}

.contact-page .form-subtitle {
  font-size: 0.93rem;
  color: var(--contact-text-mid);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.contact-page .form-group { margin-bottom: 1.25rem; }

.contact-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.contact-page label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--contact-text-dark);
  margin-bottom: 0.4rem;
}

.contact-page label .required { color: var(--contact-blue); margin-inline-start: 2px; }

.contact-page input[type="text"],
.contact-page input[type="email"],
.contact-page input[type="tel"],
.contact-page select,
.contact-page textarea {
  width: 100%;
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  color: var(--contact-text-dark);
  background: var(--contact-white);
  border: 1.5px solid var(--contact-border);
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.contact-page input:focus,
.contact-page select:focus,
.contact-page textarea:focus {
  border-color: var(--contact-blue);
  box-shadow: 0 0 0 3px rgba(43, 141, 219, 0.12);
}

.contact-page input::placeholder,
.contact-page textarea::placeholder { color: #b0b8c1; }

.contact-page textarea { resize: vertical; min-height: 140px; }

.contact-page select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.contact-page .file-upload-wrap {
  border: 1.5px dashed var(--contact-border);
  border-radius: 0.6rem;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.contact-page .file-upload-wrap:hover {
  border-color: var(--contact-blue);
  background: var(--contact-blue-pale);
}

.contact-page .file-upload-wrap input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: none;
  padding: 0;
}

.contact-page .file-upload-wrap:focus-within {
  border-color: var(--contact-blue);
  box-shadow: 0 0 0 3px rgba(43, 141, 219, 0.12);
}

.contact-page .file-upload-icon { color: var(--contact-blue-light); font-size: 1.5rem; margin-bottom: 0.4rem; }

.contact-page .file-upload-text { font-size: 0.88rem; color: var(--contact-text-mid); }

.contact-page .file-upload-text strong { color: var(--contact-blue); }

.contact-page .file-name {
  font-size: 0.82rem;
  color: var(--contact-blue);
  margin-top: 0.4rem;
  font-weight: 600;
  display: none;
}

.contact-page .checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.contact-page .checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--contact-blue);
  cursor: pointer;
  border-radius: 4px;
}

.contact-page .checkbox-group label {
  font-size: 0.85rem;
  color: var(--contact-text-mid);
  font-weight: 400;
  margin-bottom: 0;
  cursor: pointer;
  line-height: 1.5;
}

.contact-page .checkbox-group label a { color: var(--contact-blue); font-weight: 600; }

.contact-page .field-error {
  font-size: 0.78rem;
  color: var(--contact-error);
  margin-top: 0.3rem;
  display: none;
}

.contact-page .field-error--visible {
  display: block;
}

.contact-page .form-group.has-field-error input:not([type="checkbox"]):not([type="file"]),
.contact-page .form-group.has-field-error select,
.contact-page .form-group.has-field-error textarea {
  border-color: var(--contact-error);
}

.contact-page .contact-flash-wrap .contact-flash {
  margin: 0 0 0.5rem;
}

.contact-page .contact-flash {
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.contact-page .contact-flash--success {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
}

.contact-page .contact-flash--error {
  background: #ffebee;
  color: #b71c1c;
  border: 1px solid #ef9a9a;
}

/* Modal confirmation envoi contact */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
}

.contact-modal--open {
  pointer-events: auto;
}

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  opacity: 0;
  transition: opacity 0.28s ease;
  cursor: pointer;
}

.contact-modal--open .contact-modal__backdrop {
  opacity: 1;
}

.contact-modal__panel {
  position: relative;
  z-index: 1;
  max-width: 420px;
  width: 100%;
  background: var(--contact-white);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
  border: 1px solid var(--contact-border);
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.28s ease;
}

.contact-modal--open .contact-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.contact-modal--closing .contact-modal__backdrop {
  opacity: 0;
}

.contact-modal--closing .contact-modal__panel {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
}

.contact-modal__icon {
  font-size: 3rem;
  color: var(--contact-success);
  margin-bottom: 0.75rem;
  line-height: 1;
}

.contact-modal__panel h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--contact-text-dark);
  margin: 0 0 0.65rem;
  line-height: 1.35;
}

.contact-modal__panel p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--contact-text-mid);
  line-height: 1.55;
}

body.contact-modal-active {
  overflow: hidden;
}

.contact-page input.invalid,
.contact-page select.invalid,
.contact-page textarea.invalid {
  border-color: var(--contact-error);
}

.contact-page input.invalid:focus,
.contact-page select.invalid:focus,
.contact-page textarea.invalid:focus {
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

.contact-page .btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  background: var(--contact-green-dark);
  color: var(--contact-text-dark);
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 15px 2rem;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

.contact-page .btn-submit:hover { background: var(--contact-green-hover); }
.contact-page .btn-submit:disabled { background: #ccc; cursor: not-allowed; }

.contact-page .btn-submit .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(16, 24, 40, 0.3);
  border-top-color: var(--contact-text-dark);
  border-radius: 50%;
  animation: contact-spin 0.7s linear infinite;
  display: none;
}

@keyframes contact-spin { to { transform: rotate(360deg); } }

.contact-page .contact-sidebar { flex: 0 0 310px; }

.contact-page .sidebar-card {
  background: var(--contact-bg-light);
  border-radius: 1.5rem;
  padding: 2rem 1.75rem;
  margin-bottom: 1.5rem;
}

.contact-page .sidebar-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--contact-text-dark);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.contact-page .sidebar-card h3 i { color: var(--contact-blue-light); font-size: 1.1rem; }

.contact-page .contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.contact-page .contact-detail:last-child { margin-bottom: 0; }

.contact-page .contact-detail-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--contact-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-page .contact-detail-icon i { color: var(--contact-blue-light); font-size: 0.85rem; }

.contact-page .contact-detail-text { font-size: 0.88rem; color: var(--contact-text-mid); line-height: 1.5; }

.contact-page .contact-detail-text strong {
  color: var(--contact-text-dark);
  display: block;
  font-size: 0.85rem;
  margin-bottom: 1px;
}

.contact-page .contact-detail-text a { color: var(--contact-blue); font-weight: 600; }

.contact-page .hours-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }

.contact-page .hours-table tr { border-bottom: 1px solid var(--contact-border); }

.contact-page .hours-table tr:last-child { border-bottom: none; }

.contact-page .hours-table td { padding: 0.5rem 0; color: var(--contact-text-mid); }

.contact-page .hours-table td:last-child { text-align: end; font-weight: 600; color: var(--contact-text-dark); }

.contact-page .badge-open {
  display: inline-block;
  background: #e6f7ce;
  color: #388e3c;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-inline-start: 6px;
  vertical-align: middle;
}

.contact-page .cta-sidebar-card {
  background: var(--contact-grad);
  border-radius: 1.5rem;
  padding: 2rem 1.75rem;
  text-align: center;
}

.contact-page .cta-sidebar-card .icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--contact-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 2px 10px rgba(43, 141, 219, 0.1);
}

.contact-page .cta-sidebar-card .icon-wrap i { color: var(--contact-blue-light); font-size: 1.2rem; }

.contact-page .cta-sidebar-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--contact-text-dark);
  margin-bottom: 0.5rem;
}

.contact-page .cta-sidebar-card p {
  font-size: 0.85rem;
  color: var(--contact-text-mid);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.contact-page .btn-cta-small {
  display: inline-block;
  background: var(--contact-green-dark);
  color: var(--contact-text-dark);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 1.5rem;
  border-radius: 30px;
  transition: background 0.2s;
}

.contact-page .btn-cta-small:hover { background: var(--contact-green-hover); text-decoration: none; }

@media (max-width: 900px) {
  .contact-page .info-grid { grid-template-columns: 1fr 1fr; }
  .contact-page .contact-layout { flex-direction: column; }
  .contact-page .contact-sidebar { flex: unset; width: 100%; }
}

@media (max-width: 600px) {
  .contact-page .contact-hero h1 { font-size: 2rem; }
  .contact-page .info-grid { grid-template-columns: 1fr; }
  .contact-page .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── RTL : flèche du select côté gauche (sens de lecture) ── */
[dir="rtl"] .contact-page select {
  background-position: left 1rem center;
  padding-inline-end: 1rem;
  padding-inline-start: 2.5rem;
}