/* ============================================================
   TOUITIGROUP — pro.css
   Page « Entreprises & Architectes » (/fr/ et /ar/entreprises-architectes/)
   + bandeau B2B de l'accueil (.pro-band, index.html et ar/index.html).
   Réutilise service.css (service-hero, tg-section, tg-feature-list,
   prose, tg-btn) ; ici seulement les compléments propres à la page.
   Couleurs via tokens.css ; RTL par propriétés logiques.
   ============================================================ */

/* ----- 1. Hero : image de fond décorative (IMG-094, alt="", aria-hidden,
   emblème du gilet effacé) + voile sombre + contenu (même principe que machines.css).
   Ordre des calques dans .service-hero (isolation: isolate) : image 0, voile 1, contenu 2.
   « .pro-hero .pro-hero-bg » : prioritaire sur « .img-wrap » (images.css). */
.pro-hero {
  display: grid;
  align-content: center;
  min-height: 500px;
  background: var(--tg-color-black);
}
.pro-hero .pro-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pro-hero .pro-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pro-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(10,10,10,0.90) 0%, rgba(10,10,10,0.75) 50%, rgba(10,10,10,0.85) 100%);
}
.pro-hero > .container {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .pro-hero { min-height: auto; }
  /* Voile plus foncé : texte lisible sur toute la largeur */
  .pro-hero-overlay { background: linear-gradient(180deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.82) 50%, rgba(10,10,10,0.92) 100%); }
}
.pro-hero .service-hero__title { max-width: 18ch; }
:lang(ar) .pro-hero .service-hero__title { max-width: 20ch; }

/* ----- 2. Pour qui ? (4 cartes) ----- */
@media (min-width: 1280px) {
  .pro-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ----- 3. Nos ouvrages (liens vers les services) ----- */
.pro-ouvrages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-space-md);
  list-style: none;
}
.pro-ouvrages a {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-xs);
  height: 100%;
  padding: var(--tg-space-lg);
  text-decoration: none;
  background: var(--service-surface);
  border: 1px solid var(--service-border);
  border-inline-start: 3px solid var(--tg-color-gold);
  border-radius: var(--tg-radius-sm);
  transition: border-color var(--tg-duration) var(--tg-ease), box-shadow var(--tg-duration) var(--tg-ease);
}
.pro-ouvrages a:hover { border-color: var(--tg-color-gold-dark); box-shadow: var(--tg-shadow-card-soft); }
.pro-ouvrages a:focus-visible { outline: var(--tg-focus-ring); outline-offset: var(--tg-focus-offset); }
.pro-ouvrages__title {
  font-size: var(--tg-text-lg);
  font-weight: var(--tg-weight-semibold);
  color: var(--service-text);
}
.pro-ouvrages__title::after { content: ' →'; color: var(--service-accent); }
:lang(ar) .pro-ouvrages__title::after { content: ' ←'; }
.pro-ouvrages__text { font-size: var(--tg-text-sm); line-height: 1.7; color: var(--service-text-muted); }

/* ----- 4. Modalités de collaboration ----- */
.pro-modalites {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-space-lg);
}
.pro-modalites__card {
  padding: var(--tg-space-lg);
  background: var(--tg-color-dark-2);
  border: 1px solid var(--tg-color-border);
  border-top: 2px solid var(--tg-color-gold);
  border-radius: var(--tg-radius-sm);
}
.pro-modalites__card h3 { margin-bottom: var(--tg-space-sm); font-size: var(--tg-text-lg); color: var(--tg-color-text); }
.pro-modalites__card p { font-size: var(--tg-text-sm); line-height: 1.75; color: var(--tg-color-text-muted); }
.pro-convention {
  margin-top: var(--tg-space-xl);
  padding: var(--tg-space-lg);
  background: var(--tg-color-gold-light);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-sm);
}
.pro-convention__title { margin-bottom: var(--tg-space-md); font-size: var(--tg-text-lg); color: var(--tg-color-gold); }
.pro-convention__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-space-sm) var(--tg-space-xl);
  list-style: none;
}
.pro-convention__list li {
  position: relative;
  padding-inline-start: var(--tg-space-lg);
  font-size: var(--tg-text-sm);
  line-height: 1.7;
  color: var(--tg-color-text);
}
.pro-convention__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--tg-color-gold);
  border-radius: 50%;
}

