/* ============================================================================
   GABARIT DE L'ACCUEIL — version 2 (novembre 2026), retouches B2 a B11
   ============================================================================
   Chargee UNIQUEMENT par les 9 pages construites sur le gabarit de l'accueil (memes
   sections #accueil, #counter1, #apropos, #valeurs, #plus, #contact, puis avis.php et
   articles-recents.php) : index.php, avocat-penaliste-lyon-3, avocat-penaliste-vienne,
   avocat-penaliste-bourgoin-jallieu, avocat-penaliste-villefranche-sur-saone,
   avocat-penaliste-bourg-en-bresse, avocat-droit-famille-lyon, avocat-droit-famille-lyon-2
   et avocat-droit-famille-lyon-3. Ces pages posent $mrcGabaritAccueil = true avant
   d'inclure header.php, qui ajoute alors le <link> de ce fichier APRES style.css et
   cookie-consent.css : une regle ecrite ici surcharge donc le theme sans le modifier.

   Pourquoi un fichier a part (et pas la fin de style.css, comme le SOCLE, B1 et B12) :
   ces regles visent des elements qui existent aussi, avec un autre habillage, sur les
   15 autres pages (hero .slider, section #blog des articles, balise <section>...). Dans
   style.css elles changeraient le corps des articles, du blog, de la presse et des
   mentions legales, qui doit rester tel quel. Une requete de plus, sur 9 pages seulement.
   Prerequis : le SOCLE (palette --b-*, Merriweather 300-900), en fin de style.css.

   NUMEROS B2 A B11 : numerotation de la version validee en octobre 2026 (B1, en-tete, et
   B12, pied de page, sont en fin de style.css). Une section commentee par numero, dans
   l'ordre de la page, de haut en bas. Lecture (mobile d'abord, id et !important,
   animations) : voir l'en-tete du bloc « VERSION 2 » en fin de style.css.

   LES 9 PAGES N'ONT PAS TOUTES LE MEME CONTENU. Les regles qui dependent de la structure
   (rang d'un paragraphe, derniere rangee, balise autour du titre...) ont ete verifiees
   sur les 9 pages ; chaque ecart est traite et signale la ou il se trouve :
   - B2 : le <h1> est DANS .slide--headline sur l'accueil, AUTOUR sur les 8 autres pages,
     et ces titres contiennent des <strong> ; les 3 pages aux noms de ville composes
     (Bourgoin-Jallieu, Villefranche-sur-Saône, Bourg-en-Bresse) ont un titre long (classe
     mrc-hero-titre-long) et leur nom de ville insecable (mrc-insecable, mrc-insecable-412) ;
   - B6 : seuls l'accueil et avocat-droit-famille-lyon ont une phrase d'introduction avant
     les engagements de « Mes valeurs » (classe mrc-valeurs-intro posee dans leur HTML) ;
   - B7 : les cartes de #valeurs forment une ou deux listes, dans un ordre qui varie, et
     Bourg-en-Bresse a une section de cartes en plus (#juridictions), que sa section
     #valeurs annonce par la classe mrc-valeurs-prolongee.
   ============================================================================ */


/* ============================================================================
   B2 — Photo du haut (#accueil) : titre affirme aligne a gauche, bouton plein
   Pourquoi : un texte aligne a gauche se lit d'un seul mouvement d'oeil, et sur
   ordinateur il degage la photo du cabinet a droite au lieu de la recouvrir au centre.
   ============================================================================ */

/* Voile : le theme pose un gris #333 a 70 % uniforme. Sur telephone le texte occupe
   toute la largeur, donc voile homogene un peu plus dense en bas (ou se trouve le bouton). */
.slider .bg-overlay-dark:before {
    background: linear-gradient(180deg, rgba(24, 24, 24, .74) 0%, rgba(24, 24, 24, .86) 100%);
    opacity: 1;
}

/* Barre de 76 px (B1) : 116 px suffisent pour que le titre ne passe pas dessous
   (167 px avant, pour une barre de 107 px). */
.slider .slide--item {
    padding-top: 116px;
}

/* Les trois blocs du hero (titre, presentation, bouton) etaient des colonnes centrees,
   dont deux decalees au milieu (col-sm-offset-3). On les remet en pleine largeur,
   alignees a gauche. Selecteur avec l'id : plus fort que les classes de grille Bootstrap. */
#accueil .row > [class*="col-"] {
    float: none;
    width: 100%;
    margin-left: 0;
    text-align: left;
}

/* Titre (h1) : Merriweather extra-gras (800, voir SOCLE), interlettrage resserre,
   lignes equilibrees (text-wrap: balance evite un mot seul sur la derniere ligne ;
   ignore sans danger par les vieux navigateurs). */
.slider .slide--headline {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.015em;
    text-align: left;
    text-wrap: balance;
    margin-bottom: 22px;
}

/* Trait dore sous le titre : signature visuelle de la version 2 (on le retrouve sous
   chaque titre de section, voir B4). Pur decor : pseudo-element, aucun texte. */
.slider .slide--headline:after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 20px;
    background-color: var(--b-dore);
}

/* LES 8 AUTRES PAGES ecrivent le titre a l'envers de l'accueil :
   - accueil : <div class="slide--headline slide--headline-xl"><h1>...</h1></div> ;
   - 8 autres : <h1><div class="slide--headline">...</div></h1>.
   Les espacements ci-dessus ont ete regles sur l'accueil, ou la marge basse du <h1>
   (28 px, theme) se fond avec celle du trait (20 px) : texte -> trait = 28 px, et
   trait -> presentation = marge de .slide--headline (22 px ; 26 px sur ordinateur).
   Sur les 8 autres, le <h1> est DEHORS : sans correction, texte -> trait = 20 px et sa
   marge de 28 px s'ajoutait sous le trait. Ces deux regles redonnent les memes ecarts ;
   aucun de leurs selecteurs (h1 enfant de colonne, .slide--headline enfant de h1) ne
   correspond a l'accueil, qui reste tel quel. */
#accueil .row > [class*="col-"] > h1 {
    margin-bottom: 0;
}

#accueil h1 > .slide--headline:after {
    margin-top: 28px;
}

/* Les titres des 8 autres pages mettent leur debut en <strong> (« Avocat penaliste a
   Lyon 3 », ...). Bootstrap donne 700 au <strong> : dans un titre passe en 800, ces
   mots seraient PLUS MAIGRES que le reste, l'inverse d'une mise en valeur. Avant la
   version 2, titre et <strong> etaient tous deux en 700 (aucune difference visible) :
   « inherit » garde ce meme rendu uniforme, en 800. Le <strong> reste dans le HTML. */
.slider .slide--headline strong {
    font-weight: inherit;
}

/* Ombre de texte tres legere : assure la lisibilite si une zone claire de la photo
   (fenetre, lampe) passe derriere le texte, sans effet visible sur fond sombre. */
