/* ==========================================================================
   Nexa · socle commun du site dans la direction artistique client (DA 08/10/2026)
   --------------------------------------------------------------------------
   Chargé APRÈS nexa-landing.css (qu'il surcharge pour l'en-tête, le pied et les boutons).
   Se suffit à lui-même pour l'en-tête et le pied : /statut le charge sans nexa-landing.css.
   Sources : src/da/theme/tokens.css (jetons), public/site/accueil-v2.css (accueil).

   Ce que la feuille touche d'office :
     - l'en-tête  <header class="nav" id="nav">  (logo A, liens, « Se connecter », burger, panneau mobile) ;
     - le pied    <footer class="footer">  (encre, coins arrondis, astérisque en filigrane) ;
     - les boutons .btn / .btn-coral / .btn-ink / .btn-ghost / .btn-white / .btn-lg (pilules) ;
     - les apparitions .reveal (fondu + 16 px, état final visible sans JS et en mouvement réduit).
   Tout le reste est OPT-IN, préfixé « da- » (aucun conflit avec les classes de l'accueil) :
     body.da, .da-wrap, .da-section, .da-eyebrow, .da-kicker, .da-h1/2/3, .da-lead, .da-accent,
     .da-underline, .da-hand, .da-card (+ teintes), .da-chip, .da-blobs / .da-blob (+ teintes).
   ========================================================================== */

/* Polices DA auto-hébergées (SIL OFL 1.1) : mêmes déclarations que accueil-v2.css (même fichier, téléchargé une fois) */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/da/Fredoka-latin.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('/fonts/da/Nunito-latin.woff2') format('woff2'); }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/da/PatrickHand-latin.woff2') format('woff2'); }

/* ---------- Jetons (thème clair de tokens.css, valeurs AA) ---------- */
:root {
  /* Fonds et surfaces */
  --da-bg: #faf7f2;
  --da-surface: #ffffff;
  --da-surface-2: #f2ece6;
  /* Encre */
  --da-ink: #141423;          /* 17:1 sur crème */
  --da-ink-2: #3d3b52;        /* 10,1:1 */
  --da-ink-muted: #676572;    /* 5,34:1 sur crème */
  --da-line: #ece5dc;         /* filet décoratif */
  --da-line-strong: #8f8a84;  /* bord d'un contrôle : 3,2:1 */
  /* Corail */
  --da-coral: #e8543a;        /* marque, icônes, astérisque (jamais sous un petit texte blanc) */
  --da-coral-strong: #c8432a; /* fond de bouton à libellé blanc : 4,89:1 */
  --da-coral-hover: #b83c24;
  --da-coral-text: #b83c24;   /* texte corail sur crème ou blanc : 5,3:1 */
  --da-coral-bright: #fd644e; /* décor seulement (soulignés) */
  --da-coral-pale: #ffe4db;
  --da-coral-on-ink: #ff8a70; /* corail posé sur l'encre : 6,2:1 */
  /* Pastels (fonds de cartes et blobs ; l'encre dessus fait ≥ 10:1) */
  --da-peach: #ffdcc4;   --da-peach-soft: #ffeee2;
  --da-pink: #fdd2d4;    --da-pink-soft: #fee7e8;
  --da-mint: #cdf4e4;    --da-mint-soft: #e6f9f1;
  --da-lavender: #eacdfc; --da-lavender-soft: #f3e5fd;
  --da-yellow: #fddc7a;  --da-yellow-soft: #feedb8;
  --da-sky: #bed5fc;     --da-sky-soft: #e1ecfe;
  /* Encres vives */
  --da-violet: #6441bd;        /* liens secondaires, annotations : 6,48:1 sur crème */
  --da-violet-bright: #9c87f8; /* flèches dessinées : décor */
  --da-green: #0a7f6e;         /* blanc dessus : 4,91:1 */
  --da-green-ink: #0a6b5c;     /* texte vert sur menthe : 5,4:1 */
  /* Typographie */
  --da-font-display: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --da-font-text: 'Nunito', 'Inter', ui-rounded, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --da-font-hand: 'Patrick Hand', 'Segoe Print', 'Bradley Hand', cursive;
  /* Rayons */
  --da-radius-sm: 12px;
  --da-radius-md: 20px;
  --da-radius-card: 24px;
  --da-radius-lg: 28px;
  --da-radius-pill: 999px;
  /* Ombres douces, teintées d'encre */
  --da-shadow-sm: 0 1px 2px rgba(20,20,35,.06), 0 1px 3px rgba(20,20,35,.04);
  --da-shadow-card: 0 1px 2px rgba(20,20,35,.04), 0 8px 24px -10px rgba(20,20,35,.14);
  --da-shadow-float: 0 12px 32px -8px rgba(20,20,35,.18), 0 2px 6px rgba(20,20,35,.06);
  --da-shadow-action: 0 8px 18px -6px rgba(200,67,42,.5);
  /* Espacements (grille de 4 px) */
  --da-space-1: 4px; --da-space-2: 8px; --da-space-3: 12px; --da-space-4: 16px; --da-space-5: 20px;
  --da-space-6: 24px; --da-space-8: 32px; --da-space-10: 40px; --da-space-12: 48px; --da-space-16: 64px;
  --da-section-y: clamp(56px, 6vw + 32px, 112px);
  --da-wrap: 1200px;
  /* Mouvement */
  --da-ease-out: cubic-bezier(0.22, 1, .36, 1);
  --da-ease-spring: cubic-bezier(0.34, 1.56, .64, 1);

  /* Valeurs partagées avec nexa-landing.css (identiques : /statut ne charge que cette feuille) */
  --gutter: 32px;
  --nav-h: 68px;
}
@media (max-width: 1024px) { :root { --gutter: 24px; } }
@media (max-width: 768px) { :root { --nav-h: 60px; } }
@media (max-width: 480px) { :root { --gutter: 20px; } }

