/* ===========================================================
CREART'S WEB — site.css
Auteur : Valérie Cheventner
Rôle : Surcharges propres pour Themify Ultra (+ Woo)
===========================================================
1. Reset & Helpers
2. Variables globales (:root)
3. Base & Typo (body, headings, links)
3.1 Texte manuscrit (Ephesis)
3.2 H1 blanc (.h1-blanc)
3.3 H1 sombre (.h1)
3.4 H2 (.h2)
3.5 H3 (.h3)
3.6 H4 (.h4)
3.7 Texte en majuscules / menus footer
3.8 ARCHIVE — titres (cartes / listes)
4. Layout (containers & grids) (à remplir ou supprimer du TOC)
4.1 Espaces sections padding 4em T/B/L/R
4.2 Espaces sections padding 4em top et bottom
4.3 Espaces sections padding T/B 0 ET L/R 4 à 2em
5. Composants
5.1 Boutons (styles)
5.2 Menu (cercles au hover + icônes header)
5.3 Footer (centrage contact)
5.4 Boutique (WooCommerce)
5.4.1 Cartes produits (archives)
5.4.2 Single product (titre, typo, boutons)
5.5 Breadcrumbs
5.6 Post filter (page archive Actualités)
5.7 Espace liste à puce
6. Effets & Animations
6.1 Effet glass
6.2 Parallax (classe .parallax-rwd)
7. Overrides & Fixes (Thème/Plugins)
7.1 Boutons Themify (spécificité/paddings/radius)
7.2 Effet glass — compatibilité éditeur
8. Responsive
8.1 Titres (H1–H4)
8.2 Section parallax — hauteur mobile/tablette (si tu veux conserver .section-parallax séparée, précise-le ici plutôt qu’en 6)
9. Utilitaires (icônes & couleurs)
9.1 Couleur des SVG / .icon-*
10.Print
===========================================================
*/
/* == 01) Reset & Helpers ================================ */
/* Applique la "boîte" CSS universelle
→ padding + border sont inclus dans width/height (plus prévisible) */
*, *::before, *::after {
box-sizing: border-box;
}
/* Images, SVG et vidéos :
- max-width:100% → ne débordent jamais de leur conteneur
- height:auto → gardent leur ratio
- display:block → supprime les petits espaces fantômes en inline */
img, svg, video {
max-width: 100%;
height: auto;
display: block;
}
/* ========================
2.VARIABLES
======================== */
:root{
/* --- Polices --- */
--ff-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--ff-hand: "Ephesis", cursive;
/* --- Couleurs primaires (identité principale) --- */
--c-primary: #9CBEBD; /* Vert */
--c-primary-light-30: rgba(156, 190, 189, 0.3); /* Vert pastel #9CBEBD à 30% d'opacité */
--c-primary-dark: #2f5e5d; /* Vert foncé (c-dark-green) */
/* --- Couleurs secondaires (rose d'accent) --- */
--c-secondary :#e5a3c2 ;/* Rose */
--c-secondary-40:rgba(229, 163, 194, 0.4); /* Rose #e5a3c2 à 40 % d’opacité */
/* --- Couleur accent (boutons, CTA, interactions) --- */
--c-accent:#701b46; /* prune */
--c-accent-hover: #ffffff; /* Survol (blanc) */
--c-border: #050505; /* Bordure noir */
/* --- Couleurs neutres --- */
--c-white: #ffffff; /* Blanc */
--c-black: #050505; /* Noir principal */
--c-heading: #111; /* Titres */
--c-text: #222; /* Texte standard */
/* --- Tailles de typo (clamp en em) --- */
--fs-h1: clamp(1.875rem, 1.5rem + 3.5vw, 4rem); /* H1 : mobile ≈30→35px, pente plus forte (3.5vw) jusqu’à 64px max (4rem) sur grand écran */
--fs-h2: clamp(1.25em, 1em + 1.6vw, 2.1875em); /* min 20px | 375px = 22px | max 35px */
--fs-h3: clamp(1em, 1em + 0.533vw, 1.625em); /* min 16px | 375px ≈ 18px | max 26px */
--fs-h4: clamp(0.9375em, 0.9em + 0.25vw, 1.375em); /* H4 : min ≈15px | mobile 16px | max ≈22px */
--fs-body: clamp(1em, 0.95em + 0.35vw, 1.125em); /* min 16px | 375px ≈ 17.3px | max 18px */
--fs-typo-hand: clamp(3em, 1.2em + 4vw, 7em); /* min 32px | 375px ≈ 34px | max 64px */
--fs-body-sp: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);/* min ≈15px | ~16px autour de 768px | max ≈17px */
/*--- Tailles compactes pour articles / archives */
--fs-article-h1: clamp(1.5rem, 1.1rem + 2.2vw, 2.5rem); /* ~24→40px */
--fs-article-h2: clamp(1.125rem, 1rem + 1.2vw, 1.55rem); /* ~18→25px */
--fs-article-h3: clamp(1rem, 0.95rem + 0.6vw, 1.25rem); /* ~16→20px */
/* ---Transformation de texte (uppercase, capitalise) --- */
--tt-uppercase:uppercase;
--tt-capitalize:capitalize;
/* --- Interlignes --- */
--lh-tight:1.2; /* titres serrés */
--lh-normal:1.4; /* texte compact */
--lh-loose:1.6; /* paragraphes lisibles */
/* --- Poids --- */
--w-200:200;
--w-300:300;
--w-400:400;
--w-500:500;
--w-600:600;
/* --- Espacement lettres --- */
--ls-1:1px;
/* --- Radius --- */
--br-small: 5px;
--br-medium: 10px;
--br-pill: 999px;
/* --- Espacements --- */
--sp-1: 5px;
--sp-2: 10px;
--sp-3: 20px;
/* --- Spacing sections (desktop + tab paysage) --- */
--sec-pad-block: 4em; /* padding-top:4em; padding-bottom:4em; */
--sec-pad-inline: clamp(2em, calc(2em + (100vw - 64rem) / 13), 4em); /* padding left/right : 2em→4em */
--sec-mt: 4em; /* margin-top */
--sec-mb: clamp(0em, -1em + 6vw, 4em); /* margin-bottom : 0→4em */
--sec-pad-block-0: 0; /* top/bottom = 0 */
--sec-pad-inline-tight: clamp(1em, calc(1em + (100vw - 64rem)/13), 4em); /* left/right : 1em → 4em */
/* --- Paramétrage des variable pour l'effet cercle sur le Menu --- */
--menu-circle-color: var(--c-main-green);
--menu-small-d: 30px;
--menu-large-d: 45px;
--menu-small-w: 4px;
--menu-large-w: 2px;
--menu-anim: .35s cubic-bezier(.2,.7,.3,1);
/* --- Paramétrage des variables pour les Produits d'archives --- */
--card-gap: var(--sp-3); /* espace entre cartes */
--card-padding: var(--sp-2); /* padding interne */
--card-radius: var(--br-small); /* arrondi des cartes */
--card-ratio: 4 / 3; /* ratio image (1/1 pour carré, 3/2, 16/9…) */
--product-title-lines: 2; /* nb de lignes max pour le titre */
/* --- Hauteur du menu --- */
--header-h: 84px; /* à ajuster si besoin */
}
/* ========================================
3. BASE & TYPO (BODY, HEADINGS, LINKS)
====================================== */
/* ======================================
3.1 P.EPHESIS (texte manuscrit blanc)
====================================== */
/* Cas direct : */
p.typo-hand {
font-family: 'Ephesis', cursive !important;
font-size: var(--fs-typo-hand);
line-height: 0.95 !important;
letter-spacing: var(--ls-1) !important;
color: var(--c-white) !important;
font-weight: var(--w-500);
}
/* La classe est sur un conteneur qui contient le
*/
.typo-hand p {
font-family: var(--ff-hand);
font-size: var(--fs-typo-hand);
line-height: 1;
letter-spacing: var(--ls-1);
color: var(--c-white);
font-weight: var(--w-400);
}
/* Neutralise les spans/strong éventuels générés par Themify */
p.typo-hand * {
font-size: inherit;
line-height: inherit;
color: inherit;
}
/* ===========================================================
3.2. H1 blanc (module texte avec classe h1-blanc)
=========================================================== */
/* Cible le