/* ===========================================================================
   SOCLE PUBLIC PETITPOUSS
   Charte unifiée du site vitrine, alignée sur le design du back-office.

   Pourquoi ce fichier, et pourquoi il est chargé en dernier
   ---------------------------------------------------------
   Le thème public est une base commerciale dont les composants (.btn,
   .section__title, .wcu-card, .counter-card, .service-card, .feature-card,
   .blog__post-item-five, .testimonial-card3) sont réutilisés par une trentaine
   de vues. Réécrire ces vues serait long et risqué. On redonne donc l'apparence
   du design maison à ces classes, exactement comme la section 13 de
   custom-mea-admin.css le fait pour le back-office.

   Ce fichier est appelé en tout dernier dans le <head>, après style.css,
   custom-mea.css et le bloc <style> de master.blade.php. À spécificité égale,
   il gagne donc toujours. C'est ce qui permet d'en corriger les contradictions
   sans ajouter de !important partout.

   Les pages déjà écrites à la main (dons, programmes, appels d'offres, contact,
   rendez-vous) n'utilisent aucune de ces classes : elles puisent dans leurs
   propres jeux pp-* et dao-*, et ne sont donc jamais concernées.

   Ne pas confondre avec custom-mea.css, qui ne fait que repeindre les variables
   du thème. Ce fichier-ci ajoute le relief, les arrondis et la typographie.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Références de la charte
   --------------------------------------------------------------------------- */
:root {
    /* Or : trois teintes pour les dégradés, une pour le texte sur fond clair */
    --ppf-gold: #D4A800;
    --ppf-gold-light: #F7D95C;
    --ppf-gold-mid: #E5BE24;
    --ppf-gold-deep: #CBA600;
    --ppf-gold-ink: #6E5600;     /* même teinte que --pp-gold-ink du master, 7,0:1 */

    /* Accents secondaires, assombris pour rester lisibles en texte */
    --ppf-green: #00A650;
    --ppf-green-ink: #07703A;     /* 6,2:1 sur blanc */
    --ppf-orange: #FF8200;
    --ppf-orange-ink: #B25600;    /* 5,0:1 sur blanc */

    /* Gris : trois rangs de lecture */
    --ppf-ink: #1A1D20;
    --ppf-ink-soft: #3A4150;      /* 10,2:1 sur blanc, couleur des paragraphes */
    --ppf-ink-muted: #56606E;     /* 6,8:1 sur blanc, légendes et métadonnées */

    /* Surfaces */
    --ppf-white: #FFFFFF;
    --ppf-surface: #F7F9FB;
    --ppf-line: #E4E8EE;
    --ppf-line-soft: #F0F3F7;

    /* Arrondis : les mêmes que les panneaux d'administration */
    --ppf-r-panel: 14px;
    --ppf-r-control: 10px;
    --ppf-r-chip: 9px;

    /* Ombres : trois couches, un reflet haut, une portée basse diffuse */
    --ppf-shadow-panel:
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        0 18px 34px -26px rgba(26, 29, 32, 0.55),
        0 2px 6px rgba(26, 29, 32, 0.05);
    --ppf-shadow-lift:
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        0 26px 44px -26px rgba(26, 29, 32, 0.42),
        0 4px 10px rgba(26, 29, 32, 0.07);
    /* Relief d'un bouton : reflet en haut, ombre courte en bas, puis une
       portée colorée qui reprend le doré. Sans cette dernière couche, l'ombre
       se confond avec le fond et le bouton paraît plat. */
    --ppf-shadow-gold:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.14),
        0 5px 12px -5px rgba(203, 166, 0, 0.85),
        0 2px 4px rgba(26, 29, 32, 0.10);
    /* Au survol, le disque anthracite a recouvert le doré : l'ombre prend donc
       la teinte de l'encre, et s'élargit pour accompagner l'élévation. */
    --ppf-shadow-gold-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 14px 26px -12px rgba(26, 29, 32, 0.55),
        0 4px 10px -4px rgba(26, 29, 32, 0.20);

    /* Le dégradé doré des boutons, repris à l'identique du back-office */
    --ppf-gold-grad: linear-gradient(150deg, #F7D95C 0%, #E5BE24 55%, #CBA600 100%);
}

