/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Thème enfant Logia, projet Directeur Particulier
Author: Logia
Template: hello-elementor
Version: 3.0.0
Text Domain: hello-elementor-child
*/
/* ==========================================================
* DIRECTEUR PARTICULIER : styles transverses
* Couleurs, typos et boutons viennent des globaux Elementor (Kit).
* Ce fichier ne gère que ce qui n'est pas réglable proprement dans Elementor.
* ========================================================== */
/* ==========================================================
* 1. JETONS
* ========================================================== */
:root {
--dp-bleu: var(--e-global-color-primary, #00377A);
--dp-bleu-fonce: var(--e-global-color-text, #001835);
--dp-bleu-clair: var(--e-global-color-secondary, #509ACF);
--dp-orange: var(--e-global-color-accent, #F9B521);
--dp-blanc: #FDFDFB;
--dp-fond-clair: #F4F8F8;
--dp-texte: rgba(0, 24, 53, .7);
--dp-texte-discret: rgba(0, 24, 53, .5);
--dp-tag-fond: rgba(80, 154, 207, .1);
--dp-bordure: rgba(80, 154, 207, .2);
--dp-font: "Ubuntu", sans-serif;
--dp-radius-l: 1rem; /* 16px cartes, photos, CTA */
--dp-radius-m: .75rem; /* 12px */
--dp-radius-s: .5rem; /* 8px */
--dp-radius-xs: .375rem; /* 6px sur-titres, badges */
/* Bas du header fixe (barre d'admin comprise), recalculé en JS (site.js) quand le header change de taille.
Tout ce qui se place sous le menu (sticky, ancres, menu mobile) utilise ces deux variables, jamais un nombre en dur. */
--nav-height: 88px;
--nav-gap: 10px;
}
/*
* Les carrousels et décors qui débordent ne doivent jamais créer de scroll horizontal.
* Uniquement sur la racine (propagée au viewport) : un overflow-x sur body, une section ou le header
* en fait une zone défilante sur Safari iOS (menu burger coupé, sticky cassé).
*/
html {
overflow-x: hidden;
scroll-padding-top: calc(var(--nav-height) + var(--nav-gap));
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Rognage des textes à la hauteur de capitale (comme dans Figma) : les espacements de la maquette se mesurent
entre lettres, pas entre interlignes. Sans effet sur les navigateurs qui ne gèrent pas encore text-box. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button .elementor-button-text,
.pb-check .elementor-icon-list-text {
text-box: trim-both cap alphabetic;
}
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b {
font-weight: 500;
color: var(--dp-bleu-fonce);
}
.pb-sombre .elementor-widget-text-editor strong { color: #FFFFFF; }
/* Images liées : le lien prend toute la largeur pour que l'image puisse s'étirer */
.elementor-widget-image a { display: block; }
/*
des titres : masqués en mobile (le générateur met une espace avant chaque
) */
@media (max-width: 767px) {
.elementor-heading-title br { display: none; }
}
@media (max-width: 1024px) {
.dp-etape .elementor-heading-title br { display: none; }
}
/* ==========================================================
* 2. DÉCORS DE FOND
* ========================================================== */
/* .phantom : décor qui peut déborder sur les sections voisines */
.e-con:has(> .phantom),
.e-con:has(> .e-con-inner > .phantom) {
position: relative;
z-index: 1;
}
.phantom {
z-index: -1;
pointer-events: none;
user-select: none;
}
/* .bg-image : décor coupé aux bords de la section */
.e-con:has(> .bg-image) {
position: relative;
overflow: hidden;
}
.bg-image {
position: absolute;
z-index: 0;
pointer-events: none;
user-select: none;
}
.e-con:has(> .bg-image) > *:not(.bg-image) {
position: relative;
z-index: 1;
}
.bg-image.sc-bg-behind { z-index: -1; }
/* Motif des sections bleues #00377A (« Nos atouts », « Ce que cela change pour vous »…) : amas de points orange
à 5 %, une colonne sur deux décalée d'une demi-hauteur (« Motif » de la maquette). */
.dp-points {
background-image: url("assets/img/motif-points.svg") !important;
background-size: 128px 64px !important;
background-repeat: repeat !important;
}
/* Même motif, en bleu à 5 %, sur les cartes jaunes « Échangeons ensemble » */
.dp-carte-reco--cta.e-con,
.dp-encart-orange.e-con {
background-image: url("assets/img/motif-points-bleu.svg") !important;
background-size: 128px 64px !important;
background-repeat: repeat !important;
}
/* Anneaux concentriques très clairs des sections blanc cassé (jamais sur le gris #F4F8F8) : « Concentric pattern »
de la maquette, centré hors cadre en bas à droite, un anneau gris doux tous les 18 px. */
.dp-anneaux {
--dp-anneau: rgba(0, 24, 53, .022);
--dp-anneaux-centre: 150% 100%;
background-image: repeating-radial-gradient(circle at var(--dp-anneaux-centre), transparent 0 15px, var(--dp-anneau) 16.5px, transparent 18px) !important;
}
/* Deux sections à anneaux collées : même centre sur leur jonction, sinon les cercles se cassent */
.dp-anneaux + .dp-anneaux { --dp-anneaux-centre: 150% 0%; }
/* Fond d'enchaînement : fond clair qui se fond vers le haut et le bas */
.dp-fondu-sections {
background-image: linear-gradient(180deg, #F4F8F8 0%, rgba(244, 248, 248, 0) 15%, rgba(244, 248, 248, 0) 85%, #F4F8F8 100%) !important;
}
/* Décors posés en absolu (grille du hero, pointillés) : jamais cliquables */
.pb-deco {
pointer-events: none;
user-select: none;
}
.pb-miroir img { transform: scaleX(-1); }
/* ==========================================================
* 3. UTILITAIRES
* ========================================================== */
/* Affichage par breakpoint */
@media (min-width: 1025px) { .menu-mobile-only { display: none !important; } }
@media (max-width: 1024px) { .desktop-only { display: none !important; } }
/* Mot en orange italique dans un titre (maquette : Bold Italic orange) : …
Dans les champs ACF, le client écrit le mot entre astérisques (inc/cta.php). */
.dp-accent,
.elementor-heading-title em {
font-style: italic;
color: var(--dp-orange);
}
.pb-o { color: var(--dp-orange); }
.text-orange { color: var(--dp-orange); }
.text-bleu { color: var(--dp-bleu); }
.text-bleu-clair { color: var(--dp-bleu-clair); }
.text-bleu-fonce { color: var(--dp-bleu-fonce); }
.text-white { color: #FFFFFF; }
.thin { font-weight: 300; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
/* Mot souligné en orange (cartes « Vous vous reconnaissez ? ») */
.dp-souligne {
text-decoration: underline;
text-decoration-color: var(--dp-orange);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* ==========================================================
* 4. SUR-TITRE (pastille avec puce orange)
* Classe pb-surtitre sur un widget Titre (+ pb-surtitre--clair sur fond bleu)
* ========================================================== */
.pb-surtitre { line-height: 0; }
.pb-surtitre .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 12px;
vertical-align: top;
padding: 10px 12px;
border-radius: var(--dp-radius-xs);
background: var(--dp-tag-fond);
text-box: none;
line-height: 1;
}
.pb-surtitre .elementor-heading-title::before {
content: "";
flex: 0 0 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dp-orange);
}
.pb-surtitre--clair .elementor-heading-title {
background: rgba(150, 211, 255, .1);
}
.pb-surtitre--petit .elementor-heading-title::before {
flex-basis: 6px;
width: 6px;
height: 6px;
}
/* ==========================================================
* 5. BOUTONS
* Pilule orange (Kit) + rond blanc fléché (icône SVG du widget, à droite).
* Survol : le fond blanc part du rond de la flèche et remplit le bouton,
* la flèche pivote vers la droite.
* ========================================================== */
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 50px;
box-shadow: inset 0 0 0 1px transparent;
transition: box-shadow .35s ease, color .25s ease;
}
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button-content-wrapper {
align-items: center;
gap: 16px;
}
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button-icon {
display: inline-flex;
flex: 0 0 38px;
width: 38px;
height: 38px;
font-size: 38px;
transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button-icon svg {
width: 38px;
height: 38px;
}
/* Le cercle blanc grandit depuis le centre du rond fléché (8 px du bord droit + 19 px de rayon). */
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button::before {
content: "";
position: absolute;
top: 50%;
right: 27px;
z-index: -1;
width: 38px;
height: 38px;
margin: -19px -19px 0 0;
border-radius: 50%;
background: #FFFFFF;
transform: scale(0);
transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button:is(:hover, :focus-visible)::before {
transform: scale(var(--dp-btn-remplissage, 24));
}
/* Bord au survol, au-dessus du remplissage blanc pour rester visible sur fond clair */
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border: 1px solid var(--dp-btn-bord, var(--dp-orange));
border-radius: inherit;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button:is(:hover, :focus-visible)::after {
opacity: 1;
}
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button:is(:hover, :focus-visible) .elementor-button-icon {
transform: rotate(45deg);
}
/* Bouton sans icône : remplissage depuis le bord droit */
:is(.elementor-widget-button:not(.pb-lien), .dp-form-contact) .elementor-button:not(:has(.elementor-button-icon))::before { right: 0; }
@media (prefers-reduced-motion: reduce) {
.elementor-widget-button .elementor-button::before,
.elementor-widget-button .elementor-button-icon { transition: none !important; }
}
/* Option : léger soulèvement + ombre au survol (classe pb-hover-leve sur un bouton ou un conteneur) */
.pb-hover-leve .elementor-button,
.pb-hover-leve.elementor-widget-button .elementor-button {
transition: box-shadow .35s ease, color .25s ease, transform .25s ease;
}
.pb-hover-leve .elementor-button:hover {
transform: translateY(-2px);
box-shadow: inset 0 0 0 1px var(--dp-orange), 0 10px 24px rgba(0, 24, 53, .14);
}
/* Lien souligné (« Voir nos cas clients », « Qu'est-ce qu'un DAF externalisé ? », « Lire l'article ») :
classe pb-lien sur un widget Bouton. La couleur vient du widget (blanc, bleu, gris…). */
.elementor-widget-button.pb-lien .elementor-button {
background: transparent !important;
padding: 4px 0 6px !important;
border-radius: 0 !important;
border-bottom: 1px solid currentColor;
min-height: 0;
fill: currentColor !important;
transition: color .25s ease, border-color .25s ease;
}
.elementor-widget-button.pb-lien .elementor-button:is(:hover, :focus-visible) {
color: var(--dp-orange) !important;
}
.elementor-widget-button.pb-lien .elementor-button-content-wrapper { gap: 10px; align-items: center; }
.elementor-widget-button.pb-lien .elementor-button-icon svg {
width: 12px;
height: 12px;
fill: currentColor !important;
transition: transform .25s ease;
}
.elementor-widget-button.pb-lien .elementor-button:hover .elementor-button-icon svg { transform: translateX(3px); }
@media (min-width: 768px) {
.elementor-widget-button.pb-lien .elementor-button-text { white-space: nowrap; }
}
/* ==========================================================
* 6. HEADER en capsule au scroll (classe pb-header--capsule, #navBar)
* En haut de page : transparent, mêmes dimensions qu'une barre classique.
* Au scroll (classe .scrollHeader du snippet « Scroll Navbar ») : le contenu devient une pastille bleu nuit
* translucide et floutée, plus fine ; les côtés restent transparents. Téléphone : barre pleine largeur.
* ========================================================== */
.pb-header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
body.admin-bar .pb-header { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .pb-header { top: 46px; }
}
/* Le header n'est jamais rogné : le menu déroulant du burger déborde dessous. */
.pb-header,
.pb-header .e-con {
overflow: visible !important;
}
.pb-header--capsule.e-con,
.pb-header--capsule.scrollHeader.e-con {
background-color: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
/* Décalage du haut : padding de la section (parent transparent), donc compris dans --nav-height. */
.pb-header--capsule.scrollHeader.e-con { padding-top: 16px !important; }
.pb-header--capsule > .e-con-inner {
position: relative;
padding: 16px 0 0;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
transition: padding .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pb-header--capsule.scrollHeader > .e-con-inner {
padding: 8px 12px 8px 28px;
border-color: rgba(255, 255, 255, .14);
background: rgba(0, 24, 53, .88);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 12px 32px rgba(0, 24, 53, .22);
}
.pb-header--capsule .elementor-widget-theme-site-logo img,
.pb-header--capsule .elementor-widget-image img { transition: width .3s ease; }
.pb-header--capsule.scrollHeader .elementor-widget-theme-site-logo img,
.pb-header--capsule.scrollHeader .dp-logo img { width: 124px !important; }
.pb-header--capsule.scrollHeader .elementor-widget-button .elementor-button {
min-height: 44px;
padding-top: 3px;
padding-bottom: 3px;
}
@media (max-width: 1024px) {
.pb-header--capsule > .e-con-inner { padding: 14px 0 0; }
.pb-header--capsule.scrollHeader > .e-con-inner { padding: 8px 10px 8px 24px; }
}
/* Téléphone : pas de capsule. Header transparent en haut de page, barre bleu nuit pleine largeur au scroll. */
@media (max-width: 767px) {
.pb-header--capsule > .e-con-inner { padding: 12px 0; }
.pb-header--capsule.scrollHeader.e-con {
background-color: var(--dp-bleu-fonce) !important;
box-shadow: 0 10px 30px rgba(0, 24, 53, .18) !important;
padding-top: 0 !important;
}
.pb-header--capsule.scrollHeader > .e-con-inner {
padding: 10px 0;
border-color: transparent;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.pb-header--capsule.scrollHeader .elementor-widget-theme-site-logo img,
.pb-header--capsule.scrollHeader .dp-logo img { width: 112px !important; }
}
/* Le header laisse passer les clics vers la page : seuls ses éléments interactifs les captent. */
.pb-header { pointer-events: none; }
.pb-header a,
.pb-header button,
.pb-header [role="button"],
.pb-header .elementor-menu-toggle,
.pb-header .sub-menu,
.pb-header .elementor-nav-menu--dropdown {
pointer-events: auto;
}
/* Surface opaque (capsule au scroll, barre du téléphone) : elle garde ses clics. */
.pb-header--capsule.scrollHeader > .e-con-inner { pointer-events: auto; }
@media (max-width: 767px) {
.pb-header--capsule.scrollHeader.e-con { pointer-events: auto; }
}
.elementor-editor-active .pb-header {
pointer-events: auto;
position: relative !important;
background-color: var(--dp-bleu-fonce);
}
/* Menu : pas de retour à la ligne ; espacement fluide entre 1025 et 1440 px */
.pb-header .elementor-button { white-space: nowrap; }
.pb-nav .elementor-nav-menu--layout-horizontal .elementor-nav-menu { flex-wrap: nowrap; }
@media (min-width: 1025px) and (max-width: 1300px) {
.pb-nav .elementor-nav-menu--main .elementor-item {
padding-left: clamp(6px, calc(6px + (100vw - 1025px) * .036), 16px) !important;
padding-right: clamp(6px, calc(6px + (100vw - 1025px) * .036), 16px) !important;
}
}
/* Page courante : le lien et son parent (« Vos enjeux », « DAF externalisé ») en orange. */
.pb-nav .elementor-nav-menu--main .current-menu-ancestor > a.elementor-item,
.pb-nav .elementor-nav-menu--main .current-menu-parent > a.elementor-item {
color: var(--dp-orange) !important;
fill: var(--dp-orange);
}
/* Menu du burger : sous la capsule et à sa largeur (et non étiré sur tout l'écran). */
.pb-header--capsule > .e-con-inner > .e-con,
.pb-header--capsule .elementor-widget-nav-menu { position: static !important; }
.pb-header--capsule .elementor-nav-menu--dropdown.elementor-nav-menu__container {
top: calc(100% + 10px) !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
margin-top: 0 !important;
}
/* Sous-menu : panneau blanc arrondi, chaque lien est une pastille en retrait de 8 px (rayon 16 - 8 = 8). */
.pb-nav .elementor-nav-menu--main .sub-menu {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 24, 53, .16);
}
.pb-nav .elementor-nav-menu--main .sub-menu,
.pb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu {
padding: 8px !important;
background: #FFFFFF;
}
.pb-nav .elementor-nav-menu--main .sub-menu li + li,
.pb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li + li,
.pb-nav .elementor-nav-menu--dropdown .sub-menu li + li {
margin-top: 2px;
}
.pb-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item { border-radius: 8px; }
.pb-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item,
.pb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-sub-item {
border-inline-start: 0 !important;
}
.pb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item,
.pb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-sub-item {
border-radius: 16px;
}
.pb-nav .elementor-nav-menu--main .elementor-item.has-submenu .sub-arrow { padding-left: 6px; }
.pb-nav .elementor-nav-menu--main .sub-arrow svg,
.pb-nav .elementor-nav-menu--main .sub-arrow i {
font-size: .75rem;
width: 10px;
}
/* Menu mobile (burger) */
.pb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
border-radius: 24px;
margin-top: 16px !important;
box-shadow: 0 24px 48px rgba(0, 24, 53, .25);
overflow: hidden;
}
.pb-nav .elementor-menu-toggle { border-radius: 12px; }
.pb-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
max-height: calc(100dvh - var(--nav-height) - var(--nav-gap));
overflow-y: auto;
overscroll-behavior: contain;
}
/* « Prendre rdv » en bas du menu burger : fond bleu, texte jaune */
.pb-nav-burger .dp-menu-rdv { margin: 8px 0 0 !important; }
.pb-nav-burger .elementor-nav-menu--dropdown .dp-menu-rdv > a.elementor-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 50px;
margin: 4px;
padding: 6px 6px 6px 20px !important;
border-radius: 999px !important;
background: var(--dp-bleu) !important;
color: var(--dp-orange) !important;
font-weight: 500;
}
.pb-nav-burger .elementor-nav-menu--dropdown .dp-menu-rdv > a.elementor-item::before,
.pb-nav-burger .elementor-nav-menu--dropdown .dp-menu-rdv > a.elementor-item::after { display: none !important; }
.pb-nav-burger .dp-menu-rdv-fleche {
flex: 0 0 38px;
width: 38px;
height: 38px;
background: url("/wp-content/uploads/2026/10/bouton-rond-fleche.svg") center / contain no-repeat;
}
.pb-nav-burger .elementor-nav-menu--dropdown .dp-menu-rdv > a.elementor-item:is(:hover, :focus-visible) {
background: var(--dp-bleu-fonce) !important;
color: var(--dp-orange) !important;
}
/* Mobile : le panneau était un peu trop détaché de la barre */
@media (max-width: 767px) {
.elementor-453 .pb-header--capsule .elementor-element-378a8f4 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
top: calc(100% + 4px) !important;
margin-top: 4px !important;
}
/* Icône téléphone à côté du burger : même hauteur que lui (42 px), sans l'interligne du widget Icône */
.dp-header-tel .elementor-icon-wrapper { display: flex; }
.dp-header-tel .elementor-icon { padding: .6875rem !important; font-size: 1.25rem !important; }
.dp-header-tel .elementor-icon svg { width: 1em !important; height: 1em !important; }
.pb-nav-burger { --nav-menu-icon-size: 1.625rem !important; }
.pb-nav-burger .elementor-menu-toggle { padding: .5rem !important; }
.dp-header-tel .elementor-icon, .pb-nav-burger .elementor-menu-toggle { background-color: rgba(255, 255, 255, .22) !important; }
}
/* ==========================================================
* 7. SPOTLIGHT CARDS : lueur bleu clair qui suit la souris
* Classe .sc-spotlight sur le conteneur de la carte (+ is-dark sur fond bleu)
* Script : Code personnalisé « Spotlights Cards » (fin de body)
* ========================================================== */
.sc-spotlight {
position: relative;
overflow: hidden;
isolation: isolate;
}
.sc-spotlight::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(80, 154, 207, .18), transparent 60%);
opacity: 0;
transition: opacity 400ms ease;
pointer-events: none;
z-index: -1;
}
.sc-spotlight:hover::after { opacity: 1; }
.sc-spotlight.is-dark::after {
background: radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(80, 154, 207, .30), transparent 60%);
}
/* ==========================================================
* 8. CARTES
* ========================================================== */
.e-loop-item > .e-con { height: 100%; }
/* Image de carte zoomée au survol : même rayon sur l'image et sur son cadre (overflow: hidden). */
.pb-carte .elementor-widget-image,
.pb-carte .elementor-widget-image > .elementor-widget-container {
overflow: hidden;
isolation: isolate;
}
.pb-carte .elementor-widget-image img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pb-carte:hover .elementor-widget-image img { transform: scale(1.05); }
/* Étapes : liste séparée par un trait */
.pb-etapes > .e-con + .e-con {
border-top: 1px solid var(--dp-bordure);
padding-top: 24px !important;
}
/* ==========================================================
* 9. CARROUSELS
* ========================================================== */
/* Débordement visible des deux côtés jusqu'aux bords de l'écran (html coupe au bord). */
.pb-carrousel-deborde .swiper { overflow: visible !important; }
@media (max-width: 767px) {
.pb-carrousel-deborde .swiper { margin-right: 56px; }
}
/* Cartes hors champ atténuées (carrousels de cas clients, équipe) */
:is(.carrousel-cas-clients, .carrousel-equipe, .carrousel-actus) .swiper { overflow: visible !important; }
/* Fondu de sortie des bords (masque, quel que soit le fond) */
.home .dp-bandeau-widget.pb-fondu-bords { -webkit-mask-image: none; mask-image: none; }
.pb-fondu-bords {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pb-fondu-plein, 12%), #000 calc(100% - var(--pb-fondu-plein, 12%)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--pb-fondu-plein, 12%), #000 calc(100% - var(--pb-fondu-plein, 12%)), transparent 100%);
}
.pb-fondu-droite {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--pb-fondu-net, 48px)), transparent 100%);
mask-image: linear-gradient(90deg, #000 calc(100% - var(--pb-fondu-net, 48px)), transparent 100%);
}
/* Bandeau de logos d'outils : carrousel d'images en défilement continu.
Chaque logo garde sa largeur réelle (voir site.js, slidesPerView auto) : même taille et même écart, quel que soit l'écran. */
.pb-logos-carousel .swiper-wrapper { transition-timing-function: linear !important; }
.pb-logos-carousel .swiper-slide {
display: flex !important;
align-items: center;
justify-content: center;
width: auto !important;
height: 64px;
}
.pb-logos-carousel .swiper-slide a,
.pb-logos-carousel .swiper-slide-inner {
display: flex;
align-items: center;
width: auto;
margin: 0;
}
.pb-logos-carousel .swiper-slide-image {
width: auto !important;
height: 52px;
max-width: none;
max-height: none;
object-fit: contain;
}
/* Navigation des carrousels de boucle : flèches rondes et points regroupés sous les cartes */
.pb-carrousel-nav.elementor-widget {
--pb-nav-taille: 56px;
--pb-nav-espace: 40px;
--arrow-normal-color: #FFFFFF;
--arrow-hover-color: var(--dp-bleu);
--arrow-size: 18px;
--dots-normal-color: rgba(80, 154, 207, .35);
--dots-hover-color: var(--dp-bleu);
--swiper-pagination-size: 8px;
--swiper-pagination-spacing: 0px;
position: relative;
padding-bottom: calc(var(--pb-nav-taille) + var(--pb-nav-espace));
}
.pb-carrousel-nav.elementor-widget .elementor-swiper-button {
position: absolute;
top: auto !important;
bottom: 0 !important;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--pb-nav-taille);
height: var(--pb-nav-taille);
margin: 0 !important;
border-radius: 50%;
font-size: 1.125rem;
color: #FFFFFF;
background: var(--dp-bleu);
transform: none !important;
transition: background-color .2s ease, color .2s ease, opacity .2s ease;
cursor: pointer;
}
.pb-carrousel-nav.elementor-widget .elementor-swiper-button svg { width: 1em; height: 1em; fill: currentColor; }
.pb-carrousel-nav.elementor-widget .elementor-swiper-button-prev { left: 0 !important; right: auto !important; }
.pb-carrousel-nav.elementor-widget .elementor-swiper-button-next { left: calc(var(--pb-nav-taille) + 12px) !important; right: auto !important; }
.pb-carrousel-nav.elementor-widget .elementor-swiper-button:is(:hover, :focus-visible) {
color: var(--dp-bleu);
background: var(--dp-orange);
}
.pb-carrousel-nav.elementor-widget .elementor-swiper-button.swiper-button-disabled { opacity: .35; pointer-events: none; }
.pb-carrousel-nav.elementor-widget .swiper-pagination {
position: absolute !important;
top: auto !important;
bottom: 0 !important;
left: calc(2 * var(--pb-nav-taille) + 36px) !important;
right: auto !important;
display: flex;
align-items: center;
gap: 8px;
width: auto !important;
height: var(--pb-nav-taille);
margin: 0 !important;
transform: none !important;
}
.pb-carrousel-nav.elementor-widget .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 !important;
border-radius: 100px;
background: rgba(80, 154, 207, .35);
opacity: 1;
transition: width .3s ease, background-color .3s ease;
}
.pb-carrousel-nav.elementor-widget .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 28px;
background: var(--dp-orange);
}
.pb-carrousel-nav.elementor-widget .swiper-button-lock,
.pb-carrousel-nav.elementor-widget .swiper-pagination-lock { display: none !important; }
.pb-carrousel-nav.elementor-widget:has(.swiper-button-lock) { padding-bottom: 0; }
@media (max-width: 767px) {
.pb-carrousel-nav.elementor-widget { --pb-nav-taille: 48px; --pb-nav-espace: 28px; }
}
.elementor-widget-remote_arrows_widget:has(.rca__btn--prev.is-disabled):has(.rca__btn--next.is-disabled) { display: none; }
/* ==========================================================
* 10. BADGES ARTICLE (cartes Ressources)
* ========================================================== */
.sc-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.sc-badge {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: var(--dp-radius-xs);
font-family: var(--dp-font);
font-size: .875rem;
font-weight: 500;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: #FFFFFF;
transition: background-color .25s ease, color .25s ease;
}
.sc-badge--une { background: var(--dp-orange); color: var(--dp-bleu-fonce); }
.sc-badge--cat { background: var(--dp-bleu); }
a.sc-badge--cat:hover { background: var(--dp-bleu-clair); }
.sc-badges--light .sc-badge--cat { background: var(--dp-tag-fond); color: var(--dp-bleu-clair); }
.sc-badges--light a.sc-badge--cat:hover { background: var(--dp-bleu); color: #FFFFFF; }
/* ==========================================================
* 11. FIL D'ARIANE (hero des pages intérieures)
* ========================================================== */
.dp-ariane {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0;
padding: 6px 10px;
list-style: none;
border-radius: var(--dp-radius-xs);
background: rgba(0, 24, 53, .35);
font-family: var(--dp-font);
font-size: .875rem;
font-weight: 500;
line-height: 1.2;
color: #FFFFFF;
}
.dp-ariane li { display: inline-flex; align-items: center; gap: 10px; }
.dp-ariane li + li::before {
content: ">";
color: rgba(255, 255, 255, .7);
}
.dp-ariane a { color: #FFFFFF; transition: color .2s ease; }
.dp-ariane a:hover { color: var(--dp-orange); }
.dp-ariane [aria-current="page"] { color: var(--dp-orange); }
/* ==========================================================
* 12. FILTRES DE TAXONOMIE (pastilles « Tous les enjeux »…)
* Classe pb-filtres sur le widget Filtre de taxonomie
* ========================================================== */
.pb-filtres .e-filter {
gap: 8px;
justify-content: center;
}
.pb-filtres .e-filter-item {
padding: 9px 14px !important;
border: 1px solid var(--dp-bordure) !important;
border-radius: 100px !important;
background: #FFFFFF !important;
color: var(--dp-texte) !important;
font-family: var(--dp-font);
font-size: .875rem !important;
font-weight: 400 !important;
line-height: 1.2 !important;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.pb-filtres .e-filter-item:hover { border-color: var(--dp-bleu-clair) !important; color: var(--dp-bleu) !important; }
.pb-filtres .e-filter-item[aria-pressed="true"] {
background: var(--dp-orange) !important;
border-color: var(--dp-orange) !important;
color: var(--dp-bleu) !important;
font-weight: 500 !important;
}
.pb-filtres--gauche .e-filter { justify-content: flex-start; }
@media (max-width: 1024px) {
.pb-filtres .e-filter {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 4px;
}
.pb-filtres .e-filter::-webkit-scrollbar { display: none; }
.pb-filtres .e-filter-item { flex: 0 0 auto; white-space: nowrap; }
}
/* ==========================================================
* 13. ARTICLE : contenu, sommaire, partage
* ========================================================== */
.sc-post-content {
font-family: var(--dp-font);
font-size: 1rem;
line-height: 1.7;
letter-spacing: -.01em;
color: var(--dp-texte);
}
.sc-post-content p,
.sc-post-content ul,
.sc-post-content ol { margin: 0 0 1.25em; }
.sc-post-content ul,
.sc-post-content ol { padding-left: 1.4em; }
.sc-post-content li { margin-bottom: .4em; }
.sc-post-content li::marker { color: var(--dp-orange); }
.sc-post-content a {
color: var(--dp-bleu);
text-decoration: underline;
text-decoration-color: var(--dp-orange);
text-underline-offset: 3px;
}
.sc-post-content strong { font-weight: 500; color: var(--dp-bleu-fonce); }
.sc-post-content :is(h2, h3, h4) {
font-family: var(--dp-font);
font-weight: 700;
color: var(--dp-bleu);
letter-spacing: -.02em;
margin: 2.5rem 0 .75rem;
}
.sc-post-content h2 { font-size: 2rem; line-height: 1.2; }
.sc-post-content h3 { font-size: 1.5rem; line-height: 1.3; }
.sc-post-content h4 { font-size: 1.25rem; line-height: 1.3; }
.sc-post-content > :first-child { margin-top: 0; }
.sc-post-content > *:last-child { margin-bottom: 0 !important; }
.sc-post-content img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
border-radius: var(--dp-radius-l);
object-fit: cover;
}
.sc-post-content figure,
.sc-post-content .wp-block-image { margin: 2rem 0; max-width: 100%; }
.sc-post-content figcaption {
margin-top: .5rem;
font-size: .875rem;
color: var(--dp-texte-discret);
}
.sc-post-content blockquote {
margin: 2rem 0;
padding: .5rem 0 .5rem 1.5rem;
border-left: 3px solid var(--dp-orange);
font-size: 1.25rem;
font-weight: 500;
font-style: italic;
line-height: 1.5;
color: var(--dp-bleu);
}
.sc-post-content blockquote p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
.sc-post-content :is(h2, h3, h4) { margin-top: 2rem; }
.sc-post-content h2 { font-size: 1.625rem; }
.sc-post-content h3 { font-size: 1.3125rem; }
}
/* ==========================================================
* 14. FORMULAIRES ELEMENTOR (tous) : libellés flottants et champ fichier en bouton
* Libellés activés dans le widget : masqués tant que le champ est vide, puis en étiquette sur le bord haut.
* ========================================================== */
.elementor-widget-form {
--pb-form-accent: var(--dp-orange);
--pb-form-accent-survol: color-mix(in srgb, var(--pb-form-accent) 82%, #000);
--pb-form-focus: var(--dp-bleu-clair);
--pb-form-etiquette-fond: #FFFFFF;
--pb-form-etiquette-texte: var(--dp-bleu-fonce);
--pb-form-etiquette-gauche: 12px;
--pb-form-demi-gouttiere: 12px;
--pb-form-rayon-fichier: 8px;
}
.elementor-widget-form .elementor-field-group { position: relative; }
.elementor-widget-form .elementor-field-group:has(.elementor-field-textual) > .elementor-field-label {
position: absolute;
top: 0;
left: calc(var(--pb-form-demi-gouttiere) + var(--pb-form-etiquette-gauche));
z-index: 2;
max-width: calc(100% - 2 * (var(--pb-form-demi-gouttiere) + var(--pb-form-etiquette-gauche)));
margin: 0;
padding: 4px 8px !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: .75rem !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .01em;
color: var(--pb-form-etiquette-texte) !important;
background-color: var(--pb-form-etiquette-fond);
border: 1px solid rgba(0, 24, 53, .08);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0, 24, 53, .06);
transform: translateY(-50%) translateY(8px);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease, color .2s ease, border-color .2s ease;
}
.elementor-widget-form .elementor-field-group:has(.elementor-field-textual):focus-within > .elementor-field-label,
.elementor-widget-form .elementor-field-group:has(input.elementor-field-textual:not(:placeholder-shown)) > .elementor-field-label,
.elementor-widget-form .elementor-field-group:has(textarea:not(:placeholder-shown)) > .elementor-field-label,
.elementor-widget-form .elementor-field-group:has(select option[value=""]:not(:checked)) > .elementor-field-label,
.elementor-widget-form .elementor-field-group:has(select):not(:has(option[value=""])) > .elementor-field-label {
opacity: 1;
transform: translateY(-50%);
}
.elementor-widget-form .elementor-field-group:has(.elementor-field-textual):focus-within > .elementor-field-label {
color: var(--pb-form-focus) !important;
border-color: color-mix(in srgb, var(--pb-form-focus) 30%, transparent);
}
.elementor-widget-form .elementor-mark-required .elementor-field-label::after {
padding-inline-start: 2px;
color: var(--pb-form-accent);
}
@media (prefers-reduced-motion: reduce) {
.elementor-widget-form .elementor-field-group:has(.elementor-field-textual) > .elementor-field-label { transition: opacity .2s ease; }
}
.elementor-widget-form .elementor-field-type-upload input[type="file"] {
position: absolute;
top: -1px;
left: 0;
z-index: -1;
width: 1px;
height: 1px;
padding: 0;
border: 0 !important;
opacity: 1;
}
.elementor-widget-form .elementor-field-type-upload > .elementor-field-label {
display: block;
width: 100%;
margin: 0;
padding: 12px 16px !important;
font-size: 1rem !important;
line-height: 1.4 !important;
text-align: center;
color: var(--dp-bleu) !important;
background-color: var(--pb-form-accent);
border: 0 !important;
border-radius: var(--pb-form-rayon-fichier);
cursor: pointer;
transition: background-color .3s ease;
}
.elementor-widget-form .elementor-field-type-upload > .elementor-field-label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
vertical-align: -4px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor-widget-form .elementor-field-type-upload > .elementor-field-label:hover { background-color: var(--pb-form-accent-survol); }
.elementor-widget-form .elementor-field-type-upload:has(input:focus-visible) > .elementor-field-label {
outline: 2px solid var(--pb-form-accent);
outline-offset: 3px;
}
.elementor-widget-form .pb-upload-formats {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin-left: 8px;
vertical-align: middle;
}
.elementor-widget-form .pb-format {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .65rem;
font-weight: 500;
line-height: 1;
text-transform: lowercase;
color: rgba(0, 0, 0, .65);
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 6px;
}
/* Mention reCAPTCHA sous le formulaire */
.sc-form-notice {
margin: 4px 0 0;
font-size: .75rem;
line-height: 1.5;
color: var(--dp-texte-discret);
}
.sc-form-notice a { color: inherit; text-decoration: underline; }
.sc-form-notice a:hover { color: var(--dp-bleu); }
/* ==========================================================
* 15. BLOC CTA DE BAS DE PAGE + FOOTER
* Le bloc chevauche le haut du footer bleu nuit (126 px).
* ========================================================== */
.pb-cta-zone {
background: linear-gradient(180deg, transparent calc(100% - 126px), var(--dp-bleu-fonce) calc(100% - 126px)) !important;
}
.pb-footer-menu .elementor-nav-menu--dropdown {
background: transparent;
box-shadow: none;
overflow: visible;
}
.pb-footer-menu .elementor-nav-menu {
display: flex;
flex-direction: column;
gap: 24px;
}
.pb-footer-menu .elementor-nav-menu .elementor-item {
display: inline-flex !important;
width: auto;
border: 0 !important;
transition: color .2s ease;
}
.pb-footer-menu .elementor-nav-menu .elementor-item:hover { color: var(--dp-orange) !important; }
.pb-footer-bas a { color: #FFFFFF; transition: color .2s ease; }
.pb-footer-bas a:hover { color: var(--dp-orange); }
@media (max-width: 1024px) {
.pb-footer-bas .elementor-heading-title { text-align: center; line-height: 1.6; }
}
/* CTA en tablette : texte sur toute la largeur, boutons dessous */
@media (max-width: 1024px) and (min-width: 768px) {
.pb-cta-global.e-con {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 32px !important;
}
.pb-cta-global .pb-cta-textes.e-con,
.pb-cta-global .pb-cta-boutons.e-con {
--width: 100%;
width: 100% !important;
max-width: none !important;
flex: none !important;
}
.pb-cta-global .pb-cta-boutons.e-con {
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
justify-content: flex-start !important;
gap: 24px !important;
padding-top: 0 !important;
}
}
/* ==========================================================
* 16. TABLETTE (768-1024 px) : rangées de cartes en carrousel tactile bord à bord
* ========================================================== */
@media (max-width: 1024px) and (min-width: 768px) {
.pb-scroll-tablette.e-con {
display: flex !important;
flex-wrap: nowrap !important;
gap: 24px !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
width: calc(100% + 80px) !important;
max-width: none !important;
margin: -8px -40px -32px !important;
padding: 8px 40px 40px !important;
scroll-padding-inline: 40px;
}
.pb-scroll-tablette.e-con::-webkit-scrollbar { display: none; }
.pb-scroll-tablette.e-con > .e-con {
flex: 0 0 calc((100% - 48px) / 3) !important;
max-width: none !important;
scroll-snap-align: start;
}
}
@media (max-width: 899px) and (min-width: 768px) {
.pb-scroll-tablette.e-con > .e-con { flex-basis: 44% !important; }
.dp-connecteur-etapes:has(+ .pb-scroll-tablette) { display: none !important; }
}
@media (max-width: 1024px) and (min-width: 768px) and (pointer: fine) {
.pb-scroll-tablette.e-con { cursor: grab; }
}
@media (max-width: 767px) and (pointer: fine) {
.pb-scroll-mobile.e-con { cursor: grab; }
}
:is(.pb-scroll-mobile, .pb-scroll-tablette).e-con.is-glisse {
scroll-snap-type: none !important;
scroll-behavior: auto !important;
cursor: grabbing;
user-select: none;
}
@media (max-width: 1024px) and (min-width: 900px) {
.pb-rangee-2.e-con { flex-direction: row !important; }
.pb-rangee-2.e-con > .e-con { --width: auto; flex: 1 1 0 !important; min-width: 0; }
}
/* Mobile : rangées de cartes en carrousel tactile */
@media (max-width: 767px) {
.pb-scroll-mobile.e-con {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
width: calc(100% + 40px) !important;
max-width: none !important;
margin: -8px -20px -24px !important;
padding: 8px 20px 24px !important;
scroll-padding-inline: 20px;
}
.pb-scroll-mobile.e-con::-webkit-scrollbar { display: none; }
.pb-scroll-mobile.e-con > .e-con {
flex: 0 0 82% !important;
max-width: none !important;
scroll-snap-align: start;
}
/* Étapes : 50px entre la carte et le bord droit de l'écran */
.pb-scroll-mobile.e-con:has(.dp-etape) > .e-con { flex-basis: calc(100% - 20px) !important; }
}
/* ==========================================================
* 17. ACCESSIBILITÉ
* ========================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.elementor-button:focus-visible {
outline: 2px solid var(--dp-orange);
outline-offset: 3px;
}
/* ==========================================================
* 18. COMPOSANTS DIRECTEUR PARTICULIER
* ========================================================== */
/* ---------- Hero ---------- */
.dp-hero { position: relative; isolation: isolate; }
.dp-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: url("assets/img/grille-technique.svg") left top / 1512px auto no-repeat;
pointer-events: none;
}
.dp-hero > .e-con,
.dp-hero > .e-con-inner > .e-con,
.dp-hero > .elementor-widget { position: relative; z-index: 1; }
/* Accueil : voile sombre court en haut du hero, pour détacher la navigation de la photo */
.dp-hero-accueil::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 13rem;
background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
@media (max-width: 767px) {
.dp-hero-accueil::after { height: 9rem; }
}
.dp-texte-ombre .elementor-widget-container,
.dp-texte-ombre { text-shadow: 0 0 10px rgba(0, 0, 0, .25); }
/* Bandeau défilant des enjeux (sous le hero de l'accueil) */
.dp-bandeau-widget { width: 100%; }
.dp-bandeau {
display: flex;
overflow: hidden;
padding: 16px 0;
background: var(--dp-bleu-fonce);
}
.dp-bandeau-piste {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 24px;
margin: 0;
padding: 0 12px;
list-style: none;
animation: dp-defile 60s linear infinite;
}
.dp-bandeau:hover .dp-bandeau-piste { animation-play-state: paused; }
.dp-bandeau-piste li {
display: inline-flex;
align-items: center;
gap: 24px;
font-family: var(--dp-font);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.3;
letter-spacing: .2em;
text-transform: uppercase;
white-space: nowrap;
color: rgba(253, 253, 251, .82);
}
.dp-bandeau-piste li::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dp-orange);
}
.dp-bandeau-piste a { color: inherit; transition: color .2s ease; }
.dp-bandeau-piste a:hover { color: #FFFFFF; }
.dp-bandeau-piste em { font-style: normal; font-weight: 500; color: var(--dp-orange); }
@keyframes dp-defile { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .dp-bandeau-piste { animation: none; } }
@media (max-width: 767px) {
.dp-bandeau { padding: 18px 0; }
.dp-bandeau-piste li { font-size: 1rem; letter-spacing: .14em; }
}
/* ---------- Titres, citations ---------- */
.dp-signature .elementor-heading-title { position: relative; padding-left: 14px; }
.dp-signature .elementor-heading-title::before { content: "-"; position: absolute; left: 0; }
/* Guillemet en haut à droite de la citation : le widget prend la largeur de sa ligne la plus longue */
.dp-citation-guillemet { position: relative; width: fit-content !important; max-width: 100%; padding-right: 82px; }
.dp-citation-guillemet::after {
content: "";
position: absolute;
top: 2px;
right: 0;
width: 42px;
height: 29px;
background: url("assets/img/guillemet.svg") center / contain no-repeat;
}
/* Accueil, citation du DAF : sur deux lignes en desktop (« …tout au long de l'année : » fait 717 px en 24 px,
la colonne 774 px moins le guillemet) */
@media (min-width: 1280px) {
body .dp-roles .elementor-element.elementor-element-cf5ff85 .elementor-heading-title { font-size: 21px; }
}
@media (min-width: 1366px) {
body .dp-roles .elementor-element.elementor-element-cf5ff85 .elementor-heading-title { font-size: 23px; }
}
.dp-citation-bleue { position: relative; }
.dp-citation-bleue::after {
content: "";
position: absolute;
top: -14px;
right: 51px;
width: 46px;
height: 32px;
background: url("assets/img/guillemet.svg") center / contain no-repeat;
}
@media (max-width: 767px) {
.dp-citation-guillemet { padding-right: 0; }
.dp-citation-guillemet::after { display: none; }
.dp-citation-bleue::after { right: 24px; width: 36px; height: 25px; }
}
/* ---------- Listes numérotées (expert-comptable / DAF) ---------- */
.dp-liste-num {
margin: 0;
padding: 0;
list-style: none;
counter-reset: dp-num;
}
.dp-liste-num li {
position: relative;
counter-increment: dp-num;
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0 0 20px;
font-family: var(--dp-font);
font-size: 1.125rem;
line-height: 1.4;
color: var(--dp-bleu-fonce);
}
.dp-liste-num li + li { padding-top: 20px; border-top: 1px solid var(--dp-bordure); }
.dp-liste-num li:last-child { padding-bottom: 0; }
.dp-liste-num li::before {
content: counter(dp-num, decimal-leading-zero);
font-weight: 700;
line-height: 1;
color: var(--dp-bleu);
}
.dp-liste-num--daf li {
flex-direction: row;
align-items: baseline;
gap: 24px;
font-size: 1.375rem;
}
.dp-liste-num--daf li::before { flex: 0 0 24px; font-size: 1.25rem; color: var(--dp-bleu-clair); }
.dp-liste-boite {
padding: 32px;
border: 1.5px solid rgba(80, 154, 207, .12);
border-radius: 16px;
background: var(--dp-fond-clair);
}
@media (max-width: 767px) {
.dp-liste-boite { padding: 24px 20px; }
.dp-liste-num--daf li { font-size: 1.125rem; gap: 16px; }
}
/* Pointillés décoratifs */
.dp-roles { position: relative; }
/* Point au centre de « Votre DAF… », trait bas au centre de « Votre expert-comptable » */
.dp-pointille-roles { position: absolute !important; top: 0; left: 300px; width: 184px; transform: scaleX(-1); }
.dp-outils { position: relative; }
.dp-pointille-outils { position: absolute !important; top: 50px; right: -60px; width: 299px; }
.dp-connecteur-etapes img { display: block; width: 91%; margin: 0 auto; }
:is(.dp-pointille-roles, .dp-pointille-outils) .dp-trace { display: block; width: 100%; height: auto; overflow: visible; }
.dp-connecteur-etapes .dp-trace { display: block; width: 91%; height: auto; margin: 0 auto; overflow: visible; }
.dp-trace--anime .dp-trace-point { transform-box: fill-box; transform-origin: center; transform: scale(.5); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
.dp-trace--anime .dp-trace-point.is-atteint { transform: scale(1); opacity: 1; }
/* Chiffres clés : la carte se soulève au survol ; la photo zoome doucement au survol du bloc */
.dp-stat.e-con:hover,
:is(.page-id-235, .page-id-1726) .dp-stat-bleue.e-con:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -16px rgba(0, 24, 53, .35); }
.dp-photo-groupe { overflow: hidden; }
.dp-photo-groupe img { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.dp-photo-stats:hover .dp-photo-groupe img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.dp-stat.e-con:hover,
:is(.page-id-235, .page-id-1726) .dp-stat-bleue.e-con:hover { transform: none; }
.dp-photo-stats:hover .dp-photo-groupe img { transform: none; }
}
/* Cartes vidéo et articles (desktop) : l'image de fond, recopiée dans ::after, zoome doucement au survol */
@media (min-width: 1025px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
:is(.dp-carte-video-media, .dp-carte-actu-media).e-con { isolation: isolate; }
:is(.dp-carte-video-media, .dp-carte-actu-media).e-con::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-image: inherit;
background-size: inherit;
background-position: inherit;
background-repeat: inherit;
transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.pb-carte:hover :is(.dp-carte-video-media, .dp-carte-actu-media).e-con::after { transform: scale(1.05); }
}
/* Étapes de l'accueil : la carte passe en bleu au survol, textes en blanc et numéro en jaune */
@media (min-width: 1025px) {
.home .dp-etape.e-con { padding-left: 40px !important; padding-right: 40px !important; }
.home .dp-etape h3.elementor-heading-title {
text-wrap: nowrap;
white-space: nowrap;
font-size: clamp(0.9375rem, 1.53vw, 1.375rem) !important;
}
}
.home .dp-etape.e-con { transition: background-color .4s ease, border-color .4s ease; }
.home .dp-etape :is(.elementor-heading-title, .dp-etape-texte, .dp-etape-texte p) { transition: color .4s ease, border-color .4s ease; }
.home .dp-etape :is(.dp-filigrane img, .dp-rond-etape) { transition: filter .4s ease, opacity .4s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.home .dp-etape.e-con:hover { background-color: var(--dp-bleu) !important; border-color: var(--dp-bleu) !important; }
.home .dp-etape:hover h3.elementor-heading-title { color: #FFFFFF !important; }
.home .dp-etape:hover .dp-etape-num .elementor-heading-title { color: var(--dp-orange) !important; }
.home .dp-etape:hover :is(.dp-etape-texte, .dp-etape-texte p) { color: rgba(255, 255, 255, .82) !important; }
.home .dp-etape:hover .dp-etape-texte { border-top-color: rgba(255, 255, 255, .2) !important; }
/* Grand chiffre au survol : version blanche plus marquée (les SVG d'origine portent leur propre opacité de 5 à 11 %) */
.home .dp-etape .dp-filigrane::after {
content: "";
position: absolute;
inset: 0;
background: center / contain no-repeat;
opacity: 0;
transform-origin: left top;
transition: opacity .4s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
.home .dp-etape .dp-filigrane:has(img[src*="filigrane-01"])::after { background-image: url("assets/img/filigrane-01-survol.svg"); }
.home .dp-etape .dp-filigrane:has(img[src*="filigrane-02"])::after { background-image: url("assets/img/filigrane-02-survol.svg"); }
.home .dp-etape .dp-filigrane:has(img[src*="filigrane-03"])::after { background-image: url("assets/img/filigrane-03-survol.svg"); }
.home .dp-etape .dp-filigrane img { transform-origin: left top; }
.home .dp-etape:hover .dp-filigrane img { opacity: 0; transform: scale(1.04); }
.home .dp-etape:hover .dp-filigrane::after { opacity: 1; transform: scale(1.04); }
.home .dp-etape:is(:hover, :focus-within) .dp-rond-etape {
filter: brightness(0) invert(1);
transform: rotate(-45deg);
}
/* ---------- Photo de groupe + chiffres clés ---------- */
.dp-photo-stats { position: relative; }
.dp-stats { position: absolute !important; right: -24px; bottom: -32px; }
.dp-stat--1 { border-top-left-radius: 12px; }
.dp-stat--2 { border-top-right-radius: 12px; }
.dp-stat .elementor-heading-title { margin-bottom: 0; }
/* Citation + bouton : même hauteur que la photo voisine (sans la marge des ni l'espace de ligne sous le bouton) */
.home .dp-citation-bleue .elementor-heading-title { margin-bottom: 0; }
.home .dp-citation-bleue + .elementor-widget-button .elementor-button { vertical-align: middle; }
.dp-stat .elementor-widget-text-editor p { line-height: 1.4; }
@media (max-width: 1024px) {
.dp-stats { position: relative !important; right: auto; bottom: auto; margin-top: -40px; margin-left: auto; margin-right: 16px; }
}
@media (max-width: 767px) {
.dp-stats { width: calc(100% - 16px) !important; margin-right: 8px; }
.dp-stat { padding: 18px !important; }
}
/* ---------- Accordéon des enjeux (accueil) ---------- */
.dp-accordeon-enjeux { display: flex; flex-direction: column; }
.dp-enjeu { border-bottom: 1px solid rgba(0, 24, 53, .12); }
.dp-enjeu-ligne {
display: flex;
align-items: center;
gap: 24px;
padding: 26px 24px;
list-style: none;
cursor: pointer;
transition: background-color .25s ease;
}
.dp-enjeu-ligne::-webkit-details-marker { display: none; }
.dp-enjeu-ligne:hover { background: rgba(255, 255, 255, .6); }
.dp-enjeu-textes { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; }
.dp-enjeu-titre { font-family: var(--dp-font); font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--dp-bleu-fonce); }
.dp-enjeu-phrase { font-family: var(--dp-font); font-size: 1.125rem; line-height: 1.5; letter-spacing: -.01em; color: var(--dp-bleu-clair); }
.dp-enjeu-chevron {
flex: 0 0 22px;
width: 22px;
height: 14px;
background: url("assets/img/chevron.svg") center / contain no-repeat;
opacity: .5;
transition: transform .3s ease, opacity .3s ease;
}
.dp-enjeu[open] .dp-enjeu-ligne { display: none; }
.dp-enjeu[open] { border-bottom-color: transparent; }
/* Encart ouvert de l'accordéon : même pastille, mêmes marges et même titre que la ligne fermée pour qu'elle
s'ouvre sans décalage ; bénéfices alignés sur le titre (pastille 44 px + écart 24 px), clic pour refermer */
.dp-enjeu-detail .dp-encart--ouvert { gap: 20px; padding: 23px 24px 28px; cursor: pointer; }
.dp-enjeu-detail .dp-encart-tete { gap: 24px; }
.dp-enjeu-detail .dp-pastille-enjeu--orange { flex-basis: 44px; width: 44px; height: 44px; }
.dp-enjeu-detail .dp-encart-titres { gap: 12px; }
.dp-enjeu-detail .dp-encart-benefices { width: calc(100% - 68px); margin-left: 68px; }
@media (max-width: 1024px) {
.dp-enjeu-detail .dp-encart-benefices { width: 100%; margin-left: 0; }
}
@keyframes dp-ouvre { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 767px) {
.dp-enjeu-ligne { gap: 16px; padding: 20px 12px; align-items: flex-start; }
.dp-enjeu-detail .dp-encart--ouvert { padding: 17px 12px 24px; }
.dp-enjeu-titre { font-size: 1.25rem; }
.dp-enjeu-phrase { font-size: 1rem; }
/* Encart ouvert : pastille, titre et sous-titre restent à la place et à la taille de la ligne fermée ; le bouton passe dessous */
.dp-enjeu-detail .dp-encart--ouvert .dp-encart-tete { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.dp-enjeu-detail .dp-encart-titres { flex: 1 1 0; min-width: 0; padding-right: 38px; }
.dp-enjeu-detail .dp-encart-bouton { flex-basis: calc(100% - 60px); margin-left: 60px; }
.dp-enjeu-detail .dp-encart--ouvert .dp-encart-titre { font-size: 1.25rem; }
.dp-enjeu-detail .dp-encart--ouvert .dp-encart-accroche { font-size: 1rem; }
}
/* Pastille d'enjeu (picto blanc sur carré bleu ou orange) */
.dp-pastille-enjeu {
display: inline-flex;
flex: 0 0 44px;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(80, 154, 207, .12);
border-radius: 8px;
background: var(--dp-bleu-clair);
color: #FFFFFF;
}
.dp-pastille-enjeu svg { width: 100%; height: 100%; }
.dp-pastille-enjeu--orange { flex-basis: 58px; width: 58px; height: 58px; background: var(--dp-orange); }
/* Le SVG porte déjà son carré bleu et sa bordure */
.dp-pastille-enjeu--complete { border: 0; background: none; }
/* ---------- Encart d'un enjeu ---------- */
.dp-encart {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
height: 100%;
padding: 40px;
border-top: 3px solid var(--dp-bleu-clair);
background: var(--dp-fond-clair);
}
.dp-encart--ouvert { padding: 32px; background: #FBFCFC; }
.dp-encart-tete { display: flex; align-items: center; gap: 32px; width: 100%; }
.dp-encart-titres { display: flex; flex: 1 1 auto; flex-direction: column; gap: 20px; }
.dp-encart-titre { margin: 0; font-family: var(--dp-font); font-size: 1.375rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--dp-bleu-fonce); }
.dp-encart--ouvert .dp-encart-titre { font-size: 1.5rem; }
.dp-encart-accroche { margin: 0; font-family: var(--dp-font); font-size: 1.125rem; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--dp-orange); }
.dp-encart-benefices {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
margin: 0;
padding: 20px 0 0;
list-style: none;
border-top: 1px solid var(--dp-bordure);
}
.dp-encart--ouvert .dp-encart-benefices { flex-direction: row; flex-wrap: wrap; gap: 16px 48px; }
.dp-encart-benefices li { display: flex; align-items: center; gap: 10px; font-family: var(--dp-font); font-size: 1rem; line-height: 1.7; letter-spacing: -.01em; color: var(--dp-bleu-fonce); }
.dp-coche { flex: 0 0 18px; width: 18px; height: 18px; background: url("assets/img/coche.svg") center / contain no-repeat; }
.dp-encart-bouton { flex: 0 0 auto; }
.dp-encarts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.dp-encarts-zone { display: flex; flex-direction: column; gap: 48px; }
.dp-encarts-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.dp-encarts-phrase { margin: 0; max-width: 691px; font-family: var(--dp-font); font-size: 1.75rem; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: var(--dp-bleu); }
.dp-accent-droit { color: var(--dp-orange); }
@media (max-width: 1024px) {
.dp-encarts { gap: 24px; }
.dp-encart, .dp-encart--ouvert { padding: 28px 24px; }
.dp-encart-tete { flex-wrap: wrap; gap: 20px; }
.dp-encarts-intro { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
.dp-encarts { grid-template-columns: 1fr; }
.dp-encarts-phrase { font-size: 1.375rem; }
.dp-encart-tete { align-items: flex-start; }
.dp-encart-benefices li { font-size: 1rem; }
}
/* Lien souligné en HTML (shortcodes) : même rendu que le widget Bouton pb-lien */
.dp-lien-souligne {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 4px 0 8px;
border-bottom: 1px solid currentColor;
font-family: var(--dp-font);
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
color: var(--dp-bleu);
transition: color .25s ease;
}
.dp-lien-souligne:hover { color: var(--dp-orange); }
.dp-lien-souligne--fleche::after {
content: "";
width: 12px;
height: 12px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h10M6.5 1.5 11 6l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h10M6.5 1.5 11 6l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .25s ease;
}
.dp-lien-souligne--fleche:hover::after { transform: translateX(3px); }
/* ---------- Atouts (escalier) ---------- */
@media (min-width: 1025px) {
.dp-atouts > .dp-atout { margin-left: auto !important; }
}
.dp-atout.e-con {
transition: background-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.dp-atout :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor p) {
transition: color .4s ease;
}
@media (hover: hover) {
.dp-atouts .dp-atout:nth-child(odd):hover {
background-color: #FFFFFF !important;
transform: translateY(-4px);
box-shadow: 0 16px 32px -16px rgba(0, 24, 53, .28);
}
.dp-atouts .dp-atout:nth-child(even):hover {
background-color: var(--dp-orange) !important;
transform: translateY(-4px);
box-shadow: 0 16px 32px -16px rgba(0, 24, 53, .28);
}
.dp-atout:hover :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor p) {
color: var(--dp-bleu) !important;
}
}
/* ---------- Avantages DAF 3.0 : filets verticaux ---------- */
@media (min-width: 768px) {
.dp-avantage + .dp-avantage { position: relative; }
.dp-avantage + .dp-avantage::before {
content: "";
position: absolute;
top: 50%;
left: -20px;
width: 1px;
height: 112px;
background: var(--dp-bordure);
transform: translateY(-50%);
}
}
@media (min-width: 768px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
.dp-avantages.e-con { transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease; }
.dp-avantages.e-con:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgba(0, 24, 53, .3); }
.dp-avantage { position: relative; }
.dp-avantage::after {
content: "";
position: absolute;
top: -34px;
left: 0;
right: 0;
height: 2px;
background: var(--dp-orange);
transform: scaleX(0);
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.dp-avantage:hover::after { transform: scaleX(1); }
.dp-avantage > .elementor-widget:first-child { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.dp-avantage:hover > .elementor-widget:first-child { transform: translateY(-4px); }
}
.dp-logos-outils { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
/* ---------- Cartes vidéo de cas client ---------- */
.dp-play {
display: block;
width: 72px;
height: 72px;
background: url("assets/img/play-72.svg") center / contain no-repeat;
opacity: .9;
transition: transform .3s ease, opacity .3s ease;
}
.dp-play--96 { width: 96px; height: 96px; background-image: url("assets/img/play-96.svg"); }
.dp-play-widget { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
.dp-play-widget:has(.dp-play-bouton) { pointer-events: auto; z-index: 4; }
button.dp-play { padding: 0; border: 0; background-color: transparent; cursor: pointer; }
.dp-play-bouton { cursor: pointer; }
:is(.dp-carte-video-media, .dp-temoignage-media, .dp-carte-cas-media):has(.dp-play-bouton[data-youtube]) { cursor: pointer; }
:is(.dp-carte-video-media, .dp-temoignage-media, .dp-carte-cas-media).is-lance .dp-play-widget { opacity: 0; visibility: hidden; }
:is(.dp-carte-video-media, .dp-temoignage-media, .dp-carte-cas-media) > iframe.dp-video-yt { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.dp-carte-video-media,
.dp-carte-cas-media { position: relative; }
.pb-carte:hover .dp-play,
.dp-play-bouton:hover,
.dp-play-bouton:focus-visible { transform: scale(1.06); opacity: 1; }
.dp-carte-fonction .elementor-heading-title { letter-spacing: .1em; }
.dp-carte-citation {
position: relative;
margin: 0 -32px !important;
padding: 24px;
border: 1px solid rgba(80, 154, 207, .2);
border-radius: 12px 12px 0 0;
background: var(--dp-bleu);
}
.dp-carte-citation::after {
content: "";
position: absolute;
top: -13px;
right: 40px;
width: 32px;
height: 23px;
background: url("assets/img/guillemet.svg") center / contain no-repeat;
}
.dp-carte-video-media:not(:has(.dp-carte-citation)) { padding-bottom: 32px !important; }
.dp-carrousel-cas .swiper-slide { transition: opacity .4s ease; }
.dp-carrousel-cas .swiper-slide:not(.swiper-slide-active) { opacity: .5; }
/* Accueil (desktop) : flèches à cheval sur le bord de la carte, centrées en hauteur, sans points ; les cartes
déjà passées sont coupées au bord gauche pour ne pas recouvrir le texte de la section. */
@media (min-width: 1025px) {
.dp-carrousel-cas.pb-carrousel-nav.elementor-widget { --pb-nav-taille: 44px; --arrow-size: 14px; padding-bottom: 0; }
.dp-carrousel-cas .swiper { clip-path: inset(-40px -100vw -40px -32px); padding-bottom: 0 !important; }
.dp-carrousel-cas .swiper-slide { transition: opacity .6s ease-in, filter .6s ease-in; }
.dp-carrousel-cas .swiper-slide:has(~ .swiper-slide-active) { opacity: 0; filter: blur(8px); transition: opacity .25s cubic-bezier(0, 0, .2, 1), filter .4s ease-out; }
.dp-carrousel-cas .dp-carte-video-media .dp-play-widget { top: 44.5%; }
.dp-carrousel-cas.pb-carrousel-nav .elementor-swiper-button { top: 50% !important; bottom: auto !important; margin-top: calc(var(--pb-nav-taille) / -2) !important; font-size: .875rem; }
.dp-carrousel-cas.pb-carrousel-nav .elementor-swiper-button-prev { left: calc(var(--pb-nav-taille) / -2) !important; }
.dp-carrousel-cas.pb-carrousel-nav .elementor-swiper-button-next { left: calc(100% - var(--pb-nav-taille) / 2) !important; }
.dp-carrousel-cas.pb-carrousel-nav .elementor-swiper-button.swiper-button-disabled { opacity: 0; }
.dp-carrousel-cas.pb-carrousel-nav .swiper-pagination { display: none !important; }
}
/* Tablette et mobile : flèches et points centrés sous les cartes, aperçu de la carte suivante réduit. */
@media (max-width: 1024px) {
.dp-carrousel-cas .swiper-slide:has(~ .swiper-slide-active) { opacity: 0; }
.dp-carrousel-cas.pb-carrousel-nav .swiper-pagination { left: 50% !important; transform: translateX(-50%) !important; }
.dp-carrousel-cas.pb-carrousel-nav .elementor-swiper-button-prev { left: calc(50% - 74px - var(--pb-nav-taille)) !important; }
.dp-carrousel-cas.pb-carrousel-nav .elementor-swiper-button-next { left: calc(50% + 74px) !important; }
.dp-carrousel-cas .dp-play { width: 56px; height: 56px; }
}
@media (max-width: 767px) {
.dp-carrousel-cas.pb-carrousel-deborde .swiper { margin-right: 28px; }
.dp-carrousel-cas .dp-play { width: 44px; height: 44px; }
}
@media (max-width: 767px) {
.dp-carte-citation { margin: 0 -20px !important; padding: 20px; }
}
/* Autres témoignages (fiche cas client) : flèches jaunes posées sur la carte, centrées en hauteur, bleues au survol */
.dp-carrousel-autres.pb-carrousel-nav.elementor-widget .elementor-swiper-button {
background: var(--dp-orange);
color: var(--dp-bleu);
transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.dp-carrousel-autres.pb-carrousel-nav.elementor-widget .elementor-swiper-button svg { fill: currentColor; }
.dp-carrousel-autres.pb-carrousel-nav.elementor-widget .elementor-swiper-button:is(:hover, :focus-visible) {
background: var(--dp-bleu);
color: #FFFFFF;
}
@media (min-width: 1025px) {
.dp-carrousel-autres.pb-carrousel-nav.elementor-widget { --pb-nav-taille: 44px; --arrow-size: 14px; padding-bottom: 0; }
.dp-carrousel-autres .swiper { overflow: visible; }
.dp-carrousel-autres.pb-carrousel-nav .elementor-swiper-button {
top: 50% !important;
bottom: auto !important;
margin-top: calc(var(--pb-nav-taille) / -2) !important;
font-size: .875rem;
}
.dp-carrousel-autres.pb-carrousel-nav .elementor-swiper-button-prev { left: 12px !important; }
.dp-carrousel-autres.pb-carrousel-nav .elementor-swiper-button-next { left: calc(100% - var(--pb-nav-taille) - 12px) !important; }
.dp-carrousel-autres.pb-carrousel-nav .elementor-swiper-button.swiper-button-disabled { opacity: 0; }
.dp-carrousel-autres.pb-carrousel-nav .swiper-pagination { display: none !important; }
}
@media (max-width: 1024px) {
.dp-carrousel-autres.pb-carrousel-nav .elementor-swiper-button-prev { left: calc(50% - 6px - var(--pb-nav-taille)) !important; }
.dp-carrousel-autres.pb-carrousel-nav .elementor-swiper-button-next { left: calc(50% + 6px) !important; }
}
@media (max-width: 767px) {
.dp-carrousel-autres.pb-carrousel-nav .swiper-pagination { left: 50% !important; transform: translateX(-50%) !important; }
.dp-carrousel-autres.pb-carrousel-nav .elementor-swiper-button-prev { left: calc(50% - var(--pb-nav-ecart, 66px) - var(--pb-nav-taille)) !important; }
.dp-carrousel-autres.pb-carrousel-nav .elementor-swiper-button-next { left: calc(50% + var(--pb-nav-ecart, 66px)) !important; }
}
/* Carte de cas client (archive, autres témoignages) */
a.dp-carte-cas { color: inherit; }
.dp-carte-cas .elementor-element-40220e3 p { margin-bottom: 0; }
.dp-badge-enjeu {
display: inline-flex;
padding: 10px 14px;
border-radius: 100px;
background: var(--dp-orange);
font-family: var(--dp-font);
font-size: .875rem;
font-weight: 500;
line-height: 1;
color: var(--dp-bleu);
}
.dp-chip-secteur .elementor-heading-title {
display: inline-flex;
padding: 9px 12px;
border: 1px solid rgba(80, 154, 207, .8);
border-radius: 100px;
background: rgba(80, 154, 207, .1);
line-height: 1;
white-space: nowrap;
text-shadow: 0 0 8px rgba(0, 0, 0, .3);
}
@media (min-width: 768px) and (max-width: 1024px) {
.dp-chip-secteur .elementor-heading-title { padding-inline: 10px; font-size: .8125rem; white-space: nowrap; }
}
.dp-rond-fleche {
display: block;
width: 38px;
height: 38px;
background: url("assets/img/rond-fleche-orange.svg") center / contain no-repeat;
transition: transform .3s ease;
}
.pb-carte:hover .dp-rond-fleche { transform: rotate(45deg); }
/* ---------- Méthode en 3 temps ---------- */
.dp-etape { position: relative; }
.dp-etape > * { position: relative; z-index: 1; }
.dp-filigrane { z-index: 0 !important; }
.dp-rond-etape-widget { position: absolute !important; top: 27px; right: 23px; }
.home .dp-rond-etape-widget {
inset: 0;
top: 0 !important;
right: 0 !important;
width: auto !important;
height: auto !important;
z-index: 2;
pointer-events: none;
}
.dp-rond-etape { display: block; width: 52px; height: 52px; background: url("assets/img/rond-fleche-etape.svg") center / contain no-repeat; }
.home .dp-etape-lien {
display: block;
position: absolute;
inset: 0;
z-index: 2;
}
.home .dp-rond-etape-widget .dp-rond-etape,
.home .dp-etape-lien .dp-rond-etape { position: absolute; top: 27px; right: 23px; }
.home .dp-etape-lien:focus-visible { outline: none; }
.home .dp-etape-lien:focus-visible .dp-rond-etape {
outline: 2px solid var(--dp-orange);
outline-offset: 3px;
border-radius: 50%;
}
.dp-etape-num { padding-bottom: 12px; }
.dp-etape-texte { padding-top: 28px; border-top: 1px solid var(--dp-bordure); }
/* ---------- Cartes d'articles ---------- */
.dp-etiquette .elementor-heading-title {
display: inline-flex;
max-width: 100%;
padding: 6px 10px;
border-radius: 6px;
background: rgba(80, 154, 207, .8);
font-size: .6875rem !important;
font-weight: 500;
line-height: 1;
letter-spacing: .06em !important;
}
.dp-etiquette--petite .elementor-heading-title { padding: 5px 8px; font-size: .625rem !important; }
.dp-type {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--dp-font);
font-size: .875rem;
font-weight: 500;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
}
.dp-type-icone { width: 11px; height: 14px; background: currentColor; -webkit-mask: url("assets/img/marque-page.svg") center / contain no-repeat; mask: url("assets/img/marque-page.svg") center / contain no-repeat; }
.dp-type--actu { color: var(--dp-bleu); }
.dp-type--ressource { color: var(--dp-orange); }
.dp-extrait p {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.dp-extrait--2 p { -webkit-line-clamp: 2; }
.dp-carte-actu .dp-lien-carte { margin-top: auto; }
.dp-grille-suite .elementor-loop-container { height: 100%; }
/* Remplit l'espace libre d'une rangée sans écraser ses voisins (remplace « Grandir » d'Elementor, lib.php). */
.dp-remplit { flex: 1 1 0% !important; min-width: 0; }
.e-con > .e-con { min-width: 0; }
/* Ligne du bas du footer */
.dp-legal { margin: 0; font-family: var(--dp-font); font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.dp-legal strong { font-weight: 500; color: #FFFFFF; }
.pb-footer-bas .elementor-heading-title { color: #FFFFFF; }
.pb-footer-bas .dp-copyright { color: rgba(255, 255, 255, .6); font-weight: 400; }
.pb-footer-bas a { font-weight: 500; }
.dp-photo-groupe img { object-position: 50% 87%; }
@media (min-width: 1025px) {
.pb-footer-menu .elementor-nav-menu .elementor-item { white-space: nowrap; }
}
@media (max-width: 1024px) {
.dp-footer-rangee > .dp-footer-col { width: calc(50% - 20px) !important; }
}
@media (max-width: 767px) {
.dp-footer-rangee > .dp-footer-col { width: 100% !important; }
}
/* ---------- Hero des pages intérieures ---------- */
.dp-hero-interieur::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: repeating-radial-gradient(circle at 150% 100%, transparent 0 4px, rgba(255, 255, 255, .05) 4px 5px);
pointer-events: none;
}
.dp-hero-titre .elementor-heading-title { text-shadow: 0 0 10px rgba(0, 0, 0, .2); }
@media (min-width: 1025px) {
.dp-hero-enjeu .dp-hero-titre .elementor-heading-title { white-space: nowrap; line-height: 1.25; }
.dp-hero-enjeu .dp-hero-gauche { padding-bottom: 72px !important; }
.dp-hero-enjeu .dp-hero-texte { margin-left: 69px; }
.dp-hero-enjeu .dp-hero-bouton { margin-left: 119px; }
}
.dp-hero-texte { text-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.dp-hero-bouton { position: relative; }
.dp-pointille-hero { position: absolute !important; left: -98px; top: -82px; width: 79px; overflow: visible; }
.dp-hero-info {
border-bottom: 3px solid var(--dp-bleu-clair);
border-radius: 12px 12px 0 0;
background: rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.dp-hero-info .elementor-heading-title { text-shadow: 0 0 10px rgba(0, 0, 0, .2); }
@media (max-width: 1024px) {
.dp-hero-info { border-radius: 12px; }
}
/* ---------- Petits utilitaires de texte ---------- */
.dp-bleu { color: var(--dp-bleu) !important; }
.dp-bleu-clair { color: var(--dp-bleu-clair); }
/* Trait sous le mot, qui déborde un peu à gauche et à droite (padding compensé par la marge : rien ne bouge)
et descend sous la ligne de base ; il se fond vers le haut. */
.dp-surligne {
--dp-surligne-rgb: 249, 181, 33;
--dp-surligne-a: .72;
margin: 0 -.14em;
padding: 0 .14em .06em;
background-image: linear-gradient(180deg, rgba(var(--dp-surligne-rgb), 0) calc(100% - .48em), rgba(var(--dp-surligne-rgb), var(--dp-surligne-a)) calc(100% - .22em), rgba(var(--dp-surligne-rgb), var(--dp-surligne-a)) 100%);
background-size: 0% 100%;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-image .4s ease;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.dp-surligne.is-on { background-size: 100% 100%; }
.pb-sombre .dp-surligne { --dp-surligne-a: .8; }
@media (prefers-reduced-motion: reduce) {
.dp-surligne { background-size: 100% 100%; transition: none; }
}
/* Pastilles (tags) */
.dp-pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dp-pastilles li {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: 1px solid var(--dp-bordure);
border-radius: 100px;
background: var(--dp-tag-fond);
font-family: var(--dp-font);
font-size: 1rem;
line-height: 1.3;
color: var(--dp-bleu-fonce);
}
.dp-pastilles li::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--dp-bleu-clair); transition: background-color .3s ease; }
.dp-pastilles li { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
@media (hover: hover) {
.dp-pastilles li:hover {
background: var(--dp-bleu);
border-color: var(--dp-bleu);
color: #FFFFFF;
}
.dp-pastilles li:hover::before { background: var(--dp-orange); }
}
.dp-pastilles--sans-puce li { padding: 10px 14px; }
.dp-pastilles--sans-puce li::before { display: none; }
/* Citation à filet orange */
.dp-citation-filet-widget,
.dp-citation-filet {
margin: 0;
padding: 8px 0 8px 32px;
border-left: 4px solid var(--dp-orange);
border-radius: 0 16px 16px 0;
}
.dp-citation-filet-widget p + p { margin-top: 16px; }
@media (max-width: 1024px) {
.page-id-229 .elementor-element-8288d76 p { margin-bottom: 0; line-height: 1.45; }
.page-id-229 .elementor-element-8288d76 p + p { margin-top: 6px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.page-id-233 .elementor-element-1fd6a72 p { margin-bottom: 0; }
.page-id-233 .elementor-element-1fd6a72 p + p { margin-top: 8px; }
}
.dp-citation-filet p { margin: 0; font-family: var(--dp-font); font-size: 1.5rem; font-weight: 500; font-style: italic; line-height: 1.5; letter-spacing: -.02em; color: var(--dp-bleu); }
.dp-citation-encart { position: relative; margin: 32px 0 0; padding: 28px 64px 24px 28px; border-left: 4px solid var(--dp-orange); border-radius: 0 16px 16px 0; background: #FFFFFF; box-shadow: 0 10px 30px rgba(0, 24, 53, .06); }
.dp-citation-encart::after { content: ""; position: absolute; top: 18px; right: 20px; width: 34px; height: 24px; background: url("assets/img/guillemet.svg") center / contain no-repeat; }
.dp-citation-encart p { margin: 0; font-family: var(--dp-font); font-size: 1.375rem; font-weight: 500; font-style: italic; line-height: 1.45; letter-spacing: -.02em; color: var(--dp-bleu); }
.dp-citation-encart .dp-citation-encart-auteur { display: flex; align-items: center; margin-top: 22px; font-size: .8125rem; font-weight: 500; font-style: normal; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-bleu-clair); }
.dp-citation-encart .dp-citation-encart-auteur span::before { content: "- "; }
@media (max-width: 767px) {
.dp-citation-encart { margin-top: 24px; padding: 22px 48px 20px 20px; }
.dp-citation-encart::after { width: 26px; height: 18px; }
.dp-citation-encart p { font-size: 1.125rem; }
}
.dp-citation-filet--clair p { color: var(--dp-blanc); }
.dp-citation-filet-titre .elementor-heading-title { padding: 8px 0 8px 32px; border-left: 4px solid var(--dp-orange); }
@media (max-width: 767px) {
.dp-citation-filet-widget, .dp-citation-filet, .dp-citation-filet-titre .elementor-heading-title { padding-left: 20px; }
.dp-citation-filet p { font-size: 1.25rem; }
}
/* Bandeaux bleus (intro, outils) */
.dp-bandeau-bleu { position: relative; }
.dp-bandeau-bleu.e-con { align-items: center; }
.dp-bandeau-bleu .elementor-heading-title { text-box: none; margin: 0; }
.dp-bandeau-bleu .elementor-widget-heading,
:is(.dp-bandeau-bleu, .dp-bandeau-bleu > .e-con-inner) > .elementor-widget-button { align-self: center; }
.dp-bandeau-bleu .elementor-widget-heading {
display: flex;
align-items: center;
line-height: 0;
}
.dp-bandeau-v2-texte :is(p, .elementor-widget-container) { font-size: 1.125rem; line-height: 1.7; letter-spacing: -.01em; color: rgba(255, 255, 255, .9); }
.dp-bandeau-v2 .dp-remplit > .elementor-widget { align-self: flex-start; }
@media (max-width: 767px) {
.dp-bandeau-v2-texte :is(p, .elementor-widget-container) { font-size: 1rem; line-height: 1.6; }
}
.dp-bandeau-bleu.dp-bandeau-photo {
background-size: cover !important;
background-position: center 40% !important;
background-repeat: no-repeat !important;
}
/* ---------- Vous vous reconnaissez ? ---------- */
.dp-grille-reco { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .dp-grille-reco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dp-grille-reco { grid-template-columns: 1fr; gap: 16px; } }
.dp-bouton-bleu .elementor-button { --dp-btn-bord: var(--dp-bleu); background-color: var(--dp-bleu) !important; color: #EEF6FF !important; }
.dp-bouton-bleu .elementor-button:is(:hover, :focus-visible) { color: var(--dp-bleu) !important; box-shadow: inset 0 0 0 1px var(--dp-bleu) !important; }
.dp-conclusion em { font-weight: 500; }
@media (max-width: 1024px) {
.e-con:has(> .elementor-widget-button) > .dp-conclusion :is(p, .elementor-widget-container) { text-align: center !important; }
}
/* ---------- Notions numérotées (frise verticale) ---------- */
.dp-frise-notions { position: relative; padding-left: 60px !important; }
.dp-frise-notions::before {
content: "";
position: absolute;
top: 18px;
bottom: 18px;
left: 7px;
border-left: 2px dashed var(--dp-bleu);
opacity: .9;
}
.dp-notion { position: relative; }
.dp-notion::before {
content: "";
position: absolute;
top: 4px;
left: -65px;
width: 12px;
height: 12px;
border: 6px solid var(--dp-fond-clair);
border-radius: 50%;
background: var(--dp-orange);
box-sizing: content-box;
}
.dp-notion--final .dp-surligne { --dp-surligne-a: .85; }
/* Étapes « Notion » : le titre se rapproche de « NOTION 0X » (12 px), l'écart titre / texte reste celui du conteneur (24 px). */
.dp-notion > .elementor-widget-heading:first-child + .elementor-widget-heading { margin-top: -12px; }
@media (max-width: 767px) {
.dp-notion:not(.dp-notion--final) > .elementor-widget-heading:first-child + .elementor-widget-heading { margin-top: -8px; }
}
@media (max-width: 767px) {
.dp-frise-notions { padding-left: 40px !important; }
.dp-frise-notions::before { left: 5px; }
.dp-notion::before { left: -47px; width: 12px; height: 12px; border-width: 6px; top: 4px; }
}
.dp-encart-citation { position: relative; border-left: 4px solid var(--dp-orange); border-radius: 0 16px 16px 0; }
.dp-encart-citation::after {
content: "";
position: absolute;
top: -12px;
right: 24px;
width: 34px;
height: 24px;
background: url("assets/img/guillemet.svg") center / contain no-repeat;
}
.dp-signature-expert {
display: flex;
align-items: center;
gap: 24px;
font-family: var(--dp-font);
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dp-bleu-clair);
transition: color .2s ease;
}
/* Classe doublée : la couleur des liens du Kit (.elementor-kit-13 a, bleu foncé puis bleu clair au survol) l'emportait. */
.dp-signature-expert.dp-signature-expert { color: var(--dp-bleu-clair); }
.dp-signature-expert.dp-signature-expert:is(:hover, :focus-visible) { color: var(--dp-bleu); }
.dp-signature-photo { flex: 0 0 72px; width: 72px !important; height: 72px !important; border-radius: 16px !important; object-fit: cover; }
.dp-signature-expert span::before { content: "- "; }
.dp-signature-client > span { display: flex; flex-direction: column; gap: 2px; }
.dp-signature-client span::before { content: none; }
.dp-signature-client .dp-signature-nom::before { content: "- "; }
.dp-signature-detail { padding-left: 14px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--dp-bleu); }
@media (max-width: 767px) {
.dp-signature-retour { display: none; }
}
/* ---------- Ce que cela change pour vous : citations qui défilent ---------- */
.dp-changement-gauche { position: relative; }
.dp-pointille-changement { position: absolute !important; left: 288px; bottom: -40px; width: 380px; transform: scaleX(-1); }
.dp-citations-defilantes {
display: flex;
flex-direction: column;
height: 431px;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.dp-citations-defilantes ul {
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: 16px;
margin: 0;
padding: 0 0 16px;
list-style: none;
animation: dp-monte 17s linear infinite;
}
.dp-citations-defilantes:hover ul { animation-play-state: paused; }
.dp-citations-defilantes li {
display: flex;
align-items: flex-start;
gap: 28px;
padding: 32px;
border: 1px solid rgba(80, 154, 207, .2);
border-radius: 16px;
background: rgba(80, 154, 207, .14);
opacity: 1;
-webkit-backdrop-filter: blur(8.5px);
backdrop-filter: blur(8.5px);
font-family: var(--dp-font);
font-size: 1.5rem;
font-weight: 500;
font-style: italic;
line-height: 1.5;
letter-spacing: -.02em;
color: var(--dp-blanc);
}
.dp-citations-defilantes li::before { content: ""; flex: 0 0 26px; height: 18px; margin-top: .45em; background: url("assets/img/guillemet-26.svg") center / contain no-repeat; }
@keyframes dp-monte { to { transform: translateY(-100%); } }
/* Sans animation : la liste reste à la hauteur de la maquette et défile à la molette ou au doigt. */
@media (prefers-reduced-motion: reduce) {
.dp-citations-defilantes ul { animation: none; }
.dp-citations-defilantes { overflow-y: auto; overscroll-behavior: contain; }
.dp-citations-defilantes ul + ul { display: none; }
.dp-citations-defilantes li { opacity: 1; }
}
@media (max-width: 767px) {
.dp-citations-defilantes { height: 380px; }
.dp-citations-defilantes li { padding: 24px; gap: 18px; font-size: 1.1875rem; }
}
/* ---------- Listes cochées (outils) ---------- */
.dp-panneau-outils {
border-bottom: 2px solid var(--dp-bleu-clair);
border-radius: 16px 16px 0 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF);
box-shadow: 0 10px 40px rgba(0, 24, 53, .02);
}
.dp-panneau-outils > .dp-liste-coches-widget + .dp-liste-coches-widget { position: relative; }
@media (min-width: 768px) {
.dp-panneau-outils > .dp-liste-coches-widget + .dp-liste-coches-widget::before {
content: "";
position: absolute;
top: 50%;
left: -40px;
width: 1px;
height: 132px;
background: var(--dp-bordure);
transform: translateY(-50%);
}
}
.dp-liste-coches { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* Coche centrée verticalement sur tout le texte de la ligne (phrase seule ou titre + sous-titre), quel que soit le nombre de lignes */
.dp-liste-coches li {
--dp-coche-taille: 32px;
--dp-coche-ecart: 24px;
position: relative;
display: grid;
grid-template-columns: var(--dp-coche-taille) minmax(0, 1fr);
column-gap: var(--dp-coche-ecart);
row-gap: 12px;
align-items: center;
padding: 24px 0;
font-family: var(--dp-font);
}
.dp-liste-coches li:first-child { padding-top: 0; }
.dp-liste-coches li:last-child { padding-bottom: 0; }
.dp-liste-coches li + li { border-top: 1px solid var(--dp-bordure); }
.dp-liste-coches li::before { content: ""; grid-column: 1; grid-row: 1 / -1; width: var(--dp-coche-taille); height: var(--dp-coche-taille); background: url("assets/img/coche-bleue.svg") center / contain no-repeat; }
.dp-liste-coches li > * { grid-column: 2; }
/* Rangées implicites : « 1 / -1 » ne couvre que la première, la coche se calait sur le titre seul */
.dp-liste-coches li:has(> * + *)::before { grid-row: 1 / span 2; }
.dp-liste-coches li:has(> * + * + *)::before { grid-row: 1 / span 3; }
.dp-liste-coches li.dp-coche-orange::before { background-image: url("assets/img/coche-orange.svg"); }
.dp-liste-coches strong { font-size: 1.375rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--dp-bleu-fonce); }
.dp-liste-coches span { font-size: 1.125rem; line-height: 1.5; letter-spacing: -.01em; color: var(--dp-texte); }
/* La hauteur mini de 2 lignes aligne les rangées des deux colonnes ; le texte d'une ligne est centré dedans, face à sa coche. */
.dp-liste-coches .dp-phrase { display: flex; align-items: center; font-size: 1.1875rem; line-height: 1.35; min-height: 2lh; color: var(--dp-bleu-fonce); }
.dp-panneau-outils .dp-liste-coches li { row-gap: 8px; }
@media (min-width: 768px) and (max-width: 1024px) {
.page-id-227 .dp-panneau-outils .dp-liste-coches li { --dp-coche-taille: 28px; --dp-coche-ecart: 16px; row-gap: 6px; }
.page-id-227 .dp-panneau-outils .dp-liste-coches strong { font-size: 1.1875rem; line-height: 1.2; }
.page-id-227 .dp-panneau-outils .dp-liste-coches span { font-size: 1rem; line-height: 1.35; }
}
@media (max-width: 767px) {
.dp-liste-coches li { --dp-coche-taille: 28px; --dp-coche-ecart: 16px; padding: 20px 0; }
/* Les deux colonnes empilées se lisent comme une seule liste : même filet et même rythme à la jonction */
.dp-panneau-outils > .dp-liste-coches-widget + .dp-liste-coches-widget { margin-top: -4px; padding-top: 20px; border-top: 1px solid var(--dp-bordure); }
.dp-liste-coches strong, .dp-liste-coches .dp-phrase { font-size: 1.1875rem; }
.dp-liste-coches span { font-size: 1rem; }
}
.dp-filet { display: block; height: 2px; background: var(--dp-bordure); }
/* ---------- Pourquoi Directeur Particulier : cercles de portraits ---------- */
.dp-cercles { position: relative; width: 100%; max-width: 401px; aspect-ratio: 401 / 416; margin: 0 auto; }
.dp-cercle { position: absolute; border-radius: 50%; background: center / contain no-repeat; }
.dp-cercle--1 { left: 2.24%; top: 0; width: 95.76%; aspect-ratio: 1; background-image: url("assets/img/cercle-1.svg"); }
.dp-cercle--2 { left: 10.92%; top: 8.25%; width: 78.48%; aspect-ratio: 1; background-image: url("assets/img/cercle-2.svg"); }
.dp-cercle--3 { left: 20.12%; top: 17.24%; width: 60.02%; aspect-ratio: 1; background-image: url("assets/img/cercle-3.svg"); }
.dp-portrait { position: absolute; aspect-ratio: 1; border: 3px solid #FFFFFF; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 24, 53, .14); transition: transform .3s ease; }
.dp-portrait:hover { transform: scale(1.06); }
.dp-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ---------- Support as a Service ---------- */
.dp-section-saas { position: relative; z-index: 1; }
/* ---------- Étapes (5 cartes) ---------- */
.dp-etape--5 .dp-etape-num { padding-bottom: 4px; }
.dp-connecteur-etapes--5 img { width: 83%; }
.dp-connecteur-etapes--5 .dp-trace { width: 83%; }
@media (min-width: 1025px) {
.dp-rangee-etapes > .e-con { flex: 1 1 0 !important; }
}
/* ---------- Ils en parlent mieux que nous ---------- */
.dp-temoignage-enjeu { position: relative; }
.dp-temoignage-media { position: relative; }
/* Image mise en avant en fond dynamique : Elementor ne génère ni la taille ni la position du fond pour l'élément de boucle */
:is(.dp-temoignage-media, .dp-carte-video-media, .dp-carte-cas-media).e-con { background-size: cover !important; background-repeat: no-repeat !important; }
.dp-temoignage-media.e-con { background-position: 50% 11% !important; }
.dp-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; width: 100%; margin: 0; }
.dp-fiche-ligne { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); }
.dp-fiche dt { font-family: var(--dp-font); font-size: .875rem; font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.dp-fiche dd { margin: 0; font-family: var(--dp-font); font-size: 1rem; font-weight: 500; line-height: 1.5; color: #FFFFFF; }
.dp-fiche-widget { width: 100%; }
@media (max-width: 767px) { .dp-fiche { gap: 20px 24px; } }
/* ---------- FAQ ---------- */
.dp-faq { display: flex; flex-direction: column; }
.dp-faq-item { border-bottom: 1px solid rgba(0, 55, 122, .15); }
.dp-faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 27px 0;
list-style: none;
cursor: pointer;
font-family: var(--dp-font);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--dp-bleu-fonce);
transition: color .2s ease;
}
.dp-faq-question::-webkit-details-marker { display: none; }
.dp-faq-phrase { display: inline-block; }
@media (min-width: 1025px) {
.dp-faq-question { gap: 16px; }
/* Colonne des questions élargie (808 au lieu de 784) : « Combien de temps faut-il pour mettre en place un pilotage efficace ? » tient sur une ligne */
.dp-section-faq .e-con:has(> .dp-faq-widget) { column-gap: 56px !important; }
}
/* Page outils : quand la colonne le permet, les questions tiennent sur une ligne. */
.page-id-229 .dp-faq { container-type: inline-size; }
.page-id-229 .dp-faq-phrase { text-wrap: balance; }
@container (min-width: 790px) {
.dp-faq-question { font-size: 1.3125rem; }
}
.dp-faq-question:hover { color: var(--dp-bleu); }
/* Le « - » est posé par-dessus le « + » et apparaît en fondu pendant un demi-tour. is-fermeture (site.js) : [open] reste posé tant que la réponse se replie. */
.dp-faq-signe { position: relative; flex: 0 0 36px; width: 36px; height: 36px; background: url("assets/img/faq-plus.svg") center / contain no-repeat; transition: transform .45s cubic-bezier(.25, .8, .25, 1); }
.dp-faq-signe::after { content: ""; position: absolute; inset: 0; background: url("assets/img/faq-moins.svg") center / contain no-repeat; opacity: 0; transition: opacity .3s ease; }
.dp-faq-item[open]:not(.is-fermeture) .dp-faq-signe { transform: rotate(180deg); }
.dp-faq-item[open]:not(.is-fermeture) .dp-faq-signe::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.dp-faq-signe, .dp-faq-signe::after { transition: none; }
}
.dp-faq-reponse { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 760px; padding: 0 0 32px; font-family: var(--dp-font); font-size: 1.125rem; line-height: 1.55; color: var(--dp-texte); }
.dp-faq-reponse p { margin: 0; }
@media (max-width: 767px) {
.dp-faq-question { font-size: 1.1875rem; padding: 22px 0; }
.dp-faq-reponse { font-size: 1rem; }
}
/* Conteneur à la largeur de son contenu (lib.php : 'width' => 'auto') */
.e-con.dp-auto { --width: auto; width: auto !important; flex: 0 0 auto; max-width: 100%; }
@media (max-width: 1024px) { .e-con.dp-auto_tablet { --width: auto; width: auto !important; flex: 0 0 auto; } }
@media (max-width: 767px) { .e-con.dp-auto_mobile { --width: auto; width: auto !important; flex: 0 0 auto; } }
@media (max-width: 1024px) {
.dp-footer-rangee > .dp-footer-col.dp-auto { width: calc(50% - 20px) !important; flex: 0 0 auto; }
}
@media (max-width: 767px) {
.dp-footer-rangee > .dp-footer-col.dp-auto { width: 100% !important; }
}
/* Photo d'intro avec carte citation en surimpression (croissance) */
.dp-photo-carte { position: relative; }
.dp-carte-surimpression { position: absolute !important; left: -24px; bottom: -24px; z-index: 2; }
@media (max-width: 1024px) {
.dp-carte-surimpression { position: relative !important; left: auto; right: auto; bottom: auto; margin: -64px 16px 0 auto; }
}
/* Croissance, tablette : la citation reste dans sa carte, centrée et un peu plus étroite */
@media (min-width: 768px) and (max-width: 1024px) {
.page-id-228 .dp-photo-carte > .dp-carte-surimpression {
--width: 440px;
width: min(440px, calc(100% - 48px)) !important;
max-width: calc(100% - 48px) !important;
align-self: center;
margin: -72px auto 0 !important;
--padding-top: 32px;
--padding-bottom: 28px;
--padding-left: 36px;
--padding-right: 36px;
}
.page-id-228 .dp-citation-bleue .elementor-heading-title {
text-align: center;
text-wrap: balance;
}
.page-id-228 .dp-citation-bleue::after { right: 28px; }
}
@media (max-width: 767px) { .dp-carte-surimpression { margin: -40px 8px 0; max-width: calc(100% - 16px) !important; } }
/* Citations en escalier (croissance) */
.dp-citations-escalier { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.dp-citations-escalier li {
display: flex;
align-items: flex-start;
gap: 26px;
padding: 32px;
border: 1px solid rgba(80, 154, 207, .2);
border-radius: 16px;
background: rgba(80, 154, 207, .14);
font-family: var(--dp-font);
font-size: 1.375rem;
font-weight: 500;
font-style: italic;
line-height: 1.4;
letter-spacing: -.02em;
color: var(--dp-blanc);
}
.dp-citations-escalier li::before { content: ""; flex: 0 0 26px; height: 18px; margin-top: .4em; background: url("assets/img/guillemet-26.svg") center / contain no-repeat; }
@media (min-width: 1025px) {
.dp-citations-escalier li:nth-child(1) { margin-left: 80px; }
.dp-citations-escalier li:nth-child(2) { margin-left: 60px; margin-right: 20px; }
.dp-citations-escalier li:nth-child(3) { margin-left: 40px; margin-right: 40px; }
.dp-citations-escalier li:nth-child(4) { margin-left: 20px; margin-right: 60px; }
.dp-citations-escalier li:nth-child(5) { margin-right: 80px; }
}
@media (max-width: 767px) { .dp-citations-escalier li { padding: 24px; gap: 18px; font-size: 1.1875rem; } }
/* ---------- Notre approche ---------- */
.dp-info-sur { display: inline-block; margin-right: 8px; font-size: .875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; vertical-align: middle; }
.dp-citation-bleue--filet { border-left: 4px solid var(--dp-orange); border-radius: 0 16px 16px 0 !important; justify-content: center; }
.dp-citation-bleue--filet::after { top: -12px; right: 24px; width: 34px; height: 24px; }
.dp-citation-bleue--filet .elementor-heading-title { margin-block: 0 !important; }
.dp-photo-pleine, .dp-photo-pleine img { height: 100% !important; }
.dp-photo-pleine img { transform: scaleX(1); }
.dp-carte-citation-grande { position: relative; }
.dp-carte-citation-grande.e-con {
--padding-top: 32px;
--padding-right: 32px;
--padding-bottom: 32px;
--padding-left: 32px;
gap: 16px !important;
}
.dp-carte-citation-grande > .e-con { gap: 4px !important; }
.dp-carte-citation-grande .dp-signature .elementor-heading-title { margin: 0; line-height: 1.35; }
.dp-carte-citation-grande .dp-signature-sous { margin: 0; }
.dp-carte-citation-grande .dp-signature-sous p { margin: 0; line-height: 1.4; }
.dp-carte-citation-grande::after {
content: "";
position: absolute;
right: 33px;
bottom: -15px;
width: 68px;
height: 48px;
background: url("assets/img/guillemet.svg") center / contain no-repeat;
}
.dp-signature-sous { padding-left: 14px; }
.dp-grille-atouts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-grille-atouts > .dp-atout-methode { transition: background-color .3s ease; }
.dp-grille-atouts > .dp-atout-methode .elementor-widget-image img { transition: transform .3s ease; }
.dp-grille-atouts > .dp-atout-methode .elementor-heading-title { transition: color .3s ease; }
@media (hover: hover) {
.dp-grille-atouts > .dp-atout-methode:hover { background-color: rgba(80, 154, 207, .07); }
.dp-grille-atouts > .dp-atout-methode:hover .elementor-widget-image img { transform: translateY(-4px); }
.dp-grille-atouts > .dp-atout-methode:hover .elementor-heading-title { color: var(--dp-bleu) !important; }
}
@media (min-width: 1025px) {
.dp-atout-methode.e-con { --padding-left: 16px; --padding-right: 16px; }
.dp-atout-methode .elementor-widget-text-editor {
width: auto !important;
max-width: 100%;
}
.dp-atout-methode .elementor-widget-text-editor p {
font-size: .875rem !important;
line-height: 1.45 !important;
letter-spacing: -.01em;
}
}
.dp-grille-atouts > .dp-atout-methode { border-color: var(--dp-bordure); border-style: solid; border-width: 0; }
.dp-grille-atouts > .dp-atout-methode:nth-child(-n+3) { border-bottom-width: 1px; }
.dp-grille-atouts > .dp-atout-methode:not(:nth-child(3n+1)) { border-left-width: 1px; }
@media (max-width: 767px) {
.dp-grille-atouts { grid-template-columns: 1fr; }
.dp-grille-atouts > .dp-atout-methode { border-width: 0 0 1px 0 !important; }
.dp-grille-atouts > .dp-atout-methode:last-child { border-bottom-width: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.dp-grille-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-grille-atouts > .dp-atout-methode { border-width: 0 !important; border-bottom-width: 1px !important; }
.dp-grille-atouts > .dp-atout-methode:nth-child(even) { border-left-width: 1px !important; }
.dp-grille-atouts > .dp-atout-methode:nth-last-child(-n+2) { border-bottom-width: 0 !important; }
}
.dp-liste-croix { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dp-liste-croix li { display: flex; align-items: center; gap: 12px; padding: 20px 0; font-family: var(--dp-font); font-size: 1.125rem; font-weight: 500; line-height: 1.2; color: var(--dp-bleu-fonce); }
.dp-liste-croix li:first-child { padding-top: 0; }
.dp-liste-croix li + li { border-top: 1px solid var(--dp-bordure); }
.dp-liste-croix li::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: url("assets/img/croix.svg") center / contain no-repeat; }
.dp-carte-faisons { filter: drop-shadow(0 0 25px rgba(29, 55, 126, .06)); }
.dp-liste-coches--faisons li { --dp-coche-taille: 24px; --dp-coche-ecart: 18px; }
.dp-liste-coches--faisons li::before { background-image: url("assets/img/coche-faisons.svg") !important; }
.dp-liste-coches--faisons strong { color: var(--dp-bleu); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.dp-liste-coches--faisons li::before { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.dp-liste-coches--faisons li:hover::before { transform: scale(1.2); }
}
/* Frise « Notre histoire » (widget Logia Timeline) */
.dp-frise .lt-timeline {
--lt-dot-size: 12px !important;
--lt-arrow-size: 44px !important;
--lt-connector-h: 20px;
}
.dp-frise .lt-date { font-family: var(--dp-font); font-size: 1.25rem !important; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; padding: 8px 14px !important; border: 1px solid rgba(249, 181, 33, .12); border-radius: 100px !important; }
.dp-frise .lt-title { font-family: var(--dp-font); font-size: 1.375rem !important; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }
.dp-frise .lt-description { font-family: var(--dp-font); font-size: 1rem !important; line-height: 1.7; }
.dp-frise .lt-line-zone { margin: 8px 0; }
.dp-frise .lt-has-dot .lt-line-zone::after {
box-shadow: 0 0 0 4px var(--dp-blanc);
transform: translate(calc(-50% + (var(--lt-connector-weight) / 2)), -50%) scale(var(--dot-s, 0));
opacity: var(--dot-o, 0);
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.dp-frise .lt-item.is-atteint { --dot-s: 1; --dot-o: 1; }
/* Seule la ligne est animée (dessin au scroll) : pas d'apparition des étapes qui décalerait le pointillé. */
.dp-frise .lt-timeline .lt-item { opacity: 1; transform: none; transition: opacity .45s ease; }
.dp-frise .lt-item.is-debord { opacity: .32 !important; pointer-events: none; }
.dp-frise .lt-item.is-hors { opacity: 0 !important; pointer-events: none; }
.dp-frise .lt-timeline .lt-line-zone::before,
.dp-frise .lt-timeline .lt-track::before {
transform: none !important;
transition: none !important;
clip-path: inset(-2px calc((1 - var(--seg-p, 0)) * 100%) -2px 0);
}
.dp-frise .lt-timeline:not(.lt-dessin) .lt-line-zone::before { clip-path: none; }
.dp-frise .lt-timeline:not(.lt-dessin) .lt-item { --dot-s: 1; --dot-o: 1; }
.dp-frise .lt-dessin .lt-item :is(.lt-head, .lt-body) { transition: opacity .5s ease, transform .5s ease; }
.dp-frise .lt-dessin .lt-item:not(.is-atteint) :is(.lt-head, .lt-body) { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) { .dp-frise .lt-dessin .lt-item :is(.lt-head, .lt-body) { opacity: 1 !important; transform: none !important; } }
@media (max-width: 767px) {
.dp-frise.lt-mobile-vertical .lt-timeline .lt-line-zone::before { clip-path: inset(-2px -2px calc((1 - var(--seg-p, 0)) * 100%) -2px); }
}
.dp-frise .lt-nav svg path { stroke-width: 2.2; }
@media (min-width: 1025px) {
.dp-frise .lt-item { transition: opacity .45s ease; }
}
/* Carrousel de l'équipe : cartes d'experts */
.dp-carte-expert { position: relative; isolation: isolate; }
/* Lien de la carte sous le bloc d'infos (qui laisse passer les clics, sauf LinkedIn), flèche au-dessus de tout */
.dp-carte-expert-fleche { position: absolute !important; inset: 0; width: auto !important; max-width: none !important; margin: 0 !important; }
.dp-carte-expert-lien { position: absolute; inset: 0; }
.dp-carte-expert-lien .dp-rond-fleche { position: absolute; top: 9px; right: 9px; z-index: 3; }
.dp-carte-expert-lien:focus-visible { outline: none; }
.dp-carte-expert-lien:focus-visible .dp-rond-fleche { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 50%; }
.dp-carte-expert-infos {
position: relative;
z-index: 2;
pointer-events: none;
background: rgba(0, 0, 0, .2);
-webkit-backdrop-filter: blur(5.5px);
backdrop-filter: blur(5.5px);
transition: background-color .3s ease;
}
.dp-carte-expert-role .elementor-heading-title { font-weight: 300; font-style: italic; }
.dp-expert-linkedin { position: relative; z-index: 4; display: block; pointer-events: auto; width: 24px; height: 24px; background: url("assets/img/linkedin.svg") center / contain no-repeat; transition: transform .2s ease; }
.dp-expert-linkedin:hover { transform: scale(1.12); }
.dp-carte-expert-extrait { display: none; }
.dp-extrait-bio { margin: 0; font-family: var(--dp-font); font-size: 1rem; line-height: 1.5; color: #FFFFFF; }
@media (hover: hover) {
.dp-carte-expert::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.dp-carte-expert:hover::after { opacity: 1; }
.dp-carte-expert:hover .dp-carte-expert-infos { background: rgba(0, 0, 0, .3); }
.dp-carte-expert:hover .dp-carte-expert-nom,
.dp-carte-expert:hover .dp-carte-expert-role { display: none; }
.dp-carte-expert:hover .dp-carte-expert-extrait { display: block; animation: dp-ouvre .3s ease; }
}
/* Page Nos experts : même survol que le carrousel de l'équipe (voile sombre, extrait du parcours à la place du nom) */
.dp-carte-cas-extrait { display: none; }
@media (hover: hover) {
.dp-carte-cas--expert .dp-carte-cas-media.e-con::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.dp-carte-cas--expert .dp-carte-cas-media.e-con > .e-con { position: relative; z-index: 2; }
.dp-carte-cas--expert:hover .dp-carte-cas-media.e-con::after { opacity: 1; }
.dp-carte-cas--expert:hover :is(.elementor-element-40220e3, .elementor-element-3cb2f26) { display: none; }
.dp-carte-cas--expert:hover .dp-carte-cas-extrait { display: block; animation: dp-ouvre .3s ease; }
}
/* Carrousel équipe : nom et intitulé sur une ligne chacun, mise en page identique pour tous les experts */
.dp-carrousel-equipe .dp-carte-expert-infos.e-con {
--padding-top: 18px !important;
--padding-bottom: 18px !important;
--padding-left: 16px !important;
--padding-right: 16px !important;
--gap: 12px !important;
justify-content: center;
container-type: inline-size;
}
.dp-carrousel-equipe .dp-carte-expert-nom.e-con { flex-wrap: nowrap !important; align-items: center !important; min-width: 0; min-height: 24px; }
.dp-carrousel-equipe .dp-carte-expert-role .elementor-heading-title { margin: 0; }
.dp-carrousel-equipe .dp-carte-expert-nom .elementor-widget-heading { min-width: 0; }
.dp-carrousel-equipe .dp-carte-expert-nom .elementor-heading-title {
font-size: 1.5rem !important;
font-weight: 500;
line-height: 1.4 !important;
letter-spacing: -.04em !important;
color: #F4F8F8;
white-space: nowrap;
}
.dp-carrousel-equipe .dp-carte-expert-role .elementor-heading-title {
font-size: clamp(.6875rem, 5.2cqi, .8125rem) !important;
line-height: 1.4 !important;
letter-spacing: -.01em !important;
color: #FFFFFF;
white-space: nowrap;
}
/* Carrousel équipe : flèches overlay comme l'accueil, sans barre de progression */
.dp-carrousel-equipe.pb-carrousel-nav.elementor-widget .swiper-pagination { display: none !important; }
.dp-carrousel-equipe.pb-carrousel-nav.elementor-widget .elementor-swiper-button {
background: #FFFFFF;
color: var(--dp-bleu);
}
.dp-carrousel-equipe.pb-carrousel-nav.elementor-widget .elementor-swiper-button:is(:hover, :focus-visible) {
background: var(--dp-orange);
color: var(--dp-bleu);
}
@media (min-width: 1025px) {
.dp-carrousel-equipe.pb-carrousel-nav.elementor-widget { --pb-nav-taille: 44px; --arrow-size: 14px; padding-bottom: 0; }
.dp-carrousel-equipe.pb-carrousel-nav .elementor-swiper-button {
top: 50% !important;
bottom: auto !important;
margin-top: calc(var(--pb-nav-taille) / -2) !important;
font-size: .875rem;
}
.dp-carrousel-equipe.pb-carrousel-nav .elementor-swiper-button-prev { left: calc(var(--pb-nav-taille) / -2) !important; }
.dp-carrousel-equipe.pb-carrousel-nav .elementor-swiper-button-next { left: calc(100% - var(--pb-nav-taille) / 2) !important; }
.dp-carrousel-equipe.pb-carrousel-nav .elementor-swiper-button.swiper-button-disabled { opacity: 0; }
}
@media (max-width: 1024px) {
.dp-carrousel-equipe.pb-carrousel-nav .elementor-swiper-button-prev { left: calc(50% - 6px - var(--pb-nav-taille)) !important; }
.dp-carrousel-equipe.pb-carrousel-nav .elementor-swiper-button-next { left: calc(50% + 6px) !important; }
}
/* Modes d'intervention */
.dp-modes { position: relative; display: flex; flex-wrap: wrap; gap: 48px; margin: 0; padding: 0; list-style: none; --seg-p: 1; }
.dp-modes::before { content: ""; position: absolute; top: 31px; left: 24px; right: 24px; border-top: 2px dashed var(--dp-bleu-clair); z-index: 0; clip-path: inset(0 calc((1 - var(--seg-p, 1)) * 100%) 0 0); }
.dp-modes li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 88px; font-family: var(--dp-font); font-size: 1.125rem; font-weight: 500; line-height: 1.2; color: var(--dp-bleu-fonce); text-align: center; white-space: nowrap; }
.dp-modes img { width: 64px; height: 64px; }
@media (max-width: 767px) { .dp-modes { gap: 24px 16px; } .dp-modes::before { display: none; } .dp-modes li { width: calc(50% - 8px); } }
/* Outils et IA : carte « Notre engagement » + liste simple */
.dp-carte-engagement { border-left: 4px solid var(--dp-orange); border-radius: 0 16px 16px 0; filter: drop-shadow(0 -10px 20px rgba(0, 24, 53, .04)); }
.dp-liste-coches--simple li { --dp-coche-taille: 24px; --dp-coche-ecart: 12px; padding-top: 22px; padding-bottom: 22px; }
.dp-liste-coches--simple .dp-phrase { font-size: 1.25rem; min-height: 0; }
.e-con:has(> .dp-carte-engagement) { align-items: flex-start !important; }
@media (min-width: 768px) {
.dp-carte-engagement .elementor-heading-title { white-space: nowrap; }
}
/* Structurer : ce qui disparaît / ce qui apparaît */
.dp-liste-disparait { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dp-liste-disparait li { display: flex; align-items: baseline; gap: 12px; padding: 22px 0; font-family: var(--dp-font); font-size: 1.25rem; line-height: 1.4; color: rgba(255, 255, 255, .5); text-decoration: line-through; }
.dp-liste-disparait li:first-child { padding-top: 0; }
.dp-liste-disparait li + li { border-top: 1px solid var(--dp-bordure); }
.dp-liste-disparait li::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--dp-bleu-clair); }
.dp-citations-escalier--plat li { margin: 0 !important; font-size: 1.375rem; }
.dp-carte-france img { width: 100%; height: auto; }
/* ---------- Fiche cas client ---------- */
.dp-h1-cas .elementor-heading-title { font-size: 3.125rem; line-height: 1.1; letter-spacing: -.04em; text-shadow: 0 0 10px rgba(0, 0, 0, .2); }
.dp-h1-ligne2 { display: block; margin-top: .05em; font-size: 2.1875rem; color: var(--dp-orange); }
@media (max-width: 767px) { .dp-h1-cas .elementor-heading-title { font-size: 2.125rem; } .dp-h1-ligne2 { font-size: 1.5rem; } }
.dp-cas-infos { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dp-cas-info { display: flex; flex-direction: column; gap: 10px; min-width: 149px; padding: 13px 18px; border-right: 3px solid var(--dp-bleu-clair); border-radius: 8px 0 0 8px; background: rgba(255, 255, 255, .08); }
.dp-cas-info span { font-family: var(--dp-font); font-size: .875rem; font-weight: 500; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.dp-cas-info strong { font-family: var(--dp-font); font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: #FFFFFF; text-shadow: 0 0 10px rgba(0, 0, 0, .2); }
@media (min-width: 1025px) { .dp-hero-cas .dp-cas-infos-widget { margin-right: -20px; } .dp-hero-cas.e-con { --padding-right: 0px; } }
@media (max-width: 1024px) { .dp-cas-infos { flex-direction: row; flex-wrap: wrap; align-items: stretch; } .dp-cas-info { border-radius: 8px; } }
/* Vignette vidéo (YouTube) */
.dp-video {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 603 / 325;
border: 16px solid #FFFFFF;
border-radius: 32px;
outline: 1px solid rgba(0, 55, 122, .14);
background: #FFFFFF;
cursor: pointer;
}
.dp-video .dp-video-image { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; object-position: 50% 25%; }
.dp-video::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4)); pointer-events: none; }
.dp-video .dp-play { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); }
.dp-video:hover .dp-play { transform: translate(-50%, -50%) scale(1.06); }
.dp-video--attente { cursor: default; }
.dp-video--attente .dp-play { opacity: .55; }
.dp-video iframe.dp-video-yt { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; border-radius: 16px; }
.dp-video--interview { aspect-ratio: 16 / 9; }
@media (max-width: 767px) { .dp-video { border-width: 8px; border-radius: 20px; } .dp-video .dp-video-image, .dp-video::after { border-radius: 12px; } }
/* Besoin initial : pointillé du titre vers le texte */
.dp-besoin { position: relative; }
.dp-pointille-besoin { position: absolute !important; top: 18px; left: 264px; width: 212px; }
.dp-point-orange { position: absolute; right: -6px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--dp-orange); }
.dp-citation-besoin,
.dp-citation-besoin .elementor-widget-container,
.dp-citation-besoin p { font-style: italic !important; font-weight: 700 !important; }
/* Missions : cartes en deux colonnes */
.dp-missions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; margin: 0; padding: 0; list-style: none; }
.dp-missions li {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
margin: 0;
padding: 22px 24px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 16px;
background: rgba(255, 255, 255, .07);
transition: background-color .3s ease, border-color .3s ease, translate .3s ease;
}
.dp-mission-num { font-family: var(--dp-font); font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: .04em; color: var(--dp-bleu-clair); }
.dp-missions li:nth-child(4n+2) .dp-mission-num,
.dp-missions li:nth-child(4n+3) .dp-mission-num { color: var(--dp-orange); }
.dp-mission-titre { font-family: var(--dp-font); font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #FFFFFF; }
.dp-mission-texte { font-family: var(--dp-font); font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
@media (hover: hover) {
.dp-missions li:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); translate: 0 -3px; }
}
@media (max-width: 1024px) {
.dp-missions { gap: 16px 36px; }
.dp-missions li { padding: 20px; }
.dp-mission-titre { font-size: 1.125rem; }
}
@media (max-width: 767px) {
.dp-missions { grid-template-columns: 1fr; gap: 16px; }
}
/* Résultats */
.dp-signature-cas { display: flex; align-items: center; gap: 16px; margin: 0; font-family: var(--dp-font); font-size: .875rem; font-weight: 500; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-bleu-clair); }
.dp-signature-cas span::before { content: "- "; }
.dp-citation-bleue .dp-signature-photo { flex: 0 0 64px; width: 64px !important; height: 64px !important; border-radius: 14px !important; }
.dp-resultats-texte h3 { margin-top: 2rem; font-size: 1.75rem; font-weight: 500; color: var(--dp-bleu-fonce); letter-spacing: -.02em; }
.dp-resultats-texte blockquote { font-size: 1.25rem; }
.dp-encarts-zone { padding-top: 64px; border-top: 1px solid rgba(0, 55, 122, .2); }
/* Interview : chapitres + vidéo + retranscription */
.dp-interview { display: grid; grid-template-columns: 474px minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 1024px) { .dp-interview { grid-template-columns: 1fr; gap: 32px; } .dp-interview-media { order: -1; } }
/* Bureau : vidéos d'interview tournées en carré, cadre moins large et sommaire élargi */
@media (min-width: 1025px) {
.dp-interview { grid-template-columns: minmax(474px, 1fr) minmax(0, 1fr); }
.dp-interview .dp-video--interview { aspect-ratio: 5 / 4; }
.dp-interview .dp-video--interview .dp-play--96 { width: 5rem; height: 5rem; }
}
.dp-chapitres { display: flex; flex-direction: column; margin: 0; padding: 32px 40px; list-style: none; border: 1.5px solid rgba(80, 154, 207, .12); border-radius: 16px; background: #FFFFFF; }
.dp-chapitres li + li { border-top: 1px solid rgba(80, 154, 207, .14); }
.dp-chapitre {
display: flex;
width: 100%;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: 0;
padding: 9px 0;
border: 0;
border-left: 2px solid transparent;
border-radius: 0;
background: none;
font-family: var(--dp-font);
font-size: 1rem;
line-height: 1.4;
text-align: left;
color: var(--dp-bleu);
cursor: pointer;
transition: color .2s ease, padding .2s ease, border-color .2s ease;
}
.dp-chapitre:hover { color: var(--dp-orange); background: none; }
.dp-chapitre.is-actif { padding-left: 16px; border-left-color: var(--dp-orange); font-weight: 500; color: var(--dp-orange); }
.dp-chapitre-temps { flex: 0 0 auto; font-size: .875rem; color: var(--dp-texte-discret); }
.dp-chapitre.is-actif .dp-chapitre-temps { color: var(--dp-orange); }
@media (max-width: 767px) { .dp-chapitres { padding: 20px; } }
.dp-interview-media { display: flex; flex-direction: column; gap: 24px; }
.dp-transcription { border: 1.5px solid rgba(80, 154, 207, .12); border-radius: 16px; background: #FFFFFF; }
.dp-transcription summary { display: flex; align-items: center; gap: 16px; padding: 18px 28px; list-style: none; cursor: pointer; font-family: var(--dp-font); font-size: 1.125rem; font-weight: 500; color: var(--dp-bleu-fonce); }
.dp-transcription summary::-webkit-details-marker { display: none; }
.dp-transcription summary span:nth-child(2) { flex: 1 1 auto; }
.dp-transcription-icone { flex: 0 0 24px; width: 24px; height: 24px; background: var(--dp-bleu); -webkit-mask: url("assets/img/marque-page.svg") center / 14px no-repeat; mask: url("assets/img/marque-page.svg") center / 14px no-repeat; }
.dp-transcription-rond { flex: 0 0 32px; width: 32px; height: 32px; background: url("assets/img/rond-bas-orange.svg") center / contain no-repeat; transition: transform .3s ease; }
.dp-transcription[open] .dp-transcription-rond { transform: rotate(180deg); }
.dp-transcription-texte { max-height: 70vh; overflow: auto; padding: 8px 28px 28px; }
/* Le Kit stylise tous les