/* ============================================================
   Fabien M. Photography — composants d'interface
   Ce qui ne peut pas être exprimé dans theme.json :
   états de survol, pseudo-éléments, mise en forme des
   formulaires et petits ajustements de gabarit.
   Les valeurs proviennent toutes des presets theme.json.
   ============================================================ */

/* ---------- 0. Réglages de confort ---------- */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Focus clavier visible sur toute l'interface */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 3px;
    border-radius: var(--wp--custom--radius--small);
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- 1. Titre de page avec filet bleu ----------
   Style de bloc « Titre souligné » (titres + titres d'article).
   Reproduit le filet bleu ciel des maquettes.                */

/* Le filet doit suivre la largeur du TEXTE, pas celle du conteneur.

   On ne peut pas rétrécir la boîte du titre pour ça : dans une disposition
   contrainte, un titre en width:fit-content perd sa position dans la colonne
   centrée et se colle au bord gauche, désaligné du reste du contenu.

   On passe donc le titre en grille à une seule colonne dimensionnée sur son
   contenu. La boîte du titre reste pleine largeur — donc alignée comme avant —
   tandis que la colonne, elle, épouse le texte. Le filet étant un élément de
   cette grille, son pourcentage se calcule sur la largeur du texte.

   Ajustez --title-rule-width pour rallonger ou raccourcir le filet. */
.is-style-title-rule {
    --title-rule-width: 82%;

    display: grid;
    grid-template-columns: fit-content(100%);
    justify-content: start;
    row-gap: 0.3em;
}

.is-style-title-rule::after {
    content: "";
    width: var(--title-rule-width);
    height: 4px;
    border-radius: 2px;
    background: var(--wp--preset--color--primary-alt);
}

.is-style-title-rule.has-text-align-center {
    justify-content: center;
}

.is-style-title-rule.has-text-align-center::after {
    justify-self: center;
}

.is-style-title-rule.has-text-align-right {
    justify-content: end;
}

.is-style-title-rule.has-text-align-right::after {
    justify-self: end;
}

/* ---------- 2. Sur-titre (« MES SPÉCIALITÉS ») ---------- */

.is-style-eyebrow {
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--wp--preset--color--primary);
    margin-bottom: 0.75rem;
}

/* ---------- 3. Carte (groupe) ----------
   Cartes « spécialités » de l'accueil et cartes de la page Tarifs. */

.is-style-card {
    /* Occupe toute la largeur disponible, y compris quand le bloc parent est
       une « Pile » (flex vertical), dont l'alignement par défaut est
       align-items: flex-start — sinon la carte se rétracte sur son contenu. */
    align-self: stretch;
    /* Repère pour le lien étiré, voir plus bas. */
    position: relative;
    background: var(--wp--preset--color--tertiary);
    border: 1px solid var(--wp--preset--color--border-light);
    border-radius: var(--wp--custom--radius--medium);
    box-shadow: var(--wp--preset--shadow--card);
    overflow: hidden;
    height: 100%;
    transition: transform var(--wp--custom--transition--base),
        box-shadow var(--wp--custom--transition--base);
}

.is-style-card:hover,
.is-style-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--wp--preset--shadow--card-hover);
}

