/* Theme Name: Azur 3D Theme URI: https://azur3d.com Author: Azur 3D Description: Thème bloc sur mesure pour Azur 3D — créations artisanales façonnées sur la Côte d'Azur. Palette Riviera, mondes chromatiques par collection saisonnière, séparateurs en vagues, typographie auto-hébergée. Version: 2.1.5 Requires at least: 6.6 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: azur3d Tags: block-theme, e-commerce, full-site-editing, custom-colors, accessibility-ready, translation-ready */ /* ------------------------------------------------------------- 1. Mondes chromatiques par collection La marque reste turquoise ; chaque collection pose son accent. La classe est posée sur par functions.php. ------------------------------------------------------------- */ :root { --az-accent: #0E7E96; --az-accent-vif: #22B2CE; --az-accent-voile: #E4F6FA; --az-focus: #0E7E96; --az-vague-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 44c180 46 300-30 480-12s300 62 480 30 300-52 480-26v74H0z' fill='%23000'/%3E%3C/svg%3E"); --az-vague-douce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 30c240 40 480-24 720 0s480 36 720 4v46H0z' fill='%23000'/%3E%3C/svg%3E"); } body.collection-halloween { --az-accent: #B4520E; --az-accent-vif: #E8721C; --az-accent-voile: #FDF0E5; } body.collection-noel { --az-accent: #9E1E24; --az-accent-vif: #C1272D; --az-accent-voile: #FBECEC; } body.collection-riviera { --az-accent: #0E7E96; --az-accent-vif: #22B2CE; --az-accent-voile: #E4F6FA; } /* ------------------------------------------------------------- 2. Accessibilité — visible au clavier, invisible à la souris ------------------------------------------------------------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--az-focus); outline-offset: 2px; border-radius: 4px; } .az-saut-contenu { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 0.85rem 1.4rem; background: var(--wp--preset--color--encre); color: #fff; text-decoration: none; border-radius: 0 0 8px 0; } .az-saut-contenu:focus { left: 0; } /* ------------------------------------------------------------- 3. Séparateurs en vagues Un élément vide entre deux sections. La couleur est celle de la section qui suit ; le masque découpe la crête. Deux écritures cohabitent, et c'est voulu : — le bloc « Vague » du thème, dont la couleur vient de la palette de l'éditeur (`has-sable-background-color`) ; — l'ancien bloc HTML avec `az-vers-sable`, encore présent dans les pages écrites avant. Il continue de fonctionner à l'identique. ------------------------------------------------------------- */ .az-vague, .wp-block-azur3d-vague { display: block; /* `auto` et non `100%` : en pleine largeur, WordPress fait déborder le bloc au moyen de marges négatives. Une largeur figée à 100 % annule ce débordement et laisse une encoche blanche de chaque côté. */ width: auto; height: clamp(38px, 5.5vw, 86px); background-color: var(--az-vague-fond, var(--wp--preset--color--blanc)); -webkit-mask-image: var(--az-vague-forme); mask-image: var(--az-vague-forme); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; } /* La vague doit toucher la section qui la suit. La classe est doublée pour passer devant l'espacement que WordPress applique aux enfants d'une mise en page contrainte — sans `!important`, qui interdirait ensuite tout réglage manuel depuis l'éditeur. */ .az-vague.az-vague, .wp-block-azur3d-vague.wp-block-azur3d-vague { margin-block: 0; } .az-vague.est-douce { -webkit-mask-image: var(--az-vague-douce); mask-image: var(--az-vague-douce); } .az-vague.est-fine { height: clamp(22px, 3vw, 46px); } .az-vague.est-haute { height: clamp(56px, 8vw, 130px); } /* Renversée : la crête pointe vers le haut */ .az-vague.est-inversee { transform: scaleY(-1); } .az-vers-sable { --az-vague-fond: var(--wp--preset--color--sable); } .az-vers-lagon { --az-vague-fond: var(--wp--preset--color--lagon); } .az-vers-blanc { --az-vague-fond: var(--wp--preset--color--blanc); } .az-vers-abysse { --az-vague-fond: var(--wp--preset--color--abysse); } /* ------------------------------------------------------------- 4. En-tête ------------------------------------------------------------- */ .az-bandeau { background: var(--wp--preset--gradient--mer); color: #fff; text-align: center; font-size: 0.875rem; padding: 0.6rem 1rem; letter-spacing: 0.01em; overflow: hidden; } .az-bandeau a { color: var(--wp--preset--color--soleil); text-underline-offset: 3px; } /* Annonces défilantes. Le bandeau est une partie de modèle : chaque annonce est un paragraphe que l'on modifie dans l'éditeur de site, sans classe à retenir. Le CSS n'affiche que le message actif ; tant que le script n'a pas posé `est-anime`, c'est le premier qui reste visible. Le bandeau ne peut donc jamais se retrouver vide, script absent ou non. */ .az-bandeau-piste { position: relative; min-height: 1.4em; } /* Classe doublée : passe devant l'espacement que WordPress applique aux enfants d'un groupe, sans `!important`. */ .az-bandeau-piste.az-bandeau-piste > * { margin: 0; display: none; } .az-bandeau-piste > *:first-child { display: block; } .az-bandeau-piste.est-anime > * { display: none; } .az-bandeau-piste.est-anime > .est-actif { display: block; animation: az-bandeau-entre 0.5s ease both; } .az-bandeau strong { color: var(--wp--preset--color--soleil); font-weight: 600; } @keyframes az-bandeau-entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .az-bandeau-piste > * { animation: none; } } .az-entete { background: #fff; border-bottom: 1px solid var(--wp--preset--color--bordure); position: sticky; top: 0; z-index: 50; } .az-entete .wp-block-image img { height: clamp(38px, 4.4vw, 52px); width: auto; display: block; } /* Navigation : soulignement qui monte depuis le bas */ .az-entete .wp-block-navigation-item__content { position: relative; padding-bottom: 3px; text-decoration: none; font-weight: 500; } .az-entete .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--az-accent-vif); transform: scaleX(0); transform-origin: left; transition: transform 0.28s ease; } .az-entete .wp-block-navigation-item__content:hover::after, .az-entete .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); } /* Sélecteur de langue (TranslatePress). Le code court est inséré dans un bloc « shortcode », que WordPress enveloppe de paragraphes — dont des vides, qui gonflaient l'en-tête à 130 px de haut. On les neutralise. */ .az-entete .trp-shortcode-switcher__wrapper, .az-entete .trp-language-switcher { font-size: 0.85rem; line-height: 1; } .az-entete .trp-shortcode-switcher__wrapper p, .az-entete .trp-language-switcher p { margin: 0; line-height: 1; } .az-entete .trp-shortcode-switcher__wrapper p:empty, .az-entete .trp-language-switcher p:empty { display: none; } /* Le sélecteur flottant fait doublon avec celui de l'en-tête. À désactiver aussi côté réglages TranslatePress ; ce masquage est une ceinture, pas une bretelle. */ .trp-floating-switcher, #trp-floater-ls { display: none !important; } /* ------------------------------------------------------------- 5. Hero — le soleil se lève derrière le titre ------------------------------------------------------------- */ .az-hero { position: relative; overflow: hidden; background: var(--wp--preset--gradient--aube); } .az-hero::before { content: ""; position: absolute; top: -18%; right: -6%; width: min(46vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(248, 190, 40, 0.55) 0%, rgba(242, 160, 61, 0.24) 45%, rgba(242, 160, 61, 0) 70%); pointer-events: none; animation: az-respire 14s ease-in-out infinite; } @keyframes az-respire { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.07); opacity: 1; } } .az-hero > * { position: relative; z-index: 1; } /* Surtitre en pastille. Deux sélecteurs pour une seule apparence : `az-pastille` est la classe écrite à la main dans les pages d'origine, `is-style-pastille` celle que pose l'éditeur quand on choisit le style dans l'onglet Styles. Les deux doivent rendre pareil, sinon une page ancienne changerait d'aspect. */ .az-pastille, .is-style-pastille { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--az-accent-voile); color: var(--az-accent); margin: 0; } /* Mot souligné d'un coup de pinceau turquoise. `box-decoration-break: clone` est indispensable : sans lui, un passage qui court sur deux lignes reçoit un seul fond étalé en travers. */ .az-souligne { background-image: linear-gradient(transparent 62%, rgba(143, 220, 235, 0.7) 62%); background-repeat: no-repeat; background-size: 100% 100%; padding: 0 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ------------------------------------------------------------- 5 bis. Signature française Le tricolore ne tient pas dans le logo — la bande blanche du drapeau efface les lettres du milieu. Il vit donc ici, où il a la place d'être lu comme un drapeau et non comme une salissure. Couleurs officielles de la République française. ------------------------------------------------------------- */ :root { --az-bleu-fr: #000091; --az-rouge-fr: #E1000F; --az-drapeau: linear-gradient(to right, var(--az-bleu-fr) 0 33.34%, #FFFFFF 33.34% 66.67%, var(--az-rouge-fr) 66.67% 100%); } /* Pastille « Fabriqué en France » avec vrai drapeau */ .az-france, .is-style-france { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.42rem 1rem 0.42rem 0.52rem; border-radius: 999px; background: #fff; border: 1px solid var(--wp--preset--color--bordure); font-family: var(--wp--preset--font-family--titre); font-weight: 500; font-size: 0.9rem; line-height: 1.2; color: var(--wp--preset--color--encre); text-decoration: none; box-shadow: var(--wp--preset--shadow--carte); } .az-france::before, .is-style-france::before { content: ""; flex: none; width: 22px; height: 15px; border-radius: 2px; background: var(--az-drapeau); box-shadow: inset 0 0 0 1px rgba(10, 59, 71, 0.16); } .az-france.est-grande { font-size: 1.05rem; padding: 0.6rem 1.35rem 0.6rem 0.7rem; } .az-france.est-grande::before { width: 30px; height: 20px; } /* Liseré tricolore, pour coiffer une section ou une carte */ .az-lisere-fr, .is-style-lisere-fr { position: relative; } .az-lisere-fr::before, .is-style-lisere-fr::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--az-drapeau); } /* Drapeau seul, pour la bande de réassurance et les fiches produit */ .az-drapeau { display: inline-block; width: 26px; height: 17px; border-radius: 2px; background: var(--az-drapeau); box-shadow: inset 0 0 0 1px rgba(10, 59, 71, 0.16); vertical-align: -2px; } /* ------------------------------------------------------------- 5 ter. Page d'attente Remplace la page « Prochainement » de WooCommerce. Autonome : ni en-tête ni pied de page, puisque toute navigation mènerait à un site fermé. ------------------------------------------------------------- */ .az-attente { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; background: linear-gradient(165deg, #0B5B6E 0%, #0E7E96 52%, #22B2CE 100%); color: #fff; padding: clamp(2.5rem, 7vw, 5rem) 1.5rem clamp(7rem, 15vw, 13rem); margin: 0; } /* Le soleil, derrière le contenu */ .az-attente::before { content: ""; position: absolute; top: -12%; right: -8%; width: min(62vw, 700px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(248, 190, 40, 0.5) 0%, rgba(242, 160, 61, 0.22) 45%, rgba(242, 160, 61, 0) 70%); pointer-events: none; animation: az-respire 16s ease-in-out infinite; } /* La mer, en bas */ .az-attente::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 13vw, 170px); background-color: rgba(255, 255, 255, 0.14); -webkit-mask-image: var(--az-vague-forme); mask-image: var(--az-vague-forme); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; } .az-attente > * { position: relative; z-index: 1; max-width: 40rem; } .az-attente img { width: clamp(220px, 34vw, 330px); height: auto; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); display: block; } .az-attente h1 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.16; margin: 0 0 1rem; letter-spacing: -0.02em; } .az-attente p { color: #CFEFF6; font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.65; margin: 0 auto 0.9rem; } .az-attente .az-attente-signature { margin-top: clamp(2rem, 5vw, 3rem); font-family: var(--wp--preset--font-family--titre); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); } /* ------------------------------------------------------------- 6. Grille produits ------------------------------------------------------------- */ .wc-block-grid__product, .wp-block-post.product, .woocommerce ul.products li.product { position: relative; } .wc-block-grid__product-image img, .wp-block-woocommerce-product-image img, .woocommerce ul.products li.product img { border-radius: 16px; background: var(--wp--preset--color--sable); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease; } .wc-block-grid__product:hover .wc-block-grid__product-image img, .wp-block-post.product:hover .wp-block-woocommerce-product-image img, .woocommerce ul.products li.product:hover img { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--survol); } .wc-block-grid__product-title, .wp-block-post.product .wp-block-post-title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--titre); font-weight: 500; font-size: 1.0625rem !important; line-height: 1.3; letter-spacing: -0.01em; } .woocommerce ul.products li.product .price { font-family: var(--wp--preset--font-family--titre); font-weight: 700; color: var(--wp--preset--color--turquoise-profond); } /* ------------------------------------------------------------- 6 bis. Navigation par collection Produite par le code court [azur3d_collections] de l'extension. ------------------------------------------------------------- */ .az-collections { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem 1rem; margin: 0 0 var(--wp--preset--spacing--50); padding-bottom: 1.1rem; border-bottom: 1px solid var(--wp--preset--color--bordure); } .az-collections-titre { font-family: var(--wp--preset--font-family--titre); font-weight: 500; font-size: 0.95rem; color: var(--wp--preset--color--gris); margin-right: 0.3rem; } .az-collections-liste { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; margin: 0; padding: 0; } .az-collection-lien { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 1rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--bordure); background: #fff; font-family: var(--wp--preset--font-family--titre); font-weight: 500; font-size: 0.9rem; line-height: 1.2; color: var(--wp--preset--color--encre); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .az-collection-lien:hover { border-color: var(--az-accent-vif); color: var(--az-accent); text-decoration: none; } .az-collection-lien.est-actif { background: var(--az-accent); border-color: var(--az-accent); color: #fff; } .az-collection-nombre { font-size: 0.78rem; font-variant-numeric: tabular-nums; opacity: 0.65; } .az-collection-lien.est-actif .az-collection-nombre { opacity: 0.85; } /* Chaque collection colore sa propre pastille au survol */ .az-collection-lien.collection-halloween:hover { border-color: #E8721C; color: #B4520E; } .az-collection-lien.collection-noel:hover { border-color: #C1272D; color: #9E1E24; } /* ------------------------------------------------------------- 7. Réassurance — la bande qui répond aux objections d'achat ------------------------------------------------------------- */ .az-reassurance { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.75rem; padding: 2.75rem 0; } .az-reassurance > div { text-align: center; padding: 0 0.5rem; } .az-reassurance strong { display: block; font-family: var(--wp--preset--font-family--titre); font-weight: 500; font-size: 1.05rem; color: var(--wp--preset--color--encre); margin-bottom: 0.25rem; } .az-reassurance .az-drapeau { margin-bottom: 0.6rem; } /* Version en colonnes : mêmes styles, mais chaque texte est un bloc que l'on modifie en cliquant dessus dans l'éditeur. */ .az-reassurance-bloc, .is-style-arguments { padding: 2.75rem 0; } .az-reassurance-bloc .wp-block-column, .is-style-arguments .wp-block-column { text-align: center; } .az-reassurance-bloc h4, .is-style-arguments h4 { font-family: var(--wp--preset--font-family--titre); font-weight: 500; font-size: 1.05rem; color: var(--wp--preset--color--encre); margin: 0 0 0.3rem; } .az-reassurance-bloc p, .is-style-arguments p { font-size: 0.9rem; color: var(--wp--preset--color--gris); line-height: 1.55; margin: 0; } .az-reassurance-bloc .az-drapeau, .is-style-arguments .az-drapeau { margin-bottom: 0.6rem; } .az-reassurance span { font-size: 0.9rem; color: var(--wp--preset--color--gris); line-height: 1.55; } /* ------------------------------------------------------------- 8. Cartes de collection ------------------------------------------------------------- */ .az-carte-collection { display: block; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--wp--preset--shadow--carte); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease; text-decoration: none; color: inherit; height: 100%; } .az-carte-collection:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--survol); } .az-carte-collection img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--wp--preset--color--sable); } .az-carte-collection .az-carte-corps { padding: 1.25rem 1.35rem 1.5rem; } .az-carte-collection h3 { margin: 0 0 0.35rem; font-size: 1.35rem; } .az-carte-collection p { margin: 0; font-size: 0.925rem; color: var(--wp--preset--color--gris); line-height: 1.6; } .az-carte-collection .az-lien-fleche { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-family: var(--wp--preset--font-family--titre); font-weight: 500; color: var(--az-accent); } .az-carte-collection:hover .az-lien-fleche svg { transform: translateX(4px); } .az-lien-fleche svg { transition: transform 0.28s ease; } /* ------------------------------------------------------------- 9. Avertissement sécurité aimant — obligation à ne pas noyer ------------------------------------------------------------- */ .az-securite, .is-style-securite { border-left: 4px solid var(--wp--preset--color--ambre); background: #FEF6E7; padding: 1.1rem 1.35rem; font-size: 0.9rem; line-height: 1.65; color: #6B4A12; border-radius: 0 10px 10px 0; margin: 2rem 0; } .az-securite strong, .is-style-securite strong { color: #4A330A; } /* ------------------------------------------------------------- 10. Personnalisation prénom — champ sur la fiche produit ------------------------------------------------------------- */ .az-perso { border: 1px solid var(--wp--preset--color--bordure); border-radius: 14px; padding: 1.15rem 1.3rem; margin: 1.35rem 0; background: var(--wp--preset--color--sable); } .az-perso label { display: block; font-family: var(--wp--preset--font-family--titre); font-weight: 500; color: var(--wp--preset--color--encre); margin-bottom: 0.5rem; } .az-perso input[type="text"] { width: 100%; max-width: 22rem; padding: 0.75rem 0.95rem; border: 1px solid var(--wp--preset--color--bordure); border-radius: 9px; font-family: inherit; font-size: 1rem; background: #fff; } .az-perso input[type="text"]:focus { border-color: var(--az-accent-vif); } /* Aperçu du rendu gravé : le client voit ce qu'il recevra, accents retirés et casse appliquée. Ne jamais corriger en silence. */ .az-perso-apercu { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0.85rem 0 0; padding: 0.7rem 0.95rem; background: #fff; border: 1px dashed var(--wp--preset--color--bordure); border-radius: 9px; } .az-perso-apercu-intitule { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--gris); } .az-perso-apercu-valeur { font-family: var(--wp--preset--font-family--titre); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--wp--preset--color--turquoise-profond); word-break: break-word; } .az-perso-apercu-valeur:empty::before { content: attr(data-vide); font-weight: 400; font-size: 1rem; color: #A9BCC2; } .az-perso-alerte { display: block; margin-top: 0.55rem; padding: 0.55rem 0.8rem; border-radius: 8px; background: #FEF6E7; border-left: 3px solid var(--wp--preset--color--ambre); font-size: 0.85rem; line-height: 1.5; color: #6B4A12; } .az-perso-alerte[hidden] { display: none; } .az-perso .az-aide { display: block; margin-top: 0.55rem; font-size: 0.85rem; color: var(--wp--preset--color--gris); line-height: 1.55; } /* ------------------------------------------------------------- 11. Pied de page ------------------------------------------------------------- */ .az-pied { background: var(--wp--preset--color--abysse); color: #CFE7EC; } .az-pied a { color: #CFE7EC; text-decoration: none; } .az-pied a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .az-pied h2, .az-pied h3, .az-pied h4 { color: #fff; } .az-pied img { max-width: 190px; height: auto; } /* `is-style-no-bullet` est l'ancien nom, encore présent dans le pied de page ; `is-style-sans-puce` est celui proposé dans l'éditeur. */ .wp-block-list.is-style-no-bullet, .wp-block-list.is-style-sans-puce { list-style: none; padding-left: 0; } .wp-block-list.is-style-no-bullet li, .wp-block-list.is-style-sans-puce li { margin-bottom: 0.45rem; } /* ------------------------------------------------------------- 11 bis. Styles proposés dans l'onglet « Styles » des blocs Chacun est déclaré dans functions.php. L'intérêt est d'éviter d'écrire une classe dans le panneau « Avancé » : on clique. Les sélecteurs sont volontairement un cran plus précis que les styles globaux du thème, sinon ces derniers gagneraient. ------------------------------------------------------------- */ /* Chapô — le paragraphe d'introduction sous un titre */ p.is-style-chapo { font-size: clamp(1.125rem, 2.2vw, 1.35rem); line-height: 1.6; color: var(--wp--preset--color--gris); } /* Surtitre — le petit intitulé posé au-dessus d'un grand titre */ .wp-block-heading.is-style-surtitre, p.is-style-surtitre { font-family: var(--wp--preset--font-family--titre); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--az-accent); margin-bottom: 0.4rem; } /* Drapeau français au-dessus du texte, centré */ p.is-style-drapeau::before, .wp-block-heading.is-style-drapeau::before { content: ""; display: block; width: 26px; height: 17px; border-radius: 2px; background: var(--az-drapeau); box-shadow: inset 0 0 0 1px rgba(10, 59, 71, 0.16); margin: 0 auto 0.6rem; } /* Bouton secondaire, couleur soleil */ .wp-block-button.is-style-soleil > .wp-block-button__link { background-color: var(--wp--preset--color--soleil); color: var(--wp--preset--color--encre); } .wp-block-button.is-style-soleil > .wp-block-button__link:hover, .wp-block-button.is-style-soleil > .wp-block-button__link:focus { background-color: var(--wp--preset--color--ambre); color: var(--wp--preset--color--encre); } /* Images — coins adoucis, avec ou sans ombre portée */ .wp-block-image.is-style-arrondie img, .wp-block-image.is-style-flottante img { border-radius: 20px; } .wp-block-image.is-style-flottante img { box-shadow: var(--wp--preset--shadow--carte); } /* Avis client */ .wp-block-quote.is-style-avis { border: 0; margin: 0; padding: 1.6rem 1.8rem; border-radius: 18px; background: var(--wp--preset--color--sable); } .wp-block-quote.is-style-avis p { font-family: var(--wp--preset--font-family--texte); font-size: 1.02rem; line-height: 1.65; font-style: normal; } .wp-block-quote.is-style-avis cite { display: block; margin-top: 0.9rem; font-family: var(--wp--preset--font-family--titre); font-style: normal; font-size: 0.9rem; color: var(--wp--preset--color--gris); } /* Question fréquente — bloc « Détails » de WordPress */ .wp-block-details.is-style-question { background: #fff; border: 1px solid var(--wp--preset--color--bordure); border-radius: 14px; padding: 1rem 1.3rem; margin-bottom: 0.75rem; } .wp-block-details.is-style-question summary { font-family: var(--wp--preset--font-family--titre); font-weight: 500; font-size: 1.05rem; color: var(--wp--preset--color--encre); cursor: pointer; list-style-position: outside; } .wp-block-details.is-style-question[open] summary { margin-bottom: 0.75rem; } .wp-block-details.is-style-question p { font-size: 0.95rem; color: var(--wp--preset--color--gris); margin: 0 0 0.6rem; } /* ------------------------------------------------------------- 12. Apparition au défilement Le script n'ajoute la classe qu'une fois l'élément entré dans le cadre ; sans JavaScript, tout reste visible. ------------------------------------------------------------- */ /* Le masquage n'existe que si le script a posé `az-js` sur . Sans JavaScript, ou si le script échoue, tout reste visible. */ .az-js .az-apparait { opacity: 0; transform: translateY(20px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.3, 1); } .az-js .az-apparait.est-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .az-js .az-apparait { opacity: 1 !important; transform: none !important; transition: none !important; } .az-hero::before { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ------------------------------------------------------------- 13. Impression ------------------------------------------------------------- */ @media print { .az-entete, .az-pied, .az-bandeau, .az-vague, .wp-block-azur3d-vague { display: none; } .az-js .az-apparait { opacity: 1; transform: none; } }