/* MyArk — thème « fiche illustrée » des fiches races (18/10/2026).
Reprend l'univers visuel du carrousel « Fiche race n°N » et de l'affiche A3 :
fond crème, cartes pastel (sable, pêche, sauge), titres arrondis vert sapin (Baloo 2),
annotations manuscrites terracotta (Caveat), icônes dans des pastilles, puces terracotta.
Chargée seulement par les fiches qui ont une fiche visuelle validée (tools/generate_breed_pages.py),
après composants.css. Contrastes vérifiés : texte terracotta ≥ 4,2:1, vert ≥ 6:1, anneaux des jauges ≥ 3:1.
NE PAS MODIFIER À LA MAIN : fichier écrit par web/source/tools/build_fiche_css.py. */
@font-face {
font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap;
src: url('../assets/fonts/baloo-2-latin-800.woff2') format('woff2');
}
@font-face {
font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../assets/fonts/caveat-latin-700.woff2') format('woff2');
}
body:has(.race--fiche) {
--fv-fond: #F5EBDC; --fv-carte: #FFF9F0; --fv-sable: #F3DFBA; --fv-peche: #F6D9C9; --fv-sauge: #E1E8D8;
--fv-vert: #13594F; --fv-vert-fonce: #0F4A42; --fv-brun: #6B4A2E; --fv-terre: #A84B24; --fv-point: #C2552B;
--fv-anneau: #7D786F; --fv-blob-1: #EBD3A9; --fv-blob-2: #DCE6D3;
--fv-ombre: 0 2px 4px rgba(107, 74, 46, .06), 0 10px 24px rgba(107, 74, 46, .10);
--fv-titre: 'Baloo 2', var(--police-titre);
--fv-main: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
/* Les composants du site prennent la teinte de la fiche. */
--fond: var(--fv-fond); --carte: var(--fv-carte); --subtil: #EFE2CC; --bord: #E6D5BB;
--lagune: var(--fv-vert); --lagune-fort: var(--fv-vert-fonce); --lagune-teinte: var(--fv-sauge);
--miel-teinte: var(--fv-peche); --alerte: var(--fv-terre);
background: var(--fv-fond);
}
@media (prefers-color-scheme: dark) {
body:has(.race--fiche) {
--fv-fond: #1B1814; --fv-carte: #25201A; --fv-sable: #3A2F20; --fv-peche: #3D2A22; --fv-sauge: #26302A;
--fv-vert: #8AD3C2; --fv-vert-fonce: #A6E0D2; --fv-brun: #D9B98F; --fv-terre: #F0A07A; --fv-point: #E58A5F;
--fv-anneau: #8A8478; --fv-blob-1: #2E261C; --fv-blob-2: #1F2822;
--fv-ombre: none;
--subtil: #2E2820; --bord: #3A3229;
}
}
/* ---------- Taches de couleur décoratives (comme les coins du carrousel) ----------
Dessinées dans le fond de la page : elles ne débordent jamais (pas de défilement horizontal). */
body:has(.race--fiche) {
background:
radial-gradient(ellipse min(46vw, 420px) 300px at calc(100% + 60px) 150px, var(--fv-blob-1) 97%, transparent 100%),
radial-gradient(ellipse min(34vw, 300px) 260px at -60px 1100px, var(--fv-blob-2) 97%, transparent 100%),
var(--fv-fond);
}
/* ---------- Typographie ---------- */
.manuscrit { font-family: var(--fv-main); font-weight: 700; letter-spacing: 0; }
.race--fiche h1, .race--fiche .prose h2, .race--fiche .section-head h2 {
font-family: var(--fv-titre); font-weight: 800; letter-spacing: -0.01em; color: var(--fv-vert); line-height: 1.08;
}
.race--fiche h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); }
.race--fiche .eyebrow { color: var(--fv-brun); }
.race--fiche .page-header { position: relative; gap: var(--s-2); }
.race--fiche .page-header .lead { margin-top: var(--s-3); }
.fiche-badge {
align-self: flex-start; padding: 2px 16px 4px; rotate: -3deg;
background: var(--fv-sable); color: var(--fv-brun); font-size: 1.5rem; line-height: 1.2;
box-shadow: 0 1px 2px rgba(107, 74, 46, .15);
}
@media (min-width: 768px) { .fiche-badge { position: absolute; top: 0; right: 0; } }
.fiche-accroche {
align-self: flex-start; margin: 0; padding-bottom: 4px;
font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.1; color: var(--fv-terre);
border-bottom: 3px solid currentColor; border-radius: 0 0 40% 60% / 0 0 6px 4px;
}
.sous-titre { margin: -8px 0 var(--s-2) !important; font-size: 1.65rem; line-height: 1.15; color: var(--fv-terre); }
/* ---------- Illustration ---------- */
.race--fiche .race-planche img {
border: 0; border-radius: var(--rayon-xl);
background: radial-gradient(ellipse at center, #FBF3E6 0%, var(--fv-fond) 75%);
}
@media (prefers-color-scheme: dark) { .race--fiche .race-planche img { background: #F4EFE6; } }
/* ---------- Fiche d'identité : cartes pastel avec pastille d'icône ---------- */
.race--fiche .identity {
background: none; border: 0; border-radius: 0; overflow: visible; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.race--fiche .identity > div {
margin: 0; border: 0; border-radius: 18px; padding: 14px 16px 16px;
background: var(--fv-sable); box-shadow: var(--fv-ombre);
}
.race--fiche .identity > div:nth-child(3n+2) { background: var(--fv-peche); }
.race--fiche .identity > div:nth-child(3n) { background: var(--fv-sauge); }
.race--fiche .identity dt { color: var(--fv-brun); }
.race--fiche .identity dd { font-family: var(--fv-titre); font-weight: 800; font-size: 1.45rem; color: var(--fv-vert); line-height: 1.15; }
.race--fiche [data-k]::before {
content: ""; display: block; width: 38px; height: 38px; flex: none; border-radius: 50%;
background: #FFF9F0 center / 20px 20px no-repeat; margin-bottom: 8px; /* pastille claire aussi en mode sombre : icône lisible */
box-shadow: 0 1px 2px rgba(107, 74, 46, .12);
}
.race--fiche [data-k="origine"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="gabarit"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="poids"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="longevite"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="pelage"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="activite"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="entretien"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="brossage"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="solitude"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="education"]::before { background-image: url("data:image/svg+xml,"); }
.race--fiche [data-k="appartement"]::before { background-image: url("data:image/svg+xml,"); }
/* ---------- Sections : grandes cartes comme des slides ---------- */
.race--fiche .article > .prose {
background: var(--fv-carte); border-radius: 28px; padding: 28px 24px 32px; box-shadow: var(--fv-ombre);
}
@media (min-width: 768px) { .race--fiche .article > .prose { padding: 36px 40px 40px; } }
.race--fiche .prose li::marker { color: var(--fv-point); }
.race--fiche .deflist { border-top-color: var(--bord); }
/* Cartes internes pastel */
.carte { border-radius: 20px; padding: 18px 20px 20px; background: var(--fv-sable); display: flex; flex-direction: column; gap: var(--s-3); }
.carte--peche { background: var(--fv-peche); }
.carte--sauge { background: var(--fv-sauge); }
.carte--creme { background: var(--fv-fond); }
.carte--centre { align-items: center; text-align: center; }
.race--fiche .carte h3 { font-family: var(--fv-main); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--fv-vert); letter-spacing: 0; }
.race--fiche .carte--peche h3 { color: var(--fv-terre); }
.carte .note { margin: 0; }
.manuscrit-note { font-family: var(--fv-main); font-weight: 700; font-size: 1.3rem; color: var(--fv-brun); }
/* Listes cochées */
.race--fiche .prose ul.coches { list-style: none; padding-left: 0; }
.coches li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.coches li::before { content: ""; width: 22px; height: 22px; margin-top: 3px; background: url("data:image/svg+xml,") center / 20px no-repeat; }
@media (prefers-color-scheme: dark) { .coches li::before { background-image: url("data:image/svg+xml,"); } }
/* Bulle de citation (voix de l'animal) */
.bulle {
position: relative; margin: 0 0 var(--s-3); padding: 18px 22px; border-radius: 22px;
background: var(--fv-fond); box-shadow: var(--fv-ombre); rotate: -.6deg;
}
.bulle::after {
content: ""; position: absolute; right: 56px; bottom: -14px; width: 28px; height: 16px;
background: inherit; clip-path: polygon(0 0, 100% 0, 70% 100%);
}
.bulle p { margin: 0; font-family: var(--fv-main); font-weight: 700; font-size: 1.6rem; line-height: 1.25; color: var(--texte); }
/* Jauges : points terracotta, pastille d'icône par ligne */
.race--fiche .gauges { border-top: 0; }
.race--fiche .gauges > div { border-bottom: 1px dashed rgba(107, 74, 46, .22); display: grid; grid-template-columns: 38px 1fr auto; column-gap: 12px; }
.race--fiche .gauges > div:last-child { border-bottom: 0; }
.race--fiche .gauges > div::before { margin: 0; }
.race--fiche .gauge__dot { width: 16px; height: 16px; background: transparent; box-shadow: inset 0 0 0 2px var(--fv-anneau); }
.race--fiche .gauge__dot.is-on { background: var(--fv-point); box-shadow: none; }
.race--fiche .gauge__value { color: var(--fv-brun); }
/* Robes */
.race--fiche .robes { justify-content: center; }
/* Couleurs des robes (vocabulaire « _robes » de data/fiches-visuelles.json) */
.robe--abricot { background: #E0A86B; }
.robe--arlequin { background: radial-gradient(circle at 30% 32%, #2B2622 0 17%, transparent 18%), radial-gradient(circle at 68% 64%, #2B2622 0 15%, transparent 16%), radial-gradient(circle at 72% 26%, #2B2622 0 9%, transparent 10%), #A9A39A; }
.robe--blanc { background: #FFFFFF; }
.robe--blenheim { background: linear-gradient(135deg, #FFFFFF 50%, #B5662E 50%); }
.robe--bleu-merle { background: radial-gradient(circle at 30% 32%, #2B2622 0 17%, transparent 18%), radial-gradient(circle at 68% 64%, #2B2622 0 15%, transparent 16%), radial-gradient(circle at 72% 26%, #2B2622 0 9%, transparent 10%), #9AA4AE; }
.robe--bleu-rouan { background: radial-gradient(#2B2622 1.5px, transparent 2px) 0 0 / 7px 7px, #A8B0B8; }
.robe--bringe { background: repeating-linear-gradient(115deg, #4A3628 0 5px, #8A6A4A 5px 9px); }
.robe--chocolat { background: #6B4128; }
.robe--citron-et-blanc { background: linear-gradient(135deg, #FFFFFF 50%, #E8C77E 50%); }
.robe--creme { background: #F3E2C0; }
.robe--dore { background: #C98F3A; }
.robe--dore-clair { background: #E5BC72; }
.robe--dore-fonce { background: #92602E; }
.robe--fauve { background: #CEA36E; }
.robe--gris { background: #8A8478; }
.robe--noir { background: #2B2622; }
.robe--noir-et-feu { background: linear-gradient(160deg, #2B2622 58%, #A0612C 58%); }
.robe--orange-rouan { background: radial-gradient(#C9772F 1.5px, transparent 2px) 0 0 / 7px 7px, #F4E6D2; }
.robe--panache { background: radial-gradient(circle at 32% 36%, #8A6A4A 0 24%, transparent 25%), #F6F0E6; }
.robe--rouge { background: #A0522C; }
.robe--rouge-et-blanc { background: linear-gradient(135deg, #FFFFFF 50%, #A0522C 50%); }
.robe--rouge-merle { background: radial-gradient(circle at 30% 32%, #7A3A22 0 17%, transparent 18%), radial-gradient(circle at 68% 64%, #7A3A22 0 15%, transparent 16%), radial-gradient(circle at 72% 26%, #7A3A22 0 9%, transparent 10%), #C98A6A; }
.robe--rubis { background: #9D3B1E; }
.robe--sable { background: #E3C390; }
.robe--tricolore { background: conic-gradient(from 200deg, #2B2622 0 40%, #A0612C 0 62%, #FFFFFF 0); }
.race--fiche .robe { width: 52px; height: 52px; box-shadow: 0 0 0 3px var(--fv-carte), 0 2px 6px rgba(107, 74, 46, .25); }
/* Encadrés : vigilance (pêche), savais-tu (sable), astuce (vert sapin) */
.race--fiche .callout {
border: 0; border-radius: 20px; padding: 18px 20px 20px 72px; position: relative; box-shadow: none;
}
.race--fiche .callout::before {
content: ""; position: absolute; left: 18px; top: 18px; width: 40px; height: 40px; border-radius: 50%;
background: #FFF9F0 center / 22px no-repeat;
}
.race--fiche .callout--warn { background: var(--fv-peche); }
.race--fiche .callout--warn::before { background-image: url("data:image/svg+xml,"); }
.race--fiche .callout--info { background: var(--fv-sable); }
.race--fiche .callout--info::before { background-image: url("data:image/svg+xml,"); }
.race--fiche .callout__label { color: var(--fv-terre); }
.race--fiche .callout--info .callout__label { color: var(--fv-brun); }
.race--fiche .callout__title { font-family: var(--fv-main); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--fv-terre); }
.race--fiche .intro > .callout--info { background: var(--fv-sauge); }
.race--fiche .intro > .callout--info .callout__label { color: var(--fv-vert); }
.race--fiche .tip { background: var(--fv-vert-fonce); border-radius: 24px; }
/* Libellés sur fond vert sapin : miel clair (contraste ≥ 7:1). */
.race--fiche :is(.tip, .app-block) :is(.eyebrow, .callout__label) { color: #F2C98A; }
@media (prefers-color-scheme: dark) { .race--fiche .tip { background: #123B35; } }
/* Le mot du jour (bandeau de l'affiche) */
.mot-du-jour {
display: grid; gap: 2px; padding: 18px 22px; border-radius: 20px;
background: #0F4A42; color: #F7F1E6;
}
.mot-du-jour .manuscrit { font-size: 1.45rem; color: #F2C98A; line-height: 1.1; }
.mot-du-jour strong { font-family: var(--fv-titre); font-weight: 800; font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.mot-du-jour p { margin: 0; font-size: var(--t-small); color: #F7F1E6; }
/* Étapes de vie */
.etapes { margin: 0; display: grid; gap: 10px; }
.etapes > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; align-items: baseline; }
.etapes dt { font-size: 1.6rem; line-height: 1; color: var(--fv-terre); }
.etapes dd { margin: 0; }
/* FAQ, galerie, affiche, fin de page */
.race--fiche .faq details { border-bottom: 1px dashed rgba(107, 74, 46, .25); }
.race--fiche .faq { border-top: 0; }
.race--fiche .fiche-visuelle .section-head h2 { font-size: var(--t-title); }
.race--fiche .fiche-print { border: 0; border-radius: 24px; box-shadow: var(--fv-ombre); background: var(--fv-sable); }
.race--fiche .fiche-print h3 { font-family: var(--fv-main); font-weight: 700; font-size: 1.9rem; color: var(--fv-vert); }
.race--fiche .app-block { background: var(--fv-vert-fonce); border-radius: 28px; }
@media (prefers-color-scheme: dark) { .race--fiche .app-block { background: #123B35; } }
.race--fiche .card { border: 0; border-radius: 22px; box-shadow: var(--fv-ombre); }
.race--fiche .toc { border: 0; border-radius: 22px; background: var(--fv-carte); box-shadow: var(--fv-ombre); }
.race--fiche .sources { border-top: 1px dashed rgba(107, 74, 46, .3); }
@media print {
body:has(.race--fiche) { background: #fff; }
.race--fiche .article > .prose, .carte, .race--fiche .identity > div { box-shadow: none; }
}