/* L'image de la carte est collée aux bords, coins arrondis en haut */
.is-style-card>.wp-block-image:first-child,
.is-style-card>figure:first-child,
.is-style-card>.wp-block-post-featured-image:first-child {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.is-style-card>.wp-block-image:first-child img,
.is-style-card>.wp-block-post-featured-image:first-child img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.is-style-card:hover>.wp-block-image:first-child img,
.is-style-card:hover>.wp-block-post-featured-image:first-child img {
    transform: scale(1.04);
}

/* Le titre de la carte reste en sans-serif, comme sur les maquettes */
.is-style-card :is(h3, h4, .wp-block-post-title) {
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 600;
    letter-spacing: 0;
}

/* Carte entièrement cliquable, sans lien enveloppant.

   Gutenberg ne permet pas de poser un lien sur un bloc Groupe. Plutôt que
   d'envelopper la carte dans du HTML personnalisé, on étire la zone cliquable
   du lien déjà présent à l'intérieur : son ::before recouvre toute la carte.

   L'avantage est autant technique qu'accessible : il n'y a toujours qu'UN
   seul lien, porteur d'un vrai libellé (« En savoir plus »). Un lecteur
   d'écran annonce donc un lien clair, et la tabulation reste naturelle —
   ce qu'un <a> enveloppant un titre, un paragraphe et une image ne permet pas.

   Trois liens sont reconnus d'office : le style de paragraphe « Lien fléché »,
   le bloc « Lire la suite » (core/read-more), et tout lien portant la classe
   « card-link » — cette dernière servant d'échappatoire pour n'importe quel
   autre lien.

   Contrepartie connue de la technique : le texte de la carte n'est plus
   sélectionnable à la souris, la surface transparente du lien le recouvrant.
   Acceptable pour une carte de navigation, à éviter sur un bloc de contenu
   que l'on voudrait pouvoir copier. */
.is-style-card .is-style-arrow-link a::before,
.is-style-card a.wp-block-read-more::before,
.is-style-card .card-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.is-style-card .is-style-arrow-link,
.is-style-card a.wp-block-read-more,
.is-style-card .card-link {
    position: static;
}

/* ---------- 4. Lien fléché (« En savoir plus › ») ---------- */

.is-style-arrow-link a,
a.is-style-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--main);
    text-decoration: none;
}

.is-style-arrow-link a::after,
a.is-style-arrow-link::after {
    content: "›";
    font-size: 1.15em;
    line-height: 1;
    transition: transform var(--wp--custom--transition--base);
}

.is-style-arrow-link a:hover,
a.is-style-arrow-link:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.is-style-arrow-link a:hover::after,
a.is-style-arrow-link:hover::after {
    transform: translateX(4px);
}

/* ---------- 5. En-tête et navigation ---------- */

/* L'élément « Contact » du menu : ajouter la classe CSS « nav-cta »
   sur le lien de navigation dans l'éditeur de site.

   La classe .wp-block-navigation-item__content est indispensable dans le
   sélecteur : WordPress impose « color: inherit » via une règle qui double
   cette classe (spécificité 0-3-0). Sans elle, le texte du bouton hérite du
   bleu nuit du menu et devient invisible sur le fond bleu nuit de la pilule. */
.wp-block-navigation .nav-cta > a.wp-block-navigation-item__content,
.wp-block-navigation-item.nav-cta a.wp-block-navigation-item__content,
/* Menu déroulé : Ollie repeint l'élément COURANT avec un fond translucide, à
   une spécificité de 0-5-0 qui écrasait le nôtre. Sur la page Contact, le
   bouton perdait donc son fond. On remonte à 0-5-1 sur ce seul cas. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .nav-cta > a.wp-block-navigation-item__content {
    background: var(--wp--preset--color--main);
    color: var(--wp--preset--color--tertiary);
    /* Volontairement plus rond que les autres boutons (8px) : c'est le seul
       bouton de la navigation, sa forme le distingue des liens voisins. */
    border-radius: 50px;
    padding: 0.7em 1.6em;
    font-weight: 600;
    transition: background var(--wp--custom--transition--base);
}

.wp-block-navigation .nav-cta > a.wp-block-navigation-item__content:hover,
.wp-block-navigation-item.nav-cta a.wp-block-navigation-item__content:hover {
    background: var(--wp--preset--color--primary-alt-accent);
    color: var(--wp--preset--color--tertiary);
}

