Dp style · CSS
/*
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: 1.0.0
Text Domain: hello-elementor-child
*/
 
/* ==========================================================
 * DIRECTEUR PARTICULIER : style.css du thème enfant
 * Base : dp-global.css (tokens) + éléments repris de Smart Cover,
 * recolorés et passés en Ubuntu.
 * Les noms de classes sc-* sont conservés quand un script ou un
 * shortcode Smart Cover en dépend (copier/coller direct).
 * ========================================================== */
 
 
/* ==========================================================
 * 1. TOKENS
 * ========================================================== */
:root {
  --dp-bleu:          #00377A;
  --dp-bleu-fonce:    #001835;
  --dp-bleu-clair:    #509ACF;
  --dp-orange:        #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, .15);
  --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 */
}
 
 
/* ==========================================================
 * 2. DÉCORS DE FOND (repris tel quel de Smart Cover)
 * Grilles techniques, cercles concentriques, motifs à points
 * ========================================================== */
 
/* .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; }
 
 
/* ==========================================================
 * 3. UTILITAIRES
 * ========================================================== */
 
/* Affichage par breakpoint */
@media (min-width: 1025px) { .menu-mobile-only { display: none !important; } }
@media (max-width: 1024px) { .desktop-only     { display: none !important; } }
 
/* Couleurs de texte inline (mots en orange dans les titres, etc.) */
.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; }
 
/* Graisses (Ubuntu : 300 / 400 / 500 / 700) */
.thin   { font-weight: 300; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.bold   { font-weight: 700; }
 
.italic    { font-style: italic; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
 
/* 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. BOUTONS : remplissage au survol (pill DP, rayon 100px)
 * btn-anim       → bouton orange, se remplit en bleu, texte blanc
 * btn-anim-white → se remplit en blanc, texte bleu (sur fond bleu)
 * btn-anim-dark  → se remplit en bleu foncé, texte blanc
 * ========================================================== */
:is(.btn-anim, .btn-anim-white, .btn-anim-dark) .elementor-button {
  --btn-fill: var(--dp-bleu);
  --btn-fill-text: #FFFFFF;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  vertical-align: top;
  transition: color 300ms ease;
}
.btn-anim-white .elementor-button { --btn-fill: #FFFFFF;            --btn-fill-text: var(--dp-bleu); }
.btn-anim-dark  .elementor-button { --btn-fill: var(--dp-bleu-fonce); --btn-fill-text: #FFFFFF; }
 
:is(.btn-anim, .btn-anim-white, .btn-anim-dark) .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
:is(.btn-anim, .btn-anim-white, .btn-anim-dark) .elementor-button-icon {
  transition: transform 300ms ease;
}
:is(.btn-anim, .btn-anim-white, .btn-anim-dark) .elementor-button:is(:hover, :focus-visible) {
  color: var(--btn-fill-text) !important;
}
:is(.btn-anim, .btn-anim-white, .btn-anim-dark) .elementor-button:is(:hover, :focus-visible)::before {
  transform: scaleX(1);
}
/* Pastille ronde de la flèche : petit décalage au survol */
:is(.btn-anim, .btn-anim-white, .btn-anim-dark) .elementor-button:is(:hover, :focus-visible) .elementor-button-icon {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  :is(.btn-anim, .btn-anim-white, .btn-anim-dark) .elementor-button::before,
  :is(.btn-anim, .btn-anim-white, .btn-anim-dark) .elementor-button-icon { transition: none; }
}
 
/* Lien secondaire souligné (« Voir nos cas clients ») */
.dp-lien .elementor-button,
a.dp-lien {
  background: transparent !important;
  padding: 4px 0 8px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid currentColor;
  transition: color 250ms ease, border-color 250ms ease;
}
.dp-lien .elementor-button:hover,
a.dp-lien:hover { color: var(--dp-orange) !important; }
 
 
/* ==========================================================
 * 5. SPOTLIGHT CARDS : lueur bleu clair qui suit la souris
 * Usage : classe .sc-spotlight sur le container de la carte
 * Script : Code personnalisé « Spotlight cards » (fin de body)
 * Pages : atouts (accueil), méthode en 3 temps, « Vous vous reconnaissez ? »
 * ========================================================== */
.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; }
/* Sur fond bleu foncé, lueur plus présente */
.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%
  );
}
 
 
/* ==========================================================
 * 6. BADGES ARTICLE [article_badges] (cartes Ressources)
 * Le sur-titre .dp-surtitre est dans dp-global.css
 * ========================================================== */
.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: .75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  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; }
@media (max-width: 767px) {
  .sc-badges { flex-direction: column; align-items: flex-start; }
}
 
 
/* ==========================================================
 * 7. FIL D'ARIANE (hero des pages intérieures)
 * Classe .sc-breadcrumb sur le widget Liste d'icônes
 * ========================================================== */
