/* CHOPA — feuille de style commune au site vitrine et aux pages légales.
 * Tokens et recette « verre liquide » alignés sur src/theme/tokens.ts.
 * Les styles inline des pages viennent de la maquette Claude Design
 * (projet « CHOPA mobile app screens », fichier « Site CHOPA.dc.html ») et
 * sont conservés tels quels : ce fichier ne porte que les tokens, la base,
 * les états de survol/focus (impossibles en inline) et les pages-documents.
 */

:root{
  --bg:#F6F4F0;--ink:#14120F;--mut:#6E6862;--mut2:#9B958B;
  --surf:rgba(255,255,255,.60);--surf-strong:rgba(255,255,255,.70);
  --edge:rgba(255,255,255,.95);--edge-soft:rgba(255,255,255,.50);
  --corail:#FF5D47;--corail-deep:#EE4A33;--corail-soft:#FFE9E4;--corail-fg:#BE351D;
  /* Le corail de marque #FF5D47 ne donne que 3,04:1 avec du texte blanc :
   * conforme AA seulement au-delà de 18,66px gras (le « CHOPE ! » de l'app).
   * Les boutons du site sont en 14–16px, donc soumis au seuil de 4,5:1 —
   * d'où ce corail assombri, le plus proche de la marque qui passe (4,64:1).
   * --corail reste la couleur des aplats, points et accents sans texte. */
  --corail-btn:#D63C22;--corail-btn-hover:#BE3115;
  --sauge:#6E9B7C;--sauge-soft:#E4EFE6;--sauge-fg:#3F6B4D;
  --lavande:#A99BE0;--lav-soft:#EFEAFE;--lav-fg:#7565C9;
  --ambre:#E8A33D;--ambre-soft:#FBF1DF;--ambre-fg:#855C0C;
  --or:#D9A93A;--or-soft:rgba(217,169,58,.18);--or-fg:#7F600F;
  --thumb:#ECE9E3;--lock:#F1EFEA;--track:#EDEAE4;--dot:#D6D1C8;--sil:#D8D5D0;
  --sh:0 5px 18px rgba(40,30,15,.06);--sh-lift:0 18px 44px rgba(40,30,15,.10);
  --warm1:#DED6C8;--warm2:#E3D3C4;--hair:rgba(40,30,15,.07);
}

/* Le thème sombre est défini deux fois : sous prefers-color-scheme pour le
 * réglage « système », et sous [data-theme="dark"] pour que la bascule
 * manuelle gagne dans les deux sens. Ne jamais donner à une couleur son
 * unique définition dans l'un de ces blocs. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#151311;--ink:#F7F4EF;--mut:#B0A9A0;--mut2:#928B82;
    --surf:rgba(255,255,255,.08);--surf-strong:rgba(255,255,255,.13);
    --edge:rgba(255,255,255,.20);--edge-soft:rgba(255,255,255,.10);
    --corail-soft:rgba(255,93,71,.20);--corail-fg:#FF9C88;
    --sauge-soft:rgba(110,155,124,.20);--sauge-fg:#9FCCAC;
    --lav-soft:rgba(196,181,253,.18);--lav-fg:#BEB1F0;
    --ambre-soft:rgba(232,163,61,.18);--ambre-fg:#EDBB70;
    --or-soft:rgba(217,169,58,.20);--or-fg:#E3C060;
    --thumb:#272421;--lock:rgba(255,255,255,.07);--track:#2A2724;--dot:#3B3733;--sil:#3A342C;
    --sh:0 5px 18px rgba(0,0,0,.35);--sh-lift:0 18px 44px rgba(0,0,0,.45);
    --warm1:#3A332B;--warm2:#413429;--hair:rgba(255,255,255,.09);
  }
}
:root[data-theme="dark"]{
  --bg:#151311;--ink:#F7F4EF;--mut:#B0A9A0;--mut2:#928B82;
  --surf:rgba(255,255,255,.08);--surf-strong:rgba(255,255,255,.13);
  --edge:rgba(255,255,255,.20);--edge-soft:rgba(255,255,255,.10);
  --corail-soft:rgba(255,93,71,.20);--corail-fg:#FF9C88;
  --sauge-soft:rgba(110,155,124,.20);--sauge-fg:#9FCCAC;
  --lav-soft:rgba(196,181,253,.18);--lav-fg:#BEB1F0;
  --ambre-soft:rgba(232,163,61,.18);--ambre-fg:#EDBB70;
  --or-soft:rgba(217,169,58,.20);--or-fg:#E3C060;
  --thumb:#272421;--lock:rgba(255,255,255,.07);--track:#2A2724;--dot:#3B3733;--sil:#3A342C;
  --sh:0 5px 18px rgba(0,0,0,.35);--sh-lift:0 18px 44px rgba(0,0,0,.45);
  --warm1:#3A332B;--warm2:#413429;--hair:rgba(255,255,255,.09);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Nunito',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--corail-fg);text-decoration:none}
/* Un lien déjà visité garde exactement la couleur d'un lien neuf : rien dans
 * la palette ne distingue « vu » de « pas vu ». */
a:visited{color:var(--corail-fg)}
/* WCAG 1.4.1 : un lien AU MILIEU d'un texte ne doit pas se distinguer par la
 * seule couleur — son contraste avec le texte voisin est trop faible. Il est
 * donc souligné. Les liens de navigation, seuls dans leur bloc, n'en ont pas
 * besoin et gardent l'aspect voulu par la maquette. */
main p a,.doc-body p a,.doc-body li a,.panel p a,footer p a,.doc-lead a{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
}
h1,h2,h3,p{margin:0}
img{max-width:100%}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--corail);outline-offset:2px;border-radius:6px}

/* Texte réservé aux lecteurs d'écran (descriptions des maquettes d'écran). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@keyframes chopaPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,.35)}55%{box-shadow:0 0 0 8px rgba(232,163,61,0)}}
@keyframes chopaRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Silhouettes réelles du catalogue (PhyloPic, via le stockage de l'app).
 * C'est l'ALPHA du PNG qui porte la forme : on l'utilise en masque et on
 * peint avec --sil. La silhouette suit donc le thème (gris doux en clair,
 * brun sombre en sombre) sans second fichier, et la couleur du PNG source
 * n'a aucune importance. */
.sil{
  background-color:var(--sil);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}

/* ── États de survol (remplacent les attributs style-hover de la maquette) ──
 * Réservés aux appareils qui SURVOLENT vraiment (souris, trackpad). Sur un
 * écran tactile, iOS et Android gardent l'état :hover après un tap jusqu'au
 * tap suivant : un lien déjà touché restait donc dans sa couleur de survol,
 * et passait pour « un lien visité qui change de couleur ». */
.icon-btn{transition:background .18s ease,color .18s ease}
.btn-coral{transition:background .18s ease}
.btn-ink{transition:background .18s ease,color .18s ease}
.btn-coral-invert{transition:background .18s ease,color .18s ease}
.btn-soft{transition:background .18s ease,color .18s ease}
.social-btn{transition:color .18s ease}
.card-lift{transition:box-shadow .22s ease,transform .22s ease}

