/* ==========================================================================
   AVATTO — CSS de la maquette Claude Design, gelé (option C)
   --------------------------------------------------------------------------
   Extrait du rendu réel de « Avatto - Refonte.dc.html ». Aucune valeur n'a été
   retapée : ni couleur, ni graisse, ni rayon, ni ombre.

   Restauration : supprimer ce fichier et son appel dans functions.php ; l'en-tête
   et le pied de Woodmart réapparaissent immédiatement (ils sont seulement
   masqués, jamais supprimés).
   ========================================================================== */

@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap);

@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
  *, ::before, ::after { print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }
}
.av-ref x-dc { display: none !important; }
.av-ref .scp0:hover { background: var(--hover) !important; color: var(--fg) !important; }
.av-ref .scp1:hover { background: rgb(122, 70, 224) !important; transform: translateY(-2px) !important; }
.av-ref .scp2:hover { transform: translateY(-2px) !important; background: rgb(122, 70, 224) !important; }
.av-ref .scp3:active { transform: scale(0.97) !important; }
.av-ref .scp4:hover { background: var(--hover) !important; transform: translateY(-2px) !important; }
.av-ref .scp5:hover { background: var(--hover) !important; }
.av-ref .scp6:hover { transform: translateY(-4px) !important; border-color: rgba(107, 47, 217, 0.5) !important; box-shadow: var(--sh-lg), 0 0 32px rgba(107,47,217,0.22) !important; }
.av-ref .scp7:hover { background: rgb(122, 70, 224) !important; }
.av-ref .scp8:hover { transform: translateY(-4px) !important; border-color: rgba(107, 47, 217, 0.5) !important; }
.av-ref .scp9:hover { color: var(--fg-2) !important; }
.av-ref .scpa:hover { transform: translateY(-3px) !important; border-color: rgba(255, 214, 0, 0.6) !important; box-shadow: var(--sh-lg), 0 0 44px rgba(255,214,0,0.16) !important; }
.av-ref .scpb:hover { background: rgba(255, 255, 255, 0.22) !important; border-color: rgb(255, 255, 255) !important; }
.av-ref .scpc:focus { border-color: rgb(107, 47, 217) !important; }
.av-ref .scpd:active { transform: scale(0.98) !important; }
.av-ref .scpe:hover { transform: translateY(-3px) !important; border-color: rgba(107, 47, 217, 0.5) !important; }
.av-ref .scpf:hover { color: var(--fg) !important; }
.av-ref html, .av-ref body { height: 100%; margin: 0px; }
.av-ref #dc-root, .av-ref #dc-root > .sc-host { height: 100%; }
html[data-theme="dark"] .av-ref { --bg: #0D0D1A; --bg-raised: #14142B; --card: #1E1C3A; --well: #FFFFFF; --fg: #FFFFFF; --fg-2: #C9C4E8; --fg-3: #8B85B8; --fg-4: #5A5488; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --hover: rgba(255,255,255,0.07); --chip: rgba(255,255,255,0.03); --header-bg: rgba(13,13,26,0.72); --sh-md: 0 10px 24px rgba(0,0,0,0.40); --sh-lg: 0 24px 48px rgba(0,0,0,0.45); --sh-xl: 0 40px 80px rgba(0,0,0,0.55); --inset: inset 0 1px 0 rgba(255,255,255,0.08); --cyan: #00D4FF; --pink: #FF6BB5; --green: #00C853; --yellow: #FFD600; --green-t: #B9F3CC; --yellow-t: #FFF3B0; --panel: linear-gradient(160deg, #1B0A3D, #14142B); --panel-pro: linear-gradient(120deg, #2E1261 0%, #1E1C3A 60%); --grad-title: linear-gradient(120deg, #00D4FF, #6B2FD9); --grad-topbar: linear-gradient(90deg, rgba(107,47,217,0.55), rgba(0,212,255,0.18)); --gold: linear-gradient(120deg, #FFD600, #FF9500); --aura: radial-gradient(120% 70% at 15% -10%, rgba(107,47,217,0.38) 0%, transparent 60%), radial-gradient(90% 60% at 95% 5%, rgba(0,212,255,0.16) 0%, transparent 55%); --star-op: 1; --link-hover: #C5F3FF; }
.av-ref { --bg: #F6F4FC; --bg-raised: #FFFFFF; --card: #FFFFFF; --well: #FFFFFF; --fg: #14112A; --fg-2: #453F66; --fg-3: #6E678F; --fg-4: #948DAF; --border: rgba(20,17,42,0.10); --border-strong: rgba(20,17,42,0.20); --hover: rgba(107,47,217,0.09); --chip: rgba(107,47,217,0.05); --header-bg: rgba(246,244,252,0.82); --sh-md: 0 10px 24px rgba(46,18,97,0.08); --sh-lg: 0 24px 48px rgba(46,18,97,0.10); --sh-xl: 0 40px 80px rgba(46,18,97,0.14); --inset: inset 0 1px 0 rgba(255,255,255,0.9); --cyan: #0089A8; --pink: #C93E85; --green: #00893A; --yellow: #A8820A; --green-t: #00893A; --yellow-t: #7A5E00; --panel: linear-gradient(160deg, #EFE8FF, #FFFFFF); --panel-pro: linear-gradient(120deg, #2E1261 0%, #4B25A8 70%); --grad-title: linear-gradient(120deg, #0089A8, #6B2FD9); --grad-topbar: linear-gradient(90deg, rgba(107,47,217,0.14), rgba(0,212,255,0.10)); --gold: linear-gradient(120deg, #FFC400, #FF8A00); --aura: radial-gradient(120% 70% at 15% -10%, rgba(107,47,217,0.12) 0%, transparent 60%), radial-gradient(90% 60% at 95% 5%, rgba(0,180,220,0.10) 0%, transparent 55%); --star-op: 0; --link-hover: #441A8D; }
.av-ref html { scroll-behavior: smooth; }
.av-ref body { margin: 0px; background: var(--bg); color: var(--fg); font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.av-ref a { color: var(--cyan); text-decoration: none; }
.av-ref a:hover { color: var(--link-hover); }
.av-ref ::selection { background: rgb(107, 47, 217); color: rgb(255, 255, 255); }
@keyframes avFloat { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
@keyframes avBreathe { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes avTwinkle { 
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.9; }
}
@keyframes avDrift { 
  0% { transform: translateY(0px); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translateY(-260px); opacity: 0; }
}

/* Bascule du logo, à la polarité du site : clair par défaut, sombre en option.
   Dans la maquette c'était l'inverse (sombre par défaut). */
.av-ref [data-logo="dark"] { display: none; }
.av-ref [data-logo="light"] { display: block; }
html[data-theme="dark"] .av-ref [data-logo="dark"] { display: block; }
html[data-theme="dark"] .av-ref [data-logo="light"] { display: none; }

/* Bascule clair/sombre : icônes du bouton, pilotées par le thème du site. */
.av-ref .av-ref-soleil { display: none; }
.av-ref .av-ref-lune { display: block !important; }
html[data-theme="dark"] .av-ref .av-ref-soleil { display: block; }
html[data-theme="dark"] .av-ref .av-ref-lune { display: none !important; }

/* L'en-tête et le pied de Woodmart cèdent la place à ceux de la maquette. */
body .whb-header, body .site-header, body .wd-footer, body footer.footer-container,
body .whb-top-bar, body .whb-general-header, body .whb-header-bottom { display: none !important; }

/* ==========================================================================
   Trois corrections mesurées après pose du contenu gelé
   --------------------------------------------------------------------------
   1. Dégradé de texte du H1 : à la sérialisation du gel, Chrome vide la valeur
      du raccourci « background » et ne laisse que « background-image: ; ».
      Résultat : texte transparent sans fond, donc invisible. Un seul élément du
      site est concerné (vérifié sur les 5 écrans), on le restitue à l'identique.
   2. line-height : la maquette laisse « normal » partout ; ma feuille imposait
      des valeurs calculées, qui décalaient toutes les hauteurs. Les styles en
      ligne du gel qui précisent un interligne gardent la priorité.
   3. Couleur héritée : la racine de la maquette fixe la couleur du texte ;
      sans elle, le contenu héritait du gris de mon habillage.
   ========================================================================== */

.av-ref [style*="background-clip: text"] {
	background-image: linear-gradient(120deg, #00D4FF, #6B2FD9) !important;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

/* Interligne : on neutralise seulement a la racine du contenu gele.
   Poser 'normal' sur tous les descendants cassait l'heritage voulu par la
   maquette (le H1 transmet 1.05 a son span en degrade, les legendes 1.5). */
.av-ref-page { line-height: normal; }

.av-ref { color: var(--fg); }

/* --------------------------------------------------------------------------
   Deux ecarts releves a la mesure sur les pages posees, corriges ici et
   nulle part ailleurs.

   1. Woodmart pose un bandeau de titre de 283 px de haut au-dessus du contenu
      (« Boutique Particuliers — Thermostats Avatto »). La maquette n'en a pas :
      chaque ecran ouvre sur son propre chapeau. On le masque uniquement sur les
      pages qui portent le contenu gele, reperees par la classe av-ref-contenu
      ajoutee sur <body>. Ailleurs, le bandeau reste en place.

   2. Le prix des cartes boutique passait sur deux lignes : la ligne prix +
      bouton mesure 217 px, le prix s'y retrouvait comprime a 89 px. Une seule
      propriete suffit, sans toucher aux tailles de la maquette.
   -------------------------------------------------------------------------- */
body.av-ref-contenu .wd-page-title,
body.av-ref-contenu .page-title { display: none !important; }

.av-ref [data-dc-tpl="167"] { white-space: nowrap; }

/* --------------------------------------------------------------------------
   En-tete sur petit ecran. Le fichier de reference a ete gele en 1440 px : sa
   barre garde donc six entrees de menu sur une seule ligne, ce qui repousse le
   bouton « Commander » hors de l'ecran a 390 px (mesure : 336 -> 461 px pour
   une fenetre de 390).

   Correctif volontairement minimal : on autorise le retour a la ligne, le menu
   passe sous le logo, et le logo est ramene a 140 px. Aucune couleur, aucune
   graisse, aucun rayon de la maquette n'est touche.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.av-ref-chrome [data-dc-tpl="17"],
	.av-ref-chrome [data-dc-tpl="18"] { height: auto; flex-wrap: wrap; row-gap: 10px; }
	.av-ref-chrome [data-dc-tpl="19"] img { max-width: 140px; height: auto; }
	.av-ref-chrome nav { flex: 1 1 100%; order: 3; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
	.av-ref-chrome [data-dc-tpl="27"] { margin-left: auto; }
}

/* Le balisage gele porte ses styles en ligne : une regle de feuille ne peut pas
   les depasser sans !important. Il en faut donc ici, et seulement sur le retour
   a la ligne du menu — jamais sur une couleur ni une dimension de la maquette.
   Sans cela, le menu restait sur une seule ligne, rognee des deux cotes. */
@media (max-width: 900px) {
	.av-ref-chrome [data-dc-tpl="17"],
	.av-ref-chrome [data-dc-tpl="18"] { flex-wrap: wrap !important; height: auto !important; }
	.av-ref-chrome nav { flex-wrap: wrap !important; justify-content: center !important; }
}