/* convertisgood — même habillage que pixisgood.com (repris de stockisgood) : filets fins, cases sans arrondi
   ni ombre, Cabinet Grotesk 300 / 500, logo en Bitcount, étiquettes en JetBrains Mono,
   bleu #3366ff seulement sur la navigation et au survol des boutons. Tout est calé à gauche. */

@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/CabinetGrotesk-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/CabinetGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Bitcount'; src: url('fonts/bitcount-latin.woff2') format('woff2'); font-weight: 300 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrainsmono-latin.woff2') format('woff2'); font-weight: 300 500; font-display: swap; }

html[data-theme=clair] {
  --bg: #eeeeee; --line: #d0d0d0; --ink: #141414; --mute: #6b6b66;
  --soft: #e8e8e8; --soft2: #e2e2dc; --hov2: #e4e4df; --text2: #3a3a3a; --text3: #555555; --off: #a0a09b;
  --on-ink: #ffffff; --accent: #3366ff; --accent-txt: #3366ff; --track: #cfcfc9;
  --champ: #ffffff; --err: #c0392b; --bon: #1b7a4b;
  color-scheme: light;
}
html[data-theme=sombre] {
  --bg: #161616; --line: #343434; --ink: #ffffff; --mute: #8c8c8c;
  --soft: #202020; --soft2: #282828; --hov2: #2a2a2a; --text2: #d0d0d0; --text3: #a8a8a8; --off: #777777;
  --on-ink: #000000; --accent: #3366ff; --accent-txt: #6f8fff; --track: #3a3a3a;
  --champ: #161616; --err: #ff6b5e; --bon: #5fd39a;
  color-scheme: dark;
}
:root {
  --cond: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --haut: 52px; --fil: 34px; --panneau: 360px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 300 15px/1.45 var(--cond); }
