/* ============================================================ PLAISIR PARTAGÉ — Jetons de design Généré depuis design_tokens.js. Ne pas modifier à la main. Version 1 — 17 août 2026 ============================================================ */ :root{ /* ---------- NEUTRES ---------- */ --pp-paper: #faf7f3; /* Fond de page. Le blanc cassé chaud de toute l’identité. */ --pp-ink: #2c2016; /* Texte courant et titres sur fond clair. */ --pp-ink-soft: #6f6156; /* Texte secondaire, légendes, fil d’Ariane. */ --pp-line: #e7ddd3; /* Bordures de champs, filets de séparation. */ --pp-cream: #F2EDE9; /* Texte et éléments sur fond sombre. Jamais du blanc pur. */ --pp-cream-dim: #d9cdc2; /* Texte secondaire sur fond sombre (pied de page). */ --pp-cream-faint: #b3a598; /* Mentions légales du pied de page. */ --pp-walnut-dark: #2c1f16; /* Fond de la barre de navigation et du pied de page. */ --pp-white: #ffffff; /* Fond des champs, des pastilles de filtre, des cartes claires. */ --pp-erreur: #A0452D; /* Message et bordure d’erreur sur fond clair. Jamais employé pour autre chose. */ --pp-erreur-clair: #E08573; /* Erreur posée sur un fond sombre. */ /* ---------- TYPOGRAPHIE ---------- */ --pp-font-titre: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --pp-font-corps: 'Jost', -apple-system, 'Segoe UI', Roboto, sans-serif; --pp-font-logo: 'Pacifico', cursive; /* logotype uniquement — provisoire */ --pp-texte-display: clamp(32px, 4.4vw, 50px); --pp-texte-titre-page: clamp(28px, 3.8vw, 44px); --pp-texte-titre-section: clamp(26px, 3.4vw, 38px); --pp-texte-titre-carte: 24px; --pp-texte-corps: 16px; --pp-texte-corps-petit: 13.5px; --pp-texte-note: 13px; --pp-texte-nav: 12.5px; --pp-texte-sur-titre: 12px; --pp-texte-action: 12px; --pp-texte-libelle: 11.5px; --pp-texte-micro: 10.5px; --pp-interligne-corps: 1.65; --pp-interligne-titre: 1.15; --pp-interlettre-sur-titre: .28em; --pp-interlettre-micro: .2em; --pp-interlettre-action: .13em; --pp-interlettre-nav: .1em; --pp-interlettre-libelle: .08em; --pp-interlettre-titre: .06em; --pp-graisse-corps: 300; --pp-graisse-normal: 400; --pp-graisse-accent: 500; --pp-graisse-titre: 600; /* ---------- ESPACEMENT ---------- */ --pp-espace-xs: 8px; /* Écart entre pastilles de filtre, entre boutons du sélecteur de savoir-faire */ --pp-espace-sm: 12px; /* Écart interne serré, marge sous un sur-titre */ --pp-espace-md: 20px; /* Écart entre une grille et son en-tête */ --pp-espace-lg: 22px; /* Titre de page → premier contenu. Valeur fixée par l’audit des écarts. */ --pp-espace-xl: 28px; /* Marge horizontale du conteneur */ --pp-espace-2xl: 56px; /* Écart entre deux blocs de page. Valeur pivot de tout le rythme vertical. */ --pp-espace-3xl: 70px; /* Dernier bloc → pied de page. */ /* ---------- GABARIT ---------- */ --pp-conteneur: 1160px; /* Largeur maximale de tout le contenu (.wrap) */ --pp-colonne-lecture: 880px; /* Largeur des pages de formulaire et de texte long (.layout) */ --pp-mesure: 660px; /* Largeur maximale d’un paragraphe dans un bandeau */ --pp-marge-laterale: 28px; /* Respiration à gauche et à droite */ /* ---------- RAYONS ---------- */ --pp-rayon-action: 4px; /* Boutons */ --pp-rayon-champ: 6px; /* Champs de saisie */ --pp-rayon-objet: 10px; /* Petites vignettes, plans, galerie */ --pp-rayon-carte: 12px; /* Cartes, navigation, barre de filtres, fenêtre modale */ --pp-rayon-bloc: 14px; /* Grands bandeaux et pied de page */ --pp-rayon-pilule: 999px; /* Pastilles de filtre, étiquettes, sélecteur de savoir-faire, panier */ /* ---------- OMBRES ---------- */ --pp-ombre-nav: 0 6px 18px rgba(44,32,22,.14); /* Barre de navigation flottante */ --pp-ombre-flottant: 0 10px 30px rgba(0,0,0,.25); /* Bouton de panier fixe */ --pp-ombre-modale: 0 20px 60px rgba(0,0,0,.25); /* Fenêtre de rappel, visionneuse */ /* ---------- RATIOS ---------- */ --pp-ratio-portrait: 4 / 5; /* Vignettes de catalogue, visuel principal d’une fiche */ --pp-ratio-paysage: 4 / 3; /* Galerie secondaire, plans de salle */ /* ---------- MOUVEMENT ---------- */ --pp-rapide: .2s; /* Pastilles, liens, petits éléments */ --pp-normal: .25s; /* Cartes, boutons, vignettes */ --pp-flou-verre: blur(7px); /* Fond de la barre de navigation */ --pp-flou-voile: blur(4px); /* Fond du voile de modale */ /* ---------- EMPILEMENT ---------- */ --pp-z-entete: 30; /* Barre de navigation collante */ --pp-z-flottant: 40; /* Bouton de panier */ --pp-z-modale: 70; /* Voile de rappel et visionneuse */ } /* ============================================================ FAMILLES DE SAVOIR-FAIRE Poser la classe sur ou sur un conteneur. Six rôles par famille, toujours les mêmes noms. ============================================================ */ /* Agence — La famille par défaut. Pages transverses : accueil, qui sommes-nous, réalisations, contact, pages légales. */ :root, .fam-walnut{ --pp-fam-degrade: conic-gradient(from 205deg at 62% 28%, #6B554B, #3F2E28, #5E4B43, #46352b, #6B554B); --pp-fam-carte: #453329; /* Fond des cartes et vignettes sombres de la famille. */ --pp-fam-soft: #F2EDE9; /* Teinte claire de la famille. Liens et libellés sur fond sombre. */ --pp-fam-action: #6B554B; /* Couleur d’action. Boutons pleins, pastilles actives, accents sur fond clair. */ --pp-fam-pale: #efe6de; /* Teinte très claire. Fonds de pastilles au survol, étiquettes discrètes. */ --pp-fam-encre: #3F2E28; /* Teinte très sombre. Texte posé sur un fond « soft » ou « pale ». */ } /* Location d’espace — Sarcelle profonde. Lieux, salles, villas. */ .fam-location{ --pp-fam-degrade: conic-gradient(from 205deg at 62% 28%, #17565f, #092025, #0d3844, #0b2c33, #17565f); --pp-fam-carte: #0e343c; /* Fond des cartes et vignettes sombres de la famille. */ --pp-fam-soft: #8fd8d2; /* Teinte claire de la famille. Liens et libellés sur fond sombre. */ --pp-fam-action: #157a7a; /* Couleur d’action. Boutons pleins, pastilles actives, accents sur fond clair. */ --pp-fam-pale: #e2f1f0; /* Teinte très claire. Fonds de pastilles au survol, étiquettes discrètes. */ --pp-fam-encre: #0a2a30; /* Teinte très sombre. Texte posé sur un fond « soft » ou « pale ». */ } /* Booking artiste — Grenat. Artistes, cachets, scène. */ .fam-booking{ --pp-fam-degrade: conic-gradient(from 205deg at 62% 28%, #6f2531, #230b10, #41161d, #301016, #6f2531); --pp-fam-carte: #361318; /* Fond des cartes et vignettes sombres de la famille. */ --pp-fam-soft: #f0a9a0; /* Teinte claire de la famille. Liens et libellés sur fond sombre. */ --pp-fam-action: #7c2a33; /* Couleur d’action. Boutons pleins, pastilles actives, accents sur fond clair. */ --pp-fam-pale: #f8e7e4; /* Teinte très claire. Fonds de pastilles au survol, étiquettes discrètes. */ --pp-fam-encre: #3a1219; /* Teinte très sombre. Texte posé sur un fond « soft » ou « pale ». */ } /* Produit publicitaire — Ocre. Textile, objets, marquage. */ .fam-produit-publicitaire{ --pp-fam-degrade: conic-gradient(from 205deg at 62% 28%, #6f5621, #1c1408, #3a2c12, #2a1f0c, #6f5621); --pp-fam-carte: #2e2412; /* Fond des cartes et vignettes sombres de la famille. */ --pp-fam-soft: #e2c179; /* Teinte claire de la famille. Liens et libellés sur fond sombre. */ --pp-fam-action: #7a611f; /* Couleur d’action. Boutons pleins, pastilles actives, accents sur fond clair. */ --pp-fam-pale: #f4ecd9; /* Teinte très claire. Fonds de pastilles au survol, étiquettes discrètes. */ --pp-fam-encre: #2b2010; /* Teinte très sombre. Texte posé sur un fond « soft » ou « pale ». */ } /* Week-end de cohésion — Vert sapin. Séjours, groupes, nature. */ .fam-weekend{ --pp-fam-degrade: conic-gradient(from 205deg at 62% 28%, #2f8152, #0a2417, #175434, #103823, #2f8152); --pp-fam-carte: #155a37; /* Fond des cartes et vignettes sombres de la famille. */ --pp-fam-soft: #a5e0bb; /* Teinte claire de la famille. Liens et libellés sur fond sombre. */ --pp-fam-action: #2f8f5b; /* Couleur d’action. Boutons pleins, pastilles actives, accents sur fond clair. */ --pp-fam-pale: #e2f3e8; /* Teinte très claire. Fonds de pastilles au survol, étiquettes discrètes. */ --pp-fam-encre: #0e3320; /* Teinte très sombre. Texte posé sur un fond « soft » ou « pale ». */ } /* Animations — Prune. Attractions, spectacles, manèges. */ .fam-animations{ --pp-fam-degrade: conic-gradient(from 205deg at 62% 28%, #573162, #170d1b, #2e1b36, #221328, #573162); --pp-fam-carte: #271830; /* Fond des cartes et vignettes sombres de la famille. */ --pp-fam-soft: #d3aee2; /* Teinte claire de la famille. Liens et libellés sur fond sombre. */ --pp-fam-action: #5e3a6d; /* Couleur d’action. Boutons pleins, pastilles actives, accents sur fond clair. */ --pp-fam-pale: #f0e5f4; /* Teinte très claire. Fonds de pastilles au survol, étiquettes discrètes. */ --pp-fam-encre: #241329; /* Teinte très sombre. Texte posé sur un fond « soft » ou « pale ». */ } /* Gestion de projet — Bleu nuit. Coordination, pilotage, le service qui chapeaute les autres. */ .fam-gestion{ --pp-fam-degrade: conic-gradient(from 205deg at 62% 28%, #345584, #0b1626, #1b2c4e, #131f38, #345584); --pp-fam-carte: #182642; /* Fond des cartes et vignettes sombres de la famille. */ --pp-fam-soft: #aac6ea; /* Teinte claire de la famille. Liens et libellés sur fond sombre. */ --pp-fam-action: #33517f; /* Couleur d’action. Boutons pleins, pastilles actives, accents sur fond clair. */ --pp-fam-pale: #e5ecf6; /* Teinte très claire. Fonds de pastilles au survol, étiquettes discrètes. */ --pp-fam-encre: #122040; /* Teinte très sombre. Texte posé sur un fond « soft » ou « pale ». */ } /* ============================================================ POINTS DE RUPTURE Le site actuel en emploie sept : 560, 640, 700, 760, 820, 900, 1000. Recommandation : n'en garder que trois. Les media queries ne peuvent pas utiliser de variables CSS — ces valeurs sont ici pour référence, à recopier en dur. ============================================================ sm 640px Téléphone. Une colonne, navigation repliée. md 900px Tablette. Deux colonnes, liens de navigation masqués. lg 1160px Bureau. Mise en page complète. ============================================================ */ /* ============================================================ PRÉFÉRENCE DE MOUVEMENT RÉDUIT Obligatoire. Absent du site actuel. ============================================================ */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }