/**
* Page d'accueil — Click Digital.
* Toutes les couleurs / tailles / espacements viennent de globale.css (var(--pcd-*)).
*
* Le hero de l'accueil est désormais le hero animé partagé
* (template-parts/cd-hero.php + assets/css/cd-hero.css). Les anciens styles
* .home-hero ont été retirés lors de cette migration ; ce fichier reste chargé
* sur l'accueil pour les futures sections de la page.
*/
/* home.php sort du hero puis des sections directement dans .site-content
(pas de wrapper #primary/.content-area) : sur ce site, .site-content est
en display:flex (mise en page GeneratePress avec sidebar), ce qui mettait
les sections côte à côte au lieu de les empiler — invisible tant qu'il n'y
avait qu'une seule section (le hero). Corrigé ici, propre à cette page. */
.page-template-home .site-content {
display: block;
}
/* ================================================================ Services
Miroir du méga-menu "Services" (voir inc/class-pcd-mega-walker.php) : les
4 mêmes catégories, présentées en cartes. Ancre #services ciblée par le
bouton "Parlons de votre projet" du hero (template-parts/cd-hero.php).
h2/h5 héritent déjà de leur taille/graisse depuis globale.css : on ne
règle ici que l'espacement et la mise en page propres à la section. */
.pcd-home-services {
/* Contexte de positionnement pour .pcd-home-services__modules ci-dessous
(décorations en position:absolute). z-index:0 est nécessaire en plus de
position:relative : sans lui, cet élément n'établit PAS de contexte
d'empilement local, et le z-index:-1 des décorations "s'échappe" vers
un ancêtre plus haut dans l'arbre (ex. .site-content) — elles se
retrouvent alors peintes derrière un contenu sans rapport et
deviennent invisibles, au lieu de simplement passer derrière
.pcd-container comme prévu. Bug constaté et corrigé en session. */
position: relative;
z-index: 0;
}
/* --- Décorations : blocs modulaires (repris du Hero) ----------------------
Réutilise TEL QUEL le motif générique .pcd-modgroup / .pcd-modblock défini
dans globale.css (déjà utilisé par le Hero, voir cd-hero.css et
template-parts/cd-hero.php) : aucune nouvelle classe, aucune nouvelle
variable, aucune nouvelle couleur — uniquement le placement, propre à
cette section. Attribut data-svc-mod (et non data-cd-mod, déjà utilisé
par le Hero avec des sélecteurs non scopés dans cd-hero.css) pour éviter
toute collision entre les deux compositions sur la même page.
Composition asymétrique, 4 groupes (1 grand, 1 moyen, 2 petits) ancrés
dans les bandeaux de padding haut/bas de la section — mêmes zones
"garanties vides" que la technique déjà validée dans le Hero — ou dans
l'espace libre à droite du bloc de titre (max-width 640px dans un
conteneur pouvant atteindre 1600px). */
.pcd-home-services__modules {
position: absolute;
inset: 0;
/* Négatif (et non 0 comme dans cd-hero.css) : reste toujours derrière
TOUT le contenu de la section (cartes et survol compris) sans avoir à
ajouter un z-index à .pcd-container, classe générique partagée par
d'autres pages qu'on ne veut pas modifier pour ce seul besoin. */
z-index: -1;
overflow: hidden; /* aucun débordement visible, jamais de scroll horizontal */
pointer-events: none;
}
.pcd-home-services__modules .pcd-modgroup[data-svc-mod="1"] { bottom: 5%; left: 4%; } /* grand + petit */
.pcd-home-services__modules .pcd-modgroup[data-svc-mod="2"] { top: 20%; right: 15%; } /* moyen + petit */
.pcd-home-services__modules .pcd-modgroup[data-svc-mod="4"] { bottom: 13%; right: 14%; } /* petit (duo décalé) */
.pcd-home-services__head {
max-width: 640px;
margin: 0 0 var(--pcd-space-8);
}
.pcd-home-services__eyebrow {
margin: 0 0 var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-xs);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
color: var(--pcd-primary);
}
.pcd-home-services__title {
margin: 0 0 var(--pcd-space-4);
}
.pcd-home-services__lead {
margin: 0;
color: var(--pcd-text-muted);
}
.pcd-home-services__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Gap agrandi (vs. --pcd-space-6 initial) : nécessaire pour laisser la
place aux repères de coin (voir .pcd-home-services__frame-edge), qui
débordent vers l'extérieur de chaque carte sans jamais se toucher
d'une carte à l'autre. */
gap: var(--pcd-space-9);
/* Variables de géométrie du cadre technique portées ici (héritées par
.pcd-home-services__card, qui ne les redéclare plus) : le wrapper peut
ainsi calculer sa propre zone de sécurité à partir des MÊMES valeurs.
Emprise réelle d'un repère hors de la carte = frame-gap (décalage) +
frame-len (longueur de la branche) — le padding-block absorbe cette
emprise complète à l'intérieur du wrapper, pour qu'elle ne tombe
jamais dans le padding de la SECTION (--pcd-section-y, inchangé, reste
entièrement à l'extérieur). Les cadres eux-mêmes ne sont ni rallongés
ni déplacés. */
--pcd-card-frame-gap: 2px;
--pcd-card-frame-len: 22px;
padding-block: calc(var(--pcd-card-frame-gap) + var(--pcd-card-frame-len));
}
/* Carte à deux couches indépendantes :
1. Couche "cadre technique" (angles .pcd-home-services__frame-edge +
prolongements .pcd-home-services__frame-line) : visible au repos
(opacity:1), disparaît au survol (opacity:0). Jamais recolorée.
2. Couche "bordure finale" (box-shadow sur la carte elle-même) : invisible
au repos (alpha 0 via color-mix), apparaît au survol en var(--pcd-primary).
Les deux couches ne se mélangent jamais : au repos on ne voit QUE le cadre
technique (structure en construction) ; au survol on ne voit QUE la
bordure finale (carte terminée). */
.pcd-home-services__card {
position: relative;
display: flex;
flex-direction: column;
/* Hauteur fixe (mesurée sur la carte "Création de sites", 5 liens, en
mode bouton au survol : besoin réel 374px + petite marge) : identique
au repos et au survol, quel que soit le nombre de liens d'une carte —
la grille (align-items: stretch par défaut) n'a donc jamais besoin de
recalculer la hauteur de ligne en survolant une carte différente. */
min-height: 400px;
padding: 0 var(--pcd-space-3);
background: var(--pcd-fond);
border-radius: 6px; /* discret : sert uniquement à la bordure finale du survol */
/* Bordure finale en outline (pas box-shadow inset) : outline-offset la
place exactement là où le cadre technique dessine son contour (même
-gap), pour que la carte finie occupe la MÊME emprise visuelle que le
cadre technique au repos, au lieu de sembler plus petite. */
outline: 1px solid color-mix(in srgb, var(--pcd-primary) 0%, transparent);
outline-offset: var(--pcd-card-frame-gap);
/* Bordure : sortie rapide (110ms) ; l'entrée (150ms) est redéclarée sur
la règle :hover ci-dessous — technique standard des transitions CSS :
la durée utilisée est celle de l'état vers lequel on transite. Le FOND
ne se transitionne plus ici du tout (voir .pcd-home-services__card-fill :
une couche opacity dédiée remplace le background-color pour éviter le
passage prolongé par les tons gris entre blanc et #1F2937). */
transition: outline-color .11s var(--pcd-ease);
/* --pcd-card-frame-gap / --pcd-card-frame-len : héritées de
.pcd-home-services__grid (portées là-haut pour que le wrapper calcule
sa zone de sécurité à partir des mêmes valeurs) — plus redéclarées ici. */
/* La carte n'est jamais cliquable : pas de lien autour, pas de curseur
pointeur ici. Seuls les ajoutés dans la liste "Création de sites"
sont interactifs (voir .pcd-home-services__list--linked plus bas). */
}
/* Couche "fond sombre" séparée : au lieu d'animer background-color (qui
interpole blanc → #1F2937 en traversant des tons gris pendant TOUTE la
durée), on anime seulement l'opacity d'un calque plein et fixe. Rapide et
asymétrique : sortie 110ms (la carte quittée redevient claire vite),
entrée 150ms (déclarée sur :hover ci-dessous) — la fenêtre où les deux
cartes (celle qu'on quitte, celle qu'on survole) paraissent grisâtres en
même temps devient très courte. z-index sous le contenu texte (voir
.pcd-home-services__index/-title/-text/.pcd-home-services__list). */
.pcd-home-services__card-fill {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 6px;
background: var(--pcd-primary-hover); /* #1F2937 plein, fixe : seule l'opacity varie */
opacity: 0;
pointer-events: none;
transition: opacity .11s var(--pcd-ease);
}
/* Survol desktop uniquement (souris) : la bordure finale devient opaque,
le cadre technique s'efface, le fond passe en --pcd-primary-hover (#1F2937,
variable sémantique "état interactif" de globale.css — pas --pcd-navy, qui
est réservée aux usages structurels/non interactifs) et les textes passent
en clair. Trois transitions douces et INDÉPENDANTES (fond, contour, texte)
— jamais une opacité globale sur la carte, qui ferait passer tout le
contenu par un état translucide/grisâtre pendant le fondu. */
@media (hover: hover) and (pointer: fine) {
.pcd-home-services__card:hover {
outline-color: var(--pcd-primary);
transition-duration: .15s; /* entrée bordure, plus lente que la sortie (110ms) */
}
.pcd-home-services__card:hover .pcd-home-services__card-fill {
opacity: 1;
transition-duration: .15s; /* entrée fond, plus lente que la sortie (110ms) */
}
.pcd-home-services__card:hover .pcd-home-services__frame-edge,
.pcd-home-services__card:hover .pcd-home-services__frame-line {
opacity: 0;
}
.pcd-home-services__card:hover .pcd-home-services__card-title {
color: var(--pcd-primary-contrast);
transition-duration: .15s;
}
.pcd-home-services__card:hover .pcd-home-services__card-text {
color: color-mix(in srgb, var(--pcd-primary-contrast) 78%, transparent);
transition-duration: .15s;
}
.pcd-home-services__card:hover .pcd-home-services__list {
border-top-color: color-mix(in srgb, var(--pcd-primary-contrast) 24%, transparent);
color: color-mix(in srgb, var(--pcd-primary-contrast) 78%, transparent);
transition-duration: .15s;
}
}
/* Angles — copie directe de .cd-hero__frame-edge (avant/après, dimensions). */
.pcd-home-services__card > .pcd-home-services__frame-edge {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
opacity: 1;
/* Plus rapide que l'apparition du fond (voir .pcd-home-services__card) :
les traits sont déjà quasi partis quand le fond sombre arrive. */
transition: opacity .14s var(--pcd-ease);
}
.pcd-home-services__frame-edge::before,
.pcd-home-services__frame-edge::after {
content: "";
position: absolute;
background: rgba(40, 40, 40, .4);
}
.pcd-home-services__frame-edge::before { width: var(--pcd-card-frame-len); height: 1px; }
.pcd-home-services__frame-edge::after { width: 1px; height: var(--pcd-card-frame-len); }
.pcd-home-services__frame-edge[data-edge="t"] {
top: calc(-1 * var(--pcd-card-frame-gap));
left: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-services__frame-edge[data-edge="t"]::before { top: 0; right: 0; }
.pcd-home-services__frame-edge[data-edge="t"]::after { left: 0; bottom: 0; }
.pcd-home-services__frame-edge[data-edge="r"] {
top: calc(-1 * var(--pcd-card-frame-gap));
right: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-services__frame-edge[data-edge="r"]::before { top: 0; left: 0; }
.pcd-home-services__frame-edge[data-edge="r"]::after { right: 0; bottom: 0; }
.pcd-home-services__frame-edge[data-edge="b"] {
bottom: calc(-1 * var(--pcd-card-frame-gap));
right: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-services__frame-edge[data-edge="b"]::before { bottom: 0; left: 0; }
.pcd-home-services__frame-edge[data-edge="b"]::after { right: 0; top: 0; }
.pcd-home-services__frame-edge[data-edge="l"] {
bottom: calc(-1 * var(--pcd-card-frame-gap));
left: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-services__frame-edge[data-edge="l"]::before { bottom: 0; right: 0; }
.pcd-home-services__frame-edge[data-edge="l"]::after { left: 0; top: 0; }
/* Prolongements : éléments réels (pas des pseudo-éléments d'un ancrage 0×0
comme les angles) pour se dimensionner en % de la carte (calc(50% ...)).
Chacun part du même point d'ancrage que l'angle correspondant et s'arrête
12px avant le milieu du côté : les 2 traits d'un même côté laissent donc
24px d'ouverture au centre — le cadre technique n'est jamais complètement
fermé au repos (lecture "structure en construction", pas "carte finie" :
la carte finie, elle, vient de la bordure définie plus haut, au survol). */
.pcd-home-services__frame-line {
position: absolute;
background: rgba(40, 40, 40, .10);
pointer-events: none;
opacity: 1;
transition: opacity .14s var(--pcd-ease);
}
.pcd-home-services__frame-line[data-axis="h"] { height: 1px; width: calc(50% + var(--pcd-card-frame-gap) - 12px); }
.pcd-home-services__frame-line[data-axis="v"] { width: 1px; height: calc(50% + var(--pcd-card-frame-gap) - 12px); }
.pcd-home-services__frame-line[data-edge="t"] { top: calc(-1 * var(--pcd-card-frame-gap)); left: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-services__frame-line[data-edge="r"] { top: calc(-1 * var(--pcd-card-frame-gap)); right: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-services__frame-line[data-edge="b"] { bottom: calc(-1 * var(--pcd-card-frame-gap)); right: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-services__frame-line[data-edge="l"] { bottom: calc(-1 * var(--pcd-card-frame-gap)); left: calc(-1 * var(--pcd-card-frame-gap)); }
/* position:relative + z-index:2 sur les 4 blocs de contenu : la nouvelle
couche .pcd-home-services__card-fill (z-index:1) doit rester SOUS le
texte, jamais par-dessus. */
.pcd-home-services__index {
position: relative;
z-index: 2;
display: block;
margin-bottom: var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-3xl);
font-weight: var(--pcd-weight-semibold);
color: var(--pcd-primary);
}
.pcd-home-services__card-title {
position: relative;
z-index: 2;
margin: 0 0 var(--pcd-space-2);
transition: color .11s var(--pcd-ease);
}
.pcd-home-services__card-text {
position: relative;
z-index: 2;
margin: 0 0 var(--pcd-space-3);
font-size: var(--pcd-text-sm);
color: var(--pcd-text-muted);
transition: color .11s var(--pcd-ease);
}
/* Dans le flux, juste après la description : aucun repositionnement au
survol (voir .pcd-home-services__list--linked plus bas, qui garde la même
géométrie — display/flex/gap/padding/bordure — au repos et au survol, seule
l'apparence visuelle change) — la carte ne recalcule donc jamais sa
hauteur en passant de l'un à l'autre. */
.pcd-home-services__list {
position: relative;
z-index: 2;
margin: 0;
padding: var(--pcd-space-3) 0 0;
border-top: 1px solid var(--pcd-border);
list-style: none;
font-size: var(--pcd-text-sm);
color: var(--pcd-text);
transition: color .11s var(--pcd-ease), border-top-color .11s var(--pcd-ease);
}
.pcd-home-services__list li {
position: relative;
padding-left: var(--pcd-space-4);
margin-bottom: var(--pcd-space-2);
}
.pcd-home-services__list li:last-child {
margin-bottom: 0;
}
.pcd-home-services__list li::before {
content: "";
position: absolute;
left: 0;
top: .6em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--pcd-primary);
}
/* Liste "liens réels" (les 4 cartes, chacune vers ses propres prestations) :
au repos, apparence de liste simple (sans soulignement). Au survol de la
CARTE (desktop uniquement), la liste se transforme en petits boutons
empilés ; au survol du LIEN lui-même (2e niveau), le bouton se remplit de
var(--pcd-primary) — seul ce lien porte cursor:pointer, jamais la carte. */
.pcd-home-services__list--linked {
display: flex;
flex-direction: column;
gap: var(--pcd-space-1);
}
.pcd-home-services__list--linked li {
padding-left: 0;
margin-bottom: 0;
}
.pcd-home-services__list--linked li::before {
display: none;
}
/* Géométrie du bouton réservée dès le repos (bordure transparente de même
épaisseur qu'au survol) : le survol de la carte ne change plus jamais la
taille du lien, seulement sa couleur (voir la règle hover plus bas). */
.pcd-home-services__list--linked a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: calc(var(--pcd-space-2) * .75) var(--pcd-space-3);
border: 1px solid transparent;
border-radius: var(--pcd-radius-sm);
background: transparent;
color: inherit;
text-decoration: none;
transition: background-color .2s var(--pcd-ease), border-color .2s var(--pcd-ease), color .2s var(--pcd-ease);
}
/* opacity:0 (pas display:none) : la flèche réserve sa place au repos, elle
n'apparaît qu'au survol (voir la règle hover plus bas). */
.pcd-home-services__list-arrow {
display: inline-block;
opacity: 0;
transition: opacity .15s var(--pcd-ease), transform .2s var(--pcd-ease);
}
@media (hover: hover) and (pointer: fine) {
/* La carte est survolée : la géométrie du bouton (display/flex/padding/
bordure) est déjà réservée dans la règle de base, identique au repos —
ici, uniquement un changement d'APPARENCE (couleur de bordure/texte). */
.pcd-home-services__card:hover .pcd-home-services__list--linked a {
border-color: color-mix(in srgb, var(--pcd-primary-contrast) 32%, transparent);
background: transparent;
color: var(--pcd-primary-contrast);
}
.pcd-home-services__card:hover .pcd-home-services__list-arrow {
opacity: 1;
}
/* 2e niveau : survol du lien précis -> seul élément avec cursor:pointer. */
.pcd-home-services__card:hover .pcd-home-services__list--linked a:hover {
background: var(--pcd-primary);
border-color: var(--pcd-primary);
color: var(--pcd-primary-contrast);
cursor: pointer;
}
.pcd-home-services__card:hover .pcd-home-services__list--linked a:hover .pcd-home-services__list-arrow {
transform: translateX(3px);
}
}
/* ================================================== Tactile (pas de hover réel)
Détection par CAPACITÉ, pas par largeur d'écran : un appareil sans vrai
survol (hover:none) OU à pointeur imprécis (pointer:coarse — doigt) reçoit
directement l'état "carte finalisée" qui sert de survol sur desktop. Pas
de cadre technique à "révéler" par un tap, et surtout AUCUNE règle :hover
ici : sur iOS/Android, un :hover qui ne se dépose qu'après un tap oblige à
taper une 2e fois sur le lien pour naviguer ("sticky hover") — en gardant
ces styles hors de :hover, le premier tap sur un lien navigue directement.
Le comportement desktop (@media hover:hover and pointer:fine, ci-dessus)
reste intégralement inchangé — les deux media queries sont mutuellement
exclusives en pratique (un appareil ne matche jamais les deux). */
@media (hover: none), (pointer: coarse) {
.pcd-home-services__card {
outline-color: var(--pcd-primary);
}
.pcd-home-services__card .pcd-home-services__card-fill {
opacity: 1;
}
.pcd-home-services__card .pcd-home-services__frame-edge,
.pcd-home-services__card .pcd-home-services__frame-line {
opacity: 0;
}
.pcd-home-services__card .pcd-home-services__card-title {
color: var(--pcd-primary-contrast);
}
.pcd-home-services__card .pcd-home-services__card-text {
color: color-mix(in srgb, var(--pcd-primary-contrast) 78%, transparent);
}
.pcd-home-services__card .pcd-home-services__list {
border-top-color: color-mix(in srgb, var(--pcd-primary-contrast) 24%, transparent);
color: color-mix(in srgb, var(--pcd-primary-contrast) 78%, transparent);
}
/* Apparence bouton visible immédiatement (pas d'attente d'un tap) : la
géométrie (display/flex/gap/padding/bordure) vit désormais dans la
règle de base — ici, uniquement l'apparence tactile (bordure/couleur
visibles, flèche affichée). Pas de règle :hover/:active ici — le tap
doit naviguer dès la première pression, comme un lien normal. */
.pcd-home-services__card .pcd-home-services__list--linked a {
border-color: color-mix(in srgb, var(--pcd-primary-contrast) 32%, transparent);
color: var(--pcd-primary-contrast);
}
.pcd-home-services__card .pcd-home-services__list-arrow {
opacity: 1;
}
}
.pcd-home-services__cta {
margin-top: var(--pcd-space-8);
text-align: center;
}
@media (max-width: 1250px) {
.pcd-home-services__grid {
grid-template-columns: repeat(2, 1fr);
/* Repères plus courts (mêmes valeurs que le Hero à son propre palier
tablette, voir cd-hero.css --cd-frame-gap/--cd-frame-len ≤1024px) →
un gap de grille plus modeste suffit à les garder disjoints. */
gap: var(--pcd-space-8);
/* padding-block (règle de base) recalcule automatiquement sa zone de
sécurité à partir de ces nouvelles valeurs : 8px + 16px = 24px. */
--pcd-card-frame-gap: 8px;
--pcd-card-frame-len: 16px;
}
/* Grille resserrée en 2 colonnes : le grand bloc (50px) devient "moyen"
(mêmes valeurs que .pcd-modblock--md, pour ne pas inventer de nouvelle
dimension) et le 4e groupe (petit, redondant à cette taille de section)
est masqué — composition allégée pour éviter tout risque de collision
avec des cartes plus proches des bords. */
.pcd-home-services__modules [data-svc-mod="1"] .pcd-modblock--lg {
--pcd-mod-size: 25px;
--pcd-mod-radius: 5px;
}
.pcd-home-services__modules [data-svc-mod="4"] {
display: none;
}
}
/* Tablette large EN PAYSAGE : encore 4 colonnes (contrairement au palier
≤1250px ci-dessus, qui passe à 2), mais avec moins de largeur qu'un vrai
desktop — le gap desktop (--pcd-space-9, 80px) y paraît excessif entre 4
cartes plus étroites. Borne haute 1400px : au-delà, on considère l'écran
comme un vrai desktop et on garde le gap/hauteur d'origine (non touchés
ici, aucun changement au-delà de cette borne ni en-deçà de 1251px). */
@media (min-width: 1251px) and (max-width: 1400px) {
.pcd-home-services__grid {
gap: var(--pcd-space-7);
/* Repères raccourcis en proportion du gap réduit (portée 16px de
chaque côté, 2×16=32px < 48px de gap — restent disjoints, même
logique que le calcul déjà en commentaire pour le palier ≤1250px). */
--pcd-card-frame-gap: 4px;
--pcd-card-frame-len: 12px;
}
.pcd-home-services__card {
min-height: 430px;
}
}
@media (max-width: 560px) {
.pcd-home-services__grid {
grid-template-columns: 1fr;
}
/* Une seule petite décoration conservée (bandeau haut, discrète) : les
groupes grand/moyen/2e petit sont masqués, comme demandé pour le
smartphone ("1 ou 2 petits motifs, masque les autres"). */
.pcd-home-services__modules [data-svc-mod="1"],
.pcd-home-services__modules [data-svc-mod="2"],
.pcd-home-services__modules [data-svc-mod="4"] {
display: none;
}
}
/* ================================================================ Secteurs
Présente les 4 secteurs déjà définis dans le méga-menu (voir
inc/nav-setup.php, "Secteurs") avec une accroche marketing. Design
volontairement différent du Hero (cadrage technique) et des Services
(cartes) : fond sombre + mise en page en 2 colonnes accroche + liste
éditoriale à index (.pcd-index-list, générique — voir globale.css) au
lieu d'un cadrage technique ou de cartes. Ici : uniquement la mise en
page propre à cette section — le motif de liste lui-même (filet, numéro,
espacement) vit dans globale.css.
Fond : --pcd-primary-hover, PAS une nouvelle couleur — c'est exactement
le fond sombre déjà validé pour les cartes Services au survol (charte
existante, pas de gris hors-charte). Les 5 variables réassignées
ci-dessous sont toutes des tokens génériques de globale.css : les
redéfinir localement sur .pcd-home-sectors suffit à faire basculer en
clair tout ce qui, plus bas, les utilise déjà (titre, texte, filets de la
liste, numéros, survol des liens) — même technique que le survol sombre
des cartes Services (color-mix vers --pcd-primary-contrast). */
.pcd-home-sectors {
position: relative;
z-index: 0; /* nécessaire pour que le z-index:-1 des décorations
ci-dessous reste local à cette section (cf. bug corrigé
sur .pcd-home-services). */
background-color: var(--pcd-primary-hover);
--pcd-heading: var(--pcd-primary-contrast);
--pcd-text-muted: color-mix(in srgb, var(--pcd-primary-contrast) 70%, transparent);
--pcd-border: color-mix(in srgb, var(--pcd-primary-contrast) 24%, transparent);
--pcd-link-hover: var(--pcd-primary-contrast);
--pcd-index-color: var(--pcd-primary); /* chiffre bleu au repos sur les cartes secteurs */
}
/* Décoration : même motif générique .pcd-modgroup/.pcd-modblock que le Hero
et les Services (globale.css) — un seul groupe, discret, coin haut-droit.
Uniquement des blocs --blue (jamais --navy, trop proche du fond sombre
ici pour rester lisible) : mêmes classes, choix de modificateur adapté au
contexte, aucune nouvelle couleur. */
.pcd-home-sectors__modules {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.pcd-home-sectors__modules .pcd-modgroup[data-sec-mod="1"] {
top: var(--pcd-space-6);
right: 6%;
}
.pcd-home-sectors__modules .pcd-modgroup[data-sec-mod="2"] {
bottom: var(--pcd-space-6);
left: 6%;
}
/* Grille 2 colonnes rééquilibrée (≈43% / 57%, au lieu d'une colonne de texte
fixe à 380px qui laissait la liste occuper l'essentiel de la largeur). */
.pcd-home-sectors__inner {
display: grid;
grid-template-columns: 1.1fr 1.2fr;
align-items: start;
gap: var(--pcd-space-10);
}
.pcd-home-sectors__intro {
max-width: 600px;
}
.pcd-home-sectors__eyebrow {
margin: 0 0 var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-xs);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
color: var(--pcd-primary);
}
.pcd-home-sectors__title {
margin: 0 0 var(--pcd-space-4);
}
.pcd-home-sectors__lead {
margin: 0 0 var(--pcd-space-6);
color: var(--pcd-text-muted);
}
/* Bouton "Parlons de votre secteur" : le survol générique de .pcd-btn
(globale.css) passe le fond en var(--pcd-primary-hover) — exactement la
couleur de fond de CETTE section (--pcd-home-sectors), donc le bouton
devenait invisible au survol. Uniquement ici : fond blanc / texte sombre
au survol, sans toucher au bouton générique utilisé ailleurs (Hero,
CTA Services) sur fond clair où le survol sombre reste correct. */
.pcd-home-sectors .pcd-btn:hover,
.pcd-home-sectors .pcd-btn:focus-visible {
background: var(--pcd-primary-contrast);
color: var(--pcd-text);
}
.pcd-home-sectors__list {
min-width: 0;
display: flex;
flex-direction: column;
/* Gap resserré (trop d'espace entre les cartes) : les repères de coin de
chaque carte débordent de --pcd-card-frame-gap + --pcd-card-frame-len
de part et d'autre — il faut donc rester au-dessus de 2×(2+16)=36px
pour que les traits de deux cartes voisines restent disjoints (voir
.pcd-home-services__grid pour le même calcul). 48px (--pcd-space-7)
laisse 12px de marge réelle au lieu des 16px d'avant (--pcd-space-8,
64px) — repères raccourcis en proportion (22px → 16px) pour ne pas
revenir au problème de traits qui se touchent. */
gap: var(--pcd-space-7);
padding-inline: 0;
/* Variables de géométrie du cadre technique portées ici (héritées par
.pcd-home-sectors__card, qui ne les redéclare plus) — même principe que
.pcd-home-services__grid : le wrapper absorbe l'emprise réelle des
repères (frame-gap + frame-len) à l'intérieur de sa propre zone,
jamais dans le padding de la SECTION (--pcd-section-y, inchangé). */
--pcd-card-frame-gap: 2px;
--pcd-card-frame-len: 16px;
padding-block: calc(var(--pcd-card-frame-gap) + var(--pcd-card-frame-len));
}
/* --- Cartes secteurs : même mécanique que .pcd-home-services__card
(cadre technique au repos → fondu vers une couche de remplissage +
bordure bleue au survol), mais EN LONGUEUR (une rangée large et basse au
lieu d'une carte carrée) et avec la logique de couleur INVERSÉE : la
section étant déjà sombre, la carte est transparente au repos (le fond
sombre de la section se voit à travers, traits techniques clairs) et
devient BLANCHE au survol (texte sombre) — l'exact inverse des cartes
Services (blanches au repos, sombres au survol). Bordure bleue et liens
inchangés : seul le rapport clair/sombre s'inverse. */
.pcd-home-sectors__card {
position: relative;
display: grid;
grid-template-columns: var(--pcd-index-list-col, 72px) 1fr;
align-items: center;
/* Réduit (--pcd-space-5, 24px, hérité du motif générique .pcd-index-list
de globale.css) : trop d'espace entre le chiffre et le bloc de texte
dans cette section spécifiquement — override local, le motif générique
n'est pas touché. */
gap: var(--pcd-space-4);
background: color-mix(
in srgb,
var(--pcd-primary-hover) 96%,
white
); /* section sombre → carte transparente au repos, traits techniques visibles */
padding: var(--pcd-space-3) var(--pcd-space-6);
border-top: none; /* remplace le filet du .pcd-index-list générique par le cadre technique */
border-radius: 6px;
outline: 1px solid color-mix(in srgb, var(--pcd-primary) 0%, transparent);
outline-offset: var(--pcd-card-frame-gap);
transition: outline-color .11s var(--pcd-ease);
/* --pcd-card-frame-gap / --pcd-card-frame-len : héritées de
.pcd-home-sectors__list (portées là-haut pour que le wrapper calcule
sa zone de sécurité à partir des mêmes valeurs) — plus redéclarées ici. */
/* Carte cliquable dans son ensemble (voir .pcd-home-sectors__card-link
ci-dessous) : le curseur le signale sur toute sa surface, pas
seulement sur le texte du titre. */
cursor: pointer;
}
.pcd-home-sectors__card:last-child {
border-bottom: none;
}
.pcd-home-sectors__card-fill {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 6px;
background: var(--pcd-surface); /* BLANC — inversé par rapport au fond sombre des cartes Services */
opacity: 0;
pointer-events: none;
transition: opacity .11s var(--pcd-ease);
}
.pcd-home-sectors__card .pcd-index-list__index,
.pcd-home-sectors__card .pcd-index-list__body {
position: relative;
z-index: 2;
}
/* Lien "étiré" (stretched link) : SEUL le titre reste un vrai (texte du
lien = nom du secteur, pour le SEO et les lecteurs d'écran), mais son
::after, positionné en absolute + inset:0, s'étire jusqu'aux bords de la
carte (son ancêtre positionné le plus proche — le lui-même reste
volontairement position:static, sinon ::after s'étirerait seulement à la
taille du texte du lien, pas de la carte). Résultat : toute la carte
devient cliquable, sans avoir à englober tout son contenu dans un .
content:"" ne dessine rien : le texte reste visible normalement en
dessous, seule la zone cliquable change. Ne modifie ni le flux ni la
hauteur de la carte. */
.pcd-home-sectors__card .pcd-index-list__title a {
text-decoration: none;
/* Blanc pur au repos : l'ancre a sa propre couleur explicite (var(--pcd-link)
côté globale.css), qui l'emporterait sinon sur le blanc hérité de
--pcd-heading (déjà réassigné en blanc au niveau de la section). */
color: var(--pcd-primary-contrast);
}
.pcd-home-sectors__card .pcd-index-list__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
/* Repère visuel de clic : flèche fixe (jamais dans le flux — top:50% +
transform, donc aucun impact sur la hauteur de la carte), toujours
visible (pas seulement au survol) puisque c'est elle qui signale que la
carte entière est cliquable, avant même le survol. */
.pcd-home-sectors__arrow {
position: absolute;
bottom: var(--pcd-space-3);
right: var(--pcd-space-6);
z-index: 2;
color: var(--pcd-primary);
font-size: var(--pcd-text-lg);
line-height: 1;
opacity: 0; /* n'apparaît qu'au survol (ou par défaut au tactile, voir plus bas) */
pointer-events: none;
transition: transform .2s var(--pcd-ease), color .11s var(--pcd-ease), opacity .15s var(--pcd-ease);
}
@media (hover: hover) and (pointer: fine) {
.pcd-home-sectors__card:hover {
outline-color: var(--pcd-primary);
transition-duration: .15s;
}
.pcd-home-sectors__card:hover .pcd-home-sectors__card-fill {
opacity: 1;
transition-duration: .15s;
}
.pcd-home-sectors__card:hover .pcd-home-sectors__frame-edge,
.pcd-home-sectors__card:hover .pcd-home-sectors__frame-line {
opacity: 0;
}
.pcd-home-sectors__card:hover .pcd-index-list__title,
.pcd-home-sectors__card:hover .pcd-index-list__title a {
color: var(--pcd-gray-900);
transition-duration: .15s;
}
.pcd-home-sectors__card:hover .pcd-index-list__text {
color: var(--pcd-gray-600);
transition-duration: .15s;
}
/* Le survol du lien lui-même (--pcd-link-hover) est réassigné en blanc au
niveau de la section (voir .pcd-home-sectors) pour rester lisible sur
fond sombre — ici la carte devient blanche au survol, donc le survol
du lien doit redevenir sombre pour cette carte précisément. */
.pcd-home-sectors__card:hover {
--pcd-link-hover: var(--pcd-primary-hover);
}
.pcd-home-sectors__card:hover .pcd-home-sectors__arrow {
color: var(--pcd-primary);
opacity: 1;
transform: translateX(4px);
}
}
/* Angles — copie directe de .pcd-home-services__frame-edge (même géométrie,
indépendante du ratio largeur/hauteur de la carte), couleur inversée :
traits clairs sur fond sombre au repos (au lieu de traits sombres sur
fond clair). */
.pcd-home-sectors__card > .pcd-home-sectors__frame-edge {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
opacity: 1;
transition: opacity .14s var(--pcd-ease);
}
.pcd-home-sectors__frame-edge::before,
.pcd-home-sectors__frame-edge::after {
content: "";
position: absolute;
background: color-mix(in srgb, var(--pcd-primary-contrast) 40%, transparent);
}
.pcd-home-sectors__frame-edge::before { width: var(--pcd-card-frame-len); height: 1px; }
.pcd-home-sectors__frame-edge::after { width: 1px; height: var(--pcd-card-frame-len); }
.pcd-home-sectors__frame-edge[data-edge="t"] {
top: calc(-1 * var(--pcd-card-frame-gap));
left: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-sectors__frame-edge[data-edge="t"]::before { top: 0; right: 0; }
.pcd-home-sectors__frame-edge[data-edge="t"]::after { left: 0; bottom: 0; }
.pcd-home-sectors__frame-edge[data-edge="r"] {
top: calc(-1 * var(--pcd-card-frame-gap));
right: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-sectors__frame-edge[data-edge="r"]::before { top: 0; left: 0; }
.pcd-home-sectors__frame-edge[data-edge="r"]::after { right: 0; bottom: 0; }
.pcd-home-sectors__frame-edge[data-edge="b"] {
bottom: calc(-1 * var(--pcd-card-frame-gap));
right: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-sectors__frame-edge[data-edge="b"]::before { bottom: 0; left: 0; }
.pcd-home-sectors__frame-edge[data-edge="b"]::after { right: 0; top: 0; }
.pcd-home-sectors__frame-edge[data-edge="l"] {
bottom: calc(-1 * var(--pcd-card-frame-gap));
left: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-sectors__frame-edge[data-edge="l"]::before { bottom: 0; right: 0; }
.pcd-home-sectors__frame-edge[data-edge="l"]::after { left: 0; top: 0; }
/* Prolongements — copie directe de .pcd-home-services__frame-line, couleur
inversée (claire, très discrète, sur fond sombre). */
.pcd-home-sectors__frame-line {
position: absolute;
background: color-mix(in srgb, var(--pcd-primary-contrast) 10%, transparent);
pointer-events: none;
opacity: 1;
transition: opacity .14s var(--pcd-ease);
}
.pcd-home-sectors__frame-line[data-axis="h"] { height: 1px; width: calc(50% + var(--pcd-card-frame-gap) - 12px); }
.pcd-home-sectors__frame-line[data-axis="v"] { width: 1px; height: calc(50% + var(--pcd-card-frame-gap) - 12px); }
.pcd-home-sectors__frame-line[data-edge="t"] { top: calc(-1 * var(--pcd-card-frame-gap)); left: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-sectors__frame-line[data-edge="r"] { top: calc(-1 * var(--pcd-card-frame-gap)); right: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-sectors__frame-line[data-edge="b"] { bottom: calc(-1 * var(--pcd-card-frame-gap)); right: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-sectors__frame-line[data-edge="l"] { bottom: calc(-1 * var(--pcd-card-frame-gap)); left: calc(-1 * var(--pcd-card-frame-gap)); }
/* Tactile : même principe que .pcd-home-services__card — pas de vrai survol
disponible, la carte "finie" (blanche) est donc affichée par défaut,
jamais via :hover (évite le sticky-hover iOS/Android). */
@media (hover: none), (pointer: coarse) {
.pcd-home-sectors__card {
outline-color: var(--pcd-primary);
--pcd-link-hover: var(--pcd-primary-hover);
}
.pcd-home-sectors__card .pcd-home-sectors__card-fill {
opacity: 1;
}
.pcd-home-sectors__card .pcd-home-sectors__frame-edge,
.pcd-home-sectors__card .pcd-home-sectors__frame-line {
opacity: 0;
}
.pcd-home-sectors__card .pcd-index-list__title,
.pcd-home-sectors__card .pcd-index-list__title a {
color: var(--pcd-gray-900);
}
.pcd-home-sectors__card .pcd-index-list__text {
color: var(--pcd-gray-600);
}
.pcd-home-sectors__card .pcd-home-sectors__arrow {
color: var(--pcd-primary);
opacity: 1;
}
}
@media (max-width: 980px) {
.pcd-home-sectors__inner {
grid-template-columns: 1fr;
gap: 0;
}
.pcd-home-sectors__intro {
max-width: none;
}
}
/* ============================================================ Réalisations
Met en avant une étude de cas complète (contenu repris de la future page
dédiée /realisations/les-amis-de-la-nature/) : une seule carte "vitrine"
au cadrage technique identique aux cartes Services (section claire, comme
Services — referme la page sur un ton clair après la section sombre
Secteurs), associée à l'image du projet. En-tête centré (contrairement à
Services/Secteurs, alignés à gauche) : volontairement différent pour
marquer que c'est la dernière section avant le footer. */
.pcd-home-realisations {
position: relative;
z-index: 0; /* nécessaire pour que le z-index:-1 des décorations
ci-dessous reste local à cette section (cf. bug corrigé
sur .pcd-home-services). */
}
.pcd-home-realisations__modules {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.pcd-home-realisations__modules .pcd-modgroup[data-real-mod="1"] {
top: var(--pcd-space-8);
right: 6%;
}
.pcd-home-realisations__head {
max-width: 720px;
margin: 0 auto var(--pcd-space-6);
text-align: center;
}
.pcd-home-realisations__eyebrow {
margin: 0 0 var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-xs);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
color: var(--pcd-primary);
}
.pcd-home-realisations__title {
margin: 0 0 var(--pcd-space-4);
}
.pcd-home-realisations__highlight {
color: var(--pcd-primary);
}
.pcd-home-realisations__lead {
margin: 0;
color: var(--pcd-text-muted);
}
/* Wrapper carte + visuel : mêmes variables de géométrie de cadre que
.pcd-home-services__grid, pour que le padding-block absorbe l'emprise
réelle du cadre (frame-gap + frame-len) sans jamais empiéter sur le
padding de la SECTION (--pcd-section-y, inchangé, reste à l'extérieur). */
.pcd-home-realisations__project {
display: grid;
grid-template-columns: 1fr 1.1fr;
/* Alignement supérieur strict : le bloc texte et l'image démarrent sur le
même axe horizontal (auparavant centrés, ce qui les faisait paraître
comme deux éléments indépendants plutôt que les deux moitiés d'un même
cas client). Les hauteurs naturelles restent libres de différer. */
align-items: start;
/* Resserré de --pcd-space-10 (96px) à --pcd-space-7 (48px) : séparation
toujours nette, mais lecture plus évidente comme un seul bloc. */
gap: var(--pcd-space-11);
--pcd-card-frame-gap: 2px;
--pcd-card-frame-len: 22px;
padding-block: calc(var(--pcd-card-frame-gap) + var(--pcd-card-frame-len));
}
.pcd-home-realisations__card {
position: relative;
padding: var(--pcd-space-5) var(--pcd-space-6);
background: var(--pcd-fond);
margin-right: var(--pcd-space-6);
}
.pcd-home-realisations__card-title {
margin: 0 0 var(--pcd-space-4);
}
.pcd-home-realisations__card-text {
margin: 0 0 var(--pcd-space-4);
color: var(--pcd-text-muted);
}
.pcd-home-realisations__list {
margin: 0 0 var(--pcd-space-6);
padding: 0;
list-style: none;
}
.pcd-home-realisations__list li {
position: relative;
padding-left: var(--pcd-space-4);
margin-bottom: var(--pcd-space-2);
}
.pcd-home-realisations__list li:last-child {
margin-bottom: 0;
}
.pcd-home-realisations__list li::before {
content: "";
position: absolute;
left: 0;
top: .6em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--pcd-primary);
}
/* Angles/traits — copie directe de .pcd-home-services__frame-edge/-line
(même géométrie, mêmes couleurs : section claire comme Services). Pas de
fondu au survol ici : cette carte n'est pas elle-même cliquable, seul le
bouton l'est (voir .pcd-btn ci-dessus) — le cadre reste donc visible en
permanence, à la différence des cartes Services/Secteurs. */
.pcd-home-realisations__card > .pcd-home-realisations__frame-edge {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.pcd-home-realisations__frame-edge::before,
.pcd-home-realisations__frame-edge::after {
content: "";
position: absolute;
background: rgba(40, 40, 40, .4);
}
.pcd-home-realisations__frame-edge::before { width: var(--pcd-card-frame-len); height: 1px; }
.pcd-home-realisations__frame-edge::after { width: 1px; height: var(--pcd-card-frame-len); }
.pcd-home-realisations__frame-edge[data-edge="t"] {
top: calc(-1 * var(--pcd-card-frame-gap));
left: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-realisations__frame-edge[data-edge="t"]::before { top: 0; right: 0; }
.pcd-home-realisations__frame-edge[data-edge="t"]::after { left: 0; bottom: 0; }
.pcd-home-realisations__frame-edge[data-edge="r"] {
top: calc(-1 * var(--pcd-card-frame-gap));
right: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-realisations__frame-edge[data-edge="r"]::before { top: 0; left: 0; }
.pcd-home-realisations__frame-edge[data-edge="r"]::after { right: 0; bottom: 0; }
.pcd-home-realisations__frame-edge[data-edge="b"] {
bottom: calc(-1 * var(--pcd-card-frame-gap));
right: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-realisations__frame-edge[data-edge="b"]::before { bottom: 0; left: 0; }
.pcd-home-realisations__frame-edge[data-edge="b"]::after { right: 0; top: 0; }
.pcd-home-realisations__frame-edge[data-edge="l"] {
bottom: calc(-1 * var(--pcd-card-frame-gap));
left: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-realisations__frame-edge[data-edge="l"]::before { bottom: 0; right: 0; }
.pcd-home-realisations__frame-edge[data-edge="l"]::after { left: 0; top: 0; }
.pcd-home-realisations__frame-line {
position: absolute;
background: rgba(40, 40, 40, .10);
pointer-events: none;
}
.pcd-home-realisations__frame-line[data-axis="h"] { height: 1px; width: calc(50% + var(--pcd-card-frame-gap) - 12px); }
.pcd-home-realisations__frame-line[data-axis="v"] { width: 1px; height: calc(50% + var(--pcd-card-frame-gap) - 12px); }
.pcd-home-realisations__frame-line[data-edge="t"] { top: calc(-1 * var(--pcd-card-frame-gap)); left: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-realisations__frame-line[data-edge="r"] { top: calc(-1 * var(--pcd-card-frame-gap)); right: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-realisations__frame-line[data-edge="b"] { bottom: calc(-1 * var(--pcd-card-frame-gap)); right: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-realisations__frame-line[data-edge="l"] { bottom: calc(-1 * var(--pcd-card-frame-gap)); left: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-realisations__visual {
position: relative;
border: solid 1px rgba(40, 40, 40, .2);
}
.pcd-home-realisations__visual-img {
display: block;
width: 100%;
/* Rayon dédié du Hero (--cd-radius-screen, globale.css §1.12 — "arrondi
très léger, presque architectural") + ombre diffuse identique à
.cd-builder__screen : un bord souple, jamais une ligne de contour —
le cadrage lui-même vient UNIQUEMENT des 4 repères d'angle ci-dessous
(pas de border ici : une bordure continue fermerait visuellement le
rectangle, à l'opposé du "coins ouverts" recherché). */
border-radius: var(--cd-radius-screen);
box-shadow:
0 18px 45px rgba(23, 23, 15, .055),
0 2px 8px rgba(23, 23, 15, .03);
}
/* Repères d'angle — même mécanique et mêmes valeurs que
.cd-builder__screen-edge (cd-hero.css) : ancrés SANS écart exactement aux
coins réels de l'image (gap:0, comme le screen du Hero), branches courtes
(13px) et discrètes (opacité .2). C'est ICI, et seulement ici, que vit le
langage "cadrage technique" repris du Hero — 4 coins ouverts, jamais une
bordure fermée. */
.pcd-home-realisations__visual-edge {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.pcd-home-realisations__visual-edge::before,
.pcd-home-realisations__visual-edge::after {
content: "";
position: absolute;
background: rgba(40, 40, 40, .2);
}
.pcd-home-realisations__visual-edge::before { width: 13px; height: 1px; }
.pcd-home-realisations__visual-edge::after { width: 1px; height: 13px; }
.pcd-home-realisations__visual-edge[data-edge="t"] { top: -1px; left: -1px; }
.pcd-home-realisations__visual-edge[data-edge="t"]::before { top: 0; right: 0; }
.pcd-home-realisations__visual-edge[data-edge="t"]::after { left: 0; bottom: 0; }
.pcd-home-realisations__visual-edge[data-edge="r"] { top: -1px; right: -1px; }
.pcd-home-realisations__visual-edge[data-edge="r"]::before { top: 0; left: 0; }
.pcd-home-realisations__visual-edge[data-edge="r"]::after { right: 0; bottom: 0; }
.pcd-home-realisations__visual-edge[data-edge="b"] { bottom: -1px; right: -1px; }
.pcd-home-realisations__visual-edge[data-edge="b"]::before { bottom: 0; left: 0; }
.pcd-home-realisations__visual-edge[data-edge="b"]::after { right: 0; top: 0; }
.pcd-home-realisations__visual-edge[data-edge="l"] { bottom: -1px; left: -1px; }
.pcd-home-realisations__visual-edge[data-edge="l"]::before { bottom: 0; right: 0; }
.pcd-home-realisations__visual-edge[data-edge="l"]::after { left: 0; top: 0; }
@media (max-width: 980px) {
.pcd-home-realisations__project {
grid-template-columns: 1fr;
gap: var(--pcd-space-9);
}
}
@media (max-width: 560px) {
.pcd-home-realisations__card {
padding: var(--pcd-space-6) var(--pcd-space-4);
}
}
/* ================================================================ À propos
Layout 2 colonnes : présentation gauche + panneau engagements droite.
Fond sombre (alternance avec Réalisations). */
.pcd-home-about {
position: relative;
background-color: var(--pcd-primary-hover);
--pcd-heading: var(--pcd-primary-contrast);
--pcd-text-muted: color-mix(in srgb, var(--pcd-primary-contrast) 70%, transparent);
--pcd-border: color-mix(in srgb, var(--pcd-primary-contrast) 24%, transparent);
--pcd-link-hover: var(--pcd-primary-contrast);
}
.pcd-home-about__inner {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--pcd-space-10);
align-items: start;
}
.pcd-home-about__eyebrow {
margin: 0 0 var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-xs);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
color: var(--pcd-primary);
}
.pcd-home-about__title {
margin: 0 0 var(--pcd-space-4);
}
.pcd-home-about__lead {
margin: 0 0 var(--pcd-space-5);
color: var(--pcd-text-muted);
}
.pcd-home-about__details {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pcd-space-2);
margin: 0 0 var(--pcd-space-5);
font-family: var(--pcd-font-sans);
font-size: var(--pcd-text-sm);
font-weight: var(--pcd-weight-medium);
color: var(--pcd-primary-contrast);
}
.pcd-home-about__details-sep {
color: var(--pcd-primary);
}
/* Badge France Num + bouton "Découvrir Click Digital" sur une même ligne :
wrap flex dédié (voir home.php) — flex-wrap au cas où l'espace vienne à
manquer (mobile étroit), plutôt qu'un débordement. */
.pcd-home-about__badge-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--pcd-space-4);
margin: 0 0 var(--pcd-space-6);
}
.pcd-home-about__badge {
display: inline-flex;
align-items: center;
gap: var(--pcd-space-2);
margin: 0;
padding: var(--pcd-space-2) var(--pcd-space-4);
border: 1px solid color-mix(in srgb, var(--pcd-primary) 40%, transparent);
border-radius: var(--pcd-radius-pill);
font-family: var(--pcd-font-sans);
font-size: var(--pcd-text-sm);
font-weight: var(--pcd-weight-medium);
color: var(--pcd-primary-contrast);
}
.pcd-home-about__badge-icon {
color: var(--pcd-primary);
font-weight: var(--pcd-weight-bold);
}
.pcd-home-about__cta {
margin: 0;
}
.pcd-home-about .pcd-btn:hover,
.pcd-home-about .pcd-btn:focus-visible {
background: var(--pcd-primary-contrast);
color: var(--pcd-text);
}
/* Panneau engagements */
.pcd-home-about__panel {
position: relative;
padding: var(--pcd-space-5) var(--pcd-space-6);
--pcd-panel-frame-gap: 2px;
--pcd-panel-frame-len: 22px;
margin-top: var(--pcd-space-6);
}
.pcd-home-about__panel-title {
margin: 0 0 var(--pcd-space-6);
font-size: var(--pcd-text-lg);
color: var(--pcd-primary-contrast);
}
.pcd-home-about__commitment {
position: relative;
padding-left: var(--pcd-space-5);
padding-bottom: var(--pcd-space-5);
margin-bottom: var(--pcd-space-5);
border-bottom: 1px solid var(--pcd-border);
}
.pcd-home-about__commitment:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.pcd-home-about__commitment-accent {
position: absolute;
left: 0;
top: 4px;
width: 3px;
height: var(--pcd-space-5);
background: var(--pcd-primary);
border-radius: 2px;
}
.pcd-home-about__commitment-title {
margin: 0 0 var(--pcd-space-1);
font-size: var(--pcd-text-base);
font-weight: var(--pcd-weight-semibold);
color: var(--pcd-primary-contrast);
}
.pcd-home-about__commitment-text {
margin: 0;
font-size: var(--pcd-text-sm);
color: var(--pcd-text-muted);
}
/* Frame edges du panneau (fins et discrets) */
.pcd-home-about__panel-edge {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.pcd-home-about__panel-edge::before,
.pcd-home-about__panel-edge::after {
content: "";
position: absolute;
background: color-mix(in srgb, var(--pcd-primary-contrast) 40%, transparent);
}
.pcd-home-about__panel-edge::before { width: var(--pcd-panel-frame-len); height: 1px; }
.pcd-home-about__panel-edge::after { width: 1px; height: var(--pcd-panel-frame-len); }
.pcd-home-about__panel-edge[data-edge="t"] {
top: calc(-1 * var(--pcd-panel-frame-gap));
left: calc(-1 * var(--pcd-panel-frame-gap));
}
.pcd-home-about__panel-edge[data-edge="t"]::before { top: 0; right: 0; }
.pcd-home-about__panel-edge[data-edge="t"]::after { left: 0; bottom: 0; }
.pcd-home-about__panel-edge[data-edge="r"] {
top: calc(-1 * var(--pcd-panel-frame-gap));
right: calc(-1 * var(--pcd-panel-frame-gap));
}
.pcd-home-about__panel-edge[data-edge="r"]::before { top: 0; left: 0; }
.pcd-home-about__panel-edge[data-edge="r"]::after { right: 0; bottom: 0; }
.pcd-home-about__panel-edge[data-edge="b"] {
bottom: calc(-1 * var(--pcd-panel-frame-gap));
right: calc(-1 * var(--pcd-panel-frame-gap));
}
.pcd-home-about__panel-edge[data-edge="b"]::before { bottom: 0; left: 0; }
.pcd-home-about__panel-edge[data-edge="b"]::after { right: 0; top: 0; }
.pcd-home-about__panel-edge[data-edge="l"] {
bottom: calc(-1 * var(--pcd-panel-frame-gap));
left: calc(-1 * var(--pcd-panel-frame-gap));
}
.pcd-home-about__panel-edge[data-edge="l"]::before { bottom: 0; right: 0; }
.pcd-home-about__panel-edge[data-edge="l"]::after { left: 0; top: 0; }
/* Prolongements du panneau */
.pcd-home-about__panel-line {
position: absolute;
background: color-mix(in srgb, var(--pcd-primary-contrast) 10%, transparent);
pointer-events: none;
}
.pcd-home-about__panel-line[data-axis="h"] { height: 1px; width: calc(50% + var(--pcd-panel-frame-gap) - 12px); }
.pcd-home-about__panel-line[data-axis="v"] { width: 1px; height: calc(50% + var(--pcd-panel-frame-gap) - 12px); }
.pcd-home-about__panel-line[data-edge="t"] { top: calc(-1 * var(--pcd-panel-frame-gap)); left: calc(-1 * var(--pcd-panel-frame-gap)); }
.pcd-home-about__panel-line[data-edge="r"] { top: calc(-1 * var(--pcd-panel-frame-gap)); right: calc(-1 * var(--pcd-panel-frame-gap)); }
.pcd-home-about__panel-line[data-edge="b"] { bottom: calc(-1 * var(--pcd-panel-frame-gap)); right: calc(-1 * var(--pcd-panel-frame-gap)); }
.pcd-home-about__panel-line[data-edge="l"] { bottom: calc(-1 * var(--pcd-panel-frame-gap)); left: calc(-1 * var(--pcd-panel-frame-gap)); }
/* Responsive */
@media (max-width: 900px) {
.pcd-home-about__inner {
grid-template-columns: 1fr;
gap: 0;
}
.pcd-home-about__intro {
order: 1;
}
.pcd-home-about__panel {
order: 2;
}
}
@media (max-width: 560px) {
.pcd-home-about__details {
flex-direction: column;
align-items: flex-start;
gap: var(--pcd-space-1);
}
.pcd-home-about__details-sep {
display: none;
}
.pcd-home-about__panel {
padding: var(--pcd-space-6);
}
}
/* ================================================================ Méthode
Processus en 4 étapes. Fond clair (rupture après À propos sombre).
Header aligné à gauche + composant générique .pcd-process. */
.pcd-home-method__eyebrow {
margin: 0 0 var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-xs);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
color: var(--pcd-primary);
}
.pcd-home-method__title {
margin: 0 0 var(--pcd-space-4);
}
.pcd-home-method__intro {
max-width: var(--pcd-container-narrow);
margin: 0 0 var(--pcd-space-8);
color: var(--pcd-text-muted);
}
/* ================================================================== Blog
Composition éditoriale asymétrique : 1 article principal (dernier publié)
+ jusqu'à 3 articles secondaires empilés, séparés par un filet fin.
Volontairement PAS de cartes (pas de fond individuel, pas d'ombre, pas de
bordure épaisse) : le contenu doit se lire comme de l'éditorial, pas comme
un composant UI. Fond alterné (.pcd-section--alt, globale.css — même
surface que le survol des cartes Services, pas une nouvelle couleur) pour
se distinguer de Méthode juste avant. Header aligné à gauche comme
Services/Secteurs/Méthode. */
.pcd-home-blog__header {
margin: 0 0 var(--pcd-space-5);
}
.pcd-home-blog__eyebrow {
margin: 0 0 var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-xs);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
color: var(--pcd-primary);
}
.pcd-home-blog__title {
margin: 0 0 var(--pcd-space-4);
}
.pcd-home-blog__intro {
max-width: var(--pcd-container-narrow);
margin: 0;
color: var(--pcd-text-muted);
}
/* Grille principale : ≈54 % article principal / 46 % secondaires (desktop).
--pcd-card-frame-gap / --pcd-card-frame-len : mêmes noms et mêmes valeurs
que Services/Secteurs/Réalisations (pas de nouvelles variables --blog-*) —
portées ici pour que le padding-block absorbe l'emprise réelle du cadrage
technique de l'article principal ci-dessous sans jamais déborder dans le
padding de la SECTION (--pcd-section-y, inchangé). */
.pcd-home-blog__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: start;
gap: var(--pcd-space-11);
--pcd-card-frame-gap: 2px;
--pcd-card-frame-len: 22px;
padding-block: calc(var(--pcd-card-frame-gap) + var(--pcd-card-frame-len));
}
/* Seul article présent (cas 1 article, voir home.php) : occupe toute la
largeur de la grille plutôt que de laisser une colonne vide à droite. */
.pcd-home-blog__grid > .pcd-home-blog__featured:only-child {
grid-column: 1 / -1;
}
.pcd-home-blog__article {
display: flex;
flex-direction: column;
}
/* --- Média -----------------------------------------------------------
object-fit + aspect-ratio évitent toute hauteur fixe en dur. */
.pcd-home-blog__media {
display: block;
position: relative;
overflow: hidden;
border-radius: var(--pcd-radius-sm); /* 6px — token existant, globale.css §1.5 */
}
.pcd-home-blog__media-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Zone média sobre si l'article n'a pas d'image mise en avant (aucun
fallback générique disponible dans le projet, voir home.php) : simple
surface de fond existante — --pcd-surface (blanc), pour rester visible sur
le fond alterné de la section — pas de nouvelle couleur ni d'URL fictive. */
.pcd-home-blog__media--empty {
background: var(--pcd-surface);
}
/* --- Zone visuelle de l'article principal + cadrage technique ----------
Le cadrage (coins + prolongements, voir .pcd-home-blog__featured-frame-
edge/-line plus bas) épouse uniquement l'image, pas le texte. */
.pcd-home-blog__featured-visual {
position: relative;
margin: 0 0 var(--pcd-space-3);
}
/* Ratio 16/9 standard — même format que les images secondaires (voir plus
bas, .pcd-home-blog__secondary .pcd-home-blog__media) : une seule et même
image mise en avant WordPress peut ainsi servir à l'article principal
comme aux articles secondaires. Toujours width:100% + object-fit, jamais
de hauteur fixe. Format source recommandé : 1200×675px. */
.pcd-home-blog__featured-visual .pcd-home-blog__media {
aspect-ratio: 16 / 9;
}
.pcd-home-blog__featured-frame-edge {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.pcd-home-blog__featured-frame-edge::before,
.pcd-home-blog__featured-frame-edge::after {
content: "";
position: absolute;
background: rgba(40, 40, 40, .4);
}
.pcd-home-blog__featured-frame-edge::before { width: var(--pcd-card-frame-len); height: 1px; }
.pcd-home-blog__featured-frame-edge::after { width: 1px; height: var(--pcd-card-frame-len); }
.pcd-home-blog__featured-frame-edge[data-edge="t"] {
top: calc(-1 * var(--pcd-card-frame-gap));
left: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-blog__featured-frame-edge[data-edge="t"]::before { top: 0; right: 0; }
.pcd-home-blog__featured-frame-edge[data-edge="t"]::after { left: 0; bottom: 0; }
.pcd-home-blog__featured-frame-edge[data-edge="r"] {
top: calc(-1 * var(--pcd-card-frame-gap));
right: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-blog__featured-frame-edge[data-edge="r"]::before { top: 0; left: 0; }
.pcd-home-blog__featured-frame-edge[data-edge="r"]::after { right: 0; bottom: 0; }
.pcd-home-blog__featured-frame-edge[data-edge="b"] {
bottom: calc(-1 * var(--pcd-card-frame-gap));
right: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-blog__featured-frame-edge[data-edge="b"]::before { bottom: 0; left: 0; }
.pcd-home-blog__featured-frame-edge[data-edge="b"]::after { right: 0; top: 0; }
.pcd-home-blog__featured-frame-edge[data-edge="l"] {
bottom: calc(-1 * var(--pcd-card-frame-gap));
left: calc(-1 * var(--pcd-card-frame-gap));
}
.pcd-home-blog__featured-frame-edge[data-edge="l"]::before { bottom: 0; right: 0; }
.pcd-home-blog__featured-frame-edge[data-edge="l"]::after { left: 0; top: 0; }
/* Prolongements — copie directe de .pcd-home-services__frame-line (mêmes
proportions, mêmes variables héritées), couleur plus discrète que les
angles (.10 vs .4) comme dans Services/Secteurs/Réalisations. */
.pcd-home-blog__featured-frame-line {
position: absolute;
background: rgba(40, 40, 40, .10);
pointer-events: none;
}
.pcd-home-blog__featured-frame-line[data-axis="h"] { height: 1px; width: calc(50% + var(--pcd-card-frame-gap) - 12px); }
.pcd-home-blog__featured-frame-line[data-axis="v"] { width: 1px; height: calc(50% + var(--pcd-card-frame-gap) - 12px); }
.pcd-home-blog__featured-frame-line[data-edge="t"] { top: calc(-1 * var(--pcd-card-frame-gap)); left: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-blog__featured-frame-line[data-edge="r"] { top: calc(-1 * var(--pcd-card-frame-gap)); right: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-blog__featured-frame-line[data-edge="b"] { bottom: calc(-1 * var(--pcd-card-frame-gap)); right: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-blog__featured-frame-line[data-edge="l"] { bottom: calc(-1 * var(--pcd-card-frame-gap)); left: calc(-1 * var(--pcd-card-frame-gap)); }
.pcd-home-blog__content {
display: flex;
flex-direction: column;
}
.pcd-home-blog__meta {
display: flex;
align-items: center;
gap: var(--pcd-space-2);
margin: 0 0 var(--pcd-space-2);
font-size: var(--pcd-text-xs);
}
.pcd-home-blog__category {
font-family: var(--pcd-font-heading);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
color: var(--pcd-primary);
}
/* Séparateur catégorie / date — même traitement que .pcd-home-about__details-sep
(point médian, couleur primaire) : réutilise un séparateur déjà présent
dans le site plutôt que d'en inventer un nouveau. */
.pcd-home-blog__meta-sep {
color: var(--pcd-primary);
}
.pcd-home-blog__date {
color: var(--pcd-text-muted);
}
.pcd-home-blog__article-title {
margin: 0 0 var(--pcd-space-2);
}
.pcd-home-blog__excerpt {
margin: 0 0 var(--pcd-space-3);
color: var(--pcd-text-muted);
}
/* "Lire l'article" : lien éditorial simple par défaut (typo du site déjà
posée par la règle globale `a`, globale.css : couleur --pcd-link, pas de
fond, pas de bordure) — utilisé tel quel sur les 3 articles secondaires.
.pcd-home-blog__link porte la mise en page propre à cette section : ne pas
s'étirer sur toute la largeur de la colonne (le parent .pcd-home-blog__content
est en flex-direction:column, align-items:stretch par défaut) et toujours
se plaquer en bas. */
.pcd-home-blog__link {
align-self: flex-start;
margin-top: auto;
text-decoration: none;
}
/* Variante "vrai bouton", réservée à l'article principal (voir home.php) :
réutilise .pcd-btn/.pcd-btn--secondary (globale.css) — même composant que
"Voir tous les articles", juste plus compact ici (padding réduit, tokens
existants). */
.pcd-home-blog__link--button {
padding: var(--pcd-space-2) var(--pcd-space-4);
font-size: var(--pcd-text-sm); /* palier existant, plus petit que le texte de bouton par défaut (--pcd-text-md) */
border-radius: var(--pcd-radius-sm); /* moins arrondi que le bouton par défaut (--pcd-radius-pill) — même token que les images de la section */
/* Trait extérieur plus fin que le bouton secondaire par défaut (1px au
lieu de 1.5px) : box-shadow est une valeur unique, pas de token pour
son épaisseur isolément — reprise à l'identique du reste de la valeur
(globale.css .pcd-btn--secondary), seule l'épaisseur change. */
box-shadow:
inset 0 0 0 1px var(--pcd-primary-hover),
0 6px 16px rgba(0, 0, 0, .10);
}
@media (hover: hover) and (pointer: fine) {
.pcd-home-blog__link--button:hover,
.pcd-home-blog__link--button:focus-visible {
box-shadow:
inset 0 0 0 1px var(--pcd-primary),
0 10px 22px rgba(0, 0, 0, .14);
}
}
.pcd-home-blog__link-arrow {
display: inline-block;
transition: transform var(--pcd-transition-fast);
}
@media (hover: hover) and (pointer: fine) {
.pcd-home-blog__link:hover .pcd-home-blog__link-arrow,
.pcd-home-blog__link:focus-visible .pcd-home-blog__link-arrow {
transform: translateX(3px);
}
}
/* --- Colonne secondaire : jusqu'à 3 articles compacts, image | contenu.
Pas de cadrage technique ici : seul l'article principal porte le cadrage
de la section (voir .pcd-home-blog__featured-frame-edge plus haut) — la
colonne secondaire reste structurée uniquement par les filets entre
articles. */
.pcd-home-blog__secondary-list {
display: flex;
flex-direction: column;
}
.pcd-home-blog__secondary {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); /* ≈33 % image / 67 % contenu — colonne resserrée pour un article compact */
gap: var(--pcd-space-4);
/* stretch (pas start) : l'image doit occuper toute la hauteur de la
ligne, pas seulement sa propre hauteur (16/9, voir plus bas) — sinon,
dès que le texte est plus haut que l'image à ce ratio (fréquent en
tablette, colonne de texte plus étroite donc titre sur plus de lignes),
l'image reste plaquée en haut et laisse un vide sous elle. */
align-items: stretch;
padding-block: var(--pcd-space-5);
}
.pcd-home-blog__secondary:first-child {
padding-top: 0;
}
.pcd-home-blog__secondary:last-child {
padding-bottom: 0;
}
/* Séparation fine entre les articles secondaires — filet global, pas une
nouvelle carte (voir home.php : boucle qui ne produit ce filet qu'entre
des articles réellement présents, quel que soit leur nombre). */
.pcd-home-blog__secondary:not(:first-child) {
border-top: 1px solid var(--pcd-border);
}
/* Plus de aspect-ratio fixe ici : avec align-items:stretch ci-dessus, la
hauteur de l'image doit suivre celle de la ligne (donc du texte), pas un
ratio figé. object-fit:cover (déjà sur .pcd-home-blog__media-img, règle
générale plus haut) recadre proprement l'image quelle que soit la hauteur
réellement obtenue — une photo source 16:9 (recommandée pour l'article
principal) reste donc parfaitement utilisable ici aussi. */
.pcd-home-blog__secondary .pcd-home-blog__media {
height: 100%;
}
.pcd-home-blog__secondary .pcd-home-blog__article-title {
font-size: var(--pcd-text-lg); /* "petit titre de carte" — palier existant, globale.css §1.3 */
}
/* Hiérarchie meta des articles secondaires : titre > catégorie > date. La
catégorie (bleue) reste au palier --pcd-text-xs déjà posé par
.pcd-home-blog__meta ; la date passe plus discrète que la catégorie —
aucun palier plus petit que --pcd-text-xs n'existe dans l'échelle
(globale.css §1.3), d'où le facteur relatif ci-dessous plutôt qu'un
nouveau token. Couleur : même variable --pcd-text-muted, simplement
allégée (color-mix), technique déjà utilisée ailleurs sur le site
(ex. .pcd-home-sectors) pour une variante plus douce d'un token existant. */
.pcd-home-blog__secondary .pcd-home-blog__date {
font-size: 0.85em; /* hérite déjà de font-weight normal (body) — jamais en gras */
color: color-mix(in srgb, var(--pcd-text-muted) 70%, transparent);
}
/* Action principale de la section, centrée en bas : vrai bouton, pas un lien
éditorial perdu dans le header — réutilise .pcd-btn/.pcd-btn--secondary
(globale.css), aucune nouvelle classe de bouton. */
.pcd-home-blog__footer {
margin-top: var(--pcd-space-5);
text-align: center;
}
@media (max-width: 980px) {
/* Composition simple en tablette/mobile (privilégier la lisibilité à la
densité) : article principal pleine largeur, puis liste secondaire
empilée avec ses filets — cadrage plus court pour ne pas manger le
gutter (mêmes valeurs de repli que Services ≤1180px : 8px / 16px, pas
de nouvelles valeurs). */
.pcd-home-blog__grid {
grid-template-columns: 1fr;
gap: var(--pcd-space-8);
--pcd-card-frame-gap: 8px;
--pcd-card-frame-len: 16px;
}
.pcd-home-blog__secondary-list {
flex-direction: column;
}
}
@media (max-width: 560px) {
/* Mobile : image au-dessus du contenu pour chaque article secondaire,
ordre déjà garanti par le DOM (voir home.php) — principal, puis
secondaires dans l'ordre de publication. */
.pcd-home-blog__secondary {
grid-template-columns: 1fr;
}
.pcd-home-blog__secondary .pcd-home-blog__media {
margin: 0 0 var(--pcd-space-4);
}
}
/* ==================================================================== CTA
Conclusion commerciale de la home : label + H2 + texte + UN SEUL bouton,
contenu centré (pas de grille asymétrique — inutile pour si peu de
contenu, voir .pcd-home-realisations__head pour le même principe de bloc
centré déjà utilisé sur la page). Fond sombre : copie directe du motif
.pcd-home-sectors/.pcd-home-about (même couleur, mêmes variables
réassignées) — pas de nouvelle teinte. */
.pcd-home-cta {
position: relative;
z-index: 0; /* même bug de z-index déjà corrigé ailleurs (voir .pcd-home-services) */
background-color: var(--pcd-primary-hover);
--pcd-heading: var(--pcd-primary-contrast);
--pcd-text-muted: color-mix(in srgb, var(--pcd-primary-contrast) 70%, transparent);
--pcd-link-hover: var(--pcd-primary-contrast);
}
/* Décoration minimale : même motif générique .pcd-modgroup/.pcd-modblock
que Hero/Services/Secteurs (globale.css) — un seul groupe, discret, coin
haut-droit, uniquement des blocs --blue (comme Secteurs, jamais --navy,
trop proche du fond sombre ici). */
.pcd-home-cta__modules {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.pcd-home-cta__modules .pcd-modgroup[data-cta-mod="1"] {
top: var(--pcd-space-6);
right: 6%;
}
.pcd-home-cta__inner {
max-width: 720px; /* même largeur que .pcd-home-realisations__head, déjà utilisée pour un bloc centré */
margin: 0 auto;
text-align: center;
}
.pcd-home-cta__eyebrow {
margin: 0 0 var(--pcd-space-3);
font-family: var(--pcd-font-heading);
font-size: var(--pcd-text-xs);
font-weight: var(--pcd-weight-semibold);
letter-spacing: var(--pcd-tracking-wide);
text-transform: uppercase;
color: var(--pcd-primary);
}
.pcd-home-cta__title {
margin: 0 0 var(--pcd-space-4);
}
.pcd-home-cta__lead {
margin: 0 0 var(--pcd-space-6);
color: var(--pcd-text-muted);
}
/* Survol du bouton primaire sur fond sombre : copie directe de
.pcd-home-sectors .pcd-btn:hover / .pcd-home-about .pcd-btn:hover — le
survol générique de .pcd-btn (globale.css) passe le fond en
var(--pcd-primary-hover), exactement la couleur de fond de CETTE section,
ce qui rendrait le bouton invisible au survol sans cette correction. */
.pcd-home-cta .pcd-btn:hover,
.pcd-home-cta .pcd-btn:focus-visible {
background: var(--pcd-primary-contrast);
color: var(--pcd-text);
}