/* mordiatlan.com — identité "document comptable" : filets, précision, chiffres alignés */
:root{
  --paper:#fbfbfa; --surface:#f2f4f3; --sunk:#eaeeec;
  --border:#e0e5e3; --rule:#d2dad7;
  --ink:#14191c; --muted:#56646a; --faint:#5f6b72;
  --accent:#0d6b62; --accent-ink:#0a5750; --accent-bg:#e4f1ee;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:740px; --radius:6px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1416; --surface:#171d20; --sunk:#1d2427;
    --border:#283134; --rule:#323d41;
    --ink:#e9eeef; --muted:#9dabaf; --faint:#7b888c;
    --accent:#3fc9b9; --accent-ink:#5bdcca; --accent-bg:#11302c;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1416; --surface:#171d20; --sunk:#1d2427;
  --border:#283134; --rule:#323d41;
  --ink:#e9eeef; --muted:#9dabaf; --faint:#7b888c;
  --accent:#3fc9b9; --accent-ink:#5bdcca; --accent-bg:#11302c;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* défilement doux réservé aux ancres internes, pas au chargement d'une page */
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; font-feature-settings:"kern","liga";
}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:22px}

a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
a:hover{border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* — en-tête : un filet, pas une ombre — */
header.site{border-bottom:1px solid var(--rule); background:var(--paper); position:sticky; top:0; z-index:5}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:15px; flex-wrap:wrap}
.brand{font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); border:0; letter-spacing:-.01em}
.brand span{font-family:var(--mono); font-size:11.5px; font-weight:450; color:var(--faint); text-transform:uppercase; letter-spacing:.11em}
nav.top{display:flex; gap:20px; align-items:center; font-size:14.5px; flex-wrap:wrap}
nav.top a{color:var(--muted); border:0}
nav.top a:hover{color:var(--accent-ink)}
.lang{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; border:1px solid var(--rule); border-radius:3px; padding:3px 8px}

/* — titres — */
h1{font-family:var(--serif); font-size:clamp(31px,5vw,45px); line-height:1.16; letter-spacing:-.02em; font-weight:600; margin:0 0 20px; text-wrap:balance}
h2{font-family:var(--serif); font-size:clamp(23px,3vw,28px); line-height:1.28; letter-spacing:-.013em; font-weight:600; margin:0 0 12px; text-wrap:balance}
h3{font-family:var(--sans); font-size:18px; font-weight:600; letter-spacing:-.008em; margin:0 0 6px}
p{margin:0 0 17px; max-width:66ch}
.eyebrow{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 16px}
.lead{font-size:20px; line-height:1.55; color:var(--muted); margin:0 0 30px; max-width:58ch}

/* — la réponse extractible : le bloc que les IA citent — */
.answer{
  font-size:19px; line-height:1.6; color:var(--ink); margin:0 0 28px; max-width:64ch;
  border-left:2px solid var(--accent); padding:4px 0 4px 20px;
}

/* — sections séparées par un filet, comme un registre — */
.hero{padding-block:62px 46px; border-bottom:1px solid var(--rule)}
section{padding-block:50px; border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}

/* — bouton — */
.cta{
  display:inline-block; background:var(--accent); color:var(--paper);
  font-family:var(--sans); font-weight:550; font-size:16px;
  padding:13px 24px; border-radius:var(--radius); border:0;
  transition:background .15s ease, transform .15s ease;
}
.cta:hover{background:var(--accent-ink); transform:translateY(-1px)}
.cta-note{font-family:var(--mono); font-size:13px; color:var(--faint); margin-top:14px; line-height:1.55}

/* — fiches — */
.cards{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); margin-top:30px}
.card{background:var(--paper); padding:24px}
.card p{margin:0; color:var(--muted); font-size:15.5px; max-width:none}
.card h3 a{color:var(--ink); border:0}
.card h3 a:hover{color:var(--accent-ink)}
.tag{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px}

/* — listes — */
ul.checks{list-style:none; padding:0; margin:0 0 18px; max-width:66ch}
ul.checks li{padding-left:28px; position:relative; margin-bottom:11px; color:var(--muted)}
ul.checks li::before{content:"—"; position:absolute; left:0; color:var(--accent); font-weight:600}
ul.checks li strong{color:var(--ink); font-weight:600}
ul.plain{padding-left:20px; color:var(--muted); max-width:66ch} ul.plain li{margin-bottom:9px}