/* ==========================================================================
   EN-TÊTE  <header class="nav" id="nav">
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 242, .86);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  font-family: var(--da-font-text); line-height: 1.5;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.nav.scrolled { background: rgba(250, 247, 242, .94); border-bottom-color: var(--da-line); box-shadow: 0 6px 18px -14px rgba(20,20,35,.35); }
.nav .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.nav .nav-inner { display: flex; align-items: center; gap: 36px; height: var(--nav-h); }

/* Logo A : boussole + « NEXA » à l'encre, étincelles corail (src/da/theme/logo/nexa-logo-a.svg) */
.nav .logo, .footer .logo { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; color: var(--da-ink); text-decoration: none; border-radius: 8px; }
.logo-a { display: block; height: 28px; width: auto; aspect-ratio: 464 / 100; overflow: visible; }
.logo-a-ast { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .45s var(--da-ease-spring); }
.logo:hover .logo-a-ast { transform: rotate(14deg); }

/* Liens */
.nav .nav-links { display: flex; align-items: center; gap: 28px; flex: 1; }
.nav .nav-links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0;
  font-family: var(--da-font-text); font-size: 16px; font-weight: 800; letter-spacing: 0; color: var(--da-ink-2);
  text-decoration: none; transition: color .15s;
}
.nav .nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 3px;
  background: var(--da-coral); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--da-ease-out);
}
.nav .nav-links a:hover, .nav .nav-links a.active, .nav .nav-links a[aria-current="page"] { color: var(--da-ink); }
.nav .nav-links a:hover::after, .nav .nav-links a.active::after, .nav .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav .nav-links a.nav-menu-login { display: none; }

/* Actions à droite */
.nav .nav-cta { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav .nav-cta .link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--da-font-text); font-size: 16px; font-weight: 800; color: var(--da-ink); text-decoration: none;
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color .15s;
}
.nav .nav-cta .link:hover { text-decoration-color: rgba(232,84,58,.7); }
.nav .nav-cta .btn { min-height: 44px; padding: 10px 20px; font-size: 16px; }

/* Burger (≤ 768 px) */
.nav .nav-hamburger {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--da-line-strong); background: var(--da-surface); color: var(--da-ink); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.nav .nav-hamburger:hover { border-color: var(--da-ink); }

