/* Theme Name: Floofy Child Theme Theme URI: https://floofy.like-themes.com/ Author: Like Themes Author URI: https://like-themes.com/ Description: Blank Child Theme for Floofy Template: floofy Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: four-columns, right-sidebar, full-width-template Text Domain: floofy This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* Widget lte-locations (zones d'intervention) : la flèche ronde est en position absolue à droite, sans espace réservé. Sur les listes longues (Zone 1), les communes passaient sous la flèche. On réserve sa largeur à droite. Uniquement en desktop : sous 768px la flèche est masquée et le texte est centré. */ @media (min-width: 768px) { .lte-locations-sc .lte-item { padding-right: 70px; } } /* Alignement des communes : le thème indente le span (padding:0 16px) et compense par une marge négative (-16px) sur le bloc. Ça n'aligne que la 1re ligne ; les lignes suivantes ressortent 16px à gauche. On remet tout à plat pour un bord gauche constant sous le titre. */ .lte-locations-sc .lte-item .lte-subheader { margin-left: 0; } .lte-locations-sc .lte-item .lte-subheader span { padding-left: 0; padding-right: 0; } /* Gras dans les paragraphes. Bleu Canard assombri, calculé par le thème à partir de la couleur principale — aucune valeur en dur, la couleur suit si le client fait évoluer sa palette dans Redux. Pourquoi pas le Terre Cuite, demandé au départ : 2,4:1 sur blanc, très en dessous du seuil AA de 4,5. Le gras marque ce qui compte dans un paragraphe ; le rendre moins lisible que le texte normal inverse son rôle. Et il aurait dilué l'accent, réservé au seul bouton de CTA. Pourquoi pas le #468f8b de la charte : 3,8:1, encore sous le seuil. Le palier abaissé à 3:1 ne vaut que pour du gras à partir de 18,7px, or le corps est à 17. La variante foncée donne 5,7:1 pour une différence visuelle à peine perceptible. */ .elementor-widget-text-editor strong, .elementor-widget-text-editor b { font-weight: 700; /* 500 est une graisse medium : contre du 400 en texte courant, l'écart ne se voit pas à 17px */ color: var(--main-darker, #28716d); } /* Footer — remplissage de la vague. La classe .lte-background-black du conteneur de pied de page fait DEUX métiers : elle remplit le séparateur de forme en noir, et elle habille tout ce qui s'affiche sur fond sombre — 355 règles du thème en dépendent, dont la couleur blanche des liens de menu. La retirer corrige la vague mais casse tout le reste. On la garde donc, et on neutralise ici le seul effet indésirable. Le blanc correspond à la couleur de la section AU-DESSUS : une vague se remplit toujours de la couleur de ce qui la précède, pour donner l'impression que la section supérieure se courbe en descendant. Si une page se termine sur une bande crème, une couture apparaîtra — il faudra alors terminer toutes les pages sur une section blanche. */ .lte-footer-wrapper .lte-background-black .elementor-shape-fill { fill: #fff; } /* Cartes de services de la home — widget LTE « Icons block ». Dès qu'un lien est posé sur l'élément, le thème transforme .lte-inner en et doit SORTIR le bouton de .lte-btn-wrap : un ne peut pas en contenir un autre. Le bouton devient frère de .lte-inner, donc hors du conteneur qui porte le retrait intérieur de la carte, et se colle au bord bas-gauche. Le changement de balise, lui, est sans effet : les règles du thème ciblent la classe, pas la balise. Seul le déplacement pose problème. Deux effets à réparer : 1. Le thème translate .lte-btn-inner pour ne laisser dépasser que la flèche. Le libellé n'est masqué que parce que le conteneur parent coupait le débordement — hors de lui, « En savoir plus » réapparaît et sort de la carte. On redonne au bouton son propre découpage. 2. Le bouton doit revenir dans le padding horizontal de la carte, réglé dans Elementor. Valeur au 2026-08-13 : 55 30 45 30. **Si ce padding change, reporter les nouvelles valeurs dans les marges ci-dessous**, sinon la flèche se désaligne du texte. Sous 992px le thème masque ce bouton — la carte reste cliquable par .lte-inner, la flèche disparaît. Comportement voulu, ne pas corriger. */ /* Le bouton reste en FIN DE FLUX, donc en bas de sa carte. En grille, les cartes d'une rangée sont à hauteur égale : c'est en bas qu'elles peuvent aligner leurs flèches. Les remonter sous le texte les désalignerait, chacune suivant la fin de son propre paragraphe. Historique — `flex-grow: 0` sur .lte-inner et une marge négative servaient au format 3 colonnes, où les cartes gardaient beaucoup de vide sous le texte. Retirés le 2026-08-13 avec le passage en grille 4 colonnes : ils étaient devenus nuisibles. Ne pas les remettre sans revenir au format précédent. */ .elementor-widget-lte-icons .lte-block-icon .lte-item > .lte-btn { overflow: hidden; /* rend au bouton le découpage que lui donnait son ancien parent : sans lui, le libellé translaté ressort */ margin-left: 30px; /* = padding-left de la carte */ margin-right: 30px; /* = padding-right */ } /* Le thème translate l'inner de -80% : la flèche, placée à l'extrémité droite, atterrit donc à 20% de la largeur du bouton, tandis qu'au survol le libellé démarre à 0. Les deux états ne peuvent pas s'aligner sur le texte en même temps. On pousse la translation jusqu'à ce que la flèche tombe elle aussi au bord gauche : repos et survol partagent alors le même point de départ. CALIBRAGE : augmenter vers -92% si la flèche reste trop à droite au repos, réduire vers -84% si elle se fait couper. */ .elementor-widget-lte-icons .lte-block-icon .lte-item > .lte-btn .lte-btn-inner { transform: translateX(-88%); } /* Indispensable : sans elle, la règle ci-dessus l'emporterait aussi au survol (même spécificité que celle du thème, mais chargée après) et l'animation ne se déclencherait plus. */ .elementor-widget-lte-icons .lte-block-icon .lte-item:hover > .lte-btn .lte-btn-inner { transform: translateX(0); } /* ========================================================================== PAGES SERVICES — kit de 10 classes ========================================================================== Les 7 pages /services/* partagent le même gabarit. Un modèle Elementor étant COPIÉ et non lié, il dérive dès la première retouche : le vrai template, ce sont ces classes. Une correction ici vaut pour les 7 pages. Classes à poser dans Elementor (Avancé > Classes CSS) : .vcv-tags liste de symptômes en étiquettes (widget Liste d'icônes, layout Inline) .vcv-points liste sur 2 colonnes (widget Liste d'icônes, layout par défaut) .vcv-fil déroulé en fil vertical (conteneur parent) .vcv-fil-etape un conteneur par étape .vcv-fil-icone widget Icône, en pastille cerclée .vcv-fil-repere libellé du repère temporel .vcv-note aveu de limite, filet à gauche .vcv-bg-creme fond de bande alternée (à poser sur la section) Les couleurs proviennent des réglages du thème (Redux > Colors), jamais d'un hex en dur : si le client fait évoluer sa palette, les pages suivent. -------------------------------------------------------------------------- */ :root { /* Le « fond crème » de la règle 60-30-10 : la charte le nomme sans le chiffrer. Seule valeur posée hors thème. */ --vcv-creme: #faf7f2; /* Éclaircies calculées depuis la palette du thème. La 1re déclaration est le repli pour les navigateurs sans color-mix(). */ --vcv-main-pale: #e4efee; --vcv-main-pale: color-mix(in srgb, var(--main, #468f8b) 12%, #fff); --vcv-second-pale: #eaf5ee; --vcv-second-pale: color-mix(in srgb, var(--second, #a8d5ba) 24%, #fff); --vcv-ligne: #e2e5e6; --vcv-ligne: color-mix(in srgb, var(--black, #2c3e43) 12%, #fff); } /* --- Étiquettes de symptômes --------------------------------------------- 11 motifs sur la consultation, 8 sur la prise de sang, 7 sur l'échographie. Le flux absorbe n'importe quel nombre sans retoucher la mise en page — ce qu'une grille ne fait pas. Le visiteur ne lit pas cette liste, il y cherche son cas. ATTENTION : ces étiquettes ne sont PAS cliquables. Filet clair et fond blanc, pour ne pas les confondre avec le bouton du CTA. */ .vcv-tags .elementor-icon-list-items, .vcv-tags ul { display: flex; flex-wrap: wrap; gap: 11px; margin: 0; padding: 0; list-style: none; } /* Sélecteur volontairement long : Elementor cible ces items avec trois classes (.elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item). À spécificité égale ou inférieure, c'est sa règle qui l'emporte et rien ne bouge. On ajoute la classe du widget, portée par le même élément que .vcv-tags, pour passer devant sans recourir à !important. */ .vcv-tags.elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item, .vcv-tags li { margin: 0; /* neutralise la marge inline d'Elementor, qui se cumule au gap et casse l'alignement */ padding: 11px 26px; /* Le padding horizontal DOIT dépasser la moitié de la hauteur : sur une pilule, chaque extrémité est un demi-cercle de ce rayon. À 20px, le texte démarrait pile où la courbe finit, et paraissait collé. */ background: #fff; border: 1px solid var(--second, #a8d5ba); border-radius: 999px; line-height: 1.3; font-size: .96rem; } .vcv-tags .elementor-icon-list-item:not(:last-child)::after { content: none; /* supprime le séparateur natif du widget */ } .vcv-tags .elementor-icon-list-text { padding: 0; color: var(--black, #2c3e43); } /* Pas d'icône sur les étiquettes. Onze pictogrammes cohérents pour des symptômes, ça n'existe pas — et un mélange coche/croix se lit comme un tableau « pris en charge / pas pris en charge », soit l'inverse du message. Masqué en CSS plutôt que vidé item par item : la règle couvre les 4 pages concernées, et un oubli de saisie reste sans conséquence. */ .vcv-tags.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-icon { display: none; } /* --- Liste sur 2 colonnes ------------------------------------------------- Les 7 points de l'examen clinique, les 6 organes explorés en échographie. Sept items empilés sur une colonne font une liste interminable ; sur deux, ils se lisent d'un bloc. */ /* Fonctionne avec un widget Éditeur de texte (une