/* ==========================================================================
   Services — grille bento : le premier service domine visuellement
   ========================================================================== */

.services {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 700px)  { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  position: relative;
  background: var(--c-paper);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background-color var(--dur-normal) var(--ease-out);
}
.service:hover { background: var(--c-paper-warm); }

/* Le premier occupe deux colonnes : hiérarchie, pas uniformité */
@media (min-width: 1050px) {
  .service:first-child { grid-column: span 2; }
  .service:first-child .service__title { font-size: var(--text-2xl); }
  .service:first-child .service__desc { max-width: 46ch; }
}

.service__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-accent-wash);
  color: var(--c-accent-deep);
  margin-bottom: 0.35rem;
  transition: background-color var(--dur-normal) var(--ease-out),
              color var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
.service:hover .service__icon {
  background: var(--c-accent);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}

.service__title { font-size: var(--text-xl); font-weight: 700; color: var(--c-navy); }
.service__desc { color: var(--c-text-muted); font-size: var(--text-sm); }

.service__list {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.service__list li {
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
}

/* Carte urgence : inversée, elle doit sauter aux yeux */
.service--urgence { background: var(--c-navy); color: var(--c-text-invert); }
.service--urgence:hover { background: var(--c-navy-soft); }
.service--urgence .service__title { color: var(--c-text-invert); }
.service--urgence .service__desc { color: var(--c-text-invert-muted); }
.service--urgence .service__icon { background: var(--c-accent); color: #fff; }
.service--urgence:hover .service__icon { background: var(--c-accent-lift); color: #fff; }
.service--urgence .service__list li { border-color: var(--c-line-dark); color: var(--c-text-invert-muted); }

/* ==========================================================================
   Processus — 4 étapes reliées par un filet bleu
   ========================================================================== */

.steps {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 2.5rem);
  counter-reset: step;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step { position: relative; counter-increment: step; }

.step__num {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  background: var(--c-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-accent-lift);
  margin-bottom: 1.15rem;
  position: relative;
  z-index: 1;
}
.step__num::after { content: counter(step, decimal-leading-zero); }

@media (min-width: 800px) {
  .step:not(:last-child) .step__num::before {
    content: '';
    position: absolute;
    left: 100%; top: 50%;
    width: calc(100% + clamp(2rem, 1rem + 3vw, 2.5rem) - 52px);
    height: 2px;
    background: linear-gradient(90deg, var(--c-accent), rgb(78 143 209 / 0.15));
    transform: translateY(-50%);
    margin-left: 12px;
  }
}

.step h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 0.5rem; }
.step p { font-size: var(--text-sm); color: var(--c-text-invert-muted); }

/* ==========================================================================
   Zone desservie
   ========================================================================== */

.zone__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 900px) { .zone__grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; } }

.zone__grid h2 { color: var(--c-navy); }

.zone__cities { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.zone__cities li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.zone__cities li:hover { transform: translateY(-2px); border-color: var(--c-accent); }
.zone__cities li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

.zone__note {
  margin-top: 1.75rem;
  padding: 1.15rem 1.35rem;
  border-left: 3px solid var(--c-accent);
  background: var(--c-paper);
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ==========================================================================
   FAQ — <details> natif, accessible d'office
   ========================================================================== */

.faq { max-width: 52rem; border-top: 1px solid var(--c-line); }

.faq details { border-bottom: 1px solid var(--c-line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--c-navy);
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-accent-deep); }

.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 13px; height: 13px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur-normal) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details[open] summary { color: var(--c-accent-deep); }

.faq details > div {
  padding-bottom: 1.5rem;
  color: var(--c-text-muted);
  max-width: var(--max-prose);
}

/* ==========================================================================
   Formulaire de soumission
   ========================================================================== */

.quote__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 950px) { .quote__grid { grid-template-columns: 0.85fr 1.15fr; } }

.quote__aside ul { display: grid; gap: 1.15rem; margin-top: 2rem; }
.quote__aside li { display: flex; gap: 0.85rem; align-items: flex-start; }
.quote__aside li svg { color: var(--c-accent-lift); flex-shrink: 0; margin-top: 3px; }
.quote__aside li strong { display: block; font-weight: 600; }
.quote__aside li span { font-size: var(--text-sm); color: var(--c-text-invert-muted); }

