/*
Theme Name: Digital Agency Child
Template: digital-agency
Author: v-seo.eu
Version: 4.7
Description: Theme enfant de Digital Agency. Contient les personnalisations de v-seo.eu.
*/

/* CSS de transition retiree le 2026-07-31 : les widgets portent
   desormais les couleurs de la demo Digital Agency. */

/* ---------------------------------------------------------------
   Fermeture des flottements sur les pages rendues par le theme
   (blog, archives, WooCommerce).

   Le contenu de ces pages est place dans un conteneur flottant
   (.lay4, .lay1…). Le pied de page d'origine du theme contenait un
   element de nettoyage ; celui de Header Footer Elementor ne l'a pas,
   d'ou un pied de page qui remontait sous l'en-tete avec le contenu
   par-dessus. On restaure le comportement attendu.
   --------------------------------------------------------------- */
.fixed_site::after,
.fixed_wrap::after,
.layer_wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.ehf-footer,
footer.site-footer,
.footer-width-fixer {
    clear: both;
}

/* ---------------------------------------------------------------
   BOUTIQUE — mise au format de la refonte

   Les archives de categorie produit sortaient du gabarit WooCommerce
   par defaut : pas de H1, un bandeau vide de 400 px herite du theme
   parent, une grille flottante sans fond ni ombre, un prix moutarde
   et un bouton gris. On les aligne sur le reste du site.
   --------------------------------------------------------------- */

/* Le bandeau decoratif du theme parent n'a ni titre ni image sur les
   pages boutique : il n'y laissait qu'un vide de 400 px. */
body.woocommerce .post_head,
body.woocommerce-page .post_head,
body.woocommerce .page_head,
body.woocommerce-page .page_head {
    display: none;
}

/* Le bandeau deborde volontairement de son conteneur de 1170 px pour
   occuper toute la largeur, comme sur les pages refondues.
   « clip » plutot que « hidden » : contient le debordement sans
   neutraliser les positionnements colles. */
.page_wrap.layer_wrapper {
    overflow-x: clip;
}

.vseo-boutique-bandeau {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 72px 24px;
    margin-bottom: 44px;
    background: #181a1f;
    text-align: center;
}

.vseo-boutique-bandeau__centre {
    max-width: 860px;
    margin: 0 auto;
}

.vseo-boutique-bandeau__titre {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.2;
}

.vseo-boutique-bandeau__trait {
    display: block;
    width: 70px;
    height: 3px;
    margin: 20px auto 0;
    background: #fd4c1c;
}

.vseo-boutique-bandeau__texte {
    margin-top: 20px;
    color: #d7d9de;
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    line-height: 1.7;
}

.vseo-boutique-bandeau__texte p:last-child {
    margin-bottom: 0;
}

/* --- grille des produits --- */
body.woocommerce ul.products,
body.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin: 0 0 46px;
    padding: 0;
    list-style: none;
}

body.woocommerce ul.products::before,
body.woocommerce ul.products::after {
    content: none;
}

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(24, 26, 31, 0.10);
    overflow: hidden;
    padding-bottom: 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(24, 26, 31, 0.16);
}

/* Les visuels des produits n'ont pas tous le meme rapport de forme (1.33 a
   1.75) : hauteur fixe et recadrage, comme partout ailleurs sur le site. */
body.woocommerce ul.products li.product img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center;
    margin: 0 0 18px;
    border-radius: 0;
    transition: transform 0.4s ease;
}

body.woocommerce ul.products li.product:hover img {
    transform: scale(1.04);
}

body.woocommerce ul.products li.product a img {
    border-radius: 0;
}

@media (max-width: 767px) {
    body.woocommerce ul.products li.product img { height: 200px; }
}

body.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 10px;
    padding: 0 20px;
    color: #181a1f;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

body.woocommerce ul.products li.product .price {
    display: block;
    margin: 0 0 16px;
    padding: 0 20px;
    color: #fd4c1c;
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 600;
}

body.woocommerce ul.products li.product .price del {
    color: #9a9a9a;
    font-weight: 400;
}

body.woocommerce ul.products li.product .star-rating {
    margin: 0 20px 12px;
}

body.woocommerce ul.products li.product .button,
body.woocommerce ul.products li.product .added_to_cart {
    margin: auto 20px 0;
    padding: 11px 18px;
    background: #d63b0d;
    color: #ffffff;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: background 0.25s ease;
}

body.woocommerce ul.products li.product .button:hover,
body.woocommerce ul.products li.product .added_to_cart:hover {
    background: #e03d10;
    color: #ffffff;
}

/* --- barre de tri et fil d'Ariane --- */
body.woocommerce .woocommerce-breadcrumb {
    margin: 0 0 22px;
    color: #7a7a7a;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

body.woocommerce .woocommerce-breadcrumb a {
    color: #5b5959;
}

body.woocommerce .woocommerce-breadcrumb a:hover {
    color: #fd4c1c;
}

body.woocommerce .woocommerce-result-count,
body.woocommerce .woocommerce-ordering {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

body.woocommerce .woocommerce-ordering select {
    padding: 8px 12px;
    border: 1px solid #e2e6ee;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
}

/* --- adaptation aux petits ecrans --- */
@media (max-width: 1024px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
    .vseo-boutique-bandeau__titre { font-size: 34px; }
    .vseo-boutique-bandeau { padding: 56px 20px; }
}

@media (max-width: 768px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products {
        grid-template-columns: 1fr;
    }
    .vseo-boutique-bandeau__titre { font-size: 28px; }
}

/* ---------------------------------------------------------------
   BOUTIQUE — fiche produit, panier et commande

   La fiche produit sortait avec les couleurs d'origine de la
   distribution WooCommerce : prix moutarde et bouton violet. On la
   raccorde a l'orange de la refonte, ainsi que les boutons du panier
   et de la commande, qui partagent la meme classe .alt.
   --------------------------------------------------------------- */

body.woocommerce .summary .price,
body.woocommerce .summary .price .woocommerce-Price-amount,
body.woocommerce div.product p.price,
body.woocommerce div.product span.price {
    color: #fd4c1c;
    font-family: "Poppins", sans-serif;
    font-size: 26px;
    font-weight: 600;
}

body.woocommerce div.product .summary .price del {
    color: #9a9a9a;
    font-size: 20px;
    font-weight: 400;
}

body.woocommerce div.product .product_title {
    color: #181a1f;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

body.woocommerce .single_add_to_cart_button,
body.woocommerce button.button.alt,
body.woocommerce a.button.alt,
body.woocommerce input.button.alt,
body.woocommerce #respond input#submit.alt {
    background: #d63b0d;
    color: #ffffff;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    transition: background 0.25s ease;
}

body.woocommerce .single_add_to_cart_button:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce #respond input#submit.alt:hover {
    background: #e03d10;
    color: #ffffff;
}

body.woocommerce .quantity input.qty {
    padding: 9px 6px;
    border: 1px solid #e2e6ee;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
}

/* onglets de la fiche */
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active > a,
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active > a:hover,
body.woocommerce div.product .woocommerce-tabs ul.tabs li > a:hover {
    color: #fd4c1c;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

/* titres « Produits similaires », « Vous aimerez aussi » */
body.woocommerce .related > h2,
body.woocommerce .upsells > h2,
body.woocommerce .cross-sells > h2 {
    margin-bottom: 28px;
    color: #181a1f;
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 600;
}

/* messages de WooCommerce : la bande de gauche prend l'orange du site */
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error {
    border-top-color: #fd4c1c;
    font-family: "Poppins", sans-serif;
}

body.woocommerce .woocommerce-message::before,
body.woocommerce .woocommerce-info::before {
    color: #fd4c1c;
}

/* ---------------------------------------------------------------
   BLOG — retrait du lien « + Read More »

   Il est ecrit en dur dans six gabarits du theme parent
   (sktframe/core-posts.php et templates/*blog_template.php) :

       <div class="blog_mo"><a href="…">+ Read More</a></div>

   Aucun filtre PHP ne peut donc l'intercepter. Recopier ces six
   gabarits dans le theme enfant les figerait a la version actuelle
   et ferait manquer toute correction ulterieure du parent : on
   prefere les masquer ici.

   Le lien ne disparait pas de la navigation : chaque article reste
   atteignable par son image et par son titre, tous deux cliquables.
   --------------------------------------------------------------- */
.blog_mo {
    display: none;
}

/* L'extrait se terminant desormais par des points de suspension,
   on lui rend un peu d'air avant l'article suivant. */
.lay4 .post_content p:last-child,
.lay1 .post_content p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
   CARTES — hauteur uniforme des visuels

   Les colonnes d'une rangee Elementor s'alignent sur la plus haute.
   Les visuels des cartes n'ayant pas le meme rapport de forme — 451 px
   de haut pour l'un, 200 px pour ses voisins — une seule image en
   portrait imposait sa hauteur a toute la rangee et laissait jusqu'a
   367 px de blanc dans les autres cartes.

   On fixe donc une hauteur commune et on recadre : le visuel remplit
   son cadre sans deformation, quel que soit son format d'origine.
   La classe « vseo-carte » est posee sur les colonnes qui contiennent
   a la fois une image et un titre h3.
   --------------------------------------------------------------- */

.vseo-carte .elementor-widget-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 1024px) {
    .vseo-carte .elementor-widget-image img { height: 210px; }
}

@media (max-width: 767px) {
    .vseo-carte .elementor-widget-image img { height: 200px; }
}

/* ---------------------------------------------------------------
   FORMULAIRE DE CONTACT

   Les champs texte etaient deja au format de la refonte — 66 px de
   haut, Poppins 16, coins arrondis. Trois elements etaient restes en
   dehors : la liste deroulante au rendu natif du navigateur (19 px,
   Arial 13), la case a cocher a sa taille par defaut, et le bouton
   d'envoi en degrade bleu alors que tous les appels a l'action du
   site sont en orange.
   --------------------------------------------------------------- */

.wpcf7 select.wpcf7-select {
    display: block;
    width: 100%;
    height: 66px;
    margin: 0;
    padding: 18px 54px 18px 22px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #181a1f;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* chevron dessine en SVG : aucune requete, et il suit la couleur du site */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5L8 8l6.5-6.5' fill='none' stroke='%23fd4c1c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 15px 9px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 select.wpcf7-select:hover {
    border-color: rgba(253, 76, 28, 0.45);
}

.wpcf7 select.wpcf7-select:focus {
    outline: none;
    border-color: #fd4c1c;
    box-shadow: 0 0 0 3px rgba(253, 76, 28, 0.15);
}

/* Les champs texte recoivent le meme retour visuel, pour l'homogeneite. */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
    outline: none;
    border-color: #fd4c1c;
    box-shadow: 0 0 0 3px rgba(253, 76, 28, 0.15);
}

/* --- case a cocher --- */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.wpcf7 .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    line-height: 1.55;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: #fd4c1c;
    cursor: pointer;
}

/* --- bouton d'envoi --- */
/* Le degrade bleu vient d'une regle plus specifique du theme, et une image
   de fond se peint PAR-DESSUS la couleur : « background-image: none » seul
   ne suffisait pas. On monte la specificite et on emploie la propriete
   raccourcie, qui remet l'image a zero. Meme ainsi le degrade tenait bon :
   « !important » est ici a sa place, il ne s'agit pas de contourner sa propre
   cascade mais d'ecraser une regle imposee par le theme. */