/* ---------------------------------------------------------------------------
   1. Titres de section : l'eyebrow de la charte

   Le thème affiche le sur-titre en capitales dorées, puis un titre de 48 px
   sans autre marque. On reprend la signature du back-office : un filet doré
   de 26 px devant le sur-titre, et un titre resserré en gris foncé.

   Le filet est posé en ::before inline et non en absolu : de cette manière il
   suit le texte que le bloc soit aligné à gauche (accueil, à propos) ou centré
   par la colonne parente (partenaires, portail, rapports), sans avoir à
   deviner l'alignement. Un élément en position absolue se serait retrouvé
   collé au bord du conteneur, loin du texte centré.
   --------------------------------------------------------------------------- */
.section__title .sub-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    color: var(--ppf-gold-ink);
}

.section__title .sub-title::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 3px;
    margin-right: 10px;
    margin-top: -3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ppf-gold-light), var(--ppf-gold));
}

.section__title .title {
    color: var(--ppf-ink);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Paragraphe d'accompagnement d'un titre */
.section__title p {
    color: var(--ppf-ink-soft);
}

/* Le bandeau « Notre équipe » de l'accueil est repeint en doré par le master,
   mais le thème force les sur-titres en blanc dès que la section porte
   .gray-bg : blanc sur or, 2,23:1, illisible. On rétablit le texte sombre, et
   l'on passe le filet en anthracite puisqu'un filet doré disparaîtrait sur
   l'or. La section garde son fond doré, ce qui est voulu. */
.lawyer-area-3 .section__title .sub-title,
.lawyer-area-3 .section__title .sub-title * {
    color: var(--ppf-ink) !important;
}

.lawyer-area-3 .section__title .sub-title::before {
    background: var(--ppf-ink);
}

.lawyer-area-3 .section__title p {
    color: rgba(26, 29, 32, 0.85);
}

/* Bandeau d'accueil : le sur-titre du carrousel n'est pas dans un
   .section__title, il porte donc sa propre règle. Seul le filet est ajouté,
   la taille et la couleur restent celles du hero. */
.hero-style1 .sub-title::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 3px;
    margin-right: 10px;
    margin-top: -3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ppf-gold-light), var(--ppf-gold));
}

/* ---------------------------------------------------------------------------
   2. Boutons

   Le thème pose un aplat doré sans relief et un texte blanc (2,2:1). Le bloc
   <style> de master.blade.php a déjà corrigé les couleurs : au repos le texte
   est gris foncé, au survol un disque anthracite monte et le texte passe au
   blanc. Ce mouvement est bon, on le conserve.

   Ce que l'on ajoute : le dégradé doré du back-office, le relief, et une
   élévation réelle au survol, pour que le bouton réponde au curseur.

   PIÈGE À CONNAÎTRE : .btn:not(...) pèse 0,4,0 en spécificité et bat les
   règles de survol du master (0,2,0). Il faut donc redéclarer explicitement
   l'état de survol plus bas, avec la même sélection. Sans cela le disque
   anthracite monte sous un libellé resté anthracite : contraste 1,00:1, le
   texte disparaît. C'était le défaut constaté sur les .btn-three du
   carrousel d'accueil.

   Deux précautions :
   - .btn-two et .btn-seven portent un fond blanc et un texte doré dans le
     thème. Sans exclusion, la règle .btn les repeindrait en doré.
   - Le texte du bouton n'est pas dans l'élément : il est fabriqué par
     .btn-text::before avec content: attr(data-text). La couleur se transmet
     par héritage, forcer celle du .btn suffit.
   --------------------------------------------------------------------------- */
.btn:not(.btn-two):not(.btn-seven):not(.btn-four) {
    background: var(--ppf-gold-grad);
    color: var(--ppf-ink) !important;
    border-radius: var(--ppf-r-control);
    box-shadow: var(--ppf-shadow-gold);
    font-weight: 700;
}

/* Le survol, avec la même sélection que la règle ci-dessus pour la dépasser.
   Le disque anthracite du master couvre alors le bouton : le libellé doit
   passer au blanc. Le bouton se soulève de 2 px et son ombre s'élargit, ce
   qui donne le relief que l'aplat doré seul ne donnait pas. */
