/* ============================================================ Vitrine publique — lartisandusite.fr ------------------------------------------------------------ Ces styles n'habillent QUE la vitrine. Le sélecteur de portée `[data-vue="vitrine"]` sur les empêche de déborder sur l'outil, qui partage le même index.html. Tout est pensé téléphone d'abord : c'est là que les commerçants ouvrent le lien, souvent entre deux services, d'une seule main. ============================================================ */ [data-vue="vitrine"] { --creme: #FBF7EF; --creme2: #F2EADB; --blanc: #FFFFFF; --encre: #26211C; --gris: #6B6157; --ligne: #E1D6C2; --bordeaux: #8C2F2F; --bordeaux-fonce: #742525; --vert: #2F6B4A; --or: #B4762A; /* Bordure des champs et des boutons-contour : 3:1 minimum sur les trois fonds de la page (crème, crème alterné, blanc des cartes). Le beige d’origine tenait 1,84:1 — on ne voyait pas où commençait le champ. */ --bordure: #8F836F; } [data-vue="vitrine"] body { margin: 0; background: var(--creme); color: var(--encre); font-family: "Source Sans 3", system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } .lw { max-width: 1080px; margin: 0 auto; padding: 0 22px; } .lnarrow { max-width: 760px; } h1, h2, h3 { font-family: Bitter, Georgia, serif; line-height: 1.14; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(1.85rem, 6.2vw, 3.25rem); letter-spacing: -.015em; } h2 { font-size: clamp(1.42rem, 4.4vw, 2.1rem); letter-spacing: -.01em; } h3 { font-size: 1.13rem; } .leye { display: block; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--vert); margin-bottom: 12px; } .lsub { color: var(--gris); font-size: 1.06rem; margin: 0 0 26px; max-width: 62ch; } /* ---------- boutons ---------- 44 px de haut au minimum : en dessous, un pouce rate la cible une fois sur trois, et c'est toujours le bouton qui compte qu'on rate. */ .lbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.5em; background: var(--bordeaux); color: #fff !important; border: 0; border-radius: 11px; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.25; text-decoration: none; text-align: center; transition: background .15s, transform .12s; } .lbtn:hover { background: var(--bordeaux-fonce); transform: translateY(-1px); } .lbtn:active { transform: none; } .lbtn:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; } .lbtn.ghost { background: transparent; color: var(--encre) !important; border: 1.5px solid var(--bordure); } .lbtn.ghost:hover { background: var(--blanc); border-color: var(--bordeaux); } .lbtn[disabled] { opacity: .6; cursor: default; transform: none; } .lbtn .court { display: none; } /* ---------- en-tête ---------- */ .lhd { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 239, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); } .lhd .lw { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; } .lmarq { font-family: Bitter, Georgia, serif; font-weight: 800; font-size: 1.12rem; color: var(--bordeaux); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; display: inline-flex; align-items: center; min-height: 44px; } .lmarq:focus-visible, .lnav a:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; } .lnav { display: flex; gap: 20px; align-items: center; margin-left: auto; } .lnav a:not(.lbtn) { color: var(--gris); text-decoration: none; font-weight: 600; font-size: .93rem; } .lnav a:not(.lbtn):hover { color: var(--bordeaux); } .lhd .lbtn { min-height: 44px; padding: .5em 1.15em; font-size: .93rem; border-radius: 9px; } /* ---------- bannière ---------- */ .lhero { padding: 52px 0 34px; } .lhero .lsub { font-size: 1.12rem; } .lactions { display: flex; gap: 12px; flex-wrap: wrap; } .ltrust { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; padding: 0; list-style: none; } .ltrust li { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 999px; padding: .42em 1em; font-size: .845rem; font-weight: 600; color: var(--gris); } section { padding: 58px 0; } .lalt { background: var(--creme2); } .lborde { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); } /* ---------- la méthode ---------- */ .lsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-top: 30px; } .lstep { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 24px; } .lstep .n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bordeaux); color: #fff; font-weight: 800; font-family: Bitter, serif; margin-bottom: 13px; } .lstep p { color: var(--gris); margin: 0; font-size: .96rem; } .lincl { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 8px 26px; margin: 26px 0 0; padding: 0; list-style: none; } .lincl li { padding-left: 25px; position: relative; color: var(--gris); } .lincl li::before { content: "✓"; position: absolute; left: 0; color: var(--vert); font-weight: 800; } /* ---------- offre ---------- */ .lprix { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; margin-top: 32px; } .lcard { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 26px; position: relative; display: flex; flex-direction: column; } .lcard.reco { border: 2px solid var(--bordeaux); } .lcard .tag { position: absolute; top: -12px; left: 20px; background: var(--bordeaux); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .38em .9em; border-radius: 999px; } .lcard .ps { color: var(--gris); font-size: .89rem; margin: 4px 0 14px; } .lcard ul { padding: 0; list-style: none; margin: 0 0 4px; color: var(--gris); font-size: .94rem; } .lcard li { padding: 4px 0 4px 24px; position: relative; } .lcard li::before { content: "✓"; position: absolute; left: 0; color: var(--vert); font-weight: 800; } /* ---------- questions ---------- */ .lfaq { margin-top: 28px; border-top: 1px solid var(--ligne); } .lfaq details { border-bottom: 1px solid var(--ligne); } .lfaq summary { cursor: pointer; list-style: none; padding: 17px 34px 17px 0; position: relative; font-weight: 700; font-family: Bitter, Georgia, serif; font-size: 1.03rem; } .lfaq summary::-webkit-details-marker { display: none; } .lfaq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--bordeaux); line-height: 1; } .lfaq details[open] summary::after { content: "–"; } .lfaq summary:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; } .lfaq p { margin: 0 0 18px; color: var(--gris); max-width: 66ch; } /* ---------- contact ---------- */ .lform { max-width: 560px; margin: 28px auto 0; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 24px; } .lform label { display: block; font-size: .82rem; font-weight: 700; color: var(--gris); margin: 14px 0 5px; } .lform input, .lform textarea { width: 100%; box-sizing: border-box; padding: .78em .9em; border: 1.5px solid var(--bordure); border-radius: 9px; background: var(--creme); font-family: inherit; font-size: 1rem; color: var(--encre); } .lform input:focus, .lform textarea:focus { outline: 2px solid var(--bordeaux); outline-offset: 1px; } .lg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lok { background: #ECFDF3; border: 1px solid #12B76A; color: #05603A; padding: 14px; border-radius: 9px; margin-top: 14px; } .lko { background: #FEF3F2; border: 1px solid #F04438; color: #912018; padding: 14px; border-radius: 9px; margin-top: 14px; } .ldirect { text-align: center; color: var(--gris); margin-top: 20px; } .ldirect a { color: var(--bordeaux); font-weight: 700; } .lft { border-top: 1px solid var(--ligne); padding: 28px 0 34px; color: var(--gris); font-size: .85rem; } .lft .lw { display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: space-between; } .lft a { color: var(--gris); } /* ---------- fil d'Ariane (pages métier) ---------- */ .lfil { padding-top: 18px; font-size: .85rem; color: var(--gris); } .lfil a { color: var(--gris); } .lfil a:hover { color: var(--bordeaux); } .lfil span[aria-hidden] { margin: 0 5px; opacity: .6; } .lfil + .lhero { padding-top: 22px; } /* ---------- ce qui fait perdre des clients ---------- */ .ldouleurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px 26px; margin: 30px 0 0; } .ldouleurs > div { border-left: 3px solid var(--bordeaux); padding-left: 16px; } .ldouleurs dt { font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 1.04rem; margin-bottom: 5px; } .ldouleurs dd { margin: 0; color: var(--gris); font-size: .95rem; } /* ---------- liens entre métiers ---------- */ .lliens { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .lliens a { display: flex; flex-direction: column; gap: 4px; min-height: 44px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 13px; padding: 16px 44px 16px 18px; text-decoration: none; color: var(--encre); position: relative; transition: border-color .15s, transform .12s; } .lliens a::after { content: "→"; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); color: var(--bordeaux); font-size: 1.15rem; } .lliens a:hover { border-color: var(--bordeaux); transform: translateY(-1px); } .lliens a:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; } .lliens b { font-family: Bitter, Georgia, serif; font-size: 1.05rem; } .lliens span { color: var(--gris); font-size: .89rem; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .lliens a:hover { transform: none; } } /* ============================================================ Le bloc « Voyez votre site maintenant » ============================================================ */ .lself { background: var(--creme2); } .sfbox { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 16px; padding: 20px; margin-top: 22px; box-shadow: 0 14px 40px rgba(38, 33, 28, .07); } .sfrow { display: flex; gap: 10px; flex-wrap: wrap; } .sfrow input { flex: 1 1 190px; min-width: 0; padding: .8em 1em; border: 1.5px solid var(--bordure); border-radius: 10px; background: var(--creme); font-family: inherit; font-size: 1rem; color: var(--encre); } .sfrow input.ville { flex: 0 1 165px; } .sfrow input:focus { outline: 2px solid var(--bordeaux); outline-offset: 1px; } .sfrow .lbtn { flex: 0 0 auto; } .sfnote { color: var(--gris); font-size: .85rem; margin: 12px 0 0; } .sfliste { display: grid; gap: 8px; margin-top: 16px; } .sfcand { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--creme); border: 1.5px solid var(--ligne); border-radius: 12px; padding: 13px 15px; cursor: pointer; font-family: inherit; font-size: .95rem; color: var(--encre); transition: border-color .15s, transform .15s; } .sfcand:hover { border-color: var(--bordeaux); transform: translateY(-1px); } .sfcand:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; } .sfcand .ic { font-size: 1.3rem; flex: none; } .sfcand b { display: block; font-size: 1rem; } .sfcand span { display: block; color: var(--gris); font-size: .85rem; } .sfcand em { font-style: normal; color: var(--bordeaux); font-weight: 700; flex: none; font-size: .85rem; } .sfetape { display: flex; align-items: center; gap: 11px; margin-top: 16px; color: var(--gris); font-size: .95rem; } .sfspin { width: 19px; height: 19px; border: 2.5px solid var(--ligne); border-top-color: var(--bordeaux); border-radius: 50%; animation: sfturn .8s linear infinite; flex: none; } @keyframes sfturn { to { transform: rotate(360deg); } } .sfok { background: #ECFDF3; border: 1px solid #6CE9A6; border-radius: 12px; padding: 18px 20px; margin-top: 16px; } .sfok h3 { margin: 0 0 6px; } .sferr { background: #FEF3F2; border: 1px solid #FDA29B; border-radius: 12px; padding: 15px 18px; margin-top: 16px; color: #912018; } .sflien { background: 0; border: 0; padding: 0; font: inherit; color: var(--bordeaux); font-weight: 700; cursor: pointer; text-decoration: underline; } .sfform { background: var(--creme); border: 1.5px solid var(--ligne); border-radius: 14px; padding: 20px; margin-top: 16px; } .sfform h3 { margin: 0 0 14px; } .sfg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sfg2 label { display: block; font-size: .84rem; font-weight: 700; color: var(--gris); } .sfg2 label em { font-style: normal; color: var(--bordeaux); } .sfg2 label span { font-weight: 400; color: var(--gris); opacity: .8; } .sfg2 .sfl2 { grid-column: 1 / -1; } .sfg2 input { width: 100%; box-sizing: border-box; margin-top: 5px; padding: .72em .85em; border: 1.5px solid var(--bordure); border-radius: 9px; background: var(--blanc); font-family: inherit; font-size: 1rem; color: var(--encre); } .sfg2 input:focus { outline: 2px solid var(--bordeaux); outline-offset: 1px; } .sftypes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } .sftype { background: var(--blanc); border: 1.5px solid var(--ligne); border-radius: 10px; padding: 11px 8px; cursor: pointer; font: inherit; font-size: .82rem; color: var(--gris); text-align: center; line-height: 1.3; min-height: 62px; } .sftype span { display: block; font-size: 1.3rem; margin-bottom: 3px; } .sftype:hover { border-color: var(--bordeaux); } .sftype.on { border-color: var(--bordeaux); color: var(--encre); font-weight: 700; box-shadow: 0 0 0 1px var(--bordeaux); } /* ============================================================ Téléphone ------------------------------------------------------------ Les corrections qui comptent : un en-tête qui ne mange pas le quart de l'écran, des boutons pleine largeur, et rien qui se coupe sur deux lignes par accident. ============================================================ */ @media (max-width: 860px) { .lnav a:not(.lbtn) { display: none; } } @media (max-width: 640px) { [data-vue="vitrine"] body { font-size: 16.5px; } .lw { padding: 0 18px; } section { padding: 42px 0; } /* En-tête : 58 px au lieu de 102. Le libellé long passe en version courte plutôt que de se replier sur deux lignes. */ .lhd .lw { padding-top: 6px; padding-bottom: 6px; gap: 10px; } .lmarq { font-size: 1.02rem; } /* 44 px de haut, y compris pour le lien de marque : la zone tapable ne se limite pas à la hauteur des lettres. */ .lhd .lbtn { min-height: 44px; padding: .5em 1em; font-size: .88rem; } .lbtn .long { display: none; } .lbtn .court { display: inline; } .lhero { padding: 34px 0 26px; } .lhero .lsub { font-size: 1.03rem; } .lsaut { display: none; } /* le retour à la ligne est décidé pour le grand écran */ /* Empilés et pleine largeur : sur un écran étroit, deux boutons côte à côte donnent deux cibles trop petites, et l'un des deux passe sous l'autre avec un espacement bancal. */ .lactions { flex-direction: column; align-items: stretch; gap: 10px; } .ltrust { margin-top: 22px; gap: 7px; } .ltrust li { font-size: .81rem; padding: .38em .85em; } .sfbox { padding: 16px; } .sfrow { gap: 9px; } .sfrow input, .sfrow input.ville { flex: 1 1 100%; } .sfrow .lbtn { flex: 1 1 100%; } /* le bouton ne reste pas orphelin à mi-largeur */ .sfg2 { grid-template-columns: 1fr; } .sftypes { grid-template-columns: 1fr 1fr; } .lg2 { grid-template-columns: 1fr; } .lform { padding: 20px; } .lcard, .lstep { padding: 22px; } .lft .lw { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .lbtn, .sfcand { transition: none; } .lbtn:hover, .sfcand:hover { transform: none; } .sfspin { animation-duration: 2.4s; } }