/* Site d'élevage — feuille unique. Les couleurs viennent des variables posées par le serveur (charte par élevage). */
:root {
  --fond-sombre: #1c303c; --fond-profond: #001824; --fond-teal: #304c5c;
  --or: #bc9c00; --or-clair: #f0d868; --or-fonce: #887020; --or-ombre: #a89038;
  --clair: #f4f4f4; --encre: #1b2430; --gris: #6b7280; --bord: #dfe3e3; --blanc: #ffffff;
  --police-titres: 'Playfair Display', Georgia, serif;
  --police-texte: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --largeur: 1440px;
  /* Contrastes : posés par le serveur selon la charte (services/rendu.js, contrastes()). Ces valeurs par défaut sont
     celles de la charte sombre d'origine ; une charte claire (fond pastel) reçoit du texte à l'encre et des accents
     foncés à la place. Ne jamais remettre une couleur de texte en dur sur un fond de la charte : passer par ici. */
  --sur-sombre: #f4f4f4; --sur-sombre-doux: #d7dde0; --sur-sombre-muet: #9fb0b8; --accent-sur-sombre: #f0d868; --ligne-rgb: 240,216,104;
  --sur-profond: #f4f4f4; --sur-profond-doux: #d7dde0; --sur-profond-muet: #9fb0b8; --accent-sur-profond: #f0d868; --ligne-profond-rgb: 240,216,104;
  --sombre-rgb: 28,48,60; --profond-rgb: 0,24,36; --or-rgb: 188,156,0; --ombre-rgb: 28,48,60;
  --sur-or: #1c303c; --or-milieu: #d8c058; --btn-sombre-fond: #1c303c; --btn-sombre-texte: #f0d868;
  --contour-rgb: 240,216,104; --contour-texte: #f0d868; --champ-sombre-fond: rgba(255,255,255,0.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--police-texte); color: var(--encre); background: var(--clair); -webkit-font-smoothing: antialiased; line-height: 1.5; }
body.menu-ouvert { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--or-fonce); text-decoration: none; }
a:hover { color: var(--or); }
h1, h2, h3, .serif { font-family: var(--police-titres); font-weight: 600; margin: 0; letter-spacing: 0.01em; line-height: 1.1; }
h1 { font-size: clamp(34px, 4.4vw, 56px); }
h2:where(:not(.carte-titre)) { font-size: clamp(28px, 3.2vw, 44px); }
h3:where(:not(.carte-titre)) { font-size: clamp(20px, 2vw, 26px); }
p { margin: 0; }
[hidden] { display: none !important; }
.lien-evitement { position: absolute; left: -999px; top: 8px; background: var(--fond-sombre); color: var(--accent-sur-sombre); padding: 8px 12px; z-index: 100; }
.lien-evitement:focus { left: 8px; }

/* En-tête */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 4vw, 72px) 0 clamp(12px, 3.5vw, 48px); height: 136px; background: var(--clair); border-bottom: 1px solid var(--bord); max-width: var(--largeur); margin: 0 auto; position: relative; }
/* Le logo prend le centre de l'espace libre entre la mascotte et le menu, et grandit avec l'écran (72 → 100 px). */
.marque { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; padding-right: 16px; }
.marque .mascotte { height: 124px; width: auto; }
/* L'image du logo a 30 % de vide en haut et sa calligraphie est à 69 % de sa hauteur : on la cale sur l'axe du menu
   (68 px, milieu de la barre) plutôt que de centrer la boîte de l'image, sinon l'écriture tombe 17 px sous les liens. */
.marque .logo { --h: clamp(72px, 7vw, 100px); height: var(--h); width: auto; align-self: flex-start; margin: calc(62px - 0.69 * var(--h)) auto 0; }  /* 62 = 68 moins les 6 px de haut du bloc .marque (mascotte 124 px centrée dans 136) */
/* Un logo qui remplit son cadre (pas de vide en haut) se centre simplement sur la barre : réglage « logo_axe » du thème. */
.logo-centre .marque .logo { align-self: center; margin: 0 auto; }
.logo-texte { font-family: var(--police-titres); font-size: 30px; color: var(--or-fonce); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--encre); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--or-fonce); }
.bouton-menu { display: none; background: none; border: 0; padding: 8px; color: var(--encre); cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; border: 0; cursor: pointer; font-family: inherit; }
.btn-or { background: linear-gradient(135deg, var(--or-clair) 0%, var(--or-milieu) 45%, var(--or-ombre) 100%); color: var(--sur-or); }
.btn-or:hover { color: var(--sur-or); filter: brightness(1.05); }
.btn-sombre { background: var(--btn-sombre-fond); color: var(--btn-sombre-texte); }
.btn-sombre:hover { color: var(--btn-sombre-texte); }
.btn-contour { border: 1px solid rgba(var(--contour-rgb), 0.7); color: var(--contour-texte); }
.btn-contour:hover { color: var(--contour-texte); background: rgba(var(--contour-rgb), 0.1); }
.btn-contour-or { border: 1px solid var(--or); color: var(--or-fonce); }
.nav .btn { min-height: 42px; padding: 0 20px; }
.nav .btn-sombre, .nav .btn-sombre:hover { color: var(--btn-sombre-texte); }

