/* Dans les clous ? — module jeu-dans-les-clous (plugin ljd-modules). GÉNÉRÉ depuis maquettes/jeu-dans-les-clous-v0.1.html
   par produits/jeu-dci/construire-module.py — ne pas éditer à la main : modifier la maquette puis reconstruire.
   Tokens : variables du thème (--wp--preset--color--*) avec replis charte v1.2. */
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:400 600;font-display:swap;src:url('../theme/juste-dose/assets/fonts/montserrat-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Playfair Display';font-style:italic;font-weight:500 600;font-display:swap;src:url('../theme/juste-dose/assets/fonts/playfair-display-italic-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

  .jdlc{
    --vert:var(--wp--preset--color--vert,#1F4D3A); --dore:var(--wp--preset--color--dore,#C9942B); --dore-texte:var(--wp--preset--color--dore-texte,#876114);
    --creme:var(--wp--preset--color--creme,#F7F0E3); --blanc-casse:var(--wp--preset--color--blanc-casse,#FCFAF3); --blanc:var(--wp--preset--color--blanc,#FFFFFF);
    --encre:var(--wp--preset--color--encre,#22281F); --sable:var(--wp--preset--color--sable,#F0E6D0);
    --vert-hover:var(--wp--preset--color--vert-hover,#173B2C); --gris-texte:var(--wp--preset--color--gris-texte,#565B52); --gris-meta:#6B6F66;
    --bordure:var(--wp--preset--color--bordure,#E3DCCB); --bordure-sable:var(--wp--preset--color--bordure-sable,#E8DFC9);
    --alerte:var(--wp--preset--color--alerte,#9A3324); --alerte-fond:var(--wp--preset--color--alerte-fond,#F8EFEF); --alerte-bord:var(--wp--preset--color--alerte-bord,#E5CFCF);
    --r-carte:20px; --t-rapide:160ms ease-out;
  }
  .jdlc *{margin:0;padding:0;box-sizing:border-box}
  .jdlc{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--encre);background:var(--creme);-webkit-font-smoothing:antialiased}
  .jdlc button{font:inherit;color:inherit;cursor:pointer}
  .jdlc a{color:var(--vert)}
  .jdlc a:focus-visible, .jdlc button:focus-visible, .jdlc summary:focus-visible, .jdlc [tabindex]:focus-visible{outline:3px solid var(--vert);outline-offset:3px}
  .jdlc a:focus-visible, .jdlc summary:focus-visible, .jdlc [tabindex]:focus-visible{border-radius:8px}
  .jdlc .tapis .hud a:focus-visible, .jdlc .tapis .hud button:focus-visible{outline-color:var(--blanc-casse)}
  .jdlc h1[tabindex="-1"]:focus, .jdlc h2[tabindex="-1"]:focus, .jdlc p[tabindex="-1"]:focus{outline:none}
  .jdlc h1, .jdlc h2, .jdlc h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--vert);line-height:1.12;text-wrap:balance}
  .jdlc .visu-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .jdlc [hidden]{display:none !important}

    .jdlc .conteneur{max-width:1040px;margin-inline:auto;padding:clamp(16px,4vw,36px) max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
  @media (min-width:600px){.jdlc .conteneur{padding-left:28px;padding-right:28px}}

  /* ---------- boutons ---------- */
  .jdlc .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;border:2px solid transparent;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;transition:background-color var(--t-rapide),border-color var(--t-rapide)}
  .jdlc .btn-plein{background:var(--vert);color:var(--blanc-casse)}
  .jdlc .btn-plein:hover{background:var(--vert-hover)}
  .jdlc .btn-ligne{background:transparent;border-color:var(--vert);color:var(--vert)}
  .jdlc .btn-ligne:hover{background:var(--sable)}
  .jdlc .btn-grand{min-height:56px;padding:14px 30px;font-size:17px}
  .jdlc .lien{background:none;border:0;color:var(--vert);font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:8px 2px;display:inline-flex;align-items:center}
  .jdlc .lien-retour{background:none;border:0;color:var(--vert);font-weight:700;min-height:44px;padding:8px 2px;display:inline-flex;align-items:center;gap:8px}
  .jdlc .lien-retour svg{width:18px;height:18px;flex:0 0 auto}

  .jdlc .surtitre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dore-texte)}
  .jdlc .surtitre .lien{letter-spacing:.04em}
  .jdlc .pastille-famille{background:var(--vert);color:var(--blanc-casse);padding:5px 12px;border-radius:999px;letter-spacing:.1em}

  /* ---------- formes des feux (jamais la seule couleur) ---------- */
  .jdlc .forme{display:inline-grid;place-items:center;border-radius:50%;color:var(--blanc);flex:0 0 auto}
  .jdlc .forme svg{width:44%;height:44%}
  .jdlc .f-vert{background:var(--vert)} .jdlc .f-orange{background:var(--dore-texte)} .jdlc .f-rouge{background:var(--alerte)}

  /* ---------- accueil ---------- */
  .jdlc .accueil{display:grid;gap:clamp(24px,4vw,40px);align-items:center}
  @media (min-width:880px){.jdlc .accueil{grid-template-columns:1.2fr .8fr;gap:40px}}
  .jdlc .accueil-texte{min-width:0}
  .jdlc .accueil h1{font-size:clamp(46px,9vw,78px);margin:12px 0 10px}
  .jdlc .claim{font-size:clamp(17px,2vw,19px);color:var(--gris-texte);max-width:46ch;margin:0 0 18px}
  .jdlc .legende{list-style:none;display:grid;gap:8px;margin:0 0 22px}
  .jdlc .legende li{display:flex;align-items:center;gap:12px;font-size:16px}
  .jdlc .legende .forme{width:32px;height:32px}
  .jdlc .actions-accueil{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
  .jdlc .carnet-resume{display:flex;align-items:center;gap:16px;width:100%;max-width:520px;text-align:left;background:var(--blanc-casse);border:1px solid var(--bordure);border-radius:16px;padding:14px 18px;color:var(--encre)}
  .jdlc .carnet-resume:hover{border-color:var(--vert)}
  .jdlc .cr-texte{display:grid;gap:6px;flex:1;min-width:0}
  .jdlc .cr-titre{font-weight:700;color:var(--vert)}
  .jdlc .cr-compte{font-size:15px;color:var(--gris-texte)}
  .jdlc .cr-compte b{color:var(--vert)}
  .jdlc .carnet-fleche{width:22px;height:22px;color:var(--vert);flex:0 0 auto}
  .jdlc .jauge{display:block;height:6px;border-radius:999px;background:var(--sable);overflow:hidden}
  .jdlc .jauge > span{display:block;height:100%;width:0;background:var(--vert);border-radius:inherit}
  @media (prefers-reduced-motion:no-preference){.jdlc .jauge > span{transition:width .5s ease-out}}
  .jdlc .accueil-visuel{min-width:0;display:grid;justify-items:center}
  /* Gravure d'accueil (générée par IA, recolorée au vert de la charte sur fond transparent) ; l'animation se pose
     exactement dessus, sur fond crème, et finit sur la même image. */
  .jdlc .illu-boite{position:relative;width:100%;max-width:400px}
  .jdlc .accueil-illu{display:block;width:100%;height:auto;aspect-ratio:1}
  /* Animation en boucle posée sur l'image fixe, en fondu : l'IA redessine légèrement chaque image. */
  .jdlc .accueil-anim{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s ease}
  .jdlc .illu-boite.anime .accueil-anim{opacity:1}
  /* Pause de l'animation (WCAG 2.2.2 : mouvement de plus de 5 s lancé tout seul) */
  .jdlc .illu-pause{position:absolute;right:8px;bottom:8px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--bordure);background:var(--blanc-casse);color:var(--vert);opacity:.9;transition:opacity var(--t-rapide),border-color var(--t-rapide)}
  .jdlc .illu-pause:hover{opacity:1;border-color:var(--vert)}
  .jdlc .illu-pause svg{width:18px;height:18px}
  @media (max-width:879px){.jdlc .accueil-visuel{display:none}}

  .jdlc .paquets-zone{margin-top:clamp(32px,5vw,52px)}
  .jdlc .paquets-zone h2{font-size:clamp(26px,3.4vw,32px);margin-bottom:14px}
  .jdlc .paquets{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
  .jdlc .paquet{width:100%;height:100%;text-align:left;display:grid;gap:8px;align-content:start;padding:14px 16px;border-radius:16px;border:1px solid var(--bordure);background:var(--blanc-casse);color:var(--encre)}
  .jdlc .paquet:hover{border-color:var(--vert)}
  .jdlc .paquet .p-titre{font-weight:700;font-size:16px;line-height:1.3}
  .jdlc .paquet .p-bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;font-size:14px;font-weight:600;color:var(--gris-meta)}
  .jdlc .p-compte{white-space:nowrap}
  /* Palier (bronze, argent, or) : comme dans Mon espace, un mot sobre ; l'or en or texte, doublé de son libellé. */
  .jdlc .medaille{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--gris-texte)}
  .jdlc .medaille svg{width:16px;height:16px;flex:0 0 auto}
  .jdlc .medaille.or{color:var(--dore-texte)}
  .jdlc .jauge > span.or{background:var(--dore)}

  /* ---------- partie ---------- */
  /* Le tapis est un passage clouté : deux rangées de clous le bordent (« être dans les clous »). */
  .jdlc .tapis{max-width:820px;margin:4px auto 0;border-radius:28px;padding:clamp(22px,4vw,34px) clamp(12px,3vw,28px);background:radial-gradient(circle,rgba(252,250,243,.3) 0 3px,transparent 3.5px) 0 4px/22px 14px repeat-x,radial-gradient(circle,rgba(252,250,243,.3) 0 3px,transparent 3.5px) 0 calc(100% - 4px)/22px 14px repeat-x,var(--vert)}
  .jdlc .hud{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--blanc-casse);font-size:15px;font-weight:600;margin-bottom:8px}
  .jdlc .hud .lien-retour{color:var(--blanc-casse)}
  .jdlc .hud-info{display:flex;gap:18px;font-variant-numeric:tabular-nums}
  .jdlc .pips{list-style:none;display:flex;gap:6px;margin:0 0 14px}
  .jdlc .pip{flex:1;height:5px;border-radius:999px;background:rgba(252,250,243,.22)}
  .jdlc .pip.en-cours{background:rgba(252,250,243,.6)}
  .jdlc .pip.ok{background:var(--blanc-casse)} .jdlc .pip.ko{background:var(--dore)}
  /* .fiche-cas et non .carte : le thème donne à toute .carte bordure, débordement masqué et soulèvement au survol. */
  .jdlc .fiche-cas{background:var(--blanc-casse);border-radius:var(--r-carte);padding:clamp(18px,4vw,32px);box-shadow:0 10px 24px rgba(23,59,44,.32)}
  @media (prefers-reduced-motion:no-preference){.jdlc .fiche-cas.entre{animation:clous-entree .26s ease-out}@keyframes clous-entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
  .jdlc .carte-tete{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bordure);padding-bottom:12px;margin-bottom:16px}
  .jdlc .cat{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dore-texte)}
  .jdlc .niv{font-size:14px;color:var(--gris-meta);font-weight:600}
  .jdlc .situation{font-size:18px;margin:0 0 14px}
  .jdlc .question{font-size:19px;font-weight:700;margin:0 0 20px}
  .jdlc .feux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .jdlc .feu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:124px;padding:14px 8px;border-radius:18px;border:2px solid var(--bordure);background:var(--blanc);font-weight:700;font-size:16px;line-height:1.25;text-align:center}
  .jdlc .feu-nom{font-weight:700;font-size:17px}
  .jdlc .feu-sens{font-weight:500;font-size:15px;color:var(--gris-texte)}
  .jdlc .feu .forme{width:60px;height:60px;margin-bottom:6px}
  .jdlc .feu:hover{border-color:var(--vert)}
  .jdlc .choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px;margin-inline:auto}
  .jdlc .choix button{min-height:72px;padding:12px 16px;border-radius:999px;border:2px solid var(--bordure);background:var(--blanc);color:var(--vert);font-weight:700;font-size:20px;line-height:1.25;text-align:center;font-variant-numeric:tabular-nums}
  .jdlc .choix button:hover{border-color:var(--vert);background:var(--blanc-casse)}
  .jdlc .etape{font-size:16px;font-weight:700;color:var(--dore-texte);margin:0 0 12px}
  .jdlc .conditions{display:grid;gap:10px}
  .jdlc .conditions button{min-height:52px;padding:10px 16px;border-radius:14px;border:2px solid var(--bordure);background:var(--blanc);font-weight:600;text-align:left}
  .jdlc .conditions button:hover{border-color:var(--dore-texte)}
  /* verso */
  .jdlc .verso-tete{display:flex;gap:14px;align-items:center;margin:0 0 12px}
  .jdlc .verso-perso{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--sable);flex:0 0 auto}
  .jdlc .resultat{font-size:21px;font-weight:700}
  .jdlc .resultat.ok{color:var(--vert)} .jdlc .resultat.ko{color:var(--alerte)}
  .jdlc .attendu{font-weight:600;color:var(--gris-texte)}
  .jdlc .verdict{font-size:18px;font-weight:700;margin:0 0 16px}
  .jdlc .blocs{display:grid;gap:12px;margin:0 0 16px}
  .jdlc .bloc{border-left:4px solid var(--bordure);padding:2px 0 2px 14px}
  .jdlc .bloc h3{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dore-texte);margin:0 0 2px}
  .jdlc .bloc.piege{border-color:var(--alerte-bord)} .jdlc .bloc.comptoir{border-color:var(--vert)}
  .jdlc .ref{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;color:var(--gris-meta);margin:0 0 18px}
  .jdlc .badge-ref{background:var(--sable);color:var(--encre);font-weight:700;padding:4px 10px;border-radius:8px}
  .jdlc .suivante{display:flex;justify-content:flex-end}

  /* ---------- fin ---------- */
  .jdlc .fin{background:var(--blanc-casse);border-radius:var(--r-carte);padding:clamp(20px,4vw,36px);box-shadow:0 10px 24px rgba(23,59,44,.32)}
  .jdlc .fin h2{font-size:clamp(28px,4vw,38px);margin-bottom:6px}
  .jdlc .fin-score{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(56px,9vw,76px);color:var(--vert);line-height:1;margin:6px 0 10px}
  .jdlc .fin-etoiles{font-weight:700;color:var(--dore-texte);margin:0 0 6px}
  .jdlc .fin-carnet{margin:14px 0 6px;color:var(--gris-texte)}
  .jdlc .fin-carnet + .jauge{max-width:520px;margin-bottom:18px}
  .jdlc .liste-fin{list-style:none;display:grid;gap:8px;margin:0 0 22px}
  .jdlc .liste-fin details{background:var(--blanc);border:1px solid var(--bordure);border-radius:12px;padding:10px 14px}
  .jdlc .liste-fin summary{cursor:pointer;font-weight:600}
  .jdlc .liste-fin details p{margin-top:8px}
  .jdlc .marque-ok{color:var(--vert);font-weight:700} .jdlc .marque-ko{color:var(--alerte);font-weight:700}
  .jdlc .actions{display:flex;flex-wrap:wrap;gap:12px}

  /* ---------- carnet ---------- */
  .jdlc .carnet-tete{display:grid;gap:10px;margin:6px 0 20px}
  .jdlc .carnet-tete h2{font-size:clamp(30px,4.4vw,42px)}
  .jdlc .carnet-compte{color:var(--gris-texte)}
  .jdlc .carnet-compte b{color:var(--vert)}
  .jdlc .filtres{display:flex;flex-wrap:wrap;gap:8px}
  .jdlc .filtre{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--bordure);background:var(--blanc-casse);font-size:15px;font-weight:700}
  .jdlc .filtre[aria-pressed="true"]{background:var(--vert);border-color:var(--vert);color:var(--blanc-casse)}
  .jdlc .ct{background:var(--blanc-casse);border:1px solid var(--bordure);border-radius:18px;padding:16px clamp(14px,3vw,22px);margin:0 0 14px}
  .jdlc .ct-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin:0 0 10px}
  .jdlc .ct-tete h3{font-size:24px}
  .jdlc .ct-droite{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--gris-meta)}
  .jdlc .ct-grille{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
  .jdlc .vignette{width:100%;height:100%;text-align:left;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;border:2px solid var(--bordure);background:var(--blanc);color:var(--encre)}
  .jdlc .vignette .v-haut{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px}
  .jdlc .vignette .v-id, .jdlc .vignette .v-etat{white-space:nowrap}
  .jdlc .vignette .v-id{font-size:13px;font-weight:700;color:var(--gris-meta)}
  .jdlc .vignette .v-etat{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .jdlc .vignette .v-texte{font-size:15px;line-height:1.35}
  .jdlc .vignette:hover{border-color:var(--vert)}
  .jdlc .vignette.a-revoir{border-color:var(--alerte-bord);background:var(--alerte-fond)}
  .jdlc .vignette.a-revoir .v-etat{color:var(--alerte)}
  .jdlc .vignette.acquise{border-color:var(--vert)}
  .jdlc .vignette.acquise .v-etat{color:var(--vert)}
  .jdlc .vignette.maitrisee{border-color:var(--dore)}
  .jdlc .vignette.maitrisee .v-etat{color:var(--dore-texte)}
  .jdlc .vignette.maitrisee .v-etat::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dore);margin-right:6px;vertical-align:1px}
  .jdlc .vignette.nouvelle{border-style:dashed;background:var(--blanc-casse)}
  .jdlc .vignette.nouvelle .v-etat{color:var(--gris-meta)}
  @media (max-width:520px){.jdlc .ct-grille{grid-template-columns:1fr 1fr}}
  .jdlc .carnet-pied{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--gris-meta)}

  /* ---------- fiche (dialogue) ---------- */
  .jdlc .fiche-dialog{margin:auto;border:0;border-radius:20px;padding:0;width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 32px);background:var(--blanc-casse);color:var(--encre);box-shadow:0 30px 60px rgba(23,59,44,.35)}
  .jdlc .fiche-dialog::backdrop{background:rgba(23,59,44,.6)}
  .jdlc .fd-corps{padding:4px clamp(16px,4vw,28px) 22px}
  .jdlc .fd-titre{font-size:24px;margin:0 0 10px}
  .jdlc .fd-fermer{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:10px 12px 0;background:var(--blanc-casse)}
  .jdlc .fd-pied{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:8px}

  .jdlc .toast-sync{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);z-index:20;padding:10px 18px;border-radius:999px;background:var(--vert);color:var(--blanc-casse);font-size:16px;font-weight:600;box-shadow:0 8px 20px rgba(23,59,44,.25);white-space:nowrap}

  .jdlc .pied-jeu{max-width:720px;margin:0 auto;padding:20px clamp(18px,3vw,26px) 40px;border-top:1px solid var(--bordure);display:grid;gap:8px;font-size:13px;line-height:1.6;color:var(--gris-texte);text-align:left;text-wrap:pretty}
  .jdlc .pied-jeu span{display:block}
  .jdlc .pied-jeu span:first-child{font-size:14px;color:var(--encre)}
  .jdlc .pied-jeu b{font-weight:600}
  /* Site : render.php imprime le pied hors de .conteneur, enfant direct de .jdlc pleine largeur. On lui rend la gouttière
     du thème et le retrait de l'encart retour (bordure 1 px + padding) ; sans effet dans la maquette (pas de .jdlc). */
  .jdlc > .pied-jeu{width:calc(100% - 2 * var(--gout, clamp(20px,5vw,40px)));padding-left:calc(1px + clamp(18px,3vw,26px));padding-right:calc(1px + clamp(18px,3vw,26px))}
  @media (max-width:480px){.jdlc > .pied-jeu{padding-left:15px;padding-right:15px}}
  @media (max-width:560px){.jdlc .feux{gap:8px}.jdlc .feu{min-height:112px}.jdlc .feu .forme{width:50px;height:50px}.jdlc .choix{grid-template-columns:1fr}.jdlc .choix button{font-size:18px;min-height:56px}}
/* coquille du module (avant le démarrage du JS) */
.jdlc .jdlc-coquille{min-height:320px}
.jdlc .jdlc-attente{font-size:15px;color:var(--gris-texte);padding:48px 0;text-align:center}