/*
Theme Name: Barrette & Associés
Theme URI: https://www.barretteavocats.com/
Description: Thème enfant Divi — Barrette & Associés | Avocats
Author: Bamonoss
Author URI: https://bamonoss.com
Template: Divi
Version: 1.4.1
*/
/* ==================================================================
* PERF-2 — Hanken Grotesk servie depuis le thème
*
* Police variable, graisses 400 à 700, sous-ensembles latin et
* latin-ext : 54 Ko au total, contre la famille complète (romain +
* italique, 100 à 900, tous alphabets) précédemment tirée de Google.
*
* La famille est déclarée sous ses deux graphies : la feuille Divi
* l'appelle « hanken-grotesk », le gabarit « Hanken Grotesk ».
* ================================================================== */
@font-face {
font-family: "Hanken Grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Hanken Grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "hanken-grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "hanken-grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* ==================================================================
* PERF-4 — Stabilité de la mise en page
*
* L'intro du site verrouille le défilement (html.ba-lock{overflow:hidden}),
* puis le relâche. Mesuré en desktop : la section héros passe de 1265 px
* à 1250 px au moment où la barre de défilement réapparaît, ce qui décale
* toute la page. Réserver la gouttière supprime ce décalage.
* ================================================================== */
html {
scrollbar-gutter: stable;
}
/* ------------------------------------------------------------------
* ⚠️ NE PAS forcer aspect-ratio + height:auto sur ces images.
*
* La v1.2.0 contenait :
* .et_pb_group_carousel_slide .et_pb_image_wrap img,
* .ba-logo, .et_pb_menu__logo img, img.wp-image-12
* { aspect-ratio: …; height: auto; }
*
* Ces images sont dans des conteneurs flex sans largeur définie. En leur
* imposant height:auto, la largeur se résout à 0, donc la hauteur aussi.
* S'ensuit un blocage : l'image fait 0 × 0, elle n'entre jamais dans le
* viewport, `loading="lazy"` ne se déclenche donc jamais, elle ne se
* charge pas, et elle reste à 0 × 0.
*
* Effet constaté le 13 août 2026 en navigation privée : les portraits
* d'avocats du carrousel d'accueil étaient totalement absents, et toute
* la section héros s'effondrait à une hauteur de 0.
*
* La réservation d'espace est déjà assurée nativement : Divi publie
* width="694" height="1187" sur ces balises, ce dont le navigateur déduit
* seul le rapport d'aspect. Aucune règle CSS n'est nécessaire.
* ---------------------------------------------------------------- */
/* ==================================================================
* PERF-6 — La première diapositive du héros est peinte avant le JS
*
* Le module Code de l'accueil pose opacity:0 + visibility:hidden sur
* toutes les diapositives du carrousel héros, et c'est le JS de Divi qui
* lève le voile en ajoutant _slide_active. Or Chrome exclut du LCP tout
* élément à opacity:0 : l'image du héros ne devient candidate qu'après
* jQuery, les quatorze scripts Divi du pied de page, l'init du carrousel
* et 600 ms de fondu. Mesuré le 7 septembre 2026 sur PageSpeed mobile :
* LCP 9,2 s pour un FCP de 0,9 s, soit 0 point sur les 25 du LCP.
*
* La règle ci-dessous rend la première diapositive visible d'emblée, et
* se retire d'elle-même dès que Divi marque une diapositive active — sans
* marqueur à poser ni observateur à nettoyer, donc sans aucun JS dont la
* défaillance laisserait deux diapositives superposées.
*
* Sur un navigateur sans :has() (avant Chrome 105, Safari 15.4,
* Firefox 121) le sélecteur entier est invalide, donc ignoré : on retombe
* exactement sur le comportement actuel. Spécificité (0,5,0) contre
* (0,3,0) pour la règle du module Code : elle l'emporte quel que soit
* l'ordre de chargement.
* ================================================================== */
.carousel-fade .et_pb_group_carousel_track:not(:has(> .et_pb_group_carousel_slide_active))
> .et_pb_group_carousel_slide:first-child {
opacity: 1;
visibility: visible;
transition: none;
}
/* ==================================================================
* 3.2 — Chapô rédactionnel
*
* Le chapô des fiches d'avocats et des pages d'expertise était balisé
* . Il est désormais servi en
(voir functions.php).
* Les déclarations ci-dessous reprennent à l'identique la cascade Divi
* qui s'appliquait au h3 — mêmes variables, mêmes points de rupture —
* pour que le rendu ne bouge pas d'un pixel.
*
* Cascade d'origine relevée sur le site :
* .preset--module--divi-text--default .et_pb_text_inner h3
* → color: var(--gcid-body-color) !important
* → font-size: var(--gvid-ezux8tdgb4) (1.7578rem = 28,12 px)
* → @max-width 980px : var(--gvid-t127d7ie75) (1.53rem = 24,48 px)
* → @max-width 767px : var(--gvid-sazd18u58u) (1.2656rem = 20,25 px)
* h1..h6 → font-family: var(--et_global_heading_font)
* → font-weight: 500 · line-height: 1.4em · padding-bottom: 10px
* ================================================================== */
.et_pb_text_inner p.ba-lede,
p.ba-lede {
font-family: var(--et_global_heading_font);
font-weight: 500;
font-size: var(--gvid-ezux8tdgb4, 1.7578rem);
line-height: 1.4em;
color: var(--gcid-body-color, #3d3d3d);
margin: 0;
padding: 0 0 10px;
}
@media only screen and (max-width: 980px) {
.et_pb_text_inner p.ba-lede,
p.ba-lede {
font-size: var(--gvid-t127d7ie75, 1.53rem);
}
}
@media only screen and (max-width: 767px) {
.et_pb_text_inner p.ba-lede,
p.ba-lede {
font-size: var(--gvid-sazd18u58u, 1.2656rem);
}
}
/* ==================================================================
* 4.4 — Lien d'évitement
*
* Masqué jusqu'à réception du focus clavier, puis affiché en haut de
* page, au-dessus de l'en-tête Divi (qui est en position absolue).
* ================================================================== */
.ba-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
width: 1px;
height: 1px;
overflow: hidden;
}
.ba-skip-link:focus,
.ba-skip-link:focus-visible {
left: 16px;
top: 16px;
width: auto;
height: auto;
padding: 12px 20px;
background: #ffffff;
color: #b81f1e;
font-family: var(--et_global_heading_font);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
border: 2px solid #b81f1e;
border-radius: 2px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
}
/* Le conteneur reçoit tabindex="-1" pour que le saut donne bien le focus ;
on masque le contour que le navigateur dessinerait sur ce conteneur. */
#main-content:focus {
outline: none;
}
/* ==================================================================
* 4.7 — Respect de « réduire les animations »
*
* Le site comporte un carrousel d'accueil et des apparitions au
* défilement (reveal-up / reveal-lines). Sous prefers-reduced-motion,
* on neutralise le mouvement tout en forçant l'état final visible :
* sans cela, un contenu animé resterait à opacity 0.
* ================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
transition-delay: 0ms !important;
}
html {
scroll-behavior: auto !important;
}
/* État final forcé : le contenu doit rester lisible. */
.reveal-up,
.reveal-lines,
.reveal-lines > *,
[class*="et_animated"],
.et_had_animation {
opacity: 1 !important;
transform: none !important;
filter: none !important;
visibility: visible !important;
}
/* Carrousel : la diapositive active s'affiche sans fondu. */
.carousel-fade .et_pb_group_carousel_slide {
transition: none !important;
}
.et_pb_group_carousel_track {
transition: none !important;
}
}