/* ═══════════════════════════════════════════════════════════════════════
   TERRES DE VENT : l'identité du site, par-dessus la base héritée (main.css)
   Refonte du 30/09/2026. Demande de Valentin : « je veux pas que ça soit un
   copier-coller » du site Un Poil Craquant.

   Ce qui change : palette Améthyste + Framboise, Gabarito (titres) et
   Nunito Sans (texte), photos en arche, collines et lignes de vent à la
   place des pattes et des os, un accueil réorganisé (front-page.php, classes
   tdv-*), des en-têtes de pages clairs.
   Changer de palette = changer les jetons ci-dessous, rien d'autre.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --brand:        #2E1552;   /* violet profond : titres, bandeau du soir */
  --brand-dark:   #1E0B3A;   /* nuit : pied de page */
  --brand-light:  #4A2A7A;
  --action:       #8438D8;   /* Améthyste : boutons, liens */
  --action-dark:  #6A26B8;
  --action-light: #F4ECFE;   /* fond teinté */
  --accent:       #FF4F9A;   /* Framboise : touches rares (surlignage, étiquette, vent) */
  --off-white:    #FDFAFF;
  --gray-light:   #F6F1FC;
  --gray:         #E6DCF3;
  --text:         #281F38;
  --text-light:   #6C6082;

  --colline-loin:  #D8C3F6;  /* collines du fond, plus foncées : effet de brume */
  --colline-milieu:#EADCFC;

  --font-heading: 'Gabarito', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 12px;         /* les boutons ne sont plus des pilules */
  --arche:     999px 999px 18px 18px;

  --shadow-sm: 0 1px 2px rgba(46, 21, 82, 0.06);
  --shadow:    0 10px 30px -18px rgba(46, 21, 82, 0.35);
  --shadow-lg: 0 24px 48px -24px rgba(46, 21, 82, 0.4);
  --shadow-hover: 0 18px 40px -20px rgba(46, 21, 82, 0.45);
}

body {
  background-color: var(--off-white);
  font-size: 1.0625rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--brand);
}
h3, h4 { font-weight: 700; letter-spacing: -0.01em; }

/* ── Boutons et liens ───────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.9rem 1.6rem;
}
.btn--primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-dark); border-color: var(--action-dark); transform: translateY(-1px); }
.btn--secondary { border-color: var(--brand); color: var(--brand); }
.btn--brand { background: var(--brand); border-color: var(--brand); }

.tdv-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--action-dark);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.25s ease;
}
.tdv-lien::after { content: "→"; transition: transform 0.25s ease; }
.tdv-lien:hover { background-size: 100% 2px; }
.tdv-lien:hover::after { transform: translateX(3px); }
.tdv-lien--clair { color: #fff; }

.tdv-surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--action);
}
.tdv-surtitre::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.tdv-centre { text-align: center; margin-top: 2.5rem; }

/* ── Motifs : collines et vent ──────────────────────────────────────── */
.collines { display: block; width: 100%; height: clamp(60px, 9vw, 150px); }
.collines__1 { fill: var(--colline-loin); }
.collines__2 { fill: var(--colline-milieu); }
.collines__3 { fill: var(--off-white); }

.vent { display: block; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.vent path { stroke-dasharray: 6 0; }
.vent path:first-child { stroke: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .vent path { stroke-dasharray: 160 40; animation: tdv-souffle 7s linear infinite; }
  .vent path:nth-child(2) { animation-duration: 9s; }
  .vent path:nth-child(3) { animation-duration: 11s; }
}
@keyframes tdv-souffle { to { stroke-dashoffset: -400; } }

/* ── Arche : le cadre photo de la marque ────────────────────────────── */
.tdv-arche {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: var(--arche);
  overflow: hidden;
  background: linear-gradient(180deg, var(--colline-milieu), var(--action-light));
}
.tdv-arche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdv-arche__vide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  background: linear-gradient(180deg, #EFE3FE 0%, #F8F2FF 70%);
}
.tdv-arche__vent { width: 34%; color: var(--action); opacity: 0.8; margin-top: -12%; }
.tdv-arche__libelle {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-light);
}
.tdv-arche__collines { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; }
.tdv-arche__collines .collines__1, .tdv-photo-vide__collines .collines__1 { fill: #CDB0F4; }
.tdv-arche__collines .collines__2, .tdv-photo-vide__collines .collines__2 { fill: #B48CEB; }
.tdv-arche__collines .collines__3, .tdv-photo-vide__collines .collines__3 { fill: #8F62D6; }

/* Photo vide d'une carte ou d'une fiche (tdv_photo_vide) : le paysage de
   l'arche, dans la forme du conteneur. Garde la classe img-placeholder de
   main.css pour les règles de mise en page propres à chaque conteneur. */
.tdv-photo-vide {
  position: relative;
  overflow: hidden;
  min-height: 0;
  gap: 0.7rem;
  padding-bottom: 18%;
  font-size: 1rem;
  background: linear-gradient(180deg, #EFE3FE 0%, #F8F2FF 70%);
  container-type: inline-size;
}
.tdv-photo-vide__vent { width: 30%; max-width: 130px; color: var(--action); opacity: 0.8; }
.tdv-photo-vide__libelle {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-light);
}
.tdv-photo-vide .tdv-photo-vide__collines { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; }
/* Vignette étroite (barre latérale, 52 px) : seulement le fond et les collines. */
@container (max-width: 140px) {
  .tdv-photo-vide__vent, .tdv-photo-vide__libelle { display: none; }
}
/* La fiche est carrée : l'emplacement vide la remplit au lieu d'un 4/3. */
.dog-gallery__main .tdv-photo-vide { aspect-ratio: auto; height: 100%; }

/* ── En-tête du site ────────────────────────────────────────────────── */
.site-header { background: rgba(253, 250, 255, 0.94); border-bottom-color: transparent; }
.site-header.scrolled { box-shadow: 0 8px 24px -18px rgba(46, 21, 82, 0.5); }
.site-logo__wordmark {
  display: grid;
  line-height: 1;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.site-logo__wordmark small {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 0.2rem;
}
.nav-primary a { font-weight: 700; color: var(--brand); border-radius: var(--radius-sm); }
.nav-primary a:hover { background: var(--action-light); color: var(--action-dark); }
.header-cta .btn { padding: 0.65rem 1.2rem; font-size: 0.9rem; }

/* ── Héros de l'accueil ─────────────────────────────────────────────── */
.tdv-hero {
  position: relative;
  padding-top: calc(72px + clamp(2rem, 6vw, 4.5rem));
  background: linear-gradient(180deg, var(--action-light) 0%, #F8F2FF 55%, var(--off-white) 100%);
  overflow: hidden;
}
.tdv-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.tdv-hero__titre {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.tdv-hero__desc { font-size: 1.15rem; color: var(--text-light); max-width: 40ch; margin: 0 0 2rem; }
.tdv-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.tdv-hero__photo { position: relative; margin: 0; justify-self: center; width: min(100%, 440px); }
.tdv-arche--grande { box-shadow: var(--shadow-lg); }
.tdv-hero__vent {
  position: absolute;
  width: 46%;
  top: 6%;
  right: -18%;
  color: var(--action);
  z-index: 2;
}
.tdv-etiquette {
  position: absolute;
  left: -1.2rem;
  bottom: 12%;
  background: var(--accent);
  color: var(--brand);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transform: rotate(-3deg);
}
.tdv-hero__collines { margin-top: clamp(-40px, -3vw, -20px); position: relative; z-index: 0; }

/* ── Sections ───────────────────────────────────────────────────────── */
.tdv-section { padding-block: clamp(4rem, 8vw, 6.5rem); }
.tdv-section--teinte { background: var(--action-light); }
.tdv-entete { text-align: center; max-width: 62ch; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.tdv-entete h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin: 0 0 1rem; text-wrap: balance; }
.tdv-entete p:not(.tdv-surtitre) { color: var(--text-light); margin: 0; }

/* Races : trois fiches, photo en arche et trois repères */
.tdv-races { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.tdv-race { display: flex; flex-direction: column; gap: 1rem; }
.tdv-race__lien { display: block; border-radius: var(--arche); }
.tdv-race__lien .tdv-arche { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.tdv-race__lien:hover .tdv-arche { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.tdv-race__nom { font-size: 1.6rem; margin: 0.4rem 0 0; }
.tdv-race__fiche { margin: 0; display: grid; gap: 0.1rem; border-top: 2px solid var(--gray); }
.tdv-race__fiche div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--gray);
}
.tdv-race__fiche dt { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); padding-top: 0.15rem; }
.tdv-race__fiche dd { margin: 0; color: var(--text); }
.tdv-race .tdv-lien { align-self: flex-start; margin-top: auto; padding-top: 0.25rem; }

/* Adoption : une vraie suite, reliée par une ligne de vent */
.tdv-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  position: relative;
}
/* La ligne va du premier numéro au dernier, pas au-delà */
.tdv-etapes::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  right: calc((100% - 6rem) / 4 - 1.6rem);
  border-top: 2px dashed var(--colline-loin);
}
.tdv-etape { position: relative; }
.tdv-etape__num {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 1.1rem;
  box-shadow: 0 0 0 6px var(--action-light);
  position: relative;
}
.tdv-etape:last-child .tdv-etape__num { background: var(--accent); color: var(--brand); }
.tdv-etape h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.tdv-etape p { margin: 0; color: var(--text-light); font-size: 0.98rem; }

/* Chiots : état vide */
.tdv-vide {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  border: 2px dashed var(--gray);
  border-radius: var(--radius-lg);
}
.tdv-vide__vent { width: 110px; margin: 0 auto 1rem; color: var(--action); }
.tdv-vide h3 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.tdv-vide p { color: var(--text-light); margin: 0 0 1.5rem; }

/* L'élevage */
.tdv-elevage {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.tdv-elevage__photo .tdv-arche { max-width: 420px; }
.tdv-elevage__texte h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0 0 1.2rem; }
.tdv-elevage__texte > p { color: var(--text-light); margin: 0 0 1.8rem; max-width: 58ch; }
.tdv-engagements {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
}
.tdv-engagements li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.85rem; align-items: start; }
.tdv-engagements .icone {
  width: 2.5rem; height: 2.5rem; padding: 0.55rem;
  border-radius: 50%;
  background: #fff;
  color: var(--action);
  box-shadow: var(--shadow-sm);
}
.tdv-engagements strong { display: block; color: var(--brand); font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 0.15rem; }
.tdv-engagements span { color: var(--text-light); font-size: 0.95rem; }

/* Contact : la nuit tombe sur les collines */
.tdv-soir {
  --avant: var(--off-white);
  position: relative;
  background: var(--brand);
  color: rgba(255, 255, 255, 0.82);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  text-align: center;
}
.tdv-section--teinte + .tdv-soir { --avant: var(--action-light); }
.tdv-soir__collines { background: var(--avant); }
.tdv-soir__collines .collines__1 { fill: #5B3A8C; }
.tdv-soir__collines .collines__2 { fill: #432470; }
.tdv-soir__collines .collines__3 { fill: var(--brand); }
.tdv-soir__contenu { position: relative; max-width: 44rem; }
.tdv-soir__vent { width: 120px; margin: 0 auto 1.25rem; color: #C9A8F5; }
.tdv-soir h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1rem; }
.tdv-soir p { margin: 0 auto 2rem; max-width: 46ch; color: rgba(255, 255, 255, 0.84); }
.tdv-soir__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; }
.tdv-soir .btn--primary { background: #fff; border-color: #fff; color: var(--brand); }
.tdv-soir .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--brand); }

/* ── Cartes reprises de la base : même famille visuelle ─────────────── */
.dog-card, .testimonial-card { border-radius: var(--radius-lg); border: 1px solid var(--gray); box-shadow: none; }
.dog-card:hover, .testimonial-card:hover { box-shadow: var(--shadow-hover); }
.dog-card__image { background: linear-gradient(180deg, var(--colline-milieu), var(--action-light)); }
.section.section--alt { background: var(--off-white); }
.tag, .dog-chip { border-radius: var(--radius-sm); }

/* ── Pied de page : les collines, puis la nuit ──────────────────────── */
.site-footer {
  --avant: var(--off-white);
  background: var(--brand-dark);
  padding-top: 0;
}
body:has(.site-main > .tdv-soir:last-child) .site-footer,
body:has(.site-main > .cta-banner:last-child) .site-footer { --avant: var(--brand); }
body:has(.site-main > .tdv-section--teinte:last-child) .site-footer { --avant: var(--action-light); }
.site-footer__collines { background: var(--avant); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.site-footer__collines .collines__1 { fill: #3D2168; }
.site-footer__collines .collines__2 { fill: #2B1350; }
.site-footer__collines .collines__3 { fill: var(--brand-dark); }
.site-footer .site-logo { display: flex; align-items: center; gap: 0.9rem; }
.site-footer__vent { width: 56px; color: #C9A8F5; flex-shrink: 0; }
.site-footer .site-logo__text { display: grid; line-height: 1.05; }
.site-footer .site-logo__sub { font-family: var(--font-body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: #C9A8F5; }
.site-footer .site-logo__name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: #fff; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #C9A8F5; }

/* Contact rapide : colonne collée à droite en ordinateur, qui s'ouvre au
   survol sur le téléphone, l'e-mail ou l'adresse ; barre en bas sur
   téléphone (footer.php). Remise le 30/09 : Valentin l'aimait chez sa sœur. */
.sticky-contact__btn { background: var(--brand); color: #fff; }
.sticky-contact__btn svg { fill: #fff; }
.sticky-contact__text { color: #fff; }
@media (min-width: 769px) {
  .sticky-contact { gap: 6px; }
  .sticky-contact__btn,
  .sticky-contact__btn:hover {
    width: auto;
    max-width: 52px;
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: var(--shadow);
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
  }
  .sticky-contact__btn:hover,
  .sticky-contact__btn:focus-visible { max-width: 24rem; background: var(--action); }
  .sticky-contact__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
  .sticky-contact__icon { width: 52px; height: 52px; }
  .sticky-contact__text { display: grid; gap: 0.1rem; line-height: 1.2; padding-right: 1.15rem; }
  .sticky-contact__libelle { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #E6D5FB; }
  .sticky-contact__valeur { font-size: 0.92rem; font-weight: 700; color: #fff; }
}
@media (max-width: 768px) {
  .sticky-contact__valeur { display: none; }
  .sticky-contact__libelle { font-size: 0.75rem; font-weight: 800; }
}

/* ── En-têtes des pages intérieures : clairs, avec les collines ────── */
.page-hero, .breed-hero, .testi-hero, .legal-hero, .histoire-hero,
.races-hero, .contact-hero, .repro-hero {
  position: relative;
  background: linear-gradient(180deg, var(--action-light) 0%, #F8F2FF 70%, var(--off-white) 100%);
  color: var(--text);
  min-height: 0;
  overflow: hidden;
  /* L'en-tête du site est fixe (72 px) : le contenu commence sous lui. */
  padding-top: calc(72px + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(5rem, 9vw, 7.5rem);
}
.page-hero::after, .breed-hero::after, .testi-hero::after, .legal-hero::after, .histoire-hero::after,
.races-hero::after, .contact-hero::after, .repro-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(50px, 7vw, 110px);
  background: var(--off-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 70c200-36 420-42 660-14s460 34 640 0c60-12 110-14 140-12V110H0z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 70c200-36 420-42 660-14s460 34 640 0c60-12 110-14 140-12V110H0z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.breed-hero__overlay, .histoire-hero__overlay { display: none; }
.breed-hero__title, .testi-hero__title, .legal-hero__title, .histoire-hero__title,
.races-hero__title, .contact-hero__title, .page-hero__title {
  color: var(--brand);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  letter-spacing: -0.025em;
}
.breed-hero__desc, .testi-hero__desc, .legal-hero__desc, .histoire-hero__desc,
.races-hero__desc, .contact-hero__desc { color: var(--text-light); }
.legal-hero__eyebrow, .histoire-hero__eyebrow, .contact-hero .section__subtitle { color: var(--action); }
.breed-hero__back { color: var(--action-dark); }

/* Bandeau d'appel des pages intérieures : le même soir que l'accueil */
.cta-banner { background: var(--brand); color: rgba(255, 255, 255, 0.82); }
.cta-banner__title, .cta-banner h2 { color: #fff; }
.cta-banner__desc { color: rgba(255, 255, 255, 0.82); }
.cta-banner .section__subtitle { color: #C9A8F5; }
.cta-banner__dog { display: none; }
.cta-banner .btn--brand, .cta-banner .btn--primary { background: #fff; border-color: #fff; color: var(--brand); }
.cta-banner .btn--secondary, .cta-banner .btn--white { border-color: rgba(255, 255, 255, 0.6); color: #fff; background: transparent; }

.section__subtitle { color: var(--action); font-weight: 800; letter-spacing: 0.16em; }

/* ── Icônes au trait, à la place des émojis du thème d'origine ─────── */
/* tdv_icone() (inc/decor.php). Sans taille, un SVG inline prendrait toute
   la largeur : la base en donne une, chaque conteneur l'ajuste. */
.icone { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* Pastille ronde : cartes d'engagements, races, sections d'une race, fenêtre de contact */
.value-item__icon, .race-split__emoji, .breed-section__icon, .contact-modal__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--action-light);
  color: var(--action);
  font-size: 1rem;
  line-height: 1;
}
.value-item__icon, .contact-modal__icon { margin-inline: auto; }
.value-item__icon .icone, .race-split__emoji .icone,
.breed-section__icon .icone, .contact-modal__icon .icone { width: 1.6rem; height: 1.6rem; }

/* Cases déjà dessinées par main.css (Notre histoire) : l'icône prend la couleur */
.histoire-valeur__icon, .affil-card__icon { color: var(--action-dark); }
.histoire-valeur__icon .icone, .affil-card__icon .icone { width: 1.6rem; height: 1.6rem; }

/* Chiffres clés : la maison tient la place d'un chiffre, à sa hauteur */
.histoire-stat__number .icone { width: 1.1em; height: 1.1em; padding: 0.1em; margin-inline: auto; }

/* Retour du formulaire de contact */
.contact-feedback__icon { display: flex; }
.contact-feedback__icon .icone { width: 1.6rem; height: 1.6rem; }
.contact-feedback--success .contact-feedback__icon { color: #15803D; }
.contact-feedback--error .contact-feedback__icon { color: #B91C1C; }

/* Coordonnées de la politique de confidentialité */
.legal-contact-card__icone { display: flex; color: var(--action); }
.legal-contact-card__icone .icone { width: 1.25rem; height: 1.25rem; }

/* Aucun chiot : le vent de l'accueil plutôt qu'une patte */
.chiot-empty__vent { width: 110px; margin: 0 auto; color: var(--action); }

/* Points forts d'une race : un petit trait violet a remplacé l'émoji de tête */
.race-split__features li::before {
  content: "";
  flex-shrink: 0;
  width: 0.9rem;
  height: 2px;
  border-radius: 2px;
  background: var(--action);
}

/* main.css garde un appareil photo en émoji sur .color-photo--pending
   (classe qu'aucun gabarit n'emploie aujourd'hui) : neutralisé. */
.color-photo--pending::before { content: none; }

/* ── Petits écrans ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .tdv-hero__grille, .tdv-elevage { grid-template-columns: 1fr; }
  .tdv-hero__photo { width: min(78%, 360px); }
  .tdv-hero__vent { right: -12%; }
  .tdv-races { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .tdv-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdv-etapes::before { display: none; }
  .tdv-elevage__photo { order: 2; }
  .tdv-elevage__photo .tdv-arche { margin-inline: auto; max-width: 340px; }
}
@media (max-width: 560px) {
  .tdv-races .tdv-arche { aspect-ratio: 5 / 4; }
  .tdv-elevage__photo .tdv-arche { max-width: 280px; }
  .tdv-etapes { grid-template-columns: 1fr; }
  .tdv-engagements { grid-template-columns: 1fr; }
  .tdv-etiquette { left: -0.5rem; }
  .tdv-hero__actions .btn { width: 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════════
   DÉCOR : LE VENT PARTOUT, ET LES OBJETS DU CHIEN EN ARRIÈRE-PLAN (30/09)
   Valentin : « les vagues […] ça fait un peu comme l'air […] un peu partout
   sur le site, en arrière-plan », « souligner certains mots […] en mode vague,
   mais pas partout », et le retour des pattes, gamelles et jouets du site de
   sa sœur, redessinés au trait (inc/decor.php).
   ═══════════════════════════════════════════════════════════════════════ */

/* « en famille » dans le titre de l'accueil : le surligné framboise du
   premier jet. Le souligné en vague essayé le 30/09 a été retiré : « c'est
   moche […] je préférais avant » (Valentin). */
.tdv-hero__titre mark,
.tdv-hero__titre span {
  color: inherit;
  background: linear-gradient(transparent 62%, rgba(255, 79, 154, 0.55) 62%, rgba(255, 79, 154, 0.55) 90%, transparent 90%);
  padding-inline: 0.08em;
}

/* Sections décorées : le décor passe derrière le contenu */
.tdv-section, .tdv-hero, .tdv-soir { position: relative; overflow: hidden; }
.tdv-section > .container, .tdv-soir > .tdv-soir__contenu { position: relative; z-index: 1; }
.tdv-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.tdv-decor__objet { position: absolute; display: block; color: #D8C5F7; width: 56px; }
.tdv-decor__objet svg { display: block; width: 100%; height: auto; }
.tdv-section--teinte .tdv-decor__objet { color: #CFB5F4; }
.tdv-decor__objet--os, .tdv-decor__objet--jouet { width: 70px; }
.tdv-decor__objet--gamelle { width: 64px; }
.tdv-decor__objet--balle, .tdv-decor__objet--coeur { width: 40px; }

/* Trois dispositions, toujours sur les bords, loin du texte */
.tdv-decor--a .tdv-decor__objet--1 { top: 8%;  left: 3%;  transform: rotate(-18deg); }
.tdv-decor--a .tdv-decor__objet--2 { top: 12%; right: 4%; transform: rotate(22deg); }
.tdv-decor--a .tdv-decor__objet--3 { bottom: 9%; right: 3%; transform: rotate(8deg); }
.tdv-decor--a .tdv-decor__objet--4 { bottom: 7%; left: 5%; }

.tdv-decor--b .tdv-decor__objet--1 { top: 10%; right: 4%; transform: rotate(8deg); }
.tdv-decor--b .tdv-decor__objet--2 { top: 14%; left: 4%;  transform: rotate(-24deg); }
.tdv-decor--b .tdv-decor__objet--3 { bottom: 10%; left: 3%; transform: rotate(10deg); }
.tdv-decor--b .tdv-decor__objet--4 { bottom: 8%; right: 5%; transform: rotate(-20deg); }

.tdv-decor--c .tdv-decor__objet--1 { top: 12%; left: 5%; }
.tdv-decor--c .tdv-decor__objet--2 { top: 8%;  right: 7%; transform: rotate(20deg); }
.tdv-decor--c .tdv-decor__objet--3 { bottom: 12%; left: 4%; transform: rotate(-30deg); }
.tdv-decor--c .tdv-decor__objet--4 { bottom: 10%; right: 4%; transform: rotate(6deg); }

@media (prefers-reduced-motion: no-preference) {
  .tdv-decor__objet svg { animation: tdv-flotte 9s ease-in-out infinite; }
  .tdv-decor__objet:nth-child(odd) svg { animation-duration: 11s; animation-delay: -3s; }
}
@keyframes tdv-flotte { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(3deg); } }

/* Souffles du héros et du bandeau du soir */
.tdv-hero__souffle, .tdv-soir__souffle, .tdv-trio__souffle { position: absolute; pointer-events: none; z-index: 0; height: 130px; }
/* Au-dessus du surtitre : placé plus bas, il se lisait comme un soulignement du titre */
.tdv-hero__souffle { top: 64px; left: -4%; width: 58%; height: 90px; }
.tdv-hero__souffle path { stroke: #E3D3FB; stroke-width: 2.2; }
.tdv-soir__souffle { bottom: 2%; left: 50%; width: 76%; height: 100px; transform: translateX(-50%); }
.tdv-soir__souffle path { stroke: rgba(201, 168, 245, 0.28); stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) {
  .tdv-hero__souffle path, .tdv-soir__souffle path, .tdv-trio__souffle path { stroke-dasharray: 520 90; animation: tdv-souffle 18s linear infinite; }
}

/* Pages intérieures : un souffle dans chaque en-tête, et les objets semés
   en fond de quelques sections (une tuile légère, qui se répète) */
.page-hero, .breed-hero, .testi-hero, .legal-hero, .histoire-hero,
.races-hero, .contact-hero, .repro-hero {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='150' viewBox='0 0 560 150' fill='none' stroke-linecap='round'%3E%3Cpath d='M10 60c90-40 170-40 250 0s160 40 290-6' stroke='%23DCC8FA' stroke-width='2.4'/%3E%3Cpath d='M60 96c80-26 150-26 220 0s130 22 220-4' stroke='%23F6BCD8' stroke-width='2'/%3E%3Cpath d='M180 128c50-12 90-12 140 0' stroke='%23DCC8FA' stroke-width='2'/%3E%3C/svg%3E") no-repeat right -40px top 42% / min(560px, 60%) auto,
    linear-gradient(180deg, var(--action-light) 0%, #F8F2FF 70%, var(--off-white) 100%);
}
/* Deux endroits seulement (valeurs de Notre histoire, Contact) : « faut pas
   abuser » (Valentin, 30/09). Jamais derrière les longs textes. */
.histoire-valeurs, .contact-main {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22640%22 height=%22440%22 viewBox=%220 0 640 440%22 fill=%22none%22 stroke=%22%23DCCAF8%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate%2840 34%29 rotate%28-16 30 30%29 scale%281.25%29%22%3E%3Cpath d=%22M24 25.5c-6.2 0-11.5 5.3-11.5 10.4 0 3.6 2.6 6.1 6 6.1 2.2 0 3.4-1.2 5.5-1.2s3.3 1.2 5.5 1.2c3.4 0 6-2.5 6-6.1 0-5.1-5.3-10.4-11.5-10.4z%22/%3E%3Cellipse cx=%2212.5%22 cy=%2220%22 rx=%223.6%22 ry=%224.8%22 transform=%22rotate%28-22 12.5 20%29%22/%3E%3Cellipse cx=%2219.5%22 cy=%2212.5%22 rx=%223.6%22 ry=%225.2%22 transform=%22rotate%28-6 19.5 12.5%29%22/%3E%3Cellipse cx=%2228.5%22 cy=%2212.5%22 rx=%223.6%22 ry=%225.2%22 transform=%22rotate%286 28.5 12.5%29%22/%3E%3Cellipse cx=%2235.5%22 cy=%2220%22 rx=%223.6%22 ry=%224.8%22 transform=%22rotate%2822 35.5 20%29%22/%3E%3C/g%3E%3Cg transform=%22translate%28300 64%29 rotate%2818 29 14%29 scale%281.2%29%22%3E%3Cpath d=%22M10.5 5a4.5 4.5 0 0 0-4.2 6.2A4.5 4.5 0 0 0 10.5 19c1.8 0 3-.9 3.9-2h19.2c.9 1.1 2.1 2 3.9 2a4.5 4.5 0 0 0 4.2-7.8A4.5 4.5 0 0 0 37.5 5c-1.8 0-3 .9-3.9 2H14.4c-.9-1.1-2.1-2-3.9-2z%22/%3E%3C/g%3E%3Cg transform=%22translate%28520 30%29 rotate%28-6 29 22%29 scale%281.2%29%22%3E%3Cpath d=%22M5 15h38%22/%3E%3Cpath d=%22M8 15l3.2 13.5a3 3 0 0 0 2.9 2.3h19.8a3 3 0 0 0 2.9-2.3L40 15%22/%3E%3Cpath d=%22M16 21.5h16%22/%3E%3Ccircle cx=%2219%22 cy=%229.5%22 r=%222.2%22/%3E%3Ccircle cx=%2225%22 cy=%227.5%22 r=%222.2%22/%3E%3Ccircle cx=%2230%22 cy=%2210.5%22 r=%222.2%22/%3E%3C/g%3E%3Cg transform=%22translate%28170 250%29 rotate%280 20 20%29 scale%281.1%29%22%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%2212.5%22/%3E%3Cpath d=%22M8 10.5c5.5 2.6 8.2 8 7.6 15.5%22/%3E%3Cpath d=%22M28 25.5c-5.5-2.6-8.2-8-7.6-15.5%22/%3E%3C/g%3E%3Cg transform=%22translate%28400 300%29 rotate%28-12 32 14%29 scale%281.15%29%22%3E%3Cpath d=%22M11 12c6-5 11 5 17 0s11-5 17 0%22/%3E%3Ccircle cx=%227%22 cy=%2212%22 r=%224%22/%3E%3Ccircle cx=%2249%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M3 12H0M53 12h3M5 8.5 3 6M5 15.5 3 18M51 8.5 53 6M51 15.5 53 18%22/%3E%3C/g%3E%3Cg transform=%22translate%28575 300%29 rotate%2822 26 26%29 scale%281.1%29%22%3E%3Cpath d=%22M24 25.5c-6.2 0-11.5 5.3-11.5 10.4 0 3.6 2.6 6.1 6 6.1 2.2 0 3.4-1.2 5.5-1.2s3.3 1.2 5.5 1.2c3.4 0 6-2.5 6-6.1 0-5.1-5.3-10.4-11.5-10.4z%22/%3E%3Cellipse cx=%2212.5%22 cy=%2220%22 rx=%223.6%22 ry=%224.8%22 transform=%22rotate%28-22 12.5 20%29%22/%3E%3Cellipse cx=%2219.5%22 cy=%2212.5%22 rx=%223.6%22 ry=%225.2%22 transform=%22rotate%28-6 19.5 12.5%29%22/%3E%3Cellipse cx=%2228.5%22 cy=%2212.5%22 rx=%223.6%22 ry=%225.2%22 transform=%22rotate%286 28.5 12.5%29%22/%3E%3Cellipse cx=%2235.5%22 cy=%2220%22 rx=%223.6%22 ry=%224.8%22 transform=%22rotate%2822 35.5 20%29%22/%3E%3C/g%3E%3Cg transform=%22translate%2860 360%29 rotate%28-10 14 14%29 scale%280.9%29%22%3E%3Cpath d=%22M16 27s-10-6.3-12.4-12.6C1.7 9.7 4.7 5 9.4 5c2.9 0 5.1 1.6 6.6 4 1.5-2.4 3.7-4 6.6-4 4.7 0 7.7 4.7 5.8 9.4C26 20.7 16 27 16 27z%22/%3E%3C/g%3E%3Cg transform=%22translate%28250 390%29 rotate%28-25 23 11%29 scale%280.95%29%22%3E%3Cpath d=%22M10.5 5a4.5 4.5 0 0 0-4.2 6.2A4.5 4.5 0 0 0 10.5 19c1.8 0 3-.9 3.9-2h19.2c.9 1.1 2.1 2 3.9 2a4.5 4.5 0 0 0 4.2-7.8A4.5 4.5 0 0 0 37.5 5c-1.8 0-3 .9-3.9 2H14.4c-.9-1.1-2.1-2-3.9-2z%22/%3E%3C/g%3E%3Cg stroke=%22%23EBC3DC%22%3E%3Cpath d=%22M40 190c80-26 150-26 230 0s150 26 230 0 90-16 120-10%22 /%3E%3Cpath d=%22M120 214c60-14 110-14 170 0%22 /%3E%3C/g%3E%3C/svg%3E");
  background-size: 640px 440px;
  background-repeat: repeat;
}

@media (max-width: 760px) {
  .tdv-decor__objet { width: 38px; }
  .tdv-decor__objet--os, .tdv-decor__objet--jouet, .tdv-decor__objet--gamelle { width: 46px; }
  .tdv-decor__objet--3, .tdv-decor__objet--4 { display: none; }
}


/* Mot composé qu'une coupure au trait d'union rendrait bancal */
.tdv-insecable { white-space: nowrap; }

/* Lecteurs d'écran seulement (légende du comparatif) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE NOS RACES (page-nos-races.php), refaite le 30/09/2026
   Les trois races debout sur la colline, dans leur arche : la plus haute
   pour le plus grand chien. Puis le comparatif côte à côte.
   ═══════════════════════════════════════════════════════════════════════ */

.tdv-trio {
  --scene: clamp(250px, 29vw, 390px);      /* hauteur de l'arche du Boxer */
  --colline-h: clamp(70px, 9vw, 140px);
  position: relative;
  overflow: hidden;
  padding-top: calc(72px + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  background: linear-gradient(180deg, var(--action-light) 0%, #F8F2FF 100%);
}
.tdv-trio > .container { position: relative; z-index: 1; }
.tdv-trio__souffle { top: 84px; left: -5%; width: 56%; height: 96px; }
.tdv-trio__souffle path { stroke: #E3D3FB; stroke-width: 2.2; }

.tdv-trio__entete { text-align: center; max-width: 44rem; margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem); }
.tdv-trio__entete .tdv-surtitre { justify-content: center; }
.tdv-trio__entete h1 {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.tdv-trio__entete p:not(.tdv-surtitre) { color: var(--text-light); font-size: 1.12rem; margin: 0 auto; max-width: 40ch; }

.tdv-trio__grille {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
/* Le sol : les collines passent sous les arches, puis le fond clair jusqu'en bas */
.tdv-trio__sol {
  position: absolute;
  z-index: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: calc(var(--scene) - var(--colline-h) * 0.82);
  bottom: calc(-1 * clamp(3.5rem, 7vw, 5.5rem));
  background: linear-gradient(transparent calc(var(--colline-h) - 1px), var(--off-white) calc(var(--colline-h) - 1px));
}
.tdv-trio__collines.collines { height: var(--colline-h); }

.tdv-trio__race { position: relative; z-index: 1; display: flex; flex-direction: column; }
.tdv-trio__scene { height: var(--scene); display: flex; align-items: flex-end; justify-content: center; }
.tdv-trio__arche {
  display: block;
  height: 72%;                      /* les deux petits */
  width: auto;
  box-shadow: var(--shadow-lg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tdv-trio__race--boxer .tdv-trio__arche { height: 100%; }
.tdv-trio__race:hover .tdv-trio__arche { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.tdv-trio__texte { text-align: center; padding: clamp(1.5rem, 3vw, 2.25rem) 0.5rem 0; display: flex; flex-direction: column; align-items: center; flex: 1; }
.tdv-trio__type { margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--action); }
.tdv-trio__nom { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 0.7rem; }
.tdv-trio__nom a { color: inherit; text-decoration: none; }
.tdv-trio__nom a:hover { color: var(--action-dark); }
.tdv-trio__texte > p:not(.tdv-trio__type) { color: var(--text-light); margin: 0 0 1.1rem; max-width: 34ch; }
.tdv-trio__texte .tdv-lien { margin-top: auto; }

/* Grille de chiots (accueil, page de race) : centrée quand il y en a peu */
.tdv-section .dogs-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; }

/* Le comparatif */
.tdv-comparatif {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tdv-comparatif table { width: 100%; border-collapse: collapse; }
.tdv-comparatif th, .tdv-comparatif td { padding: 1.05rem 1.35rem; text-align: left; vertical-align: top; }
.tdv-comparatif thead th {
  width: 26%;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--brand);
  padding-top: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--gray);
}
.tdv-comparatif thead td { border-bottom: 2px solid var(--gray); }
.tdv-comparatif thead a { color: inherit; text-decoration: none; }
.tdv-comparatif thead a:hover { color: var(--action-dark); }
.tdv-comparatif tbody th {
  width: 22%;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--action);
  padding-top: 1.25rem;
}
.tdv-comparatif tbody tr + tr > * { border-top: 1px solid var(--gray); }
.tdv-comparatif td { color: var(--text); }
.tdv-comparatif__note { text-align: center; color: var(--text-light); font-size: 0.95rem; max-width: 52ch; margin: 1.5rem auto 0; }

.tdv-echelle { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tdv-echelle__points { display: inline-flex; gap: 4px; }
.tdv-echelle__point { width: 10px; height: 10px; border-radius: 50%; background: var(--gray); }
.tdv-echelle__point.is-plein { background: var(--action); }


/* ═══════════════════════════════════════════════════════════════════════
   PAGE D'UNE RACE (page.php), refaite le 30/09/2026
   En-tête : la race, ses repères, sa photo en arche. Puis le texte avec un
   sommaire qui suit la lecture, les chiots de la race et leurs parents.
   ═══════════════════════════════════════════════════════════════════════ */

.tdv-fiche-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(72px + clamp(2rem, 5vw, 4rem));
  background: linear-gradient(180deg, var(--action-light) 0%, #F8F2FF 55%, var(--off-white) 100%);
}
.tdv-fiche-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.tdv-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--action-dark);
  text-decoration: none;
}
.tdv-retour::before { content: "←"; transition: transform 0.25s ease; }
.tdv-retour:hover { color: var(--brand); }
.tdv-retour:hover::before { transform: translateX(-3px); }
.tdv-fiche-hero__texte .tdv-surtitre { display: flex; }
.tdv-fiche-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
.tdv-fiche-hero__portrait { font-size: 1.15rem; color: var(--text-light); max-width: 44ch; margin: 0 0 1.9rem; }

.tdv-reperes { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: 0 0 2.1rem; }
.tdv-reperes > div { padding: 0.1rem 1.5rem; border-left: 2px solid var(--colline-loin); }
.tdv-reperes > div:first-child { padding-left: 0; border-left: 0; }
.tdv-reperes dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--action); margin-bottom: 0.2rem; }
.tdv-reperes dd { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--brand); }

.tdv-fiche-hero__photo { position: relative; margin: 0; justify-self: center; width: min(100%, 400px); }
.tdv-fiche-hero__vent { position: absolute; width: 44%; top: 5%; right: -16%; color: var(--action); z-index: 2; }
.tdv-fiche-hero__collines { margin-top: clamp(-40px, -3vw, -20px); position: relative; z-index: 0; }

.tdv-fiche {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}
.tdv-sommaire { position: sticky; top: calc(72px + 2rem); }
.tdv-sommaire__titre { margin: 0 0 0.9rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); }
.tdv-sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gray); }
.tdv-sommaire__lien {
  display: block;
  margin-left: -2px;
  padding: 0.45rem 0 0.45rem 1.1rem;
  border-left: 2px solid transparent;
  color: var(--text-light);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tdv-sommaire__lien:hover { color: var(--brand); }
.tdv-sommaire__lien.is-active { color: var(--action-dark); border-left-color: var(--action); font-weight: 800; }

.tdv-fiche__contenu { max-width: 68ch; }
.tdv-chapitre, .tdv-fiche-chiots { scroll-margin-top: calc(72px + 1.5rem); }
.tdv-chapitre + .tdv-chapitre { margin-top: clamp(2.75rem, 5vw, 3.75rem); }
.tdv-chapitre__titre {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin: 0 0 1.1rem;
}
.tdv-chapitre__titre .tdv-chapitre__icone {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0.62rem;
  border-radius: 50%;
  background: var(--action-light);
  color: var(--action);
}
.tdv-chapitre .entry-content { padding: 0; max-width: none; }
.tdv-chapitre .entry-content li { color: var(--text); }
.tdv-chapitre .entry-content > :last-child { margin-bottom: 0; }
.tdv-a-venir { color: var(--text-light); font-style: italic; }

/* Les parents de la race */
.tdv-parents { margin-top: clamp(3rem, 6vw, 4.25rem); text-align: center; }
.tdv-parents__titre { font-size: 1.45rem; margin: 0 0 1.6rem; }
.tdv-parents__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 2.75rem; }
.tdv-parent { display: grid; justify-items: center; gap: 0.2rem; color: inherit; text-decoration: none; }
.tdv-parent__photo {
  display: block;
  width: 112px;
  height: 112px;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 5px #fff, var(--shadow);
  transition: transform 0.3s ease;
}
.tdv-parent__photo > * { width: 100%; height: 100%; }
.tdv-parent__photo img { object-fit: cover; display: block; }
.tdv-parent:hover .tdv-parent__photo { transform: translateY(-3px); }
.tdv-parent__nom { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; color: var(--brand); }
.tdv-parent:hover .tdv-parent__nom { color: var(--action-dark); }
.tdv-parent__detail { font-size: 0.9rem; color: var(--text-light); }


/* ── Petits écrans : Nos races et page de race ─────────────────────── */
@media (max-width: 960px) {
  .tdv-fiche-hero__grille { grid-template-columns: 1fr; }
  .tdv-fiche-hero__photo { width: min(72%, 330px); }
  .tdv-fiche-hero__vent { right: -12%; }
  /* minmax(0, 1fr) : sans lui, la bande du sommaire (qui ne passe pas à la
     ligne) élargissait la colonne, et toute la page débordait sur le côté. */
  .tdv-fiche { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  /* Le sommaire devient une bande qui défile, collée sous l'en-tête, sur le
     même fond que la page (pas de bandeau blanc sous les collines). */
  .tdv-sommaire {
    top: 64px;
    min-width: 0;
    z-index: 50;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.65rem 0;
    background: var(--off-white);
    box-shadow: 0 12px 16px -16px rgba(46, 21, 82, 0.45);
  }
  .tdv-sommaire__titre { display: none; }
  .tdv-sommaire ol {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    border-left: 0;
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .tdv-sommaire ol::-webkit-scrollbar { display: none; }
  .tdv-sommaire__lien {
    margin: 0;
    padding: 0.5rem 0.95rem;
    white-space: nowrap;
    border: 1px solid var(--gray);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 0.92rem;
  }
  .tdv-sommaire__lien.is-active { background: var(--action); border-color: var(--action); color: #fff; }
  .tdv-chapitre, .tdv-fiche-chiots { scroll-margin-top: calc(64px + 4.5rem); }
}
@media (max-width: 720px) {
  .tdv-trio { --scene: auto; }
  .tdv-trio__grille { grid-template-columns: 1fr; gap: 3rem; max-width: 26rem; margin-inline: auto; }
  .tdv-trio__sol { display: none; }
  .tdv-trio__scene { height: auto; }
  .tdv-trio__arche, .tdv-trio__race--boxer .tdv-trio__arche { height: auto; width: min(78%, 290px); }
  .tdv-trio__texte { padding-top: 1.4rem; }

  .tdv-comparatif { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .tdv-comparatif table, .tdv-comparatif tbody, .tdv-comparatif tr, .tdv-comparatif th, .tdv-comparatif td { display: block; width: auto; }
  .tdv-comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tdv-comparatif tbody tr { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem 0.4rem; margin-bottom: 0.9rem; }
  .tdv-comparatif tbody tr + tr > * { border-top: 0; }
  .tdv-comparatif tbody th { width: auto; padding: 0 0 0.5rem; }
  .tdv-comparatif td { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--gray); }
  .tdv-comparatif td::before { content: attr(data-race); font-weight: 800; color: var(--brand); font-size: 0.92rem; }
}
@media (max-width: 560px) {
  .tdv-reperes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tdv-reperes > div { padding: 0.1rem 0.75rem; }
  .tdv-reperes dd { font-size: 1rem; }
  .tdv-fiche-hero .tdv-hero__actions .btn { width: 100%; justify-content: center; }
}

/* Mentions légales et confidentialité : sur téléphone, l'adresse e-mail et
   les adresses web (qui ne se coupent pas) élargissaient la colonne et la
   page débordait sur le côté. */
.legal-wrap { grid-template-columns: 220px minmax(0, 1fr); }
.legal-content { min-width: 0; }
.legal-content td, .legal-content p, .legal-content li { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .legal-wrap { grid-template-columns: minmax(0, 1fr); }
}