.form {
  background: var(--c-paper);
  color: var(--c-text);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--c-accent);
}

.form__row { display: grid; gap: 1.15rem; margin-bottom: 1.15rem; }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--c-navy); }
.field label .req { color: var(--c-accent-deep); }

.field input,
.field select,
.field textarea {
  /* width + min-width : sans ça, la taille intrinsèque du champ (surtout du
     <select>, dictée par sa plus longue option) déborde sur petit écran. */
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-paper);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 118px; }
.field select {
  appearance: none;
  cursor: pointer;
  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='%235c6472' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgb(78 143 209 / 0.20);
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea { border-color: var(--c-alert-line); }

.field__error {
  font-size: var(--text-xs);
  color: var(--c-alert);
  font-weight: 500;
}

.form__consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  margin-bottom: 1.35rem;
}
.form__consent input {
  margin-top: 3px;
  accent-color: var(--c-accent);
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* Pot de miel anti-pourriel — hors écran plutôt que display:none */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__status {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  display: none;
}
.form__status[data-state='ok']      { display: block; background: #e6f4ec; color: #1e6b41; }
.form__status[data-state='error']   { display: block; background: var(--c-alert-wash); color: var(--c-alert); }
.form__status[data-state='sending'] { display: block; background: var(--c-paper-warm); color: var(--c-text-muted); }

.btn[aria-busy='true'] { opacity: 0.65; pointer-events: none; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer {
  background: var(--c-navy-deep);
  color: var(--c-text-invert-muted);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
  font-size: var(--text-sm);
}
.site-footer .logo__img { height: 88px; }

.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-line-dark);
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* Accréditation CMMTQ — le logo officiel est en bleus foncés, illisible sur
   le pied de page navy. Plutôt que de le recoloriser (ce qu'une marque de
   certification interdit généralement), on lui donne un fond clair. */
.accreditation {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 20rem;
}
.accreditation img {
  width: 132px;
  height: auto;
  padding: 0.55rem 0.8rem;
  background: var(--c-paper);
  border-radius: var(--r-md);
}
.accreditation span {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--c-steel-light);
}

.footer__grid h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-text-invert);
  margin-bottom: 1.1rem;
}
.footer__grid ul { display: grid; gap: 0.35rem; }
.footer__grid a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__grid a:hover { color: var(--c-accent-lift); }

.footer__bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: var(--text-xs);
}

/* Accès de l'équipe : présent mais volontairement en retrait. Un client qui
   cherche un plombier n'a rien à faire ici. */
.lien-admin {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-md);
  color: var(--c-steel-light);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.lien-admin:hover {
  color: var(--c-text-invert);
  border-color: var(--c-accent);
  background: rgb(78 143 209 / 0.12);
}
.lien-admin svg { flex-shrink: 0; opacity: 0.85; }

/* ==========================================================================
   Révélation au scroll
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Pages de contenu long (politique de confidentialité)
   ========================================================================== */

.prose { max-width: 44rem; }
.prose h1 { font-size: var(--text-3xl); color: var(--c-navy); margin-bottom: 1.25rem; }
.prose h2 {
  font-size: var(--text-xl);
  color: var(--c-navy);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
.prose p { margin-bottom: 1rem; color: var(--c-text-muted); }
.prose strong { color: var(--c-text); font-weight: 600; }
.prose a { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-navy); }

.prose__chapeau { font-size: var(--text-lg); color: var(--c-text); }
.prose__date { font-size: var(--text-sm); color: var(--c-steel); }

.prose__liste { margin: 0 0 1rem; display: grid; gap: 0.55rem; }
.prose__liste li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--c-text-muted);
}
.prose__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* Passage qui mérite d'être remarqué : la communication hors Québec. */
.prose__encadre {
  padding: 1.15rem 1.35rem;
  background: var(--c-accent-wash);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--text-sm);
}

.prose__retour { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }