/* ==========================================================================
GLOBAL — Styles NON-navbar, partages front-end + editeur.
Charge via wp_enqueue_style('cdp-global') ET add_editor_style().
Remplace les anciens blocs inline wp_head (cdp_global_inline_css /
cdp_cahier_layout_css) et l'ancien editor-style.css (supprime).
Pour le header + la navigation, voir header-nav.css / nav-responsive.css.
========================================================================== */
/* ==========================================================================
0. Neutralisation de l'ancienne animation d'apparition au scroll
========================================================================== */
/* (Voir cdp_disable_legacy_animations dans functions.php.) Le contenu reste
visible meme si la classe .cdp-animate-hidden est encore posee quelque part.
NB : on N'applique PAS `overflow-x:clip/hidden` sur -> ca casse le
header sticky et fait ressortir la marge de l'admin bar en espace blanc. */
.cdp-animate-hidden {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* ==========================================================================
0b. Modale d'inscription (CTA « Commencer le Chapitre » -> formulaire MailPoet)
Ouverte/fermee par assets/js/cdp-cta-popup.js. HTML sorti dans le footer
(fonction cdp_cta_modal). Aucun plugin de popup requis.
========================================================================== */
.cdp-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
/* Animation d'apparition : fade tres rapide (on n'utilise pas display:none
pour pouvoir transitionner l'opacite). */
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, visibility 0.15s ease;
}
.cdp-modal[aria-hidden="false"] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Leger mouvement de la boite a l'apparition (rapide) */
.cdp-modal__box {
transform: translateY(8px);
transition: transform 0.15s ease;
}
.cdp-modal[aria-hidden="false"] .cdp-modal__box {
transform: translateY(0);
}
.cdp-modal__overlay {
position: absolute;
inset: 0;
background: rgba(15, 12, 10, 0.55);
}
.cdp-modal__box {
position: relative;
z-index: 1;
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
background: var(--wp--preset--color--base, #EFE9DC);
border: 1px solid var(--wp--preset--color--contrast, #241A16);
border-radius: 16px;
box-shadow: 4px 6px 0px 0px var(--wp--preset--color--contrast, #241A16);
padding: 20px 40px;
}
/* Les images du formulaire restent dans la boite */
.cdp-modal__content img {
max-width: 100%;
height: auto;
}
/* Ecrans plus petits : moins de padding pour ne pas etouffer le contenu */
@media (max-width: 600px) {
.cdp-modal {
padding: 12px;
}
.cdp-modal__box {
padding: 16px 20px;
border-radius: 14px;
}
}
/* Desktop (>= 900px) : boite plus large pour la mise en page 2 colonnes
d'origine (image | texte, gerees nativement par MailPoet). */
@media (min-width: 900px) {
.cdp-modal__box {
max-width: 820px;
padding: 26px 44px;
}
}
/* Titre de la popup : MailPoet le reduit trop en mobile (18px) et le scope sur
#mailpoet_form_9 (specificite ID) -> on inclut l'ID pour le remonter a 36px. */
@media (max-width: 900px) {
.cdp-modal #mailpoet_form_9 .mailpoet-heading {
font-size: 36px !important;
line-height: 1.15 !important;
}
}
.cdp-modal__close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
font-size: 1.7rem;
line-height: 1;
cursor: pointer;
color: var(--wp--preset--color--contrast, #241A16);
border-radius: 50%;
transition: background 0.2s ease;
}
.cdp-modal__close:hover,
.cdp-modal__close:focus-visible {
background: rgba(0, 0, 0, 0.06);
}
/* Verrou de scroll pendant l'ouverture (overflow sur body, pas html -> ne casse
pas le sticky et ne fait pas sauter le scroll a la fermeture). */
body.cdp-modal-open {
overflow: hidden;
}
/* Le formulaire MailPoet (configure en "barre fixe") doit s'afficher en
formulaire normal a l'interieur de la modale : on annule le positionnement. */
.cdp-modal .mailpoet_form {
position: static !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
transform: none !important;
box-shadow: none !important;
animation: none !important;
}
/* Mise en page selon la taille :
- DESKTOP (>=900px) : on laisse les 2 colonnes natives MailPoet (image | texte).
- TABLETTE (600-899px) : une seule colonne, IMAGE EN HAUT.
- MOBILE (<600px) : une seule colonne, SANS image.
(NB : l'ID #mailpoet_form_9 est requis pour battre la specificite ID des styles
MailPoet ; a mettre a jour si le formulaire est recree, comme le shortcode.) */
/* TABLETTE : une colonne, image au-dessus */
@media (min-width: 600px) and (max-width: 899.98px) {
.cdp-modal .mailpoet_form_columns {
flex-direction: column !important;
gap: 14px !important;
}
.cdp-modal .mailpoet_form_column {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}
.cdp-modal #mailpoet_form_9 .mailpoet_form_image {
display: block !important;
}
.cdp-modal .mailpoet_form_column img {
display: block !important;
width: 100% !important;
max-width: 360px !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* MOBILE : une colonne, sans image */
@media (max-width: 599.98px) {
.cdp-modal .mailpoet_form_columns {
flex-direction: column !important;
gap: 12px !important;
}
.cdp-modal .mailpoet_form_column {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}
.cdp-modal #mailpoet_form_9 .mailpoet_form_image {
display: none !important;
}
}
/* Retire le padding du paragraphe-colonnes (demande) */
.cdp-modal .mailpoet_form_columns.mailpoet_paragraph {
padding: 0 !important;
}
.cdp-modal .mailpoet_form .mailpoet_form_close_icon {
display: none !important; /* on garde notre propre croix */
}
/* Resserrer les espacements internes du formulaire MailPoet : le titre avait
32px de marge haut ET bas, et les paragraphes 20px -> trop d'air vertical. */
.cdp-modal .mailpoet-heading {
margin-top: 2px !important;
margin-bottom: 8px !important;
line-height: 1.15 !important;
}
.cdp-modal .mailpoet_paragraph {
margin-bottom: 10px !important;
}
.cdp-modal .mailpoet_message {
margin-top: 8px !important;
}
/* Champ email -> bords arrondis comme le bouton + un peu d'air au-dessus
(separe le texte du formulaire) mais proche du bouton en dessous. */
.cdp-modal .mailpoet_form input[type="email"],
.cdp-modal .mailpoet_form input[type="text"] {
width: 100% !important;
box-sizing: border-box !important;
border: 2px solid var(--wp--preset--color--contrast, #241A16) !important;
border-radius: 100px !important;
padding: 13px 22px !important;
font-family: "Figtree", sans-serif !important;
font-size: 16px !important;
background: var(--wp--preset--color--paper, #FCFCFC) !important;
}
/* Plus d'espace entre le texte et le champ email (haut du "form") */
.cdp-modal .mailpoet_paragraph:has(input[type="email"]),
.cdp-modal .mailpoet_form_column:has(input[type="email"]) {
margin-top: 18px !important;
}
/* Bouton d'envoi MailPoet -> meme look que les CTA du site (neo-brutalism).
MailPoet sort des styles inline scopes sur #mailpoet_form_9, d'ou les !important. */
.cdp-modal .mailpoet_submit,
.cdp-modal .mailpoet_form p.mailpoet_submit {
text-align: center !important;
margin-top: 10px !important; /* proche du champ email */
}
.cdp-modal .mailpoet_form input.mailpoet_submit,
.cdp-modal .mailpoet_form input[type="submit"] {
display: inline-block !important;
width: auto !important;
background-color: var(--wp--preset--color--primary, #9B423E) !important;
color: var(--wp--preset--color--paper, #FCFCFC) !important;
border: 2px solid var(--wp--preset--color--contrast, #241A16) !important;
border-radius: 100px !important;
padding: 12px 28px !important;
font-family: "Figtree", sans-serif !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
cursor: pointer !important;
box-shadow: 2px 3px 0px 0px rgba(0, 0, 0, 1) !important;
/* Reflet "flair" (les n'acceptent pas ::before -> on anime un degrade
de fond par-dessus la couleur primaire). */
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 65%) !important;
background-repeat: no-repeat !important;
background-size: 220% 100% !important;
/* PAS de !important sur background-position : sinon l'animation du shine ne
peut pas le modifier (les declarations !important battent les animations). */
background-position: 150% 0;
transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out !important;
}
.cdp-modal .mailpoet_form input[type="submit"]:hover,
.cdp-modal .mailpoet_form input[type="submit"]:focus,
.cdp-modal .mailpoet_form input[type="submit"]:active {
transform: translate(2px, 3px) !important;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1) !important;
filter: brightness(0.95) !important; /* changement de couleur au survol */
animation: cdp_shine_input 0.6s ease-out !important; /* reflet qui balaie */
}
@keyframes cdp_shine_input {
0% { background-position: 150% 0; }
100% { background-position: -50% 0; }
}
/* ==========================================================================
1. Flux vertical : hero colle sous le header (pas de block-gap ni padding)
========================================================================== */
/* NB : scope au FRONT via `.wp-site-blocks` (absent de l'iframe de l'editeur).
Sans ca, `.is-root-container` = le conteneur de contenu de l'editeur, et cette
remise a zero ecraserait le block-gap (30px) entre TOUS les blocs en edition
(titre colle a l'image, etc.). */
.wp-site-blocks > * + *,
.wp-site-blocks .is-root-container > * + *,
main {
margin-block-start: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
main > .wp-block-group:first-child {
margin-top: 0 !important;
}
/* Accueil : pas d'espace entre la derniere section et le footer (le de
la front-page porte un padding-bottom var large). Le footer a son propre
padding haut, donc pas besoin de cet espace. */
body.home main {
padding-bottom: 0 !important;
}
/* ==========================================================================
2. Boutons "Neo-Brutalism" + effet de brillance
========================================================================== */
.wp-block-button,
.wp-block-navigation-item-button {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.wp-element-button {
box-shadow: 2px 3px 0px 0px rgba(0, 0, 0, 1) !important;
transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out !important;
position: relative !important;
overflow: hidden !important;
}
.wp-element-button:hover,
.wp-element-button:focus,
.wp-element-button:active {
transform: translate(2px, 3px) !important;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1) !important;
filter: brightness(0.95) !important;
}
/* The Flare / Shimmer Effect */
.wp-element-button::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0;
left: -150%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%) !important;
transform: skewX(-25deg) !important;
transition: none !important;
z-index: 1 !important;
}
.wp-element-button:hover::before {
animation: cdp_shine 0.6s ease-out forwards !important;
}
@keyframes cdp_shine {
100% { left: 150%; }
}
.wp-block-button__link::after,
.wp-element-button::after {
display: none !important;
}
/* ==========================================================================
3. Correctifs blocs
========================================================================== */
/* Fix bug natif Frost : images collees au bas de leur conteneur */
.wp-block-image img {
vertical-align: middle !important;
}
/* Arrondis d'images (rapatries depuis le CSS additionnel / Styles globaux) */
.wp-block-image.is-style-rounded img {
border-radius: 28px;
}
.wp-block-post-featured-image img {
border-radius: 18px;
}
/* Espacement des cartes d'articles (grille de la boucle de requete / blog) */
.wp-block-query .wp-block-post-template {
gap: 24px;
}
/* Personnalisation de la mise en gras (CTRL + B) */
strong, b {
font-weight: 800 !important; /* Ajustable : 600, 700, 800, 900 */
}
/* ==========================================================================
4. Bulles de citations (Quote Chips)
========================================================================== */
.cdp-quote-chip {
background-color: var(--wp--preset--color--paper, #FCFCFC) !important;
border: 1px solid var(--wp--preset--color--contrast, #241A16) !important;
border-radius: 16px !important;
box-shadow: 2px 3px 0px 0px var(--wp--preset--color--contrast, #241A16) !important;
padding: 12px 24px !important;
font-weight: 500 !important;
font-size: 1rem !important;
font-style: italic !important;
color: var(--wp--preset--color--contrast, #241A16) !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 5px !important;
}
.cdp-quote-chip::before {
content: "\201C" !important;
color: var(--wp--preset--color--primary, #9B423E) !important;
font-weight: 900 !important;
font-size: 1.8rem !important;
line-height: 1 !important;
position: relative !important;
top: 4px !important;
font-style: normal !important;
font-family: Arial, Helvetica, sans-serif !important;
}
/* ==========================================================================
5. Annotation manuscrite sur la photo (Gilles)
========================================================================== */
.cdp-photo-wrapper {
overflow: visible !important;
}
.cdp-annotation {
position: relative !important;
left: -40px !important; /* Decale sur la gauche de la photo */
z-index: 10 !important;
/* top/margin laisses libres pour reglage dans l'editeur */
}
/* ==========================================================================
6. Correctifs de mise en page globale (Gutenberg)
========================================================================== */
/* Supprime le padding par defaut de Gutenberg (front uniquement -> scope
`.wp-site-blocks`, absent de l'editeur, sinon ca ecraserait le padding de la
carte de contenu en edition). */
.wp-site-blocks .entry-content.has-global-padding,
.wp-site-blocks .wp-block-post-content.has-global-padding {
padding-right: 0 !important;
padding-left: 0 !important;
}
/* Empeche les blocs "Pleine largeur" de deborder a cause des marges negatives */
.entry-content.has-global-padding > .alignfull,
.wp-block-post-content.has-global-padding > .alignfull,
.alignfull {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* ==========================================================================
7. Utilitaire responsive (contenu)
========================================================================== */
@media (max-width: 782px) {
.cdp-pad-mobile-small {
padding-top: 40px !important;
padding-bottom: 40px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* ==========================================================================
8. Fond du site (structurel uniquement — la couleur/image se regle dans
Editeur > Styles). On force juste le comportement pour proteger le 4K.
========================================================================== */
body {
background-repeat: repeat-y !important;
background-position: center top !important;
background-size: 1920px auto !important;
}
/* ==========================================================================
9. Header sticky : offset quand la barre d'admin WordPress est visible
========================================================================== */
body.admin-bar header.wp-block-template-part,
body.admin-bar .is-position-sticky {
top: 32px !important;
}
@media screen and (max-width: 782px) {
body.admin-bar header.wp-block-template-part,
body.admin-bar .is-position-sticky {
top: 46px !important;
}
}
@media screen and (max-width: 600px) {
body.admin-bar header.wp-block-template-part,
body.admin-bar .is-position-sticky {
top: 0 !important; /* < 600px : la barre d'admin defile, on colle en haut */
}
}
/* ==========================================================================
10. Scroll horizontal parasite de la barre d'admin (utilisateurs connectes)
La barre #wpadminbar est en position:fixed -> elle echappe au clip
`body{overflow-x:hidden}` et, a certaines largeurs mobiles ou ses items ne
tiennent pas, elle deborde a droite (scroll horizontal). `overflow-x:clip`
coupe ce debordement SANS forcer overflow-y a auto (contrairement a hidden)
-> les menus deroulants de la barre restent visibles. N'affecte que le front
des utilisateurs connectes (les visiteurs n'ont pas la barre).
========================================================================== */
#wpadminbar {
overflow-x: clip;
}
/* ==========================================================================
11. Titres de contenu (pages / articles) : Figtree + taille reduite
-> DEPLACE dans assets/css/content-headings.css (2026-08-11).
L'ancienne regle vivait ici avec le garde `body:not(.home)` : OK sur le front
(body.home) mais KO dans l'editeur (pas de classe .home cote admin) -> les
titres de chapitre de l'accueil passaient en Figtree en edition. Desormais la
feuille content-headings.css est chargee UNIQUEMENT hors accueil (front
`! is_front_page()` + injection editeur scopee `cdp_content_headings_editor_canvas`),
donc plus besoin du garde et parite editeur/front garantie. Voir functions.php.
========================================================================== */
/* ==========================================================================
12. Cadre des lecteurs YouTube : coins arrondis seuls (sans ombre ni bordure).
L'interieur du player est un iframe cross-origin youtube.com -> NON stylable ;
on habille seulement le CADRE. Applique au WRAPPER (pas la ) pour ne PAS
rogner la legende (figcaption), qui reste sous le cadre.
========================================================================== */
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper {
border-radius: 20px;
overflow: hidden; /* clippe les coins carres de l'iframe */
}
/* ==========================================================================
13. Bouton Discord (pilule : contour + ombre blurple #5865F2, symbole a gauche).
Classe additionnelle a AJOUTER sur un bloc Bouton (en plus de is-style-fill) :
-> Reglages du bouton > Avance > « Classe(s) CSS additionnelle(s) » : cdp-btn-discord
La classe se pose sur le wrapper .wp-block-button ; on stylise le lien interne.
Le symbole Discord est deja blurple dans le PNG (malgre son nom « White ») -> on
l'affiche tel quel (aucune recoloration). Contour + ombre portee decalee
(neo-brutalism) en #5865F2 ; `!important` sur box-shadow pour battre l'ombre noire
par defaut des boutons du theme, et `background` en shorthand !important sur le
::before pour battre le degrade que le theme pose sur ::before. URL image racine-
relative (portable). Taille pilotee par la font-size du bouton (reglable editeur).
========================================================================== */
.cdp-btn-discord .wp-block-button__link {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.6em;
background-color: var(--wp--preset--color--paper, #FAF8F4) !important;
color: var(--wp--preset--color--contrast, #241A16) !important;
border: 2px solid var(--wp--preset--color--contrast, #241A16) !important;
border-radius: 100px !important;
box-shadow: 3px 4px 0 0 var(--wp--preset--color--contrast, #241A16) !important;
padding: 0.55em 1.3em !important;
font-weight: 600 !important;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Le theme anime un degrade oblique (halo/sweep) sur ::before au survol -> on le
neutralise ici (animation parasite) et on libere ::before. */
.cdp-btn-discord .wp-block-button__link::before {
display: none !important;
}
/* Symbole Discord (deja blurple dans le PNG) affiche tel quel via ::after, ramene
a gauche du texte par order:-1. Ratio ~24/19. */
.cdp-btn-discord .wp-block-button__link::after {
content: "" !important;
/* Le theme force display:none sur le ::after des boutons -> on le reactive. */
display: block !important;
order: -1;
flex: 0 0 auto;
width: 1.5em;
height: 1.2em;
background: url("/wp-content/uploads/2026/08/DISCORD-BLACK.png") center / contain no-repeat !important;
}
/* Enfoncement au survol (coherent avec les boutons neo-brutalism du site). */
.cdp-btn-discord .wp-block-button__link:hover,
.cdp-btn-discord .wp-block-button__link:focus-visible {
transform: translate(1px, 2px);
box-shadow: 1px 2px 0 0 var(--wp--preset--color--contrast, #241A16) !important;
}