/* Design system v3 -- composants. Dépend de tokens.css. Classes préfixées cc-. */

/* Base */
.cc-base { background: var(--cc-papier); color: var(--cc-texte); font: 400 var(--cc-t-body)/var(--cc-lh-texte) var(--cc-font-texte); -webkit-font-smoothing: antialiased; }
.cc-titre { font-family: var(--cc-font-titre); font-weight: 400; letter-spacing: var(--cc-ls-titre); line-height: var(--cc-lh-titre); }
.cc-label { font: 600 var(--cc-t-label)/1 var(--cc-font-texte); letter-spacing: var(--cc-ls-label); text-transform: uppercase; }

/* Logo : cellule a³ + nom, dans un cadre à filet. Taille pilotée par font-size. */
.cc-logo { display: inline-flex; align-items: stretch; border: var(--cc-filet); color: var(--cc-encre); font-family: var(--cc-font-titre); line-height: 1; white-space: nowrap; }
.cc-logo__symbole { display: flex; align-items: center; padding: .2em .45em .1em; border-right: var(--cc-filet); }
.cc-logo__exp { font-family: var(--cc-font-texte); font-weight: 600; font-size: .6em; line-height: 0; color: var(--cc-stylo); margin-left: .06em; position: relative; top: -.5em; }
.cc-logo__nom { display: flex; align-items: center; padding: .3em .55em .2em; }
.cc-logo--symbole .cc-logo__symbole { border-right: 0; padding: .25em .5em .15em; }
.cc-logo--symbole .cc-logo__nom { display: none; }
.cc-logo--mono .cc-logo__exp { color: inherit; }
.cc-logo--inverse { color: var(--cc-papier); border-color: var(--cc-papier); }
.cc-logo--inverse .cc-logo__symbole { border-right-color: var(--cc-papier); }
.cc-logo--inverse .cc-logo__exp { color: var(--cc-stylo-sur-encre); }

/* Bande de spécifications : une ligne de cases à filets. Chaque case = un libellé + une valeur optionnelle. */
.cc-band { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--cc-filet); }
.cc-band--auto { grid-auto-columns: auto; }
.cc-band__case { padding: 10px 12px; border-right: var(--cc-filet); min-width: 0; }
.cc-band__case:last-child { border-right: 0; }
.cc-band__case--large { grid-column: span 2; }
.cc-band__v { display: block; margin-top: 7px; font: 400 17px/1.15 var(--cc-font-titre); letter-spacing: 0; text-transform: none; color: var(--cc-encre); font-variant-numeric: lining-nums; }
.cc-band__case--jaune { background: var(--cc-jaune); }
.cc-band--empile { grid-auto-flow: row; }
.cc-band--empile .cc-band__case { border-right: 0; border-bottom: var(--cc-filet); }
.cc-band--empile .cc-band__case:last-child { border-bottom: 0; }

/* Cartouche : un titre au-dessus d'une bande (en-têtes de documents, fiches). */
.cc-cartouche { border: var(--cc-filet); }
.cc-cartouche__titre { padding: 16px 16px 14px; border-bottom: var(--cc-filet); }
.cc-cartouche .cc-band { border: 0; }

/* Boutons */
.cc-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: var(--cc-r-pill); padding: 13px 22px; font: 500 15px/1 var(--cc-font-texte); text-decoration: none; cursor: pointer; border: 1.2px solid var(--cc-encre); transition: background-color .15s, color .15s; }
.cc-btn--primaire { background: var(--cc-encre); color: var(--cc-papier); }
.cc-btn--primaire:hover { background: var(--cc-encre-survol); border-color: var(--cc-encre-survol); }
.cc-btn--secondaire { background: transparent; color: var(--cc-encre); }
.cc-btn--secondaire:hover { background: var(--cc-papier-2); }
.cc-btn:focus-visible, .cc-lien:focus-visible { outline: none; box-shadow: var(--cc-focus); }
.cc-btn[disabled], .cc-btn--desactive { background: transparent; color: var(--cc-desactive); border-color: var(--cc-desactive); cursor: not-allowed; }
.cc-lien { color: var(--cc-encre); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.cc-lien:hover { color: var(--cc-stylo); }

/* Cartes */
.cc-carte { background: var(--cc-papier); border: var(--cc-filet-doux); border-radius: var(--cc-r-2); padding: 24px; }
.cc-carte--spec { border: var(--cc-filet); border-radius: var(--cc-r-0); padding: 0; }
.cc-carte--spec > .cc-band { border: 0; border-bottom: var(--cc-filet); }
.cc-carte--spec > .cc-carte__corps { padding: 20px; }

/* Tag : une case de bande isolée. */
.cc-tag { display: inline-block; border: var(--cc-filet-fin); padding: 6px 9px; }

/* Annotation manuscrite au stylo bleu, avec flèche SVG optionnelle (cf. specimens.html). */
.cc-note { font: 400 var(--cc-t-note)/1.2 var(--cc-font-note); color: var(--cc-stylo); display: inline-flex; align-items: center; gap: 8px; transform: rotate(-3deg); }
.cc-note--plat { transform: none; }
.cc-note svg { flex: none; }
.cc-note path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Surlignage : aplat bleu pâle sous quelques mots, jamais plus d'une ligne. */
.cc-surligne { background: var(--cc-bleu-pale); padding: 2px 6px; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Illustration au feutre : image calée sur le papier, aucun cadre visible. */
.cc-illu { display: block; max-width: 100%; height: auto; border-radius: var(--cc-r-1); }

/* Pointeur de souris (piste B, tranchée le 2026-10-01). Seulement avec une vraie souris ; rien sur mobile.
   Flèche encre bordée papier par défaut, petit rond à point stylo sur ce qui se clique, curseur texte du système sur le texte.
   Repli : le pointeur du système si le dessin ne charge pas. Aucun script. Sources : tests/pointeur/*.svg */
:root {
  --cc-pointeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 2.5v16.2l4.3-3.8 2.9 6.3 2.6-1.1-2.8-6.2h5.8z' fill='%231E1E1C' stroke='%23FAF8F4' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, default;
  --cc-pointeur-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='%23FAF8F4' fill-opacity='.55' stroke='%231E1E1C' stroke-width='1.4'/%3E%3Ccircle cx='14' cy='14' r='3' fill='%232446C8'/%3E%3C/svg%3E") 14 14, pointer;
  --cc-pointeur-slider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='15' fill='%23FAF8F4' stroke='%231E1E1C' stroke-width='1.5'/%3E%3Cpath d='M10 18h16M10 18l4-4M10 18l4 4M26 18l-4-4M26 18l-4 4' fill='none' stroke='%232446C8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 18 18, ew-resize;
}
@media (hover: hover) and (pointer: fine) {
  .cc-base { cursor: var(--cc-pointeur); }
  .cc-base :is(p, li, h1, h2, h3, h4, blockquote, td, .cc-titre) { cursor: text; } /* avant les liens : un lien dans un paragraphe garde le rond */
  .cc-base :is(a, button, .cc-btn, [role=button], label[for], summary, select) { cursor: var(--cc-pointeur-lien); }
  .cc-base :is(input[type=text], input[type=email], textarea) { cursor: text; }
  .cc-base :is(.cc-btn[disabled], .cc-btn--desactive, button[disabled]) { cursor: not-allowed; }
  .cc-slider { cursor: var(--cc-pointeur-slider); }
}