/* ========================================================================= Bloc « Hero » — front + éditeur ------------------------------------------------------------------------- Repris de l'intégration HTML (03-DESIGN/Export). Relevés maquette (page de 1728 px) : photo x 325 → 1728, soit 81,2 % de large, calée à droite hauteur 505 px, rapport 2,78:1 bandeau jaune x 65 → 375, bas plat, haut montant vers la droite bandeau orange x 80 → 599, trois lignes, chacune avec son aplat ========================================================================= */ .cdp-hero { --cdp-jaune: var( --wp--preset--color--jaune, #FFDF44 ); --cdp-orange: var( --wp--preset--color--orange, #EB5C37 ); --cdp-violet: var( --wp--preset--color--violet, #502D87 ); --cdp-blanc: var( --wp--preset--color--blanc, #FFFFFF ); /* Variante foncée : le vert de marque sur jaune ne monte qu'à 2,92:1, sous le seuil RGAA de 3:1 pour un texte de cette taille. */ --cdp-vert: var( --wp--preset--color--vert-fonce, #007D34 ); --cdp-fs-titre: var( --wp--preset--font-size--titre-1, 5rem ); --cdp-font-titre: var( --wp--preset--font-family--acumin-condensed, "acumin-pro-extra-condensed", "Arial Narrow", sans-serif ); /* Retrait gauche de la photo. La maquette pose 18,8 % ; les autres déclinaisons fournies descendent vers 9 %. Une seule valeur à changer. */ --cdp-hero-retrait: 18.8%; --cdp-gouttiere: clamp( 1.25rem, 0.85rem + 1.75vw, 3.25rem ); position: relative; margin-right: 30px!important; } /* --- Photo ---------------------------------------------------------------- */ .cdp-hero__media { margin-left: auto; width: calc( 100% - var( --cdp-hero-retrait ) ); } .cdp-hero__media img { display: block; width: 100%; height: 100%; aspect-ratio: 1403 / 505; object-fit: cover; } /* --- Titre ---------------------------------------------------------------- */ .cdp-hero__titre { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); z-index: 2; width: max-content; margin: 0 0 0 20px; font-family: var(--cdp-font-titre); font-size: var(--cdp-fs-titre); font-weight: 800; line-height: 1.18; text-transform: uppercase; text-wrap: initial; display: flex; flex-direction: column; align-items: center; } .cdp-hero__bandeau { display: block; } /* Chaque bandeau est légèrement désaxé, comme sur la maquette. */ .cdp-hero__bandeau--haut { transform: rotate( -1.6deg ); transform-origin: left center; position: relative; z-index: 100; } .cdp-hero__bandeau--bas { transform: rotate( 0.8deg ); transform-origin: left center; margin-top: -15px; margin-left:10px; } /* box-decoration-break: clone — l'aplat épouse chaque ligne de texte plutôt que le bloc entier. C'est ce qui produit l'escalier de la maquette, et cela tient quel que soit le texte saisi dans l'éditeur : c'est pourquoi ces bandeaux ne sont pas découpés en trapèzes comme les boutons. */ .cdp-hero__ligne { display: inline; padding: 0em 0.34em; -webkit-box-decoration-break: clone; box-decoration-break: clone; /* pre, et non pre-line : les retours saisis dans l'éditeur sont les SEULS points de coupure. Avec pre-line, le repli automatique s'ajoutait aux retours voulus et cassait une ligne trop longue en deux — « de restauration » se retrouvait sur deux lignes malgré la saisie. Choisi plutôt que des
injectés : le contenu reste du texte. */ white-space: pre; } /* Le bandeau jaune n'est pas un rectangle : son coin supérieur gauche est abaissé de 5 px et rentré de 3 px. Valeurs en pixels, pas en pourcentage : c'est un décalage constant, il ne doit pas grandir avec le bandeau. Le champ « ligne 1 » étant sur une seule ligne, le clip-path s'applique à un fragment unique — pas de conflit avec box-decoration-break. */ .cdp-hero__ligne--jaune { background: var( --cdp-jaune ); clip-path: polygon( 5px 7px, 100% 0, 100% 100%, 0 100% ); } .cdp-hero__ligne--orange { background: var( --cdp-orange ); color: var( --cdp-blanc ); } .cdp-hero__ligne--violet { color: var( --cdp-violet ); } .cdp-hero__ligne--vert { color: var( --cdp-vert ); } /* --- Message d'administration ---------------------------------------------- */ .cdp-hero__vide { margin: 0; padding: 1rem var( --cdp-gouttiere ); font-size: var( --wp--preset--font-size--petit, 1.125rem ); font-style: italic; } /* --- Sous 900 px : titre AVANT la photo, tout centré ---------------------- Ordre visuel inversé (le titre passe devant la bannière), bandeaux redressés — l'escalier de la maquette desktop est abandonné ici — et texte centré. La dernière ligne mord encore le haut de la photo. */ @media ( max-width: 900px ) { #wp--skip-link--target { margin-block-start: 0!important; } .cdp-hero { display: flex; flex-direction: column; align-items: center; margin-right: 0!important; } .cdp-hero__media { width: 100%; } .cdp-hero__media img { aspect-ratio: 4 / 3; } .cdp-hero__titre { order: -1; position: relative; z-index: 2; transform: none; max-width: none; width: 100%; margin: 1.5rem auto -2rem; text-align: center; left: 0; top: 0;; } /* Bandeaux redressés et recentrés : plus de rotation ni de décalage latéral sous 900 px. text-align: center (hérité du titre) suffit à centrer l'aplat, qui épouse le texte. */ .cdp-hero__bandeau--haut { transform: none; } .cdp-hero__bandeau--bas { transform: none; margin-top: 0px; margin-left: 0; } } /* --- Forme décorative ------------------------------------------------------ Option « Forme décorative » du bloc : une forme orange en bas à gauche de la bannière, qui mord légèrement la photo. Elle est posée DEVANT la photo (z-index 1) mais DERRIÈRE le titre (z-index 2), pour ne jamais passer sur le texte. Le tracé fourni déborde largement à gauche de son viewBox (jusqu'à x = −99) : le viewBox 0 0 220 304 le recoupe, exactement comme dans le fichier source. La forme est donc à fond perdu sur sa gauche par construction, rien à découper. --------------------------------------------------------------------------- */ .cdp-hero--decor { --cdp-decor-gauche: 10%; /* distance au bord gauche */ --cdp-decor-largeur: min( 12.7vw, 220px ); /* proportion maquette, plafonnée */ /* Négatif : la forme descend SOUS la bannière. Ce n'est pas un choix esthétique gratuit — le titre occupe toute la moitié gauche (boîte de 322 px de haut dans une bannière de 412) et le recouvrirait sinon. Le décor passe volontairement derrière le titre, pas devant : on ne pose pas d'aplat sur du texte. Il faut donc le sortir par le bas. */ --cdp-decor-bas: -120px; } .cdp-hero--decor::after { content: ""; position: absolute; left: var( --cdp-decor-gauche ); bottom: var( --cdp-decor-bas ); z-index: 1; width: var( --cdp-decor-largeur ); aspect-ratio: 220 / 304; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 304'%3E%3Cpath fill='%23EB5C37' d='M110.132 207.545C116.735 207.755 123.343 207.808 129.93 208.203C143.517 209.022 157.095 210.019 170.674 210.938C179.806 211.558 185.59 216.943 188.803 224.863C194.007 237.684 196.001 250.628 188.559 263.603C181.672 275.628 175.241 287.907 168.619 300.085C166.802 303.427 163.996 303.758 160.576 303.03C116.799 293.731 72.6584 286.709 28.0702 282.94C3.5531 280.867 -19.9473 285.183 -41.8242 297.38C-54.3521 304.371 -53.4922 304.847 -62.4766 293.603C-73.6432 279.631 -85.214 265.983 -96.7499 252.325C-99.874 248.624 -99.2521 245.43 -97.4149 241.307C-85.9529 215.586 -74.5492 189.84 -63.6268 163.885C-53.6576 140.166 -51.4249 114.937 -50.9164 89.5652C-50.5932 73.0269 -51.0008 56.4723 -51.3369 39.9272C-51.4649 33.6928 -49.8218 28.6544 -44.8644 24.5703C-39.6987 20.3096 -34.8259 15.6854 -29.9823 11.0488C-19.101 0.628238 -4.90139 1.49294 8.48681 0.00812488C10.2877 -0.193709 13.4297 3.45724 14.4911 5.94642C22.0994 23.8338 26.4507 42.4144 25.4699 62.0351C25.1459 68.5114 25.1201 74.9967 25.0586 81.4772C25.0362 84.5185 25.2687 87.5575 25.3809 90.5972C25.8528 90.7721 26.3247 90.9469 26.8032 91.1143C28.2091 89.3013 29.865 87.6279 30.9833 85.6421C42.8555 64.6064 54.8602 43.6471 66.2991 22.3772C69.6754 16.0927 73.9242 12.6639 80.9239 12.7555C91.3986 12.891 101.894 12.9118 112.359 13.4377C121.735 13.8996 128.483 19.6125 132.523 27.2725C137.274 36.2894 140.332 46.1885 144.2 55.6667C146.062 60.2297 144.64 63.6523 141.438 67.162C128.928 80.8769 116.628 94.7765 104.276 108.63C103.12 109.931 102.137 111.383 101.725 113.869C103.799 112.856 105.873 111.843 107.933 110.83C124.623 102.676 141.263 94.4116 158.027 86.4156C163.051 84.0135 168.368 82.1878 173.635 80.3581C179.414 78.3535 183.938 81.2346 187.17 85.4041C194.534 94.9318 201.561 104.736 208.404 114.645C211.423 119.027 214.111 123.756 216.172 128.653C222.821 144.421 219.309 159.876 213.643 174.996C212.822 177.19 209.858 179.564 207.509 180.057C185.188 184.743 162.742 188.827 140.431 193.562C132.4 195.267 124.573 198.042 116.832 200.84C114.139 201.815 112.007 204.334 109.622 206.14C109.795 206.61 109.967 207.081 110.139 207.552'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; } /* Sous 900 px le titre passe sous la photo : la forme n'a plus de marge gauche où se loger et viendrait sur le sujet. */ @media ( max-width: 900px ) { .cdp-hero--decor::after { display: none; } }