/* ----- 5. Processus (5 étapes) ----- */
.pro-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-space-md);
  list-style: none;
  counter-reset: none;
}
.pro-steps__item {
  padding: var(--tg-space-lg);
  background: var(--service-surface);
  border: 1px solid var(--service-border);
  border-radius: var(--tg-radius-sm);
}
.pro-steps__num {
  display: block;
  margin-bottom: var(--tg-space-sm);
  font-size: var(--tg-text-h3);
  font-weight: var(--tg-weight-extrabold);
  line-height: 1;
  color: var(--service-accent);
}
.pro-steps__item h3 { margin-bottom: var(--tg-space-xs); font-size: var(--tg-text-base); color: var(--service-text); }
.pro-steps__item p { font-size: var(--tg-text-sm); line-height: 1.7; color: var(--service-text-muted); }
.pro-note {
  margin-top: var(--tg-space-lg);
  font-size: var(--tg-text-sm);
  font-style: italic;
  color: var(--service-text-muted);
}
:lang(ar) .pro-note { font-style: normal; }

/* ----- 6. Notre approche ----- */
.pro-approche p { font-size: var(--tg-text-lg); line-height: 1.8; }

/* ----- 7. Formulaire B2B ----- */
.pro-form-section { border-top: 1px solid var(--tg-color-border); }
.pro-form {
  padding: clamp(var(--tg-space-lg), 4vw, var(--tg-space-xl));
  background: var(--tg-color-dark);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-md);
}
.pro-form__intro { margin-bottom: var(--tg-space-lg); font-size: var(--tg-text-sm); color: var(--tg-color-text-muted); }
.pro-form__req { color: var(--tg-color-gold); }
.pro-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-space-md);
}
.pro-field { display: flex; flex-direction: column; gap: var(--tg-space-xs); }
.pro-field--full,
.pro-consent,
.pro-form__actions,
.pro-form__status { grid-column: 1 / -1; }
.pro-field label { font-size: var(--tg-text-sm); font-weight: var(--tg-weight-medium); color: var(--tg-color-text); }
.pro-form__grid input:not([type="checkbox"]),
.pro-form__grid select,
.pro-form__grid textarea {
  width: 100%;
  min-height: var(--tg-control-h);
  padding: 0.75rem var(--tg-space-md);
  font: inherit;
  font-size: var(--tg-text-base); /* 16 px : pas de zoom automatique sur iOS */
  color: var(--tg-color-text);
  background: var(--tg-color-black);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-sm);
  transition: border-color var(--tg-duration) var(--tg-ease);
}
.pro-form__grid textarea { min-height: 7.5rem; resize: vertical; }
.pro-form__grid select {
  appearance: none;
  cursor: pointer;
  padding-inline-end: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--tg-color-gold) 50%),
                    linear-gradient(135deg, var(--tg-color-gold) 50%, transparent 50%);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: right 1.25rem center, right 0.9rem center;
}
[dir="rtl"] .pro-form__grid select { background-position: left 0.9rem center, left 1.25rem center; }
.pro-form__grid select option { color: var(--tg-color-text); background: var(--tg-color-dark-2); }
.pro-form__grid ::placeholder { color: var(--tg-color-text-subtle); }
.pro-form__grid input:focus-visible,
.pro-form__grid select:focus-visible,
.pro-form__grid textarea:focus-visible {
  outline: var(--tg-focus-ring);
  outline-offset: 1px;
  border-color: var(--tg-color-gold);
}
.pro-form__grid .is-touched:invalid { border-color: var(--tg-color-gold-highlight); }
.pro-consent {
  display: flex;
  gap: var(--tg-space-sm);
  align-items: flex-start;
  font-size: var(--tg-text-sm);
  line-height: 1.6;
  color: var(--tg-color-text-muted);
}
.pro-consent input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--tg-color-gold);
  cursor: pointer;
}
.pro-consent a,
.pro-form__note a,
.pro-form__status a { color: var(--tg-color-gold); }
.pro-form__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--tg-space-md); margin-top: var(--tg-space-xs); }
.pro-form__actions .tg-btn { flex: 1 1 16rem; white-space: normal; }
/* Bouton WhatsApp + aide juste en dessous (le bloc prend la place du bouton dans la rangée) */
.pro-form__whatsapp-block {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: var(--tg-space-sm);
}
.pro-form__actions .pro-form__whatsapp-block .tg-btn { flex: 0 0 auto; }
.pro-form__hint {
  margin: 0;
  font-size: var(--tg-text-sm);
  font-style: normal; /* pas d'italique : Cairo n'en a pas */
  line-height: 1.5;
  color: var(--tg-color-text-muted);
}
.pro-form__status {
  padding: var(--tg-space-md);
  font-size: var(--tg-text-sm);
  color: var(--tg-color-text);
  background: var(--tg-color-gold-light);
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-sm);
}
.pro-form__status[hidden] { display: none; }
.pro-form__note { margin-top: var(--tg-space-md); font-size: var(--tg-text-sm); color: var(--tg-color-text-muted); }

