@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url(/wp-content/uploads/elementor/google-fonts/fonts/playfairdisplay-nufkd-vyszvivyub_rj3ij__anpxdtnojek72xu.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url(/wp-content/uploads/elementor/google-fonts/fonts/playfairdisplay-nufkd-vyszvivyub_rj3ij__anpxdtnogkk7.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(/wp-content/uploads/elementor/google-fonts/fonts/playfairdisplay-nufid-vyszvivyub_rj3ij__anpxdtlygfe_.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(/wp-content/uploads/elementor/google-fonts/fonts/playfairdisplay-nufid-vyszvivyub_rj3ij__anpxdtzyga.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;src:url(/wp-content/uploads/elementor/google-fonts/fonts/inter-ucc53fwrk3iltcvneqg7ca725jhhknnqk6l3uumjng.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;src:url(/wp-content/uploads/elementor/google-fonts/fonts/inter-ucc53fwrk3iltcvneqg7ca725jhhknnqk6l5uum.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/wp-content/uploads/elementor/google-fonts/fonts/inter-ucc73fwrk3iltehus_nvmrmxcp50sjia25l7suc.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/wp-content/uploads/elementor/google-fonts/fonts/inter-ucc73fwrk3iltehus_nvmrmxcp50sjia1zl7.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* hugcoon.com — L'HABILLAGE « CRÈME ET OR » (8 novembre 2026, copie de travail).
   Repris de la maquette validée par Andy (_sauvegardes/maquette-hugcoon, mon-espace-veto) :
   fond crème à motif discret de pattes, or #DBB040 adouci pour les boutons, #89580A pour les
   accents, titres en Cormorant Garamond (l'italique or porte le mot clé du H1), texte en Inter,
   boutons pilule dorés, cachet rond, carte des atouts sous le héros, logo or transparent.
   Consigne d'Andy : « on fait que l'habillage » — aucun texte, aucun titre, aucune adresse
   ne change : cette feuille remplace celle du thème premium (statiques/premium/theme.css),
   les pages gardent leurs classes. Les @font-face d'Inter et de Playfair Display (repli)
   sont PRÉPENDUES par outils/construire-habillage.js.
   Cormorant Garamond est AUTO-HÉBERGÉE (8 novembre 2026, soir) comme Cinzel en septembre :
   aucune visite n'appelle plus Google. Fichiers woff2 pris sur Google Fonts (v21, licence
   OFL 1.1 : statiques/habillage/fonts/OFL.txt) et servis sous /medias/habillage/fonts/. C'est
   la police VARIABLE (axe de graisse 300-700) : un seul fichier par style et par sous-ensemble
   couvre les graisses 500 et 600 — Google servait d'ailleurs le même fichier pour les deux.
   Sous-ensembles latin et latin-ext seulement (le site est en français et en anglais). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/medias/habillage/fonts/cormorant-garamond-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/medias/habillage/fonts/cormorant-garamond-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 600; font-display: swap; src: url(/medias/habillage/fonts/cormorant-garamond-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 600; font-display: swap; src: url(/medias/habillage/fonts/cormorant-garamond-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --fond: #fbf7f0;
  --fond-creme: #f4eadb;
  --fond-sable: #efe3cf;
  --blanc: #fffdf9;
  --encre: #241f19;
  --texte: #4a4136;
  --doux: #6f6354;
  --or: #dbb040;
  --or-clair: #f0dc9e;
  --or-lumiere: #f6ebd0;
  --or-ombre: #b8892a;
  --or-fonce: #89580a;
  --metal: #c99a22;
  --or-degrade: linear-gradient(135deg, #f0dc9e 0%, #dbb040 46%, #b8892a 100%);
  --filet-or: linear-gradient(90deg, #89580a 0%, #e8cb79 48%, #c99a22 72%, #f6ebd0 100%);
  --filet: rgba(137, 88, 10, 0.2);
  --filet-fort: rgba(137, 88, 10, 0.42);
  --ombre: 0 22px 48px -20px rgba(137, 88, 10, 0.3);
  --ombre-carte: 0 26px 60px -24px rgba(90, 60, 10, 0.22);
  --nuit: #241f19;
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --largeur: 1240px;
  --barre: 40px;
  --ligne: 96px;
  --pattes: url(/medias/habillage/pattes.svg);
  /* Les noms de l'ancien thème sombre, encore lus par des styles en ligne de l'accueil et des
     pages (FAQ de l'accueil, encadrés de corrections-seo) : remappés sur la charte claire. */
  --creme: var(--encre);
  --creme-2: var(--texte);
  --cendre: var(--doux);
  --or-pale: var(--or-fonce);
  --bronze: var(--or-fonce);
  --fumee: var(--blanc);
  --brume: var(--fond-creme);
  --texte-legacy: var(--texte);
  /* Les couleurs « globales » d'Elementor que portent encore des styles en ligne de quelques
     pages (nos-chatons, pages anglaises) : un texte crème #FFFFE7 serait invisible sur le crème. */
  --e-global-color-text: #4a4136;
  --e-global-color-primary: #89580a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--encre); margin: 0; text-wrap: balance; letter-spacing: 0; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 1.04; font-weight: 500; }
h2 { font-size: clamp(2.05rem, 3.5vw, 3.1rem); line-height: 1.1; font-weight: 500; }
h3 { font-size: 1.6rem; line-height: 1.2; }
h4 { font-size: 1.25rem; }
p { margin: 0; }
em, .it { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--or-fonce); }
p em, p .it, li em { font-size: 1.12em; line-height: 1; }
strong, b { font-weight: 600; color: var(--encre); }
a { color: var(--or-fonce); text-decoration: none; }
a:hover { color: var(--encre); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 4px; }
img, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
[hidden] { display: none !important; }
.sr { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr:focus { left: 12px; top: 12px; width: auto; height: auto; z-index: 200; background: var(--blanc); padding: 8px 14px; border-radius: 6px; }
.cadre { width: min(var(--largeur), calc(100% - 48px)); margin: 0 auto; }
.oeil { font-family: var(--sans); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--or-fonce); display: inline-flex; align-items: center; gap: 14px; }
.oeil::before { content: ""; flex: none; width: 30px; height: 2px; border-radius: 2px; background: var(--filet-or); }
.filet { height: 1px; background: linear-gradient(90deg, transparent, var(--filet-fort) 20%, var(--filet-fort) 80%, transparent); }

/* ——— Boutons : pilules dorées ——— */
.bouton, .w-bouton a, .w-form button, .bouton-lien { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 1.5px solid var(--metal); border-radius: 999px; background: rgba(255, 253, 249, 0.6); color: var(--encre); font-family: var(--sans); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; text-transform: none; text-align: center; line-height: 1.3; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, filter .3s ease; }
.bouton:hover, .w-bouton a:hover { background: var(--or-lumiere); border-color: var(--or-fonce); color: var(--encre); transform: translateY(-1px); }
.bouton.plein, .w-form button { background: var(--or-degrade); color: var(--encre); border-color: transparent; box-shadow: 0 10px 24px -10px rgba(137, 88, 10, 0.55); }
.bouton.plein:hover, .w-form button:hover { filter: brightness(1.05); background: var(--or-degrade); color: var(--encre); transform: translateY(-1px); }
.bouton.discret { border-color: var(--filet-fort); }
.bouton.wa { border-color: #25d366; color: #0b5d2a; }
.bouton.wa:hover { background: #e7f8ee; border-color: #1da851; color: #0b5d2a; }
.bouton .ic, .bouton svg.pic { display: inline-flex; flex: none; }
.bouton .ic svg, .bouton svg.pic { width: 18px; height: 18px; fill: currentColor; }
.lien { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--or-fonce); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; border-bottom: 1px solid var(--filet-fort); padding-bottom: 4px; transition: gap .3s ease, border-color .3s ease; }
.lien:hover { gap: 16px; border-color: var(--or-fonce); color: var(--or-fonce); }
.lien svg { width: 16px; height: 16px; }

/* ——— L'en-tête : une barre de contact sombre, puis le logo et le menu ———
   Andy, 8 novembre : « bien les trucs de contact et réseaux haut bas ». La barre du haut
   (téléphone, email, WhatsApp, réseaux) défile avec la page ; la ligne du logo, elle, reste
   collée en haut de l'écran (sticky avec un top négatif de la hauteur de la barre). */
.site-entete { position: sticky; top: calc(-1 * var(--barre)); z-index: 20; background: rgba(251, 247, 240, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--filet); transition: background .3s ease, box-shadow .3s ease; }
.site-entete.defile { box-shadow: 0 10px 30px -18px rgba(60, 40, 10, 0.35); }
.barre-contact { height: var(--barre); background: var(--nuit); color: #efe2c3; font-size: 0.82rem; }
.barre-contact .cadre { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 100%; width: min(1320px, calc(100% - 48px)); }
.barre-contact .coordonnees-haut { display: flex; align-items: center; gap: 26px; min-width: 0; }
.barre-contact a { display: inline-flex; align-items: center; gap: 8px; color: #f3e6c4; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; min-height: 32px; }
.barre-contact a:hover { color: #fff; }
.barre-contact .coordonnees-haut svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #e8cb79; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.barre-contact .coordonnees-haut .wa-haut svg { fill: #3fd27a; stroke: none; width: 16px; height: 16px; }
.reseaux { display: flex; gap: 8px; align-items: center; }
.reseaux a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .3s, box-shadow .3s; }
.reseaux a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(60, 40, 10, 0.3); color: #fff; }
.reseaux svg { width: 17px; height: 17px; fill: currentColor; }
.reseaux .fb { background: #1877f2; }
.reseaux .ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.reseaux .tt { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.reseaux .tt svg { filter: drop-shadow(1px 0 0 #25f4ee) drop-shadow(-1px 0 0 #fe2c55); }
.barre-contact .reseaux a { width: 28px; height: 28px; }
.barre-contact .reseaux svg { width: 13px; height: 13px; }

.site-entete .ligne { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: var(--ligne); width: min(1320px, calc(100% - 48px)); }
/* Le logo or transparent (maquette du 8 novembre). Hauteur fixe, largeur proportionnelle ;
   max-width:none et flex 0 0 auto, sinon le menu l'écrase à 0 px (vécu le 19 septembre). */
.logo { display: inline-flex; align-items: center; line-height: 1; flex: 0 0 auto; }
.logo-img { display: block; height: 70px; width: auto; max-width: none; }
.appel-rapide { display: none; }

/* Le menu : la structure du site propre (w-menu, hamburger, menu-principal, sous-menu,
   parent), mêmes liens, mêmes libellés. « Contact », le dernier, devient la pilule dorée. */
.site-entete .w-menu { position: relative; display: flex; align-items: center; }
.site-entete .menu-principal > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; }
.site-entete .menu-principal li { position: relative; }
.site-entete .menu-principal a { display: inline-block; color: var(--encre); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.005em; padding: 8px 0; position: relative; white-space: nowrap; cursor: pointer; }
.site-entete .menu-principal > ul > li > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--filet-or); transition: right .3s ease; }
.site-entete .menu-principal > ul > li:hover > a::after, .site-entete .menu-principal > ul > li > a[aria-current]::after { right: 0; }
.site-entete .menu-principal a:hover, .site-entete .menu-principal a[aria-current] { color: var(--or-fonce); }
.site-entete .menu-principal > ul > li > a[href="/contact/"] { padding: 11px 22px; border-radius: 999px; background: var(--or-degrade); color: var(--encre); box-shadow: 0 10px 22px -12px rgba(137, 88, 10, 0.6); }
.site-entete .menu-principal > ul > li > a[href="/contact/"]::after { display: none; }
.site-entete .menu-principal > ul > li > a[href="/contact/"]:hover { filter: brightness(1.05); color: var(--encre); }
.site-entete .menu-principal .sous-menu { display: none; position: absolute; top: 100%; left: -20px; z-index: 30; list-style: none; margin: 0; padding: 10px 0; min-width: 250px; width: max-content; background: var(--blanc); border: 1px solid var(--filet); border-top: 3px solid var(--or); border-radius: 0 0 8px 8px; box-shadow: var(--ombre-carte); }
.site-entete .menu-principal .sous-menu a { display: block; padding: 10px 22px; font-weight: 500; color: var(--texte); }
.site-entete .menu-principal .sous-menu a:hover { background: var(--or-lumiere); color: var(--or-fonce); }
.site-entete .menu-principal li.parent:hover > .sous-menu, .site-entete .menu-principal li.parent:focus-within > .sous-menu { display: block; }
.site-entete .menu-principal li.parent > a { padding-right: 14px; }
.site-entete .menu-principal li.parent > a::before { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid var(--or-fonce); border-bottom: 1.5px solid var(--or-fonce); transform: rotate(45deg); }
.w-menu .hamburger { display: none; width: 46px; height: 46px; border: 1px solid var(--filet-fort); border-radius: 50%; background: var(--blanc); cursor: pointer; padding: 13px 12px; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; }
.w-menu .hamburger span { display: block; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .25s, opacity .25s; }
.w-menu.ouvert .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.w-menu.ouvert .hamburger span:nth-child(2) { opacity: 0; }
.w-menu.ouvert .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1400px) {
  .site-entete .menu-principal > ul { gap: 17px; }
  .site-entete .menu-principal a { font-size: 0.82rem; }
  .logo-img { height: 64px; }
}
@media (max-width: 1290px) {
  .site-entete .menu-principal > ul { gap: 13px; }
  .site-entete .menu-principal a { font-size: 0.78rem; letter-spacing: 0; }
  .site-entete .menu-principal > ul > li > a[href="/contact/"] { padding: 10px 16px; }
  .logo-img { height: 58px; }
}
@media (max-width: 1240px) {
  /* Sous 1240 px : le logo, le bouton d'appel (téléphone ; WhatsApp reste dans la bulle), puis le bouton menu au bord. */
  :root { --ligne: 80px; }
  .site-entete .ligne { gap: 12px; justify-content: flex-start; }
  .appel-rapide { display: grid; place-items: center; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; background: var(--or-degrade); color: var(--encre); box-shadow: 0 8px 18px -8px rgba(137, 88, 10, 0.6); }
  .appel-rapide svg { width: 21px; height: 21px; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .site-entete .w-menu { order: 3; }
  .site-entete .w-menu .hamburger { display: flex; }
  .site-entete .menu-principal { display: none; position: fixed; left: 12px; right: 12px; z-index: 40; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--blanc); border: 1px solid var(--filet); border-top: 3px solid var(--or); border-radius: 8px; box-shadow: 0 24px 60px -20px rgba(60, 40, 10, 0.45); padding: 10px 0; }
  .site-entete .w-menu.ouvert .menu-principal { display: block; }
  .site-entete .menu-principal > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-entete .menu-principal a { display: block; padding: 13px 22px; white-space: normal; font-size: 1rem; }
  .site-entete .menu-principal > ul > li > a::after { display: none; }
  .site-entete .menu-principal li.parent > a::before { display: none; }
  .site-entete .menu-principal li.parent > a { padding-right: 22px; }
  .site-entete .menu-principal .sous-menu { display: block; position: static; width: auto; min-width: 0; border: 0; border-left: 2px solid var(--or-clair); border-radius: 0; margin: 0 0 8px 22px; padding: 0; box-shadow: none; background: transparent; }
  .site-entete .menu-principal .sous-menu a { padding: 9px 18px; color: var(--doux); font-size: 0.95rem; }
  .site-entete .menu-principal > ul > li > a[href="/contact/"] { margin: 10px 22px 6px; text-align: center; padding: 14px 22px; }
}
@media (max-width: 700px) {
  :root { --barre: 38px; --ligne: 70px; }
  .barre-contact .cadre { width: calc(100% - 28px); gap: 10px; }
  .barre-contact .coordonnees-haut { gap: 14px; }
  .barre-contact .courriel, .barre-contact .wa-haut { display: none; }
  .barre-contact a { font-size: 0.8rem; }
  .barre-contact .reseaux { gap: 6px; }
  .site-entete .ligne { width: calc(100% - 28px); }
  .logo-img { height: 50px; }
}

/* ——— Le corps des pages ——— */
main { display: block; }
section.bloc { padding: 96px 0; }
section.bloc + section.bloc { padding-top: 0; }
section.bloc.tete-page { padding-top: 76px; background: radial-gradient(80% 60% at 0% 0%, rgba(240, 220, 158, 0.32), transparent 70%); }
.pile { display: grid; gap: 28px; }
.pile > .w-titre + .w-texte, .pile > .w-titre + .w-contenu { margin-top: -6px; }
.cols { display: grid; gap: 64px; align-items: center; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); align-items: start; }
.cols-4 { grid-template-columns: repeat(4, 1fr); align-items: start; }
.col { display: grid; gap: 26px; align-content: start; min-width: 0; }
.col > .cols { gap: 28px; }
.w-texte p + p, .w-contenu p + p { margin-top: 1em; }
.w-texte ul, .w-texte ol, .w-contenu ul, .w-contenu ol { margin: 0.8em 0; display: grid; gap: 0.35em; }
.w-texte li::marker, .w-contenu li::marker { color: var(--or); }
.w-texte img.emoji { display: inline; width: 1em; height: 1em; vertical-align: -0.1em; }

/* Titres de page : le premier bloc porte le H1 en grand, avec un filet d'or. */
.tete-page h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.tete-page h1.long { font-size: clamp(2.05rem, 3.8vw, 3.4rem); line-height: 1.1; }
.tete-page h1.long + h2, .tete-page h1 + h2.w-titre { font-size: clamp(1.45rem, 2.3vw, 2rem); color: var(--doux); font-weight: 500; font-style: italic; }
.tete-page .w-titre-page, .tete-page h1.w-titre { padding-bottom: 26px; margin-bottom: 8px; position: relative; }
.tete-page .w-titre-page::after, .tete-page h1.w-titre::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; border-radius: 3px; background: var(--filet-or); }
.w-titre a { color: inherit; }
.italic-title { display: block; font-style: italic; font-weight: 500; font-size: 0.72em; color: var(--or-fonce); margin-top: 0.3em; }
.portee-detail { display: block; font-size: 0.55em; font-weight: 500; letter-spacing: 0.02em; margin-top: 0.35em; color: var(--doux); }
.w-texte h1, .w-texte h2, .w-texte h3, .w-texte h4 { margin: 1.5em 0 0.5em; } .w-texte h2:first-child, .w-texte h1:first-child { margin-top: 0; } .w-texte h2:empty { display: none; }
.w-texte h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); padding-bottom: 20px; border-bottom: 1px solid var(--filet); }
h2.w-titre, h3.w-titre { position: relative; }

/* Images et vedettes : tirages encadrés d'un filet d'or à 7 px, ombre chaude (maquette). */
.w-image, .w-vedette { position: relative; }
.w-image img, .w-vedette img { width: 100%; border-radius: 4px; }
.col > .w-image img, .col > .w-vedette img, .tete-page .w-vedette img { outline: 1px solid var(--filet-fort); outline-offset: 7px; box-shadow: var(--ombre); }
.col > .w-image, .col > .w-vedette, .tete-page .w-vedette { padding: 8px; }
.col > .w-image img, .col > .w-vedette img { aspect-ratio: 3 / 4; object-fit: cover; }
.w-vedette video { width: 100%; border-radius: 4px; display: block; }
.w-video video { width: 100%; border-radius: 4px; display: block; aspect-ratio: 9 / 16; object-fit: cover; outline: 1px solid var(--filet-fort); outline-offset: 7px; }
.w-video { padding: 8px; }
.tete-page .w-vedette { max-width: 520px; }
.tete-page .w-vedette img { aspect-ratio: 3 / 4; object-fit: cover; }
.w-icone .icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--or-lumiere); color: var(--or-fonce); }
.w-icone svg { width: 24px; height: 24px; fill: currentColor; }

/* Les longs textes des pages Maine Coon et locales. */
.w-contenu { max-width: 74ch; font-size: 1.05rem; }
.w-contenu h2 { margin: 2.2em 0 0.7em; }
.w-contenu h3 { margin: 1.6em 0 0.5em; }
.w-contenu figure { margin: 2.2em auto; max-width: 560px; }
.w-contenu figure img { border-radius: 4px !important; border: 0 !important; outline: 1px solid var(--filet-fort); outline-offset: 7px; box-shadow: var(--ombre); }
.w-contenu figcaption { font-family: var(--serif); font-style: italic; color: var(--doux); font-size: 1.05rem; margin-top: 16px; }
.w-contenu a, .w-texte p a, .w-texte li a { border-bottom: 1px solid var(--filet-fort); }
.w-contenu a:hover, .w-texte p a:hover, .w-texte li a:hover { border-color: var(--or-fonce); color: var(--or-fonce); }
.w-contenu table, .w-texte table { border-collapse: collapse; width: 100%; font-size: 0.94rem; margin: 1.2em 0; background: var(--blanc); }
.w-contenu th, .w-contenu td, .w-texte th, .w-texte td { border: 1px solid var(--filet); padding: 10px 12px; vertical-align: top; text-align: left; }
.w-contenu th, .w-texte th { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--or-fonce); background: var(--or-lumiere); }
.w-contenu blockquote, .w-texte blockquote { margin: 1.5em 0; padding-left: 22px; border-left: 3px solid var(--or); font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--encre); }
.tableau-defilant { overflow-x: auto; }

/* Table des matières : une carte blanche au filet d'or. */
.w-toc { max-width: 520px; padding: 24px 28px; background: var(--blanc); border: 1px solid var(--filet); border-top: 3px solid var(--or); border-radius: 6px; box-shadow: var(--ombre-carte); }
.w-toc h4, .w-toc .toc-titre { font-family: var(--sans); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--or-fonce); margin: 0 0 14px; }
.w-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.w-toc li::marker { color: var(--or-fonce); font-family: var(--serif); }
.w-toc a { display: block; padding: 4px 0; color: var(--texte); font-size: 0.95rem; }
.w-toc a:hover { color: var(--or-fonce); }

/* Listes d'informations (fiches) et pastilles (cartes). */
.w-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.w-liste li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 0.98rem; }
.w-liste li:first-child { border-top: 1px solid var(--filet); }
.w-liste .ic { display: inline-flex; color: var(--or); }
.w-liste .ic svg { width: 14px; height: 14px; fill: currentColor; }
.w-liste .txt { color: var(--texte); }
.w-infos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.w-infos li { background: var(--or-lumiere); border-radius: 999px; padding: 5px 13px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or-fonce); }
.w-infos .ic { display: none; }

/* Grilles de cartes (chats, chatons, articles) : carte crème, photo sur passe-partout. */
.w-grille .grille { display: grid; gap: 30px; grid-template-columns: repeat(var(--colonnes, 3), 1fr); }
.w-grille.g-4 { --colonnes: 4; } .w-grille.g-3 { --colonnes: 3; } .w-grille.g-2 { --colonnes: 2; }
.carte { position: relative; min-width: 0; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; padding: 12px; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(90, 60, 10, 0.35); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.carte:hover { transform: translateY(-4px); border-color: var(--filet-fort); box-shadow: 0 28px 56px -26px rgba(90, 60, 10, 0.4); }
.carte .corps { display: grid; gap: 12px; padding: 0 0 14px; }
.carte .w-vedette { overflow: hidden; border-radius: 4px; outline: 1px solid var(--filet-fort); outline-offset: -1px; }
.carte .w-vedette img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.carte:hover .w-vedette img { transform: scale(1.04); }
.carte h2, .carte h3 { font-size: 1.6rem; padding: 6px 10px 0; line-height: 1.15; }
.carte h2 a, .carte h3 a { color: var(--encre); }
.carte .w-infos, .carte .w-texte { padding: 0 10px; }
.carte .w-texte { color: var(--doux); font-size: 0.95rem; }
.carte .w-bouton { padding: 4px 10px 0; }
.carte .w-bouton a { min-height: 44px; padding: 0 22px; font-size: 0.86rem; }
.w-bouton a .contenu { display: inline-flex; align-items: center; gap: 10px; }
.w-bouton a .ic svg { width: 14px; height: 14px; fill: currentColor; }
.carte .badge, .carte .w-texte.abs { position: absolute; z-index: 2; top: 24px; left: 24px; padding: 6px 13px; background: rgba(255, 253, 249, 0.94); border: 1px solid var(--metal); border-radius: 999px; color: var(--or-fonce); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 6px 14px -8px rgba(60, 40, 10, 0.4); }
.carte .badge p, .carte .w-texte.abs p { margin: 0; }

/* Accordéons (FAQ). */
.w-faq { display: grid; gap: 12px; max-width: 900px; }
.w-faq details { border: 1px solid var(--filet); border-radius: 6px; background: var(--blanc); box-shadow: 0 12px 30px -26px rgba(90, 60, 10, 0.4); }
.w-faq details[open] { border-color: var(--filet-fort); }
.w-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq .question { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.25; color: var(--encre); }
.w-faq .ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--or-lumiere); color: var(--or-fonce); }
.w-faq .ico svg { width: 12px; height: 12px; fill: currentColor; }
.w-faq .ico .e-opened { display: none; } .w-faq .ico .e-closed { display: block; }
.w-faq details[open] .ico .e-opened { display: block; } .w-faq details[open] .ico .e-closed { display: none; }
.w-faq details > div { padding: 0 24px 22px; }
.w-faq details > div p { max-width: 70ch; color: var(--texte); }