/* Lien de la page courante : jamais de souligné, ni au repos ni au survol.

   Ollie souligne le lien actif depuis core-navigation.css avec un sélecteur
   à quatre classes (spécificité 0-4-1) :
     .wp-block-navigation__responsive-container:not(.is-menu-open)
     .wp-block-navigation__container .current-menu-item > a
   On reprend donc le même sélecteur en ajoutant .wp-block-navigation-item__content,
   ce qui donne 0-5-1 : la règle gagne quel que soit l'ordre de chargement des
   feuilles, sans avoir besoin de !important. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container a.wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation a.wp-block-navigation-item__content,
.wp-block-navigation a.wp-block-navigation-item__content:hover,
.wp-block-navigation a.wp-block-navigation-item__content:focus,
.current-menu-item > a,
a[aria-current="page"],
a[aria-current="page"]:hover {
    text-decoration: none;
}

/* Menu déroulé : pas de pastille de fond sur l'élément courant ni au survol.

   Ollie peint ces deux états avec « background: color-mix(currentColor,
   transparent 97%) », un gris très pâle qui alourdit le menu sur fond crème.
   On le neutralise, en épargnant le bouton Contact — seul élément dont le
   fond est voulu.

   Le sélecteur pèse 0-6-1 pour dépasser celui d'Ollie, qui est en 0-5-0. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item:not(.nav-cta) > a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item:not(.nav-cta):hover > a.wp-block-navigation-item__content {
    background: transparent;
}

/* Menu responsive sur fond crème.

   Le cœur impose un fond blanc et un texte noir dès que le bloc Navigation
   n'a pas de couleur propre, à une spécificité de 0-5-0. On repasse devant
   avec 0-5-1 plutôt que d'aller poser une couleur sur le bloc, ce qui
   peindrait aussi une bande sur le bureau. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--main);
}

/* Aligner le bouton « fermer » sur le bouton « ouvrir ».

   Les deux sont positionnés par des systèmes qui ne se parlent pas : celui
   qui ouvre vit dans le flux de l'en-tête, centré sur la ligne du logo ;
   celui qui ferme est en absolu dans l'overlay, calé sur le padding de
   celui-ci. D'où un décalage d'une cinquantaine de pixels, le contrôle se
   dérobant sous le doigt.

   On repositionne donc le bouton « fermer » en fixed, à la même ordonnée que
   l'autre : padding haut de l'en-tête + demi-hauteur du logo, moins la moitié
   de l'icône (24px de haut). Latéralement, on reprend le padding de l'en-tête.

   --fmp-header-logo-height doit refléter la hauteur RENDUE du logo : sa
   largeur (200px, posée dans l'éditeur) multipliée par son rapport natif
   416/800. À revoir si la taille du logo change — c'est le prix à payer,
   aucune formule CSS ne peut lire cette hauteur toute seule. */
:root {
    --fmp-header-logo-height: 104px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: fixed;
    top: calc(var(--wp--preset--spacing--large) + (var(--fmp-header-logo-height) / 2) - 12px);
    right: var(--wp--preset--spacing--medium);
}

/* Élément de menu réservé au menu responsive.

   Ajoutez la classe « nav-mobile-only » à un lien de navigation pour qu'il
   n'apparaisse que dans le menu déroulé. 600px est le seuil auquel WordPress
   bascule entre l'overlay et le menu horizontal.

   La classe .wp-block-navigation-item figure dans le sélecteur pour dépasser
   la règle du cœur qui met ces éléments en display: flex — elle est chargée
   après notre feuille et l'emporterait à spécificité égale. */
@media (min-width: 600px) {
    .wp-block-navigation .wp-block-navigation-item.nav-mobile-only {
        display: none;
    }
}

/* Espacement du menu principal */
.wp-block-navigation__container {
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Le logo ne doit jamais être écrasé par la mise en page flex */
header.wp-block-template-part .wp-block-site-logo img {
    height: auto;
}

/* ---------- 6. Section sombre (bandeau d'appel à l'action) ----------
   Ajouter la classe « section-dark » au groupe de fond bleu nuit.  */

.section-dark {
    background: var(--wp--preset--color--main);
    color: var(--wp--preset--color--tertiary);
}

.section-dark :is(h1, h2, h3, h4, h5, h6),
.section-dark p {
    color: var(--wp--preset--color--tertiary);
}

.section-dark .wp-block-button__link {
    background: var(--wp--preset--color--primary-alt);
    color: var(--wp--preset--color--main);
}

.section-dark .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary-accent);
    color: var(--wp--preset--color--main);
}

/* ---------- 7. Pied de page ---------- */

footer.wp-block-template-part {
    background: var(--wp--preset--color--tertiary);
    border-top: 1px solid var(--wp--preset--color--border-light);
}

footer.wp-block-template-part :is(h2, h3, h4) {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    margin-bottom: 1rem;
}

footer.wp-block-template-part a {
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
}

footer.wp-block-template-part a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

