/* =====================================================================
   ShieldOne — ARTICLES (04.11.2026) : feuille COMMUNE aux pages d'article
   au niveau de l'accueil. Se charge APRÈS /public.css et /entete.css.
   Palette = celle de l'accueil (accueil.css) : #06234D / #082B68, gris #5C7090,
   bordures #E4ECF5, teinte #EFF6FF, action #0864E5, jaune #FFD05A (touche).
   Tout est préfixé .ar- et limité à <body class="ar-page">.
   Mobile d'abord ; 390 px et 1440 px vérifiés. Cibles ≥ 44 px.
   ===================================================================== */

.ar-page {
  --nuit: #06234D; --nuit-2: #082B68; --gris: #5C7090; --bordure: #E4ECF5;
  --teinte: #EFF6FF; --action: #0864E5; --action-survol: #0753BF; --jaune: #FFD05A;
  --vert: #1E8A5A; --orange: #B85F05; --orange-pale: #FDF0E3;
  /* public.css aligné sur l'accueil pour la FAQ, les cartes et le pied */
  --p-titre: #06234D; --p-bleu: #0864E5; --p-texte: #082B68; --p-bordure: #E4ECF5; --p-fond-doux: #EFF6FF;
  color: var(--nuit-2); background: #FFFFFF;
}
.ar-corps a, .ar-cta a, .ar-sources a { text-underline-offset: 3px; }
.ar-page :focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 4px; }
.ar-h1 em, .ar-h2-section em, .ar-cta-carte h2 em { font-style: italic; font-weight: 500; color: var(--action); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Héros ---------- */
.ar-hero { padding: 28px 0 0; background: linear-gradient(180deg, var(--teinte) 0%, #FFFFFF 78%); }
.ar-fil ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; color: var(--gris); }
.ar-fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gris); text-decoration: none; }
.ar-fil a:hover { color: var(--action); text-decoration: underline; }
.ar-fil [aria-current] { color: var(--nuit); font-weight: 600; }
.ar-surtitre { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--bordure); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--action); }
.ar-surtitre::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--jaune); }
.ar-h1 { margin: 18px 0 0; max-width: 20ch; font-size: clamp(2.1rem, 5.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; color: var(--nuit); text-wrap: balance; }
.ar-chapeau { margin: 20px 0 0; max-width: 60ch; font-size: 1.15rem; line-height: 1.6; color: var(--gris); }
.ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; color: var(--gris); }
.ar-meta li { display: inline-flex; align-items: center; gap: 8px; }
.ar-meta svg { flex: none; color: var(--action); }
.ar-visuel { position: relative; margin: 36px 0 0; border-radius: 28px; overflow: hidden; background: linear-gradient(135deg, var(--teinte) 0%, #CFE2FB 55%, #9CC0F3 100%); aspect-ratio: 16 / 7; box-shadow: 0 30px 70px -40px rgba(6, 35, 77, .55); }
.ar-visuel picture, .ar-visuel img { display: block; width: 100%; height: 100%; }
.ar-visuel img { object-fit: cover; object-position: 55% 50%; }

/* ---------- Mise en page : corps + sommaire ---------- */
.ar-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0 24px; }
.ar-corps { min-width: 0; max-width: 760px; font-size: 17px; line-height: 1.7; }
.ar-corps > section { scroll-margin-top: 24px; }
.ar-corps h2 { margin: 56px 0 16px; font-size: clamp(1.55rem, 3.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: var(--nuit); text-wrap: balance; scroll-margin-top: 24px; }
.ar-corps h3 { margin: 32px 0 8px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; color: var(--nuit); }
.ar-corps p { margin: 0 0 16px; }
.ar-corps ul, .ar-corps ol { margin: 0 0 18px; padding-left: 22px; }
.ar-corps li { margin: 0 0 8px; }
.ar-corps strong { color: var(--nuit); }
.ar-corps a { font-weight: 600; }

/* Sommaire : carte dépliable sur mobile, colonne collante sur grand écran */
.ar-sommaire { border: 1px solid var(--bordure); border-radius: 20px; background: #FFFFFF; padding: 4px 20px 12px; }
.ar-sommaire summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nuit); }
.ar-sommaire summary::-webkit-details-marker { display: none; }
.ar-sommaire summary::after { content: '+'; font-size: 22px; font-weight: 500; color: var(--action); letter-spacing: 0; }
.ar-sommaire[open] summary::after { content: '−'; }
.ar-sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: som; }
.ar-sommaire li { counter-increment: som; border-top: 1px solid var(--bordure); }
.ar-sommaire a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--nuit-2); text-decoration: none; }
.ar-sommaire a::before { content: counter(som, decimal-leading-zero); flex: none; font-size: 12px; font-weight: 700; color: var(--action); font-variant-numeric: tabular-nums; }
.ar-sommaire a:hover { color: var(--action); }

/* ---------- Réponse courte ---------- */
.ar-reponse { position: relative; margin: 0 0 28px; padding: 26px 24px 22px; border-radius: 22px; background: var(--teinte); border: 1px solid #D6E5FA; }
.ar-reponse::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 0 4px 4px 0; background: var(--action); }
.ar-reponse-titre { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.ar-reponse p { margin: 0 0 12px; }
.ar-reponse p:last-child { margin-bottom: 0; }

/* ---------- Figures ---------- */
.ar-figure { margin: 28px 0 32px; }
.ar-figure a { display: block; border-radius: 22px; }
.ar-figure img { display: block; width: 100%; height: auto; border-radius: 22px; }
.ar-figure-etroite img { max-width: 640px; margin-inline: auto; }
.ar-figure figcaption { margin: 12px 4px 0; font-size: 14px; line-height: 1.5; color: var(--gris); }

/* ---------- Tableaux ---------- */
.ar-tableau { margin: 24px 0 28px; border: 1px solid var(--bordure); border-radius: 20px; overflow-x: auto; background: #FFFFFF; }
.ar-tableau table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.ar-tableau caption { padding: 16px 20px 0; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.ar-tableau th, .ar-tableau td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--bordure); }
.ar-tableau thead th { border-top: 0; background: var(--nuit); color: #FFFFFF; font-size: 14px; font-weight: 600; }
.ar-tableau caption + thead th { border-top: 0; }
.ar-tableau table:has(caption) thead th { border-top: 0; }
.ar-tableau tbody tr:nth-child(even) { background: #F7FAFE; }
.ar-tableau tbody th { font-weight: 600; color: var(--nuit); }
.ar-tableau td strong { white-space: nowrap; }
.ar-pastille { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--teinte); color: var(--nuit); font-weight: 600; font-size: 14px; white-space: nowrap; }
.ar-pastille-nfc { background: var(--nuit); color: #FFFFFF; }
/* Tableau → cartes empilées sur téléphone (aucun défilement horizontal) */
@media (max-width: 600px) {
  .ar-tableau-cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ar-tableau-cartes tr { display: block; padding: 14px 18px; border-top: 1px solid var(--bordure); }
  .ar-tableau-cartes tbody tr:first-child { border-top: 0; }
  .ar-tableau-cartes th, .ar-tableau-cartes td { display: block; padding: 0; border: 0; }
  .ar-tableau-cartes td { margin-top: 8px; }
  .ar-tableau-cartes td::before { content: attr(data-libelle); display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
  .ar-tableau-cartes td strong { white-space: normal; }
}

/* ---------- Listes graphiques ---------- */
.ar-coches { list-style: none; padding-left: 0 !important; }
.ar-coches li { position: relative; padding-left: 34px; }
.ar-coches li::before { content: ''; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--teinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%230864E5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.ar-etapes { list-style: none; padding-left: 0 !important; counter-reset: etape; }
.ar-etapes li { counter-increment: etape; position: relative; padding: 2px 0 2px 46px; min-height: 32px; }
.ar-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--nuit); color: #FFFFFF; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.ar-cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 20px 0 28px; padding: 0 !important; list-style: none; }
.ar-cartes li { margin: 0; padding: 20px 20px 18px; border: 1px solid var(--bordure); border-radius: 18px; background: #FFFFFF; }
.ar-cartes-blocs strong { display: block; margin-bottom: 4px; font-size: 1.05rem; }
.ar-cartes-attention li { border-left: 4px solid var(--orange); }
.ar-cartes-atouts li { background: var(--teinte); border-color: #D6E5FA; }

.ar-encadre { margin: 24px 0 28px; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--bordure); background: #FFFFFF; }
.ar-encadre-titre { margin: 0 0 10px !important; font-weight: 700; color: var(--nuit); }
.ar-encadre > :last-child { margin-bottom: 0; }

/* ---------- Appel à l'action (même famille que la fin de l'accueil) ---------- */
.ar-cta { position: relative; overflow: hidden; padding: 64px 0; background: linear-gradient(160deg, #CFE2FB 0%, #9CC0F3 45%, var(--nuit-2) 100%); }
.ar-cta::after { content: ''; position: absolute; right: 9%; top: 18%; width: 14px; height: 14px; border-radius: 50%; background: var(--jaune); z-index: 1; }
.ar-cta:has(.ar-cta-fond)::after { display: none; }
.ar-cta-fond { position: absolute; inset: 0; margin: 0; }
.ar-cta-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.ar-cta-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(207, 226, 251, .92) 0%, rgba(156, 192, 243, .55) 45%, rgba(8, 43, 104, .08) 100%); }
@media (max-width: 720px) { .ar-cta-fond::after { background: linear-gradient(180deg, rgba(207, 226, 251, .85) 0%, rgba(8, 43, 104, .55) 100%); } }
.ar-cta-carte { position: relative; max-width: 600px; padding: 32px 26px 28px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 24px 60px -28px rgba(6, 35, 77, .45); }
.ar-cta-carte h2 { margin: 0 0 14px; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: var(--nuit); text-wrap: balance; }
.ar-cta-carte p { margin: 0 0 14px; color: var(--gris); }
.ar-cta-carte ul { margin: 6px 0 22px; padding: 0; list-style: none; }
.ar-cta-carte li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--bordure); color: var(--nuit-2); }
.ar-cta-carte li:first-child { border-top: 0; }
.ar-cta-carte li::before { content: ''; position: absolute; left: 0; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--jaune); }
.ar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--action); color: #FFFFFF !important; font: inherit; font-weight: 600; text-decoration: none; transition: background .15s; }
.ar-btn:hover { background: var(--action-survol); }
.ar-lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--action); text-decoration: none; }
.ar-lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.ar-lien svg { transition: transform .15s; }
.ar-lien:hover svg { transform: translateX(3px); }
.ar-cta-note { margin: 16px 0 0 !important; font-size: 14px; }
.ar-tarif { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: var(--teinte); color: var(--nuit) !important; font-size: 14px; font-weight: 600; }

/* ---------- FAQ (s'appuie sur .p-faq de public.css) ---------- */
.ar-page .p-conteneur.p-faq { max-width: none; }
.ar-page .p-faq details { max-width: 820px; }
.ar-page .p-faq details { border-bottom: 1px solid var(--bordure); }
.ar-page .p-faq details:first-of-type { border-top: 1px solid var(--bordure); }
.ar-page .p-faq summary { font-size: 17px; color: var(--nuit); }
.ar-page .p-faq summary:hover { color: var(--action); }
.ar-page .p-faq details p { color: var(--nuit-2); line-height: 1.65; }
.ar-h2-section { margin: 0 0 28px; font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: var(--nuit); text-wrap: balance; }

/* ---------- À lire aussi ---------- */
.ar-lire { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ar-lire a { display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 22px 22px 20px; border: 1px solid var(--bordure); border-radius: 20px; background: #FFFFFF; color: var(--gris); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.ar-lire a:hover { border-color: var(--action); transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(6, 35, 77, .5); }
.ar-lire-type { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.ar-lire strong { font-size: 1.1rem; line-height: 1.3; color: var(--nuit); }
.ar-lire span:last-child { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--action); }

/* ---------- Sources (discrètes) ---------- */
.ar-sources { padding: 8px 0 48px; }
.ar-sources details { max-width: 760px; border-top: 1px solid var(--bordure); }
.ar-sources summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--gris); }
.ar-sources ol { margin: 0 0 8px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--gris); }
.ar-sources li { margin: 0 0 8px; overflow-wrap: anywhere; }
.ar-sources a { color: var(--gris); }
.ar-mention { max-width: 760px; margin: 12px 0 0; font-size: 13px; color: var(--gris); }

/* ---------- Grand écran ---------- */
@media (min-width: 720px) {
  .ar-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-lire { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ar-reponse { padding: 30px 32px 26px; }
  .ar-cta-carte { padding: 40px 40px 34px; }
}
@media (min-width: 1024px) {
  .ar-hero { padding-top: 40px; }
  .ar-grille { grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; padding-top: 64px; }
  .ar-sommaire-col { order: 2; }
  .ar-sommaire { position: sticky; top: 24px; }
  .ar-sommaire summary { pointer-events: none; }
  .ar-sommaire summary::after { display: none; }
  .ar-cta { padding: 112px 0; }
}
@media (max-width: 600px) {
  .ar-hero { padding-top: 12px; }
  .ar-visuel { aspect-ratio: 4 / 3; border-radius: 22px; margin-top: 28px; }
  .ar-grille { padding-top: 32px; }
  .ar-corps h2 { margin-top: 44px; }
  .ar-reponse { padding: 22px 18px 18px 22px; }
  .ar-btn { width: 100%; }
  .ar-cta { padding: 48px 0; }
}