/* =========================================================
   Page « Devenir agence partenaire » (D-138)
   Tokens : style.css (:root) et theme.css (couleur de marque).
   Logique : propriétés logiques (inline/block) pour le RTL arabe.
   ========================================================= */

:root {
  --ag-error: #8A2A2A;         /* texte d'erreur : contraste AA sur ivoire */
  --ag-ok: #2F5D3A;            /* confirmation */
  --ag-info-bg: rgba(196, 154, 69, .12);
}

body.page-agence { background: var(--ivory); }

/* ---------- Ouverture ---------- */
.ag-hero { padding: 72px 0 40px; background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%); }
.ag-hero-inner { max-width: 760px; }
.ag-hero h1 { margin: 14px 0 16px; font-size: clamp(2.2rem, 4.6vw, 3.4rem); color: var(--brand); }
.ag-sla {
  display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0;
  padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: .92rem; color: var(--brand); font-weight: 500;
}
.ag-sla-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(196, 154, 69, .18); }

/* ---------- Mise en page ---------- */
.ag-wrap { padding: 16px 0 110px; }
.ag-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }

/* ---------- Colonne « parcours » ---------- */
.ag-side {
  position: sticky; top: 110px;
  padding: 30px 28px; border-radius: var(--radius); background: var(--brand); color: var(--ivory);
  box-shadow: var(--shadow);
}
.ag-side h2 { font-size: 1.5rem; color: var(--gold-light); margin: 0 0 18px; }
.ag-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.ag-steps li { display: flex; gap: 14px; align-items: flex-start; }
.ag-steps h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--ivory); font-family: var(--f-body); font-weight: 500; }
.ag-steps p { margin: 0; font-size: .92rem; color: rgba(254, 247, 237, .86); line-height: 1.55; }
.ag-num {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-display); font-size: 1.1rem;
  background: var(--gold-grad); color: var(--brand-deep);
}
.ag-note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(230, 198, 126, .25); font-size: .88rem; color: rgba(254, 247, 237, .8); }

/* ---------- Formulaire ---------- */
.ag-form {
  padding: 36px 36px 30px; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ag-fs { border: 0; margin: 0 0 34px; padding: 0; min-width: 0; }
.ag-fs legend {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; margin-bottom: 20px;
  font-family: var(--f-display); font-size: 1.45rem; font-weight: 600; color: var(--brand);
}
.ag-fs-num {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-body); font-size: .9rem; font-weight: 500; color: var(--brand-deep); background: var(--gold-grad);
}
.ag-form .field-row { gap: 16px; }
.ag-sublabel { margin: 0 0 10px; font-size: .82rem; font-weight: 500; color: var(--brand); letter-spacing: .02em; }
.ag-hint { margin: 10px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.55; }
.ag-hint-doctor { display: none; color: var(--accent-text); }
.ag-form[data-plan="doctor"] .ag-hint-doctor { display: block; }

/* Choix (radio et cases) */
.ag-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ag-choices-multi { margin-top: 22px; }
.ag-choice {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--ivory);
  font-size: .95rem; color: var(--text); transition: border-color .2s ease, background .2s ease;
}
.ag-choice:hover { border-color: var(--gold); }
.ag-choice input { accent-color: var(--brand); width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.ag-choice:has(input:checked) { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(196, 154, 69, .18); }
.ag-choice-block { align-items: flex-start; grid-column: 1 / -1; }
.ag-choice-block > span { display: flex; flex-direction: column; gap: 3px; }
.ag-choice-block strong { font-weight: 500; color: var(--brand); }
.ag-choice-block small { font-size: .85rem; color: var(--muted); line-height: 1.5; }
.ag-choice-block input { margin-top: 3px; }
.ag-choices[role="radiogroup"]:has(.ag-choice-block) { grid-template-columns: 1fr; }

/* Engagements */
.ag-check {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; cursor: pointer;
  font-size: .95rem; color: var(--text); line-height: 1.55;
}
.ag-check input { accent-color: var(--brand); width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; }

/* Erreurs */
.field.is-error input, .ag-choice.is-error, .ag-fs.is-error .ag-check { border-color: var(--ag-error); }
.field.is-error input { border-color: var(--ag-error); box-shadow: 0 0 0 3px rgba(138, 42, 42, .12); }
.ag-err { margin: 2px 0 0; font-size: .84rem; color: var(--ag-error); font-weight: 500; }
fieldset.is-error > .ag-err { margin-top: 0; }

/* Piège à robots : hors de l'écran, non focalisable */
.ag-hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Statut */
.ag-status {
  margin: 0 0 28px; padding: 16px 18px; border-radius: 12px; font-size: .95rem; line-height: 1.55;
  display: grid; gap: 4px; background: var(--ag-info-bg); color: var(--brand); border: 1px solid rgba(196, 154, 69, .3);
}
.ag-status[hidden] { display: none; }
.ag-status strong { font-weight: 600; font-size: 1.05rem; }
.ag-status.is-ok { background: rgba(47, 93, 58, .08); border-color: rgba(47, 93, 58, .35); color: var(--ag-ok); }
.ag-status.is-error { background: rgba(138, 42, 42, .07); border-color: rgba(138, 42, 42, .35); color: var(--ag-error); }

/* Actions */
.ag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 8px; }
.ag-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }
.ag-legal { margin: 0; font-size: .85rem; color: var(--muted); max-width: 42ch; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 920px) {
  .ag-grid { grid-template-columns: 1fr; gap: 28px; }
  .ag-side { position: static; }
}
@media (max-width: 640px) {
  .ag-hero { padding: 52px 0 28px; }
  .ag-form { padding: 26px 20px 24px; }
  .ag-form .field-row, .ag-choices { grid-template-columns: 1fr; flex-direction: column; }
  .ag-fs legend { font-size: 1.28rem; }
  .ag-wrap { padding-bottom: 80px; }
  .ag-bloc-grid { grid-template-columns: 1fr; }
}

