/* =============================================================================
   NS DIGITAL SERVICES — Page Contact
   -----------------------------------------------------------------------------
   Chargée par views/public/contact.php seule. Toutes les règles sont préfixées
   .nc : aucune autre page ne peut être atteinte, et aucun style global n'est
   redéfini. Les couleurs, rayons et espacements viennent des variables de
   main.css — bleu #1878F8, blanc, corail #F84000, cartes arrondies.
   ============================================================================= */

.nc {
  --nc-h: clamp(462px, 62vh, 580px);   /* hauteur d'une étape                */
  --nc-coral: #F84000;
  --nc-ease: cubic-bezier(.22, .8, .3, 1);
}

/* ── Disposition ─────────────────────────────────────────────────────────── */
.nc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
  gap: var(--ns-space-7, 40px);
  align-items: start;
}
.nc__main { min-width: 0; }

/* La carte des coordonnées reste visible pendant que les étapes défilent. */
.nc__aside { min-width: 0; position: sticky; top: 96px; }

@media (max-width: 980px) {
  .nc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ns-space-6, 30px); }
  /* Téléphone et tablette : d'abord les coordonnées, ensuite le formulaire. */
  .nc__aside { position: static; order: -1; }
}

/* ── Progression ─────────────────────────────────────────────────────────── */
.nc-prog { margin-bottom: var(--ns-space-5, 22px); }
.nc-prog__txt {
  margin: 0 0 10px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ns-ink-muted, #8A93A3);
}
.nc-prog__track {
  height: 5px; border-radius: 999px;
  background: var(--ns-line, #E7E8EC); overflow: hidden;
}
.nc-prog__bar {
  display: block; height: 100%; width: 16.6667%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ns-blue, #1878F8), var(--nc-coral));
  transition: width .5s var(--nc-ease);
}

/* ── Conteneur des étapes ────────────────────────────────────────────────── */
/* Sans JavaScript, les six étapes s'empilent : le formulaire reste complet et
   s'envoie normalement. C'est le script qui pose .is-ready. */
.nc-steps {
  display: flex; flex-direction: column;
  gap: var(--ns-space-5, 22px);
  background: var(--ns-paper, #FFF);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-xl, 26px);
  box-shadow: var(--ns-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
  padding: var(--ns-space-6, 30px);
}

.nc-steps.is-ready {
  display: block;
  height: var(--nc-h);
  padding: 0;
  overflow: hidden;                    /* la page défile, pas le conteneur   */
  scroll-snap-type: y mandatory;       /* chaque étape s'aligne au pixel     */
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  position: relative;
}

.nc-steps.is-ready .nc-step {
  height: var(--nc-h);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; align-items: center;
  padding: var(--ns-space-6, 30px);
}

/* Une étape inactive n'est PAS masquée par « visibility ». La spécification du
   Scroll Snap ne retient comme cible qu'un élément visible : masquer les autres
   les retirait de la liste des cibles, et un défilement « mandatory » pouvait
   alors refuser tout déplacement programmé. Les étapes inactives sont donc
   simplement hors du cadre, comme dans n'importe quel carrousel aligné.

   Elles sortent quand même du parcours de tabulation et des lecteurs d'écran,
   par l'attribut « inert » que le script leur pose : cela ne touche ni à la
   visibilité, ni à la géométrie, donc le défilement reste intact. */
.nc-steps.is-ready .nc-step[inert] { opacity: .25; transition: opacity .3s var(--nc-ease); }
.nc-steps.is-ready .nc-step.is-on { opacity: 1; transition: opacity .3s var(--nc-ease); }

/* Repli — voir la note de rendez-vous.css : si le contexte refuse de faire
   défiler le conteneur, seule l'étape active est rendue. Le parcours reste
   entier, il perd le glissement. */
.nc-steps.is-fallback { height: auto; min-height: var(--nc-h); scroll-snap-type: none; }
.nc-steps.is-fallback .nc-step { display: none; height: auto; min-height: var(--nc-h); }
.nc-steps.is-fallback .nc-step.is-on { display: flex; opacity: 1; }

.nc-step__in { width: 100%; min-width: 0; }

/* Filet de sécurité : sur un écran très bas, ou avec une police agrandie, le
   contenu d'une étape défile à l'intérieur de sa propre boîte au lieu de
   déborder. Le Scroll Snap du conteneur n'en est pas affecté. */
.nc-steps.is-ready .nc-step__in {
  max-height: 100%;
  overflow-y: auto;
  /* overflow-x explicite : quand un seul axe vaut « auto », l'autre passe de
     « visible » a « auto » et fait apparaitre une barre horizontale fantome,
     qui vole de la hauteur et declenche a son tour la barre verticale. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* ── Contenu d'une étape ─────────────────────────────────────────────────── */
.nc-step__num {
  margin: 0 0 10px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nc-coral);
}
.nc-step__t {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 27px); line-height: 1.25;
  color: var(--ns-ink, #101828);
  text-wrap: pretty;
}
.nc-step__t:focus-visible { outline: 2px solid var(--ns-blue, #1878F8); outline-offset: 4px; border-radius: 6px; }
.nc-step__lead {
  margin: 0 0 var(--ns-space-5, 22px);
  font-size: 14.5px; line-height: 1.6;
  color: var(--ns-ink-soft, #4B5563);
  text-wrap: pretty;
}

/* Apparition légère des titres et des champs à l'arrivée sur l'étape. */
.nc-steps.is-ready .nc-step.is-on .nc-step__num,
.nc-steps.is-ready .nc-step.is-on .nc-step__t,
.nc-steps.is-ready .nc-step.is-on .nc-step__lead,
.nc-steps.is-ready .nc-step.is-on .ns-field,
.nc-steps.is-ready .nc-step.is-on .nc-recap,
.nc-steps.is-ready .nc-step.is-on .nc-nav {
  animation: nc-rise .42s var(--nc-ease) both;
}
.nc-steps.is-ready .nc-step.is-on .nc-step__t    { animation-delay: .04s; }
.nc-steps.is-ready .nc-step.is-on .nc-step__lead { animation-delay: .08s; }
.nc-steps.is-ready .nc-step.is-on .ns-field      { animation-delay: .12s; }
.nc-steps.is-ready .nc-step.is-on .nc-recap      { animation-delay: .12s; }
.nc-steps.is-ready .nc-step.is-on .nc-nav        { animation-delay: .18s; }

@keyframes nc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Champs ──────────────────────────────────────────────────────────────── */
.nc-step .ns-field { margin-bottom: var(--ns-space-4, 16px); }
.nc-step .ns-input,
.nc-step .ns-select,
.nc-step .ns-textarea { width: 100%; max-width: 100%; }
.nc-textarea { min-height: 132px; max-height: 40vh; }

.nc-hint {
  margin: 6px 0 0;
  font-family: var(--ns-font-mono, monospace);
  font-size: 11px; color: var(--ns-ink-muted, #8A93A3);
}

.nc-err {
  margin: 6px 0 0;
  font-size: 13px; font-weight: 500; line-height: 1.45;
  color: var(--ns-red-dark, #B30000);
  min-height: 0;
}
.nc-err:empty { display: none; }

.nc-step .ns-input[aria-invalid="true"],
.nc-step .ns-select[aria-invalid="true"],
.nc-step .ns-textarea[aria-invalid="true"] {
  border-color: var(--ns-red, #F80000);
  box-shadow: 0 0 0 3px rgba(248, 0, 0, .10);
}

.nc-consent {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ns-ink-soft, #4B5563);
  cursor: pointer;
}
.nc-consent input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--ns-blue, #1878F8); }

/* ── Récapitulatif ───────────────────────────────────────────────────────── */
.nc-recap {
  margin: 0 0 var(--ns-space-5, 22px);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-md, 12px);
  overflow: hidden;
}
.nc-recap__row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px; padding: 9px 14px;
  border-bottom: 1px solid var(--ns-line-soft, #F0F1F4);
}
.nc-recap__row:last-child { border-bottom: 0; }
.nc-recap dt {
  font-family: var(--ns-font-mono, monospace);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ns-ink-muted, #8A93A3);
  padding-top: 2px;
}
.nc-recap dd {
  margin: 0; font-size: 13.5px; line-height: 1.5;
  color: var(--ns-ink, #101828);
  overflow-wrap: anywhere;              /* aucune coupure de mise en page    */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 460px) {
  .nc-recap__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 7px 12px; }
  .nc-recap dd { -webkit-line-clamp: 2; font-size: 13px; }
}

/* ── Boutons de navigation ───────────────────────────────────────────────── */
.nc-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--ns-space-2, 8px); }
.nc-nav .ns-btn { flex: 0 0 auto; }
.nc-next { min-width: 148px; }

@media (max-width: 640px) {
  /* Champs et boutons sur toute la largeur disponible. */
  .nc-nav { flex-direction: column-reverse; gap: 10px; }
  .nc-nav .ns-btn { width: 100%; }
}

/* ── Carte des coordonnées ───────────────────────────────────────────────── */
.nc-card {
  background: var(--ns-paper, #FFF);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-xl, 26px);
  box-shadow: var(--ns-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
  padding: var(--ns-space-6, 30px);
  transition: box-shadow .28s var(--nc-ease), border-color .28s var(--nc-ease);
}
.nc-card:hover { box-shadow: 0 10px 30px rgba(16, 24, 40, .09); border-color: #D8DCE3; }
.nc-card__t { margin: 0 0 6px; font-size: 18px; line-height: 1.3; color: var(--ns-ink, #101828); }
.nc-card__lead { margin: 0 0 var(--ns-space-5, 22px); font-size: 13.5px; line-height: 1.55; color: var(--ns-ink-soft, #4B5563); }

.nc-coord { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.nc-coord li { display: flex; gap: 13px; align-items: flex-start; }

.nc-coord__ic {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ns-radius-md, 12px);
  background: var(--ns-blue-tint, #E8F2FE);
  color: var(--ns-blue-dark, #1156B3);
  transition: background .22s var(--nc-ease), color .22s var(--nc-ease);
}
.nc-coord__ic--wa { background: #E7F8EE; color: #128C7E; }
.nc-coord li:hover .nc-coord__ic { background: var(--ns-blue, #1878F8); color: #FFFFFF; }
.nc-coord li:hover .nc-coord__ic--wa { background: #128C7E; color: #FFFFFF; }

/* Taille imposée : une règle générale « svg { height:auto } » ne peut plus
   déformer ces icônes. */
.nc-ico { width: 19px; height: 19px; min-width: 19px; max-width: none; display: block; flex: 0 0 auto; }

.nc-coord__tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--ns-ink, #101828); }
.nc-coord__k {
  font-family: var(--ns-font-mono, monospace);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ns-ink-muted, #8A93A3);
}
.nc-coord__tx a { overflow-wrap: anywhere; }

.nc-card__acts { display: flex; flex-direction: column; gap: 10px; margin-top: var(--ns-space-6, 30px); }

.nc-btn--wa { background: #25D366; color: #0B2E1C; border-color: #25D366; gap: 9px; }
.nc-btn--wa:hover { background: #128C7E; border-color: #128C7E; color: #FFFFFF; }
.nc-btn--wa .nc-ico { width: 17px; height: 17px; min-width: 17px; }

.nc-map {
  margin-top: var(--ns-space-5, 22px);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-lg, 18px);
  overflow: hidden;
}
@media (max-width: 980px) { .nc-map { margin-bottom: var(--ns-space-5, 22px); } }

/* ── Page de remerciement ────────────────────────────────────────────────── */
.nc-merci {
  background: var(--ns-paper, #FFF);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-xl, 26px);
  box-shadow: var(--ns-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
  padding: clamp(26px, 5vw, 46px);
  text-align: center;
  animation: nc-rise .5s var(--nc-ease) both;
}
.nc-merci__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; min-width: 66px;
  aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--ns-success-tint, #E7F8EE);
  color: var(--ns-success, #12805C);
  margin-bottom: var(--ns-space-5, 22px);
  animation: nc-pop .5s var(--nc-ease) both;
}
.nc-merci__t {
  margin: 0 0 12px;
  font-size: clamp(23px, 3.2vw, 32px); line-height: 1.18;
  color: var(--ns-ink, #101828); text-wrap: pretty;
  animation: nc-rise .5s var(--nc-ease) .06s both;
}
.nc-merci__lead {
  margin: 0 auto 10px; max-width: 54ch;
  font-size: 15.5px; line-height: 1.65;
  color: var(--ns-ink, #101828); text-wrap: pretty;
  animation: nc-rise .5s var(--nc-ease) .12s both;
}
.nc-merci__sub {
  margin: 0 auto; max-width: 56ch;
  font-size: 14px; line-height: 1.65;
  color: var(--ns-ink-soft, #4B5563); text-wrap: pretty;
  animation: nc-rise .5s var(--nc-ease) .18s both;
}
.nc-merci__foot { margin: var(--ns-space-6, 30px) 0 0; font-size: 14px; }

@keyframes nc-pop {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* Trois cartes de même hauteur, alignées, quelle que soit la longueur du texte. */
.nc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: var(--ns-space-6, 30px);
  text-align: left;
  animation: nc-rise .5s var(--nc-ease) .24s both;
}
@media (max-width: 860px) { .nc-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 520px) { .nc-cards { grid-template-columns: minmax(0, 1fr); } }

.nc-card2 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-width: 0; height: 100%;
  padding: 20px;
  background: var(--ns-paper, #FFF);
  border: 1px solid var(--ns-line, #E7E8EC);
  border-radius: var(--ns-radius-lg, 18px);
  color: var(--ns-ink, #101828);
  text-decoration: none;
  transition: transform .24s var(--nc-ease), box-shadow .24s var(--nc-ease), border-color .24s var(--nc-ease);
}
.nc-card2:hover, .nc-card2:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .10);
  border-color: var(--ns-blue, #1878F8);
  color: var(--ns-ink, #101828);
}

.nc-card2__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 40px; flex: 0 0 40px;
  aspect-ratio: 1 / 1;
  border-radius: var(--ns-radius-md, 12px);
  background: var(--ns-blue-tint, #E8F2FE);
  color: var(--ns-blue-dark, #1156B3);
  transition: background .24s var(--nc-ease), color .24s var(--nc-ease);
}
.nc-card2:hover .nc-card2__ic { background: var(--ns-blue, #1878F8); color: #FFFFFF; }
.nc-card2--wa .nc-card2__ic { background: #E7F8EE; color: #128C7E; }
.nc-card2--wa:hover .nc-card2__ic { background: #128C7E; color: #FFFFFF; }
.nc-card2--wa:hover, .nc-card2--wa:focus-visible { border-color: #128C7E; }

/* display:block et width:100% explicites : sans eux, un titre qui passe sur
   deux lignes peut chevaucher la description dans certains moteurs de rendu. */
.nc-card2__t {
  display: block; width: 100%;
  font-size: 15.5px; font-weight: 600; line-height: 1.3;
}
.nc-card2__d {
  display: block; width: 100%;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ns-ink-soft, #4B5563);
  flex: 1 1 auto; text-wrap: pretty;
}
.nc-card2__go {
  display: block; width: 100%;
  margin-top: 2px;
  font-family: var(--ns-font-mono, monospace);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ns-blue-dark, #1156B3);
}
.nc-card2--wa .nc-card2__go { color: #0F7A6C; }

/* ── Aucun débordement horizontal, quelle que soit la largeur ────────────── */
.nc, .nc__grid, .nc__main, .nc__aside, .nc-steps, .nc-step,
.nc-card, .nc-merci, .nc-cards, .nc-card2 { max-width: 100%; }
.nc-card2__t, .nc-card2__d { overflow-wrap: break-word; }
.nc-step__t, .nc-step__lead, .nc-card__t { overflow-wrap: break-word; }

/* ── Animations désactivées à la demande du visiteur ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nc-steps.is-ready { scroll-behavior: auto; }
  .nc-steps.is-ready .nc-step,
  .nc-steps.is-ready .nc-step[inert],
  .nc-steps.is-ready .nc-step.is-on,
  .nc-steps.is-ready .nc-step.is-on * { animation: none !important; transition: none !important; }
  .nc-steps.is-ready .nc-step[inert] { opacity: 1; }
  .nc-prog__bar { transition: none; }
  .nc-card { transition: none; }
  .nc-merci,
  .nc-merci__mark, .nc-merci__t, .nc-merci__lead, .nc-merci__sub, .nc-cards { animation: none; }
  .nc-card2, .nc-card2__ic { transition: none; }
  .nc-card2:hover, .nc-card2:focus-visible { transform: none; }
}