/* Sections */
main { max-width: var(--largeur); margin: 0 auto; }
.section { padding: clamp(40px, 6vw, 88px) clamp(16px, 5vw, 72px); display: flex; flex-direction: column; gap: 32px; }
.section-etroite { max-width: 860px; margin: 0 auto; }
.section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-tete > div { display: flex; flex-direction: column; gap: 10px; }
.section-tete.centre { flex-direction: column; align-items: center; text-align: center; }
.section-tete.centre .sous { max-width: 640px; }
.surtitre { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-fonce); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.surtitre.or, .bande-sombre .surtitre, .heros .surtitre { color: var(--accent-sur-sombre); }
.sous { color: var(--gris); font-size: 17px; }
.lien { font-weight: 600; font-size: 15px; }
.lien-or { color: var(--accent-sur-sombre); }
.filet { height: 1px; margin: 0 clamp(16px, 5vw, 72px); background: linear-gradient(90deg, rgba(var(--or-rgb),0), var(--or) 50%, rgba(var(--or-rgb),0)); }
.boutons { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.boutons.centre { justify-content: center; }
.vide { color: var(--gris); font-style: italic; }
.petit { font-size: 13px; color: var(--gris); }
.encart { padding: 22px 26px; background: #fbf9f0; border: 1px solid #e8e2c8; border-radius: 6px; }
.encart-ok { background: #e4f1e6; border-color: #bfdcc5; }
.encart h2 { font-size: 24px; margin-bottom: 10px; }
.legende { display: flex; flex-wrap: wrap; gap: 8px; }
.mention-siren { font-size: 0.82rem; opacity: 0.75; margin-top: 8px; }
/* Messages de sensibilisation obligatoires sur les pages qui proposent des animaux (code rural L214-8-2, arrêté du
   28 juin 2023) : jaune C0 M10 J100 N0 = #ffe500, texte noir, police Marianne, sans altération. */
@font-face { font-family: 'Marianne'; src: url(/fonts/Marianne-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Marianne'; src: url(/fonts/Marianne-Regular_Italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Marianne'; src: url(/fonts/Marianne-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Second message : bandeau permanent en bas de page, 7 % de la page minimum */
.sensibilisation { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; min-height: 7vh; display: flex; align-items: center; background: #ffe500; color: #000; padding: 10px clamp(16px, 4vw, 40px); font-family: 'Marianne', Arial, sans-serif; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.45; box-shadow: 0 -2px 8px rgba(0,0,0,0.15); }
.sensibilisation p { margin: 0; }
.sensibilisation a { color: #000; text-decoration: underline; word-break: break-all; }
body.avec-bandeau { padding-bottom: max(7vh, 64px); }
/* Premier message : cadre centré, 70 % de la page minimum, logo Gouvernement en haut à droite, bouton de prise de connaissance */
.sensibilisation-entree { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.sensibilisation-entree[hidden] { display: none; }
.sensibilisation-cadre { position: relative; width: min(100%, max(70vw, 320px)); max-height: 92vh; overflow: auto; background: #ffe500; color: #000; border: 1px solid #000; padding: clamp(18px, 3vw, 36px); font-family: 'Marianne', Arial, sans-serif; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.5; }
.sensibilisation-cadre .logo-gouv { float: right; background: #fff; padding: 10px 14px; margin: 0 0 16px 20px; }
.sensibilisation-cadre h2 { font-family: 'Marianne', Arial, sans-serif; font-size: 1.1em; color: #000; margin: 0 0 14px; }
.sensibilisation-cadre p { margin: 0 0 12px; }
.sensibilisation-cadre a { color: #000; text-decoration: underline; word-break: break-all; }
.sensibilisation-cadre .btn-lu { display: inline-block; clear: both; margin-top: 10px; background: #000; color: #fff; font-family: inherit; font-weight: 700; font-size: 0.95em; padding: 12px 20px; border: 0; border-radius: 4px; cursor: pointer; }
.sensibilisation-cadre .btn-lu:hover { background: #333; }
.mentions-vente { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1); }
.mentions-vente .petit { margin: 0; }
.h2-section { margin-top: 24px; }

/* Héros */
/* Fond du héros : le dégradé de la charte (ou l'image de fond des réglages si une photo « fond » est posée),
   et par-dessus le motif du thème — pour une chatterie, un coup de griffe doré à droite, hors du texte. */
.heros { position: relative; background: var(--fond-image, linear-gradient(135deg, var(--fond-profond) 0%, var(--fond-sombre) 55%, var(--fond-teal) 100%)) center / cover no-repeat var(--fond-sombre); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 640px; }
/* Le coup de griffe : à cheval sur la couture entre le texte et la photo, en bas, devant la photo. Absent si le thème n'a pas de motif. */
.heros::before { content: ''; position: absolute; z-index: 0; left: 2%; top: -6%; width: clamp(360px, 46vw, 640px); aspect-ratio: 1; background: var(--motif-heros, none) center / contain no-repeat; opacity: 0.11; pointer-events: none; }
.heros-texte { position: relative; z-index: 1; }
.heros-texte { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px) clamp(16px, 5vw, 72px); }
.heros h1 { color: var(--sur-sombre); font-size: clamp(36px, 4.3vw, 62px); line-height: 1.04; }
.heros h1 em { font-style: italic; font-weight: 500; color: var(--accent-sur-sombre); }
.heros-sous { font-size: 19px; line-height: 1.55; color: var(--sur-sombre-doux); max-width: 560px; }
.heros-preuves { display: flex; gap: 12px; flex-wrap: wrap; color: var(--sur-sombre-doux); font-size: 14px; letter-spacing: 0.04em; }
.heros-preuves span { color: var(--or); }
.heros-photo { position: relative; overflow: hidden; min-height: 320px; }
.heros-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.heros-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fond-sombre) 0%, rgba(var(--sombre-rgb),0) 22%); pointer-events: none; }

/* Grilles et cartes */
.grille { display: grid; gap: 24px; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; color: var(--encre); }
.carte:hover { color: var(--encre); box-shadow: 0 8px 24px rgba(var(--ombre-rgb), 0.12); }
.carte-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.grille-3 .carte-photo { aspect-ratio: 4 / 4.2; }
.photo-absente { display: flex; align-items: center; justify-content: center; background: #e8eef2; color: var(--gris); font-size: 14px; }
.photo-absente.carte-photo { aspect-ratio: 4 / 5; }
.carte-corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.carte-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* Le nom d'une carte est un h2 ou un h3 (structure pour les moteurs) mais garde sa taille de carte : les règles de
   titres ci-dessus et par habillage visent h2:where(:not(.carte-titre)) / h3:where(:not(.carte-titre)). */
.carte-titre { font-family: var(--police-titres); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: normal; margin: 0; }
.carte-sous { color: var(--gris); font-size: 14px; }
.carte-prix { font-weight: 600; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.carte-ligne-chat { flex-direction: row; align-items: center; gap: 16px; padding: 12px; }
.carte-ligne-chat img.carre, img.carre { width: 84px; height: 84px; object-fit: cover; object-position: 50% 20%; border-radius: 4px; flex: none; }
.carte-ligne-chat > span { display: flex; flex-direction: column; gap: 4px; }
.carte-ligne-chat strong { font-family: var(--police-titres); font-size: 21px; font-weight: 600; }
.carte-ligne-chat span span { color: var(--gris); font-size: 14px; }
img.rond { width: 84px; height: 84px; object-fit: cover; object-position: 50% 15%; border-radius: 999px; flex: none; }
.bloc-releve { display: flex; flex-direction: column; gap: 16px; padding: 28px 32px; background: var(--blanc); border: 1px solid var(--bord); border-radius: 6px; }
.bloc-releve-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bloc-releve-tete p { color: var(--gris); font-size: 15px; }
.releve-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.releve-item { display: flex; align-items: center; gap: 14px; color: var(--encre); }
.releve-item > span { display: flex; flex-direction: column; gap: 2px; }
.releve-item strong { font-family: var(--police-titres); font-size: 18px; }
.releve-item span span { color: var(--gris); font-size: 14px; }

/* Bande sombre (histoire) */
.bande-sombre { background: var(--fond-image, linear-gradient(135deg, var(--fond-teal) 0%, var(--fond-sombre) 50%, var(--fond-profond) 100%)) center / cover no-repeat var(--fond-sombre); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bande-photo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.bande-texte { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(40px, 5vw, 72px) clamp(20px, 6vw, 96px) clamp(40px, 5vw, 72px) clamp(20px, 5vw, 72px); }
.bande-texte h2 { color: var(--sur-sombre); }
.prose-claire, .prose-claire p { color: var(--sur-sombre-doux); }

/* Prose (pages libres) */
.prose { font-size: 17px; line-height: 1.65; }
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 30px; margin: 32px 0 12px; }
.prose h3 { font-size: 22px; margin: 24px 0 8px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.prose blockquote { margin: 0 0 16px; padding: 14px 20px; border-left: 3px solid var(--or); background: var(--blanc); }
.prose img { border-radius: 6px; margin: 8px 0 16px; }
/* Une photo en tête d'article se lit en bandeau, pas en portrait plein cadre : recadrée au format paysage. */
.prose figure { margin: 0 0 20px; }
.prose figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; margin: 0; }
.prose figcaption { font-size: 13px; color: var(--gris); margin-top: 6px; }
.prose hr { border: 0; height: 1px; background: var(--bord); margin: 24px 0; }
.prose-2col { columns: 2; column-gap: 40px; }
.prose-2col p { break-inside: avoid; }

/* Fiche */
.ariane { padding: 22px clamp(16px, 5vw, 72px) 0; font-size: 14px; color: var(--gris); }
.fiche { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.galerie { display: flex; flex-direction: column; gap: 14px; }
.galerie-principale { border-radius: 6px; overflow: hidden; background: var(--fond-sombre); }
.galerie-principale img { width: 100%; aspect-ratio: 4 / 5; max-height: 760px; object-fit: cover; object-position: 50% 20%; }
.galerie-vignettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.vignette { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; overflow: hidden; }
.vignette img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; }
.vignette.active { outline: 2px solid var(--or); outline-offset: 2px; }
.fiche-infos { display: flex; flex-direction: column; gap: 22px; }
.fiche-sous { font-size: 18px; color: var(--gris); }
.prix { font-weight: 600; margin-left: 10px; }
.pastilles { display: flex; gap: 8px; flex-wrap: wrap; }
.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #e4f1e6; color: #1f6b3a; }
.pastille small { font-weight: 400; }
.lignes { margin: 0; display: flex; flex-direction: column; }
.lignes > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bord); font-size: 15px; }
.lignes > div:last-child { border-bottom: 0; }
.lignes dt { color: var(--gris); }
.lignes dd { margin: 0; font-weight: 600; text-align: right; }

/* Portées */
.portee { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--blanc); border: 1px solid var(--bord); border-radius: 8px; }
.portee-tete { display: flex; align-items: center; gap: 16px; }
.portee-tete h2 { font-size: 26px; }
/* Les deux parents d'une portée : lisibles et distincts, jamais superposés — c'est sur eux qu'on juge un chaton. */
.parents { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 4px 0 18px; }
.parent { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.parent img.rond { width: 92px; height: 92px; border: 3px solid var(--blanc); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14); }
.parent-texte { display: flex; flex-direction: column; gap: 2px; }
.parent-role { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.parent-nom { font-weight: 600; font-size: 17px; }
a.parent:hover .parent-nom { color: var(--or-fonce); text-decoration: underline; }
/* Une grille qui ne remplit pas sa rangée se centre, au lieu de laisser un trou à droite. */
.grille-centree { grid-template-columns: repeat(auto-fit, minmax(190px, 260px)); justify-content: center; }
.barre-liens { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.lien-pedigree { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.photos-portee img { aspect-ratio: 4 / 3; }
.liste-portees { padding-left: 22px; color: var(--gris); }

/* Livre d'or, contact */
.section-bas { align-items: start; }
.avis-liste { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.avis { margin: 0; padding: 22px 24px; background: var(--blanc); border: 1px solid var(--bord); border-radius: 6px; font-family: var(--police-titres); font-size: 20px; line-height: 1.45; font-style: italic; }
.avis footer { margin-top: 10px; font-family: var(--police-texte); font-style: normal; font-size: 14px; color: var(--gris); }
.verifie { display: inline-flex; align-items: center; gap: 4px; color: #1f6b3a; font-weight: 600; }
.carte-contact { display: flex; flex-direction: column; gap: 16px; padding: 36px; background: var(--fond-sombre); border-radius: 6px; color: var(--sur-sombre-doux); }
.carte-contact h2 { color: var(--sur-sombre); font-size: 34px; }
.formulaire { display: flex; flex-direction: column; gap: 12px; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.formulaire input, .formulaire textarea { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 4px; background: var(--blanc); color: var(--encre); min-height: 46px; }
.carte-contact .formulaire input, .carte-contact .formulaire textarea { background: var(--champ-sombre-fond); border-color: rgba(var(--ligne-rgb),0.35); color: var(--sur-sombre); }
.carte-contact .formulaire label { color: var(--sur-sombre-doux); }
.carte-contact .petit { color: var(--sur-sombre-muet); }
.carte-contact a { color: var(--accent-sur-sombre); }
.formulaire .btn { align-self: flex-start; }
/* « (facultatif) » dans un intitulé : la mention doit se voir sans peser autant que le nom du champ,
   sinon on la lit comme une consigne de plus. */
.formulaire .facultatif { font-weight: 400; opacity: 0.75; }
/* La phrase d'explication sous un champ lui appartient : elle se colle à lui, loin du champ suivant. */
.formulaire .petit { margin: -6px 0 2px; }
.piege { position: absolute; left: -9999px; }

/* Pied */
.pied { background: var(--fond-profond); color: var(--sur-profond-doux); padding: 56px clamp(16px, 5vw, 72px) 40px; }
.pied-grille { max-width: var(--largeur); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.pied-bloc { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pied-bloc a, .pied-bloc span { color: var(--sur-profond-doux); }
.pied-bloc a:hover { color: var(--accent-sur-profond); }
/* Mention qui n'est pas un lien, dans une colonne qui n'en contient que : elle doit se lire plus discrète,
   sinon on clique dessus pour rien. */
.pied-bloc .pied-texte { color: var(--sur-profond-muet); }
.pied-marque { font-family: var(--police-titres); font-size: 30px; color: var(--accent-sur-profond) !important; }
.pied-titre { color: var(--sur-profond) !important; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
/* Ce titre-là est aussi un lien : il reste un titre, mais il doit se signaler au survol. */
a.pied-titre:hover { color: var(--accent-sur-profond) !important; text-decoration: underline; text-underline-offset: 3px; }
.reseaux { display: flex; gap: 12px; margin-top: 4px; }
.reseaux a { width: 40px; height: 40px; border: 1px solid rgba(var(--ligne-profond-rgb),0.35); border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--accent-sur-profond); }
.pied-bas { max-width: var(--largeur); margin: 36px auto 0; border-top: 1px solid rgba(var(--ligne-profond-rgb),0.18); padding-top: 22px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--sur-profond-muet); }
.pied-bas a { color: var(--accent-sur-profond); }

/* Écrans moyens et téléphones */
@media (max-width: 1100px) {
  .grille-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: 18px; }
}
/* Le menu replié dès 1100 px : entre 900 et 1100, les sept liens ne tiennent plus à côté du logo. */
@media (max-width: 1100px) {
  .entete { height: 88px; padding: 0 14px; }
  .marque { gap: 10px; padding-right: 0; }
  .marque .mascotte { height: 72px; }
  /* Centré sur la barre : mascotte à gauche et bouton menu à droite ont la même largeur, le milieu de l'écran est le milieu entre les deux. */
  .marque .logo { height: 78px; margin: 0; position: absolute; left: 50%; top: -10px; transform: translateX(-50%); align-self: auto; }  /* calligraphie (69 % de 78) à 44 px, l'axe du bouton menu ; le vide du haut de l'image dépasse, pas l'écriture */
  .logo-centre .marque .logo { height: 64px; top: 50%; transform: translate(-50%, -50%); }
  .bouton-menu { display: block; }
  .nav { display: none; position: absolute; top: 88px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--clair); border-bottom: 1px solid var(--bord); padding: 8px 0 16px; z-index: 50; }
  .nav.ouvert { display: flex; }
  .nav a { padding: 14px 20px; font-size: 17px; }
  .nav .btn { margin: 8px 20px 0; }
}
@media (max-width: 900px) {
  .heros, .bande-sombre, .fiche, .grille-2 { grid-template-columns: 1fr; }
  .heros-photo { order: -1; height: 320px; }
  .heros::before { left: auto; right: 4%; bottom: 2%; transform: none; width: 150px; opacity: 0.8; }
  .heros-photo::after { background: linear-gradient(180deg, rgba(var(--sombre-rgb),0) 45%, var(--fond-sombre) 100%); }
  .grille-3, .grille-4, .releve-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .prose-2col { columns: 1; }
  .bande-photo img { min-height: 260px; }
  .carte-contact { padding: 24px; }
}
@media (max-width: 560px) {
  .grille-3 { grid-template-columns: 1fr; }
  .releve-liste { grid-template-columns: 1fr; }
  .section-tete { align-items: flex-start; }
  .galerie-vignettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: 1fr; }
  .carte-titre { font-size: 20px; }
  .lignes dd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== Habillage éditorial (réglage theme.habillage = 'editorial') =====
   Le graphisme validé au configurateur pour Silver of Dreams (18 sept. 2026) : même structure de pages que le socle,
   autre allure — en-tête fondu dans le héros, surtitres à filet, italique dans le titre, boutons en relief, cartes plus
   grandes, bande des reproducteurs, pied de page à logo. Tout est préfixé par body.habillage-editorial : sans ce
   réglage, pas une règle ne s'applique, la charte d'origine ne bouge pas d'un pixel. */
.habillage-editorial { --gris: var(--gris-derive); --bord: var(--bord-derive); font-size: 17px; line-height: 1.55; }
.habillage-editorial h2:where(:not(.carte-titre)) { font-size: clamp(30px, 3.4vw, 46px); }
.habillage-editorial .section { padding: clamp(48px, 6vw, 96px) clamp(16px, 5vw, 72px); gap: 36px; }
.habillage-editorial .surtitre { letter-spacing: 0.22em; gap: 10px; }
.habillage-editorial .surtitre::before { content: ''; width: 24px; height: 1px; background: currentColor; flex: none; }
.habillage-editorial .lien { display: inline-flex; align-items: center; gap: 8px; color: var(--or-fonce); min-height: 44px; }
.habillage-editorial .lien-or { color: var(--accent-sur-sombre); }
.habillage-editorial .ico { width: 18px; height: 18px; flex: none; }
.habillage-editorial .btn { min-height: 50px; padding: 0 26px; gap: 10px; transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; }
.habillage-editorial .btn:hover { transform: translateY(-1px); }
.habillage-editorial .btn-or { box-shadow: 0 8px 24px rgba(var(--ombre-rgb), 0.18); }
.habillage-editorial .btn-or:hover { filter: brightness(1.06); }
.habillage-editorial .nav .btn { min-height: 44px; padding: 0 22px; }
.habillage-editorial .encart { background: var(--blanc); border-color: var(--bord); }
.habillage-editorial .photos-portee img { border-radius: 4px; }
/* En-tête : le logo à gauche même quand il est centré verticalement ; sur l'accueil, la barre se fond dans le héros
   (logo et menu posés sur le dégradé, un simple filet dessous), comme sur la maquette. */
.habillage-editorial .entete { border-bottom-color: rgba(var(--ligne-rgb), 0.12); }
.habillage-editorial.logo-centre .marque .logo { margin: 0; }
.habillage-editorial.accueil .entete { background: transparent; z-index: 5; }
.habillage-editorial.accueil .heros { margin-top: -136px; min-height: 760px; }
.habillage-editorial.accueil .heros-texte { padding-top: calc(136px + clamp(24px, 3vw, 48px)); }
.habillage-editorial .heros h1 { font-size: clamp(38px, 4.6vw, 68px); }
.habillage-editorial .heros-sous { font-size: 19px; line-height: 1.6; }
.habillage-editorial .heros-preuves { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; gap: 6px 14px; }
/* Cartes : plus d'air, titre plus grand, relief au survol */
.habillage-editorial .carte { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.habillage-editorial .carte:hover { box-shadow: 0 18px 44px rgba(var(--ombre-rgb), 0.14); transform: translateY(-3px); }
.habillage-editorial .grille-3 .carte-photo { aspect-ratio: 4 / 4.6; }
.habillage-editorial .carte-corps { padding: 22px 24px 24px; gap: 10px; }
.habillage-editorial .carte-titre { font-size: 28px; }
.habillage-editorial .carte-sous { font-size: 15px; }
.habillage-editorial .carte-prix { font-family: var(--police-titres); font-size: 27px; color: var(--or-fonce); }
.habillage-editorial .badge { padding: 6px 12px; letter-spacing: 0.12em; font-weight: 700; }
/* Reproducteurs sur l'accueil : une bande de la couleur du héros, photos nues, nom en couleur d'accent */
.bande-repro { background: var(--fond-sombre); color: var(--sur-sombre); }
.bande-repro h2:where(:not(.carte-titre)), .bande-repro h3:where(:not(.carte-titre)) { color: var(--sur-sombre); }
.bande-repro .surtitre { color: var(--accent-sur-sombre); }
.bande-repro .sous { color: var(--sur-sombre-doux); }
.bande-repro .carte { background: transparent; border: 0; border-radius: 0; color: var(--sur-sombre); }
.bande-repro .carte:hover { color: var(--sur-sombre); box-shadow: none; }
.bande-repro .carte-photo { border-radius: 6px; aspect-ratio: 4 / 5; }
.bande-repro .carte-corps { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 0; }
.bande-repro .carte-titre { font-size: 27px; color: var(--accent-sur-sombre); }
.bande-repro .carte-sous { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sur-sombre-doux); text-align: right; }
.bande-repro .bloc-releve { color: var(--encre); }
.bande-repro .bloc-releve h3 { color: var(--encre); }
/* Avis, pied de page */
.habillage-editorial .avis { padding: 32px; font-size: 23px; line-height: 1.4; }
.habillage-editorial .pied-titre { font-size: 12px; letter-spacing: 0.24em; }
.pied-logo-lien { display: inline-block; margin-bottom: 4px; }
.pied-logo { height: 64px; width: auto; }
.pied-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pied-contact a, .pied-contact span { display: inline-flex; align-items: center; gap: 10px; }
.pied-contact .ico { color: var(--or); }
/* Les comptes nommés (réglage autres_reseaux) : en toutes lettres, le logo du réseau devant — jamais une icône muette. */
.reseaux-nommes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; }
.reseaux-nommes a { display: inline-flex; align-items: center; gap: 8px; }
.reseaux-nommes .ico { color: var(--or); }
@media (max-width: 1100px) {
  /* Sous 1100 px la barre fait 88 px et la photo passe au-dessus du texte : la barre redevient opaque, sans chevauchement. */
  .habillage-editorial.accueil .entete { background: var(--clair); }
  .habillage-editorial.accueil .heros { margin-top: 0; min-height: 0; }
  .habillage-editorial.accueil .heros-texte { padding-top: clamp(40px, 5vw, 72px); }
}

/* --- Les touches du 18 sept. 2026 (« je le trouve fade ») : filets de métal, bande des reproducteurs sombre, photos
   en arche, filigrane de pattes, cachet, cartes blanches, pied de page sombre, apparitions au défilement. Le métal
   (--metal-*) vient de la charte (theme.metal_*), à défaut des accents. Toujours sous body.habillage-editorial. */
.habillage-editorial {
  --filet: linear-gradient(90deg, var(--metal-fonce) 0%, var(--metal-clair) 48%, var(--metal) 72%, var(--metal-lumiere) 100%);
  --patte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate(-18 32 32)'%3E%3Cellipse cx='21' cy='19' rx='5.5' ry='7.5'/%3E%3Cellipse cx='43' cy='19' rx='5.5' ry='7.5'/%3E%3Cellipse cx='10' cy='31' rx='5' ry='6.5'/%3E%3Cellipse cx='54' cy='31' rx='5' ry='6.5'/%3E%3Cpath d='M32 29c-9 0-17 8-17 16 0 5 4 9 9 8 3 0 5-1 8-1s5 1 8 1c5 1 9-3 9-8 0-8-8-16-17-16z'/%3E%3C/g%3E%3C/svg%3E");
}
/* 1. Filets : surtitres, sous chaque titre, boutons contour, séparateurs */
.habillage-editorial .surtitre::before { height: 2px; width: 28px; background: var(--filet); border-radius: 2px; }
.habillage-editorial .section-tete h2::after, .habillage-editorial .bande-texte h2::after, .habillage-editorial .carte-contact h2::after, .habillage-editorial .section-bas h2::after { content: ''; display: block; width: 58px; height: 3px; margin-top: 16px; border-radius: 3px; background: var(--filet); }
.habillage-editorial .section-tete.centre h2::after { margin-left: auto; margin-right: auto; }
.habillage-editorial .btn-contour { border: 1.5px solid var(--metal); color: var(--contour-texte); background: rgba(255,255,255,0.35); }
.habillage-editorial .btn-contour:hover { background: var(--metal-lumiere); border-color: var(--metal-fonce); color: var(--encre); }
.habillage-editorial .lien:hover { color: var(--metal-fonce); }
.habillage-editorial .filet { width: 120px; height: 2px; margin: 0 auto; background: var(--filet); border-radius: 2px; opacity: 0.9; }
.habillage-editorial .nav .btn-or { box-shadow: 0 0 0 1px rgba(var(--metal-rgb), 0.35), 0 8px 24px rgba(var(--ombre-rgb), 0.16); }
/* 2. Bande des reproducteurs : accent foncé en fond, noms en métal clair, photos droites cerclées de métal clair */
.habillage-editorial .bande-repro { background: var(--or-fonce); background: radial-gradient(120% 90% at 85% 10%, rgba(255,255,255,0.10), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--or-fonce) 78%, var(--encre)) 0%, var(--or-fonce) 60%, color-mix(in srgb, var(--or-fonce) 82%, var(--or)) 100%); color: var(--clair); }
.habillage-editorial .bande-repro h2:where(:not(.carte-titre)), .habillage-editorial .bande-repro h3:where(:not(.carte-titre)), .habillage-editorial .bande-repro .carte { color: var(--clair); }
.habillage-editorial .bande-repro .surtitre, .habillage-editorial .bande-repro .carte-titre { color: var(--metal-clair); }
.habillage-editorial .bande-repro .sous { color: var(--clair); color: color-mix(in srgb, var(--clair) 80%, transparent); }
.habillage-editorial .bande-repro .carte-sous { color: var(--clair); color: color-mix(in srgb, var(--clair) 72%, transparent); }
.habillage-editorial .bande-repro .carte .carte-photo { border-radius: 4px; aspect-ratio: 4 / 5; outline: var(--cadre-clair); outline-offset: 7px; transition: transform 0.35s ease; }
.habillage-editorial .bande-repro .carte:hover .carte-photo { transform: translateY(-4px); }
.habillage-editorial .bande-repro .carte-corps { padding-top: 22px; }
.habillage-editorial .bande-repro .btn-sombre { background: var(--clair); color: var(--or-fonce); }
.habillage-editorial .bande-repro .btn-contour-or { border-color: var(--clair); border-color: color-mix(in srgb, var(--clair) 55%, transparent); color: var(--clair); }
.habillage-editorial .bande-repro .btn-contour-or:hover { background: rgba(255,255,255,0.1); }
/* 3. Les cadres (18 sept. 2026, « ça fait Wix ») : plus d'arches ni d'arrondis, plus de formes qui changent d'une page
   à l'autre. Toutes les photos sont droites (4 px) et cerclées du même filet de métal à 8 px, comme des tirages
   accrochés ; les cartes les montent sur un passe-partout de 12 px ; les boîtes suivent (6 px). Sur fond clair, une
   ombre chaude teintée du métal ; sur la bande sombre, le filet passe au métal clair (règle 2). */
.habillage-editorial { --cadre: 1px solid rgba(var(--metal-fonce-rgb), 0.55); --cadre-clair: 1px solid rgba(var(--metal-clair-rgb), 0.75); --ombre-douce: 0 22px 48px -18px rgba(var(--metal-fonce-rgb), 0.35); }
.habillage-editorial .photos-portee .carte-photo, .habillage-editorial .galerie-principale img, .habillage-editorial .prose img, .habillage-editorial .bande-photo img { border-radius: 4px; outline: var(--cadre); outline-offset: 7px; box-shadow: var(--ombre-douce); transition: transform 0.45s ease, box-shadow 0.45s ease, outline-color 0.45s ease; }
.habillage-editorial .photos-portee .carte-photo:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -18px rgba(var(--metal-fonce-rgb), 0.45); outline-color: var(--metal-fonce); }
.habillage-editorial .grille-3, .habillage-editorial .grille-4 { gap: 28px; }
.habillage-editorial .galerie { gap: 24px; }
.habillage-editorial .galerie-principale { border-radius: 0; overflow: visible; background: transparent; }
.habillage-editorial .vignette, .habillage-editorial .vignette img { border-radius: 3px; }
.habillage-editorial .vignette.active { outline: 1px solid var(--metal-fonce); outline-offset: 3px; }
.habillage-editorial .prose figure { margin: 14px 0 32px; }
.habillage-editorial .carte { padding: 12px 12px 0; }
.habillage-editorial .carte .carte-photo { border-radius: 3px; outline: 1px solid rgba(var(--metal-fonce-rgb), 0.45); outline-offset: 4px; }
.habillage-editorial .carte-corps { padding-left: 10px; padding-right: 10px; }
.habillage-editorial .carte-ligne-chat { padding: 12px; }
.habillage-editorial .bande-repro .carte { padding: 0; }
.habillage-editorial .bande-repro .carte-corps { padding-left: 0; padding-right: 0; }
.habillage-editorial img.carre, .habillage-editorial img.rond, .habillage-editorial .parent img.rond { border-radius: 4px; border: 0; box-shadow: none; outline: 1px solid rgba(var(--metal-fonce-rgb), 0.4); outline-offset: 3px; }
.habillage-editorial .bande-photo { position: relative; padding: clamp(28px, 4.5vw, 64px) 20px clamp(28px, 4.5vw, 64px) clamp(16px, 5vw, 72px); }
.habillage-editorial .bande-photo img { min-height: 460px; }
.habillage-editorial .portee, .habillage-editorial .section > .encart, .habillage-editorial .carte-contact, .habillage-editorial .atouts { border-radius: 6px; }
.habillage-editorial .prose-claire { opacity: 0.85; }
.habillage-editorial .prose-claire, .habillage-editorial .prose-claire p { color: var(--sur-sombre); }
/* 4. Filigrane de pattes (un masque, la couleur vient de la charte) et cachet rond qui tourne */
.habillage-editorial .heros-texte::before, .habillage-editorial .bande-texte::before, .habillage-editorial .pied::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--metal-fonce); opacity: 0.055;
  -webkit-mask-image: var(--patte), var(--patte); -webkit-mask-size: 150px 150px, 96px 96px; -webkit-mask-position: 24px 40px, 100px 120px; -webkit-mask-repeat: repeat;
  mask-image: var(--patte), var(--patte); mask-size: 150px 150px, 96px 96px; mask-position: 24px 40px, 100px 120px; mask-repeat: repeat; }
.habillage-editorial .bande-texte { position: relative; z-index: 0; }
.habillage-editorial .bande-texte::before { opacity: 0.04; }
.habillage-editorial .pied { position: relative; z-index: 0; }
.habillage-editorial .pied::before { opacity: 0.05; }
.habillage-editorial .cachet { position: absolute; z-index: 4; left: 50%; bottom: 84px; width: 132px; height: 132px; margin-left: -66px; border-radius: 50%; background: var(--clair); box-shadow: 0 14px 34px rgba(var(--ombre-rgb), 0.18), 0 0 0 1px rgba(var(--metal-fonce-rgb), 0.35); }
.habillage-editorial .cachet svg { width: 100%; height: 100%; display: block; }
.habillage-editorial .cachet-tourne { transform-box: fill-box; transform-origin: center; }
.habillage-editorial .cachet text { fill: var(--metal-fonce); font-family: var(--police-texte); font-weight: 700; }
.habillage-editorial .cachet-anneau { fill: none; stroke: rgba(var(--metal-fonce-rgb), 0.45); stroke-dasharray: 2 3; }
.habillage-editorial .cachet-patte { fill: var(--or); }
@keyframes cachet-tourne { to { transform: rotate(360deg); } }
/* 5. Encadré de l'accueil et carte contact en blanc, liseré de métal, champs blancs */
.habillage-editorial .section > .encart { border: 1px dashed var(--metal-clair); border-radius: 6px; padding-left: 64px; position: relative; }
.habillage-editorial .section > .encart::before { content: ''; position: absolute; left: 22px; top: 50%; width: 26px; height: 26px; margin-top: -13px; background-color: var(--metal); opacity: 0.8; -webkit-mask: var(--patte) center / contain no-repeat; mask: var(--patte) center / contain no-repeat; }
.habillage-editorial .carte-contact { background: var(--blanc); border-radius: 6px; box-shadow: 0 26px 60px rgba(var(--ombre-rgb), 0.10); position: relative; overflow: hidden; color: var(--encre); }
.habillage-editorial .carte-contact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--filet); }
.habillage-editorial .carte-contact h2, .habillage-editorial .carte-contact .formulaire label { color: var(--encre); }
.habillage-editorial .carte-contact a { color: var(--or-fonce); }
.habillage-editorial .carte-contact .formulaire input, .habillage-editorial .carte-contact .formulaire textarea { background: var(--blanc); border: 1px solid var(--bord); border-radius: 6px; color: var(--encre); }
.habillage-editorial .carte-contact .formulaire input:focus, .habillage-editorial .carte-contact .formulaire textarea:focus { outline: 2px solid var(--or-clair); border-color: var(--or); }
.habillage-editorial .carte-contact .petit { color: var(--gris); }
/* 6. Pied de page sombre : encre, titres en métal clair */
.habillage-editorial .pied { background: var(--encre); background: linear-gradient(180deg, color-mix(in srgb, var(--encre) 94%, var(--fond-sombre)), color-mix(in srgb, var(--encre) 90%, black)); color: rgba(var(--clair-rgb), 0.72); }
.habillage-editorial .pied-bloc a, .habillage-editorial .pied-bloc span { color: rgba(var(--clair-rgb), 0.72); }
.habillage-editorial .pied-bloc a:hover { color: var(--metal-clair); }
.habillage-editorial .pied-titre, .habillage-editorial .pied-marque { color: var(--metal-clair) !important; }
.habillage-editorial .pied-contact .ico { color: var(--metal); }
.habillage-editorial .reseaux-nommes .ico { color: var(--metal); }
.habillage-editorial .pied-bas { border-top-color: rgba(var(--clair-rgb), 0.14); color: rgba(var(--clair-rgb), 0.5); }
.habillage-editorial .pied-bas a { color: var(--metal-clair); }
/* 7. Apparitions au défilement (classe posée par site.js) et flèches qui glissent — rien de tout cela si l'utilisateur
   préfère moins d'animation : le cachet ne tourne pas, les blocs sont là d'emblée. */
@media (prefers-reduced-motion: no-preference) {
  .habillage-editorial .cachet-tourne { animation: cachet-tourne 30s linear infinite; }
  .habillage-editorial .apparait { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .habillage-editorial .apparait.visible { opacity: 1; transform: none; }
  .habillage-editorial .btn .ico, .habillage-editorial .lien .ico { transition: transform 0.25s ease; }
  .habillage-editorial .btn:hover .ico, .habillage-editorial .lien:hover .ico { transform: translateX(4px); }
}
/* 9. Femelles sur le rose, mâles sur le vert (Olivia) : la couleur de fond de la charte pour elles, l'accent pour eux.
   Cartes teintées sur fond clair ; sur la bande sombre, seul le nom prend la couleur (le cadre reste en métal, règle 3). */
.habillage-editorial .pastille-sexe { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; vertical-align: middle; }
.habillage-editorial .sexe-femelle { background: var(--fond-profond); color: var(--encre); }
.habillage-editorial .sexe-male { background: var(--or-clair); color: var(--or-fonce); }
.habillage-editorial .carte-femelle { background: var(--fond-sombre); background: color-mix(in srgb, var(--fond-sombre) 55%, var(--blanc)); border-color: var(--fond-profond); }
.habillage-editorial .carte-male { background: var(--or-clair); background: color-mix(in srgb, var(--or-clair) 35%, var(--blanc)); border-color: var(--or-clair); }
.habillage-editorial .bande-repro .carte-femelle, .habillage-editorial .bande-repro .carte-male { background: transparent; }
.habillage-editorial .bande-repro .carte-femelle .carte-titre { color: var(--fond-sombre); }
.habillage-editorial .bande-repro .carte-male .carte-titre { color: var(--or-clair); }
.habillage-editorial .bande-repro .sexe-femelle { background: var(--fond-sombre); }
.habillage-editorial .fiche-femelle .surtitre { color: var(--encre); background: var(--fond-profond); padding: 4px 12px; border-radius: 999px; }
.habillage-editorial .fiche-male .surtitre { color: var(--or-fonce); background: var(--or-clair); padding: 4px 12px; border-radius: 999px; }
.habillage-editorial .fiche-femelle .surtitre::before, .habillage-editorial .fiche-male .surtitre::before { display: none; }
/* 8. La carte des atouts (réglage `atouts`) : carte blanche qui chevauche le bas du héros */
.habillage-editorial .atouts { position: relative; z-index: 2; margin: -48px clamp(16px, 5vw, 72px) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--blanc); border-radius: 6px; box-shadow: 0 26px 60px rgba(var(--ombre-rgb), 0.12); padding: 30px 10px; overflow: hidden; }
.habillage-editorial .atouts::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--filet); }
.habillage-editorial .atout { display: flex; gap: 16px; align-items: flex-start; padding: 6px 26px; border-left: 1px solid var(--bord); }
.habillage-editorial .atout:first-child { border-left: 0; }
.habillage-editorial .atout-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--metal-lumiere); display: grid; place-items: center; color: var(--metal-fonce); }
.habillage-editorial .atout-ico svg { width: 22px; height: 22px; }
.habillage-editorial .atout strong { display: block; font-family: var(--police-titres); font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 6px; color: var(--encre); }
.habillage-editorial .atout span { font-size: 15px; line-height: 1.5; color: var(--gris); }
@media (max-width: 1100px) {
  .habillage-editorial .cachet { display: none; }
  .habillage-editorial .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; margin-top: -32px; }
  .habillage-editorial .atout:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .habillage-editorial .atouts { grid-template-columns: 1fr; padding: 22px 8px; }
  .habillage-editorial .atout { border-left: 0; padding: 10px 18px; }
}
/* 10. Ce qui fait rêver (18 sept. 2026, « classe, cocooning ») : une lumière douce qui tombe sur le haut du héros et de
   l'histoire, le chapeau des sections en italique de titrage, le filet de métal en tête de la carte des atouts comme
   sur celle du contact. Rien de tout cela ne touche la structure des pages. */
.habillage-editorial .heros-texte::after, .habillage-editorial .bande-texte::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 65% at 10% 0%, rgba(255, 255, 255, 0.22), transparent 70%); }
.habillage-editorial .section-tete .sous { font-family: var(--police-titres); font-style: italic; font-size: 19px; line-height: 1.5; }
@media (max-width: 900px) {
  /* Sous 900 px les grilles resserrent leur pas à 14 px : trop peu pour deux filets à 8 px des photos. */
  .habillage-editorial .grille-3, .habillage-editorial .grille-4, .habillage-editorial .photos-portee { gap: 26px; }
}

