/* ============================================================
CEWeb Widgets — Hero projet (cas client)
L'en-tête du modèle de page des projets : à gauche un lien retour, une
pastille, le titre, une introduction, des points clés cochés et le lien du
site livré ; à droite le visuel principal. Aucun JavaScript.
Tous les réglages de l'onglet Style arrivent par des variables
--ceweb-hero-projet-* posées sur .ceweb-hero-projet par Elementor. Les
valeurs ci-dessous ne sont qu'un repli, et elles pointent d'abord sur la
palette du thème — -1 accent, -6 titres, -7 texte courant, -9 bordures,
-10 fond clair, -11 blanc. Les contrôles de couleur ont donc un défaut
*vide* : tant qu'on n'y touche pas, Elementor n'émet rien et c'est le thème
qui décide.
Cinq variables ne sont volontairement **jamais déclarées ici** —
--ceweb-hero-projet-badge-bg, -badge-color, -back-color-hover, -link-color
et -link-color-hover. Le CSS les lit en `var(x, repli)`, et un var() ne
prend son repli que si la variable n'est *pas* déclarée : la déclarer, même
vide, casserait le repli.
============================================================ */
/* Le bloc doit réclamer toute la largeur de la section. Dans un conteneur
flexbox Elementor, un widget est un élément flex en `flex: 0 1 auto` : sa
largeur suit son contenu, et les deux colonnes en pourcentage se
calculeraient sur une boîte déjà rétrécie. Même piège, et même remède, que
l'« Accordéon d'images ». */
.elementor-widget-ceweb_hero_projet{ width: 100%; }
.ceweb-hero-projet{
width: 100%;
box-sizing: border-box;
/* --- Disposition -------------------------------------------- */
--ceweb-hero-projet-body-basis: 50%;
--ceweb-hero-projet-media-basis: 50%;
--ceweb-hero-projet-gap: 72px;
--ceweb-hero-projet-valign: center;
--ceweb-hero-projet-align: left;
--ceweb-hero-projet-self: flex-start;
--ceweb-hero-projet-mi: 0 auto;
/* --- Fond du bloc ------------------------------------------- */
--ceweb-hero-projet-accent: var(--theme-palette-color-1, #1A6FFF);
--ceweb-hero-projet-radius: 0px;
--ceweb-hero-projet-padding: 0px;
/* --- Lien retour --------------------------------------------- */
--ceweb-hero-projet-back-color: var(--theme-palette-color-7, #475569);
--ceweb-hero-projet-back-gap: 22px;
--ceweb-hero-projet-arrow-shift: 4px;
/* --- Pastille ------------------------------------------------ */
--ceweb-hero-projet-badge-padding: 8px 16px;
--ceweb-hero-projet-badge-radius: 999px;
--ceweb-hero-projet-badge-gap: 22px;
/* Replis neutres dans les variables elles-mêmes : une déclaration contenant
un var() invalide retombe sur `unset`, jamais sur la règle précédente. */
--ceweb-hero-projet-badge-tint: rgba(26, 111, 255, .10);
--ceweb-hero-projet-badge-ink: var(--ceweb-hero-projet-accent);
/* --- Titre et introduction ------------------------------------ */
--ceweb-hero-projet-title-color: var(--theme-palette-color-6, #0C1A3C);
--ceweb-hero-projet-title-gap: 24px;
--ceweb-hero-projet-text-color: var(--theme-palette-color-7, #475569);
--ceweb-hero-projet-strong-color: var(--theme-palette-color-6, #0C1A3C);
--ceweb-hero-projet-text-max: 580px;
--ceweb-hero-projet-text-gap: 30px;
/* --- Points clés --------------------------------------------- */
--ceweb-hero-projet-features-columns: 2;
--ceweb-hero-projet-features-col-gap: 32px;
--ceweb-hero-projet-features-row-gap: 12px;
--ceweb-hero-projet-features-gap: 30px;
--ceweb-hero-projet-feature-color: var(--theme-palette-color-6, #0C1A3C);
/* Le vert de la coche est la seule couleur hors palette : le thème n'a pas
de couleur de réussite. C'est celui de mise en valeur du « Mega menu »,
pour que le site n'ait qu'un vert ; isolé ici, il se change d'une ligne. */
--ceweb-hero-projet-check-bg: #5FBF7A;
--ceweb-hero-projet-check-color: var(--theme-palette-color-11, #FFFFFF);
--ceweb-hero-projet-check-size: 22px;
--ceweb-hero-projet-check-icon-size: 12px;
--ceweb-hero-projet-check-radius: 6px;
--ceweb-hero-projet-check-gap: 10px;
/* --- Visuel ---------------------------------------------------- */
--ceweb-hero-projet-ratio: 4 / 3;
--ceweb-hero-projet-img-h: 100%;
--ceweb-hero-projet-fit: cover;
--ceweb-hero-projet-focal: center center;
--ceweb-hero-projet-media-bg: var(--theme-palette-color-9, #E2E8F0);
--ceweb-hero-projet-media-radius: 20px;
/* --- Apparition ------------------------------------------------ */
--ceweb-hero-projet-reveal-shift: 18px;
--ceweb-hero-projet-reveal-duration: 640ms;
--ceweb-hero-projet-reveal-step: 70ms;
--ceweb-hero-projet-duration: 260ms;
--ceweb-hero-projet-ease: cubic-bezier(.2, .7, .3, 1);
/* Pas de font-family : le bloc prend les polices du thème, celle du corps
pour le texte et celle des titres pour la balise du titre. */
padding: var(--ceweb-hero-projet-padding);
border-radius: var(--ceweb-hero-projet-radius);
color: var(--ceweb-hero-projet-text-color);
}
.ceweb-hero-projet *{ box-sizing: border-box; }
@supports (color: color-mix(in srgb, red 50%, white)){
.ceweb-hero-projet{
--ceweb-hero-projet-badge-tint: color-mix(in srgb, var(--ceweb-hero-projet-accent) 10%, var(--theme-palette-color-11, #FFFFFF));
--ceweb-hero-projet-badge-ink: color-mix(in srgb, var(--ceweb-hero-projet-accent) 78%, var(--theme-palette-color-6, #0C1A3C));
}
}
/* ============================================================
Les deux colonnes
`flex-wrap` et deux bases, comme « Engagements » : tant que les deux tiennent
côte à côte elles se partagent la ligne ; dès que la base du texte atteint
100 %, le visuel passe dessous. Le côté du visuel est une classe posée par
PHP — un état, une classe, une spécificité.
Chaque base rend la moitié de l'espace entre colonnes, sans quoi deux bases
à 50 % plus l'espace dépasseraient la ligne et le visuel tomberait dessous
dès l'ordinateur. Le pixel retiré en plus absorbe les arrondis
sous-pixel, qui suffisent à faire passer à la ligne deux colonnes au compte
juste ; `flex-grow` le rend aussitôt.
============================================================ */
.ceweb-hero-projet__layout{
display: flex;
flex-wrap: wrap;
align-items: var(--ceweb-hero-projet-valign);
gap: var(--ceweb-hero-projet-gap);
}
.ceweb-hero-projet.is-media-left .ceweb-hero-projet__layout{ flex-direction: row-reverse; }
.ceweb-hero-projet__body{
flex: 1 1 calc(var(--ceweb-hero-projet-body-basis) - var(--ceweb-hero-projet-gap) / 2 - 1px);
min-width: 0;
text-align: var(--ceweb-hero-projet-align);
}
.ceweb-hero-projet__media{
flex: 1 1 calc(var(--ceweb-hero-projet-media-basis) - var(--ceweb-hero-projet-gap) / 2 - 1px);
min-width: 0;
}
/* ============================================================
Colonne de texte
Sélecteurs volontairement longs (0,2,0 et plus) : `.elementor p` et les
règles de titre du thème passeraient devant une classe isolée et
reprendraient la marge et la couleur. Long plutôt qu'`!important`, pour que
l'onglet Style reste capable de gagner.
============================================================ */
.ceweb-hero-projet .ceweb-hero-projet__back{
display: flex;
justify-content: var(--ceweb-hero-projet-self);
margin: 0 0 var(--ceweb-hero-projet-back-gap);
}
.ceweb-hero-projet .ceweb-hero-projet__back-link{
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ceweb-hero-projet-back-color);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
transition: color var(--ceweb-hero-projet-duration) var(--ceweb-hero-projet-ease);
}
a.ceweb-hero-projet__back-link:hover,
a.ceweb-hero-projet__back-link:focus-visible{
color: var(--ceweb-hero-projet-back-color-hover, var(--ceweb-hero-projet-accent));
}
/* La pastille est un `` en `inline-block` : elle suit l'alignement du texte
sans rangée flex autour d'elle. */
.ceweb-hero-projet .ceweb-hero-projet__badge{
display: inline-block;
margin: 0 0 var(--ceweb-hero-projet-badge-gap);
padding: var(--ceweb-hero-projet-badge-padding);
border-radius: var(--ceweb-hero-projet-badge-radius);
background: var(--ceweb-hero-projet-badge-bg, var(--ceweb-hero-projet-badge-tint));
color: var(--ceweb-hero-projet-badge-color, var(--ceweb-hero-projet-badge-ink));
font-size: 13px;
font-weight: 600;
line-height: 1.3;
}
/* Ni font-family ni font-size : le titre prend la police et la taille que le
thème donne à sa balise (h1 par défaut, réglable dans l'onglet Contenu). */
.ceweb-hero-projet .ceweb-hero-projet__title{
display: block;
margin: 0 0 var(--ceweb-hero-projet-title-gap);
color: var(--ceweb-hero-projet-title-color);
line-height: 1.05;
overflow-wrap: break-word; /* Un nom de client d'un seul mot très long ne doit pas déborder sur mobile. */
}
.ceweb-hero-projet .ceweb-hero-projet__text{
max-width: var(--ceweb-hero-projet-text-max);
margin: 0 0 var(--ceweb-hero-projet-text-gap);
margin-inline: var(--ceweb-hero-projet-mi);
color: var(--ceweb-hero-projet-text-color);
font-size: 19px;
line-height: 1.65;
/* `--text-align` et `--text-hyphens` ne sont jamais déclarées dans cette
feuille : vides, l'introduction suit l'alignement du bloc et ne coupe
aucun mot. Un `var()` ne prend son repli que si la variable est absente. */
text-align: var(--ceweb-hero-projet-text-align, var(--ceweb-hero-projet-align));
-webkit-hyphens: var(--ceweb-hero-projet-text-hyphens, manual);
hyphens: var(--ceweb-hero-projet-text-hyphens, manual);
}
.ceweb-hero-projet .ceweb-hero-projet__text p{ margin: 0 0 .8em; }
.ceweb-hero-projet .ceweb-hero-projet__text > :last-child{ margin-bottom: 0; }
.ceweb-hero-projet .ceweb-hero-projet__text strong,
.ceweb-hero-projet .ceweb-hero-projet__text b{
color: var(--ceweb-hero-projet-strong-color);
font-weight: 600;
}
/* ============================================================
Points clés
Un `
` imbriqué dans la racine : ses remises à zéro portent deux classes
(0,2,0) et passent devant le `.elementor ul` (0,1,1) du thème, qui
reprendrait sinon la marge, le retrait et les puces. Le `- ` a la sienne,
pour le `list-style` que certains thèmes posent sur `li`.
============================================================ */
.ceweb-hero-projet .ceweb-hero-projet__features{
display: grid;
grid-template-columns: repeat(var(--ceweb-hero-projet-features-columns), minmax(0, 1fr));
gap: var(--ceweb-hero-projet-features-row-gap) var(--ceweb-hero-projet-features-col-gap);
margin: 0 0 var(--ceweb-hero-projet-features-gap);
padding: 0;
list-style: none;
}
.ceweb-hero-projet .ceweb-hero-projet__features .ceweb-hero-projet__feature{
display: flex;
align-items: center;
justify-content: var(--ceweb-hero-projet-self);
gap: var(--ceweb-hero-projet-check-gap);
margin: 0;
padding: 0;
list-style: none;
color: var(--ceweb-hero-projet-feature-color);
font-size: 16px;
line-height: 1.4;
text-align: var(--ceweb-hero-projet-align);
}
.ceweb-hero-projet__check{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--ceweb-hero-projet-check-size);
height: var(--ceweb-hero-projet-check-size);
border-radius: var(--ceweb-hero-projet-check-radius);
background: var(--ceweb-hero-projet-check-bg);
color: var(--ceweb-hero-projet-check-color);
}
.ceweb-hero-projet__check:empty{ display: none; }
/* Sélecteur à trois classes (0,3,1), même raison que les pastilles
d'« Engagements » : à (0,1,1), il serait à égalité avec les règles
qu'Elementor pose sur ses SVG en ligne, et la feuille d'Elementor, chargée
après, gagnerait. Une police d'icône est une lettre : seule `font-size` la
redimensionne. */
.ceweb-hero-projet .ceweb-hero-projet__feature .ceweb-hero-projet__check i,
.ceweb-hero-projet .ceweb-hero-projet__feature .ceweb-hero-projet__check svg{
display: block;
width: var(--ceweb-hero-projet-check-icon-size);
height: var(--ceweb-hero-projet-check-icon-size);
font-size: var(--ceweb-hero-projet-check-icon-size);
line-height: 1;
}
.ceweb-hero-projet .ceweb-hero-projet__feature .ceweb-hero-projet__check i{ width: auto; height: auto; }
.ceweb-hero-projet .ceweb-hero-projet__feature .ceweb-hero-projet__check svg{ fill: currentColor; }
/* ============================================================
Lien du site
============================================================ */
.ceweb-hero-projet__actions{
display: flex;
justify-content: var(--ceweb-hero-projet-self);
}
.ceweb-hero-projet .ceweb-hero-projet__actions .ceweb-hero-projet__link{
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ceweb-hero-projet-link-color, var(--ceweb-hero-projet-accent));
font-size: 16px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
overflow-wrap: anywhere; /* Une adresse longue n'a aucune espace où se couper. */
transition: color var(--ceweb-hero-projet-duration) var(--ceweb-hero-projet-ease);
}
.ceweb-hero-projet .ceweb-hero-projet__actions .ceweb-hero-projet__link:hover,
.ceweb-hero-projet .ceweb-hero-projet__actions .ceweb-hero-projet__link:focus-visible{
color: var(--ceweb-hero-projet-link-color-hover, var(--ceweb-hero-projet-link-color, var(--ceweb-hero-projet-accent)));
}
.ceweb-hero-projet__back-arrow,
.ceweb-hero-projet__link-arrow{
display: inline-block;
transition: transform var(--ceweb-hero-projet-duration) var(--ceweb-hero-projet-ease);
}
a.ceweb-hero-projet__back-link:hover .ceweb-hero-projet__back-arrow,
a.ceweb-hero-projet__back-link:focus-visible .ceweb-hero-projet__back-arrow{
transform: translateX(calc(-1 * var(--ceweb-hero-projet-arrow-shift)));
}
.ceweb-hero-projet__link:hover .ceweb-hero-projet__link-arrow,
.ceweb-hero-projet__link:focus-visible .ceweb-hero-projet__link-arrow{
transform: translateX(var(--ceweb-hero-projet-arrow-shift));
}
.ceweb-hero-projet .ceweb-hero-projet__sr{
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Le dernier élément rendu ne garde pas sa marge basse, quel qu'il soit : la
colonne s'arrête à son texte, ce qui garde l'alignement vertical honnête. */
.ceweb-hero-projet .ceweb-hero-projet__body > :last-child{ margin-bottom: 0; }
/* ============================================================
Visuel
Le rayon vit sur le cadre, qui découpe en `overflow: hidden`, et pas
seulement sur l'image : `
![]()
` est la balise que les thèmes stylent le plus
volontiers, et un `.entry-content img` global battrait une classe isolée —
même leçon que « Parcours ». La règle sur l'image est longue (0,3,0) pour
tenir sans `!important`.
============================================================ */
.ceweb-hero-projet__frame{
position: relative;
overflow: hidden;
aspect-ratio: var(--ceweb-hero-projet-ratio);
border-radius: var(--ceweb-hero-projet-media-radius);
background: var(--ceweb-hero-projet-media-bg);
}
.ceweb-hero-projet .ceweb-hero-projet__frame .ceweb-hero-projet__image{
display: block;
width: 100%;
height: var(--ceweb-hero-projet-img-h);
max-width: none;
margin: 0;
border-radius: inherit;
object-fit: var(--ceweb-hero-projet-fit);
object-position: var(--ceweb-hero-projet-focal);
}
/* Éditeur seulement : la publication éditée n'a pas d'image. Même cadre que la
maquette, pour juger de la mise en page avant d'avoir un vrai projet. */
.ceweb-hero-projet__placeholder{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px;
border: 1px dashed var(--theme-palette-color-7, #94A3B8);
border-radius: inherit;
color: var(--theme-palette-color-7, #475569);
font-size: 14px;
font-weight: 500;
text-align: center;
}
/* Cadre « libre » sans image : aucune proportion ne lui donnerait de hauteur. */
.ceweb-hero-projet__frame:has(> .ceweb-hero-projet__placeholder){ min-height: 280px; }
/* Éditeur seulement : ce qui viendra de la publication, montré en exemple.
Atténué, pour ne pas être pris pour du contenu saisi dans le modèle. */
.ceweb-hero-projet .is-sample{ opacity: .55; }
/* ============================================================
Apparition
Au chargement, jamais liée au défilement : un hero est en haut de page, il
est dans l'écran avant qu'on ait défilé. Chaque élément porte son rang
(`--ceweb-hero-projet-i`, écrit par PHP) et en tire son délai. `both` en
mode de remplissage, sans quoi chaque élément clignoterait une image à sa
position d'arrivée avant de reculer.
Coupée dans l'éditeur, qui re-rend le widget à chaque réglage, et sous
`prefers-reduced-motion`.
============================================================ */
@keyframes ceweb-hero-projet-rise{
from{ opacity: 0; transform: translate3d(0, var(--ceweb-hero-projet-reveal-shift), 0); }
to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference){
.ceweb-hero-projet--reveal .ceweb-hero-projet__body > *,
.ceweb-hero-projet--reveal .ceweb-hero-projet__media{
animation: ceweb-hero-projet-rise var(--ceweb-hero-projet-reveal-duration) var(--ceweb-hero-projet-ease) both;
animation-delay: calc(var(--ceweb-hero-projet-i, 0) * var(--ceweb-hero-projet-reveal-step));
}
.elementor-editor-active .ceweb-hero-projet--reveal .ceweb-hero-projet__body > *,
.elementor-editor-active .ceweb-hero-projet--reveal .ceweb-hero-projet__media{
animation: none;
}
}
@media (prefers-reduced-motion: reduce){
.ceweb-hero-projet__back-link,
.ceweb-hero-projet__link,
.ceweb-hero-projet__back-arrow,
.ceweb-hero-projet__link-arrow{
transition: none !important;
}
a.ceweb-hero-projet__back-link:hover .ceweb-hero-projet__back-arrow,
a.ceweb-hero-projet__back-link:focus-visible .ceweb-hero-projet__back-arrow,
.ceweb-hero-projet__link:hover .ceweb-hero-projet__link-arrow,
.ceweb-hero-projet__link:focus-visible .ceweb-hero-projet__link-arrow{
transform: none;
}
}