/* ============================================================================
   Roy Gervais Beauregard Avocats — feuille de style du site
   Direction : éditorial de cabinet. Serif gravé (Libre Baskerville) pour les
   titres et le lockup de la marque, sans-serif lisible (Source Sans 3) pour le
   texte, bleu marine de la marque en filets et aplats, listes à filets plutôt
   qu'en tuiles. Aucune couleur hors des jetons de tokens.css.
   ========================================================================= */

/* ---------- 1. Réglages généraux ------------------------------------------ */

body {
  font-variant-numeric: proportional-nums;
}

h1, h2 {
  letter-spacing: -0.005em;
}

h2 {
  margin-bottom: 0.65em;
}

.wc-section-head > :last-child {
  margin-bottom: 0;
}

/* Sur-titre : filet de marque court, signature du site. */
.wc-eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin-right: 0.65rem;
  vertical-align: 0.22em;
  background: var(--c-brand);
}

.wc-section--dark .wc-eyebrow::before {
  background: var(--c-brand-on-dark);
}

/* ---------- 2. Lockup de la marque ---------------------------------------- */
/* Reprise fidèle du logo réel : nom gravé, filet, « AVOCATS » très espacé. */

.rg-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
}

.rg-brand__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.76rem + 0.72vw, 1.35rem);
  line-height: 1.1;
  letter-spacing: 0.015em;
  white-space: nowrap;
  color: var(--c-ink);
}

.rg-brand__sub {
  display: block;
  width: 100%;
  padding-top: 4px;
  border-top: 2px solid var(--c-brand);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.15;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-brand-ink);
}

/* ---------- 3. En-tête et navigation -------------------------------------- */

.wc-header {
  border-top: 4px solid var(--c-brand);
}

/* Téléphone dans la navigation : traité comme une coordonnée, pas comme une rubrique. */
.wc-nav__list li.rg-nav__tel a:not(.wc-btn) {
  color: var(--c-brand-ink);
  font-weight: 700;
  white-space: nowrap;
}

/* Entre 900 et 1100 px, la barre horizontale est serrée : on la resserre sans
   jamais passer sous 44 px de hauteur de cible ni sous 14 px de texte. */
@media (min-width: 900px) and (max-width: 1100px) {
  .wc-header__bar { gap: 0.5rem; }
  .rg-brand__name { font-size: 1rem; letter-spacing: 0; }
  .wc-nav__list a:not(.wc-btn) { padding-inline: 0.45rem; font-size: 0.95rem; }
  .wc-nav__cta .wc-btn { padding-inline: 0.85rem; font-size: 1rem; }
  .wc-nav__cta { margin-left: 0.25rem; }
}

@media (max-width: 899.98px) {
  .wc-nav__list li.rg-nav__tel a:not(.wc-btn) { font-size: 1.05rem; }
}

@media (max-width: 400px) {
  .rg-brand__name { font-size: 0.9rem; letter-spacing: 0; }
  .rg-brand__sub { font-size: 0.875rem; letter-spacing: 0.2em; }
  .wc-nav__toggle { padding-inline: 0.6rem; }
}

/* ---------- 4. Héros de l'accueil ----------------------------------------- */

.rg-hero {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.rg-hero .wc-split {
  align-items: start;
}

.rg-hero h1 {
  max-width: 15ch;
  margin-bottom: 0.45em;
}

.rg-hero .wc-lead {
  max-width: 48ch;
  color: var(--c-ink);
}

.rg-hero .wc-actions {
  margin-top: 1.75rem;
}

/* Sur petit écran, les actions passent en pleine largeur : cibles au pouce. */
@media (max-width: 599.98px) {
  .rg-hero .wc-actions .wc-btn,
  .rg-cta .wc-actions .wc-btn,
  .rg-pagehead .wc-actions .wc-btn { width: 100%; }
}

/* Carte « Joindre le cabinet » : contenu réel, jamais un bloc décoratif. */
.rg-card {
  background: var(--c-surface);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid var(--c-brand);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  box-shadow: 0 12px 30px rgba(var(--c-dark-rgb), 0.07);
}

.rg-card__title {
  font-size: 1.25rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.rg-card .wc-contact {
  margin-bottom: 1.5rem;
}

.rg-card .wc-contact dd {
  line-height: 1.5;
}

/* ---------- 5. Le cabinet : texte + engagement ---------------------------- */

#cabinet .wc-section-head {
  margin-bottom: 1.5rem;
}

#cabinet p {
  max-width: 56ch;
}

