/* ==========================================================================
   MyPC Professionnels — composants de la page de contact (8 octobre 2026)
   Design de la refonte « C mixte » (validée le 7 octobre 2026), repris de
   site/particuliers/assets/style.css et allégé : seuls restent les
   composants de cette page unique (en-tête sans menu, bandeau des pages
   internes sans fil d'Ariane, coordonnées, formulaire, pied réduit).
   Les sections gardent la numérotation de la feuille particuliers pour
   faciliter la comparaison ; les sections absentes sont signalées.
   Ajouts propres au pro, marqués « (pro) » : accroche du bandeau, numéro
   visible dans le bouton téléphone dès 24em, carte des coordonnées.
   Règle : aucune couleur ni taille écrite en dur, tout vient de tokens.css
   (copie identique de site/particuliers/assets/tokens.css). Seules
   exceptions : les seuils des @media / @container, les valeurs neutres
   0 / 100 % / 1fr / auto, et les icônes de la zone d'état du formulaire en
   data-URI SVG (masques, sans couleur : la teinte vient du jeton).
   Mobile d'abord. Seuils : 48em (768 px), 64em (1024 px) ; en-tête :
   requêtes de conteneur (24em, 48em).
   Classes posées par assets/site.js : .is-loading (bouton Envoyer),
   .is-sending / .is-success / .is-error (zone d'état du formulaire).
   ========================================================================== */

/* --- 1. Base ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--esp-4));
}

body {
  margin: 0;
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--police-texte);
  font-size: var(--fs-2);
  font-weight: var(--graisse-normale);
  line-height: var(--lh-texte);
  font-kerning: normal;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-titre);
  color: var(--c-marque);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--esp-4); }
address { font-style: normal; }

a {
  color: var(--c-marque);
  text-decoration-thickness: var(--trait-fin);
  text-underline-offset: var(--soulignement-decalage);
}
a:hover { text-decoration-thickness: var(--trait-moyen); }

:focus-visible {
  outline: var(--focus-largeur) solid var(--c-focus);
  outline-offset: var(--focus-decalage);
}

/* Zones sombres (bandeau photo, pied) : l'anneau passe à l'orange du logo */
.page-head,
.footer-bar { --c-focus: var(--c-focus-inverse); }

.sr-only {
  position: absolute;
  width: var(--trait-fin);
  height: var(--trait-fin);
  margin: calc(var(--trait-fin) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Lien d'évitement : pastille marine ; au focus, anneau orange. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--esp-4);
  top: var(--esp-2);
  z-index: var(--z-evitement);
  padding: var(--esp-2) var(--esp-4);
  background: var(--c-marque);
  color: var(--c-texte-inverse);
  border-radius: var(--rayon-2);
  font-weight: var(--graisse-forte);
  transform: translateY(calc(-100% - var(--esp-4)));
}
.skip-link:focus {
  --c-focus: var(--c-focus-inverse);
  transform: none;
  color: var(--c-texte-inverse);
}

.container {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--gouttiere-large));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
@media (min-width: 48em) {
  .container { padding-inline: var(--gouttiere-large); }
}

.icon {
  width: var(--icone-1);
  height: var(--icone-1);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icone-trait);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: var(--icone-2); height: var(--icone-2); }

.nowrap { white-space: nowrap; }

/* --- 2. En-tête (sans menu : le site pro n'a qu'une page) -------------------- */
.site-header {
  container: header / inline-size;
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--c-fond);
  box-shadow: var(--ombre-entete);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--hauteur-entete);
}

.brand {
  display: inline-flex;
  align-items: center;
  margin-inline-end: auto;
  padding-block: var(--esp-2);
  border-radius: var(--rayon-2);
}
/* Le logo long (marine et orange), agrandi dès 48em : sans menu, la place
   ne manque jamais. */
.brand__logo { height: var(--hauteur-logo); width: auto; }
@container header (min-width: 48em) {
  .brand__logo { height: var(--hauteur-logo-large); }
}