.slider .slide--headline,
.slider .slide--bio {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.slider .slide--bio {
    font-size: 15.5px;
    line-height: 1.6;
    padding: 0;
    text-align: left;
    margin: 0 0 28px;
}

/* La devise (<b>"Chacun merite..."</b>) etait en gras droit, collee a la phrase
   d'accueil. Sur sa propre ligne, en italique Merriweather doree : elle devient une
   signature. Dore sur photo voilee : au moins ~5:1 dans la zone du texte (voile de
   ~80 % a cet endroit, calcule meme si la photo etait blanche derriere). */
.slider .slide--bio b {
    display: block;
    margin-top: 14px;
    font-family: 'Merriweather', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--b-dore);
}

.slider .slide--action {
    text-align: left;
    margin-bottom: 40px;
}

/* Bouton « En savoir plus » : PLEIN dore (au lieu d'un contour dore fin, peu visible),
   texte anthracite (7.28:1 ; jamais de blanc sur le dore). Pleine largeur sur telephone :
   cible facile au pouce. L'id bat la regle .btn--bordered.btn--primary du theme. */
#accueil .btn {
    display: block;
    width: 100%;
    height: 52px;
    line-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 3px;
    background-color: var(--b-dore);
    color: var(--b-titre);
    font-size: 13px;
    letter-spacing: .14em;
}

#accueil .btn:hover,
#accueil .btn:focus {
    background-color: var(--b-dore-survol);
    color: var(--b-titre);
}

#accueil .btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (min-width: 992px) {
    /* Ordinateur : voile en degrade de GAUCHE (dense, sous le texte) a DROITE (leger),
       qui laisse voir la photo du cabinet. A gauche il reste plus dense que le voile
       uniforme du theme (70 %).
       Premiere couche (dessinee PAR-DESSUS la seconde) : une bande sombre en haut, qui
       s'efface en 140 px, sous la barre encore transparente. Sans elle, les liens du menu
       (« Blog », « contact »...) passaient devant la fenetre claire de la photo et tombaient
       sous 4.5:1 entre 992 et 1300 px environ, alors que l'ancienne version restait au-dessus
       de 4.95:1 (mesure au banc le 02/11/2026). Elle s'arrete bien avant le titre (220 px
       plus bas) : le reste de la photo ne change pas. Avec elle, le lien le moins contraste
       (« contact ») reste au-dessus de 5.7:1 de 992 a 1920 px, sans ombre sur le texte (une
       ombre legere, essayee d'abord, ne suffisait pas entre 992 et 1300 px). */
    .slider .bg-overlay-dark:before {
        background:
            linear-gradient(180deg, rgba(24, 24, 24, .5) 0, rgba(24, 24, 24, 0) 140px),
            linear-gradient(90deg, rgba(24, 24, 24, .9) 0%, rgba(24, 24, 24, .78) 45%, rgba(24, 24, 24, .45) 100%);
    }

    /* Hero de 800 px (inchange) : 220 px de haut centrent le bloc de texte sous la barre. */
    .slider .slide--item {
        padding-top: 220px;
    }

    /* Texte sur les 2/3 gauches (8 colonnes sur 12), blocs empiles (clear). */
    #accueil .row > [class*="col-"] {
        float: left;
        clear: left;
        width: 66.6667%;
    }

    .slider .slide--headline {
        font-size: 58px;
        line-height: 1.08;
        letter-spacing: -.02em;
        margin-bottom: 26px;
    }

    .slider .slide--headline:after {
        margin-top: 28px;
    }

    .slider .slide--bio {
        max-width: 560px;
        font-size: 18px;
        margin-bottom: 36px;
    }

    .slider .slide--bio b {
        font-size: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Petit ordinateur (conteneur de 970 px) : a 58 px le titre passait sur 4 lignes. */
    .slider .slide--headline {
        font-size: 48px;
    }
}

@media (min-width: 768px) {
    /* Des la tablette, le bouton reprend une largeur ajustee a son texte (la pleine
       largeur n'a de sens que sous le pouce, sur telephone). */
    #accueil .btn {
        display: inline-block;
        width: auto;
        padding: 0 36px;
    }
}

/* NOMS DE VILLE COMPOSES INSECABLES (Villefranche-sur-Saône, Bourgoin-Jallieu,
   Bourg-en-Bresse). Le navigateur a le droit de passer a la ligne apres un trait d'union, et
   il le faisait au milieu du nom (« Villefranche-sur- / Saône », « Bourg- / en-Bresse ») dans
   le titre, la presentation et la citation de #plus (B8). Dans le HTML de ces 3 pages, le
   nom porte une de ces deux classes ; white-space: nowrap interdit toute coupure dedans.
   Pourquoi pas le trait d'union insecable (caractere U+2011) : il remplacerait un caractere
   du texte (recherche dans la page, copier-coller, lecture par les moteurs).
   Le revers de nowrap : un nom plus large que sa colonne en deborderait. Largeurs mesurees
   au banc (02/11/2026) sur les 3 pages, de 320 a 1440 px :
   - mrc-insecable : le nom tient partout des 320 px (le plus large, Villefranche-sur-Saône
     dans la citation : 227 px pour 257 px de place a 320 px). En dessous de 320 px (ecran
     plie, zoom fort), on laisse la coupure plutot que de deborder ;
   - mrc-insecable-412 : Villefranche-sur-Saône dans le TITRE mesure 369 px avec sa virgule,
     en 32 px : 290 px de place a 320, 345 a 375, 360 a 390, 370 a 400 (0,6 px de reste,
     trop juste selon les polices), 382 a 412. Seuil a 412 px (telephones de 412 a 430 px
     et petites tablettes compris) ; en dessous, la coupure au trait d'union reste permise,
     sinon le titre sortirait de l'ecran.
   Le nom de l'AVOCATE porte aussi mrc-insecable dans la presentation du hero (9 pages) :
     « Regnier- / Cymberkewitch » se coupait de meme ; il tient des 320 px. */
@media (min-width: 320px) {
    .mrc-insecable {
        white-space: nowrap;
    }
}

@media (min-width: 412px) {
    .mrc-insecable-412 {
        white-space: nowrap;
    }
}

/* TITRE LONG (classe mrc-hero-titre-long sur la section #accueil de Bourgoin-Jallieu,
   Villefranche-sur-Saône et Bourg-en-Bresse). Sur ordinateur, le hero a une hauteur FIXE de
   800 px (theme) et rogne ce qui depasse. Ces titres font 5 lignes en 58 px (Bourg-en-Bresse
   depuis que le nom de la ville ne se coupe plus) : le bouton « En savoir plus » n'etait plus
   qu'a 35 px du bas de la photo (146 px sur l'accueil). Deux mesures :
   - la taille du titre au-dela de 1200 px est ramenee a 48 px, celle du palier 992-1199 px
     (B2, ci-dessus) : le titre repasse a 4 lignes, 141 px sous le bouton (mesure au banc).
     Entre 992 et 1199 px, ou le titre est deja en 48 px, il reste 89 px : rien a changer ;
   - hauteur MINIMALE au lieu d'une hauteur fixe : si un jour le texte depasse quand meme
     (titre modifie, texte agrandi par le visiteur), la photo s'allonge au lieu de rogner le
     bouton. Tant que le contenu tient, elle garde ses 800 px : rendu identique.
   L'accueil et les 6 autres pages n'ont pas cette classe et ne changent pas. */