/* Formulaires : champs blancs, bordure dorée au focus. */
.w-form .champs { display: grid; gap: 14px; }
.w-form .groupe { display: grid; gap: 6px; }
.w-form label { font-size: 0.9rem; font-weight: 600; color: var(--encre); }
.w-form .champ { width: 100%; padding: 14px 16px; background: var(--blanc); border: 1px solid #e2d4bb; border-radius: 6px; color: var(--encre); font-family: var(--sans); font-size: 1rem; font-weight: 400; }
.w-form .champ::placeholder { color: #8d806e; }
.w-form .champ:focus { outline: 2px solid var(--or-clair); border-color: var(--or); }
.w-form textarea.champ { min-height: 140px; resize: vertical; }
.w-form .groupe-envoi { padding-top: 6px; }
.w-form button { width: 100%; }
.w-form .reponse { margin-top: 12px; font-size: 0.95rem; }
.w-form .reponse:empty { display: none; }
.w-form .reponse.ok { color: #1f7a3a; } .w-form .reponse.erreur { color: #a3321f; }

/* Carte Google, carrousel, visionneuse. */
.w-carte-google iframe { display: block; width: 100%; height: 220px; border: 0; border-radius: 6px; }
.w-carrousel .piste { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 8px 22px; }
.w-carrousel figure { scroll-snap-align: start; } .w-carrousel img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; outline: 1px solid var(--filet-fort); outline-offset: 5px; }
dialog.visionneuse { border: 0; background: rgba(28, 23, 17, 0.95); padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; display: grid; place-items: center; }
dialog.visionneuse[open] { display: grid; }
dialog.visionneuse img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
dialog.visionneuse .visionneuse-fermer { position: fixed; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--or-clair); background: none; color: #fff; font-size: 1.6rem; cursor: pointer; }

/* Fiches de chats : histoire et pedigree. */
.fiche-histoire { max-width: 74ch !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 14px; }
.fiche-histoire h2 { margin-top: 1.4em; font-size: 2rem; }
.fiche-histoire h2:first-child { margin-top: 0; }
.pedigree-table { font-size: 0.84rem; }
.pedigree-table td strong { color: var(--or-fonce); font-weight: 600; }

/* Pages en HTML nu (mentions, politique, archives). */
.site-main .page-content, .site-main .entry-content { max-width: 74ch; margin: 0 auto; padding: 80px 24px; display: grid; gap: 18px; }
.site-main h1 { padding-bottom: 24px; border-bottom: 1px solid var(--filet); }
.site-main h2 { margin-top: 1.4em; font-size: 1.9rem; }
.site-main .entry-title { font-size: 2.3rem; }

/* La section ivoire (les FAQ des pages) : un sable un ton plus chaud, pour respirer. */
.ivoire { background: var(--fond-creme); color: var(--texte); }
section.bloc.ivoire, section.bloc + section.bloc.ivoire { padding: 96px 0; }
section.bloc.ivoire + section.bloc { padding-top: 96px; }
.ivoire .portrait::after, .ivoire .col > .w-image::after { border-color: var(--filet-fort); }

/* ——— L'ACCUEIL ——— */
/* Le héros : à gauche le texte sur le crème à pattes, à droite la vidéo d'Aston, fondue dans le
   crème ; le cachet rond à la couture ; la carte des quatre atouts chevauche le bas. */
.heros { position: relative; }
.heros-video { background-color: var(--fond-creme); background-image: var(--pattes); background-size: 420px 420px; padding: 0; }
.heros-grille { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); min-height: clamp(560px, calc(100vh - var(--barre) - var(--ligne) - 70px), 700px); }
.heros-texte { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 64px clamp(28px, 4vw, 64px) 120px max(24px, calc((100vw - var(--largeur)) / 2)); }
.heros-texte h1 { font-size: clamp(2.9rem, 5.2vw, 5.1rem); line-height: 1.02; font-weight: 500; color: var(--encre); }
.heros-texte h1 em { display: block; color: var(--or-fonce); font-weight: 500; font-size: 1em; line-height: 1.08; }
.heros-texte p { font-size: 1.16rem; line-height: 1.75; color: var(--doux); max-width: 54ch; }
.heros-texte p a { color: var(--doux); border-bottom: 1px solid var(--filet); }
.heros-texte p a:hover { color: var(--or-fonce); }
.heros-texte p .it { color: var(--or-fonce); font-size: 1.14em; }
.heros-texte .actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }
.heros-texte .actions .bouton { min-height: 56px; padding: 0 30px; font-size: 0.98rem; }
.heros-media { position: relative; z-index: 1; min-height: 100%; }
.heros-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; background: var(--fond-creme); }
/* Le fondu : la vidéo se perd dans le crème à gauche, et en bas sous la carte des atouts. */
.heros-media::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -1px; width: 30%; background: linear-gradient(90deg, var(--fond-creme) 0%, rgba(244, 234, 219, 0.7) 35%, rgba(244, 234, 219, 0) 100%); pointer-events: none; }
.heros-media::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(0deg, rgba(244, 234, 219, 0.55), rgba(244, 234, 219, 0)); pointer-events: none; }
/* Le cachet : texte en couronne qui tourne lentement, patte d'or au centre. Image CSS (aucun
   texte dans la page). Il ne tourne pas pour qui demande moins de mouvement. */