body .wpcf7 form input[type="submit"],
body .wpcf7 form .wpcf7-submit {
    background: #d63b0d !important;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body .wpcf7 form input[type="submit"]:hover,
body .wpcf7 form .wpcf7-submit:hover {
    background: #e03d10 !important;
    transform: translateY(-2px);
}

/* --- etiquettes --- */
.wpcf7 form > label,
.wpcf7 form label {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: #181a1f;
}

/* ---------------------------------------------------------------
   SOMMAIRE (Easy Table of Contents)

   Les couleurs viennent des reglages de l'extension, qui ecrit sa
   propre feuille en ligne avec la specificite « div#ez-toc-container ».
   Les avoir corrigees a la source evite une surenchere de selecteurs.
   Ne restent ici que les finitions qu'elle n'expose pas : arrondi,
   ombre, filet d'accent, respiration et retrait de la hierarchie.
   --------------------------------------------------------------- */

/* L'extension insere le sommaire AVANT le contenu Elementor, donc hors de
   la colonne de texte : en pleine largeur il partait du bord gauche de la
   page. La colonne Elementor fait 1140 px avec 60 px de marge interieure,
   soit un texte de 1020 px ; on cale le sommaire sur cette mesure. */
div#ez-toc-container {
    max-width: 1020px;
    margin: 0 auto 34px;
    padding: 26px 30px 24px;
    border-radius: 12px;
    border-left: 4px solid #fd4c1c;
    box-shadow: 0 10px 32px rgba(24, 26, 31, 0.08);
    font-family: "Poppins", sans-serif;
}

div#ez-toc-container .ez-toc-title-container {
    margin-bottom: 14px;
}

div#ez-toc-container .ez-toc-title {
    margin: 0;
    font-family: "Poppins", sans-serif;
    letter-spacing: 0.01em;
}

div#ez-toc-container nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

div#ez-toc-container nav > ul > li {
    margin-bottom: 7px;
}

/* Les sous-niveaux sont marques par un retrait et un filet discret,
   plus lisibles qu'un simple decalage. */
div#ez-toc-container nav ul ul {
    margin: 7px 0 10px;
    padding-left: 18px;
    border-left: 1px solid #dde3ee;
}

div#ez-toc-container nav ul ul li {
    margin-bottom: 5px;
}

div#ez-toc-container ul li a {
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s ease;
}

div#ez-toc-container ul li a:hover,
div#ez-toc-container ul li a:focus {
    color: #fd4c1c;
}

/* bouton replier / deplier */
div#ez-toc-container .ez-toc-title-toggle a {
    color: #9aa1ad;
    transition: color 0.2s ease;
}

div#ez-toc-container .ez-toc-title-toggle a:hover {
    color: #fd4c1c;
}

@media (max-width: 1180px) {
    div#ez-toc-container {
        max-width: calc(100% - 88px);
    }
}

@media (max-width: 767px) {
    div#ez-toc-container {
        max-width: calc(100% - 40px);
        padding: 20px 22px 18px;
    }
}

/* ---------------------------------------------------------------
   BLOCS LATERAUX (categories, archives)

   Ils etaient restes au style d'origine du theme : titre en gris
   #999, boite cernee d'un filet gris avec une ombre dure sans flou,
   et surtout des liens en rgb(0,0,238) — le bleu par defaut du
   navigateur, signe qu'aucune regle ne les visait.

   Structure : .widget (fond gris) > .widget_wrap (boite) >
   h3.widget-title + span.widget_border + ul

   Le theme cible la boite par « #sidebar .widget_wrap » — un selecteur
   d'identifiant, qu'une simple classe ne peut pas emporter. On egale sa
   specificite ; notre feuille se chargeant apres, elle l'emporte.
   --------------------------------------------------------------- */

.widget,
#sidebar .widget {
    background: transparent;
}

.widget_wrap,
#sidebar .widget_wrap {
    margin-bottom: 28px;
    padding: 26px 28px 22px;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(24, 26, 31, 0.08);
}

.widget_wrap .widget-title,
.widget_wrap .widgettitle,
#sidebar .widget_wrap .widget-title,
#sidebar .widget_wrap .widgettitle {
    margin: 0 0 12px;
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: #181a1f;
    text-transform: none;
}

/* Le theme prevoit un element decoratif sous le titre mais le laisse
   vide : on s'en sert pour le trait orange qui rythme tout le site. */
/* Le repli du gabarit fournit un <span class="widget_border"> sous le titre,
   mais la zone de widgets ne l'emet pas : on dessine le trait en ::after du
   titre, ce qui couvre les deux cas sans dependre du balisage. */
.widget_wrap .widget_border,
#sidebar .widget_wrap .widget_border {
    display: none;
}

.widget_wrap .widget-title::after,
.widget_wrap .widgettitle::after,
#sidebar .widget_wrap .widget-title::after,
#sidebar .widget_wrap .widgettitle::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 10px;
    background: #fd4c1c;
    border-radius: 2px;
}

/* coin decoratif emis par la zone de widgets, sans usage ici */
.widget_wrap .widget_corner,
#sidebar .widget_wrap .widget_corner {
    display: none;
}

.widget_wrap ul,
#sidebar .widget_wrap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget_wrap ul li,
#sidebar .widget_wrap ul li {
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid #eef1f6;
    list-style: none;
}

.widget_wrap ul li:last-child,
#sidebar .widget_wrap ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.widget_wrap ul li a,
#sidebar .widget_wrap ul li a {
    display: inline-block;
    color: #5b5959;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.widget_wrap ul li a:hover,
#sidebar .widget_wrap ul li a:hover,
.widget_wrap ul li a:focus,
#sidebar .widget_wrap ul li a:focus {
    color: #fd4c1c;
    transform: translateX(3px);
}

/* compteurs d'articles eventuels, entre parentheses */
.widget_wrap ul li .count,
#sidebar .widget_wrap ul li .count,
.widget_wrap ul li .post-count,
#sidebar .widget_wrap ul li .post-count {
    color: #9aa1ad;
    font-size: 13px;
}

/* champ de recherche, s'il figure dans la colonne */
.widget_wrap input[type="search"],
#sidebar .widget_wrap input[type="search"],
.widget_wrap input[type="text"],
#sidebar .widget_wrap input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
}

.widget_wrap input[type="search"]:focus,
#sidebar .widget_wrap input[type="search"]:focus,
.widget_wrap input[type="text"]:focus,
#sidebar .widget_wrap input[type="text"]:focus {
    outline: none;
    border-color: #fd4c1c;
    box-shadow: 0 0 0 3px rgba(253, 76, 28, 0.15);
}