/* Bouton téléphone : pilule fine de A */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-width: var(--cible-tactile);
  min-height: var(--cible-tactile);
  padding: 0 var(--esp-3);
  border: var(--trait-fin) solid var(--c-bordure-forte);
  border-radius: var(--rayon-pilule);
  background: var(--c-fond);
  color: var(--c-marque);
  font: inherit;
  font-weight: var(--graisse-moyenne);
  line-height: var(--lh-titre);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.icon-btn:hover {
  background: var(--c-surface-marque);
  border-color: var(--c-marque);
  color: var(--c-marque);
  text-decoration: none;
}
.icon-btn:active { background: var(--c-bordure); }

/* (pro) Sans menu à côté, le numéro s'affiche dès que la barre le permet
   (24em = 384 px) ; en dessous, l'icône seule (nom accessible : aria-label). */
.header-call__num { display: none; }
@container header (min-width: 24em) {
  .header-call { padding-inline: var(--esp-4); }
  .header-call__num { display: inline; font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* --- 3. Boutons (pilules de A, sans relief) : principal seul ----------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--cible-tactile);
  padding: var(--esp-2) var(--esp-5);
  border: var(--trait-moyen) solid transparent;
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--c-marque);
  font-family: var(--police-texte);
  font-size: var(--fs-2);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-titre);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duree) var(--courbe),
    border-color var(--duree) var(--courbe),
    color var(--duree) var(--courbe),
    transform var(--duree) var(--courbe);
}
.btn:hover { text-decoration: none; }
.btn .icon--arrow { transition: transform var(--duree) var(--courbe); }
.btn:hover .icon--arrow { transform: translateX(var(--esp-1)); }

/* Principal : orange d'action, texte marine foncé (jamais blanc) */
.btn--primary { background: var(--c-accent); color: var(--c-sur-accent); }
.btn--primary:hover { background: var(--c-accent-survol); color: var(--c-sur-accent); }
.btn--primary:active { background: var(--c-accent-actif); transform: translateY(var(--trait-fin)); }

.btn--lg { min-height: calc(var(--cible-tactile) + var(--esp-1)); padding-inline: var(--esp-6); }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--c-desactive-fond);
  border-color: transparent;
  color: var(--c-desactive-texte);
  cursor: not-allowed;
  transform: none;
}
.btn:disabled .icon--arrow { transform: none; }

/* Envoi en cours : bouton orange, roue + libellé inchangé, non cliquable */
.btn.is-loading,
.btn.is-loading:disabled {
  background: var(--c-accent);
  border-color: transparent;
  color: var(--c-sur-accent);
  cursor: progress;
}
.spinner {
  width: var(--icone-1);
  height: var(--icone-1);
  flex: none;
  border: var(--trait-moyen) solid var(--c-bordure);
  border-top-color: currentColor;
  border-radius: var(--rayon-pilule);
  animation: tourne var(--duree-rotation) linear infinite;
}
@keyframes tourne { to { transform: rotate(1turn); } }

/* --- 4 à 6. Accueils et sections : sans objet sur la page pro ---------------- */

/* --- 7. Cartes (blanches, bordure fine, ombre légère) ------------------------ */
.card {
  background: var(--c-fond);
  border: var(--trait-fin) solid var(--c-bordure);
  border-radius: var(--rayon-3);
  box-shadow: var(--ombre-1);
  padding: var(--esp-5);
}
@media (min-width: 48em) { .card { padding: var(--esp-6); } }

/* --- 8. Coordonnées (éléments de la bande « Infos pratiques ») -------------- */
.infos__subtitle {
  margin-bottom: var(--esp-4);
  font-family: var(--police-texte);
  color: var(--c-texte-2);
  font-size: var(--fs-1);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
}

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); align-items: start; }
.contact-list li { display: flex; gap: var(--esp-3); align-items: flex-start; }
.contact-list .icon { margin-top: var(--esp-1); color: var(--c-marque); }
.contact-list a { font-weight: var(--graisse-moyenne); }
/* Situation de la commune, sous l'adresse (hors du lien Google Maps) */
.contact-list__situation { display: block; color: var(--c-texte-2); }

.hours { margin: 0; display: grid; font-variant-numeric: tabular-nums; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-2);
  border-bottom: var(--trait-fin) solid var(--c-bordure);
}
.hours div:first-child { padding-top: 0; }
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--c-texte-2); }
.hours dd { margin: 0; color: var(--c-texte); font-weight: var(--graisse-moyenne); white-space: nowrap; }

/* (pro) Carte des coordonnées, sous la carte téléphone : e-mail et adresse,
   puis horaires, séparés par un filet. */
