/* ==========================================================================
   SKYWAY TRAVELERS — page « Contactez-nous »
   Source : NEW LIEN MAQUETTE.xd, plan « Liste services – 5 » (1920 × 2371)
   Origine de section = 242.

   Reprise de la maquette avec une mise en page plus aérée :
   formulaire à libellés flottants, cartes d'information respirantes et
   carte géographique recadrée sur la largeur de contenu (137rem).
   Les noms de classes de la maquette (.cform, .cform__grid, .cform__submit,
   .ccards, .ccard, .cmap, .cphoto) sont conservés : responsive.css les
   remet dans le flux sous 1200 px et ne doit pas perdre ses cibles.
   ========================================================================== */

.contact-page{
  position:relative;
  height:178rem;
}

/* jetons locaux : uniquement des déclinaisons de la palette du site */
.contact-page{
  --field-bg:     #F8FAFF;                 /* fond de champ (maquette) */
  --field-line:   rgba(7,48,100,.14);      /* filet navy très dilué */
  --field-line-2: rgba(7,48,100,.30);      /* filet au survol */
  --muted:        #55637A;                 /* texte secondaire, 6.6:1 sur blanc */
  --radius-card:  2rem;
  --t:            .2s ease;                /* transitions locales : 200 ms */
}

/* ==========================================================================
   FORMULAIRE
   ========================================================================== */
.cform{
  position:absolute; left:27.5rem; top:10rem;
  width:71rem;
  padding:4.4rem 5.5rem 4.8rem;
  background:#fff;
  border:.1rem solid var(--field-line);
  border-radius:2.4rem;
  box-shadow:0 1.2rem 4rem rgba(7,48,100,.10);
}

.cform__eyebrow{
  font-family:var(--font-body); font-weight:600;
  font-size:1.6rem; line-height:2rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red);
}
.cform__title{
  margin:.8rem 0 3.2rem;
  font-family:var(--font-title); font-weight:600;
  font-size:3.4rem; line-height:3.8rem; letter-spacing:-.01em;
  color:var(--navy);
}

.cform__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.8rem;
}
.cform .cform--full{ grid-column:1 / -1; }

/* ---------- champ à libellé flottant ---------- */
.field{ position:relative; }

.field__input{
  width:100%;
  padding:2.6rem 1.8rem .8rem;             /* le haut est réservé au libellé */
  background:var(--field-bg);
  border:.1rem solid var(--field-line);
  border-radius:1rem;
  font-family:var(--font-body); font-size:1.7rem; line-height:2.2rem;
  color:var(--ink-strong);
  transition:border-color var(--t), background-color var(--t), box-shadow var(--t);
}
input.field__input{ height:6.4rem; }
.field__input--area{ height:13rem; padding-top:3rem; resize:vertical; }

/* le placeholder d'une espace ne doit jamais se voir */
.field__input::placeholder{ color:transparent; }

.field__label{
  position:absolute; left:1.9rem; top:2rem;
  font-family:var(--font-body); font-size:1.7rem; line-height:2.4rem;
  color:var(--muted);
  pointer-events:none;                     /* le clic traverse vers le champ */
  transition:top var(--t), font-size var(--t), color var(--t);
}
.field__req{ color:var(--red); }

/* champ rempli ou en cours de saisie : le libellé monte et rapetisse */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label{
  top:.9rem;
  font-size:1.4rem; line-height:1.8rem;
  color:var(--navy);
}
.field__input--area + .field__label{ top:2.6rem; }
.field__input--area:focus + .field__label,
.field__input--area:not(:placeholder-shown) + .field__label{ top:.9rem; }

.field__hint{
  display:block; margin:.7rem .4rem 0;
  font-family:var(--font-body); font-size:1.4rem; line-height:1.9rem;
  color:var(--muted);
}

/* états */
.field__input:hover{ border-color:var(--field-line-2); }
.field__input:focus{
  outline:none;                            /* remplacé par l'anneau ci-dessous */
  background:#fff;
  border-color:var(--red);
  box-shadow:0 0 0 .3rem rgba(245,47,6,.18);
}
.field__input:focus-visible{
  outline:.2rem solid var(--red); outline-offset:.2rem;
}
/* :user-invalid n'alerte qu'après une vraie interaction, jamais au chargement */
.field__input:user-invalid{
  border-color:var(--red);
  background:#FFF6F4;
}
.field__input:user-invalid ~ .field__hint{ color:#B3230B; }

.cform__note{
  margin-top:2.6rem;
  font-family:var(--font-body); font-size:1.5rem; line-height:2rem;
  color:var(--muted);
}

/* ---------- bouton d'envoi ---------- */
.cform__submit{
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  width:100%; min-height:6.2rem;
  margin-top:2.4rem;
  border-radius:99rem;
  /* le rouge de marque reste la base ; le dégradé sombre porte le libellé
     blanc à 4,6:1 (AA) sans changer la teinte */
  background:var(--red);
  background-image:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
  color:#fff;
  font-family:var(--font-body); font-weight:600;
  font-size:1.8rem; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 .8rem 2rem rgba(245,47,6,.28);
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
}
.cform__submit-ico{ width:2.2rem; height:2.2rem; }
.cform__submit:hover{
  filter:brightness(1.06);
  transform:translateY(-.2rem);
  box-shadow:0 1.2rem 2.8rem rgba(245,47,6,.34);
}
.cform__submit:active{ transform:translateY(0); box-shadow:0 .4rem 1.2rem rgba(245,47,6,.28); }

/* ==========================================================================
   PHOTOS D'ACCOMPAGNEMENT (décoratives)
   ========================================================================== */
.cphoto{
  position:absolute; max-width:none; object-fit:cover;
  border-radius:var(--radius-card);
  box-shadow:0 1.2rem 3.6rem rgba(7,48,100,.14);
}
.cphoto--a{ left:106rem; top:10rem; width:27.9rem; height:52rem; }
.cphoto--b{ left:144.1rem; top:10rem; width:47.9rem; height:76rem; }

/* ==========================================================================
   TROIS CARTES D'INFORMATION
   ========================================================================== */
.ccards{
  position:absolute; left:27.5rem; top:96rem;
  width:137rem;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:3.4rem;
}
.ccard{
  position:relative;
  min-height:23rem;
  padding:7.4rem 3.2rem 3.4rem;            /* le badge déborde en haut */
  background:#fff;
  border:.1rem solid var(--field-line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  text-align:center;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.ccard:hover,
.ccard:focus-within{
  transform:translateY(-.6rem);
  border-color:rgba(245,47,6,.35);
  box-shadow:0 1.6rem 4rem rgba(7,48,100,.16);
}

.ccard__badge{
  position:absolute; left:50%; top:-2.8rem;
  transform:translateX(-50%);
  width:5.6rem; height:5.6rem; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 .6rem 1.8rem rgba(245,47,6,.32);
  transition:transform var(--t), box-shadow var(--t);
}
.ccard__badge .ico{ width:2.6rem; height:2.6rem; }
.ccard:hover .ccard__badge,
.ccard:focus-within .ccard__badge{
  transform:translateX(-50%) scale(1.08);
  box-shadow:0 .8rem 2.2rem rgba(245,47,6,.42);
}

.ccard__title{
  margin:0;
  font-family:var(--font-body); font-weight:600;
  font-size:1.8rem; line-height:2.2rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.ccard__value{
  margin:1.4rem 0 0;
  font-family:var(--font-title); font-weight:600;
  font-size:2.3rem; line-height:3rem; color:var(--ink-strong);
}
.ccard__value a{
  color:inherit;
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:.5rem; text-decoration-thickness:.2rem;
  transition:color var(--t), text-decoration-color var(--t);
}
.ccard__value a:hover,
.ccard__value a:focus-visible{ color:var(--red); text-decoration-color:currentColor; }

.ccard__meta{
  margin:1.2rem 0 0;
  font-family:var(--font-body); font-size:1.5rem; line-height:2rem;
  color:var(--muted);
}

/* ==========================================================================
   CARTE GÉOGRAPHIQUE
   ========================================================================== */
.cmap-wrap{
  position:absolute; left:27.5rem; top:128rem;
  width:137rem; height:46rem; margin:0;
  border:.1rem solid var(--field-line);
  border-radius:2.4rem;
  box-shadow:0 1.2rem 4rem rgba(7,48,100,.12);
  overflow:hidden;                         /* les coins arrondis rognent l'image */
}
.cmap{
  width:100%; height:100%;
  max-width:none; object-fit:cover;
}
.cmap__chip{
  position:absolute; left:2.4rem; bottom:2.4rem;
  display:inline-flex; align-items:center; gap:1rem;
  max-width:calc(100% - 4.8rem);
  padding:1.2rem 2rem;
  background:rgba(255,255,255,.94);
  border-radius:99rem;
  box-shadow:0 .6rem 2rem rgba(7,48,100,.18);
  font-family:var(--font-body); font-weight:500;
  font-size:1.6rem; line-height:2rem; color:var(--navy);
}
.cmap__chip .ico{ width:2rem; height:2rem; color:var(--red); }

/* ==========================================================================
   DÉCORS ET BANDEAU
   ========================================================================== */
.deco--route10{ position:absolute; left:-1rem;  top:4rem;  width:31.74rem; height:25.06rem; }
.deco--stamps10{ position:absolute; left:.6rem; top:46rem; width:13.77rem; height:18.22rem; }

.phero--contacts{
  background:url("../images/hero-1.webp") center -53.5rem / 192rem auto no-repeat;
}

/* ==========================================================================
   RESPONSIVE
   Sous 1200 px, responsive.css remet .cform, .cform__grid, .cform__submit,
   .ccards, .cmap et .cphoto dans le flux ; il ne connaît en revanche ni
   .cmap-wrap ni .field : c'est ici qu'ils sont repris.
   Les planchers de lisibilité et de cible tactile sont exprimés en pixels
   absolus (1rem ne vaut plus que 8 px ici, 9 px sous 768 px).
   ========================================================================== */
@media (max-width:1199px){
  .contact-page{
    height:auto; padding:5rem 0 7rem;
    width:min(var(--wrap),92%); margin-inline:auto;
    display:grid; gap:5rem;
  }

  .cform{
    position:static; width:auto;
    border-radius:2rem;
  }
  .cform__eyebrow{ font-size:14px; }
  .cform__title{ font-size:2.9rem; line-height:3.4rem; margin-bottom:2.8rem; }
  .cform__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.8rem; }

  .cform .field__input{
    padding:24px 14px 8px;
    min-height:54px; height:auto;
    border-radius:1rem;
  }
  .cform .field__input--area{ min-height:120px; padding-top:26px; }
  .cform .field__label{ left:15px; top:17px; font-size:15px; line-height:20px; }
  .cform .field__input:focus + .field__label,
  .cform .field__input:not(:placeholder-shown) + .field__label{ top:6px; font-size:14px; line-height:16px; }
  .cform .field__input--area + .field__label{ top:19px; }
  .cform .field__input--area:focus + .field__label,
  .cform .field__input--area:not(:placeholder-shown) + .field__label{ top:6px; }
  .field__hint{ font-size:14px; line-height:18px; }
  .cform__note{ font-size:15px; }

  .cform__submit{ min-height:52px; font-size:15px; }

  .cphoto{ display:none; }

  .ccards{ position:static; width:auto; margin-top:5rem; }
  .ccard{ min-height:0; padding:7rem 2.4rem 3rem; }
  .ccard__title{ font-size:15px; letter-spacing:.12em; }
  .ccard__value{ font-size:18px; line-height:26px; }
  .ccard__value a{
    display:inline-flex; align-items:center;
    min-height:44px;                       /* cible tactile WCAG 2.5.8 */
  }
  .ccard__meta{ font-size:14px; line-height:19px; }

  .cmap-wrap{
    position:static; width:auto; height:auto;
    border-radius:1.6rem;
  }
  .cmap{ height:34rem; }
  .cmap__chip{
    left:1.6rem; bottom:1.6rem;
    max-width:calc(100% - 3.2rem);
    padding:10px 16px;
    font-size:14px; line-height:18px;
  }
  .cmap__chip .ico{ width:16px; height:16px; }

  .deco--route10,.deco--stamps10{ display:none; }
}

@media (max-width:767px){
  .cform{ border-radius:1.6rem; }
  .cform__grid{ grid-template-columns:1fr; }
  .cform__title{ font-size:2.6rem; line-height:3.2rem; }
  .ccards{ gap:6rem 3rem; }
  .cmap{ height:26rem; }
  .cmap__chip{
    position:static;
    display:flex; max-width:100%;
    margin:1.6rem 0 0; border-radius:1.2rem;
    box-shadow:none; background:var(--field-bg);
  }
  .cmap-wrap{ overflow:visible; }
  .cmap{ border-radius:1.6rem; }
}

/* ==========================================================================
   PRÉFÉRENCE « MOINS D'ANIMATIONS »
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .field__input,
  .field__label,
  .cform__submit,
  .ccard,
  .ccard__badge,
  .ccard__value a{
    transition:none;
  }
  .cform__submit:hover,
  .ccard:hover,
  .ccard:focus-within{ transform:none; }
  .ccard:hover .ccard__badge,
  .ccard:focus-within .ccard__badge{ transform:translateX(-50%); }
}