/* ---------------------------------------------------------------
   LISTE DES ARTICLES DU BLOG

   Chaque article sortait sans fond, sans cadre et sans ombre, avec
   une vignette etiree (object-fit: fill) et surtout des titres en
   rgb(0,0,238) : le bleu par defaut du navigateur. Un relevé du
   CSSOM (10 288 regles) n'a trouve aucune regle de couleur visant
   « h2.postitle a » dans la disposition .lay4 — seule « .lay1 »
   en avait une. La teinte orange que l'on croyait voir etait l'etat
   :visited ; un visiteur decouvrant le site voyait du bleu.

   On aligne la liste sur le langage de cartes du reste du site.
   --------------------------------------------------------------- */

.lay4_inner > .post {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin: 0 0 28px;
    padding: 22px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(24, 26, 31, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lay4_inner > .post:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(24, 26, 31, 0.15);
}

/* --- vignette --- */
.lay4_inner > .post .post_image {
    flex: 0 0 240px;
    float: none;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
}

.lay4_inner > .post .post_image .imgwrap,
.lay4_inner > .post .post_image a {
    display: block;
    height: 100%;
}

/* « fill » deformait les images ; « cover » les recadre sans les etirer. */
.lay4_inner > .post .post_image img {
    display: block;
    width: 100%;
    height: 168px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.4s ease;
}

.lay4_inner > .post:hover .post_image img {
    transform: scale(1.04);
}

/* --- texte --- */
.lay4_inner > .post .post_content {
    flex: 1 1 auto;
    min-width: 0;
}

.lay4_inner > .post h2.postitle {
    margin: 0 0 9px;
    font-family: "Poppins", sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
}

/* :visited est declare explicitement, sinon un article deja lu
   repasse a la couleur du navigateur. */
.lay4_inner > .post h2.postitle a,
.lay4_inner > .post h2.postitle a:visited {
    color: #181a1f;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lay4_inner > .post h2.postitle a:hover,
.lay4_inner > .post h2.postitle a:focus {
    color: #fd4c1c;
}

/* --- ligne d'informations --- */
.lay4_inner > .post .single_metainfo {
    margin: 0 0 12px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #9aa1ad;
}

.lay4_inner > .post .single_metainfo a,
.lay4_inner > .post .single_metainfo a:visited {
    color: #9aa1ad;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lay4_inner > .post .single_metainfo a:hover {
    color: #fd4c1c;
}

/* Les mentions se touchaient : « 10 septembre 2023vianneyOff… ».
   Les icones servent de separateurs. */
.lay4_inner > .post .single_metainfo i {
    margin: 0 6px 0 16px;
    color: #fd4c1c;
}

.lay4_inner > .post .single_metainfo i:first-child {
    margin-left: 0;
}

/* --- extrait --- */
.lay4_inner > .post .post_content p {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #5b5959;
}

@media (max-width: 767px) {
    .lay4_inner > .post {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    .lay4_inner > .post .post_image {
        flex: 0 0 auto;
        width: 100%;
    }
    .lay4_inner > .post .post_image img {
        height: 200px;
    }
    /* Le theme impose « h2 { font-size: 28px !important } » sous 767 px :
       un selecteur nu, mais avec !important, qu'aucune specificite ne peut
       emporter. On l'egale sur ce seul point. */
    .lay4_inner > .post h2.postitle {
        font-size: 19px !important;
    }
}

/* ---------------------------------------------------------------
   CARTES image-box — format uniforme des visuels

   Les trois cartes de « Mes domaines d'expertise » affichaient des
   visuels de 119, 318 et 126 px de haut : leurs sources n'avaient
   pas le meme rapport de forme, et Elementor les etirait
   (object-fit: fill). Une source en portrait a ete remplacee par sa
   version 16:9 ; le CSS aligne les autres et recadre au lieu de
   deformer.
   --------------------------------------------------------------- */

.elementor-widget-image-box .elementor-image-box-img {
    width: 100% !important;
    margin: 0 0 18px !important;
}

.elementor-widget-image-box .elementor-image-box-img img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

/* Une carte sans visuel affiche le gabarit vide d'Elementor : on l'ecarte
   pour qu'elle ne laisse ni cadre ni espace. */
.elementor-widget-image-box .elementor-image-box-img img[src*="placeholder"] {
    display: none;
}

.elementor-widget-image-box .elementor-image-box-wrapper {
    text-align: left;
}

.elementor-widget-image-box .elementor-image-box-title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .elementor-widget-image-box .elementor-image-box-img img { height: 170px; }
}

@media (max-width: 767px) {
    .elementor-widget-image-box .elementor-image-box-img img { height: 200px; }
}

/* ---------------------------------------------------------------
   PAGE « À PROPOS » — photos arrondies

   Elementor impose « .elementor img { border-radius: 0 } » dans sa
   propre feuille, ce qui ecrase le rayon regle sur le widget. On
   monte la specificite : « .elementor-page-19 .elementor-widget-image
   img » vaut (0,2,1) contre (0,1,1).

   Volontairement limite a cette page : arrondir toutes les images du
   site toucherait aussi des schemas et des captures ou l'angle vif se
   justifie.
   --------------------------------------------------------------- */

.elementor-page-19 .elementor-widget-image img {
    border-radius: 12px;
}

/* L'en-tete et le pied sont DANS la page : sans cette exception, la regle
   ci-dessus arrondissait aussi le logo. Specificite (0,3,1) contre (0,2,1). */
.elementor-page-19 .elementor-13 .elementor-widget-image img,
.elementor-page-19 .elementor-72 .elementor-widget-image img {
    border-radius: 0;
}


/* ---------------------------------------------------------------
   ARRONDI UNIFORME DES VISUELS DE CARTES

   Elementor declare « .elementor img { border-radius: 0 } » dans sa
   feuille : le rayon regle sur un widget ne s'applique jamais. Les
   visuels des cartes de l'accueil et des pages de service sortaient
   donc a angles vifs DANS des cartes arrondies a 12 px.

   Specificite (0,3,1) contre (0,1,1). On vise uniquement les visuels
   de cartes : les schemas et captures en plein texte gardent leurs
   angles vifs, ou l'arrondi rognerait de l'information.
   --------------------------------------------------------------- */

.elementor .vseo-carte .elementor-widget-image img,
.elementor .elementor-widget-image-box .elementor-image-box-img img {
    border-radius: 12px;
}

/* ---------------------------------------------------------------
   TITRE DE LA PAGE DU BLOG

   Injecte par le thème enfant : le gabarit du thème n'émet aucun
   titre sur la page des articles, qui sortait sans H1.
   --------------------------------------------------------------- */

.vseo-titre-blog {
    margin: 0 0 30px;
}

.vseo-titre-blog h1 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: #181a1f;
}

.vseo-titre-blog__trait {
    display: block;
    width: 60px;
    height: 3px;
    margin-top: 14px;
    background: #fd4c1c;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .vseo-titre-blog h1 { font-size: 26px !important; }
}

/* ---------------------------------------------------------------
   NAVIGATION ENTRE ARTICLES (précédent / suivant)

   Le bloc sortait en rgb(0,0,238) — le bleu par défaut du
   navigateur — comme les titres du blog avant correction : aucune
   règle ne le visait.

   Balisage du thème :
     .navigation > span.div_middle + div.nav-box.ast-prev + .ast-next
     et dans chaque boîte : <a><i/><img/>Article précédent<br><span>Titre</span></a>

   Le libellé « Article précédent » est un nœud de texte nu, non
   enveloppé : impossible à viser directement. On le traite via le
   <a> lui-même, et le <span> du titre reprend la main.

   Le thème vise ce bloc par « #ast_nextprev » — un sélecteur
   d'identifiant, de spécificité (1,1,1). Aucune quantité de classes
   ne l'emporte : on préfixe donc chaque règle du même identifiant,
   notre feuille se chargeant après.
   --------------------------------------------------------------- */

.navigation,
#ast_nextprev {
    display: flex;
    gap: 20px;
    margin: 44px 0 36px;
}