/* Sélecteur de langue (page /installer) : même place que les actions */
.nav .langs { display: flex; gap: 4px; margin-left: auto; }
.nav .langs a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border-radius: var(--da-radius-pill); font: 800 15px/1 var(--da-font-text); letter-spacing: .02em; color: var(--da-ink-2); text-decoration: none;
}
.nav .langs a[aria-current="true"] { background: var(--da-ink); color: #fff; box-shadow: none; }
.nav .langs a:not([aria-current="true"]):hover { background: var(--da-surface-2); color: var(--da-ink); }

@media (max-width: 1024px) {
  .nav .nav-inner { gap: 22px; }
  .nav .nav-links { gap: 20px; }
  .nav .nav-cta { gap: 14px; }
}

@media (max-width: 768px) {
  .nav .nav-inner { gap: 10px; }
  .nav .nav-links { display: none; }
  .nav .nav-cta .link { display: none; }
  .nav .nav-cta .btn { padding: 10px 16px; }
  .nav .nav-hamburger { display: inline-flex; }
  .logo-a { height: 24px; }

  /* Panneau déroulant (classe posée par nexa-landing.js) */
  .nav.menu-ouvert { background: var(--da-bg); border-bottom-color: var(--da-line); }
  .nav.menu-ouvert .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 6px var(--gutter) 18px;
    background: var(--da-bg); border-bottom: 1px solid var(--da-line);
    border-radius: 0 0 var(--da-radius-lg) var(--da-radius-lg);
    box-shadow: 0 18px 32px -16px rgba(20,20,35,.28);
    max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto; overscroll-behavior: contain;
    animation: da-panneau .2s var(--da-ease-out) both;
  }
  .nav.menu-ouvert .nav-links a {
    display: flex; min-height: 54px; padding: 0 4px;
    font-size: 18px; color: var(--da-ink); border-bottom: 1px solid var(--da-line);
  }
  .nav.menu-ouvert .nav-links a:last-child { border-bottom: 0; }
  .nav.menu-ouvert .nav-links a::after { display: none; }
  .nav.menu-ouvert .nav-links a.active, .nav.menu-ouvert .nav-links a[aria-current="page"] { color: var(--da-coral-text); }
  .nav.menu-ouvert .nav-links a.nav-menu-login {
    display: flex; justify-content: center; margin-top: 14px; min-height: 52px; border: 0; border-radius: var(--da-radius-pill);
    background: var(--da-ink); color: #fff; font-size: 16px;
  }

  /* Sans JavaScript : pas de burger, les liens passent sur une seconde ligne */
  html:not(.js) .nav .nav-hamburger { display: none; }
  html:not(.js) .nav .nav-inner { flex-wrap: wrap; height: auto; min-height: var(--nav-h); row-gap: 0; padding-top: 8px; padding-bottom: 4px; }
  html:not(.js) .nav .nav-links { display: flex; order: 3; width: 100%; flex-wrap: wrap; gap: 0 20px; }
  html:not(.js) .nav .nav-links a.nav-menu-login { display: inline-flex; }
}
@media (max-width: 380px) {
  .logo-a { height: 21px; }
  .nav .nav-cta .btn { padding: 10px 14px; }
}
@keyframes da-panneau { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   PIED  <footer class="footer">  (encre, coins hauts arrondis)
   ========================================================================== */
.footer {
  position: relative; overflow: hidden;
  margin-top: 0; padding: 72px 0 28px;
  background: var(--da-ink); color: rgba(255,255,255,.74);
  border-radius: 36px 36px 0 0;
  font-family: var(--da-font-text); line-height: 1.5;
}
/* Astérisque du logo en filigrane (décor) */
.footer::after {
  content: ''; position: absolute; right: -96px; bottom: -110px; width: 300px; height: 300px; pointer-events: none; opacity: .1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23E8543A' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M81.95 46.37A34 34 0 1 1 55.9 24.52' stroke-width='11'/%3E%3Cpath d='M64 44L54.95 62.95L45.05 53.05Z M36 72L45.05 53.05L54.95 62.95Z' fill='%23E8543A' stroke-width='3'/%3E%3Cpath d='M72 18L76.5 8M80.5 26.5L91 22' stroke-width='7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(12deg);
}
.footer > .wrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.footer .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer .logo { color: #fff; }
.footer .logo-a { height: 30px; }
.footer p.tag { margin: 14px 0 0; max-width: 320px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.74); }
.footer h5, .footer .footer-title {
  margin: 0 0 12px; font-family: var(--da-font-display); font-size: 19px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0; text-transform: none; color: var(--da-peach);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.footer ul a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0; margin: 0;
  font-size: 16px; font-weight: 600; color: rgba(255,255,255,.8); text-decoration: none;
  transition: color .15s;
}
.footer ul a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--da-coral); text-decoration-thickness: 2px; text-underline-offset: 4px; transform: none; }
.footer .footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px; color: rgba(255,255,255,.62);
}
.footer :focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }

/* Variante courte (page /installer, traduite FR/NL/EN) : logo + une ligne de liens */
.footer.footer--mini { padding: 36px 0 28px; border-radius: 28px 28px 0 0; }
.footer.footer--mini::after { width: 200px; height: 200px; right: -50px; bottom: -70px; }
.footer--mini .footer-mini-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 16px; color: rgba(255,255,255,.62); }
.footer--mini .footer-mini-row .logo { margin-right: 6px; }
.footer--mini .footer-mini-row a:not(.logo) {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: rgba(255,255,255,.8);
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 4px;
}
.footer--mini .footer-mini-row a:not(.logo):hover { color: #fff; text-decoration-color: var(--da-coral); }

/* Cibles de 44 px sur tactile */
@media (max-width: 1024px), (pointer: coarse) {
  .footer ul a { min-height: 44px; }
}
@media (max-width: 1024px) {
  .footer .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .footer { padding: 52px 0 24px; border-radius: 28px 28px 0 0; }
  .footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; margin-bottom: 36px; }
  .footer .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer .footer-bottom { font-size: 16px; }
}
@media (max-width: 480px) {
  .footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .footer .footer-grid > :first-child, .footer .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer::after { width: 220px; height: 220px; right: -60px; bottom: -60px; }
}

/* ==========================================================================
   LIEN D'ÉVITEMENT, FOCUS
   ========================================================================== */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--da-radius-pill);
  background: var(--da-ink); color: #fff; font: 800 15px/1 var(--da-font-text); text-decoration: none;
}
.skip-link:focus { top: 12px; }
.nav :focus-visible { outline: 3px solid var(--da-ink); outline-offset: 3px; }

/* ==========================================================================
   BOUTONS (pilules) : .btn + .btn-coral | .btn-ink | .btn-ghost | .btn-white  (+ .btn-lg)
   ========================================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border: 0; border-radius: var(--da-radius-pill);
  font-family: var(--da-font-text); font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-align: center;
  text-decoration: none; cursor: pointer; overflow: visible;
  transition: background-color .15s, box-shadow .2s, transform .15s var(--da-ease-out);
}
.btn::before { content: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { flex: 0 0 auto; }
.btn-coral { background: var(--da-coral-strong); color: #fff; box-shadow: var(--da-shadow-action); }
.btn-coral:hover { background: var(--da-coral-hover); box-shadow: 0 10px 22px -8px rgba(200,67,42,.55); }
.btn-ink { background: var(--da-ink); color: #fff; box-shadow: none; }
.btn-ink:hover { background: #2a2a3c; box-shadow: none; }
.btn-ghost { background: var(--da-surface); color: var(--da-ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--da-line-strong); }
.btn-ghost:hover { background: var(--da-surface); box-shadow: inset 0 0 0 2px var(--da-ink); }
.btn-white { background: #fff; color: var(--da-ink); }
.btn-ghost-dark { background: transparent; color: #fff; border: 0; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px #fff; }
.btn-lg { min-height: 52px; padding: 14px 28px; font-size: 16px; border-radius: var(--da-radius-pill); }

/* ==========================================================================
   APPARITIONS AU DÉFILEMENT : .reveal (posée par nexa-landing.js : html.js + .in)
   Sans JS (pas de html.js) ou en mouvement réduit : rien n'est masqué.
   ========================================================================== */