/* Icônes sociales en pastilles rondes */
footer .wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
    background: var(--wp--preset--color--border-light);
    color: var(--wp--preset--color--main);
    border-radius: var(--wp--custom--radius--pill);
    transition: background var(--wp--custom--transition--base),
        transform var(--wp--custom--transition--base);
}

footer .wp-block-social-links:not(.is-style-logos-only) .wp-social-link:hover {
    background: var(--wp--preset--color--primary-alt);
    transform: translateY(-2px);
}

/* Barre de mentions légales */
.footer-legal {
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--secondary);
    border-top: 1px solid var(--wp--preset--color--border-light);
    padding-top: 1.5rem;
}

/* ---------- Colonne collante ----------

   Pour les pages tarif : une colonne de texte courte face à une colonne
   d'images longue laisse un grand vide. Plutôt que de le combler, on le met
   au travail — le texte et le prix suivent le défilement pendant qu'on
   parcourt les photos.

   align-self est indispensable : dans un conteneur flex, les colonnes
   s'étirent sur toute la hauteur par défaut, et une colonne déjà aussi haute
   que son parent n'a nulle part où coller. WordPress le pose déjà quand on
   choisit l'alignement vertical « haut », mais on ne s'en remet pas à ce
   réglage : il peut être changé dans l'éditeur sans qu'on y pense.

   Au-dessus de 781px seulement : en dessous, les colonnes s'empilent et
   coller n'aurait plus de sens.

   À poser sur la COLONNE, dans Avancé → Classe(s) CSS. */
@media (min-width: 782px) {
    .wp-block-column.colonne-collante {
        position: sticky;
        top: var(--wp--preset--spacing--large);
        align-self: flex-start;
    }
}

/* ---------- 8. Bloc « information de contact » ---------- */

.is-style-contact-card {
    /* Même raison que .is-style-card : une rangée placée dans une « Pile »
       ne prend pas 100 % de la largeur sans align-self. */
    align-self: stretch;
    width: 100%;
    background: var(--wp--preset--color--tertiary);
    border-radius: var(--wp--custom--radius--medium);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.is-style-contact-card :is(h2, h3, h4) {
    font-family: var(--wp--preset--font-family--primary);
    font-weight: 700;
    margin: 0 0 0.35rem;
}

/* ---------- 9. Formulaires (SureForms et champs natifs) ---------- */

.sureforms-form label,
.srfm-block label,
.wp-block-form label {
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
    color: var(--wp--preset--color--main);
    margin-bottom: 0.45rem;
    display: block;
}

.srfm-input-common,
.srfm-form input[type="text"],
.srfm-form input[type="email"],
.srfm-form input[type="tel"],
.srfm-form textarea,
.wp-block-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
    width: 100%;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--border-light);
    border-radius: var(--wp--custom--radius--small);
    padding: 0.85rem 1rem;
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--base);
    color: var(--wp--preset--color--main);
    transition: border-color var(--wp--custom--transition--base),
        box-shadow var(--wp--custom--transition--base);
}

.srfm-input-common:focus,
.srfm-form textarea:focus,
.wp-block-form :is(input, textarea):focus {
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 0 0 3px var(--wp--preset--color--primary-accent);
    outline: none;
}

.srfm-form button[type="submit"],
.srfm-submit-button button,
.wp-block-form button[type="submit"] {
    background: var(--wp--preset--color--main);
    color: var(--wp--preset--color--tertiary);
    border: 0;
    border-radius: var(--wp--custom--radius--button);
    padding: 0.95em 2.4em;
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--wp--custom--transition--base);
}

.srfm-form button[type="submit"]:hover,
.srfm-submit-button button:hover,
.wp-block-form button[type="submit"]:hover {
    background: var(--wp--preset--color--primary-alt-accent);
}

/* ---------- 10. Images et galeries ---------- */

/* LiteSpeed (conversion WebP) enveloppe chaque image dans un <picture> et y
   recopie la classe et le style inline de l'image. Or <picture> est un élément
   inline : le « width: 200px » posé par l'éditeur n'a aucun effet, et l'image
   interne retombe sur ses dimensions naturelles — d'où un logo affiché en 800 px.
   On rend donc le <picture> dimensionnable et on fait remplir l'image. */
.wp-block-image picture {
    display: inline-block;
    max-width: 100%;
}

