/* SOS-OQTF — feuille de style principale
   Écrite en propriétés logiques CSS (margin-inline, padding-inline, text-align: start/end)
   pour que le passage en arabe (dir="rtl") retourne la mise en page sans code dupliqué. */

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f6f7f9;
  --color-text: #1a1a1a;
  --color-text-muted: #55606b;
  --color-primary: #0f3d5c;
  --color-primary-dark: #0a2c43;
  --color-accent: #c8102e;
  --color-border: #dfe3e7;
  --color-success-bg: #eaf6ec;
  --color-success-border: #2e7d46;
  --radius: 10px;
  --max-width: 880px;
  --font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-ar: "Segoe UI", "Tahoma", "Geeza Pro", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.55;
}

/* Fond de page : toile bleu marine avec trame "guilloché" (motif des
   documents juridiques de sécurité) nettement visible, sur laquelle le
   contenu flotte comme une page de document blanche. Le texte lui-même
   reste toujours sur fond blanc (voir .page-card ci-dessous) : le fond
   habille la page sans jamais toucher la lecture. */
body {
  background-color: var(--color-primary-dark);
  background-image:
    radial-gradient(ellipse 1200px 700px at 50% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 65%),
    url("../assets/pattern-guilloche-dark.svg");
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
}

html[dir="rtl"] body { font-family: var(--font-ar); }

body { min-height: 100vh; display: flex; flex-direction: column; }

a { color: var(--color-primary); }

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
}
.skip-link:focus { inset-inline-start: 8px; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--color-primary-dark);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.brand img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #ffffff;
  padding: 2px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.main-nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}
.main-nav a:hover { color: #ffffff; }

.lang-switcher {
  display: flex;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.lang-switcher button {
  border: none;
  background: transparent;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.lang-switcher button[aria-pressed="true"] {
  background: var(--color-accent);
  color: #fff;
}

/* ---------- Legal banner ---------- */
.legal-banner {
  background: #fff4e5;
  border-bottom: 1px solid #f0c987;
  color: #6b4a05;
  font-size: 0.82rem;
  text-align: center;
  padding: 6px 12px;
}

/* ---------- Main / hero ---------- */
/* Le contenu flotte comme une page de document blanche sur la toile bleu
   marine : c'est la carte visuelle principale, celle qui doit se voir. */
main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 36px auto 56px;
  background: var(--color-bg);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

@media (max-width: 620px) {
  main { margin: 0; border-radius: 0; box-shadow: none; }
}

/* Logo de marque affiché en haut de page (accueil et diagnostic) : distinct
   du petit pictogramme dans la barre de navigation, qui reste en place. */
.page-logo {
  display: block;
  height: 190px;
  width: auto;
  margin: 0 auto 20px;
}

.hero {
  background: linear-gradient(180deg, rgba(246, 247, 249, 0.6), rgba(255, 255, 255, 0));
  padding: 40px 20px 40px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--color-primary-dark);
  margin: 0 0 12px;
}
.hero p.subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto 24px;
}
.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-dark); }
.btn.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn.btn-accent {
  background: var(--color-accent);
}
.btn.btn-accent:hover { background: #a10d25; }
.hero .note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin-inline: auto;
}

/* ---------- How it works ---------- */
.how { padding: 48px 20px; }
.how h2 { text-align: center; color: var(--color-primary-dark); margin-bottom: 32px; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.how-step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--color-bg-alt);
}
.how-step h3 { margin: 0 0 8px; color: var(--color-primary); font-size: 1.05rem; }
.how-step p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; }

/* ---------- Disclaimer ---------- */
.disclaimer {
  padding: 32px 20px 56px;
}
.disclaimer .box {
  border-inline-start: 4px solid var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 20px 24px;
}
html[dir="rtl"] .disclaimer .box { border-inline-start: 4px solid var(--color-primary); }
.disclaimer h2 { margin: 0 0 8px; font-size: 1.05rem; color: var(--color-primary-dark); }
.disclaimer p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; }

