/* ==========================================================================
   JustiComm · rubrique « Articles » : la liste (/articles/) et un article (/articles/<slug>/)
   v4, 26/10/2026. Même esprit que les pages de services (Réseaux sociaux, Référencement local, Professions) :
   sections pétrole et papier en alternance, filets dorés, photo pleine largeur, titres modestes
   (H1 48 px, H2 38 px, H3 25 px). Un article est découpé en sections par js/articles.js (une par titre H2), qui alternent
   sombre et clair ; le texte tient dans une colonne étroite et aérée, les tableaux, étapes et appels prennent toute la largeur.
   Sans JavaScript, l'article reste lisible en une seule colonne. Sources en bas de page, repliées (jamais dans le texte).
   Les articles sont de vrais articles WordPress : tout ce qui est dans .ar-corps doit s'afficher correctement avec
   du contenu ordinaire (H2, H3, paragraphes, listes, citations, images avec légende, tableaux).
   Préfixe : ar-
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Communs
   -------------------------------------------------------------------------- */
body:has(.ar-haut, .ar-art) .entete__fond { opacity: 1; }
.ar .titre-section { max-width: none; font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.375rem); line-height: 1.12; color: var(--titre); text-wrap: pretty; }
.ar-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .ar-or, .surface-nuit .ar-or, .ar-haut .ar-or, .ar-abo .ar-or { color: var(--or-clair); }
.ar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ar-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding-block: 0.9rem; font-size: 0.875rem; color: var(--taupe); }
.ar-ariane a { color: inherit; text-underline-offset: 3px; }
.ar-ariane [aria-current] { color: var(--encre); }
.ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--texte-doux); }
.ar-meta li { display: flex; align-items: center; gap: 6px; }
.ar-meta svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ar-etiquette { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 479px) { .ar .btn-plaque.btn--grand { width: 100%; max-width: 26rem; padding-inline: 20px; padding-block: 12px; white-space: normal; text-align: center; line-height: 1.35; } }

/* Image en attente : même cadre que les photos, sans texte (un sceau de cercles fins, comme un cachet) */
.ar-img--attente {
  position: relative; display: block; width: 100%; height: 100%; min-height: 8rem; overflow: hidden;
  background:
    repeating-radial-gradient(circle at 74% 34%, rgba(242, 217, 172, 0.2) 0 1px, transparent 1px 22px),
    radial-gradient(110% 90% at 74% 34%, rgba(242, 217, 172, 0.2) 0%, rgba(242, 217, 172, 0) 60%),
    linear-gradient(135deg, #0C4546 0%, #062A2B 60%, #021818 100%);
}
.ar-img--attente::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(242, 217, 172, 0.3); border-radius: 8px; pointer-events: none; }

/* --------------------------------------------------------------------------
   1. Liste : bandeau pétrole, articles sur fond sombre, professions sur fond clair, appel final
   -------------------------------------------------------------------------- */
.ar-haut { position: relative; padding: var(--h-entete) 0 0; background: var(--papier); }
.ar-haut .conteneur { position: relative; }

/* Titre de la page, sous la carte : pleine largeur */
.ar-intro .surtitre { display: block; font-size: 0.9375rem; letter-spacing: 0.2em; line-height: 1.5; color: var(--or-texte); }
.ar-intro .surtitre::before { display: none; }
.ar-intro__titre { margin: var(--e-4) 0 0; font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.08 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.ar-intro__accroche { margin-top: var(--e-4); font: italic 500 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem) / 1.3 var(--f-titre); color: var(--titre); }
.ar-intro__texte { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.6; color: var(--texte); text-wrap: pretty; }
.ar-intro__reperes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--texte); }
.ar-intro__reperes li { display: flex; align-items: center; gap: 8px; }
.ar-intro__reperes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cuivre); flex: none; }

.ar.section { padding-block: clamp(3.5rem, 2rem + 4.5vw, 6rem); }
.ar-tete { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ar-tete .surtitre { margin-bottom: var(--e-4); }
.ar-chapo { margin-top: var(--e-5); font: italic 500 clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem) / 1.45 var(--f-titre); color: var(--titre); text-wrap: pretty; }

/* Les cartes d'article : sur fond sombre, verre fumé à filet doré ; sur fond clair, cartes blanches */
.ar-une, .ar-carte { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(242, 217, 172, 0.28); border-radius: 16px; background: rgba(255, 255, 255, 0.04); transition: border-color 0.35s, translate 0.45s var(--ease-sortie); }
.ar-carte { height: 100%; }
.surface-claire .ar-carte, .surface-creme .ar-carte { border-color: rgba(10, 57, 58, 0.14); background: #fff; }
.ar-une:hover, .ar-carte:hover { border-color: var(--or-clair); translate: 0 -4px; }
.surface-claire .ar-carte:hover { border-color: var(--or-texte); }
.ar-une:focus-within, .ar-carte:focus-within { outline: 2px solid var(--or-clair); outline-offset: 4px; }
.ar-une__image, .ar-carte__image { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--petrole-900); }
.ar-une__image img, .ar-carte__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; transition: transform 1.2s var(--ease-sortie); }
.ar-une:hover .ar-une__image img, .ar-carte:hover .ar-carte__image img { transform: scale(1.04); }
.ar-une__corps, .ar-carte__corps { display: flex; flex-direction: column; flex: 1; padding: clamp(1.5rem, 3vw, 2rem); }
.ar-une__titre, .ar-carte__titre { margin: var(--e-3) 0 0; font: 600 clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem) / 1.15 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.ar-une__titre a, .ar-carte__titre a { color: inherit; text-decoration: none; }
.ar-une__titre a::after, .ar-carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ar-une .ar-meta, .ar-carte .ar-meta { margin-top: auto; padding-top: var(--e-5); }
.ar-extrait { margin: var(--e-4) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--texte); text-wrap: pretty; }
.ar-une { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 64em) {
  .ar-une { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .ar-une__image { aspect-ratio: auto; min-height: 30rem; }
  .ar-une__corps { justify-content: center; padding: clamp(2rem, 4vw, 3.5rem); }
  .ar-une__titre { font-size: clamp(2rem, 1.5rem + 1.2vw, 2.5rem); }
  .ar-une .ar-meta { margin-top: var(--e-5); padding-top: 0; }
  .ar-une .ar-extrait { font-size: 1.125rem; }
}
.ar-duo { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.ar-duo > li { display: flex; min-width: 0; }
@media (min-width: 64em) { .ar-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ar-une, .ar-carte, .ar-metier, .ar-metier svg, .ar-une__image img, .ar-carte__image img { transition: none; } .ar-une:hover, .ar-carte:hover, .ar-metier:hover { translate: none; } .ar-une:hover img, .ar-carte:hover img { transform: none; } }

/* Les six professions */
.ar-metiers__liste { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ar-metiers__liste { grid-template-columns: repeat(3, 1fr); } }
.ar-metier { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; padding: 1.25rem 1.5rem; border: 1px solid rgba(10, 57, 58, 0.16); border-bottom: 3px solid var(--or-texte); border-radius: 12px; background: #fff; font: 600 1.4375rem / 1.2 var(--f-titre); color: var(--petrole); text-decoration: none; transition: translate 0.35s var(--ease-sortie); }
.ar-metier svg { width: 1.2rem; height: 1.2rem; flex: none; stroke: var(--or-texte); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s var(--ease-sortie); }
.ar-metier:hover { translate: 0 -3px; }
.ar-metier:hover svg { translate: 4px 0; }
.ar-metier:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 3px; }

/* Appel final : bande sombre, comme sur les pages de services */
.ar-final { position: relative; overflow: hidden; }
.ar-final::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 140% at 12% 100%, rgba(12, 69, 70, 0.85) 0%, rgba(12, 69, 70, 0) 70%), radial-gradient(40% 90% at 92% 40%, rgba(242, 217, 172, 0.1) 0%, rgba(242, 217, 172, 0) 70%); }
.ar-final .conteneur { position: relative; }
.ar-final__grille { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 64em) { .ar-final__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.ar-final__texte { max-width: 44rem; margin-top: var(--e-4); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--creme); }

/* --------------------------------------------------------------------------
   2. Article : image pleine largeur avec le titre dessus, chapeau, partage
   -------------------------------------------------------------------------- */
