/* ==========================================================================
   JustiComm · site de démonstration « Nonobstant Avocats » (cabinet fictif)
   Lien depuis la page Sites internet. Une page complète, avec sa propre identité
   (marine et bordeaux, Spectral et Public Sans) : on la parcourt comme le site d'un vrai cabinet.
   L'en-tête et le pied de JustiComm sont masqués ; un ruban en haut rappelle la démonstration.
   Annotations de JustiComm (règles appliquées) : visibles sans JavaScript, masquables.
   Préfixe : va-
   ========================================================================== */

/* Polices du cabinet fictif (SIL OFL : polices/OFL-spectral.txt et polices/OFL-public-sans.txt) */
@font-face { font-family: "Spectral"; src: url("../polices/spectral-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../polices/spectral-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../polices/spectral-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../polices/public-sans-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

body:has(.va) .entete, body:has(.va) .pied, body:has(.va) .action-fixe { display: none !important; }

.va {
  /* Identité du cabinet fictif, distincte de celle de JustiComm (Octave, Raoudha, 24/10/2026) : marine et bordeaux, fonds blanc et gris bleuté,
     Spectral et Public Sans. Le ruban, les annotations et la bulle de démonstration gardent la charte de JustiComm. */
  --va-marine: #1B2A3A;
  --va-marine-2: #2B3E54;
  --va-brume: #EDF1F5;
  --va-blanc: #FFFFFF;
  --va-bordeaux: #8C2B3A;
  --va-bordeaux-texte: #8C2B3A;   /* 8,3:1 sur blanc, 7,3:1 sur brume */
  --va-clair: #B8CCE0;            /* accent sur marine : 8,9:1 */
  --va-encre: #1C232B;
  --va-gris: #4E5866;             /* 7,2:1 sur blanc */
  --va-filet: #D3DAE2;
  --va-bord: #7F8996;             /* bordures des champs et des choix : 3,5:1 sur blanc */
  --va-police-titre: "Spectral", Georgia, serif;
  --va-police-texte: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  display: block; background: var(--va-blanc); color: var(--va-encre);
  font-family: var(--va-police-texte); font-size: 1.0625rem; line-height: 1.6;
}
.va *, .va *::before, .va *::after { box-sizing: border-box; }
.va-conteneur { width: min(76rem, 100% - 2 * var(--marge)); margin-inline: auto; }
.va-section { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* Ruban de démonstration (aux couleurs de JustiComm) */
.va-ruban { font-family: var(--f-texte); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; padding: 0.7rem var(--marge); background: var(--petrole-profond); color: var(--creme); font-size: 0.9375rem; }
.va-ruban__texte { margin: 0; }
.va-ruban__marque { margin-right: 0.6rem; padding: 0.15rem 0.55rem; border: 1px solid var(--or); font: 600 0.8125rem / 1.4 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; color: var(--or-clair); }
.va-ruban__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.va-ruban__bouton { min-height: 40px; padding: 0.4rem 1rem; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--or-clair), var(--or)); font: 500 0.9375rem / 1.2 var(--f-texte); color: var(--petrole-profond); cursor: pointer; }
.va-ruban__bouton:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.va-ruban__lien { color: var(--creme); text-underline-offset: 3px; }

/* En-tête du cabinet */
.va-entete { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--va-filet); backdrop-filter: blur(8px); }
.va-entete__barre { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.va-logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; margin-right: auto; }
.va-logo__nom { font: 600 1.375rem / 1 var(--va-police-titre); letter-spacing: 0.14em; text-transform: uppercase; color: var(--va-marine); }
.va-logo__metier { margin-top: 0.3rem; font: 500 0.6875rem / 1 var(--va-police-texte); letter-spacing: 0.42em; text-transform: uppercase; color: var(--va-bordeaux-texte); }
.va-logo--clair .va-logo__nom { color: #fff; }
.va-logo--clair .va-logo__metier { color: var(--va-clair); }
.va-nav { display: flex; align-items: center; gap: 1.75rem; }
.va-nav a:not(.va-bouton) { font-size: 1rem; color: var(--va-encre); text-decoration: none; }
.va-nav a:not(.va-bouton):hover { color: var(--va-bordeaux-texte); }
.va-entete__menu { display: none; }

/* Boutons du cabinet */
.va-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.5rem; border: 1px solid var(--va-marine); background: var(--va-marine); font: 500 1rem / 1.2 var(--va-police-texte); letter-spacing: 0.02em; color: #fff; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.va-bouton:hover { background: var(--va-marine-2); }
.va-bouton--contour { background: transparent; color: var(--va-marine); }
.va-bouton--contour:hover { background: var(--va-marine); color: #fff; }
.va-bouton--petit { min-height: 42px; padding: 0.55rem 1.1rem; font-size: 0.9375rem; }
.va-bouton:focus-visible, .va-nav a:focus-visible, .va-logo:focus-visible { outline: 2px solid var(--va-bordeaux); outline-offset: 3px; }
.va-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 2rem; }

/* Titres */
.va-sur { margin: 0 0 0.9rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--va-bordeaux-texte); }
.va-titre { margin: 0; font: 500 clamp(1.625rem, 1.35rem + 0.9vw, 2.125rem) / 1.18 var(--va-police-titre); color: var(--va-marine); text-wrap: pretty; }
.va-texte { margin: 1rem 0 0; color: var(--va-encre); text-wrap: pretty; }