.cachet { position: absolute; z-index: 3; left: 0; bottom: 118px; width: 132px; height: 132px; margin-left: -66px; border-radius: 50%; background: var(--blanc) url(/medias/habillage/cachet-centre.svg) center / 100% no-repeat; box-shadow: 0 14px 34px rgba(90, 60, 10, 0.18), 0 0 0 1px var(--filet-fort); }
.cachet::before { content: ""; position: absolute; inset: 0; background: url(/medias/habillage/cachet-texte.svg) center / 100% no-repeat; }
@keyframes cachet-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) { .cachet::before { animation: cachet-tourne 30s linear infinite; } }
.rappel-google { flex: none; display: inline-flex; align-items: center; gap: 10px; background: var(--blanc); color: #202124; border: 1px solid var(--filet); border-radius: 999px; padding: 7px 16px 7px 10px; letter-spacing: 0; text-transform: none; box-shadow: 0 8px 20px -14px rgba(60, 40, 10, 0.5); }
.rappel-google:hover { color: #202124; border-color: var(--filet-fort); }
.rappel-google .g { width: 22px; height: 22px; } .rappel-google .et { color: #9a6b10; font-size: 0.95rem; letter-spacing: 0.06em; } .rappel-google .n { font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
/* La carte des atouts : les quatre preuves du héros (mêmes mots), sur une carte blanche. */
.heros-video > .cadre { position: relative; z-index: 4; margin-top: -76px; }
.atouts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--blanc); border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(90, 60, 10, 0.35); padding: 28px 8px; overflow: hidden; }
.atouts::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--filet-or); }
.atout { display: flex; align-items: center; gap: 14px; padding: 6px 20px; border-left: 1px solid #ece2d0; font-family: var(--serif); font-size: 1.3rem; text-wrap: balance; font-weight: 600; line-height: 1.15; color: var(--encre); }
.atout:first-child { border-left: 0; }
.atout-ico { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--or-lumiere); display: grid; place-items: center; color: var(--or-fonce); }
.atout-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.heros-video + section { padding-top: 120px; }