@media (min-width: 992px) {
    .slider.mrc-hero-titre-long,
    .slider.mrc-hero-titre-long .slide--item {
        height: auto;
        min-height: 800px;
    }
}

@media (min-width: 1200px) {
    .slider.mrc-hero-titre-long .slide--headline {
        font-size: 48px;
    }
}

/* ============================================================================
   B3 — Bandeau des 4 valeurs : bande anthracite collee a la photo
   Pourquoi : sur telephone, 4 mots empiles occupaient 492 px (plus de la moitie d'un
   ecran) ; en 2 x 2 sur fond sombre, ils forment un bloc compact qui prolonge l'accueil.
   ============================================================================ */

/* Le theme faisait remonter une carte blanche sur la photo (-60 px). Ici : bande pleine
   largeur, juste sous la photo. Sur telephone le theme ajoutait 60 px de vide au-dessus
   et au-dessous ; supprimes. */
.counter {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--b-anthracite);
}

.counter-container {
    padding: 22px 0 18px;
    border-radius: 0;
    background-color: transparent;
}

/* Grille 2 x 2 en flexbox. Les pseudo-elements :before/:after de .row (le « clearfix »
   de Bootstrap) deviendraient des elements de la grille : on les retire ICI seulement. */
.counter .row {
    display: flex;
    flex-wrap: wrap;
}

.counter .row:before,
.counter .row:after {
    display: none;
}

.counter .row > [class*="col-"] {
    float: none;
    width: 50%;
}

/* Icone AU-DESSUS du libelle sur telephone : cote a cote, « CONFIDENTIALITÉ » ne tiendrait
   pas dans une demi-largeur de 320 px. L'icone etait en position absolue (decalee en
   hauteur par rapport au mot) : elle reprend sa place dans le flux. */
.count-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0;
    padding-left: 0;
}

/* Icones : 46 px sur telephone (76 px avec l'habillage d'origine ; 34 px, essaye, etait
   trop petit : les 4 valeurs sont le message central du cabinet, pas un detail). */
.count-box .count-icon {
    position: static;
    margin: 0;
    font-size: 46px;
    line-height: 1;
    color: var(--b-dore);    /* icone (pas du texte) doree sur anthracite : 8:1 */
}

.count-box .count-content {
    padding-left: 0;
}

/* Libelles en italique Merriweather, comme dans l'habillage d'origine (l'identite de la page),
   mais BLANCS sur anthracite (16.7:1) au lieu du noir pur #000.
   Pourquoi pas des petites capitales espacees (essayees) : a 11-12 px, ces quatre
   mots se lisaient comme des mentions de pied de page ; c'est l'inverse du but.
   « Confidentialite » a 17 px mesure 114 px : il tient dans sa demi-colonne des 320 px
   (130 px de large). Sous 320 px (ecran plie de 280 px, zoom fort), la colonne tombe a
   110 px : le palier 16 px plus bas (107 px) evite que le mot deborde. Mesure au banc. */
.count-title {
    padding-top: 0;
    font-family: 'Merriweather', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
}

@media (max-width: 319px) {
    .count-title {
        font-size: 16px;
    }
}

@media (min-width: 992px) {
    .counter-container {
        padding: 30px 0;
    }

    .counter .row > [class*="col-"] {
        width: 25%;
    }

    /* Ordinateur : icone et libelle cote a cote, centres dans leur quart. */
    .count-box {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin: 0;
    }

    .count-box .count-icon {
        font-size: 54px;
    }

    .count-title {
        font-size: 19px;
    }

    /* Filets verticaux tres discrets entre les 4 valeurs. */
    .counter .row > [class*="col-"] + [class*="col-"] {
        border-left: 1px solid rgba(255, 255, 255, .12);
    }
}


/* ============================================================================
   B4 — Titres de section plus marques, espacements resserres
   Pourquoi : tous les titres etaient fins (400) avec un filet de 1 px a peine visible,
   et 80 px de vide sous chaque filet : la page s'etirait sans reperes. Titre gras +
   trait dore epais = on sait tout de suite ou commence chaque partie.
   ============================================================================ */

/* Moins de vide autour des sections (100 px avant), surtout sur telephone. Les sections
   qui ont leurs propres marges (.slider, .counter, classes pt-0 / pb-0) ne bougent pas :
   leurs regles sont plus precises que ce selecteur de balise. */
section {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* « Les derniers articles » (#blog) n'est pas dans un bloc .heading : on l'ajoute ici
   pour que tous les titres h2 suivent la meme echelle (il etait plus gros, en 42 px). */
.heading .heading--title,
#blog > .container > .heading--title {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--b-titre);
    text-wrap: balance;
}

.heading .heading--title + .heading--divider {
    margin-top: 18px;
}

/* Trait dore de 48 x 3 px (au lieu de 50 x 1) sous chaque titre. */
.heading .heading--divider:after {
    width: 48px;
    height: 3px;
}

.heading .heading--center:after {
    margin-left: -24px;
}

/* .mb-80 est un « !important » du theme (80 px sous le trait) : seul un autre
   !important plus precis peut le reduire. */
.heading .heading--divider,
.heading .heading--divider.mb-80 {
    margin-bottom: 28px !important;
}

/* Meme trait sous « Les derniers articles », dessine en pseudo-element (pas de balise). */
#blog > .container > .heading--title {
    margin-bottom: 8px;
}

#blog > .container > .heading--title:after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 18px auto 0;
    background-color: var(--b-dore);
}

@media (min-width: 992px) {
    section {
        padding-top: 88px;
        padding-bottom: 88px;
    }

    .heading .heading--title,
    #blog > .container > .heading--title {
        font-size: 40px;
        line-height: 1.15;
    }

    .heading .heading--title + .heading--divider {
        margin-top: 22px;
    }

    .heading .heading--divider,
    .heading .heading--divider.mb-80 {
        margin-bottom: 40px !important;
    }
}

/* B4 (suite) — Apparition des blocs plus discrete (ORDINATEUR seulement)
   Pourquoi : les blocs « montaient » de toute leur hauteur en 1 s (animate.css) ; un
   glissement de 16 px en 0,55 s est plus calme et la page parait plus rapide.
   Rattachee a B4 (rythme de la page). Ordinateur seulement : sur telephone, le theme
   n'anime rien (WOW y est desactive, option « mobile: false » de functions.js).
   Animations UNIQUEMENT si le visiteur n'a pas demande a les limiter (sinon : SOCLE,
   point 3, en fin de style.css). */
