/* Asia Relocation - design system blog (classes ar-*) - CSS REEL du site
   Extrait le 2026-08-09 de moving-to-germany-from-thailand (bloc <style> inline).
   Police Poppins (police du kit Elementor, post-21097.css) · marque #072256. NB : la prod n'utilise PAS .ar-process/.ar-step-connector
   (process = .ar-steps + .ar-step).
   2026-08-10 — deux correctifs : (1) le bloc FAQ, jusque-la SANS aucune regle, recoit son
   style (affordance de clic + mise en avant a l'ouverture) ; (2) rythme vertical des figures
   harmonise a 40px. Purger WP Rocket + Kinsta apres re-upload. */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

.ar-post {
  /* MARQUEUR DE VERSION — à bumper à chaque modification de ce fichier.
     Pourquoi : le 2026-08-17, une révision de pillar-styles.css est restée
     en arrière sur la prod et rien ne permettait de le voir. Vérification,
     dans la console d'une page d'article :
       getComputedStyle(document.querySelector('.ar-post')).getPropertyValue('--build')
     Valeur différente du fichier local ⇒ transfert incomplet, ou cache
     WP Rocket / Kinsta pas purgé. */
  --build:"2026-08-18-a";

  width: 100%; max-width: 100%; margin: 0px; padding: 0px 0px 3rem; color: rgb(7, 34, 86); font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif; box-sizing: border-box; }

.ar-post *, .ar-post ::before, .ar-post ::after { box-sizing: border-box; }

.ar-badge { display: inline-flex; align-items: center; gap: 6px; background: rgb(241, 241, 241); color: rgb(42, 66, 112); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 3px; border: 1px solid rgb(220, 220, 220); margin-bottom: 18px; }

.ar-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(189, 31, 46); display: inline-block; }

.ar-h1 { font-size: 34px; font-weight: 700; line-height: 1.2; color: rgb(7, 34, 86); margin: 0px 0px 14px; letter-spacing: -0.01em; }

.ar-subtitle { font-size: 17px; color: rgb(42, 66, 112); line-height: 1.6; margin: 0px 0px 24px; font-weight: 400; }

.ar-meta { display: flex; gap: 24px; font-size: 12px; color: rgba(42, 66, 112, 0.51); padding-bottom: 20px; border-bottom: 1px solid rgb(220, 220, 220); margin-bottom: 32px; flex-wrap: wrap; align-items: center; }

/* Rythme vertical des figures — corrige le 2026-08-10.
   Le hero etait a 32px et il est suivi DIRECTEMENT du paragraphe d'intro, alors que les
   figures inline sont suivies d'un .ar-divider qui ajoute ses 36px : l'ecart percu sous la
   premiere image etait donc deux fois plus petit que sous les autres. Les deux passent a
   40px, soit le meme pas que .ar-section, et en !important car le theme pose ses propres
   marges sur <figure>. */
.ar-figure { margin: 0px 0px 40px !important; }

.ar-figure-inline { margin: 40px 0px !important; }

.ar-img-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 6px !important; background: linear-gradient(135deg, rgb(42, 66, 112) 0%, rgb(7, 34, 86) 100%) !important; }

.ar-img-inline { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: rgb(241, 241, 241); border-radius: 6px !important; border: 1px solid rgb(220, 220, 220) !important; }

.ar-caption { font-size: 12px; color: rgba(42, 66, 112, 0.51); text-align: center; margin-top: 10px; font-style: italic; }

.ar-toc { background: rgb(241, 241, 241); border-left: 3px solid rgb(189, 31, 46); border-radius: 0px 4px 4px 0px; padding: 20px 24px; margin-bottom: 36px; }

.ar-toc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(42, 66, 112, 0.51); margin: 0px 0px 14px; }

.ar-toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 0px; margin: 0px; }

.ar-toc-link { display: flex; align-items: center; gap: 8px; color: rgb(7, 34, 86); text-decoration: none; padding: 8px 12px; margin: 0px -12px; border-radius: 4px; font-size: 14px; font-weight: 500; transition: background 0.15s, transform 0.15s, color 0.15s; }

.ar-toc-link:hover { background: rgb(255, 255, 255); transform: translateX(3px); color: rgb(189, 31, 46); }

.ar-toc-num { font-size: 11px; font-weight: 700; color: rgb(189, 31, 46); min-width: 22px; letter-spacing: 0.05em; }

.ar-toc-arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; color: rgb(189, 31, 46); margin-left: auto; font-size: 13px; font-weight: 700; }

.ar-toc-link:hover .ar-toc-arrow { opacity: 1; transform: translateX(0px); }

.ar-section { margin-bottom: 40px; }

.ar-h2 { font-size: 24px; font-weight: 700; color: rgb(7, 34, 86); margin: 0px 0px 16px; display: flex; align-items: center; gap: 12px; letter-spacing: -0.01em; }

.ar-h2-num { font-size: 13px; font-weight: 700; color: rgb(189, 31, 46); min-width: 30px; letter-spacing: 0.05em; }

.ar-p { font-size: 16px; line-height: 1.75; color: rgb(7, 34, 86); margin: 0px 0px 18px; font-weight: 400; }

.ar-link { color: rgb(189, 31, 46); text-decoration: none; border-bottom: 1px solid rgba(189, 31, 46, 0.51); font-weight: 500; font-size: inherit !important; line-height: inherit !important; }

.ar-link:hover { color: rgb(7, 34, 86); border-bottom-color: rgb(7, 34, 86); }

.ar-callout { border-radius: 0px 4px 4px 0px; padding: 16px 20px; margin: 22px 0px; }

.ar-callout-info { background: rgb(241, 241, 241); border-left: 3px solid rgb(42, 66, 112); }

.ar-callout-warning { background: rgb(255, 255, 255); border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgba(189, 31, 46, 0.51) rgba(189, 31, 46, 0.51) rgba(189, 31, 46, 0.51) rgb(189, 31, 46); border-image: none; }

.ar-callout-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 0px 0px 8px; }

.ar-callout-info .ar-callout-label { color: rgb(42, 66, 112); }

.ar-callout-warning .ar-callout-label { color: rgb(189, 31, 46); }

.ar-callout-text { font-size: 14px; line-height: 1.65; color: rgb(7, 34, 86); margin: 0px; }

.ar-table { width: 100%; border-collapse: collapse; margin: 18px 0px; font-size: 13px; border-radius: 4px; overflow: hidden; }

.ar-table thead tr { background: rgb(42, 66, 112); }

.ar-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(255, 255, 255); }

.ar-table tbody tr:nth-child(2n+1) { background: rgb(255, 255, 255); }

.ar-table tbody tr:nth-child(2n) { background: rgb(241, 241, 241); }

.ar-table td { padding: 12px 16px; border-bottom: 1px solid rgb(220, 220, 220); color: rgb(7, 34, 86); }

.ar-table tbody tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.ar-table td:first-child { font-weight: 500; }

.ar-table td:nth-child(2) { color: rgb(42, 66, 112); }

.ar-tag { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 3px; font-weight: 600; }

.ar-tag-neutral { background: rgb(241, 241, 241); color: rgb(42, 66, 112); }

.ar-tag-outline { background: rgb(255, 255, 255); color: rgb(42, 66, 112); border: 1px solid rgb(220, 220, 220); }

.ar-tag-accent { background: rgb(189, 31, 46); color: rgb(255, 255, 255); }

.ar-checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 18px 0px; padding: 0px; }

/* NB : surtout pas `display:flex` ici. En flex, chaque <strong>/<a>/<em> du texte devient
   un item de flex autonome : il se retrouve dans sa propre colonne, se coupe sur 2 lignes
   et recolte un gap de 12px. Le texte doit rester du flux inline -> l'icone est detachee
   en absolu et le padding-left (16 + 20 icone + 12 gouttiere) creuse le retrait pendu. */
.ar-checklist-item { display: block; position: relative; font-size: 14px; line-height: 1.6; color: rgb(7, 34, 86); background: rgb(241, 241, 241); padding: 12px 16px 12px 48px; border-radius: 4px; border-left: 2px solid rgb(42, 66, 112); }

.ar-check-icon { position: absolute; left: 16px; top: 13px; width: 20px; height: 20px; border-radius: 3px; background: rgb(42, 66, 112); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }

.ar-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 24px 0px; }

.ar-step { background: rgb(255, 255, 255); border-width: 3px 1px 1px; border-style: solid; border-color: rgb(42, 66, 112) rgb(220, 220, 220) rgb(220, 220, 220); border-image: none; border-radius: 4px; padding: 18px; }

.ar-step-final { border-top-color: rgb(189, 31, 46); }

.ar-step-num { font-size: 32px; font-weight: 800; color: rgba(42, 66, 112, 0.51); line-height: 1; margin: 0px 0px 10px; letter-spacing: -0.02em; }

.ar-step-final .ar-step-num { color: rgba(189, 31, 46, 0.51); }

.ar-step-title { font-size: 14px; font-weight: 700; color: rgb(7, 34, 86); margin: 0px 0px 8px; }

.ar-step-desc { font-size: 12px; line-height: 1.6; color: rgb(42, 66, 112); margin: 0px; }

.ar-keyfigure { background: rgb(7, 34, 86); border-radius: 4px; padding: 24px 28px; margin: 24px 0px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.ar-keyfigure-value { font-size: 36px; font-weight: 800; color: rgb(255, 255, 255); line-height: 1; margin: 0px; letter-spacing: -0.02em; flex: 0 0 auto; }

.ar-keyfigure-body { flex: 1 1 200px; }

.ar-keyfigure-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(189, 31, 46); margin: 0px 0px 6px; }

.ar-keyfigure-desc { font-size: 14px; line-height: 1.6; color: rgb(241, 241, 241); margin: 0px; }

.ar-divider { border-width: 1px medium medium; border-style: solid none none; border-color: rgb(220, 220, 220) currentcolor currentcolor; border-image: none; margin: 36px 0px !important; }