/* Premier écran */
.va-une { padding-block: clamp(2.5rem, 6vw, 5rem); background: linear-gradient(180deg, var(--va-blanc), var(--va-brume)); }
.va-une__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56em) { .va-une__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.va-une__titre { margin: 0; font: 500 clamp(1.875rem, 1.45rem + 1.5vw, 2.75rem) / 1.12 var(--va-police-titre); color: var(--va-marine); text-wrap: pretty; }
.va-une__chapo { margin: 1.25rem 0 0; font-size: 1.1875rem; color: var(--va-encre); text-wrap: pretty; }
.va-une__info { margin: 1.25rem 0 0; font-size: 1rem; color: var(--va-gris); }
.va-une__photo { position: relative; }
.va-une__photo::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--va-bordeaux); }
.va-une__photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 55% 50%; }

/* Domaines */
.va-domaines__grille { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
@media (min-width: 56em) { .va-domaines__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.va-domaine { padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; border: 1px solid var(--va-filet); border-top: 3px solid var(--va-bordeaux); }
.va-domaine__titre { margin: 0; font: 500 1.3125rem / 1.25 var(--va-police-titre); color: var(--va-marine); }
.va-domaine__colonnes { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 36em) { .va-domaine__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.va-domaine__public { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--va-gris); }
.va-liste { margin: 0; padding: 0; list-style: none; }
.va-liste li { position: relative; padding: 0.3rem 0 0.3rem 1.1rem; font-size: 1.0625rem; }
.va-liste li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 6px; height: 6px; border-radius: 50%; background: var(--va-bordeaux); }

/* Le cabinet */
.va-cabinet { background: var(--va-brume); }
.va-cabinet__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56em) { .va-cabinet__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.va-cabinet__photo, .va-rdv__photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 60% 40%, rgba(140, 43, 58, 0.3), transparent 70%), linear-gradient(135deg, var(--va-marine-2), var(--va-marine)); }
.va-cabinet__photo img, .va-rdv__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.va-cabinet__photo:empty::after, .va-rdv__photo:empty::after { content: "V"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 6rem / 1 var(--va-police-titre); color: rgba(255, 255, 255, 0.18); }
.va-valeurs { display: grid; gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.va-valeurs li { display: grid; gap: 0.2rem; padding-left: 1rem; border-left: 2px solid var(--va-bordeaux); }
.va-valeurs strong { font: 600 1.125rem / 1.25 var(--va-police-titre); color: var(--va-marine); }
.va-valeurs span { font-size: 1.0625rem; color: var(--va-encre); }

/* Premier rendez-vous */
.va-rdv__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56em) { .va-rdv__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.va-etapes { display: grid; gap: 1.1rem; margin: 1.75rem 0 2rem; padding: 0; list-style: none; }
.va-etapes li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.va-etapes__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--va-marine); font: 600 1.125rem / 1 var(--va-police-titre); color: #fff; }
.va-etapes strong { display: block; margin-top: 0.3rem; font: 600 1.125rem / 1.25 var(--va-police-titre); color: var(--va-marine); }
.va-etapes p { margin: 0.25rem 0 0; font-size: 1.0625rem; }

