/* ========================================================================== Blondie-Nette : feuille de style principale (mobile first) Source : cadrage/charte-graphique-design-system.md On ne règle jamais une couleur ou une taille « à la main » : on passe par les variables. ========================================================================== */ /* 1. Variables (design tokens) ------------------------------------------- */ :root { /* Couleurs */ --vert-50: #EFFBF8; --vert-100: #D9F2EC; --vert-200: #B5E3D7; --vert-600: #2F7F6B; --vert-700: #246655; --vert-800: #194D40; --lagon-100: #D9EBF7; --lagon-500: #306F9C; --lagon-600: #265C82; --lagon-800: #163B55; --etincelle-200: #F7DDA1; --etincelle-400: #E9BB4E; --etincelle-800: #74550B; --gris-50: #F8FAFB; --gris-100: #EFF2F5; --gris-200: #DDE3E9; --gris-300: #C3CDD5; --gris-600: #4F6272; --gris-800: #2B4154; --gris-900: #1C2F40; --sauge: #A9CC8C; --blanc: #FFFFFF; /* Rôles */ --fond: var(--blanc); --texte: var(--gris-800); --texte-2: var(--gris-600); --lien: var(--vert-700); --focus: var(--lagon-500); /* Polices (fichiers déclarés dans theme.json, hébergés dans le thème) */ --police-logo: Pacifico, cursive; --police-titre: Quicksand, system-ui, sans-serif; --police-texte: Nunito, system-ui, sans-serif; /* Échelle typographique fluide : valeur mobile -> valeur laptop (cours « Échelle responsive ») */ --t-micro: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem); --t-caption: clamp(0.75rem, 0.71rem + 0.2vw, 0.875rem); --t-body-s: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --t-body-l: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); --t-title-xs: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem); --t-title-sm: clamp(1.5rem, 1.42rem + 0.4vw, 1.75rem); --t-title-md: clamp(1.875rem, 1.77rem + 0.5vw, 2.25rem); --t-title-lg: clamp(2.25rem, 2.0rem + 1.2vw, 3rem); --t-hero: clamp(2.625rem, 2.2rem + 2.2vw, 4rem); /* Espacements : 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem; /* Grille : marges 16 / 24 / 80, gouttières 16 / 16 / 24 */ --marge: 1rem; --gouttiere: 1rem; --conteneur: 80rem; /* 1280 px */ /* Arrondis */ --r-s: 8px; --r-m: 16px; --r-l: 24px; --r-pilule: 999px; /* Ombres (lumière venant d'en haut, teintées de bleu nuit) */ --ombre-1: 0 1px 2px rgb(28 47 64 / .08), 0 1px 3px rgb(28 47 64 / .10); --ombre-2: 0 2px 4px rgb(28 47 64 / .06), 0 4px 12px rgb(28 47 64 / .08); --ombre-3: 0 4px 8px rgb(28 47 64 / .06), 0 12px 24px rgb(28 47 64 / .10); --ombre-4: 0 12px 24px rgb(28 47 64 / .10), 0 24px 48px rgb(28 47 64 / .14); --cible: 44px; /* zone cliquable minimale */ --hauteur-entete: 64px; } @media (min-width: 48em) { :root { --marge: 1.5rem; } } @media (min-width: 80em) { :root { --marge: 5rem; --gouttiere: 1.5rem; } } /* 2. Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hauteur-entete) + var(--e-4)); } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police-texte); font-size: var(--t-body); line-height: 1.625; -webkit-font-smoothing: antialiased; } img, svg, video, iframe { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { margin: 0; font-family: var(--police-titre); font-weight: 700; line-height: 1.25; text-wrap: balance; } p, ul, ol, figure, blockquote { margin: 0; } p { max-width: 65ch; } a { color: var(--lien); text-underline-offset: 0.2em; } a:hover { color: var(--vert-800); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } button { font: inherit; color: inherit; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } .lecteur-seul, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lien-evitement { position: absolute; left: var(--e-4); top: -100px; z-index: 100; padding: var(--e-3) var(--e-4); background: var(--blanc); border-radius: var(--r-s); box-shadow: var(--ombre-3); } .lien-evitement:focus { top: var(--e-4); } .conteneur { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); } .contenu { padding-bottom: var(--e-8); } /* 3. Titres et textes ------------------------------------------------------ */ .titre-page { font-size: var(--t-title-lg); } .titre-section { font-size: var(--t-title-md); margin-bottom: var(--e-5); } .titre-bloc { font-size: var(--t-title-sm); font-family: var(--police-titre); font-weight: 700; line-height: 1.25; } .entete-page { padding-block: var(--e-6) var(--e-5); display: grid; gap: var(--e-3); } .entete-page__intro { color: var(--texte-2); } .vide { padding-block: var(--e-7); color: var(--texte-2); } .lien-fort { font-weight: 700; min-height: var(--cible); display: inline-flex; align-items: center; } .texte > * + * { margin-top: var(--e-4); } .texte h2 { font-size: var(--t-title-sm); margin-top: var(--e-7); } .texte h3 { font-size: var(--t-title-xs); margin-top: var(--e-6); } .texte ul, .texte ol { padding-left: 1.25em; } .texte li + li { margin-top: var(--e-2); } /* 4. Boutons (pyramide des actions) ---------------------------------------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 52px; padding: 0 var(--e-5); border: 2px solid transparent; border-radius: var(--r-pilule); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-body); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .15s; } .bouton .icone { width: 18px; height: 18px; } .bouton--principal { background: var(--vert-600); color: var(--blanc); box-shadow: var(--ombre-1); } .bouton--principal:hover { background: var(--vert-700); color: var(--blanc); box-shadow: var(--ombre-2); } .bouton--demo { background: var(--lagon-500); color: var(--blanc); box-shadow: var(--ombre-1); } .bouton--demo:hover { background: var(--lagon-600); color: var(--blanc); } .bouton--secondaire { border-color: var(--vert-600); color: var(--vert-700); background: var(--blanc); } .bouton--secondaire:hover { background: var(--vert-50); color: var(--vert-800); } .bouton:active { transform: translateY(1px); } .badge { position: absolute; top: var(--e-3); left: var(--e-3); padding: var(--e-1) var(--e-3); border-radius: var(--r-pilule); background: var(--etincelle-200); color: var(--gris-900); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-caption); } /* 5. En-tête et menu ------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96); box-shadow: 0 1px 0 var(--gris-100); } .entete__barre { min-height: var(--hauteur-entete); display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; } .logo { flex: none; text-decoration: none; color: var(--vert-700); display: inline-flex; align-items: center; min-height: var(--cible); } .logo img { max-height: 48px; width: auto; } .logo .marque { font-size: 1.4rem; } @media (min-width: 30em) { .logo .marque { font-size: 1.75rem; } } @media (min-width: 64em) { .logo .marque { font-size: 2rem; } } /* Logo en texte (parts/logo.php) : étincelle à gauche, branche en trait d'union, bulles à droite */ .marque { position: relative; display: inline-flex; align-items: baseline; margin: 0 .4em 0 .45em; font-family: var(--police-logo); line-height: 1.4; white-space: nowrap; } .marque svg { display: inline-block; } .marque__blondie { color: var(--gris-800); } .marque__nette { color: var(--vert-600); } .marque__etincelle { position: absolute; left: -.45em; top: .05em; width: .5em; height: .5em; fill: #E9B949; } .marque__branche { flex: none; width: .8em; height: .34em; margin: 0 .04em; transform: translateY(-.2em); } .marque__branche .tige { fill: none; stroke: #37957D; stroke-width: 3.4; stroke-linecap: round; } .marque__branche .f1 { fill: var(--sauge); } .marque__branche .f2 { fill: #51B89E; } .marque__bulles { position: absolute; right: -.35em; top: -.05em; width: .7em; height: .7em; fill: none; stroke: var(--lagon-500); stroke-width: 1.4; } .pied .marque__blondie { color: var(--blanc); } .pied .marque__nette { color: var(--vert-200); } .pied .marque__etincelle { fill: var(--etincelle-300, #F2CF7D); } .pied .marque__branche .tige, .pied .marque__branche .f2 { stroke: #86CBBA; } .pied .marque__branche .f2 { fill: #86CBBA; stroke: none; } .pied .marque__bulles { stroke: #83B4D8; } .entete__actions { display: flex; align-items: center; gap: var(--e-2); } .langues { list-style: none; padding: 0; display: flex; gap: var(--e-1); font-weight: 700; font-size: var(--t-body-s); text-transform: uppercase; } .langues a { display: inline-flex; align-items: center; min-height: var(--cible); padding-inline: var(--e-2); text-decoration: none; color: var(--texte-2); } .langues .current-lang a { color: var(--texte); text-decoration: underline; } .bouton-menu { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-4); border: 1.5px solid var(--gris-300); border-radius: var(--r-pilule); background: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-body-s); cursor: pointer; } .nav { flex-basis: 100%; display: none; padding: var(--e-2) 0 var(--e-5); border-top: 1px solid var(--gris-100); } .nav .langues { margin-top: var(--e-3); padding: var(--e-3) var(--e-4) 0; border-top: 1px solid var(--gris-100); font-size: var(--t-body); } .nav.est-ouvert { display: block; } .no-js .nav { display: block; } .no-js .bouton-menu { display: none; } .bouton-menu .icone:last-of-type, .bouton-menu[aria-expanded="true"] .icone:first-of-type { display: none; } .bouton-menu[aria-expanded="true"] .icone:last-of-type { display: block; } .nav__liste { list-style: none; padding: 0; display: grid; gap: var(--e-1); } .nav__liste a { display: flex; align-items: center; min-height: 52px; padding-inline: var(--e-4); border-radius: var(--r-m); text-decoration: none; color: var(--texte); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-body-l); } .nav__liste a:hover { background: var(--vert-50); } .nav__liste .current-menu-item > a, .nav__liste .current-menu-ancestor > a { background: var(--vert-100); color: var(--vert-800); } @media (min-width: 64em) { .entete__barre { flex-wrap: nowrap; } .bouton-menu { display: none; } .nav { display: flex; align-items: center; gap: var(--e-4); flex-basis: auto; padding: 0; border: 0; order: 1; margin-left: auto; } .nav .langues { margin: 0; padding: 0 0 0 var(--e-4); border: 0; border-left: 1px solid var(--gris-200); font-size: var(--t-body-s); } .entete__actions { order: 2; } .nav__liste { display: flex; gap: var(--e-1); } .nav__liste a { white-space: nowrap; min-height: var(--cible); font-size: var(--t-body); padding-inline: var(--e-3); border-radius: var(--r-pilule); } } /* 6. Fil d'Ariane et filtres ----------------------------------------------- */ .fil ol { list-style: none; padding: var(--e-3) 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); font-size: var(--t-body-s); color: var(--texte-2); } .fil li + li::before { content: "›"; margin-right: var(--e-2); } .fil a { color: var(--texte-2); } .filtres ul { list-style: none; padding: 0 0 var(--e-5); display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; } .filtre { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 var(--e-4); white-space: nowrap; border-radius: var(--r-pilule); background: var(--gris-100); color: var(--texte); text-decoration: none; font-weight: 700; font-size: var(--t-body-s); } .filtre:hover { background: var(--vert-100); color: var(--vert-800); } .filtre[aria-current="page"] { background: var(--vert-600); color: var(--blanc); } /* 7. Cartes ---------------------------------------------------------------- */ .grille-produits { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5) var(--gouttiere); } @media (min-width: 48em) { .grille-produits { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 80em) { .grille-produits { grid-template-columns: repeat(4, 1fr); } } .carte-produit { position: relative; display: grid; gap: var(--e-2); align-content: start; } .carte-produit__image { position: relative; aspect-ratio: 1; border-radius: var(--r-m); background: var(--vert-50); overflow: hidden; transition: box-shadow .2s; } .carte-produit__image img { width: 100%; height: 100%; object-fit: cover; } .carte-produit:hover .carte-produit__image { box-shadow: var(--ombre-3); } .carte-produit__titre { font-size: var(--t-body); } .carte-produit__titre a { color: var(--texte); text-decoration: none; } .carte-produit__titre a::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable */ .carte-produit__accroche { font-size: var(--t-body-s); color: var(--texte-2); } .carte-produit__prix { font-family: var(--police-titre); font-weight: 700; } .grille-articles { display: grid; gap: var(--e-6) var(--gouttiere); } @media (min-width: 48em) { .grille-articles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 80em) { .grille-articles { grid-template-columns: repeat(3, 1fr); } } .carte-article { position: relative; display: grid; gap: var(--e-2); align-content: start; } .carte-article__image { aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--lagon-100); } .carte-article__image img { width: 100%; height: 100%; object-fit: cover; } .carte-article__meta { font-size: var(--t-caption); color: var(--texte-2); } .carte-article__titre { font-size: var(--t-title-xs); } .carte-article__titre a { color: var(--texte); text-decoration: none; } .carte-article__titre a::after { content: ""; position: absolute; inset: 0; } .carte-article:hover .carte-article__titre a { color: var(--vert-700); } /* 8. Accueil --------------------------------------------------------------- */ .hero { background: var(--vert-100); padding-block: var(--e-7); } .hero__grille { display: grid; gap: var(--e-4); justify-items: start; } /* Avatar au trait fin, chignon haut et brin (anonymat) : remplace le fichier assets/img/avatar.svg pour en changer */ .avatar { display: block; flex: none; width: 96px; height: 96px; border-radius: 50%; background: var(--etincelle-200) url(../img/avatar.svg) center / cover no-repeat; } .avatar--grand { width: 128px; height: 128px; } .hero__titre { font-size: var(--t-hero); line-height: 1.1; max-width: 16ch; color: var(--vert-800); } .hero__intro { font-size: var(--t-body-l); color: var(--vert-800); } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-2); } .section { padding-top: var(--e-8); } .section__entete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); } .tuiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gouttiere); } @media (min-width: 48em) { .tuiles { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 80em) { .tuiles { grid-template-columns: repeat(6, 1fr); } } .tuile { display: flex; align-items: flex-end; min-height: 104px; padding: var(--e-4); border-radius: var(--r-m); background: var(--lagon-100); color: var(--lagon-800); font-family: var(--police-titre); font-weight: 700; text-decoration: none; transition: box-shadow .2s; } .tuiles li:nth-child(odd) .tuile { background: var(--vert-100); color: var(--vert-800); } .tuile:hover { box-shadow: var(--ombre-2); } .tuile--tous, .tuiles li .tuile--tous { background: var(--blanc); color: var(--vert-700); box-shadow: inset 0 0 0 2px var(--vert-200); } .encart { margin-top: var(--e-8); padding: var(--e-6) var(--e-5); border-radius: var(--r-l); display: grid; gap: var(--e-4); justify-items: start; } .encart--demo { background: var(--lagon-100); color: var(--lagon-800); } .encart--demo .bouton--secondaire { border-color: var(--lagon-500); color: var(--lagon-600); } .etapes { padding-left: 1.5em; display: grid; gap: var(--e-3); } .etapes li::marker { font-family: var(--police-titre); font-weight: 700; color: var(--vert-700); } /* 9. Fiche produit --------------------------------------------------------- */ .fiche { display: grid; gap: var(--e-6); } @media (min-width: 64em) { .fiche { grid-template-columns: 1fr 1fr; gap: var(--e-8); align-items: start; } } .fiche__photo { position: relative; aspect-ratio: 1; border-radius: var(--r-l); background: var(--vert-50); overflow: hidden; } .fiche__photo img { width: 100%; height: 100%; object-fit: cover; } .fiche__vignettes { list-style: none; padding: 0; margin-top: var(--e-3); display: flex; gap: var(--e-2); overflow-x: auto; } .fiche__vignettes img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-s); } .avant-apres { margin-top: var(--e-4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); } .avant-apres div { position: relative; } .avant-apres img { border-radius: var(--r-m); aspect-ratio: 1; object-fit: cover; } .avant-apres span { position: absolute; left: var(--e-2); bottom: var(--e-2); padding: 0 var(--e-2); border-radius: var(--r-pilule); background: var(--blanc); font-weight: 700; font-size: var(--t-caption); } .fiche__infos { display: grid; gap: var(--e-3); align-content: start; } .fiche__categorie { font-size: var(--t-body-s); font-weight: 700; justify-self: start; } .fiche__titre { font-size: var(--t-title-lg); } .fiche__meta { font-size: var(--t-body-s); color: var(--texte-2); } .fiche__prix { font-family: var(--police-titre); font-weight: 700; font-size: var(--t-title-md); } .fiche__prix span { font-family: var(--police-texte); font-weight: 400; font-size: var(--t-body-s); color: var(--texte-2); margin-left: var(--e-2); } .fiche__accroche { font-size: var(--t-body-l); } .fiche__points { padding-left: 1.25em; display: grid; gap: var(--e-1); } .fiche__points li::marker { color: var(--vert-600); } /* Bouton « Commander » : collé en bas de l'écran sur mobile (loi de Fitts), dans la page sur grand écran */ .barre-commande { position: fixed; inset: auto 0 0 0; z-index: 40; display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--marge) calc(var(--e-3) + env(safe-area-inset-bottom)); background: var(--blanc); box-shadow: var(--ombre-4); } .barre-commande .bouton { flex: 1; } .barre-commande__resume { display: grid; line-height: 1.3; max-width: 40%; } .barre-commande__nom { font-size: var(--t-caption); color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barre-commande__prix { font-family: var(--police-titre); font-weight: 700; font-size: var(--t-title-xs); } .single-produit .pied { padding-bottom: var(--e-9); } @media (min-width: 64em) { .barre-commande { position: static; padding: 0; margin-top: var(--e-3); box-shadow: none; background: none; } .barre-commande__resume { display: none; } .barre-commande .bouton { flex: 0 1 auto; } .single-produit .pied { padding-bottom: var(--e-7); } } .astuce { margin-top: var(--e-4); padding: var(--e-4); border-radius: var(--r-m); background: var(--etincelle-200); color: var(--gris-900); display: flex; gap: var(--e-3); align-items: flex-start; } .astuce .astuce__avatar { width: 48px; height: 48px; box-shadow: 0 0 0 3px var(--blanc); } .astuce__titre { font-family: var(--police-titre); font-weight: 700; } /* Onglets (sans JavaScript : tous les panneaux s'affichent l'un sous l'autre) */ .onglets { margin-top: var(--e-8); } .onglets__liste { display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--gris-200); } .onglets__liste [role="tab"] { flex: none; min-height: var(--cible); padding: 0 var(--e-4); border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; font-family: var(--police-titre); font-weight: 600; color: var(--texte-2); } .onglets__liste [role="tab"]:hover { color: var(--texte); } .onglets__liste [aria-selected="true"] { color: var(--vert-800); border-bottom-color: var(--vert-600); font-weight: 700; } .onglets__panneau { padding-block: var(--e-5); } .onglets__panneau + .onglets__panneau { border-top: 1px solid var(--gris-100); } .onglets.est-actif .onglets__panneau + .onglets__panneau { border-top: 0; } .onglets.est-actif .onglets__titre-secours { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .onglets__titre-secours { font-size: var(--t-title-xs); margin-bottom: var(--e-3); } .precautions { margin-top: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--r-s); background: var(--gris-50); } .liste-avis { list-style: none; padding: 0; display: grid; gap: var(--e-4); } .avis { padding: var(--e-4); border-radius: var(--r-m); background: var(--gris-50); display: grid; gap: var(--e-2); } .avis blockquote { margin: 0; } .avis__source { font-size: var(--t-caption); color: var(--texte-2); } .etoiles { color: var(--etincelle-800); letter-spacing: .1em; } .etoiles__vides { color: var(--gris-300); } .video iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-m); } .section-produits { padding-top: var(--e-7); } /* 10. Article, pages ------------------------------------------------------- */ .article, .page-simple { max-width: calc(45rem + 2 * var(--marge)); } .article__entete { padding-block: var(--e-6) var(--e-5); display: grid; gap: var(--e-3); } .article__meta { font-size: var(--t-body-s); color: var(--texte-2); } .article__image img { border-radius: var(--r-l); width: 100%; } .article__texte { margin-top: var(--e-6); font-size: var(--t-body-l); line-height: 1.65; } .signature { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--gris-100); display: flex; align-items: center; gap: var(--e-3); color: var(--texte-2); } .signature .astuce__avatar { width: 48px; height: 48px; } .page-simple .titre-page { padding-block: var(--e-6) var(--e-5); } .page-simple__entete { padding-block: var(--e-6) var(--e-5); display: grid; gap: var(--e-4); justify-items: start; } .page-simple__entete .titre-page { padding: 0; } .page-simple > .encart, .page-simple > section { margin-top: var(--e-7); } .nav-links { display: flex; justify-content: space-between; gap: var(--e-4); padding-top: var(--e-7); font-weight: 700; } .nav-links a { min-height: var(--cible); display: inline-flex; align-items: center; } /* 11. Pied de page --------------------------------------------------------- */ .pied { background: var(--gris-900); color: var(--gris-100); padding-block: var(--e-7); } .pied a { color: var(--blanc); } .pied__grille { display: grid; gap: var(--e-3); } .pied__nom { font-size: 1.75rem; } .pied__phrase { color: var(--gris-200); } .pied__clin { margin: 0; font-family: var(--police-logo); font-size: 1.05rem; line-height: 1.5; color: var(--gris-300); } .pied__liste { list-style: none; padding: 0; display: grid; gap: 0; } .pied__liste a { display: inline-flex; align-items: center; min-height: var(--cible); } .pied__micro { font-size: var(--t-micro); color: var(--gris-300); } @media (min-width: 48em) { .pied__liste { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); } } /* 12. Témoignages ---------------------------------------------------------- */ .temoignages { list-style: none; padding: 0; display: grid; gap: var(--gouttiere); } @media (min-width: 48em) { .temoignages { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 80em) { .temoignages { grid-template-columns: repeat(3, 1fr); } } .temoignage { padding: var(--e-5); border-radius: var(--r-m); background: var(--vert-50); display: grid; gap: var(--e-3); align-content: start; } .temoignage blockquote { margin: 0; font-size: var(--t-body-l); } .temoignage__qui { font-family: var(--police-titre); font-weight: 700; font-size: var(--t-body-s); color: var(--vert-800); } /* 13. Formulaires ---------------------------------------------------------- */ .formulaire { display: grid; gap: var(--e-5); } .formulaire fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .formulaire legend { padding: 0; } .etape { display: grid; gap: var(--e-5); } .etape > legend { margin-bottom: var(--e-4); } .etape > legend:focus { outline: none; } .formulaire__aide { font-size: var(--t-body-s); color: var(--texte-2); } .champs { display: grid; gap: var(--e-4) var(--gouttiere); } @media (min-width: 48em) { .champs { grid-template-columns: 1fr 1fr; } .champ--large { grid-column: 1 / -1; } } .champ { display: grid; gap: var(--e-1); max-width: none; } .champ label { font-weight: 700; font-size: var(--t-body-s); } .champ input, .champ select, .champ textarea { width: 100%; min-height: 52px; padding: var(--e-3) var(--e-4); border: 1.5px solid var(--gris-300); border-radius: var(--r-s); background: var(--blanc); font: inherit; color: var(--texte); } .champ textarea { min-height: 120px; resize: vertical; } .champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--vert-600); outline: 3px solid var(--vert-100); outline-offset: 0; } .champ--case { grid-template-columns: auto 1fr; align-items: start; gap: var(--e-3); } .champ--case input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; accent-color: var(--vert-600); } .champ--case label { font-weight: 400; font-size: var(--t-body); } .formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); } .bouton-texte { border: 0; background: none; padding: 0; cursor: pointer; color: var(--lien); text-decoration: underline; text-underline-offset: .2em; } .piege { position: absolute; left: -9999px; } .alerte { padding: var(--e-3) var(--e-4); border-radius: var(--r-s); background: #FDECEA; color: #8A1C12; font-weight: 700; margin-bottom: var(--e-4); } .confirmation { padding: var(--e-6) var(--e-5); border-radius: var(--r-l); background: var(--vert-100); color: var(--vert-800); display: grid; gap: var(--e-4); justify-items: start; } .contact-formulaire, .reservation { margin-top: var(--e-6); } .no-js [data-suivant], .no-js [data-precedent] { display: none; } /* 14. Réservation de démo -------------------------------------------------- */ .etapes-resa { list-style: none; padding: 0; margin-bottom: var(--e-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); counter-reset: etape; } .etapes-resa li { display: grid; gap: var(--e-2); font-size: var(--t-caption); font-weight: 700; color: var(--texte-2); } .etapes-resa span { height: 6px; border-radius: var(--r-pilule); background: var(--gris-200); } .etapes-resa .est-fait span { background: var(--vert-200); } .etapes-resa .est-actif { color: var(--vert-800); } .etapes-resa .est-actif span { background: var(--vert-600); } .calendrier { padding: var(--e-4); border-radius: var(--r-l); box-shadow: inset 0 0 0 1.5px var(--gris-200); } .calendrier__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e-3); } .calendrier__mois { font-size: var(--t-title-xs); } .calendrier__fleche { display: inline-grid; place-items: center; width: var(--cible); height: var(--cible); border-radius: 50%; color: var(--vert-700); box-shadow: inset 0 0 0 1.5px var(--gris-200); } .calendrier__fleche:hover { background: var(--vert-50); } .calendrier__fleche--suivant .icone { transform: scaleX(-1); } .calendrier__fleche.est-inactif { color: var(--gris-300); box-shadow: inset 0 0 0 1.5px var(--gris-100); } .calendrier__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--e-1); text-align: center; } .calendrier__nom { font-size: var(--t-caption); font-weight: 700; color: var(--texte-2); text-transform: capitalize; padding-bottom: var(--e-1); } .jour { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: var(--cible); max-height: 56px; margin-inline: auto; width: 100%; max-width: 56px; border-radius: 50%; font-weight: 700; } label.jour { background: var(--blanc); color: var(--vert-800); box-shadow: inset 0 0 0 1.5px var(--vert-200); cursor: pointer; transition: background-color .15s; } label.jour:hover { background: var(--vert-50); box-shadow: inset 0 0 0 2px var(--vert-600); } .jour input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } label.jour:has(input:checked) { background: var(--vert-800); color: var(--blanc); box-shadow: var(--ombre-2); } .jour:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .jour--pris { color: var(--gris-300); font-weight: 400; text-decoration: line-through; } .calendrier__legende { margin-top: var(--e-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-caption); color: var(--texte-2); } .pastille { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--vert-200); font-size: var(--t-micro); } .pastille--pris { box-shadow: none; color: var(--gris-300); text-decoration: line-through; margin-left: var(--e-3); } .moments { display: grid; gap: var(--e-2); } .moments legend { font-family: var(--police-titre); font-weight: 700; margin-bottom: var(--e-2); } @media (min-width: 30em) { .moments { grid-template-columns: 1fr 1fr; } .moments legend { grid-column: 1 / -1; } } .choix { position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 52px; padding: 0 var(--e-4); border-radius: var(--r-m); box-shadow: inset 0 0 0 1.5px var(--gris-300); font-weight: 700; cursor: pointer; } .choix input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--vert-600); } .choix:hover { background: var(--vert-50); } .choix:has(input:checked) { box-shadow: inset 0 0 0 2px var(--vert-600); background: var(--vert-50); color: var(--vert-800); } .choix:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .choix.est-inactif { color: var(--gris-300); box-shadow: inset 0 0 0 1.5px var(--gris-100); cursor: not-allowed; background: none; text-decoration: line-through; } .encart-info { padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: var(--gris-100); color: var(--texte); font-size: var(--t-body-s); max-width: none; } .rappel { padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: var(--etincelle-200); color: var(--gris-900); font-weight: 700; max-width: none; } .reservation__autre { margin-top: var(--e-5); } /* 15. Ajustements wireframes ------------------------------------------------ */ .retour { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--cible); font-size: var(--t-body-s); color: var(--texte-2); } .retour .icone { width: 16px; height: 16px; } .page-simple__entete:has(.retour) { padding-top: var(--e-3); } .moments legend { font-size: var(--t-body-l); } .choix.est-inactif input { opacity: .4; } /* Coups de cœur de l'accueil : en liste sur mobile (image à gauche), en grille sur grand écran */ .liste-produits { display: grid; gap: var(--e-4); } .carte-produit--ligne { grid-template-columns: 88px 1fr; align-items: center; gap: var(--e-4); } .carte-produit--ligne .carte-produit__texte { display: grid; gap: var(--e-1); } @media (min-width: 48em) { .liste-produits { grid-template-columns: repeat(3, 1fr); gap: var(--e-5) var(--gouttiere); } .carte-produit--ligne { grid-template-columns: 1fr; align-items: start; gap: var(--e-2); } } .carte-produit__texte { display: grid; gap: var(--e-2); } /* Conseils de l'accueil : le dernier article en grand, les suivants en titre seul */ .grille-articles--accueil { gap: var(--e-5) var(--gouttiere); } /* 16. Effets (idées design de Clarisse) -------------------------------------- Étincelles dessinées au trait, éclat pastel derrière les produits, surlignage façon marqueur, flèche dessinée, pastille « Nouveauté » en autocollant, feuillage. */ :root { --svg-etincelle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2337957D' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M16 3c1.5 8 4 10.5 12 12-8 1.5-10.5 4-12 12-1.5-8-4-10.5-12-12 8-1.5 10.5-4 12-12z'/%3E%3Cpath d='M32 24c.6 3.4 1.8 4.6 5 5.2-3.2.6-4.4 1.8-5 5.2-.6-3.4-1.8-4.6-5-5.2 3.2-.6 4.4-1.8 5-5.2z'/%3E%3C/svg%3E"); --svg-etincelle-or: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23E9B949'%3E%3Cpath d='M16 3c1.5 8 4 10.5 12 12-8 1.5-10.5 4-12 12-1.5-8-4-10.5-12-12 8-1.5 10.5-4 12-12z'/%3E%3Cpath d='M32 24c.6 3.4 1.8 4.6 5 5.2-3.2.6-4.4 1.8-5 5.2-.6-3.4-1.8-4.6-5-5.2 3.2-.6 4.4-1.8 5-5.2z'/%3E%3C/svg%3E"); --svg-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16' fill='none' stroke='%23246655' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9c10-3 22-4 41-1'/%3E%3Cpath d='M36 3l7 5-7 5'/%3E%3C/svg%3E"); --svg-feuillage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M10 112C40 80 70 50 112 12' fill='none' stroke='%2337957D' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M40 82c-4-16 2-28 16-34-1 15-6 27-16 34zM62 60c-2-15 5-26 19-30-2 14-8 24-19 30zM84 38c0-12 6-21 18-24-2 11-8 19-18 24z' fill='%23A9CC8C'/%3E%3Cpath d='M38 84c14 4 26 0 34-12-14-1-26 3-34 12zM60 62c14 3 25-1 32-12-13-1-24 3-32 12zM82 40c11 2 20-2 26-11-11-1-20 3-26 11z' fill='%2351B89E'/%3E%3C/svg%3E"); } /* Étincelles à côté des titres de section */ .titre-section::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .25em; vertical-align: -.05em; background: var(--svg-etincelle) center / contain no-repeat; } /* Éclat pastel derrière les produits (comme les visuels Prowin), qui change de couleur d'une carte à l'autre */ .carte-produit__image, .fiche__photo { --eclat-1: var(--vert-100); --eclat-2: var(--vert-50); background: radial-gradient(circle at 50% 55%, rgb(255 255 255 / .95) 0 22%, rgb(255 255 255 / 0) 48%), repeating-conic-gradient(from 4deg at 50% 55%, var(--eclat-1) 0 9deg, var(--eclat-2) 9deg 24deg); } .grille-produits > :nth-child(3n+2) .carte-produit__image, .liste-produits > :nth-child(3n+2) .carte-produit__image { --eclat-1: var(--lagon-100); --eclat-2: #EEF6FB; } .grille-produits > :nth-child(3n+3) .carte-produit__image, .liste-produits > :nth-child(3n+3) .carte-produit__image { --eclat-1: var(--etincelle-200); --eclat-2: #FCF3DC; } .carte-produit__image img, .fiche__photo img { position: relative; transition: transform .3s ease; } .carte-produit:hover .carte-produit__image img { transform: scale(1.04) rotate(-1deg); } /* Une petite étincelle dorée qui scintille au survol */ .carte-produit__image::after { content: ""; position: absolute; top: 8%; right: 8%; width: 22%; height: 22%; background: var(--svg-etincelle-or) center / contain no-repeat; opacity: 0; transform: scale(.6) rotate(-20deg); transition: opacity .25s, transform .35s; } .carte-produit:hover .carte-produit__image::after, .carte-produit:focus-within .carte-produit__image::after { opacity: 1; transform: scale(1) rotate(0); } .carte-produit--ligne .carte-produit__image::after { top: 4%; right: 4%; width: 30%; height: 30%; } .fiche__photo::after { content: ""; position: absolute; top: 6%; right: 6%; width: 14%; height: 14%; background: var(--svg-etincelle-or) center / contain no-repeat; animation: scintille 3.2s ease-in-out infinite; } @keyframes scintille { 0%, 100% { transform: scale(.85) rotate(0); opacity: .75; } 50% { transform: scale(1.1) rotate(12deg); opacity: 1; } } /* « Nouveauté » en autocollant rond, légèrement penché */ .carte-produit .badge, .fiche__photo .badge { z-index: 1; display: grid; place-items: center; width: 4.4em; height: 4.4em; padding: 0; border-radius: 50%; text-align: center; line-height: 1.1; transform: rotate(-12deg); box-shadow: var(--ombre-2); } @media (max-width: 47.99em) { .carte-produit--ligne .badge { top: calc(-1 * var(--e-3)); left: calc(-1 * var(--e-3)); width: 60px; height: 60px; font-size: var(--t-micro); } .carte-produit--ligne .carte-produit__image { overflow: visible; } } /* Surlignage façon marqueur */ .surligne { padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: linear-gradient(transparent 58%, var(--vert-100) 58%, var(--vert-100) 92%, transparent 92%); } /* Flèche dessinée sur les liens d'action (« Voir en détail → ») */ .lien-fort::after { content: ""; flex: none; width: 1.9em; height: .7em; margin-left: .4em; background: var(--svg-fleche) center / contain no-repeat; transition: transform .2s; } .lien-fort:hover::after { transform: translateX(4px); } .pied .lien-fort::after, .bouton-texte::after { display: none; } /* Feuillage dans le coin de l'accueil */ .hero { position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; right: -24px; bottom: -24px; width: 160px; height: 160px; opacity: .55; pointer-events: none; background: var(--svg-feuillage) center / contain no-repeat; } @media (min-width: 64em) { .hero::after { width: 260px; height: 260px; right: 2%; } } .hero__avatar { position: relative; } .hero__avatar::after { content: ""; position: absolute; left: -14px; top: -10px; width: 34px; height: 34px; background: var(--svg-etincelle-or) center / contain no-repeat; animation: scintille 3.2s ease-in-out infinite; } /* L'astuce : une petite flèche dessinée qui pointe vers le conseil */ .astuce__titre::after { content: ""; display: inline-block; width: 1.6em; height: .6em; margin-left: .35em; background: var(--svg-fleche) center / contain no-repeat; vertical-align: middle; } /* 17. Grands titres dans la police du logo ------------------------------------ */ /* Pacifico n'existe qu'en un seul poids : pas de gras forcé, un peu plus d'interligne pour les boucles. */ .hero__titre, .titre-section, .titre-page, .fiche__titre { font-family: var(--police-logo); font-weight: 400; line-height: 1.35; letter-spacing: 0; } .titre-section { color: var(--vert-800); } /* 18. Inspiration Vivi & Margot : filets fins, brins dessinés, surtitres, bande sauge --- */ :root { --filet: #C8D3CC; /* trait fin, gris sauge */ --sauge-fonce: #61766A; /* fond de la bande « coups de cœur » (texte blanc : contraste 4,9:1) */ --sauge-trait: #7E9486; /* couleur des brins dessinés */ } /* En-tête de section centré */ .entete-section { display: grid; justify-items: center; gap: var(--e-2); text-align: center; margin-bottom: var(--e-6); } .entete-section .titre-section { margin: 0; } .section__suite { margin: var(--e-5) 0 0; max-width: none; text-align: center; } /* Surtitre entre deux filets : « — EN CE MOMENT — » */ .surtitre { display: flex; align-items: center; justify-content: center; gap: var(--e-3); margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); white-space: nowrap; } @media (min-width: 48em) { .surtitre { letter-spacing: .22em; } } .surtitre::before, .surtitre::after { content: ""; flex: none; width: clamp(1rem, 5vw, 2.5rem); height: 1px; background: currentColor; opacity: .5; } /* Brin feuillu dessiné au trait */ .brin { display: block; width: 11rem; height: auto; color: var(--sauge-trait); } /* Cadre fin, le brin vient « casser » le filet du haut */ .cadre { position: relative; border: 1px solid var(--filet); border-radius: 2px; background: var(--blanc); } .cadre__orne { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding-inline: var(--e-3); background: var(--fond); line-height: 0; } /* Encart démo : plus de fond bleu plein, un cadre aéré et centré */ .encart--demo.cadre { margin-top: var(--e-9); padding: var(--e-8) var(--e-5) var(--e-7); background: var(--blanc); color: var(--texte); justify-items: center; text-align: center; } .encart--demo.cadre .encart__intro { margin: 0; max-width: 40ch; color: var(--texte-2); } .encart--demo.cadre .etapes { text-align: left; max-width: 34ch; } .encart--demo.cadre .titre-bloc { font-family: var(--police-logo); font-weight: 400; font-size: var(--t-title-md); color: var(--vert-800); line-height: 1.35; } /* Bande sauge pleine largeur pour les coups de cœur */ .bande { margin-top: var(--e-9); padding-block: var(--e-8); background: var(--sauge-fonce); color: var(--blanc); } .bande .brin { color: rgb(255 255 255 / .75); } .bande .surtitre, .bande .titre-section { color: var(--blanc); } .bande .titre-section::after { filter: brightness(0) invert(1); opacity: .8; } .bande .carte-produit__titre a { color: var(--blanc); } .bande .carte-produit__accroche { color: rgb(255 255 255 / .85); } .bande .carte-produit__prix { color: var(--blanc); } .bande .carte-produit__image { box-shadow: 0 0 0 6px rgb(255 255 255 / .12); } /* « Le mot de Blondie » : lettre dans un cadre fin, avatar en décalé */ .mot { margin-top: var(--e-9); display: grid; justify-items: center; } .mot__cadre { width: 100%; padding: var(--e-8) var(--e-5) var(--e-7); display: grid; justify-items: center; gap: var(--e-4); text-align: center; } .mot__texte { margin: 0; max-width: 52ch; color: var(--texte-2); font-size: var(--t-body-l); line-height: 1.8; } .mot__signature { margin: 0; font-family: var(--police-logo); font-size: var(--t-title-xs); color: var(--vert-700); } .mot__visuel { position: relative; margin-top: calc(var(--e-6) * -1); width: 9rem; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--filet); border-radius: 50%; background: var(--etincelle-200); } .mot__visuel .avatar { width: 88%; height: 88%; } @media (min-width: 64em) { .mot { grid-template-columns: 7fr 4fr; align-items: center; justify-items: stretch; } .mot__cadre { padding: var(--e-8) calc(var(--e-8) + var(--e-7)) var(--e-7) var(--e-8); } .mot__visuel { width: auto; margin: 0 0 0 calc(var(--e-8) * -1); aspect-ratio: 4 / 5; border-radius: 2px; background: repeating-conic-gradient(from 0deg at 50% 50%, var(--etincelle-200) 0 10deg, #FCF3DC 10deg 20deg); } .mot__visuel .avatar { width: 62%; height: auto; aspect-ratio: 1; box-shadow: 0 0 0 8px var(--blanc); } } /* Témoignages : cartes blanches à filet fin, guillemet manuscrit */ .temoignage { background: var(--blanc); border: 1px solid var(--filet); border-radius: 2px; text-align: center; justify-items: center; padding: var(--e-6) var(--e-5); } .temoignage::before { content: "“"; font-family: var(--police-logo); font-size: 3rem; line-height: .6; height: .5em; color: var(--sauge-trait); } .temoignage blockquote { color: var(--texte-2); line-height: 1.75; } /* 19. Le même esprit sur les autres pages -------------------------------------- */ /* En-têtes de page centrés, coiffés du brin */ .entete-page--centree, .article__entete, .page-simple__entete { justify-items: center; text-align: center; } .entete-page--centree .brin, .article__entete .brin, .page-simple__entete .brin { width: 8rem; } .page-simple__entete .retour { justify-self: start; } .entete-page--centree .entete-page__intro { max-width: 52ch; } .article__meta { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); } .article__meta a { color: inherit; } .filtres ul { justify-content: center; } /* Mini-guide des 3 gammes : une ligne, pas plus */ .gammes { margin-bottom: var(--e-7); padding-block: var(--e-5); border-block: 1px solid var(--filet); text-align: center; } .gammes__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); color: var(--texte-2); font-size: var(--t-body-s); } @media (min-width: 48em) { .gammes__liste { grid-template-columns: repeat(3, 1fr); gap: var(--gouttiere); } } .gammes__nom { display: block; font-family: var(--police-logo); font-size: var(--t-title-xs); color: var(--vert-800); line-height: 1.5; } .gammes__conseil { margin: var(--e-4) auto 0; max-width: none; font-size: var(--t-body-s); font-style: italic; color: var(--texte-2); } /* Fiche produit */ .fiche__categorie { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); text-decoration: none; } .astuce { background: #FFFBF0; border: 1px solid var(--etincelle-200); border-radius: 2px; } .bon-a-savoir { margin: var(--e-2) 0 0; padding: var(--e-3) var(--e-4); border-left: 2px solid var(--sauge-trait); background: var(--gris-50); font-size: var(--t-body-s); color: var(--texte-2); } .bon-a-savoir strong { display: block; color: var(--texte); } .fiche__aide { margin: var(--e-2) 0 0; font-size: var(--t-body-s); } .fiche__aide a { color: var(--texte-2); } /* Comment commander : 4 étapes numérotées à la main */ .commander__etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5) var(--gouttiere); } @media (min-width: 48em) { .commander__etapes { grid-template-columns: repeat(4, 1fr); gap: var(--gouttiere); } } .commander__etapes li { counter-increment: etape; display: grid; gap: var(--e-1); justify-items: center; text-align: center; color: var(--texte-2); font-size: var(--t-body-s); } .commander__etapes li::before { content: counter(etape); font-family: var(--police-logo); font-size: var(--t-title-md); line-height: 1.2; color: var(--sauge-trait); } .commander__etapes strong { font-family: var(--police-titre); font-size: var(--t-body); color: var(--texte); } /* Questions fréquentes repliées */ .faq__liste { max-width: 46rem; margin-inline: auto; border-top: 1px solid var(--filet); } .faq__item { border-bottom: 1px solid var(--filet); } .faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); min-height: var(--cible); padding-block: var(--e-4); cursor: pointer; list-style: none; font-family: var(--police-titre); font-weight: 700; color: var(--texte); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; flex: none; font-family: var(--police-titre); font-size: 1.5rem; line-height: 1; color: var(--sauge-trait); transition: transform .2s; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { margin: 0 0 var(--e-4); color: var(--texte-2); } /* 20. Icônes au trait, illustrations, hero aéré, animations douces ---------- */ .dessin { display: block; flex: none; width: 1.5em; height: 1.5em; } /* Accroche : plus d'air sous le grand titre, petite phrase manuscrite */ .hero__intro { margin-top: var(--e-3); max-width: 52ch; } .hero__actions { margin-top: var(--e-3); } .hero__clin { position: relative; margin: var(--e-5) 0 0; max-width: 24ch; padding-left: var(--e-6); font-family: var(--police-logo); font-size: var(--t-title-xs); line-height: 1.5; color: var(--vert-700); transform: rotate(-2deg); } .hero__clin::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.6rem; height: 1.6rem; background: var(--svg-etincelle-or) center / contain no-repeat; animation: scintille 3.2s ease-in-out infinite; } @media (min-width: 64em) { .hero { padding-block: var(--e-8); } .hero__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gouttiere); align-items: center; } .hero__grille > * { grid-column: 1; } .hero__clin { grid-column: 2; grid-row: 2 / span 2; justify-self: center; margin: 0; font-size: var(--t-title-sm); transform: rotate(-4deg); } } /* Tuiles « Par où commencer ? » */ .tuile { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--e-3); } .tuile__icone { width: 2.5rem; height: 2.5rem; opacity: .9; transition: transform .25s ease; } .tuile:hover .tuile__icone { transform: rotate(-6deg) scale(1.06); } /* Filtres du catalogue */ .filtre { gap: var(--e-2); } .filtre__icone { width: 1.35rem; height: 1.35rem; stroke-width: 2.2; } /* Les 3 gammes : icône, puis titre aéré au-dessus du texte */ .gammes__liste li { display: grid; justify-items: center; gap: var(--e-2); } .gammes__icone { width: 2.75rem; height: 2.75rem; color: var(--sauge-fonce); } .gammes__nom { margin-bottom: var(--e-1); } .carte-produit__accroche { margin-top: var(--e-1); } .entete-page--centree .titre-page + * { margin-top: var(--e-3); } /* Illustrations des articles */ .illustration { display: block; width: 100%; height: 100%; color: var(--vert-800); } .illustration__fond { fill: var(--vert-100); } .illustration--2 .illustration__fond { fill: var(--lagon-100); } .illustration--2 { color: var(--lagon-800); } .illustration--3 .illustration__fond { fill: #FBEFD2; } .illustration--3 { color: var(--etincelle-800); } .illustration__rond { fill: var(--blanc); opacity: .65; } .illustration__elan { opacity: .35; } .illustration__eclats { color: var(--etincelle-400); } .illustration--3 .illustration__eclats { color: var(--vert-600); } .illustration__bulles { opacity: .5; } .illustration__icones { transform-origin: 160px 92px; transition: transform .35s ease; } .carte-article:hover .illustration__icones { transform: rotate(-3deg) scale(1.04); } .carte-article__image { background: var(--vert-100); } .article__image--illustration { aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; } /* Animations d'apparition (ajoutées par main.js, jamais sans JavaScript) */ .anime .revele { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--delai, 0s); } .anime .revele.est-visible { opacity: 1; transform: none; } .anime .hero__titre, .anime .hero__intro, .anime .hero__actions, .anime .hero__clin, .anime .hero__avatar { animation: monte .8s cubic-bezier(.2, .7, .2, 1) both; } .anime .hero__titre { animation-delay: .1s; } .anime .hero__intro { animation-delay: .25s; } .anime .hero__actions { animation-delay: .4s; } .anime .hero__clin { animation: monte-clin .9s .6s cubic-bezier(.2, .7, .2, 1) both; } .anime .hero::after { animation: balance 7s ease-in-out infinite; transform-origin: 100% 100%; } @keyframes monte { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes monte-clin { from { opacity: 0; transform: translateY(12px) rotate(-8deg); } to { opacity: 1; transform: rotate(-4deg); } } @keyframes balance { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } } @media (max-width: 63.99em) { @keyframes monte-clin { from { opacity: 0; transform: translateY(12px) rotate(-6deg); } to { opacity: 1; transform: rotate(-2deg); } } } @media (prefers-reduced-motion: reduce) { .anime .revele { opacity: 1; transform: none; } } /* Dessin au trait à la place d'une photo produit pas encore ajoutée */ .dessin--attente { position: absolute; inset: 0; z-index: 1; margin: auto; width: 42%; height: 42%; color: var(--vert-800); stroke-width: 1.4; opacity: .8; transition: transform .3s ease; } .carte-produit:hover .dessin--attente { transform: rotate(-4deg) scale(1.05); } .gammes__liste li { align-content: start; } /* 21. Photos détourées et hero illustré ------------------------------------- */ .carte-produit__image img.detoure, .fiche__photo img.detoure { object-fit: contain; padding: 13%; filter: drop-shadow(0 16px 14px rgb(25 77 64 / .18)); } .carte-produit:hover .carte-produit__image img.detoure { transform: translateY(-4px) rotate(-2deg); } .fiche__photo img.detoure { padding: 12%; } .illustration__photo { filter: drop-shadow(0 8px 6px rgb(25 77 64 / .2)); } /* Hero : la photo « moment pour soi » se fond dans le vert d'eau, la petite phrase posée dessus comme une étiquette */ .hero__visuel { position: relative; justify-self: stretch; width: calc(100% + 2 * var(--marge, 16px)); margin: var(--e-5) calc(-1 * var(--marge, 16px)) calc(-1 * var(--e-7)); height: 280px; } .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% 40%; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%); mask-image: linear-gradient(to bottom, transparent, #000 25%); } .hero .hero__clin { position: absolute; left: var(--marge, 16px); bottom: var(--e-5); z-index: 2; margin: 0; width: max-content; max-width: min(21ch, calc(100% - 2 * var(--marge, 16px))); padding: var(--e-3) var(--e-4) var(--e-3) var(--e-6); background: var(--blanc); border-radius: var(--r-m); box-shadow: var(--ombre-3); font-size: var(--t-body-l); transform: rotate(-3deg); } .hero .hero__clin::before { left: var(--e-2); top: var(--e-3); width: 1.3rem; height: 1.3rem; } .hero:has(.hero__visuel)::after { display: none; } @media (min-width: 64em) { .hero { padding-block: var(--e-8) calc(var(--e-8) + var(--e-4)); } .hero__grille { grid-template-columns: minmax(0, 1fr); position: static; } .hero__grille > :not(.hero__visuel) { max-width: 40rem; position: relative; z-index: 1; } .hero__visuel { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; height: auto; margin: 0; justify-self: auto; } .hero__photo { object-position: right center; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%); mask-image: linear-gradient(to right, transparent 0, #000 38%); } .hero .hero__clin { left: 18%; bottom: 12%; font-size: var(--t-title-xs); max-width: 19ch; width: max-content; transform: rotate(-4deg); } } .anime .hero .hero__clin { animation: monte-etiquette .9s .6s cubic-bezier(.2, .7, .2, 1) both; } @keyframes monte-etiquette { from { opacity: 0; transform: translateY(14px) rotate(-9deg); } to { opacity: 1; transform: rotate(-4deg); } } .anime .hero__photo { animation: apparait 1.2s ease both; } @keyframes apparait { from { opacity: 0; } to { opacity: 1; } } /* 22. Photos d'ambiance des articles (Prowin France, petite définition : jamais affichées trop grand) */ .article__image--photo { max-width: 26rem; margin-inline: auto; } .article__image--photo img { aspect-ratio: 1; object-fit: contain; } /* Les photos d'ambiance sont carrées : la carte prend leur format pour les montrer en entier, sans zoom. */ .carte-article__image { aspect-ratio: 1; } /* 23. Hero : avatar plus grand avec sa bulle de bienvenue, phrase dans une bulle de savon qui flotte */ .hero__accueil { display: flex; align-items: center; gap: var(--e-4); } .hero .hero__avatar { width: 112px; height: 112px; box-shadow: 0 0 0 6px rgb(255 255 255 / .7); } .hero__bulle { position: relative; margin: 0; padding: var(--e-2) var(--e-4); background: var(--blanc); border-radius: var(--r-l); font-family: var(--police-logo); font-size: var(--t-body-l); color: var(--vert-800); box-shadow: var(--ombre-3); } .hero__bulle::before { content: ""; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--blanc); border-radius: 0 0 0 6px; transform: rotate(45deg) skew(8deg, 8deg); } @media (min-width: 64em) { .hero .hero__avatar { width: 148px; height: 148px; } .hero__bulle { font-size: var(--t-title-xs); } } .anime .hero__accueil { animation: monte .8s cubic-bezier(.2, .7, .2, 1) both; } .anime .hero__bulle { animation: bulle-pop .7s .9s cubic-bezier(.3, 1.5, .5, 1) both; transform-origin: 0 50%; } @keyframes bulle-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } /* La phrase flotte dans une bulle de savon irisée, entourée de petites bulles */ .hero .hero__clin { display: grid; place-items: center; width: 12.5rem; max-width: none; aspect-ratio: 1; padding: var(--e-5); border-radius: 50%; left: var(--marge, 16px); bottom: var(--e-4); text-align: center; font-size: 1.05rem; line-height: 1.4; color: var(--vert-800); background: radial-gradient(circle at 30% 24%, rgb(255 255 255 / .95) 0 5%, rgb(255 255 255 / 0) 13%), radial-gradient(circle at 70% 78%, rgb(255 255 255 / .55) 0 3%, rgb(255 255 255 / 0) 9%), radial-gradient(circle at 50% 50%, rgb(255 255 255 / .72) 0 56%, rgb(214 236 255 / .8) 70%, rgb(255 210 234 / .85) 82%, rgb(255 240 190 / .85) 91%, rgb(255 255 255 / .95) 100%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 0 18px rgb(255 255 255 / .9), inset -6px -10px 24px rgb(168 214 205 / .45), 0 12px 30px rgb(25 77 64 / .14); transform: none; } .hero .hero__clin::before { left: 50%; top: var(--e-4); margin-left: -.65rem; } .hero .hero__clin span { display: block; padding-top: var(--e-3); } .bulle-savon { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .95) 0 8%, rgb(255 255 255 / 0) 18%), radial-gradient(circle, rgb(255 255 255 / .25) 0 60%, rgb(214 236 255 / .55) 76%, rgb(255 214 236 / .6) 88%, rgb(255 255 255 / .85) 100%); box-shadow: inset 0 0 8px rgb(255 255 255 / .8); } .bulle-savon--1 { width: 3.2rem; height: 3.2rem; left: calc(var(--marge, 16px) + 12rem); bottom: 9.5rem; } .bulle-savon--2 { width: 1.8rem; height: 1.8rem; left: calc(var(--marge, 16px) + 14.5rem); bottom: 6rem; } .bulle-savon--3 { width: 1.1rem; height: 1.1rem; left: calc(var(--marge, 16px) + 10.5rem); bottom: 12.5rem; } @media (min-width: 64em) { .hero .hero__clin { width: 16rem; left: 16%; bottom: 9%; font-size: var(--t-title-xs); padding: var(--e-6); transform: none; } .bulle-savon--1 { width: 4.2rem; height: 4.2rem; left: calc(16% + 16.5rem); bottom: calc(9% + 12rem); } .bulle-savon--2 { width: 2.4rem; height: 2.4rem; left: calc(16% + 18.5rem); bottom: calc(9% + 6rem); } .bulle-savon--3 { width: 1.4rem; height: 1.4rem; left: calc(16% - 2rem); bottom: calc(9% + 15rem); } } .anime .hero .hero__clin { animation: bulle-arrive 1.1s .6s cubic-bezier(.3, 1.3, .5, 1) both, flotte 6s 1.7s ease-in-out infinite; } .anime .bulle-savon--1 { animation: apparait .8s 1.1s both, flotte 5s 1.1s ease-in-out infinite; } .anime .bulle-savon--2 { animation: apparait .8s 1.3s both, flotte 4s 1.3s ease-in-out infinite reverse; } .anime .bulle-savon--3 { animation: apparait .8s 1.5s both, flotte 7s 1.5s ease-in-out infinite; } @keyframes bulle-arrive { from { opacity: 0; transform: translateY(30px) scale(.6); } to { opacity: 1; transform: none; } } @keyframes flotte { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } } /* Sur grand écran, le hero remplit exactement la fenêtre sous la barre de navigation */ @media (min-width: 64em) { .hero { display: grid; align-items: center; min-height: calc(100svh - var(--hauteur-entete, 4.5rem)); padding-block: var(--e-6); } .hero .hero__avatar { width: 132px; height: 132px; } .hero__grille { row-gap: var(--e-3); } } /* 24. Carrousel d'articles de l'accueil : 3 visibles, on fait défiler les suivants */ .carrousel { position: relative; } .carrousel__piste { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--gouttiere); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; padding-bottom: var(--e-2); scrollbar-width: none; } .carrousel__piste::-webkit-scrollbar { display: none; } .carrousel__piste > * { scroll-snap-align: start; } .carrousel__piste:focus-visible { outline: 2px solid var(--vert-600, #2f7d68); outline-offset: 4px; border-radius: var(--r-m); } @media (min-width: 48em) { .carrousel__piste { grid-auto-columns: calc((100% - var(--gouttiere)) / 2); } } @media (min-width: 64em) { .carrousel__piste { grid-auto-columns: calc((100% - 2 * var(--gouttiere)) / 3); } } .carrousel__nav { display: flex; justify-content: center; gap: var(--e-3); margin-top: var(--e-5); } .carrousel__bouton { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; cursor: pointer; background: var(--blanc); color: var(--vert-800); border: 1px solid var(--vert-200, #cfe7df); box-shadow: var(--ombre-2); transition: background .2s, transform .2s, opacity .2s; } .carrousel__bouton svg { width: 1.3rem; height: 1.3rem; } .carrousel__bouton--prec svg { transform: scaleX(-1); } .carrousel__bouton:hover:not(:disabled) { background: var(--vert-100); transform: translateY(-2px); } .carrousel__bouton:disabled { opacity: .35; cursor: default; box-shadow: none; } .carrousel.sans-defilement .carrousel__nav { display: none; } /* 25. Réserver : deux formules (à domicile avec le calendrier, en ligne en vidéos WhatsApp) */ .choix-formule { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-bottom: var(--e-6); } .choix-formule__carte { display: grid; justify-items: center; align-content: start; gap: var(--e-1); padding: var(--e-4) var(--e-3); border-radius: var(--r-l); text-align: center; text-decoration: none; color: var(--texte-2); background: #fff; box-shadow: inset 0 0 0 1.5px var(--gris-200); transition: box-shadow .2s, background-color .2s; } .choix-formule__carte strong { color: var(--texte); font-size: var(--t-body); } .choix-formule__carte span { font-size: var(--t-caption); line-height: 1.4; } .choix-formule__carte:hover { background: var(--vert-50); } .choix-formule__carte.est-actif { background: var(--vert-50); box-shadow: inset 0 0 0 2px var(--vert-600); } .choix-formule__carte.est-actif strong { color: var(--vert-800); } .choix-formule__icone { width: 2.75rem; height: 2.75rem; color: var(--vert-700); } .deroule-en-ligne { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-3); counter-reset: deroule; } .deroule-en-ligne li { position: relative; padding-left: 2.75rem; min-height: 2rem; display: flex; align-items: center; counter-increment: deroule; } .deroule-en-ligne li::before { content: counter(deroule); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--vert-50); color: var(--vert-800); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--vert-200); } /* 26. Noms officiels Prowin (en capitales) : sur la fiche produit, le nom s'écrit comme sur le flacon, en Quicksand, plus lisible que Pacifico en capitales. */ .fiche__titre { font-family: var(--police-titre); font-weight: 700; line-height: 1.2; letter-spacing: .01em; } /* 27. Un peu d'air entre l'image d'une carte produit et son nom */ .carte-produit__image { margin-bottom: var(--e-2); } .carte-produit--ligne .carte-produit__image { margin-bottom: 0; } @media (min-width: 48em) { .carte-produit--ligne .carte-produit__image { margin-bottom: var(--e-2); } } /* 28. Commande depuis une fiche produit : le produit choisi est rappelé en haut du formulaire */ .commande-produit { display: grid; gap: var(--e-2); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); border-radius: var(--r-l); background: var(--vert-50); box-shadow: inset 0 0 0 1.5px var(--vert-200); } .commande-produit p { margin: 0; } .commande-produit__titre { font-size: var(--t-caption); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-800); } .commande-produit__nom { color: var(--texte-2); } .commande-produit__nom strong { color: var(--texte); } .commande-produit__aide { font-size: var(--t-caption); line-height: 1.45; color: var(--texte-2); } .commande-produit select { max-width: 7rem; } /* 29. Logo officiel proWIN dans le pied de page, sur une pastille blanche (il est prévu pour un fond clair) */ .pied__prowin { margin: 0; } .pied__prowin img { display: block; width: 9.5rem; height: auto; padding: var(--e-2) var(--e-3); border-radius: var(--r-m); background: var(--blanc); } /* 30. Catalogue complet : tuiles de l'accueil sur 4 colonnes (8 tuiles = 2 rangées nettes), pagination numérotée */ @media (min-width: 80em) { .tuiles { grid-template-columns: repeat(4, 1fr); } } .nav-links .page-numbers:not(.prev):not(.next) { min-width: var(--cible); justify-content: center; border-radius: 50%; } .nav-links .page-numbers.current { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible); background: var(--vert-50); color: var(--vert-800); } .pagination .nav-links { justify-content: center; flex-wrap: wrap; gap: var(--e-1) var(--e-3); } /* 31. Avis clients en carrousel (une dizaine) : la piste remplace la grille, chaque carte garde sa hauteur */ .carrousel__piste.temoignages { list-style: none; margin: 0; padding: 0 0 var(--e-2); grid-template-columns: none; } .carrousel--avis .temoignage { height: 100%; } /* 32. Filtre « Votre budget » du catalogue : une deuxième rangée de pastilles, plus discrète que les catégories */ .filtres--budget { display: grid; justify-items: center; gap: var(--e-2); margin-top: calc(-1 * var(--e-2)); } .filtres__titre { margin: 0; font-family: var(--police-titre); font-weight: 700; font-size: var(--t-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--vert-800); } .filtres--budget ul { max-width: 100%; } .filtre--budget { background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--vert-200, #cfe7df); font-weight: 600; } .filtre--budget:hover { background: var(--vert-50); } .filtre--budget[aria-current="page"] { background: var(--vert-600); color: var(--blanc); box-shadow: none; } /* Rangées de pastilles centrées qui défilent sur mobile : centrage « sûr », la première pastille n'est plus coupée à gauche */ .filtres ul { justify-content: flex-start; } .filtres li:first-child { margin-left: auto; } .filtres li:last-child { margin-right: auto; } /* 33. Petits défauts vus en revue : onglets de la fiche coupés sur mobile, étapes « Comment commander ? » mal alignées */ @media (max-width: 29.99em) { .onglets__liste { gap: 0; } .onglets__liste [role="tab"] { flex: 1 1 auto; padding: 0 var(--e-2); font-size: var(--t-body-s); } } .commander__etapes li { align-content: start; } /* 34. Catalogue calme : dans les grilles (catalogue, produits liés), un fond pastel uni et un halo blanc. Les rayons restent pour les coups de cœur de l'accueil et la grande photo de la fiche. */ .grille-produits .carte-produit__image, .grille-produits > :nth-child(n) .carte-produit__image { background: radial-gradient(circle at 50% 55%, rgb(255 255 255 / .9) 0 30%, rgb(255 255 255 / 0) 70%), var(--vert-50); } /* 35. Un seul vert pour les boutons : l'encart démo n'a plus son bouton bleu */ .bouton--demo { background: var(--vert-600); color: var(--blanc); box-shadow: var(--ombre-1); } .bouton--demo:hover { background: var(--vert-700); color: var(--blanc); box-shadow: var(--ombre-2); } .encart--demo .bouton--secondaire { border-color: var(--vert-600); color: var(--vert-700); } /* 36. Fiche produit allégée : « Existe aussi en… » en simple ligne sous les points forts, le conseil « Bon à savoir » dans l'onglet Description */ .fiche__formats { margin: var(--e-2) 0 0; font-size: var(--t-body-s); color: var(--texte-2); } .onglets__panneau .bon-a-savoir { max-width: 60ch; margin-top: var(--e-4); } /* 37. Page Démonstrations : les deux formules en cartes, chacune avec son bouton, avant le texte */ .formules { display: grid; gap: var(--gouttiere); margin: var(--e-2) 0 var(--e-8); } @media (min-width: 48em) { .formules { grid-template-columns: 1fr 1fr; } } .formule { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: var(--e-3); padding: var(--e-6) var(--e-5); border-radius: var(--r-l); text-align: center; background: var(--vert-50); box-shadow: inset 0 0 0 1.5px var(--vert-200, #cfe7df); } .formule--en-ligne { background: #EEF6FB; box-shadow: inset 0 0 0 1.5px var(--lagon-100); } .formule__icone { width: 3rem; height: 3rem; color: var(--vert-700); } .formule__titre { margin: 0; font-family: var(--police-titre); font-size: var(--t-title-xs); color: var(--texte); } .formule__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); color: var(--texte-2); } .formule__points li::before { content: "✓"; margin-right: .4em; font-weight: 700; color: var(--vert-600); } .formule .bouton { margin-top: var(--e-2); align-self: end; } /* 38. Choix de la gamme du catalogue : deux onglets « La maison » / « new wellness », au-dessus des catégories */ .choix-gamme { display: flex; width: max-content; max-width: 100%; margin: 0 auto var(--e-5); padding: var(--e-1); border-radius: var(--r-pilule); background: var(--vert-50); box-shadow: inset 0 0 0 1.5px var(--vert-200); } .choix-gamme a { display: inline-flex; align-items: center; gap: .45em; min-height: var(--cible); padding: 0 var(--e-5); border-radius: var(--r-pilule); text-decoration: none; font-weight: 600; color: var(--vert-700); white-space: nowrap; transition: background .2s, color .2s; } .choix-gamme a:hover { background: var(--vert-100); color: var(--vert-800); } .choix-gamme a[aria-current="page"] { background: var(--vert-600); color: var(--blanc); box-shadow: var(--ombre-1); } .choix-gamme__icone { width: 1.25rem; height: 1.25rem; flex: none; } @media (max-width: 30em) { .choix-gamme a { padding: 0 var(--e-4); } } a.gammes__nom { color: inherit; text-decoration: underline; text-decoration-color: var(--vert-200); text-underline-offset: .2em; } a.gammes__nom:hover { text-decoration-color: currentColor; } /* 39. Sous-catégories new wellness (Peau jeune, Peau mature…) : une rangée plus discrète sous les catégories */ .filtres--sous { margin-top: calc(-1 * var(--e-3)); } .filtre--sous { background: var(--blanc); color: var(--vert-800); box-shadow: inset 0 0 0 1.5px var(--vert-200); font-weight: 600; } .filtre--sous:hover { background: var(--vert-50); } .filtre--sous[aria-current="page"] { background: var(--vert-100); color: var(--vert-800); box-shadow: inset 0 0 0 1.5px var(--vert-600); } /* 40. « Lire le catalogue » et sa liseuse PDF plein écran */ .lire-catalogue { max-width: none; margin: calc(-1 * var(--e-2)) 0 var(--e-5); text-align: center; } .lire-catalogue__bouton { display: inline-flex; align-items: center; gap: .5em; min-height: var(--cible); padding: 0 var(--e-4); border-radius: var(--r-pilule); font-weight: 700; color: var(--vert-700); text-decoration: underline; text-decoration-color: var(--vert-200); text-underline-offset: .25em; } .lire-catalogue__bouton:hover { color: var(--vert-800); text-decoration-color: currentColor; } .liseuse { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--vert-50); color: var(--texte); overflow: hidden; } .liseuse[open] { display: grid; grid-template-rows: auto 1fr; } .liseuse::backdrop { background: rgb(0 0 0 / .4); } .liseuse-ouverte { overflow: hidden; } .liseuse__barre { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); background: var(--blanc); box-shadow: 0 1px 0 var(--gris-200); } .liseuse__titre { margin: 0; font-family: var(--police-titre); font-weight: 700; color: var(--vert-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .liseuse__page { margin: 0; font-size: var(--t-body-s); color: var(--texte-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .liseuse__actions { display: flex; } .liseuse__outil { display: inline-grid; place-items: center; width: var(--cible); height: var(--cible); border: 0; border-radius: 50%; background: none; color: var(--vert-800); cursor: pointer; } .liseuse__outil:hover, .liseuse__outil[aria-pressed="true"] { background: var(--vert-100); } .liseuse__scene { position: relative; overflow: hidden; touch-action: pan-y pinch-zoom; } .liseuse--zoom .liseuse__scene { overflow: auto; touch-action: auto; } .liseuse__pages { display: flex; justify-content: center; align-items: center; gap: 0; min-height: 100%; padding: var(--e-4); } .liseuse--zoom .liseuse__pages { align-items: flex-start; width: max-content; min-width: 100%; } .liseuse__pages canvas { display: block; background: var(--blanc); box-shadow: var(--ombre-3); } .liseuse__message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--e-5); text-align: center; color: var(--texte-2); } .liseuse__message[hidden] { display: none; } .liseuse__nav { position: absolute; top: 50%; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--vert-800); box-shadow: var(--ombre-1); cursor: pointer; transition: opacity .2s; } .liseuse__nav--prec { left: var(--e-3); } .liseuse__nav--suiv { right: var(--e-3); } .liseuse__nav:disabled { opacity: 0; pointer-events: none; } .liseuse__nav:hover { background: var(--blanc); } @media (max-width: 30em) { .liseuse__barre { grid-template-columns: 1fr auto; } .liseuse__page { grid-row: 2; grid-column: 1; } .liseuse__actions { grid-row: 1 / span 2; grid-column: 2; } .liseuse__nav { top: auto; bottom: var(--e-4); } } /* 41. Avis : 6 cartes visibles (3 colonnes × 2 rangées sur ordinateur), plus compactes */ .carrousel--avis .carrousel__piste { grid-template-rows: repeat(2, auto); grid-auto-flow: column; row-gap: var(--e-4); } .carrousel--avis .temoignage { gap: var(--e-2); padding: var(--e-4) var(--e-4) var(--e-5); align-content: center; } .carrousel--avis .temoignage::before { font-size: 2.2rem; } .carrousel--avis .temoignage blockquote { font-size: var(--t-body-s); line-height: 1.6; } .carrousel--avis .temoignage blockquote p { margin: 0; } .carrousel--avis .temoignage__qui { margin: 0; font-size: var(--t-caption); } .carrousel--avis .etoiles { font-size: var(--t-body-s); } /* 42. « Par où commencer ? » : deux univers (la maison, moi), chacun avec ses rayons en petites cartes */ .univers { display: grid; gap: var(--gouttiere); } @media (min-width: 64em) { .univers { grid-template-columns: 1fr 1fr; } } .univers__carte { display: grid; grid-template-rows: auto 1fr auto; gap: var(--e-5); padding: var(--e-6) var(--e-5); border-radius: var(--r-l); background: var(--vert-100); } .univers__carte--wellness { background: var(--lagon-100); } .univers__entete { display: flex; align-items: center; gap: var(--e-4); } .univers__icone { flex: none; width: 3.25rem; height: 3.25rem; padding: var(--e-3); border-radius: 50%; background: var(--blanc); color: var(--vert-700); } .univers__titre { margin: 0; font-family: var(--police-logo); font-weight: 400; font-size: var(--t-title-sm); line-height: 1.15; color: var(--vert-800); } .univers__intro { margin: var(--e-3) 0 0; font-size: var(--t-body-s); color: var(--texte-2); } .univers__rayons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--e-3); align-content: start; } .rayon { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--e-2); height: 100%; min-height: 5.5rem; padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: rgb(255 255 255 / .82); color: var(--vert-800); font-family: var(--police-titre); font-weight: 700; font-size: var(--t-body-s); line-height: 1.25; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; } .rayon:hover { background: var(--blanc); box-shadow: var(--ombre-2); transform: translateY(-2px); } .rayon__icone { width: 1.9rem; height: 1.9rem; transition: transform .25s ease; } .rayon:hover .rayon__icone { transform: rotate(-6deg) scale(1.06); } .univers__tout { justify-self: start; display: inline-flex; align-items: center; gap: .4em; min-height: var(--cible); font-weight: 700; color: var(--vert-800); text-decoration: underline; text-decoration-color: rgb(25 77 64 / .3); text-underline-offset: .25em; } .univers__tout .icone { width: 1.1rem; height: 1.1rem; transition: transform .2s; } .univers__tout:hover .icone { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .rayon, .rayon:hover, .rayon__icone, .univers__tout .icone { transition: none; transform: none; } } /* 43. Sous-menu « Produits » : Pour la maison / Pour le corps */ .nav__liste .sub-menu { list-style: none; margin: 0 0 var(--e-2); padding: 0 0 0 var(--e-5); display: grid; gap: 2px; } .nav__liste .sub-menu a { min-height: var(--cible); font-size: var(--t-body); font-weight: 600; color: var(--texte-2); } .nav__liste .sub-menu .current-menu-item > a { background: var(--vert-50); color: var(--vert-800); } @media (min-width: 64em) { .nav__liste .menu-item-has-children { position: relative; } .nav__liste .menu-item-has-children > a::after { content: ""; width: .45em; height: .45em; margin: -.2em 0 0 .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .6; } .nav__liste .sub-menu { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 13rem; margin: 0; padding: var(--e-2); background: var(--blanc); border-radius: var(--r-m); box-shadow: var(--ombre-2), 0 0 0 1px var(--gris-100); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility 0s .18s; } .nav__liste .menu-item-has-children::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--e-2); } .nav__liste .menu-item-has-children:hover > .sub-menu, .nav__liste .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .nav__liste .sub-menu a { border-radius: var(--r-s, 8px); padding-inline: var(--e-3); font-size: var(--t-body-s); color: var(--texte); } .nav__liste .sub-menu a:hover { background: var(--vert-50); } } /* 44. Finitions après le tour complet du site */ /* Noms Prowin en capitales dans un titre en Pacifico : Quicksand, comme sur la fiche produit */ .nom-prowin { font-family: var(--police-titre); font-weight: 700; letter-spacing: .01em; } /* Pagination : les points de suspension alignés sur les numéros */ .nav-links .page-numbers.dots { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible); } /* Formules de démo : puces à gauche, plus lisibles qu'un texte centré sur plusieurs lignes */ .formule__points { justify-self: stretch; text-align: left; max-width: 26rem; margin-inline: auto; } .formule__points li { display: grid; grid-template-columns: auto 1fr; gap: .5em; } .formule__points li::before { margin-right: 0; } /* Calendrier : un jour non disponible est simplement grisé (pas barré) */ .jour--pris, .pastille--pris { text-decoration: none; color: var(--gris-300); opacity: .8; } /* Les 3 gammes sur mobile : icône à gauche, texte à droite, plus compact */ @media (max-width: 47.99em) { .gammes { padding-block: var(--e-4); text-align: left; } .gammes__liste li { grid-template-columns: 2.25rem 1fr; justify-items: start; align-items: start; column-gap: var(--e-3); row-gap: 0; } .gammes__icone { width: 2.25rem; height: 2.25rem; grid-row: span 2; } .gammes__nom { margin-bottom: 0; font-size: var(--t-body); } .gammes__conseil { text-align: center; } } /* 45. Hero plus discret : avatar, « Hello » et bulles de savon réduits pour laisser respirer le titre */ .hero .hero__avatar { width: 84px; height: 84px; box-shadow: 0 0 0 4px rgb(255 255 255 / .7); } .hero__accueil { gap: var(--e-3); } .hero__bulle { padding: var(--e-1) var(--e-3); font-size: var(--t-body); border-radius: var(--r-l); } .hero__bulle::before { left: -7px; width: 14px; height: 14px; margin-top: -7px; } .hero .hero__clin { width: 10.5rem; padding: var(--e-4); font-size: .95rem; } .hero .hero__clin span { padding-top: var(--e-2); } .bulle-savon--1 { width: 2.4rem; height: 2.4rem; left: calc(var(--marge, 16px) + 10rem); bottom: 8rem; } .bulle-savon--2 { width: 1.4rem; height: 1.4rem; left: calc(var(--marge, 16px) + 11.75rem); bottom: 5rem; } .bulle-savon--3 { width: .9rem; height: .9rem; left: calc(var(--marge, 16px) + 8.5rem); bottom: 10.5rem; } @media (min-width: 64em) { .hero .hero__avatar { width: 104px; height: 104px; } .hero__bulle { font-size: var(--t-body-l); } .hero .hero__clin { width: 12.5rem; padding: var(--e-5); font-size: var(--t-body-l); } .bulle-savon--1 { width: 3rem; height: 3rem; left: calc(16% + 12.75rem); bottom: calc(9% + 9.5rem); } .bulle-savon--2 { width: 1.8rem; height: 1.8rem; left: calc(16% + 14.25rem); bottom: calc(9% + 4.5rem); } .bulle-savon--3 { width: 1.1rem; height: 1.1rem; left: calc(16% - 1.5rem); bottom: calc(9% + 11.5rem); } } /* 46. Vérification finale (charte) : texte long aligné à gauche, pas de filets, lignes ≤ 65ch, cibles ≥ 44px */ p, li, blockquote { text-wrap: pretty; } .temoignage, .carrousel--avis .temoignage { border: 0; border-radius: var(--r-m); background: var(--vert-50); text-align: left; justify-items: start; } .mot__texte { text-align: left; } .encart-info { max-width: 65ch; } .langues a { min-width: var(--cible); justify-content: center; } .fil ol { padding: var(--e-4) 0 var(--e-3); align-items: center; } .fil a, .fiche__categorie { display: inline-flex; align-items: center; min-height: var(--cible); } .reservation__autre a { display: inline-flex; align-items: center; min-height: var(--cible); text-wrap: balance; } .etape { grid-template-columns: minmax(0, 1fr); } @media (max-width: 29.99em) { /* 7 jours × 44px tiennent dans 343px : le calendrier ne déborde plus de l'écran */ .calendrier { padding: var(--e-4) var(--e-2); } .calendrier__grille { column-gap: 0; } } /* 47. Hero rééquilibré : l'avatar remonte vers le menu et laisse respirer le titre */ .hero__accueil { margin-bottom: var(--e-4); } @media (min-width: 64em) { .hero { padding-block: var(--e-5) var(--e-7); } .hero__accueil { margin-bottom: var(--e-5); } .hero__intro { margin-top: var(--e-4); } } /* Avis : chaque carte commence en haut, guillemets, étoiles et texte alignés d'une carte à l'autre */ .carrousel--avis .temoignage { align-content: start; padding: var(--e-5); } /* 48. Les produits / La maison / Le corps : trois pages, même en-tête (trio des gammes, sélecteur, catalogues) */ .lire-catalogue { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--e-4); } .gammes__nom[aria-current="page"] { text-decoration-color: currentColor; } /* 49. Pastille « Nouveauté » : le rond se dimensionne sur le mot, texte parfaitement centré */ .carte-produit .badge, .fiche__photo .badge { width: auto; height: auto; aspect-ratio: 1; padding: var(--e-3); white-space: nowrap; } @media (max-width: 47.99em) { .carte-produit--ligne .badge { width: auto; height: auto; padding: var(--e-2); } } /* 50. Cohérence : toutes les pages ont le même en-tête (brin, surtitre, titre, accroche) aux mêmes espacements */ .page-simple__entete, .article__entete, .entete-page { gap: var(--e-3); } .fil + .entete-page { padding-top: 0; } .page-simple__entete:has(.retour) { padding-top: var(--e-4); } .page-simple--404 { padding-bottom: var(--e-9); } .page-simple--404 .hero__actions { justify-content: center; margin-top: var(--e-3); } .article__entete .article__meta { margin: 0; } /* 51. « Comment commander ? » : 4 cartes alignées à gauche (2 × 2), numéro, titre et texte sur les mêmes lignes */ .commander__etapes { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); } @media (min-width: 40em) { .commander__etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); } } .commander__etapes li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--e-3); row-gap: var(--e-1); justify-items: start; align-content: start; text-align: left; padding: var(--e-5); border-radius: var(--r-m); background: var(--vert-50); } .commander__etapes li::before { grid-row: 1 / span 2; align-self: start; line-height: 1; font-size: var(--t-title-md); } .commander__titre { font-size: var(--t-body); line-height: 1.4; } .commander__texte { font-size: var(--t-body-s); line-height: 1.6; color: var(--texte-2); } /* titres de longueurs différentes : sous-grille pour que les textes d'une même rangée démarrent à la même hauteur */ @media (min-width: 40em) { .commander__etapes { grid-auto-rows: auto; row-gap: var(--e-4); } .commander__etapes li { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--e-1); } } /* 52. Revue visuelle complète, section par section */ /* Titres de cartes : coupure naturelle (l'équilibrage les coupait à mi-largeur) */ .carte-article__titre, .carte-produit__titre, .commander__titre, .formule__titre { text-wrap: pretty; } /* Phrases d'accroche centrées : lignes équilibrées, pas de mot seul en dernière ligne */ .entete-page__intro, .encart__intro, .gammes__conseil, .section__intro { text-wrap: balance; } /* Encart démo : même largeur (colonne de lecture) sur toutes les pages, accueil et fiches comprises */ .encart--demo.cadre { max-width: 45rem; margin-inline: auto; } /* Coups de cœur : plus d'anneau qui dépasse, l'image s'aligne au texte */ .bande .carte-produit__image { box-shadow: none; } /* Le mot de Blondie : cadre et visuel de même hauteur ; texte, signature et lien alignés sur la même colonne */ .mot__texte, .mot__signature, .mot__suite { justify-self: center; width: 100%; max-width: 33rem; text-align: left; } @media (min-width: 64em) { .mot { align-items: stretch; } .mot__visuel { aspect-ratio: auto; min-height: 100%; } } /* Rayons de l'accueil : 2 par ligne sur mobile au lieu d'une longue colonne */ .univers__rayons { grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr)); } /* Avis : une seule rangée sur mobile (la 2e rangée laissait des cartes à moitié vides) */ @media (max-width: 47.99em) { .carrousel--avis .carrousel__piste { grid-template-rows: auto; } } /* Trio des gammes : fond doux au lieu de deux filets */ .gammes { border-block: 0; padding: var(--e-6) var(--e-5); border-radius: var(--r-l); background: var(--vert-50); } /* Encadrés « L'astuce » et « Bon à savoir » : même famille, fond teinté, sans bordure */ .astuce { border: 0; border-radius: var(--r-m); background: #FFF8E6; } .bon-a-savoir { border-left: 0; border-radius: var(--r-m); background: var(--vert-50); padding: var(--e-4); } /* Encadré d'info des formulaires : même largeur que les champs et les boutons */ .encart-info { max-width: none; width: 100%; padding: var(--e-4); } /* Choix Chez vous / En ligne : cartes sans contour, comme les autres cartes */ .formule, .formule--en-ligne { box-shadow: none; } /* Produits associés : 3 cartes centrées au lieu de laisser une 4e colonne vide */ @media (min-width: 80em) { .grille-produits--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(75% + var(--gouttiere) * .25); margin-inline: auto; } } /* Barre « Commander » collante sur mobile : bouton sur une seule ligne */ .barre-commande .bouton { white-space: nowrap; padding-inline: var(--e-4); } /* Comment commander : numéro aligné sur la première ligne du titre */ .commander__etapes li::before { line-height: 1.1; margin-top: -.1em; } /* 53. Derniers alignements */ /* Encart démo : intro, étapes et bouton dans une même colonne alignée à gauche, comme « Le mot de Blondie » */ .encart--demo.cadre .encart__corps { justify-self: center; width: 100%; max-width: 30rem; display: grid; gap: var(--e-4); justify-items: start; text-align: left; } .encart--demo.cadre .encart__corps .encart__intro, .encart--demo.cadre .encart__corps .etapes { max-width: none; margin: 0; text-wrap: pretty; } /* Avis : le nom reste en bas de la carte, l'espace libre se place entre la citation et le nom */ .carrousel--avis .temoignage { display: flex; flex-direction: column; align-items: flex-start; } .carrousel--avis .temoignage blockquote { flex: 1 0 auto; } /* Univers de l'accueil : pastille alignée sur la première ligne du titre, même quand il passe sur deux lignes */ .univers__entete { align-items: flex-start; } /* Fiche produit : « Bon à savoir » aussi large que les paragraphes de l'onglet */ .onglets__panneau > *, .onglets__panneau .bon-a-savoir { max-width: 44rem; } /* Trio des gammes sur mobile : la phrase de conseil suit l'alignement à gauche des trois lignes */ @media (max-width: 47.99em) { .gammes__conseil { text-align: left; padding-left: calc(2.25rem + var(--e-3)); } } /* Accroche surlignée des fiches : pas de mot seul sur la dernière ligne */ .fiche__accroche { text-wrap: pretty; } /* Liens longs « … ? Écrivez-moi » : la flèche suit le dernier mot quand la phrase passe sur deux lignes */ .reservation__autre .lien-fort { display: inline-block; padding-block: .6em; } .reservation__autre .lien-fort::after { display: inline-block; vertical-align: middle; } /* Listes des textes (articles, pages, onglets) : même puce verte que les points forts des fiches */ .texte ul li::marker, .onglets__panneau ul li::marker { color: var(--vert-600); } .texte ol li::marker { font-weight: 700; color: var(--vert-700); } /* 54. Retours iPhone (20/10) */ /* Pastilles de catégories et de budget : ne se compriment plus dans la rangée qui défile (Safari coupait le libellé) */ .filtres li { flex: none; } .filtre { justify-content: center; } /* « Nouveauté » : cercle de taille fixe, mot centré, sans inclinaison */ .carte-produit .badge, .fiche__photo .badge { width: 6.75em; height: 6.75em; aspect-ratio: auto; padding: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; line-height: 1; transform: none; } @media (max-width: 47.99em) { .carte-produit .badge { font-size: .7rem; } .carte-produit--ligne .badge { width: 6.75em; height: 6.75em; } } /* Bulle « Hello, bienvenue ! » : pointe en triangle net, collée au bord gauche et centrée sur la hauteur (toutes tailles) */ .hero__bulle::before { left: -8px; top: 50%; width: 9px; height: 16px; margin-top: -8px; border-radius: 0; transform: none; clip-path: polygon(100% 0, 0 50%, 100% 100%); } /* Encart démo : contenu centré (choix de Clarisse) */ .encart--demo.cadre .encart__corps { justify-items: center; text-align: center; max-width: 32rem; } .encart--demo.cadre .encart__corps .etapes { list-style-position: inside; padding-left: 0; text-align: center; text-wrap: balance; } .encart--demo.cadre .encart__corps .etapes li { padding-left: 0; } /* Hero sur mobile et tablette : la photo passe en fond fondu derrière le texte, la bulle de savon se pose à droite des boutons */ @media (max-width: 63.99em) { .hero { position: relative; padding-block: var(--e-6) var(--e-7); } .hero__grille { position: static; } .hero__grille > :not(.hero__visuel) { position: relative; z-index: 1; } .hero__visuel { position: absolute; inset: 0; width: auto; height: auto; margin: 0; z-index: 0; } /* La photo garde ses proportions, calée en bas à droite : la jeune femme et son visage restent visibles, le côté gauche se fond sous le texte */ .hero__photo { inset: auto -5rem 0 auto; width: auto; height: 25rem; max-width: none; object-fit: fill; opacity: .9; -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 62%), linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 30%, #000 62%), linear-gradient(to bottom, transparent 0, #000 22%); -webkit-mask-composite: source-in; mask-composite: intersect; } .hero__intro { max-width: 15.5rem; } .hero .hero__actions { flex-direction: column; align-items: stretch; width: max-content; gap: var(--e-3); } .hero .hero__actions .bouton { white-space: nowrap; justify-content: center; } .hero .hero__clin { left: auto; right: var(--marge, 16px); bottom: calc(var(--e-7) + 2.5rem); width: 6.75rem; padding: var(--e-3); font-size: .78rem; line-height: 1.3; } .hero .hero__clin::before { top: var(--e-2); width: .9rem; height: .9rem; margin-left: -.45rem; } .hero .hero__clin span { padding-top: var(--e-2); } .bulle-savon--1 { left: auto; right: calc(var(--marge, 16px) + 6.25rem); bottom: calc(var(--e-7) + 8rem); width: 1.6rem; height: 1.6rem; } .bulle-savon--2 { left: auto; right: calc(var(--marge, 16px) + 6.5rem); bottom: calc(var(--e-7) + 2.5rem); width: 1rem; height: 1rem; } .bulle-savon--3 { left: auto; right: calc(var(--marge, 16px) + 1.5rem); bottom: calc(var(--e-7) + 10rem); width: .8rem; height: .8rem; } } @media (min-width: 48em) and (max-width: 63.99em) { .hero__photo { right: 0; height: 28rem; -webkit-mask-image: linear-gradient(to right, transparent 42%, #000 70%), linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 42%, #000 70%), linear-gradient(to bottom, transparent 0, #000 22%); } .hero__intro { max-width: 26rem; } .hero .hero__clin { width: 8.5rem; font-size: .9rem; padding: var(--e-4); } .bulle-savon--1 { right: calc(var(--marge, 16px) + 8rem); bottom: calc(var(--e-7) + 9.5rem); } .bulle-savon--3 { bottom: calc(var(--e-7) + 12rem); } } /* Boutons du hero : « Réserver une démo » devient un vrai bouton (fond blanc), lisible sur la photo et aligné sur le premier */ .hero .bouton--secondaire { background: var(--blanc); } /* Le mot de Blondie sur mobile et tablette : l'avatar se place à droite de « Faire connaissance », la flèche pointe vers lui */ @media (max-width: 63.99em) { .mot { position: relative; } .mot__cadre { padding-bottom: var(--e-7); } .mot__visuel { display: none; } .mot__suite { display: flex; align-items: center; gap: var(--e-4); } } /* Petit avatar juste après « Faire connaissance » (mobile et tablette), la flèche du lien pointe vers lui */ .mot__avatar { display: none; } @media (max-width: 63.99em) { .mot__avatar { display: block; flex: none; width: 4.5rem; height: 4.5rem; margin-left: var(--e-1); box-shadow: 0 0 0 6px var(--etincelle-200), 0 0 0 7px var(--filet); } } /* Hero mobile et tablette : avatar et « Hello » plus petits et décollés du bord, bulle de savon un peu plus basse */ @media (max-width: 63.99em) { .hero__accueil { gap: var(--e-4); padding-left: var(--e-2); margin-bottom: var(--e-4); } .hero .hero__avatar { width: 64px; height: 64px; } .hero__bulle { font-size: .9rem; } .hero .hero__clin { bottom: calc(var(--e-7) + 1rem); } .bulle-savon--1 { bottom: calc(var(--e-7) + 6.5rem); } .bulle-savon--2 { bottom: calc(var(--e-7) + 1rem); } .bulle-savon--3 { bottom: calc(var(--e-7) + 8.5rem); } .hero__intro { margin-top: var(--e-4); } .hero .hero__actions { margin-top: var(--e-3); } } /* 55. Ordinateur : la bulle de savon et ses petites bulles glissent vers la droite, sur la photo (choix de Clarisse) */ @media (min-width: 64em) { .hero .hero__clin { left: 36%; } .bulle-savon--1 { left: calc(36% + 12.75rem); } .bulle-savon--2 { left: calc(36% + 14.25rem); } .bulle-savon--3 { left: calc(36% - 1.5rem); } } /* 56. Hero mobile et tablette : il remplit tout l'écran sous la barre de navigation, le contenu s'étale sur la hauteur */ @media (max-width: 63.99em) { .hero { display: grid; min-height: calc(100svh - var(--hauteur-entete, 64px)); padding-block: var(--e-5) var(--e-7); } .hero__grille { align-content: space-between; row-gap: var(--e-4); } .hero__accueil, .hero__intro, .hero .hero__actions { margin-block: 0; } } /* 57. Recherche : pied de page (tout le site) et catalogue (produits de la page en cours) */ .recherche { display: flex; align-items: stretch; width: 100%; max-width: 34rem; margin-inline: auto; border-radius: var(--r-pilule); background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--gris-300); } .recherche:focus-within { box-shadow: inset 0 0 0 2px var(--vert-600), 0 0 0 4px var(--vert-100); } .recherche__champ { flex: 1 1 auto; min-width: 0; min-height: var(--cible); padding: 0 var(--e-2) 0 var(--e-5); border: 0; border-radius: var(--r-pilule) 0 0 var(--r-pilule); background: transparent; color: var(--texte); font: inherit; font-size: 1rem; } .recherche__champ:focus { outline: none; } .recherche__champ::placeholder { color: var(--texte-2); opacity: 1; } .recherche__champ::-webkit-search-cancel-button { cursor: pointer; } .recherche__bouton { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-width: var(--cible); min-height: var(--cible); margin: 3px; padding: 0 var(--e-4); border: 0; border-radius: var(--r-pilule); background: var(--vert-600); color: var(--blanc); font: inherit; font-weight: 700; cursor: pointer; transition: background .2s; } .recherche__bouton:hover { background: var(--vert-700); } .recherche__bouton .icone { width: 1.15rem; height: 1.15rem; } @media (max-width: 30em) { .recherche__bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .recherche__bouton { padding: 0; width: var(--cible); } } .recherche--produits { margin-bottom: var(--e-5); } .recherche__resultat { max-width: none; margin: calc(-1 * var(--e-3)) 0 var(--e-5); text-align: center; color: var(--texte-2); } .recherche__resultat a { display: inline-flex; align-items: center; min-height: var(--cible); margin-left: var(--e-2); font-weight: 700; } .pied__recherche { display: grid; justify-items: center; gap: var(--e-3); padding-bottom: var(--e-7); margin-bottom: var(--e-7); border-bottom: 1px solid rgb(255 255 255 / .12); text-align: center; } .pied__question { margin: 0; font-family: var(--police-logo); font-size: var(--t-title-xs); color: var(--blanc); } .pied .recherche { box-shadow: none; } .pied .recherche:focus-within { box-shadow: 0 0 0 3px var(--vert-200); } .entete-page__recherche { margin-top: var(--e-5); } .resultats { padding-block: var(--e-5); } .resultats__titre { margin-bottom: var(--e-5); font-family: var(--police-titre); font-size: var(--t-title-sm); text-align: center; } .resultats__nombre { color: var(--texte-2); font-weight: 400; } .resultats__suite { max-width: none; margin-top: var(--e-5); text-align: center; } .resultats__pages { max-width: 46rem; margin-inline: auto; padding: 0; list-style: none; border-top: 1px solid var(--filet); } .resultats__pages li { border-bottom: 1px solid var(--filet); } .resultats__pages a { display: flex; align-items: center; min-height: var(--cible); padding-block: var(--e-2); font-weight: 700; } .search .vide { text-align: center; max-width: 40rem; margin-inline: auto; } /* 58. Boutique : panier, liste d'envies, compte client (sans extension) */ .page-simple--panier, .page-simple--mon-compte { max-width: calc(68rem + 2 * var(--marge)); } /* En-tête : compte et panier à côté du menu */ .entete__icone { position: relative; display: inline-grid; place-items: center; width: var(--cible); height: var(--cible); border-radius: 50%; color: var(--texte); text-decoration: none; transition: background-color .15s; } .entete__icone:hover { background: var(--vert-50); color: var(--vert-800); } .entete__icone .icone { width: 24px; height: 24px; stroke-width: 1.8; } .entete__nombre { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pilule); background: var(--vert-600); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: .75rem; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--blanc); } .entete__nombre[hidden] { display: none; } .entete__compte { display: none; } .nav__compte { display: flex; align-items: center; gap: var(--e-3); min-height: 52px; margin-top: var(--e-2); padding-inline: var(--e-4); border-radius: var(--r-m); color: var(--texte); text-decoration: none; font-family: var(--police-titre); font-weight: 700; } .nav__compte:hover { background: var(--vert-50); } @media (min-width: 64em) { .entete__compte { display: inline-grid; } .nav__compte { display: none; } .entete__actions { gap: 0; } } /* Cœur (envies) et petit bouton panier des cartes : au-dessus du lien qui couvre la carte */ .envie, .ajout { position: relative; z-index: 1; margin: 0; } .envie__bouton, .ajout__bouton { display: grid; place-items: center; width: var(--cible); height: var(--cible); padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; } .envie__bouton { background: transparent; color: var(--texte-2); } .envie__bouton:hover { background: var(--vert-50); color: var(--vert-700); } .envie__bouton[aria-pressed="true"] { color: var(--vert-600); } .envie__bouton[aria-pressed="true"] .icone path { fill: currentColor; } .envie__bouton .icone, .ajout__bouton .icone { width: 22px; height: 22px; } .ajout__bouton { background: var(--vert-100); color: var(--vert-800); } .ajout__bouton:hover { background: var(--vert-600); color: var(--blanc); } .ajout__bouton.est-ajoute, .ajout--grand .bouton.est-ajoute { transform: scale(1.08); } .carte-produit__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: auto; } .carte-produit__actions { display: flex; align-items: center; gap: var(--e-1); flex: none; } /* Prix et boutons alignés en bas de la carte, sur toute la rangée */ .carte-produit:not(.carte-produit--ligne) { grid-template-rows: auto 1fr; } .carte-produit:not(.carte-produit--ligne) .carte-produit__texte { display: flex; flex-direction: column; gap: var(--e-2); } /* Champ quantité − 1 + */ .quantite { display: inline-flex; align-items: center; flex: none; border-radius: var(--r-pilule); box-shadow: inset 0 0 0 1.5px var(--gris-300); background: var(--blanc); } .quantite__bouton { display: grid; place-items: center; width: var(--cible); height: var(--cible); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texte); cursor: pointer; } .quantite__bouton:hover:not(:disabled) { background: var(--vert-50); color: var(--vert-800); } .quantite__bouton:disabled { color: var(--gris-300); cursor: default; } .quantite__bouton .icone { width: 18px; height: 18px; } .quantite__champ { width: 2.25em; min-height: var(--cible); padding: 0; border: 0; background: none; color: var(--texte); font: inherit; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; } .quantite__champ::-webkit-outer-spin-button, .quantite__champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantite:focus-within { box-shadow: inset 0 0 0 2px var(--vert-600); } /* Fiche produit : quantité, « Ajouter au panier » et cœur */ .barre-commande--panier .ajout--grand { flex: 1; display: flex; align-items: center; gap: var(--e-3); } .barre-commande--panier .ajout--grand .quantite { display: none; } .barre-commande--panier .envie__bouton { width: 52px; height: 52px; box-shadow: inset 0 0 0 1.5px var(--gris-300); } @media (max-width: 29.99em) { .barre-commande--panier .barre-commande__nom { display: none; } .barre-commande--panier .bouton { padding-inline: var(--e-4); } } @media (min-width: 48em) { .barre-commande--panier .ajout--grand .quantite { display: inline-flex; } } @media (min-width: 64em) { .barre-commande--panier .ajout--grand { flex: 0 1 auto; } } /* Petit message « Ajouté au panier » en bas de l'écran */ .toast { position: fixed; left: 50%; bottom: calc(var(--e-5) + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-1) var(--e-4); width: max-content; max-width: calc(100% - 2 * var(--marge)); padding: var(--e-3) var(--e-5); border-radius: var(--r-m); background: var(--gris-900); color: var(--blanc); box-shadow: var(--ombre-4); font-weight: 700; opacity: 0; visibility: hidden; transform: translate(-50%, 1rem); transition: opacity .2s, transform .2s, visibility .2s; } .toast.est-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .toast a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--etincelle-200); } .single-produit .toast { bottom: calc(5.5rem + env(safe-area-inset-bottom)); } @media (min-width: 64em) { .single-produit .toast { bottom: var(--e-6); } } /* Page « Mon panier » */ .panier__grille { display: grid; gap: var(--e-6); align-items: start; } @media (min-width: 64em) { .panier__grille { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--e-7); } } .lignes { list-style: none; padding: 0; border-top: 1px solid var(--filet); } .ligne { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img txt ret" "img qte tot"; align-items: center; gap: var(--e-2) var(--e-4); padding-block: var(--e-4); border-bottom: 1px solid var(--filet); } .ligne__image { grid-area: img; align-self: start; display: block; aspect-ratio: 1; border-radius: var(--r-m); background: var(--vert-50); overflow: hidden; } .ligne__image img { width: 100%; height: 100%; object-fit: contain; } .ligne__image .dessin { width: 60%; height: 60%; margin: 20%; color: var(--vert-600); } .ligne__texte { grid-area: txt; display: grid; gap: 2px; line-height: 1.35; } .ligne__nom { color: var(--texte); text-decoration: none; font-family: var(--police-titre); font-weight: 700; } .ligne__nom:hover { color: var(--lien); text-decoration: underline; } .ligne__detail { font-size: var(--t-body-s); color: var(--texte-2); } .ligne .quantite { grid-area: qte; justify-self: start; } .ligne__total { grid-area: tot; justify-self: end; font-family: var(--police-titre); font-weight: 700; white-space: nowrap; } .ligne__retirer { grid-area: ret; align-self: start; justify-self: end; min-height: var(--cible); padding: 0 0 0 var(--e-2); border: 0; background: none; color: var(--texte-2); font: inherit; font-size: var(--t-body-s); text-decoration: underline; cursor: pointer; } .ligne__retirer:hover { color: #8A1C12; } @media (min-width: 48em) { .ligne { grid-template-columns: 88px minmax(0, 1fr) auto 6.5rem auto; grid-template-areas: "img txt qte tot ret"; gap: var(--e-5); } .ligne__retirer { align-self: center; } } .panier__maj { margin-top: var(--e-4); } .est-dynamique .panier__maj { display: none; } .panier__continuer { gap: var(--e-2); margin-top: var(--e-4); text-decoration: none; } .panier__continuer .icone { width: 18px; height: 18px; } .recap { display: grid; gap: var(--e-3); padding: var(--e-5); border-radius: var(--r-l); background: var(--vert-50); } @media (min-width: 64em) { .recap { position: sticky; top: calc(var(--hauteur-entete) + var(--e-4)); padding: var(--e-6); } } .recap__titre { font-size: var(--t-title-xs); } .recap__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); max-width: none; padding-block: var(--e-2); border-bottom: 1px solid var(--vert-200); } .recap__total { font-family: var(--police-titre); font-size: var(--t-title-sm); color: var(--vert-800); } .recap__note { font-size: var(--t-body-s); color: var(--texte-2); } .recap__bouton { width: 100%; margin-top: var(--e-2); } .commande { max-width: 46rem; margin-top: var(--e-8); padding-top: var(--e-7); border-top: 1px solid var(--filet); } .commande .titre-bloc { margin-bottom: calc(-1 * var(--e-3)); } .commande__compte { color: var(--texte-2); } .choix-liste { display: grid; gap: var(--e-2); } .choix-liste legend { margin-bottom: var(--e-2); font-family: var(--police-titre); font-weight: 700; } @media (min-width: 48em) { .choix-liste { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .choix-liste legend { grid-column: 1 / -1; } } .choix-liste .choix { font-weight: 600; line-height: 1.3; padding-block: var(--e-2); } .panier__vide { display: grid; justify-items: center; gap: var(--e-4); padding-block: var(--e-6) var(--e-8); text-align: center; } .panier__vide .dessin { width: 96px; height: 96px; color: var(--vert-600); } .panier__vide p { font-size: var(--t-body-l); } .panier__vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); } .panier .confirmation { margin-bottom: var(--e-8); } /* Page « Mon compte » */ .info { padding: var(--e-3) var(--e-4); border-radius: var(--r-s); background: var(--lagon-100); color: var(--lagon-800); margin-bottom: var(--e-5); max-width: none; } .compte__duo { display: grid; gap: var(--e-5); align-items: start; } @media (min-width: 48em) { .compte__duo { grid-template-columns: 1fr 1fr; gap: var(--e-6); } } .compte__carte { align-content: start; padding: var(--e-5); border: 1px solid var(--filet); border-radius: var(--r-l); background: var(--blanc); } .compte__carte--nouveau { border-color: transparent; background: var(--vert-50); } @media (min-width: 48em) { .compte__carte { padding: var(--e-6); } } .compte__atouts { padding-left: 1.25em; display: grid; gap: var(--e-1); color: var(--texte-2); } .compte__atouts li::marker { color: var(--vert-600); } .compte__oubli { display: inline-flex; align-items: center; min-height: var(--cible); } .compte__bonjour { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); font-size: var(--t-body-l); } .compte__deconnexion { display: inline-flex; align-items: center; min-height: var(--cible); font-size: var(--t-body-s); color: var(--texte-2); } .compte__nav { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); } .compte__nav a { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 var(--e-4); border-radius: var(--r-pilule); box-shadow: inset 0 0 0 1.5px var(--gris-300); color: var(--texte); text-decoration: none; font-family: var(--police-titre); font-weight: 700; font-size: var(--t-body-s); } .compte__nav a:hover { background: var(--vert-50); box-shadow: inset 0 0 0 1.5px var(--vert-600); } .compte__bloc { margin-top: var(--e-8); } .compte__bloc > .titre-bloc { margin-bottom: var(--e-5); } .compte__vide { color: var(--texte-2); } .compte__email { color: var(--texte-2); font-size: var(--t-body-s); } .commandes { list-style: none; padding: 0; display: grid; gap: var(--e-4); } @media (min-width: 64em) { .commandes { grid-template-columns: 1fr 1fr; gap: var(--e-5); } } .commande-carte { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-5); border: 1px solid var(--filet); border-radius: var(--r-m); } .commande-carte__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); } .commande-carte__titre { display: grid; font-family: var(--police-titre); font-weight: 700; line-height: 1.3; } .commande-carte__titre span { font-family: var(--police-texte); font-weight: 400; font-size: var(--t-body-s); color: var(--texte-2); } .commande-carte__lignes { list-style: none; padding: 0; display: grid; gap: var(--e-1); font-size: var(--t-body-s); } .commande-carte__lignes li { display: flex; justify-content: space-between; gap: var(--e-3); } .commande-carte__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--filet); } .commande-carte__pied strong { font-family: var(--police-titre); margin-left: var(--e-2); } .commande-carte__pied form { margin: 0; } .commande-carte__pied .lien-fort { padding: 0; border: 0; background: none; color: var(--lien); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; } .statut { flex: none; padding: 2px var(--e-3); border-radius: var(--r-pilule); font-size: var(--t-caption); font-weight: 700; background: var(--gris-100); color: var(--gris-800); white-space: nowrap; } .statut--confirmee { background: var(--lagon-100); color: var(--lagon-800); } .statut--commandee { background: var(--etincelle-200); color: var(--etincelle-800); } .statut--prete { background: var(--vert-100); color: var(--vert-800); } .statut--livree { background: var(--vert-600); color: var(--blanc); } .statut--annulee { background: #FDECEA; color: #8A1C12; } .ajout--grand .quantite__bouton, .ajout--grand .quantite__champ { height: 52px; min-height: 52px; } @media (min-width: 64em) { .commande { max-width: calc(100% - 20rem - var(--e-7)); } } .commande-carte { grid-template-rows: auto auto 1fr; } .commande-carte__pied { align-self: end; } .compte__email { display: block; }