. Ce fichier fait le pont entre ce
balisage et la mise en forme définie dans dm.css.
Conséquence pratique : dans l'éditeur, on ne tape jamais de HTML.
On pose un bloc normal, on choisit un « style » dans la colonne de
droite, et l'apparence suit.
Les noms is-style-dm-… sont ceux déclarés dans functions.php.
===================================================================== */
/* ---------------------------------------------------------- LARGEURS */
/* On laisse WordPress gérer la colonne de contenu : 820 px pour le texte,
1280 px pour les blocs « large », pleine largeur pour les bandes.
ATTENTION : ne jamais remettre ici une règle du genre
« .entry-content > * { max-width: 100% } ». Elle annule la colonne de
contenu, et titres et paragraphes s'étalent sur toute la page pendant
que les blocs à largeur propre restent, eux, alignés ailleurs. */
.entry-content .alignwide { max-width: var(--max); }
.entry-content .alignfull { max-width: none; }
/* ======================================================== PARAGRAPHES */
/* Surtitre — le petit label au-dessus d'un titre de section */
p.is-style-dm-kicker {
font-family: var(--mono); font-size: .72rem; letter-spacing: .26em;
text-transform: uppercase; color: var(--dust);
display: flex; align-items: center; gap: 13px; margin-bottom: 22px;
}
p.is-style-dm-kicker::before {
content: ""; width: 42px; height: 3px; flex: none; background: var(--sunset);
}
/* Accroche — le paragraphe d'introduction */
p.is-style-dm-lead {
font-size: clamp(1.02rem, 1.2vw, 1.16rem); line-height: 1.7;
color: var(--ash); max-width: 60ch;
}
/* Manuscrit — une seule fois par page.
Le dégradé est appliqué au texte lui-même ; la largeur se réduit au
mot pour que le dégradé se déroule entièrement dessus et pas sur
toute la colonne. L'or reste la couleur de repli. */
p.is-style-dm-script {
font-family: var(--script); color: var(--gold);
font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1;
margin-bottom: 14px; width: fit-content; max-width: 100%;
/* Le manuscrit déborde de sa boîte : les jambages descendent et la
dernière lettre penche à droite. Sans ces marges intérieures, la
découpe du dégradé les rogne. */
padding: 0 .16em .12em 0;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
p.is-style-dm-script {
background: linear-gradient(90deg, #FFB03A 0%, #FF7A2F 40%, #FF4D5E 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
}
/* Mention — les petites lignes grises */
p.is-style-dm-note {
font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--dust);
}
/* ============================================================= TITRES */
h1.is-style-dm-display, h2.is-style-dm-display,
h3.is-style-dm-display, h4.is-style-dm-display {
font-family: var(--goth); font-weight: 700; line-height: .98;
color: var(--bone); text-wrap: balance;
}
/* ============================================================ BOUTONS */
/* WordPress met la classe sur l'enveloppe ; la mise en forme va sur le lien. */
.wp-block-button.is-style-dm-hot > .wp-block-button__link,
.wp-block-button.is-style-dm-line > .wp-block-button__link,
.wp-block-button.is-style-dm-ghost > .wp-block-button__link {
display: inline-flex; align-items: center; gap: 11px;
font-family: var(--cond); font-weight: 500; font-size: .92rem;
letter-spacing: .16em; text-transform: uppercase;
padding: 14px 28px; border-radius: 0; border: 1px solid var(--line-2);
color: var(--bone); background: transparent; transition: .22s;
}
.wp-block-button.is-style-dm-hot > .wp-block-button__link {
background: var(--sunset); border-color: transparent; color: #14090A;
font-weight: 600; box-shadow: 0 0 34px rgba(255,90,60,.32);
}
.wp-block-button.is-style-dm-hot > .wp-block-button__link:hover { filter: brightness(1.08); }
.wp-block-button.is-style-dm-line > .wp-block-button__link:hover {
background: var(--sunset); border-color: transparent; color: #14090A;
}
.wp-block-button.is-style-dm-ghost > .wp-block-button__link {
border-color: var(--line); color: var(--ash);
}
.wp-block-button.is-style-dm-ghost > .wp-block-button__link:hover { color: var(--bone); }
/* ============================================================ GROUPES */
/* Fiche — le conteneur des machines et des encarts */
.wp-block-group.is-style-dm-card {
background: var(--panel); border: 1px solid var(--line); padding: 22px;
position: relative; transition: border-color .22s, transform .22s;
}
.wp-block-group.is-style-dm-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
/* Bande sombre — enveloppe une section entière */
.wp-block-group.is-style-dm-band {
background: var(--night); position: relative; overflow: hidden;
padding-block: clamp(64px, 9vw, 124px); padding-inline: var(--gut);
}
.wp-block-group.is-style-dm-band::before {
content: ""; position: absolute; inset: -40% -10% auto -10%; height: 90%;
background: radial-gradient(60% 100% at 50% 0%, rgba(255,122,47,.16),
rgba(230,62,134,.08) 45%, transparent 72%);
pointer-events: none;
}
.wp-block-group.is-style-dm-band > * { position: relative; z-index: 1; }
/* Chiffre clé — deux paragraphes : le nombre, puis le libellé */
.wp-block-group.is-style-dm-stat {
border-top: 2px solid var(--orange); padding-top: 16px;
}
.wp-block-group.is-style-dm-stat > p { margin: 0; }
.wp-block-group.is-style-dm-stat > p:first-child {
font-family: var(--goth); font-weight: 700; line-height: 1; color: var(--bone);
font-size: clamp(2.4rem, 4.8vw, 3.8rem);
}
.wp-block-group.is-style-dm-stat > p:last-child {
font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--dust); margin-top: 12px;
}
/* Écusson — le petit cadre doré */
.wp-block-group.is-style-dm-stamp {
display: inline-block; border: 1px solid rgba(233,185,78,.55);
background: rgba(233,185,78,.05); box-shadow: inset 0 0 0 3px rgba(233,185,78,.12);
padding: 11px 18px; text-align: center;
}
.wp-block-group.is-style-dm-stamp > p { margin: 0; }
.wp-block-group.is-style-dm-stamp > p:first-child {
font-family: var(--mono); font-weight: 700; font-size: .7rem;
letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.wp-block-group.is-style-dm-stamp > p:last-child {
font-family: var(--mono); font-size: .58rem; letter-spacing: .24em;
text-transform: uppercase; color: var(--dust); margin-top: 3px;
}
/* ============================================================= LISTES */
ul.is-style-dm-tags {
display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0;
}
ul.is-style-dm-tags li {
font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--ash);
border: 1px solid var(--line); padding: 5px 10px;
}
/* Caractéristiques — « Libellé : valeur » sur deux colonnes */
ul.is-style-dm-specs {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px);
}
ul.is-style-dm-specs li {
display: flex; justify-content: space-between; gap: 16px;
padding: 11px 0; border-bottom: 1px solid var(--line);
font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--dust);
}
ul.is-style-dm-specs li strong {
color: var(--bone); font-weight: 500; text-align: right;
font-family: var(--sans); font-size: .95rem; letter-spacing: 0;
}
@media (max-width: 700px) { ul.is-style-dm-specs { grid-template-columns: 1fr; } }
/* =========================================================== CITATION */
.wp-block-quote.is-style-dm-pull {
border: 0; border-left: 3px solid var(--orange); padding: 0 0 0 24px; margin: 36px 0;
}
.wp-block-quote.is-style-dm-pull p {
font-family: var(--goth); font-weight: 500; line-height: 1.3; color: var(--bone);
font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 0;
}
.wp-block-quote.is-style-dm-pull cite {
display: block; margin-top: 14px; font-style: normal;
font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--dust);
}
/* ========================================================= SÉPARATEUR */
.wp-block-separator.is-style-dm-sunset {
border: 0; height: 3px; background: var(--sunset); opacity: 1;
max-width: none; margin: 44px 0;
}
/* ====================================== COLONNES ET GRILLES DE L'ÉDITEUR */
/* Les colonnes natives reprennent l'espacement du site. */
.wp-block-columns { gap: clamp(22px, 3.2vw, 44px); }
.wp-block-columns.is-style-dm-split { align-items: flex-start; }
/* Dans nos composants, WordPress ne doit pas rajouter ses marges. */
.is-style-dm-card > *:first-child,
.is-style-dm-band > *:first-child { margin-top: 0; }
.is-style-dm-card > *:last-child,
.is-style-dm-band > *:last-child { margin-bottom: 0; }
/* ============================================================= IMAGES */
/* Un bloc image vide affiche l'emplacement de dépôt dans l'éditeur :
c'est volontaire, on remplace par la vraie photo au clic. */
.wp-block-image.is-style-dm-shot img {
display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
border: 1px solid var(--line); filter: saturate(.92) contrast(1.04);
}
.wp-block-image.is-style-dm-plein img {
display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
border: 1px solid var(--line);
}
.wp-block-image figcaption {
font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--dust); margin-top: 10px;
}
/* ================================================ QUESTIONS DÉPLIABLES */
.wp-block-details.is-style-dm-faq {
border-bottom: 1px solid var(--line); padding: 0;
}
.wp-block-details.is-style-dm-faq > summary {
cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
font-family: var(--cond); font-weight: 500; font-size: 1.02rem;
letter-spacing: .04em; color: var(--bone);
}
.wp-block-details.is-style-dm-faq > summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-dm-faq > summary::after {
content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
font-family: var(--mono); color: var(--orange); font-size: 1.1rem;
}
.wp-block-details.is-style-dm-faq[open] > summary::after { content: "–"; }
.wp-block-details.is-style-dm-faq > p { padding-bottom: 20px; max-width: 68ch; margin-top: 0; }
/* ====================================== COLONNES « TITRE / TEXTE » */
/* Filet de séparation entre les lignes de parcours et d'étapes. */
.wp-block-columns.is-style-dm-split { align-items: flex-start; }
@media (max-width: 781px) {
.wp-block-columns.is-style-dm-split { gap: 10px; }
}
/* =====================================================================
CORRECTIFS DE MISE EN PAGE
---------------------------------------------------------------------
WordPress centre chaque bloc dans la colonne de contenu, et il le fait
en !important : impossible de simplement remettre la marge à zéro.
Deux conséquences visibles :
— un bloc plus étroit que la colonne se retrouvait décalé à droite ;
— l'écusson, qui se réduit à son contenu, se collait au bord de la
bande, très à gauche du reste.
La marge ci-dessous recalcule le bord gauche de la colonne de contenu
et cale l'élément dessus. Sur un écran étroit, le max() la ramène à 0.
===================================================================== */
.wp-block-group.is-style-dm-stamp {
display: block; width: fit-content; max-width: 100%;
}
.is-layout-constrained > .wp-block-group.is-style-dm-stamp,
.is-layout-constrained > p.is-style-dm-lead,
.is-layout-constrained > p.is-style-dm-script,
.has-global-padding > .alignfull > .wp-block-group.is-style-dm-stamp,
.has-global-padding > .alignfull > p.is-style-dm-lead,
.has-global-padding > .alignfull > p.is-style-dm-script {
margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 820px)) / 2)) !important;
margin-right: auto !important;
}
/* Dans une colonne, l'accroche garde sa largeur de lecture. */
.wp-block-column p.is-style-dm-lead { max-width: 60ch; margin-inline: 0; }
/* Les listes d'étiquettes et de caractéristiques restent à gauche. */
ul.is-style-dm-tags, ul.is-style-dm-specs { margin-inline: 0; }
/* =====================================================================
LE CADRE DE PAGE (en-tête, pied, titre automatique)
---------------------------------------------------------------------
Ces trois zones sont fabriquées par Blocksy, pas par ce thème, et
Blocksy arrive en clair par défaut. Les règles ci-dessous sont un
filet de sécurité : le réglage propre se fait dans
Apparence → Personnaliser. Le !important est nécessaire, Blocksy
écrivant ses couleurs en CSS dynamique après nous.
===================================================================== */
/* L'en-tête et le pied de page de Blocksy sont remplacés par les nôtres
(voir parties/entete.php et parties/pied.php). On masque les siens
plutôt que de tenter de les repeindre : c'est plus sûr d'une version
à l'autre, et ça évite dix réglages dans le personnalisateur. */
header#header, .ct-header, footer#footer, .ct-footer { display: none !important; }
/* L'en-tête collant doit passer sous la barre d'administration. */
.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { top: 46px; } }
/* Blocksy encadre le contenu ; nos bandes pleine largeur doivent en sortir. */
.ct-container, .ct-container-narrow, .ct-container-full,
#main-container, .site-main, article.page, article.type-page {
background: transparent; max-width: none; padding-left: 0; padding-right: 0;
}
.entry-content > .alignfull { margin-left: 0; margin-right: 0; width: 100%; }
/* Le bandeau de titre que Blocksy ajoute en haut de chaque page fait
doublon : nos pages portent déjà leur propre titre.
Le désactiver vraiment se fait dans Personnaliser → Pages. */
.hero-section, .page .entry-header, .single-machine .entry-header { display: none; }
/* Le corps de texte, que Blocksy tente aussi de définir.
La police se pose sur et se transmet par héritage. Surtout
pas sur chaque
: une règle aussi large écrasait nos propres
styles de bloc (le surtitre, le manuscrit, les mentions). */
html body { font-family: var(--sans); background-color: var(--void); }
/* Sur mobile, un surtitre sur plusieurs lignes : le filet doit se caler
sur la première ligne, pas au milieu du bloc. */
@media (max-width: 600px) {
p.is-style-dm-kicker { align-items: flex-start; }
p.is-style-dm-kicker::before { margin-top: .55em; }
}
/* =====================================================================
LA LISTE DES MACHINES ([dm_machines])
===================================================================== */
.dm-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(24px, 3vw, 38px); }
.dm-filtre {
font-family: var(--cond); font-weight: 500; font-size: .78rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--ash); background: transparent;
border: 1px solid var(--line); padding: 9px 16px; cursor: pointer; transition: .18s;
}
@media (hover: hover) { .dm-filtre:hover { border-color: var(--line-2); color: var(--bone); } }
.dm-filtre.is-on { border-color: var(--orange); color: var(--bone); background: rgba(255,122,47,.09); }
.dm-filtre:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dm-machines .card__photo { display: block; height: 100%; }
.dm-machines .card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-machines .card__vide { position: absolute; inset: 0; }
.dm-machines .card[hidden] { display: none; }
@media (max-width: 980px) { .dm-machines.g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dm-machines.g-3 { grid-template-columns: 1fr; } }
/* Bandeau du haut réduit à une seule phrase : elle se cale à droite. */
.topbar--seul .topbar__in { justify-content: flex-end; }
@media (max-width: 640px) { .topbar--seul .topbar__in { justify-content: center; } }
/* L'image mise en avant d'une machine, posée juste sous le titre. */
.dm-une { margin: clamp(22px, 3vw, 34px) 0; }
.dm-une img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }