/* ========================================================================== Menuiseries Naudon Mathe : feuille de style principale Charte : rouge #C80000 (logo), anthracite, pierre. Titres Overused Grotesk, texte General Sans. ========================================================================== */ /* ---------- Polices (servies par le thème) ---------- */ @font-face { font-family: "Overused Grotesk"; src: url("../fonts/OverusedGrotesk-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0-2C, U+2E-2010, U+2012-10FFFF; } @font-face { font-family: "Overused Grotesk"; src: url("../fonts/OverusedGrotesk-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0-2C, U+2E-2010, U+2012-10FFFF; } @font-face { font-family: "Overused Grotesk"; src: url("../fonts/OverusedGrotesk-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0-2C, U+2E-2010, U+2012-10FFFF; } @font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* ---------- Jetons ---------- */ :root { --rouge: #C80000; --rouge-fonce: #A10000; --rouge-nuit: #5E0606; --rouge-pale: #FBEBEA; --encre: #1C1C1C; --nuit: #141414; --gris: #303030; --texte: #2A2A2A; --texte-doux: #5B5B5B; --pierre: #F4F1EC; --pierre-2: #EAE4DA; --ligne: #E3DDD3; --blanc: #FFFFFF; --mat-bois: #B57B44; --mat-aluminium: #8A949C; --mat-pvc: #DCD8D0; --mat-mixte: linear-gradient(90deg, #B57B44 50%, #8A949C 50%); --f-titre: "Overused Grotesk", "General Sans", "Helvetica Neue", Arial, sans-serif; --f-texte: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --contenu: 760px; --large: 1240px; --tres-large: 1440px; --gouttiere: clamp(20px, 4.5vw, 56px); --entete-h: 84px; --r-s: 8px; --r-m: 16px; --r-l: 28px; --ombre: 0 24px 60px -28px rgba(30, 10, 10, .35); --ombre-douce: 0 10px 30px -18px rgba(30, 10, 10, .25); --ease: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.55, 0, .1, 1); --t-display: clamp(2.6rem, 1.2rem + 4.6vw, 5.4rem); --t-h1: clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem); --t-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3.3rem); --t-h3: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); --t-chapeau: clamp(1.1rem, 1rem + .45vw, 1.35rem); --section: clamp(72px, 9vw, 140px); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 72px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--blanc); color: var(--texte); font: 400 1.0625rem/1.65 var(--f-texte); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--rouge); } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--rouge); color: #fff; } p { margin: 0 0 1.1em; } h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 700; color: var(--encre); letter-spacing: -.025em; line-height: 1.05; margin: 0 0 .5em; text-wrap: balance; } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.015em; } h4 { font-size: 1.05rem; letter-spacing: 0; } strong { font-weight: 600; } .sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .evitement { position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--encre); color: #fff; padding: 12px 18px; border-radius: var(--r-s); } .evitement:focus { top: 16px; color: #fff; } .conteneur { width: 100%; max-width: calc(var(--large) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); } .conteneur-large { width: 100%; max-width: calc(var(--tres-large) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); } .ico { width: 1.2em; height: 1.2em; flex: none; } /* Surtitre : petite ligne au-dessus des titres, avec le trait rouge de la plaquette */ .surtitre { display: inline-flex; align-items: center; gap: .7em; margin: 0 0 1.1rem; font: 600 .78rem/1.2 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--rouge); } .surtitre--clair { color: #fff; } .chapeau { font-size: var(--t-chapeau); line-height: 1.5; color: var(--texte-doux); max-width: 46ch; } /* ---------- Boutons ---------- */ .btn { --b-fond: var(--rouge); --b-texte: #fff; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .65em; min-height: 52px; padding: .8em 1.5em .8em 1.6em; border: 0; border-radius: 999px; background: var(--b-fond); color: var(--b-texte); font: 600 1rem/1.1 var(--f-texte); text-decoration: none; letter-spacing: .005em; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s; touch-action: manipulation; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rouge-fonce); transform: translateX(-101%) skewX(-18deg); transform-origin: left; transition: transform .5s var(--ease); width: 130%; left: -15%; } .btn:hover { color: var(--b-texte); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(200, 0, 0, .65); } .btn:hover::before { transform: translateX(0) skewX(-18deg); } .btn .ico { transition: transform .35s var(--ease); } .btn:hover .ico { transform: translateX(4px); } .btn--blanc { --b-fond: #fff; --b-texte: var(--rouge); } .btn--blanc::before { background: var(--encre); } .btn--blanc:hover { --b-texte: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); } .btn--sombre { --b-fond: var(--encre); } .btn--sombre::before { background: var(--rouge); } .btn--verre { --b-fond: rgba(255, 255, 255, .12); --b-texte: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn--verre::before { background: rgba(255, 255, 255, .18); } .btn--contour { --b-fond: transparent; --b-texte: var(--encre); box-shadow: inset 0 0 0 1.5px currentColor; } .btn--contour::before { background: var(--encre); } .btn--contour:hover { --b-texte: #fff; } .btn--petit { min-height: 44px; padding: .55em 1.15em .55em 1.25em; font-size: .95rem; } /* ========================================================================== En-tête ========================================================================== */ .entete { position: sticky; top: 0; z-index: 100; height: var(--entete-h); background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--ligne); transition: background-color .4s, box-shadow .4s, transform .45s var(--ease), color .3s; } .entete-barre { height: 100%; display: flex; align-items: center; gap: 28px; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); flex: none; } .logo img { width: auto; height: 50px; } .logo-texte { display: flex; flex-direction: column; font-family: var(--f-titre); line-height: .95; letter-spacing: -.01em; } .logo-texte span { font-weight: 300; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-doux); } .logo-texte strong { font-weight: 700; font-size: 1.32rem; color: var(--rouge); letter-spacing: -.01em; } .logo:hover { color: var(--encre); } /* En-tête posé sur une photo : transparent et blanc tant qu'on n'a pas défilé */ body.entete-sur-photo .entete:not(.est-colle):not(.menu-ouvert) { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; } body.entete-sur-photo .entete:not(.est-colle):not(.menu-ouvert) .logo, body.entete-sur-photo .entete:not(.est-colle):not(.menu-ouvert) .logo-texte span { color: #fff; } body.entete-sur-photo .entete:not(.est-colle):not(.menu-ouvert) .logo-texte strong { color: #fff; } body.entete-sur-photo .entete.est-colle, body.entete-sur-photo .entete.menu-ouvert { position: fixed; left: 0; right: 0; } /* Navigation */ .nav { margin-left: auto; } .nav-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; } .nav-item { position: static; } .nav-lien { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; white-space: nowrap; border: 0; background: none; border-radius: 999px; font: 500 .98rem/1 var(--f-texte); text-decoration: none; color: inherit; position: relative; } .nav-lien::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav-lien:hover, .nav-item.est-actif > .nav-lien, .nav-declencheur[aria-expanded="true"] { color: inherit; } .nav-lien:hover::after, .nav-item.est-actif > .nav-lien::after, .nav-declencheur[aria-expanded="true"]::after { transform: scaleX(1); } .nav-chevron { width: 16px; height: 16px; transition: transform .3s var(--ease); } .nav-declencheur[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); } .entete-actions { display: flex; align-items: center; gap: 14px; flex: none; } .entete-tel { display: inline-flex; align-items: center; gap: 8px; font: 600 .98rem/1 var(--f-texte); text-decoration: none; white-space: nowrap; } .entete-tel .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--rouge-pale); color: var(--rouge); } body.entete-sur-photo .entete:not(.est-colle):not(.menu-ouvert) .entete-tel .ico { background: rgba(255, 255, 255, .16); color: #fff; } .burger { display: none; } .nav-mobile-pied { display: none; } /* Panneaux du menu */ .panneau { position: absolute; left: 0; right: 0; top: 100%; padding: 0 var(--gouttiere); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s .3s; pointer-events: none; } .nav-declencheur[aria-expanded="true"] + .panneau { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; pointer-events: auto; } .panneau-dedans { max-width: var(--tres-large); margin: 10px auto 0; display: flex; gap: 32px; padding: 32px; background: #fff; color: var(--texte); border-radius: var(--r-l); box-shadow: 0 40px 80px -30px rgba(20, 5, 5, .4), 0 0 0 1px rgba(0, 0, 0, .04); } .panneau:not(.panneau--mega) .panneau-dedans { max-width: 760px; margin-left: auto; margin-right: calc(50% - 200px); } .panneau-colonnes { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .panneau-titre { display: block; font: 700 1.15rem/1.15 var(--f-titre); letter-spacing: -.01em; color: var(--encre); text-decoration: none; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--ligne); } .panneau-titre:hover { color: var(--rouge); } .panneau-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .panneau-liens a { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: .98rem; text-decoration: none; color: var(--texte-doux); transition: color .2s, transform .3s var(--ease); } .panneau-liens a::before { content: ""; width: 8px; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .panneau-liens a:hover, .panneau-liens a[aria-current] { color: var(--encre); transform: translateX(2px); } .panneau-liens a:hover::before, .panneau-liens a[aria-current]::before { transform: scaleX(1); } .panneau-promo { flex: 0 0 300px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; border-radius: var(--r-m); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: var(--encre); } .pp-img { position: absolute; inset: 0; z-index: -2; } .pp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .panneau-promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .88)); } .panneau-promo:hover { color: #fff; } .panneau-promo:hover img { transform: scale(1.06); } .pp-txt { display: grid; gap: 6px; padding: 22px; font-size: .92rem; line-height: 1.45; } .pp-txt strong { font: 700 1.25rem/1.1 var(--f-titre); } .pp-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; color: #fff; } .pp-cta .ico { width: 18px; color: #fff; } .panneau-agences { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .panneau-agences a { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-m); background: var(--pierre); text-decoration: none; transition: background-color .25s, transform .35s var(--ease); } .panneau-agences a:hover { background: var(--rouge-pale); transform: translateY(-2px); color: inherit; } .pa-ville { font: 700 1.15rem/1.1 var(--f-titre); color: var(--encre); } .pa-dep { font-size: .85rem; color: var(--texte-doux); } .pa-tel { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; color: var(--rouge); font-size: .95rem; } .pa-tel .ico { width: 15px; height: 15px; } .panneau:not(.panneau--mega) .panneau-dedans { flex-direction: column; gap: 16px; } .panneau-tout { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--rouge); text-decoration: none; } /* ========================================================================== Pied de page ========================================================================== */ .pied { position: relative; background: var(--nuit); color: rgba(255, 255, 255, .72); font-size: .95rem; overflow: hidden; } .pied a { color: rgba(255, 255, 255, .78); text-decoration: none; } .pied a:hover { color: #fff; } .pied-haut { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(40px, 5vw, 64px); } .pied .logo { color: #fff; margin-bottom: 20px; } .pied .logo-texte span { color: rgba(255, 255, 255, .6); } .pied .logo-texte strong { color: #fff; } .pied-intro { max-width: 40ch; margin: 0 0 24px; } .pied-actions { display: flex; flex-wrap: wrap; gap: 10px; } .pied .btn { color: var(--b-texte); } .pied-reseau .pied-titre a { color: #fff; } .pied-titre { font: 700 .78rem/1 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 6px 0 18px; } .pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .pied .pied-agences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: rgba(255, 255, 255, .12); border-radius: var(--r-m); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } .pied-agence { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 24px; background: #1A1A1A; transition: background-color .25s; } .pied-agence:hover { background: #212121; } .pied-agence strong { font: 700 1.12rem/1.15 var(--f-titre); } .pied-agence strong a { color: #fff; } .pa-adresse { font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .66); } .pied-agence .pa-tel { margin-top: 4px; color: #fff; white-space: nowrap; } .pied-agence .fa-statut { margin-top: 0 !important; padding: 0; font-size: .78rem; font-weight: 500; background: none; } .pied-agence .fa-statut { align-items: flex-start; } .pied-agence .fa-statut::before { flex: none; width: 7px; height: 7px; margin-top: .42em; } .pied-agence .fa-statut.est-ouvert { background: none; color: #8BE09D; } .pied-agence .fa-statut.est-ferme { background: none; color: rgba(255, 255, 255, .55); } .pied-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-top: 40px; padding-bottom: clamp(40px, 5vw, 64px); background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) var(--gouttiere) 0 / calc(100% - 2 * var(--gouttiere)) 1px no-repeat; } .pied-bas { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 32px; background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) var(--gouttiere) 0 / calc(100% - 2 * var(--gouttiere)) 1px no-repeat; font-size: .86rem; } .pied-bas ul { display: flex; flex-wrap: wrap; gap: 8px 22px; } .pied-signature { display: inline-flex; align-items: center; gap: 6px; } /* Barre d'actions sur mobile */ .barre-mobile { display: none; } /* ========================================================================== Accueil : ouverture ========================================================================== */ .ha { position: relative; min-height: max(680px, 100svh); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; overflow: hidden; background: var(--nuit); } .ha-fond { position: absolute; inset: 0; z-index: -2; } .ha-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.08); animation: ha-zoom 2.6s var(--ease) .5s forwards; } @keyframes ha-zoom { to { transform: scale(1); } } .ha::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 10, 10, .82) 0%, rgba(12, 10, 10, .55) 38%, rgba(12, 10, 10, .12) 72%), linear-gradient(0deg, rgba(12, 10, 10, .75) 0%, rgba(12, 10, 10, 0) 45%); } .ha-diag { position: absolute; z-index: -1; right: 0; bottom: 0; width: 42vw; height: 62%; background: var(--rouge); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .94; transform: translateX(30%); animation: ha-diag 1.4s var(--ease) 1.2s forwards; mix-blend-mode: multiply; } @keyframes ha-diag { to { transform: none; } } .ha-dedans { padding-top: calc(var(--entete-h) + 40px); padding-bottom: 36px; } @media (max-height: 820px) and (min-width: 641px) { .ha-titre { font-size: clamp(2.4rem, 1rem + 4vw, 4.4rem); } .ha .chapeau { margin-bottom: 24px; } } .ha .surtitre { color: #fff; } .ha-titre { color: #fff; font-size: var(--t-display); line-height: .96; letter-spacing: -.04em; max-width: 13ch; margin-bottom: 28px; } .ha-titre .ligne { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } .ha-titre .ligne > span { display: inline-block; transform: translateY(105%); animation: ligne-monte 1.1s var(--ease) forwards; animation-delay: calc(1s + var(--i, 0) * .12s); } .ha-titre em { font-style: normal; color: var(--rouge); position: relative; } .ha-titre em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .09em; background: var(--rouge); transform: scaleX(0); transform-origin: left; animation: souligne 1s var(--ease) 1.9s forwards; } @keyframes ligne-monte { to { transform: none; } } @keyframes souligne { to { transform: scaleX(1); } } .ha .chapeau { color: rgba(255, 255, 255, .86); max-width: 56ch; margin-bottom: 30px; } .ha-actions { display: flex; flex-wrap: wrap; gap: 14px; } .ha .chapeau, .ha-actions, .ha .surtitre { opacity: 0; transform: translateY(16px); animation: apparait 1s var(--ease) forwards; } .ha .surtitre { animation-delay: .9s; } .ha .chapeau { animation-delay: 1.45s; } .ha-actions { animation-delay: 1.6s; } @keyframes apparait { to { opacity: 1; transform: none; } } .ha-preuves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .18); background: rgba(12, 10, 10, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .ha-preuves li { display: flex; align-items: center; gap: 14px; padding: 18px var(--gouttiere); font-size: .95rem; line-height: 1.3; opacity: 0; animation: apparait .9s var(--ease) forwards; animation-delay: calc(1.8s + var(--i, 0) * .1s); } .ha-preuves li + li { border-left: 1px solid rgba(255, 255, 255, .14); } .ha-preuves .ico { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; } .ha-preuves strong { display: block; font: 700 1.05rem/1.15 var(--f-titre); color: #fff; } .ha-preuves span { color: rgba(255, 255, 255, .72); } /* Les volets du logo s'ouvrent à l'arrivée */ .ha-volets { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; perspective: 1800px; pointer-events: none; } .volet { position: relative; background: #fff; padding: clamp(10px, 1.4vw, 20px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 20px); backface-visibility: hidden; box-shadow: 0 0 80px rgba(0, 0, 0, .35); } .volet span { background: var(--rouge); border-radius: clamp(8px, 1.2vw, 18px); } .volet--g { transform-origin: left center; animation: volet-g 1.7s var(--ease-in) .25s forwards; } .volet--d { transform-origin: right center; animation: volet-d 1.7s var(--ease-in) .25s forwards; } @keyframes volet-g { 70% { opacity: 1; } to { transform: rotateY(-105deg); opacity: 0; visibility: hidden; } } @keyframes volet-d { 70% { opacity: 1; } to { transform: rotateY(105deg); opacity: 0; visibility: hidden; } } .volets-vus .ha-volets { display: none; } .volets-vus .ha-fond img, .volets-vus .ha-titre .ligne > span, .volets-vus .ha .surtitre, .volets-vus .ha .chapeau, .volets-vus .ha-actions, .volets-vus .ha-preuves li, .volets-vus .ha-titre em::after, .volets-vus .ha-diag { animation-delay: .1s; animation-duration: .9s; } /* ========================================================================== Sections génériques ========================================================================== */ .section { position: relative; padding-block: var(--section); } .section--pierre { background: var(--pierre); } .section--sombre { background: var(--nuit); color: rgba(255, 255, 255, .78); } .section--sombre h2, .section--sombre h3 { color: #fff; } .section-tete { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); } .section-tete h2 { margin: 0; max-width: 16ch; } .section-tete p { margin: 0; color: var(--texte-doux); font-size: 1.1rem; max-width: 48ch; } .section--sombre .section-tete p { color: rgba(255, 255, 255, .7); } .section-tete--centre { grid-template-columns: 1fr; text-align: center; justify-items: center; } .section-tete--centre h2 { max-width: 20ch; } .lien-suite { margin: 36px 0 0; } .lien-suite a, .lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--encre); text-decoration: none; border-bottom: 2px solid var(--rouge); padding-bottom: 4px; } .lien-suite a .ico, .lien-fleche .ico { transition: transform .35s var(--ease); color: var(--rouge); } .lien-suite a:hover .ico, .lien-fleche:hover .ico { transform: translateX(5px); } /* Révélations au défilement (seulement si JavaScript tourne) */ .js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); } .js .rv.est-visible { opacity: 1; transform: none; } .js .rv-img { clip-path: inset(12% 0 0 0 round var(--r-m)); transition: clip-path 1.3s var(--ease); } .js .rv-img.est-visible { clip-path: inset(0 0 0 0 round var(--r-m)); } /* ---------- Sélecteur de matériaux (accueil) ---------- */ .selmat { background: var(--pierre); overflow: hidden; } .sm-onglets { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: var(--ombre-douce); margin-bottom: 48px; } .sm-onglet { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; font: 600 1rem/1 var(--f-texte); color: var(--texte-doux); transition: background-color .3s, color .3s; } .sm-onglet[aria-selected="true"] { background: var(--encre); color: #fff; } .sm-onglet:hover:not([aria-selected="true"]) { color: var(--encre); background: var(--pierre); } .onglet-pastille, .sm-pastille { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .mat-bois .onglet-pastille, .sm-pastille.mat-bois, .onglet-pastille.mat-bois { background: var(--mat-bois); } .onglet-pastille.mat-aluminium, .sm-pastille.mat-aluminium { background: var(--mat-aluminium); } .onglet-pastille.mat-pvc, .sm-pastille.mat-pvc { background: var(--mat-pvc); } .onglet-pastille.mat-mixte, .sm-pastille.mat-mixte { background: var(--mat-mixte); } .sm-panneau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .sm-panneau[hidden] { display: none; } .sm-visuel { position: relative; aspect-ratio: 1; display: grid; place-items: center; } .sm-visuel::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #fff 30%, var(--pierre-2) 100%); } .sm-visuel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(200, 0, 0, .35); animation: tourne 60s linear infinite; } @keyframes tourne { to { transform: rotate(360deg); } } .sm-visuel img { position: relative; z-index: 1; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(40, 20, 10, .28)); } .sm-panneau.entre .sm-visuel img { animation: coupe-entre .9s var(--ease) both; } .sm-panneau.entre .sm-texte > * { animation: apparait .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); opacity: 0; transform: translateY(14px); } @keyframes coupe-entre { from { opacity: 0; transform: rotate(-8deg) scale(.88) translateY(20px); } to { opacity: 1; transform: none; } } .sm-nom { font: 700 clamp(3.4rem, 2rem + 6vw, 7.5rem)/.9 var(--f-titre); letter-spacing: -.05em; color: var(--encre); margin: 0 0 18px; } .sm-accroche { font: 700 var(--t-h3)/1.2 var(--f-titre); letter-spacing: -.015em; color: var(--rouge); margin-bottom: 14px; } .sm-texte p { color: var(--texte-doux); max-width: 48ch; } .sm-liens { list-style: none; margin: 28px 0 0; padding: 0; display: grid; border-top: 1px solid var(--ligne); } .sm-liens a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--ligne); text-decoration: none; font: 700 1.2rem/1.2 var(--f-titre); color: var(--encre); transition: padding .35s var(--ease), color .25s; } .sm-liens a:hover { padding-left: 14px; color: var(--rouge); } .sm-liens .perf { margin-left: auto; } .sm-liens .ico { color: var(--rouge); } /* Pastille de performance thermique */ .perf { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; padding: 10px 16px; border-radius: var(--r-m); background: var(--encre); color: #fff; line-height: 1.1; } .perf-mention { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .65); } .perf-valeur { font: 700 1.5rem/1.1 var(--f-titre); letter-spacing: -.02em; } .perf-valeur sub { font-size: .55em; vertical-align: baseline; position: relative; top: .2em; } .perf-unite { font-size: .8rem; color: rgba(255, 255, 255, .7); } .perf--mini { padding: 6px 12px; border-radius: 10px; } .perf--mini .perf-mention { font-size: .62rem; } .perf--mini .perf-valeur { font-size: 1.05rem; } .perf--mini .perf-unite { font-size: .7rem; } /* ---------- Tuiles des familles ---------- */ .tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 300px); gap: 14px; } .tuile { position: relative; display: flex; align-items: flex-end; border-radius: var(--r-m); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: var(--gris); } .tuile:nth-child(1) { grid-column: span 2; grid-row: span 2; } .tuile:nth-child(8) { grid-column: span 2; } .tuile-img { position: absolute; inset: 0; z-index: -2; } .tuile-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease); } .tuile-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 35%, rgba(10, 10, 10, .78)); transition: background .5s; } .tuile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .tuile:hover { color: #fff; } .tuile:hover img { transform: scale(1.09); } .tuile:hover::after { transform: scaleX(1); } .tuile-corps { display: grid; gap: 4px; padding: clamp(18px, 2vw, 28px); } .tuile-univers { justify-self: start; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; } .tuile-titre { font: 700 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.05 var(--f-titre); letter-spacing: -.02em; } .tuile:nth-child(1) .tuile-titre { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); } .tuile-sous { font-size: .92rem; color: rgba(255, 255, 255, .78); } .tuile-fleche { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--rouge); transform: scale(.85); opacity: .9; transition: transform .45s var(--ease), background-color .3s, color .3s; } .tuile:hover .tuile-fleche { transform: scale(1) rotate(45deg); background: var(--rouge); color: #fff; } /* ---------- Atelier (section sombre) ---------- */ .atelier { overflow: hidden; padding-bottom: clamp(48px, 5vw, 80px); } .atelier-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 110px); align-items: center; } .atelier .chapeau { color: rgba(255, 255, 255, .78); } .atelier-liste { list-style: none; margin: 28px 0 36px; padding: 0; display: grid; gap: 12px; } .atelier-liste li { display: flex; gap: 14px; align-items: flex-start; } .atelier-liste .ico { width: 22px; height: 22px; color: var(--rouge); margin-top: 3px; } .collage { position: relative; aspect-ratio: 1 / 1.05; } .collage figure { position: absolute; margin: 0; border-radius: var(--r-m); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); } .collage img { width: 100%; height: 100%; object-fit: cover; } .collage figure:nth-child(1) { left: 0; top: 4%; width: 62%; height: 64%; } .collage figure:nth-child(2) { right: 0; top: 0; width: 44%; height: 42%; } .collage figure:nth-child(3) { right: 6%; bottom: 0; width: 58%; height: 50%; } .collage-pastille { position: absolute; left: 4%; bottom: 6%; z-index: 2; width: 150px; height: 150px; border-radius: 50%; background: var(--rouge); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 20px 40px -12px rgba(200, 0, 0, .6); } .collage-pastille strong { font: 700 2.1rem/1 var(--f-titre); letter-spacing: -.03em; } .collage-pastille span { font-size: .78rem; line-height: 1.25; padding-inline: 18px; } .defile-texte { margin-top: clamp(64px, 8vw, 120px); white-space: nowrap; font: 700 clamp(3rem, 2rem + 6vw, 8rem)/1 var(--f-titre); letter-spacing: -.045em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .22); will-change: transform; } .defile-texte span { color: var(--rouge); -webkit-text-stroke: 0; } /* Chiffres */ .chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .chiffres li { padding: 8px 24px 8px 0; display: grid; gap: 8px; align-content: start; container-type: inline-size; } .chiffres li + li { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .14); } .ch-valeur { font: 700 clamp(2.4rem, 1.8rem + 2vw, 3.8rem)/1 var(--f-titre); font-size: clamp(1.7rem, 22cqi, 3.8rem); white-space: nowrap; word-spacing: .06em; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; } .ch-valeur small { font-size: .42em; letter-spacing: 0; color: var(--rouge); vertical-align: .9em; font-weight: 700; } .ch-texte { font-size: .95rem; color: rgba(255, 255, 255, .66); max-width: 26ch; } .section:not(.section--sombre) .chiffres li + li { border-left-color: var(--ligne); } .section:not(.section--sombre) .ch-valeur { color: var(--encre); } .section:not(.section--sombre) .ch-texte { color: var(--texte-doux); } /* ---------- Parcours en 4 étapes ---------- */ .parcours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; counter-reset: etape; } .parcours::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: var(--ligne); } .parcours::after { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: var(--rouge); transform: scaleX(var(--avance, 0)); transform-origin: left; transition: transform .2s linear; } .etape { position: relative; z-index: 1; counter-increment: etape; } .etape-ico { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--ligne), var(--ombre-douce); color: var(--rouge); margin-bottom: 26px; transition: background-color .4s, color .4s; } .etape.est-visible .etape-ico { background: var(--rouge); color: #fff; box-shadow: 0 0 0 8px var(--rouge-pale); } .etape-ico .ico { width: 30px; height: 30px; } .etape h3::before { content: "0" counter(etape); display: block; font: 300 .95rem/1 var(--f-titre); color: var(--rouge); letter-spacing: .1em; margin-bottom: 10px; } .etape p { color: var(--texte-doux); font-size: 1rem; } /* ---------- Réalisations ---------- */ .grille-real { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .grille-real.est-defilante { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding-bottom: 18px; margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere); scrollbar-width: thin; scrollbar-color: var(--rouge) var(--ligne); } .grille-real.est-defilante .carte-real { flex: 0 0 clamp(270px, 30vw, 400px); scroll-snap-align: start; } .carte-real { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--encre); } .cr-img { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; background: var(--pierre-2); } .cr-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .carte-real:hover img { transform: scale(1.06); } .carte-real:hover { color: var(--encre); } .cr-corps { display: grid; gap: 4px; padding: 16px 4px 0; } .cr-cat { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); } .cr-titre { font: 700 1.25rem/1.2 var(--f-titre); letter-spacing: -.01em; } .carte-real:hover .cr-titre { text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: .2em; } .cr-lieu { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--texte-doux); } .cr-lieu .ico { width: 16px; height: 16px; color: var(--rouge); } .defile-nav { display: flex; gap: 10px; } .defile-nav button { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--encre); display: grid; place-items: center; transition: background-color .25s, color .25s; } .defile-nav button:hover { background: var(--encre); color: #fff; } .defile-nav button:disabled { opacity: .35; cursor: default; background: #fff; color: var(--encre); } /* Filtres de l'archive */ .filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; } .filtre { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--pierre); font-weight: 500; transition: background-color .25s, color .25s; } .filtre[aria-pressed="true"] { background: var(--encre); color: #fff; } .filtre:hover:not([aria-pressed="true"]) { background: var(--pierre-2); } .carte-real[hidden] { display: none; } /* ---------- Labels ---------- */ .labels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; } .label { background: #fff; padding: 30px; display: grid; gap: 10px; align-content: start; transition: background-color .3s; } .label:hover { background: var(--pierre); } .label-logo { height: 84px; display: flex; align-items: center; } .label-logo img { max-height: 84px; max-width: 170px; width: auto; height: auto; object-fit: contain; } .label-logo .ico { width: 44px; height: 44px; color: var(--rouge); } .label-nom { font: 700 1.25rem/1.15 var(--f-titre); color: var(--encre); } .label-texte { font-size: .95rem; color: var(--texte-doux); } /* ---------- Réseau d'agences ---------- */ .reseau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .reseau-carte { position: relative; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--ligne); padding: clamp(16px, 3vw, 36px); color: var(--encre); } .section:not(.section--pierre) .reseau-carte { background: var(--pierre); box-shadow: none; } .carte-reseau { width: 100%; height: auto; color: var(--gris); } .carte-reseau text { font: 700 21px var(--f-titre); fill: var(--encre); letter-spacing: -.01em; } .carte-reseau .cr-sous { font: 500 14px var(--f-texte); fill: var(--texte-doux); letter-spacing: .02em; } .cr-lien { stroke: var(--rouge); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .55; } .js .cr-lien { stroke-dashoffset: 400; } .cr-coeur { fill: var(--rouge); stroke: #fff; stroke-width: 3; } .cr-atelier .cr-coeur { fill: var(--encre); } .cr-onde { fill: var(--rouge); opacity: 0; transform-box: fill-box; transform-origin: center; } .est-visible .cr-onde { animation: onde 2.6s ease-out infinite; animation-delay: calc(var(--d, 0) * .4s); } .est-visible .cr-lien { animation: trace 2.2s var(--ease) forwards; } @keyframes onde { 0% { opacity: .45; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } } @keyframes trace { to { stroke-dashoffset: 0; } } .reseau-agences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .carte-agence { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); transition: box-shadow .35s var(--ease), transform .35s var(--ease); } .carte-agence:hover { box-shadow: 0 0 0 1px var(--ligne), var(--ombre); transform: translateY(-3px); } .ca-role { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); } .ca-nom { margin: 4px 0 0; font-size: 1.5rem; } .ca-dep { margin: 0; color: var(--texte-doux); font-size: .9rem; } .ca-infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .93rem; } .ca-infos li { display: flex; gap: 10px; align-items: flex-start; } .ca-infos .ico { width: 18px; height: 18px; color: var(--rouge); margin-top: 2px; } .ca-infos a { text-decoration: none; font-weight: 600; color: var(--encre); overflow-wrap: anywhere; } .ca-infos a:hover { color: var(--rouge); } .ca-h { display: block; } .ca-h strong { font-weight: 600; color: var(--encre); } .ca-lien { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--rouge); } /* ---------- Bande devis ---------- */ .bande-devis { position: relative; overflow: hidden; background: var(--rouge); color: #fff; padding-block: clamp(64px, 8vw, 120px); isolation: isolate; } .bd-fond span { position: absolute; z-index: -1; top: -20%; bottom: -20%; width: 38%; background: var(--rouge-fonce); transform: skewX(-22deg); } .bd-fond span:first-child { right: -6%; } .bd-fond span:last-child { right: 30%; width: 6%; opacity: .55; } .bd-dedans { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 40px 64px; align-items: center; } .bande-devis h2 { color: #fff; font-size: var(--t-h1); margin-bottom: 18px; max-width: 14ch; } .bande-devis p { color: rgba(255, 255, 255, .88); font-size: 1.15rem; max-width: 52ch; margin: 0; } .bd-actions { display: grid; gap: 22px; justify-items: start; } .bd-tel { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font: 700 1.6rem/1.1 var(--f-titre); letter-spacing: -.01em; } .bd-tel:hover { color: #fff; } .bd-tel small { display: block; font: 500 .85rem/1.2 var(--f-texte); color: rgba(255, 255, 255, .78); letter-spacing: 0; } .bd-tel .ico { width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: rgba(255, 255, 255, .14); } /* ---------- Questions fréquentes ---------- */ .faq-bloc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .faq-bloc .section-tete { display: block; position: sticky; top: calc(var(--entete-h) + 32px); margin: 0; } .faq-bloc .section-tete p { margin-top: 18px; } details.faq, .wp-block-details.faq { border-bottom: 1px solid var(--ligne); } details.faq:first-of-type, .wp-block-details.faq:first-of-type { border-top: 1px solid var(--ligne); } details.faq summary { position: relative; list-style: none; cursor: pointer; padding: 24px 56px 24px 0; font: 700 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.3 var(--f-titre); color: var(--encre); letter-spacing: -.01em; transition: color .2s; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--pierre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C80000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .4s var(--ease), background-color .3s; } details.faq[open] summary::after { transform: rotate(135deg); background-color: var(--rouge-pale); } details.faq summary:hover { color: var(--rouge); } details.faq > :not(summary) { margin: 0 0 1em; color: var(--texte-doux); max-width: 62ch; } details.faq[open] > :not(summary) { animation: apparait .5s var(--ease); } /* ========================================================================== Pages intérieures ========================================================================== */ /* En-tête photo plein cadre */ .hero-photo { position: relative; min-height: min(86svh, 820px); display: flex; align-items: flex-end; color: #fff; isolation: isolate; overflow: hidden; background: var(--nuit); } .hp-fond { position: absolute; inset: 0; z-index: -2; } .hp-fond img { width: 100%; height: 100%; object-fit: cover; } .hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 10, 10, .8) 0%, rgba(12, 10, 10, .4) 55%, rgba(12, 10, 10, .1) 100%), linear-gradient(0deg, rgba(12, 10, 10, .55), rgba(12, 10, 10, 0) 50%); } .hp-dedans { padding-top: calc(var(--entete-h) + 64px); padding-bottom: clamp(56px, 7vw, 96px); } .hp-titre { color: #fff; font-size: var(--t-h1); max-width: 15ch; margin-bottom: 20px; } .hero-photo .surtitre { color: #fff; } .hero-photo .chapeau { color: rgba(255, 255, 255, .86); max-width: 52ch; margin-bottom: 32px; } .hp-actions, .hs-actions { display: flex; flex-wrap: wrap; gap: 14px; } .hp-diag { position: absolute; right: 0; bottom: 0; width: 30vw; height: 45%; background: var(--rouge); clip-path: polygon(100% 0, 100% 100%, 0 100%); mix-blend-mode: multiply; opacity: .92; z-index: -1; } .hero-photo .ariane { color: rgba(255, 255, 255, .75); } .hero-photo .ariane a { color: #fff; } /* Fil d'Ariane */ .ariane { margin-bottom: 26px; font-size: .88rem; color: var(--texte-doux); } .ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; } .ariane li { display: inline-flex; align-items: center; } .ariane li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; } .ariane a { text-decoration: none; color: var(--encre); } .ariane a:hover { color: var(--rouge); text-decoration: underline; } /* En-tête matériau : texte et coupe du profilé */ .hero-materiau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(80svh, 760px); background: var(--pierre); } .hm-texte { padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 80px) max(var(--gouttiere), calc((100vw - var(--large)) / 2)); align-self: center; } .hm-titre { font-size: var(--t-h1); max-width: 13ch; } .hm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; } .hm-visuel { position: relative; overflow: hidden; background: var(--gris); min-height: 420px; } .hm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .hm-visuel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20, 20, 20, .2), rgba(20, 20, 20, .75)); z-index: 1; } .hm-coupe-cadre { position: absolute; inset: 8% 8% 8% 8%; z-index: 3; display: grid; place-items: center; } .hm-coupe { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)); animation: coupe-entre 1.2s var(--ease) .2s both; } .hm-diag { position: absolute; z-index: 2; left: 0; bottom: 0; width: 70%; height: 55%; background: var(--rouge); clip-path: polygon(0 0, 100% 100%, 0 100%); opacity: .95; } .mat-bois .hm-visuel { background: #3b2a1d; } .mat-aluminium .hm-visuel { background: #2b3034; } /* En-tête simple */ .hero-simple { background: var(--pierre); padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 80px); } .hs-dedans { display: grid; gap: 48px; } .hero-simple.a-photo .hs-dedans { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; } .hs-titre { font-size: var(--t-h1); max-width: 18ch; } .hs-photo { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--ombre); } .hs-photo img { width: 100%; height: 100%; object-fit: cover; } /* Onglets de matériaux et de sous-pages */ .onglets { position: sticky; top: var(--entete-h); z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ligne); transition: top .45s var(--ease); } .onglets-dedans { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; } .onglets-dedans::-webkit-scrollbar { display: none; } .onglet { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-weight: 500; color: var(--texte-doux); white-space: nowrap; transition: background-color .25s, color .25s; } .onglet:hover { background: var(--pierre); color: var(--encre); } .onglet.est-actif { background: var(--encre); color: #fff; } .onglets + .onglets { display: none; } /* Cartes des matériaux */ .cartes-mat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .carte-mat { display: flex; flex-direction: column; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); overflow: hidden; text-decoration: none; color: var(--encre); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .carte-mat:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--ligne), var(--ombre); color: var(--encre); } .cm-visuel { position: relative; aspect-ratio: 1 / .9; display: grid; place-items: center; background: var(--pierre); overflow: hidden; } .cm-visuel::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 90%; aspect-ratio: 1; border-radius: 50%; background: var(--rouge); opacity: 0; transform: scale(.6); transition: opacity .5s, transform .7s var(--ease); } .carte-mat:hover .cm-visuel::before { opacity: .1; transform: scale(1); } .cm-visuel img { position: relative; width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 20px 24px rgba(40, 20, 10, .25)); transition: transform .8s var(--ease); } .carte-mat:hover .cm-visuel img { transform: rotate(-4deg) scale(1.06); } .cm-corps { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 22px; } .cm-titre { font: 700 1.35rem/1.1 var(--f-titre); letter-spacing: -.015em; } .cm-texte { color: var(--texte-doux); font-size: .95rem; line-height: 1.5; } .cm-gammes { font-size: .82rem; font-weight: 600; color: var(--texte-doux); } .cm-pied { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; } .cm-fleche { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--pierre); color: var(--rouge); transition: background-color .3s, color .3s, transform .4s var(--ease); } .carte-mat:hover .cm-fleche { background: var(--rouge); color: #fff; transform: translateX(3px); } /* Fiches gammes */ .gammes { display: grid; gap: 28px; } .gamme { display: grid; grid-template-columns: 1fr; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--ligne); overflow: hidden; } .gamme.a-visuel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .gamme-visuel { position: relative; background: var(--pierre); display: grid; place-items: center; padding: 40px; min-height: 380px; } .gamme-visuel img { max-height: 420px; width: auto; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(40, 20, 10, .25)); } .gamme-visuel .perf { position: absolute; left: 24px; top: 24px; } .gamme-corps { padding: clamp(28px, 4vw, 52px); } .gamme-tete { display: grid; gap: 6px; margin-bottom: 18px; } .gamme-tete .perf { justify-self: start; margin-top: 10px; } .gamme-nom { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); } .gamme-type { margin: 0; color: var(--rouge); font-weight: 600; font-size: .98rem; } .gamme-texte { color: var(--texte-doux); } .gamme-details { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; } .gamme-details li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--encre); font-size: .97rem; line-height: 1.4; } .gamme-details .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--rouge); color: #fff; stroke-width: 3; margin-top: 1px; } .gamme-tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 24px; border-top: 1px solid var(--ligne); } .gamme-tech h4 { font: 600 .75rem/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 14px; } .gamme-tech ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: .95rem; } .gamme-tech ul:not(.puces) li { padding-left: 16px; position: relative; } .gamme-tech ul:not(.puces) li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 2px; background: var(--rouge); } .puces { display: flex !important; flex-wrap: wrap; gap: 6px !important; } .puces li { padding: 6px 12px; border-radius: 999px; background: var(--pierre); font-size: .85rem; } /* Finitions */ .finitions { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-l); background: var(--pierre); } .finitions-titre { margin-bottom: 24px; } .fin-groupe + .fin-groupe { margin-top: 24px; } .fin-nom { font: 600 .75rem/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 14px; } .fin-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .fin-liste li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #fff; font-size: .92rem; font-weight: 500; } .fin-pastille { width: 34px; height: 34px; border-radius: 50%; background: var(--teinte); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 -6px 10px rgba(0, 0, 0, .12); } .fin-pastille.est-ral { background: conic-gradient(#c80000, #e9a100, #f2d600, #4d9a33, #1f5aa6, #6a2c8c, #c80000); } .fin-note { margin: 20px 0 0; font-size: .95rem; } .fin-avert { margin: 8px 0 0; font-size: .82rem; color: var(--texte-doux); } /* Cartes de sous-pages */ .cartes-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; } .carte-page { display: flex; flex-direction: column; border-radius: var(--r-m); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--ligne); text-decoration: none; color: var(--encre); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .carte-page:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--ligne), var(--ombre); color: var(--encre); } .cp-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--pierre-2); } .cp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .carte-page:hover .cp-img img { transform: scale(1.06); } .cp-corps { display: flex; flex-direction: column; gap: 8px; padding: 22px; flex: 1; } .cp-titre { font: 700 1.35rem/1.15 var(--f-titre); letter-spacing: -.015em; } .cp-texte { color: var(--texte-doux); font-size: .95rem; line-height: 1.5; } .cp-lien { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--rouge); } /* ---------- Contenu éditorial (blocs de l'éditeur) ---------- */ .contenu-page { padding-bottom: 0; } .contenu-page > :not(.alignfull):not(.alignwide):not(.section) { max-width: var(--contenu); margin-inline: auto; padding-inline: var(--gouttiere); box-sizing: content-box; } .contenu-page > .alignwide { max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); box-sizing: content-box; } .contenu-page > *:first-child:not(.section) { margin-top: var(--section); } .contenu-page > *:last-child:not(.section) { margin-bottom: var(--section); } .contenu-page .section { padding-inline: var(--gouttiere); } .contenu-page .section > * { max-width: var(--contenu); margin-inline: auto; } .contenu-page .section > .alignwide, .contenu-page .section > .wp-block-columns, .contenu-page .section > .section-tete, .contenu-page .section > .wp-block-shortcode, .contenu-page .section > .cartes-mat, .contenu-page .section > .gammes, .contenu-page .section > .tuiles, .contenu-page .section > .reseau, .contenu-page .section > .grille-real, .contenu-page .section > .labels, .contenu-page .section > .cartes-pages, .contenu-page .section > .finitions, .contenu-page .section > .chiffres, .contenu-page .section > .wp-block-media-text, .contenu-page .section > .faq-bloc, .contenu-page .section > .contact-grille, .contenu-page .section > .frise, .contenu-page .section > .documents, .contenu-page .section > .lien-suite { max-width: var(--large); } .contenu-page .section > :first-child { margin-top: 0; } .contenu-page .section > :last-child { margin-bottom: 0; } .contenu-page h2 { margin-top: 1.4em; } .contenu-page h3 { margin-top: 1.6em; } .contenu-page .section > h2:first-child, .contenu-page .section-tete h2 { margin-top: 0; } .contenu-page p, .contenu-page li { color: var(--texte); } .section--sombre p, .section--sombre li { color: rgba(255, 255, 255, .78); } .contenu-page ul:not([class]), .contenu-page .wp-block-list { padding-left: 0; list-style: none; display: grid; gap: 10px; margin-block: 0 1.4em; } .contenu-page ul:not([class]) > li, .contenu-page .wp-block-list > li { position: relative; padding-left: 30px; } .contenu-page ul:not([class]) > li::before, .contenu-page .wp-block-list > li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 16px; border-radius: 50%; background: var(--rouge-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C80000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; } .contenu-page .intro { font-size: var(--t-chapeau); line-height: 1.55; color: var(--encre); } .wp-block-columns { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); margin-bottom: 1.5em; } .wp-block-column { flex: 1 1 0; min-width: 0; } .wp-block-columns.are-vertically-aligned-center { align-items: center; } .wp-block-image { margin: 0 0 1.5em; } .wp-block-image img { border-radius: var(--r-m); } .wp-block-image figcaption { font-size: .85rem; color: var(--texte-doux); margin-top: 10px; } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5em 0; } .wp-block-button__link { display: inline-flex; align-items: center; min-height: 52px; padding: .8em 1.6em; border-radius: 999px; background: var(--rouge); color: #fff; font-weight: 600; text-decoration: none; transition: background-color .25s, transform .3s var(--ease); } .wp-block-button__link:hover { background: var(--rouge-fonce); color: #fff; transform: translateY(-2px); } .is-style-contour .wp-block-button__link { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); } .is-style-contour .wp-block-button__link:hover { background: var(--encre); color: #fff; } .carte-texte { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-m); background: var(--pierre); } .carte-texte > :last-child { margin-bottom: 0; } .liste-check { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; gap: 12px; } .liste-check li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; } .liste-check .ico { width: 22px; height: 22px; color: var(--rouge); margin-top: 2px; } .liste-check--colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } .citation, .wp-block-quote { margin: 2em 0; padding: 0 0 0 28px; border-left: 4px solid var(--rouge); font: 400 italic clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.4 var(--f-titre); color: var(--encre); } .wp-block-quote cite { display: block; margin-top: 12px; font: 500 normal .9rem var(--f-texte); color: var(--texte-doux); } .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .95rem; } .wp-block-table th, .wp-block-table td { padding: 14px 16px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; } .wp-block-table thead th { font: 600 .78rem/1.2 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); border-bottom: 2px solid var(--encre); } .wp-block-table { overflow-x: auto; margin: 0 0 1.5em; } .wp-block-separator { border: 0; height: 1px; background: var(--ligne); margin: 3em auto; } /* Formulaire */ .formulaire { display: grid; gap: 28px; } .ff-groupe { border: 0; margin: 0; padding: 0; min-width: 0; } .ff-groupe legend { padding: 0; margin-bottom: 14px; font: 700 1.3rem/1.2 var(--f-titre); color: var(--encre); } .ff-aide { font: 400 .9rem var(--f-texte); color: var(--texte-doux); } .ff-choix { display: flex; flex-wrap: wrap; gap: 8px; } .ff-choix--ligne { margin-top: 14px; gap: 22px; } .pilule { position: relative; } .pilule input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .pilule span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ligne); font-weight: 500; font-size: .95rem; transition: background-color .2s, box-shadow .2s, color .2s; } .pilule input:checked + span { background: var(--encre); color: #fff; box-shadow: none; } .pilule input:focus-visible + span { outline: 3px solid var(--rouge); outline-offset: 2px; } .pilule:hover span { box-shadow: inset 0 0 0 1.5px var(--encre); } .radio, .case { display: inline-flex; gap: 10px; align-items: flex-start; cursor: pointer; } .radio input, .case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rouge); flex: none; } .ff-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } .ff-champ { margin: 0; display: grid; gap: 7px; } .ff-large { grid-column: 1 / -1; } .ff-champ label { font-weight: 600; font-size: .95rem; color: var(--encre); } .ff-champ input, .ff-champ select, .ff-champ textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 1.5px solid var(--ligne); border-radius: var(--r-s); background: #fff; font: 400 1rem/1.4 var(--f-texte); color: var(--texte); transition: border-color .2s, box-shadow .2s; } .ff-champ textarea { resize: vertical; min-height: 150px; } .ff-champ input:focus, .ff-champ select:focus, .ff-champ textarea:focus { outline: 0; border-color: var(--encre); box-shadow: 0 0 0 4px rgba(200, 0, 0, .12); } .ff-champ .est-invalide { border-color: var(--rouge); } .ff-erreur { font-size: .85rem; color: var(--rouge-fonce); font-weight: 500; } .requis { color: var(--rouge); } .ff-rgpd { margin: 0; font-size: .92rem; color: var(--texte-doux); } .ff-envoi { margin: 0; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; } .ff-mention { font-size: .85rem; color: var(--texte-doux); } .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-retour { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r-m); margin-bottom: 24px; } .form-retour--ok { background: #EAF6EC; color: #1E5A2B; } .form-retour--ok .ico { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #1E7A35; color: #fff; stroke-width: 3; } .form-retour--erreur { background: var(--rouge-pale); color: var(--rouge-nuit); font-weight: 500; } .fr-titre { font: 700 1.25rem/1.2 var(--f-titre); margin-bottom: 4px; } /* Contact : formulaire et agences côte à côte */ .contact-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .contact-carte { padding: clamp(24px, 4vw, 48px); border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--ligne), var(--ombre); } .contact-agences { display: grid; gap: 14px; position: sticky; top: calc(var(--entete-h) + 24px); } /* Page réalisation */ .real-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .real-galerie figure { margin: 0; border-radius: var(--r-m); overflow: hidden; } .real-galerie figure:first-child { grid-column: 1 / -1; } .real-galerie img { width: 100%; height: 100%; object-fit: cover; } .real-infos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .real-infos span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); font-weight: 500; font-size: .92rem; } .real-infos .ico { width: 16px; height: 16px; color: var(--rouge); } /* 404 */ .page-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--section); background: var(--pierre); } .page-404 h1 { font-size: var(--t-display); } /* ========================================================================== Adaptations ========================================================================== */ @media (max-width: 1440px) { .nav-lien { padding: 0 12px; } } @media (max-width: 1280px) { .entete-tel span { display: none; } .nav-lien { padding: 0 9px; font-size: .94rem; } } @media (max-width: 1100px) { :root { --entete-h: 72px; } /* Sans flou ici : un backdrop-filter enfermerait le panneau .nav (position: fixed) dans la hauteur de l'en-tête. */ .entete { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } .entete-actions { margin-left: auto; } .logo img { height: 44px; } .logo-texte strong { font-size: 1.15rem; } .burger { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--encre); color: #fff; } .burger-barres, .burger-barres::before, .burger-barres::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), opacity .2s; } .burger-barres { position: relative; } .burger-barres::before, .burger-barres::after { content: ""; position: absolute; left: 0; } .burger-barres::before { top: -6px; } .burger-barres::after { top: 6px; width: 14px; } .menu-ouvert .burger-barres { background: transparent; } .menu-ouvert .burger-barres::before { transform: translateY(6px) rotate(45deg); } .menu-ouvert .burger-barres::after { transform: translateY(-6px) rotate(-45deg); width: 20px; } body.entete-sur-photo .entete:not(.est-colle):not(.menu-ouvert) .burger { background: rgba(255, 255, 255, .16); } .entete-actions .btn { display: none; } .nav { position: fixed; inset: var(--entete-h) 0 0 0; z-index: 99; margin: 0; background: #fff; color: var(--texte); overflow-y: auto; overscroll-behavior: contain; padding: 12px var(--gouttiere) 40px; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s .3s; } .menu-ouvert .nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } .nav-liste { flex-direction: column; align-items: stretch; gap: 0; } .nav-item { border-bottom: 1px solid var(--ligne); } .nav-lien { width: 100%; justify-content: space-between; height: auto; min-height: 62px; padding: 0 4px; font: 700 1.45rem/1.1 var(--f-titre); letter-spacing: -.015em; color: var(--encre); border-radius: 0; } .nav-lien::after { display: none; } .nav-chevron { width: 24px; height: 24px; color: var(--rouge); } .panneau { position: static; padding: 0; visibility: visible; opacity: 1; transform: none; pointer-events: auto; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .nav-declencheur[aria-expanded="true"] + .panneau { grid-template-rows: 1fr; } .panneau-dedans { overflow: hidden; min-height: 0; margin: 0; padding: 0; box-shadow: none; border-radius: 0; flex-direction: column; gap: 0; background: none; } .nav-declencheur[aria-expanded="true"] + .panneau .panneau-dedans { padding-bottom: 18px; } .panneau:not(.panneau--mega) .panneau-dedans { margin: 0; max-width: none; } .panneau-colonnes { grid-template-columns: 1fr 1fr; gap: 18px 20px; } .panneau-titre { font-size: 1.05rem; padding-bottom: 6px; margin-bottom: 4px; border: 0; color: var(--rouge); } .panneau-liens a { padding: 6px 0; } .panneau-promo { display: none; } .panneau-agences { grid-template-columns: 1fr 1fr; } .nav-mobile-pied { display: grid; gap: 12px; margin-top: 28px; } .nav-mobile-pied .btn { width: 100%; } .ha-preuves { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ha-preuves li:nth-child(3) { border-left: 0; } .ha-preuves li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); } .cartes-mat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .labels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reseau { grid-template-columns: 1fr; } .gamme.a-visuel { grid-template-columns: 1fr; } .gamme-visuel { min-height: 300px; } } @media (max-width: 900px) { .section-tete { grid-template-columns: 1fr; align-items: start; } .sm-panneau { grid-template-columns: 1fr; } .sm-visuel { max-width: 420px; width: 100%; margin-inline: auto; } .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; } .tuile:nth-child(1) { grid-column: span 2; grid-row: span 1; } .tuile:nth-child(8) { grid-column: span 2; } .atelier-grille { grid-template-columns: 1fr; } .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chiffres li:nth-child(3) { padding-left: 0; border-left: 0; } .parcours { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .parcours::before, .parcours::after { display: none; } .grille-real { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bd-dedans { grid-template-columns: 1fr; } .faq-bloc { grid-template-columns: 1fr; } .faq-bloc .section-tete { position: static; } .hero-materiau { grid-template-columns: 1fr; } .hm-texte { padding: 40px var(--gouttiere); } .hm-visuel { min-height: 360px; } .hero-simple.a-photo .hs-dedans { grid-template-columns: 1fr; } .contact-grille { grid-template-columns: 1fr; } .contact-agences { position: static; } .gamme-tech { grid-template-columns: 1fr; } } @media (max-width: 640px) { body { font-size: 1rem; padding-bottom: 72px; } .logo-texte span { font-size: .7rem; } .logo-texte strong { font-size: 1.05rem; } .entete-tel { display: none; } .ha { min-height: max(620px, 100svh); } .ha-titre { font-size: clamp(2.5rem, 11vw, 3.4rem); } .ha-preuves { display: none; } .ha-diag { width: 70vw; height: 40%; } .sm-onglets { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-m); width: 100%; } .sm-onglet { justify-content: center; padding: 0 12px; } .tuiles { grid-template-columns: 1fr; grid-auto-rows: 220px; } .tuile:nth-child(1), .tuile:nth-child(8) { grid-column: auto; } .cartes-mat, .grille-real, .reseau-agences, .labels, .ff-grille, .gamme-details, .liste-check--colonnes, .panneau-colonnes, .panneau-agences { grid-template-columns: 1fr; } .parcours { grid-template-columns: 1fr; } .chiffres li { padding-right: 12px; } .chiffres li + li { padding-left: 12px; } .collage-pastille { width: 116px; height: 116px; } .collage-pastille strong { font-size: 1.6rem; } .bd-tel { font-size: 1.35rem; } .real-galerie { grid-template-columns: 1fr; } .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--ligne), 0 -10px 30px -20px rgba(0, 0, 0, .3); } .barre-mobile .btn { min-height: 50px; padding-inline: 12px; } .hp-diag { width: 60vw; height: 30%; } } /* Mouvement réduit : tout s'affiche directement */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .ha-volets { display: none; } .js .rv { opacity: 1; transform: none; } .js .rv-img { clip-path: none; } .defile-texte { transform: none !important; } } /* ---------- Frise de l'entreprise ---------- */ .frise { list-style: none; margin: 0 auto; padding: 0; max-width: var(--large); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: frise; } .frise li { position: relative; padding: 28px 28px 32px 0; border-top: 2px solid var(--ligne); display: grid; gap: 10px; align-content: start; } .frise li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 5px var(--pierre); } .frise strong { font: 700 clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem)/1 var(--f-titre); letter-spacing: -.03em; color: var(--encre); } .frise span { color: var(--texte-doux); font-size: .98rem; } @media (max-width: 900px) { .frise { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .frise { grid-template-columns: 1fr; } } /* ---------- Documents à télécharger ---------- */ .documents { display: grid; gap: 48px; max-width: var(--large); margin-inline: auto; } .doc-groupe h2 { font-size: var(--t-h3); margin: 0 0 18px; } .doc-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; } .doc-liste li { padding: 0 !important; } .doc-liste li::before { display: none !important; } .doc-liste a { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); text-decoration: none; color: var(--encre); transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .doc-liste a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ligne), var(--ombre-douce); color: var(--encre); } .doc-liste .ico { width: 26px; height: 26px; color: var(--rouge); } .doc-liste span { flex: 1; display: grid; gap: 2px; } .doc-liste small { color: var(--texte-doux); font-size: .85rem; } /* ---------- Réponse directe (début de page, pensée pour les moteurs de réponse) ---------- */ .reponse, p.reponse { position: relative; padding: 24px 28px 24px 76px !important; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne), var(--ombre-douce); font-size: 1.12rem; line-height: 1.6; color: var(--encre) !important; } .reponse::before { content: ""; position: absolute; left: 24px; top: 26px; width: 34px; height: 34px; border-radius: 50%; background: var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; } .section--pierre .reponse { box-shadow: none; } .reponse strong { color: var(--encre); } /* Liens dans le texte : visibles (soulignés en rouge) */ .contenu-page p a:not(.btn), .contenu-page li a:not(.btn), details.faq a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .22em; } .contenu-page p a:not(.btn):hover, .contenu-page li a:not(.btn):hover, details.faq a:hover { color: var(--rouge); } .section--sombre p a:not(.btn) { color: #fff; } /* Tableau comparatif */ .comparatif { overflow-x: auto; border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--ligne); background: #fff; } .comparatif table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; } .comparatif th, .comparatif td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; } .comparatif thead th { background: var(--encre); color: #fff; font: 600 .8rem/1.2 var(--f-texte); letter-spacing: .08em; text-transform: uppercase; } .comparatif tbody th { font: 700 1.05rem/1.2 var(--f-titre); color: var(--encre); white-space: nowrap; } .comparatif tbody tr:last-child td, .comparatif tbody tr:last-child th { border-bottom: 0; } .comparatif td strong { color: var(--rouge); } /* ---------- Accueil : en bref ---------- */ .bref { padding-block: clamp(64px, 7vw, 110px); } .bref-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .bref h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); max-width: 22ch; } .bref .reponse { margin: 24px 0 0; } .fiche-identite { margin: 0; display: grid; border-top: 1px solid var(--ligne); } .fiche-identite div { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--ligne); } .fiche-identite dt { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); padding-top: 3px; } .fiche-identite dd { margin: 0; font-weight: 600; color: var(--encre); } @media (max-width: 900px) { .bref-grille { grid-template-columns: 1fr; } } @media (max-width: 640px) { .fiche-identite div { grid-template-columns: 1fr; gap: 2px; } } /* ---------- Rythme vertical du contenu ---------- WordPress injecte « :root :where(.is-layout-flow) > * { margin-block: 0 } » dans les groupes : ces règles (spécificité supérieure) rétablissent les espacements. */ .contenu-page p { margin-block: 0 1.1em; } .contenu-page h2 { margin-block: 1.5em .6em; } .contenu-page h3 { margin-block: 1.7em .55em; } .contenu-page .wp-block-list, .contenu-page ul:not([class]) { margin-block: 0 1.4em; } .contenu-page .wp-block-columns { margin-block: 1.6em; } .contenu-page .wp-block-image, .contenu-page .comparatif, .contenu-page .wp-block-buttons { margin-block: 1.6em; } .contenu-page .reponse { margin-block: 0 clamp(48px, 6vw, 80px); } .contenu-page .section-tete { margin-block: 0 clamp(40px, 5vw, 72px); } .contenu-page .section > :first-child, .contenu-page .wp-block-column > :first-child { margin-top: 0; } .contenu-page .section > :last-child, .contenu-page .wp-block-column > :last-child { margin-bottom: 0; } .contenu-page details.faq > p { margin-block: 0 1em; } .contenu-page .section > .comparatif { max-width: 1040px; } .contenu-page .lien-suite, .lien-suite { margin-block: 32px 0; } .contenu-page .finitions-titre { margin-block: 0 22px; } .contenu-page .fin-nom { margin-block: 0 14px; } .contenu-page .fin-note { margin-block: 20px 0; } .contenu-page .fin-avert { margin-block: 8px 0; } .contenu-page .gamme-texte { margin-block: 0 1em; } /* ========================================================================== Compositions éditoriales « magazine » (pages produits et accueil) ========================================================================== */ /* Largeurs : ces compositions occupent toute la largeur du conteneur */ .contenu-page .section > .split, .contenu-page .section > .cartes-info, .contenu-page .section > .media-split, .contenu-page .section > .proximite, .contenu-page .section > .autres, .contenu-page .section > .options-bloc, .contenu-page .section > .wp-block-shortcode, .contenu-page .section > .reponse { max-width: var(--large); } /* L'essentiel : grande phrase d'introduction */ .contenu-page .reponse, .reponse { position: relative; margin-inline: auto; padding: clamp(36px, 4.5vw, 64px) clamp(24px, 5vw, 80px) clamp(32px, 4vw, 56px) !important; border-radius: var(--r-l); background: radial-gradient(120% 140% at 100% 0%, var(--rouge-pale) 0%, #fff 46%); box-shadow: 0 0 0 1px var(--ligne), var(--ombre); font: 300 clamp(1.2rem, 1rem + .85vw, 1.65rem)/1.45 var(--f-titre) !important; letter-spacing: -.012em; color: var(--encre) !important; } .reponse strong { font-weight: 700; } .reponse::before { content: "L’essentiel"; position: absolute; top: 0; left: clamp(24px, 5vw, 80px); transform: translateY(-50%); width: auto; height: auto; padding: 9px 16px 9px 34px; border-radius: 999px; background: var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") 13px 50% / 14px no-repeat; color: #fff; font: 600 .72rem/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 24px -10px rgba(200, 0, 0, .6); } .reponse::after { content: ""; position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; background: var(--rouge); clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: var(--r-l); opacity: .9; } .bref .reponse { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem) !important; padding: 40px 36px 32px !important; } .bref .reponse::after { width: 70px; height: 70px; } /* Titre collant à gauche, contenu à droite */ .split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 112px); margin-inline: auto; align-items: start; } .split-tete { position: sticky; top: calc(var(--entete-h) + 96px); } .contenu-page .split-tete h2 { margin: 0; font-size: var(--t-h2); } .contenu-page .split-intro { margin-block: 22px 0; font-size: 1.12rem; color: var(--texte-doux); } .contenu-page .split-corps > p:first-child { font-size: 1.15rem; line-height: 1.6; color: var(--encre); } .split + .cartes-info, .split + .media-split, .split + .options-bloc { margin-top: clamp(40px, 5vw, 72px); } /* Cartes à icône */ .cartes-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-inline: auto; counter-reset: carte; } .contenu-page .cartes-info { margin-block: 0; } .contenu-page .split + .cartes-info, .contenu-page .split + .options-bloc, .contenu-page .split + .media-split { margin-top: clamp(40px, 5vw, 72px); } .contenu-page .cartes-info + .options-bloc { margin-top: 16px; } .contenu-page .cartes-info + p, .contenu-page .split-corps .cartes-info + p { margin-top: 28px; } .contenu-page .media-split + .autres, .contenu-page .split + .autres { margin-top: clamp(40px, 5vw, 64px); } .carte-info { position: relative; padding: 30px 28px 28px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .carte-info::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .carte-info:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ligne), var(--ombre); } .carte-info:hover::after { transform: scaleX(1); } .section--pierre .carte-info { box-shadow: none; } .ci-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--rouge-pale); color: var(--rouge); margin-bottom: 22px; transition: background-color .4s, color .4s, transform .5s var(--ease); } .ci-ico .ico { width: 26px; height: 26px; } .carte-info:hover .ci-ico { background: var(--rouge); color: #fff; transform: rotate(-6deg); } .contenu-page .carte-info h3 { margin: 0 0 10px; font-size: 1.22rem; line-height: 1.2; } .contenu-page .carte-info p { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--texte-doux); } .ci-num { position: absolute; top: 18px; right: 22px; font: 700 3.2rem/1 var(--f-titre); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ligne); transition: -webkit-text-stroke-color .4s; } .carte-info:hover .ci-num { -webkit-text-stroke-color: var(--rouge); } .split-corps .cartes-info { grid-template-columns: 1fr; } .cartes-info--sombre .carte-info, .section--sombre .carte-info { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .section--sombre .contenu-page .carte-info h3, .section--sombre .carte-info h3 { color: #fff; } .section--sombre .carte-info p { color: rgba(255, 255, 255, .7) !important; } .section--sombre .ci-ico { background: rgba(200, 0, 0, .18); } /* Options en pastilles */ .options-bloc { margin-inline: auto; display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; align-items: start; padding: 28px 32px; border-radius: var(--r-m); background: var(--pierre); } .section--pierre .options-bloc { background: #fff; } .contenu-page .options-bloc h3 { margin: 6px 0 0; font-size: 1.15rem; white-space: nowrap; } .puces-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .contenu-page .puces-options li { padding: 8px 14px 8px 10px !important; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--ligne); font-size: .92rem; font-weight: 500; color: var(--encre); } .contenu-page .puces-options li::before { display: none !important; } .puces-options .ico { width: 16px; height: 16px; color: var(--rouge); stroke-width: 3; } /* Image et texte */ .media-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; margin-inline: auto; } .media-split--inverse .media-figure { order: 2; } .media-figure { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 4.4; box-shadow: var(--ombre); isolation: isolate; } .media-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); } .media-split:hover .media-figure img { transform: scale(1.04); } .media-diag { position: absolute; right: 0; bottom: 0; width: 46%; height: 34%; background: var(--rouge); clip-path: polygon(100% 0, 100% 100%, 0 100%); mix-blend-mode: multiply; opacity: .92; } .media-badge { position: absolute; left: 22px; bottom: 22px; z-index: 2; margin: 0 !important; display: grid; padding: 16px 20px; border-radius: var(--r-m); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: var(--ombre-douce); } .media-badge strong { font: 700 2rem/1 var(--f-titre); letter-spacing: -.03em; color: var(--rouge); } .media-badge span { font-size: .82rem; color: var(--texte-doux); } .contenu-page .media-texte h2 { margin-top: 0; } .section--sombre .media-texte p, .section--sombre .media-texte li { color: rgba(255, 255, 255, .78); } .section--sombre .media-texte strong { color: #fff; } .section--sombre .contenu-page .wp-block-list > li::before, .section--sombre .wp-block-list > li::before { background-color: rgba(200, 0, 0, .25); } /* Sections sombres dans le contenu */ .contenu-page .section--sombre { background: var(--nuit) radial-gradient(80% 60% at 0% 100%, rgba(200, 0, 0, .18), transparent 70%); } .contenu-page .section--sombre h2, .contenu-page .section--sombre h3 { color: #fff; } /* Agences de proximité */ .proximite { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-inline: auto; margin-top: clamp(40px, 5vw, 64px) !important; } .prox { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-m); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff !important; text-decoration: none !important; transition: background-color .35s, transform .45s var(--ease); } .prox:hover { background: var(--rouge); transform: translateY(-4px); } .prox-dep { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .prox-dep .ico { width: 14px; height: 14px; color: var(--rouge); } .prox:hover .prox-dep, .prox:hover .prox-dep .ico { color: #fff; } .prox-titre { font: 700 1.3rem/1.15 var(--f-titre); letter-spacing: -.015em; } .prox-adr { font-size: .88rem; color: rgba(255, 255, 255, .65); } .prox-pied { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; } .prox-tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; } .prox-tel .ico { width: 15px; height: 15px; } .prox-fleche { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: transform .4s var(--ease); } .prox:hover .prox-fleche { transform: rotate(-45deg); background: rgba(255, 255, 255, .2); } .section:not(.section--sombre) .prox { background: #fff; box-shadow: 0 0 0 1px var(--ligne); color: var(--encre) !important; } .section:not(.section--sombre) .prox-adr, .section:not(.section--sombre) .prox-dep { color: var(--texte-doux); } .section:not(.section--sombre) .prox:hover { color: #fff !important; } .section:not(.section--sombre) .prox:hover .prox-adr { color: rgba(255, 255, 255, .8); } /* Autres matériaux */ .autres { margin-inline: auto; margin-top: clamp(40px, 5vw, 64px) !important; } .autres-mat { list-style: none; margin: 0 !important; padding: 0; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px !important; } .contenu-page .autres-mat li { padding: 0 !important; } .contenu-page .autres-mat li::before { display: none !important; } .autres-mat a { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 16px; align-items: center; padding: 16px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); text-decoration: none !important; color: var(--encre) !important; position: relative; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .autres-mat a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ligne), var(--ombre); } .am-img { grid-row: span 2; width: 88px; height: 88px; border-radius: 12px; background: var(--pierre); display: grid; place-items: center; overflow: hidden; } .am-img img { width: 78%; height: 78%; object-fit: contain; transition: transform .6s var(--ease); } .autres-mat a:hover .am-img img { transform: rotate(-6deg) scale(1.08); } .am-txt { display: grid; gap: 2px; } .am-txt strong { font: 700 1.08rem/1.2 var(--f-titre); } .am-txt span { font-size: .85rem; color: var(--texte-doux); line-height: 1.4; } .autres-mat .perf { justify-self: start; } .am-fleche { position: absolute; top: 14px; right: 14px; color: var(--rouge); } .am-fleche .ico { width: 18px; height: 18px; } .contenu-page .autres-aussi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0 0 !important; font-size: .95rem; color: var(--texte-doux); } .contenu-page .autres-aussi a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--encre); color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: .9rem; transition: background-color .25s; } .contenu-page .autres-aussi a:hover { background: var(--rouge); } .autres-aussi .ico { width: 14px; height: 14px; } .section--sombre .autres-mat a { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff !important; } .section--sombre .am-txt span { color: rgba(255, 255, 255, .65); } /* Tableau comparatif, version enrichie */ .comparatif { border-radius: var(--r-l) !important; box-shadow: 0 0 0 1px var(--ligne), var(--ombre) !important; } .contenu-page .section > .comparatif { max-width: var(--large); } .comparatif table { min-width: 760px; } .comparatif thead th { background: var(--nuit) !important; padding: 18px 20px !important; } .comparatif tbody th, .comparatif tbody td { padding: 22px 20px !important; } .comparatif tbody tr { transition: background-color .25s; } .comparatif tbody tr:hover { background: var(--pierre); } .comparatif tbody th a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--encre) !important; font: 700 1.15rem/1.2 var(--f-titre); } .comparatif tbody th a::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); background: var(--pastille, var(--gris)); } /* La pastille suit le matériau du lien, quel que soit l'ordre des lignes */ .comparatif tbody th a[href*="/bois/"]::before { --pastille: var(--mat-bois); } .comparatif tbody th a[href*="/aluminium/"]::before { --pastille: var(--mat-aluminium); } .comparatif tbody th a[href*="/pvc/"]::before { --pastille: var(--mat-pvc); } .comparatif tbody th a[href*="/mixte-bois-alu/"]::before { background: var(--mat-mixte); } .comparatif tbody th a:hover { color: var(--rouge) !important; } .tab-perf { display: inline-grid; gap: 2px; } .tab-perf small { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); } .tab-perf b { font: 700 2rem/1 var(--f-titre); letter-spacing: -.03em; color: var(--rouge); } .tab-perf b sub { font-size: .45em; color: var(--encre); vertical-align: baseline; margin-left: 4px; } .tab-note { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--rouge-pale); color: var(--rouge-fonce); font-size: .78rem; font-weight: 600; margin-top: 8px; } /* FAQ en cartes */ details.faq, .wp-block-details.faq { border: 0 !important; margin: 0 0 10px; padding: 0 26px; border-radius: var(--r-m); background: var(--pierre); transition: background-color .3s, box-shadow .3s; } .section--pierre details.faq { background: #fff; } details.faq:hover { box-shadow: 0 0 0 1px var(--ligne); } details.faq[open] { background: #fff; box-shadow: 0 0 0 2px var(--rouge), var(--ombre-douce); } details.faq summary { padding: 22px 52px 22px 0; } details.faq summary::after { right: -6px; background-color: #fff; } .section--pierre details.faq summary::after { background-color: var(--pierre); } details.faq[open] summary { color: var(--rouge); } .contenu-page details.faq > p, details.faq > :not(summary) { padding-bottom: 6px; } .faq-cta { margin-top: 26px !important; } .faq-cta .btn { color: #fff !important; text-decoration: none !important; } /* Accueil, en bref : tuiles d'identité */ .fiche-identite { grid-template-columns: 1fr 1fr; gap: 10px; border: 0; } .fiche-identite div { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; border: 0; border-radius: 14px; background: var(--pierre); transition: background-color .3s, transform .4s var(--ease); } .fiche-identite div:hover { background: var(--rouge-pale); transform: translateY(-2px); } .fiche-identite div:last-child { grid-column: 1 / -1; background: var(--rouge); } .fiche-identite div:last-child dt { color: rgba(255, 255, 255, .75); } .fiche-identite div:last-child dd { color: #fff; } .fiche-identite dt { padding: 0; color: var(--rouge); } .fiche-identite dd { font: 700 1.05rem/1.3 var(--f-titre); letter-spacing: -.01em; } @media (max-width: 1100px) { .proximite { grid-template-columns: 1fr 1fr; } .autres-mat { grid-template-columns: 1fr !important; } } @media (max-width: 900px) { .split, .media-split { grid-template-columns: 1fr; } .split-tete { position: static; } .media-split--inverse .media-figure { order: 0; } .media-figure { aspect-ratio: 4 / 3; } .options-bloc { grid-template-columns: 1fr; } } @media (max-width: 640px) { .proximite { grid-template-columns: 1fr; } .reponse::after { width: 60px; height: 60px; } .fiche-identite { grid-template-columns: 1fr; } details.faq, .wp-block-details.faq { padding: 0 18px; } } .contenu-page .note-source { margin-block: 18px 0; font-size: .85rem; color: var(--texte-doux); text-align: center; max-width: var(--large); } .contenu-page .titre-prox { margin: clamp(56px, 7vw, 96px) auto 0; max-width: var(--large); font-size: var(--t-h3); color: #fff; } .contenu-page .section > .titre-prox { max-width: var(--large); } .contenu-page .section--sombre .lien-suite a { color: #fff; } /* Comparatif en cartes sur mobile */ @media (max-width: 760px) { .comparatif { overflow: visible !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; } .comparatif table, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; } .comparatif table { min-width: 0 !important; } .comparatif thead { display: none; } .comparatif tbody tr { margin-bottom: 12px; padding: 20px 20px 10px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); } .comparatif tbody tr:hover { background: #fff; } .comparatif tbody th { padding: 0 0 12px !important; border: 0 !important; } .comparatif td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 10px 0 !important; border-bottom: 1px solid var(--ligne); } .comparatif tbody tr td:last-child { border-bottom: 0; } .comparatif td::before { content: attr(data-label); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); padding-top: 3px; } } /* Liens-boutons (« Toutes nos réalisations », « Découvrir… ») : un seul trait rouge, pas de soulignement en plus */ .contenu-page .lien-suite a, .lien-suite a, .lien-fleche, .contenu-page .ca-lien, .contenu-page .cp-lien { text-decoration: none !important; } /* Portes : photo de la porte dans l'en-tête et dans les fiches gammes */ .hero-materiau--photo .hm-photo { opacity: 1; } .hero-materiau--photo .hm-visuel::before { background: linear-gradient(180deg, rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, .45)); } .hero-materiau--photo .hm-diag { width: 46%; height: 34%; mix-blend-mode: multiply; } .gamme--photo .gamme-visuel { padding: 0; min-height: 520px; overflow: hidden; } .gamme--photo .gamme-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; transition: transform 1.4s var(--ease); } .gamme--photo:hover .gamme-visuel img { transform: scale(1.04); } .gamme--photo .gamme-visuel .perf { z-index: 2; box-shadow: var(--ombre-douce); } @media (max-width: 1100px) { .gamme--photo .gamme-visuel { min-height: 380px; } } /* Cartes matériaux en photo (portes et baies) */ .cartes-mat--photo .cm-visuel { aspect-ratio: 4 / 3.4; } .cartes-mat--photo .cm-visuel img { width: 100%; height: 100%; object-fit: cover; filter: none; } .cartes-mat--photo .carte-mat:hover .cm-visuel img { transform: scale(1.06); } .cartes-mat--photo .cm-visuel::before { display: none; } .am-img--photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Vignettes illustrées (formes et structures d'escalier…) */ .contenu-page .section > .vignettes, .contenu-page .section > .echantillons-grille { max-width: var(--large); } .vignettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin-inline: auto; } .vignette { padding: 18px 18px 22px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .vignette:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ligne), var(--ombre); } .section--pierre .vignette { box-shadow: none; } .vg-img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: #eef0f2; overflow: hidden; margin-bottom: 16px; } .vg-img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); } .vignette:hover .vg-img img { transform: scale(1.06); } .contenu-page .vignette h3 { margin: 0 0 6px; font-size: 1.1rem; } .contenu-page .vignette p { margin: 0; font-size: .92rem; color: var(--texte-doux); line-height: 1.5; } .vignette { position: relative; } .contenu-page .vg-lien { color: inherit; text-decoration: none; } .vg-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .vg-lien:focus-visible { outline: none; } .vignette:has(.vg-lien:focus-visible) { outline: 3px solid var(--rouge); outline-offset: 3px; } .vignettes--photo .vignette { padding: 0 0 22px; overflow: hidden; } .vignettes--photo .vg-img { aspect-ratio: 4 / 3; border-radius: 0; margin-bottom: 18px; background: var(--anthracite, #222); } .vignettes--photo .vg-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; } .vignettes--photo h3, .vignettes--photo p { padding-inline: 20px; } /* Échantillons de matière */ .echantillons { margin-inline: auto; } .contenu-page .echantillons h3 { margin: 0 0 16px; font-size: 1.15rem; } .echantillons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; } .contenu-page .echantillons li { display: grid; justify-items: center; gap: 8px; width: 92px; padding: 0 !important; text-align: center; font-size: .86rem; font-weight: 500; color: var(--encre); } .contenu-page .echantillons li::before { display: none !important; } .ech-rond { width: 76px; height: 76px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--ligne), var(--ombre-douce); transition: transform .4s var(--ease); } .echantillons li:hover .ech-rond { transform: scale(1.08) rotate(-4deg); } .echantillons + .echantillons { margin-top: 32px; } .contenu-page .echantillons ul { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 0; } /* ========================================================================== Pages agences : fiche, note Google, carte au clic ========================================================================== */ .contenu-page .section > .agence-grille, .contenu-page .section > .gcarte { max-width: var(--large); } .agence-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-inline: auto; } .contenu-page .agence-texte > :first-child { margin-top: 0; } .fiche-agence { position: sticky; top: calc(var(--entete-h) + 24px); display: grid; gap: 18px; padding: 30px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--ligne), var(--ombre); } .fa-tete { display: grid; gap: 4px; } .contenu-page .fa-tete p { margin: 0; } .fa-nom { font: 700 1.5rem/1.1 var(--f-titre); color: var(--encre); letter-spacing: -.015em; } .fa-statut { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px !important; padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; } .fa-statut:empty { display: none; } .fa-statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .fa-statut.est-ouvert { background: #E8F5EA; color: #1E7A35; } .fa-statut.est-ferme { background: var(--rouge-pale); color: var(--rouge-fonce); } .fa-tel { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-m); background: var(--rouge); color: #fff !important; text-decoration: none !important; font: 700 1.5rem/1 var(--f-titre); letter-spacing: -.01em; transition: background-color .25s, transform .35s var(--ease); } .fa-tel:hover { background: var(--rouge-fonce); transform: translateY(-2px); } .fa-tel .ico { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .fa-horaires { padding: 16px 18px; border-radius: var(--r-m); background: var(--pierre); } .contenu-page .fa-sous { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); } .fa-sous .ico { width: 16px; height: 16px; color: var(--rouge); } .fa-horaires dl { margin: 0; display: grid; gap: 6px; } .fa-horaires dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; font-size: .93rem; } .fa-horaires dt { font-weight: 600; color: var(--encre); } .fa-horaires dd { margin: 0; color: var(--texte-doux); text-align: right; } .fa-actions { display: flex; flex-wrap: wrap; gap: 10px; } .fa-actions .btn { flex: 1 1 auto; text-decoration: none !important; } .fa-actions .btn--rouge { color: #fff !important; } .note-google { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--ligne); text-decoration: none !important; color: var(--encre) !important; justify-self: start; transition: box-shadow .3s; } .note-google:hover { box-shadow: 0 0 0 1px var(--encre); } .ng-g { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); color: #fff; font: 700 .95rem/1 Arial, sans-serif; } .ng-note { font: 700 1.2rem/1 var(--f-titre); } .ng-etoiles { --note: 5; position: relative; width: 82px; height: 15px; background: linear-gradient(90deg, #F5A623 calc(var(--note) / 5 * 100%), #E2DDD4 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") 0 0 / 16.4px 15px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") 0 0 / 16.4px 15px repeat-x; } .ng-avis { font-size: .88rem; color: var(--texte-doux); } .gcarte { position: relative; margin-inline: auto; height: clamp(360px, 42vw, 520px); border-radius: var(--r-l); overflow: hidden; background: var(--pierre) radial-gradient(circle at 1px 1px, rgba(48, 48, 48, .14) 1px, transparent 1.5px) 0 0 / 22px 22px; box-shadow: 0 0 0 1px var(--ligne), var(--ombre); } .gcarte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .gcarte-voile { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; } .gcarte.est-chargee .gcarte-voile { display: none; } .gcarte-pin { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--rouge); color: #fff; box-shadow: 0 18px 30px -12px rgba(200, 0, 0, .6); animation: pin-saute 2.4s var(--ease) infinite; } .gcarte-pin .ico { width: 32px; height: 32px; transform: rotate(45deg); } @keyframes pin-saute { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } .contenu-page .gcarte-adresse { margin: 0; display: grid; gap: 4px; color: var(--texte-doux); } .gcarte-adresse strong { font: 700 1.3rem/1.2 var(--f-titre); color: var(--encre); } .gcarte-btn { text-decoration: none !important; } .contenu-page .gcarte-note { margin: 0; max-width: 46ch; font-size: .8rem; color: var(--texte-doux); } .contenu-page .gcarte-liens { margin: 0; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .contenu-page .gcarte-liens a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; } .gcarte-liens .ico { width: 14px; height: 14px; color: var(--rouge); } /* Communes desservies */ .communes { margin-inline: auto; } .contenu-page .section > .communes { max-width: var(--large); } .communes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .contenu-page .communes li { padding: 9px 16px 9px 12px !important; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--ligne); font-weight: 500; font-size: .95rem; color: var(--encre); } .contenu-page .communes li::before { display: none !important; } .communes .ico { width: 16px; height: 16px; color: var(--rouge); } .contenu-page .communes ul { display: flex; margin: 0; } @media (max-width: 900px) { .agence-grille { grid-template-columns: 1fr; } .fiche-agence { position: static; } } @media (prefers-reduced-motion: reduce) { .gcarte-pin { animation: none; } } /* ---------- Page L'entreprise : sommaire, frise verticale, mosaïque, partenaires ---------- */ .contenu-page [id] { scroll-margin-top: calc(var(--entete-h) + 24px); } .contenu-page .section > .sommaire, .contenu-page .section > .mosaique, .contenu-page .section > .partenaires { max-width: var(--large); } .sommaire { margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 18px 22px; border-radius: var(--r-m); background: var(--pierre); } .contenu-page .sommaire-titre { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); } .sommaire ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .contenu-page .sommaire li { margin: 0; } .contenu-page .sommaire li a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 10px; border-radius: 999px; background: #fff; color: var(--encre); font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: 0 0 0 1px var(--ligne); transition: box-shadow .3s var(--ease), color .3s var(--ease); } .contenu-page .sommaire li a:hover { color: var(--rouge); box-shadow: 0 0 0 1px var(--rouge); } .sm-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rouge-pale); color: var(--rouge); font-size: .75rem; font-weight: 700; } .frise-v { --col: 7.5rem; --ecart: 44px; position: relative; margin: 0; padding: 0; list-style: none; } .frise-v::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: calc(var(--col) + var(--ecart) / 2 - 1px); width: 2px; background: linear-gradient(var(--rouge), var(--ligne) 30%); } .frise-v li { position: relative; display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--ecart); padding-bottom: 34px; margin: 0; } .frise-v li:last-child { padding-bottom: 0; } .frise-v li::after { content: ""; position: absolute; top: .55em; left: calc(var(--col) + var(--ecart) / 2 - 7px); width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--rouge), 0 0 0 5px var(--pierre); } .section:not(.section--pierre) .frise-v li::after { box-shadow: inset 0 0 0 3px var(--rouge), 0 0 0 5px #fff; } .contenu-page .fv-annee { margin: 0; text-align: right; font: 700 clamp(1.5rem, 1.15rem + 1vw, 2.15rem)/1.05 var(--f-titre); letter-spacing: -.03em; color: var(--encre); } .contenu-page .fv-texte h3 { margin: 0 0 6px; font-size: 1.12rem; } .contenu-page .fv-texte p { margin: 0; color: var(--texte-doux); } @media (max-width: 640px) { .frise-v { --col: 0px; --ecart: 0px; padding-left: 30px; } .frise-v::before { left: 6px; } .frise-v li { grid-template-columns: 1fr; row-gap: 6px; } .frise-v li::after { left: -31px; top: .25em; } .contenu-page .fv-annee { text-align: left; } } .mosaique { margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: 12px; } .contenu-page .mq-item { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-m); background: var(--gris); } .mq-item:first-child { grid-column: span 2; grid-row: span 2; } .mq-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .mq-item:hover img { transform: scale(1.05); } .contenu-page .mq-item figcaption { position: absolute; inset: auto 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; font-size: .88rem; font-weight: 500; line-height: 1.35; } @media (max-width: 760px) { .mosaique { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .mq-item:first-child { grid-row: span 2; } } .partenaires { margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; } .contenu-page .partenaires li { margin: 0; display: grid; gap: 6px; align-content: start; padding: 22px 22px 24px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); } .section--pierre .partenaires li { box-shadow: none; } .partenaires strong { font: 700 1.25rem/1.1 var(--f-titre); letter-spacing: -.02em; color: var(--encre); } .partenaires span { font-size: .9rem; color: var(--texte-doux); line-height: 1.45; } /* Panneau simple (L'entreprise) : liens à gauche, carte illustrée à droite */ .panneau:not(.panneau--mega) .panneau-dedans:has(.panneau-simple) { flex-direction: row; align-items: stretch; gap: 32px; max-width: 720px; margin-left: max(var(--gouttiere), calc(50% - 600px)); margin-right: auto; } .panneau-simple { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; } .panneau-simple .panneau-liens a { font: 600 1.15rem/1.2 var(--f-titre); color: var(--encre); padding: 10px 0; } .panneau-simple .panneau-liens a:hover { color: var(--rouge); } /* Cartes en deux colonnes dans une composition à titre collant */ .split-corps .cartes-info--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .split-corps .cartes-info--grille { grid-template-columns: 1fr; } } /* Respirations entre blocs consécutifs */ .contenu-page .sommaire + * { margin-top: clamp(48px, 6vw, 80px); } .contenu-page .media-split + .cartes-info { margin-top: clamp(48px, 6vw, 80px); } @media (max-width: 900px) { .chiffres { row-gap: 32px; } } /* ========================================================================== Page Contact ========================================================================== */ .hero-contact { position: relative; isolation: isolate; overflow: hidden; background: var(--nuit); color: rgba(255, 255, 255, .8); } .hero-contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 85% 10%, rgba(200, 0, 0, .28), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(255, 255, 255, .05), transparent 70%); } .hero-contact .hp-diag { width: 22vw; height: 38%; opacity: .55; } .hc-dedans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: end; padding-top: calc(var(--entete-h) + clamp(40px, 6vw, 88px)); padding-bottom: clamp(56px, 7vw, 104px); } .hero-contact .ariane { color: rgba(255, 255, 255, .7); } .hero-contact .ariane a { color: #fff; } .hero-contact .surtitre { color: #fff; } .hc-titre { margin: 0 0 20px; color: #fff; font-size: var(--t-display); line-height: .98; letter-spacing: -.035em; max-width: 11ch; } .hero-contact .chapeau { color: rgba(255, 255, 255, .78); max-width: 44ch; } .hc-atouts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; } .hc-atouts li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; color: #fff; } .hc-atouts .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--rouge); color: #fff; stroke-width: 3; } .hc-canaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .hc-canaux li { display: flex; } .canal { position: relative; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 22px 24px; border-radius: var(--r-m); background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; text-decoration: none; transition: background-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .canal:hover { color: #fff; background: rgba(255, 255, 255, .1); transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .canal-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--rouge); } .canal-ico .ico { width: 22px; height: 22px; color: #fff; } .canal-txt { display: grid; gap: 4px; min-width: 0; } .canal-titre { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .canal strong { font: 700 1.2rem/1.2 var(--f-titre); letter-spacing: -.01em; overflow-wrap: anywhere; } .canal-note { font-size: .86rem; color: rgba(255, 255, 255, .62); overflow-wrap: anywhere; } .canal-fleche { position: absolute; top: 22px; right: 20px; width: 18px; height: 18px; color: rgba(255, 255, 255, .5); transition: transform .35s var(--ease), color .35s; } .canal:hover .canal-fleche { transform: translateX(3px); color: #fff; } .hero-contact .fa-statut, .ca-bloc--sombre .fa-statut { margin-top: 2px !important; padding: 3px 10px; font-size: .78rem; } .hero-contact .fa-statut.est-ouvert, .ca-bloc--sombre .fa-statut.est-ouvert { background: rgba(76, 175, 99, .18); color: #8BE09D; } .hero-contact .fa-statut.est-ferme, .ca-bloc--sombre .fa-statut.est-ferme { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72); } /* Grille formulaire + colonne */ .contact-grille { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } .contact-carte { scroll-margin-top: calc(var(--entete-h) + 20px); } .contenu-page .contact-carte .ff-etape-tete { margin: 0; display: flex; align-items: baseline; gap: 14px; font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--f-titre); letter-spacing: -.025em; color: var(--encre); } .ff-etape-tete:focus { outline: none; } .ff-etape-num { font-size: .55em; font-weight: 700; color: var(--rouge); letter-spacing: 0; } .ff-etape { display: grid; gap: 30px; } .ff-etape[hidden] { display: none; } .formulaire:not(.est-pas-a-pas) .ff-etape + .ff-etape { padding-top: 32px; border-top: 1px solid var(--ligne); } .ff-groupe legend { font-size: 1.05rem; margin-bottom: 12px; } /* Progression */ .ff-progres { display: none; } .est-pas-a-pas .ff-progres { display: grid; gap: 14px; margin-bottom: 4px; } .ff-progres ol { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } .ff-progres li { flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--texte-doux); font-size: .9rem; font-weight: 600; } .ffp-num { position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pierre); color: var(--texte-doux); font-size: .85rem; transition: background-color .3s, color .3s; } .ffp-coche { position: absolute; width: 16px; height: 16px; opacity: 0; stroke-width: 3; } .ff-progres li.est-actif { color: var(--encre); } .ff-progres li.est-actif .ffp-num { background: var(--encre); color: #fff; } .ff-progres li.est-fait .ffp-num { background: var(--rouge); color: #fff; } .ff-progres li.est-fait .ffp-num span { opacity: 0; } .ff-progres li.est-fait .ffp-coche { opacity: 1; } .ff-barre { height: 4px; border-radius: 4px; background: var(--pierre); overflow: hidden; } .ff-barre span { display: block; height: 100%; background: var(--rouge); transform: scaleX(.33); transform-origin: left; transition: transform .6s var(--ease); } /* Tuiles produits */ .tuiles-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 10px; } .tuile-choix { position: relative; display: grid; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ligne); cursor: pointer; transition: box-shadow .25s, transform .3s var(--ease); } .tuile-choix:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--encre); } .tuile-choix input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; } .tc-img { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pierre); margin: 4px 4px 0; border-radius: 11px; } .tc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .tuile-choix:hover .tc-img img { transform: scale(1.06); } .tc-img > .ico { width: 30px; height: 30px; color: var(--texte-doux); } .tc-nom { padding: 10px 12px 12px; font-weight: 600; font-size: .9rem; line-height: 1.25; color: var(--encre); } .tc-coche { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .12); transition: background-color .2s, transform .3s var(--ease); } .tc-coche .ico { width: 15px; height: 15px; color: #fff; stroke-width: 3.2; opacity: 0; } .tuile-choix:has(input:checked) { box-shadow: inset 0 0 0 2px var(--rouge); } .tuile-choix:has(input:checked) .tc-coche { background: var(--rouge); box-shadow: none; transform: scale(1.08); } .tuile-choix:has(input:checked) .tc-coche .ico { opacity: 1; } .tuile-choix:has(input:focus-visible) { outline: 3px solid var(--rouge); outline-offset: 2px; } /* Choix segmenté et cartes d'agence */ .segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--pierre); } .segment label { position: relative; cursor: pointer; } .segment input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .segment span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--texte-doux); transition: background-color .25s, color .25s, box-shadow .25s; } .segment input:checked + span { background: #fff; color: var(--encre); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); } .segment input:focus-visible + span { outline: 3px solid var(--rouge); outline-offset: 1px; } .cartes-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; } .carte-choix { position: relative; display: grid; gap: 3px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ligne); cursor: pointer; transition: box-shadow .25s, background-color .25s; } .carte-choix:hover { box-shadow: inset 0 0 0 1.5px var(--encre); } .carte-choix input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .cc-nom { font: 700 1.02rem/1.2 var(--f-titre); color: var(--encre); } .cc-dep { font-size: .84rem; color: var(--texte-doux); } .carte-choix:has(input:checked) { background: var(--rouge-pale); box-shadow: inset 0 0 0 2px var(--rouge); } .carte-choix:has(input:focus-visible) { outline: 3px solid var(--rouge); outline-offset: 2px; } /* Navigation entre étapes, récapitulatif */ .ff-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; padding-top: 6px; } .ff-nav [data-aller="suivant"], .ff-nav [type="submit"] { margin-left: auto; } .formulaire:not(.est-pas-a-pas) .ff-nav [data-aller] { display: none; } .formulaire:not(.est-pas-a-pas) .ff-nav [type="submit"] { margin-left: 0; } .ff-envoi .ff-mention { flex-basis: 100%; text-align: right; } .ff-recap { display: grid; gap: 10px; padding: 16px 20px; border-radius: 14px; background: var(--pierre); } .ff-recap[hidden] { display: none; } .ffr-titre { margin: 0 !important; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); } .ff-recap ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .contenu-page .ff-recap li { margin: 0; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: .88rem; font-weight: 600; color: var(--encre); } .ffr-modifier { justify-self: start; padding: 0; border: 0; background: none; font: 600 .88rem var(--f-texte); color: var(--rouge); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .ff-aide-champ { font-size: .85rem; color: var(--texte-doux); } /* Colonne : agences et suite */ .contact-aside { display: grid; gap: 14px; position: sticky; top: calc(var(--entete-h) + 24px); } .ca-bloc { padding: 28px; border-radius: var(--r-l); background: var(--pierre); } .ca-bloc--sombre { background: var(--nuit); color: rgba(255, 255, 255, .72); } .contenu-page .ca-titre { margin: 0 0 6px; font: 700 1.3rem/1.15 var(--f-titre); letter-spacing: -.015em; color: var(--encre); } .ca-bloc--sombre .ca-titre { color: #fff; } .contenu-page .ca-intro { margin: 0 0 16px; font-size: .92rem; color: rgba(255, 255, 255, .65); } .ca-agences { margin: 0; padding: 0; list-style: none; } .contenu-page .ca-agences li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin: 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); } .contenu-page .ca-agences a { display: grid; gap: 2px; color: #fff; text-decoration: none; } .caa-ville { font-weight: 700; } .caa-tel { display: inline-flex; align-items: center; gap: 7px; font-size: .95rem; color: rgba(255, 255, 255, .78); } .caa-tel .ico { width: 15px; height: 15px; color: var(--rouge); } .contenu-page .ca-agences a:hover .caa-tel { color: #fff; } .ca-suite { display: grid; gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; } .contenu-page .ca-suite li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 0; font-size: .9rem; color: var(--texte-doux); line-height: 1.45; } .ca-suite strong { display: block; margin-bottom: 2px; color: var(--encre); font-size: .97rem; } .cas-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--rouge); font-weight: 700; font-size: .85rem; box-shadow: 0 0 0 1px var(--ligne); } /* Bandeau des agences */ .contenu-page .section > .agences-bande { max-width: var(--large); } .agences-bande { margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .contenu-page .ab-carte { margin: 0; display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: var(--r-m); background: #fff; } .contenu-page .ab-role { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); } .contenu-page .ab-nom { margin: 0; font: 700 1.4rem/1.1 var(--f-titre); letter-spacing: -.02em; } .contenu-page .ab-nom a { color: var(--encre); text-decoration: none; } .contenu-page .ab-nom a:hover { color: var(--rouge); } .contenu-page .ab-adresse { margin: 4px 0 0; font-size: .92rem; color: var(--texte-doux); } .ab-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; } .contenu-page .ab-actions a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--encre); } .contenu-page .ab-actions .ab-tel { color: var(--rouge); } .ab-actions .ico { width: 16px; height: 16px; } @media (max-width: 1100px) { .hc-dedans { grid-template-columns: 1fr; align-items: start; } .agences-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } .contact-aside { position: static; } } @media (max-width: 640px) { .hc-canaux { grid-template-columns: 1fr; } .ff-progres .ffp-nom { display: none; } .ff-progres li.est-actif .ffp-nom { display: inline; } .agences-bande { grid-template-columns: 1fr; } .ff-envoi .ff-mention { text-align: left; } } /* Le rythme des contenus ne s'applique pas aux composants du formulaire ni aux cartes d'agence */ .contenu-page .formulaire p, .contenu-page .contact-aside p { margin: 0; } .contenu-page .ca-agences li a, .contenu-page .ab-carte .ab-actions a, .contenu-page .ab-carte .ab-nom a { text-decoration: none; } .contenu-page .ca-agences li a { color: #fff; } .contenu-page .ab-carte .ab-nom a { color: var(--encre); } .contenu-page .ab-carte .ab-nom a:hover { color: var(--rouge); } .contenu-page .ab-carte .ab-actions a { color: var(--encre); } .contenu-page .ab-carte .ab-actions .ab-tel { color: var(--rouge); } /* Retouches Contact */ .sans-coupure { white-space: nowrap; } .canal strong, .canal-note { overflow-wrap: normal; } .contenu-page .doc-liste li a { text-decoration: none; } .tuiles-choix { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tc-img { aspect-ratio: 16 / 10; } @media (max-width: 640px) { .tuiles-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); } .segment { display: flex; } .segment label { flex: 1; } .segment span { justify-content: center; width: 100%; padding: 0 10px; font-size: .9rem; white-space: nowrap; } .ff-progres li { flex: none; } .ff-progres li.est-actif { flex: 1; white-space: nowrap; } } /* ========================================================================== Réalisations ========================================================================== */ /* Archive : en-tête sombre avec collage de photos */ .hero-reals { position: relative; isolation: isolate; overflow: hidden; background: var(--nuit); color: rgba(255, 255, 255, .8); } .hero-reals::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 75% at 90% 20%, rgba(200, 0, 0, .25), transparent 60%); } .hero-reals .hp-diag { width: 20vw; height: 34%; opacity: .5; } .hr-dedans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; padding-top: calc(var(--entete-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(56px, 7vw, 104px); } .hero-reals .ariane { color: rgba(255, 255, 255, .7); } .hero-reals .ariane a { color: #fff; } .hero-reals .surtitre { color: #fff; } .hr-titre { margin: 0 0 20px; color: #fff; font-size: var(--t-display); line-height: .98; letter-spacing: -.035em; } .hero-reals .chapeau { color: rgba(255, 255, 255, .78); max-width: 46ch; } .hr-chiffres { display: flex; flex-wrap: wrap; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; } .hr-chiffres li { display: grid; gap: 4px; padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, .16); } .hr-chiffres li:first-child { padding-left: 0; border-left: 0; } .hr-chiffres strong { font: 700 clamp(2rem, 1.5rem + 1.6vw, 3rem)/1 var(--f-titre); letter-spacing: -.04em; color: #fff; } .hr-chiffres span { font-size: .9rem; color: rgba(255, 255, 255, .62); } .hr-collage { position: relative; aspect-ratio: 1 / .86; } .hr-photo { position: absolute; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); } .hr-photo img { width: 100%; height: 100%; object-fit: cover; } .hr-photo--1 { left: 0; top: 4%; width: 58%; height: 70%; } .hr-photo--2 { right: 0; top: 0; width: 38%; height: 46%; } .hr-photo--3 { right: 6%; bottom: 0; width: 46%; height: 48%; outline: 6px solid var(--nuit); } /* Archive : filtres, grille, carte à la une */ .contenu-page .section > .filtres-bloc, .contenu-page .section > .grille-real, .contenu-page .section > .filtres-vide { max-width: var(--large); } .contenu-page .section > .reponse + .filtres-bloc { margin-top: clamp(48px, 6vw, 80px); } .filtres-bloc { margin-inline: auto; display: grid; gap: 12px; margin-bottom: 36px; } .filtres-bloc .filtres { margin: 0; align-items: center; } .filtres-nom { min-width: 84px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); } .contenu-page .filtres-compte { margin: 6px 0 0; font-weight: 600; color: var(--encre); } .grille-real--archive { gap: 36px 18px; margin-inline: auto; } .carte-real--une { grid-column: span 2; } .carte-real--une .cr-img { aspect-ratio: 16 / 10.4; } .carte-real--une .cr-titre { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); } .carte-real--une.est-reduite { grid-column: auto; } .carte-real--une.est-reduite .cr-img { aspect-ratio: 4 / 5; } .carte-real--une.est-reduite .cr-extrait { display: none; } .cr-img { position: relative; } .cr-annee { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--encre); font-size: .8rem; font-weight: 700; } .cr-extrait { font-size: .98rem; color: var(--texte-doux); max-width: 60ch; } .filtres-vide { margin-inline: auto; padding: 28px; border-radius: var(--r-m); background: var(--pierre); text-align: center; } .filtres-vide[hidden] { display: none; } .filtres-raz { margin-left: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--rouge); text-decoration: underline; cursor: pointer; } /* Chantier : puces de l'en-tête */ .hc-puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; } .hc-puces li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: .9rem; font-weight: 600; } .hc-puces .ico { width: 16px; height: 16px; color: #fff; } .hero-chantier .hp-titre { max-width: 18ch; } /* Chantier : texte et fiche */ .contenu-page .section > .real-grille { max-width: var(--large); } .real-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-inline: auto; } .contenu-page .real-texte > :first-child { margin-top: 0; } .fiche-chantier { position: sticky; top: calc(var(--entete-h) + 24px); display: grid; gap: 20px; padding: 30px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--ligne), var(--ombre); } .contenu-page .fc-titre { margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); } .fiche-chantier dl { display: grid; gap: 0; margin: 0; } .fiche-chantier dl > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--ligne); } .fiche-chantier dl > div:first-child { border-top: 0; padding-top: 0; } .fiche-chantier dt { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--texte-doux); } .fiche-chantier dt .ico { width: 16px; height: 16px; color: var(--rouge); flex: none; } .fiche-chantier dd { margin: 0; font-weight: 600; color: var(--encre); font-size: .95rem; } .fc-agence { display: grid; gap: 4px; padding: 18px; border-radius: 14px; background: var(--pierre); } .contenu-page .fc-sous { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); } .contenu-page .fc-agence-nom { margin: 0; font: 700 1.15rem/1.2 var(--f-titre); } .contenu-page .fc-agence-nom a { color: var(--encre); text-decoration: none; } .contenu-page .fc-agence-nom a:hover { color: var(--rouge); } .contenu-page .fc-tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; color: var(--rouge); text-decoration: none; } .fc-tel .ico { width: 16px; height: 16px; } .fc-cta { display: grid; gap: 10px; } .contenu-page .fc-cta p { margin: 0; font-weight: 600; color: var(--encre); } .fc-cta .btn { justify-content: center; } /* Chantier : galerie en colonnes */ .contenu-page .section > .galerie-chantier { max-width: var(--large); } .galerie-chantier { columns: 3 260px; column-gap: 14px; margin-inline: auto; } .contenu-page .gc-item { break-inside: avoid; margin: 0 0 14px; } .gc-item a { position: relative; display: block; overflow: hidden; border-radius: var(--r-m); background: var(--gris); } .gc-item img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); } .gc-item a:hover img { transform: scale(1.04); } .gc-loupe { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s var(--ease); } .gc-loupe .ico { width: 18px; height: 18px; color: var(--encre); } .gc-item a:hover .gc-loupe, .gc-item a:focus-visible .gc-loupe { opacity: 1; transform: none; } .contenu-page .gc-item figcaption { margin-top: 8px; font-size: .86rem; line-height: 1.4; color: rgba(255, 255, 255, .62); } .section:not(.section--sombre) .gc-item figcaption { color: var(--texte-doux); } /* Visionneuse */ .visionneuse { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 8, 8, .94); color: #fff; } .visionneuse[open] { display: grid; place-items: center; } .visionneuse::backdrop { background: rgba(10, 8, 8, .6); } .vs-figure { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: min(92vw, 1400px); } .vs-figure img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; border-radius: 12px; object-fit: contain; } .vs-figure figcaption { font-size: .95rem; color: rgba(255, 255, 255, .78); text-align: center; max-width: 70ch; } .vs-compte { position: absolute; top: 22px; left: 24px; margin: 0; font-weight: 600; color: rgba(255, 255, 255, .7); } .vs-btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: background-color .25s; } .vs-btn:hover, .vs-btn:focus-visible { background: rgba(255, 255, 255, .22); } .vs-fermer { top: 16px; right: 16px; font-size: 1.8rem; } .vs-prec { left: 16px; top: 50%; transform: translateY(-50%); } .vs-suiv { right: 16px; top: 50%; transform: translateY(-50%); } @media (max-width: 1100px) { .hr-dedans { grid-template-columns: 1fr; } .hr-collage { max-width: 560px; } } @media (max-width: 900px) { .real-grille { grid-template-columns: 1fr; } .fiche-chantier { position: static; } .carte-real--une { grid-column: 1 / -1; } } @media (max-width: 640px) { .galerie-chantier { columns: 2 140px; column-gap: 10px; } .contenu-page .gc-item { margin-bottom: 10px; } .contenu-page .gc-item figcaption { display: none; } .hr-chiffres li { padding: 0 16px; } .vs-prec, .vs-suiv { top: auto; bottom: 18px; transform: none; } .vs-prec { left: calc(50% - 64px); } .vs-suiv { right: calc(50% - 64px); } .filtres-nom { min-width: 0; width: 100%; } } /* Archive : chantier à la une en pleine largeur, image à gauche */ .carte-real--une { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .carte-real--une .cr-img { aspect-ratio: 16 / 10; } .carte-real--une .cr-corps { padding: 0; gap: 12px; } .carte-real--une .cr-titre { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; } .carte-real--une .cr-cat::after { content: " · À la une"; color: var(--texte-doux); } .carte-real--une.est-reduite { grid-column: auto; display: flex; } .carte-real--une.est-reduite .cr-corps { padding: 16px 4px 0; gap: 4px; } .carte-real--une.est-reduite .cr-titre { font-size: 1.25rem; } .carte-real--une.est-reduite .cr-cat::after { content: none; } .cartes-info--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .carte-real--une { grid-template-columns: 1fr; gap: 16px; } .cartes-info--trois { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hr-chiffres { flex-wrap: nowrap; } .hr-chiffres li { padding: 0 14px; } .hr-chiffres strong { font-size: 1.9rem; } .hr-chiffres span { font-size: .8rem; } } /* ========================================================================== Options en onglets, étapes de pose, lot de photos d'octobre ========================================================================== */ .contenu-page .section > .options-onglets, .contenu-page .section > .etapes-pose { max-width: var(--large); } .options-onglets { margin-inline: auto; } .oo-liste { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin-bottom: 28px; border-radius: 999px; background: var(--pierre); width: max-content; max-width: 100%; } .oo-liste::-webkit-scrollbar { display: none; } .oo-onglet { flex: none; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: none; font: 600 .98rem var(--f-texte); color: var(--texte-doux); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; } .oo-onglet[aria-selected="true"] { background: #fff; color: var(--encre); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .4); } .oo-onglet:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; } .section--pierre .oo-liste { background: #fff; } .section--pierre .oo-onglet[aria-selected="true"] { background: var(--encre); color: #fff; } .oo-panneau[hidden] { display: none; } .oo-panneau.entre { animation: oo-entre .45s var(--ease); } @keyframes oo-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .contenu-page .oo-panneau > p { max-width: 70ch; color: var(--texte-doux); } .options-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; } .option-carte { display: grid; align-content: start; gap: 8px; padding: 14px 14px 20px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); } .section--pierre .option-carte { box-shadow: none; } .oc-img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f3f5f7; margin-bottom: 8px; } .oc-img img { width: 100%; height: 100%; object-fit: contain; } .options-cartes--photo .oc-img img { object-fit: cover; } .options-cartes--petit .oc-img { aspect-ratio: 4 / 3; padding: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); } .contenu-page .option-carte h3 { margin: 0 6px; font-size: 1.08rem; } .contenu-page .option-carte p { margin: 0 6px; font-size: .92rem; line-height: 1.5; color: var(--texte-doux); } @media (prefers-reduced-motion: reduce) { .oo-panneau.entre { animation: none; } } .etapes-pose { margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: ep; } .contenu-page .ep-etape { margin: 0; display: grid; align-content: start; gap: 6px; } .ep-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-m); background: var(--gris); margin-bottom: 8px; } .ep-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .ep-etape:hover .ep-img img { transform: scale(1.05); } .ep-num { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; background: var(--rouge); color: #fff; font: 700 .95rem var(--f-titre); } .contenu-page .ep-etape h3 { margin: 0; font-size: 1.1rem; } .contenu-page .ep-etape p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--texte-doux); } .section--sombre .ep-etape p { color: rgba(255, 255, 255, .66); } @media (max-width: 1000px) { .etapes-pose { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .etapes-pose { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere); } .contenu-page .ep-etape { scroll-snap-align: start; } } /* Sceau « fabriquée en Creuse » */ .sceau-creuse { display: block; width: clamp(120px, 14vw, 180px); height: auto; margin-top: 28px; transform: rotate(-6deg); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .18)); } /* Image d'un tableau (essences de bois) */ .contenu-page .figure-tableau { margin: 0; padding: 18px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); } .figure-tableau img { width: 100%; height: auto; display: block; } .contenu-page .figure-tableau figcaption { margin-top: 10px; font-size: .88rem; color: var(--texte-doux); } /* Fiches de prise de cotes avec le schéma de pose */ .doc-liste--visuel a { padding: 12px 20px 12px 12px; } .doc-schema { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 12px; background: var(--pierre); overflow: hidden; } .doc-schema img { width: 100%; height: 100%; object-fit: contain; } .contenu-page .section > .titre-remplissages { max-width: var(--large); margin: clamp(48px, 6vw, 80px) auto 20px; font-size: var(--t-h3); } .contenu-page .media-split + .mosaique { margin-top: clamp(40px, 5vw, 64px); } .mq-item img { object-position: center 30%; } .galerie-poses { columns: 4 220px; } .contenu-page .section > .galerie-poses { max-width: var(--large); } .split-corps .vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 640px) { .split-corps .vignettes { grid-template-columns: 1fr; } } .mq-item--haut img { object-position: center 6%; } .doc-liste .doc-schema { flex: none; display: grid; width: 84px; height: 84px; } .doc-liste .doc-schema img { width: 100%; height: 100%; object-fit: contain; } .contenu-page .figure-tableau + p { margin-top: 24px; } @media (max-width: 640px) { .options-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .option-carte { padding: 10px 10px 14px; } .contenu-page .option-carte h3 { font-size: .95rem; margin: 0 2px; } .contenu-page .option-carte p { font-size: .84rem; margin: 0 2px; } } /* Accueil : le titre tient sur trois lignes (« en Creuse » reste après « fabriquées ») */ .ha-titre { max-width: none; } .ha-titre .ligne > span { white-space: nowrap; } @media (max-width: 640px) { .ha-titre { font-size: clamp(1.9rem, 9.4vw, 3.4rem); } } .onglet-sep { flex: none; align-self: center; width: 1px; height: 22px; margin: 0 6px; background: var(--ligne); } /* ========================================================================== Catalogue : bandeau de fin de page et pastille flottante ========================================================================== */ .bande-catalogue { background: var(--pierre); padding-block: clamp(56px, 7vw, 96px); overflow: hidden; } .bc-dedans { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .bc-livre { position: relative; display: block; height: clamp(260px, 30vw, 380px); perspective: 1400px; } .bc-livre img { position: absolute; top: 0; height: 100%; width: auto; border-radius: 6px; box-shadow: 0 30px 60px -28px rgba(30, 10, 10, .5), 0 0 0 1px rgba(0, 0, 0, .06); background: #fff; transition: transform .8s var(--ease); } .bc-couv { left: 0; transform: rotate(-6deg); } .bc-page { left: 34%; transform: rotate(4deg) translateY(10px); } .bc-livre:hover .bc-couv { transform: rotate(-9deg) translateX(-10px); } .bc-livre:hover .bc-page { transform: rotate(6deg) translate(14px, 4px); } .bc-titre { margin: 0 0 14px; font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem)/1.1 var(--f-titre); letter-spacing: -.025em; color: var(--encre); max-width: 22ch; } .bc-chapeau { margin: 0 0 26px; color: var(--texte-doux); max-width: 52ch; } .bc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .bc-lien { font-weight: 600; color: var(--encre); text-decoration: underline; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; text-underline-offset: .22em; } @media (max-width: 760px) { .bc-dedans { grid-template-columns: 1fr; } .bc-livre { height: 240px; max-width: 320px; } } .pastille-catalogue { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--encre); color: #fff; text-decoration: none; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); transform: translateY(16px); opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .25s; } .pastille-catalogue.est-visible { opacity: 1; transform: none; } .pastille-catalogue:hover { background: var(--rouge); color: #fff; } .pastille-catalogue[hidden] { display: none; } .pc-couv { display: block; width: 36px; height: 50px; border-radius: 4px; overflow: hidden; background: #fff; transform: rotate(-6deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .3); } .pc-couv img { width: 100%; height: 100%; object-fit: cover; } .pc-texte { display: grid; line-height: 1.15; } .pc-texte strong { font: 700 1rem var(--f-titre); } .pc-texte span { font-size: .8rem; opacity: .75; } .pastille-catalogue-fermer { position: fixed; z-index: 81; right: 12px; bottom: 66px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--encre); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); cursor: pointer; opacity: 0; transition: opacity .3s; } .pastille-catalogue-fermer .ico { width: 14px; height: 14px; } .pastille-catalogue.est-visible + .pastille-catalogue-fermer { opacity: 1; } .pastille-catalogue-fermer[hidden] { display: none; } @media (max-width: 640px) { /* Au-dessus de la barre d'appel mobile, en version compacte */ .pastille-catalogue { bottom: calc(82px + env(safe-area-inset-bottom)); right: 12px; padding: 6px 14px 6px 6px; gap: 10px; } .pc-couv { width: 30px; height: 42px; } .pc-texte span { display: none; } .pastille-catalogue-fermer { bottom: calc(126px + env(safe-area-inset-bottom)); right: 6px; } } @media (prefers-reduced-motion: reduce) { .pastille-catalogue { transition: none; } } .options-cartes--motifs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); } .options-cartes--motifs .oc-img { aspect-ratio: 16 / 10; } .options-cartes--motifs .oc-img img { object-fit: cover; } .options-cartes--photo .oc-img { aspect-ratio: 4 / 3; } .options-cartes--porte { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); } .options-cartes--porte .oc-img { aspect-ratio: 1 / 2; background: linear-gradient(180deg, #f5f3ef, #e9e5de); padding: 14px; } .options-cartes--porte .oc-img img { object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .18)); } .contenu-page .section > .boptions-wrap, .contenu-page .section > .options-cartes { max-width: var(--large); margin-inline: auto; } /* Partenaires avec logos */ .partenaires--logos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .contenu-page .partenaires--logos li { padding: 0 0 18px; overflow: hidden; gap: 4px; } .pa-logo { display: grid; place-items: center; aspect-ratio: 2 / 1; margin-bottom: 10px; background: #fff; border-bottom: 1px solid var(--ligne); } .pa-logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .4s var(--ease), opacity .4s; } .partenaires--logos li:hover .pa-logo img { filter: none; opacity: 1; } .partenaires--logos strong, .partenaires--logos span:not(.pa-logo) { padding-inline: 18px; } .partenaires--logos strong { font-size: 1.05rem; } /* Fond de carte du réseau : départements */ .cr-dep { fill: rgba(255, 255, 255, .42); stroke: #d8cfc2; stroke-width: 1.2; stroke-linejoin: round; } .cr-dep--nous { fill: #fff; stroke: #cdbfae; } .carte-reseau .cr-dep-nom { font: 600 11.5px var(--f-texte); fill: #a0968a; letter-spacing: .16em; text-transform: uppercase; } .reseau-carte, .section:not(.section--pierre) .reseau-carte { background: var(--pierre); } /* Page Catalogue : sommaire */ .contenu-page .section > .cat-sommaire, .contenu-page .section > #catalogue { max-width: var(--large); margin-inline: auto; } .cat-sommaire { margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; } .contenu-page .cat-sommaire li { margin: 0; display: grid; gap: 0; border-radius: var(--r-m); background: #fff; overflow: hidden; } .cs-carte { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border: 0; background: none; text-align: left; font: inherit; color: var(--encre); cursor: pointer; transition: background-color .25s; } .cs-carte:hover { background: var(--rouge-pale); } .cs-carte:focus-visible { outline: 3px solid var(--rouge); outline-offset: -3px; } .cs-img { display: block; width: 64px; aspect-ratio: .707; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4), 0 0 0 1px var(--ligne); } .cs-img img { width: 100%; height: 100%; object-fit: cover; } .cs-texte { display: grid; gap: 2px; } .cs-texte strong { font: 700 1.02rem/1.2 var(--f-titre); } .cs-texte span { font-size: .85rem; color: var(--texte-doux); } .contenu-page .cs-lien { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--ligne); font-size: .88rem; font-weight: 600; color: var(--rouge); text-decoration: none; } .cs-lien .ico { width: 16px; height: 16px; } .contenu-page .doc-groupe h3 { margin: 0 0 14px; font-size: var(--t-h3); } .options-cartes--porte { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); } .contenu-page .section > .options-cartes + p { max-width: var(--large); margin: 22px auto 0; color: var(--texte-doux); } .split-corps .figure-tableau img { max-height: 420px; width: auto; max-width: 100%; margin-inline: auto; } .options-cartes--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } .options-cartes--trio .oc-img { aspect-ratio: 5 / 2; background: #fff; } .options-cartes--petit .oc-img img[src*="motif"] { object-fit: cover; } @media (max-width: 560px) { .options-cartes--trio { grid-template-columns: 1fr; } } .bc-titre { max-width: 18ch; text-wrap: balance; } .bc-titre::first-letter { text-transform: uppercase; } /* Schéma de la porte de garage battante */ .schema-battante { margin: 0 0 24px; padding: 18px 18px 14px; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px var(--ligne); } .schema-battante svg { display: block; width: 100%; height: auto; } .sb-mur { stroke: var(--encre); stroke-width: 12; stroke-linecap: square; } .sb-zone { fill: var(--rouge); opacity: .08; } .sb-arc { fill: none; stroke: var(--rouge); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .7; } .sb-vantail { stroke: var(--rouge); stroke-width: 7; stroke-linecap: round; } .sb-gond { fill: #fff; stroke: var(--encre); stroke-width: 3; } .schema-battante .sb-lieu { font: 600 13px var(--f-texte); fill: var(--texte-doux); letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; } .schema-battante .sb-nom { font: 700 18px var(--f-titre); fill: var(--encre); text-anchor: middle; } .contenu-page .schema-battante figcaption { margin-top: 8px; font-size: .86rem; color: var(--texte-doux); } .sb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .sb-duo { grid-template-columns: 1fr; } .schema-battante .sb-nom { font-size: 22px; } .schema-battante .sb-lieu { font-size: 16px; } } /* ========================================================================== Pictogrammes du catalogue ========================================================================== */ .picto { display: block; width: 100%; height: 100%; --picto-fond: #fff; } /* Méga-menu : titres de colonnes */ .panneau-titre.a-picto { display: flex; align-items: center; gap: 12px; } .pt-picto { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 7px; border-radius: 10px; background: var(--pierre); color: var(--rouge); --picto-fond: var(--pierre); transition: background-color .25s, color .25s; } .pt-picto .picto { --picto-fond: var(--pierre); } .panneau-titre.a-picto:hover .pt-picto, .panneau-titre.a-picto[aria-current] .pt-picto { background: var(--rouge); color: #fff; } .panneau-titre.a-picto:hover .pt-picto .picto { --picto-fond: var(--rouge); } /* Tuiles de l'accueil */ .tuile-picto { position: absolute; top: clamp(16px, 1.6vw, 22px); left: clamp(16px, 1.6vw, 22px); z-index: 2; width: 46px; height: 46px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .94); color: var(--rouge); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); transition: background-color .3s, color .3s; } .tuile-picto .picto { --picto-fond: rgba(255, 255, 255, .94); } .tuile:hover .tuile-picto { background: var(--rouge); color: #fff; } .tuile:hover .tuile-picto .picto { --picto-fond: var(--rouge); } .tuile:nth-child(1) .tuile-picto { width: 58px; height: 58px; padding: 11px; } /* En-têtes de pages : surtitre à picto */ .st-picto { display: inline-grid; width: 30px; height: 30px; padding: 5px; margin-right: 4px; border-radius: 8px; background: var(--rouge); color: #fff; } .st-picto .picto { --picto-fond: var(--rouge); } .hero-photo .st-picto, .hero-materiau .st-picto { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); } /* Pied de page */ .pied-fam { display: inline-flex; align-items: center; gap: 10px; } .pf-picto { flex: none; width: 20px; height: 20px; color: rgba(255, 255, 255, .55); transition: color .25s; } .pf-picto .picto { --picto-fond: var(--nuit); } .pied-fam:hover .pf-picto { color: var(--rouge); } @media (max-width: 1100px) { .pt-picto { width: 32px; height: 32px; padding: 6px; background: transparent; } } /* Contact : formulaire simple et bloc SAV */ .formulaire--contact { gap: 24px; } .contenu-page .formulaire--contact .ff-etape-tete { margin: 0; font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--f-titre); letter-spacing: -.025em; } .ff-aide-sav { margin-top: 10px !important; } .contenu-page .ca-texte { margin: 10px 0 0; font-size: .92rem; line-height: 1.5; color: var(--texte-doux); } .ca-texte strong { color: var(--encre); } /* ---------- Avis Google (inc/avis.php) ---------- */ .avis-synthese { display: grid; justify-items: start; gap: 12px; } .avis-synthese .as-note { display: flex; align-items: baseline; gap: 10px; margin: 0; max-width: none; } .as-note strong { font: 700 clamp(3.6rem, 2.4rem + 3.4vw, 5.6rem)/.85 var(--f-titre); letter-spacing: -.04em; color: #fff; } .as-note span { font-size: 1.1rem; color: rgba(255, 255, 255, .6); } .avis-synthese .ng-etoiles { width: 120px; height: 22px; -webkit-mask-size: 24px 22px; mask-size: 24px 22px; } .avis-synthese .as-detail { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .62); } .avis .ag-tete .ng-etoiles, .avis-synthese .ng-etoiles, .avis .ag-repli .ng-etoiles { background: linear-gradient(90deg, #F5A623 calc(var(--note) / 5 * 100%), rgba(255, 255, 255, .2) 0); } .avis-google { border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-l); background: rgba(255, 255, 255, .035); padding: clamp(20px, 3vw, 36px); } .avis .ag-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .avis .ag-fiche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: #fff; } .avis .ag-lieu { font: 600 1.05rem/1.2 var(--f-titre); color: #fff; margin-right: 4px; } .avis .ag-note { font: 700 1.5rem/1 var(--f-titre); color: #fff; } .avis .ag-nb { font-size: .95rem; color: rgba(255, 255, 255, .65); } .gmp-attribution { font: 400 14px/1 Roboto, Arial, sans-serif; font-style: normal; letter-spacing: normal; white-space: nowrap; color: #fff; } .avis .ag-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .avis .ag-avis { position: relative; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 26px 24px 20px; border-radius: var(--r-m); background: #fff; color: var(--texte); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7); } .avis .ag-avis::before { content: "\201C"; position: absolute; top: 4px; right: 20px; font: 700 5.5rem/1 var(--f-titre); color: var(--rouge); opacity: .16; pointer-events: none; } .avis .ag-auteur { display: flex; align-items: center; gap: 12px; padding-right: 40px; } .avis .ag-avatar { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; } .avis .ag-avatar img, .avis .ag-initiale { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .avis .ag-initiale { display: grid; place-items: center; background: var(--rouge-pale); color: var(--rouge); font: 700 1.1rem/1 var(--f-titre); } .avis .ag-auteur p { display: grid; gap: 3px; margin: 0; min-width: 0; } .avis .avis-google .ag-auteur p a.ag-nom { font-weight: 600; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; } .avis .avis-google .ag-auteur p a.ag-nom:hover { text-decoration: underline; text-decoration-color: var(--rouge); } .avis .ag-date { font-size: .82rem; color: var(--texte-doux); } .avis .ag-texte { flex: 1; margin: 0; padding: 0; border: 0; } .avis .ag-texte p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; margin: 0; font-size: 1rem; line-height: 1.62; color: var(--texte); } .avis .ag-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--ligne); font-size: .82rem; color: var(--texte-doux); } .avis .avis-google .ag-liens a { color: var(--texte-doux); text-decoration: underline; text-decoration-color: var(--ligne); text-decoration-thickness: 1px; text-underline-offset: .2em; } .avis .avis-google .ag-liens a:hover { color: var(--rouge); text-decoration-color: currentColor; } .avis .ag-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 26px; } .avis .ag-mention { margin: 0; max-width: 72ch; font-size: .85rem; line-height: 1.55; color: rgba(255, 255, 255, .6); } .avis .ag-fiches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .65); } .avis .avis-google p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-decoration-thickness: 1px; text-underline-offset: .22em; } .avis .avis-google p a:hover { text-decoration-color: currentColor; } .avis .avis-google .lien-suite { margin: 0; } .avis .avis-google .lien-suite a { color: #fff; text-decoration: none; border-bottom: 2px solid var(--rouge); } .avis .avis-google .lien-suite a .ico { color: #fff; } .avis .ag-repli { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .avis .ag-repli li { margin: 0; padding: 0; } .avis .ag-repli li::before { display: none; } .avis .ag-repli a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 18px 20px; border-radius: var(--r-m); background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; transition: background .3s; } .avis .ag-repli a:hover { background: rgba(255, 255, 255, .11); } .avis .ag-repli .ag-lieu { width: 100%; } @keyframes ag-entre { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .avis-google.est-charge .ag-avis { animation: ag-entre .8s var(--ease) both; } .avis-google.est-charge .ag-avis:nth-child(2) { animation-delay: .09s; } .avis-google.est-charge .ag-avis:nth-child(3) { animation-delay: .18s; } @media (prefers-reduced-motion: reduce) { .avis-google.est-charge .ag-avis { animation: none; } } @media (max-width: 1100px) { .avis .ag-liste { grid-template-columns: 1fr; } .avis .ag-texte p { -webkit-line-clamp: 6; } } .contenu-page .section > .avis { max-width: var(--large); } /* ---------- reCAPTCHA des formulaires ---------- */ .ff-captcha { display: grid; gap: 8px; justify-items: start; min-height: 78px; } .g-recaptcha:empty { display: block; box-sizing: border-box; width: min(304px, 100%); min-height: 78px; padding: 14px 16px; border: 1px dashed var(--ligne); border-radius: 4px; } .g-recaptcha:empty::before { content: "La case de vérification s’affiche dès que vous commencez à remplir le formulaire."; font-size: .85rem; line-height: 1.4; color: var(--texte-doux); } @media (max-width: 380px) { .g-recaptcha { transform: scale(.86); transform-origin: 0 0; } } .caa-tel { white-space: nowrap; } /* ---------- Pied de page : tablette et téléphone ---------- */ @media (max-width: 960px) { .pied-haut { grid-template-columns: 1fr; } } @media (max-width: 640px) { .pied { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } .pied-actions .btn { flex: 1 1 auto; justify-content: center; } .pied-agence { padding: 16px 14px; } .pied-agence strong { font-size: 1rem; } .pa-adresse { font-size: .84rem; } .pied-agence .pa-tel { font-size: .88rem; } .pied-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .pied-nav > div:last-child { grid-column: 1 / -1; } .pied-nav > div:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; } .pied-fam { align-items: flex-start; line-height: 1.3; } .pied-bas { flex-direction: column; align-items: flex-start; } } /* Sans surtitre, un titre peut devenir le premier élément de son bloc : pas de marge au-dessus. */ .contenu-page div > h2:first-child, .contenu-page div > h3:first-child { margin-top: 0; }