.rg-pull {
  background: var(--c-surface-alt);
  border-left: 4px solid var(--c-brand);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
}

.rg-pull__label {
  margin: 0 0 0.7rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand-ink);
}

.rg-pull__text {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--c-ink);
  max-width: 34ch;
}

/* ---------- 6. Domaines de droit (bande sombre) --------------------------- */

/* Titre à gauche, index des domaines à droite : la bande sombre est occupée
   sur toute sa largeur, et les 10 domaines tombent exactement en 5 + 5. */
.rg-domsplit {
  align-items: start;
}

.rg-domsplit .wc-section-head {
  margin-bottom: 0;
}

.rg-domains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.rg-domains li {
  max-width: none;
  margin: 0;
  padding: 0.95rem 0;
  break-inside: avoid;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.15rem);
  line-height: 1.35;
  color: var(--c-on-dark);
}

.rg-domains li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  margin-right: 0.8rem;
  vertical-align: 0.3em;
  background: var(--c-brand-on-dark);
}

@media (min-width: 620px) {
  .rg-domains { grid-template-columns: 1fr 1fr; }
}

/* ---------- 7. Relance de fin de page ------------------------------------- */

/* Bande de clôture centrée : le reste du site est aligné à gauche, mais une
   relance alignée à gauche laisserait la moitié droite de la bande vide. */
.rg-cta {
  text-align: center;
}

.rg-cta .wc-container {
  max-width: 860px;
}

.rg-cta .wc-section-head {
  margin: 0 auto 1.75rem;
  max-width: none;
}

.rg-cta .wc-lead {
  margin-inline: auto;
  max-width: 54ch;
}

.rg-cta .wc-actions {
  justify-content: center;
}

.rg-cta__addr {
  margin: 1.6rem auto 0;
  font-size: 0.98rem;
  color: var(--c-muted);
}

/* ---------- 8. Page Contact ----------------------------------------------- */

.rg-pagehead {
  padding-block: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
}

.rg-pagehead h1 {
  max-width: 14ch;
  margin-bottom: 0.4em;
}

.rg-pagehead .wc-lead {
  max-width: 54ch;
}

.rg-pagehead .wc-actions {
  margin-top: 1.75rem;
}

#coordonnees .wc-contact {
  margin-bottom: 0;
}

#coordonnees .wc-contact dd {
  line-height: 1.5;
}

.wc-map .wc-btn {
  justify-self: start;
}

.rg-map__cap {
  margin: 0;
  font-size: 0.95rem;
  color: var(--c-muted);
}

/* Formulaires : titre et explication à gauche, champs à droite — la bande est
   occupée sur toute sa largeur plutôt qu'à moitié vide. */
.rg-formsplit {
  align-items: start;
}

.rg-formsplit .wc-section-head {
  margin-bottom: 1.1rem;
}

.rg-aside {
  margin: 0;
  color: var(--c-muted);
  max-width: 40ch;
}

.rg-aside a {
  font-weight: 700;
  white-space: nowrap;
}

/* Les deux formulaires portent le même traitement sur toutes les pages. */
.wc-form {
  max-width: 680px;
}

.wc-form [type="submit"] {
  margin-top: 0.5rem;
}

/* ---------- 9. Pied de page ------------------------------------------------ */

/* Le kit n'éclaircit `.wc-muted` que dans les sections sombres : on le fait
   aussi dans le pied de page, sinon le gris passe sous le seuil AA. */
.wc-footer .wc-muted {
  color: var(--c-on-dark-muted);
}

.rg-brand--footer {
  margin: 0 0 0.9rem;
  max-width: none;
}

/* Dans le pied, la colonne peut être étroite : le nom se replie plutôt que de
   provoquer un débordement horizontal. */
.rg-brand--footer .rg-brand__name {
  color: var(--c-on-dark);
  white-space: normal;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
}

.rg-brand--footer .rg-brand__sub {
  border-top-color: var(--c-brand-on-dark);
  color: var(--c-on-dark-muted);
}

.rg-footer__addr {
  margin: 0.7rem 0 0;
  font-style: normal;
  line-height: 1.5;
  color: var(--c-on-dark-muted);
}

/* ---------- 10. Barre d'actions mobile ------------------------------------ */

@media (max-width: 899.98px) {
  .wc-actionbar a {
    letter-spacing: 0.01em;
  }
}