/* ——— « Nos bébés Maine Coon » (8 novembre 2026, Andy : « on peut juste mettre la dernière portée ?
   nos bébés maine coon, un ajout sans rien enlever ») : la dernière portée en cartes, entre la carte des
   atouts et le manifeste. Règles préfixées bebes-/bebe- : rien d'autre n'est touché. Les cartes viennent
   de donnees-portee.js (construire-habillage.js) ; la pastille reprend les quatre états de la page
   chatons — Disponible (vert), Réservé (rose), En évaluation (jaune), Non disponible (gris). ——— */
section.bebes { padding: 96px 0 24px; }
.bebes-tete { display: grid; gap: 10px; justify-items: center; text-align: center; margin-bottom: 40px; }
.bebes-sous-titre { margin: 0; color: var(--doux); font-size: 0.98rem; letter-spacing: 0.02em; }
.bebes-prochaine { margin: 4px 0 0; max-width: 46rem; color: var(--encre); font-size: 1.02rem; line-height: 1.5; }
.bebes-prochaine a { color: var(--or-fonce); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.bebes-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.bebe { min-width: 0; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; padding: 10px; box-shadow: 0 18px 40px -28px rgba(90, 60, 10, 0.35); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.bebe:hover { transform: translateY(-4px); border-color: var(--filet-fort); box-shadow: 0 28px 56px -26px rgba(90, 60, 10, 0.4); }
.bebe-photo { margin: 0; overflow: hidden; border-radius: 4px; outline: 1px solid var(--filet-fort); outline-offset: -1px; }
.bebe-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.bebe:hover .bebe-photo img { transform: scale(1.04); }
.bebe-texte { display: grid; gap: 8px; padding: 14px 8px 8px; }
.bebe-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.bebe-nom { font-size: 1.45rem; line-height: 1.1; font-weight: 600; color: var(--encre); }
.bebe-statut { flex: none; display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; background: #ebe7e0; color: #5e564a; }
.bebe-statut.est-disponible { background: #dff3e4; color: #1d6b3a; }
.bebe-statut.est-reserve { background: #fbe3df; color: #a63b2a; }
.bebe-statut.est-adopte { background: #fbe3df; color: #a63b2a; }
.bebe-statut.est-evaluation { background: #fbefc4; color: #7a5a00; }
.bebe-statut.est-garde { background: #ebe7e0; color: #5e564a; }
/* Sexe puis robe, l'un sous l'autre sur TOUTES les cartes : en ligne, « Femelle · Black high smoke »
   tenait sur une ligne pour trois cartes et passait à deux pour les autres (vu sur la première capture). */
.bebe-infos { margin: 0; display: grid; justify-items: start; gap: 7px; color: var(--doux); font-size: 0.92rem; line-height: 1.4; }
.bebe-sexe { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--or-lumiere); color: var(--or-fonce); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.bebes-actions { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 1180px) {
  /* Sous 1180 px, cinq colonnes seraient trop étroites pour « Bulle · EN ÉVALUATION » : les cinq cartes
     défilent à l'horizontale dans la largeur de la page (les marges négatives valent la gouttière du
     cadre), jamais plus larges que l'écran. */
  .bebes-grille { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 8px 24px 20px; scrollbar-width: thin; scrollbar-color: var(--or) transparent; }
  .bebe { flex: 0 0 250px; scroll-snap-align: start; }
}
@media (max-width: 980px) { section.bebes { padding: 80px 0 16px; } }
@media (max-width: 560px) {
  .bebes-grille { margin: 0 -20px; padding: 6px 20px 18px; }
  .bebe { flex-basis: min(72vw, 280px); }
  .bebes-tete { margin-bottom: 28px; }
  .bebes-actions { margin-top: 24px; } .bebes-actions .bouton { width: 100%; }
}

.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.duo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; }
.colonne { display: grid; gap: 24px; }
.colonne p + p { margin-top: -6px; }
.colonne p { max-width: 62ch; }
.colonne h2 { position: relative; padding-bottom: 20px; }
.colonne h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 3px; border-radius: 3px; background: var(--filet-or); }
.portrait { position: relative; padding: 8px; }
.portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; outline: 1px solid var(--filet-fort); outline-offset: 7px; box-shadow: var(--ombre); }
/* La légende d'une photo est posée sur l'image : un voile sombre en dégradé lui donne un fond
   réel (audit du 15 septembre 2026), même sur un chat clair au soleil. */
.portrait:has(.legende)::before { content: ""; position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; height: 44%; background: linear-gradient(to top, rgba(28, 22, 14, 0.78), rgba(28, 22, 14, 0)); border-radius: 0 0 4px 4px; pointer-events: none; }
.portrait .legende { position: absolute; z-index: 2; left: 34px; bottom: 32px; right: 34px; color: #fffaf0; font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.35; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55); }
.portrait.paysage img { aspect-ratio: 4 / 3; }
.decale { transform: translateY(40px); }
.diptyque { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.diptyque .portrait:last-child { transform: translateY(40px); }
.manifeste { padding: 120px 0 90px; text-align: center; background: radial-gradient(60% 80% at 50% 0%, rgba(240, 220, 158, 0.35), transparent 70%); }
.manifeste blockquote { margin: 0 auto; max-width: 18ch; font-family: var(--serif); font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.08; color: var(--encre); font-weight: 500; }
.manifeste blockquote em { font-size: 1em; }
.manifeste .oeil { justify-content: center; margin-bottom: 28px; }
.manifeste .oeil::after { content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--filet-or); }
.avis-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.note { display: flex; align-items: center; gap: 18px; padding: 18px 24px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; color: #202124; box-shadow: var(--ombre-carte); } .note > div { display: grid; gap: 2px; } .note .g { width: 44px; height: 44px; }
.note .chiffre { font-family: var(--sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #202124; }
.note .etoiles { color: #9a6b10; letter-spacing: 0.12em; font-size: 1.15rem; line-height: 1.1; }
.note .source { color: #5f6368; font-size: 0.82rem; } .note .source strong { color: #202124; font-weight: 600; }
.avis { columns: 3; column-gap: 28px; }
.avis article { break-inside: avoid; margin-bottom: 28px; padding: 34px 30px 28px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; position: relative; box-shadow: 0 18px 40px -30px rgba(90, 60, 10, 0.4); }
.avis article::before { content: "\201C"; position: absolute; top: 4px; right: 22px; font-family: var(--serif); font-size: 5rem; line-height: 1; color: var(--or-clair); }
.avis .qui { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.avis .ini { width: 44px; height: 44px; border-radius: 50%; background: var(--or-lumiere); color: var(--or-fonce); display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; }
.avis .nom { color: var(--encre); font-weight: 600; font-size: 0.96rem; }
.avis .date { color: var(--doux); font-size: 0.8rem; letter-spacing: 0.04em; } .avis .qui .g { width: 18px; height: 18px; margin-left: auto; }
.avis p { font-size: 0.98rem; line-height: 1.65; color: var(--texte); max-width: none; }
.galerie { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 26px; overflow-x: auto; padding: 16px 24px 34px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--or) transparent; width: 100vw; margin-left: calc(50% - 50vw); padding-left: max(24px, calc((100vw - var(--largeur)) / 2)); }
.galerie figure { margin: 0; scroll-snap-align: start; position: relative; padding: 7px; }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; outline: 1px solid var(--filet-fort); outline-offset: 6px; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.galerie figure:hover img { transform: translateY(-4px); }
.galerie figure:nth-child(even) { margin-top: 44px; }
.robes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; margin-top: 60px; overflow: hidden; box-shadow: var(--ombre-carte); position: relative; }
.robes::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--filet-or); }
.robe { background: var(--blanc); padding: 46px 40px 42px; display: grid; gap: 16px; border-left: 1px solid #ece2d0; transition: background .4s ease; }
.robe:first-child { border-left: 0; }
.robe:hover { background: #fffaf0; }
.robe h3 { font-size: 2rem; }
.robe .teinte { height: 6px; width: 72px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.robe p { color: var(--doux); font-size: 1rem; }
.robe h3 em { font-size: 0.6em; vertical-align: super; }
.tests { display: grid; gap: 16px; padding: 26px 0 6px; border-top: 1px solid var(--filet); }
.tests ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tests li { display: grid; gap: 2px; padding: 14px 16px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; }
.tests b { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--or-fonce); letter-spacing: 0.01em; }
.tests small { font-size: 0.78rem; color: var(--doux); letter-spacing: 0.02em; }
.videos { padding-top: 20px; }
.films { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 36px; justify-content: center; }
.films figure { margin: 0; position: relative; padding: 8px; }
.films video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; background: #16120d; display: block; outline: 1px solid var(--filet-fort); outline-offset: 7px; box-shadow: var(--ombre); }
.films figure::before { content: ""; position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; height: 30%; background: linear-gradient(to top, rgba(28, 22, 14, 0.7), rgba(28, 22, 14, 0)); border-radius: 0 0 4px 4px; pointer-events: none; }
.films figcaption { position: absolute; z-index: 2; left: 34px; bottom: 32px; right: 34px; color: #fffaf0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }

/* ——— Le pied : la bande contact (carte blanche sur crème, photo du jardin), puis le pied sombre ——— */
.contact { position: relative; overflow: hidden; background-color: var(--fond-creme); background-image: var(--pattes); background-size: 420px 420px; }
.contact .fond { position: absolute; top: 0; bottom: 0; right: 0; width: 56%; z-index: 0; }
.contact .fond picture, .contact .fond img { width: 100%; height: 100%; }
.contact .fond img { object-fit: cover; object-position: 50% 40%; }
.contact .fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fond-creme) 0%, rgba(244, 234, 219, 0.7) 28%, rgba(244, 234, 219, 0.1) 70%); }
.contact > .cadre { position: relative; z-index: 1; padding: 96px 0; }
.carte-contact { position: relative; max-width: 660px; display: grid; gap: 22px; padding: 44px 46px 40px; background: var(--blanc); border-radius: 6px; box-shadow: 0 30px 70px -30px rgba(70, 45, 10, 0.4); overflow: hidden; }
.carte-contact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--filet-or); }
.carte-contact h2 { font-size: clamp(2rem, 3.2vw, 2.7rem); }
.carte-contact p { font-size: 1.06rem; color: var(--texte); max-width: 56ch; }
.carte-contact .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.carte-contact .actions .bouton { min-height: 50px; padding: 0 22px; }
.coordonnees-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding-top: 22px; border-top: 1px solid var(--filet); }
.coordonnees-pied > a { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); font-weight: 600; font-size: 1rem; min-height: 44px; }
.coordonnees-pied > a:hover { color: var(--or-fonce); }
.coordonnees-pied > a svg { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--or-lumiere); fill: none; stroke: var(--or-fonce); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coordonnees-pied .reseaux { margin-left: 0; }
.pied { position: relative; padding: 76px 0 36px; background: var(--nuit); color: #d9ccb4; }
.pied::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--filet-or); }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1.1fr 0.8fr 1.1fr; gap: 48px; }
.pied-grille h3 { font-size: 0.76rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #e8cb79; margin-bottom: 20px; }
.pied-grille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied-grille li a { color: #e6dbc6; font-size: 0.93rem; }
.pied-grille li a:hover { color: #f0dc9e; }
.pied-grille .w-menu .hamburger { display: none; }
.marque { display: grid; gap: 20px; justify-items: start; align-content: start; }
.logo.empile { display: grid; justify-items: start; gap: 8px; } .logo.empile .logo-img { height: 92px; }
.marque p { color: #bfb197; font-size: 0.95rem; max-width: 34ch; }
.marque p a { color: #d9ccb4; }
.marque p a:hover { color: #f0dc9e; }
.bas { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(240, 220, 158, 0.16); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #a99c85; font-size: 0.82rem; }
.bas a { color: #e8cb79; }
.lien-cookies { background: none; border: 0; padding: 0; margin: 0; color: #a99c85; font: inherit; cursor: pointer; text-decoration: underline; }
.lien-cookies:hover { color: #f0dc9e; }
.pied .carte-attente { min-height: 200px; box-sizing: border-box; border: 1px solid rgba(240, 220, 158, 0.22); border-radius: 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 18px; background: rgba(255, 255, 255, 0.04); }
.pied .carte-attente p { margin: 0; font-size: 0.84rem; color: #bfb197; line-height: 1.5; }
.pied .carte-attente .bouton.petit { min-height: 42px; padding: 0 18px; font-size: 0.82rem; background: transparent; border-color: rgba(232, 203, 121, 0.6); color: #f0dc9e; }
.pied .carte-attente .bouton.petit:hover { background: rgba(232, 203, 121, 0.12); }
.pied .carte-attente .carte-lien { font-size: 0.84rem; color: #e6dbc6; text-decoration: underline; }

/* ——— La bulle WhatsApp (structure du site propre, mesures d'origine) ——— */
.w-whatsapp { position: fixed; right: 25px; bottom: 25px; z-index: 9000; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 12px; font-family: var(--sans); }
.w-whatsapp .wa-bouton { position: relative; width: 58px; height: 58px; padding: 0; border-radius: 50%; border: 0; background: #25D366; color: #fff; fill: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 28px -6px rgba(15, 90, 45, 0.55); transition: transform .3s; }
.w-whatsapp .wa-bouton:hover, .w-whatsapp .wa-bouton:focus { transform: scale(1.08); }
.w-whatsapp .wa-bouton svg { width: 32px; height: 32px; }
.w-whatsapp .wa-bouton::after { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; background: #e0362c; border: 2px solid var(--fond); }
.w-whatsapp .wa-fenetre { width: min(360px, 90vw); background: #fff; color: #1c2448; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45); }
.w-whatsapp .wa-tete { display: flex; align-items: center; gap: 20px; padding: 20px; background: #008069; color: #fff; position: relative; }
.w-whatsapp .wa-tete img { width: 75px; height: 75px; border-radius: 50%; object-fit: cover; }
.w-whatsapp .wa-titre { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.5; color: #fff; }
.w-whatsapp .wa-fermer { position: absolute; top: 20px; right: 20px; background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; width: 24px; height: 24px; padding: 0; }
.w-whatsapp .wa-bulle { padding: 25px 20px; padding-inline-start: 40px; background: #fff; }
.w-whatsapp .wa-corps { background: #D9FDD3; border-radius: 15px; padding: 20px; color: #1c2448; position: relative; }
.w-whatsapp .wa-corps::after { content: ""; position: absolute; top: 0; left: -20px; width: 0; height: 0; border-style: solid; border-width: 0 40px 40px 0; border-color: transparent #D9FDD3 transparent transparent; }
.w-whatsapp .wa-nom { margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 25px; }
.w-whatsapp .wa-message { margin: 0 0 8px; font-size: 20px; line-height: 25px; }
.w-whatsapp .wa-contact { padding: 0 20px 20px; background: #fff; }
.w-whatsapp .wa-contact p { margin: 0 0 15px; font-size: 20px; font-weight: 400; color: #1c2448; line-height: 1.25; }
.w-whatsapp .wa-liens { display: flex; gap: 12px; }
.w-whatsapp .wa-liens a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50px; background: #25D366; color: #fff; fill: #fff; transition: transform .3s; }
.w-whatsapp .wa-liens a:hover, .w-whatsapp .wa-liens a:focus { transform: scale(1.1); color: #fff; }
.w-whatsapp .wa-liens svg { width: 28px; height: 28px; }

/* ——— Apparitions ——— */
.rev { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s ease; }
.js .rev { opacity: 0; transform: translateY(22px); }
.js .rev.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rev { opacity: 1; transform: none; transition: none; } }

/* ——— L'accueil sur grand écran : la ligne du logo se pose SUR le héros, transparente, comme
   sur la maquette (la vidéo monte derrière le menu, son haut est déjà fondu dans le crème) ;
   elle redevient opaque dès que la page défile (classe « defile », posée par site.js). ——— */
@media (min-width: 1241px) {
  .p-accueil .site-entete:not(.defile) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: rgba(137, 88, 10, 0.12); }
  .p-accueil .heros-video { margin-top: calc(-1 * var(--ligne)); }
  .p-accueil .heros-texte { padding-top: calc(var(--ligne) + 56px); }
  .p-accueil .heros-grille { min-height: clamp(620px, calc(100vh - var(--barre) - 70px), 780px); }
}

/* ——— Écrans étroits ——— */
@media (max-width: 1180px) {
  .heros-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .atout { font-size: 1.22rem; padding: 6px 16px; gap: 12px; }
  .atout-ico { width: 42px; height: 42px; }
}
@media (max-width: 980px) {
  .cols-2, .cols-3, .cols-4, .deux, .duo { grid-template-columns: 1fr; gap: 44px; }
  .col > .w-image img, .col > .w-vedette img { aspect-ratio: 4 / 5; }
  .w-grille .grille { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .decale { transform: none; }
  .diptyque .portrait:last-child { transform: none; }
  .avis { columns: 1; }
  .robes { grid-template-columns: 1fr; }
  .robe { border-left: 0; border-top: 1px solid #ece2d0; } .robe:first-child { border-top: 0; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  section.bloc { padding: 72px 0; }
  section.bloc.ivoire, section.bloc.ivoire + section.bloc { padding: 72px 0; }
  /* Le héros sur tablette et téléphone : la vidéo d'abord (maquette), le texte dessous. */
  .heros-grille { grid-template-columns: 1fr; min-height: 0; }
  .heros-media { order: -1; aspect-ratio: 4 / 3; min-height: 0; max-height: 70vh; }
  .heros-media::before { display: none; }
  .heros-media::after { height: 90px; background: linear-gradient(0deg, var(--fond-creme), rgba(244, 234, 219, 0)); }
  .heros-texte { padding: 26px 24px 104px; gap: 20px; }
  .cachet { display: none; }
  .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; padding: 22px 6px; }
  .atout:nth-child(3) { border-left: 0; }
  .heros-video + section { padding-top: 96px; }
  .galerie { grid-auto-columns: 240px; }
  .films { grid-template-columns: 1fr 1fr; gap: 18px; } .films figcaption { left: 24px; bottom: 22px; right: 22px; font-size: 1.08rem; }
  .contact .fond { position: relative; width: 100%; height: 260px; }
  .contact .fond::after { background: linear-gradient(0deg, var(--fond-creme) 0%, rgba(244, 234, 219, 0) 45%); }
  .contact > .cadre { padding: 0 0 72px; margin-top: -70px; }
  .carte-contact { max-width: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .cadre { width: calc(100% - 40px); }
  .w-grille .grille { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; gap: 36px; }
  .heros-texte { padding: 20px 20px 96px; }
  .heros-texte h1 { font-size: 2.65rem; line-height: 1.05; }
  .heros-texte h1 em { display: inline; }
  .heros-texte p { font-size: 1.05rem; }
  .heros-texte .actions { width: 100%; }
  .heros-texte .actions .bouton { width: 100%; }
  .heros-video > .cadre { margin-top: -70px; }
  .atouts { padding: 18px 4px; gap: 12px 0; }
  .atout { flex-direction: column; text-align: center; gap: 8px; padding: 4px 10px; font-size: 1.12rem; }
  .atout-ico { width: 40px; height: 40px; }
  .atout-ico svg { width: 18px; height: 18px; }
  .robe { padding: 34px 26px; }
  .tests ul { grid-template-columns: 1fr 1fr; }
  .w-faq summary { padding: 16px 18px; } .w-faq details > div { padding: 0 18px 18px; }
  .w-faq .question { font-size: 1.2rem; }
  .carte h2, .carte h3 { font-size: 1.5rem; }
  .films { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .portrait .legende { left: 26px; right: 26px; bottom: 24px; font-size: 1.1rem; }
  .carte-contact { padding: 34px 24px 28px; }
  .carte-contact .actions .bouton { width: 100%; }
  .coordonnees-pied { gap: 6px 18px; }
  .coordonnees-pied .reseaux { margin-left: 0; }
  .manifeste { padding: 100px 0 70px; }
}

/* 404 */
.p-404 main .bloc { padding: 120px 0; text-align: center; font-family: var(--serif); font-size: 1.6rem; color: var(--encre); }

/* ——— Messages de sensibilisation obligatoires (code rural L214-8-2, arrêté du 28 juin 2023) ———
   Jaune C0 M10 J100 N0 = #ffe500, texte noir, police Marianne (DSFR), sans altération. */
@font-face { font-family: 'Marianne'; src: url(/medias/premium/fonts/Marianne-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Marianne'; src: url(/medias/premium/fonts/Marianne-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
.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); }
/* La bulle se pose AU-DESSUS du bandeau jaune, à sa hauteur RÉELLE (site.js la mesure dans
   --bandeau-jaune : sur téléphone le texte réglementaire se replie sur cinq lignes et le bandeau
   dépasse largement 7 vh — la bulle le chevauchait, vu sur les captures du 8 novembre au soir ;
   hérité du thème premium, corrigé ici seulement). Sans script : l'ancienne estimation. */
body.avec-bandeau .w-whatsapp { bottom: calc(max(var(--bandeau-jaune, 7vh), 64px) + 12px); }
.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; font-weight: 700; color: #000; margin: 0 0 14px; }
.sensibilisation-cadre p { margin: 0 0 12px; color: #000; }
.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; }
.sensibilisation strong, .sensibilisation-cadre strong { color: #000; font-weight: 700; }
.sensibilisation p, .sensibilisation-cadre p { color: #000; }

/* ——— L'ancre de la liste d'attente : l'en-tête collant (ligne du logo) ne doit pas la couvrir ——— */
#liste-attente { scroll-margin-top: calc(var(--ligne) + 20px); }

/* ——— L'appel à la liste d'attente quand tout est réservé (20 septembre 2026) ——— */
.appel-attente { max-width: 760px; margin: 0 auto 3.5em; padding: 30px 32px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; box-shadow: var(--ombre-carte); position: relative; overflow: hidden; }
.appel-attente::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--filet-or); }
.appel-attente p { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.6; }
.appel-attente .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.appel-attente .bouton { width: auto; }
@media (max-width: 600px) { .appel-attente { padding: 24px 20px; } .appel-attente .bouton { width: 100%; } }
.appel-attente.serre { max-width: none; margin: 4px 0 0; }
.appel-attente .w-form { margin-top: 18px; }
.appel-attente .actions { margin-top: 18px; }

/* ——— Cookies : le bandeau, deux boutons de même poids (2 octobre 2026) ——— */
.consentement { position: fixed; left: 24px; bottom: calc(var(--bandeau-jaune, 0px) + 24px); z-index: 9100; width: min(520px, calc(100% - 48px)); font-family: var(--sans); }
.consentement[hidden] { display: none; }
body:has(.sensibilisation-entree:not([hidden])) .consentement { display: none; }
.consentement-cadre { background: var(--blanc); border: 1px solid var(--filet-fort); border-radius: 12px; padding: 22px 24px; box-shadow: 0 24px 60px -18px rgba(60, 40, 10, 0.45); color: var(--texte); font-size: 0.9rem; line-height: 1.55; }
.consentement-titre { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--encre); margin: 0 0 8px; }
.consentement-cadre p { margin: 0 0 14px; }
.consentement-cadre a { color: var(--or-fonce); text-decoration: underline; }
.consentement-choix { display: flex; gap: 12px; flex-wrap: wrap; }
.consentement-choix .bouton { flex: 1 1 140px; min-height: 46px; padding: 0 18px; }
.carte-attente { min-height: 220px; box-sizing: border-box; border: 1px solid var(--filet); border-radius: 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 18px; background: var(--fond-creme); }
.carte-attente p { margin: 0; font-size: 0.82rem; color: var(--doux); line-height: 1.5; }
.carte-attente .bouton.petit { min-height: 40px; padding: 0 18px; font-size: 0.8rem; }
.carte-attente .carte-lien { font-size: 0.8rem; color: var(--texte); text-decoration: underline; }
@media (max-width: 720px) {
  .consentement { left: 12px; right: 12px; bottom: calc(var(--bandeau-jaune, 0px) + 12px); width: auto; }
  .consentement-cadre { padding: 18px; }
  .consentement-visible body .w-whatsapp { bottom: calc(var(--bandeau-jaune, 0px) + var(--bandeau-cookies, 0px) + 28px); }
}

/* ——— Les styles en ligne hérités d'Elementor, sur fond clair ———
   Le bouton « couleur primaire » de quelques pages (fond or, texte encre) reste lisible : le
   primaire est passé au bronze pour les TEXTES, le bouton reprend le dégradé doré. */
a[style*="background-color:var(--e-global-color-primary"] { background: var(--or-degrade) !important; color: var(--encre) !important; font-family: var(--sans) !important; box-shadow: 0 10px 24px -10px rgba(137, 88, 10, 0.55); }

/* ——— Retouches de la première relecture des captures (8 novembre) ——— */
/* Les chiffres en Cormorant sont « elzéviriens » (HCM1 se lisait HCMı) : chiffres alignés. */
.tests b, .atout, .w-faq .question, .carte h2, .carte h3, em, .it, .italic-title { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.atout-ico { width: 46px; height: 46px; }
/* Une photo à côté d'un long texte reste en vue pendant la lecture, au lieu de flotter au milieu
   d'un grand blanc (« La chatterie », « Nos chatons »). */
@media (min-width: 981px) {
  .deux > .diptyque, .duo > .portrait { position: sticky; top: calc(var(--ligne) + 36px); align-self: start; }
}
/* Sur téléphone, la vidéo du héros est cadrée en 4:3, sur le chat : le haut de la prise (déjà
   fondu dans le crème au montage) est rogné. */
@media (max-width: 980px) { .heros-media video { object-position: 50% 78%; } }
/* Les grands titres de page (H1) : la police de titrage est plus large que l'ancienne, et
   certains H1 font quatre lignes (« Nos chatons Maine Coon disponibles dans notre élevage… »). */
.tete-page h1 { font-size: clamp(2.4rem, 4.3vw, 3.9rem); line-height: 1.06; }
.tete-page h1:has(.italic-title) { font-size: clamp(2.2rem, 3.7vw, 3.3rem); }
.tete-page h1 .italic-title { font-size: 0.86em; }
@media (max-width: 560px) {
  section.bloc.tete-page { padding-top: 44px; }
  .tete-page h1, .tete-page h1:has(.italic-title) { font-size: 2.3rem; }
}

/* ——— Porte de fin de page (2 pages sans aucun lien de contact dans leur texte) ——— */
.porte-fin { padding: 0 0 72px; }
.porte-fin .cadre { display: grid; gap: 18px; justify-items: center; text-align: center; padding-top: 40px; border-top: 1px solid var(--filet); }
.porte-fin-phrase { margin: 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; color: var(--encre); }
@media (max-width: 980px) { .porte-fin { padding-bottom: 56px; } .porte-fin-phrase { font-size: 1.3rem; } }