/**
* PurEau-Experts — custom.css
* ---------------------------------------------------------------------------
* Template: pureau (dupliqué du template Investa v1.0.4 — JoomShaper / Helix
* Ultimate Framework). Ce fichier est le point d'injection CSS explicitement
* prévu par le framework Helix Ultimate lui-même :
* templates/pureau/index.php -> $theme->add_css('custom.css');
* Il se charge TOUJOURS en dernier dans la cascade (après theme.css compilé,
* après le preset actif, après custom-compiled) : tout ce qui est ici gagne,
* sans qu'aucun fichier core du template ne soit modifié.
*
* SÉCURITÉ MISE À JOUR : ce fichier — comme templates/pureau/js/custom.js —
* n'existe PAS dans Investa d'origine. Si un jour vous fusionnez une nouvelle
* version d'Investa dans ce dossier "pureau" (copier/écraser les fichiers
* core), ce fichier n'est jamais écrasé puisqu'il n'existe pas côté
* JoomShaper. Il suffit de le re-déposer après toute réinstallation complète
* du dossier "pureau" à partir d'un Investa neuf.
*
* Sélecteurs réels vérifiés dans le code source du template (pas de classes
* inventées) :
* #sp-top-bar -> bandeau utilitaire (topbar)
* #sp-header -> en-tête
* .logo-image -> ![]()
du logo (feature Helix "logo")
* #sp-menu ul.mod-menu > li > a -> liens du menu principal
* li.current / li.active -> item de menu actif (mod_menu/default.php)
* .btn-primary, .sppb-btn-primary -> boutons (core + SP Page Builder)
* #sp-bottom -> pied de page
*
* Auteur : MEXA SARL — 2026-08-28
* ---------------------------------------------------------------------------
*/
/* ==========================================================================
1. CHARTE GRAPHIQUE — dérivée du logo PurWater Expert
(bleu clair #2BA9DE + bleu profond #036EB8 échantillonnés dans le logo),
complétée de --eco (contexte environnemental) et --sky (3e ton, dérivé
de l'analyse de la maquette2 du client).
Règle de contraste : sur fond CLAIR -> --teal ; sur fond SOMBRE -> --cyan
(--teal seul sur --navy ne fait qu'un ratio ~2.6:1, insuffisant).
========================================================================== */
:root{
--navy:#0B3049;
--navy-deep:#071F30;
--teal:#036EB8;
--teal-hover:#024D80;
--teal-tint:#E7F3FB;
--cyan:#2BA9DE;
--eco:#1F8560;
--sky:#7FCDF0;
--pe-border:#c9d7e3;
--pe-ink-soft:rgba(20,24,26,0.68);
}
/* ==========================================================================
2. TOPBAR — #sp-top-bar (bandeau utilitaire du haut)
========================================================================== */
#sp-top-bar{
background:var(--navy-deep) !important;
color:rgba(255,255,255,0.7);
}
#sp-top-bar a{ color:rgba(255,255,255,0.7); }
#sp-top-bar a:hover,
#sp-top-bar a:focus{ color:#fff; }
#sp-top-bar .sp-contact-info a{ color:rgba(255,255,255,0.85); }
/* ==========================================================================
3. EN-TÊTE — #sp-header + logo + menu principal
========================================================================== */
#sp-header{
background:var(--navy) !important;
border-top:1px solid rgba(255,255,255,0.08);
}
/* Logo image (champ "Logo Image" des options du Template Style) */
.logo-image{
height:46px !important;
width:auto !important;
object-fit:contain;
display:block;
}
@media (max-width:992px){ .logo-image{ height:38px !important; } }
/* Optionnel : module Custom HTML publié en position "logo", juste après le
logo, pour reproduire le lockup "logo | GC-TEATE" de la maquette — voir
le HTML fourni dans le guide de personnalisation. */
.pe-logo-suffix{ display:flex; align-items:center; gap:12px; }
.pe-logo-divider{ width:1px; height:34px; background:rgba(255,255,255,0.18); flex:none; }
.pe-logo-suffix .pe-sub{
font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase;
color:var(--cyan); font-weight:600;
}
/* Liens du menu principal (sélecteur réel : ul.mod-menu, alias .sp-megamenu-parent
ajouté en mode mega par le JS du framework — on couvre les deux). */
#sp-menu .mod-menu > li > a,
.sp-megamenu-parent > li > a{
color:#B2C0C4 !important;
position:relative;
}
#sp-menu .mod-menu > li:hover > a,
#sp-menu .mod-menu > li.current > a,
#sp-menu .mod-menu > li.active > a,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.current > a,
.sp-megamenu-parent > li.active > a{
color:#fff !important;
}
/* Variante liquide : vague sous le lien au survol / actif + goutte montante */
@keyframes pe-nav-wave-flow{ to{ -webkit-mask-position:24px 0; mask-position:24px 0; } }
@keyframes pe-nav-bubble-rise{
0%{ opacity:0; transform:translateY(0) scale(.6); }
20%{ opacity:.85; }
85%{ opacity:.15; }
100%{ opacity:0; transform:translateY(-16px) scale(1); }
}
#sp-menu .mod-menu > li > a::after,
.sp-megamenu-parent > li > a::after{
content:"";
position:absolute; left:0; bottom:-14px; width:0; height:6px;
background:var(--cyan); opacity:0;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3c2-3 4-3 6 0s4 3 6 0 4-3 6 0 4 3 6 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M0 3c2-3 4-3 6 0s4 3 6 0 4-3 6 0 4 3 6 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
-webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
-webkit-mask-size:24px 6px; mask-size:24px 6px;
transition:width .55s cubic-bezier(.65,0,.35,1), opacity .3s;
pointer-events:none;
}
#sp-menu .mod-menu > li > a::before,
.sp-megamenu-parent > li > a::before{
content:"";
position:absolute; left:9px; bottom:-7px; width:5px; height:5px;
border-radius:50%; background:var(--cyan); opacity:0; pointer-events:none;
}
#sp-menu .mod-menu > li:hover > a::after,
.sp-megamenu-parent > li:hover > a::after{
width:100%; opacity:1; animation:pe-nav-wave-flow 1.1s linear infinite;
}
#sp-menu .mod-menu > li:hover > a::before,
.sp-megamenu-parent > li:hover > a::before{
animation:pe-nav-bubble-rise 1.5s ease-in infinite .1s;
}
#sp-menu .mod-menu > li.current > a::after,
#sp-menu .mod-menu > li.active > a::after,
.sp-megamenu-parent > li.current > a::after,
.sp-megamenu-parent > li.active > a::after{
width:100%; opacity:1; animation:pe-nav-wave-flow 2.6s linear infinite;
}
/* ==========================================================================
4. BOUTONS
========================================================================== */
/* Habillage doux des boutons "standard" du site (core Joomla + SP Page
Builder) avec la nouvelle charte, sans rien casser côté markup. */
.btn-primary,
.sppb-btn-primary{
background:var(--teal) !important;
border-color:var(--teal) !important;
}
.btn-primary:hover,
.sppb-btn-primary:hover{
background:var(--teal-hover) !important;
border-color:var(--teal-hover) !important;
}
/* Bouton liquide "pilule" — classe additionnelle à poser (champ "Class" de
l'addon Bouton SP Page Builder, ou champ "Class" d'un item de menu) sur
n'importe quel CTA important. Remous en rotation permanente, glow au
survol, bulles montantes. 100% autonome, ne dépend d'aucun autre style. */
.btn-liquid{
position:relative; display:inline-flex; align-items:center; gap:8px;
height:50px; padding:0 26px; border-radius:999px;
border:1.5px solid var(--cyan); background:var(--cyan); color:#fff !important;
font-weight:600; font-size:15px; overflow:hidden; isolation:isolate;
transition:box-shadow .3s ease; text-decoration:none !important;
}
.btn-liquid:hover, .btn-liquid:focus{
color:#fff !important;
box-shadow:0 16px 36px -14px rgba(43,169,222,0.85);
}
.btn-liquid .bl-label{ position:relative; z-index:3; pointer-events:none; }
.btn-liquid .bl-fill{ position:absolute; inset:-2px; overflow:hidden; z-index:2; }
.btn-liquid .bl-wave{
position:absolute; left:50%; top:0; width:220%; aspect-ratio:1;
background:var(--teal); border-radius:44%;
transform:translate(-50%,-68%) rotate(0deg);
animation:pe-bl-rotate 9s linear infinite;
}
.btn-liquid .bl-wave2{
background:rgba(255,255,255,0.2); opacity:1;
animation-duration:6s; animation-direction:reverse;
}
@keyframes pe-bl-rotate{ to{ transform:translate(-50%,-68%) rotate(360deg); } }
.btn-liquid .bl-bubbles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.btn-liquid .bl-bubbles i{
position:absolute; bottom:6px; width:5px; height:5px; border-radius:50%;
background:rgba(255,255,255,0.55); opacity:0;
animation:pe-bl-rise 2.4s ease-in infinite;
}
.btn-liquid .bl-bubbles i:nth-child(1){ left:22%; animation-delay:.05s; }
.btn-liquid .bl-bubbles i:nth-child(2){ left:48%; width:4px; height:4px; animation-delay:.9s; }
.btn-liquid .bl-bubbles i:nth-child(3){ left:70%; width:6px; height:6px; animation-delay:1.6s; }
.btn-liquid .bl-bubbles i:nth-child(4){ left:85%; width:3px; height:3px; animation-delay:2.1s; }
@keyframes pe-bl-rise{
0%{ opacity:0; transform:translateY(0); }
15%{ opacity:.9; }
90%{ opacity:.15; }
100%{ opacity:0; transform:translateY(-42px); }
}
/* Variante compacte, fond navy (utilisée p. ex. dans le bloc infolettre) */
.btn-liquid.btn-liquid-sm{
height:44px; padding:0 22px;
background:var(--navy-deep); border-color:var(--navy-deep);
}
.btn-liquid.btn-liquid-sm .bl-wave{ background:var(--cyan); opacity:.55; }
.btn-liquid.btn-liquid-sm .bl-wave2{ background:rgba(255,255,255,0.12); }
.btn-liquid.btn-liquid-sm:hover{ box-shadow:0 16px 36px -14px rgba(7,31,48,0.7); }
/* Bouton fantôme (usage sur fond sombre : hero, contact) */
.btn-ghost{
display:inline-flex; align-items:center; gap:8px;
background:transparent; border:1px solid rgba(255,255,255,0.4);
color:#fff !important; border-radius:6px; padding:12px 24px;
font-weight:600; font-size:15px; text-decoration:none !important;
transition:border-color .2s, background .2s;
}
.btn-ghost:hover{
border-color:var(--sky); background:rgba(255,255,255,0.06);
}
/* ==========================================================================
5. VAGUE DE TRANSITION — utilitaire réutilisable entre deux sections
(poser sur une Row SP Page Builder via son champ "Custom Class")
========================================================================== */
.pe-wave-divider{ display:block; width:100%; height:64px; margin-top:-2px; position:relative; z-index:1; }
/* ==========================================================================
6. FOND ANIMÉ "FLOW FIELD" — voir js/custom.js
Poser en premier élément d'une
Row (addon Raw HTML) au-dessus d'un fond sombre (hero, CTA contact...).
La Row doit être en position:relative pour que le canvas (position:
absolute, inset:0) se cale correctement dessus.
========================================================================== */
.pe-flow-field{
position:absolute; inset:0; width:100%; height:100%;
opacity:0.5; pointer-events:none; z-index:0;
}
/* ==========================================================================
7. SECTION "AUDIENCES" — grille de segments de clientèle
(bloc Raw HTML SP Page Builder — voir le HTML fourni dans le guide)
========================================================================== */
.pe-audiences{ padding:56px 0 8px; }
.pe-audiences .pe-label{
font-size:12px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
color:var(--pe-ink-soft);
}
.pe-aud-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:20px; }
.pe-aud-card{
border:1px solid var(--pe-border); border-radius:14px; padding:18px 18px 20px;
background:var(--teal-tint); transition:border-color .2s, background .2s;
}
.pe-aud-card:hover{ border-color:var(--eco); background:#EAF6F3; }
.pe-aud-card .pe-n{ font-weight:600; font-size:13px; color:var(--eco); }
.pe-aud-card .pe-l{ margin-top:10px; font-size:14.5px; font-weight:600; line-height:1.35; color:var(--navy-deep); }
@media (max-width:1080px){ .pe-aud-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .pe-aud-grid{ grid-template-columns:repeat(2,1fr); } }
/* ==========================================================================
8. BLOC INFOLETTRE
========================================================================== */
.pe-newsletter{
margin-top:46px; background:var(--teal-tint); border:1px solid var(--pe-border);
border-radius:22px; padding:34px 36px; display:grid;
grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:center;
}
.pe-newsletter h4{ font-size:21px; line-height:1.3; margin:0; color:var(--navy-deep); }
.pe-newsletter p{ margin-top:9px; font-size:14.5px; line-height:1.6; color:var(--pe-ink-soft); }
.pe-newsletter-form{ display:flex; gap:12px; }
.pe-newsletter-form input{
flex:1; height:48px; padding:0 18px; border-radius:999px;
border:1px solid var(--pe-border); background:#fff; font-size:15px; font-family:inherit;
}
.pe-newsletter-note{ grid-column:1 / -1; margin-top:2px; font-size:12px; color:var(--pe-ink-soft); }
@media (max-width:1080px){ .pe-newsletter{ grid-template-columns:1fr; } }
@media (max-width:720px){ .pe-newsletter-form{ flex-direction:column; } }
/* ==========================================================================
9. PIED DE PAGE — #sp-bottom + ligne de crédit
========================================================================== */
/* Investa rend DEUX sections basses : #sp-bottom (rangée "Bottom", masquée
tant qu'aucun module n'y est publié) et #sp-footer (rangée "Footer", qui
porte le copyright et est donc la barre réellement visible). On habille
les deux — vérifié dans le DOM du site réel le 2026-08-28. */
#sp-bottom,
#sp-footer{
background:var(--navy-deep) !important;
color:rgba(255,255,255,0.6) !important;
}
#sp-bottom a, #sp-footer a{ color:rgba(255,255,255,0.55); }
#sp-bottom a:hover, #sp-bottom a:focus,
#sp-footer a:hover, #sp-footer a:focus{ color:#fff; }
#sp-footer .sp-copyright{ color:rgba(255,255,255,0.6); }
.pe-footer-credit{
display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,0.4);
font-size:12.5px;
}
.pe-footer-credit a{
display:inline-flex; align-items:center; gap:6px;
color:rgba(255,255,255,0.72) !important; font-weight:600;
}
.pe-footer-credit a:hover{ color:var(--sky) !important; }
/* ==========================================================================
==========================================================================
PARTIE 2 — SECTIONS DE LA PAGE D'ACCUEIL (ajoutée le 2026-08-28)
==========================================================================
Ces styles habillent les blocs "Text Block" de SP Page Builder qui
composent la page d'accueil (voir le JSON de la page). Chaque section de
la maquette = 1 Row SP Page Builder (pleine largeur, padding 0) contenant
un seul Text Block dont le HTML porte les classes ci-dessous.
Toutes les classes sont préfixées "pe-" pour ne jamais entrer en collision
avec Investa, Bootstrap ou les addons SP Page Builder.
==========================================================================
========================================================================== */
/* --- Conteneur commun à toutes les sections ------------------------------ */
.pe-wrap{ max-width:1220px; margin:0 auto; padding:0 40px; }
.pe-sec{ position:relative; }
.pe-sec.pe-light{ background:var(--paper, #fff); padding:96px 0; }
.pe-sec.pe-panel{
background:#f7f9f8; padding:96px 0;
border-top:1px solid var(--pe-border); border-bottom:1px solid var(--pe-border);
}
.pe-kicker{
display:inline-flex; align-items:center; gap:10px;
font-size:12.5px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--teal);
}
.pe-kicker::before{ content:""; width:22px; height:2px; background:var(--teal); display:inline-block; }
.pe-kicker.pe-on-dark{ color:var(--cyan); }
.pe-kicker.pe-on-dark::before{ background:var(--cyan); }
.pe-head{ max-width:640px; }
.pe-head h2{
font-size:34px; line-height:1.18; margin:14px 0 0;
color:var(--navy-deep); font-weight:700;
}
.pe-head p{ margin-top:14px; font-size:16px; line-height:1.65; color:var(--pe-ink-soft); }
.pe-eyebrow{
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:24px; margin-bottom:44px;
}
.pe-seeall{ font-size:14.5px; font-weight:600; color:var(--teal); white-space:nowrap; }
.pe-seeall:hover{ color:var(--teal-hover); }
/* --- HERO ---------------------------------------------------------------- */
.pe-hero{
position:relative; overflow:hidden; color:#fff; padding:96px 0 0;
background:
radial-gradient(120% 140% at 85% -10%, #123C5480 0%, transparent 55%),
linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 65%, #03101a 100%);
}
.pe-hero .pe-wrap{
position:relative; z-index:1;
display:grid; grid-template-columns:1.1fr 0.8fr; gap:48px;
align-items:center; padding-bottom:90px;
}
.pe-hero h1{
color:#fff; font-size:52px; line-height:1.12; margin:20px 0 0;
max-width:640px; font-weight:700; letter-spacing:-0.01em;
}
.pe-hero .pe-lede{
margin-top:22px; font-size:17px; line-height:1.7;
color:rgba(255,255,255,0.78); max-width:540px;
}
.pe-hero-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.pe-hero-visual{ position:relative; height:420px; }
.pe-droplet{
position:absolute; border-radius:50% 50% 50% 0;
background:linear-gradient(140deg, var(--cyan), var(--teal));
transform:rotate(45deg);
box-shadow:0 0 60px -10px rgba(43,169,222,0.45);
}
/* Bandeau de statistiques sous le hero */
.pe-stats{
position:relative; z-index:1;
background:rgba(255,255,255,0.06);
border-top:1px solid rgba(255,255,255,0.12);
}
.pe-stats .pe-wrap{ display:grid; grid-template-columns:repeat(5,1fr); }
.pe-stat{
padding:26px 20px 26px 0; text-align:left;
border-right:1px solid rgba(255,255,255,0.1);
}
.pe-stat:last-child{ border-right:none; }
.pe-stat .pe-n{ font-size:30px; font-weight:600; color:#fff; line-height:1.1; }
.pe-stat .pe-l{
margin-top:6px; font-size:12.5px; line-height:1.4;
color:rgba(255,255,255,0.62); max-width:180px;
}
/* Vague de transition (sombre -> clair) */
.pe-wave{ display:block; width:100%; height:64px; margin-top:-2px; position:relative; z-index:1; }
/* --- CONTEXTE ------------------------------------------------------------ */
.pe-context-grid{
display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;
}
.pe-context-grid p{ font-size:16.5px; line-height:1.75; color:var(--pe-ink-soft); margin:0; }
.pe-context-grid p + p{ margin-top:16px; }
.pe-icon-badge{
width:52px; height:52px; border-radius:12px; background:var(--teal-tint);
display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.pe-icon-badge svg{ display:block; }
/* --- PR DROGUI ----------------------------------------------------------- */
.pe-prof-grid{ display:grid; grid-template-columns:0.62fr 1.38fr; gap:64px; align-items:center; }
.pe-portrait{
border-radius:14px; overflow:hidden; position:relative;
content:"77" !important;
box-shadow:0 24px 50px -20px rgba(4,20,31,0.45);
background:var(--navy);
}
.pe-portrait img{ display:block; width:100%; height:auto; }
.pe-prof-name{ font-size:30px; margin:16px 0 0; color:var(--navy-deep); font-weight:700; }
.pe-prof-title{ margin-top:8px; font-size:15.5px; color:var(--pe-ink-soft); font-weight:500; }
.pe-prof-bio{ margin-top:20px; font-size:16px; line-height:1.75; color:var(--pe-ink-soft); max-width:620px; }
.pe-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pe-chip{
border:1px solid var(--pe-border); background:#fff; border-radius:999px;
padding:8px 16px; font-size:13px; font-weight:600; color:var(--navy-deep);
}
.pe-chip.pe-accent{ border-color:transparent; background:var(--eco); color:#fff; }
.pe-prof-cta{ margin-top:30px; }
/* --- PUBLICATIONS (ouvrages du Pr Drogui) -------------------------------- */
.pe-books{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:36px; }
.pe-book{
background:#fff; border:1px solid var(--pe-border); border-radius:14px;
padding:22px; display:flex; flex-direction:column; align-items:center;
text-align:center; transition:box-shadow .2s, border-color .2s, transform .2s;
}
.pe-book:hover{
box-shadow:0 22px 46px -26px rgba(20,30,32,0.35);
border-color:var(--teal); transform:translateY(-3px);
}
.pe-book img{
width:100%; max-width:190px; height:auto; border-radius:6px;
box-shadow:0 10px 26px -12px rgba(4,20,31,0.45);
}
.pe-book .pe-book-title{
margin-top:18px; font-size:14.5px; font-weight:600;
line-height:1.45; color:var(--navy-deep);
}
.pe-book .pe-book-meta{ margin-top:8px; font-size:12.5px; color:var(--pe-ink-soft); }
/* --- SERVICES ------------------------------------------------------------ */
.pe-services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pe-service{
border:1px solid var(--pe-border); border-radius:10px; padding:30px 26px;
background:#fff; transition:box-shadow .2s, border-color .2s;
}
.pe-service:hover{ box-shadow:0 18px 40px -24px rgba(20,30,32,0.28); border-color:var(--teal); }
.pe-service-icon{
width:44px; height:44px; border-radius:10px; background:var(--teal-tint);
display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.pe-service-icon.pe-eco-icon{ background:#E8F6F0; }
.pe-service h4{ font-size:17.5px; font-weight:600; margin:0; color:var(--navy-deep); }
.pe-service p{ margin-top:9px; font-size:14.5px; line-height:1.6; color:var(--pe-ink-soft); }
/* --- RÉALISATIONS -------------------------------------------------------- */
.pe-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.pe-pill{
border:1px solid var(--pe-border); border-radius:999px; padding:9px 18px;
font-size:13.5px; font-weight:600; color:var(--pe-ink-soft); background:#fff;
cursor:pointer; transition:background .2s, color .2s, border-color .2s;
}
.pe-pill:hover{ border-color:var(--teal); color:var(--teal); }
.pe-pill.pe-active{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; }
.pe-cases{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
.pe-case{
background:#fff; border:1px solid var(--pe-border); border-radius:10px;
overflow:hidden; display:flex; flex-direction:column;
transition:box-shadow .2s, transform .2s;
}
.pe-case:hover{ box-shadow:0 18px 40px -24px rgba(20,30,32,0.3); transform:translateY(-3px); }
.pe-case-media{
height:120px; position:relative;
background:linear-gradient(135deg, var(--navy) 0%, var(--teal) 130%);
}
.pe-case-tag{
position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.92);
color:var(--navy-deep); font-size:11px; font-weight:700; letter-spacing:0.04em;
text-transform:uppercase; padding:5px 10px; border-radius:999px;
}
.pe-case-body{ padding:20px 20px 22px; flex:1; display:flex; flex-direction:column; }
.pe-case-client{
font-size:12px; font-weight:700; letter-spacing:0.06em;
text-transform:uppercase; color:var(--teal);
}
.pe-case-body h4{ margin:8px 0 0; font-size:15.5px; line-height:1.4; font-weight:600; color:var(--navy-deep); }
.pe-case-year{ margin-top:auto; padding-top:14px; font-size:12.5px; color:var(--pe-ink-soft); }
.pe-partners{ margin-top:64px; padding-top:44px; border-top:1px solid var(--pe-border); }
.pe-partners .pe-label{
font-size:12px; font-weight:700; letter-spacing:0.09em;
text-transform:uppercase; color:var(--pe-ink-soft); text-align:center;
}
.pe-partner-row{ display:flex; justify-content:center; flex-wrap:wrap; gap:36px; margin-top:26px; }
.pe-partner-row span{
font-weight:600; font-size:16px; color:rgba(20,24,26,0.42); letter-spacing:0.02em;
}
/* --- ACTUALITÉS ---------------------------------------------------------- */
.pe-articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pe-article{
border:1px solid var(--pe-border); border-radius:10px; overflow:hidden; background:#fff;
transition:box-shadow .2s, transform .2s;
}
.pe-article:hover{ box-shadow:0 18px 40px -24px rgba(20,30,32,0.3); transform:translateY(-3px); }
.pe-article-media{ height:150px; background:linear-gradient(160deg, #E7F3FB, #C9E6F5); }
.pe-article-body{ padding:22px; }
.pe-article-meta{
font-size:12px; font-weight:600; color:var(--teal);
letter-spacing:0.04em; text-transform:uppercase;
}
.pe-article-body h4{ margin:10px 0 0; font-size:16px; line-height:1.45; font-weight:600; color:var(--navy-deep); }
.pe-article-date{ margin-top:14px; font-size:12.5px; color:var(--pe-ink-soft); }
/* --- CONTACT (bandeau sombre) -------------------------------------------- */
.pe-contact{
position:relative; overflow:hidden; text-align:center; color:#fff; padding:92px 0;
background:linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.pe-contact .pe-wrap{ position:relative; z-index:1; }
.pe-contact h2{ color:#fff; font-size:32px; max-width:620px; margin:16px auto 0; font-weight:700; }
.pe-contact p{
margin:16px auto 0; color:rgba(255,255,255,0.72);
font-size:16px; max-width:480px;
}
.pe-subjects{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:30px; }
.pe-subject{
border:1px solid rgba(255,255,255,0.28); border-radius:999px;
padding:9px 18px; font-size:13px; color:rgba(255,255,255,0.85);
}
.pe-contact .btn-liquid{ margin-top:34px; }
/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1080px){
.pe-hero .pe-wrap{ grid-template-columns:1fr; padding-bottom:64px; }
.pe-hero-visual{ height:260px; order:-1; }
.pe-stats .pe-wrap{ grid-template-columns:repeat(3,1fr); row-gap:18px; }
.pe-context-grid{ grid-template-columns:1fr; }
.pe-prof-grid{ grid-template-columns:1fr; }
.pe-portrait{ max-width:300px; }
.pe-services-grid{ grid-template-columns:repeat(2,1fr); }
.pe-cases{ grid-template-columns:repeat(2,1fr); }
.pe-articles{ grid-template-columns:repeat(2,1fr); }
.pe-books{ grid-template-columns:repeat(3,1fr); gap:18px; }
}
@media (max-width:720px){
.pe-wrap{ padding:0 22px; }
.pe-sec.pe-light, .pe-sec.pe-panel{ padding:60px 0; }
.pe-hero h1{ font-size:36px; }
.pe-head h2{ font-size:26px; }
.pe-stats .pe-wrap{ grid-template-columns:1fr 1fr; }
.pe-stat{ padding-right:12px; }
.pe-services-grid, .pe-cases, .pe-articles{ grid-template-columns:1fr; }
.pe-books{ grid-template-columns:1fr; }
.pe-book img{ max-width:160px; }
.pe-contact h2{ font-size:26px; }
.pe-partner-row{ gap:22px; }
.pe-eyebrow .pe-seeall{ order:3; }
}
/* ==========================================================================
12. EN-TÊTE « 10-PurEau » — bandeau utilitaire, lockup logo, nav centrée,
bouton « Nous joindre » (MEXA SARL — 2026-09-01)
Ne s'applique que si le style d'en-tête « 10-PurEau » est actif
(Templates -> pureau -> Options -> Layout -> Header Style).
Sélecteurs issus du fichier headers/10-PurEau/header.php.
========================================================================== */
/* --- Bandeau utilitaire --------------------------------------------------- */
#sp-top-bar.pe-topbar{
background:var(--navy-deep) !important;
color:rgba(255,255,255,0.72);
font-size:13px;
line-height:1.4;
border-bottom:1px solid rgba(255,255,255,0.06);
}
.pe-topbar-inner{
display:flex; align-items:center; justify-content:space-between;
gap:18px; min-height:42px; flex-wrap:wrap;
}
.pe-topbar-left,
.pe-topbar-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pe-topbar-item{
display:inline-flex; align-items:center; gap:8px;
color:rgba(255,255,255,0.72) !important; text-decoration:none !important;
transition:color .2s;
}
a.pe-topbar-item:hover,
a.pe-topbar-item:focus{ color:#fff !important; }
.pe-topbar-item .fas{ font-size:12px; color:var(--cyan); }
.pe-topbar-phone{ opacity:.9; }
.pe-topbar-cta{ font-weight:600; color:var(--sky) !important; }
.pe-topbar-cta:hover,
.pe-topbar-cta:focus{ color:#fff !important; }
.pe-topbar-sep{
width:1px; height:16px; background:rgba(255,255,255,0.18); flex:none;
}
.pe-topbar-lang{ display:inline-flex; align-items:center; gap:7px; font-weight:600; letter-spacing:.02em; }
.pe-topbar-lang .pe-lang-active{ color:#fff; }
.pe-topbar-lang .pe-lang-slash{ color:rgba(255,255,255,0.3); }
.pe-topbar-lang .pe-lang-off{ color:rgba(255,255,255,0.5); }
/* Rendu du vrai module mod_languages publié en position top1.
Le module est réglé sur « Drapeaux : non » ; il affiche donc le libellé
natif de chaque langue de contenu, ramené à « FR » / « EN »
(Système → Langues de contenu → champ « Titre natif »). Le séparateur « / »
de la maquette est ajouté ici en CSS, pas dans le contenu. */
.pe-topbar-lang-module{ display:inline-flex; align-items:center; }
.pe-topbar-lang-module .mod-languages{ display:inline-flex; align-items:center; }
.pe-topbar-lang-module ul{
display:flex; align-items:center; gap:7px; margin:0; padding:0; list-style:none;
}
.pe-topbar-lang-module li{ display:inline-flex; align-items:center; gap:7px; }
.pe-topbar-lang-module li + li::before{
content:"/"; color:rgba(255,255,255,0.3); font-weight:400;
}
.pe-topbar-lang-module a{
color:rgba(255,255,255,0.5) !important; text-decoration:none !important;
font-weight:600; letter-spacing:0.02em; transition:color .2s;
}
.pe-topbar-lang-module .lang-active a,
.pe-topbar-lang-module a:hover,
.pe-topbar-lang-module a:focus{ color:#fff !important; }
/* Si les drapeaux étaient réactivés un jour, qu'ils restent présentables. */
.pe-topbar-lang-module img{ height:12px; width:auto; display:block; }
/* --- Grille de l'en-tête : logo | nav centrée | CTA ----------------------- */
#sp-header .row.pe-header-row{
display:grid !important;
grid-template-columns:1fr auto 1fr;
align-items:center;
margin-left:0; margin-right:0;
width:100%;
}
.pe-header-row > #sp-logo,
.pe-header-row > #sp-menu,
.pe-header-row > #sp-header-cta{
max-width:none; width:auto; padding-left:0; padding-right:0; min-width:0;
}
.pe-header-row > #sp-logo{ justify-self:start; }
.pe-header-row > #sp-menu{ justify-self:center; position:static; transform: translateX(55px);}
.pe-header-row > #sp-header-cta{ justify-self:end; }
.pe-header-row > #sp-menu > .sp-column{ justify-content:center !important;}
/* --- Logo agrandi + lockup GC-TEATE -------------------------------------- */
.logo-image{ height:64px !important; }
@media (max-width:1199px){ .logo-image{ height:54px !important; } }
@media (max-width:992px){ .logo-image{ height:44px !important; } }
.pe-logo-suffix{ display:flex; align-items:center; gap:14px; }
.pe-logo-suffix .logo{ margin:0; }
.pe-logo-divider{ width:1px; height:38px; background:rgba(255,255,255,0.18); flex:none; }
.pe-logo-suffix .pe-sub{
font-size:12px; letter-spacing:0.13em; text-transform:uppercase;
color:var(--cyan); font-weight:700; white-space:nowrap;
}
/* --- Bouton « Nous joindre » --------------------------------------------- */
.pe-header-btn{
height:44px; padding:0 24px; font-size:14.5px;
background:var(--cyan) !important; border-color:var(--cyan) !important;
}
.pe-header-btn .bl-wave{ background:var(--teal); }
.pe-header-btn .bl-wave2{ background:rgba(255,255,255,0.22); }
.pe-header-btn:hover{ box-shadow:0 14px 30px -12px rgba(43,169,222,0.85); }
/* --- Adaptations petites largeurs ---------------------------------------- */
@media (max-width:1280px){
.pe-header-row > #sp-menu > .sp-column{ gap:0; }
#sp-menu .sp-megamenu-parent > li > a{ padding-left:12px; padding-right:12px; }
}
@media (max-width:991px){
/* Le menu passe en burger : plus de colonne centrale à centrer, on garde
logo à gauche / burger + CTA à droite. */
#sp-header .row.pe-header-row{ grid-template-columns:1fr auto; }
.pe-header-row > #sp-menu{ justify-self:end; grid-column:2; }
.pe-header-row > #sp-header-cta{ display:none; }
.pe-logo-divider{ height:30px; }
.pe-logo-suffix{ gap:10px; }
.pe-logo-suffix .pe-sub{ font-size:10.5px; letter-spacing:0.1em; }
}
@media (max-width:767px){
.pe-topbar-inner{ justify-content:center; gap:10px 16px; padding:8px 0; }
.pe-topbar-left, .pe-topbar-right{ gap:12px; justify-content:center; }
#sp-top-bar.pe-topbar{ font-size:12px; }
.pe-logo-divider, .pe-logo-suffix .pe-sub{ display:none; }
}
/* ==========================================================================
13. HERO — visuel « goutte d'eau » animé (MEXA SARL — 2026-09-01)
Réplique du mouvement de la maquette validée
(`PurEau-Experts - Maquette2.html`, section hero) :
@keyframes floaty{0%,100%{translateY(0)}50%{translateY(-14px)}}
forme organique -> floaty 11s ease-in-out infinite
grande goutte -> floaty 8s ease-in-out infinite
petite goutte -> floaty 6.5s ease-in-out infinite, retard 0.8s
Les trois durées sont premières entre elles : les éléments ne se
resynchronisent jamais, le mouvement ne « bat » donc pas mécaniquement.
CORRECTION par rapport à la maquette : dans la maquette, les deux gouttes
portent `transform:rotate(45deg)` ET `animation:floaty`, qui redéfinit
`transform` — la rotation à 45° est donc perdue pendant toute la durée de
l'animation (la goutte s'aplatit en losange droit). Ici la rotation est
réintégrée dans les keyframes (`pe-floaty-drop`), ce qui la préserve.
IMAGE MODIFIABLE : le visuel est un ![]()
ordinaire. Deux façons d'en
changer, au choix — voir README-PUREAU.md :
1. remplacer le fichier `images/pureau/hero-visual.jpg` (Médias) ;
2. éditer l'attribut src dans le Text Block du hero (SP Page Builder).
Le cadrage se règle avec `object-position` ci-dessous, rien d'autre à
toucher : l'animation est portée par la classe, pas par l'image.
========================================================================== */
@keyframes pe-floaty{
0%, 100% { transform:translateY(0); }
50% { transform:translateY(-14px); }
}
/* Variante conservant la rotation à 45° des gouttes (voir note ci-dessus). */
@keyframes pe-floaty-drop{
0%, 100% { transform:translateY(0) rotate(45deg); }
50% { transform:translateY(-14px) rotate(45deg); }
}
/* --- Forme organique contenant l'image ----------------------------------- */
.pe-hero-blob{
position:absolute; inset:0; margin:0; overflow:hidden;
border-radius:50% 50% 50% 12% / 46% 46% 54% 54%;
box-shadow:0 30px 70px -24px rgba(0,0,0,0.6);
animation:pe-floaty 11s ease-in-out infinite;
will-change:transform;
}
.pe-hero-blob img{
display:block; width:100%; height:100%;
object-fit:cover;
/* Cadrage : 50% 50% = centre. Décalez vers la gauche (ex. 38%) pour faire
entrer la cascade, vers la droite (ex. 62%) pour la fiole de laboratoire. */
object-position:50% 50%;
filter:saturate(0.75) contrast(0.95);
}
/* Liseré cyan interne — raccorde le visuel à la charte, sans bordure dure. */
.pe-hero-blob::after{
content:""; position:absolute; inset:0; border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(127,205,240,0.28);
pointer-events:none;
}
/* --- Gouttes d'accent ----------------------------------------------------- */
.pe-droplet{
animation:pe-floaty-drop 8s ease-in-out infinite;
will-change:transform;
}
/* Grande goutte pleine, en bas à gauche, mordant sur la colonne de texte. */
.pe-droplet-a{
left:-26px; bottom:44px; width:112px; height:112px;
}
/* Petite goutte translucide, en haut à droite. */
.pe-droplet-b{
right:8px; top:-14px; width:56px; height:56px;
background:rgba(127,205,240,0.4);
box-shadow:none;
animation-duration:6.5s; animation-delay:0.8s;
}
/* --- Accessibilité : mouvement réduit ------------------------------------- */
@media (prefers-reduced-motion:reduce){
.pe-hero-blob,
.pe-droplet{ animation:none; }
}
/* --- Adaptations petites largeurs ----------------------------------------- */
@media (max-width:1080px){
.pe-hero-visual{ height:300px; }
.pe-droplet-a{ width:84px; height:84px; left:-14px; bottom:28px; }
.pe-droplet-b{ width:42px; height:42px; }
}
@media (max-width:720px){
.pe-hero-visual{ height:240px; }
.pe-droplet-a{ width:64px; height:64px; left:-10px; bottom:20px; }
.pe-droplet-b{ width:34px; height:34px; right:2px; top:-10px; }
.pe-hero-blob{ box-shadow:0 18px 44px -18px rgba(0,0,0,0.6); }
}
/* ==========================================================================
14. COMPATIBILITÉ « ADDONS NATIFS SP PAGE BUILDER » (MEXA SARL — 2026-09-01)
Les sections reconstruites en addons natifs (au lieu d'un Text Block unique)
introduisent les enveloppes de balisage propres à SP Page Builder :
Nos classes `.pe-*` se posent sur l'enveloppe extérieure (champ « Class » de
l'addon). Ce bloc raccorde donc nos styles au balisage réel des addons.
Il ne remplace rien : les sections encore en Text Block continuent
d'utiliser les règles d'origine.
========================================================================== */
/* --- Image : l'image doit remplir la forme organique -------------------- */
.pe-hero-blob > .sppb-addon-content,
.pe-hero-blob .sppb-addon-image,
.pe-hero-blob figure{ height:100%; margin:0; }
.pe-hero-blob .sppb-addon-content > *{ height:100%; }
/* --- Titre (addon Heading) --------------------------------------------- */
.pe-hero-title{ margin:0; }
.pe-hero-title .sppb-addon-title{ margin:20px 0 0; }
/* --- Surtitre et accroche (addons Text Block) --------------------------- */
.pe-hero-kicker p,
.pe-hero-lede-wrap p{ margin:0; }
/* --- Statistiques (addon Animated Number) ------------------------------
Reprend l'apparence des anciens `.pe-n` (nombre) et `.pe-l` (libellé). */
.pe-stat > .sppb-addon-content{ display:block; }
.pe-stat .sppb-animated-number{
font-size:34px; font-weight:700; line-height:1.1; color:#fff;
letter-spacing:-0.01em;
}
.pe-stat .sppb-animated-number-title{
margin-top:6px; font-size:13px; line-height:1.45;
color:rgba(255,255,255,0.66);
}
/* Le suffixe « + » est rendu par l'addon en ::after sur le nombre. */
.pe-stat .sppb-animated-number::after{ font-weight:700; }
/* --- Raw HTML : enveloppes neutres -------------------------------------
Ces trois blocs ne servent qu'à porter du décor ; leur enveloppe ne doit
ni occuper de place ni décaler la mise en page. */
.pe-hero-canvas,
.pe-hero-drops,
.pe-hero-wave{ margin:0; }
.pe-hero-canvas > .sppb-addon-content,
.pe-hero-drops > .sppb-addon-content{ line-height:0; }
.pe-hero-wave > .sppb-addon-content{ line-height:0; }
/* --- Boutons natifs portant nos classes ---------------------------------
L'addon Button ajoute `.sppb-btn` (+ `.sppb-btn-rounded` etc.), qui porte
ses propres fond, bordure et rayon. On rétablit la priorité de nos deux
habillages sans recourir à !important, en montant la spécificité. */
.sppb-btn.btn-liquid{
height:50px; padding:0 26px; border-radius:999px;
border:1.5px solid var(--cyan); background:var(--cyan);
font-weight:600; font-size:15px; line-height:normal;
}
.sppb-btn.btn-ghost{
background:transparent; border:1px solid rgba(255,255,255,0.4);
border-radius:6px; padding:12px 24px; height:auto;
font-weight:600; font-size:15px;
}
.sppb-btn.btn-ghost:hover{ border-color:var(--sky); background:rgba(255,255,255,0.06); }
/* L'addon enveloppe chaque bouton dans .sppb-button-wrapper : on neutralise
la marge pour que le `gap` de .pe-hero-actions reste seul maître. */
.pe-hero-actions .sppb-button-wrapper{ margin:0; }
/* --- Pleine largeur : neutraliser le conteneur de la rangée --------------
`.pe-hero` est conçue pour occuper toute la largeur, la limite de lecture
étant donnée par `.pe-wrap`. La rangée SP Page Builder ajoute son propre
conteneur centré : on le neutralise pour cette section seulement, sinon le
bandeau de statistiques et la vague sont rentrés de ~67 px de chaque côté. */
.pe-hero .sppb-row-container, .pe-hero .sppb-column,
.pe-sec .sppb-row-container, .pe-sec .sppb-column,
.pe-audiences .sppb-row-container, .pe-audiences .sppb-column,
.pe-contact .sppb-row-container, .pe-contact .sppb-column{
max-width:none; width:100%; padding-left:0; padding-right:0; margin-left:0; margin-right:0;
}
.pe-hero .sppb-row, .pe-sec .sppb-row,
.pe-audiences .sppb-row, .pe-contact .sppb-row{ margin-left:0; margin-right:0; }
/* --- Canvas du fond animé ----------------------------------------------
L'enveloppe de l'addon Raw HTML est `position:relative` par défaut : sans
cette règle, le `inset:0` du canvas se résout sur une enveloppe de hauteur
nulle et le fond animé disparaît. On rend l'enveloppe elle-même pleine
surface, le canvas la remplit. */
.pe-hero-canvas{
position:absolute !important; inset:0; z-index:0; pointer-events:none;
}
.pe-hero-canvas > .sppb-addon-content{ height:100%; }
/* --- Fond animé : rétablir le hero comme bloc conteneur ------------------
`.pe-hero-canvas` est en `position:absolute; inset:0`. Or SP Page Builder
positionne ses conteneurs de rangée/colonne, qui deviennent alors le bloc
conteneur du canvas : celui-ci se calait sur la zone de contenu et laissait
les 96 px de padding haut sans particules. En rendant ces conteneurs
`static` — pour cette section uniquement — le canvas se résout de nouveau
sur `.pe-hero` et couvre toute la hauteur, comme sur la page 80. */
.pe-hero .sppb-row-container,
.pe-hero .sppb-row,
.pe-hero .sppb-column,
.pe-hero .sppb-row-column,
.pe-hero .sppb-column-addons,
.pe-contact .sppb-row-container,
.pe-contact .sppb-row,
.pe-contact .sppb-column,
.pe-contact .sppb-row-column,
.pe-contact .sppb-column-addons{ position:static; }
/* --- Addon Heading : la classe se pose sur l'enveloppe -------------------
`.pe-prof-name` habillait le dans l'ancien balisage ; avec l'addon
Heading la classe atterrit sur l'enveloppe et le titre réel est
`.sppb-addon-title`. On retransmet la typographie au bon élément. */
.pe-prof-name .sppb-addon-title{
font-size:30px; font-weight:700; line-height:1.25; margin:0; color:var(--navy-deep);
}
/* --- Bouton « parcours complet » sur fond clair --------------------------
Remplace le style en ligne de l'ancien balisage : `.btn-ghost` est prévu
pour les fonds sombres, il faut l'inverser ici. */
.sppb-btn.pe-cta-light,
a.pe-cta-light{
margin-top:30px;
border-color:var(--pe-border);
color:var(--navy-deep) !important;
background:transparent;
}
.sppb-btn.pe-cta-light:hover,
a.pe-cta-light:hover{
border-color:var(--teal); color:var(--teal) !important; background:transparent;
}
/* --- 15. FILTRES RÉALISATIONS (Consultation / Leader / Co-responsable) ----
Ajout MEXA 2026-09-02. Les pilules portent data-pe-filter, les cartes la
classe .pe-cat-. Le filtrage est piloté par js/custom.js ; sans JS,
toutes les cartes restent visibles (dégradation propre). */
.pe-pill{ user-select:none; }
.pe-pill:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.pe-case-hidden{ display:none !important; }
.pe-cases .sppb-addon-wrapper.pe-case-hidden{ display:none !important; }
.pe-case .pe-case-client{ min-height:auto; }
.pe-case h4{ font-size:15px; line-height:1.45; }
.pe-case-media{ height:96px; }