.wp-block-image picture > img {
    width: 100%;
    height: auto;
}

/* Garde-fou : si LiteSpeed change à nouveau de comportement, le logo ne
   pourra pas repartir à 800 px. À relever si le logo doit un jour être
   volontairement plus grand que 260 px. */
header.wp-block-template-part .wp-block-image {
    margin: 0;
    flex-shrink: 0;
}

header.wp-block-template-part .wp-block-image picture,
header.wp-block-template-part .wp-block-image img {
    max-width: min(100%, 260px);
}

/* Arrondi automatique sur toutes les photos de galerie.

   On exclut is-style-rounded : c'est le style natif « Arrondi » de WordPress,
   qui sert à faire des images RONDES (9999px). L'ancienne règle l'écrasait
   à 10px et cassait donc le style natif sans le dire. */
.wp-block-gallery figure.wp-block-image:not(.is-style-rounded) img,
.wp-block-gallery .wp-block-image:not(.is-style-rounded) picture > img {
    border-radius: var(--wp--custom--radius--image);
}

/* Style de bloc « Coins arrondis » pour une image isolée.

   Reprend le même jeton que les galeries, pour que l'arrondi reste cohérent
   partout : une seule valeur à changer dans theme.json.

   À ne pas confondre avec « Arrondi », le style natif de WordPress, qui rend
   l'image entièrement RONDE. */
.wp-block-image.is-style-soft-rounded img {
    border-radius: var(--wp--custom--radius--image);
}

/* ---------- Galerie « Quilt » : mosaïque à tailles variables ----------

   WordPress n'a pas de disposition mosaïque : le bloc Galerie ne sait faire
   que des colonnes de largeur égale. On repasse donc la galerie en grille CSS
   et on fait déborder certaines vignettes sur deux colonnes ou deux rangées.

   Le rythme est automatique et se répète toutes les 8 photos, ce qui reproduit
   l'alternance de la maquette sans rien avoir à régler photo par photo. Pour
   reprendre la main sur une vignette précise, ajoutez-lui l'une des classes
   quilt-large, quilt-haute ou quilt-grande (voir plus bas). */

.wp-block-gallery.is-style-quilt {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(140px, 13vw, 200px);
    gap: var(--wp--style--unstable-gallery-gap, 16px);
}

/* Le bloc Galerie dimensionne ses enfants en flex-basis : il faut neutraliser
   cette largeur pour que la grille reprenne la main. */
.wp-block-gallery.is-style-quilt figure.wp-block-image {
    width: auto !important;
    max-width: none;
    margin: 0;
    grid-column: span 1;
    grid-row: span 1;
}

.wp-block-gallery.is-style-quilt figure.wp-block-image,
.wp-block-gallery.is-style-quilt figure.wp-block-image picture,
.wp-block-gallery.is-style-quilt figure.wp-block-image img {
    height: 100%;
}