/* Slogan et bloc « L'agence des agences » */
.ag-slogan {
  margin: 26px 0 0; max-width: 34ch; font-family: var(--f-display); font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.3; color: var(--brand);
}
.ag-bloc { padding: 88px 0; background: #fff; border-block: 1px solid var(--line); }
.ag-bloc-head { max-width: 680px; margin-bottom: 44px; }
.ag-bloc-head h2 { margin: 12px 0 0; font-size: clamp(2rem, 3.8vw, 2.8rem); color: var(--brand); }
.ag-bloc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ag-bloc-item {
  padding: 30px 28px; border-radius: var(--radius); background: var(--ivory); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.ag-bloc-num { font-family: var(--f-display); font-size: 1.1rem; color: var(--gold-dark); letter-spacing: .08em; }
.ag-bloc-item h3 { margin: 0; font-family: var(--f-body); font-size: 1.08rem; font-weight: 500; color: var(--brand); line-height: 1.35; }
.ag-bloc-item p { margin: 0; font-size: .95rem; color: var(--text); line-height: 1.6; }
@media (max-width: 920px) { .ag-bloc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ag-bloc { padding: 64px 0; } .ag-bloc-grid { grid-template-columns: 1fr; } }

.ag-slogan-note { margin: 10px 0 0; max-width: 60ch; font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* Adresse : le champ de domaine n'apparaît que pour un domaine propre ou un pack */
.ag-f-dom { display: none; }
.ag-form[data-address="own_domain"] .ag-f-dom,
.ag-form[data-address="pack"] .ag-f-dom { display: flex; }

/* Précisions sous les champs : prix, sous-domaine, plan */
.ag-subnote { margin: 4px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.ag-subnote.is-ok { color: var(--ag-ok); font-weight: 500; }
.ag-subnote.is-no { color: var(--ag-error); font-weight: 500; }
.ag-subnote[hidden] { display: none; }
.ag-price { display: block; margin-top: 2px; font-size: .84rem; color: var(--accent-text); font-weight: 500; }
.ag-choice.is-locked { opacity: .5; cursor: not-allowed; }
.ag-choice.is-locked:hover { border-color: var(--line); }

/* ---------- Site hub (plateforme Contessa, D-144) ---------- */
.hub-header { border-bottom: 1px solid var(--line); background: #fff; }
.hub-header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.hub-brand img { display: block; height: 44px; width: auto; }
.hub-nav-cta { padding: 10px 18px; }
.hub-hero { padding: 88px 0 72px; background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%); }
.hub-hero-in { max-width: 860px; }
.hub-title { margin: 14px 0 20px; font-size: clamp(2.2rem, 4.8vw, 3.6rem); color: var(--brand); line-height: 1.15; }
.hub-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 22px; }
.hub-cta-row { margin: 40px 0 0; text-align: center; }
.hub-footer { padding: 36px 0; background: var(--brand); color: var(--ivory); }
.hub-footer-in { display: grid; gap: 10px; text-align: center; }
.hub-footer-tag { margin: 0; font-family: var(--f-display); font-size: 1.2rem; color: var(--gold-light); }
.hub-footer-links { margin: 0; font-size: .9rem; }
.hub-footer-links a { color: var(--ivory); }
@media (max-width: 640px) { .hub-hero { padding: 56px 0 44px; } .hub-header-in { min-height: 64px; } .hub-brand img { height: 36px; } }