@media (prefers-reduced-motion: no-preference) {
    @keyframes mrcbApparition {
        from {
            opacity: 0;
            transform: translate3d(0, 16px, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* WOW.js lit le NOM d'animation de .fadeInUp au demarrage puis le recopie en style en
       ligne : redefinir le nom ici suffit a remplacer l'animation, sans toucher au JS. */
    .fadeInUp {
        animation-name: mrcbApparition;
    }

    /* Duree : WOW ecrit « 1s » en style en ligne (data-wow-duration) : seul !important
       le remplace depuis une feuille de style. */
    .wow.animated {
        animation-duration: .55s !important;
        animation-timing-function: cubic-bezier(.22, .61, .36, 1) !important;
    }
}


/* ============================================================================
   B5 — A propos : texte plus lisible, parcours en liste a reperes dores
   Pourquoi : 4 faits en gris clair de 18 px se lisaient comme un seul paragraphe ;
   texte plus fonce et petit repere dore = 4 points distincts, lus d'un coup d'oeil.
   ============================================================================ */

/* Le theme posait 70 px (!important) au-dessus du titre : utile a cote de la photo sur
   ordinateur, trop sur telephone ou le titre suit directement la photo. */
#apropos .mt-70 {
    margin-top: 36px !important;
}

#apropos .about-content p {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--b-texte);
}

/* Repere : trait dore de 10 x 2 px aligne sur la premiere ligne (0.8em ~ milieu de la
   ligne a 16 px). Decor pur : pseudo-element. */
#apropos .about-content p:before {
    content: "";
    position: absolute;
    left: 0;
    top: .8em;
    width: 10px;
    height: 2px;
    background-color: var(--b-dore);
}

#apropos img {
    border-radius: 4px;
}

/* Credit photo : plus decolle de l'image, en 12 px gris lisible (7.46:1). */
#apropos .entry--meta {
    margin-top: 8px;
}

#apropos .entry--meta span {
    font-size: 12px;
    color: var(--b-texte2);
}

@media (min-width: 992px) {
    #apropos .mt-70 {
        margin-top: 40px !important;
    }

    #apropos .about-content p {
        font-size: 17px;
    }
}


/* ============================================================================
   B6 — Mes valeurs / Mes engagements : les engagements mis en avant
   Pourquoi : les engagements (« Une defense inconditionnelle », « Une ecoute
   attentive »...) etaient noyes dans des paragraphes gris identiques a la phrase
   d'introduction. En gras fonce, separes par un trait dore, ils se lisent comme des
   engagements.
   ============================================================================ */

/* Bloc « Mes valeurs » (ou « Mes engagements ») = 1re rangee de #valeurs : titre,
   paragraphes, bouton telephone.
   QUI EST L'INTRODUCTION ? Pas le 1er paragraphe : seuls l'accueil et
   avocat-droit-famille-lyon ont une phrase d'introduction avant leurs engagements (3 et 2) ;
   les 7 autres pages n'ont QUE leurs 3 engagements. Un selecteur de rang (:first-of-type)
   aurait habille le 1er engagement de ces 7 pages en introduction. L'introduction porte
   donc une classe dans le HTML, mrc-valeurs-intro, et tout autre paragraphe du bloc est un
   engagement. A reprendre sur toute nouvelle page de ce gabarit qui aurait une introduction. */
/* Respiration nette entre le bouton telephone et le titre de la liste qui suit
   (nouveau sujet) : 64 px. La colonne porte un .mb-80 du theme (!important). */
#valeurs > .container > .row:first-child > .mb-80 {
    margin-bottom: 64px !important;
}

#valeurs > .container > .row:first-child .heading--desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--b-texte);
}

/* L'introduction, separee des engagements par 26 px. */
#valeurs > .container > .row:first-child .heading--desc.mrc-valeurs-intro {
    margin-bottom: 26px;
}

/* Les engagements : tout paragraphe du bloc qui n'est pas l'introduction. */
#valeurs > .container > .row:first-child .heading--desc:not(.mrc-valeurs-intro) {
    padding: 12px 0;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: var(--b-titre);
}

/* Petit trait dore AU-DESSUS de chaque engagement sauf le premier (il les separe sans
   encadrer) : un engagement qui SUIT un autre engagement (combinateur « + »). Le premier
   suit l'introduction, le trait de titre ou rien : il n'en a pas. */
#valeurs > .container > .row:first-child .heading--desc:not(.mrc-valeurs-intro) + .heading--desc:before {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto 14px;
    background-color: var(--b-dore);
}

/* Bouton telephone : largeur ajustee au numero (et non 210 px fixes), capitales espacees.
   Au survol il FONCE le dore (texte #272727, ~6:1) au lieu de passer en gris/blanc. */
#valeurs .btn {
    width: auto;
    height: 50px;
    line-height: 50px;
    margin-top: 22px;
    padding: 0 30px;
    border-radius: 3px;
    font-size: 13px;
    letter-spacing: .1em;
}

#valeurs .btn:hover,
#valeurs .btn:focus {
    background-color: var(--b-dore-survol);
    color: var(--b-titre);
}

#valeurs .btn:focus-visible {
    outline: 2px solid var(--b-dore-texte);
    outline-offset: 3px;
}

@media (min-width: 992px) {
    #valeurs > .container > .row:first-child > .mb-80 {
        margin-bottom: 80px !important;
    }

    #valeurs > .container > .row:first-child .heading--desc {
        font-size: 17px;
    }

    #valeurs > .container > .row:first-child .heading--desc:not(.mrc-valeurs-intro) {
        font-size: 20px;
    }
}


/* ============================================================================
   B7 — Domaines de competence presentes en cartes
   Pourquoi : jusqu'a 16 blocs de texte centre (accueil), decales de 68 px vers la droite
   sur telephone (place reservee a une icone qui n'existe pas), aux titres serres : 44 % de
   la page, penible a parcourir. Des cartes alignees a gauche se lisent et se survolent mieux.
   #juridictions : section de cartes propre a avocat-penaliste-bourg-en-bresse, juste apres
   #valeurs, construite avec les memes classes. Elle recoit le meme habillage (fond sable,
   cartes), sinon elle serait la seule liste de cartes blanche et centree de la page.
   ============================================================================ */

/* Fond sable sur toute la section (Mes valeurs + compétences) : rompt la suite de
   sections blanches. .bg-white du theme est en !important : l'id + !important passe devant.
   #juridictions (Bourg-en-Bresse) prolonge #valeurs sans espace en haut (classe pt-0) :
   meme fond, les deux sections se lisent comme un seul bloc, sans rupture de couleur. */
#valeurs,
#juridictions {
    background-color: var(--b-sable) !important;
}