/* =====================================================================================================
   Habillage IMMERSIF (theme.habillage = 'immersif') — la maquette validée par Silver of Dreams, 19 sept. 2026.
   Voile rose et paillettes, photo du héros fondue dans la brume, slogan en écriture manuscrite dorée, bandes
   charbon aux cartes à prénoms dorés, liste à icônes qui se déplie pour la race, barre de contact fixe sur
   téléphone. Tout est préfixé par la classe du corps : les autres habillages ne voient rien de ces règles.
   Les roses viennent de la charte (fond_sombre, fond_teal, fond_profond, métal) ; l'or et le charbon sont ceux
   de la maquette. ===================================================================================== */
.habillage-immersif {
  --imm-rose: var(--fond-sombre); --imm-rose-clair: var(--fond-teal); --imm-rose-profond: var(--fond-profond); --imm-creme: #fcf7f6;
  --imm-encre: var(--encre); --imm-encre-douce: #5b5054; --imm-encre-muette: #8d7f84;
  --imm-charbon: #1d1a1c; --imm-charbon-2: #26212a; --imm-sur-charbon: #f6e8ea; --imm-sur-charbon-doux: #cdbcc2; --imm-sur-charbon-muet: #9a8d93;
  --imm-rosegold: var(--metal-fonce); --imm-rosegold-clair: var(--metal-clair);
  --imm-or: #c8975d; --imm-or-clair: #ecd2a4; --imm-or-fonce: #9d6f3d;
  --imm-script: 'Allura', 'Brush Script MT', cursive;
  --imm-gouttiere: max(20px, calc((100% - 1280px) / 2));
  --imm-ombre: 0 30px 60px -28px rgba(120, 70, 60, 0.45);
  background: var(--imm-creme); color: var(--imm-encre);
}
.habillage-immersif h1, .habillage-immersif h2:where(:not(.carte-titre)), .habillage-immersif h3:where(:not(.carte-titre)) { font-weight: 500; letter-spacing: 0; text-wrap: balance; }
.habillage-immersif h2:where(:not(.carte-titre)) { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.08; }
.habillage-immersif .surtitre, .habillage-immersif .heros .surtitre, .habillage-immersif .surtitre.or { font-size: 11.5px; letter-spacing: 0.34em; color: var(--imm-encre-douce); font-weight: 600; gap: 14px; }
.habillage-immersif .surtitre::after { content: ''; width: 44px; height: 1px; background: var(--imm-or); }
.habillage-immersif .dore { font-family: var(--imm-script); font-weight: 400; line-height: 1; background: linear-gradient(95deg, #a8773f 0%, #e3c184 45%, #b8894b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.habillage-immersif .manuscrit { font-family: var(--imm-script); font-size: 32px; line-height: 1.05; color: var(--imm-or-fonce); }
.habillage-immersif .manuscrit .coeur, .habillage-immersif .pied-note .coeur { display: block; font-family: var(--police-texte); font-size: 18px; color: var(--imm-rosegold); margin-top: 6px; }
.habillage-immersif .btn { letter-spacing: 0.18em; text-transform: uppercase; font-size: 11.5px; min-height: 48px; padding: 0 26px; gap: 10px; border: 1px solid transparent; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.habillage-immersif .btn-or, .habillage-immersif .btn-sombre, .habillage-immersif .nav .btn { background: linear-gradient(135deg, #cfb08a 0%, #e8d3b5 52%, #c8a87d 100%); color: #42351f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 28px -16px rgba(141, 101, 47, 0.45); filter: none; }
.habillage-immersif .btn-or:hover, .habillage-immersif .btn-sombre:hover, .habillage-immersif .nav .btn:hover { color: #42351f; transform: translateY(-2px); filter: none; }
.habillage-immersif .btn-contour { border-color: rgba(200, 168, 125, 0.9); color: var(--imm-encre); background: rgba(255, 255, 255, 0.35); }
.habillage-immersif .btn-contour:hover { background: rgba(200, 151, 93, 0.12); color: var(--imm-encre); }
.habillage-immersif .btn-clair, .habillage-immersif .btn-contour-or { border-color: rgba(236, 210, 164, 0.7); color: var(--imm-sur-charbon); background: transparent; }
.habillage-immersif .btn-clair:hover, .habillage-immersif .btn-contour-or:hover { background: rgba(236, 210, 164, 0.12); color: #fff; }
.habillage-immersif .lien, .habillage-immersif .lien-or { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--imm-or-fonce); }
.habillage-immersif .lien .ico { transition: transform 0.25s ease; }
.habillage-immersif .lien:hover .ico { transform: translateX(5px); }
.habillage-immersif .filet { display: none; }
.habillage-immersif .section { position: relative; padding: clamp(60px, 7vw, 104px) var(--imm-gouttiere); gap: 36px; }
.habillage-immersif .section > *:not(.paillettes) { position: relative; z-index: 1; }
.habillage-immersif .paillettes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.habillage-immersif .paillettes circle { fill: #fff; }
.habillage-immersif .bande-charbon .paillettes circle { fill: #f3d6c6; }
.habillage-immersif .bande-charbon .paillettes circle[filter] { opacity: 0.09; }
@media (prefers-reduced-motion: no-preference) {
  .habillage-immersif .paillettes .lent { animation: imm-scintille 6s ease-in-out infinite alternate; }
  .habillage-immersif .paillettes .vif { animation: imm-scintille 3.2s ease-in-out infinite alternate-reverse; }
  @keyframes imm-scintille { from { opacity: 0.25; } to { opacity: 0.85; } }
  .habillage-immersif .glisse { transform: translateY(16px); transition: transform 0.7s ease; }
  .habillage-immersif .glisse.visible { transform: none; }
  .habillage-immersif .heros-immersif .heros-photo img, .habillage-immersif .heros-immersif .heros-video { animation: imm-respire 20s ease-in-out infinite alternate; }
  @keyframes imm-respire { from { transform: scale(1); } to { transform: scale(1.05); } }
  .habillage-immersif .cachet-tourne { transform-origin: 66px 66px; animation: imm-tourne 40s linear infinite; }
  @keyframes imm-tourne { to { transform: rotate(360deg); } }
}

/* En-tête : le logo en grand sur une barre rose, le menu, le bouton champagne */
.habillage-immersif .entete { position: sticky; top: 0; z-index: 40; height: auto; min-height: 92px; max-width: none; margin: 0; padding: 10px var(--imm-gouttiere); background: var(--imm-rose-clair); border-bottom: 1px solid rgba(var(--metal-fonce-rgb), 0.16); }
.habillage-immersif .marque { flex: 0 0 auto; padding: 0; gap: 12px; }
.habillage-immersif .marque .logo { height: 74px; width: auto; position: static; transform: none; margin: 0; filter: drop-shadow(0 4px 10px rgba(120, 70, 60, 0.14)); }
.habillage-immersif .marque .mascotte { height: 64px; }
.habillage-immersif .nav { gap: 26px; }
.habillage-immersif .nav a { font-size: 13px; letter-spacing: 0.06em; color: var(--imm-encre); }
.habillage-immersif .nav a:hover, .habillage-immersif .nav a[aria-current="page"] { color: var(--imm-rosegold); }
.habillage-immersif .nav .btn { min-height: 42px; padding: 0 22px; font-size: 11px; }
.habillage-immersif .bouton-menu { color: var(--imm-encre); }

/* Héros : voile rose et paillettes, la photo (ou la vidéo) fondue dans la brume, le slogan doré, le titre en dessous */
.habillage-immersif .heros-immersif { position: relative; isolation: isolate; overflow: hidden; min-height: min(90vh, 880px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: clamp(40px, 6vw, 80px) var(--imm-gouttiere); background: radial-gradient(80% 90% at 70% 40%, var(--imm-rose-clair) 0%, var(--imm-rose) 45%, var(--imm-rose-profond) 100%); }
.habillage-immersif .heros-immersif::before { display: none; }
/* Le fondu dans la brume porte sur le CADRE, pas sur l'image : le voile sombre (::after) est un enfant du cadre et
   n'était pas masqué, si bien qu'il traçait une couture verticale nette là où le cadre commence. Masquer le parent
   fond l'image ET son voile ensemble, et la respiration lente de l'image se fait derrière un bord qui ne bouge pas. */
.habillage-immersif .heros-immersif .heros-photo { position: absolute; inset: 0; left: 30%; z-index: -1; min-height: 0; overflow: visible; -webkit-mask-image: radial-gradient(ellipse 54% 70% at 56% 46%, #000 30%, rgba(0, 0, 0, 0.5) 54%, transparent 78%); mask-image: radial-gradient(ellipse 54% 70% at 56% 46%, #000 30%, rgba(0, 0, 0, 0.5) 54%, transparent 78%); }
/* Une vidéo d'éleveuse vient d'un téléphone, donc debout (9/16). Dans un cadre couché elle serait agrandie de près
   de deux fois — flou et cadrage au ras du museau. Le cadre se resserre alors vers la droite pour se rapprocher du
   format de la vidéo : moins d'agrandissement, donc plus de netteté, et le sujet garde sa place. */
.habillage-immersif .heros-immersif .heros-photo:has(.heros-video) { left: 40%; }
/* 14 % et non 28 : une photo de chien est verticale et le sujet occupe la moitié HAUTE. Dans un cadre couché, un
   point de fuite à 28 % coupait les oreilles dès qu'un écran était un peu large (vu en 1440 × 900). À 14 % le
   sujet passe entier de l'écran d'ordinateur le plus plat au plus haut ; ce qui entre en plus par le haut est du
   fond, que la brume efface. */
.habillage-immersif .heros-immersif .heros-photo img, .habillage-immersif .heros-immersif .heros-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: saturate(0.92) contrast(0.98); transform-origin: 56% 46%; }
.habillage-immersif .heros-immersif .heros-video { object-position: 50% 22%; }
.habillage-immersif .heros-immersif .heros-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--imm-rose) 0%, rgba(var(--sombre-rgb), 0.5) 24%, rgba(var(--sombre-rgb), 0) 52%), radial-gradient(60% 60% at 60% 50%, rgba(var(--sombre-rgb), 0) 40%, rgba(var(--sombre-rgb), 0.55) 100%); pointer-events: none; }
.habillage-immersif .heros-immersif .heros-contenu { position: relative; z-index: 1; max-width: 600px; display: flex; flex-direction: column; gap: 20px; }
.habillage-immersif .slogan { display: flex; flex-direction: column; line-height: 0.9; margin: 0; }
.habillage-immersif .slogan span { font-family: var(--police-titres); font-weight: 500; font-size: clamp(54px, 7.6vw, 106px); letter-spacing: -0.01em; color: var(--imm-encre); }
.habillage-immersif .slogan em { font-style: normal; font-size: clamp(66px, 9vw, 126px); margin: -0.06em 0 0 0.3em; }
.habillage-immersif .heros-immersif h1 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; font-style: italic; line-height: 1.4; color: var(--imm-encre-douce); max-width: 540px; }
.habillage-immersif .heros-immersif h1.h1-seul { font-size: clamp(36px, 4.4vw, 62px); font-style: normal; line-height: 1.02; color: var(--imm-encre); max-width: none; }
.habillage-immersif .heros-immersif h1 em { font-style: normal; color: var(--imm-rosegold); }
.habillage-immersif .heros-immersif h1.h1-seul em { font-family: var(--imm-script); font-weight: 400; font-size: 1.3em; line-height: 0.85; display: inline-block; background: linear-gradient(95deg, #a8773f 0%, #e3c184 45%, #b8894b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.habillage-immersif .heros-immersif .heros-sous { font-size: 16px; line-height: 1.6; color: var(--imm-encre-douce); max-width: 520px; }
.habillage-immersif .heros-immersif .heros-preuves { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--imm-encre-douce); gap: 8px 14px; }
.habillage-immersif .heros-immersif .heros-preuves span { color: var(--imm-or); }
.habillage-immersif .badge-portee { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(157, 111, 61, 0.5); background: rgba(255, 255, 255, 0.45); font-size: 13px; color: var(--imm-encre); }
.habillage-immersif .badge-portee .ico { color: var(--imm-or-fonce); }
.habillage-immersif .heros-liste { position: absolute; right: var(--imm-gouttiere); top: 50%; transform: translateY(-50%); z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; padding-right: 22px; border-right: 1px solid rgba(157, 111, 61, 0.5); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--imm-encre-douce); }
/* La note manuscrite se pose SUR la photo, dont on ne choisit pas le contenu : un halo clair la garde lisible
   aussi bien sur un pelage blanc que sur un fond sombre, sans l'encadrer. */
.habillage-immersif .heros-note { position: absolute; z-index: 1; right: calc(var(--imm-gouttiere) + 150px); bottom: clamp(56px, 8vw, 100px); max-width: 240px; text-align: right; font-size: 36px; transform: rotate(-6deg); text-shadow: 0 0 3px rgba(252, 247, 246, 0.9), 0 2px 16px rgba(252, 247, 246, 0.85); }
.habillage-immersif .heros-note .coeur { text-align: right; }
.habillage-immersif .heros-immersif .cachet { position: absolute; z-index: 2; right: var(--imm-gouttiere); bottom: clamp(24px, 5vw, 64px); left: auto; top: auto; width: 132px; height: 132px; color: #fff; opacity: 1; filter: drop-shadow(0 6px 18px rgba(42, 36, 39, 0.4)); }
.habillage-immersif .heros-immersif .cachet svg { width: 100%; height: 100%; }
.habillage-immersif .heros-immersif .cachet text { fill: #fff; font-family: var(--police-texte); font-weight: 600; }
.habillage-immersif .heros-immersif .cachet-anneau { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1; }
.habillage-immersif .heros-immersif .cachet-patte { fill: #fff; }

/* Atouts : les médaillons, séparés par des filets */
.habillage-immersif .atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: clamp(28px, 4vw, 44px) var(--imm-gouttiere); background: var(--imm-rose-clair); border-bottom: 1px solid rgba(var(--metal-fonce-rgb), 0.16); }
.habillage-immersif .atout { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 8px 20px; border-left: 1px solid rgba(var(--metal-fonce-rgb), 0.22); }
.habillage-immersif .atout:first-child { border-left: 0; }
.habillage-immersif .atout > div { display: flex; flex-direction: column; gap: 6px; }
.habillage-immersif .atout-ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 999px; border: 1px solid rgba(var(--metal-fonce-rgb), 0.55); background: var(--metal-lumiere); color: var(--imm-rosegold); }
.habillage-immersif .atout-ico .ico { width: 24px; height: 24px; }
.habillage-immersif .atout strong { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--imm-encre); }
.habillage-immersif .atout span:not(.atout-ico) { font-size: 14px; line-height: 1.5; color: var(--imm-encre-muette); max-width: 240px; }

/* Bandes charbon : les petits et les reproducteurs, cartes à prénoms dorés */
.habillage-immersif .bande-charbon { background: radial-gradient(60% 70% at 100% 0%, rgba(var(--metal-fonce-rgb), 0.22), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(200, 151, 93, 0.14), transparent 70%), var(--imm-charbon); color: var(--imm-sur-charbon); display: flex; flex-direction: column; gap: 40px; }
.habillage-immersif .bande-charbon .surtitre { color: var(--imm-sur-charbon-doux); }
.habillage-immersif .bande-charbon h2:where(:not(.carte-titre)), .habillage-immersif .bande-charbon h3:where(:not(.carte-titre)) { color: var(--imm-sur-charbon); }
.habillage-immersif .bande { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.habillage-immersif .bande-texte { display: flex; flex-direction: column; gap: 20px; padding: 0; }
.habillage-immersif .bande-texte .sous, .habillage-immersif .bande-texte p { color: var(--imm-sur-charbon-doux); font-size: 16px; line-height: 1.6; max-width: 480px; }
.habillage-immersif .bande-texte .encart { font-family: var(--police-titres); font-style: italic; font-size: 19px; color: var(--imm-sur-charbon-doux); padding: 18px 22px; border: 1px solid rgba(236, 210, 164, 0.3); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.habillage-immersif .bande-texte .encart a { color: var(--imm-or-clair); text-decoration: underline; text-underline-offset: 4px; font-style: normal; }
.habillage-immersif .cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.habillage-immersif .carte-immersive { position: relative; display: block; padding: 0; color: var(--imm-sur-charbon); background: var(--imm-charbon-2); border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 4.2; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, 0.8); outline: 1px solid rgba(236, 210, 164, 0.35); outline-offset: -8px; transition: transform 0.3s ease; }
.habillage-immersif .carte-immersive:hover { transform: translateY(-6px); color: var(--imm-sur-charbon); box-shadow: 0 34px 54px -26px rgba(0, 0, 0, 0.85); }
.habillage-immersif .carte-immersive .carte-photo, .habillage-immersif .carte-immersive .photo-absente { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 22%; border-radius: 0; outline: 0; box-shadow: none; filter: saturate(0.95); }
.habillage-immersif .carte-immersive::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 26, 28, 0) 38%, rgba(29, 26, 28, 0.55) 68%, rgba(29, 26, 28, 0.92) 100%); pointer-events: none; }
.habillage-immersif .carte-immersive .carte-corps { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px; text-align: center; }
.habillage-immersif .carte-immersive .carte-titre { font-family: var(--imm-script); font-weight: 400; font-size: 46px; line-height: 0.9; color: var(--imm-or-clair); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.habillage-immersif .carte-immersive .carte-sous { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--imm-sur-charbon-doux); text-align: center; }
.habillage-immersif .carte-immersive .pastille-sexe { border: 1px solid rgba(236, 210, 164, 0.5); background: transparent; color: var(--imm-rosegold-clair); font-size: 10.5px; letter-spacing: 0.12em; padding: 2px 9px; border-radius: 999px; }
.habillage-immersif .carte-immersive .badge { font-size: 11px; letter-spacing: 0.08em; }
.habillage-immersif .carte-muette::after { background: linear-gradient(180deg, rgba(29, 26, 28, 0) 70%, rgba(29, 26, 28, 0.5) 100%); }
.habillage-immersif .bande-charbon .bloc-releve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: center; padding: 28px 34px; border: 1px solid rgba(236, 210, 164, 0.24); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--imm-sur-charbon); }
.habillage-immersif .bande-charbon .bloc-releve-tete { flex-direction: column; align-items: flex-start; gap: 8px; }
.habillage-immersif .bande-charbon .bloc-releve h3 { font-size: 23px; color: var(--imm-sur-charbon); }
.habillage-immersif .bande-charbon .bloc-releve p { color: var(--imm-sur-charbon-doux); font-size: 15px; }
.habillage-immersif .bande-charbon .releve-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.habillage-immersif .bande-charbon .releve-item { color: var(--imm-sur-charbon); }
.habillage-immersif .bande-charbon .releve-item strong { font-family: var(--imm-script); font-weight: 400; font-size: 30px; line-height: 0.9; background: linear-gradient(95deg, #a8773f 0%, #e3c184 45%, #b8894b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.habillage-immersif .bande-charbon .releve-item span span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--imm-sur-charbon-doux); margin-top: 6px; }
.habillage-immersif .bande-charbon img.rond { width: 80px; height: 80px; border: 2px solid var(--imm-or-clair); }
.habillage-immersif .citation { font-size: 34px; text-align: right; color: var(--imm-or-clair); max-width: 300px; margin-left: auto; }
.habillage-immersif .citation .coeur { color: var(--imm-rosegold-clair); text-align: right; }

/* La race : photo fondue, texte au centre, liste à icônes qui se déplie (les titres et paragraphes SEO, intacts) */
.habillage-immersif .race-immersive { isolation: isolate; overflow: hidden; background: radial-gradient(70% 80% at 20% 50%, var(--imm-rose-clair) 0%, var(--imm-creme) 70%); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.habillage-immersif .race-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.6) 62%, transparent 86%); mask-image: radial-gradient(ellipse 70% 78% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.6) 62%, transparent 86%); }
.habillage-immersif .race-texte { display: flex; flex-direction: column; gap: 18px; }
.habillage-immersif .race-texte .dore { font-size: 44px; }
.habillage-immersif .race-intro-titre { font-family: var(--police-texte); font-weight: 600; font-size: 15px; color: var(--imm-rosegold); letter-spacing: 0.02em; }
.habillage-immersif .race-texte .prose, .habillage-immersif .race-liste .prose { font-size: 16px; line-height: 1.65; color: var(--imm-encre-douce); }
.habillage-immersif .race-texte .prose a, .habillage-immersif .race-liste .prose a { text-decoration: underline; text-underline-offset: 4px; }
.habillage-immersif .race-liste { display: flex; flex-direction: column; gap: 6px; }
.habillage-immersif .race-liste details { border-bottom: 1px solid rgba(var(--metal-fonce-rgb), 0.22); padding: 12px 0; }
.habillage-immersif .race-liste summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.habillage-immersif .race-liste summary::-webkit-details-marker { display: none; }
.habillage-immersif .race-liste summary .ico { width: 26px; height: 26px; color: var(--imm-rosegold); margin-top: 2px; }
.habillage-immersif .race-liste summary h3 { font-family: var(--police-texte); font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em; line-height: 1.45; color: var(--imm-encre); }
.habillage-immersif .race-liste details[open] summary h3 { color: var(--imm-rosegold); }
.habillage-immersif .race-liste details .prose { margin: 10px 0 4px 54px; font-size: 15px; }

/* Le bandeau « la région » et l'histoire */
.habillage-immersif .var-histoire { position: relative; isolation: isolate; overflow: hidden; background: var(--imm-rose-clair); border-top: 1px solid rgba(var(--metal-fonce-rgb), 0.16); border-bottom: 1px solid rgba(var(--metal-fonce-rgb), 0.16); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }
.habillage-immersif .var-histoire .region-photo { position: absolute; inset: 0; z-index: 0; }
.habillage-immersif .var-histoire .region-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%); }
.habillage-immersif .var-histoire > .colonne { position: relative; z-index: 1; display: flex; flex-direction: column; }
.habillage-immersif .var-histoire h2 { font-size: clamp(26px, 2.6vw, 36px); }
.habillage-immersif .var-histoire .dore { font-size: 34px; margin-top: 6px; }
.habillage-immersif .var-histoire p, .habillage-immersif .var-histoire .prose p { font-size: 15.5px; line-height: 1.65; color: var(--imm-encre-douce); margin-top: 14px; }
.habillage-immersif .var-histoire .lien { margin-top: 16px; }
.habillage-immersif .var-histoire .colonne-citation { align-items: center; text-align: center; }
.habillage-immersif .var-histoire .colonne-citation .ico { width: 56px; height: 56px; color: var(--imm-rosegold); margin-bottom: 12px; }
.habillage-immersif .var-histoire .citation { color: var(--imm-or-fonce); max-width: none; text-align: center; font-size: 30px; margin: 0; }
.habillage-immersif .var-histoire .citation .coeur { text-align: center; }

/* Conditions : trois temps */
.habillage-immersif .conditions-immersives { display: flex; flex-direction: column; gap: 40px; }
.habillage-immersif .etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.habillage-immersif .etape { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(var(--metal-fonce-rgb), 0.45); }
.habillage-immersif .etape h3 { font-size: 20px; color: var(--imm-rosegold); }
.habillage-immersif .etape p { font-size: 15.5px; line-height: 1.65; color: var(--imm-encre-douce); }
.habillage-immersif .etape a { text-decoration: underline; text-underline-offset: 4px; }

/* Livre d'or et contact */
.habillage-immersif .section-bas { background: var(--imm-rose-clair); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.habillage-immersif .vide { font-family: var(--police-titres); font-style: italic; font-size: 21px; color: var(--imm-encre-muette); }
.habillage-immersif .carte-contact { border-radius: 14px; padding: 44px; background: radial-gradient(60% 50% at 100% 0%, rgba(var(--metal-fonce-rgb), 0.32), transparent 70%), var(--imm-charbon-2); color: var(--imm-sur-charbon-doux); box-shadow: 0 40px 70px -40px rgba(44, 37, 40, 0.7); }
.habillage-immersif .carte-contact .surtitre { color: var(--imm-sur-charbon-doux); }
.habillage-immersif .carte-contact h2 { color: var(--imm-sur-charbon); font-size: clamp(26px, 2.6vw, 34px); }
.habillage-immersif .carte-contact .formulaire label { color: var(--imm-sur-charbon-doux); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.habillage-immersif .carte-contact .formulaire input, .habillage-immersif .carte-contact .formulaire textarea { border: 1px solid rgba(236, 210, 164, 0.3); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: #fff; }
.habillage-immersif .carte-contact .formulaire input:focus, .habillage-immersif .carte-contact .formulaire textarea:focus { outline: 2px solid var(--imm-or-clair); outline-offset: 1px; }
.habillage-immersif .carte-contact .petit, .habillage-immersif .carte-contact .facultatif { color: var(--imm-sur-charbon-muet); text-transform: none; letter-spacing: 0; }
.habillage-immersif .carte-contact a { color: var(--imm-or-clair); }

/* Pied : rose clair, le logo en grand, la note manuscrite */
.habillage-immersif .pied { background: var(--imm-rose); color: var(--imm-encre-douce); padding: 56px var(--imm-gouttiere) 28px; }
.habillage-immersif .pied-grille { max-width: none; }
.habillage-immersif .pied-logo { height: 84px; }
.habillage-immersif .pied-bloc a, .habillage-immersif .pied-bloc span, .habillage-immersif .pied-bloc p { color: var(--imm-encre-douce); }
.habillage-immersif .pied-bloc a:hover { color: var(--imm-rosegold); }
.habillage-immersif .pied-titre { color: var(--imm-encre) !important; letter-spacing: 0.2em; font-size: 11.5px; }
.habillage-immersif .pied-contact .ico { color: var(--imm-rosegold); }
.habillage-immersif .pied-note { font-size: 30px; margin-top: 10px; color: var(--imm-or-fonce); }
.habillage-immersif .pied-bas { max-width: none; border-top: 1px solid rgba(var(--metal-fonce-rgb), 0.2); color: var(--imm-encre-muette); }
.habillage-immersif .pied-bas a { color: var(--imm-encre-douce); }

/* Les marques des réseaux, dans leurs couleurs : dans la barre du menu et au pied de page. Pas de teinte posée
   par-dessus — le glyphe d'une plateforme se montre dans sa couleur ou en noir et blanc, jamais retouché. */
.habillage-immersif .reseaux-couleur { display: inline-flex; align-items: center; gap: 12px; }
.habillage-immersif .nav .reseaux-couleur { margin-left: 4px; padding-left: 18px; border-left: 1px solid rgba(var(--metal-fonce-rgb), 0.28); }
.habillage-immersif .reseaux-couleur a { display: inline-flex; border-radius: 6px; line-height: 0; transition: transform 0.25s ease, opacity 0.25s ease; opacity: 0.92; }
.habillage-immersif .reseaux-couleur a:hover { transform: translateY(-2px); opacity: 1; }
.habillage-immersif .pied .reseaux-couleur { margin-top: 14px; gap: 14px; }
.habillage-immersif .reseaux-nommes { margin-top: 12px; gap: 8px 16px; font-size: 0.95em; }
.habillage-immersif .reseaux-nommes svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 1100px) {
  /* Le menu se replie en panneau : les réseaux s'y rangent sur leur propre ligne, sans le filet vertical. */
  .habillage-immersif .nav .reseaux-couleur { margin: 6px 0; padding: 0; border-left: 0; }
}

/* Pages intérieures : le haut de page rosé, les titres plus légers */
.habillage-immersif main > .section:first-child { background: linear-gradient(180deg, var(--imm-rose-clair) 0%, var(--imm-creme) 100%); }
/* Une page libre (Le pomsky, Conditions, Mentions) est une « section étroite » : 860 px centrés. Le voile rosé
   ci-dessus s'arrêtait donc net à 860 px, en plein milieu de l'écran — une bande aux bords durs. La colonne de
   lecture se resserre désormais par le rembourrage, la section restant pleine largeur : le voile va d'un bord à
   l'autre et le texte garde ses ~760 px, la largeur d'un paragraphe qui se lit sans balayer la tête. */
.habillage-immersif .section-etroite { max-width: none; margin: 0; padding-left: max(var(--imm-gouttiere), calc((100% - 760px) / 2)); padding-right: max(var(--imm-gouttiere), calc((100% - 760px) / 2)); }
/* Un titre collé au paragraphe qui le suit : la colonne du contact est un div simple, sans gouttière de grille. */
.habillage-immersif h1 + .prose, .habillage-immersif h1 + .encart, .habillage-immersif h1 + p { margin-top: 22px; }
.habillage-immersif .section-tete h1 { font-size: clamp(32px, 4vw, 54px); line-height: 1.05; }
.habillage-immersif .section-tete .sous { font-family: var(--police-titres); font-style: italic; font-size: 19px; color: var(--imm-encre-douce); }
.habillage-immersif .carte { border-radius: 8px; border-color: rgba(var(--metal-fonce-rgb), 0.18); }
.habillage-immersif .carte-titre { font-weight: 500; }
.habillage-immersif .encart { border-radius: 10px; }

/* La barre fixe des téléphones (cachée sur ordinateur) */
.habillage-immersif .barre-mobile { display: none; }
@media (max-width: 900px) {
  .habillage-immersif .entete { min-height: 0; height: auto; padding: 8px 16px; }
  .habillage-immersif .marque .logo { height: 56px; }
  .habillage-immersif .marque .mascotte { height: 48px; }
  .habillage-immersif .nav { top: 100%; background: var(--imm-rose-clair); border-bottom: 1px solid rgba(var(--metal-fonce-rgb), 0.25); }
  .habillage-immersif .nav a { font-size: 15px; }
  .habillage-immersif .heros-immersif { grid-template-columns: 1fr; min-height: 0; padding: 0 0 44px; }
  /* Sur téléphone la photo passe au-dessus du texte, pleine largeur : le resserrement vers la droite réservé à la
     vidéo sur ordinateur doit être annulé ici — sinon le sujet sort de l'écran par la droite. */
  .habillage-immersif .heros-immersif .heros-photo, .habillage-immersif .heros-immersif .heros-photo:has(.heros-video) { position: relative; inset: auto; left: auto; height: min(92vw, 520px); order: -1; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 40%, rgba(0, 0, 0, 0.5) 62%, transparent 84%); mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 40%, rgba(0, 0, 0, 0.5) 62%, transparent 84%); }
  .habillage-immersif .heros-immersif .heros-photo img, .habillage-immersif .heros-immersif .heros-video { object-position: 50% 30%; }
  .habillage-immersif .heros-immersif .heros-photo::after { background: linear-gradient(180deg, rgba(var(--sombre-rgb), 0) 55%, var(--imm-rose) 100%); }
  .habillage-immersif .heros-immersif .heros-contenu { padding: 0 20px; max-width: none; margin-top: 12px; }
  .habillage-immersif .section-bas { grid-template-columns: 1fr; gap: 40px; }
  .habillage-immersif .slogan span { font-size: clamp(46px, 13vw, 66px); }
  .habillage-immersif .slogan em { font-size: clamp(58px, 15vw, 78px); }
  .habillage-immersif .heros-liste { display: none; }
  .habillage-immersif .heros-note { position: static; transform: none; text-align: left; font-size: 30px; padding: 0 20px; margin-top: 8px; }
  .habillage-immersif .heros-note .coeur { text-align: left; }
  .habillage-immersif .heros-immersif .cachet { width: 92px; height: 92px; right: 16px; bottom: auto; top: calc(min(92vw, 520px) - 108px); }
  .habillage-immersif .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .habillage-immersif .atout:nth-child(3) { border-left: 0; }
  .habillage-immersif .bande, .habillage-immersif .bande-charbon .bloc-releve, .habillage-immersif .race-immersive { grid-template-columns: 1fr; }
  .habillage-immersif .race-photo { display: none; }
  .habillage-immersif .cartes { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px; }
  .habillage-immersif .carte-immersive { flex: 0 0 68%; scroll-snap-align: start; }
  .habillage-immersif .citation { margin: 24px 0 0; text-align: left; max-width: none; }
  .habillage-immersif .citation .coeur { text-align: left; }
  .habillage-immersif .bande-charbon .releve-liste { grid-template-columns: 1fr; }
  .habillage-immersif .bande-charbon .bloc-releve { padding: 22px 20px; }
  .habillage-immersif .race-liste details .prose { margin-left: 0; }
  .habillage-immersif .etapes { grid-template-columns: 1fr; gap: 28px; }
  .habillage-immersif .carte-contact { padding: 28px 22px; }
  .habillage-immersif .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(252, 247, 246, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(var(--metal-fonce-rgb), 0.2); }
  .habillage-immersif .barre-mobile .btn { flex: 1; min-height: 46px; }
  .habillage-immersif .barre-mobile-lien { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(var(--metal-fonce-rgb), 0.45); color: var(--imm-rosegold); background: #fff; flex: none; }
  .habillage-immersif .barre-mobile-lien .ico { width: 22px; height: 22px; }
  body.habillage-immersif { padding-bottom: 76px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .habillage-immersif .race-immersive { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .habillage-immersif .race-photo { display: none; }
  .habillage-immersif .heros-liste { display: none; }
}
@media (max-width: 600px) {
  .habillage-immersif .atouts { gap: 16px 0; padding: 26px 8px; }
  .habillage-immersif .atout { padding: 4px 10px; }
  .habillage-immersif .atout strong { font-size: 11px; letter-spacing: 0.12em; }
  .habillage-immersif .atout span:not(.atout-ico) { font-size: 13px; }
}

/* Introduction d'une page liste (mâles, femelles, relève) : un bloc de lecture sous le titre, avant les cartes. */
.intro-liste { max-width: 760px; margin: -6px 0 30px; }
.intro-liste p { margin: 0 0 12px; }

/* La fiche Google et la carte de la commune (accueil sous les avis, page contact, page « Où nous trouver ») */
.avis-google-note { font-size: 18px; margin: 0 0 10px; }
.avis-google-note .etoiles { color: var(--or); letter-spacing: 2px; font-size: 20px; }
.avis-google .boutons { margin: 14px 0 6px; }
.carte-google { margin-top: 22px; }
.carte-google-cadre { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--bord); border-radius: 8px; background: var(--clair); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.carte-google-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.carte-google-lieu { margin: 10px 0 2px; font-weight: 600; font-size: 15px; }
.carte-google-note { margin: 0; }
.carte-google.chargee .carte-google-note { display: none; }