/*
 * nd-couleurs.css : module commun « Choisis tes couleurs » (22/10/2026), copie fidele de l ecran des
 * ambiances d IdeaCrashTest (teste-ton-idee/app/styles.css, bloc « Les 4 ambiances »).
 * Chaque app l habille avec ses propres variables (a poser sur :root ou sur l ecran) :
 *   --ndc-carte-fond, --ndc-carte-bord, --ndc-texte, --ndc-doux, --ndc-accent, --ndc-sur-accent,
 *   --ndc-halo (le fond autour de la coche), --ndc-ombre, --ndc-lisere, --ndc-police, --ndc-police-titre.
 * Source unique : projets/04-nathiedev/_commun/couleurs/. On corrige ici, puis on recopie.
 */

/* Le changement de couleurs : le cercle est anime par nd-couleurs.js (View Transitions). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

.ndc-ecran-choix { font-family: var(--ndc-police, inherit); color: var(--ndc-texte, inherit); }
.ndc-question { font-family: var(--ndc-police-titre, Georgia, serif); font-weight: 500; font-size: clamp(1.45rem, 6.4vw, 1.9rem);
  line-height: 1.18; margin: 0 0 .45em; text-wrap: balance; color: var(--ndc-texte, inherit); }
/* le mot cle en italique, dans la couleur du theme */
.ndc-question em { font-style: italic; color: var(--ndc-accent); }
.ndc-sous { margin: 0 0 18px; font-size: .95rem; line-height: 1.5; color: var(--ndc-doux); }

/* les cartes du choix, en grand, chacune avec une miniature de l app dans ses couleurs, dans un cadre a fin lisere */
.ndc-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 0; }
.ndc-carte-choix { position: relative; font: inherit; text-align: start; background: var(--ndc-carte-fond); border: 1px solid var(--ndc-carte-bord);
  border-radius: 22px; padding: 10px 10px 12px; color: var(--ndc-texte); cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.ndc-carte-choix:active { transform: scale(.98); }
.ndc-carte-choix:focus-visible { outline: 2px solid var(--ndc-accent); outline-offset: 4px; }
.ndc-carte-choix[aria-checked="true"] { box-shadow: 0 10px 26px var(--ndc-ombre, rgba(0,0,0,.25)); }
.ndc-nom { display: block; font-family: var(--ndc-police-titre, Georgia, serif); font-style: italic; font-weight: 500; font-size: 1.08rem;
  line-height: 1.2; margin: 10px 4px 2px; color: var(--ndc-texte); }
.ndc-dit { display: block; font-size: .76rem; line-height: 1.35; color: var(--ndc-doux); margin: 0 4px; }
/* la medaille cochee, a l angle de la carte : c est d elle que part la nouvelle couleur */
.ndc-medaille { position: absolute; top: -9px; inset-inline-end: -9px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ndc-accent); color: var(--ndc-sur-accent); display: grid; place-items: center; transform: scale(0);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1) .25s; box-shadow: 0 0 0 3px var(--ndc-halo), 0 3px 10px rgba(0,0,0,.25); z-index: 2; }
.ndc-medaille svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ndc-carte-choix[aria-checked="true"] .ndc-medaille { transform: scale(1); }
/* le lisere qui se trace autour du choix, une seule fois (SVG LINE DRAW) */
.ndc-anneau { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; overflow: visible; }
.ndc-anneau rect { fill: none; stroke: var(--ndc-accent); stroke-width: 1.8; x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px);
  rx: 25px; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ndc-carte-choix[aria-checked="true"] .ndc-anneau rect { opacity: 1; stroke-dashoffset: 0; }
.ndc-carte-choix.trace .ndc-anneau rect { animation: ndc-tracer .9s cubic-bezier(.65,0,.35,1) .2s both; }
@keyframes ndc-tracer { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* la miniature « liste » : en-tete, pictogramme, titre, lignes, carte, bouton */
.ndc-cadre { display: block; padding: 4px; border-radius: 18px; border: 1px solid var(--ndc-lisere, var(--ndc-carte-bord)); }
.ndc-ecran { display: block; border-radius: 13px; overflow: hidden; background: var(--m-fond); border: 1px solid var(--m-bord); }
.ndc-tete { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; background: var(--m-tete); border-bottom: 1px solid var(--m-bord); }
.ndc-pastille { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--m-accent); flex: none; }
.ndc-tete i { display: block; height: 4px; width: 40%; border-radius: 2px; background: var(--m-tete-ligne); }
.ndc-tete b { margin-inline-start: auto; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--m-accent); }
.ndc-corps { display: block; padding: 9px 9px 10px; }
.ndc-icone { display: block; width: 12px; height: 12px; color: var(--m-accent); }
.ndc-icone svg { display: block; width: 12px; height: 12px; }
.ndc-titre { display: block; font-family: var(--ndc-police-titre, Georgia, serif); font-size: .84rem; line-height: 1.15; color: var(--m-texte);
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndc-l { display: block; height: 3.5px; border-radius: 2px; background: var(--m-ligne); margin-top: 6px; }
.ndc-carte { display: block; border-radius: 7px; background: var(--m-carte); border: 1px solid var(--m-bord); padding: 6px 7px; margin-top: 8px; }
.ndc-carte .ndc-l:first-child { margin-top: 0; }
.ndc-bouton { display: block; margin: 8px 0 0 auto; width: 54%; height: 13px; border-radius: 999px; background: var(--m-bouton); position: relative; }
[dir="rtl"] .ndc-bouton { margin: 8px auto 0 0; }
.ndc-bouton::after { content: ""; position: absolute; left: 28%; right: 28%; top: 5px; height: 3px; border-radius: 2px; background: var(--m-bouton-texte); }

/* l arrivee en cascade, a l ecran de l onboarding (FRAMER FADE UP) */
.ndc-grille.cascade .ndc-carte-choix { animation: ndc-monter .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.12s + var(--ndc-i, 0) * 80ms); }
@keyframes ndc-monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* « Continuer », pleine largeur, avec le reflet qui passe une fois a chaque choix (SHINE SWEEP) */
.ndc-suite { margin-top: 18px; }
.ndc-continuer { position: relative; overflow: hidden; display: block; width: 100%; min-height: 54px; padding: 14px 20px; border: 0; border-radius: 999px;
  cursor: pointer; font: inherit; font-weight: 700; font-size: 1.02rem; background: var(--ndc-accent); color: var(--ndc-sur-accent);
  box-shadow: 0 10px 26px var(--ndc-ombre, rgba(0,0,0,.2)); }
.ndc-continuer::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); }
.ndc-continuer.reflet::after { animation: ndc-reflet .9s ease-out .15s; }
@keyframes ndc-reflet { to { left: 130%; } }
.ndc-rien { text-align: center; color: var(--ndc-doux); font-size: .82rem; margin: 10px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ndc-grille.cascade .ndc-carte-choix, .ndc-carte-choix.trace .ndc-anneau rect, .ndc-continuer.reflet::after { animation: none; }
  .ndc-medaille { transition: none; }
}

/* L arabe n a pas d italique : le navigateur le simulerait en penchant les lettres (22/10/2026). */
[dir="rtl"] .ndc-question em, [dir="rtl"] .ndc-nom { font-style: normal; }