/* =========================================================================
   ColorLearn — css/crayon.css
   « Le coup de crayon » : au survol (et au focus clavier), la navigation se
   colorie comme si un enfant passait un crayon de cire dessus.

   Principes non négociables
   -------------------------
   1. L'encre reste noire. La couleur n'existe QUE dans les états de survol
      et de focus, jamais dans le contenu, jamais à l'impression.
   2. Le texte ne change jamais de couleur : il reste noir sur un aplat
      clair (ou blanc sur le noir de la barre d'outils). Le contraste des
      libellés est donc identique avec et sans effet.
   3. Chaque couche décorative est un pseudo-élément masqué : la couleur
      vient de --crayon, la forme d'un masque SVG. Zéro image à charger.
   4. `prefers-reduced-motion` supprime le tracé animé, pas l'effet.
   5. `forced-colors` et `@media print` neutralisent tout.
   ========================================================================= */

:root {
  /* Couleur de crayon par défaut (surchargée par thème via style="--crayon:…") */
  --crayon: #E8622E;
  --crayon-opacite: 0.24;
  --crayon-duree: 420ms;
  --crayon-courbe: cubic-bezier(0.22, 0.72, 0.28, 1);

  /* Gribouillis de remplissage : va-et-vient de crayon, bords volontairement
     irréguliers (les extrémités ne touchent pas toutes le bord du masque). */
  --crayon-masque-fond: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'>\
<g fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='8.4'>\
<path d='M3 5 L97 1.5 L2 13 L99 9 L1.5 21 L96 17 L3 29 L98.5 25 L2 37 L97 33 L4 45 L98 41 L2 53 L96.5 49 L3 61 L97 57.5'/>\
</g>\
<g fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='5' opacity='0.9'>\
<path d='M8 3 L92 7 M6 31 L94 35 M10 59 L90 55'/>\
</g>\
</svg>");

  /* Contour tracé à main levée : deux passages légèrement décalés,
     comme lorsqu'on repasse sur un trait. */
  --crayon-masque-contour: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'>\
<g fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'>\
<path stroke-width='3.4' d='M9 3 Q3 3.5 2.6 9 L2 54 Q2 61 9 60.5 L91 61.5 Q97.5 61 97.6 55 L98 10 Q98 3 91.5 3.5 Z'/>\
<path stroke-width='2.2' opacity='0.75' d='M12 5 Q5 5 4.6 10.5 L4 52 Q4.4 58.5 10 58.5 L89 59.5 Q95 59 95.4 53 L96 12 Q95.6 5.5 89 6 Z'/>\
</g>\
</svg>");

  /* Trait de soulignement : un coup de crayon appuyé, un peu bavant. */
  --crayon-masque-trait: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'>\
<g fill='none' stroke='%23fff' stroke-linecap='round'>\
<path stroke-width='6' d='M2.5 7 Q26 3.4 50 6.2 T97 4.6'/>\
<path stroke-width='3.2' opacity='0.8' d='M6 10 Q30 7 54 9 T94 8'/>\
</g>\
</svg>");

  /* Grain de cire : deux trames croisées qui cassent l'aplat numérique. */
  --crayon-grain:
    repeating-linear-gradient(112deg, rgb(255 255 255 / 0.42) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(64deg, rgb(0 0 0 / 0.07) 0 1px, transparent 1px 4px);

  /* Curseur « crayon de cire » sur les zones coloriables (Chrome/Firefox). */
  --crayon-curseur: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'>\
<g fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'>\
<path d='M20 3 l5 5 l-13 13 l-7 2 l2 -7 Z'/>\
<path d='M7 16 l5 5'/>\
</g></svg>") 3 24;
}

/* =========================================================================
   1. LA BASE — un élément « coloriable »
   ========================================================================= */
.crayon {
  position: relative;
  isolation: isolate;
  transition:
    box-shadow var(--crayon-duree) var(--crayon-courbe),
    transform 180ms var(--crayon-courbe);
}

/* Couche 1 : le remplissage gribouillé */
.crayon::before,
/* Couche 2 : le contour repassé */
.crayon::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--crayon);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  /* Le trait se « dessine » de la gauche vers la droite */
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path var(--crayon-duree) var(--crayon-courbe),
    opacity 140ms linear;
}

.crayon::before {
  background-image: var(--crayon-grain);
  -webkit-mask-image: var(--crayon-masque-fond);
  mask-image: var(--crayon-masque-fond);
  transform: rotate(-0.4deg);
}

.crayon::after {
  -webkit-mask-image: var(--crayon-masque-contour);
  mask-image: var(--crayon-masque-contour);
  transform: rotate(0.35deg);
  transition-delay: 90ms;
}

/* ---- L'état colorié ---- */
.crayon:hover,
.crayon:focus-visible {
  box-shadow: 5px 5px 0 var(--crayon);
}

.crayon:hover::before,
.crayon:focus-visible::before {
  opacity: var(--crayon-opacite);
  clip-path: inset(0 0 0 0);
}

.crayon:hover::after,
.crayon:focus-visible::after {
  opacity: 0.9;
  clip-path: inset(0 0 0 0);
}

/* Le trait au crayon appuie un peu plus fort quand on clique */
.crayon:active {
  transform: translate(1px, 1px);
}

.crayon:active::before {
  opacity: calc(var(--crayon-opacite) + 0.12);
}

/* =========================================================================
   2. VARIANTE « TRAIT » — un simple soulignement colorié
   (barre d'outils, pied de page, liens de navigation)
   ========================================================================= */
.crayon-trait {
  position: relative;
  transition: color 160ms linear;
}

.crayon-trait::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -5px;
  height: 10px;
  pointer-events: none;
  background-color: var(--crayon);
  -webkit-mask-image: var(--crayon-masque-trait);
  mask-image: var(--crayon-masque-trait);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 320ms var(--crayon-courbe),
    opacity 120ms linear;
}

