/* ===================================================================== c-integrated-photo.css (WS) ===================================================================== Composant : "Photo latérale intégrée au background" ----------------------------------------------------- But : - Dans une section (souvent avec background/slice), afficher une photo latérale intégrée visuellement au décor - La photo est rendue en background cover (cadrage contrôlable) - La frontière photo/fond se dissout grâce à un fondu réglable indépendamment sur chaque bord - Option : voile colorimétrique (blend) pour "teinter" la photo et l’intégrer au reste de la section - Option : classes prêtes à l’emploi pour certains presets de fondu, dont un fondu simultané à gauche ET à droite Préfixe : - ws- = WebService (générique, réutilisable) Philosophy Gutenberg : - On ne touche pas aux styles WP globaux - On cible uniquement les classes ws- (composant opt-in) - Réglages fins via variables CSS - Presets rapides via classes optionnelles ===================================================================== */ /* ===================================================================== 0) TOKENS (globaux) — fallback --------------------------------------------------------------------- Idéalement, ces tokens vivent dans 00-tokens.css. Ici : fallback pour que le composant fonctionne même sans tokens globaux. ===================================================================== */ :root{ /* Rayons / arrondis génériques */ --ws-radius-soft: 24px; /* Largeurs / dimensions */ --ws-container-max: 1180px; /* Intensité du "brouillard" (blend) */ --ws-blend-opacity: 0.90; --ws-blend-blur: 14px; } /* ===================================================================== 1) MANUEL D’UTILISATION (GUTENBERG) ===================================================================== --------------------------------------------------------- ✅ STRUCTURE RECOMMANDÉE (HTML / Gutenberg) --------------------------------------------------------- OPTION A — Bloc "HTML personnalisé" (contrôle total) ---------------------------------------------------------
... titres, textes, boutons, etc. ...
OPTION B — Full Gutenberg (Group + Group + Group) --------------------------------------------------------- 1) Group (section) : classe ws-integrated-photo 2) Group (grid) : classe ws-integrated-photo__grid 3) Group (content) : classe ws-integrated-photo__content 4) Group (media) : classe ws-integrated-photo__media + classes optionnelles : - is-left - is-right - is-fade-both - is-fade-both-soft - is-fade-both-strong Les variables CSS peuvent être ajoutées : - via style inline dans un bloc HTML - via "Avancé" > CSS additionnel / classe selon votre setup - via le CSS du thème --------------------------------------------------------- ✅ CLASSES À POSER --------------------------------------------------------- Section : ws-integrated-photo Grid : ws-integrated-photo__grid Content : ws-integrated-photo__content Media : ws-integrated-photo__media Classes optionnelles sur le media : - is-left → place la photo à gauche - is-right → place la photo à droite (défaut explicite) - is-fade-both → fondu à gauche + droite - is-fade-both-soft → fondu bilatéral plus doux - is-fade-both-strong → fondu bilatéral plus fort --------------------------------------------------------- ✅ LOGIQUE DES CLASSES --------------------------------------------------------- - is-left / is-right = placement dans la grid - is-fade-both* = style du fondu visuel Exemples valides : - ws-integrated-photo__media is-right - ws-integrated-photo__media is-left is-fade-both - ws-integrated-photo__media is-right is-fade-both-soft À éviter : - cumuler is-left et is-right sur le même élément --------------------------------------------------------- ⚠️ PRÉREQUIS IMPORTANTS --------------------------------------------------------- - La section (ws-integrated-photo) doit avoir un vrai contexte de fond derrière si vous voulez voir l’intégration visuelle. - Le media (ws-integrated-photo__media) doit être une surface visuelle dédiée à l’image, idéalement vide. - Pour un rendu stable et performant : utiliser des images WebP optimisées, surtout pour les hero/slices. ===================================================================== */ /* ===================================================================== 2) SECTION (contexte) --------------------------------------------------------------------- - On ne force pas de background ici - On fournit seulement un contexte stable pour les masks / overlays ===================================================================== */ .ws-integrated-photo{ position: relative; overflow: hidden; } /* ===================================================================== 3) GRID / LAYOUT --------------------------------------------------------------------- 2 colonnes : contenu + photo - Largeur media configurable via --ws-media-width - Gap responsive via clamp - 1 colonne sur mobile ===================================================================== */ .ws-integrated-photo__grid{ --ws-media-width: 40%; --ws-grid-gap: clamp(18px, 3vw, 44px); display: grid; grid-template-columns: 1fr var(--ws-media-width); gap: var(--ws-grid-gap); align-items: center; max-width: var(--ws-container-max); margin: 0 auto; } .ws-integrated-photo__content{ position: relative; z-index: 2; } @media (max-width: 1200px){ .ws-integrated-photo__grid{ grid-template-columns: 1fr; } } /* ===================================================================== 4) MEDIA (surface photo) + FONDU PAR CÔTÉ --------------------------------------------------------------------- Variables principales : - --ws-photo-url - --ws-photo-focus - --ws-photo-radius - --ws-fade-top / bottom / left / right - --ws-media-min-height ===================================================================== */ .ws-integrated-photo__media{ /* ---------------------------- Variables fallback ---------------------------- */ --ws-photo-url: none; --ws-photo-focus: 50% 50%; --ws-photo-radius: 0px; --ws-fade-top: 20px; --ws-fade-bottom: 20px; --ws-fade-left: 240px; --ws-fade-right: 20px; --ws-media-min-height: 0px; position: relative; z-index: 1; min-height: var(--ws-media-min-height); border-radius: var(--ws-photo-radius); background-image: var(--ws-photo-url); background-size: cover; background-position: var(--ws-photo-focus); background-repeat: no-repeat; box-shadow: none; overflow: visible; /* ---------------------------- MASK (fondu des bords) ---------------------------- */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ws-fade-top)), linear-gradient(to top, transparent 0, #000 var(--ws-fade-bottom)), linear-gradient(to right, transparent 0, #000 var(--ws-fade-left)), linear-gradient(to left, transparent 0, #000 var(--ws-fade-right)); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; -webkit-mask-composite: source-in, source-in, source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ws-fade-top)), linear-gradient(to top, transparent 0, #000 var(--ws-fade-bottom)), linear-gradient(to right, transparent 0, #000 var(--ws-fade-left)), linear-gradient(to left, transparent 0, #000 var(--ws-fade-right)); mask-repeat: no-repeat; mask-size: 100% 100%; mask-composite: intersect, intersect, intersect; } /* ===================================================================== 5) BLEND COLORIMÉTRIQUE (optionnel) --------------------------------------------------------------------- - Pour désactiver : --ws-blend-opacity: 0; - Modes possibles : soft-light / overlay / multiply / luminosity ===================================================================== */ .ws-integrated-photo__media::after{ content: ""; position: absolute; inset: -6%; pointer-events: none; z-index: 2; --ws-blend-mode: soft-light; background: radial-gradient(circle at 30% 30%, rgba(170,192,175,0.35), rgba(170,192,175,0) 60%), radial-gradient(circle at 70% 65%, rgba(243,196,182,0.30), rgba(243,196,182,0) 60%), radial-gradient(circle at 55% 15%, rgba(240,224,190,0.25), rgba(240,224,190,0) 55%); mix-blend-mode: var(--ws-blend-mode); filter: blur(var(--ws-blend-blur)); opacity: var(--ws-blend-opacity); -webkit-mask-image: inherit; -webkit-mask-size: inherit; -webkit-mask-repeat: inherit; mask-image: inherit; mask-size: inherit; mask-repeat: inherit; } /* ===================================================================== 6) CLASSES OPTIONNELLES DE FONDU --------------------------------------------------------------------- Presets prêts à l’emploi ===================================================================== */ /* --------------------------------------------------------- A) Fondu bilatéral standard --------------------------------------------------------- Usage :
Effet : - fondu à gauche ET à droite - garde les valeurs top/bottom existantes --------------------------------------------------------- */ .ws-integrated-photo__media.is-fade-both{ --ws-fade-left: 220px; --ws-fade-right: 220px; } /* --------------------------------------------------------- B) Fondu bilatéral doux --------------------------------------------------------- */ .ws-integrated-photo__media.is-fade-both-soft{ --ws-fade-left: 140px; --ws-fade-right: 140px; } /* --------------------------------------------------------- C) Fondu bilatéral fort --------------------------------------------------------- */ .ws-integrated-photo__media.is-fade-both-strong{ --ws-fade-left: 320px; --ws-fade-right: 320px; } /* ===================================================================== 7) GESTION DU CÔTÉ (left/right) --------------------------------------------------------------------- Par défaut : photo à droite Les classes ci-dessous servent surtout à expliciter l’intention dans Gutenberg / HTML. ===================================================================== */ @media (min-width: 901px){ /* Défaut explicite */ .ws-integrated-photo__media.is-right{ grid-column: 2; } /* Variante gauche */ .ws-integrated-photo__media.is-left{ grid-column: 1; } /* Variante grid pilotée par le parent */ .ws-integrated-photo__grid.is-photo-left{ grid-template-columns: var(--ws-media-width) 1fr; } } /* ===================================================================== 8) MODE MOBILE "PERF" (optionnel) --------------------------------------------------------------------- Usage : - ajouter ws-integrated-photo--perf sur la section - utile seulement si vous constatez un vrai coût de rendu mobile ===================================================================== */ /* @media (max-width: 900px){ .ws-integrated-photo.ws-integrated-photo--perf .ws-integrated-photo__media{ -webkit-mask-image: none !important; mask-image: none !important; } .ws-integrated-photo.ws-integrated-photo--perf .ws-integrated-photo__media::after{ opacity: 0.65; } } */ /* ===================================================================== 9) EXEMPLES D’IMPLÉMENTATION ===================================================================== --------------------------------------------------------- EXEMPLE 1 — Photo à droite, fondu classique côté interne ---------------------------------------------------------
--------------------------------------------------------- EXEMPLE 2 — Photo à gauche, fondu miroir ---------------------------------------------------------
--------------------------------------------------------- EXEMPLE 3 — Fondu gauche + droite via classe optionnelle ---------------------------------------------------------
--------------------------------------------------------- EXEMPLE 4 — Fondu bilatéral fort + blend plus visible ---------------------------------------------------------
===================================================================== */ /* ===================================================================== 10) MAINTENANCE & ASTUCES ===================================================================== ✅ Réglages rapides (par instance) --------------------------------- Sur .ws-integrated-photo__media : --ws-photo-url: url('...'); --ws-photo-focus: 60% 35%; --ws-fade-left: 280px; --ws-fade-right: 0px; --ws-fade-top: 80px; --ws-fade-bottom: 120px; --ws-media-min-height: 480px; ✅ Presets conseillés -------------------- 1) Photo à droite (intégration forte sur le bord gauche) --ws-fade-left: 260px à 340px; --ws-fade-right: 0px; 2) Photo à gauche (miroir) --ws-fade-left: 0px; --ws-fade-right: 260px à 340px; 3) Intégration douce --ws-fade-left/right: 120px à 180px; --ws-fade-top/bottom: 60px à 90px; 4) Intégration bilatérale Classe : - is-fade-both - is-fade-both-soft - is-fade-both-strong ✅ Blend -------- - Subtil : --ws-blend-mode: soft-light; --ws-blend-opacity: 0.7; - Plus visible : --ws-blend-mode: overlay; --ws-blend-opacity: 0.95; - Désactivé : --ws-blend-opacity: 0; ✅ Erreurs fréquentes -------------------- - “Je ne vois pas de différence quand je change les fades” → Vérifier qu’une autre classe ou variable inline ne surcharge pas vos valeurs. - “La photo ne se fond pas correctement” → Tester sur Chrome / Safari → Certains moteurs gèrent différemment mask-composite - “C’est trop bloc” → Augmenter le fade interne → Ajouter is-fade-both → Renforcer légèrement le blend ===================================================================== */