/* ============================================================
   CORRECTIFS RESPONSIVE - Page d'accueil (audit du 17/09/2026)
   Fichier dédié, chargé indépendamment de css-output/bundle.css
   (qui n'est actuellement pas enqueue par le thème parent).
   Ces largeurs fixes viennent d'un <style> global injecte dans le
   <head> (hors thème) et de classes utilitaires Tailwind générées
   depuis le contenu LiveCanvas de la page (donc hors des fichiers
   du thème). On neutralise ici avec !important pour garantir la
   priorité, quelle que soit la source d'origine.
   ============================================================ */

/* Bug 1 : .main-title (titre du hero) est en position:absolute avec
   un décalage (right:50px + translateX(-50px)) prévu pour le desktop.
   Un correctif existe déjà pour le mobile (<=575.98px) mais rien entre
   576px et 1535px : le texte est coupé à gauche sur tablette, et peut
   chevaucher la 1ère image du hero sur les largeurs proches de 1535px.
   On repasse en relative (au-dessus des images, dans le flux normal)
   entre 576px et 1535px. A partir de 1536px, on garde volontairement le
   position:absolute d'origine (choix client). */
@media screen and (min-width: 576px) and (max-width: 1535px) {
    .main-title {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Bug 2 : certains blocs (intro "Nos services", bandeau "Un arbre pour
   faire vivre le souvenir") passent à une largeur/hauteur fixe pensée
   pour le grand écran (1285px / 1240px / 550px) dès 768px (breakpoint
   Tailwind "md:"), ce qui fait déborder toute la page à l'horizontale
   sur tablette et petit laptop (confirmé jusqu'à 1280px de large). */
@media screen and (min-width: 768px) and (max-width: 1350px) {

    /* Tous les blocs "md:w-[Npx]" repérés sur la page d'accueil
       (1285px, 1240px, 640px, 530px, 450px) repassent en fluide. */
    [class*="md:w-["] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .engagement-rse[class*="md:h-[550px]"] {
        height: auto !important;
        min-height: 400px !important;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Bug 3 : rangée d'icônes "Boutique" (Fleurs / Plaques / Configurateur)
       avec un espacement fixe de 8rem (128px) pensé pour le desktop :
       3 x 150px + 2 x 128px = 706px dans une colonne d'environ 340px. */
    [class*="md:gap-["] {
        gap: 1.5rem !important;
        flex-wrap: wrap !important;
    }

    /* Bug 3bis : bloc "Disponibilité 7J/7..." largeur fixe 260px dans une
       colonne de grille (25%) qui ne fait qu'environ 160-180px à cette taille. */
    .reassurance {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Bug 4 : le bouton flottant "Urgence décès" (#btn-tel-fixe) est en
   position fixed en permanence : c'est un choix volontaire (CTA
   d'urgence toujours visible), donc il peut chevaucher du contenu en
   scrollant - ce n'est pas un bug à 100%, mais on sécurise au moins
   son affichage pour qu'il ne soit jamais collé au bord ou coupé. */
.urgence {
    max-width: calc(100vw - 16px);
}

@media screen and (max-width: 575.98px) {
    .urgence {
        right: 8px !important;
    }
}

/* Bug 4bis : ce widget est positionné à top:320px en dur, ce qui le fait
   tomber pile sur la 4e image du hero dès que celle-ci commence plus haut
   que 304px du haut de page (le cas entre ~1024px et au moins 1920px de
   large - confirmé par capture d'écran à 1535px). On le remonte pour
   qu'il reste dans l'espace libre entre le header et les images du hero,
   quelle que soit la largeur d'écran (à partir de 768px, en dessous le
   widget passe déjà dans sa version réduite qui ne pose pas ce problème). */
@media screen and (min-width: 768px) {
    .urgence {
        top: 150px !important;
    }
}

/* Popup "Urgence décès" : sous 1024px (seuil où le header LiveCanvas masque
   le texte du bouton), #btn-tel-fixe est remplacé par #btn-urgence-mobile
   qui ouvre une popup au lieu d'appeler directement.
   Voir functions.php (markup + explication du tracking) et js/custom.js. */
#btn-urgence-mobile {
    display: none;
}

/* Tracking GTM (déclencheur "tous les éléments") : sans ça, un clic sur
   l'icône ou le texte du bouton PC est attribué à l'<img>/<span>, qui n'ont
   ni l'id "btn-tel-fixe" ni le numéro dans leur URL -> conversion perdue.
   Les enfants laissent passer le clic, qui est attribué au lien <a>. */
#btn-tel-fixe * {
    pointer-events: none;
}

@media screen and (max-width: 1024px) {
    #btn-tel-fixe {
        display: none !important;
    }

    #btn-urgence-mobile {
        display: flex;
    }
}

.urgence-popup {
    width: min(calc(100vw - 32px), 420px);
    max-width: none;
    margin: auto; /* centrage natif du <dialog>, annulé par un reset du site */
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    color: var(--black, #333333);
}

.urgence-popup::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.urgence-popup__inner {
    position: relative;
    padding: 36px 24px 24px;
    text-align: center;
}

.urgence-popup__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.urgence-popup__titre {
    margin: 0 0 12px;
    color: var(--primary, #691311);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.urgence-popup__horaires {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 4px solid var(--primary, #691311);
    border-radius: 6px;
    background: rgba(105, 19, 17, 0.08);
    color: var(--primary, #691311);
    font-size: 17px;
    line-height: 1.4;
}

.urgence-popup__texte {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.5;
}

.urgence-popup__texte a {
    color: var(--primary, #691311);
    text-decoration: underline;
}

.urgence-popup__appel {
    display: block;
    padding: 14px 20px;
    border-radius: 8px;
    background: var(--primary, #691311);
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.urgence-popup__close:focus-visible,
.urgence-popup__appel:focus-visible {
    outline: 3px solid var(--primary, #691311);
    outline-offset: 2px;
}