.coords { margin-top: var(--esp-5); }
.coords__block + .coords__block {
  margin-top: var(--esp-5);
  padding-top: var(--esp-5);
  border-top: var(--trait-fin) solid var(--c-bordure);
}
/* Tablette (une seule colonne de page, carte large) : les deux blocs côte à côte. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .coords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-7); }
  .coords__block + .coords__block { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* --- 9. Encadrés : sans objet (zone d'état du formulaire en section 12) ---- */

/* --- 10. Bandeau des pages internes : photo sous voile (A) ------------------ */
.page-head {
  position: relative;
  isolation: isolate;
  padding-block: var(--esp-6) var(--esp-7);
  background: var(--c-marque-fonce) url("media/page-title-90e3efa8.jpg") center / cover no-repeat;
  color: var(--c-texte-inverse);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-voile);
  background: var(--c-voile-fort);
}
/* Pas de fil d'Ariane au-dessus : le titre n'a pas de marge haute. */
.page-head__title {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  color: var(--c-texte-inverse);
  font-size: var(--fs-6);
  line-height: var(--lh-serre);
}
/* (pro) Accroche sous le titre : texte secondaire clair du voile fort,
   comme le fil d'Ariane des particuliers (5,35:1 au pire cas). */
.page-head__lead {
  max-width: var(--mesure);
  margin-top: var(--esp-3);
  color: var(--c-texte-inverse-2);
  font-size: var(--fs-3);
  line-height: var(--lh-titre);
}
/* (pro) Bandeau centré dont le titre est la phrase d'invitation elle-même
   (demande du propriétaire, 8 octobre 2026 : pas de titre « MyPC
   Professionnels »). Voile uniforme : le texte occupe le centre. */
.page-head--centre { text-align: center; }
.page-head__title--phrase {
  max-width: var(--mesure);
  margin-inline: auto;
  font-size: var(--fs-4);
  line-height: var(--lh-titre);
}
@media (min-width: 48em) {
  .page-head { padding-block: var(--esp-7) var(--esp-8); }
  .page-head::before { background: var(--voile-bandeau); }
  .page-head--centre::before { background: var(--c-voile-fort); }
  .page-head__title { font-size: var(--fs-7); }
  .page-head__title--phrase { font-size: var(--fs-5); }
  .page-head__lead { font-size: var(--fs-4); }
}

/* --- 11. Tarifs : sans objet ------------------------------------------------ */

/* --- 12. Contact et formulaire ----------------------------------------------- */
.contact { display: grid; gap: var(--esp-7); padding-block: var(--esp-7) var(--esp-8); }
.contact__lead { color: var(--c-marque); font-size: var(--fs-3); font-weight: var(--graisse-forte); }

.call-card {
  margin-top: var(--esp-5);
  padding: var(--esp-5);
  background: var(--c-fond);
  border: var(--trait-fin) solid var(--c-bordure);
  border-radius: var(--rayon-3);
  box-shadow: var(--ombre-1);
}
.call-card__number {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--cible-tactile);
  margin-top: var(--esp-2);
  font-family: var(--police-titre);
  font-size: var(--fs-5);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-titre);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.call-card__number:hover { text-decoration: underline; }

.form-card__title { font-size: var(--fs-5); }
.form { display: grid; gap: var(--esp-5); margin-top: var(--esp-5); }

/* Zone d'état (role=status) : toujours dans le flux, même vide, pour que les
   lecteurs d'écran annoncent ses changements. Habillage d'encadré (A) ;
   le script n'écrit que du texte, l'icône est donc portée par ::before. */
