/* elma-sources: ["assets/legal.css","assets/elma-da.css"] */
/* Pages légales, design xAI (partagé) */
:root {
  --canvas: #0d0d0d; --canvas-card: #191919; --hairline: #212327;
  --ink: #fff; --body: #dadbdf; --mute: #7d8187;
  --pill-border: rgba(255,255,255,.25);
  --radius-sm: 8px; --radius-pill: 9999px;
  --pad-x: clamp(20px, 5vw, 40px);
  --font: 'Manrope', system-ui, sans-serif; --mono: 'Manrope', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--canvas); color: var(--ink); font-family: var(--font); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.container { width: 100%; max-width: 820px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.nav { position: sticky; top: 0; z-index: 50; background: rgba(10,10,10,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
.nav__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-x); }
.nav__brand { font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; padding: 11px 20px; border-radius: var(--radius-pill); border: 1px solid var(--pill-border); color: var(--ink); background: transparent; text-decoration: none; transition: background-color .18s ease; }
.pill:hover { background: rgba(255,255,255,.06); }
.pill--primary { background: var(--ink); color: #0d0d0d; border-color: var(--ink); }

.legal { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 1.4px; font-size: 13px; color: var(--mute); display: block; margin-bottom: 14px; }
.legal h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.05; letter-spacing: -.03em; font-weight: 400; }
.legal h2 { font-size: 20px; letter-spacing: -.01em; font-weight: 400; margin-top: 40px; margin-bottom: 12px; }
.legal h3 { font-size: 16px; font-weight: 500; margin-top: 22px; margin-bottom: 6px; color: var(--ink); }
.legal p, .legal li { color: var(--body); font-size: 15px; }
.legal p { margin-top: 10px; }
.legal ul { margin-top: 10px; padding-left: 20px; }
.legal li { margin-top: 6px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal .updated { color: var(--mute); font-size: 13px; margin-top: 16px; }
.legal .card { background: var(--canvas-card); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 24px; margin-top: 24px; }
.legal .card p { margin-top: 6px; }
.legal hr { border: 0; border-top: 1px solid var(--hairline); margin: 40px 0; }

.footer { border-top: 1px solid var(--hairline); padding: 40px var(--pad-x); }
.footer__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.footer a, .footer span { color: var(--body); font-size: 14px; text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }

/* DA partagée avec ayoubelamri.com (voir DESIGN.md) — dernière couche, chargée après toutes les autres.
   Les couleurs des feuilles précédentes ont déjà été remplacées par nos tokens ; ce fichier ne fait que
   la typo et les composants signatures : étiquette à coins, bouton à remplissage, liens qui roulent. */
:root{
  --da-bg:#0d0d0d;--da-card:#14171f;--da-surface:#0f1219;--da-border:#29303f;
  --da-text:#fafafa;--da-muted:#a0a8ba;--da-primary:#4260e4;--da-accent:#a7b8ff;
  --da-font:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --da-ease-fill:cubic-bezier(.19,1,.22,1);--da-ease-roll:cubic-bezier(.76,0,.24,1)
}

/* Typo : Manrope partout, y compris là où l'ancienne DA posait une mono ou une serif. */
body,body *:not(svg):not(svg *):not(code):not(pre){font-family:var(--da-font)!important}
body{background:var(--da-bg);color:var(--da-text);-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in oklab,var(--da-primary) 45%,transparent)}
:focus-visible{outline-color:var(--da-accent)!important}

/* Titres : tracking serré du portfolio. */
.rc-hero h1{font-size:clamp(40px,6.2vw,72px);line-height:1.04;font-weight:600;letter-spacing:-.045em}
.rc-hero h1 span{background:linear-gradient(90deg,#d6ddff,var(--da-accent) 50%,#6b84ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.rc-tech-intro h2,.rc-cta h2{letter-spacing:-.045em;font-weight:600}
.rc-section-head h2,.rc-products-head h2{font-weight:600;letter-spacing:-.01em}

/* Étiquette de section : texte bleu clair, quatre coins blancs (comme sur le portfolio). */
.rc-label{display:table;margin:0 auto 48px;padding:6px 12px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--da-accent);
  --c:rgba(250,250,250,.6);
  background:
    linear-gradient(var(--c),var(--c)) left top/6px 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px 6px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/6px 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px 6px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/6px 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px 6px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/6px 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px 6px no-repeat}
.rc-label:before,.rc-label:after{content:none}

/* Bouton à remplissage : contour clair, un disque bleu remplit le bouton depuis le centre au survol. */
.rc-button,.elma-raycast .nav .pill,.pill--primary{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 32px;min-height:48px;border:1.5px solid rgba(250,250,250,.25);border-radius:12px;background:transparent;color:var(--da-text);
  font-size:14px;font-weight:600;letter-spacing:0;box-shadow:none;transition:border-color .6s cubic-bezier(.23,1,.32,1),transform .2s}
.rc-button:before,.elma-raycast .nav .pill:before,.pill--primary:before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--da-primary);opacity:0;transform:translate(-50%,-50%);transition:width .8s var(--da-ease-fill),height .8s var(--da-ease-fill),opacity .8s var(--da-ease-fill)}
:is(.rc-button,.elma-raycast .nav .pill,.pill--primary):is(:hover,:focus-visible){border-color:transparent;color:#fff}
:is(.rc-button,.elma-raycast .nav .pill,.pill--primary):is(:hover,:focus-visible):before{width:340px;height:340px;opacity:1}
:is(.rc-button,.elma-raycast .nav .pill,.pill--primary):active{transform:scale(.95)}
.elma-raycast .nav .pill{padding:10px 22px;min-height:44px}

/* Liens qui roulent : le texte monte, une copie arrive par le bas (copie ajoutée par elma-da.js). */
.da-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.da-roll>span{display:block;transition:transform .28s var(--da-ease-roll)}
.da-roll>span+span{position:absolute;left:0;top:100%}
:is(a,button):is(:hover,:focus-visible) .da-roll>span{transform:translateY(-100%)}
.elma-raycast .nav .nav__link{color:rgba(250,250,250,.6);font-weight:600;transition:color .15s}
.elma-raycast .nav .nav__link:is(:hover,:focus-visible){color:var(--da-text);background:none}

/* Barre de navigation : même verre sombre que les cartes du portfolio. */
.elma-raycast .nav .nav__inner{background:rgba(13,13,13,.6);border:1px solid rgba(250,250,250,.1);box-shadow:none;backdrop-filter:blur(12px)}
.nav__brand span{color:var(--da-primary)!important}

/* Liens texte et petites mentions. */
.rc-text-link{color:var(--da-accent);font-weight:600}
.rc-text-link:hover{color:var(--da-text)}
.rc-micro,.rc-product-note,.rc-tech-caption{letter-spacing:0;font-size:12px}
.rc-tech-number,.rc-architecture span{color:var(--da-accent);font-weight:700}

/* Surfaces : cartes #14171f, bordures #29303f, fenêtres et produits sans violet ni corail. */
.rc-window{background:radial-gradient(85% 50% at 51% 5%,rgba(66,96,228,.16),rgba(167,184,255,.06) 46%,rgba(250,250,250,.02));border-color:rgba(250,250,250,.08)}
.rc-window-inner{background:var(--da-surface)}
.rc-chat,.rc-architecture,.rc-categories{background:var(--da-card);border-color:var(--da-border)}
.rc-product,.rc-product:nth-child(2){background:linear-gradient(138deg,#1d2440 18%,var(--da-card) 82%);box-shadow:inset 0 0 0 1px rgba(250,250,250,.08)}
.rc-product-head p{color:#d6ddff}
.rc-product-preview{background:var(--da-surface);border-color:rgba(250,250,250,.08)}
.rc-tech-figure{background-color:var(--da-surface)}

@media (max-width:600px){.rc-hero{padding-top:148px}}

@media (prefers-reduced-motion:reduce){
  .rc-button:before,.elma-raycast .nav .pill:before,.pill--primary:before,.da-roll>span{transition:none}
}

/* Vidéo à activation explicite ; la miniature reste locale. */
.da-video{position:relative;margin:2rem 0;background:#14171f;border:1px solid #29303f;border-radius:16px;overflow:hidden}
.da-video img,.da-video iframe{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:0}
.da-video__lire{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);min-height:48px;padding:12px 24px;border:1px solid #a7b8ff;border-radius:12px;background:#4260e4;color:#fafafa;font:600 16px Manrope,sans-serif;cursor:pointer}
.da-video figcaption{padding:16px;color:#a0a8ba;font-size:14px}
.da-video button:focus-visible{outline:3px solid #a7b8ff;outline-offset:4px}

/* Journal et expertises : mêmes tokens que la page d’accueil. */
.da-fil ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;font-size:14px;color:#a0a8ba}
.da-fil li+li:before{content:"/";margin-right:8px}
.da-themes ul{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:32px 0}
.da-themes a{display:flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #29303f;border-radius:12px;color:#a7b8ff}
.da-reponse{font-size:clamp(18px,2vw,22px);color:#fafafa;line-height:1.6;max-width:75ch}
.da-encart,.da-liees,.da-faq{margin:48px 0}
.da-encart{padding:24px;border:1px solid #29303f;border-radius:12px;background:#14171f}
.da-liees ul{padding:0;list-style:none}.da-liees li{padding:16px 0;border-bottom:1px solid #29303f}.da-liees span{display:block;color:#a0a8ba;font-size:14px}
.da-faq details{margin:12px 0;padding:20px 24px;background:#fafafa;color:#111114;border-radius:16px}
.da-faq summary{position:relative;cursor:pointer;min-height:44px;display:flex;align-items:center;padding-right:32px;font-weight:600;list-style:none}
.da-faq summary:after{content:"+";position:absolute;right:0;color:#60646e;font-size:24px}.da-faq details[open] summary:after{content:"−"}
.da-faq details p{color:#30333a}.da-faq a{color:#2a3fa8}
.da-vente__actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.da-derniers{padding:112px 16px}.da-derniers .rc-shell{max-width:1220px;margin:auto}
.da-derniers__titre{margin-top:32px;font-size:24px}.da-derniers__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0}
.da-derniers__grille a{height:100%;display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid #29303f;border-radius:12px;background:#14171f;color:#fafafa}
.da-derniers__grille strong{font-size:22px;line-height:1.2;letter-spacing:-.035em}.da-derniers__grille span{font-size:14px;color:#a0a8ba}.da-derniers__grille img{width:100%;height:auto;border-radius:12px}
.da-derniers__tout{margin-top:24px}.post .container{overflow-wrap:anywhere}.post pre{overflow:auto}.post .table-wrap{overflow-x:auto}
@media(max-width:700px){.da-derniers{padding:80px 16px}.da-derniers__grille{grid-template-columns:1fr}.da-faq details{padding:16px}}

.da-expertises{position:relative}.da-expertises summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center}.da-expertises summary::-webkit-details-marker{display:none}
.da-expertises__menu{position:absolute;top:100%;left:0;z-index:30;width:280px;padding:12px;background:#14171f;border:1px solid #29303f;border-radius:12px;box-shadow:0 18px 40px #0008}
.da-expertises__menu a{display:flex;align-items:center;min-height:44px;padding:8px 12px;color:#fafafa}.da-expertises__menu a:hover{background:#1b2a6b;border-radius:8px}
.da-offres{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0}.da-offres a{display:flex;align-items:center;min-height:44px;padding:12px 18px;color:#a7b8ff;border:1px solid #29303f;border-radius:12px}
@media(max-width:800px){.da-expertises__menu{position:static;width:100%;box-shadow:none}.da-expertises{width:100%}.da-offres{flex-direction:column}}

/* Dans les pages à gabarit « legal » (articles, pages qui vendent), le style des liens texte ne doit pas écraser les boutons. */
.legal a.rc-button,.legal a.pill,.legal .post__cta a.pill{text-decoration:none;color:var(--da-text)}
.legal .post__cta{background:var(--da-card);border:1px solid var(--da-border)}
.legal .post__cta:before,.legal .post__cta:after{content:none}