/* ========================================================================= Raw Studio — feuille de style Les couleurs passent toutes par des variables sémantiques : --marque pour les aplats de marque, --trait pour la marque réduite à un trait fin, --action pour ce sur quoi on clique, --page et --panneau pour les fonds, --encre pour le texte. Changer de teinte, c'est remplacer un bloc. Le site est sombre par défaut. Une variante claire existe, atteignable par data-theme="clair" sur . Pour suivre le réglage du système à la place, voir la note en fin de section. Une seule famille typographique, Archivo variable ; l'axe de largeur (wdth) est le dispositif graphique de la page. ========================================================================= */ /* ---- Thème sombre (par défaut) ------------------------------------------ */ /* Noir d'encre à peine teinté de violet, aplats de marque en violet profond, et un violet plus clair pour l'action. Trois niveaux de surface qui se distinguent sans qu'aucun ne devienne gris. */ :root { color-scheme: dark; --marque: #322E58; /* aplats : nav, enseigne, plaques de prix */ --marque-fonce: #1C1A38; /* socle, pied de page */ --marque-survol: #45406F; --page: #0A0A11; /* fond général */ --panneau: #191926; /* blocs de contenu posés sur la page */ --action: #6355C4; /* aplats cliquables — blanc dessus, 5.8:1 */ --action-clair: #A69FEF; /* action posée sur la marque — 5.3:1 */ --action-survol: #7365D4; /* blanc dessus — 4.6:1 */ --action-fonce: #4C3FA0; --action-pale: rgba(166, 159, 239, 0.40); --sur-action: #FFFFFF; --encre: #E9E9F2; /* texte sur la page — 16.4:1 */ --encre-doux: #A0A0B2; /* secondaire — 7.7:1 */ --sur-marque: #E9E9F2; /* texte sur la marque — 10.4:1 */ --sur-marque-doux: #B0ADC8; /* secondaire — 5.8:1 */ --trait: #9A93E0; /* coches, chevrons, bordures fines — 6.3:1 */ --filet: rgba(233, 233, 242, 0.18); --filet-clair: rgba(233, 233, 242, 0.20); /* Arrondis */ --r-bouton: 10px; --r-bloc: 14px; --r-champ: 10px; --r-menu: 8px; /* Typographie */ --plume: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; /* Rythme */ --cadre: 1120px; --marge: clamp(20px, 5vw, 56px); --air: clamp(56px, 9vw, 112px); } /* ---- Variante claire ---------------------------------------------------- */ /* Même logique retournée : le fond monte, les aplats de marque descendent en noir violacé. Le violet d'action fonce pour rester lisible sur du blanc. */ :root[data-theme="clair"] { color-scheme: light; --marque: #17162A; --marque-fonce: #0F0E1D; --marque-survol: #2B2947; --page: #F3F3F8; --panneau: #FFFFFF; --action: #574CAF; /* blanc dessus — 6.9:1 */ --action-clair: #A69FEF; /* sur la marque — 7.5:1 */ --action-survol: #6355C4; /* blanc dessus — 5.8:1 */ --action-fonce: #453B8E; --action-pale: rgba(166, 159, 239, 0.45); --sur-action: #FFFFFF; --encre: #16161F; --encre-doux: #56566A; --sur-marque: #EFEFF6; --sur-marque-doux: #AFADC4; --trait: #4F44A5; --filet: rgba(22, 22, 31, 0.16); --filet-clair: rgba(239, 239, 246, 0.24); } /* Pour suivre le réglage du système au lieu d'imposer le sombre, décommenter : @media (prefers-color-scheme: light) { :root:not([data-theme="sombre"]) { … recopier le bloc clair ci-dessus … } } */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--encre); font-family: var(--plume); font-size: 1.125rem; /* 18px : la cible n'a pas vingt ans */ line-height: 1.65; font-variation-settings: "wdth" 100, "wght" 400; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-variation-settings: "wdth" 118, "wght" 700; line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance; } h1 { font-size: clamp(2.2rem, 6.4vw, 4rem); } h2 { font-size: clamp(1.8rem, 4.4vw, 2.75rem); } h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-variation-settings: "wdth" 110, "wght" 700; } p { margin: 0 0 1.1em; max-width: 66ch; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } .skip, .hors-ecran { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--action); color: var(--sur-action); padding: 12px 18px; border-radius: var(--r-bouton); font-variation-settings: "wdth" 100, "wght" 600; } :focus-visible { outline: 3px solid var(--action-fonce); outline-offset: 3px; } /* ---- Largeur de fer ---------------------------------------------------- */ .dedans { max-width: var(--cadre); margin-inline: auto; padding-inline: var(--marge); } /* ---- Boutons ----------------------------------------------------------- */ .btn { display: inline-block; font-family: inherit; font-size: 1rem; font-variation-settings: "wdth" 104, "wght" 600; line-height: 1.2; padding: 16px 26px; /* ≥ 44px de hauteur tactile */ border: 2px solid transparent; border-radius: var(--r-bouton); text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .btn--action { background: var(--action); color: var(--sur-action); border-color: var(--action); } .btn--action:hover { background: var(--action-survol); border-color: var(--action-survol); } .btn--filet { background: transparent; color: var(--sur-marque); border-color: var(--filet-clair); } .btn--filet:hover { border-color: var(--sur-marque); } /* ---- Bandeau de navigation --------------------------------------------- */ .bandeau { position: sticky; top: 0; z-index: 40; background: var(--marque); color: var(--sur-marque); } .bandeau__dedans { max-width: var(--cadre); margin-inline: auto; padding: 12px var(--marge) 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .marque { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; } .marque img { width: 34px; height: auto; } .marque__nom { font-size: 1.05rem; font-variation-settings: "wdth" 120, "wght" 700; letter-spacing: 0.02em; } .menu { display: flex; gap: 2px; order: 3; width: 100%; border-top: 1px solid var(--filet-clair); } .menu a { flex: 1; text-align: center; padding: 13px 10px; min-height: 44px; border-radius: var(--r-menu) var(--r-menu) 0 0; text-decoration: none; color: var(--sur-marque-doux); font-variation-settings: "wdth" 96, "wght" 500; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .menu a:hover { color: var(--sur-marque); } .menu a.is-active { color: var(--sur-marque); border-bottom-color: var(--action-clair); } .bandeau__long { display: none; } @media (min-width: 760px) { .bandeau__dedans { padding: 12px var(--marge); flex-wrap: nowrap; } .menu { order: 0; width: auto; border-top: 0; margin-right: 8px; } .menu a { flex: none; text-align: left; padding: 10px 14px; } .bandeau__long { display: inline; } .bandeau__court { display: none; } } .bandeau .btn { padding: 12px 20px; font-size: 0.95rem; } /* ---- L'enseigne (hero) -------------------------------------------------- */ /* Le titre EST l'enseigne : aplat de marque, double filet en retrait comme sur les plaques émaillées, estampille RW en bas à droite. */ .enseigne { background: var(--marque); color: var(--sur-marque); padding: clamp(36px, 6vw, 64px) 0 clamp(48px, 7vw, 80px); } .enseigne__cadre { position: relative; border: 2px solid var(--action-clair); border-radius: var(--r-bloc); padding: clamp(28px, 5vw, 60px) clamp(22px, 4vw, 56px) clamp(56px, 6vw, 68px); } .enseigne__cadre::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--action-pale); border-radius: calc(var(--r-bloc) - 6px); pointer-events: none; } .enseigne__surtitre { margin: 0 0 18px; font-size: 1rem; font-variation-settings: "wdth" 88, "wght" 600; color: var(--action-clair); } .enseigne__titre { max-width: 22ch; margin-bottom: 26px; } .enseigne__texte { font-size: clamp(1.05rem, 2.1vw, 1.25rem); color: var(--sur-marque-doux); max-width: 54ch; margin-bottom: 30px; } .enseigne__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .enseigne__note { font-size: 0.98rem; font-variation-settings: "wdth" 92, "wght" 500; color: var(--sur-marque-doux); margin: 0; } .enseigne__estampille { position: absolute; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 28px); width: clamp(44px, 7vw, 64px); opacity: 0.9; } /* Le seul mouvement non déclenché de la page : l'enseigne se peint. */ @media (prefers-reduced-motion: no-preference) { .enseigne__cadre { animation: cadre-trace .5s ease-out both; } .enseigne__surtitre, .enseigne__titre, .enseigne__texte, .enseigne__actions, .enseigne__note { animation: lettrage .45s ease-out both; } .enseigne__surtitre { animation-delay: .14s; } .enseigne__titre { animation-delay: .18s; } .enseigne__texte { animation-delay: .28s; } .enseigne__actions { animation-delay: .36s; } .enseigne__note { animation-delay: .44s; } } @keyframes cadre-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes lettrage { from { opacity: 0; } to { opacity: 1; } } /* ---- Ruban des métiers -------------------------------------------------- */ .ruban { background: var(--marque-fonce); color: var(--sur-marque-doux); border-top: 1px solid var(--filet-clair); } .ruban__liste { max-width: var(--cadre); margin-inline: auto; padding: 16px var(--marge); display: flex; flex-wrap: wrap; gap: 0; font-size: 0.98rem; font-variation-settings: "wdth" 88, "wght" 600; } .ruban__liste li { padding: 4px 18px; border-right: 1px solid var(--filet-clair); } .ruban__liste li:last-child { border-right: 0; } .ruban__liste li:first-child { padding-left: 0; } /* ---- Titres de section -------------------------------------------------- */ .section { padding-block: var(--air); } .section--panneau { background: var(--panneau); } .section--marque { background: var(--marque); color: var(--sur-marque); } .tete-section { max-width: 56ch; margin-bottom: clamp(32px, 5vw, 52px); } .tete-section p { font-size: 1.1rem; color: var(--encre-doux); margin-top: 16px; margin-bottom: 0; } .section--marque .tete-section p { color: var(--sur-marque-doux); } /* ---- Les trois offres --------------------------------------------------- */ /* Pas trois cartes identiques : le site vitrine est un panneau peint, les deux autres sont posées sur la page. L'écart porte l'information. */ .offres { display: grid; gap: 2px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--r-bloc); overflow: hidden; } @media (min-width: 900px) { .offres { grid-template-columns: 1.25fr 1fr 1fr; } } .offre { background: var(--panneau); padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; } .offre--phare { background: var(--marque); color: var(--sur-marque); } .offre h3 { margin-bottom: 14px; } .offre__accroche { color: var(--encre-doux); } .offre--phare .offre__accroche { color: var(--sur-marque-doux); } .offre__points { margin: 8px 0 26px; font-size: 1rem; } .offre__points li { padding: 9px 0 9px 20px; border-top: 1px solid var(--filet); position: relative; } .offre--phare .offre__points li { border-top-color: var(--filet-clair); } .offre__points li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 2px; background: var(--trait); } .offre--phare .offre__points li::before { background: var(--action-clair); } .offre__prix { margin: auto 0 0; padding-top: 18px; border-top: 2px solid var(--encre); font-size: 1.35rem; font-variation-settings: "wdth" 112, "wght" 700; } .offre--phare .offre__prix { border-top-color: var(--action-clair); color: var(--action-clair); /* 5.2:1 sur la marque */ } /* ---- Le parcours en cinq étapes ---------------------------------------- */ /* Numéroté parce que c'est réellement une séquence. */ .etapes { border-top: 1px solid var(--filet-clair); } .etape { border-bottom: 1px solid var(--filet-clair); padding: clamp(22px, 3vw, 30px) 0; display: grid; gap: 4px 26px; grid-template-columns: 54px 1fr; } @media (min-width: 860px) { .etape { grid-template-columns: 70px 15ch 1fr; align-items: baseline; } } .etape__num { grid-row: span 2; font-size: 2.2rem; font-variation-settings: "wdth" 118, "wght" 700; color: var(--action-clair); line-height: 1; } @media (min-width: 860px) { .etape__num { grid-row: auto; } } .etape h3 { margin: 0; } .etape p { margin: 0; color: inherit; opacity: .82; grid-column: 2 / -1; } @media (min-width: 860px) { .etape p { grid-column: 3; } } /* ---- Bandeau d'appel ---------------------------------------------------- */ .appel { background: var(--marque-fonce); color: var(--sur-marque); padding-block: var(--air); } .appel h2 { margin-bottom: 16px; } .appel p { color: var(--sur-marque-doux); font-size: 1.1rem; margin-bottom: 28px; } .appel__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---- Tête de page intérieure -------------------------------------------- */ .tete-page { background: var(--marque); color: var(--sur-marque); padding-block: clamp(46px, 7vw, 86px); border-bottom: 3px solid var(--action-clair); } .tete-page__surtitre { margin: 0 0 14px; font-size: 1rem; font-variation-settings: "wdth" 88, "wght" 600; color: var(--action-clair); } .tete-page p { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--sur-marque-doux); margin: 20px 0 0; max-width: 58ch; } /* ---- Prestations détaillées (page services) ----------------------------- */ .presta { padding-block: clamp(40px, 6vw, 68px); border-bottom: 1px solid var(--filet); } .presta:last-of-type { border-bottom: 0; } .presta__dedans { max-width: var(--cadre); margin-inline: auto; padding-inline: var(--marge); display: grid; gap: clamp(26px, 4vw, 52px); } @media (min-width: 900px) { .presta__dedans { grid-template-columns: 1fr 300px; align-items: start; } } .presta h2 { margin-bottom: 18px; } .presta__intro { color: var(--encre-doux); font-size: 1.08rem; } .coches { margin-top: 24px; } .coches li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--filet); font-size: 1.02rem; } .coches li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 11px; height: 6px; border-left: 2px solid var(--trait); border-bottom: 2px solid var(--trait); transform: rotate(-45deg); } /* Le panneau de prix : une plaque vissée sur la devanture. */ .panneau { background: var(--marque); color: var(--sur-marque); padding: clamp(24px, 3vw, 32px); border-top: 3px solid var(--action-clair); border-radius: var(--r-bloc); position: sticky; top: 90px; } .panneau__mention { font-size: 0.95rem; font-variation-settings: "wdth" 92, "wght" 500; color: var(--sur-marque-doux); margin: 0; } .panneau__prix { font-size: clamp(2.4rem, 5vw, 3.1rem); font-variation-settings: "wdth" 118, "wght" 700; line-height: 1; color: var(--action-clair); margin: 6px 0 14px; } .panneau .btn { margin-top: 18px; width: 100%; text-align: center; } @media (max-width: 899px) { .panneau { position: static; } } /* ---- Questions fréquentes ---------------------------------------------- */ .faq-liste { border-top: 1px solid var(--filet); max-width: 74ch; } .faq-liste details { border-bottom: 1px solid var(--filet); } .faq-liste summary { cursor: pointer; padding: 20px 40px 20px 0; font-size: 1.12rem; font-variation-settings: "wdth" 104, "wght" 600; position: relative; list-style: none; } .faq-liste summary::-webkit-details-marker { display: none; } .faq-liste summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px; border-right: 2px solid var(--trait); border-bottom: 2px solid var(--trait); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } .faq-liste details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq-liste p { margin: 0 0 22px; color: var(--encre-doux); } /* ---- Contact ------------------------------------------------------------ */ .presentation { padding-block: var(--air); background: var(--panneau); } .presentation h2 { margin-bottom: 20px; } .presentation p { font-size: 1.15rem; max-width: 62ch; margin-bottom: 0; } .contacts { display: grid; gap: 2px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--r-bloc); overflow: hidden; } @media (min-width: 720px) { .contacts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .contacts { grid-template-columns: repeat(3, 1fr); } } .contact-bloc { background: var(--panneau); padding: clamp(24px, 3vw, 34px); } .contact-bloc h3 { margin-bottom: 12px; } .contact-bloc--phare h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom: 14px; } .contact-bloc p { color: var(--encre-doux); font-size: 1.02rem; margin-bottom: 0; } .contact-bloc > a { display: inline-block; font-variation-settings: "wdth" 104, "wght" 600; text-decoration-thickness: 2px; text-underline-offset: 4px; margin-bottom: 8px; word-break: break-word; } .contact-bloc--phare { background: var(--marque); color: var(--sur-marque); grid-column: 1 / -1; } .contact-bloc--phare p { color: var(--sur-marque-doux); } .contact-bloc--phare .btn { margin-top: 18px; } .reference { font-variation-settings: "wdth" 88, "wght" 700; color: var(--action-clair); letter-spacing: 0.04em; } /* ---- Pied de page ------------------------------------------------------- */ .pied { background: var(--marque-fonce); color: var(--sur-marque-doux); padding-top: clamp(46px, 6vw, 72px); } .pied__dedans { max-width: var(--cadre); margin-inline: auto; padding: 0 var(--marge) 40px; display: grid; gap: 36px; } @media (min-width: 820px) { .pied__dedans { grid-template-columns: 1.4fr 1fr 1fr; } } .pied__nom { display: block; font-size: 1.25rem; font-variation-settings: "wdth" 120, "wght" 700; color: var(--sur-marque); margin-bottom: 14px; } .pied p { font-size: 1rem; max-width: 40ch; } .pied h3 { font-size: 1rem; font-variation-settings: "wdth" 92, "wght" 600; color: var(--sur-marque); margin-bottom: 12px; } .pied__colonne a, .pied__colonne span { display: block; padding: 7px 0; text-decoration: none; font-size: 1rem; } .pied__colonne a:hover { color: var(--sur-marque); text-decoration: underline; } .pied__socle { border-top: 1px solid var(--filet-clair); padding: 18px var(--marge); max-width: var(--cadre); margin-inline: auto; font-size: 0.95rem; font-variation-settings: "wdth" 92, "wght" 500; } /* ========================================================================= Widget de discussion ========================================================================= */ .chat-lanceur { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 10px; background: var(--action); color: var(--sur-action); border: 2px solid var(--action-fonce); border-radius: var(--r-bouton); padding: 14px 18px; font-family: inherit; font-size: 1rem; font-variation-settings: "wdth" 100, "wght" 600; cursor: pointer; transition: background-color .2s ease; } .chat-lanceur:hover { background: var(--action-survol); } .chat-lanceur.is-hidden { display: none; } .chat-lanceur__texte { display: none; } @media (min-width: 520px) { .chat-lanceur__texte { display: inline; } } .chat { position: fixed; right: 0; bottom: 0; z-index: 60; width: min(400px, 100vw); max-height: min(620px, 92dvh); display: flex; flex-direction: column; background: var(--panneau); border: 2px solid var(--marque); border-radius: var(--r-bloc); overflow: hidden; } @media (min-width: 520px) { .chat { right: 18px; bottom: 18px; } } .chat[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .chat.is-opening { animation: chat-ouvre .22s ease-out; } } @keyframes chat-ouvre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .chat__tete { background: var(--marque); color: var(--sur-marque); padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; } .chat__titre { margin: 0; font-variation-settings: "wdth" 110, "wght" 700; font-size: 1.05rem; } .chat__etat { margin: 2px 0 0; font-size: 0.9rem; color: var(--sur-marque-doux); } .chat__fermer { margin-left: auto; background: transparent; border: 1px solid var(--filet-clair); color: var(--sur-marque); width: 40px; height: 40px; border-radius: var(--r-menu); display: grid; place-items: center; cursor: pointer; flex: none; } .chat__fermer:hover { border-color: var(--sur-marque); } .chat__journal { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--page); } .msg { max-width: 86%; padding: 11px 14px; font-size: 1rem; line-height: 1.5; } .msg--bot { background: var(--panneau); border-left: 3px solid var(--trait); border-radius: var(--r-champ); border-bottom-left-radius: 3px; align-self: flex-start; } .msg--user { background: var(--marque); color: var(--sur-marque); border-radius: var(--r-champ); border-bottom-right-radius: 3px; align-self: flex-end; } .msg--note { align-self: center; max-width: 100%; text-align: center; font-size: 0.92rem; color: var(--encre-doux); background: transparent; padding: 4px 0; } .typing { display: inline-flex; gap: 5px; align-items: center; } .typing span { width: 6px; height: 6px; background: var(--encre-doux); border-radius: 50%; animation: pulse 1.1s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; } @keyframes pulse { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: .6; } } .chat__rapide { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; background: var(--page); } .chat__rapide:empty { display: none; } .quick { font-family: inherit; font-size: 0.95rem; font-variation-settings: "wdth" 96, "wght" 600; padding: 10px 14px; min-height: 44px; background: var(--panneau); color: var(--encre); border: 2px solid var(--trait); border-radius: var(--r-bouton); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .quick:hover { background: var(--marque); color: var(--sur-marque); } .chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--filet); background: var(--panneau); } .chat__champ { flex: 1; font-family: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--filet); border-radius: var(--r-champ); background: var(--page); color: var(--encre); min-width: 0; } .chat__champ:focus { border-color: var(--trait); } .chat__envoyer { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--marque); color: var(--sur-marque); border: 0; border-radius: var(--r-bouton); cursor: pointer; transition: background-color .2s ease; } .chat__envoyer:hover { background: var(--marque-survol); } /* ---- Impression --------------------------------------------------------- */ @media print { .bandeau, .chat, .chat-lanceur, .appel { display: none; } body { background: #fff; color: #000; font-size: 11pt; } }