/* — tableaux : le cœur de l'identité, chiffres alignés — */
.scroll{overflow-x:auto; margin:0 0 18px}
table{width:100%; border-collapse:collapse; font-size:15.5px}
th,td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--border); vertical-align:top}
tr:first-child th,tr:first-child td{border-top:1px solid var(--rule)}
th{font-weight:600; color:var(--ink); width:38%; font-variant-numeric:tabular-nums}
td{color:var(--muted); font-variant-numeric:tabular-nums}
td strong,th strong{color:var(--ink)}

/* — encadré — */
.note{background:var(--surface); border-left:2px solid var(--rule); border-radius:0; padding:18px 22px; font-size:15.5px; color:var(--muted); margin:0 0 18px}
.note strong{color:var(--ink); font-weight:600}
.note p{margin:0; max-width:none}

/* — schéma — */
figure.schema{margin:30px 0 8px; padding:0}
figure.schema svg{width:100%; height:auto; display:block}
figure.schema figcaption{font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:12px; letter-spacing:.03em}

/* — pied — */
footer.site{padding-block:36px 44px; color:var(--faint); font-size:14.5px; border-top:1px solid var(--rule)}
footer.site a{color:var(--muted)}
footer.site .row{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:14px}
footer.site div:last-child{font-family:var(--mono); font-size:12.5px; line-height:1.6}

@media (max-width:520px){
  body{font-size:16.5px}
  .hero{padding-block:44px 34px}
  section{padding-block:38px}
  .lead{font-size:18.5px}
  th{width:auto}
}

/* — styles du schéma SVG — */
figure.schema text{font-family:var(--sans)}
figure.schema .s-t{font-size:14px; font-weight:600; fill:var(--ink)}
figure.schema .s-s{font-size:12px; fill:var(--muted)}
figure.schema .s-l{font-family:var(--mono); font-size:11px; letter-spacing:.12em; fill:var(--faint)}
figure.schema .s-box{fill:var(--surface); stroke:var(--rule); stroke-width:1}
figure.schema .s-box-a{fill:var(--accent-bg); stroke:var(--accent); stroke-width:1}
figure.schema .s-zone{fill:none; stroke:var(--border); stroke-width:1; stroke-dasharray:3 3}
figure.schema .s-arr{stroke:var(--muted); stroke-width:1.2; fill:none}
figure.schema .s-stop{stroke:var(--accent); stroke-width:1.2; stroke-dasharray:4 4}

/* — calculateur — */
.calc{border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; margin:0 0 20px}
.calc-in{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule)}
.calc-in-3{grid-template-columns:repeat(3,1fr)}
.calc-f{background:var(--surface); padding:18px 20px}
.calc-f label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}
.calc-f input{
  width:100%; background:var(--paper); color:var(--ink);
  border:1px solid var(--border); border-radius:4px; padding:9px 11px;
  font-family:var(--mono); font-size:17px; font-variant-numeric:tabular-nums;
}
.calc-f input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-bg)}
.calc-f .unit{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:7px; display:block}
.calc-out{background:var(--paper)}
.calc-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 20px; border-top:1px solid var(--border)}
.calc-row span{color:var(--muted); font-size:15px}
.calc-row b{font-family:var(--mono); font-size:19px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-row.key{background:var(--accent-bg)}
.calc-row.key b,.calc-row.key span{color:var(--accent-ink)}
.calc-row.key b{font-weight:600}
.calc-src{font-family:var(--mono); font-size:11.5px; color:var(--faint); line-height:1.6; margin:0 0 20px; max-width:66ch}
@media (max-width:640px){ .calc-in,.calc-in-3{grid-template-columns:1fr} .calc-row b{font-size:17px} }

/* — captures d'écran — */
figure.shot{margin:30px 0 8px; padding:0}
figure.shot img{width:100%; height:auto; display:block; border:1px solid var(--rule); border-radius:var(--radius)}
figure.shot figcaption{font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:12px; line-height:1.65; letter-spacing:.02em}
figure.shot figcaption b{color:var(--muted); font-weight:500}

/* — le mark dans l'en-tête — */
.brand{display:inline-flex; align-items:center; gap:9px}
.brand .mk{width:23px; height:23px; flex:none; color:var(--accent)}
.mk-big{width:54px; height:54px; color:var(--accent); display:block; margin-bottom:22px}

/* — portrait sur la page À propos — */
.who-row{display:flex; gap:28px; align-items:flex-start; margin-bottom:18px}
.who-row img{width:230px; height:auto; flex:none; border:1px solid var(--rule); border-radius:var(--radius); display:block}
.who-row .who-txt p:last-child{margin-bottom:0}
@media (max-width:620px){
  .who-row{flex-direction:column; gap:20px}
  .who-row img{width:190px}
}

/* — navigation : identique sur toutes les pages, menu sur mobile — */
header.site .wrap{position:relative}
nav.top a[aria-current="page"]{color:var(--ink); font-weight:550}
nav.top a[aria-current="page"]::after{content:""; display:block; height:1.5px; background:var(--accent); margin-top:3px}

.burger{display:none; background:none; border:1px solid var(--rule); border-radius:5px;
        width:40px; height:36px; cursor:pointer; padding:9px 9px; flex-direction:column;
        justify-content:space-between; align-items:stretch}
.burger span{display:block; height:1.6px; background:var(--ink); border-radius:2px; transition:.18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}

@media (max-width:720px){
  header.site .wrap{flex-wrap:nowrap}
  .burger{display:flex}
  nav.top{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule); padding:6px 0; z-index:20;
  }
  nav.top.ouvert{display:flex}
  nav.top a{padding:13px 22px; font-size:16px; border-bottom:1px solid var(--border)}
  nav.top a:last-child{border-bottom:0}
  nav.top a[aria-current="page"]::after{display:none}
  nav.top a[aria-current="page"]{border-left:2px solid var(--accent); padding-left:20px}
  .lang{align-self:flex-start; margin:8px 22px 4px; border-radius:3px}
}

