/* ==========================================================================
   Page contact + écran « merci » — refonte V3 (19/10/2026).

   Un formulaire par étapes (tuiles photo, puis un champ à la fois, barre de
   progression), pensé téléphone d'abord, et une colonne d'infos réduite à
   l'essentiel : téléphone, adresse + photo, e-mail.

   Charte Volt (docs/CHARTE-VOLT.md) : zéro border-radius, variables --pa-*
   existantes, aucun pictogramme décoratif (photos). Complète vitrine.css
   (`.vt-champ`, `.vt-honeypot`, `.vt-hero`…) sans le modifier : tout ce qui
   suit est préfixé `.ct-` pour rester isolé.

   Règle d'or du socle d'animation (static/js/animations.js) : rien n'est
   masqué depuis le CSS seul. Le masquage des étapes n'existe QUE sous
   `.ct-formulaire.is-js`, classe posée par `contact.js` lui-même : sans le
   script, toutes les étapes sont visibles, empilées.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bandeau — bas : le choix du motif doit rester dans le premier écran.
   -------------------------------------------------------------------------- */

.ct-bandeau {
  min-height: 24vh;
}
.ct-bandeau .vt-hero__contenu {
  padding-block: 40px;
}
@media (max-width: 900px) {
  .ct-bandeau {
    min-height: 20vh;
  }
  .ct-bandeau .vt-hero__contenu {
    padding-block: 26px;
  }
  .ct-bandeau .vt-titre-marketing {
    font-size: clamp(26px, 8vw, 34px);
  }
}

.ct-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Les composants ci-dessous posent un `display` : sans cette règle ils
   ignoreraient l'attribut `hidden` que le script retire / remet. */