html.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--da-ease-out), transform .6s var(--da-ease-out);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   COMPOSANTS OPT-IN (préfixe da-)
   ========================================================================== */
/* Page entière dans la DA : <body class="page-x da"> */
body.da { background: var(--da-bg); color: var(--da-ink); font-family: var(--da-font-text); font-size: 17px; line-height: 1.5; }
body.da h1, body.da h2, body.da h3 { font-family: var(--da-font-display); font-weight: 600; letter-spacing: -0.005em; color: var(--da-ink); text-wrap: balance; }
body.da p { text-wrap: pretty; }
body.da ::selection { background: var(--da-peach); color: var(--da-ink); }

/* Mise en page */
.da-wrap { max-width: var(--da-wrap); margin: 0 auto; padding: 0 var(--gutter); }
.da-section { position: relative; padding: var(--da-section-y) 0; }
.da-section--tight { padding: calc(var(--da-section-y) * .6) 0; }
.da-section--peach { background: var(--da-peach-soft); }
.da-section--mint { background: var(--da-mint-soft); }
.da-section--pink { background: var(--da-pink-soft); }
.da-section--lavender { background: var(--da-lavender-soft); }
.da-section--white { background: var(--da-surface); }
.da-section--ink { background: var(--da-ink); color: #fff; }
.da-section--ink :focus-visible { outline-color: #fff; }
.da-section--round { border-radius: 36px; margin: 0 12px; }
.da-section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.da-section-head--left { margin-left: 0; text-align: left; }

/* Titres et textes */
.da-h1 { margin: 0; font-family: var(--da-font-display); font-weight: 700; font-size: clamp(40px, 6vw + 16px, 76px); line-height: 1.02; letter-spacing: -0.01em; color: var(--da-ink); text-wrap: balance; }
.da-h2 { margin: 0 0 12px; font-family: var(--da-font-display); font-weight: 600; font-size: clamp(30px, 3vw + 20px, 50px); line-height: 1.08; letter-spacing: -0.005em; color: var(--da-ink); text-wrap: balance; }
.da-h3 { margin: 0 0 8px; font-family: var(--da-font-display); font-weight: 600; font-size: clamp(21px, .8vw + 18px, 26px); line-height: 1.15; color: var(--da-ink); }
.da-lead { margin: 0; max-width: 36em; font-family: var(--da-font-text); font-size: clamp(17px, .3vw + 16px, 20px); line-height: 1.5; color: var(--da-ink-2); text-wrap: pretty; }
.da-section-head .da-lead { margin: 0 auto; }
.da-section-head--left .da-lead { margin: 0; }
.da-text { font-size: 17px; line-height: 1.55; color: var(--da-ink-2); }
.da-muted { color: var(--da-ink-muted); }
.da-accent { color: var(--da-coral-text); }
.da-section--ink .da-accent { color: var(--da-coral-on-ink); }

/* Étiquette de section, manuscrite (remplace les « [ … ] » en mono) */
.da-eyebrow { display: inline-block; margin: 0 0 8px; font: 400 24px/1.1 var(--da-font-hand); color: var(--da-coral-text); transform: rotate(-2deg); }
.da-section--ink .da-eyebrow { color: var(--da-coral-on-ink); }
/* Variante en petites capitales Nunito (plus sobre : tarifs, FAQ) */
.da-kicker { display: inline-block; margin: 0 0 10px; font: 800 14px/1.2 var(--da-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--da-coral-text); }
/* Annotation manuscrite violette (décor : aria-hidden si elle répète le texte) */
.da-hand { font: 400 22px/1.1 var(--da-font-hand); color: var(--da-violet); }
/* Souligné dessiné sous un mot : <span class="da-underline">compte</span> */
.da-underline {
  padding-bottom: .12em; white-space: nowrap;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C16 4.5 28 11.5 44 8S72 3.5 90 7.5 110 9.5 117 5.5' fill='none' stroke='%23FD644E' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .32em no-repeat;
}
/* Lien texte (violet, souligné) */
.da-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--da-violet); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.da-link:hover { text-decoration-thickness: 2.5px; }

/* Cartes arrondies */
.da-card { position: relative; padding: 24px; border-radius: var(--da-radius-card); background: var(--da-surface); box-shadow: var(--da-shadow-card); color: var(--da-ink); }
.da-card--lg { padding: 32px; border-radius: var(--da-radius-lg); }
.da-card--flat { box-shadow: none; border: 1.5px solid var(--da-line); }
.da-card--peach { background: var(--da-peach-soft); box-shadow: none; }
.da-card--mint { background: var(--da-mint); box-shadow: none; }
.da-card--pink { background: var(--da-pink-soft); box-shadow: none; }
.da-card--lavender { background: var(--da-lavender-soft); box-shadow: none; }
.da-card--yellow { background: var(--da-yellow-soft); box-shadow: none; }
.da-card--sky { background: var(--da-sky-soft); box-shadow: none; }
.da-card--ink { background: var(--da-ink); color: #fff; box-shadow: var(--da-shadow-float); }
.da-card--ink :focus-visible { outline-color: #fff; }
.da-card h3 { margin-top: 0; }
@media (max-width: 480px) { .da-card { padding: 20px; } .da-card--lg { padding: 24px; } }

/* Pastille / chip */
.da-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: var(--da-radius-pill);
  background: var(--da-surface-2); color: var(--da-ink); font: 800 14px/1.2 var(--da-font-text); }
.da-chip--coral { background: var(--da-coral-strong); color: #fff; }
.da-chip--yellow { background: var(--da-yellow); }
.da-chip--mint { background: var(--da-mint); color: var(--da-green-ink); }
.da-chip--lavender { background: var(--da-lavender); color: #4a2f94; }

/* Pastille numérotée d'étape */
.da-step-num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--da-coral-strong); color: #fff; font: 700 20px/1 var(--da-font-display); }

/* Blobs décoratifs : un conteneur .da-blobs (aria-hidden) en position absolue dans une section en position relative,
   et des <svg class="da-blob da-blob--peach" viewBox="0 0 200 200"><path d="…" fill="currentColor"/></svg>.
   Trois formes (tracés de l'accueil) :
     A : M96 22C124 8 160 22 168 52C174 74 196 88 188 120C180 154 148 160 128 176C104 194 66 188 46 164C26 142 6 118 18 86C28 58 70 36 96 22Z
     B : M109 16C150 20 186 52 182 98C178 142 146 180 98 184C52 188 14 156 18 108C22 70 46 50 64 34C78 22 92 15 109 16Z
     C : M100 18C138 14 176 40 184 84C192 130 160 178 108 184C60 190 20 160 16 112C12 66 56 22 100 18Z
   Placement libre (left/right/top/bottom/width) en style ou classe de page. Contenu au-dessus : .da-above. */
.da-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.da-blob { position: absolute; display: block; width: 280px; height: auto; color: var(--da-peach); }
.da-blob--peach { color: var(--da-peach); }
.da-blob--mint { color: var(--da-mint); }
.da-blob--pink { color: var(--da-pink); }
.da-blob--lavender { color: var(--da-lavender); }
.da-blob--yellow { color: var(--da-yellow-soft); }
.da-blob--sky { color: var(--da-sky-soft); }
.da-above { position: relative; z-index: 1; }

/* Symbole du logo (boussole), réutilisable : <svg class="da-ast" viewBox="0 0 100 100" aria-hidden="true"> + les 4 tracés de la boussole
   (arc, deux aiguilles, deux étincelles) en stroke/fill currentColor, cf. le symbole #ast de accueil-v2.html. */
.da-ast { display: inline-block; width: 1em; height: 1em; color: var(--da-coral); vertical-align: -0.1em; }

/* ==========================================================================
   Tactile, mouvement réduit
   ========================================================================== */
@media (hover: none) {
  .btn:hover, .btn:active { transform: none; }
  .logo:hover .logo-a-ast { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .btn, .logo-a-ast, .nav .nav-links a::after { transition: none !important; }
  .logo:hover .logo-a-ast { transform: none; }
  .nav.menu-ouvert .nav-links { animation: none !important; }
  .reveal, html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}