/* =========================================================================
   FAQ — accordeon natif <details>/<summary>. AJOUTE le 2026-08-10.
   Avant : AUCUNE regle. Le bloc s'affichait avec le triangle nu du navigateur,
   sans affordance de clic et sans mise en avant a l'ouverture ("trop plat").
   Aucun JS : tout l'etat vient de l'attribut [open] pose par <details> lui-meme.
   ========================================================================= */

.ar-faq { display: flex; flex-direction: column; gap: 10px; margin: 20px 0px 0px; }

.ar-faq-item { background: rgb(255, 255, 255); border: 1px solid rgb(220, 220, 220); border-left: 3px solid rgb(220, 220, 220); border-radius: 4px; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; }

.ar-faq-item:hover { border-color: rgba(189, 31, 46, 0.51); border-left-color: rgb(189, 31, 46); box-shadow: 0 2px 10px rgba(7, 34, 86, 0.08); }

/* La question EST le bouton : toute la ligne est cliquable, curseur explicite,
   badge +/- a droite. `list-style:none` + le pseudo -webkit retirent le triangle natif. */
.ar-faq-q { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.5; color: rgb(7, 34, 86); list-style: none; -webkit-user-select: none; user-select: none; transition: color 0.15s ease, background 0.15s ease; }

.ar-faq-q::-webkit-details-marker { display: none; }

.ar-faq-q:hover { color: rgb(189, 31, 46); background: rgba(241, 241, 241, 0.6); }

.ar-faq-q:focus-visible { outline: 2px solid rgb(189, 31, 46); outline-offset: -2px; }

/* Badge +/- : l'affordance de clic qui manquait. Meme semantique que les pages pilier. */
.ar-faq-q::after { content: "+"; margin-left: auto; flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgb(241, 241, 241); color: rgb(42, 66, 112); border-radius: 3px; font-size: 17px; font-weight: 700; line-height: 1; transition: background 0.15s ease, color 0.15s ease; }

.ar-faq-item:hover .ar-faq-q::after { background: rgb(42, 66, 112); color: rgb(255, 255, 255); }

/* --- Etat OUVERT : la question et la reponse passent au premier plan --- */
.ar-faq-item[open] { border-color: rgba(189, 31, 46, 0.51); border-left-color: rgb(189, 31, 46); box-shadow: 0 2px 12px rgba(7, 34, 86, 0.1); }

/* Couleur + filet, mais graisse INCHANGEE : passer de 600 a 700 re-casserait le retour
   a la ligne des questions longues, et le titre sauterait a chaque ouverture. */
.ar-faq-item[open] .ar-faq-q { color: rgb(189, 31, 46); border-bottom: 1px solid rgb(220, 220, 220); }

.ar-faq-item[open] .ar-faq-q::after { content: "\2013"; background: rgb(189, 31, 46); color: rgb(255, 255, 255); }

.ar-faq-a { padding: 16px 18px 18px; background: rgb(241, 241, 241); animation: 0.18s ease-out ar-faq-reveal; }

.ar-faq-a p { font-size: 15px; line-height: 1.75; color: rgb(7, 34, 86); margin: 0px; }

.ar-faq-a p + p { margin-top: 12px; }

@keyframes ar-faq-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ar-faq-item, .ar-faq-q, .ar-faq-q::after { transition: none; }
  .ar-faq-a { animation: none; }
}

.ar-author { background: rgb(241, 241, 241); border-radius: 6px; padding: 24px; margin: 28px 0px 0px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

.ar-author-photo { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; background: rgb(42, 66, 112); overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); font-size: 24px; font-weight: 700; }

.ar-author-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ar-author-body { flex: 1 1 280px; }

.ar-author-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(189, 31, 46); font-weight: 700; margin: 0px 0px 4px; }

.ar-author-name { font-size: 18px; font-weight: 700; color: rgb(7, 34, 86); margin: 0px 0px 2px; }

.ar-author-role { font-size: 13px; color: rgb(42, 66, 112); font-weight: 500; margin: 0px 0px 10px; }

.ar-author-bio { font-size: 13px; line-height: 1.6; color: rgb(7, 34, 86); margin: 0px 0px 10px; }

.ar-author-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgb(189, 31, 46); text-decoration: none; border-bottom: 1px solid rgba(189, 31, 46, 0.51); padding-bottom: 1px; }

@media (max-width: 600px) {
  .ar-h1 { font-size: 26px; }
  .ar-subtitle { font-size: 16px; }
  .ar-h2 { font-size: 20px; }
  .ar-p { font-size: 15px; }
  .ar-table { font-size: 12px; }
  .ar-table th, .ar-table td { padding: 10px 12px; }
  .ar-keyfigure-value { font-size: 28px; }
  .ar-faq-q { font-size: 14px; padding: 13px 14px; gap: 10px; }
  .ar-faq-q::after { width: 22px; height: 22px; font-size: 16px; }
  .ar-faq-a { padding: 14px; }
  .ar-faq-a p { font-size: 14px; }
  .ar-figure { margin-bottom: 28px !important; }
  .ar-figure-inline { margin: 28px 0px !important; }
}