.sc-breadcrumb .elementor-icon-list-items { flex-wrap: nowrap; max-width: 100%; }
.sc-breadcrumb .elementor-icon-list-item:last-child { min-width: 0; }
.sc-breadcrumb .elementor-icon-list-item:last-child .elementor-icon-list-text {
  font-weight: 500;
  color: var(--dp-orange);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-breadcrumb a:hover .elementor-icon-list-text { color: var(--dp-orange); }
.sc-breadcrumb .elementor-icon-list-icon svg { transform: rotate(-90deg); }
 
 
/* ==========================================================
 * 8. CARROUSELS : cartes hors champ atténuées
 * Cas clients (vidéos), équipe DAF, ressources
 * Opacité gérée par le snippet JS « Carrousels – cartes visibles »
 * (penser à y ajouter ces classes)
 * ========================================================== */
:is(.carrousel-cas-clients, .carrousel-equipe, .carrousel-actus) .swiper {
  overflow: visible !important;
}
:is(.carrousel-cas-clients, .carrousel-equipe, .carrousel-actus) .swiper-slide > * {
  opacity: .35;
  transition: opacity .2s ease;
}
:is(.carrousel-cas-clients, .carrousel-equipe, .carrousel-actus) .swiper-slide.is-visible > * {
  opacity: 1;
}
 
/* Sticky Elementor : évite le doublon du clone de sidebar (motion-elementor) */
.elementor-sticky__spacer,
.elementor-sticky__spacer * {
  visibility: hidden !important;
  pointer-events: none !important;
}
 
 
/* ==========================================================
 * 9. FILTRE EN ONGLETS (archives Ressources / Cas clients)
 * Classe « sc-filter-tabs » sur le widget Filtre de taxonomie
 * JS flèches : assets/js/filter-tabs.js (à reprendre de Smart Cover)
 * ========================================================== */
.sc-filter-tabs {
  --e-filter-justify-content: center;
  --e-filter-align-items: flex-end;
  --e-filter-space-between: 40px;
  --e-filter-item-padding: 0;
  --e-filter-normal-text-color: var(--dp-texte);
  --e-filter-hover-text-color: var(--dp-bleu);
  --e-filter-active-text-color: var(--dp-bleu);
  --sc-filter-line: var(--dp-bordure);
  --sc-filter-active: var(--dp-orange);
}
.sc-filter-tabs .e-filter {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-bottom: 1px solid var(--sc-filter-line);
}
.sc-filter-tabs .e-filter button.e-filter-item {
  position: relative;
  margin: 0 !important;
  padding: 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  color: var(--e-filter-normal-text-color);
  font-family: var(--dp-font);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease;
}
.sc-filter-tabs .e-filter button.e-filter-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background-color .25s ease;
}
.sc-filter-tabs .e-filter button.e-filter-item:is(:hover, :focus-visible):not([aria-pressed='true']) {
  color: var(--e-filter-hover-text-color);
}
.sc-filter-tabs .e-filter button.e-filter-item[aria-pressed='true'] {
  color: var(--e-filter-active-text-color);
  background: transparent !important;
}
.sc-filter-tabs .e-filter button.e-filter-item[aria-pressed='true']::after {
  background: var(--sc-filter-active);
}
.sc-filter-tabs__wrap { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sc-filter-tabs__wrap .e-filter { min-width: 0; }
.sc-filter-tabs .sc-filter-tabs__arrow {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid var(--sc-filter-line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: var(--dp-bleu) !important;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.sc-filter-tabs .sc-filter-tabs__arrow svg { display: block; }
.sc-filter-tabs .sc-filter-tabs__arrow--prev svg { transform: scaleX(-1); }
.sc-filter-tabs .sc-filter-tabs__arrow:hover:not(:disabled) {
  background: var(--dp-bleu) !important;
  border-color: var(--dp-bleu) !important;
  color: #FFFFFF !important;
}
.sc-filter-tabs .sc-filter-tabs__arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 1024px) {
  .sc-filter-tabs {
    --e-filter-justify-content: flex-start;
    --e-filter-space-between: 28px;
    --e-filter-wrap: nowrap;
    --e-filter-overflow-x: auto;
  }
  .sc-filter-tabs .e-filter { scroll-behavior: smooth; overscroll-behavior-x: contain; }
  .sc-filter-tabs .e-filter button.e-filter-item { scroll-snap-align: center; }
  .sc-filter-tabs__wrap.is-scrollable .sc-filter-tabs__arrow { display: inline-flex; }
}
@media (max-width: 767px) {
  .sc-filter-tabs { --e-filter-space-between: 24px; }
}
 
 
/* ==========================================================
 * 10. SINGLE RESSOURCE / ARTICLE
 * Classes : sc-reading-time, sc-toc, sc-post-content, sc-share
 * Shortcode [sc_reading_time] et JS single-actu.js à reprendre
 * ========================================================== */
 
/* Temps de lecture */
.sc-reading-time {
  display: inline-block;
  font-family: var(--dp-font);
  font-size: .875rem;
  line-height: 1.2;
  color: var(--dp-texte);
}
.sc-reading-time strong { font-weight: 500; color: var(--dp-bleu); }
 
/* Sommaire (Table des matières) */
.sc-toc ol.elementor-toc__list-wrapper .elementor-toc__list-item-text-wrapper::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--dp-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dp-bleu-clair);
  margin-inline-end: 14px;
  min-width: 20px;
}
.sc-toc .elementor-toc__list-item-text-wrapper { align-items: flex-start; }
.sc-toc .elementor-toc__list-item { margin-bottom: 14px; }
.sc-toc .elementor-toc__list-item:last-child { margin-bottom: 0; }
.sc-toc .elementor-toc__list-item-text { display: block; line-height: 1.3; }
.elementor-element.elementor-widget.sc-toc.elementor-widget-table-of-contents {
  --item-text-decoration: none;
  --item-text-hover-decoration: none;
  --item-text-active-decoration: none;
  --item-text-hover-color: var(--dp-bleu);
  --item-text-active-color: var(--dp-bleu-fonce);
}
.sc-toc .elementor-toc__body .elementor-toc__list-item-text { text-decoration: none; transition: color .2s ease; }
.sc-toc .elementor-toc__body .elementor-toc__list-item-text.is-current { color: var(--dp-bleu); font-weight: 500; }
.sc-toc .elementor-toc__body .elementor-toc__list-item-text:focus-visible {
  outline: 2px solid var(--dp-bleu-clair);
  outline-offset: 4px;
}
 