/* Consequence du fond sable : la section « A propos » (au-dessus) n'avait aucun espace en
   bas (classe .pb-0 du theme, !important), car la suite etait blanche elle aussi. Sans cet
   espace, son dernier paragraphe collerait a la bordure du sable. */
#apropos {
    padding-bottom: 40px !important;
}

@media (min-width: 992px) {
    #apropos {
        padding-bottom: 72px !important;
    }
}

/* Sur sable, le gris de texte du theme (#757575) tombe a 4.03:1 (echec) : les textes
   d'introduction de la section passent en #555555 (6.51:1 sur sable). */
#valeurs .heading--desc,
#juridictions .heading--desc {
    color: var(--b-texte2);
}

/* ESPACE ENTRE DEUX LISTES DE CARTES : 48 px entre la derniere rangee de cartes d'une
   liste et le titre de la liste suivante.
   Sur l'accueil, la liste « droit penal » se termine par une rangee .mb-80 (80 px, un
   !important du theme, d'ou l'id + !important) suivie du titre « droit de la famille ». */
#valeurs > .container > .row.mb-80 {
    margin-bottom: 48px !important;
}

/* Les autres pages ne placent pas ce .mb-80 au meme endroit :
   - avocat-penaliste-lyon-3 et avocat-droit-famille-lyon ont deux listes, mais leur
     .mb-80 est sur la DERNIERE rangee de la section ; la rangee qui precede le titre de la
     2e liste (#famille ou #penal) n'a rien : les deux listes se touchaient. Le titre de
     liste qui suit une rangee de cartes sans .mb-80 prend donc lui-meme les 48 px (sur
     l'accueil, cette rangee porte .mb-80 : la regle ne s'y applique pas) ;
   - .mb-80 sur la derniere rangee de la section (6 pages) ajoutait 48 px de vide au bas
     du fond sable, en plus de l'espace de la section : remis a 0, comme sur l'accueil.
     Meme chose pour le texte qui termine #juridictions. :last-child (une id + 4 classes)
     passe devant la regle a 48 px ci-dessus (une id + 3 classes), les deux en !important. */
#valeurs > .container > .row.text-center:not(.mb-80) + .row.clearfix {
    margin-top: 48px;
}

#valeurs > .container > .row.mb-80:last-child,
#juridictions > .container > .row.mb-80:last-child {
    margin-bottom: 0 !important;
}

/* La carte : fond blanc, trait dore de 3 px en haut, coins de 4 px, ombre tres douce.
   text-align: left annule le .text-center de la rangee (texte centre = bords irreguliers
   des deux cotes, lecture fatigante sur 6 a 14 lignes). */
#valeurs .feature-panel,
#juridictions .feature-panel {
    margin-bottom: 14px;
    padding: 20px 18px 22px;
    border-top: 3px solid var(--b-dore);
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(39, 39, 39, .05), 0 6px 20px rgba(39, 39, 39, .06);
    text-align: left;
}

/* Le decalage de 68 px (icone absente) est supprime. */
.feature-left .feature-panel .feature--content {
    padding-left: 0;
}

/* Titre de carte : Merriweather gras, comme les engagements juste au-dessus (B6) et
   comme dans l'habillage d'origine. Interligne 1.45 au lieu de 1 (les lignes se touchaient).
   Pourquoi pas une police sans empattement : essayee, elle
   alourdissait les longs titres (7 lignes de gras sur telephone) et donnait un ton
   « entreprise » en rupture avec le reste de la page. Merriweather est deja chargee. */
#valeurs .feature-panel .feature--content h3,
#juridictions .feature-panel .feature--content h3 {
    margin-bottom: 10px;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.45;
    color: var(--b-titre);
    text-wrap: pretty;
}

/* Texte de carte : 15 px gris fonce (8.19:1) au lieu de 14 px gris clair (4.61:1). */
#valeurs .feature-panel .feature--content p,
#juridictions .feature-panel .feature--content p {
    font-size: 15px;
    line-height: 1.65;
    color: #4f4f4f;
}

/* Carte de plusieurs paragraphes (5 cartes sur avocat-droit-famille-lyon-2) : le theme ne
   met aucune marge entre deux paragraphes d'une carte, ils se collaient (0 px) et se
   lisaient comme un seul bloc. 10 px entre deux paragraphes qui se suivent (« p + p ») :
   le premier paragraphe et les cartes d'un seul paragraphe (toutes les autres, dont
   celles de l'accueil) ne bougent pas. */
#valeurs .feature-panel .feature--content p + p,
#juridictions .feature-panel .feature--content p + p {
    margin-top: 10px;
}

@media (min-width: 992px) {
    /* Chaque carte garde SA hauteur (alignees en haut, grille Bootstrap d'origine).
       Pourquoi pas des cartes de meme hauteur par rangee (essaye) : une carte
       courte etiree a cote d'une longue laissait jusqu'a 45 % de blanc vide dedans, effet
       « carte inachevee ». Ici l'ecart tombe dans le fond sable et se lit comme une respiration. */
    #valeurs .feature-panel,
    #juridictions .feature-panel {
        margin-bottom: 30px;
        padding: 30px 32px 32px;
    }

    #valeurs .feature-panel .feature--content h3,
    #juridictions .feature-panel .feature--content h3 {
        font-size: 17.5px;
    }
}

/* Leger decalage (80 ms) de la carte de droite quand les cartes apparaissent sur ordinateur
   (animation du theme, ou celle de B4) : les deux cartes d'une rangee n'arrivent pas d'un bloc. */
@media (prefers-reduced-motion: no-preference) {
    #valeurs .row.text-center > .col-md-6:nth-child(2) .wow.animated,
    #juridictions .row.text-center > .col-md-6:nth-child(2) .wow.animated {
        animation-delay: .08s !important;
    }
}

/* Texte courant qui termine #juridictions (classes .about .about-content, typographie du
   theme : 18 px gris #757575). Sur le sable, ce gris tombe a 4.03:1 (echec) : meme texte
   que « A propos » (B5) en taille et en couleur, SANS ses reperes dores (ici des
   paragraphes suivis, pas une liste de faits). Lien « revue de presse » en dore fonce
   (5.52:1 sur sable) et souligne, comme les liens de B9. */
#juridictions .about-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--b-texte);
}

#juridictions .about-content a {
    color: var(--b-dore-texte);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 992px) {
    #juridictions .about-content p {
        font-size: 17px;
    }
}

/* #juridictions : MEME RYTHME que le reste du gabarit (Bourg-en-Bresse seulement).
   1) Fin de section. Ailleurs, la section se termine sur une carte : sa marge basse (14 px
      sur telephone, 30 px sur ordinateur) + l'espace bas de la section = 78 / 118 px.
      #juridictions se termine sur ce texte, qui gardait la marge du theme (30 px sous
      992 px) ou celle de son dernier paragraphe (20 px au-dela) : 95 / 108 px. On lui donne
      la marge d'une carte, et le dernier paragraphe n'ajoute plus rien. */
#juridictions .about-content {
    margin-bottom: 14px;
}

#juridictions .about-content p:last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    #juridictions .about-content {
        margin-bottom: 30px;
    }
}

/* 2) Passage de #valeurs a #juridictions. #juridictions n'a pas d'espace en haut (pt-0)
      et prolonge #valeurs : leurs listes de cartes doivent s'enchainer comme deux listes
      d'une meme section (48 px entre la derniere carte et le titre suivant, voir « ESPACE
      ENTRE DEUX LISTES » ci-dessus). Avec l'espace bas complet de #valeurs (64 / 88 px), il
      y avait 78 / 118 px, soit une vraie fin de section. La classe mrc-valeurs-prolongee
      (posee dans le HTML sur la section #valeurs de Bourg-en-Bresse, la seule page suivie
      de #juridictions) ramene cet espace a 48 px : marge de carte + 48 = 62 / 78 px.
      Une classe plutot que « #valeurs:has(+ #juridictions) » : aucun risque avec les
      navigateurs qui ne connaissent pas :has(). L'id + la classe passent devant la regle
      « section » de B4. */
#valeurs.mrc-valeurs-prolongee {
    padding-bottom: 48px;
}


/* ============================================================================
   B8 — Devise en citation, photo decorative en bandeau
   Pourquoi : « Chacun merite une defense de qualite. » (accueil) etait la 1re ligne d'un
   bloc de 5 paragraphes gris identiques ; en citation elle devient le message de la
   section. Sur telephone, la photo du vase occupait 833 px de defilement sans information.
   Sur les 8 autres pages, le 1er paragraphe de #plus joue le meme role (phrase d'accroche
   de la section, suivie de 2 phrases qui la developpent) : meme traitement.
   ============================================================================ */

/* Trait dore orphelin APRES le texte (vestige du theme) : supprime. */
#plus .heading--divider {
    display: none;
}

#plus .heading .heading--desc {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--b-texte);
}

/* 1er paragraphe = la devise (ou l'accroche) : grande italique Merriweather, barre doree
   a gauche. :first-child est sur : sur les 9 pages, le bloc .heading de #plus commence
   par ce paragraphe. */
#plus .heading .heading--desc:first-child {
    margin-bottom: 28px;
    padding-left: 20px;
    border-left: 3px solid var(--b-dore);
    font-family: 'Merriweather', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.5;
    color: var(--b-titre);
}

/* Photo en bandeau de 240 px. La hauteur 833 px du theme est un !important valable a
   TOUTES les largeurs : il faut l'id + !important pour la reduire. La photo est posee
   en fond par functions.js : on choisit quelle partie reste visible (le vase, au centre). */
#plus .col-img {
    height: 240px !important;
    min-height: 0;
    padding: 0;
    background-position: center 60%;
}

/* Marges interieures du texte : 20 px sur les cotes comme le reste de la page (le theme
   imposait 40 px !important ici seulement, d'ou un texte qui « sautait » de 25 px). */
#plus .col-content {
    padding: 48px 20px 24px !important;
}

@media (min-width: 992px) {
    /* Photo et texte centres verticalement l'un par rapport a l'autre. */
    #plus > .container-fluid > .row {
        display: flex;
        align-items: center;
    }

    #plus > .container-fluid > .row:before,
    #plus > .container-fluid > .row:after {
        display: none;
    }

    #plus .col-img {
        height: 620px !important;
    }

    #plus .col-content {
        padding: 64px 100px 64px 90px !important;
    }

    #plus .heading .heading--desc {
        font-size: 17px;
    }

    #plus .heading .heading--desc:first-child {
        padding-left: 28px;
        font-size: 28px;
        line-height: 1.45;
    }
}


/* ============================================================================
   B9 — Formulaire de contact plus net, coordonnees cliquables
   Pourquoi : avec l'habillage d'origine, le texte tape reste GRIS MOYEN (#6b6b6b sur fond #f5f5f5,
   4.9:1 ; au focus, seule la bordure change) : anthracite sur blanc (14.9:1), il se lit
   mieux pendant la frappe ; les champs gris sans bord se distinguaient mal du fond.
   ============================================================================ */

#contact .col-content {
    padding: 48px 20px 40px !important;
}

#contact .heading--desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--b-texte);
}

/* Coordonnees : chaque ligne avec son icone dans un petit cercle de 32 px.
   Icone en position absolue (et non en flex) : la ligne des horaires contient un <b>,
   que flex/grid sortiraient de la phrase pour le mettre dans une case a part. */
#contact .heading ul.list-unstyled li {
    position: relative;
    min-height: 32px;
    margin-bottom: 12px;
    padding: 5px 0 0 44px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--b-texte);
}

/* Cercle en simple CONTOUR dore, icone dore fonce (6.32:1 sur blanc).
   Pourquoi pas des pastilles pleines dorees (essayees) : avec le trait du titre,
   les soulignes et le bouton, l'ecran comptait trop de dore ; et la pastille ronde pleine
   est le motif « coordonnees » des themes vendus tout faits. Le contour reste reperable.
   box-sizing: border-box : le filet de 1 px reste DANS les 32 px (icone toujours centree). */
#contact .heading ul.list-unstyled li > .fa {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    line-height: 30px;
    border: 1px solid var(--b-dore);
    border-radius: 50%;
    background-color: transparent;
    color: var(--b-dore-texte);
    font-size: 14px;
    text-align: center;
}

/* Telephone et e-mail sont des liens (tel: / mailto:) dans le HTML des 9 pages.
   Meme couleur que le texte, souligne dore pour signaler le lien sans crier. */
#contact .heading ul.list-unstyled a {
    position: relative;
    color: var(--b-texte);
    text-decoration: underline;
    text-decoration-color: var(--b-dore);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Zone de toucher agrandie SANS rien deplacer : le lien ne mesure que 20 px de haut (une
   ligne de texte), petit pour le pouce. Ce rectangle invisible deborde de 10 px en haut et
   en bas (40 px au total). Les deux liens sont espaces de ~22 px : leurs zones ne se
   chevauchent pas. Un pseudo-element absolu ne change pas la mise en page. */
#contact .heading ul.list-unstyled a:after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -4px;
    right: -4px;
}

#contact .heading ul.list-unstyled a:hover,
#contact .heading ul.list-unstyled a:focus {
    color: var(--b-dore-texte);
}

/* Champs : fond BLANC bien delimite par un filet de 1 px, texte tape anthracite.
   16 px minimum : en dessous, l'iPhone zoome automatiquement sur le champ au toucher. */
#contact .form-control {
    height: 48px;
    margin-bottom: 14px;
    padding: 0 14px;
    border: 1px solid #d9d0c1;
    border-radius: 3px;
    background-color: #ffffff;
    font-size: 16px;
    line-height: normal;
    color: var(--b-titre);
}

#contact textarea.form-control {
    height: auto;
    min-height: 130px;
    padding: 12px 14px;
    line-height: 1.6;
}

/* Texte indicatif (placeholder) : #6b6b6b = 5.33:1 sur blanc. */
#contact .form-control::placeholder {
    color: #6b6b6b;
}

/* Champ actif : contour dore FONCE de 2 px (bordure + ombre de 1 px) et texte qui reste
   anthracite. Dore fonce plutot que dore de marque : 6.32:1, un contour de champ actif
   doit atteindre 3:1 pour etre vu de tous. */
#contact .form-control:focus {
    border-color: var(--b-dore-texte);
    box-shadow: 0 0 0 1px var(--b-dore-texte);
    color: var(--b-titre);
}

/* Bouton « Envoyer » : pleine largeur sur telephone, capitales espacees. */
#contact .btn {
    width: 100%;
    height: 52px;
    line-height: 52px;
    border-radius: 3px;
    background-color: var(--b-dore);
    color: var(--b-titre);
    font-size: 13px;
    letter-spacing: .14em;
}

#contact .btn:hover,
#contact .btn:focus {
    background-color: var(--b-dore-survol);
    color: var(--b-titre);
}

#contact .btn:focus-visible {
    outline: 2px solid var(--b-dore-texte);
    outline-offset: 3px;
}

/* Photo de la fenetre en bandeau de 240 px sur telephone (meme raison qu'en B8). */
#contact .col-img {
    height: 240px !important;
    min-height: 0;
    padding: 0;
    background-position: center 40%;
}

@media (min-width: 992px) {
    /* Photo aussi haute que le formulaire (flex : les deux colonnes s'etirent ensemble). */
    #contact > .container-fluid > .row {
        display: flex;
    }

    #contact > .container-fluid > .row:before,
    #contact > .container-fluid > .row:after {
        display: none;
    }

    #contact .col-content {
        padding: 80px 90px 72px 100px !important;
    }

    #contact .col-img {
        height: 100% !important;
        min-height: 640px;
    }
}

@media (min-width: 768px) {
    /* Meme logique que le bouton de l'accueil (B2) : pleine largeur sur telephone seulement. */
    #contact .btn {
        width: auto;
        min-width: 220px;
        padding: 0 36px;
    }
}


/* ============================================================================
   B10 — Avis clients en cartes, un avis a la fois, sans defilement automatique
   Pourquoi : les avis defilaient tout seuls, en boucle, sans aucun bouton (genant a la
   lecture, et contraire aux regles d'accessibilite sur le mouvement). Points de
   navigation ajoutes ; texte plus fonce et plus net que l'italique gris 18/35.
   Dans avis.php : defilement automatique coupe, UN avis par vue a toutes les largeurs
   (attributs data-* du carrousel). Points utilisables au clavier : fin de
   assets/js/functions.js.
   ============================================================================ */

#testimonial {
    background-color: var(--b-sable);
}

#testimonial .heading--desc {
    color: var(--b-texte2);
}

/* HAUTEUR DU CARROUSEL = celle de l'avis AFFICHE, sans aucun calcul en JavaScript.
   Le probleme : le carrousel (Owl) aligne les 6 avis cote a cote et prend la hauteur du
   plus long (13 lignes) ; sous un avis de 2 lignes, il restait jusqu'a 260 px de vide.
   La solution : les avis NON affiches (sans la classe .active, posee par Owl) ont une
   hauteur nulle ; seul l'avis affiche donne sa hauteur a la rangee. Leur contenu reste
   dessine (debordement visible) : pendant le glissement, l'avis qui sort reste visible,
   simplement rogne a la hauteur du nouvel avis par le cadre du carrousel.
   Avantages par rapport a une hauteur en pixels posee par script (essayee) :
   - la hauteur suit TOUT changement du texte (police qui arrive, texte agrandi par le
     visiteur, espacement des lettres) : rien ne peut etre coupe ;
   - le changement de hauteur a lieu dans la meme image que le clic sur un point, donc
     dans le delai ou le navigateur ne le compte pas comme un saut de page (CLS), et sans
     animation de hauteur qui l'etalerait au-dela.
   Les lecteurs d'ecran lisent toujours les 6 avis (hauteur nulle n'est pas « cache »).
   align-items: flex-start : chaque avis garde sa hauteur naturelle dans la rangee. */
#testimonial .owl-stage {
    display: flex;
    align-items: flex-start;
}

#testimonial .owl-item {
    float: none;
}

#testimonial .owl-item:not(.active) {
    height: 0;
}

/* POINTS AU-DESSUS des avis (et non dessous) : comme la hauteur change d'un avis a
   l'autre, des points places dessous bougeaient a chaque toucher (jusqu'a 264 px) et le
   doigt ne les retrouvait plus. Au-dessus, ils ne bougent jamais.
   Moyen : le carrousel construit par Owl (classe .owl-loaded) contient le cadre des avis
   puis les commandes ; en flex colonne, « order: -1 » affiche les commandes en premier
   sans deplacer aucune balise. Sans JavaScript, Owl ne demarre pas et rien ne change. */
#testimonial .carousel.owl-loaded {
    display: flex;
    flex-direction: column;
}

#testimonial .owl-controls {
    order: -1;
    margin: 0 0 14px;
}

#testimonial .testimonial-panel {
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(39, 39, 39, .05);
    text-align: left;
}

/* (Pas de grand guillemet decoratif : chaque avis commence deja par le sien, dans le
   texte ; les deux a la suite faisaient doublon.) */

#testimonial .testimonial--body {
    flex: 1 1 auto;
    margin-bottom: 16px;
}

#testimonial .testimonial-panel .testimonial--body p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--b-texte);
}

/* Signature en petites capitales dore fonce ; le tiret « - » du HTML (un <span>) est
   remplace par un petit trait dore dessine. */
#testimonial .testimonial-panel .testimonial--meta h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-top: 0;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--b-dore-texte);
}

#testimonial .testimonial--meta h3 span {
    display: none;
}

#testimonial .testimonial--meta h3:before {
    content: "";
    flex: 0 0 24px;
    height: 2px;
    background-color: var(--b-dore);
}

/* Points de navigation : le point actif s'allonge en trait (dore fonce, 5.52:1 sur sable).
   Points inactifs #9a8462 : environ 3:1 sur le sable, seuil d'un element d'interface.
   Zone cliquable agrandie par le padding : 32 x 38 px (le point seul ferait 8 px). */
#testimonial .owl-dots {
    text-align: center;
}

#testimonial .owl-dot {
    display: inline-block;
    padding: 15px 12px;
    cursor: pointer;
}

#testimonial .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #9a8462;
}

#testimonial .owl-dot.active span {
    width: 24px;
    background-color: var(--b-dore-texte);
}

/* La fin de functions.js rend les points atteignables avec la touche Tab : il faut alors
   voir lequel a le focus (le theme supprime tous les contours). */
#testimonial .owl-dot:focus-visible {
    outline: 2px solid var(--b-dore-texte);
    outline-offset: -4px;
    border-radius: 6px;
}

/* Mode « contraste eleve » de Windows : le navigateur y efface les couleurs de fond, et
   des points dessines par une couleur de fond disparaitraient. forced-color-adjust: none
   les garde, avec les couleurs systeme du mode (texte, et surlignage pour l'avis affiche). */
@media (forced-colors: active) {
    #testimonial .owl-dot span {
        forced-color-adjust: none;
        background-color: CanvasText;
    }

    #testimonial .owl-dot.active span {
        background-color: Highlight;
    }
}

/* Le point actif s'allonge en douceur (seulement si les animations sont autorisees). */
@media (prefers-reduced-motion: no-preference) {
    #testimonial .owl-dot span {
        transition: width .25s ease-out, background-color .25s ease-out;
    }
}

/* Visiteur qui demande moins d'animations : glissement des avis au clic sur un point
   instantane. (Regle d'accessibilite du SOCLE, point 3 ; placee ici et non en fin de
   style.css parce que le carrousel des avis n'existe que sur ces 9 pages.) */
@media (prefers-reduced-motion: reduce) {
    #testimonial .owl-stage {
        transition-duration: 0s !important;
    }
}

@media (min-width: 768px) {
    /* Des la tablette, un avis a la fois dans une colonne de lecture de 760 px, centree,
       au lieu de 3 cartes cote a cote : chaque carte avait la hauteur de l'avis le plus
       long, et les avis courts y flottaient dans 70 % de blanc. L'avis devient une
       citation large, dans l'esprit de la devise (B8). Owl mesure cette largeur lui-meme. */
    #testimonial .carousel {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 992px) {
    #testimonial .testimonial-panel {
        padding: 36px 44px 32px;
    }

    #testimonial .testimonial-panel .testimonial--body p {
        font-size: 19px;
        line-height: 1.65;
    }
}


/* ============================================================================
   B11 — Derniers articles : cartes epurees
   Pourquoi : bordure + ombre + coins arrondis + image arrondie A L'INTERIEUR donnaient
   un effet « carte dans la carte » date. Image en pleine largeur de carte, date en
   petites capitales, lien « Lire l'article » mieux visible.
   ============================================================================ */

#blog .mrc-blog-grid-col {
    margin: 12px 0;
}

/* margin-bottom: 0 corrige le « grand vide en bas de carte » de l'habillage d'origine : le theme
   donne a la carte height: 100% ET une marge basse de 50 px ; la colonne compte cette
   marge dans sa hauteur, puis la carte s'etire a 100 % de la colonne -> 50 px de vide. */
#blog .mrc-blog-grid-col .blog-entry {
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
    border: 1px solid var(--b-filet);
    border-radius: 4px;
    box-shadow: none;
}

/* Image collee aux bords de la carte. Hauteur 200 px inchangee (fixee par le theme) :
   aucune image ne change de taille au chargement. */
#blog .mrc-blog-grid-col .entry--img {
    margin: 0;
    border-radius: 0;
}

#blog .mrc-blog-grid-col .entry--img img {
    border-radius: 0;
}

/* Le voile gris + icone « chaine » au survol de l'image faisait gadget ; l'image reste
   cliquable (son propre lien), seul ce voile en double est masque. */
#blog .blog-entry .entry--overlay {
    display: none;
}

/* Le theme zoomait l'image a 110 % au survol, sans tenir compte de la reduction des
   animations : zoom coupe ici, remplace par un zoom leger en fin de section (si autorise). */
#blog .blog-entry .entry--img:hover img {
    transform: none;
}

/* Contour de focus (SOCLE) de l'image-lien : la carte rogne ce qui depasse
   (overflow: hidden), on dessine donc le contour A L'INTERIEUR de l'image. */
#blog .blog-entry .entry--img a:focus-visible {
    display: block;
    outline-offset: -3px;
}

/* Date : petites capitales dore fonce (6.32:1) au lieu de l'italique gris. */
#blog .blog-entry .entry--meta {
    margin: 0 0 8px;
    padding: 20px 22px 0;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--b-dore-texte);
}

#blog .blog-entry .entry--title {
    margin-bottom: 12px;
    padding: 0 22px;
}

/* text-wrap: balance : lignes de longueur voisine, donc plus de « ? » seul sur la
   derniere ligne (« Garde a vue : quels sont vos droits » / « ? » sur telephone).
   Ignore sans danger par les navigateurs qui ne le connaissent pas. */
#blog .blog-entry .entry--title h3 {
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.4;
    text-wrap: balance;
}

#blog .blog-entry .entry--title h3 a {
    color: var(--b-titre);
}

#blog .blog-entry .entry--title h3 a:hover {
    color: var(--b-dore-texte);
}

/* Resume + lien : le lien est pousse en bas de carte (margin-top: auto), pour que les
   trois liens soient alignes sur ordinateur quelle que soit la longueur du resume. */
#blog .blog-entry .entry--more {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0 22px 24px;
}

#blog .blog-entry .entry--more p {
    margin-bottom: 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #4f4f4f;
}

#blog .blog-entry .entry--more a {
    position: relative;
    align-self: flex-start;
    margin-top: auto;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--b-dore-texte);
}

/* Zone de toucher agrandie SANS rien deplacer : le lien ne mesure que 13 px de haut
   (interligne du theme), petit pour le pouce. Ce rectangle invisible deborde de 14 px en
   haut et en bas (41 px au total) ; rien d'autre n'est cliquable a cet endroit. */
#blog .blog-entry .entry--more a:after {
    content: "";
    position: absolute;
    top: -14px;
    bottom: -14px;
    left: -6px;
    right: -6px;
}

#blog .blog-entry .entry--more a:hover {
    color: var(--b-titre);
}

/* Au survol (souris), la carte se detache par une ombre : signale qu'elle est cliquable. */
#blog .mrc-blog-grid-col .blog-entry:hover {
    box-shadow: 0 12px 28px rgba(39, 39, 39, .08);
}

/* Petits mouvements au survol, seulement si les animations sont autorisees : zoom tres
   leger de l'image (104 % au lieu des 110 % du theme) et fleche du lien qui glisse de 4 px. */
@media (prefers-reduced-motion: no-preference) {
    #blog .blog-entry .entry--img img {
        transition: transform .4s ease-out;
    }

    #blog .blog-entry .entry--img:hover img {
        transform: scale(1.04);
    }

    #blog .blog-entry .entry--more a .fa {
        transition: transform .2s ease-out;
    }

    #blog .blog-entry .entry--more a:hover .fa {
        transform: translateX(4px);
    }
}