/* ---------- Diagnostic wizard ---------- */
.diag-wrap { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }
.diag-progress {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.diag-progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}
.diag-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  transition: width 0.25s ease;
}

.diag-step { display: none; }
.diag-step.active { display: block; animation: fadein 0.2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.diag-step h2 { color: var(--color-primary-dark); margin-top: 0; }

/* Étape 0 (introduction) : contenu centré, plus posé qu'un simple formulaire */
.diag-step[data-step="0"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.diag-step[data-step="0"] h1,
.diag-step[data-step="0"] h2 { color: var(--color-primary-dark); }
.diag-step[data-step="0"] p { max-width: 540px; }
.diag-step[data-step="0"] .consent-row { max-width: 540px; text-align: start; }
#start-btn {
  font-size: 1.15rem;
  padding: 16px 40px;
  background: var(--color-accent);
}
#start-btn:hover { background: #a10d25; }

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 22px;
}
legend, .field-label {
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}
.field-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: -4px;
  margin-bottom: 10px;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 11px 14px;
  cursor: pointer;
}
.option:hover { border-color: var(--color-primary); }
.option input { margin-top: 3px; }
.option.checked { border-color: var(--color-primary); background: #eef4f9; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="file"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 16px;
  background: #fff;
  color: var(--color-text);
}
label.field-label + input,
label.field-label + .field-hint + input { margin-top: 0; }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 20px;
}
.consent-row input { margin-top: 3px; }

.error-msg {
  color: var(--color-accent);
  font-size: 0.85rem;
  margin: -8px 0 14px;
  display: none;
}
.error-msg.visible { display: block; }

.urgency-note {
  background: #fff4e5;
  border: 1px solid #f0c987;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 0.88rem;
  color: #6b4a05;
  margin-bottom: 20px;
}

.wizard-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
/* Dernière étape (coordonnées + dépôt) : on garde Précédent / Envoyer aux deux
   extrémités, comme un formulaire classique, plutôt que centrés. */
.wizard-nav.wizard-nav--final {
  justify-content: space-between;
}

.confirm-box {
  text-align: center;
  padding: 48px 20px;
}
.confirm-box .icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-success-bg);
  border: 2px solid var(--color-success-border);
  color: var(--color-success-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 16px;
}
.confirm-box h2 { color: var(--color-primary-dark); }
.confirm-box p { color: var(--color-text-muted); max-width: 480px; margin: 0 auto 24px; }
.confirm-box .confirm-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.confirm-fallback {
  background: #fff4e5;
  border: 1px solid #f0c987;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 auto 24px;
  max-width: 480px;
}
.confirm-fallback p { color: #6b4a05; margin: 0 0 12px; font-size: 0.92rem; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  padding: 24px 20px 36px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  max-width: 960px;
}
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }
.footer-note { flex-basis: 100%; font-size: 0.78rem; opacity: 0.8; }

@media (max-width: 560px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wizard-nav .btn { flex: 1; text-align: center; }
}

/* Champ piège anti-robot : retiré du flux et invisible, sans display:none
   (certains robots ignorent les champs masqués de cette façon). */