/* Contenu de l'article */
.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;
  scroll-margin-top: 140px;
}
.sc-post-content h2 { font-size: 1.75rem;  line-height: 1.2; }
.sc-post-content h3 { font-size: 1.375rem; line-height: 1.3; }
.sc-post-content h4 { font-size: 1.125rem; 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: 1rem 0 1rem 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);
}
@media (max-width: 767px) {
  .sc-post-content :is(h2, h3, h4) { margin-top: 2rem; }
}
 
/* Partage + toast « Lien copié » */
.sc-share .elementor-icon { transition: transform .25s ease, filter .25s ease; }
.sc-share .elementor-icon:hover { transform: translateY(-3px); filter: brightness(1.15); }
.sc-copy-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 9999;
  transform: translate(-50%, 20px);
  padding: 12px 22px;
  border-radius: 100px;
  background: var(--dp-bleu-fonce);
  color: #FFFFFF;
  font-family: var(--dp-font);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .05em;
  box-shadow: 0 10px 30px rgba(0, 24, 53, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.sc-copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
 
/* Une seule autre ressource : la carte garde la largeur d'une carte sur deux */
@media (min-width: 1025px) {
  .carrousel-actus .swiper-slide { max-width: calc(50% - 20px); }
}
 
 
/* ==========================================================
 * 11. FORMULAIRE DE CONTACT : mention reCAPTCHA
 * ========================================================== */
.sc-form-notice {
  margin: 4px 0 0;
  font-size: .6875rem;
  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); }
/* Variante si le formulaire est dans une carte bleu foncé */
.is-dark .sc-form-notice { color: rgba(255, 255, 255, .7); }
.is-dark .sc-form-notice a:hover { color: #FFFFFF; }
 
 
/* ==========================================================
 * 12. HEADER : menu toujours sur une ligne entre 1025 et 1440px
 * Technique Smart Cover, à rattacher aux classes du header DP
 * (pas d'ID Elementor : poser les classes dans Avancé > Classes CSS)
 *   .dp-header       → container du header
 *   .dp-header-menu  → widget Menu
 *   .dp-header-cta   → bouton « Prendre rdv »
 * ========================================================== */
@media (min-width: 1025px) {
  .dp-header-menu .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }
  .dp-header-menu .elementor-nav-menu--main .elementor-item {
    white-space: nowrap;
    padding-left:  clamp(8px, calc(8px + (100vw - 1025px) * .0193), 16px);
    padding-right: clamp(8px, calc(8px + (100vw - 1025px) * .0193), 16px);
  }
  .e-con.dp-header {
    --padding-left:  clamp(24px, calc(24px + (100vw - 1025px) * .0578), 48px);
    --padding-right: clamp(24px, calc(24px + (100vw - 1025px) * .0578), 48px);
  }
  .dp-header-cta .elementor-button { white-space: nowrap; }
}
 
Claude a terminé sa réponse.