/* chien-caniche.fr
   Identité : « le pompon et la toise ».
   Les couleurs sont celles des robes du caniche (standard FCI) ; chaque rubrique porte une robe.
   Le pompon (toilette en lion) dessine les photos, les puces et le logo ; la toise d'exposition
   mesure les tailles et suit la lecture dans la marge. */
:root {
  --noir: #17141a;          /* robe noire */
  --abricot: #e3884a;       /* fauve orangé */
  --abricot-clair: #f6c9a4;
  --abricot-voile: #fdf0e6;
  --fauve-rouge: #a5402a;   /* fauve rouge */
  --marron: #5a3726;        /* marron soutenu et chaud */
  --argent: #c7ccd4;        /* gris */
  --argent-voile: #eef0f3;
  --blanc: #ffffff;
  --primary: var(--abricot);
  --primary-light: var(--abricot-clair);
  --primary-pale: var(--abricot-voile);
  --dark: var(--noir);
  --text: #1f1b22;
  --text-light: #57505c;
  --bg: var(--blanc);
  --bg-alt: var(--argent-voile);
  --border: rgba(23, 20, 26, .14);
  --shadow: rgba(23, 20, 26, .10);
  --radius: 28px;
  --max-width: 1240px;
  --robe: var(--abricot);   /* couleur de la rubrique en cours */
  --robe-voile: var(--abricot-voile);
}
.robe-varietes { --robe: var(--abricot); --robe-voile: var(--abricot-voile); }
.robe-robes    { --robe: var(--fauve-rouge); --robe-voile: #f8e7e2; }
.robe-vivre    { --robe: #7b8794; --robe-voile: var(--argent-voile); }
.robe-sante    { --robe: #2f6f6a; --robe-voile: #e3f0ee; }
.robe-adopter  { --robe: var(--marron); --robe-voile: #f3ebe6; }
.robe-race     { --robe: var(--noir); --robe-voile: #ece9ee; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Albert Sans', system-ui, sans-serif; font-weight: 400; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fauve-rouge); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--fauve-rouge) 40%, transparent); }
a:hover { color: var(--noir); text-decoration-color: var(--abricot); }
:focus-visible { outline: 3px solid var(--abricot); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: 'Gloock', Georgia, serif; font-weight: 400; color: var(--noir); line-height: 1.12; text-wrap: pretty; letter-spacing: -.005em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); margin: .15em 0 .35em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin: 2.4em 0 .55em; }
h3 { font-family: 'Albert Sans', sans-serif; font-weight: 800; font-size: 1.12rem; margin: 1.7em 0 .35em; letter-spacing: 0; }
p, li { font-size: 1.06rem; }
strong { font-weight: 700; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- En-tête ---------- */
.entete { display: flex; align-items: center; gap: 1.5rem; padding: .7rem clamp(16px, 4vw, 56px); background: var(--blanc); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); }
.entete-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--noir); font-family: 'Gloock', serif; font-size: 1.45rem; line-height: 1; }
.entete-logo em { font-style: normal; color: var(--abricot); }
.logo-silhouette { width: auto; height: 46px; flex: none; display: block; }
.entete-nav { margin-left: auto; }
.entete-nav ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.entete-nav a { display: block; color: var(--noir); text-decoration: none; font-weight: 600; font-size: .93rem; padding: .45rem .85rem; border-radius: 999px; }
.entete-nav a:hover, .entete-nav a[aria-current] { background: var(--abricot-voile); color: var(--fauve-rouge); }
.entete-menu { display: none; margin-left: auto; font: inherit; font-weight: 700; background: var(--noir); color: #fff; border: 0; border-radius: 999px; padding: .4rem 1.1rem; min-height: 44px; }

/* ---------- Mise en page des articles : toise en marge + texte ---------- */
main { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.fil-laisse ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 1.3rem 0 0; }
.fil-laisse li { font-size: .88rem; color: var(--text-light); }
.fil-laisse li + li::before { content: ""; display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--robe); margin: 0 .5rem .12rem .15rem; }
.fil-laisse a { color: var(--text-light); text-decoration: none; }
.fil-laisse a:hover { color: var(--noir); text-decoration: underline; }

.ouverture { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin: 1.2rem 0 2.5rem; }
.ouverture-texte .rubrique { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; color: var(--robe); text-decoration: none; }
.ouverture-texte .rubrique::before { content: ""; margin-right: .55rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--robe); box-shadow: .55rem .25rem 0 -.18rem var(--robe-voile), .55rem .25rem 0 -.08rem var(--robe); }
.chapeau { font-size: 1.24rem; line-height: 1.62; color: var(--text); margin: 0; }
.ouverture-photo img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--radius); }
.lecture { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.marge { position: sticky; top: 92px; padding-top: 2.6rem; }
.marge-titre { font-family: 'Gloock', serif; font-size: 1.05rem; margin: 0 0 .7rem; color: var(--noir); }
.marge ol { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--noir); position: relative; }
.marge li { font-size: .9rem; line-height: 1.35; margin: 0 0 .85rem; position: relative; }
.marge li::before { content: ""; position: absolute; left: -1.1rem; top: .55em; width: .55rem; height: 2px; background: var(--noir); }
.marge a { color: var(--text-light); text-decoration: none; display: block; }
.marge a:hover, .marge a.ici { color: var(--noir); font-weight: 700; }
.marge-curseur { position: absolute; left: -7px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--robe); border: 2px solid var(--blanc); box-shadow: 0 0 0 2px var(--robe); transition: top .25s ease; }
.texte { min-width: 0; }
.texte > h2:first-child { margin-top: 1.2em; }