@media (min-width: 768px) {
  .pro-ouvrages { grid-template-columns: repeat(2, 1fr); }
  .pro-modalites { grid-template-columns: repeat(3, 1fr); }
  .pro-convention__list { grid-template-columns: repeat(2, 1fr); }
  .pro-steps { grid-template-columns: repeat(2, 1fr); }
  .pro-form__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pro-ouvrages { grid-template-columns: repeat(3, 1fr); }
  .pro-convention__list { grid-template-columns: repeat(3, 1fr); }
  .pro-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .pro-steps { grid-template-columns: repeat(5, 1fr); }
}

/* ----- Bandeau B2B de l'accueil (après la section Services) ----- */
.pro-band {
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--tg-container-pad);
  text-align: center;
  background: var(--tg-color-black);
  border-top: 1px solid var(--tg-color-border-strong);
  border-bottom: 1px solid var(--tg-color-border-strong);
}
.pro-band__inner { max-width: 46rem; margin-inline: auto; }
.pro-band__eyebrow {
  margin-bottom: var(--tg-space-sm);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: var(--tg-tracking-wider);
  text-transform: uppercase;
  color: var(--tg-color-gold);
}
:lang(ar) .pro-band__eyebrow, body.ar .pro-band__eyebrow { letter-spacing: 0; font-size: var(--tg-text-sm); }
.pro-band__title {
  margin-bottom: var(--tg-space-md);
  font-size: var(--tg-text-h2);
  font-weight: var(--tg-weight-bold);
  line-height: 1.2;
  color: var(--tg-color-text);
}
.pro-band__text {
  margin-bottom: var(--tg-space-lg);
  font-size: var(--tg-text-base);
  line-height: 1.8;
  color: var(--tg-color-text-muted);
}
.pro-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tg-control-h);
  padding: var(--tg-space-sm) var(--tg-space-xl);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: var(--tg-tracking-wide);
  text-decoration: none;
  color: var(--tg-color-black);
  background: var(--tg-color-gold-gradient);
  border-radius: var(--tg-radius-sm);
  transition: box-shadow var(--tg-duration) var(--tg-ease);
}
.pro-band__btn:hover { box-shadow: var(--tg-shadow-gold); }
.pro-band__btn:focus-visible { outline: var(--tg-focus-ring); outline-offset: var(--tg-focus-offset); }
/* Accueil bilingue (index.html) : un seul bouton visible selon la langue active */
body:not(.ar) .pro-band__btn.ar-text,
body.ar .pro-band__btn.fr-text { display: none; }