.pot-de-miel {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Numéro de dossier affiché après l'envoi : c'est la référence que la
   personne communiquera au cabinet, elle doit se repérer d'un coup d'œil. */
.confirm-reference {
  font-weight: 600;
  color: var(--color-primary-dark) !important;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  max-width: 480px;
  margin: 0 auto 20px !important;
}

/* Bouton d'envoi pendant la transmission de la demande */
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Blog : questions fréquentes ---------- */
/* Les articles servent le référencement naturel : ils répondent à une
   question posée par quelqu'un qui vient de recevoir une décision. La
   mise en page reste sobre, la lecture doit rester facile sur téléphone. */
.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 56px;
}
.article h1 {
  color: var(--color-primary-dark);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.25;
  margin: 0 0 8px;
}
.article h2 {
  color: var(--color-primary-dark);
  font-size: 1.25rem;
  margin: 36px 0 10px;
}
.article h3 {
  color: var(--color-primary);
  font-size: 1.05rem;
  margin: 26px 0 8px;
}
.article p { margin: 0 0 14px; }
.article ul, .article ol { margin: 0 0 16px; padding-inline-start: 22px; }
.article li { margin-bottom: 6px; }
.article blockquote {
  border-inline-start: 4px solid var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  margin: 0 0 18px;
  padding: 14px 18px;
  color: var(--color-text-muted);
}
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 0.95rem;
}
.article th, .article td {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  text-align: start;
  vertical-align: top;
}
.article th { background: var(--color-bg-alt); }

.fil-ariane { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 18px; }
.article-date { font-size: 0.85rem; color: var(--color-text-muted); }

.article-cta {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  margin: 36px 0 24px;
  text-align: center;
}
.article-cta p { margin: 0 0 14px; color: var(--color-text-muted); }

.article-mention {
  border-inline-start: 4px solid var(--color-accent);
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.article-mention p { margin: 0; }

.article-list { list-style: none; margin: 0; padding: 0; }
.article-item {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}
.article-item:last-child { border-bottom: none; }
.article-item a {
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--color-primary-dark);
  text-decoration: none;
}
.article-item a:hover { text-decoration: underline; }
.article-item p { margin: 6px 0; color: var(--color-text-muted); font-size: 0.95rem; }

/* ---------- Bloc « Un problème ? » ----------
   Zone volontairement détachée du parcours : elle ne fait pas partie du
   diagnostic et sert uniquement de recours si quelque chose n'a pas
   fonctionné au-dessus. Le filet rouge en haut et le fond gris la coupent
   nettement du contenu, pour qu'on ne la confonde pas avec une étape.
   Les styles sont ici, et non en attribut style=, pour rester compatibles
   avec une politique de contenu stricte. */
.bloc-aide {
  max-width: 540px;
  margin: 34px auto 0;
  padding: 22px 22px 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius);
  text-align: center;
}
.bloc-aide h2,
.bloc-aide h3 {
  margin: 0 0 4px;
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--color-primary-dark);
}
.bloc-aide .bloc-aide-texte {
  margin: 0 auto 10px !important;
  max-width: 440px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.bloc-aide .bloc-aide-rappel {
  margin: 0 auto 18px !important;
  max-width: 460px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.bloc-aide .confirm-fallback { margin-bottom: 18px; }
.bloc-aide .confirm-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Le bloc apparaît aussi sur les pages de contenu, où il n'est pas posé
   sur une carte blanche : on lui redonne alors un fond opaque. */
main > .bloc-aide,
.article > .bloc-aide { margin-bottom: 8px; }
.est-cache { display: none !important; }

/* ---------- Bloc d'aide : logo Atlas Avocat à gauche, texte à droite ---------- */
.bloc-aide {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 22px;
  align-items: center;
  max-width: 640px;
  text-align: start;
}
.bloc-aide > * { grid-column: 2; }
.bloc-aide > .bloc-aide-logo {
  grid-column: 1;
  grid-row: 1 / span 12;
  width: 96px;
  height: auto;
}
.bloc-aide .bloc-aide-texte,
.bloc-aide .bloc-aide-rappel { margin-inline: 0 !important; }
.bloc-aide .confirm-actions { justify-content: flex-start; }
@media (max-width: 560px) {
  .bloc-aide { display: block; text-align: center; }
  .bloc-aide > .bloc-aide-logo { display: block; margin: 0 auto 12px; width: 80px; }
  .bloc-aide .bloc-aide-texte,
  .bloc-aide .bloc-aide-rappel { margin-inline: auto !important; }
  .bloc-aide .confirm-actions { justify-content: center; }
}