.crayon-trait:hover::after,
.crayon-trait:focus-visible::after,
.crayon-trait[aria-current]::after {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* =========================================================================
   3. VARIANTE « PASTILLE » — filtres de niveau, préréglages, onglets
   ========================================================================= */
.crayon-pastille {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: var(--trait-fin, 2px) solid var(--encre, #000);
  border-radius: 999px;
  background: none;
  color: var(--encre, #000);
  font: 800 13px/1 var(--police-texte, sans-serif);
  cursor: pointer;
  white-space: nowrap;
}

.crayon-pastille::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background-color: var(--crayon);
  background-image: var(--crayon-grain);
  -webkit-mask-image: var(--crayon-masque-fond);
  mask-image: var(--crayon-masque-fond);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 300ms var(--crayon-courbe),
    opacity 120ms linear;
}

.crayon-pastille:hover::before,
.crayon-pastille:focus-visible::before {
  opacity: 0.2;
  clip-path: inset(0 0 0 0);
}

.crayon-pastille[aria-pressed="true"]::before,
.crayon-pastille[aria-selected="true"]::before {
  opacity: 0.34;
  clip-path: inset(0 0 0 0);
}

.crayon-pastille[aria-pressed="true"],
.crayon-pastille[aria-selected="true"] {
  box-shadow: 3px 3px 0 var(--crayon);
}

/* =========================================================================
   4. LE SOMMAIRE — les cartes de la collection prennent leur couleur
   ========================================================================= */
.hub-carte {
  /* La couleur du thème arrive en style inline : style="--crayon:#E8622E" */
  cursor: var(--crayon-curseur), pointer;
  transition:
    box-shadow var(--crayon-duree) var(--crayon-courbe),
    transform 180ms var(--crayon-courbe);
}

/* On remplace l'ombre noire d'origine par l'ombre de la couleur du thème :
   même géométrie, même esprit « encre posée », mais coloriée. */
.hub-carte.crayon:hover,
.hub-carte.crayon:focus-visible {
  box-shadow: 5px 5px 0 var(--crayon);
  transform: translate(-1px, -1px);
}

/* L'icône se colorie elle aussi : les attributs stroke/fill du SVG sont
   des attributs de présentation, donc toujours battus par une règle CSS. */
.hub-carte svg [stroke] {
  transition: stroke 220ms var(--crayon-courbe);
}

.hub-carte.crayon:hover svg [stroke],
.hub-carte.crayon:focus-visible svg [stroke] {
  stroke: var(--crayon);
}

/* Le badge « fiche terminée » se colorie en dernier, comme une récompense */
.hub-carte.crayon:hover .badge,
.hub-carte.crayon:focus-visible .badge {
  border-color: var(--crayon);
  transition-delay: 120ms;
}

/* Le titre reste NOIR (contraste garanti) mais reçoit son coup de crayon */
.hub-carte h2 {
  position: relative;
  display: inline-block;
}

.hub-carte h2::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -3px;
  height: 8px;
  background-color: var(--crayon);
  -webkit-mask-image: var(--crayon-masque-trait);
  mask-image: var(--crayon-masque-trait);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 340ms var(--crayon-courbe) 120ms,
    opacity 120ms linear;
}

.hub-carte.crayon:hover h2::after,
.hub-carte.crayon:focus-visible h2::after {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* =========================================================================
   5. LA BARRE D'OUTILS — fond noir, coup de crayon lumineux
   ========================================================================= */
.toolbar .btn,
.toolbar__retour {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.toolbar .crayon-trait::after {
  bottom: -3px;
}

/* Bouton fantôme : le gribouillis se pose derrière le texte blanc.
   L'opacité reste basse pour préserver le contraste du libellé. */
.toolbar .btn--ghost.crayon::before {
  inset: -2px;
  opacity: 0;
}

.toolbar .btn--ghost.crayon:hover::before,
.toolbar .btn--ghost.crayon:focus-visible::before {
  opacity: 0.55;
}

.toolbar .btn--ghost.crayon:hover,
.toolbar .btn--ghost.crayon:focus-visible {
  border-color: var(--crayon);
  box-shadow: none;
}

.toolbar .btn--ghost.crayon::after {
  display: none;
}

/* Bouton plein (papier sur encre) : il prend la teinte du thème */
.toolbar .btn:not(.btn--ghost).crayon:hover::before,
.toolbar .btn:not(.btn--ghost).crayon:focus-visible::before {
  opacity: 0.3;
}

.toolbar .btn:not(.btn--ghost).crayon::after {
  display: none;
}

/* =========================================================================
   6. LE FIL DE COULEUR — une bande de crayons sous la barre d'outils,
   signature visuelle de la collection (écran uniquement).
   ========================================================================= */
.fil-crayons {
  position: fixed;
  top: var(--toolbar-hauteur, 44px);
  left: 0;
  right: 0;
  z-index: 9;
  height: 5px;
  display: flex;
  pointer-events: none;
}

.fil-crayons span {
  flex: 1;
  background: currentColor;
  opacity: 0.9;
}

.fil-crayons span:first-child { border-radius: 0 3px 3px 0; }
.fil-crayons span:last-child { border-radius: 3px 0 0 3px; }

/* =========================================================================
   7. ACCESSIBILITÉ
   ========================================================================= */

/* Le focus clavier obtient EXACTEMENT le même effet que le survol
   (règles ci-dessus) — plus l'anneau de focus, jamais supprimé. */
.crayon:focus-visible,
.crayon-pastille:focus-visible,
.crayon-trait:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
}

/* Mouvement réduit : l'effet reste, le tracé animé disparaît. */
@media (prefers-reduced-motion: reduce) {
  .crayon,
  .crayon::before,
  .crayon::after,
  .crayon-trait::after,
  .crayon-pastille::before,
  .hub-carte h2::after {
    transition: none !important;
  }

  .crayon:hover,
  .crayon:focus-visible,
  .hub-carte.crayon:hover,
  .hub-carte.crayon:focus-visible {
    transform: none;
  }

  .crayon:active {
    transform: none;
  }
}

/* Contrastes forcés (Windows) : aucune décoration, le système décide. */
@media (forced-colors: active) {
  .crayon::before,
  .crayon::after,
  .crayon-trait::after,
  .crayon-pastille::before,
  .hub-carte h2::after,
  .fil-crayons {
    display: none !important;
  }

  .hub-carte.crayon:hover,
  .hub-carte.crayon:focus-visible {
    box-shadow: none;
    outline: 2px solid CanvasText;
  }
}

/* Le navigateur ne sait pas masquer : on le fait à la main. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .crayon::before,
  .crayon::after,
  .crayon-trait::after,
  .crayon-pastille::before,
  .hub-carte h2::after {
    display: none;
  }

  /* Repli sobre et parfaitement lisible : l'ombre coloriée suffit. */
  .hub-carte.crayon:hover,
  .hub-carte.crayon:focus-visible {
    box-shadow: 5px 5px 0 var(--crayon);
  }
}

/* =========================================================================
   8. IMPRESSION — la règle sacrée : jamais un gramme de couleur.
   ========================================================================= */
@media print {
  .crayon::before,
  .crayon::after,
  .crayon-trait::after,
  .crayon-pastille::before,
  .hub-carte h2::after,
  .fil-crayons {
    display: none !important;
    content: none !important;
  }

  .crayon,
  .hub-carte.crayon,
  .crayon-pastille {
    box-shadow: none !important;
    transform: none !important;
  }

  .hub-carte svg [stroke] {
    stroke: #000 !important;
  }
}