.navigation .div_middle,
#ast_nextprev .div_middle {
    display: none;
}

.navigation .nav-box,
#ast_nextprev .nav-box {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 16px 18px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(24, 26, 31, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.navigation .nav-box:hover,
#ast_nextprev .nav-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(24, 26, 31, 0.15);
}

/* le libellé « Article précédent » hérite de ces règles */
.navigation .nav-box a,
#ast_nextprev .nav-box a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #9aa1ad;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

/* Le libelle « Article precedent » a ete vide a la source : il ne reste que
   le <br> qui le suivait, qui creerait une ligne vide au-dessus du titre. */
.navigation .nav-box a br,
#ast_nextprev .nav-box a br {
    display: none;
}

/* le titre de l'article reprend la main */
.navigation .nav-box a span,
#ast_nextprev .nav-box a span {
    display: block;
    margin-top: 0;
    color: #181a1f;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    transition: color 0.2s ease;
}

.navigation .nav-box a:hover span,
#ast_nextprev .nav-box a:hover span,
.navigation .nav-box a:focus span,
#ast_nextprev .nav-box a:focus span {
    color: #fd4c1c;
}

.navigation .nav-box img,
#ast_nextprev .nav-box img {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    margin: 0;
    object-fit: cover;
    border-radius: 10px;
}

/* Le theme colore le chevron par une regle plus specifique et fixe la taille
   du libelle : on egale sa specificite plutot que d'ajouter un !important. */
.navigation .nav-box a i,
#ast_nextprev .nav-box a i,
.navigation .nav-box a i.fa,
#ast_nextprev .nav-box a i.fa {
    flex: 0 0 auto;
    color: #fd4c1c;
    font-size: 17px;
}

.navigation .nav-box a,
#ast_nextprev .nav-box a {
    font-size: 12px;
}

.navigation .nav-box a span,
#ast_nextprev .nav-box a span {
    font-size: 15px;
    font-weight: 600;
}

/* la boîte de droite se lit de droite à gauche */
.navigation .ast-next a,
#ast_nextprev .ast-next a {
    flex-direction: row-reverse;
    text-align: right;
}

@media (max-width: 767px) {
    .navigation {
        flex-direction: column;
        gap: 14px;
    }
    .navigation .ast-next a {
        flex-direction: row;
        text-align: left;
    }
}

/* ===============================================================
   LIENS RESTÉS AU STYLE PAR DÉFAUT DU NAVIGATEUR

   Un relevé du CSSOM sur 10 688 règles n'en a trouvé AUCUNE qui
   colore ces liens : ils sortaient en rgb(0,0,238), le bleu natif.
   Dans le pied de page sombre, cela donnait un contraste de 1,85:1.

   Le thème et Elementor ne stylent que les liens qu'ils génèrent
   eux-mêmes (menus, boutons) ; tout lien écrit dans un contenu ou
   posé par un widget non couvert reste au défaut.
   =============================================================== */

/* --- pied de page : fond #181a1f --- */
.elementor-72 a,
.elementor-72 a:visited,
footer#colophon a,
footer#colophon a:visited {
    color: #d7d9de;
    text-decoration: none;
    transition: color 0.2s ease;
}

.elementor-72 a:hover,
.elementor-72 a:focus,
footer#colophon a:hover,
footer#colophon a:focus {
    color: #fd4c1c;
}

/* --- liens dans le corps des textes ---
   L'orange de marque #fd4c1c ne donne que 3,37:1 sur blanc, sous le seuil
   AA de 4,5. #d1380e atteint 4,90 en restant de la meme famille. L'orange
   d'origine reste employe partout ou il n'est pas du texte (traits, icones,
   bordures), ou le seuil n'est que de 3:1. */
.elementor-widget-text-editor a,
.elementor-widget-text-editor a:visited,
.post_content p a,
.post_content li a,
.entry-content a,
.entry-content a:visited {
    color: #d1380e;
    text-decoration: none;
    border-bottom: 1px solid rgba(209, 56, 14, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus,
.post_content p a:hover,
.post_content li a:hover,
.entry-content a:hover,
.entry-content a:focus {
    color: #a52b0b;
    border-bottom-color: #a52b0b;
}

/* les liens qui portent une image ou un bouton n'ont pas de soulignement */
.elementor-widget-text-editor a:has(img),
.post_content a:has(img) {
    border-bottom: none;
}

/* --- ligne d'informations d'un article (auteur, categorie, date) ---
   #9aa1ad ne donnait que 2,60:1 sur blanc. #6e7581 atteint 4,64. */
.single_metainfo a,
.single_metainfo a:visited,
.metainfo a,
.metainfo a:visited {
    color: #6e7581;
    text-decoration: none;
    border-bottom: none;
    transition: color 0.2s ease;
}

.single_metainfo a:hover,
.metainfo a:hover {
    color: #fd4c1c;
}

/* --- widget « articles récents » de la colonne et du contenu --- */
/* Ce sont des TITRES d'articles, pas des liens de texte : ils doivent rester
   sombres. La regle des liens de contenu (0,1,1) l'emportait sur « .arpw-title »
   (0,1,0) et les colorait en orange ; on egale la specificite. */
.arpw-block .arpw-title,
.arpw-block .arpw-title:visited,
.elementor-widget-text-editor .arpw-title,
.elementor-widget-text-editor .arpw-title:visited,
.arpw-title,
.arpw-title:visited,
.arpw-block a,
.arpw-block a:visited {
    color: #181a1f;
    text-decoration: none;
    border-bottom: none;
    font-family: "Poppins", sans-serif;
    transition: color 0.2s ease;
}

.arpw-block .arpw-title:hover,
.elementor-widget-text-editor .arpw-title:hover,
.arpw-title:hover,
.arpw-block a:hover {
    color: #d1380e;
}

/* --- filet de sécurité : tout lien du contenu resté au défaut --- */
#content a:not([class]):not(:hover),
.site-main a:not([class]):not(:hover) {
    color: #d1380e;
}

/* ---------------------------------------------------------------
   TABLEAUX

   Le site n'en comportait aucun style : les fiches d'etablissements
   converties en tableau sortaient au rendu brut du navigateur.
   Un tableau doit pouvoir defiler seul sur petit ecran, sans jamais
   pousser la page en largeur.
   --------------------------------------------------------------- */

.vseo-tableau-fiches,
.wp-block-table,
.elementor-widget-text-editor figure.wp-block-table {
    display: block;
    max-width: 100%;
    margin: 26px 0 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.elementor-widget-text-editor table,
.vseo-tableau-fiches table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(24, 26, 31, 0.08);
}

.elementor-widget-text-editor table thead th,
.vseo-tableau-fiches thead th {
    padding: 14px 16px;
    background: #181a1f;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
}

.elementor-widget-text-editor table tbody th,
.vseo-tableau-fiches tbody th {
    padding: 13px 16px;
    color: #181a1f;
    font-weight: 600;
    text-align: left;
    vertical-align: top;
}

.elementor-widget-text-editor table td,
.vseo-tableau-fiches td {
    padding: 13px 16px;
    color: #5b5959;
    vertical-align: top;
    line-height: 1.5;
}

.elementor-widget-text-editor table tbody tr,
.vseo-tableau-fiches tbody tr {
    border-top: 1px solid #eef1f6;
    transition: background-color 0.2s ease;
}

.elementor-widget-text-editor table tbody tr:hover,
.vseo-tableau-fiches tbody tr:hover {
    background: #f8fafd;
}

.vseo-tableau-fiches td a {
    color: #d1380e;
    border-bottom: none;
    word-break: break-word;
}

.vseo-tableau-fiches td a:hover {
    color: #a52b0b;
}

@media (max-width: 767px) {
    .elementor-widget-text-editor table,
    .vseo-tableau-fiches table { font-size: 14px; }
    .elementor-widget-text-editor table thead th,
    .vseo-tableau-fiches thead th,
    .elementor-widget-text-editor table td,
    .vseo-tableau-fiches td { padding: 11px 12px; }
}

/* ---------------------------------------------------------------
   MAILLAGE INTERNE — grille de liens

   Ces blocs alignaient jusqu'a plusieurs dizaines de liens, chacun
   dans son propre <p> : une colonne interminable qui etirait la page
   (26 000 px sur /consultant-seo/). Regroupes en liste, ils
   s'affichent ici sur plusieurs colonnes.
   --------------------------------------------------------------- */

ul.vseo-maillage {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 24px;
    margin: 18px 0 26px;
    padding: 22px 24px;
    list-style: none;
    background: #f3f7fc;
    border-radius: 12px;
}

ul.vseo-maillage li {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

ul.vseo-maillage li a {
    display: block;
    padding: 5px 0;
    color: #5b5959;
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    line-height: 1.4;
    text-decoration: none;
    border-bottom: none;
    overflow-wrap: break-word;
    transition: color 0.2s ease, transform 0.2s ease;
}

ul.vseo-maillage li a:hover,
ul.vseo-maillage li a:focus {
    color: #d1380e;
    transform: translateX(3px);
}

@media (max-width: 1024px) {
    ul.vseo-maillage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    ul.vseo-maillage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 16px;
        padding: 18px 18px;
    }
    ul.vseo-maillage li a { font-size: 14px; }
}

@media (max-width: 420px) {
    ul.vseo-maillage { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Questions des accordeons (FAQ)

   Elementor lie le titre d'un accordeon a sa typographie globale « Primary »,
   reglee a 38 px dans le kit du site. La question s'affichait donc plus grosse
   que les H2 de la page (30 px) et que ses H3 (20 a 26 px) : la hierarchie
   visuelle etait inversee.

   « Primary » sert aussi aux widgets « heading » et au menu ; on ne touche donc
   pas au reglage global, seulement aux accordeons. Le selecteur porte trois
   classes pour passer devant celui d'Elementor, qui en compte deux.
   -------------------------------------------------------------------------- */

.elementor .elementor-widget-toggle .elementor-toggle-title,
.elementor .elementor-widget-accordion .elementor-accordion-title {
    font-size: 20px;
    line-height: 30px;
}

@media (max-width: 767px) {
    .elementor .elementor-widget-toggle .elementor-toggle-title,
    .elementor .elementor-widget-accordion .elementor-accordion-title {
        font-size: 18px;
        line-height: 27px;
    }
}

/* ==========================================================================
   MISE EN SYSTEME — typographie, formes, aplats
   ==========================================================================

   Constat : 18 tailles de police rendues sur l'accueil, 7 rayons, 5 degrades.
   Les valeurs a decimales (25,5 px / 19,89 px / 41 px) trahissent des tailles
   exprimees en « em » dans le theme : 1,5 x 17, 1,17 x 17, 2,4 x 17. Une taille
   relative ne tombe jamais sur une echelle — d'ou l'impression de bricolage.

   On fixe donc les paliers en pixels. La specificite reste basse (0,1,1) : les
   reglages poses widget par widget dans Elementor (0,3,0) continuent de primer.
   -------------------------------------------------------------------------- */

.elementor h1 { font-size: 54px; line-height: 1.15; }
.elementor h2 { font-size: 32px; line-height: 1.25; }
.elementor h3 { font-size: 26px; line-height: 1.3; }
.elementor h4 { font-size: 20px; line-height: 1.35; }

/* Le theme impose « h2 { font-size: 22px !important } » sous 1024 px : il faut
   le meme poids pour retablir l'echelle aux paliers intermediaires. */
@media (min-width: 768px) and (max-width: 1023px) {
    .elementor h1 { font-size: 40px !important; }
    .elementor h2 { font-size: 28px !important; }
    .elementor h3 { font-size: 23px !important; }
}
@media (max-width: 767px) {
    .elementor h1 { font-size: 32px !important; }
    .elementor h2 { font-size: 26px !important; }
    .elementor h3 { font-size: 21px !important; }
}

/* Compteurs de la page d'accueil : 41 px derive d'un « em », ramene au palier. */
.elementor .elementor-counter-number-wrapper { font-size: 44px; }

/* --------------------------------------------------------------------------
   Aplats plutot que degrades

   Le theme parent impose quatre degrades de boutons en « !important », dont
   deux dans le BLEU de l'ancienne identite (#003de4 -> #02a4ed) que la refonte
   avait pourtant abandonne. Un degrade sur un bouton date le site, et celui-ci
   ne passait pas le seuil de contraste.
   -------------------------------------------------------------------------- */

.seomrkt-btn .elementor-button,
.seomrkt-btnblue .elementor-button {
    background-image: none !important;
    background-color: #d63b0d !important;
}
.seomrkt-btn .elementor-button:hover,
.seomrkt-btnblue .elementor-button:hover {
    background-image: none !important;
    background-color: #b03009 !important;
}

/* --------------------------------------------------------------------------
   Deux rayons, pas neuf : 12 px pour les surfaces, 4 px pour les commandes.
   -------------------------------------------------------------------------- */

.elementor .wpcf7 input[type="text"],
.elementor .wpcf7 input[type="email"],
.elementor .wpcf7 input[type="tel"],
.elementor .wpcf7 input[type="url"],
.elementor .wpcf7 textarea,
.elementor .wpcf7 select { border-radius: 4px; }

.elementor img { border-radius: 12px; }
.elementor .elementor-widget-image-box img,
.elementor .vseo-carte img { border-radius: 12px; }

/* les images d'en-tete, de pied et de logo n'ont pas a etre arrondies */
.ehf-header .elementor img,
.ehf-footer .elementor img,
.elementor .elementor-widget-theme-site-logo img,
.elementor .hfe-site-logo img { border-radius: 0; }

/* Derniers ecarts au systeme, releves element par element dans le navigateur. */

/* Le chiffre du compteur est un <span> ; la regle posee sur son conteneur ne
   l'atteignait pas. 41 px derivait la encore d'un « em ». */
.elementor .elementor-counter-number,
.elementor .elementor-counter-number-prefix,
.elementor .elementor-counter-number-suffix { font-size: 44px; }

/* Le bouton d'envoi du formulaire restait en pilule (50 px) quand tous les
   autres boutons sont a 4 px. */
.elementor .wpcf7 input[type="submit"],
.elementor .wpcf7 .wpcf7-submit { border-radius: 4px; }

/* Les visuels des sections en alternance declarent 8 px dans Elementor, dont la
   regle de page (trois classes) prime sur la nôtre. On monte au meme niveau. */
.elementor .elementor-widget-image img,
.elementor .elementor-widget-image .elementor-image img { border-radius: 12px; }

/* ==========================================================================
   RETRAIT DES ORNEMENTS DE GABARIT
   ==========================================================================

   Le theme parent pose deux formes decoratives en PNG sur la page d'accueil :
   un polygone orange en haut a droite et une forme detouree contenant un emoji
   fusee. Ce sont les codes des gabarits de 2018 ; ils n'apportent aucune
   information et encombrent le premier ecran.

   On les masque plutot que de modifier le theme parent, qu'une mise a jour
   ecraserait.
   -------------------------------------------------------------------------- */

.home-section1::after,
.home-section3::after { content: none !important; }

/* Le mot « Nos expertises » en filigrane geant — 223 px, opacite 3 % — derriere
   le titre. Un decor qui double le titre qu'il accompagne : du bruit. */
.elementor .elementor-element-2ad41791 { display: none; }

/* ==========================================================================
   MOBILE — LES TABLEAUX EN CARTES
   ==========================================================================

   Sur un ecran de 375 px, les tableaux mesuraient 560 px de large. Celui des
   fiches d'etablissements defilait seul dans son cadre, sans pousser la page :
   seule la premiere colonne, « Etablissement », etait visible. La categorie et
   l'adresse — ce qui fait la valeur de la fiche — demandaient un geste
   horizontal que presque personne ne fait. Les tableaux marketing herites,
   eux, n'ont pas de cadre a defilement : leurs 560 px debordaient la page.

   Sous 768 px, chaque ligne devient une carte. Le tableau disparait en tant
   que grille, mais pas en tant que donnee : l'en-tete reste dans le document
   pour les lecteurs d'ecran et pour l'indexation, et chaque valeur retrouve
   son intitule devant elle.

   Deux formes de tableaux coexistent sur le site :

     .vseo-tableau-fiches   trois colonnes, un <thead>, le nom en <th scope>
     tableau herite         deux colonnes, pas de <thead>, premiere ligne en <th>

   Elles ne se traitent pas de la meme facon, d'ou les deux blocs ci-dessous.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* --- le cadre : plus rien ne depasse, donc plus de defilement --- */
    .vseo-tableau-fiches,
    .wp-block-table,
    .elementor-widget-text-editor figure.wp-block-table {
        overflow-x: visible;
        margin: 20px 0 24px;
    }

    .elementor-widget-text-editor table,
    .vseo-tableau-fiches table {
        display: block;
        width: 100%;
        min-width: 0;          /* la contrainte de 560 px tombe ici */
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        font-size: 15px;
    }

    .elementor-widget-text-editor table tbody,
    .vseo-tableau-fiches tbody { display: block; }

    /* une ligne, une carte */
    .elementor-widget-text-editor table tbody tr,
    .vseo-tableau-fiches tbody tr {
        display: block;
        margin: 0 0 12px;
        padding: 14px 16px;
        background: #ffffff;
        border: 1px solid #e9edf4;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(24, 26, 31, 0.06);
    }

    .elementor-widget-text-editor table tbody tr:last-child,
    .vseo-tableau-fiches tbody tr:last-child { margin-bottom: 0; }

    /* le survol n'a pas de sens au doigt */
    .elementor-widget-text-editor table tbody tr:hover,
    .vseo-tableau-fiches tbody tr:hover { background: #ffffff; }

    .elementor-widget-text-editor table td,
    .vseo-tableau-fiches td {
        display: block;
        padding: 4px 0 0;
        line-height: 1.5;
    }

    /* ----------------------------------------------------------------------
       1. LES FICHES D'ETABLISSEMENTS

       L'en-tete sort de l'ecran sans sortir du document : masque pour l'oeil,
       lu par les lecteurs d'ecran, present pour l'indexation.
       ---------------------------------------------------------------------- */

    .vseo-tableau-fiches thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* le nom de l'etablissement devient le titre de la carte */
    .vseo-tableau-fiches tbody th {
        display: block;
        margin: 0 0 9px;
        padding: 0 0 9px;
        border-bottom: 1px solid #f1f4fa;
        color: #181a1f;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
    }

    /* l'intitule de colonne revient devant chaque valeur, puisque l'en-tete
       n'est plus la pour le porter */
    .vseo-tableau-fiches td::before {
        display: block;
        margin-bottom: 2px;
        color: #9aa1ad;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .vseo-tableau-fiches td:nth-of-type(1)::before { content: "Activité"; }
    .vseo-tableau-fiches td:nth-of-type(2)::before { content: "Adresse"; }

    .vseo-tableau-fiches td:nth-of-type(1) { color: #5b5959; font-size: 14.5px; }

    /* l'adresse arrive en capitales de la source SIRENE : on l'allege sans la
       transformer, pour qu'elle reste copiable telle qu'elle est enregistree */
    .vseo-tableau-fiches td:nth-of-type(2) {
        color: #6b6969;
        font-size: 13.5px;
        line-height: 1.45;
    }

    /* ----------------------------------------------------------------------
       2. LES TABLEAUX HERITES, A DEUX COLONNES

       Pas de <thead> : leur premiere ligne porte deux <th>. Elle nomme les
       colonnes — « Services | Description » — et n'a plus d'objet une fois la
       grille defaite, puisque chaque carte porte son propre titre.
       ---------------------------------------------------------------------- */

    .elementor-widget-text-editor table:not(.vseo-tableau-fiches) tr:first-child { display: none; }

    .elementor-widget-text-editor table:not(.vseo-tableau-fiches) tbody td:first-child {
        margin: 0 0 9px;
        padding: 0 0 9px;
        border-bottom: 1px solid #f1f4fa;
        color: #181a1f;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
    }

    .elementor-widget-text-editor table:not(.vseo-tableau-fiches) tbody td:last-child {
        color: #5b5959;
        font-size: 14.5px;
    }
}

/* ==========================================================================
   MOBILE — CIBLES TACTILES ET LISIBILITE
   ==========================================================================

   Vingt-deux liens mesuraient moins de 40 px de haut sur la page type, dont
   tous ceux du maillage (30 px). Le doigt n'a pas la precision du curseur :
   en dessous de 44 px, on vise et on manque. Douze textes passaient sous
   14 px, taille a laquelle l'oeil force sur un telephone.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* les liens du maillage : la hauteur vient du remplissage, pas d'une
       hauteur fixe, pour que les noms longs restent lisibles sur deux lignes */
    ul.vseo-maillage li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 7px 0;
        font-size: 15px;
        line-height: 1.35;
    }

    /* le sommaire : l'extension pose 12,8 px en ligne, trop petit au doigt
       comme a l'oeil. On passe par la specificite du conteneur plutot que par
       !important. */
    div#ez-toc-container ul li a {
        display: inline-block;
        min-height: 40px;
        padding: 9px 0;
        font-size: 15px;
        line-height: 1.4;
    }

    /* le numero de telephone de la barre haute : c'est le premier appel a
       l'action du site sur mobile, il ne peut pas etre le plus petit texte
       de la page */
    .elementor-widget-text-editor a[href^="tel:"],
    header a[href^="tel:"] {
        display: inline-block;
        min-height: 44px;
        padding: 11px 0;
        font-size: 15px;
    }

    /* le bouton de bascule du sommaire : une cible de 34 px au doigt */
    div#ez-toc-container .ez-toc-title-toggle a,
    div#ez-toc-container .ez-toc-title-toggle label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}