button, input, textarea, select { font: inherit; color: inherit; }
b, strong, button, label, summary, .btn { font-weight: 500; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: #fff; }
a { color: var(--accent-txt); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; flex: none; }

/* ---------- En-tête en cases ---------- */
.haut { position: sticky; top: 0; z-index: 30; height: var(--haut); display: flex; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; padding: 0 24px; border-right: 1px solid var(--line); text-decoration: none; }
.logo-txt { font-family: 'Bitcount', ui-monospace, monospace; font-size: 22px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.logo-txt .l { font-weight: 300; }
.logo-txt .m { font-weight: 500; }
.onglets { display: flex; }
.onglets a { display: flex; align-items: center; padding: 0 clamp(10px, 1vw, 22px); border-right: 1px solid var(--line); color: var(--text2); text-decoration: none; font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; transition: box-shadow .15s, color .15s; }
.onglets a:hover:not(.on) { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-txt); }
.onglets a.on { background: var(--ink); color: var(--on-ink); }
.prive { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 16px; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.prive span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-sw { align-self: center; width: 28px; height: 26px; margin: 0 16px; padding: 0; border: 1px solid var(--line); background: none; color: var(--mute); cursor: pointer; }
.theme-sw:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Fil sous l'en-tête ---------- */
.fil { position: sticky; top: var(--haut); z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-height: var(--fil); padding: 4px 16px; background: var(--bg); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.fil h1 { margin: 0; font: inherit; font-weight: 500; letter-spacing: inherit; color: var(--ink); }
.fil-d { margin-left: auto; }

/* ---------- Panneau à gauche, scène à droite ---------- */
.outil { display: flex; align-items: flex-start; min-height: calc(100vh - var(--haut) - var(--fil)); }
.panneau { position: sticky; top: calc(var(--haut) + var(--fil)); flex: 0 0 var(--panneau); width: var(--panneau); max-height: calc(100vh - var(--haut) - var(--fil)); overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg); }
.scene { flex: 1; min-width: 0; }
.scene-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 4px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.scene-barre em { font-style: normal; margin-left: 6px; padding: 1px 6px; background: var(--ink); color: var(--on-ink); }

details.sec { border-bottom: 1px solid var(--line); }
details.sec > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 0; cursor: pointer; list-style: none; font-size: 15px; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: ''; flex: 0 0 auto; width: 4px; height: 20px; background: var(--accent-txt); }
details.sec > summary::after { content: '+'; margin-left: auto; color: var(--mute); font-weight: 300; font-size: 17px; }
details.sec[open] > summary::after { content: '–'; }
details.sec > summary:hover { background: var(--soft); }
details.sec[open] > summary { background: linear-gradient(180deg, var(--soft) 0%, var(--hov2) 100%); border-bottom: 1px solid var(--line); }
details.sec > summary > span { flex: 1; min-width: 0; }
.sec-c { padding: 14px 14px 16px; }
.et { display: block; margin: 14px 0 6px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.sec-c > .et:first-child { margin-top: 0; }
.panneau-pied { display: grid; gap: 8px; padding: 16px 14px 24px; }
.panneau-pied .btn { width: 100%; height: 44px; }

/* ---------- Boutons, choix, champs (comme pixisgood) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 0; background: var(--bg); color: var(--ink); font-size: 14px; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn.plein { background: var(--ink); color: var(--on-ink); }
.btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.petit { width: 34px; height: 34px; padding: 0; border-color: var(--line); }
.lien { border: 0; background: none; padding: 0; color: var(--accent-txt); cursor: pointer; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.lien:hover { text-decoration: underline; }
.seg { display: flex; flex-wrap: wrap; gap: 1px; margin: 6px 0; padding: 1px; background: var(--line); }
.seg button { flex: 1 1 auto; min-height: 34px; padding: 0 8px; border: 0; border-radius: 0; background: var(--bg); color: var(--ink); cursor: pointer; font-size: 13px; white-space: nowrap; }
.seg-3 button { flex: 1 0 30%; }
.seg button:not(.on):hover { background: var(--soft2); }
.seg button.on { background: var(--ink); color: var(--on-ink); }
.ligne { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.ligne label { flex: 0 0 82px; font-size: 13px; color: var(--text2); }
.ligne output { font-family: var(--mono); font-size: 11px; padding: 3px 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 42px; text-align: center; }
.ligne > span { font-family: var(--mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
input[type=text], input[type=number], textarea { width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 0; background: var(--champ); }
input[type=text]:focus, input[type=number]:focus, textarea:focus { outline: none; border-color: var(--ink); }
input::placeholder { color: var(--off); }
textarea { display: block; height: auto; padding: 10px; resize: vertical; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.aide { margin: 6px 0 0; font-size: 13px; color: var(--text3); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 18px; background: none; flex: 1; min-width: 60px; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--ink) 0 var(--v, 50%), var(--track) var(--v, 50%) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--ink); border: 1px solid var(--on-ink); }
input[type=range]::-moz-range-track { height: 4px; background: var(--track); }
input[type=range]::-moz-range-progress { height: 4px; background: var(--ink); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 1px solid var(--on-ink); }
input[type=range]:disabled { opacity: .35; }
.apercu { margin: 12px 0 0; padding: 8px 10px; border: 1px solid var(--line); background: var(--champ); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.apercu .et { margin: 0 0 2px; }

.depot { position: relative; display: flex; align-items: center; min-height: 110px; padding: 14px; border: 1px dashed var(--off); background: var(--champ); cursor: pointer; font-size: 14px; }
.depot small { font-family: var(--mono); font-size: 10px; line-height: 1.7; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.depot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.depot:hover, body.glisse .depot { border-color: var(--accent); border-style: solid; }

/* ---------- Chiffres ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.kpi { min-width: 0; padding: 14px 16px 12px; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi-l, .kpi-f { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-n { margin: 6px 0 4px; font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -.01em; white-space: nowrap; }
.kpi-n small { font-size: .45em; margin-left: .25em; color: var(--mute); }
.kpi.hot .kpi-n { font-weight: 500; color: var(--accent-txt); }

/* ---------- Liste des images ---------- */
.vide { margin: 0; padding: 40px 16px; color: var(--text3); }
.liste { list-style: none; margin: 0; padding: 0; }
.img { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 10px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.img:hover { background: var(--soft); }
.vig { width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 0; overflow: hidden; cursor: pointer; background: repeating-conic-gradient(rgba(128, 128, 128, .2) 0% 25%, transparent 0% 50%) 50% / 12px 12px; }
.vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vig:disabled { cursor: default; }
.vig:hover:not(:disabled) { border-color: var(--accent); }
.img-o { min-width: 0; }
.img-o b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-o span { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.img-n { display: grid; gap: 6px; min-width: 0; }
.champ-nom { display: flex; align-items: center; border: 1px solid var(--line); background: var(--champ); }
.champ-nom:focus-within { border-color: var(--ink); }
.champ-nom input { border: 0; background: none; flex: 1; height: 32px; font-family: var(--mono); font-size: 12px; }
.champ-nom .ext { padding-right: 10px; color: var(--mute); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.img-n > input { font-size: 14px; }
.img-r { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; min-width: 150px; }
.img-p { margin-right: 4px; font-family: var(--mono); font-size: 11px; color: var(--mute); line-height: 1.4; }
.img-p b { display: block; font-family: var(--cond); font-size: 17px; color: var(--ink); }
.badge { display: inline-block; padding: 2px 6px; border: 1px solid var(--line); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; color: var(--mute); }
.b-cours { background: var(--accent); border-color: var(--accent); color: #fff; }
.b-gain { border-color: var(--bon); color: var(--bon); }
.b-perte, .b-erreur { border-color: var(--err); color: var(--err); }
.b-erreur { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 11px; }

.avance { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.pbar { flex: 1; height: 4px; background: var(--track); }
.pbar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .25s ease; }

.code .aide { margin: 0; padding: 12px 16px 0; }
.code textarea { width: calc(100% - 32px); margin: 10px 16px 16px; }
.pied { padding: 20px 16px 40px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.pied a { color: inherit; }

/* ---------- Onglet PDF : grille de pages, résultat ---------- */
.seg-2 button { flex: 1 0 40%; }
.pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border-bottom: 1px solid var(--line); }
.pg { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: -1px; }
.pg-v { display: grid; place-items: center; aspect-ratio: 1; padding: 14px; background: var(--soft); overflow: hidden; }
.pg-v canvas { max-width: 100%; max-height: 100%; background: #fff; border: 1px solid var(--line); transition: transform .2s; }
.pg-l { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px 6px; min-width: 0; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.pg-l b { color: var(--ink); }
.pg-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-b { display: flex; border-top: 1px solid var(--line); }
.pg-b button { flex: 1; display: grid; place-items: center; height: 34px; padding: 0; border: 0; border-right: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
.pg-b button:last-child { border-right: 0; }
.pg-b button:hover:not(:disabled) { background: var(--accent); color: #fff; }
.pg-b button:disabled { color: var(--off); cursor: default; }
.res-note { margin: 0; padding: 12px 16px 0; }
.res-l { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
#resultat { border-bottom: 1px solid var(--ink); background: var(--champ); }

/* ---------- Onglet Polices ---------- */
.essai { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.essai .et { margin: 0; flex: none; }
.pol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pol:hover { background: var(--soft); }
.pol-e { grid-column: 1 / -1; font-size: 30px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 38px; }
.pol-n { min-width: 0; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.pol-n .et { margin: 0 0 2px; }
.pol .img-r { justify-content: flex-end; }

/* ---------- Fenêtre avant / après, message ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .7); }
.vm-box { width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--ink); overflow: hidden; }
.vm-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.vm-h div { min-width: 0; font-family: var(--mono); font-size: 11px; }
.vm-h b { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-h span { color: var(--mute); }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cmp { --p: 50%; position: relative; align-self: flex-start; max-width: 100%; line-height: 0; background: repeating-conic-gradient(rgba(128, 128, 128, .2) 0% 25%, transparent 0% 50%) 50% / 16px 16px; overflow: hidden; }
.cmp canvas, .cmp img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 var(--p)); }
.cmp-trait { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.cmp-trait::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 34px; margin: -17px -7px; background: var(--accent); }
.cmp-e { position: absolute; top: 10px; padding: 3px 7px; background: #141414; color: #fff; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; line-height: 1.5; pointer-events: none; }
.cmp-e.av { left: 10px; } .cmp-e.ap { right: 10px; }
.cmp input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.toast { position: fixed; left: 16px; bottom: 16px; z-index: 70; max-width: calc(100vw - 32px); padding: 10px 14px; background: var(--ink); color: var(--on-ink); font-family: var(--mono); font-size: 12px; }

/* ---------- Écrans moyens et téléphone ---------- */
@media (max-width: 1250px) {
  .img { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .img-n { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 860px) {
  .logo { padding: 0 14px; flex: 1; border-right: 0; }
  .haut { flex-wrap: wrap; height: auto; }
  .logo { height: var(--haut); }
  .onglets { order: 3; flex: 1 1 100%; height: 40px; border-top: 1px solid var(--line); }
  .onglets a { flex: 1; justify-content: center; }
  .onglets a:last-child { border-right: 0; }
  .prive { display: none; }
  .fil { position: static; }
  .theme-sw { align-self: center; }
  .theme-sw { margin: 0 10px; }
  .fil-d { display: none; }
  .outil { display: block; }
  .panneau { position: static; width: 100%; max-height: none; border-right: 0; }
  .panneau-pied { border-bottom: 1px solid var(--line); padding-bottom: 16px; justify-items: start; }
  .panneau-pied .btn { width: auto; min-width: 220px; }   /* boutons pas en pleine largeur sur téléphone */
  .avance { width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .kpi-n { font-size: 30px; }
  .img { grid-template-columns: 56px minmax(0, 1fr); padding: 12px; }
  .vig { width: 56px; height: 56px; }
  .img-r { grid-column: 1 / -1; justify-content: flex-start; min-width: 0; }
  .pol { grid-template-columns: minmax(0, 1fr); }
  .pol .img-r { justify-content: flex-start; }
  .pol-e { font-size: 24px; }
  .pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .essai { flex-direction: column; align-items: flex-start; gap: 4px; }
  .res-l { flex-direction: column; align-items: flex-start; gap: 8px; }
  input[type=text], input[type=number], textarea, .champ-nom input { font-size: 16px; } /* évite le zoom automatique de l'iPhone */
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =====================================================================
   Page d'accueil — même déroulé que l'accueil de pixisgood : grande image, trois atouts sur fond d'accent,
   bandeau sombre aux trois grands mots, bloc d'outils en grille à filets, questions fréquentes.
   ===================================================================== */
.ac-wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 40px); }
.ac-kick { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-txt); }
.ac-hero h1, .ac-bloc h2, .ac-faq h2 { font-weight: 300; letter-spacing: -.03em; line-height: .98; margin: 0; }
.ac-bloc h2 strong, .ac-faq h2 strong { font-weight: 500; }

.ac-hero { background: #f3f3f3; color: #0d0d0d; border-bottom: 1px solid var(--line); }
.ac-ill { display: block; width: 100%; height: clamp(300px, 52vw, 640px); border-bottom: 1px solid #d0d0d0; }
.ac-in { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(36px, 6vh, 72px); }
.ac-hero h1 { font-size: clamp(40px, 7.4vw, 118px); }
.ac-hero h1 em { font-style: normal; color: var(--accent); }
.ac-hero p { max-width: 62ch; font-size: clamp(17px, 1.55vw, 22px); color: #2a2a2a; margin: 26px 0 30px; }
.ac-btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.ac-btns .btn { height: 46px; gap: 14px; padding: 0 20px; font-size: 15px; background: transparent; color: #0d0d0d; border-color: rgba(0, 0, 0, .45); }
.ac-btns .btn.plein { background: #0d0d0d; color: #fff; border-color: #0d0d0d; }

.ac-rea { background: var(--accent); color: #fff; }
.ac-rea .ac-wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.ac-c { display: flex; gap: 18px; align-items: center; padding: clamp(20px, 3vw, 34px) clamp(14px, 2vw, 28px); border-right: 1px solid rgba(255, 255, 255, .3); }
.ac-c:first-child { padding-left: 0; } .ac-c:last-child { border-right: 0; }
.ac-c svg { width: 46px; height: 46px; stroke-width: 1.1; }
.ac-c b { display: block; font-size: clamp(20px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.ac-c span { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

.ac-band { position: relative; min-height: clamp(320px, 56vh, 600px); display: flex; align-items: center; overflow: hidden; color: #fff;
  background: #0c0c0c linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px; }
.ac-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px; }
.ac-band .ac-in { position: relative; width: 100%; padding-top: 56px; padding-bottom: 56px; }
.ac-mots { font-weight: 300; font-size: clamp(44px, 9vw, 140px); line-height: .94; letter-spacing: -.04em; text-transform: uppercase; }
.ac-mots span { display: block; }
.ac-mots span:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.ac-mots span:nth-child(3) { color: var(--accent-txt); }
html[data-theme=clair] .ac-mots span:nth-child(3) { color: #6f8fff; }
.ac-band p { margin: 22px 0 0; max-width: 60ch; font-size: clamp(16px, 1.4vw, 20px); color: #e8e8e8; }

.ac-bloc, .ac-faq { padding: clamp(40px, 6vw, 84px) 0 0; scroll-margin-top: 56px; }
.ac-faq { padding-bottom: clamp(56px, 8vw, 112px); border-top: 1px solid var(--line); margin-top: clamp(56px, 8vw, 112px); }
.ac-bloc { padding-bottom: clamp(56px, 8vw, 112px); }
.ac-bloc#formats { padding-bottom: 0; }
.ac-tete { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.ac-bloc h2 { font-size: clamp(34px, 5.4vw, 84px); margin-top: 14px; }
.ac-tete p { margin: 0; color: var(--text2); font-size: clamp(16px, 1.4vw, 20px); }
.ac-grille { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ac-o { position: relative; display: flex; flex-direction: column; min-height: clamp(300px, 30vw, 400px); padding: clamp(22px, 2.4vw, 34px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .2s; }
.ac-ic { display: block; width: clamp(72px, 7vw, 112px); height: clamp(72px, 7vw, 112px); margin-bottom: auto; color: var(--ink); transition: color .2s, transform .3s; }
.ac-ic svg { width: 100%; height: 100%; stroke-width: .9; }
.ac-aa { font-weight: 300; font-size: clamp(64px, 6.4vw, 104px); line-height: 1; letter-spacing: -.04em; width: auto; }
.ac-n { position: absolute; right: clamp(22px, 2.4vw, 34px); top: clamp(22px, 2.4vw, 34px); font: 500 12px var(--mono); color: var(--mute); letter-spacing: .08em; }
.ac-o h3 { font-size: clamp(26px, 2.5vw, 38px); font-weight: 500; line-height: 1; margin: 30px 0 0; }
.pxg { font-family: 'Bitcount', ui-monospace, monospace; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.ac-s { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-txt); margin-top: 10px; }
.ac-o p { margin: 12px 0 0; color: var(--text2); font-size: 16px; }
.ac-go { margin-top: 18px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); transition: color .2s; }
a.ac-o:hover { background: var(--soft2); }
a.ac-o:hover .ac-ic { color: var(--accent-txt); transform: translateY(-4px); }
a.ac-o:hover .ac-go { color: var(--accent-txt); }
a.ac-o:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ac-table { border-top: 1px solid var(--line); }
.ac-l { display: grid; grid-template-columns: minmax(0, 5fr) 40px minmax(0, 4fr) minmax(0, 5fr); gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: clamp(17px, 1.6vw, 23px); transition: background .2s; }
.ac-l:hover { background: var(--soft2); }
.ac-l:hover .ac-fl { color: var(--accent-txt); transform: translateX(4px); }
.ac-fl { font-family: var(--mono); color: var(--mute); transition: color .2s, transform .2s; }
.ac-vers { font-weight: 500; }
.ac-plus { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

.ac-cadre { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); }
.ac-faq h2 { font-size: clamp(32px, 4.4vw, 68px); margin-top: 12px; }
.ac-faq details { border-top: 1px solid var(--line); }
.ac-faq details:last-child { border-bottom: 1px solid var(--line); }
.ac-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.01em; }
.ac-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary::after { content: "+"; font: 500 24px var(--mono); color: var(--accent-txt); flex: none; }
.ac-faq details[open] summary::after { content: "–"; }
.ac-faq summary:hover { color: var(--accent-txt); }
.ac-faq details p { color: var(--text2); font-size: 17px; margin: 0; padding: 0 0 24px; max-width: 70ch; }

.ac-pied { border-top: 1px solid var(--line); padding: 28px 0 40px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.ac-pied .ac-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.ac-pied .logo-txt { font-size: 18px; }
.ac-pied a { color: var(--ink); }

@media (max-width: 1100px) {
  .ac-grille { grid-template-columns: 1fr; }
  .ac-o { min-height: 240px; }
  .ac-tete, .ac-cadre { grid-template-columns: 1fr; }
  .ac-rea .ac-wrap { grid-template-columns: 1fr; }
  .ac-c { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-left: 0; } .ac-c:last-child { border-bottom: 0; }
  .ac-l { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .ac-plus { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .ac-ill { height: auto; aspect-ratio: 1600 / 760; } }   /* l'illustration entière, sans rognage */
@media (max-width: 560px) {
  .ac-l { grid-template-columns: 1fr; gap: 4px; }
  .ac-fl { display: none; }
  .ac-vers::before { content: "→ "; font-family: var(--mono); color: var(--accent-txt); }
}