.form-status {
  position: relative;
  padding: var(--esp-4) var(--esp-5) var(--esp-4) calc(var(--esp-4) + var(--icone-1) + var(--esp-3));
  background: var(--c-surface-marque);
  border-radius: var(--rayon-2);
  box-shadow: inset var(--trait-fort) 0 0 var(--c-marque);
  color: var(--c-texte);
}
.form-status::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--esp-4);
  top: calc(var(--esp-4) + var(--esp-1));
  width: var(--icone-1);
  height: var(--icone-1);
  background: var(--c-marque);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-status:empty {
  min-height: 0;
  margin-block-end: calc(var(--esp-5) * -1);
  padding: 0;
  background: none;
  box-shadow: none;
}
.form-status:empty::before { content: none; }
.form-status.is-sending::before {
  background: none;
  -webkit-mask: none;
  mask: none;
  border: var(--trait-moyen) solid var(--c-bordure);
  border-top-color: var(--c-marque);
  border-radius: var(--rayon-pilule);
  animation: tourne var(--duree-rotation) linear infinite;
}
.form-status.is-success {
  background: var(--c-succes-fond);
  box-shadow: inset var(--trait-fort) 0 0 var(--c-succes);
  color: var(--c-succes);
  font-weight: var(--graisse-moyenne);
}
.form-status.is-success::before {
  background: var(--c-succes);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.5'/%3E%3C/svg%3E");
}
.form-status.is-error {
  background: var(--c-erreur-fond);
  box-shadow: inset var(--trait-fort) 0 0 var(--c-erreur);
  color: var(--c-erreur);
  font-weight: var(--graisse-moyenne);
}
.form-status.is-error::before {
  background: var(--c-erreur);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}
.form-status a { color: inherit; }

.field { display: grid; gap: var(--esp-2); }
.field__label { font-weight: var(--graisse-forte); color: var(--c-texte); line-height: var(--lh-titre); }
.field__hint { font-weight: var(--graisse-normale); color: var(--c-texte-2); }

.input {
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--esp-2) var(--esp-4);
  background: var(--c-fond);
  border: var(--trait-fin) solid var(--c-bordure-forte);
  border-radius: var(--rayon-2);
  color: var(--c-texte);
  font: inherit;
  line-height: var(--lh-titre);
  transition: border-color var(--duree) var(--courbe), background-color var(--duree) var(--courbe);
}
textarea.input { min-height: var(--hauteur-zone-message); padding-block: var(--esp-3); resize: vertical; line-height: var(--lh-texte); }
.input:hover { border-color: var(--c-texte-2); }
.input:focus-visible {
  border-color: var(--c-marque);
  outline: var(--focus-largeur) solid var(--c-focus);
  outline-offset: 0;
}
.input[aria-invalid="true"],
.input:user-invalid {
  border-color: var(--c-erreur);
  border-width: var(--trait-moyen);
  background: var(--c-erreur-fond);
}
.input[aria-invalid="true"]:focus-visible { outline-color: var(--c-erreur); }

.form__submit { justify-self: start; }

/* Champ piège anti-robots : hors de vue, jamais display:none seul */
.hp {
  position: absolute;
  inset-inline-start: 0;
  width: var(--trait-fin);
  height: var(--trait-fin);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Deux colonnes dès 1024 px : coordonnées (5/12), formulaire (7/12).
   Pas de colonne collante ici : avec les horaires, elle dépasserait la
   hauteur des petits écrans. */
@media (min-width: 64em) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esp-8); padding-block: var(--esp-8) var(--esp-9); align-items: start; }
  .contact__lead { font-size: var(--fs-4); }
  .contact__aside .call-card__number { font-size: var(--fs-6); }
}

/* --- 13. Pied de page réduit (marque + liens), marine foncé de A ------------- */
.footer-bar {
  padding-block: var(--esp-6);
  background: var(--c-marque-fonce);
  color: var(--c-texte-inverse-2);
}
.footer-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
}
/* Marque sans lien : le site pro n'a qu'une page. */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  color: var(--c-texte-inverse);
  font-family: var(--police-titre);
  font-size: var(--fs-3);
  font-weight: var(--graisse-forte);
}
.footer-brand__tile {
  display: grid;
  place-items: center;
  width: var(--tuile-logo);
  height: var(--tuile-logo);
  padding: var(--esp-1);
  border-radius: var(--rayon-2);
  background: var(--c-fond);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--esp-4); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  color: var(--c-texte-inverse);
  text-decoration: none;
  border-radius: var(--rayon-1);
}
.footer-links a:hover { text-decoration: underline; text-decoration-thickness: var(--trait-fin); }

/* --- 14. Pages de texte : sans objet ---------------------------------------- */

/* --- 15. Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
  .btn:hover .icon--arrow { transform: none; }
  /* roue figée : un quart de cercle reste visible, l'état est dit par le texte */
  .spinner, .form-status.is-sending::before { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}