.ct-formulaire [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Mise en page : formulaire d'abord (téléphone), infos à côté (bureau).
   -------------------------------------------------------------------------- */

.ct-page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 44px;
  align-items: start;
}
@media (max-width: 900px) {
  .ct-page {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.ct-panneau {
  min-width: 0;
}
@media (max-width: 560px) {
  .ct-panneau {
    padding: 20px 16px;
  }
}

.ct-service {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 3px solid var(--pa-accent);
  background: rgba(255, 108, 2, 0.1);
  color: var(--pa-blanc);
  font-weight: 700;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Progression — montrée seulement par le script (attribut `hidden`).
   -------------------------------------------------------------------------- */

.ct-progres {
  margin-bottom: 20px;
}
.ct-progres__haut {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--pa-accent);
}
.ct-progres__barre {
  height: 8px;
  background: var(--pa-fond);
  border: 1px solid var(--pa-bordure-douce);
  overflow: hidden;
}
.ct-progres__rempli {
  height: 100%;
  width: 25%;
  background: var(--pa-accent);
  transition: width 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Étapes
   -------------------------------------------------------------------------- */

.ct-etape {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ct-etape__titre {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  font-family: var(--pa-police-titre);
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.15;
  color: var(--pa-blanc);
  outline: none;
}
.ct-sous {
  margin: -6px 0 14px;
  font-size: 15px;
  color: var(--pa-texte-3);
}

/* Sans script : toutes les étapes, empilées, séparées d'un filet. */
.ct-formulaire:not(.is-js) .ct-etape + .ct-etape {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--pa-bordure-douce);
}

/* Avec script : une étape à la fois. */
.ct-formulaire.is-js .ct-etape {
  display: none;
}
.ct-formulaire.is-js .ct-etape.is-active {
  display: block;
}
.ct-etape.is-entre {
  animation: ct-glisse-avant 0.32s ease both;
}
.ct-etape.is-entre-retour {
  animation: ct-glisse-retour 0.32s ease both;
}
@keyframes ct-glisse-avant {
  from {
    opacity: 0;
    transform: translateX(26px);
  }
}
@keyframes ct-glisse-retour {
  from {
    opacity: 0;
    transform: translateX(-26px);
  }
}

.ct-etape .vt-champ {
  margin-bottom: 0;
}
.ct-etape .pa-input {
  font-size: 18px;
  padding: 18px;
}
.ct-etape textarea.pa-input {
  min-height: 150px;
}
.ct-etape .pa-erreur {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Étape 1 — grosses tuiles photo
   -------------------------------------------------------------------------- */

.ct-tuiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ct-tuile:last-child {
  grid-column: 1 / -1;
}
.ct-tuile {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
/* Le vrai radio couvre la tuile, transparent : focusable au clavier, jamais
   `display:none` (qui le sortirait de la tabulation). */
.ct-tuile input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.ct-tuile__cadre {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 3px solid transparent;
  background: var(--pa-panneau);
  transition: border-color 0.2s ease;
}
.ct-tuile:last-child .ct-tuile__cadre {
  aspect-ratio: 16 / 7;
}
/* Bureau : tuiles moins hautes, pour que les cinq tiennent dans l'écran. */
@media (min-width: 901px) {
  .ct-tuile__cadre {
    aspect-ratio: 16 / 10;
  }
  .ct-tuile:last-child .ct-tuile__cadre {
    aspect-ratio: 16 / 5;
  }
}
.ct-tuile__cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ct-tuile:hover .ct-tuile__cadre img {
  transform: scale(1.05);
}
.ct-tuile__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 26, 47, 0) 35%, rgba(1, 26, 47, 0.92) 100%);
}
.ct-tuile__texte {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--pa-blanc);
  pointer-events: none;
}
.ct-tuile__coche {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 5px;
  box-sizing: border-box;
  background: var(--pa-accent);
  fill: none;
  stroke: var(--pa-fond);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* État choisi : pur CSS (`:checked`), vrai aussi sans JavaScript. */
.ct-tuile input:checked + .ct-tuile__cadre {
  border-color: var(--pa-accent);
  animation: ct-pop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ct-tuile input:checked + .ct-tuile__cadre .ct-tuile__coche {
  opacity: 1;
  transform: scale(1);
}
.ct-tuile input:focus-visible + .ct-tuile__cadre {
  outline: 3px solid var(--pa-blanc);
  outline-offset: 2px;
}
@keyframes ct-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.95);
  }
  70% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

/* Les tuiles arrivent en cascade chaque fois que l'étape s'affiche. Le
   masquage n'existe que pendant le délai de l'animation elle-même : si elle
   ne tourne pas, tout est déjà visible. */
.ct-formulaire.is-js .ct-etape.is-active .ct-tuile {
  animation: ct-tuile-entree 0.5s ease both;
  animation-delay: calc(var(--ct-i, 0) * 70ms);
}
@keyframes ct-tuile-entree {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

/* --------------------------------------------------------------------------
   Navigation, blocage, envoi
   -------------------------------------------------------------------------- */

.ct-nav {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 18px;
}
.ct-nav__retour {
  min-height: 52px;
  padding: 0 20px;
  background: transparent;
  color: var(--pa-texte-2);
  border: 2px solid var(--pa-bordure-btn);
  font-family: var(--pa-police-texte);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.ct-nav__retour:hover {
  border-color: var(--pa-accent);
  color: var(--pa-accent);
}
.ct-nav__suite {
  flex: 1;
  width: auto;
}

.ct-blocage {
  margin: 12px 0 0;
  color: var(--pa-erreur-texte);
  font-weight: 700;
  font-size: 15px;
}
.ct-blocage:empty {
  display: none;
}

.ct-etape .ct-btn-envoi {
  margin-top: 16px;
}
.ct-donnees {
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
}
.ct-donnees a {
  display: inline-block;
  padding: 12px 8px;
  color: var(--pa-texte-4);
}

.ct-btn-envoi {
  position: relative;
  transition: opacity 0.2s ease;
}
.ct-btn-envoi.is-envoi {
  opacity: 0.85;
  cursor: progress;
}
.ct-btn-envoi.is-envoi .ct-btn-envoi__texte {
  visibility: hidden;
}
.ct-btn-envoi.is-envoi::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(1, 38, 71, 0.35);
  border-top-color: var(--pa-fond);
  animation: ct-tourne 0.7s linear infinite;
}
@keyframes ct-tourne {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Colonne d'infos : téléphone, adresse + photo, e-mail, réserver.
   -------------------------------------------------------------------------- */

.ct-colonne-info > * + * {
  margin-top: 16px;
}

.ct-tel {
  display: block;
  padding: 22px 22px 20px;
  background: var(--pa-accent);
  color: var(--pa-fond);
  text-decoration: none;
  transition: background 0.2s ease;
}
.ct-tel:hover,
.ct-tel:focus-visible {
  background: var(--pa-blanc);
  color: var(--pa-fond);
}
.ct-tel__label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ct-tel__numero {
  display: block;
  margin: 4px 0 8px;
  font-family: var(--pa-police-titre);
  font-size: clamp(28px, 8.4vw, 36px);
  line-height: 1.1;
  white-space: nowrap;
}
.ct-tel__horaires {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.ct-urgence {
  margin: 0;
  padding: 11px 14px;
  border-left: 3px solid var(--pa-accent);
  background: rgba(255, 108, 2, 0.1);
  color: var(--pa-texte-2);
  font-size: 14px;
  line-height: 1.5;
}

/* Carte d'adresse : la photo réelle de l'entrée avec l'adresse par-dessus,
   tout le bloc est le lien vers l'itinéraire. */
.ct-adresse {
  position: relative;
  display: block;
  height: clamp(240px, 70vw, 320px);
  overflow: hidden;
  border-top: 4px solid var(--pa-accent);
  text-decoration: none;
  color: inherit;
}
.ct-adresse img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform 0.6s ease;
}
.ct-adresse:hover img {
  transform: scale(1.04);
}
.ct-adresse__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 31, 58, 0.05) 20%, rgba(1, 31, 58, 0.92) 100%);
}
.ct-adresse__texte {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: grid;
  gap: 4px;
}
.ct-adresse__lignes {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--pa-blanc);
}
.ct-adresse__detail {
  font-size: 14px;
  color: var(--pa-texte-2);
}
.ct-adresse__lien {
  display: block;
  padding-top: 4px;
  color: var(--pa-accent);
  font-weight: 800;
}

.ct-mail {
  display: block;
  padding: 16px 18px;
  background: var(--pa-panneau);
  border-top: 3px solid var(--pa-accent);
  text-decoration: none;
}
.ct-mail__label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-sourdine);
}
.ct-mail__adresse {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--pa-blanc);
  word-break: break-word;
}
.ct-mail:hover .ct-mail__adresse,
.ct-mail:focus-visible .ct-mail__adresse {
  color: var(--pa-accent);
}

.ct-reserver {
  padding-block: 17px;
}

/* --------------------------------------------------------------------------
   Écran « merci » (merci.html) — court, chaleureux, une photo.
   -------------------------------------------------------------------------- */

.ct-merci {
  max-width: 600px;
  margin-inline: auto;
  padding-block: 28px 56px;
  text-align: center;
}
.ct-merci__photo {
  position: relative;
  width: 100%;
  margin: 0 0 24px;
  border-top: 4px solid var(--pa-accent);
  overflow: hidden;
}
.ct-merci__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.ct-merci__coche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: -56px auto 0;
  position: relative;
  background: var(--pa-accent);
  border: 4px solid var(--pa-fond);
  box-sizing: content-box;
}
.ct-merci__coche svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--pa-fond);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ct-merci__coche path {
  stroke-dasharray: 26;
  animation: ct-trace 0.6s 0.3s ease-out both;
}
@keyframes ct-trace {
  from {
    stroke-dashoffset: 26;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.ct-merci__titre {
  margin: 18px 0 8px;
}
.ct-merci__tel {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 4px;
  font-family: var(--pa-police-titre);
  font-size: 22px;
  color: var(--pa-blanc);
  text-decoration: none;
}
.ct-merci__tel:hover,
.ct-merci__tel:focus-visible {
  color: var(--pa-accent);
}

/* --------------------------------------------------------------------------
   Moins de mouvement : les étapes se suivent quand même, sans glissement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ct-tuile__cadre,
  .ct-tuile__cadre img,
  .ct-tuile__coche,
  .ct-progres__rempli,
  .ct-tel,
  .ct-adresse img,
  .ct-btn-envoi {
    transition: none !important;
  }
  .ct-etape.is-entre,
  .ct-etape.is-entre-retour,
  .ct-formulaire.is-js .ct-etape.is-active .ct-tuile,
  .ct-tuile input:checked + .ct-tuile__cadre,
  .ct-btn-envoi.is-envoi::after,
  .ct-merci__coche path {
    animation: none !important;
  }
}