/* Honoraires */
.va-honoraires { background: var(--va-brume); }
.va-honoraires .va-mode { background: #fff; }
.va-honoraires__grille { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 52em) { .va-honoraires__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.va-mode { padding: 1.5rem; border: 1px solid var(--va-filet); background: var(--va-blanc); }
.va-mode h3 { margin: 0; font: 500 1.3125rem / 1.25 var(--va-police-titre); color: var(--va-marine); }
.va-mode p { margin: 0.6rem 0 0; font-size: 1.0625rem; }

/* Questions */
.va-faq__liste { display: grid; gap: 0.75rem; margin-top: 2rem; }
.va-question { border: 1px solid var(--va-filet); background: #fff; }
.va-question summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; font: 500 1.125rem / 1.35 var(--va-police-titre); color: var(--va-marine); cursor: pointer; list-style: none; }
.va-question summary::-webkit-details-marker { display: none; }
.va-question summary::after { content: "+"; flex: none; font: 400 1.5rem / 1 var(--va-police-texte); color: var(--va-bordeaux-texte); }
.va-question[open] summary::after { content: "–"; }
.va-question summary:focus-visible { outline: 2px solid var(--va-bordeaux); outline-offset: -2px; }
.va-question p { margin: 0; padding: 0 1.25rem 1.25rem; font-size: 1.0625rem; }

/* Contact */
.va-contact { background: var(--va-brume); }
.va-contact__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 56em) { .va-contact__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.va-infos { display: grid; gap: 0.9rem; margin: 1.5rem 0 1.75rem; }
.va-infos div { display: grid; gap: 0.1rem; }
.va-infos dt { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--va-gris); }
.va-infos dd { margin: 0; font-size: 1.0625rem; }
.va-form { padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; border: 1px solid var(--va-filet); }
.va-form__ligne { display: grid; gap: 0.35rem; margin: 0 0 1.1rem; }
.va-form label { font-size: 1rem; font-weight: 500; color: var(--va-marine); }
.va-form input, .va-form textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--va-bord); background: var(--va-blanc); font: inherit; font-size: 1.0625rem; color: var(--va-encre); }
.va-form input:focus-visible, .va-form textarea:focus-visible { outline: 2px solid var(--va-bordeaux); outline-offset: 1px; border-color: var(--va-bordeaux); }
.va-form [aria-invalid="true"] { border-color: #A8372E; }
.va-form__mention { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--va-gris); }
.va-form__retour { margin: 0.75rem 0 0; font-size: 1rem; font-weight: 500; color: var(--va-marine); }
.va-form__retour:empty { display: none; }

