/* tem — toi et moi
   Feuille de style unique. Ton : tendre, joueur, jamais explicite. */

:root{
  --rose:#e0567a; --violet:#7c5cff; --peche:#ff9a76;
  --vert:#3fb27f; --encre:#241f2b; --gris:#7d7689;
  --creme:#fffdfb; --doux:#f7f4fa; --bord:#ece7f0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--creme); color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-text-size-adjust:100%;
}

.ecran{max-width:460px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.barre{display:flex;align-items:center;gap:10px;padding:18px 20px 6px;min-height:52px}
.retour{text-decoration:none;color:var(--gris);font-size:1.3rem;line-height:1}
.titre{font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.marque{font-weight:800;font-size:1.3rem;letter-spacing:-.04em;
  background:linear-gradient(100deg,var(--rose),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.corps{flex:1;padding:8px 20px 32px;display:flex;flex-direction:column}

h1{font-size:1.45rem;margin:4px 0 6px;letter-spacing:-.02em}
h2{font-size:1.1rem;margin:22px 0 6px;letter-spacing:-.01em}
p{margin:0 0 14px}
.doux-txt{color:var(--gris);font-size:.92rem}
.centre{text-align:center}
.pousse{margin-top:auto}

/* --- coeur qui bat --- */
.coeur{width:120px;height:120px;margin:18px auto;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#ffd9e2,#ffb3c6 42%,#e0567a);
  box-shadow:0 0 0 14px rgba(224,86,122,.09),0 0 0 30px rgba(224,86,122,.045);
  animation:battre 2.8s ease-in-out infinite}
.coeur.calme{background:radial-gradient(circle at 36% 32%,#efeaf5,#d6c4ff);animation:none;
  box-shadow:0 0 0 14px rgba(124,92,255,.07)}
@keyframes battre{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* --- boutons --- */
.b{display:block;width:100%;border:none;border-radius:15px;padding:15px;font-size:1rem;
  font-weight:600;font-family:inherit;cursor:pointer;margin-bottom:10px;text-align:center;
  text-decoration:none;color:var(--encre);background:var(--doux);-webkit-appearance:none}
.b1{background:linear-gradient(100deg,var(--rose),var(--violet));color:#fff;
  box-shadow:0 8px 20px rgba(224,86,122,.30)}
.b-oui{background:rgba(63,178,127,.15);color:#2c8560}
.b-non{background:var(--doux);color:#6c6478}
.b-plat{background:transparent;color:var(--gris);font-weight:500;font-size:.93rem;
  box-shadow:none;padding:12px}
.b:active{transform:scale(.985)}

/* --- encarts --- */
.encart{background:var(--doux);border-radius:14px;padding:13px 15px;font-size:.9rem;margin-bottom:12px}
.encart b{color:var(--encre)}
.encart.tendre{background:linear-gradient(100deg,rgba(224,86,122,.12),rgba(124,92,255,.12))}
.encart.alerte{background:rgba(224,161,63,.13)}
.note{background:var(--doux);border-radius:13px;padding:12px 14px;font-size:.85rem;color:var(--gris);
  margin-top:18px}
.note b{color:var(--encre)}

/* --- code d'invitation --- */
.code{font-size:2.1rem;font-weight:800;letter-spacing:.22em;text-align:center;
  background:linear-gradient(100deg,var(--rose),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin:10px 0 4px}

/* --- champs --- */
label{display:block;font-size:.9rem;margin:0 0 6px;color:var(--gris)}
input[type=text]{width:100%;border:1.5px solid var(--bord);border-radius:13px;padding:14px;
  font-size:1rem;font-family:inherit;background:#fff;color:var(--encre);-webkit-appearance:none}
input[type=text]:focus{outline:none;border-color:var(--violet)}

/* --- pastilles de choix --- */
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pastille{background:var(--doux);border-radius:999px;padding:9px 15px;font-size:.9rem;cursor:pointer;
  border:1.5px solid transparent;user-select:none}
.pastille input{display:none}
.pastille.actif{background:linear-gradient(100deg,rgba(224,86,122,.16),rgba(124,92,255,.16));
  border-color:var(--violet);font-weight:600}

/* --- grille de cartes --- */
.grille{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.carte{background:var(--doux);border-radius:14px;padding:12px 10px;text-align:center;font-size:.86rem;
  border:1.8px solid transparent;cursor:pointer;user-select:none}
.carte input{display:none}
.carte.actif{border-color:var(--violet);
  background:linear-gradient(160deg,rgba(224,86,122,.10),rgba(124,92,255,.10));font-weight:600}
.carte .desc{display:block;font-size:.74rem;color:var(--gris);font-weight:400;margin-top:3px}
.glyphe{display:block;margin:0 auto 5px}

/* --- curseur d'intensité --- */
.curseur{width:100%;-webkit-appearance:none;appearance:none;height:11px;border-radius:99px;
  background:linear-gradient(90deg,#e9e3ef,#ffc9b0,#ff9a76,#e0567a);outline:none;margin:22px 0 6px}
.curseur::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:#fff;border:3px solid var(--rose);box-shadow:0 3px 10px rgba(0,0,0,.22);cursor:pointer}
.curseur::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;
  border:3px solid var(--rose);box-shadow:0 3px 10px rgba(0,0,0,.22);cursor:pointer;border-color:var(--rose)}
.bornes{display:flex;justify-content:space-between;font-size:.8rem;color:var(--gris)}

/* --- interrupteur --- */
.bascule{display:flex;align-items:center;gap:12px;background:var(--doux);border-radius:14px;
  padding:13px 15px;margin-bottom:12px;cursor:pointer;font-size:.92rem}
.bascule input{display:none}
.voyant{width:44px;height:26px;border-radius:99px;background:#ddd6e4;flex:0 0 auto;position:relative;
  transition:background .2s}
.voyant::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .2s}
.bascule.actif .voyant{background:linear-gradient(100deg,var(--rose),var(--violet))}
.bascule.actif .voyant::after{transform:translateX(18px)}

/* --- la roue --- */
.roue-zone{position:relative;width:250px;height:250px;margin:14px auto 18px}
.roue{width:100%;height:100%;border-radius:50%;cursor:pointer;
  transition:transform 3.6s cubic-bezier(.17,.67,.24,1);
  background:conic-gradient(#ffb3c6 0 60deg,#d6c4ff 60deg 120deg,#ffd6a5 120deg 180deg,
    #b8e6d0 180deg 240deg,#ffc2e0 240deg 300deg,#c9dcff 300deg 360deg);
  box-shadow:inset 0 0 0 9px #fff,0 10px 26px rgba(124,92,255,.24)}
.moyeu{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;
  border-radius:50%;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.14);display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;letter-spacing:-.04em;
  color:var(--rose);pointer-events:none}
.fleche{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:19px solid var(--encre);z-index:5}

/* --- lignes de résultat --- */
.ligne{display:flex;align-items:center;gap:12px;background:var(--doux);border-radius:14px;
  padding:12px 14px;margin-bottom:9px}
.ligne .cle{font-size:.7rem;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.ligne .val{font-size:.98rem;font-weight:600;line-height:1.3}
.ligne.partage{background:linear-gradient(100deg,rgba(224,86,122,.13),rgba(124,92,255,.13));
  box-shadow:inset 0 0 0 1.6px rgba(124,92,255,.35)}

/* --- liste du lexique --- */
.lex{display:flex;align-items:center;gap:10px;background:var(--doux);border-radius:13px;
  padding:11px 13px;margin-bottom:8px}
.lex .n{flex:1;font-size:.95rem;font-weight:600}
.lex .d{font-size:.75rem;color:var(--gris);font-weight:400;display:block}
.lex.perso{background:linear-gradient(100deg,rgba(224,86,122,.12),rgba(124,92,255,.12))}
.lex input[type=text]{padding:9px 11px;font-size:.9rem;border-radius:10px}

/* --- image abstraite --- */
.cmdimg{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.cmdimg .pastille{border:1.5px solid transparent;font-family:inherit}
.rangimg{display:flex;align-items:center;gap:12px;margin:14px 0 8px;font-size:.88rem;
  color:var(--gris)}
.rangimg input[type=range]{accent-color:var(--rose)}
.apercu{background:#15121b;border-radius:18px;padding:8px;margin-bottom:12px}
.apercu canvas{width:100%;display:block;border-radius:12px}
.apercu .legende{font-size:.78rem;color:#c9c0d6;text-align:center;padding:7px 4px 3px}

/* --- notes et cases de l'apres --- */
.notes{display:flex;gap:6px;margin-bottom:14px}
.nopt{flex:1;text-align:center;background:#fff;border:1.5px solid var(--bord);border-radius:11px;
  padding:9px 3px;font-size:.72rem;cursor:pointer;user-select:none;color:var(--gris);margin:0}
.nopt input{display:none}
.nopt span{display:block;font-size:1.05rem;font-weight:800;color:var(--gris);margin-bottom:2px}
.nopt.actif{border-color:var(--violet);color:var(--encre);
  background:linear-gradient(100deg,rgba(224,86,122,.14),rgba(124,92,255,.14))}
.nopt.actif span{background:linear-gradient(140deg,var(--rose),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.scase{display:block;background:var(--doux);border:1.5px solid transparent;border-radius:12px;
  padding:11px 13px;margin-bottom:7px;font-size:.9rem;cursor:pointer;user-select:none;color:var(--encre)}
.scase input{display:none}
.scase.actif{border-color:var(--violet);
  background:linear-gradient(100deg,rgba(224,86,122,.12),rgba(124,92,255,.12));font-weight:600}
textarea{width:100%;border:1.5px solid var(--bord);border-radius:13px;padding:13px;
  font-size:.95rem;font-family:inherit;background:#fff;color:var(--encre);resize:vertical;
  margin-bottom:6px;-webkit-appearance:none}
textarea:focus{outline:none;border-color:var(--violet)}

/* --- classement des finalistes --- */
.fcarte{display:flex;align-items:flex-start;gap:12px;background:var(--doux);
  border:2px solid transparent;border-radius:15px;padding:14px 15px;margin-bottom:10px;
  cursor:pointer;user-select:none}
.fcarte .rang{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#fff;
  border:1.5px solid var(--bord);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;color:var(--gris)}
.fcarte .txt{flex:1;font-size:.95rem;line-height:1.35}
.fcarte .d{display:block;font-size:.79rem;color:var(--gris);font-weight:400;margin-top:3px}
.fcarte.choisie{border-color:var(--violet);
  background:linear-gradient(160deg,rgba(224,86,122,.10),rgba(124,92,255,.10))}
.fcarte.choisie .rang{background:linear-gradient(140deg,var(--rose),var(--violet));
  color:#fff;border-color:transparent}
.b:disabled{opacity:.45}

/* --- conseil pratique --- */
.conseil{background:#fff;border:1.5px solid var(--violet);border-radius:14px;
  padding:14px 15px;margin-bottom:12px;font-size:.9rem;line-height:1.55}
.conseil b{color:var(--encre)}
.conseil .t{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--violet);font-weight:700;margin-bottom:6px}

/* --- lignes de vécu --- */
.vligne{background:var(--doux);border-radius:14px;padding:12px 13px;margin-bottom:10px}
.vtitre{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.vtitre > span:first-child{flex:1;font-size:.95rem;font-weight:600;line-height:1.3}
.vtitre .d{display:block;font-size:.76rem;color:var(--gris);font-weight:400;margin-top:3px}
.cadenas{flex:0 0 auto;cursor:pointer;user-select:none}
.cadenas input{display:none}
.cadenas .pic{display:inline-block;font-size:.7rem;padding:5px 10px;border-radius:999px;
  background:#fff;border:1.5px solid var(--bord);color:var(--gris)}
.cadenas.ouvert .pic{border-color:var(--violet);color:var(--violet);font-weight:600;
  background:linear-gradient(100deg,rgba(224,86,122,.12),rgba(124,92,255,.12))}
.vressenti{margin-top:7px}
.vcuriosite{display:block;margin-top:9px;background:#fff;border:1.5px solid var(--bord);
  border-radius:11px;padding:9px 11px;font-size:.84rem;cursor:pointer;user-select:none}
.vcuriosite input{display:none}
.vcuriosite .d{display:block;font-size:.75rem;color:var(--gris);margin-top:2px}
.vcuriosite.actif{border-color:var(--violet);
  background:linear-gradient(100deg,rgba(224,86,122,.12),rgba(124,92,255,.12))}

/* --- trio de choix du profil --- */
.trio{display:flex;gap:6px}
.trio.quatre{flex-wrap:wrap}
.trio.quatre .opt{flex:1 1 calc(50% - 3px)}
.trio .opt{flex:1;text-align:center;background:#fff;border:1.5px solid var(--bord);
  border-radius:11px;padding:9px 4px;font-size:.82rem;cursor:pointer;user-select:none;
  color:var(--gris)}
.trio .opt input{display:none}
.trio .opt.actif{border-color:var(--violet);color:var(--encre);font-weight:600;
  background:linear-gradient(100deg,rgba(224,86,122,.14),rgba(124,92,255,.14))}
.trio .opt.non.actif{border-color:#d98a7a;background:rgba(226,96,63,.14)}

/* --- schémas --- */
.schema{background:#fff;border:1px solid var(--bord);border-radius:16px;padding:14px 10px 10px;
  margin:6px 0 14px}
.schema svg{width:100%;height:auto;display:block}
.schema .legende{font-size:.78rem;color:var(--gris);text-align:center;margin-top:6px;padding:0 6px}

/* --- échelle de comparaison --- */
.echelle{position:relative;height:56px;margin:16px 0 6px}
.echelle .rail{position:absolute;top:22px;left:0;right:0;height:12px;border-radius:99px;
  background:linear-gradient(90deg,#efeaf5,#efeaf5)}
.echelle .zone{position:absolute;top:22px;height:12px;border-radius:99px;
  background:linear-gradient(90deg,rgba(224,86,122,.35),rgba(124,92,255,.35))}
.echelle .moy{position:absolute;top:14px;width:2px;height:28px;background:var(--gris);opacity:.5}
.echelle .curseur2{position:absolute;top:12px;width:22px;height:32px;margin-left:-11px;
  border-radius:8px;background:linear-gradient(160deg,var(--rose),var(--violet));
  box-shadow:0 3px 10px rgba(224,86,122,.4)}
.echelle .grad{position:absolute;top:42px;font-size:.7rem;color:var(--gris);
  transform:translateX(-50%);white-space:nowrap}

.compte{font-size:.85rem;color:var(--gris);text-align:center;margin-bottom:14px}
.erreur{background:rgba(226,96,63,.13);border-radius:13px;padding:12px 14px;font-size:.9rem;margin-bottom:12px}

/* --- jauges des compteurs collectifs --- */
.jauge{margin-bottom:10px}
.jauge .l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:.92rem;margin-bottom:4px}
.jauge .l b{font-weight:600}
.jauge .l span{color:var(--gris);font-size:.82rem;white-space:nowrap}
.jauge .p{height:9px;border-radius:9px;background:var(--doux);overflow:hidden}
.jauge .p i{display:block;height:100%;border-radius:9px;
  background:linear-gradient(90deg,var(--rose),var(--violet))}
.jauge.calme .p i{background:linear-gradient(90deg,var(--vert),#8fd6b0)}



/* ═══════════════════════════════════════════════════════════════════════
   REFONTE — trois rôles de fond, une échelle de titres, et de la place
   pour respirer.
   Règle unique à ne pas défaire : le ROSE ne sert qu'à l'action principale.
   S'il apparaît ailleurs, plus rien ne ressort.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --surface:#ffffff;                  /* les rares cartes */
  --tiede:#faf7fc;                    /* fond de groupe, plus chaud que --doux */
  --ombre-douce:0 10px 26px -14px rgba(36,31,43,.22);
}

/* --- l'échelle de titres : quatre niveaux nettement séparés ------------- */
h1{font-size:1.52rem;font-weight:750;letter-spacing:-.025em;line-height:1.16}
h2{font-size:1.06rem;font-weight:700;letter-spacing:-.015em;margin:26px 0 8px}

/* Un intertitre de rubrique : petit, violet, espacé. Il structure sans peser. */
.rub{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);
  font-weight:700;margin:26px 0 8px}
.rub:first-child{margin-top:6px}

/* Le chapeau d'une fiche : ce qu'elle dit en une phrase. */
.chapeau{color:var(--gris);font-size:.98rem;margin:2px 0 18px;line-height:1.5}

/* --- l'accueil : la roue, sans boîte ----------------------------------- */
.accueil-etat{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;font-size:.84rem;color:var(--gris);padding:2px 0 2px}
.accueil-etat b{color:var(--encre);font-weight:650}

.roue-accueil{position:relative;width:min(228px,64vw);margin:14px auto 6px}
.roue-accueil .disque{width:100%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(#ffb3c6 0 60deg,#d6c4ff 60deg 120deg,#ffd6a5 120deg 180deg,
    #b8e6d0 180deg 240deg,#ffc2e0 240deg 300deg,#c9dcff 300deg 360deg);
  box-shadow:inset 0 0 0 9px var(--creme),0 16px 38px -14px rgba(124,92,255,.5)}
.roue-accueil .moyeu{position:absolute;inset:34%;border-radius:50%;background:var(--creme);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.18rem;
  letter-spacing:-.04em;color:var(--rose);box-shadow:0 3px 14px rgba(0,0,0,.12)}
.roue-accueil .fl{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:10px solid transparent;border-right:10px solid transparent;
  border-top:17px solid var(--encre);z-index:3}
/* trois états : au repos, elle respire ; en attente, elle pâlit */
@media (prefers-reduced-motion:no-preference){
  .roue-accueil.respire .disque{animation:respirer 5.5s ease-in-out infinite}
}
@keyframes respirer{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.028) rotate(7deg)}}
.roue-accueil.endormie .disque{filter:saturate(.4) opacity(.72)}
.roue-accueil.endormie .moyeu{color:var(--gris)}

/* --- tuiles : deux colonnes, sans bordure ni ombre --------------------- */
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.tuile{display:flex;flex-direction:column;gap:7px;background:var(--surface);
  border-radius:16px;padding:14px 13px 15px;text-decoration:none;color:var(--encre);
  min-height:106px;box-shadow:var(--ombre-douce)}
.tuile:active{transform:scale(.985)}
.tuile .ic{width:28px;height:28px;flex:0 0 auto}
.tuile .n{display:block;font-weight:650;font-size:.93rem;line-height:1.25;letter-spacing:-.01em}
.tuile .d{display:block;font-size:.79rem;color:var(--gris);line-height:1.38;margin-top:3px}
.tuile.large{grid-column:1 / -1;flex-direction:row;align-items:center;gap:13px;min-height:0}
.tuile.large .txt{flex:1}

/* --- puces de filtre : une rangée, qui déborde et défile --------------- */
.puces{display:flex;gap:7px;overflow-x:auto;padding:8px 20px 12px;margin:0 -20px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  position:sticky;top:0;z-index:5;background:var(--creme)}
.puces::-webkit-scrollbar{display:none}
.puce{flex:0 0 auto;background:var(--doux);border:none;border-radius:999px;
  padding:8px 15px;font:inherit;font-size:.87rem;color:var(--gris);white-space:nowrap;
  cursor:pointer;-webkit-appearance:none}
.puce[aria-pressed="true"]{background:var(--encre);color:var(--creme);font-weight:600}

/* --- sections repliables des fiches longues ---------------------------- */
.pli{border-top:1px solid var(--bord)}
.pli:last-of-type{border-bottom:1px solid var(--bord)}
.pli > summary{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:15px 2px;font-size:1.02rem;font-weight:700;letter-spacing:-.015em;
  cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.pli > summary::-webkit-details-marker{display:none}
.pli > summary .etat{flex:0 0 auto;font-size:.78rem;font-weight:500;color:var(--violet);
  white-space:nowrap;padding-top:.2em}
.pli > summary .etat::after{content:"déplier"}
.pli[open] > summary .etat::after{content:"replier"}
.pli[open] > summary{padding-bottom:6px}
.pli .dedans{padding:0 0 16px}
.pli-tout{position:sticky;top:0;z-index:6;background:var(--creme);
  padding:8px 0 10px;margin:0 0 -2px;display:none}
.pli-tout.visible{display:block}
.pli-tout button{width:100%;border:none;border-radius:12px;padding:10px;font:inherit;
  font-size:.88rem;font-weight:600;color:var(--violet);background:var(--doux);cursor:pointer}
.pli-info{font-size:.85rem;color:var(--gris);margin:0 0 10px}

/* --- schéma d'une position ------------------------------------------- */
.schema-pos{display:block;width:100%;height:auto;max-width:420px;margin:0 auto 10px;
  border-radius:14px;background:var(--creme);box-shadow:var(--ombre-douce)}
.fcarte .schema-pos{max-width:100%;margin:0 0 8px}

/* --- vignette : la même position, en petit, dans les listes ----------- */
/* Les schémas sont larges (900×506) : une vignette carrée en « cover » leur
   coupait les jambes, c'est-à-dire justement ce qu'on cherche à voir. On garde
   donc le format du dessin, et on l'affiche en entier. */
.vignette{width:88px;height:50px;flex:0 0 88px;object-fit:contain;border-radius:9px;
  background:var(--creme);box-shadow:var(--ombre-douce)}
.lex-tete{display:flex;align-items:center;gap:11px}
.lex-tete .n{flex:1;min-width:0}
@media (max-width:360px){.vignette{width:74px;height:42px;flex:0 0 74px}}
.carte .vignette{width:100%;max-width:150px;height:auto;aspect-ratio:900/506;
  flex:none;display:block;margin:0 auto 7px}

/* --- l'envoi d'une image : deux familles de rendus, honnêtement séparées --- */
.fam-img{margin-bottom:12px}
.fam-img .etiq{display:block;font-size:.71rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris);margin-bottom:6px}
.fam-img .cmdimg{margin-bottom:0}

/* --- les préludes du soir : cocher, et appuyer sur un seul souhait ------- */
.carte.prelude{position:relative;padding-right:14px}
.carte.prelude .n{display:block;font-weight:600}
.carte.prelude .etoile{display:inline-block;margin-top:8px;border:1.5px solid var(--bord);
  background:#fff;color:var(--gris);border-radius:999px;padding:5px 12px;font-size:.74rem;
  font-family:inherit;cursor:pointer;-webkit-appearance:none}
.carte.prelude.surtout{border-color:var(--rose);
  background:linear-gradient(160deg,rgba(224,86,122,.14),rgba(124,92,255,.10))}
.carte.prelude.surtout .etoile{border-color:var(--rose);color:#fff;font-weight:600;
  background:linear-gradient(100deg,var(--rose),var(--violet))}
.souhait-fort{background:linear-gradient(100deg,rgba(224,86,122,.16),rgba(124,92,255,.16));
  border-radius:14px;padding:12px 15px;margin-bottom:10px;font-size:.94rem;
  box-shadow:inset 0 0 0 1.6px rgba(224,86,122,.34)}

/* =====================================================================
   DU RELIEF SANS UNE SEULE IMAGE
   Le vocabulaire éditorial : bandeau, chiffre-clé, proportion, barres,
   exergue. Rien ici ne dessine un corps — donc rien ne peut être raté.
   ===================================================================== */

/* --- le bandeau d'ouverture d'une fiche --- */
.bandeau{position:relative;margin:2px 0 18px;border-radius:18px;overflow:hidden;
  min-height:132px;display:flex;align-items:flex-end;
  background:linear-gradient(150deg,var(--doux),#fff)}
.bandeau-fond{position:absolute;inset:0;width:100%;height:100%}
.bandeau-txt{position:relative;padding:16px 18px 15px}
.bandeau-txt .t{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;
  line-height:1.1;color:var(--encre)}
.bandeau-txt .s{display:block;margin-top:5px;font-size:.9rem;color:var(--gris);
  max-width:34ch}

/* --- un chiffre sorti du texte --- */
.chiffre{background:var(--doux);border-radius:16px;padding:16px 18px 15px;
  margin-bottom:12px;border-left:4px solid var(--t)}
.chiffre .v{display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.045em;
  line-height:1.02;color:var(--t)}
.chiffre .l{display:block;margin-top:5px;font-size:.95rem;line-height:1.45}
.chiffre .n{display:block;margin-top:8px;font-size:.79rem;color:var(--gris)}

/* --- une proportion en pastilles --- */
.proportion{background:var(--doux);border-radius:16px;padding:15px 18px;margin-bottom:12px}
.pastilles-p{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.pastilles-p i{width:19px;height:19px;border-radius:50%;background:#e6e0ec;display:block}
.pastilles-p i.on{background:var(--t)}
.proportion .l{font-size:.92rem;line-height:1.45}

/* --- des grandeurs comparées --- */
.barres{background:var(--doux);border-radius:16px;padding:15px 18px;margin-bottom:12px}
.b-l{display:grid;grid-template-columns:1fr;gap:3px;margin-bottom:11px}
.b-l:last-of-type{margin-bottom:0}
.b-l .n{font-size:.86rem;color:var(--gris)}
.b-l .r{display:block;height:12px;border-radius:99px;background:#e9e3ef;overflow:hidden}
.b-l .r i{display:block;height:100%;border-radius:99px;background:var(--t)}
.b-l .v{font-size:.92rem;font-weight:700;color:var(--t)}
.barres .lg{display:block;margin-top:11px;font-size:.82rem;color:var(--gris)}

/* --- une phrase en exergue --- */
.exergue{margin:16px 0;padding:2px 0 2px 16px;border-left:3px solid var(--t);
  font-size:1.12rem;line-height:1.42;font-weight:600;letter-spacing:-.012em}

/* --- respiration entre les sections --- */
.corps h2{display:flex;align-items:baseline;gap:9px}
.corps h2::before{content:"";width:16px;height:3px;border-radius:99px;flex:none;
  background:linear-gradient(90deg,var(--rose),var(--violet))}

/* --- le « chapô » de chaque encart -------------------------------------
   Presque tous les encarts du site commencent par une phrase en gras qui
   annonce le paragraphe. Lui donner sa propre ligne et un peu de corps
   suffit à casser l'uniformité de TOUTES les fiches d'un coup — sans
   toucher à un seul fichier de contenu. */
.encart.a-chapo > b:first-child{display:block;font-size:1.02rem;letter-spacing:-.015em;
  line-height:1.35;margin-bottom:5px}
.encart.a-chapo.tendre > b:first-child{color:var(--rose)}
.encart.a-chapo.alerte > b:first-child{color:#a5701f}

/* --- Le répertoire : une entrée qui se déplie sur ses conseils ----------- */
.cat{background:var(--doux);border-radius:13px;padding:11px 13px;margin-bottom:9px}
.cat-tete{display:flex;align-items:center;gap:11px;width:100%;background:none;
  border:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.cat-tete.sans{cursor:default}
.cat-tete .n{flex:1;min-width:0;font-size:.95rem;font-weight:600}
.cat-tete .d{font-size:.75rem;color:var(--gris);font-weight:400;display:block;margin-top:2px}
.cat-tete .fl{flex:0 0 auto;color:var(--gris);font-size:1.15rem;line-height:1;
  transition:transform .18s}
.cat.ouvert .cat-tete .fl{transform:rotate(90deg)}
.cat-plus{margin-top:11px}
.cat-plus .encart{margin:0 0 8px}
.cat-plus p:last-child{margin-bottom:0}

/* La pastille de ce que J'AI répondu — jamais ce que l'autre a répondu. */
.niv{flex:0 0 auto;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;border-radius:999px;padding:3px 9px;background:var(--bord);
  color:var(--gris);white-space:nowrap}
.niv.adore{background:rgba(224,86,122,.16);color:var(--rose)}
.niv.aime{background:rgba(124,92,255,.14);color:var(--violet)}
.niv.jamais{background:rgba(36,31,43,.08);color:var(--encre)}


/* ═══════════════════════════════════════════════════════════════════════
   RÉGLAGE — contraste, relief, mouvement, thème sombre.

   Quatre décisions, dans cet ordre :

   1. LE CONTRASTE. --gris #7d7689 portait l'essentiel du texte du site à
      4,29:1 sur le crème et 4,00:1 sur le gris doux, quand la norme WCAG AA
      demande 4,5:1. Corrigé sans que la teinte ait l'air d'avoir bougé.

   2. LE RELIEF. --doux sur --creme, c'est 1,07:1 : invisible. Les blocs
      prennent un filet, et UNE SEULE ombre est réservée au bloc qui compte.

   3. L'ACCENT. Le dégradé rose→violet apparaissait 24 fois. Il ne sert plus
      qu'à deux choses : le bouton d'action, et la roue. Partout ailleurs,
      un aplat. Un signal qui désigne tout ne désigne plus rien.

   4. LE MOUVEMENT. Trois durées, deux courbes, et rien d'autre. C'est ce
      partage qui fait qu'une interface paraît d'une seule pièce au lieu
      d'un assemblage d'effets — et tout s'éteint proprement si le téléphone
      demande à réduire les animations.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --gris:#6f6880;            /* 5,22:1 sur le crème, 4,86:1 sur le doux */
  --rose-txt:#c43a63;        /* le rose LISIBLE en texte : 5,01:1 */
  --violet-txt:#6746e8;      /* le violet lisible en texte : 5,72:1 */
  --ligne:#e9e3ef;           /* le filet qui détache un bloc de son fond */
  --ombre-douce:0 10px 26px -14px rgba(36,31,43,.20);

  --vite:120ms;              /* le toucher, le survol */
  --moyen:220ms;             /* un dépliage, un accusé de réception */
  --ample:420ms;             /* une entrée, une jauge, un tracé */
  --sortie:cubic-bezier(.22,.61,.36,1);
  --ressort:cubic-bezier(.34,1.56,.64,1);
}

/* --- le thème sombre ---------------------------------------------------
   Ce n'est pas qu'un confort : un fond crème en pleine nuit éclaire la
   pièce. Pour une application qu'on ouvre au lit, à côté de quelqu'un,
   c'est la même exigence que la notification muette et l'icône déguisée.
   Trois états : le réglage du téléphone, ou un choix explicite qui gagne
   dans les deux sens. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --creme:#17131c; --doux:#221c29; --surface:#241d2c; --tiede:#1f1926;
    --encre:#efe9f2; --gris:#a99fb3; --bord:#332b3c; --ligne:#332b3c;
    --rose:#e8557d; --violet:#8f74ff;
    --rose-txt:#f492aa; --violet-txt:#bda8ff; --vert:#4cc08c;
    --ombre-douce:0 10px 26px -12px rgba(0,0,0,.66);
  }
}
:root[data-theme="sombre"]{
  --creme:#17131c; --doux:#221c29; --surface:#241d2c; --tiede:#1f1926;
  --encre:#efe9f2; --gris:#a99fb3; --bord:#332b3c; --ligne:#332b3c;
  --rose:#e8557d; --violet:#8f74ff;
  --rose-txt:#f492aa; --violet-txt:#bda8ff; --vert:#4cc08c;
  --ombre-douce:0 10px 26px -12px rgba(0,0,0,.66);
}
:root[data-theme="sombre"] input[type=text],
:root[data-theme="sombre"] input[type=date],
:root[data-theme="sombre"] textarea{background:var(--doux);color:var(--encre)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) input[type=text],
  :root:not([data-theme="clair"]) input[type=date],
  :root:not([data-theme="clair"]) textarea{background:var(--doux);color:var(--encre)}
  :root:not([data-theme="clair"]) .carte.prelude .etoile{background:var(--doux)}
  :root:not([data-theme="clair"]) .schema-pos,
  :root:not([data-theme="clair"]) .vignette{background:#f4f0f7}
}
:root[data-theme="sombre"] .carte.prelude .etoile{background:var(--doux)}
:root[data-theme="sombre"] .schema-pos,
:root[data-theme="sombre"] .vignette{background:#f4f0f7}

/* --- le garde-fou : tout ce qui suit s'éteint à la demande -------------- */
@media (prefers-reduced-motion:reduce){
  :root{--vite:1ms; --moyen:1ms; --ample:1ms}
  *,*::before,*::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------------- */
/* 1 + 2 — le relief : un filet partout, une seule ombre                   */
/* ---------------------------------------------------------------------- */
.encart,.note,.lex,.ligne,.bascule,.chiffre,.proportion,.cat,.jauge .p{
  border:1px solid var(--ligne)}
.carte{border-color:var(--ligne)}
.carte.actif{border-color:var(--violet-txt)}
.encart.alerte{border-color:rgba(224,161,63,.34)}
/* L'unique bloc qu'on soulève par écran : celui qui appelle. */
.encart.tendre{box-shadow:var(--ombre-douce);border-color:rgba(196,58,99,.24)}
.tuile{border:1px solid var(--ligne)}

/* ---------------------------------------------------------------------- */
/* 3 — l'accent, rationné : le dégradé ne reste qu'au bouton et à la roue  */
/* ---------------------------------------------------------------------- */
.marque{background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--rose-txt);-webkit-text-fill-color:var(--rose-txt)}
.code{background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--rose-txt);-webkit-text-fill-color:var(--rose-txt)}
.encart.tendre{background:var(--surface)}
.pastille.actif{background:var(--tiede);border-color:var(--violet-txt);color:var(--violet-txt)}
.carte.actif{background:var(--tiede)}
.ligne.partage{background:var(--surface);box-shadow:inset 0 0 0 1.6px var(--violet-txt)}
.bascule.actif .voyant{background:var(--rose-txt)}
.jauge .p i{background:var(--violet-txt)}
.jauge.calme .p i{background:var(--vert)}
.rub{color:var(--violet-txt)}
.pli > summary .etat{color:var(--violet-txt)}
.pli-tout button{color:var(--violet-txt)}
.moyeu,.roue-accueil .moyeu{color:var(--rose-txt)}

/* --- les titres en romain : ni police à télécharger, ni page plus lente - */
h1,.titre{font-family:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  font-weight:600;letter-spacing:-.018em}
h1{font-size:1.85rem;line-height:1.14;margin:6px 0 8px}
.titre{font-size:1.2rem}
.centre h1{margin-top:2px}

/* ---------------------------------------------------------------------- */
/* 4 — le mouvement                                                        */
/* ---------------------------------------------------------------------- */

/* a. l'entrée de page : les blocs se composent au lieu de tomber d'un bloc.
      Les éléments collants sont exclus : une transformation casse leur
      accroche en haut de l'écran. */
@media (prefers-reduced-motion:no-preference){
  .corps > *:not(.puces):not(.pli-tout):nth-child(-n+7){
    animation:tem-monter var(--ample) var(--sortie) both}
  .corps > *:nth-child(2){animation-delay:45ms}
  .corps > *:nth-child(3){animation-delay:90ms}
  .corps > *:nth-child(4){animation-delay:130ms}
  .corps > *:nth-child(5){animation-delay:165ms}
  .corps > *:nth-child(6){animation-delay:195ms}
  .corps > *:nth-child(7){animation-delay:220ms}
}
@keyframes tem-monter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* b. le toucher : il répondait à 98,5 %, c'est-à-dire pas du tout. */
.b,.tuile,.carte,.pastille,.puce,.lex,.bascule,.cat-tete,.opt{
  transition:transform var(--vite) var(--sortie), filter var(--vite) var(--sortie),
             background var(--vite) linear, border-color var(--vite) linear,
             box-shadow var(--vite) var(--sortie)}
.b:active{transform:scale(.955);filter:brightness(.94)}
.tuile:active,.lex:active,.bascule:active,.cat-tete:active{transform:scale(.975)}
.carte:active,.pastille:active,.puce:active,.opt:active{transform:scale(.96)}
/* Le ressort, uniquement sur ce qu'on vient de choisir : il confirme le
   geste sans un mot. C'est le seul endroit du site où il est justifié. */
.pastille.tem-pop,.carte.tem-pop,.opt.tem-pop{
  transform:scale(1.045);transition:transform var(--moyen) var(--ressort)}
.voyant::after{transition:transform var(--moyen) var(--ressort)}
.voyant{transition:background var(--moyen) var(--sortie)}

/* c. le dépliage : le répertoire et les 26 fiches s'ouvraient d'un coup sec.
      La grille 0fr → 1fr anime la hauteur réelle sans la connaître. */
.cat-plus{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--moyen) var(--sortie)}
.cat.ouvert .cat-plus{grid-template-rows:1fr}
.cat-plus > .dedans{overflow:hidden;min-height:0}
.cat.ouvert .cat-plus > .dedans{padding-top:11px}
.cat-tete .fl{transition:transform var(--moyen) var(--sortie)}
/* Les fiches longues sont des <details> : le navigateur les masque
   complètement, donc l'animation est pilotée depuis pied(). */
.pli .dedans{overflow:hidden}
.pli.tem-anime .dedans{transition:height var(--moyen) var(--sortie)}

/* d. la roue au repos : elle tournait de 7° en 5,5 s, autant dire jamais.
      Un tour complet en 44 s, et un halo qui souffle. */
@media (prefers-reduced-motion:no-preference){
  .roue-accueil.respire .disque{animation:tem-tour 44s linear infinite}
  .roue-accueil.respire{animation:tem-halo 6s ease-in-out infinite}
}
@keyframes tem-tour{to{transform:rotate(360deg)}}
@keyframes tem-halo{
  0%,100%{filter:drop-shadow(0 0 0 rgba(196,58,99,0))}
  50%{filter:drop-shadow(0 0 16px rgba(196,58,99,.28))}}
/* Elle est devenue le bouton : elle doit le montrer. */
a.roue-accueil{display:block;text-decoration:none;color:inherit;cursor:pointer;
  transition:transform var(--moyen) var(--sortie)}
a.roue-accueil:active{transform:scale(.97)}
.roue-accueil .moyeu .go{display:block;font-size:.72rem;font-weight:600;letter-spacing:0;
  color:var(--gris);margin-top:1px}

/* e. la jauge se remplit à l'ouverture : voir la progression bouger donne
      envie de la finir ; la voir déjà posée, non. */
.jauge .p i{transition:width 900ms var(--sortie)}

/* f. l'accusé de réception : il apparaissait sans prévenir, au même endroit
      que le reste. */
@media (prefers-reduced-motion:no-preference){
  .encart.tendre.tem-recu{animation:tem-descendre var(--moyen) var(--sortie) both}
}
@keyframes tem-descendre{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}

/* g. la roue qui tourne, sur roue.php : le repère est bousculé à chaque
      secteur qui passe. Vite au début, de plus en plus lentement. */
.roue{transition:none}          /* désormais pilotée image par image */
.fleche{transform-origin:50% 3px;transition:transform 90ms var(--sortie)}
.fleche.tape{transform:translateX(-50%) rotate(11deg)}
/* Le moyeu porte maintenant deux lignes : le nom, et ce qu'on peut faire. */
.roue-accueil .moyeu{flex-direction:column;line-height:1.05}

/* Dans le noir, les pastels de la roue crient. On les assourdit juste ce
   qu'il faut pour qu'elle reste l'objet lumineux sans éblouir. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .roue-accueil .disque,
  :root:not([data-theme="clair"]) .roue{filter:saturate(.72) brightness(.82)}
}
:root[data-theme="sombre"] .roue-accueil .disque,
:root[data-theme="sombre"] .roue{filter:saturate(.72) brightness(.82)}


/* ═══════════════════════════════════════════════════════════════════════
   TERRE ET BOIS — le registre.

   Le rose et le violet étaient le choix par défaut du marché : ils
   évoquaient la légèreté, la drague, le produit commercial. Or tem repose
   sur la sécurité, le consentement et la tendresse. Pire pour ce projet :
   par-dessus l'épaule, le rose-violet criait « application coquine », ce
   qui allait contre l'icône déguisable et la notification muette.

   On passe donc aux couleurs de terre, de peau et de nuit feutrée :
   l'argile pour l'action, un vert sourd pour le second rôle, et un
   brun-noir la nuit plutôt qu'un violet ténébreux.

   Un seul accent CHAUD : l'argile. Le second est FROID, à dessein — deux
   couleurs chaudes feraient le même travail et plus rien ne ressortirait,
   c'est-à-dire exactement le défaut qu'on vient de corriger.

   Tous les rapports ci-dessous sont mesurés et passent le seuil AA.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --creme:#faf6f1;      /* le sable : un papier chaud, pas un blanc froid */
  --doux:#f2ebe2;       /* le fond de bloc */
  --surface:#ffffff;    /* la carte qu'on soulève */
  --tiede:#f7f1e9;
  --encre:#2a2320;      /* 14,35:1 */
  --gris:#6d6157;       /* 5,58:1 sur le sable, 5,08 sur le bloc */
  --bord:#eae1d6;
  --ligne:#eae1d6;

  --rose:#a44b32;       /* L'ARGILE — l'action, et rien d'autre */
  --violet:#3f6b57;     /* LE VERT SOURD — le second rôle */
  --peche:#c07d52;      /* le bois clair, pour les aplats */
  --vert:#3f6b57;

  --rose-txt:#98442d;   /* 6,10:1 */
  --violet-txt:#3a6150; /* 6,49:1 */

  --ombre-douce:0 10px 26px -14px rgba(42,35,32,.22);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --creme:#161311;    /* le brun-noir : enveloppant, jamais bleuté */
    --doux:#211c18; --surface:#241e19; --tiede:#1e1915;
    --encre:#f2ebe4;    /* 15,66:1 */
    --gris:#a89c91;     /* 6,90:1 */
    --bord:#332b25; --ligne:#332b25;
    --rose:#b4573c; --violet:#4f7f68; --peche:#c98b5e; --vert:#4f7f68;
    --rose-txt:#e08a6a; --violet-txt:#7fb79c;
    --ombre-douce:0 10px 26px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="sombre"]{
  --creme:#161311; --doux:#211c18; --surface:#241e19; --tiede:#1e1915;
  --encre:#f2ebe4; --gris:#a89c91; --bord:#332b25; --ligne:#332b25;
  --rose:#b4573c; --violet:#4f7f68; --peche:#c98b5e; --vert:#4f7f68;
  --rose-txt:#e08a6a; --violet-txt:#7fb79c;
  --ombre-douce:0 10px 26px -12px rgba(0,0,0,.7);
}

/* Le seul dégradé qui reste est un OMBRÉ : deux tons de la même argile,
   pas un arc-en-ciel. Il ne sert qu'au bouton d'action. */
.b1{background:linear-gradient(100deg,#b4573c,#96412a);
  box-shadow:0 8px 20px rgba(164,75,50,.28)}
:root[data-theme="sombre"] .b1{background:linear-gradient(100deg,#c0603f,#a04a2e)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .b1{background:linear-gradient(100deg,#c0603f,#a04a2e)}
}
.b-oui{background:rgba(63,107,87,.16);color:#2f5545}
.b-non{background:var(--doux);color:var(--gris)}
.encart.alerte{background:rgba(192,125,82,.16);border-color:rgba(192,125,82,.36)}
.encart.tendre{border-color:rgba(164,75,50,.22)}
.curseur{background:linear-gradient(90deg,#ece3d8,#e3c3a6,#c07d52,#a44b32)}
.curseur::-webkit-slider-thumb{border-color:var(--rose)}
.curseur::-moz-range-thumb{border-color:var(--rose)}

/* --- Les trois objets d'identité, reteints -----------------------------
   Une palette ne bascule pas si la roue, l'icône et le cœur restent aux
   anciennes couleurs : ce sont eux qu'on regarde en premier. */

/* Le cœur : une braise sous la peau, plus une bille de chewing-gum. */
.coeur{background:radial-gradient(circle at 34% 32%,#f2c9ac,#dd9a76 42%,#a44b32);
  box-shadow:0 0 0 14px rgba(164,75,50,.09),0 0 0 30px rgba(164,75,50,.045)}
.coeur.calme{background:radial-gradient(circle at 36% 32%,#efe7dd,#cbb9a6);
  box-shadow:0 0 0 14px rgba(109,97,87,.08)}

/* La roue : six terres, du bois clair au vert sourd. Elle reste l'objet
   le plus coloré de l'écran — mais dans le même monde que le reste. */
.roue,.roue-accueil .disque{
  background:conic-gradient(#e6b598 0 60deg,#c3d0c0 60deg 120deg,#eccb9d 120deg 180deg,
    #a8c4b3 180deg 240deg,#dda98c 240deg 300deg,#ddd0bd 300deg 360deg)}
.roue{box-shadow:inset 0 0 0 9px var(--creme),0 10px 26px rgba(42,35,32,.20)}
.roue-accueil .disque{box-shadow:inset 0 0 0 9px var(--creme),
  0 16px 38px -14px rgba(164,75,50,.42)}
@keyframes tem-halo{
  0%,100%{filter:drop-shadow(0 0 0 rgba(164,75,50,0))}
  50%{filter:drop-shadow(0 0 16px rgba(164,75,50,.30))}}

/* Le flou de mouvement : posé image par image depuis roue.php, en fonction
   de la vitesse réelle. Une roue nette qui tourne vite paraît fausse. */
.roue.file{will-change:filter,transform}

/* La barre du bas des tuiles « ce soir » et le repli de la bibliothèque. */
.bibli > summary{display:flex;align-items:center;justify-content:space-between;
  gap:12px;cursor:pointer;list-style:none;background:var(--surface);
  border:1px solid var(--ligne);border-radius:16px;padding:15px 16px;
  font-weight:650;font-size:.95rem;-webkit-tap-highlight-color:transparent;
  transition:transform var(--vite) var(--sortie)}
.bibli > summary::-webkit-details-marker{display:none}
.bibli > summary:active{transform:scale(.985)}
.bibli > summary .d{display:block;font-weight:400;font-size:.79rem;color:var(--gris);
  margin-top:3px}
.bibli > summary .fl{flex:0 0 auto;color:var(--gris);font-size:1.2rem;line-height:1;
  transition:transform var(--moyen) var(--sortie)}
.bibli[open] > summary .fl{transform:rotate(90deg)}
.bibli .dedans{padding-top:10px}
.bibli{border:none !important;margin-bottom:12px}
.bibli > summary{padding:15px 16px}

/* ======================================================================== */
/* CHOISIR PLUS VITE                                                        */
/*                                                                          */
/* Le défaut n'était pas le nombre de propositions, c'était de les servir    */
/* toutes à plat et toutes cochées : un mur de quatre-vingts cases qui ne    */
/* demandait rien puisque tout était déjà dit. On range par famille, on ne   */
/* coche plus rien, et on compte.                                           */
/* ======================================================================== */

.choix-barre{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:2px 0 8px}
.compte-choix{font-size:.9rem;color:var(--gris)}
.compte-choix b{color:var(--encre);font-size:1.05rem}
.lien-plat{border:none;background:var(--doux);color:var(--violet-txt);
  border-radius:999px;padding:8px 15px;font:inherit;font-size:.86rem;
  font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lien-plat:active{transform:scale(.96)}

.pli > summary .sous{display:block;font-weight:400;font-size:.82rem;
  color:var(--gris);letter-spacing:0;margin-top:2px}
.pli.famille > summary .etat b{color:var(--encre);font-weight:700}
.pli.famille:not(.vide) > summary{color:var(--rose-txt)}

.fam-actions{display:flex;gap:8px;margin:0 0 11px}
.fam-actions button{flex:1;border:1px solid var(--ligne);background:transparent;
  color:var(--gris);border-radius:11px;padding:8px;font:inherit;font-size:.82rem;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.fam-actions button:active{background:var(--doux)}

/* Le liseré des cartes retenues suivait encore l'ancienne palette rose. */
.carte.actif{border-color:var(--violet-txt);
  background:linear-gradient(160deg,rgba(164,75,50,.10),rgba(63,107,87,.09))}

/* --- l'envie d'avant : une seule, en lignes compactes ------------------ */
.envies{margin:4px 0 16px}
.envie{display:block;position:relative;padding:12px 14px 12px 40px;
  border-bottom:1px solid var(--ligne);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.envie:first-child{border-top:1px solid var(--ligne)}
.envie input{position:absolute;opacity:0;width:0;height:0}
.envie::before{content:"";position:absolute;left:12px;top:15px;width:16px;
  height:16px;border-radius:50%;border:1.8px solid var(--ligne);
  transition:border-color var(--vite) linear,box-shadow var(--vite) linear}
.envie.actif::before{border-color:var(--rose);box-shadow:inset 0 0 0 4px var(--rose)}
.envie.actif{background:var(--doux)}
.envie .n{display:block;font-weight:600;font-size:.97rem}
.envie .d{display:block;font-size:.82rem;color:var(--gris);margin-top:2px}
.envie .fiche{font-size:.76rem;font-weight:500;margin-left:6px;
  color:var(--violet-txt)}

/* --- le profil : un compteur sur chaque famille ------------------------ */
.puce .cpt{display:inline-block;margin-left:5px;font-size:.76rem;
  font-weight:500;opacity:.62}

/* --- les schémas portent maintenant leur propre fond ------------------- */
/* Le fond clair placé derrière eux (un lavande hérité de l'ancienne
   palette) ne se voyait plus que dans les quatre coins arrondis, où il
   jurait avec la terre. */
.schema-pos, .vignette{background:transparent}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .schema-pos,
  :root:not([data-theme="clair"]) .vignette{background:transparent}
}
:root[data-theme="sombre"] .schema-pos,
:root[data-theme="sombre"] .vignette{background:transparent}

/* ======================================================================== */
/* RÉGLAGES APRÈS ESSAI                                                     */
/* ======================================================================== */

/* Les schémas portent maintenant leur propre fond plein : à 420 px de large
   ils occupaient tout l'écran et écrasaient le texte qui compte. */
.schema-pos{max-width:300px;border-radius:12px}

/* Sur l'écran de classement, trois schémas empilés en pleine largeur
   faisaient trois écrans. Une vignette à gauche du texte suffit : on doit
   reconnaître la position, pas l'étudier. */
.fcarte .txt{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px 12px}
.fcarte .schema-pos{width:112px;max-width:112px;margin:0;border-radius:10px}
.fcarte .txt > b{flex:1 1 auto;align-self:center}
.fcarte .txt .d{flex:1 1 100%}
.fcarte.choisie{border-color:var(--violet-txt);
  background:linear-gradient(160deg,rgba(164,75,50,.10),rgba(63,107,87,.09))}
.fcarte.choisie .rang{background:linear-gradient(140deg,var(--rose),#7a3320);
  color:#fff;border-color:transparent}

/* Une case à cocher n'est pas un choix unique : le repère est carré. */
.envie.coche::before{border-radius:6px}

/* --- le conseil du jour ------------------------------------------------- */
/* Vingt-six fiches qui attendaient qu'on aille les chercher. Une par jour,
   la même pour les deux, sans notification et sans insistance. */
.conseil-jour{display:block;background:var(--surface);border:1px solid var(--ligne);
  border-radius:15px;padding:13px 15px;margin:0 0 12px;text-decoration:none;
  color:inherit;-webkit-tap-highlight-color:transparent}
.conseil-jour:active{transform:scale(.99)}
.conseil-jour .k{display:block;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--violet-txt);font-weight:700}
.conseil-jour .t{display:block;font-size:1.02rem;font-weight:700;margin-top:3px;
  letter-spacing:-.015em}
.conseil-jour .d{display:block;font-size:.84rem;color:var(--gris);margin-top:2px}
/* L'astuce occupe le même emplacement mais ne fait pas la même promesse : le
   conseil du jour parle du couple, l'astuce parle du site. Un liseré suffit à
   le dire — pas une couleur d'alerte, il n'y a rien d'urgent. */
.conseil-jour.astuce{border-left:3px solid var(--peche)}
.conseil-jour.astuce .k{color:var(--gris)}

/* --- la liste des appareils --------------------------------------------- */
.appareil{border:1px solid var(--ligne);border-radius:14px;padding:12px 13px;
  margin-bottom:9px;background:var(--surface)}
.appareil.actif{border-color:var(--rose);box-shadow:var(--ombre-douce)}
.appareil.mort{opacity:.66}
.appareil .n{display:block;font-weight:650;font-size:.96rem}
.appareil .d{display:block;font-size:.8rem;color:var(--gris);font-weight:400;margin-top:2px}
.appareil .ici{font-size:.78rem;font-weight:600;color:var(--rose-txt);margin-left:4px}
.appareil .fam-actions{margin:0}

/* ---------------------------------------------------------------------------
   LE COMPTE À REBOURS
   Les chiffres en chasse fixe : sans cela, le texte tressaute à chaque
   seconde, parce qu'un 1 est plus étroit qu'un 8.
   --------------------------------------------------------------------------- */
.rebours .reste {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   « CE SOIR, RIEN À L'INTÉRIEUR »
   Une bascule imposée par la case de sécurité : elle reste allumée, mais on
   voit qu'on ne peut plus l'éteindre. Et l'option « on verra sur le moment »
   se retire visiblement plutôt que de disparaître.
   --------------------------------------------------------------------------- */
.bascule.impose{opacity:.85}
.bascule.impose .voyant{box-shadow:0 0 0 2px var(--rose)}
.envie.hors{opacity:.4;text-decoration:line-through}
.envie.hors input{pointer-events:none}

/* ---------------------------------------------------------------------------
   Une case cochée doit SE VOIR, sans attendre un script.

   Le défaut trouvé par Franck sur « où terminer » : ces cartes cachent leur
   case à cocher (input{display:none}) et ne s'allument que par une classe
   « actif ». Cette classe est posée par le serveur au chargement, et par un
   petit script au clic — sauf que le script n'existait pas sur cette page-là.
   Résultat : on clique, rien ne change, et pourtant c'est bien enregistré.
   Le pire des cas, parce que rien ne signale l'erreur.

   La règle ci-dessous fait faire au navigateur ce qu'on demandait au script.
   Elle vaut pour toutes les cartes du site, y compris celles qui seront
   écrites plus tard, et elle ne peut pas être oubliée sur une page. La classe
   « actif » reste, pour l'état rendu par le serveur et pour les navigateurs
   qui ne connaîtraient pas encore :has().
   --------------------------------------------------------------------------- */
.carte:has(input:checked){border-color:var(--violet);
  background:linear-gradient(160deg,rgba(224,86,122,.10),rgba(124,92,255,.10));font-weight:600}
.scase:has(input:checked){border-color:var(--violet);
  background:linear-gradient(100deg,rgba(224,86,122,.12),rgba(124,92,255,.12));font-weight:600}
.vcuriosite:has(input:checked){border-color:var(--violet);
  background:linear-gradient(100deg,rgba(224,86,122,.12),rgba(124,92,255,.12))}
.nopt:has(input:checked){border-color:var(--violet);color:var(--encre);
  background:linear-gradient(100deg,rgba(224,86,122,.14),rgba(124,92,255,.14))}
.nopt:has(input:checked) span{background:linear-gradient(140deg,var(--rose),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.trio .opt:has(input:checked){border-color:var(--violet);color:var(--encre);font-weight:600;
  background:linear-gradient(100deg,rgba(224,86,122,.14),rgba(124,92,255,.14))}
.trio .opt.non:has(input:checked){border-color:#d98a7a;background:rgba(226,96,63,.14)}
.envie:has(input:checked)::before{border-color:var(--rose);box-shadow:inset 0 0 0 4px var(--rose)}
.envie:has(input:checked){background:var(--doux)}
.bascule:has(input:checked) .voyant{background:linear-gradient(100deg,var(--rose),var(--violet))}
.bascule:has(input:checked) .voyant::after{transform:translateX(18px)}

/* Les mêmes, dans le thème clair où les teintes changent. */
:root[data-theme="clair"] .carte:has(input:checked){border-color:var(--violet-txt);
  background:var(--tiede)}
:root[data-theme="clair"] .bascule:has(input:checked) .voyant{background:var(--rose-txt)}

/* --- poser une question (fiches.php) ------------------------------------- */
/* Le champ est la seule chose de la page qu'on vient chercher délibérément :
   il porte la couleur d'accent, le reste de la page reste calme. */
.cherche{margin:4px 0 8px}
.cherche-champ{font-size:1rem}
input[type=text].cherche-champ{border-color:var(--violet)}
.cherche-note{font-size:.78rem;margin:6px 0 10px}
.res .rub{margin-top:6px}
.res .tuile{margin-bottom:8px}
.res .res-aide{border-left:3px solid var(--rose)}
.res-note{font-size:.86rem;margin:4px 0 12px}
/* La section ouverte depuis la recherche : un liseré, pour qu'on sache
   pourquoi on arrive là. Et une marge, pour ne pas coller au bord. */
.section-visee{scroll-margin-top:14px}
details.pli.section-visee > summary{box-shadow:inset 3px 0 0 var(--violet)}
h2.section-visee{box-shadow:inset 3px 0 0 var(--violet);padding-left:10px}