/* ============================================================
   ST GARD — règles ajoutées pour les pages converties en blocs
   ------------------------------------------------------------
   Ce fichier est chargé APRÈS assets/css/main.css, sur le site
   public comme dans l'éditeur. main.css n'est pas modifié : tout
   ce qui a été nécessaire pour rendre les pages éditables est ici,
   ce qui permet de tout annuler en supprimant ce seul fichier.

   Chaque règle compense un effet de bord du passage du HTML écrit
   à la main vers des blocs Gutenberg : un <div> devenu <p> est
   désormais concerné par des règles que le thème écrivait pour les
   paragraphes, ou au contraire perd la priorité face à elles.
   ============================================================ */

/* --- Boutons et liens isolés -------------------------------------------
   Ils étaient enfants directs d'un <div> ; dans l'éditeur ils doivent
   être dans un paragraphe pour rester modifiables : on neutralise la
   marge basse que le thème applique à tous les <p>. */
p.btn-line {
    margin: 0;
}

/* Dans la barre d'actions du hero, le bouton était enfant direct du
   conteneur flex (il s'étirait donc à la hauteur du plus grand). */
.hero-actions > p.btn-line {
    display: flex;
}

/* --- Blocs de texte qui étaient des <div> ou <span> ---------------------
   Devenus des <p>, ils héritaient de la marge basse globale
   (p { margin-bottom: 16px }) absente à l'origine. Ces classes n'ont
   aucune règle de marge dans les feuilles du thème : on la remet à zéro. */
.deplacement-icon,
.service-price-badge,
.category-cta,
.faq-toggle {
    margin-bottom: 0;
}

/* --- Prix des cartes de prestation (page Nos Expertises) ---------------
   Un <div> devenu <p> dans .service-card : la règle .service-card p de
   main.css (police 0.93rem, marge basse 16px) prenait le dessus sur
   .service-price-badge (0.85rem), ce qui élargissait le badge et faisait
   passer les titres des cartes sur deux lignes. */
.service-card p.service-price-badge {
    font-size: 0.85rem;
    margin-bottom: 0;
    color: #16a34a;
    line-height: 1.8;
}

/* --- Icône du bandeau « frais de déplacement » -------------------------
   C'était un <span> en ligne ; devenu <p> (bloc) il passait à la ligne
   suivante. */
.deplacement-banner p.deplacement-icon {
    display: inline;
}

/* --- Icônes emoji des engagements (page À Propos) ----------------------
   .commitment-icon était un <div> : ses règles (.commitment-item p a une
   spécificité supérieure) s'appliquaient. Devenu <p>, c'est
   .commitment-item p qui l'emportait (marge 0, police 0.9rem).
   Valeurs d'origine rétablies avec une spécificité suffisante. */
.commitment-item p.commitment-icon {
    margin: 0 auto 16px;
    font-size: 16px;
    line-height: 1.8;
    color: #b8962e;
}

/* --- Signature (page d'accueil) ----------------------------------------
   La signature était un <div> (marge 24px) ; devenue un <p>, c'est
   .about-content p (20px) qui l'emportait. Valeur d'origine rétablie. */
.about-content p.about-signature {
    margin-bottom: 24px;
}

p.testimonial-author {
    margin: 0;
}

/* --- Bandeau « Devis gratuit » -----------------------------------------
   Le style était en ligne sur la section dans le gabarit d'origine. */
.banner-devis {
    padding: 30px 0;
    background: #fff;
}

/* --- Images dont la classe est passée sur la <figure> ------------------
   Le bloc Image place la classe sur la figure, pas sur l'image : on
   reporte donc les propriétés d'origine sur l'image elle-même. */
.welcome-image img {
    width: 100%;
    height: auto;
    display: block;
}

.who-is-image img {
    width: 100%;
}

/* --- Styles en ligne extraits en classes (pages converties) ------------ */
.stgard-u1 { font-size: 0.85rem; color: #888; }
.stgard-u2 { font-size: 0.85rem; color: #888; margin-top: 8px; }

/* ============================================================
   Ajouts au thème (hors conversion de contenu)
   ============================================================ */

/* --- Icône Facebook dans l'en-tête, à droite du bouton « Nous Contacter » ---
   Le bouton et l'icône sont groupés dans .header-actions pour qu'ils restent
   côte à côte malgré le justify-content: space-between de .header-inner. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-social {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #b8962e;
    color: #fff;
    border: 2px solid #b8962e;
    border-radius: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.header-social svg {
    width: 20px;
    height: 20px;
    display: block;
}

.header-social:hover {
    background: #9a7d22;
    border-color: #9a7d22;
    color: #fff;
}

/* Comme le bouton « Nous Contacter », l'icône n'apparaît qu'à partir de 768px. */
@media (min-width: 768px) {
    .header-social {
        display: inline-flex;
    }
}

/* --- Icône Facebook du pied de page, après l'adresse e-mail ---
   Dans le pied de page, on garde le bleu Facebook : c'est une zone de faible
   attention, la reconnaissance immédiate l'emporte sur la cohérence de teinte. */
.footer-social-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: #1877f2;
}

.footer-social-badge svg {
    width: 11px;
    height: 14px;
    display: block;
    fill: #fff;
}

/* --- Conteneur interne des blocs « Groupe » --------------------------------
   WordPress — et WordPress.com — peut envelopper le contenu d'un bloc Groupe
   dans un <div class="wp-block-group__inner-container">. Ce div s'interpose
   alors entre les grilles du thème (.values-grid, .services-grid…) et leurs
   enfants : la grille n'a plus qu'un seul enfant et tout s'empile en une
   colonne, ce qui casse toute la mise en page.

   Le thème le retire au moment du rendu (voir functions.php). Cette règle est
   une seconde protection : avec display:contents, le div ne compte plus dans la
   mise en page, donc les enfants retrouvent leur place dans la grille, que le
   div soit présent ou non. */
.wp-block-group__inner-container {
    display: contents;
}