/* — animation du schéma : les bons de livraison qui traversent — */
figure.schema .bon{fill:var(--accent); opacity:0}
figure.schema .pulse{fill:var(--accent); opacity:0}
figure.schema .voie{stroke:var(--border); stroke-width:1; stroke-dasharray:2 4}

@keyframes bon-passe{
  0%   {transform:translateX(0);     opacity:0}
  7%   {opacity:1}
  27%  {transform:translateX(140px); opacity:1}
  42%  {transform:translateX(140px); opacity:1}
  64%  {transform:translateX(274px); opacity:1}
  84%  {transform:translateX(274px); opacity:1}
  94%  {transform:translateX(274px); opacity:0}
  100% {transform:translateX(274px); opacity:0}
}
@keyframes bon-bloque{
  0%   {transform:translateX(0);     opacity:0; fill:var(--accent)}
  7%   {opacity:1}
  27%  {transform:translateX(140px); opacity:1; fill:var(--accent)}
  40%  {transform:translateX(140px); fill:#c77b28}
  48%  {transform:translateX(140px) translateY(9px); fill:#c77b28}
  86%  {transform:translateX(140px) translateY(9px); opacity:1; fill:#c77b28}
  96%  {transform:translateX(140px) translateY(9px); opacity:0}
  100% {opacity:0}
}
@keyframes agent-pulse{
  0%,20%  {opacity:0;   transform:scale(.74)}
  32%     {opacity:.14; transform:scale(1)}
  48%     {opacity:0;   transform:scale(1.14)}
  100%    {opacity:0}
}
figure.schema .b1  {animation:bon-passe   6.4s linear infinite}
figure.schema .b2  {animation:bon-passe   6.4s linear infinite 1.6s}
figure.schema .b3  {animation:bon-passe   6.4s linear infinite 3.2s}
figure.schema .bloq{animation:bon-bloque  6.4s linear infinite 4.8s}
figure.schema .pulse{animation:agent-pulse 1.6s ease-out infinite; transform-origin:232px 110px}

/* — 2. apparition des fiches au défilement — */
.cards.js-reveal .card{opacity:0; transform:translateY(14px)}
.cards.js-reveal.vu .card{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1);
}
.cards.js-reveal.vu .card:nth-child(2){transition-delay:.09s}
.cards.js-reveal.vu .card:nth-child(3){transition-delay:.18s}
.cards.js-reveal.vu .card:nth-child(4){transition-delay:.27s}

/* — 3. la ligne bloquée mise en lumière sur la capture — */
.shot-wrap{position:relative; display:block; line-height:0}
.shot-zone{
  position:absolute; left:23.5%; top:70.8%; width:75%; height:7.4%;
  border:1.5px solid #c77b28; border-radius:3px;
  background:rgba(199,123,40,.10);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.shot-note{
  position:absolute; left:23.5%; top:79.4%;
  font-family:var(--mono); font-size:11.5px; line-height:1.4; color:#a8641c;
  background:var(--paper); border:1px solid #c77b28; border-radius:3px;
  padding:5px 9px; opacity:0; transform:translateY(-4px);
  transition:opacity .35s ease, transform .35s ease; pointer-events:none; white-space:nowrap;
}
.shot-wrap:hover .shot-zone,.shot-wrap:focus-within .shot-zone{opacity:1}
.shot-wrap:hover .shot-note,.shot-wrap:focus-within .shot-note{opacity:1; transform:none}
@media (hover:none){ .shot-zone{opacity:1} .shot-note{opacity:1; transform:none} }
@media (max-width:560px){ .shot-note{font-size:10px; white-space:normal; max-width:60%} }
:root:not([data-theme="light"]) .shot-note{color:#e0a45f}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .shot-note{color:#a8641c} }
:root[data-theme="dark"] .shot-note{color:#e0a45f}

/* — vidéo de démonstration — */
figure.film{margin:30px 0 8px; padding:0}
figure.film video{width:100%; height:auto; display:block; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface)}
figure.film figcaption{font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:12px; line-height:1.65; letter-spacing:.02em}
figure.film figcaption b{color:var(--muted); font-weight:500}

/* — figurines cliquables (page QG) — */
.troupe{
  display:grid; gap:6px;
  grid-template-columns:repeat(6,1fr);
  margin:26px 0 0; align-items:end;
}
.troupe .fig{
  appearance:none; background:none; border:1px solid transparent; cursor:pointer; font:inherit;
  padding:12px 4px 10px; border-radius:var(--radius); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.troupe .fig:hover{background:var(--surface); transform:translateY(-3px)}
.troupe .fig[aria-pressed="true"]{background:var(--surface); border-color:var(--rule)}
.troupe .fig img{width:auto; height:136px; display:block; margin:0}
.fig-nom{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em;
         text-transform:uppercase; color:var(--muted); line-height:1.3}
.troupe .fig[aria-pressed="true"] .fig-nom{color:var(--ink); font-weight:500}
.fig-etat{font-family:var(--mono); font-size:9px; letter-spacing:.06em;
          padding:2px 5px; border-radius:2px; white-space:nowrap}
.fig-production{color:var(--accent-ink); background:var(--accent-bg)}
.fig-realisable{color:var(--faint); border:1px solid var(--border)}
.fig-panneau{
  background:var(--surface); border-left:2px solid var(--accent);
  padding:20px 24px; margin:10px 0 18px; min-height:100px;
}
.fig-panneau .fig-resume{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
                         text-transform:uppercase; color:var(--accent-ink); margin-bottom:9px}
.fig-panneau .fig-texte{margin:0; color:var(--muted); font-size:15.5px; max-width:70ch}
@media (max-width:640px){
  .troupe{grid-template-columns:repeat(3,1fr); gap:4px}
  .troupe .fig img{height:112px}
}
@media (max-width:380px){ .troupe .fig img{height:92px} .fig-etat{font-size:8.5px} }

/* — questions fréquentes — */
details.qa{border-top:1px solid var(--border)}
details.qa:last-of-type{border-bottom:1px solid var(--border)}
details.qa summary{
  list-style:none; cursor:pointer; padding:17px 34px 17px 0; position:relative;
  font-size:17.5px; font-weight:500; color:var(--ink); line-height:1.45;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary:hover{color:var(--accent-ink)}
details.qa summary::after{
  content:""; position:absolute; right:6px; top:26px;
  width:9px; height:9px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg); transition:transform .2s ease;
}
details.qa[open] summary::after{transform:rotate(-135deg); border-color:var(--accent)}
details.qa[open] summary{color:var(--accent-ink)}
.qa-rep{padding:0 34px 20px 0}
.qa-rep p{margin:0; color:var(--muted); font-size:16px; max-width:70ch}

/* — adresse mail en clair : un lien mailto ne marche pas chez tout le monde — */
.mail-direct{
  font-family:var(--mono); font-size:13.5px; color:var(--faint);
  margin-top:14px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; line-height:1.6;
}
.mail-direct a{color:var(--accent-ink); border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.copier{
  appearance:none; font:inherit; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:var(--surface); border:1px solid var(--rule);
  border-radius:3px; padding:3px 9px; cursor:pointer; transition:.15s ease;
}
.copier:hover{color:var(--ink); border-color:var(--muted)}
.copier.fait{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-bg)}
.fig-aide{font-family:var(--mono); font-size:12.5px; color:var(--faint); line-height:1.65;
          margin:20px 0 0; max-width:70ch}