/* Pied */
.va-pied { padding-block: 3rem 2rem; background: var(--va-marine); color: #E6EBF1; }
.va-pied__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.va-pied__ligne { margin: 0; font-size: 0.9375rem; }
.va-mentions { margin-top: 1.25rem; }
.va-mentions summary { display: inline-flex; gap: 0.5rem; min-height: 44px; align-items: center; font-size: 1rem; color: #fff; cursor: pointer; }
.va-mentions summary::after { content: "+"; color: var(--va-clair); }
.va-mentions[open] summary::after { content: "–"; }
.va-mentions summary:focus-visible { outline: 2px solid var(--va-clair); outline-offset: 3px; }
.va-mentions__texte p { margin: 0.4rem 0 0; font-size: 0.9375rem; color: #D5DDE6; }
.va-pied__demo { margin: 1.75rem 0 0; font-size: 0.875rem; color: #C3CDD8; }
.va-pied__demo a { color: #fff; text-underline-offset: 3px; }

/* Annotations de JustiComm */
.va-note {
  position: relative; display: flex; gap: 0.75rem; align-items: flex-start; max-width: 34rem; margin: 1.5rem 0 0; padding: 0.9rem 1.1rem;
  border: 1px solid rgba(224, 189, 142, 0.6); border-left: 3px solid var(--or); background: var(--petrole-profond);
  box-shadow: 0 1rem 2rem -1.25rem rgba(2, 24, 24, 0.6); font-family: var(--f-texte);
}
.va-note p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--creme); }
.va-note strong { display: block; margin-bottom: 0.15rem; font-weight: 500; color: var(--or-clair); }
.va-note__num { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--or); font: 600 0.8125rem / 1 var(--f-texte); color: var(--petrole-profond); }
.va-note--clair { border-color: rgba(224, 189, 142, 0.7); }
.va.sans-notes .va-note { display: none; }
.va:not(.sans-notes) .va-note { animation: va-note 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes va-note { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* Bulle « démonstration » */
.va-bulle { font-family: var(--f-texte); position: fixed; left: 50%; bottom: 1.25rem; z-index: 40; max-width: min(34rem, 100% - 2rem); margin: 0; padding: 0.85rem 1.2rem; border: 1px solid var(--or); border-radius: 12px; background: var(--petrole-profond); font-size: 0.9375rem; color: var(--creme); box-shadow: 0 1rem 2rem -0.75rem rgba(0, 0, 0, 0.5); translate: -50% 0; transition: opacity 250ms ease, translate 250ms ease; }
.va-bulle:empty { display: none; }
.va-bulle.est-cachee { opacity: 0; translate: -50% 10px; }

/* Téléphone */
@media (max-width: 55.99em) {
  .js .va-entete__menu { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.4rem 0.9rem; border: 1px solid var(--va-marine); background: transparent; font: 500 0.9375rem / 1 var(--va-police-texte); color: var(--va-marine); cursor: pointer; }
  .va-entete__burger { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; }
  .va-entete__burger::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; }
  .va-entete__barre { flex-wrap: wrap; }
  .va-nav { flex-wrap: wrap; gap: 0.25rem 1.25rem; width: 100%; padding-bottom: 0.9rem; }
  .js .va-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; }
  .js .va-entete.est-ouvert .va-nav { display: flex; }
  .js .va-nav a:not(.va-bouton) { padding: 0.85rem 0; border-bottom: 1px solid var(--va-filet); }
  .js .va-nav .va-bouton { margin-top: 0.9rem; }
  .va-une__photo { order: -1; }
  .va-une__photo::before { inset: 0.6rem -0.6rem -0.6rem 0.6rem; }
  .va-actions .va-bouton { flex: 1 1 100%; }
  .va-ruban { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .va *, .va *::before, .va *::after { animation: none !important; transition: none !important; }
}

/* Photos du cabinet (23/10/2026) */
.va-cabinet__photo img { object-position: 28% 30%; }
.va-rdv__photo img { object-position: 72% 50%; }

/* --------------------------------------------------------------------------
   Ajouts (23/10/2026) : préparer son rendez-vous, actualités, prise de rendez-vous, assistant IA
   -------------------------------------------------------------------------- */
.va-coches { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.va-coches li { position: relative; padding-left: 1.9rem; font-size: 1.0625rem; }
.va-coches li::before { content: "✓"; position: absolute; left: 0; top: 0.2em; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--va-marine); font-size: 0.6875rem; color: #fff; }

/* Préparer votre rendez-vous */
.va-prep { background: #fff; }
.va-prep__choix { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.va-prep__choix[hidden] { display: none; }
.va-prep__choix button, .va-agenda button:not(.va-bouton) {
  min-height: 44px; padding: 0.55rem 1.1rem; border: 1px solid var(--va-bord); border-radius: 999px; background: var(--va-blanc);
  font: 500 1rem / 1.2 var(--va-police-texte); color: var(--va-marine); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.va-prep__choix button[aria-selected="true"], .va-agenda button[aria-pressed="true"] { border-color: var(--va-marine); background: var(--va-marine); color: #fff; }
.va-prep__choix button:focus-visible, .va-agenda button:focus-visible { outline: 2px solid var(--va-bordeaux); outline-offset: 3px; }
.va-prep__panneaux { display: grid; gap: 1rem; margin-top: 1.5rem; }
.va-prep__liste { padding: 1.5rem; border: 1px solid var(--va-filet); border-left: 3px solid var(--va-bordeaux); background: var(--va-blanc); }
.va-prep__liste h3 { margin: 0 0 0.9rem; font: 500 1.3125rem / 1.25 var(--va-police-titre); color: var(--va-marine); }
.va-prep__liste[hidden] { display: none; }

/* Actualités */
.va-actu__grille { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 56em) { .va-actu__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.va-article { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--va-filet); border-top: 3px solid var(--va-marine); background: #fff; transition: translate 250ms ease, box-shadow 250ms ease; }
.va-article:hover { translate: 0 -3px; box-shadow: 0 1.25rem 2rem -1.25rem rgba(29, 43, 56, 0.35); }
.va-article__cat { margin: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--va-bordeaux-texte); }
.va-article__titre { margin: 0.6rem 0 0; font: 500 1.25rem / 1.25 var(--va-police-titre); color: var(--va-marine); text-wrap: pretty; }
.va-article__resume { margin: 0.75rem 0 0; font-size: 1.0625rem; }
.va-article__date { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--va-gris); }
.va-article__lien { margin-top: auto; padding-top: 1rem; font-weight: 500; color: var(--va-marine); text-underline-offset: 3px; }

/* Prise de rendez-vous */
.va-contact__droite { display: grid; gap: 1.25rem; }
.va-agenda { padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; border: 1px solid var(--va-filet); border-top: 3px solid var(--va-bordeaux); }
.va-agenda__titre { margin: 0; font: 500 1.4375rem / 1.25 var(--va-police-titre); color: var(--va-marine); }
.va-agenda__etape { margin: 1.25rem 0 0.6rem; font-size: 0.9375rem; font-weight: 500; color: var(--va-gris); }
.va-agenda__choix, .va-agenda__jours, .va-agenda__heures { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.va-agenda__jours button { border-radius: 10px !important; min-width: 5.25rem; }
.va-agenda__valider { margin-top: 1.5rem; }
.va-agenda__retour { margin: 0.9rem 0 0; font-weight: 500; color: var(--va-marine); }
.va-agenda__retour:empty { display: none; }
.va-form__titre { margin: 0 0 1rem; font: 500 1.25rem / 1.25 var(--va-police-titre); color: var(--va-marine); }

/* Assistant IA du cabinet */
.va-assistant { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 0.75rem; }
.va-assistant__ouvrir { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 50px; padding: 0.5rem 1.1rem 0.5rem 0.55rem; border: 0; border-radius: 999px; background: var(--va-marine); font: 500 1rem / 1 var(--va-police-texte); color: #fff; box-shadow: 0 1rem 2rem -0.75rem rgba(29, 43, 56, 0.6); cursor: pointer; }
.va-assistant__ouvrir:focus-visible { outline: 2px solid var(--va-bordeaux); outline-offset: 3px; }
.va-assistant__pastille { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--va-clair); font-size: 0.8125rem; font-weight: 600; color: var(--va-marine); }
.va-assistant__panneau { display: flex; flex-direction: column; width: min(23rem, calc(100vw - 2.5rem)); max-height: min(34rem, calc(100vh - 7.5rem)); overflow: auto; border: 1px solid var(--va-filet); border-radius: 16px; background: #fff; box-shadow: 0 1.5rem 3rem -1rem rgba(29, 43, 56, 0.5); }
.va-assistant__panneau[hidden] { display: none; }
.va-assistant__tete { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem; background: var(--va-marine); color: #fff; }
.va-assistant__tete p { margin: 0; display: grid; gap: 0.15rem; }
.va-assistant__tete strong { font: 500 1.0625rem / 1.25 var(--va-police-titre); }
.va-assistant__tete span { font-size: 0.875rem; color: #D5DDE6; }
.va-assistant__fermer { width: 36px; height: 36px; flex: none; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: transparent; font-size: 1.25rem; line-height: 1; color: #fff; cursor: pointer; }
.va-assistant__fil { display: grid; gap: 0.6rem; padding: 1rem 1.1rem 0.5rem; }
.va-bulle-ia, .va-bulle-moi { margin: 0; padding: 0.7rem 0.9rem; border-radius: 14px; font-size: 0.9375rem; line-height: 1.5; }
.va-bulle-ia { justify-self: start; max-width: 92%; background: var(--va-brume); color: var(--va-encre); border-bottom-left-radius: 4px; }
.va-bulle-moi { justify-self: end; max-width: 85%; background: var(--va-marine); color: #fff; border-bottom-right-radius: 4px; }
.va-bulle-ia a { color: var(--va-marine); font-weight: 500; }
.va-assistant__suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 1.1rem 1rem; }
.va-assistant__suggestions button { min-height: 40px; padding: 0.4rem 0.8rem; border: 1px solid var(--va-bord); border-radius: 999px; background: var(--va-blanc); font: 500 0.875rem / 1.2 var(--va-police-texte); color: var(--va-marine); cursor: pointer; }
.va-assistant__suggestions button:focus-visible { outline: 2px solid var(--va-bordeaux); outline-offset: 2px; }
.va-note--assistant { margin: 0 1.1rem 1.1rem; }

/* Intégrée dans la page Sites internet : pas de retour en double, pas de bulle sous l'assistant */
.va.est-integree .va-ruban__lien { display: none; }
.va.est-integree .va-bulle { bottom: 5.5rem; }

/* --------------------------------------------------------------------------
   Corrections du contrôle final (23/10/2026 : Thémis, Octave, Pauline)
   -------------------------------------------------------------------------- */
/* Focus visible sur les fonds sombres et sur la brume */
.va-ruban__lien:focus-visible { outline: 2px solid #D9BE8E; outline-offset: 3px; }
.va-pied__demo a:focus-visible { outline: 2px solid var(--va-clair); outline-offset: 3px; }
.va-contact .va-bouton:focus-visible { outline-color: var(--va-marine); }

/* Agenda : tarif du premier rendez-vous ; honoraires : tarif réglementé du partage */
.va-agenda__tarif { margin: 1.25rem 0 0; padding: 0.75rem 0.9rem; border-left: 2px solid var(--va-bordeaux); background: var(--va-blanc); font-size: 0.9375rem; color: var(--va-gris); }
.va-honoraires__tarif { margin-top: 1.25rem; font-size: 1rem; color: var(--va-gris); }

/* Fonds alternés : questions sur blanc ; contact plus large côté agenda */
.va-faq { background: #fff; }
@media (min-width: 56em) { .va-contact__grille { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }

/* Bouton « Prendre rendez-vous » toujours visible au téléphone, à gauche de l'assistant */
.va-barre-rdv { display: none; }
.va-barre-rdv.est-cachee { opacity: 0; visibility: hidden; translate: 0 0.5rem; }
@media (max-width: 55.99em) {
  .va-barre-rdv { position: fixed; left: 1rem; bottom: 1.25rem; z-index: 30; display: inline-flex; min-height: 48px; padding-inline: 1.25rem; border-radius: 2px; box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(29, 43, 56, 0.45); transition: opacity 200ms ease, translate 200ms ease, visibility 200ms; }
  .va-pied { padding-bottom: 6rem; }
  .va-bulle { bottom: 5.5rem; }
}

/* Téléphone : l'assistant devient un rond (son libellé reste lu par les lecteurs d'écran) ; ruban plus compact */
@media (max-width: 39.99em) {
  .va-assistant__ouvrir { gap: 0; padding: 6px; font-size: 0; }
  .va-barre-rdv { right: 5.25rem; }
  .va-assistant__pastille { width: 40px; height: 40px; font-size: 0.875rem; }
  .va-ruban { padding-block: 0.5rem; font-size: 0.8125rem; }
  .va-ruban__bouton { font-size: 0.875rem; }
}

/* Sans JavaScript : pas de bouton qui ne fait rien */
html:not(.js) .va-assistant, html:not(.js) .va-agenda, html:not(.js) .va-ruban__bouton { display: none; }

/* --------------------------------------------------------------------------
   Contrôle d'Octave du 24/10/2026 : fin de page, agenda, alternance des fonds
   -------------------------------------------------------------------------- */
/* la marge basse de la barre d'action de JustiComm (masquée ici) laissait une bande papier sous le pied */
body:has(.va) { padding-bottom: 0; }
html:has(.va), body:has(.va) { background: #1B2A3A; }
.va-insecable { white-space: nowrap; }
/* alternance stricte : blanc et gris bleuté */
.va-prep, .va-actualites { background: var(--va-brume); }
.va-honoraires { background: #fff; }
.va-honoraires .va-mode { background: var(--va-brume); }

/* « Nonobstant », plus long que l'ancien nom : le logotype se resserre sur les très petits écrans pour laisser « Menu » sur la même ligne (26/10/2026) */
@media (max-width: 22.49em) {
  .va-logo__nom { font-size: 1.125rem; letter-spacing: 0.1em; }
  .va-logo__metier { letter-spacing: 0.34em; }
}