.wp-block-gallery.is-style-quilt figure.wp-block-image img {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Rythme répétitif sur huit photos */
.wp-block-gallery.is-style-quilt figure.wp-block-image:nth-child(8n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.wp-block-gallery.is-style-quilt figure.wp-block-image:nth-child(8n + 4) {
    grid-row: span 2;
}

.wp-block-gallery.is-style-quilt figure.wp-block-image:nth-child(8n + 6) {
    grid-column: span 2;
}

.wp-block-gallery.is-style-quilt figure.wp-block-image:nth-child(8n + 7) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Reprise en main manuelle. Déclarées après le rythme automatique pour
   l'emporter à spécificité égale. */
.wp-block-gallery.is-style-quilt figure.wp-block-image.quilt-large {
    grid-column: span 2;
    grid-row: span 1;
}

.wp-block-gallery.is-style-quilt figure.wp-block-image.quilt-haute {
    grid-column: span 1;
    grid-row: span 2;
}

.wp-block-gallery.is-style-quilt figure.wp-block-image.quilt-grande {
    grid-column: span 2;
    grid-row: span 2;
}

.wp-block-gallery.is-style-quilt figure.wp-block-image.quilt-simple {
    grid-column: span 1;
    grid-row: span 1;
}

/* Sous 900px la mosaïque à quatre colonnes devient illisible : on passe à
   deux colonnes et on ramène tout le monde sur une seule case en largeur. */
@media (max-width: 900px) {
    .wp-block-gallery.is-style-quilt {
        grid-template-columns: repeat(2, 1fr);
    }

    .wp-block-gallery.is-style-quilt figure.wp-block-image {
        grid-column: span 1 !important;
    }
}

/* ---------- Galerie « Masonry » : hauteurs libres ----------

   Variante de la mosaïque, à comparer avec elle. Là où le quilt impose des
   cases de hauteur fixe et recadre les photos pour les remplir, le masonry
   laisse chaque photo à son format : les colonnes se remplissent de haut en
   bas et les hauteurs s'ajustent d'elles-mêmes.

   Conséquence utile : aucune photo n'étant recadrée, les classes de cadrage
   focus-* et les formats quilt-* n'ont plus d'objet ici.

   Technique : les colonnes CSS (column-count), et non la grille. La vraie
   grille masonry (grid-template-rows: masonry) n'est pas encore assez
   répandue en 2026 pour un site en production. Contrepartie des colonnes :
   les photos se lisent de haut en bas colonne par colonne, et non de gauche
   à droite rangée par rangée. */

.wp-block-gallery.is-style-masonry {
    display: block;
    column-count: 3;
    column-gap: var(--wp--style--unstable-gallery-gap, 16px);
}

.wp-block-gallery.is-style-masonry figure.wp-block-image {
    display: block;
    width: auto !important;
    max-width: none;
    margin: 0 0 var(--wp--style--unstable-gallery-gap, 16px);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.wp-block-gallery.is-style-masonry figure.wp-block-image picture,
.wp-block-gallery.is-style-masonry figure.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .wp-block-gallery.is-style-masonry {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .wp-block-gallery.is-style-masonry {
        column-count: 1;
    }
}

/* Bouton d'agrandissement : le remettre dans le coin.

   On force scaleAttr à « contain » sur les images de galerie (voir le filtre
   render_block_data dans functions.php) pour que la visionneuse ouvre la photo
   entière. Or setButtonStyles branche lui aussi sur cette valeur et décale le
   bouton comme s'il y avait des bandes noires à compenser.

   Sans compensation, ce calcul vaut « écart entre la figure et l'image + 16px ».
   Dans une galerie l'image remplit sa figure, donc l'écart est nul : la valeur
   correcte est 16px. On la rétablit.

   !important est ici nécessaire, non par facilité : l'API Interactivity écrit
   top et right en style inline sur le bouton (data-wp-style--top / --right),
   qu'aucun sélecteur ne peut devancer. */
.wp-block-gallery .wp-lightbox-container > button.lightbox-trigger {
    top: 16px !important;
    right: 16px !important;
}

/* ---------- Cadrage des photos recadrées ----------

   Dès qu'une photo est recadrée (mosaïque, carte, ratio imposé), c'est
   object-position qui décide de la partie conservée.

   Le point focal natif de WordPress reste prioritaire : il pose un
   object-position en style inline, donc il l'emporte sur ces classes. On les
   utilise quand on ne veut pas fixer de ratio d'aspect sur chaque image.
   À poser sur la photo, dans Réglages du bloc → Avancé → Classe(s) CSS. */

.focus-haut img {
    object-position: center top;
}

.focus-bas img {
    object-position: center bottom;
}

.focus-gauche img {
    object-position: left center;
}

.focus-droite img {
    object-position: right center;
}

.focus-centre img {
    object-position: center center;
}

.focus-haut-gauche img {
    object-position: left top;
}

.focus-haut-droite img {
    object-position: right top;
}

.focus-bas-gauche img {
    object-position: left bottom;
}

.focus-bas-droite img {
    object-position: right bottom;
}

/* Photo de présentation « Qui suis-je ? » */
.is-style-portrait img {
    border-radius: var(--wp--custom--radius--large);
    box-shadow: var(--wp--preset--shadow--photo);
}

/* ---------- 11. Chiffres clés (« 20+ Concerts & Matchs ») ---------- */

.is-style-stat {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 500;
    line-height: 1;
    color: var(--wp--preset--color--main);
    margin-bottom: 0.35rem;
}

.is-style-stat+p {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--secondary);
    margin-top: 0;
}