/* ---------- Photos ---------- */
.cliche { margin: 2rem 0; }
.cliche img { border-radius: var(--radius); width: 100%; object-fit: cover; }
.cliche-large img { max-height: 600px; }
.cliche-portrait { float: right; width: min(44%, 400px); margin: .5rem 0 1.4rem 2rem; }
.cliche figcaption { font-size: .93rem; color: var(--text-light); margin-top: .6rem; line-height: 1.5; }
.duo-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem 0; }
.duo-photos .cliche { margin: 0; }
.duo-photos img { aspect-ratio: 4 / 3.4; }

/* ---------- Carte d'identité : le ruban de concours ---------- */
.carte-identite { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0 0 2rem; background: var(--noir); color: #fff; border-radius: var(--radius); padding: .6rem; gap: .6rem; }
.carte-identite div { padding: 1rem 1.1rem; border-radius: calc(var(--radius) - 10px); background: rgba(255, 255, 255, .06); }
.carte-identite dt { font-weight: 700; font-size: .85rem; color: var(--abricot-clair); }
.carte-identite dd { margin: .25rem 0 0; font-size: 1rem; line-height: 1.45; }

/* ---------- La toise ---------- */
.schema { margin: 2.2rem 0; background: var(--argent-voile); border-radius: var(--radius); padding: 1.4rem 1.4rem 1rem; }
.schema figcaption { font-size: .93rem; color: var(--text-light); margin-top: .5rem; }
.toise, .schema svg { width: 100%; height: auto; display: block; }
.toise-trait, .toise-sol { stroke: var(--noir); stroke-width: 1.5; }
.toise-cm { font: 12px Arial, sans-serif; fill: var(--text-light); }
.toise-plage { fill: var(--abricot-clair); }
.toise-socle { fill: #d9dce2; }
.toise-nom { font: 700 15px Arial, sans-serif; fill: var(--noir); }
.toise-val { font: 13px Arial, sans-serif; fill: var(--text-light); }
.toise-actif .toise-plage { fill: var(--abricot); }
.toise-actif .toise-socle { fill: var(--noir); }
.toise-actif .toise-val { fill: var(--noir); font-weight: 700; }

/* ---------- Encarts ---------- */
.encart { margin: 2rem 0; padding: 1.3rem 1.5rem 1.3rem 4.2rem; border-radius: var(--radius); background: var(--robe-voile); position: relative; }
.encart::before { content: ""; position: absolute; left: 1.4rem; top: 1.45rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--robe); box-shadow: .7rem .35rem 0 -.25rem var(--robe-voile), .7rem .35rem 0 -.12rem var(--robe); }
.encart-attention { background: #fbe5df; }
.encart-attention::before { background: var(--fauve-rouge); box-shadow: .7rem .35rem 0 -.25rem #fbe5df, .7rem .35rem 0 -.12rem var(--fauve-rouge); }
.encart-titre { font-family: 'Gloock', serif; font-size: 1.22rem; margin: 0 0 .35rem; color: var(--noir); }
.encart p:last-child, .encart ul:last-child { margin-bottom: 0; }

/* ---------- Listes ---------- */
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.5rem 0; }
.deux-colonnes > div { background: var(--argent-voile); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.deux-colonnes > div:last-child { background: var(--robe-voile); }
.deux-colonnes h3 { margin-top: .2rem; }
.liste-pompons { list-style: none; padding: 0; margin: .6rem 0; }
.liste-pompons li { position: relative; padding-left: 1.75rem; margin: .5rem 0; }
.liste-pompons li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .78rem; height: .78rem; border-radius: 50%; background: var(--robe); box-shadow: .38rem .2rem 0 -.16rem #fff, .38rem .2rem 0 -.08rem var(--robe); }
.etapes { counter-reset: e; list-style: none; padding: 0; }
.etapes > li { counter-increment: e; position: relative; padding-left: 3.4rem; margin: 1.2rem 0; }
.etapes > li::before { content: counter(e); position: absolute; left: 0; top: -.15rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--robe); color: #fff; font-family: 'Gloock', serif; display: grid; place-items: center; font-size: 1.15rem; }

/* ---------- Tableaux ---------- */
.tableau-defile { overflow-x: auto; margin: 1.8rem 0; border-radius: var(--radius); border: 1.5px solid var(--noir); }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; font-size: .98rem; }
thead th { background: var(--noir); color: #fff; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 700; }
td.chiffre { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Questions ---------- */
.questions, .sources, .pistes { grid-column: 2; }
.questions { margin-top: 3.5rem; }
.questions h2 { margin-top: 0; }
.question { border-top: 1.5px solid var(--noir); }
.question:last-of-type { border-bottom: 1.5px solid var(--noir); }
.question summary { cursor: pointer; font-weight: 700; padding: 1.05rem 3rem 1.05rem 0; list-style: none; position: relative; font-size: 1.08rem; }
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 1.3rem; height: 1.3rem; margin-top: -.65rem; border-radius: 50%; border: 2px solid var(--robe); transition: background .2s; }
.question[open] summary::after { background: var(--robe); }
.reponse { padding: 0 0 1rem; }

/* ---------- Sources ---------- */
.sources { margin-top: 3rem; padding: 1.5rem 1.6rem; border-radius: var(--radius); border: 1.5px dashed var(--argent); }
.sources h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.sources ul { padding-left: 1.1rem; margin: 0; }
.sources li { font-size: .94rem; margin: .3rem 0; line-height: 1.5; }
.sources-date { font-size: .9rem; color: var(--text-light); margin: .8rem 0 0; }

/* ---------- À lire ensuite ---------- */
.pistes { margin: 3.5rem 0 1rem; }
.pistes-titre { font-family: 'Gloock', serif; font-size: 1.6rem; color: var(--noir); margin: 0 0 1rem; }
.pistes ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; }
.pistes a { display: block; text-decoration: none; color: var(--noir); font-weight: 700; line-height: 1.35; }
.pistes img { border-radius: 20px; aspect-ratio: 16 / 11; object-fit: cover; width: 100%; margin-bottom: .6rem; transition: border-radius .3s; }
.pistes a:hover img { opacity: .85; }
.pistes a:hover span { text-decoration: underline; text-decoration-color: var(--abricot); }

/* ---------- Outils ---------- */
.outil { margin: 2.4rem 0; padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--radius); background: var(--noir); color: #fff; }
.outil-titre { font-family: 'Gloock', serif; font-size: 1.6rem; margin: 0 0 .3rem; color: #fff; }
.outil-intro { color: #ddd6e0; margin-top: 0; }
.outil-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem 1.2rem; margin-top: 1rem; }
.outil label { display: block; font-weight: 700; margin: 0 0 .35rem; font-size: .98rem; }
.outil input, .outil select { font: inherit; color: var(--noir); padding: .55rem .9rem; border: 0; border-radius: 999px; min-height: 48px; width: 100%; background: #fff; }
.outil-choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.outil-choix label { margin: 0; font-weight: 600; }
.outil-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.outil-choix span { display: inline-block; padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4); cursor: pointer; min-height: 44px; }
.outil-choix input:checked + span { background: var(--abricot); border-color: var(--abricot); color: var(--noir); }
.outil-choix input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.outil-resultat { margin-top: 1.4rem; padding: 1.2rem 1.4rem; background: #fff; color: var(--text); border-radius: calc(var(--radius) - 8px); font-size: 1.05rem; }
.outil-resultat .grand-chiffre { display: block; font-family: 'Gloock', serif; font-size: clamp(2rem, 5vw, 2.8rem); color: var(--noir); line-height: 1.1; }
.outil-resultat p { margin: .4rem 0 0; }
.outil-note { font-size: .88rem; color: #cfc6d3; margin: .9rem 0 0; }

/* ---------- Boutons : le ruban ---------- */
.ruban { display: inline-flex; align-items: center; gap: .6rem; background: var(--noir); color: #fff; text-decoration: none; font-weight: 700; padding: .8rem 2.1rem .8rem 1.4rem; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); min-height: 48px; }
.ruban:hover { background: var(--fauve-rouge); color: #fff; }
.ruban-clair { background: var(--abricot); color: var(--noir); }

/* ---------- Pied de page ---------- */
.pied { background: var(--noir); color: #ece6ee; margin-top: 5rem; position: relative; }
.pied-robes { display: flex; height: 10px; }
.pied-robes span { flex: 1; }
.pied-dedans { max-width: var(--max-width); margin: 0 auto; padding: 3rem clamp(16px, 4vw, 56px) 1.5rem; display: grid; grid-template-columns: 1.1fr 3fr; gap: 2.5rem; }
.pied-signature { font-family: 'Gloock', serif; font-size: 1.7rem; line-height: 1.2; color: #fff; margin: 0; }
.pied-signature + p { color: #c9c0cd; font-size: .98rem; }
.pied a { color: #ece6ee; text-decoration: none; }
.pied a:hover { color: var(--abricot-clair); text-decoration: underline; }
.pied-rubriques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.5rem; }
.pied-titre { font-weight: 800; color: var(--abricot-clair); margin: 0 0 .35rem; font-size: .98rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { font-size: .95rem; margin: .2rem 0; }
.pied-bas { max-width: var(--max-width); margin: 0 auto; padding: 1rem clamp(16px, 4vw, 56px) 1.6rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* ---------- Accueil ---------- */
.une { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem) 0 1rem; }
.une h1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); margin-top: 0; }
.une h1 em { font-style: normal; color: var(--abricot); }
.une-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-top: 1.6rem; }
.une-actions a:not(.ruban) { font-weight: 700; color: var(--noir); }
.grappe { position: relative; aspect-ratio: 1 / .92; }
.grappe figure { position: absolute; margin: 0; }
.grappe img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.grappe .g1 { width: 58%; aspect-ratio: 1; left: 18%; top: 0; }
.grappe .g2 { width: 38%; aspect-ratio: 1; left: 0; bottom: 2%; }
.grappe .g3 { width: 44%; aspect-ratio: 1; right: 0; bottom: 0; }
.grappe .g1 img { box-shadow: 0 0 0 10px #fff; }
.grappe .g2 img, .grappe .g3 img { box-shadow: 0 0 0 10px #fff; }
.grappe-credit { position: absolute; right: 0; bottom: -1.6rem; font-size: .74rem; color: var(--text-light); margin: 0; }

.bande { margin: 4.5rem 0 0; }
.bande-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.4rem; }
.bande-tete h2 { margin: 0; }
.bande-tete p { margin: 0; color: var(--text-light); }

.quatre-tailles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: end; }
.taille-carte { text-decoration: none; color: var(--noir); display: block; text-align: center; }
.taille-carte img { width: 100%; object-fit: cover; border-radius: 22px; background: var(--argent-voile); }
.taille-carte:nth-child(1) img { aspect-ratio: 1 / 1.05; }
.taille-carte:nth-child(2) img { aspect-ratio: 1 / 1.2; }
.taille-carte:nth-child(3) img { aspect-ratio: 1 / 1.38; }
.taille-carte:nth-child(4) img { aspect-ratio: 1 / 1.6; }
.taille-carte strong { display: block; font-family: 'Gloock', serif; font-weight: 400; font-size: 1.55rem; margin-top: .7rem; }
.taille-carte span { color: var(--text-light); font-size: .95rem; }
.taille-carte:hover strong { color: var(--fauve-rouge); }
.toise-bas { height: 26px; margin-top: .9rem; border-top: 2px solid var(--noir); background: repeating-linear-gradient(90deg, var(--noir) 0 1.5px, transparent 1.5px 20px) top / 100% 10px no-repeat; }

.nuancier { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.nuance { text-decoration: none; color: var(--noir); }
.nuance i { display: block; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); position: relative; }
.nuance i::after { content: ""; position: absolute; width: 46%; height: 46%; right: -6%; bottom: -6%; border-radius: 50%; background: inherit; box-shadow: 0 0 0 5px #fff; }
.nuance b { display: block; margin-top: .7rem; font-weight: 700; }
.nuance small { color: var(--text-light); font-size: .88rem; }
a.nuance:hover b { color: var(--fauve-rouge); text-decoration: underline; }

.mosaique { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.tuile { grid-column: span 4; text-decoration: none; color: var(--noir); border-radius: var(--radius); background: var(--argent-voile); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; transition: transform .2s, background .2s; }
.tuile:hover { background: var(--robe-voile); transform: translateY(-3px); }
.tuile strong { font-family: 'Gloock', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.tuile span { color: var(--text-light); font-size: .97rem; line-height: 1.5; }
.tuile-photo { grid-column: span 6; padding: 0; overflow: hidden; background: var(--noir); color: #fff; min-height: 280px; position: relative; }
.tuile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .3s; }
.tuile-photo:hover { background: var(--noir); }
.tuile-photo:hover img { opacity: .55; }
.tuile-photo div { position: relative; margin-top: auto; padding: 1.4rem; background: linear-gradient(transparent, rgba(23, 20, 26, .85)); }
.tuile-photo span { color: #eee; }
.tuile-photo div strong, .tuile-photo div span { display: block; }
.tuile-photo div strong { margin-bottom: .25rem; }

.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background: var(--noir); color: #fff; border-radius: var(--radius); padding: 1.6rem; }
.chiffres div { padding: .4rem .8rem; border-left: 2px solid var(--abricot); }
.chiffres b { display: block; white-space: nowrap; font-family: 'Gloock', serif; font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; color: var(--abricot-clair); }
.chiffres span { font-size: .95rem; color: #ddd6e0; line-height: 1.45; display: block; margin-top: .2rem; }

/* ---------- Responsive ---------- */
/* Histogramme des prix relevés : une barre par tranche, hauteur = nombre d'annonces. */
.barres { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: .5rem; align-items: end; height: 260px; padding: 1rem 0 0; border-bottom: 2px solid var(--noir); }
.barres div { position: relative; height: calc(var(--v) * 100% / var(--max, 8)); background: var(--robe-voile); border-radius: 12px 12px 0 0; box-shadow: inset 0 3px 0 var(--robe); }
.barres div.fort { background: var(--robe); }
.barres b { position: absolute; top: -1.7rem; left: 0; right: 0; text-align: center; font-family: 'Gloock', serif; font-weight: 400; font-size: 1.25rem; color: var(--noir); }
.barres-legende span { white-space: nowrap; }
.barres-legende { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: .5rem; margin: .5rem 0 0; font-size: .86rem; color: var(--text-light); text-align: center; line-height: 1.3; }

@media (max-width: 980px) {
  .lecture { grid-template-columns: 1fr; }
  .marge { display: none; }
  .questions, .sources, .pistes { grid-column: 1; }
  .pied-dedans { grid-template-columns: 1fr; }
  .tuile, .tuile-photo { grid-column: span 6; }
}
@media (max-width: 760px) {
  .entete-menu { display: block; }
  .entete-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--blanc); border-bottom: 1px solid var(--border); padding: .8rem 16px 1rem; }
  .entete-nav.ouvert { display: block; }
  .entete-nav ul { flex-direction: column; gap: .2rem; }
  .ouverture, .une { grid-template-columns: 1fr; }
  .ouverture-photo { max-width: 420px; }
  .deux-colonnes, .duo-photos { grid-template-columns: 1fr; }
  .cliche-portrait { float: none; width: 100%; margin: 1.6rem 0; }
  .quatre-tailles { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .nuancier { grid-template-columns: repeat(3, 1fr); }
  .tuile, .tuile-photo { grid-column: span 12; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .pied-rubriques { grid-template-columns: 1fr 1fr; }
  .encart { padding-left: 1.4rem; padding-top: 3.4rem; }
}
@media (max-width: 520px) { .chiffres { padding: 1.1rem .8rem; gap: .8rem .5rem; } .chiffres div { padding: .2rem .55rem; } .chiffres b { font-size: clamp(1.25rem, 6.4vw, 1.55rem); } .barres { height: 200px; gap: .25rem; } .barres b { font-size: 1rem; } .barres-legende { font-size: .72rem; gap: .25rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Gamme des fauves : un dégradé continu, le beige (non admis) hachuré à gauche. */
.gamme { margin: 3.2rem 0 2rem; }
.gamme-bande { position: relative; height: 64px; border-radius: 999px; background: repeating-linear-gradient(135deg, #e9dfd2 0 6px, #fbf8f4 6px 12px) 0 0 / 14% 100% no-repeat, linear-gradient(90deg, #f1c79a 14%, #e3884a 57%, #a5402a 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.gamme-hors { position: absolute; left: 0; width: 14%; bottom: 100%; margin-bottom: .45rem; font-size: .8rem; color: var(--text-light); text-align: center; line-height: 1.25; }
.gamme-repere { position: absolute; top: -10px; bottom: -10px; width: 3px; margin-left: -1.5px; background: var(--noir); border-radius: 2px; font-size: 0; }
.gamme figcaption { display: flex; justify-content: space-between; margin: .5rem 0 0 14%; font-weight: 700; font-size: .95rem; color: var(--noir); }
.gamme figcaption span:nth-child(2) { color: var(--fauve-rouge); }
@media (max-width: 520px) { .gamme figcaption { font-size: .78rem; gap: .4rem; } .gamme figcaption span { flex: 1; text-align: center; } .gamme figcaption span:first-child { text-align: left; } .gamme figcaption span:last-child { text-align: right; } .gamme-hors { font-size: .68rem; } }

/* Pages utilitaires (mentions, crédits, 404) */
.page-utile { padding: 1.5rem 0 3rem; }