/* mateogodet.com Mise en page : bandes pleine largeur qui alternent vert nuit et blanc, texte aligné à gauche, une seule pièce forte par écran (la bulle citron du portrait, les prix, l'appel à l'action). */ @font-face { font-family: "Gabarito"; src: url("../fonts/gabarito-latin-wght.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Couleurs de la DA */ --nuit: #083335; --nuit-clair: #0C4144; --abysse: #052224; --citron: #B4FA1E; --citron-vif: #C8FF55; --citron-fonce: #4D6B00; --blanc: #FFFFFF; --brume: #EEF5F3; --trait: #D3E0DD; --texte: #2A4547; --texte-doux: #4F6A6B; --sur-nuit: #FFFFFF; --sur-nuit-doux: #C9D2D3; --trait-nuit: rgba(255, 255, 255, 0.16); --erreur: #A1261B; /* Typographie */ --f-titre: "Gabarito", "Arial Black", "Helvetica Neue", Arial, sans-serif; --f-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Formes et mesures */ --bulle: 50% 50% 50% 0; --rayon: 1.25rem; --contenu: 1180px; --lecture: 66ch; --pas: clamp(4rem, 9vw, 7rem); --gouttiere: clamp(16px, 4vw, 40px); color-scheme: light; } /* Base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; } /* les liens vers une ancre s'arrêtent sous l'en-tête fixe */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--blanc); color: var(--texte); font-family: var(--f-texte); font-size: 1.0625rem; line-height: 1.62; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--blanc); } img, svg { max-width: 100%; } img { height: auto; display: block; } a { color: inherit; } a[href^="tel:"] { white-space: nowrap; } p, ul, ol, figure, blockquote, dl, dd { margin: 0; } h1, h2, h3, h4 { margin: 0; font-family: var(--f-titre); color: var(--nuit); line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance; } h1, .h1 { font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 5.1vw, 4.25rem); line-height: 0.98; } h2, .h2 { font-weight: 900; text-transform: uppercase; font-size: clamp(1.85rem, 3.7vw, 3rem); line-height: 1; } h3, .h3 { font-weight: 800; font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.15; letter-spacing: -0.005em; } strong { font-weight: 700; color: inherit; } ::selection { background: var(--citron); color: var(--nuit); } :focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; border-radius: 4px; } .bande--nuit :focus-visible, .hero :focus-visible, .tete-page :focus-visible, .pied :focus-visible, .barre-mobile :focus-visible { outline-color: var(--citron); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lien-evitement { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--citron); color: var(--nuit); padding: .7rem 1rem; border-radius: .6rem; font-weight: 700; text-decoration: none; } .lien-evitement:focus { top: calc(1rem + env(safe-area-inset-top, 0px)); } /* Cadre et bandes */ .cadre { width: 100%; max-width: calc(var(--contenu) + 2 * var(--gouttiere)); margin-inline: auto; padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px)); padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px)); } .bande { padding-block: var(--pas); } .bande--nuit { background: var(--nuit); color: var(--sur-nuit-doux); } .bande--nuit h1, .bande--nuit h2, .bande--nuit h3 { color: var(--sur-nuit); } .bande--brume { background: var(--brume); } .bande--serree { padding-block: clamp(3rem, 6vw, 4.5rem); } .entete-section { display: grid; gap: 1.1rem; max-width: 46rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } .entete-section p { font-size: clamp(1.05rem, 1.3vw, 1.18rem); max-width: 58ch; } .chapo { font-size: clamp(1.08rem, 1.45vw, 1.24rem); line-height: 1.55; } /* Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 3.1rem; padding: .8rem 1.4rem; border-radius: 999px; border: 2px solid transparent; font-family: var(--f-texte); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn svg { width: 1.15em; height: 1.15em; flex: none; } .btn--citron { background: var(--citron); color: var(--nuit); } .btn--citron:hover { background: var(--citron-vif); } .btn--nuit { background: var(--nuit); color: var(--blanc); } .btn--nuit:hover { background: var(--nuit-clair); } .btn--contour { border-color: rgba(255,255,255,.55); color: var(--blanc); background: transparent; } .btn--contour:hover { border-color: var(--citron); color: var(--citron); } .btn--contour-nuit { border-color: var(--nuit); color: var(--nuit); background: transparent; } .btn--contour-nuit:hover { background: var(--nuit); color: var(--blanc); } .btn--large { width: 100%; } .actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .lien { color: var(--nuit); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--citron-fonce); text-underline-offset: 4px; } .lien:hover { text-decoration-color: var(--nuit); } .bande--nuit .lien, .hero .lien { color: var(--blanc); text-decoration-color: var(--citron); } /* En-tête */ .entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--blanc); border-bottom: 1px solid var(--trait); } .entete__barre { display: flex; align-items: center; gap: 1.25rem; min-height: 4.25rem; } .logo { display: inline-flex; align-items: center; gap: .6rem; flex: none; font-family: var(--f-titre); font-weight: 900; font-size: 1.28rem; letter-spacing: -.015em; color: var(--nuit); text-decoration: none; } .logo__mg { display: block; flex: none; width: auto; height: 1.95rem; } .nav { margin-left: auto; } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; } .nav a { text-decoration: none; color: var(--texte); font-weight: 500; font-size: .98rem; padding-block: .4rem; } .nav a:hover, .nav a[aria-current="page"] { color: var(--nuit); text-decoration: underline; text-decoration-color: var(--citron); text-decoration-thickness: 3px; text-underline-offset: 7px; } .entete__contact { display: flex; align-items: center; gap: .9rem; } .entete__tel { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--nuit); text-decoration: none; white-space: nowrap; } .entete__tel svg { width: 1.05rem; height: 1.05rem; } .entete .btn { min-height: 2.65rem; padding: .55rem 1.1rem; font-size: .95rem; } .menu-btn { display: none; margin-left: auto; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .5rem .9rem; border: 2px solid var(--nuit); border-radius: 999px; background: transparent; color: var(--nuit); font: 700 .95rem/1 var(--f-texte); cursor: pointer; } .menu-btn svg { width: 1.1rem; height: 1.1rem; } @media (max-width: 1080px) { .entete__tel span { display: none; } } @media (max-width: 960px) { .menu-btn { display: inline-flex; } .entete__contact { display: none; } .nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: var(--blanc); border-bottom: 1px solid var(--trait); display: none; } .nav.ouvert { display: block; } .nav ul { flex-direction: column; gap: 0; padding: .5rem max(var(--gouttiere), env(safe-area-inset-right, 0px)) 1.25rem max(var(--gouttiere), env(safe-area-inset-left, 0px)); } .nav li + li { border-top: 1px solid var(--trait); } .nav a { display: block; padding: .95rem 0; font-size: 1.05rem; } .no-js .nav { position: static; display: block; border: 0; } .no-js .menu-btn { display: none; } } /* Héros */ .hero { background: var(--nuit); color: var(--sur-nuit-doux); padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; } .hero__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .hero__texte { display: grid; gap: 1.6rem; min-width: 0; } .hero h1 { color: var(--blanc); } .hero h1 .suite { display: block; color: var(--citron); margin-top: .18em; } .hero__intro { font-size: clamp(1.08rem, 1.45vw, 1.25rem); line-height: 1.55; max-width: 40rem; color: var(--sur-nuit-doux); } .hero__intro strong { color: var(--blanc); } .garanties { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; font-size: .95rem; color: var(--sur-nuit-doux); } .garanties li { display: inline-flex; align-items: center; gap: .5rem; } .garanties svg { width: 1.1rem; height: 1.1rem; color: var(--citron); flex: none; } .portrait { justify-self: center; width: min(100%, 360px); display: grid; gap: 1.4rem; } .portrait__bulle { background: var(--citron); border-radius: var(--bulle); padding: 6%; aspect-ratio: 1; max-width: 100%; } .portrait__bulle img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; } .portrait__legende { display: grid; gap: .2rem; padding-left: 9%; } .portrait__nom { font-weight: 700; color: var(--citron); font-size: 1.15rem; } .portrait__role { color: var(--blanc); border-left: 2px solid var(--blanc); padding-left: .6rem; line-height: 1.35; font-size: 1.02rem; } @media (max-width: 860px) { .hero__grille { grid-template-columns: 1fr; } .portrait { justify-self: start; width: min(100%, 300px); grid-template-columns: 7.5rem 1fr; align-items: center; gap: 1.1rem; } .portrait__legende { padding-left: 0; } .portrait__role { font-size: .95rem; } } /* Le constat */ .constat { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; } .constat__texte { display: grid; gap: 1.25rem; position: sticky; top: 7rem; } .constat__texte p { font-size: clamp(1.05rem, 1.3vw, 1.16rem); } .faits { list-style: none; padding: 0; display: grid; gap: 2.25rem; } .fait { display: grid; gap: .5rem; padding-top: 1.4rem; border-top: 2px solid var(--nuit); } .fait__chiffre { font-family: var(--f-titre); font-weight: 900; color: var(--nuit); font-size: clamp(2.6rem, 5vw, 3.9rem); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .fait p { font-size: 1.06rem; max-width: 46ch; } .source { font-size: .85rem; color: var(--texte-doux); } .source a { color: var(--texte-doux); text-underline-offset: 3px; } .bande--nuit .source, .bande--nuit .source a { color: var(--sur-nuit-doux); } .constat__chute { margin-top: 2.5rem; font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.2; color: var(--nuit); max-width: 34ch; } @media (max-width: 860px) { .constat { grid-template-columns: 1fr; } .constat__texte { position: static; } } /* Les leviers */ .leviers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4.5rem); } .levier { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.25rem; align-items: start; } .levier h3 { align-self: center; } .levier p { grid-column: 2; } .pastille { width: 3.4rem; height: 3.4rem; flex: none; background: var(--citron); color: var(--nuit); border-radius: var(--bulle); display: grid; place-items: center; grid-row: span 2; } .pastille svg { width: 1.55rem; height: 1.55rem; } @media (max-width: 720px) { .leviers { grid-template-columns: 1fr; } } .liens-services { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: baseline; color: var(--texte-doux); } /* Les offres */ .offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .offre { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; border: 1px solid var(--trait-nuit); border-radius: var(--rayon); padding: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--sur-nuit-doux); } .offre__tete { display: grid; gap: .45rem; } .offre__etiquette { justify-self: start; background: var(--citron); color: var(--nuit); font-weight: 700; font-size: .82rem; letter-spacing: .02em; padding: .3rem .7rem; border-radius: 999px; margin-bottom: .35rem; } .offre h3 { font-size: 1.5rem; } .offre__pour { font-size: .95rem; } .offre__prix { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; color: var(--blanc); } .offre__montant { font-family: var(--f-titre); font-weight: 900; font-size: clamp(2.8rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .offre__periode { font-weight: 600; font-size: 1rem; } .offre__mise { font-size: .95rem; line-height: 1.5; } .offre__mise strong { color: var(--blanc); } .coches { list-style: none; padding: 0; display: grid; gap: .65rem; font-size: .98rem; line-height: 1.45; } .coches li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: .65rem; align-items: start; } .coches svg { width: 1.15rem; height: 1.15rem; margin-top: .17rem; color: var(--citron); } .offre .btn { margin-top: auto; } .offre--phare { background: var(--blanc); color: var(--texte); border-color: var(--blanc); box-shadow: 0 0 0 3px var(--citron); } .bande--nuit .offre--phare h3 { color: var(--nuit); } .offre--phare .offre__prix { color: var(--nuit); } .offre--phare .offre__mise strong { color: var(--nuit); } .offre--phare .coches svg { color: var(--citron-fonce); } .offres__bas { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; } .encart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; border-radius: var(--rayon); padding: 1.4rem 1.5rem; background: var(--nuit-clair); color: var(--sur-nuit-doux); } .encart .pastille { width: 2.6rem; height: 2.6rem; grid-row: auto; } .encart .pastille svg { width: 1.2rem; height: 1.2rem; } .encart__titre { font-weight: 700; color: var(--blanc); margin-bottom: .2rem; } .encart p { font-size: .98rem; } .mention-tva { margin-top: 1.5rem; font-size: .9rem; color: var(--sur-nuit-doux); } .offres--clair .offre { border-color: var(--trait); color: var(--texte); background: var(--blanc); } .offres--clair .offre h3, .offres--clair .offre__prix { color: var(--nuit); } .offres--clair .offre .coches svg { color: var(--citron-fonce); } .offres--clair .offre__mise strong { color: var(--nuit); } .offres--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 60rem; } @media (max-width: 960px) { .offres { grid-template-columns: 1fr; max-width: 34rem; } .offres__bas { grid-template-columns: 1fr; } } /* Réalisation */ .cas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .cas__texte { display: grid; gap: 1.25rem; min-width: 0; } .ecrans { position: relative; padding: 0 9% 11% 0; min-width: 0; } .navigateur { border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; background: var(--blanc); box-shadow: 0 34px 60px -34px rgba(8, 51, 53, .5); } .navigateur__barre { display: flex; align-items: center; gap: .75rem; padding: .55rem .8rem; background: var(--brume); border-bottom: 1px solid var(--trait); } .navigateur__points { display: flex; gap: .35rem; } .navigateur__points i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--trait); } .navigateur__url { flex: 1; min-width: 0; background: var(--blanc); border-radius: 999px; padding: .2rem .8rem; font-size: .8rem; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navigateur__vue { aspect-ratio: 16 / 10; overflow: hidden; background: var(--brume); } .navigateur__vue img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } @media (prefers-reduced-motion: no-preference) { .navigateur__vue img { transition: object-position 7s ease-in-out; } .ecrans:hover .navigateur__vue img, .ecrans:focus-within .navigateur__vue img { object-position: 50% 100%; } } .telephone { position: absolute; right: 0; bottom: 0; width: 27%; border: 6px solid var(--nuit); border-radius: 24px; overflow: hidden; background: var(--nuit); box-shadow: 0 24px 40px -22px rgba(8, 51, 53, .65); } .telephone img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; } .ecrans__aide { margin-top: .9rem; font-size: .85rem; color: var(--texte-doux); } @media (hover: none) { .ecrans__aide { display: none; } } @media (max-width: 860px) { .cas { grid-template-columns: 1fr; } } /* Étapes */ .etapes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; position: relative; } .etapes::before { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 1.6rem; height: 2px; background: var(--nuit); opacity: .18; } .etape { display: grid; gap: .85rem; align-content: start; position: relative; } .etape__num { width: 3.2rem; height: 3.2rem; border-radius: var(--bulle); background: var(--nuit); color: var(--citron); font-family: var(--f-titre); font-weight: 900; font-size: 1.35rem; line-height: 1; display: grid; place-items: center; } .etape p { font-size: 1rem; } @media (max-width: 960px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .etapes::before { display: none; } } @media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } } /* Secteurs */ .secteurs { list-style: none; padding: 0; border-top: 2px solid var(--nuit); } .secteur { border-bottom: 1px solid var(--trait); } .secteur a { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr) auto; gap: .75rem 2.5rem; align-items: center; padding: 1.75rem 0; text-decoration: none; color: inherit; } .secteur h3 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); } .secteur p { font-size: 1.02rem; } .fleche { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--nuit); color: var(--nuit); display: grid; place-items: center; flex: none; transition: background-color .15s ease, border-color .15s ease; } .fleche svg { width: 1.2rem; height: 1.2rem; } .secteur a:hover .fleche, .secteur a:focus-visible .fleche { background: var(--citron); border-color: var(--citron); } .secteur a:hover h3 { text-decoration: underline; text-decoration-color: var(--citron); text-decoration-thickness: 4px; text-underline-offset: 6px; } .secteurs__aussi { margin-top: 1.75rem; } @media (max-width: 760px) { .secteur a { grid-template-columns: minmax(0, 1fr) auto; } .secteur p { grid-column: 1 / -1; grid-row: 2; } } /* À propos */ .apropos { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; } .citation { display: grid; gap: 1.2rem; } .citation svg { width: 3.6rem; height: auto; color: var(--citron); } .citation p { font-family: var(--f-titre); font-weight: 800; color: var(--blanc); font-size: clamp(1.55rem, 2.9vw, 2.35rem); line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; } .apropos__texte { display: grid; gap: 1.1rem; font-size: 1.06rem; } .apropos__texte strong { color: var(--blanc); } @media (max-width: 860px) { .apropos { grid-template-columns: 1fr; } } /* FAQ */ .faq { border-top: 2px solid var(--nuit); max-width: 52rem; } .faq details { border-bottom: 1px solid var(--trait); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.3rem 0; font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.25; color: var(--nuit); } .faq summary::-webkit-details-marker { display: none; } .faq .plus { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; background: var(--brume); display: grid; place-items: center; color: var(--nuit); } .faq .plus svg { width: 1rem; height: 1rem; transition: transform .2s ease; } .faq details[open] .plus { background: var(--citron); } .faq details[open] .plus svg { transform: rotate(45deg); } .faq__reponse { padding: 0 0 1.5rem; max-width: 64ch; display: grid; gap: .8rem; } @media (prefers-reduced-motion: reduce) { .faq .plus svg { transition: none; } } .bloc-faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .bloc-faq .entete-section { position: sticky; top: 7rem; margin-bottom: 0; } .bloc-faq .faq { max-width: none; } @media (max-width: 860px) { .bloc-faq { grid-template-columns: 1fr; } .bloc-faq .entete-section { position: static; } } /* Contact */ .contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .contact__texte { display: grid; gap: 1.4rem; } .contact__texte > p { font-size: clamp(1.05rem, 1.35vw, 1.18rem); } .direct { display: grid; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--trait-nuit); } .direct dt { font-size: .9rem; color: var(--sur-nuit-doux); } .direct dd { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--blanc); line-height: 1.2; } .direct dd a { color: var(--blanc); text-decoration: none; } .direct dd a:hover { text-decoration: underline; text-decoration-color: var(--citron); } .direct dd.direct__texte { font-family: var(--f-texte); font-weight: 500; font-size: 1rem; line-height: 1.5; color: var(--sur-nuit-doux); } .formulaire { background: var(--blanc); color: var(--texte); border-radius: var(--rayon); padding: clamp(1.4rem, 3vw, 2.25rem); display: grid; gap: 1.05rem; } .formulaire h3 { font-size: 1.35rem; color: var(--nuit); } .champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem; } .champ { display: grid; gap: .4rem; min-width: 0; } .champ label { font-weight: 600; font-size: .95rem; color: var(--nuit); } .champ .facultatif { font-weight: 400; color: var(--texte-doux); } .champ input, .champ textarea { width: 100%; min-height: 3rem; padding: .72rem .9rem; font: inherit; font-size: 1rem; color: var(--texte); background: var(--blanc); border: 1.5px solid #8FA6A4; border-radius: .7rem; } .champ textarea { min-height: 6.5rem; resize: vertical; } .champ input:focus, .champ textarea:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 3px var(--citron); } .champ [aria-invalid="true"] { border-color: var(--erreur); } .champ__erreur { color: var(--erreur); font-size: .88rem; font-weight: 600; } .pot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .formulaire__note { font-size: .85rem; color: var(--texte-doux); line-height: 1.5; } .formulaire__note a { color: var(--texte-doux); } .form-statut { border-radius: .8rem; padding: .9rem 1rem; font-weight: 600; font-size: .95rem; } .form-statut--ok { background: #E8F8D2; color: #2C4300; } .form-statut--erreur { background: #FBE9E6; color: var(--erreur); } .form-statut--info { background: var(--brume); color: var(--nuit); } @media (max-width: 860px) { .contact { grid-template-columns: 1fr; } } @media (max-width: 520px) { .champs-2 { grid-template-columns: 1fr; } } /* Pages intérieures */ .tete-page { background: var(--nuit); color: var(--sur-nuit-doux); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); } .tete-page__grille { display: grid; gap: 1.4rem; max-width: 52rem; } .tete-page h1 { color: var(--blanc); font-size: clamp(2.05rem, 4.6vw, 3.6rem); } .tete-page .chapo { color: var(--sur-nuit-doux); max-width: 46rem; } .fil { font-size: .9rem; color: var(--sur-nuit-doux); } .fil ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .fil li + li::before { content: "/"; margin-right: .35rem; opacity: .6; } .fil a { color: var(--sur-nuit-doux); } .fil [aria-current] { color: var(--blanc); } .deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } @media (max-width: 860px) { .deux-colonnes { grid-template-columns: 1fr; } } .prose { max-width: var(--lecture); } .prose > * + * { margin-top: 1.05em; } .prose h2 { margin-top: 2.1em; font-size: clamp(1.5rem, 2.6vw, 2.05rem); text-transform: none; letter-spacing: -.015em; line-height: 1.1; } .prose h3 { margin-top: 1.7em; } .prose h2 + *, .prose h3 + * { margin-top: .7em; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li + li { margin-top: .45em; } .prose li::marker { color: var(--nuit); } .prose a { color: var(--nuit); font-weight: 600; text-decoration-color: var(--citron-fonce); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: var(--nuit); } .prose blockquote { border-left: 4px solid var(--citron); padding: .2rem 0 .2rem 1.1rem; font-weight: 500; color: var(--nuit); } .prose .coches { font-size: 1.04rem; } .prose .coches svg { color: var(--citron-fonce); } .prose figure img { border-radius: 12px; border: 1px solid var(--trait); } .prose figcaption { font-size: .88rem; color: var(--texte-doux); margin-top: .5rem; } .liste-points { list-style: none; padding: 0; display: grid; gap: 1.6rem; } .liste-points li { display: grid; gap: .35rem; padding-left: 1.2rem; border-left: 3px solid var(--citron); } .liste-points h3 { font-size: 1.2rem; } .tableau { position: relative; overflow-x: auto; border: 1px solid var(--trait); border-radius: 1rem; background: var(--blanc); } .tableau table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: .97rem; line-height: 1.45; } .tableau th, .tableau td { padding: .9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); } .tableau tr:last-child th, .tableau tr:last-child td { border-bottom: 0; } .tableau thead th { background: var(--brume); color: var(--nuit); font-weight: 700; } .tableau tbody th { font-weight: 600; color: var(--nuit); } /* prix du tableau « Pour comparer » (classe à part : .chiffre sert aux grands chiffres de l'accueil) */ .tableau .tableau__prix { font-variant-numeric: tabular-nums; white-space: nowrap; } .tableau .phare { background: #F6FDE6; } .tableau thead .phare { background: var(--citron); } .tableau svg { width: 1.15rem; height: 1.15rem; color: var(--citron-fonce); vertical-align: -.2rem; } .tableau .non { color: var(--texte-doux); } .tableau caption { caption-side: top; text-align: left; padding: 1rem 1rem .25rem; font-weight: 700; color: var(--nuit); } /* Tableau des formules (tarifs) sur téléphone : le tableau laisse la place à une grille où les 4 formules restent visibles d'un coup. Chaque ligne : son titre dans une bande grise, puis ses 4 réponses séparées par des filets. Les noms des formules (bande vert nuit) restent collés sous l'en-tête du site pendant qu'on descend. */ /* « Les conditions, en clair » (tarifs) : six cartes question, réponse. La question dans un bandeau vert nuit ou citron en alternance, la réponse en grand sur fond blanc, le détail en lignes courtes. */ .conditions { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .condition { display: grid; grid-template-rows: auto 1fr; border-radius: var(--rayon); overflow: hidden; background: var(--blanc); box-shadow: 0 1px 0 var(--trait), 0 22px 40px -32px rgba(8, 51, 53, .45); } .condition__q { display: flex; align-items: center; gap: .7rem; margin: 0; padding: 1rem 1.4rem; font: 700 .98rem/1.35 var(--f-texte); letter-spacing: 0; text-transform: none; } .condition--nuit .condition__q { background: var(--nuit); color: var(--blanc); } .condition--citron .condition__q { background: var(--citron); color: var(--nuit); } .condition--citron .pastille { background: var(--nuit); color: var(--citron); } .condition__corps { display: grid; align-content: start; gap: .75rem; padding: 1.3rem 1.4rem 1.6rem; } .condition__r { font: 900 clamp(1.55rem, 2.2vw, 1.95rem)/1.1 var(--f-titre); letter-spacing: -.01em; color: var(--nuit); } .condition__r mark { color: inherit; padding: 0 .04em; background: linear-gradient(var(--citron), var(--citron)) no-repeat 0 90% / 100% .38em; } .condition__d { display: grid; gap: .45rem; } .condition__d p { font-size: .96rem; line-height: 1.5; color: var(--texte); } .condition__d b { color: var(--nuit); } @media (max-width: 960px) { .conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .conditions { grid-template-columns: 1fr; gap: .9rem; } .condition__q { padding: .9rem 1.2rem; } .condition__corps { padding: 1.15rem 1.2rem 1.35rem; } } .grille-formules { display: none; } @media (max-width: 760px) { .comparatif > .tableau { display: none; } .grille-formules { display: block; border: 1px solid var(--trait); border-radius: 1rem; background: var(--blanc); } .grille-formules table, .grille-formules thead, .grille-formules tbody { display: block; width: 100%; border-collapse: collapse; } .grille-formules tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .grille-formules thead { position: sticky; top: calc(4.25rem + 1px + env(safe-area-inset-top, 0px)); z-index: 3; } .grille-formules thead tr { background: var(--nuit); border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0; box-shadow: 0 10px 16px -12px rgba(8, 51, 53, .6); } /* l'ombre détache la bande quand elle reste en haut */ .grille-formules thead th { display: grid; place-items: center; min-height: 3.5rem; padding: .5rem .15rem; font: 800 .84rem/1.08 var(--f-titre); color: var(--blanc); text-align: center; } .grille-formules thead th.phare { background: var(--citron); color: var(--nuit); } .grille-formules thead th:last-child { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2); } .grille-formules thead .grille__coin { display: none; } .grille-formules .grille__groupe th { grid-column: 1 / -1; display: flex; align-items: center; gap: .7rem; padding: 1.4rem .95rem .6rem; font: 800 .7rem/1 var(--f-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--citron-fonce); text-align: left; } .grille-formules .grille__groupe th::after { content: ""; flex: 1; height: 1px; background: var(--trait); } .grille-formules tbody th[scope="row"] { grid-column: 1 / -1; padding: .62rem .95rem; background: var(--brume); border-block: 1px solid var(--trait); font: 700 .86rem/1.3 var(--f-texte); color: var(--nuit); text-align: left; text-wrap: balance; } .grille-formules tbody td { display: flex; flex-direction: column; align-items: center; gap: .22rem; padding: .7rem .2rem .75rem; text-align: center; } .grille-formules tbody td + td { border-left: 1px solid var(--trait); } .grille-formules tbody td.phare { background: #F6FDE6; } .grille__v { display: flex; align-items: center; min-height: 1.45rem; font: 700 .86rem/1.2 var(--f-texte); color: var(--nuit); } .grille__p { font: 500 .68rem/1.25 var(--f-texte); color: var(--texte-doux); text-wrap: balance; } .grille__oui { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--citron); } .grille__oui svg { width: .95rem; height: .95rem; color: var(--nuit); } .grille__non { display: block; width: .85rem; height: 2px; margin: calc((1.45rem - 2px) / 2) 0; border-radius: 2px; background: #B3C4C1; } } @media (max-width: 359px) { .grille-formules thead th { font-size: .76rem; } .grille-formules tbody td { padding-inline: .1rem; } .grille__v { font-size: .76rem; } .grille__p { font-size: .64rem; } } .bloc-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; } .bloc-cta p { font-size: 1.1rem; max-width: 52ch; } @media (max-width: 760px) { .bloc-cta { grid-template-columns: 1fr; } } /* Blog : la liste des articles, les cartes, l'auteur */ .article-meta { font-size: .95rem; color: var(--sur-nuit-doux); } .article-meta a { color: var(--blanc); text-decoration-color: var(--citron); text-underline-offset: 3px; } .article-etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; } .categorie { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .25rem .75rem; border-radius: 999px; background: var(--nuit); color: var(--citron); font-size: .8rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; } .categorie--nuit { background: var(--citron); color: var(--nuit); } .categorie--brouillon { background: #FFE9A8; color: #5C4500; } .blog-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; } .carte-article a { display: grid; align-content: start; gap: .7rem; height: 100%; padding: 1.6rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); text-decoration: none; color: inherit; transition: border-color .2s ease, box-shadow .2s ease; } .carte-article a:hover { border-color: var(--nuit); box-shadow: 0 24px 48px -36px rgba(8, 51, 53, .55); } .carte-article__haut { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; font-size: .9rem; color: var(--texte-doux); } .carte-article__titre { font-size: clamp(1.3rem, 2.2vw, 1.7rem); text-transform: none; line-height: 1.12; } .carte-article .lien { justify-self: start; margin-top: .3rem; } .carte-article--une { grid-column: 1 / -1; } .carte-article--une a { gap: .9rem; padding: clamp(1.6rem, 4vw, 2.75rem); background: var(--brume); border-color: var(--brume); } .carte-article--une .carte-article__titre { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 26ch; } .carte-article--une p { max-width: 62ch; font-size: clamp(1.02rem, 1.3vw, 1.15rem); } .carte-article__visuel { display: none; } @media (min-width: 900px) { .carte-article--une a { grid-template-columns: minmax(0, 1fr) clamp(9rem, 15vw, 12.5rem); column-gap: clamp(2rem, 5vw, 4rem); } .carte-article--une a > * { grid-column: 1; } .carte-article--une .carte-article__visuel { display: grid; grid-column: 2; grid-row: 1 / span 4; align-self: center; place-items: center; width: 100%; aspect-ratio: 1; border-radius: var(--bulle); background: var(--citron); color: var(--nuit); transition: transform .3s ease; } .carte-article--une .carte-article__visuel svg { width: 38%; height: 38%; } .carte-article--une a:hover .carte-article__visuel { transform: rotate(-4deg) scale(1.03); } } @media (prefers-reduced-motion: reduce) { .carte-article--une a:hover .carte-article__visuel { transform: none; } } .blog-vide { font-size: 1.15rem; font-weight: 600; color: var(--nuit); } .blog-question { max-width: 52rem; margin-top: clamp(2rem, 5vw, 3rem); padding: 1.2rem 0 1.2rem 1.4rem; border-left: 4px solid var(--citron); display: grid; gap: .35rem; } .blog-question__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.2; color: var(--nuit); } .article-couverture { max-width: var(--lecture); margin-bottom: 2rem; } .article-couverture img { width: 100%; border-radius: var(--rayon); } .auteur { max-width: var(--lecture); margin-top: clamp(2.5rem, 6vw, 3.5rem); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.4rem; align-items: start; padding: 1.5rem; border-radius: var(--rayon); background: var(--brume); } .auteur__photo { width: 4.75rem; height: 4.75rem; border-radius: 50%; object-fit: cover; background: var(--citron); } .auteur > div { display: grid; gap: .5rem; } .auteur__nom { font-family: var(--f-titre); font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: var(--nuit); } @media (max-width: 520px) { .auteur { grid-template-columns: 1fr; } } .encadre { padding: 1.25rem 1.4rem; border-radius: var(--rayon); background: var(--brume); border-left: 4px solid var(--citron); } .encadre > * + * { margin-top: .6rem; } .encadre__titre { font-family: var(--f-titre); font-weight: 800; font-size: 1.1rem; color: var(--nuit); } .capture-mobile { max-width: 260px; border: 6px solid var(--nuit); border-radius: 24px; overflow: hidden; } /* Pied de page */ .pied { background: var(--abysse); color: #B4BDBD; padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; font-size: .98rem; } .pied__grille { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; } .pied .logo { color: var(--blanc); } .pied__intro { display: grid; gap: 1rem; align-content: start; } .pied__titre { font-family: var(--f-titre); font-weight: 800; font-size: 1.05rem; color: var(--blanc); text-transform: none; margin-bottom: .9rem; letter-spacing: 0; } .pied ul { list-style: none; padding: 0; display: grid; gap: .5rem; } .pied a { color: var(--blanc); text-decoration: none; } .pied a:hover { text-decoration: underline; text-decoration-color: var(--citron); text-underline-offset: 4px; } .pied__coord { display: grid; gap: .3rem; } .pied__coord a { font-weight: 700; } .pied__bas { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; font-size: .88rem; } @media (max-width: 960px) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__intro { grid-column: 1 / -1; } } @media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } } /* Barre d'action mobile */ .barre-mobile { display: none; } @media (max-width: 760px) { .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: .6rem; padding: .6rem max(16px, env(safe-area-inset-right, 0px)) calc(.6rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--nuit); border-top: 1px solid var(--trait-nuit); } .barre-mobile .btn { min-height: 2.9rem; padding: .6rem .8rem; font-size: .95rem; } body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); } } /* Utilitaires */ .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } .liste-article { max-width: var(--lecture); margin-top: 1.5rem; } /* Bandeau d'aperçu (version de démonstration uniquement) */ .bandeau-apercu { background: var(--citron); color: var(--nuit); font-size: .88rem; font-weight: 600; text-align: center; padding: .45rem 1rem; } @media print { .entete, .barre-mobile, .pied, .bandeau-apercu { display: none; } .hero, .bande--nuit, .tete-page { background: none; color: #000; } } /* ====================================================================== Accueil, version 2 : moins de texte, des visuels qui montrent le métier ====================================================================== */ @media (min-width: 1200px) { body { font-size: 1.125rem; } } .entete-section--courte { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .pastille--mini { width: 2rem; height: 2rem; grid-row: auto; } .pastille--mini svg { width: 1rem; height: 1rem; } /* Héros */ .hero--v2 { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); } .hero--v2 .hero__grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } .hero--v2 .hero__texte { gap: clamp(1.5rem, 2.6vw, 2.1rem); } .hero--v2 h1 { font-size: clamp(2.6rem, 6.6vw, 5.1rem); } .hero--v2 .hero__intro { font-size: clamp(1.15rem, 1.6vw, 1.4rem); max-width: 40rem; color: var(--blanc); text-wrap: pretty; } .hero--v2 .garanties { font-size: 1rem; gap: .6rem 1.6rem; } .libelle-court { display: none; } /* L'accroche en deux temps : une amorce discrète, puis la chute en très gros */ .accroche { display: grid; gap: clamp(.75rem, 1.5vw, 1.2rem); } .accroche__amorce { font: 500 clamp(1.15rem, 1.75vw, 1.5rem)/1.35 var(--f-texte); letter-spacing: 0; text-transform: none; color: var(--sur-nuit-doux); } .accroche__metier { display: inline-block; clip-path: inset(-.2em -.3em); } .accroche__metier > span { display: inline-block; color: var(--blanc); font-weight: 700; text-decoration-line: underline; text-decoration-color: var(--citron); text-decoration-thickness: 3px; text-underline-offset: .3em; } .accroche__chute { display: block; } .accroche__vous { display: inline-block; padding: .03em .3em .05em; margin-left: .02em; border-radius: 999px 999px 999px .16em; background: var(--citron); color: var(--nuit); transform-origin: 0 100%; } .accroche__ligne { display: block; } @media (max-width: 860px) { .hero--v2 h1 { font-size: clamp(2.9rem, 9vw, 4.4rem); } } @media (max-width: 600px) { .accroche__quoi { display: block; } } .scene { position: relative; justify-self: center; padding-left: 3.5rem; } .tel { width: 300px; max-width: 100%; aspect-ratio: 300 / 590; padding: 10px; border-radius: 46px; background: #031A1B; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .14); } .tel__ecran { position: relative; height: 100%; border-radius: 36px; background: #F5F9F8; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; } .tel__barre { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px 0; font: 600 11px/1 var(--f-texte); color: var(--nuit); } .tel__reseau { display: flex; gap: 2px; align-items: flex-end; } .tel__reseau i { width: 3px; background: var(--nuit); border-radius: 1px; } .tel__reseau i:nth-child(1) { height: 5px; } .tel__reseau i:nth-child(2) { height: 8px; } .tel__reseau i:nth-child(3) { height: 11px; } .recherche { margin: 0 12px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: var(--blanc); border-radius: 999px; box-shadow: 0 3px 12px rgba(8, 51, 53, .13); font: 500 14px/1 var(--f-texte); color: var(--nuit); } .recherche svg { width: 16px; height: 16px; color: var(--texte-doux); flex: none; } .recherche__texte { white-space: nowrap; overflow: hidden; } .recherche__curseur { width: 2px; height: 17px; background: var(--nuit); margin-left: -6px; } @media (prefers-reduced-motion: no-preference) { .recherche__curseur { animation: clignote 1s steps(1) infinite; } } @keyframes clignote { 50% { opacity: 0; } } .carte { position: relative; margin: 0 12px; height: 96px; border-radius: 16px; overflow: hidden; flex: none; } .carte svg { position: absolute; inset: 0; width: 100%; height: 100%; } .carte__terre { fill: #E2EEE9; } .carte__mer { fill: #CDE6EC; } .carte__route { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; } .repere { position: absolute; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #9FB5B2; box-shadow: 0 2px 4px rgba(8, 51, 53, .25); } .repere::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--blanc); } .repere--a { left: 38%; top: 22%; } .repere--b { left: 72%; top: 48%; } .repere--vous { left: 54%; top: 30%; width: 24px; height: 24px; background: var(--citron); z-index: 1; } .repere--vous::after { inset: 7px; background: var(--nuit); } .resultats { list-style: none; margin: 0; padding: 0 12px; display: grid; gap: 8px; } .resultat { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--blanc); box-shadow: 0 1px 3px rgba(8, 51, 53, .1); } .resultat--vous { box-shadow: 0 0 0 2px var(--citron), 0 8px 18px -8px rgba(8, 51, 53, .35); } .vignette { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: block; } .vignette svg { width: 100%; height: 100%; display: block; } .vignette svg rect { fill: #CFEFA0; } .vignette svg path { fill: #2C6B52; } .vignette svg circle { fill: #F7FFF0; } .vignette--vide { background: #E3EBE9; } .resultat__infos { display: grid; gap: 4px; min-width: 0; } .resultat__nom { font: 700 13px/1.2 var(--f-texte); color: var(--nuit); } .resultat__note { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--f-texte); color: var(--texte-doux); } .etoiles { position: relative; width: 60px; height: 11px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 11'%3E%3Cg fill='%23D3DDDA'%3E%3Cpath id='s' d='M5.5 0l1.6 3.6 3.9.3-3 2.5.9 3.8-3.4-2-3.4 2 .9-3.8-3-2.5 3.9-.3z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/g%3E%3C/svg%3E") left center / 60px 11px no-repeat; } .etoiles__plein { position: absolute; inset: 0 auto 0 0; width: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 11'%3E%3Cg fill='%23F2B705'%3E%3Cpath id='s' d='M5.5 0l1.6 3.6 3.9.3-3 2.5.9 3.8-3.4-2-3.4 2 .9-3.8-3-2.5 3.9-.3z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/g%3E%3C/svg%3E") left center / 60px 11px no-repeat; } .etoiles--moyen .etoiles__plein { width: 68%; } .etoiles--faible .etoiles__plein { width: 42%; } .resultat__meta { font: 500 10.5px/1.2 var(--f-texte); color: var(--texte-doux); } .resultat__meta b { color: #1D7A4C; font-weight: 700; } .resultat__actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; } .puce { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--trait); font: 600 10.5px/1 var(--f-texte); color: var(--nuit); background: var(--blanc); overflow: hidden; } .puce svg { width: 11px; height: 11px; } .puce--appel { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); } .onde { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(180, 250, 30, .55); pointer-events: none; } .barre { display: block; height: 9px; border-radius: 5px; background: #DCE6E3; } .barre--l { width: 72%; } .barre--m { width: 56%; } .barre--s { width: 38%; height: 7px; } .appel { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--nuit); color: var(--blanc); transform: translateY(150%); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); } .appel__icone { width: 34px; height: 34px; border-radius: 50%; background: var(--citron); color: var(--nuit); display: grid; place-items: center; flex: none; } .appel__icone svg { width: 16px; height: 16px; } .appel b { display: block; font: 700 13px/1.2 var(--f-texte); } .appel span span { display: block; font: 500 11px/1.3 var(--f-texte); color: var(--sur-nuit-doux); } .scene__bulle { position: absolute; left: 0; bottom: 64px; display: grid; justify-items: center; gap: 8px; margin: 0; z-index: 2; } .scene__photo { width: 112px; height: 112px; padding: 7px; border-radius: var(--bulle); background: var(--citron); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6); } .scene__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .scene__bulle figcaption { font: 700 .85rem/1 var(--f-texte); color: var(--citron); background: var(--abysse); padding: .4rem .7rem; border-radius: 999px; } @media (max-width: 860px) { .hero--v2 .hero__grille { grid-template-columns: 1fr; } .scene { justify-self: center; padding-left: 2.5rem; } .tel { width: 272px; } .scene__photo { width: 88px; height: 88px; padding: 6px; } } /* Téléphone : le texte et le téléphone animé côte à côte, comme sur ordinateur, pour tout voir dès l'arrivée. Le téléphone dessiné est réduit avec zoom ; sans zoom (très vieux navigateurs), l'affichage empilé reste. Au-dessus de 600 px, rien ne change. */ @media (max-width: 600px) { @supports (zoom: 1) { .hero--v2 { padding-block: 2.25rem 3.25rem; } .hero--v2 .hero__grille { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; grid-template-areas: "titre scene" "intro scene" "garanties scene" "actions actions"; gap: 0 .9rem; align-items: start; } .hero--v2 .hero__texte { display: contents; } .hero--v2 h1 { grid-area: titre; font-size: clamp(1.55rem, 7.5vw, 2.1rem); } .hero--v2 .accroche { gap: 1.1rem; } .hero--v2 .accroche__amorce { font-size: .92rem; line-height: 1.4; } .hero--v2 .accroche__metier > span { text-decoration-thickness: 2px; text-underline-offset: .25em; } .hero--v2 .hero__intro { grid-area: intro; margin-top: 1.75rem; font-size: .92rem; line-height: 1.55; } /* Les trois garanties remplissent la colonne de gauche, une par ligne */ .hero--v2 .garanties { grid-area: garanties; align-self: end; flex-direction: column; flex-wrap: nowrap; gap: .7rem; margin-top: 2.75rem; font-size: .9rem; } /* Les deux boutons côte à côte, de la même largeur : le bouton d'audit prend son libellé court */ .hero--v2 .actions { grid-area: actions; margin-top: 2.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .hero--v2 .actions .btn { padding-inline: .5rem; white-space: nowrap; } .hero--v2 .libelle-long { display: none; } .hero--v2 .libelle-court { display: inline; } /* Le téléphone est centré en hauteur par rapport au texte, comme sur ordinateur */ .hero--v2 .scene { grid-area: scene; align-self: center; justify-self: end; padding-left: 0; zoom: .58; } .hero--v2 .scene__bulle { left: -18px; bottom: 62px; zoom: 1.35; } .hero--v2 .scene__photo { width: 76px; height: 76px; padding: 5px; } .hero--v2 .scene__bulle figcaption { font-size: .72rem; padding: .32rem .55rem; } } } @media (max-width: 389px) { @supports (zoom: 1) { .hero--v2 .actions .btn { font-size: .92rem; } } } @media (max-width: 374px) { @supports (zoom: 1) { .hero--v2 .scene { zoom: .52; } } } @media (max-width: 359px) { @supports (zoom: 1) { .hero--v2 .scene { zoom: .46; } .hero--v2 h1 { font-size: 1.4rem; } .hero--v2 .accroche__amorce { font-size: .85rem; } .hero--v2 .actions .btn { font-size: .84rem; padding-inline: .35rem; gap: .4em; } } } @media (min-width: 480px) and (max-width: 600px) { @supports (zoom: 1) { .hero--v2 .scene { zoom: .72; } } } /* Vidéo */ .video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 24px; overflow: hidden; background: var(--nuit); box-shadow: 0 40px 80px -50px rgba(8, 51, 53, .7); } .video video, .video img { width: 100%; height: 100%; object-fit: cover; display: block; } .video__note { position: absolute; left: 1rem; bottom: 1rem; margin: 0; padding: .5rem .9rem; border-radius: 999px; background: rgba(5, 34, 36, .85); color: var(--blanc); font-size: .9rem; font-weight: 600; } /* Commandes maison : visibles seulement quand le script les a branchées */ .video__son, .video__lecture { display: none; position: absolute; bottom: clamp(.7rem, 2vw, 1.2rem); border: 0; cursor: pointer; color: var(--blanc); background: rgba(5, 34, 36, .84); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); } .video--pret video { cursor: pointer; } .video--pret .video__son, .video--pret .video__lecture { display: inline-flex; align-items: center; justify-content: center; } .video__son { left: clamp(.7rem, 2vw, 1.2rem); gap: .5rem; min-height: 2.75rem; padding: .55rem 1.1rem .55rem .9rem; border-radius: 999px; font: 700 .95rem/1 var(--f-texte); transition: background-color .2s ease, color .2s ease, transform .2s ease; } .video__lecture { right: clamp(.7rem, 2vw, 1.2rem); width: 2.75rem; height: 2.75rem; border-radius: 50%; } .video__son svg, .video__lecture svg { width: 1.2rem; height: 1.2rem; flex: none; } .video__son .ic-on, .video__lecture .ic-lire { display: none; } .video--son .video__son .ic-on, .video--pause .video__lecture .ic-lire { display: block; } .video--son .video__son .ic-off, .video--pause .video__lecture .ic-pause { display: none; } .video--son .video__son, .video--invite .video__son { background: var(--citron); color: var(--nuit); } .video--invite .video__son { transform: scale(1.06); } .video :focus-visible { outline-color: var(--citron); } @media (prefers-reduced-motion: reduce) { .video__son { transition: none; } .video--invite .video__son { transform: none; } } /* Sous la vidéo : la même chose pour votre entreprise */ .video-offre { margin-top: clamp(1.1rem, 2.5vw, 1.6rem); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 3vw, 1.75rem); border-radius: var(--rayon); background: var(--brume); } .video-offre .pastille { grid-row: auto; width: 3rem; height: 3rem; background: var(--nuit); color: var(--citron); } .video-offre .pastille svg { width: 1.2rem; height: 1.2rem; margin-left: .15rem; } .video-offre__texte { display: grid; gap: .45rem; } .video-offre__texte h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); } /* Le texte en lignes de même longueur, deux mots clés surlignés en citron, jamais coupés en fin de ligne */ .video-offre__texte p { color: var(--nuit); line-height: 1.65; text-wrap: balance; } .video-offre__texte mark, .leviers__phrase mark { background: linear-gradient(transparent 58%, var(--citron) 58%); color: inherit; padding: 0 .1em; margin: 0 -.1em; font-weight: 600; white-space: nowrap; } /* Trois leviers : la phrase et ses deux mots clés surlignés, comme sous la vidéo. Sur ordinateur elle tient sur une ligne ; sur téléphone, deux lignes équilibrées. */ .leviers__phrase { color: var(--nuit); text-wrap: balance; } .entete-section--large { max-width: 52rem; } .entete-section .leviers__phrase { max-width: none; } .video-offre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; } @media (max-width: 900px) { .video-offre { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .video-offre__actions { grid-column: 1 / -1; } } @media (max-width: 600px) { .video-offre { gap: .85rem 1rem; align-items: center; } .video-offre__texte { display: contents; } .video-offre .pastille { width: 2.6rem; height: 2.6rem; } /* Téléphone : la taille du texte suit la largeur de l'encadré (3,9 % de sa largeur utile), pour tenir pile en 3 lignes sur tous les téléphones. Sous 11 px, il passe à 4 lignes. */ .video-offre { container-type: inline-size; } .video-offre__texte p { grid-column: 1 / -1; font-size: 12.6px; font-size: clamp(11px, 3.9cqi, 17px); line-height: 1.6; } } /* Téléphone, film 16:9 : posées sur l'image, les commandes cachaient le bas du film (la recherche, le numéro de la carte de fin). Elles passent sous la vidéo. Sans script, rien ne change : la vidéo garde ses commandes habituelles. */ @media (max-width: 600px) { .video.video--pret:not(.video--vertical) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem 1rem; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; } .video--pret:not(.video--vertical) video { grid-column: 1 / -1; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--nuit); box-shadow: 0 30px 60px -40px rgba(8, 51, 53, .7); } .video--pret:not(.video--vertical) .video__son, .video--pret:not(.video--vertical) .video__lecture { position: static; background: var(--nuit); box-shadow: none; } .video--pret.video--son:not(.video--vertical) .video__son, .video--pret.video--invite:not(.video--vertical) .video__son { background: var(--citron); color: var(--nuit); } .video--pret:not(.video--vertical) .video__son { justify-self: start; } .video--pret:not(.video--vertical) .video__lecture { justify-self: end; } .video--pret:not(.video--vertical) :focus-visible { outline-color: var(--nuit); } } /* Téléphone, film vertical (9:16, choisi par video.js) : le bas de l'image est laissé vide par le montage, les commandes y restent posées. Le film tient en entier entre l'en-tête et la barre du bas (10rem à eux deux), centré, et garde ce format si le téléphone est tourné ensuite. */ .video.video--vertical { aspect-ratio: 9 / 16; margin-inline: auto; border-radius: 18px; width: min(100%, calc((100vh - 10rem) * 9 / 16)); width: min(100%, calc((100svh - 10rem) * 9 / 16)); } /* Chiffres */ .chiffres { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); } .chiffres li { display: grid; gap: .55rem; align-content: start; padding-top: 1.25rem; border-top: 3px solid var(--nuit); } .chiffre { font-family: var(--f-titre); font-weight: 900; font-size: clamp(3.2rem, 6.4vw, 5.4rem); line-height: .9; letter-spacing: -.03em; color: var(--nuit); font-variant-numeric: tabular-nums; } .chiffres p { font-size: clamp(1.08rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--nuit); max-width: 24ch; line-height: 1.35; } /* « IA » en SVG, à la taille exacte du texte (0,9 em de haut comme la ligne, interlettrage -0,03 em). La tête de robot n'apparaît qu'avec le script (anim.js) ; sans lui, on voit les lettres. */ .chiffre--ia { display: block; } .ia { display: block; width: .881em; height: .9em; margin-right: -.03em; overflow: visible; fill: currentColor; } .ia__robot, .ia__visage { visibility: hidden; } .ia__boule, .ia__oeil, .ia__bouche { fill: var(--citron); } .ia__boule { stroke: var(--nuit); stroke-width: 14px; } .chiffres .source { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 760px) { .chiffres { grid-template-columns: 1fr; } } /* « Une fiche et un site, ça se fait vivre » : deux fiches avec la même note, l'une suivie chaque mois, l'autre non. Ordinateur : le texte à gauche couvre la hauteur des fiches ; la question au-dessus des fiches, la réponse dessous. 860 px et moins : titre, les deux fiches côte à côte en tableau, la réponse, ce qu'il faut chaque mois, les sources. Chaque version a ses morceaux (tableau, étiquette, sources courtes…), cachés sur l'autre écran. */ .vivre__grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "texte visuel" "sources suite"; gap: 1.7rem clamp(2rem, 6vw, 5rem); } .vivre__texte { grid-area: texte; display: flex; flex-direction: column; justify-content: space-between; gap: 2.2rem; padding-block: .1rem .35rem; } .vivre__tete { display: grid; gap: 1.5rem; } .vivre__tete h2 { margin-top: -.12em; } .vivre__lead { font: 800 clamp(1.45rem, 2.1vw, 1.75rem)/1.15 var(--f-titre); color: var(--blanc); } .vivre__liste { display: grid; gap: 1.3rem; } .vivre__amorce { font-size: clamp(1.1rem, 1.4vw, 1.22rem); line-height: 1.5; } .vivre__coches { gap: 1.05rem; font-size: 1.14rem; } .vivre__coches li { grid-template-columns: 1.6rem minmax(0, 1fr); gap: .75rem; align-items: center; } .vivre__coches svg { width: 1.6rem; height: 1.6rem; padding: .3rem; margin: 0; border-radius: 50%; background: var(--citron); color: var(--nuit); } .vivre__coches b, .vivre__whatsapp b { color: var(--blanc); font-weight: 700; } .vivre__whatsapp { display: flex; align-items: center; gap: .95rem; font-size: 1.12rem; } .vivre__whatsapp svg { width: 2.7rem; height: 2.7rem; padding: .6rem; flex: none; border-radius: 50%; background: var(--citron); color: var(--nuit); } .vivre__wa-fin { white-space: nowrap; } .vivre__visuel { grid-area: visuel; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; } .vivre__question { display: flex; align-items: flex-end; gap: 1rem; font: 900 clamp(1.6rem, 2.5vw, 2.15rem)/1.05 var(--f-titre); letter-spacing: -.012em; color: var(--blanc); } .vivre__question-texte > span { color: var(--citron); } .vivre__fleche { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; margin-bottom: .05em; border-radius: 50%; background: var(--citron); color: var(--nuit); } .vivre__fleche svg { width: 1.3rem; height: 1.3rem; transform: rotate(90deg); } .vivre__fiches { display: grid; } .vivre__verdict { grid-area: suite; align-self: start; display: grid; gap: .5rem; margin-left: 11%; } .vivre__verdict b { font: 800 clamp(1.15rem, 1.6vw, 1.38rem)/1.3 var(--f-titre); color: var(--blanc); } .vivre__verdict em { font-style: normal; display: inline-block; margin-left: .15em; padding: .04em .38em .08em; border-radius: 999px 999px 999px .16em; background: var(--citron); color: var(--nuit); font-weight: 900; } .vivre__detail { font-size: 1.02rem; line-height: 1.45; text-wrap: balance; } @media (min-width: 1100px) { .vivre__detail { white-space: nowrap; } } /* Petits ordinateurs et tablettes à l'horizontale : plus de place pour les fiches, qui se resserrent un peu */ @media (min-width: 861px) and (max-width: 1099px) { .vivre__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .vivre-fiche { padding-inline: 1.3rem; } } .vivre__sources { text-wrap: balance; } .vivre__sources--ordi { grid-area: sources; align-self: end; } .vivre__label, .vivre-tab, .vivre__sources--tel { display: none; } .vivre .etoiles__plein { width: 92%; } /* Les fiches de l'ordinateur : la A grise et en retrait, la B blanche et cerclée de citron, posée dessus */ .vivre-fiche { display: grid; gap: .9rem; min-width: 0; padding: 1.4rem 1.6rem 1.5rem; border-radius: 22px; } .vivre-fiche--terne { margin-right: 11%; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--trait-nuit); } .vivre-fiche--vive { position: relative; margin: -.9rem 0 0 11%; background: var(--blanc); box-shadow: 0 0 0 3px var(--citron), 0 30px 50px -26px rgba(0, 0, 0, .8); } .vivre-fiche__tete { display: flex; align-items: center; gap: .9rem; } .vivre-fiche__vignette { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 12px; } .vivre-fiche__vignette svg { width: 1.4rem; height: 1.4rem; } .vivre-fiche__id { display: grid; gap: .35rem; min-width: 0; } .vivre-fiche__nom { font: 800 1.2rem/1.1 var(--f-titre); } .vivre-fiche__note { display: flex; align-items: center; gap: .4rem; font: 500 .92rem/1 var(--f-texte); } .vivre-fiche__note b { font-weight: 700; } .vivre-fiche__etat { margin-left: auto; align-self: start; font: 700 .76rem/1.15 var(--f-texte); padding: .38rem .7rem; border-radius: 999px; white-space: nowrap; } .vivre-fiche__lignes { list-style: none; padding: 0; display: grid; } .vivre-fiche__lignes li { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--trait); font-size: 1.08rem; line-height: 1.3; } .vivre-fiche__lignes li:last-child { padding-bottom: 0; } .vivre-fiche__lignes svg { width: 1.4rem; height: 1.4rem; flex: none; padding: .25rem; border-radius: 50%; background: var(--citron); color: var(--nuit); } .vivre-fiche__vide { width: 1.4rem; height: 1.4rem; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); } .vivre-fiche--terne .vivre-fiche__vignette { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .35); } .vivre-fiche--terne .vivre-fiche__nom { color: rgba(255, 255, 255, .7); } .vivre-fiche--terne .vivre-fiche__note { color: rgba(201, 210, 211, .7); } .vivre-fiche--terne .etoiles, .vivre-tab__col--terne .etoiles { filter: grayscale(1); opacity: .55; } .vivre-fiche--terne .vivre-fiche__etat { background: rgba(255, 255, 255, .1); color: var(--sur-nuit-doux); } .vivre-fiche--terne .vivre-fiche__lignes li { border-top-color: var(--trait-nuit); color: rgba(255, 255, 255, .5); } .vivre-fiche--terne .vivre-fiche__lignes b { color: rgba(255, 255, 255, .7); font-weight: 600; } .vivre-fiche--vive .vivre-fiche__vignette { background: var(--brume); color: var(--nuit); } .vivre-fiche--vive .vivre-fiche__nom, .vivre-fiche--vive .vivre-fiche__note b, .vivre-fiche--vive .vivre-fiche__lignes b { color: var(--nuit); } .vivre-fiche--vive .vivre-fiche__note { color: var(--texte-doux); } .vivre-fiche--vive .vivre-fiche__etat { background: var(--citron); color: var(--nuit); } .vivre-fiche--vive .vivre-fiche__lignes li { color: var(--texte); } /* Le tableau du téléphone : les deux fiches côte à côte, une valeur courte par ligne */ .vivre-tab { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding-top: .7rem; } .vivre-tab__col { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .8rem; min-width: 0; padding: 1.1rem .9rem 1rem; border-radius: 18px; } .vivre-tab__col--terne { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--trait-nuit); } .vivre-tab__col--vive { background: var(--blanc); box-shadow: 0 0 0 3px var(--citron), 0 24px 40px -24px rgba(0, 0, 0, .8); } .vivre-tab__tete { display: flex; align-items: center; gap: .5rem; } .vivre-tab__lettre { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; font: 900 1.05rem/1 var(--f-titre); } .vivre-tab__id { display: grid; gap: .25rem; min-width: 0; } .vivre-tab__nom { font: 800 .98rem/1.1 var(--f-titre); } .vivre-tab__note { display: flex; align-items: center; gap: .3rem; font: 500 .78rem/1 var(--f-texte); } .vivre-tab__note b { font-weight: 700; } .vivre-tab__etat { position: absolute; top: -.7rem; right: .6rem; font: 700 .7rem/1 var(--f-texte); padding: .34rem .58rem; border-radius: 999px; white-space: nowrap; } .vivre-tab dl { display: grid; } .vivre-tab dl div { display: grid; gap: .25rem; padding: .62rem 0; border-top: 1px solid var(--trait); } .vivre-tab dt { font: 500 .72rem/1.2 var(--f-texte); } .vivre-tab dd { display: flex; align-items: center; gap: .4rem; font: 700 .95rem/1.2 var(--f-texte); } .vivre-tab dd svg { width: 1.25rem; height: 1.25rem; flex: none; padding: .22rem; border-radius: 50%; background: var(--citron); color: var(--nuit); } .vivre-tab__vide { width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); } .vivre-tab__col--terne .vivre-tab__lettre { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); } .vivre-tab__col--terne .vivre-tab__nom { color: rgba(255, 255, 255, .7); } .vivre-tab__col--terne .vivre-tab__note { color: rgba(201, 210, 211, .7); } .vivre-tab__col--terne .vivre-tab__etat { background: #1F4A4C; color: var(--sur-nuit-doux); } .vivre-tab__col--terne dl div { border-top-color: var(--trait-nuit); } .vivre-tab__col--terne dt { color: rgba(201, 210, 211, .66); } .vivre-tab__col--terne dd { color: rgba(255, 255, 255, .55); font-weight: 600; } .vivre-tab__col--vive .vivre-tab__lettre, .vivre-tab__col--vive .vivre-tab__etat { background: var(--citron); color: var(--nuit); } .vivre-tab__col--vive .vivre-tab__nom, .vivre-tab__col--vive .vivre-tab__note b, .vivre-tab__col--vive dd { color: var(--nuit); } .vivre-tab__col--vive .vivre-tab__note, .vivre-tab__col--vive dt { color: var(--texte-doux); } @media (max-width: 860px) { /* une seule colonne : l'ordre devient titre, question et tableau, réponse, chaque mois, WhatsApp, sources */ .vivre__grille { display: flex; flex-direction: column; gap: 0; max-width: 34rem; } .vivre__texte { display: contents; } .vivre__tete { gap: 1rem; } .vivre__tete h2 { margin-top: 0; } .vivre__lead { font-size: 1.35rem; line-height: 1.2; } .vivre__visuel { order: 1; margin-top: 2.6rem; gap: 1.4rem; } /* la question tient sur une ligne à côté de la flèche, même sur les petits écrans (302 px de texte à 1,6 rem) */ .vivre__question { justify-content: space-between; font-size: clamp(1.2rem, calc((100vw - 5.65rem) / 11.8), 1.6rem); } .vivre__fleche { width: 2.4rem; height: 2.4rem; margin-bottom: 0; } .vivre__fleche svg { width: 1.2rem; height: 1.2rem; } .vivre__fiches, .vivre__amorce, .vivre__long, .vivre__detail, .vivre__sources--ordi { display: none; } .vivre-tab { display: grid; } .vivre__verdict { order: 2; align-self: auto; margin: 1.4rem 0 0; } .vivre__verdict b { font-size: 1.2rem; line-height: 1.35; } .vivre__verdict em { margin: .3rem 0 0; padding: .04em .4em .08em; } .vivre__liste { order: 3; margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--trait-nuit); gap: 1.1rem; } .vivre__label { display: block; font: 800 .78rem/1 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--citron); } /* chaque puce sur une seule ligne, même à 360 px */ .vivre__coches { gap: .9rem; font-size: clamp(.98rem, calc((100vw - 4.6rem) / 18.15), 1.08rem); } .vivre__whatsapp { order: 4; margin-top: 1.6rem; gap: .9rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--nuit-clair); font-size: 1.04rem; line-height: 1.4; } .vivre__whatsapp svg { width: 2.6rem; height: 2.6rem; padding: .58rem; } .vivre__wa-fin { display: block; } /* sources en deux lignes de 360 à 430 px */ .vivre__sources--tel { display: block; order: 5; margin-top: 1.6rem; font-size: clamp(.75rem, 3.3vw, .8rem); line-height: 1.5; text-wrap: balance; } } /* Sous 390 px, l'en-tête des colonnes (lettre, nom, note, étoiles) se resserre pour tenir dans la carte */ @media (max-width: 389px) { .vivre-tab { gap: .6rem; } .vivre-tab__col { padding-inline: .7rem; } .vivre-tab__tete { gap: .4rem; } .vivre-tab__lettre { width: 1.8rem; height: 1.8rem; font-size: .95rem; } .vivre-tab__note { gap: .25rem; } .vivre-tab .etoiles, .vivre-tab .etoiles__plein { background-size: 52px 9.5px; } .vivre-tab .etoiles { width: 52px; height: 9.5px; } } @media (max-width: 359px) { .vivre-tab__lettre { display: none; } } /* Tuiles « ce que je fais » */ .tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); } .tuile { display: grid; gap: .55rem; align-content: start; } .tuile__visuel { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; background: var(--brume); overflow: hidden; display: grid; place-items: center; margin-bottom: .7rem; } .tuile h3 a { color: inherit; text-decoration: none; } .tuile h3 a:hover { text-decoration: underline; text-decoration-color: var(--citron-fonce); text-decoration-thickness: 3px; text-underline-offset: 5px; } .tuile p { font-size: clamp(1.05rem, 1.4vw, 1.18rem); } /* Les trois leviers numérotés 1, 2, 3 */ .tuile__titre { display: flex; align-items: center; gap: .7rem; } .tuile__num { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--citron); color: var(--nuit); display: inline-grid; place-items: center; font-family: var(--f-titre); font-weight: 900; font-size: 1.05rem; flex: none; } .tuile__texte { color: var(--nuit); text-wrap: balance; } /* Le rapport mensuel : un bandeau clair, l'icône dans un rond foncé et trois pastilles */ .rapport { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; padding: 1.1rem 1.4rem; border-radius: 22px; background: var(--brume); } .rapport__icone { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--nuit); color: var(--citron); display: grid; place-items: center; flex: none; } .rapport__icone svg { width: 1.4rem; height: 1.4rem; } .rapport p { margin: 0; font-family: var(--f-titre); font-weight: 800; color: var(--nuit); font-size: 1.2rem; text-wrap: balance; } .rapport__pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .rapport__pastilles li { padding: .42rem .9rem; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--blanc); color: var(--nuit); font-weight: 600; font-size: .98rem; line-height: 1.2; } @media (max-width: 600px) { .rapport { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem 1rem; padding: 1.1rem 1.2rem; } .rapport__pastilles { grid-column: 1 / -1; } .rapport p { font-size: 1.12rem; line-height: 1.2; } } .tv-site { grid-template-rows: none; } .tv-site::before { content: ""; position: absolute; inset: 14% 12% auto; height: 72%; border-radius: 12px; background: var(--blanc); box-shadow: 0 16px 30px -18px rgba(8, 51, 53, .45); } .tv-site > * { position: absolute; z-index: 1; } .tv-site__barre { top: 18%; left: 16%; display: flex; gap: 4px; } .tv-site__barre i { width: 7px; height: 7px; border-radius: 50%; background: var(--trait); } .tv-site__titre { top: 30%; left: 16%; width: 52%; height: 14px; border-radius: 7px; background: var(--nuit); } .tv-site__ligne { top: 45%; left: 16%; width: 64%; height: 8px; border-radius: 4px; background: #D9E4E1; } .tv-site__ligne--courte { top: 53%; width: 44%; } .tv-site__bouton { top: 64%; left: 16%; padding: .45rem .9rem; border-radius: 999px; background: var(--citron); color: var(--nuit); font: 700 .75rem/1 var(--f-texte); } .tv-fiche { align-content: center; } .tv-fiche::before { content: ""; position: absolute; inset: 20% 14%; border-radius: 14px; background: var(--blanc); box-shadow: 0 0 0 2px var(--citron), 0 16px 30px -18px rgba(8, 51, 53, .45); } .tv-fiche > * { position: relative; z-index: 1; } .tv-fiche { grid-template-columns: auto; justify-items: start; padding: 0 22%; gap: .35rem; } .tv-fiche__nom { font: 700 .95rem/1.1 var(--f-texte); color: var(--nuit); } .tv-fiche__etoiles { color: #F2B705; letter-spacing: .1em; font-size: .9rem; line-height: 1; } .tv-fiche__ouvert { font: 700 .75rem/1 var(--f-texte); color: #1D7A4C; } .tv-fiche__puces { display: flex; gap: .3rem; } .tv-fiche__puces i { font: 600 .68rem/1 var(--f-texte); font-style: normal; padding: .3rem .55rem; border-radius: 999px; border: 1px solid var(--trait); color: var(--nuit); } .tv-fiche__puces i:first-child { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); } .tv-avis { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 0 12%; align-items: center; } .tv-avis__bulle { background: var(--nuit); color: var(--blanc); font: 600 .85rem/1.35 var(--f-texte); padding: .8rem 1rem; border-radius: 18px 18px 18px 4px; box-shadow: 0 16px 30px -18px rgba(8, 51, 53, .6); } .tv-avis__qr { width: 74px; height: 74px; border-radius: 10px; background: linear-gradient(var(--blanc), var(--blanc)) padding-box, repeating-conic-gradient(var(--nuit) 0 25%, var(--blanc) 0 50%) 0 0 / 12px 12px; border: 7px solid var(--blanc); box-shadow: 0 12px 24px -16px rgba(8, 51, 53, .5); } .tv-avis__qr { background: repeating-conic-gradient(var(--nuit) 0 25%, var(--blanc) 0 50%) 0 0 / 12px 12px; } @media (max-width: 700px) { .tuiles { grid-template-columns: 1fr; max-width: 30rem; } } @media (max-width: 960px) and (min-width: 701px) { .tuile__visuel { aspect-ratio: 1; } .tv-avis { grid-template-columns: 1fr; justify-items: center; padding: 0 10%; } } /* Mesure */ .mesure__grille { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } .mesure__texte { display: grid; gap: 1.2rem; } .mesure__texte > p:first-of-type { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--blanc); } /* Titre : « visibilité » dans une pastille citron, comme « vous » en haut de page ; la phrase en deux temps */ .mesure__pastille { display: inline-block; padding: .03em .3em .05em; border-radius: 999px 999px 999px .16em; background: var(--citron); color: var(--nuit); } .sans-coupure { white-space: nowrap; } .mesure__intro { display: grid; gap: .35rem; } .mesure__intro strong { font-family: var(--f-titre); font-weight: 800; font-size: 1.3em; line-height: 1.15; color: var(--blanc); text-wrap: balance; } .mesure__chiffre { color: var(--citron); } .mesure__intro > span { color: var(--sur-nuit-doux); font-size: .95em; text-wrap: pretty; } .legende { list-style: none; padding: 0; display: grid; gap: .6rem; } .legende li { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--blanc); } .legende .point { width: 1.15rem; height: 1.15rem; font-size: 0; box-shadow: none; } .mesure__carte { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: end; border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--trait-nuit); } .mesure__fond { position: absolute; inset: 0; width: 100%; height: 100%; } .mf-terre { fill: #0C4144; } .mf-mer, .mf-baie { fill: #052224; } .mf-route { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 7; stroke-linecap: round; } .mesure__ville { position: absolute; z-index: 1; font: 600 .78rem/1 var(--f-texte); color: rgba(255, 255, 255, .7); background: rgba(5, 34, 36, .75); padding: .3rem .5rem; border-radius: 999px; pointer-events: none; } .mv-touquet { left: 6%; top: 2.2%; } .mv-etaples { left: 54%; top: 2.2%; } .mv-berck { left: 2%; top: 53.8%; } .mv-montreuil { right: 2%; top: 41.8%; } .mesure__points { position: absolute; inset: 8%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); place-items: center; } .point { display: grid; place-items: center; width: clamp(1.8rem, 3.4vw, 2.5rem); aspect-ratio: 1; border-radius: 50%; font: 700 clamp(.58rem, .95vw, .78rem)/1 var(--f-texte); font-variant-numeric: tabular-nums; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); } .point--haut { background: var(--citron); color: var(--nuit); } .point--milieu { background: #F2B544; color: #3A2600; } .point--bas { background: #C8413D; color: var(--blanc); } @media (max-width: 860px) { .mesure__grille { grid-template-columns: 1fr; } .mesure__carte { justify-self: center; } } @media (max-width: 560px) { .mv-etaples, .mv-montreuil { display: none; } .mesure__ville { font-size: .66rem; } } @media (max-width: 960px) { .offres--v2 { margin-inline: auto; } } /* Offres compactes sur fond clair */ .offres--v2 .offre { background: var(--blanc); border-color: var(--trait); color: var(--texte); gap: 1.1rem; } .offres--v2 .offre h3, .offres--v2 .offre__prix { color: var(--nuit); } .offres--v2 .offre .coches svg { color: var(--citron-fonce); } .offres--v2 .offre__mise { font-size: .92rem; color: var(--texte-doux); } .offres--v2 .offre .btn--contour { border-color: var(--nuit); color: var(--nuit); } .offres--v2 .offre .btn--contour:hover { background: var(--nuit); color: var(--blanc); } .offres--v2 .offre--phare { background: var(--nuit); border-color: var(--nuit); color: var(--sur-nuit-doux); box-shadow: 0 0 0 3px var(--citron), 0 30px 60px -36px rgba(8, 51, 53, .8); } .offres--v2 .offre--phare h3, .offres--v2 .offre--phare .offre__prix { color: var(--blanc); } .offres--v2 .offre--phare .coches svg { color: var(--citron); } .offres--v2 .offre--phare .offre__mise { color: var(--sur-nuit-doux); } /* Carte avec relief : étiquette, début de ligne en gras, coches dans des ronds citron */ .offre__tag { justify-self: start; margin-bottom: .3rem; padding: .32rem .8rem; border-radius: 999px; background: var(--brume); color: var(--nuit); font-weight: 700; font-size: .82rem; line-height: 1.2; } .offres--v2 .offre--relief .offre__pour { text-wrap: balance; } .offres--v2 .offre--relief .coches { gap: .75rem; } .offres--v2 .offre--relief .coches li { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .7rem; align-items: center; } .offres--v2 .offre--relief .coches svg { width: 1.5rem; height: 1.5rem; padding: .27rem; margin: 0; border-radius: 50%; background: var(--citron); color: var(--nuit); } .offres--v2 .offre--relief .coches span { text-wrap: pretty; } .offres--v2 .offre--relief .coches b { color: var(--nuit); font-weight: 700; } .offres--v2 .offre--relief .offre__mise { color: var(--texte); } .offres--v2 .offre--relief .offre__mise strong { color: var(--nuit); font-weight: 700; } .offres--v2 .offre--relief .offre__mise mark { background: linear-gradient(transparent 58%, var(--citron) 58%); color: inherit; padding: 0 .1em; margin: 0 -.1em; font-weight: 700; } /* La même carte sur fond nuit : gras en blanc, « offerte » en citron sans surlignage */ .offres--v2 .offre--phare.offre--relief .coches b { color: var(--blanc); } .offres--v2 .offre--phare.offre--relief .offre__mise { color: var(--sur-nuit-doux); text-wrap: pretty; } .offres--v2 .offre--phare.offre--relief .offre__mise strong { color: var(--blanc); } .offres--v2 .offre--phare.offre--relief .offre__mise mark { background: none; color: var(--citron); padding: 0; margin: 0; } /* Conditions sous la mise en place : une seule ligne sur téléphone comme sur ordi */ .offre__conditions { display: block; margin-top: .2rem; font-size: .9em; text-wrap: balance; } /* Cartes de l'accueil : ce qui est fait au départ, puis le bloc « Chaque mois » */ .offre__liste { display: grid; gap: .75rem; } .offre__rythme { display: flex; align-items: center; gap: .6rem; margin-top: .15rem; font: 800 .74rem/1 var(--f-texte); letter-spacing: .09em; text-transform: uppercase; color: var(--citron-fonce); } .offre__rythme::after { content: ""; flex: 1; height: 1px; background: var(--trait); } .offres--v2 .offre--phare .offre__rythme { color: var(--citron); } .offres--v2 .offre--phare .offre__rythme::after { background: var(--trait-nuit); } .offres--v2 .offre--relief .offre__mise { text-wrap: balance; } @media (min-width: 961px) { .offre__conditions { font-size: .87em; } } /* Téléphones étroits : la ligne d'engagement reste sur une ligne, la taille suit la largeur de l'écran (texte de 23,85 px par px de police, carte large de l'écran moins 85 px, marge de sécurité de 3 %) */ @media (max-width: 401px) { .offre__conditions { white-space: nowrap; font-size: min(.9em, calc((100vw - 85px) / 24.6)); } } @media (max-width: 354px) { .offre__conditions { white-space: normal; font-size: .9em; } } /* Sous les cartes : trois tuiles (offre fondateurs, site seul, graphisme), puis le lien vers le détail et la TVA */ .offres__tuiles { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .offres__tuile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; row-gap: .25rem; align-items: center; align-content: start; background: var(--brume); border-radius: var(--rayon); padding: 1.35rem 1.5rem; font-size: .95rem; line-height: 1.5; color: var(--texte); } .offres__tuile-titre { font-weight: 800; color: var(--nuit); font-size: 1.02rem; } .offres__tuile > p:last-child { grid-column: 1 / -1; margin-top: .45rem; } .offres__pied { margin-top: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; } .offres__pied .mention-tva { margin: 0; } @media (max-width: 960px) { .offres__tuiles { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; gap: .9rem; } .offres__pied { max-width: 34rem; margin-inline: auto; flex-direction: column; align-items: stretch; gap: 1.1rem; } .offres__pied .mention-tva { text-align: center; } } @media (max-width: 560px) { .offres__tuile { padding: 1.2rem 1.3rem; } } /* Page des tarifs : les cartes suivent directement le titre, dans le même bandeau sombre */ .bande--suite { padding-top: 0; } .tete-page:has(+ .bande--suite) { padding-bottom: 2.5rem; } .bande--suite .offres--v2 .offre--phare { background: var(--nuit-clair); } /* Tuiles détaillées de la page des tarifs : un prix, puis quelques lignes courtes */ .offres__tuile--detail { align-content: start; } .tuile__prix { grid-column: 1 / -1; margin-top: .7rem; color: var(--texte); font-size: .98rem; } .tuile__prix b { font-family: var(--f-titre); font-weight: 900; font-size: 1.45rem; letter-spacing: -.01em; color: var(--nuit); } .tuile__liste { grid-column: 1 / -1; list-style: none; padding: 0; margin: .65rem 0 0; display: grid; gap: .45rem; font-size: .93rem; line-height: 1.4; } .tuile__liste li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .55rem; align-items: start; } .tuile__liste svg { width: 1rem; height: 1rem; margin-top: .18rem; color: var(--citron-fonce); } .mention-tva--clair { color: var(--texte-doux); } /* Réalisation, écrans qui défilent */ .cas--v2 { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); } .cas--v2 .cas__texte p { font-size: clamp(1.08rem, 1.5vw, 1.25rem); } @media (max-width: 860px) { .cas--v2 { grid-template-columns: 1fr; } } /* Secteurs en tuiles */ .secteurs-v2 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .secteurs-v2 a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1.25rem; align-items: start; height: 100%; padding: clamp(1.3rem, 2.4vw, 1.8rem); border: 1px solid var(--trait-nuit); border-radius: var(--rayon); color: var(--sur-nuit-doux); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .secteurs-v2 a:hover { border-color: var(--citron); background: var(--nuit-clair); } .secteurs-v2 h3 { color: var(--blanc); font-size: clamp(1.2rem, 2vw, 1.55rem); } .secteurs-v2 p { grid-column: 1; font-size: 1.05rem; } .secteurs-v2 .fleche { grid-column: 2; grid-row: 1 / span 2; border-color: rgba(255, 255, 255, .5); color: var(--blanc); } .secteurs-v2 a:hover .fleche, .secteurs-v2 a:focus-visible .fleche { background: var(--citron); border-color: var(--citron); color: var(--nuit); } @media (max-width: 760px) { .secteurs-v2 { grid-template-columns: 1fr; } } /* Qui je suis */ .moi { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; } .moi__visuel { position: relative; width: min(100%, 400px); justify-self: center; } .moi__texte { display: grid; gap: 1.2rem; justify-items: start; } .moi__forme { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.75rem, 3.3vw, 2.75rem); line-height: 1.14; letter-spacing: -.012em; color: var(--nuit); } .insecable { display: inline-block; } .moi__forme mark { background: linear-gradient(var(--citron), var(--citron)) no-repeat 0 88% / 100% .4em; color: inherit; padding: 0 .06em; white-space: nowrap; } .moi__bio { display: grid; gap: .75rem; max-width: 46ch; font-size: clamp(1.05rem, 1.35vw, 1.2rem); text-wrap: pretty; } .moi__promesses { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .moi__promesses li { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.05rem; border-radius: 999px; background: var(--brume); color: var(--nuit); font-weight: 600; font-size: .98rem; line-height: 1.2; } .moi__promesses svg { width: 1.1rem; height: 1.1rem; color: var(--citron-fonce); flex: none; } @media (max-width: 760px) { .moi { grid-template-columns: 1fr; } .moi__visuel { width: min(76%, 300px); } } /* Page cachée de la signature mail (/signature/) : aperçu fait des mêmes images que la signature */ .sig-apercu { max-width: 455px; } .sig-apercu img { display: block; width: 100%; height: auto; } .sig-apercu a { display: block; } .sig-apercu__rang { display: grid; background: var(--nuit); } .sig-apercu__rang--contacts { grid-template-columns: minmax(0, 130fr) minmax(0, 130fr) minmax(0, 195fr); } .sig-apercu__rang--boutons { grid-template-columns: minmax(0, 263fr) minmax(0, 192fr); } .sig-outils { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .sig-outils + .form-statut { margin-top: 1rem; max-width: 455px; } .sig-etapes { margin-top: clamp(2.5rem, 5vw, 3.5rem); }