.ar-art { padding-top: var(--h-entete); background: var(--petrole-900); }
.ar-art__ariane { background: var(--papier); }
.ar-art__couv { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(26rem, 64vh, 40rem); overflow: hidden; background: var(--petrole-900); }
.ar-art__couv-image { position: absolute; inset: 0; z-index: -2; }
.ar-art__couv-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; animation: ar-zoom 2.4s var(--ease-sortie) both; }
@keyframes ar-zoom { from { scale: 1.08; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .ar-art__couv-image img { animation: none; } }
.ar-art__couv::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(2, 24, 24, 0.88) 0%, rgba(2, 24, 24, 0.6) 36%, rgba(2, 24, 24, 0.04) 72%), linear-gradient(0deg, rgba(2, 24, 24, 0.9) 0%, rgba(2, 24, 24, 0) 52%); }
@media (max-width: 47.99em) { .ar-art__couv::after { background: linear-gradient(0deg, rgba(2, 24, 24, 0.95) 0%, rgba(2, 24, 24, 0.72) 55%, rgba(2, 24, 24, 0.25) 100%); } }
.ar-art__couv-texte { width: 100%; padding-block: clamp(2rem, 5vw, 3.5rem); }
.ar-art__couv .ar-etiquette { color: var(--or-clair); }
.ar-art__couv .ar-meta { color: var(--creme-doux); }
.ar-art__titre { max-width: 50rem; margin: var(--e-4) 0 0; font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.1 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.ar-art__tete { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, #021818 0%, #062A2B 100%); }
.ar-art__chapo { max-width: 56rem; margin: 0; font: italic 500 clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem) / 1.45 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.ar-art__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid rgba(242, 217, 172, 0.25); }
.ar-art__auteur { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--creme-doux); }
.ar-art__auteur img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }
.ar-art__auteur strong { color: var(--creme); font-weight: 500; }
.ar-partage { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ar-partage a, .ar-partage button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid rgba(242, 217, 172, 0.4); border-radius: 50%; background: transparent; color: var(--or-clair); cursor: pointer; transition: background 0.25s, color 0.25s; }
.ar-partage a:hover, .ar-partage button:hover { background: var(--or-clair); color: var(--petrole-900); }
.ar-partage a:focus-visible, .ar-partage button:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.ar-partage svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ar-partage__etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ar-sommaire { margin-top: var(--e-5); }
.ar-sommaire > summary { display: inline-flex; align-items: center; gap: 12px; padding: 0.6rem 1.1rem; border: 1px solid rgba(242, 217, 172, 0.4); border-radius: 999px; font-size: 0.9375rem; font-weight: 500; color: var(--or-clair); cursor: pointer; list-style: none; }
.ar-sommaire > summary::-webkit-details-marker { display: none; }
.ar-sommaire > summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate 0.2s; }
.ar-sommaire[open] > summary::after { rotate: -135deg; translate: 0 2px; }
.ar-sommaire > summary:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.ar-sommaire ol { display: grid; gap: 4px 32px; margin: var(--e-4) 0 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .ar-sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ar-sommaire a { display: block; padding: 0.45rem 0; border-bottom: 1px solid rgba(242, 217, 172, 0.18); color: var(--creme); text-decoration: none; line-height: 1.35; }
.ar-sommaire a:hover { color: var(--or-clair); }

/* Barre de lecture : un filet doré sous l'en-tête (ajoutée par js/articles.js) */
.ar-progres { position: fixed; left: 0; top: var(--h-entete); z-index: 40; width: 100%; height: 3px; pointer-events: none; background: transparent; }
.ar-progres > span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--or-texte), var(--or-clair)); }

/* --------------------------------------------------------------------------
   3. Corps de l'article : des sections qui alternent clair et sombre (js/articles.js) ; sans JavaScript, une colonne
   -------------------------------------------------------------------------- */
.ar-corps { background: var(--papier); color: var(--encre); font-size: 1.1875rem; line-height: 1.75; counter-reset: ar-sec; }
.ar-corps:not(.ar-corps--sections) { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem); }
.ar-corps:not(.ar-corps--sections) > * { max-width: 44rem; margin-inline: auto; }
.ar-sec { position: relative; padding-block: clamp(3.5rem, 2rem + 5.5vw, 7rem); counter-increment: ar-sec; color: var(--texte); }
.ar-sec__int { position: relative; width: min(100% - 2.5rem, 80rem); margin-inline: auto; }
.ar-corps .ar-sec__int > * { max-width: 44rem; margin-inline: auto; }
.ar-corps .ar-sec__int > .ar-large { max-width: none; }
.ar-sec--clair { background: var(--papier); }
.ar-sec--creme { background: var(--creme); }
.ar-sec--sombre { background: var(--petrole); }
.ar-sec--nuit { background: var(--petrole-900); }
.ar-sec--sombre::before, .ar-sec--nuit::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 96% 4%, rgba(242, 217, 172, 0.1) 0 1px, transparent 1px 26px); -webkit-mask-image: radial-gradient(38% 60% at 96% 4%, #000 0%, transparent 72%); mask-image: radial-gradient(38% 60% at 96% 4%, #000 0%, transparent 72%); }

.ar-corps p { margin: 1.35em 0 0; text-wrap: pretty; }
.ar-corps h2 { margin: 0; font: 500 clamp(1.875rem, 1.5rem + 1.1vw, 2.375rem) / 1.15 var(--f-titre); color: var(--titre, var(--petrole)); text-wrap: pretty; scroll-margin-top: calc(var(--h-entete) + 1.5rem); }
.ar-sec h2::before { content: counter(ar-sec, decimal-leading-zero); display: block; margin-bottom: 0.9rem; font: 400 1.25rem / 1 var(--f-titre); letter-spacing: 0.22em; color: var(--accent, var(--or-texte)); }
.ar-sec h2::after { content: ""; display: block; width: 3.5rem; height: 1px; margin-top: 1.4rem; background: var(--accent, var(--or-texte)); }
.ar-corps h3 { margin: clamp(2rem, 3.5vw, 2.75rem) 0 0; font: 600 clamp(1.4375rem, 1.3rem + 0.45vw, 1.5625rem) / 1.25 var(--f-titre); color: var(--titre, var(--petrole)); text-wrap: pretty; scroll-margin-top: calc(var(--h-entete) + 1.5rem); }
.ar-corps .ar-sec__chapo { margin-top: 1.6rem; font: italic 500 clamp(1.3125rem, 1.15rem + 0.55vw, 1.5rem) / 1.5 var(--f-titre); color: var(--titre, var(--petrole)); }
.ar-corps h2 + p { margin-top: 1.6rem; }
.ar-corps ul, .ar-corps ol { margin: 1.35em 0 0; padding-left: 1.4em; }
.ar-corps ul { list-style: disc; }
.ar-corps ol { list-style: decimal; }
.ar-corps li { margin-top: 0.7em; padding-left: 0.3em; text-wrap: pretty; }
.ar-corps li::marker { color: var(--accent, var(--or-texte)); }
.ar-corps a:not([class]) { color: var(--titre, var(--petrole)); text-decoration-color: var(--accent, var(--or-texte)); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color 0.25s, color 0.25s; }
.ar-corps a:not([class]):hover { color: var(--accent, var(--or-texte)); }
.ar-corps strong { font-weight: 600; color: var(--titre, var(--petrole)); }
.ar-corps code { padding: 0.1em 0.4em; border-radius: 4px; background: rgba(127, 127, 127, 0.18); font-size: 0.9em; }
.ar-corps hr { margin: 2.5rem auto 0; border: 0; border-top: 1px solid rgba(127, 127, 127, 0.3); }

/* Phrase forte (citation) : une ligne centrée entre deux filets dorés, comme les phrases-clés des pages de services */
.ar-corps blockquote { position: relative; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-block: 1px solid var(--accent, var(--or-texte)); text-align: center; font: italic 500 clamp(1.5rem, 1.25rem + 1vw, 2rem) / 1.35 var(--f-titre); color: var(--titre, var(--petrole)); text-wrap: balance; }
.ar-corps blockquote p { margin: 0; }
.ar-corps blockquote cite { display: block; margin-top: 0.75rem; font: normal 400 0.9375rem / 1.4 var(--f-texte); color: var(--texte-doux); }

/* Image avec légende */
.ar-corps figure { margin: clamp(2rem, 4vw, 3rem) auto 0; }
.ar-corps figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ar-corps figcaption { margin-top: 0.7rem; font-size: 0.875rem; line-height: 1.5; font-style: italic; color: var(--texte-doux); }

/* « En bref » : une carte à filet doré */
.ar-bref { margin: 0 auto clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--accent, var(--or-texte)); border-radius: 14px; }
.ar-bref__titre { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, var(--or-texte)); }
.ar-bref ul { margin: 0.9em 0 0; padding-left: 1.2em; }
.ar-bref li { margin-top: 0.6em; }

/* Étapes numérotées (« 1. Dire clairement… ») : des cartes avec un grand chiffre doré (js/articles.js) */
.ar-etapes { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 48em) { .ar-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .ar-etapes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ar-etape { grid-column: span 2; }
  .ar-etape:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .ar-etape:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
.ar-etape { padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid rgba(242, 217, 172, 0.28); border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.ar-sec--clair .ar-etape, .ar-sec--creme .ar-etape { background: #fff; border-color: rgba(10, 57, 58, 0.14); }
.ar-etape__num { display: block; font: 300 3rem / 1 var(--f-titre); color: var(--accent, var(--or-texte)); }
.ar-corps .ar-etape h3 { margin-top: 0.6rem; font-size: 1.5rem; }
.ar-corps .ar-etape p { margin-top: 0.9em; font-size: 1.0625rem; line-height: 1.65; }
.ar-corps .ar-etape p:last-child { padding-top: 0.9em; border-top: 1px solid rgba(127, 127, 127, 0.3); }

/* Appel « audit offert » dans le texte : bande à filet doré */
.ar-appel { position: relative; overflow: hidden; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.75rem, 4vw, 3rem); border-radius: 16px; background: linear-gradient(135deg, #0C4546 0%, #062A2B 100%); box-shadow: inset 0 0 0 1px rgba(242, 217, 172, 0.45); color: var(--creme); }
.ar-sec--sombre .ar-appel, .ar-sec--nuit .ar-appel { background: linear-gradient(135deg, #021818 0%, #062A2B 100%); }
.ar-appel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 96% 0%, rgba(242, 217, 172, 0.14) 0 1px, transparent 1px 24px); -webkit-mask-image: radial-gradient(50% 120% at 96% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(50% 120% at 96% 0%, #000 0%, transparent 70%); }
.ar-appel > * { position: relative; }
.ar-corps .ar-appel p { margin: 0; color: var(--creme); }
.ar-corps .ar-appel .ar-appel__titre { font: 600 clamp(1.625rem, 1.4rem + 0.7vw, 2rem) / 1.2 var(--f-titre); color: var(--or-clair); }
.ar-corps .ar-appel .ar-appel__texte { max-width: 44rem; margin-top: 0.7rem; font-size: 1.125rem; line-height: 1.6; }
.ar-appel .ar-actions { margin-top: 1.5rem; }

/* Tableaux : une profession à la fois (choix en haut), ou les six ; première colonne fixe */
.ar-tableau { position: relative; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.ar-tableau__defile { overflow-x: auto; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 57, 58, 0.14); -webkit-overflow-scrolling: touch; }
.ar-corps table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 1rem; line-height: 1.45; color: var(--encre); }
.ar-corps .ar-tableau--large[data-col="tous"] table { min-width: 46rem; table-layout: fixed; }
.ar-corps .ar-tableau--large[data-col="tous"] tr > :first-child { width: 10.5rem; }
.ar-corps th, .ar-corps td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(10, 57, 58, 0.12); text-align: left; vertical-align: top; }
.ar-corps tbody tr:last-child td, .ar-corps tbody tr:last-child th { border-bottom: 0; }
.ar-corps thead th { background: var(--petrole); color: var(--creme); font-weight: 500; font-size: 0.9375rem; }
.ar-corps tbody th, .ar-corps tbody td:first-child { font-weight: 500; color: var(--petrole); background: #fff; }
.ar-corps tr > :first-child { position: sticky; left: 0; z-index: 1; min-width: 9.5rem; box-shadow: 1px 0 0 rgba(10, 57, 58, 0.12); }
.ar-corps thead tr > :first-child { z-index: 2; background: var(--petrole); }
.ar-corps td[data-v="oui"] { background: rgba(46, 107, 69, 0.12); color: #1D4A31; }
.ar-corps td[data-v="encadre"] { background: rgba(176, 99, 57, 0.13); color: #6B3A1B; }
.ar-corps td[data-v="non"] { background: rgba(163, 55, 55, 0.11); color: #7A2323; }
.ar-corps td[data-v] { font-weight: 500; }
.ar-metiers-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1rem; padding: 0; border: 0; }
.ar-metiers-choix legend { float: left; margin: 0 0.75rem 0 0; padding: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent, var(--or-texte)); line-height: 2.4; }
.ar-metiers-choix button { padding: 0.45rem 0.95rem; border: 1px solid rgba(127, 127, 127, 0.5); border-radius: 999px; background: transparent; font: inherit; font-size: 0.9375rem; color: var(--titre, var(--petrole)); cursor: pointer; transition: background 0.2s, color 0.2s; }
.ar-metiers-choix button:hover { border-color: var(--accent, var(--or-texte)); }
.ar-metiers-choix button[aria-pressed="true"] { border-color: var(--accent, var(--or-texte)); background: var(--accent, var(--or-texte)); color: var(--petrole-900); }
.ar-sec--clair .ar-metiers-choix button[aria-pressed="true"], .ar-sec--creme .ar-metiers-choix button[aria-pressed="true"] { background: var(--petrole); border-color: var(--petrole); color: var(--creme); }
.ar-metiers-choix button:focus-visible { outline: 2px solid var(--accent, var(--or-texte)); outline-offset: 2px; }
.ar-tableau[data-col] table { min-width: 0; }
.ar-tableau[data-col="2"] tr > :nth-child(n+3), .ar-tableau[data-col="3"] tr > :nth-child(n+2):not(:nth-child(3)),
.ar-tableau[data-col="4"] tr > :nth-child(n+2):not(:nth-child(4)), .ar-tableau[data-col="5"] tr > :nth-child(n+2):not(:nth-child(5)),
.ar-tableau[data-col="6"] tr > :nth-child(n+2):not(:nth-child(6)), .ar-tableau[data-col="7"] tr > :nth-child(n+2):not(:nth-child(7)) { display: none; }
.ar-tableau[data-col="2"] tr > :nth-child(2) { display: table-cell; }
.ar-tableau[data-col]:not([data-col="tous"]) tr > :first-child { position: static; width: 46%; min-width: 0; box-shadow: none; }
.ar-corps .ar-sec__int > .ar-tableau[data-col]:not([data-col="tous"]) { max-width: 52rem; }

/* Mention de fin ; sources : une ligne repliée tout en bas (jamais dans le texte). La FAQ est la section faq5 des autres pages (css/faq-v5.css). */
.ar-pied-art .ar-mention { margin: 0 auto 1.25rem; font-size: 0.9375rem; font-style: italic; line-height: 1.55; color: var(--taupe); }
.ar-pied-art { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--papier); }
.ar-pied-art > .conteneur > * { max-width: 44rem; margin-inline: auto; }
.ar-sources { font-size: 0.875rem; line-height: 1.6; color: var(--taupe); }
.ar-sources > summary { cursor: pointer; font-size: 0.9375rem; color: var(--taupe); }
.ar-sources > summary:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 3px; }
.ar-sources ul { margin: 1rem 0 0; padding-left: 1.1em; }
.ar-sources li { margin-top: 0.6rem; overflow-wrap: anywhere; }
.ar-sources a { color: var(--taupe); text-decoration-color: rgba(10, 57, 58, 0.35); }

/* Encart autrice */
.ar-auteur { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 16px; background: var(--creme); }
.ar-auteur__photo { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; object-position: 50% 18%; }
.ar-auteur__nom { margin: 0; font: 600 1.5rem / 1.2 var(--f-titre); color: var(--petrole); }
.ar-auteur p { margin: 0.4rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--encre); }
.ar-auteur p.ar-auteur__nom { margin: 0; }
.ar-auteur .btn-cartouche { margin-top: 1rem; }
@media (min-width: 40em) { .ar-auteur { grid-template-columns: auto 1fr; align-items: start; gap: 1.75rem; } }
.ar-lies__titre { margin: 0 0 var(--e-5); }

/* --------------------------------------------------------------------------
   4. Carte plein écran en haut de la liste : un plan de ville, une recherche qui passe par les six professions
   (js/articles-carte.js ; sans JavaScript ou sans animation, la première recherche reste affichée)
   -------------------------------------------------------------------------- */
.ar-ville { position: relative; isolation: isolate; overflow: hidden; height: calc(100svh - var(--h-entete) - 3.25rem); min-height: 36rem; max-height: 64rem; background: #062A2B; color: var(--creme); }
.ar-carte__fond { position: absolute; inset: 0; z-index: -2; }
.ar-carte__svg { display: block; width: 100%; height: 100%; }
.ar-carte__voile { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 95% at 62% 48%, rgba(2, 24, 24, 0) 45%, rgba(2, 24, 24, 0.6) 100%), linear-gradient(180deg, rgba(2, 24, 24, 0.55) 0%, rgba(2, 24, 24, 0) 24%, rgba(2, 24, 24, 0) 68%, rgba(2, 24, 24, 0.72) 100%); }
.ar-carte__ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(1rem, 2.5vw, 2rem); pointer-events: none; }
.ar-monde { transform-origin: 1500px 850px; transition: transform 3.2s cubic-bezier(0.45, 0.05, 0.2, 1); }
.ar-derive { transform-origin: 1500px 850px; animation: ar-derive 44s ease-in-out infinite alternate; }
@keyframes ar-derive { from { transform: translate(-26px, -12px) scale(1); } to { transform: translate(26px, 14px) scale(1.035); } }
@keyframes ar-onde { from { scale: 1; opacity: 0.85; } to { scale: 3.8; opacity: 0; } }
@keyframes ar-curseur { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ar-derive { animation: none; } .ar-monde { transition: none; } }

/* le plan */
.ar-m-terre { fill: #0D3B3D; }
.ar-m-vagues path { stroke: #fff; }
.ar-m-pontons path { stroke: rgba(246, 242, 234, 0.35); stroke-width: 7; }
.ar-m-r3 { fill: none; stroke: rgba(246, 242, 234, 0.075); stroke-width: 1.3; }
.ar-m-r2 { fill: none; stroke: rgba(246, 242, 234, 0.14); stroke-width: 2.4; }
.ar-m-r1 { fill: none; stroke: rgba(246, 242, 234, 0.22); stroke-width: 5; stroke-linecap: round; }
.ar-m-b1, .ar-m-b2, .ar-m-b3 { stroke-width: 2; stroke-linejoin: round; stroke: currentColor; }
.ar-m-b1 { fill: rgba(246, 242, 234, 0.045); color: rgba(246, 242, 234, 0.045); }
.ar-m-b2 { fill: rgba(246, 242, 234, 0.075); color: rgba(246, 242, 234, 0.075); }
.ar-m-b3 { fill: rgba(246, 242, 234, 0.11); color: rgba(246, 242, 234, 0.11); }
.ar-m-cour { fill: #0D3B3D; fill-opacity: 0.85; }
.ar-m-parc { fill: #145447; }
.ar-m-arbre { fill: none; stroke: #20725F; stroke-width: 7; stroke-linecap: round; opacity: 0.85; }
.ar-m-vieux-bord { fill: none; stroke: rgba(242, 217, 172, 0.2); stroke-width: 1.5; stroke-dasharray: 3 7; }
.ar-m-colline { fill: #115148; opacity: 0.92; }
.ar-m-niveaux ellipse { fill: none; stroke: #1F6E5F; stroke-width: 1.6; opacity: 0.75; }
.ar-m-rive { fill: none; stroke: #126055; stroke-width: 56; stroke-linecap: round; opacity: 0.7; }
.ar-m-eau { fill: none; stroke: #0A3547; stroke-width: 24; stroke-linecap: round; }
.ar-m-pont { fill: none; stroke: #2C6D6F; stroke-width: 9; }
.ar-m-av-bord { stroke: #072728; stroke-width: 15; }
.ar-m-av { stroke: #2D7072; stroke-width: 9.5; }
.ar-m-plage { fill: none; stroke: #20696A; stroke-width: 13; }
.ar-m-prom-bord { fill: none; stroke: #082A2B; stroke-width: 15; }
.ar-m-prom { fill: none; stroke: #B79B63; stroke-width: 8.5; opacity: 0.92; }
.ar-m-noms text { font-family: var(--f-texte); }
.ar-m-noms .ar-m-nom-mer { font-size: 36px; font-style: italic; letter-spacing: 0.5em; fill: rgba(150, 214, 228, 0.34); }
.ar-m-noms .ar-m-nom-mer--petit { font-size: 22px; letter-spacing: 0.18em; }
.ar-m-noms .ar-m-nom-route { font-size: 17px; letter-spacing: 0.14em; fill: rgba(246, 242, 234, 0.72); }
.ar-m-noms .ar-m-nom-lieu { font-size: 15px; letter-spacing: 0.28em; fill: rgba(246, 242, 234, 0.42); }

/* les repères : ils tombent sur la carte, le repère doré en dernier */
.ar-ep__corps { animation: ar-chute 0.75s cubic-bezier(0.3, 1.35, 0.5, 1) both; animation-delay: var(--d, 0s); }
.ar-ep--sort .ar-ep__corps { animation: ar-sort 0.45s ease-in both; animation-delay: 0s; }
@keyframes ar-chute { from { opacity: 0; transform: translateY(-80px); } 55% { opacity: 1; } to { opacity: 1; transform: translateY(0); } }
@keyframes ar-sort { to { opacity: 0; transform: translateY(-24px) scale(0.85); } }
.ar-ep__ombre { fill: rgba(0, 0, 0, 0.4); }
.ar-ep__forme { fill: #F6F2EA; stroke: #062A2B; stroke-width: 2; }
.ar-ep__cercle { fill: #062A2B; }
.ar-ep__lettre { font: 600 14px var(--f-texte); fill: #F6F2EA; }
.ar-ep--vous .ar-ep__forme { fill: #F2D9AC; }
.ar-ep__onde { fill: none; stroke: #F2D9AC; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ar-onde 2.4s ease-out infinite; }
.ar-ep__etiquette rect { fill: #F2D9AC; }
.ar-ep__etiquette text { font: 600 17px var(--f-texte); fill: #062A2B; }
@media (prefers-reduced-motion: reduce) { .ar-ep__corps, .ar-ep__onde, .ar-res, .ar-recherche__curseur { animation: none; } }

/* la recherche et les résultats, comme sur une vraie carte */
.ar-recherche { display: flex; align-items: center; gap: 0.75rem; width: min(100%, 31rem); padding: 0.9rem 1.15rem; border-radius: 999px; background: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42); color: #202124; font: 400 1.0625rem / 1.2 Roboto, Arial, "Helvetica Neue", sans-serif; }
.ar-recherche svg { flex: none; width: 1.25rem; height: 1.25rem; stroke: #5f6368; fill: none; stroke-width: 2; stroke-linecap: round; }
.ar-recherche__texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-recherche__curseur { flex: none; width: 1.5px; height: 1.3rem; margin-left: -0.45rem; background: #202124; animation: ar-curseur 1.1s steps(1) infinite; }
.ar-recherche__croix { margin-left: auto; display: grid; }
.ar-resultats { transition: opacity 0.35s; width: min(100%, 26rem); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); color: #202124; font-family: Roboto, Arial, "Helvetica Neue", sans-serif; }
.ar-resultats__titre { display: flex; justify-content: space-between; margin: 0; padding: 0.85rem 1.1rem; border-bottom: 1px solid #ebedf0; font-size: 0.9375rem; line-height: 1.3; }
.ar-resultats__titre b { font-weight: 600; }
.ar-resultats__titre span { color: #5f6368; }
.ar-resultats__liste { margin: 0; padding: 0; list-style: none; }
.ar-res { display: flex; gap: 0.85rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid #f0f1f3; animation: ar-res 0.6s var(--d, 0s) both; }
.ar-res:last-child { border-bottom: 0; }
@keyframes ar-res { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.ar-res__lettre { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: 0.1rem; border-radius: 50%; background: #062A2B; font-size: 0.8125rem; font-weight: 600; color: #F6F2EA; }
.ar-res p { margin: 0; }
.ar-res__nom { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
.ar-res__cat, .ar-res__horaire { font-size: 0.875rem; line-height: 1.4; color: #5f6368; }
.ar-res__ouvert { font-weight: 500; color: #188038; }
.ar-res__ferme { font-weight: 500; color: #C5221F; }
.ar-carte__metiers { position: absolute; left: clamp(1rem, 2.5vw, 2rem); right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 1.75rem); display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.ar-carte__metiers button { padding: 0.55rem 1.05rem; border: 1px solid rgba(242, 217, 172, 0.42); border-radius: 999px; background: rgba(2, 24, 24, 0.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: inherit; font-size: 0.9375rem; color: var(--creme); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.ar-carte__metiers button:hover { border-color: var(--or-clair); }
.ar-carte__metiers button[aria-pressed="true"] { border-color: var(--or-clair); background: var(--or-clair); color: var(--petrole-900); }
.ar-carte__metiers button:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
@media (max-width: 63.99em) {
  .ar-ville { min-height: 34rem; }
  .ar-recherche { padding: 0.75rem 1rem; font-size: 1rem; }
  .ar-resultats { position: absolute; left: 1rem; right: 1rem; bottom: 4.6rem; width: auto; max-width: 26rem; }
  .ar-res { padding: 0.65rem 0.9rem; }
  .ar-res__horaire { display: none; }
  .ar-carte__metiers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ar-carte__metiers::-webkit-scrollbar { display: none; }
  .ar-carte__metiers button { white-space: nowrap; }
}

/* la carte de France : même modèle que sur la page Tarifs (arcs qui partent de Nice vers les villes) */
.ar-france__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64em) { .ar-france__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }
.ar-france__reperes { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--creme); }
.ar-france__reperes li { display: flex; align-items: center; gap: 8px; }
.ar-france__reperes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cuivre); flex: none; }
.ar-france__carte { width: 100%; max-width: 36rem; justify-self: center; }
.ar-fr { position: relative; margin: 0; padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.25rem); border-radius: 12px; background: radial-gradient(ellipse 55% 45% at 82% 68%, rgba(176, 99, 57, 0.22), transparent 70%), radial-gradient(ellipse 80% 70% at 45% 40%, rgba(224, 189, 142, 0.1), transparent 70%), linear-gradient(160deg, var(--petrole), var(--petrole-900)); box-shadow: 0 2.5rem 4rem -2rem rgba(2, 24, 24, 0.6), inset 0 0 0 1px rgba(242, 217, 172, 0.3); overflow: hidden; }
.ar-fr__svg { display: block; width: 100%; height: auto; overflow: visible; }
#ar-fr-points circle { fill: var(--or); opacity: 0.32; }
.ar-fr__trame { fill: url(#ar-fr-points); }
.ar-fr__contour { fill: none; stroke: var(--or); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
.ar-fr__arc { fill: none; stroke: var(--or-clair); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.6; }
.ar-fr__ville { fill: var(--or); transform-box: fill-box; transform-origin: center; }
.ar-fr__ville--grande { fill: var(--or-clair); filter: drop-shadow(0 0 4px rgba(242, 217, 172, 0.7)); }
.ar-fr__nom { fill: var(--creme); font: 400 13px / 1 var(--f-texte); letter-spacing: 0.02em; opacity: 0.9; }
.ar-fr__nom--nice { fill: var(--or-clair); font: italic 500 22px / 1 var(--f-titre); opacity: 1; }
.ar-fr__nice { fill: var(--cuivre); stroke: var(--or-clair); stroke-width: 2; }
.ar-fr__onde { fill: none; stroke: var(--or-clair); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ar-fr__halo { opacity: 0.9; }
.ar-fr__legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: var(--e-3) 0 0; font-size: 0.875rem; color: var(--creme-doux); }
.ar-fr__legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ar-fr__puce { width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 3px rgba(176, 99, 57, 0.3); }
.ar-fr__puce--ville { width: 7px; height: 7px; background: var(--or-clair); box-shadow: 0 0 6px rgba(242, 217, 172, 0.8); }
.ar-fr__pause { position: absolute; top: 0.75rem; right: 0.75rem; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(224, 189, 142, 0.55); border-radius: 50%; background: rgba(2, 24, 24, 0.55); color: var(--or-clair); cursor: pointer; }
.js .ar-fr__pause { display: grid; }
.ar-fr__pause svg { width: 18px; height: 18px; fill: currentColor; }
.ar-fr__lire { display: none; }
.ar-fr.est-en-pause .ar-fr__lire { display: block; }
.ar-fr.est-en-pause .ar-fr__arret { display: none; }
.ar-fr__pause:hover { background: var(--petrole); }
.ar-fr__pause:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.js .ar-fr:not(.est-visible) .ar-fr__contour, .js .ar-fr:not(.est-visible) .ar-fr__arc { stroke-dashoffset: 1; }
.js .ar-fr:not(.est-visible) .ar-fr__trame, .js .ar-fr:not(.est-visible) .ar-fr__nom { opacity: 0; }
.js .ar-fr:not(.est-visible) .ar-fr__ville { opacity: 0.15; }
.js .ar-fr.est-visible .ar-fr__contour { animation: ar-fr-trace 1.4s ease-in-out both; }
.js .ar-fr.est-visible .ar-fr__trame { animation: ar-fr-apparait 1.2s ease 0.6s both; }
.js .ar-fr.est-visible .ar-fr__arc { animation: ar-fr-trace 1.1s ease-out var(--d) both; }
.js .ar-fr.est-visible .ar-fr__ville { animation: ar-fr-allume 0.5s ease-out var(--d) both; }
.js .ar-fr.est-visible .ar-fr__nom { animation: ar-fr-apparait-nom 0.5s ease var(--d) both; }
.js .ar-fr.est-visible .ar-fr__nom--nice { animation: none; }
.js .ar-fr .ar-fr__onde { animation: ar-fr-pulse 2.4s ease-out infinite; }
.js .ar-fr .ar-fr__onde--2 { animation-delay: 1.2s; }
.js .ar-fr .ar-fr__nice { animation: ar-fr-battement 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ar-fr.est-en-pause .ar-fr__onde, .ar-fr.est-en-pause .ar-fr__nice { animation-play-state: paused; }
@keyframes ar-fr-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ar-fr-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes ar-fr-apparait-nom { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes ar-fr-allume { 0% { opacity: 0.15; scale: 0.4; } 60% { opacity: 1; scale: 1.8; } 100% { opacity: 1; scale: 1; } }
@keyframes ar-fr-pulse { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 4.2; } }
@keyframes ar-fr-battement { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
.ar-fr__nom { font-size: 17px; paint-order: stroke; stroke: #062A2B; stroke-width: 3px; stroke-linejoin: round; }
.ar-fr__nom--nice { font-size: 28px; }
@media (max-width: 47.99em) { .ar-fr__nom { font-size: 24px; } .ar-fr__nom--nice { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { .ar-fr__pause { display: none !important; } .ar-fr__onde { opacity: 0 !important; } .ar-fr *, .ar-fr *::before, .ar-fr *::after { animation: none !important; transition: none !important; } }

/* la page « Audit de visibilité » de l'appel final : les lignes se tracent, les priorités s'allument, le cachet tombe */
.ar-final__rapport { width: 100%; max-width: 27rem; justify-self: end; }
.ar-rap { position: relative; padding: 0.5rem 1.25rem 1.5rem 0.5rem; }
.ar-rap__feuille { position: relative; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 10px; background: #FBF8F2; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.75); color: var(--petrole); transform: rotate(-1.6deg); }
.ar-rap__feuille--fond { position: absolute; inset: 0.5rem 1.25rem 1.5rem 0.5rem; padding: 0; background: #E7DFCE; transform: rotate(2.8deg) translate(10px, 6px); box-shadow: none; }
.ar-rap__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 0.9rem; border-bottom: 1px solid var(--or-texte); }
.ar-rap__marque { font: 600 1.5rem / 1.1 var(--f-titre); }
.ar-rap__sous { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-texte); }
.ar-rap__lignes, .ar-rap__priorites ol { margin: 0; padding: 0; list-style: none; }
.ar-rap__lignes { display: grid; gap: 1.1rem; margin-top: 1.15rem; }
.ar-rap__lignes li { display: flex; gap: 0.9rem; align-items: flex-start; }
.ar-rap__ico { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--or-texte); border-radius: 50%; }
.ar-rap__ico svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--petrole); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-rap__lignes b { display: block; margin-bottom: 0.45rem; font: 600 1rem / 1.3 var(--f-texte); }
.ar-rap__lignes div { flex: 1; min-width: 0; }
.ar-rap__lignes i, .ar-rap__priorites i { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: #DAD2C0; transform-origin: left; }
.ar-rap__lignes i.ar-rap__court { width: 62%; }
.ar-rap__priorites { margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid rgba(10, 57, 58, 0.18); }
.ar-rap__priorites p { margin: 0 0 0.7rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-texte); }
.ar-rap__priorites ol { display: grid; gap: 0.6rem; }
.ar-rap__priorites li { display: flex; align-items: center; gap: 0.75rem; }
.ar-rap__priorites span { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--petrole); font-size: 0.8125rem; font-weight: 600; color: var(--or-clair); }
.ar-rap__priorites i { flex: none; width: var(--l); margin-top: 0; background: #CFC6B1; }
.ar-rap__cachet { position: absolute; right: 0; bottom: 0; width: 5.75rem; color: var(--cuivre); transform: rotate(-14deg); }
.ar-rap__cachet svg { display: block; width: 100%; height: auto; }
.ar-rap__cachet text { fill: currentColor; }
.ar-rap__cachet-t1 { font: 600 20px var(--f-texte); letter-spacing: 0.22em; }
.ar-rap__cachet-t2 { font: italic 600 27px var(--f-titre); }
@media (prefers-reduced-motion: no-preference) {
  .js .ar-final__rapport:not(.est-visible) .ar-rap__lignes i, .js .ar-final__rapport:not(.est-visible) .ar-rap__priorites i { scale: 0 1; }
  .js .ar-final__rapport:not(.est-visible) .ar-rap__priorites span, .js .ar-final__rapport:not(.est-visible) .ar-rap__cachet { opacity: 0; }
  .ar-final__rapport.est-visible .ar-rap__lignes i { animation: ar-ecrit 0.9s ease-out both; }
  .ar-final__rapport.est-visible .ar-rap__lignes li:nth-child(1) i { animation-delay: 0.5s; }
  .ar-final__rapport.est-visible .ar-rap__lignes li:nth-child(2) i { animation-delay: 1s; }
  .ar-final__rapport.est-visible .ar-rap__lignes li:nth-child(3) i { animation-delay: 1.5s; }
  .ar-final__rapport.est-visible .ar-rap__lignes li:nth-child(4) i { animation-delay: 2s; }
  .ar-final__rapport.est-visible .ar-rap__lignes i + i { animation-duration: 0.7s; }
  .ar-final__rapport.est-visible .ar-rap__priorites li { animation: ar-monte 0.7s var(--ease-sortie) both; }
  .ar-final__rapport.est-visible .ar-rap__priorites li:nth-child(1) { animation-delay: 2.5s; }
  .ar-final__rapport.est-visible .ar-rap__priorites li:nth-child(2) { animation-delay: 2.8s; }
  .ar-final__rapport.est-visible .ar-rap__priorites li:nth-child(3) { animation-delay: 3.1s; }
  .ar-final__rapport.est-visible .ar-rap__priorites i { animation: ar-ecrit 0.8s ease-out both; }
  .ar-final__rapport.est-visible .ar-rap__priorites li:nth-child(1) i { animation-delay: 2.7s; }
  .ar-final__rapport.est-visible .ar-rap__priorites li:nth-child(2) i { animation-delay: 3s; }
  .ar-final__rapport.est-visible .ar-rap__priorites li:nth-child(3) i { animation-delay: 3.3s; }
  .ar-final__rapport.est-visible .ar-rap__cachet { animation: ar-cachet 0.7s 3.6s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
}
@keyframes ar-cachet { from { opacity: 0; transform: rotate(-34deg) scale(1.9); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }

/* --------------------------------------------------------------------------
   5. Le plan sur le côté (js/articles.js) : visible sur grand écran, il suit la lecture ; il s'efface quand un élément large passe derrière
   -------------------------------------------------------------------------- */
.ar-plan { display: none; }
@media (min-width: 78em) {
  .ar-corps--sections { position: relative; }
  /* un rail aussi haut que le corps de l'article : la carte y reste collée sous l'en-tête et s'arrête avec l'article */
  .ar-corps--sections > .ar-plan { display: block; position: absolute; top: 0; bottom: 0; left: max(1.25rem, calc((100% - 80rem) / 2)); width: 14.5rem; z-index: 6; pointer-events: none; }
  .ar-plan__boite { position: sticky; top: calc(var(--h-entete) + 1.75rem); width: 100%; max-height: calc(100vh - var(--h-entete) - 3.5rem); overflow: auto; padding: 1.1rem 0.9rem 1.15rem; border: 1px solid rgba(242, 217, 172, 0.34); border-radius: 14px; background: rgba(2, 24, 24, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--creme); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); pointer-events: auto; }
  /* le texte et les éléments larges prennent la place à droite de la colonne du plan : rien ne passe derrière */
  .ar-avec-plan .ar-sec__int { padding-left: 16.5rem; }
  .ar-avec-plan .ar-sommaire { display: none; }
}
.ar-plan__titre { margin: 0 0 0.7rem 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-clair); }
.ar-plan ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ar-plan .ar-plan__lien { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: baseline; gap: 0.3rem; padding: 0.4rem 0.5rem 0.4rem 0.6rem; border-left: 2px solid rgba(242, 217, 172, 0.2); border-radius: 0 6px 6px 0; font-size: 0.8125rem; line-height: 1.35; color: rgba(246, 242, 234, 0.72); text-decoration: none; transition: color 0.25s, border-color 0.25s, background 0.25s; }
.ar-plan .ar-plan__lien span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.ar-plan .ar-plan__lien b { font: 400 0.8125rem / 1 var(--f-titre); letter-spacing: 0.1em; color: var(--or-clair); }
.ar-plan .ar-plan__lien:hover { color: var(--creme); }
.ar-plan .ar-plan__lien[aria-current="location"] { color: var(--creme); border-left-color: var(--or-clair); background: rgba(242, 217, 172, 0.1); }
.ar-plan .ar-plan__lien:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   6. Du mouvement dans l'article : apparition douce, visuels animés, listes en cartes
   -------------------------------------------------------------------------- */
.js .ar-rev { transition: opacity 0.9s var(--ease-sortie), translate 0.9s var(--ease-sortie); }
.js .ar-rev:not(.est-visible) { opacity: 0; translate: 0 26px; }
@media (prefers-reduced-motion: reduce) { .js .ar-rev, .js .ar-rev:not(.est-visible) { opacity: 1; translate: none; transition: none; } }
.ar-sec { overflow-x: clip; }

/* Photo pleine largeur ou large, insérée dans le texte (bloc Image WordPress en « pleine largeur » ou « large ») */
.ar-corps .ar-sec__int > figure.alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.ar-corps figure.alignfull img { width: 100%; max-height: 32rem; border-radius: 0; object-fit: cover; }
.ar-corps figure.alignfull figcaption { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }

/* Illustrations animées : elles ne démarrent qu'à l'entrée à l'écran (classe est-visible) */
.ar-corps .ar-sec__int > .ar-visuel { max-width: 68rem; margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.ar-corps .ar-visuel :where(p, ul, ol, li) { margin: 0; padding: 0; list-style: none; }
.ar-visuel { font-size: 1rem; line-height: 1.4; }
.ar-ecran, .ar-fiche, .ar-navigateur { box-shadow: 0 0 0 1px rgba(10, 57, 58, 0.14), 0 28px 50px -26px rgba(2, 24, 24, 0.55); }

/* 6.1 Trois portes */
.ar-portes { display: grid; gap: 1.5rem 1.25rem; }
@media (min-width: 48em) { .ar-portes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ar-porte { display: flex; flex-direction: column; gap: 0.95rem; }
.ar-ecran { position: relative; height: 11.75rem; overflow: hidden; border-radius: 14px; background: #fff; color: #202124; font-family: Roboto, Arial, "Helvetica Neue", sans-serif; }
.ar-visuel .ar-porte__titre { text-align: center; font: 600 1.3125rem / 1.25 var(--f-titre); color: var(--titre, var(--petrole)); }
.ar-g-barre { display: flex; align-items: center; gap: 8px; margin: 12px 12px 4px; padding: 7px 12px; border-radius: 999px; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); font-size: 12px; line-height: 1.2; }
.ar-g-barre svg { flex: none; width: 14px; height: 14px; stroke: #5f6368; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.ar-g-barre span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-g-barre i { width: 1.5px; height: 13px; background: #202124; animation: ar-curseur 1.1s steps(1) infinite; }
.ar-g-res { display: grid; gap: 5px; margin: 8px 12px 0; padding: 8px 8px 9px; border-radius: 10px; }
.ar-g-res--moi { background: rgba(242, 217, 172, 0); }
.ar-g-url { font-size: 10.5px; line-height: 1.2; color: #4d5156; }
.ar-g-url--pale { width: 38%; height: 8px; border-radius: 4px; background: #e8eaed; }
.ar-g-titre { font-size: 14px; line-height: 1.25; color: #1a0dab; }
.ar-g-ligne { display: block; width: 100%; height: 6px; border-radius: 3px; background: #e3e5e8; }
.ar-g-ligne--court { width: 68%; }
.ar-g-ligne--titre { width: 64%; height: 9px; background: #cdd6ee; }
.ar-ecran--carte svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ar-mini__onde { transform-box: fill-box; transform-origin: center; animation: ar-onde 2.4s ease-out infinite; }
.ar-m-fiche { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(32, 33, 36, 0.3); }
.ar-m-fiche b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.ar-m-fiche span { font-size: 11px; color: #5f6368; }
.ar-ecran--ia { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; background: #f7f7f8; }
.ar-visuel .ar-ia-q { align-self: flex-end; max-width: 86%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #e6e8ee; font-size: 12px; line-height: 1.35; }
.ar-ia-r { display: grid; gap: 7px; padding-left: 28px; position: relative; }
.ar-ia-r svg { position: absolute; left: 0; top: -1px; width: 20px; height: 20px; stroke: #6b6f76; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.ar-ia-ligne { display: block; width: 100%; height: 7px; border-radius: 4px; background: #d9dbe2; transform-origin: left; }
.ar-ia-ligne--court { width: 62%; }
.ar-portes__lignes { display: none; }
@media (min-width: 48em) {
  .ar-portes__lignes { display: block; width: 100%; height: 3.25rem; margin-top: 0.25rem; fill: none; stroke: var(--accent, var(--or-texte)); stroke-width: 1.6; stroke-linecap: round; }
  .ar-portes__lignes path { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
.ar-visuel .ar-portes__cabinet { margin-top: 1.25rem; text-align: center; }
@media (min-width: 48em) { .ar-visuel .ar-portes__cabinet { margin-top: 0; } }
.ar-visuel .ar-portes__cabinet span { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1.6rem; border-radius: 999px; background: var(--petrole); font: 600 1.3125rem / 1.2 var(--f-titre); color: var(--or-clair); box-shadow: 0 0 0 1px rgba(242, 217, 172, 0.5); }
.ar-portes__cabinet span::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--or-clair); box-shadow: 0 0 0 0 rgba(242, 217, 172, 0.7); animation: ar-bat 2.4s ease-out infinite; }
@keyframes ar-bat { to { box-shadow: 0 0 0 0.8rem rgba(242, 217, 172, 0); } }
.ar-sec--sombre .ar-portes__cabinet span, .ar-sec--nuit .ar-portes__cabinet span { background: var(--or-clair); color: var(--petrole-900); }

/* 6.2 Fiche Google + 6.3 site d'un cabinet : l'écran d'un côté, ce que nous vérifions de l'autre */
.ar-visuel--fiche, .ar-visuel--site { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 48em) {
  .ar-visuel--fiche { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  .ar-visuel--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
  .ar-visuel--inverse .ar-verif { order: -1; }
}
.ar-fiche { overflow: hidden; border-radius: 16px; background: #fff; color: #202124; font-family: Roboto, Arial, "Helvetica Neue", sans-serif; }
.ar-fiche__photo svg { display: block; width: 100%; height: 8.75rem; }
.ar-fiche__corps { padding: 1rem 1.15rem 0.9rem; }
.ar-visuel .ar-fiche__nom { width: fit-content; font: 400 1.5rem / 1.2 Roboto, Arial, sans-serif; }
.ar-visuel .ar-fiche__cat { width: fit-content; margin-top: 2px; font-size: 0.875rem; color: #5f6368; }
.ar-visuel .ar-fiche__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.95rem; }
.ar-visuel .ar-fiche__actions li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border: 1px solid #dadce0; border-radius: 999px; font-size: 0.8125rem; color: #1a73e8; }
.ar-fiche__actions svg, .ar-fiche__infos svg { flex: none; width: 1.05rem; height: 1.05rem; stroke: #1a73e8; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-visuel .ar-fiche__infos { margin-top: 0.95rem; padding-top: 0.4rem; border-top: 1px solid #ebedf0; }
.ar-visuel .ar-fiche__infos li { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.4rem; border-radius: 6px; font-size: 0.875rem; }
.ar-visuel .ar-fiche__infos b { color: #188038; font-weight: 500; }
.ar-verif__titre { font: 600 0.8125rem / 1.4 var(--f-texte); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, var(--or-texte)); }
.ar-visuel .ar-verif__liste { display: grid; gap: 1.05rem; margin-top: 1.25rem; }
.ar-visuel .ar-verif__liste li { display: flex; align-items: flex-start; gap: 0.9rem; font: 500 1.4375rem / 1.3 var(--f-titre); color: var(--titre, var(--petrole)); }
.ar-verif__coche { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: 0.1rem; border: 1px solid var(--accent, var(--or-texte)); border-radius: 50%; }
.ar-verif__coche svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--accent, var(--or-texte)); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ar-navigateur { overflow: hidden; border-radius: 14px; background: #fff; color: #1F2A44; font-family: "Segoe UI", Roboto, Arial, sans-serif; }
.ar-navigateur__barre { display: flex; align-items: center; gap: 6px; padding: 0.6rem 0.85rem; background: #ECEFF4; }
.ar-navigateur__barre i { width: 9px; height: 9px; border-radius: 50%; background: #c6cbd5; }
.ar-navigateur__barre span { margin-left: 0.6rem; padding: 0.2rem 0.9rem; border-radius: 999px; background: #fff; font-size: 0.75rem; color: #5b6475; }
.ar-site__menu { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid #e6e9f0; font-size: 0.75rem; color: #5b6475; }
.ar-site__menu b { margin-right: auto; font: 700 1.0625rem / 1 Georgia, "Times New Roman", serif; color: #213A63; }
.ar-site__haut { padding: 1.5rem 1.25rem 1.2rem; background: linear-gradient(135deg, #EEF2FA, #F9F4EC); }
.ar-visuel .ar-site__titre { font: 700 1.625rem / 1.15 Georgia, "Times New Roman", serif; color: #213A63; }
.ar-visuel .ar-site__texte { width: fit-content; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.45; color: #4B556B; }
.ar-site__bouton { display: inline-block; margin-top: 0.95rem; padding: 0.5rem 1rem; border-radius: 6px; background: #E2674B; font-size: 0.8125rem; font-weight: 600; color: #fff; }
.ar-site__tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 1rem 1.25rem 1.1rem; }
.ar-site__tuiles span { display: grid; place-items: center; min-height: 3.2rem; padding: 0.5rem; border: 1px solid #d9dee9; border-radius: 8px; font-size: 0.75rem; font-weight: 600; line-height: 1.3; text-align: center; color: #213A63; }

/* Départ des animations (à l'entrée à l'écran). Sans JavaScript ou sans animation : l'état final. */
@media (prefers-reduced-motion: no-preference) {
  .js .ar-visuel:not(.est-visible) .ar-porte, .js .ar-visuel:not(.est-visible) .ar-portes__cabinet { opacity: 0; }
  .ar-visuel.est-visible .ar-porte { animation: ar-monte 0.9s var(--ease-sortie) both; }
  .ar-visuel.est-visible .ar-porte:nth-child(2) { animation-delay: 0.2s; }
  .ar-visuel.est-visible .ar-porte:nth-child(3) { animation-delay: 0.4s; }
  .ar-visuel.est-visible .ar-portes__lignes path { animation: ar-trace 1.1s 1s ease-in-out both; }
  .ar-visuel.est-visible .ar-portes__cabinet { animation: ar-monte 0.9s 1.9s var(--ease-sortie) both; }
  .ar-visuel.est-visible .ar-g-res--moi { animation: ar-lueur-fond 1s 1.2s ease-out both; }
  .ar-visuel.est-visible .ar-m-fiche { animation: ar-monte 0.8s 0.9s var(--ease-sortie) both; }
  .ar-visuel.est-visible .ar-ia-ligne { animation: ar-ecrit 1.1s ease-out both; }
  .ar-visuel.est-visible .ar-ia-ligne:nth-child(3) { animation-delay: 1.1s; }
  .ar-visuel.est-visible .ar-ia-ligne:nth-child(4) { animation-delay: 1.8s; }
  .ar-visuel.est-visible .ar-ia-ligne:nth-child(5) { animation-delay: 2.5s; }
  .js .ar-visuel:not(.est-visible) .ar-fiche, .js .ar-visuel:not(.est-visible) .ar-navigateur { opacity: 0; }
  .ar-visuel.est-visible .ar-fiche, .ar-visuel.est-visible .ar-navigateur { animation: ar-monte 1s var(--ease-sortie) both; }
  .js .ar-visuel:not(.est-visible) .ar-verif__liste li { opacity: 0; }
  .ar-visuel.est-visible .ar-verif__liste li { animation: ar-monte 0.7s var(--ease-sortie) both; }
  .ar-visuel.est-visible .ar-verif__liste li:nth-child(1) { animation-delay: 0.7s; }
  .ar-visuel.est-visible .ar-verif__liste li:nth-child(2) { animation-delay: 1.3s; }
  .ar-visuel.est-visible .ar-verif__liste li:nth-child(3) { animation-delay: 1.9s; }
  .ar-visuel.est-visible .ar-verif__liste li:nth-child(4) { animation-delay: 2.5s; }
  .ar-visuel.est-visible .ar-verif__coche svg { stroke-dasharray: 24; animation: ar-trace-coche 0.5s ease-out both; }
  .ar-visuel.est-visible li:nth-child(1) .ar-verif__coche svg { animation-delay: 1s; }
  .ar-visuel.est-visible li:nth-child(2) .ar-verif__coche svg { animation-delay: 1.6s; }
  .ar-visuel.est-visible li:nth-child(3) .ar-verif__coche svg { animation-delay: 2.2s; }
  .ar-visuel.est-visible li:nth-child(4) .ar-verif__coche svg { animation-delay: 2.8s; }
  /* le trait doré qui surligne, dans l'écran, ce que la liste vient de citer */
  .ar-visuel--fiche .ar-fiche__nom, .ar-visuel--fiche .ar-fiche__cat, .ar-visuel--site .ar-site__texte { background: linear-gradient(transparent 62%, rgba(242, 217, 172, 0.75) 62%) no-repeat 0 0 / 0 100%; }
  .ar-visuel--fiche .ar-fiche__infos li { background: linear-gradient(rgba(242, 217, 172, 0.42), rgba(242, 217, 172, 0.42)) no-repeat 0 0 / 0 100%; }
  .ar-visuel--fiche.est-visible .ar-fiche__nom { animation: ar-surligne 0.7s 1s ease-out forwards; }
  .ar-visuel--fiche.est-visible .ar-fiche__cat { animation: ar-surligne 0.7s 1.6s ease-out forwards; }
  .ar-visuel--fiche.est-visible .ar-fiche__infos li:nth-child(1) { animation: ar-surligne 0.7s 2.2s ease-out forwards; }
  .ar-visuel--fiche.est-visible .ar-fiche__infos li:nth-child(2) { animation: ar-surligne 0.7s 2.5s ease-out forwards; }
  .ar-visuel--fiche.est-visible .ar-fiche__infos li:nth-child(3) { animation: ar-surligne 0.7s 2.8s ease-out forwards; }
  .ar-visuel--site.est-visible .ar-site__texte { animation: ar-surligne 0.7s 1s ease-out forwards; }
  .ar-visuel--site.est-visible .ar-site__tuiles span { animation: ar-tuile 1.2s ease-out both; }
  .ar-visuel--site.est-visible .ar-site__tuiles span:nth-child(1) { animation-delay: 1.5s; }
  .ar-visuel--site.est-visible .ar-site__tuiles span:nth-child(2) { animation-delay: 1.8s; }
  .ar-visuel--site.est-visible .ar-site__tuiles span:nth-child(3) { animation-delay: 2.1s; }
  .ar-visuel--site.est-visible .ar-site__haut { animation: ar-lueur-fond 1s 0.4s ease-out both; }
}
@media (prefers-reduced-motion: reduce) { .ar-g-res--moi { background: rgba(242, 217, 172, 0.35); } .ar-visuel--fiche .ar-fiche__nom, .ar-visuel--fiche .ar-fiche__cat { background: linear-gradient(transparent 62%, rgba(242, 217, 172, 0.75) 62%); } }
@keyframes ar-monte { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes ar-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ar-trace-coche { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes ar-ecrit { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes ar-surligne { to { background-size: 100% 100%; } }
@keyframes ar-lueur-fond { to { background-color: rgba(242, 217, 172, 0.35); } }
@keyframes ar-tuile { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 103, 75, 0); } 40% { box-shadow: 0 0 0 3px rgba(226, 103, 75, 0.55); border-color: #E2674B; } }

/* 6.4 Listes en cartes ({{cartes}}) et « À retenir » en coches */
.ar-corps ul.ar-cartes { display: grid; gap: 1rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); padding: 0; list-style: none; }
@media (min-width: 48em) { .ar-corps ul.ar-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .ar-corps ul.ar-cartes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ar-cartes li { grid-column: span 2; }
  .ar-cartes li:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .ar-cartes li:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
.ar-corps .ar-cartes li { margin: 0; padding: 1.35rem 1.4rem 1.5rem; border: 1px solid rgba(242, 217, 172, 0.28); border-radius: 14px; background: rgba(255, 255, 255, 0.05); font-size: 1.0625rem; line-height: 1.6; }
.ar-sec--clair .ar-cartes li, .ar-sec--creme .ar-cartes li { border-color: rgba(10, 57, 58, 0.14); background: #fff; }
.ar-cartes li::before, .ar-sec--nuit .ar-sec__int > ul li::before { content: ""; display: block; width: 2.4rem; height: 2.4rem; margin-bottom: 0.85rem; border: 1px solid var(--accent, var(--or-texte)); border-radius: 50%; background: no-repeat center / 1.2rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B5C3D' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ar-sec--sombre .ar-cartes li::before, .ar-sec--nuit .ar-sec__int > ul li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2D9AC' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ar-cartes li > strong:first-child { display: block; margin-bottom: 0.3rem; font: 600 1.4375rem / 1.25 var(--f-titre); color: var(--titre, var(--petrole)); }
.ar-corps .ar-sec--nuit .ar-sec__int > ul { padding: 0; list-style: none; }
.ar-corps .ar-sec--nuit .ar-sec__int > ul li { position: relative; margin-top: 1.1rem; padding: 0 0 0 3.4rem; min-height: 2.4rem; }
.ar-sec--nuit .ar-sec__int > ul li::before { position: absolute; left: 0; top: 0.05rem; margin: 0; width: 2.2rem; height: 2.2rem; }

/* --------------------------------------------------------------------------
   7. S'abonner aux articles : encadré sous la liste (js/articles.js n'affiche que la réponse dans la maquette)
   -------------------------------------------------------------------------- */
.ar-abo { position: relative; overflow: hidden; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; margin: 0; padding: clamp(1.75rem, 4vw, 3rem); border: 1px solid rgba(242, 217, 172, 0.42); border-radius: 16px; background: linear-gradient(135deg, #0C4546 0%, #062A2B 100%); }
.ar-abo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 98% 0%, rgba(242, 217, 172, 0.13) 0 1px, transparent 1px 24px); -webkit-mask-image: radial-gradient(46% 120% at 98% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(46% 120% at 98% 0%, #000 0%, transparent 70%); }
.ar-abo > * { position: relative; }
@media (min-width: 64em) { .ar-abo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.ar-abo .surtitre { display: block; margin-bottom: var(--e-3); font-size: 0.875rem; letter-spacing: 0.2em; color: var(--or-clair); }
.ar-abo .surtitre::before { display: none; }
.ar-abo__titre { margin: 0; font: 500 clamp(1.75rem, 1.4rem + 1vw, 2.25rem) / 1.15 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.ar-abo__accroche { margin: var(--e-4) 0 0; font: italic 500 clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem) / 1.45 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.ar-abo__label { display: block; margin-bottom: 0.6rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-clair); }
.ar-abo__champ { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 40em) { .ar-abo__champ { flex-direction: row; align-items: stretch; } .ar-abo__champ input[type="email"] { flex: 1; width: auto; } }
.ar-abo__champ input[type="email"] { flex: none; width: 100%; min-width: 0; height: 3.5rem; padding: 0 1.1rem; border: 1px solid rgba(242, 217, 172, 0.55); border-radius: 10px; background: #fff; font: inherit; font-size: 1.0625rem; color: var(--encre); }
.ar-abo__champ input[type="email"]::placeholder { color: #6B7777; }
.ar-abo__champ input[type="email"]:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 2px; }
.ar-abo__champ input[aria-invalid="true"] { border-color: #E2674B; box-shadow: 0 0 0 2px rgba(226, 103, 75, 0.35); }
.ar-abo__champ .btn-plaque { flex: none; }
.ar-abo__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ar-abo__mention { margin: 0.9rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--creme-doux); }
.ar-abo__mention a { color: var(--or-clair); text-underline-offset: 3px; }
.ar-abo__etat { margin: 0.75rem 0 0; min-height: 1.4em; font-size: 0.9375rem; font-weight: 500; color: var(--or-clair); }
.ar-abo__etat[data-etat="erreur"] { color: #F3A18F; }
.ar-abo--ok .ar-abo__label, .ar-abo--ok .ar-abo__champ, .ar-abo--ok .ar-abo__mention { display: none; }
.ar-abo--ok .ar-abo__etat { margin: 0; font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--creme); }

/* --------------------------------------------------------------------------
   8. Contrôle de Pauline (26/10/2026) : cibles tactiles, bouton pause de la carte, « réduire les animations » appliqué partout
   -------------------------------------------------------------------------- */
.ar-ariane a { display: inline-block; padding-block: 0.55rem; }
.ar-partage a, .ar-partage button { width: 2.75rem; height: 2.75rem; }
.ar-sommaire a { padding-block: 0.7rem; }
.ar-sources > summary { padding-block: 0.6rem; }
.ar-carte__metiers button { min-height: 2.75rem; }
.ar-carte__pause { position: absolute; top: clamp(1rem, 2.5vw, 2rem); right: clamp(1rem, 2.5vw, 2rem); z-index: 3; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(242, 217, 172, 0.55); border-radius: 50%; background: rgba(2, 24, 24, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--or-clair); cursor: pointer; }
.js .ar-carte__pause { display: grid; }
.ar-carte__pause svg { width: 18px; height: 18px; fill: currentColor; }
.ar-carte__lire { display: none; }
.ar-ville.est-en-pause .ar-carte__lire { display: block; }
.ar-ville.est-en-pause .ar-carte__arret { display: none; }
.ar-carte__pause:hover { background: var(--petrole); }
.ar-carte__pause:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ar-carte__pause { display: none !important; }
  .ar-recherche__curseur, .ar-g-barre i, .ar-res, .ar-ep__corps, .ar-ep__onde, .ar-mini__onde, .ar-fr__onde, .ar-portes__cabinet span::before { animation: none !important; }
  .ar-resultats { transition: none; }
}