.btn:not(.btn-two):not(.btn-seven):not(.btn-four):hover,
.btn:not(.btn-two):not(.btn-seven):not(.btn-four):focus,
.btn:not(.btn-two):not(.btn-seven):not(.btn-four):active {
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: var(--ppf-shadow-gold-hover);
}

/* Au clic, le bouton redescend : c'est l'enfoncement. */
.btn:not(.btn-two):not(.btn-seven):not(.btn-four):active {
    transform: translateY(0);
    box-shadow:
        0 6px 12px -8px rgba(26, 29, 32, 0.55),
        0 1px 3px rgba(26, 29, 32, 0.16);
}

/* Variante quatre : le bouton fantôme du back-office. Le bloc du master lui
   donne un texte blanc, pensé pour son fond anthracite d'origine ; sur le fond
   clair retenu ici, le texte doit être gris ardoise. La règle ne couvre que le
   repos : au survol, le disque anthracite du master reprend la main et le
   texte repasse au blanc, ce qui reste lisible. */
.btn-four {
    background: var(--ppf-white);
    border: 1px solid var(--ppf-line);
    border-radius: var(--ppf-r-control);
    color: var(--ppf-ink-soft) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        0 2px 6px rgba(26, 29, 32, 0.06);
}

.btn-four:hover,
.btn-four:focus {
    border-color: rgba(212, 168, 0, 0.55);
}

/* Variante cinq : elle sert au bouton d'abonnement du pied de page. Le thème
   lui donnait un fond gris clair et un texte doré ; sur le fond anthracite du
   pied de page, ce doré foncé tombait à 2,4:1, sous le seuil de lisibilité.
   Elle rejoint donc les boutons dorés ci-dessus, avec un libellé sombre au
   repos et blanc au survol. Le master lui imposait par ailleurs un texte
   anthracite au survol, ce qui donnait de l'anthracite sur le disque
   anthracite : la règle de survol ci-dessus corrige ce cas comme les autres. */

/* ---------------------------------------------------------------------------
   2.1 Sélecteur de langue : deux segments soudés, sans recouvrement

   C'est le seul .btn-group de tout le site public, sur la page « Mot ». Deux
   défauts s'y cumulaient.

   1. Bootstrap pose sur le second bouton du groupe
      margin-left: calc(var(--bs-border-width) * -1), soit -1 px. Cette marge
      négative sert à souder deux bordures de 1 px l'une contre l'autre ; or
      le thème a mis border-width: 0 sur .btn. Elle s'appliquait donc alors
      qu'il n'y avait aucune bordure à recouvrir, et le bouton EN empiétait de
      1 px sur le bouton FR. Mesure avant correction : bord gauche de EN à
      531,5 px pour bord droit de FR à 532,5 px.
   2. Les règles de la section 2 donnent border-radius: 10 px à chaque bouton,
      ce qui écrase les rayons internes que Bootstrap réserve aux éléments
      intérieurs d'un groupe. Les deux segments gardaient donc leurs quatre
      coins arrondis, et l'arrondi de EN glissait sur celui de FR : un double
      arc bien visible au raccord.

   La correction traite la cause et non le symptôme : la marge est annulée, les
   segments sont mis à angle droit, et c'est le conteneur qui arrondit et rogne
   l'ensemble. Masquer le raccord (overflow sur le groupe, z-index bricolé,
   décalage au translate) aurait laissé la boîte de EN décalée de -1 px, donc
   le recouvrement intact.

   Les sélecteurs d'état reprennent les exclusions de la section 2 et passent
   après elle : ils l'emportent sans recourir à !important.
   --------------------------------------------------------------------------- */

/* Le conteneur porte le relief et l'arrondi ; il rogne les deux segments.
   La pastille est calibrée pour une commande de langue, pas pour un appel à
   l'action seul : les 180 px de large et les 21 px de haut du thème sont
   ramenés à une taille de segment. */
.btn-group {
    display: inline-flex;
    overflow: hidden;
    border-radius: var(--ppf-r-control);
    vertical-align: middle;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 6px 14px -8px rgba(26, 29, 32, 0.55),
        0 2px 4px rgba(26, 29, 32, 0.10);
}

.btn-group > .btn:not(.btn-two):not(.btn-seven):not(.btn-four) {
    position: relative;
    margin: 0;
    min-width: 116px;
    padding: 12px 28px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    transform: none;
}

/* Le disque anthracite du thème monte sous le libellé à chaque survol : dans
   un groupe, ce mouvement désolidarise le segment de son voisin. On le
   neutralise et le survol se signale par la teinte seule. */
.btn-group > .btn::before {
    display: none;
}

/* Le segment choisi garde le doré plein de la charte. */
.btn-group > .btn-dark:not(.btn-two):not(.btn-seven):not(.btn-four) {
    background: var(--ppf-gold-grad);
    color: var(--ppf-ink) !important;
}

/* Le segment au repos reprend le fantôme clair du back-office. */
.btn-group > .btn-outline-dark:not(.btn-two):not(.btn-seven):not(.btn-four) {
    background: var(--ppf-white);
    color: var(--ppf-ink-soft) !important;
}

/* Survol et focus : même sélection que la règle de survol de la section 2,
   plus une classe, pour la dépasser. Sans cela le libellé passerait au blanc
   alors qu'aucun disque anthracite ne monte plus. */
.btn-group > .btn:not(.btn-two):not(.btn-seven):not(.btn-four):hover,
.btn-group > .btn:not(.btn-two):not(.btn-seven):not(.btn-four):focus,
.btn-group > .btn:not(.btn-two):not(.btn-seven):not(.btn-four):active {
    color: var(--ppf-ink) !important;
    transform: none;
    box-shadow: none;
}

.btn-group > .btn-dark:not(.btn-two):not(.btn-seven):not(.btn-four):hover,
.btn-group > .btn-dark:not(.btn-two):not(.btn-seven):not(.btn-four):focus {
    background: linear-gradient(150deg, #FBE482 0%, #EDC838 55%, #D4A800 100%);
}

.btn-group > .btn-outline-dark:not(.btn-two):not(.btn-seven):not(.btn-four):hover,
.btn-group > .btn-outline-dark:not(.btn-two):not(.btn-seven):not(.btn-four):focus {
    background: var(--ppf-surface);
    color: var(--ppf-ink) !important;
}

/* Le filet de séparation est posé en ombre intérieure pour ne pas épaissir le
   second segment d'un pixel : les deux gardent exactement la même largeur. Il
   est déclaré en dernier pour rester visible quel que soit le segment actif,
   la classe changeant au clic. */
.btn-group > .btn:not(.btn-two):not(.btn-seven):not(.btn-four) + .btn {
    box-shadow: inset 1px 0 0 rgba(26, 29, 32, 0.16);
}

/* ---------------------------------------------------------------------------
   3. Cartes de contenu

   Le thème mélange trois arrondis (5 px pour les services, 10 px pour les
   articles, 40 px par coin pour les compteurs) et trois ombres différentes.
   Tout est ramené au panneau du back-office : 14 px, filet #E4E8EE, ombre en
   trois couches.

   Les fonds teintés par variante sont rétablis : custom-mea.css définit bien
   quatre teintes pour .wcu-card-color1 à 4, mais une règle plus bas dans le
   même fichier les repeint toutes en blanc avec !important, ce qui annulait
   l'intention. La préférence du client est explicite sur ce point : des
   contenants colorés, pas des contenants blancs.
   --------------------------------------------------------------------------- */
.wcu-card,
.service-card,
.feature-card,
.blog__post-item-five,
.testimonial-card3 {
    border-radius: var(--ppf-r-panel);
    border: 1px solid var(--ppf-line);
    box-shadow: var(--ppf-shadow-panel);
}

/* --- Cartes « axes d'intervention » --- */
.wcu-card {
    padding: 32px 28px;
    border-left-width: 4px;
    border-left-style: solid;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wcu-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ppf-shadow-lift);
}

.wcu-card.wcu-card-color1 {
    background: linear-gradient(165deg, #FFFDF2 0%, #FFFFFF 62%) !important;
    border-left-color: var(--ppf-gold);
}

.wcu-card.wcu-card-color2 {
    background: linear-gradient(165deg, #F2FBF6 0%, #FFFFFF 62%) !important;
    border-left-color: var(--ppf-green);
}

.wcu-card.wcu-card-color3 {
    background: linear-gradient(165deg, #FFF7F0 0%, #FFFFFF 62%) !important;
    border-left-color: var(--ppf-orange);
}

.wcu-card.wcu-card-color4 {
    background: linear-gradient(165deg, #F6F7F9 0%, #FFFFFF 62%) !important;
    border-left-color: var(--ppf-ink);
}

/* Pastille de l'icône : un carré arrondi teinté, comme les tuiles du
   back-office, à la place de l'icône nue du thème. */
.wcu-card .box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
    border-radius: var(--ppf-r-panel);
    background: rgba(212, 168, 0, 0.10);
    box-shadow: inset 0 0 0 1px rgba(212, 168, 0, 0.22);
}

.wcu-card-color2 .box-icon {
    background: rgba(0, 166, 80, 0.10);
    box-shadow: inset 0 0 0 1px rgba(0, 166, 80, 0.22);
}

.wcu-card-color3 .box-icon {
    background: rgba(255, 130, 0, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 130, 0, 0.22);
}

.wcu-card-color4 .box-icon {
    background: rgba(26, 29, 32, 0.07);
    box-shadow: inset 0 0 0 1px rgba(26, 29, 32, 0.16);
}

.wcu-card .box-title {
    color: var(--ppf-ink) !important;
    font-weight: 700;
    margin-bottom: 10px;
}

.wcu-card .box-text {
    color: var(--ppf-ink-soft) !important;
    line-height: 1.75;
}

/* --- Cartes services et partenaires --- */
.service-card {
    overflow: hidden;
    background: var(--ppf-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ppf-shadow-lift);
}

.service-card .box-icon:after {
    background: rgba(212, 168, 0, 0.12);
}

.service-card .box-title {
    color: var(--ppf-ink);
    font-size: 20px;
    letter-spacing: -0.01em;
}

.service-card .box-text {
    color: var(--ppf-ink-soft);
}

/* --- Cartes de partenaires ---

   Leur texte de présentation est de longueur variable : sans colonne, les
   étiquettes de bas de carte dansaient d'une carte à l'autre, en escalier. La
   carte devient une colonne et le pied est poussé en bas, ce qui aligne les
   pastilles sur toute la rangée.

   .service-card_details n'existe que dans la vue partenaires ; :has() borne la
   règle à ces cartes, les autres vues gardent leur mise en page d'origine. */
.service-card:has(> .service-card_details) {
    display: flex;
    flex-direction: column;
}

.service-card_details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.service-card_details > .mt-3 {
    margin-top: auto !important;
    padding-top: 18px;
}

/* --- Cartes fonctionnalités --- */
.feature-card {
    background: var(--ppf-white) !important;
    padding: 32px 26px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ppf-shadow-lift);
}

.feature-card .box-title {
    color: var(--ppf-ink) !important;
}

.feature-card .box-text {
    color: var(--ppf-ink-soft) !important;
}

/* --- Cartes d'actualités --- */
.blog__post-item-five {
    overflow: hidden;
    background: var(--ppf-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog__post-item-five:hover {
    transform: translateY(-6px);
    box-shadow: var(--ppf-shadow-lift);
}

.blog__post-item-five .blog__post-thumb img {
    height: 240px;
    object-fit: cover;
}

/* Les métadonnées d'article en petites capitales espacées, comme les en-têtes
   de tableau du back-office. */
.blog__post-item-five .blog__post-meta .list-wrap li a,
.blog__post-item-five .blog__post-meta .list-wrap li {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ppf-ink-muted);
}

/* --- Témoignages --- */

/* Le thème met #211D1D sur un fond de section #1A1D20 : deux noirs qui se
   touchent, la carte se voit à peine. On aligne la carte sur le fond et on
   demande le relief à la bordure et à l'ombre, comme les panneaux sombres. */
.testimonial-card3 {
    background: #1A1D20;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ppf-r-panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 34px -26px rgba(0, 0, 0, 0.80);
}

.testimonial-card3 .testi-text,
.testimonial-card3 p {
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.8;
}

/* ---------------------------------------------------------------------------
   4. Chiffres d'impact

   Le thème garde son arrondi asymétrique de 40 px par coin, qui jure avec le
   reste du site. On le remplace par le panneau de 14 px, et le nombre prend la
   couleur de sa variante au lieu du noir pur.
   --------------------------------------------------------------------------- */
.counter-card {
    border-radius: var(--ppf-r-panel);
    border: 1px solid var(--ppf-line);
    box-shadow: var(--ppf-shadow-panel);
    padding: 34px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.counter-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ppf-shadow-lift);
}

.counter-card.counter-card-color1 {
    background: linear-gradient(165deg, #FFFDF2 0%, #FFFFFF 70%) !important;
    border-top: 3px solid var(--ppf-gold);
}

.counter-card.counter-card-color2 {
    background: linear-gradient(165deg, #F2FBF6 0%, #FFFFFF 70%) !important;
    border-top: 3px solid var(--ppf-green);
}

.counter-card.counter-card-color3 {
    background: linear-gradient(165deg, #FFF7F0 0%, #FFFFFF 70%) !important;
    border-top: 3px solid var(--ppf-orange);
}

.counter-card .counter-card_title {
    color: var(--ppf-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.counter-card.counter-card-color1 .counter-card_title {
    color: var(--ppf-gold-ink) !important;
}

.counter-card.counter-card-color2 .counter-card_title {
    color: var(--ppf-green-ink) !important;
}

.counter-card.counter-card-color3 .counter-card_title {
    color: var(--ppf-orange-ink) !important;
}

.counter-card .counter-card_subtitle {
    color: var(--ppf-ink) !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.counter-card .counter-card_text {
    color: var(--ppf-ink-soft) !important;
    font-size: 14.5px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   5. Listes à puces

   style.css déclare deux fois .checklist-wrap .list-wrap li : la seconde ajoute
   une puce Font Awesome en ::before, alors que le HTML produit par
   l'administration contient déjà une icône <i class="icon">. Les deux se
   superposaient, d'où deux coches collées devant chaque ligne. On supprime la
   puce fabriquée et l'on garde l'icône, dans le doré de lecture.
   --------------------------------------------------------------------------- */
.checklist-wrap .list-wrap li {
    color: var(--ppf-ink-soft);
    font-weight: 600;
}

.checklist-wrap .list-wrap li::before {
    content: none;
}

.checklist-wrap .list-wrap li .icon {
    color: var(--ppf-gold-ink);
}

/* ---------------------------------------------------------------------------
   6. Champs de formulaire

   Les pages contact et rendez-vous ont leurs propres feuilles (contact-niger.css
   et appointment-niger.css) : elles ne sont pas concernées, car leurs champs
   portent des classes dédiées. Ne restent ici que les formulaires génériques
   du thème, recherche comprise.
   --------------------------------------------------------------------------- */
.form-control,
.form-select,
select.form-control,
textarea.form-control {
    border: 1px solid var(--ppf-line);
    border-radius: var(--ppf-r-control);
    background-color: #FBFCFD;
    color: var(--ppf-ink);
    font-size: 15px;
    padding: 12px 15px;
    box-shadow: inset 0 1px 2px rgba(26, 29, 32, 0.04);
}

.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--ppf-gold);
    background-color: var(--ppf-white);
    box-shadow:
        inset 0 1px 2px rgba(26, 29, 32, 0.04),
        0 0 0 3px rgba(212, 168, 0, 0.18);
    color: var(--ppf-ink);
}

.form-control::placeholder {
    color: #8A93A0;
}

/* Le formulaire d'abonnement du pied de page
   ---------------------------------------------------------------------------
   Le thème place le bouton en position absolue à droite du champ et réserve
   130 px de marge interne à cet effet. Dans une colonne de pied de page, cette
   réserve mange la zone de frappe : on ne voit plus ce que l'on saisit, et le
   bouton rogne son propre libellé. On empile donc proprement, le champ en
   pleine largeur et le bouton en dessous.

   Le bouton garde position: relative et non static : en static, le disque
   anthracite de son ::before se positionnerait par rapport au formulaire au
   lieu du bouton. */
.footer__newsletter-form input {
    width: 100%;
    padding: 0 18px 0 62px;
    border-radius: var(--ppf-r-control);
}

.footer__newsletter-form .btn {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    padding: 16px 20px;
}

/* ---------------------------------------------------------------------------
   7. Contenu éditorial

   Le corps des articles et des descriptions. Le thème hérite de #000000 sur
   les paragraphes ; on préfère le gris ardoise, qui laisse aux titres leur
   rôle de repère.
   --------------------------------------------------------------------------- */
.section__title p,
.blog__post-item-five p,
.service__details-content p,
.service__details-content li {
    color: var(--ppf-ink-soft);
}

/* Les liens du corps de texte, dorés et soulignés au survol */
.service__details-content a {
    color: var(--ppf-gold-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.service__details-content a:hover {
    color: var(--ppf-ink);
}

/* Citations : filet doré au lieu du vert, fond neutre */
.service__details-content blockquote {
    border-left: 4px solid var(--ppf-gold);
    background: var(--ppf-surface);
    color: var(--ppf-ink-soft);
    border-radius: 0 var(--ppf-r-control) var(--ppf-r-control) 0;
    padding: 18px 22px;
}

/* ---------------------------------------------------------------------------
   8. Pied de page

   Le fond et les textes sont déjà traités par custom-mea.css. On ajoute
   seulement le repère doré au-dessus des titres de colonnes, pour que le pied
   de page parle la même langue que les sections.
   --------------------------------------------------------------------------- */
.footer__widget-title {
    position: relative;
    padding-bottom: 14px;
}

.footer__widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ppf-gold-light), var(--ppf-gold));
}

/* Les coordonnées du pied de page. Une adresse de courriel est un mot sans
   espace : dans une colonne étroite elle débordait de son cadre et se faisait
   couper net. On autorise la césure, et l'on rend au media-body flex le droit
   de descendre sous la largeur de son contenu, faute de quoi le navigateur
   refuse de replier le texte. */
.footer__area .footer-contact .media-body {
    min-width: 0;
}

.footer__area .footer-contact_link,
.footer__area .footer-contact_text {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   9. Le relief de l'en-tete

   Mesure de depart : box-shadow valait « none » sur <header>, sur
   .tg-header__top, sur #sticky-header et sur .tgmenu__wrap. L'en-tete
   flottait donc a plat au-dessus du contenu, sans epaisseur. On lui applique
   la meme grammaire que le reste du site : degrade dore, reflet clair en
   haut, liseré profond en bas, portee diffuse.
   --------------------------------------------------------------------------- */

/* Le bandeau de contact : un aplat jaune devient un bandeau en degrade. */
.tg-header__top {
    background: linear-gradient(100deg, #F7D95C 0%, #E5BE24 46%, #D4A800 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -2px 0 rgba(168, 131, 0, 0.40),
        0 2px 7px rgba(110, 86, 0, 0.18);
}

/* La barre de navigation : fond franc et filet dores en bas. On declare
   background-color et background-image separement, jamais le raccourci
   background : sinon le filet disparait des que la classe .sticky-menu
   applique son propre fond.

   La specificite compte ici. .tg-header__area-four.sticky-menu (0,2,0) pose
   un background en raccourci et remettrait background-image a « none ». Un
   selecteur par identifiant (1,0,0) reprend la main sur les deux proprietes. */
#sticky-header {
    background-color: #FFFFFF;
    background-image: linear-gradient(90deg,
        rgba(229, 190, 36, 0) 0%,
        #E5BE24 18%,
        #CBA600 50%,
        #E5BE24 82%,
        rgba(229, 190, 36, 0) 100%);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 2px;
    box-shadow:
        0 1px 0 rgba(26, 29, 32, 0.05),
        0 12px 32px -20px rgba(26, 29, 32, 0.32);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Une fois collee en haut, la barre passe en anthracite : le filet dore et
   l'ombre doivent alors etre pensees pour un fond sombre, pas pour du blanc. */
#sticky-header.sticky-menu {
    background-color: #1A1D20;
    box-shadow:
        0 1px 0 rgba(247, 217, 92, 0.30),
        0 16px 36px -14px rgba(0, 0, 0, 0.62);
}

/* L'exception de l'accueil. .transparent-header (style.css, 11. Header) pose
   le meme #sticky-header en position absolute par-dessus la photo du hero, et
   le theme passe alors tout le menu en blanc (color: white sur les liens de
   .tg-header__area-four). Le fond blanc opaque pose ci-dessus y rendait donc
   le menu invisible : du blanc sur du blanc. On rend la barre transparente,
   mais seulement tant qu'elle n'est pas collee. Des que .sticky-menu tombe,
   l'anthracite doit reprendre la main pour rester lisible sur le contenu qui
   defile : d'ou le :not(.sticky-menu), qui porte le selecteur a 1,2,0 sans
   jamais entrer en concurrence avec #sticky-header.sticky-menu.
   background-image est neutralise aussi : le filet dore est concu pour un
   fond clair, sur une photo il ne se lit pas. */
.transparent-header #sticky-header:not(.sticky-menu) {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

/* Le voile de lisibilite. L'ombre portee sur les mots ne suffit pas : mesure
   sur les trois visuels du slider, le contraste du texte blanc vaut 3,68:1,
   1,98:1 et 1,62:1, alors que WCAG demande 4,5:1 et ne tient aucun compte du
   text-shadow. Le defaut est structurel : les deglacis du theme assombrissent
   la gauche du slide et laissent la droite claire, si bien que « Contact » se
   retrouvait a 2,08:1 quand « Accueil » tenait 13:1.
   On pose donc un degrade sombre sur la seule bande du header. Calibration :
   le pire visuel est rgb(196, 183, 154). Un voile a 0,42 le ramene a une
   luminance de 0,15, soit 5,2:1 pour du blanc. A 0,30 on plafonnait a 3,9:1,
   insuffisant : le seuil est donc tenu au-dessus de 0,40 sur toute la hauteur
   du texte.
   Le z-index negatif est indispensable : #sticky-header est en position
   static, et un enfant positionne serait peint au-dessus de lui, donc
   par-dessus le menu. */
.transparent-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 176px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(22, 26, 29, 0.56) 0%,
        rgba(22, 26, 29, 0.48) 46%,
        rgba(22, 26, 29, 0.22) 76%,
        rgba(22, 26, 29, 0) 100%);
}

/* La lisibilite du menu par-dessus la photo. Mesure sur la bande des 108 px
   du haut de l'accueil : le contraste du texte blanc vaut 3,66:1 sur un visuel
   du slider, mais 1,96:1 et 1,61:1 sur les deux autres, tres loin des 4,5:1
   attendus. Le voile ci-dessus traite le fond ; cette ombre traite le mot
   lui-meme, pour les zones ou le degrade s'efface. Le selecteur vise le
   premier niveau seulement (> a) : les entrees du sous-menu sont foncees sur
   fond blanc et n'ont rien a gagner a recevoir un halo sombre. */
.transparent-header .tgmenu__navbar-wrap > ul > li > a {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.55),
        0 0 14px rgba(0, 0, 0, 0.38);
}

/* Le survol des entrees de menu : un filet dore qui se deploie sous le mot.
   Il est pose en background et non en ::after, parce que le theme se sert
   deja de ::after sur les entrees qui ont un sous-menu pour y dessiner la
   fleche \f107 : un pseudo-element de plus l'aurait effacee. */
.tgmenu__navbar-wrap > ul > li > a {
    background-image: linear-gradient(90deg, #F7D95C, #CBA600);
    background-repeat: no-repeat;
    background-position: center bottom 24px;
    background-size: 0 2px;
    transition: background-size 0.28s ease, color 0.28s ease;
}

.tgmenu__navbar-wrap > ul > li:hover > a,
.tgmenu__navbar-wrap > ul > li.active > a {
    background-size: 22px 2px;
}

/* ---------------------------------------------------------------------------
   10. Accessibilité

   Un anneau doré sur tous les éléments atteignables au clavier. Le thème n'en
   prévoit aucun, ce qui rend la navigation au clavier invisible.
   --------------------------------------------------------------------------- */
.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(212, 168, 0, 0.55);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   11. Petits écrans

   Les arrondis et les rembourrages restent identiques, mais les éléments
   décoratifs trop larges sont ramenés à une taille raisonnable.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .wcu-card,
    .feature-card {
        padding: 26px 22px;
    }

    .counter-card {
        padding: 28px 22px;
    }

    .section__title .sub-title::before {
        width: 20px;
        margin-right: 8px;
    }
}