@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--ink)}
  .icon-btn:hover{color:var(--ink);background:var(--surf)}
  .btn-coral:hover{background:var(--corail-btn-hover);color:#FFF}
  .btn-ink:hover{background:var(--corail-btn);color:#FFF}
  .btn-coral-invert:hover{background:#FFF;color:var(--ink)}
  .btn-soft:hover{background:var(--corail-btn);color:#FFF}
  .social-btn:hover{color:var(--ink)}
  .card-lift:hover{box-shadow:var(--sh-lift),inset 0 1px 0 var(--edge);transform:translateY(-2px)}
}

/* Le « + » de la FAQ devient « − » à l'ouverture. */
details[open] .faq-sign{transform:rotate(45deg)}
.faq-sign{transition:transform .2s ease}

/* ── Pages-documents (confidentialité, conditions, support, crédits) ───── */
.doc{max-width:1160px;margin:0 auto;padding:56px 22px 90px}
.doc-title{font:600 clamp(34px,5vw,54px)/1.04 'Fredoka','Trebuchet MS',system-ui,sans-serif;letter-spacing:-1.4px;max-width:22ch}
.doc-updated{margin-top:14px;font:800 13px/1 'Nunito',sans-serif;color:var(--mut2)}
.doc-lead{margin-top:18px;font:600 17.5px/1.6 'Nunito',sans-serif;color:var(--mut);max-width:64ch;text-wrap:pretty}
.doc-body{margin-top:40px;max-width:68ch}
.doc-body h2{
  margin:44px 0 0;scroll-margin-top:90px;
  font:600 clamp(22px,2.6vw,28px)/1.15 'Fredoka','Trebuchet MS',system-ui,sans-serif;letter-spacing:-.6px;
}
.doc-body h2:first-child{margin-top:0}
.doc-body p{margin-top:12px;font:600 16.5px/1.68 'Nunito',sans-serif;color:var(--mut);text-wrap:pretty}
.doc-body ul{margin:12px 0 0;padding-left:20px}
.doc-body li{margin-top:8px;font:600 16.5px/1.68 'Nunito',sans-serif;color:var(--mut)}
.doc-body a{font-weight:800}

/* Sommaire d'ancres des deux longs documents. */
.toc{
  margin-top:34px;padding:20px 22px;border-radius:22px;
  background:var(--surf);box-shadow:var(--sh),inset 0 1px 0 var(--edge),inset 0 0 0 .5px var(--edge-soft);
}
.toc-label{font:900 11.5px/1 'Nunito',sans-serif;color:var(--mut);letter-spacing:.5px}
.toc ol{margin:14px 0 0;padding:0;list-style:none;columns:2;column-gap:26px}
@media (max-width:640px){.toc ol{columns:1}}
.toc li{margin-bottom:9px;break-inside:avoid}
.toc a{font:700 14.5px/1.4 'Nunito',sans-serif;color:var(--mut)}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--ink)}}

/* Carte de contenu générique (support, crédits). */
.panel{
  margin-top:18px;padding:24px 22px;border-radius:22px;
  background:var(--surf);box-shadow:var(--sh),inset 0 1px 0 var(--edge),inset 0 0 0 .5px var(--edge-soft);
}
.panel h3{font:900 17px/1.25 'Nunito',sans-serif}
.panel p{margin-top:8px;font:600 15.5px/1.65 'Nunito',sans-serif;color:var(--mut);text-wrap:pretty}

/* Tableaux (comparatif Chopa+, crédits) : jamais de défilement de la page. */
.table-scroll{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.credits{border-collapse:collapse;width:100%;min-width:520px}
table.credits th,table.credits td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair);
  font:600 15px/1.5 'Nunito',sans-serif;color:var(--mut);
}
table.credits th{font:900 12px/1 'Nunito',sans-serif;color:var(--ink);letter-spacing:.4px;text-transform:uppercase}

/* ── Réactivité ───────────────────────────────────────────────────────── */
/* Un item de grille a min-width:auto : sa taille min-content — ici la largeur
 * minimale du tableau comparatif Chopa+ — élargit la piste et fait déborder
 * TOUTE la colonne, texte compris. min-width:0 laisse la piste se réduire et
 * le tableau défiler dans son propre conteneur. */
[data-two] > *{min-width:0}

@media (max-width:900px){
  [data-two]{grid-template-columns:1fr !important}
  [data-hero]{grid-template-columns:1fr !important;text-align:left}
  [data-hero-art]{justify-self:center !important;margin-top:14px}
}
@media (max-width:700px){[data-navlinks]{display:none !important}}
/* La grille du dex : 4 colonnes tiennent jusqu'à ~520px, puis 3. */
@media (max-width:520px){.grille-dex{grid-template-columns:repeat(3,1fr) !important}}

/* Les maquettes d'écran ont une largeur fixe (372px et 308px) : sur un
 * téléphone étroit, cette largeur force la colonne de la grille et rogne le
 * texte à côté. On utilise `zoom` et non `transform: scale()` — seul `zoom`
 * réduit la BOÎTE DE MISE EN PAGE ; un `scale` reste purement visuel et
 * laisse le débordement intact. Un navigateur qui ignore `zoom` retombe sur
 * l'ancien comportement, borné par l'overflow-x:hidden du body. */
@media (max-width:440px){
  .device{zoom:.82}
}
@media (max-width:360px){
  .device{zoom:.70}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  /* Le script n'applique aucune opacité sous cette préférence : rien ne peut
   * rester bloqué invisible. */
  [data-rise]{opacity:1 !important}
}