/* ========================================================================= UCP — 04 · LA FICHE SÉJOUR DANS DIVI ------------------------------------------------------------------------- La fiche séjour est écrite par le thème (`woocommerce/content-single- product.php`) et habillée par 03-components.css. Elle n'a donc presque besoin de rien ici. Presque : Divi l'enferme dans le gabarit de blog qu'il réserve aux pages WooCommerce — colonne de 79 %, conteneur de 1080 px, listes à puces. Ce fichier desserre cet étau, et rien d'autre. C'est le seul endroit du projet, avec la section « surcharges Divi » de 02-base.css, où l'on a le droit de cibler `#left-area` ou `#main-content`. Aucun `!important`, aucun `display:none` sur du contenu. ========================================================================= */ /* ========================================================================= 1 · LIBÉRER LA PLEINE LARGEUR ------------------------------------------------------------------------- La couverture de la maquette occupe tout l'écran. Divi, lui, sert les pages WooCommerce dans : #main-content > .container (80 %, max 1080 px) > #content-area > #left-area (79 %) `functions.php` a déjà demandé la pleine largeur dans la langue de Divi (classes `et_no_sidebar` et `et_full_width_page` sur le ), ce qui règle la colonne latérale et la largeur de `#left-area`. Restent la largeur du conteneur et ses marges, que ces classes ne touchent pas. Tout est enfermé dans `body.single-product` : le catalogue et le reste du site gardent le gabarit réglé dans les Options du thème. ========================================================================= */ body.single-product #main-content { background-color: transparent; } body.single-product #main-content .container { width: 100%; max-width: none; padding: 0; } /* Divi réserve 58 px au-dessus du contenu. Sous une photo pleine hauteur, ces 58 px sont une bande blanche entre l'en-tête et la couverture. Le sélecteur recopie celui de Divi à l'identique — même spécificité, et c'est l'ordre de chargement qui tranche. */ body.single-product:not(.et-tb) #main-content .container, body.single-product:not(.et-tb-has-header) #main-content .container { padding-top: 0; } body.single-product #left-area { padding: 0; } /* Le filet vertical que Divi trace entre les deux colonnes n'a plus rien à séparer une fois la colonne latérale retirée. */ body.single-product #main-content .container::before { display: none; } /* ========================================================================= 2 · LES LISTES DES BLOCS DE FICHE ------------------------------------------------------------------------- Divi impose ses puces à toutes les listes de la colonne principale : #left-area ul { list-style: disc; padding: 0 0 23px 1em; line-height: 26px } Un id : la règle bat n'importe laquelle de nos classes. Sans les deux lignes ci-dessous, la liste d'atouts afficherait une puce ronde EN PLUS de sa flèche dorée, et le tableau « inclus / non inclus » sortirait à puces. On ne vise que nos propres blocs. Les listes que vous écrivez dans la description du séjour gardent leurs puces : c'est du texte courant, il doit se comporter comme du texte courant. ========================================================================= */ /* La liste d'atouts est un encadré crème : elle a besoin de son rembourrage, sur les quatre côtés. La version précédente n'annulait que `padding-left`. Or la règle de Divi est une écriture raccourcie, `padding: 0 0 23px 1em` : elle avait déjà remis le haut et la droite à zéro, et notre `.ucp-atouts { padding: 24px }`, qui ne pèse qu'une classe, ne pouvait rien contre un sélecteur à identifiant. La flèche dorée se retrouvait collée au bord gauche du cadre et le texte au bord droit, sans un pixel de marge, alors que le CSS du composant en demandait 24 partout. On croyait lire notre feuille, on lisait celle de Divi. D'où la règle : face à un raccourci, on répond par un raccourci. Annuler propriété par propriété laisse toujours passer ce qu'on n'avait pas vu. */ #left-area ul.ucp-atouts, #left-area .ucp-faq ul.ucp-atouts { list-style: none; padding: var(--ucp-card-pad); line-height: var(--ucp-lh-body); } /* Les colonnes « inclus / non inclus » portent déjà le rembourrage : la liste qu'elles contiennent doit rester à plat, sinon il se cumule. */ #left-area .ucp-inclus ul { list-style: none; padding: 0; line-height: var(--ucp-lh-body); } #left-area ul.ucp-atouts li, #left-area .ucp-inclus li { list-style: none; } /* ========================================================================= 3 · LES DEUX EMPLACEMENTS PHOTO ------------------------------------------------------------------------- La fiche en compte deux, distincts : « Galerie du séjour » et « Trophées réalisés ». Même mécanique pour les deux — un carrousel de trois vignettes par vue, déjà habillé par 03-components.css (`ucp-carousel`, `ucp-carousel-page`, `ucp-media-tile`). Il ne manque que le comportement de l'image à l'intérieur de la tuile. `
` porte une marge par défaut dans tous les navigateurs : sans la remise à zéro, les vignettes se décalent les unes des autres et la grille perd son alignement. ========================================================================= */ figure.ucp-media-tile { margin: 0; } .ucp-media-tile img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================================= 4 · LE CONTENU RÉDIGÉ DANS LA DESCRIPTION ------------------------------------------------------------------------- Une partie du séjour se tape dans la description du produit, en HTML libre : les titres, les paragraphes, les listes, les tableaux. Ce contenu-là n'a aucune classe `ucp-`, et il ne faut pas en exiger. Le rédacteur écrit un

, une