/*
Theme Name: Thème enfant pour Ollie
Theme URI: https://olliewp.com
Description: A child theme for Ollie.
Author: Mike McAlister
Author URI: https://olliewp.com
Template:     ollie
Version: 1.0.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
*/

.metal {
  /* couleur de repli : peinte tant que le découpage n'est pas appliqué */
  color: #D9D5CE;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .metal {
    background-image: linear-gradient(176deg,
      #FFFFFF   0%,
      #FAF8F5  14%,
      #EDEAE4  28%,
      #D9D5CE  44%,
      #BDB9B2  62%,
      #A09B94  80%,
      #837E78 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;  /* plus fiable que color sur Safari */
            color: transparent;
  }
}

/* le texte sélectionné redevient lisible */
.metal::selection {
  -webkit-text-fill-color: #F4F1EC;
  color: #F4F1EC;
  background: #FE4901;
}

.metal strong {
  -webkit-text-fill-color: #FE4901;
          color: #FE4901;
}
/* ------------------------------------------------------------------ héros */

/*
 * Le fond du héros est posé en style inline par le réglage « image de fond »
 * du groupe : aucune feuille externe ne peut le surcharger sans !important,
 * et WordPress ne génère pas de srcset pour une image de fond CSS — le même
 * fichier de 2400 px part donc aussi sur mobile.
 *
 * En dessous de 782px on bascule sur le cadrage portrait : le visage tient
 * alors sur toute la hauteur, et le fichier servi passe de 265 à 135 Ko.
 * Le dégradé est répété à l'identique, background-image portant les deux
 * couches ; ne le modifier ici que si on le modifie aussi dans l'éditeur.
 */
@media (max-width: 781px) {
	.cc-hero {
		background-image:
			linear-gradient(
				176deg,
				rgba(3, 2, 2, 0.88) 0%,
				rgba(3, 2, 2, 0.3) 26%,
				rgba(3, 2, 2, 0.42) 49%,
				rgba(3, 2, 2, 0.94) 86%,
				rgb(5, 4, 3) 100%
			),
			url("/wp-content/uploads/2026/09/visage-portrait-900.webp") !important;
		background-position: center !important;
		background-size: cover !important;
	}
}

/*
 * Titre du héros : fluide plutôt que fixe.
 *
 * Le bloc porte font-size:9rem et letter-spacing:-3px en style inline — d'où
 * les !important, seuls capables de surcharger un attribut style. Réglé ici et
 * non dans les styles globaux : ceux-ci servent aux h1 des autres pages.
 *
 * Le clamp va de 44px à 390px de large jusqu'aux 9rem d'origine à partir de
 * 1260px. La composante en rem n'est pas cosmétique : un vw seul empêcherait
 * le zoom du texte.
 *
 * Le letter-spacing passe en em : à -3px fixes, les lettres s'écrasent dès que
 * le titre rétrécit.
 */
.cc-hero h1 {
	font-size: clamp(2.75rem, 11.5vw - 0.05rem, 9rem) !important;
	letter-spacing: -0.02em !important;
}