/* Design system Synaps — les tokens. Tirés de la refonte de synaps.re (accueil en ligne depuis le 27/10/2026, « style Stripe »). Chaque valeur vient du site ; la source est en commentaire (fichier du dépôt Retroscilo/synaps). Les noms courts (--paper, --ink, --orange, --accent-text, --rule, --ink-60, --pad-x…) sont ceux du site : du code repris de synaps.re marche tel quel. Les noms en français (--surface-carte, --rayon-carte…) nomment des valeurs que le site écrit en dur. */ :root { /* ---------- Couleurs de base ---------- */ --paper: #F4F1E9; /* le fond de toutes les pages (styles.css) */ --ink: #14110F; /* le texte, les filets, le fond sombre */ /* L'orange, deux usages. --orange : les aplats (bouton, pastille, badge), qui portent du texte blanc ou papier. --accent-text : le texte en orange ; sur le papier c'est le même #C34111 (4,55:1), sur un fond encre il passe à #DE4A15 (4,56:1) : tout conteneur sombre redéclare --accent-text (voir .sombre dans css/base.css). */ --orange: #C34111; --accent-text: #C34111; --orange-vif: #DE4A15; /* l'orange d'origine : texte orange sur encre */ --orange-sur-teinte: #A9380F; /* texte orange posé sur une teinte orange (jour libre, créneau survolé) : 5,6:1, quand #C34111 n'y fait que 4,45:1 */ --blanc: #FFFFFF; /* le texte des boutons orange, le fond de la carte de réservation */ /* La gamme orangée de la charte, du pêche au rouille (rubans, nuages de points, dégradés des illustrations ; rubans.js, nuages.js). */ --orange-50: #F7D3B8; --orange-100: #F2B48C; /* pêche */ --orange-300: #E9784F; --orange-500: #DE4A15; --orange-600: #C34111; --orange-900: #8F2E0C; /* rouille */ /* ---------- Encre et papier atténués ---------- Plancher de l'encre atténuée : 0,60. En dessous, le texte sur le papier passe sous 4,5:1 (Lighthouse). La gradation reste au-dessus. */ --ink-78: rgba(20, 17, 15, 0.82); --ink-60: rgba(20, 17, 15, 0.76); /* le texte courant secondaire */ --ink-55: rgba(20, 17, 15, 0.72); --ink-50: rgba(20, 17, 15, 0.68); --ink-45: rgba(20, 17, 15, 0.64); --ink-40: rgba(20, 17, 15, 0.6); /* le gris des titres en deux tons (« … On part de là. ») : un titre de 28 px et plus, donc 3:1 suffit (accueil-sections.css) */ --texte-gris: rgba(20, 17, 15, 0.5); --paper-82: rgba(244, 241, 233, 0.82); --paper-74: rgba(244, 241, 233, 0.74); --paper-68: rgba(244, 241, 233, 0.68); --paper-60: rgba(244, 241, 233, 0.6); --paper-55: rgba(244, 241, 233, 0.55); --paper-50: rgba(244, 241, 233, 0.5); --paper-22: rgba(244, 241, 233, 0.22); /* ---------- Surfaces ---------- Le papier, puis des papiers un peu plus clairs pour ce qui se pose dessus. Jamais de blanc pur pour une grande carte, sauf la carte de réservation (voir --ombre-carte-action). */ --surface-carte: #FAF8F3; /* cartes bento, onglets (carte.css, accueil-sections.css) */ --surface-claire: #FCFBF8; /* bannière, section rayée, tableau */ --surface-panneau: #FFFDFB; /* le panneau de l'onglet choisi */ --surface-voile: #ECE6D9; /* le fond des visuels dans la fenêtre (CarteModale) */ --surface-image: #ECE8DE; /* le fond d'une image en attente */ --surface-bulle: #E9E6DE; /* bulle de message reçue */ --surface-reservation: #FBF7F0; /* la colonne « ce qu'on réserve » de la carte de réservation (styles.css) */ --fond-fenetre: rgba(236, 231, 219, 0.9); /* derrière une fenêtre ouverte */ /* ---------- Filets ---------- */ --rule: rgba(20, 17, 15, 0.14); /* le filet par défaut : sections, FAQ, barre */ --rule-strong: rgba(20, 17, 15, 0.55); /* le point « hors ligne » d'une présence (le pied prend --rule) */ --filet-carte: rgba(20, 17, 15, 0.12); /* le tour d'une carte */ --filet-onglet: rgba(20, 17, 15, 0.1); /* le tour d'un onglet, d'une fenêtre */ --filet-doux: rgba(20, 17, 15, 0.08); /* bannière, sections claires */ --filet-icone: rgba(20, 17, 15, 0.16); /* le carré d'icône d'une carte, les options */ --filet-champ: rgba(20, 17, 15, 0.45); /* un champ de saisie : 3:1, le minimum pour le voir */ --filet-bouton: rgba(20, 17, 15, 0.28); /* le bouton secondaire */ --filet-bouton-sombre: rgba(244, 241, 233, 0.4); /* ---------- Teintes orange légères ---------- */ --orange-voile: rgba(195, 65, 17, 0.1); /* le carré « + » de la FAQ */ --orange-voile-survol: rgba(195, 65, 17, 0.18); --orange-filet-survol: rgba(195, 65, 17, 0.35); /* onglet survolé */ --orange-filet: rgba(195, 65, 17, 0.45); /* onglet choisi, panneau */ --orange-fond-ligne: rgba(195, 65, 17, 0.12); /* une ligne cochée */ --peche-lueur: rgba(242, 180, 140, 0.25); /* la lueur d'un onglet choisi */ --corail-lueur: rgba(233, 120, 79, 0.2); /* l'éclairage chaud d'une carte */ /* ---------- Couleurs fonctionnelles ---------- */ --whatsapp: #25D366; /* le logo WhatsApp, et rien d'autre */ --en-ligne: #17A34A; /* le point « en ligne » (présence) : un vert franc, qui se lit sur l'orange d'un bouton comme sur le papier */ --erreur: #B3261E; /* rdv.css */ --etoiles: #F2B400; /* les étoiles d'un avis */ /* ---------- Dégradés ---------- Toujours dans les tons de Synaps : jamais de rose ni de violet. */ --degrade-orange: linear-gradient(150deg, #EE8A50, #C34111); /* pastilles, petits aplats */ --degrade-peche: linear-gradient(160deg, #F4B48A, #DE6A33); /* une image stylisée */ --degrade-onglet: radial-gradient(80% 90% at 100% 0%, rgba(242, 180, 140, 0.25), rgba(242, 180, 140, 0) 70%), #FFFFFF; --degrade-panneau: radial-gradient(60% 50% at 50% 0%, rgba(242, 180, 140, 0.16), rgba(242, 180, 140, 0) 70%), #FFFDFB; --degrade-carte-chaude: radial-gradient(55% 45% at 0% 100%, rgba(233, 120, 79, 0.2), rgba(233, 120, 79, 0.06) 55%, transparent 80%), #FAF8F3; /* la carte des avis, seule carte en couleur : le haut reste clair, un voile abricot flou au milieu, l'orange de Synaps en bas (apercu-avis.css). Avec background-origin: border-box, sinon un liseré orange en haut */ --degrade-carte-orangee: radial-gradient(48% 16% at 74% 50%, rgba(255, 214, 150, 0.75), rgba(255, 214, 150, 0) 100%), radial-gradient(60% 20% at 18% 64%, rgba(246, 168, 112, 0.55), rgba(246, 168, 112, 0) 100%), radial-gradient(90% 24% at 60% 100%, rgba(222, 96, 40, 0.4), rgba(222, 96, 40, 0) 100%), linear-gradient(180deg, #FAF8F3 0%, #FAF8F3 34%, #FBEBD6 48%, #F8D2AE 61%, #F4AE7E 76%, #EC8A54 90%, #E2713A 100%); --degrade-reflet: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); /* le verre (téléphone, fenêtre de navigateur) : un blanc translucide, un filet de lumière sur le bord ; pas de backdrop-filter */ --verre-fond: linear-gradient(160deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0.06) 70%, rgba(255, 255, 255, 0.28) 100%); --verre-bord: inset 0 0 0 1.3px rgba(255, 255, 255, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(20, 17, 15, 0.07), 0 18px 40px -14px rgba(20, 17, 15, 0.14); /* ---------- Typographie ---------- */ --title-font: "Host Grotesk", "Helvetica Neue", Arial, sans-serif; /* titres, depuis le 27/10/2026 */ --body-font: Archivo, "Archivo Repli", "Archivo Repli Android", Helvetica, Arial, sans-serif; --serif-font: Newsreader, "Newsreader Repli", "Newsreader Repli Android", Georgia, serif; /* visuels, illustrations */ --main-font: Caveat, cursive; /* courtes notes manuscrites, rien d'utile */ --mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* les tailles : du plus grand au plus petit, toutes fluides */ --taille-heros: clamp(44px, 5.6vw, 92px); /* le titre du haut de page */ --taille-heros-tel: clamp(32px, 9.4vw, 44px); /* le même, sous 760 px */ --taille-fenetre: clamp(30px, 3vw, 46px); /* le titre d'une fenêtre ouverte */ --taille-fenetre-bloc: clamp(24px, 2vw, 30px); /* le titre d'un bloc dans une fenêtre ouverte (800, -0,02em, 1,1) */ --taille-section: clamp(28px, 2.9vw, 44px); /* le titre d'une section */ --taille-banniere: clamp(26px, 2.6vw, 40px); --taille-sous-titre: clamp(24px, 2.1vw, 32px); /* le titre d'un sous-bloc */ --taille-carte: clamp(22px, 1.9vw, 30px); /* le titre d'une carte */ --taille-phrase: clamp(22px, 2vw, 28px); /* une phrase mise en avant */ --taille-question: clamp(19px, 1.5vw, 23px); /* une question de FAQ */ --taille-onglet: clamp(19px, 1.6vw, 24px); --taille-chapeau: clamp(17px, 1.35vw, 21px); /* le texte sous le titre du héros */ --taille-texte: clamp(16px, 1.2vw, 19px); /* le texte d'une section */ --taille-corps: 16px; /* tuiles, listes */ --taille-bouton: 15px; --taille-note: 14px; --taille-etiquette: 13px; /* ---------- Espacements ---------- */ --pad-x: clamp(20px, 3.4vw, 64px); /* la marge de côté de la page ; 10 px sous 420 px */ --pad-y: clamp(56px, 5.5vw, 96px); --gap-lg: clamp(28px, 3.4vw, 64px); --cta-gap: clamp(36px, 4vw, 72px); --marge-section: clamp(64px, 7vw, 96px); /* au-dessus de chaque section ; 48 px au téléphone */ --marge-sous-bloc: clamp(48px, 5.5vw, 80px); --marge-titre: clamp(36px, 4.5vw, 64px); /* sous le titre d'une section */ --pad-carte: clamp(20px, 2vw, 28px); --gouttiere: 16px; /* la grille de 12 colonnes, le bento */ --ecart-boutons: 12px; /* ---------- Mise en page ---------- */ --largeur-cadre: 1560px; /* le cadre de la page (.shell) */ --largeur-contenu: 1432px; /* la colonne de contenu : le cadre moins ses marges */ --largeur-fenetre: 1184px; /* une fenêtre ouverte */ --topbar-h: calc(clamp(14px, 1.4vw, 22px) * 2 + 26px); /* ---------- Rayons ---------- */ --rayon-bouton: 4px; /* boutons, carré « + » de la FAQ */ --rayon-champ: 6px; /* étiquettes, icône de notification */ --rayon-image: 8px; /* une image dans une carte */ --rayon-carte: 10px; /* cartes, onglets, bannière, notifications */ --rayon-panneau: 12px; /* panneau, cartes de preuve, visuels */ --rayon-fenetre: 14px; /* fenêtre ouverte, fenêtre de navigateur en verre */ --rayon-pastille: 999px; /* ---------- Ombres ---------- Pas d'ombre portée sur une carte, un cadre ou un conteneur : un filet fin suffit (une exception : la carte de réservation). Les ombres ci-dessous sont les seules admises, chacune à sa place. */ --ombre-aucune: none; /* les petites interfaces dessinées dans une illustration (fenêtre, notification, agenda) : un filet et une ombre chaude très diffuse */ --ombre-interface: 0 0 0 1px rgba(20, 17, 15, 0.06), 0 14px 26px -14px rgba(90, 40, 20, 0.45); --ombre-interface-grande: 0 1px 2px rgba(20, 17, 15, 0.04), 0 26px 50px -30px rgba(120, 50, 20, 0.38); /* une fenêtre ouverte par-dessus la page */ --ombre-fenetre: 0 2px 6px rgba(20, 17, 15, 0.05), 0 30px 60px -20px rgba(20, 17, 15, 0.25); /* les boutons flottants du bas de l'écran, au téléphone seulement */ --ombre-flottante: 0 6px 18px -8px rgba(20, 17, 15, 0.35); /* la carte de réservation, l'action principale d'une page : la seule carte qui porte une ombre, légère, en trois couches (Loïc, 26/10) */ --ombre-carte-action: 0 1px 2px rgba(20, 17, 15, 0.05), 0 6px 16px -4px rgba(20, 17, 15, 0.08), 0 28px 56px -24px rgba(20, 17, 15, 0.22); /* ---------- Mouvement ---------- */ --ease-sortie: cubic-bezier(0.16, 1, 0.3, 1); /* la courbe de Synaps : départ vif, arrivée douce, sans rebond */ --ease-fermeture: cubic-bezier(0.4, 0, 1, 1); /* ce qui s'en va */ --ease-balaie: cubic-bezier(0.4, 0, 0.2, 1); /* un reflet qui passe */ --duree-etat: 0.2s; /* couleur d'un bouton, d'un lien */ --duree-survol: 0.35s; /* une icône, un onglet */ --duree-entree: 0.6s; /* un bloc qui arrive */ --duree-scene: 0.8s; /* les couches d'une illustration */ --duree-fondu: 1.2s; /* les rubans qui apparaissent */ /* ---------- Plans ---------- */ --plan-barre: 5; /* la barre du haut, collante */ --plan-flottant: 15; /* boutons flottants et bulle du chat (styles.css, .flottant) */ --plan-consentement: 20; /* la bannière des cookies, au-dessus des flottants tant qu'on n'a pas choisi */ } /* Les points de rupture (une variable CSS ne vaut pas dans @media : on les écrit en dur, toujours ceux-ci) : 420 px très petit téléphone : --pad-x passe à 10 px 640 px téléphone : boutons l'un sous l'autre, à leur largeur 760 px téléphone : héros sur une colonne, onglets et cartes au doigt 900 px tablette : bento et grilles sur une colonne 1000 px fenêtre ouverte : contenu resserré, en-tête sur une colonne 1024 px petite tablette : tuiles sur deux colonnes */