/*
Theme Name: Fred Marketing Web
Theme URI: https://fredmarketingweb.com
Description: GeneratePress child theme for Fred Marketing Web. Holds all custom styles and code so theme updates never overwrite customizations.
Author: Fred Marketing Web
Author URI: https://fredmarketingweb.com
Template: generatepress
Version: 1.0.94
License: GNU General Public License v2 or later
Text Domain: fmw-child
*/

/* ==========================================================================
   Custom styles
   Migrated from Customizer "Additional CSS" so they live in version control.
   ========================================================================== */

/* --- Breadcrumb: align flush with content + cleaner subtle style --------- */
body.page .fred-breadcrumb,
.fred-breadcrumb {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px;
}

.fred-breadcrumb .rank-math-breadcrumb p {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fred-breadcrumb .separator {
    opacity: 0.5;
    margin: 0 4px;
}

.fred-breadcrumb .last {
    opacity: 0.7;
}

/* --- Services page eyebrow : VISIBLE ------------------------------------- */
/* (Ancienne regle qui masquait l'eyebrow precedant le H1 RETIREE : le nouveau
   hero a un eyebrow utile "SERVICES WEB, SEO ET PUBLICITE" que le client veut
   afficher. Il n'est plus redondant avec le fil d'Ariane.) */

/* --- Menu : retirer "SECTEURS" du menu PRINCIPAL (parent + sous-menu) ------ */
/* Strategie SEO : les pages secteurs restent publiees, indexees et maillees via
   le PIED DE PAGE (liens visibles) + liens contextuels. On les retire seulement
   de la nav du haut (l'item 3465 contient le sous-menu, donc tout part d'un coup,
   desktop ET mobile). Reversible ; l'item existe encore en base (supprimable via
   Apparence > Menus si on veut un menu 100% net). */
.main-navigation .menu-item-3465 { display: none !important; }

/* --- Reviews CTA button — force full-width so it centers under the grid --- */
.reviews-cta {
    max-width: none !important;
    width: 100%;
    text-align: center;
}

/* --- Phone number in header nav (desktop only) ----------------------------- */
.header-phone-item {
    list-style: none;
    display: flex;
    align-items: center;
}

.header-phone-item .header-phone-link {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--contrast, #000) !important;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.header-phone-item .header-phone-link:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .header-phone-item { display: none; }
}

/* ==========================================================================
   MOBILE MENU PANEL FIXES (v1.0.65)
   The open hamburger panel had two defects, both rooted in rules written for
   the HORIZONTAL desktop bar leaking into the VERTICAL mobile panel.
   ========================================================================== */
@media (max-width: 768px) {

    /* 1) Kill the current/hover underline inside the panel.
       design.css gives every nav link an ::after that grows to width:100% on
       the current/hover item. In the horizontal bar that is a short underline;
       in the vertical panel each link is full-width, so it rendered as a stray
       full-width YELLOW bar across the current item's row (e.g. under SERVICES
       when on a /services page), masquerading as a mis-coloured divider.
       Replace it with a clean inset left accent so wayfinding survives without
       the full-width bar (inset shadow = no layout shift). */
    .main-navigation .main-nav > ul > li > a::after {
        display: none !important;
    }
    .main-navigation.toggled .main-nav > ul > li[class*="current-menu"] > a {
        box-shadow: inset 5px 0 0 var(--yellow) !important;
    }

    /* 2) Restore the purple CONTACT call-to-action button.
       Every "purple button" rule in design.css targets li:last-child, but the
       real last item is .header-phone-item (the "819..." number), which is
       display:none on mobile. So the intended bottom CTA never rendered and
       CONTACT was just another plain row. Re-point it at the last VISIBLE item
       (CONTACT = :nth-last-child(2), since the hidden phone item is last).
       NOTE: if the phone item is ever removed from the menu, CONTACT becomes
       :last-child and design.css's existing rules style it instead -> still a
       button either way. */
    .main-navigation.toggled .main-nav > ul > li:nth-last-child(2) > a {
        background-color: var(--purple) !important;
        color: #fff !important;
        margin: 25px 20px 10px !important;
        border: 4px solid #000 !important;
        border-bottom: 4px solid #000 !important; /* beat the 2px row divider */
        box-shadow: 5px 5px 0 #000 !important;
        display: block !important;
        text-align: center !important;
    }
    .main-navigation.toggled .main-nav > ul > li:nth-last-child(2) > a:active {
        transform: translate(2px, 2px);
        box-shadow: 3px 3px 0 #000 !important;
    }

    /* 3) Wider panel (v1.0.66). design.css floated the panel with margin:15px on
       all sides, so it read as a small card with the 12px hard shadow jammed
       against the right edge. Pull the side margins in so it spans close to full
       width (a drawer, not a card), and shrink the shadow so it still shows
       without clipping past the viewport at that width. */
    .main-navigation.toggled .main-nav > ul {
        margin: 10px 8px 16px !important;
        box-shadow: 6px 6px 0 #000 !important;
    }
}

/* Tablet and small-desktop widths: the menu (now with Secteurs) plus the phone
   button no longer fits, so labels wrapped onto two lines and dropdown arrows
   dropped below their text. Keep every item on one line, tighten them, and
   hide the phone button until there is room for it (it stays available in the
   footer and the mobile sticky bar). */
@media (min-width: 769px) and (max-width: 1366px) {
    .main-navigation .main-nav ul li a {
        white-space: nowrap;
        font-size: 0.82rem;
        padding-left: 12px;
        padding-right: 12px;
    }
    .header-phone-item { display: none; }
}

/* --- Hero inline social proof (below CTA button) -------------------------- */
.hero-proof-line {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
    max-width: none !important;
    font-size: 0.875rem;
    text-align: left;
    opacity: 0.85;
    letter-spacing: 0.01em;
}

.hero-proof-line strong {
    font-weight: 700;
}

/* --- FAQ accordion: 96px matches the site-wide inter-section margin-top --- */
.faq-list {
    margin-bottom: 96px !important;
}

/* ==========================================================================
   SPACING NORMALIZATION (site-wide)
   Specificity (0,3,1) so these beat the "lobotomized owl" rules in Simple CSS
   ( body.page .entry-content > * + *  => (0,2,1) ) without relying on load order.
   ========================================================================== */

/* --- Breadcrumb (and the optional hidden "back to portfolio" link) sit tight
       to the hero. They are wayfinding chrome, not a content section, so they use
       a small gap, NOT the 96px inter-section distance. Consistent on every page. --- */
body.page .entry-content > .fred-breadcrumb + *,
body.page .entry-content > .back-to-portfolio + * {
    margin-top: clamp(16px, 2vw, 24px) !important;
}

/* --- Eyebrow / kicker → heading: ONE uniform gap everywhere (16px = --space-sm).
       GenerateBlocks zeroed the H2 margin in some blocks and the owl pushed it to
       32px in others; this locks every eyebrow+heading pair to the same distance.
       text-transform keeps every kicker uppercase (fixes "Ce qu'ils en disent"). --- */
body.page .entry-content .eyebrow {
    text-transform: uppercase;
}
body.page .entry-content .eyebrow + h1,
body.page .entry-content .eyebrow + h2,
body.page .entry-content .eyebrow + h3 {
    margin-top: 16px !important;
}

/* Inner-page heroes render the text column as flex with a 16px row-gap. Flex
   margins do NOT collapse, so a heading margin-top stacks on the row-gap and
   doubles the gap to 32px. Drop the margin inside heroes; the row-gap alone
   yields the same 16px the block-flow sections get from the margin. */
body.page .entry-content .hero-standard .eyebrow + h1,
body.page .entry-content .hero-standard .eyebrow + h2,
body.page .entry-content .hero-standard .eyebrow + h3 {
    margin-top: 0 !important;
}

/* --- Blog archive (/conseils/ + catégories) : grille de cartes ------------- */
body.blog .site-main,
body.archive .site-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
}
body.blog .site-main > *:not(article),
body.archive .site-main > *:not(article) {
    grid-column: 1 / -1;
}
body.blog article.post,
body.archive article.post {
    margin-bottom: 0 !important;
}
body.blog article.post .inside-article,
body.archive article.post .inside-article {
    border: 4px solid #000;
    background: #fff;
    box-shadow: 6px 6px 0 #000;
    padding: 0 0 1.25rem !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}
body.blog .post-image,
body.archive .post-image {
    order: -1;
    margin: 0 !important;
    border-bottom: 4px solid #000;
}
body.blog .post-image img,
body.archive .post-image img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    display: block;
    padding: 14px;
    box-sizing: border-box;
}
body.blog .entry-header,
body.archive .entry-header {
    padding: 1.1rem 1.25rem 0;
}
body.blog h2.entry-title,
body.archive h2.entry-title {
    font-size: 1.15rem !important;
    line-height: 1.35;
    margin: 0 0 0.35rem !important;
}
body.blog .entry-meta,
body.archive .entry-meta {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.65;
}
/* L'auteur n'a pas de nom public : « par » pendait dans le vide */
body.blog .byline,
body.archive .byline,
body.blog footer.entry-meta,
body.archive footer.entry-meta {
    display: none;
}
body.blog .entry-summary,
body.archive .entry-summary {
    padding: 0 1.25rem;
    font-size: 0.92rem;
}
body.blog .entry-summary p,
body.archive .entry-summary p {
    max-width: none;
    margin-top: 0.5rem;
}
body.blog .read-more,
body.archive .read-more {
    font-weight: 700;
}
@media (max-width: 1024px) {
    body.blog .site-main,
    body.archive .site-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    body.blog .site-main,
    body.archive .site-main { grid-template-columns: 1fr; }
}

/* --- Homepage service cards: un-crop the sticker illustrations ------------ */
/* The design intends a whole 200x200 sticker centered in the card window
   (see .service-card-img .wp-block-image img in Simple CSS), but the markup
   no longer wraps images in .wp-block-image, so the raw full-width image was
   being clipped by the 200px overflow-hidden window. Same look, working
   selector. */
.service-card-img img {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain !important;
    display: block;
}

/* --- "Tous les secteurs" link inside the dark related-services strip ------- */
.related-services-more {
    margin-top: 1.5rem;
    max-width: none !important;
}
/* (Le bouton "Voir tous les secteurs" est entierement gere par le SYSTEME DE
   BOUTONS, comme bouton secondaire : repos jaune -> survol mauve + lift.) */

/* --- Fallback screen-reader-only utility (a11y heading-hierarchy fixes) ---- */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* ==========================================================================
   AUTOMATISATION ET IA page (/automatisation-ia/)
   Self-contained, scoped ai-* classes so nothing else is affected.
   Neobrutalist to match the rest of the site (thick black borders, yellow,
   the brand purple). Uses the existing CSS variables with safe fallbacks.
   ========================================================================== */

/* Forfait cards */
.ai-forfaits {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ai-forfait-card {
    border: 4px solid #000;
    background: #fff;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin-left: -4px;
}
.ai-forfaits .ai-forfait-card:first-child { margin-left: 0; }
.ai-forfait-card--accent { background: var(--yellow, #ffd900); }
.ai-forfait-card h3 {
    margin: 0 0 0.5rem;
    font-size: var(--fs-h4, 1.4rem);
    text-shadow: none;
}
.ai-forfait-price {
    font-family: var(--font-display, inherit);
    font-weight: 900;
    font-size: 1.15rem;
    margin: 0 0 1.25rem;
}
.ai-forfait-price span { font-weight: 400; opacity: 0.7; font-size: 0.9rem; }
.ai-forfait-card ul { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: none; }
.ai-forfait-card li {
    position: relative;
    padding-left: 1.6rem;
    margin-block-start: 0.5rem;
    line-height: 1.5;
}
.ai-forfait-card li:first-child { margin-block-start: 0; }
.ai-forfait-card li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    font-weight: 900;
}
.ai-forfait-cta {
    display: inline-block;
    background: var(--purple, #7c4dff);
    color: #fff !important;
    font-family: var(--font-display, inherit);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.75rem 1.5rem;
    border: 3px solid #000;
    text-decoration: none !important;
}
/* (Le survol de .ai-forfait-cta est gere par le SYSTEME DE BOUTONS, comme
   bouton primaire : repos mauve -> survol jaune + lift. Meme sur la carte
   accent jaune, le bouton reste mauve pour contraster avec la carte.) */
@media (max-width: 48em) {
    .ai-forfaits { grid-template-columns: 1fr; }
    .ai-forfait-card { margin-left: 0; margin-top: -4px; }
    .ai-forfaits .ai-forfait-card:first-child { margin-top: 0; }
}

/* Tools table */
.ai-tools-table-wrap { overflow-x: auto; }
.ai-tools-table {
    width: 100%;
    border-collapse: collapse;
    border: 4px solid #000;
    background: #fff;
}
.ai-tools-table th,
.ai-tools-table td {
    border: 2px solid #000;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.95rem;
    vertical-align: top;
}
.ai-tools-table thead th {
    background: #000;
    color: #fff;
    font-family: var(--font-display, inherit);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   DURCISSEMENT MOBILE (2026-06-15)
   Compléments additifs et sûrs. Le Simple CSS gère déjà html/body
   overflow-x:hidden et les points de rupture 48em des composants ; ces
   règles ne font qu'ajouter (césure des longues chaînes, titres qui cèdent
   sur très petits écrans, tableau IA plus dense, zones tactiles du footer).
   Rien ne touche le desktop. À valider sur un vrai téléphone.
   ========================================================================== */

/* Les longues chaînes (courriel, URLs) se coupent au lieu d'être rognées par
   le garde overflow-x:hidden sur écrans étroits. Ne casse rien : ne s'applique
   que si le mot dépasserait. */
.fred-footer-contact a,
.fred-footer-col a,
.entry-content a {
    overflow-wrap: anywhere;
}

/* Très petits écrans : un titre de page peut couper un mot trop long plutôt
   que de déborder. (Les h3 de cartes gardent leur word-break:keep-all du
   Simple CSS ; on ne vise que les h1/h2 de contenu.) */
@media (max-width: 480px) {
    body.page .entry-content h1,
    body.page .entry-content h2 {
        overflow-wrap: break-word;
    }

    /* Tableau des outils IA : plus dense sur téléphone, donc moins de scroll
       horizontal nécessaire dans son conteneur. */
    .ai-tools-table th,
    .ai-tools-table td {
        padding: 0.5rem 0.6rem;
        font-size: 0.82rem;
    }
}

/* Pied de page mobile : 2 colonnes au lieu d'une longue pile unique (le pied
   faisait ~1726px). La marque occupe toute la largeur, les colonnes de liens
   passent 2 par rangee. Zone tactile des liens ramenee a ~35px (footer = nav
   secondaire, pas besoin de 44px) + libellé d'avis lisible. */
@media (max-width: 768px) {
    body .fred-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    body .fred-footer-brand { grid-column: 1 / -1 !important; }
    /* Colonne Contact (NAP) MASQUEE sur mobile (v1.0.67) : le telephone et le
       courriel sont deja accessibles via la barre collante APPELER/ECRIRE en
       bas de l'ecran, donc l'afficher aussi dans le pied fait double emploi et
       allonge le pied. display:none -> reste dans le DOM, donc les crawlers et
       le schema local lisent toujours la NAP. Pour la reafficher sur mobile :
       remplacer display:none par "grid-column: 1 / -1" (pleine largeur sous les
       2 colonnes de liens, son ancien traitement). */
    body .fred-footer-col:has(.fred-footer-contact) { display: none !important; }
    .fred-footer-col li { margin-bottom: 0.25rem; }
    .fred-footer-col a,
    .fred-footer-contact a,
    .fred-footer-bottom a {
        display: inline-block;
        padding: 5px 0;
    }
    /* Liens de nav en 12px : tiennent sur UNE ligne dans les colonnes (sinon ils
       passaient a 2 lignes -> liens de 56px et pied tres long). 12px reste OK
       pour de la nav secondaire de pied de page. */
    .fred-footer-col a { font-size: 12px; line-height: 1.3; }
    /* "AVIS GOOGLE" sous chaque avis : 0.62rem (~10px) est trop petit a lire
       sur mobile -> ~13px. */
    .review-source { font-size: 0.8rem; }
}

/* CORRECTIF MOBILE RÉEL (vérifié en 384px) : les pages portfolio utilisent des
   grilles 3 colonnes en STYLE INLINE (sans classe), qui ne s'empilaient pas sur
   téléphone. Résultat : 3 colonnes de ~110px et des titres brisés lettre par
   lettre (« GP S IN TÉ GR É »). Le !important bat le style inline. On force une
   seule colonne sous 768px. Cible le motif inline exact des cartes décisions. */
@media (max-width: 768px) {
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

/* Tableaux de contenu (ex. comparatif freelance) : plus compacts sur mobile
   pour tenir dans la largeur du téléphone (vérifié : le comparatif freelance
   ne déborde plus). */
@media (max-width: 768px) {
    .entry-content table {
        font-size: 0.85rem;
        max-width: 100%;
    }
}

/* NOTE : les pages à hero 2 colonnes (avec image) clipent ~8px du bord droit
   de l'image hero sur mobile. Aucun défilement horizontal (overflow-x:hidden
   global l'absorbe) : c'est purement cosmétique. La largeur de cette image est
   verrouillée par des règles !important du Simple CSS qu'on ne peut pas
   surcharger proprement depuis le thème enfant. À corriger à la source (réglage
   du bloc image ou Simple CSS) si on veut le pixel-perfect. Non bloquant. */

/* ==========================================================================
   PASSE DESIGN (16 juin) : corrections vérifiées en direct sur le site live.
   ========================================================================== */

/* 1) Espace avant le pied de page. Le contenu touchait le footer noir
   (gap mesure a 0px). Le formulaire est dans une .cyber-card dont le bas colle
   au footer ; une marge ne fonctionne pas ici (margin-collapsing + WPForms
   ecrase la marge du conteneur). On met donc un PADDING (qui ne collapse pas)
   sous la zone de contenu, cible aux pages avec formulaire via :has() pour ne
   PAS creer de bande vide sous les pages a sections pleine largeur.
   Verifie en direct : gap sous le formulaire 88px -> 168px. */
.content-area:has(.wpforms-container) { padding-bottom: clamp(2.5rem, 6vw, 5rem); }
body.single .content-area { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

/* 2) (Retire) On avait ajoute ici un traitement generique des liens sans classe
   avec un fondu au survol (opacity:0.7). Mauvaise idee : le bouton "Voir tous
   mes avis sur Google" est un lien SANS classe que le design system stylise en
   bouton jaune ; le fondu a 70% melangeait le jaune avec le turquoise du fond
   et donnait un vert olive au survol. Le design system stylise deja tres bien
   les liens de contenu bruts (et ce bouton), donc on laisse faire. */

/* 3) Ligne d'annonce "Nouveau : ... IA" (accueil seulement). C'etait un lien
   souligne par defaut qui jurait avec le design. On en fait une puce
   neobrutaliste (carte blanche, bordure noire, ombre dure) comme les cartes du
   hero ; le lien passe en gras violet sans soulignement (souligne au survol).
   Le soulignement par defaut etait force en !important par le theme, d'ou les
   !important ici. Scope body.home pour ne pas toucher d'autres liens vers la
   page automatisation. Cible via :has() (bien supporte ; degrade proprement). */
body.home .entry-content p:has(a[href*="automatisation-ia"]) {
    display: inline-block;
    background: #fff;
    border: 3px solid #000;
    box-shadow: 5px 5px 0 #000;
    padding: 12px 20px;
    font-weight: 700;
    color: #000;
    line-height: 1.35;
}
body.home .entry-content a[href*="automatisation-ia"] {
    color: #7c4dff;
    font-weight: 800 !important;
    text-decoration: none !important;
}
/* ==========================================================================
   HOVER UNIFIE DES LIENS TEXTE : UN seul effet partout.
   Repos = pas de soulignement. Survol = soulignement propre, la couleur du lien
   NE change PAS, aucun fond, aucun deplacement. (Inclut la puce "Nouveau",
   les liens de contenu, le fil d'Ariane, le pied de page, "Voir tous les
   secteurs".) Les BOUTONS en boite sont exclus et gardent leur "lift"
   (.reviews-cta, .fred-404-links, et tous les liens AVEC une classe : boutons
   WP/GenerateBlocks, .related-service-link, .fred-footer-cta, etc.). La
   navigation garde son propre soulignement ::after. */
.entry-content a:not([class]):not(.reviews-cta a):not(.fred-404-links a),
.fred-breadcrumb a,
.fred-footer a:not(.fred-footer-cta),
.fred-footer-bottom a,
.copyright-bar a {
    text-decoration: none;
}
.entry-content a:not([class]):not(.reviews-cta a):not(.fred-404-links a):hover,
.fred-breadcrumb a:hover,
.fred-footer a:not(.fred-footer-cta):hover,
.fred-footer-bottom a:hover,
.copyright-bar a:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
/* Chaque famille garde sa couleur de repos au survol (ordre = priorite). */
/* Contraste : liens de contenu en mauve #7C4DFF -> 2.35:1 sur turquoise (echec).
   On passe au mauve fonce #45209E (5.25:1 sur turquoise, encore meilleur sur
   blanc). Repos + survol, pour que la couleur ne change pas au survol. */
.entry-content a:not([class]):not(.reviews-cta a):not(.fred-404-links a),
.entry-content a:not([class]):not(.reviews-cta a):not(.fred-404-links a):hover { color: #45209E !important; }
/* Exception : sur la section SOMBRE "secteurs" (.related-services, fond noir),
   le mauve fonce est illisible. Les liens y passent au turquoise (9:1 sur noir),
   repos + survol. Specificite > la regle ci-dessus grace a .related-services. */
.entry-content .related-services a:not([class]):not(.reviews-cta a):not(.fred-404-links a):not(.related-services-more a),
.entry-content .related-services a:not([class]):not(.reviews-cta a):not(.fred-404-links a):not(.related-services-more a):hover { color: #4DC7C1 !important; }

/* Cartes "secteurs" (.related-service-link) : au survol, le fond passe au JAUNE
   (design.css) donc le texte DOIT etre noir. Mais une regle de repos a tres
   forte specificite (body.page .inside-article .entry-content ... h3 { #fff })
   forcait le titre en blanc meme au survol -> blanc sur jaune (illisible). On
   redonne le noir au survol avec une specificite superieure (prefixe identique
   + :hover). */
body.page .inside-article .entry-content .related-service-link:hover h3,
body.page .inside-article .entry-content .related-service-link:hover p,
body.page .inside-article .entry-content .related-service-link:hover { color: #000 !important; }

/* "Voir tous les secteurs" devient un BOUTON jaune (sur la section sombre).
   Specificite (0,6,3) pour battre les regles de couleur de liens ci-dessus. */
.entry-content .related-services .related-services-more a:not([class]):not(.reviews-cta a):not(.fred-404-links a) {
    display: inline-block;
    background: var(--yellow, #FFD900) !important;
    color: #121212 !important;
    font-family: var(--font-display, sans-serif);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    padding: 0.7rem 1.4rem;
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #000;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* (le survol du bouton "Voir tous les secteurs" est gere par le SYSTEME DE
   BOUTONS ci-dessous, comme bouton secondaire) */

/* ==========================================================================
   SYSTEME DE BOUTONS — 2 styles seulement, coherents sur tout le site.
   PRIMAIRE (mauve, defaut) : survol -> JAUNE + texte noir + lift ; clic -> sink.
   SECONDAIRE (jaune) : survol -> MAUVE + texte blanc + lift ; clic -> sink.
   .btn-secondary (+ anciens alias .btn-yellow / .btn-ghost) = secondaire.
   Boutons hors-classe mappes : avis / "voir tous les secteurs" / puce IA / CTA
   pied de page / retour-portfolio = secondaire ; submit de formulaire = primaire.
   ========================================================================== */

/* ---- PRIMAIRE : survol jaune + lift ---- */
@media (hover: hover) {
    .wp-block-generateblocks-button:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover,
    .gb-button:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover,
    .wp-block-button__link:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover,
    .wpforms-submit:hover,
    .wpforms-form button[type="submit"]:hover,
    .fred-404-links a:hover,
    .ai-forfait-cta:hover,
    a.gb-text:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover {
        background-color: var(--yellow, #FFD900) !important;
        color: #000 !important;
        border-color: #000 !important;
        transform: translate(-3px, -3px) !important;
        box-shadow: 7px 7px 0 #000 !important;
        transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease !important;
    }
    .wp-block-generateblocks-button:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover *,
    .gb-button:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover *,
    .wp-block-button__link:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover *,
    .ai-forfait-cta:hover *,
    a.gb-text:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover * { color: #000 !important; }
}

/* ---- SECONDAIRE : repos jaune ---- */
.btn-secondary, a.gb-text.btn-secondary,
.btn-yellow, a.gb-text.btn-yellow,
.btn-ghost, a.gb-text.btn-ghost,
.fred-footer-cta,
.back-to-portfolio,
.reviews-cta a {
    background-color: var(--yellow, #FFD900) !important;
    color: #000 !important;
    border-color: #000 !important;
}
/* ---- SECONDAIRE : survol -> MAUVE + texte blanc + lift ---- */
@media (hover: hover) {
    .btn-secondary:hover, a.gb-text.btn-secondary:hover,
    .btn-yellow:hover, a.gb-text.btn-yellow:hover,
    .btn-ghost:hover, a.gb-text.btn-ghost:hover,
    .fred-footer-cta:hover,
    .back-to-portfolio:hover,
    .reviews-cta a:hover,
    .entry-content p:has(a[href*="automatisation-ia"]):hover {
        background-color: var(--purple, #7C4DFF) !important;
        color: #fff !important;
        border-color: #000 !important;
        transform: translate(-3px, -3px) !important;
        box-shadow: 7px 7px 0 #000 !important;
        transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease !important;
    }
    .btn-secondary:hover *, a.gb-text.btn-yellow:hover *, a.gb-text.btn-ghost:hover *,
    .fred-footer-cta:hover *, .back-to-portfolio:hover *,
    .reviews-cta a:hover *,
    .entry-content p:has(a[href*="automatisation-ia"]):hover * { color: #fff !important; }
}
/* "Voir tous les secteurs" est un <a> SANS classe : les regles generiques de
   couleur des liens (#45209E, turquoise) ont une specificite superieure et
   repeignaient son texte au survol. Sa regle de survol dediee (0,6,4) les bat
   et lui donne le meme rendu secondaire (mauve + texte blanc + lift). */
@media (hover: hover) {
    .entry-content .related-services .related-services-more a:not([class]):not(.reviews-cta a):not(.fred-404-links a):hover {
        background-color: var(--purple, #7C4DFF) !important;
        color: #fff !important;
        border-color: #000 !important;
        transform: translate(-3px, -3px) !important;
        box-shadow: 7px 7px 0 #000 !important;
        transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease !important;
    }
}

/* ---- CLIC (enfoncement) — primaire + secondaire ---- */
.wp-block-generateblocks-button:active,
.gb-button:active,
.wp-block-button__link:active,
a.gb-text:active,
.reviews-cta a:active,
.fred-footer-cta:active,
.back-to-portfolio:active,
.ai-forfait-cta:active,
.entry-content .related-services .related-services-more a:not([class]):active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 #000 !important;
}
.fred-footer a:not(.fred-footer-cta):hover { color: #fff !important; }
.fred-footer-bottom a:hover { color: rgba(255, 255, 255, 0.85) !important; }
.copyright-bar a:hover { color: #000 !important; }

/* ==========================================================================
   CONTRASTE (accessibilite) : les eyebrows mauves (#7C4DFF) sur fond turquoise
   etaient a 2.35:1 -> echec WCAG AA. On fonce le mauve a #45209E (5.25:1 sur
   turquoise) tout en gardant l'identite violette. Meme selecteur que le design
   system, charge apres donc prioritaire. Les eyebrows sur bande sombre restent
   turquoise (la regle .related-services est plus specifique et gagne). */
body.page .inside-article .entry-content :is(.eyebrow, .hero-eyebrow, .section-badge) {
    color: #45209E !important;
}

/* Contraste : lien du fil d'Ariane (mauve sur turquoise = 2.35:1) -> mauve
   fonce #45209E (5.25:1), au repos comme au survol. */
.fred-breadcrumb a,
.fred-breadcrumb a:hover {
    color: #45209E !important;
}

/* Contraste : la puce "ticket-tag-teal" avait du texte mauve sur turquoise
   (2.35:1). Texte noir sur la puce turquoise -> 10.25:1. */
.ticket-tag-teal {
    color: #121212 !important;
}

/* ==========================================================================
   FOCUS CLAVIER UNIFIE (WCAG 2.2). Un seul anneau de focus partout, visible sur
   TOUS les fonds : anneau sombre (lisible sur turquoise/jaune/blanc) + halo
   clair (lisible sur fond sombre). :focus-visible = clavier seulement, donc
   aucun anneau au clic souris. Remplace les anneaux mauve/jaune incoherents
   (le mauve etait a 2.35:1 sur turquoise, sous le seuil WCAG de 3:1). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.gb-button:focus-visible,
.wpforms-submit:focus-visible {
    outline: 3px solid #121212 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px #F8FAFC !important;
    border-radius: 1px;
}

/* (Le bouton "Voir tous mes avis" et la puce "Nouveau" sont maintenant geres par
   le SYSTEME DE BOUTONS plus haut, comme boutons secondaires.) */

/* ==========================================================================
   ACCUEIL : retrait de l'ancienne puce "Nouveau" + survol du bouton telephone.
   (L'IA est ajoutee comme vraie carte de service, pas dans la pile hero.)
   ========================================================================== */

/* La puce "Nouveau : j'implante l'IA..." reste affichee dans le hero (en plus
   de la carte de service IA). Elle garde son survol blanc -> jaune. */

/* Bouton telephone de l'en-tete : au survol il restait mauve (correctif nav
   "dernier element du menu"). On le passe au JAUNE comme les autres boutons. */
.main-navigation .main-nav > ul > li.header-phone-item > a:hover,
.main-navigation .main-nav > ul > li.header-phone-item > a:focus {
    background-color: var(--yellow, #FFD900) !important;
    color: #121212 !important;
}

/* 4e carte de service "Automatisation & IA" (injectee via functions.php) : la
   grille de services de l'accueil passe a 4 colonnes (2x2 en tablette, 1 sur
   mobile). Icone typographique "IA" sur boite noire, comme la carte "#1". */
body.home .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 600px) {
    body.home .services-grid { grid-template-columns: 1fr !important; }
}
/* (La carte "Automatisation & IA" utilise une vraie image comme les 3 autres,
   geree dans le contenu. Plus de tuile emoji.) */
/* [Regle .service-card-ai retiree 2026-06-21] La 4e carte utilise desormais une
   vraie image et la classe .service-card comme les 3 autres ; la classe
   .service-card-ai n'existe plus dans le markup (selecteur scope body.home),
   donc cette regle etait morte. */

/* ==========================================================================
   ACCUEIL — RYTHME DE LARGEUR (desktop >1200px).
   Le gabarit de contenu est etroit (1200px) : sur grand ecran ca laisse de
   grandes marges vides a gauche/droite. On elargit le conteneur de l'ACCUEIL
   pour que les grilles (services, cartes "pourquoi", avis) respirent. Le TEXTE
   garde sa largeur de lecture (paragraphes deja plafonnes ~600px / en colonnes),
   donc seules les grilles s'elargissent : large pour le visuel, etroit pour la
   lecture. Scope body.home uniquement -> les pages de contenu (blog, services)
   restent etroites, ce qui est mieux pour lire. ============================ */
@media (min-width: 1201px) {
    body.home .inside-article {
        max-width: 1460px !important;
    }

    /* La bande sombre "secteurs" passe pleine largeur (bord a bord) : elle
       devient un separateur fort et casse la monotonie. Le contenu interne
       reste centre et plafonne via son .container. Selecteur a specificite
       (0,4,1) pour battre la regle design.css 'body.page .inside-article
       .related-services { margin: 0 }' (0,3,1) qui gardait la bande etroite. */
    body.home .inside-article .entry-content .related-services {
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    body.home .inside-article .related-services > .container,
    body.home .inside-article .related-services .container {
        max-width: 1460px !important;
        margin-inline: auto !important;
        padding-inline: clamp(24px, 4vw, 64px) !important;
    }
}

/* La bande "secteurs" doit aussi etre pleine largeur SOUS 1201px (tablette +
   mobile) : la regle ci-dessus est limitee a >=1201px, donc en dessous la bande
   restait dans la colonne de contenu (gouttiere teal visible sur mobile). Le
   calc(50% - 50vw) s'auto-ajuste a la gouttiere du conteneur (pas de debordement
   horizontal) ; le padding interne de .related-services (20px) garde les cartes
   a l'ecart des bords. */
@media (max-width: 1200px) {
    body.home .inside-article .entry-content .related-services {
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

/* ==========================================================================
   CORRECTIFS DE SURVOL SUR FOND JAUNE (lisibilite).
   ========================================================================== */

/* 1) [Doublon retire 2026-06-21] Le survol NOIR (h3/p) sur la carte jaune est
   deja defini plus haut, meme selecteur et meme specificite (0,5,2), vers la
   ligne 525 (.related-service-link:hover h3, p, :hover { color:#000 }). Cette
   copie etait redondante : 525 gagne de toute facon (egalite de specificite,
   declare plus haut), donc rien ne change au rendu. */

/* 2) Bouton CTA "Reserver un appel" dans la carte jaune (.cyber-card-yellow) :
   c'est un bouton PRIMAIRE (mauve au repos) dont le survol PRIMAIRE passe au
   JAUNE -> jaune-sur-jaune, invisible. Sur une carte jaune, le survol s'inverse
   plutot en NOIR + texte jaune (contraste fort, on-brand). Specificite (0,6,1)
   avec la meme chaine :not(...) pour battre la regle primaire (0,5,1). */
@media (hover: hover) {
    .cyber-card-yellow a.gb-text:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover {
        background-color: #121212 !important;
        color: var(--yellow, #FFD900) !important;
        border-color: #121212 !important;
        transform: translate(-3px, -3px) !important;
        box-shadow: 7px 7px 0 #000 !important;
    }
    .cyber-card-yellow a.gb-text:not(.btn-yellow):not(.btn-ghost):not(.btn-secondary):hover * {
        color: var(--yellow, #FFD900) !important;
    }
}

/* ==========================================================================
   MOBILE — bordure des cartes "process-step" (On se parle / Je construis / ...).
   En pile verticale (<=48em), design.css retirait la bordure DROITE
   (border-right:none) et la bordure du BAS de la derniere carte : la colonne
   paraissait ouverte a droite et en bas. En pile, chaque carte doit garder ses
   4 cotes (le chevauchement margin-top:-4px fusionne les bordures adjacentes,
   donc pas de double trait). On les remet. ============================== */
@media (max-width: 48em) {
    .process-step { border-right: 4px solid #000 !important; }
    .process-step:last-child { border-bottom: 4px solid #000 !important; }
}

/* ==========================================================================
   ACCUEIL — la bande NOIRE "secteurs" et la carte JAUNE du CTA se suivent et
   sont toutes deux pleine largeur. On supprime l'espace entre elles (la carte
   jaune avait margin-top: 56px) pour qu'elles se touchent bord a bord, comme
   des bandes de couleur empilees, au lieu d'une bande turquoise parasite. Le
   selecteur (frere adjacent) ne s'applique que la ou les deux se suivent. */
body.home .related-services + .cyber-card-yellow {
    margin-top: 0 !important;
}

/* ==========================================================================
   ACCUEIL — VISUEL DU HERO : photo de Fred (Option 1) au lieu des 3 cartes
   qui repetaient le titre. Cadre neobrutaliste + badge d'avis (jaune) + tag
   differenciateur (mauve). Anciennes cartes masquees ; photo injectee cote
   serveur (functions.php) dans .hero-visual. Visible aussi sur mobile. ====== */
body.home .hero-visual {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px;
}
body.home .hero-visual .hero-card { display: none !important; }

/* Photo detouree (fond transparent) replacee dans un CADRE blanc neobrutaliste
   (bordure + ombre dure) : le detourage evite l'ombre du studio, le blanc du
   cadre apparait derriere les zones transparentes. Recadrage portrait 4:5
   (cover, ancre en haut) pour serrer sur le visage, sans filtre (image propre). */
.hero-photo-card {
    position: relative;
    margin: 0;
    max-width: 440px;
    width: 100%;
    background: #fff;
    border: 4px solid #000;
    box-shadow: 12px 12px 0 #000;
    border-radius: 2px;
}
.hero-photo-card .hero-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}
@media (max-width: 768px) {
    .hero-photo-card { max-width: 360px; }
}

/* Badge d'avis (jaune), coin bas-gauche */
.hero-photo-badge {
    position: absolute; left: -16px; bottom: -16px;
    background: var(--yellow, #FFD900); color: #111;
    padding: 9px 15px; border: 3px solid #000; box-shadow: 6px 6px 0 #000;
    border-radius: 2px; transform: rotate(-4deg); text-align: center; line-height: 1.15;
}
.hero-photo-badge .hps { display: block; font-size: 0.8rem; letter-spacing: 2px; color: #111; }
.hero-photo-badge .hpb-main { display: block; font-weight: 800; font-size: 0.95rem; color: #111; }

/* Tag differenciateur (mauve), coin haut-droite */
.hero-photo-tag {
    position: absolute; top: -14px; right: -12px; max-width: 210px;
    background: var(--purple, #7C4DFF); color: #fff;
    font-weight: 800; font-size: 0.8rem; line-height: 1.2;
    text-transform: uppercase; letter-spacing: 0.01em;
    padding: 8px 12px; border: 3px solid #000; box-shadow: 5px 5px 0 #000;
    border-radius: 2px; transform: rotate(3deg);
}

/* La note Google est deja sur le badge de la photo : on retire le doublon
   VISUEL sous le bouton, mais on le garde pour lecteurs d'ecran / SEO. */
body.home .hero-proof-line {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   PILIERS "Pourquoi travailler avec moi" — icone par carte (injectee via
   functions.php avant chaque h3). stroke = couleur du texte de la carte, donc
   sombre sur fond blanc et blanc sur fond mauve, sans regle supplementaire. */
.pillars-grid .pillar-icon {
    display: block;
    line-height: 0;
    margin-bottom: 14px;
}
.pillars-grid .pillar-icon svg {
    width: 46px;
    height: 46px;
}

/* Icones des etapes (process) : SVG plein, meme langage que les piliers, a la
   taille de l'emoji qu'il remplace. Couleur = texte de la carte. */
.process-step-icon svg.process-step-svg {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
}

/* Titres d'etapes : on reduit un peu (32px -> ~28px) pour que le plus long
   ("Vous convertissez") tienne sur UNE ligne comme les deux autres. Prefixe
   complet pour battre 'body.page .inside-article .entry-content h3' (0,3,1). */
body.page .inside-article .entry-content .process-step h3 {
    font-size: clamp(1.45rem, 2vw, 1.75rem) !important;
}

/* ==========================================================================
   ACCUEIL — aligne le contenu du CTA "Contactez Fred" sur la meme gouttiere que
   le reste de la page. Sa grille etait plafonnee a 1200px (donc plus etroite et
   decalee vers la droite) alors que le reste du contenu de l'accueil est a
   1460px. On reprend le meme conteneur (1460 + meme padding) que la bande
   secteurs pour que les bords gauches s'alignent. ========================== */
body.home .cta-final-card .cta-grid {
    max-width: 1460px !important;
    margin-inline: auto !important;
    padding-inline: clamp(24px, 4vw, 64px) !important;
}

/* ==========================================================================
   ACCUEIL — supprime l'espace teal entre la bande SECTEURS (noire) et le CTA
   contact (jaune). Le CTA est dans un .section-lg qui porte la marge haute de
   rythme (~96px) ; comme les deux bandes sont pleine largeur et colorees, cette
   marge laissait voir le fond teal entre elles. On colle le jaune sous le noir
   (les bandes doivent s'abouter, cf. PROJECT-NOTES). Cible uniquement la
   section qui suit immediatement les secteurs, sur l'accueil. ================ */
body.home .related-services + .section-lg {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* ==========================================================================
   ACCUEIL MOBILE — n'afficher que 2 temoignages (le 3e allonge le scroll sans
   gain de preuve ; le lien "Voir tous mes avis sur Google" prend le relais).
   Desktop garde les 3 (grille 3 colonnes). ================================= */
@media (max-width: 768px) {
    body.home .reviews-grid .review-card:nth-child(3) { display: none; }
    /* CTA "Voir tous mes avis sur Google" : on retire les etoiles decoratives
       sur mobile (l'empilement etoiles + libelle rendait mal). Le libelle seul
       suffit. Les etoiles restent visibles sur desktop. */
    body.home a.btn-secondary span[aria-hidden="true"] { display: none; }
}

/* Bouton "Voir tous mes avis sur Google" : empeche les 5 etoiles decoratives
   de se couper sur 2 lignes (sur mobile elles s'affichaient en ★★★ / ★★).
   On garde les etoiles comme un seul bloc insecable. ====================== */
body.home a.btn-secondary span[aria-hidden="true"] { white-space: nowrap; }

/* ==========================================================================
   ACCUEIL MOBILE — CTA principal du bloc contact ("Reserver un appel") en
   pleine largeur : c'etait un bouton etroit (~256px) flottant dans la carte
   jaune. Pleine largeur = plus visible, plus grande zone tactile, coherent
   avec les autres CTA mobiles. On exclut les liens telephone/courriel. ===== */
@media (max-width: 768px) {
    body.home .cta-content a:not([href^="tel"]):not([href^="mailto"]) {
        display: flex !important;        /* le bouton est inline-flex !important, d'ou le !important ici */
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   ACCUEIL MOBILE — video du CTA contact en pleine largeur (bandeau bord a bord).
   La video etait dans la gouttiere de .cta-grid (~24px de chaque cote). On
   annule cette gouttiere UNIQUEMENT sur le bloc video ; le texte garde la sienne
   pour rester lisible. Le calc miroir de clamp(24px,4vw,64px) annule exactement
   la gouttiere a toutes les largeurs <=768px. Reversible : retirer ce bloc. == */
@media (max-width: 768px) {
    body.home .cta-final-card .cta-animation-wrap {
        margin-inline: calc(-1 * clamp(24px, 4vw, 64px)) !important;
        width: calc(100% + 2 * clamp(24px, 4vw, 64px)) !important;
    }
    /* La video pleine largeur s'aboute a la bande noire au-dessus : on retire le
       padding HAUT de la carte (sinon ~48px de jaune flottaient entre le noir et
       la video). Le padding BAS reste pour aerer le texte du CTA. */
    /* (0,4,1) pour battre design.css 'body.page .inside-article .cta-final-card
       { padding-block: clamp(48px,6vw,88px) !important }' (0,3,1) : le body
       accueil porte A LA FOIS .home et .page. On ne touche QUE le haut. */
    body.home .inside-article .entry-content .cta-final-card { padding-top: 0 !important; }
}

/* ==========================================================================
   ACCUEIL MOBILE — uniformise la respiration verticale de la bande SECTEURS
   (noire) avec l'autre bande coloree (contact, jaune). Son padding etait fixe
   a 80px (var(--space-xl)) et ne reduisait pas sur mobile, d'ou de larges
   aplats noirs en haut/bas. On l'aligne sur 48px (comme la bande contact) et on
   annule la marge basse du paragraphe "Voir tous les secteurs" pour equilibrer
   haut/bas. (0,4,1) pour battre design.css 'body.page .inside-article
   .related-services { padding: var(--space-xl) ... !important }' (0,3,1). ===== */
@media (max-width: 768px) {
    body.home .inside-article .entry-content .related-services {
        padding-block: 48px !important;
    }
    body.home .related-services .related-services-more { margin-bottom: 0 !important; }
}

/* ==========================================================================
   PIED DE PAGE MOBILE — 2 correctifs :
   1) Copyright + lien "Politique de confidentialite" alignes a GAUCHE (coherent
      avec le reste du pied). Il y avait un conflit text-align:center contre
      align-items:flex-start qui desalignait les deux textes.
   2) Le fond NOIR du pied remplit l'espace reserve au menu collant du bas.
      design.css met 'body{padding-bottom:68px}' pour ne pas cacher le contenu
      sous le menu fixe, mais cette zone montrait le fond TEAL de la page entre
      le pied noir et le menu. Technique padding-bottom + margin-bottom negative :
      le fond noir s'etend dans la zone reservee SANS rallonger la page ni
      deplacer le contenu (donc plus de bande teal). ========================== */
@media (max-width: 768px) {
    body .fred-footer-bottom { text-align: left; align-items: flex-start; }
    body .site-footer { padding-bottom: 68px !important; margin-bottom: -68px !important; }
}

/* ==========================================================================
   /SERVICES/ — grille de services CONSOLIDEE (v1.0.69)
   UNE grille uniforme de 6 cartes egales : 3/rangee (desktop), 2 (tablette),
   1 (mobile). Conçue pour des BLOCS NATIFS (group / heading / paragraph / list
   / buttons) qui ne portent QUE des classes -> editable + sauvegardable comme
   pattern, kses-safe (pas de bloc HTML geant). Tout le style vit ici :
   - .svc-hub-grid  = la grille (group parent)
   - .svc-card      = une carte (group enfant), cadre neobrutaliste, quinconce
   - .svc-card-ico  = la grosse icone emoji (paragraph)
   - .svc-card-desc = le paragraphe descriptif
   - .svc-feat      = la liste de 3 atouts (list), pastille noire ::before
   Les tags (.ticket-tag*), prix (.price-tag) et boutons (.wp-block-button)
   reutilisent les classes globales deja stylisees. !important sur le display de
   la grille pour battre les classes de layout du bloc group natif. =========== */
/* GeneratePress (classic theme) wraps core-group children in
   .wp-block-group__inner-container, so the grid must live on that wrapper, NOT
   on .svc-hub-grid itself (otherwise the grid only lays out the wrapper and the
   cards stack 1/row). The :not(:has()) twin keeps it working if a block/FSE
   theme ever renders the group WITHOUT the wrapper. */
.svc-hub-grid > .wp-block-group__inner-container,
.svc-hub-grid:not(:has(> .wp-block-group__inner-container)) {
    display: grid !important;
    /* 6 sous-colonnes : chaque carte occupe 2 -> 3 cartes par rangee. Permet de
       CENTRER la 2e rangee quand il y a 5 cartes (voir plus bas). gap 40px car
       l'ombre dure de 8px mange l'espace (a 24px il ne restait que ~16px). */
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 40px;
}
.svc-hub-grid:has(> .wp-block-group__inner-container) { display: block !important; }
/* GRILLE A 5 CARTES : 3 en haut, 2 CENTREES en bas. Les cartes 4 et 5 sont
   decalees (col 2-3 et 4-5) -> une demi-colonne vide de chaque cote = centrage.
   Hardcode pour 5 cartes ; si le nombre change, ajuster/retirer ce bloc. */
.svc-hub-grid .svc-card { grid-column: span 2; }
.svc-hub-grid .svc-card:nth-child(4) { grid-column: 2 / span 2; }
.svc-hub-grid .svc-card:nth-child(5) { grid-column: 4 / span 2; }

/* LARGEUR : on laisse la colonne de contenu PAR DEFAUT (aucun elargissement ni
   pleine largeur). Le hero et la FAQ sont des PATTERNS enregistres -> on ne
   modifie jamais leur rendu. La grille de cartes suit la meme largeur par defaut,
   donc tout s'aligne naturellement sans toucher aux patterns. */

/* INTRO : design.css plafonne les paragraphes a ~600px et les colle a GAUCHE.
   Le titre centre et le paragraphe ne partageaient donc pas le meme axe. On
   recentre le BLOC des paragraphes CENTRES sur cette page pour qu'ils s'alignent
   sous le titre. Ne vise que les p centres -> n'affecte ni le hero ni la FAQ
   (texte a gauche), ni les autres paragraphes de lecture. */
body.page-id-3310 .entry-content p.has-text-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
    /* Resserre l'ecart titre -> paragraphe (et entre les 2 paragraphes) : la
       marge inter-bloc par defaut (~96px) etait beaucoup trop grande sous le H2. */
    margin-top: 1.5rem !important;
    /* design.css plafonne le texte a ~600px (trop etroit ici sous un grand titre
       pleine largeur). On elargit a 820px, toujours centre. */
    max-width: 820px !important;
}

/* HERO /services/ — DEROGATION client (ce hero, cette page). On NE touche PAS a
   l'alignement/justification (align-items / justify-content / space-between)
   -> ca casse le hero (le texte est plus haut que l'image = debordement, ou trous
   enormes). Et le blockGap regle DANS le pattern est ecrase par le gap flex du
   theme. Le SEUL changement sur et efficace : augmenter le gap flex de la colonne
   texte (32px au lieu de 16px) pour aerer/espacer regulierement les elements.
   Ciblage du conteneur flex qui contient le titre. */
body.page-id-3310 .hero-standard .wp-block-group__inner-container:has(> .wp-block-heading) {
    gap: 32px !important;
}

.svc-hub-grid .svc-card {
    display: flex;
    flex-direction: column;
    background: var(--white, #F8FAFC);
    border: 4px solid #000;
    box-shadow: 8px 8px 0 #000;
    margin: 0;
}
/* PADDING INTERNE des cartes (bordure -> contenu) = 40px.
   PIEGE : design.css force 'body.page .inside-article .wp-block-group(__inner-
   container) { padding: 0 !important }' (specificite 0,3,1). C'est CE reset qui
   annulait tous mes essais de padding sur .svc-card (0,2,0) malgre le !important.
   On met donc le padding sur l'inner-container avec un selecteur prefixe
   body.page .inside-article (...) -> (0,5,1) pour battre design.css. */
body.page .inside-article .svc-hub-grid .svc-card > .wp-block-group__inner-container {
    padding: 40px !important;
}
/* MOINS DE COULEUR : toutes les cartes en BLANC (on retire l'alternance jaune
   qui faisait 3 gros aplats satures). Le jaune reste en accent unique sur la
   tuile d'icone ; le langage de labels (eyebrow / prix / atouts) passe en noir. */
/* Meme piege que la grille : .svc-card est flex, mais son seul enfant est le
   .wp-block-group__inner-container (GeneratePress), donc margin-top:auto sur le
   bouton n'atteignait aucun flex-item -> boutons a mi-carte, en dents de scie.
   On fait du inner-container la colonne flex qui remplit la hauteur de la carte
   pour que les boutons s'alignent tous en bas. Le :not(:has()) couvre le cas
   sans wrapper (theme bloc/FSE) ou .svc-card est deja la colonne flex. */
/* Inner-container = la colonne flex qui remplit la hauteur de la carte (boutons
   en bas via margin-top:auto). UN SEUL systeme de rythme : on neutralise l'owl
   WordPress (voir plus bas) et on pilote tous les ecarts avec ce 'gap'. */
.svc-hub-grid .svc-card > .wp-block-group__inner-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem; /* rythme vertical unique entre eyebrow/icone/h3/desc/feat/prix */
}
/* DEFECT C : deux systemes d'espacement se cumulaient (marges explicites par
   element + l'owl WP 'is-layout-flow > * + *' qui pose un margin-block-start
   variable entre chaque enfant). On annule l'owl LA OU IL FRAPPE VRAIMENT : sur
   les enfants de l'inner-container (PAS de .svc-card, qui n'a que le wrapper).
   Selecteur (0,4,2) + !important -> bat l'owl (0,2,0) et les marges !important
   des classes globales .ticket-tag / .price-tag (0,1,0). Le 'gap' ci-dessus
   devient alors la seule source de rythme. */
.svc-hub-grid .svc-card > .wp-block-group__inner-container.is-layout-flow > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* ICONE : tuile bordee + ombre dure qui fait echo au cadre de la carte (finition
   neobrutaliste, l'emoji n'est plus un glyphe flottant). Contraste garanti sur
   les deux teintes de carte : tuile JAUNE par defaut (cartes blanches/even),
   tuile BLANCHE sur les cartes jaunes (odd) -> jamais invisible. margin:0 : le
   rythme est gere par le 'gap' de l'inner-container. */
.svc-hub-grid .svc-card-ico {
    margin: 0;
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.2rem; line-height: 1;
    background: var(--yellow, #FFD900);
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #000;
}
/* (Toutes les tuiles d'icone restent JAUNES sur fond blanc : seule touche vive.) */
/* (Pas de resserrage negatif icone -> titre : a (0,2,0) il serait de toute facon
   ecrase par le neutraliseur d'owl (0,4,0). Le gap uniforme de 0.9rem suffit.) */

/* DEFECT A : le h3 heritait de --fs-h3 (clamp -> ~28-32px). Dans la colonne de
   ~259px les mots longs (REFERENCEMENT, OPTIMISATION) en Lexend-900 debordaient
   et se cassaient EN PLEIN MILIEU. design.css impose font-size, letter-spacing
   ET word-break:keep-all en !important sur les titres -> il faut tout battre.
   Selecteur (0,5,1) avec le prefixe body.page .inside-article .entry-content ->
   bat 'body.page .inside-article .entry-content h3' (0,3,1) !important. Clamp
   plafonne a 1.75rem (28px) : REFERENCEMENT (~7.2em) tient sous 259px. Les trois
   proprietes de cassure forcees a normal/none interdisent toute coupure intra-mot
   (on ne coupe plus qu'aux espaces). letter-spacing en !important car la regle
   globale :is(h1..h6) pose ls-tight en !important. */
body.page .inside-article .entry-content .svc-hub-grid .svc-card h3 {
    /* Plafond 1.6rem (25.6px) et non 1.75 : a 28px le mot le plus long,
       AUTOMATISATION (14 lettres Lexend-900), debordait la colonne de 259px de
       ~19px. A 25.6px il rentre avec ~5px de marge. overflow-wrap:break-word =
       filet de securite (un mot futur trop long se coupe au lieu de deborder la
       bordure ; a 1.6rem aucun mot actuel ne se coupe). */
    font-size: clamp(1.25rem, 0.55rem + 2.4vw, 1.6rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    text-wrap: balance;
}

/* Description : opacite remontee 0.72 -> 0.85 (lisibilite sur fond jaune sature),
   corps Inter explicite, mesure plafonnee. Pas de !important (aucune regle
   design.css ne cible .svc-card-desc) ; gagne par specificite/ordre. */
.svc-hub-grid .svc-card-desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.9375rem; line-height: 1.55;
    opacity: 0.85; color: #121212;
    max-width: 38ch;
}

/* EQUILIBRE / ALIGNEMENT (multi-colonnes) : on RESERVE 2 lignes de titre et
   3 lignes de description pour que l'icone, le titre, la description ET la liste
   d'atouts demarrent a la meme hauteur d'une carte a l'autre. Le contenu est
   ecrit pour tenir ces hauteurs (titres ~2 lignes, descriptions ~3 lignes).
   min-height en 'em' => suit la taille de police (clamp du h3). Mobile 1-colonne
   exclu (l'alignement inter-cartes n'a pas de sens en pile). */
@media (min-width: 769px) {
    /* 3 lignes reservees pour le titre : on GARDE les titres complets/riches en
       mots-cles ("Creation & Optimisation de Sites Web" tient sur 3 lignes) au
       lieu de les tronquer pour rentrer sur 2 lignes. Le DESIGN s'adapte au
       contenu, pas l'inverse. Les titres plus courts s'alignent sur cette hauteur. */
    .svc-hub-grid .svc-card h3 { min-height: 3.36em; }        /* 3 lignes @ line-height 1.12 */
    .svc-hub-grid .svc-card-desc { min-height: 4.65em; }      /* 3 lignes @ line-height 1.55 */
}

/* Liste d'atouts : badge noir ::before inchange. Tailles legerement resserrees
   pour tenir la colonne de 259px sans deborder le badge. */
.svc-hub-grid .svc-feat {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.svc-hub-grid .svc-feat li {
    position: relative; padding-left: 26px; min-height: 22px;
    display: flex; align-items: center;
    font-family: var(--font-display, sans-serif); font-weight: 700;
    font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.02em;
    line-height: 1.25;
    overflow-wrap: normal; word-break: normal; hyphens: none;
}
/* Coche SIMPLE sans couleur ni pastille (demande client) : juste un ✓ noir. */
.svc-hub-grid .svc-feat li::before {
    content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    color: #000; font-weight: 900; font-size: 1rem; line-height: 1;
}

/* Eyebrow (pastille de categorie au-dessus de l'icone) MASQUE (demande client) :
   le titre h3 porte deja la categorie, retirer la pastille calme la carte. */
.svc-hub-grid .svc-card .ticket-tag {
    display: none !important;
}

/* DEFECT B : dans la colonne flex, l'enfant s'etire (align-self:stretch) ->
   .price-tag devenait une barre noire pleine largeur sur 2 lignes. Le vrai
   correctif est align-self:flex-start (sort l'item de l'axe transversal et le
   reduit a son contenu, quelle que soit la valeur display heritee de la classe
   globale). La pastille noire/jaune (fond, bordure, padding) vient deja de
   .price-tag dans design.css : on ne la redeclare PAS, on la fiabilise juste. */
.svc-hub-grid .svc-card .price-tag {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    margin: 0; /* le rythme est gere par le gap de l'inner-container */
    /* Prix en JAUNE de marque + texte noir (au lieu de la barre noire). !important
       pour battre le fond/texte noirs poses en !important par .price-tag (design.css). */
    background: var(--yellow, #FFD900) !important;
    color: #000 !important;
    border-color: #000 !important;
}

/* ALIGNER LES LABELS NOIRS (prix) d'une carte a l'autre : on ancre le PRIX en bas
   (margin-top:auto) au lieu du bouton. Le bouton suit avec le gap ; prix et bouton
   ayant des hauteurs fixes, leurs lignes s'alignent sur toute la rangee. (0,5,0)
   pour battre le neutraliseur d'owl (0,4,0) ; physique + logique pour lever
   l'ambiguite. (L'espace flexible se place alors entre les atouts et le prix.) */
.svc-hub-grid .svc-card > .wp-block-group__inner-container.is-layout-flow > .price-tag {
    margin-top: auto !important;
    margin-block-start: auto !important;
}

/* Hover de carte : meme grammaire que le systeme de boutons du site (translate
   negatif + ombre dure plus grande, 0.12s ease). +4px de levee compense par
   +4px d'ombre (8->12px) : le coin bas-droit reste fixe, la carte "se souleve".
   Gate @media(hover:hover) pour eviter l'etat colle au toucher. */
@media (hover: hover) {
    .svc-hub-grid .svc-card { transition: transform .12s ease, box-shadow .12s ease; }
    .svc-hub-grid .svc-card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 #000; }
}

@media (max-width: 1024px) {
    .svc-hub-grid > .wp-block-group__inner-container,
    .svc-hub-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    /* On annule le span/decalage 6-colonnes : en 2 et 1 colonne les cartes
       reprennent le flux normal (couvre aussi <=768 qui matche ce media). */
    .svc-hub-grid .svc-card,
    .svc-hub-grid .svc-card:nth-child(4),
    .svc-hub-grid .svc-card:nth-child(5) { grid-column: auto !important; }
}
@media (max-width: 768px) {
    .svc-hub-grid > .wp-block-group__inner-container,
    .svc-hub-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: 1fr !important;
        gap: 28px; /* 8px d'ombre + ~20px d'air entre cartes empilees */
    }
    /* Cartes plus larges en 1-up : un poil plus d'air vertical. */
    .svc-hub-grid .svc-card > .wp-block-group__inner-container { gap: 1.1rem; }
}